diff --git a/src/fellchensammlung/static/fellchensammlung/css/styles.css b/src/fellchensammlung/static/fellchensammlung/css/styles.css
index f1b753e..9596be3 100644
--- a/src/fellchensammlung/static/fellchensammlung/css/styles.css
+++ b/src/fellchensammlung/static/fellchensammlung/css/styles.css
@@ -298,4 +298,27 @@ h1 {
 
 .inline {
     display: inline;
+}
+
+.container-list-rules {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+
+.card-rule {
+    width: 25%;
+    margin: 10px;
+    margin-bottom: 20px;
+
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    padding: 2%;
+    box-sizing: border-box;
+}
+
+@media (max-width: 920px) {
+    .card-rule {
+        width: 100%;
+    }
 }
\ No newline at end of file
diff --git a/src/fellchensammlung/templates/fellchensammlung/list-rules.html b/src/fellchensammlung/templates/fellchensammlung/list-rules.html
index f170da5..f765fdf 100644
--- a/src/fellchensammlung/templates/fellchensammlung/list-rules.html
+++ b/src/fellchensammlung/templates/fellchensammlung/list-rules.html
@@ -1,4 +1,4 @@
-<div class="list-rules">
+<div class="container-list-rules">
 {% for rule in rules %}
     {% include "fellchensammlung/partial-rule.html" %}
 {% endfor %}
diff --git a/src/fellchensammlung/templates/fellchensammlung/partial-rule.html b/src/fellchensammlung/templates/fellchensammlung/partial-rule.html
index 6a10865..f78d488 100644
--- a/src/fellchensammlung/templates/fellchensammlung/partial-rule.html
+++ b/src/fellchensammlung/templates/fellchensammlung/partial-rule.html
@@ -1,3 +1,5 @@
 {% load custom_tags %}
-<h2>{{ rule.title }}</h2>
-<p>{{ rule.rule_text | render_markdown }}</p>
\ No newline at end of file
+<div class="card-rule">
+    <h2>{{ rule.title }}</h2>
+    <p>{{ rule.rule_text | render_markdown }}</p>
+</div>
\ No newline at end of file