diff --git a/static/css/custom.css b/static/css/custom.css
index 18cffc6..9e8a77d 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -1,7 +1,7 @@
 /* Import czcionki Roboto */
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
 
-/* Ustawienia globalne */
+/* Globalne */
 body {
     font-family: 'Roboto', sans-serif;
     background-color: #121212;
@@ -34,7 +34,7 @@ body {
 
 /* Karty */
 .card {
-    background-color: #1c1c1c;
+    background-color: #444242;
     border: none;
     border-radius: 0.5rem;
     box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6);
@@ -54,7 +54,7 @@ body {
 }
 
 .card-body {
-    background-color: #1e1e1e;
+    background-color: #444242;
 }
 
 /* Przyciski */
@@ -101,6 +101,12 @@ a:hover {
     background: linear-gradient(90deg, #ffc107, #ffeb3b);
     font-weight: bold;
     transition: width 0.3s ease;
+    animation: progressAnimation 1s ease-in-out forwards;
+}
+
+@keyframes progressAnimation {
+    from { width: 0%; }
+    to { width: var(--progress-width); }
 }
 
 /* Alerty (flash messages) */
@@ -132,21 +138,11 @@ a:hover {
     }
 }
 
-h1 {
-    font-size: 2rem; 
-    margin-bottom: 1rem;
-}
-h2 {
-    font-size: 1.7rem; 
-    margin-bottom: 0.8rem;
-}
+h1 { font-size: 2rem; margin-bottom: 1rem; }
+h2 { font-size: 1.7rem; margin-bottom: 0.8rem; }
+h3 { font-size: 0.9rem; margin-bottom: 0.6rem; }
 
-h3 {
-    font-size: 0.9rem; 
-    margin-bottom: 0.6rem;
-}
-
-/* Style dla bloku "Wspomóż" */
+/* Wspomóż */
 .card.wspomoz-card {
     border: 1px solid #ffc107 !important;
     border-radius: 0.2rem !important;
@@ -155,5 +151,7 @@ h3 {
 .card.wspomoz-card .card-body,
 .card.wspomoz-card .card-title,
 .card.wspomoz-card .card-text {
-    color: #ffffff !important;          
-}
+    color: #ffffff !important;  
+    font-weight: bold;    
+    font-size: 1.25rem;    
+}
\ No newline at end of file
diff --git a/templates/admin/edit_zbiorka.html b/templates/admin/edit_zbiorka.html
index 2b58a40..e2ac143 100644
--- a/templates/admin/edit_zbiorka.html
+++ b/templates/admin/edit_zbiorka.html
@@ -3,7 +3,7 @@
 {% block content %}
 <div class="container my-4">
   <div class="card shadow-sm">
-    <div class="card-header bg-primary text-white">
+    <div class="card-header bg-success text-white">
       <h3 class="card-title mb-0">Edytuj zbiórkę</h3>
     </div>
     <div class="card-body">
diff --git a/templates/base.html b/templates/base.html
index 61d9dbd..b222460 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -36,5 +36,23 @@
         {% block content %}{% endblock %}
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        // Funkcja aktualizująca animację paska postępu
+        function animateProgressBars() {
+            document.querySelectorAll('.progress-bar').forEach(bar => {
+                const progressValue = bar.getAttribute('aria-valuenow');
+                bar.style.setProperty('--progress-width', progressBarWidth(progressBarValue(progressBar)));
+            });
+        }
+        
+        // Funkcja wywoływana przy ładowaniu strony
+        document.addEventListener('DOMContentLoaded', () => {
+            document.querySelectorAll('.progress-bar').forEach(bar => {
+                const width = bar.getAttribute('aria-valuenow') + '%';
+                bar.style.setProperty('--progress-width', width);
+            });
+        });
+        </script>
+        
 </body>
 </html>
diff --git a/templates/index.html b/templates/index.html
index 2371a45..eec336c 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,7 +1,7 @@
 {% extends 'base.html' %}
-{% block title %}Lista Zbiórek{% endblock %}
+{% block title %}Aktywne zbiórki{% endblock %}
 {% block content %}
-<h1 class="mb-4">Lista Zbiórek</h1>
+<h2 class="mb-4">Aktualnie aktywne zbiórki</h2>
 <div class="row">
     {% for z in zbiorki %}
     <div class="col-sm-12 col-md-6 col-lg-4 mb-4">
@@ -14,7 +14,7 @@
                         {{ progress|round(2) }}%
                     </div>
                 </div>
-                <a href="{{ url_for('zbiorka', zbiorka_id=z.id) }}" class="btn btn-primary btn-sm">Wejdź do zbiórki</a>
+                <a href="{{ url_for('zbiorka', zbiorka_id=z.id) }}" class="btn btn-primary btn-sm">Szczegóły</a>
             </div>
         </div>
     </div>
diff --git a/templates/zbiorka.html b/templates/zbiorka.html
index e0e496a..a931663 100644
--- a/templates/zbiorka.html
+++ b/templates/zbiorka.html
@@ -4,32 +4,36 @@
 <div class="container my-4">
   <!-- Główna karta zbiórki -->
   <div class="card mb-4 shadow-sm">
-    <div class="card-header bg-primary text-white">
-      <h2 class="card-title mb-0">{{ zbiorka.nazwa }}</h2>
+    <div class="card-header bg-secondary text-white">
+      <h3 class="card-title mb-0"></h3>{{ zbiorka.nazwa }}</h3>
     </div>
     <div class="card-body">
       <div class="row">
         <!-- Lewa kolumna: opis i postęp -->
         <div class="col-md-8">
-          <h5>Opis zbiórki</h5>
+          <h5>Opis:</h5>
           <div class="mb-3">
             {{ zbiorka.opis | markdown }}
           </div>
           {% set progress = (zbiorka.stan / zbiorka.cel * 100) if zbiorka.cel > 0 else 0 %}
-          <h5>Postęp zbiórki</h5>
+          <h5>Postęp:</h5>
           <div class="progress mb-3" style="height: 40px;">
-            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" 
-                 style="width: {{ progress if progress < 100 else 100 }}%;" 
-                 aria-valuenow="{{ progress }}" aria-valuemin="0" aria-valuemax="100">
-                {{ progress|round(2) }}%
+            <div class="progress-bar progress-bar-striped progress-bar-animated"
+                 role="progressbar"
+                 style="width: {{ progress if progress < 100 else 100 }}%;"
+                 aria-valuenow="{{ progress }}"
+                 aria-valuemin="0"
+                 aria-valuemax="100">
+                 {{ progress|round(2) }}%
             </div>
           </div>
+          
         </div>
         <!-- Prawa kolumna: sekcja "Wspomóż" -->
         <div class="col-md-4">
           <div class="card wspomoz-card mb-3">
             <div class="card-body">
-              <h5 class="card-title">Wspomóż</h5>
+
               <p class="card-text">
                 <strong>Numer konta:</strong>
                 <span class="fs-4">{{ zbiorka.numer_konta }}</span>
@@ -39,6 +43,7 @@
                 <span class="fs-4">{{ zbiorka.numer_telefonu_blik }}</span>
               </p>
               {% if not zbiorka.ukryj_kwote %}
+              <hr>
               <p class="card-text">
                 <strong>Cel zbiórki:</strong>
                 <span class="fs-4">{{ zbiorka.cel }} PLN</span>
@@ -58,7 +63,7 @@
         {% if current_user.is_authenticated and current_user.is_admin %}
           <a href="{{ url_for('admin_dodaj_wplate', zbiorka_id=zbiorka.id) }}" class="btn btn-primary">Dodaj wpłatę</a>
         {% endif %}
-        <a href="{{ url_for('index') }}" class="btn btn-secondary">Powrót do listy zbiórek</a>
+        <a href="{{ url_for('index') }}" class="btn btn-secondary">Powrót do listy</a>
       </div>
     </div>
   </div>