diff --git a/cookbook/templates/system.html b/cookbook/templates/system.html
index 8f7d83910..6fd5dfb5c 100644
--- a/cookbook/templates/system.html
+++ b/cookbook/templates/system.html
@@ -1,16 +1,26 @@
-{% extends "base.html" %}
 {% load static %}
 {% load i18n %}
+<!DOCTYPE html>
+<html lang="{{ LANGUAGE_CODE }}">
+<head>
+    <title>Tandoor</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, minimal-ui, shrink-to-fit=no">
+    <meta name="robots" content="noindex,nofollow"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
 
-{% block title %}{% trans "Cookbook Setup" %}{% endblock %}
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
 
-{% block extra_head %}
-    {{ form.media }}
-{% endblock %}
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js" integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q"
+            crossorigin="anonymous"></script>
+</head>
+<body>
+<div class="container">
 
-{% block content %}
 
-    <h1>{% trans 'System' %}</h1>
+    <h1 >{% trans 'System' %}</h1>
     {% blocktrans %}
         Tandoor Recipes is an open source free software application. It can be found on
         <a href="https://github.com/TandoorRecipes/recipes">GitHub</a>.
@@ -43,7 +53,7 @@
         {% endblocktrans %}
     {% endif %}
 
-    <h4 class="mt-3">{% trans 'Media Serving' %} <span class="badge badge-{% if gunicorn_media %}danger{% else %}success{% endif %}">{% if gunicorn_media %}
+    <h4 class="mt-3">{% trans 'Media Serving' %} <span class="badge text-bg-{% if gunicorn_media %}danger{% else %}success{% endif %}">{% if gunicorn_media %}
         {% trans 'Warning' %}{% else %}{% trans 'Ok' %}{% endif %}</span></h4>
     {% if gunicorn_media %}
         {% blocktrans %}Serving media files directly using gunicorn/python is <b>not recommend</b>!
@@ -57,7 +67,7 @@
 
 
     <h4 class="mt-3">{% trans 'Secret Key' %} <span
-            class="badge badge-{% if secret_key %}danger{% else %}success{% endif %}">{% if secret_key %}
+            class="badge text-bg-{% if secret_key %}danger{% else %}success{% endif %}">{% if secret_key %}
         {% trans 'Warning' %}{% else %}{% trans 'Ok' %}{% endif %}</span></h4>
     {% if secret_key %}
         {% blocktrans %}
@@ -71,7 +81,7 @@
     {% endif %}
 
     <h4 class="mt-3">{% trans 'Debug Mode' %} <span
-            class="badge badge-{% if debug %}danger{% else %}success{% endif %}">{% if debug %}
+            class="badge text-bg-{% if debug %}danger{% else %}success{% endif %}">{% if debug %}
         {% trans 'Warning' %}{% else %}{% trans 'Ok' %}{% endif %}</span></h4>
     {% if debug %}
         {% blocktrans %}
@@ -84,7 +94,7 @@
     {% endif %}
 
     <h4 class="mt-3">{% trans 'Allowed Hosts' %} <span
-            class="badge badge-{% if '*' in allowed_hosts %}warning{% else %}success{% endif %}">{% if '*' in allowed_hosts %}
+            class="badge text-bg-{% if '*' in allowed_hosts %}warning{% else %}success{% endif %}">{% if '*' in allowed_hosts %}
         {% trans 'Warning' %}{% else %}{% trans 'Ok' %}{% endif %}</span></h4>
     {% if debug %}
         {% blocktrans %}
@@ -95,7 +105,7 @@
     {% endif %}
 
     <h4 class="mt-3">{% trans 'Database' %}
-        <span class="badge badge-{{ postgres_status }}">
+        <span class="badge text-bg-{{ postgres_status }}">
             {% if postgres_status == 'warning' %}
                 {% trans 'Info' %}
             {% elif postgres_status == 'danger' %}
@@ -109,7 +119,7 @@
 
     <h4 class="mt-3">{% trans 'Migrations' %}
         <span
-                class="badge badge-{% if missing_migration %}danger{% else %}success{% endif %}">{% if missing_migration %}
+                class="badge text-bg-{% if missing_migration %}danger{% else %}success{% endif %}">{% if missing_migration %}
             {% trans 'Warning' %}{% else %}{% trans 'Ok' %}{% endif %}</span></h4>
 
     <p>
