diff --git a/app.py b/app.py
index a65cb4c..2e143d6 100644
--- a/app.py
+++ b/app.py
@@ -285,7 +285,7 @@ def get_email_template(subject, message):
             <p>{message}</p>
           </div>
           <div class="footer">
-            <p>Wiadomość wygenerowana automatycznie przez system RouterOS Backup.</p>
+            <p>Wiadomość wygenerowana automatycznie przez system RouterOS Update</p>
           </div>
         </div>
       </body>
diff --git a/templates/add_device.html b/templates/add_device.html
index 8fa255b..b0a8313 100644
--- a/templates/add_device.html
+++ b/templates/add_device.html
@@ -1,43 +1,90 @@
 {% extends "base.html" %}
 {% block title %}Dodaj urządzenie - RouterOS Update{% endblock %}
+
+{% block extra_head %}
+<style>
+/* Styl karty w trybie ciemnym */
+body.dark-mode .card {
+  background-color: #1e1e1e;
+  color: #ccc;
+  border-color: #444;
+}
+body.dark-mode .card .card-header.bg-light {
+  background-color: #333 !important;
+  border-bottom: 1px solid #444;
+}
+</style>
+{% endblock %}
+
 {% block content %}
-<div class="row justify-content-center">
-  <div class="col-md-6">
-    <h2>Dodaj nowe urządzenie</h2>
-    <form method="POST">
-      <!-- Pole nazwy urządzenia -->
-      <div class="mb-3">
-        <label for="name" class="form-label">Nazwa urządzenia</label>
-        <input type="text" class="form-control" name="name" id="name" required>
+<div class="container">
+  <div class="row justify-content-center">
+    <div class="col-md-6">
+      
+      <!-- Karta z nagłówkiem i formularzem -->
+      <div class="card border-0 shadow">
+        <div class="card-header bg-light">
+          <h4 class="mb-0">Dodaj nowe urządzenie</h4>
+        </div>
+        <div class="card-body">
+          <form method="POST">
+            <!-- Pole nazwy urządzenia -->
+            <div class="mb-3">
+              <label for="name" class="form-label">Nazwa urządzenia</label>
+              <input type="text" class="form-control" name="name" id="name" required
+                     placeholder="np. Mikrotik w biurze">
+              <small class="text-muted">Wpisz przyjazną nazwę, np. „Mikrotik #1” lub „Router na u Kocura.</small>
+            </div>
+            
+            <!-- Adres IP -->
+            <div class="mb-3">
+              <label for="ip" class="form-label">Adres IP</label>
+              <input type="text" class="form-control" name="ip" id="ip" required 
+                     placeholder="np. 192.168.88.1">
+              <small class="text-muted">Adres IP lub domena urządzenia (np. mikrotik.moja-domena.pl).</small>
+            </div>
+            
+            <!-- Port -->
+            <div class="mb-3">
+              <label for="port" class="form-label">Port</label>
+              <input type="number" class="form-control" name="port" id="port" value="8728" required>
+              <small class="text-muted">Domyślnie 8728 (lub 8729 w przypadku SSL).</small>
+            </div>
+            
+            <!-- Nazwa użytkownika -->
+            <div class="mb-3">
+              <label for="device_username" class="form-label">Nazwa użytkownika urządzenia</label>
+              <input type="text" class="form-control" name="device_username" id="device_username" required
+                     placeholder="np. admin">
+            </div>
+            
+            <!-- Hasło -->
+            <div class="mb-3">
+              <label for="device_password" class="form-label">Hasło urządzenia</label>
+              <input type="password" class="form-control" name="device_password" id="device_password" required>
+            </div>
+            
+            <!-- Opcja SSL -->
+            <div class="mb-3 form-check">
+              <input type="checkbox" class="form-check-input" name="use_ssl" id="use_ssl">
+              <label class="form-check-label" for="use_ssl">Używaj SSL</label>
+            </div>
+            
+            <!-- Opcja braku weryfikacji certyfikatu SSL -->
+            <div class="mb-3 form-check">
+              <input type="checkbox" class="form-check-input" name="ssl_insecure" id="ssl_insecure">
+              <label class="form-check-label" for="ssl_insecure">
+                Nie weryfikuj certyfikatu SSL
+              </label>
+            </div>
+            
+            <!-- Przycisk dodania urządzenia -->
+            <button type="submit" class="btn btn-primary">Dodaj urządzenie</button>
+          </form>
+        </div>
       </div>
-      <div class="mb-3">
-        <label for="ip" class="form-label">Adres IP</label>
-        <input type="text" class="form-control" name="ip" id="ip" required>
-      </div>
-      <div class="mb-3">
-        <label for="port" class="form-label">Port</label>
-        <input type="number" class="form-control" name="port" id="port" value="8728" required>
-      </div>
-      <div class="mb-3">
-        <label for="device_username" class="form-label">Nazwa użytkownika urządzenia</label>
-        <input type="text" class="form-control" name="device_username" id="device_username" required>
-      </div>
-      <div class="mb-3">
-        <label for="device_password" class="form-label">Hasło urządzenia</label>
-        <input type="password" class="form-control" name="device_password" id="device_password" required>
-      </div>
-      <!-- Opcja SSL -->
-      <div class="mb-3 form-check">
-        <input type="checkbox" class="form-check-input" name="use_ssl" id="use_ssl">
-        <label class="form-check-label" for="use_ssl">Używaj SSL</label>
-      </div>
-      <!-- Opcja nie weryfikowania certyfikatu SSL -->
-      <div class="mb-3 form-check">
-        <input type="checkbox" class="form-check-input" name="ssl_insecure" id="ssl_insecure">
-        <label class="form-check-label" for="ssl_insecure">Nie weryfikuj certyfikatu SSL</label>
-      </div>
-      <button type="submit" class="btn btn-primary">Dodaj urządzenie</button>
-    </form>
+      
+    </div>
   </div>
 </div>
 {% endblock %}
diff --git a/templates/anomalies.html b/templates/anomalies.html
index 51ed81b..48377c8 100644
--- a/templates/anomalies.html
+++ b/templates/anomalies.html
@@ -1,27 +1,80 @@
 {% extends "base.html" %}
 {% block title %}Wykryte anomalie{% endblock %}
+
+{% block extra_head %}
+<style>
+/* Karta w trybie ciemnym */
+body.dark-mode .card {
+  background-color: #1e1e1e;
+  color: #ccc;
+  border-color: #444;
+}
+body.dark-mode .card .card-header.bg-light {
+  background-color: #333 !important;
+  border-bottom: 1px solid #444;
+}
+
+/* Tabela w trybie ciemnym */
+body.dark-mode .table thead {
+  background-color: #2a2a2a;
+  color: #ccc;
+}
+body.dark-mode .table-bordered > :not(caption) > * > * {
+  border-color: #444 !important;
+}
+</style>
+{% endblock %}
+
 {% block content %}
 <div class="container">
