diff --git a/app/(main)/ClientComponents/ServerListClient.tsx b/app/(main)/ClientComponents/ServerListClient.tsx
index 192885b..5b86b4e 100644
--- a/app/(main)/ClientComponents/ServerListClient.tsx
+++ b/app/(main)/ClientComponents/ServerListClient.tsx
@@ -7,18 +7,25 @@ import useSWR from "swr";
 
 export default function ServerListClient() {
   const { data } = useSWR<ServerApi>("/api/server", nezhaFetcher, {
-    refreshInterval: process.env.NEXT_PUBLIC_NezhaFetchInterval
-      ? Number(process.env.NEXT_PUBLIC_NezhaFetchInterval)
-      : 2000,
+    refreshInterval: Number(process.env.NEXT_PUBLIC_NezhaFetchInterval) || 2000,
   });
+
   if (!data) return null;
-  const sortedResult = data.result.sort((a, b) => a.id - b.id);
+
+  const sortedServers = data.result.sort((a, b) => {
+    if (a.display_index && b.display_index) {
+      return b.display_index - a.display_index;
+    }
+    if (a.display_index) return -1;
+    if (b.display_index) return 1;
+    return a.id - b.id;
+  });
 
   return (
-    <section className={"grid grid-cols-1 gap-2 md:grid-cols-2"}>
-      {sortedResult.map((serverInfo) => (
+    <section className="grid grid-cols-1 gap-2 md:grid-cols-2">
+      {sortedServers.map((serverInfo) => (
         <ServerCard key={serverInfo.id} serverInfo={serverInfo} />
       ))}
     </section>
   );
-}
+}
\ No newline at end of file
diff --git a/app/types/nezha-api.ts b/app/types/nezha-api.ts
index 59679c5..bc91e7f 100644
--- a/app/types/nezha-api.ts
+++ b/app/types/nezha-api.ts
@@ -16,6 +16,7 @@ export interface NezhaAPI {
   ipv4: string;
   ipv6: string;
   valid_ip: string;
+  display_index: number;
   host: NezhaAPIHost;
   status: NezhaAPIStatus;
 }
diff --git a/components/ServerCard.tsx b/components/ServerCard.tsx
index 7674dbe..30ea9a5 100644
--- a/components/ServerCard.tsx
+++ b/components/ServerCard.tsx
@@ -35,10 +35,9 @@ export default function ServerCard({
                   {getUnicodeFlagIcon(country_code)}
                 </span>
               ) : (
-                <span className="text-[12px] text-muted-foreground">🏴‍☠️</span>
+                <span className="text-[12px] text-muted-foreground">🏁</span>
               )
             ) : null}
-            <span className="h-2 w-2 shrink-0 rounded-full bg-green-500"></span>
             <p
               className={cn(
                 "break-all font-bold tracking-tight",
@@ -47,6 +46,7 @@ export default function ServerCard({
             >
               {name}
             </p>
+            <span className="h-2 w-2 shrink-0 rounded-full bg-green-500"></span>
           </section>
         </PopoverTrigger>
         <PopoverContent side="top">
@@ -94,10 +94,9 @@ export default function ServerCard({
                   {getUnicodeFlagIcon(country_code)}
                 </span>
               ) : (
-                <span className="text-[12px] text-muted-foreground">🏴‍☠️</span>
+                <span className="text-[12px] text-muted-foreground">🏁</span>
               )
             ) : null}
-            <span className="h-2 w-2 shrink-0 rounded-full bg-red-500"></span>
             <p
               className={cn(
                 "break-all font-bold tracking-tight",
@@ -106,6 +105,7 @@ export default function ServerCard({
             >
               {name}
             </p>
+            <span className="h-2 w-2 shrink-0 rounded-full bg-red-500"></span>
           </section>
         </PopoverTrigger>
         <PopoverContent className="w-fit p-2" side="top">