diff --git a/src/actions/chuni/userbox.ts b/src/actions/chuni/userbox.ts
index dcda7c2..f621799 100644
--- a/src/actions/chuni/userbox.ts
+++ b/src/actions/chuni/userbox.ts
@@ -34,7 +34,7 @@ export type UserboxItems = {
 	trophy: Pick<DB['actaeon_chuni_static_trophies'], 'id' | 'name' | 'rareType' | 'explainText'>[]
 } & {
 	[K in `avatar${'Wear' | 'Head' | 'Face' | 'Skin' | 'Item' | 'Front' | 'Back'}`]:
-		Pick<DB['chuni_static_avatar'], 'avatarAccessoryId' | 'name' | 'iconPath' | 'texturePath'>[]
+		Pick<DB['chuni_static_avatar'], 'id' | 'name' | 'iconPath' | 'texturePath'>[]
 };
 
 export const getUserboxItems = async (user: UserPayload, profile: ChuniUserData): Promise<UserboxItems> => {
diff --git a/src/app/(with-header)/chuni/userbox/userbox.tsx b/src/app/(with-header)/chuni/userbox/userbox.tsx
index e371890..6fe46ac 100644
--- a/src/app/(with-header)/chuni/userbox/userbox.tsx
+++ b/src/app/(with-header)/chuni/userbox/userbox.tsx
@@ -45,7 +45,7 @@ type SavedItem = { [K in keyof RequiredUserbox]: boolean };
 export const ChuniUserbox = ({ profile, userboxItems }: ChuniUserboxProps) => {
 	const initialEquipped = useRef(Object.fromEntries(Object.entries(ITEM_KEYS)
 		.map(([key, profileKey]) => [key, userboxItems[key as keyof RequiredUserbox]
-			.find(i => ('id' in i ? i.id : i.avatarAccessoryId) === profile?.[profileKey])])) as EquippedItem);
+			.find(i => i.id === profile?.[profileKey])])) as EquippedItem);
 	const [equipped, setEquipped] = useState<EquippedItem>(initialEquipped.current);
 	const [saved, setSaved] = useState<SavedItem>(Object.fromEntries(Object.keys(ITEM_KEYS).map(k => [k, true])) as any);
 	const [playingVoice, setPlayingVoice] = useState(false);
@@ -82,7 +82,7 @@ export const ChuniUserbox = ({ profile, userboxItems }: ChuniUserboxProps) => {
 
 		const update: Partial<ProfileUpdate> = Object.fromEntries((Object.entries(equipped) as Entries<typeof equipped>)
 			.filter(([k]) => items.includes(k as any))
-			.map(([k, v]) => [ITEM_KEYS[k], 'id' in v ? v.id : v.avatarAccessoryId]));
+			.map(([k, v]) => [ITEM_KEYS[k], v.id]));
 
 		setSaved(s => ({ ...s, ...Object.fromEntries(items.map(i => [i, true])) }));
 
