diff --git a/cogs/web/static/configuration.css b/cogs/web/static/configuration.css
new file mode 100644
index 0000000..fca533e
--- /dev/null
+++ b/cogs/web/static/configuration.css
@@ -0,0 +1,88 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #2c3e50;
+    color: #fff;
+}
+
+.logo {
+    width: 25;
+    height: 25;
+}
+
+header {
+    background-color: #3e4982;
+    color: #fff;
+    padding: 20px;
+    text-align: center;
+}
+
+header h1 {
+    margin: 0;
+}
+
+.container {
+    display: flex;
+}
+
+table {
+    font-family: Arial, Helvetica, sans-serif;
+    border-collapse: collapse;
+    width: 100%;
+}
+
+table td,
+#status th {
+    border: 1px solid #ddd;
+    padding: 8px;
+}
+
+table tr:nth-child(even) {
+    background-color: #1c567d;
+}
+
+table tr:hover {
+    background-color: #2980b9;
+}
+
+table th {
+    padding-top: 12px;
+    padding-bottom: 12px;
+    text-align: left;
+    background-color: #04AA6D;
+    color: white;
+}
+
+nav {
+    background-color: #34495e;
+    width: 200px;
+    padding: 20px;
+    text-align: center;
+}
+
+nav ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+nav li a {
+    color: #fff;
+    text-decoration: none;
+    padding: 10px 0;
+    display: block;
+}
+
+nav li a:hover {
+    background-color: #2980b9;
+}
+
+.selected {
+    background-color: #2980b9;
+}
+
+main {
+    padding: 20px;
+    flex-grow: 1;
+}
\ No newline at end of file
diff --git a/cogs/web/static/dashboard.css b/cogs/web/static/dashboard.css
new file mode 100644
index 0000000..b92a2c9
--- /dev/null
+++ b/cogs/web/static/dashboard.css
@@ -0,0 +1,88 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #2c3e50;
+    color: #fff;
+}
+
+.logo {
+    width: 25;
+    height: 25;
+}
+
+header {
+    background-color: #3e4982;
+    color: #fff;
+    padding: 20px;
+    text-align: center;
+}
+
+header h1 {
+    margin: 0;
+}
+
+.container {
+    display: flex;
+}
+
+table {
+    font-family: Arial, Helvetica, sans-serif;
+    border-collapse: collapse;
+    width: 100%;
+}
+
+table td,
+#status th {
+    border: 1px solid #ddd;
+    padding: 8px;
+}
+
+table tr:nth-child(even) {
+    background-color: #1c567d;
+}
+
+table tr:hover {
+    background-color: #2980b9;
+}
+
+table th {
+    padding-top: 12px;
+    padding-bottom: 12px;
+    text-align: left;
+    background-color: #04AA6D;
+    color: white;
+}
+
+nav {
+    background-color: #34495e;
+    width: 200px;
+    padding: 20px;
+    text-align: center;
+}
+
+nav ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+nav li a {
+    color: #fff;
+    text-decoration: none;
+    padding: 10px 0;
+    display: block;
+}
+
+nav li a:hover {
+    background-color: #2980b9;
+}
+
+.selected {
+    background-color: #2980b9;
+}
+
+main {
+    padding: 20px;
+    flex-grow: 1;
+}
diff --git a/cogs/web/static/index.css b/cogs/web/static/index.css
new file mode 100644
index 0000000..9ac95ae
--- /dev/null
+++ b/cogs/web/static/index.css
@@ -0,0 +1,61 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #2c3e50;
+    color: #fff;
+}
+.selected {
+    background-color: #2980b9;
+}
+.logo {
+    width: 25;
+    height: 25;
+}
+
+header {
+    background-color: #3e4982;
+    color: #fff;
+    padding: 20px;
+    text-align: center;
+}
+
+header h1 {
+    margin: 0;
+}
+
+.container {
+    display: flex;
+}
+
+nav {
+    background-color: #34495e;
+    width: 200px;
+    padding: 20px;
+    text-align: center;
+}
+
+nav ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+nav li a {
+    color: #fff;
+    text-decoration: none;
+    padding: 10px 0;
+    display: block;
+}
+
+nav li a:hover {
+    background-color: #2980b9;
+}
+
+main {
+    padding: 20px;
+    flex-grow: 1;
+}
+
+
+
diff --git a/cogs/web/static/js/configuration.js b/cogs/web/static/js/configuration.js
new file mode 100644
index 0000000..4aa072e
--- /dev/null
+++ b/cogs/web/static/js/configuration.js
@@ -0,0 +1,66 @@
+const form = document.querySelector("form");
+const tokenInput = form.querySelector("#token");
+const nameInput = form.querySelector("#name");
+const statusSelect = form.querySelector("#status");
+
+// set the token input as password field
+tokenInput.setAttribute("type", "password");
+
+// function to get the config values from the server
+const getConfigValues = async () => {
+    try {
+        const tokenResponse = await fetch('/api/token');
+        const tokenValue = await tokenResponse.text();
+        tokenInput.value = tokenValue;
+
+        const nameResponse = await fetch('/api/name');
+        const nameValue = await nameResponse.text();
+        nameInput.value = nameValue;
+
+        const statusResponse = await fetch('/api/status');
+        const statusValue = await statusResponse.text();
+        statusSelect.value = statusValue;
+    } catch (error) {
+        console.error(error);
+    }
+}
+
+getConfigValues();
+
+form.addEventListener("submit", async (event) => {
+    event.preventDefault();
+    const token = tokenInput.value;
+    const name = nameInput.value;
+    const status = statusSelect.value;
+
+    try {
+        // send POST request to /api/token endpoint with token as the body
+        if (token !== '') {
+            await fetch('/api/token', {
+                method: 'POST',
+                body: token
+            });
+        }
+
+
+        // send POST request to /api/name endpoint with name as the body
+        if (name !== '') {
+            await fetch('/api/name', {
+                method: 'POST',
+                body: name
+            });
+        }
+
+
+        // send POST request to /api/status endpoint with status as the body
+        if (status !== '') {
+            await fetch('/api/status', {
+                method: 'POST',
+                body: status
+            });
+        }
+
+    } catch (error) {
+        console.error(error);
+    }
+});
\ No newline at end of file
diff --git a/cogs/web/static/plugins.css b/cogs/web/static/plugins.css
new file mode 100644
index 0000000..fca533e
--- /dev/null
+++ b/cogs/web/static/plugins.css
@@ -0,0 +1,88 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #2c3e50;
+    color: #fff;
+}
+
+.logo {
+    width: 25;
+    height: 25;
+}
+
+header {
+    background-color: #3e4982;
+    color: #fff;
+    padding: 20px;
+    text-align: center;
+}
+
+header h1 {
+    margin: 0;
+}
+
+.container {
+    display: flex;
+}
+
+table {
+    font-family: Arial, Helvetica, sans-serif;
+    border-collapse: collapse;
+    width: 100%;
+}
+
+table td,
+#status th {
+    border: 1px solid #ddd;
+    padding: 8px;
+}
+
+table tr:nth-child(even) {
+    background-color: #1c567d;
+}
+
+table tr:hover {
+    background-color: #2980b9;
+}
+
+table th {
+    padding-top: 12px;
+    padding-bottom: 12px;
+    text-align: left;
+    background-color: #04AA6D;
+    color: white;
+}
+
+nav {
+    background-color: #34495e;
+    width: 200px;
+    padding: 20px;
+    text-align: center;
+}
+
+nav ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+nav li a {
+    color: #fff;
+    text-decoration: none;
+    padding: 10px 0;
+    display: block;
+}
+
+nav li a:hover {
+    background-color: #2980b9;
+}
+
+.selected {
+    background-color: #2980b9;
+}
+
+main {
+    padding: 20px;
+    flex-grow: 1;
+}
\ No newline at end of file
diff --git a/cogs/web/templates/configuration.html b/cogs/web/templates/configuration.html
new file mode 100644
index 0000000..c416904
--- /dev/null
+++ b/cogs/web/templates/configuration.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>MEE2 Configuration</title>
+    <link href="{{ url_for('static', filename='configuration.css') }}" rel="stylesheet" type="text/css" />
+    <script src="{{ url_for('static', filename='js/configuration.js') }}"></script>
+    <link rel="icon" type="image/x-icon" href="https://cdn.discordapp.com/app-icons/1004808089834373230/e30029e50ec03472f1fe236a43d38684.png?size=512">
+</head>
+
+<body>
+    <header>
+        <h1>MEE2 Configuration</h1>
+    </header>
+    <div class="container">
+        <nav>
+            <ul>
+              <li><a href="/">Home</a></li>
+              <li><a href="/dashboard">Dashboard</a></li>
+              <li><a href="#" class="selected">Configuration</a></li>
+              <li><a href="/logs">Logs</a></li>
+              <li><a href="/support">Support</a></li>
+            </ul>
+        </nav>
+        <main>
+            <form>
+                <label for="token">Token:</label>
+                <input type="password" id="token" name="token">
+                <br>
+                <label for="name">Bot Name:</label>
+                <input type="text" id="name" name="name">
+                <br>
+                <label for="status">Status:</label>
+                <select id="status" name="status">
+                    <option value="online">Online</option>
+                    <option value="idle">Idle</option>
+                    <option value="dnd">Do Not Disturb</option>
+                    <option value="invisible">Invisible</option>
+                </select>
+                <br>
+                <input type="submit" value="Save Changes">
+            </form>
+        </main>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/cogs/web/templates/dashboard.html b/cogs/web/templates/dashboard.html
new file mode 100644
index 0000000..8913275
--- /dev/null
+++ b/cogs/web/templates/dashboard.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>MEE2 Dashboard</title>
+    <link href="{{ url_for('static', filename='dashboard.css') }}" rel="stylesheet" type="text/css" />
+    <link rel="icon" type="image/x-icon" href="https://cdn.discordapp.com/app-icons/1004808089834373230/e30029e50ec03472f1fe236a43d38684.png?size=512">
+</head>
+
+<body>
+    <header>
+        <h1>MEE2 - Admin Dashboard</h1>
+    </header>
+    <div class="container">
+        <nav>
+            <ul>
+                <li><a href="/">Home</a></li>
+                <li><a href="#" class="selected">Dashboard</a></li>
+                <li><a href="/plugins">Plugins</a></li>
+                <li><a href="/configuration">Configuration</a></li>
+                <li><a href="/logs">Logs</a></li>
+                <li><a href="/support">Support</a></li>
+            </ul>
+        </nav>
+        <main>
+            <p>This is the admin dashboard. Here you can see important thing like the uptime, hits per minute, cogs status etc..</p>
+            <table id="status">
+                <tr>
+                    <th>Module</th>
+                    <th>Status</th>
+                    <th>Module link</th>
+                </tr>
+                <tr>
+                    <td>Uptime</td>
+                    <td>1 Year</td>
+                    <td><a href="/api/uptime">/api/uptime</a></td>
+                </tr>
+                <tr>
+                    <td>Hits Per Minute</td>
+                    <td>10</td>
+                    <td><a href="/api/hpm">/api/hpm</a></td>
+                </tr>
+                <tr>
+                    <td>Plugin - Fivem</td>
+                    <td>Online</td>
+                    <td><a href="/plugins/fivem">/plugins/fivem</a></td>
+                </tr>
+            </table>
+        </main>
+
+    </div>
+</body>
+
+</html>
diff --git a/cogs/web/templates/index.html b/cogs/web/templates/index.html
new file mode 100644
index 0000000..5413691
--- /dev/null
+++ b/cogs/web/templates/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>MEE2 Index</title>
+    <link rel="icon" type="image/x-icon" href="https://cdn.discordapp.com/app-icons/1004808089834373230/e30029e50ec03472f1fe236a43d38684.png?size=512">
+    <link href="{{ url_for('static', filename='index.css') }}" rel="stylesheet" type="text/css" />
+
+</head>
+
+<body>
+    <header>
+        <h1>MEE2</h1>
+    </header>
+    <div class="container">
+        <nav>
+            <ul>
+                <li class="selected"><a href="#">Home</a></li>
+                <li><a href="/dashboard">Dashboard</a></li>
+                <li><a href="/plugins">Plugins</a></li>
+                <li><a href="/configuration">Configuration</a></li>
+                <li><a href="/logs">Logs</a></li>
+                <li><a href="/support">Support</a></li>
+            </ul>
+        </nav>
+        <main>
+            <h2>Welcome to the MEE2 index page.</h2>
+            <p>This bot is designed to help you with various tasks and make your life easier</p>
+            <p>Here you can find information about the bot's features, plugins, configuration, and support. All this info is public. If you want you can turn it off in the settings page.</p>
+        </main>
+    </div>
+</body>
+
+</html>
diff --git a/cogs/web/templates/plugins.html b/cogs/web/templates/plugins.html
new file mode 100644
index 0000000..970ce15
--- /dev/null
+++ b/cogs/web/templates/plugins.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>MEE2 Plugins</title>
+    <link href="{{ url_for('static', filename='plugins.css') }}" rel="stylesheet" type="text/css" />
+    <link rel="icon" type="image/x-icon" href="https://cdn.discordapp.com/app-icons/1004808089834373230/e30029e50ec03472f1fe236a43d38684.png?size=512">
+</head>
+
+<body>
+    <header>
+        <h1>MEE2 - Plugins</h1>
+    </header>
+    <div class="container">
+        <nav>
+            <ul>
+                <li><a href="/">Home</a></li>
+                <li><a href="/dashboard">Dashboard</a></li>
+                <li><a href="#" class="selected">Plugins</a></li>
+                <li><a href="/configuration">Configuration</a></li>
+                <li><a href="/logs">Logs</a></li>
+                <li><a href="/support">Support</a></li>
+            </ul>
+        </nav>
+        <main>
+          <p>This is the plugin page here you can disable/enable the individual cogs.</p>
+            <table id="status">
+                <tr>
+                    <th>Plugin</th>
+                    <th>Status</th>
+                    <th>Plugin link</th>
+                </tr>
+                <tr>
+                    <td>Uptime</td>
+                    <td>1 Year</td>
+                    <td><a href="/api/uptime">/api/uptime</a></td>
+                </tr>
+                <tr>
+                    <td>Hits Per Minute</td>
+                    <td>10</td>
+                    <td><a href="/api/hpm">/api/hpm</a></td>
+                </tr>
+                <tr>
+                    <td>Plugin - Fivem</td>
+                    <td>Online</td>
+                    <td><a href="/plugins/fivem">/plugins/fivem</a></td>
+                </tr>
+            </table>
+        </main>
+
+    </div>
+</body>
+
+</html>
\ No newline at end of file