diff --git a/static/css/style.css b/static/css/style.css
index 3841a6c..5b0b90e 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -991,4 +991,11 @@ td select.tom-dark {
 @media (min-width: 421px) {
   .user-label-desktop { display: inline !important; }
   .user-label-mobile  { display: none !important; }
-}
\ No newline at end of file
+}
+
+.badge.rounded-circle.category-dot {
+  min-width: 0.75rem !important;
+  padding: 0 !important;
+  font-size: 0 !important;
+  line-height: 1 !important;
+}
diff --git a/templates/main.html b/templates/main.html
index 259b1d7..995159d 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -84,10 +84,14 @@
         </a>
 
         {% for cat in l.category_badges %}
-        <span class="badge rounded-pill text-dark ms-1"
-              style="background-color: {{ cat.color }}; font-size: 0.56rem; opacity: 0.85;">
-          {{ cat.name }}
-        </span>
+          <span class="badge rounded-pill text-dark ms-1 d-none d-sm-inline"
+                style="background-color: {{ cat.color }}; font-size: 0.56rem; opacity: 0.85;">
+            {{ cat.name }}
+          </span>
+          <span class="badge rounded-circle ms-1 d-sm-none category-dot"
+                style="width: 0.75rem; height: 0.75rem; background-color: {{ cat.color }}; 
+                      border: 1px solid rgba(255,255,255,0.4); opacity: 0.95;"
+                title="{{ cat.name }}" aria-label="Kategoria: {{ cat.name }}"></span>
         {% endfor %}
       </span>
 
@@ -191,10 +195,14 @@
         </a>
 
         {% for cat in l.category_badges %}
-        <span class="badge rounded-pill text-dark ms-1"
-              style="background-color: {{ cat.color }}; font-size: 0.56rem; opacity: 0.85;">
-          {{ cat.name }}
-        </span>
+          <span class="badge rounded-pill text-dark ms-1 d-none d-sm-inline"
+                style="background-color: {{ cat.color }}; font-size: 0.56rem; opacity: 0.85;">
+            {{ cat.name }}
+          </span>
+          <span class="badge rounded-circle ms-1 d-sm-none category-dot"
+                style="width: 0.75rem; height: 0.75rem; background-color: {{ cat.color }}; 
+                      border: 1px solid rgba(255,255,255,0.4); opacity: 0.95;"
+                title="{{ cat.name }}" aria-label="Kategoria: {{ cat.name }}"></span>
         {% endfor %}
       </span>