diff --git a/templates/config_dashboard.html b/templates/config_dashboard.html
index fe20854..105f87e 100644
--- a/templates/config_dashboard.html
+++ b/templates/config_dashboard.html
@@ -14,27 +14,15 @@
             DNS Manager
         </div>
         <div class="card-body">
-            <form action="{{ url_for('dns.add_dns') }}" method="post">
-                <div class="input-group mb-3">
-                    <input type="text" class="form-control" name="dns_entry" placeholder="Enter DNS entry">
-                    <div class="input-group-append">
-                        <button class="btn btn-primary" type="submit">Add</button>
-                    </div>
+            <div class="input-group mb-3">
+                <input type="text" class="form-control" id="dns-entry-input" placeholder="Enter DNS entry">
+                <div class="input-group-append">
+                    <button class="btn btn-primary" id="add-dns-btn">Add</button>
                 </div>
-            </form>
+            </div>
         </div>
-        <ul class="list-group list-group-flush">
-            {% for entry in dns_list %}
-                <li class="list-group-item d-flex justify-content-between align-items-center">
-                    {{ entry }}
-                    <form action="{{ url_for('dns.remove_dns') }}" method="post" style="display: inline;">
-                        <input type="hidden" name="dns_entry" value="{{ entry }}">
-                        <button type="submit" class="btn btn-danger btn-sm">Remove</button>
-                    </form>
-                </li>
-            {% else %}
-                <li class="list-group-item">No DNS entries found.</li>
-            {% endfor %}
+        <ul class="list-group list-group-flush" id="dns-list">
+            <!-- DNS entries will be loaded here -->
         </ul>
     </div>
 </div>
@@ -73,4 +61,68 @@ document.getElementById('check-expiring-accounts-btn').addEventListener('click',
     });
 });
 </script>
+{% endblock %}
+{% block scripts %}
+{{ super() }}
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const dnsList = document.getElementById('dns-list');
+        const addDnsBtn = document.getElementById('add-dns-btn');
+        const dnsEntryInput = document.getElementById('dns-entry-input');
+
+        function fetchDnsList() {
+            fetch('/dns')
+                .then(response => response.json())
+                .then(data => {
+                    dnsList.innerHTML = '';
+                    if (data.length === 0) {
+                        dnsList.innerHTML = '<li class="list-group-item">No DNS entries found.</li>';
+                    } else {
+                        data.forEach(entry => {
+                            const li = document.createElement('li');
+                            li.className = 'list-group-item d-flex justify-content-between align-items-center';
+                            li.textContent = entry;
+                            const removeBtn = document.createElement('button');
+                            removeBtn.className = 'btn btn-danger btn-sm';
+                            removeBtn.textContent = 'Remove';
+                            removeBtn.addEventListener('click', () => removeDnsEntry(entry));
+                            li.appendChild(removeBtn);
+                            dnsList.appendChild(li);
+                        });
+                    }
+                });
+        }
+
+        function addDnsEntry() {
+            const dnsEntry = dnsEntryInput.value.trim();
+            if (dnsEntry) {
+                fetch('/dns', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({ dns_entry: dnsEntry })
+                }).then(() => {
+                    dnsEntryInput.value = '';
+                    fetchDnsList();
+                });
+            }
+        }
+
+        function removeDnsEntry(dnsEntry) {
+            fetch('/dns', {
+                method: 'DELETE',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ dns_entry: dnsEntry })
+            }).then(() => {
+                fetchDnsList();
+            });
+        }
+
+        addDnsBtn.addEventListener('click', addDnsEntry);
+        fetchDnsList();
+    });
+</script>
 {% endblock %}
\ No newline at end of file