diff --git a/templates/base.html b/templates/base.html
index b9a1cec..20a9d90 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -4,12 +4,12 @@
   <meta charset="UTF-8" />
   <title>Backup RouterOS App</title>
   <!-- Bootstrap CSS -->
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 
   <style>
     /* Ogólne style trybu ciemnego */
     .dark-mode body {
-      background-color: #111111;
+      background-color: #121212;
       color: #ffffff;
     }
     .dark-mode a,
@@ -45,7 +45,17 @@
       color: #ddd;
       border: 1px solid #555;
     }
-    
+    html.dark-mode table.table thead th {
+      background-color: #444 !important;
+      color: #fff !important;
+      border: 1px solid #555 !important;
+    }
+
+    html.dark-mode table.table tbody td {
+      background-color: #333 !important;
+      color: #ddd !important;
+      border: 1px solid #555 !important;
+    }
     /* Pola formularzy */
     .dark-mode input,
     .dark-mode textarea,
@@ -78,7 +88,7 @@
     
     /* Stopka */
     .dark-mode footer {
-      background-color: #333 !important;
+      background-color: #1e1e1e !important;
       color: #fff !important;
     }
     
@@ -116,40 +126,90 @@
     .dark-mode .btn-close {
       filter: invert(1);
     }
+
+    /* Niestandardowy styl dla trybu jasnego – ciemniejsze, szare menu */
+    .navbar-light.bg-custom-light {
+      background-color: #dcdcdc !important; /* Gainsboro – nieco ciemniejszy szary odcień */
+    }
+
+    .dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
+      background-color: #333 !important;
+      color: #fff !important;
+      border: 1px solid #555 !important;
+    }
+
+    .dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current,
+    .dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
+      background-color: #444 !important;
+      color: #fff !important;
+    }
+
+
+    /* paginacja */
+    html.dark-mode .dataTables_wrapper .pagination .page-link {
+      background-color: #333 !important;
+      color: #fff !important;
+      border: 1px solid #555 !important;
+    }
+
+    html.dark-mode .dataTables_wrapper .pagination .page-item.active .page-link,
+    html.dark-mode .dataTables_wrapper .pagination .page-link:hover {
+      background-color: #444 !important;
+      color: #fff !important;
+    }
+
+    html.dark-mode .dataTables_wrapper .dataTables_info,
+    html.dark-mode .dataTables_wrapper .dataTables_length,
+    html.dark-mode .dataTables_wrapper .dataTables_filter {
+      color: #fff !important;
+    }
+
+    /* pola w formularzach */
+    .dark-mode input:focus,
+    .dark-mode textarea:focus,
+    dark-mode select:focus {
+      background-color: #333 !important;
+      color: #fff !important;
+      border-color: #555 !important;
+      box-shadow: none !important;
+    }
+
 </style>
 
   <!-- Blok head umożliwiający dołączenie dodatkowych stylów -->
   {% block head %}{% endblock %}
 </head>
 <body>
-  <nav class="navbar navbar-expand navbar-dark bg-dark mb-4">
+  <nav class="navbar navbar-expand {% if session.get('dark_mode', True) %}navbar-dark bg-dark{% else %}navbar-light bg-custom-light{% endif %} mb-4">
     <div class="container-fluid">
       <a href="{{ url_for('index') }}" class="navbar-brand">RouterOS Backup</a>
+      <!-- Przełącznik trybu ciemnego umieszczony przed menu -->
+      <form action="{{ url_for('toggle_dark_mode') }}" method="GET" class="d-flex align-items-center me-2">
+        <div class="form-check form-switch mb-0">
+          <input class="form-check-input" type="checkbox" id="darkModeSwitch" onchange="this.form.submit()" {% if session.get('dark_mode', True) %}checked{% endif %}>
+          <label class="form-check-label" for="darkModeSwitch">Tryb ciemny</label>
+        </div>
+      </form>
+      {% set btn_class = "btn-secondary" if session.get('dark_mode', True) else "btn-outline-dark" %}
       <div class="d-flex align-items-center">
         {% if session.user_id %}
-          <a href="{{ url_for('dashboard') }}" class="btn btn-secondary me-2">Dashboard</a>
-          <a href="{{ url_for('routers_list') }}" class="btn btn-secondary me-2">Urządzenia</a>
-          <a href="{{ url_for('diff_selector') }}" class="btn btn-secondary me-2">Diff selector</a>
-          <a href="{{ url_for('all_files') }}" class="btn btn-secondary me-2">Wszystkie pliki</a>
-          <a href="{{ url_for('logs_page') }}" class="btn btn-secondary me-2">Logi</a>
-          <a href="{{ url_for('settings_view') }}" class="btn btn-secondary me-2">Ustawienia</a>
-          <a href="{{ url_for('advanced_schedule') }}" class="btn btn-secondary me-2">Harmonogram</a>
-          <a href="{{ url_for('change_password') }}" class="btn btn-secondary me-2">Zmiana hasła</a>
-          <a href="{{ url_for('toggle_dark_mode') }}" class="btn btn-warning me-2">
-            {% if session.get('dark_mode', True) %}Jasny tryb{% else %}Ciemny tryb{% endif %}
-          </a>
-          <a href="{{ url_for('logout') }}" class="btn btn-secondary me-2">Wyloguj</a>
+          <a href="{{ url_for('dashboard') }}" class="btn {{ btn_class }} me-2">Dashboard</a>
+          <a href="{{ url_for('routers_list') }}" class="btn {{ btn_class }} me-2">Urządzenia</a>
+          <a href="{{ url_for('diff_selector') }}" class="btn {{ btn_class }} me-2">Diff selector</a>
+          <a href="{{ url_for('all_files') }}" class="btn {{ btn_class }} me-2">Wszystkie pliki</a>
+          <a href="{{ url_for('logs_page') }}" class="btn {{ btn_class }} me-2">Logi</a>
+          <a href="{{ url_for('settings_view') }}" class="btn {{ btn_class }} me-2">Ustawienia</a>
+          <a href="{{ url_for('advanced_schedule') }}" class="btn {{ btn_class }} me-2">Harmonogram</a>
+          <a href="{{ url_for('change_password') }}" class="btn {{ btn_class }} me-2">Zmiana hasła</a>
+          <a href="{{ url_for('logout') }}" class="btn {{ btn_class }} me-2">Wyloguj</a>
         {% else %}
