diff --git a/src/main/java/org/sopt/poti/global/security/SecurityConfig.java b/src/main/java/org/sopt/poti/global/security/SecurityConfig.java
index 47108d5..f985915 100644
--- a/src/main/java/org/sopt/poti/global/security/SecurityConfig.java
+++ b/src/main/java/org/sopt/poti/global/security/SecurityConfig.java
@@ -33,6 +33,7 @@ public class SecurityConfig {
       "/swagger-ui/**", // Swagger 문서 관련
       "/v3/api-docs/**",
       "/favicon.ico",
+      "/css/**",
       "/dev/login", // 개발자용 자동 로그인 (토큰 발급)
   };
 
diff --git a/src/main/resources/static/css/admin.css b/src/main/resources/static/css/admin.css
new file mode 100644
index 0000000..602100c
--- /dev/null
+++ b/src/main/resources/static/css/admin.css
@@ -0,0 +1,323 @@
+/* ── Variables ── */
+:root {
+  --sidebar-bg: #0f172a;
+  --sidebar-hover: #1e293b;
+  --accent: #6366f1;
+  --accent-light: #818cf8;
+  --bg: #f1f5f9;
+  --surface: #ffffff;
+  --border: #e2e8f0;
+  --text: #0f172a;
+  --text-muted: #64748b;
+}
+
+/* ── Reset ── */
+*, *::before, *::after { box-sizing: border-box; }
+body {
+  margin: 0;
+  background: var(--bg);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 14px;
+  color: var(--text);
+}
+
+/* ── Sidebar ── */
+.sidebar {
+  width: 240px;
+  min-height: 100vh;
+  background: var(--sidebar-bg);
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  top: 0; left: 0;
+  z-index: 100;
+}
+.sidebar-brand {
+  padding: 24px 20px 18px;
+  border-bottom: 1px solid #1e293b;
+}
+.sidebar-brand .brand-title {
+  color: #fff;
+  font-size: 1.05rem;
+  font-weight: 700;
+}
+.sidebar-brand .brand-sub {
+  color: #475569;
+  font-size: 0.7rem;
+  margin-top: 3px;
+}
+.sidebar-nav {
+  flex: 1;
+  padding: 10px 10px 0;
+}
+.nav-label {
+  color: #475569;
+  font-size: 0.62rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  padding: 14px 8px 6px;
+}
+.sidebar-link {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: #94a3b8;
+  text-decoration: none;
+  padding: 9px 12px;
+  border-radius: 8px;
+  font-size: 0.85rem;
+  font-weight: 500;
+  transition: background 0.15s, color 0.15s;
+  margin-bottom: 2px;
+}
+.sidebar-link i { font-size: 0.95rem; }
+.sidebar-link:hover { background: #1e293b; color: #e2e8f0; }
+.sidebar-link.active { background: var(--accent); color: #fff; }
+.sidebar-footer {
+  padding: 10px;
+  border-top: 1px solid #1e293b;
+}
+.sidebar-footer button {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  background: none;
+  border: none;
+  color: #64748b;
+  font-size: 0.82rem;
+  font-weight: 500;
+  padding: 9px 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.15s, color 0.15s;
+}
+.sidebar-footer button:hover { background: #1e293b; color: #94a3b8; }
+
+/* ── Main Layout ── */
+.main-wrapper {
+  margin-left: 240px;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+.topbar {
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  padding: 14px 28px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: sticky;
+  top: 0;
+  z-index: 50;
+}
+.topbar-title {
+  font-size: 0.95rem;
+  font-weight: 700;
+  color: var(--text);
+}
+.topbar-badge {
+  background: var(--bg);
+  color: var(--text-muted);
+  font-size: 0.72rem;
+  padding: 3px 10px;
+  border-radius: 20px;
+  font-weight: 500;
+}
+.main-content { padding: 24px 28px; flex: 1; }
+
+/* ── Flash Alert ── */
+.alert-flash {
+  border: none;
+  border-radius: 10px;
+  font-size: 0.85rem;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 20px;
+  padding: 12px 16px;
+}
+
+/* ── Stat Cards (Dashboard) ── */
+.stat-card {
+  background: var(--surface);
+  border-radius: 14px;
+  border: none;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
+}
+.stat-card .card-body { padding: 20px 22px; }
+.stat-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  margin-bottom: 10px;
+}
+.stat-icon {
+  width: 38px; height: 38px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1rem;
+}
+.stat-value {
+  font-size: 1.8rem;
+  font-weight: 700;
+  color: var(--text);
+  line-height: 1;
+  margin-top: 2px;
+}
+.stat-desc {
+  font-size: 0.72rem;
+  color: var(--text-muted);
+  margin-top: 6px;
+}
+.stat-bar { height: 3px; }
+
+/* ── Quick Links ── */
+.quick-card {
+  background: var(--surface);
+  border-radius: 14px;
+  border: none;
+  box-shadow: 0 1px 3px rgba(0,0,0,.06);
+  padding: 20px 22px;
+}
+.quick-card .section-title {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  margin-bottom: 12px;
+}
+.quick-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  color: var(--text);
+  border-radius: 8px;
+  padding: 7px 14px;
+  font-size: 0.82rem;
+  font-weight: 500;
+  text-decoration: none;
+  transition: border-color 0.15s, background 0.15s;
+}
+.quick-link:hover { border-color: var(--accent); color: var(--accent); background: #eef2ff; }
+
+/* ── Table Card ── */
+.table-card {
+  background: var(--surface);
+  border-radius: 14px;
+  border: none;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
+}
+.admin-table { margin: 0; }
+.admin-table thead th {
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-muted);
+  background: #f8fafc;
+  border-bottom: 1px solid var(--border);
+  padding: 11px 16px;
+  white-space: nowrap;
+}
+.admin-table tbody td {
+  padding: 13px 16px;
+  font-size: 0.85rem;
+  color: var(--text);
+  vertical-align: middle;
+  border-bottom: 1px solid #f1f5f9;
+}
+.admin-table tbody tr:hover td { background: #f8fafc; }
+.admin-table tbody tr:last-child td { border-bottom: none; }
+.cell-id { font-size: 0.75rem; color: var(--text-muted); }
+.cell-sub { font-size: 0.78rem; color: var(--text-muted); }
+
+/* ── Badges ── */
+.badge-pill {
+  display: inline-block;
+  font-size: 0.68rem;
+  font-weight: 700;
+  padding: 3px 9px;
+  border-radius: 20px;
+  letter-spacing: 0.01em;
+}
+.badge-active    { background: #dcfce7; color: #15803d; }
+.badge-suspended { background: #fee2e2; color: #b91c1c; }
+.badge-withdrawn { background: #f1f5f9; color: #94a3b8; }
+.badge-kakao    { background: #fef9c3; color: #854d0e; }
+
+.status-recruiting   { background: #dbeafe; color: #1d4ed8; }
+.status-closed       { background: #fef9c3; color: #854d0e; }
+.status-payment_done { background: #dcfce7; color: #15803d; }
+.status-shipping     { background: #ede9fe; color: #6d28d9; }
+.status-delivered    { background: #f1f5f9; color: #475569; }
+
+/* ── Action Buttons ── */
+.btn-action {
+  display: inline-block;
+  font-size: 0.75rem;
+  font-weight: 600;
+  padding: 4px 11px;
+  border-radius: 7px;
+  border: none;
+  cursor: pointer;
+  transition: filter 0.15s;
+  white-space: nowrap;
+  line-height: 1.6;
+}
+.btn-action:hover { filter: brightness(0.93); }
+.btn-suspend  { background: #fee2e2; color: #b91c1c; }
+.btn-release  { background: #dcfce7; color: #15803d; }
+.btn-withdraw { background: #f1f5f9; color: #64748b; }
+.btn-delete   { background: #fee2e2; color: #b91c1c; }
+
+/* ── Filter Tabs ── */
+.filter-tabs {
+  display: flex;
+  gap: 7px;
+  flex-wrap: wrap;
+  margin-bottom: 16px;
+}
+.filter-tab {
+  font-size: 0.78rem;
+  font-weight: 600;
+  padding: 5px 13px;
+  border-radius: 20px;
+  border: 1.5px solid var(--border);
+  background: var(--surface);
+  color: var(--text-muted);
+  text-decoration: none;
+  transition: all 0.15s;
+}
+.filter-tab:hover { border-color: var(--accent); color: var(--accent); }
+.filter-tab.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
+
+/* ── Empty State ── */
+.empty-state {
+  padding: 52px 0;
+  text-align: center;
+  color: var(--text-muted);
+}
+.empty-state i { font-size: 2.2rem; display: block; margin-bottom: 10px; opacity: 0.4; }
+.empty-state p { font-size: 0.85rem; margin: 0; }
+
+/* ── Pagination ── */
+.pagination { gap: 3px; }
+.page-link {
+  font-size: 0.78rem;
+  color: var(--accent);
+  border-color: var(--border);
+  border-radius: 7px !important;
+  padding: 5px 10px;
+}
+.page-link:hover { background: #eef2ff; border-color: var(--accent); color: var(--accent); }
+.page-item.active .page-link { background: var(--accent); border-color: var(--accent); }
+.page-item.disabled .page-link { pointer-events: none; opacity: 0.4; }
diff --git a/src/main/resources/templates/admin/dashboard.html b/src/main/resources/templates/admin/dashboard.html
index 80ade45..241c93e 100644
--- a/src/main/resources/templates/admin/dashboard.html
+++ b/src/main/resources/templates/admin/dashboard.html
@@ -3,78 +3,67 @@
       th:replace="~{admin/layout :: layout(~{::section}, 'dashboard')}">
 <body>
 <section>
-  <div class="row g-4 mb-4">
-    <!-- 총 유저 수 -->
+  <div class="row g-3 mb-3">
     <div class="col-md-4">
-      <div class="card border-0 shadow-sm h-100" style="border-radius:14px; overflow:hidden;">
-        <div class="card-body p-4">
-          <div class="d-flex align-items-center justify-content-between mb-3">
-            <span class="text-muted fw-semibold" style="font-size:0.82rem;">총 유저 수</span>
-            <div class="rounded-3 d-flex align-items-center justify-content-center"
-                 style="width:40px;height:40px;background:#ede9fe;">
-              <i class="bi bi-people-fill" style="color:#7c3aed;font-size:1.1rem;"></i>
+      <div class="stat-card">
+        <div class="card-body">
+          <div class="d-flex align-items-center justify-content-between mb-2">
+            <span class="stat-label">총 유저 수</span>
+            <div class="stat-icon" style="background:#ede9fe;">
+              <i class="bi bi-people-fill" style="color:#7c3aed;"></i>
             </div>
           </div>
-          <div class="fw-bold" style="font-size:2rem;color:#0f172a;" th:text="${userCount}">0</div>
-          <div class="text-muted mt-1" style="font-size:0.78rem;">가입된 전체 유저</div>
+          <div class="stat-value" th:text="${userCount}">0</div>
+          <div class="stat-desc">가입된 전체 유저</div>
         </div>
-        <div style="height:4px;background:linear-gradient(90deg,#7c3aed,#a78bfa);"></div>
+        <div class="stat-bar" style="background:linear-gradient(90deg,#7c3aed,#a78bfa);"></div>
       </div>
     </div>
 
     <!-- 분철글 수 -->
     <div class="col-md-4">
-      <div class="card border-0 shadow-sm h-100" style="border-radius:14px; overflow:hidden;">
-        <div class="card-body p-4">
-          <div class="d-flex align-items-center justify-content-between mb-3">
-            <span class="text-muted fw-semibold" style="font-size:0.82rem;">분철글 수</span>
-            <div class="rounded-3 d-flex align-items-center justify-content-center"
-                 style="width:40px;height:40px;background:#dbeafe;">
-              <i class="bi bi-card-list" style="color:#1d4ed8;font-size:1.1rem;"></i>
+      <div class="stat-card">
+        <div class="card-body">
+          <div class="d-flex align-items-center justify-content-between mb-2">
+            <span class="stat-label">분철글 수</span>
+            <div class="stat-icon" style="background:#dbeafe;">
+              <i class="bi bi-card-list" style="color:#1d4ed8;"></i>
             </div>
           </div>
-          <div class="fw-bold" style="font-size:2rem;color:#0f172a;" th:text="${postCount}">0</div>
-          <div class="text-muted mt-1" style="font-size:0.78rem;">등록된 전체 분철글</div>
+          <div class="stat-value" th:text="${postCount}">0</div>
+          <div class="stat-desc">등록된 전체 분철글</div>
         </div>
-        <div style="height:4px;background:linear-gradient(90deg,#1d4ed8,#60a5fa);"></div>
+        <div class="stat-bar" style="background:linear-gradient(90deg,#1d4ed8,#60a5fa);"></div>
       </div>
     </div>
 
     <!-- 총 주문 수 -->
     <div class="col-md-4">
-      <div class="card border-0 shadow-sm h-100" style="border-radius:14px; overflow:hidden;">
-        <div class="card-body p-4">
-          <div class="d-flex align-items-center justify-content-between mb-3">
-            <span class="text-muted fw-semibold" style="font-size:0.82rem;">총 주문 수</span>
-            <div class="rounded-3 d-flex align-items-center justify-content-center"
-                 style="width:40px;height:40px;background:#dcfce7;">
-              <i class="bi bi-bag-check-fill" style="color:#15803d;font-size:1.1rem;"></i>
+      <div class="stat-card">
+        <div class="card-body">
+          <div class="d-flex align-items-center justify-content-between mb-2">
+            <span class="stat-label">총 주문 수</span>
+            <div class="stat-icon" style="background:#dcfce7;">
+              <i class="bi bi-bag-check-fill" style="color:#15803d;"></i>
             </div>
           </div>
-          <div class="fw-bold" style="font-size:2rem;color:#0f172a;" th:text="${orderCount}">0</div>
-          <div class="text-muted mt-1" style="font-size:0.78rem;">전체 주문 건수</div>
+          <div class="stat-value" th:text="${orderCount}">0</div>
+          <div class="stat-desc">전체 주문 건수</div>
         </div>
-        <div style="height:4px;background:linear-gradient(90deg,#15803d,#4ade80);"></div>
+        <div class="stat-bar" style="background:linear-gradient(90deg,#15803d,#4ade80);"></div>
       </div>
     </div>
   </div>
 
-  <!-- 바로가기 -->
-  <div class="card border-0 shadow-sm" style="border-radius:14px;">
-    <div class="card-body p-4">
-      <div class="fw-semibold mb-3" style="font-size:0.9rem;color:#374151;">빠른 이동</div>
-      <div class="d-flex gap-3">
-        <a th:href="@{/admin/users}"
-           class="btn btn-sm d-flex align-items-center gap-2"
-           style="background:#f8fafc;border:1px solid #e2e8f0;color:#374151;border-radius:8px;padding:8px 16px;font-size:0.85rem;font-weight:500;">
-          <i class="bi bi-people-fill" style="color:#7c3aed;"></i> 유저 관리
-        </a>
-        <a th:href="@{/admin/posts}"
-           class="btn btn-sm d-flex align-items-center gap-2"
-           style="background:#f8fafc;border:1px solid #e2e8f0;color:#374151;border-radius:8px;padding:8px 16px;font-size:0.85rem;font-weight:500;">
-          <i class="bi bi-card-list" style="color:#1d4ed8;"></i> 분철글 관리
-        </a>
-      </div>
+  <div class="quick-card">
+    <div class="section-title">빠른 이동</div>
+    <div class="d-flex gap-2">
+      <a th:href="@{/admin/users}" class="quick-link">
+        <i class="bi bi-people-fill" style="color:#7c3aed;"></i> 유저 관리
+      </a>
+      <a th:href="@{/admin/posts}" class="quick-link">
+        <i class="bi bi-card-list" style="color:#1d4ed8;"></i> 분철글 관리
+      </a>
     </div>
   </div>
 </section>
diff --git a/src/main/resources/templates/admin/layout.html b/src/main/resources/templates/admin/layout.html
index 17d3ee6..bfeb684 100644
--- a/src/main/resources/templates/admin/layout.html
+++ b/src/main/resources/templates/admin/layout.html
@@ -6,152 +6,19 @@
   <title>POTI 어드민</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
-  <style>
-    :root {
-      --sidebar-bg: #0f172a;
-      --sidebar-hover: #1e293b;
-      --sidebar-active: #1e293b;
-      --accent: #6366f1;
-      --accent-light: #818cf8;
-    }
-
-    * { box-sizing: border-box; }
-    body { background: #f1f5f9; font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
-
-    .sidebar {
-      width: 240px;
-      min-height: 100vh;
-      background: var(--sidebar-bg);
-      display: flex;
-      flex-direction: column;
-      position: fixed;
-      top: 0; left: 0;
-      z-index: 100;
-    }
-
-    .sidebar-brand {
-      padding: 24px 20px 20px;
-      border-bottom: 1px solid #1e293b;
-    }
-    .sidebar-brand .brand-title {
-      color: #fff;
-      font-size: 1.1rem;
-      font-weight: 700;
-      letter-spacing: -0.3px;
-    }
-    .sidebar-brand .brand-sub {
-      color: #64748b;
-      font-size: 0.72rem;
-      margin-top: 2px;
-    }
-
-    .sidebar-nav { flex: 1; padding: 12px 12px 0; }
-
-    .nav-label {
-      color: #475569;
-      font-size: 0.65rem;
-      font-weight: 600;
-      letter-spacing: 0.08em;
-      text-transform: uppercase;
-      padding: 12px 8px 6px;
-    }
-
-    .sidebar-link {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      color: #94a3b8;
-      text-decoration: none;
-      padding: 10px 12px;
-      border-radius: 8px;
-      font-size: 0.88rem;
-      font-weight: 500;
-      transition: all 0.15s;
-      margin-bottom: 2px;
-    }
-    .sidebar-link i { font-size: 1rem; flex-shrink: 0; }
-    .sidebar-link:hover { background: var(--sidebar-hover); color: #e2e8f0; }
-    .sidebar-link.active {
-      background: var(--accent);
-      color: #fff;
-    }
-    .sidebar-link.active i { color: #fff; }
-
-    .sidebar-footer {
-      padding: 12px;
-      border-top: 1px solid #1e293b;
-    }
-    .sidebar-footer form button {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      width: 100%;
-      background: none;
-      border: none;
-      color: #64748b;
-      font-size: 0.85rem;
-      font-weight: 500;
-      padding: 10px 12px;
-      border-radius: 8px;
-      cursor: pointer;
-      text-align: left;
-      transition: all 0.15s;
-    }
-    .sidebar-footer form button:hover { background: #1e293b; color: #94a3b8; }
-
-    .main-wrapper {
-      margin-left: 240px;
-      min-height: 100vh;
-      display: flex;
-      flex-direction: column;
-    }
-
-    .topbar {
-      background: #fff;
-      border-bottom: 1px solid #e2e8f0;
-      padding: 16px 32px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-    .topbar-title {
-      font-size: 1.05rem;
-      font-weight: 700;
-      color: #0f172a;
-    }
-    .topbar-badge {
-      background: #f1f5f9;
-      color: #64748b;
-      font-size: 0.75rem;
-      padding: 4px 10px;
-      border-radius: 20px;
-      font-weight: 500;
-    }
-
-    .main-content { padding: 28px 32px; flex: 1; }
-
-    .alert-flash {
-      border: none;
-      border-radius: 10px;
-      font-size: 0.875rem;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      margin-bottom: 24px;
-    }
-  </style>
+  <link th:href="@{/css/admin.css}" rel="stylesheet">
 </head>
 <body>
 
 <th:block th:fragment="layout(content, currentPage)">
 <div class="d-flex">
+
   <!-- Sidebar -->
   <div class="sidebar">
     <div class="sidebar-brand">
       <div class="brand-title">🍵 POTI Admin</div>
       <div class="brand-sub">관리자 패널</div>
     </div>
-
     <nav class="sidebar-nav">
       <div class="nav-label">메뉴</div>
       <a th:href="@{/admin/dashboard}"
@@ -170,7 +37,6 @@
         <i class="bi bi-card-list"></i> 분철글 관리
       </a>
     </nav>
-
     <div class="sidebar-footer">
       <form th:action="@{/admin/logout}" method="post">
         <button type="submit">
@@ -184,11 +50,11 @@
   <div class="main-wrapper">
     <div class="topbar">
       <span class="topbar-title"
-            th:text="${currentPage == 'dashboard'} ? '대시보드' : (${currentPage == 'users'} ? '유저 관리' : '분철글 관리')">
+        th:text="${currentPage == 'dashboard'} ? '대시보드' :
+                 (${currentPage == 'users'} ? '유저 관리' : '분철글 관리')">
       </span>
       <span class="topbar-badge">POTI Admin</span>
     </div>
-
     <div class="main-content">
       <div th:if="${errorMessage}"
            class="alert alert-danger alert-flash alert-dismissible fade show" role="alert">
@@ -199,6 +65,7 @@
       <th:block th:replace="${content}"></th:block>
     </div>
   </div>
+
 </div>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 </th:block>
diff --git a/src/main/resources/templates/admin/posts.html b/src/main/resources/templates/admin/posts.html
index 46e256a..9c307bb 100644
--- a/src/main/resources/templates/admin/posts.html
+++ b/src/main/resources/templates/admin/posts.html
@@ -3,120 +3,48 @@
       th:replace="~{admin/layout :: layout(~{::section}, 'posts')}">
 <body>
 <section>
-  <style>
-    .filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
-    .filter-tab {
-      font-size: 0.8rem;
-      font-weight: 600;
-      padding: 6px 14px;
-      border-radius: 20px;
-      border: 1.5px solid #e2e8f0;
-      background: #fff;
-      color: #64748b;
-      text-decoration: none;
-      transition: all 0.15s;
-    }
-    .filter-tab:hover { border-color: #6366f1; color: #6366f1; }
-    .filter-tab.active { background: #6366f1; border-color: #6366f1; color: #fff; }
-
-    .post-table th {
-      font-size: 0.75rem;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-      color: #64748b;
-      background: #f8fafc;
-      border-bottom: 1px solid #e2e8f0;
-      padding: 12px 16px;
-    }
-    .post-table td {
-      padding: 14px 16px;
-      font-size: 0.875rem;
-      color: #1e293b;
-      vertical-align: middle;
-      border-bottom: 1px solid #f1f5f9;
-    }
-    .post-table tbody tr:hover { background: #f8fafc; }
-    .post-table tbody tr:last-child td { border-bottom: none; }
-
-    .badge-status {
-      font-size: 0.72rem;
-      font-weight: 600;
-      padding: 4px 10px;
-      border-radius: 20px;
-    }
-    .s-recruiting   { background: #dbeafe; color: #1d4ed8; }
-    .s-closed       { background: #fef9c3; color: #854d0e; }
-    .s-payment_done { background: #dcfce7; color: #15803d; }
-    .s-shipping     { background: #ede9fe; color: #6d28d9; }
-    .s-delivered    { background: #f1f5f9; color: #475569; }
-
-    .btn-delete {
-      font-size: 0.78rem;
-      font-weight: 600;
-      padding: 5px 12px;
-      border-radius: 7px;
-      border: none;
-      background: #fee2e2;
-      color: #b91c1c;
-      cursor: pointer;
-      transition: all 0.15s;
-    }
-    .btn-delete:hover { background: #fecaca; }
-
-    .empty-state { padding: 60px 0; text-align: center; color: #94a3b8; }
-    .empty-state i { font-size: 2.5rem; margin-bottom: 12px; display: block; }
-
-    .page-link { font-size: 0.82rem; color: #6366f1; }
-    .page-item.active .page-link { background: #6366f1; border-color: #6366f1; }
-    .page-item.disabled .page-link { pointer-events: none; }
-  </style>
-
-  <!-- 상태 필터 -->
   <div class="filter-tabs">
     <a th:href="@{/admin/posts}"
        class="filter-tab"
-       th:classappend="${selectedStatus == null} ? ' active'">전체</a>
+       th:classappend="${selectedStatus == null} ? ' is-active'">전체</a>
     <a th:each="s : ${statuses}"
        th:href="@{/admin/posts(status=${s})}"
        class="filter-tab"
-       th:classappend="${s == selectedStatus} ? ' active'"
+       th:classappend="${s == selectedStatus} ? ' is-active'"
        th:text="${s.sellerMessage}"></a>
   </div>
 
-  <div class="card border-0 shadow-sm" style="border-radius:14px;overflow:hidden;">
-    <div class="card-body p-0">
-      <table class="table post-table mb-0">
-        <thead>
+  <div class="table-card">
+    <table class="table admin-table mb-0">
+      <thead>
         <tr>
-          <th style="width:60px;">ID</th>
+          <th style="width:56px;">ID</th>
           <th>제목</th>
-          <th style="width:100px;">아티스트</th>
-          <th style="width:100px;">모집자</th>
-          <th style="width:110px;">상태</th>
-          <th style="width:100px;">등록일</th>
-          <th style="width:80px;">관리</th>
+          <th style="width:96px;">아티스트</th>
+          <th style="width:96px;">모집자</th>
+          <th style="width:104px;">상태</th>
+          <th style="width:96px;">등록일</th>
+          <th style="width:72px;">관리</th>
         </tr>
-        </thead>
-        <tbody>
+      </thead>
+      <tbody>
         <tr th:each="post : ${posts.content}">
-          <td class="text-muted" style="font-size:0.78rem;" th:text="${post.id}"></td>
-          <td><span class="fw-semibold" th:text="${post.title}"></span></td>
-          <td class="text-muted" style="font-size:0.82rem;" th:text="${post.artist.name}"></td>
-          <td style="font-size:0.82rem;" th:text="${post.leader.nickname}"></td>
+          <td class="cell-id" th:text="${post.id}"></td>
+          <td><strong th:text="${post.title}"></strong></td>
+          <td class="cell-sub" th:text="${post.artist.name}"></td>
+          <td class="cell-sub" th:text="${post.leader.nickname}"></td>
           <td>
-            <span class="badge-status"
-                  th:classappend="'s-' + ${post.status.name().toLowerCase()}"
+            <span class="badge-pill"
+                  th:classappend="'status-' + ${post.status.name().toLowerCase()}"
                   th:text="${post.status.sellerMessage}"></span>
           </td>
-          <td class="text-muted" style="font-size:0.78rem;"
-              th:text="${#temporals.format(post.createdAt, 'yyyy.MM.dd')}"></td>
+          <td class="cell-sub" th:text="${#temporals.format(post.createdAt, 'yyyy.MM.dd')}"></td>
           <td>
             <form th:action="@{/admin/posts/{id}/delete(id=${post.id})}" method="post">
-              <button type="button" class="btn-delete"
+              <button type="button" class="btn-action btn-delete"
                       th:attr="data-title=${post.title}, data-status=${post.status.name()}"
                       onclick="confirmDelete(this)">삭제</button>
-              <button type="submit" class="d-none confirm-submit"></button>
+              <button type="submit" class="d-none js-submit"></button>
             </form>
           </td>
         </tr>
@@ -124,22 +52,20 @@
           <td colspan="7">
             <div class="empty-state">
               <i class="bi bi-card-list"></i>
-              <div style="font-size:0.9rem;">분철글이 없습니다.</div>
+              <p>분철글이 없습니다.</p>
             </div>
           </td>
         </tr>
-        </tbody>
-      </table>
-    </div>
+      </tbody>
+    </table>
   </div>
 
-  <!-- Pagination -->
-  <nav th:if="${posts.totalPages > 1}" class="mt-4">
-    <ul class="pagination pagination-sm justify-content-center mb-0">
+  <nav th:if="${posts.totalPages > 1}" class="mt-3 d-flex justify-content-center">
+    <ul class="pagination pagination-sm mb-0">
       <li class="page-item" th:classappend="${posts.first} ? 'disabled'">
-        <a class="page-link rounded-start-3"
+        <a class="page-link"
            th:href="${posts.first} ? '#' : @{/admin/posts(status=${selectedStatus}, page=${posts.number - 1})}">
-          <i class="bi bi-chevron-left" style="font-size:0.7rem;"></i>
+          <i class="bi bi-chevron-left" style="font-size:0.65rem;"></i>
         </a>
       </li>
       <li class="page-item"
@@ -150,9 +76,9 @@
            th:text="${i + 1}"></a>
       </li>
       <li class="page-item" th:classappend="${posts.last} ? 'disabled'">
-        <a class="page-link rounded-end-3"
+        <a class="page-link"
            th:href="${posts.last} ? '#' : @{/admin/posts(status=${selectedStatus}, page=${posts.number + 1})}">
-          <i class="bi bi-chevron-right" style="font-size:0.7rem;"></i>
+          <i class="bi bi-chevron-right" style="font-size:0.65rem;"></i>
         </a>
       </li>
     </ul>
@@ -160,13 +86,11 @@
 
   <script>
     function confirmDelete(btn) {
-      const title = btn.dataset.title;
-      const status = btn.dataset.status;
-      const msg = status === 'RECRUITING'
-        ? `「${title}」을 삭제하시겠습니까?\n이 작업은 되돌릴 수 없습니다.`
-        : `「${title}」은 현재 진행 중인 분철글입니다.\n정말 삭제하시겠습니까?`;
+      const msg = btn.dataset.status === 'RECRUITING'
+        ? '「' + btn.dataset.title + '」을 삭제하시겠습니까?\n이 작업은 되돌릴 수 없습니다.'
+        : '「' + btn.dataset.title + '」은 현재 진행 중인 분철글입니다.\n정말 삭제하시겠습니까?';
       if (confirm(msg)) {
-        btn.closest('form').querySelector('.confirm-submit').click();
+        btn.closest('form').querySelector('.js-submit').click();
       }
     }
   </script>
diff --git a/src/main/resources/templates/admin/users.html b/src/main/resources/templates/admin/users.html
index 1b974be..f6a53e6 100644
--- a/src/main/resources/templates/admin/users.html
+++ b/src/main/resources/templates/admin/users.html
@@ -3,117 +3,54 @@
       th:replace="~{admin/layout :: layout(~{::section}, 'users')}">
 <body>
 <section>
-  <style>
-    .user-table th {
-      font-size: 0.75rem;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-      color: #64748b;
-      background: #f8fafc;
-      border-bottom: 1px solid #e2e8f0;
-      padding: 12px 16px;
-    }
-    .user-table td {
-      padding: 14px 16px;
-      font-size: 0.875rem;
-      color: #1e293b;
-      vertical-align: middle;
-      border-bottom: 1px solid #f1f5f9;
-    }
-    .user-table tbody tr:hover { background: #f8fafc; }
-    .user-table tbody tr:last-child td { border-bottom: none; }
-
-    .badge-status {
-      font-size: 0.72rem;
-      font-weight: 600;
-      padding: 4px 10px;
-      border-radius: 20px;
-    }
-    .badge-active    { background: #dcfce7; color: #15803d; }
-    .badge-suspended { background: #fee2e2; color: #b91c1c; }
-    .badge-withdrawn { background: #f1f5f9; color: #94a3b8; }
-
-    .badge-social {
-      font-size: 0.7rem;
-      font-weight: 600;
-      padding: 3px 8px;
-      border-radius: 6px;
-      background: #fef9c3;
-      color: #854d0e;
-    }
-
-    .action-btn {
-      font-size: 0.78rem;
-      font-weight: 600;
-      padding: 5px 12px;
-      border-radius: 7px;
-      border: none;
-      cursor: pointer;
-      transition: all 0.15s;
-      white-space: nowrap;
-    }
-    .btn-suspend    { background: #fee2e2; color: #b91c1c; }
-    .btn-suspend:hover { background: #fecaca; }
-    .btn-unsuspend  { background: #dcfce7; color: #15803d; }
-    .btn-unsuspend:hover { background: #bbf7d0; }
-    .btn-withdraw   { background: #f1f5f9; color: #64748b; }
-    .btn-withdraw:hover { background: #e2e8f0; }
-
-    .empty-state { padding: 60px 0; text-align: center; color: #94a3b8; }
-    .empty-state i { font-size: 2.5rem; margin-bottom: 12px; display: block; }
-
-    .page-link { font-size: 0.82rem; color: #6366f1; }
-    .page-item.active .page-link { background: #6366f1; border-color: #6366f1; }
-    .page-item.disabled .page-link { pointer-events: none; }
-  </style>
-
-  <div class="card border-0 shadow-sm" style="border-radius:14px;overflow:hidden;">
-    <div class="card-body p-0">
-      <table class="table user-table mb-0">
-        <thead>
+  <div class="table-card">
+    <table class="table admin-table mb-0">
+      <thead>
         <tr>
-          <th style="width:60px;">ID</th>
+          <th style="width:56px;">ID</th>
           <th>닉네임</th>
           <th>이메일</th>
-          <th style="width:80px;">소셜</th>
-          <th style="width:90px;">상태</th>
-          <th style="width:100px;">가입일</th>
-          <th style="width:160px;">관리</th>
+          <th style="width:72px;">소셜</th>
+          <th style="width:80px;">상태</th>
+          <th style="width:96px;">가입일</th>
+          <th style="width:156px;">관리</th>
         </tr>
-        </thead>
-        <tbody>
+      </thead>
+      <tbody>
         <tr th:each="user : ${users.content}">
-          <td class="text-muted" style="font-size:0.78rem;" th:text="${user.id}"></td>
-          <td><span class="fw-semibold" th:text="${user.nickname}"></span></td>
-          <td class="text-muted" th:text="${user.email}"></td>
-          <td><span class="badge-social" th:text="${user.socialType}"></span></td>
+          <td class="cell-id" th:text="${user.id}"></td>
+          <td><strong th:text="${user.nickname}"></strong></td>
+          <td class="cell-sub" th:text="${user.email}"></td>
           <td>
-            <span th:if="${user.status.name() == 'ACTIVE'}"    class="badge-status badge-active">활성</span>
-            <span th:if="${user.status.name() == 'SUSPENDED'}" class="badge-status badge-suspended">정지</span>
-            <span th:if="${user.status.name() == 'WITHDRAWN'}" class="badge-status badge-withdrawn">탈퇴</span>
+            <span class="badge-pill badge-kakao" th:text="${user.socialType}"></span>
           </td>
           <td class="text-muted" style="font-size:0.78rem;"
               th:text="${#temporals.format(user.createdAt, 'yyyy.MM.dd')}"></td>
+          <td>
+            <span th:if="${user.status.name() == 'ACTIVE'}"    class="badge-pill badge-active">활성</span>
+            <span th:if="${user.status.name() == 'SUSPENDED'}" class="badge-pill badge-suspended">정지</span>
+            <span th:if="${user.status.name() == 'WITHDRAWN'}" class="badge-pill badge-withdrawn">탈퇴</span>
+          </td>
+          <td class="cell-sub" th:text="${#temporals.format(user.createdAt, 'yyyy.MM.dd')}"></td>
           <td>
             <div class="d-flex gap-1">
               <form th:if="${user.status.name() == 'ACTIVE'}"
                     th:action="@{/admin/users/{id}/suspend(id=${user.id})}" method="post">
-                <button type="button" class="action-btn btn-suspend"
+                <button type="button" class="btn-action btn-suspend"
                         th:attr="data-name=${user.nickname}"
                         onclick="confirmSuspend(this)">정지</button>
-                <button type="submit" class="d-none confirm-submit"></button>
+                <button type="submit" class="d-none js-submit"></button>
               </form>
               <form th:if="${user.status.name() == 'SUSPENDED'}"
                     th:action="@{/admin/users/{id}/unsuspend(id=${user.id})}" method="post">
-                <button type="submit" class="action-btn btn-unsuspend">정지 해제</button>
+                <button type="submit" class="btn-action btn-release">정지 해제</button>
               </form>
               <form th:if="${user.status.name() != 'WITHDRAWN'}"
                     th:action="@{/admin/users/{id}/withdraw(id=${user.id})}" method="post">
-                <button type="button" class="action-btn btn-withdraw"
+                <button type="button" class="btn-action btn-withdraw"
                         th:attr="data-name=${user.nickname}"
                         onclick="confirmWithdraw(this)">강제 탈퇴</button>
-                <button type="submit" class="d-none confirm-submit"></button>
+                <button type="submit" class="d-none js-submit"></button>
               </form>
             </div>
           </td>
@@ -122,22 +59,20 @@
           <td colspan="7">
             <div class="empty-state">
               <i class="bi bi-people"></i>
-              <div style="font-size:0.9rem;">유저가 없습니다.</div>
+              <p>유저가 없습니다.</p>
             </div>
           </td>
         </tr>
-        </tbody>
-      </table>
-    </div>
+      </tbody>
+    </table>
   </div>
 
-  <!-- Pagination -->
-  <nav th:if="${users.totalPages > 1}" class="mt-4">
-    <ul class="pagination pagination-sm justify-content-center mb-0">
+  <nav th:if="${users.totalPages > 1}" class="mt-3 d-flex justify-content-center">
+    <ul class="pagination pagination-sm mb-0">
       <li class="page-item" th:classappend="${users.first} ? 'disabled'">
-        <a class="page-link rounded-start-3"
+        <a class="page-link"
            th:href="${users.first} ? '#' : @{/admin/users(page=${users.number - 1})}">
-          <i class="bi bi-chevron-left" style="font-size:0.7rem;"></i>
+          <i class="bi bi-chevron-left" style="font-size:0.65rem;"></i>
         </a>
       </li>
       <li class="page-item"
@@ -148,9 +83,9 @@
            th:text="${i + 1}"></a>
       </li>
       <li class="page-item" th:classappend="${users.last} ? 'disabled'">
-        <a class="page-link rounded-end-3"
+        <a class="page-link"
            th:href="${users.last} ? '#' : @{/admin/users(page=${users.number + 1})}">
-          <i class="bi bi-chevron-right" style="font-size:0.7rem;"></i>
+          <i class="bi bi-chevron-right" style="font-size:0.65rem;"></i>
         </a>
       </li>
     </ul>
@@ -158,15 +93,13 @@
 
   <script>
     function confirmSuspend(btn) {
-      const name = btn.dataset.name;
-      if (confirm(`"${name}" 유저를 이용 정지하시겠습니까?`)) {
-        btn.closest('form').querySelector('.confirm-submit').click();
+      if (confirm('"' + btn.dataset.name + '" 유저를 이용 정지하시겠습니까?')) {
+        btn.closest('form').querySelector('.js-submit').click();
       }
     }
     function confirmWithdraw(btn) {
-      const name = btn.dataset.name;
-      if (confirm(`"${name}" 유저를 강제 탈퇴 처리하시겠습니까?\n이 작업은 되돌릴 수 없습니다.`)) {
-        btn.closest('form').querySelector('.confirm-submit').click();
+      if (confirm('"' + btn.dataset.name + '" 유저를 강제 탈퇴 처리하시겠습니까?\n이 작업은 되돌릴 수 없습니다.')) {
+        btn.closest('form').querySelector('.js-submit').click();
       }
     }
   </script>