diff --git a/src/components/Courses.vue b/src/components/Courses.vue
index 02f37d7e6820a6ef6298dce5b0ea74de0dc4eaec..f3a61e3ed7eb96b2b85fe2c6c6ed32ae9278b1bd 100644
--- a/src/components/Courses.vue
+++ b/src/components/Courses.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="content col-md-12">
-    <div class="search_box col-md-4">
+    <div id="search_box" class="search_box col-md-4">
       <div class="entry_box-inner">
         <a id="exportbutton" class="button" href="./exporttable">Tabelle exportieren</a>
         <a id="addbutton" class="button" href="./createcourse">neuen Eintrag hinzufügen</a>
-        <a id="editbutton" class="button" href="./editcourse">Eintrag bearbeiten</a>
+        <a id="editbutton" class="button" href="./editcourse">ausgewählten Eintrag bearbeiten</a>
         <a id="deletebutton" class="button" href="./editcourse">ausgewählte Einträge löschen</a>
       </div>
       <div class="search_box-inner">
@@ -566,8 +566,8 @@ export default {
   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);
+  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;
 }
diff --git a/src/components/CreateEditComponents/CreateCourse.vue b/src/components/CreateEditComponents/CreateCourse.vue
index 9fa43533265463c93dc8845e31ffeeffc0824e80..d65d13e97d133d92f08a0059b569a06e6ee11060 100644
--- a/src/components/CreateEditComponents/CreateCourse.vue
+++ b/src/components/CreateEditComponents/CreateCourse.vue
@@ -3,7 +3,6 @@
     <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">
-          {{message}}
           <div class="form-row">
             <div class="col-md-11 mb-3">
               <h1 class="formTitle" style="margin-top: 30px">Angebotsnummer</h1>
@@ -112,7 +111,7 @@
             <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> h
+          </div>
           <div class="row">
             <div class="col-md-12 mb-3">
             </div>
