diff --git a/templates/index.html b/templates/index.html
index 96c15b1..b89b708 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,17 +1,31 @@
-<!-- templates/index.html -->
+<!-- web_panel/templates/index.html -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Admin Panel</title>
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
-    <h1>Discord Bot Admin Panel</h1>
-    <p>Bot Status: {{ "Running" if bot_running else "Stopped" }}</p>
-    <a href="{{ url_for('start') }}">Start Bot</a>
-    <a href="{{ url_for('stop') }}">Stop Bot</a>
-    <a href="{{ url_for('settings') }}">Settings</a>
-    <a href="{{ url_for('logout') }}">Logout</a>
+    <div class="container mt-5">
+        <h1 class="text-center">Discord Bot Admin Panel</h1>
+        <div class="card mt-4">
+            <div class="card-body">
+                <h5 class="card-title">Bot Status</h5>
+                <p class="card-text">Status: 
+                    <span class="badge badge-{{ 'success' if bot_running else 'danger' }}">
+                        {{ "Running" if bot_running else "Stopped" }}
+                    </span>
+                </p>
+                <a href="{{ url_for('start') }}" class="btn btn-primary btn-block {{ 'disabled' if bot_running else '' }}">Start Bot</a>
+                <a href="{{ url_for('stop') }}" class="btn btn-danger btn-block {{ 'disabled' if not bot_running else '' }}">Stop Bot</a>
+                <a href="{{ url_for('settings') }}" class="btn btn-secondary btn-block">Settings</a>
+                <a href="{{ url_for('logout') }}" class="btn btn-outline-secondary btn-block">Logout</a>
+            </div>
+        </div>
+    </div>
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
 </body>
 </html>
diff --git a/templates/login.html b/templates/login.html
index dbeafa5..c47f0e7 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -1,19 +1,36 @@
-<!-- templates/login.html -->
+<!-- web_panel/templates/login.html -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Login</title>
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
-    <h1>Admin Panel Login</h1>
-    <form method="POST" action="{{ url_for('login') }}">
-        <label for="username">Username:</label>
-        <input type="text" id="username" name="username" required>
-        <label for="password">Password:</label>
-        <input type="password" id="password" name="password" required>
-        <button type="submit">Login</button>
-    </form>
+    <div class="container mt-5">
+        <div class="row justify-content-center">
+            <div class="col-md-6">
+                <div class="card">
+                    <div class="card-body">
+                        <h1 class="text-center">Admin Panel Login</h1>
+                        <form method="POST" action="{{ url_for('login') }}">
+                            <div class="form-group">
+                                <label for="username">Username</label>
+                                <input type="text" id="username" name="username" class="form-control" required>
+                            </div>
+                            <div class="form-group">
+                                <label for="password">Password</label>
+                                <input type="password" id="password" name="password" class="form-control" required>
+                            </div>
+                            <button type="submit" class="btn btn-primary btn-block">Login</button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
 </body>
 </html>
diff --git a/templates/settings.html b/templates/settings.html
index 9d14eed..17b48e7 100644
--- a/templates/settings.html
+++ b/templates/settings.html
@@ -1,17 +1,26 @@
-<!-- templates/settings.html -->
+<!-- web_panel/templates/settings.html -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Settings</title>
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
-    <h1>Bot Settings</h1>
-    <form method="POST" action="{{ url_for('settings') }}">
-        <!-- Hier kannst du Formulare für Bot-Einstellungen einfügen -->
-        <button type="submit">Save Settings</button>
-    </form>
-    <a href="{{ url_for('index') }}">Back to Dashboard</a>
+    <div class="container mt-5">
+        <h1 class="text-center">Bot Settings</h1>
+        <div class="card mt-4">
+            <div class="card-body">
+                <form method="POST" action="{{ url_for('settings') }}">
+                    <!-- Hier kannst du Formulare für Bot-Einstellungen einfügen -->
+                    <button type="submit" class="btn btn-primary btn-block">Save Settings</button>
+                </form>
+                <a href="{{ url_for('index') }}" class="btn btn-secondary btn-block mt-3">Back to Dashboard</a>
+            </div>
+        </div>
+    </div>
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
 </body>
 </html>
