diff --git a/frontend/src/assets/InfoDefalutImg.svg b/frontend/src/assets/InfoDefalutImg.svg
index 6c7f9a2ee..edafb60a9 100644
--- a/frontend/src/assets/InfoDefalutImg.svg
+++ b/frontend/src/assets/InfoDefalutImg.svg
@@ -1,4 +1,4 @@
-<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="40" height="40" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_2308_1459)">
 <rect width="80" height="80" rx="40" fill="#969696"/>
 <path d="M50.0283 22.5816C47.2917 19.627 43.4696 18 39.2508 18C35.0096 18 31.1747 19.6172 28.4508 22.5534C25.6974 25.522 24.3558 29.5566 24.6708 33.9131C25.2952 42.5081 31.8356 49.5 39.2508 49.5C46.666 49.5 53.1952 42.5095 53.8294 33.9159C54.1486 29.5987 52.7986 25.5727 50.0283 22.5816ZM64.0008 81H14.5008C13.8529 81.0084 13.2113 80.8723 12.6226 80.6016C12.0339 80.3308 11.5129 79.9322 11.0977 79.4348C10.1836 78.3422 9.81518 76.8502 10.088 75.3413C11.2749 68.7572 14.9789 63.2264 20.8008 59.3438C25.973 55.897 32.5247 54 39.2508 54C45.9769 54 52.5286 55.8984 57.7008 59.3438C63.5227 63.225 67.2267 68.7558 68.4136 75.3398C68.6864 76.8488 68.318 78.3408 67.4039 79.4334C66.9888 79.9311 66.4679 80.3299 65.8792 80.6009C65.2905 80.8719 64.6488 81.0083 64.0008 81Z" fill="#767676"/>
diff --git a/frontend/src/components/Layout/index.tsx b/frontend/src/components/Layout/index.tsx
index 66a92ea39..9d39e1ade 100644
--- a/frontend/src/components/Layout/index.tsx
+++ b/frontend/src/components/Layout/index.tsx
@@ -14,6 +14,7 @@ import Navbar from './Navbar';
 import Back from '../../assets/Back.svg';
 import ModalProvider from '../../context/ModalContext';
 import NavbarHighlightsProvider from '../../context/NavbarHighlightsContext';