-          <a href="{{ url_for('login') }}" class="btn btn-secondary me-2">Zaloguj</a>
-          <a href="{{ url_for('register') }}" class="btn btn-secondary me-2">Utwórz konto</a>
-          <a href="{{ url_for('toggle_dark_mode') }}" class="btn btn-warning me-2">
-            {% if session.get('dark_mode', True) %}Jasny tryb{% else %}Ciemny tryb{% endif %}
-          </a>
+          <a href="{{ url_for('login') }}" class="btn {{ btn_class }} me-2">Zaloguj</a>
+          <a href="{{ url_for('register') }}" class="btn {{ btn_class }} me-2">Utwórz konto</a>
         {% endif %}
       </div>
     </div>
   </nav>
-
+  
   <div class="container">
     {% with messages = get_flashed_messages() %}
       {% if messages %}
@@ -185,7 +245,7 @@
     </div>
   </footer>
 
-  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
   <script>
     function ajaxExport(router_id) {
       fetch("/router/" + router_id + "/export", {
diff --git a/templates/dashboard.html b/templates/dashboard.html
index 87f7fb6..ef7d9d8 100644
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% block content %}
 <div class="container my-4">
-  <h2 class="text-center mb-4">Panel administracyjny</h2>
+  <h2 class="text-center mb-4">Dashboard</h2>
   
   <!-- Wiersz akcji ogólnych -->
   <div class="row mb-4">
diff --git a/templates/diff.html b/templates/diff.html
index df774b3..71794ff 100644
--- a/templates/diff.html
+++ b/templates/diff.html
@@ -7,13 +7,13 @@
   <a href="{{ url_for('router_details', router_id=backup1.router_id) }}" class="btn btn-secondary mt-3">Powrót</a>
 </div>
 
-<!-- Dodajemy diff2html -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css" />
-<script src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html.min.js"></script>
+<!-- Ładujemy nowszą wersję diff2html -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/diff2html@3.4.4/bundles/css/diff2html.min.css" />
+<script src="https://cdn.jsdelivr.net/npm/diff2html@3.4.4/bundles/js/diff2html.min.js"></script>
 
 <script>
   document.addEventListener("DOMContentLoaded", function() {
-      // Upewnij się, że diff_text jest poprawnie escapowany
+      // Escapowany diff_text z serwera
       var diffText = `{{ diff_text|e }}`;
       var targetElement = document.getElementById("diffContainer");
       var configuration = {
@@ -23,7 +23,19 @@
       };
       var diffHtml = Diff2Html.html(diffText, configuration);
       targetElement.innerHTML = diffHtml;
+
+      // Jeśli tryb ciemny jest aktywny, dołącz dodatkowe style dla diff2html
+      if(document.documentElement.classList.contains('dark-mode')) {
+          var darkStyle = document.createElement('style');
+          darkStyle.textContent = `
+            .d2h-wrapper { background-color: #1e1e1e; color: #fff; }
+            .d2h-file-header { background-color: #2e2e2e; color: #fff; }
+            .d2h-diff-table { background-color: #1e1e1e; color: #fff; }
+            .d2h-code-line { background-color: #1e1e1e; color: #fff; }
+            .d2h-code-line-ctn { color: #fff; }
+          `;
+          document.head.appendChild(darkStyle);
+      }
   });
 </script>
 {% endblock %}
-GET | 200 | 45 ms
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index e5fe1cd..19ce3c7 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -2,7 +2,11 @@
 {% block content %}
 <div class="d-flex flex-column align-items-center justify-content-center" style="min-height: 80vh;">
   <div class="text-center">
+    {% if session.get('dark_mode', True) %}
+    <img src="https://mikrotik.com/logo/assets/logo-colors-white-E8duxH7y.svg" alt="Mikrotik Logo" class="img-fluid" style="max-width: 200px;">
+    {% else %}
     <img src="https://mikrotik.com/logo/assets/logo-colors-dark-ToiqSI6u.svg" alt="Mikrotik Logo" class="img-fluid" style="max-width: 200px;">
+    {% endif %}
     <h1 class="mt-3">Witamy w aplikacji Backup RouterOS</h1>
     <p class="lead">Zarządzaj backupami swoich urządzeń RouterOS w prosty sposób.</p>
     <div class="mt-4">
@@ -12,3 +16,4 @@
   </div>
 </div>
 {% endblock %}
+
