diff --git a/templates/new_edit_regex_host.html b/templates/new_edit_regex_host.html
index 7ca3cf3..f7b9438 100644
--- a/templates/new_edit_regex_host.html
+++ b/templates/new_edit_regex_host.html
@@ -7,6 +7,25 @@
       max-width: 300px;
       text-align: left;
     }
+
+    /* Tryb jasny */
+    .regex-container, .example-container {
+      background-color: var(--bg-light);
+      color: var(--text-dark);
+    }
+
+    /* Tryb ciemny */
+    @media (prefers-color-scheme: dark) {
+      .regex-container, .example-container {
+        background-color: var(--bg-dark);
+        color: var(--text-light);
+        border-color: var(--border-color);
+      }
+    }
+
+  .icon-green {
+    color: #28a745;
+  }
   </style>
 {% endblock %}
 {% block content %}
@@ -45,12 +64,91 @@
       <div class="mb-3">
         <label for="comment" class="form-label">Komentarz</label>
         <input type="text" class="form-control" id="comment" name="comment" value="{% if entry %}{{ entry.comment }}{% endif %}">
+        <hr>
+        <div class="mb-3">
+          <label class="form-label"><i class="fas fa-code"></i> Podgląd generowanego Regex</label>
+          <div class="regex-container p-3 border rounded">
+            <code id="regexPreview"></code>
+          </div>
+        
+          <label class="form-label mt-2"><i class="fas fa-terminal"></i> Przykładowe wygenerowane wpisy</label>
+          <div class="example-container p-3 border rounded">
+            <ul id="exampleEntries" class="list-unstyled mb-0"></ul>
+          </div>
+        </div>
+        
       </div>
       <button type="submit" class="btn btn-primary">{% if entry %}Zapisz zmiany{% else %}Utwórz{% endif %}</button>
     </form>
+  
   </div>
 </div>
 <div class="mt-3 text-center">
   <a href="{{ url_for('list_regex_hosts') }}" class="btn btn-secondary">Lista Regex Hosts</a>
 </div>
 {% endblock %}
+{% block extra_js %}
+{{ super() }}
+<script>
+document.addEventListener("DOMContentLoaded", function() {
+    function updateRegexPreview() {
+        let cidr = document.getElementById("cidr_range").value.trim();
+        let gatewayIp = document.getElementById("gateway_ip").value.trim();
+        let gatewayHostname = document.getElementById("gateway_hostname").value.trim();
+        let domain = document.getElementById("domain_suffix").value.trim();
+        let prefix = document.getElementById("host_prefix").value.trim();
+        let useGateway = document.getElementById("use_gateway_ip").checked;
+
+        let regexPreview = `<strong>Regex:</strong> <span class="icon-green">^${prefix}[0-9]+\\.${domain}$</span>`;
+        document.getElementById("regexPreview").innerHTML = regexPreview;
+
+        // Generowanie przykładowych wpisów
+        let exampleList = document.getElementById("exampleEntries");
+        exampleList.innerHTML = ""; // Wyczyść stare wpisy
+
+        let exampleIps = generateExampleIps(cidr, 3); // Pobierz 3 pierwsze IP
+        exampleIps.forEach((ip, index) => {
+            let listItem = document.createElement("li");
+            listItem.innerHTML = `<i class="fas fa-check-circle icon-green"></i> ${ip} ${prefix}${index + 1}.${domain}`;
+            exampleList.appendChild(listItem);
+        });
+
+        // Dodaj wpis dla bramy (jeśli zaznaczona)
+        if (useGateway && gatewayIp && gatewayHostname) {
+            let listItem = document.createElement("li");
+            listItem.innerHTML = `<i class="fas fa-network-wired icon-green"></i> ${gatewayIp} ${gatewayHostname}.${domain}`;
+            exampleList.prepend(listItem);
+        }
+    }
+
+    function generateExampleIps(cidr, count) {
+        let ipList = [];
+        if (!cidr.includes('/')) return ipList;
+
+        let [baseIp, subnet] = cidr.split('/');
+        let baseParts = baseIp.split('.').map(Number);
+
+        // Generujemy kolejne adresy IP w zakresie
+        for (let i = 1; i <= count; i++) {
+            let newIp = [...baseParts];
+            newIp[3] += i;  // Zwiększamy ostatni oktet
+            ipList.push(newIp.join('.'));
+        }
+        return ipList;
+    }
+
+    // Nasłuchiwanie zmian w polach
+    document.getElementById("cidr_range").addEventListener("input", updateRegexPreview);
+    document.getElementById("gateway_ip").addEventListener("input", updateRegexPreview);
+    document.getElementById("gateway_hostname").addEventListener("input", updateRegexPreview);
+    document.getElementById("domain_suffix").addEventListener("input", updateRegexPreview);
+    document.getElementById("host_prefix").addEventListener("input", updateRegexPreview);
+    document.getElementById("use_gateway_ip").addEventListener("change", updateRegexPreview);
+
+    // Inicjalne wygenerowanie regexu
+    updateRegexPreview();
+});
+</script>
+{% endblock %}
+
+