diff --git a/templates/dashboard.html b/templates/dashboard.html
index b763e5d..a9874cd 100644
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -1,34 +1,67 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Dashboard</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
-    <h1>Dashboard</h1>
+    <div class="container py-5">
+        <h1 class="text-center mb-4">Dashboard</h1>
 
-    <h2>Players</h2>
-    <ul>
-        {% for player in players %}
-            <li>
-                {{ player.username }} ({{ player.ip }})
-                <a href="{{ url_for('player_page', player_id=player.id) }}">View Schedule</a>
-            </li>
-        {% endfor %}
-    </ul>
-    <a href="{{ url_for('add_player') }}">Add Player</a>
+        <!-- Players Section -->
+        <div class="card mb-4">
+            <div class="card-header bg-primary text-white">
+                <h2>Players</h2>
+            </div>
+            <div class="card-body">
+                <ul class="list-group">
+                    {% for player in players %}
+                        <li class="list-group-item d-flex justify-content-between align-items-center">
+                            <div>
+                                <strong>{{ player.username }}</strong> ({{ player.ip }})
+                            </div>
+                            <a href="{{ url_for('player_page', player_id=player.id) }}" class="btn btn-sm btn-secondary">View Schedule</a>
+                        </li>
+                    {% endfor %}
+                </ul>
+                <div class="mt-3">
+                    <a href="{{ url_for('add_player') }}" class="btn btn-success">Add Player</a>
+                </div>
+            </div>
+        </div>
 
-    <h2>Groups</h2>
-    <ul>
-        {% for group in groups %}
-    <li>
-        {{ group.name }} ({{ group.players | length }} players)
-    </li>
-{% endfor %}
+        <!-- Groups Section -->
+        <div class="card mb-4">
+            <div class="card-header bg-success text-white">
+                <h2>Groups</h2>
+            </div>
+            <div class="card-body">
+                <ul class="list-group">
+                    {% for group in groups %}
+                        <li class="list-group-item">
+                            <strong>{{ group.name }}</strong> ({{ group.players | length }} players)
+                        </li>
+                    {% endfor %}
+                </ul>
+                <div class="mt-3">
+                    <a href="{{ url_for('add_group') }}" class="btn btn-primary">Add Group</a>
+                </div>
+            </div>
+        </div>
 
-    </ul>
-    <a href="{{ url_for('add_group') }}">Add Group</a>
+        <!-- Content Upload Section -->
+        <div class="card mb-4">
+            <div class="card-header bg-warning text-dark">
+                <h2>Content Upload</h2>
+            </div>
+            <div class="card-body text-center">
+                <a href="{{ url_for('upload_content') }}" class="btn btn-warning btn-lg">Upload Content</a>
+            </div>
+        </div>
+    </div>
 
-    <h2>Content Upload</h2>
-    <a href="{{ url_for('upload_content') }}">Upload Content</a>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
 </body>
 </html>
