diff --git a/src/_apis/gathering/gathering-apis.tsx b/src/_apis/gathering/gathering-apis.tsx
deleted file mode 100644
index 48592dc4..00000000
--- a/src/_apis/gathering/gathering-apis.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { fetchApi } from '@/src/utils/api';
-import { GatheringDetailType } from '@/src/types/gathering-data';
-
-export function getGathering(): Promise<GatheringDetailType> {
-  return fetchApi<GatheringDetailType>('/gatheringDetail/1', {
-    method: 'GET',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-  }).then((response) => response); // TODO: data 추출
-}
diff --git a/src/_apis/my-gathering/hosted-gathering-list-apis.ts b/src/_apis/my-gathering/hosted-gathering-list-apis.ts
new file mode 100644
index 00000000..34f1b83b
--- /dev/null
+++ b/src/_apis/my-gathering/hosted-gathering-list-apis.ts
@@ -0,0 +1,12 @@
+import { fetchApi } from '@/src/utils/api';
+import { GatheringCardProps } from '@/src/types/gathering-data';
+
+export function getHostedGatheringList(startDate: string): Promise<GatheringCardProps[]> {
+  const url = `/api/gatherings/hosted?startDate=${startDate}`;
+  return fetchApi<{ data: GatheringCardProps[] }>(url, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  }).then((response) => response.data);
+}
diff --git a/src/_apis/my-gathering/joined-gathering-list-apis.ts b/src/_apis/my-gathering/joined-gathering-list-apis.ts
new file mode 100644
index 00000000..93585b75
--- /dev/null
+++ b/src/_apis/my-gathering/joined-gathering-list-apis.ts
@@ -0,0 +1,12 @@
+import { fetchApi } from '@/src/utils/api';
+import { GatheringCardProps } from '@/src/types/gathering-data';
+
+export function getJoinedGatheringList(startDate: string): Promise<GatheringCardProps[]> {
+  const url = `/api/gatherings/joined?startDate=${startDate}`;
+  return fetchApi<{ data: GatheringCardProps[] }>(url, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  }).then((response) => response.data);
+}
diff --git a/src/_queries/gathering/gathering-queries.tsx b/src/_queries/gathering/gathering-queries.tsx
deleted file mode 100644
index 5f55a20a..00000000
--- a/src/_queries/gathering/gathering-queries.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { getGathering } from '@/src/_apis/gathering/gathering-apis';
-import { transformKeysToCamel } from '@/src/utils/transform-keys';
-import { GatheringDetailType } from '@/src/types/gathering-data';
-
-export function useGetGatheringQuery() {
-  return {
-    queryKey: ['gatheringDetail'],
-    queryFn: getGathering,
-    select: (data: GatheringDetailType) => transformKeysToCamel(data),
-  };
-}
diff --git a/src/_queries/my-gathering/hosted-gathering-list-queries.ts b/src/_queries/my-gathering/hosted-gathering-list-queries.ts
new file mode 100644
index 00000000..63adbef3
--- /dev/null
+++ b/src/_queries/my-gathering/hosted-gathering-list-queries.ts
@@ -0,0 +1,10 @@
+import { getHostedGatheringList } from '@/src/_apis/my-gathering/hosted-gathering-list-apis';
+import { GatheringCardProps } from '@/src/types/gathering-data';
+
+export function useGetHostedGatheringListQuery(startDate: string) {
+  return {
+    queryKey: ['gatheringDetail', startDate],
+    queryFn: () => getHostedGatheringList(startDate),
+    select: (data: GatheringCardProps[]) => data,
+  };
+}
diff --git a/src/_queries/my-gathering/joined-gathering-list-queries.ts b/src/_queries/my-gathering/joined-gathering-list-queries.ts
new file mode 100644
index 00000000..2ab864b2
--- /dev/null
+++ b/src/_queries/my-gathering/joined-gathering-list-queries.ts
@@ -0,0 +1,10 @@
+import { getJoinedGatheringList } from '@/src/_apis/my-gathering/joined-gathering-list-apis';
+import { GatheringCardProps } from '@/src/types/gathering-data';
+
+export function useGetJoinedGatheringListQuery(startDate: string) {
+  return {
+    queryKey: ['gatheringDetail', startDate],
+    queryFn: () => getJoinedGatheringList(startDate),
+    select: (data: GatheringCardProps[]) => data,
+  };
+}
diff --git a/src/app/(crew)/my-gathering/_component/gathering-list-with-date.tsx b/src/app/(crew)/my-gathering/_component/gathering-list-with-date.tsx
index 13b098eb..d85fa36a 100644
--- a/src/app/(crew)/my-gathering/_component/gathering-list-with-date.tsx
+++ b/src/app/(crew)/my-gathering/_component/gathering-list-with-date.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useMemo } from 'react';
-import { formatDate } from '@/src/utils/format-date';
+import { formatDate, getDayOfWeek } from '@/src/utils/format-date';
 import ScheduledGatheringCard from '@/src/components/common/gathering-card/scheduled-gathering-card/container';
 import { GatheringCardProps } from '@/src/types/gathering-data';
 
