From 0cb850d2de12fc3343ad488f3b7ecfafd29040d2 Mon Sep 17 00:00:00 2001
From: emreaydogdu <busra0112>
Date: Mon, 12 Oct 2020 02:52:41 +0200
Subject: [PATCH] update

---
 package-lock.json          | 1039 +++++++++++++++++++++++++++++++++---
 package.json               |    5 +
 src/components/Courses.vue |  392 +++++---------
 src/components/Layouts.vue |  243 ++++++---
 src/main.js                |    7 +
 5 files changed, 1283 insertions(+), 403 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 537cad3..f2821e8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2181,6 +2181,12 @@
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
       "dev": true
     },
+    "abbrev": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
+      "dev": true
+    },
     "accepts": {
       "version": "1.3.7",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
@@ -2264,6 +2270,12 @@
       "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
       "dev": true
     },
+    "amdefine": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
+      "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
+      "dev": true
+    },
     "ansi-colors": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
@@ -2336,6 +2348,16 @@
       "integrity": "sha512-NTBIIbAfkJeIletyABbVtdPgeKfDafR+1mZV/AyyfC1UkVkp9iUjV+wwmqtUgphHYajbI86jejBJp5e+jkGTiQ==",
       "dev": true
     },
+    "are-we-there-yet": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
+      "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
+      "dev": true,
+      "requires": {
+        "delegates": "^1.0.0",
+        "readable-stream": "^2.0.6"
+      }
+    },
     "argparse": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
@@ -2363,6 +2385,12 @@
       "integrity": "sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=",
       "dev": true
     },
+    "array-find-index": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
+      "integrity": "sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E=",
+      "dev": true
+    },
     "array-flatten": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
@@ -2479,6 +2507,12 @@
       "integrity": "sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==",
       "dev": true
     },
+    "async-foreach": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz",
+      "integrity": "sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI=",
+      "dev": true
+    },
     "async-limiter": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
@@ -2719,6 +2753,15 @@
         "file-uri-to-path": "1.0.0"
       }
     },
+    "block-stream": {
+      "version": "0.0.9",
+      "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
+      "integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=",
+      "dev": true,
+      "requires": {
+        "inherits": "~2.0.0"
+      }
+    },
     "bluebird": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
@@ -3192,6 +3235,24 @@
       "integrity": "sha512-8KMDF1Vz2gzOq54ONPJS65IvTUaB1cHJ2DMM7MbPmLZljDH1qpzzLsWdiN9pHh6qvkRVDTi/07+eNGch/oLU4w==",
       "dev": true
     },
+    "camelcase-keys": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
+      "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
+      "dev": true,
+      "requires": {
+        "camelcase": "^2.0.0",
+        "map-obj": "^1.0.0"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz",
+          "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=",
+          "dev": true
+        }
+      }
+    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -3524,6 +3585,12 @@
         "q": "^1.1.2"
       }
     },
+    "code-point-at": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
+      "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
+      "dev": true
+    },
     "codepage": {
       "version": "1.14.0",
       "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.14.0.tgz",
@@ -3698,6 +3765,12 @@
       "integrity": "sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==",
       "dev": true
     },
+    "console-control-strings": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+      "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
+      "dev": true
+    },
     "consolidate": {
       "version": "0.15.1",
       "resolved": "https://registry.npmjs.org/consolidate/-/consolidate-0.15.1.tgz",
@@ -4203,6 +4276,15 @@
         }
       }
     },
+    "currently-unhandled": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
+      "integrity": "sha1-mI3zP+qxke95mmE2nddsF635V+o=",
+      "dev": true,
+      "requires": {
+        "array-find-index": "^1.0.1"
+      }
+    },
     "cyclist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@@ -4218,6 +4300,11 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "date-fns": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.16.1.tgz",
+      "integrity": "sha512-sAJVKx/FqrLYHAQeN7VpJrPhagZc9R4ImZIWYRFZaaohR3KzmuK88touwsSwSVT8Qcbd4zoDsnGfX4GFB4imyQ=="
+    },
     "dayjs": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.9.1.tgz",
@@ -4499,6 +4586,12 @@
       "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
       "dev": true
     },
+    "delegates": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+      "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
+      "dev": true
+    },
     "depd": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
@@ -4527,6 +4620,11 @@
       "integrity": "sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==",
       "dev": true
     },
+    "diacriticless": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/diacriticless/-/diacriticless-1.0.1.tgz",
+      "integrity": "sha1-592peMKRlgm7SK7h78XeajN71MM="
+    },
     "diffie-hellman": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
@@ -5745,6 +5843,18 @@
       "dev": true,
       "optional": true
     },
+    "fstream": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz",
+      "integrity": "sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "inherits": "~2.0.0",
+        "mkdirp": ">=0.5 0",
+        "rimraf": "2"
+      }
+    },
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -5757,6 +5867,68 @@
       "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
       "dev": true
     },
+    "gauge": {
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
+      "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
+      "dev": true,
+      "requires": {
+        "aproba": "^1.0.3",
+        "console-control-strings": "^1.0.0",
+        "has-unicode": "^2.0.0",
+        "object-assign": "^4.1.0",
+        "signal-exit": "^3.0.0",
+        "string-width": "^1.0.1",
+        "strip-ansi": "^3.0.1",
+        "wide-align": "^1.1.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+          "dev": true,
+          "requires": {
+            "number-is-nan": "^1.0.0"
+          }
+        },
+        "string-width": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+          "dev": true,
+          "requires": {
+            "code-point-at": "^1.0.0",
+            "is-fullwidth-code-point": "^1.0.0",
+            "strip-ansi": "^3.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^2.0.0"
+          }
+        }
+      }
+    },
+    "gaze": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.3.tgz",
+      "integrity": "sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g==",
+      "dev": true,
+      "requires": {
+        "globule": "^1.0.0"
+      }
+    },
     "gensync": {
       "version": "1.0.0-beta.1",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.1.tgz",
@@ -5769,6 +5941,12 @@
       "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
       "dev": true
     },
+    "get-stdin": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
+      "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=",
+      "dev": true
+    },
     "get-stream": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
@@ -5844,6 +6022,17 @@
         "slash": "^2.0.0"
       }
     },
+    "globule": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/globule/-/globule-1.3.2.tgz",
+      "integrity": "sha512-7IDTQTIu2xzXkT+6mlluidnWo+BypnbSoEVVQCGfzqnl5Ik8d3e1d4wycb8Rj9tWW+Z39uPWsdlquqiqPCd/pA==",
+      "dev": true,
+      "requires": {
+        "glob": "~7.1.1",
+        "lodash": "~4.17.10",
+        "minimatch": "~3.0.2"
+      }
+    },
     "graceful-fs": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