+import InfoDefalutImg from '../../assets/InfoDefalutImg.svg';
 
 type LayoutProps = {
   children: React.ReactNode;
@@ -30,6 +31,12 @@ const Layout = ({ children }: LayoutProps) => {
   const { Tmapv3 } = window;
   const mapContainer = useRef(null);
   const { width } = useContext(LayoutWidthContext);
+  const isLogined = localStorage.getItem('userToken');
+  const user = JSON.parse(localStorage.getItem('user') || '');
+
+  const loginButtonClick = () => {
+    window.location.href = 'https://mapbefine.kro.kr/api/oauth/kakao';
+  };
 
   const [map, setMap] = useState(null);
 
@@ -58,9 +65,16 @@ const Layout = ({ children }: LayoutProps) => {
                     height="100vh"
                     $backgroundColor="white"
                   >
-                    <Flex $flexDirection="column" padding="20px 20px 0 20px">
+                    <Flex
+                      $justifyContent="space-between"
+                      padding="20px 20px 0 20px"
+                    >
                       <Logo />
-                      <Space size={4} />
+                      {isLogined ? (
+                        <MyInfoImg src={user.imageUrl} />
+                      ) : (
+                        <InfoDefalutImg onClick={loginButtonClick} />
+                      )}
                     </Flex>
                     <Flex
                       height="calc(100vh - 40px)"
@@ -88,4 +102,11 @@ const LayoutFlex = styled(Flex)`
   transition: all ease 0.3s;
 `;
 
+const MyInfoImg = styled.img`
+  width: 40px;
+  height: 40px;
+
+  border-radius: 50%;
+`;
+
 export default Layout;
diff --git a/frontend/src/components/MyInfo/index.tsx b/frontend/src/components/MyInfo/index.tsx
index 574573c65..c3d79504c 100644
--- a/frontend/src/components/MyInfo/index.tsx
+++ b/frontend/src/components/MyInfo/index.tsx
@@ -16,6 +16,7 @@ const MyInfo = () => {
     name: 'Patrick',
     email: 'qkrtk9230@naver.com',
   });
+  const user = JSON.parse(localStorage.getItem('user') || '');
 
   //   useEffect(()=>{
   //     setMyInfoName()
@@ -44,11 +45,7 @@ const MyInfo = () => {
       $justifyContent="center"
       $alignItems="center"
     >
-      {isThereImg ? (
-        <MyInfoImg src="https://images.unsplash.com/photo-1480429370139-e0132c086e2a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=988&q=80" />
-      ) : (
-        <InfoDefalutImg />
-      )}
+      <MyInfoImg src={user.imageUrl} />
       <Space size={7} />
       <Box>
         <Text color="black" $fontSize="default" $fontWeight="normal">
@@ -58,14 +55,12 @@ const MyInfo = () => {
           {myInfoNameAndEmail.email}
         </Text>
       </Box>
-      <MyInfoModifyIcon>
-        <ModifyMyInfoIcon onClick={onModifyInfo} />
-      </MyInfoModifyIcon>
     </MyInfoContainer>
   );
 };
 
 const MyInfoContainer = styled(Flex)`
+  position: relative;
   border: 1px solid ${({ theme }) => theme.color.lightGray};
 `;
 
@@ -76,10 +71,4 @@ const MyInfoImg = styled.img`
   border-radius: 50%;
 `;
 
-const MyInfoModifyIcon = styled(Box)`
-  position: absolute;
-  right: 32px;
-  top: 32px;
-`;
-
 export default MyInfo;
diff --git a/frontend/src/components/MyInfoContainer/MyInfoList/index.tsx b/frontend/src/components/MyInfoContainer/MyInfoList/index.tsx
new file mode 100644
index 000000000..f69c2d1b6
--- /dev/null
+++ b/frontend/src/components/MyInfoContainer/MyInfoList/index.tsx
@@ -0,0 +1,50 @@
+import { Fragment, useEffect, useState } from 'react';
+import { styled } from 'styled-components';
+import { getApi } from '../../../apis/getApi';
+import { MyInfoPinType, MyInfoTopicType } from '../../../types/MyInfo';
+import PinCard from '../../PinCard';
+import TopicCard from '../../TopicCard';
+
+const MyInfoList = () => {
+  const [myInfoTopics, setMyInfoTopics] = useState<MyInfoTopicType[]>([]);
+
+  const getMyInfoListFromServer = async () => {
+    const serverMyInfoTopics = await getApi<MyInfoTopicType[]>(
+      'default',
+      '/members/my/topics',
+    );
+    setMyInfoTopics(serverMyInfoTopics);
+  };
+
+  useEffect(() => {
+    getMyInfoListFromServer();
+  }, []);
+
+  if (!myInfoTopics) return <></>;
+
+  return (
+    <MyInfoListWrapper>
+      {myInfoTopics.map((topic, index) => {
+        return (
+          <Fragment key={topic.id}>
+            <TopicCard
+              topicId={topic.id}
+              topicImage={topic.image}
+              topicTitle={topic.name}
+              topicUpdatedAt={topic.updatedAt}
+              topicPinCount={topic.pinCount}
+            />
+          </Fragment>
+        );
+      })}
+    </MyInfoListWrapper>
+  );
+};
+
+const MyInfoListWrapper = styled.ul`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
+  grid-row-gap: ${({ theme }) => theme.spacing[5]};
+`;
+
+export default MyInfoList;
diff --git a/frontend/src/components/MyInfoContainer/index.tsx b/frontend/src/components/MyInfoContainer/index.tsx
new file mode 100644
index 000000000..a7b858921
--- /dev/null
+++ b/frontend/src/components/MyInfoContainer/index.tsx
@@ -0,0 +1,55 @@
+import { styled } from 'styled-components';
+import Flex from '../common/Flex';
+import Text from '../common/Text';
+import Box from '../common/Box';
+import Space from '../common/Space';
+import { lazy, Suspense } from 'react';
+import TopicCardListSeleton from '../TopicCardList/TopicCardListSeleton';
+import Button from '../common/Button';
+import MyInfoList from './MyInfoList';
+
+interface MyInfoContainerProps {
+  containerTitle: string;
+  containerDescription: string;
+}
+
+const MyInfoContainer = ({
+  containerTitle,
+  containerDescription,
+}: MyInfoContainerProps) => (
+  <section>
+    <Flex $justifyContent="space-between" $alignItems="flex-end">
+      <Box>
+        <Text
+          color="black"
+          $fontSize="extraLarge"
+          $fontWeight="bold"
+          tabIndex={0}
+        >
+          {containerTitle}
+        </Text>
+        <Space size={0} />
+        <Text
+          color="gray"
+          $fontSize="default"
+          $fontWeight="normal"
+          tabIndex={1}
+        >
+          {containerDescription}
+        </Text>
+      </Box>
+    </Flex>
+
+    <Space size={4} />
+
+    <Suspense fallback={<TopicCardListSeleton />}>
+      <MyInfoList />
+    </Suspense>
+  </section>
+);
+
+const SeeAllButton = styled(Button)`
+  cursor: pointer;
+`;
+
+export default MyInfoContainer;
diff --git a/frontend/src/components/NotFound/LoginError.tsx b/frontend/src/components/NotFound/LoginError.tsx
index e410b7d0f..b8b62d3fc 100644
--- a/frontend/src/components/NotFound/LoginError.tsx
+++ b/frontend/src/components/NotFound/LoginError.tsx
@@ -6,6 +6,10 @@ import Space from '../common/Space';
 import Text from '../common/Text';
 
 const LoginError = () => {
+  const loginButtonClick = () => {
+    window.location.href = 'https://mapbefine.kro.kr/api/oauth/kakao';
+  };
+
   return (
     <Flex
       $flexDirection="column"
@@ -25,7 +29,9 @@ const LoginError = () => {
           나만의 지도를 만들어 보세요.
         </Text>
         <Space size={5} />
-        <NotFoundButton variant="primary">카카오로 시작하기</NotFoundButton>
+        <NotFoundButton variant="primary" onClick={loginButtonClick}>
+          카카오로 시작하기
+        </NotFoundButton>
       </Flex>
     </Flex>
   );
diff --git a/frontend/src/components/PinCard/index.tsx b/frontend/src/components/PinCard/index.tsx
new file mode 100644
index 000000000..c1d6c9519
--- /dev/null
+++ b/frontend/src/components/PinCard/index.tsx
@@ -0,0 +1,68 @@
+import { styled } from 'styled-components';
+import Text from '../common/Text';
+import useNavigator from '../../hooks/useNavigator';
+import Box from '../common/Box';
+import Image from '../common/Image';
+import { SyntheticEvent } from 'react';
+import Space from '../common/Space';
+import Flex from '../common/Flex';
+import FavoriteSVG from '../../assets/favoriteBtn_filled.svg';
+import SeeTogetherSVG from '../../assets/seeTogetherBtn_filled.svg';
+import SmallTopicPin from '../../assets/smallTopicPin.svg';
+import SmallTopicStar from '../../assets/smallTopicStar.svg';
+import { DEFAULT_TOPIC_IMAGE } from '../../constants';
+import AddSeeTogether from '../AddSeeTogether';
+import AddFavorite from '../AddFavorite';
+
+export interface PinCardProps {
+  pinId: number;
+  pinTitle: string;
+  pinAddress: string;
+  pinDescription: string;
+}
+
+const PinCard = ({
+  pinId,
+  pinTitle,
+  pinAddress,
+  pinDescription,
+}: PinCardProps) => {
+  const { routePage } = useNavigator();
+
+  return (
+    <Wrapper>
+      <Flex position="relative">
+        <Box width="192px" padding={1}>
+          <Box height="52px">
+            <Text color="black" $fontSize="default" $fontWeight="bold">
+              {pinTitle}
+            </Text>
+          </Box>
+
+          <Space size={0} />
+
+          <Text color="gray" $fontSize="small" $fontWeight="normal">
+            {pinAddress}
+          </Text>
+
+          <Space size={0} />
+          <Text color="gray" $fontSize="small" $fontWeight="normal">
+            {pinDescription}
+          </Text>
+        </Box>
+      </Flex>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.li`
+  width: 332px;
+  height: 140px;
+  cursor: pointer;
+  border: 1px solid ${({ theme }) => theme.color.gray};
+  border-radius: ${({ theme }) => theme.radius.small};
+
+  margin: 0 auto;
+`;
+
+export default PinCard;
diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx
index cf3fe6976..e8f2a5c86 100644
--- a/frontend/src/pages/Profile.tsx
+++ b/frontend/src/pages/Profile.tsx
@@ -1,9 +1,41 @@
+import { useState } from 'react';
+import { styled } from 'styled-components';
+import Box from '../components/common/Box';
+import Flex from '../components/common/Flex';
+import Space from '../components/common/Space';
+import MyInfo from '../components/MyInfo';
+import MyInfoContainer from '../components/MyInfoContainer';
+import useNavigator from '../hooks/useNavigator';
 import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight';
 
 const Profile = () => {
-  const { navbarHighlights: _ } = useSetNavbarHighlight('profile');
+  const { routePage } = useNavigator();
+  const { navbarHighlights: __ } = useSetNavbarHighlight('profile');
 
-  return <div>profile</div>;
+  const goToPopularTopics = () => {
+    routePage('/see-all/popularity');
+  };
+
+  return (
+    <ProfileWrapper>
+      <MyInfoWrapper $justifyContent="center" $alignItems="center">
+        <MyInfo />
+      </MyInfoWrapper>
+      <Space size={6} />
+      <MyInfoContainer
+        containerTitle="나의 지도"
+        containerDescription="내가 만든 지도를 확인해보세요"
+      />
+    </ProfileWrapper>
+  );
 };
 
+const ProfileWrapper = styled(Box)`
+  width: 70vw;
+  margin: 0 auto;
+`;
+
+const MyInfoWrapper = styled(Flex)`
+  margin-top: ${({ theme }) => theme.spacing[6]};
+`;
 export default Profile;
diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx
index f7c6bfa6e..f23c1e8f6 100644
--- a/frontend/src/router.tsx
+++ b/frontend/src/router.tsx
@@ -9,13 +9,14 @@ import SeeAllNearTopics from './pages/SeeAllNearTopics';
 import SeeAllLatestTopics from './pages/SeeAllLatestTopics';
 import SeeTogetherTopics from './pages/SeeTogetherTopics';
 import Favorite from './pages/Favorite';
-import Profile from './pages/Profile';
 import KakaoRedirectPage from './pages/KaKaoRedirectPage';
 import ErrorPage from './pages/ErrorPage';
 import AskLoginPage from './pages/AskLoginPage';
 import { ReactNode } from 'react';
 import AuthLayout from './components/Layout/AuthLayout';
 import NotFound from './components/NotFound';
+import Profile from './pages/Profile';
+import LoginError from './components/NotFound/LoginError';
 import Bookmark from './pages/Bookmark';
 
 interface routeElement {
@@ -92,7 +93,7 @@ const routes: routeElement[] = [
       },
       {
         path: '/askLogin',
-        element: <AskLoginPage />,
+        element: <LoginError />,
         withAuth: false,
       },
     ],
diff --git a/frontend/src/types/MyInfo.ts b/frontend/src/types/MyInfo.ts
index 352df24de..8e3b86198 100644
--- a/frontend/src/types/MyInfo.ts
+++ b/frontend/src/types/MyInfo.ts
@@ -2,3 +2,22 @@ export interface MyInfoType {
   name: string;
   email: string;
 }
+
+export interface MyInfoTopicType {
+  id: number;
+  name: string;
+  image: string;
+  pinCount: number;
+  bookmarkCount: number;
+  isBookmarked: boolean;
+  updatedAt: string;
+}
+
+export interface MyInfoPinType {
+  id: number;
+  name: string;
+  address: string;
+  description: string;
+  latitude: number;
+  longitude: number;
+}