diff --git a/src/apis/cards.js b/src/apis/cards.js
new file mode 100644
index 0000000..bf0b6d4
--- /dev/null
+++ b/src/apis/cards.js
@@ -0,0 +1,29 @@
+import { authAxios } from '../axios';
+
+// 전체 명함 조회
+export const getCards = async ({ member_id }) => {
+  const response = await authAxios.get(`/cards/${member_id}`);
+  // console.log(response.data.result);
+  return response;
+};
+
+// 명함 생성
+export const postCards = async ({ member_id, data }) => {
+  const response = await authAxios.post(`/cards/${member_id}`, data);
+  // console.log(response);
+  return response;
+};
+
+// 명함 삭제
+export const deleteCards = async ({ card_id }) => {
+  const response = await authAxios.delete(`/cards/${card_id}`);
+  // console.log(response);
+  return response;
+};
+
+// 명함 수정
+export const putCards = async ({ card_id, data }) => {
+  const response = await authAxios.put(`/cards/${card_id}`, data);
+  // console.log(response);
+  return response;
+};
diff --git a/src/apis/group.js b/src/apis/group.js
index f15b652..4d4cf73 100644
--- a/src/apis/group.js
+++ b/src/apis/group.js
@@ -29,7 +29,7 @@ export const putGroup = async ({ name }) => {
   const data = {
     name: name,
   };
-  const response = await authAxios.patch(
+  const response = await authAxios.put(
     `/categories/${member_id}/${category_id}`,
     editedPost
   );
diff --git a/src/apis/myCard.js b/src/apis/myCard.js
new file mode 100644
index 0000000..36fc410
--- /dev/null
+++ b/src/apis/myCard.js
@@ -0,0 +1,29 @@
+import { authAxios } from '../axios';
+
+// 내 명함 가져오기
+export const getMyCard = async ({ member_id }) => {
+  const response = await authAxios.get(`/me/${member_id}`);
+  console.log(response);
+  return response;
+};
+
+// 내 명함 생성
+export const postMyCard = async ({ member_id, data }) => {
+  const response = await authAxios.post(`/categories/${member_id}`, data);
+  console.log(response);
+  return response;
+};
+
+// 내 명함 삭제
+export const deleteMyCard = async (member_id) => {
+  const response = await authAxios.delete(`/me/${member_id}`);
+  console.log(response);
+  return response;
+};
+
+// 내 명함 수정
+export const putMyCard = async ({ member_id, data }) => {
+  const response = await authAxios.put(`/me/${member_id}`, data);
+  console.log(response);
+  return response;
+};
diff --git a/src/components/CardInfo/CardInfo.jsx b/src/components/CardInfo/CardInfo.jsx
index e9d8181..4b1debb 100644
--- a/src/components/CardInfo/CardInfo.jsx
+++ b/src/components/CardInfo/CardInfo.jsx
@@ -6,8 +6,7 @@ import { Link } from 'react-router-dom';
 
 export default function CardInfo({
   name,
-  team,
-  job,
+  role,
   company,
   imageUrl,
   isDeleteMode = false,
@@ -30,9 +29,9 @@ export default function CardInfo({
         </S.ProfileImgWrapper>
         <S.Info>
           <S.Name isSelected={isSelected}>{name}</S.Name>
-          <S.Job isSelected={isSelected}>
-            {job} / {team}, {company}
-          </S.Job>
+          <S.Role isSelected={isSelected}>
+            {role} / {company}
+          </S.Role>
         </S.Info>
       </S.CardWrapper>
       {!isDeleteMode && (
@@ -57,7 +56,7 @@ export default function CardInfo({
 
 CardInfo.propTypes = {
   name: PropTypes.string.isRequired,
-  job: PropTypes.string.isRequired,
+  role: PropTypes.string.isRequired,
   company: PropTypes.string.isRequired,
   imageUrl: PropTypes.string,
   isDeleteMode: PropTypes.bool,
diff --git a/src/components/CardInfo/CardInfo.style.jsx b/src/components/CardInfo/CardInfo.style.jsx
index ca4eb96..a20f8e4 100644
--- a/src/components/CardInfo/CardInfo.style.jsx
+++ b/src/components/CardInfo/CardInfo.style.jsx
@@ -53,7 +53,7 @@ export const Name = styled.h1`
   letter-spacing: -0.7px;
 `;
 
-export const Job = styled.span`
+export const Role = styled.span`
   color: ${(props) =>
     props.isSelected ? 'var(--white, #FFF)' : 'var(--grey3, #555)'};
   font-size: 12px;
diff --git a/src/components/MyCard/MyCard.jsx b/src/components/MyCard/MyCard.jsx
index 4d52c47..c6b1d4d 100644
--- a/src/components/MyCard/MyCard.jsx
+++ b/src/components/MyCard/MyCard.jsx
@@ -4,7 +4,7 @@ import { MdLogin } from 'react-icons/md';
 
 export default function MyCard({
   name,
-  job,
+  role,
   company,
   imageUrl,
   tel,
diff --git a/src/pages/HomePage/HomePage.jsx b/src/pages/HomePage/HomePage.jsx
index c855a37..cc11638 100644
--- a/src/pages/HomePage/HomePage.jsx
+++ b/src/pages/HomePage/HomePage.jsx
@@ -1,4 +1,4 @@
-import { useState, useRef } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import * as S from './HomePage.style';
 import {
@@ -8,14 +8,42 @@ import {
   MyCard,
   AddGroupModal,
 } from '../../components';
-import MY_CARD_SAMPLE_DATA from '../../constants/myCardSampleData';
 import { useVisibleCardsEffect } from '../../utils/HomePageUtils/homePageEffects';
 import CARDS_SAMPLE_DATA from '../../constants/cardsSampleData.js';
+import { getMyCard } from '../../apis/myCard.js';
+import { getCards } from '../../apis/cards.js';
+
+const member_id = 5; // dummy data
 
 export default function HomePage() {
   const navigate = useNavigate();
   const [filterdList, setFilterdList] = useState([]);
-  useVisibleCardsEffect(setFilterdList, CARDS_SAMPLE_DATA);
+  const [myCardData, setMyCardData] = useState([]);
+  const [cardsData, setCardsData] = useState([]);
+  // useVisibleCardsEffect(setFilterdList, cardsData);
+
+  async function fetchMyCard(member_id) {
+    try {
+      const response = await getMyCard({ member_id: member_id });
+      setMyCardData(response.data);
+    } catch (error) {
+      console.error('내 카드 정보를 불러오지 못했습니다.', error);
+    }
+  }
+
+  async function fetchCards(member_id) {
+    try {
+      const response = await getCards({ member_id: member_id });
+      setCardsData(response.data.cards);
+    } catch (error) {
+      console.error('카드 리스트를 불러오지 못했습니다.', error);
+    }
+  }
+
+  useEffect(() => {
+    fetchMyCard(member_id);
+    fetchCards(member_id);
+  }, []);
 
   return (
     <S.HomePage>
@@ -31,13 +59,14 @@ export default function HomePage() {
         <S.MyCardContainer>
           <MyCard
             backgroundColor='#fff'
-            name={MY_CARD_SAMPLE_DATA.name}
-            job={MY_CARD_SAMPLE_DATA.job}
-            company={MY_CARD_SAMPLE_DATA.company}
-            imageUrl={MY_CARD_SAMPLE_DATA.imageUrl}
-            tel={MY_CARD_SAMPLE_DATA.tel}
-            email={MY_CARD_SAMPLE_DATA.email}
-            address={MY_CARD_SAMPLE_DATA.address}
+            name={myCardData.name}
+            role={myCardData.role}
+            company={myCardData.company}
+            imageUrl={myCardData.imageUrl}
+            phone={myCardData.phone}
+            tel={myCardData.tel}
+            email={myCardData.email}
+            address={myCardData.address}
             onClick={() => navigate('/mypage')}
           />
         </S.MyCardContainer>
@@ -50,13 +79,13 @@ export default function HomePage() {
           <p style={{ color: '#000' }}>둘러보기</p>
           <p style={{ color: '#555' }}>최근 등록된 명함</p>
         </S.CardListTitle>
-        {filterdList.length > 0 && (
+        {cardsData.length > 0 && (
           <S.CardContainer>
-            {filterdList.map((data, index) => (
+            {cardsData.map((data, index) => (
               <CardInfo
                 key={index}
                 name={data.name}
-                job={data.job}
+                role={data.role}
                 company={data.company}
                 imageUrl={data.imageUrl}
               />