diff --git a/server/src/main/java/org/apache/cloudstack/dns/DnsProviderManagerImpl.java b/server/src/main/java/org/apache/cloudstack/dns/DnsProviderManagerImpl.java
index 6fb0592ba88..1366290faa5 100644
--- a/server/src/main/java/org/apache/cloudstack/dns/DnsProviderManagerImpl.java
+++ b/server/src/main/java/org/apache/cloudstack/dns/DnsProviderManagerImpl.java
@@ -310,10 +310,10 @@ public class DnsProviderManagerImpl extends ManagerBase implements DnsProviderMa
 
         boolean dbResult = Transaction.execute((TransactionCallback<Boolean>) status -> {
             DnsZoneNetworkMapVO networkMapVO = dnsZoneNetworkMapDao.findByZoneId(zoneId);
+            DnsProvider provider = getProviderByType(server.getProviderType());
+            // Remove DNS records from nic_details if there are any
             if (networkMapVO != null) {
-                // Remove DNS records from nic_details if there are any
                 try {
-                    DnsProvider provider = getProviderByType(server.getProviderType());
                     List<DnsRecord> records = provider.listRecords(server, dnsZone);
                     if (CollectionUtils.isNotEmpty(records)) {
                         List<String> dnsRecordNames = records.stream().map(DnsRecord::getName).filter(Objects::nonNull)
@@ -324,19 +324,19 @@ public class DnsProviderManagerImpl extends ManagerBase implements DnsProviderMa
                 } catch (Exception ex) {
                     logger.warn("Failed to fetch DNS records for dnsZone: {}, perform manual cleanup.", dnsZoneName, ex);
                 }
-                // Remove DNS zone from provider and cleanup DB
-                try {
-                    DnsProvider provider = getProviderByType(server.getProviderType());
-                    provider.deleteZone(server, dnsZone);
-                    logger.debug("Deleted DNS zone: {} from provider", dnsZoneName);
-                } catch (DnsNotFoundException ex) {
-                    logger.warn("DNS zone: {} is not present in the provider, proceeding with cleanup", dnsZoneName);
-                } catch (Exception ex) {
-                    logger.error("Failed to delete DNS zone from provider", ex);
-                    throw new CloudRuntimeException(String.format("Failed to delete DNS zone: %s.", dnsZoneName));
-                }
                 dnsZoneNetworkMapDao.removeNetworkMappingByZoneId(zoneId);
             }
+
+            // Remove DNS zone from provider and cleanup DB
+            try {
+                provider.deleteZone(server, dnsZone);
+                logger.debug("Deleted DNS zone: {} from provider", dnsZoneName);
+            } catch (DnsNotFoundException ex) {
+                logger.warn("DNS zone: {} is not present in the provider, proceeding with cleanup", dnsZoneName);
+            } catch (Exception ex) {
+                logger.error("Failed to delete DNS zone from provider", ex);
+                throw new CloudRuntimeException(String.format("Failed to delete DNS zone: %s.", dnsZoneName));
+            }
             return dnsZoneDao.remove(zoneId);
         });
 
diff --git a/ui/src/config/section/network.js b/ui/src/config/section/network.js
index a51783a3b4f..ebc98c4f4fb 100644
--- a/ui/src/config/section/network.js
+++ b/ui/src/config/section/network.js
@@ -1565,6 +1565,7 @@ export default {
           message: 'message.action.delete.dns.server',
           dataView: true,
           popup: true,
+          component: shallowRef(defineAsyncComponent(() => import('@/views/network/dns/DeleteDnsServer.vue'))),
           show: (record, store) => { return record.account === store.userInfo.account || isAdminOrDomainAdmin(store.userInfo.roletype) },
           groupAction: false,
           groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
@@ -1615,9 +1616,9 @@ export default {
           message: 'message.action.delete.dns.zone',
           dataView: true,
           popup: true,
-          groupAction: false,
+          component: shallowRef(defineAsyncComponent(() => import('@/views/network/dns/DeleteDnsZone.vue'))),
           show: (record, store) => { return record.account === store.userInfo.account || isAdminOrDomainAdmin(store.userInfo.roletype) },
-          groupMap: (selection) => { return selection.map(x => { return { id: x } }) }
+          groupAction: false
         }
       ]
     }
