diff --git a/doc/source/_ext/cont.py b/doc/source/_ext/cont.py
index a6f64a5..4c22130 100644
--- a/doc/source/_ext/cont.py
+++ b/doc/source/_ext/cont.py
@@ -138,13 +138,13 @@ def container_item_html(self, node):
 def navigator_html(self, node):
     # This method renders containers of service groups with links to the
     # document of the specified type
-    data = f'<div class="{node["class"]} row row-cols-1 row-cols-md-3 g-4">'
+    data = f'<div class="{node["class"]} container-docsportal">'
 
     for cat in METADATA.service_categories:
         category = cat["name"]
         category_title = cat["title"]
         data += (
-            f'<div class="col"><div class="card">'
+            f'<div class="card item-docsportal">'
             f'<div class="card-body">'
             f'<h5 class="card-title">{category_title}</h5></div>'
             f'<ul class="list-group list-group-flush">'
@@ -170,7 +170,7 @@ def navigator_html(self, node):
                     f'</div></a></li>'
                 )
 
-        data += '</ul></div></div>'
+        data += '</ul></div>'
 
     data += '</div>'
 
@@ -181,12 +181,12 @@ def navigator_html(self, node):
 def service_group_html(self, node):
     # This method renders containers per each service of the category with all
     # links as individual list items
-    data = '<div class="row row-cols-1 row-cols-md-3 g-4">'
+    data = '<div class="container-docsportal">'
     for k, v in METADATA.services_with_docs_by_category(
             node['service_category'], environment=node['environment']).items():
         title = v["service_title"]
         data += (
-            f'<div class="col"><div class="card">'
+            f'<div class="card item-docsportal">'
             f'<div class="card-body"><h5 class="card-title">'
             f'{title}</h5></div>'
             f'<ul class="list-group list-group-flush">'
@@ -203,7 +203,7 @@ def service_group_html(self, node):
                 f'</div></a></li>'
             )
         # Row end
-        data += '</ul></div></div>'
+        data += '</ul></div>'
     data += '</div>'
 
     self.body.append(data)
diff --git a/doc/source/_static/css/default.css b/doc/source/_static/css/default.css
index e1a0986..988e4de 100644
--- a/doc/source/_static/css/default.css
+++ b/doc/source/_static/css/default.css
@@ -56,3 +56,41 @@
 .docs-sidebar-toc li.toctree-l2:not(.current) > ul {
     display: none;
 }
+
+/* Card Design */
+
+.container-docsportal {
+  display: flex;
+  align-items: stretch;
+  align-content: space-between;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin-top: 2em;
+  gap: 1em; /* needs to be substracted from item size */
+}
+
+@media (min-width: 768px) {
+  .item-docsportal {
+    flex-basis: calc(33.333% - 1em); /* needs gap in container-docsportal */
+    box-sizing: border-box;
+    align-self: stretch;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .item-docsportal {
+    flex-basis: calc(100% - 1em); /* needs gap in container-docsportal */
+    box-sizing: border-box;
+    align-self: stretch;
+  }
+}
+
+.item-docsportal>.list-group:last-child {
+  margin-bottom: 1em;
+}
+
+.item-docsportal>.card-body {
+  flex: none;
+}
+
+/* End Card-Design */