diff --git a/public/icons/x-white.svg b/public/icons/x-white.svg
index d30d6855..a69e81c2 100644
--- a/public/icons/x-white.svg
+++ b/public/icons/x-white.svg
@@ -1,4 +1,4 @@
-<svg width="8" height="8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5 5L19.5 19.5" stroke="#ffff" strokeWidth="1.8" strokeLinecap="round"/>
-<path d="M19.5 5L5 19.5" stroke="#ffff" strokeWidth="1.8" strokeLinecap="round"/>
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.66602 1.6665L10.5549 10.5554" stroke="white" stroke-width="1.66667" stroke-linecap="round"/>
+<path d="M1.66602 10.5554L10.5549 1.66653" stroke="white" stroke-width="1.66667" stroke-linecap="round"/>
 </svg>
diff --git a/public/icons/x.svg b/public/icons/x.svg
index 242c10bf..ea63ac64 100644
--- a/public/icons/x.svg
+++ b/public/icons/x.svg
@@ -1,4 +1,4 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5 5L19.5 19.5" stroke="#3B3B3B" strokeWidth="1.8" strokeLinecap="round"/>
-<path d="M19.5 5L5 19.5" stroke="#3B3B3B" strokeWidth="1.8" strokeLinecap="round"/>
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.66602 1.6665L10.5549 10.5554" stroke="#3B3B3B" stroke-width="1.66667" stroke-linecap="round"/>
+<path d="M1.66602 10.5554L10.5549 1.66653" stroke="#3B3B3B" stroke-width="1.66667" stroke-linecap="round"/>
 </svg>
diff --git a/src/apis/getCloseGatheringData.ts b/src/apis/getCloseGatheringData.ts
new file mode 100644
index 00000000..eadca6e2
--- /dev/null
+++ b/src/apis/getCloseGatheringData.ts
@@ -0,0 +1,13 @@
+import { instance } from '@/apis/api';
+import type { GetCloseGatheringResponse } from '@manchui-api';
+
+export async function getCloseGatheringData(): Promise<GetCloseGatheringResponse> {
+  try {
+    const res = await instance.get<GetCloseGatheringResponse>('/api/gatherings');
+
+    return res.data;
+  } catch (e) {
+    console.log('GetCloseGatheringResponse 함수에서 오류 발생', e);
+    throw new Error('닫힌 모임 데이터를 불러오는데 실패했습니다.');
+  }
+}
diff --git a/src/apis/getCloseGatheringIdData.ts b/src/apis/getCloseGatheringIdData.ts
new file mode 100644
index 00000000..264aab26
--- /dev/null
+++ b/src/apis/getCloseGatheringIdData.ts
@@ -0,0 +1,13 @@
+import { instance } from '@/apis/api';
+import type { GetCloseGatheringIdResponse } from '@manchui-api';
+
+export async function getCloseGatheringIdData(gatheringsId: number): Promise<GetCloseGatheringIdResponse> {
+  try {
+    const res = await instance.get<GetCloseGatheringIdResponse>(`/api/gatherings/${gatheringsId}`);
+
+    return res.data;
+  } catch (e) {
+    console.log('getCloseGatheringIdData 함수에서 오류 발생', e);
+    throw new Error('닫힌 모임 데이터를 불러오는데 실패했습니다.');
+  }
+}
diff --git a/src/apis/getReviewData.ts b/src/apis/getReviewData.ts
index 8e184cb9..624cc2f2 100644
--- a/src/apis/getReviewData.ts
+++ b/src/apis/getReviewData.ts
@@ -1,16 +1,17 @@
 import { instanceWithoutAccess } from '@/apis/api';
 import type { GetReviewResponse } from '@manchui-api';
 