-  <h2 class="mb-4">Wykryte anomalie</h2>
-  <table class="table table-bordered">
-    <thead>
-      <tr>
-        <th>Data</th>
-        <th>Urządzenie</th>
-        <th>Opis</th>
-        <th>Status</th>
-      </tr>
-    </thead>
-    <tbody>
-      {% for anomaly in anomalies %}
-      <tr>
-        <td>{{ anomaly.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</td>
-        <td>{{ anomaly.device.name or anomaly.device.ip if anomaly.device }}</td>
-        <td>{{ anomaly.description }}</td>
-        <td>{{ 'Rozwiązana' if anomaly.resolved else 'Otwarta' }}</td>
-      </tr>
-      {% endfor %}
-    </tbody>
-  </table>
+  <div class="card border-0 shadow">
+    <div class="card-header bg-light">
+      <h4 class="mb-0">Wykryte anomalie</h4>
+    </div>
+    <div class="card-body p-0">
+      {% if anomalies and anomalies|length > 0 %}
+        <div class="table-responsive">
+          <table class="table table-bordered table-hover table-sm align-middle mb-0">
+            <thead>
+              <tr>
+                <th style="white-space: nowrap;">Data</th>
+                <th style="white-space: nowrap;">Urządzenie</th>
+                <th>Opis</th>
+                <th>Status</th>
+              </tr>
+            </thead>
+            <tbody>
+            {% for anomaly in anomalies %}
+              <tr>
+                <td style="white-space: nowrap;">
+                  {{ anomaly.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}
+                </td>
+                <td>
+                  {% if anomaly.device %}
+                    {{ anomaly.device.name or anomaly.device.ip }}
+                  {% else %}
+                    <span class="text-muted">Brak</span>
+                  {% endif %}
+                </td>
+                <td>{{ anomaly.description }}</td>
+                <td>
+                  {% if anomaly.resolved %}
+                    <span class="badge bg-success">Rozwiązana</span>
+                  {% else %}
+                    <span class="badge bg-danger">Otwarta</span>
+                  {% endif %}
+                </td>
+              </tr>
+            {% endfor %}
+            </tbody>
+          </table>
+        </div>
+      {% else %}
+        <div class="p-3">
+          <p class="mb-0">Brak aktualnych anomalii.</p>
+        </div>
+      {% endif %}
+    </div>
+  </div>
 </div>
 {% endblock %}
diff --git a/templates/base.html b/templates/base.html
index f89f870..8284240 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -16,11 +16,6 @@
       body.dark-mode .navbar {
         background-color: #333 !important;
         color: #ffffff;
-       /* ---
-        border-bottom: 1px solid #e0e0e0;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        padding: 0.5rem 1rem;
-        --- */
       }
       body.dark-mode .navbar .navbar-brand,
       body.dark-mode .navbar .nav-link {
@@ -57,11 +52,11 @@
         background-color: #f8f9fa;
         color: #212529;
       }
-    
-      
-    /* Alerty – pozostają bez zmian */
-    .diff-add { color: green; }
-    .diff-rem { color: red; }
+
+      /* Alerty – pozostają bez zmian */
+      .diff-add { color: green; }
+      .diff-rem { color: red; }
+
       body.dark-mode table {
         background-color: #1a1a1a;
         color: #cccccc;
@@ -132,29 +127,19 @@
       }
 
       /* ========== Tryb jasny (light-mode) ========== */
-      /* --- Nawigacja (Navbar) --- */
       body.light-mode .navbar {
         background-color: #dcdcdc !important;
         color: #333333;
-        /* ---
-        border-bottom: 1px solid #e0e0e0;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        padding: 0.5rem 1rem;
-        --- */
       }
 
-      /* --- Przyciski (dla niezalogowanych) --- */
-
       body.light-mode .navbar .btn-outline-primary:hover {
         background-color: #007bff;
         color: #ffffff;
       }
-      /* --- Stopka --- */
       footer {
         background-color: #f8f9fa;
         color: #212529;
       }
-      /* --- Responsywność --- */
       @media (max-width: 768px) {
         body.light-mode .navbar .nav-link {
           padding: 0.5rem;
@@ -230,6 +215,25 @@
         </div>
       </div>
     </nav>
+
+    <!-- Kontener do wyświetlania komunikatów flash -->
+    <div class="container mt-3">
+      {% with messages = get_flashed_messages(with_categories=True) %}
+        {% if messages %}
+          {% for category, message in messages %}
+            <!-- Jeśli brak kategorii, używamy 'info' -->
+            {% if category == 'message' %}
+              {% set category = 'info' %}
+            {% endif %}
+            <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
+              {{ message }}
+              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+            </div>
+          {% endfor %}
+        {% endif %}
+      {% endwith %}
+    </div>
+
     <main class="container my-4 flex-fill">
       {% block content %}{% endblock %}
     </main>
diff --git a/templates/change_password.html b/templates/change_password.html
index 4a76386..524e8d1 100644
--- a/templates/change_password.html
+++ b/templates/change_password.html
@@ -1,24 +1,71 @@
 {% extends "base.html" %}
-{% block title %}Reset hasła - RouterOS Update{% endblock %}
+{% block title %}Zmiana hasła - RouterOS Update{% endblock %}
+
+{% block extra_head %}
+<style>
+/* Karta w trybie ciemnym */
+body.dark-mode .card {
+  background-color: #1e1e1e;
+  color: #ccc;
+  border-color: #444;
+}
+body.dark-mode .card .card-header.bg-light {
+  background-color: #333 !important;
+  border-bottom: 1px solid #444;
+}
+</style>
+{% endblock %}
+
 {% block content %}
-<div class="row justify-content-center">
-  <div class="col-md-6">
-    <h2 class="mb-4">Zmiana hasła</h2>
-    <form method="POST">
-      <div class="mb-3">
-        <label for="old_password" class="form-label">Stare hasło</label>
-        <input type="password" class="form-control" name="old_password" id="old_password" required>
+<div class="container">
+  <div class="row justify-content-center">
+    <div class="col-md-6">
+      
+      <div class="card border-0 shadow">
+        <div class="card-header bg-light">
+          <h4 class="mb-0">Zmiana hasła</h4>
+        </div>
+        <div class="card-body">
+          <form method="POST">
+            <div class="mb-3">
+              <label for="old_password" class="form-label">Stare hasło</label>
+              <input 
+                type="password" 
+                class="form-control" 
+                name="old_password" 
+                id="old_password" 
+                required
+                placeholder="••••••••"
+              >
+            </div>
+            <div class="mb-3">
+              <label for="new_password" class="form-label">Nowe hasło</label>
+              <input 
+                type="password" 
+                class="form-control" 
+                name="new_password" 
+                id="new_password" 
+                required
+                placeholder="••••••••"
+              >
+            </div>
+            <div class="mb-3">
+              <label for="confirm_password" class="form-label">Potwierdź nowe hasło</label>
+              <input 
+                type="password" 
+                class="form-control" 
+                name="confirm_password" 
+                id="confirm_password" 
+                required
+                placeholder="••••••••"
+              >
+            </div>
+            <button type="submit" class="btn btn-primary">Zresetuj hasło</button>
+          </form>
+        </div>
       </div>
-      <div class="mb-3">
-        <label for="new_password" class="form-label">Nowe hasło</label>
-        <input type="password" class="form-control" name="new_password" id="new_password" required>
-      </div>
-      <div class="mb-3">
-        <label for="confirm_password" class="form-label">Potwierdź nowe hasło</label>
-        <input type="password" class="form-control" name="confirm_password" id="confirm_password" required>
-      </div>
-      <button type="submit" class="btn btn-primary">Zresetuj hasło</button>
-    </form>
+      
+    </div>
   </div>
 </div>
 {% endblock %}
diff --git a/templates/dashboard.html b/templates/dashboard.html
index 17e0510..049560a 100644
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -76,24 +76,32 @@
     </div>
   </div>
   
-  <!-- Sekcja Ostatnie zdarzenia -->
-  <div class="card mb-3 border-0">
-    <div class="card-header bg-light py-2">
-      <h6 class="mb-0">Ostatnie zdarzenia</h6>
-    </div>
-
-      {% if recent_logs %}
+<!-- Sekcja Ostatnie zdarzenia -->
+<div class="card mb-3 border-0">
+  <div class="card-header bg-light py-2">
+    <h6 class="mb-0">Ostatnie zdarzenia</h6>
+  </div>
+  <div class="card-body p-0">
+    {% if recent_logs %}
       <ul class="list-group list-group-flush">
         {% for log in recent_logs %}
-        <li class="list-group-item p-1 border-top-0 border-bottom">
-          <small class="text-muted">{{ log.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</small>
-          – {{ log.message|truncate(100) }}
-        </li>
+          <li class="list-group-item">
+            <!-- Data w nieco mniejszej czcionce, np. "small text-muted" -->
+            <div class="small text-muted">{{ log.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</div>
+            <!-- Treść zdarzenia; "truncate(100)" żeby skrócić tekst -->
+            <div class="mt-1">
+              {{ log.message|truncate(100) }}
+            </div>
+          </li>
         {% endfor %}
       </ul>
-      {% else %}
-      <p class="mb-0">Brak ostatnich zdarzeń.</p>
-      {% endif %}
+    {% else %}
+      <div class="p-3">
+        Brak ostatnich zdarzeń.
+      </div>
+    {% endif %}
+  </div>
+</div>
 
   </div>
 </div>
diff --git a/templates/device_detail.html b/templates/device_detail.html
index 1c11a77..0725723 100644
--- a/templates/device_detail.html
+++ b/templates/device_detail.html
@@ -1,89 +1,117 @@
 {% extends "base.html" %}
 {% block title %}Szczegóły urządzenia - RouterOS Update{% endblock %}
-{% block extra_head %}
-  <style>
-    /* Stylizacja kart w trybie ciemnym */
-    body.dark-mode .card {
-      background-color: #1e1e1e;
-      color: #e0e0e0;
-      border-color: #444;
-    }
-    /* Stylizacja bloku logów – przewijalny, z odpowiednim tłem i kolorem tekstu */
-    .log-block {
-      background-color: inherit;
-      color: inherit;
-      padding: 1rem;
-      border: 1px solid #ccc;
-      border-radius: 0.25rem;
-      max-height: 300px;
-      overflow-y: auto;
-      white-space: pre-wrap;
-    }
-    /* Stylizacja overlay dla system update */
-    #system-update-overlay, #reboot-progress-overlay {
-      display: none;
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0,0,0,0.7);
-      z-index: 1000;
-      color: white;
-      text-align: center;
-      padding-top: 200px;
-    }
-    #system-update-overlay h3, #reboot-progress-overlay h3 {
-      margin-bottom: 20px;
-    }
-    .progress-container {
-      width: 50%;
-      margin: 20px auto;
-      background: #444;
-      border-radius: 5px;
-    }
-    .progress-bar {
-      width: 0%;
-      height: 30px;
-      background: #4caf50;
-      border-radius: 5px;
-    }
-  </style>
-{% endblock %}
-{% block content %}
-<div class="container">
-  <div class="my-4">
-    <h2 class="mb-3">Szczegóły urządzenia</h2>
-    <nav aria-label="breadcrumb">
-      <ol class="breadcrumb">
-        <li class="breadcrumb-item"><a href="{{ url_for('devices') }}">Urządzenia</a></li>
-        <li class="breadcrumb-item active" aria-current="page">{{ device.ip }}</li>
-      </ol>
-    </nav>
-  </div>
 
-  <!-- Dwukolumnowy układ: dane urządzenia i informacje o systemie -->
+{% block extra_head %}
+<style>
+/* ========================
+   Tryb ciemny i styl kart
+======================== */
+body.dark-mode .card {
+  background-color: #1e1e1e;
+  color: #e0e0e0;
+  border-color: #444;
+}
+body.dark-mode .card .card-header.bg-primary,
+body.dark-mode .card .card-header.bg-secondary {
+  background-color: #333 !important;
+  border-bottom: 1px solid #444;
+}
+  
+/* Blok logów – przewijalny, zachowanie białych znaków, 
+   jasne/dark tło zgodnie z kartą */
+.log-block {
+  background-color: inherit; 
+  color: inherit;
+  padding: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 0.25rem;
+  max-height: 300px;
+  overflow-y: auto;
+  white-space: pre-wrap;
+}
+
+/* Overlays (system-update / reboot) */
+#system-update-overlay, 
+#reboot-progress-overlay {
+  display: none;
+  position: fixed;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+  background: rgba(0,0,0,0.7);
+  z-index: 1000;
+  color: white;
+  text-align: center;
+  padding-top: 200px;
+}
+
+#system-update-overlay h3, 
+#reboot-progress-overlay h3 {
+  margin-bottom: 20px;
+}
+
+.progress-container {
+  width: 50%;
+  margin: 20px auto;
+  background: #444;
+  border-radius: 5px;
+  overflow: hidden;
+}
+.progress-bar {
+  width: 0%;
+  height: 30px;
+  background: #4caf50;
+  border-radius: 5px;
+  transition: width 0.5s linear;
+}
+
+/* Div do firmware restart (informacja i przycisk) */
+#firmware-restart-div {
+  display: none; 
+  margin-top: 20px;
+}
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="container my-4">
+  
+  <!-- Nagłówek strony z nawigacją breadcrumb -->
+  <h2 class="mb-3">Szczegóły urządzenia</h2>
+  <nav aria-label="breadcrumb">
+    <ol class="breadcrumb">
+      <li class="breadcrumb-item"><a href="{{ url_for('devices') }}">Urządzenia</a></li>
+      <li class="breadcrumb-item active" aria-current="page">{{ device.ip }}</li>
+    </ol>
+  </nav>
+  
+  <!-- Dwukolumnowy układ: kolumna z danymi urządzenia, kolumna z info systemu -->
   <div class="row">
     <div class="col-md-6">
-      <div class="card mb-3">
+      <div class="card border-0 shadow mb-3">
         <div class="card-header bg-primary text-white">
           Dane urządzenia
         </div>
         <div class="card-body">
           <p><strong>Adres IP:</strong> {{ device.ip }}</p>
           <p><strong>Port:</strong> {{ device.port }}</p>
-          <p><strong>Ostatnie sprawdzenie:</strong>
-            {% if device.last_check %}{{ device.last_check.strftime('%Y-%m-%d %H:%M:%S') }}{% else %}Brak{% endif %}
+          <p>
+            <strong>Ostatnie sprawdzenie:</strong>
+            {% if device.last_check %}
+              {{ device.last_check.strftime('%Y-%m-%d %H:%M:%S') }}
+            {% else %}
+              Brak
+            {% endif %}
           </p>
           <p>
             <strong>System:</strong> {{ device.current_version or 'Brak' }}<br>
             <strong>Firmware:</strong> {{ device.current_firmware or 'N/A' }}<br>
-            <strong>Upgrade Firmware:</strong> <b>{{ device.upgrade_firmware or 'N/A' }}</b>
+            <strong>Upgrade Firmware:</strong> {{ device.upgrade_firmware or 'N/A' }}
           </p>
           <p>
             <strong>Branch aktualizacji:</strong> {{ device.branch|capitalize }}
           </p>
-          <!-- Formularz zmiany branch -->
+          
+          <!-- Formularz szybkiej zmiany branch -->
           <form method="POST" action="{{ url_for('edit_device', device_id=device.id) }}" class="mt-3">
             <div class="input-group">
               <select class="form-select" name="branch">
@@ -91,14 +119,15 @@
                 <option value="dev" {% if device.branch == 'dev' %}selected{% endif %}>Dev</option>
                 <option value="beta" {% if device.branch == 'beta' %}selected{% endif %}>Beta</option>
               </select>
-              <button type="submit" class="btn btn-primary ms-2">Zmień branch</button>
+              <button type="submit" class="btn btn-primary">Zmień branch</button>
             </div>
           </form>
         </div>
       </div>
     </div>
+    
     <div class="col-md-6">
-      <div class="card mb-3">
+      <div class="card border-0 shadow mb-3">
         <div class="card-header bg-primary text-white">
           Informacje o systemie
         </div>
@@ -109,8 +138,14 @@
             </div>
           {% else %}
             <p><strong>Wersja systemu:</strong> {{ resource.version or 'Brak danych' }}</p>
-            <p><strong>Czas pracy:</strong> {{ resource.uptime or 'Brak danych' }}</p>
-            <p><strong>Obciążenie CPU:</strong> {{ resource['cpu-load'] or 'Brak' }}%</p>
+            <p><strong>Czas pracy (uptime):</strong> {{ resource.uptime or 'Brak danych' }}</p>
+            <p><strong>Obciążenie CPU:</strong> 
+              {% if resource['cpu-load'] is defined %}
+                {{ resource['cpu-load'] }}%
+              {% else %}
+                Brak danych
+              {% endif %}
+            </p>
             <p>
               <strong>Pamięć:</strong>
               {% if resource['free-memory'] and resource['total-memory'] %}
@@ -119,18 +154,23 @@
                 Brak danych
               {% endif %}
             </p>
-            <p><strong>Wolne miejsce na dysku:</strong> {{ resource['free-hdd-space'] or 'Brak danych' }}</p>
+            <p>
+              <strong>Wolne miejsce na dysku:</strong>
+              {% if resource['free-hdd-space'] %}
+                {{ resource['free-hdd-space'] }}
+              {% else %}
+                Brak danych
+              {% endif %}
+            </p>
           {% endif %}
         </div>
       </div>
     </div>
   </div>
   
-  <!-- Logi urządzenia jako pojedynczy blok tekstu -->
-  <div class="card mb-3">
-    <div class="card-header bg-secondary text-white">
-      Logi urządzenia
-    </div>
+  <!-- Logi urządzenia -->
+  <div class="card border-0 shadow mb-3">
+    <div class="card-header bg-secondary text-white">Logi urządzenia</div>
     <div class="card-body">
       {% if device.last_log %}
         <div class="log-block">
@@ -142,32 +182,40 @@
     </div>
   </div>
   
-  <!-- Akcje urządzenia -->
-  <div class="mb-4">
-    <div class="d-flex flex-wrap gap-2">
-      <form id="system-update-form" method="POST" action="{{ url_for('update_device', device_id=device.id) }}">
-        <button type="submit" class="btn btn-warning">Aktualizuj system</button>
-      </form>
-      <form id="firmware-update-form" method="POST" action="{{ url_for('update_firmware', device_id=device.id) }}">
-        <button type="submit" class="btn btn-danger">Aktualizuj firmware</button>
-      </form>
-      <a href="{{ url_for('force_check', device_id=device.id) }}" class="btn btn-secondary">Wymuś sprawdzenie</a>
-    </div>
-    <div class="mt-3">
-      <a href="{{ url_for('devices') }}" class="btn btn-outline-secondary">Powrót do listy urządzeń</a>
-    </div>
+  <!-- Akcje urządzenia: aktualizacje, wymuszenie sprawdzenia -->
+  <div class="mb-4 d-flex flex-wrap gap-2">
+    <!-- Aktualizacja systemu -->
+    <form id="system-update-form" method="POST" action="{{ url_for('update_device', device_id=device.id) }}">
+      <button type="submit" class="btn btn-warning">Aktualizuj system</button>
+    </form>
+    <!-- Aktualizacja firmware -->
+    <form id="firmware-update-form" method="POST" action="{{ url_for('update_firmware', device_id=device.id) }}">
+      <button type="submit" class="btn btn-danger">Aktualizuj firmware</button>
+    </form>
+    <!-- Wymuszenie sprawdzenia -->
+    <a href="{{ url_for('force_check', device_id=device.id) }}" class="btn btn-secondary">Wymuś sprawdzenie</a>
+    <!-- Link powrotny do listy -->
+    <a href="{{ url_for('devices') }}" class="btn btn-outline-secondary ms-auto">Powrót</a>
   </div>
   
-  <!-- Overlay dla system update (5 minut) -->
+  <!-- Miejsce na komunikat o konieczności rebootu po firmware update -->
+  <div id="firmware-restart-div">
+    <div class="alert alert-warning mb-3">
+      Urządzenie wymaga restartu po aktualizacji firmware.
+    </div>
+    <button id="restart-device-btn" class="btn btn-danger">Restart urządzenia</button>
+  </div>
+  
+  <!-- Overlay: system update (4 min. można dać 5 min) -->
   <div id="system-update-overlay">
     <h3>Aktualizacja systemu rozpoczęta...</h3>
     <div class="progress-container">
       <div id="system-update-progress" class="progress-bar"></div>
     </div>
-    <p id="system-update-timer">300 sekund</p>
+    <p id="system-update-timer">240 sekund</p>
   </div>
-  
-  <!-- Overlay dla reboot progress (2 minuty) -->
+
+  <!-- Overlay: reboot po restarcie (2 min) -->
   <div id="reboot-progress-overlay">
     <h3>Restart urządzenia...</h3>
     <div class="progress-container">
@@ -175,92 +223,85 @@
     </div>
     <p id="reboot-timer">120 sekund</p>
   </div>
-  
-  <!-- Div dla firmware restart (komunikat z przyciskiem restartu) -->
-  <div id="firmware-restart-div" style="display:none; margin-top:20px;">
-    <div class="alert alert-warning">
-      Router wymaga ręcznego wykonania polecenia reboot.
-    </div>
-    <button id="restart-device-btn" class="btn btn-danger">Restart urządzenia</button>
-  </div>
-  
 </div>
 
 <script>
-  // System update: Po kliknięciu w formularz system update
-  document.getElementById('system-update-form').addEventListener('submit', function(e) {
-    e.preventDefault();  // Zatrzymaj standardowe wysłanie formularza
-    var overlay = document.getElementById('system-update-overlay');
-    overlay.style.display = 'block';
-    var timeLeft = 240;
-    var progressBar = document.getElementById('system-update-progress');
-    var timerDisplay = document.getElementById('system-update-timer');
-    var interval = setInterval(function(){
-      timeLeft--;
-      var percent = ((240 - timeLeft) / 240) * 100;
-      progressBar.style.width = percent + '%';
-      timerDisplay.textContent = timeLeft + ' sekund';
-      if(timeLeft <= 0){
-        clearInterval(interval);
-        // Po zakończeniu 5 minut wykonaj polecenie "Wymuś sprawdzenie"
-        fetch('{{ url_for("force_check", device_id=device.id) }}', { method: 'GET' })
-          .then(function(response){
-            location.reload();
-          })
-          .catch(function(error){ console.error('Błąd force check:', error); });
-      }
-    }, 1000);
-    // Opcjonalnie wysyłamy formularz AJAX, aby rozpocząć aktualizację systemu
-    fetch(this.action, { method: 'POST' })
-      .then(function(response){ /* opcjonalna obsługa odpowiedzi */ })
-      .catch(function(error){ console.error('Błąd aktualizacji systemu:', error); });
-  });
+// ========================
+// Obsługa aktualizacji systemu
+// ========================
+document.getElementById('system-update-form').addEventListener('submit', function(e) {
+  e.preventDefault(); // powstrzymujemy normalne przeładowanie
+  // Pokaż overlay postępu
+  var overlay = document.getElementById('system-update-overlay');
+  overlay.style.display = 'block';
+  
+  var timeLeft = 240; // 4 min
+  var progressBar = document.getElementById('system-update-progress');
+  var timerDisplay = document.getElementById('system-update-timer');
+  
+  var interval = setInterval(function(){
+    timeLeft--;
+    var percent = ((240 - timeLeft) / 240) * 100;
+    progressBar.style.width = percent + '%';
+    timerDisplay.textContent = timeLeft + ' sekund';
+    if(timeLeft <= 0){
+      clearInterval(interval);
+      // Po zakończeniu: fetch do force_check, potem reload
+      fetch('{{ url_for("force_check", device_id=device.id) }}', { method: 'GET' })
+        .then(()=> location.reload())
+        .catch((err)=> console.error('Błąd force check:', err));
+    }
+  }, 1000);
+  
+  // Wyślij POST do update
+  fetch(this.action, { method: 'POST' })
+    .catch(err => console.error('Błąd aktualizacji systemu:', err));
+});
 
-  // Firmware update: Po kliknięciu w formularz firmware update
-  document.getElementById('firmware-update-form').addEventListener('submit', function(e) {
-    e.preventDefault();  // Zatrzymaj standardowe wysłanie formularza
-    fetch(this.action, { method: 'POST' })
-      .then(function(response){ /* opcjonalna obsługa odpowiedzi */ })
-      .catch(function(error){ console.error('Błąd aktualizacji firmware:', error); });
-    // Pokaż div z komunikatem o reboot i przyciskiem restartu
-    document.getElementById('firmware-restart-div').style.display = 'block';
-  });
+// ========================
+// Obsługa aktualizacji firmware
+// ========================
+document.getElementById('firmware-update-form').addEventListener('submit', function(e) {
+  e.preventDefault();
+  fetch(this.action, { method: 'POST' })
+    .catch(err => console.error('Błąd aktualizacji firmware:', err));
+  // Pokazujemy div z przyciskiem do restartu
+  document.getElementById('firmware-restart-div').style.display = 'block';
+});
 
-  // Restart urządzenia: Po kliknięciu przycisku restart wysyłamy komendę reboot,
-  // a następnie pokazujemy overlay z 2-minutowym paskiem postępu
-  document.getElementById('restart-device-btn').addEventListener('click', function() {
-    fetch('{{ url_for("restart_device", device_id=device.id) }}', {
-      method: 'POST'
-    }).then(function(response){
-      if(response.ok){
+// ========================
+// Obsługa reboot
+// ========================
+document.getElementById('restart-device-btn').addEventListener('click', function(){
+  fetch('{{ url_for("restart_device", device_id=device.id) }}', { method: 'POST' })
+    .then(response => {
+      if (response.ok) {
         alert('Komenda reboot wysłana.');
-        // Pokaż overlay dla reboot progress
-        var rebootOverlay = document.getElementById('reboot-progress-overlay');
-        rebootOverlay.style.display = 'block';
-        var timeLeft = 90; 
+        // Pokaż overlay z 2 min postępu
+        var overlay = document.getElementById('reboot-progress-overlay');
+        overlay.style.display = 'block';
+        
+        var timeLeft = 120; // 2 min
         var progressBar = document.getElementById('reboot-progress-bar');
         var timerDisplay = document.getElementById('reboot-timer');
         var interval = setInterval(function(){
           timeLeft--;
-          var percent = ((90 - timeLeft) / 90) * 100;
+          var percent = ((120 - timeLeft) / 120) * 100;
           progressBar.style.width = percent + '%';
           timerDisplay.textContent = timeLeft + ' sekund';
           if(timeLeft <= 0){
             clearInterval(interval);
-            // Po 2 minutach wykonaj polecenie "Wymuś sprawdzenie"
+            // Po zakończeniu: fetch do force_check
             fetch('{{ url_for("force_check", device_id=device.id) }}', { method: 'GET' })
-              .then(function(response){
-                location.reload();
-              })
-              .catch(function(error){ console.error('Błąd force check:', error); });
+              .then(()=> location.reload())
+              .catch(err => console.error('Błąd force check:', err));
           }
         }, 1000);
       } else {
         alert('Błąd podczas wysyłania komendy reboot.');
       }
-    }).catch(function(error){
-      alert('Błąd: ' + error);
-    });
-  });
+    })
+    .catch(err => alert('Błąd: ' + err));
+});
 </script>
 {% endblock %}
diff --git a/templates/devices.html b/templates/devices.html
index 55b62c5..71eb295 100644
--- a/templates/devices.html
+++ b/templates/devices.html
@@ -2,116 +2,178 @@
 {% block title %}Moje urządzenia - RouterOS Update{% endblock %}
 
 {% block extra_head %}
-  <style>
-    .progress-container {
-      width: 50%;
-      margin: 20px auto;
-      background: #444;
-      border-radius: 5px;
-      overflow: hidden;
-    }
-    .progress-bar {
-      width: 0%;
-      height: 30px;
-      background: #4caf50;
-      border-radius: 5px;
-      transition: width 0.5s linear;
-    }
+<style>
+/* Karta w trybie ciemnym */
+body.dark-mode .card {
+  background-color: #1e1e1e;
+  color: #ccc;
+  border-color: #444;
+}
 
-    #mass-system-update-overlay, #mass-firmware-update-overlay {
-      display: none;
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0,0,0,0.7);
-      z-index: 1000;
-      color: white;
-      text-align: center;
-      padding-top: 200px;
-    }
-  </style>
+/* Nagłówek karty w trybie ciemnym */
+body.dark-mode .card .card-header.bg-light {
+  background-color: #333 !important;
+  border-bottom: 1px solid #444;
+}
+
+/* Tabela w trybie ciemnym */
+body.dark-mode .table thead.table-dark {
+  background-color: #2a2a2a !important;
+  color: #ccc !important;
+  border-color: #444 !important;
+}
+body.dark-mode .table-hover tbody tr:hover {
+  background-color: #2f2f2f;
+}
+body.dark-mode .table-bordered > :not(caption) > * > * {
+  border-color: #444 !important;
+}
+
+/* Styl paska postępu w overlay */
+.progress-container {
+  width: 50%;
+  margin: 20px auto;
+  background: #444;
+  border-radius: 5px;
+  overflow: hidden;
+}
+.progress-bar {
+  width: 0%;
+  height: 30px;
+  background: #4caf50;
+  border-radius: 5px;
+  transition: width 0.5s linear;
+}
+#mass-system-update-overlay,
+#mass-firmware-update-overlay {
+  display: none;
+  position: fixed;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+  background: rgba(0,0,0,0.7);
+  z-index: 1000;
+  color: white;
+  text-align: center;
+  padding-top: 200px;
+}
+
+/* Prompt do firmware w overlay */
+#mass-firmware-reboot-prompt {
+  display:none; 
+  position:fixed; 
+  top:0; left:0; 
+  width:100%; height:100%; 
+  background:rgba(0,0,0,0.7); 
+  z-index:1100; 
+  color:white; 
+  text-align:center; 
+  padding-top:200px;
+}
+</style>
 {% endblock %}
 
