diff --git a/components/Layout/Layout.tsx b/components/Layout/Layout.tsx
index 59cbb3596..3b22a05c8 100644
--- a/components/Layout/Layout.tsx
+++ b/components/Layout/Layout.tsx
@@ -68,7 +68,8 @@ export default function AppLayout({ children }: AppLayoutProps) {
                 </HeaderStateContext>
                 {presentPath !== '/match' &&
                   presentPath !== '/manual' &&
-                  presentPath !== '/store' && (
+                  presentPath !== '/store' &&
+                  !presentPath.startsWith('/party') && (
                     <div className={styles.buttonContainer}>
                       <div className={styles.buttonWrapper}>
                         <StyledButton onClick={onClickMatch} width={'5.5rem'}>
diff --git a/components/admin/SideNav.tsx b/components/admin/SideNav.tsx
index 3d01b48fb..1628c994d 100644
--- a/components/admin/SideNav.tsx
+++ b/components/admin/SideNav.tsx
@@ -9,7 +9,13 @@ import {
 } from 'react-icons/gr';
 import { IoGameControllerOutline, IoReceiptOutline } from 'react-icons/io5';
 import { MdOutlineMessage } from 'react-icons/md';
-import { TbCalendarTime, TbCoin, TbPaperBag, TbTrophy } from 'react-icons/tb';
+import {
+  TbCalendarTime,
+  TbCoin,
+  TbPaperBag,
+  TbTrophy,
+  TbNote,
+} from 'react-icons/tb';
 import SideNavContent from 'components/admin/SideNavContent';
 import styles from 'styles/admin/SideNav.module.scss';
 
@@ -121,6 +127,14 @@ export default function SideNav() {
       >
         <TbTrophy className={styles.logo} />
       </SideNavContent>
+
+      <SideNavContent
+        url={'/party'}
+        menuName={'파티관리'}
+        currentPath={currentPath}
+      >
+        <TbNote className={styles.logo} />
+      </SideNavContent>
     </div>
   );
 }
diff --git a/components/admin/party/AdminCommentReport.tsx b/components/admin/party/AdminCommentReport.tsx
new file mode 100644
index 000000000..797af5e55
--- /dev/null
+++ b/components/admin/party/AdminCommentReport.tsx
@@ -0,0 +1,108 @@
+import { useEffect, useState } from 'react';
+import { useSetRecoilState } from 'recoil';
+import {
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableRow,
+} from '@mui/material';
+import { PartyCommentReport, PartyCommentReportTable } from 'types/partyTypes';
+import { instanceInPartyManage } from 'utils/axios';
+import { toastState } from 'utils/recoil/toast';
+import { tableFormat } from 'constants/admin/table';
+import {
+  AdminEmptyItem,
+  AdminTableHead,
+} from 'components/admin/common/AdminTable';
+import PageNation from 'components/Pagination';
+import styles from 'styles/admin/Party/AdminPartyCommon.module.scss';
+
+const tableTitle: { [key: string]: string } = {
+  id: '번호',
+  reporterIntraId: '신고자 이름',
+  commentsId: '댓글 번호',
+  roomId: '방',
+  message: '메세지',
+  createdAt: '시간',
+};
+
+export default function AdminCommentReport() {
+  const [commentInfo, setCommentInfo] = useState<PartyCommentReportTable>({
+    commentReportList: [],
+    totalPage: 0,
+    currentPage: 0,
+  });
+  const [currentPage, setCurrentPage] = useState<number>(1);
+  const setSnackBar = useSetRecoilState(toastState);
+
+  useEffect(() => {
+    instanceInPartyManage
+      .get(`/reports/comments?page=${currentPage}&size=10`)
+      .then((res) => {
+        setCommentInfo({
+          commentReportList: res.data.commentReportList,
+          totalPage: res.data.totalPage,
+          currentPage: currentPage,
+        });
+      })
+      .catch((error) => {
+        setSnackBar({
+          toastName: 'GET request',
+          message: '댓글신고를 가져오는데 실패했습니다.',
+          severity: 'error',
+          clicked: true,
+        });
+      });
+  }, [currentPage]);
+
+  return (
+    <div className={styles.AdminTableWrap}>
+      <div className={styles.header}>
+        <span className={styles.title}>댓글 신고리스트</span>
+      </div>
+      <TableContainer className={styles.tableContainer} component={Paper}>
+        <Table className={styles.table} aria-label='UserManagementTable'>
+          <AdminTableHead tableName={'partyCommentReport'} table={tableTitle} />
+          <TableBody className={styles.tableBody}>
+            {commentInfo.commentReportList &&
+            commentInfo.commentReportList.length > 0 ? (
+              commentInfo.commentReportList.map(
+                (report: PartyCommentReport, index: number) => (
+                  <TableRow key={index}>
+                    {tableFormat['partyCommentReport'].columns.map(
+                      (columnName) => {
+                        return (
+                          <TableCell
+                            key={columnName}
+                            className={styles.tableBodyItem}
+                          >
+                            {report[
+                              columnName as keyof PartyCommentReport
+                            ]?.toString()}
+                          </TableCell>
+                        );
+                      }
+                    )}
+                  </TableRow>
+                )
+              )
+            ) : (
+              <AdminEmptyItem content={'패널티 기록이 비어있습니다'} />
+            )}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <div className={styles.pageNationContainer}>
+        <PageNation
+          curPage={commentInfo.currentPage}
+          totalPages={commentInfo.totalPage}
+          pageChangeHandler={(pageNumber: number) => {
+            setCurrentPage(pageNumber);
+          }}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/components/admin/party/AdminPartyNoShow.tsx b/components/admin/party/AdminPartyNoShow.tsx
new file mode 100644
index 000000000..474a2a940
--- /dev/null
+++ b/components/admin/party/AdminPartyNoShow.tsx
@@ -0,0 +1,108 @@
+import { useEffect, useState } from 'react';
+import { useSetRecoilState } from 'recoil';
+import {
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableRow,
+} from '@mui/material';
+import { PartyNoshowReport, PartyNoshowReportTable } from 'types/partyTypes';
+import { instanceInPartyManage } from 'utils/axios';
+import { toastState } from 'utils/recoil/toast';
+import { tableFormat } from 'constants/admin/table';
+import {
+  AdminEmptyItem,
+  AdminTableHead,
+} from 'components/admin/common/AdminTable';
+import PageNation from 'components/Pagination';
+import styles from 'styles/admin/Party/AdminPartyCommon.module.scss';
+
+const tableTitle: { [key: string]: string } = {
+  id: '번호',
+  reporterIntraId: '신고자 이름',
+  reporteeIntraId: '피신고자 이름',
+  roomId: '방',
+  message: '메세지',
+  createdAt: '시간',
+};
+
+export default function AdminPartyNoShow() {
+  const [noShowInfo, setNoShowInfo] = useState<PartyNoshowReportTable>({
+    noShowReportList: [],
+    totalPages: 0,
+    currentPage: 0,
+  });
+  const [currentPage, setCurrentPage] = useState<number>(1);
+  const setSnackBar = useSetRecoilState(toastState);
+
+  useEffect(() => {
+    instanceInPartyManage
+      .get(`/reports/users?page=${currentPage}&size=10`)
+      .then((res) => {
+        setNoShowInfo({
+          noShowReportList: res.data.noShowReportList,
+          totalPages: res.data.totalPage,
+          currentPage: currentPage,
+        });
+      })
+      .catch((error) => {
+        setSnackBar({
+          toastName: 'GET request',
+          message: '댓글신고를 가져오는데 실패했습니다.',
+          severity: 'error',
+          clicked: true,
+        });
+      });
+  }, [currentPage]);
+
+  return (
+    <div className={styles.AdminTableWrap}>
+      <div className={styles.header}>
+        <span className={styles.title}>노쇼 신고리스트</span>
+      </div>
+      <TableContainer className={styles.tableContainer} component={Paper}>
+        <Table className={styles.table} aria-label='UserManagementTable'>
+          <AdminTableHead tableName={'partyNoshowReport'} table={tableTitle} />
+          <TableBody className={styles.tableBody}>
+            {noShowInfo.noShowReportList &&
+            noShowInfo.noShowReportList.length > 0 ? (
+              noShowInfo.noShowReportList.map(
+                (report: PartyNoshowReport, index: number) => (
+                  <TableRow key={index}>
+                    {tableFormat['partyNoshowReport'].columns.map(
+                      (columnName) => {
+                        return (
+                          <TableCell
+                            key={columnName}
+                            className={styles.tableBodyItem}
+                          >
+                            {report[
+                              columnName as keyof PartyNoshowReport
+                            ]?.toString()}
+                          </TableCell>
+                        );
+                      }
+                    )}
+                  </TableRow>
+                )
+              )
+            ) : (
+              <AdminEmptyItem content={'패널티 기록이 비어있습니다'} />
+            )}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <div className={styles.pageNationContainer}>
+        <PageNation
+          curPage={noShowInfo.currentPage}
+          totalPages={noShowInfo.totalPages}
+          pageChangeHandler={(pageNumber: number) => {
+            setCurrentPage(pageNumber);
+          }}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/components/admin/party/AdminPartyPenalty.tsx b/components/admin/party/AdminPartyPenalty.tsx
new file mode 100644
index 000000000..e19fb588b
--- /dev/null
+++ b/components/admin/party/AdminPartyPenalty.tsx
@@ -0,0 +1,133 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useSetRecoilState } from 'recoil';
+import {
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableRow,
+} from '@mui/material';
+import { PartyPenaltyAdmin, PartyPenaltyTable } from 'types/partyTypes';
+import { instanceInPartyManage } from 'utils/axios';
+import { modalState } from 'utils/recoil/modal';
+import { toastState } from 'utils/recoil/toast';
+import { tableFormat } from 'constants/admin/table';
+import {
+  AdminEmptyItem,
+  AdminTableHead,
+} from 'components/admin/common/AdminTable';
+import PageNation from 'components/Pagination';
+import styles from 'styles/admin/Party/AdminPartyCommon.module.scss';
+
+const tableTitle: { [key: string]: string } = {
+  id: '번호',
+  userIntraId: '유저',
+  penaltyType: '패널티 타입',
+  message: '내용',
+  startTime: '시작 시간',
+  penaltyTime: '패널티 시간',
+  edit: '수정',
+};
+
+export default function AdminCommentReport() {
+  const [penaltyInfo, setPenaltyInfo] = useState<PartyPenaltyTable>({
+    penaltyList: [],
+    totalPage: 0,
+    currentPage: 0,
+  });
+  const [currentPage, setCurrentPage] = useState<number>(1);
+  const setModal = useSetRecoilState(modalState);
+  const setSnackBar = useSetRecoilState(toastState);
+
+  useEffect(() => {
+    instanceInPartyManage
+      .get(`/penalties?page=${currentPage}&size=10`)
+      .then((res) => {
+        setPenaltyInfo({
+          penaltyList: res.data.penaltyList,
+          totalPage: res.data.totalPage,
+          currentPage: currentPage,
+        });
+      })
+      .catch((error) => {
+        setSnackBar({
+          toastName: 'GET request',
+          message: '댓글신고를 가져오는데 실패했습니다.',
+          severity: 'error',
+          clicked: true,
+        });
+      });
+  }, [currentPage]);
+
+  const handleAddpenalty = () => {
+    setModal({ modalName: 'ADMIN-PARTY_ADMIN_PENALTY' });
+  };
+
+  const handleEditpenalty = (partyPenalty?: PartyPenaltyAdmin) => {
+    setModal({ modalName: 'ADMIN-PARTY_ADMIN_PENALTY', partyPenalty });
+  };
+
+  return (
+    <div className={styles.AdminTableWrap}>
+      <div className={styles.header}>
+        <span className={styles.title}>패널티 리스트</span>
+      </div>
+      <button
+        onClick={handleAddpenalty}
+        className={`${styles.button_1} ${styles.add}`}
+      >
+        추가
+      </button>
+      <TableContainer component={Paper} className={styles.tableContainer}>
+        <Table aria-label='UserManagementTable' className={styles.table}>
+          <AdminTableHead tableName={'partyPenaltyAdmin'} table={tableTitle} />
+          <TableBody className={styles.tableBody}>
+            {penaltyInfo.penaltyList && penaltyInfo.penaltyList.length > 0 ? (
+              penaltyInfo.penaltyList.map(
+                (penalty: PartyPenaltyAdmin, index: number) => (
+                  <TableRow key={index}>
+                    {tableFormat['partyPenaltyAdmin'].columns.map(
+                      (columnName) => {
+                        return (
+                          <TableCell
+                            key={columnName}
+                            className={styles.tableBodyItem}
+                          >
+                            {columnName === 'edit' ? (
+                              <button
+                                onClick={() => handleEditpenalty(penalty)}
+                                className={`${styles.button_1} ${styles.add}`}
+                              >
+                                수정
+                              </button>
+                            ) : (
+                              penalty[
+                                columnName as keyof PartyPenaltyAdmin
+                              ]?.toString()
+                            )}
+                          </TableCell>
+                        );
+                      }
+                    )}
+                  </TableRow>
+                )
+              )
+            ) : (
+              <AdminEmptyItem content={'패널티 기록이 비어있습니다'} />
+            )}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <div className={styles.pageNationContainer}>
+        <PageNation
+          curPage={penaltyInfo.currentPage}
+          totalPages={penaltyInfo.totalPage}
+          pageChangeHandler={(pageNumber: number) => {
+            setCurrentPage(pageNumber);
+          }}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/components/admin/party/AdminPartyRoomReport.tsx b/components/admin/party/AdminPartyRoomReport.tsx
new file mode 100644
index 000000000..067b6281b
--- /dev/null
+++ b/components/admin/party/AdminPartyRoomReport.tsx
@@ -0,0 +1,103 @@
+import { useEffect, useState } from 'react';
+import { useSetRecoilState } from 'recoil';
+import {
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableRow,
+} from '@mui/material';
+import { PartyRoomReport, PartyRoomReportTable } from 'types/partyTypes';
+import { instanceInPartyManage } from 'utils/axios';
+import { toastState } from 'utils/recoil/toast';
+import { tableFormat } from 'constants/admin/table';
+import {
+  AdminEmptyItem,
+  AdminTableHead,
+} from 'components/admin/common/AdminTable';
+import PageNation from 'components/Pagination';
+import styles from 'styles/admin/Party/AdminPartyCommon.module.scss';
+
+const tableTitle: { [key: string]: string } = {
+  id: '번호',
+  reporterIntraId: '신고자 이름',
+  reporteeIntraId: '피신고자 이름',
+  roomId: '방',
+  message: '메세지',
+  createdAt: '시간',
+};
+
+export default function AdminPartyRoomReport() {
+  const [roomInfo, setRoomInfo] = useState<PartyRoomReportTable>({
+    roomReportList: [],
+    totalPage: 0,
+    currentPage: 0,
+  });
+  const [currentPage, setCurrentPage] = useState<number>(1);
+
+  const setSnackBar = useSetRecoilState(toastState);
+
+  useEffect(() => {
+    instanceInPartyManage
+      .get(`/reports/rooms?page=${currentPage}&size=10`)
+      .then((res) => {
+        setRoomInfo({
+          roomReportList: res.data.roomReportList,
+          totalPage: res.data.totalPage,
+          currentPage: currentPage,
+        });
+      })
+      .catch((error) => {
+        setSnackBar({
+          toastName: 'GET request',
+          message: '댓글신고를 가져오는데 실패했습니다.',
+          severity: 'error',
+          clicked: true,
+        });
+      });
+  }, [currentPage]);
+
+  return (
+    <div className={styles.AdminTableWrap}>
+      <div className={styles.header}>
+        <span className={styles.title}>방 신고리스트</span>
+      </div>
+      <TableContainer component={Paper}>
+        <Table aria-label='UserManagementTable'>
+          <AdminTableHead tableName={'partyRoomReport'} table={tableTitle} />
+          <TableBody>
+            {roomInfo.roomReportList && roomInfo.roomReportList.length > 0 ? (
+              roomInfo.roomReportList.map(
+                (report: PartyRoomReport, index: number) => (
+                  <TableRow key={index}>
+                    {tableFormat['partyRoomReport'].columns.map(
+                      (columnName) => (
+                        <TableCell key={columnName}>
+                          {report[
+                            columnName as keyof PartyRoomReport
+                          ]?.toString()}
+                        </TableCell>
+                      )
+                    )}
+                  </TableRow>
+                )
+              )
+            ) : (
+              <AdminEmptyItem content={'패널티 기록이 비어있습니다'} />
+            )}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <div className={styles.pageNationContainer}>
+        <PageNation
+          curPage={roomInfo.currentPage}
+          totalPages={roomInfo.totalPage}
+          pageChangeHandler={(pageNumber: number) => {
+            setCurrentPage(pageNumber);
+          }}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/components/admin/party/PartyCategory.tsx b/components/admin/party/PartyCategory.tsx
new file mode 100644
index 000000000..f11bd9cd7
--- /dev/null
+++ b/components/admin/party/PartyCategory.tsx
@@ -0,0 +1,83 @@
+import { useState } from 'react';
+import {
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableRow,
+} from '@mui/material';
+import { PartyCategory } from 'types/partyTypes';
+import { tableFormat } from 'constants/admin/table';
+import { AdminTableHead } from 'components/admin/common/AdminTable';
+import usePartyCategory from 'hooks/party/usePartyCategory';
+import styles from 'styles/admin/Party/AdminPartyCommon.module.scss';
+
+const tableTitle: { [key: string]: string } = {
+  categoryId: '카테고리번호',
+  categoryName: '카테고리',
+  delete: '삭제',
+};
+
+export default function PartyCategories() {
+  const { categories, createCategory, deleteCategory } = usePartyCategory();
+  const [newCategoryName, setNewCategoryName] = useState('');
+
+  const handleConfirm = () => {
+    if (newCategoryName.trim() !== '') {
+      createCategory(newCategoryName);
+      setNewCategoryName('');
+    }
+  };
+
+  return (
+    <div className={styles.AdminTableWrap}>
+      <div className={styles.header}>
+        <span className={styles.title}>카테고리 관리</span>
+        <div>
+          <input
+            type='text'
+            value={newCategoryName}
+            onChange={(e) => setNewCategoryName(e.target.value)}
+          />
+          <button
+            onClick={handleConfirm}
+            className={`${styles.button_1} ${styles.add}`}
+          >
+            추가
+          </button>
+        </div>
+      </div>
+      <TableContainer className={styles.tableContainer} component={Paper}>
+        <Table className={styles.table} aria-label='UserManagementTable'>
+          <AdminTableHead tableName={'partyCategory'} table={tableTitle} />
+          <TableBody className={styles.tableBody}>
+            {categories.map((c) => (
+              <TableRow key={c.categoryId}>
+                {tableFormat['partyCategory'].columns.map((columnName) => {
+                  return (
+                    <TableCell
+                      key={columnName}
+                      className={styles.tableBodyItem}
+                    >
+                      {columnName === 'delete' ? (
+                        <button
+                          onClick={() => deleteCategory(c.categoryId)}
+                          className={`${styles.button_1} ${styles.delete}`}
+                        >
+                          삭제
+                        </button>
+                      ) : (
+                        c[columnName as keyof PartyCategory]?.toString()
+                      )}
+                    </TableCell>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </div>
+  );
+}
diff --git a/components/admin/party/PartyNav.tsx b/components/admin/party/PartyNav.tsx
new file mode 100644
index 000000000..3ed0a36b8
--- /dev/null
+++ b/components/admin/party/PartyNav.tsx
@@ -0,0 +1,38 @@
+import { useState } from 'react';
+import styles from 'styles/party/PartyNav.module.scss';
+import PartyPenalty from './AdminPartyPenalty';
+import PartyCategory from './PartyCategory';
+import PartyReportNav from './PartyReportNav';
+import PartyTemplate from './PartyTemplate';
+
+export default function PartyNav() {
+  const [navValue, setNavValue] = useState('penalty');
+  return (
+    <>
+      <div className={styles.container}>
+        <ul className={styles.ullist}>
+          <li className={styles.lilist} onClick={() => setNavValue('penalty')}>
+            패널티
+          </li>
+          <li className={styles.lilist} onClick={() => setNavValue('report')}>
+            신고 관리
+          </li>
+          <li className={styles.lilist} onClick={() => setNavValue('room')}>
+            방 관리
+          </li>
+          <li className={styles.lilist} onClick={() => setNavValue('template')}>
+            템플릿 관리
+          </li>
+          <li className={styles.lilist} onClick={() => setNavValue('category')}>
+            카테고리 관리
+          </li>
+        </ul>
+
+        {navValue === 'report' && <PartyReportNav />}
+        {navValue === 'template' && <PartyTemplate />}
+        {navValue === 'category' && <PartyCategory />}
+        {navValue === 'penalty' && <PartyPenalty />}
+      </div>
+    </>
+  );
+}
diff --git a/components/admin/party/PartyReportNav.tsx b/components/admin/party/PartyReportNav.tsx
new file mode 100644
index 000000000..de6392674
--- /dev/null
+++ b/components/admin/party/PartyReportNav.tsx
@@ -0,0 +1,29 @@
+import { useState } from 'react';
+import styles from 'styles/party/PartyNav.module.scss';
+import AdminCommentReport from './AdminCommentReport';
+import AdminPartyNoShowReport from './AdminPartyNoShow';
+import AdminPartyRoomReport from './AdminPartyRoomReport';
+
+export default function PartyReportNav() {
+  const [navValue, setNavValue] = useState('noshow');
+  return (
+    <>
+      <div className={styles.container}>
+        <ul className={styles.ullist}>
+          <li className={styles.lilist} onClick={() => setNavValue('noshow')}>
+            노쇼 관리
+          </li>
+          <li className={styles.lilist} onClick={() => setNavValue('comment')}>
+            댓글 관리
+          </li>
+          <li className={styles.lilist} onClick={() => setNavValue('room')}>
+            방 관리
+          </li>
+        </ul>
+        {navValue === 'noshow' && <AdminPartyNoShowReport />}
+        {navValue === 'comment' && <AdminCommentReport />}
+        {navValue === 'room' && <AdminPartyRoomReport />}
+      </div>
+    </>
+  );
+}
diff --git a/components/admin/party/PartyTemplate.tsx b/components/admin/party/PartyTemplate.tsx
new file mode 100644
index 000000000..86f791db2
--- /dev/null
+++ b/components/admin/party/PartyTemplate.tsx
@@ -0,0 +1,106 @@
+import React, { useEffect } from 'react';
+import { useSetRecoilState } from 'recoil';
+import {
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableRow,
+} from '@mui/material';
+import { PartyGameTemplate } from 'types/partyTypes';
+import { modalState } from 'utils/recoil/modal';
+import { tableFormat } from 'constants/admin/table';
+import { AdminTableHead } from 'components/admin/common/AdminTable';
+import { usePartyTemplate } from 'hooks/party/usePartyTemplate';
+import styles from 'styles/admin/Party/AdminPartyCommon.module.scss';
+
+const tableTitle: { [key: string]: string } = {
+  gameTemplateId: '템플릿번호',
+  categoryId: '카테고리',
+  gameName: '템플릿이름',
+  maxGamePeople: '최대인원',
+  minGamePeople: '최소인원',
+  maxGameTime: '최대게임시간',
+  minGameTime: '최소게임시간',
+  genre: '장르',
+  difficulty: '난이도',
+  summary: '요약',
+  change: '수정',
+  delete: '삭제',
+};
+
+export default function PartyTemplate() {
+  const { templates, deleteTemplate } = usePartyTemplate();
+  const setModal = useSetRecoilState(modalState);
+
+  useEffect(() => {
+    console.log('Render');
+  }, [templates]);
+
+  const handleEditTemplate = (template?: PartyGameTemplate) => {
+    setModal({ modalName: 'ADMIN-PARTY_TEMPLATE', template });
+  };
+
+  const handleAddTemplate = () => {
+    setModal({ modalName: 'ADMIN-PARTY_TEMPLATE' });
+  };
+
+  const deleteHandler = (gameTemplateId: number) => {
+    deleteTemplate({ gameTemplateId });
+  };
+
+  return (
+    <div>
+      <div className={styles.AdminTableWrap}>
+        <div className={styles.header}>
+          <span className={styles.title}>템플릿 관리</span>
+        </div>
+        <button
+          onClick={handleAddTemplate}
+          className={`${styles.button_1} ${styles.add}`}
+        >
+          추가
+        </button>
+        <TableContainer className={styles.tableContainer} component={Paper}>
+          <Table className={styles.table} aria-label='UserManagementTable'>
+            <AdminTableHead tableName={'partyTemplate'} table={tableTitle} />
+            <TableBody className={styles.tableBody}>
+              {templates.map((t) => (
+                <TableRow key={t.gameTemplateId}>
+                  {tableFormat['partyTemplate'].columns.map((columnName) => {
+                    return (
+                      <TableCell
+                        key={columnName}
+                        className={styles.tableBodyItem}
+                      >
+                        {columnName === 'change' && (
+                          <button
+                            onClick={() => handleEditTemplate(t)}
+                            className={`${styles.button_1} ${styles.add}`}
+                          >
+                            수정
+                          </button>
+                        )}
+                        {columnName === 'delete' ? (
+                          <button
+                            onClick={() => deleteHandler(t.gameTemplateId)}
+                            className={`${styles.button_1} ${styles.delete}`}
+                          >
+                            삭제
+                          </button>
+                        ) : (
+                          t[columnName as keyof PartyGameTemplate]?.toString()
+                        )}
+                      </TableCell>
+                    );
+                  })}
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </div>
+    </div>
+  );
+}
diff --git a/components/main/PartyPreview.tsx b/components/main/PartyPreview.tsx
new file mode 100644
index 000000000..d9f8beb17
--- /dev/null
+++ b/components/main/PartyPreview.tsx
@@ -0,0 +1,22 @@
+import usePartyRoomList from 'hooks/party/usePartyRoomList';
+import styles from 'styles/main/PartyPreview.module.scss';
+export default function PartyPreview() {
+  const { partyRooms } = usePartyRoomList();
+  const limitedRooms = partyRooms.slice(0, 3);
+  return (
+    <div className={styles.container}>
+      <ul>
+        {limitedRooms.map((room) => (
+          <li key={room.roomId} className={styles.block}>
+            <div>
+              <span>{room.title}</span>
+              <span
+                className={styles.people}
+              >{`${room.currentPeople}/${room.maxPeople}`}</span>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
diff --git a/components/main/Section.tsx b/components/main/Section.tsx
index 1c4019eca..67e561f73 100644
--- a/components/main/Section.tsx
+++ b/components/main/Section.tsx
@@ -5,6 +5,7 @@ import GameResult from 'components/game/GameResult';
 import TournamentPreview from 'components/main/TournamentPreview';
 import RankListMain from 'components/rank/topRank/RankListMain';
 import styles from 'styles/main/Section.module.scss';
+import PartyPreview from './PartyPreview';
 
 type SectionProps = {
   sectionTitle: string;
@@ -18,6 +19,7 @@ export default function Section({ sectionTitle, path }: SectionProps) {
   const pathCheck: pathType = {
     game: <GameResult />,
     rank: <RankListMain isMain={true} season={0} />,
+    party: <PartyPreview />,
     tournament: <TournamentPreview />,
   };
 
diff --git a/components/modal/ModalProvider.tsx b/components/modal/ModalProvider.tsx
index abbf1aa7f..cd1f462ae 100644
--- a/components/modal/ModalProvider.tsx
+++ b/components/modal/ModalProvider.tsx
@@ -6,6 +6,7 @@ import AdminModal from 'components/modal/modalType/AdminModal';
 import NormalModal from 'components/modal/modalType/NormalModal';
 import StoreModal from 'components/modal/modalType/StoreModal';
 import styles from 'styles/modal/Modal.module.scss';
+import PartyModal from './modalType/PartyModal';
 import TournamentModal from './modalType/TournamentModal';
 
 export default function ModalProvider() {
@@ -46,6 +47,8 @@ export default function ModalProvider() {
           <AdminModal />
         ) : modalType === 'TOURNAMENT' ? (
           <TournamentModal />
+        ) : modalType === 'PARTY' ? (
+          <PartyModal />
         ) : null}
       </div>
     )
diff --git a/components/modal/Party/PartyReportModal.tsx b/components/modal/Party/PartyReportModal.tsx
new file mode 100644
index 000000000..228fc3e29
--- /dev/null
+++ b/components/modal/Party/PartyReportModal.tsx
@@ -0,0 +1,83 @@
+import { useState } from 'react';
+import { useSetRecoilState } from 'recoil';
+import { Modal, PartyReportModalData } from 'types/modalTypes';
+import { instance } from 'utils/axios';
+import { modalState } from 'utils/recoil/modal';
+import styles from 'styles/modal/menu/ReportModal.module.scss';
+import { ModalButton, ModalButtonContainer } from '../ModalButton';
+
+export function PartyReportModal({ report }: { report: PartyReportModalData }) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [content, setContent] = useState('');
+  const setModal = useSetRecoilState<Modal>(modalState);
+
+  const reportHandler = async () => {
+    const reportResponse: { [key: string]: string } = {
+      SUCCESS: '신고해주셔서 감사합니다 ❤️',
+      REJECT: '내용을 적어주세요 ❤️',
+    };
+
+    try {
+      if (!content.replace(/^\s+|\s+$/g, '')) {
+        throw new Error('칸을 입력하지 않았습니다.');
+      }
+      switch (report.name) {
+        case 'COMMENT':
+          await instance.post(`/party/reports/comments/${report.commentId}`);
+          break;
+        case 'ROOM':
+          await instance.post(`/party/reports/rooms/${report.roomId}`);
+          break;
+        case 'NOSHOW':
+          await instance.post(
+            `/party/reports/rooms/${report.roomId}/users/${report.userIntraId}`
+          );
+          break;
+      }
+      setModal({ modalName: null });
+      alert(reportResponse.SUCCESS);
+    } catch (e) {
+      alert(reportResponse.REJECT);
+      throw new Error('REJECT');
+    }
+  };
+
+  const handleReport = () => {
+    setIsLoading(true);
+    reportHandler().catch(() => setIsLoading(false));
+  };
+
+  return (
+    <div className={styles.container}>
+      <div>
+        <div className={styles.title}>42GG</div>
+        <div className={styles.phrase}>{report.name}</div>
+      </div>
+      <form>
+        <div className={styles.contentWrapper}>
+          <div className={styles.content}>
+            <textarea
+              name='content'
+              maxLength={300}
+              onChange={(e) => setContent(content + e)}
+            />
+            <div>{`${content.length}/300`}</div>
+          </div>
+        </div>
+        <ModalButtonContainer>
+          <ModalButton
+            onClick={() => setModal({ modalName: null })}
+            style='negative'
+            value='취소'
+          />
+          <ModalButton
+            onClick={handleReport}
+            style='positive'
+            value='보내기'
+            isLoading={isLoading}
+          />
+        </ModalButtonContainer>
+      </form>
+    </div>
+  );
+}
diff --git a/components/modal/admin/AdminPartyPenaltyModal.tsx b/components/modal/admin/AdminPartyPenaltyModal.tsx
new file mode 100644
index 000000000..9b31a4fd0
--- /dev/null
+++ b/components/modal/admin/AdminPartyPenaltyModal.tsx
@@ -0,0 +1,115 @@
+import React, { useState, useEffect } from 'react';
+import { useSetRecoilState } from 'recoil';
+import { PartyPenaltyAdmin, PartyPenaltyAdminSubmit } from 'types/partyTypes';
+import { instanceInPartyManage } from 'utils/axios';
+import { modalState } from 'utils/recoil/modal';
+import { toastState } from 'utils/recoil/toast';
+import styles from 'styles/party/TemplateModal.module.scss';
+
+export default function PartyPenaltyModal({
+  partyPenalty,
+}: {
+  partyPenalty?: PartyPenaltyAdmin;
+}) {
+  const [formData, setFormData] = useState<PartyPenaltyAdminSubmit>(
+    partyPenalty ?? {
+      penaltyType: '',
+      message: '',
+      penaltyTime: 0,
+      userIntraId: '',
+    }
+  );
+  const setModal = useSetRecoilState(modalState);
+  const [isUpdateMode, setIsUpdateMode] = useState(partyPenalty ? true : false);
+  const setSnackBar = useSetRecoilState(toastState);
+
+  const updatePenalty = (
+    penaltyId: number,
+    penalty: PartyPenaltyAdminSubmit
+  ) => {
+    instanceInPartyManage
+      .patch(`/penalties/${penaltyId}`, penalty)
+      .catch(() => {
+        console.log(penalty);
+        setSnackBar({
+          toastName: 'PATCH request',
+          message: '페널티 변경을 하는데 실패하였습니다.',
+          severity: 'error',
+          clicked: true,
+        });
+      });
+  };
+
+  const createPenalty = (penalty: PartyPenaltyAdminSubmit) => {
+    instanceInPartyManage.post('/penalties', penalty).catch(() => {
+      setSnackBar({
+        toastName: 'POST request',
+        message: '페널티 추가를 하는데 실패하였습니다.',
+        severity: 'error',
+        clicked: true,
+      });
+    });
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (isUpdateMode && partyPenalty) updatePenalty(partyPenalty.id, formData);
+    else createPenalty(formData);
+    setModal({ modalName: null });
+  };
+
+  return (
+    <>
+      <div className={styles.modal_overlay}>
+        <div className={styles.modal}>
+          <h2>{partyPenalty ? '페널티 변경' : '페널티 추가'}</h2>
+          <form onSubmit={handleSubmit}>
+            <label>페널티 타입: </label>
+            <input
+              type='text'
+              value={formData.penaltyType}
+              onChange={(e) =>
+                setFormData({ ...formData, penaltyType: e.target.value })
+              }
+            />
+            <label>내용 : </label>
+            <input
+              type='text'
+              value={formData.message}
+              onChange={(e) =>
+                setFormData({ ...formData, message: e.target.value })
+              }
+            />
+            <label>패널티 시간: </label>
+            <input
+              type='number'
+              value={formData.penaltyTime}
+              onChange={(e) => {
+                if (Number(e.target.value) >= 0) {
+                  setFormData({ ...formData, penaltyTime: +e.target.value });
+                }
+              }}
+            />
+            <label>패널티 아이디: </label>
+            <input
+              type='string'
+              value={formData.userIntraId}
+              onChange={(e) =>
+                setFormData({ ...formData, userIntraId: e.target.value })
+              }
+            />
+            <button type='submit' className={styles.button_2}>
+              {partyPenalty ? '변경' : '추가'}
+            </button>
+            <button
+              className={styles.button_2}
+              onClick={() => setModal({ modalName: null })}
+            >
+              닫기
+            </button>
+          </form>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/components/modal/admin/AdminTemplateModal.tsx b/components/modal/admin/AdminTemplateModal.tsx
new file mode 100644
index 000000000..76556b4d6
--- /dev/null
+++ b/components/modal/admin/AdminTemplateModal.tsx
@@ -0,0 +1,138 @@
+import React, { useState, useEffect } from 'react';
+import { useSetRecoilState } from 'recoil';
+import { PartyGameTemplate, PartyTemplateForm } from 'types/partyTypes';
+import { modalState } from 'utils/recoil/modal';
+import { usePartyTemplate } from 'hooks/party/usePartyTemplate';
+import styles from 'styles/party/TemplateModal.module.scss';
+
+function isUpdate(formData: PartyTemplateForm): formData is PartyGameTemplate {
+  return !!formData.gameTemplateId;
+}
+
+export default function TemplateModal({
+  template,
+}: {
+  template?: PartyTemplateForm;
+}) {
+  const [formData, setFormData] = useState<PartyTemplateForm>(
+    template ?? {
+      gameName: '',
+      categoryId: 1,
+      maxGamePeople: 0,
+      minGamePeople: 0,
+      maxGameTime: 0,
+      minGameTime: 0,
+      genre: '',
+      difficulty: '',
+      summary: '',
+    }
+  );
+  const setModal = useSetRecoilState(modalState);
+  const { createTemplate, updateTemplate } = usePartyTemplate();
+
+  useEffect(() => {
+    if (template) {
+      setFormData(template);
+    }
+  }, []);
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (isUpdate(formData)) updateTemplate(formData);
+    else createTemplate(formData);
+    setModal({ modalName: null });
+  };
+
+  return (
+    <>
+      <div className={styles.modal_overlay}>
+        <div className={styles.modal}>
+          <h2>{template ? '템플릿 변경' : '템플릿 추가'}</h2>
+          <form onSubmit={handleSubmit}>
+            <label>게임 이름: </label>
+            <input
+              type='text'
+              value={formData.gameName}
+              onChange={(e) =>
+                setFormData({ ...formData, gameName: e.target.value })
+              }
+            />
+            <label>최대 인원: </label>
+            <input
+              type='number'
+              value={formData.maxGamePeople}
+              onChange={(e) => {
+                if (Number(e.target.value) >= 0) {
+                  setFormData({ ...formData, maxGamePeople: +e.target.value });
+                }
+              }}
+            />
+            <label>최소 인원: </label>
+            <input
+              type='number'
+              value={formData.minGamePeople}
+              onChange={(e) => {
+                if (Number(e.target.value) >= 0) {
+                  setFormData({ ...formData, minGamePeople: +e.target.value });
+                }
+              }}
+            />
+            <label>최대 게임 시간: </label>
+            <input
+              type='number'
+              value={formData.maxGameTime}
+              onChange={(e) => {
+                if (Number(e.target.value) >= 0) {
+                  setFormData({ ...formData, maxGameTime: +e.target.value });
+                }
+              }}
+            />
+            <label>최소 게임 시간: </label>
+            <input
+              type='number'
+              value={formData.minGameTime}
+              onChange={(e) => {
+                if (Number(e.target.value) >= 0) {
+                  setFormData({ ...formData, minGameTime: +e.target.value });
+                }
+              }}
+            />
+            <label>장르: </label>
+            <input
+              type='text'
+              value={formData.genre}
+              onChange={(e) =>
+                setFormData({ ...formData, genre: e.target.value })
+              }
+            />
+            <label>난이도: </label>
+            <input
+              type='text'
+              value={formData.difficulty}
+              onChange={(e) =>
+                setFormData({ ...formData, difficulty: e.target.value })
+              }
+            />
+            <label>요약: </label>
+            <input
+              type='text'
+              value={formData.summary}
+              onChange={(e) =>
+                setFormData({ ...formData, summary: e.target.value })
+              }
+            />
+            <button type='submit' className={styles.button_2}>
+              {template ? '변경' : '추가'}
+            </button>
+            <button
+              className={styles.button_2}
+              onClick={() => setModal({ modalName: null })}
+            >
+              닫기
+            </button>
+          </form>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/components/modal/modalType/AdminModal.tsx b/components/modal/modalType/AdminModal.tsx
index a819a2e07..bdba560f1 100644
--- a/components/modal/modalType/AdminModal.tsx
+++ b/components/modal/modalType/AdminModal.tsx
@@ -9,8 +9,10 @@ import AdminEditItemModal from 'components/modal/admin/AdminEditItem';
 import AdminFeedbackCheck from 'components/modal/admin/AdminFeedbackCheckModal';
 import AdminModifyScoreModal from 'components/modal/admin/AdminModifyScoreModal';
 import AdminNotiUserModal from 'components/modal/admin/AdminNotiUserModal';
+import AdminPartyPenaltyModal from 'components/modal/admin/AdminPartyPenaltyModal';
 import AdminPenaltyModal from 'components/modal/admin/AdminPenaltyModal';
 import AdminProfileModal from 'components/modal/admin/AdminProfileModal';
+import TemplateModal from 'components/modal/admin/AdminTemplateModal';
 import AdminUserCoinModal from 'components/modal/admin/AdminUserCoinModal';
 import DeletePenaltyModal from 'components/modal/admin/DeletePenaltyModal';
 import DetailModal from 'components/modal/admin/DetailModal';
@@ -34,6 +36,8 @@ export default function AdminModal() {
     coinPolicy,
     tournament,
     tournamentId,
+    template,
+    partyPenalty,
   } = useRecoilValue(modalState);
 
   if (!modalName) {
@@ -90,6 +94,10 @@ export default function AdminModal() {
     'ADMIN-TOURNAMENT_PARTICIPANT_EDIT': tournamentId ? (
       <AdminTournamentParticipantEditModal tournamentId={tournamentId} />
     ) : null,
+    'ADMIN-PARTY_TEMPLATE': <TemplateModal template={template} />,
+    'ADMIN-PARTY_ADMIN_PENALTY': (
+      <AdminPartyPenaltyModal partyPenalty={partyPenalty} />
+    ),
   };
 
   return content[modalName];
diff --git a/components/modal/modalType/PartyModal.tsx b/components/modal/modalType/PartyModal.tsx
new file mode 100644
index 000000000..8f3030086
--- /dev/null
+++ b/components/modal/modalType/PartyModal.tsx
@@ -0,0 +1,11 @@
+import { useRecoilValue } from 'recoil';
+import { modalState } from 'utils/recoil/modal';
+
+export default function PartyModal() {
+  const { modalName } = useRecoilValue(modalState);
+
+  const content: { [key: string]: JSX.Element | null } = {};
+
+  if (!modalName) return null;
+  return content[modalName];
+}
diff --git a/components/party/PartyCreate.tsx b/components/party/PartyCreate.tsx
new file mode 100644
index 000000000..40626c930
--- /dev/null
+++ b/components/party/PartyCreate.tsx
@@ -0,0 +1,292 @@
+import { useRouter } from 'next/router';
+import { FormEvent, useState } from 'react';
+import { useSetRecoilState } from 'recoil';
+import { FaTimes } from 'react-icons/fa';
+import { PartyCategory, PartyCreateForm } from 'types/partyTypes';
+import { instance } from 'utils/axios';
+import { toastState } from 'utils/recoil/toast';
+import {
+  customTemplate,
+  hourOptions,
+  minuteOptions,
+  peopleOptions,
+} from 'constants/party/createOptions';
+import LoadingSpinner from 'components/UI/LoadingSpinner';
+import { usePartyTemplate } from 'hooks/party/usePartyTemplate';
+import styles from 'styles/party/PartyCreate.module.scss';
+
+// ================================================================================
+// CategorySelection: 방 카테고리 및 템플릿 선택
+// ================================================================================
+
+type CategorySelectionProps = {
+  categories: PartyCategory[];
+  defaultCategoryId: number;
+  setPartyForm: (data: PartyCreateForm) => void;
+};
+
+function CategorySelection({
+  categories,
+  defaultCategoryId,
+  setPartyForm,
+}: CategorySelectionProps) {
+  const router = useRouter();
+  const [selectedCategoryId, setSelectedCategoryId] =
+    useState(defaultCategoryId);
+  const { templates } = usePartyTemplate();
+  const [selectedTemplateId, setSelectedTemplateId] = useState(
+    customTemplate.gameTemplateId
+  );
+  const templateOptions = [
+    customTemplate,
+    ...templates.filter((t) => t.categoryId === selectedCategoryId),
+  ];
+
+  function handleTemplate() {
+    const template =
+      templateOptions.find((t) => t.gameTemplateId === selectedTemplateId) ??
+      customTemplate;
+    setPartyForm(
+      template.gameTemplateId === customTemplate.gameTemplateId
+        ? {
+            title: '',
+            categoryId: selectedCategoryId,
+            minPeople: template.minGamePeople,
+            maxPeople: template.maxGamePeople,
+            content: '',
+            minutesUntilDueDate: 60,
+          }
+        : {
+            title: `${template.gameName}`,
+            categoryId: selectedCategoryId,
+            minPeople: template.minGamePeople,
+            maxPeople: template.maxGamePeople,
+            content:
+              `난이도: ${template.difficulty}\n` +
+              `장르: ${template.genre}\n` +
+              `게임 시간: ${template.minGameTime} - ${template.maxGameTime}\n` +
+              `설명: ${template.summary}`,
+            minutesUntilDueDate: 60,
+          }
+    );
+    router.push({
+      pathname: router.pathname,
+      query: { step: 'detail' },
+    });
+  }
+
+  return (
+    <div className={styles.selectionPageContainer}>
+      <header>
+        <div>{/* 정렬을 위한 가짜 box */}</div>
+        <h2>카테고리</h2>
+        <button onClick={() => router.back()}>
+          <FaTimes size={25} />
+        </button>
+      </header>
+      <section className={styles.categoryContainer}>
+        <ul>
+          {categories.map((c) => (
+            <li key={c.categoryId}>
+              <button
+                onClick={() => {
+                  setSelectedCategoryId(c.categoryId);
+                }}
+                className={`${
+                  c.categoryId === selectedCategoryId ? styles.selected : ''
+                }`}
+              >
+                {c.categoryName}
+              </button>
+            </li>
+          ))}
+        </ul>
+      </section>
+      <section className={styles.templateContainer}>
+        <h3>템플릿</h3>
+        <ul>
+          {templateOptions.map((t) => (
+            <li key={t.gameTemplateId}>
+              <button
+                onClick={() => {
+                  setSelectedTemplateId(t.gameTemplateId);
+                }}
+                className={`${
+                  t.gameTemplateId === selectedTemplateId ? styles.selected : ''
+                }`}
+              >
+                <div>{t.gameName}</div>
+                <div>{`${t.minGamePeople}-${t.maxGamePeople}인`}</div>
+              </button>
+            </li>
+          ))}
+        </ul>
+      </section>
+      <div className={styles.submitButtonWrap}>
+        <button onClick={handleTemplate}>다음</button>
+      </div>
+    </div>
+  );
+}
+
+// ================================================================================
+// DetailCustomization : 방 세부사항 수정
+// ================================================================================
+
+type DetailCustomizationProps = {
+  categoryName: string;
+  partyForm: PartyCreateForm;
+  setPartyForm: (data: PartyCreateForm) => void;
+};
+
+function DetailCustomization({
+  categoryName,
+  partyForm,
+  setPartyForm,
+}: DetailCustomizationProps) {
+  const router = useRouter();
+  const setSnackBar = useSetRecoilState(toastState);
+  const [openPeriod, setOpenPeriod] = useState({
+    hour: 1,
+    minute: 0,
+  });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  function updatePartyForm(data: Partial<PartyCreateForm>) {
+    setPartyForm({ ...partyForm, ...data });
+  }
+  function handleOpenPeriod(period: { hour: number; minute: number }) {
+    setOpenPeriod(period);
+    updatePartyForm({
+      minutesUntilDueDate: period.hour * 60 + period.minute,
+    });
+  }
+  function handleSubmit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setIsSubmitting(true);
+    instance
+      .post('/party/rooms', partyForm)
+      .then(({ data }) => {
+        router.push(`/party/${data.roomId}`);
+      })
+      .catch(() => {
+        setSnackBar({
+          toastName: 'GET request',
+          message: '방을 만드는데 실패했습니다. 다시 시도해주세요.',
+          severity: 'error',
+          clicked: true,
+        });
+        setTimeout(() => {
+          setIsSubmitting(false);
+        }, 1000);
+      });
+  }
+
+  return (
+    <div className={styles.detailFormContainer}>
+      <header>
+        <h2>#{categoryName}</h2>
+        <button onClick={() => router.back()}>
+          <FaTimes size={25} />
+        </button>
+      </header>
+      <form onSubmit={handleSubmit}>
+        <label className={styles.titleLabel}>
+          <h3>방 제목</h3>
+          <input
+            value={partyForm.title}
+            onChange={(e) => updatePartyForm({ title: e.target.value })}
+            placeholder='제목을 입력하세요'
+          />
+        </label>
+        <label>
+          <h3>인원</h3>
+          <div className={styles.peopleSelectWrap}>
+            <select
+              onChange={(e) => updatePartyForm({ minPeople: +e.target.value })}
+              defaultValue={partyForm.minPeople}
+            >
+              {peopleOptions.map((opt) => (
+                <option key={opt} value={opt}>
+                  {opt}
+                </option>
+              ))}
+            </select>
+            <div>~</div>
+            <select
+              onChange={(e) => updatePartyForm({ maxPeople: +e.target.value })}
+              defaultValue={partyForm.maxPeople}
+            >
+              {peopleOptions
+                .filter((opt) => opt >= partyForm.minPeople)
+                .map((opt) => (
+                  <option key={opt} value={opt}>
+                    {opt}
+                  </option>
+                ))}
+            </select>
+            <div>인</div>
+          </div>
+        </label>
+        <label>
+          <h3>마감 기한</h3>
+          <div className={styles.dueDateWrap}>
+            <select
+              onChange={(e) =>
+                handleOpenPeriod({
+                  hour: +e.target.value,
+                  minute: openPeriod.minute,
+                })
+              }
+              defaultValue={openPeriod.hour}
+            >
+              {hourOptions.map((h) => (
+                <option key={h} value={h}>
+                  {h}
+                </option>
+              ))}
+            </select>
+            <div>시간</div>
+            <select
+              onChange={(e) =>
+                handleOpenPeriod({
+                  hour: openPeriod.hour,
+                  minute: +e.target.value,
+                })
+              }
+              defaultValue={openPeriod.minute}
+            >
+              {minuteOptions.map((m) => (
+                <option key={m} value={m}>
+                  {m}
+                </option>
+              ))}
+            </select>
+            <div>분 후</div>
+          </div>
+        </label>
+        <label className={styles.contentLabel}>
+          <h3>상세글</h3>
+          <textarea
+            rows={10}
+            value={partyForm.content}
+            onChange={(e) => updatePartyForm({ content: e.target.value })}
+            placeholder='상세글을 작성해 주세요.'
+          />
+        </label>
+        <div className={styles.submitButtonWrap}>
+          <button type='submit' disabled={isSubmitting}>
+            {isSubmitting ? <LoadingSpinner /> : '파티 생성'}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+const PartyCreate = {
+  CategorySelection,
+  DetailCustomization,
+};
+
+export default PartyCreate;
diff --git a/components/party/PartyRoomListItem.tsx b/components/party/PartyRoomListItem.tsx
new file mode 100644
index 000000000..45ebcaef0
--- /dev/null
+++ b/components/party/PartyRoomListItem.tsx
@@ -0,0 +1,41 @@
+import Link from 'next/link';
+import { PartyRoom } from 'types/partyTypes';
+import usePartyCategory from 'hooks/party/usePartyCategory';
+import styles from 'styles/party/PartyRoomListItem.module.scss';
+
+export default function PartyRoomListItem({ room }: { room: PartyRoom }) {
+  const { categories } = usePartyCategory();
+  const categoryName =
+    categories?.find((c) => c.categoryId === room.categoryId)?.categoryName ??
+    '???';
+  const roomStatusKo =
+    room.status === 'START'
+      ? '진행중'
+      : room.status === 'FINISH'
+      ? '마감'
+      : '모집중';
+
+  return (
+    <li key={room.roomId}>
+      <Link
+        href={`/party/${room.roomId}`}
+        className={`${styles.roomWrap} ${
+          room.status !== 'OPEN' ? styles.transparent : ''
+        }`}
+      >
+        <div className={styles.roomDescWrap}>
+          <header>
+            <div className={styles.roomCategory}>#{categoryName}</div>
+            <div className={`${styles.roomStatus} ${styles[room.status]}`}>
+              {roomStatusKo}
+            </div>
+          </header>
+          <div className={styles.roomTitle}>{room.title}</div>
+        </div>
+        <div
+          className={styles.roomPeopleWrap}
+        >{`${room.currentPeople}/${room.maxPeople}`}</div>
+      </Link>
+    </li>
+  );
+}
diff --git a/components/party/roomDetail/PartyDetailButton.tsx b/components/party/roomDetail/PartyDetailButton.tsx
new file mode 100644
index 000000000..7bc3a9517
--- /dev/null
+++ b/components/party/roomDetail/PartyDetailButton.tsx
@@ -0,0 +1,163 @@
+import { useRouter } from 'next/router';
+import { useSetRecoilState } from 'recoil';
+import { CiShare2 } from 'react-icons/ci';
+import { PiSirenFill } from 'react-icons/pi';
+import { instance } from 'utils/axios';
+import { modalState } from 'utils/recoil/modal';
+import { toastState } from 'utils/recoil/toast';
+import styles from 'styles/party/PartyDetailRoom.module.scss';
+
+type ParytButtonProps = {
+  roomId?: number;
+  commentId?: number;
+};
+
+function ReportComment({ commentId }: ParytButtonProps) {
+  const setModal = useSetRecoilState(modalState);
+
+  return (
+    <button
+      className={styles.commentBtn}
+      onClick={() => {
+        setModal({
+          partyReport: {
+            name: 'COMMENT',
+            commentId: commentId,
+          },
+          modalName: 'PARTY-REPORT',
+        });
+      }}
+    >
+      <PiSirenFill color='red' />
+    </button>
+  );
+}
+
+function ReportRoom({ roomId }: ParytButtonProps) {
+  const setModal = useSetRecoilState(modalState);
+
+  return (
+    <button
+      className={styles.reportRoomBtn}
+      onClick={() => {
+        setModal({
+          partyReport: {
+            name: 'ROOM',
+            roomId: roomId,
+          },
+          modalName: 'PARTY-REPORT',
+        });
+      }}
+    >
+      <PiSirenFill color='red' />
+    </button>
+  );
+}
+
+function ShareRoom() {
+  const roomId = useRouter().query.roomId;
+
+  return (
+    <button
+      className={styles.shareBtn}
+      onClick={() => {
+        navigator.clipboard.writeText(`http://42gg.kr/parties/${roomId}`);
+      }}
+    >
+      <CiShare2 />
+    </button>
+  );
+}
+
+type RefreshProps = ParytButtonProps & {
+  fetchRoomDetail: () => void;
+};
+
+function JoinRoom({ roomId, fetchRoomDetail }: RefreshProps) {
+  const setSnackbar = useSetRecoilState(toastState);
+  const handlerJoin = () => {
+    instance
+      .post(`/party/rooms/${roomId}`)
+      .then(() => {
+        fetchRoomDetail();
+      })
+      .catch(() => {
+        setSnackbar({
+          toastName: 'GET request',
+          message: '참여에 실패했습니다. 다시 시도해주세요.',
+          severity: 'error',
+          clicked: true,
+        });
+      });
+  };
+
+  return (
+    <button className={styles.joinBtn} onClick={handlerJoin}>
+      참여하기
+    </button>
+  );
+}
+
+function LeaveRoom({ roomId, fetchRoomDetail }: RefreshProps) {
+  const setSnackbar = useSetRecoilState(toastState);
+
+  const handlerExit = () => {
+    instance
+      .patch(`/party/rooms/${roomId}`)
+      .then(() => {
+        fetchRoomDetail();
+      })
+      .catch(() => {
+        setSnackbar({
+          toastName: 'patch request',
+          message: '나가기에 실패했습니다.\n 다시 시도해주세요.',
+          severity: 'error',
+          clicked: true,
+        });
+      });
+  };
+
+  return (
+    <button className={styles.leaveBtn} onClick={handlerExit}>
+      방 나가기
+    </button>
+  );
+}
+
+function StartRoom({ roomId, fetchRoomDetail }: RefreshProps) {
+  const setSnackbar = useSetRecoilState(toastState);
+
+  return (
+    <button
+      className={styles.startBtn}
+      onClick={() => {
+        instance
+          .patch(`/party/rooms/${roomId}/start`)
+          .then(() => {
+            fetchRoomDetail();
+          })
+          .catch(() => {
+            setSnackbar({
+              toastName: 'patch request',
+              message: '시작에 실패했습니다시',
+              severity: 'error',
+              clicked: true,
+            });
+          });
+      }}
+    >
+      시작
+    </button>
+  );
+}
+
+const PartyRoomDetailButton = {
+  ReportComment,
+  ReportRoom,
+  ShareRoom,
+  JoinRoom,
+  LeaveRoom,
+  StartRoom,
+};
+
+export default PartyRoomDetailButton;
diff --git a/components/party/roomDetail/PartyDetailContentCommentBox.tsx b/components/party/roomDetail/PartyDetailContentCommentBox.tsx
new file mode 100644
index 000000000..d456858d6
--- /dev/null
+++ b/components/party/roomDetail/PartyDetailContentCommentBox.tsx
@@ -0,0 +1,111 @@
+import { IoSendSharp } from 'react-icons/io5';
+import {
+  PartyComment,
+  PartyRoomDetail,
+  PartyRoomStatus,
+} from 'types/partyTypes';
+import { instance } from 'utils/axios';
+import { getTimeAgo } from 'utils/handleTime';
+import styles from 'styles/party/PartyDetailRoom.module.scss';
+import PartyRoomDetailButton from './PartyDetailButton';
+type PartyRoomDetailProps = {
+  partyRoomDetail: PartyRoomDetail;
+  fetchRoomDetail: () => void;
+};
+
+type CommentCreateBarProps = {
+  roomId: number;
+  status: PartyRoomStatus;
+  myNickname: string | null;
+  fetchRoomDetail: () => void;
+};
+
+export default function PartyDetailContentCommentBox({
+  partyRoomDetail,
+  fetchRoomDetail,
+}: PartyRoomDetailProps) {
+  const totalComments = partyRoomDetail.comments.length;
+
+  return (
+    <>
+      <div className={styles.contentCommentBox}>
+        <div className={styles.content}>{partyRoomDetail.content}</div>
+        <div className={styles.comment}>댓글 ({totalComments})</div>
+        <hr />
+        <CommentLine comments={partyRoomDetail.comments} />
+      </div>
+      <CommentCreateBar
+        roomId={partyRoomDetail.roomId}
+        status={partyRoomDetail.status}
+        myNickname={partyRoomDetail.myNickname}
+        fetchRoomDetail={fetchRoomDetail}
+      />
+    </>
+  );
+}
+
+function CommentLine({ comments }: { comments: PartyComment[] }) {
+  return (
+    <>
+      {comments.map((comment) =>
+        comment.isHidden ? (
+          <div key={comment.commentId} className={styles.commentHidden}>
+            숨김 처리된 댓글입니다.
+          </div>
+        ) : (
+          <div
+            key={comment.commentId}
+            style={{ color: nameToRGB(comment.nickname) }}
+            className={styles.comment}
+          >
+            <div>{comment.content}</div>
+            <div className={styles.commentInfo}>
+              <span>{comment.nickname}</span>
+              <span>{` (${getTimeAgo(comment.createDate)})`}</span>
+              <PartyRoomDetailButton.ReportComment />
+            </div>
+          </div>
+        )
+      )}
+    </>
+  );
+}
+
+function CommentCreateBar({
+  roomId,
+  status,
+  fetchRoomDetail,
+}: CommentCreateBarProps) {
+  const handlerComments = async () => {
+    await instance.post(`/party/rooms/${roomId}/comments`);
+    fetchRoomDetail();
+  };
+
+  if (status !== 'OPEN') {
+    return <> </>;
+  }
+
+  return (
+    <div className={styles.commentCreateBar}>
+      <form onSubmit={handlerComments}>
+        <input className={styles.textBar} type='text' />
+        <button className={styles.inputBtn} type='submit'>
+          <IoSendSharp />
+        </button>
+      </form>
+    </div>
+  );
+}
+
+function nameToRGB(name: string): string {
+  let codeSum = 0;
+  for (let i = 0; i < name.length; i++) {
+    codeSum += name.charCodeAt(i) ** i * 10;
+  }
+
+  const red = codeSum % 256;
+  const green = (codeSum * 2) % 256;
+  const blue = (codeSum * 3) % 256;
+
+  return `rgb(${red}, ${green}, ${blue})`;
+}
diff --git a/components/party/roomDetail/PartyDetailProfile.tsx b/components/party/roomDetail/PartyDetailProfile.tsx
new file mode 100644
index 000000000..7ccfc835c
--- /dev/null
+++ b/components/party/roomDetail/PartyDetailProfile.tsx
@@ -0,0 +1,161 @@
+import Image from 'next/image';
+import { FaCrown } from 'react-icons/fa';
+import {
+  PartyRoomDetail,
+  PartyRoomStatus,
+  PartyRoomUser,
+} from 'types/partyTypes';
+import { dateToStringShort } from 'utils/handleTime';
+import styles from 'styles/party/PartyDetailRoom.module.scss';
+import PartyRoomDetailButton from './PartyDetailButton';
+
+type PartyDetailProfileProps = {
+  partyRoomDetail: PartyRoomDetail;
+  fetchRoomDetail: () => void;
+};
+
+export default function PartyDetailProfile({
+  partyRoomDetail,
+  fetchRoomDetail,
+}: PartyDetailProfileProps) {
+  const {
+    currentPeople,
+    maxPeople,
+    dueDate,
+    roomId,
+    status,
+    roomUsers,
+    hostNickname,
+  } = partyRoomDetail;
+
+  return (
+    <div className={styles.profile}>
+      <div className={styles.line}>
+        <span>{`참여인원  (${currentPeople}/${maxPeople})`}</span>
+        <span>{`${dateToStringShort(new Date(dueDate))}`}</span>
+      </div>
+      <div className={styles.profileItem}>
+        <Profile roomUsers={roomUsers} hostNickname={hostNickname} />
+      </div>
+      <ButtonHandler
+        status={status}
+        myNickname={partyRoomDetail.myNickname}
+        roomId={roomId}
+        hostNickname={hostNickname}
+        fetchRoomDetail={fetchRoomDetail}
+      />
+    </div>
+  );
+}
+
+/*------------------------profile------------------------------ */
+
+type ProfileProps = {
+  roomUsers: PartyRoomUser[];
+  hostNickname: string;
+};
+
+function Profile({ roomUsers, hostNickname }: ProfileProps) {
+  return (
+    <ul>
+      {roomUsers.map(({ intraId, nickname, userImage }) =>
+        intraId ? (
+          <li key={intraId} className={styles.user}>
+            {nickname === hostNickname && (
+              <div className={styles.crown}>
+                <FaCrown color='gold' />
+              </div>
+            )}
+            <Image
+              src={
+                userImage ||
+                `https://random.dog/7f6f49dd-7ca5-46bd-97fb-c534628f9a2b.jpg`
+              }
+              className={styles.profileImg}
+              alt={intraId}
+              width={40}
+              height={40}
+            />
+            <div style={{ color: nameToRGB(nickname) }}>{intraId}</div>
+          </li>
+        ) : (
+          <li key={nickname} className={styles.user}>
+            {nickname === hostNickname && (
+              <div className={styles.crown}>
+                <FaCrown color='gold' />
+              </div>
+            )}
+            <Image
+              src={`https://random.dog/7f6f49dd-7ca5-46bd-97fb-c534628f9a2b.jpg`}
+              className={styles.profileImg}
+              alt={nickname}
+              width={40}
+              height={40}
+            />
+            <div>{nickname}</div>
+          </li>
+        )
+      )}
+    </ul>
+  );
+}
+
+/*-----------------------button------------------------------ */
+
+type ButtonProps = {
+  roomId: number;
+  status: PartyRoomStatus;
+  myNickname: string | null;
+  hostNickname: string;
+  fetchRoomDetail: () => void;
+};
+
+function ButtonHandler({
+  status,
+  myNickname,
+  roomId,
+  hostNickname,
+  fetchRoomDetail,
+}: ButtonProps) {
+  return status !== 'OPEN' ? (
+    <></>
+  ) : !myNickname ? (
+    <div className={styles.btnContainer}>
+      <PartyRoomDetailButton.JoinRoom
+        roomId={roomId}
+        fetchRoomDetail={fetchRoomDetail}
+      />
+    </div>
+  ) : hostNickname !== myNickname ? (
+    <div className={styles.btnContainer}>
+      <PartyRoomDetailButton.LeaveRoom
+        roomId={roomId}
+        fetchRoomDetail={fetchRoomDetail}
+      />
+    </div>
+  ) : (
+    <>
+      <PartyRoomDetailButton.StartRoom
+        roomId={roomId}
+        fetchRoomDetail={fetchRoomDetail}
+      />
+      <PartyRoomDetailButton.LeaveRoom
+        roomId={roomId}
+        fetchRoomDetail={fetchRoomDetail}
+      />
+    </>
+  );
+}
+
+function nameToRGB(name: string): string {
+  let codeSum = 0;
+  for (let i = 0; i < name.length; i++) {
+    codeSum += name.charCodeAt(i) ** i * 10;
+  }
+
+  const red = codeSum % 256;
+  const green = (codeSum * 2) % 256;
+  const blue = (codeSum * 3) % 256;
+
+  return `rgb(${red}, ${green}, ${blue})`;
+}
diff --git a/components/party/roomDetail/PartyDetailTitleBox.tsx b/components/party/roomDetail/PartyDetailTitleBox.tsx
new file mode 100644
index 000000000..b535d783d
--- /dev/null
+++ b/components/party/roomDetail/PartyDetailTitleBox.tsx
@@ -0,0 +1,38 @@
+import { getRemainTime } from 'utils/handleTime';
+import usePartyCategory from 'hooks/party/usePartyCategory';
+import styles from 'styles/party/PartyDetailRoom.module.scss';
+import PartyRoomDetailButton from './PartyDetailButton';
+
+type PartyDetailTitleBoxProps = {
+  categoryId: number;
+  title: string;
+  roomId: number;
+  dueDate: string;
+};
+
+export default function PartyDetailTitleBox({
+  categoryId,
+  title,
+  roomId,
+  dueDate,
+}: PartyDetailTitleBoxProps) {
+  const category = usePartyCategory().categories.find(
+    (category) => category.categoryId === categoryId
+  )?.categoryName;
+
+  return (
+    <div className={styles.titleBox}>
+      <div className={styles.titleLine}>
+        <div className={styles.titleCategory}>{`#${category}`}</div>
+        <PartyRoomDetailButton.ShareRoom />
+      </div>
+      <div className={styles.titleContent}>{title}</div>
+      <div className={styles.titleLine}>
+        <span className={styles.remainTime}>
+          {getRemainTime({ targetTime: new Date(dueDate) })}
+        </span>
+        <PartyRoomDetailButton.ReportRoom roomId={roomId} />
+      </div>
+    </div>
+  );
+}
diff --git a/constants/admin/table.ts b/constants/admin/table.ts
index ca6d8a607..fdfd191ef 100644
--- a/constants/admin/table.ts
+++ b/constants/admin/table.ts
@@ -158,4 +158,88 @@ export const tableFormat: TableFormat = {
     name: '토너먼트 생성',
     columns: ['title', 'startTime', 'endTime', 'type'],
   },
+  partyRoom: {
+    name: '파티방',
+    columns: [
+      'roomId',
+      'title',
+      'categoryName',
+      'createDate',
+      'dueDate',
+      'creatorIntraId',
+      'roomStatus',
+      'etc',
+    ],
+    etc: {
+      type: 'button',
+      value: ['해제'],
+    },
+  },
+  partyCategory: {
+    name: '파티 카테고리',
+    columns: ['categoryId', 'categoryName', 'delete'],
+  },
+  partyTemplate: {
+    name: '파티 템플릿',
+    columns: [
+      'gameTemplateId',
+      'categoryId',
+      'gameName',
+      'maxGamePeople',
+      'minGamePeople',
+      'maxGameTime',
+      'minGameTime',
+      'genre',
+      'difficulty',
+      'summary',
+      'change',
+      'delete',
+    ],
+  },
+  partyNoshowReport: {
+    name: '파티노쇼 신고',
+    columns: [
+      'id',
+      'reporterId',
+      'reporteeId',
+      'roomId',
+      'message',
+      'createdAt',
+    ],
+  },
+  partyRoomReport: {
+    name: '방 신고',
+    columns: [
+      'id',
+      'reporterId',
+      'reporteeId',
+      'roomId',
+      'message',
+      'createdAt',
+    ],
+  },
+  partyCommentReport: {
+    name: '댓글 신고',
+    columns: [
+      'id',
+      'reporterId',
+      'commentsId',
+      'roomId',
+      'message',
+      'createdAt',
+    ],
+  },
+  partyPenaltyAdmin: {
+    name: '파티 패널티',
+    columns: [
+      'id',
+      'user',
+      'penaltyType',
+      'message',
+      'startTime',
+      'penaltyTime',
+      'userIntraId',
+      'edit',
+    ],
+  },
 };
diff --git a/constants/party/createOptions.ts b/constants/party/createOptions.ts
new file mode 100644
index 000000000..a9145b967
--- /dev/null
+++ b/constants/party/createOptions.ts
@@ -0,0 +1,16 @@
+const custumTemplateId = 0;
+export const customTemplate = {
+  gameTemplateId: custumTemplateId,
+  gameName: '직접 입력',
+  minGamePeople: 2,
+  maxGamePeople: 4,
+  minGameTime: 15,
+  maxGameTime: 30,
+  genre: '',
+  difficulty: '',
+  summary: '',
+};
+
+export const peopleOptions = [2, 3, 4, 5, 6, 7, 8];
+export const hourOptions = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+export const minuteOptions = [0, 15, 30, 45];
diff --git a/hooks/party/usePartyCategory.ts b/hooks/party/usePartyCategory.ts
new file mode 100644
index 000000000..b40ad11e3
--- /dev/null
+++ b/hooks/party/usePartyCategory.ts
@@ -0,0 +1,58 @@
+import { useMutation, useQuery, useQueryClient } from 'react-query';
+import { useSetRecoilState } from 'recoil';
+import { PartyCategory } from 'types/partyTypes';
+import { instance, instanceInPartyManage } from 'utils/axios';
+import { toastState } from 'utils/recoil/toast';
+
+type categoryResponse = {
+  categoryList: PartyCategory[];
+};
+
+export default function usePartyCategory() {
+  const queryClient = useQueryClient();
+  const setSnackBar = useSetRecoilState(toastState);
+
+  const { data, isLoading, isError } = useQuery({
+    queryKey: 'partyCategory',
+    queryFn: () =>
+      instance
+        .get<categoryResponse>('/party/categories')
+        .then(({ data }) => data.categoryList),
+    onError: () => {
+      setSnackBar({
+        toastName: 'GET request',
+        message: '카테고리를 가져오는데 실패했습니다.',
+        severity: 'error',
+        clicked: true,
+      });
+    },
+  });
+
+  const createMutation = useMutation(
+    (categoryName: string) =>
+      instanceInPartyManage.post('/categories', { categoryName }),
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries('partyCategory');
+      },
+    }
+  );
+  const deleteMutation = useMutation(
+    (categoryId: number) =>
+      instanceInPartyManage.delete(`/categories/${categoryId}`),
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries('partyCategory');
+      },
+    }
+  );
+
+  return {
+    categories: data ?? [], // undefind 대신 []을 이용해 에러 처리
+    deleteCategory: (categoryId: number) => deleteMutation.mutate(categoryId),
+    createCategory: (categoryName: string) =>
+      createMutation.mutate(categoryName),
+    isCategoryLoading: isLoading,
+    isCategoryError: isError,
+  };
+}
diff --git a/hooks/party/usePartyColorMode.ts b/hooks/party/usePartyColorMode.ts
new file mode 100644
index 000000000..31e30a2de
--- /dev/null
+++ b/hooks/party/usePartyColorMode.ts
@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+import { useResetRecoilState, useSetRecoilState } from 'recoil';
+import { PartyColors } from 'types/partyTypes';
+import { colorModeState } from 'utils/recoil/colorMode';
+
+export default function usePartyColorMode(color: PartyColors) {
+  const setColorMode = useSetRecoilState(colorModeState);
+  const resetColorMode = useResetRecoilState(colorModeState);
+
+  useEffect(() => {
+    setColorMode(color);
+    return () => {
+      resetColorMode();
+    };
+  }, []);
+}
diff --git a/hooks/party/usePartyRoomList.ts b/hooks/party/usePartyRoomList.ts
new file mode 100644
index 000000000..b7c520f18
--- /dev/null
+++ b/hooks/party/usePartyRoomList.ts
@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react';
+import { PartyRoom } from 'types/partyTypes';
+import { instance, instanceInPartyManage } from 'utils/axios';
+
+type PartyRoomListProps = {
+  isAdmin?: boolean;
+  withJoined?: boolean;
+  searchTitle?: string;
+};
+type RoomListResponse = {
+  roomList: PartyRoom[];
+};
+
+export default function usePartyRoomList({
+  isAdmin = false,
+  withJoined = false,
+  searchTitle,
+}: PartyRoomListProps = {}) {
+  const [partyRooms, setPartyRooms] = useState<PartyRoom[]>([]);
+  const [joinedPartyRooms, setJoinedPartyRooms] = useState<PartyRoom[]>([]);
+
+  const getRoomsAxios = (title?: string) => {
+    const query = title ? `?title=${title}` : '';
+    return isAdmin
+      ? instanceInPartyManage.get<RoomListResponse>(
+          '/party/admin/rooms' + query
+        )
+      : instance.get<RoomListResponse>('/party/rooms' + query);
+  };
+
+  useEffect(() => {
+    const axioses = [getRoomsAxios(searchTitle)];
+    if (withJoined)
+      axioses.push(instance.get<RoomListResponse>('/party/rooms/joined'));
+
+    Promise.all(axioses).then(([roomsRes, joinedRoomsRes]) => {
+      // 추후에 query를 통한 검색으로 변경
+      setPartyRooms(
+        roomsRes.data.roomList.filter((r) =>
+          r.title.includes(searchTitle ?? '')
+        )
+      );
+      setJoinedPartyRooms(joinedRoomsRes?.data.roomList ?? []); // joinedRooms는 조건부로 가져오므로 ?.data로 접근
+    });
+  }, [searchTitle]);
+
+  return { partyRooms, joinedPartyRooms };
+}
diff --git a/hooks/party/usePartyRoomList.tsx b/hooks/party/usePartyRoomList.tsx
new file mode 100644
index 000000000..cc0037d57
--- /dev/null
+++ b/hooks/party/usePartyRoomList.tsx
@@ -0,0 +1,45 @@
+import { useEffect, useState } from 'react';
+import { PartyRoom } from 'types/partyTypes';
+import { instance, instanceInPartyManage } from 'utils/axios';
+
+type PartyRoomProps = {
+  isAdmin?: boolean;
+  withJoined?: boolean;
+};
+type RoomsResponse = {
+  roomList: PartyRoom[];
+};
+
+export default function usePartyRoomList({
+  isAdmin = false,
+  withJoined = false,
+}: PartyRoomProps = {}) {
+  const [partyRooms, setPartyRooms] = useState<PartyRoom[]>([]);
+  const [joinedPartyRooms, setJoinedPartyRooms] = useState<PartyRoom[]>([]);
+
+  const getRoomsAxios = (title?: string) => {
+    const query = title ? `?title${title}` : '';
+    return isAdmin
+      ? instanceInPartyManage.get<RoomsResponse>('/party/admin/rooms' + query)
+      : instance.get<RoomsResponse>('/party/rooms' + query);
+  };
+
+  useEffect(() => {
+    const axioses = [getRoomsAxios()];
+    if (withJoined)
+      axioses.push(instance.get<RoomsResponse>('/party/rooms/joined'));
+
+    Promise.all(axioses).then(([roomsRes, joinedRoomsRes]) => {
+      setPartyRooms(roomsRes.data.roomList);
+      setJoinedPartyRooms(joinedRoomsRes?.data.roomList ?? []); // joinedRooms는 조건부로 가져오므로 ?.data로 접근
+    });
+  }, []);
+
+  function updateRoomsByTitle(title: string) {
+    getRoomsAxios(title).then(({ data }: { data: RoomsResponse }) =>
+      setPartyRooms(data.roomList)
+    );
+  }
+
+  return { partyRooms, joinedPartyRooms, updateRoomsByTitle };
+}
diff --git a/hooks/party/usePartyTemplate.ts b/hooks/party/usePartyTemplate.ts
new file mode 100644
index 000000000..62bbbca37
--- /dev/null
+++ b/hooks/party/usePartyTemplate.ts
@@ -0,0 +1,74 @@
+import { useMutation, useQuery, useQueryClient } from 'react-query';
+import { useSetRecoilState } from 'recoil';
+import { PartyGameTemplate, PartyTemplateForm } from 'types/partyTypes';
+import { instance, instanceInPartyManage } from 'utils/axios';
+import { toastState } from 'utils/recoil/toast';
+
+type templateResponse = {
+  templateList: PartyGameTemplate[];
+};
+
+export function usePartyTemplate(categoryId?: number) {
+  const queryClient = useQueryClient();
+  const setSnackBar = useSetRecoilState(toastState);
+
+  const { data } = useQuery({
+    queryKey: 'partyGameTemplate',
+    queryFn: () =>
+      instance
+        .get<templateResponse>('/party/templates')
+        .then(({ data }) => data.templateList),
+    onError: () => {
+      setSnackBar({
+        toastName: 'GET request',
+        message: '템플릿을 가져오는데 실패했습니다.',
+        severity: 'error',
+        clicked: true,
+      });
+    },
+  });
+
+  const createMutation = useMutation(
+    (templateForm: PartyTemplateForm) =>
+      instanceInPartyManage.post('/templates', templateForm),
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries('partyGameTemplate');
+      },
+    }
+  );
+  const updateMutation = useMutation(
+    (template: PartyGameTemplate) =>
+      instanceInPartyManage.patch(
+        `/templates/${template.gameTemplateId}`,
+        template
+      ),
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries('partyGameTemplate');
+      },
+    }
+  );
+  const deleteMutation = useMutation(
+    (gameTemplateId: number) =>
+      instanceInPartyManage.delete(`/templates/${gameTemplateId}`),
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries('partyGameTemplate');
+      },
+    }
+  );
+  return {
+    templates: data
+      ? categoryId
+        ? data.filter((d) => d.categoryId === categoryId)
+        : data
+      : [], // undefind 대신 []을 이용해 에러 처리
+    createTemplate: (template: PartyTemplateForm) =>
+      createMutation.mutate(template),
+    updateTemplate: (template: PartyGameTemplate) =>
+      updateMutation.mutate(template),
+    deleteTemplate: ({ gameTemplateId }: { gameTemplateId: number }) =>
+      deleteMutation.mutate(gameTemplateId),
+  };
+}
diff --git a/pages/admin/party.tsx b/pages/admin/party.tsx
new file mode 100644
index 000000000..1f90b0d2d
--- /dev/null
+++ b/pages/admin/party.tsx
@@ -0,0 +1,9 @@
+import PartyNav from 'components/admin/party/PartyNav';
+
+export default function Party() {
+  return (
+    <>
+      <PartyNav />
+    </>
+  );
+}
diff --git a/pages/api/pingpong/party/rooms/[roomId]/index.ts b/pages/api/pingpong/party/rooms/[roomId]/index.ts
new file mode 100644
index 000000000..f2c39caad
--- /dev/null
+++ b/pages/api/pingpong/party/rooms/[roomId]/index.ts
@@ -0,0 +1,82 @@
+import { PartyRoomDetail, PartyRoomStatus } from 'types/partyTypes';
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+export default function handler(
+  _req: NextApiRequest,
+  res: NextApiResponse<PartyRoomDetail>
+) {
+  const templetes: PartyRoomDetail[] = [];
+  const status: PartyRoomStatus[] = ['HIDDEN', 'OPEN', 'START', 'FINISH'];
+
+  for (let i = 1; i < 11; i++) {
+    const date = new Date().toString();
+    const create = i;
+
+    templetes.push({
+      roomId: i,
+      title: '파티룸 ' + i,
+      categoryId: 1,
+      currentPeople: 3,
+      minPeople: 3,
+      maxPeople: 5,
+      dueDate: date,
+      createDate: date,
+      myNickname: create === 1 ? 'host' : 'guest' + create,
+      hostNickname: 'host',
+      content: 'content is good',
+      status: status[i % 4],
+      roomUsers: [
+        {
+          roomUserId: 1,
+          userRoomId: 1,
+          nickname: 'host',
+          intraId: 'juha',
+          userImage: `https://avatars.githubusercontent.com/u/68673565?v=4`,
+        },
+        {
+          roomUserId: 2,
+          userRoomId: 2,
+          nickname: 'guest1',
+          intraId: 'wojeong',
+          userImage: null,
+        },
+        {
+          roomUserId: 3,
+          userRoomId: 3,
+          nickname: 'guest2',
+          intraId: 'jeywon',
+          userImage: null,
+        },
+      ],
+      comments: [
+        {
+          commentId: 1,
+          nickname: 'host',
+          content: 'host comment달았어요',
+          isHidden: false,
+          createDate: new Date().toString(),
+        },
+        {
+          commentId: 2,
+          nickname: 'guest1',
+          content: 'guest1 comment달았어요',
+          isHidden: true,
+          createDate: new Date(),
+        },
+        {
+          commentId: 3,
+          nickname: 'hello world',
+          content: 'hello world comment달았어요',
+          isHidden: false,
+          createDate: new Date(),
+        },
+      ],
+    });
+  }
+
+  const detail = templetes.find(
+    (data) => _req.query.roomId === data.roomId.toString()
+  );
+
+  res.status(200).json(detail);
+}
diff --git a/pages/api/pingpong/party/rooms/[roomId]/start/index.ts b/pages/api/pingpong/party/rooms/[roomId]/start/index.ts
new file mode 100644
index 000000000..4645d5db7
--- /dev/null
+++ b/pages/api/pingpong/party/rooms/[roomId]/start/index.ts
@@ -0,0 +1,8 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+export default function handler(
+  _req: NextApiRequest,
+  res: NextApiResponse<string>
+) {
+  res.status(201).json('good!');
+}
diff --git a/pages/index.tsx b/pages/index.tsx
index 5e9913eb2..ce4019266 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -15,6 +15,7 @@ const Home: NextPage = () => {
           tournamentData.liveTournament?.length > 0) && (
           <Section path='tournament' sectionTitle={'Tournament'} />
         )}
+      <Section path='party' sectionTitle={'Party'} />
       <Section path='rank' sectionTitle={'Ranking'} />
       <Section path='game' sectionTitle={'Current Play'} />
     </div>
diff --git a/pages/party/[roomId]/index.tsx b/pages/party/[roomId]/index.tsx
new file mode 100644
index 000000000..c453a9a49
--- /dev/null
+++ b/pages/party/[roomId]/index.tsx
@@ -0,0 +1,53 @@
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import { PartyRoomDetail } from 'types/partyTypes';
+import { instance } from 'utils/axios';
+import PartyDetailContentCommentBox from 'components/party/roomDetail/PartyDetailContentCommentBox';
+import PartyDetailProfile from 'components/party/roomDetail/PartyDetailProfile';
+import PartyDetailTitleBox from 'components/party/roomDetail/PartyDetailTitleBox';
+import usePartyColorMode from 'hooks/party/usePartyColorMode';
+import styles from 'styles/party/PartyDetailRoom.module.scss';
+
+export default function PartyDetailPage() {
+  const roomId = useRouter().query.roomId;
+  const router = useRouter();
+  const [partyRoomDetail, setPartyRoomDetail] = useState<
+    PartyRoomDetail | undefined
+  >(undefined);
+
+  useEffect(() => {
+    fetchRoomDetail();
+  }, []);
+
+  const fetchRoomDetail = () => {
+    instance
+      .get(`/party/rooms/${roomId}`)
+      .then(({ data }) => {
+        setPartyRoomDetail(data);
+      })
+      .catch(() => {
+        alert('방 정보를 불러오는데 실패했습니다.');
+        router.push('/party');
+      });
+  };
+
+  usePartyColorMode('PARTY-DETAIL');
+
+  return partyRoomDetail && partyRoomDetail.status !== 'HIDDEN' ? (
+    <div className={styles.detailPage}>
+      <PartyDetailTitleBox {...partyRoomDetail} />
+      <PartyDetailProfile
+        partyRoomDetail={partyRoomDetail}
+        fetchRoomDetail={fetchRoomDetail}
+      />
+      <PartyDetailContentCommentBox
+        partyRoomDetail={partyRoomDetail}
+        fetchRoomDetail={fetchRoomDetail}
+      />
+    </div>
+  ) : partyRoomDetail === undefined ? (
+    <div>loading...</div>
+  ) : (
+    <div>방이 존재하지 않습니다.</div>
+  );
+}
diff --git a/pages/party/create.tsx b/pages/party/create.tsx
new file mode 100644
index 000000000..38686aff5
--- /dev/null
+++ b/pages/party/create.tsx
@@ -0,0 +1,77 @@
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import { useSetRecoilState } from 'recoil';
+import { PartyCreateForm } from 'types/partyTypes';
+import { toastState } from 'utils/recoil/toast';
+import PartyCreate from 'components/party/PartyCreate';
+import usePartyCategory from 'hooks/party/usePartyCategory';
+import usePartyColorMode from 'hooks/party/usePartyColorMode';
+import styles from 'styles/party/PartyCreate.module.scss';
+
+export default function PartyCreatePage() {
+  const router = useRouter();
+  const createStep = router.query['step'];
+  const setSnackBar = useSetRecoilState(toastState);
+  const { categories, isCategoryLoading, isCategoryError } = usePartyCategory();
+  const [partyForm, setPartyForm] = useState<PartyCreateForm>();
+  const [categoryName, setCategoryName] = useState('');
+
+  useEffect(() => {
+    if (!(createStep === 'category' || createStep === 'detail'))
+      router.replace({
+        pathname: router.pathname,
+        query: { step: 'category' },
+      });
+  }, [router]);
+
+  useEffect(() => {
+    if (!isCategoryLoading && categories.length === 0) {
+      if (!isCategoryError) {
+        setSnackBar({
+          toastName: 'GET request',
+          message: '방을 만들기 위해 적어도 하나의 카테고리가 필요합니다.',
+          severity: 'error',
+          clicked: true,
+        });
+      }
+      router.push('/party');
+    }
+  }, [isCategoryLoading]);
+
+  useEffect(() => {
+    if (createStep === 'detail') {
+      partyForm
+        ? setCategoryName(
+            categories.find((c) => c.categoryId === partyForm.categoryId)
+              ?.categoryName ?? '' // todo: 추후에 백엔드가 categoryName을 pk로 바꾸면 수정
+          )
+        : router.replace({
+            pathname: router.pathname,
+            query: { step: 'category' },
+          });
+    }
+  }, [router, !!partyForm]);
+
+  usePartyColorMode('PARTY-DETAIL');
+
+  if (categories.length === 0) return null;
+
+  return (
+    <div className={styles.pageContainer}>
+      {createStep === 'category' && (
+        <PartyCreate.CategorySelection
+          categories={categories}
+          defaultCategoryId={categories[0].categoryId}
+          setPartyForm={setPartyForm}
+        />
+      )}
+      {createStep === 'detail' && partyForm && (
+        <PartyCreate.DetailCustomization
+          categoryName={categoryName}
+          partyForm={partyForm}
+          setPartyForm={setPartyForm}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/pages/party/index.tsx b/pages/party/index.tsx
new file mode 100644
index 000000000..65b997269
--- /dev/null
+++ b/pages/party/index.tsx
@@ -0,0 +1,105 @@
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { useState } from 'react';
+import { FaSearch } from 'react-icons/fa';
+import PartyRoomListItem from 'components/party/PartyRoomListItem';
+import usePartyCategory from 'hooks/party/usePartyCategory';
+import usePartyColorMode from 'hooks/party/usePartyColorMode';
+import usePartyRoomList from 'hooks/party/usePartyRoomList';
+import styles from 'styles/party/PartyMain.module.scss';
+
+export default function PartyMain() {
+  const router = useRouter();
+  const [categoryFilter, setCategoryFilter] = useState<number>();
+  const [searchTitle, setSearchTitle] = useState(
+    Array.isArray(router.query.title)
+      ? router.query.title[0]
+      : router.query.title
+  );
+  const { categories } = usePartyCategory();
+  const { partyRooms, joinedPartyRooms } = usePartyRoomList({
+    withJoined: true,
+    searchTitle: searchTitle,
+  });
+
+  const filteredRooms = partyRooms.filter(
+    (room) => !categoryFilter || room.categoryId === categoryFilter
+  );
+  const categoryNavItems = [
+    { categoryId: undefined, categoryName: '전체' },
+    ...categories,
+  ];
+
+  usePartyColorMode('PARTY-MAIN');
+
+  return (
+    <div className={styles.pageContainer}>
+      <section className={styles.joinedRoomContainer}>
+        <header>
+          <h2>참여중인 파티</h2>
+          <Link href='/party/create' className={styles.createRoomButton}>
+            방 만들기
+          </Link>
+        </header>
+        <ul>
+          {joinedPartyRooms.length > 0 ? (
+            joinedPartyRooms.map((room) => (
+              <PartyRoomListItem key={room.roomId} room={room} />
+            ))
+          ) : (
+            <>참여중인 방이 없습니다.</>
+          )}
+        </ul>
+      </section>
+      <section className={styles.searchBarContainer}>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            router.replace({
+              pathname: router.pathname,
+              query: { title: searchTitle },
+            });
+          }}
+        >
+          <FaSearch className={styles.searchIcon} />
+          <input
+            placeholder='방 검색하기'
+            name='searchTitle'
+            value={searchTitle}
+            onChange={(e) => {
+              setSearchTitle(e.target.value);
+            }}
+          />
+        </form>
+      </section>
+      <section className={styles.allRoomContanier}>
+        <nav>
+          <ul>
+            {categoryNavItems.map((c, idx) => (
+              <li
+                key={idx}
+                onClick={() => setCategoryFilter(c.categoryId)}
+                className={
+                  categoryFilter === c.categoryId ? styles.selected : ''
+                }
+              >
+                {c.categoryName}
+              </li>
+            ))}
+          </ul>
+        </nav>
+        <ul className={styles.allRoomListWrap}>
+          {filteredRooms.length > 0 ? (
+            filteredRooms.map((room) => (
+              <PartyRoomListItem key={room.roomId} room={room} />
+            ))
+          ) : searchTitle ? (
+            <div className={styles.emptyRooms}>검색결과가 없습니다.</div>
+          ) : (
+            <div className={styles.emptyRooms}>모집중인 방이 없습니다.</div>
+          )}
+        </ul>
+      </section>
+    </div>
+  );
+}
diff --git a/public/image/party-background.png b/public/image/party-background.png
new file mode 100644
index 000000000..fad6d7cf4
Binary files /dev/null and b/public/image/party-background.png differ
diff --git a/styles/Layout/Layout.module.scss b/styles/Layout/Layout.module.scss
index d9c9e3e5f..4fe01d308 100644
--- a/styles/Layout/Layout.module.scss
+++ b/styles/Layout/Layout.module.scss
@@ -1,5 +1,6 @@
 @import 'styles/common.scss';
 @import 'styles/ProfileBackgroundTheme.scss';
+@import 'styles/party/PartyCommon.scss';
 
 .appContainer {
   display: flex;
@@ -26,6 +27,12 @@
   &.normal {
     background: $vip-background;
   }
+  &.party-main {
+    background: url('/image/party-background.png');
+  }
+  &.party-detail {
+    background: linear-gradient(black, $party-blue-dark2 70%, $party-blue-sky3);
+  }
   @each $theme, $color in $bg-theme-colors {
     &.#{$theme} {
       background: map-get($map: $color, $key: 'background');
diff --git a/styles/admin/Party/AdminPartyCommon.module.scss b/styles/admin/Party/AdminPartyCommon.module.scss
new file mode 100644
index 000000000..a9736bbb6
--- /dev/null
+++ b/styles/admin/Party/AdminPartyCommon.module.scss
@@ -0,0 +1,62 @@
+@import 'styles/common.scss';
+@import 'styles/admin/common/Pagination.module.scss';
+
+.tableContainer {
+  .table {
+    .tableBody {
+      .tableBodyItem {
+        padding: 0.5rem;
+        font-size: $small-font;
+        line-height: 100%;
+        text-align: center;
+      }
+    }
+  }
+}
+.AdminTableWrap {
+  width: 100%;
+  height: 100%;
+
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 95%;
+    min-width: 710px;
+    margin: 10px auto;
+    text-align: center;
+    .title {
+      font-size: $big-font;
+      font-weight: 600;
+      line-height: 150%;
+    }
+  }
+
+  .button_1 {
+    padding: 4px 12px;
+    margin-bottom: 10px;
+    font-size: $small-font;
+    cursor: pointer;
+    border: none;
+    border-radius: $medium-radius;
+  }
+  .delete {
+    color: #ffffff;
+    background-color: #d73535;
+    &:hover {
+      background-color: #d71e1e;
+      transition: 0.3s;
+    }
+  }
+  .add {
+    margin-left: 10px;
+    color: white;
+    background-color: #10b981;
+    &:hover {
+      background-color: #059669;
+      transition: 0.3s;
+    }
+  }
+}
+
+@include pagination;
diff --git a/styles/main/PartyPreview.module.scss b/styles/main/PartyPreview.module.scss
new file mode 100644
index 000000000..6f9b5df3e
--- /dev/null
+++ b/styles/main/PartyPreview.module.scss
@@ -0,0 +1,30 @@
+@import 'styles/common.scss';
+
+.block {
+  display: flex;
+  width: 100%;
+  height: 3rem;
+  margin-bottom: 0.5rem;
+  color: white;
+  text-align: center;
+  background: rgba(0, 0, 0, 0.33);
+  border-radius: 1rem;
+  justify-content: center;
+  align-items: center;
+  & > div {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+  }
+}
+.block span {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 30%;
+}
+
+.container {
+  padding: 0.5rem;
+  background: linear-gradient(180deg, #8218e6 0%, #8110d7 100%);
+  border-radius: $small-radius;
+}
diff --git a/styles/party/PartyCommon.scss b/styles/party/PartyCommon.scss
new file mode 100644
index 000000000..1ef1a30d9
--- /dev/null
+++ b/styles/party/PartyCommon.scss
@@ -0,0 +1,44 @@
+$party-blue-dark: #10296a;
+$party-blue-dark2: #193972;
+$party-blue-dark21: #044581;
+$party-blue-dark3: #2d6dc5;
+$party-blue-dark4: #466fee;
+$party-blue-dark5: #1f6bff;
+
+$party-blue: #00a3ff;
+
+$party-blue-sky0: #005d92;
+$party-blue-sky01: #0b98b7;
+$party-blue-sky1: #5193a0;
+$party-blue-sky2: #54b9b9;
+$party-blue-sky3: #51ddd4;
+$party-blue-sky4: #92fcd6;
+$party-blue-sky5: #c8ffeb;
+
+$party-blue-purple: #ab78ff;
+
+$party-gradient0: linear-gradient(
+  $party-blue-sky2,
+  $party-blue-sky0 35%,
+  $party-blue-dark21 55%,
+  $party-blue-sky0 75%,
+  $party-blue-dark5
+);
+$party-gradient1: linear-gradient(
+  $party-blue-dark3,
+  $party-blue-sky0 10%,
+  $party-blue-sky2 90%,
+  $party-blue-sky4
+);
+$party-gradient2: linear-gradient($party-blue-sky4, $party-blue-dark);
+$party-gradient3: linear-gradient(
+  to left,
+  $party-blue-purple,
+  $party-blue-dark4 40%,
+  $party-blue-sky3
+);
+$party-gradien4: linear-gradient(
+  black,
+  $party-blue-dark2 70%,
+  $party-blue-sky3
+);
diff --git a/styles/party/PartyCreate.module.scss b/styles/party/PartyCreate.module.scss
new file mode 100644
index 000000000..3908ca327
--- /dev/null
+++ b/styles/party/PartyCreate.module.scss
@@ -0,0 +1,205 @@
+@import 'styles/common.scss';
+@import 'styles/party/PartyCommon.scss';
+
+.pageContainer {
+  @include pageWrap;
+  color: $white1;
+  background: $party-gradien4;
+}
+
+.selectionPageContainer {
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    h2 {
+      margin: 0;
+      font-size: $giant-big-font;
+    }
+    button {
+      padding: 0;
+      color: $white1;
+      background-color: inherit;
+      border-style: none;
+    }
+  }
+  .categoryContainer {
+    margin: 1em 0;
+    ul {
+      margin: 0;
+      li {
+        button {
+          width: 100%;
+          height: 2.5em;
+          padding: 0;
+          margin: 1px 0;
+          font-size: $giant-font;
+          color: $white1;
+          background: $party-gradient0;
+          border-style: none;
+          border-radius: $medium-radius;
+
+          &.selected {
+            background: $party-gradient1;
+            border: 2px solid white;
+          }
+        }
+      }
+    }
+  }
+  .templateContainer {
+    h3 {
+      margin: 0.6em 0;
+    }
+    ul {
+      height: 15em;
+      padding: 1em;
+      margin: 0;
+      overflow-y: scroll;
+      background-color: white;
+      border-radius: $medium-radius;
+
+      li > button {
+        display: flex;
+        width: 100%;
+        padding: 0.1em 0.5em;
+        font-size: $medium-font;
+        font-weight: 400;
+        line-height: 2em;
+        text-align: left;
+        background-color: inherit;
+        border-style: none;
+        border-bottom: 1px solid $gray;
+        justify-content: space-between;
+
+        &.selected {
+          background-color: $party-blue-sky5;
+        }
+      }
+    }
+  }
+  .submitButtonWrap {
+    display: flex;
+    justify-content: center;
+    margin-top: 2.5em;
+
+    button {
+      padding: 0.5em 2em;
+      font-size: $giant-big-font;
+      font-weight: 600;
+      color: white;
+      background: $party-gradient2;
+      border-style: none;
+      border-radius: $medium-radius;
+    }
+  }
+}
+
+.detailFormContainer {
+  header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1em;
+
+    h2 {
+      margin: 0;
+      font-size: $giant-font;
+      letter-spacing: 1px;
+    }
+    button {
+      padding: 0;
+      color: $white1;
+      background-color: inherit;
+      border-style: none;
+    }
+  }
+  input,
+  select,
+  textarea {
+    height: 2em;
+    font-size: $big-font;
+    border-style: none;
+    border-radius: 8px;
+  }
+  select {
+    -webkit-appearance: none;
+  }
+  form {
+    label {
+      display: flex;
+      flex-direction: column;
+      margin-bottom: 1em;
+
+      h3 {
+        margin: 0 0 0.5em;
+        font-size: $medium-font;
+        font-weight: 600;
+        letter-spacing: 1px;
+      }
+      &.titleLabel > input {
+        width: 100%;
+        padding-left: 8px;
+      }
+      .peopleSelectWrap {
+        display: flex;
+        align-items: center;
+        font-size: $big-font;
+
+        select {
+          width: 2.5em;
+          text-align: center;
+        }
+        div {
+          display: flex;
+          justify-content: center;
+          width: 2.5em;
+        }
+      }
+      .dueDateWrap {
+        display: flex;
+        align-items: center;
+        font-size: $big-font;
+
+        select {
+          width: 2.5em;
+          text-align: center;
+        }
+        div {
+          display: flex;
+          justify-content: center;
+          width: 2.5em;
+        }
+      }
+      &.contentLabel > textarea {
+        height: 100%;
+        padding: 0.8em;
+        overflow-y: scroll;
+        font-size: $medium-font;
+        line-height: 1.3em;
+      }
+    }
+    .submitButtonWrap {
+      display: flex;
+      justify-content: center;
+      margin-top: 2.5em;
+
+      button {
+        box-sizing: border-box;
+        display: flex;
+        width: 70%;
+        height: 2em;
+        padding: 0;
+        font-size: $giant-big-font;
+        font-weight: 600;
+        color: white;
+        background: $party-gradient3;
+        border-style: none;
+        border-radius: $medium-radius;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
+}
diff --git a/styles/party/PartyDetailRoom.module.scss b/styles/party/PartyDetailRoom.module.scss
new file mode 100644
index 000000000..c3ff879bf
--- /dev/null
+++ b/styles/party/PartyDetailRoom.module.scss
@@ -0,0 +1,184 @@
+@import 'styles/common.scss';
+@import 'styles/party/PartyCommon.scss';
+
+$detailCommonRem: 1rem;
+
+.detailPage {
+  @include pageWrap;
+
+  .titleBox {
+    position: relative;
+    padding: $detailCommonRem;
+    background-color: white;
+    border-radius: $mini-radius;
+
+    .titleLine {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+
+      .titleCategory {
+        font-size: $small-font;
+      }
+
+      .shareBtn {
+        position: relative;
+        text-align: right;
+        background-color: inherit;
+        border: none;
+      }
+
+      .reportRoomBtn {
+        position: relative;
+        text-align: right;
+        background-color: inherit;
+        border: none;
+      }
+    }
+    .titleContent {
+      max-width: 100;
+      margin: 0.3rem 0;
+      font-size: $big-font;
+      font-weight: bold;
+    }
+
+    .remainTime {
+      padding: 0.2rem;
+      margin-top: 0.2rem;
+      font-size: $small-font;
+      color: aliceblue;
+      background-color: $pp-gray;
+      border-radius: $medium-radius;
+    }
+  }
+
+  .profile {
+    position: relative;
+    width: 100%;
+    margin-top: $detailCommonRem;
+    color: white;
+
+    .profileItem {
+      text-align: center;
+      li {
+        display: inline-block;
+        margin-right: 0.5rem;
+      }
+      .crown {
+        position: relative;
+        top: 0.4rem;
+        left: -0.8rem;
+        transform: rotate(-30deg);
+      }
+
+      .profileImg {
+        text-align: center;
+        border-radius: $big-radius;
+      }
+    }
+
+    .joinBtn {
+      width: 50%;
+      height: 3rem;
+      margin-bottom: $detailCommonRem;
+      font-size: $big-font;
+      background: $party-gradient3;
+      border-radius: $small-radius;
+    }
+
+    .btnContainer {
+      text-align: right;
+
+      .leaveBtn {
+        width: 50%;
+        height: 3rem;
+        margin-bottom: $detailCommonRem;
+        font-size: $big-font;
+        background: $party-gradient3;
+        border-radius: $small-radius;
+      }
+
+      .startBtn {
+        width: 50%;
+        height: 3rem;
+        margin-bottom: $detailCommonRem;
+        font-size: $big-font;
+        background: $party-gradient3;
+        border-radius: $small-radius;
+      }
+    }
+
+    .line {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+    }
+
+    .user {
+      border: 0.5rem;
+    }
+  }
+
+  .contentCommentBox {
+    position: relative;
+    width: 100%;
+    padding: $detailCommonRem;
+    background-color: white;
+    border-radius: $mini-radius;
+
+    .content {
+      min-height: 13rem;
+      margin-bottom: $detailCommonRem;
+    }
+
+    .comment {
+      margin-top: $detailCommonRem * 2;
+      margin-bottom: 0.3;
+    }
+
+    .commentHidden {
+      margin-top: $detailCommonRem * 2;
+      margin-bottom: 0.3;
+      color: gray;
+      opacity: 0.7;
+    }
+
+    .commentInfo {
+      text-align: right;
+
+      .commentBtn {
+        position: relative;
+        text-align: right;
+        background-color: inherit;
+        border: none;
+      }
+    }
+  }
+
+  .commentCreateBar {
+    padding: 0.01rem;
+    margin-top: $detailCommonRem * 0.5;
+    background-color: white;
+    border-radius: $big-radius;
+
+    form {
+      display: flex;
+      align-items: center;
+
+      .textBar {
+        width: 100%;
+        margin-left: 0.5rem;
+        font-size: $medium-font;
+        border: none;
+      }
+
+      .inputBtn {
+        display: flex;
+        font-size: $small-font;
+        background-color: inherit;
+        border: none;
+        align-items: center;
+      }
+    }
+  }
+}
diff --git a/styles/party/PartyMain.module.scss b/styles/party/PartyMain.module.scss
new file mode 100644
index 000000000..c0144415d
--- /dev/null
+++ b/styles/party/PartyMain.module.scss
@@ -0,0 +1,113 @@
+@import 'styles/common.scss';
+@import 'styles/party/PartyCommon.scss';
+@mixin roomListWrap {
+  padding: 0.8em;
+  margin: 0;
+  background: linear-gradient($party-blue-sky4, $party-blue-dark);
+  border-radius: $medium-radius;
+}
+
+.pageContainer {
+  @include pageWrap;
+  color: $white2;
+
+  section {
+    margin-bottom: 1em;
+  }
+}
+
+.joinedRoomContainer {
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5em;
+
+    h2 {
+      margin: 0;
+      font-size: $medium-font;
+      font-weight: 500;
+    }
+    .createRoomButton {
+      padding: 0.3em 0.6em;
+      font-size: $medium-font;
+      color: white;
+      background: $party-gradient3;
+      border-style: none;
+      border-radius: 1em;
+    }
+  }
+  ul {
+    @include roomListWrap;
+  }
+}
+
+.searchBarContainer {
+  form {
+    display: flex;
+    width: 100%;
+    padding: 0.5em;
+    background-color: $medium-gray;
+    border-radius: $small-radius;
+    align-items: center;
+
+    .searchIcon {
+      color: $dark-gray;
+    }
+    input {
+      padding-left: 0.2em;
+      font-size: $medium-font;
+      font-weight: 300;
+      background-color: inherit;
+      border-style: none;
+
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+}
+
+.allRoomContanier {
+  nav {
+    ul {
+      display: flex;
+      justify-content: space-between;
+      margin: 0 0.5em;
+
+      li {
+        display: flex;
+        width: 25%;
+        padding: 0.6em 0;
+        margin: 0 2px;
+        font-size: $medium-font;
+        font-weight: 300;
+        list-style: none;
+        background-color: $party-blue-sky0;
+        border-top-left-radius: $medium-radius;
+        border-top-right-radius: $medium-radius;
+        transition: 0.3s ease width;
+        justify-content: center;
+        align-items: center;
+
+        &.selected {
+          width: 30%;
+          background-color: $party-blue-sky01;
+        }
+      }
+    }
+  }
+  .allRoomListWrap {
+    @include roomListWrap;
+    height: 25em;
+    overflow-y: scroll;
+
+    .emptyRooms {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100%;
+      font-weight: 300;
+    }
+  }
+}
diff --git a/styles/party/PartyNav.module.scss b/styles/party/PartyNav.module.scss
new file mode 100644
index 000000000..56bd73d6d
--- /dev/null
+++ b/styles/party/PartyNav.module.scss
@@ -0,0 +1,24 @@
+@import 'styles/common.scss';
+
+.container {
+  width: 100%;
+}
+
+.ullist {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  list-style: none;
+}
+
+.lilist {
+  padding: 8px 16px;
+  cursor: pointer;
+  border: 2px solid #5b5a5a;
+  border-radius: 8px;
+  transition: background-color 0.3s ease;
+
+  &:hover {
+    background-color: #eaeaea;
+  }
+}
diff --git a/styles/party/PartyRoomListItem.module.scss b/styles/party/PartyRoomListItem.module.scss
new file mode 100644
index 000000000..a43d62ebe
--- /dev/null
+++ b/styles/party/PartyRoomListItem.module.scss
@@ -0,0 +1,70 @@
+@import 'styles/common.scss';
+@import 'styles/party/PartyCommon.scss';
+
+.roomWrap {
+  display: flex;
+  padding: 0.6em;
+  margin: 2px 0;
+  color: black;
+  background-color: $white2;
+  border-radius: $medium-radius;
+  justify-content: space-between;
+  align-items: center;
+
+  &.transparent {
+    opacity: 0.5;
+  }
+
+  .roomDescWrap {
+    position: relative;
+    width: 100%;
+
+    &::after {
+      position: absolute;
+      top: 10%;
+      right: 0;
+      box-sizing: border-box;
+      width: 0;
+      height: 80%;
+      content: '';
+      border: 0.5px solid $medium-gray;
+    }
+
+    header {
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-end;
+      margin: 0;
+
+      .roomCategory {
+        margin-right: 0.5em;
+        font-size: $small-font;
+        font-weight: 400;
+        color: $dark-gray;
+      }
+      .roomStatus {
+        display: inline-block;
+        padding: 2px 4px;
+        font-size: 0.7em;
+        font-weight: 200;
+        color: white;
+        border-radius: 8px;
+
+        &.FINISH {
+          background-color: $dark-gray;
+        }
+        &.START {
+          background-color: $party-blue;
+        }
+      }
+    }
+    .roomTitle {
+      margin-left: 0.2em;
+      font-size: $big-font;
+    }
+  }
+  .roomPeopleWrap {
+    margin-left: 0.5em;
+    letter-spacing: 0.1em;
+  }
+}
diff --git a/styles/party/TemplateModal.module.scss b/styles/party/TemplateModal.module.scss
new file mode 100644
index 000000000..65fea9869
--- /dev/null
+++ b/styles/party/TemplateModal.module.scss
@@ -0,0 +1,61 @@
+/* Modal.css */
+
+.modal_overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5); /* 반투명한 배경 */
+  justify-content: center;
+  align-items: center;
+}
+
+.button_2 {
+  width: 100%;
+  padding: 10px;
+  margin: 10px;
+  font-size: 30px;
+  color: white;
+  cursor: pointer;
+  background: black;
+  border: 0;
+  border-radius: 10px;
+  outline: none;
+}
+
+.button_2:hover {
+  color: white;
+  background: orange;
+}
+
+.modal {
+  width: 30%;
+  padding: 20px;
+  background-color: white;
+  border-radius: 5px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); /* 그림자 효과 */
+}
+
+.modal h2 {
+  margin-top: 0;
+}
+
+.modal form {
+  display: flex;
+  flex-direction: column;
+}
+
+.modal label {
+  margin-bottom: 5px;
+}
+
+.modal input {
+  width: 100%;
+  padding: 5px;
+  margin-bottom: 10px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+}
diff --git a/types/admin/adminPartyTypes.ts b/types/admin/adminPartyTypes.ts
new file mode 100644
index 000000000..3586e538c
--- /dev/null
+++ b/types/admin/adminPartyTypes.ts
@@ -0,0 +1,20 @@
+import { PartyRoomStatus } from 'types/partyTypes';
+
+export type PartyRoomColumn = {
+  roomId: number;
+  title: string;
+  categoryName: string;
+  createDate: string;
+  dueDate: string;
+  creatorIntraId: string;
+  roomStatus: PartyRoomStatus;
+};
+
+export type PartyPenaltyAdmin = {
+  id: number;
+  user: object;
+  penaltyType: string;
+  message: string;
+  startTime: string;
+  penaltyTime: number;
+};
diff --git a/types/admin/tableTypes.ts b/types/admin/tableTypes.ts
index 333b85d68..16ceadd6d 100644
--- a/types/admin/tableTypes.ts
+++ b/types/admin/tableTypes.ts
@@ -17,7 +17,13 @@ export type TableName =
   | 'coinPolicy'
   | 'coinPolicyHistory'
   | 'tournament'
-  | 'tournamentCreate';
+  | 'tournamentCreate'
+  | 'partyCategory'
+  | 'partyTemplate'
+  | 'partyNoshowReport'
+  | 'partyRoomReport'
+  | 'partyCommentReport'
+  | 'partyPenaltyAdmin';
 
 export type EtcType = 'button' | 'toggle';
 
diff --git a/types/colorModeTypes.ts b/types/colorModeTypes.ts
index fe65e537a..33f2ba9f1 100644
--- a/types/colorModeTypes.ts
+++ b/types/colorModeTypes.ts
@@ -1,4 +1,5 @@
 import { MatchMode } from './mainType';
+import { PartyColors } from './partyTypes';
 
 const randomColors = [
   'BASIC',
@@ -66,4 +67,4 @@ export type BackgroundColors = (typeof backgroundColors)[number];
 
 export type EdgeColors = (typeof edgeColors)[number];
 
-export type ColorMode = MatchMode | RandomColors;
+export type ColorMode = MatchMode | RandomColors | PartyColors;
diff --git a/types/modalTypes.ts b/types/modalTypes.ts
index e4a4e45f2..fd079afb8 100644
--- a/types/modalTypes.ts
+++ b/types/modalTypes.ts
@@ -13,6 +13,7 @@ import { StoreManualMode } from 'types/storeTypes';
 import { ICoin } from 'types/userTypes';
 import { ITournament } from './admin/adminTournamentTypes';
 import { GameMode } from './gameTypes';
+import { PartyGameTemplate, PartyPenaltyAdmin } from './partyTypes';
 import { TournamentInfo } from './tournamentTypes';
 
 type EventModal = 'WELCOME' | 'ANNOUNCEMENT';
@@ -35,6 +36,8 @@ type StoreModal = 'MANUAL' | 'COIN_HISTORY';
 
 type TournamentModal = 'REGISTRY' | 'MANUAL';
 
+type PartyModal = 'REPORT';
+
 type AdminModal =
   | 'PROFILE'
   | 'USER-COIN'
@@ -52,7 +55,9 @@ type AdminModal =
   | 'COINPOLICY_EDIT'
   | 'CHECK_SEND_NOTI'
   | 'TOURNAMENT_BRAKET_EDIT'
-  | 'TOURNAMENT_PARTICIPANT_EDIT';
+  | 'TOURNAMENT_PARTICIPANT_EDIT'
+  | 'PARTY_TEMPLATE'
+  | 'PARTY_ADMIN_PENALTY';
 
 type ModalName =
   | null
@@ -68,7 +73,8 @@ type ModalName =
   | `EDIT-ITEM-${EditItemModal}`
   | `STORE-${StoreModal}`
   | `PURCHASE-${PurchaseModal}`
-  | `TOURNAMENT-${TournamentModal}`;
+  | `TOURNAMENT-${TournamentModal}`
+  | `PARTY-${PartyModal}`;
 
 export interface Cancel {
   startTime: string;
@@ -112,6 +118,13 @@ export interface IRandomItem {
   color: RandomColors;
 }
 
+export interface PartyReportModalData {
+  name: 'COMMENT' | 'ROOM' | 'NOSHOW';
+  commentId?: number;
+  roomId?: number;
+  userIntraId?: number;
+}
+
 export interface Modal {
   modalName: ModalName;
   manual?: Manual;
@@ -141,4 +154,7 @@ export interface Modal {
   tournamentInfo?: TournamentInfo;
   tournament?: ITournament;
   tournamentId?: number;
+  partyReport?: PartyReportModalData;
+  template?: PartyGameTemplate;
+  partyPenalty?: PartyPenaltyAdmin;
 }
diff --git a/types/partyTypes.ts b/types/partyTypes.ts
new file mode 100644
index 000000000..d837793e0
--- /dev/null
+++ b/types/partyTypes.ts
@@ -0,0 +1,166 @@
+export type PartyRoomStatus = 'OPEN' | 'START' | 'FINISH' | 'HIDDEN' | 'FAIL';
+/**
+ * @typedef {Object} PartyRoom
+ *  @property {string} [creatorIntraId] - adminAPI로 조회시 존재
+ */
+export type PartyRoom = {
+  roomId: number;
+  title: string;
+  categoryId: number;
+  currentPeople: number;
+  minPeople: number;
+  maxPeople: number;
+  dueDate: string;
+  createDate: string;
+  status: PartyRoomStatus;
+  creatorIntraId?: string;
+};
+
+/**
+ * @typedef {Object} PartyRoomDetail
+ *  @property {string | null} [myNickname] - Room 참여시 존재
+ */
+export type PartyRoomDetail = PartyRoom & {
+  myNickname: string | null;
+  hostNickname: string;
+  content: string;
+  roomUsers: PartyRoomUser[];
+  comments: PartyComment[];
+};
+
+/**
+ * @typedef {Object} PartyRoomUser
+ *  @property {string | null} [intraId] - Room 시작시 or Admin으로 조회시 존재
+ */
+export type PartyRoomUser = {
+  userRoomId: number;
+  nickname: string;
+  userImage: string | null;
+  roomUserId: number;
+  intraId: string | null;
+};
+
+/**
+ * @typedef {Object} PartyRoomDetail
+ *  @property {string | null} [intraid] - Room 시작시 or Admin으로 조회시 존재
+ */
+
+export type PartyComment = {
+  commentId: number;
+  nickname: string;
+  intraid: string | null;
+  isexist: boolean;
+  content: string;
+  isHidden: boolean;
+  createDate: string;
+};
+
+export type PartyCategory = {
+  categoryId: number;
+  categoryName: string;
+};
+
+export type PartyGameTemplate = {
+  gameTemplateId: number;
+  categoryId: number;
+  gameName: string;
+  maxGamePeople: number;
+  minGamePeople: number;
+  maxGameTime: number;
+  minGameTime: number;
+  genre: string;
+  difficulty: string;
+  summary: string;
+};
+
+export type PartyRoomReportTable = {
+  roomReportList: PartyRoomReport[];
+  totalPage: number;
+  currentPage: number;
+};
+
+export type PartyRoomReport = {
+  id: number;
+  reporterIntraId: string;
+  reporteeIntraId: string;
+  roomId: number;
+  message: string;
+  createdAt: string;
+};
+
+export type PartyNoshowReportTable = {
+  noShowReportList: PartyNoshowReport[];
+  totalPages: number;
+  currentPage: number;
+};
+
+export type PartyNoshowReport = {
+  id: number;
+  reporterIntraId: string;
+  reporteeIntraId: string;
+  roomId: number;
+  message: string;
+  createdAt: string;
+};
+
+export interface PartyCommentReportTable {
+  commentReportList: PartyCommentReport[];
+  totalPage: number;
+  currentPage: number;
+}
+
+export type PartyCommentReport = {
+  id: number;
+  reporterIntraId: string;
+  commentsId: number;
+  roomId: number;
+  message: string;
+  createdAt: string;
+};
+
+export type PartyCreateForm = {
+  title: string;
+  categoryId: number;
+  minPeople: number;
+  maxPeople: number;
+  content: string;
+  minutesUntilDueDate: number;
+};
+
+export type PartyTemplateForm = {
+  gameTemplateId?: number;
+  gameName: string;
+  categoryId: number;
+  maxGamePeople: number;
+  minGamePeople: number;
+  maxGameTime: number;
+  minGameTime: number;
+  genre: string;
+  difficulty: string;
+  summary: string;
+};
+
+export type PartyPenaltyAdmin = {
+  id: number;
+  userIntraId: string;
+  penaltyType: string;
+  message: string;
+  startTime: string;
+  penaltyTime: number;
+};
+
+export type PartyPenaltyAdminSubmit = {
+  penaltyType: string;
+  message: string;
+  penaltyTime: number;
+  userIntraId: string;
+};
+
+export interface PartyPenaltyTable {
+  penaltyList: PartyPenaltyAdmin[];
+  totalPage: number;
+  currentPage: number;
+}
+
+export type PartyColors = 'PARTY-MAIN' | 'PARTY-DETAIL';
+
diff --git a/utils/axios.ts b/utils/axios.ts
index c732eea3e..fae676554 100644
--- a/utils/axios.ts
+++ b/utils/axios.ts
@@ -2,9 +2,12 @@ import axios, { AxiosError } from 'axios';
 
 const baseURL = `${process.env.NEXT_PUBLIC_SERVER_ENDPOINT}`;
 const manageBaseURL = process.env.NEXT_PUBLIC_MANAGE_SERVER_ENDPOINT ?? '/';
+const managePartyBaseURL =
+  process.env.NEXT_PUBLIC_PARTY_MANAGE_SERVER_ENDPOINT ?? '/';
 
 const instance = axios.create({ baseURL });
 const instanceInManage = axios.create({ baseURL: manageBaseURL });
+const instanceInPartyManage = axios.create({ baseURL: managePartyBaseURL });
 
 instance.interceptors.request.use(
   function setConfig(config) {
@@ -34,10 +37,24 @@ instanceInManage.interceptors.request.use(
   }
 );
 
+instanceInPartyManage.interceptors.request.use(
+  function setConfig(config) {
+    config.headers = {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${localStorage.getItem('42gg-token')}`,
+    };
+    config.withCredentials = true;
+    return config;
+  },
+  function getError(error) {
+    return Promise.reject(error);
+  }
+);
+
 function isAxiosError<ErrorPayload>(
   error: unknown
 ): error is AxiosError<ErrorPayload> {
   return axios.isAxiosError(error);
 }
 
-export { instance, instanceInManage, isAxiosError };
+export { instance, instanceInManage, instanceInPartyManage, isAxiosError };
diff --git a/utils/handleTime.ts b/utils/handleTime.ts
index cde07ee22..5fde31c3c 100644
--- a/utils/handleTime.ts
+++ b/utils/handleTime.ts
@@ -195,3 +195,35 @@ export const dateToKRLocaleTimeString = (d: Date) => {
     hour12: true,
   });
 };
+
+/**
+ *  타겟 시간과 비교 시간을 받아 남은 시간을 반환
+ *  @param {Date} targetTime
+ *  @param {Date} cmpTime default: 현재 시간
+ *  @return x년, x월, x일, x시간, x분 순으로 값이 있으면 그 값을 반환.
+ */
+export const getRemainTime = ({
+  targetTime,
+  cmpTime = new Date(),
+}: {
+  targetTime: Date;
+  cmpTime?: Date;
+}) => {
+  const year = targetTime.getFullYear() - cmpTime.getFullYear();
+  const month = targetTime.getMonth() - cmpTime.getMonth();
+  const day = targetTime.getDate() - cmpTime.getDate();
+  const hour = targetTime.getHours() - cmpTime.getHours();
+  const min = targetTime.getMinutes() - cmpTime.getMinutes();
+
+  return year > 0
+    ? `${year}년 남음`
+    : month > 0
+    ? `${month}개월 남음`
+    : day > 0
+    ? `${day}일 남음`
+    : hour > 0
+    ? `${hour}시간 남음`
+    : min > 0
+    ? `${min}분 남음`
+    : `마감`;
+};
diff --git a/utils/recoil/modal.ts b/utils/recoil/modal.ts
index f0f1911c8..96a676eb8 100644
--- a/utils/recoil/modal.ts
+++ b/utils/recoil/modal.ts
@@ -24,6 +24,8 @@ export const modalTypeState = selector<string>({
       modalType = 'TOURNAMENT';
     } else if (prefix === 'ADMIN') {
       modalType = 'ADMIN';
+    } else if (prefix === 'PARTY') {
+      modalType = 'PARTY';
     }
     return modalType;
   },