diff --git a/frontend/index.html b/frontend/index.html
index b5efa39..eeb22ca 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -29,6 +29,13 @@
                         <tbody id="upstream-dns-servers-table-body"></tbody>
                     </table>
                 </div>
+                <div class="card-footer">
+                    <button 
+                        class="btn btn-primary" 
+                        style="width: 100%"
+                        id="add_dns_server_button"
+                        >Add</button>
+                </div>
             </div>
             <div class="card">
                 <div class="card-header"><h3 class="card-title">Local Domains</h3></div>
@@ -39,6 +46,13 @@
                         </tbody>
                     </table>
                 </div>
+                <div class="card-footer">
+                    <button 
+                        class="btn btn-primary" 
+                        style="width: 100%"
+                        id="add_local_domain_button"
+                        >Add</button>
+                </div>
             </div>
             <div class="card">
                 <div class="card-header d-flex align-items-center gap-3 justify-content-between">
@@ -54,7 +68,7 @@
                     </div>
                 </div>
             </div>
-            <div class="card" style="margin-bottom: 50px;">
+            <div class="card">
                 <div class="card-header d-flex align-items-center gap3 justify-content-between">
                     <h3>Cache size</h3>
                 </div>
@@ -62,6 +76,17 @@
                     <input type="number" name="" id="cache-size-input" class="form-control">
                 </div>
             </div>
+            <div class="card" style="margin-bottom: 50px;">
+                <div class="card-header d-flex align-items-center gap3 justify-content-between">
+                    <h3>Edit config file</h3>
+                </div>
+                <div class="card-body">
+                    <textarea id="edit_file_input" style="width: 100%;height: 200px;"></textarea>
+                </div>
+                <div class="card-footer">
+                    <button class="btn btn-primary" id="save_config_file_button" style="width: 100%">Save config file</button>
+                </div>
+            </div>
         </section>
         <button class="btn btn-primary" id="save-settings-button">Save</button>
         <script src="js/checkbox.js"></script>
