diff --git a/index.html b/index.html
index 34d69fc..af94efd 100644
--- a/index.html
+++ b/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <link rel="preconnect" href="https://cdn.jsdelivr.net" />
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"
diff --git a/src/assets/images/leftTopGradient.webp b/src/assets/images/leftTopGradient.webp
new file mode 100644
index 0000000..322a1a7
Binary files /dev/null and b/src/assets/images/leftTopGradient.webp differ
diff --git a/src/assets/images/mainSectionPhoneImage1.webp b/src/assets/images/mainSectionPhoneImage1.webp
new file mode 100644
index 0000000..46ff2ec
Binary files /dev/null and b/src/assets/images/mainSectionPhoneImage1.webp differ
diff --git a/src/assets/images/mainSectionPhoneImage2.webp b/src/assets/images/mainSectionPhoneImage2.webp
new file mode 100644
index 0000000..6fc91d8
Binary files /dev/null and b/src/assets/images/mainSectionPhoneImage2.webp differ
diff --git a/src/assets/images/mainSectionPhoneImage3.webp b/src/assets/images/mainSectionPhoneImage3.webp
new file mode 100644
index 0000000..66bbfcc
Binary files /dev/null and b/src/assets/images/mainSectionPhoneImage3.webp differ
diff --git a/src/pages/landingPage/IntroSection.jsx b/src/pages/landingPage/IntroSection.jsx
index 325b495..957dd1e 100644
--- a/src/pages/landingPage/IntroSection.jsx
+++ b/src/pages/landingPage/IntroSection.jsx
@@ -21,7 +21,7 @@ function IntroSection() {
       <img
         src={fandomKLogo}
         alt="FandomKLogo"
-        className="cursor-pointer z-10 mt-[20px] w-[236px] tablet:w-[324px] pc:w-[512px] select-none"
+        className="cursor-pointer z-10 mt-[20px] w-[236px] h-[44px] tablet:w-[324px] tablet:h-[62px] pc:w-[512px] pc:h-[98px] select-none"
         onClick={() => {
           handleClick(false);
         }}
@@ -29,7 +29,7 @@ function IntroSection() {
       <img
         src={idolImage}
         alt="idolImage"
-        className="w-[392px] mt-[20px] h-auto opacity-70 top-[100px] tablet:w-[712px] pc:absolute pc:w-[932px] select-none"
+        className="w-[392px] h-[328px] mt-[20px] h-auto opacity-70 top-[100px] tablet:w-[712px] tablet:w-[596px] pc:absolute pc:w-[932px] pc:h-[780px] select-none"
       />
       <PrimaryButton
         className={
diff --git a/src/pages/landingPage/LandingPage.jsx b/src/pages/landingPage/LandingPage.jsx
index 73c3cae..e6c436b 100644
--- a/src/pages/landingPage/LandingPage.jsx
+++ b/src/pages/landingPage/LandingPage.jsx
@@ -1,8 +1,8 @@
 import IntroSection from '@/pages/landingPage/IntroSection.jsx';
-import leftTopGradient from '@/assets/images/leftTopGradient.png';
-import phoneImage1 from '@/assets/images/mainSectionPhoneImage1.png';
-import phoneImage2 from '@/assets/images/mainSectionPhoneImage2.png';
-import phoneImage3 from '@/assets/images/mainSectionPhoneImage3.png';
+import leftTopGradient from '@/assets/images/leftTopGradient.webp';
+import phoneImage1 from '@/assets/images/mainSectionPhoneImage1.webp';
+import phoneImage2 from '@/assets/images/mainSectionPhoneImage2.webp';
+import phoneImage3 from '@/assets/images/mainSectionPhoneImage3.webp';
 import MainSectionList from '@/pages/landingPage/MainSectionList';
 
 const sections = [
diff --git a/src/pages/landingPage/MainSectionList.jsx b/src/pages/landingPage/MainSectionList.jsx
index 463b40e..6eee417 100644
--- a/src/pages/landingPage/MainSectionList.jsx
+++ b/src/pages/landingPage/MainSectionList.jsx
@@ -28,7 +28,7 @@ function MainSectionList({ headText, semiHeadText, imgData, backgroundImage }) {
         <img
           src={src}
           alt={alt}
-          className="mt-[60px] w-[240px] tablet:w-[200px] pc:w-[320px]"
+          className="mt-[60px] w-[240px] h-[520px] tablet:w-[200px] tablet:h-[432px] pc:w-[320px] pc:h-[692px]"
         />
       </div>
     </div>
diff --git a/src/pages/listPage/ListPage.jsx b/src/pages/listPage/ListPage.jsx
index 51443bb..49cc843 100644
--- a/src/pages/listPage/ListPage.jsx
+++ b/src/pages/listPage/ListPage.jsx
@@ -8,7 +8,7 @@ import CreditRechargeSuccess from '@/components/modalContent/CreditRechargeSucce
 import CreditShortageModalContent from '@/components/modalContent/CreditShortageModalContent';
 import DonationsList from '@/pages/listPage/donation/DonationsList';
 import DonationModalContent from '@/components/modalContent/DonationModalContent';
-import leftTopGradient from '@/assets/images/leftTopGradient.png';
+import leftTopGradient from '@/assets/images/leftTopGradient.webp';
 import DonationSuccess from '@/components/modalContent/DonationSuccess';
 import MonthlyChartSection from '@/pages/listPage/monthlyChart/MonthlyChartSection';
 
