diff --git a/src/assets/imgs/profile/Lock.svg b/src/assets/imgs/profile/Lock.svg
new file mode 100644
index 0000000..1f2c576
--- /dev/null
+++ b/src/assets/imgs/profile/Lock.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 13C4 11.1144 4 10.1716 4.58579 9.58579C5.17157 9 6.11438 9 8 9H16C17.8856 9 18.8284 9 19.4142 9.58579C20 10.1716 20 11.1144 20 13V15C20 17.8284 20 19.2426 19.1213 20.1213C18.2426 21 16.8284 21 14 21H10C7.17157 21 5.75736 21 4.87868 20.1213C4 19.2426 4 17.8284 4 15V13Z" stroke="black" stroke-width="2"/>
+<path d="M16 8V7C16 4.79086 14.2091 3 12 3V3C9.79086 3 8 4.79086 8 7V8" stroke="black" stroke-width="2" stroke-linecap="round"/>
+<circle cx="12" cy="15" r="2" fill="black"/>
+</svg>
diff --git a/src/assets/imgs/profile/delete.svg b/src/assets/imgs/profile/delete.svg
new file mode 100644
index 0000000..5d14021
--- /dev/null
+++ b/src/assets/imgs/profile/delete.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 1L1 19" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1 1L19 19" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/home/profile/profileEdit/index.tsx b/src/components/home/profile/profileEdit/index.tsx
index 2389240..21466ec 100644
--- a/src/components/home/profile/profileEdit/index.tsx
+++ b/src/components/home/profile/profileEdit/index.tsx
@@ -1,19 +1,64 @@
 import React from "react";
 import * as S from "src/components/home/profile/profileEdit/style";
+import ReturnImg from "src/assets/imgs/profile/delete.svg";
+import AvatarImg from "src/assets/imgs/header/AvatarImg.svg";
+import Pencil from "src/assets/imgs/profile/write.svg";
+import Lock from "src/assets/imgs/profile/Lock.svg";
+
 interface ProfileEditProps {
     onCancel: () => void;
 }
 
 const ProfileEdit: React.FC<ProfileEditProps> = ({ onCancel }) => {
     return (
-        <S.profileWrap>
-            <S.mainWrap>
-                <h1>프로필 수정</h1>
-                <button onClick={onCancel}>취소</button>
-            </S.mainWrap>
-        </S.profileWrap>
-    )
-        ;
+        <S.ProfileWrap>
+            <S.MainWrap>
+                <S.TitleWrap>
+                    <S.AvatarContainer>
+                        <S.Avatar src={AvatarImg} alt="프로필 이미지" />
+                        <S.PencilIconContainer>
+                            <S.PencilIcon src={Pencil} alt="편집 아이콘" />
+                        </S.PencilIconContainer>
+                    </S.AvatarContainer>
+                    <S.ProfileInfo>
+                        <S.UserName>hae_jun7388</S.UserName>
+                    </S.ProfileInfo>
+                    <S.ReturnIcon src={ReturnImg} alt="돌아가기 이미지" onClick={onCancel} />
+                </S.TitleWrap>
+                <S.DetailWrap>
+                    <S.SectionTitle>기본정보</S.SectionTitle>
+                    <S.Detail>
+                        <S.DetailLabel>학교</S.DetailLabel>
+                        <S.DetailContainer>
+                            <S.DetailValue>대구소프트웨어마이스터고등학교</S.DetailValue>
+                            <S.EditButton>수정</S.EditButton>
+                        </S.DetailContainer>
+                    </S.Detail>
+                    <S.Detail>
+                        <S.DetailLabel>이름</S.DetailLabel>
+                        <S.DetailContainer>
+                            <S.DetailValue>이해준</S.DetailValue>
+                            <S.EditButton>수정</S.EditButton>
+                        </S.DetailContainer>
+                    </S.Detail>
+                    <S.Detail>
+                        <S.DetailLabel>이메일</S.DetailLabel>
+                        <S.DetailContainer>
+                            <S.DetailValue>hae_jun7388@gmail.com</S.DetailValue>
+                            <S.EditButton>수정</S.EditButton>
+                        </S.DetailContainer>
+                    </S.Detail>
+                    <S.Detail>
+                        <S.DetailLabel>비밀번호</S.DetailLabel>
+                        <S.DetailContainer>
+                            <S.DetailValue>**********</S.DetailValue>
+                            <S.EditButton>수정</S.EditButton>
+                        </S.DetailContainer>
+                    </S.Detail>
+                </S.DetailWrap>
+            </S.MainWrap>
+        </S.ProfileWrap>
+    );
 };
 
