diff --git a/static/css/style.css b/static/css/style.css
index 9848dac..d53fad6 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -904,17 +904,16 @@ td select.tom-dark {
 
 
 /* ================================================
-   RESPONSIVE NAVBAR - zachowaj teksty, ale mniejsze
+   RESPONSIVE NAVBAR
    ================================================ */
 
 /* Wąskie ekrany (np. iPhone 11) */
 @media (max-width: 420px) {
-    /* Navbar: zmniejsz odstępy w poziomie */
+
     .navbar .container-fluid {
         gap: 4px;
     }
 
-    /* Logo: zostaje "Lista Zakupów", ale mniejsze */
     .navbar-brand-compact {
         font-size: 0.9rem !important;
         margin-right: 0.25rem;
@@ -934,7 +933,6 @@ td select.tom-dark {
         padding: 0.2rem 0.45rem;
     }
 
-    /* Przyciski po prawej: tylko emoji (tekst chowamy) */
     .nav-buttons-compact .nav-btn-text {
         display: none !important;
     }
@@ -969,7 +967,6 @@ td select.tom-dark {
         font-size: 0.75rem;
     }
 
-    /* Tu tekst w przyciskach może zostać (ale mniejszy) */
     .nav-buttons-compact {
         flex-wrap: nowrap;
     }
@@ -982,7 +979,6 @@ td select.tom-dark {
     }
 }
 
-/* Mobile-only / Desktop-only helpery (jeśli nie chcesz polegać na d-sm-*) */
 @media (max-width: 420px) {
   .user-label-desktop { display: none !important; }
   .user-label-mobile  { display: inline !important; }
@@ -993,22 +989,30 @@ td select.tom-dark {
   .user-label-mobile  { display: none !important; }
 }
 
-.category-dot {
+.category-dot-pure {
   display: inline-block !important;
   width: 14px !important;
   height: 14px !important;
   border-radius: 50% !important;
   border: 2px solid rgba(255, 255, 255, 0.8) !important;
-  background-clip: content-box !important;
+  background-clip: content-box, border-box !important;
   vertical-align: middle !important;
-  margin-right: 2px !important;
+  margin-right: 3px !important;
   opacity: 1 !important;
-  font-size: 8px !important;
+  padding: 0 !important;
   line-height: 1 !important;
-  cursor: help !important;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
+  font-size: 0 !important;
+  text-indent: -9999px !important;
+  overflow: hidden !important;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
 }
 
+.category-dot-pure::before,
+.category-dot-pure::after {
+  content: none !important;
+}
+
+
 /* Hover efekt */
 .category-dot:hover {
   transform: scale(1.3) !important;
diff --git a/templates/main.html b/templates/main.html
index 2e0bb4d..a5261e2 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -84,18 +84,16 @@
         </a>
 
         {% for cat in l.category_badges %}
-          <!-- DESKTOP: nazwa kategorii -->
+          <!-- DESKTOP: nazwa -->
           <span class="badge rounded-pill text-dark ms-1 d-none d-sm-inline fw-semibold"
                 style="background-color: {{ cat.color }}; font-size: 0.7rem; opacity: 0.9; padding: 0.3em 0.6em;">
             {{ cat.name }}
           </span>
           
-          <!-- MOBILE: DUŻA kolorowa kropka -->
-          <span class="ms-1 d-sm-none category-dot"
+          <!-- MOBILE -->
+          <span class="ms-1 d-sm-none category-dot-pure"
                 style="background-color: {{ cat.color }};"
-                title="{{ cat.name }}" aria-label="Kategoria: {{ cat.name }}">
-            ●
-          </span>
+                title="{{ cat.name }}" aria-label="Kategoria: {{ cat.name }}"></span>
         {% endfor %}
       </span>
 
@@ -199,18 +197,16 @@
         </a>
 
         {% for cat in l.category_badges %}
-          <!-- DESKTOP: nazwa kategorii -->
+          <!-- DESKTOP: nazwa -->
           <span class="badge rounded-pill text-dark ms-1 d-none d-sm-inline fw-semibold"
                 style="background-color: {{ cat.color }}; font-size: 0.7rem; opacity: 0.9; padding: 0.3em 0.6em;">
             {{ cat.name }}
           </span>
           
-          <!-- MOBILE: DUŻA kolorowa kropka -->
-          <span class="ms-1 d-sm-none category-dot"
+          <!-- MOBILE -->
+          <span class="ms-1 d-sm-none category-dot-pure"
                 style="background-color: {{ cat.color }};"
-                title="{{ cat.name }}" aria-label="Kategoria: {{ cat.name }}">
-            ●
-          </span>
+                title="{{ cat.name }}" aria-label="Kategoria: {{ cat.name }}"></span>
         {% endfor %}
       </span>