diff --git a/src/structables/static/css/style.css b/src/structables/static/css/style.css
index 6962e61..22d85b5 100644
--- a/src/structables/static/css/style.css
+++ b/src/structables/static/css/style.css
@@ -320,4 +320,35 @@ iframe {
 
 .text-muted {
   color: #6c757d !important;
+}
+
+
+
+.sitemap-group .card {
+  background-color: var(--primary-bg);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  box-shadow: 0 2px 4px var(--shadow-color);
+  overflow: hidden;
+}
+
+.sitemap-group .card-title {
+  font-size: 1.5em;
+  margin-bottom: 0.5em;
+}
+
+.sitemap-group .list-unstyled {
+  padding-left: 0;
+}
+
+.sitemap-group .list-unstyled li {
+  margin-bottom: 0.5em;
+}
+
+.sitemap-group .list-unstyled li a {
+  color: var(--link-color);
+}
+
+.sitemap-group .list-unstyled li a:hover {
+  text-decoration: underline;
 }
\ No newline at end of file
diff --git a/src/structables/templates/sitemap.html b/src/structables/templates/sitemap.html
index 4011540..ef9da67 100644
--- a/src/structables/templates/sitemap.html
+++ b/src/structables/templates/sitemap.html
@@ -1,23 +1,27 @@
 {% extends "base.html" %}
 
 {% block content %}
-	<center>
-		<h1>Sitemap</h1>
-		<div class="container">
-			<div class="row sitemap-groups"></div>
-			{% for group in groups %}
-			<div class="sitemap-group col-xs-12 col-sm-6 col-lg-4">
-				<a href="{{ group[1] }}">
-					<h2>{{ group[0] }}</h2>
-				</a>
-				<ul>
-					{% for channel in group[2] %}
-					<li><a href="{{ channel[1] }}">{{ channel[0] }}</a></li>
-					{% endfor %}
-				</ul>
-			</div>
-			{% endfor %}
-		</div>
-		</div>
-	</center>
+<div class="container my-5">
+    <div class="text-center mb-5">
+        <h1>Sitemap</h1>
+    </div>
+    <div class="row">
+        {% for group in groups %}
+        <div class="sitemap-group col-xs-12 col-sm-6 col-lg-4 mb-4">
+            <div class="card h-100">
+                <div class="card-body">
+                    <h2 class="card-title">
+                        <a href="{{ group[1] }}" class="text-decoration-none">{{ group[0] }}</a>
+                    </h2>
+                    <ul class="list-unstyled">
+                        {% for channel in group[2] %}
+                        <li><a href="{{ channel[1] }}" class="text-decoration-none">{{ channel[0] }}</a></li>
+                        {% endfor %}
+                    </ul>
+                </div>
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+</div>
 {% endblock %}
\ No newline at end of file