diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index b9c841c..d284332 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -40,8 +40,8 @@ export const metadata: Metadata = {
     images: [
       {
         url: "https://srtools.kain.id.vn/ff-srtool.png",
-        width: 630,
-        height: 630,
+        width: 312,
+        height: 312,
         alt: "Firefly SrTools Logo",
       },
     ],
diff --git a/src/components/card/characterInfoCard.tsx b/src/components/card/characterInfoCard.tsx
index ab747e3..cf6fcd6 100644
--- a/src/components/card/characterInfoCard.tsx
+++ b/src/components/card/characterInfoCard.tsx
@@ -90,9 +90,11 @@ export default function CharacterInfoCard({ character, selectedCharacters, onCha
             {character.lightcone.item_id && (
                 <div className="">
                     <div className="rounded-lg h-42 flex items-center justify-center">
-                        <img
+                        <Image
                             src={`https://api.hakush.in/hsr/UI/lightconemediumicon/${character.lightcone.item_id}.webp`}
                             alt={mapLightconeInfo[character.lightcone.item_id.toString()]?.Name}
+                            width={348}
+                            height={408}
                             className="w-full h-full object-contain rounded-lg"
                         />
 
diff --git a/src/components/card/lightconeCard.tsx b/src/components/card/lightconeCard.tsx
index 6614081..6d168b2 100644
--- a/src/components/card/lightconeCard.tsx
+++ b/src/components/card/lightconeCard.tsx
@@ -4,6 +4,7 @@ import { getLocaleName } from '@/helper';
 import useLocaleStore from '@/stores/localeStore';
 import { LightConeBasic } from '@/types';
 import ParseText from '../parseText';
+import Image from 'next/image';
 
 interface LightconeCardProps {
     data: LightConeBasic
@@ -27,9 +28,11 @@ export default function LightconeCard({ data }: LightconeCardProps) {
             >
 
                 <div className="relative w-full h-full">
-                    <img
+                    <Image
                         loading="lazy"
                         src={`https://api.hakush.in/hsr/UI/lightconemediumicon/${data.id}.webp`}
+                        width={348}
+                        height={408}
                         className="w-full h-full rounded-md object-cover"
                         alt="ALT"
                     />
diff --git a/src/components/card/profileCard.tsx b/src/components/card/profileCard.tsx
index 0a3b56a..4914011 100644
--- a/src/components/card/profileCard.tsx
+++ b/src/components/card/profileCard.tsx
@@ -26,9 +26,11 @@ export default function ProfileCard({ profile, selectedProfile, onProfileToggle
             {profile.lightcone && (
                 <div className="">
                     <div className="rounded-lg h-42 flex items-center justify-center">
-                        <img
+                        <Image
                             src={`https://api.hakush.in/hsr/UI/lightconemediumicon/${profile.lightcone.item_id}.webp`}
                             alt={mapLightconeInfo[profile.lightcone.item_id.toString()]?.Name}
+                            width={348}
+                            height={408}
                             className="w-full h-full object-contain rounded-lg"
                         />
 
diff --git a/src/components/skillsInfo/index.tsx b/src/components/skillsInfo/index.tsx
index 8457e4b..1c55259 100644
--- a/src/components/skillsInfo/index.tsx
+++ b/src/components/skillsInfo/index.tsx
@@ -157,9 +157,9 @@ export default function SkillsInfo() {
                                 <Image
                                     src={`/skilltree/${avatarSelected?.baseType?.toUpperCase()}.webp`}
                                     alt=""
-                                    width={612}
+                                    width={312}
                                     priority={true}
-                                    height={612}
+                                    height={312}
                                     style={{
                                         filter: (theme === "winter" || theme === "cupcake") ? "invert(1)" : "none"
                                     }}