@@ -132,7 +142,7 @@
 
                 <td>{{ value.app }}</td>
                 <td class="text-right">
-                     <span class="badge badge-{% if value.unapplied_migrations|length > 0 %}danger{% else %}success{% endif %}">
+                     <span class="badge text-bg-{% if value.unapplied_migrations|length > 0 %}danger{% else %}success{% endif %}">
                          {{ value.applied_migrations|length }} / {{ value.total }}
                      </span>
                 </td>
@@ -153,7 +163,7 @@
     {#    <h4 class="mt-3">#}
     {#    {% trans 'Orphaned Files' %}#}
     {##}
-    {#    <span class="badge badge-{% if orphans|length == 0 %}success{% elif orphans|length <= 25 %}warning{% else %}danger{% endif %}">#}
+    {#    <span class="badge text-bg-{% if orphans|length == 0 %}success{% elif orphans|length <= 25 %}warning{% else %}danger{% endif %}">#}
     {#        {% if orphans|length == 0 %}{% trans 'Success' %}#}
     {#        {% elif orphans|length <= 25 %}{% trans 'Warning' %}#}
     {#        {% else %}{% trans 'Danger' %}#}
@@ -176,32 +186,32 @@
     {#{% endfor %}#}
     {#    </textarea>#}
     {% if api_space_stats %}
-    <h4 class="mt-3">API Stats</h4>
-    <h6 >Space Stats</h6>
-    <table class="table table-bordered table-striped">
-        {% for r in api_space_stats %}
-            <tr>
-                {% for c in r %}
-                    <td>
-                        {{ c }}
-                    </td>
-                {% endfor %}
-            </tr>
-        {% endfor %}
-    </table>
+        <h4 class="mt-3">API Stats</h4>
+        <h6>Space Stats</h6>
+        <table class="table table-bordered table-striped">
+            {% for r in api_space_stats %}
+                <tr>
+                    {% for c in r %}
+                        <td>
+                            {{ c }}
+                        </td>
+                    {% endfor %}
+                </tr>
+            {% endfor %}
+        </table>
 
-    <h6 >Endpoint Stats</h6>
-    <table class="table table-bordered table-striped">
-        {% for r in api_stats %}
-            <tr>
-                {% for c in r %}
-                    <td>
-                        {{ c }}
-                    </td>
-                {% endfor %}
-            </tr>
-        {% endfor %}
-    </table>
+        <h6>Endpoint Stats</h6>
+        <table class="table table-bordered table-striped">
+            {% for r in api_stats %}
+                <tr>
+                    {% for c in r %}
+                        <td>
+                            {{ c }}
+                        </td>
+                    {% endfor %}
+                </tr>
+            {% endfor %}
+        </table>
     {% endif %}
     <h4 class="mt-3">Debug</h4>
     <textarea class="form-control" rows="20">
@@ -223,27 +233,34 @@ Sqlite: {% if postgres %} {% trans 'False' %} {% else %} {% trans 'True' %} {% e
         {% csrf_token %}
         <input type="hidden" name="delete_orphans" value="false">
     </form>
-    {% block script %}
-        <script>
-            function toggleOrphans() {
-                var orphansList = document.getElementById('orphans-list');
-                var button = document.getElementById('toggle-button');
 
-                if (orphansList.style.display === 'none') {
-                    orphansList.style.display = 'block';
-                    button.innerText = "{% trans 'Hide' %}";
-                } else {
-                    orphansList.style.display = 'none';
-                    button.innerText = "{% trans 'Show' %}";
-                }
-            }
-
-            function deleteOrphans() {
-                document.getElementById('delete-form').delete_orphans.value = 'true';
-                document.getElementById('delete-form').submit();
-            }
-        </script>
-    {% endblock script %}
-{% endblock %}
+</div>
+
+
+<script type="application/javascript">
+
+
+    function toggleOrphans() {
+        var orphansList = document.getElementById('orphans-list');
+        var button = document.getElementById('toggle-button');
+
+        if (orphansList.style.display === 'none') {
+            orphansList.style.display = 'block';
+            button.innerText = "{% trans 'Hide' %}";
+        } else {
+            orphansList.style.display = 'none';
+            button.innerText = "{% trans 'Show' %}";
+        }
+    }
+
+    function deleteOrphans() {
+        document.getElementById('delete-form').delete_orphans.value = 'true';
+        document.getElementById('delete-form').submit();
+    }
+
+</script>
+
+</body>
+</html>
 
 
