diff --git a/package-lock.json b/package-lock.json
index f2821e8695697a5450a7254a3e25e03c0c2babe7..4dc8e7a5f900c9b5ec1af37a28297e8381a27bf4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1255,6 +1255,181 @@
       "integrity": "sha512-T7VNNlYVM1SgQ+VsMYhnDkcGmWhQdL0bDyGm5TlQ3GBXnJscEClUUOKduWTmm2zCnvNLC1hc3JpuXjs/nFOc5w==",
       "dev": true
     },
+    "@syncfusion/ej2-base": {
+      "version": "18.3.35",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-base/-/ej2-base-18.3.35.tgz",
+      "integrity": "sha512-RwWoIcJ9OY0ej/EDxN4+1o6gYLSQQBX2QZ7qh2b1JYW2BU1Jub7TJKjoXLVzIktPNADBdy36ibKTF5hImKKYkA==",
+      "requires": {
+        "@syncfusion/ej2-icons": "~18.3.35"
+      }
+    },
+    "@syncfusion/ej2-buttons": {
+      "version": "18.3.35",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-buttons/-/ej2-buttons-18.3.35.tgz",
+      "integrity": "sha512-S7KkiyHINfCE/hg8xeWeXLMAMa7r/q80qbA40RwnJ8898Aa6VUGQnHl/Y2/oeNUEhvpHlIaDUp2W+fkcGMryOw==",
+      "requires": {
+        "@syncfusion/ej2-base": "~18.3.35"
+      }
+    },
+    "@syncfusion/ej2-calendars": {
+      "version": "18.3.35",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-calendars/-/ej2-calendars-18.3.35.tgz",
+      "integrity": "sha512-t0b9HGIL/AsT6UoB3k9WG/rPTO3lB/JWGpuQnz4xmaoYBEcFCes9aGdRpvt6EA2BWio+zVe3h8JTi/9swYefVA==",
+      "requires": {
+        "@syncfusion/ej2-base": "~18.3.35",
+        "@syncfusion/ej2-buttons": "~18.3.35",
+        "@syncfusion/ej2-inputs": "~18.3.35",
+        "@syncfusion/ej2-lists": "~18.3.35",
+        "@syncfusion/ej2-popups": "~18.3.35"
+      }
+    },
+    "@syncfusion/ej2-compression": {
+      "version": "18.3.35",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-compression/-/ej2-compression-18.3.35.tgz",
+      "integrity": "sha512-789nU01FEBRuNOn9WeLlqwHetXvBV9JcV7MNs9Cht00gcJjQ6Gyw6VZuHduSHnZ+kJG9xvoZD8oikhFsMOudmg==",
+      "requires": {
+        "@syncfusion/ej2-file-utils": "~18.3.35"
+      }
+    },
+    "@syncfusion/ej2-data": {
+      "version": "18.3.35",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-data/-/ej2-data-18.3.35.tgz",
+      "integrity": "sha512-JcF2fA74dF5nEACIkY8CzuSaVzFjPPpfTYHiOphuK8WIKz2k1CD64AlACtN858YcSZY32/G4LcKBiLF7kSiGMw==",
+      "requires": {
+        "@syncfusion/ej2-base": "~18.3.35"
+      }
+    },
+    "@syncfusion/ej2-dropdowns": {
+      "version": "18.3.35",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-18.3.35.tgz",
+      "integrity": "sha512-bZH66EvtasUthXhVQHTvobkBt+WcANk49wBqBDb8C0vh0SxIdJg1ex9t3BEiAHz05Q2P6XTl0CYLwwfU+lUs0A==",
+      "requires": {
+        "@syncfusion/ej2-base": "~18.3.35",
+        "@syncfusion/ej2-data": "~18.3.35",
+        "@syncfusion/ej2-inputs": "~18.3.35",
+        "@syncfusion/ej2-lists": "~18.3.35",
+        "@syncfusion/ej2-navigations": "~18.3.35",
+        "@syncfusion/ej2-popups": "~18.3.35"
+      }
+    },
+    "@syncfusion/ej2-excel-export": {
+      "version": "18.3.35",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-excel-export/-/ej2-excel-export-18.3.35.tgz",
+      "integrity": "sha512-MX17hKxihx2Ztv0mMP4b7wSVxk2OOwyzk33mUUeW8z0s6xNyb7G684MX/NHUpJb56mJZjgD7DP0G7zzW/cnrdw==",
+      "requires": {
+        "@syncfusion/ej2-base": "~18.3.35",
+        "@syncfusion/ej2-compression": "~18.3.35"
+      }
+    },
+    "@syncfusion/ej2-file-utils": {
+      "version": "18.3.35",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-file-utils/-/ej2-file-utils-18.3.35.tgz",
+      "integrity": "sha512-TAZPIypWFf7jOvxW/Lme6zN+cqPcCWnlK0Oh1j9l+51XTPSAMQItGpcQW50RDnAo+HsAZtaiW7ES3tMFVfFQIA=="
+    },
+    "@syncfusion/ej2-grids": {
+      "version": "18.3.35",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-grids/-/ej2-grids-18.3.35.tgz",
+      "integrity": "sha512-+Cd6b6M4OSFuyq7/3DA7XNEd5fqz01XOt2l2nvCN2E4ckHZ8UtTu+tZ8e55Wog2lmzfo7nXlsLlkcU6YudhI6g==",
+      "requires": {
+        "@syncfusion/ej2-base": "~18.3.35",
+        "@syncfusion/ej2-buttons": "~18.3.35",
+        "@syncfusion/ej2-calendars": "~18.3.35",
+        "@syncfusion/ej2-compression": "~18.3.35",
+        "@syncfusion/ej2-data": "~18.3.35",
+        "@syncfusion/ej2-dropdowns": "~18.3.35",
+        "@syncfusion/ej2-excel-export": "~18.3.35",
+        "@syncfusion/ej2-file-utils": "~18.3.35",
+        "@syncfusion/ej2-inputs": "~18.3.35",
+        "@syncfusion/ej2-lists": "~18.3.35",
+        "@syncfusion/ej2-navigations": "~18.3.35",
+        "@syncfusion/ej2-pdf-export": "~18.3.35",
+        "@syncfusion/ej2-popups": "~18.3.35",
+        "@syncfusion/ej2-splitbuttons": "~18.3.35"
+      }
+    },
+    "@syncfusion/ej2-icons": {
+      "version": "18.3.35",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-icons/-/ej2-icons-18.3.35.tgz",
+      "integrity": "sha512-R2TR+rYAodlT+yOzW/m5q62aB2Fo2c+anUFyVAcJil7LtrVzc1RAz4VWl20E2Vd5PPycN6qgp8lXtyQZopy7XA=="
+    },
+    "@syncfusion/ej2-inputs": {
+      "version": "18.3.35",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-inputs/-/ej2-inputs-18.3.35.tgz",
+      "integrity": "sha512-uESQfyZba6cdwFuIzHhGCe4Z4vD4BHlxIkWC70mVKj0Z66ZkKqNfANXHxDCbFishzThgpTQfCzJ1Y1nodjDRHA==",
+      "requires": {
+        "@syncfusion/ej2-base": "~18.3.35",
+        "@syncfusion/ej2-buttons": "~18.3.35",
+        "@syncfusion/ej2-popups": "~18.3.35",
+        "@syncfusion/ej2-splitbuttons": "~18.3.35"
+      }
+    },
+    "@syncfusion/ej2-lists": {
+      "version": "18.3.35",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-lists/-/ej2-lists-18.3.35.tgz",
+      "integrity": "sha512-ZSOGuRALIaGeUX5FU81rRvDCOPhocR5fs6Nd3YQlZdH/RBLxbzvSTaN9XG+X8szL2EcTaQNb/UJe9eIIx3NJoA==",
+      "requires": {
+        "@syncfusion/ej2-base": "~18.3.35",
+        "@syncfusion/ej2-buttons": "~18.3.35",
+        "@syncfusion/ej2-data": "~18.3.35"
+      }
+    },
+    "@syncfusion/ej2-navigations": {
+      "version": "18.3.35",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-navigations/-/ej2-navigations-18.3.35.tgz",
+      "integrity": "sha512-MSDg580dUrwTybaRjuVsm6A0HQ3urlO6alVEzyR/Udmzc3LzP0VABOFLxnrbLaM95q37Was1mi8hb8vATjhQZA==",
+      "requires": {
+        "@syncfusion/ej2-base": "~18.3.35",
+        "@syncfusion/ej2-buttons": "~18.3.35",
+        "@syncfusion/ej2-data": "~18.3.35",
+        "@syncfusion/ej2-inputs": "~18.3.35",
+        "@syncfusion/ej2-lists": "~18.3.35",
+        "@syncfusion/ej2-popups": "~18.3.35"
+      }
+    },
+    "@syncfusion/ej2-pdf-export": {
+      "version": "18.3.35",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-pdf-export/-/ej2-pdf-export-18.3.35.tgz",
+      "integrity": "sha512-k+Nr+y7Ixa+srVKHFizVXhW1sOYgBTYrYM8NasgOVVDV8laK/OfmAyUeQPHjUc+P92sz4GFNcGuhlciVYTIX6g==",
+      "requires": {
+        "@syncfusion/ej2-compression": "~18.3.35"
+      }
+    },
+    "@syncfusion/ej2-popups": {
+      "version": "18.3.35",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-popups/-/ej2-popups-18.3.35.tgz",
+      "integrity": "sha512-F/rybqNVn9hUgP4eLtIEq42OvpKTVTu1r1cWV4b3fgOeMbdt+NcUYVM4TXgApnfj3cj+YLM+xU0qiBgoK9ClwA==",
+      "requires": {
+        "@syncfusion/ej2-base": "~18.3.35",
+        "@syncfusion/ej2-buttons": "~18.3.35"
+      }
+    },
+    "@syncfusion/ej2-splitbuttons": {
+      "version": "18.3.35",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-splitbuttons/-/ej2-splitbuttons-18.3.35.tgz",
+      "integrity": "sha512-7ewCA50RQuH6a+vSrPh0QCIBJ8qdgWpWXdZksGvFZPbMTFrwLZEa7Z8XbWPNItz3WrOKI90sDH6BWQH6MZkcsA==",
+      "requires": {
+        "@syncfusion/ej2-base": "~18.3.35",
+        "@syncfusion/ej2-popups": "~18.3.35"
+      }
+    },
+    "@syncfusion/ej2-vue-base": {
+      "version": "18.3.35",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-vue-base/-/ej2-vue-base-18.3.35.tgz",
+      "integrity": "sha512-6wBH5oG0Dh+DdWBVq21PBAEEtVQcCgL7EOQseHL2T0HcEevh4p7+n2IjYehwZk+FhxT2R74ApMw8ip8GyoOQwA==",
+      "requires": {
+        "@syncfusion/ej2-base": "~18.3.35"
+      }
+    },
+    "@syncfusion/ej2-vue-grids": {
+      "version": "18.3.35",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-vue-grids/-/ej2-vue-grids-18.3.35.tgz",
+      "integrity": "sha512-c/aVrBCPapI0LOcHzWK5fUWJIRwFH4Li3owLGV1Q45+aPw7umA8alkp8LTDV8njOdkWCysxeXaXBoNw4vzSnRQ==",
+      "requires": {
+        "@syncfusion/ej2-base": "~18.3.35",
+        "@syncfusion/ej2-grids": "18.3.35",
+        "@syncfusion/ej2-vue-base": "~18.3.35"
+      }
+    },
     "@types/anymatch": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz",
