diff --git a/apps/admin/src/components/common/Modals/ProgressModal.tsx b/apps/admin/src/components/common/Modals/ProgressModal.tsx
index 67d077fe..2de896c2 100644
--- a/apps/admin/src/components/common/Modals/ProgressModal.tsx
+++ b/apps/admin/src/components/common/Modals/ProgressModal.tsx
@@ -10,6 +10,9 @@ interface ProgressModalProps {
 
 const ProgressModal = ({ publishData, onClose }: ProgressModalProps) => {
   const [selectedProblemIndex, setSelectedProblemIndex] = useState(0);
+  const [selectedChildProblemIndex, setSelectedChildProblemIndex] = useState(0);
+  const [selectedChildPointingIndex, setSelectedChildPointingIndex] = useState(0);
+  const [selectedMainPointingIndex, setSelectedMainPointingIndex] = useState(0);
   const selectedProblem = publishData.data[selectedProblemIndex];
 
   const getProgressText = (progress: 'DONE' | 'DOING' | 'NONE') => {
@@ -19,37 +22,37 @@ const ProgressModal = ({ publishData, onClose }: ProgressModalProps) => {
       case 'DOING':
         return '미완';
       case 'NONE':
-        return '시작전';
+        return '시작 전';
       default:
-        return '시작전';
+        return '시작 전';
     }
   };
 
   const getProgressBadgeStyle = (progress: 'DONE' | 'DOING' | 'NONE') => {
     switch (progress) {
       case 'DONE':
-        return 'bg-green-100 text-green-800';
+        return 'text-green';
       case 'DOING':
-        return 'bg-yellow-100 text-yellow-800';
+        return 'text-yellow';
       case 'NONE':
-        return 'bg-gray-100 text-gray-600';
+        return 'text-gray-600';
       default:
-        return 'bg-gray-100 text-gray-600';
+        return 'text-gray-600';
     }
   };
 
   const getStatusText = (status: 'NONE' | 'CORRECT' | 'INCORRECT' | 'SEMI_CORRECT' | undefined) => {
     switch (status) {
       case 'CORRECT':
-        return '정답';
+        return 'O';
       case 'INCORRECT':
-        return '오답';
+        return 'X';
       case 'SEMI_CORRECT':
-        return '세모';
+        return '△';
       case 'NONE':
-        return '시작전';
+        return '-';
       default:
-        return '시작전';
+        return '-';
     }
   };
 
@@ -58,15 +61,15 @@ const ProgressModal = ({ publishData, onClose }: ProgressModalProps) => {
   ) => {
     switch (status) {
       case 'CORRECT':
-        return 'bg-green-100 text-green-800';
+        return 'text-green';
       case 'INCORRECT':
-        return 'bg-red-100 text-red-800';
+        return 'text-red';
       case 'SEMI_CORRECT':
-        return 'bg-yellow-100 text-yellow-800';
+        return 'text-yellow';
       case 'NONE':
-        return 'bg-gray-100 text-gray-600';
+        return 'text-gray-600';
       default:
-        return 'bg-gray-100 text-gray-600';
+        return 'text-gray-600';
     }
   };
 
@@ -74,26 +77,27 @@ const ProgressModal = ({ publishData, onClose }: ProgressModalProps) => {
     <div className='rounded-400 w-[90vw] max-w-[120rem] bg-white p-800'>
       <h2 className='font-bold-24 mb-600 text-black'>{publishData.publishAt} 진행도</h2>
       <div className='grid h-[60dvh] grid-cols-2 gap-600 overflow-y-auto'>
-        <div className='bg-lightgray100 rounded-400 flex w-full flex-col p-800'>
-          <h2 className='font-bold-20 mb-800 text-black'>숙제 완료도</h2>
+        <div className='bg-lightgray100 flex w-full flex-col rounded-[0.8rem] px-[2.4rem] py-[2rem]'>
+          <h2 className='font-16b-heading mb-[2rem] text-black'>숙제 완료도</h2>
           <div className='flex-1 overflow-y-auto'>
             {publishData.data.map((problemGroup, index) => (
               <div
                 key={problemGroup.problemId}
-                className={`rounded-200 mb-300 cursor-pointer border px-400 py-200 transition-colors ${
+                className={`rounded-200 mb-200 cursor-pointer border bg-white px-[1.2rem] py-200 transition-colors ${
                   selectedProblemIndex === index
-                    ? 'border-blue-500 bg-blue-50'
-                    : 'border-gray-200 bg-white hover:bg-gray-50'
+                    ? 'border-lightgray500'
+                    : 'border-transparent hover:bg-gray-50'
                 }`}
                 onClick={() => setSelectedProblemIndex(index)}>
                 <div className='flex w-full items-center justify-between gap-200'>
-                  <span className='font-medium-16 text-lightgray500'>{problemGroup.no}</span>
-                  <div className='font-medium-16 block flex-1 truncate text-black'>
+                  <span className='font-12m-caption text-lightgray500 bg-lightgray200 rounded-[0.4rem] px-[0.4rem] py-[0.2rem]'>
+                    {problemGroup.no}
+                  </span>
+                  <div className='font-14m-body block flex-1 truncate text-black'>
                     {problemGroup.problem.title}
                   </div>
-                  <IconButton variant='modify' />
                   <span
-                    className={`font-medium-14 whitespace-nowrap ${getProgressBadgeStyle(
+                    className={`font-14m-body whitespace-nowrap ${getProgressBadgeStyle(
                       problemGroup.progress
                     )}`}>
                     {getProgressText(problemGroup.progress)}
@@ -104,151 +108,172 @@ const ProgressModal = ({ publishData, onClose }: ProgressModalProps) => {
           </div>
         </div>
 
-        <div className='bg-lightgray100 rounded-400 flex w-full flex-col p-800'>
-          <h3 className='font-bold-18 mb-600 text-black'>{selectedProblem?.problem.title}</h3>
-          <div className='grid w-full grid-cols-2 gap-600'>
-            <div className='rounded-400 flex flex-col gap-300 bg-white p-800'>
+        <div className='bg-lightgray100 flex w-full flex-col rounded-[0.8rem] px-[2.4rem] py-[2rem]'>
+          <h3 className='font-16b-heading mb-600 text-black'>{selectedProblem?.problem.title}</h3>
+          <div className='flex flex-col gap-200'>
+            <div className='rounded-200 flex flex-col gap-300 bg-white p-400'>
               <div className='flex items-center justify-between'>
-                <h4 className='font-medium-16 text-black'>메인 문제</h4>
+                <div className='flex items-center gap-300'>
+                  <h4 className='font-bold-16 text-black'>새끼 문제</h4>
+                  <div className='flex items-center gap-100'>
+                    {selectedProblem?.childProblems.map((childProblem, index) => (
+                      <button
+                        key={childProblem.id}
+                        onClick={() => setSelectedChildProblemIndex(index)}
+                        className={`font-medium-14 h-[2.4rem] w-[2.4rem] rounded-[0.4rem] ${
+                          selectedChildProblemIndex === index
+                            ? 'bg-midgray200 text-white'
+                            : 'bg-lightgray300 text-lightgray500'
+                        }`}>
+                        {index + 1}
+                      </button>
+                    ))}
+                  </div>
+                </div>
                 <div
-                  className={`font-medium-12 mr-200 rounded-full px-200 py-100 ${getStatusBadgeStyle(
-                    selectedProblem?.problem.progress
+                  className={`font-18m-body mr-200 rounded-full px-200 py-100 ${getStatusBadgeStyle(
+                    selectedProblem?.childProblems[selectedChildProblemIndex]?.progress
                   )}`}>
-                  {getStatusText(selectedProblem?.problem.progress)}
+                  {getStatusText(
+                    selectedProblem?.childProblems[selectedChildProblemIndex]?.progress
+                  )}
                 </div>
               </div>
-              <div className='flex items-center'>
-                <img
-                  src={
-                    selectedProblem?.problem.problemContent.blocks.find(
-                      (block) => block.type === 'IMAGE'
-                    )?.data ?? '/images/image-placeholder.svg'
-                  }
-                  alt='문제 이미지'
-                  className='w-full object-cover'
-                />
+              {selectedProblem?.childProblems && selectedProblem?.childProblems.length > 0 ? (
+                <p className='font-medium-14 line-clamp-2 text-black'>
+                  {selectedProblem?.childProblems[
+                    selectedChildProblemIndex
+                  ]?.problemContent.blocks.map((block) => {
+                    if (block.type === 'TEXT') {
+                      return block.data;
+                    }
+                    return null;
+                  })}
+                </p>
+              ) : (
+                <p className='font-medium-14 text-lightgray500 text-center'>새끼 문제가 없어요</p>
+              )}
+            </div>
+
+            <div className='rounded-200 flex flex-col gap-300 bg-white p-400'>
+              <div className='flex items-center justify-between'>
+                <div className='flex items-center gap-300'>
+                  <h4 className='font-bold-16 text-black'>새끼 문제 포인팅</h4>
+                  <div className='flex items-center gap-100'>
+                    {selectedProblem?.childProblems[selectedChildProblemIndex]?.pointings.map(
+                      (pointing, index) => (
+                        <button
+                          key={pointing.id}
+                          onClick={() => setSelectedChildPointingIndex(index)}
+                          className={`font-medium-14 h-[2.4rem] w-[2.4rem] rounded-[0.4rem] ${
+                            selectedChildPointingIndex === index
+                              ? 'bg-midgray200 text-white'
+                              : 'bg-lightgray300 text-lightgray500'
+                          }`}>
+                          {index + 1}
+                        </button>
+                      )
+                    )}
+                  </div>
+                </div>
               </div>
+              {selectedProblem?.childProblems && selectedProblem?.childProblems.length > 0 ? (
+                <div className='flex items-center justify-between'>
+                  <p className='font-medium-14 line-clamp-2 text-black'>
+                    {selectedProblem?.childProblems[selectedChildProblemIndex]?.pointings[
+                      selectedChildPointingIndex
+                    ]?.questionContent.blocks.map((block) => {
+                      if (block.type === 'TEXT') {
+                        return block.data;
+                      }
+                      return null;
+                    })}
+                  </p>
+                  <div
+                    className={`font-18m-body mr-200 rounded-full px-200 py-100 ${
+                      selectedProblem?.childProblems[selectedChildProblemIndex]?.pointings[
+                        selectedChildPointingIndex
+                      ]?.isUnderstood
+                        ? 'text-green'
+                        : 'text-red'
+                    }`}>
+                    {selectedProblem?.childProblems[selectedChildProblemIndex]?.pointings[
+                      selectedChildPointingIndex
+                    ]?.isUnderstood
+                      ? 'O'
+                      : 'X'}
+                  </div>
+                </div>
+              ) : (
+                <p className='font-medium-14 text-lightgray500 text-center'>새끼 문제가 없어요</p>
+              )}
             </div>
-            <div className='rounded-400 flex flex-col gap-300 bg-white p-800'>
+
+            <hr className='border-lightgray300' />
+
+            <div className='rounded-200 flex flex-col gap-300 bg-white p-400'>
               <div className='flex items-center justify-between'>
-                <h4 className='font-medium-16 text-black'>새끼 문제</h4>
+                <h4 className='font-bold-16 text-black'>메인 문제</h4>
                 <div
-                  className={`font-medium-12 mr-200 rounded-full px-200 py-100 ${getStatusBadgeStyle(
-                    selectedProblem?.childProblems[0]?.progress
+                  className={`font-18m-body mr-200 rounded-full px-200 py-100 ${getStatusBadgeStyle(
+                    selectedProblem?.problem.progress
                   )}`}>
-                  {getStatusText(selectedProblem?.childProblems[0]?.progress)}
+                  {getStatusText(selectedProblem?.problem.progress)}
                 </div>
               </div>
-              <div className='flex items-center'>
-                <img
-                  src={
-                    selectedProblem?.childProblems[0]?.problemContent.blocks.find(
-                      (block) => block.type === 'IMAGE'
-                    )?.data ?? '/images/image-placeholder.svg'
+              <p className='font-medium-14 line-clamp-2 text-black'>
+                {selectedProblem?.problem.problemContent.blocks.map((block) => {
+                  if (block.type === 'TEXT') {
+                    return block.data;
                   }
-                  alt='문제 이미지'
-                  className='w-full object-cover'
-                />
-              </div>
+                  return null;
+                })}
+              </p>
             </div>
 
-            <div className='rounded-400 col-span-2 space-y-400 bg-white p-800'>
-              <div className='mb-600'>
-                <h4 className='font-medium-16 text-black'>새끼 문제 포인팅</h4>
-              </div>
-
-              {selectedProblem?.childProblems && selectedProblem.childProblems.length > 0 ? (
-                <div className='space-y-[1.6rem]'>
-                  {selectedProblem.childProblems.map((childProblem, index) => (
-                    <div key={childProblem.id} className='rounded-200 border border-gray-200 p-400'>
-                      <div className='mb-300 flex items-center justify-between'>
-                        <span className='font-medium-14 text-gray-800'>
-                          새끼 문제 {childProblem.no}
-                        </span>
-                        <div className='flex items-center'>
-                          <div
-                            className={`font-medium-12 mr-200 rounded-full px-200 py-100 ${getStatusBadgeStyle(
-                              childProblem.progress
-                            )}`}>
-                            {getStatusText(childProblem.progress)}
-                          </div>
-                        </div>
-                      </div>
-
-                      {childProblem.pointings && childProblem.pointings.length > 0 && (
-                        <div className='space-y-200'>
-                          {childProblem.pointings.map((pointing) => (
-                            <div key={pointing.id} className='bg-lightgray100 rounded-200 p-300'>
-                              <div className='flex items-center justify-between'>
-                                <span className='font-medium-12 text-gray-600'>
-                                  {pointing.isUnderstood ? 'O' : 'X'}
-                                </span>
-                              </div>
-                              <div className='font-medium-12 mt-200 text-gray-800'>
-                                Question
-                                <br />
-                                {pointing.questionContent.blocks.map((block) => {
-                                  if (block.type === 'TEXT') {
-                                    return block.data;
-                                  }
-                                  return null;
-                                })}
-                                <br />
-                                Comments
-                                <br />
-                                {pointing.commentContent.blocks.map((block) => {
-                                  if (block.type === 'TEXT') {
-                                    return block.data;
-                                  }
-                                  return null;
-                                })}
-                              </div>
-                            </div>
-                          ))}
-                        </div>
-                      )}
-                    </div>
-                  ))}
-                </div>
-              ) : (
-                <div className='flex h-[20rem] items-center justify-center'>
-                  <p className='font-medium-14 text-gray-500'>새끼 문제가 없어요.</p>
+            <div className='rounded-200 flex flex-col gap-300 bg-white p-400'>
+              <div className='flex items-center justify-between'>
+                <div className='flex items-center gap-300'>
+                  <h4 className='font-bold-16 text-black'>메인 문제 포인팅</h4>
+                  <div className='flex items-center gap-100'>
+                    {selectedProblem?.problem.pointings.map((pointing, index) => (
+                      <button
+                        key={pointing.id}
+                        onClick={() => setSelectedMainPointingIndex(index)}
+                        className={`font-medium-14 h-[2.4rem] w-[2.4rem] rounded-[0.4rem] ${
+                          selectedMainPointingIndex === index
+                            ? 'bg-midgray200 text-white'
+                            : 'bg-lightgray300 text-lightgray500'
+                        }`}>
+                        {index + 1}
+                      </button>
+                    ))}
+                  </div>
                 </div>
-              )}
-            </div>
-            {selectedProblem?.problem.pointings && selectedProblem.problem.pointings.length > 0 && (
-              <div className='rounded-400 col-span-2 space-y-400 bg-white p-800'>
-                <div className='mb-600'>
-                  <h4 className='font-medium-16 text-black'>메인 문제 포인팅</h4>
+              </div>
+              <div className='flex items-center justify-between'>
+                <p className='font-medium-14 line-clamp-2 text-black'>
+                  {selectedProblem?.problem.pointings[
+                    selectedMainPointingIndex
+                  ]?.questionContent.blocks.map((block) => {
+                    if (block.type === 'TEXT') {
+                      return block.data;
+                    }
+                    return null;
+                  })}
+                </p>
+                <div
+                  className={`font-18m-body mr-200 rounded-full px-200 py-100 ${
+                    selectedProblem?.problem.pointings[selectedMainPointingIndex]?.isUnderstood
+                      ? 'text-green'
+                      : 'text-red'
+                  }`}>
+                  {selectedProblem?.problem.pointings[selectedMainPointingIndex]?.isUnderstood
+                    ? 'O'
+                    : 'X'}
                 </div>
-                {selectedProblem.problem.pointings.map((pointing, index) => (
-                  <div key={pointing.id} className='bg-lightgray100 rounded-200 p-300'>
-                    <div className='flex items-center justify-between'>
-                      <span className='font-medium-12 text-gray-600'>
-                        {pointing.isUnderstood ? 'O' : 'X'}
-                      </span>
-                    </div>
-                    <div className='font-medium-12 text-gray-800'>
-                      Question <br />
-                      {pointing.questionContent.blocks.map((block) => {
-                        if (block.type === 'TEXT') {
-                          return block.data;
-                        }
-                        return null;
-                      })}
-                      <br />
-                      Comments <br />
-                      {pointing.commentContent.blocks.map((block) => {
-                        if (block.type === 'TEXT') {
-                          return block.data;
-                        }
-                        return null;
-                      })}
-                    </div>
-                  </div>
-                ))}
               </div>
-            )}
+            </div>
           </div>
         </div>
       </div>
diff --git a/apps/admin/src/types/api/schema.d.ts b/apps/admin/src/types/api/schema.d.ts
index 04a2b1d7..b5683767 100644
--- a/apps/admin/src/types/api/schema.d.ts
+++ b/apps/admin/src/types/api/schema.d.ts
@@ -1447,12 +1447,13 @@ export interface components {
     };
     ContentBlockUpdateRequest: {
       /** Format: int64 */
-      id: number;
+      id?: number;
       /** Format: int32 */
       rank: number;
       /** @enum {string} */
       type?: 'TEXT' | 'IMAGE';
       data?: string;
+      style?: string;
     };
     ContentUpdateRequest: {
       /** Format: int64 */
@@ -2006,7 +2007,7 @@ export interface components {
       total: number;
       data: components['schemas']['StudentResp'][];
     };
-    PageRespNotListQnAGroupByWeekResp: {
+    '5j4k1Ye12dXiFMLSJpD7gFrLbv4QcUrRoKHsgo32kRFr': {
       /** Format: int32 */
       page: number;
       /** Format: int32 */
@@ -3035,7 +3036,7 @@ export interface operations {
           [name: string]: unknown;
         };
         content: {
-          '*/*': components['schemas']['PageRespNotListQnAGroupByWeekResp'];
+          '*/*': components['schemas']['5j4k1Ye12dXiFMLSJpD7gFrLbv4QcUrRoKHsgo32kRFr'];
         };
       };
     };
@@ -3942,7 +3943,7 @@ export interface operations {
           [name: string]: unknown;
         };
         content: {
-          '*/*': components['schemas']['PageRespNotListQnAGroupByWeekResp'];
+          '*/*': components['schemas']['5j4k1Ye12dXiFMLSJpD7gFrLbv4QcUrRoKHsgo32kRFr'];
         };
       };
     };