-
-
 {% block content %}
-<h2>Moje urządzenia</h2>
-<div class="row mb-3">
-  <div class="col text-end">
-    <button type="button" class="btn btn-success" onclick="window.location.href='{{ url_for('add_device') }}'">
-      Dodaj nowe urządzenie
-    </button>
+<div class="container">
+  <h2 class="mb-4">Moje urządzenia</h2>
+
+  <!-- Karta z tabelą urządzeń i przyciskami masowych akcji -->
+  <div class="card border-0 shadow">
+    <div class="card-header bg-light d-flex align-items-center justify-content-between">
+      <h5 class="mb-0">Lista urządzeń</h5>
+      <button type="button" class="btn btn-success" onclick="window.location.href='{{ url_for('add_device') }}'">
+        Dodaj nowe urządzenie
+      </button>
+    </div>
+    <div class="card-body">
+      <!-- Formularz z przyciskami masowych operacji -->
+      <form id="mass-update-form">
+        <div class="mb-3">
+          <button type="button" id="mass-system-update-btn" class="btn btn-warning me-2">Aktualizuj system (masowo)</button>
+          <button type="button" id="mass-firmware-update-btn" class="btn btn-danger me-2">Aktualizuj firmware (masowo)</button>
+          <button type="submit" class="btn btn-primary">Odśwież wybrane</button>
+        </div>
+        
+        <div class="table-responsive">
+          <table class="table table-striped table-hover table-sm align-middle table-bordered">
+            <thead class="table-dark">
+              <tr>
+                <th><input type="checkbox" id="select-all"></th>
+                <th>Nazwa / Adres IP</th>
+                <th>Ostatnie sprawdzenie</th>
+                <th>Status</th>
+                <th>System / Firmware</th>
+                <th>Akcje</th>
+              </tr>
+            </thead>
+            <tbody>
+              {% for device in devices %}
+              <tr>
+                <td>
+                  <input type="checkbox" name="selected_devices" value="{{ device.id }}">
+                </td>
+                <td>
+                  {% if device.name %}
+                    {{ device.name }} 
+                    <br><code class="text-muted">{{ device.ip }}</code>
+                  {% else %}
+                    {{ device.ip }}
+                  {% endif %}
+                </td>
+                <td>
+                  {{ device.last_check.strftime('%Y-%m-%d %H:%M:%S') if device.last_check else 'Brak' }}
+                </td>
+                <td>
+                  {% if device.update_required or (device.current_firmware and device.upgrade_firmware and device.current_firmware != device.upgrade_firmware) %}
+                    {% if device.update_required and (device.current_firmware and device.upgrade_firmware and device.current_firmware != device.upgrade_firmware) %}
+                      <span class="badge bg-danger">Wymaga aktualizacji <small>(system i firmware)</small></span>
+                    {% elif device.update_required %}
+                      <span class="badge bg-danger">Wymaga aktualizacji <small>(system)</small></span>
+                    {% else %}
+                      <span class="badge bg-danger">Wymaga aktualizacji <small>(firmware)</small></span>
+                    {% endif %}
+                  {% else %}
+                    <span class="badge bg-success">Aktualny</span>
+                  {% endif %}
+                </td>
+                <td style="white-space: nowrap;">
+                  <small>
+                    <strong>System:</strong> {{ device.current_version or 'Brak' }}<br>
+                    <strong>Firmware:</strong> {{ device.current_firmware or 'Brak' }}<br>
+                    <strong>Upgrade FW:</strong> {{ device.upgrade_firmware or 'N/A' }}
+                  </small>
+                </td>
+                <td>
+                  <button type="button" class="btn btn-info btn-sm" 
+                          onclick="window.location.href='{{ url_for('device_detail', device_id=device.id) }}'">
+                    Szczegóły
+                  </button>
+                  <button type="button" class="btn btn-secondary btn-sm"
+                          onclick="window.location.href='{{ url_for('force_check', device_id=device.id) }}'">
+                    Sprawdź
+                  </button>
+                  <button type="button" class="btn btn-warning btn-sm"
+                          onclick="window.location.href='{{ url_for('edit_device', device_id=device.id) }}'">
+                    Edytuj
+                  </button>
+                  <!-- Dodane przykładowe przyciski (potrzebna obsługa w backendzie) -->
+                  <button type="button" class="btn btn-outline-danger btn-sm"
+                          onclick="fetch('/device/{{ device.id }}/restart', {method: 'POST'}) .then(()=>location.reload());">
+                    Restart
+                  </button>
+                </td>
+              </tr>
+              {% else %}
+              <tr>
+                <td colspan="6" class="text-center">Brak dodanych urządzeń.</td>
+              </tr>
+              {% endfor %}
+            </tbody>
+          </table>
+        </div>
+      </form>
+    </div>
   </div>
 </div>
