diff --git a/src/assets/icon.svg b/src/assets/icon.svg
new file mode 100644
index 0000000..c760d95
--- /dev/null
+++ b/src/assets/icon.svg
@@ -0,0 +1,144 @@
+
diff --git a/src/imgs/onboarding_1.svg b/src/assets/imgs/onboarding_1.svg
similarity index 100%
rename from src/imgs/onboarding_1.svg
rename to src/assets/imgs/onboarding_1.svg
diff --git a/src/imgs/onboarding_2.svg b/src/assets/imgs/onboarding_2.svg
similarity index 100%
rename from src/imgs/onboarding_2.svg
rename to src/assets/imgs/onboarding_2.svg
diff --git a/src/imgs/onboarding_3.svg b/src/assets/imgs/onboarding_3.svg
similarity index 100%
rename from src/imgs/onboarding_3.svg
rename to src/assets/imgs/onboarding_3.svg
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index 6dfd049..bc14f25 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -1,14 +1,15 @@
import React from 'react';
import * as S from './Header.style';
import { Link } from 'react-router-dom';
-import logo from '../../icons/logo.svg';
+// import logo from '../../icons/logo.svg';
+import Icon from '../Icon/Icon';
-export default function Header() {
+export default function Header({ fill }) {
return (
- 
+
diff --git a/src/components/Header/Header.style.jsx b/src/components/Header/Header.style.jsx
index 2a40803..f5d5b3e 100644
--- a/src/components/Header/Header.style.jsx
+++ b/src/components/Header/Header.style.jsx
@@ -3,13 +3,12 @@ import styled from '@emotion/styled';
export const Header = styled.div`
display: flex;
justify-content: center;
- padding-bottom: 14px;
+ align-items: center;
+ height: 76px;
`;
export const LogoWrapper = styled.div`
- padding: 10px;
-
- img {
- height: 100%;
- }
+ display: flex;
+ width: 78px;
+ height: 22px;
`;
diff --git a/src/components/Icon/Icon.jsx b/src/components/Icon/Icon.jsx
new file mode 100644
index 0000000..b268d88
--- /dev/null
+++ b/src/components/Icon/Icon.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import iconSvg from '../../assets/icon.svg';
+
+export default function Icon({ id, fill, ...props }) {
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/src/constants/onboarding.js b/src/constants/onboarding.js
index 6972e06..4718efe 100644
--- a/src/constants/onboarding.js
+++ b/src/constants/onboarding.js
@@ -1,6 +1,6 @@
-import illust1 from '../imgs/onboarding_1.svg';
-import illust2 from '../imgs/onboarding_2.svg';
-import illust3 from '../imgs/onboarding_3.svg';
+import illust1 from '../assets/imgs/onboarding_1.svg';
+import illust2 from '../assets/imgs/onboarding_2.svg';
+import illust3 from '../assets/imgs/onboarding_3.svg';
import step1 from '../icons/step_1.svg';
import step2 from '../icons/step_2.svg';
import step3 from '../icons/step_3.svg';
diff --git a/src/pages/HomePage/HomePage.jsx b/src/pages/HomePage/HomePage.jsx
index 07a88f9..0aa9dda 100644
--- a/src/pages/HomePage/HomePage.jsx
+++ b/src/pages/HomePage/HomePage.jsx
@@ -1,12 +1,54 @@
import * as S from './HomePage.style';
-import { Header, TabBar } from '../../components';
-
+import { Header, SearchBar, TabBar } from '../../components';
+import Icon from '../../components/Icon/Icon';
export default function HomePage() {
return (
<>
-
- 홈페이지
+
+
+
+
+ 내 명함
+ 나의 명함 확인 및 관리하기
+
+
+
+
+ 김은지
+ WELLET Corp.
+
+ TEL
+ +82-10-1234-5678
+
+
+ EMAIL
+ email@welletapp.co.kr
+
+
+ ADRESS
+ 서울시 강남구 테헤란로 134
+
+
+
+
+
+
+
+
+
+
+ 둘러보기
+ 등록된 명함 찾아보기
+
+
+
+
+
+ 최근 등록 순
+ 그룹 추가
+
+
diff --git a/src/pages/HomePage/HomePage.style.jsx b/src/pages/HomePage/HomePage.style.jsx
index 505fcfd..1c048cd 100644
--- a/src/pages/HomePage/HomePage.style.jsx
+++ b/src/pages/HomePage/HomePage.style.jsx
@@ -1,9 +1,123 @@
import styled from '@emotion/styled';
-export const HomePage = styled.div`
+export const HomePage = styled.div``;
+
+export const Top = styled.div`
+ padding: 0 20px;
+ height: 348px;
+ border-radius: 0px 0px 20px 20px;
+ background: linear-gradient(153deg, #2d29ff 16.96%, #721cff 124.87%);
+`;
+
+export const CardListTitle = styled.div`
+ display: flex;
+ color: #fff;
+ gap: 4px;
+ padding: 4px 0 10px 0;
+ /* border: 1px solid red; */
+
+ p:nth-of-type(1) {
+ font-size: 14px;
+ }
+
+ p:nth-of-type(2) {
+ font-size: 9px;
+ display: flex;
+ align-items: end;
+ }
+`;
+
+export const MyCard = styled.div`
padding: 20px;
+ border-radius: 20px;
+ background: #fff;
+ display: flex;
+ height: 155px;
+`;
+
+export const ProfileImg = styled.div`
+ width: 68px;
+ height: 68px;
+ border-radius: 67.574px;
+ border: 1px solid gray;
+`;
+
+export const ProfileText = styled.div`
+ padding-left: 15px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+`;
+
+export const Name = styled.div`
+ font-size: 16px;
+ font-weight: 600;
+ padding: 3px 0;
+`;
+
+export const Team = styled.div`
+ font-size: 11px;
+ font-weight: 400;
+ padding-bottom: 15px;
+`;
+
+export const ExtraInfo = styled.div`
+ display: flex;
+ gap: 4px;
+ padding: 2px 0;
+
+ p:nth-of-type(1) {
+ font-size: 9px;
+ font-weight: 600;
+ }
+
+ p:nth-of-type(2) {
+ font-size: 9px;
+ font-weight: 400;
+ }
+`;
+
+export const MoreOption = styled.div`
+ display: flex;
+ width: 16px;
+ height: 30px;
+ justify-content: end;
+ margin-left: auto;
+ padding-top: 18px;
+`;
+
+export const UpDownBar = styled.div`
+ margin: 0 124px;
+ height: 5px;
+ border-radius: 4px;
+ background: #8776ff;
`;
export const Container = styled.div`
+ padding: 20px;
background-color: gray;
`;
+
+export const ListOpiton = styled.div`
+ border: 1px solid red;
+ display: flex;
+ align-items: center;
+`;
+
+export const ArrowBottomIcon = styled.div`
+ display: flex;
+ width: 10px;
+ height: 10px;
+`;
+
+export const Filter = styled.p`
+ display: flex;
+ padding-left: 4px;
+ font-size: 9px;
+ color: #555;
+`;
+
+export const AddGroup = styled.p`
+ border: 1px solid red;
+ margin-left: auto;
+`;