diff --git a/intelmq/app/server.py b/intelmq/app/server.py
index 1c46f2505..34cec9679 100644
--- a/intelmq/app/server.py
+++ b/intelmq/app/server.py
@@ -5,8 +5,10 @@
 """
 
 import os
+import pathlib
 
 from fastapi import FastAPI
+from fastapi.staticfiles import StaticFiles
 from fastapi.middleware.cors import CORSMiddleware
 
 from intelmq.version import __version__
@@ -15,6 +17,7 @@
 
 from intelmq.app.config import config
 from intelmq.app.api.router import router as api_router
+from intelmq.app.webgui.router import router as web_router
 
 app = FastAPI(
     title="IntelMQ",
@@ -32,4 +35,9 @@ def init_app():
 
 app.include_router(api_router, prefix="/api/v1")
 
+if config.enable_webgui:
+    static_files = pathlib.Path(__file__).parent / "webgui" / "static"
+    app.mount("/static", StaticFiles(directory=static_files), name="static")
+    app.include_router(web_router)
+
 intelmq.app.api.exceptions.register(app)
diff --git a/intelmq/app/webgui/__init__.py b/intelmq/app/webgui/__init__.py
index f1e51caf6..e69de29bb 100644
--- a/intelmq/app/webgui/__init__.py
+++ b/intelmq/app/webgui/__init__.py
@@ -1,10 +0,0 @@
-"""Python __init__ file that provides the path to the module
-
-SPDX-FileCopyrightText: 2020 IntelMQ Team <intelmq-team@cert.at>
-SPDX-License-Identifier: AGPL-3.0-or-later
-
-"""
-import pathlib
-from .version import __version__, __version_info__  # noqa
-
-path = pathlib.Path(__file__).parent
diff --git a/intelmq/app/webgui/build.py b/intelmq/app/webgui/build.py
deleted file mode 100644
index 04e15c2fb..000000000
--- a/intelmq/app/webgui/build.py
+++ /dev/null
@@ -1,60 +0,0 @@
-"""
-Build statically rendered files.
-
-SPDX-FileCopyrightText: 2021 Birger Schacht <schacht@cert.at>, Mikk Margus Möll <mikk@cert.ee>, Sebastian Wagner <wagner@cert.at>
-SPDX-License-Identifier: AGPL-3.0-or-later
-"""
-import argparse
-import pathlib
-import shutil
-from mako.lookup import TemplateLookup
-
-
-def render_page(pagename: str, **template_args) -> str:
-    template_dir = pathlib.Path(__file__).parent / 'templates'
-    template_lookup = TemplateLookup(directories=[template_dir], default_filters=["h"], input_encoding='utf8')
-    template = template_lookup.get_template(f'{pagename}.mako')
-
-    return template.render(pagename=pagename, **template_args)
-
-
-def buildhtml(outputdir: pathlib.Path = pathlib.Path('html')):
-    outputdir.mkdir(parents=True, exist_ok=True)
-
-    htmlfiles = ["configs", "management", "monitor", "check", "about", "index"]
-    for filename in htmlfiles:
-        print(f"Rendering {filename}.html")
-        html = render_page(filename)
-        outputdir.joinpath(f"{filename}.html").write_text(html)
-
-    staticfiles = ["css", "images", "js", "plugins", "less"]
-    for filename in staticfiles:
-        print(f"Copying {filename} recursively")
-        src = pathlib.Path(__file__).parent / 'static' / filename
-        dst = outputdir / filename
-        if dst.exists():
-            shutil.rmtree(dst)
-        shutil.copytree(src, dst)
-
-    print('rendering dynvar.js')
-    rendered = render_page('dynvar', allowed_path='/opt/intelmq/var/lib/bots/', controller_cmd='intelmq')
-    outputdir.joinpath('js/dynvar.js').write_text(rendered)
-
-
-def main():
-    parser = argparse.ArgumentParser(
-        prog='intelmq-manager-build',
-        description='Build statically rendered files for intelmq-manager.',
-        epilog='This command renders and saves all files required for IntelMQ Manager at the given directory, which can be served by Webservers statically',
-        formatter_class=argparse.RawDescriptionHelpFormatter,
-    )
-
-    parser.add_argument('--output-dir', '-o', default='html',
-                        type=pathlib.Path,
-                        help='The destination directory, will be created if needed.')
-    args = parser.parse_args()
-    buildhtml(outputdir=args.output_dir)
-
-
-if __name__ == '__main__':
-    main()
diff --git a/intelmq/app/webgui/router.py b/intelmq/app/webgui/router.py
new file mode 100644
index 000000000..add8c4d14
--- /dev/null
+++ b/intelmq/app/webgui/router.py
@@ -0,0 +1,101 @@
+# SPDX-FileCopyrightText: 2023 IntelMQ Team
+# SPDX-License-Identifier: AGPL-3.0-or-later
+
+import collections
+import pathlib
+
+from fastapi import APIRouter, Request
+from fastapi.responses import HTMLResponse
+from fastapi.templating import Jinja2Templates
+
+from intelmq.app.config import config
+
+SHOW_LOGIN = True if config.session_store else False
+
+router = APIRouter(default_response_class=HTMLResponse)
+templates_dir = pathlib.Path(__file__).parent / "templates"
+templates = Jinja2Templates(directory=templates_dir)
+Page = collections.namedtuple("Page", ["name", "title", "url", "icon_url"])
+
+
+def get_pages(request: Request):
+    return [
+        Page(
+            name="configs",
+            title="Configuration",
+            url=request.url_for('get_configuration'),
+            icon_url=request.url_for('static', path='images/configuration.png'),
+        ),
+        Page(
+            name="management",
+            title="Management",
+            url=request.url_for('get_management'),
+            icon_url=request.url_for('static', path='images/management.png'),
+        ),
+        Page(
+            name="monitor",
+            title="Monitor",
+            url=request.url_for('get_monitor'),
+            icon_url=request.url_for('static', path='images/monitor.png'),
+        ),
+        Page(
+            name="check",
+            title="Check",
+            url=request.url_for('get_check'),
+            icon_url=request.url_for('static', path='images/check.png'),
+        ),
+        Page(
+            name="about",
+            title="About",
+            url=request.url_for('get_about'),
+            icon_url=request.url_for('static', path='images/about.png'),
+        )
+    ]
+
+
+@router.get("/", include_in_schema=False)
+async def get_index(request: Request):
+    return templates.TemplateResponse("index.html", {
+        "request": request,
+        "pages": get_pages(request)
+    })
+
+
+@router.get("/configuration", include_in_schema=False)
+async def get_configuration(request: Request):
+    return templates.TemplateResponse("configuration.html", {
+        "request": request,
+        "pages": get_pages(request)
+    })
+
+
+@router.get("/management", include_in_schema=False)
+def get_management(request: Request):
+    return templates.TemplateResponse("management.html", {
+        "request": request,
+        "pages": get_pages(request)
+    })
+
+
+@router.get("/monitor", include_in_schema=False)
+def get_monitor(request: Request):
+    return templates.TemplateResponse("monitor.html", {
+        "request": request,
+        "pages": get_pages(request)
+    })
+
+
+@router.get("/check", include_in_schema=False)
+def get_check(request: Request):
+    return templates.TemplateResponse("check.html", {
+        "request": request,
+        "pages": get_pages(request)
+    })
+
+
+@router.get("/about", include_in_schema=False)
+def get_about(request: Request):
+    return templates.TemplateResponse("about.html", {
+        "request": request,
+        "pages": get_pages(request)
+    })
diff --git a/intelmq/app/webgui/static/images/config.png b/intelmq/app/webgui/static/images/configuration.png
similarity index 100%
rename from intelmq/app/webgui/static/images/config.png
rename to intelmq/app/webgui/static/images/configuration.png
diff --git a/intelmq/app/webgui/static/images/botnet.png b/intelmq/app/webgui/static/images/management.png
similarity index 100%
rename from intelmq/app/webgui/static/images/botnet.png
rename to intelmq/app/webgui/static/images/management.png
diff --git a/intelmq/app/webgui/static/js/about.js b/intelmq/app/webgui/static/js/about.js
index c18470de5..13b36b466 100644
--- a/intelmq/app/webgui/static/js/about.js
+++ b/intelmq/app/webgui/static/js/about.js
@@ -5,14 +5,10 @@
 
 function get_versions() {
     let intelmq_version_element = document.getElementById('intelmq-version');
-    let intelmq_api_version_element = document.getElementById('intelmq-api-version');
-    let intelmq_manager_version_element = document.getElementById('intelmq-manager-version');
 
     authenticatedGetJson(managementUrl('version'))
         .done(function (data) {
             intelmq_version_element.innerHTML = data.intelmq;
-            intelmq_api_version_element.innerHTML = data['intelmq-api'];
-            intelmq_manager_version_element.innerHTML = '3.2.0';
         })
         .fail(function (jqxhr, textStatus, error) {
             let err = `${textStatus}, ${error}`;
diff --git a/intelmq/app/webgui/static/js/configs.js b/intelmq/app/webgui/static/js/configs.js
index 8dd3b1ea3..aa744dca5 100644
--- a/intelmq/app/webgui/static/js/configs.js
+++ b/intelmq/app/webgui/static/js/configs.js
@@ -30,7 +30,7 @@ var documentation = null;
 var span = null;
 var table = null;
 var disabledKeys = ['group', 'name', 'module'];
-var $manipulation, $saveButton; // jQuery of Vis control panel; elements reseted with network
+var $manipulation, $saveButton; // jQuery of Vis control panel; elements reset with network
 var node = null;
 
 var $EDIT_DEFAULT_BUTTON = $("#editDefaults");
@@ -544,7 +544,7 @@ function saveData(data, callback) {
 
     saveFormData();
 
-    // check inputs beeing valid
+    // check inputs being valid
     if (node.bot_id === '' && node.group === '') {
         show_error('fields id and group must not be empty!');
         return;
@@ -740,7 +740,7 @@ function draw() {
     initNetwork();
     if (window.location.hash) {
         let node = window.location.hash.substr(1);
-        setTimeout(() => { // doesnt work immediately, I don't know why. Maybe a js guru would bind to visjs onready if that exists or sth.
+        setTimeout(() => { // doesn't work immediately, I don't know why. Maybe a js guru would bind to visjs onready if that exists or sth.
             try {
                 fitNode(node);
             } catch (e) {
diff --git a/intelmq/app/webgui/static/js/intelmq-manager.js b/intelmq/app/webgui/static/js/intelmq-manager.js
deleted file mode 100644
index b9b952ca3..000000000
--- a/intelmq/app/webgui/static/js/intelmq-manager.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/* intelmq-manager.js javascript file for intelmq-manager
- *
- * SPDX-FileCopyrightText: 2020 IntelMQ Team <intelmq-team@cert.at>
- * SPDX-License-Identifier: AGPL-3.0-or-later
- *
- * Do not change this file! If you want to customize the settings,
- * create a 'var.js' file and define the custom settings there with
- * var VARIABLENAME = value
- */
-
-/*
- * ROOT points to the URI of the API service.
- * Set this for example to `https://intelmq.organization.tld/`
- * By default ROOT points to the host the manager runs on, but the path '/intelmq'
- */
-'use strict';
-
-var arr = window.location.href.split('/');
-var ROOT = ROOT ?? `${arr[0]}//${arr[2]}/intelmq`;
-
-/*
- * If there are multiple versions of the API, they can be defined here
- */
-var API_V1 = ROOT + '/v1/api/'
-
-/*
- * use a specific version when accessing the API variable
- */
-var API = API_V1
diff --git a/intelmq/app/webgui/static/js/static.js b/intelmq/app/webgui/static/js/static.js
index 4fc6c8e7c..432bf772b 100644
--- a/intelmq/app/webgui/static/js/static.js
+++ b/intelmq/app/webgui/static/js/static.js
@@ -76,7 +76,7 @@ var LOAD_X_LOG_LINES = 30;
 
 var MESSAGE_LENGTH = 200;
 
-var MONITOR_BOT_URL = "monitor.html?bot_id={0}";
+var MONITOR_BOT_URL = "monitor?bot_id={0}";
 
 var page_is_exiting = false;
 
diff --git a/intelmq/app/webgui/templates/about.mako b/intelmq/app/webgui/templates/about.html
similarity index 90%
rename from intelmq/app/webgui/templates/about.mako
rename to intelmq/app/webgui/templates/about.html
index 242610d37..bb52ce3a6 100644
--- a/intelmq/app/webgui/templates/about.mako
+++ b/intelmq/app/webgui/templates/about.html
@@ -1,8 +1,11 @@
-## SPDX-FileCopyrightText: 2020 IntelMQ Team <intelmq-team@cert.at>
-## SPDX-License-Identifier: AGPL-3.0-or-later
+{#SPDX-FileCopyrightText: 2020 IntelMQ Team <intelmq-team@cert.at>#}
+{#SPDX-License-Identifier: AGPL-3.0-or-later#}
 
-<%inherit file="base.mako" />
+{% extends "base.html" %}
 
+{% block title %}About{% endblock %}
+
+{% block content %}
 <!-- Page Content -->
 <div id="page-wrapper">
     <div class="row" style="padding: 20px">
@@ -51,8 +54,6 @@
             <h2>Version</h2>
             <table class="table">
                 <tr><td>IntelMQ<td><td id="intelmq-version"></td></tr>
-                <tr><td>IntelMQ API<td><td id="intelmq-api-version"></td></tr>
-                <tr><td>IntelMQ Manager<td><td id="intelmq-manager-version"></td></tr>
             </table>
         </div>
     </div>
@@ -63,3 +64,8 @@ <h2 id="debugging-heading" class="waiting">Debugging</h2>
         </div>
     </div>
 </div>
+{% endblock %}
+
+{% block javascript %}
+<script src="{{ url_for('static', path='js/about.js') }}"></script>
+{% endblock %}
diff --git a/intelmq/app/webgui/templates/base.html b/intelmq/app/webgui/templates/base.html
new file mode 100644
index 000000000..3a2eeea5f
--- /dev/null
+++ b/intelmq/app/webgui/templates/base.html
@@ -0,0 +1,162 @@
+{#SPDX-FileCopyrightText: 2020 IntelMQ Team <intelmq-team@cert.at>#}
+{#SPDX-License-Identifier: AGPL-3.0-or-later#}
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <title>IntelMQ - {% block title %}{% endblock %}</title>
+
+    <!-- Bootstrap Core CSS -->
+    <link href="{{ url_for('static', path='plugins/bootstrap/bootstrap.min.css') }}" rel="stylesheet">
+
+    <!-- MetisMenu CSS -->
+    <link href="{{ url_for('static', path='plugins/metisMenu/metisMenu.min.css') }}" rel="stylesheet">
+
+    <!-- Vis.JS Plugin JavaScript (configs.html)-->
+    <link href="{{ url_for('static', path='plugins/vis.js/vis.css') }}" rel="stylesheet" type="text/css">
+
+    <!-- DataTables CSS (other files than configs.html) -->
+    <link href="{{ url_for('static', path='plugins/dataTables/dataTables.bootstrap.css') }}" rel="stylesheet">
+
+    <!-- Custom Fonts -->
+    <link href="{{ url_for('static', path='plugins/font-awesome-4.1.0/css/font-awesome.min.css') }}" rel="stylesheet"
+          type="text/css">
+
+    <!-- Custom CSS -->
+    <link href="{{ url_for('static', path='css/sb-admin-2.css') }}" rel="stylesheet">
+    <link href="{{ url_for('static', path='css/style.css') }}" rel="stylesheet">
+
+    <link rel="icon" type="image/png" href="{{ url_for('static', path='images/logo2.png') }}">
+
+    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+    <!--[if lt IE 9]>
+    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
+    <![endif]-->
+    <script>
+        var API = "{{ request.url_for('api_base_url') }}"
+    </script>
+
+</head>
+<body>
+<div id="wrapper">
+    <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
+        <div class="navbar-header">
+            <a class="navbar-brand" href="/">
+                <img src="{{ url_for('static', path='/images/logo2.png') }}" height="24px" style="margin-right:10px; display:inline"/>
+                <img src="{{ url_for('static', path='/images/logo_no_margin_6.png') }}" height="20px" style="display:inline"/>
+            </a>
+        </div>
+        <!-- /.navbar-header -->
+
+        <ul class="nav navbar-top-links navbar-left">
+
+            {% for page in pages %}
+                <li class="{{ 'active' if page.name in request.url.path else '' }}">
+                    <a href="{{ page.url }}">
+                        <span class="top-menu-text"><img src="{{ page.icon_url }}" width="24px" height="24px">&nbsp;{{ page.title }}</span>
+                    </a>
+                </li>
+            {% endfor %}
+
+        </ul>
+
+        {% if SHOW_LOGIN == True %}
+        <div id="login-status">Not logged in</div>
+        <div>
+            <input type="button" value="Login" class="btn btn-primary" data-toggle="modal"
+                   data-target="#modalLoginForm" id="signUp" style="display: block;">
+            <input type="button" value="Logout" id="logOut"
+                   class="btn btn-primary" style="display: none;">
+        </div>
+        {% endif %}
+
+        <!-- /.navbar-top-links -->
+        <div title="Click to expand, then escape to minimize again." id='log-window'>
+            <i role="close" class="fa fa-times"></i>
+            <div class="contents"></div>
+        </div>
+    </nav>
+
+    <div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header text-center">
+                    <h4 class="modal-title w-100 font-weight-bold">Sign in</h4>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <form method="POST" id="loginForm">
+                    <div class="modal-body mx-3">
+                        <!-- Field to show if the username or password is wrong -->
+                        <p class="text-danger" id="loginErrorField"> </p>
+                        <div class="md-form mb-2">
+                            <input type="text" id="username" name="username"
+                                   class="form-control">
+                            <label data-error="wrong" data-success="right" for="username">
+                                Username
+                            </label>
+                        </div>
+                        <div class="md-form mb-2">
+                            <input type="password" id="password" name="password"
+                                   class="form-control">
+                            <label data-error="wrong" data-success="right" for="password">
+                                Password
+                            </label>
+                        </div>
+
+                    </div>
+                    <div class="modal-footer d-flex justify-content-center">
+                        <button class="btn btn-primary">Login</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+
+</div>
+
+
+    <div id="content">
+    {% block content %}
+    {% endblock %}
+    </div>
+
+    <script src="{{ request.url_for('static', path='plugins/jquery-3.5.1.min.js') }}"></script>
+
+    <!-- Bootstrap Core JavaScript -->
+    <script src="{{ request.url_for('static', path='plugins/bootstrap/bootstrap.min.js') }}"></script>
+
+    <!-- Metis Menu Plugin JavaScript -->
+    <script src="{{ request.url_for('static', path='plugins/metisMenu/metisMenu.js') }}"></script>
+
+    <script src="{{ request.url_for('static', path='js/static.js') }}"></script>
+    <script src="{{ request.url_for('static', path='js/sb-admin-2.js') }}"></script>
+    <script src="{{ request.url_for('static', path='plugins/dataTables/jquery.dataTables.js') }}"></script>
+    <script src="{{ request.url_for('static', path='plugins/dataTables/dataTables.bootstrap.js') }}"></script>
+
+    <!-- Additional Javascript per Page -->
+    {% block javascript %}
+    {% endblock %}
+
+    <div id="common-templates">
+        <div class="control-buttons" data-bot-id="" data-botnet="">
+            <button type="submit" class="btn btn-default" title="Start" data-status-definition="starting" data-url="start"><span class="glyphicon glyphicon-play"></span></button>
+            <button type="submit" class="btn btn-default" title="Stop" data-status-definition="stopping" data-url="stop"><span class="glyphicon glyphicon-stop"></span></button>
+            <button type="submit" class="btn btn-default" title="Reload" data-status-definition="reloading" data-url="reload"><span class="glyphicon glyphicon-repeat"></span></button>
+            <button type="submit" class="btn btn-default" title="Restart" data-status-definition="restarting" data-url="restart"><span class="glyphicon glyphicon-refresh"></span></button>
+            <button type="submit" class="btn btn-default" title="Status" data-url="status"><span class="glyphicon glyphicon-arrow-down"></span></button>
+        </div>
+    </div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/intelmq/app/webgui/templates/base.mako b/intelmq/app/webgui/templates/base.mako
deleted file mode 100644
index a36aff559..000000000
--- a/intelmq/app/webgui/templates/base.mako
+++ /dev/null
@@ -1,181 +0,0 @@
-## SPDX-FileCopyrightText: 2020 IntelMQ Team <intelmq-team@cert.at>
-## SPDX-License-Identifier: AGPL-3.0-or-later
-
-<%!
-    import collections
-
-    Page = collections.namedtuple("Page", ["name", "title", "icon", "libraries"])
-    pages = [Page("configs", "Configuration", "config.png",
-                  ["plugins/vis.js/vis.js",
-                   "js/runtime.js",
-                   "js/positions.js",
-                   "js/defaults.js",
-                   "js/network-configuration.js",
-                   "js/configs.js",
-                   ]),
-             Page("management", "Management", "botnet.png",
-                  ["js/runtime.js", "js/management.js"]),
-             Page("monitor", "Monitor", "monitor.png",
-                  ["js/runtime.js",
-                   "js/defaults.js",
-                   "js/monitor.js"]),
-             Page("check", "Check", "check.png", ["js/check.js"]),
-             Page("about", "About", "about.png", ["js/about.js"])]
-
-    common_libraries =  [
-        "js/dynvar.js",
-        "js/var.js",
-        "js/intelmq-manager.js",
-        "js/static.js",
-        "js/sb-admin-2.js",
-        ## XX this don't have to be on every page:
-        "plugins/dataTables/jquery.dataTables.js",
-        "plugins/dataTables/dataTables.bootstrap.js",
-        ]
-
-    page_map = {page.name: page for page in pages}
-    page_map["index"] = Page("index", "", "", [])
-%>
-
-<!DOCTYPE html>
-<html lang="en">
-
-    <head>
-
-        <meta charset="utf-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <meta name="description" content="">
-        <meta name="author" content="">
-
-        <title>IntelMQ Manager</title>
-
-        <!-- Bootstrap Core CSS -->
-        <link href="plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
-
-        <!-- MetisMenu CSS -->
-        <link href="plugins/metisMenu/metisMenu.min.css" rel="stylesheet">
-
-        <!-- Vis.JS Plugin JavaScript (configs.html)-->
-        <link href="plugins/vis.js/vis.css" rel="stylesheet" type="text/css">
-
-        <!-- DataTables CSS (other files than configs.html) -->
-        <link href="plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
-
-        <!-- Custom Fonts -->
-        <link href="plugins/font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
-
-        <!-- Custom CSS -->
-        <link href="css/sb-admin-2.css" rel="stylesheet">
-        <link href="css/style.css" rel="stylesheet">
-
-        <link rel="icon" type="image/png" href="images/logo2.png">
-
-        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
-        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
-        <!--[if lt IE 9]>
-            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
-            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
-        <![endif]-->
-
-    </head>
-
-    <body>
-        <div id="wrapper">
-
-            <!-- Navigation -->
-            <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
-                <div class="navbar-header">
-                    <a class="navbar-brand" href="index.html"><img height="24px"  style="margin-right:10px; display:inline" src="./images/logo2.png"><img height="20px" src="./images/logo_no_margin_6.png" style="display:inline"/></a>
-                </div>
-                <!-- /.navbar-header -->
-
-                <ul class="nav navbar-top-links navbar-left">
-                    % for page in pages:
-                    <li class="${'active' if pagename == page.name else ''}">
-                        <a href="${page.name}.html">
-                            <span class="top-menu-text"><img src="./images/${page.icon}" width="24px" height="24px">&nbsp;${page.title}</span>
-                        </a>
-                    </li>
-                    % endfor
-                </ul>
-                <div id="login-status">Not logged in</div>
-                <div>
-                    <input type="button" value="Login" class="btn btn-primary" data-toggle="modal"
-                       data-target="#modalLoginForm" id="signUp" style="display: block;">
-                    <input type="button" value="Logout" id="logOut"
-                           class="btn btn-primary" style="display: none;">
-                </div>
-                <!-- /.navbar-top-links -->
-                <div title="Click to expand, then escape to minimize again." id='log-window'>
-                    <i role="close" class="fa fa-times"></i>
-                    <div class="contents"></div>
-                </div>
-            </nav>
-
-            <div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog"
-                 aria-labelledby="myModalLabel" aria-hidden="true">
-                <div class="modal-dialog" role="document">
-                    <div class="modal-content">
-                        <div class="modal-header text-center">
-                            <h4 class="modal-title w-100 font-weight-bold">Sign in</h4>
-                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                                <span aria-hidden="true">&times;</span>
-                            </button>
-                        </div>
-                        <form method="POST" id="loginForm">
-                            <div class="modal-body mx-3">
-                                <!-- Field to show if the username or password is wrong -->
-                                <p class="text-danger" id="loginErrorField"> </p>
-                                <div class="md-form mb-2">
-                                    <input type="text" id="username" name="username"
-                                           class="form-control">
-                                    <label data-error="wrong" data-success="right" for="username">
-                                        Username
-                                    </label>
-                                </div>
-                                <div class="md-form mb-2">
-                                    <input type="password" id="password" name="password"
-                                           class="form-control">
-                                    <label data-error="wrong" data-success="right" for="password">
-                                        Password
-                                    </label>
-                                </div>
-
-                            </div>
-                            <div class="modal-footer d-flex justify-content-center">
-                                <button class="btn btn-primary">Login</button>
-                            </div>
-                        </form>
-                    </div>
-                </div>
-            </div>
-
-            ${next.body()}
-
-            <script src="plugins/jquery-3.5.1.min.js"></script>
-
-            <!-- Bootstrap Core JavaScript -->
-            <script src="plugins/bootstrap/bootstrap.min.js"></script>
-
-            <!-- Metis Menu Plugin JavaScript -->
-            <script src="plugins/metisMenu/metisMenu.js"></script>
-
-            <!-- Custom Application JavaScript -->
-            % for lib in common_libraries + page_map[pagename].libraries:
-                <script src="${lib}"></script>
-            % endfor
-            ?>
-
-        </div>
-        <div id="common-templates">
-            <div class="control-buttons" data-bot-id="" data-botnet="">
-                <button type="submit" class="btn btn-default" title="Start" data-status-definition="starting" data-url="start"><span class="glyphicon glyphicon-play"></span></button>
-                <button type="submit" class="btn btn-default" title="Stop" data-status-definition="stopping" data-url="stop"><span class="glyphicon glyphicon-stop"></span></button>
-                <button type="submit" class="btn btn-default" title="Reload" data-status-definition="reloading" data-url="reload"><span class="glyphicon glyphicon-repeat"></span></button>
-                <button type="submit" class="btn btn-default" title="Restart" data-status-definition="restarting" data-url="restart"><span class="glyphicon glyphicon-refresh"></span></button>
-                <button type="submit" class="btn btn-default" title="Status" data-url="status"><span class="glyphicon glyphicon-arrow-down"></span></button>
-            </div>
-        </div>
-    </body>
-</html>
diff --git a/intelmq/app/webgui/templates/check.mako b/intelmq/app/webgui/templates/check.html
similarity index 66%
rename from intelmq/app/webgui/templates/check.mako
rename to intelmq/app/webgui/templates/check.html
index 0d027e177..8e49226aa 100644
--- a/intelmq/app/webgui/templates/check.mako
+++ b/intelmq/app/webgui/templates/check.html
@@ -1,8 +1,11 @@
-## SPDX-FileCopyrightText: 2020 IntelMQ Team <intelmq-team@cert.at>
-## SPDX-License-Identifier: AGPL-3.0-or-later
+{#SPDX-FileCopyrightText: 2020 IntelMQ Team <intelmq-team@cert.at>#}
+{#SPDX-License-Identifier: AGPL-3.0-or-later#}
 
-<%inherit file="base.mako" />
+{% extends "base.html" %}
 
+{% block title %}Check{% endblock %}
+
+{% block content %}
 <!-- Page Content -->
 <div id="page-wrapper">
     <div class="row" style="padding: 20px">
@@ -22,3 +25,8 @@ <h2>Check output</h2>
         </div>
     </div>
 </div>
+{% endblock %}
+
+{% block javascript %}
+<script src="{{ url_for('static', path='js/check.js') }}"></script>
+{% endblock %}
\ No newline at end of file
diff --git a/intelmq/app/webgui/templates/configs.mako b/intelmq/app/webgui/templates/configuration.html
similarity index 87%
rename from intelmq/app/webgui/templates/configs.mako
rename to intelmq/app/webgui/templates/configuration.html
index 61e0c4e80..cc057d0ab 100644
--- a/intelmq/app/webgui/templates/configs.mako
+++ b/intelmq/app/webgui/templates/configuration.html
@@ -1,8 +1,11 @@
-## SPDX-FileCopyrightText: 2020 IntelMQ Team <intelmq-team@cert.at>
-## SPDX-License-Identifier: AGPL-3.0-or-later
+{#SPDX-FileCopyrightText: 2020 IntelMQ Team <intelmq-team@cert.at>#}
+{#SPDX-License-Identifier: AGPL-3.0-or-later#}
 
-<%inherit file="base.mako" />
+{% extends "base.html" %}
 
+{% block title %}Configuration{% endblock %}
+
+{% block content %}
 <div class="navbar-default sidebar" role="navigation">
     <div class="sidebar-nav navbar-collapse">
         <ul class="nav" id="side-menu">
@@ -152,3 +155,13 @@ <h4 class="modal-title">Modal title</h4>
 
     </div>
 </div>
+{% endblock %}
+
+{% block javascript %}
+<script src="{{ request.url_for('static', path='plugins/vis.js/vis.js') }}"></script>
+<script src="{{ request.url_for('static', path='js/runtime.js') }}"></script>
+<script src="{{ request.url_for('static', path='js/positions.js') }}"></script>
+<script src="{{ request.url_for('static', path='js/defaults.js') }}"></script>
+<script src="{{ request.url_for('static', path='js/network-configuration.js') }}"></script>
+<script src="{{ request.url_for('static', path='js/configs.js') }}"></script>
+{% endblock %}
\ No newline at end of file
diff --git a/intelmq/app/webgui/templates/dynvar.mako b/intelmq/app/webgui/templates/dynvar.mako
deleted file mode 100644
index cb4f692c1..000000000
--- a/intelmq/app/webgui/templates/dynvar.mako
+++ /dev/null
@@ -1,5 +0,0 @@
-## SPDX-FileCopyrightText: 2021 Mikk Margus Möll <mikk@cert.ee>
-## SPDX-License-Identifier: AGPL-3.0-or-later
-
-var ALLOWED_PATH = "${allowed_path}";
-var CONTROLLER_CMD = "${controller_cmd}";
diff --git a/intelmq/app/webgui/templates/index.mako b/intelmq/app/webgui/templates/index.html
similarity index 67%
rename from intelmq/app/webgui/templates/index.mako
rename to intelmq/app/webgui/templates/index.html
index 91d8ebc0a..d46c5b0a8 100644
--- a/intelmq/app/webgui/templates/index.mako
+++ b/intelmq/app/webgui/templates/index.html
@@ -1,17 +1,19 @@
-## SPDX-FileCopyrightText: 2020 IntelMQ Team <intelmq-team@cert.at>
-## SPDX-License-Identifier: AGPL-3.0-or-later
+{#SPDX-FileCopyrightText: 2020 IntelMQ Team <intelmq-team@cert.at>#}
+{#SPDX-License-Identifier: AGPL-3.0-or-later#}
 
-<%inherit file="base.mako" />
+{% extends "base.html" %}
 
+{% block title %}Home{% endblock %}
 
+{% block content %}
 <div id="wrapper">
     <div id="page-wrapper">
         <!-- Jumbotron Header -->
         <div class="row jumbotron-row">
             <div class="col-md-12">
                 <header class="jumbotron header-img">
-                    <img height="100%" src="images/logo2.png" alt="Logo">
-                    <img height="100%" src="images/logo_no_margin_6.png" alt="IntelMQ Manager">
+                    <img height="100%" src="{{ url_for('static', path='images/logo2.png') }}" alt="Logo">
+                    <img height="100%" src="{{ url_for('static', path='images/logo_no_margin_6.png') }}" alt="IntelMQ">
                 </header>
             </div>
         </div>
@@ -20,9 +22,9 @@
         <div class="row center-row">
             <div class="col-md-9 col-sm-12 center-row-content">
                 <div class="col-md-4 col-sm-12">
-                    <a class="index-link" href="configs.html">
+                    <a class="index-link" href="{{ url_for('get_configuration') }}">
                         <div class="thumbnail">
-                            <img src="./images/config.png" alt="" width="100%" height="100%">
+                            <img src="{{ url_for('static', path='/images/configuration.png') }}" alt="" width="100%" height="100%">
                             <div class="caption">
                                 <h3>Configuration</h3>
                                 <p>To either change the currently deployed configuration or to create a new one in a graphical fashion.</p>
@@ -32,9 +34,9 @@ <h3>Configuration</h3>
                 </div>
 
                 <div class="col-md-4 col-sm-12">
-                    <a class="index-link" href="management.html">
+                    <a class="index-link" href="{{ url_for('get_management') }}">
                         <div class="thumbnail">
-                            <img src="./images/botnet.png" alt="">
+                            <img src="{{ url_for('static', path='/images/management.png') }}" alt="">
                             <div class="caption">
                                 <h3>Management</h3>
                                 <p>This is where you go to start/stop your bots or check on their status.</p>
@@ -44,9 +46,9 @@ <h3>Management</h3>
                 </div>
 
                 <div class="col-md-4 col-sm-12">
-                    <a class="index-link" href="monitor.html">
+                    <a class="index-link" href="{{ url_for('get_monitor') }}">
                         <div class="thumbnail">
-                            <img src="./images/monitor.png" alt="" >
+                            <img src="{{ url_for('static', path='/images/monitor.png') }}" alt="" >
                             <div class="caption">
                                 <h3>Monitor</h3>
                                 <p>This feature is meant to allow you to check on the overall status of your botnet. You can read the bot logs, see how the queues are behaving and other features that allow you to have a better overview of the overall health of the system.</p>
@@ -60,9 +62,9 @@ <h3>Monitor</h3>
         <div class="row center-row">
             <div class="col-md-9 col-sm-12 center-row-content">
                 <div class="col-md-6 col-sm-12">
-                    <a class="index-link" href="check.html">
+                    <a class="index-link" href="{{ url_for('get_check') }}">
                         <div class="thumbnail">
-                            <img src="./images/check.png" alt="" >
+                            <img src="{{ url_for('static', path='/images/check.png') }}" alt="" >
                             <div class="caption">
                                 <h3>Check</h3>
                                 <p>Check IntelMQ is running properly.</p>
@@ -72,9 +74,9 @@ <h3>Check</h3>
                 </div>
 
                 <div class="col-md-6 col-sm-12">
-                    <a class="index-link" href="about.html">
+                    <a class="index-link" href="{{ url_for('get_about') }}">
                         <div class="thumbnail">
-                            <img src="./images/about.png" alt="" >
+                            <img src="{{ url_for('static', path='/images/about.png') }}" alt="" >
                             <div class="caption">
                                 <h3>About</h3>
                                 <p>To learn more about the project's goals and contributors.</p>
@@ -88,3 +90,5 @@ <h3>About</h3>
         <!-- /.row -->
     </div>
 </div>
+{% endblock %}
+
diff --git a/intelmq/app/webgui/templates/management.mako b/intelmq/app/webgui/templates/management.html
similarity index 89%
rename from intelmq/app/webgui/templates/management.mako
rename to intelmq/app/webgui/templates/management.html
index 3830ad8ce..33f9d0e33 100644
--- a/intelmq/app/webgui/templates/management.mako
+++ b/intelmq/app/webgui/templates/management.html
@@ -1,9 +1,11 @@
-## SPDX-FileCopyrightText: 2020 IntelMQ Team <intelmq-team@cert.at>
-## SPDX-License-Identifier: AGPL-3.0-or-later
+{#SPDX-FileCopyrightText: 2020 IntelMQ Team <intelmq-team@cert.at>#}
+{#SPDX-License-Identifier: AGPL-3.0-or-later#}
 
-<%inherit file="base.mako" />
+{% extends "base.html" %}
 
-<!-- Page Content -->
+{% block title %}Management{% endblock %}
+
+{% block content %}
 <div id="page-wrapper">
     <div class="row">
         <div id="graph-container">
@@ -74,3 +76,9 @@ <h4 id="bot-status-panel-title">Individual Bot Status:</h4>
         </div>
     </div>
 </div>
+{% endblock %}
+
+{% block javascript %}
+<script src="{{ url_for('static', path='js/runtime.js') }}"></script>
+<script src="{{ url_for('static', path='js/management.js') }}"></script>
+{% endblock %}
diff --git a/intelmq/app/webgui/templates/monitor.mako b/intelmq/app/webgui/templates/monitor.html
similarity index 92%
rename from intelmq/app/webgui/templates/monitor.mako
rename to intelmq/app/webgui/templates/monitor.html
index 06ca50208..69f4ec87d 100644
--- a/intelmq/app/webgui/templates/monitor.mako
+++ b/intelmq/app/webgui/templates/monitor.html
@@ -1,8 +1,11 @@
-## SPDX-FileCopyrightText: 2020 IntelMQ Team <intelmq-team@cert.at>
-## SPDX-License-Identifier: AGPL-3.0-or-later
+{#SPDX-FileCopyrightText: 2020 IntelMQ Team <intelmq-team@cert.at>#}
+{#SPDX-License-Identifier: AGPL-3.0-or-later#}
 
-<%inherit file="base.mako" />
+{% extends "base.html" %}
 
+{% block title %}Monitor{% endblock %}
+
+{% block content %}
 <div class="navbar-default sidebar" role="navigation">
     <div class="sidebar-nav navbar-collapse">
         <ul class="nav" id="side-menu">
@@ -68,7 +71,7 @@ <h4 id="inspect-panel-title">Inspect</h4>
 
                             <button data-role="get" title="See the message that waits in the input (source or internal) queue">Get</button>
                             <button data-role="pop" title="See the message that waits in the input (source or internal) queue and pop it from there">Pop</button>
-                            <button data-role="send" title="Send directly, without processing) to the bot's ouput queue, just as it was sent by self.send_message() in bot's  process() method">Send</button>
+                            <button data-role="send" title="Send directly, without processing) to the bot's output queue, just as it was sent by self.send_message() in bot's process() method">Send</button>
                             <br>
                             <textarea  class="form-control" rows="3" placeholder='json message {"feed.name": "example", ...}&#10;Ctrl+Enter to process' id="message-playground"></textarea>
                             <br>
@@ -148,3 +151,11 @@ <h4 class="modal-title" id="modal-title">Entire message</h4>
         </div>
     </div>
 </div>
+{% endblock %}
+
+{% block javascript %}
+<script src="{{ request.url_for('static', path='js/runtime.js') }}"></script>
+<script src="{{ request.url_for('static', path='js/defaults.js') }}"></script>
+<script src="{{ request.url_for('static', path='js/monitor.js') }}"></script>
+{% endblock %}
+
diff --git a/intelmq/app/webgui/version.py b/intelmq/app/webgui/version.py
deleted file mode 100644
index d0f244d03..000000000
--- a/intelmq/app/webgui/version.py
+++ /dev/null
@@ -1,7 +0,0 @@
-""" Version file for intelmq-manager
-
-SPDX-FileCopyrightText: 2020-2021 Intelmq Team <intelmq-team@cert.at>, 2022-2023 Intevation GmbH
-SPDX-License-Identifier: AGPL-3.0-or-later
-"""
-__version_info__ = (3, 2, 0)
-__version__ = '.'.join(map(str, __version_info__))