@@ -5851,9 +6040,9 @@
       "dev": true
     },
     "gridjs": {
-      "version": "1.17.0",
-      "resolved": "https://registry.npmjs.org/gridjs/-/gridjs-1.17.0.tgz",
-      "integrity": "sha512-Y/Za65jbPUXlFi68Db0nBDK23lEzIeM0w7NHZHA0hjfF4yqkrKSTGvjE8e4rBcIoLK7Rf1XFnpKDOY19TBvS/g==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/gridjs/-/gridjs-2.1.0.tgz",
+      "integrity": "sha512-Mrk06XzoBnTDrUg4Q4nXMoGRdNJ2zzPK6fDnnXjevsYejfIXSiGM40GAs9vVi9ZrgfjJEuUwL4ke4rhT3qJ8wA==",
       "requires": {
         "preact": "^10.4.8",
         "tslib": "^2.0.1"
@@ -5875,6 +6064,22 @@
         "gridjs": "^1.11.0",
         "nanoid": "^3.1.10",
         "vue-runtime-helpers": "1.1.2"
+      },
+      "dependencies": {
+        "gridjs": {
+          "version": "1.17.0",
+          "resolved": "https://registry.npmjs.org/gridjs/-/gridjs-1.17.0.tgz",
+          "integrity": "sha512-Y/Za65jbPUXlFi68Db0nBDK23lEzIeM0w7NHZHA0hjfF4yqkrKSTGvjE8e4rBcIoLK7Rf1XFnpKDOY19TBvS/g==",
+          "requires": {
+            "preact": "^10.4.8",
+            "tslib": "^2.0.1"
+          }
+        },
+        "tslib": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
+          "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
+        }
       }
     },
     "gzip-size": {
@@ -5946,6 +6151,12 @@
       "integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==",
       "dev": true
     },
+    "has-unicode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+      "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
+      "dev": true
+    },
     "has-value": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz",
@@ -6372,6 +6583,12 @@
       "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
       "dev": true
     },
+    "in-publish": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.1.tgz",
+      "integrity": "sha512-oDM0kUSNFC31ShNxHKUyfZKy8ZeXZBWMjMdZHKLOk13uvT27VTL/QzRGfRUcevJhpkZAvlhPYuXkF7eNWrtyxQ==",
+      "dev": true
+    },
     "indent-string": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
@@ -6714,6 +6931,12 @@
       "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
       "dev": true
     },
+    "is-finite": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.1.0.tgz",
+      "integrity": "sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w==",
+      "dev": true
+    },
     "is-fullwidth-code-point": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
@@ -6845,6 +7068,12 @@
       "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
       "dev": true
     },
+    "is-utf8": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
+      "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=",
+      "dev": true
+    },
     "is-windows": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
@@ -6919,6 +7148,12 @@
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
       "integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg=="
     },
+    "js-base64": {
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
+      "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==",
+      "dev": true
+    },
     "js-file-download": {
       "version": "0.4.12",
       "resolved": "https://registry.npmjs.org/js-file-download/-/js-file-download-0.4.12.tgz",
@@ -7060,6 +7295,12 @@
       "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
       "dev": true
     },
+    "klona": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.4.tgz",
+      "integrity": "sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==",
+      "dev": true
+    },
     "launch-editor": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.2.1.tgz",
@@ -7110,6 +7351,36 @@
       "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
       "dev": true
     },
+    "load-json-file": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
+      "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "parse-json": "^2.2.0",
+        "pify": "^2.0.0",
+        "pinkie-promise": "^2.0.0",
+        "strip-bom": "^2.0.0"
+      },
+      "dependencies": {
+        "parse-json": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
+          "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
+          "dev": true,
+          "requires": {
+            "error-ex": "^1.2.0"
+          }
+        },
+        "pify": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
+          "dev": true
+        }
+      }
+    },
     "loader-fs-cache": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/loader-fs-cache/-/loader-fs-cache-1.0.3.tgz",
@@ -7205,12 +7476,37 @@
       "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
       "dev": true
     },
+    "lodash.assign": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
+      "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc="
+    },
+    "lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8="
+    },
     "lodash.defaultsdeep": {
       "version": "4.6.1",
       "resolved": "https://registry.npmjs.org/lodash.defaultsdeep/-/lodash.defaultsdeep-4.6.1.tgz",
       "integrity": "sha512-3j8wdDzYuWO3lM3Reg03MuQR957t287Rpcxp1njpEa8oDrikb+FwGdW3n+FELh/A6qib6yPit0j/pv9G/yeAqA==",
       "dev": true
     },
+    "lodash.filter": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.filter/-/lodash.filter-4.6.0.tgz",
+      "integrity": "sha1-ZosdSYFgOuHMWm+nYBQ+SAtMSs4="
+    },
+    "lodash.foreach": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.foreach/-/lodash.foreach-4.5.0.tgz",
+      "integrity": "sha1-Gmo16s5AEoDH8G3d7DUWWrJ+PlM="
+    },
+    "lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
+    },
     "lodash.kebabcase": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz",
@@ -7275,6 +7571,16 @@
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
     },
+    "loud-rejection": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz",
+      "integrity": "sha1-W0b4AUft7leIcPCG0Eghz5mOVR8=",
+      "dev": true,
+      "requires": {
+        "currently-unhandled": "^0.4.1",
+        "signal-exit": "^3.0.0"
+      }
+    },
     "lower-case": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz",
@@ -7311,6 +7617,12 @@
       "integrity": "sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=",
       "dev": true
     },
+    "map-obj": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
+      "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
+      "dev": true
+    },
     "map-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz",
@@ -7353,6 +7665,24 @@
         "readable-stream": "^2.0.1"
       }
     },
+    "meow": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
+      "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
+      "dev": true,
+      "requires": {
+        "camelcase-keys": "^2.0.0",
+        "decamelize": "^1.1.2",
+        "loud-rejection": "^1.0.0",
+        "map-obj": "^1.0.1",
+        "minimist": "^1.1.3",
+        "normalize-package-data": "^2.3.4",
+        "object-assign": "^4.0.1",
+        "read-pkg-up": "^1.0.1",
+        "redent": "^1.0.0",
+        "trim-newlines": "^1.0.0"
+      }
+    },
     "merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -7673,8 +8003,7 @@
       "version": "2.14.1",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.1.tgz",
       "integrity": "sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "nanoid": {
       "version": "3.1.12",
@@ -7744,6 +8073,34 @@
       "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==",
       "dev": true
     },
+    "node-gyp": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.8.0.tgz",
+      "integrity": "sha512-3g8lYefrRRzvGeSowdJKAKyks8oUpLEd/DyPV4eMhVlhJ0aNaZqIrNUIPuEWWTAoPqyFkfGrM67MC69baqn6vA==",
+      "dev": true,
+      "requires": {
+        "fstream": "^1.0.0",
+        "glob": "^7.0.3",
+        "graceful-fs": "^4.1.2",
+        "mkdirp": "^0.5.0",
+        "nopt": "2 || 3",
+        "npmlog": "0 || 1 || 2 || 3 || 4",
+        "osenv": "0",
+        "request": "^2.87.0",
+        "rimraf": "2",
+        "semver": "~5.3.0",
+        "tar": "^2.0.0",
+        "which": "1"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
+          "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
+          "dev": true
+        }
+      }
+    },
     "node-ipc": {
       "version": "9.1.1",
       "resolved": "https://registry.npmjs.org/node-ipc/-/node-ipc-9.1.1.tgz",
@@ -7800,77 +8157,197 @@
       "integrity": "sha512-DD5vebQLg8jLCOzwupn954fbIiZht05DAZs0k2u8NStSe6h9XdsuIQL8hSRKYiU8WUQRznmSDrKGbv3ObOmC7g==",
       "dev": true
     },
