diff --git a/front/src/app/gatherings/[id]/detail/ClientGather.tsx b/front/src/app/gatherings/[id]/detail/ClientGather.tsx
deleted file mode 100644
index 5ecaa0a2..00000000
--- a/front/src/app/gatherings/[id]/detail/ClientGather.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-"use client";
-
-import React from "react";
-
-import GatehringSection from "../../components/detail/gathering-section/GatehringSection";
-import ActionBtnGroup from "../../components/detail/ActionBtnGroup";
-import {
-  useGatherDeatilQuery,
-  useGatherParticipants,
-} from "@/hooks/queries/gatherDetailQuery";
-
-export default function ClientGather({ pageId }: { pageId: number }) {
-  const { data: detailData = [], isLoading: isDetailLoading } =
-    useGatherDeatilQuery(pageId);
-  const { data: participantData = [], isLoading: participantLoading } =
-    useGatherParticipants(pageId, detailData?.participantCount);
-
-  const isGatherLoading = isDetailLoading || participantLoading;
-
-  return (
-    <div>
-      <GatehringSection
-        pageId={pageId}
-        detailData={detailData}
-        participantData={participantData}
-        isGatherLoading={isGatherLoading}
-      />
-      <ActionBtnGroup
-        pageId={pageId}
-        detailData={detailData}
-        isGatherLoading={isGatherLoading}
-      />
-    </div>
-  );
-}
diff --git a/front/src/app/gatherings/[id]/detail/page.tsx b/front/src/app/gatherings/[id]/detail/page.tsx
index e204ff71..124c1961 100644
--- a/front/src/app/gatherings/[id]/detail/page.tsx
+++ b/front/src/app/gatherings/[id]/detail/page.tsx
@@ -1,22 +1,27 @@
-import { getUserReviews } from "@/libs/gatherDetail";
 import CommentsSection from "../../components/detail/comments-section/CommentsSection";
-import ClientGather from "./ClientGather";
-import { Review } from "@/types/reviews";
+import GatherInfo from "../../components/detail/GatherInfo";
+
+import {
+  HydrationBoundary,
+  QueryClient,
+  dehydrate,
+} from "@tanstack/react-query";
+import { prefetchGatherReview } from "@/hooks/queries/gatherDetailQuery";
 
 export default async function Detail({ params }: { params: { id: number } }) {
+  const queryClient = new QueryClient();
   const { id } = params;
-  const initialReviews: Review[] = await getUserReviews({
-    pageId: id,
-    offset: 0,
-    limit: 4,
-  });
+
+  await prefetchGatherReview(queryClient, { pageId: id, offset: 0, limit: 4 });
+
+  const dehydratedState = dehydrate(queryClient);
 
   return (
-    <div className="min-h-screen-minus-nav bg-gray-100">
-      <div className="min-h-screen-minus-nav mx-auto container max-w-[1200px] px-6 md:px-[102px] pt-10 bg-white">
-        <ClientGather pageId={id} />
-        <CommentsSection pageId={id} initialReviews={initialReviews} />
-      </div>
+    <div className="min-h-screen-minus-nav mx-auto container max-w-[1200px] px-6 md:px-[102px] pt-10 bg-white">
+      <GatherInfo pageId={id} />
+      <HydrationBoundary state={dehydratedState}>
+        <CommentsSection pageId={id} />
+      </HydrationBoundary>
     </div>
   );
 }
diff --git a/front/src/app/gatherings/components/detail/ActionBtnGroup.tsx b/front/src/app/gatherings/components/detail/ActionBtnGroup.tsx
index 8994aa8a..921986f5 100644
--- a/front/src/app/gatherings/components/detail/ActionBtnGroup.tsx
+++ b/front/src/app/gatherings/components/detail/ActionBtnGroup.tsx
@@ -11,17 +11,17 @@ import LoginAlertModal from "@/app/components/LoginAlertModal";
 import { useRouter } from "next/navigation";
 import useAuthStore from "@/stores/useAuthStore";
 import { useToastStore } from "@/stores/useToastStore";
