diff --git a/plinth/templates/card.html b/plinth/templates/card.html
index 40b1b3f42..6466433c3 100644
--- a/plinth/templates/card.html
+++ b/plinth/templates/card.html
@@ -6,7 +6,6 @@
 
 <div class="card">
   <a href="{{ item.url }}" class="nav-link">
-    <div class="card-title">{{ item.name }}</div>
     <div class="card-icon">
       {% if 'fa-' in item.icon %}
         <span class="fa {{ item.icon }}"></span>
@@ -18,6 +17,7 @@
         {% endif %}
       {% endif %}
     </div>
+    <div class="card-title">{{ item.name }}</div>
     <div class="card-description">{{ item.short_description|default:'' }}</div>
   </a>
 </div>
diff --git a/plinth/templates/index.html b/plinth/templates/index.html
index 57bb2d6be..1e12f6d5e 100644
--- a/plinth/templates/index.html
+++ b/plinth/templates/index.html
@@ -61,9 +61,6 @@
                   {% else %}
                     <a href="{{ shortcut.url }}" class="nav-link">
                   {% endif %}
-                        <div class="card-title">
-                          {{ shortcut.name }}
-                        </div>
                         <div class="card-icon">
                           {% if "custom" in shortcut.icon %}
                             <img src="{{ shortcut.icon }}"/>
@@ -75,6 +72,9 @@
                             {% endif %}
                           {% endif %}
                         </div>
+                        <div class="card-title">
+                          {{ shortcut.name }}
+                        </div>
                         <div class="card-description">
                           {{ shortcut.short_description|default:'' }}
                         </div>
diff --git a/static/themes/default/css/main.css b/static/themes/default/css/main.css
index a59e01a22..4d199d2e9 100644
--- a/static/themes/default/css/main.css
+++ b/static/themes/default/css/main.css
@@ -562,7 +562,7 @@ a.menu_link_active {
     text-align: center;
     box-shadow: 0 0.1875rem 0.3125rem 0 rgba(0,0,0,0.12);
     width: 10rem;
-    padding: 0;
+    padding: 0.5rem 0.25rem;
     margin: 0 0.625rem 1.25rem;
     border: none;
     border-radius: 0.5rem;
@@ -575,21 +575,20 @@ a.menu_link_active {
 
 .card .nav-link {
     display: block;
-    padding: 0.25rem;
+    padding: 0rem;
     color: #212529;  /* Same as Bootstrap default color */
 }
 
 .card-title {
     font-size: 1.25rem;
-    padding: 0.75rem 0;
+    padding: 0.25rem 0;
     margin-bottom: 0;
 }
 
 .card-description {
     font-weight: 400;
-    padding: 0.75rem 0;
     color: #646464;
-    font-size: 0.75rem;
+    font-size: 0.875rem;
 }
 
 .card-icon span,
@@ -597,12 +596,14 @@ a.menu_link_active {
     width: 6.25rem;
     height: 6.25rem;
     font-size: 5rem;
+    margin: 0.5rem 0;
 }
 
 /* System page - special card styling */
 .system-page .card {
     text-align: left;
     width: 19.375rem;
+    padding: 0;
 }
 
 .system-page .card .nav-link {