diff --git a/package-lock.json b/package-lock.json
index eb581b2d772fdb56c5e3bac5d604b75aa59a1a1d..c129e69c174cf30509cd27955aeedd0b430f297e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1055,24 +1055,31 @@
       }
     },
     "@fortawesome/fontawesome-common-types": {
-      "version": "0.2.30",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.30.tgz",
-      "integrity": "sha512-TsRwpTuKwFNiPhk1UfKgw7zNPeV5RhNp2Uw3pws+9gDAkPGKrtjR1y2lI3SYn7+YzyfuNknflpBA1LRKjt7hMg=="
+      "version": "0.2.32",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.32.tgz",
+      "integrity": "sha512-ux2EDjKMpcdHBVLi/eWZynnPxs0BtFVXJkgHIxXRl+9ZFaHPvYamAfCzeeQFqHRjuJtX90wVnMRaMQAAlctz3w=="
     },
     "@fortawesome/fontawesome-svg-core": {
-      "version": "1.2.30",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.30.tgz",
-      "integrity": "sha512-E3sAXATKCSVnT17HYmZjjbcmwihrNOCkoU7dVMlasrcwiJAHxSKeZ+4WN5O+ElgO/FaYgJmASl8p9N7/B/RttA==",
+      "version": "1.2.32",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.32.tgz",
+      "integrity": "sha512-XjqyeLCsR/c/usUpdWcOdVtWFVjPbDFBTQkn2fQRrWhhUoxriQohO2RWDxLyUM8XpD+Zzg5xwJ8gqTYGDLeGaQ==",
       "requires": {
-        "@fortawesome/fontawesome-common-types": "^0.2.30"
+        "@fortawesome/fontawesome-common-types": "^0.2.32"
+      },
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": {
+          "version": "0.2.32",
+          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.32.tgz",
+          "integrity": "sha512-ux2EDjKMpcdHBVLi/eWZynnPxs0BtFVXJkgHIxXRl+9ZFaHPvYamAfCzeeQFqHRjuJtX90wVnMRaMQAAlctz3w=="
+        }
       }
     },
     "@fortawesome/free-solid-svg-icons": {
-      "version": "5.14.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.14.0.tgz",
-      "integrity": "sha512-M933RDM8cecaKMWDSk3FRYdnzWGW7kBBlGNGfvqLVwcwhUPNj9gcw+xZMrqBdRqxnSXdl3zWzTCNNGEtFUq67Q==",
+      "version": "5.15.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.1.tgz",
+      "integrity": "sha512-EFMuKtzRMNbvjab/SvJBaOOpaqJfdSap/Nl6hst7CgrJxwfORR1drdTV6q1Ib/JVzq4xObdTDcT6sqTaXMqfdg==",
       "requires": {
-        "@fortawesome/fontawesome-common-types": "^0.2.30"
+        "@fortawesome/fontawesome-common-types": "^0.2.32"
       }
     },
     "@fortawesome/vue-fontawesome": {
@@ -2287,6 +2294,15 @@
       "integrity": "sha512-aT6camzM4xEA54YVJYSqxz1kv4IHnQZRtThJJHhUMRExaU5spC7jX5ugSwTaTgJliIgs4VhZOk7htClvQ/LmRA==",
       "dev": true
     },
+    "adler-32": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.2.0.tgz",
+      "integrity": "sha1-aj5r8KY5ALoVZSgIyxXGgT0aXyU=",
+      "requires": {
+        "exit-on-epipe": "~1.0.1",
+        "printj": "~1.1.0"
+      }
+    },
     "aggregate-error": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
@@ -3251,6 +3267,16 @@
       "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
       "dev": true
     },
+    "cfb": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.0.tgz",
+      "integrity": "sha512-sXMvHsKCICVR3Naq+J556K+ExBo9n50iKl6LGarlnvuA2035uMlGA/qVrc0wQtow5P1vJEw9UyrKLCbtIKz+TQ==",
+      "requires": {
+        "adler-32": "~1.2.0",
+        "crc-32": "~1.2.0",
+        "printj": "~1.1.2"
+      }
+    },
     "chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -3543,6 +3569,22 @@
         "q": "^1.1.2"
       }
     },
