diff --git a/packages/website-ue/src/components/AvatarCard/index.tsx b/packages/website-ue/src/components/AvatarCard/index.tsx
index 26b6d52a9..a02503b3a 100644
--- a/packages/website-ue/src/components/AvatarCard/index.tsx
+++ b/packages/website-ue/src/components/AvatarCard/index.tsx
@@ -77,7 +77,7 @@ function Details({ avatars }: DetailsProps) {
           <div
             className={styles.image}
             style={{
-              backgroundImage: `url(/api/avatars/${avatar.name}.webp)`,
+              backgroundImage: `url(/media/avatars/${avatar.id}.webp)`,
             }}
           />
           <Badge
@@ -102,7 +102,7 @@ function Details({ avatars }: DetailsProps) {
 
           <Link
             underline="never"
-            href={`/api/avatars/${avatar.name}.webp`}
+            href={`/media/avatars/${avatar.id}.webp`}
             download
           >
             <Button>
@@ -128,7 +128,7 @@ function Series(props: PropsWithSkeleton<SeriesProps>) {
       {!props.skeleton &&
         props.avatars.slice(-MAX_CARDS).map((avatar, index) => (
           <div
-            key={avatar.name}
+            key={avatar.id}
             className={styles.entry}
             style={{
               filter: `brightness(${(index + 1) / count})`,
@@ -136,7 +136,7 @@ function Series(props: PropsWithSkeleton<SeriesProps>) {
               left: `calc(${index} * ${CARD_TRIM})`,
               width: `calc(100% - ${CARD_TRIM} * ${count - 1})`,
               height: `calc(100% - ${CARD_TRIM} * ${count - 1})`,
-              backgroundImage: `url(/api/avatars/${avatar.name}.webp)`,
+              backgroundImage: `url(/media/avatars/${avatar.id}.webp)`,
             }}
           />
         ))}
diff --git a/packages/website-ue/src/components/AvatarsList/index.tsx b/packages/website-ue/src/components/AvatarsList/index.tsx
index 1265f27ff..a669cb89f 100644
--- a/packages/website-ue/src/components/AvatarsList/index.tsx
+++ b/packages/website-ue/src/components/AvatarsList/index.tsx
@@ -1,10 +1,10 @@
+import type { Avatar } from "@protos/avatar";
 import fuzzysort from "fuzzysort";
 import { useMemo } from "react";
 import { api } from "../../api/dynamic";
 import { useAwait } from "../../hooks/useAwait";
 import { useGameStrings } from "../../hooks/useGameStrings";
 import { useLocale } from "../../hooks/useLocale";
-import type { Avatar } from "../../protos/avatar";
 import { Avatars } from "../../stores/avatars";
 import { AvatarCard } from "../AvatarCard";
 import { IncrementalLoader } from "../IncrementalLoader";
@@ -12,7 +12,7 @@ import "./index.css";
 
 const { go } = fuzzysort;
 
-const indexingPattern = /.+_(\d+)$/;
+const indexingPattern = /ProfileAvatarEntity\..+_(\d+)$/;
 
 export function AvatarsList() {
   const locale = useLocale();
@@ -38,6 +38,7 @@ export function AvatarsList() {
   }, []);
   const ordered = useMemo(() => {
     const array = Array.from(groups.entries());
+
     return array
       .sort((a, b) => a[0].localeCompare(b[0], locale))
       .map(([name, avatars]) => ({
@@ -49,8 +50,8 @@ export function AvatarsList() {
           let diff = gradeA - gradeB;
 
           if (diff === 0) {
-            const matchesA = a.name.match(indexingPattern);
-            const matchesB = b.name.match(indexingPattern);
+            const matchesA = a.id.match(indexingPattern);
+            const matchesB = b.id.match(indexingPattern);
 
             if (matchesA && matchesB) {
               const indexA = Number(matchesA[1]);