-export default ProfileEdit;
+export default ProfileEdit;
\ No newline at end of file
diff --git a/src/components/home/profile/profileEdit/style.ts b/src/components/home/profile/profileEdit/style.ts
index a4aee8f..92975b0 100644
--- a/src/components/home/profile/profileEdit/style.ts
+++ b/src/components/home/profile/profileEdit/style.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-export const profileWrap = styled.main`
+export const ProfileWrap = styled.main`
     display: flex;
     flex-direction: column;
     margin-top: 4.44vh;
@@ -10,14 +10,140 @@ export const profileWrap = styled.main`
     justify-content: center;
 `;
 
-export const mainWrap = styled.main`
+export const MainWrap = styled.main`
     width: 72vw;
     height: 80vh;
     border-radius: 13px;
     background: #fff;
     box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.12);
     display: flex;
-    flex-direction: column; 
-    align-items: center; 
+    flex-direction: column;
+    align-items: center;
     padding: 15px;
+`;
+
+export const TitleWrap = styled.div`
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 10vh;
+    margin-top: 4vh;
+    padding-left: 5vw;
+    position: relative;
+`;
+
+export const AvatarContainer = styled.div`
+    position: relative;
+    margin-right: 1.25rem;
+`;
+
+export const Avatar = styled.img`
+    width: 5rem;
+    height: 5rem;
+    border-radius: 50%;
+`;
+
+export const PencilIconContainer = styled.div`
+    background-color: #178415;
+    width: 1.7rem;
+    height: 1.7rem;
+    border-radius: 50%;
+    position: absolute;
+    bottom: 0.18rem;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`;
+
+export const PencilIcon = styled.img`
+    width: 1rem;
+    height: 1rem;
+    cursor: pointer;
+    z-index: 1;
+`;
+
+export const ProfileInfo = styled.div`
+    display: flex;
+    flex-direction: column;
+`;
+
+export const UserName = styled.h2`
+    font-size: 1.5em;
+    font-weight: bold;
+    margin: 0;
+`;
+
+export const ReturnIcon = styled.img`
+    position: fixed;
+    right: 0;
+    width: 1.5rem;
+    height: 1.5rem;
+    cursor: pointer;
+    margin-right: 10vw;
+`;
+
+export const DetailWrap = styled.div`
+    width: 63vw;
+    height: 50vh;
+    margin-top: 4vh;
+    background-color: #F7F7F7;
+    border-radius: 13px;
+    align-items: center;
+    justify-content: center;
+`;
+
+export const SectionTitle = styled.span`
+    font-size: 1em;
+    margin-top: 1.3rem;
+    margin-left: 1.3rem;
+    margin-bottom: 1rem;
+    display: block;
+    color: #5C5C5C;
+`;
+
+export const Detail = styled.div`
+    display: flex;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    margin-left: 4vw;
+`;
+
+export const DetailLabel = styled.span`
+    font-size: 1em;
+    font-weight: bold;
+    color: #333;
+    width: 20%;
+`;
+
+export const DetailContainer = styled.div`
+    display: flex;
+    align-items: center;
+    width: 75%; 
+    justify-content: space-between;
+    border-bottom: 1px solid #ddd;
+    padding: 0.5rem 0; 
+    margin: 1rem 0; 
+    text-align: center; 
+`;
+
+export const DetailValue = styled.span`
+    font-size: 1em;
+    color: #666;
+    width: 70%;
+    display: flex;
+`;
+
+export const EditButton = styled.button`
+    background: none;
+    border: none;
+    color: #178415;
+    cursor: pointer;
+    font-size: 1em;
+    font-weight: bold;
+    width: 20%;
+    text-align: center; 
+    padding: 0.5rem 0; 
+    display: flex;
+    justify-content: center;
 `;
\ No newline at end of file