@@ -27,7 +27,9 @@ export default function GatheringListWithDate({ gatheringList }: GatheringListWi
             {gathering.isNewDate && (
               <div className="hidden flex-nowrap md:block">
                 <div className="text-lg font-semibold">{formatDate(gathering.dateTime).date}</div>
-                <div className="text-base font-medium text-gray-500">월요일</div>
+                <div className="text-base font-medium text-gray-500">
+                  {getDayOfWeek(gathering.dateTime)}
+                </div>
               </div>
             )}
           </div>
diff --git a/src/app/(crew)/my-gathering/creation/page.tsx b/src/app/(crew)/my-gathering/creation/page.tsx
deleted file mode 100644
index d12f6471..00000000
--- a/src/app/(crew)/my-gathering/creation/page.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import GatheringListWithDate from '@/src/app/(crew)/my-gathering/_component/gathering-list-with-date';
-import PopOverCalendar from '@/src/components/common/input/pop-over-calendar';
-import { GatheringCardProps } from '@/src/types/gathering-data';
-
-export default function CreationPage() {
-  const [selectedDate, setSelectedDate] = useState(new Date());
-
-  useEffect(() => {}, [selectedDate]);
-  const creationGatheringList: GatheringCardProps[] = [
-    {
-      id: 1,
-      crewTitle: 'Power Pole',
-      crewMainLocation: '서울시',
-      crewSubLocation: '강남구 역삼동',
-      title: '가나다라마가나다라마가나다라마가',
-      dateTime: '2024-10-30T00:30',
-      currentCount: 8,
-      totalCount: 12,
-      imageUrl:
-        'https://images.unsplash.com/photo-1601758260892-a62c486ace97?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-      liked: true,
-    },
-    {
-      id: 2,
-      crewTitle: '풀 엔 그레이스 스튜디오',
-      crewMainLocation: '서울시',
-      crewSubLocation: '강남구 역삼동',
-      title: '가나다라마가나다라마가나다라마가',
-      dateTime: '2024-10-30T00:30',
-      currentCount: 8,
-      totalCount: 12,
-      imageUrl:
-        'https://images.unsplash.com/photo-1601758260892-a62c486ace97?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-      liked: true,
-    },
-    {
-      id: 3,
-      crewTitle: '풀 엔 그레이스 스튜디오',
-      crewMainLocation: '서울시',
-      crewSubLocation: '강남구 역삼동',
-      title: '가나다라마가나다라마가나다라마가',
-      dateTime: '2024-11-11T00:30',
-      currentCount: 8,
-      totalCount: 12,
-      imageUrl:
-        'https://images.unsplash.com/photo-1601758260892-a62c486ace97?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-      liked: true,
-    },
-    {
-      id: 4,
-      crewTitle: '풀 엔 그레이스 스튜디오',
-      crewMainLocation: '서울시',
-      crewSubLocation: '강남구 역삼동',
-      title: '가나다라마가나다라마가나다라마가',
-      dateTime: '2024-11-21T00:30',
-      currentCount: 8,
-      totalCount: 12,
-      imageUrl:
-        'https://images.unsplash.com/photo-1601758260892-a62c486ace97?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-      liked: true,
-    },
-  ];
-
-  return (
-    <div>
-      <div className="py-4 md:py-6">
-        <PopOverCalendar value={selectedDate} onChange={(d) => setSelectedDate(d)} />
-      </div>
-      <GatheringListWithDate gatheringList={creationGatheringList} />
-    </div>
-  );
-}
-function setState(arg0: Date) {
-  throw new Error('Function not implemented.');
-}
diff --git a/src/app/(crew)/my-gathering/hosted/page.tsx b/src/app/(crew)/my-gathering/hosted/page.tsx
new file mode 100644
index 00000000..8fd6fd23
--- /dev/null
+++ b/src/app/(crew)/my-gathering/hosted/page.tsx
@@ -0,0 +1,35 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { useGetHostedGatheringListQuery } from '@/src/_queries/my-gathering/hosted-gathering-list-queries';
+import { formatDateToRequest } from '@/src/utils/format-date';
+import GatheringListWithDate from '@/src/app/(crew)/my-gathering/_component/gathering-list-with-date';
+import PopOverCalendar from '@/src/components/common/input/pop-over-calendar';
+import { GatheringCardProps } from '@/src/types/gathering-data';
+
+export default function MyGatheringHostedPage() {
+  const [selectedDate, setSelectedDate] = useState(new Date());
+  const [hostedGatheringList, setHostedGatheringList] = useState<GatheringCardProps[]>();
+
+  const { data, refetch } = useQuery(
+    useGetHostedGatheringListQuery(formatDateToRequest(selectedDate)),
+  );
+
+  useEffect(() => {
+    setHostedGatheringList(data);
+  }, [data]);
+
+  useEffect(() => {
+    refetch();
+  }, [selectedDate]);
+
+  return (
+    <div>
+      <div className="py-4 md:py-6">
+        <PopOverCalendar value={selectedDate} onChange={(d) => setSelectedDate(d)} />
+      </div>
+      {hostedGatheringList && <GatheringListWithDate gatheringList={hostedGatheringList} />}
+    </div>
+  );
+}
diff --git a/src/app/(crew)/my-gathering/joined/page.tsx b/src/app/(crew)/my-gathering/joined/page.tsx
new file mode 100644
index 00000000..9ba850a4
--- /dev/null
+++ b/src/app/(crew)/my-gathering/joined/page.tsx
@@ -0,0 +1,35 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { useGetJoinedGatheringListQuery } from '@/src/_queries/my-gathering/joined-gathering-list-queries';
+import { formatDateToRequest } from '@/src/utils/format-date';
+import GatheringListWithDate from '@/src/app/(crew)/my-gathering/_component/gathering-list-with-date';
+import PopOverCalendar from '@/src/components/common/input/pop-over-calendar';
+import { GatheringCardProps } from '@/src/types/gathering-data';
+
+export default function MyGatheringJoinedPage() {
+  const [selectedDate, setSelectedDate] = useState(new Date());
+  const [joinedGatheringList, setJoinedGatheringList] = useState<GatheringCardProps[]>();
+
+  const { data, refetch } = useQuery(
+    useGetJoinedGatheringListQuery(formatDateToRequest(selectedDate)),
+  );
+
+  useEffect(() => {
+    setJoinedGatheringList(data);
+  }, [data]);
+
+  useEffect(() => {
+    refetch();
+  }, [selectedDate]);
+
+  return (
+    <div>
+      <div className="py-4 md:py-6">
+        <PopOverCalendar value={selectedDate} onChange={(d) => setSelectedDate(d)} />
+      </div>
+      {joinedGatheringList && <GatheringListWithDate gatheringList={joinedGatheringList} />}
+    </div>
+  );
+}
diff --git a/src/app/(crew)/my-gathering/layout.tsx b/src/app/(crew)/my-gathering/layout.tsx
index 2567dd3f..19e7f034 100644
--- a/src/app/(crew)/my-gathering/layout.tsx
+++ b/src/app/(crew)/my-gathering/layout.tsx
@@ -5,8 +5,8 @@ import { usePathname, useRouter } from 'next/navigation';
 import Tabs from '@/src/components/common/tab';
 
 const myGatheringTabs = [
-  { id: 'my-gathering-participation', label: '참여한 약속', route: '/my-gathering/participation' },
-  { id: 'my-gathering-creation', label: '만든 약속', route: '/my-gathering/creation' },
+  { id: 'my-gathering-joined', label: '참여한 약속', route: '/my-gathering/joined' },
+  { id: 'my-gathering-hosted', label: '만든 약속', route: '/my-gathering/hosted' },
 ];
 
 export default function MyGatheringLayout({
diff --git a/src/app/(crew)/my-gathering/page.tsx b/src/app/(crew)/my-gathering/page.tsx
index a446078c..934b35c8 100644
--- a/src/app/(crew)/my-gathering/page.tsx
+++ b/src/app/(crew)/my-gathering/page.tsx
@@ -1,6 +1,6 @@
 import { redirect } from 'next/navigation';
 
 export default function MyGatheringPage() {
-  redirect('/my-gathering/participation');
+  redirect('/my-gathering/joined');
   return null;
 }
diff --git a/src/app/(crew)/my-gathering/participation/page.tsx b/src/app/(crew)/my-gathering/participation/page.tsx
deleted file mode 100644
index 50c79a2a..00000000
--- a/src/app/(crew)/my-gathering/participation/page.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import GatheringListWithDate from '@/src/app/(crew)/my-gathering/_component/gathering-list-with-date';
-import PopOverCalendar from '@/src/components/common/input/pop-over-calendar';
-import { GatheringCardProps } from '@/src/types/gathering-data';
-
-export default function ParticipationPage() {
-  const [selectedDate, setSelectedDate] = useState(new Date());
-
-  useEffect(() => {}, [selectedDate]);
-  const creationGatheringList: GatheringCardProps[] = [
-    {
-      id: 1,
-      crewTitle: '풀 엔 그레이스 스튜디오',
-      crewMainLocation: '서울시',
-      crewSubLocation: '강남구 역삼동',
-      title: '가나다라마가나다라마가나다라마가',
-      dateTime: '2024-10-30T00:30',
-      currentCount: 8,
-      totalCount: 12,
-      imageUrl:
-        'https://images.unsplash.com/photo-1601758260892-a62c486ace97?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-      liked: true,
-    },
-    {
-      id: 2,
-      crewTitle: '풀 엔 그레이스 스튜디오',
-      crewMainLocation: '서울시',
-      crewSubLocation: '강남구 역삼동',
-      title: '가나다라마가나다라마가나다라마가',
-      dateTime: '2024-10-30T00:30',
-      currentCount: 8,
-      totalCount: 12,
-      imageUrl:
-        'https://images.unsplash.com/photo-1601758260892-a62c486ace97?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-      liked: true,
-    },
-    {
-      id: 3,
-      crewTitle: '풀 엔 그레이스 스튜디오',
-      crewMainLocation: '서울시',
-      crewSubLocation: '강남구 역삼동',
-      title: '가나다라마가나다라마가나다라마가',
-      dateTime: '2024-10-31T00:30',
-      currentCount: 8,
-      totalCount: 12,
-      imageUrl:
-        'https://images.unsplash.com/photo-1601758260892-a62c486ace97?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-      liked: true,
-    },
-  ];
-
-  return (
-    <div>
-      <div className="py-4 md:py-6">
-        <PopOverCalendar value={selectedDate} onChange={(d) => setSelectedDate(d)} />
-      </div>
-      <GatheringListWithDate gatheringList={creationGatheringList} />
-    </div>
-  );
-}
-function setState(arg0: Date) {
-  throw new Error('Function not implemented.');
-}
diff --git a/src/components/common/header/presenter.tsx b/src/components/common/header/presenter.tsx
index 7e1826df..abfa9db5 100644
--- a/src/components/common/header/presenter.tsx
+++ b/src/components/common/header/presenter.tsx
@@ -13,6 +13,12 @@ export interface HeaderPresenterProps {
   handleLogout: () => void;
 }
 
+const links = [
+  { href: '/my-crew', label: '나의 크루' },
+  { href: '/my-gathering', label: '나의 약속' },
+  { href: '/my-favorite', label: '찜한 약속' },
+];
+
 export default function HeaderPresenter({
   isAuth,
   profileImageUrl,
@@ -20,46 +26,29 @@ export default function HeaderPresenter({
 }: HeaderPresenterProps) {
   const pathname = usePathname();
   return (
-    <header className="sticky top-0 z-10 h-[40px] w-full bg-blue-500 px-6 md:h-[52px] lg:h-[52px]">
+    <header className="sticky top-0 z-10 h-10 w-full bg-blue-500 px-6 md:h-13">
       <div className="mx-auto flex h-full w-full max-w-[1200px] items-center justify-between">
-        <div className="flex space-x-3 md:space-x-5 lg:ml-2 lg:space-x-5">
+        <div className="flex space-x-2 md:space-x-5 lg:ml-2 lg:space-x-5">
           <Link href="/" className="mt-1">
             <Image src={Logo} alt="crew logo" width={83} height={30} className="hidden md:block" />
             <Image src={Logo} alt="crew logo" width={53} height={28} className="block md:hidden" />
           </Link>
-          <nav className="flex items-center space-x-3 md:space-x-6 lg:space-x-6">
+          <nav className="flex items-center space-x-3 text-base font-semibold md:space-x-6 md:text-lg lg:space-x-6">
             <Link
               href="/"
-              className={`${pathname === '/' ? 'text-white' : 'text-blue-300'} ml-4 hidden text-sm font-semibold md:block md:text-lg`}
+              className={`${pathname === '/' ? 'text-white' : 'text-blue-300'} ml-4 hidden md:block`}
             >
               크루 찾기
             </Link>
-
-            {isAuth ? (
-              <>
-                <Link
-                  href="/my-crew"
-                  className={`${pathname === '/my-crew' ? 'text-white' : 'text-blue-300'} ml-4 text-sm font-semibold md:text-lg`}
-                >
-                  나의 크루
-                </Link>
-                <Link
-                  href="/my-gathering"
-                  className={`${pathname === '/my-gathering' ? 'text-white' : 'text-blue-300'} ml-4 text-sm font-semibold md:text-lg`}
-                >
-                  나의 약속
-                </Link>
-              </>
-            ) : (
-              <>
-                <Link href="/login" className="ml-4 text-sm font-semibold text-blue-300 md:text-lg">
-                  나의 크루
-                </Link>
-                <Link href="/login" className="ml-4 text-sm font-semibold text-blue-300 md:text-lg">
-                  나의 약속
-                </Link>
-              </>
-            )}
+            {links.map(({ href, label }) => (
+              <Link
+                key={href}
+                href={isAuth ? href : '/login'}
+                className={`${pathname.startsWith(href) ? 'text-white' : 'text-blue-300'} ml-4`}
+              >
+                {label}
+              </Link>
+            ))}
           </nav>
         </div>
 
diff --git a/src/utils/format-date.ts b/src/utils/format-date.ts
index be675183..1d03137b 100644
--- a/src/utils/format-date.ts
+++ b/src/utils/format-date.ts
@@ -18,3 +18,19 @@ export function formatDateWithYear(dateString: string) {
 
   return { year, month, day };
 }
+
+export function getDayOfWeek(dateString: string) {
+  const daysInKorean = ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'];
+  const date = new Date(dateString);
+  const dayIndex = date.getDay();
+
+  return daysInKorean[dayIndex];
+}
+
+export function formatDateToRequest(date: Date) {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+
+  return `${year}-${month}-${day}`;
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 3b5a9c88..fb72f3b8 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -42,6 +42,7 @@ const config: Config = {
       height: {
         7.5: '30px',
         12.5: '50px',
+        13: '52px',
         27.5: '110px',
         30: '120px',
       },