diff --git a/api/Database.php b/api/Database.php
index 6a9a0d1..583289f 100644
--- a/api/Database.php
+++ b/api/Database.php
@@ -8,7 +8,7 @@ class Database
     private string $servername = "192.168.0.30";
     private string $username = "root";
     private string $password = "1qayxsw2";
-    private string $dbname = "hub";
+    private string $dbname = "mediacenter";
 
     // The db connection is established in the private constructor.
     private function __construct()
diff --git a/api/videoload.php b/api/videoload.php
index fedfb38..9929924 100755
--- a/api/videoload.php
+++ b/api/videoload.php
@@ -37,10 +37,10 @@ if (isset($_POST['action'])) {
             $ids = [];
             while ($r = mysqli_fetch_assoc($result)) {
                 array_push($return->rows, $r);
-                array_push($ids,"video_tags.video_id=".$r['movie_id']);
+                array_push($ids, "video_tags.video_id=" . $r['movie_id']);
             }
 
-            $idstring = implode(" OR ",$ids);
+            $idstring = implode(" OR ", $ids);
 
             $return->tags = array();
             $query = "SELECT t.tag_name FROM video_tags 
@@ -55,18 +55,19 @@ if (isset($_POST['action'])) {
             echo(json_encode($return));
             break;
         case "loadVideo":
-            $query = "SELECT movie_name,movie_url,thumbnail,poster,likes,quality,length FROM videos WHERE movie_id='" . $_POST['movieid'] . "'";
+            $query = "SELECT movie_name,movie_id,movie_url,thumbnail,poster,likes,quality,length FROM videos WHERE movie_id='" . $_POST['movieid'] . "'";
 
             $result = $conn->query($query);
             $row = $result->fetch_assoc();
 
             $arr = array();
-            if($row["poster"] == null){
+            if ($row["poster"] == null) {
                 $arr["thumbnail"] = $row["thumbnail"];
-            }else{
+            } else {
                 $arr["thumbnail"] = $row["poster"];
             }
 
+            $arr["movie_id"] = $row["movie_id"];
             $arr["movie_name"] = $row["movie_name"];
             $arr["movie_url"] = $row["movie_url"];
             $arr["likes"] = $row["likes"];
@@ -74,10 +75,10 @@ if (isset($_POST['action'])) {
             $arr["length"] = $row["length"];
 
             // load tags of this video
-            $arr['tags'] = Array();
+            $arr['tags'] = array();
             $query = "SELECT t.tag_name FROM video_tags 
                         INNER JOIN tags t on video_tags.tag_id = t.tag_id
-                        WHERE video_tags.video_id=".$_POST['movieid']."
+                        WHERE video_tags.video_id=" . $_POST['movieid'] . "
                         GROUP BY t.tag_name";
             $result = $conn->query($query);
             while ($r = mysqli_fetch_assoc($result)) {
@@ -185,9 +186,32 @@ if (isset($_POST['action'])) {
 
             echo(json_encode($arr));
             break;
+
+        case "getAllTags":
+            $query = "SELECT tag_name,tag_id from tags";
+            $result = $conn->query($query);
+
+            $rows = array();
+            while ($r = mysqli_fetch_assoc($result)) {
+                array_push($rows, $r);
+            }
+            echo(json_encode($rows));
+            break;
+        case "addTag":
+            $movieid = $_POST['movieid'];
+            $tagid = $_POST['id'];
+
+            $query = "INSERT INTO video_tags(tag_id, video_id) VALUES ('$tagid','$movieid')";
+
+            if ($conn->query($query) === TRUE) {
+                echo('{"result":"success"}');
+            } else {
+                echo('{"result":"' . $conn->error . '"}');
+            }
+            break;
     }
 } else {
-    echo('{"data":"error"}');
+    echo('{data:"error"}');
 }
 return;
 
diff --git a/package-lock.json b/package-lock.json
index 0725f50..e5d8a72 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1356,6 +1356,25 @@
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
       "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw=="
     },
+    "@popperjs/core": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.4.0.tgz",
+      "integrity": "sha512-NMrDy6EWh9TPdSRiHmHH2ye1v5U0gBD7pRYwSwJvomx7Bm4GG04vu63dYiVzebLOx2obPpJugew06xVP0Nk7hA=="
+    },
+    "@restart/context": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
+      "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
+    },
+    "@restart/hooks": {
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.25.tgz",
+      "integrity": "sha512-m2v3N5pxTsIiSH74/sb1yW8D9RxkJidGW+5Mfwn/lHb2QzhZNlaU1su7abSyT9EGf0xS/0waLjrf7/XxQHUk7w==",
+      "requires": {
+        "lodash": "^4.17.15",
+        "lodash-es": "^4.17.15"
+      }
+    },
     "@sheerun/mutationobserver-shim": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.3.tgz",
@@ -1830,6 +1849,11 @@
         }
       }
     },
