diff --git a/app/app.py b/app/app.py
index 5e71d72..0d9ac81 100644
--- a/app/app.py
+++ b/app/app.py
@@ -5,6 +5,7 @@ import hashlib
 import yaml
 from utils.configuration_resolver import ConfigurationResolver
 from utils.cache_manager import CacheManager
+from utils.compute_card_classes import compute_card_classes
 
 # Initialize the CacheManager
 cache_manager = CacheManager()
@@ -47,7 +48,17 @@ def reload_config_in_dev():
     
 @app.route('/')
 def index():
-    return render_template("pages/index.html.j2", cards=app.config["cards"], company=app.config["company"], navigation=app.config["navigation"], platform=app.config["platform"])
+    cards = app.config["cards"]
+    lg_classes, md_classes = compute_card_classes(cards)
+    return render_template(
+        "pages/index.html.j2",
+        cards=cards,
+        company=app.config["company"],
+        navigation=app.config["navigation"],
+        platform=app.config["platform"],
+        lg_classes=lg_classes,
+        md_classes=md_classes
+    )
 
 if __name__ == "__main__":
     app.run(debug=(FLASK_ENV == "development"), host="0.0.0.0", port=5000)
diff --git a/app/templates/pages/index.html.j2 b/app/templates/pages/index.html.j2
index d7a6bd5..60f19a4 100644
--- a/app/templates/pages/index.html.j2
+++ b/app/templates/pages/index.html.j2
@@ -2,53 +2,10 @@
 
 {% block content %}
 <div class="row">
-    {% set num_cards = cards | length %}
-    {% set lg_classes = [] %}
-    
-    {# Compute `lg` column widths: Ensure at least 3 per row unless fewer than 3 exist #}
-    {% if num_cards < 3 %}
-        {% if num_cards == 2 %}
-            {% set lg_classes = ["col-lg-6", "col-lg-6"] %}
-        {% else %}
-            {% set lg_classes = ["col-lg-12"] %}
-        {% endif %}
-    {% elif num_cards % 4 == 0 %}
-        {% set lg_classes = ["col-lg-3"] * num_cards %}
-    {% elif num_cards % 3 == 0 %}
-        {% set lg_classes = ["col-lg-4"] * num_cards %}
-    {% elif num_cards % 2 == 0 %}
-        {% set lg_classes = ["col-lg-6"] * num_cards %}
-    {% else %}
-        {# Distribute for complex cases (e.g., 5, 7, 11) while ensuring at least 3 per row #}
-        {% for i in range(num_cards) %}
-            {% if num_cards % 4 == 3 %}
-                {% if i < 3 %}
-                    {% set _ = lg_classes.append("col-lg-4") %}
-                {% else %}
-                    {% set _ = lg_classes.append("col-lg-3") %}
-                {% endif %}
-            {% elif num_cards % 4 == 1 %}
-                {% if i < 2 %}
-                    {% set _ = lg_classes.append("col-lg-6") %}
-                {% elif i < 5 %}
-                    {% set _ = lg_classes.append("col-lg-4") %}
-                {% else %}
-                    {% set _ = lg_classes.append("col-lg-3") %}
-                {% endif %}
-            {% elif num_cards % 3 == 2 %}
-                {% if i < 2 %}
-                    {% set _ = lg_classes.append("col-lg-6") %}
-                {% else %}
-                    {% set _ = lg_classes.append("col-lg-4") %}
-                {% endif %}
-            {% endif %}
-        {% endfor %}
-    {% endif %}
-
     {% for card in cards %}
-        {% set index = loop.index0 %}  {# Index starts at 0 #}
+        {% set index = loop.index0 %}
         {% set lg_class = lg_classes[index] %}
-        {% set md_class = "col-md-6" if num_cards % 2 == 0 or index < num_cards - 1 else "col-md-12" %}
+        {% set md_class = md_classes[index] %}
         {% include "moduls/card.html.j2" %}
     {% endfor %}
 </div>
diff --git a/app/utils/compute_card_classes.py b/app/utils/compute_card_classes.py
new file mode 100644
index 0000000..8700598
--- /dev/null
+++ b/app/utils/compute_card_classes.py
@@ -0,0 +1,42 @@
+def compute_card_classes(cards):
+    num_cards = len(cards)
+    lg_classes = []
+    if num_cards < 3:
+        if num_cards == 2:
+            lg_classes = ["col-lg-6", "col-lg-6"]
+        else:
+            lg_classes = ["col-lg-12"]
+    elif num_cards % 4 == 0:
+        lg_classes = ["col-lg-3"] * num_cards
+    elif num_cards % 3 == 0:
+        lg_classes = ["col-lg-4"] * num_cards
+    elif num_cards % 2 == 0:
+        lg_classes = ["col-lg-6"] * num_cards
+    else:
+        # Für komplexe Fälle (z. B. 5, 7, 11) – Stelle sicher, dass mindestens 3 pro Zeile erscheinen
+        for i in range(num_cards):
+            if num_cards % 4 == 3:
+                if i < 3:
+                    lg_classes.append("col-lg-4")
+                else:
+                    lg_classes.append("col-lg-3")
+            elif num_cards % 4 == 1:
+                if i < 2:
+                    lg_classes.append("col-lg-6")
+                elif i < 5:
+                    lg_classes.append("col-lg-4")
+                else:
+                    lg_classes.append("col-lg-3")
+            elif num_cards % 3 == 2:
+                if i < 2:
+                    lg_classes.append("col-lg-6")
+                else:
+                    lg_classes.append("col-lg-4")
+    # md-Klassen: Wenn die Anzahl der Karten gerade ist oder wenn nicht die letzte Karte, ansonsten "col-md-12"
+    md_classes = []
+    for i in range(num_cards):
+        if num_cards % 2 == 0 or i < num_cards - 1:
+            md_classes.append("col-md-6")
+        else:
+            md_classes.append("col-md-12")
+    return lg_classes, md_classes
\ No newline at end of file