diff --git a/src/Home.module.css b/src/Home.module.css
index 13ac1cb..0a2c8dd 100644
--- a/src/Home.module.css
+++ b/src/Home.module.css
@@ -1,14 +1,29 @@
+.filterContainer {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background-color: white; /* Ensure background is white to cover content when sticky */
+  padding: 16px 30px 0px 30px; /* Add padding to match main content */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Add shadow for better visual separation */
+}
+
 .main {
   display: flex;
   flex-direction: column;
-  padding: 16px 30px;
+  padding: 0 30px 16px 30px; /* Adjust padding for main content */
+}
+
+.contentWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
 }
 
 .accordion {
   background-color: #eee;
   color: #444;
   cursor: pointer;
-  padding: 16px 24px 16px 24px;
+  padding: 16px 24px;
   width: 100%;
   display: flex;
   flex-direction: row;
@@ -16,7 +31,6 @@
   outline: none;
   transition: 0.4s;
   justify-content: space-between;
-
   font-size: 18px;
   font-weight: 700;
 }
@@ -33,39 +47,57 @@
 }
 
 ul.chips {
-  margin: 30px 0 50px;
+  margin: 0;
   list-style: none;
   display: flex;
   gap: 6px;
   flex-wrap: wrap;
-  padding: 0px 16px 16px 16px;
+  padding: 0;
 }
 