+    "@types/warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI="
+    },
     "@types/yargs": {
       "version": "13.0.9",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.9.tgz",
@@ -2192,12 +2216,6 @@
       "resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz",
       "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM="
     },
-    "amdefine": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
-      "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
-      "optional": true
-    },
     "ansi-colors": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
@@ -2387,58 +2405,6 @@
       "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
       "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c="
     },
-    "ast-transform": {
-      "version": "0.0.0",
-      "resolved": "https://registry.npmjs.org/ast-transform/-/ast-transform-0.0.0.tgz",
-      "integrity": "sha1-dJRAWIh9goPhidlUYAlHvJj+AGI=",
-      "requires": {
-        "escodegen": "~1.2.0",
-        "esprima": "~1.0.4",
-        "through": "~2.3.4"
-      },
-      "dependencies": {
-        "escodegen": {
-          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.2.0.tgz",
-          "integrity": "sha1-Cd55Z3kcyVi3+Jot220jRRrzJ+E=",
-          "requires": {
-            "esprima": "~1.0.4",
-            "estraverse": "~1.5.0",
-            "esutils": "~1.0.0",
-            "source-map": "~0.1.30"
-          }
-        },
-        "esprima": {
-          "version": "1.0.4",
-          "resolved": "https://registry.npmjs.org/esprima/-/esprima-1.0.4.tgz",
-          "integrity": "sha1-n1V+CPw7TSbs6d00+Pv0drYlha0="
-        },
-        "estraverse": {
-          "version": "1.5.1",
-          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-1.5.1.tgz",
-          "integrity": "sha1-hno+jlip+EYYr7bC3bzZFrfLr3E="
-        },
-        "esutils": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/esutils/-/esutils-1.0.0.tgz",
-          "integrity": "sha1-gVHTWOIMisx/t0XnRywAJf5JZXA="
-        },
-        "source-map": {
-          "version": "0.1.43",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
-          "integrity": "sha1-wkvBRspRfBRx9drL4lcbK3+eM0Y=",
-          "optional": true,
-          "requires": {
-            "amdefine": ">=0.0.4"
-          }
-        }
-      }
-    },
-    "ast-types": {
-      "version": "0.7.8",
-      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.7.8.tgz",
-      "integrity": "sha1-kC0uDWDQcb3NRtwRXhgJ7RHBOKk="
-    },
     "ast-types-flow": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz",
@@ -3211,16 +3177,6 @@
         "safe-buffer": "^5.1.2"
       }
     },
-    "browserify-optional": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/browserify-optional/-/browserify-optional-1.0.1.tgz",
-      "integrity": "sha1-HhNyLP3g2F8SFnbCpyztUzoBiGk=",
-      "requires": {
-        "ast-transform": "0.0.0",
-        "ast-types": "^0.7.0",
-        "browser-resolve": "^1.8.1"
-      }
-    },
     "browserify-rsa": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
@@ -4111,11 +4067,6 @@
         }
       }
     },
-    "css-mediaquery": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
-      "integrity": "sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA="
-    },
     "css-prefers-color-scheme": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz",
