diff --git a/src/Home.module.css b/src/Home.module.css
index 3168c94..134d82e 100644
--- a/src/Home.module.css
+++ b/src/Home.module.css
@@ -1,30 +1,32 @@
-/* --- Main Layout --- */
-.filterContainer {
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  background-color: white;
-  padding: 16px 30px 0px 30px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
 .main {
   display: flex;
   flex-direction: column;
-  padding: 0 30px 16px 30px;
+  padding: 16px 30px;
+}
+.panelWrapper {
+  flex-direction: column;
+  align-items: flex-start;
 }
 
 .contentWrapper {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   gap: 20px;
   width: 100%;
-  /* Removed max-width for 3-column layout */
   margin: 0 auto;
-  width: 1000px;
+  max-width: 1200px;
+  padding: 0 16px;
+}
+
+.filterContainer {
+  flex: 0 0 220px; /* Do not grow, do not shrink, base width 220px */
+}
+
+.postsArea {
+  flex: 1;
+  min-width: 0;
 }
 
-/* --- Filter Panel (Accordion) --- */
 .accordion {
   background-color: #eee;
   color: #444;
@@ -52,25 +54,61 @@
   overflow: hidden;
 }
 
-/* --- Filter Chips --- */
+.panel div {
+  margin-bottom: 6px;
+  font-size: 18px;
+}
+.panel section {
+  margin-top: 12px;
+}
+
 ul.chips {
-  margin: 0;
+  margin: 30px 0 50px;
   list-style: none;
   display: flex;
   gap: 6px;
   flex-wrap: wrap;
-  padding: 0;
+  padding: 0 16px 16px 16px;
 }
 
-/* --- Post Grid (3xN Layout) --- */
+/* --- Post List (flex, responsive) --- */
 .postList {
-  display: grid;
-  /* Defines the 3-column layout */
-  grid-template-columns: repeat(3, 1fr);
+  display: flex;
+  flex-wrap: wrap;
   gap: 20px;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.postList > * {
+  /* Default: 3 columns. The -20px accounts for gaps so cards fit nicely */
+  flex: 1 1 calc(33.333% - 20px);
+  max-width: calc(33.333% - 20px);
+}
+
+/* Medium screens: 2 columns */
+@media (max-width: 1000px) {
+  .postList > * {
+    flex: 1 1 calc(50% - 20px);
+    max-width: calc(50% - 20px);
+  }
+}
+
+/* Small screens: 1 column */
+@media (max-width: 768px) {
+  .contentWrapper {
+    flex-direction: column;
+    padding: 0 12px;
+  }
+  .postList {
+    gap: 16px;
+  }
+  .postList > * {
+    flex: 1 1 100%;
+    max-width: 100%;
+  }
 }
 
-/* --- Pagination --- */
 .pagination {
   display: flex;
   justify-content: center;
@@ -106,12 +144,11 @@ ul.chips {
 }
 
 .pagination button.activePage {
-  background-color: #007bff;
+  background-color: #555;
   color: white;
-  border-color: #007bff;
+  border-color: rgba(217, 217, 217, 1);
 }
 
-/* --- Modal Styles (Dropdown) --- */
 .modalTrigger {
   position: relative;
 }
@@ -200,6 +237,26 @@ ul.chips {
   transform: scale(1);
 }
 
+[type="checkbox"] {
+  appearance: none;
+  box-sizing: border-box;
+  background-clip: content-box;
+  width: 1.25em;
+  height: 1.25em;
+  border: 1px solid rgba(72, 76, 83, 1);
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+[type="checkbox"]:checked {
+  border-color: rgba(72, 76, 83, 1);
+  background-color: rgba(72, 76, 83, 1);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 8' fill='none'%3E%3Cpath d='M1 3.5L4.5 7L9.5 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 0.75em;
+}
+
 /* --- Modal Styles (Login Confirmation) --- */
 .modalBackdrop {
   position: fixed;
@@ -234,29 +291,3 @@ ul.chips {
   gap: 12px;
   justify-content: center;
 }
-
-.modalActions button {
-  padding: 10px 20px;
-  border-radius: 6px;
-  border: 1px solid #ccc;
-  background-color: #f0f0f0;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 500;
-  color: #212529;
-  transition: background-color 0.2s;
-}
-
-.modalActions button:first-child:hover {
-  background-color: #e2e6ea;
-}
-
-.modalActions button:last-child {
-  background-color: #007bff;
-  color: white;
-  border-color: #007bff;
-}
-
-.modalActions button:last-child:hover {
-  background-color: #0069d9;
-}
diff --git a/src/components/Home.tsx b/src/components/Home.tsx
index df8c5d8..6e804cd 100644
--- a/src/components/Home.tsx
+++ b/src/components/Home.tsx
@@ -2,7 +2,6 @@ import { type ChangeEvent, useEffect, useState } from 'react';
 import { FaAngleDown, FaAngleUp, FaArrowRotateRight } from 'react-icons/fa6';
 import { useNavigate } from 'react-router-dom';
 import styles from '../Home.module.css';
-// import { useAuth } from '../contexts/AuthContext';
 import { encodeQueryParams, usePosts } from '../contexts/PostContext';
 import InternCard from './InternCard';
 
@@ -84,11 +83,14 @@ const Home = () => {
     });
     setQuery(q);
   }, [roles, isActive, domains, order, currentPage]);
+
   // role check
   const handleRoleCheck = (e: ChangeEvent<HTMLInputElement>) => {
     const { checked, value } = e.currentTarget;
     if (value === 'total') {
-      setRoles((p) => [...DEV, ...p.filter((v) => !DEV.includes(v))]);
+      if (checked)
+        setRoles((p) => [...DEV, ...p.filter((v) => !DEV.includes(v))]);
+      else setRoles((p) => [...p.filter((v) => !DEV.includes(v))]);
     } else {
       setRoles((p) => {
         if (checked) return [...p, value];
@@ -97,6 +99,7 @@ const Home = () => {
     }
     setCurrentPage(1);
   };
+
   // domain check
   const handleDomainCheck = (e: ChangeEvent<HTMLInputElement>) => {
     const { checked, value } = e.currentTarget;
@@ -157,123 +160,122 @@ const Home = () => {
 
   return (
     <>
-      <div className={styles.filterContainer}>
-        <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="check-dev-front"
-                  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>
+      <main className={styles.main}>
+        <div className={styles.contentWrapper}>
+          <div className={styles.filterContainer}>
+            <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="check-dev-front"
+                      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>
-            </section>
+            )}
           </div>
-        )}
-      </div>
-
-      <main className={styles.main}>
-        <div className={styles.contentArea}>
-          <div className={styles.contentWrapper}>
+          <div className={styles.postsArea}>
             <ul className={styles.chips}>
               {/* 모집 상태 옵션 버튼 */}
               <li
@@ -465,7 +467,7 @@ const Home = () => {
                     </div>
                     <div className={styles.modalActions}>
                       <button
-                        className={`{${styles.btn} ${styles.btnReset}}`}
+                        className={`${styles.btn} ${styles.btnReset}`}
                         onClick={() => setDmStatus(DOMAINS)}
                       >
                         초기화
@@ -530,7 +532,7 @@ const Home = () => {
                         초기화
                       </button>
                       <button
-                        className={`${styles.btnApply}`}
+                        className={`${styles.btn} ${styles.btnApply}`}
                         onClick={() => {
                           setOrder(orderStatus);
                           setOpenDropdown(null);
@@ -565,6 +567,7 @@ const Home = () => {
 
             <div className={styles.pagination}>
               <button
+                className={`${styles.btn}`}
                 onClick={() => handlePageChange(currentPage - 1)}
                 disabled={currentPage === 1}
               >
@@ -572,6 +575,7 @@ const Home = () => {
               </button>
               {renderPageNumbers()}
               <button
+                className={`${styles.btn}`}
                 onClick={() => handlePageChange(currentPage + 1)}
                 disabled={currentPage === totalPages}
               >
@@ -591,10 +595,18 @@ const Home = () => {
             >
               <p>로그인이 필요한 기능입니다.</p>
               <div className={styles.modalActions}>
-                <button type="button" onClick={() => setIsModalOpen(false)}>
+                <button
+                  type="button"
+                  className={`${styles.btn} ${styles.btnReset}`}
+                  onClick={() => setIsModalOpen(false)}
+                >
                   뒤로가기
                 </button>
-                <button type="button" onClick={() => navigate('/login')}>
+                <button
+                  type="button"
+                  className={`${styles.btn} ${styles.btnApply}`}
+                  onClick={() => navigate('/login')}
+                >
                   로그인하기
                 </button>
               </div>