-import { IGatherings } from "@/types/gatherings";
 import { isBefore } from "date-fns";
+import { IGatherings } from "@/types/gatherings";
 
 export default function ActionBtnGroup({
+  isGatherLoading,
   pageId,
   detailData,
-  isGatherLoading,
 }: {
   pageId: number;
-  detailData: IGatherings;
   isGatherLoading: boolean;
+  detailData: IGatherings;
 }) {
   const { createdBy, participantCount, capacity, registrationEnd } = detailData;
   const router = useRouter();
@@ -111,27 +111,28 @@ export default function ActionBtnGroup({
   }
 
   return (
-    <div
+    <aside
       className={`fixed bottom-0 left-0 w-full min-h-[84px] border-t-2 border-black bg-white z-10 transition-transform duration-500 ${
         isVisible ? "translate-y-0" : "translate-y-full"
       }`}
     >
       <div className="block md:flex items-center justify-between max-w-[996px] my-5 mx-auto h-full">
-        <div className="px-6">
-          <h3 className="font-semibold">
+        <dl className="px-6">
+          <dt className="font-semibold">
             더 건강한 나와 팀을 위한 프로그램 🏃‍️️
-          </h3>
-          <div className="text-[12px]">
+          </dt>
+          <dd className="text-[12px]">
             {isCreated ? (
               "모임을 공유해서 더 많은 사람들이 참여할 수 있도록 독려해봐요"
             ) : (
-              <div className="md:flex">
-                <div>국내 최고 웰니스 전문가와 프로그램을 </div>
-                <div>통해 지친 몸과 마음을 회복해요</div>
-              </div>
+              <p className="md:flex">
+                <span>국내 최고 웰니스 전문가와 프로그램을</span>
+                <span>통해 지친 몸과 마음을 회복해요</span>
+              </p>
             )}
-          </div>
-        </div>
+          </dd>
+        </dl>
+
         <div className="px-4 md:mt-0 mt-[10px] font-semibold">
           {isCreated ? (
             <div className="flex">
@@ -167,6 +168,6 @@ export default function ActionBtnGroup({
         message="로그인이 필요해요"
         onConfirm={handleLoginRedirect}
       />
-    </div>
+    </aside>
   );
 }
diff --git a/front/src/app/gatherings/components/detail/GatherInfo.tsx b/front/src/app/gatherings/components/detail/GatherInfo.tsx
new file mode 100644
index 00000000..d68c118a
--- /dev/null
+++ b/front/src/app/gatherings/components/detail/GatherInfo.tsx
@@ -0,0 +1,21 @@
+import GatehringSection from "./gathering-section/GatehringSection";
+import {
+  HydrationBoundary,
+  QueryClient,
+  dehydrate,
+} from "@tanstack/react-query";
+import { prefetchGatherDeatilQuery } from "@/hooks/queries/gatherDetailQuery";
+
+export default async function GatherInfo({ pageId }: { pageId: number }) {
+  const queryClient = new QueryClient();
+  await prefetchGatherDeatilQuery(queryClient, pageId);
+  const dehydratedState = dehydrate(queryClient);
+
+  return (
+    <article>
+      <HydrationBoundary state={dehydratedState}>
+        <GatehringSection pageId={pageId} />
+      </HydrationBoundary>
+    </article>
+  );
+}
diff --git a/front/src/app/gatherings/components/detail/comments-section/CommentsCard.tsx b/front/src/app/gatherings/components/detail/comments-section/CommentsCard.tsx
index 3e9c10d7..a7576b85 100644
--- a/front/src/app/gatherings/components/detail/comments-section/CommentsCard.tsx
+++ b/front/src/app/gatherings/components/detail/comments-section/CommentsCard.tsx
@@ -21,36 +21,34 @@ export default function CommentsCard({
   };
 
   return (
-    <div className="h-[102px] mt-4">
-      <div className="flex h-6 space-x-1">
+    <article className="h-[102px] mt-4">
+      <figure className="flex h-6 space-x-1">
         {renderHearts(singleReviewData.score)}
-      </div>
-      <div className="text-[14px] mt-[10px]">{singleReviewData.comment}</div>
-      <div className="flex items-center text-[12px] mt-2">
-        <div className="relative w-6 h-6">
+      </figure>
+      <section className="text-[14px] mt-[10px]">
+        {singleReviewData.comment}
+      </section>
+      <footer className="flex items-center text-[12px] mt-2">
+        <picture className="relative w-6 h-6">
           <Image
             src={userImgSrc}
             className="rounded-full"
             fill
             alt="profile img"
           />
-        </div>
+        </picture>
         <span className="pl-2">{singleReviewData.User.name}</span>
         <span className="w-1 px-[1px] ml-2 mr-3">|</span>
-        <span>
+        <time>
           {format(singleReviewData.createdAt, "MMMM d일", {
             locale: ko,
           }).replace("MMMM", "월")}
-        </span>
-      </div>
-      <div className="relative w-full h-[2px] my-4">
-        <Image
-          src="/images/dashed.svg"
-          alt="dashed Img"
-          fill
-          style={{ objectFit: "contain" }}
-        />
-      </div>
-    </div>
+        </time>
+      </footer>
+      <hr
+        className="border-t-2 border-dashed border-gray-300 my-4"
+        aria-hidden="true"
+      />
+    </article>
   );
 }
diff --git a/front/src/app/gatherings/components/detail/comments-section/CommentsSection.tsx b/front/src/app/gatherings/components/detail/comments-section/CommentsSection.tsx
index 50d5e627..069bbb7e 100644
--- a/front/src/app/gatherings/components/detail/comments-section/CommentsSection.tsx
+++ b/front/src/app/gatherings/components/detail/comments-section/CommentsSection.tsx
@@ -6,65 +6,47 @@ import Pagination from "./Pagination";
 import { Review } from "@/types/reviews";
 import { useGatherReview } from "@/hooks/queries/gatherDetailQuery";
 
-export default function CommentsSection({
-  pageId,
-  initialReviews,
-}: {
-  pageId: number;
-  initialReviews: Review[];
-}) {
-  const [currentPage, setCurrentPage] = useState(1);
-  const reviewsPerPage = 4;
+export default function CommentsSection({ pageId }: { pageId: number }) {
+  const [offset, setOffset] = useState(0);
 
   const { data: reviewData = [] } = useGatherReview({
     pageId,
-    offset: 0,
-    limit: 0,
+    offset,
+    limit: 4,
   });
-
-  const totalReviews = reviewData.length;
-  const totalPages = Math.ceil(totalReviews / reviewsPerPage);
-
-  const indexOfLastReview = currentPage * reviewsPerPage;
-  const indexOfFirstReview = indexOfLastReview - reviewsPerPage;
-  const currentReviews =
-    currentPage === 1
-      ? initialReviews
-      : reviewData.slice(indexOfFirstReview, indexOfLastReview);
+  const { totalItemCount, totalPages, currentPage } = reviewData;
 
   const handlePageChange = (page: number) => {
-    setCurrentPage(page);
+    setOffset((page - 1) * 4);
   };
-
   return (
-    <section className="flex flex-col sm:min-h-360px min-h-[487px] mt-6 p-6 border-t-2 border-[#E5E7EB]">
+    <article className="flex flex-col sm:min-h-360px min-h-[487px] mt-6 p-6 border-t-2 border-[#E5E7EB]">
       <h2 className="text-[18px] font-semibold mb-[16px]">
         이용자들은 이 프로그램을 이렇게 느꼈어요!
       </h2>
 
-      {currentReviews.length > 0 ? (
+      {totalItemCount > 0 ? (
         <>
-          <div className="mb-[86px]">
-            {currentReviews.map((review: Review) => (
+          <section className="min-h-[500px]">
+            {reviewData.data.map((review: Review) => (
               <CommentsCard key={review.id} singleReviewData={review} />
             ))}
-          </div>
-
-          {totalPages > 1 && (
-            <div className="mt-2 md:pb-[86px] pb-[134px]">
-              <Pagination
-                currentPage={currentPage}
-                totalPages={totalPages}
-                onPageChange={handlePageChange}
-              />
-            </div>
-          )}
+          </section>
         </>
       ) : (
-        <div className="flex items-center justify-center h-[487px] md:pb-[86px] pb-[134px]">
+        <section className="flex items-center justify-center h-[487px] md:pb-[86px] pb-[134px]">
           <p className="text-gray-500">아직 리뷰가 없어요</p>
-        </div>
+        </section>
+      )}
+      {totalPages > 1 && (
+        <section className="mt-2 md:pb-[86px] pb-[134px]">
+          <Pagination
+            currentPage={currentPage}
+            totalPages={totalPages}
+            onPageChange={handlePageChange}
+          />
+        </section>
       )}
-    </section>
+    </article>
   );
 }
diff --git a/front/src/app/gatherings/components/detail/gathering-section/GatheringInfo.tsx b/front/src/app/gatherings/components/detail/gathering-section/DetailInfo.tsx
similarity index 69%
rename from front/src/app/gatherings/components/detail/gathering-section/GatheringInfo.tsx
rename to front/src/app/gatherings/components/detail/gathering-section/DetailInfo.tsx
index d15257af..0ce0070a 100644
--- a/front/src/app/gatherings/components/detail/gathering-section/GatheringInfo.tsx
+++ b/front/src/app/gatherings/components/detail/gathering-section/DetailInfo.tsx
@@ -1,8 +1,6 @@
 import DateTag from "@/app/gatherings/components/DateTag";
 import FavoriteButton from "@/app/gatherings/components/FavoriteButton";
 
-import React from "react";
-
 interface GatheringInfo {
   dateInfo: string;
   titleInfo: string;
@@ -10,31 +8,32 @@ interface GatheringInfo {
   pageId: number;
 }
 
-export default function GatheringInfo({
+export default function DetailInfo({
   dateInfo,
   titleInfo,
   locationInfo,
   pageId,
 }: GatheringInfo) {
+  console.log(dateInfo);
   return (
-    <div className="relative mx-[22px] mb-3">
-      <div className="absolute right-0">
+    <section className="relative mx-[22px] mb-3">
+      <figure className="absolute right-0">
         <FavoriteButton
           gatheringId={
             typeof pageId === "string" ? parseInt(pageId, 10) : pageId
           }
         />
-      </div>
-      <div className="flex items-center text-[18x] h-7 font-semibold">
+      </figure>
+      <h2 className="flex items-center text-[18x] h-7 font-semibold">
         {titleInfo || ""}
-      </div>
+      </h2>
       <div className="flex items-center text-[14x] h-5]">
         {locationInfo || ""}
       </div>
-      <div className="flex mt-3">
+      <label className="flex mt-3">
         <DateTag type="day" dateText={dateInfo} textColor="white" />
         <DateTag type="time" dateText={dateInfo} textColor="green" />
-      </div>
-    </div>
+      </label>
+    </section>
   );
 }
diff --git a/front/src/app/gatherings/components/detail/gathering-section/GatehringSection.tsx b/front/src/app/gatherings/components/detail/gathering-section/GatehringSection.tsx
index f8cace19..2a9897e2 100644
--- a/front/src/app/gatherings/components/detail/gathering-section/GatehringSection.tsx
+++ b/front/src/app/gatherings/components/detail/gathering-section/GatehringSection.tsx
@@ -6,74 +6,74 @@ import { motion } from "framer-motion";
 import UserAvatar from "./UserAvatar";
 import ProgressBar from "@/app/gatherings/components/ProgressBar";
 import DeadLineTag from "@/app/gatherings/components/DeadLineTag";
-import GatheringInfo from "./GatheringInfo";
-import GatheringSecSkeleton from "./GatheringSecSkeleton";
-import { GatheringsParticipants, IGatherings } from "@/types/gatherings";
+import DetailInfo from "./DetailInfo";
+// import GatheringSecSkeleton from "./GatheringSecSkeleton";
+import {
+  useGatherDeatilQuery,
+  useGatherParticipants,
+} from "@/hooks/queries/gatherDetailQuery";
+import ActionBtnGroup from "../ActionBtnGroup";
 
-export default function GatheringSection({
-  detailData,
-  participantData,
-  pageId,
-  isGatherLoading,
-}: {
-  pageId: number;
-  detailData: IGatherings;
-  participantData: GatheringsParticipants[];
-  isGatherLoading: boolean;
-}) {
-  if (isGatherLoading) {
-    return <GatheringSecSkeleton />;
-  }
+export default function GatheringSection({ pageId }: { pageId: number }) {
+  const { data: detailData = [], isLoading: isDetailLoading } =
+    useGatherDeatilQuery(pageId);
 
+  const { data: participantData = [], isLoading: participantLoading } =
+    useGatherParticipants(pageId, detailData?.participantCount);
+  console.log(detailData);
   return (
-    <section className="flex items-center justify-center md:flex-row flex-col gap-6 h-[270px]">
-      <motion.div
-        className="relative w-full md:w-1/2 h-[270px]"
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: 1.5 }}
-      >
-        <Image
-          className="relative rounded-3xl"
-          src={detailData.image || "/images/default_gathering_image.png"}
-          alt="Gather Detail Img"
-          sizes="100%"
-          priority={true}
-          placeholder="blur"
-          blurDataURL="/images/blur-img.png"
-          fill
-        />
-        <DeadLineTag endTime={detailData?.registrationEnd} type="lg" />
-      </motion.div>
-
-      <motion.div
-        className="w-full md:w-1/2 h-[270px] py-6 rounded-[24px] border-2 border-gray-200"
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: 1.5 }}
-      >
-        <GatheringInfo
-          dateInfo={detailData?.registrationEnd}
-          titleInfo={detailData?.name}
-          locationInfo={detailData?.location}
-          pageId={pageId}
-        />
-
-        <hr className="border-dashed border-gray-400 mt-[23px]" />
-        <div className="p-6">
-          <UserAvatar
-            participantData={participantData}
-            participantCount={detailData.participantCount}
+    <>
+      <section className="flex items-center justify-center md:flex-row flex-col gap-6 md:h-[270px]">
+        <motion.div
+          className="relative w-full md:w-1/2 h-[270px]"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 1.5 }}
+        >
+          <Image
+            className="relative rounded-3xl"
+            src={detailData.image || "/images/default_gathering_image.png"}
+            alt="Gather Detail Img"
+            sizes="100%"
+            priority={true}
+            placeholder="blur"
+            blurDataURL="/images/blur-img.png"
+            fill
           />
-          <ProgressBar
-            percent={(detailData.participantCount / detailData?.capacity) * 100}
+          <DeadLineTag endTime={detailData?.registrationEnd} type="lg" />
+        </motion.div>
+
+        <div className="w-full md:w-1/2 h-[270px] py-6 rounded-[24px] border-2 border-gray-200">
+          <DetailInfo
+            dateInfo={detailData.registrationEnd}
+            titleInfo={detailData.name}
+            locationInfo={detailData.location}
+            pageId={pageId}
           />
-          <div className="flex items-center justify-between text-[12px]">
-            <div>최소인원 5명</div>
-            <div>최대인원 {detailData?.capacity}명</div>
+
+          <hr className="border-dashed border-gray-400 mt-[23px]" />
+          <div className="p-6">
+            <UserAvatar
+              participantData={participantData}
+              participantCount={detailData.participantCount}
+            />
+            <ProgressBar
+              percent={
+                (detailData.participantCount / detailData?.capacity) * 100
+              }
+            />
+            <div className="flex items-center justify-between text-[12px]">
+              <div>최소인원 5명</div>
+              <div>최대인원 {detailData?.capacity}명</div>
+            </div>
           </div>
         </div>
-      </motion.div>
-    </section>
+      </section>
+      <ActionBtnGroup
+        pageId={pageId}
+        detailData={detailData}
+        isGatherLoading={isDetailLoading || participantLoading}
+      />
+    </>
   );
 }
diff --git a/front/src/hooks/queries/gatherDetailQuery.ts b/front/src/hooks/queries/gatherDetailQuery.ts
index a521520d..54f0c323 100644
--- a/front/src/hooks/queries/gatherDetailQuery.ts
+++ b/front/src/hooks/queries/gatherDetailQuery.ts
@@ -10,7 +10,12 @@ import {
 import useAuthStore from "@/stores/useAuthStore";
 import { useToastStore } from "@/stores/useToastStore";
 import { UserRiveiw } from "@/types/gatherings";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  QueryClient,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
 
 export const useGatherDeatilQuery = (gatherId: number) => {
   return useQuery({
@@ -19,6 +24,16 @@ export const useGatherDeatilQuery = (gatherId: number) => {
   });
 };
 
+export const prefetchGatherDeatilQuery = async (
+  queryClient: QueryClient,
+  gatherId: number,
+) => {
+  await queryClient.prefetchQuery({
+    queryKey: ["gatherDetail", gatherId],
+    queryFn: () => getGatherDetail(gatherId),
+  });
+};
+
 export const useGatherParticipants = (gatherId: number, limit: number) => {
   return useQuery({
     queryKey: ["gatherParticipants", gatherId, limit],
@@ -88,3 +103,13 @@ export const useGatherReview = ({ pageId, offset, limit }: UserRiveiw) => {
     queryFn: () => getUserReviews({ pageId, offset, limit }),
   });
 };
+
+export const prefetchGatherReview = async (
+  queryClient: QueryClient,
+  { pageId, offset, limit }: UserRiveiw,
+) => {
+  await queryClient.prefetchQuery({
+    queryKey: ["gatherReview", pageId, offset, limit],
+    queryFn: () => getUserReviews({ pageId, offset, limit }),
+  });
+};
diff --git a/front/src/libs/gatherDetail.ts b/front/src/libs/gatherDetail.ts
index 226e4ebe..d40ac120 100644
--- a/front/src/libs/gatherDetail.ts
+++ b/front/src/libs/gatherDetail.ts
@@ -44,20 +44,12 @@ export const getGatherJoined = async () => {
 };
 
 export const getUserReviews = async ({ pageId, offset, limit }: UserRiveiw) => {
-  try {
-    const limitQuery = () => {
-      return limit !== 0 ? `&limit=${limit}` : "";
-    };
-
-    const res = await axiosInstance.get(
-      `/reviews?gatheringId=${pageId}${limitQuery()}&offset=${offset}`,
-    );
-    console.log(
-      `/reviews?gatheringId=${pageId}${limitQuery()}&offset=${offset}`,
-    );
-    console.log(res?.data);
-    return res?.data;
-  } catch (error) {
-    console.error(error);
-  }
+  const limitQuery = () => {
+    return limit !== 0 ? `&limit=${limit}` : "";
+  };
+
+  const res = await axiosInstance.get(
+    `/reviews?gatheringId=${pageId}${limitQuery()}&offset=${offset}`,
+  );
+  return res?.data;
 };
diff --git a/front/src/types/gatherings.ts b/front/src/types/gatherings.ts
index f85b66ae..e341206d 100644
--- a/front/src/types/gatherings.ts
+++ b/front/src/types/gatherings.ts
@@ -52,5 +52,5 @@ export interface ICreateGathering {
 export interface UserRiveiw {
   pageId: number;
   offset: number;
-  limit: number;
+  limit?: number;
 }