diff --git a/package-lock.json b/package-lock.json
index c129e69c174cf30509cd27955aeedd0b430f297e..ed435efa684a9eda2e377829455c27e01ac5955e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1777,16 +1777,6 @@
           "integrity": "sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==",
           "dev": true
         },
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
         "cacache": {
           "version": "13.0.1",
           "resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz",
@@ -1813,34 +1803,6 @@
             "unique-filename": "^1.1.1"
           }
         },
-        "chalk": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
         "find-cache-dir": {
           "version": "3.3.1",
           "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz",
@@ -1862,25 +1824,6 @@
             "path-exists": "^4.0.0"
           }
         },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
         "locate-path": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -1945,16 +1888,6 @@
             "minipass": "^3.1.1"
           }
         },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
         "terser-webpack-plugin": {
           "version": "2.3.8",
           "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
@@ -1971,18 +1904,6 @@
             "terser": "^4.6.12",
             "webpack-sources": "^1.4.3"
           }
-        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.0.0-beta.8",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.8.tgz",
-          "integrity": "sha512-oouKUQWWHbSihqSD7mhymGPX1OQ4hedzAHyvm8RdyHh6m3oIvoRF+NM45i/bhNOlo8jCnuJhaSUf/6oDjv978g==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chalk": "^4.1.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^2.0.0"
-          }
         }
       }
     },
@@ -4263,6 +4184,11 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "dayjs": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.9.1.tgz",
+      "integrity": "sha512-01NCTBg8cuMJG1OQc6PR7T66+AFYiPwgDvdJmvJBn29NGzIG+DIFxPLNjHzwz3cpFIvG+NcwIjP9hSaPVoOaDg=="
+    },
     "de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -11381,6 +11307,87 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.0.0-beta.8",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.8.tgz",
+      "integrity": "sha512-oouKUQWWHbSihqSD7mhymGPX1OQ4hedzAHyvm8RdyHh6m3oIvoRF+NM45i/bhNOlo8jCnuJhaSUf/6oDjv978g==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-password": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/vue-password/-/vue-password-3.0.0.tgz",
diff --git a/package.json b/package.json
index 38643f0c219669a27dc4f79d71218c387cc53729..596088a963d369980eb6b71ab8810febae3d83ee 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "bootstrap": "^4.5.2",
     "bootstrap-vue": "^2.17.3",
     "core-js": "^3.6.5",
+    "dayjs": "^1.9.1",
     "file-saver": "^2.0.2",
     "jquery": "^3.5.1",
     "lodash.trim": "^4.5.1",
diff --git a/src/components/Calendar.vue b/src/components/Calendar.vue
index c9f0a50266e70c5771e9e4353330e5b2b25ed5bb..404c6bccb134cb896061182319c8f50d31a1a89b 100644
--- a/src/components/Calendar.vue
+++ b/src/components/Calendar.vue
@@ -1,27 +1,10 @@
 <template>
   <div class="content col-md-12">
-    Calendar
   </div>
 </template>
 
 <script>
 export default {
   name: "Calendar",
-  components: {}
 }
