diff --git a/src/pages/home/GoalProductRecommend.tsx b/src/pages/home/GoalProductRecommend.tsx
index 6e9d432..acdc94c 100644
--- a/src/pages/home/GoalProductRecommend.tsx
+++ b/src/pages/home/GoalProductRecommend.tsx
@@ -3,8 +3,13 @@ import { useGoalsProducts } from "../../contexts/ProductContext";
 import { useUser } from "../../contexts/UserContext";
 import { ProductGetResponse } from "../product/ProductListPage";
 import { API_BASE_URL } from "../../constants";
+import { LoadingPage } from "../LoadingPage";
 
-const calcExpectedAmount = (years: number, annualInterestRate: number, monthlySavings: number): string => {
+const calcExpectedAmount = (
+  years: number,
+  annualInterestRate: number,
+  monthlySavings: number
+): string => {
   const months = years * 12;
   const monthlyInterestRate = annualInterestRate / 12 / 100;
 
@@ -12,10 +17,10 @@ const calcExpectedAmount = (years: number, annualInterestRate: number, monthlySa
 
   for (let i = 0; i < months; i++) {
     totalAmount += monthlySavings;
-    totalAmount *= (1 + monthlyInterestRate);
+    totalAmount *= 1 + monthlyInterestRate;
   }
 
-  return (Math.floor(totalAmount/100)*100).toLocaleString();
+  return (Math.floor(totalAmount / 100) * 100).toLocaleString();
 };
 
 const GoalProductRecommend = ({ goalId }: { goalId: number }) => {
@@ -105,19 +110,27 @@ const GoalProductRecommend = ({ goalId }: { goalId: number }) => {
                 </div>
                 <div className="text-xs text-lime-600 font-bold">예상금액</div>
                 <div className="col-span-4 text-xs">
-                <p>
+                  <p>
                     매달 10만원씩 적금한다면
                     <span className="text-red-600">
-                      {` ${calcExpectedAmount(goalProduct.products.recommendedProducts[0]?.termYear, goalProduct.products.recommendedProducts[0]
-                      ?.interestRate, 100000)}`}
+                      {` ${calcExpectedAmount(
+                        goalProduct.products.recommendedProducts[0]?.termYear,
+                        goalProduct.products.recommendedProducts[0]
+                          ?.interestRate,
+                        100000
+                      )}`}
                     </span>
                     원
                   </p>
                   <p>
                     매달 100만원씩 적금한다면
                     <span className="text-red-600">
-                      {` ${calcExpectedAmount(goalProduct.products.recommendedProducts[0]?.termYear, goalProduct.products.recommendedProducts[0]
-                      ?.interestRate, 1000000)}`}
+                      {` ${calcExpectedAmount(
+                        goalProduct.products.recommendedProducts[0]?.termYear,
+                        goalProduct.products.recommendedProducts[0]
+                          ?.interestRate,
+                        1000000
+                      )}`}
                     </span>
                     원
                   </p>
@@ -157,21 +170,31 @@ const GoalProductRecommend = ({ goalId }: { goalId: number }) => {
                     </span>
                     %
                   </div>
-                  <div className="text-xs text-lime-600 font-bold">예상금액</div>
+                  <div className="text-xs text-lime-600 font-bold">
+                    예상금액
+                  </div>
                   <div className="text-xs col-span-4">
-                  <p>
+                    <p>
                       매달 10만원씩 적금한다면
                       <span className="text-red-600">
-                        {` ${calcExpectedAmount(goalProduct.products.recommendedProducts[1]?.termYear, goalProduct.products.recommendedProducts[0]
-                        ?.interestRate, 100000)}`}
+                        {` ${calcExpectedAmount(
+                          goalProduct.products.recommendedProducts[1]?.termYear,
+                          goalProduct.products.recommendedProducts[0]
+                            ?.interestRate,
+                          100000
+                        )}`}
                       </span>
                       원
                     </p>
                     <p>
                       매달 100만원씩 적금한다면
                       <span className="text-red-600">
-                        {` ${calcExpectedAmount(goalProduct.products.recommendedProducts[1]?.termYear, goalProduct.products.recommendedProducts[0]
-                        ?.interestRate, 1000000)}`}
+                        {` ${calcExpectedAmount(
+                          goalProduct.products.recommendedProducts[1]?.termYear,
+                          goalProduct.products.recommendedProducts[0]
+                            ?.interestRate,
+                          1000000
+                        )}`}
                       </span>
                       원
                     </p>
@@ -182,7 +205,7 @@ const GoalProductRecommend = ({ goalId }: { goalId: number }) => {
           )}
         </>
       ) : (
-        <div>Loading...</div>
+        <LoadingPage />
       )}
     </>
   );
diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx
index 251d8bc..ce63bff 100644
--- a/src/pages/home/HomePage.tsx
+++ b/src/pages/home/HomePage.tsx
@@ -12,7 +12,12 @@ import { API_BASE_URL } from "../../constants";
 import { useEffect } from "react";
 import { LoadingPage } from "../LoadingPage";
 
-const GoalBox = ({ goal }: { goal: UserGoalGetResponse }) => {
+type Props = {
+  goal: UserGoalGetResponse;
+  idx: number;
+};
+
+const GoalBox = ({ goal, idx }: Props) => {
   const navigate = useNavigate();
   const goToSelect = (userGoalId: number) => {
     navigate(`${userGoalId}`);
@@ -50,7 +55,7 @@ const GoalBox = ({ goal }: { goal: UserGoalGetResponse }) => {
         onClick={() => goToSelect(goal.userGoalId)}
       >
         <div className="absolute top-0 left-0 bg-customGreen w-1/5 text-white p-1 text-sm text-center font-hana-r rounded-br-xl rounded-tl-xl">
-          목표 {goal.userGoalId}
+          목표 {idx}
         </div>
         <div className="grid grid-cols-5 text-md font-semibold mb-8 mt-3">
           <div className="align-bottom col-span-3 flex">
@@ -131,14 +136,14 @@ export const HomePage = () => {
   return (
     <>
       <div className="bg-white px-10">
-        <img src="logo.png" className="w-1/5" alt="" />
+        <img src="\logo.png" className="w-1/5" alt="" />
       </div>
       <div className="mx-10 my-5">
         <div className="font-hana-r">
           <p className="text-gray-400 text-xs">반갑습니다</p>
           <h3 className="font-semibold text-lg pt-1">{user.name} 님</h3>
         </div>
-        {totalAmount.toString.length>10 ? (
+        {totalAmount.toString.length > 10 ? (
           <>
             <div className="px-5 py-3 mt-3 bg-gray-200 rounded-2xl items-end">
               <h2 className="font-hana-b text-lg">💰현재 저축액</h2>
@@ -148,7 +153,7 @@ export const HomePage = () => {
               </h2>
             </div>
           </>
-        ): (
+        ) : (
           <>
             <div className="px-5 py-3 mt-3 bg-gray-200 rounded-2xl flex justify-between items-end">
               <h2 className="font-hana-b text-lg">💰현재 저축액 :</h2>
@@ -159,11 +164,10 @@ export const HomePage = () => {
             </div>
           </>
         )}
-        
 
-        {data?.map((goal) => (
+        {data?.map((goal, cnt) => (
           <div key={goal.userGoalId}>
-            <GoalBox goal={goal} />
+            <GoalBox goal={goal} idx={cnt + 1} />
           </div>
         ))}
 
diff --git a/src/pages/mypage/goal/GoalWish.tsx b/src/pages/mypage/goal/GoalWish.tsx
index dae6f66..fbfb3d3 100644
--- a/src/pages/mypage/goal/GoalWish.tsx
+++ b/src/pages/mypage/goal/GoalWish.tsx
@@ -28,25 +28,22 @@ export const GoalWish = ({ goal, goalDetail }: Props) => {
     if (user.jwt) {
       (async function () {
         try {
-          const response = await fetch(
-            `${API_BASE_URL}/api/v1/user-goals`,
-            {
-              method: "POST",
-              headers: {
-                "Content-Type": "application/json",
-                Authorization: `Bearer ${user.jwt}`,
-              },
-              body: JSON.stringify({
-                userGoalId: goalId !== "0" ? goalId : null,
-                goalAlias: alias,
-                goalTypeCd: "WISH",
-                goalSpecificId: goal.goalSpecificId,
-                goalBeginDate: formatDateToYyyymmdd(begin),
-                duration: duration,
-                amount: price,
-              }),
-            }
-          );
+          const response = await fetch(`${API_BASE_URL}/api/v1/user-goals`, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+              Authorization: `Bearer ${user.jwt}`,
+            },
+            body: JSON.stringify({
+              userGoalId: goalId !== "0" ? goalId : null,
+              goalAlias: alias,
+              goalTypeCd: "WISH",
+              goalSpecificId: goal.goalSpecificId,
+              goalBeginDate: formatDateToYyyymmdd(begin),
+              duration: duration,
+              amount: price,
+            }),
+          });
           if (response.ok) {
             const json = await response.json();
             const goal: Goal = {
@@ -76,7 +73,7 @@ export const GoalWish = ({ goal, goalDetail }: Props) => {
 
   return (
     <>
-      <div className={`mb-5 ${Number(goalId) !== 0 ? 'mx-10' : ''}`}>
+      <div className={`mb-5 ${Number(goalId) !== 0 ? "mx-10" : ""}`}>
         <label className="text-customGreen font-bold text-lg">목표 이름</label>
         <input
           type="text"
diff --git a/src/pages/product/ProductDetailPage.tsx b/src/pages/product/ProductDetailPage.tsx
index 6b81eda..36a2511 100644
--- a/src/pages/product/ProductDetailPage.tsx
+++ b/src/pages/product/ProductDetailPage.tsx
@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import { useUser } from "../../contexts/UserContext";
 import { API_BASE_URL } from "../../constants";
+import { LoadingPage } from "../LoadingPage";
 
 export type ProductDetailResponse = {
   productId: number;
@@ -23,6 +24,7 @@ export const ProductDetailPage = () => {
   const { user } = useUser();
   const { productId } = useParams();
   const [product, setProduct] = useState<ProductDetailResponse>();
+  const [loading, setLoading] = useState<boolean>(true);
   useEffect(() => {
     if (user.jwt) {
       (async function () {
@@ -40,6 +42,7 @@ export const ProductDetailPage = () => {
             const json = await response.json();
             console.log(json);
             setProduct(json);
+            setLoading(false);
           }
         } catch (err) {
           if (err instanceof Error) {
@@ -49,6 +52,9 @@ export const ProductDetailPage = () => {
       })();
     }
   }, [productId, user.jwt]);
+
+  if (loading) return <LoadingPage />;
+  
   return (
     <>
       <div className="container">
@@ -96,13 +102,25 @@ export const ProductDetailPage = () => {
             <div className="grid grid-cols-7 gap-4">
               <div className="col-span-2 font-bold text-customGreen">내용</div>
               <div className="col-span-5">{product?.info}</div>
-              <div className="col-span-2 font-bold text-customGreen">이자율</div>
+              <div className="col-span-2 font-bold text-customGreen">
+                이자율
+              </div>
               <div className="col-span-5">{product?.interestRate}%</div>
-              <div className="col-span-2 font-bold text-customGreen">주의사항</div>
+              <div className="col-span-2 font-bold text-customGreen">
+                주의사항
+              </div>
               <div className="col-span-5">{product?.cautions}</div>
-              <div className="col-span-2 font-bold text-customGreen">예금자<br />보호법</div>
+              <div className="col-span-2 font-bold text-customGreen">
+                예금자
+                <br />
+                보호법
+              </div>
               <div className="col-span-5">{product?.depositProtection}</div>
-              <div className="col-span-2 font-bold text-customGreen">적금<br />약관동의</div>
+              <div className="col-span-2 font-bold text-customGreen">
+                적금
+                <br />
+                약관동의
+              </div>
               <div className="col-span-5">{product?.contractTerms}</div>
             </div>
           </div>
diff --git a/src/pages/product/ProductListPage.tsx b/src/pages/product/ProductListPage.tsx
index e6e7daa..3c2fdf7 100644
--- a/src/pages/product/ProductListPage.tsx
+++ b/src/pages/product/ProductListPage.tsx
@@ -1,10 +1,11 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { SlArrowRight } from "react-icons/sl";
 import { useNavigate, useParams } from "react-router-dom";
 import { useGoalsProducts } from "../../contexts/ProductContext";
 import { useUser } from "../../contexts/UserContext";
 import { TopLine } from "../../components/ui/TopLine";
 import { API_BASE_URL } from "../../constants";
+import { LoadingPage } from "../LoadingPage";
 
 export type Product = {
   id: number;
@@ -86,10 +87,12 @@ export const ProductListPage = () => {
   const { user } = useUser();
   const { goalsProducts, setProduct } = useGoalsProducts();
   let { goalId } = useParams();
-  console.log(goalId);
   if (goalId === undefined) {
     goalId = "";
   }
+
+  const [loading, setLoading] = useState<boolean>(true);
+
   const goalProduct = goalsProducts?.goalsProducts?.find(
     (gp) => gp.goal.userGoalId === +goalId
   );
@@ -111,6 +114,7 @@ export const ProductListPage = () => {
               const json: ProductGetResponse = await response.json();
               setProduct(+goalId, json);
               console.log(json);
+              setLoading(false);
             }
           } catch (err) {
             if (err instanceof Error) {
@@ -123,11 +127,18 @@ export const ProductListPage = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [goalId, user.jwt]);
 
+  if (
+    goalProduct &&
+    goalProduct.products.recommendedProducts.length === 0 &&
+    loading
+  )
+    return <LoadingPage />;
+
   return (
     <>
       <TopLine name={"적금 상품 추천"} />
       <div className="h-1 bg-gray-200">
-          <div className="w-2/6 hana-color h-1"></div>
+        <div className="w-2/6 hana-color h-1"></div>
       </div>
       <div className="p-4 container">
         <h1 className="text-2xl font-bold mb-4 ml-2 font-hana-b mt-3">상품</h1>
@@ -141,13 +152,6 @@ export const ProductListPage = () => {
               <br />
               적합한 적금을 추천해 드릴게요!
             </p>
-            {/* <p className="text-sm mt-2">
-              이미 가입된 상품 목록입니다.
-              <br />
-              {goalProduct?.products.enrolledProducts.map(
-                (product: enrolledProducts) => product.productNm + ", "
-              )}
-            </p> */}
           </div>
           <div className="flex justify-center items-cneter text-4xl place-items-center font-hana-b">
             ☝️
@@ -157,14 +161,14 @@ export const ProductListPage = () => {
           <>
             <div className="rounded-2xl bg-white shadow-md p-3 px-5 mb-5 font-hana-m text-sm">
               이미 가입된 적금
-              <span className="font-hana-b text-red-400 text-lg"> {goalProduct?.products.enrolledProducts.length}</span>
+              <span className="font-hana-b text-red-400 text-lg">
+                {" "}
+                {goalProduct?.products.enrolledProducts.length}
+              </span>
               개가 존재합니다.
             </div>
           </>
-        ):(
-          null
-        )}
-        
+        ) : null}
 
         <div className="h-[470px] overflow-y-auto p-2">
           {goalProduct?.products.recommendedProducts.map(
diff --git a/src/pages/split/SplitAutoPage.tsx b/src/pages/split/SplitAutoPage.tsx
index f3dd177..20bec39 100644
--- a/src/pages/split/SplitAutoPage.tsx
+++ b/src/pages/split/SplitAutoPage.tsx
@@ -12,7 +12,11 @@ export const SplitAutoPage = () => {
   const [mode, setMode] = useState<boolean>(true);
   const [isModalOpen, setModalOpen] = useState(false);
   const [isCheckModalOpen, setCheckModalOpen] = useState(false);
-  const [accountAutoDebitId, setAccountAutoDebitId] = useState<Ratio>({ saving: 0, life: 0, reserve: 0 });
+  const [accountAutoDebitId, setAccountAutoDebitId] = useState<Ratio>({
+    saving: 0,
+    life: 0,
+    reserve: 0,
+  });
   const navigate = useNavigate();
   const [ratio, setRatio] = useState<Ratio>({
     saving: 50,
@@ -64,25 +68,30 @@ export const SplitAutoPage = () => {
   // 사용자 계좌 가져오기
   const getAccounts = async () => {
     try {
-      const response = await fetch(`${API_BASE_URL}/api/v1/accounts/auto-debit/adjust`, {
-        method: 'GET',
-        headers: {
-          'Authorization': `Bearer ${user.jwt}`,
-        },
-      });
+      const response = await fetch(
+        `${API_BASE_URL}/api/v1/accounts/auto-debit/adjust`,
+        {
+          method: "GET",
+          headers: {
+            Authorization: `Bearer ${user.jwt}`,
+          },
+        }
+      );
       if (!response.ok) {
-        throw new Error('Network response was not ok');
+        throw new Error("Network response was not ok");
       }
       const data: AccountAutoDebitAdjustGetResponse[] = await response.json();
       const testData = setAccountId(data);
       setAccountAutoDebitId(testData);
     } catch (error) {
-      console.error('Fetch error:', error);
+      console.error("Fetch error:", error);
     }
-  }
+  };
 
   // 타입별 통장 번호 저장
-  const setAccountId = (accounts: AccountAutoDebitAdjustGetResponse[]): Ratio => {
+  const setAccountId = (
+    accounts: AccountAutoDebitAdjustGetResponse[]
+  ): Ratio => {
     let saving = 0;
     let life = 0;
     let reserve = 0;
@@ -99,47 +108,54 @@ export const SplitAutoPage = () => {
     return {
       saving: saving,
       life: life,
-      reserve: reserve
+      reserve: reserve,
     };
   };
 
   useEffect(() => {
-    if (accountAutoDebitId.saving !== 0 && accountAutoDebitId.life !== 0 && accountAutoDebitId.reserve !== 0) {
+    if (
+      accountAutoDebitId.saving !== 0 &&
+      accountAutoDebitId.life !== 0 &&
+      accountAutoDebitId.reserve !== 0
+    ) {
       setAutoDebit();
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [accountAutoDebitId]);
 
   // 통장 쪼개기 (자동이체 설정)
   const setAutoDebit = async () => {
     const postOptions: FetchOptions = {
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json',
-        'Authorization': `Bearer ${user.jwt}`,
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${user.jwt}`,
       },
       body: JSON.stringify({
-        "savingAccountAutoDebitId": accountAutoDebitId.saving,
-        "savingAutoDebitAmount": calcAmount(ratio.saving, salary),
-        "lifeAccountAutoDebitId": accountAutoDebitId.life,
-        "lifeAutoDebitAmount": calcAmount(ratio.life, salary),
-        "spareAccountAutoDebitId": accountAutoDebitId.reserve,
-        "spareAutoDebitAmount": calcAmount(ratio.reserve, salary)
+        savingAccountAutoDebitId: accountAutoDebitId.saving,
+        savingAutoDebitAmount: calcAmount(ratio.saving, salary),
+        lifeAccountAutoDebitId: accountAutoDebitId.life,
+        lifeAutoDebitAmount: calcAmount(ratio.life, salary),
+        spareAccountAutoDebitId: accountAutoDebitId.reserve,
+        spareAutoDebitAmount: calcAmount(ratio.reserve, salary),
       }),
     };
 
     try {
-      const response = await fetch(`${API_BASE_URL}/api/v1/accounts/auto-debit/adjust`, postOptions);
+      const response = await fetch(
+        `${API_BASE_URL}/api/v1/accounts/auto-debit/adjust`,
+        postOptions
+      );
       if (!response.ok) {
-        console.error('Failed to set account types');
+        console.error("Failed to set account types");
       } else {
         setModalOpen(false);
         setCheckModalOpen(true);
       }
     } catch (error) {
-      console.error('Error:', error);
+      console.error("Error:", error);
     }
-  }
+  };
 
   return (
     <>
@@ -153,11 +169,7 @@ export const SplitAutoPage = () => {
               통장 쪼개기 추천 비율
             </h3>
             <div>
-              <img
-                src="/byul5.png"
-                className="w-20"
-                alt="하나은행"
-              />
+              <img src="/byul5.png" className="w-20" alt="하나은행" />
             </div>
           </div>
           <p className="text-gray-400 text-xs">
@@ -279,26 +291,30 @@ export const SplitAutoPage = () => {
           </div>
         </div>
         <hr className="bg-gray-200 border-0 w-16 mx-auto my-8 h-px" />
-        <button className="green-button" onClick={()=>setModalOpen(true)}>
+        <button className="green-button" onClick={() => setModalOpen(true)}>
           이대로 설정하기
         </button>
         <Modal isOpen={isModalOpen} onClose={() => setModalOpen(false)}>
-            <h2 className="mt-3 text-3xl text-center">✔️</h2>
-            <h2 className="mt-4 mb-4 text-xl font-bold text-center">
-              정말로 변경하시겠습니까?
-            </h2>
-            <div className="mt-10">
-              <button className="green-button" onClick={()=>getAccounts()}>확인</button>
-            </div>
+          <h2 className="mt-3 text-3xl text-center">✔️</h2>
+          <h2 className="mt-4 mb-4 text-xl font-bold text-center">
+            정말로 변경하시겠습니까?
+          </h2>
+          <div className="mt-10">
+            <button className="green-button" onClick={() => getAccounts()}>
+              확인
+            </button>
+          </div>
         </Modal>
         <Modal isOpen={isCheckModalOpen} onClose={() => navigate("/split")}>
-            <h2 className="mt-3 text-3xl text-center">✔️</h2>
-            <h2 className="mt-4 mb-4 text-xl font-bold text-center">
-              변경되었습니다.
-            </h2>
-            <div className="mt-10">
-              <button className="green-button" onClick={()=>navigate("/split")}>확인</button>
-            </div>
+          <h2 className="mt-3 text-3xl text-center">✔️</h2>
+          <h2 className="mt-4 mb-4 text-xl font-bold text-center">
+            변경되었습니다.
+          </h2>
+          <div className="mt-10">
+            <button className="green-button" onClick={() => navigate("/split")}>
+              확인
+            </button>
+          </div>
         </Modal>
       </div>
     </>
diff --git a/src/pages/split/SplitMainPage.tsx b/src/pages/split/SplitMainPage.tsx
index 7849067..34f7e06 100644
--- a/src/pages/split/SplitMainPage.tsx
+++ b/src/pages/split/SplitMainPage.tsx
@@ -122,7 +122,7 @@ export const SplitMainPage = () => {
   return (
     <>
       <div className="bg-white px-10">
-        <img src="logo.png" className="w-1/5" alt="" />
+        <img src="\logo.png" className="w-1/5" alt="" />
       </div>
       <div className="mx-5 mt-10 px-5 bg-white pb-20 rounded-2xl">
         <div className="pt-10">
diff --git a/src/pages/start/Splash.tsx b/src/pages/start/Splash.tsx
index f1cffa9..7e7283a 100644
--- a/src/pages/start/Splash.tsx
+++ b/src/pages/start/Splash.tsx
@@ -17,7 +17,7 @@ export const Splash = () => {
         <div className="text-center">
           <div>
             {/* <img src="hana.png" alt="Hana Picture" className="mx-auto mb-2" /> */}
-            <img src="logo.png" alt="Hana Picture" className="mx-auto w-2/3" />
+            <img src="/logo.png" alt="Hana Picture" className="mx-auto w-2/3" />
             {/* <span className="text-customGreen text-xl font-bold">하나피스</span> */}
           </div>
           <span className=" text-gray-500 text-sm">@Copyright HanaPiece</span>
diff --git a/src/pages/start/Tutorial1Page.tsx b/src/pages/start/Tutorial1Page.tsx
index 9c5ef2b..ca5c10b 100644
--- a/src/pages/start/Tutorial1Page.tsx
+++ b/src/pages/start/Tutorial1Page.tsx
@@ -6,7 +6,7 @@ export const Tutorial1Page = () => {
       <div className="container flex items-center justify-center">
         <div className="text-center">
           <img
-            src="hana.png"
+            src="/hana.png"
             alt="Hana Picture"
             className="mx-auto mb-2 w-5/6 h-3/4"
           />
diff --git a/src/pages/start/Tutorial3Page.tsx b/src/pages/start/Tutorial3Page.tsx
index 655526a..5ee3c1b 100644
--- a/src/pages/start/Tutorial3Page.tsx
+++ b/src/pages/start/Tutorial3Page.tsx
@@ -6,7 +6,7 @@ export const Tutorial3Page = () => {
       <div className="container flex items-center justify-center">
         <div className="text-center">
           <img
-            src="hana.png"
+            src="/hana.png"
             alt="Hana Picture"
             className="mx-auto mb-2 w-5/6 h-3/4"
           />
diff --git a/src/pages/start/Tutorial4Page.tsx b/src/pages/start/Tutorial4Page.tsx
index 12098db..5c3f964 100644
--- a/src/pages/start/Tutorial4Page.tsx
+++ b/src/pages/start/Tutorial4Page.tsx
@@ -8,7 +8,7 @@ export const Tutorial4Page = () => {
       <div className="container flex items-center justify-center">
         <div className="text-center">
           <img
-            src="hana.png"
+            src="/hana.png"
             alt="Hana Picture"
             className="mx-auto mb-2 w-5/6 h-3/4"
           />
diff --git a/src/pages/start/TutorialPage.tsx b/src/pages/start/TutorialPage.tsx
index fca0c55..1421738 100644
--- a/src/pages/start/TutorialPage.tsx
+++ b/src/pages/start/TutorialPage.tsx
@@ -19,7 +19,7 @@ export const TutorialPage = () => {
           </p>
         </div>
         <div className="p-1 mb-5">
-          <img src="tutorial4.png" alt="" className='w-3/4 m-auto' />
+          <img src="/tutorial4.png" alt="" className='w-3/4 m-auto' />
         </div>
         </>
       ),