diff --git a/ui/src/views/network/dns/DeleteDnsServer.vue b/ui/src/views/network/dns/DeleteDnsServer.vue
new file mode 100644
index 00000000000..3f42c784b7f
--- /dev/null
+++ b/ui/src/views/network/dns/DeleteDnsServer.vue
@@ -0,0 +1,187 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+  <div class="form-layout" v-ctrl-enter="handleSubmit">
+    <a-spin :spinning="loading">
+      <div style="margin-bottom: 20px;">
+        <a-alert type="warning">
+          <template #message>
+            <div v-html="$t('message.action.delete.dns.server')"></div>
+          </template>
+        </a-alert>
+      </div>
+
+      <div style="margin-bottom: 20px; word-break: break-all;">
+        Please type <strong>{{ resource.name }}</strong> to confirm.
+      </div>
+
+      <div v-if="dnsZones && dnsZones.length > 0" style="margin-bottom: 20px;">
+        <a-alert type="error">
+          <template #message>
+            <div>
+              <strong>This action will impact {{ this.totalDnsZones }} DNS Zone(s):</strong>
+              <ul style="margin-top: 10px; margin-bottom: 0; padding-left: 20px;">
+                <li v-for="zone in dnsZones.slice(0, this.maxResults)" :key="zone.id">{{ zone.name }}</li>
+              </ul>
+              <div v-if="this.totalDnsZones > this.maxResults" style="margin-top: 5px; font-style: italic;">
+                ...and {{ this.totalDnsZones - this.maxResults }} more
+              </div>
+            </div>
+          </template>
+        </a-alert>
+      </div>
+
+      <a-form
+        ref="formRef"
+        :model="form"
+        :rules="rules"
+        layout="vertical">
+
+        <a-form-item name="name" ref="name">
+          <a-input
+            v-model:value="form.name"
+            :placeholder="resource.name"
+            v-focus="true" />
+        </a-form-item>
+
+        <div class="action-button">
+          <a-button @click="closeAction">
+            {{ $t('label.cancel') }}
+          </a-button>
+          <a-button
+            type="primary"
+            danger
+            :disabled="form.name !== resource.name"
+            :loading="loading"
+            @click="handleSubmit">
+            {{ $t('label.delete') }}
+          </a-button>
+        </div>
+      </a-form>
+    </a-spin>
+  </div>
+</template>
+
+<script>
+import { getAPI, postAPI } from '@/api'
+
+export default {
+  name: 'DeleteDnsServer',
+  props: {
+    resource: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      loading: false,
+      dnsZones: [],
+      form: {
+        name: ''
+      },
+      rules: {
+        name: [{ required: true, message: this.$t('message.error.required.input') }]
+      },
+      maxResults: 5,
+      totalDnsZones: 0
+    }
+  },
+  created () {
+    this.fetchDnsZones()
+  },
+  methods: {
+    async fetchDnsZones () {
+      this.loading = true
+      try {
+        const response = await getAPI('listDnsZones', { dnsserverid: this.resource.id, page: 1, pagesize: this.maxResults, filter: 'name' })
+        this.dnsZones = response?.listdnszonesresponse?.dnszone || []
+        this.totalDnsZones = response?.listdnszonesresponse?.count || 0
+      } catch (error) {
+        console.error('Failed to fetch DNS zones', error)
+      } finally {
+        this.loading = false
+      }
+    },
+    async handleSubmit () {
+      if (this.loading || this.form.name !== this.resource.name) return
+
+      this.loading = true
+
+      try {
+        const params = {
+          id: this.resource.id
+        }
+
+        const response = await postAPI('deleteDnsServer', params)
+        const jobId = response?.deletednsserverresponse?.jobid
+        if (jobId) {
+          this.$pollJob({
+            jobId: jobId,
+            title: this.$t('label.dns.delete.server'),
+            description: this.resource.name,
+            successMethod: () => {
+              this.$notification.success({
+                message: this.$t('label.dns.delete.server'),
+                description: `Successfully deleted DNS server ${this.resource.name}`
+              })
+            },
+            loadingMessage: `${this.$t('label.dns.delete.server')} ${this.$t('label.in.progress')}`,
+            catchMessage: this.$t('error.fetching.async.job.result')
+          })
+        }
+
+        if (this.$route.path !== '/dnsserver') {
+          this.$router.push({ path: '/dnsserver' })
+        } else {
+          this.$emit('refresh-data')
+        }
+        this.closeAction()
+      } catch (error) {
+        this.$notification.error({
+          message: this.$t('message.request.failed'),
+          description: error?.response?.headers['x-description'] || error.message,
+          duration: 0
+        })
+      } finally {
+        this.loading = false
+      }
+    },
+    closeAction () {
+      this.$emit('close-action')
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.form-layout {
+  width: 80vw;
+  @media (min-width: 600px) {
+    width: 450px;
+  }
+}
+
+.action-button {
+  text-align: right;
+  margin-top: 20px;
+}
+.action-button button {
+  margin-left: 8px;
+}
+</style>
diff --git a/ui/src/views/network/dns/DeleteDnsZone.vue b/ui/src/views/network/dns/DeleteDnsZone.vue
new file mode 100644
index 00000000000..641c7cc7ee5
--- /dev/null
+++ b/ui/src/views/network/dns/DeleteDnsZone.vue
@@ -0,0 +1,153 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+  <div class="form-layout" v-ctrl-enter="handleSubmit">
+    <a-spin :spinning="loading">
+      <div style="margin-bottom: 20px;">
+        <a-alert type="warning">
+          <template #message>
+            <div v-html="$t('message.action.delete.dns.zone')"></div>
+          </template>
+        </a-alert>
+      </div>
+
+      <div style="margin-bottom: 20px; word-break: break-all;">
+        Please type <strong>{{ resource.name }}</strong> to confirm.
+      </div>
+
+      <a-form
+        ref="formRef"
+        :model="form"
+        :rules="rules"
+        layout="vertical">
+
+        <a-form-item name="name" ref="name">
+          <a-input
+            v-model:value="form.name"
+            :placeholder="resource.name"
+            v-focus="true" />
+        </a-form-item>
+
+        <div class="action-button">
+          <a-button @click="closeAction">
+            {{ $t('label.cancel') }}
+          </a-button>
+          <a-button
+            type="primary"
+            danger
+            :disabled="form.name !== resource.name"
+            :loading="loading"
+            @click="handleSubmit">
+            {{ $t('label.delete') }}
+          </a-button>
+        </div>
+      </a-form>
+    </a-spin>
+  </div>
+</template>
+
+<script>
+import { postAPI } from '@/api'
+
+export default {
+  name: 'DeleteDnsZone',
+  props: {
+    resource: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      loading: false,
+      form: {
+        name: ''
+      },
+      rules: {
+        name: [{ required: true, message: this.$t('message.error.required.input') }]
+      }
+    }
+  },
+  methods: {
+    async handleSubmit () {
+      if (this.loading || this.form.name !== this.resource.name) return
+
+      this.loading = true
+
+      try {
+        const params = {
+          id: this.resource.id
+        }
+
+        const response = await postAPI('deleteDnsZone', params)
+        const jobId = response?.deletednszoneresponse?.jobid
+        const isDetailView = this.$route.path !== '/dnszone'
+        if (jobId) {
+          this.$pollJob({
+            jobId: jobId,
+            title: this.$t('label.dns.delete.zone'),
+            description: this.resource.name,
+            successMethod: () => {
+              this.$notification.success({
+                message: this.$t('label.dns.delete.zone'),
+                description: `Successfully deleted DNS zone ${this.resource.name}`
+              })
+            },
+            loadingMessage: `${this.$t('label.dns.delete.zone')} ${this.$t('label.in.progress')}`,
+            catchMessage: this.$t('error.fetching.async.job.result')
+          })
+        }
+        if (isDetailView) {
+          this.$router.push({ path: '/dnszone' })
+        } else {
+          this.$emit('refresh-data')
+        }
+        this.closeAction()
+      } catch (error) {
+        this.$notification.error({
+          message: this.$t('message.request.failed'),
+          description: error?.response?.headers['x-description'] || error.message,
+          duration: 0
+        })
+      } finally {
+        this.loading = false
+      }
+    },
+    closeAction () {
+      this.$emit('close-action')
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.form-layout {
+  width: 80vw;
+  @media (min-width: 600px) {
+    width: 450px;
+  }
+}
+
+.action-button {
+  text-align: right;
+  margin-top: 20px;
+}
+.action-button button {
+  margin-left: 8px;
+}
+</style>