diff --git a/static/css/style.css b/static/css/style.css
index 34329de..364f4ba 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -26,13 +26,21 @@
 }
 
 .progress-bar {
-  border-radius: 20px !important;
-  transition: width 0.4s ease;
-  flex-direction: column;
-  justify-content: center;
-  white-space: nowrap;
+  border-radius: 0 !important;
+  transition: width 0.4s ease, background-color 0.4s ease;
 }
 
+.progress-bar:first-child {
+  border-top-left-radius: 20px !important;
+  border-bottom-left-radius: 20px !important;
+}
+
+.progress-bar:last-child {
+  border-top-right-radius: 20px !important;
+  border-bottom-right-radius: 20px !important;
+}
+
+
 /* rodzic już ma position-relative */
 .progress-label {
   position: absolute;
diff --git a/templates/admin/admin_panel.html b/templates/admin/admin_panel.html
index aa49152..ec4453b 100644
--- a/templates/admin/admin_panel.html
+++ b/templates/admin/admin_panel.html
@@ -61,7 +61,7 @@
             <span>{{ name }}</span>
             <span class="badge rounded-pill bg-secondary opacity-75">{{ count }}×</span>
           </div>
-          <div class="progress" style="height: 6px;">
+          <div class="progress bg-transparent" style=" height: 6px;">
             <div class="progress-bar bg-success" role="progressbar" style="width: {{ (count / max_count) * 100 }}%"
               aria-valuenow="{{ count }}" aria-valuemin="0" aria-valuemax="{{ max_count }}">
             </div>
@@ -184,8 +184,8 @@
               </td>
               <td>{{ e.total_count }}</td>
               <td>
-                <div class="progress" style="height: 14px;">
-                  <div class="progress-bar 
+                <div class="progress bg-transparent" style=" height: 14px;">
+                  <div class="progress-bar fw-bold text-black text-cente
                       {% if e.percent >= 80 %}bg-success
                       {% elif e.percent >= 40 %}bg-warning
                       {% else %}bg-danger{% endif %}" role="progressbar" style="width: {{ e.percent }}%">
diff --git a/templates/list.html b/templates/list.html
index ac13720..ab9e3a5 100644
--- a/templates/list.html
+++ b/templates/list.html
@@ -73,10 +73,15 @@
 </h5>
 
 <div class="progress progress-dark position-relative">
-  <div id="progress-bar-purchased" class="progress-bar bg-success" role="progressbar"></div>
-  <div id="progress-bar-not-purchased" class="progress-bar bg-danger" role="progressbar"></div>
-  <div id="progress-bar-remaining" class="progress-bar bg-transparent" role="progressbar"></div>
-
+  <div id="progress-bar-purchased" class="progress-bar bg-success" role="progressbar" data-bs-toggle="tooltip"
+    title="Kupione produkty">
+  </div>
+  <div id="progress-bar-not-purchased" class="progress-bar bg-warning" role="progressbar" data-bs-toggle="tooltip"
+    title="Oznaczone jako niekupione">
+  </div>
+  <div id="progress-bar-remaining" class="progress-bar bg-transparent" role="progressbar" data-bs-toggle="tooltip"
+    title="Pozostałe do kupienia">
+  </div>
   <span id="progress-label" class="progress-label small fw-bold"></span>
 </div>
 
diff --git a/templates/main.html b/templates/main.html
index fbd20e7..1f7fed3 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -106,7 +106,7 @@
 
       {# Niekupione #}
       {% set not_purchased_count = l.not_purchased_count if l.total_count else 0 %}
-      <div class="progress-bar bg-danger" role="progressbar"
+      <div class="progress-bar bg-warning" role="progressbar"
         style="width: {{ (not_purchased_count / total_count * 100) if total_count > 0 else 0 }}%" aria-valuemin="0"
         aria-valuemax="100"></div>
 
@@ -162,7 +162,7 @@
 
       {# Niekupione #}
       {% set not_purchased_count = l.not_purchased_count if l.total_count else 0 %}
-      <div class="progress-bar bg-danger" role="progressbar"
+      <div class="progress-bar bg-warning" role="progressbar"
         style="width: {{ (not_purchased_count / total_count * 100) if total_count > 0 else 0 }}%" aria-valuemin="0"
         aria-valuemax="100"></div>