-    "normalize-package-data": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
-      "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
-      "dev": true,
-      "requires": {
-        "hosted-git-info": "^2.1.4",
-        "resolve": "^1.10.0",
-        "semver": "2 || 3 || 4 || 5",
-        "validate-npm-package-license": "^3.0.1"
-      }
-    },
-    "normalize-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true
-    },
-    "normalize-range": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
-      "dev": true
-    },
-    "normalize-url": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz",
-      "integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==",
-      "dev": true
-    },
-    "normalize-wheel": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
-      "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
-    },
-    "npm-run-path": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
-      "integrity": "sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=",
-      "dev": true,
-      "requires": {
-        "path-key": "^2.0.0"
-      }
-    },
-    "nth-check": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
-      "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
+    "node-sass": {
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.14.1.tgz",
+      "integrity": "sha512-sjCuOlvGyCJS40R8BscF5vhVlQjNN069NtQ1gSxyK1u9iqvn6tf7O1R4GNowVZfiZUCRt5MmMs1xd+4V/7Yr0g==",
       "dev": true,
       "requires": {
-        "boolbase": "~1.0.0"
-      }
-    },
-    "num2fraction": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
-      "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
-      "dev": true
-    },
-    "oauth-sign": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
-      "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
-      "dev": true
-    },
-    "object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true
-    },
+        "async-foreach": "^0.1.3",
+        "chalk": "^1.1.1",
+        "cross-spawn": "^3.0.0",
+        "gaze": "^1.0.0",
+        "get-stdin": "^4.0.1",
+        "glob": "^7.0.3",
+        "in-publish": "^2.0.0",
+        "lodash": "^4.17.15",
+        "meow": "^3.7.0",
+        "mkdirp": "^0.5.1",
+        "nan": "^2.13.2",
+        "node-gyp": "^3.8.0",
+        "npmlog": "^4.0.0",
+        "request": "^2.88.0",
+        "sass-graph": "2.2.5",
+        "stdout-stream": "^1.4.0",
+        "true-case-path": "^1.0.2"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+          "dev": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          }
+        },
+        "cross-spawn": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz",
+          "integrity": "sha1-ElYDfsufDF9549bvE14wdwGEuYI=",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^4.0.1",
+            "which": "^1.2.9"
+          }
+        },
+        "lru-cache": {
+          "version": "4.1.5",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
+          "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
+          "dev": true,
+          "requires": {
+            "pseudomap": "^1.0.2",
+            "yallist": "^2.1.2"
+          }
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^2.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+          "dev": true
+        },
+        "yallist": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+          "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
+          "dev": true
+        }
+      }
+    },
+    "nopt": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
+      "integrity": "sha1-xkZdvwirzU2zWTF/eaxopkayj/k=",
+      "dev": true,
+      "requires": {
+        "abbrev": "1"
+      }
+    },
+    "normalize-package-data": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
+      "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
+      "dev": true,
+      "requires": {
+        "hosted-git-info": "^2.1.4",
+        "resolve": "^1.10.0",
+        "semver": "2 || 3 || 4 || 5",
+        "validate-npm-package-license": "^3.0.1"
+      }
+    },
+    "normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true
+    },
+    "normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
+      "dev": true
+    },
+    "normalize-url": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz",
+      "integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==",
+      "dev": true
+    },
+    "normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
+    },
+    "npm-run-path": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
+      "integrity": "sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=",
+      "dev": true,
+      "requires": {
+        "path-key": "^2.0.0"
+      }
+    },
+    "npmlog": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
+      "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
+      "dev": true,
+      "requires": {
+        "are-we-there-yet": "~1.1.2",
+        "console-control-strings": "~1.1.0",
+        "gauge": "~2.7.3",
+        "set-blocking": "~2.0.0"
+      }
+    },
+    "nth-check": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
+      "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
+      "dev": true,
+      "requires": {
+        "boolbase": "~1.0.0"
+      }
+    },
+    "num2fraction": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
+      "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
+      "dev": true
+    },
+    "number-is-nan": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
+      "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
+      "dev": true
+    },
+    "oauth-sign": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
+      "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
+      "dev": true
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "dev": true
+    },
     "object-copy": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz",
@@ -8162,12 +8639,28 @@
       "integrity": "sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=",
       "dev": true
     },
+    "os-homedir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+      "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
+      "dev": true
+    },
     "os-tmpdir": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
       "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
       "dev": true
     },
+    "osenv": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
+      "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
+      "dev": true,
+      "requires": {
+        "os-homedir": "^1.0.0",
+        "os-tmpdir": "^1.0.0"
+      }
+    },
     "p-defer": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-3.0.0.tgz",
@@ -9314,6 +9807,65 @@
         "type-fest": "^0.6.0"
       }
     },
+    "read-pkg-up": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
+      "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
+      "dev": true,
+      "requires": {
+        "find-up": "^1.0.0",
+        "read-pkg": "^1.0.0"
+      },
+      "dependencies": {
+        "find-up": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
+          "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
+          "dev": true,
+          "requires": {
+            "path-exists": "^2.0.0",
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "path-exists": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
+          "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
+          "dev": true,
+          "requires": {
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "path-type": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
+          "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "pify": "^2.0.0",
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "pify": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
+          "dev": true
+        },
+        "read-pkg": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
+          "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
+          "dev": true,
+          "requires": {
+            "load-json-file": "^1.0.0",
+            "normalize-package-data": "^2.3.2",
+            "path-type": "^1.0.0"
+          }
+        }
+      }
+    },
     "readable-stream": {
       "version": "2.3.7",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
@@ -9339,6 +9891,36 @@
         "picomatch": "^2.2.1"
       }
     },
+    "redent": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
+      "integrity": "sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=",
+      "dev": true,
+      "requires": {
+        "indent-string": "^2.1.0",
+        "strip-indent": "^1.0.1"
+      },
+      "dependencies": {
+        "indent-string": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
+          "integrity": "sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=",
+          "dev": true,
+          "requires": {
+            "repeating": "^2.0.0"
+          }
+        },
+        "strip-indent": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-1.0.1.tgz",
+          "integrity": "sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI=",
+          "dev": true,
+          "requires": {
+            "get-stdin": "^4.0.1"
+          }
+        }
+      }
+    },
     "regenerate": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.1.tgz",
@@ -9535,6 +10117,15 @@
       "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=",
       "dev": true
     },
