diff --git a/backend/src/main/resources/config b/backend/src/main/resources/config
index 67e2f74c5..def24d1c0 160000
--- a/backend/src/main/resources/config
+++ b/backend/src/main/resources/config
@@ -1 +1 @@
-Subproject commit 67e2f74c50936b5ae7957abea404716627245d13
+Subproject commit def24d1c08db6f212881692268cf7023c9346ed9
diff --git a/frontend/src/@types/roomInfo.ts b/frontend/src/@types/roomInfo.ts
index f658ba474..d2be31de3 100644
--- a/frontend/src/@types/roomInfo.ts
+++ b/frontend/src/@types/roomInfo.ts
@@ -34,7 +34,8 @@ export interface SubmitRoomInfo extends BaseRoomInfo {
 export interface RoomInfo extends BaseRoomInfo {
   id: number;
   manager: string;
-  currentParticipants: number;
+  reviewerCount: number;
+  bothCount: number;
   roomStatus: RoomStatus;
   participationStatus: ParticipationStatus;
   memberRole: Role;
diff --git a/frontend/src/assets/index.ts b/frontend/src/assets/index.ts
index d7fc49472..aecef3c92 100644
--- a/frontend/src/assets/index.ts
+++ b/frontend/src/assets/index.ts
@@ -28,7 +28,8 @@ export { default as puzzle_with_people_color } from "@/assets/intro/puzzle_with_
 export { default as step1_pic } from "@/assets/intro/step1_pic.webp";
 export { default as step2_pic } from "@/assets/intro/step2_pic.webp";
 export { default as step3_pic } from "@/assets/intro/step3_pic.webp";
-export { default as step4_pic } from "@/assets/intro/step4_pic.webp";
+export { default as step41_pic } from "@/assets/intro/step41_pic.webp";
+export { default as step42_pic } from "@/assets/intro/step42_pic.webp";
 export { default as step5_pic } from "@/assets/intro/step5_pic.webp";
 
 export { default as mainLogo } from "@/assets/coreaLogo/coreaMainLogo.svg";
diff --git a/frontend/src/assets/intro/step3_pic.webp b/frontend/src/assets/intro/step3_pic.webp
index 0a8bf4974..c3c447a66 100644
Binary files a/frontend/src/assets/intro/step3_pic.webp and b/frontend/src/assets/intro/step3_pic.webp differ
diff --git a/frontend/src/assets/intro/step41_pic.webp b/frontend/src/assets/intro/step41_pic.webp
new file mode 100644
index 000000000..00efe2b30
Binary files /dev/null and b/frontend/src/assets/intro/step41_pic.webp differ
diff --git a/frontend/src/assets/intro/step42_pic.webp b/frontend/src/assets/intro/step42_pic.webp
new file mode 100644
index 000000000..7cd218e80
Binary files /dev/null and b/frontend/src/assets/intro/step42_pic.webp differ
diff --git a/frontend/src/assets/intro/step4_pic.webp b/frontend/src/assets/intro/step4_pic.webp
deleted file mode 100644
index fc45d1503..000000000
Binary files a/frontend/src/assets/intro/step4_pic.webp and /dev/null differ
diff --git a/frontend/src/assets/intro/step5_pic.webp b/frontend/src/assets/intro/step5_pic.webp
index 48e3a17b2..52647dd3d 100644
Binary files a/frontend/src/assets/intro/step5_pic.webp and b/frontend/src/assets/intro/step5_pic.webp differ
diff --git a/frontend/src/components/common/carousel/Carousel.tsx b/frontend/src/components/common/carousel/Carousel.tsx
index a1e8e49c5..37d432f55 100644
--- a/frontend/src/components/common/carousel/Carousel.tsx
+++ b/frontend/src/components/common/carousel/Carousel.tsx
@@ -1,4 +1,4 @@
-import React, { Children, ReactNode, isValidElement, useEffect, useState } from "react";
+import React, { Children, ReactNode, isValidElement, useState } from "react";
 import * as S from "@/components/common/carousel/Carousel.style";
 import Icon from "@/components/common/icon/Icon";
 
@@ -18,6 +18,11 @@ const Carousel = ({ children }: CarouselProps) => {
 
   return (
     <S.CarouselContainer>
+      <S.CarouselWrapper $currentIndex={currentIndex}>
+        {validChildren.map((child, index) => (
+          <S.CarouselItem key={index}>{child}</S.CarouselItem>
+        ))}
+      </S.CarouselWrapper>
       <S.CarouselLeftButton
         onClick={prevSlide}
         disabled={currentIndex === 0}
@@ -34,11 +39,6 @@ const Carousel = ({ children }: CarouselProps) => {
       >
         <Icon kind="arrowRight" size="3rem" />
       </S.CarouselRightButton>
-      <S.CarouselWrapper $currentIndex={currentIndex}>
-        {validChildren.map((child, index) => (
-          <S.CarouselItem key={index}>{child}</S.CarouselItem>
-        ))}
-      </S.CarouselWrapper>
     </S.CarouselContainer>
   );
 };
diff --git a/frontend/src/components/feedback/feedbackCard/FeedbackCard.style.ts b/frontend/src/components/feedback/feedbackCard/FeedbackCard.style.ts
index bf0b0d152..50b64d9ea 100644
--- a/frontend/src/components/feedback/feedbackCard/FeedbackCard.style.ts
+++ b/frontend/src/components/feedback/feedbackCard/FeedbackCard.style.ts
@@ -9,7 +9,7 @@ export const FeedbackCardContainer = styled.div<{ $isTypeDevelop: boolean }>`
   gap: 3rem;
 
   width: 40%;
-  height: 600px;
+  height: 700px;
   padding: 1rem;
 
   border: 3px solid
@@ -106,8 +106,6 @@ export const FeedbackDetailContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 1.6rem;
-
-  height: 200px;
 `;
 
 export const FeedbackDetail = styled.p`
diff --git a/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx b/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx
index 3cc737daf..32b783eee 100644
--- a/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx
+++ b/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx
@@ -66,8 +66,8 @@ const FeedbackCard = ({
       <S.FeedbackDetailContainer>
         <S.FeedbackTitle>세부 피드백</S.FeedbackTitle>
         <Textarea
-          rows={5}
-          maxLength={512}
+          rows={10}
+          maxLength={2000}
           showCharCount={true}
           value={feedbackCardData.feedbackText.length ? feedbackCardData.feedbackText : "없음"}
           readOnly
diff --git a/frontend/src/components/feedback/feedbackForm/FeedbackForm.style.ts b/frontend/src/components/feedback/feedbackForm/FeedbackForm.style.ts
index e1e29cf3f..778a8b412 100644
--- a/frontend/src/components/feedback/feedbackForm/FeedbackForm.style.ts
+++ b/frontend/src/components/feedback/feedbackForm/FeedbackForm.style.ts
@@ -16,18 +16,24 @@ export const ItemContainer = styled.fieldset`
   gap: 1.6rem;
 `;
 
-export const ModalQuestion = styled.legend<ModalQuestionProps>`
+export const QuestionContainer = styled.div`
   display: flex;
   flex-wrap: wrap;
   gap: 0.4rem;
   align-items: center;
+`;
 
+export const ModalQuestion = styled.legend<ModalQuestionProps>`
   font: ${({ theme }) => theme.TEXT.small_bold};
   color: ${({ theme }) => theme.COLOR.grey4};
 `;
 
 export const Required = styled.span`
   padding-top: 0.5rem;
-  font: ${({ theme }) => theme.TEXT.semiSmall};
+  font: ${({ theme }) => theme.TEXT.xSmall};
   color: ${({ theme }) => theme.COLOR.error};
 `;
+
+export const TextareaWrapper = styled.div`
+  margin-top: 1.2rem;
+`;
diff --git a/frontend/src/components/feedback/feedbackForm/RevieweeFeedbackForm.tsx b/frontend/src/components/feedback/feedbackForm/RevieweeFeedbackForm.tsx
index f3204ccba..80a52ec81 100644
--- a/frontend/src/components/feedback/feedbackForm/RevieweeFeedbackForm.tsx
+++ b/frontend/src/components/feedback/feedbackForm/RevieweeFeedbackForm.tsx
@@ -31,8 +31,10 @@ const RevieweeFeedbackForm = ({ formState, onChange, modalType }: RevieweeFeedba
   return (
     <S.FeedbackFormContainer>
       <S.ItemContainer>
-        <S.ModalQuestion>리뷰이의 개발 역량 향상을 위해 코드를 평가 해주세요.</S.ModalQuestion>
-        <S.Required>*필수입력</S.Required>
+        <S.QuestionContainer>
+          <S.ModalQuestion>리뷰이의 개발 역량 향상을 위해 코드를 평가 해주세요.</S.ModalQuestion>
+          <S.Required>*필수입력</S.Required>
+        </S.QuestionContainer>
         <EvaluationPointBar
           initialOptionId={formState.evaluationPoint}
           onChange={(value) => onChange("evaluationPoint", value)}
@@ -41,8 +43,10 @@ const RevieweeFeedbackForm = ({ formState, onChange, modalType }: RevieweeFeedba
       </S.ItemContainer>
 
       <S.ItemContainer>
-        <S.ModalQuestion>위와 같이 선택한 이유를 알려주세요. (1개 이상 선택)</S.ModalQuestion>
-        <S.Required>*필수입력</S.Required>
+        <S.QuestionContainer>
+          <S.ModalQuestion>위와 같이 선택한 이유를 알려주세요. (1개 이상 선택)</S.ModalQuestion>
+          <S.Required>*필수입력</S.Required>
+        </S.QuestionContainer>
         <KeywordOptionButton
           selectedOptions={formState.feedbackKeywords}
           onChange={(value) => onChange("feedbackKeywords", value)}
@@ -53,8 +57,10 @@ const RevieweeFeedbackForm = ({ formState, onChange, modalType }: RevieweeFeedba
       </S.ItemContainer>
 
       <S.ItemContainer>
-        <S.ModalQuestion>리뷰이의 코드를 추천하시나요? (비공개 항목)</S.ModalQuestion>
-        <S.Required>*필수입력</S.Required>
+        <S.QuestionContainer>
+          <S.ModalQuestion>리뷰이의 코드를 추천하시나요? (비공개 항목)</S.ModalQuestion>
+          <S.Required>*필수입력</S.Required>
+        </S.QuestionContainer>
         <RecommendationPointBar
           initialOptionId={formState.recommendationPoint}
           onChange={(value) => onChange("recommendationPoint", value)}
@@ -64,19 +70,21 @@ const RevieweeFeedbackForm = ({ formState, onChange, modalType }: RevieweeFeedba
 
       <S.ItemContainer>
         <S.ModalQuestion>추가적으로 하고 싶은 피드백이 있다면 남겨 주세요.</S.ModalQuestion>
-        <Textarea
-          rows={8}
-          showCharCount={true}
-          maxLength={512}
-          placeholder={
-            modalType === "view"
-              ? "없음"
-              : "상대 리뷰이의 개발 역량 향상을 위해 피드백을 남겨주세요."
-          }
-          value={formState.feedbackText}
-          onChange={(e) => onChange("feedbackText", e.target.value)}
-          readOnly={modalType === "view"}
-        />
+        <S.TextareaWrapper>
+          <Textarea
+            rows={10}
+            showCharCount={true}
+            maxLength={2000}
+            placeholder={
+              modalType === "view"
+                ? "없음"
+                : "상대 리뷰이의 개발 역량 향상을 위해 피드백을 남겨주세요."
+            }
+            value={formState.feedbackText}
+            onChange={(e) => onChange("feedbackText", e.target.value)}
+            readOnly={modalType === "view"}
+          />
+        </S.TextareaWrapper>
       </S.ItemContainer>
     </S.FeedbackFormContainer>
   );
diff --git a/frontend/src/components/feedback/feedbackForm/ReviewerFeedbackForm.tsx b/frontend/src/components/feedback/feedbackForm/ReviewerFeedbackForm.tsx
index 80bb29b41..27056308b 100644
--- a/frontend/src/components/feedback/feedbackForm/ReviewerFeedbackForm.tsx
+++ b/frontend/src/components/feedback/feedbackForm/ReviewerFeedbackForm.tsx
@@ -31,8 +31,12 @@ const ReviewerFeedbackForm = ({ formState, onChange, modalType }: ReviewerFeedba
   return (
     <S.FeedbackFormContainer>
       <S.ItemContainer>
-        <S.ModalQuestion>리뷰어의 소프트 스킬 역량 향상을 위해 피드백을 해주세요.</S.ModalQuestion>
-        <S.Required>*필수입력</S.Required>
+        <S.QuestionContainer>
+          <S.ModalQuestion>
+            리뷰어의 소프트 스킬 역량 향상을 위해 피드백을 해주세요.
+          </S.ModalQuestion>
+          <S.Required>*필수입력</S.Required>
+        </S.QuestionContainer>
         <EvaluationPointBar
           initialOptionId={formState.evaluationPoint}
           onChange={(value) => onChange("evaluationPoint", value)}
@@ -42,8 +46,10 @@ const ReviewerFeedbackForm = ({ formState, onChange, modalType }: ReviewerFeedba
       </S.ItemContainer>
 
       <S.ItemContainer>
-        <S.ModalQuestion>위와 같이 선택한 이유를 알려주세요. (1개 이상 선택)</S.ModalQuestion>
-        <S.Required>*필수입력</S.Required>
+        <S.QuestionContainer>
+          <S.ModalQuestion>위와 같이 선택한 이유를 알려주세요. (1개 이상 선택)</S.ModalQuestion>
+          <S.Required>*필수입력</S.Required>
+        </S.QuestionContainer>
         <KeywordOptionButton
           selectedOptions={formState.feedbackKeywords}
           onChange={(value) => onChange("feedbackKeywords", value)}
@@ -56,19 +62,21 @@ const ReviewerFeedbackForm = ({ formState, onChange, modalType }: ReviewerFeedba
 
       <S.ItemContainer>
         <S.ModalQuestion>추가적으로 하고 싶은 피드백이 있다면 남겨 주세요.</S.ModalQuestion>
-        <Textarea
-          rows={8}
-          showCharCount={true}
-          maxLength={512}
-          placeholder={
-            modalType === "view"
-              ? "없음"
-              : "상대 리뷰어의 소프트 스킬 향상을 위해 피드백을 남겨주세요."
-          }
-          value={formState.feedbackText}
-          onChange={(e) => onChange("feedbackText", e.target.value)}
-          readOnly={modalType === "view"}
-        />
+        <S.TextareaWrapper>
+          <Textarea
+            rows={10}
+            showCharCount={true}
+            maxLength={2000}
+            placeholder={
+              modalType === "view"
+                ? "없음"
+                : "상대 리뷰어의 소프트 스킬 향상을 위해 피드백을 남겨주세요."
+            }
+            value={formState.feedbackText}
+            onChange={(e) => onChange("feedbackText", e.target.value)}
+            readOnly={modalType === "view"}
+          />
+        </S.TextareaWrapper>
       </S.ItemContainer>
     </S.FeedbackFormContainer>
   );
diff --git a/frontend/src/components/intro/IntroNavigationBar.style.ts b/frontend/src/components/intro/IntroNavigationBar.style.ts
index 2c35e0168..f3b85c5e4 100644
--- a/frontend/src/components/intro/IntroNavigationBar.style.ts
+++ b/frontend/src/components/intro/IntroNavigationBar.style.ts
@@ -4,7 +4,7 @@ import media from "@/styles/media";
 export const NavContainer = styled.div`
   position: fixed;
   top: 50%;
-  right: 12%;
+  right: calc((100vw - 1000px) / 2 - 10px);
   transform: translateY(-50%);
 
   display: flex;
@@ -12,8 +12,12 @@ export const NavContainer = styled.div`
   gap: 10px;
   align-items: center;
 
+  @media (width >= 1300px) {
+    right: calc((100vw - 1200px) / 2 - 10px);
+  }
+
   ${media.medium`
-    right: 5%;
+    right: calc((100vw - 580px) / 2 - 10px);  
   `}
 
   ${media.small`
diff --git a/frontend/src/components/main/banner/Banner.style.ts b/frontend/src/components/main/banner/Banner.style.ts
index 6168cfa2c..d3ca343b7 100644
--- a/frontend/src/components/main/banner/Banner.style.ts
+++ b/frontend/src/components/main/banner/Banner.style.ts
@@ -52,7 +52,7 @@ export const BannerTextContainer = styled.div`
   margin-top: 65px;
 `;
 
-export const BannerText = styled.p`
+export const BannerText = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.tsx b/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.tsx
index d2b012e29..85a41fa19 100644
--- a/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.tsx
+++ b/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.tsx
@@ -166,7 +166,7 @@ const MyReviewee = ({ roomInfo }: MyReviewerProps) => {
           </S.MyRevieweeWrapper>
         ))}
       </S.MyRevieweeContainer>
-      <S.ExtraInformation>※선호하는 리뷰이 인원 수보다 적게 매칭될 수 있습니다.</S.ExtraInformation>
+      <S.ExtraInformation>※선호하는 리뷰이 인원수보다 적게 매칭될 수 있습니다.</S.ExtraInformation>
     </>
   );
 };
diff --git a/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.style.ts b/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.style.ts
index 3935b7beb..6e1e697f0 100644
--- a/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.style.ts
+++ b/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.style.ts
@@ -115,3 +115,10 @@ export const GuidanceWrapper = styled.div`
 export const Character = styled.img`
   width: 150px;
 `;
+
+export const ExtraInformation = styled.span`
+  display: flex;
+  justify-content: flex-end;
+  font: ${({ theme }) => theme.TEXT.xSmall};
+  color: ${({ theme }) => theme.COLOR.grey2};
+`;
diff --git a/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx b/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx
index 2697129d9..30c97100b 100644
--- a/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx
+++ b/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx
@@ -120,7 +120,6 @@ const MyReviewer = ({ roomInfo }: MyReviewerProps) => {
           buttonText={feedbackTypeResult.buttonText}
         />
       )}
-
       <S.MyReviewerContainer>
         <S.MyReviewerWrapper>
           <S.MyReviewerTitle>아이디</S.MyReviewerTitle>
@@ -155,6 +154,7 @@ const MyReviewer = ({ roomInfo }: MyReviewerProps) => {
           );
         })}
       </S.MyReviewerContainer>
+      <S.ExtraInformation>※최소 상호 리뷰 인원수보다 많게 매칭될 수 있습니다.</S.ExtraInformation>
     </>
   );
 };
diff --git a/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.test.tsx b/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.test.tsx
index e0be8e542..86c9bd767 100644
--- a/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.test.tsx
+++ b/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.test.tsx
@@ -9,7 +9,8 @@ import { theme } from "@/styles/theme";
 const mockBaseRoomInfo: RoomInfo = {
   id: 1,
   manager: "darr",
-  currentParticipants: 5,
+  reviewerCount: 2,
+  bothCount: 3,
   roomStatus: "OPEN",
   participationStatus: "PARTICIPATED",
   memberRole: "BOTH",
diff --git a/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.tsx b/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.tsx
index 0ddcbf452..bf126475a 100644
--- a/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.tsx
+++ b/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.tsx
@@ -59,8 +59,18 @@ const RoomInfoCard = ({ roomInfo }: { roomInfo: RoomInfo }) => {
           </S.RoomContentSmall>
           <S.RoomContentSmall>
             <Icon kind="person" size="1.8rem" color={theme.COLOR.grey4} />
-            <span>현재 참여 인원 : </span>
-            {roomInfo.currentParticipants} / {roomInfo.limitedParticipants}명
+            <span>총 인원 : </span>
+            {roomInfo.reviewerCount + roomInfo.bothCount} / {roomInfo.limitedParticipants}명
+          </S.RoomContentSmall>
+          <S.RoomContentSmall>
+            <Icon kind="person" size="1.8rem" color={theme.COLOR.grey4} />
+            <span>리뷰어 인원 : </span>
+            {roomInfo.reviewerCount} / {roomInfo.reviewerCount + roomInfo.bothCount}명
+          </S.RoomContentSmall>
+          <S.RoomContentSmall>
+            <Icon kind="person" size="1.8rem" color={theme.COLOR.grey4} />
+            <span>참여자 인원 : </span>
+            {roomInfo.bothCount} / {roomInfo.reviewerCount + roomInfo.bothCount}명
           </S.RoomContentSmall>
           <S.RoomContentSmall>
             <Icon kind="person" size="1.8rem" color={theme.COLOR.grey4} />
diff --git a/frontend/src/components/shared/roomCard/RoomCard.style.ts b/frontend/src/components/shared/roomCard/RoomCard.style.ts
index c0958d29c..4206437d0 100644
--- a/frontend/src/components/shared/roomCard/RoomCard.style.ts
+++ b/frontend/src/components/shared/roomCard/RoomCard.style.ts
@@ -114,7 +114,8 @@ export const NoKeywordText = styled.span`
 
 export const EtcContainer = styled.div`
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
+  gap: 0.6rem;
 `;
 
 export const JoinMember = styled.span`
@@ -150,8 +151,3 @@ export const LabelWrapper = styled.div`
   gap: 0.5rem;
   height: 53px;
 `;
-
-export const EtcWrapper = styled.div`
-  display: flex;
-  justify-content: space-between;
-`;
diff --git a/frontend/src/components/shared/roomCard/RoomCard.test.tsx b/frontend/src/components/shared/roomCard/RoomCard.test.tsx
index d33e868c0..36b255be9 100644
--- a/frontend/src/components/shared/roomCard/RoomCard.test.tsx
+++ b/frontend/src/components/shared/roomCard/RoomCard.test.tsx
@@ -8,7 +8,8 @@ import { theme } from "@/styles/theme";
 const mockBaseRoomInfo: RoomInfo = {
   id: 1,
   manager: "darr",
-  currentParticipants: 5,
+  reviewerCount: 2,
+  bothCount: 3,
   roomStatus: "OPEN",
   participationStatus: "PARTICIPATED",
   memberRole: "BOTH",
diff --git a/frontend/src/components/shared/roomCard/RoomCard.tsx b/frontend/src/components/shared/roomCard/RoomCard.tsx
index f078bd07f..7e5e0b6a7 100644
--- a/frontend/src/components/shared/roomCard/RoomCard.tsx
+++ b/frontend/src/components/shared/roomCard/RoomCard.tsx
@@ -94,15 +94,12 @@ const RoomCard = React.memo(({ roomInfo }: RoomCardProps) => {
 
           <S.EtcContainer>
             <S.LabelWrapper>{DisplayLabel(roomInfo)}</S.LabelWrapper>
-          </S.EtcContainer>
-
-          <S.EtcWrapper>
             <S.DeadLineText>{DisplayLeftTime(roomInfo)}</S.DeadLineText>
             <S.JoinMember>
               <Icon kind="person" size="1.8rem" color={theme.COLOR.grey4} />
-              {roomInfo.currentParticipants}/{roomInfo.limitedParticipants}
+              {roomInfo.reviewerCount + roomInfo.bothCount} / {roomInfo.limitedParticipants}
             </S.JoinMember>
-          </S.EtcWrapper>
+          </S.EtcContainer>
         </S.RoomInformation>
       </S.RoomCardContainer>
     </>
diff --git a/frontend/src/components/shared/roomCardModal/RoomCardModal.tsx b/frontend/src/components/shared/roomCardModal/RoomCardModal.tsx
index 9cd6cdaac..923e80478 100644
--- a/frontend/src/components/shared/roomCardModal/RoomCardModal.tsx
+++ b/frontend/src/components/shared/roomCardModal/RoomCardModal.tsx
@@ -79,11 +79,25 @@ const RoomCardModal = ({ isOpen, onClose, roomInfo }: RoomCardModalProps) => {
             <S.ScreenReader>{`최소 상호 리뷰 인원 ${roomInfo.matchingSize}명`}</S.ScreenReader>
           </S.InfoRow>
           <S.InfoRow>
-            <S.InfoTitle aria-hidden>미션 참여 인원</S.InfoTitle>
+            <S.InfoTitle aria-hidden>총 인원</S.InfoTitle>
             <S.InfoContent aria-hidden>
-              {roomInfo.currentParticipants}명 / {roomInfo.limitedParticipants}명
+              {roomInfo.reviewerCount + roomInfo.bothCount} / {roomInfo.limitedParticipants}명
             </S.InfoContent>
-            <S.ScreenReader>{`미션 참여 인원 최대 ${roomInfo.limitedParticipants}명 현재 ${roomInfo.currentParticipants}명 `}</S.ScreenReader>
+            <S.ScreenReader>{`미션 참여 인원 최대 ${roomInfo.limitedParticipants}명, 현재 ${roomInfo.reviewerCount + roomInfo.bothCount}명 `}</S.ScreenReader>
+          </S.InfoRow>
+          <S.InfoRow>
+            <S.InfoTitle aria-hidden>리뷰어 인원</S.InfoTitle>
+            <S.InfoContent aria-hidden>
+              {roomInfo.reviewerCount} / {roomInfo.reviewerCount + roomInfo.bothCount}명
+            </S.InfoContent>
+            <S.ScreenReader>{`미션 참여 인원 ${roomInfo.reviewerCount + roomInfo.bothCount}명, 리뷰어로만 참여하는 사람 ${roomInfo.reviewerCount}명 `}</S.ScreenReader>
+          </S.InfoRow>
+          <S.InfoRow>
+            <S.InfoTitle aria-hidden>참여자 인원</S.InfoTitle>
+            <S.InfoContent aria-hidden>
+              {roomInfo.bothCount} / {roomInfo.reviewerCount + roomInfo.bothCount}명
+            </S.InfoContent>
+            <S.ScreenReader>{`미션 참여 인원 ${roomInfo.reviewerCount + roomInfo.bothCount}명, 리뷰어/리뷰이 둘 다 참여하는 사람 ${roomInfo.reviewerCount}명 `}</S.ScreenReader>
           </S.InfoRow>
         </S.EtcContainer>
         <S.DescriptionContainer>
diff --git a/frontend/src/mocks/mockResponse/roomInfo.json b/frontend/src/mocks/mockResponse/roomInfo.json
index b355e63f3..f4f222701 100644
--- a/frontend/src/mocks/mockResponse/roomInfo.json
+++ b/frontend/src/mocks/mockResponse/roomInfo.json
@@ -7,7 +7,8 @@
   "thumbnailLink": "https://gongu.copyright.or.kr/gongu/wrt/cmmn/wrtFileImageView.do?wrtSn=13301655&filePath=L2Rpc2sxL25ld2RhdGEvMjAyMS8yMS9DTFMxMDAwNC8xMzMwMTY1NV9XUlRfMjFfQ0xTMTAwMDRfMjAyMTEyMTNfMQ==&thumbAt=Y&thumbSe=b_tbumb&wrtTy=10004",
   "matchingSize": 3,
   "keywords": ["TDD", "클린코드", "자바"],
-  "currentParticipants": 15,
+  "reviewerCount": 2,
+  "bothCount": 3,
   "limitedParticipants": 20,
   "recruitmentDeadline": "2024-10-13T16:00",
   "reviewDeadline": "2024-10-14T23:59",
diff --git a/frontend/src/mocks/mockResponse/roomInfos.json b/frontend/src/mocks/mockResponse/roomInfos.json
index c452bfaa3..d7ae9e547 100644
--- a/frontend/src/mocks/mockResponse/roomInfos.json
+++ b/frontend/src/mocks/mockResponse/roomInfos.json
@@ -9,7 +9,8 @@
       "thumbnailLink": "https://gongu.copyright.or.kr/gongu/wrt/cmmn/wrtFileImageView.do?wrtSn=13301655&filePath=L2Rpc2sxL25ld2RhdGEvMjAyMS8yMS9DTFMxMDAwNC8xMzMwMTY1NV9XUlRfMjFfQ0xTMTAwMDRfMjAyMTEyMTNfMQ==&thumbAt=Y&thumbSe=b_tbumb&wrtTy=10004",
       "matchingSize": 3,
       "keywords": ["TDD", "클린코드", "자바"],
-      "currentParticipants": 15,
+      "reviewerCount": 2,
+      "bothCount": 3,
       "limitedParticipants": 20,
       "recruitmentDeadline": "2024-10-12T23:00",
       "reviewDeadline": "2024-10-12T23:59",
@@ -28,7 +29,8 @@
       "thumbnailLink": "https://gongu.copyright.or.kr/gongu/wrt/cmmn/wrtFileImageView.do?wrtSn=13301655&filePath=L2Rpc2sxL25ld2RhdGEvMjAyMS8yMS9DTFMxMDAwNC8xMzMwMTY1NV9XUlRfMjFfQ0xTMTAwMDRfMjAyMTEyMTNfMQ==&thumbAt=Y&thumbSe=b_tbumb&wrtTy=10004",
       "matchingSize": 4,
       "keywords": ["TDD", "클린코드", "자바"],
-      "currentParticipants": 17,
+      "reviewerCount": 2,
+      "bothCount": 10,
       "limitedParticipants": 30,
       "recruitmentDeadline": "2024-07-30T15:00",
       "reviewDeadline": "2024-10-11T23:59",
@@ -47,7 +49,8 @@
       "thumbnailLink": "https://gongu.copyright.or.kr/gongu/wrt/cmmn/wrtFileImageView.do?wrtSn=13301655&filePath=L2Rpc2sxL25ld2RhdGEvMjAyMS8yMS9DTFMxMDAwNC8xMzMwMTY1NV9XUlRfMjFfQ0xTMTAwMDRfMjAyMTEyMTNfMQ==&thumbAt=Y&thumbSe=b_tbumb&wrtTy=10004",
       "matchingSize": 4,
       "keywords": ["TDD", "클린코드", "자바"],
-      "currentParticipants": 17,
+      "reviewerCount": 2,
+      "bothCount": 10,
       "limitedParticipants": 30,
       "recruitmentDeadline": "2024-07-30T15:00",
       "reviewDeadline": "2024-08-10T23:59",
@@ -66,7 +69,8 @@
       "thumbnailLink": "https://gongu.copyright.or.kr/gongu/wrt/cmmn/wrtFileImageView.do?wrtSn=13301655&filePath=L2Rpc2sxL25ld2RhdGEvMjAyMS8yMS9DTFMxMDAwNC8xMzMwMTY1NV9XUlRfMjFfQ0xTMTAwMDRfMjAyMTEyMTNfMQ==&thumbAt=Y&thumbSe=b_tbumb&wrtTy=10004",
       "matchingSize": 4,
       "keywords": ["TDD", "클린코드", "자바"],
-      "currentParticipants": 17,
+      "reviewerCount": 2,
+      "bothCount": 10,
       "limitedParticipants": 30,
       "recruitmentDeadline": "2024-10-12T19:00",
       "reviewDeadline": "2024-10-13T23:59",
@@ -85,7 +89,8 @@
       "thumbnailLink": "https://gongu.copyright.or.kr/gongu/wrt/cmmn/wrtFileImageView.do?wrtSn=13301655&filePath=L2Rpc2sxL25ld2RhdGEvMjAyMS8yMS9DTFMxMDAwNC8xMzMwMTY1NV9XUlRfMjFfQ0xTMTAwMDRfMjAyMTEyMTNfMQ==&thumbAt=Y&thumbSe=b_tbumb&wrtTy=10004",
       "matchingSize": 4,
       "keywords": ["TDD", "클린코드", "자바"],
-      "currentParticipants": 17,
+      "reviewerCount": 2,
+      "bothCount": 10,
       "limitedParticipants": 30,
       "recruitmentDeadline": "2024-10-12T16:00",
       "reviewDeadline": "2024-10-13T23:59",
diff --git a/frontend/src/pages/intro/IntroPage.style.ts b/frontend/src/pages/intro/IntroPage.style.ts
index 18f147fa5..5e2970d51 100644
--- a/frontend/src/pages/intro/IntroPage.style.ts
+++ b/frontend/src/pages/intro/IntroPage.style.ts
@@ -26,12 +26,16 @@ export const ContentLayout = styled.div`
   align-items: center;
   justify-content: center;
 
-  width: 1300px;
+  width: 1000px;
   min-height: 100vh;
   padding: 10rem 0;
 
+  @media (width >= 1300px) {
+    width: 1200px;
+  }
+
   ${media.medium`
-    width: 600px;
+    width: 580px;
   `}
 
   ${media.small`
@@ -250,7 +254,8 @@ export const TextSection = styled.div`
   p.sub {
     width: 100%;
     font: ${({ theme }) => theme.TEXT.xLarge};
-    line-height: 2.4rem;
+    line-height: normal;
+    word-break: keep-all;
   }
 
   ${media.medium`
@@ -274,7 +279,8 @@ export const TextSection = styled.div`
     p.sub {
       width: 100%;
       font: ${({ theme }) => theme.TEXT.xLarge};
-      line-height: 2.4rem;
+      line-height: normal;
+      word-break: keep-all;
     }
   `}
 
@@ -298,7 +304,8 @@ export const TextSection = styled.div`
     p.sub {
       width: 100%;    
       font: ${({ theme }) => theme.TEXT.medium};
-      line-height: 2.4rem;
+      line-height: normal;
+      word-break: keep-all;
     }
   `}
 `;
@@ -316,3 +323,43 @@ export const TextSectionRight = styled(TextSection)`
     order: 2;
   `}
 `;
+
+// 헤더
+export const HeaderContainer = styled.header`
+  position: fixed;
+  z-index: 100;
+  top: 0;
+  left: 20px;
+
+  display: flex;
+  align-items: center;
+
+  width: 100%;
+  height: 65px;
+
+  background: transparent;
+
+  ${media.small`
+    left: 10px;
+  `}
+`;
+
+export const HeaderLogo = styled.div`
+  display: flex;
+  gap: 0.8rem;
+  align-items: center;
+  background: transparent;
+
+  span {
+    font-family: "Moirai One", system-ui;
+    font-size: 3rem;
+    font-weight: 900;
+    color: ${({ theme }) => theme.COLOR.grey4};
+
+    transition: color 0.2s ease-in-out;
+
+    &:hover {
+      color: ${({ theme }) => theme.COLOR.primary2};
+    }
+  }
+`;
diff --git a/frontend/src/pages/intro/IntroPage.tsx b/frontend/src/pages/intro/IntroPage.tsx
index f479868b7..c442e4ea6 100644
--- a/frontend/src/pages/intro/IntroPage.tsx
+++ b/frontend/src/pages/intro/IntroPage.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import Button from "@/components/common/button/Button";
 import IntroNavigationBar from "@/components/intro/IntroNavigationBar";
 import * as S from "@/pages/intro/IntroPage.style";
@@ -9,8 +9,9 @@ import {
   step1_pic,
   step2_pic,
   step3_pic,
-  step4_pic,
   step5_pic,
+  step41_pic,
+  step42_pic,
 } from "@/assets/index";
 
 const IntroPage = () => {
@@ -45,104 +46,126 @@ const IntroPage = () => {
   };
 
   return (
-    <S.Layout ref={layoutRef}>
-      <S.ContentLayout>
-        <S.ImgWrapper src={puzzle_with_people_color} alt="CoReA 로고 이미지" />
-        <S.TextContainer>
-          <p className="main">CoReA</p>
-          <p className="sub">코드 리뷰 매칭 플랫폼</p>
-          <p className="sub">
-            CoReA로 완성하는 개발 성장의 퍼즐:
-            <span className="desktop-only"> 코드, 리뷰, 그리고 당신</span>
-          </p>
-          <p className="sub mobile-break">코드, 리뷰, 그리고 당신</p>
-        </S.TextContainer>
+    <>
+      <S.HeaderContainer>
+        <S.HeaderLogo>
+          <Link to="/">
+            <span>CoReA</span>
+          </Link>
+        </S.HeaderLogo>
+      </S.HeaderContainer>
+      <S.Layout ref={layoutRef}>
+        <S.ContentLayout>
+          <S.ImgWrapper src={puzzle_with_people_color} alt="CoReA 로고 이미지" />
+          <S.TextContainer>
+            <p className="main">CoReA</p>
+            <p className="sub">코드 리뷰 매칭 플랫폼</p>
+            <p className="sub">
+              CoReA로 완성하는 개발 성장의 퍼즐:
+              <span className="desktop-only"> 코드, 리뷰, 그리고 당신</span>
+            </p>
+            <p className="sub mobile-break">코드, 리뷰, 그리고 당신</p>
+          </S.TextContainer>
 
-        <S.ButtonWrapper>
-          <Button onClick={() => navigate("/")} size="large">
-            CoReA 이용하기
-          </Button>
-        </S.ButtonWrapper>
-      </S.ContentLayout>
+          <S.ButtonWrapper>
+            <Button onClick={() => navigate("/")} size="large">
+              CoReA 이용하기
+            </Button>
+          </S.ButtonWrapper>
+        </S.ContentLayout>
 
-      <S.ContentLayout>
-        <S.ContentSectionColumn>
-          <S.ChatBubble className="one">{`"남들은 내 코드를 어떻게 생각하고 있을까?"`}</S.ChatBubble>
-          <S.ChatBubble className="two">{`"좋은 코드에 대한 평가 기준은 없을까?"`}</S.ChatBubble>
-          <S.ChatBubble className="three">{`"코드리뷰하면 좋다던데... 사람은 어떻게 구하지?"`}</S.ChatBubble>
-          <S.ChatBubble className="four">{`"내가 지금 제대로 공부하고 있는 건가?"`}</S.ChatBubble>
-          <S.ImgWrapper src={question_with_color} style={{ marginTop: "2rem" }} />
-        </S.ContentSectionColumn>
-      </S.ContentLayout>
+        <S.ContentLayout>
+          <S.ContentSectionColumn>
+            <S.ChatBubble className="one">{`"남들은 내 코드를 어떻게 생각하고 있을까?"`}</S.ChatBubble>
+            <S.ChatBubble className="two">{`"좋은 코드에 대한 평가 기준은 없을까?"`}</S.ChatBubble>
+            <S.ChatBubble className="three">{`"코드리뷰하면 좋다던데... 사람은 어떻게 구하지?"`}</S.ChatBubble>
+            <S.ChatBubble className="four">{`"내가 지금 제대로 공부하고 있는 건가?"`}</S.ChatBubble>
+            <S.ImgWrapper src={question_with_color} style={{ marginTop: "2rem" }} />
+          </S.ContentSectionColumn>
+        </S.ContentLayout>
 
-      <S.ContentLayout>
-        <S.ContentSection>
-          <S.ImgSection src={step1_pic} />
-          <S.TextSection>
-            <p className="step">STEP1</p>
-            <p className="main">방 참여</p>
-            <p className="sub">방 정보 모달을 확인하고, 원하는 미션에 참여하세요.</p>
-          </S.TextSection>
-        </S.ContentSection>
-      </S.ContentLayout>
+        <S.ContentLayout>
+          <S.ContentSection>
+            <S.ImgSection src={step1_pic} />
+            <S.TextSection>
+              <p className="step">STEP 1</p>
+              <p className="main">방 참여</p>
+              <p className="sub">원하는 미션을 선택하고 방 세부 정보를 확인한 후 참여하세요.</p>
+            </S.TextSection>
+          </S.ContentSection>
+        </S.ContentLayout>
 
-      <S.ContentLayout>
-        <S.ContentSection>
-          <S.TextSectionRight>
-            <p className="step">STEP2</p>
-            <p className="main">리뷰어, 리뷰이 매칭</p>
-            <p className="sub">모집 마감일이 지나면 리뷰어, 리뷰이가 매칭돼요.</p>
-          </S.TextSectionRight>
-          <S.ImgSection src={step2_pic} />
-        </S.ContentSection>
-      </S.ContentLayout>
+        <S.ContentLayout>
+          <S.ContentSection>
+            <S.TextSectionRight>
+              <p className="step">STEP 2</p>
+              <p className="main">리뷰어, 리뷰이 매칭</p>
+              <p className="sub">모집 마감 후 리뷰어와 리뷰이가 자동으로 매칭돼요.</p>
+            </S.TextSectionRight>
+            <S.ImgSection src={step2_pic} />
+          </S.ContentSection>
+        </S.ContentLayout>
 
-      <S.ContentLayout>
-        <S.ContentSection>
-          <S.ImgSection src={step3_pic} />
-          <S.TextSection>
-            <p className="step">STEP3</p>
-            <p className="main">코드리뷰</p>
-            <p className="sub">
-              나의 리뷰이 영역에 제공되는 PR링크로 이동하여 깃허브에서 코드리뷰를 남겨요.
-            </p>
-          </S.TextSection>
-        </S.ContentSection>
-      </S.ContentLayout>
+        <S.ContentLayout>
+          <S.ContentSection>
+            <S.ImgSection src={step3_pic} />
+            <S.TextSection>
+              <p className="step">STEP 3</p>
+              <p className="main">코드리뷰</p>
+              <p className="sub">매칭된 리뷰이의 PR 링크에서 깃허브 코드리뷰를 진행해요.</p>
+            </S.TextSection>
+          </S.ContentSection>
+        </S.ContentLayout>
+
+        <S.ContentLayout>
+          <S.ContentSection>
+            <S.TextSectionRight>
+              <p className="step">STEP 4-1</p>
+              <p className="main">피드백 작성 for 리뷰이</p>
+              <p className="sub">
+                코드리뷰를 마치고 코드리뷰 완료 버튼을 클릭하면 피드백을 작성할 수 있어요.
+              </p>
+              <p className="sub">리뷰어의 코드리뷰에 대한 피드백을 남겨주세요.</p>
+            </S.TextSectionRight>
+            <S.ImgSection src={step41_pic} />
+          </S.ContentSection>
+        </S.ContentLayout>
 
-      <S.ContentLayout>
-        <S.ContentSection>
-          <S.TextSectionRight>
-            <p className="step">STEP4</p>
-            <p className="main">피드백 작성</p>
-            <p className="sub">피드백 작성 버튼이 보이면 상대방 피드백을 작성해요.</p>
-          </S.TextSectionRight>
-          <S.ImgSection src={step4_pic} />
-        </S.ContentSection>
-      </S.ContentLayout>
+        <S.ContentLayout>
+          <S.ContentSection>
+            <S.TextSection>
+              <p className="step">STEP 4-2</p>
+              <p className="main">피드백 작성 for 리뷰어</p>
+              <p className="sub">리뷰어가 코드리뷰를 완료하면 피드백 작성 버튼이 활성화돼요.</p>
+              <p className="sub">버튼을 클릭하여 상대방의 리뷰에 대한 피드백을 남겨주세요.</p>
+            </S.TextSection>
+            <S.ImgSection src={step42_pic} />
+          </S.ContentSection>
+        </S.ContentLayout>
 
-      <S.ContentLayout>
-        <S.ContentSection>
-          <S.ImgSection src={step5_pic} />
-          <S.TextSection>
-            <p className="step">STEP5</p>
-            <p className="main">피드백 확인</p>
-            <p className="sub">상대방이 나에게 작성해준 피드백도 확인할 수 있어요.</p>
-          </S.TextSection>
-        </S.ContentSection>
-        <S.ButtonWrapper style={{ position: "absolute", bottom: "10%" }}>
-          <Button onClick={() => navigate("/")} size="large">
-            CoReA 서비스 바로가기
-          </Button>
-        </S.ButtonWrapper>
-      </S.ContentLayout>
+        <S.ContentLayout>
+          <S.ContentSection>
+            <S.ImgSection src={step5_pic} />
+            <S.TextSectionRight>
+              <p className="step">STEP 5</p>
+              <p className="main">피드백 확인</p>
+              <p className="sub">피드백 모아보기에서 주고받은 모든 피드백을 확인할 수 있어요.</p>
+            </S.TextSectionRight>
+          </S.ContentSection>
+          <S.ButtonWrapper style={{ position: "absolute", bottom: "10%" }}>
+            <Button onClick={() => navigate("/")} size="large">
+              CoReA 서비스 바로가기
+            </Button>
+          </S.ButtonWrapper>
+        </S.ContentLayout>
 
-      <IntroNavigationBar
-        totalSections={7}
-        currentSection={currentSection}
-        onDotClick={handleDotClick}
-      />
-    </S.Layout>
+        <IntroNavigationBar
+          totalSections={7}
+          currentSection={currentSection}
+          onDotClick={handleDotClick}
+        />
+      </S.Layout>
+    </>
   );
 };