diff --git a/src/endpoints/debug.py b/src/endpoints/debug.py
index 32ed7bf..3ce2672 100644
--- a/src/endpoints/debug.py
+++ b/src/endpoints/debug.py
@@ -1,8 +1,6 @@
 from flask_definitions import *
 from logic.time_handler import get_time
 
-from logic.mongodb_handler import mongo
-
 
 @app.route("/debug/", methods=["Get"])
 def debug_root():
@@ -18,27 +16,6 @@ def debug_root():
     return f'<h1>Debug Endpoints:</h1>{endpoints_html}'
 
 
-@app.route("/debug/user/", methods=["Get"])
-def debug_user():
-    if request.args.get('steamid') is None:
-        return jsonify({'error': 'No steamid. Please call with ?steamid=<steamID64>'}), 400
-    steam_id = request.args.get('steamid')
-    user_data = mongo.get_debug(steamid=steam_id, server=mongo_host, db=mongo_db, collection=mongo_collection)
-    if user_data.get('status') == 'error':
-        return jsonify(user_data), 400
-    user_data['_id'] = str(user_data.get('_id'))
-    steamid = user_data.get('steamid')
-    userId = user_data.get('userId')
-    eula = user_data.get('eula')
-    xp = user_data.get('xp')
-    currency_blood_cells = user_data.get('currency_blood_cells')
-    currency_iron = user_data.get('currency_iron')
-    currency_ink_cells = user_data.get('currency_ink_cells')
-    unlocked_items = user_data.get('unlocked_items')
-    return_data = {"steamid": steamid, "userId": userId, "eula": eula, "xp": xp, "currency_blood_cells": currency_blood_cells, "currency_iron": currency_iron, "currency_ink_cells": currency_ink_cells, "unlocked_items": unlocked_items}
-    return jsonify(return_data)
-
-
 @app.route("/debug/time", methods=["Get"])
 def debug_time():
     current_time, expire_time = get_time()
diff --git a/src/endpoints/general.py b/src/endpoints/general.py
index 405cf89..aff896f 100644
--- a/src/endpoints/general.py
+++ b/src/endpoints/general.py
@@ -160,16 +160,6 @@ def tex_get():
         logger.graylog_logger(level="error", handler="general-tex", message=f"Error in tex_get: {e}")
 
 
-@app.route("/")
-def root():
-    try:
-        get_remote_ip()
-        # return jsonify({"status": "success"})
-        return render_template("index.html")
-    except Exception as e:
-        logger.graylog_logger(level="error", handler="general-root", message=f"Error in root: {e}")
-
-
 @app.route('/favicon.ico')
 def favicon():
     get_remote_ip()
diff --git a/src/endpoints/web.py b/src/endpoints/web.py
new file mode 100644
index 0000000..3e96062
--- /dev/null
+++ b/src/endpoints/web.py
@@ -0,0 +1,39 @@
+from flask_definitions import *
+from logic.mongodb_handler import mongo
+
+
+@app.route('/', methods=["GET"])
+def index():
+    get_remote_ip()
+    print("Index Page")
+    return render_template("index.html")
+
+
+# @app.route('/debug/user/', methods=['GET'])
+# def debug_user():
+#     return debug_user(False)
+
+@app.route('/debug/user/', methods=['GET'], defaults={'steamid': None})
+@app.route('/debug/user/<steamid>', methods=['GET'])
+def debug_user(steamid):
+    if steamid is None:
+        return render_template('debug/user.html', is_id_set=False, id_not_found=True)
+
+    user_data = mongo.get_debug(steamid=steamid, server=mongo_host, db=mongo_db, collection=mongo_collection)
+
+    if user_data is None:
+        return render_template('debug/user.html', is_id_set=True, id_not_found=False, steam_id=steamid)
+
+    return render_template(
+        'debug/user.html',
+        is_id_set=True,
+        is_not_found=False,
+        steam_id=request.args.get('steamid'),
+        eula=user_data.get('eula'),
+        currency_blood_cells=user_data.get('currency_blood_cells'),
+        currency_ink_cells=user_data.get('currency_ink_cells'),
+        currency_iron=user_data.get('currency_iron'),
+        unlocked_items=user_data.get('unlocked_items'),
+        userId=user_data.get('userId'),
+        xp=user_data.get('xp')
+    )
diff --git a/src/flask_definitions.py b/src/flask_definitions.py
index b4ef8cd..b4d54af 100644
--- a/src/flask_definitions.py
+++ b/src/flask_definitions.py
@@ -1,4 +1,4 @@
-from flask import Flask, jsonify, request, send_from_directory, abort, render_template
+from flask import Flask, jsonify, request, send_from_directory, abort, render_template, url_for
 from logic.global_handlers import get_remote_ip, load_config
 from logic.logging_handler import logger
 