diff --git a/frontend/js/settings/settings.js b/frontend/js/settings/settings.js
index 1f9e3f6..501505f 100644
--- a/frontend/js/settings/settings.js
+++ b/frontend/js/settings/settings.js
@@ -2,27 +2,35 @@ const upstream_dns_servers_table_body = document.querySelector('#upstream-dns-se
 const local_domains_table_body = document.querySelector('#local-domains-table-body')
 const cache_size_input = document.querySelector('#cache-size-input')
 const save_settings_button = document.querySelector('#save-settings-button')
+const add_dns_server_button = document.querySelector('#add_dns_server_button')
+const add_local_domain_button = document.querySelector('#add_local_domain_button')
+const edit_file_input = document.querySelector('#edit_file_input')
+const save_config_file_button = document.querySelector('#save_config_file_button')
 
 var settings = {}
+var configFile = ""
 
-const updateInterface = () => {
+const updateDnsServersTable = () => {
     upstream_dns_servers_table_body.innerHTML = ""
-    local_domains_table_body.innerHTML = ""
     for (var i = 0; i < settings.resolv.length; i++) {
         upstream_dns_servers_table_body.innerHTML += `<tr>
                             <th class="d-flex align-items-center justify-content-between">
                                 ${settings.resolv[i]}
-                                <button class="delete-table-button btn btn-danger">Del</button>
+                                <button id="${i}" class="delete-table-button btn btn-danger">Del</button>
                             </th>
                         </tr>`
     }
+}
+
+const updateLocalDomainsTable = () => {
+    local_domains_table_body.innerHTML = ""
     for (const [key, value] of Object.entries(settings.hosts)) {
         if (Array.isArray(value)) {
             for (var i = 0; i < value.length; i++) {
                 local_domains_table_body.innerHTML += `<tr>
                                 <th>${key}</th>
                                 <th>${value[i]}</th>
-                                <th><button class="deldomain btn btn-danger" id="${value[i]}">Del</button>
+                                <th><button class="deldomain btn btn-danger" id="${key}|${value[i]}">Del</button>
                                 </th>
                             </tr>`
             }
@@ -30,11 +38,16 @@ const updateInterface = () => {
             local_domains_table_body.innerHTML += `<tr>
                                     <th>${key}</th>
                                     <th>${value}</th>
-                                    <th><button class="deldomain btn btn-danger" id="${value}">Del</button>
+                                    <th><button class="deldomain btn btn-danger" id="${key}|${value}">Del</button>
                                     </th>
                                 </tr>`
         }
     }
+}
+
+const updateInterface = () => {
+    updateDnsServersTable()
+    updateLocalDomainsTable()
     cache_size_input.value = settings.cache_size
 }
 
@@ -74,4 +87,97 @@ cache_size_input.addEventListener('input', (e) => {
     write_cache_size(e.target.value)
 })
 
-getSettings()
\ No newline at end of file
+getSettings()
+
+add_dns_server_button.addEventListener('click', () => {
+    const dns_server = prompt("Input your DNS server:")
+    if (dns_server === null) return
+    if (confirm("Confirm DNS settings? (add DNS server)")) {
+        if (Array.isArray(settings.resolv)) {
+            if (!settings.resolv.includes(dns_server)) {
+                settings.resolv.push(dns_server)
+                updateDnsServersTable()
+            }
+        }
+    }
+})
+
+upstream_dns_servers_table_body.addEventListener('click', (e) => {
+    if (e.target.classList.contains("delete-table-button")) {
+        if (confirm(`Confirm DNS settings? (delete DNS server: ${e.target.id})`)) {
+            if (Array.isArray(settings.resolv)) {
+                settings.resolv.splice(e.target.id, 1)
+                updateDnsServersTable()
+            }
+        }
+    }
+})
+
+add_local_domain_button.addEventListener('click', () => {
+    const domainip = prompt('Input localdomain IP:')
+    if (domainip === null) return
+    const domain = prompt('Input domain:')
+    if (domainip === null || domain === null) return
+    if (confirm(`Confirm DNS settings? (Add Local Domain: ${domainip} ${domain})`)) {
+        for (const [key, value] of Object.entries(settings.hosts)) {
+            if (key === domainip) {
+                if (Array.isArray(value)) {
+                    if (!value.includes(domain)) {
+                        value.push(domain)
+                        updateLocalDomainsTable()
+                        return
+                    }
+                    return
+                }
+                const domainsarray = [value, domain]
+                settings.hosts[key] = domainsarray
+                updateLocalDomainsTable()
+                return
+            }
+        }
+        settings.hosts[domainip] = domain
+        updateLocalDomainsTable()
+    }
+})
+
+local_domains_table_body.addEventListener('click', (e) => {
+    if (e.target.classList.contains('deldomain')) {
+        if (confirm(`Confirm DNS settings? (delete domain: ${e.target.id})`)) {
+            const domainip = e.target.id.split("|")[0]
+            const domain = e.target.id.split("|")[1]
+            for (const [key, value] of Object.entries(settings.hosts)) {
+                if (key === domainip) {
+                    if (Array.isArray(value)) {
+                        if (value.includes(domain)) {
+                            value.splice(value.indexOf(domain), 1)
+                            updateLocalDomainsTable()
+                            return
+                        }
+                        return
+                    }
+                    delete settings.hosts[key]
+                    updateLocalDomainsTable()
+                    return
+                }
+            }
+        }
+    }
+})
+
+const getConfigFile = () => {
+    fetch(window.location.origin + "/api/settings/file")
+    .then(data => data.text())
+    .then(textdata => edit_file_input.value = textdata)
+}
+
+getConfigFile()
+
+save_config_file_button.addEventListener('click', () => {
+    if (confirm("Save Config file?")) {
+        fetch(window.location.origin + "/api/settings/file", {
+            method: 'POST',
+            body: edit_file_input.value
+        }).then(data => data.text())
+        .then(textdata => edit_file_input.value = textdata)
+    }
+})
\ No newline at end of file