diff --git a/html/index.html b/html/index.html
index 6a3e356c736ecd23f933a1f787f0a9912713bc7d..39902377f8e0f0aeffbd808a753c0268f12a31e8 100644
--- a/html/index.html
+++ b/html/index.html
@@ -14,6 +14,7 @@
         {{ range.Challenges}}
 colnum.set("{{.Name}}",{col: "{{.DepCount}}", row: "{{.Row}}"});
         {{end}}
+        var bugreportCategories = ["Main Page" {{ range.Challenges }},"{{.Name}}"{{end}}];
         function start(){
           {{if .IsUser}}{{else}}document.getElementById("loginbutton").click();{{end}}
           {{ if .IsUser }}
@@ -63,6 +64,7 @@ colnum.set("{{.Name}}",{col: "{{.DepCount}}", row: "{{.Row}}"});
     <dialog id="detailview">
       <span class="mdi mdi-close closebtn" id="detailclosebutton"></span>
       <h1 id="detailtitle"></h1>
+      <input type="button" id="bugreport"></input>
       <h3 class="detailmeta">
         <div class="flexcell flex-left">
           <a id="challuri" class="challengelink" style="display: none;">Zur Challenge!</a>
@@ -89,4 +91,18 @@ colnum.set("{{.Name}}",{col: "{{.DepCount}}", row: "{{.Row}}"});
       <span id="checkloading" class="loadingbar" style="display: none;"></span>
     </dialog>
 
+    <dialog id="bugreportview">
+      <span class="mdi mdi-close closebtn" id="bugreportclosebutton"></span>
+      <h1>Report Bug</h1>
+      <div id="bugreportform">
+        <select id="bugreportcategory" ></select>
+        <input type="text" placeholder="Das soll so ja nicht" id="subjectinput" class="firamono flexcell" style="width: 30vw;"/>
+        </br>
+        <textarea placeholder="Alles kaputt..." id="contentinput" class="firamono flexcell" style="height: 30vh; width: 30vw; resize: none;"></textarea>
+        </br>
+        <input class="button" type="submit" id="bugreportbutton" value="Send report" style="float: right"/>
+      </div>
+      <span id="bugloading" class="loadingbar" style="display: none;"></span>
+    </dialog>
+
 {{ template "footer" . }}
diff --git a/html/static/main.js b/html/static/main.js
index b399631cf6391f04d551cdeda9dfbde44d1adeef..07d0ffb257858670b454ef7778da82a2c822d827 100755
--- a/html/static/main.js
+++ b/html/static/main.js
@@ -7,6 +7,9 @@ let solutioneventlistenerfunc = function () {
 let flaginputeventlistenerfunc = function () {
 };
 
+// Used for selection dialog in bugreport
+let selCategory = document.getElementById("bugreportcategory");
+
 function addChallEventListener(title, points) {
     let elem = document.getElementById(title);
     elem.addEventListener("click", function () {
@@ -113,6 +116,7 @@ function addChallEventListener(title, points) {
             }
         });
 
+        selCategory.value = title;
         showDialog(detView);
     });
 
@@ -312,5 +316,25 @@ function connectElements(svg, startElem, endElem, color) {
     svg1.innerHTML = "";
     // noinspection JSUnresolvedVariable
     flagsubmitbutton.addEventListener("click", flagsubmiteventlistenerfunc);
+    let btnBugreport = document.getElementById("bugreport");
+    let dlgBugreport = document.getElementById("bugreportview");
+    let btnBugreportClose = document.getElementById("bugreportclosebutton");
+    btnBugreportClose.addEventListener("click", function () {
+        dlgBugreport.close();
+    });
+    dialogPolyfill.registerDialog(dlgBugreport);
+    btnBugreport.addEventListener("click", function() {
+        showDialog(dlgBugreport);
+        loadBugReportView();
+    });
+
+    // Add categories to bugreport selection
+    bugreportCategories.forEach(function(elem) {
+        var opt = document.createElement("option");
+        opt.value= elem;
+        opt.innerHTML = elem;
+        selCategory.appendChild(opt);
+    });
+
     start();
 })();