+    "repeating": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/repeating/-/repeating-2.0.1.tgz",
+      "integrity": "sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo=",
+      "dev": true,
+      "requires": {
+        "is-finite": "^1.0.0"
+      }
+    },
     "request": {
       "version": "2.88.2",
       "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
@@ -9722,6 +10313,151 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "sass-graph": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.5.tgz",
+      "integrity": "sha512-VFWDAHOe6mRuT4mZRd4eKE+d8Uedrk6Xnh7Sh9b4NGufQLQjOrvf/MQoOdx+0s92L89FeyUUNfU597j/3uNpag==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.0.0",
+        "lodash": "^4.0.0",
+        "scss-tokenizer": "^0.2.3",
+        "yargs": "^13.3.2"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "5.3.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+          "dev": true
+        },
+        "cliui": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
+          "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
+          "dev": true,
+          "requires": {
+            "string-width": "^3.1.0",
+            "strip-ansi": "^5.2.0",
+            "wrap-ansi": "^5.1.0"
+          }
+        },
+        "emoji-regex": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+          "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+          "dev": true
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        },
+        "wrap-ansi": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
+          "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.0",
+            "string-width": "^3.0.0",
+            "strip-ansi": "^5.0.0"
+          }
+        },
+        "yargs": {
+          "version": "13.3.2",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
+          "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
+          "dev": true,
+          "requires": {
+            "cliui": "^5.0.0",
+            "find-up": "^3.0.0",
+            "get-caller-file": "^2.0.1",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^2.0.0",
+            "set-blocking": "^2.0.0",
+            "string-width": "^3.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^4.0.0",
+            "yargs-parser": "^13.1.2"
+          }
+        },
+        "yargs-parser": {
+          "version": "13.1.2",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
+          "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
+          "dev": true,
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
+        }
+      }
+    },
+    "sass-loader": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.0.3.tgz",
+      "integrity": "sha512-W4+FV5oUdYy0PnC11ZoPrcAexODgDCa3ngxoy5X5qBhZYoPz9FPjb6Oox8Aa0ZYEyx34k8AQfOVuvqefOSAAUQ==",
+      "dev": true,
+      "requires": {
+        "klona": "^2.0.4",
+        "loader-utils": "^2.0.0",
+        "neo-async": "^2.6.2",
+        "schema-utils": "^3.0.0",
+        "semver": "^7.3.2"
+      },
+      "dependencies": {
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "schema-utils": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
+          "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.6",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        },
+        "semver": {
+          "version": "7.3.2",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
+          "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==",
+          "dev": true
+        }
+      }
+    },
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
@@ -9748,6 +10484,27 @@
         "raw-loader": "~0.5.1"
       }
     },
+    "scss-tokenizer": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
+      "integrity": "sha1-jrBtualyMzOCTT9VMGQRSYR85dE=",
+      "dev": true,
+      "requires": {
+        "js-base64": "^2.1.8",
+        "source-map": "^0.4.2"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.4.4",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
+          "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
+          "dev": true,
+          "requires": {
+            "amdefine": ">=0.0.4"
+          }
+        }
+      }
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -10408,6 +11165,15 @@
       "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=",
       "dev": true
     },
+    "stdout-stream": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.1.tgz",
+      "integrity": "sha512-j4emi03KXqJWcIeF8eIXkjMFN1Cmb8gUlDYGeBALLPo5qdyTfA9bOtl8m33lRoC+vFMkP3gl0WsDr6+gzxbbTA==",
+      "dev": true,
+      "requires": {
+        "readable-stream": "^2.0.1"
+      }
+    },
     "stream-browserify": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz",
@@ -10552,6 +11318,15 @@
         }
       }
     },
+    "strip-bom": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
+      "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
+      "dev": true,
+      "requires": {
+        "is-utf8": "^0.2.0"
+      }
+    },
     "strip-eof": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
@@ -10576,6 +11351,40 @@
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
       "dev": true
     },
+    "style-loader": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-2.0.0.tgz",
+      "integrity": "sha512-Z0gYUJmzZ6ZdRUqpg1r8GsaFKypE+3xAzuFeMuoHgjc9KZv3wMyCRjQIWEbhoFSq7+7yoHXySDJyyWQaPajeiQ==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "dependencies": {
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "schema-utils": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
+          "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.6",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
+      }
+    },
     "stylehacks": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
@@ -10687,6 +11496,17 @@
       "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==",
       "dev": true
     },
+    "tar": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.2.tgz",
+      "integrity": "sha512-FCEhQ/4rE1zYv9rYXJw/msRqsnmlje5jHP6huWeBZ704jUTy02c5AZyWujpMR1ax6mVw9NyJMfuK2CMDWVIfgA==",
+      "dev": true,
+      "requires": {
+        "block-stream": "*",
+        "fstream": "^1.0.12",
+        "inherits": "2"
+      }
+    },
     "terser": {
       "version": "4.8.0",
       "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.0.tgz",
@@ -10904,6 +11724,21 @@
         "punycode": "^2.1.1"
       }
     },
+    "trim-newlines": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
+      "integrity": "sha1-WIeWa7WCpFA6QetST301ARgVphM=",
+      "dev": true
+    },
+    "true-case-path": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/true-case-path/-/true-case-path-1.0.3.tgz",
+      "integrity": "sha512-m6s2OdQe5wgpFMC+pAJ+q9djG82O2jcHPOI6RNg1yy9rCYR+WD6Nbpl32fDpfC56nirdRy+opFa/Vk7HYhqaew==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.1.2"
+      }
+    },
     "tryer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
@@ -11409,6 +12244,20 @@
       "resolved": "https://registry.npmjs.org/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz",
       "integrity": "sha512-leT4kdJVQyeZNY1kmnS1xiUlQ9z1B/kdBFCILIjYYQDqZgLqCLa0UhjSSeRX6c3mUe6U5qYeM8LrEqkHJ1B4LA=="
     },
+    "vue-good-table": {
+      "version": "2.21.0",
+      "resolved": "https://registry.npmjs.org/vue-good-table/-/vue-good-table-2.21.0.tgz",
+      "integrity": "sha512-e384AGlmEBG0CfTkZXN/OZe1O58V2mbxQafsKqzVrqvROcMZsa9iSyK11D4YS2JzlJo9mRqsad4/vrV/U/Xbdw==",
+      "requires": {
+        "date-fns": "^2.0.0-beta.4",
+        "diacriticless": "1.0.1",
+        "lodash.assign": "^4.2.0",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.filter": "^4.6.0",
+        "lodash.foreach": "^4.5.0",
+        "lodash.isequal": "^4.5.0"
+      }
+    },
     "vue-highlightjs": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/vue-highlightjs/-/vue-highlightjs-1.3.3.tgz",
@@ -12243,6 +13092,48 @@
       "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
       "dev": true
     },
+    "wide-align": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
+      "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
+      "dev": true,
+      "requires": {
+        "string-width": "^1.0.2 || 2"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+          "dev": true
+        },
+        "string-width": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
+          "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
+          "dev": true,
+          "requires": {
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^4.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          }
+        }
+      }
+    },
     "wmf": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
diff --git a/package.json b/package.json
index c413fab..2e5df6f 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "core-js": "^3.6.5",
     "dayjs": "^1.9.1",
     "file-saver": "^2.0.2",
+    "gridjs": "^2.1.0",
     "gridjs-vue": "^0.5.2",
     "jquery": "^3.5.1",
     "js-file-download": "^0.4.12",
@@ -28,6 +29,7 @@
     "vue": "^2.6.11",
     "vue-axios-cors": "^1.0.1",
     "vue-crontab": "0.0.4",
+    "vue-good-table": "^2.21.0",
     "vue-json-excel": "^0.3.0",
     "vue-router": "^3.4.3",
     "vue-scrollbar-simple": "0.0.6",
@@ -42,8 +44,11 @@
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
+    "node-sass": "^4.14.1",
     "portal-vue": "^2.1.7",
+    "sass-loader": "^10.0.3",
     "script-loader": "^0.7.2",
