website refactor

apps/website/components/leaderboards/RankBadge.tsx

@@ -1,5 +1,6 @@
 import { Badge } from '@/ui/Badge';
 import { Text } from '@/ui/Text';
+import { Group } from '@/ui/Group';
 import React from 'react';
 
 interface RankBadgeProps {
@@ -28,10 +29,10 @@ export function RankBadge({ rank, size = 'md' }: RankBadgeProps) {
 
   return (
     <Badge variant={getVariant(rank)} size={size}>
-      <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
-        {medal && <span>{medal}</span>}
+      <Group gap={1}>
+        {medal && <Text size="xs">{medal}</Text>}
         <Text size="xs" weight="bold">#{rank}</Text>
-      </div>
+      </Group>
     </Badge>
   );
 }