diff --git a/src/components/frontend/roster/RosterView.tsx b/src/components/frontend/roster/RosterView.tsx
index 2b8a70e..935cea2 100644
--- a/src/components/frontend/roster/RosterView.tsx
+++ b/src/components/frontend/roster/RosterView.tsx
@@ -214,11 +214,12 @@ function UnitBox({
       </div>
 
       {leader && (
-        <div className="mb-2">
+        <div>
           <span className="text-[10px] uppercase tracking-wider text-muted-foreground flex items-center gap-1 mb-1">
             <CrownIcon className="size-3" /> Commanding
           </span>
           <MemberCard member={leader} />
+          <hr className="my-2 w-1/3 mx-auto"/>
         </div>
       )}
 
@@ -304,8 +305,21 @@ function ByRankView({ members }: { members: RosterMember[] }) {
     list.push(m);
     grouped.set(m.rank.name, list);
   }
+  for (const list of grouped.values()) list.sort(rosterMemberOrder);
 
-  const sorted = [...grouped.entries()].sort(([a], [b]) => a.localeCompare(b));
+  // `_order` is Payload's orderable fractional index: descending string
+  // compare = highest rank first (same convention as `rosterMemberOrder`).
+  // Ranks without `_order` sink to the bottom.
+  const sorted = [...grouped.entries()].sort(([, groupA], [, groupB]) => {
+    const aOrder = groupA[0].rank._order ?? null;
+    const bOrder = groupB[0].rank._order ?? null;
+    if (aOrder !== null && bOrder !== null && aOrder !== bOrder) {
+      return bOrder.localeCompare(aOrder);
+    }
+    if (aOrder === null && bOrder !== null) return 1;
+    if (aOrder !== null && bOrder === null) return -1;
+    return groupA[0].rank.name.localeCompare(groupB[0].rank.name);
+  });
 
   return (
     <div className="flex flex-col gap-4">