diff --git a/public/images/default_activity_image.jpg b/public/images/default_activity_image.jpg
new file mode 100644
index 0000000..9684f57
Binary files /dev/null and b/public/images/default_activity_image.jpg differ
diff --git a/src/app/api/activitiesList.ts b/src/app/api/activitiesList.ts
new file mode 100644
index 0000000..15f7fbb
--- /dev/null
+++ b/src/app/api/activitiesList.ts
@@ -0,0 +1,53 @@
+import { instance } from '@/app/api/instance';
+
+export interface ActivitiesProps {
+  id: number;
+  userId: number;
+  title: string;
+  description: string;
+  category: string;
+  price: number;
+  address: string;
+  bannerImageUrl: string;
+  rating: number;
+  reviewCount: number;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface ActivitiesResponse {
+  cursorId: number | null;
+  totalCount: number;
+  activities: ActivitiesProps[];
+}
+
+export const fetchActivities = async ({
+  method,
+  cursorId,
+  page,
+  size,
+  keyword,
+  sort,
+  category,
+}: {
+  method: 'offset' | 'cursor';
+  cursorId?: number;
+  page?: number;
+  size?: number;
+  keyword?: string;
+  sort?: 'most_reviewed' | 'price_asc' | 'price_desc' | 'latest';
+  category?: string;
+}): Promise<ActivitiesResponse> => {
+  const response = await instance.get<ActivitiesResponse>('/activities', {
+    params: {
+      method,
+      cursorId,
+      page,
+      size,
+      keyword,
+      sort,
+      category,
+    },
+  });
+  return response.data;
+};
\ No newline at end of file
diff --git a/src/app/api/popularActivities.ts b/src/app/api/popularActivities.ts
new file mode 100644
index 0000000..8c1db0b
--- /dev/null
+++ b/src/app/api/popularActivities.ts
@@ -0,0 +1,11 @@
+import { QueryFunctionContext } from '@tanstack/react-query';
+import { fetchActivities, ActivitiesResponse } from '@/app/api/activitiesList';
+
+export async function fetchPopularActivities({}: QueryFunctionContext): Promise<ActivitiesResponse> {
+  const response = await fetchActivities({
+    method: 'cursor',
+    size: 4,
+    sort: 'most_reviewed',
+  });
+  return response;
+}
\ No newline at end of file
diff --git a/src/app/main/main.css.ts b/src/app/main.css.ts
similarity index 58%
rename from src/app/main/main.css.ts
rename to src/app/main.css.ts
index 674dca8..b1b45a9 100644
--- a/src/app/main/main.css.ts
+++ b/src/app/main.css.ts
@@ -1,11 +1,9 @@
 import { style } from '@vanilla-extract/css';
 import { theme } from '@/app/global.css';
-//import picHero from '../../../public/images/hero.png'
-//import { mediaQueries } from '@/styles/media';
+import { mediaQueries } from '@/styles/media';
 
 export const container = style({
   display: 'flex',
-  width: '100%',
   flexDirection: 'column',
   padding: '0',
   margin: '0',
@@ -15,34 +13,99 @@ export const container = style({
 });
 
 export const sectionWall = style({
-  background: 'url("/images/dance.png") center center/cover no-repeat',
   width: '100%',
   height: '550px',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
   color: theme.colors.white,
+
+  '@media': {
+    [mediaQueries.tablet]: {},
+    [mediaQueries.mobile]: {
+      height: '240px',
+    },
+  },
 });
 
-export const walltextContainer = style({
-  width: '1200px',
+export const bannerImage = style({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  objectFit: 'cover',
+  zIndex: 0,
+});
+
+export const bannerTextWrapper = style({
+  position: 'relative',
+  width: '100%',
+  height: '550px',
+  overflow: 'hidden',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  padding: '0 30px',
+  margin: '0 auto',
+  color: theme.colors.white,
+
+  '@media': {
+    [mediaQueries.tablet]: {},
+    [mediaQueries.mobile]: {
+      height: '240px',
+    },
+  },
 });
 
 export const hText = style({
   textAlign: 'left',
   fontSize: '68px',
-  margin: 0,
+  fontWeight: '700',
+  lineHeight: '81px',
+
+  margin: '0 auto',
+  zIndex: 1,
+  width: '1200px',
+
+  '@media': {
+    [mediaQueries.tablet]: {
+      width: '696px',
+      fontSize: '54px',
+      lineHeight: '64px',
+    },
+    [mediaQueries.mobile]: {
+      width: '335px',
+      fontSize: '24px',
+      lineHeight: '28px',
+    },
+  },
 });
 
 export const pText = style({
+  zIndex: 1,
   textAlign: 'left',
-  marginTop: '10px',
+  width: '1200px',
+  margin: '0 auto',
+  paddingTop: '20px',
   fontSize: theme.text['2xl-bold'].fontSize,
   fontWeight: theme.text['2xl-bold'].fontWeight,
+  lineHeight: '28px',
+
+  '@media': {
+    [mediaQueries.tablet]: {
+      width: '696px',
+      fontSize: theme.text['xl-bold'].fontSize,
+      lineHeight: '26px',
+    },
+    [mediaQueries.mobile]: {
+      width: '335px',
+      fontSize: theme.text['md-bold'].fontSize,
+    },
+  },
 });
 
 export const searchBar = style({
   width: '1200px',
+  height: '184px',
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'center',
@@ -53,12 +116,32 @@ export const searchBar = style({
   position: 'relative',
   top: '-60px',
   gap: '32px',
+
+  '@media': {
+    [mediaQueries.tablet]: {
+      width: '696px',
+    },
+    [mediaQueries.mobile]: {
+      width: '343px',
+      height: '129px',
+      padding: '16px 24px',
+      gap: '15px',
+      marginTop: '20px',
+    },
+  },
 });
 
 export const searchBarText = style({
   fontSize: theme.text['xl-bold'].fontSize,
   lineHeight: theme.text['xl-bold'].lineHeight,
   fontWeight: theme.text['xl-bold'].fontWeight,
+
+  '@media': {
+    [mediaQueries.mobile]: {
+      fontSize: theme.text['lg-bold'].fontSize,
+      lineHeight: theme.text['lg-bold'].lineHeight,
+    },
+  },
 });
 
 export const searchBarForm = style({
@@ -82,7 +165,7 @@ export const searchBarForm = style({
 
 export const searchBarInput = style({
   padding: '4px 16px 4px 50px',
-  width: '100%',
+  width: '1004px',
   height: '56px',
   border: `1px solid ${theme.colors.gray1}`,
   borderRadius: '5px',
@@ -90,11 +173,29 @@ export const searchBarInput = style({
   fontSize: theme.text['lg-regular'].fontSize,
   lineHeight: theme.text['lg-regular'].lineHeight,
   fontWeight: theme.text['lg-regular'].fontWeight,
+
+  '@media': {
+    [mediaQueries.tablet]: {
+      width: '500px',
+    },
+    [mediaQueries.mobile]: {
+      width: '187px',
+    },
+  },
 });
 
 export const content = style({
   width: '1200px',
-  marginTop: '34px',
+  margin: '0 auto',
+
+  '@media': {
+    [mediaQueries.tablet]: {
+      width: '696px',
+    },
+    [mediaQueries.mobile]: {
+      width: '343px',
+    },
+  },
 });
 
 export const section = style({
@@ -133,25 +234,45 @@ export const PaginationArrow = style({
 
 export const cardHotContainer = style({
   display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'nowrap',
+  overflow: 'hidden',
+  overflowX: 'auto',
   gap: '24px',
+
+  // 스크롤바 숨기기 (웹킷 / 파이어폭스 / IE 표준 호환)
+  WebkitOverflowScrolling: 'touch',
+  scrollbarWidth: 'none', // Firefox
+  msOverflowStyle: 'none', // IE, Edge
+
+  selectors: {
+    '&::-webkit-scrollbar': {
+      display: 'none',
+    },
+  },
 });
 
 export const cardHot = style({
+  display: 'flex',
   width: '384px',
   height: '384px',
+  flex: '0 0 auto',
   border: '0',
   borderRadius: '20px',
   overflow: 'hidden',
   position: 'relative',
   color: theme.colors.white,
-});
 
-export const cardImage = style({
-  width: '100%',
-  height: '100%',
-  objectFit: 'cover',
+  '@media': {
+    [mediaQueries.mobile]: {
+      width: '186px',
+      height: '186px',
+    },
+  },
 });
 
+export const cardImage = style({});
+
 export const cardText = style({
   position: 'absolute',
   bottom: '0',
@@ -165,13 +286,30 @@ export const cardH = style({
   margin: '0',
   fontSize: theme.text['3xl-bold'].fontSize,
   fontWeight: theme.text['3xl-bold'].fontWeight,
+  lineHeight: theme.text['3xl-bold'].lineHeight,
+
+  '@media': {
+    [mediaQueries.mobile]: {
+      fontSize: theme.text['2lg-bold'].fontSize,
+      fontWeight: theme.text['2lg-bold'].fontWeight,
+      lineHeight: theme.text['2lg-bold'].lineHeight,
+    },
+  },
 });
 
 export const cardP = style({
   margin: '0',
   fontSize: theme.text['xl-bold'].fontSize,
   fontWeight: theme.text['xl-bold'].fontWeight,
+  lineHeight: theme.text['xl-bold'].lineHeight,
   //color: theme.colors.white,
+
+  '@media': {
+    [mediaQueries.mobile]: {
+      fontSize: theme.text['lg-bold'].fontSize,
+      lineHeight: theme.text['lg-bold'].lineHeight,
+    },
+  },
 });
 
 export const cardSmall = style({
@@ -195,15 +333,32 @@ export const tags = style({
   fontWeight: theme.text['2lg-medium'].fontWeight,
   lineHeight: theme.text['2lg-medium'].lineHeight,
   padding: '16px',
+  backgroundColor: theme.colors.white,
 });
 
 export const cardActivityContainer = style({
-  width: '100%',
+  width: '1204px',
+  height: '897px',
   display: 'grid',
   gridTemplateColumns: 'repeat(4, 1fr)',
   gridTemplateRows: 'repeat(2, 1fr)',
   columnGap: '16px',
   rowGap: '24px',
+
+  '@media': {
+    [mediaQueries.tablet]: {
+      width: '695px',
+      height: '1154px',
+      gridTemplateColumns: 'repeat(3, 1fr)',
+      gridTemplateRows: 'repeat(3, 1fr)',
+    },
+    [mediaQueries.mobile]: {
+      width: '344px',
+      height: '591px',
+      gridTemplateColumns: 'repeat(2, 1fr)',
+      gridTemplateRows: 'repeat(2, 1fr)',
+    },
+  },
 });
 
 export const cardActivity = style({
@@ -213,15 +368,6 @@ export const cardActivity = style({
   borderRadius: '20px',
   overflow: 'hidden',
   position: 'relative',
-  /*
-  selectors: {
-    '&::after': {
-      display: 'block',
-      content: '',
-      paddingBottom: '100%',
-    },
-  },
-  */
 });
 
 export const cardActivityImage = style({
@@ -256,4 +402,16 @@ export const pagBu = style({
   cursor: 'pointer',
   width: '55px',
   height: '55px',
+});
+
+export const linkLine = style({
+  color: '#1b1b1b',
+  textDecorationLine: 'none',
+
+  ':visited': {
+    color: '#1b1b1b',
+  },
+  ':hover': {
+    textDecorationLine: 'underline',
+  },
 });
\ No newline at end of file
diff --git a/src/app/main/page.tsx b/src/app/main/page.tsx
deleted file mode 100644
index d6e05f1..0000000
--- a/src/app/main/page.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import Header from "../../components/Header";
-import Footer from "../../components/Footer";
-import * as style from './main.css';
-import Dropdown from "@/components/Dropdown";
-import CustomButton from "@/components/CustomButton";
-
-
-export default function Main() {
-  return (
-    <div>
-      <Header />
-    <div className={style.container}>
-      <section className={style.sectionWall}>
-        <div className={style.walltextContainer}>
-          <h1  className={style.hText}>함께 배우면 즐거운</h1>
-          <h1 className={style.hText}> 스트릿 댄스</h1>
-          <p className={style.pText}>1월의 인기 체험 BEST🔥</p>
-        </div>
-      </section>
-      <div className={style.searchBar}>
-        <div className={style.searchBarText}>무엇을 체험하고 싶으신가요?</div>
-        <form className={style.searchBarForm}>
-          <input className={style.searchBarInput} type="text" placeholder="내가 원하는 체험은" />
-          <CustomButton mode="search" />
-        </form>
-      </div>
-      <div className={style.content}>
-        <section className={style.section}>
-          <div className={style.sectionTitle}>
-            <h2 className={style.sectionTitleH}>🔥인기 체험</h2>
-            <div className={style.sectionTitlePage}>
-              <p className={style.PaginationArrow}>&lt;</p>
-              <p className={style.PaginationArrow}>&gt;</p>
-            </div>
-          </div>
-          <div className={style.cardHotContainer}>
-            <div className={style.cardHot}>
-              <img className={style.cardImage} src="/images/dance.png" alt="스트릿 댄스" />
-              <div className={style.cardText}>
-                <p className={style.cardH}>
-                  함께 배우면 즐거운<br />
-                  스트릿 댄스
-                </p>
-                <p className={style.cardP}>₩38,000 <small className={style.cardSmall}>/ 인</small></p>
-              </div>
-            </div>
-            <div className={style.cardHot}>
-              <img className={style.cardImage} src="/images/bridge.png" alt="다리 건너기" />
-              <div className={style.cardText}>
-                <p className={style.cardH}>
-                  연인과 사랑의 징검<br />
-                  다리 건너기
-                </p>
-                <p className={style.cardP}>₩5,600 <small className={style.cardSmall}>/ 인</small></p>
-              </div>
-            </div>
-            <div className={style.cardHot}>
-              <img className={style.cardImage} src="/images/vr.png" alt="VR 게임" />
-              <div className={style.cardText}>
-                <p className={style.cardH}>
-                  VR 게임 마스터<br />
-                  하는 법
-                </p>
-                <p className={style.cardP}>₩38,000 <small className={style.cardSmall}>/ 인</small></p>
-              </div>
-            </div>
-          </div>
-        </section>
-        <div className={style.tagContainer}>
-          <div className={style.tags}>문화 · 예술</div>
-        </div>
-        <section className={style.section}>
-          <div className={style.sectionTitle}>
-          <h2 className={style.sectionTitleH}>🧳 모든 체험</h2>
-          </div>
-          <div className={style.cardActivityContainer}>
-            <div className={style.cardActivity}>
-              <img className={style.cardActivityImage} src="/images/fiord.png" alt="피오르 체험" />
-              <p> 3.9(108)</p>
-              <h3 className={style.cardH}>피오르 체험</h3>
-              <p className={style.cardP}>₩42,800 <small className={style.cardSmall}>/ 인</small></p>
-            </div>
-          </div>
-        </section>
-        <div className={style.pagination}>
-          <button className={style.pagBu}>&lt;</button>
-          {[1, 2, 3, 4, 5].map((page) => (
-            <button className={style.pagBu} key={page}>{page}</button>
-          ))}
-          <button className={style.pagBu}>&gt;</button>
-        </div>
-      </div>
-    </div>
-    <Footer />
-    </div>
-  );
-};
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 15c4803..b3a3c7f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,7 +1,337 @@
-export default function Home() {
+'use client';
+
+import React, { useRef, useState, useCallback, FormEvent } from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import * as style from './main.css';
+import CustomButton from '@/components/CustomButton';
+
+import { usePopularActivities } from '@/hooks/usePopularActivities';
+import { useAllActivities } from '@/hooks/useAllActivities';
+import { useResponsivePageSize } from '@/hooks/useResponsivePageSize';
+
+const categories = [
+  '문화 · 예술',
+  '식음료',
+  '스포츠',
+  '투어',
+  '관광',
+  '웰빙',
+] as const;
+
+const sortOptions = ['price_asc', 'price_desc'] as const;
+
+// 1) 중복 제거 함수
+import { ActivitiesProps } from '@/app/api/activitiesList';
+
+function removeDuplicateActivities(arr: ActivitiesProps[]): ActivitiesProps[] {
+  const seen = new Set<number>();
+  return arr.filter((item) => {
+    if (seen.has(item.id)) {
+      return false;
+    }
+    seen.add(item.id);
+    return true;
+  });
+}
+
+export default function Main() {
+  /**
+   * [인기 체험] 섹션: 무한스크롤
+   */
+  const {
+    data: popularData,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = usePopularActivities();
+
+  // 모든 페이지 데이터를 합쳐 단일 배열로
+  const rawPopularActivities =
+    popularData?.pages.flatMap((p) => p.activities) || [];
+
+  // 2) 중복 ID 제거
+  const popularActivities = removeDuplicateActivities(rawPopularActivities);
+
+  // 스크롤 컨테이너 (인기 체험 카드 리스트) 참조
+  const cardHotContainerRef = useRef<HTMLDivElement>(null);
+
+  // < 버튼 → 왼쪽 스크롤
+  const handleScrollLeft = useCallback(() => {
+    if (!cardHotContainerRef.current) return;
+    cardHotContainerRef.current.scrollBy({ left: -400, behavior: 'smooth' });
+  }, []);
+
+  // > 버튼 → 오른쪽 스크롤 + 다음 페이지 fetch
+  const handleScrollRight = useCallback(() => {
+    if (!cardHotContainerRef.current) return;
+    // 가로로 400px 이동
+    cardHotContainerRef.current.scrollBy({ left: 400, behavior: 'smooth' });
+
+    // 아직 다음 페이지가 있고, 현재 fetch 중이 아니라면 다음 페이지 요청
+    if (hasNextPage && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+  const firstPopular = popularActivities[0]; // 첫 번째 인기 체험
+
+  /**
+   * --------------------------------------------------------------------------------
+   * 2) [모든 체험] 섹션: 페이지네이션 + 카테고리 + 정렬 + 반응형 pageSize
+   * --------------------------------------------------------------------------------
+   */
+  // 브라우저 너비에 따라 8 or 9 or 4
+  const responsiveSize = useResponsivePageSize();
+
+  const [page, setPage] = useState(1);
+  const [selectedCategory, setSelectedCategory] = useState<
+    string | undefined
+  >();
+  const [selectedSort, setSelectedSort] = useState<
+    'price_asc' | 'price_desc'
+  >();
+  const [keywordSearch, setKeywordSearch] = useState('');
+
+  // 한 페이지에 responsiveSize 개씩
+  const { data: allActivitiesData, isLoading } = useAllActivities({
+    page,
+    size: responsiveSize, // 반응형 크기
+    sort: selectedSort,
+    category: selectedCategory,
+    keyword: keywordSearch.trim() ? keywordSearch : undefined,
+  });
+
+  // 페이지네이션을 위해 totalCount 사용
+  const totalCount = allActivitiesData?.totalCount || 0;
+  // totalPage = totalCount / responsiveSize
+  const totalPage = Math.ceil(totalCount / responsiveSize);
+
+  // 페이지 이동
+  const handlePrevPage = () => setPage((prev) => Math.max(prev - 1, 1));
+  const handleNextPage = () => setPage((prev) => Math.min(prev + 1, totalPage));
+  const handlePageClick = (pageNumber: number) => setPage(pageNumber);
+
+  // 카테고리 변경
+  const handleCategoryChange = (cat: string) => {
+    setSelectedCategory(cat);
+    setPage(1); // 필터 바뀌면 1페이지로
+  };
+
+  // 가격 정렬 변경
+  const handleSortChange = (sort: 'price_asc' | 'price_desc') => {
+    setSelectedSort(sort);
+    setPage(1);
+  };
+
+  // 검색 폼 제출 시
+  const handleSearchSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setPage(1);
+  };
+
+  // 실제 '모든 체험' 목록 데이터
+  const allActivities = allActivitiesData?.activities || [];
+
   return (
     <div>
-      <main></main>
+      <div className={style.container}>
+        {/* ----------------------------------------------------------------
+            섹션 1) 메인 배너
+         ----------------------------------------------------------------*/}
+        <section className={style.sectionWall}>
+          <div className={style.bannerTextWrapper}>
+            <h1 className={style.hText}>
+              {firstPopular ? '함께 배우면 즐거운' : ''}
+            </h1>
+            <h1 className={style.hText}>
+              {firstPopular ? firstPopular.title : '로딩중...'}
+            </h1>
+            <p className={style.pText}>
+              {firstPopular ? `1월의 인기 체험 BEST🔥` : ''}
+            </p>
+            <Image
+              className={style.bannerImage}
+              src={
+                firstPopular?.bannerImageUrl ??
+                '/images/default_activity_image.jpg'
+              }
+              alt={firstPopular?.title ?? '기본 이미지'}
+              fill
+            />
+          </div>
+        </section>
+
+        {/* ---------------------------
+          검색 바 (keyword 입력)
+        --------------------------- */}
+        <div className={style.searchBar}>
+          <div className={style.searchBarText}>무엇을 체험하고 싶으신가요?</div>
+          <form className={style.searchBarForm} onSubmit={handleSearchSubmit}>
+            <input
+              className={style.searchBarInput}
+              type="text"
+              placeholder="내가 원하는 체험은"
+              value={keywordSearch}
+              onChange={(e) => setKeywordSearch(e.target.value)}
+            />
+            <CustomButton mode="search" type="submit" />
+          </form>
+        </div>
+
+        <div className={style.content}>
+          {/** ----------------------------------------------------------------
+               [인기 체험] 섹션 (무한 스크롤 + 가로 스크롤)
+           ----------------------------------------------------------------*/}
+          <section className={style.section}>
+            <div className={style.sectionTitle}>
+              <h2 className={style.sectionTitleH}>🔥인기 체험</h2>
+              <div className={style.sectionTitlePage}>
+                {/* 왼쪽 화살표 */}
+                <p className={style.PaginationArrow} onClick={handleScrollLeft}>
+                  &lt;
+                </p>
+                {/* 오른쪽 화살표 */}
+                <p
+                  className={style.PaginationArrow}
+                  onClick={handleScrollRight}
+                >
+                  &gt;
+                </p>
+              </div>
+            </div>
+
+            <div className={style.cardHotContainer} ref={cardHotContainerRef}>
+              {popularActivities.map((activity) => (
+                <div className={style.cardHot} key={activity.id}>
+                  <Link
+                    href={`/activities/${activity.id}`}
+                    className={style.linkLine}
+                  >
+                    <Image
+                      className={style.cardImage}
+                      src={activity.bannerImageUrl}
+                      alt={activity.title}
+                      fill
+                    />
+                  </Link>
+                  <div className={style.cardText}>
+                    <p className={style.cardH}>{activity.title}</p>
+                    <p className={style.cardP}>
+                      ₩{activity.price.toLocaleString()}{' '}
+                      <small className={style.cardSmall}>/ 인</small>
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </section>
+
+          {/* ----------------------------------------------------------------
+              카테고리 / 정렬 선택 영역
+             ----------------------------------------------------------------*/}
+          <div>
+             <div className={style.tagContainer}>
+            {categories.map((cat) => (
+              <button
+                key={cat}
+                className={style.tags}
+                onClick={() => handleCategoryChange(cat)}
+              >
+                {cat}
+              </button>
+            ))}
+          </div>
+            <div className={style.tagContainer}>
+              {sortOptions.map((opt) => (
+                <button
+                  key={opt}
+                  className={style.tags}
+                  onClick={() => handleSortChange(opt)}
+                >
+                  {opt === 'price_asc' ? '가격 낮은순' : '가격 높은순'}
+                </button>
+              ))}
+            </div>
+          </div>
+          
+
+          {/** ----------------------------------------------------------------
+               [모든 체험] 섹션: useAllActivities (페이지네이션)
+           ----------------------------------------------------------------*/}
+          <section className={style.section}>
+            <div className={style.sectionTitle}>
+              <h2 className={style.sectionTitleH}>🧳 모든 체험</h2>
+            </div>
+
+            {isLoading && <p>로딩 중...</p>}
+            {!isLoading && (
+              <div className={style.cardActivityContainer}>
+                {allActivities.map((activity) => (
+                  <div className={style.cardActivity} key={activity.id}>
+                    <Link
+                      href={`/activities/${activity.id}`}
+                      className={style.linkLine}
+                    >
+                      <Image
+                        className={style.cardActivityImage}
+                        src={activity.bannerImageUrl}
+                        alt={activity.title}
+                        width={200}
+                        height={120}
+                      />
+
+                      <p>
+                        {activity.rating}({activity.reviewCount})
+                      </p>
+
+                      <h3 className={style.cardH}>{activity.title}</h3>
+
+                      <p className={style.cardP}>
+                        ₩{activity.price.toLocaleString()}{' '}
+                        <small className={style.cardSmall}>/ 인</small>
+                      </p>
+                    </Link>
+                  </div>
+                ))}
+              </div>
+            )}
+          </section>
+
+          {/* 페이지네이션 버튼 */}
+          <div className={style.pagination}>
+            <button
+              className={style.pagBu}
+              onClick={handlePrevPage}
+              disabled={page === 1}
+            >
+              &lt;
+            </button>
+
+            {Array.from({ length: totalPage }).map((_, idx) => {
+              const pageNumber = idx + 1;
+              return (
+                <button
+                  key={pageNumber}
+                  className={style.pagBu}
+                  onClick={() => handlePageClick(pageNumber)}
+                  disabled={pageNumber === page}
+                >
+                  {pageNumber}
+                </button>
+              );
+            })}
+
+            <button
+              className={style.pagBu}
+              onClick={handleNextPage}
+              disabled={page === totalPage}
+            >
+              &gt;
+            </button>
+          </div>
+        </div>
+      </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
index 3fdeb4f..f36d3c0 100644
--- a/src/components/Dropdown.tsx
+++ b/src/components/Dropdown.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import React, { useState, useRef, useEffect } from 'react';
-import type { CustomDropdownMode } from '@/types/CustomDropdownMode';
 import * as styles from './Dropdown.css';
 import DropdownBox from './Dropdown/DropdownBox';
 import DropdownMenu from './Dropdown/DropdownMenu';
diff --git a/src/components/Dropdown/DropdownBox.tsx b/src/components/Dropdown/DropdownBox.tsx
index 3edfdec..a9a2f1d 100644
--- a/src/components/Dropdown/DropdownBox.tsx
+++ b/src/components/Dropdown/DropdownBox.tsx
@@ -5,15 +5,6 @@ interface DropdownBoxProps {
   label: string;
 }
 
-const DropdownIn: React.FC<DropdownBoxProps> = ({ onClick, label }) => (
-  <input
-    type="button"
-    value={label}
-    onClick={onClick}
-    className={styles.dropdownButton}
-  />
-);
-
 const DropdownBox: React.FC<DropdownBoxProps> = ({ onClick, label }) => (
   <button onClick={onClick} className={styles.dropdownButton}>
     <span className={styles.dropdownText}>{label}</span>
diff --git a/src/components/ReservationBar.css.ts b/src/components/ReservationBar.css.ts
index a48d6cc..ce9b2a6 100644
--- a/src/components/ReservationBar.css.ts
+++ b/src/components/ReservationBar.css.ts
@@ -110,7 +110,6 @@ export const timeButton = style({
 export const selectedTime = style({
   backgroundColor: theme.colors.nomadBlack,
   color: theme.colors.white,
-  fontWeight: theme.text['lg-bold'].fontWeight,
 });
 
 export const peopleButtons = style({
diff --git a/src/hooks/useAllActivities.ts b/src/hooks/useAllActivities.ts
new file mode 100644
index 0000000..14399fe
--- /dev/null
+++ b/src/hooks/useAllActivities.ts
@@ -0,0 +1,36 @@
+import {
+  useQuery,
+  UseQueryOptions,
+  UseQueryResult,
+} from '@tanstack/react-query';
+import { fetchActivities, ActivitiesResponse } from '@/app/api/activitiesList';
+
+interface UseAllActivitiesProps {
+  page: number;
+  size: number;
+  sort?: 'price_asc' | 'price_desc' | 'most_reviewed' | 'latest';
+  category?: string;
+  keyword?: string;
+}
+
+export function useAllActivities({
+  page,
+  size,
+  sort,
+  category,
+  keyword,
+}: UseAllActivitiesProps): UseQueryResult<ActivitiesResponse, Error> {
+  return useQuery<ActivitiesResponse, Error>({
+    queryKey: ['all-activities', page, sort, category, keyword],
+    queryFn: () =>
+      fetchActivities({
+        method: 'offset',
+        page,
+        size,
+        sort,
+        category,
+        keyword,
+      }),
+    keepPreviousData: true,
+  } as UseQueryOptions<ActivitiesResponse, Error>);
+}
diff --git a/src/hooks/usePopularActivities.ts b/src/hooks/usePopularActivities.ts
new file mode 100644
index 0000000..d821704
--- /dev/null
+++ b/src/hooks/usePopularActivities.ts
@@ -0,0 +1,30 @@
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { fetchPopularActivities } from '@/app/api/popularActivities';
+import { ActivitiesResponse } from '@/app/api/activitiesList';
+
+export function usePopularActivities() {
+  return useInfiniteQuery<ActivitiesResponse>({
+    queryKey: ['popular-activities'],
+    queryFn: fetchPopularActivities,
+    initialPageParam: 1,
+
+    getNextPageParam: (lastPage, pages) => {
+      // pages[0] => 첫 페이지 응답
+      const totalCount = pages[0]?.totalCount ?? 0;
+
+      // 이미 불러온 Activities 개수 합
+      const totalLoaded = pages.reduce(
+        (sum, page) => sum + page.activities.length,
+        0
+      );
+
+      // 아직 전체 개수(totalCount)보다 덜 불러왔다면 다음 페이지 요청
+      if (totalLoaded < totalCount) {
+        // lastPage.cursorId가 null이 아니면 (다음 커서가 있다면)
+        // 다음 호출 시 사용할 커서: lastPage.cursorId + 1
+        return lastPage.cursorId !== null ? lastPage.cursorId + 1 : undefined;
+      }
+      return undefined; // 더 이상 불러올 페이지가 없음
+    },
+  });
+}
diff --git a/src/hooks/useResponsivePageSize.ts b/src/hooks/useResponsivePageSize.ts
new file mode 100644
index 0000000..be64400
--- /dev/null
+++ b/src/hooks/useResponsivePageSize.ts
@@ -0,0 +1,27 @@
+import { useState, useEffect } from 'react';
+
+export function useResponsivePageSize() {
+  const [pageSize, setPageSize] = useState(8); // 기본값(데스크톱)
+
+  useEffect(() => {
+    function checkSize() {
+      const width = window.innerWidth;
+      if (width < 768) {
+        // 모바일 기준
+        setPageSize(4);
+      } else if (width < 1024) {
+        // 태블릿 기준
+        setPageSize(9);
+      } else {
+        // 그 외(데스크톱)
+        setPageSize(8);
+      }
+    }
+
+    checkSize(); // 초기 실행
+    window.addEventListener('resize', checkSize);
+    return () => window.removeEventListener('resize', checkSize);
+  }, []);
+
+  return pageSize;
+}