diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 86d835c..9cc7719 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -25,7 +25,7 @@ export const Button: ParentComponent<
   return (
     <button
       class={twMerge(
-        'btn flex items-center',
+        'btn flex items-center leading-8',
         local.loading ? 'btn-disabled' : local.class,
       )}
       {...others}
diff --git a/src/components/Latency.tsx b/src/components/Latency.tsx
index 7f6bb90..8cd3670 100644
--- a/src/components/Latency.tsx
+++ b/src/components/Latency.tsx
@@ -19,10 +19,10 @@ export const Latency: ParentComponent<Props> = (props) => {
 
   return (
     <span
-      class={twMerge('badge whitespace-nowrap', textClassName(), local.class)}
+      class={twMerge('badge w-11 whitespace-nowrap', textClassName(), local.class)}
       {...others}
     >
-      {latency() || '-'}
+      {latency() || '---'}
     </span>
   )
 }
diff --git a/src/components/ProxyNodeCard.tsx b/src/components/ProxyNodeCard.tsx
index b9a10c8..687b60c 100644
--- a/src/components/ProxyNodeCard.tsx
+++ b/src/components/ProxyNodeCard.tsx
@@ -49,26 +49,25 @@ export const ProxyNodeCard = (props: {
         class={twMerge(
           'card bg-neutral text-neutral-content',
           isSelected &&
-            'bg-gradient-to-b from-primary to-secondary text-primary-content',
+            'bg-gradient-to-br from-primary to-secondary text-primary-content',
           onClick && 'cursor-pointer',
         )}
         title={title()}
       >
         <Tooltip.Trigger>
-          <div class="card-body space-y-1 p-2.5" onClick={onClick}>
+          <div class="card-body gap-1 space-y-1 p-2.5" onClick={onClick}>
             <h2 class="card-title line-clamp-1 break-all text-start text-sm">
               {proxyName}
             </h2>
 
-            <div class="card-actions items-center justify-between">
-              <div class="badge badge-secondary badge-sm font-bold uppercase">
+            <div class="card-actions items-center justify-between gap-1">
+              <div class="badge badge-secondary px-1 text-xs font-bold capitalize">
                 {formatProxyType(proxyNode()?.type)}
               </div>
 
               <Latency
                 proxyName={props.proxyName}
                 class={twMerge(
-                  isSelected && 'badge-primary',
                   proxyLatencyTestingMap()[proxyName] && 'animate-pulse',
                 )}
                 onClick={(e) => {
@@ -85,10 +84,10 @@ export const ProxyNodeCard = (props: {
           <Tooltip.Content class="z-50">
             <Tooltip.Arrow class="text-neutral" />
 
-            <div class="flex flex-col items-center gap-2 rounded-box bg-neutral p-2.5 text-neutral-content">
+            <div class="flex flex-col items-center gap-2 rounded-box bg-neutral bg-gradient-to-br from-primary to-secondary p-2.5 text-primary-content shadow-lg">
               <h2 class="text-lg font-bold">{proxyName}</h2>
 
-              <div class="w-full text-xs text-neutral-content">
+              <div class="w-full text-xs uppercase">
                 {specialTypes()}
               </div>
 
@@ -113,7 +112,7 @@ export const ProxyNodeCard = (props: {
                             getLatencyClassName(latencyTestResult.delay),
                           )}
                         >
-                          {latencyTestResult.delay || '-'}
+                          {latencyTestResult.delay || '---'}
                         </div>
                       </div>
 
diff --git a/src/helpers/proxies.ts b/src/helpers/proxies.ts
index 56890ee..95eb261 100644
--- a/src/helpers/proxies.ts
+++ b/src/helpers/proxies.ts
@@ -5,15 +5,15 @@ export const formatProxyType = (type = '') => {
   const t = type.toLowerCase()
 
   if (t.includes('shadowsocks')) {
-    return t.replace('shadowsocks', 'ss') // for both ss and ssr
+    return t.replace('shadowsocks', 'SS') // for both ss and ssr
   }
 
   if (t.includes('hysteria')) {
-    return t.replace('hysteria', 'hy')
+    return t.replace('hysteria', 'HY')
   }
 
   if (t === 'wireguard') {
-    return 'wg'
+    return 'WG'
   }
 
   return t
@@ -25,7 +25,7 @@ export const getLatencyClassName = (latency: LATENCY_QUALITY_MAP_HTTP) => {
   } else if (latency > latencyQualityMap().MEDIUM) {
     return 'text-warning'
   } else if (latency === LATENCY_QUALITY_MAP_HTTP.NOT_CONNECTED) {
-    return 'text-neutral-content'
+    return 'text-gray'
   } else {
     return 'text-success'
   }