+    "style-loader": "^2.0.0",
     "vue-password": "^3.0.0",
     "vue-template-compiler": "^2.6.11"
   },
diff --git a/src/components/Courses.vue b/src/components/Courses.vue
index 299839e..48b3452 100644
--- a/src/components/Courses.vue
+++ b/src/components/Courses.vue
@@ -1,46 +1,49 @@
 <template>
   <div class="card">
-    <div class="content col-md-12" style="display: block">
-      <div id="search_box" class="search_box col-md-4">
-        <div class="entry_box-inner">
-          <a id="editbutton" class="button" href="./editcourse" style="visibility: hidden">Eintrag bearbeiten</a>
-          <a id="addbutton" class="button" href="./createcourse">neuen Eintrag hinzufügen</a>
-          <a id="deletebutton" class="button" @click="deleterows">ausgewählte Einträge löschen</a>
-          <a id="exportbutton" class="button" @click="exportExcel">Tabelle exportieren</a>
-        </div>
-        <div 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">
+    <div class="e-resizable">
+          <div class="entry_box-inner">
+            <a id="editbutton" class="button" href="./editcourse" style="visibility: hidden">Eintrag bearbeiten</a>
+            <a id="addbutton" class="button" href="./createcourse">neuen Eintrag hinzufügen</a>
+            <a id="deletebutton" class="button" @click="deleterows">ausgewählte Einträge löschen</a>
+            <a id="exportbutton" class="button" @click="exportExcel">Tabelle exportieren</a>
+          </div>
+          <div>
+            <vue-good-table
+                :columns="columns"
+                :rows="rows"
+                max-height="790px"
+                @on-selected-rows-change="selectionChanged"
+                :select-options="{ enabled: true }"
+                :search-options="{ enabled: true }"/>
+          </div>
+      <!--table style="height: 100%; width: 100%">
         <thead>
-          <tr>
-            <th scope="row">
-              <div class="form-check">
-                <input name="checkbox" type="checkbox" class="form-check-input" id="checkbox_headerline" @click="checkAllBoxes">
-                <label class="form-check-label" for="checkbox_headerline"></label>
-              </div>
-            </th>
-            <th v-on:click="sortTable('imgsortcoursenumber')"><img id='imgsortcoursenumber' :src="require('../assets/'+sortImg)">Angebotsnummer</th>
-            <th v-on:click="sortTable('imgsortcourseoffer')"><img id="imgsortcourseoffer" :src="require('../assets/'+sortImg)">Angebot</th>
-            <th v-on:click="sortTable('imgsortcoursename')"><img id="imgsortcoursename" :src="require('../assets/'+sortImg)">Kursname</th>
-            <th v-on:click="sortTable('imgsorteventtype')"><img id="imgsorteventtype" :src="require('../assets/'+sortImg)">Veranstaltungsart</th>
-            <th v-on:click="sortTable('imgsortcoursedate')"><img id="imgsortcoursedate" :src="require('../assets/'+sortImg)">Kursdatum</th>
-            <th v-on:click="sortTable('imgsorttopic')"><img id="imgsorttopic" :src="require('../assets/'+sortImg)">Thema</th>
-            <th v-on:click="sortTable('imgsortcourselocation')"><img id="imgsortcourselocation" :src="require('../assets/'+sortImg)">Kursort</th>
-            <th v-on:click="sortTable('imgsortaccompanyingteacher')"><img id="imgsortaccompanyingteacher" :src="require('../assets/'+sortImg)">begleitende Lehrkraft</th>
-            <th v-on:click="sortTable('imgsortsupervisingstudents')"><img id="imgsortsupervisingstudents" :src="require('../assets/'+sortImg)">betreuende Studenten</th>
-            <th v-on:click="sortTable('imgsortpresentstudents')"><img id="imgsortpresentstudents" :src="require('../assets/'+sortImg)">Anzahl der Anwesenden</th>
-            <th v-on:click="sortTable('imgsortregisteredstudents')"><img id="imgsortregisteredstudents" :src="require('../assets/'+sortImg)">Anzahl der Angemeldeten</th>
-            <th v-on:click="sortTable('imgsortanzahlung')"><img id="imgsortanzahlung" :src="require('../assets/'+sortImg)">Anzahlung</th>
-            <th v-on:click="sortTable('imgsorthonorar')"><img id="imgsorthonorar" :src="require('../assets/'+sortImg)">Honorar</th>
-            <th v-on:click="sortTable('imgsortinstructor')"><img id="imgsortinstructor" :src="require('../assets/'+sortImg)">Kursleiter</th>
-            <th v-on:click="sortTable('imgsortstatus')"><img id="imgsortstatus" :src="require('../assets/'+sortImg)">Aktiv</th>
-            <th v-on:click="sortTable('imgsortnotefield')"><img id="imgsortnotefield" :src="require('../assets/'+sortImg)">Notiz</th>
-          </tr>
+        <tr>
+          <th scope="row">
+            <div class="form-check">
+              <input name="checkbox" type="checkbox" class="form-check-input" id="checkbox_headerline" @click="checkAllBoxes">
+              <label class="form-check-label" for="checkbox_headerline"></label>
+            </div>
+          </th>
+          <th v-on:click="sortTable('imgsortcoursenumber')"><img id='imgsortcoursenumber' :src="require('../assets/'+sortImg)">Angebotsnummer</th>
+          <th v-on:click="sortTable('imgsortcourseoffer')"><img id="imgsortcourseoffer" :src="require('../assets/'+sortImg)">Angebot</th>
+          <th v-on:click="sortTable('imgsortcoursename')"><img id="imgsortcoursename" :src="require('../assets/'+sortImg)">Kursname</th>
+          <th v-on:click="sortTable('imgsorteventtype')"><img id="imgsorteventtype" :src="require('../assets/'+sortImg)">Veranstaltungsart</th>
+          <th v-on:click="sortTable('imgsortcoursedate')"><img id="imgsortcoursedate" :src="require('../assets/'+sortImg)">Kursdatum</th>
+          <th v-on:click="sortTable('imgsorttopic')"><img id="imgsorttopic" :src="require('../assets/'+sortImg)">Thema</th>
+          <th v-on:click="sortTable('imgsortcourselocation')"><img id="imgsortcourselocation" :src="require('../assets/'+sortImg)">Kursort</th>
+          <th v-on:click="sortTable('imgsortaccompanyingteacher')"><img id="imgsortaccompanyingteacher" :src="require('../assets/'+sortImg)">begleitende Lehrkraft</th>
+          <th v-on:click="sortTable('imgsortsupervisingstudents')"><img id="imgsortsupervisingstudents" :src="require('../assets/'+sortImg)">betreuende Studenten</th>
+          <th v-on:click="sortTable('imgsortpresentstudents')"><img id="imgsortpresentstudents" :src="require('../assets/'+sortImg)">Anzahl der Anwesenden</th>
+          <th v-on:click="sortTable('imgsortregisteredstudents')"><img id="imgsortregisteredstudents" :src="require('../assets/'+sortImg)">Anzahl der Angemeldeten</th>
+          <th v-on:click="sortTable('imgsortanzahlung')"><img id="imgsortanzahlung" :src="require('../assets/'+sortImg)">Anzahlung</th>
+          <th v-on:click="sortTable('imgsorthonorar')"><img id="imgsorthonorar" :src="require('../assets/'+sortImg)">Honorar</th>
+          <th v-on:click="sortTable('imgsortinstructor')"><img id="imgsortinstructor" :src="require('../assets/'+sortImg)">Kursleiter</th>
+          <th v-on:click="sortTable('imgsortstatus')"><img id="imgsortstatus" :src="require('../assets/'+sortImg)">Aktiv</th>
+          <th v-on:click="sortTable('imgsortnotefield')"><img id="imgsortnotefield" :src="require('../assets/'+sortImg)">Notiz</th>
+        </tr>
         </thead>