+    "codepage": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.14.0.tgz",
+      "integrity": "sha1-jL4lSBMjVZ19MHVxsP/5HnodL5k=",
+      "requires": {
+        "commander": "~2.14.1",
+        "exit-on-epipe": "~1.0.1"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.14.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.14.1.tgz",
+          "integrity": "sha512-+YR16o3rK53SmWHU3rEM3tPAh2rwb1yPcQX5irVn7mb0gXbwuCCrnkbV5+PBfETdfg1vui07nM6PCG1zndcjQw=="
+        }
+      }
+    },
     "collection-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
@@ -3911,6 +3953,15 @@
         }
       }
     },
+    "crc-32": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.0.tgz",
+      "integrity": "sha512-1uBwHxF+Y/4yF5G48fwnKq6QsIXheor3ZLPT80yGBV1oEUwpPojlEhQbWKVw1VwcTQyMGHK1/XMmTjmlsmTTGA==",
+      "requires": {
+        "exit-on-epipe": "~1.0.1",
+        "printj": "~1.1.0"
+      }
+    },
     "create-ecdh": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz",
@@ -4658,6 +4709,11 @@
       "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
       "dev": true
     },
+    "downloadjs": {
+      "version": "1.4.7",
+      "resolved": "https://registry.npmjs.org/downloadjs/-/downloadjs-1.4.7.tgz",
+      "integrity": "sha1-9p+W+UDg0FU9rCkROYZaPNAQHjw="
+    },
     "duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
@@ -5145,6 +5201,11 @@
         "strip-eof": "^1.0.0"
       }
     },
+    "exit-on-epipe": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz",
+      "integrity": "sha512-h2z5mrROTxce56S+pnvAV890uu7ls7f1kEvVGJbw1OlFH3/mlJ5bkXu0KRyW94v37zzHPiUd55iLn3DA7TjWpw=="
+    },
     "expand-brackets": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
@@ -5463,6 +5524,11 @@
         "schema-utils": "^2.5.0"
       }
     },
+    "file-saver": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.2.tgz",
+      "integrity": "sha512-Wz3c3XQ5xroCxd1G8b7yL0Ehkf0TC9oYC6buPFkNnU9EnaPlifeAFCyCh+iewXTyFRcg0a6j3J7FmJsIhlhBdw=="
+    },
     "file-uri-to-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
@@ -5623,6 +5689,11 @@
       "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=",
       "dev": true
     },
+    "frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA=="
+    },
     "fragment-cache": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
@@ -8985,6 +9056,11 @@
         "utila": "~0.4"
       }
     },
+    "printj": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/printj/-/printj-1.1.2.tgz",
+      "integrity": "sha512-zA2SmoLaxZyArQTOPj5LXecR+RagfPSU5Kw1qP+jkWeNlrq+eJZyY2oS68SU1Z/7/myXM4lo9716laOFAVStCQ=="
+    },
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
@@ -9175,6 +9251,12 @@
         "unpipe": "1.0.0"
       }
     },
+    "raw-loader": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-0.5.1.tgz",
+      "integrity": "sha1-DD0L6u2KAclm2Xh793goElKpeao=",
+      "dev": true
+    },
     "read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -9599,6 +9681,15 @@
         "ajv-keywords": "^3.5.2"
       }
     },
+    "script-loader": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/script-loader/-/script-loader-0.7.2.tgz",
+      "integrity": "sha512-UMNLEvgOAQuzK8ji8qIscM3GIrRCWN6MmMXGD4SD5l6cSycgGsCo0tX5xRnfQcoghqct0tjHjcykgI1PyBE2aA==",
+      "dev": true,
+      "requires": {
+        "raw-loader": "~0.5.1"
+      }
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -10186,6 +10277,14 @@
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
       "dev": true
     },