@@ -4620,6 +4571,15 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.4.tgz",
+      "integrity": "sha512-TjMyeVUvNEnOnhzs6uAn9Ya47GmMo3qq7m+Lr/3ON0Rs5kHvb8I+SQYjLUSYn7qhEm0QjW0yrBkvz9yOrwwz1A==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^2.6.7"
+      }
+    },
     "dom-serializer": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@@ -5351,11 +5311,6 @@
       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
       "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
     },
-    "eve": {
-      "version": "0.5.4",
-      "resolved": "https://registry.npmjs.org/eve/-/eve-0.5.4.tgz",
-      "integrity": "sha1-Z9CAuXJSkdfjieNMJoYN2X8d66o="
-    },
     "eventemitter3": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.4.tgz",
@@ -6538,11 +6493,6 @@
       "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
       "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM="
     },
-    "hyphenate-style-name": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz",
-      "integrity": "sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ=="
-    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -7946,6 +7896,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
       "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
     },
+    "lodash-es": {
+      "version": "4.17.15",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.15.tgz",
+      "integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ=="
+    },
     "lodash._reinterpolate": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
@@ -8074,14 +8029,6 @@
         "object-visit": "^1.0.0"
       }
     },
-    "matchmediaquery": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.1.tgz",
-      "integrity": "sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==",
-      "requires": {
-        "css-mediaquery": "^0.1.2"
-      }
-    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -10314,6 +10261,15 @@
         "react-is": "^16.8.1"
       }
     },
+    "prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "requires": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      }
+    },
     "proxy-addr": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
@@ -10498,16 +10454,24 @@
         "whatwg-fetch": "^3.0.0"
       }
     },
-    "react-burger-menu": {
-      "version": "2.6.14",
-      "resolved": "https://registry.npmjs.org/react-burger-menu/-/react-burger-menu-2.6.14.tgz",
-      "integrity": "sha512-lPdxd4JzDL+FQivFcdOaO2zKd3wa8u4831VaMPjVpQccIcPnA+iST7/YxZ3RTB2ngEplfdQ62inTItLVa3Av2A==",
+    "react-bootstrap": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.0.1.tgz",
+      "integrity": "sha512-xMHwsvDN7sIv26P9wWiosWjITZije2dRCjEJHVfV2KFoSJY+8uv2zttEw0XMB7xviQcW3zuIGLJXuj8vf6lYEg==",
       "requires": {
-        "browserify-optional": "^1.0.0",
+        "@babel/runtime": "^7.4.2",
+        "@restart/context": "^2.1.4",
+        "@restart/hooks": "^0.3.21",
+        "@types/react": "^16.9.23",
         "classnames": "^2.2.6",
-        "eve": "~0.5.1",
+        "dom-helpers": "^5.1.2",
+        "invariant": "^2.2.4",
         "prop-types": "^15.7.2",
-        "snapsvg-cjs": "0.0.6"
+        "prop-types-extra": "^1.1.0",
+        "react-overlays": "^3.1.2",
+        "react-transition-group": "^4.0.0",
+        "uncontrollable": "^7.0.0",
+        "warning": "^4.0.3"
       }
     },
     "react-dev-utils": {
@@ -10777,15 +10741,24 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
-    "react-responsive": {
-      "version": "8.0.3",
-      "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-8.0.3.tgz",
-      "integrity": "sha512-F9VXyLao7O8XHXbLjQbIr4+mC6Zr0RDTwNjd7ixTmYEAyKyNanBkLkFchNaMZgszoSK6PgSs/3m/QDWw33/gpg==",
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "react-overlays": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-3.2.0.tgz",
+      "integrity": "sha512-YTgCmw6l4uBOYylSnc3V8WLX+A0EoGnzDrqkYz0K7MUKbMBZFpaxLXH4EF9eZbspd+syZHQ5XAABI7n/zak1EA==",
       "requires": {
-        "hyphenate-style-name": "^1.0.0",
-        "matchmediaquery": "^0.3.0",
-        "prop-types": "^15.6.1",
-        "shallow-equal": "^1.1.0"
+        "@babel/runtime": "^7.4.5",
+        "@popperjs/core": "^2.0.0",
+        "@restart/hooks": "^0.3.12",
+        "@types/warning": "^3.0.0",
+        "dom-helpers": "^5.1.0",
+        "prop-types": "^15.7.2",
+        "uncontrollable": "^7.0.0",
+        "warning": "^4.0.3"
       }
     },
     "react-scripts": {
@@ -10848,6 +10821,17 @@
         "workbox-webpack-plugin": "4.3.1"
       }
     },