-<!-- Formularz z przyciskami masowych operacji -->
-<form id="mass-update-form">
-  <div class="mb-3">
-    <button type="button" id="mass-system-update-btn" class="btn btn-warning">Aktualizuj system (masowo)</button>
-    <button type="button" id="mass-firmware-update-btn" class="btn btn-danger">Aktualizuj firmware (masowo)</button>
-    <button type="submit" class="btn btn-primary">Odśwież wybrane</button>
-  </div>
-  <table class="table table-bordered table-hover">
-    <thead class="table-dark">
-      <tr>
-        <th><input type="checkbox" id="select-all"></th>
-        <th>Nazwa / Adres IP</th>
-        <th>Ostatnie sprawdzenie</th>
-        <th>Status</th>
-        <th>System / Firmware</th>
-        <th>Akcje</th>
-      </tr>
-    </thead>
-    <tbody>
-      {% for device in devices %}
-      <tr>
-        <td>
-          <input type="checkbox" name="selected_devices" value="{{ device.id }}">
-        </td>
-        <td>
-          {% if device.name %}
-            {{ device.name }} | 
-            <code><small class="text-muted">{{ device.ip }}</small></code>
-          {% else %}
-            {{ device.ip }}
-          {% endif %}
-        </td>
-        <td>{{ device.last_check.strftime('%Y-%m-%d %H:%M:%S') if device.last_check else 'Brak' }}</td>
-        <td>
-          {% if device.update_required or (device.current_firmware and device.upgrade_firmware and device.current_firmware != device.upgrade_firmware) %}
-            {% if device.update_required and (device.current_firmware and device.upgrade_firmware and device.current_firmware != device.upgrade_firmware) %}
-              <span class="badge bg-danger">Wymaga aktualizacji <small>(system i firmware)</small></span>
-            {% elif device.update_required %}
-              <span class="badge bg-danger">Wymaga aktualizacji <small>(system)</small></span>
-            {% else %}
-              <span class="badge bg-danger">Wymaga aktualizacji <small>(firmware)</small></span>
-            {% endif %}
-          {% else %}
-            <span class="badge bg-success">Aktualny</span>
-          {% endif %}
-        </td>
-        <td>
-          <small>
-            <strong>System:</strong> {{ device.current_version or 'Brak' }}<br>
-            <strong>Firmware:</strong> {{ device.current_firmware or 'Brak' }}<br>
-            <strong>Upgrade Firmware:</strong> {{ device.upgrade_firmware or 'N/A' }}
-          </small>
-        </td>
-        <td>
-          <button type="button" class="btn btn-info btn-sm" onclick="window.location.href='{{ url_for('device_detail', device_id=device.id) }}'">Szczegóły</button>
-          <button type="button" class="btn btn-secondary btn-sm" onclick="window.location.href='{{ url_for('force_check', device_id=device.id) }}'">Wymuś sprawdzenie</button>
-          <button type="button" class="btn btn-warning btn-sm" onclick="window.location.href='{{ url_for('edit_device', device_id=device.id) }}'">Edytuj</button>
-        </td>
-      </tr>
-      {% else %}
-      <tr>
-        <td colspan="6" class="text-center">Brak dodanych urządzeń.</td>
-      </tr>
-      {% endfor %}
-    </tbody>
-  </table>
-</form>
 
 <!-- Overlay dla masowej aktualizacji systemu -->
 <div id="mass-system-update-overlay">
@@ -132,7 +194,7 @@
 </div>
 
 <!-- Dynamiczny prompt dla masowego restartu firmware -->
-<div id="mass-firmware-reboot-prompt" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:1100; color:white; text-align:center; padding-top:200px;">
+<div id="mass-firmware-reboot-prompt">
   <h3>Firmware update zakończony.</h3>
   <p>Czy chcesz zrestartować wszystkie wybrane urządzenia?</p>
   <button id="mass-firmware-reboot-btn" class="btn btn-danger">Restart urządzeń</button>
@@ -140,7 +202,7 @@
 </div>
 
 <script>
-  // Dodajemy event listenery raz, aby uniknąć wielokrotnego przypisywania
+  // Ten sam skrypt masowych akcji, przeniesiony bez zmian w logice
   document.addEventListener('DOMContentLoaded', function() {
     document.getElementById('select-all').addEventListener('change', function() {
       var checkboxes = document.querySelectorAll('input[name="selected_devices"]');
@@ -156,7 +218,6 @@
     });
   });
 
-  // Pobierz zaznaczone urządzenia
   function getSelectedDeviceIds() {
     var selected = [];
     var checkboxes = document.querySelectorAll('input[name="selected_devices"]:checked');
@@ -173,7 +234,6 @@
       alert("Wybierz przynajmniej jedno urządzenie.");
       return;
     }