+    "ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "requires": {
+        "frac": "~1.1.2"
+      }
+    },
     "sshpk": {
       "version": "1.16.1",
       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz",
@@ -11253,6 +11352,14 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "vue-json-excel": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/vue-json-excel/-/vue-json-excel-0.3.0.tgz",
+      "integrity": "sha512-FrSh0tVUpw4K+ilLO8g0Qp52eFJw/hkk3rZPTEKo9qVkJgVfQtZwzj3UWc5ACYxA3jLk9HtjK+f9xKHCN4Kgag==",
+      "requires": {
+        "downloadjs": "^1.4.7"
+      }
+    },
     "vue-loader": {
       "version": "15.9.3",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.3.tgz",
@@ -11979,6 +12086,16 @@
       "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
       "dev": true
     },
+    "wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw=="
+    },
+    "word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA=="
+    },
     "word-wrap": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
@@ -12056,6 +12173,29 @@
         "async-limiter": "~1.0.0"
       }
     },
+    "xlsx": {
+      "version": "0.16.7",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.16.7.tgz",
+      "integrity": "sha512-Xc4NRjci2Grbh9NDk/XoaWycJurxEug1wwn0aJCmB0NvIMyQuHYq2muWLWGidYNZPf94aUbqm6K8Fbjd7gKTZg==",
+      "requires": {
+        "adler-32": "~1.2.0",
+        "cfb": "^1.1.4",
+        "codepage": "~1.14.0",
+        "commander": "~2.17.1",
+        "crc-32": "~1.2.0",
+        "exit-on-epipe": "~1.0.1",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.17.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz",
+          "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg=="
+        }
+      }
+    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
diff --git a/package.json b/package.json
index 9b5baf7bb58907cc68c22304f610c2e4f361e36a..38643f0c219669a27dc4f79d71218c387cc53729 100644
--- a/package.json
+++ b/package.json
@@ -8,13 +8,14 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.30",
-    "@fortawesome/free-solid-svg-icons": "^5.14.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.32",
+    "@fortawesome/free-solid-svg-icons": "^5.15.1",
     "@fortawesome/vue-fontawesome": "^2.0.0",
     "axios": "^0.20.0",
     "bootstrap": "^4.5.2",
     "bootstrap-vue": "^2.17.3",
     "core-js": "^3.6.5",
+    "file-saver": "^2.0.2",
     "jquery": "^3.5.1",
     "lodash.trim": "^4.5.1",
     "popper.js": "^1.16.1",
@@ -22,10 +23,12 @@
     "vue": "^2.6.11",
     "vue-axios-cors": "^1.0.1",
     "vue-crontab": "0.0.4",
+    "vue-json-excel": "^0.3.0",
     "vue-router": "^3.4.3",
     "vue-scrollbar-simple": "0.0.6",
     "vuex": "^3.5.1",
-    "vuex-persistedstate": "^3.1.0"
+    "vuex-persistedstate": "^3.1.0",
+    "xlsx": "^0.16.7"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
@@ -34,6 +37,7 @@
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
+    "script-loader": "^0.7.2",
     "vue-password": "^3.0.0",
     "vue-template-compiler": "^2.6.11"
   },
diff --git a/src/App.vue b/src/App.vue
index 1c8fe36a9b06efd9ae034c281cb548a9e28f2293..e530f0e39509c5076c531f1b9788465c4c0cb1f8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,6 +12,7 @@
 <script>
 
 import SideMenu from "@/components/SideMenu";