@@ -209,7 +209,7 @@ export const ChuniUserbox = ({ profile, userboxItems }: ChuniUserboxProps) => {
 					</div>
 					<div className="grid grid-cols-2 w-full px-2 sm:px-0 sm:flex flex-col gap-1.5 sm:ml-3 flex-grow">
 						{(['avatarHead', 'avatarFace', 'avatarWear', 'avatarSkin', 'avatarItem', 'avatarBack'] as const).map(k => ((k !== 'avatarSkin' || userboxItems.avatarSkin.length > 1) && <SelectModalButton
-	              key={k} displayMode="grid" modalSize="3xl" colSize={175} rowSize={205} gap={5} modalId={k} itemId="avatarAccessoryId"
+	              key={k} displayMode="grid" modalSize="3xl" colSize={175} rowSize={205} gap={5} modalId={k} itemId="id"
 								className={(k === 'avatarBack' && userboxItems.avatarSkin.length === 1) ? 'w-full col-span-full' : 'w-full'}
 	              onSelected={i => equipItem(k, i)} items={userboxItems[k]} selectedItem={equipped[k]}
 	              renderItem={i => renderItem(i, getImageUrl(`chuni/avatar/${i.iconPath}`)) }>
diff --git a/src/components/select-modal.tsx b/src/components/select-modal.tsx
index 1305b29..79a6317 100644
--- a/src/components/select-modal.tsx
+++ b/src/components/select-modal.tsx
@@ -10,11 +10,11 @@ import { useWindowListener } from '@/helpers/use-window-listener';
 import { useReloaded } from './client-providers';
 import { useVirtualizer } from '@tanstack/react-virtual';
 
-type Data<I extends string> = {
+type Data = {
 	name?: string | null,
-} & { [K in I]: any };
+};
 
-export type SelectModalProps<T extends 'grid' | 'list', I extends string, D extends Data<I>> = {
+export type SelectModalProps<T extends 'grid' | 'list', D extends Data, I extends keyof D> = {
 	isOpen: boolean,
 	onSelected: (item: D | null | undefined) => void,
 	selectedItem: D | null | undefined,
@@ -33,8 +33,8 @@ export type SelectModalProps<T extends 'grid' | 'list', I extends string, D exte
 	colSize?: never
 		});
 
-const SelectModalList = <I extends string, D extends Data<I>>({ onSelectionChanged, setSelected, gap, rowSize, renderItem, items, selected, itemId }:
-	Pick<SelectModalProps<'list', I, D>, 'itemId' | 'onSelectionChanged' | 'gap' | 'rowSize' | 'renderItem' | 'items'> & { selected?: D | null, setSelected: (d: D) => void }) => { 
+const SelectModalList = <D extends Data, I extends keyof D>({ onSelectionChanged, setSelected, gap, rowSize, renderItem, items, selected, itemId }:
+	Pick<SelectModalProps<'list', D, I>, 'itemId' | 'onSelectionChanged' | 'gap' | 'rowSize' | 'renderItem' | 'items'> & { selected?: D | null, setSelected: (d: D) => void }) => { 
 	const listRef = useRef<HTMLDivElement | null>(null);
 	const lastHeight = useRef(rowSize);
 
@@ -76,8 +76,8 @@ const SelectModalList = <I extends string, D extends Data<I>>({ onSelectionChang
 	</div>)
 };
 
-const SelectModalGrid = <I extends string, D extends Data<I>>({ onSelectionChanged, setSelected, gap, rowSize, renderItem, items, selected, colSize, itemId }:
-	Pick<SelectModalProps<'grid', I, D>, 'itemId' | 'onSelectionChanged' | 'gap' | 'rowSize' | 'renderItem' | 'items' | 'colSize'> & { selected?: D | null, setSelected: (d: D) => void; }) => { 
+const SelectModalGrid = <D extends Data, I extends keyof D>({ onSelectionChanged, setSelected, gap, rowSize, renderItem, items, selected, colSize, itemId }:
+	Pick<SelectModalProps<'grid', D, I>, 'itemId' | 'onSelectionChanged' | 'gap' | 'rowSize' | 'renderItem' | 'items' | 'colSize'> & { selected?: D | null, setSelected: (d: D) => void; }) => { 
 	const listRef = useRef<HTMLDivElement | null>(null);
 	const lastHeight = useRef(rowSize);
 	const [width, setWidth] = useState(0)
@@ -134,7 +134,7 @@ const SelectModalGrid = <I extends string, D extends Data<I>>({ onSelectionChang
 	</div>)
 };
 
-const SelectModal = <T extends 'grid' | 'list', I extends string, D extends Data<I>>({ footer, onSelectionChanged, gap, selectedItem, renderItem, displayMode, items, isOpen, onSelected, modalSize, colSize, rowSize, itemId }: SelectModalProps<T, I, D>) => {
+const SelectModal = <T extends 'grid' | 'list', D extends Data, I extends keyof D>({ footer, onSelectionChanged, gap, selectedItem, renderItem, displayMode, items, isOpen, onSelected, modalSize, colSize, rowSize, itemId }: SelectModalProps<T, D, I>) => {
 	const [selected, setSelected] = useState(selectedItem);
 	const [filteredItems, setFilteredItems] = useState(items);
 	const outputSelected = useRef<null | undefined | D>(null);
@@ -194,8 +194,8 @@ const SelectModal = <T extends 'grid' | 'list', I extends string, D extends Data
 	</Modal>)
 };
 
-export const SelectModalButton = <T extends 'grid' | 'list', I extends string, D extends Data<I>>(props: Omit<ButtonProps, 'onClick'> &
-	Pick<SelectModalProps<T, I, D>, 'itemId' | 'modalSize' | 'displayMode' | 'colSize' | 'rowSize' | 'items' | 'renderItem' | 'selectedItem' | 'onSelected' | 'gap' | 'onSelectionChanged' | 'footer'> &
+export const SelectModalButton = <T extends 'grid' | 'list', D extends Data, I extends keyof D>(props: Omit<ButtonProps, 'onClick'> &
+	Pick<SelectModalProps<T, D, I>, 'itemId' | 'modalSize' | 'displayMode' | 'colSize' | 'rowSize' | 'items' | 'renderItem' | 'selectedItem' | 'onSelected' | 'gap' | 'onSelectionChanged' | 'footer'> &
 	{ modalId: string; }) => {
 	const router = useRouter();
 	const [isOpen, setOpen] = useState(false);