diff --git a/src/api/index.ts b/src/api/index.ts
index 9fe379ec..8bf575f1 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -1,6 +1,6 @@
 import { useSetup } from '@/composables/setup'
 import { activeBackend, activeUuid, removeBackend } from '@/store/setup'
-import type { Config, Proxy, ProxyProvider, Rule, RuleProvider } from '@/types'
+import type { Config, DNSQuery, Proxy, ProxyProvider, Rule, RuleProvider } from '@/types'
 import axios from 'axios'
 import ReconnectingWebSocket from 'reconnectingwebsocket'
 import { computed, nextTick, ref, watch } from 'vue'
@@ -144,6 +144,12 @@ export const restartCoreAPI = () => {
   return axios.post('/restart')
 }
 
+export const queryDNSAPI = (params: { name: string; type: string }) => {
+  return axios.get<DNSQuery>('/dns/query', {
+    params,
+  })
+}
+
 const createWebSocket = <T>(url: string, searchParams?: Record<string, string>) => {
   const backend = activeBackend.value
   const resurl = new URL(
diff --git a/src/components/common/VirtualScroller.vue b/src/components/common/VirtualScroller.vue
index 825aa7be..4b3ff1f8 100644
--- a/src/components/common/VirtualScroller.vue
+++ b/src/components/common/VirtualScroller.vue
@@ -46,7 +46,7 @@ const virutalOptions = computed(() => {
     count: props.data.length,
     getScrollElement: () => parentRef.value,
     estimateSize: () => 55,
-    overscan: 48,
+    overscan: 24,
   }
 })
 
diff --git a/src/components/proxies/LatencyTag.vue b/src/components/proxies/LatencyTag.vue
index 1e534e08..bfc9268c 100644
--- a/src/components/proxies/LatencyTag.vue
+++ b/src/components/proxies/LatencyTag.vue
@@ -1,20 +1,34 @@
 <template>
   <div class="badge flex w-8 items-center justify-center shadow-sm">
-    <div
-      :class="twMerge('text-xs', color)"
-      ref="latencyRef"
-      v-show="latency > 0"
-    />
-    <BoltIcon
-      v-show="latency === 0"
-      class="h-4 w-4"
-    />
+    <template v-if="latencyRollingEffect">
+      <div
+        :class="twMerge('text-xs', color)"
+        ref="latencyRef"
+        v-show="latency > 0"
+      />
+      <BoltIcon
+        v-show="latency === 0"
+        class="h-4 w-4"
+      />
+    </template>
+    <template v-else>
+      <div
+        :class="twMerge('text-xs', color)"
+        v-if="latency > 0"
+      >
+        {{ latency }}
+      </div>
+      <BoltIcon
+        v-else
+        class="h-4 w-4"
+      />
+    </template>
   </div>
 </template>
 
 <script setup lang="ts">
 import { getLatencyByName } from '@/store/proxies'
-import { lowLatency, mediumLatency } from '@/store/settings'
+import { latencyRollingEffect, lowLatency, mediumLatency } from '@/store/settings'
 import { BoltIcon } from '@heroicons/vue/24/outline'
 import { CountUp } from 'countup.js'
 import { twMerge } from 'tailwind-merge'
@@ -25,20 +39,23 @@ const props = defineProps<{
 }>()
 const latencyRef = ref()
 const latency = computed(() => getLatencyByName(props.name))
-let countUp: CountUp | null = null
 
-onMounted(() => {
-  countUp = new CountUp(latencyRef.value, latency.value, {
-    duration: 1,
-    separator: '',
-    enableScrollSpy: true,
-  })
-  countUp.start()
+if (latencyRollingEffect.value) {
+  let countUp: CountUp | null = null
+
+  onMounted(() => {
+    countUp = new CountUp(latencyRef.value, latency.value, {
+      duration: 1,
+      separator: '',
+      enableScrollSpy: true,
+    })
+    countUp.start()
 
-  watch(latency, () => {
-    countUp?.update(latency.value)
+    watch(latency, () => {
+      countUp?.update(latency.value)
+    })
   })
-})
+}
 
 const color = computed(() => {
   if (latency.value < lowLatency.value) {
diff --git a/src/components/proxies/ProxyNodeGrid.vue b/src/components/proxies/ProxyNodeGrid.vue
index d49867f0..4d93526b 100644
--- a/src/components/proxies/ProxyNodeGrid.vue
+++ b/src/components/proxies/ProxyNodeGrid.vue
@@ -25,3 +25,9 @@ import { twMerge } from 'tailwind-merge'
 
 const { hasTwoColumns } = useProxies()
 </script>
+
+<style scoped>
+.grid {
+  scrollbar-width: thin;
+}
+</style>
diff --git a/src/components/settings/DnsQuery.vue b/src/components/settings/DnsQuery.vue
new file mode 100644
index 00000000..b7369f11
--- /dev/null
+++ b/src/components/settings/DnsQuery.vue
@@ -0,0 +1,54 @@
+<template>
+  <form class="join w-96 max-sm:w-full">
+    <TextInput
+      v-model="form.name"
+      type="text"
+      name="name"
+      placeholder="Domain Name"
+    />
+    <select
+      v-model="form.type"
+      class="join-item select select-bordered select-sm"
+    >
+      <option value="A">A</option>
+      <option value="AAAA">AAAA</option>
+      <option value="MX">MX</option>
+    </select>
+    <button
+      class="btn join-item btn-sm"
+      type="submit"
+      @click="query"
+    >
+      {{ $t('DNSQuery') }}
+    </button>
+  </form>
+  <div class="max-h-96 overflow-y-auto">
+    <div
+      class="flex gap-1"
+      v-for="item in resultList"
+      :key="item.data"
+    >
+      <div>{{ item.name }}</div>
+      :
+      <div>{{ item.data }}</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { queryDNSAPI } from '@/api'
+import type { DNSQuery } from '@/types'
+import { reactive, ref } from 'vue'
+import TextInput from '../common/TextInput.vue'
+
+const form = reactive({
+  name: '',
+  type: 'A',
+})
+const resultList = ref<DNSQuery['Answer']>([])
+const query = async () => {
+  const { data } = await queryDNSAPI(form)
+  console.log(data)
+  resultList.value = data.Answer
+}
+</script>
diff --git a/src/i18n/en.ts b/src/i18n/en.ts
index ecd45cbc..7a1d8222 100644
--- a/src/i18n/en.ts
+++ b/src/i18n/en.ts
@@ -98,4 +98,6 @@ export default {
   secondaryPath: 'Secondary Path',
   secondaryPathTip: 'If present, start with a "/", otherwise leave it empty.',
   logRetentionLimit: 'Log Retention Limit',
+  DNSQuery: 'DNS Query',
+  latencyRollingEffect: 'Latency Rolling Effect',
 }
diff --git a/src/i18n/zh.ts b/src/i18n/zh.ts
index 1426f891..b28d317b 100644
--- a/src/i18n/zh.ts
+++ b/src/i18n/zh.ts
@@ -97,4 +97,6 @@ export default {
   secondaryPath: '二级路径',
   secondaryPathTip: '如果有的话以/开头，没有则留空不填',
   logRetentionLimit: '日志保留条数',
+  DNSQuery: 'DNS 查询',
+  latencyRollingEffect: '延迟滚动效果',
 }
diff --git a/src/store/settings.ts b/src/store/settings.ts
index 1e1cf88a..4051dd75 100644
--- a/src/store/settings.ts
+++ b/src/store/settings.ts
@@ -39,6 +39,7 @@ export const proxyPreviewType = useStorage('config/proxy-preview-type', PROXY_PR
 export const hideUnavailableProxies = useStorage('config/hide-unavailable-proxies', false)
 export const lowLatency = useStorage('config/low-latency', 300)
 export const mediumLatency = useStorage('config/medium-latency', 800)
+export const latencyRollingEffect = useStorage('config/latency-rolling-effect', false)
 
 // connections
 export const useConnectionCard = useStorage('config/use-connecticon-card', false)
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index af9f6815..e187efed 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -96,3 +96,23 @@ export type Log = {
 }
 
 export type LogWithSeq = Log & { seq: number; time: number }
+
+export type DNSQuery = {
+  AD: boolean
+  CD: boolean
+  RA: boolean
+  RD: boolean
+  TC: boolean
+  status: number
+  Question: {
+    Name: string
+    Qtype: number
+    Qclass: number
+  }[]
+  Answer?: {
+    TTL: number
+    data: string
+    name: string
+    type: number
+  }[]
+}
diff --git a/src/views/SettingsPage.vue b/src/views/SettingsPage.vue
index eebb1243..5f0587ed 100644
--- a/src/views/SettingsPage.vue
+++ b/src/views/SettingsPage.vue
@@ -112,6 +112,8 @@
         {{ $t('backend') }}
       </div>
       <div class="card-body gap-4">
+        <DnsQuery />
+        <div class="divider"></div>
         <BackendSwitch />
         <div
           class="flex items-center gap-2"
@@ -254,6 +256,14 @@
             v-model="mediumLatency"
           />
         </div>
+        <div class="flex items-center gap-2">
+          <span class="shrink-0"> {{ $t('latencyRollingEffect') }}: </span>
+          <input
+            type="checkbox"
+            class="toggle"
+            v-model="latencyRollingEffect"
+          />
+        </div>
       </div>
     </div>
 
@@ -320,6 +330,7 @@ import {
   zashboardVersion,
 } from '@/api'
 import BackendSwitch from '@/components/settings/BackendSwitch.vue'
+import DnsQuery from '@/components/settings/DnsQuery.vue'
 import LanguageSelect from '@/components/settings/LanguageSelect.vue'
 import SourceIPLabels from '@/components/settings/SourceIPLabels.vue'
 import TableSettings from '@/components/settings/TableSettings.vue'
@@ -335,6 +346,7 @@ import {
   autoUpgrade,
   compactConnectionCard,
   font,
+  latencyRollingEffect,
   logRetentionLimit,
   lowLatency,
   mediumLatency,