diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index cf33b0c..5dde325 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -110,7 +110,7 @@ export const Header = () => {
             checked={openedDrawer()}
           />
 
-          <div class="drawer-content flex items-center">
+          <div class="drawer-content flex w-6 items-center">
             <label for="navs" class="btn btn-circle drawer-button btn-sm">
               <IconMenu />
             </label>
diff --git a/src/components/IPv6Support.tsx b/src/components/IPv6Support.tsx
index 932cf6a..da315a7 100644
--- a/src/components/IPv6Support.tsx
+++ b/src/components/IPv6Support.tsx
@@ -1,7 +1,7 @@
 import { useProxies } from '~/signals'
 import { proxyIPv6SupportMap } from '~/signals/ipv6'
 
-export const IPv6Support = (props: { name?: string; class?: string }) => {
+export const IPv6Support = (props: { name?: string }) => {
   const { getNowProxyNodeName } = useProxies()
 
   const support = createMemo(() => {
@@ -10,7 +10,7 @@ export const IPv6Support = (props: { name?: string; class?: string }) => {
 
   return (
     <Show when={support()}>
-      <span class={`scale-75 ${props.class}`}>IPv6</span>
+      <span class={`text-xs`}>IPv6</span>
     </Show>
   )
 }
diff --git a/src/components/Latency.tsx b/src/components/Latency.tsx
index dd042d9..73b6902 100644
--- a/src/components/Latency.tsx
+++ b/src/components/Latency.tsx
@@ -4,10 +4,10 @@ import { latencyQualityMap, useProxies } from '~/signals'
 
 export const Latency = (props: { name?: string; class?: string }) => {
   const [t] = useI18n()
-  const { getNowProxyNodeName, latencyMap } = useProxies()
+  const { getLatencyByName } = useProxies()
   const [textClassName, setTextClassName] = createSignal('')
   const latency = createMemo(() => {
-    return latencyMap()[getNowProxyNodeName(props.name || '')]
+    return getLatencyByName(props.name || '')
   })
 
   createEffect(() => {
diff --git a/src/components/ProxyPreviewBar.tsx b/src/components/ProxyPreviewBar.tsx
index 756ad69..6f68d09 100644
--- a/src/components/ProxyPreviewBar.tsx
+++ b/src/components/ProxyPreviewBar.tsx
@@ -5,9 +5,9 @@ export const ProxyPreviewBar = (props: {
   proxyNameList: string[]
   now?: string
 }) => {
-  const { latencyMap } = useProxies()
+  const { getLatencyByName } = useProxies()
   const latencyList = createMemo(() =>
-    props.proxyNameList.map((name) => latencyMap()[name]),
+    props.proxyNameList.map((name) => getLatencyByName(name)),
   )
 
   const all = createMemo(() => latencyList().length)
diff --git a/src/components/ProxyPreviewDots.tsx b/src/components/ProxyPreviewDots.tsx
index 1bf3015..18b2bde 100644
--- a/src/components/ProxyPreviewDots.tsx
+++ b/src/components/ProxyPreviewDots.tsx
@@ -40,7 +40,7 @@ export const ProxyPreviewDots = (props: {
   proxyNameList: string[]
   now?: string
 }) => {
-  const { latencyMap } = useProxies()
+  const { getLatencyByName } = useProxies()
 
   return (
     <div class="flex items-center gap-2 py-2">
@@ -48,7 +48,7 @@ export const ProxyPreviewDots = (props: {
         <For
           each={props.proxyNameList.map((name): [string, number] => [
             name,
-            latencyMap()[name],
+            getLatencyByName(name),
           ])}
         >
           {([name, latency]) => {
diff --git a/src/constants/index.ts b/src/constants/index.ts
index e22172a..a07de63 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -80,13 +80,13 @@ export const DEFAULT_CHART_OPTIONS: ApexOptions = {
 }
 
 export enum LATENCY_QUALITY_MAP_HTTP {
-  NOT_CONNECTED = -1,
+  NOT_CONNECTED = 0,
   MEDIUM = 200,
   HIGH = 500,
 }
 
 export enum LATENCY_QUALITY_MAP_HTTPS {
-  NOT_CONNECTED = -1,
+  NOT_CONNECTED = 0,
   MEDIUM = 800,
   HIGH = 1500,
 }
diff --git a/src/helpers/proxies.ts b/src/helpers/proxies.ts
index 4077367..5ed37cd 100644
--- a/src/helpers/proxies.ts
+++ b/src/helpers/proxies.ts
@@ -1,5 +1,5 @@
 import { PROXIES_ORDERING_TYPE } from '~/constants'
-import { latencyQualityMap } from '~/signals'
+import { latencyQualityMap, useProxies } from '~/signals'
 
 export const formatProxyType = (type = '') => {
   const t = type.toLowerCase()
@@ -36,21 +36,17 @@ export const filterSpecialProxyType = (type = '') => {
 
 export const sortProxiesByOrderingType = (
   proxyNames: string[],
-  proxyLatencyMap: Record<string, number>,
   orderingType: PROXIES_ORDERING_TYPE,
-  proxyGroupNames: Set<string> | undefined,
 ) => {
+  const { getLatencyByName } = useProxies()
+
   if (orderingType === PROXIES_ORDERING_TYPE.NATURAL) {
     return proxyNames
   }
 
   return proxyNames.sort((a, b) => {
-    if (proxyGroupNames?.has(a) && !proxyGroupNames?.has(b)) return -1
-
-    if (proxyGroupNames?.has(b) && !proxyGroupNames?.has(a)) return 1
-
-    const prevLatency = proxyLatencyMap[a]
-    const nextLatency = proxyLatencyMap[b]
+    const prevLatency = getLatencyByName(a)
+    const nextLatency = getLatencyByName(b)
 
     switch (orderingType) {
       case PROXIES_ORDERING_TYPE.LATENCY_ASC:
@@ -81,14 +77,13 @@ export const sortProxiesByOrderingType = (
 
 export const filterProxiesByAvailability = (
   proxyNames: string[],
-  proxyLatencyMap: Record<string, number>,
-  excludes: Set<string>,
   enabled?: boolean,
-) =>
-  enabled
-    ? proxyNames.filter((name) =>
-        excludes?.has(name)
-          ? true
-          : proxyLatencyMap[name] !== latencyQualityMap().NOT_CONNECTED,
+) => {
+  const { getLatencyByName } = useProxies()
+
+  return enabled
+    ? proxyNames.filter(
+        (name) => getLatencyByName(name) !== latencyQualityMap().NOT_CONNECTED,
       )
     : proxyNames
+}
diff --git a/src/pages/Connections.tsx b/src/pages/Connections.tsx
index 653b332..0124bc1 100644
--- a/src/pages/Connections.tsx
+++ b/src/pages/Connections.tsx
@@ -358,13 +358,13 @@ export default () => {
     <div class="flex h-full flex-col gap-2">
       <div class="flex w-full flex-wrap items-center gap-2">
         <div class="flex items-center gap-2">
-          <div class="tabs-boxed tabs gap-2">
+          <div class="tabs-boxed tabs gap-2 pl-0">
             <Index each={tabs()}>
               {(tab) => (
                 <button
                   class={twMerge(
                     activeTab() === tab().type && 'tab-active',
-                    'tab-sm sm:tab-md tab gap-2',
+                    'tab-sm sm:tab-md tab gap-2 px-2',
                   )}
                   onClick={() => setActiveTab(tab().type)}
                 >
@@ -386,7 +386,7 @@ export default () => {
           </div>
 
           <select
-            class="select select-bordered select-primary select-sm w-full max-w-full flex-1 sm:select-md"
+            class="select select-bordered select-primary select-sm w-full max-w-full flex-1"
             onChange={(e) => setSourceIPFilter(e.target.value)}
           >
             <option value="">{t('all')}</option>
@@ -410,19 +410,19 @@ export default () => {
         <div class="join flex flex-1 items-center md:flex-1">
           <input
             type="search"
-            class="input input-sm join-item input-primary min-w-0 flex-1 sm:input-md"
+            class="input input-sm join-item input-primary min-w-0 flex-1"
             placeholder={t('search')}
             onInput={(e) => setGlobalFilter(e.target.value)}
           />
 
           <Button
-            class="join-item btn-sm sm:btn-md"
+            class="btn btn-primary join-item btn-sm"
             onClick={() => setPaused((paused) => !paused)}
             icon={paused() ? <IconPlayerPlay /> : <IconPlayerPause />}
           />
 
           <Button
-            class="join-item btn-sm sm:btn-md"
+            class="btn btn-primary join-item btn-sm"
             onClick={() => {
               if (table.getState().globalFilter) {
                 table
@@ -438,7 +438,7 @@ export default () => {
           />
 
           <Button
-            class="btn join-item btn-sm sm:btn-md"
+            class="btn btn-primary join-item btn-sm"
             onClick={() => connectionsSettingsModalRef?.showModal()}
             icon={<IconSettings />}
           />
diff --git a/src/pages/Logs.tsx b/src/pages/Logs.tsx
index 523a66a..6b42fee 100644
--- a/src/pages/Logs.tsx
+++ b/src/pages/Logs.tsx
@@ -124,18 +124,18 @@ export default () => {
       <div class="join w-full">
         <input
           type="search"
-          class="input input-sm join-item input-primary flex-1 flex-shrink-0 sm:input-md"
+          class="input input-sm join-item input-primary flex-1 flex-shrink-0"
           placeholder={t('search')}
           onInput={(e) => setGlobalFilter(e.target.value)}
         />
 
         <Button
-          class="join-item btn-sm sm:btn-md"
+          class="btn-primary join-item btn-sm"
           onClick={() => setPaused((paused) => !paused)}
           icon={paused() ? <IconPlayerPlay /> : <IconPlayerPause />}
         />
         <Button
-          class="join-item btn-sm sm:btn-md"
+          class="btn-primary join-item btn-sm"
           onClick={() => logsSettingsModalRef?.showModal()}
           icon={<IconSettings />}
         />
diff --git a/src/pages/Proxies.tsx b/src/pages/Proxies.tsx
index f2c1a81..e86f3b6 100644
--- a/src/pages/Proxies.tsx
+++ b/src/pages/Proxies.tsx
@@ -49,8 +49,6 @@ export default () => {
     fetchProxies,
     proxies,
     selectProxyInGroup,
-    latencyMap,
-    proxyGroupNames,
     proxyProviders,
     updateProviderByProviderName,
     updateAllProvider,
@@ -120,7 +118,7 @@ export default () => {
   return (
     <div class="flex h-full flex-col gap-2">
       <div class="flex items-center gap-2">
-        <div class="tabs-boxed tabs gap-2">
+        <div class="tabs-boxed tabs gap-2 pl-0">
           <For each={tabs()}>
             {(tab) => (
               <button
@@ -154,7 +152,7 @@ export default () => {
 
         <div class="ml-auto">
           <Button
-            class="btn-circle btn-sm sm:btn-md"
+            class="btn-circle btn-primary btn-sm"
             onClick={() => proxiesSettingsModalRef?.showModal()}
             icon={<IconSettings />}
           />
@@ -175,12 +173,8 @@ export default () => {
                   filterProxiesByAvailability(
                     sortProxiesByOrderingType(
                       proxyGroup.all ?? [],
-                      latencyMap(),
                       proxiesOrderingType(),
-                      proxyGroupNames(),
                     ),
-                    latencyMap(),
-                    proxyGroupNames(),
                     hideUnAvailableProxies(),
                   ),
                 )
@@ -266,9 +260,7 @@ export default () => {
                 const sortedProxyNames = createMemo(() =>
                   sortProxiesByOrderingType(
                     proxyProvider.proxies.map((i) => i.name) ?? [],
-                    latencyMap(),
                     proxiesOrderingType(),
-                    undefined,
                   ),
                 )
 
diff --git a/src/pages/Rules.tsx b/src/pages/Rules.tsx
index c2d837f..c63cab3 100644
--- a/src/pages/Rules.tsx
+++ b/src/pages/Rules.tsx
@@ -126,7 +126,7 @@ export default () => {
   return (
     <div class="flex h-full flex-col gap-2">
       <div class="flex items-center gap-2">
-        <div class="tabs-boxed tabs gap-2">
+        <div class="tabs-boxed tabs gap-2 pl-0">
           <For each={tabs()}>
             {(tab) => (
               <button
@@ -160,7 +160,7 @@ export default () => {
       </div>
 
       <input
-        class="input input-bordered input-primary"
+        class="input input-sm input-bordered input-primary"
         placeholder={t('search')}
         value={globalFilter()}
         onInput={(e) => setGlobalFilter(e.currentTarget.value)}
diff --git a/src/signals/logs.ts b/src/signals/logs.ts
index da5b07a..0b7776e 100644
--- a/src/signals/logs.ts
+++ b/src/signals/logs.ts
@@ -19,7 +19,7 @@ createEffect(() => {
   seq++
 })
 
-export function useLogs() {
+export const useLogs = () => {
   return {
     logs,
     paused,
diff --git a/src/signals/proxies.ts b/src/signals/proxies.ts
index 5eac5ab..295f922 100644
--- a/src/signals/proxies.ts
+++ b/src/signals/proxies.ts
@@ -56,13 +56,11 @@ const [isAllProviderUpdating, setIsAllProviderUpdating] = createSignal(false)
 
 // these signals should be global state
 const [proxies, setProxies] = createSignal<ProxyWithProvider[]>([])
-const [proxyGroupNames, setProxyGroupNames] = createSignal<Set<string>>(
-  new Set(),
-)
 const [proxyProviders, setProxyProviders] = createSignal<
   (ProxyProvider & { proxies: ProxyNodeWithProvider[] })[]
 >([])
 
+// DO NOT use latency from latency map directly use getLatencyByName instead
 const [latencyMap, setLatencyMap] = createSignal<Record<string, number>>({})
 const [proxyNodeMap, setProxyNodeMap] = createSignal<Record<string, ProxyInfo>>(
   {},
@@ -152,9 +150,6 @@ export const useProxies = () => {
 
     batch(() => {
       setProxies(sortedProxies)
-      setProxyGroupNames(
-        new Set(['DIRECT', 'REJECT', ...sortedProxies.map((p) => p.name)]),
-      )
       setProxyProviders(sortedProviders)
       setProxiesInfo(allProxies)
     })
@@ -185,10 +180,12 @@ export const useProxies = () => {
   }
 
   const proxyLatencyTest = async (proxyName: string, provider: string) => {
-    setProxyLatencyTestingMap(proxyName, async () => {
-      await proxyIPv6SupportTest(proxyName, provider)
+    const nodeName = getNowProxyNodeName(proxyName)
+
+    setProxyLatencyTestingMap(nodeName, async () => {
+      await proxyIPv6SupportTest(nodeName, provider)
       const { delay } = await proxyLatencyTestAPI(
-        proxyName,
+        nodeName,
         provider,
         urlForLatencyTest(),
         latencyTestTimeoutDuration(),
@@ -196,7 +193,7 @@ export const useProxies = () => {
 
       setLatencyMap((latencyMap) => ({
         ...latencyMap,
-        [proxyName]: delay,
+        [nodeName]: delay,
       }))
     })
   }
@@ -257,6 +254,10 @@ export const useProxies = () => {
     return node.name
   }
 
+  const getLatencyByName = (name: string) => {
+    return latencyMap()[getNowProxyNodeName(name)]
+  }
+
   return {
     proxyLatencyTestingMap,
     proxyGroupLatencyTestingMap,
@@ -264,7 +265,6 @@ export const useProxies = () => {
     updatingMap,
     isAllProviderUpdating,
     proxies,
-    proxyGroupNames,
     proxyProviders,
     proxyLatencyTest,
     proxyGroupLatencyTest,
@@ -276,5 +276,6 @@ export const useProxies = () => {
     updateAllProvider,
     proxyProviderLatencyTest,
     getNowProxyNodeName,
+    getLatencyByName,
   }
 }