diff --git a/apps/service/next.config.ts b/apps/service/next.config.ts
index 3686b004..5c3e5b74 100644
--- a/apps/service/next.config.ts
+++ b/apps/service/next.config.ts
@@ -1,6 +1,10 @@
 import type { NextConfig } from 'next';
 
 const nextConfig: NextConfig = {
+  images: {
+    domains: ['s3-moplus.s3.ap-northeast-2.amazonaws.com'],
+  },
+
   webpack(config) {
     config.module.rules.push({
       test: /\.svg$/i,
diff --git a/apps/service/src/app/@modal/(.)image-modal/page.tsx b/apps/service/src/app/@modal/(.)image-modal/page.tsx
index 7dfcb836..ef8cf4d2 100644
--- a/apps/service/src/app/@modal/(.)image-modal/page.tsx
+++ b/apps/service/src/app/@modal/(.)image-modal/page.tsx
@@ -1,5 +1,6 @@
 'use client';
 import { RouteModal } from '@components';
+import Image from 'next/image';
 import { useSearchParams } from 'next/navigation';
 
 const page = () => {
@@ -8,8 +9,14 @@ const page = () => {
 
   return (
     <RouteModal>
-      <div className='max-h-[calc(100dvh-8rem)] w-[calc(100dvw-8rem)] max-w-[100rem] p-[2rem]'>
-        <img src={imageUrl ?? ''} alt='full image' className='object-contain' />
+      <div className='max-h-[calc(100dvh-8rem)] w-[calc(100dvw-8rem)] max-w-[100rem] p-[1.6rem]'>
+        <Image
+          src={imageUrl ?? ''}
+          alt='full image'
+          className='object-contain'
+          width={700}
+          height={200}
+        />
       </div>
     </RouteModal>
   );
diff --git a/apps/service/src/app/problem/solve/[publishId]/[problemId]/child-problem/[childProblemId]/page.tsx b/apps/service/src/app/problem/solve/[publishId]/[problemId]/child-problem/[childProblemId]/page.tsx
index 33315c6b..35fa37b8 100644
--- a/apps/service/src/app/problem/solve/[publishId]/[problemId]/child-problem/[childProblemId]/page.tsx
+++ b/apps/service/src/app/problem/solve/[publishId]/[problemId]/child-problem/[childProblemId]/page.tsx
@@ -15,9 +15,11 @@ import {
   TwoButtonModalTemplate,
   AnswerModalTemplate,
   Tag,
+  ImageContainer,
 } from '@components';
 import { useInvalidate, useModal, useTrackEvent } from '@hooks';
 import { components } from '@schema';
+import Image from 'next/image';
 
 import { useChildProblemContext } from '@/hooks/problem';
 
@@ -51,7 +53,7 @@ const Page = () => {
   const selectedAnswer = watch('answer');
 
   // apis
-  const { data } = getChildProblemById(publishId, problemId, childProblemId);
+  const { data, isLoading } = getChildProblemById(publishId, problemId, childProblemId);
   const {
     problemNumber,
     childProblemNumber = 1,
@@ -138,6 +140,10 @@ const Page = () => {
     onNext();
   };
 
+  if (isLoading) {
+    return <></>;
+  }
+
   return (
     <>
       <ProgressHeader progress={(childProblemNumber / (childProblemLength + 1)) * 100} />
@@ -158,11 +164,15 @@ const Page = () => {
               </Tag>
             )}
           </div>
-          <img
-            src={imageUrl}
-            alt={`새끼 문제 ${problemNumber}-${childProblemNumber}번`}
-            className='mt-[1.2rem] w-full object-contain'
-          />
+          <ImageContainer className='mt-[1.2rem]'>
+            <Image
+              src={imageUrl ?? ''}
+              alt={`새끼 문제 ${problemNumber}-${childProblemNumber}번`}
+              className='w-full object-contain'
+              width={700}
+              height={200}
+            />
+          </ImageContainer>
 
           <div className='mt-[0.6rem] mb-[0.4rem] flex items-center justify-end'>
             <SmallButton variant='underline' sizeType='small' onClick={handleClickShowMainProblem}>
diff --git a/apps/service/src/app/problem/solve/[publishId]/[problemId]/main-problem/page.tsx b/apps/service/src/app/problem/solve/[publishId]/[problemId]/main-problem/page.tsx
index c954a5ce..b23eeec8 100644
--- a/apps/service/src/app/problem/solve/[publishId]/[problemId]/main-problem/page.tsx
+++ b/apps/service/src/app/problem/solve/[publishId]/[problemId]/main-problem/page.tsx
@@ -13,9 +13,11 @@ import {
   SmallButton,
   NavigationFooter,
   TimeTag,
+  ImageContainer,
 } from '@components';
 import { useInvalidate, useModal, useTrackEvent } from '@hooks';
 import { ProblemStatus } from '@types';
+import Image from 'next/image';
 
 import { useChildProblemContext } from '@/hooks/problem';
 
@@ -46,7 +48,7 @@ const Page = () => {
   const selectedAnswer = watch('answer');
 
   // apis
-  const { data } = getProblemById(publishId, problemId);
+  const { data, isLoading } = getProblemById(publishId, problemId);
 
   const {
     number,
@@ -109,6 +111,10 @@ const Page = () => {
     router.push(`/report/${publishId}/${problemId}/analysis`);
   };
 
+  if (isLoading) {
+    return <></>;
+  }
+
   return (
     <>
       <ProgressHeader progress={100} />
@@ -130,11 +136,16 @@ const Page = () => {
               </Tag>
             )}
           </div>
-          <img
-            src={imageUrl}
-            alt={`메인 문제 ${number}번`}
-            className='mt-[1.2rem] w-full object-contain'
-          />
+          <ImageContainer className='mt-[1.2rem]'>
+            <Image
+              src={imageUrl ?? ''}
+              alt={`메인 문제 ${number}번`}
+              className='w-full object-contain'
+              width={700}
+              height={200}
+              priority
+            />
+          </ImageContainer>
 
           {isDirect && (
             <div className='mt-[0.6rem] flex items-center justify-end'>
diff --git a/apps/service/src/app/problem/solve/[publishId]/[problemId]/page.tsx b/apps/service/src/app/problem/solve/[publishId]/[problemId]/page.tsx
index 62ef1485..1b84730c 100644
--- a/apps/service/src/app/problem/solve/[publishId]/[problemId]/page.tsx
+++ b/apps/service/src/app/problem/solve/[publishId]/[problemId]/page.tsx
@@ -1,16 +1,22 @@
 'use client';
+
 import { getProblemThumbnail } from '@apis';
-import { ProgressHeader, TimeTag } from '@components';
+import { ImageContainer, ProgressHeader, TimeTag } from '@components';
 import { useParams } from 'next/navigation';
+import Image from 'next/image';
 
 import SolveButtonsClient from './SolveButtonsClient';
 
 const Page = () => {
   const { publishId, problemId } = useParams<{ publishId: string; problemId: string }>();
 
-  const { data } = getProblemThumbnail(publishId, problemId);
+  const { data, isLoading } = getProblemThumbnail(publishId, problemId);
   const { number, imageUrl, recommendedMinute, recommendedSecond } = data?.data ?? {};
 
+  if (isLoading) {
+    return <></>;
+  }
+
   return (
     <>
       <ProgressHeader progress={0} />
@@ -19,11 +25,16 @@ const Page = () => {
           <h1 className='font-bold-18 text-main'>메인 문제 {number}번</h1>
           <TimeTag minutes={recommendedMinute} seconds={recommendedSecond} />
         </div>
-        <img
-          src={imageUrl}
-          alt={`메인 문제 ${number}번`}
-          className='mt-[1.2rem] w-full object-contain'
-        />
+        <ImageContainer className='mt-[1.2rem]'>
+          <Image
+            src={imageUrl ?? ''}
+            alt={`메인 문제 ${number}번`}
+            className='w-full object-contain'
+            width={700}
+            height={200}
+            priority
+          />
+        </ImageContainer>
 
         <SolveButtonsClient publishId={publishId} problemId={problemId} />
       </main>
diff --git a/apps/service/src/app/report/[publishId]/[problemId]/advanced/page.tsx b/apps/service/src/app/report/[publishId]/[problemId]/advanced/page.tsx
index a9b68e91..4673fb00 100644
--- a/apps/service/src/app/report/[publishId]/[problemId]/advanced/page.tsx
+++ b/apps/service/src/app/report/[publishId]/[problemId]/advanced/page.tsx
@@ -1,7 +1,8 @@
 'use client';
-import { NavigationFooter, SmallButton, ProgressHeader } from '@components';
+import { NavigationFooter, SmallButton, ProgressHeader, ImageContainer } from '@components';
 import { useParams, useRouter } from 'next/navigation';
 import { useTrackEvent } from '@hooks';
+import Image from 'next/image';
 
 import { useReportContext } from '@/hooks/report';
 
@@ -33,6 +34,10 @@ const Page = () => {
     router.push(`/report/${publishId}/${problemId}/prescription`);
   };
 
+  if (!seniorTipImageUrl) {
+    return <></>;
+  }
+
   return (
     <>
       <ProgressHeader progress={66} />
@@ -44,11 +49,16 @@ const Page = () => {
           </SmallButton>
         </div>
         <div className='mt-[2.4rem] flex flex-col gap-[1.6rem]'>
-          <img
-            src={seniorTipImageUrl}
-            alt='advanced'
-            className={`w-full rounded-[1.6rem] object-contain`}
-          />
+          <ImageContainer>
+            <Image
+              src={seniorTipImageUrl ?? ''}
+              alt='advanced'
+              className={`w-full rounded-[1.6rem] object-contain`}
+              width={700}
+              height={200}
+              priority
+            />
+          </ImageContainer>
         </div>
         <NavigationFooter
           prevLabel='해설'
diff --git a/apps/service/src/app/report/[publishId]/[problemId]/analysis/page.tsx b/apps/service/src/app/report/[publishId]/[problemId]/analysis/page.tsx
index e65b3402..eb9a9bfd 100644
--- a/apps/service/src/app/report/[publishId]/[problemId]/analysis/page.tsx
+++ b/apps/service/src/app/report/[publishId]/[problemId]/analysis/page.tsx
@@ -2,8 +2,9 @@
 import { useState } from 'react';
 import { useParams, useRouter } from 'next/navigation';
 import { IcRight, IcThumbtack } from '@svg';
-import { NavigationFooter, ProgressHeader } from '@components';
+import { ImageContainer, NavigationFooter, ProgressHeader } from '@components';
 import { useTrackEvent } from '@hooks';
+import Image from 'next/image';
 
 import { useReportContext } from '@/hooks/report';
 import { TabMenu } from '@/components/report';
@@ -40,6 +41,10 @@ const Page = () => {
     router.push(`/report/${publishId}/${problemId}/advanced`);
   };
 
+  if (!mainAnalysisImageUrl || !mainHandwritingExplanationImageUrl) {
+    return <></>;
+  }
+
   return (
     <>
       <ProgressHeader progress={33} />
@@ -61,16 +66,26 @@ const Page = () => {
             selectedTab={selectedTab}
             onTabChange={handleClickTab}
           />
-          <img
-            src={mainAnalysisImageUrl}
-            alt='analysis'
-            className={`w-full rounded-[1.6rem] object-contain ${selectedTab === '분석' ? 'block' : 'hidden'}`}
-          />
-          <img
-            src={mainHandwritingExplanationImageUrl}
-            alt='handWriting'
-            className={`w-full rounded-[1.6rem] object-contain ${selectedTab === '손해설' ? 'block' : 'hidden'}`}
-          />
+          <ImageContainer className={`${selectedTab === '분석' ? 'block' : 'hidden'}`}>
+            <Image
+              src={mainAnalysisImageUrl ?? ''}
+              alt='analysis'
+              className={`w-full object-contain`}
+              width={700}
+              height={200}
+              priority
+            />
+          </ImageContainer>
+          <ImageContainer className={`${selectedTab === '손해설' ? 'block' : 'hidden'}`}>
+            <Image
+              src={mainHandwritingExplanationImageUrl ?? ''}
+              alt='handWriting'
+              className={`w-full object-contain`}
+              width={700}
+              height={200}
+              priority
+            />
+          </ImageContainer>
 
           <button
             type='button'
diff --git a/apps/service/src/app/report/[publishId]/[problemId]/prescription/detail/page.tsx b/apps/service/src/app/report/[publishId]/[problemId]/prescription/detail/page.tsx
index 25011ade..36f862a0 100644
--- a/apps/service/src/app/report/[publishId]/[problemId]/prescription/detail/page.tsx
+++ b/apps/service/src/app/report/[publishId]/[problemId]/prescription/detail/page.tsx
@@ -1,7 +1,8 @@
 'use client';
 
-import { Header } from '@components';
+import { Header, ImageContainer } from '@components';
 import { useSearchParams } from 'next/navigation';
+import Image from 'next/image';
 
 import { useReportContext } from '@/hooks/report';
 
@@ -27,18 +28,38 @@ const Page = () => {
     type === 'child' ? `-${childNumber}` : ''
   }번`;
 
+  if (!problemImageUrl || !solutionImageUrls) {
+    return <></>;
+  }
+
   return (
     <>
       <Header title='진단 및 처방' iconType='back' />
       <main className='px-[2rem] py-[8rem]'>
         <h1 className='font-bold-18 text-main my-[0.8rem]'>{title}</h1>
         <div className='mt-[1.6rem] flex flex-col gap-[1.6rem] md:flex-row'>
-          <div className='w-full'>
-            <img src={problemImageUrl} alt='problem' className='w-full rounded-[1.6rem]' />
-          </div>
+          <ImageContainer className='w-full'>
+            <Image
+              src={problemImageUrl ?? ''}
+              alt='problem'
+              className='w-full'
+              width={700}
+              height={200}
+              priority
+            />
+          </ImageContainer>
           <div className='flex w-full flex-col gap-[1.6rem]'>
             {(solutionImageUrls ?? []).map((url, index) => (
-              <img key={index} src={url} alt='solution' className='w-full rounded-[1.6rem]' />
+              <ImageContainer key={index}>
+                <Image
+                  src={url ?? ''}
+                  alt='solution'
+                  className='w-full'
+                  width={700}
+                  height={200}
+                  priority
+                />
+              </ImageContainer>
             ))}
           </div>
         </div>
diff --git a/apps/service/src/app/report/[publishId]/[problemId]/reading-tip/page.tsx b/apps/service/src/app/report/[publishId]/[problemId]/reading-tip/page.tsx
index 06113cc1..d88c7615 100644
--- a/apps/service/src/app/report/[publishId]/[problemId]/reading-tip/page.tsx
+++ b/apps/service/src/app/report/[publishId]/[problemId]/reading-tip/page.tsx
@@ -1,10 +1,17 @@
 'use client';
-import { Header } from '@/components/common';
+
+import { Header, ImageContainer } from '@components';
+import Image from 'next/image';
+
 import { useReportContext } from '@/hooks/report';
 
 const Page = () => {
   const { problemNumber, mainAnalysisImageUrl, readingTipImageUrl } = useReportContext();
 
+  if (!mainAnalysisImageUrl || !readingTipImageUrl) {
+    return <></>;
+  }
+
   return (
     <>
       <Header title='문제를 읽어내려갈 때' iconType='back' />
@@ -13,19 +20,29 @@ const Page = () => {
         <div className='mt-[1.6rem] flex flex-col gap-[3.2rem] md:flex-row md:gap-[1.6rem]'>
           <div className='flex w-full flex-col gap-[1.2rem]'>
             <h2 className='font-bold-16 text-main my-[0.8rem]'>문제 분석</h2>
-            <img
-              src={mainAnalysisImageUrl}
-              alt='analysis'
-              className={`w-full rounded-[1.6rem] object-contain`}
-            />
+            <ImageContainer>
+              <Image
+                src={mainAnalysisImageUrl ?? ''}
+                alt='analysis'
+                className={`w-full object-contain`}
+                width={700}
+                height={200}
+                priority
+              />
+            </ImageContainer>
           </div>
           <div className='flex w-full flex-col gap-[1.2rem]'>
             <h2 className='font-bold-16 text-main my-[0.8rem]'>문제를 읽어내려갈 때</h2>
-            <img
-              src={readingTipImageUrl}
-              alt='reading-tip'
-              className={`w-full rounded-[1.6rem] object-contain`}
-            />
+            <ImageContainer>
+              <Image
+                src={readingTipImageUrl ?? ''}
+                alt='reading-tip'
+                className={`w-full object-contain`}
+                width={700}
+                height={200}
+                priority
+              />
+            </ImageContainer>
           </div>
         </div>
       </main>
diff --git a/apps/service/src/components/common/ImageContainer.tsx b/apps/service/src/components/common/ImageContainer.tsx
new file mode 100644
index 00000000..fd36d6a3
--- /dev/null
+++ b/apps/service/src/components/common/ImageContainer.tsx
@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+
+interface ImageContainerProps {
+  children: ReactNode;
+  className?: string;
+}
+
+const ImageContainer = ({ children, className = '' }: ImageContainerProps) => {
+  return <div className={`rounded-[1.6rem] bg-white p-[1.6rem] ${className}`}>{children}</div>;
+};
+
+export default ImageContainer;
diff --git a/apps/service/src/components/common/index.ts b/apps/service/src/components/common/index.ts
index 0250d266..9c20a662 100644
--- a/apps/service/src/components/common/index.ts
+++ b/apps/service/src/components/common/index.ts
@@ -8,6 +8,7 @@ import ProgressBar from './ProgressBar';
 import NavigationFooter from './NavigationFooter';
 import Divider from './Divider';
 import ProgressHeader from './ProgressHeader';
+import ImageContainer from './ImageContainer';
 
 export * from './Buttons';
 export * from './Inputs';
@@ -24,4 +25,5 @@ export {
   NavigationFooter,
   Divider,
   ProgressHeader,
+  ImageContainer,
 };
diff --git a/apps/service/src/components/home/ProblemCard/ProblemCard.tsx b/apps/service/src/components/home/ProblemCard/ProblemCard.tsx
index 65291b8f..04b11f1e 100644
--- a/apps/service/src/components/home/ProblemCard/ProblemCard.tsx
+++ b/apps/service/src/components/home/ProblemCard/ProblemCard.tsx
@@ -1,6 +1,7 @@
 import { Button } from '@components';
 import { useTrackEvent } from '@hooks';
 import { IcSolve } from '@svg';
+import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 
 interface Props {
@@ -30,10 +31,12 @@ const ProblemCard = ({ publishId, dateString, title, image, solvedCount }: Props
         <h3 className={`font-bold-20 text-main line-clamp-2 h-[6rem]`}>{title}</h3>
       </div>
       <div className='relative'>
-        <img
+        <Image
           src={image}
           alt='문제 이미지'
           className='h-[15.7rem] w-full rounded-[16px] object-cover object-top'
+          width={264}
+          height={157}
         />
 
         <div
diff --git a/apps/service/src/components/problem/DayProblemCard.tsx b/apps/service/src/components/problem/DayProblemCard.tsx
index ee2fabdb..922ff304 100644
--- a/apps/service/src/components/problem/DayProblemCard.tsx
+++ b/apps/service/src/components/problem/DayProblemCard.tsx
@@ -4,6 +4,7 @@ import { Button, Divider, Tag } from '@components';
 import { IcSolve } from '@svg';
 import { components } from '@schema';
 import Link from 'next/link';
+import Image from 'next/image';
 
 dayjs.locale('ko');
 
@@ -73,10 +74,12 @@ const DayProblemCard = ({ dayProblemData }: DayProblemCardProps) => {
             ))}
           </ul>
           <div className='flex flex-1 items-start justify-center'>
-            <img
-              src={mainProblemImageUrl}
+            <Image
+              src={mainProblemImageUrl ?? ''}
               alt='문제 이미지'
-              className='w-full max-w-[10rem] object-contain md:w-full md:max-w-[20rem]'
+              className='w-full max-w-[20rem] object-contain md:w-full md:max-w-[20rem]'
+              width={200}
+              height={100}
             />
           </div>
         </div>