diff --git a/apps/nextjs/src/app/(app)/account/delegates/DelegatesList.tsx b/apps/nextjs/src/app/(app)/account/delegates/DelegatesList.tsx
index 0a48d0cd..cc6c9783 100644
--- a/apps/nextjs/src/app/(app)/account/delegates/DelegatesList.tsx
+++ b/apps/nextjs/src/app/(app)/account/delegates/DelegatesList.tsx
@@ -1,7 +1,9 @@
 "use client";
-import { api } from "@/trpc/react";
+
 import type { RouterOutputs } from "@realms-world/api";
 import { use } from "react";
+import { api } from "@/trpc/react";
+
 import { DelegateCard } from "./DelegateCard";
 
 export const DelegatesList = ({
@@ -18,17 +20,20 @@ export const DelegatesList = ({
     },
   );
 
+  const shuffledDelegates = delegatesInfo.items
+    .filter(
+      (delegate) =>
+        delegate.user !==
+        "0x0000000000000000000000000000000000000000000000000000000000000000",
+    )
+    .sort(() => Math.random() - 0.5)
+    .sort((a, b) => (a.delegatedVotesRaw === "0" ? 1 : -1));
+
   return (
     <div className="my-4 grid grid-cols-1 gap-4 overflow-x-hidden md:grid-cols-3">
-      {delegatesInfo.items
-        .filter(
-          (delegate) =>
-            delegate.user !==
-            "0x0000000000000000000000000000000000000000000000000000000000000000",
-        )
-        .map((delegate) => (
-          <DelegateCard key={delegate.id} delegate={delegate} />
-        ))}
+      {shuffledDelegates.map((delegate) => (
+        <DelegateCard key={delegate.id} delegate={delegate} />
+      ))}
     </div>
   );
 };