diff --git a/plinth/templates/cards.html b/plinth/templates/cards.html
index 7edf9a75f..9bc5ed742 100644
--- a/plinth/templates/cards.html
+++ b/plinth/templates/cards.html
@@ -37,6 +37,7 @@
         {% for item in submenu.sorted_items %}
           <div class="card thumbnail">
             <a href="{{ item.url }}" class="nav-link">
+              <div class="card-title">{{ item.name }}</div>
               <div class="card-icon">
                 {% if 'glyphicon-' in item.icon %}
                   <span class="{{ item.icon }} glyphicon"></span>
@@ -44,7 +45,6 @@
                   <img src="{% static 'theme/icons/' %}{{ item.icon }}.png"/>
                 {% endif %}
               </div>
-              <div class="card-title">{{ item.name }}</div>
               <div class="card-description">{{ item.short_description}}</div>
             </a>
           </div>
diff --git a/static/themes/default/css/plinth.css b/static/themes/default/css/plinth.css
index eb7c06eee..a4ad23450 100644
--- a/static/themes/default/css/plinth.css
+++ b/static/themes/default/css/plinth.css
@@ -327,21 +327,26 @@ a.menu_link_active {
 
 .card .nav-link {
     display: block;
-    padding: 20px 4px 4px 4px;
-}
-
-.card-title, .card-description {
-    margin: 4px;
-    color: #333;
+    padding: 4px;
+    color: #646464;
 }
 
 .card-title {
-    font-weight: bold;
-    font-size: 1.75rem;
+    font-style: italic;
+    font-weight: 800;
+    font-size: 20px;
+    padding: 12px 0;
 }
 
 .card-description {
-    font-size: small;
+   font-size: 18px;
+   font-weight: 400;
+   padding: 12px 0;
+}
+
+.card-description {
+    color: #646464;
+    font-size: 12px;
 }
 
 .card-icon {