diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index cb0771f..a70a722 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -1,4 +1,4 @@
-image: node:latest
+image: node:14
 
 stages:
   - prepare
@@ -21,7 +21,6 @@ prepare:
   stage: prepare
   script:
     - npm install --progress=false
-    - npm update --progress=false
 
 build:
   stage: build
diff --git a/api/src/VideoParser.php b/api/src/VideoParser.php
index bbc51a8..df172c5 100644
--- a/api/src/VideoParser.php
+++ b/api/src/VideoParser.php
@@ -212,6 +212,28 @@ class VideoParser {
         }
     }
 
+    /**
+     * get all videoinfos of a video file
+     *
+     * @param $video string name including extension
+     * @return object all infos as object
+     */
+    private function _get_video_attributes(string $video) {
+        $command = "mediainfo \"../$this->videopath$video\" --Output=JSON";
+        $output = shell_exec($command);
+        return json_decode($output);
+    }
+
+    /**
+     * write a line to the output log file
+     *
+     * @param string $message message to write
+     */
+    public function writeLog(string $message) {
+        file_put_contents("/tmp/output.log", $message, FILE_APPEND);
+        flush();
+    }
+
     /**
      * insert the corresponding videosize tag to a specific videoid
      * @param $width int video width
@@ -246,28 +268,6 @@ class VideoParser {
         }
     }
 
-    /**
-     * get all videoinfos of a video file
-     *
-     * @param $video string name including extension
-     * @return object all infos as object
-     */
-    private function _get_video_attributes(string $video) {
-        $command = "mediainfo \"../$this->videopath$video\" --Output=JSON";
-        $output = shell_exec($command);
-        return json_decode($output);
-    }
-
-    /**
-     * write a line to the output log file
-     *
-     * @param string $message message to write
-     */
-    public function writeLog(string $message) {
-        file_put_contents("/tmp/output.log", $message, FILE_APPEND);
-        flush();
-    }
-
     /**
      * ckecks if tag exists -- if not creates it
      * @param string $tagname the name of the tag
diff --git a/api/src/handlers/RequestBase.php b/api/src/handlers/RequestBase.php
index 7eef649..92542a0 100644
--- a/api/src/handlers/RequestBase.php
+++ b/api/src/handlers/RequestBase.php
@@ -1,5 +1,5 @@
 <?php
-require_once __DIR__.'/../Database.php';
+require_once __DIR__ . '/../Database.php';
 
 abstract class RequestBase {
     protected $conn;
@@ -34,17 +34,17 @@ abstract class RequestBase {
         }
     }
 
-    /**
-     * Send response message and exit script
-     * @param $message string the response message
-     */
-    function commitMessage($message){
-        echo $message;
-        exit(0);
-    }
-
     /**
      * add the action handlers in this abstract method
      */
     abstract function initHandlers();
+
+    /**
+     * Send response message and exit script
+     * @param $message string the response message
+     */
+    function commitMessage($message) {
+        echo $message;
+        exit(0);
+    }
 }
diff --git a/api/src/handlers/Tags.php b/api/src/handlers/Tags.php
index 1a49cda..9f50528 100644
--- a/api/src/handlers/Tags.php
+++ b/api/src/handlers/Tags.php
@@ -11,30 +11,15 @@ class Tags extends RequestBase {
         $this->getFromDB();
     }
 
