diff --git a/plinth/templates/card.html b/plinth/templates/card.html
index cbc30c8cb..13e912374 100644
--- a/plinth/templates/card.html
+++ b/plinth/templates/card.html
@@ -20,7 +20,7 @@
     </div>
     <div class="card-title">{{ item.name }}</div>
     <div class="card-tags">
-      {% for tag in item.tags|slice:":3" %}{% trans tag %}{% if not forloop.last %}・{% endif %}{% endfor %}
+      {% for tag in item.tags|slice:":3" %}<span class="tag">{% trans tag %}</span>{% if not forloop.last %}<span class="tag-separator"></span>{% endif %}{% endfor %}
     </div>
   </a>
 </div>
diff --git a/plinth/templates/index.html b/plinth/templates/index.html
index 67b0c76aa..c82ca63f4 100644
--- a/plinth/templates/index.html
+++ b/plinth/templates/index.html
@@ -76,7 +76,7 @@
                           {{ shortcut.name }}
                         </div>
                         <div class="card-tags">
-                          {% for tag in shortcut.tags|slice:":3" %}{% trans tag %}{% if not forloop.last %}・{% endif %}{% endfor %}
+                          {% for tag in shortcut.tags|slice:":3" %}<span class="tag">{% trans tag %}</span>{% if not forloop.last %}<span class="tag-separator"></span>{% endif %}{% endfor %}
                         </div>
                     </a>
                 </div>
diff --git a/static/themes/default/css/main.css b/static/themes/default/css/main.css
index c100ba7f6..a6dee5f3e 100644
--- a/static/themes/default/css/main.css
+++ b/static/themes/default/css/main.css
@@ -660,6 +660,15 @@ footer {
     margin: 0.5rem 0;
 }
 
+.card .tag-separator {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>%3ccircle style='fill:%236c757d' cx='8' cy='8' r='8'/%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    display: inline-block;
+    width: 0.1875rem;
+    height: 0.375rem;
+    margin: 0 0.5rem;
+}
+
 /* System page - special card styling */
 .system-page .card-list {
     justify-content: left;