-</script>
-
-<style scoped>
-
-/* Links on mouse-over */
-.sidebar a:hover:not(.active) {
-  background-color: #c4defa;
-  color: white;
-}
-
-content {
-  background-color: whitesmoke;
-}
-
-
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/components/Certifications.vue b/src/components/Certifications.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b9aba63a6571d6c83234444d7f101b9b0e71c773
--- /dev/null
+++ b/src/components/Certifications.vue
@@ -0,0 +1,319 @@
+<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>
+        <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..." />
+      </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>
+
+<script>
+export default {
+  name: "Certifications",
+  data: function() {
+    return {
+      rows: [],
+      checkedBoxes: [],
+      rowIDs: ['imgsortcertificationnumber','imgsortcertificationname','imgsortcertificationowner','imgsortcertificationdate'],
+      filter:'',
+      currentSort:'imgsortcertificationnumber',
+      currentSortDir:'asc',
+      sortImg: 'sort_def.svg',
+    }
+  },
+
+  created() {
+    localStorage.setItem('checkedBoxID', 0);
+    this.loadData();
+  },
+
+  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;
+              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');
+      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;
+      }
+    },
+
+    loadData(){
+      this.$store.dispatch('certification/getAll').then(
+          (data) => {
+            let x;
+            for(x = 0; x < data.length; x++){
+              this.rows.push({certificationid: data[x].certificationid, certificationtype: data[x].certificationtype, certificationowner: data[x].certificationowner, certificationdate: data[x].certificationdate, certificationexpiredate: data[x].certificationexpiredate});
+            }
+          },
+          error => {
+            this.message = (error.response && error.response.data) || error.message || error.toString();
+            this.successful = false;
+          }
+      );
+    },
+
+    "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
+      } else {
+        document.getElementById("editbutton").style.visibility = "visible";
+      }
+      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;
+  display:inline;
+}
+
+#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;
+}
+
+.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%;
+}
+
+.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: #D4D8F9;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/CreateEditComponents/CreateCertification.vue b/src/components/CreateEditComponents/CreateCertification.vue
new file mode 100644
index 0000000000000000000000000000000000000000..12352bbf5bed948c3c285d54c992d6b97abbf5df
--- /dev/null
+++ b/src/components/CreateEditComponents/CreateCertification.vue
@@ -0,0 +1,140 @@
+<template>
+  <div>
+    <div class="row col-md-12">
+      <div id="content" class="content col-md-12">
+        <form @submit="validateBeforeSubmit" class="col-md-10" style="margin-bottom: 20px">
+          <div class="form-row">
+            <div class="col-md-11 mb-3">
+              <h1 class="formTitle" style="margin-top: 30px">Zertifikats-ID</h1>
+              <div class="input_container">
+                <input v-model="certification.certificationid" type="text" class="form-control inputField" placeholder="Zertifikats-ID" aria-label="certificationid" required>
+              </div>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="col-md-11 mb-3">
+              <h1 class="formTitle">Angebot</h1>
+              <div class="input_container">
+                <input v-model="certification.certificationtype" type="text" class="form-control inputField" placeholder="Zertifikatsart" aria-label="certificationtype" required>
+              </div>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="col-md-11 mb-3">
+              <h1 class="formTitle">Angebot</h1>
+              <div class="input_container">
+                <input v-model="certification.certificationname" type="text" class="form-control inputField" placeholder="Zertifikatsname" aria-label="certificationname" required>
+              </div>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="col-md-11 mb-3">
+              <h1 class="formTitle">Angebot</h1>
+              <div class="input_container">
+                <input v-model="certification.certificationowner" type="text" class="form-control inputField" placeholder="Zertifikatsbesitzer" aria-label="certificationowner" required>
+              </div>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="col-md-11 mb-3">
+              <h1 class="formTitle">Angebot</h1>
+              <div class="input_container">
+                <input v-model="certification.certificationdate" type="text" class="form-control inputField" placeholder="Austellungsdatum" aria-label="certificationdate" required>
+              </div>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="col-md-11 mb-3">
+              <h1 class="formTitle">Angebot</h1>
+              <div class="input_container">
+                <input v-model="certification.certificationexpiredate" type="text" class="form-control inputField" placeholder="Ablaufdatum" aria-label="certificationexpiredate" required>
+              </div>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="col-md-11 mb-3">
+              <button class="btn btn-primary btn-lg btn-block" style="margin-top: 20px; border-radius: 10px" type="button" @click="validateBeforeSubmit">Eintrag hinzufügen</button>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-md-12 mb-3">
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Certification from "@/models/certification";
+
+export default {
+  name: "CreateCertification.vue",
+
+  data(){
+    return {
+      message: "",
+      certification: new Certification('', '', '', '', '', ''),
+    }
+  },
+
+  methods: {
+    validateBeforeSubmit() {
+      this.$validator.validate().then(isValid => {
+        if (isValid) {
+          console.log("isvalid")
+          this.$store.dispatch('certification/insert', this.certification).then(
+              data => {
+                this.$router.push('/certification');
+                this.message = data.message;
+                this.successful = true;
+              },
+              error => {
+                this.message = (error.response && error.response.data) || error.message || error.toString();
+                this.successful = false;
+              }
+          );
+        } else {
+
+          console.log("not isvalid")
+        }
+      });
+    }
+  }
+}
+</script>
+
+<style scoped>
+div.content {
+  background-color: whitesmoke;
+  position: fixed;
+  padding: 1px 16px;
+  height: 1000px;
+  overflow-y: auto;
+}
+
+.formTitle {
+  font-size: 14px;
+  font-weight: 500;
+  color: #6B6C6F;
+}
+
+.inputField {
+  height: 44px;
+  margin-top: 10px;
+  padding-left: 70px;
+  padding-right: 70px;
+  border-color: #DFE2E6;
+  border-width: 2px;
+  border-radius: 10px;
+}
+
+.input_container {
+  position:relative;
+}
+
+.btn {
+  margin-bottom: 200px;
+}
+</style>
diff --git a/src/components/CreateEditComponents/EditCertificate.vue b/src/components/CreateEditComponents/EditCertificate.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1f69c07d7a0acc1cf168bf280865c3ee58584c58
--- /dev/null
+++ b/src/components/CreateEditComponents/EditCertificate.vue
@@ -0,0 +1,169 @@
+<template>
+  <div>
+    <div class="row col-md-12">
+      <div id="content" class="content col-md-12">
+        <form @submit="validateBeforeSubmit" class="col-md-10" style="margin-bottom: 20px">
+          <div class="form-row">
+            <div class="col-md-11 mb-3">
+              <h1 class="formTitle" style="margin-top: 30px">Zertifikats-ID</h1>
+              <div class="input_container">
+                <input v-model="certification.certificationid" type="text" class="form-control inputField" placeholder="Zertifikats-ID" aria-label="certificationid" required>
+              </div>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="col-md-11 mb-3">
+              <h1 class="formTitle">Angebot</h1>
+              <div class="input_container">
+                <input v-model="certification.certificationtype" type="text" class="form-control inputField" placeholder="Zertifikatsart" aria-label="certificationtype" required>
+              </div>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="col-md-11 mb-3">
+              <h1 class="formTitle">Angebot</h1>
+              <div class="input_container">
+                <input v-model="certification.certificationname" type="text" class="form-control inputField" placeholder="Zertifikatsname" aria-label="certificationname" required>
+              </div>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="col-md-11 mb-3">
+              <h1 class="formTitle">Angebot</h1>
+              <div class="input_container">
+                <input v-model="certification.certificationowner" type="text" class="form-control inputField" placeholder="Zertifikatsbesitzer" aria-label="certificationowner" required>
+              </div>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="col-md-11 mb-3">
+              <h1 class="formTitle">Angebot</h1>
+              <div class="input_container">
+                <input v-model="certification.certificationdate" type="text" class="form-control inputField" placeholder="Austellungsdatum" aria-label="certificationdate" required>
+              </div>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="col-md-11 mb-3">
+              <h1 class="formTitle">Angebot</h1>
+              <div class="input_container">
+                <input v-model="certification.certificationexpiredate" type="text" class="form-control inputField" placeholder="Ablaufdatum" aria-label="certificationexpiredate" required>
+              </div>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="col-md-11 mb-3">
+              <button class="btn btn-primary btn-lg btn-block" style="margin-top: 20px; border-radius: 10px" type="button" @click="validateBeforeSubmit">Eintrag bearbeiten</button>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-md-12 mb-3">
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Certification from "@/models/certification";
+
+export default {
+  name: "CreateCertification.vue",
+
+  data(){
+    return {
+      id: JSON.parse(localStorage.getItem('checkedBoxID')),
+      message: "",
+      certification: new Certification('', '', '', '', '', ''),
+    }
+  },
+
+  created() {
+    //this.loadData();
+    this.getData();
+  },
+
+  methods: {
+
+    getData(){
+      this.$store.dispatch('certification/getByID', this.id).then(
+          (data) => {
+            this.certification.certificationid = this.certificationid;
+            this.certification.certificationtype = data.certificationtype;
+            this.certification.certificationname = data.certificationname;
+            this.certification.certificationowner = data.certificationowner;
+            this.certification.certificationdate = data.certificationdate;
+            this.certification.certificationexpiredate = data.certificationexpiredate;
+
+          },
+          error => {
+            this.message = (error.response && error.response.data) || error.message || error.toString();
+            this.successful = false;
+          }
+      );
+    },
+
+    validateBeforeSubmit() {
+      this.$validator.validate().then(isValid => {
+        if (isValid) {
+          this.certification.certificationidid = this.id;
+          this.$store.dispatch('certification/update', this.certification).then(
+              data => {
+                this.$router.push('/certification');
+                this.message = data.message;
+                this.successful = true;
+              },
+              error => {
+                this.message = (error.response && error.response.data) || error.message || error.toString();
+                this.successful = false;
+              }
+          );
+        } else {
+
+          console.log("not isvalid")
+        }
+      });
+    },
+
+    loadData(){
+
+    }
+  }
+}
+</script>
+
+<style scoped>
+div.content {
+  background-color: whitesmoke;
+  position: fixed;
+  padding: 1px 16px;
+  height: 1000px;
+  overflow-y: auto;
+}
+
+.formTitle {
+  font-size: 14px;
+  font-weight: 500;
+  color: #6B6C6F;
+}
+
+.inputField {
+  height: 44px;
+  margin-top: 10px;
+  padding-left: 70px;
+  padding-right: 70px;
+  border-color: #DFE2E6;
+  border-width: 2px;
+  border-radius: 10px;
+}
+
+.input_container {
+  position:relative;
+}
+
+.btn {
+  margin-bottom: 200px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/SideMenu.vue b/src/components/SideMenu.vue
index 671159ea4d1fffa47be9a37a271a0858e28036c2..4711ac53bc3af9cbf505ea75a718f4dea54a47ea 100644
--- a/src/components/SideMenu.vue
+++ b/src/components/SideMenu.vue
@@ -10,6 +10,9 @@
       <li :class="[currentPage.includes('teachers') ? activeClass: '', 'navButton']">
         <router-link style="margin-bottom: -25px;" to="/teachers" class="navA">Lehrbeauftragtenübersicht</router-link><br>
       </li>
+      <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>
diff --git a/src/models/certification.js b/src/models/certification.js
new file mode 100644
index 0000000000000000000000000000000000000000..bc0a8d4096b663f90d42f374dbe53a4383d5e492
--- /dev/null
+++ b/src/models/certification.js
@@ -0,0 +1,11 @@
+export default class Certification {
+
+    constructor(certificationid, certificationtype, certificationname, certificationowner, certificationdate, certificationexpiredate) {
+        this.certificationid = certificationid;
+        this.certificationtype = certificationtype;
+        this.certificationname = certificationname;
+        this.certificationowner = certificationowner;
+        this.certificationdate = certificationdate;
+        this.certificationexpiredate = certificationexpiredate;
+    }
+}
diff --git a/src/router.js b/src/router.js
index db389b1c141fb68091607ef8d5541ed6ca138886..3ca359a55b2b17c66047ee95131eb7bc90b09b0c 100644
--- a/src/router.js
+++ b/src/router.js
@@ -13,6 +13,9 @@ import CreateCourse from "@/components/CreateEditComponents/CreateCourse";
 import EditCourse from "@/components/CreateEditComponents/EditCourse";
 import CreateTeacher from "@/components/CreateEditComponents/CreateTeacher";
 import EditTeacher from "@/components/CreateEditComponents/EditTeacher";
+import Certifications from "@/components/Certifications";
+import CreateCertification from "@/components/CreateEditComponents/CreateCertification";
+import EditCertificate from "@/components/CreateEditComponents/EditCertificate";
 
 Vue.use(Router)
 
@@ -52,6 +55,22 @@ const router = new Router({
             name: 'Eintrag löschen'
         },
 
+        // Button from Certification
+        {
+            path: '/createcertification',
+            name: 'neuen Eintrag hinzufügen',
+            component: CreateCertification
+        },
+        {
+            path: '/editcertification',
+            name: 'Eintrag bearbeiten',
+            component: EditCertificate
+        },
+        {
+            path: '/deletecertification',
+            name: 'Eintrag löschen'
+        },
+
         // LOGIN / REGISTER
         {
             path: '/login',
@@ -93,6 +112,11 @@ const router = new Router({
             path: '/teachers',
             name: 'teachers',
             component: Teachers,
+        },
+        {
+            path: '/certifications',
+            name: 'certifications',
+            component: Certifications,
         }
     ]
 })