+
 export default {
   components: {SideMenu},
 
diff --git a/src/assets/search.svg b/src/assets/search.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f02483c1cca1dc1e37b7347b14d8210511b93d53
--- /dev/null
+++ b/src/assets/search.svg
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M310,190c-5.52,0-10,4.48-10,10s4.48,10,10,10c5.52,0,10-4.48,10-10S315.52,190,310,190z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M500.281,443.719l-133.48-133.48C388.546,277.485,400,239.555,400,200C400,89.72,310.28,0,200,0S0,89.72,0,200
+			s89.72,200,200,200c39.556,0,77.486-11.455,110.239-33.198l36.895,36.895c0.005,0.005,0.01,0.01,0.016,0.016l96.568,96.568
+			C451.276,507.838,461.319,512,472,512c10.681,0,20.724-4.162,28.278-11.716C507.837,492.731,512,482.687,512,472
+			S507.837,451.269,500.281,443.719z M305.536,345.727c0,0.001-0.001,0.001-0.002,0.002C274.667,368.149,238.175,380,200,380
+			c-99.252,0-180-80.748-180-180S100.748,20,200,20s180,80.748,180,180c0,38.175-11.851,74.667-34.272,105.535
+			C334.511,320.988,320.989,334.511,305.536,345.727z M326.516,354.793c10.35-8.467,19.811-17.928,28.277-28.277l28.371,28.371
+			c-8.628,10.183-18.094,19.65-28.277,28.277L326.516,354.793z M486.139,486.139c-3.78,3.78-8.801,5.861-14.139,5.861
+			s-10.359-2.081-14.139-5.861l-88.795-88.795c10.127-8.691,19.587-18.15,28.277-28.277l88.798,88.798
+			C489.919,461.639,492,466.658,492,472C492,477.342,489.919,482.361,486.139,486.139z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M200,40c-88.225,0-160,71.775-160,160s71.775,160,160,160s160-71.775,160-160S288.225,40,200,40z M200,340
+			c-77.196,0-140-62.804-140-140S122.804,60,200,60s140,62.804,140,140S277.196,340,200,340z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M312.065,157.073c-8.611-22.412-23.604-41.574-43.36-55.413C248.479,87.49,224.721,80,200,80c-5.522,0-10,4.478-10,10
+			c0,5.522,4.478,10,10,10c41.099,0,78.631,25.818,93.396,64.247c1.528,3.976,5.317,6.416,9.337,6.416
+			c1.192,0,2.405-0.215,3.584-0.668C311.472,168.014,314.046,162.229,312.065,157.073z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/src/components/Courses.vue b/src/components/Courses.vue
index 069fdeaf60d50f32cfd3b949778dbfa22786d7b8..f3a61e3ed7eb96b2b85fe2c6c6ed32ae9278b1bd 100644
--- a/src/components/Courses.vue
+++ b/src/components/Courses.vue
@@ -1,17 +1,553 @@
 <template>
   <div class="content col-md-12">
-    Courses
+    <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">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">
+        <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 type="checkbox" class="form-check-input" id="checkbox_headerline">
+            <label class="form-check-label" for="checkbox_headerline"></label>
+          </div>
+        </th>
+        <th v-on:click="sortTable('angebotsnummer')"><img id='imgsortangebotsnummer' :src="require('../assets/'+sortImg)">Angebotsnummer</th>
+        <th v-on:click="sortTable('angebot')"><img id="imgsortangebot" :src="require('../assets/'+sortImg)">Angebot</th>
+        <th v-on:click="sortTable('kursname')"><img id="imgsortkursname" :src="require('../assets/'+sortImg)">Kursname</th>
+        <th v-on:click="sortTable('veranstaltungsart')"><img id="imgsortveranstaltungsort" :src="require('../assets/'+sortImg)">Veranstaltungsart</th>
+        <th v-on:click="sortTable('kursdatum')"><img id="imgsortkursdatum" :src="require('../assets/'+sortImg)">Kursdatum</th>
+        <th v-on:click="sortTable('thema')"><img id="imgsortthema" :src="require('../assets/'+sortImg)">Thema</th>
+        <th v-on:click="sortTable('kursort')"><img id="imgsortkursort" :src="require('../assets/'+sortImg)">Kursort</th>
+        <th v-on:click="sortTable('begleitendeLehrkraft')"><img id="imgsortbegleitendeLehrkraft" :src="require('../assets/'+sortImg)">begleitende Lehrkraft</th>
+        <th v-on:click="sortTable('betreuendeStudenten')"><img id="imgsortbetreuendeStudenten" :src="require('../assets/'+sortImg)">betreuende Studenten</th>
+        <th v-on:click="sortTable('anzahlderAnwesenden')"><img id="imgsortanzahlderAnwesenden" :src="require('../assets/'+sortImg)">Anzahl der Anwesenden</th>
+        <th v-on:click="sortTable('anzahlderAngemeldeten')"><img id="imgsortanzahlderAngemeldeten" :src="require('../assets/'+sortImg)">Anzahl der Angemeldeten</th>
+        <th v-on:click="sortTable('kursleiter')"><img id="imgsortkursleiter" :src="require('../assets/'+sortImg)">Kursleiter</th>
+        <th v-on:click="sortTable('notiz')"><img id="imgsortnotiz" :src="require('../assets/'+sortImg)">Notiz</th>
+      </tr>
+      <tr v-for="row in filteredRows" :key="row.angebotsnummer">
+        <td scope="row">
+          <div class="form-check">
+            <input type="checkbox" class="form-check-input" id="checkbox_tablerow">
+            <label class="form-check-label" for="checkbox_tablerow"></label>
+          </div>
+        </td>
+        <td>{{row.angebotsnummer}}</td>
+        <td style="padding-right:200px;">{{row.angebot}}</td>
+        <td style="padding-right:200px;">{{row.kursname}}</td>
+        <td>{{row.veranstaltungsart}}</td>
+        <td>{{row.kursdatum}}</td>
+        <td>{{row.thema}}</td>
+        <td style="padding-right:200px;">{{row.kursort}}</td>
+        <td>{{row.begleitendeLehrkraft}}</td>
+        <td>{{row.betreuendeStudenten}}</td>
+        <td>{{row.anzahlderAnwesenden}}</td>
+        <td>{{row.anzahlderAngemeldeten}}</td>
+        <td>{{row.kursleiter}}</td>
+        <td style="padding-right:300px;">{{row.notiz}}</td>
+      </tr>
+    </table>
   </div>
 </template>
 
 <script>
 export default {
-  name: "Courses"
+  name: "Courses",
+  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 {
+.content{
   background-color: whitesmoke;
   width: 100%;
   height: 100vh;
@@ -19,8 +555,67 @@ export default {
   white-space: nowrap;
 }
 
-.form-check input {
-  align-content: center;
+.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 {
@@ -32,26 +627,25 @@ export default {
   width: 100%;
 }
 
-.content td, th {
-  border: 2px solid #dddddd;
+.content table th {
+  text-transform: uppercase;
+  text-align: left;
+  background: #9fc1ff;
+  color: #000000;
+  padding: 8px;
+  min-width: 30px;
 }
 
-#button_style_newentry {
-  background-color: #5689F0 !important;
-  float: right;
-  border: 5px solid #5689F0;
-  border-radius: 10px;
+.content table td {
+  text-align: left;
+  padding: 8px;
+  border-right: 2px solid #9fc1ff;
 }
-
-#button_style_export {
-  margin: 25px;
-  background-color: #5689F0 !important;
-  float: right;
-  border: 5px solid #5689F0;
-  border-radius: 10px;
+.content table td:last-child {
+  border-right: none;
 }
 
-.buttons {
-  float: right;
+.content table tbody tr:nth-child(2n) td {
+  background: #D4D8F9;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/CreateEditComponents/CreateCourse.vue b/src/components/CreateEditComponents/CreateCourse.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d65d13e97d133d92f08a0059b569a06e6ee11060
--- /dev/null
+++ b/src/components/CreateEditComponents/CreateCourse.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: "CreateCourse.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>
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/DynamicTable.vue b/src/components/DynamicTable.vue
deleted file mode 100644
index a696731a6223da33e864dd233047bb27de418a61..0000000000000000000000000000000000000000
--- a/src/components/DynamicTable.vue
+++ /dev/null
@@ -1,444 +0,0 @@
-<template>
-  <div class="content col-md-12">
-    <table id="Table">
-      <tr>
-        <th scope="row">
-          <div class="form-check">
-            <input type="checkbox" class="form-check-input" id="checkbox_headerline">
-            <label class="form-check-label" for="checkbox_headerline"></label>
-          </div>
-        </th>
-        <th v-on:click="sortTable('angebotsnummer')"><img id='imgsortangebotsnummer' :src="require('../assets/'+sortImg)">Angebotsnummer</th>
-        <th v-on:click="sortTable('angebot')"><img id="imgsortangebot" :src="require('../assets/'+sortImg)">Angebot</th>
-        <th v-on:click="sortTable('kursname')"><img id="imgsortkursname" :src="require('../assets/'+sortImg)">Kursname</th>
-        <th v-on:click="sortTable('veranstaltungsart')"><img id="imgsortveranstaltungsort" :src="require('../assets/'+sortImg)">Veranstaltungsart</th>
-        <th v-on:click="sortTable('kursdatum')"><img id="imgsortkursdatum" :src="require('../assets/'+sortImg)">Kursdatum</th>
-        <th v-on:click="sortTable('kursort')"><img id="imgsortkursort" :src="require('../assets/'+sortImg)">Kursort</th>
-        <th v-on:click="sortTable('begleitendeLehrkraft')"><img id="imgsortbegleitendeLehrkraft" :src="require('../assets/'+sortImg)">begleitende Lehrkraft</th>
-        <th v-on:click="sortTable('betreuendeStudenten')"><img id="imgsortbetreuendeStudenten" :src="require('../assets/'+sortImg)">betreuende Studenten</th>
-        <th v-on:click="sortTable('anzahlderAnwesenden')"><img id="imgsortanzahlderAnwesenden" :src="require('../assets/'+sortImg)">Anzahl der Anwesenden</th>
-        <th v-on:click="sortTable('kursleiter')"><img id="imgsortkursleiter" :src="require('../assets/'+sortImg)">Kursleiter</th>
-        <th v-on:click="sortTable('notiz')"><img id="imgsortnotiz" :src="require('../assets/'+sortImg)">Notiz</th>
-      </tr>
-      <tr v-for="row in rows" :key="row.angebotsnummer">
-        <td scope="row">
-          <div class="form-check">
-            <input type="checkbox" class="form-check-input" id="checkbox_tablerow">
-            <label class="form-check-label" for="checkbox_tablerow"></label>
-          </div>
-        </td>
-        <td>{{row.angebotsnummer}}</td>
-        <td style="padding-right:200px;">{{row.angebot}}</td>
-        <td style="padding-right:200px;">{{row.kursname}}</td>
-        <td>{{row.veranstaltungsart}}</td>
-        <td>{{row.kursdatum}}</td>
-        <td style="padding-right:200px;">{{row.kursort}}</td>
-        <td>{{row.begleitendeLehrkraft}}</td>
-        <td>{{row.betreuendeStudenten}}</td>
-        <td>{{row.anzahlderAnwesenden}}</td>
-        <td>{{row.kursleiter}}</td>
-        <td style="padding-right:300px;">{{row.notiz}}</td>
-      </tr>
-    </table>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "DynamicTable",
-  data: function() {
-    return {
-      rows: [
-        {angebotsnummer: 232, angebot: "Biologie", kursname: 'Neurobiologie', veranstaltungsart: 'regulärer Kurs', kursdatum: '23.08.2020', kursort: 'T9 Hörsaal', begleitendeLehrkraft: 'Frau Muster', betreuendeStudenten: 'Max Miller', anzahlderAnwesenden: '34', kursleiter: 'Frau Test', notiz: ''},
-        {angebotsnummer: 23342, angebot: "ABiologie", kursname: 'bNeukkkrobiologie', veranstaltungsart: 'regulärer Kurs', kursdatum: '22.08.2020', kursort: 'T9 Hörsaal', begleitendeLehrkraft: 'Frau Muster', betreuendeStudenten: 'Max Miller', anzahlderAnwesenden: '34', kursleiter: 'Frau Test', notiz: ''},
-        {angebotsnummer: 22, angebot: "Ciologie", kursname: 'ANeurobkiologie', veranstaltungsart: 'regulärer Kurs', kursdatum: '21.08.2020', kursort: 'T9 Hörsaal', begleitendeLehrkraft: 'Frau Muster', betreuendeStudenten: 'Max Miller', anzahlderAnwesenden: '34', kursleiter: 'Frau Test', notiz: ''},
-        {angebotsnummer: 1342, angebot: "Diologie", kursname: 'cNeukkkrobiologie', veranstaltungsart: 'regulärer Kurs', kursdatum: '23.07.2020', kursort: 'T9 Hörsaal', begleitendeLehrkraft: 'Frau Muster', betreuendeStudenten: 'Max Miller', anzahlderAnwesenden: '34', kursleiter: 'Frau Test', notiz: ''},
-        {angebotsnummer: 132, angebot: "Bdologie", kursname: 'eNeurobiologie', veranstaltungsart: 'regulärer Kurs', kursdatum: '23.08.2021', kursort: 'T9 Hörsaal', begleitendeLehrkraft: 'Frau Muster', betreuendeStudenten: 'Max Miller', anzahlderAnwesenden: '34', kursleiter: 'Frau Test', notiz: ''},
-      ],
-
-      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("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 '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("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 '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("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 '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("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 '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("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 '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("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 '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("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("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("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("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("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("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("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("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("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');
-            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("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 '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("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 '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("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 '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("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 '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("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("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("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 '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("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("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("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("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("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("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("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("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("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');
-            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])
-    }
-  }
-}
-</script>
-
-<style scoped>
-.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/Home.vue b/src/components/Home.vue
index 7812868a0fbdfa76f0f8460be66e73763db7e11e..dcc551290597e9b696d44ddea4ab16525c6ac1ec 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -1,17 +1,13 @@
 <template>
   <div id="content" class="content col-md-12">
-    <DynamicTable></DynamicTable>
   </div>
 </template>
 
 <script>
 
-import DynamicTable from '../components/DynamicTable.vue'
-
 export default {
   name: "Home",
   components: {
-    DynamicTable
   },
 
   created() {
diff --git a/src/components/Teachers.vue b/src/components/Teachers.vue
index b5fbcabe7fd56a9486479cf60581c5606e2a3679..0169dc4c5952f7f69af5b36ccbe5f4c35190c2dd 100644
--- a/src/components/Teachers.vue
+++ b/src/components/Teachers.vue
@@ -1,15 +1,42 @@
 <template>
   <div class="content col-md-12">
-    <h1>{{data}}</h1>
-    <h1>{{message}}</h1>
-    <h1>{{service}}</h1>
+    <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>
+    <table id="Table">
+      <tr>
+        <th scope="row">
+          <div class="form-check">
+            <input type="checkbox" class="form-check-input" id="checkbox_headerline">
+            <label class="form-check-label" for="checkbox_headerline"></label>
+          </div>
+        </th>
+        <th v-on:click="sortTable('angebotsnummer')"><img id='imgsortangebotsnummer' :src="require('../assets/'+sortImg)">Angebotsnummer</th>
+     </tr>
+      <tr v-for="row in filteredRows" :key="row.angebotsnummer">
+        <td scope="row">
+          <div class="form-check">
+            <input type="checkbox" class="form-check-input" id="checkbox_tablerow">
+            <label class="form-check-label" for="checkbox_tablerow"></label>
+          </div>
+        </td>
+        <td>{{row.angebotsnummer}}</td>
+      </tr>
+    </table>
   </div>
 </template>
 
 <script>
-
-
-export default {
+/*export default {
   name: "Teachers",
   data(){
     return{
@@ -38,6 +65,493 @@ 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>
 
diff --git a/src/models/course.js b/src/models/course.js
new file mode 100644
index 0000000000000000000000000000000000000000..3f6febec013ed54b7c9b4895b1c7b92b59ff5c6d
--- /dev/null
+++ b/src/models/course.js
@@ -0,0 +1,19 @@
+export default class Course {
+
+    constructor(coursenumber, courseoffer, coursename, eventtype, coursedate, topic, courselocation, accompanyingteacher, supervisingstudents, presentstudents, registeredstudents, instructor, notefield) {
+        this.coursenumber = coursenumber;
+        this.courseoffer = courseoffer;
+        this.coursename = coursename;
+        this.eventtype = eventtype;
+        this.coursedate = coursedate;
+        this.topic = topic;
+        this.courselocation = courselocation;
+        this.accompanyingteacher = accompanyingteacher;
+        this.supervisingstudents = supervisingstudents;
+        this.presentstudents = presentstudents;
+        this.registeredstudents = registeredstudents;
+        this.instructor = instructor;
+        this.notefield = notefield;
+    }
+
+}
\ No newline at end of file
diff --git a/src/router.js b/src/router.js
index 9c4395ce8c8dbd4ab6407110534cd62618b79062..cb7100bb97475a809374c1167d72502c2625b30f 100644
--- a/src/router.js
+++ b/src/router.js
@@ -9,6 +9,8 @@ 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";
 
 Vue.use(Router)
 
@@ -16,6 +18,17 @@ const router = new Router({
     mode: 'history',
     base:  process.env.BASE_URL,
     routes: [
+        // Button from Courses
+        {
+            path: '/createcourse',
+            name: 'neuen Eintrag hinzufügen',
+            component: CreateCourse
+        },
+        {
+            path: '/editcourse',
+            name: 'Eintrag bearbeiten',
+            component: EditCourse
+        },
 
         // LOGIN / REGISTER
         {
diff --git a/src/services/course.service.js b/src/services/course.service.js
new file mode 100644
index 0000000000000000000000000000000000000000..22683eef9eac80a57a5cf1200e6baf7c3b2cec85
--- /dev/null
+++ b/src/services/course.service.js
@@ -0,0 +1,34 @@
+import axios from 'axios';
+import authHeader from "@/services/auth-header";
+
+const API_URL = 'http://localhost:9192/';
+
+class CourseService {
+
+    insert(course) {
+        return axios
+            .post(API_URL + 'insertCourse', {
+                    angebotsnummer: course.coursenumber,
+                    angebot: course.courseoffer,
+                    kursname: course.coursename,
+                    veranstaltungsart: course.eventtype,
+                    kursdatum: course.coursedate,
+                    thema: course.topic,
+                    kursort: course.courselocation,
+                    begleitendeLehrkraft: course.accompanyingteacher,
+                    betreuendeStudenten: course.supervisingstudents,
+                    anzahlderAnwesenden:course.presentstudents,
+                    anzahlderAngemeldeten:course.registeredstudents,
+                    kursleiter: course.instructor,
+                    notiz: course.notefield
+                }
+
+                ,{headers: authHeader() })
+            .then(response => {
+                return response.data;
+            });
+    }
+}
+
+
+export default new CourseService();
\ No newline at end of file
diff --git a/src/store/course.module.js b/src/store/course.module.js
new file mode 100644
index 0000000000000000000000000000000000000000..e16c693a46b6b662ac84aae362631bb2261bec45
--- /dev/null
+++ b/src/store/course.module.js
@@ -0,0 +1,33 @@
+import CourseService from '../services/course.service';
+
+const initialState = null;
+
+export const course = {
+
+    namespaced: true,
+    state: initialState,
+    actions: {
+
+        insert({ commit }, course) {
+            return CourseService.insert(course).then(
+                response => {
+                    commit('insertSuccess', response);
+                    return Promise.resolve(response);
+                },
+                error => {
+                    commit('insertFailure');
+                    return Promise.reject(error);
+                }
+            );
+        }
+    },
+
+    mutations: {
+        insertSuccess(state, response) {
+            state.response = response;
+        },
+        insertFailure(state, response) {
+            state.response = response;
+        }
+    }
+};
\ No newline at end of file
diff --git a/src/store/index.js b/src/store/index.js
index 1ee6edf3338487f53338a847e9ea9471cb71d867..292d729402de95dc73df683bb10ca0be64034516 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -3,12 +3,14 @@ import Vuex from 'vuex';
 
 import { auth } from './auth.module';
 import { user } from './user.module';
+import { course } from './course.module';
 
 Vue.use(Vuex);
 
 export default new Vuex.Store({
     modules: {
         auth,
-        user
+        user,
+        course
     }
 });
\ No newline at end of file