diff --git a/package.json b/package.json
index 2e5df6f517730533733c159771b661d86b07b069..d5ddb78c9ae2794f1f10840320708b2a68e5b773 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.32",
     "@fortawesome/free-solid-svg-icons": "^5.15.1",
     "@fortawesome/vue-fontawesome": "^2.0.0",
+    "@syncfusion/ej2-vue-grids": "^18.3.35",
     "axios": "^0.20.0",
     "bootstrap": "^4.5.2",
     "bootstrap-vue": "^2.17.3",
diff --git a/src/components/Calendar.vue b/src/components/Calendar.vue
index 6f22f19bcd5b118af8f3e8352e31e12eec83adf1..0335e78da204d584c0ad680adbe1cc51a30ea150 100644
--- a/src/components/Calendar.vue
+++ b/src/components/Calendar.vue
@@ -60,7 +60,7 @@ export default {
   },
 
   data: () => ({
-    event: new Event('','','','',''),
+    event: new Event('','','','','', ''),
     events: JSON.parse(localStorage.getItem("events")),
 
     formData: {
@@ -96,10 +96,9 @@ export default {
 
     loadData(){
 
+      console.log("loadDAta")
       this.$store.dispatch('event/get').then(
           (data) => {
-            console.log("data"+data)
-            localStorage.setItem("events", JSON.stringify([]) );
             this.events = [];
             data.forEach(row => {
               let title = row.title;
@@ -117,7 +116,6 @@ export default {
     // Create Event
     "addEvent": function addEvent(popup_data, form_data) {
 
-      console.log("yesss")
       let payload = {
         data: {
           placeholder: form_data,
@@ -140,6 +138,10 @@ export default {
 
       this.$store.dispatch('event/insert', this.event);
       this.$kalendar.closePopups();
+      setTimeout(() => {
+        this.$router.push("/");
+        this.$router.push("/calendar");
+      }, 1000);
       //this.clearFormData();
     },
 
@@ -152,7 +154,7 @@ export default {
         id: kalendarEvent.kalendar_id,
       })
       this.$store.dispatch('event/delete', kalendarEvent.kalendar_id);
-      setTimeout(() => this.loadData(), 500);
+      setTimeout(() => this.loadData(), 1000);
     }
 
   }
diff --git a/src/components/Certifications.vue b/src/components/Certifications.vue
index 1140b296b25683269d2261f3ff0225687e68d313..65611c430b14ddacb0a752ec5b2a5993bef02e30 100644
--- a/src/components/Certifications.vue
+++ b/src/components/Certifications.vue
@@ -1,49 +1,23 @@
 <template>
-  <div class="content col-md-12">
-    <div id="search_box" class="search_box col-md-4">
-      <div class="entry_box-inner">
-        <a id="editbutton" class="button" href="./editcertification" style="visibility: hidden">Eintrag bearbeiten</a>
+  <div class="card">
+    <div class="e-resizable">
+      <div>
+        <div class="entry_box-inner">
+        <a id="editbutton" class="button" href="./editcertification" style="display: none">Eintrag bearbeiten</a>
         <a id="addbutton" class="button" href="./createcertification">neuen Eintrag hinzufügen</a>
         <a id="deletebutton" class="button" @click="deleterows">ausgewählte Einträge löschen</a>
         <a id="exportbutton" class="button" href="./exporttablecertification">Tabelle exportieren</a>
       </div>
-      <div class="search_box-inner">
-        <i><img src="../assets/search.svg"></i>
-        <input id="inpt_search" v-model="filter" type="text" class="search__input" placeholder="Suchen..." />
+        <vue-good-table
+            :columns="columns"
+            :rows="rows"
+            max-height="760px"
+            @on-selected-rows-change="selectionChanged"
+            :select-options="{ enabled: true }"
+            :search-options="{ enabled: true }">
+        </vue-good-table>
       </div>
     </div>
-    <table id="Table">
-      <tr>
-        <th scope="row">
-          <div class="form-check">
-            <input name="checkbox" type="checkbox" class="form-check-input" id="checkbox_headerline" @click="checkAllBoxes">
-            <label class="form-check-label" for="checkbox_headerline"></label>
-          </div>
-        </th>
-        <th v-on:click="sortTable('imgsortcertificationnumber')"><img id='imgsortcertificationnumber' :src="require('../assets/'+sortImg)">Zertifikats-ID</th>
-        <th v-on:click="sortTable('imgsortcertificationtype')"><img id='imgsortcertificationtype' :src="require('../assets/'+sortImg)">Zertifikatsart</th>
-        <th v-on:click="sortTable('imgsortcertificationname')"><img id='imgsortcertificationname' :src="require('../assets/'+sortImg)">Zertifikatsname</th>
-        <th v-on:click="sortTable('imgsortcertificationowner')"><img id='imgsortcertificationowner' :src="require('../assets/'+sortImg)">Zertifikatsbesitzer</th>
-        <th v-on:click="sortTable('imgsortcertificationdate')"><img id='imgsortcertificationdate' :src="require('../assets/'+sortImg)">Austellungsdatum</th>
-        <th v-on:click="sortTable('imgsortcertificationexpiredate')"><img id='imgsortcertificationexpiredate' :src="require('../assets/'+sortImg)">Ablaufdatum</th>
-
-
-      </tr>
-      <tr v-for="row in filteredRows" :key="row.id">
-        <td scope="row">
-          <div class="form-check">
-            <input type="checkbox" class="form-check-input" name="checkbox_tablerow" id="checkbox_tablerow" v-model="checkedBoxes" :value="row.id">
-            <label class="form-check-label" for="checkbox_tablerow"></label>
-          </div>
-        </td>
-        <td>{{row.certificationid}}</td>
-        <td>{{row.certificationtype}}</td>
-        <td>{{row.certificationname}}</td>
-        <td>{{row.certificationowner}}</td>
-        <td>{{row.certificationdate}}</td>
-        <td>{{row.certificationexpiredate}}</td>
-      </tr>
-    </table>
   </div>
 </template>
 
@@ -53,12 +27,33 @@ export default {
   data: function() {
     return {
       rows: [],
+      columns: [
+        {
+          label: 'Zertifikats-ID',
+          field: 'certificationid',
+        },
+        {
+          label: 'Zertifikatsart',
+          field: 'certificationtype',
+        },
+        {
+          label: 'Zertifikatsname',
+          field: 'certificationname',
+        },
+        {
+          label: 'Zertifikatsbesitzer',
+          field: 'certificationowner',
+        },
+        {
+          label: 'Austellungsdatum',
+          field: 'certificationdate',
+        },
+        {
+          label: 'Ablaufdatum',
+          field: 'certificationexpiredate',
+        }
+      ],
       checkedBoxes: [],
-      rowIDs: ['imgsortcertificationnumber','imgsortcertificationname','imgsortcertificationowner','imgsortcertificationdate'],
-      filter:'',
-      currentSort:'imgsortcertificationnumber',
-      currentSortDir:'asc',
-      sortImg: 'sort_def.svg',
     }
   },
 
@@ -69,44 +64,18 @@ export default {
 
   methods: {
 
-    deleterows(){
-      let x = 0;
-      for (x; x < this.checkedBoxes.length; x++){
-        this.$store.dispatch('certification/delete', this.checkedBoxes[x]).then(
-            data => {
-              this.message = data.message;
-            },
-            error => {
-              this.message = (error.response && error.response.data) || error.message || error.toString();
-              this.successful = false;
-            }
-        );
-      }
-      this.rows = [];
-      this.loadData();
-    },
-
-    checkAllBoxes(){
-      var headercheckbox = document.getElementById('checkbox_headerline');
-      var headercheckboxvalue = headercheckbox.checked;
-
-      let checkboxes = document.getElementsByName('checkbox_tablerow');
-      for(var i=0, n=checkboxes.length;i<n;i++) {
-        if (headercheckboxvalue){
-          this.checkedBoxes.push(this.rows[i].id);
-        } else {
-          this.checkedBoxes.pop(this.rows[i].id);
-        }
-        checkboxes[i].checked = headercheckboxvalue;
+    selectionChanged(params) {
+      this.checkedBoxes = [];
+      for(let i = 0; i < params.selectedRows.length; i++) {
+        this.checkedBoxes[i] = params.selectedRows[i].id;
       }
     },
 
     loadData(){
       this.$store.dispatch('certification/getAll').then(
           (data) => {
-            console.log(data)
-            let x;
-            for(x = 0; x < data.length; x++){
+            this.rows = [];
+            for(let x = 0; x < data.length; x++){
               this.rows.push({id: data[x].id, certificationid: data[x].certifications_id, certificationtype: data[x].certificationtype,  certificationname: data[x].certificationname, certificationowner: data[x].certificationowner, certificationdate: data[x].certificationdate, certificationexpiredate: data[x].certificationexpiredate});
             }
           },
@@ -117,128 +86,33 @@ export default {
       );
     },
 
-    "sortTable": function sortTable(col) {
-      this.currentSort = col;
-      if (this.currentSortDir === 'asc') {
-        this.currentSortDir = 'desc';
-
-        this.rowIDs.forEach(element =>{
-          console.log(this.currentSort);
-          if(this.currentSort === element){
-            document.getElementById(element).src = require('../assets/sort_asc.svg')
-          } else {
-            document.getElementById(element).src = require('../assets/sort_def.svg')
-          }
-        });
-
-        col = col.toString().replace("imgsort","");
-        this.rows.sort(function (a, b) {
-          if (typeof(a[col]) === 'number' && typeof(b[col]) === 'number'){
-            if (a[col] < b[col]) {
-              return 1;
-            } else if (a[col] > b[col]) {
-              return -1;
-            }
-          } else if (typeof(a[col]) === 'string' && typeof(b[col]) === 'string'){
-            if (a[col].toLowerCase() < b[col].toLowerCase()) {
-              return 1;
-            } else if (a[col].toLowerCase() > b[col].toLowerCase()) {
-              return -1;
-            }
-          }
-          return 0;
-        })
-      } else {
-        this.currentSortDir = 'asc';
-
-        this.rowIDs.forEach(element =>{
-          if(this.currentSort === element){
-            document.getElementById(element.toString()).src = require('../assets/sort_desc.svg');
-          } else {
-            document.getElementById(element.toString()).src = require('../assets/sort_def.svg');
-          }
-        });
-
-        col = col.toString().replace("imgsort","");
-        this.rows.sort(function (a, b) {
-          if (typeof(a[col]) === 'number' && typeof(b[col]) === 'number'){
-            if (a[col] > b[col]) {
-              return 1;
-            } else if (a[col]< b[col]) {
-              return -1;
-            }
-          } else if (a[col].toLowerCase() < b[col].toLowerCase()) {
-            if (a[col].toLowerCase() > b[col].toLowerCase()) {
-              return 1;
-            } else if (a[col].toLowerCase() < b[col].toLowerCase()) {
-              return -1;
-            }
-          }
-          return 0;
-        })
+    deleterows(){
+      for (let x = 0; x < this.checkedBoxes.length; x++){
+        this.$store.dispatch('certification/delete', this.checkedBoxes[x]);
       }
-    }
+      setTimeout(() => this.loadData(), 1000);
+    },
+
+    exportExcel(){
+      this.$store.dispatch('certification/exportExcel', this.checkedBoxes);
+    },
   },
 
   watch: {
     checkedBoxes(){
       if (this.checkedBoxes.length > 1 || this.checkedBoxes.length < 1){
-        document.getElementById("editbutton").style.visibility = "hidden";
-        // EXPORT & DELETE
+        document.getElementById("editbutton").style.display = "none";
       } else {
-        document.getElementById("editbutton").style.visibility = "visible";
+        document.getElementById("editbutton").style.display = "unset";
       }
       localStorage.setItem('checkedBoxID', this.checkedBoxes[0]);
     }
   },
-  computed: {
-    "columns": function columns() {
-      if (this.rows.length === 0) {
-        return [];
-      }
-      return Object.keys(this.rows[0])
-    },
-    filteredRows() {
-      return this.rows.filter(row => {
-        const certificationid = row.certificationid;
-        const certificationname = row.certificationname.toLowerCase();
-        const certificationowner = row.certificationowner.toLowerCase();
-        const certificationdate = row.certificationdate;
-        const certificationexpiredate = row.certificationexpiredate;
-        const searchTerm = this.filter.toLowerCase();
 
-        return certificationid.includes(searchTerm) || certificationname.includes(searchTerm) || certificationowner.includes(searchTerm) || certificationdate.includes(searchTerm) || certificationexpiredate.includes(searchTerm);
-      });
-    },
-  }
 }
 </script>
 
 <style scoped>
-.content{
-  background-color: whitesmoke;
-  width: 100%;
-  height: 100%;
-  overflow-x: auto;
-  white-space: nowrap;
-}
-
-.search_box{
-  width: 100%;
-  margin-top: 50px;
-  text-align:left;
-  position: relative;
-}
-
-.search_box-inner {
-  display:inline;
-  font-size:1em;
-  border-radius: 8em;
-  border:0.1em solid rgba(218, 208, 190, 1);
-  box-shadow:0 0 0.3em rgba(60, 60, 60, 0.4);
-  padding:0.3em;
-  background:white;
-}
 
 .entry_box-inner {
   position: relative;
@@ -246,74 +120,40 @@ export default {
 }
 
 #exportbutton, #addbutton, #editbutton, #deletebutton {
-  margin-right: 25px;
+  margin: 15px;
   display:inline-block;
   padding:0.3em 1.2em;
-  border-radius:2em;
+  border-radius: 10px;
   box-sizing: border-box;
   text-decoration:none;
-  font-weight:300;
+  font-weight: bold;
   color:#FFFFFF;
   background-color:#528fff;
+  border: 2px solid #2770f5; /* Green */
   text-align:center;
   transition: all 0.2s;
 }
 
 #exportbutton:hover, #deletebutton:hover, #addbutton:hover , #editbutton:hover{
-  background-color:#9fc1ff;
-}
-
-.search_box-inner i img {
-  width: 5%;
-  text-align: center;
-  margin: 5px;
-}
-
-#inpt_search{
-  transition:all 0.2s ease-out;
-  width:15px;
-  border-radius:0;
-  box-shadow:none;
-  outline: none;
-  padding:0;
-  margin:0;
-  border:0;
-  background-color: transparent;
-  opacity:0;
-}
-#inpt_search:focus {
-  width: 10em;
-  opacity: 1;
-}
-
-.content table {
-  margin-top: 50px;
-  margin-right: 1275px;
-  display: inline-block;
-  font-family: arial, sans-serif;
-  border-collapse: collapse;
-  width: 100%;
+  background-color: #70a1ff;
 }
 
-.content table th {
-  text-transform: uppercase;
-  text-align: left;
-  background: #9fc1ff;
-  color: #000000;
-  padding: 8px;
-  min-width: 30px;
+.card {
+  /* Add shadows to create the "card" effect */
+  box-shadow: 0 4px 30px 0 rgba(0,0,0,0.1);
+  transition: 0.2s;
+  margin-top: 20px;
+  margin-right: 10px;
+  height: 95vh;
+  border-radius: 3px;
+  border-color: #f2f5f8;
+  border: 0px;
 }
-
-.content table td {
-  text-align: left;
-  padding: 8px;
-  border-right: 2px solid #9fc1ff;
-}
-.content table td:last-child {
-  border-right: none;
+.e-resizable {
+  overflow: auto;
+  height: 100vh;
+  background-color: #f2f5f8;
+  border-color: transparent;
 }
 
-.content table tbody tr:nth-child(2n) td {
-  background: #D4D8F9;
-}
 </style>
\ No newline at end of file
diff --git a/src/components/Courses.vue b/src/components/Courses.vue
index 48b34524caa3c2df9c13146f5e6f70d78cb98395..85e89438b4ae1e30bd9ce47167031eee7b3a4ca5 100644
--- a/src/components/Courses.vue
+++ b/src/components/Courses.vue
@@ -1,75 +1,22 @@
 <template>
   <div class="card">
     <div class="e-resizable">
-          <div class="entry_box-inner">
-            <a id="editbutton" class="button" href="./editcourse" style="visibility: hidden">Eintrag bearbeiten</a>
-            <a id="addbutton" class="button" href="./createcourse">neuen Eintrag hinzufügen</a>
-            <a id="deletebutton" class="button" @click="deleterows">ausgewählte Einträge löschen</a>
-            <a id="exportbutton" class="button" @click="exportExcel">Tabelle exportieren</a>
-          </div>
-          <div>
-            <vue-good-table
-                :columns="columns"
-                :rows="rows"
-                max-height="790px"
-                @on-selected-rows-change="selectionChanged"
-                :select-options="{ enabled: true }"
-                :search-options="{ enabled: true }"/>
-          </div>
-      <!--table style="height: 100%; width: 100%">
-        <thead>
-        <tr>
-          <th scope="row">
-            <div class="form-check">
-              <input name="checkbox" type="checkbox" class="form-check-input" id="checkbox_headerline" @click="checkAllBoxes">
-              <label class="form-check-label" for="checkbox_headerline"></label>
-            </div>
-          </th>
-          <th v-on:click="sortTable('imgsortcoursenumber')"><img id='imgsortcoursenumber' :src="require('../assets/'+sortImg)">Angebotsnummer</th>
-          <th v-on:click="sortTable('imgsortcourseoffer')"><img id="imgsortcourseoffer" :src="require('../assets/'+sortImg)">Angebot</th>
-          <th v-on:click="sortTable('imgsortcoursename')"><img id="imgsortcoursename" :src="require('../assets/'+sortImg)">Kursname</th>
-          <th v-on:click="sortTable('imgsorteventtype')"><img id="imgsorteventtype" :src="require('../assets/'+sortImg)">Veranstaltungsart</th>
-          <th v-on:click="sortTable('imgsortcoursedate')"><img id="imgsortcoursedate" :src="require('../assets/'+sortImg)">Kursdatum</th>
-          <th v-on:click="sortTable('imgsorttopic')"><img id="imgsorttopic" :src="require('../assets/'+sortImg)">Thema</th>
-          <th v-on:click="sortTable('imgsortcourselocation')"><img id="imgsortcourselocation" :src="require('../assets/'+sortImg)">Kursort</th>
-          <th v-on:click="sortTable('imgsortaccompanyingteacher')"><img id="imgsortaccompanyingteacher" :src="require('../assets/'+sortImg)">begleitende Lehrkraft</th>
-          <th v-on:click="sortTable('imgsortsupervisingstudents')"><img id="imgsortsupervisingstudents" :src="require('../assets/'+sortImg)">betreuende Studenten</th>
-          <th v-on:click="sortTable('imgsortpresentstudents')"><img id="imgsortpresentstudents" :src="require('../assets/'+sortImg)">Anzahl der Anwesenden</th>
-          <th v-on:click="sortTable('imgsortregisteredstudents')"><img id="imgsortregisteredstudents" :src="require('../assets/'+sortImg)">Anzahl der Angemeldeten</th>
-          <th v-on:click="sortTable('imgsortanzahlung')"><img id="imgsortanzahlung" :src="require('../assets/'+sortImg)">Anzahlung</th>
-          <th v-on:click="sortTable('imgsorthonorar')"><img id="imgsorthonorar" :src="require('../assets/'+sortImg)">Honorar</th>
-          <th v-on:click="sortTable('imgsortinstructor')"><img id="imgsortinstructor" :src="require('../assets/'+sortImg)">Kursleiter</th>
-          <th v-on:click="sortTable('imgsortstatus')"><img id="imgsortstatus" :src="require('../assets/'+sortImg)">Aktiv</th>
-          <th v-on:click="sortTable('imgsortnotefield')"><img id="imgsortnotefield" :src="require('../assets/'+sortImg)">Notiz</th>
-        </tr>
-        </thead>
-        <body>
-          <tr v-for="row in filteredRows" :key="row.id">
-            <td scope="row">
-              <div class="form-check">
-                <input type="checkbox" class="form-check-input" name="checkbox_tablerow" id="checkbox_tablerow" v-model="checkedBoxes" :value="row.id">
-                <label class="form-check-label" for="checkbox_tablerow"></label>
-              </div>
-            </td>
-            <td>{{row.coursenumber}}</td>
-            <td style="padding-right:200px;">{{row.courseoffer}}</td>
-            <td style="padding-right:200px;">{{row.coursename}}</td>
-            <td>{{row.eventtype}}</td>
-            <td>{{row.coursedate}}</td>
-            <td>{{row.topic}}</td>
-            <td style="padding-right:200px;">{{row.courselocation}}</td>
-            <td>{{row.accompanyingteacher}}</td>
-            <td>{{row.supervisingstudents}}</td>
-            <td>{{row.presentstudents}}</td>
-            <td>{{row.registeredstudents}}</td>
-            <td>{{row.anzahlung}}</td>
-            <td>{{row.honorar}}</td>
-            <td>{{row.instructor}}</td>
-            <td>{{row.status}}</td>
-            <td style="padding-right:300px;">{{row.notefield}}</td>
-          </tr>
-          </body>
-      </table-->
+      <div>
+        <div class="entry_box-inner">
+          <a id="editbutton"   class="button" href="./editcourse" style="display: none">Eintrag bearbeiten</a>
+          <a id="addbutton"    class="button" href="./createcourse">neuen Eintrag hinzufügen</a>
+          <a id="deletebutton" class="button" @click="deleterows">ausgewählte Einträge löschen</a>
+          <a id="exportbutton" class="button" @click="exportExcel">Tabelle exportieren</a>
+        </div>
+        <vue-good-table
+            :columns="columns"
+            :rows="rows"
+            max-height="760px"
+            @on-selected-rows-change="selectionChanged"
+            :select-options="{ enabled: true }"
+            :search-options="{ enabled: true }">
+        </vue-good-table>
+      </div>
     </div>
   </div>
 </template>
@@ -104,6 +51,7 @@ export default {
         {
           label: 'Kursdatum',
           field: 'coursedate',
+          tdClass: 'text-center',
         },
         {
           label: 'Thema',
@@ -124,10 +72,12 @@ export default {
         {
           label: 'Anzahl der Anwesenden',
           field: 'presentstudents',
+          type: 'number',
         },
         {
           label: 'Anzahl der Angemeldeten',
           field: 'registeredstudents',
+          type: 'number',
         },
         {
           label: 'Anzahlung',
@@ -144,6 +94,8 @@ export default {
         {
           label: 'Aktiv',
           field: 'status',
+          formatFn: this.formatStatus,
+          tdClass: 'text-center',
         },
         {
           label: 'Notiz',
@@ -160,6 +112,9 @@ export default {
   },
 
   methods: {
+    formatStatus: function(value) {
+      return (value === 0)? "Nein" : "Ja";
+    },
     selectionChanged(params) {
       this.checkedBoxes = [];
       for(let i = 0; i < params.selectedRows.length; i++) {
@@ -167,14 +122,6 @@ export default {
       }
     },
 
-    deleterows(){
-      for (let x = 0; x < this.checkedBoxes.length; x++){
-        this.$store.dispatch('course/delete', this.checkedBoxes[x]);
-      }
-      setTimeout(() => this.loadData(), 1000);
-      //this.rows = [];
-    },
-
     loadData(){
       this.$store.dispatch('course/getAll').then(
         (data) => {
@@ -190,6 +137,13 @@ export default {
       );
     },
 
+    deleterows(){
+      for (let x = 0; x < this.checkedBoxes.length; x++){
+        this.$store.dispatch('course/delete', this.checkedBoxes[x]);
+      }
+      setTimeout(() => this.loadData(), 1000);
+    },
+
     exportExcel(){
       this.$store.dispatch('course/exportExcel', this.checkedBoxes);
     },
@@ -199,10 +153,9 @@ export default {
   watch: {
     checkedBoxes(){
       if (this.checkedBoxes.length > 1 || this.checkedBoxes.length < 1){
-        document.getElementById("editbutton").style.visibility = "hidden";
-        // EXPORT & DELETE
+        document.getElementById("editbutton").style.display = "none";
       } else {
-        document.getElementById("editbutton").style.visibility = "visible";
+        document.getElementById("editbutton").style.display = "unset";
       }
       localStorage.setItem('checkedBoxID', this.checkedBoxes[0]);
     }
@@ -213,36 +166,28 @@ export default {
 
 <style scoped>
 
-.content{
-  background-color: transparent;
-  width: 100%;
-  height: 100vh;
-  overflow: auto;
-  scroll-behavior: unset;
-  white-space: nowrap;
-}
-
 .entry_box-inner {
   position: relative;
   display:inline;
 }
 
 #exportbutton, #addbutton, #editbutton, #deletebutton {
-  margin-right: 25px;
+  margin: 15px;
   display:inline-block;
   padding:0.3em 1.2em;
-  border-radius:2em;
+  border-radius: 10px;
   box-sizing: border-box;
   text-decoration:none;
-  font-weight:300;
+  font-weight: bold;
   color:#FFFFFF;
   background-color:#528fff;
+  border: 2px solid #2770f5; /* Green */
   text-align:center;
   transition: all 0.2s;
 }
 
 #exportbutton:hover, #deletebutton:hover, #addbutton:hover , #editbutton:hover{
-  background-color:#9fc1ff;
+  background-color: #70a1ff;
 }
 
 .card {
@@ -253,15 +198,14 @@ export default {
   margin-right: 10px;
   height: 95vh;
   border-radius: 3px;
-  border-color: transparent;
+  border-color: #f2f5f8;
+  border: 0px;
 }
 .e-resizable {
-  resize: both;
   overflow: auto;
   height: 100vh;
-  background-color: transparent;
+  background-color: #f2f5f8;
   border-color: transparent;
 }
 
-
 </style>
\ No newline at end of file
diff --git a/src/components/CreateEditComponents/CreateStudent.vue b/src/components/CreateEditComponents/CreateStudent.vue
index aa33d2682613f9c0406dfa47f8c953ff7a03a1c5..0096ed1c5d53f95601ddcf19433430f10e3ccf96 100644
--- a/src/components/CreateEditComponents/CreateStudent.vue
+++ b/src/components/CreateEditComponents/CreateStudent.vue
@@ -131,7 +131,6 @@ export default {
     validateBeforeSubmit() {
       this.$validator.validate().then(isValid => {
         if (isValid) {
-          console.log("isvalid");
           this.$store.dispatch('student/insert', this.student).then(
               data => {
                 this.$router.push('/students');
@@ -143,8 +142,6 @@ export default {
                 this.successful = false;
               }
           );
-        } else {
-          console.log("not isvalid")
         }
       });
     }
diff --git a/src/components/Layouts.vue b/src/components/Layouts.vue
deleted file mode 100644
index b4f6f2b8fd4a5f104484ce832afac228dd243a1a..0000000000000000000000000000000000000000
--- a/src/components/Layouts.vue
+++ /dev/null
@@ -1,189 +0,0 @@
-<template>
-  <div class="card">
-    <div id="content" class="e-resizable">
-
-      <div class="entry_box-inner">
-        <a id="editbutton" class="button" href="./editteacher" style="visibility: hidden">Eintrag bearbeiten</a>
-        <a id="addbutton" class="button" href="./createteacher">neuen Eintrag hinzufügen</a>
-        <a id="deletebutton" class="button" >ausgewählte Einträge löschen</a>
-        <a id="exportbutton" class="button" >Tabelle exportieren</a>
-      </div>
-      <div>
-        <vue-good-table
-            :columns="columns"
-            :rows="rows"
-            max-height="825px"
-            :select-options="{ enabled: true }"
-            :search-options="{ enabled: true }"/>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { VueGoodTable } from 'vue-good-table';
-
-export default {
-  name: "Layouts",
-  components: {VueGoodTable},
-
-  data(){
-    return {
-      rows: [],
-      columns: [
-        {
-          label: 'Personalnummer',
-          field: 'personalnummer',
-        },
-        {
-          label: 'Geschlecht',
-          field: 'gender',
-        },
-        {
-          label: 'Grad',
-          field: 'grad',
-        },
-        {
-          label: 'Vorname',
-          field: 'firstname',
-        },
-        {
-          label: 'Nachname',
-          field: 'lastname',
-        },
-        {
-          label: 'E-Mail',
-          field: 'email',
-        },
-        {
-          label: 'Telefon',
-          field: 'telephone',
-        },
-        {
-          label: 'Straße',
-          field: 'street',
-        },
-        {
-          label: 'Postleitzahl',
-          field: 'zip',
-        },
-        {
-          label: 'Ort',
-          field: 'city',
-        },
-        {
-          label: 'Fächer',
-          field: 'subject',
-        },
-        {
-          label: 'Schulart',
-          field: 'school_branch',
-        },
-        {
-          label: 'Schulname',
-          field: 'school_name',
-        },
-        {
-          label: 'Schulnummer',
-          field: 'school_number',
-        }
-        /*,
-        {
-          label: 'Age',
-          field: 'age',
-          type: 'number',
-        },
-        {
-          label: 'Created On',
-          field: 'createdAt',
-          type: 'date',
-          dateInputFormat: 'yyyy-MM-dd',
-          dateOutputFormat: 'MMM do yy',
-        },
-        {
-          label: 'Percent',
-          field: 'score',
-          type: 'percentage',
-        },*/
-      ]
-    }
-  },
-
-  created() {
-    this.loadData();
-  },
-
-  methods:{
-    search: function() {
-      let searchText = document.getElementsByClassName('searchtext')[0].value;
-      this.$refs.grid.search(searchText);
-    },
-    rowSelected: function() {
-      //let selectedrowindex = this.$refs.grid.getSelectedRowIndexes();
-      //alert(selectedrowindex);
-    },
-
-    loadData(){
-      this.$store.dispatch('teacher/getAll').then(
-          (data) => {
-            let x;
-            for(x = 0; x < data.length; x++){
-              this.rows.push({id: data[x].id, personalnumber: data[x].personal_number, gender: data[x].gender, grad: data[x].grad, firstname: data[x].firstname, lastname: data[x].lastname, email: data[x].email, telephone: data[x].telephone, street: data[x].street, zip: data[x].zip, city: data[x].city, subject: data[x].subject, school_branch: data[x].school_branch, school_name: data[x].school_name, school_number: data[x].school_number, status: data[x].status});
-            }
-          },
-          error => {
-            this.message = (error.response && error.response.data) || error.message || error.toString();
-            this.successful = false;
-          }
-      );
-    },
-
-  }
-
-}
-</script>
-
-<style>
-@import url("https://cdn.syncfusion.com/ej2/material.css");
-
-.content{
-  width: 100%;
-  height: 100vh;
-  overflow: auto;
-  scroll-behavior: unset;
-  white-space: nowrap;
-}
-
-.card {
-  /* Add shadows to create the "card" effect */
-  box-shadow: 0 4px 30px 0 rgba(0,0,0,0.1);
-  transition: 0.2s;
-  margin-top: 20px;
-  margin-right: 10px;
-  height: 95vh;
-  border-radius: 20px;
-  border-color: transparent;
-}
-.e-resizable {
-  overflow: auto;
-  height: 100vh;
-  background-color: transparent;
-  border-color: transparent;
-}#exportbutton, #addbutton, #editbutton, #deletebutton {
-   margin-right: 25px;
-   display:inline-block;
-   padding:0.3em 1.2em;
-   border-radius:2em;
-   box-sizing: border-box;
-   text-decoration:none;
-   font-weight:300;
-   color:#FFFFFF;
-   background-color:#528fff;
-   text-align:center;
-   transition: all 0.2s;
- }
-
-#exportbutton:hover, #deletebutton:hover, #addbutton:hover , #editbutton:hover{
-  background-color:#9fc1ff;
-}
-</style>
\ No newline at end of file
diff --git a/src/components/SideMenu.vue b/src/components/SideMenu.vue
index 5b83c801741596560b59577ffa1d426f8f4eb4e1..be730299384f80afc489bfdd789cb89385eac0d5 100644
--- a/src/components/SideMenu.vue
+++ b/src/components/SideMenu.vue
@@ -16,9 +16,6 @@
       <li :class="[currentPage.includes('certifications') ? activeClass: '', 'navButton']">
         <router-link style="margin-bottom: -25px;" to="/certifications" class="navA">Fort-und Weiterbildungen</router-link><br>
       </li>
-      <li :class="[currentPage.includes('layouts') ? activeClass: '', 'navButton']">
-        <router-link style="margin-bottom: -25px;" to="/layouts" class="navA">Vorlagen</router-link><br>
-      </li>
       <li :class="[currentPage.includes('calendar') ? activeClass: '', 'navButton']">
         <router-link style="margin-bottom: -25px;" to="/calendar" class="navA">Kalender</router-link><br>
       </li>
diff --git a/src/components/Student.vue b/src/components/Student.vue
index cff81b91b234787f85c3c928676abd0bf1af1143..07deaa0513bb0ee3a7c16ffc945d61c5945156f1 100644
--- a/src/components/Student.vue
+++ b/src/components/Student.vue
@@ -1,76 +1,83 @@
 <template>
   <div class="card">
-    <div class="content col-md-12">
-      <div id="search_box" class="search_box col-md-4">
+    <div class="e-resizable">
+      <div>
         <div class="entry_box-inner">
-          <a id="editbutton" class="button" href="./editstudent" style="visibility: hidden">Eintrag bearbeiten</a>
+          <a id="editbutton" class="button" href="./editstudent" style="display: none">Eintrag bearbeiten</a>
           <a id="addbutton" class="button" href="./createstudent">neuen Eintrag hinzufügen</a>
           <a id="deletebutton" class="button" @click="deleterows">ausgewählte Einträge löschen</a>
           <a id="exportbutton" class="button" @click="exportExcel">Tabelle exportieren</a>
         </div>
-        <div class="search_box-inner">
-          <i><img src="../assets/search.svg"></i>
-          <input id="inpt_search" v-model="filter" type="text" class="search__input" placeholder="Suchen..." />
-        </div>
+        <vue-good-table
+            :columns="columns"
+            :rows="rows"
+            max-height="760px"
+            @on-selected-rows-change="selectionChanged"
+            :select-options="{ enabled: true }"
+            :search-options="{ enabled: true }">
+        </vue-good-table>
       </div>
-      <table id="Table">
-        <tr>
-          <th scope="row">
-            <div class="form-check">
-              <input name="checkbox" type="checkbox" class="form-check-input" id="checkbox_headerline" @click="checkAllBoxes">
-              <label class="form-check-label" for="checkbox_headerline"></label>
-            </div>
-          </th>
-          <th v-on:click="sortTable('imgsortanrede')"><img id="imgsortanrede" :src="require('../assets/'+sortImg)">Anrede</th>
-          <th v-on:click="sortTable('imgsortfirstname')"><img id="imgsortcoursename" :src="require('../assets/'+sortImg)">Vorname</th>
-          <th v-on:click="sortTable('imgsortlastname')"><img id="imgsorteventtype" :src="require('../assets/'+sortImg)">Nachname</th>
-          <th v-on:click="sortTable('imgsortstreet')"><img id="imgsortcoursedate" :src="require('../assets/'+sortImg)">Straße</th>
-          <th v-on:click="sortTable('imgsortzip')"><img id="imgsorttopic" :src="require('../assets/'+sortImg)">Postleitzahl</th>
-          <th v-on:click="sortTable('imgsortcity')"><img id="imgsortcourselocation" :src="require('../assets/'+sortImg)">Ort</th>
-          <th v-on:click="sortTable('imgsortsommeruni_17')"><img id="imgsortsommeruni_17" :src="require('../assets/'+sortImg)">SommerUni 17</th>
-          <th v-on:click="sortTable('imgsortsommeruni_18')"><img id="imgsortsommeruni_18" :src="require('../assets/'+sortImg)">SommerUni 18</th>
-          <th v-on:click="sortTable('imgsortsommeruni_19')"><img id="imgsortsommeruni_19" :src="require('../assets/'+sortImg)">SommerUni 19</th>
-          <th v-on:click="sortTable('imgsortsommeruni_20')"><img id="imgsortsommeruni_20" :src="require('../assets/'+sortImg)">SommerUni 20</th>
-          <th v-on:click="sortTable('imgsortnatuerlich_20')"><img id="imgsortnatuerlich_20" :src="require('../assets/'+sortImg)">Natürlich 20</th>
-          <th v-on:click="sortTable('imgsortstatus')"><img id="imgsortstatus" :src="require('../assets/'+sortImg)">Status</th>
-        </tr>
-        <tr v-for="row in filteredRows" :key="row.id">
-          <td scope="row">
-            <div class="form-check">
-              <input type="checkbox" class="form-check-input" name="checkbox_tablerow" id="checkbox_tablerow" v-model="checkedBoxes" :value="row.id">
-              <label class="form-check-label" for="checkbox_tablerow"></label>
-            </div>
-          </td>
-          <td>{{row.anrede}}</td>
-          <td>{{row.firstname}}</td>
-          <td>{{row.lastname}}</td>
-          <td>{{row.street}}</td>
-          <td>{{row.zip}}</td>
-          <td>{{row.city}}</td>
-          <td>{{row.sommeruni17}}</td>
-          <td>{{row.sommeruni18}}</td>
-          <td>{{row.sommeruni19}}</td>
-          <td>{{row.sommeruni20}}</td>
-          <td>{{row.natuerlich20}}</td>
-          <td>{{row.status}}</td>
-        </tr>
-      </table>
     </div>
   </div>
 </template>
 
 <script>
+import {VueGoodTable} from "vue-good-table";
+
 export default {
   name: "Student",
+  components: {VueGoodTable},
+
   data: function() {
     return {
       rows: [],
+      columns: [
+        {
+          label: 'Anrede',
+          field: 'anrede',
+        },
+        {
+          label: 'Vorname',
+          field: 'firstname',
+        },
+        {
+          label: 'Nachname',
+          field: 'lastname',
+        },
+        {
+          label: 'Straße',
+          field: 'street',
+        },
+        {
+          label: 'Postleitzahl',
+          field: 'zip',
+        },
+        {
+          label: 'Ort',
+          field: 'city',
+        },
+        {
+          label: 'SommerUni 17',
+          field: 'sommeruni17',
+        },
+        {
+          label: 'SommerUni 18',
+          field: 'sommeruni18',
+        },
+        {
+          label: 'SommerUni 19',
+          field: 'sommeruni19',
+        },
+        {
+          label: 'SommerUni 20',
+          field: 'sommeruni20',
+        },
+        {
+          label: 'Natürlich 20',
+          field: 'natuerlich20',
+        }
+      ],
       checkedBoxes: [],
-      rowIDs: ['imgsortanrede','imgsortfirstname','imgsortlastname','imgsortstreet','imgsortzip','imgsortcity','imgsortsommeruni_17','imgsortsommeruni_18','imgsortsommeruni_19','imgsortsommeruni_20','imgsortnatuerlich_20','imgsortstatus'],
-      filter:'',
-      currentSort:'imgsortlastname',
-      currentSortDir:'asc',
-      sortImg: 'sort_def.svg',
     }
   },
 
@@ -81,44 +88,18 @@ export default {
 
   methods: {
 
-    deleterows(){
-      let x = 0;
-      for (x; x < this.checkedBoxes.length; x++){
-        this.$store.dispatch('student/delete', this.checkedBoxes[x]).then(
-            data => {
-              this.message = data.message;
-              this.successful = true;
-            },
-            error => {
-              this.message = (error.response && error.response.data) || error.message || error.toString();
-              this.successful = false;
-            }
-        );
-      }
-      this.rows = [];
-      this.loadData();
-    },
-
-    checkAllBoxes(){
-      var headercheckbox = document.getElementById('checkbox_headerline');
-      var headercheckboxvalue = headercheckbox.checked;
-
-      let checkboxes = document.getElementsByName('checkbox_tablerow');
+    selectionChanged(params) {
       this.checkedBoxes = [];
-      for(var i=0, n = checkboxes.length;i<n;i++) {
-        if (headercheckboxvalue){
-          this.checkedBoxes.push(this.rows[i].id);
-        }
-        checkboxes[i].checked = headercheckboxvalue;
+      for(let i = 0; i < params.selectedRows.length; i++) {
+        this.checkedBoxes[i] = params.selectedRows[i].id;
       }
     },
 
-    async loadData(){
-      await this.$store.dispatch('student/getAll').then(
+    loadData(){
+      this.$store.dispatch('student/getAll').then(
           (data) => {
-            console.log(data);
-            let x;
-            for(x = 0; x < data.length; x++){
+            this.rows = [];
+            for(let x = 0; x < data.length; x++){
               this.rows.push({id: data[x].id, anrede: data[x].anrede, firstname: data[x].firstName, lastname: data[x].lastname, street: data[x].street, zip: data[x].postcode, city: data[x].ort, sommeruni17: data[x].summerUni_17, sommeruni18: data[x].summerUni_18, sommeruni19: data[x].summerUni_19, sommeruni20: data[x].summerUni_20, natuerlich20: data[x].natuerlich, status: data[x].status});
             }
           },
@@ -129,222 +110,57 @@ export default {
       );
     },
 
+    deleterows(){
+      for (let x = 0; x < this.checkedBoxes.length; x++){
+        this.$store.dispatch('student/delete', this.checkedBoxes[x]);
+      }
+      setTimeout(() => this.loadData(), 1000);
+    },
+
     exportExcel(){
       this.$store.dispatch('student/exportExcel', this.checkedBoxes);
     },
 
-    "sortTable": function sortTable(col) {
-      this.currentSort = col;
-      if (this.currentSortDir === 'asc') {
-        this.currentSortDir = 'desc';
-
-        this.rowIDs.forEach(element =>{
-          console.log(this.currentSort);
-          if(this.currentSort === element){
-            document.getElementById(element).src = require('../assets/sort_asc.svg')
-          } else {
-            document.getElementById(element).src = require('../assets/sort_def.svg')
-          }
-        });
-
-        col = col.toString().replace("imgsort","");
-        this.rows.sort(function (a, b) {
-          if (typeof(a[col]) === 'number' && typeof(b[col]) === 'number'){
-            if (a[col] < b[col]) {
-              return 1;
-            } else if (a[col] > b[col]) {
-              return -1;
-            }
-          } else if (typeof(a[col]) === 'string' && typeof(b[col]) === 'string'){
-            if (a[col].toLowerCase() < b[col].toLowerCase()) {
-              return 1;
-            } else if (a[col].toLowerCase() > b[col].toLowerCase()) {
-              return -1;
-            }
-          }
-          return 0;
-        })
-      } else {
-        this.currentSortDir = 'asc';
-
-        this.rowIDs.forEach(element =>{
-          if(this.currentSort === element){
-            document.getElementById(element.toString()).src = require('../assets/sort_desc.svg');
-          } else {
-            document.getElementById(element.toString()).src = require('../assets/sort_def.svg');
-          }
-        });
-
-        col = col.toString().replace("imgsort","");
-        this.rows.sort(function (a, b) {
-          if (typeof(a[col]) === 'number' && typeof(b[col]) === 'number'){
-            if (a[col] > b[col]) {
-              return 1;
-            } else if (a[col]< b[col]) {
-              return -1;
-            }
-          } else if (a[col].toLowerCase() < b[col].toLowerCase()) {
-            if (a[col].toLowerCase() > b[col].toLowerCase()) {
-              return 1;
-            } else if (a[col].toLowerCase() < b[col].toLowerCase()) {
-              return -1;
-            }
-          }
-          return 0;
-        })
-      }
-    }
   },
 
   watch: {
     checkedBoxes(){
       if (this.checkedBoxes.length > 1 || this.checkedBoxes.length < 1){
-        document.getElementById("editbutton").style.visibility = "hidden";
-        // EXPORT & DELETE
+        document.getElementById("editbutton").style.display = "none";
       } else {
-        document.getElementById("editbutton").style.visibility = "visible";
+        document.getElementById("editbutton").style.display = "unset";
       }
       localStorage.setItem('checkedBoxID', this.checkedBoxes[0]);
     }
   },
 
-  computed: {
-    "columns": function columns() {
-      if (this.rows.length === 0) {
-        return [];
-      }
-      return Object.keys(this.rows[0])
-    },
-    filteredRows() {
-      return this.rows.filter(() => {
-        return true;
-        /*
-        const angebotsnummer = row.coursenumber.toLowerCase();
-        const angebot = row.courseoffer.toLowerCase();
-        const kursname = row.coursename.toLowerCase();
-        const veranstaltungsart = row.eventtype.toLowerCase();
-        const kursdatum = row.coursedate.toLowerCase();
-        const thema = row.topic.toLowerCase();
-        const kursort = row.courselocation.toLowerCase();
-        const begleitendeLehrkraft = row.accompanyingteacher.toLowerCase();
-        const betreuendeStudenten = row.supervisingstudents.toLowerCase();
-        const anzahlderAnwesenden = row.presentstudents.toString();
-        const anzahlderAngemeldeten = row.registeredstudents.toString();
-        const kursleiter = row.instructor.toLowerCase();
-        const anzahlung = row.anzahlung.toLowerCase();
-        const honorar = row.honorar.toLowerCase();
-        const status = row.status.toString().toLowerCase();
-        const notiz = row.notefield.toLowerCase();
-        const searchTerm = this.filter.toLowerCase();
-
-        return angebotsnummer.includes(searchTerm) || angebot.includes(searchTerm) || kursname.includes(searchTerm) || veranstaltungsart.includes(searchTerm) || kursdatum.includes(searchTerm) || thema.includes(searchTerm) || kursort.includes(searchTerm) || begleitendeLehrkraft.includes(searchTerm) || betreuendeStudenten.includes(searchTerm) || betreuendeStudenten.includes(searchTerm) || anzahlderAnwesenden.includes(searchTerm) || anzahlderAngemeldeten.includes(searchTerm) || kursleiter.includes(searchTerm) || notiz.includes(searchTerm) || anzahlung.includes(searchTerm) || honorar.includes(searchTerm) || status.includes(searchTerm);
-     */ });
-    },
-  }
 }
 </script>
 
 <style scoped>
 
-.content{
-  background-color: transparent;
-  width: 100%;
-  height: 100vh;
-  overflow: auto;
-  white-space: nowrap;
-}
-
-.search_box{
-  width: 100%;
-  margin-top: 50px;
-  text-align:left;
-  position: relative;
-}
-
-.search_box-inner {
-  display:inline;
-  font-size:1em;
-  border-radius: 8em;
-  border:0.1em solid rgba(218, 208, 190, 1);
-  box-shadow:0 0 0.3em rgba(60, 60, 60, 0.4);
-  padding:0.3em;
-  background:white;
-}
-
 .entry_box-inner {
   position: relative;
   display:inline;
 }
 
 #exportbutton, #addbutton, #editbutton, #deletebutton {
-  margin-right: 25px;
+  margin: 15px;
   display:inline-block;
   padding:0.3em 1.2em;
-  border-radius:2em;
+  border-radius: 10px;
   box-sizing: border-box;
   text-decoration:none;
-  font-weight:300;
+  font-weight: bold;
   color:#FFFFFF;
   background-color:#528fff;
+  border: 2px solid #2770f5; /* Green */
   text-align:center;
   transition: all 0.2s;
 }
 
 #exportbutton:hover, #deletebutton:hover, #addbutton:hover , #editbutton:hover{
-  background-color:#9fc1ff;
-}
-
-.search_box-inner i img {
-  width: 5%;
-  text-align: center;
-  margin: 5px;
-}
-
-#inpt_search{
-  transition:all 0.2s ease-out;
-  width:15px;
-  border-radius:0;
-  box-shadow:none;
-  outline: none;
-  padding:0;
-  margin:0;
-  border:0;
-  background-color: transparent;
-  opacity:0;
-}
-#inpt_search:focus {
-  width: 10em;
-  opacity: 1;
-}
-
-.content table {
-  margin-top: 10px;
-  display: inline-block;
-  font-family: arial, sans-serif;
-  border-collapse: collapse;
-  width: 100%;
-}
-
-.content table th {
-  text-transform: uppercase;
-  text-align: left;
-  background: #9fc1ff;
-  color: #000000;
-  padding: 8px;
-  min-width: 30px;
-}
-
-.content table td {
-  text-align: left;
-  padding: 8px;
-  border-right: 2px solid #9fc1ff;
-}
-.content table td:last-child {
-  border-right: none;
-}
-
-.content table tbody tr:nth-child(2n) td {
-  background: #8f0c4f;
+  background-color: #70a1ff;
 }
 
 .card {
@@ -354,7 +170,14 @@ export default {
   margin-top: 20px;
   margin-right: 10px;
   height: 95vh;
-  border-radius: 20px;
+  border-radius: 3px;
+  border-color: #f2f5f8;
+  border: 0px;
+}
+.e-resizable {
+  overflow: auto;
+  height: 100vh;
+  background-color: #f2f5f8;
   border-color: transparent;
 }
 
diff --git a/src/components/Teachers.vue b/src/components/Teachers.vue
index 1c11526959e527c43c0961a00f85808a97e6e788..de44e94a14fa8341f8203352cfe00c1b33f48fcb 100644
--- a/src/components/Teachers.vue
+++ b/src/components/Teachers.vue
@@ -1,64 +1,23 @@
 <template>
-  <div class="content col-md-12">
-    <div id="search_box" class="search_box col-md-4">
-      <div class="entry_box-inner">
-        <a id="editbutton" class="button" href="./editteacher" style="visibility: hidden">Eintrag bearbeiten</a>
-        <a id="addbutton" class="button" href="./createteacher">neuen Eintrag hinzufügen</a>
-        <a id="deletebutton" class="button" @click="deleterows">ausgewählte Einträge löschen</a>
-        <a id="exportbutton" class="button" @click="exportExcel">Tabelle exportieren</a>
-      </div>
-      <div class="search_box-inner">
-        <i><img src="../assets/search.svg"></i>
-        <input id="inpt_search" v-model="filter" type="text" class="search__input" placeholder="Suchen..." />
+  <div class="card">
+    <div class="e-resizable">
+      <div>
+        <div class="entry_box-inner">
+          <a id="editbutton" class="button" href="./editteacher" style="display: none">Eintrag bearbeiten</a>
+          <a id="addbutton" class="button" href="./createteacher">neuen Eintrag hinzufügen</a>
+          <a id="deletebutton" class="button" @click="deleterows">ausgewählte Einträge löschen</a>
+          <a id="exportbutton" class="button" @click="exportExcel">Tabelle exportieren</a>
+        </div>
+        <vue-good-table
+          :columns="columns"
+          :rows="rows"
+          max-height="760px"
+          @on-selected-rows-change="selectionChanged"
+          :select-options="{ enabled: true }"
+          :search-options="{ enabled: true }">
+        </vue-good-table>
       </div>
     </div>
-    <table id="Table">
-      <tr>
-        <th scope="row">
-          <div class="form-check">
-            <input name="checkbox" type="checkbox" class="form-check-input" id="checkbox_headerline" @click="checkAllBoxes">
-            <label class="form-check-label" for="checkbox_headerline"></label>
-          </div>
-        </th>
-        <th v-on:click="sortTable('personal_number')"><img id='imgsortpersonalnumber' :src="require('../assets/'+sortImg)">Personalnummer</th>
-        <th v-on:click="sortTable('gender')"><img id='imgsortgender' :src="require('../assets/'+sortImg)">Geschlecht</th>
-        <th v-on:click="sortTable('grad')"><img id='imgsortgrad' :src="require('../assets/'+sortImg)">Grad</th>
-        <th v-on:click="sortTable('firstname')"><img id='imgsortfirstname' :src="require('../assets/'+sortImg)">Vorname</th>
-        <th v-on:click="sortTable('lastname')"><img id='imgsortlastname' :src="require('../assets/'+sortImg)">Nachname</th>
-        <th v-on:click="sortTable('email')"><img id='imgsortemail' :src="require('../assets/'+sortImg)">E-Mail</th>
-        <th v-on:click="sortTable('telephone')"><img id='imgsorttelephone' :src="require('../assets/'+sortImg)">Telefon</th>
-        <th v-on:click="sortTable('street')"><img id='imgsortstreet' :src="require('../assets/'+sortImg)">Straße</th>
-        <th v-on:click="sortTable('zip')"><img id='imgsortzip' :src="require('../assets/'+sortImg)">Postleitzahl</th>
-        <th v-on:click="sortTable('city')"><img id='imgsortcity' :src="require('../assets/'+sortImg)">Ort</th>
-        <th v-on:click="sortTable('subject')"><img id='imgsortsubject' :src="require('../assets/'+sortImg)">Fächer</th>
-        <th v-on:click="sortTable('school_branch')"><img id="imgsortschoolbranch" :src="require('../assets/'+sortImg)">Schulart</th>
-        <th v-on:click="sortTable('school_name')"><img id='imgsortschoolname' :src="require('../assets/'+sortImg)">Schulname</th>
-        <th v-on:click="sortTable('school_number')"><img id='imgsortschoolnumber' :src="require('../assets/'+sortImg)">Schulnummer</th>
-      </tr>
-      <tr v-for="row in filteredRows" :key="row.id">
-        <td scope="row">
-          <div class="form-check">
-            <input type="checkbox" class="form-check-input" name="checkbox_tablerow" id="checkbox_tablerow" v-model="checkedBoxes" :value="row.id">
-            <label class="form-check-label" for="checkbox_tablerow"></label>
-          </div>
-        </td>
-        <td>{{row.personal_number}}</td>
-        <td>{{row.gender}}</td>
-        <td>{{row.grad}}</td>
-        <td>{{row.firstname}}</td>
-        <td>{{row.lastname}}</td>
-        <td>{{row.email}}</td>
-        <td>{{row.telephone}}</td>
-        <td>{{row.street}}</td>
-        <td>{{row.zip}}</td>
-        <td>{{row.city}}</td>
-        <td>{{row.subject}}</td>
-        <td>{{row.school_branch}}</td>
-        <td>{{row.school_name}}</td>
-        <td>{{row.school_number}}</td>
-        <td>{{row.status}}</td>
-      </tr>
-    </table>
   </div>
 </template>
 
@@ -68,11 +27,65 @@ export default {
   data: function() {
     return {
       rows: [],
+      columns: [
+        {
+          label: 'Personalnummer',
+          field: 'personalnummer',
+        },
+        {
+          label: 'Geschlecht',
+          field: 'gender',
+        },
+        {
+          label: 'Grad',
+          field: 'grad',
+        },
+        {
+          label: 'Vorname',
+          field: 'firstname',
+        },
+        {
+          label: 'Nachname',
+          field: 'lastname',
+        },
+        {
+          label: 'E-Mail',
+          field: 'email',
+        },
+        {
+          label: 'Telefon',
+          field: 'telephone',
+        },
+        {
+          label: 'Straße',
+          field: 'street',
+        },
+        {
+          label: 'Postleitzahl',
+          field: 'zip',
+        },
+        {
+          label: 'Ort',
+          field: 'city',
+        },
+        {
+          label: 'Fächer',
+          field: 'subject',
+        },
+        {
+          label: 'Schulart',
+          field: 'school_branch',
+        },
+        {
+          label: 'Schulname',
+          field: 'school_name',
+        },
+        {
+          label: 'Schulnummer',
+          field: 'school_number',
+        }
+      ],
       checkedBoxes: [],
-      filter:'',
-      currentSort:'personal_number',
-      currentSortDir:'asc',
-      sortImg: 'sort_def.svg',
     }
   },
 
@@ -82,27 +95,19 @@ export default {
   },
 
   methods: {
-
-    checkAllBoxes(){
-      var headercheckbox = document.getElementById('checkbox_headerline');
-      var headercheckboxvalue = headercheckbox.checked;
-
-      let checkboxes = document.getElementsByName('checkbox_tablerow');
+    selectionChanged(params) {
       this.checkedBoxes = [];
-      for(var i=0, n = checkboxes.length;i<n;i++) {
-        if (headercheckboxvalue){
-          this.checkedBoxes.push(this.rows[i].id);
-        }
-        checkboxes[i].checked = headercheckboxvalue;
+      for(let i = 0; i < params.selectedRows.length; i++) {
+        this.checkedBoxes[i] = params.selectedRows[i].id;
       }
     },
 
     loadData(){
       this.$store.dispatch('teacher/getAll').then(
           (data) => {
-            let x;
-            for(x = 0; x < data.length; x++){
-              this.rows.push({id: data[x].id, personal_number: data[x].personal_number, gender: data[x].gender, grad: data[x].grad, firstname: data[x].firstname, lastname: data[x].lastname, email: data[x].email, telephone: data[x].telephone, street: data[x].street, zip: data[x].zip, city: data[x].city, subject: data[x].subject, school_branch: data[x].school_branch, school_name: data[x].school_name, school_number: data[x].school_number, status: data[x].status});
+            this.rows = [];
+            for(let x = 0; x < data.length; x++){
+              this.rows.push({id: data[x].id, personalnummer: data[x].personal_number, gender: data[x].gender, grad: data[x].grad, firstname: data[x].firstname, lastname: data[x].lastname, email: data[x].email, telephone: data[x].telephone, street: data[x].street, zip: data[x].zip, city: data[x].city, subject: data[x].subject, school_branch: data[x].school_branch, school_name: data[x].school_name, school_number: data[x].school_number, status: data[x].status});
             }
           },
           error => {
@@ -112,674 +117,36 @@ export default {
       );
     },
 
-    exportExcel(){
-      this.$store.dispatch('teacher/exportExcel', this.checkedBoxes);
-    },
 
 
     deleterows(){
-      let x = 0;
-      for (x; x < this.checkedBoxes.length; x++){
-        this.$store.dispatch('teacher/delete', this.checkedBoxes[x]).then(
-            data => {
-              this.message = data.message;
-              this.successful = true;
-            },
-            error => {
-              this.message = (error.response && error.response.data) || error.message || error.toString();
-              this.successful = false;
-            }
-        );
+      for (let x = 0; x < this.checkedBoxes.length; x++){
+        this.$store.dispatch('teacher/delete', this.checkedBoxes[x]);
       }
-      this.rows = [];
-      this.loadData();
+      setTimeout(() => this.loadData(), 1000);
     },
-    "sortTable": function sortTable(col) {
-      this.currentSort = col;
-      if (this.currentSortDir === 'asc') {
-        this.currentSortDir = 'desc';
-
-        switch (this.currentSort){
-          case 'personal_number':
-            document.getElementById("imgsortpersonalnumber").src = require('../assets/sort_asc.svg');
-            document.getElementById("imgsortgender").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgrad").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortfirstname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortlastname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortemail").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsorttelephone").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstreet").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortzip").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortcity").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortsubject").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolbranch").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstatus").src = require('../assets/sort_def.svg');
-            break;
-          case 'gender':
-            document.getElementById("imgsortgender").src = require('../assets/sort_asc.svg');
-            document.getElementById("imgsortpersonalnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgrad").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortfirstname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortlastname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortemail").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsorttelephone").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstreet").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortzip").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortcity").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortsubject").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolbranch").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstatus").src = require('../assets/sort_def.svg');
-            break;
-          case 'grad':
-            document.getElementById("imgsortgrad").src = require('../assets/sort_asc.svg');
-            document.getElementById("imgsortpersonalnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgender").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortfirstname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortlastname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortemail").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsorttelephone").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstreet").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortzip").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortcity").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortsubject").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolbranch").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstatus").src = require('../assets/sort_def.svg');
-            break;
-          case 'firstname':
-            document.getElementById("imgsortfirstname").src = require('../assets/sort_asc.svg');
-            document.getElementById("imgsortpersonalnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgender").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgrad").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortlastname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortemail").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsorttelephone").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstreet").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortzip").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortcity").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortsubject").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolbranch").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstatus").src = require('../assets/sort_def.svg');
-            break;
-          case 'lastname':
-            document.getElementById("imgsortlastname").src = require('../assets/sort_asc.svg');
-            document.getElementById("imgsortpersonalnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgender").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgrad").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortfirstname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortemail").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsorttelephone").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstreet").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortzip").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortcity").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortsubject").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolbranch").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstatus").src = require('../assets/sort_def.svg');
-            break;
-          case 'email':
-            document.getElementById("imgsortemail").src = require('../assets/sort_asc.svg');
-            document.getElementById("imgsortpersonalnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgender").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgrad").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortfirstname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortlastname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsorttelephone").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstreet").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortzip").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortcity").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortsubject").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolbranch").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstatus").src = require('../assets/sort_def.svg');
-            break;
-          case 'telephone':
-            document.getElementById("imgsorttelephone").src = require('../assets/sort_asc.svg');
-            document.getElementById("imgsortpersonalnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgender").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgrad").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortfirstname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortlastname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortemail").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstreet").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortzip").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortcity").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortsubject").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolbranch").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstatus").src = require('../assets/sort_def.svg');
-            break;
-          case 'street':
-            document.getElementById("imgsortstreet").src = require('../assets/sort_asc.svg');
-            document.getElementById("imgsortpersonalnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgender").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgrad").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortfirstname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortlastname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortemail").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsorttelephone").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortzip").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortcity").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortsubject").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolbranch").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstatus").src = require('../assets/sort_def.svg');
-            break;
-          case 'zip':
-            document.getElementById("imgsortzip").src = require('../assets/sort_asc.svg');
-            document.getElementById("imgsortpersonalnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgender").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgrad").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortfirstname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortlastname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortemail").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsorttelephone").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstreet").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortcity").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortsubject").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolbranch").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstatus").src = require('../assets/sort_def.svg');
-            break;
-          case 'city':
-            document.getElementById("imgsortcity").src = require('../assets/sort_asc.svg');
-            document.getElementById("imgsortpersonalnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgender").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgrad").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortfirstname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortlastname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortemail").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsorttelephone").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstreet").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortzip").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortsubject").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolbranch").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstatus").src = require('../assets/sort_def.svg');
-            break;
-          case 'subject':
-            document.getElementById("imgsortsubject").src = require('../assets/sort_asc.svg');
-            document.getElementById("imgsortpersonalnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgender").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgrad").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortfirstname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortlastname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortemail").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsorttelephone").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstreet").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortzip").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortcity").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolbranch").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstatus").src = require('../assets/sort_def.svg');
-            break;
-          case 'school_branch':
-            document.getElementById("imgsortschoolbranch").src = require('../assets/sort_asc.svg');
-            document.getElementById("imgsortpersonalnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgender").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgrad").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortfirstname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortlastname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortemail").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsorttelephone").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstreet").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortzip").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortcity").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortsubject").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstatus").src = require('../assets/sort_def.svg');
-            break;
-          case 'school_name':
-            document.getElementById("imgsortschoolname").src = require('../assets/sort_asc.svg');
-            document.getElementById("imgsortpersonalnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgender").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgrad").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortfirstname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortlastname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortemail").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsorttelephone").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstreet").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortzip").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortcity").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortsubject").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolbranch").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstatus").src = require('../assets/sort_def.svg');
-            break;
-          case 'school_number':
-            document.getElementById("imgsortschoolnumber").src = require('../assets/sort_asc.svg');
-            document.getElementById("imgsortpersonalnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgender").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgrad").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortfirstname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortlastname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortemail").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsorttelephone").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstreet").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortzip").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortcity").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortsubject").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolbranch").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstatus").src = require('../assets/sort_def.svg');
-            break;
-          case 'status':
-            document.getElementById("imgsortstatus").src = require('../assets/sort_asc.svg');
-            document.getElementById("imgsortpersonalnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgender").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgrad").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortfirstname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortlastname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortemail").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsorttelephone").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstreet").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortzip").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortcity").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortsubject").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolbranch").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolnumber").src = require('../assets/sort_def.svg');
-            break;
-        }
-
-        this.rows.sort(function (a, b) {
-          if (typeof(a[col]) === 'number' && typeof(b[col]) === 'number'){
-            if (a[col] < b[col]) {
-              return 1;
-            } else if (a[col] > b[col]) {
-              return -1;
-            }
-          } else if (typeof(a[col]) === 'string' && typeof(b[col]) === 'string'){
-            if (a[col].toLowerCase() < b[col].toLowerCase()) {
-              return 1;
-            } else if (a[col].toLowerCase() > b[col].toLowerCase()) {
-              return -1;
-            }
-          }
-          return 0;
-        })
-      } else {
-        this.currentSortDir = 'asc';
-
-        switch (this.currentSort){
-          case 'personal_number':
-            document.getElementById("imgsortpersonalnumber").src = require('../assets/sort_desc.svg');
-            document.getElementById("imgsortgender").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgrad").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortfirstname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortlastname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortemail").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsorttelephone").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstreet").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortzip").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortcity").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortsubject").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolbranch").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstatus").src = require('../assets/sort_def.svg');
-            break;
-          case 'gender':
-            document.getElementById("imgsortgender").src = require('../assets/sort_desc.svg');
-            document.getElementById("imgsortpersonalnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgrad").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortfirstname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortlastname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortemail").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsorttelephone").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstreet").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortzip").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortcity").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortsubject").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolbranch").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstatus").src = require('../assets/sort_def.svg');
-            break;
-          case 'grad':
-            document.getElementById("imgsortgrad").src = require('../assets/sort_desc.svg');
-            document.getElementById("imgsortpersonalnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgender").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortfirstname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortlastname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortemail").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsorttelephone").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstreet").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortzip").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortcity").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortsubject").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolbranch").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstatus").src = require('../assets/sort_def.svg');
-            break;
-          case 'firstname':
-            document.getElementById("imgsortfirstname").src = require('../assets/sort_desc.svg');
-            document.getElementById("imgsortpersonalnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgender").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgrad").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortlastname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortemail").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsorttelephone").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstreet").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortzip").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortcity").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortsubject").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolbranch").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstatus").src = require('../assets/sort_def.svg');
-            break;
-          case 'lastname':
-            document.getElementById("imgsortlastname").src = require('../assets/sort_desc.svg');
-            document.getElementById("imgsortpersonalnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgender").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgrad").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortfirstname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortemail").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsorttelephone").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstreet").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortzip").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortcity").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortsubject").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolbranch").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstatus").src = require('../assets/sort_def.svg');
-            break;
-          case 'email':
-            document.getElementById("imgsortemail").src = require('../assets/sort_desc.svg');
-            document.getElementById("imgsortpersonalnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgender").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgrad").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortfirstname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortlastname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsorttelephone").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstreet").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortzip").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortcity").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortsubject").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolbranch").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstatus").src = require('../assets/sort_def.svg');
-            break;
-          case 'telephone':
-            document.getElementById("imgsorttelephone").src = require('../assets/sort_desc.svg');
-            document.getElementById("imgsortpersonalnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgender").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgrad").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortfirstname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortlastname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortemail").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstreet").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortzip").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortcity").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortsubject").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolbranch").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstatus").src = require('../assets/sort_def.svg');
-            break;
-          case 'street':
-            document.getElementById("imgsortstreet").src = require('../assets/sort_desc.svg');
-            document.getElementById("imgsortpersonalnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgender").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgrad").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortfirstname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortlastname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortemail").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsorttelephone").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortzip").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortcity").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortsubject").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolbranch").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstatus").src = require('../assets/sort_def.svg');
-            break;
-          case 'zip':
-            document.getElementById("imgsortzip").src = require('../assets/sort_desc.svg');
-            document.getElementById("imgsortpersonalnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgender").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgrad").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortfirstname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortlastname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortemail").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsorttelephone").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstreet").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortcity").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortsubject").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolbranch").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstatus").src = require('../assets/sort_def.svg');
-            break;
-          case 'city':
-            document.getElementById("imgsortcity").src = require('../assets/sort_desc.svg');
-            document.getElementById("imgsortpersonalnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgender").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgrad").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortfirstname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortlastname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortemail").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsorttelephone").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstreet").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortzip").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortsubject").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolbranch").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstatus").src = require('../assets/sort_def.svg');
-            break;
-          case 'subject':
-            document.getElementById("imgsortsubject").src = require('../assets/sort_desc.svg');
-            document.getElementById("imgsortpersonalnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgender").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgrad").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortfirstname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortlastname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortemail").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsorttelephone").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstreet").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortzip").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortcity").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolbranch").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstatus").src = require('../assets/sort_def.svg');
-            break;
-          case 'school_branch':
-            document.getElementById("imgsortschoolbranch").src = require('../assets/sort_desc.svg');
-            document.getElementById("imgsortpersonalnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgender").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgrad").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortfirstname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortlastname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortemail").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsorttelephone").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstreet").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortzip").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortcity").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortsubject").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstatus").src = require('../assets/sort_def.svg');
-            break;
-          case 'school_name':
-            document.getElementById("imgsortschoolname").src = require('../assets/sort_desc.svg');
-            document.getElementById("imgsortpersonalnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgender").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgrad").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortfirstname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortlastname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortemail").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsorttelephone").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstreet").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortzip").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortcity").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortsubject").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolbranch").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstatus").src = require('../assets/sort_def.svg');
-            break;
-          case 'school_number':
-            document.getElementById("imgsortschoolnumber").src = require('../assets/sort_desc.svg');
-            document.getElementById("imgsortpersonalnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgender").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgrad").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortfirstname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortlastname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortemail").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsorttelephone").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstreet").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortzip").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortcity").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortsubject").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolbranch").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstatus").src = require('../assets/sort_def.svg');
-            break;
-          case 'status':
-            document.getElementById("imgsortstatus").src = require('../assets/sort_desc.svg');
-            document.getElementById("imgsortpersonalnumber").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgender").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortgrad").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortfirstname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortlastname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortemail").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsorttelephone").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortstreet").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortzip").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortcity").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortsubject").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolbranch").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolname").src = require('../assets/sort_def.svg');
-            document.getElementById("imgsortschoolnumber").src = require('../assets/sort_def.svg');
-            break;
-        }
 