-    private function getFromDB(){
-        /**
-         * returns all available tags from database
-         */
-        $this->addActionHandler("getAllTags", function () {
-            $query = "SELECT tag_name,tag_id from tags";
-            $result = $this->conn->query($query);
-
-            $rows = array();
-            while ($r = mysqli_fetch_assoc($result)) {
-                array_push($rows, $r);
-            }
-            $this->commitMessage(json_encode($rows));
-        });
-    }
-
-    private function addToDB(){
+    private function addToDB() {
         /**
          * creates a new tag
          * query requirements:
          * * tagname -- name of the new tag
          */
         $this->addActionHandler("createTag", function () {
-            $query = "INSERT INTO tags (tag_name) VALUES ('" . $_POST['tagname'] . "')";
+            // skip tag create if already existing
+            $query = "INSERT IGNORE INTO tags (tag_name) VALUES ('" . $_POST['tagname'] . "')";
 
             if ($this->conn->query($query) === TRUE) {
                 $this->commitMessage('{"result":"success"}');
@@ -54,7 +39,8 @@ class Tags extends RequestBase {
             $movieid = $_POST['movieid'];
             $tagid = $_POST['id'];
 
-            $query = "INSERT INTO video_tags(tag_id, video_id) VALUES ('$tagid','$movieid')";
+            // skip tag add if already assigned
+            $query = "INSERT IGNORE INTO video_tags(tag_id, video_id) VALUES ('$tagid','$movieid')";
 
             if ($this->conn->query($query) === TRUE) {
                 $this->commitMessage('{"result":"success"}');
@@ -63,4 +49,20 @@ class Tags extends RequestBase {
             }
         });
     }
+
+    private function getFromDB() {
+        /**
+         * returns all available tags from database
+         */
+        $this->addActionHandler("getAllTags", function () {
+            $query = "SELECT tag_name,tag_id from tags";
+            $result = $this->conn->query($query);
+
+            $rows = array();
+            while ($r = mysqli_fetch_assoc($result)) {
+                array_push($rows, $r);
+            }
+            $this->commitMessage(json_encode($rows));
+        });
+    }
 }
diff --git a/api/src/handlers/Video.php b/api/src/handlers/Video.php
index bfb2247..fdee534 100755
--- a/api/src/handlers/Video.php
+++ b/api/src/handlers/Video.php
@@ -1,5 +1,5 @@
 <?php
-require_once __DIR__.'/../SSettings.php';
+require_once __DIR__ . '/../SSettings.php';
 require_once 'RequestBase.php';
 
 /**
@@ -29,7 +29,8 @@ class Video extends RequestBase {
             $query = "SELECT movie_id,movie_name FROM videos ORDER BY create_date DESC, movie_name";
             if (isset($_POST['tag'])) {
                 $tag = $_POST['tag'];
-                if ($_POST['tag'] != "all") {
+                // if not all tags allowed filter for specific one
+                if (strtolower($_POST['tag']) != "all") {
                     $query = "SELECT movie_id,movie_name FROM videos 
                             INNER JOIN video_tags vt on videos.movie_id = vt.video_id
                             INNER JOIN tags t on vt.tag_id = t.tag_id
@@ -115,7 +116,7 @@ class Video extends RequestBase {
             // todo drop video url from db -- maybe one with and one without extension
             // extension hardcoded here!!!
             $arr["movie_url"] = str_replace("?", "%3F", $this->videopath . $row["movie_name"] . ".mp4");
-            $arr["likes"] = (int) $row["likes"];
+            $arr["likes"] = (int)$row["likes"];
             $arr["quality"] = $row["quality"];
             $arr["length"] = $row["length"];
 
diff --git a/deb/OpenMediaCenter/DEBIAN/postinst b/deb/OpenMediaCenter/DEBIAN/postinst
index add629c..d1cb982 100755
--- a/deb/OpenMediaCenter/DEBIAN/postinst
+++ b/deb/OpenMediaCenter/DEBIAN/postinst
@@ -30,3 +30,6 @@ chown -R www-data:www-data /var/www/openmediacenter
 
 # restart services
 systemctl restart nginx
+
+# trigger a movie reindex
+php /var/www/openmediacenter/extractvideopreviews.php
diff --git a/package.json b/package.json
index f64d7cd..5548084 100644
--- a/package.json
+++ b/package.json
@@ -10,14 +10,14 @@
     "bootstrap": "^4.5.3",
     "plyr-react": "^2.2.0",
     "react": "^16.14.0",
-    "react-bootstrap": "^1.3.0",
+    "react-bootstrap": "^1.4.0",
     "react-dom": "^16.14.0",
-    "react-scripts": "^3.4.3"
+    "react-scripts": "^3.4.4"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test --reporters=jest-junit --reporters=default --ci --silent",
+    "test": "react-scripts test --reporters=jest-junit --reporters=default",
     "coverage": "react-scripts test --coverage --watchAll=false",
     "eject": "react-scripts eject"
   },
@@ -31,7 +31,7 @@
       "text-summary"
     ]
   },
-  "proxy": "http://192.168.0.42",
+  "proxy": "http://192.168.0.42:8080",
   "homepage": "/",
   "eslintConfig": {
     "extends": "react-app"
diff --git a/src/App.js b/src/App.js
index 17e3546..3409221 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,14 +1,14 @@
 import React from 'react';
-import HomePage from "./pages/HomePage/HomePage";
-import RandomPage from "./pages/RandomPage/RandomPage";
-import GlobalInfos from "./GlobalInfos";
+import HomePage from './pages/HomePage/HomePage';
+import RandomPage from './pages/RandomPage/RandomPage';
+import GlobalInfos from './GlobalInfos';
 
 // include bootstraps css
 import 'bootstrap/dist/css/bootstrap.min.css';
-import style from './App.module.css'
+import style from './App.module.css';
 
-import SettingsPage from "./pages/SettingsPage/SettingsPage";
-import CategoryPage from "./pages/CategoryPage/CategoryPage";
+import SettingsPage from './pages/SettingsPage/SettingsPage';
+import CategoryPage from './pages/CategoryPage/CategoryPage';
 
 /**
  * The main App handles the main tabs and which content to show
@@ -19,10 +19,10 @@ class App extends React.Component {
     constructor(props, context) {
         super(props, context);
         this.state = {
-            page: "default",
+            page: 'default',
             generalSettingsLoaded: false,
             passwordsupport: null,
-            mediacentername: "OpenMediaCenter"
+            mediacentername: 'OpenMediaCenter'
         };
 
         // bind this to the method for being able to call methods such as this.setstate
@@ -67,24 +67,24 @@ class App extends React.Component {
      */
     MainBody() {
         let page;
-        if (this.state.page === "default") {
+        if (this.state.page === 'default') {
             page = <HomePage viewbinding={this.constructViewBinding()}/>;
             this.mypage = page;
-        } else if (this.state.page === "random") {
+        } else if (this.state.page === 'random') {
             page = <RandomPage viewbinding={this.constructViewBinding()}/>;
             this.mypage = page;
-        } else if (this.state.page === "settings") {
+        } else if (this.state.page === 'settings') {
             page = <SettingsPage/>;
             this.mypage = page;
-        } else if (this.state.page === "categories") {
+        } else if (this.state.page === 'categories') {
             page = <CategoryPage viewbinding={this.constructViewBinding()}/>;
             this.mypage = page;
-        } else if (this.state.page === "video") {
+        } else if (this.state.page === 'video') {
             // show videoelement if neccessary
             page = this.newElement;
 
             console.log(page);
-        } else if (this.state.page === "lastpage") {
+        } else if (this.state.page === 'lastpage') {
             // return back to last page
             page = this.mypage;
         } else {
@@ -102,20 +102,20 @@ class App extends React.Component {
                 <div className={[style.navcontainer, themeStyle.backgroundcolor, themeStyle.textcolor, themeStyle.hrcolor].join(' ')}>
                     <div className={style.navbrand}>{this.state.mediacentername}</div>
 
-                    <div className={[style.navitem, themeStyle.navitem, this.state.page === "default" ? style.navitemselected : {}].join(' ')}
-                         onClick={() => this.setState({page: "default"})}>Home
+                    <div className={[style.navitem, themeStyle.navitem, this.state.page === 'default' ? style.navitemselected : {}].join(' ')}
+                         onClick={() => this.setState({page: 'default'})}>Home
                     </div>
-                    <div className={[style.navitem, themeStyle.navitem, this.state.page === "random" ? style.navitemselected : {}].join(' ')}
-                         onClick={() => this.setState({page: "random"})}>Random Video
+                    <div className={[style.navitem, themeStyle.navitem, this.state.page === 'random' ? style.navitemselected : {}].join(' ')}
+                         onClick={() => this.setState({page: 'random'})}>Random Video
                     </div>
-                    <div className={[style.navitem, themeStyle.navitem, this.state.page === "categories" ? style.navitemselected : {}].join(' ')}
-                         onClick={() => this.setState({page: "categories"})}>Categories
+                    <div className={[style.navitem, themeStyle.navitem, this.state.page === 'categories' ? style.navitemselected : {}].join(' ')}
+                         onClick={() => this.setState({page: 'categories'})}>Categories
                     </div>
-                    <div className={[style.navitem, themeStyle.navitem, this.state.page === "settings" ? style.navitemselected : {}].join(' ')}
-                         onClick={() => this.setState({page: "settings"})}>Settings
+                    <div className={[style.navitem, themeStyle.navitem, this.state.page === 'settings' ? style.navitemselected : {}].join(' ')}
+                         onClick={() => this.setState({page: 'settings'})}>Settings
                     </div>
                 </div>
-                {this.state.generalSettingsLoaded ? this.MainBody() : "loading"}
+                {this.state.generalSettingsLoaded ? this.MainBody() : 'loading'}
             </div>
         );
     }
@@ -127,7 +127,7 @@ class App extends React.Component {
         this.newElement = element;
 
         this.setState({
-            page: "video"
+            page: 'video'
         });
     }
 
@@ -136,7 +136,7 @@ class App extends React.Component {
      */
     returnToLastElement() {
         this.setState({
-            page: "lastpage"
+            page: 'lastpage'
         });
     }
 }
diff --git a/src/App.module.css b/src/App.module.css
index 10a8a7e..8cab3cd 100644
--- a/src/App.module.css
+++ b/src/App.module.css
@@ -37,8 +37,8 @@
 }
 
 .navcontainer {
-    border-width: 0 0 2px 0;
     border-style: dotted;
+    border-width: 0 0 2px 0;
 
     padding-bottom: 40px;
     padding-top: 20px;
diff --git a/src/App.test.js b/src/App.test.js
index cc12113..777f678 100644
--- a/src/App.test.js
+++ b/src/App.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import App from './App';
-import {shallow} from 'enzyme'
+import {shallow} from 'enzyme';
 
 describe('<App/>', function () {
     it('renders without crashing ', function () {
@@ -24,7 +24,7 @@ describe('<App/>', function () {
 
         wrapper.instance().changeRootElement(<div id='testit'/>);
 
-        expect(wrapper.find("#testit")).toHaveLength(1);
+        expect(wrapper.find('#testit')).toHaveLength(1);
     });
 
     it('test hide video again', function () {
@@ -33,61 +33,61 @@ describe('<App/>', function () {
 
         wrapper.instance().changeRootElement(<div id='testit'/>);
 
-        expect(wrapper.find("#testit")).toHaveLength(1);
+        expect(wrapper.find('#testit')).toHaveLength(1);
 
         wrapper.instance().returnToLastElement();
 
-        expect(wrapper.find("HomePage")).toHaveLength(1);
+        expect(wrapper.find('HomePage')).toHaveLength(1);
     });
 
     it('test fallback to last loaded page', function () {
         const wrapper = shallow(<App/>);
         wrapper.setState({generalSettingsLoaded: true}); // simulate fetch to have already finisheed
 
-        wrapper.find(".navitem").findWhere(t => t.text() === "Random Video" && t.type() === "div").simulate("click");
+        wrapper.find('.navitem').findWhere(t => t.text() === 'Random Video' && t.type() === 'div').simulate('click');
 
         wrapper.instance().changeRootElement(<div id='testit'/>);
 
-        expect(wrapper.find("#testit")).toHaveLength(1);
+        expect(wrapper.find('#testit')).toHaveLength(1);
 
         wrapper.instance().returnToLastElement();
 
-        expect(wrapper.find("RandomPage")).toHaveLength(1);
+        expect(wrapper.find('RandomPage')).toHaveLength(1);
     });
 
     it('test home click', function () {
         const wrapper = shallow(<App/>);
         wrapper.setState({generalSettingsLoaded: true}); // simulate fetch to have already finisheed
 
-        wrapper.setState({page: "wrongvalue"});
-        expect(wrapper.find("HomePage")).toHaveLength(0);
-        wrapper.find(".navitem").findWhere(t => t.text() === "Home" && t.type() === "div").simulate("click");
-        expect(wrapper.find("HomePage")).toHaveLength(1);
+        wrapper.setState({page: 'wrongvalue'});
+        expect(wrapper.find('HomePage')).toHaveLength(0);
+        wrapper.find('.navitem').findWhere(t => t.text() === 'Home' && t.type() === 'div').simulate('click');
+        expect(wrapper.find('HomePage')).toHaveLength(1);
     });
 
     it('test category click', function () {
         const wrapper = shallow(<App/>);
         wrapper.setState({generalSettingsLoaded: true}); // simulate fetch to have already finisheed
 
-        expect(wrapper.find("CategoryPage")).toHaveLength(0);
-        wrapper.find(".navitem").findWhere(t => t.text() === "Categories" && t.type() === "div").simulate("click");
-        expect(wrapper.find("CategoryPage")).toHaveLength(1);
+        expect(wrapper.find('CategoryPage')).toHaveLength(0);
+        wrapper.find('.navitem').findWhere(t => t.text() === 'Categories' && t.type() === 'div').simulate('click');
+        expect(wrapper.find('CategoryPage')).toHaveLength(1);
     });
 
     it('test settings click', function () {
         const wrapper = shallow(<App/>);
         wrapper.setState({generalSettingsLoaded: true}); // simulate fetch to have already finisheed
 
-        expect(wrapper.find("SettingsPage")).toHaveLength(0);
-        wrapper.find(".navitem").findWhere(t => t.text() === "Settings" && t.type() === "div").simulate("click");
-        expect(wrapper.find("SettingsPage")).toHaveLength(1);
+        expect(wrapper.find('SettingsPage')).toHaveLength(0);
+        wrapper.find('.navitem').findWhere(t => t.text() === 'Settings' && t.type() === 'div').simulate('click');
+        expect(wrapper.find('SettingsPage')).toHaveLength(1);
     });
 
     it('test initial fetch from api', done => {
         global.fetch = global.prepareFetchApi({
             generalSettingsLoaded: true,
             passwordsupport: true,
-            mediacentername: "testname"
+            mediacentername: 'testname'
         });
 
         const wrapper = shallow(<App/>);
diff --git a/src/GlobalInfos.js b/src/GlobalInfos.js
index 5c45ac4..0ef18ff 100644
--- a/src/GlobalInfos.js
+++ b/src/GlobalInfos.js
@@ -1,5 +1,5 @@
-import darktheme from "./AppDarkTheme.module.css";
-import lighttheme from "./AppLightTheme.module.css";
+import darktheme from './AppDarkTheme.module.css';
+import lighttheme from './AppLightTheme.module.css';
 
 /**
  * This class is available for all components in project
diff --git a/src/GlobalInfos.test.js b/src/GlobalInfos.test.js
index c87cf85..f7f5303 100644
--- a/src/GlobalInfos.test.js
+++ b/src/GlobalInfos.test.js
@@ -1,5 +1,5 @@
-import React from "react";
-import GlobalInfos from "./GlobalInfos";
+import React from 'react';
+import GlobalInfos from './GlobalInfos';
 
 describe('<GlobalInfos/>', function () {
     it('always same instance ', function () {
diff --git a/src/elements/AddTagPopup/AddTagPopup.js b/src/elements/AddTagPopup/AddTagPopup.js
index eeb928b..1d165e6 100644
--- a/src/elements/AddTagPopup/AddTagPopup.js
+++ b/src/elements/AddTagPopup/AddTagPopup.js
@@ -1,9 +1,9 @@
-import React from "react";
+import React from 'react';
 import ReactDom from 'react-dom';
-import style from './AddTagPopup.module.css'
-import Tag from "../Tag/Tag";
-import {Line} from "../PageTitle/PageTitle";
-import GlobalInfos from "../../GlobalInfos";
+import style from './AddTagPopup.module.css';
+import Tag from '../Tag/Tag';
+import {Line} from '../PageTitle/PageTitle';
+import GlobalInfos from '../../GlobalInfos';
 
 /**
  * component creates overlay to add a new tag to a video
@@ -84,7 +84,7 @@ class AddTagPopup extends React.Component {
      */
     keypress(event) {
         // hide if escape is pressed
-        if (event.key === "Escape") {
+        if (event.key === 'Escape') {
             this.props.onHide();
         }
     }
@@ -95,7 +95,7 @@ class AddTagPopup extends React.Component {
      * @param tagname tag name to add
      */
     addTag(tagid, tagname) {
-        console.log(this.props)
+        console.log(this.props);
         const updateRequest = new FormData();
         updateRequest.append('action', 'addTag');
         updateRequest.append('id', tagid);
@@ -104,8 +104,8 @@ class AddTagPopup extends React.Component {
         fetch('/api/tags.php', {method: 'POST', body: updateRequest})
             .then((response) => response.json()
                 .then((result) => {
-                    if (result.result !== "success") {
-                        console.log("error occured while writing to db -- todo error handling");
+                    if (result.result !== 'success') {
+                        console.log('error occured while writing to db -- todo error handling');
                         console.log(result.result);
                     } else {
                         this.props.submit(tagid, tagname);
@@ -142,8 +142,8 @@ class AddTagPopup extends React.Component {
             xOld = e.clientX;
             yOld = e.clientY;
             // set the element's new position:
-            elmnt.style.top = (elmnt.offsetTop - dy) + "px";
-            elmnt.style.left = (elmnt.offsetLeft - dx) + "px";
+            elmnt.style.top = (elmnt.offsetTop - dy) + 'px';
+            elmnt.style.left = (elmnt.offsetLeft - dx) + 'px';
         }
 
         function closeDragElement() {
diff --git a/src/elements/AddTagPopup/AddTagPopup.test.js b/src/elements/AddTagPopup/AddTagPopup.test.js
index 5adb711..d1fce94 100644
--- a/src/elements/AddTagPopup/AddTagPopup.test.js
+++ b/src/elements/AddTagPopup/AddTagPopup.test.js
@@ -1,9 +1,9 @@
-import React from "react";
+import React from 'react';
 
-import {shallow} from 'enzyme'
-import "@testing-library/jest-dom"
+import {shallow} from 'enzyme';
+import '@testing-library/jest-dom';
 
-import AddTagPopup from "./AddTagPopup";
+import AddTagPopup from './AddTagPopup';
 
 describe('<AddTagPopup/>', function () {
     it('renders without crashing ', function () {
@@ -14,10 +14,10 @@ describe('<AddTagPopup/>', function () {
     it('test tag insertion', function () {
         const wrapper = shallow(<AddTagPopup/>);
         wrapper.setState({
-            items: [{tag_id: 1, tag_name: 'test'}, {tag_id: 2, tag_name: "ee"}]
+            items: [{tag_id: 1, tag_name: 'test'}, {tag_id: 2, tag_name: 'ee'}]
         }, () => {
             expect(wrapper.find('Tag')).toHaveLength(2);
-            expect(wrapper.find('Tag').first().dive().text()).toBe("test");
+            expect(wrapper.find('Tag').first().dive().text()).toBe('test');
         });
     });
 
@@ -36,13 +36,13 @@ describe('<AddTagPopup/>', function () {
     it('test addtag', done => {
         const wrapper = shallow(<AddTagPopup/>);
 
-        global.fetch = prepareFetchApi({result: "success"});
+        global.fetch = prepareFetchApi({result: 'success'});
 
         wrapper.setProps({
             submit: jest.fn(() => {}),
             onHide: jest.fn()
         }, () => {
-            wrapper.instance().addTag(1, "test");
+            wrapper.instance().addTag(1, 'test');
 
             expect(global.fetch).toHaveBeenCalledTimes(1);
         });
@@ -59,13 +59,13 @@ describe('<AddTagPopup/>', function () {
     it('test failing addTag', done => {
         const wrapper = shallow(<AddTagPopup/>);
 
-        global.fetch = prepareFetchApi({result: "fail"});
+        global.fetch = prepareFetchApi({result: 'fail'});
 
         wrapper.setProps({
             submit: jest.fn(() => {}),
             onHide: jest.fn()
         }, () => {
-            wrapper.instance().addTag(1, "test");
+            wrapper.instance().addTag(1, 'test');
 
             expect(global.fetch).toHaveBeenCalledTimes(1);
         });
diff --git a/src/elements/InfoHeaderItem/InfoHeaderItem.js b/src/elements/InfoHeaderItem/InfoHeaderItem.js
index 00a95db..b8a65d3 100644
--- a/src/elements/InfoHeaderItem/InfoHeaderItem.js
+++ b/src/elements/InfoHeaderItem/InfoHeaderItem.js
@@ -1,7 +1,7 @@
-import React from "react";
+import React from 'react';
 import style from './InfoHeaderItem.module.css';
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {Spinner} from "react-bootstrap";
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {Spinner} from 'react-bootstrap';
 
 /**
  * a component to display one of the short quickinfo tiles on dashboard
@@ -15,8 +15,8 @@ class InfoHeaderItem extends React.Component {
             }} className={style.infoheaderitem} style={{backgroundColor: this.props.backColor}}>
                 <div className={style.icon}>
                     <FontAwesomeIcon style={{
-                        verticalAlign: "middle",
-                        lineHeight: "130px"
+                        verticalAlign: 'middle',
+                        lineHeight: '130px'
                     }} icon={this.props.icon} size='5x'/>
                 </div>
                 {this.props.text !== null && this.props.text !== undefined ?
diff --git a/src/elements/InfoHeaderItem/InfoHeaderItem.test.js b/src/elements/InfoHeaderItem/InfoHeaderItem.test.js
index e20a581..10b80dc 100644
--- a/src/elements/InfoHeaderItem/InfoHeaderItem.test.js
+++ b/src/elements/InfoHeaderItem/InfoHeaderItem.test.js
@@ -1,6 +1,6 @@
-import {shallow} from "enzyme";
-import React from "react";
-import InfoHeaderItem from "./InfoHeaderItem";
+import {shallow} from 'enzyme';
+import React from 'react';
+import InfoHeaderItem from './InfoHeaderItem';
 
 describe('<InfoHeaderItem/>', function () {
     it('renders without crashing ', function () {
@@ -10,34 +10,34 @@ describe('<InfoHeaderItem/>', function () {
 
     it('renders correct text', function () {
         const wrapper = shallow(<InfoHeaderItem text='mytext'/>);
-        expect(wrapper.find(".maintext").text()).toBe("mytext");
+        expect(wrapper.find('.maintext').text()).toBe('mytext');
     });
 
     it('renders correct subtext', function () {
         const wrapper = shallow(<InfoHeaderItem text='mimi' subtext='testtext'/>);
-        expect(wrapper.find(".subtext").text()).toBe("testtext");
+        expect(wrapper.find('.subtext').text()).toBe('testtext');
     });
 
     it('test no subtext if no text defined', function () {
         const wrapper = shallow(<InfoHeaderItem subtext='testi'/>);
-        expect(wrapper.find(".subtext")).toHaveLength(0);
+        expect(wrapper.find('.subtext')).toHaveLength(0);
     });
 
     it('test custom click handler', function () {
         const func = jest.fn();
         const wrapper = shallow(<InfoHeaderItem onClick={() => func()}/>);
         expect(func).toBeCalledTimes(0);
-        wrapper.simulate("click");
+        wrapper.simulate('click');
         expect(func).toBeCalledTimes(1);
     });
 
     it('test insertion of loading spinner', function () {
         const wrapper = shallow(<InfoHeaderItem text={null}/>);
-        expect(wrapper.find("Spinner").length).toBe(1);
+        expect(wrapper.find('Spinner').length).toBe(1);
     });
 
     it('test loading spinner if undefined', function () {
         const wrapper = shallow(<InfoHeaderItem/>);
-        expect(wrapper.find("Spinner").length).toBe(1);
+        expect(wrapper.find('Spinner').length).toBe(1);
     });
 });
diff --git a/src/elements/NewTagPopup/NewTagPopup.js b/src/elements/NewTagPopup/NewTagPopup.js
index 481cfe1..8f4d142 100644
--- a/src/elements/NewTagPopup/NewTagPopup.js
+++ b/src/elements/NewTagPopup/NewTagPopup.js
@@ -1,6 +1,6 @@
-import React from "react";
-import Modal from 'react-bootstrap/Modal'
-import {Form} from "react-bootstrap";
+import React from 'react';
+import Modal from 'react-bootstrap/Modal';
+import {Form} from 'react-bootstrap';
 
 /**
  * creates modal overlay to define a new Tag
@@ -30,7 +30,7 @@ class NewTagPopup extends React.Component {
                         <Form.Group>
                             <Form.Label>Tag Name:</Form.Label>
                             <Form.Control id='namefield' type='text' placeholder='Enter Tag name' onChange={(v) => {
-                                this.value = v.target.value
+                                this.value = v.target.value;
                             }}/>
                             <Form.Text className='text-muted'>
                                 This Tag will automatically show up on category page.
@@ -59,8 +59,8 @@ class NewTagPopup extends React.Component {
         fetch('/api/tags.php', {method: 'POST', body: updateRequest})
             .then((response) => response.json())
             .then((result) => {
-                if (result.result !== "success") {
-                    console.log("error occured while writing to db -- todo error handling");
+                if (result.result !== 'success') {
+                    console.log('error occured while writing to db -- todo error handling');
                     console.log(result.result);
                 }
                 this.props.onHide();
diff --git a/src/elements/NewTagPopup/NewTagPopup.test.js b/src/elements/NewTagPopup/NewTagPopup.test.js
index fad4707..e2cabb2 100644
--- a/src/elements/NewTagPopup/NewTagPopup.test.js
+++ b/src/elements/NewTagPopup/NewTagPopup.test.js
@@ -1,8 +1,8 @@
-import React from "react";
+import React from 'react';
 
-import {shallow} from 'enzyme'
-import "@testing-library/jest-dom"
-import NewTagPopup from "./NewTagPopup";
+import {shallow} from 'enzyme';
+import '@testing-library/jest-dom';
+import NewTagPopup from './NewTagPopup';
 
 describe('<NewTagPopup/>', function () {
     it('renders without crashing ', function () {
@@ -14,7 +14,7 @@ describe('<NewTagPopup/>', function () {
         const mockSuccessResponse = {};
         const mockJsonPromise = Promise.resolve(mockSuccessResponse);
         const mockFetchPromise = Promise.resolve({
-            json: () => mockJsonPromise,
+            json: () => mockJsonPromise
         });
         global.fetch = jest.fn().mockImplementation(() => mockFetchPromise);
 
@@ -23,7 +23,7 @@ describe('<NewTagPopup/>', function () {
         const wrapper = shallow(<NewTagPopup/>);
         wrapper.setProps({
             onHide: () => {
-                func()
+                func();
             }
         });
 
diff --git a/src/elements/PageTitle/PageTitle.js b/src/elements/PageTitle/PageTitle.js
index df3096a..a65f893 100644
--- a/src/elements/PageTitle/PageTitle.js
+++ b/src/elements/PageTitle/PageTitle.js
@@ -1,6 +1,6 @@
-import React from "react";
-import style from "./PageTitle.module.css"
-import GlobalInfos from "../../GlobalInfos";
+import React from 'react';
+import style from './PageTitle.module.css';
+import GlobalInfos from '../../GlobalInfos';
 
 /**
  * Component for generating PageTitle with bottom Line
diff --git a/src/elements/PageTitle/PageTitle.test.js b/src/elements/PageTitle/PageTitle.test.js
index 6ed16c2..5b2e22c 100644
--- a/src/elements/PageTitle/PageTitle.test.js
+++ b/src/elements/PageTitle/PageTitle.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import {shallow} from 'enzyme'
+import {shallow} from 'enzyme';
 
-import PageTitle from "./PageTitle";
+import PageTitle from './PageTitle';
 
 describe('<Preview/>', function () {
     it('renders without crashing ', function () {
@@ -13,19 +13,19 @@ describe('<Preview/>', function () {
         const wrapper = shallow(<PageTitle>heyimachild</PageTitle>);
 
         const children = wrapper.children();
-        expect(children.at(children.length - 2).text()).toBe("heyimachild");
+        expect(children.at(children.length - 2).text()).toBe('heyimachild');
     });
 
     it('renders pagetitle prop', function () {
         const wrapper = shallow(<PageTitle title='testtitle'/>);
 
-        expect(wrapper.find(".pageheader").text()).toBe("testtitle<Line />");
+        expect(wrapper.find('.pageheader').text()).toBe('testtitle<Line />');
     });
 
     it('renders subtitle prop', function () {
         const wrapper = shallow(<PageTitle subtitle='testsubtitle'/>);
 
-        expect(wrapper.find(".pageheadersubtitle").text()).toBe("testsubtitle");
+        expect(wrapper.find('.pageheadersubtitle').text()).toBe('testsubtitle');
     });
 });
 
diff --git a/src/elements/Preview/Preview.js b/src/elements/Preview/Preview.js
index 066d819..2e7dd9e 100644
--- a/src/elements/Preview/Preview.js
+++ b/src/elements/Preview/Preview.js
@@ -1,8 +1,8 @@
-import React from "react";
-import style from "./Preview.module.css";
-import Player from "../../pages/Player/Player";
-import {Spinner} from "react-bootstrap";
-import GlobalInfos from "../../GlobalInfos";
+import React from 'react';
+import style from './Preview.module.css';
+import Player from '../../pages/Player/Player';
+import {Spinner} from 'react-bootstrap';
+import GlobalInfos from '../../GlobalInfos';
 
 /**
  * Component for single preview tile
@@ -62,7 +62,7 @@ class Preview extends React.Component {
      * handle the click event of a tile
      */
     itemClick() {
-        console.log("item clicked!" + this.state.name);
+        console.log('item clicked!' + this.state.name);
 
         this.props.viewbinding.changeRootElement(
             <Player
diff --git a/src/elements/Preview/Previw.test.js b/src/elements/Preview/Previw.test.js
index e1f68ed..08a1e21 100644
--- a/src/elements/Preview/Previw.test.js
+++ b/src/elements/Preview/Previw.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import {shallow} from 'enzyme'
+import {shallow} from 'enzyme';
 
-import Preview, {TagPreview} from "./Preview";
+import Preview, {TagPreview} from './Preview';
 
 describe('<Preview/>', function () {
     it('renders without crashing ', function () {
@@ -23,7 +23,7 @@ describe('<Preview/>', function () {
         wrapper.setProps({
             viewbinding: {
                 changeRootElement: () => {
-                    func()
+                    func();
                 }
             }
         });
@@ -38,7 +38,7 @@ describe('<Preview/>', function () {
         const mockSuccessResponse = 'testsrc';
         const mockJsonPromise = Promise.resolve(mockSuccessResponse);
         const mockFetchPromise = Promise.resolve({
-            text: () => mockJsonPromise,
+            text: () => mockJsonPromise
         });
         global.fetch = jest.fn().mockImplementation(() => mockFetchPromise);
 
@@ -49,7 +49,7 @@ describe('<Preview/>', function () {
 
         process.nextTick(() => {
             // received picture should be rendered into wrapper
-            expect(wrapper.find(".previewimage").props().src).not.toBeNull();
+            expect(wrapper.find('.previewimage').props().src).not.toBeNull();
 
             global.fetch.mockClear();
             done();
@@ -61,7 +61,7 @@ describe('<Preview/>', function () {
         const wrapper = shallow(<Preview/>);
 
         // expect load animation to be visible
-        expect(wrapper.find(".loadAnimation")).toHaveLength(1);
+        expect(wrapper.find('.loadAnimation')).toHaveLength(1);
     });
 });
 
@@ -84,7 +84,7 @@ describe('<TagPreview/>', function () {
         const wrapper = shallow(<TagPreview/>);
         wrapper.setProps({
             categorybinding: () => {
-                func()
+                func();
             }
         });
 
diff --git a/src/elements/SideBar/SideBar.js b/src/elements/SideBar/SideBar.js
index f1c331d..8f13fd3 100644
--- a/src/elements/SideBar/SideBar.js
+++ b/src/elements/SideBar/SideBar.js
@@ -1,6 +1,6 @@
-import React from "react";
-import style from "./SideBar.module.css"
-import GlobalInfos from "../../GlobalInfos";
+import React from 'react';
+import style from './SideBar.module.css';
+import GlobalInfos from '../../GlobalInfos';
 
 /**
  * component for sidebar-info
diff --git a/src/elements/SideBar/SideBar.test.js b/src/elements/SideBar/SideBar.test.js
index ad3b3f8..8d9e13f 100644
--- a/src/elements/SideBar/SideBar.test.js
+++ b/src/elements/SideBar/SideBar.test.js
@@ -1,8 +1,8 @@
-import React from "react";
-import SideBar, {SideBarItem, SideBarTitle} from "./SideBar";
+import React from 'react';
+import SideBar, {SideBarItem, SideBarTitle} from './SideBar';
 
-import "@testing-library/jest-dom"
-import {shallow} from "enzyme";
+import '@testing-library/jest-dom';
+import {shallow} from 'enzyme';
 
 describe('<SideBar/>', function () {
     it('renders without crashing ', function () {
@@ -12,16 +12,16 @@ describe('<SideBar/>', function () {
 
     it('renders childs correctly', function () {
         const wrapper = shallow(<SideBar>test</SideBar>);
-        expect(wrapper.children().text()).toBe("test");
+        expect(wrapper.children().text()).toBe('test');
     });
 
     it('sidebar Item renders without crashing', function () {
         const wrapper = shallow(<SideBarItem>Test</SideBarItem>);
-        expect(wrapper.children().text()).toBe("Test");
+        expect(wrapper.children().text()).toBe('Test');
     });
 
     it('renderes sidebartitle correctly', function () {
         const wrapper = shallow(<SideBarTitle>Test</SideBarTitle>);
-        expect(wrapper.children().text()).toBe("Test");
+        expect(wrapper.children().text()).toBe('Test');
     });
 });
diff --git a/src/elements/Tag/Tag.js b/src/elements/Tag/Tag.js
index 330b981..f77abeb 100644
--- a/src/elements/Tag/Tag.js
+++ b/src/elements/Tag/Tag.js
@@ -1,7 +1,7 @@
-import React from "react";
+import React from 'react';
 
-import styles from "./Tag.module.css"
-import CategoryPage from "../../pages/CategoryPage/CategoryPage";
+import styles from './Tag.module.css';
+import CategoryPage from '../../pages/CategoryPage/CategoryPage';
 
 /**
  * A Component representing a single Category tag
diff --git a/src/elements/Tag/Tag.test.js b/src/elements/Tag/Tag.test.js
index 7d9ec59..b440921 100644
--- a/src/elements/Tag/Tag.test.js
+++ b/src/elements/Tag/Tag.test.js
@@ -1,8 +1,8 @@
-import React from "react";
-import Tag from './Tag'
+import React from 'react';
+import Tag from './Tag';
 
-import "@testing-library/jest-dom"
-import {shallow} from 'enzyme'
+import '@testing-library/jest-dom';
+import {shallow} from 'enzyme';
 
 describe('<Tag/>', function () {
     it('renders without crashing ', function () {
@@ -12,7 +12,7 @@ describe('<Tag/>', function () {
 
     it('renders childs correctly', function () {
         const wrapper = shallow(<Tag>test</Tag>);
-        expect(wrapper.children().text()).toBe("test");
+        expect(wrapper.children().text()).toBe('test');
     });
 
     it('click event triggered and setvideo callback called', function () {
@@ -27,7 +27,7 @@ describe('<Tag/>', function () {
 
         expect(func).toBeCalledTimes(0);
 
-        wrapper.simulate("click");
+        wrapper.simulate('click');
 
         expect(func).toBeCalledTimes(1);
     });
@@ -36,11 +36,11 @@ describe('<Tag/>', function () {
         const func = jest.fn();
 
         const wrapper = shallow(<Tag
-            onclick={() => {func()}}>test</Tag>);
+            onclick={() => {func();}}>test</Tag>);
 
         expect(func).toBeCalledTimes(0);
 
-        wrapper.simulate("click");
+        wrapper.simulate('click');
 
         expect(func).toBeCalledTimes(1);
     });
diff --git a/src/elements/VideoContainer/VideoContainer.js b/src/elements/VideoContainer/VideoContainer.js
index 73d9459..75ae8d9 100644
--- a/src/elements/VideoContainer/VideoContainer.js
+++ b/src/elements/VideoContainer/VideoContainer.js
@@ -1,6 +1,6 @@
-import React from "react";
-import Preview from "../Preview/Preview";
-import style from "./VideoContainer.module.css"
+import React from 'react';
+import Preview from '../Preview/Preview';
+import style from './VideoContainer.module.css';
 
 /**
  * A videocontainer storing lots of Preview elements
@@ -39,7 +39,7 @@ class VideoContainer extends React.Component {
                 ))}
                 {/*todo css for no items to show*/}
                 {this.state.loadeditems.length === 0 ?
-                    "no items to show!" : null}
+                    'no items to show!' : null}
                 {this.props.children}
             </div>
         );
@@ -56,7 +56,7 @@ class VideoContainer extends React.Component {
      * @param nr number of previews to load
      */
     loadPreviewBlock(nr) {
-        console.log("loadpreviewblock called ...")
+        console.log('loadpreviewblock called ...');
         let ret = [];
         for (let i = 0; i < nr; i++) {
             // only add if not end
@@ -84,7 +84,7 @@ class VideoContainer extends React.Component {
         if (window.innerHeight + document.documentElement.scrollTop + 200 >= document.documentElement.offsetHeight) {
             this.loadPreviewBlock(8);
         }
-    }
+    };
 }
 
 export default VideoContainer;
diff --git a/src/elements/VideoContainer/VideoContainer.test.js b/src/elements/VideoContainer/VideoContainer.test.js
index 642e2e8..3a76654 100644
--- a/src/elements/VideoContainer/VideoContainer.test.js
+++ b/src/elements/VideoContainer/VideoContainer.test.js
@@ -1,6 +1,6 @@
-import {shallow} from "enzyme";
-import React from "react";
-import VideoContainer from "./VideoContainer";
+import {shallow} from 'enzyme';
+import React from 'react';
+import VideoContainer from './VideoContainer';
 
 describe('<VideoContainer/>', function () {
     it('renders without crashing ', function () {
@@ -25,6 +25,6 @@ describe('<VideoContainer/>', function () {
     it('no items available', () => {
         const wrapper = shallow(<VideoContainer data={[]}/>);
         expect(wrapper.find('Preview')).toHaveLength(0);
-        expect(wrapper.find(".maincontent").text()).toBe("no items to show!");
+        expect(wrapper.find('.maincontent').text()).toBe('no items to show!');
     });
 });
diff --git a/src/pages/CategoryPage/CategoryPage.js b/src/pages/CategoryPage/CategoryPage.js
index b89b143..0371a50 100644
--- a/src/pages/CategoryPage/CategoryPage.js
+++ b/src/pages/CategoryPage/CategoryPage.js
@@ -1,12 +1,12 @@
-import React from "react";
-import SideBar, {SideBarTitle} from "../../elements/SideBar/SideBar";
-import Tag from "../../elements/Tag/Tag";
-import videocontainerstyle from "../../elements/VideoContainer/VideoContainer.module.css"
+import React from 'react';
+import SideBar, {SideBarTitle} from '../../elements/SideBar/SideBar';
+import Tag from '../../elements/Tag/Tag';
+import videocontainerstyle from '../../elements/VideoContainer/VideoContainer.module.css';
 
-import {TagPreview} from "../../elements/Preview/Preview";
-import NewTagPopup from "../../elements/NewTagPopup/NewTagPopup";
-import PageTitle, {Line} from "../../elements/PageTitle/PageTitle";
-import VideoContainer from "../../elements/VideoContainer/VideoContainer";
+import {TagPreview} from '../../elements/Preview/Preview';
+import NewTagPopup from '../../elements/NewTagPopup/NewTagPopup';
+import PageTitle, {Line} from '../../elements/PageTitle/PageTitle';
+import VideoContainer from '../../elements/VideoContainer/VideoContainer';
 
 /**
  * Component for Category Page
@@ -40,33 +40,33 @@ class CategoryPage extends React.Component {
             <>
                 <PageTitle
                     title='Categories'
-                    subtitle={!this.state.selected ? this.state.loadedtags.length + " different Tags" : this.state.selected}/>
+                    subtitle={!this.state.selected ? this.state.loadedtags.length + ' different Tags' : this.state.selected}/>
 
                 <SideBar>
                     <SideBarTitle>Default Tags:</SideBarTitle>
                     <Tag viewbinding={{
                         changeRootElement: (e) => {
-                            this.loadTag(e.props.category)
+                            this.loadTag(e.props.category);
                         }
                     }}>All</Tag>
                     <Tag viewbinding={{
                         changeRootElement: (e) => {
-                            this.loadTag(e.props.category)
+                            this.loadTag(e.props.category);
                         }
                     }}>FullHd</Tag>
                     <Tag viewbinding={{
                         changeRootElement: (e) => {
-                            this.loadTag(e.props.category)
+                            this.loadTag(e.props.category);
                         }
                     }}>LowQuality</Tag>
                     <Tag viewbinding={{
                         changeRootElement: (e) => {
-                            this.loadTag(e.props.category)
+                            this.loadTag(e.props.category);
                         }
                     }}>HD</Tag>
                     <Line/>
                     <button data-testid='btnaddtag' className='btn btn-success' onClick={() => {
-                        this.setState({popupvisible: true})
+                        this.setState({popupvisible: true});
                     }}>Add a new Tag!
                     </button>
                 </SideBar></>
@@ -98,7 +98,7 @@ class CategoryPage extends React.Component {
                                     viewbinding={this.props.viewbinding}
                                     categorybinding={this.loadTag}/>
                             )) :
-                            "loading"}
+                            'loading'}
                     </div>
                 }
 
@@ -133,7 +133,7 @@ class CategoryPage extends React.Component {
         updateRequest.append('action', 'getMovies');
         updateRequest.append('tag', tag);
 
-        console.log("fetching data");
+        console.log('fetching data');
 
         // fetch all videos available
         fetch('/api/video.php', {method: 'POST', body: updateRequest})
@@ -144,7 +144,7 @@ class CategoryPage extends React.Component {
                     this.setState({selected: tag});
                 }))
             .catch(() => {
-                console.log("no connection to backend");
+                console.log('no connection to backend');
             });
     }
 
@@ -170,7 +170,7 @@ class CategoryPage extends React.Component {
                     this.setState({loadedtags: result});
                 }))
             .catch(() => {
-                console.log("no connection to backend");
+                console.log('no connection to backend');
             });
     }
 }
diff --git a/src/pages/CategoryPage/CategoryPage.test.js b/src/pages/CategoryPage/CategoryPage.test.js
index fdafef3..83ec8e4 100644
--- a/src/pages/CategoryPage/CategoryPage.test.js
+++ b/src/pages/CategoryPage/CategoryPage.test.js
@@ -1,6 +1,6 @@
-import {mount, shallow} from "enzyme";
-import React from "react";
-import CategoryPage from "./CategoryPage";
+import {mount, shallow} from 'enzyme';
+import React from 'react';
+import CategoryPage from './CategoryPage';
 
 describe('<CategoryPage/>', function () {
     it('renders without crashing ', function () {
@@ -9,7 +9,7 @@ describe('<CategoryPage/>', function () {
     });
 
     it('test tag fetch call', done => {
-        global.fetch = global.prepareFetchApi(["first", "second"]);
+        global.fetch = global.prepareFetchApi(['first', 'second']);
 
         const wrapper = shallow(<CategoryPage/>);
 
@@ -38,7 +38,7 @@ describe('<CategoryPage/>', function () {
 
         process.nextTick(() => {
             //callback to close window should have called
-            expect(message).toBe("no connection to backend");
+            expect(message).toBe('no connection to backend');
 
             global.fetch.mockClear();
             done();
@@ -48,14 +48,14 @@ describe('<CategoryPage/>', function () {
     it('test new tag popup', function () {
         const wrapper = mount(<CategoryPage/>);
 
-        expect(wrapper.find("NewTagPopup")).toHaveLength(0);
+        expect(wrapper.find('NewTagPopup')).toHaveLength(0);
         wrapper.find('[data-testid="btnaddtag"]').simulate('click');
         // newtagpopup should be showing now
-        expect(wrapper.find("NewTagPopup")).toHaveLength(1);
+        expect(wrapper.find('NewTagPopup')).toHaveLength(1);
 
         // click close button in modal
-        wrapper.find(".modal-header").find("button").simulate("click");
-        expect(wrapper.find("NewTagPopup")).toHaveLength(0);
+        wrapper.find('.modal-header').find('button').simulate('click');
+        expect(wrapper.find('NewTagPopup')).toHaveLength(0);
     });
 
     it('test setpage callback', done => {
@@ -66,17 +66,17 @@ describe('<CategoryPage/>', function () {
         wrapper.setState({
             loadedtags: [
                 {
-                    tag_name: "testname",
+                    tag_name: 'testname',
                     tag_id: 42
                 }
             ]
         });
 
-        wrapper.find("TagPreview").find("div").first().simulate("click");
+        wrapper.find('TagPreview').find('div').first().simulate('click');
 
         process.nextTick(() => {
             // expect callback to have loaded correct tag
-            expect(wrapper.state().selected).toBe("testname");
+            expect(wrapper.state().selected).toBe('testname');
 
             global.fetch.mockClear();
             done();
@@ -87,10 +87,10 @@ describe('<CategoryPage/>', function () {
         const wrapper = shallow(<CategoryPage/>);
 
         wrapper.setState({
-            selected: "test"
+            selected: 'test'
         });
         expect(wrapper.state().selected).not.toBeNull();
-        wrapper.find('[data-testid="backbtn"]').simulate("click");
+        wrapper.find('[data-testid="backbtn"]').simulate('click');
         expect(wrapper.state().selected).toBeNull();
     });
 
@@ -112,9 +112,9 @@ describe('<CategoryPage/>', function () {
         console.log(wrapper.debug());
 
         expect(func).toBeCalledTimes(0);
-        wrapper.find("SideBar").find("Tag").forEach(e => {
-            e.simulate("click");
-        })
+        wrapper.find('SideBar').find('Tag').forEach(e => {
+            e.simulate('click');
+        });
 
         expect(func).toBeCalledTimes(4);
 
diff --git a/src/pages/HomePage/HomePage.js b/src/pages/HomePage/HomePage.js
index 4192613..c9fddbd 100644
--- a/src/pages/HomePage/HomePage.js
+++ b/src/pages/HomePage/HomePage.js
@@ -1,17 +1,17 @@
-import React from "react";
-import SideBar, {SideBarItem, SideBarTitle} from "../../elements/SideBar/SideBar";
-import Tag from "../../elements/Tag/Tag";
-import VideoContainer from "../../elements/VideoContainer/VideoContainer";
+import React from 'react';
+import SideBar, {SideBarItem, SideBarTitle} from '../../elements/SideBar/SideBar';
+import Tag from '../../elements/Tag/Tag';
+import VideoContainer from '../../elements/VideoContainer/VideoContainer';
 
-import style from "./HomePage.module.css"
-import PageTitle, {Line} from "../../elements/PageTitle/PageTitle";
+import style from './HomePage.module.css';
+import PageTitle, {Line} from '../../elements/PageTitle/PageTitle';
 
 /**
  * The home page component showing on the initial pageload
  */
 class HomePage extends React.Component {
     /** keyword variable needed temporary store search keyword */
-    keyword = "";
+    keyword = '';
 
     constructor(props, context) {
         super(props, context);
@@ -24,7 +24,7 @@ class HomePage extends React.Component {
                 sdvideonr: null,
                 tagnr: null
             },
-            tag: "All",
+            subtitle: 'All Videos',
             data: [],
             selectionnr: 0
         };
@@ -32,7 +32,7 @@ class HomePage extends React.Component {
 
     componentDidMount() {
         // initial get of all videos
-        this.fetchVideoData("all");
+        this.fetchVideoData('All');
         this.fetchStartData();
     }
 
@@ -47,7 +47,7 @@ class HomePage extends React.Component {
         updateRequest.append('action', 'getMovies');
         updateRequest.append('tag', tag);
 
-        console.log("fetching data");
+        console.log('fetching data from' + tag);
 
         // fetch all videos available
         fetch('/api/video.php', {method: 'POST', body: updateRequest})
@@ -58,11 +58,12 @@ class HomePage extends React.Component {
                     });
                     this.setState({
                         data: result,
-                        selectionnr: result.length
+                        selectionnr: result.length,
+                        tag: tag + ' Videos'
                     });
                 }))
             .catch(() => {
-                console.log("no connection to backend");
+                console.log('no connection to backend');
             });
     }
 
@@ -88,7 +89,7 @@ class HomePage extends React.Component {
                     });
                 }))
             .catch(() => {
-                console.log("no connection to backend");
+                console.log('no connection to backend');
             });
     }
 
@@ -98,7 +99,7 @@ class HomePage extends React.Component {
      * @param keyword The keyword to search for
      */
     searchVideos(keyword) {
-        console.log("search called");
+        console.log('search called');
 
         const updateRequest = new FormData();
         updateRequest.append('action', 'getSearchKeyWord');
@@ -113,11 +114,12 @@ class HomePage extends React.Component {
                     });
                     this.setState({
                         data: result,
-                        selectionnr: result.length
+                        selectionnr: result.length,
+                        tag: 'Search result: ' + keyword
                     });
                 }))
             .catch(() => {
-                console.log("no connection to backend");
+                console.log('no connection to backend');
             });
     }
 
@@ -126,15 +128,15 @@ class HomePage extends React.Component {
             <>
                 <PageTitle
                     title='Home Page'
-                    subtitle={this.state.tag + " Videos - " + this.state.selectionnr}>
-                    <form className={"form-inline " + style.searchform} onSubmit={(e) => {
+                    subtitle={this.state.subtitle + ' - ' + this.state.selectionnr}>
+                    <form className={'form-inline ' + style.searchform} onSubmit={(e) => {
                         e.preventDefault();
                         this.searchVideos(this.keyword);
                     }}>
                         <input data-testid='searchtextfield' className='form-control mr-sm-2'
                                type='text' placeholder='Search'
                                onChange={(e) => {
-                                   this.keyword = e.target.value
+                                   this.keyword = e.target.value;
                                }}/>
                         <button data-testid='searchbtnsubmit' className='btn btn-success' type='submit'>Search</button>
                     </form>
@@ -149,10 +151,10 @@ class HomePage extends React.Component {
                     <SideBarItem><b>{this.state.sideinfo.tagnr}</b> different Tags!</SideBarItem>
                     <Line/>
                     <SideBarTitle>Default Tags:</SideBarTitle>
-                    <Tag viewbinding={this.props.viewbinding}>All</Tag>
-                    <Tag viewbinding={this.props.viewbinding}>FullHd</Tag>
-                    <Tag viewbinding={this.props.viewbinding}>LowQuality</Tag>
-                    <Tag viewbinding={this.props.viewbinding}>HD</Tag>
+                    <Tag onclick={() => this.fetchVideoData('All')}>All</Tag>
+                    <Tag onclick={() => this.fetchVideoData('FullHd')}>FullHd</Tag>
+                    <Tag onclick={() => this.fetchVideoData('LowQuality')}>LowQuality</Tag>
+                    <Tag onclick={() => this.fetchVideoData('HD')}>HD</Tag>
                 </SideBar>
                 {this.state.data.length !== 0 ?
                     <VideoContainer
diff --git a/src/pages/HomePage/HomePage.test.js b/src/pages/HomePage/HomePage.test.js
index 8c3cc15..e4a1554 100644
--- a/src/pages/HomePage/HomePage.test.js
+++ b/src/pages/HomePage/HomePage.test.js
@@ -1,7 +1,7 @@
-import {shallow} from "enzyme";
-import React from "react";
-import HomePage from "./HomePage";
-import VideoContainer from "../../elements/VideoContainer/VideoContainer";
+import {shallow} from 'enzyme';
+import React from 'react';
+import HomePage from './HomePage';
+import VideoContainer from '../../elements/VideoContainer/VideoContainer';
 
 describe('<HomePage/>', function () {
     it('renders without crashing ', function () {
@@ -12,7 +12,7 @@ describe('<HomePage/>', function () {
     it('test data insertion', function () {
         const wrapper = shallow(<HomePage/>);
 
-        expect(wrapper.find("VideoContainer")).toHaveLength(0);
+        expect(wrapper.find('VideoContainer')).toHaveLength(0);
 
         wrapper.setState({
             data: [
@@ -21,20 +21,20 @@ describe('<HomePage/>', function () {
         });
 
         // there shoud be loaded the Videocontainer element into dom after fetching videos correctly
-        expect(wrapper.find("VideoContainer")).toHaveLength(1);
+        expect(wrapper.find('VideoContainer')).toHaveLength(1);
     });
 
     it('test title and nr insertions', function () {
         const wrapper = shallow(<HomePage/>);
 
-        expect(wrapper.find("PageTitle").props().subtitle).toBe("All Videos - 0");
+        expect(wrapper.find('PageTitle').props().subtitle).toBe('All Videos - 0');
 
         wrapper.setState({
-            tag: "testtag",
+            subtitle: 'testsubtitle',
             selectionnr: 42
         });
 
-        expect(wrapper.find("PageTitle").props().subtitle).toBe("testtag Videos - 42");
+        expect(wrapper.find('PageTitle').props().subtitle).toBe('testsubtitle - 42');
     });
 
     it('test search field', done => {
@@ -43,7 +43,7 @@ describe('<HomePage/>', function () {
         const wrapper = shallow(<HomePage/>);
 
         wrapper.find('[data-testid="searchtextfield"]').simulate('change', {target: {value: 'testvalue'}});
-        wrapper.find('[data-testid="searchbtnsubmit"]').simulate("click");
+        wrapper.find('[data-testid="searchbtnsubmit"]').simulate('click');
 
         process.nextTick(() => {
             // state to be set correctly with response
@@ -60,7 +60,7 @@ describe('<HomePage/>', function () {
         const wrapper = shallow(<HomePage/>);
 
         const fakeEvent = {preventDefault: () => console.log('preventDefault')};
-        wrapper.find(".searchform").simulate('submit', fakeEvent);
+        wrapper.find('.searchform').simulate('submit', fakeEvent);
 
         expect(wrapper.state().selectionnr).toBe(0);
 
@@ -92,4 +92,34 @@ describe('<HomePage/>', function () {
             done();
         });
     });
+
+    it('test tag click', done => {
+        global.fetch = prepareFetchApi(['test1', 'test2']);
+
+        const wrapper = shallow(<HomePage/>);
+
+        const tags = wrapper.find('SideBar').dive().find('Tag');
+        let i = 0;
+
+        function testBtn(e) {
+            e.dive().simulate('click');
+
+            process.nextTick(() => {
+                process.nextTick(() => {
+                    // state to be set correctly with response
+                    console.log('see ifits same');
+                    expect(wrapper.state()).toMatchObject({data: ['test1', 'test2']});
+                    wrapper.state.data = [];
+                    i++;
+                    if (i >= tags.length) {
+                        done();
+                    } else {
+                        testBtn(tags.at(i));
+                    }
+                });
+            });
+        }
+
+        testBtn(tags.first());
+    });
 });
diff --git a/src/pages/Player/Player.js b/src/pages/Player/Player.js
index d8186a3..187bfad 100644
--- a/src/pages/Player/Player.js
+++ b/src/pages/Player/Player.js
@@ -1,11 +1,11 @@
-import React from "react";
-import style from "./Player.module.css"
+import React from 'react';
+import style from './Player.module.css';
 
 import {PlyrComponent} from 'plyr-react';
-import SideBar, {SideBarItem, SideBarTitle} from "../../elements/SideBar/SideBar";
-import Tag from "../../elements/Tag/Tag";
-import AddTagPopup from "../../elements/AddTagPopup/AddTagPopup";
-import PageTitle, {Line} from "../../elements/PageTitle/PageTitle";
+import SideBar, {SideBarItem, SideBarTitle} from '../../elements/SideBar/SideBar';
+import Tag from '../../elements/Tag/Tag';
+import AddTagPopup from '../../elements/AddTagPopup/AddTagPopup';
+import PageTitle, {Line} from '../../elements/PageTitle/PageTitle';
 
 
 /**
@@ -26,7 +26,7 @@ class Player extends React.Component {
             'settings', // Settings menu
             'airplay', // Airplay (currently Safari only)
             'download', // Show a download button with a link to either the current source or a custom URL you specify in your options
-            'fullscreen', // Toggle fullscreen
+            'fullscreen' // Toggle fullscreen
         ]
     };
 
@@ -66,28 +66,36 @@ class Player extends React.Component {
         fetch('/api/tags.php', {method: 'POST', body: updateRequest})
             .then((response) => response.json()
                 .then((result) => {
-                    if (result.result !== "success") {
-                        console.error("error occured while writing to db -- todo error handling");
+                    if (result.result !== 'success') {
+                        console.error('error occured while writing to db -- todo error handling');
                         console.error(result.result);
                     } else {
-                        // update tags if successful
-                        let array = [...this.state.suggesttag]; // make a separate copy of the array
-                        const index = array.map(function (e) {
-                            return e.tag_id;
-                        }).indexOf(tag_id);
+                        // check if tag has already been added
+                        const tagindwx = this.state.tags.map(function (e) {
+                            return e.tag_name;
+                        }).indexOf(tag_name);
 
-                        // check if tag is available in quickadds
-                        if (index !== -1) {
-                            array.splice(index, 1);
+                        // only add tag if it isn't already there
+                        if (tagindwx === -1) {
+                            // update tags if successful
+                            let array = [...this.state.suggesttag]; // make a separate copy of the array (because of setState)
+                            const quickaddindex = this.state.suggesttag.map(function (e) {
+                                return e.tag_id;
+                            }).indexOf(tag_id);
 
-                            this.setState({
-                                tags: [...this.state.tags, {tag_name: tag_name}],
-                                suggesttag: array
-                            });
-                        } else {
-                            this.setState({
-                                tags: [...this.state.tags, {tag_name: tag_name}]
-                            });
+                            // check if tag is available in quickadds
+                            if (quickaddindex !== -1) {
+                                array.splice(quickaddindex, 1);
+
+                                this.setState({
+                                    tags: [...this.state.tags, {tag_name: tag_name}],
+                                    suggesttag: array
+                                });
+                            } else {
+                                this.setState({
+                                    tags: [...this.state.tags, {tag_name: tag_name}]
+                                });
+                            }
                         }
                     }
                 }));
@@ -170,7 +178,7 @@ class Player extends React.Component {
                         <button className='btn btn-info' onClick={() => this.setState({popupvisible: true})}>Give this
                                                                                                              Video a Tag
                         </button>
-                        <button className='btn btn-danger' onClick={() => {this.deleteVideo()}}>Delete Video</button>
+                        <button className='btn btn-danger' onClick={() => {this.deleteVideo();}}>Delete Video</button>
                     </div>
                 </div>
                 <button className={style.closebutton} onClick={() => this.closebtn()}>Close</button>
@@ -200,7 +208,7 @@ class Player extends React.Component {
                             {
                                 src: result.movie_url,
                                 type: 'video/mp4',
-                                size: 1080,
+                                size: 1080
                             }
                         ],
                         poster: result.thumbnail
@@ -229,11 +237,11 @@ class Player extends React.Component {
         fetch('/api/video.php', {method: 'POST', body: updateRequest})
             .then((response) => response.json()
                 .then((result) => {
-                    if (result.result === "success") {
+                    if (result.result === 'success') {
                         // likes +1 --> avoid reload of all data
-                        this.setState({likes: this.state.likes + 1})
+                        this.setState({likes: this.state.likes + 1});
                     } else {
-                        console.error("an error occured while liking");
+                        console.error('an error occured while liking');
                         console.error(result);
                     }
                 }));
@@ -258,11 +266,11 @@ class Player extends React.Component {
         fetch('/api/video.php', {method: 'POST', body: updateRequest})
             .then((response) => response.json()
                 .then((result) => {
-                    if (result.result === "success") {
+                    if (result.result === 'success') {
                         // return to last element if successful
                         this.props.viewbinding.returnToLastElement();
                     } else {
-                        console.error("an error occured while liking");
+                        console.error('an error occured while liking');
                         console.error(result);
                     }
                 }));
diff --git a/src/pages/Player/Player.test.js b/src/pages/Player/Player.test.js
index eac9e4e..a0d18ab 100644
--- a/src/pages/Player/Player.test.js
+++ b/src/pages/Player/Player.test.js
@@ -1,6 +1,6 @@
-import {shallow} from "enzyme";
-import React from "react";
-import Player from "./Player";
+import {shallow} from 'enzyme';
+import React from 'react';
+import Player from './Player';
 
 describe('<Player/>', function () {
     it('renders without crashing ', function () {
@@ -16,11 +16,11 @@ describe('<Player/>', function () {
                 {
                     src: '/tstvid.mp4',
                     type: 'video/mp4',
-                    size: 1080,
+                    size: 1080
                 }
             ]
         });
-        expect(wrapper.find("r")).toHaveLength(1);
+        expect(wrapper.find('r')).toHaveLength(1);
     });
 
     function simulateLikeButtonClick() {
@@ -28,7 +28,7 @@ describe('<Player/>', function () {
 
         // initial fetch for getting movie data
         expect(global.fetch).toHaveBeenCalledTimes(1);
-        wrapper.find('.videoactions').find("button").first().simulate('click');
+        wrapper.find('.videoactions').find('button').first().simulate('click');
         // fetch for liking
         expect(global.fetch).toHaveBeenCalledTimes(2);
 
@@ -69,20 +69,20 @@ describe('<Player/>', function () {
 
     it('show tag popup', function () {
         const wrapper = shallow(<Player/>);
-        expect(wrapper.find("AddTagPopup")).toHaveLength(0);
+        expect(wrapper.find('AddTagPopup')).toHaveLength(0);
         // todo dynamic button find without index
-        wrapper.find('.videoactions').find("button").at(1).simulate('click');
+        wrapper.find('.videoactions').find('button').at(1).simulate('click');
         // addtagpopup should be showing now
-        expect(wrapper.find("AddTagPopup")).toHaveLength(1);
+        expect(wrapper.find('AddTagPopup')).toHaveLength(1);
     });
 
     it('test delete button', done => {
         const wrapper = shallow(<Player viewbinding={{
             returnToLastElement: jest.fn()
         }}/>);
-        global.fetch = prepareFetchApi({result: "success"});
+        global.fetch = prepareFetchApi({result: 'success'});
 
-        wrapper.find('.videoactions').find("button").at(2).simulate('click');
+        wrapper.find('.videoactions').find('button').at(2).simulate('click');
 
         process.nextTick(() => {
             // refetch is called so fetch called 3 times
@@ -101,7 +101,7 @@ describe('<Player/>', function () {
         wrapper.setProps({
             viewbinding: {
                 returnToLastElement: () => {
-                    func()
+                    func();
                 }
             }
         });
@@ -115,7 +115,7 @@ describe('<Player/>', function () {
     it('inserts Tags correctly', function () {
         const wrapper = shallow(<Player/>);
 
-        expect(wrapper.find("Tag")).toHaveLength(0);
+        expect(wrapper.find('Tag')).toHaveLength(0);
 
         wrapper.setState({
             tags: [
@@ -124,7 +124,7 @@ describe('<Player/>', function () {
             ]
         });
 
-        expect(wrapper.find("Tag")).toHaveLength(2);
+        expect(wrapper.find('Tag')).toHaveLength(2);
     });
 
     it('inserts tag quickadd correctly', function () {
@@ -137,7 +137,7 @@ describe('<Player/>', function () {
         global.fetch = prepareFetchApi({result: 'success'});
 
         // render tag subcomponent
-        const tag = wrapper.find("Tag").first().dive();
+        const tag = wrapper.find('Tag').first().dive();
         tag.simulate('click');
 
         process.nextTick(() => {
@@ -155,7 +155,7 @@ describe('<Player/>', function () {
         global.console.error = jest.fn();
 
         // render tag subcomponent
-        const tag = wrapper.find("Tag").first().dive();
+        const tag = wrapper.find('Tag').first().dive();
         tag.simulate('click');
 
         process.nextTick(() => {
@@ -169,15 +169,15 @@ describe('<Player/>', function () {
     function generatetag() {
         const wrapper = shallow(<Player/>);
 
-        expect(wrapper.find("Tag")).toHaveLength(0);
+        expect(wrapper.find('Tag')).toHaveLength(0);
 
         wrapper.setState({
             suggesttag: [
-                {tag_name: 'first', tag_id: 1},
+                {tag_name: 'first', tag_id: 1}
             ]
         });
 
-        expect(wrapper.find("Tag")).toHaveLength(1);
+        expect(wrapper.find('Tag')).toHaveLength(1);
 
         return wrapper;
     }
diff --git a/src/pages/RandomPage/RandomPage.js b/src/pages/RandomPage/RandomPage.js
index 8613629..0502817 100644
--- a/src/pages/RandomPage/RandomPage.js
+++ b/src/pages/RandomPage/RandomPage.js
@@ -1,9 +1,9 @@
-import React from "react";
-import style from "./RandomPage.module.css"
-import SideBar, {SideBarTitle} from "../../elements/SideBar/SideBar";
-import Tag from "../../elements/Tag/Tag";
-import PageTitle from "../../elements/PageTitle/PageTitle";
-import VideoContainer from "../../elements/VideoContainer/VideoContainer";
+import React from 'react';
+import style from './RandomPage.module.css';
+import SideBar, {SideBarTitle} from '../../elements/SideBar/SideBar';
+import Tag from '../../elements/Tag/Tag';
+import PageTitle from '../../elements/PageTitle/PageTitle';
+import VideoContainer from '../../elements/VideoContainer/VideoContainer';
 
 /**
  * Randompage shuffles random viedeopreviews and provides a shuffle btn
@@ -81,7 +81,7 @@ class RandomPage extends React.Component {
                     });
                 }))
             .catch(() => {
-                console.log("no connection to backend");
+                console.log('no connection to backend');
             });
     }
 }
diff --git a/src/pages/RandomPage/RandomPage.test.js b/src/pages/RandomPage/RandomPage.test.js
index afb8c61..a2d6ea4 100644
--- a/src/pages/RandomPage/RandomPage.test.js
+++ b/src/pages/RandomPage/RandomPage.test.js
@@ -1,6 +1,6 @@
-import {shallow} from "enzyme";
-import React from "react";
-import RandomPage from "./RandomPage";
+import {shallow} from 'enzyme';
+import React from 'react';
+import RandomPage from './RandomPage';
 
 describe('<RandomPage/>', function () {
     it('renders without crashing ', function () {
@@ -28,7 +28,7 @@ describe('<RandomPage/>', function () {
             ]
         });
 
-        wrapper.find(".btnshuffle").simulate("click");
+        wrapper.find('.btnshuffle').simulate('click');
 
         expect(global.fetch).toBeCalledTimes(2);
     });
@@ -38,11 +38,11 @@ describe('<RandomPage/>', function () {
 
         wrapper.setState({
             tags: [
-                {tag_name: "test1"},
-                {tag_name: "test2"}
+                {tag_name: 'test1'},
+                {tag_name: 'test2'}
             ]
         });
 
-        expect(wrapper.find("Tag")).toHaveLength(2);
+        expect(wrapper.find('Tag')).toHaveLength(2);
     });
 });
diff --git a/src/pages/SettingsPage/GeneralSettings.js b/src/pages/SettingsPage/GeneralSettings.js
index a3d8e90..2ab51b7 100644
--- a/src/pages/SettingsPage/GeneralSettings.js
+++ b/src/pages/SettingsPage/GeneralSettings.js
@@ -1,10 +1,10 @@
-import React from "react";
-import {Button, Col, Form} from "react-bootstrap";
-import style from "./GeneralSettings.module.css"
-import GlobalInfos from "../../GlobalInfos";
-import InfoHeaderItem from "../../elements/InfoHeaderItem/InfoHeaderItem";
-import {faArchive, faBalanceScaleLeft, faRulerVertical} from "@fortawesome/free-solid-svg-icons";
-import {faAddressCard} from "@fortawesome/free-regular-svg-icons";
+import React from 'react';
+import {Button, Col, Form} from 'react-bootstrap';
+import style from './GeneralSettings.module.css';
+import GlobalInfos from '../../GlobalInfos';
+import InfoHeaderItem from '../../elements/InfoHeaderItem/InfoHeaderItem';
+import {faArchive, faBalanceScaleLeft, faRulerVertical} from '@fortawesome/free-solid-svg-icons';
+import {faAddressCard} from '@fortawesome/free-regular-svg-icons';
 
 /**
  * Component for Generalsettings tag on Settingspage
@@ -18,10 +18,10 @@ class GeneralSettings extends React.Component {
             passwordsupport: false,
             tmdbsupport: null,
 
-            videopath: "",
-            tvshowpath: "",
-            mediacentername: "",
-            password: "",
+            videopath: '',
+            tvshowpath: '',
+            mediacentername: '',
+            password: '',
 
             videonr: null,
             dbsize: null,
@@ -44,7 +44,7 @@ class GeneralSettings extends React.Component {
                                     subtext='Videos in Gravity'
                                     icon={faArchive}/>
                     <InfoHeaderItem backColor='yellow'
-                                    text={this.state.dbsize !== undefined ? this.state.dbsize + " MB" : undefined}
+                                    text={this.state.dbsize !== undefined ? this.state.dbsize + ' MB' : undefined}
                                     subtext='Database size'
                                     icon={faRulerVertical}/>
                     <InfoHeaderItem backColor='green'
@@ -83,7 +83,7 @@ class GeneralSettings extends React.Component {
                             label='Enable Password support'
                             checked={this.state.passwordsupport}
                             onChange={() => {
-                                this.setState({passwordsupport: !this.state.passwordsupport})
+                                this.setState({passwordsupport: !this.state.passwordsupport});
                             }}
                         />
 
@@ -102,7 +102,7 @@ class GeneralSettings extends React.Component {
                             label='Enable TMDB video grabbing support'
                             checked={this.state.tmdbsupport}
                             onChange={() => {
-                                this.setState({tmdbsupport: !this.state.tmdbsupport})
+                                this.setState({tmdbsupport: !this.state.tmdbsupport});
                             }}
                         />
 
@@ -168,21 +168,21 @@ class GeneralSettings extends React.Component {
         const updateRequest = new FormData();
         updateRequest.append('action', 'saveGeneralSettings');
 
-        updateRequest.append('password', this.state.passwordsupport ? this.state.password : "-1");
+        updateRequest.append('password', this.state.passwordsupport ? this.state.password : '-1');
         updateRequest.append('videopath', this.state.videopath);
         updateRequest.append('tvshowpath', this.state.tvshowpath);
         updateRequest.append('mediacentername', this.state.mediacentername);
-        updateRequest.append("tmdbsupport", this.state.tmdbsupport);
-        updateRequest.append("darkmodeenabled", GlobalInfos.isDarkTheme().toString());
+        updateRequest.append('tmdbsupport', this.state.tmdbsupport);
+        updateRequest.append('darkmodeenabled', GlobalInfos.isDarkTheme().toString());
 
         fetch('/api/settings.php', {method: 'POST', body: updateRequest})
             .then((response) => response.json()
                 .then((result) => {
                     if (result.success) {
-                        console.log("successfully saved settings");
+                        console.log('successfully saved settings');
                         // todo 2020-07-10: popup success
                     } else {
-                        console.log("failed to save settings");
+                        console.log('failed to save settings');
                         // todo 2020-07-10: popup error
                     }
                 }));
diff --git a/src/pages/SettingsPage/GeneralSettings.test.js b/src/pages/SettingsPage/GeneralSettings.test.js
index 1a66177..0d7a0f4 100644
--- a/src/pages/SettingsPage/GeneralSettings.test.js
+++ b/src/pages/SettingsPage/GeneralSettings.test.js
@@ -1,7 +1,7 @@
-import {shallow} from "enzyme";
-import React from "react";
-import GeneralSettings from "./GeneralSettings";
-import GlobalInfos from "../../GlobalInfos";
+import {shallow} from 'enzyme';
+import React from 'react';
+import GeneralSettings from './GeneralSettings';
+import GlobalInfos from '../../GlobalInfos';
 
 describe('<GeneralSettings/>', function () {
     it('renders without crashing ', function () {
@@ -12,10 +12,10 @@ describe('<GeneralSettings/>', function () {
     it('test password hide/show switchbutton', function () {
         const wrapper = shallow(<GeneralSettings/>);
 
-        expect(wrapper.find("[data-testid='passwordfield']")).toHaveLength(0);
-        wrapper.find("FormCheck").findWhere(it => it.props().label === "Enable Password support").simulate("change");
+        expect(wrapper.find('[data-testid=\'passwordfield\']')).toHaveLength(0);
+        wrapper.find('FormCheck').findWhere(it => it.props().label === 'Enable Password support').simulate('change');
 
-        expect(wrapper.find("[data-testid='passwordfield']")).toHaveLength(1);
+        expect(wrapper.find('[data-testid=\'passwordfield\']')).toHaveLength(1);
     });
 
     it('test theme switchbutton', function () {
@@ -23,7 +23,7 @@ describe('<GeneralSettings/>', function () {
 
         GlobalInfos.enableDarkTheme(false);
         expect(GlobalInfos.isDarkTheme()).toBe(false);
-        wrapper.find("[data-testid='darktheme-switch']").simulate("change");
+        wrapper.find('[data-testid=\'darktheme-switch\']').simulate('change');
         expect(GlobalInfos.isDarkTheme()).toBe(true);
     });
 
@@ -34,7 +34,7 @@ describe('<GeneralSettings/>', function () {
 
         expect(global.fetch).toBeCalledTimes(0);
         const fakeEvent = {preventDefault: () => console.log('preventDefault')};
-        wrapper.find("[data-testid='mainformsettings']").simulate("submit", fakeEvent);
+        wrapper.find('[data-testid=\'mainformsettings\']').simulate('submit', fakeEvent);
         expect(global.fetch).toBeCalledTimes(1);
 
         process.nextTick(() => {
@@ -52,7 +52,7 @@ describe('<GeneralSettings/>', function () {
 
         expect(global.fetch).toBeCalledTimes(0);
         const fakeEvent = {preventDefault: () => console.log('preventDefault')};
-        wrapper.find("[data-testid='mainformsettings']").simulate("submit", fakeEvent);
+        wrapper.find('[data-testid=\'mainformsettings\']').simulate('submit', fakeEvent);
         expect(global.fetch).toBeCalledTimes(1);
 
         process.nextTick(() => {
@@ -66,39 +66,39 @@ describe('<GeneralSettings/>', function () {
     it('test videopath change event', function () {
         const wrapper = shallow(<GeneralSettings/>);
 
-        expect(wrapper.state().videopath).not.toBe("test");
+        expect(wrapper.state().videopath).not.toBe('test');
 
-        const event = {target: {name: "pollName", value: "test"}};
-        wrapper.find("[data-testid='videpathform']").find("FormControl").simulate("change", event);
-        expect(wrapper.state().videopath).toBe("test");
+        const event = {target: {name: 'pollName', value: 'test'}};
+        wrapper.find('[data-testid=\'videpathform\']').find('FormControl').simulate('change', event);
+        expect(wrapper.state().videopath).toBe('test');
     });
 
     it('test tvshowpath change event', function () {
         const wrapper = shallow(<GeneralSettings/>);
 
-        const event = {target: {name: "pollName", value: "test"}};
-        expect(wrapper.state().tvshowpath).not.toBe("test");
-        wrapper.find("[data-testid='tvshowpath']").find("FormControl").simulate("change", event);
-        expect(wrapper.state().tvshowpath).toBe("test");
+        const event = {target: {name: 'pollName', value: 'test'}};
+        expect(wrapper.state().tvshowpath).not.toBe('test');
+        wrapper.find('[data-testid=\'tvshowpath\']').find('FormControl').simulate('change', event);
+        expect(wrapper.state().tvshowpath).toBe('test');
     });
 
     it('test mediacentername-form change event', function () {
         const wrapper = shallow(<GeneralSettings/>);
 
-        const event = {target: {name: "pollName", value: "test"}};
-        expect(wrapper.state().mediacentername).not.toBe("test");
-        wrapper.find("[data-testid='nameform']").find("FormControl").simulate("change", event);
-        expect(wrapper.state().mediacentername).toBe("test");
+        const event = {target: {name: 'pollName', value: 'test'}};
+        expect(wrapper.state().mediacentername).not.toBe('test');
+        wrapper.find('[data-testid=\'nameform\']').find('FormControl').simulate('change', event);
+        expect(wrapper.state().mediacentername).toBe('test');
     });
 
     it('test password-form change event', function () {
         const wrapper = shallow(<GeneralSettings/>);
         wrapper.setState({passwordsupport: true});
 
-        const event = {target: {name: "pollName", value: "test"}};
-        expect(wrapper.state().password).not.toBe("test");
-        wrapper.find("[data-testid='passwordfield']").find("FormControl").simulate("change", event);
-        expect(wrapper.state().password).toBe("test");
+        const event = {target: {name: 'pollName', value: 'test'}};
+        expect(wrapper.state().password).not.toBe('test');
+        wrapper.find('[data-testid=\'passwordfield\']').find('FormControl').simulate('change', event);
+        expect(wrapper.state().password).toBe('test');
     });
 
     it('test tmdbsupport change event', function () {
@@ -106,12 +106,12 @@ describe('<GeneralSettings/>', function () {
         wrapper.setState({tmdbsupport: true});
 
         expect(wrapper.state().tmdbsupport).toBe(true);
-        wrapper.find("[data-testid='tmdb-switch']").simulate("change");
+        wrapper.find('[data-testid=\'tmdb-switch\']').simulate('change');
         expect(wrapper.state().tmdbsupport).toBe(false);
     });
 
     it('test insertion of 4 infoheaderitems', function () {
         const wrapper = shallow(<GeneralSettings/>);
-        expect(wrapper.find("InfoHeaderItem").length).toBe(4);
+        expect(wrapper.find('InfoHeaderItem').length).toBe(4);
     });
 });
diff --git a/src/pages/SettingsPage/MovieSettings.js b/src/pages/SettingsPage/MovieSettings.js
index 5a314fe..cf6c9fc 100644
--- a/src/pages/SettingsPage/MovieSettings.js
+++ b/src/pages/SettingsPage/MovieSettings.js
@@ -1,5 +1,5 @@
-import React from "react";
-import style from "./MovieSettings.module.css"
+import React from 'react';
+import style from './MovieSettings.module.css';
 
 /**
  * Component for MovieSettings on Settingspage
@@ -28,10 +28,10 @@ class MovieSettings extends React.Component {
             <>
                 <button disabled={this.state.startbtnDisabled}
                         className='btn btn-success'
-                        onClick={() => {this.startReindex()}}>Reindex Movie
+                        onClick={() => {this.startReindex();}}>Reindex Movie
                 </button>
                 <button className='btn btn-warning'
-                        onClick={() => {this.cleanupGravity()}}>Cleanup Gravity
+                        onClick={() => {this.cleanupGravity();}}>Cleanup Gravity
                 </button>
                 <div className={style.indextextarea}>{this.state.text.map(m => (
                     <div className='textarea-element'>{m}</div>
@@ -49,23 +49,23 @@ class MovieSettings extends React.Component {
 
         this.setState({startbtnDisabled: true});
 
-        console.log("starting");
+        console.log('starting');
         const request = new FormData();
-        request.append("action", "startReindex");
+        request.append('action', 'startReindex');
         // fetch all videos available
         fetch('/api/settings.php', {method: 'POST', body: request})
             .then((response) => response.json()
                 .then((result) => {
                     console.log(result);
                     if (result.success) {
-                        console.log("started successfully");
+                        console.log('started successfully');
                     } else {
-                        console.log("error, reindex already running");
+                        console.log('error, reindex already running');
                         this.setState({startbtnDisabled: true});
                     }
                 }))
             .catch(() => {
-                console.log("no connection to backend");
+                console.log('no connection to backend');
             });
         if (this.myinterval) {
             clearInterval(this.myinterval);
@@ -78,7 +78,7 @@ class MovieSettings extends React.Component {
      */
     updateStatus = () => {
         const request = new FormData();
-        request.append("action", "getStatusMessage");
+        request.append('action', 'getStatusMessage');
 
         fetch('/api/settings.php', {method: 'POST', body: request})
             .then((response) => response.json()
@@ -88,7 +88,7 @@ class MovieSettings extends React.Component {
                         // todo 2020-07-4: scroll to bottom of div here
                         this.setState({
                             // insert a string for each line
-                            text: [...result.message.split("\n"),
+                            text: [...result.message.split('\n'),
                                 ...this.state.text]
                         });
                     } else {
@@ -99,7 +99,7 @@ class MovieSettings extends React.Component {
                     }
                 }))
             .catch(() => {
-                console.log("no connection to backend");
+                console.log('no connection to backend');
             });
     };
 
@@ -108,7 +108,7 @@ class MovieSettings extends React.Component {
      */
     cleanupGravity() {
         const request = new FormData();
-        request.append("action", "cleanupGravity");
+        request.append('action', 'cleanupGravity');
 
         fetch('/api/settings.php', {method: 'POST', body: request})
             .then((response) => response.text()
@@ -118,7 +118,7 @@ class MovieSettings extends React.Component {
                     });
                 }))
             .catch(() => {
-                console.log("no connection to backend");
+                console.log('no connection to backend');
             });
     }
 }
diff --git a/src/pages/SettingsPage/MovieSettings.test.js b/src/pages/SettingsPage/MovieSettings.test.js
index 0a4e9f4..f7bc706 100644
--- a/src/pages/SettingsPage/MovieSettings.test.js
+++ b/src/pages/SettingsPage/MovieSettings.test.js
@@ -1,6 +1,6 @@
-import {shallow} from "enzyme";
-import React from "react";
-import MovieSettings from "./MovieSettings";
+import {shallow} from 'enzyme';
+import React from 'react';
+import MovieSettings from './MovieSettings';
 
 describe('<MovieSettings/>', function () {
     it('renders without crashing ', function () {
@@ -13,19 +13,19 @@ describe('<MovieSettings/>', function () {
 
         wrapper.setState({
             text: [
-                "firstline",
-                "secline"
+                'firstline',
+                'secline'
             ]
         });
 
-        expect(wrapper.find(".indextextarea").find(".textarea-element")).toHaveLength(2);
+        expect(wrapper.find('.indextextarea').find('.textarea-element')).toHaveLength(2);
     });
 
     it('test simulate reindex', function () {
         global.fetch = global.prepareFetchApi({success: true});
         const wrapper = shallow(<MovieSettings/>);
 
-        wrapper.find("button").findWhere(e => e.text() === "Reindex Movie" && e.type() === "button").simulate("click");
+        wrapper.find('button').findWhere(e => e.text() === 'Reindex Movie' && e.type() === 'button').simulate('click');
 
         // initial send of reindex request to server
         expect(global.fetch).toBeCalledTimes(1);
@@ -35,7 +35,7 @@ describe('<MovieSettings/>', function () {
         global.fetch = global.prepareFetchApi({success: false});
         const wrapper = shallow(<MovieSettings/>);
 
-        wrapper.find("button").findWhere(e => e.text() === "Reindex Movie" && e.type() === "button").simulate("click");
+        wrapper.find('button').findWhere(e => e.text() === 'Reindex Movie' && e.type() === 'button').simulate('click');
 
         // initial send of reindex request to server
         expect(global.fetch).toBeCalledTimes(1);
@@ -52,7 +52,7 @@ describe('<MovieSettings/>', function () {
     it('content available received and in state', done => {
         global.fetch = global.prepareFetchApi({
             contentAvailable: true,
-            message: "firstline\nsecondline"
+            message: 'firstline\nsecondline'
         });
         const wrapper = shallow(<MovieSettings/>);
         wrapper.instance().updateStatus();
@@ -60,8 +60,8 @@ describe('<MovieSettings/>', function () {
         process.nextTick(() => {
             expect(wrapper.state()).toMatchObject({
                 text: [
-                    "firstline",
-                    "secondline"
+                    'firstline',
+                    'secondline'
                 ]
             });
 
@@ -70,7 +70,7 @@ describe('<MovieSettings/>', function () {
         });
     });
 
-    it('test reindex with no content available', done=> {
+    it('test reindex with no content available', done => {
         global.fetch = global.prepareFetchApi({
             contentAvailable: false
         });
@@ -93,11 +93,11 @@ describe('<MovieSettings/>', function () {
     });
 
     it('test simulate gravity cleanup', done => {
-        global.fetch = global.prepareFetchApi("mmi");
+        global.fetch = global.prepareFetchApi('mmi');
         const wrapper = shallow(<MovieSettings/>);
         wrapper.instance().setState = jest.fn(),
 
-        wrapper.find("button").findWhere(e => e.text() === "Cleanup Gravity" && e.type() === "button").simulate("click");
+            wrapper.find('button').findWhere(e => e.text() === 'Cleanup Gravity' && e.type() === 'button').simulate('click');
 
         // initial send of reindex request to server
         expect(global.fetch).toBeCalledTimes(1);
diff --git a/src/pages/SettingsPage/SettingsPage.js b/src/pages/SettingsPage/SettingsPage.js
index 75f404b..130f3fa 100644
--- a/src/pages/SettingsPage/SettingsPage.js
+++ b/src/pages/SettingsPage/SettingsPage.js
@@ -1,8 +1,8 @@
-import React from "react";
-import MovieSettings from "./MovieSettings";
-import GeneralSettings from "./GeneralSettings";
-import style from "./SettingsPage.module.css"
-import GlobalInfos from "../../GlobalInfos";
+import React from 'react';
+import MovieSettings from './MovieSettings';
+import GeneralSettings from './GeneralSettings';
+import style from './SettingsPage.module.css';
+import GlobalInfos from '../../GlobalInfos';
 
 /**
  * The Settingspage handles all kinds of settings for the mediacenter
@@ -13,7 +13,7 @@ class SettingsPage extends React.Component {
         super(props, context);
 
         this.state = {
-            currentpage: "general"
+            currentpage: 'general'
         };
     }
 
@@ -23,14 +23,14 @@ class SettingsPage extends React.Component {
      */
     getContent() {
         switch (this.state.currentpage) {
-            case "general":
+            case 'general':
                 return <GeneralSettings/>;
-            case "movies":
+            case 'movies':
                 return <MovieSettings/>;
-            case "tv":
+            case 'tv':
                 return <span/>; // todo this page
             default:
-                return "unknown button clicked";
+                return 'unknown button clicked';
         }
     }
 
@@ -40,13 +40,13 @@ class SettingsPage extends React.Component {
             <div>
                 <div className={style.SettingsSidebar + ' ' + themestyle.secbackground}>
                     <div className={style.SettingsSidebarTitle + ' ' + themestyle.lighttextcolor}>Settings</div>
-                    <div onClick={() => this.setState({currentpage: "general"})}
+                    <div onClick={() => this.setState({currentpage: 'general'})}
                          className={style.SettingSidebarElement}>General
                     </div>
-                    <div onClick={() => this.setState({currentpage: "movies"})}
+                    <div onClick={() => this.setState({currentpage: 'movies'})}
                          className={style.SettingSidebarElement}>Movies
                     </div>
-                    <div onClick={() => this.setState({currentpage: "tv"})}
+                    <div onClick={() => this.setState({currentpage: 'tv'})}
                          className={style.SettingSidebarElement}>TV Shows
                     </div>
                 </div>
diff --git a/src/pages/SettingsPage/SettingsPage.test.js b/src/pages/SettingsPage/SettingsPage.test.js
index 8a45deb..4c26bd8 100644
--- a/src/pages/SettingsPage/SettingsPage.test.js
+++ b/src/pages/SettingsPage/SettingsPage.test.js
@@ -1,6 +1,6 @@
-import {shallow} from "enzyme";
-import React from "react";
-import SettingsPage from "./SettingsPage";
+import {shallow} from 'enzyme';
+import React from 'react';
+import SettingsPage from './SettingsPage';
 
 describe('<RandomPage/>', function () {
     it('renders without crashing ', function () {
@@ -11,30 +11,30 @@ describe('<RandomPage/>', function () {
     it('simulate topic clicka', function () {
         const wrapper = shallow(<SettingsPage/>);
 
-        simulateSideBarClick("General", wrapper);
-        expect(wrapper.state().currentpage).toBe("general");
-        expect(wrapper.find(".SettingsContent").find("GeneralSettings")).toHaveLength(1);
+        simulateSideBarClick('General', wrapper);
+        expect(wrapper.state().currentpage).toBe('general');
+        expect(wrapper.find('.SettingsContent').find('GeneralSettings')).toHaveLength(1);
 
-        simulateSideBarClick("Movies", wrapper);
-        expect(wrapper.state().currentpage).toBe("movies");
-        expect(wrapper.find(".SettingsContent").find("MovieSettings")).toHaveLength(1);
+        simulateSideBarClick('Movies', wrapper);
+        expect(wrapper.state().currentpage).toBe('movies');
+        expect(wrapper.find('.SettingsContent').find('MovieSettings')).toHaveLength(1);
 
-        simulateSideBarClick("TV Shows", wrapper);
-        expect(wrapper.state().currentpage).toBe("tv");
-        expect(wrapper.find(".SettingsContent").find("span")).toHaveLength(1);
+        simulateSideBarClick('TV Shows', wrapper);
+        expect(wrapper.state().currentpage).toBe('tv');
+        expect(wrapper.find('.SettingsContent').find('span')).toHaveLength(1);
     });
 
     function simulateSideBarClick(name, wrapper) {
-        wrapper.find(".SettingSidebarElement").findWhere(it =>
+        wrapper.find('.SettingSidebarElement').findWhere(it =>
             it.text() === name &&
-            it.type() === "div").simulate("click");
+            it.type() === 'div').simulate('click');
     }
 
     it('simulate unknown topic', function () {
         const wrapper = shallow(<SettingsPage/>);
-        wrapper.setState({currentpage: "unknown"});
+        wrapper.setState({currentpage: 'unknown'});
 
-        expect(wrapper.find(".SettingsContent").text()).toBe("unknown button clicked");
+        expect(wrapper.find('.SettingsContent').text()).toBe('unknown button clicked');
 
     });
 });
diff --git a/src/setupTests.js b/src/setupTests.js
index ed58c8b..80a5a3b 100644
--- a/src/setupTests.js
+++ b/src/setupTests.js
@@ -21,13 +21,13 @@ global.prepareFetchApi = (response) => {
         text: () => mockJsonPromise
     });
     return (jest.fn().mockImplementation(() => mockFetchPromise));
-}
+};
 
 /**
  * prepares a failing virtual fetch api call
  * @returns {jest.Mock<any, any>} a jest moch function simulating a failing fetch call
  */
 global.prepareFailingFetchApi = () => {
-    const mockFetchPromise = Promise.reject("myreason");
+    const mockFetchPromise = Promise.reject('myreason');
     return (jest.fn().mockImplementation(() => mockFetchPromise));
-}
+};