diff --git a/src/components/CreateEditComponents/EditCourse.vue b/src/components/CreateEditComponents/EditCourse.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5cb769008ade49d38eda66406e273eb8c0d400f0
--- /dev/null
+++ b/src/components/CreateEditComponents/EditCourse.vue
@@ -0,0 +1,195 @@
+<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">Angebotsnummer</h1>
+              <div class="input_container">
+                <input v-model="course.coursenumber" type="text" class="form-control inputField" placeholder="Angebotsnummer" aria-label="angebotsnummer" 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="course.courseoffer" type="text" class="form-control inputField" placeholder="Angebot" aria-label="courseoffer" required>
+              </div>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="col-md-11 mb-3">
+              <h1 class="formTitle" style="margin-top: 10px">Kursname</h1>
+              <div class="input_container">
+                <input v-model="course.coursename" type="text" class="form-control inputField" placeholder="Kursname" aria-label="coursename" required>
+              </div>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="col-md-11 mb-3">
+              <h1 class="formTitle" style="margin-top: 30px">Veranstaltungsart</h1>
+              <div class="input_container">
+                <input v-model="course.eventtype" type="text" class="form-control inputField" placeholder="Veranstaltungsart" aria-label="eventtype" required>
+              </div>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="col-md-11 mb-3">
+              <h1  class="formTitle" style="margin-top: 10px">Kursdatum (yyyy-mm-dd)</h1>
+              <div class="input_container">
+                <input name="coursedate" v-model="course.coursedate" class="form-control inputField" placeholder="Kursdatum" aria-label="coursedate" required>
+              </div>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="col-md-11 mb-3">
+              <h1  class="formTitle" style="margin-top: 10px">Thema</h1>
+              <div class="input_container">
+                <input name="topic" v-model="course.topic" class="form-control inputField" placeholder="Thema" aria-label="topic" required>
+              </div>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="col-md-11 mb-3">
+              <h1  class="formTitle" style="margin-top: 10px">Kursort</h1>
+              <div class="input_container">
+                <input name="courselocation" v-model="course.courselocation" class="form-control inputField" placeholder="Kursort" aria-label="courselocation" required>
+              </div>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="col-md-11 mb-3">
+              <h1  class="formTitle" style="margin-top: 10px">Begleitende Lehrkraft</h1>
+              <div class="input_container">
+                <input name="accompanyingteacher" v-model="course.accompanyingteacher" class="form-control inputField" placeholder="Begleitende Lehrkraft" aria-label="accompanyingteacher" required>
+              </div>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="col-md-11 mb-3">
+              <h1  class="formTitle" style="margin-top: 10px">Betreuende Studenten</h1>
+              <div class="input_container">
+                <input name="supervisingstudents" v-model="course.supervisingstudents" class="form-control inputField" placeholder="Betreuende Studenten" aria-label="supervisingstudents" required>
+              </div>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="col-md-11 mb-3">
+              <h1  class="formTitle" style="margin-top: 10px">Anzahl der Anwesenden</h1>
+              <div class="input_container">
+                <input name="presentstudents" v-model="course.presentstudents" class="form-control inputField" placeholder="Anzahl der Anwesenden" aria-label="presentstudents" required>
+              </div>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="col-md-11 mb-3">
+              <h1  class="formTitle" style="margin-top: 10px">Anzahl der Angemeldeten</h1>
+              <div class="input_container">
+                <input name="registeredstudents" v-model="course.registeredstudents" class="form-control inputField" placeholder="Anzahl der Angemeldeten" aria-label="registeredstudents" required>
+              </div>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="col-md-11 mb-3">
+              <h1  class="formTitle" style="margin-top: 10px">Kursleiter</h1>
+              <div class="input_container">
+                <input name="instructor" v-model="course.instructor" class="form-control inputField" placeholder="Kursleiter" aria-label="instructor" required>
+              </div>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="col-md-11 mb-3">
+              <h1  class="formTitle" style="margin-top: 10px">Notiz</h1>
+              <div class="input_container">
+                <input name="notefield" v-model="course.notefield" class="form-control inputField" placeholder="Notiz" aria-label="notefield" 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 Course from "@/models/course";
+
+export default {
+  name: "EditCourse.vue",
+
+  data(){
+    return {
+      message: "",
+      course: new Course('', '', '', '', '', '', '', '', '', '', '', '', ''),
+    }
+  },
+
+  methods: {
+    validateBeforeSubmit() {
+      this.$validator.validate().then(isValid => {
+        if (isValid) {
+          console.log("isvalid")
+          this.$store.dispatch('course/insert', this.course).then(
+              data => {
+                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>
\ No newline at end of file
diff --git a/src/components/Teachers.vue b/src/components/Teachers.vue
index 9d0b86202b438526f1f195a8a0f1f32da95a15b7..1a8148a6a1ebd756672fa5dac4a8d0614f264bcb 100644
--- a/src/components/Teachers.vue
+++ b/src/components/Teachers.vue
@@ -1,13 +1,16 @@
 <template>
   <div class="content col-md-12">
     <div class="search_box col-md-4">
+      <div class="entry_box-inner">
+        <a id="exportbutton" class="button" href="./exporttable">Tabelle exportieren</a>
+        <a id="addbutton" class="button" href="./createcourse">neuen Eintrag hinzufügen</a>
+        <a id="editbutton" class="button" href="./editcourse">Eintrag bearbeiten</a>
+        <a id="deletebutton" class="button" href="./editcourse">ausgewählte Einträge löschen</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 class="entry_box-inner">
-        <a href="./createteacher"><button>neuen Eintrag hinzufügen</button></a>
-      </div>
     </div>
     <table id="Table">
       <tr>
@@ -33,7 +36,7 @@
 </template>
 
 <script>
-export default {
+/*export default {
   name: "Teachers",
   data(){
     return{
@@ -78,8 +81,596 @@ export default {
       );
     }
   }
+}*/
+</script>
+
+<script>
+export default {
+  name: "Teachers",
+  data: function() {
+    return {
+      rows: [
+        {angebotsnummer: 232, angebot: "Biologie", kursname: 'Neurobiologie', veranstaltungsart: 'regulärer Kurs', kursdatum: '23.08.2020', thema: '', kursort: 'T9 Hörsaal', begleitendeLehrkraft: 'Frau Muster', betreuendeStudenten: 'Max Miller', anzahlderAnwesenden: '34', anzahlderAngemeldeten: '12', kursleiter: 'Frau Test', notiz: ''},
+        {angebotsnummer: 23342, angebot: "ABiologie", kursname: 'bNeukkkrobiologie', veranstaltungsart: 'regulärer Kurs', kursdatum: '22.08.2020', thema: '', kursort: 'T9 Hörsaal', begleitendeLehrkraft: 'Frau Muster', betreuendeStudenten: 'Max Miller', anzahlderAnwesenden: '34', anzahlderAngemeldeten: '12', kursleiter: 'Frau Test', notiz: ''},
+        {angebotsnummer: 22, angebot: "Ciologie", kursname: 'ANeurobkiologie', veranstaltungsart: 'regulärer Kurs', kursdatum: '21.08.2020', thema: '', kursort: 'T9 Hörsaal', begleitendeLehrkraft: 'Frau Muster', betreuendeStudenten: 'Max Miller', anzahlderAnwesenden: '34', anzahlderAngemeldeten: '12', kursleiter: 'Frau Test', notiz: ''},
+        {angebotsnummer: 1342, angebot: "Diologie", kursname: 'cNeukkkrobiologie', veranstaltungsart: 'regulärer Kurs', kursdatum: '23.07.2020', thema: '', kursort: 'T9 Hörsaal', begleitendeLehrkraft: 'Frau Muster', betreuendeStudenten: 'Max Miller', anzahlderAnwesenden: '34', anzahlderAngemeldeten: '12', kursleiter: 'Frau Test', notiz: ''},
+        {angebotsnummer: 132, angebot: "Bdologie", kursname: 'eNeurobiologie', veranstaltungsart: 'regulärer Kurs', kursdatum: '23.08.2021', thema: '', kursort: 'T9 Hörsaal', begleitendeLehrkraft: 'Frau Muster', betreuendeStudenten: 'Max Miller', anzahlderAnwesenden: '34', anzahlderAngemeldeten: '12', kursleiter: 'Frau Test', notiz: ''},
+      ],
+      filter:'',
+      currentSort:'angebotsnummer',
+      currentSortDir:'asc',
+      sortImg: 'sort_def.svg',
+    }
+  },
+  methods: {
+    "sortTable": function sortTable(col) {
+      this.currentSort = col;
+      if (this.currentSortDir === 'asc') {
+        this.currentSortDir = 'desc';
+
+        switch (this.currentSort){
+          case 'angebotsnummer':
+            document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_asc.svg');
+            document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortthema").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg');
+            break;
+          case 'angebot':
+            document.getElementById("imgsortangebot").src = require('../assets/sort_asc.svg');
+            document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortthema").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg');
+            break;
+          case 'kursname':
+            document.getElementById("imgsortkursname").src = require('../assets/sort_asc.svg');
+            document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortthema").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg');
+            break;
+          case 'veranstaltungsort':
+            document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_asc.svg');
+            document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortthema").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg');
+            break;
+          case 'kursdatum':
+            document.getElementById("imgsortkursdatum").src = require('../assets/sort_asc.svg');
+            document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortthema").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg');
+            break;
+          case 'thema':
+            document.getElementById("imgsortthema").src = require('../assets/sort_asc.svg');
+            document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg');
+            break;
+          case 'kursort':
+            document.getElementById("imgsortkursort").src = require('../assets/sort_asc.svg');
+            document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortthema").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg');
+            break;
+          case 'begleitendeLehrkraft':
+            document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_asc.svg');
+            document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortthema").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg');
+            break;
+          case 'betreuendeStudenten':
+            document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_asc.svg');
+            document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortthema").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg');
+            break;
+          case 'anzahlderAnwesenden':
+            document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_asc.svg');
+            document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortthema").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg');
+            break;
+          case 'anzahlderAngemeldeten':
+            document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_asc.svg');
+            document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortthema").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg');
+            break;
+          case 'kursleiter':
+            document.getElementById("imgsortkursleiter").src = require('../assets/sort_asc.svg');
+            document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortthema").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg');
+            break;
+          case 'notiz':
+            document.getElementById("imgsortnotiz").src = require('../assets/sort_asc.svg');
+            document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortthema").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAngemeldeten").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 'angebotsnummer':
+            document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_desc.svg');
+            document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortthema").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg');
+            break;
+          case 'angebot':
+            document.getElementById("imgsortangebot").src = require('../assets/sort_desc.svg');
+            document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortthema").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg');
+            break;
+          case 'kursname':
+            document.getElementById("imgsortkursname").src = require('../assets/sort_desc.svg');
+            document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortthema").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg');
+            break;
+          case 'veranstaltungsort':
+            document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_desc.svg');
+            document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortthema").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg');
+            break;
+          case 'kursdatum':
+            document.getElementById("imgsortkursdatum").src = require('../assets/sort_desc.svg');
+            document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortthema").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg');
+            break;
+          case 'thema':
+            document.getElementById("imgsortthema").src = require('../assets/sort_desc.svg');
+            document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg');
+            break;
+          case 'kursort':
+            document.getElementById("imgsortkursort").src = require('../assets/sort_desc.svg');
+            document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortthema").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg');
+            break;
+          case 'begleitendeLehrkraft':
+            document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_desc.svg');
+            document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortthema").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg');
+            break;
+          case 'betreuendeStudenten':
+            document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_desc.svg');
+            document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortthema").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg');
+            break;
+          case 'anzahlderAnwesenden':
+            document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_desc.svg');
+            document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortthema").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg');
+            break;
+          case 'kursleiter':
+            document.getElementById("imgsortkursleiter").src = require('../assets/sort_desc.svg');
+            document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortthema").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg');
+            break;
+          case 'anzahlderAngemeldeten':
+            document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_desc.svg');
+            document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortthema").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursleiter").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortnotiz").src = require('../assets/sort_def.svg');
+            break;
+          case 'notiz':
+            document.getElementById("imgsortnotiz").src = require('../assets/sort_desc.svg');
+            document.getElementById("imgsortangebotsnummer").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortangebot").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursname").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortveranstaltungsort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursdatum").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortthema").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursort").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbegleitendeLehrkraft").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortbetreuendeStudenten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAnwesenden").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortanzahlderAngemeldeten").src = require('../assets/sort_def.svg');
+            document.getElementById("imgsortkursleiter").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 (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;
+        })
+      }
+    }
+  },
+  computed: {
+    "columns": function columns() {
+      if (this.rows.length == 0) {
+        return [];
+      }
+      return Object.keys(this.rows[0])
+    },
+    filteredRows() {
+      return this.rows.filter(row => {
+        const angebotsnummer = row.angebotsnummer.toString().toLowerCase();
+        const angebot = row.angebot.toLowerCase();
+        const kursname = row.kursname.toLowerCase();
+        const veranstaltungsart = row.veranstaltungsart.toLowerCase();
+        const kursdatum = row.kursdatum.toLowerCase();
+        const thema = row.thema.toLowerCase();
+        const kursort = row.kursort.toLowerCase();
+        const begleitendeLehrkraft = row.begleitendeLehrkraft.toLowerCase();
+        const betreuendeStudenten = row.betreuendeStudenten.toLowerCase();
+        const anzahlderAnwesenden = row.anzahlderAnwesenden.toString();
+        const anzahlderAngemeldeten = row.anzahlderAngemeldeten.toString();
+        const kursleiter = row.kursleiter.toLowerCase();
+        const notiz = row.notiz.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);
+      });
+    }
+  }
 }
 </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;
+  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/router.js b/src/router.js
index 0544e0bc5fd37eaed62b2ab27d06499e588ea00c..57c8dca2415130a9883acc73ce192f63bcbdf057 100644
--- a/src/router.js
+++ b/src/router.js
@@ -10,6 +10,7 @@ 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";
 
 Vue.use(Router)
 
@@ -17,12 +18,17 @@ const router = new Router({
     mode: 'history',
     base:  process.env.BASE_URL,
     routes: [
-        // Button from Add Courses
+        // Button from Courses
         {
             path: '/createcourse',
             name: 'neuen Eintrag hinzufügen',
             component: CreateCourse
         },
+        {
+            path: '/editcourse',
+            name: 'Eintrag bearbeiten',
+            component: EditCourse
+        },
 
         // LOGIN / REGISTER
         {