-    // Wysyłamy update systemu dla każdego urządzenia asynchronicznie
     selectedDevices.forEach(function(id) {
       fetch(`/device/${id}/update`, { method: 'POST' })
         .catch(function(error){ console.error('Błąd aktualizacji systemu dla urządzenia ' + id, error); });
@@ -191,7 +251,7 @@
       timerDisplay.textContent = timeLeft + ' sekund';
       if(timeLeft <= 0){
         clearInterval(interval);
-        // Po zakończeniu odliczania, dla każdego urządzenia wykonaj force_check
+        // Po zakończeniu odliczania, force_check
         selectedDevices.forEach(function(id) {
           fetch(`/device/${id}/force_check`, { method: 'GET' })
             .catch(function(error){ console.error('Błąd force check dla urządzenia ' + id, error); });
@@ -208,7 +268,6 @@
       alert("Wybierz przynajmniej jedno urządzenie.");
       return;
     }
-    // Wysyłamy update firmware dla każdego urządzenia asynchronicznie
     selectedDevices.forEach(function(id) {
       fetch(`/device/${id}/update_firmware`, { method: 'POST' })
         .catch(function(error){ console.error('Błąd aktualizacji firmware dla urządzenia ' + id, error); });
@@ -217,7 +276,7 @@
     document.getElementById('mass-firmware-reboot-prompt').style.display = 'block';
   });
 
-  // Funkcja sekwencyjnego wysyłania reboot (z opóźnieniem)
+  // Sekwencyjny reboot
   function sendRebootSequentially(devices, index = 0) {
     if (index >= devices.length) return Promise.resolve();
     return fetch(`/device/${devices[index]}/restart`, { method: 'POST' })
@@ -225,7 +284,6 @@
         console.error('Błąd wysyłania reboot dla urządzenia ' + devices[index], error);
       })
       .then(function() {
-        // Opóźnienie 500 ms przed kolejnym rebootem
         return new Promise(resolve => setTimeout(resolve, 500));
       })
       .then(function() {
@@ -233,14 +291,11 @@
       });
   }
 
-  // Obsługa przycisku restartu w prompt dla masowego firmware update
   function onMassFirmwareReboot() {
     document.getElementById('mass-firmware-reboot-prompt').style.display = 'none';
     var selectedDevices = getSelectedDeviceIds();
-    // Wysyłamy rebooty sekwencyjnie
     sendRebootSequentially(selectedDevices)
       .then(function() {
-        // Po wysłaniu reboot dla wszystkich urządzeń, pokazujemy overlay z 2-minutowym paskiem postępu
         var overlay = document.getElementById('mass-firmware-update-overlay');
         overlay.style.display = 'block';
         var timeLeft = 120; // 120 sekund
@@ -253,7 +308,7 @@
           timerDisplay.textContent = timeLeft + ' sekund';
           if(timeLeft <= 0){
             clearInterval(interval);
-            // Po zakończeniu odliczania, dla każdego urządzenia wykonaj force_check
+            // Po zakończeniu odliczania, force_check
             selectedDevices.forEach(function(id) {
               fetch(`/device/${id}/force_check`, { method: 'GET' })
                 .catch(function(error){ console.error('Błąd force check dla urządzenia ' + id, error); });
@@ -263,8 +318,8 @@
         }, 1000);
       });
   }
-  
-  // Obsługa standardowego przycisku "Odśwież wybrane"
+
+  // Obsługa "Odśwież wybrane"
   document.getElementById('mass-update-form').addEventListener('submit', function(e) {
     e.preventDefault();
     var selectedDevices = getSelectedDeviceIds();
@@ -279,4 +334,4 @@
     setTimeout(function(){ location.reload(); }, 2000);
   });
 </script>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/edit_device.html b/templates/edit_device.html
index 4b701ba..4514d89 100644
--- a/templates/edit_device.html
+++ b/templates/edit_device.html
@@ -1,52 +1,102 @@
 {% extends "base.html" %}
 {% block title %}Edytuj urządzenie - RouterOS Update{% endblock %}
+
+{% block extra_head %}
+<style>
+/* Karta w trybie ciemnym */
+body.dark-mode .card {
+  background-color: #1e1e1e;
+  color: #ccc;
+  border-color: #444;
+}
+body.dark-mode .card .card-header.bg-light {
+  background-color: #333 !important;
+  border-bottom: 1px solid #444;
+}
+</style>
+{% endblock %}
+
 {% block content %}
-<div class="row justify-content-center">
-  <div class="col-md-6">
-    <h2>Edytuj urządzenie</h2>
-    <form method="POST">
-      <!-- Pole nazwy urządzenia -->
-      <div class="mb-3">
-        <label for="name" class="form-label">Nazwa urządzenia</label>
-        <input type="text" class="form-control" name="name" id="name" value="{{ device.name }}" required>
+<div class="container">
+  <div class="row justify-content-center">
+    <div class="col-md-6">
+      
+      <!-- Karta: Edycja urządzenia -->
+      <div class="card border-0 shadow">
+        <div class="card-header bg-light">
+          <h4 class="mb-0">Edytuj urządzenie</h4>
+        </div>
+        <div class="card-body">
+          <form method="POST">
+            <!-- Pole nazwy urządzenia -->
+            <div class="mb-3">
+              <label for="name" class="form-label">Nazwa urządzenia</label>
+              <input type="text" class="form-control" name="name" id="name" required
+                     value="{{ device.name }}"
+                     placeholder="np. Mikrotik w biurze">
+              <small class="text-muted">Przyjazna nazwa, np. „Router w piwnicy” lub „Mikrotik #2”.</small>
+            </div>
+            
+            <!-- Adres IP -->
+            <div class="mb-3">
+              <label for="ip" class="form-label">Adres IP</label>
+              <input type="text" class="form-control" name="ip" id="ip" required
+                     value="{{ device.ip }}"
+                     placeholder="np. 192.168.88.1">
+            </div>
+            
+            <!-- Port -->
+            <div class="mb-3">
+              <label for="port" class="form-label">Port</label>
+              <input type="number" class="form-control" name="port" id="port" required
+                     value="{{ device.port }}">
+              <small class="text-muted">Domyślnie 8728 (lub 8729 w przypadku SSL).</small>
+            </div>
+            
+            <!-- Nazwa użytkownika -->
+            <div class="mb-3">
+              <label for="device_username" class="form-label">Nazwa użytkownika urządzenia</label>
+              <input type="text" class="form-control" name="device_username" id="device_username" required
+                     value="{{ device.device_username }}"
+                     placeholder="np. admin">
+            </div>
+            
+            <!-- Hasło urządzenia -->
+            <div class="mb-3">
+              <label for="device_password" class="form-label">Hasło urządzenia</label>
+              <input type="password" class="form-control" name="device_password" id="device_password" required
+                     value="{{ device.device_password }}">
+            </div>
+            
+            <!-- SSL i weryfikacja certyfikatów -->
+            <div class="mb-3 form-check">
+              <input type="checkbox" class="form-check-input" name="use_ssl" id="use_ssl"
+                     {% if device.use_ssl %}checked{% endif %}>
+              <label class="form-check-label" for="use_ssl">Używaj SSL</label>
+            </div>
+            <div class="mb-3 form-check">
+              <input type="checkbox" class="form-check-input" name="ssl_insecure" id="ssl_insecure"
+                     {% if device.ssl_insecure %}checked{% endif %}>
+              <label class="form-check-label" for="ssl_insecure">Nie weryfikuj certyfikatu SSL</label>
+            </div>
+            
+            <!-- Branch aktualizacji (stable/dev/beta) -->
+            <div class="mb-3">
+              <label for="branch" class="form-label">Wybierz branch aktualizacji</label>
+              <select class="form-select" name="branch" id="branch">
+                <option value="stable" {% if device.branch == 'stable' %}selected{% endif %}>Stable</option>
+                <option value="dev" {% if device.branch == 'dev' %}selected{% endif %}>Dev</option>
+                <option value="beta" {% if device.branch == 'beta' %}selected{% endif %}>Beta</option>
+              </select>
+            </div>
+            
+            <!-- Przycisk zapisujący zmiany -->
+            <button type="submit" class="btn btn-primary">Zapisz zmiany</button>
+          </form>
+        </div>
       </div>
-      <!-- Pozostałe pola edycji: ip, port, username, password, branch -->
-      <div class="mb-3">
-        <label for="ip" class="form-label">Adres IP</label>
-        <input type="text" class="form-control" name="ip" id="ip" value="{{ device.ip }}" required>
-      </div>
-      <div class="mb-3">
-        <label for="port" class="form-label">Port</label>
-        <input type="number" class="form-control" name="port" id="port" value="{{ device.port }}" required>
-      </div>
-      <div class="mb-3">
-        <label for="device_username" class="form-label">Nazwa użytkownika urządzenia</label>
-        <input type="text" class="form-control" name="device_username" id="device_username" value="{{ device.device_username }}" required>
-      </div>
-      <div class="mb-3">
-        <label for="device_password" class="form-label">Hasło urządzenia</label>
-        <input type="password" class="form-control" name="device_password" id="device_password" value="{{ device.device_password }}" required>
-      </div>
-      <!-- Opcja SSL -->
-      <div class="mb-3 form-check">
-        <input type="checkbox" class="form-check-input" name="use_ssl" id="use_ssl" {% if device.use_ssl %}checked{% endif %}>
-        <label class="form-check-label" for="use_ssl">Używaj SSL</label>
-      </div>
-      <!-- Opcja nie weryfikowania certyfikatu SSL -->
-      <div class="mb-3 form-check">
-        <input type="checkbox" class="form-check-input" name="ssl_insecure" id="ssl_insecure" {% if device.ssl_insecure %}checked{% endif %}>
-        <label class="form-check-label" for="ssl_insecure">Nie weryfikuj certyfikatu SSL</label>
-      </div>
-      <div class="mb-3">
-        <label for="branch" class="form-label">Wybierz branch aktualizacji</label>
-        <select class="form-select" name="branch" id="branch">
-          <option value="stable" {% if device.branch == 'stable' %}selected{% endif %}>Stable</option>
-          <option value="dev" {% if device.branch == 'dev' %}selected{% endif %}>Dev</option>
-          <option value="beta" {% if device.branch == 'beta' %}selected{% endif %}>Beta</option>
-        </select>
-      </div>
-      <button type="submit" class="btn btn-primary">Zapisz zmiany</button>
-    </form>
+      
+    </div>
   </div>
 </div>
 {% endblock %}
diff --git a/templates/login.html b/templates/login.html
index c572b38..50a2ba3 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -1,20 +1,50 @@
 {% extends "base.html" %}
 {% block title %}Logowanie - RouterOS Update{% endblock %}
+
+{% block extra_head %}
+<style>
+/* Karta w trybie ciemnym */
+body.dark-mode .card {
+  background-color: #1e1e1e;
+  color: #ccc;
+  border-color: #444;
+}
+body.dark-mode .card .card-header.bg-light {
+  background-color: #333 !important;
+  border-bottom: 1px solid #444;
+}
+</style>
+{% endblock %}
+
 {% block content %}
-<div class="row justify-content-center">
-  <div class="col-md-6">
-    <h2>Logowanie</h2>
-    <form method="POST">
-      <div class="mb-3">
-        <label for="username" class="form-label">Nazwa użytkownika</label>
-        <input type="text" class="form-control" name="username" id="username" required>
+<div class="container">
+  <div class="row justify-content-center">
+    <div class="col-md-6">
+      <div class="card border-0 shadow">
+        <div class="card-header bg-light">
+          <h4 class="mb-0">Logowanie</h4>
+        </div>
+        <div class="card-body">
+          <form method="POST">
+            <div class="mb-3">
+              <label for="username" class="form-label">Nazwa użytkownika</label>
+              <input type="text" class="form-control" name="username" id="username" required
+                     placeholder="np. admin">
+            </div>
+            <div class="mb-3">
+              <label for="password" class="form-label">Hasło</label>
+              <input type="password" class="form-control" name="password" id="password" required
+                     placeholder="••••••••">
+            </div>
+            <button type="submit" class="btn btn-primary">Zaloguj</button>
+          </form>
+          <hr>
+          <p class="mb-0">Nie masz konta? 
+            <a href="{{ url_for('register') }}">Zarejestruj się</a>
+          </p>
+        </div>
       </div>
-      <div class="mb-3">
-        <label for="password" class="form-label">Hasło</label>
-        <input type="password" class="form-control" name="password" id="password" required>
-      </div>
-      <button type="submit" class="btn btn-primary">Zaloguj</button>
-    </form>
+    </div>
   </div>
 </div>
 {% endblock %}
diff --git a/templates/logs.html b/templates/logs.html
index 12bb573..5c0e29d 100644
--- a/templates/logs.html
+++ b/templates/logs.html
@@ -1,65 +1,134 @@
 {% extends "base.html" %}
 {% block title %}Logi - Aplikacja Updatera{% endblock %}
+
 {% block extra_head %}
-  <!-- Dołącz styl CSS biblioteki Vanilla‑DataTables -->
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanilla-datatables@latest/dist/vanilla-dataTables.min.css">
+<!-- Styl Vanilla‑DataTables -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanilla-datatables@latest/dist/vanilla-dataTables.min.css">
+
+<style>
+/* =======================================
+   Dostosowanie do trybu ciemnego
+   (jeśli w base.html używasz body.dark-mode)
+======================================= */
+
+/* Karta w trybie ciemnym */
+body.dark-mode .card {
+  background-color: #1e1e1e;
+  color: #cccccc;
+  border-color: #444;
+}
+
+/* Nagłówek karty w trybie ciemnym */
+body.dark-mode .card .card-header.bg-light {
+  background-color: #333 !important;
+  border-bottom: 1px solid #444;
+}
+
+/* Tabela w trybie ciemnym
+   - wyjaśnienie: thead.table-dark w trybie jasnym ma swoje domyślne kolory,
+     więc w ciemnym je nadpisujemy, żeby był czytelny. */
+body.dark-mode .table thead.table-dark {
+  background-color: #2a2a2a !important;
+  color: #ccc !important;
+  border-color: #444 !important;
+}
+body.dark-mode .table-hover tbody tr:hover {
+  background-color: #2f2f2f;
+}
+
+/* Obramowania w trybie ciemnym */
+body.dark-mode .table.table-bordered > :not(caption) > * > * {
+  border-color: #444 !important;
+}
+
+/* Tabela DataTables – drobne poprawki w trybie ciemnym */
+body.dark-mode .dataTable-wrapper .dataTable-info,
+body.dark-mode .dataTable-wrapper .dataTable-pagination,
+body.dark-mode .dataTable-wrapper .dataTable-dropdown label,
+body.dark-mode .dataTable-wrapper .dataTable-input {
+  color: #ccc;
+}
+
+</style>
 {% endblock %}
+
 {% block content %}
-<h2>Logi</h2>
-<!-- Formularz kasowania logów starszych niż podana liczba dni -->
-<div class="mt-4">
-  <h4>Usuń logi starsze niż podana liczba dni</h4>
-  <form method="POST" action="{{ url_for('clean_logs') }}">
-    <div class="mb-3">
-      <label for="days" class="form-label">Liczba dni</label>
-      <input type="number" class="form-control" name="days" id="days" placeholder="Podaj liczbę dni">
+<div class="container">
+  
+  <!-- Nagłówek strony -->
+  <h2 class="mb-4">Logi</h2>
+
+  <!-- Karta: Formularz kasowania logów -->
+  <div class="card border-0 shadow mb-4">
+    <div class="card-header bg-light">
+      <h5 class="mb-0">Usuń logi starsze niż podana liczba dni</h5>
     </div>
-    <button type="submit" class="btn btn-danger">Usuń logi</button>
-  </form>
+    <div class="card-body">
+      <form method="POST" action="{{ url_for('clean_logs') }}">
+        <div class="mb-3">
+          <label for="days" class="form-label">Liczba dni</label>
+          <input type="number" class="form-control" name="days" id="days" placeholder="Podaj liczbę dni">
+        </div>
+        <button type="submit" class="btn btn-danger">Usuń logi</button>
+      </form>
+    </div>
+  </div>
+
+  <!-- Karta: Tabela logów -->
+  <div class="card border-0 shadow">
+    <div class="card-header bg-light">
+      <h5 class="mb-0">Wszystkie logi systemu</h5>
+    </div>
+    <div class="card-body p-0">
+      <div class="table-responsive">
+        <table class="table table-striped table-hover table-sm align-middle mb-0" id="logsTable">
+          <thead class="table-dark">
+            <tr>
+              <th style="white-space: nowrap;">Data i czas</th>
+              <th>Urządzenie</th>
+              <th>Wiadomość</th>
+            </tr>
+          </thead>
+          <tbody>
+            {% for log in logs %}
+            <tr>
+              <td style="white-space: nowrap;">{{ log.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</td>
+              <td>
+                {% if log.device_id %}
+                  <a href="{{ url_for('device_detail', device_id=log.device.id) }}">
+                    {{ log.device.name if log.device.name else "Urządzenie #" ~ log.device.id }}
+                  </a>
+                {% else %}
+                  <span class="text-muted">Ogólne</span>
+                {% endif %}
+              </td>
+              <!-- Treść logu w <pre> z white-space: pre-wrap, żeby łamać długie linie -->
+              <td><pre style="white-space: pre-wrap; margin:0;">{{ log.message }}</pre></td>
+            </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
 </div>
-<hr>
-<table class="table table-striped" id="logsTable">
-  <thead class="table-dark">
-    <tr>
-      <th>Data i czas</th>
-      <th>Urządzenie</th>
-      <th>Wiadomość</th>
-    </tr>
-  </thead>
-  <tbody>
-    {% for log in logs %}
-    <tr>
-      <td>{{ log.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</td>
-      <td>
-        {% if log.device_id %}
-          <a href="{{ url_for('device_detail', device_id=log.device.id) }}">
-            {{ log.device.name if log.device.name else "Urządzenie #" ~ log.device.id }}
-          </a>
-        {% else %}
-          Ogólne
-        {% endif %}
-      </td>
-      <td><pre style="white-space: pre-wrap;">{{ log.message }}</pre></td>
-    </tr>
-    {% endfor %}
-  </tbody>
-</table>
 {% endblock %}
+
 {% block extra_scripts %}
-  <!-- Dołącz skrypt biblioteki Vanilla‑DataTables -->
-  <script src="https://cdn.jsdelivr.net/npm/vanilla-datatables@latest/dist/vanilla-dataTables.min.js"></script>
-  <script>
-    // Inicjalizacja Vanilla‑DataTables dla tabeli logów
-    const dataTable = new DataTable("#logsTable", {
-      searchable: true,
-      sortable: true,
-      perPage: 10,
-      labels: {
-        placeholder: "Szukaj...", // placeholder dla pola wyszukiwania
-        perPage: "{select} wpisów na stronę", // etykieta przy wyborze liczby wierszy
-        noRows: "Brak logów.", // komunikat, gdy tabela jest pusta
-        info: "Wyświetlono {start} - {end} z {rows} logów" // tekst z informacją o paginacji
-      }
-    });
-  </script>
+<!-- Vanilla‑DataTables -->
+<script src="https://cdn.jsdelivr.net/npm/vanilla-datatables@latest/dist/vanilla-dataTables.min.js"></script>
+<script>
+  // Inicjalizacja Vanilla‑DataTables dla tabeli logów
+  const dataTable = new DataTable("#logsTable", {
+    searchable: true,
+    sortable: true,
+    perPage: 10,
+    labels: {
+      placeholder: "Szukaj...",     // placeholder dla pola wyszukiwania
+      perPage: "{select} wpisów na stronę", // tekst przy select
+      noRows: "Brak logów.",        // gdy tabela jest pusta
+      info: "Wyświetlono {start} - {end} z {rows} logów" // info paginacja
+    }
+  });
+</script>
 {% endblock %}
diff --git a/templates/register.html b/templates/register.html
index 454d5fc..628bacd 100644
--- a/templates/register.html
+++ b/templates/register.html
@@ -1,24 +1,55 @@
 {% extends "base.html" %}
 {% block title %}Rejestracja - RouterOS Update{% endblock %}
+
+{% block extra_head %}
+<style>
+/* Karta w trybie ciemnym */
+body.dark-mode .card {
+  background-color: #1e1e1e;
+  color: #ccc;
+  border-color: #444;
+}
+body.dark-mode .card .card-header.bg-light {
+  background-color: #333 !important;
+  border-bottom: 1px solid #444;
+}
+</style>
+{% endblock %}
+
 {% block content %}
-<div class="row justify-content-center">
-  <div class="col-md-6">
-    <h2>Rejestracja</h2>
-    <form method="POST">
-      <div class="mb-3">
-        <label for="username" class="form-label">Nazwa użytkownika</label>
-        <input type="text" class="form-control" name="username" id="username" required>
+<div class="container">
+  <div class="row justify-content-center">
+    <div class="col-md-6">
+      <div class="card border-0 shadow">
+        <div class="card-header bg-light">
+          <h4 class="mb-0">Rejestracja</h4>
+        </div>
+        <div class="card-body">
+          <form method="POST">
+            <div class="mb-3">
+              <label for="username" class="form-label">Nazwa użytkownika</label>
+              <input type="text" class="form-control" name="username" id="username" required
+                     placeholder="np. admin2">
+            </div>
+            <div class="mb-3">
+              <label for="email" class="form-label">Adres e-mail</label>
+              <input type="email" class="form-control" name="email" id="email" required
+                     placeholder="np. user@example.com">
+            </div>
+            <div class="mb-3">
+              <label for="password" class="form-label">Hasło</label>
+              <input type="password" class="form-control" name="password" id="password" required
+                     placeholder="••••••••">
+            </div>
+            <button type="submit" class="btn btn-primary">Zarejestruj się</button>
+          </form>
+          <hr>
+          <p class="mb-0">Masz już konto?
+            <a href="{{ url_for('login') }}">Zaloguj się</a>
+          </p>
+        </div>
       </div>
-      <div class="mb-3">
-        <label for="email" class="form-label">Email</label>
-        <input type="email" class="form-control" name="email" id="email" required>
-      </div>
-      <div class="mb-3">
-        <label for="password" class="form-label">Hasło</label>
-        <input type="password" class="form-control" name="password" id="password" required>
-      </div>
-      <button type="submit" class="btn btn-primary">Zarejestruj się</button>
-    </form>
+    </div>
   </div>
 </div>
 {% endblock %}
diff --git a/templates/routeros_changelog.html b/templates/routeros_changelog.html
deleted file mode 100644
index 855ee41..0000000
--- a/templates/routeros_changelog.html
+++ /dev/null
@@ -1,69 +0,0 @@
-{% extends "base.html" %}
-{% block title %}Changelog RouterOS – Kanały publikacji{% endblock %}
-{% block content %}
-<div class="container py-4">
-  <h2 class="mb-4">Changelog RouterOS według kanałów publikacji</h2>
-  <div class="row">
-    <!-- Sekcja Stable -->
-    <div class="col-md-4">
-      <h3 class="text-success">Stable</h3>
-      {% for entry in entries_stable %}
-        <div class="card mb-3">
-          <div class="card-header bg-success text-white">
-            <h5 class="mb-0">
-              {{ entry.version }} 
-              <small>({{ entry.timestamp.strftime('%Y-%b-%d') }})</small>
-            </h5>
-          </div>
-          <div class="card-body">
-            <pre style="white-space: pre-wrap;">{{ entry.details }}</pre>
-          </div>
-        </div>
-      {% else %}
-        <p>Brak wpisów.</p>
-      {% endfor %}
-    </div>
-    <!-- Sekcja RC -->
-    <div class="col-md-4">
-      <h3 class="text-warning">RC</h3>
-      {% for entry in entries_rc %}
-        <div class="card mb-3">
-          <div class="card-header bg-warning text-white">
-            <h5 class="mb-0">
-              {{ entry.version }} 
-              <small>({{ entry.timestamp.strftime('%Y-%b-%d') }})</small>
-            </h5>
-          </div>
-          <div class="card-body">
-            <pre style="white-space: pre-wrap;">{{ entry.details }}</pre>
-          </div>
-        </div>
-      {% else %}
-        <p>Brak wpisów.</p>
-      {% endfor %}
-    </div>
-    <!-- Sekcja Beta -->
-    <div class="col-md-4">
-      <h3 class="text-info">Beta</h3>
-      {% for entry in entries_beta %}
-        <div class="card mb-3">
-          <div class="card-header bg-info text-white">
-            <h5 class="mb-0">
-              {{ entry.version }} 
-              <small>({{ entry.timestamp.strftime('%Y-%b-%d') }})</small>
-            </h5>
-          </div>
-          <div class="card-body">
-            <pre style="white-space: pre-wrap;">{{ entry.details }}</pre>
-          </div>
-        </div>
-      {% else %}
-        <p>Brak wpisów.</p>
-      {% endfor %}
-    </div>
-  </div>
-  <div class="mt-4">
-    <a href="{{ url_for('dashboard') }}" class="btn btn-secondary">Powrót do dashboardu</a>
-  </div>
-</div>
-{% endblock %}
diff --git a/templates/routeros_changelog_tabs.html b/templates/routeros_changelog_tabs.html
index f2ab3b8..899593c 100644
--- a/templates/routeros_changelog_tabs.html
+++ b/templates/routeros_changelog_tabs.html
@@ -1,91 +1,154 @@
 {% extends "base.html" %}
 {% block title %}Changelog RouterOS{% endblock %}
-{% block extra_head %}
-  <!-- Dodajemy Prism.js – globalny arkusz stylów będzie zmieniany przez base.html -->
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css" id="prism-style">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
-  <style>
 
-    pre {
-      background-color: #282c34;
-      color: #abb2bf;
-      font-size: 1.1rem;
-      line-height: 1.5;
-      padding: 1rem;
-      border-radius: 0 0 5px 5px;
-      overflow-x: auto;
-      margin: 0;
+{% block extra_head %}
+<!-- PRISM.JS (temat okaidia lub dowolny inny) -->
+<link rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css"
+      id="prism-style">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
+
+<style>
+    /* 
+      1) Mniejszy rozmiar fontu w bloczku <code>
+      2) Łamanie linii, max-width, itp.
+      3) Tło w jasnym/ciemnym trybie
+    */
+
+    /* Mniejszy rozmiar i ograniczenie linii */
+    pre code[class*="language-"] {
+      font-size: 0.85rem !important;   /* dopasuj do gustu, np. 0.9rem lub 0.8rem */
+      line-height: 1.3 !important;
     }
-  </style>
+
+    /* Łamanie linii i scroll w razie potrzeby */
+    pre {
+      white-space: pre-wrap;       
+      word-break: break-word;      
+      overflow-wrap: break-word;   
+      max-width: 100%;
+      overflow-x: auto;
+      margin: 0;        
+      padding: 1rem;
+    }
+
+    /* Tło w trybie jasnym */
+    body.light-mode pre {
+      background-color: #ffffff !important;
+      color: #212529 !important;
+    }
+    /* Tło w trybie ciemnym */
+    body.dark-mode pre {
+      background-color: #2b2b2b !important;
+      color: #e0e0e0 !important;
+    }
+
+    body.dark-mode .card {
+      background-color: #1e1e1e !important;
+      color: #ccc !important;
+      border-color: #444 !important;
+    }
+
+    body.dark-mode .card-header {
+      background-color: #333 !important;
+      color: #fff !important;
+    }
+</style>
 {% endblock %}
+
 {% block content %}
 <div class="container py-4">
-  <!-- Nagłówek z tytułem i przyciskami akcji (przyciski aktualizacji są tutaj, globalny dark mode toggle już w navbarze) -->
-  <div class="d-flex justify-content-between align-items-center mb-4">
-    <h2>Changelog RouterOS</h2>
-    <a href="{{ url_for('force_fetch_changelogs') }}" 
-       class="btn btn-danger" 
-       onclick="return confirm('Czy na pewno chcesz ręcznie pobrać wszystkie changelogi? Operacja usunie wszystkie stare wpisy.');">
-      Aktualizuj changelogi
-    </a>
-  </div>
-  
-  <!-- Nawigacja po kanałach -->
-  <ul class="nav nav-tabs mb-3">
-    <li class="nav-item">
-      <a class="nav-link {% if channel=='stable' %}active{% endif %}" href="{{ url_for('routeros_changelog', channel='stable', series=series) }}">Stable</a>
-    </li>
-    <li class="nav-item">
-      <a class="nav-link {% if channel=='rc' %}active{% endif %}" href="{{ url_for('routeros_changelog', channel='rc', series=series) }}">RC</a>
-    </li>
-    <li class="nav-item">
-      <a class="nav-link {% if channel=='beta' %}active{% endif %}" href="{{ url_for('routeros_changelog', channel='beta', series=series) }}">Beta</a>
-    </li>
-  </ul>
-  
-  <!-- Nawigacja po seriach wersji -->
-  <ul class="nav nav-pills mb-3">
-    <li class="nav-item">
-      <a class="nav-link {% if series=='7.x' %}active{% endif %}" href="{{ url_for('routeros_changelog', channel=channel, series='7.x') }}">7.x</a>
-    </li>
-    <li class="nav-item">
-      <a class="nav-link {% if series=='6.x' %}active{% endif %}" href="{{ url_for('routeros_changelog', channel=channel, series='6.x') }}">6.x</a>
-    </li>
-  </ul>
-  
-  <!-- Prezentacja wybranego wpisu changeloga -->
-  {% if selected_entry %}
-    <div class="mb-3">
-      <h4 class="changelog-header">
-        {{ selected_entry.version | format_version }} 
-        <small>({{ selected_entry.timestamp.strftime('%Y-%b-%d') }})</small>
-      </h4>
-      <pre><code class="language-plaintext">{{ selected_entry.details }}</code></pre>
+
+  <!-- Karta z cieniowaniem, nagłówek i ciało -->
+  <div class="card border-0 shadow">
+    <div class="card-header d-flex justify-content-between align-items-center">
+      <h4 class="mb-0">Changelog RouterOS</h4>
+      <a href="{{ url_for('force_fetch_changelogs') }}"
+         class="btn btn-danger btn-sm"
+         onclick="return confirm('Czy na pewno chcesz ręcznie pobrać wszystkie changelogi? Operacja usunie wszystkie stare wpisy.');">
+        Aktualizuj changelogi
+      </a>
     </div>
-  {% else %}
-    <p>Brak wpisów dla wybranych ustawień.</p>
-  {% endif %}
-  
-  <!-- Formularz wyboru innego wpisu -->
-  {% if entries|length > 1 %}
-    <form method="GET" action="{{ url_for('routeros_changelog') }}">
-      <input type="hidden" name="channel" value="{{ channel }}">
-      <input type="hidden" name="series" value="{{ series }}">
-      <div class="input-group mb-3">
-        <select name="version" class="form-select">
-          {% for entry in entries %}
-            <option value="{{ entry.version }}" {% if selected_entry and entry.version == selected_entry.version %}selected{% endif %}>
-              {{ entry.version | format_version }} ({{ entry.timestamp.strftime('%Y-%b-%d') }})
-            </option>
-          {% endfor %}
-        </select>
-        <button class="btn btn-primary" type="submit">Pokaż changelog</button>
+    <div class="card-body">
+
+      <!-- Nawigacja kanałów (stable / rc / beta) -->
+      <ul class="nav nav-tabs mb-3">
+        <li class="nav-item">
+          <a class="nav-link {% if channel=='stable' %}active{% endif %}"
+             href="{{ url_for('routeros_changelog', channel='stable', series=series) }}">
+            Stable
+          </a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link {% if channel=='rc' %}active{% endif %}"
+             href="{{ url_for('routeros_changelog', channel='rc', series=series) }}">
+            RC
+          </a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link {% if channel=='beta' %}active{% endif %}"
+             href="{{ url_for('routeros_changelog', channel='beta', series=series) }}">
+            Beta
+          </a>
+        </li>
+      </ul>
+      
+      <!-- Nawigacja serii (7.x / 6.x) -->
+      <ul class="nav nav-pills mb-3">
+        <li class="nav-item">
+          <a class="nav-link {% if series=='7.x' %}active{% endif %}"
+             href="{{ url_for('routeros_changelog', channel=channel, series='7.x') }}">
+            7.x
+          </a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link {% if series=='6.x' %}active{% endif %}"
+             href="{{ url_for('routeros_changelog', channel=channel, series='6.x') }}">
+            6.x
+          </a>
+        </li>
+      </ul>
+
+      <!-- Prezentacja wybranego changeloga -->
+      {% if selected_entry %}
+        <div class="mb-3">
+          <h5 class="fw-bold">
+            {{ selected_entry.version | format_version }} 
+            <small class="text-muted">({{ selected_entry.timestamp.strftime('%Y-%b-%d') }})</small>
+          </h5>
+          <pre><code class="language-plaintext">{{ selected_entry.details }}</code></pre>
+        </div>
+      {% else %}
+        <div class="alert alert-warning mb-3">
+          Brak wpisów dla wybranych ustawień (kanał: {{ channel }}, seria: {{ series }}).
+        </div>
+      {% endif %}
+      
+      <!-- Wybór innej wersji, jeśli mamy >1 wpis -->
+      {% if entries|length > 1 %}
+      <form method="GET" action="{{ url_for('routeros_changelog') }}">
+        <input type="hidden" name="channel" value="{{ channel }}">
+        <input type="hidden" name="series" value="{{ series }}">
+        
+        <div class="input-group mb-3">
+          <select name="version" class="form-select">
+            {% for entry in entries %}
+              <option value="{{ entry.version }}"
+                      {% if selected_entry and entry.version == selected_entry.version %}selected{% endif %}>
+                {{ entry.version | format_version }} ({{ entry.timestamp.strftime('%Y-%b-%d') }})
+              </option>
+            {% endfor %}
+          </select>
+          <button class="btn btn-primary" type="submit">Pokaż</button>
+        </div>
+      </form>
+      {% endif %}
+      
+      <div class="mt-4">
+        <a href="{{ url_for('dashboard') }}" class="btn btn-secondary">Powrót do dashboardu</a>
       </div>
-    </form>
-  {% endif %}
-  
-  <div class="mt-4">
-    <a href="{{ url_for('dashboard') }}" class="btn btn-secondary">Powrót do dashboardu</a>
-  </div>
+      
+    </div> <!-- /card-body -->
+  </div> <!-- /card -->
 </div>
 {% endblock %}
diff --git a/templates/settings.html b/templates/settings.html
index d500a5d..bb03bb4 100644
--- a/templates/settings.html
+++ b/templates/settings.html
@@ -1,89 +1,159 @@
 {% extends "base.html" %}
 {% block title %}Ustawienia - RouterOS Update{% endblock %}
-{% block content %}
-<div class="row justify-content-center">
-  <div class="col-md-8">
-    <h2 class="mb-4">Ustawienia powiadomień i systemu</h2>
-    
-    <!-- Główny formularz ustawień -->
-    <form method="POST">
-      <fieldset class="border p-3 mb-3">
-        <legend class="w-auto">Pushover</legend>
-        <div class="form-check mb-2">
-          <input type="checkbox" class="form-check-input" name="pushover_enabled" id="pushover_enabled" {% if settings.pushover_enabled %}checked{% endif %}>
-          <label class="form-check-label" for="pushover_enabled">Włącz powiadomienia Pushover</label>
-        </div>
-        <div class="mb-3">
-          <label for="pushover_user_key" class="form-label">Pushover User Key</label>
-          <input type="text" class="form-control" name="pushover_user_key" id="pushover_user_key" value="{{ settings.pushover_user_key or '' }}">
-        </div>
-        <div class="mb-3">
-          <label for="pushover_token" class="form-label">Pushover Token</label>
-          <input type="text" class="form-control" name="pushover_token" id="pushover_token" value="{{ settings.pushover_token or '' }}">
-        </div>
-      </fieldset>
-      
-      <fieldset class="border p-3 mb-3">
-        <legend class="w-auto">SMTP (E-mail)</legend>
-        <div class="form-check mb-2">
-          <input type="checkbox" class="form-check-input" name="email_notifications_enabled" id="email_notifications_enabled" {% if settings.email_notifications_enabled %}checked{% endif %}>
-          <label class="form-check-label" for="email_notifications_enabled">Włącz powiadomienia e-mail</label>
-        </div>
-        <div class="mb-3">
-          <label for="smtp_server" class="form-label">SMTP Server</label>
-          <input type="text" class="form-control" name="smtp_server" id="smtp_server" value="{{ settings.smtp_server or '' }}">
-        </div>
-        <div class="mb-3">
-          <label for="smtp_port" class="form-label">SMTP Port</label>
-          <input type="number" class="form-control" name="smtp_port" id="smtp_port" value="{{ settings.smtp_port or '' }}">
-        </div>
-        <div class="mb-3">
-          <label for="smtp_username" class="form-label">SMTP Username</label>
-          <input type="text" class="form-control" name="smtp_username" id="smtp_username" value="{{ settings.smtp_username or '' }}">
-        </div>
-        <div class="mb-3">
-          <label for="smtp_password" class="form-label">SMTP Password</label>
-          <input type="password" class="form-control" name="smtp_password" id="smtp_password" value="{{ settings.smtp_password or '' }}">
-        </div>
-      </fieldset>
-      <fieldset class="border p-3 mb-3">
-        <legend class="w-auto">E-mail odbiorcy powiadomień</legend>
-        <div class="mb-3">
-          <label for="recipient_email" class="form-label">Adres e-mail do otrzymywania powiadomień</label>
-          <input type="email" class="form-control" name="recipient_email" id="recipient_email" value="{{ settings.recipient_email or '' }}">
-        </div>
-      </fieldset>
-      <fieldset class="border p-3 mb-3">
-        <legend class="w-auto">Interwał sprawdzania</legend>
-        <div class="mb-3">
-          <label for="check_interval" class="form-label">Interwał (sekundy) <code>21600 = 6 godzin</code></label>
-          <input type="number" class="form-control" name="check_interval" id="check_interval" value="{{ settings.check_interval or 21600 }}">
-        </div>
-        <div class="mb-3">
-          <label for="time_input" class="form-label">Czas (HH:MM:SS)</label>
-          <input type="text" class="form-control" id="time_input" placeholder="np. 01:30:00">
-          <button type="button" class="btn btn-secondary mt-2" onclick="convertTime()">Konwertuj na sekundy</button>
-        </div>
-      </fieldset>
-      
-      <fieldset class="border p-3 mb-3">
-        <legend class="w-auto">Retencja logów</legend>
-        <div class="mb-3">
-          <label for="log_retention_days" class="form-label">Przechowywać logi przez (dni)</label>
-          <input type="number" class="form-control" name="log_retention_days" id="log_retention_days" value="{{ settings.log_retention_days or 30 }}">
-        </div>
-      </fieldset>
 
-      <button type="submit" class="btn btn-primary">Zapisz ustawienia</button>
-    </form>
-    
-    <!-- Przyciski testowe w osobnym bloku, ułożone w jednej linii po prawej stronie -->
-    <div class="mt-4">
+{% block extra_head %}
+<style>
+/* Karta w trybie ciemnym */
+body.dark-mode .card {
+  background-color: #1e1e1e;
+  color: #ccc;
+  border-color: #444;
+}
+
+/* Nagłówek karty w trybie ciemnym */
+body.dark-mode .card .card-header.bg-light {
+  background-color: #333 !important;
+  border-bottom: 1px solid #444;
+}
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="container">
+  
+  <!-- Karta z głównym formularzem ustawień -->
+  <div class="card border-0 shadow mb-4">
+    <div class="card-header bg-light">
+      <h4 class="mb-0">Ustawienia powiadomień i systemu</h4>
+    </div>
+    <div class="card-body">
+      <form method="POST">
+        
+        <!-- Sekcja Pushover -->
+        <fieldset class="border p-3 mb-3">
+          <legend class="w-auto">Pushover</legend>
+          <div class="form-check mb-2">
+            <input type="checkbox" class="form-check-input" name="pushover_enabled" id="pushover_enabled"
+                   {% if settings.pushover_enabled %}checked{% endif %}>
+            <label class="form-check-label" for="pushover_enabled">
+              Włącz powiadomienia Pushover
+            </label>
+          </div>
+          <div class="mb-3">
+            <label for="pushover_user_key" class="form-label">Pushover User Key</label>
+            <input type="text" class="form-control" name="pushover_user_key" id="pushover_user_key"
+                   value="{{ settings.pushover_user_key or '' }}"
+                   placeholder="np. ujHGkDYop837...">
+          </div>
+          <div class="mb-3">
+            <label for="pushover_token" class="form-label">Pushover Token</label>
+            <input type="text" class="form-control" name="pushover_token" id="pushover_token"
+                   value="{{ settings.pushover_token or '' }}"
+                   placeholder="np. a9WsK09mnj3R8aGj...">
+          </div>
+        </fieldset>
+        
+        <!-- Sekcja SMTP (E-mail) -->
+        <fieldset class="border p-3 mb-3">
+          <legend class="w-auto">SMTP (E-mail)</legend>
+          <div class="form-check mb-2">
+            <input type="checkbox" class="form-check-input" name="email_notifications_enabled"
+                   id="email_notifications_enabled"
+                   {% if settings.email_notifications_enabled %}checked{% endif %}>
+            <label class="form-check-label" for="email_notifications_enabled">
+              Włącz powiadomienia e-mail
+            </label>
+          </div>
+          <div class="mb-3">
+            <label for="smtp_server" class="form-label">SMTP Server</label>
+            <input type="text" class="form-control" name="smtp_server" id="smtp_server"
+                   value="{{ settings.smtp_server or '' }}"
+                   placeholder="np. smtp.gmail.com">
+          </div>
+          <div class="mb-3">
+            <label for="smtp_port" class="form-label">SMTP Port</label>
+            <input type="number" class="form-control" name="smtp_port" id="smtp_port"
+                   value="{{ settings.smtp_port or '' }}"
+                   placeholder="np. 587">
+          </div>
+          <div class="mb-3">
+            <label for="smtp_username" class="form-label">SMTP Username</label>
+            <input type="text" class="form-control" name="smtp_username" id="smtp_username"
+                   value="{{ settings.smtp_username or '' }}">
+          </div>
+          <div class="mb-3">
+            <label for="smtp_password" class="form-label">SMTP Password</label>
+            <input type="password" class="form-control" name="smtp_password" id="smtp_password"
+                   value="{{ settings.smtp_password or '' }}">
+          </div>
+        </fieldset>
+
+        <!-- Sekcja E-mail odbiorcy -->
+        <fieldset class="border p-3 mb-3">
+          <legend class="w-auto">Odbiorca powiadomień</legend>
+          <div class="mb-3">
+            <label for="recipient_email" class="form-label">Adres e-mail do otrzymywania powiadomień</label>
+            <input type="email" class="form-control" name="recipient_email" id="recipient_email"
+                   value="{{ settings.recipient_email or '' }}"
+                   placeholder="np. admin@example.com">
+          </div>
+        </fieldset>
+
+        <!-- Sekcja interwału -->
+        <fieldset class="border p-3 mb-3">
+          <legend class="w-auto">Interwał sprawdzania</legend>
+          <div class="mb-3">
+            <label for="check_interval" class="form-label">
+              Interwał (sekundy) 
+              <code>21600 = 6 godzin</code>
+            </label>
+            <input type="number" class="form-control" name="check_interval" id="check_interval"
+                   value="{{ settings.check_interval or 21600 }}">
+            <small class="text-muted">Co ile sekund system będzie sprawdzał aktualizacje.</small>
+          </div>
+          <div class="mb-3">
+            <label for="time_input" class="form-label">Czas (HH:MM:SS)</label>
+            <input type="text" class="form-control" id="time_input" placeholder="np. 01:30:00">
+            <button type="button" class="btn btn-secondary mt-2" onclick="convertTime()">
+              Konwertuj na sekundy
+            </button>
+            <small class="text-muted d-block mt-1">
+              Wpisz czas w formacie Godziny:Minuty:Sekundy, a następnie kliknij „Konwertuj”.
+            </small>
+          </div>
+        </fieldset>
+
+        <!-- Sekcja retencji logów -->
+        <fieldset class="border p-3 mb-3">
+          <legend class="w-auto">Retencja logów</legend>
+          <div class="mb-3">
+            <label for="log_retention_days" class="form-label">
+              Przechowywać logi przez (dni)
+            </label>
+            <input type="number" class="form-control" name="log_retention_days" id="log_retention_days"
+                   value="{{ settings.log_retention_days or 30 }}">
+            <small class="text-muted">Starsze logi będą automatycznie usuwane po tym czasie.</small>
+          </div>
+        </fieldset>
+
+        <!-- Przycisk zapisywania -->
+        <button type="submit" class="btn btn-primary">Zapisz ustawienia</button>
+      </form>
+    </div>
+  </div>
+
+  <!-- Karta z przyciskami testowymi -->
+  <div class="card border-0 shadow">
+    <div class="card-header bg-light">
+      <h5 class="mb-0">Test powiadomień</h5>
+    </div>
+    <div class="card-body">
+      <p class="text-muted">Skorzystaj z przycisków, aby wysłać testowe powiadomienie Pushover / E-mail.</p>
       <div class="d-flex justify-content-end">
-        <form method="POST" action="{{ url_for('test_pushover') }}" class="d-inline me-2">
+        <form method="POST" action="{{ url_for('test_pushover') }}" class="me-2">
           <button type="submit" class="btn btn-secondary">Test Pushover</button>
         </form>
-        <form method="POST" action="{{ url_for('test_email') }}" class="d-inline">
+        <form method="POST" action="{{ url_for('test_email') }}">
           <button type="submit" class="btn btn-secondary">Test E-mail</button>
         </form>
       </div>
diff --git a/templates/update_history.html b/templates/update_history.html
index 9aa35a1..7bc1065 100644
--- a/templates/update_history.html
+++ b/templates/update_history.html
@@ -1,27 +1,92 @@
 {% extends "base.html" %}
 {% block title %}Historia aktualizacji{% endblock %}
+
+{% block extra_head %}
+<style>
+/* === Styl dopasowany do trybu ciemnego i jasnego === */
+
+/* Tło karty w trybie ciemnym */
+body.dark-mode .card {
+  background-color: #1e1e1e;
+  color: #ccc;
+}
+
+/* Nagłówek karty w trybie ciemnym */
+body.dark-mode .card .card-header.bg-light {
+  background-color: #333 !important;
+  border-bottom: 1px solid #444;
+}
+
+/* Tabela w trybie ciemnym: jaśniejsze wyróżnienie nagłówka */
+body.dark-mode .card table thead {
+  background-color: #2a2a2a;
+  color: #ccc;
+}
+
+/* Tło wierszy tabeli w trybie ciemnym */
+body.dark-mode .card table tbody tr {
+  background-color: #1e1e1e;
+  color: #ccc;
+}
+
+/* Obramowanie w trybie ciemnym */
+body.dark-mode .table-bordered > :not(caption) > * > * {
+  border-color: #444 !important;
+}
+</style>
+{% endblock %}
+
 {% block content %}
 <div class="container">
-  <h2 class="mb-4">Historia aktualizacji</h2>
-  <table class="table table-bordered">
-    <thead>
-      <tr>
-        <th>Data</th>
-        <th>Urządzenie</th>
-        <th>Typ aktualizacji</th>
-        <th>Szczegóły</th>
-      </tr>
-    </thead>
-    <tbody>
-      {% for history in histories %}
-      <tr>
-        <td>{{ history.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</td>
-        <td>{{ history.device.name or history.device.ip }}</td>
-        <td>{{ history.update_type }}</td>
-        <td>{{ history.details }}</td>
-      </tr>
-      {% endfor %}
-    </tbody>
-  </table>
+  <div class="card border-0 shadow mb-4">
+    <!-- Nagłówek karty -->
+    <div class="card-header bg-light">
+      <h4 class="mb-0">Historia aktualizacji</h4>
+    </div>
+
+    <!-- Zawartość karty -->
+    <div class="card-body p-0">
+      <!-- Jeśli mamy cokolwiek w histories -->
+      {% if histories %}
+        <div class="table-responsive">
+          <table class="table table-bordered table-hover table-sm align-middle mb-0">
+            <thead class="table-light">
+              <tr>
+                <th class="text-nowrap">Data</th>
+                <th class="text-nowrap">Urządzenie</th>
+                <th class="text-nowrap">Typ aktualizacji</th>
+                <th class="text-nowrap">Szczegóły</th>
+              </tr>
+            </thead>
+            <tbody>
+            {% for history in histories %}
+              <tr>
+                <td>{{ history.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</td>
+                <td>
+                  {{ history.device.name or history.device.ip }}
+                </td>
+                <td>
+                  {# Prosty przykład wyróżnienia typów aktualizacji #}
+                  {% if history.update_type == "system" %}
+                    <span class="badge bg-primary">System</span>
+                  {% elif history.update_type == "firmware" %}
+                    <span class="badge bg-success">Firmware</span>
+                  {% else %}
+                    <span class="badge bg-secondary">{{ history.update_type }}</span>
+                  {% endif %}
+                </td>
+                <td>{{ history.details }}</td>
+              </tr>
+            {% endfor %}
+            </tbody>
+          </table>
+        </div>
+      {% else %}
+        <div class="p-3">
+          <p class="mb-0">Brak historii aktualizacji.</p>
+        </div>
+      {% endif %}
+    </div>
+  </div>
 </div>
 {% endblock %}