+    exportExcel(){
+      this.$store.dispatch('teacher/exportExcel', this.checkedBoxes);
+    },
 
-        this.rows.sort(function (a, b) {
-          if (typeof(a[col]) === 'number' && typeof(b[col]) === 'number'){
-            if (a[col] > b[col]) {
-              return 1;
-            } else if (a[col]< b[col]) {
-              return -1;
-            }
-          } else if (a[col].toLowerCase() < b[col].toLowerCase()) {
-            if (a[col].toLowerCase() > b[col].toLowerCase()) {
-              return 1;
-            } else if (a[col].toLowerCase() < b[col].toLowerCase()) {
-              return -1;
-            }
-          }
-          return 0;
-        })
-      }
-    }
   },
+
   watch: {
     checkedBoxes(){
       if (this.checkedBoxes.length > 1 || this.checkedBoxes.length < 1){
-        document.getElementById("editbutton").style.visibility = "hidden";
-        // EXPORT & DELETE
+        document.getElementById("editbutton").style.display = "none";
       } else {
-        document.getElementById("editbutton").style.visibility = "visible";
+        document.getElementById("editbutton").style.display = "unset";
       }
       localStorage.setItem('checkedBoxID', this.checkedBoxes[0]);
     }
   },
-  computed: {
-    "columns": function columns() {
-      if (this.rows.length === 0) {
-        return [];
-      }
-      return Object.keys(this.rows[0])
-    },
-    filteredRows() {
-      return this.rows.filter(() => {
-        /*const personal_number = row.personal_number.toLowerCase();
-        const gender = row.gender.toLowerCase();
-        const grad = row.grad.toLowerCase();
-        const firstname = row.firstname.toLowerCase();
-        const lastname = row.lastname.toLowerCase();
-        const email = row.email.toLowerCase();
-        const telephone = row.telephone.toLowerCase();
-        const street = row.street.toLowerCase();
-        const zip = row.zip;
-        const city = row.city.toLowerCase();
-        const school_branch = row.school_branch.toLowerCase();
-        const school_name = row.school_name.toLowerCase();
-        const school_number = row.school_number;
-        const status = row.status;
-
-        const searchTerm = this.filter.toLowerCase();
-
-        const personal_number = row.personal_number;
-        const gender = row.gender;
-        const grad = row.grad;
-        const firstname = row.firstname;
-        const lastname = row.lastname;
-        const email = row.email;
-        const telephone = row.telephone;
-        const street = row.street;
-        const zip = row.zip;
-        const city = row.city;
-        const school_branch = row.school_branch;
-        const school_name = row.school_name;
-        const school_number = row.school_number;
-        const status = row.status;
 
-        const searchTerm = this.filter.toLowerCase();*/
-
-        return true; //personal_number.includes(searchTerm) || gender.includes(searchTerm) || grad.includes(searchTerm) || firstname.includes(searchTerm) || lastname.includes(searchTerm) || email.includes(searchTerm) || telephone.includes(searchTerm) || street.includes(searchTerm) || zip.includes(searchTerm) || city.includes(searchTerm) || school_branch.includes(searchTerm) || school_name.includes(searchTerm) || school_number.includes(searchTerm) || status.includes(searchTerm);
-      });
-    }
-  }
 }
 </script>
 
 <style scoped>
