diff --git a/src/components/room/widgets/pet-training/PetTrainingPanelWidgetView.tsx b/src/components/room/widgets/pet-training/PetTrainingPanelWidgetView.tsx
index 08d8da71..170f2332 100644
--- a/src/components/room/widgets/pet-training/PetTrainingPanelWidgetView.tsx
+++ b/src/components/room/widgets/pet-training/PetTrainingPanelWidgetView.tsx
@@ -6,11 +6,11 @@ import { useAvatarInfoWidget, useMessageEvent } from '../../../../hooks';
 
 export const PetTrainingPanelWidgetView: FC<{}> = props =>
 {
-    const { avatarInfo = null, petTrainInformation = null, setTrainPetInformation = null } = useAvatarInfoWidget();
+    const { avatarInfo = null, petTrainInformation = null, setPetTrainInformation = null } = useAvatarInfoWidget();
 
     useMessageEvent<DesktopViewEvent>(DesktopViewEvent, event =>
     {
-        setTrainPetInformation(null);
+        setPetTrainInformation(null);
     });
 
     useMessageEvent<PetTrainingPanelMessageEvent>(PetTrainingPanelMessageEvent, event =>
@@ -19,7 +19,7 @@ export const PetTrainingPanelWidgetView: FC<{}> = props =>
 
         if (!parser) return;
 
-        setTrainPetInformation(parser);
+        setPetTrainInformation(parser);
     });
 
     const processPetAction = (petId: number, type: string) =>
@@ -33,20 +33,20 @@ export const PetTrainingPanelWidgetView: FC<{}> = props =>
 
     return (
         <NitroCardView uniqueKey="user-settings" className="user-settings-window no-resize" theme="primary-slim">
-            <NitroCardHeaderView headerText={ LocalizeText('widgets.pet.commands.title') } onCloseClick={ () => setTrainPetInformation(null) } />
+            <NitroCardHeaderView headerText={ LocalizeText('widgets.pet.commands.title') } onCloseClick={ () => setPetTrainInformation(null) } />
             <NitroCardContentView className="text-black">
                 <Flex alignItems="center" justifyContent="center" gap={ 2 }>
                     <Grid columnCount={ 2 }>
                         <Column fullWidth overflow="hidden" className="body-image pet p-1">
                             <LayoutPetImageView figure={ (avatarInfo as AvatarInfoPet)?.petFigure } posture={ (avatarInfo as AvatarInfoPet)?.posture } direction={ 2 } />
                         </Column>
-                        <Text variant="white" small wrap>{ (avatarInfo as AvatarInfoPet)?.name }</Text>
+                        <Text variant="black" small wrap>{ (avatarInfo as AvatarInfoPet)?.name }</Text>
                     </Grid>
                 </Flex>
                 <Grid columnCount={ 2 }>
                     {
                         (petTrainInformation.commands && petTrainInformation.commands.length > 0) && petTrainInformation.commands.map((command, index) =>
-                            <Button key={ index } disabled={ !petTrainInformation.enabledCommands.includes(command) } onClick={ () => processPetAction(petTrainInformation.petId, LocalizeText('pet.command.' + command)) }>{ LocalizeText('pet.command.' + command) }</Button>
+                            <Button key={ index } disabled={ !petTrainInformation.enabledCommands.includes(command) } onClick={ () => processPetAction(petTrainInformation.petId, LocalizeText(`pet.command.${ command }`)) }>{ LocalizeText(`pet.command.${ command }`) }</Button>
                         )
                     }
                 </Grid>
diff --git a/src/hooks/rooms/widgets/useAvatarInfoWidget.ts b/src/hooks/rooms/widgets/useAvatarInfoWidget.ts
index aacf50e5..afe46658 100644
--- a/src/hooks/rooms/widgets/useAvatarInfoWidget.ts
+++ b/src/hooks/rooms/widgets/useAvatarInfoWidget.ts
@@ -14,7 +14,7 @@ const useAvatarInfoWidgetState = () =>
     const [ nameBubbles, setNameBubbles ] = useState<AvatarInfoName[]>([]);
     const [ productBubbles, setProductBubbles ] = useState<UseProductItem[]>([]);
     const [ confirmingProduct, setConfirmingProduct ] = useState<UseProductItem>(null);
-    const [ petTrainInformation, setTrainPetInformation ] = useState<PetTrainingMessageParser>(null);
+    const [ petTrainInformation, setPetTrainInformation ] = useState<PetTrainingMessageParser>(null);
     const [ pendingPetId, setPendingPetId ] = useState<number>(-1);
     const [ isDecorating, setIsDecorating ] = useState(false);
     const { friends = [] } = useFriends();
@@ -66,7 +66,7 @@ const useAvatarInfoWidgetState = () =>
     const getObjectInfo = (objectId: number, category: number) =>
     {
         let info: IAvatarInfo = null;
-        setTrainPetInformation(null);
+        setPetTrainInformation(null);
 
         switch(category)
         {
@@ -274,7 +274,7 @@ const useAvatarInfoWidgetState = () =>
     useObjectDeselectedEvent(event =>
     {
         setAvatarInfo(null);
-        setTrainPetInformation(null);
+        setPetTrainInformation(null);
         setProductBubbles([]);
     });
 
@@ -352,7 +352,7 @@ const useAvatarInfoWidgetState = () =>
         roomSession.isDecorating = isDecorating;
     }, [ roomSession, isDecorating ]);
 
-    return { avatarInfo, setAvatarInfo, activeNameBubble, setActiveNameBubble, nameBubbles, productBubbles, confirmingProduct, petTrainInformation, setTrainPetInformation, isDecorating, setIsDecorating, removeNameBubble, removeProductBubble, updateConfirmingProduct, getObjectName };
+    return { avatarInfo, setAvatarInfo, activeNameBubble, setActiveNameBubble, nameBubbles, productBubbles, confirmingProduct, petTrainInformation, setPetTrainInformation, isDecorating, setIsDecorating, removeNameBubble, removeProductBubble, updateConfirmingProduct, getObjectName };
 }
 
 export const useAvatarInfoWidget = useAvatarInfoWidgetState;