diff --git a/src/pages/components/loadImage.jsx b/src/pages/components/loadImage.jsx
index be94ede..f62bbd8 100644
--- a/src/pages/components/loadImage.jsx
+++ b/src/pages/components/loadImage.jsx
@@ -1,11 +1,11 @@
 import '../../css/video.css';
 
-function Image({ src = "hallway_MMM.mp4" ,side = "middle", alt = "this is a video" }) {
+function Image({ src = "bg-hallway.png", side = "middle", alt = "this is an image", onImageLoad }) {
     const urlSource = `${import.meta.env.VITE_ASSETS_URL}/${src}`;
 
     return (
         <div className={`image-container ${side}`}>
-            <img src={urlSource} alt={alt}/>
+            <img src={urlSource} alt={alt} onLoad={onImageLoad} />
         </div>
     );
 }
diff --git a/src/pages/introductionPage.jsx b/src/pages/introductionPage.jsx
index c20cdfb..8b214f1 100644
--- a/src/pages/introductionPage.jsx
+++ b/src/pages/introductionPage.jsx
@@ -10,7 +10,7 @@ import Character from './class/character.jsx';
 
 function IntroductionPage() {
     const navigate = useNavigate();
-    const [loading, setLoading] = useState(false);
+    const [loading, setLoading] = useState(true);
     const [isClickedIntroduction, setIsClickedIntroduction] = useState(false);
     const [numChar, setNumChar] = useState(1);
     const character = new Character();
@@ -42,7 +42,7 @@ function IntroductionPage() {
         <LoadImage
             src='bg-hallway.png'
             side={character.position(numChar)}
-            onVideoReady={handleVideoReady}
+            onImageLoad={handleVideoReady}
         />
     ) : (
         <PlayVideo