diff --git a/backend/static/css/app.css b/backend/static/css/app.css
new file mode 100644
index 0000000000..98b4f93874
--- /dev/null
+++ b/backend/static/css/app.css
@@ -0,0 +1,79 @@
+.page {
+    background-color: #f4f6fc;
+}
+
+.page-dark [data-bs-toggle="tooltip"] {
+    color: white;
+    border: none !important;
+}
+
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 30px;
+    height: 19px;
+    margin-right: 3px;
+}
+
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 15px;
+    width: 15px;
+    left: 2px;
+    bottom: 2px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+input:checked + .slider {
+    background-color: black;
+}
+
+input:focus + .slider {
+    box-shadow: 0 0 1px black;
+}
+
+input:checked + .slider:before {
+    -webkit-transform: translateX(10px);
+    -ms-transform: translateX(10px);
+    transform: translateX(10px);
+}
+
+/* Rounded sliders */
+.slider.round {
+    border-radius: 15px;
+}
+
+.slider.round:before {
+    border-radius: 50%;
+}
+
+.toggle-btn {
+    margin-right: 10px;
+    width: 90px;
+}
+
+.toggle-btn i {
+    vertical-align: text-top;
+    margin-right: 2px;
+}
diff --git a/backend/templates/base.html b/backend/templates/base.html
index 316be108d7..1bfef2993d 100644
--- a/backend/templates/base.html
+++ b/backend/templates/base.html
@@ -11,6 +11,7 @@
         </title>
         <link rel="stylesheet"
               href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
+        <link rel="stylesheet" href="{% static 'css/app.css' %}" />
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
               rel="stylesheet"
               integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
@@ -23,14 +24,11 @@
         <script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/relativeTime.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-        <style>
-            .page {
-                background-color: #f4f6fc;
-            }
-        </style>
+        {% block extra_css %}
+        {% endblock extra_css %}
     </head>
     <body class="page">
-        {% block content %}
+        <div id="theme-toggle-app">
             <div class="banner">
                 <nav class="navbar navbar-expand-lg sticky-top border-bottom border-body mb-4"
                      data-bs-theme="light"
@@ -57,8 +55,65 @@
                             </div>
                         </div>
                     </div>
+                    <div class="toggle-btn">
+                        <theme-toggle></theme-toggle>
+                    </div>
                 </nav>
             </div>
+        </div>
+        {% block content %}
         {% endblock content %}
+        <script>
+            const ThemeToggle = {
+                template: `
+            <i class="fa-regular fa-lightbulb"></i>
+                <label class="switch">
+                    <input type="checkbox" v-model="isDarkTheme" @change="toggleTheme">
+                    <span class="slider round"></span>
+                </label>
+                <i class="fa-solid fa-moon"></i>
+        `,
+                data() {
+                    return {
+                        isDarkTheme: false
+                    }
+                },
+                mounted() {
+                    const currentTheme = localStorage.getItem('theme')
+                    if (currentTheme) {
+                        this.isDarkTheme = currentTheme === 'dark'
+                        this.applyTheme()
+                    }
+                },
+                methods: {
+                    toggleTheme() {
+                        this.applyTheme()
+                        localStorage.setItem('theme', this.isDarkTheme ? 'dark' : 'light')
+                    },
+                    applyTheme() {
+                        document.documentElement.setAttribute('data-bs-theme', this.isDarkTheme ? 'dark' : 'light')
+                        if (this.isDarkTheme) {
+                            document.body.classList.remove("page");
+                            document.body.classList.add("page-dark");
+
+                        } else {
+                            document.body.classList.remove("page-dark");
+                            document.body.classList.add("page");
+                        }
+
+                    }
+                }
+            }
+
+            const themeToggleApp = Vue.createApp({
+                components: {
+                    ThemeToggle
+                }
+            })
+
+            themeToggleApp.mount('#theme-toggle-app')
+        </script>
+        {% block extra_js %}
+        {% endblock extra_js %}
     </body>
 </html>