+    "react-transition-group": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
+      "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -11664,11 +11648,6 @@
         }
       }
     },
-    "shallow-equal": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
-      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
-    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -11853,22 +11832,6 @@
         "kind-of": "^3.2.0"
       }
     },
-    "snapsvg": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/snapsvg/-/snapsvg-0.5.1.tgz",
-      "integrity": "sha1-DK9Sx5GJopB0b8RGzF6GP2vd3+M=",
-      "requires": {
-        "eve": "~0.5.1"
-      }
-    },
-    "snapsvg-cjs": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/snapsvg-cjs/-/snapsvg-cjs-0.0.6.tgz",
-      "integrity": "sha1-Oy9WryVz09Nkw+1b+IhXRfTS3eE=",
-      "requires": {
-        "snapsvg": "0.5.1"
-      }
-    },
     "sockjs": {
       "version": "0.3.19",
       "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.19.tgz",
@@ -12820,6 +12783,17 @@
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
     },
+    "uncontrollable": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.1.1.tgz",
+      "integrity": "sha512-EcPYhot3uWTS3w00R32R2+vS8Vr53tttrvMj/yA1uYRhf8hbTG2GyugGqWDY0qIskxn0uTTojVd6wPYW9ZEf8Q==",
+      "requires": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": "^16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
@@ -13111,6 +13085,14 @@
         "makeerror": "1.0.x"
       }
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "1.7.2",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.2.tgz",
diff --git a/package.json b/package.json
index d33ca30..9a7c96b 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,8 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "^3.4.1",
-    "plyr-react": "^2.2.0"
+    "plyr-react": "^2.2.0",
+    "react-bootstrap": "^1.0.1"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -18,7 +19,7 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-  "proxy": "http://127.0.0.1:4000",
+  "proxy": "http://192.168.0.248",
   "homepage": "/",
   "eslintConfig": {
     "extends": "react-app"
diff --git a/src/AddTagPopup.js b/src/AddTagPopup.js
new file mode 100644
index 0000000..d7243e4
--- /dev/null
+++ b/src/AddTagPopup.js
@@ -0,0 +1,89 @@
+import React from "react";
+import Modal from 'react-bootstrap/Modal'
+import Dropdown from "react-bootstrap/Dropdown";
+import DropdownButton from "react-bootstrap/DropdownButton";
+
+class AddTagPopup extends React.Component {
+    constructor(props: P, context: any) {
+        super(props, context);
+
+        this.state = {
+            selection: {
+                name: "nothing selected",
+                id: -1
+            },
+            items: []
+        };
+
+        this.props = props;
+    }
+
+    componentDidMount() {
+        const updateRequest = new FormData();
+        updateRequest.append('action', 'getAllTags');
+
+        fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
+            .then((response) => response.json())
+            .then((result) => {
+                this.setState({
+                    items: result
+                });
+            });
+    }
+
+    render() {
+        return (
+            <>
+                <Modal
+                    show={this.props.show}
+                    onHide={this.props.onHide}
+                    size="lg"
+                    aria-labelledby="contained-modal-title-vcenter"
+                    centered>
+                    <Modal.Header closeButton>
+                        <Modal.Title id="contained-modal-title-vcenter">
+                            Add to Tag
+                        </Modal.Title>
+                    </Modal.Header>
+                    <Modal.Body>
+                        <h4>Select a Tag:</h4>
+                        <DropdownButton id="dropdown-basic-button" title={this.state.selection.name}>
+                            {this.state.items ?
+                                this.state.items.map((i) => (
+                                    <Dropdown.Item onClick={() => {
+                                        this.setState({selection: {name: i.tag_name, id: i.tag_id}})
+                                    }}>{i.tag_name}</Dropdown.Item>
+                                )) :
+                                <Dropdown.Item>loading tags...</Dropdown.Item>}
+                        </DropdownButton>
+                    </Modal.Body>
+                    <Modal.Footer>
+                        <button className='btn btn-primary' onClick={() => {
+                            this.storeselection();
+                            this.props.onHide();
+                        }}>Add
+                        </button>
+                    </Modal.Footer>
+                </Modal>
+            </>
+        );
+    }
+
+    storeselection() {
+        const updateRequest = new FormData();
+        updateRequest.append('action', 'addTag');
+        updateRequest.append('id', this.state.selection.id);
+        updateRequest.append('movieid', this.props.movie_id);
+
+        fetch('/api/videoload.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");
+                    console.log(result.result);
+                }
+            });
+    }
+}
+
+export default AddTagPopup;
\ No newline at end of file
diff --git a/src/Player.js b/src/Player.js
index f01b523..0be3d4f 100644
--- a/src/Player.js
+++ b/src/Player.js
@@ -3,6 +3,7 @@ import "./css/Player.css"
 import {PlyrComponent} from 'plyr-react';
 import SideBar from "./SideBar";
 import Tag from "./Tag";