diff --git a/src/logic/mongodb_handler.py b/src/logic/mongodb_handler.py
index 618d435..188fd65 100644
--- a/src/logic/mongodb_handler.py
+++ b/src/logic/mongodb_handler.py
@@ -104,7 +104,7 @@ class Mongo:
             if existing_document:
                 return existing_document
             else:
-                return {"status": "error", "message": "No user found with steamid: " + steamid}
+                return None
         except Exception as e:
             print(e)
             return {"status": "error", "message": "Error in mongodb_handler"}
diff --git a/src/start_app.py b/src/start_app.py
index 11b57a3..095bd69 100644
--- a/src/start_app.py
+++ b/src/start_app.py
@@ -13,6 +13,7 @@ import endpoints.user_handeling
 import endpoints.general
 import endpoints.logging
 import endpoints.debug
+import endpoints.web
 
 
 # ------------------------------------------------------- #
diff --git a/src/static/css/main.css b/src/static/css/main.css
new file mode 100644
index 0000000..4ed30f7
--- /dev/null
+++ b/src/static/css/main.css
@@ -0,0 +1,93 @@
+@font-face {
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: normal;
+    src: url("/static/fonts/Roboto-Regular.ttf");
+}
+
+@font-face {
+    font-family: Roboto;
+    font-style: italic;
+    font-weight: normal;
+    src: url("/static/fonts/Roboto-Italic.ttf");
+}
+
+@font-face {
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: bold;
+    src: url("/static/fonts/Roboto-Bold.ttf");
+}
+
+@font-face {
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: 100;
+    src: url("/static/fonts/Roboto-Thin.ttf");
+}
+
+body {
+    font-family: Roboto, serif;
+    background-color: #222222;
+    color: #eeeeee;
+    font-size: 125%;
+}
+
+.align-center {
+    display:flex;
+    align-items: center;
+    align-content: center;
+    flex-direction: column;
+}
+
+.input-box {
+    margin-top: 2em;
+    width: 35%;
+    padding: 0 1em 1em 1em;
+    border-radius: 15px;
+    box-shadow: #ffffff69 0 0 20px 0;
+    background-color: #333333;
+}
+
+.input-box .input-field {
+    border-radius: 5px;
+    background-color: #b7b7b7;
+}
+
+.button {
+    margin-top: 1em;
+    padding: 0.25em 4em;
+    font-weight: bold;
+}
+
+.error-box {
+    padding: 0.5em 3em;
+    margin-bottom: 1em;
+    background-color: rgba(170, 0, 0, 0.78);
+    border-radius: 5px;
+    font-size: 0.9em;
+    box-shadow: #111111ee 0 0 20px 0;
+}
+
+.error-box span {
+    font-weight: bold;
+}
+
+table {
+    box-shadow: #ffffff69 0 0 20px 0;
+    border: 1px solid black;
+    border-radius: 5px;
+}
+
+table th, td {
+    padding: 0.2em 2em;
+}
+
+table tr {
+    background-color: #333333;
+    padding: 2em;
+}
+
+table tr:nth-of-type(even) {
+    background-color: #444444;
+}
\ No newline at end of file
diff --git a/src/static/fonts/Roboto-Bold.ttf b/src/static/fonts/Roboto-Bold.ttf
new file mode 100644
index 0000000..43da14d
Binary files /dev/null and b/src/static/fonts/Roboto-Bold.ttf differ
diff --git a/src/static/fonts/Roboto-Italic.ttf b/src/static/fonts/Roboto-Italic.ttf
new file mode 100644
index 0000000..1b5eaa3
Binary files /dev/null and b/src/static/fonts/Roboto-Italic.ttf differ
diff --git a/src/static/fonts/Roboto-Regular.ttf b/src/static/fonts/Roboto-Regular.ttf
new file mode 100644
index 0000000..ddf4bfa
Binary files /dev/null and b/src/static/fonts/Roboto-Regular.ttf differ
diff --git a/src/static/fonts/Roboto-Thin.ttf b/src/static/fonts/Roboto-Thin.ttf
new file mode 100644
index 0000000..2e0dee6
Binary files /dev/null and b/src/static/fonts/Roboto-Thin.ttf differ
diff --git a/src/templates/debug/user.html b/src/templates/debug/user.html
new file mode 100644
index 0000000..7ddd762
--- /dev/null
+++ b/src/templates/debug/user.html
@@ -0,0 +1,101 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Debug User Infos</title>
+    <link rel="stylesheet" href="{{  url_for('static', filename='css/main.css') }}">
+  </head>
+  <body>
+    <div class="align-center">
+        <h1>User Info</h1>
+
+        {# When there is no Steam id specified in the URL #}
+        {% if is_id_set == False %}
+        <p>
+            No SteamID64 Given, please Enter one at the end of the URL<br>
+            Example: /debug/user/XXXXXXXXXX
+        </p>
+
+        {# When the Steam ID isnt found in the DB #}
+        {% elif id_not_found == False %}
+        <p>
+            A user with the SteamID64 {{ steam_id }} doesn't currently exists in the Database.
+        </p>
+        {% else  %}
+            <table>
+                <tbody>
+                    <tr>
+                        <td>SteamID64</td>
+                        <td>{{ steam_id }}</td>
+                    </tr>
+                    <tr>
+                        <td>Accepted EULA</td>
+                        <td>{{ eula }}</td>
+                    </tr>
+                    <tr>
+                        <td>Blood cells</td>
+                        <td>{{ currency_blood_cells }}</td>
+                    </tr>
+                    <tr>
+                        <td>Ink cells</td>
+                        <td>{{ currency_ink_cells }}</td>
+                    </tr>
+                    <tr>
+                        <td>Iron</td>
+                        <td>{{ currency_iron }}</td>
+                    </tr>
+                    <tr>
+                        <td>Unlocked Items</td>
+                        <td>{{ unlocked_items }}</td>
+                    </tr>
+                    <tr>
+                        <td>UserID</td>
+                        <td>{{ userId }}</td>
+                    </tr>
+                    <tr>
+                        <td>XP</td>
+                        <td>{{ xp }}</td>
+                    </tr>
+                </tbody>
+            </table>
+        {% endif %}
+        <div class="input-box align-center">
+            <h3>Search for Another User</h3>
+
+            <div class="error-box align-center" style="visibility: collapse">
+                <span id="error_text">Test Error</span>
+            </div>
+
+            <label for="steam_id">SteamID64</label>
+            <input class="input-field" id="steam_id" type="text" placeholder="XXXXXXXX" maxlength="32" minlength="2">
+
+            <input id="search_button" class="button" type="button" value="Search">
+        </div>
+    </div>
+
+    <script>
+        document.getElementById('search_button').addEventListener('click', () => {
+            let inputText = document.getElementById('steam_id').value;
+
+            //check if the input only contains numbers, if not show error message
+            if(inputText.empty === '' || /^\d+$/.test(inputText) === false) {
+                showError('SteamID64 only contains Numbers');
+                return;
+            }
+
+            // redirect to search
+            window.location = "/debug/user/" + inputText;
+        })
+
+        let showError = (message) => {
+            let errorText = document.getElementById('error_text');
+            // Set error text
+            errorText.textContent = message;
+
+            // Make box visible
+            errorText.parentElement.style.visibility = 'visible';
+        }
+    </script>
+  </body>
+</html>
diff --git a/src/templates/index.html b/src/templates/index.html
index 79603c3..0f1acbe 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -14,3 +14,5 @@
 <script src="//cdn.jsdelivr.net/github-cards/latest/widget.js"></script>
 </body>
 </html>
+
+