diff --git a/components/layout/trainer/ImageViewer.tsx b/components/layout/trainer/ImageViewer.tsx
new file mode 100644
index 0000000..db63f29
--- /dev/null
+++ b/components/layout/trainer/ImageViewer.tsx
@@ -0,0 +1,33 @@
+import styled from '@emotion/styled';
+import Image from 'next/image';
+import profile from '@assets/common/profile.svg';
+
+export const ImageViewer = ({ images, handleClick, len }: ImageViewerProps) => {
+  const ImageContainer = styled.div`
+    display: flex;
+    gap: 10px;
+  `;
+
+  const ImageWrapper = styled.div`
+    width: ${len}px;
+    height: ${len}px;
+    border-radius: 10px;
+    background-color: #d9d9d9;
+    cursor: pointer;
+    overflow: hidden;
+  `;
+
+  return (
+    <ImageContainer>
+      {images.length ? (
+        images.map((image: string, index: number) => (
+          <ImageWrapper key={index} id={String(index)} onClick={handleClick}>
+            <Image src={image} alt={'강사 사진'} width={len} height={len} />
+          </ImageWrapper>
+        ))
+      ) : (
+        <Image src={profile} alt={'이미지 없음'} width={len} height={len} />
+      )}
+    </ImageContainer>
+  );
+};
diff --git a/components/layout/trainer/TrainerBody.tsx b/components/layout/trainer/TrainerBody.tsx
index 03e5e0d..632cb68 100644
--- a/components/layout/trainer/TrainerBody.tsx
+++ b/components/layout/trainer/TrainerBody.tsx
@@ -1,10 +1,14 @@
 import Image from 'next/image';
-import profile from '@assets/common/profile.svg';
 import styled from '@emotion/styled';
 import { TrainerImages } from './TrainerImages';
 import { MouseEvent, useState } from 'react';
+import RatingGroup from '@components/common/rating';
+import { ImageViewer } from './ImageViewer';
+import Link from 'next/link';
 
 export const TrainerBody = ({ careers, reviews, address, images }: BodyProps) => {
+  const id = 123456789; // 로그인 된 유저 아이디 받아오기
+
   const [modal, setModal] = useState(false);
   const [initialslider, setInitialslider] = useState<number>(0);
 
@@ -13,7 +17,10 @@ export const TrainerBody = ({ careers, reviews, address, images }: BodyProps) =>
     setInitialslider(+e.currentTarget.id);
   };
 
+  const handleDeleteReview = () => {};
+
   const BodySection = styled.section`
+    position: relative;
     margin: 10px 20px;
 
     h2 {
@@ -23,30 +30,87 @@ export const TrainerBody = ({ careers, reviews, address, images }: BodyProps) =>
       color: #858ff1;
       margin-bottom: 10px;
     }
+  `;
 