+import AddTagPopup from "./AddTagPopup";
 
 
 class Player extends React.Component {
@@ -11,11 +12,13 @@ class Player extends React.Component {
 
         this.state = {
             sources: null,
+            movie_id: null,
             movie_name: null,
             likes: null,
             quality: null,
             length: null,
-            tags: []
+            tags: [],
+            popupvisible: false
         };
 
         this.props = props;
@@ -54,10 +57,10 @@ class Player extends React.Component {
                     <div className='sidebartitle'>Infos:</div>
                     <hr/>
                     <div className='sidebarinfo'><b>{this.state.likes}</b> Likes!</div>
-                    {this.state.quality != 0 ?
+                    {this.state.quality !== 0 ?
                         <div className='sidebarinfo'><b>{this.state.quality}p</b> Quality!
                         </div> : null}
-                    {this.state.length != 0 ?
+                    {this.state.length !== 0 ?
                         <div className='sidebarinfo'><b>{Math.round(this.state.length / 60)}</b> Minutes of length!
                         </div> : null}
                     <hr/>
@@ -76,7 +79,16 @@ class Player extends React.Component {
                         <div>not loaded yet</div>}
                     <div className='videoactions'>
                         <button className='btn btn-primary' onClick={() => this.likebtn()}>Like this Video!</button>
-                        <button className='btn btn-info' id="tagbutton">Give this Video a Tag</button>
+                        <button className='btn btn-info' onClick={() => this.setState({popupvisible: true})}>Give this
+                            Video a Tag
+                        </button>
+                        {this.state.popupvisible ?
+                            <AddTagPopup show={this.state.popupvisible}
+                                         onHide={() => this.setState({popupvisible: false})}
+                                         movie_id={this.state.movie_id}/> :
+                            null
+                        }
+
                     </div>
                 </div>
                 <button className="closebutton" onClick={() => this.closebtn()}>Close</button>
@@ -104,6 +116,7 @@ class Player extends React.Component {
                         ],
                         poster: result.thumbnail
                     },
+                    movie_id: result.movie_id,
                     movie_name: result.movie_name,
                     likes: result.likes,
                     quality: result.quality,
diff --git a/src/css/SideBar.css b/src/css/SideBar.css
index e4a5874..4120c44 100644
--- a/src/css/SideBar.css
+++ b/src/css/SideBar.css
@@ -7,6 +7,7 @@
     background-color: #b4c7fe;
     border-radius: 20px;
     border: 2px #3574fe solid;
+    overflow: hidden;
 }
 
 .sidebartitle {
@@ -19,5 +20,5 @@
     background-color: #8ca3fc;
     border-radius: 5px;
     padding: 2px 10px 2px 15px;
-    width: 60%;
+    width: 220px;
 }