-.content{
-  background-color: whitesmoke;
-  width: 100%;
-  height: 100vh;
-  overflow: auto;
-  white-space: nowrap;
-}
-
-.search_box{
-  width: 100%;
-  margin-top: 50px;
-  text-align:left;
-  position: relative;
-}
-
-.search_box-inner {
-  display:inline;
-  font-size:1em;
-  border-radius: 8em;
-  border:0.1em solid rgba(218, 208, 190, 1);
-  box-shadow:0 0 0.3em rgba(60, 60, 60, 0.4);
-  padding:0.3em;
-  background:white;
-}
 
 .entry_box-inner {
   position: relative;
@@ -787,74 +154,40 @@ export default {
 }
 
 #exportbutton, #addbutton, #editbutton, #deletebutton {
-  margin-right: 25px;
+  margin: 15px;
   display:inline-block;
   padding:0.3em 1.2em;
-  border-radius:2em;
+  border-radius: 10px;
   box-sizing: border-box;
   text-decoration:none;
-  font-weight:300;
+  font-weight: bold;
   color:#FFFFFF;
   background-color:#528fff;
+  border: 2px solid #2770f5; /* Green */
   text-align:center;
   transition: all 0.2s;
 }
 
 #exportbutton:hover, #deletebutton:hover, #addbutton:hover , #editbutton:hover{