-.chip {
-  background-color: rgb(255, 255, 255);
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin-right: 6px;
-  font-size: 12px;
-  float: left;
-  border: 1px solid #f1f2f5;
-  border-radius: 14px;
-  padding: 16px 8px;
-  font-size: 14px;
+.postList {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px; /* Gap between cards */
 }
 
-.resetChip {
-  background-color: rgb(255, 255, 255);
+.pagination {
   display: flex;
+  justify-content: center;
   align-items: center;
-  gap: 4px;
-  margin-right: 6px;
-  font-size: 12px;
-  float: left;
-  padding: 16px 8px;
+  gap: 5px; /* Smaller gap between page buttons */
+  margin-top: 20px;
+}
+
+.pagination button {
+  padding: 6px 10px; /* Smaller padding for buttons */
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: #f0f0f0;
+  cursor: pointer;
+  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
   font-size: 14px;
-  border: none;
+  min-width: 32px; /* Ensure consistent button width */
+  text-align: center;
+}
+
+.pagination button:hover:not(:disabled) {
+  background-color: #e0e0e0;
+  border-color: #a0a0a0;
+}
+
+.pagination button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+  background-color: #f8f8f8;
+  border-color: #e0e0e0;
+  color: #a0a0a0;
+}
+
+.pagination button.activePage {
+  background-color: #007bff;
+  color: white;
+  border-color: #007bff;
 }
 
 /* MODALS */
diff --git a/src/components/Home.tsx b/src/components/Home.tsx
index d81f655..c81aaaa 100644
--- a/src/components/Home.tsx
+++ b/src/components/Home.tsx
@@ -6,6 +6,8 @@ import styles from '../Home.module.css';
 import { encodeQueryParams, usePosts } from '../contexts/PostContext';
 import InternCard from './InternCard';
 
+type OpenDropdownType = 'rec' | 'dm' | 'new' | null;
+
 const Home = () => {
   const DOMAINS: string[] = [
     'FINTECH',
@@ -21,23 +23,19 @@ const Home = () => {
 
   const DEV: string[] = ['FRONT', 'APP', 'BACKEND', 'DATA', 'OTHERS'];
 
-  const { posts, isLoading, fetchPosts } = usePosts();
+  const { posts, isLoading, fetchPosts, paginator } = usePosts();
   const [panelExpanded, setPanelExpanded] = useState(false);
   const [roles, setRoles] = useState<string[]>([]);
 
-  const [recExpanded, setRecExpanded] = useState(false);
   const [isActive, setIsActive] = useState(false);
-  // radio selection state (temporary)
   const [recStatus, setRecStatus] = useState<'all' | 'recruiting'>(
     isActive ? 'recruiting' : 'all'
   );
 
   const [domains, setDomain] = useState<string[]>(DOMAINS);
   const [dmStatus, setDmStatus] = useState<string[]>(domains);
-  const [dmExpanded, setDmExpanded] = useState(false);
 
   const [order, setOrder] = useState<number>(0);
-  const [newExpanded, setNewExpanded] = useState(false);
   const [orderStatus, setOrderStatus] = useState<number>(0);
 
   const [query, setQuery] = useState<string>('');
@@ -45,6 +43,25 @@ const Home = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const navigate = useNavigate();
 
+  const [openDropdown, setOpenDropdown] = useState<OpenDropdownType>(null);
+
+  // Pagination state
+  const [currentPage, setCurrentPage] = useState<number>(1);
+  // const postsPerPage = 12;
+
+  const currentPosts = posts;
+  const totalPages = paginator;
+
+  const handlePageChange = (pageNumber: number) => {
+    if (pageNumber > 0 && pageNumber <= totalPages) {
+      setCurrentPage(pageNumber);
+    }
+  };
+
+  const handleDropdownToggle = (dropdown: OpenDropdownType) => {
+    setOpenDropdown((prev) => (prev === dropdown ? null : dropdown));
+  };
+
   const handleLoginRequired = () => {
     setIsModalOpen(true);
   };
@@ -60,12 +77,13 @@ const Home = () => {
       params: {
         roles: roles.length === 0 ? null : roles,
         isActive: isActive,
-        domains: domains.length === DOMAINS.length ? null : domains,
+        domains: domains.length === DOMAINS.length ? null : domains, // if null -> all domains
         order: order,
+        page: currentPage,
       },
     });
     setQuery(q);
-  }, [roles, isActive, domains, order]);
+  }, [roles, isActive, domains, order, currentPage]);
   // role check
   const handleRoleCheck = (e: ChangeEvent<HTMLInputElement>) => {
     const { checked, value } = e.currentTarget;
@@ -82,7 +100,11 @@ const Home = () => {
   const handleDomainCheck = (e: ChangeEvent<HTMLInputElement>) => {
     const { checked, value } = e.currentTarget;
     if (value === 'all') {
-      setDmStatus(DOMAINS);
+      if (checked) {
+        setDmStatus(DOMAINS);
+      } else {
+        setDmStatus([]);
+      }
     } else {
       setDmStatus((p) => {
         if (checked) return [...p, value];
@@ -103,415 +125,480 @@ const Home = () => {
     setOrderStatus(0);
   };
 
-  return (
-    <main className={styles.main}>
-      <button
-        className={
-          panelExpanded
-            ? `${styles.accordion} ${styles.active}`
-            : `${styles.accordion}`
-        }
-        onClick={() => {
-          setPanelExpanded((p) => !p);
-        }}
-      >
-        <span>직군 필터</span>
-        {panelExpanded ? <FaAngleUp /> : <FaAngleDown />}
-      </button>
-      {panelExpanded && (
-        <div className={styles.panel}>
-          <section className="col">
-            <h3>개발</h3>
-            <div className="row">
-              <label htmlFor="check-dev-total">전체</label>
-              <input
-                type="checkbox"
-                id="check-dev-total"
-                name="total"
-                value="total"
-                onChange={handleRoleCheck}
-              ></input>
-            </div>
-            <div className="row">
-              <label htmlFor="check-dev-front">프론트엔드 개발</label>
-              <input
-                type="checkbox"
-                id=""
-                name="check-dev-front"
-                value="FRONT"
-                onChange={handleRoleCheck}
-              ></input>
-            </div>
-            <div className="row">
-              <label htmlFor="check-dev-backend">서버⋅백엔드 개발</label>
-              <input
-                type="checkbox"
-                id="check-dev-backend"
-                name="backend"
-                value="BACKEND"
-                onChange={handleRoleCheck}
-              ></input>
-            </div>
-            <div className="row">
-              <label htmlFor="check-dev-app">앱 개발</label>
-              <input
-                type="checkbox"
-                id="check-dev-app"
-                name="app"
-                value="APP"
-                onChange={handleRoleCheck}
-              ></input>
-            </div>
-            <div className="row">
-              <label htmlFor="check-dev-others">기타 분야</label>
-              <input
-                type="checkbox"
-                id="check-dev-others"
-                name="others"
-                value="OTHERS"
-                onChange={handleRoleCheck}
-              ></input>
-            </div>
-          </section>
-
-          <section>
-            <h3>기획</h3>
-            <div className="row">
-              <label htmlFor="project-total">전체</label>
-              <input
-                type="checkbox"
-                id="project-total"
-                name="PLANNING"
-                value="PLANNING"
-                onChange={handleRoleCheck}
-              ></input>
-            </div>
-          </section>
-
-          <section>
-            <h3>디자인</h3>
-            <div className="row">
-              <label htmlFor="design-total">전체</label>
-              <input
-                type="checkbox"
-                id="design-total"
-                name="DESIGN"
-                value="DESIGN"
-                onChange={handleRoleCheck}
-              ></input>
-            </div>
-          </section>
-          <section>
-            <h3>마케팅</h3>
-            <div className="row">
-              <label htmlFor="marketing-total">전체</label>
-              <input
-                type="checkbox"
-                id="marketing-total"
-                name="MARKETING"
-                value="MARKETING"
-                onChange={handleRoleCheck}
-              ></input>
-            </div>
-          </section>
-        </div>
-      )}
+  const renderPageNumbers = () => {
+    const pageNumbers = [];
+    const pageBlockSize = 5;
 
-      <ul className={styles.chips}>
-        {/* 모집 상태 옵션 버튼 */}
-        <li
-          className={`${styles.chip} ${styles.modalTrigger}`}
-          onClick={() => {
-            setRecExpanded((p) => !p);
-          }}
+    const currentBlock = Math.ceil(currentPage / pageBlockSize);
+
+    const startPage = (currentBlock - 1) * pageBlockSize + 1;
+    const endPage = startPage + pageBlockSize - 1;
+
+    for (let i = startPage; i <= endPage; i++) {
+      const isDisabled = i > totalPages;
+
+      pageNumbers.push(
+        <button
+          key={i}
+          onClick={() => !isDisabled && handlePageChange(i)}
+          disabled={isDisabled}
+          className={`
+           ${currentPage === i ? styles.activePage : ''}
+            ${isDisabled ? styles.disabledPage : ''} 
+            `}
         >
-          <span>모집 상태</span> {recExpanded ? <FaAngleUp /> : <FaAngleDown />}
-          {/* 모집 상태 팝업 */}
-          {recExpanded && (
-            <div
-              className={styles.modal}
-              onClick={(e) => e.stopPropagation()} // prevents clicks inside from closing modal
-            >
-              <div className={styles.modalOptions}>
-                <label className={styles.radioLabel}>
-                  <input
-                    type="radio"
-                    name="recStatus"
-                    value="all"
-                    checked={recStatus === 'all'}
-                    onChange={() => setRecStatus('all')}
-                  />
-                  <span className={styles.radioVisual}></span>
-                  <span>전체</span>
-                </label>
-
-                <label className={styles.radioLabel}>
-                  <input
-                    type="radio"
-                    name="recStatus"
-                    value="recruiting"
-                    checked={recStatus === 'recruiting'}
-                    onChange={() => setRecStatus('recruiting')}
-                  />
-                  <span className={styles.radioVisual}></span>
-                  <span>모집중</span>
-                </label>
-              </div>
-              <div className={styles.modalActions}>
-                <button
-                  className={`${styles.btn} ${styles.btnReset}`}
-                  onClick={() => setRecStatus('all')}
-                >
-                  초기화
-                </button>
-                <button
-                  className={`${styles.btn} ${styles.btnApply}`}
-                  onClick={() => setIsActive(recStatus === 'recruiting')}
-                >
-                  적용
-                </button>
-              </div>
-            </div>
-          )}
-        </li>
+          {i}
+        </button>
+      );
+    }
+    return pageNumbers;
+  };
 
-        {/* 업종 옵션 버튼 */}
-        <li
-          className={`${styles.chip} ${styles.modalTrigger}`}
+  return (
+    <>
+      <div className={styles.filterContainer}>
+        <button
+          className={
+            panelExpanded
+              ? `${styles.accordion} ${styles.active}`
+              : `${styles.accordion}`
+          }
           onClick={() => {
-            setDmExpanded((p) => !p);
+            setPanelExpanded((p) => !p);
           }}
         >
-          <span>업종</span> {dmExpanded ? <FaAngleUp /> : <FaAngleDown />}
-          {/* 업종 선택 팝업 */}
-          {dmExpanded && (
-            <div className={styles.modal} onClick={(e) => e.stopPropagation()}>
-              <div className={styles.modalOptions}>
-                <div className="row">
-                  <label htmlFor="all">전체</label>
-                  <input
-                    type="checkbox"
-                    name="dmStatus"
-                    id="all"
-                    value="all"
-                    checked={
-                      dmStatus.length === DOMAINS.length &&
-                      DOMAINS.every((d) => dmStatus.includes(d))
-                    }
-                    onChange={handleDomainCheck}
-                  />
-                </div>
-                <div className="row">
-                  <label htmlFor="fin">핀테크</label>
-                  <input
-                    type="checkbox"
-                    name="dmStatus"
-                    id="fin"
-                    value="FINTECH"
-                    checked={dmStatus?.includes('FINTECH')}
-                    onChange={handleDomainCheck}
-                  />
-                </div>
-                <div className="row">
-                  <label htmlFor="ht">헬스테크</label>
-                  <input
-                    type="checkbox"
-                    name="dmStatus"
-                    id="ht"
-                    value="HEALTHTECH"
-                    checked={dmStatus?.includes('HEALTHTECH')}
-                    onChange={handleDomainCheck}
-                  />
-                </div>
-                <div className="row">
-                  <label htmlFor="ed">교육</label>
-                  <input
-                    type="checkbox"
-                    name="dmStatus"
-                    id="ed"
-                    value="EDUCATION"
-                    checked={dmStatus?.includes('EDUCATION')}
-                    onChange={handleDomainCheck}
-                  />
-                </div>
-                <div className="row">
-                  <label htmlFor="ec">이커머스</label>
-                  <input
-                    type="checkbox"
-                    name="dmStatus"
-                    id="ec"
-                    value="ECOMMERCE"
-                    checked={dmStatus?.includes('ECOMMERCE')}
-                    onChange={handleDomainCheck}
-                  />
-                </div>
-                <div className="row">
-                  <label htmlFor="ft">푸드테크</label>
-                  <input
-                    type="checkbox"
-                    name="dmStatus"
-                    id="ft"
-                    value="FOODTECH"
-                    checked={dmStatus?.includes('FOODTECH')}
-                    onChange={handleDomainCheck}
-                  />
-                </div>
-                <div className="row">
-                  <label htmlFor="mb">모빌리티</label>
-                  <input
-                    type="checkbox"
-                    name="dmStatus"
-                    id="mb"
-                    value="MOBILITY"
-                    checked={dmStatus?.includes('MOBILITY')}
-                    onChange={handleDomainCheck}
-                  />
-                </div>
-                <div className="row">
-                  <label htmlFor="con">컨텐츠</label>
-                  <input
-                    type="checkbox"
-                    name="dmStatus"
-                    id="con"
-                    value="CONTENTS"
-                    checked={dmStatus?.includes('CONTENTS')}
-                    onChange={handleDomainCheck}
-                  />
-                </div>
-                <div className="row">
-                  <label htmlFor="b2b">B2B</label>
-                  <input
-                    type="checkbox"
-                    name="dmStatus"
-                    id="b2b"
-                    value="B2B"
-                    checked={dmStatus?.includes('B2B')}
-                    onChange={handleDomainCheck}
-                  />
-                </div>
-                <div className="row">
-                  <label htmlFor="others">기타</label>
-                  <input
-                    type="checkbox"
-                    name="dmStatus"
-                    id="others"
-                    value="OTHERS"
-                    checked={dmStatus?.includes('OTHERS')}
-                    onChange={handleDomainCheck}
-                  />
-                </div>
+          <span>직군 필터</span>
+          {panelExpanded ? <FaAngleUp /> : <FaAngleDown />}
+        </button>
+        {panelExpanded && (
+          <div className={styles.panel}>
+            <section className="col">
+              <h3>개발</h3>
+              <div className="row">
+                <label htmlFor="check-dev-total">전체</label>
+                <input
+                  type="checkbox"
+                  id="check-dev-total"
+                  name="total"
+                  value="total"
+                  onChange={handleRoleCheck}
+                ></input>
               </div>
-              <div className={styles.modalActions}>
-                <button
-                  className={`{${styles.btn} ${styles.btnReset}}`}
-                  onClick={() => setDmStatus(DOMAINS)}
-                >
-                  초기화
-                </button>
-                <button
-                  className={`${styles.btn} ${styles.btnApply}`}
-                  onClick={() => setDomain(dmStatus)}
-                >
-                  적용
-                </button>
+              <div className="row">
+                <label htmlFor="check-dev-front">프론트엔드 개발</label>
+                <input
+                  type="checkbox"
+                  id=""
+                  name="check-dev-front"
+                  value="FRONT"
+                  onChange={handleRoleCheck}
+                ></input>
               </div>
-            </div>
-          )}
-        </li>
+              <div className="row">
+                <label htmlFor="check-dev-backend">서버⋅백엔드 개발</label>
+                <input
+                  type="checkbox"
+                  id="check-dev-backend"
+                  name="backend"
+                  value="BACKEND"
+                  onChange={handleRoleCheck}
+                ></input>
+              </div>
+              <div className="row">
+                <label htmlFor="check-dev-app">앱 개발</label>
+                <input
+                  type="checkbox"
+                  id="check-dev-app"
+                  name="app"
+                  value="APP"
+                  onChange={handleRoleCheck}
+                ></input>
+              </div>
+              <div className="row">
+                <label htmlFor="check-dev-others">기타 분야</label>
+                <input
+                  type="checkbox"
+                  id="check-dev-others"
+                  name="others"
+                  value="OTHERS"
+                  onChange={handleRoleCheck}
+                ></input>
+              </div>
+            </section>
 
-        {/* 순서 */}
-        <li
-          className={`${styles.chip} ${styles.modalTrigger}`}
-          onClick={() => {
-            setNewExpanded((p) => !p);
-          }}
-        >
-          <span>최신순</span> {newExpanded ? <FaAngleUp /> : <FaAngleDown />}
-          {/* 순서 선택 팝업 */}
-          {newExpanded && (
-            <div className={styles.modal} onClick={(e) => e.stopPropagation()}>
-              <div className={styles.modalOptions}>
-                <label className={styles.radioLabel}>
-                  <input
-                    type="radio"
-                    name="orderStatus"
-                    value={0}
-                    checked={orderStatus === 0}
-                    onChange={() => setOrderStatus(0)}
-                  />
-                  <span className={styles.radioVisual}></span>
-                  <span>공고등록순</span>
-                </label>
-                <label className={styles.radioLabel}>
-                  <input
-                    type="radio"
-                    name="orderStatus"
-                    value={1}
-                    checked={orderStatus === 1}
-                    onChange={() => setOrderStatus(1)}
-                  />
-                  <span className={styles.radioVisual}></span>
-                  <span>마감임박순</span>
-                </label>
+            <section>
+              <h3>기획</h3>
+              <div className="row">
+                <label htmlFor="project-total">전체</label>
+                <input
+                  type="checkbox"
+                  id="project-total"
+                  name="PLANNING"
+                  value="PLANNING"
+                  onChange={handleRoleCheck}
+                ></input>
               </div>
-              <div className={styles.modalActions}>
-                <button
-                  className={`${styles.btn} ${styles.btnReset}`}
-                  onClick={() => setOrderStatus(0)}
-                >
-                  초기화
-                </button>
-                <button
-                  className={`${styles.btnApply}`}
-                  onClick={() => setOrder(orderStatus)}
-                >
-                  적용
-                </button>
+            </section>
+
+            <section>
+              <h3>디자인</h3>
+              <div className="row">
+                <label htmlFor="design-total">전체</label>
+                <input
+                  type="checkbox"
+                  id="design-total"
+                  name="DESIGN"
+                  value="DESIGN"
+                  onChange={handleRoleCheck}
+                ></input>
               </div>
-            </div>
-          )}
-        </li>
-        <li className={styles.resetChip} onClick={handleReset}>
-          <FaArrowRotateRight /> <span>초기화</span>
-        </li>
-      </ul>
-
-      <section className={styles.postList}>
-        {isLoading ? (
-          <p>Loading...</p>
-        ) : (
-          posts?.map((post) => (
-            <InternCard
-              key={post.id}
-              post={post}
-              onLoginRequired={handleLoginRequired}
-            />
-          ))
+            </section>
+            <section>
+              <h3>마케팅</h3>
+              <div className="row">
+                <label htmlFor="marketing-total">전체</label>
+                <input
+                  type="checkbox"
+                  id="marketing-total"
+                  name="MARKETING"
+                  value="MARKETING"
+                  onChange={handleRoleCheck}
+                ></input>
+              </div>
+            </section>
+          </div>
         )}
-      </section>
+      </div>
 
-      {isModalOpen && (
-        <div
-          className={styles.modalBackdrop}
-          onClick={() => setIsModalOpen(false)}
-        >
-          <div
-            className={styles.modalContent}
-            onClick={(e) => e.stopPropagation()}
-          >
-            <p>로그인이 필요한 기능입니다.</p>
-            <div className={styles.modalActions}>
-              <button type="button" onClick={() => setIsModalOpen(false)}>
-                뒤로가기
+      <main className={styles.main}>
+        <div className={styles.contentArea}>
+          <div className={styles.contentWrapper}>
+            <ul className={styles.chips}>
+              {/* 모집 상태 옵션 버튼 */}
+              <li
+                className={`${styles.chip} ${styles.modalTrigger}`}
+                onClick={() => handleDropdownToggle('rec')}
+              >
+                <span>모집 상태</span>{' '}
+                {openDropdown === 'rec' ? <FaAngleUp /> : <FaAngleDown />}
+                {/* 모집 상태 팝업 */}
+                {openDropdown === 'rec' && (
+                  <div
+                    className={styles.modal}
+                    onClick={(e) => e.stopPropagation()} // prevents clicks inside from closing modal
+                  >
+                    <div className={styles.modalOptions}>
+                      <label className={styles.radioLabel}>
+                        <input
+                          type="radio"
+                          name="recStatus"
+                          value="all"
+                          checked={recStatus === 'all'}
+                          onChange={() => setRecStatus('all')}
+                        />
+                        <span className={styles.radioVisual}></span>
+                        <span>전체</span>
+                      </label>
+
+                      <label className={styles.radioLabel}>
+                        <input
+                          type="radio"
+                          name="recStatus"
+                          value="recruiting"
+                          checked={recStatus === 'recruiting'}
+                          onChange={() => setRecStatus('recruiting')}
+                        />
+                        <span className={styles.radioVisual}></span>
+                        <span>모집중</span>
+                      </label>
+                    </div>
+                    <div className={styles.modalActions}>
+                      <button
+                        className={`${styles.btn} ${styles.btnReset}`}
+                        onClick={() => setRecStatus('all')}
+                      >
+                        초기화
+                      </button>
+                      <button
+                        className={`${styles.btn} ${styles.btnApply}`}
+                        onClick={() => {
+                          setIsActive(recStatus === 'recruiting');
+                          setOpenDropdown(null);
+                        }}
+                      >
+                        적용
+                      </button>
+                    </div>
+                  </div>
+                )}
+              </li>
+
+              {/* 업종 옵션 버튼 */}
+              <li
+                className={`${styles.chip} ${styles.modalTrigger}`}
+                onClick={() => handleDropdownToggle('dm')}
+              >
+                <span>업종</span>{' '}
+                {openDropdown === 'dm' ? <FaAngleUp /> : <FaAngleDown />}
+                {/* 업종 선택 팝업 */}
+                {openDropdown === 'dm' && (
+                  <div
+                    className={styles.modal}
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <div className={styles.modalOptions}>
+                      <div className="row">
+                        <label htmlFor="all">전체</label>
+                        <input
+                          type="checkbox"
+                          name="dmStatus"
+                          id="all"
+                          value="all"
+                          checked={
+                            dmStatus.length === DOMAINS.length &&
+                            DOMAINS.every((d) => dmStatus.includes(d))
+                          }
+                          onChange={handleDomainCheck}
+                        />
+                      </div>
+                      <div className="row">
+                        <label htmlFor="fin">핀테크</label>
+                        <input
+                          type="checkbox"
+                          name="dmStatus"
+                          id="fin"
+                          value="FINTECH"
+                          checked={dmStatus?.includes('FINTECH')}
+                          onChange={handleDomainCheck}
+                        />
+                      </div>
+                      <div className="row">
+                        <label htmlFor="ht">헬스테크</label>
+                        <input
+                          type="checkbox"
+                          name="dmStatus"
+                          id="ht"
+                          value="HEALTHTECH"
+                          checked={dmStatus?.includes('HEALTHTECH')}
+                          onChange={handleDomainCheck}
+                        />
+                      </div>
+                      <div className="row">
+                        <label htmlFor="ed">교육</label>
+                        <input
+                          type="checkbox"
+                          name="dmStatus"
+                          id="ed"
+                          value="EDUCATION"
+                          checked={dmStatus?.includes('EDUCATION')}
+                          onChange={handleDomainCheck}
+                        />
+                      </div>
+                      <div className="row">
+                        <label htmlFor="ec">이커머스</label>
+                        <input
+                          type="checkbox"
+                          name="dmStatus"
+                          id="ec"
+                          value="ECOMMERCE"
+                          checked={dmStatus?.includes('ECOMMERCE')}
+                          onChange={handleDomainCheck}
+                        />
+                      </div>
+                      <div className="row">
+                        <label htmlFor="ft">푸드테크</label>
+                        <input
+                          type="checkbox"
+                          name="dmStatus"
+                          id="ft"
+                          value="FOODTECH"
+                          checked={dmStatus?.includes('FOODTECH')}
+                          onChange={handleDomainCheck}
+                        />
+                      </div>
+                      <div className="row">
+                        <label htmlFor="mb">모빌리티</label>
+                        <input
+                          type="checkbox"
+                          name="dmStatus"
+                          id="mb"
+                          value="MOBILITY"
+                          checked={dmStatus?.includes('MOBILITY')}
+                          onChange={handleDomainCheck}
+                        />
+                      </div>
+                      <div className="row">
+                        <label htmlFor="con">컨텐츠</label>
+                        <input
+                          type="checkbox"
+                          name="dmStatus"
+                          id="con"
+                          value="CONTENTS"
+                          checked={dmStatus?.includes('CONTENTS')}
+                          onChange={handleDomainCheck}
+                        />
+                      </div>
+                      <div className="row">
+                        <label htmlFor="b2b">B2B</label>
+                        <input
+                          type="checkbox"
+                          name="dmStatus"
+                          id="b2b"
+                          value="B2B"
+                          checked={dmStatus?.includes('B2B')}
+                          onChange={handleDomainCheck}
+                        />
+                      </div>
+                      <div className="row">
+                        <label htmlFor="others">기타</label>
+                        <input
+                          type="checkbox"
+                          name="dmStatus"
+                          id="others"
+                          value="OTHERS"
+                          checked={dmStatus?.includes('OTHERS')}
+                          onChange={handleDomainCheck}
+                        />
+                      </div>
+                    </div>
+                    <div className={styles.modalActions}>
+                      <button
+                        className={`{${styles.btn} ${styles.btnReset}}`}
+                        onClick={() => setDmStatus(DOMAINS)}
+                      >
+                        초기화
+                      </button>
+                      <button
+                        className={`${styles.btn} ${styles.btnApply}`}
+                        onClick={() => {
+                          setDomain(dmStatus);
+                          setOpenDropdown(null);
+                        }}
+                      >
+                        적용
+                      </button>
+                    </div>
+                  </div>
+                )}
+              </li>
+
+              {/* 순서 */}
+              <li
+                className={`${styles.chip} ${styles.modalTrigger}`}
+                onClick={() => handleDropdownToggle('new')}
+              >
+                <span>최신순</span>{' '}
+                {openDropdown === 'new' ? <FaAngleUp /> : <FaAngleDown />}
+                {/* 순서 선택 팝업 */}
+                {openDropdown === 'new' && (
+                  <div
+                    className={styles.modal}
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <div className={styles.modalOptions}>
+                      <label className={styles.radioLabel}>
+                        <input
+                          type="radio"
+                          name="orderStatus"
+                          value={0}
+                          checked={orderStatus === 0}
+                          onChange={() => setOrderStatus(0)}
+                        />
+                        <span className={styles.radioVisual}></span>
+                        <span>공고등록순</span>
+                      </label>
+                      <label className={styles.radioLabel}>
+                        <input
+                          type="radio"
+                          name="orderStatus"
+                          value={1}
+                          checked={orderStatus === 1}
+                          onChange={() => setOrderStatus(1)}
+                        />
+                        <span className={styles.radioVisual}></span>
+                        <span>마감임박순</span>
+                      </label>
+                    </div>
+                    <div className={styles.modalActions}>
+                      <button
+                        className={`${styles.btn} ${styles.btnReset}`}
+                        onClick={() => setOrderStatus(0)}
+                      >
+                        초기화
+                      </button>
+                      <button
+                        className={`${styles.btnApply}`}
+                        onClick={() => {
+                          setOrder(orderStatus);
+                          setOpenDropdown(null);
+                        }}
+                      >
+                        적용
+                      </button>
+                    </div>
+                  </div>
+                )}
+              </li>
+              <li className={styles.resetChip} onClick={handleReset}>
+                <FaArrowRotateRight /> <span>초기화</span>
+              </li>
+            </ul>
+
+            <section className={styles.postList}>
+              {isLoading ? (
+                <p>Loading...</p>
+              ) : (
+                //test
+                currentPosts?.map((post) => (
+                  <InternCard
+                    key={post.id}
+                    post={post}
+                    onLoginRequired={handleLoginRequired}
+                  />
+                ))
+              )}
+            </section>
+
+            <div className={styles.pagination}>
+              <button
+                onClick={() => handlePageChange(currentPage - 1)}
+                disabled={currentPage === 1}
+              >
+                이전
               </button>
-              <button type="button" onClick={() => navigate('/login')}>
-                로그인하기
+              {renderPageNumbers()}
+              <button
+                onClick={() => handlePageChange(currentPage + 1)}
+                disabled={currentPage === totalPages}
+              >
+                다음
               </button>
             </div>
           </div>
         </div>
-      )}
-    </main>
+        {isModalOpen && (
+          <div
+            className={styles.modalBackdrop}
+            onClick={() => setIsModalOpen(false)}
+          >
+            <div
+              className={styles.modalContent}
+              onClick={(e) => e.stopPropagation()}
+            >
+              <p>로그인이 필요한 기능입니다.</p>
+              <div className={styles.modalActions}>
+                <button type="button" onClick={() => setIsModalOpen(false)}>
+                  뒤로가기
+                </button>
+                <button type="button" onClick={() => navigate('/login')}>
+                  로그인하기
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+      </main>
+    </>
   );
 };
 
diff --git a/src/contexts/PostContext.tsx b/src/contexts/PostContext.tsx
index d80f71e..2498f62 100644
--- a/src/contexts/PostContext.tsx
+++ b/src/contexts/PostContext.tsx
@@ -108,7 +108,7 @@ export const PostProvider = ({ children }: PostProviderProps) => {
     try {
       const url = `/api/post?${query}`;
       const response = await apiClient.get<{
-        posts: ApiPost[];
+        posts: ApiPost[]; // posts stored in array
         paginator: { lastpage: number };
       }>(url);
       setPaginator(response.data.paginator.lastpage);