-        <tbody>
+        <body>
           <tr v-for="row in filteredRows" :key="row.id">
             <td scope="row">
               <div class="form-check">
@@ -65,25 +68,89 @@
             <td>{{row.status}}</td>
             <td style="padding-right:300px;">{{row.notefield}}</td>
           </tr>
-        </tbody>
-      </table>
+          </body>
+      </table-->
     </div>
   </div>
 </template>
 
 <script>
+import { VueGoodTable } from 'vue-good-table';
+
 export default {
   name: "Courses",
+  components: {VueGoodTable},
+
   data: function() {
     return {
       rows: [],
+      columns: [
+        {
+          label: 'Angebotsnummer',
+          field: 'coursenumber',
+        },
+        {
+          label: 'Angebot',
+          field: 'courseoffer',
+        },
+        {
+          label: 'Kursname',
+          field: 'coursename',
+        },
+        {
+          label: 'Veranstaltungsart',
+          field: 'eventtype',
+        },
+        {
+          label: 'Kursdatum',
+          field: 'coursedate',
+        },
+        {
+          label: 'Thema',
+          field: 'topic',
+        },
+        {
+          label: 'Kursort',
+          field: 'courselocation',
+        },
+        {
+          label: 'begleitende Lehrkraft',
+          field: 'accompanyingteacher',
+        },
+        {
+          label: 'betreuende Studenten',
+          field: 'supervisingstudents',
+        },
+        {
+          label: 'Anzahl der Anwesenden',
+          field: 'presentstudents',
+        },
+        {
+          label: 'Anzahl der Angemeldeten',
+          field: 'registeredstudents',
+        },
+        {
+          label: 'Anzahlung',
+          field: 'anzahlung',
+        },
+        {
+          label: 'Honorar',
+          field: 'honorar',
+        },
+        {
+          label: 'Kursleiter',
+          field: 'instructor',
+        },
+        {
+          label: 'Aktiv',
+          field: 'status',
+        },
+        {
+          label: 'Notiz',
+          field: 'notefield',
+        }
+      ],
       checkedBoxes: [],
-      rowIDs: ['imgsortcoursenumber','imgsortcourseoffer','imgsortcoursename','imgsorteventtype','imgsortcoursedate','imgsorttopic','imgsortcourselocation','imgsortaccompanyingteacher','imgsortsupervisingstudents','imgsortpresentstudents','imgsortregisteredstudents','imgsortanzahlung','imgsorthonorar','imgsortinstructor','imgsortnotefield','imgsortstatus'],
-      filter:'',
-      currentSort:'imgsortcoursenumber',
-      currentSortDir:'asc',
-      sortImg: 'sort_def.svg',
-      events: JSON.parse(localStorage.getItem("events")),
     }
   },
 
@@ -93,44 +160,26 @@ export default {
   },
 
   methods: {
-
-    deleterows(){
-      let x = 0;
-      for (x; x < this.checkedBoxes.length; x++){
-        this.$store.dispatch('course/delete', this.checkedBoxes[x]).then(
-            data => {
-              this.message = data.message;
-              this.successful = true;
-            },
-            error => {
-              this.message = (error.response && error.response.data) || error.message || error.toString();
-              this.successful = false;
-            }
-        );
+    selectionChanged(params) {
+      this.checkedBoxes = [];
+      for(let i = 0; i < params.selectedRows.length; i++) {
+        this.checkedBoxes[i] = params.selectedRows[i].id;
       }
-      this.rows = [];
-      this.loadData();
     },
 
-    checkAllBoxes(){
-      var headercheckbox = document.getElementById('checkbox_headerline');
-      var headercheckboxvalue = headercheckbox.checked;
-
-      let checkboxes = document.getElementsByName('checkbox_tablerow');
-      this.checkedBoxes = [];
-      for(var i=0, n = checkboxes.length;i<n;i++) {
-        if (headercheckboxvalue){
-          this.checkedBoxes.push(this.rows[i].id);
-        }
-        checkboxes[i].checked = headercheckboxvalue;
+    deleterows(){
+      for (let x = 0; x < this.checkedBoxes.length; x++){
+        this.$store.dispatch('course/delete', this.checkedBoxes[x]);
       }
+      setTimeout(() => this.loadData(), 1000);
+      //this.rows = [];
     },
 
-    async loadData(){
-      await this.$store.dispatch('course/getAll').then(
+    loadData(){
+      this.$store.dispatch('course/getAll').then(
         (data) => {
-          let x;
-          for(x = 0; x < data.length; x++){
+          this.rows = [];
+          for(let x = 0; x < data.length; x++){
               this.rows.push({id: data[x].id, coursenumber: data[x].course_number, courseoffer: data[x].course_offer, coursename: data[x].course_name, eventtype: data[x].event_type, coursedate: data[x].course_datetime, topic: data[x].course_topic, courselocation: data[x].course_location, accompanyingteacher: data[x].accompanyingTeacher, supervisingstudents: data[x].supervisingStudents, presentstudents: data[x].presentStudents, registeredstudents: data[x].registeredStudents, instructor: data[x].instructor, notefield: data[x].noteField, anzahlung: data[x].anzahlung, honorar: data[x].honorar, status: data[x].status});
           }
         },
@@ -145,67 +194,6 @@ export default {
       this.$store.dispatch('course/exportExcel', this.checkedBoxes);
     },
 
-    "sortTable": function sortTable(col) {
-      this.currentSort = col;
-      if (this.currentSortDir === 'asc') {
-        this.currentSortDir = 'desc';
-
-        this.rowIDs.forEach(element =>{
-          console.log(this.currentSort);
-          if(this.currentSort === element){
-            document.getElementById(element).src = require('../assets/sort_asc.svg')
-          } else {
-            document.getElementById(element).src = require('../assets/sort_def.svg')
-          }
-        });
-
-        col = col.toString().replace("imgsort","");
-        this.rows.sort(function (a, b) {
-          if (typeof(a[col]) === 'number' && typeof(b[col]) === 'number'){
-            if (a[col] < b[col]) {
-              return 1;
-            } else if (a[col] > b[col]) {
-              return -1;
-            }
-          } else if (typeof(a[col]) === 'string' && typeof(b[col]) === 'string'){
-            if (a[col].toLowerCase() < b[col].toLowerCase()) {
-              return 1;
-            } else if (a[col].toLowerCase() > b[col].toLowerCase()) {
-              return -1;
-            }
-          }
-          return 0;
-        })
-      } else {
-        this.currentSortDir = 'asc';
-
-        this.rowIDs.forEach(element =>{
-          if(this.currentSort === element){
-            document.getElementById(element.toString()).src = require('../assets/sort_desc.svg');
-          } else {
-            document.getElementById(element.toString()).src = require('../assets/sort_def.svg');
-          }
-        });
-
-        col = col.toString().replace("imgsort","");
-        this.rows.sort(function (a, b) {
-          if (typeof(a[col]) === 'number' && typeof(b[col]) === 'number'){
-            if (a[col] > b[col]) {
-              return 1;
-            } else if (a[col]< b[col]) {
-              return -1;
-            }
-          } else if (a[col].toLowerCase() < b[col].toLowerCase()) {
-            if (a[col].toLowerCase() > b[col].toLowerCase()) {
-              return 1;
-            } else if (a[col].toLowerCase() < b[col].toLowerCase()) {
-              return -1;
-            }
-          }
-          return 0;
-        })
-      }
-    }
   },
 
   watch: {
@@ -220,39 +208,6 @@ export default {
     }
   },
 
-  computed: {
-    "columns": function columns() {
-      if (this.rows.length === 0) {
-        return [];
-      }
-      return Object.keys(this.rows[0])
-    },
-    filteredRows() {
-      return this.rows.filter(() => {
-        return true;
-        /*
-        const angebotsnummer = row.coursenumber.toLowerCase();
-        const angebot = row.courseoffer.toLowerCase();
-        const kursname = row.coursename.toLowerCase();
-        const veranstaltungsart = row.eventtype.toLowerCase();
-        const kursdatum = row.coursedate.toLowerCase();
-        const thema = row.topic.toLowerCase();
-        const kursort = row.courselocation.toLowerCase();
-        const begleitendeLehrkraft = row.accompanyingteacher.toLowerCase();
-        const betreuendeStudenten = row.supervisingstudents.toLowerCase();
-        const anzahlderAnwesenden = row.presentstudents.toString();
-        const anzahlderAngemeldeten = row.registeredstudents.toString();
-        const kursleiter = row.instructor.toLowerCase();
-        const anzahlung = row.anzahlung.toLowerCase();
-        const honorar = row.honorar.toLowerCase();
-        const status = row.status.toString().toLowerCase();
-        const notiz = row.notefield.toLowerCase();
-        const searchTerm = this.filter.toLowerCase();
-
-        return angebotsnummer.includes(searchTerm) || angebot.includes(searchTerm) || kursname.includes(searchTerm) || veranstaltungsart.includes(searchTerm) || kursdatum.includes(searchTerm) || thema.includes(searchTerm) || kursort.includes(searchTerm) || begleitendeLehrkraft.includes(searchTerm) || betreuendeStudenten.includes(searchTerm) || betreuendeStudenten.includes(searchTerm) || anzahlderAnwesenden.includes(searchTerm) || anzahlderAngemeldeten.includes(searchTerm) || kursleiter.includes(searchTerm) || notiz.includes(searchTerm) || anzahlung.includes(searchTerm) || honorar.includes(searchTerm) || status.includes(searchTerm);
-     */ });
-    },
-  }
 }
 </script>
 
@@ -267,36 +222,6 @@ export default {
   white-space: nowrap;
 }
 
-table {
-   text-align: left;
-   position: relative;
-   border-collapse: collapse;
- }
-
-th {
-  background: white;
-  position: sticky;
-  top: 50px; /* Don't forget this, required for the stickiness */
-  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
-}
-
-.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;
@@ -320,59 +245,6 @@ th {
   background-color:#9fc1ff;
 }
 
-.search_box-inner i img {
-  width: 5%;
-  text-align: center;
-  margin: 5px;
-}
-
-#inpt_search{
-  transition:all 0.2s ease-out;
-  width:15px;
-  border-radius:0;
-  box-shadow:none;
-  outline: none;
-  padding:0;
-  margin:0;
-  border:0;
-  background-color: transparent;
-  opacity:0;
-}
-#inpt_search:focus {
-  width: 10em;
-  opacity: 1;
-}
-
-.content table {
-  margin-top: 10px;
-  display: inline-block;
-  font-family: arial, sans-serif;
-  border-collapse: collapse;
-  width: 100%;
-}
-
-.content table th {
-  text-transform: uppercase;
-  text-align: left;
-  background: #9fc1ff;
-  color: #000000;
-  padding: 8px;
-  min-width: 30px;
-}
-
-.content table td {
-  text-align: left;
-  padding: 8px;
-  border-right: 2px solid #9fc1ff;
-}
-.content table td:last-child {
-  border-right: none;
-}
-
-.content table tbody tr:nth-child(2n) td {
-  background: #8f0c4f;
-}
-
 .card {
   /* Add shadows to create the "card" effect */
   box-shadow: 0 4px 30px 0 rgba(0,0,0,0.1);
@@ -380,8 +252,16 @@ th {
   margin-top: 20px;
   margin-right: 10px;
   height: 95vh;
-  border-radius: 20px;
+  border-radius: 3px;
   border-color: transparent;
 }
+.e-resizable {
+  resize: both;
+  overflow: auto;
+  height: 100vh;
+  background-color: transparent;
+  border-color: transparent;
+}
+
 
 </style>
\ No newline at end of file
diff --git a/src/components/Layouts.vue b/src/components/Layouts.vue
index 49cbdf6..b4f6f2b 100644
--- a/src/components/Layouts.vue
+++ b/src/components/Layouts.vue
@@ -1,92 +1,189 @@
 <template>
-  <div id="content" class="content col-md-12">
-    <grid
-        :auto-width="autoWidth"
-        :cols="cols"
-        :from="from"
-        :language="language"
-        :pagination="pagination"
-        :rows="rows"
-        :search="search"
-        :server="server"
-        :sort="sort"
-        :width="width"
-    ></grid>
+  <div class="card">
+    <div id="content" class="e-resizable">
+
+      <div class="entry_box-inner">
+        <a id="editbutton" class="button" href="./editteacher" style="visibility: hidden">Eintrag bearbeiten</a>
+        <a id="addbutton" class="button" href="./createteacher">neuen Eintrag hinzufügen</a>
+        <a id="deletebutton" class="button" >ausgewählte Einträge löschen</a>
+        <a id="exportbutton" class="button" >Tabelle exportieren</a>
+      </div>
+      <div>
+        <vue-good-table
+            :columns="columns"
+            :rows="rows"
+            max-height="825px"
+            :select-options="{ enabled: true }"
+            :search-options="{ enabled: true }"/>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import Grid from 'gridjs-vue'
+import { VueGoodTable } from 'vue-good-table';
 
 export default {
   name: "Layouts",
-  components: {
-    Grid
-  },
+  components: {VueGoodTable},
 
   data(){
     return {
-      cols: ['Make', 'Model', 'Year', 'Color', 'Color', 'Color', 'Color', 'Color', 'Color', 'Color'],
-      rows: [
-        ['Ford', 'Fusion', '2011', 'Silver'],
-        ['Chevrolet', 'Cruz', '2018', 'White'],
-        ['Chevrolet', 'Cruz', '2018', 'White'],
-        ['Chevrolet', 'Cruz', '2018', 'White'],
-        ['Chevrolet', 'Cruz', '2018', 'White'],
-        ['Chevrolet', 'Cruz', '2018', 'White'],
-        ['Chevrolet', 'Cruz', '2018', 'White'],
-        ['Chevrolet', 'Cruz', '2018', 'White'],
-        ['Chevrolet', 'Cruz', '2018', 'White'],
-        ['Chevrolet', 'Cruz', '2018', 'White'],
-        ['Chevrolet', 'Cruz', '2018', 'White'],
-        ['Chevrolet', 'Cruz', '2018', 'White'],
-        ['Chevrolet', 'Cruz', '2018', 'White'],
-        ['Chevrolet', 'Cruz', '2018', 'White'],
-        ['Chevrolet', 'Cruz', '2018', 'White'],
-        ['Chevrolet', 'Cruz', '2018', 'White'],
-        ['Chevrolet', 'Cruz', '2018', 'White'],
-        ['Chevrolet', 'Cruz', '2018', 'White'],
-        ['Chevrolet', 'Cruz', '2018', 'White'],
-        ['Chevrolet', 'Cruz', '2018', 'White'],
-        ['Chevrolet', 'Cruz', '2018', 'White'],
-        ['Chevrolet', 'Cruz', '2018', 'White'],
-        ['Chevrolet', 'Cruz', '2018', 'White'],
-        ['Chevrolet', 'Cruz', '2018', 'White'],
-        ['Chevrolet', 'Cruz', '2018', 'White'],
-        ['Chevrolet', 'Cruz', '2018', 'White'],
-        ['Chevrolet', 'Cruz', '2018', 'White'],
-        ['Chevrolet', 'Cruz', '2018', 'White'],
-        ['Chevrolet', 'Cruz', '2018', 'White'],
-        ['Chevrolet', 'Cruz', '2018', 'White'],
-        ['Chevrolet', 'Cruz', '2018', 'White'],
-        ['Chevrolet', 'Cruz', '2018', 'White'],
-        ['Chevrolet', 'Cruz', '2018', 'White'],
-        ['Chevrolet', 'Cruz', '2018', 'White'],
-        ['Chevrolet', 'Cruz', '2018', 'White'],
-        ['Chevrolet', 'Cruz', '2018', 'White'],
-        ['Chevrolet', 'Cruz', '2018', 'White'],
-        ['Chevrolet', 'Cruz', '2018', 'White'],
-        ['Chevrolet', 'Cruz', '2018', 'White'],
-        ['Chevrolet', 'Cruz', '2018', 'White'],
-      ],
-      "autoWidth": true,
-      "from": undefined,
-      "language": undefined,
-      "pagination": true,
-      "search": true,
-      "server": undefined,
-      "sort": true,
-      "theme": "mermaid",
-      "width": "100%"
+      rows: [],
+      columns: [
+        {
+          label: 'Personalnummer',
+          field: 'personalnummer',
+        },
+        {
+          label: 'Geschlecht',
+          field: 'gender',
+        },
+        {
+          label: 'Grad',
+          field: 'grad',
+        },
+        {
+          label: 'Vorname',
+          field: 'firstname',
+        },
+        {
+          label: 'Nachname',
+          field: 'lastname',
+        },
+        {
+          label: 'E-Mail',
+          field: 'email',
+        },
+        {
+          label: 'Telefon',
+          field: 'telephone',
+        },
+        {
+          label: 'Straße',
+          field: 'street',
+        },
+        {
+          label: 'Postleitzahl',
+          field: 'zip',
+        },
+        {
+          label: 'Ort',
+          field: 'city',
+        },
+        {
+          label: 'Fächer',
+          field: 'subject',
+        },
+        {
+          label: 'Schulart',
+          field: 'school_branch',
+        },
+        {
+          label: 'Schulname',
+          field: 'school_name',
+        },
+        {
+          label: 'Schulnummer',
+          field: 'school_number',
+        }
+        /*,
+        {
+          label: 'Age',
+          field: 'age',
+          type: 'number',
+        },
+        {
+          label: 'Created On',
+          field: 'createdAt',
+          type: 'date',
+          dateInputFormat: 'yyyy-MM-dd',
+          dateOutputFormat: 'MMM do yy',
+        },
+        {
+          label: 'Percent',
+          field: 'score',
+          type: 'percentage',
+        },*/
+      ]
     }
   },
 
+  created() {
+    this.loadData();
+  },
+
+  methods:{
+    search: function() {
+      let searchText = document.getElementsByClassName('searchtext')[0].value;
+      this.$refs.grid.search(searchText);
+    },
+    rowSelected: function() {
+      //let selectedrowindex = this.$refs.grid.getSelectedRowIndexes();
+      //alert(selectedrowindex);
+    },
+
+    loadData(){
+      this.$store.dispatch('teacher/getAll').then(
+          (data) => {
+            let x;
+            for(x = 0; x < data.length; x++){
+              this.rows.push({id: data[x].id, personalnumber: data[x].personal_number, gender: data[x].gender, grad: data[x].grad, firstname: data[x].firstname, lastname: data[x].lastname, email: data[x].email, telephone: data[x].telephone, street: data[x].street, zip: data[x].zip, city: data[x].city, subject: data[x].subject, school_branch: data[x].school_branch, school_name: data[x].school_name, school_number: data[x].school_number, status: data[x].status});
+            }
+          },
+          error => {
+            this.message = (error.response && error.response.data) || error.message || error.toString();
+            this.successful = false;
+          }
+      );
+    },
+
+  }
+
 }
 </script>
 
-<style scoped>
-.v-data-table /deep/ .sticky-header {
-  position: sticky;
-  top: 0;
+<style>
+@import url("https://cdn.syncfusion.com/ej2/material.css");
+
+.content{
+  width: 100%;
+  height: 100vh;
+  overflow: auto;
+  scroll-behavior: unset;
+  white-space: nowrap;
+}
+
+.card {
+  /* Add shadows to create the "card" effect */
+  box-shadow: 0 4px 30px 0 rgba(0,0,0,0.1);
+  transition: 0.2s;
+  margin-top: 20px;
+  margin-right: 10px;
+  height: 95vh;
+  border-radius: 20px;
+  border-color: transparent;
+}
+.e-resizable {
+  overflow: auto;
+  height: 100vh;
+  background-color: transparent;
+  border-color: transparent;
+}#exportbutton, #addbutton, #editbutton, #deletebutton {
+   margin-right: 25px;
+   display:inline-block;
+   padding:0.3em 1.2em;
+   border-radius:2em;
+   box-sizing: border-box;
+   text-decoration:none;
+   font-weight:300;
+   color:#FFFFFF;
+   background-color:#528fff;
+   text-align:center;
+   transition: all 0.2s;
+ }
+
+#exportbutton:hover, #deletebutton:hover, #addbutton:hover , #editbutton:hover{
+  background-color:#9fc1ff;
 }
 </style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 5dad244..6651b8e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -14,6 +14,13 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faHome, faUser, faUserPlus, faSignInAlt, faSignOutAlt } from '@fortawesome/free-solid-svg-icons'
 
+import VueGoodTablePlugin from 'vue-good-table';
+
+// import the styles
+import 'vue-good-table/dist/vue-good-table.css'
+
+Vue.use(VueGoodTablePlugin);
+
 library.add(faHome, faUser, faUserPlus, faSignInAlt, faSignOutAlt);
 
 VueCrontab.setOption({
-- 
GitLab