diff --git a/src/constants/testText.ts b/src/constants/testText.ts
index 2260b8d..3458930 100644
--- a/src/constants/testText.ts
+++ b/src/constants/testText.ts
@@ -1,9 +1,40 @@
-export const TEST_TEXT: string =
-  "님이 이번 팀 프로젝트에서\n가장 챙겨가고 싶은 점은 무엇인가요?";
+export const TEST_TEXT: string[] = [
+  "님이 이번 팀 프로젝트에서 가장 챙겨가고 싶은 점은 무엇인가요?",
+  "가장 중요하게 생각하는 협업 요소는 무엇인가요?",
+  "팀원들과의 관계에서 가장 중요하게 생각하는 점은 무엇인가요?",
+  "프로젝트가 끝난 후 팀원들에게 어떤 모습으로 기억되고 싶은가요?",
+  "프로젝트를 진행하면서 스스로에게 가장 엄격하게 적용하고 싶은 원칙은 무엇인가요?",
+];
 
-export const TEST_BTN_TEXT: string[] = [
-  "팀원들과의 네트워킹",
-  "새로운 개발 기술 도전",
-  "팀원들과의 협업 경험",
-  "문제 해결 능력 강화",
+export const TEST_BTN_TEXT = [
+  [
+    "팀원들과의 네트워킹",
+    "새로운 개발 기술 도전",
+    "팀원들과의 협업 경험",
+    "문제 해결 능력 강화",
+  ],
+  [
+    "명확한 목표와 방향 설정",
+    "팀원들 간의 신뢰와 존중",
+    "일정과 마감 기한 준수",
+    "자발적이고 적극적인 참여",
+  ],
+  [
+    "신뢰와 존중",
+    "서로의 역할에 대한 이해와 존중",
+    "친밀한 관계와 팀워크",
+    "자유로운 의견 교환과 소통",
+  ],
+  [
+    "항상 문제를 해결하려고 노력했던 사람",
+    "팀 분위기를 밝게 만들고 소통을 원활하게 했던 사람",
+    "신뢰할 수 있고 책임감 있게 맡은 일을 수행했던 사람",
+    "새로운 아이디어와 관점으로 프로젝트에 기여했던 사람",
+  ],
+  [
+    "맡은 일에 끝까지 책임지는 자세",
+    "팀원들의 의견을 존중하고 경청하는 태도",
+    "정해진 일정과 마감을 철저히 지키는 시간 관리",
+    "문제에 직면했을 때 포기하지 않고 끝까지 해결하려는 의지",
+  ],
 ];
diff --git a/src/pages/invite/Invite.tsx b/src/pages/invite/Invite.tsx
index 9d423b3..f5ce310 100644
--- a/src/pages/invite/Invite.tsx
+++ b/src/pages/invite/Invite.tsx
@@ -1,11 +1,12 @@
 import Button from "@components/common/button/Button";
 import HintText2 from "@components/common/hintText/HintText2";
 import DeactivatedProfile from "@components/invite/profile/DeactivatedProfile";
+import ActivatedProfile from "@components/invite/profile/ActivatedProfile"; // ActivatedProfile import 추가
 import UrlCopy from "@components/invite/urlCopy/UrlCopy";
 import styled from "styled-components";
 import { useParams } from "react-router-dom";
 import { instance } from "@apis/instance";
-import { useEffect } from "react";
+import { useEffect, useState } from "react"; // useState import 추가
 
 export const Container = styled.div`
   width: 350px;
@@ -33,25 +34,40 @@ export const ProfileList = styled.div`
   margin: 0 0 20px 0;
 `;
 
+// types.ts (또는 적절한 파일에 타입 선언)
+
+export interface Profile {
+  id: number; // id가 숫자라고 가정
+  user_name: string; // 사용자 이름
+  role: string; // 역할
+  // 필요한 다른 필드도 추가 가능
+}
+
 const Invite: React.FC = () => {
   const { team, count } = useParams();
+  const [profiles, setProfiles] = useState<Profile[]>([]); // 프로필 상태 관리
 
   localStorage.setItem("team_id", team ? team : "test");
   localStorage.setItem("member_count", count ? count : "test");
+
   useEffect(() => {
     fetchData();
   }, []);
+
   const fetchData = async () => {
     try {
       const response = await instance.get(
         `/teams/${localStorage.getItem("team_id")}/profiles/`
       );
-      console.log(response);
+      setProfiles(response.data.profiles); // 받아온 프로필 데이터를 상태에 저장
     } catch (err) {
       console.log(err);
     }
   };
 
+  const registeredCount = profiles.length; // 등록된 팀원의 수
+  const totalCount = Number(localStorage.getItem("member_count")); // 전체 팀원의 수
+
   return (
     <Container>
       <Section>
@@ -69,22 +85,22 @@ const Invite: React.FC = () => {
 프로필 등록을 하지 않으면 다음을 진행할 수 없어요."
         />
         <ProfileList>
-          {Array.from(
-            { length: Number(localStorage.getItem("member_count")) },
-            (_, index) => (
-              <DeactivatedProfile key={index} />
-            )
-          )}
+          {profiles.map((profile, index) => (
+            <ActivatedProfile
+              key={index}
+              name={profile.user_name}
+              position={profile.role}
+              part={"구성원"}
+            />
+          ))}
+          {Array.from({ length: totalCount - registeredCount }, (_, index) => (
+            <DeactivatedProfile key={index} />
+          ))}
         </ProfileList>
       </Section>
       <Button link="/result" name="팀원들과 동기화하기" />
     </Container>
   );
-  // TODO - 미등록 프로필 누르면 등록하는 페이지로
-  // TODO - 서버로 받은 UUID로 고유 페이지 생성
-  // TODO - 서버로 부터 등록받은 유저 받아와서 mapping
-  // TODO - 전 인원 미등록 시 disabled
-  // TODO - 전 인원 등록 후 버튼 클릭 시 GPT 관련 API요청
 };
 
 export default Invite;
diff --git a/src/pages/personal/Personal.tsx b/src/pages/personal/Personal.tsx
index 1e4dd04..4472d67 100644
--- a/src/pages/personal/Personal.tsx
+++ b/src/pages/personal/Personal.tsx
@@ -1,7 +1,7 @@
 // Personal.tsx
 
 import React, { useState } from "react";
-import styled from "styled-components";
+import styled, { createGlobalStyle } from "styled-components";
 import Dropdown from "@components/common/dropdown/Dropdown";
 import HintText from "@components/common/hintText/HintText2";
 import DateInput from "@components/common/input/DateInput";
@@ -11,6 +11,7 @@ import Textarea from "@components/common/textarea/Textarea";
 import Button from "@components/common/button/Button";
 import ImgInput from "@components/personal/ImgInput";
 import { Container } from "@components/common/container/style";
+import { instance } from "@apis/instance";
 
 const InputForm = styled.form`
   width: 100%;
@@ -20,48 +21,62 @@ const InputForm = styled.form`
 `;
 
 const parts = [
-  { value: "1", label: "기획" },
-  { value: "2", label: "디자인" },
-  { value: "3", label: "백엔드" },
-  { value: "4", label: "웹 프론트엔드" },
-  { value: "5", label: "AI" },
-  { value: "6", label: "앱" },
+  { value: "design", label: "디자인" },
+  { value: "backend", label: "백엔드" },
+  { value: "frontend", label: "프론트엔드" },
+  { value: "planning", label: "기획" },
 ];
 
 const radioOptions = {
   radio1: [
-    { value: "window", label: "Window" },
-    { value: "MacOS", label: "MacOS" },
+    { value: "1", label: "Window" },
+    { value: "2", label: "MacOS" },
   ],
   radio2: [
-    { value: "light", label: "라이트모드" },
-    { value: "dark", label: "다크모드" },
+    { value: "1", label: "라이트모드" },
+    { value: "2", label: "다크모드" },
   ],
   radio3: [
-    { value: "quiet", label: "조용한 열람실" },
-    { value: "noise", label: "시끌시끌한 카페" },
+    { value: "1", label: "조용한 열람실" },
+    { value: "2", label: "시끌시끌한 카페" },
   ],
   radio4: [
-    { value: "offline", label: "오프라인 모각코" },
-    { value: "online", label: "온라인 모각코" },
+    { value: "1", label: "오프라인 모각코" },
+    { value: "2", label: "온라인 모각코" },
+  ],
+  radio5: [
+    { value: "1", label: "아침" },
+    { value: "2", label: "야간" },
+  ],
+  radio6: [
+    { value: "1", label: "계획적" },
+    { value: "2", label: "즉흥적" },
+  ],
+  radio7: [
+    { value: "1", label: "주기적 회의" },
+    { value: "2", label: "필요할 때만 연락" },
   ],
 };
 
 const Personal: React.FC = () => {
-  // 상태 객체에 모든 폼 데이터 관리
   const [formData, setFormData] = useState({
-    name: "",
-    dateOfBirth: "",
-    contact: "",
+    user_name: "",
+    birth_date: "",
+    phone: "",
+    email: "",
+    github_address: "",
+    participation_field: "",
     location: "",
-    affiliation: "",
+    affiliations: "",
     mbti: "",
-    description: "",
-    selectedOption: "",
-    selectedRadio1: "",
-    selectedRadio2: "",
-    selectedRadio3: "",
-    selectedRadio4: "",
+    stack: "",
+    preferred_os: "",
+    editor_mode: "",
+    work_environment: "",
+    collaboration_environment: "",
+    focus_time: "",
+    project_style: "",
+    communication_style: "",
   });
 
   const handleChange = (field: string, value: string) => {
@@ -72,17 +87,17 @@ const Personal: React.FC = () => {
     event.preventDefault();
 
     try {
-      const response = await fetch("backendURL", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(formData),
-      });
-      if (!response.ok) {
-        throw new Error("데이터 전송 실패");
-      }
-      alert("성공적으로 데이터가 제출되었습니다.");
+      const response = await instance.patch(
+        `/teams/${localStorage.getItem(
+          "team_id"
+        )}/profile/${localStorage.getItem("profile_id")}/update/`,
+        formData,
+        {
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }
+      );
     } catch (error) {
       console.error(error);
     }
@@ -101,23 +116,41 @@ const Personal: React.FC = () => {
             label="이름"
             essential
             hint=""
-            value={formData.name}
-            onChange={(e) => handleChange("name", e.target.value)}
+            value={formData.user_name}
+            onChange={(e) => handleChange("user_name", e.target.value)}
           />
           <DateInput />
           <Input
             label="연락처"
             essential
             hint=""
-            value={formData.contact}
-            onChange={(e) => handleChange("contact", e.target.value)}
+            value={formData.phone}
+            onChange={(e) => handleChange("phone", e.target.value)}
+          />
+          <Input
+            label="이메일"
+            essential
+            hint=""
+            value={formData.email}
+            onChange={(e) => handleChange("email", e.target.value.trim())}
+          />
+          <Input
+            label="Github 이메일"
+            essential
+            hint=""
+            value={formData.github_address}
+            onChange={(e) =>
+              handleChange("github_address", e.target.value.trim())
+            }
           />
           <Dropdown
             label="참여 분야"
             essential={true}
             options={parts}
-            selectedOption={formData.selectedOption}
-            onChange={(value) => handleChange("selectedOption", value)}
+            selectedOption={formData.participation_field}
+            onChange={(value) =>
+              handleChange("participation_field", value.trim())
+            } // Adjusted to use the value directly
             placeholder="파트를 선택해주세요."
           />
           <Input
@@ -131,8 +164,8 @@ const Personal: React.FC = () => {
             label="소속"
             essential
             hint=""
-            value={formData.affiliation}
-            onChange={(e) => handleChange("affiliation", e.target.value)}
+            value={formData.affiliations}
+            onChange={(e) => handleChange("affiliations", e.target.value)}
           />
           <Input
             label="MBTI"
@@ -142,34 +175,56 @@ const Personal: React.FC = () => {
             onChange={(e) => handleChange("mbti", e.target.value)}
           />
           <Textarea
-            value={formData.description}
-            onChange={(e) => handleChange("description", e.target.value)}
+            value={formData.stack}
+            onChange={(e) => handleChange("stack", e.target.value)}
           />
           <RadioGroup
             label="선호하는 운영체제는?"
             options={radioOptions.radio1}
-            selectedOption={formData.selectedRadio1}
-            onChange={(value) => handleChange("selectedRadio1", value)}
+            selectedOption={formData.preferred_os}
+            onChange={(value) => handleChange("preferred_os", value)}
           />
           <RadioGroup
             label="선호하는 코드 편집기 모드는?"
             options={radioOptions.radio2}
-            selectedOption={formData.selectedRadio2}
-            onChange={(value) => handleChange("selectedRadio2", value)}
+            selectedOption={formData.editor_mode}
+            onChange={(value) => handleChange("editor_mode", value)}
           />
           <RadioGroup
             label="선호하는 작업 환경은?"
             options={radioOptions.radio3}
-            selectedOption={formData.selectedRadio3}
-            onChange={(value) => handleChange("selectedRadio3", value)}
+            selectedOption={formData.work_environment}
+            onChange={(value) => handleChange("work_environment", value)}
           />
           <RadioGroup
             label="선호하는 협업 환경은?"
             options={radioOptions.radio4}
-            selectedOption={formData.selectedRadio4}
-            onChange={(value) => handleChange("selectedRadio4", value)}
+            selectedOption={formData.collaboration_environment}
+            onChange={(value) =>
+              handleChange("collaboration_environment", value)
+            }
+          />
+          <RadioGroup
+            label="개발할 때 집중이 더 잘되는 시간대는?"
+            options={radioOptions.radio5}
+            selectedOption={formData.focus_time}
+            onChange={(value) => handleChange("focus_time", value)}
+          />
+          <RadioGroup
+            label="선호하는 프로젝트 진행 방식은?"
+            options={radioOptions.radio6}
+            selectedOption={formData.project_style}
+            onChange={(value) => handleChange("project_style", value)}
+          />
+          <RadioGroup
+            label="선호하는 커뮤니케이션 방식은?"
+            options={radioOptions.radio7}
+            selectedOption={formData.communication_style}
+            onChange={(value) =>
+              handleChange("communication_style", value.trim())
+            }
           />
-          <Button type="submit" name="팀원들과 동기화하기" />
+          <Button type="submit" name="팀원들과 동기화하기" link="/test/1" />
         </InputForm>
       </Container>
     </>
diff --git a/src/pages/test/Test.tsx b/src/pages/test/Test.tsx
index 44163a7..78aa724 100644
--- a/src/pages/test/Test.tsx
+++ b/src/pages/test/Test.tsx
@@ -1,16 +1,17 @@
 import * as S from "./style";
 import { CircleInfo } from "./_components/circle/CircleInfo";
 import { usePageNumber } from "./_hooks/usePageNumber";
-import { useUserProfile } from "@hooks/useUserProfile";
 import { TEST_TEXT, TEST_BTN_TEXT } from "@constants/testText";
 import { TestButton } from "./_components/button/TestButton";
 import Button from "@components/common/button/Button";
 import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+const BUTTONS_PER_PAGE = 4; // 페이지당 버튼 수
 
 const Test: React.FC = () => {
   const { page } = usePageNumber();
-  const { error } = useUserProfile();
-
+  const navigate = useNavigate();
   // 각 페이지에서 선택된 버튼 인덱스를 저장하는 배열
   const [selectedContent, setSelectedContent] = useState<number[]>([
     -1, -1, -1, -1, -1,
@@ -25,24 +26,25 @@ const Test: React.FC = () => {
 
   // 다음 버튼 클릭 시 선택된 내용 확인
   const handleNext = () => {
-    console.log(selectedContent[page - 1]);
+    navigate(`/test/${page + 1}`);
     // 필요한 추가 로직을 여기에 작성
   };
 
+  // 현재 페이지에 해당하는 버튼 인덱스 계산
+  const startIndex = (page - 1) * BUTTONS_PER_PAGE;
+  const endIndex = startIndex + BUTTONS_PER_PAGE;
+
   return (
     <S.TestContainer>
       <S.Wrapper>
         <CircleInfo pageNumber={page} />
-        <S.TextContainer>
-          {error}
-          {TEST_TEXT}
-        </S.TextContainer>
+        <S.TextContainer>{TEST_TEXT[page - 1]}</S.TextContainer>
       </S.Wrapper>
       <S.Wrapper>
-        {TEST_BTN_TEXT.map((text, index) => (
+        {TEST_BTN_TEXT[page - 1].map((text, index) => (
           <TestButton
             text={text}
-            key={index}
+            key={index} // 각 버튼의 고유 키 설정
             $isActive={selectedContent[page - 1] === index} // 현재 페이지에서 클릭된 버튼인지 여부
             onClick={() => handleButtonClick(index)} // 클릭 핸들러
           />
@@ -50,27 +52,19 @@ const Test: React.FC = () => {
       </S.Wrapper>
 
       {page !== 5 ? (
-        <Button
-          name="다음"
-          link={`/test/${page + 1}`}
-          $width="100%"
-          onClick={handleNext}
-        />
+        <Button name="다음" $width="100%" onClick={handleNext} />
       ) : (
         <Button
           name="완료"
           $width="100%"
           type="submit"
-          onClick={() => {
-            console.log("최종 선택된 내용:", selectedContent); // 최종 선택된 버튼의 인덱스 출력
-          }}
-          link="/invite"
+          link={`/invite/${localStorage.getItem(
+            "team_id"
+          )}/${localStorage.getItem("member_count")}`}
         />
       )}
     </S.TestContainer>
   );
-  // TODO - 25개 데이터 가지고 있기
-  // TODO - mapping해서 서버에 등록해주기
 };
 
 export default Test;