-type GetReviewProps= {
+type GetReviewProps = {
   category?: string;
   endDate?: string;
   location?: string;
   page?: number;
   query?: string;
+  score?: number;
   size?: number;
   sort?: string;
   startDate?: string;
-}
+};
 
 export async function getReviewData({
   page = 0,
@@ -21,11 +22,13 @@ export async function getReviewData({
   endDate,
   query,
   sort,
+  score,
 }: GetReviewProps): Promise<GetReviewResponse> {
   const params = new URLSearchParams({
     page: page.toString(),
     size: size.toString(),
     ...(sort && { sort }),
+    ...(score && { score: score?.toString() }),
     ...(query && { query }),
     ...(category && { category }),
     ...(location && { location }),
@@ -33,7 +36,6 @@ export async function getReviewData({
     ...(endDate && { endDate }),
   });
 
- 
   try {
     const res = await instanceWithoutAccess.get<GetReviewResponse>('/api/reviews?', {
       params,
diff --git a/src/apis/getReviewScoreZeroData.ts b/src/apis/getReviewScoreZeroData.ts
new file mode 100644
index 00000000..e9b8aa28
--- /dev/null
+++ b/src/apis/getReviewScoreZeroData.ts
@@ -0,0 +1,49 @@
+import { instanceWithoutAccess } from '@/apis/api';
+import type { GetReviewResponse } from '@manchui-api';
+
+type GetReviewProps = {
+  category?: string;
+  endDate?: string;
+  location?: string;
+  page?: number;
+  query?: string;
+  score?: number;
+  size?: number;
+  sort?: string;
+  startDate?: string;
+};
+
+export async function getReviewScoreZeroData({
+  page = 0,
+  size = 10,
+  category,
+  location,
+  startDate,
+  endDate,
+  query,
+  sort,
+  score = 0,
+}: GetReviewProps): Promise<GetReviewResponse> {
+  const params = new URLSearchParams({
+    page: page.toString(),
+    size: size.toString(),
+    ...(score && { score: score?.toString() }),
+    ...(sort && { sort }),
+    ...(query && { query }),
+    ...(category && { category }),
+    ...(location && { location }),
+    ...(startDate && { startDate }),
+    ...(endDate && { endDate }),
+  });
+
+  try {
+    const res = await instanceWithoutAccess.get<GetReviewResponse>('/api/reviews?', {
+      params,
+    });
+
+    return res.data;
+  } catch (e) {
+    console.error('getReviewScoreZeroData 함수에서 오류 발생:', e);
+    throw new Error('리뷰 데이터를 불러오는데 실패했습니다.');
+  }
+}
diff --git a/src/components/Create/CapacityDropdown/index.tsx b/src/components/Create/CapacityDropdown/index.tsx
index 477095f1..3faaeda3 100644
--- a/src/components/Create/CapacityDropdown/index.tsx
+++ b/src/components/Create/CapacityDropdown/index.tsx
@@ -20,8 +20,8 @@ export function CapacityDropdown({ errorMin, errorMax, selectedMinNum, selectedM
   return (
     <div>
       <h2 className="mb-3 text-base font-semibold text-gray-900"> 모집 정원 </h2>
-      <div className="flex w-full flex-col justify-center gap-2 mobile:flex-row mobile:justify-between tablet:gap-10">
-        <div className="flex flex-1 items-center">
+      <div className="flex w-full flex-col justify-center gap-2 phablet:flex-row phablet:justify-between phablet:gap-10">
+        <div className="flex flex-1 items-center gap-2">
           <p className="mr-2 whitespace-nowrap text-sm font-medium">최소 인원 </p>
           <div className="flex-1">
             <LongDropdown
@@ -33,7 +33,7 @@ export function CapacityDropdown({ errorMin, errorMax, selectedMinNum, selectedM
           </div>
         </div>
 
-        <div className="flex flex-1 items-center">
+        <div className="flex flex-1 items-center gap-2">
           <p className="mr-2 whitespace-nowrap text-sm font-medium">최대 인원 </p>
           <div className="flex-1">
             <LongDropdown
diff --git a/src/components/Create/CategoryDropdown/index.tsx b/src/components/Create/CategoryDropdown/index.tsx
index e49ca172..92a462fe 100644
--- a/src/components/Create/CategoryDropdown/index.tsx
+++ b/src/components/Create/CategoryDropdown/index.tsx
@@ -1,21 +1,33 @@
+import { useEffect, useState } from 'react';
 import LongDropdown from '@/components/shared/Dropdown/LongDropdown';
 import { FILTER_OPTIONS } from '@/constants/filter';
+import type { GetCloseGatheringIdResponse } from '@manchui-api';
 
 type CategoryDropdownProps = {
+  closeGatheringIdData?: GetCloseGatheringIdResponse['data'];
   error: string;
   setSelectedCategory: (category: string) => void;
 };
 
-export function CategoryDropdown({ setSelectedCategory ,error}: CategoryDropdownProps) {
-  const categoryList = FILTER_OPTIONS.slice(1).map(option => option.label);
+export function CategoryDropdown({ closeGatheringIdData, setSelectedCategory, error }: CategoryDropdownProps) {
+  const categoryList = FILTER_OPTIONS.slice(1).map((option) => option.label);
+  const [placeholder, setPlaceholder] = useState<string>('서비스 카테고리를 정해주세요.');
+  useEffect(() => {
+    if (closeGatheringIdData) {
+      setSelectedCategory(closeGatheringIdData.category);
+      setPlaceholder(closeGatheringIdData.category);
+    }
+  }, [closeGatheringIdData, setSelectedCategory]);
 
+  const isCategorySelected = Boolean(closeGatheringIdData?.category);
+
+  // console.log('Selected placeholder:', placeholder);
 
   return (
     <div>
       <h2 className="mb-3 text-base font-semibold text-gray-900"> 카테고리 </h2>
-      <LongDropdown listDropdown={categoryList} placeholder="서비스 카테고리를 정해주세요." onListChange={setSelectedCategory} />
-      {error && <p className="mt-1 -mb-5 text-red-500 text-sm font-medium ">{error}를 선택하세요.</p>}
+      <LongDropdown listDropdown={categoryList} placeholder={placeholder} onListChange={setSelectedCategory} disabled={isCategorySelected} />
+      {error && <p className="-mb-5 mt-1 text-sm font-medium text-red-500">{error}를 선택하세요.</p>}
     </div>
   );
 }
-
diff --git a/src/components/Create/DescriptionInput/index.tsx b/src/components/Create/DescriptionInput/index.tsx
index 23a343c9..6f7ebd96 100644
--- a/src/components/Create/DescriptionInput/index.tsx
+++ b/src/components/Create/DescriptionInput/index.tsx
@@ -17,7 +17,7 @@ export function DescriptionInput({ description, setDescription, error }: Descrip
       <textarea
         value={description || ''}
         placeholder="모임에 대한 설명을 작성해주세요."
-        className="min-h-40 w-full resize-none rounded-xl border border-blue-100 bg-blue-50 pl-2 pt-3 text-sm font-medium"
+        className="resize-none min-h-40 w-full rounded-xl border border-blue-100 bg-blue-50 pl-2 pt-3 text-sm font-medium"
         onChange={handleChange}
       />
       {error && <p className="-mb-5 mt-1 text-sm font-medium text-red-500">{errorMessage}</p>}
diff --git a/src/components/Create/GroupNameInput/index.tsx b/src/components/Create/GroupNameInput/index.tsx
index 37069529..2b3cd690 100644
--- a/src/components/Create/GroupNameInput/index.tsx
+++ b/src/components/Create/GroupNameInput/index.tsx
@@ -1,29 +1,81 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { getCloseGatheringData } from '@/apis/getCloseGatheringData';
+import LongDropdown from '@/components/shared/Dropdown/LongDropdown';
+import useGetCloseGatheringData from '@/hooks/useGetCloseGatheringData';
+import { dehydrate, QueryClient } from '@tanstack/react-query';
+
+type CloseGatheringData = {
+  gatheringId: number;
+  groupName: string;
+}[];
 
 type GroupNameInputProps = {
   error: string;
   name: string | null;
+  setGatheringId: (id: number) => void;
   setName: (name: string) => void;
 };
 
-export function GroupNameInput({ name, setName, error }: GroupNameInputProps) {
-  
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const inputValue = e.target.value;
-    setName(inputValue); 
-  };
+export function GroupNameInput({ name, setName, setGatheringId, error }: GroupNameInputProps) {
+  const { data: closeGatheringData } = useGetCloseGatheringData();
+
+  // const gatheringList: CloseGatheringData = (closeGatheringData?.data?.closedGatheringList as unknown as CloseGatheringData) || [];
 
-  const errorMessage = error==='모임 이름' ? `${error}을 입력하세요.` : error;
+  const errorMessage = error === '모임 이름' ? `${error}을 입력하세요.` : error;
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault(); // Enter 키에 의한 폼 제출을 막음
+    }
+  };
   return (
     <div>
-      <h2 className="text-base font-semibold text-gray-900"> 모임 이름 </h2>
+      <h2 className="text-base font-semibold text-gray-900">모임 이름</h2>
+      {/* {gatheringList.length > 0 ? (
+        <LongDropdown
+          isCloseGathering
+          listDropdown={gatheringList} 
+          placeholder="모임 이름을 작성해주세요"
+          onListChange={(selectedGroupName) => {
+            setName(selectedGroupName);
+            const selectedGroup = gatheringList.find((item) => item.groupName === selectedGroupName);
+            if (selectedGroup) {
+              setGatheringId(selectedGroup.gatheringId);
+            }
+          }}
+        />
+      ) : ( */}
       <input
         value={name || ''}
-        placeholder="모임 이름을 작성해주세요"
-        className='mt-3 h-11 w-full rounded-xl border border-blue-100 bg-blue-50 pl-2 text-sm font-medium '
-        onChange={handleChange}
+        placeholder="모임 이름을 작성해 주세요"
+        className="mt-3 h-11 w-full rounded-xl border border-blue-100 bg-blue-50 pl-2 text-sm font-medium"
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          const inputValue = e.target.value;
+          setName(inputValue);
+          // const selectedGroup = gatheringList.find((item) => item.groupName === inputValue);
+          // if (selectedGroup) {
+          //   setGatheringId(selectedGroup.gatheringId);
+          // }
+        }}
+        onKeyPress={handleKeyPress}
       />
-         {error && <p className="mt-1 text-red-500 text-sm font-medium -mb-5">{errorMessage}</p>}
+      {/* )} */}
+      {error && <p className="-mb-5 mt-1 text-sm font-medium text-red-500">{errorMessage}</p>}
     </div>
-
   );
 }
+
+export const getServerSideProps = async () => {
+  const queryClient = new QueryClient();
+
+  await queryClient.prefetchQuery({
+    queryKey: ['getClosegatherings'],
+    queryFn: () => getCloseGatheringData(),
+  });
+
+  return {
+    props: {
+      dehydratedState: dehydrate(queryClient),
+    },
+  };
+};
diff --git a/src/components/Create/ImageUploader/index.tsx b/src/components/Create/ImageUploader/index.tsx
index 84822227..db10e80f 100644
--- a/src/components/Create/ImageUploader/index.tsx
+++ b/src/components/Create/ImageUploader/index.tsx
@@ -37,7 +37,7 @@ export default function ImageUploader({ error, setSelectedImage }: ImageUploader
       <div className="scrollbar-hide -mt-3 flex items-center space-x-3 overflow-x-auto">
         <button
           type="button"
-          className="mt-3 flex size-[100px] shrink-0 flex-col items-center justify-center rounded-lg border border-blue-200 text-sm font-medium text-blue-800 mobile:size-[150px]"
+          className="mt-3 flex aspect-[280/156] h-[100px] shrink-0 flex-col items-center justify-center rounded-lg border border-blue-200 text-sm font-medium text-blue-800 tablet:h-[150px]"
           onClick={handleButtonClick}
         >
           <Image src="/icons/+.svg" alt="+" width={18} height={18} className="mb-2" />
@@ -47,7 +47,7 @@ export default function ImageUploader({ error, setSelectedImage }: ImageUploader
         <input type="file" accept="image/*" ref={fileInputRef} onChange={handleFileChange} style={{ display: 'none' }} />
 
         {previewImage && (
-          <div className="relative mt-3 size-[100px] shrink-0 rounded-lg border border-blue-200 mobile:size-[150px]">
+          <div className="relative mt-3 aspect-[280/156] h-[100px] shrink-0 rounded-lg border border-blue-200 tablet:h-[150px]">
             <Image src={previewImage} alt="예시 이미지" layout="fill" objectFit="cover" className="rounded-lg" />
             <button
               type="button"
diff --git a/src/components/review/FilterSection/ScoreFilter/index.tsx b/src/components/review/FilterSection/ScoreFilter/index.tsx
new file mode 100644
index 00000000..1971fb59
--- /dev/null
+++ b/src/components/review/FilterSection/ScoreFilter/index.tsx
@@ -0,0 +1,25 @@
+import Image from 'next/image';
+import { Toast } from '@/components/shared/Toast';
+import { useScore, useSetScore } from '@/store/useFilterStore';
+
+export default function ScoreFilter() {
+  const score = useScore();
+  const setScore = useSetScore();
+
+  const handleScoreRemove = () => {
+    setScore(0);
+    Toast('info', '별점 필터가 초기화되었습니다.');
+  };
+  return (
+    <div>
+      {score ? (
+        <div className="relative flex items-center justify-center gap-2 rounded-lg border border-gray-100 bg-blue-800 p-3 text-13-16-response font-semibold text-white ease-out">
+          <span className="leading-none">{score}점</span>
+          <button type="button" onClick={handleScoreRemove} className="flex size-3 items-center justify-center">
+            <Image src="icons/x-white.svg" alt="x" width={12} height={12} />
+          </button>
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/src/components/review/FilterSection/SortToggle/index.tsx b/src/components/review/FilterSection/SortToggle/index.tsx
index 5a5624ba..804d7c2e 100644
--- a/src/components/review/FilterSection/SortToggle/index.tsx
+++ b/src/components/review/FilterSection/SortToggle/index.tsx
@@ -1,26 +1,25 @@
-import type { Dispatch, SetStateAction } from 'react';
 import { useState } from 'react';
 import Dropdown from '@/components/main/Dropdown';
 import { Toast } from '@/components/shared/Toast';
+import { useSetSort, useSort } from '@/store/useFilterStore';
 
 const sortData = [
   { api: 'ratingDesc', name: '별점 높은순' },
   { api: 'ratingAsc', name: '별점 낮은순' },
 ];
 
-interface RegionDropdownProps {
-  setSort: Dispatch<SetStateAction<string | undefined>>;
-  sort?: string;
-}
 
-export default function SortToggle({ sort, setSort }: RegionDropdownProps) {
+
+export default function SortToggle() {
   const [sortDropOpen, setSortDropOpen] = useState(false);
+ const sort=useSort();
+ const setSort=useSetSort();
 
   const handleInitClick = () => {
     setSort(undefined);
     setSortDropOpen(false);
 
-    Toast('success', '순서가 초기화되었습니다.');
+    Toast('info', '순서가 초기화되었습니다.');
   };
 
   const handleSortSelect = (value: { api: string; name: string }) => {
diff --git a/src/components/review/FilterSection/index.tsx b/src/components/review/FilterSection/index.tsx
index 819af469..768473ac 100644
--- a/src/components/review/FilterSection/index.tsx
+++ b/src/components/review/FilterSection/index.tsx
@@ -1,29 +1,27 @@
-import { type Dispatch, type SetStateAction } from 'react';
 import CategoryList from '@/components/main/FilterSection/CategoryList';
 import DateDropdown from '@/components/main/FilterSection/DateDropdown';
 import RegionDropdown from '@/components/main/FilterSection/RegionDropdown';
+import type { GetReviewResponse } from '@manchui-api';
 
+import ScoreFilter from './ScoreFilter';
 import SortToggle from './SortToggle';
+import ReviewRating from '../ReviewRating';
 
-interface FilterSectionProps {
-  setSort: Dispatch<SetStateAction<string | undefined>>;
-  sort?: string;
-}
-
-export default function FilterSection({ sort, setSort }: FilterSectionProps) {
+export default function FilterSection({ data, scoreReviewCount }: { data?: GetReviewResponse['data']; scoreReviewCount: number | undefined }) {
   return (
-    <div className="scrollbar-hide relative my-0 flex w-full select-none flex-col gap-2 bg-white px-4 py-5 mobile:rounded-lg">
+    <div className="flex flex-col gap-3 border-t border-t-gray-100 px-4 py-6">
       {/* 카테고리 */}
       <CategoryList />
-
+      <ReviewRating data={data} scoreReviewCount={scoreReviewCount} />
       {/* 필터 */}
-      <div className="flex select-none items-center justify-between">
+      <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
           <RegionDropdown />
           <DateDropdown />
+          <ScoreFilter />
         </div>
-        {/* 정렬 버튼 */}
-        <SortToggle sort={sort} setSort={setSort} />
+
+        <SortToggle />
       </div>
     </div>
   );
diff --git a/src/components/review/MainHeader/index.tsx b/src/components/review/MainHeader/index.tsx
index e8999c3c..e3dc6d7c 100644
--- a/src/components/review/MainHeader/index.tsx
+++ b/src/components/review/MainHeader/index.tsx
@@ -1,8 +1,21 @@
-export default function MainHeader() {
+import * as m from 'framer-motion/m';
+
+export default function MainHeader({ isError }: { isError: boolean }) {
   return (
-    <div className="flex h-[155px] w-full flex-col items-center justify-center gap-[10px] bg-blue-800 text-white">
-      <p className="text-2xl font-bold">모든 리뷰</p>
-      <span className="text-base font-medium">만취를 이용한 분들은 이렇게 느꼈어요</span>
-    </div>
+    <m.div
+      initial={{ opacity: 0, y: -50 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3 }}
+      className="mt-[60px] flex h-bookmark-banner min-w-[340px] items-center justify-center bg-blue-800 text-16-20-response font-semibold text-white"
+    >
+      {isError ? (
+        '잠시 후 다시 시도해주세요.'
+      ) : (
+        <div className="flex flex-col items-center justify-center">
+          <p className="text-16-26-response font-bold">모든 리뷰</p>
+          <span className="text-13-16-response font-medium">만취를 이용한 분들은 이렇게 느꼈어요</span>
+        </div>
+      )}
+    </m.div>
   );
 }
diff --git a/src/components/review/ReviewCard/index.tsx b/src/components/review/ReviewCard/index.tsx
index 52a5a2a3..6c364049 100644
--- a/src/components/review/ReviewCard/index.tsx
+++ b/src/components/review/ReviewCard/index.tsx
@@ -1,7 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
-import ArrowBtn from 'public/icons/ArrowBtn';
 import Rating from '@/components/shared/Rating';
 import type { GetReviewResponse } from '@manchui-api';
 
@@ -45,17 +44,18 @@ export function ReviewCard({ review }: ReviewCardSProps) {
   }, [review.comment]);
 
   return (
-    <div
-      className={`w-[280px] flex-col items-start gap-4 tablet:flex tablet:w-full tablet:flex-row ${isExpanded ? 'border-b-2 border-dashed border-gray-50' : ''}`}
+    <Link
+      href={`/detail/${review.gatheringId}`}
+      className={`w-[280px] flex-col items-start gap-4 tablet:flex tablet:w-full tablet:flex-row group${isExpanded ? 'border-b-2 border-dashed border-gray-50' : ''}`}
     >
-      <div className="h-[156px] w-[280px] min-w-[280px] overflow-hidden rounded-lg">
+      <div className="h-[156px] w-[280px] min-w-[280px] overflow-hidden rounded-lg ">
         {review.gatheringImage ? (
           <Image
             alt="testImage"
             src={review.gatheringImage}
             width={280}
             height={156}
-            className="size-full transform object-cover transition-transform duration-300 ease-in-out hover:scale-110"
+            className="size-full transform object-cover transition-transform duration-300 ease-in-out group-hover:scale-110"
           />
         ) : (
           <div className="relative flex-shrink-0 overflow-hidden rounded-lg bg-gray-200" />
@@ -68,20 +68,16 @@ export function ReviewCard({ review }: ReviewCardSProps) {
         <div className="-mb-1 flex w-full items-start justify-between">
           {/* <Rating score={review.score} /> */}
           <div className="flex w-full flex-col items-start gap-1 text-lg font-semibold text-blue-900 tablet:flex-row">
-            <span>{review.groupName}</span>
+            <span>
+              {review.category} | {review.groupName}
+            </span>
             <div className="flex gap-1">
               <span className="hidden tablet:flex"> &bull;</span>
               <span className="-mt-1 text-sm text-blue-500 tablet:mt-0 tablet:text-lg tablet:text-blue-900">{review.location}</span>
             </div>
           </div>
-          <Link
-            href={`/detail/${review.gatheringId}`}
-            className="inline-flex h-8 items-center justify-center whitespace-nowrap rounded-md bg-blue-800 py-2 pl-6 pr-3 text-sub-response font-bold text-white transition-all duration-200"
-          >
-            보러가기
-            <ArrowBtn direction="right" />
-          </Link>
         </div>
+
         {/* <div className="flex w-full items-center gap-1 text-sm font-semibold text-blue-900 -mt-1 ">
           <span>{review.groupName}</span>
           <span> &bull;</span>
@@ -89,30 +85,34 @@ export function ReviewCard({ review }: ReviewCardSProps) {
         </div> */}
         <Rating score={review.score} />
 
-        <div className="flex items-center gap-2 text-xs font-medium">
+        <div className="flex w-full flex-col items-start pt-1">
+          <p ref={commentRef} className={`text-pretty break-all text-sm font-medium ${isExpanded ? '' : 'line-clamp-none tablet:line-clamp-2'}`}>
+            {review.comment}
+            {!isExpanded && showMoreButton && '...'}
+          </p>
+          {showMoreButton && <MoreButton isExpanded={isExpanded} onClick={toggleExpand} />}
+          {/* <p ref={commentRef} className={`text-pretty break-all text-sm font-medium ${isExpanded ? '' : 'line-clamp-1'}`}>
+            {review.comment}
+            {!isExpanded && showMoreButton && '...'}
+          </p>
+          {showMoreButton && <MoreButton isExpanded={isExpanded} onClick={toggleExpand} />} */}
+        </div>
+        <div className="flex items-center gap-2 text-xs font-medium pb-2 tablet:pb-0">
           <div className="relative">
             <Image
               alt="profile"
-              src={review.profileImagePth ? review.profileImagePth : 'images/profile.svg'}
+              src={review.profileImagePath ? review.profileImagePath : 'images/profile.svg'}
               width={24}
               height={24}
               style={{ objectFit: 'cover' }}
-              className="rounded-full"
+              className="size-6 rounded-full"
             />
           </div>
           <span className="text-blue-700">{review.name}</span>
           <span>|</span>
           <span className="text-blue-500">{formattedDate}</span>
         </div>
-
-        <div className="flex w-full flex-col items-start pb-2">
-          <p ref={commentRef} className={`text-pretty break-all text-sm font-medium ${isExpanded ? '' : 'line-clamp-1'}`}>
-            {review.comment}
-            {!isExpanded && showMoreButton && '...'}
-          </p>
-          {showMoreButton && <MoreButton isExpanded={isExpanded} onClick={toggleExpand} />}
-        </div>
       </div>
-    </div>
+    </Link>
   );
 }
diff --git a/src/components/review/ReviewCardList/index.tsx b/src/components/review/ReviewCardList/index.tsx
index a6a3a2df..b34c6817 100644
--- a/src/components/review/ReviewCardList/index.tsx
+++ b/src/components/review/ReviewCardList/index.tsx
@@ -1,11 +1,14 @@
 /* eslint-disable no-unused-vars */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 // 스켈레톤 나중에 추가
+import Lottie from 'lottie-react';
 import { MessageWithLink } from '@/components/main/CardSection';
 import type { GetReviewResponse } from '@manchui-api';
 
 import { ReviewCard } from '../ReviewCard';
 
+import Empty from 'public/lottie/empty.json';
+
 type ReviewCardListProps = {
   data?: GetReviewResponse['data'];
   isError: boolean;
@@ -17,13 +20,18 @@ export default function ReviewCardList({ data, isLoading, isError, skeletonCount
   return (
     <section className="mt-0 flex w-full flex-col items-center gap-6 bg-white px-4 pb-6 pt-1 mobile:rounded-lg tablet:items-start">
       {data?.reviewContentList.map((reviewContent) => <ReviewCard key={reviewContent.reviewId} review={reviewContent} />)}
-      {data?.reviewCount === 0 && (
-        <div className="relative h-[200px] tablet:flex-row w-[280px] flex-col items-start gap-4 bg-white tablet:flex tablet:w-full">
-         <MessageWithLink link="/main" message="아직 작성된 리뷰가 없습니다." buttonText="모임 둘러보기" />
+      {data?.scoreReviewCount === 0 && (
+        <div className="relative left-1/2 w-full -translate-x-1/2">
+          <Lottie animationData={Empty} className="h-empty fill-white" />
+          <MessageWithLink link="/main" message="아직 작성된 리뷰가 없습니다." buttonText="모임 둘러보기" />
         </div>
       )}
 
-      {isError && <MessageWithLink message="에러가 발생하였습니다." buttonText="다시 시도하기" onClick={() => window.location.reload()} />}
+      {isError && (
+        <div className="absolute left-1/2 w-full -translate-x-1/2">
+          <MessageWithLink message="에러가 발생하였습니다." buttonText="다시 시도하기" onClick={() => window.location.reload()} />
+        </div>
+      )}
     </section>
   );
 }
diff --git a/src/components/review/ReviewContainer/index.tsx b/src/components/review/ReviewContainer/index.tsx
deleted file mode 100644
index 5dfa3e48..00000000
--- a/src/components/review/ReviewContainer/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function ReviewContainer({ children }: { children: React.ReactNode }) {
-  return <div className="mx-auto flex w-full min-w-[340px] flex-col items-center justify-start pt-6 px-4  mobile:pt-[54px] min-h-screen">{children}</div>;
-}
diff --git a/src/components/review/ReviewRating/index.tsx b/src/components/review/ReviewRating/index.tsx
new file mode 100644
index 00000000..1be09892
--- /dev/null
+++ b/src/components/review/ReviewRating/index.tsx
@@ -0,0 +1,67 @@
+import { ProgressBar } from '@/components/shared/progress-bar';
+import { Toast } from '@/components/shared/Toast';
+import { useScore, useSetScore } from '@/store/useFilterStore';
+import type { GetReviewResponse } from '@manchui-api';
+
+export default function ReviewRating({ data, scoreReviewCount }: { data?: GetReviewResponse['data']; scoreReviewCount: number | undefined }) {
+  const score = useScore();
+  const setScore = useSetScore();
+
+  const handleScoreToggle = (reversedIndex: number) => {
+    setScore(reversedIndex);
+    Toast('success', `${reversedIndex}점 필터가 적용되었습니다.`);
+  };
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-4 border-b-2 border-blue-100 py-6 pt-4 tablet:flex-row tablet:gap-[140px] pc:flex-row">
+      <div className="flex flex-col items-center gap-1">
+        <h1 className="text-13-16-response font-medium text-gray-400">총 리뷰수</h1>
+        <div className="flex items-baseline justify-end">
+          <span className="text-24-40-response font-bold">{scoreReviewCount || 0}</span>
+          <span className="ml-1 text-16-20-response font-bold">개</span>
+        </div>
+      </div>
+      <div>
+        <section className="my-6 flex flex-col-reverse items-center justify-center gap-6 pc:mb-16 pc:mt-10 pc:flex-row pc:gap-[42px]">
+          <div className="flex flex-col justify-center gap-6 pc:gap-8">
+            <div className="flex flex-col items-center gap-4">
+              {' '}
+              <div>
+                {Object.entries(data?.scoreList || {})
+                  .slice(1)
+                  .map(([key, value], index, array) => {
+                    const reversedIndex = array.length - index;
+                    const scoreValue = value || 0;
+
+                    return (
+                      <div
+                        key={key}
+                        className="group mb-1 flex w-full cursor-pointer items-center justify-between gap-4 transition-all duration-200"
+                        onClick={() => handleScoreToggle(reversedIndex)}
+                      >
+                        <p
+                          className={`text-md font-medium text-gray-800 ${score === reversedIndex ? 'font-bold text-yellow-500' : ''} group-hover:font-light group-hover:text-yellow-500`}
+                        >
+                          {reversedIndex}점
+                        </p>
+                        <div
+                          className={`w-[200px] transition-all duration-200 group-hover:scale-105 group-hover:brightness-95 ${score === reversedIndex ? 'scale-105 brightness-90' : ''}`}
+                        >
+                          <ProgressBar maxValue={data?.reviewCount || 1} value={scoreValue} design="primary" />
+                        </div>
+                        <p
+                          className={`text-md font-medium text-gray-800 ${score === reversedIndex ? 'font-bold text-yellow-500' : ''} group-hover:font-light group-hover:text-yellow-500`}
+                        >
+                          {scoreValue}
+                        </p>
+                      </div>
+                    );
+                  })}
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/shared/Dropdown/LongDropdown/index.tsx b/src/components/shared/Dropdown/LongDropdown/index.tsx
index 7cae9bd5..e2833cbe 100644
--- a/src/components/shared/Dropdown/LongDropdown/index.tsx
+++ b/src/components/shared/Dropdown/LongDropdown/index.tsx
@@ -5,33 +5,69 @@ import Image from 'next/image';
 
 type LongDropdownProps = {
   disabled?: boolean;
-  listDropdown: string[];
-
+  isCloseGathering?: boolean;
+  listDropdown: Array<string | { gatheringId: number; groupName: string }>;
   maxValue?: number;
   minValue?: number;
   onListChange: (list: string) => void;
   placeholder: string;
+  setGatheringId?: (id: number) => void;
 };
 
-export default function LongDropdown({ listDropdown = [], placeholder, onListChange, disabled, maxValue, minValue }: LongDropdownProps) {
+export default function LongDropdown({
+  listDropdown = [],
+  placeholder,
+  onListChange,
+  disabled,
+  maxValue,
+  minValue,
+  isCloseGathering = false,
+  setGatheringId,
+}: LongDropdownProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [selectedList, setSelectedList] = useState<string>(placeholder);
+  const [inputValue, setInputValue] = useState<string>('');
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const [isCloseDisabled, setIsCloseDisabled] = useState<boolean>(false);
 
   const toggleDropdown = () => {
-    if (!disabled) {
+    if (!disabled && (!isCloseDisabled || !isCloseGathering)) {
       setIsOpen((prev) => !prev);
     }
   };
 
-  const handleLocationSelect = (list: string) => {
+  const handleListSelect = (list: string | { gatheringId: number; groupName: string }) => {
     if (!disabled) {
-      setSelectedList(list);
-      onListChange?.(list);
+      if (isCloseGathering) {
+        setIsCloseDisabled(true);
+      }
+
+      const selectedGroupName = isCloseGathering && typeof list === 'object' ? list.groupName : (list as string);
+      setSelectedList(selectedGroupName);
+      setInputValue(selectedGroupName);
+      onListChange(selectedGroupName);
+
+      if (isCloseGathering && typeof list === 'object') {
+        if (setGatheringId) {
+          setGatheringId(list.gatheringId);
+        }
+      }
+
       setIsOpen(false);
     }
   };
 
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
+  };
+
+  const handleCloseClick = () => {
+    setIsCloseDisabled(false);
+    setSelectedList('');
+    setInputValue('');
+    onListChange('');
+  };
+
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
@@ -63,8 +99,30 @@ export default function LongDropdown({ listDropdown = [], placeholder, onListCha
         onClick={toggleDropdown}
         disabled={disabled}
       >
-        <span className="truncate">{triggerLabel}</span>
-        <Image src="/icons/down.svg" alt="down arrow" width={24} height={24} className={`ml-2 duration-300 ${isOpen ? 'rotate-180' : 'rotate-0'}`} />
+        {isCloseGathering ? (
+          <input
+            type="text"
+            value={inputValue}
+            onChange={handleInputChange}
+            placeholder={placeholder}
+            className="-ml-2 w-full border-none bg-transparent p-2 text-sm text-gray-800 outline-none"
+            disabled={isCloseDisabled || disabled}  // Disabled condition
+          />
+        ) : (
+          <span className="truncate">{triggerLabel}</span>
+        )}
+        <Image
+          src={isCloseGathering && isCloseDisabled ? '/icons/x.svg' : '/icons/down.svg'}
+          alt="down arrow"
+          width={isCloseGathering && isCloseDisabled ? 12 : 24}
+          height={isCloseGathering && isCloseDisabled ? 12 : 24}
+          className={clsx('ml-2', {
+            'rotate-180 duration-300': !isCloseGathering && isOpen,
+            'rotate-0 duration-300': !isCloseGathering && !isOpen,
+            'mr-1 rotate-180 duration-0': isCloseGathering && isCloseDisabled,
+          })}
+          onClick={isCloseGathering && isCloseDisabled ? handleCloseClick : undefined}
+        />
       </button>
       {isOpen && (
         <div
@@ -74,27 +132,26 @@ export default function LongDropdown({ listDropdown = [], placeholder, onListCha
           )}
         >
           <ul>
-            {listDropdown
-              .filter((list) => list !== placeholder)
-              .map((list, index) => {
-                const isDisabled = maxValue !== undefined && parseInt(list) > maxValue;
-
-                const minisDisabled = minValue !== undefined && parseInt(list) < minValue;
-
-                return (
-                  <li
-                    key={index}
-                    onClick={() => !isDisabled && !minisDisabled && handleLocationSelect(list)}
-                    className={clsx(
-                      'm-2 cursor-pointer rounded-xl px-2 py-1 text-left',
-                      minisDisabled || isDisabled ? 'cursor-not-allowed text-gray-400' : 'hover:bg-gray-100',
-                      selectedList === list && 'bg-gray-50',
-                    )}
-                  >
-                    {list}
-                  </li>
-                );
-              })}
+            {listDropdown.map((list, index) => {
+              const displayText = isCloseGathering && typeof list === 'object' ? list.groupName : (list as string);
+
+              const isDisabled = maxValue !== undefined && parseInt(displayText) > maxValue;
+              const minisDisabled = minValue !== undefined && parseInt(displayText) < minValue;
+
+              return (
+                <li
+                  key={index}
+                  onClick={() => !isDisabled && !minisDisabled && handleListSelect(list)}
+                  className={clsx(
+                    'm-2 cursor-pointer rounded-xl px-2 py-1 text-left',
+                    minisDisabled || isDisabled ? 'cursor-not-allowed text-gray-400' : 'hover:bg-gray-100',
+                    selectedList === displayText && 'bg-gray-50',
+                  )}
+                >
+                  {displayText}
+                </li>
+              );
+            })}
           </ul>
         </div>
       )}
diff --git a/src/hooks/useGetCloseGatheringData.ts b/src/hooks/useGetCloseGatheringData.ts
new file mode 100644
index 00000000..ccf82e03
--- /dev/null
+++ b/src/hooks/useGetCloseGatheringData.ts
@@ -0,0 +1,12 @@
+import { getCloseGatheringData } from '@/apis/getCloseGatheringData';
+import type { GetCloseGatheringResponse } from '@manchui-api';
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
+
+const useGetCloseGatheringData = () =>
+  useQuery<GetCloseGatheringResponse>({
+    queryKey: ['create'],
+    queryFn: () => getCloseGatheringData(),
+    placeholderData: keepPreviousData,
+  });
+
+export default useGetCloseGatheringData;
diff --git a/src/hooks/useGetCloseGatheringIdData.ts b/src/hooks/useGetCloseGatheringIdData.ts
new file mode 100644
index 00000000..71f22b13
--- /dev/null
+++ b/src/hooks/useGetCloseGatheringIdData.ts
@@ -0,0 +1,18 @@
+/* eslint-disable @typescript-eslint/consistent-type-assertions */
+import { getCloseGatheringIdData } from '@/apis/getCloseGatheringIdData';
+import type { GetCloseGatheringIdResponse } from '@manchui-api';
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
+
+const useGetCloseGatheringIdData = (gatheringId: number | null) =>
+  useQuery<GetCloseGatheringIdResponse>({
+    queryKey: ['create', gatheringId],
+    queryFn: async () => {
+        if (gatheringId === null) {
+          return Promise.resolve({} as GetCloseGatheringIdResponse);
+        }
+        return getCloseGatheringIdData(gatheringId); 
+      },    placeholderData: keepPreviousData,
+    enabled: gatheringId !== null,
+  });
+
+export default useGetCloseGatheringIdData;
diff --git a/src/hooks/useGetReviewData.ts b/src/hooks/useGetReviewData.ts
index fd7f4b0b..797d1514 100644
--- a/src/hooks/useGetReviewData.ts
+++ b/src/hooks/useGetReviewData.ts
@@ -4,7 +4,7 @@ import { keepPreviousData, useQuery } from '@tanstack/react-query';
 
 const useGetReviewData = (request: GetReviewRequest) =>
   useQuery<GetReviewResponse>({
-    queryKey: ['review', request.page, request.size, request.sort, request.query, request.location, request.endDate, request.category, request.startDate],
+    queryKey: ['review', request].filter(Boolean),
     queryFn: () => getReviewData(request),
     placeholderData: keepPreviousData,
   });
diff --git a/src/hooks/useGetReviewScoreZeroData.ts b/src/hooks/useGetReviewScoreZeroData.ts
new file mode 100644
index 00000000..5664f933
--- /dev/null
+++ b/src/hooks/useGetReviewScoreZeroData.ts
@@ -0,0 +1,12 @@
+import { getReviewScoreZeroData } from '@/apis/getReviewScoreZeroData';
+import type { GetReviewRequest, GetReviewResponse } from '@manchui-api';
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
+
+const useGetReviewScoreZeroData = (request: GetReviewRequest) =>
+  useQuery<GetReviewResponse>({
+    queryKey: ['review', request].filter(Boolean),
+    queryFn: () => getReviewScoreZeroData(request),
+    placeholderData: keepPreviousData,
+  });
+
+export default useGetReviewScoreZeroData;
diff --git a/src/pages/bookmark/index.tsx b/src/pages/bookmark/index.tsx
index 9219f649..e1d4022e 100644
--- a/src/pages/bookmark/index.tsx
+++ b/src/pages/bookmark/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable tailwindcss/no-custom-classname */
 import { useEffect, useState } from 'react';
 import dynamic from 'next/dynamic';
diff --git a/src/pages/create/index.tsx b/src/pages/create/index.tsx
index 188bdbc4..272b5143 100644
--- a/src/pages/create/index.tsx
+++ b/src/pages/create/index.tsx
@@ -13,7 +13,7 @@ import { useEffect, useState } from 'react';
 import clsx from 'clsx';
 import router from 'next/router';
 import { instance } from '@/apis/api';
-// import { getCloseGatheringIdData } from '@/apis/getCloseGatheringIdData';
+import { getCloseGatheringIdData } from '@/apis/getCloseGatheringIdData';
 import { CapacityDropdown } from '@/components/Create/CapacityDropdown';
 import { CategoryDropdown } from '@/components/Create/CategoryDropdown';
 import { DescriptionInput } from '@/components/Create/DescriptionInput';
@@ -22,7 +22,7 @@ import ImageUploader from '@/components/Create/ImageUploader';
 import { LocationDropdown } from '@/components/Create/LocationDropdown';
 import Calendar from '@/components/shared/Calendar';
 import { Toast } from '@/components/shared/Toast';
-// import useGetCloseGatheringIdData from '@/hooks/useGetCloseGatheringIdData';
+import useGetCloseGatheringIdData from '@/hooks/useGetCloseGatheringIdData';
 import { dehydrate, QueryClient } from '@tanstack/react-query';
 
 type TimeChip = {
@@ -316,7 +316,7 @@ export default function CreatePage() {
       </header>
       <div className="mx-auto mb-8 mt-5 flex max-w-[343px] flex-col items-center justify-center px-3 mobile:max-w-[744px] tablet:max-w-[1000px]">
         <form onSubmit={handleSubmit} className="w-full space-y-6 mobile:space-y-10">
-          <GroupNameInput name={name} setName={handleInputChange('모임 이름')} error={errors['모임 이름']} />
+          <GroupNameInput setGatheringId={setGatheringId} name={name} setName={handleInputChange('모임 이름')} error={errors['모임 이름']} />
 
           <CategoryDropdown setSelectedCategory={handleInputChange('카테고리')} error={errors['카테고리']} />
 
@@ -424,20 +424,20 @@ export default function CreatePage() {
   );
 }
 
-// export const getServerSideProps = async (gatheringId: number) => {
-//   const queryClient = new QueryClient();
-
-//   await queryClient.prefetchQuery({
-//     queryKey: ['create'],
-//     queryFn: () => getCloseGatheringIdData(gatheringId),
-//   });
-
-//   return {
-//     props: {
-//       dehydratedState: dehydrate(queryClient),
-//       seo: {
-//         title: '만취 - 생성 페이지',
-//       },
-//     },
-//   };
-// };
+export const getServerSideProps = async (gatheringId: number) => {
+  const queryClient = new QueryClient();
+
+  await queryClient.prefetchQuery({
+    queryKey: ['create'],
+    queryFn: () => getCloseGatheringIdData(gatheringId),
+  });
+
+  return {
+    props: {
+      dehydratedState: dehydrate(queryClient),
+      seo: {
+        title: '만취 - 생성 페이지',
+      },
+    },
+  };
+};
\ No newline at end of file
diff --git a/src/pages/review/index.tsx b/src/pages/review/index.tsx
index 8ffc57ef..49635f10 100644
--- a/src/pages/review/index.tsx
+++ b/src/pages/review/index.tsx
@@ -1,23 +1,38 @@
-/* eslint-disable no-unused-vars */
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+import dynamic from 'next/dynamic';
 import { getReviewData } from '@/apis/getReviewData';
+import BookmarkContainer from '@/components/bookmark/BookmarkContainer';
 import HeaderSection from '@/components/main/HeaderSection';
 import FilterSection from '@/components/review/FilterSection';
 import MainHeader from '@/components/review/MainHeader';
 import ReviewCardList from '@/components/review/ReviewCardList';
-import ReviewContainer from '@/components/review/ReviewContainer';
 import PaginationBtn from '@/components/shared/PaginationBtn';
 import RootLayout from '@/components/shared/RootLayout';
+import { SEO } from '@/components/shared/SEO';
 import useGetReviewData from '@/hooks/useGetReviewData';
-import useFilterStore from '@/store/useFilterStore';
-import { dehydrate, QueryClient } from '@tanstack/react-query';
+import useGetReviewScoreZeroData from '@/hooks/useGetReviewScoreZeroData';
+import useInternalRouter from '@/hooks/useInternalRouter';
+import useFilterStore, { useResetFilters, useScore } from '@/store/useFilterStore';
+import type { DehydratedState } from '@tanstack/react-query';
+import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query';
 
-export default function ReviewPage() {
-  const [sort, setSort] = useState<string | undefined>(undefined);
-  const { page, keyword, location, category, dateStart, dateEnd } = useFilterStore();
+import Error from 'public/lottie/error.json';
 
-  const [pagesize] = useState(10);
+const Lottie = dynamic(() => import('lottie-react'), { ssr: false });
+
+type ReviewProps = {
+  dehydratedState: DehydratedState;
+  initialPageSize: number;
+  seo: {
+    title: string;
+  };
+};
+export default function ReviewPage({ seo, dehydratedState, initialPageSize }: ReviewProps) {
+  const [pageSize, setPageSize] = useState(initialPageSize);
+  const { page, keyword, location, category, sort, dateEnd, dateStart } = useFilterStore();
+  const score = useScore();
+  const router = useInternalRouter();
+  const resetFilters = useResetFilters();
 
   const {
     data: reviewData,
@@ -26,47 +41,96 @@ export default function ReviewPage() {
     // isLoading,
   } = useGetReviewData({
     page,
-    size: pagesize,
+    size: pageSize,
+    query: keyword,
+    location,
+    category,
+    sort,
+    startDate: dateStart,
+    endDate: dateEnd,
+    score,
+  });
+  const { data: reviewDataZero } = useGetReviewScoreZeroData({
+    page,
+    size: pageSize,
     query: keyword,
     location,
     category,
     sort,
     startDate: dateStart,
     endDate: dateEnd,
+    score: 0,
   });
 
+  const data = reviewData?.data;
+  const zerodata = reviewDataZero?.data;
+
+  useEffect(() => {
+    if (pageSize !== 10) {
+      setPageSize(10);
+    }
+  }, [pageSize]);
+
+  useEffect(() => {
+    const handleRouteChange = () => {
+      resetFilters();
+    };
+
+    router.events.on('routeChangeStart', handleRouteChange);
+
+    return () => {
+      router.events.off('routeChangeStart', handleRouteChange);
+    };
+  }, [router, resetFilters]);
+
   return (
-    <div className="mt-[60px]">
-      <MainHeader />
-      <RootLayout>
-        <ReviewContainer>
-          {/* Header (타이틀, 검색창) */}
-          <HeaderSection />
-          {/* 카테고리 */}
-          <FilterSection sort={sort} setSort={setSort} />
-          {/* 카드 */}
-          <ReviewCardList data={reviewData?.data} isLoading={isLoading} isError={isError} />
-          {!isLoading && !isError && reviewData?.data?.reviewContentList && reviewData.data.reviewContentList.length > 0 && (
-            <div className="w-full bg-white">
-              <PaginationBtn page={reviewData?.data.page ?? 0} totalPage={reviewData?.data.totalPage ?? 0} />
+    <>
+      <SEO title={seo.title} />
+
+      <HydrationBoundary state={dehydratedState}>
+        {isError ? (
+          <div className="mt-[60px] h-bookmark-banner">
+            <Lottie animationData={Error} className="size-full border-b-2 border-cardBorder bg-background" />
+          </div>
+        ) : (
+          <MainHeader isError={isError} />
+        )}
+        <RootLayout>
+          <BookmarkContainer>
+            {/* Header (타이틀, 검색창) */}
+            <HeaderSection />
+            <div className="min-h-screen w-full bg-white">
+              <FilterSection data={zerodata} scoreReviewCount={data?.scoreReviewCount} />
+
+              {/* 카드 */}
+
+              <ReviewCardList data={reviewData?.data} isLoading={isLoading} isError={isError} />
+
+              {!isLoading && !isError && reviewData?.data?.reviewContentList && reviewData.data.reviewContentList.length > 0 && (
+                <PaginationBtn page={data?.page ?? 0} totalPage={data?.totalPage ?? 0} />
+              )}
             </div>
-          )}
-        </ReviewContainer>
-      </RootLayout>
-    </div>
+          </BookmarkContainer>
+        </RootLayout>
+      </HydrationBoundary>
+    </>
   );
 }
+
 export const getServerSideProps = async () => {
   const queryClient = new QueryClient();
 
   await queryClient.prefetchQuery({
-    queryKey: ['review', 1, 9],
+    queryKey: ['review', 1, 10],
     queryFn: () => getReviewData({ page: 1, size: 10 }),
   });
 
   return {
     props: {
       dehydratedState: dehydrate(queryClient),
+      seo: {
+        title: '만취 - 리뷰 페이지',
+      },
     },
   };
 };
diff --git a/src/store/useFilterStore.ts b/src/store/useFilterStore.ts
index 9bb85615..29cf3151 100644
--- a/src/store/useFilterStore.ts
+++ b/src/store/useFilterStore.ts
@@ -9,6 +9,8 @@ const useFilterStore = create<FilterStateType>((set) => ({
   closeDate: undefined,
   dateStart: undefined,
   dateEnd: undefined,
+  sort: undefined,
+  score: 0,
   page: 1,
   setPage: (page: number) => set({ page }),
   setKeyword: (keyword) => set({ keyword }),
@@ -17,7 +19,10 @@ const useFilterStore = create<FilterStateType>((set) => ({
   setCloseDate: (closeDate) => set({ closeDate }),
   setDateStart: (dateStart) => set({ dateStart }),
   setDateEnd: (dateEnd) => set({ dateEnd }),
-  resetFilters: () => set({ keyword: undefined, location: undefined, category: '', closeDate: undefined, dateStart: undefined, dateEnd: undefined, page: 1 }),
+  setSort: (sort) => set({ sort }),
+  setScore: (score) => set({ score }),
+  resetFilters: () =>
+    set({ keyword: undefined, location: undefined, category: '',score:0, closeDate: undefined, dateStart: undefined, sort: undefined, dateEnd: undefined, page: 1 }),
 }));
 
 // States
@@ -28,7 +33,8 @@ export const useCloseDate = () => useFilterStore((state) => state.closeDate);
 export const useDateStart = () => useFilterStore((state) => state.dateStart);
 export const useDateEnd = () => useFilterStore((state) => state.dateEnd);
 export const usePage = () => useFilterStore((state) => state.page);
-
+export const useScore = () => useFilterStore((state) => state.score);
+export const useSort = () => useFilterStore((state) => state.sort);
 // Actions
 export const useSetKeyword = () => useFilterStore((state) => state.setKeyword);
 export const useSetLocation = () => useFilterStore((state) => state.setLocation);
@@ -38,5 +44,7 @@ export const useSetPage = () => useFilterStore((state) => state.setPage);
 export const useSetDateStart = () => useFilterStore((state) => state.setDateStart);
 export const useSetDateEnd = () => useFilterStore((state) => state.setDateEnd);
 export const useResetFilters = () => useFilterStore((state) => state.resetFilters);
+export const useSetScore = () => useFilterStore((state) => state.setScore);
+export const useSetSort = () => useFilterStore((state) => state.setSort);
 
 export default useFilterStore;
diff --git a/src/types/create.d.ts b/src/types/create.d.ts
new file mode 100644
index 00000000..a6de3a2d
--- /dev/null
+++ b/src/types/create.d.ts
@@ -0,0 +1,29 @@
+declare module '@manchui-api' {
+  export type GetCloseGatheringResponse = {
+    data: {
+      closedGatheringList: {
+        gatheringId: number;
+        groupName: string;
+      };
+      gatheringCount: number;
+    };
+
+    message: string;
+    success: boolean;
+  };
+  export type GetCloseGatheringIdResponse = {
+    data: {
+      category: string;
+      content: string;
+      gatheringId: number;
+      gatheringImage: string;
+      groupName: string;
+      location: string;
+      maxUsers: number;
+      minUsers: number;
+    };
+
+    message: string;
+    success: boolean;
+  };
+}
diff --git a/src/types/review.d.ts b/src/types/review.d.ts
index a315b596..9a4ca666 100644
--- a/src/types/review.d.ts
+++ b/src/types/review.d.ts
@@ -12,28 +12,35 @@ declare module '@manchui-api' {
         groupName: string;
         location: string;
         name: string;
-        profileImagePth: string;
+        profileImagePath: string;
         reviewId: number;
         score: number;
         updatedAt: string;
       }[];
       reviewCount: number;
+      scoreList: {
+        fiveScoreCount: number;
+        fourScoreCount: number;
+        oneScoreCount: number;
+        threeScoreCount: number;
+        twoScoreCount: number;
+      };
+      scoreReviewCount: number;
       totalPage: number;
     };
     message: string;
     success: boolean;
   };
-  
-  export type GetReviewRequest= {
+
+  export type GetReviewRequest = {
     category?: string;
     endDate?: string;
     location?: string;
     page?: number;
     query?: string;
+    score?: number;
     size: number;
     sort?: string;
     startDate?: string;
   };
 }
-
-
diff --git a/src/types/store.d.ts b/src/types/store.d.ts
index 9407ad5e..e3dba651 100644
--- a/src/types/store.d.ts
+++ b/src/types/store.d.ts
@@ -8,6 +8,7 @@ declare module '@manchui-api' {
     location?: string | undefined;
     page?: number;
     resetFilters: () => void;
+    score?: number;
     setCategory: (category: string) => void;
     setCloseDate: (closeDate: string) => void;
     setDateEnd: (dateEnd: string | undefined) => void;
@@ -15,5 +16,8 @@ declare module '@manchui-api' {
     setKeyword: (keyword: string) => void;
     setLocation: (location: string | undefined) => void;
     setPage: (page: number) => void;
+    setScore: (score: number) => void;
+    setSort: (sort: string | undefined) => void;
+    sort?: string | undefined;
   };
 }