-    ul {
-      list-style: disc;
-      padding: 0 20px 5px 20px;
+  const Careers = styled.ul`
+    list-style: disc;
+    padding: 0 20px 5px 20px;
 
-      li {
-        font-size: 14px;
-        line-height: 20px;
-      }
+    li {
+      font-size: 14px;
+      line-height: 20px;
     }
   `;
 
-  const ImageContainer = styled.div`
+  const TotalReviews = styled.div`
+    position: absolute;
+    top: 0;
+    right: 0;
+    border-bottom: 1px solid #ededed;
+    padding-bottom: 5px;
+    width: 100%;
+
+    p {
+      float: right;
+      width: fit-content;
+      cursor: pointer;
+      padding: 2px;
+      font-size: 11px;
+      color: #9c9c9c;
+    }
+  `;
+
+  const ReviewContainer = styled.section`
+    position: relative;
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
     gap: 10px;
+    padding: 5px 0 10px 0;
+    border-bottom: 1px solid #ededed;
   `;
 
-  const ImageWrapper = styled.div`
+  const ReviewHeader = styled.div`
+    box-sizing: border-box;
     width: 100px;
-    height: 100px;
-    border-radius: 10px;
-    background-color: #d9d9d9;
+    display: flex;
+    flex-flow: column nowrap;
+    padding-top: 5px;
+    gap: 10px;
+
+    p {
+      font-weight: 700;
+      font-size: 8px;
+      line-height: 10px;
+      text-align: center;
+      color: #5a5858;
+    }
+  `;
+
+  const ReviewBody = styled.div`
+    text-align: right;
+    width: 100%;
+
+    p {
+      text-align: left;
+      margin: 5px 0;
+      font-size: 10px;
+      line-height: 14px;
+      color: #626161;
+    }
+  `;
+
+  const NoReview = styled.div`
+    padding: 20px 0;
+  `;
+
+  const DeleteReview = styled.div`
+    position: absolute;
+    bottom: 10px;
+    right: 0;
+    font-size: 9px;
+    color: #9c9c9c;
     cursor: pointer;
+    padding: 2px;
   `;
 
   return (
@@ -57,23 +121,62 @@ export const TrainerBody = ({ careers, reviews, address, images }: BodyProps) =>
       <main>
         <BodySection>
           <h2>자격 및 수상 경력</h2>
-          <ul>
+          <Careers>
             {careers.map((career, index) => (
               <li key={index}>{career}</li>
             ))}
-          </ul>
+          </Careers>
         </BodySection>
         <BodySection>
           <h2>후기</h2>
           <ul>
             {reviews.length ? (
-              reviews.map((review, index) => (
-                <li key={index}>
-                  <div>{review.content}</div>
-                </li>
-              ))
+              <>
+                <TotalReviews>
+                  <Link href={`reviews/${reviews[0].trainerId}`}>
+                    <p>더보기</p>
+                  </Link>
+                </TotalReviews>
+                {reviews.map((review, index) => {
+                  // review.userId로 유저 정보 받아오기
+                  const profile = ''; // images[0]
+                  const nickname = '루시안';
+
+                  return (
+                    <li key={index}>
+                      <ReviewContainer>
+                        <ReviewHeader>
+                          <Image
+                            src={profile || '/assets/common/profile.svg'}
+                            width={50}
+                            height={50}
+                          />
+                          <p>{nickname}</p>
+                        </ReviewHeader>
+                        <ReviewBody>
+                          <RatingGroup
+                            isEditingMode={false}
+                            star={review.rating}
+                            width={11}
+                            height={11}
+                          />
+                          <div>
+                            <p>{review.content}</p>
+                            {review.image.length ? <ImageViewer images={images} len={60} /> : <></>}
+                          </div>
+                          {review.userId === id ? (
+                            <DeleteReview onClick={handleDeleteReview}>삭제</DeleteReview>
+                          ) : (
+                            <></>
+                          )}
+                        </ReviewBody>
+                      </ReviewContainer>
+                    </li>
+                  );
+                })}
+              </>
             ) : (
-              <div>작성된 후기가 없습니다.</div>
+              <NoReview>작성된 후기가 없습니다.</NoReview>
             )}
           </ul>
         </BodySection>
@@ -84,17 +187,7 @@ export const TrainerBody = ({ careers, reviews, address, images }: BodyProps) =>
         </BodySection>
         <BodySection>
           <h2>사진</h2>
-          <ImageContainer>
-            {images.length ? (
-              images.map((image, index) => (
-                <ImageWrapper key={index} id={String(index)} onClick={handleClick}>
-                  <Image src={image} alt={'강사 사진'} width={100} height={100} />
-                </ImageWrapper>
-              ))
-            ) : (
-              <Image src={profile} alt={'이미지 없음'} width={100} height={100} />
-            )}
-          </ImageContainer>
+          <ImageViewer images={images} handleClick={handleClick} len={100} />
         </BodySection>
       </main>
     </>
diff --git a/components/layout/trainer/TrainerHeader.tsx b/components/layout/trainer/TrainerHeader.tsx
index 295ab79..c8259fe 100644
--- a/components/layout/trainer/TrainerHeader.tsx
+++ b/components/layout/trainer/TrainerHeader.tsx
@@ -7,16 +7,16 @@ import love from '@assets/trainer/love.svg';
 import setting from '@assets/common/setting-white.svg';
 import styled from '@emotion/styled';
 
-export const TrainerHeader = ({ state, liked, onClickSetLiked }: HeaderProps) => {
-  const id = 1234;
+export const TrainerHeader = ({ state, trainer, liked, onClickSetLiked }: HeaderProps) => {
+  const { id, online } = trainer;
   const edit = {
-    // 강사로 로그인됐을 경우에만,
     link: `${id}/edit`,
     src: setting,
     alt: '수정페이지로 이동하기',
     height: 30,
     right: 30,
   };
+
   const likedObj = {
     liked: love,
     unLiked: loveBlank,
@@ -54,6 +54,7 @@ export const TrainerHeader = ({ state, liked, onClickSetLiked }: HeaderProps) =>
   `;
 
   const TrainerIntro = styled.p`
+    position: relative;
     color: #fff;
     font-size: 17px;
     line-height: 21px;
@@ -63,8 +64,8 @@ export const TrainerHeader = ({ state, liked, onClickSetLiked }: HeaderProps) =>
     &::before {
       content: url('/assets/trainer/trainer-intro.svg');
       position: absolute;
-      top: 60px;
-      left: 24px;
+      top: -55px;
+      left: 0px;
     }
   `;
 
@@ -177,12 +178,18 @@ export const TrainerHeader = ({ state, liked, onClickSetLiked }: HeaderProps) =>
               <span>다이어트</span>
             </FieldAndPurpose>
             {state === 'user' ? (
-              <div>
-                <Button>상담 하기</Button>
-              </div>
+              online ? (
+                <div>
+                  <Button>상담 하기</Button>
+                </div>
+              ) : (
+                <OnlineState>
+                  현재 <div>Off</div> 상태입니다.
+                </OnlineState>
+              )
             ) : (
               <OnlineState>
-                현재 <div>Off</div> 상태입니다.
+                현재 <div>{online ? 'On' : 'Off'}</div> 상태입니다.
               </OnlineState>
             )}
           </TrainerInfo>
diff --git a/components/layout/trainer/edit.tsx b/components/layout/trainer/edit.tsx
index 4698ead..3ed2b3c 100644
--- a/components/layout/trainer/edit.tsx
+++ b/components/layout/trainer/edit.tsx
@@ -1,18 +1,13 @@
-import { FixedBottomLinkButton } from '@components/common/button';
 import { KakaoMap } from '@components/common/map';
 import { ProfileUploader } from '@components/common/profile';
 import { Select } from '@components/common/select';
 import { ImageUploader } from '@components/common/uploader';
 import { healthEvents, healthPurpose } from '@data';
 import styled from '@emotion/styled';
-import { useState } from 'react';
 
-export const Edit = ({ field, purpose, images, gymImage }: EditProps) => {
-  const [newField, setNewFieled] = useState(field);
-  const [newPurpose, setNewPurpose] = useState(purpose);
-  const [profile, setProfile] = useState<string>(images[0] || '');
-
-  const id = 1;
+export const Edit = ({ trainerState, trainerSetState }: EditProps) => {
+  const { field, purpose, profileUrl, imagesUrl, gymUrl } = trainerState;
+  const { setField, setPurpose, setProfileUrl, setImagesUrl, setGymUrl } = trainerSetState;
 
   const TrainerEdit = styled.main`
     margin: 10px 20px;
@@ -49,7 +44,7 @@ export const Edit = ({ field, purpose, images, gymImage }: EditProps) => {
     <TrainerEdit>
       <section>
         <h2 className="srOnly">썸네일</h2>
-        <ProfileUploader profile={profile} setProfile={setProfile} />
+        <ProfileUploader profile={profileUrl} setProfile={setProfileUrl} />
       </section>
       <section>
         <h2>상세 정보</h2>
@@ -57,30 +52,30 @@ export const Edit = ({ field, purpose, images, gymImage }: EditProps) => {
           <h3>종목 및 분야</h3>
           <SelectBoxes>
             <Select
-              currentSelectedData={newField}
+              currentSelectedData={field}
               selectData={healthEvents}
               selectWidth={140}
-              onSetCurrentSelected={setNewFieled}
+              onSetCurrentSelected={setField}
             />
             <Select
-              currentSelectedData={newPurpose}
+              currentSelectedData={purpose}
               selectData={healthPurpose}
               selectWidth={140}
-              onSetCurrentSelected={setNewPurpose}
+              onSetCurrentSelected={setPurpose}
             />
           </SelectBoxes>
         </section>
         <section>
           <h3>프로필 사진</h3>
           <p>트레이너 님을 대표할 수 있는 사진을 업로드 해주세요 :)</p>
-          <ImageUploader />
+          <ImageUploader url={imagesUrl} setImageUrl={setImagesUrl} />
         </section>
       </section>
       <section>
         <h2>트레이닝장 정보</h2>
         <section>
           <h3>트레이닝장 사진</h3>
-          <ImageUploader />
+          <ImageUploader url={gymUrl} setImageUrl={setGymUrl} />
         </section>
         <section>
           <h3>트레이닝장 위치</h3>
@@ -94,7 +89,6 @@ export const Edit = ({ field, purpose, images, gymImage }: EditProps) => {
       <section>
         <h2>경력 정보</h2>
       </section>
-      <FixedBottomLinkButton isValid link={`/trainer/${id}`} buttonTitle={'변경 사항 저장'} />
     </TrainerEdit>
   );
 };
diff --git a/components/layout/trainer/trainer.d.ts b/components/layout/trainer/trainer.d.ts
index 9f96553..0791aeb 100644
--- a/components/layout/trainer/trainer.d.ts
+++ b/components/layout/trainer/trainer.d.ts
@@ -1,16 +1,26 @@
 interface HeaderProps {
+  trainer: {
+    id: number;
+    online: boolean;
+  };
   state: string;
   liked: boolean;
   onClickSetLiked: (boolean) => void;
 }
 
+interface ImageViewerProps {
+  images: string[];
+  handleClick?: (e: MouseEvent<HTMLDivElement>) => void;
+  len: number;
+}
+
 interface reviewProps {
   id: number;
   userId: number;
   creationDate: Date;
   rating: number;
   trainerId: number;
-  image: string;
+  image: string[];
   category: string;
   content: string;
   isActivation: boolean;
@@ -23,11 +33,25 @@ interface BodyProps {
   images: string[];
 }
 
-interface EditProps {
+interface TrainerProps {
   field: string;
   purpose: string;
-  images: string[];
-  gymImage: string;
+  profileUrl: string;
+  imagesUrl: string[];
+  gymUrl: string[];
+}
+
+interface TrainerSetProps {
+  setField: Dispatch<SetStateAction<string>>;
+  setPurpose: Dispatch<SetStateAction<string>>;
+  setProfileUrl: Dispatch<SetStateAction<string>>;
+  setImagesUrl: Dispatch<SetStateAction<string[]>>;
+  setGymUrl: Dispatch<SetStateAction<string[]>>;
+}
+
+interface EditProps {
+  trainerState: TrainerProps;
+  trainerSetState: TrainerSetProps;
 }
 
 interface TrainerModalProps {
diff --git a/pages/trainer/[id]/edit.tsx b/pages/trainer/[id]/edit.tsx
index 28685aa..b4613e0 100644
--- a/pages/trainer/[id]/edit.tsx
+++ b/pages/trainer/[id]/edit.tsx
@@ -1,13 +1,40 @@
+import { FixedBottomButton } from '@components/common/button';
 import { TitleBar } from '@components/common/title';
 import { Edit } from '@components/layout/trainer/edit';
 import styled from '@emotion/styled';
 import Link from 'next/link';
+import { useState } from 'react';
 
 const TrainerEdit = () => {
+  // trainer 정보 받아와서 초기값 저장
   const id = 1;
+  const field = 'PT';
+  const purpose = '다이어트';
+  const images = ['/assets/common/profile.svg', '/assets/common/profile.svg'];
+  if (images.length < 3) for (let i = 0; i < 3 - images.length; i++) images.push('');
+  const gymImage = '/assets/common/profile.svg';
 
-  const gymImage = '/assets/common/profile/svg';
-  const images = ['/assets/common/profile/svg', '/assets/common/profile/svg'];
+  const [newField, setNewField] = useState(field || '');
+  const [newPurpose, setNewPurpose] = useState(purpose || '');
+  const [profileUrl, setProfileUrl] = useState<string>(images[0]);
+  const [imagesUrl, setImagesUrl] = useState<string[]>(images);
+  const [gymUrl, setGymUrl] = useState<string[]>([gymImage || '']);
+
+  const trainerState = {
+    field: newField,
+    purpose: newPurpose,
+    profileUrl: profileUrl,
+    imagesUrl: imagesUrl,
+    gymUrl: gymUrl,
+  };
+
+  const trainerSetState = {
+    setField: setNewField,
+    setPurpose: setNewPurpose,
+    setProfileUrl: setProfileUrl,
+    setImagesUrl: setImagesUrl,
+    setGymUrl: setGymUrl,
+  };
 
   const left = {
     link: `/trainer/${id}`,
@@ -21,12 +48,17 @@ const TrainerEdit = () => {
     alt: '회원탈퇴',
   };
 
+  const handleButtonClick = () => {
+    // 트레이너 정보 수정하기
+    window.location.href = `/trainer/${id}`;
+  };
+
   const Withdraw = styled.div`
-    position: absolute;
+    position: relative;
     width: 73px;
     height: 22px;
     left: 290px;
-    top: 38px;
+    top: -63px;
     background: #ffffff;
     border: 1px solid #b0b0b0;
     color: #b0b0b0;
@@ -44,7 +76,13 @@ const TrainerEdit = () => {
       <Link href={`/profile/${id}/withdraw`}>
         <Withdraw>회원탈퇴</Withdraw>
       </Link>
-      <Edit field={'필라테스'} purpose={'체력 증진'} images={images} gymImage={gymImage} />
+      <Edit trainerState={trainerState} trainerSetState={trainerSetState} />
+      <FixedBottomButton
+        isValid
+        onButtonEvent={handleButtonClick}
+        buttonType={'button'}
+        buttonTitle={'변경 사항 저장'}
+      />
     </>
   );
 };
diff --git a/pages/trainer/[id]/index.tsx b/pages/trainer/[id]/index.tsx
index e510b87..568f3dc 100644
--- a/pages/trainer/[id]/index.tsx
+++ b/pages/trainer/[id]/index.tsx
@@ -1,13 +1,27 @@
 import type { NextPage } from 'next';
 import { TrainerHeader } from '@components/layout/trainer/TrainerHeader';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { TrainerBody } from '@components/layout/trainer/TrainerBody';
 
 const Trainer: NextPage = () => {
   const [liked, setLiked] = useState(false);
+  const login = 'trainer';
 
+  useEffect(() => {
+    // 트레이너 정보 받아오기
+  }, []);
+
+  const trainer = {
+    id: 1234,
+    online: false,
+  };
+
+  const address = '서울 강남구 강남대로 364 미왕빌딩 11층';
+  const images = ['/assets/index/logo.svg', '/assets/common/profile.svg'];
   // career에서 isApproval이 true인 content만 뽑아서 전달하기
   const careers = ['아주대학교 축구부 졸업', '에버랜드 아마존 소울리스 출신'];
+
+  // 리뷰 중, 현재 트레이너 아이디와 일치하는 리뷰 2개만 가져오기
   const reviews = [
     {
       id: 612151056,
@@ -15,7 +29,7 @@ const Trainer: NextPage = () => {
       creationDate: new Date(),
       rating: 4,
       trainerId: 456789123,
-      image: '',
+      image: [],
       category: '상담',
       content: '친절하게 잘 해주셨어요~',
       isActivation: true,
@@ -24,25 +38,19 @@ const Trainer: NextPage = () => {
       id: 612151757,
       userId: 123456789,
       creationDate: new Date(),
-      rating: 4,
+      rating: 5,
       trainerId: 456789123,
-      image: '',
+      image: ['/assets/common/profile.svg'],
       category: '상담',
       content: '친절하게 잘 해주셨어요~22',
       isActivation: true,
     },
   ];
-  const address = '서울 강남구 강남대로 364 미왕빌딩 11층';
-  const images = [
-    '/assets/common/profile.svg',
-    '/assets/common/profile.svg',
-    '/assets/common/profile.svg',
-  ];
 
   return (
     <div>
       <h1 className="srOnly">{'강사이름'} 트레이너 페이지</h1>
-      <TrainerHeader state={'trainer'} liked={liked} onClickSetLiked={setLiked} />
+      <TrainerHeader state={login} trainer={trainer} liked={liked} onClickSetLiked={setLiked} />
       <TrainerBody careers={careers} reviews={reviews} address={address} images={images} />
     </div>
   );