diff --git a/README.md b/README.md
index 84a52ed..82c404a 100644
--- a/README.md
+++ b/README.md
@@ -80,6 +80,7 @@ npm run cypress:open
 ## Screenshots
 <img src="public/HomePage.png" alt="homepage page"/>
 <img src="public/Teambuilder.png" alt="teambuilder page"/>
+<img src="public/UserPage.gif" alt="User profile page"/>
 
 ## Contributing
 
diff --git a/public/UserPage.gif b/public/UserPage.gif
new file mode 100644
index 0000000..a13e7a4
Binary files /dev/null and b/public/UserPage.gif differ
diff --git a/src/app/components/ProfileCard/grid.tsx b/src/app/components/ProfileCard/grid.tsx
index 4a6e3f2..633c612 100644
--- a/src/app/components/ProfileCard/grid.tsx
+++ b/src/app/components/ProfileCard/grid.tsx
@@ -56,7 +56,7 @@ export function ProfileCardGrid({
     };
 
     return <>
-        <div className="grid-auto-fit-150 mt-10">
+        <div className="grid-auto-fit-200 mt-10">
             {
                 user.characters.length > 0 ? user.characters.map((character: any, index: number) => {
                     return <CharacterCard activeProp={() => {
diff --git a/src/app/components/ProfileCard/wide.tsx b/src/app/components/ProfileCard/wide.tsx
index 2f66818..d88962d 100644
--- a/src/app/components/ProfileCard/wide.tsx
+++ b/src/app/components/ProfileCard/wide.tsx
@@ -43,12 +43,12 @@ export function ProfileCardWide({
                     <Image src={`/namecards/stars_background.png`} width={2500} height={2500} alt={`${activeCharacter.name} background stars image`} blurDataURL="data:..." placeholder="blur"  className="pointer-events-none absolute top-0 mix-blend-overlay opacity-40 rounded-xl object-cover h-full  " /> 
                     :
                     activeCharacter.name === "Yae Miko" ?
-                        <Image src={`https://api.ambr.top/assets/UI/namecard/UI_NameCardPic_${activeCharacter.fileName}1_P.png`} blurDataURL="data:..." placeholder="blur"  width={2000} height={1000} alt={`${activeCharacter.name} namecard image banner`} className="pointer-events-none absolute top-0 mix-blend-overlay opacity-50 rounded-xl object-cover h-full " />
+                        <Image src={`https://gi.yatta.moe/assets/UI/namecard/UI_NameCardPic_${activeCharacter.fileName}1_P.png`} blurDataURL="data:..." placeholder="blur"  width={2000} height={1000} alt={`${activeCharacter.name} namecard image banner`} className="pointer-events-none absolute top-0 mix-blend-overlay opacity-50 rounded-xl object-cover h-full " />
                         :
                         (activeCharacter.name === "Traveler") ?
                             <Image src={`/namecards/UI_NameCardPic_Ysxf4_P.png`} width={2000} height={1000} alt={`${activeCharacter.name} namecard image banner`} className="pointer-events-none absolute top-0 mix-blend-overlay opacity-50 rounded-xl object-cover h-full w-full" />
                             :
-                            <Image src={`https://api.ambr.top/assets/UI/namecard/UI_NameCardPic_${activeCharacter.fileName}_P.png`} blurDataURL="data:..." placeholder="blur"  width={2000} height={1000} alt={`${activeCharacter.name} namecard image banner`} className="pointer-events-none absolute top-0 mix-blend-overlay opacity-50 rounded-xl object-cover h-full w-full" />
+                            <Image src={`https://gi.yatta.moe/assets/UI/namecard/UI_NameCardPic_${activeCharacter.fileName}_P.png`} blurDataURL="data:..." placeholder="blur"  width={2000} height={1000} alt={`${activeCharacter.name} namecard image banner`} className="pointer-events-none absolute top-0 mix-blend-overlay opacity-50 rounded-xl object-cover h-full w-full" />
                 }
                 <Image src={'/icon.svg'} alt="Tenryou Logo" width={50} height={50} className="absolute right-2 top-2 drop-shadow-icon"/>
                 <div className="w-full h-full relative min-h-[400px] col-span-1">
diff --git a/src/app/users/page.tsx b/src/app/users/page.tsx
index 4d878f5..3e8760e 100644
--- a/src/app/users/page.tsx
+++ b/src/app/users/page.tsx
@@ -15,7 +15,7 @@ export default function UserPage() {
     return (
         <>
             <div className="flex flex-col gap-4 justify-center items-center mt-64">
-                <p className="text-center">Make sure the profile settings in the game have &quot;Show character details&quot; enabled, otherwise the API will not be able to see profile details.</p>
+                <p className="text-center">Make sure the profile settings in the game have &quot;Show character details&quot; enabled, otherwise the API will not be able to see profile details. When an update is near, API no longer works.</p>
                 <p className="text-center">Example: 600020272</p>
                 <form className="flex justify-center items-center h-full w-full gap-2" onSubmit={handleSubmit} >
                     <input type="number" name="uid" required value={user.uid} placeholder="Enter UID..." className="p-2 rounded-xl" onChange={handleChange} />