-  background-color:#9fc1ff;
-}
-
-.search_box-inner i img {
-  width: 5%;
-  text-align: center;
-  margin: 5px;
+  background-color: #70a1ff;
 }
 
-#inpt_search{
-  transition:all 0.2s ease-out;
-  width:15px;
-  border-radius:0;
-  box-shadow:none;
-  outline: none;
-  padding:0;
-  margin:0;
-  border:0;
-  background-color: transparent;
-  opacity:0;
-}
-#inpt_search:focus {
-  width: 10em;
-  opacity: 1;
+.card {
+  /* Add shadows to create the "card" effect */
+  box-shadow: 0 4px 30px 0 rgba(0,0,0,0.1);
+  transition: 0.2s;
+  margin-top: 20px;
+  margin-right: 10px;
+  height: 95vh;
+  border-radius: 3px;
+  border-color: #f2f5f8;
+  border: 0px;
 }
-
-.content table {
-  margin-top: 50px;
-  margin-right: 1275px;
-  display: inline-block;
-  font-family: arial, sans-serif;
-  border-collapse: collapse;
-  width: 100%;
-}
-
-.content table th {
-  text-transform: uppercase;
-  text-align: left;
-  background: #9fc1ff;
-  color: #000000;
-  padding: 8px;
-  min-width: 30px;
-}
-
-.content table td {
-  text-align: left;
-  padding: 8px;
-  border-right: 2px solid #9fc1ff;
-}
-.content table td:last-child {
-  border-right: none;
+.e-resizable {
+  overflow: auto;
+  height: 100vh;
+  background-color: #f2f5f8;
+  border-color: transparent;
 }
 
-.content table tbody tr:nth-child(2n) td {
-  background: #D4D8F9;
-}
 </style>
\ No newline at end of file
diff --git a/src/models/event.js b/src/models/event.js
index 299d37e4b6608f3a74b5a7854c05e90369194f69..b05257458a11dd34789e9c93e89c25e9c70c40d9 100644
--- a/src/models/event.js
+++ b/src/models/event.js
@@ -1,11 +1,12 @@
 export default class Event {
 
-    constructor(id, title, description, startTime, endTime) {
+    constructor(id, title, description, startTime, endTime, status) {
         this.id = id;
         this.title = title;
         this.description = description;
         this.startTime = startTime;
         this.endTime = endTime;
+        this.status = status;
     }
 
 }
\ No newline at end of file
diff --git a/src/router.js b/src/router.js
index 3f1a5d4dae05c4e857a0803eebc62ae5d7ccf29b..2985b6b2cd86d4f0f412f683503031356419a0ee 100644
--- a/src/router.js
+++ b/src/router.js
@@ -7,7 +7,6 @@ import Register from "./components/SignIn";
 import Home     from "./components/Home";
 import Courses  from "./components/Courses";
 import Calendar from "./components/Calendar";
-import Layouts  from "./components/Layouts";
 import Teachers from "./components/Teachers";
 import CreateCourse from "@/components/CreateEditComponents/CreateCourse";
 import EditCourse from "@/components/CreateEditComponents/EditCourse";
@@ -115,11 +114,6 @@ const router = new Router({
             name: 'calendar',
             component: Calendar,
         },
-        {
-            path: '/layouts',
-            name: 'layouts',
-            component: Layouts,
-        },
         {
             path: '/teachers',
             name: 'teachers',
diff --git a/src/services/certification.service.js b/src/services/certification.service.js
index e19c1e849959d117bbcbb5143e3e6a7a08f4405e..e48be8c5b39556b860046602a3ad692fc8ca1eb3 100644
--- a/src/services/certification.service.js
+++ b/src/services/certification.service.js
@@ -1,5 +1,6 @@
 import axios from 'axios';
 import authHeader from "@/services/auth-header";
+import fileDownload from "js-file-download";
 
 const API_URL = 'http://localhost:9192/';
 
@@ -71,6 +72,29 @@ class CertificationService {
                 return response.data;
             });
     }
+
+    exportExcel(ids) {
+        let idsArray = ""
+        if (ids.length > 0)
+            idsArray =  "/";
+
+        for (let i = 0; i < ids.length; i++) {
+            if (i === ids.length-1)
+                idsArray += ids[i];
+            else
+                idsArray += ids[i]+",";
+        }
+
+        return axios
+            .get(API_URL + 'exportCertificationExcel' + idsArray, {
+                headers: authHeader(),
+                responseType: 'blob',
+            })
+            .then(response => {
+                fileDownload(response.data, "Fortbildungen.xlsx");
+                return response.data;
+            });
+    }
 }
 
 
diff --git a/src/services/student.service.js b/src/services/student.service.js
index e1cbabedb8e40a731e486e9442b4ed6183f3f3be..d366eab51d31be2c164aa57da75b76c54defb759 100644
--- a/src/services/student.service.js
+++ b/src/services/student.service.js
@@ -9,7 +9,6 @@ class StudentService {
     insert(student) {
         return axios
             .post(API_URL + 'insertStudent', {
-                    id: student.id,
                     anrede: student.anrede,
                     firstname: student.firstname,
                     lastname: student.lastname,
@@ -21,6 +20,7 @@ class StudentService {
                     sommeruni_19: student.sommeruni19,
                     sommeruni_20: student.sommeruni20,
                     natuerlich_2020: student.natuerlich20,
+                    status: student.status
                 }
 
                 ,{headers: authHeader() })
@@ -32,7 +32,6 @@ class StudentService {
     update(student) {
         return axios
             .post(API_URL + 'updateStudent', {
-                //backend (request) = front
                     id: student.id,
                     anrede: student.anrede,
                     firstname: student.firstname,
diff --git a/src/store/certification.module.js b/src/store/certification.module.js
index 2b7d95734417d45d37f8ad75cee1047e04c12d24..3bf0bde7f5d907dc5355161dc827c07efdf7b3e9 100644
--- a/src/store/certification.module.js
+++ b/src/store/certification.module.js
@@ -71,6 +71,19 @@ export const certification = {
                     return Promise.reject(error);
                 }
             );
+        },
+
+        exportExcel({ commit }, ids) {
+            return CertificationService.exportExcel(ids).then(
+                response => {
+                    commit('insertSuccess', response);
+                    return Promise.resolve(response);
+                },
+                error => {
+                    commit('insertFailure');
+                    return Promise.reject(error);
+                }
+            );
         }
     },