diff --git a/src/components/layout/AppLayout.module.css b/src/components/layout/AppLayout.module.css
index 52d2021..5d1a894 100644
--- a/src/components/layout/AppLayout.module.css
+++ b/src/components/layout/AppLayout.module.css
@@ -178,6 +178,22 @@
   overflow-y: auto;
 }
 
+.contentDashboard {
+  padding-top: 18px;
+}
+
+.contentWorkInbox {
+  padding-bottom: 0;
+  overflow: hidden;
+}
+
+@media (max-width: 1180px) {
+  .contentWorkInbox {
+    padding-bottom: 32px;
+    overflow-y: auto;
+  }
+}
+
 @media (max-width: 768px) {
   .topBar {
     padding: 12px 16px;
@@ -189,4 +205,12 @@
     padding: 16px;
     overflow-y: visible;
   }
+
+  .contentWorkInbox {
+    padding-bottom: 16px;
+  }
+
+  .contentDashboard {
+    padding-top: 16px;
+  }
 }
diff --git a/src/components/layout/AppLayout.test.tsx b/src/components/layout/AppLayout.test.tsx
index 502fcea..d17708d 100644
--- a/src/components/layout/AppLayout.test.tsx
+++ b/src/components/layout/AppLayout.test.tsx
@@ -35,7 +35,7 @@ afterEach(() => {
 })
 
 describe('AppLayout', () => {
-  it('renders the FOWOCO logo and every nav item', () => {
+  it('renders the current global navigation without a workers tab', () => {
     localStorage.setItem('fowoco.onboarding.completed', 'true')
     renderLayout()
 
@@ -43,6 +43,7 @@ describe('AppLayout', () => {
     for (const item of NAV_ITEMS) {
       expect(screen.getByRole('link', { name: item.label })).toBeInTheDocument()
     }
+    expect(screen.queryByRole('link', { name: '근로자' })).not.toBeInTheDocument()
   })
 
   it('opens and closes the help modal', async () => {
diff --git a/src/components/layout/AppLayout.tsx b/src/components/layout/AppLayout.tsx
index 3fd9957..9e9dabc 100644
--- a/src/components/layout/AppLayout.tsx
+++ b/src/components/layout/AppLayout.tsx
@@ -18,6 +18,8 @@ export function AppLayout() {
   const [helpOpen, setHelpOpen] = useState(false)
   const [tourOpen, setTourOpen] = useState(false)
   const isTaskDetail = /^\/tasks\/[^/]+$/.test(location.pathname)
+  const isWorkInbox = location.pathname === '/tasks'
+  const isDashboard = location.pathname === '/dashboard'
 
   useEffect(() => {
     if (!hasCompletedOnboarding()) setTourOpen(true)
@@ -78,7 +80,11 @@ export function AppLayout() {
           </div>
         </header>
 
-        <main className={styles.content}>
+        <main
+          className={`${styles.content} ${isWorkInbox ? styles.contentWorkInbox : ''} ${
+            isDashboard ? styles.contentDashboard : ''
+          }`}
+        >
           <RouteTransition />
         </main>
       </div>
diff --git a/src/components/layout/navItems.ts b/src/components/layout/navItems.ts
index c48ece5..c6c56fa 100644
--- a/src/components/layout/navItems.ts
+++ b/src/components/layout/navItems.ts
@@ -2,7 +2,6 @@ import documentsIcon from './nav-icons/documents.svg'
 import settingsIcon from './nav-icons/settings.svg'
 import todayIcon from './nav-icons/today.svg'
 import workIcon from './nav-icons/work.svg'
-import workersIcon from './nav-icons/workers.svg'
 
 export interface NavItem {
   label: string
@@ -10,13 +9,12 @@ export interface NavItem {
   iconSrc: string
 }
 
-// Figma PWF v3 사이드바(Aside - SideNavBar, 05_Desktop Core Product 전 화면 공통)는 5개 메뉴만
-// 정의한다. Agent/티켓 메뉴는 Figma에 없는 화면이라(#206) 링크만 제거하고 라우트는 유지한다.
+// 공용 사이드바에는 주요 운영 진입점만 노출한다. 근로자 기능은 업무·문서 흐름에서
+// 컨텍스트로 진입하므로 전역 탭에서는 제외하고, 딥링크와 관련 라우트는 유지한다.
 // SettingsPage는 제거되어 "설정" 메뉴는 내 프로필 페이지로 연결된다.
 export const NAV_ITEMS: NavItem[] = [
   { label: 'Today', to: '/dashboard', iconSrc: todayIcon },
   { label: '업무함', to: '/tasks', iconSrc: workIcon },
-  { label: '근로자', to: '/workers', iconSrc: workersIcon },
   { label: '문서함', to: '/documents', iconSrc: documentsIcon },
   { label: '설정', to: '/profile', iconSrc: settingsIcon },
 ]
diff --git a/src/components/ui/SearchInput/SearchInput.module.css b/src/components/ui/SearchInput/SearchInput.module.css
index 434632f..7104eb1 100644
--- a/src/components/ui/SearchInput/SearchInput.module.css
+++ b/src/components/ui/SearchInput/SearchInput.module.css
@@ -1,15 +1,42 @@
-.search {
+.field {
+  display: flex;
+  align-items: center;
+  gap: 7px;
   flex: 1 1 240px;
   max-width: 520px;
   height: 48px;
   padding: 0 var(--fowoco-spacing-16);
-  font-size: 14px;
-  font-family: inherit;
+  overflow: hidden;
+  background: var(--surface-default);
   border: 1px solid var(--border-default);
   border-radius: var(--fowoco-radius-6);
 }
 
-.search:focus-visible {
+.field:focus-within {
   outline: 2px solid var(--brand-primary);
   outline-offset: 2px;
 }
+
+.icon {
+  flex: 0 0 16px;
+  width: 16px;
+  height: 16px;
+}
+
+.search {
+  min-width: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  outline: 0;
+  font-family: inherit;
+  font-size: 14px;
+  color: var(--text-primary);
+}
+
+.search::placeholder {
+  color: var(--text-secondary);
+  opacity: 1;
+}
diff --git a/src/components/ui/SearchInput/SearchInput.tsx b/src/components/ui/SearchInput/SearchInput.tsx
index e7162aa..d619e42 100644
--- a/src/components/ui/SearchInput/SearchInput.tsx
+++ b/src/components/ui/SearchInput/SearchInput.tsx
@@ -1,4 +1,5 @@
 import type { ChangeEvent } from 'react'
+import searchIcon from './search.svg'
 import styles from './SearchInput.module.css'
 
 export interface SearchInputProps {
@@ -21,12 +22,15 @@ export function SearchInput({
   }
 
   return (
-    <input
-      className={`${styles.search} ${className ?? ''}`}
-      placeholder={placeholder}
-      value={value}
-      onChange={handleChange}
-      aria-label={ariaLabel}
-    />
+    <label className={`${styles.field} ${className ?? ''}`}>
+      <img className={styles.icon} src={searchIcon} alt="" aria-hidden="true" />
+      <input
+        className={styles.search}
+        placeholder={placeholder}
+        value={value}
+        onChange={handleChange}
+        aria-label={ariaLabel}
+      />
+    </label>
   )
 }
diff --git a/src/components/ui/SearchInput/search.svg b/src/components/ui/SearchInput/search.svg
new file mode 100644
index 0000000..5cdb1c6
--- /dev/null
+++ b/src/components/ui/SearchInput/search.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 7C11.5 7.59095 11.3836 8.17611 11.1575 8.72208C10.9313 9.26804 10.5998 9.76412 10.182 10.182C9.76412 10.5998 9.26804 10.9313 8.72208 11.1575C8.17611 11.3836 7.59095 11.5 7 11.5C6.40905 11.5 5.82389 11.3836 5.27792 11.1575C4.73196 10.9313 4.23588 10.5998 3.81802 10.182C3.40016 9.76412 3.06869 9.26804 2.84254 8.72208C2.6164 8.17611 2.5 7.59095 2.5 7C2.5 5.80653 2.97411 4.66193 3.81802 3.81802C4.66193 2.97411 5.80653 2.5 7 2.5C8.19347 2.5 9.33807 2.97411 10.182 3.81802C11.0259 4.66193 11.5 5.80653 11.5 7ZM10.68 11.74C9.47438 12.676 7.95737 13.1173 6.4378 12.9741C4.91823 12.831 3.51034 12.1141 2.50075 10.9694C1.49115 9.82471 0.955751 8.3383 1.00354 6.81275C1.05132 5.2872 1.6787 3.83721 2.75795 2.75795C3.83721 1.6787 5.2872 1.05132 6.81275 1.00354C8.3383 0.955751 9.82471 1.49115 10.9694 2.50075C12.1141 3.51034 12.831 4.91823 12.9741 6.4378C13.1173 7.95737 12.676 9.47438 11.74 10.68L14.53 13.47C14.6037 13.5387 14.6628 13.6215 14.7038 13.7135C14.7448 13.8055 14.7668 13.9048 14.7686 14.0055C14.7704 14.1062 14.7518 14.2062 14.7141 14.2996C14.6764 14.393 14.6203 14.4778 14.549 14.549C14.4778 14.6203 14.393 14.6764 14.2996 14.7141C14.2062 14.7518 14.1062 14.7704 14.0055 14.7686C13.9048 14.7668 13.8055 14.7448 13.7135 14.7038C13.6215 14.6628 13.5387 14.6037 13.47 14.53L10.68 11.74Z" fill="#5F6F72"/>
+</svg>
diff --git a/src/components/ui/WorkItemRow/WorkItemRow.module.css b/src/components/ui/WorkItemRow/WorkItemRow.module.css
index 0a54620..38ba993 100644
--- a/src/components/ui/WorkItemRow/WorkItemRow.module.css
+++ b/src/components/ui/WorkItemRow/WorkItemRow.module.css
@@ -2,7 +2,9 @@
   display: flex;
   align-items: center;
   gap: var(--fowoco-spacing-16);
-  padding: var(--fowoco-spacing-16) var(--fowoco-spacing-20);
+  width: 100%;
+  min-height: 56px;
+  padding: 8px var(--fowoco-spacing-20);
   background: var(--surface-default);
   border: 1px solid var(--border-default);
   border-radius: var(--fowoco-radius-8);
@@ -36,7 +38,7 @@
 .rail {
   flex-shrink: 0;
   width: 4px;
-  height: 44px;
+  height: 40px;
   border-radius: var(--fowoco-radius-4);
   background: var(--status-warning);
 }
@@ -45,6 +47,10 @@
   background: var(--status-critical);
 }
 
+.railInfo {
+  background: #3976d3;
+}
+
 .railNeutral {
   background: var(--border-default);
 }
@@ -53,8 +59,8 @@
   flex: 1;
   min-width: 0;
   display: flex;
-  flex-direction: column;
-  gap: var(--fowoco-spacing-4);
+  align-items: center;
+  gap: 12px;
 }
 
 .title {
@@ -62,6 +68,48 @@
   font-size: 14px;
   font-weight: 500;
   color: var(--text-primary);
+  white-space: nowrap;
+}
+
+.inlineMeta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.status {
+  display: inline-flex;
+  align-items: center;
+  min-height: 26px;
+  padding: 4px 8px;
+  border-radius: var(--fowoco-radius-999);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.statusWarning {
+  color: var(--status-warning);
+  background: var(--fowoco-amber-50);
+}
+
+.statusPrimary {
+  color: var(--brand-primary);
+  background: var(--fowoco-teal-50);
+}
+
+.statusNeutral {
+  color: var(--text-secondary);
+  background: var(--surface-subtle);
+}
+
+.detailItem {
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--text-secondary);
+  white-space: nowrap;
 }
 
 .meta {
@@ -72,8 +120,35 @@
 
 .next {
   flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 120px;
+  height: 40px;
+  padding: 8px 16px;
+  border: 1px solid var(--border-default);
+  border-radius: var(--fowoco-radius-6);
   font-family: var(--font-sans);
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 500;
-  color: var(--brand-primary);
+  color: var(--text-primary);
+  background: var(--surface-default);
+}
+
+@media (max-width: 720px) {
+  .content {
+    flex: 1 1 calc(100% - 20px);
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .inlineMeta {
+    flex-wrap: wrap;
+  }
+
+  .next {
+    flex-basis: auto;
+    width: 100%;
+  }
 }
diff --git a/src/components/ui/WorkItemRow/WorkItemRow.tsx b/src/components/ui/WorkItemRow/WorkItemRow.tsx
index ba56a8e..1505b31 100644
--- a/src/components/ui/WorkItemRow/WorkItemRow.tsx
+++ b/src/components/ui/WorkItemRow/WorkItemRow.tsx
@@ -1,16 +1,28 @@
 import styles from './WorkItemRow.module.css'
 
-export type WorkItemUrgency = 'warning' | 'critical' | 'neutral'
+export type WorkItemUrgency = 'warning' | 'critical' | 'info' | 'neutral'
 
 const RAIL_CLASS: Record<WorkItemUrgency, string> = {
   warning: '',
   critical: styles.railCritical,
+  info: styles.railInfo,
   neutral: styles.railNeutral,
 }
 
+export type WorkItemStatusTone = 'warning' | 'primary' | 'neutral'
+
+const STATUS_CLASS: Record<WorkItemStatusTone, string> = {
+  warning: styles.statusWarning,
+  primary: styles.statusPrimary,
+  neutral: styles.statusNeutral,
+}
+
 export interface WorkItemRowProps {
   title: string
-  meta: string
+  meta?: string
+  statusLabel?: string
+  statusTone?: WorkItemStatusTone
+  detailItems?: string[]
   nextAction: string
   urgency?: WorkItemUrgency
   onClick?: () => void
@@ -19,6 +31,9 @@ export interface WorkItemRowProps {
 export function WorkItemRow({
   title,
   meta,
+  statusLabel,
+  statusTone = 'neutral',
+  detailItems = [],
   nextAction,
   urgency = 'warning',
   onClick,
@@ -28,7 +43,22 @@ export function WorkItemRow({
       <span className={`${styles.rail} ${RAIL_CLASS[urgency]}`} aria-hidden="true" />
       <span className={styles.content}>
         <span className={styles.title}>{title}</span>
-        <span className={styles.meta}>{meta}</span>
+        {statusLabel || detailItems.length > 0 ? (
+          <span className={styles.inlineMeta}>
+            {statusLabel && (
+              <span className={`${styles.status} ${STATUS_CLASS[statusTone]}`}>
+                {statusLabel}
+              </span>
+            )}
+            {detailItems.map((item) => (
+              <span key={item} className={styles.detailItem}>
+                {item}
+              </span>
+            ))}
+          </span>
+        ) : (
+          <span className={styles.meta}>{meta}</span>
+        )}
       </span>
       <span className={styles.next}>{nextAction}</span>
     </button>
diff --git a/src/pages/DashboardPage/DashboardPage.module.css b/src/pages/DashboardPage/DashboardPage.module.css
index cd61077..cddaebd 100644
--- a/src/pages/DashboardPage/DashboardPage.module.css
+++ b/src/pages/DashboardPage/DashboardPage.module.css
@@ -1,339 +1,574 @@
-.stateWrap {
-  margin-top: 24px;
+.page {
+  width: 100%;
+  min-width: 0;
+  font-family: var(--font-sans);
+}
+
+.pageHeader {
+  margin-left: 5px;
 }
 
 .headline {
   margin: 0;
   font-size: 28px;
   font-weight: 700;
+  line-height: 36px;
   color: var(--text-primary);
 }
 
 .description {
-  margin: 8px 0 0;
+  margin: 0;
   font-size: 14px;
+  line-height: 22px;
   color: var(--text-secondary);
 }
 
-.commandBox {
-  margin-top: 24px;
-  padding: 19px;
-  background: var(--fowoco-teal-50);
-  border: 1px solid var(--border-default);
+.agentRequest {
+  height: 144px;
+  margin-top: 19px;
+  padding: 13px 13px 12px;
+  overflow: hidden;
+  background: #f4faf9;
+  border: 1px solid #95cecb;
   border-radius: var(--fowoco-radius-8);
 }
 
-.commandBoxHeader {
+.agentRequestTitle {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  margin-bottom: 12px;
+  gap: 5px;
+  height: 22px;
 }
 
-.commandBoxTitle {
-  font-size: 13px;
-  font-weight: 700;
-  color: var(--brand-primary);
+.agentRequestTitle img,
+.agentPreparedTitle img {
+  flex: 0 0 auto;
+  width: 20px;
+  height: 20px;
 }
 
-.commandBoxChevron {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
+.agentRequestTitle h2 {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 21px;
   color: var(--brand-primary);
 }
 
 .commandInput {
   display: flex;
   align-items: center;
-  width: 100%;
-  padding: 15px 19px;
-  background: var(--surface-default);
-  border: 1px solid var(--border-default);
-  border-radius: var(--fowoco-radius-8);
+  justify-content: space-between;
+  width: calc(100% - 37px);
+  height: 40px;
+  margin: 6px 18px 0;
+  padding: 3px 13px;
+  overflow: hidden;
+  background: rgba(207, 227, 227, 0.7);
+  border: 0;
+  border-radius: 21px;
   font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 22px;
+  color: #465b5d;
+  text-align: left;
   cursor: pointer;
 }
 
-.commandPlaceholder {
-  font-size: 14px;
-  color: var(--text-secondary);
+.commandInput span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.commandInput img {
+  flex: 0 0 auto;
+  width: 18px;
+  height: 18px;
 }
 
 .promptChips {
   display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 12px;
+  align-items: center;
+  gap: 10px;
+  margin: 6px 25px 0;
 }
 
 .promptChip {
-  padding: 7px 14px;
-  background: var(--surface-default);
-  border: none;
-  border-radius: var(--fowoco-radius-999);
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--brand-primary);
+  height: 24px;
+  padding: 2px 5px;
+  background: var(--surface-subtle);
+  border: 0;
+  border-radius: var(--fowoco-radius-8);
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 20px;
+  color: var(--text-secondary);
+  white-space: nowrap;
   cursor: pointer;
 }
 
-.metricStrip {
+.dashboardGrid {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 16px;
+  grid-template-columns: minmax(0, 767px) minmax(0, 359px);
+  gap: 26px;
   margin-top: 16px;
 }
 
-@media (max-width: 720px) {
-  .metricStrip {
-    grid-template-columns: repeat(2, 1fr);
-  }
+.primaryColumn {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+}
+
+.metricStrip {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 30px;
+  height: 72px;
 }
 
 .metricCard {
   display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 16px 19px;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 0;
+  height: 72px;
+  padding: 16px;
   background: var(--surface-default);
   border: 1px solid var(--border-default);
   border-radius: var(--fowoco-radius-8);
+  font-family: inherit;
   text-align: left;
   cursor: pointer;
 }
 
+.metricText {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  height: 40px;
+  white-space: nowrap;
+}
+
 .metricLabel {
   font-size: 12px;
+  font-weight: 500;
+  line-height: 18px;
   color: var(--text-secondary);
 }
 
-.metricValueRow {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
 .metricValue {
-  font-size: 20px;
+  font-size: 16px;
   font-weight: 700;
+  line-height: 22px;
   color: var(--text-primary);
 }
 
 .metricIcon {
-  width: 20px;
-  height: 20px;
-  color: var(--brand-primary);
+  display: flex;
+  flex: 0 0 32px;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--fowoco-radius-8);
 }
 
-.mainGrid {
-  display: grid;
-  grid-template-columns: 1fr 340px;
-  gap: 16px;
-  margin-top: 40px;
-  align-items: start;
+.metricIcon img {
+  width: 18px;
+  height: 18px;
 }
 
-@media (max-width: 960px) {
-  .mainGrid {
-    grid-template-columns: 1fr;
-  }
+.metricIcon_warning {
+  background: var(--fowoco-amber-50);
+}
 
-  .commandInput {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 8px;
-  }
+.metricIcon_info {
+  background: var(--surface-subtle);
 }
 
-.mainColumn {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
+.metricIcon_critical {
+  background: var(--fowoco-red-50);
 }
 
-.topApprovalCard {
-  padding: 19px;
+.metricIcon_success {
+  background: var(--fowoco-green-50);
+}
+
+.priorityApproval {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 183px;
+  padding: 15px 24px;
   background: var(--surface-default);
-  border: 1px solid var(--border-default);
+  border: 1px solid var(--status-warning);
   border-radius: var(--fowoco-radius-8);
+  box-shadow: 0 2px 8px rgba(23, 43, 46, 0.08);
 }
 
-.topApprovalHeader {
+.priorityHeader {
   display: flex;
-  align-items: baseline;
+  align-items: center;
   justify-content: space-between;
+  height: 26px;
+  padding: 0 10px;
 }
 
-.topApprovalItem {
+.priorityHeader h2 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 26px;
+  color: var(--text-primary);
+}
+
+.priorityHeader span {
+  font-size: 11px;
+  line-height: 18px;
+  color: #bbc3c4;
+  white-space: nowrap;
+}
+
+.priorityBody {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  width: 100%;
-  margin-top: 16px;
-  padding: 15px 19px;
-  background: var(--surface-subtle);
-  border: none;
-  border-radius: var(--fowoco-radius-8);
-  text-align: left;
-  cursor: pointer;
+  gap: 25px;
+  margin-top: 15px;
 }
 
-.topApprovalContent {
+.priorityContent {
   display: flex;
+  flex: 1;
+  min-width: 0;
   flex-direction: column;
-  gap: 4px;
+  gap: 5px;
 }
 
-.topApprovalTitle {
-  font-size: 14px;
-  font-weight: 700;
-  color: var(--text-primary);
+.priorityCopy {
+  display: flex;
+  min-height: 70px;
+  flex-direction: column;
+  justify-content: center;
+  padding: 8px 15px;
+  background: var(--surface-default);
+  border: 1px solid var(--border-default);
+  border-radius: var(--fowoco-radius-6);
+  white-space: nowrap;
 }
 
-.topApprovalMeta {
+.priorityCopy strong {
+  margin-bottom: -3px;
+  overflow: hidden;
   font-size: 12px;
+  font-weight: 500;
+  line-height: 22px;
+  color: var(--text-primary);
+  text-overflow: ellipsis;
+}
+
+.priorityCopy span {
+  overflow: hidden;
+  font-size: 8px;
+  font-weight: 400;
+  line-height: 20px;
   color: var(--text-secondary);
+  text-overflow: ellipsis;
 }
 
-.topApprovalNote {
+.priorityContent > button {
+  width: 100%;
+  height: 32px;
+  padding: 5px 16px;
+  background: var(--surface-default);
+  border: 1px solid var(--border-default);
+  border-radius: var(--fowoco-radius-6);
+  font-family: inherit;
   font-size: 12px;
-  color: var(--text-secondary);
+  font-weight: 500;
+  line-height: 20px;
+  color: var(--text-primary);
+  cursor: pointer;
 }
 
-.topApprovalChevron {
-  flex-shrink: 0;
-  font-size: 20px;
+.priorityNext {
+  display: flex;
+  flex: 0 0 40px;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 0 0 3px;
+  background: var(--surface-default);
+  border: 1px solid var(--border-default);
+  border-radius: var(--fowoco-radius-6);
+  font-family: inherit;
+  font-size: 28px;
+  font-weight: 400;
+  line-height: 1;
   color: var(--text-secondary);
+  cursor: pointer;
 }
 
-.topApprovalAction {
-  width: 100%;
-  margin-top: 12px;
-  height: 44px;
-  background: var(--text-primary);
-  border: none;
-  border-radius: var(--fowoco-radius-8);
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--fowoco-white);
-  cursor: pointer;
+.todayTasks {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
 }
 
 .sectionHeader {
   display: flex;
-  align-items: baseline;
+  align-items: center;
   justify-content: space-between;
-  margin-top: 32px;
+  width: calc(100% - 13px);
+  min-height: 26px;
+  margin: 0 auto;
 }
 
-.sectionTitle {
+.sectionHeader h2 {
   margin: 0;
   font-size: 18px;
   font-weight: 700;
+  line-height: 26px;
   color: var(--text-primary);
 }
 
-.sectionNote {
+.sectionHeader p {
   margin: 0;
   font-size: 12px;
+  line-height: 20px;
   color: var(--text-secondary);
 }
 
 .workItemList {
   display: flex;
   flex-direction: column;
-  gap: 16px;
-  margin-top: 16px;
-  max-height: 480px;
-  overflow-y: auto;
+  gap: 8px;
 }
 
-.agentPanel {
-  padding: 19px;
+.agentPrepared {
+  display: flex;
+  height: 539px;
+  min-width: 0;
+  flex-direction: column;
+  gap: 15px;
+  padding: 16px;
+  overflow: hidden;
   background: var(--fowoco-teal-50);
-  border: 1px solid var(--border-default);
+  border: 1px solid rgba(7, 132, 127, 0.7);
   border-radius: var(--fowoco-radius-8);
 }
 
-.agentPanelTitle {
+.agentPreparedTitle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 26px;
+}
+
+.agentPreparedTitle h2 {
   margin: 0;
-  font-size: 13px;
+  font-size: 16px;
   font-weight: 700;
+  line-height: 24px;
   color: var(--brand-primary);
+  white-space: nowrap;
 }
 
-.agentPanelSummary {
-  margin: 12px 0 0;
-  font-size: 13px;
-  font-weight: 700;
-  color: var(--text-primary);
+.preparedIntro {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  line-height: 18px;
 }
 
-.agentPanelNote {
-  margin: 6px 0 0;
+.preparedIntro strong {
   font-size: 12px;
-  line-height: 18px;
-  color: var(--text-secondary);
+  font-weight: 500;
+  color: var(--text-primary);
 }
 
-.agentGroupLabel {
-  margin: 20px 0 0;
-  font-size: 12px;
-  font-weight: 700;
+.preparedIntro p {
+  margin: 0;
+  font-size: 11px;
   color: var(--text-secondary);
 }
 
-.agentGroupLabelWarning {
-  margin: 0 0 8px;
+.preparedSections {
+  display: flex;
+  min-height: 0;
+  flex: 1;
+  flex-direction: column;
+  gap: 18px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+}
+
+.preparedSection {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.preparedSection h3 {
+  margin: 0;
   font-size: 12px;
-  font-weight: 700;
-  color: var(--fowoco-amber-600);
+  font-weight: 500;
+  line-height: normal;
+  color: var(--text-primary);
 }
 
-.agentReadyList {
+.preparedSection ul {
   display: flex;
   flex-direction: column;
   gap: 8px;
-  margin: 10px 0 0;
+  margin: 0;
   padding: 0;
-  max-height: 220px;
-  overflow-y: auto;
   list-style: none;
 }
 
-.agentReadyItem {
-  font-size: 12px;
+.preparedSection li {
+  display: grid;
+  grid-template-columns: 16px minmax(0, 1fr);
+  column-gap: 8px;
+  align-items: center;
+  min-height: 20px;
+  font-size: 13px;
+  line-height: 20px;
   color: var(--text-primary);
 }
 
-.agentNeedsInfoBox {
-  margin-top: 16px;
-  padding: 15px;
-  background: var(--fowoco-amber-50);
-  border-radius: var(--fowoco-radius-8);
+.preparedSection li strong {
+  font-weight: 500;
 }
 
-.agentPendingItem {
-  margin-top: 12px;
+.doneMark,
+.reviewMark,
+.nextMark {
+  align-self: start;
+  width: 16px;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 20px;
 }
 
-.agentNeedsInfoBox .agentPendingItem:first-of-type {
-  margin-top: 0;
+.doneMark {
+  color: var(--fowoco-green-600);
 }
 
-.agentPendingLabel {
-  margin: 0;
-  font-size: 12px;
-  font-weight: 700;
-  color: var(--text-primary);
+.reviewMark {
+  color: var(--status-warning);
 }
 
-.agentPendingNote {
-  margin: 4px 0 0;
+.nextMark {
+  color: #3976d3;
+}
+
+.reviewSection {
+  padding: 12px;
+  background: var(--fowoco-amber-50);
+  border: 1px solid var(--status-warning);
+  border-radius: var(--fowoco-radius-6);
+}
+
+.reviewSection h3 {
+  color: var(--status-warning);
+}
+
+.describedItem p {
+  grid-column: 1 / -1;
+  margin: 0;
   font-size: 11px;
+  font-weight: 400;
+  line-height: normal;
   color: var(--text-secondary);
 }
+
+.stateWrap {
+  margin-top: 16px;
+}
+
+@media (max-width: 1260px) {
+  .dashboardGrid {
+    grid-template-columns: minmax(0, 2fr) minmax(290px, 1fr);
+  }
+
+  .metricStrip {
+    gap: 12px;
+  }
+
+  .priorityBody {
+    gap: 12px;
+  }
+}
+
+@media (max-width: 1080px) {
+  .dashboardGrid {
+    grid-template-columns: 1fr;
+  }
+
+  .agentPrepared {
+    height: auto;
+    max-height: 539px;
+  }
+}
+
+@media (max-width: 760px) {
+  .headline {
+    font-size: 22px;
+    line-height: 30px;
+  }
+
+  .description {
+    margin-top: 4px;
+  }
+
+  .agentRequest {
+    height: auto;
+    min-height: 144px;
+  }
+
+  .commandInput {
+    width: 100%;
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  .promptChips {
+    flex-wrap: wrap;
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  .metricStrip {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    height: auto;
+  }
+
+  .priorityApproval {
+    height: auto;
+  }
+
+  .priorityHeader {
+    height: auto;
+    padding: 0;
+  }
+
+  .priorityHeader h2 {
+    font-size: 16px;
+  }
+
+  .priorityBody {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .priorityNext {
+    width: 100%;
+  }
+}
diff --git a/src/pages/DashboardPage/DashboardPage.test.tsx b/src/pages/DashboardPage/DashboardPage.test.tsx
index 3d386c8..d1b8638 100644
--- a/src/pages/DashboardPage/DashboardPage.test.tsx
+++ b/src/pages/DashboardPage/DashboardPage.test.tsx
@@ -3,50 +3,48 @@ import userEvent from '@testing-library/user-event'
 import { MemoryRouter, Route, Routes } from 'react-router-dom'
 import { describe, expect, it } from 'vitest'
 import { DashboardPage } from './DashboardPage'
+import styles from './DashboardPage.module.css'
 import {
   AGENT_PREPARED,
   AI_REQUEST_PROMPT_CHIPS,
+  APPROVAL_QUEUE,
   METRIC_STRIP,
   TODAY_WORK_ITEMS,
-  TOP_APPROVAL,
 } from './dashboardData'
 
 function renderPage(demoState = 'success') {
-  render(
+  return render(
     <MemoryRouter initialEntries={[`/dashboard?demoState=${demoState}`]}>
       <Routes>
         <Route path="/dashboard" element={<DashboardPage />} />
         <Route path="/tasks/new" element={<p>업무 생성 페이지</p>} />
-        <Route path="/tasks" element={<p>업무함</p>} />
-        <Route path="/tasks/:taskId" element={<p>업무 상세</p>} />
       </Routes>
     </MemoryRouter>,
   )
 }
 
 describe('DashboardPage', () => {
-  it('renders the pending-approval headline', () => {
+  it('renders the blocking approval headline from the HOME-001 structure', () => {
     renderPage()
-    const pendingApproval = METRIC_STRIP.find((metric) => metric.id === 'pending-approval')
     expect(
-      screen.getByText(`지금 확인이 필요한 승인 ${pendingApproval?.value}건이 있습니다.`),
+      screen.getByRole('heading', {
+        name: `지금 확인이 필요한 승인 ${APPROVAL_QUEUE.blockingCount}건이 있습니다.`,
+      }),
     ).toBeInTheDocument()
   })
 
-  it('renders the top approval card and navigates to its task on click', async () => {
-    const user = userEvent.setup()
+  it('renders every work item row', () => {
     renderPage()
-
-    expect(screen.getByText(TOP_APPROVAL.title)).toBeInTheDocument()
-    await user.click(screen.getByRole('button', { name: TOP_APPROVAL.actionLabel }))
-
-    expect(await screen.findByText('업무 상세')).toBeInTheDocument()
+    for (const item of TODAY_WORK_ITEMS) {
+      expect(screen.getByText(item.title)).toBeInTheDocument()
+    }
   })
 
-  it('renders every work item row', () => {
+  it('renders the Figma status label and next action for every priority work item', () => {
     renderPage()
     for (const item of TODAY_WORK_ITEMS) {
-      expect(screen.getByText(item.title)).toBeInTheDocument()
+      expect(screen.getByText(item.status)).toBeInTheDocument()
+      expect(screen.getAllByText(item.nextAction).length).toBeGreaterThan(0)
     }
   })
 
@@ -74,26 +72,21 @@ describe('DashboardPage', () => {
     }
   })
 
-  it('renders the agent-prepared panel with ready, needs-info, and after-approval groups', () => {
+  it('renders every Agent prepared group', () => {
     renderPage()
-    for (const item of AGENT_PREPARED.ready) {
-      expect(screen.getByText(item.label, { exact: false })).toBeInTheDocument()
-    }
-    for (const item of AGENT_PREPARED.needsInfo) {
-      expect(screen.getByText(item.label, { exact: false })).toBeInTheDocument()
-    }
-    for (const item of AGENT_PREPARED.afterApproval) {
-      expect(screen.getByText(item.label, { exact: false })).toBeInTheDocument()
+    const items = [
+      ...AGENT_PREPARED.prepared,
+      ...AGENT_PREPARED.review,
+      ...AGENT_PREPARED.afterApproval,
+    ]
+    for (const item of items) {
+      expect(screen.getByText(item.label)).toBeInTheDocument()
     }
   })
 
-  it('navigates to work creation when the command box is clicked', async () => {
-    const user = userEvent.setup()
-    renderPage()
-
-    await user.click(screen.getByText(/처리할 업무를 자연어로 입력해 주세요/))
-
-    expect(await screen.findByText('업무 생성 페이지')).toBeInTheDocument()
+  it('uses the Figma desktop grid class for the success view', () => {
+    const { container } = renderPage()
+    expect(container.querySelector(`.${styles.dashboardGrid}`)).toBeInTheDocument()
   })
 
   it('navigates to work creation with the chosen prompt chip prefilled', async () => {
diff --git a/src/pages/DashboardPage/DashboardPage.tsx b/src/pages/DashboardPage/DashboardPage.tsx
index 9edf706..d33274e 100644
--- a/src/pages/DashboardPage/DashboardPage.tsx
+++ b/src/pages/DashboardPage/DashboardPage.tsx
@@ -1,51 +1,52 @@
 import { useNavigate } from 'react-router-dom'
 import { EmptyState } from '../../components/ui/EmptyState/EmptyState'
-import { WorkItemRow } from '../../components/ui/WorkItemRow/WorkItemRow'
+import { WorkItemRow, type WorkItemStatusTone } from '../../components/ui/WorkItemRow/WorkItemRow'
 import { useAsyncDemoData } from '../../hooks/useAsyncDemoData'
-import { CalendarIcon, CheckCircleIcon, WarningTriangleIcon } from './DashboardIcons'
+import agentSparkIcon from './assets/agent-spark.svg'
+import commandSubmitIcon from './assets/command-submit.svg'
 import styles from './DashboardPage.module.css'
 import {
   AGENT_PREPARED,
   AI_REQUEST_PROMPT_CHIPS,
-  COMMAND_BAR,
+  APPROVAL_QUEUE,
   METRIC_STRIP,
   TODAY_WORK_ITEMS,
-  TOP_APPROVAL,
-  type MetricIconKey,
+  type DashboardWorkStatus,
 } from './dashboardData'
 
-const METRIC_ICON: Record<MetricIconKey, typeof CheckCircleIcon> = {
-  check: CheckCircleIcon,
-  calendar: CalendarIcon,
-  warning: WarningTriangleIcon,
-  response: CheckCircleIcon,
+const STATUS_TONE: Record<DashboardWorkStatus, WorkItemStatusTone> = {
+  승인대기: 'warning',
+  요청전송: 'primary',
+  서류대기: 'neutral',
 }
 
 export function DashboardPage() {
   const navigate = useNavigate()
   const status = useAsyncDemoData(TODAY_WORK_ITEMS.length === 0)
-  const pendingApprovalCount = METRIC_STRIP.find((metric) => metric.id === 'pending-approval')?.value ?? 0
 
   return (
-    <div>
-      {status === 'success' && (
-        <>
-          <h1 className={styles.headline}>지금 확인이 필요한 승인 {pendingApprovalCount}건이 있습니다.</h1>
-          <p className={styles.description}>
-            Agent가 필요한 자료와 다음 행동을 먼저 준비했습니다. 검토와 최종 결정은 담당자가 수행합니다.
-          </p>
-        </>
-      )}
+    <div className={styles.page}>
+      <header className={styles.pageHeader}>
+        <h1 className={styles.headline}>
+          지금 확인이 필요한 승인 {APPROVAL_QUEUE.blockingCount}건이 있습니다.
+        </h1>
+        <p className={styles.description}>
+          Agent가 필요한 자료와 다음 행동을 먼저 준비했습니다. 검토와 최종 결정은 담당자가 수행합니다.
+        </p>
+      </header>
 
-      <div className={styles.commandBox}>
-        <div className={styles.commandBoxHeader}>
-          <span className={styles.commandBoxTitle}>✦ {COMMAND_BAR.title}</span>
-          <span className={styles.commandBoxChevron} aria-hidden="true">
-            ⌃
-          </span>
+      <section className={styles.agentRequest} aria-labelledby="agent-request-title">
+        <div className={styles.agentRequestTitle}>
+          <img src={agentSparkIcon} alt="" aria-hidden="true" />
+          <h2 id="agent-request-title">Agent 업무 요청</h2>
         </div>
-        <button type="button" className={styles.commandInput} onClick={() => navigate('/tasks/new')}>
-          <span className={styles.commandPlaceholder}>{COMMAND_BAR.placeholder}</span>
+        <button
+          type="button"
+          className={styles.commandInput}
+          onClick={() => navigate('/tasks/new')}
+        >
+          <span>처리할 업무를 자연어로 입력해 주세요. 예: 응웬반A의 체류기간 연장 준비</span>
+          <img src={commandSubmitIcon} alt="업무 요청 입력하기" />
         </button>
         <div className={styles.promptChips}>
           {AI_REQUEST_PROMPT_CHIPS.map((chip) => (
@@ -59,22 +60,7 @@ export function DashboardPage() {
             </button>
           ))}
         </div>
-      </div>
-
-      <div className={styles.metricStrip}>
-        {METRIC_STRIP.map((metric) => {
-          const Icon = METRIC_ICON[metric.icon]
-          return (
-            <button key={metric.id} type="button" className={styles.metricCard} onClick={() => navigate('/tasks')}>
-              <span className={styles.metricLabel}>{metric.label}</span>
-              <span className={styles.metricValueRow}>
-                <span className={styles.metricValue}>{metric.value}건 ›</span>
-                <Icon className={styles.metricIcon} />
-              </span>
-            </button>
-          )
-        })}
-      </div>
+      </section>
 
       {status === 'loading' && (
         <div className={styles.stateWrap}>
@@ -112,90 +98,125 @@ export function DashboardPage() {
       )}
 
       {status === 'success' && (
-        <div className={styles.mainGrid}>
-          <div className={styles.mainColumn}>
-            <div className={styles.topApprovalCard}>
-              <div className={styles.topApprovalHeader}>
-                <h2 className={styles.sectionTitle}>먼저 검토할 승인 업무</h2>
-                <span className={styles.sectionNote}>{TOP_APPROVAL.requestedLabel}</span>
+        <div className={styles.dashboardGrid}>
+          <div className={styles.primaryColumn}>
+            <div className={styles.metricStrip} aria-label="오늘의 업무 지표">
+              {METRIC_STRIP.map((metric) => (
+                <button
+                  key={metric.id}
+                  type="button"
+                  className={styles.metricCard}
+                  onClick={() => navigate(`/tasks?view=${metric.id}`)}
+                >
+                  <span className={styles.metricText}>
+                    <span className={styles.metricLabel}>{metric.label}</span>
+                    <span className={styles.metricValue}>{metric.value}건 ›</span>
+                  </span>
+                  <span className={`${styles.metricIcon} ${styles[`metricIcon_${metric.tone}`]}`}>
+                    <img src={metric.iconSrc} alt="" aria-hidden="true" />
+                  </span>
+                </button>
+              ))}
+            </div>
+
+            <section className={styles.priorityApproval} aria-labelledby="priority-approval-title">
+              <div className={styles.priorityHeader}>
+                <h2 id="priority-approval-title">먼저 검토할 승인 업무</h2>
+                <span>요청 · {APPROVAL_QUEUE.oldestValue}</span>
               </div>
-              <button
-                type="button"
-                className={styles.topApprovalItem}
-                onClick={() => navigate(`/tasks/${TODAY_WORK_ITEMS[0].id}`)}
-              >
-                <span className={styles.topApprovalContent}>
-                  <span className={styles.topApprovalTitle}>{TOP_APPROVAL.title}</span>
-                  <span className={styles.topApprovalMeta}>{TOP_APPROVAL.meta}</span>
-                  <span className={styles.topApprovalNote}>{TOP_APPROVAL.note}</span>
-                </span>
-                <span className={styles.topApprovalChevron} aria-hidden="true">
+              <div className={styles.priorityBody}>
+                <div className={styles.priorityContent}>
+                  <div className={styles.priorityCopy}>
+                    <strong>{APPROVAL_QUEUE.title}</strong>
+                    <span>{APPROVAL_QUEUE.meta}</span>
+                    <span>{APPROVAL_QUEUE.note}</span>
+                  </div>
+                  <button type="button" onClick={() => navigate('/tasks')}>
+                    승인 검토
+                  </button>
+                </div>
+                <button
+                  type="button"
+                  className={styles.priorityNext}
+                  aria-label="다음 승인 업무"
+                  onClick={() => navigate('/tasks')}
+                >
                   ›
-                </span>
-              </button>
-              <button
-                type="button"
-                className={styles.topApprovalAction}
-                onClick={() => navigate(`/tasks/${TODAY_WORK_ITEMS[0].id}`)}
-              >
-                {TOP_APPROVAL.actionLabel}
-              </button>
-            </div>
+                </button>
+              </div>
+            </section>
 
-            <div className={styles.sectionHeader}>
-              <h2 className={styles.sectionTitle}>오늘의 우선 업무</h2>
-              <p className={styles.sectionNote}>지금 할 일 · {TODAY_WORK_ITEMS.length}건</p>
-            </div>
+            <section className={styles.todayTasks} aria-labelledby="today-tasks-title">
+              <div className={styles.sectionHeader}>
+                <h2 id="today-tasks-title">오늘의 우선 업무</h2>
+                <p>지금 할 일 · {TODAY_WORK_ITEMS.length}건</p>
+              </div>
+              <div className={styles.workItemList}>
+                {TODAY_WORK_ITEMS.map((item) => (
+                  <WorkItemRow
+                    key={item.id}
+                    title={item.title}
+                    statusLabel={item.status}
+                    statusTone={STATUS_TONE[item.status]}
+                    detailItems={[item.schedule, ...(item.assignee ? [item.assignee] : [])]}
+                    nextAction={item.nextAction}
+                    urgency={item.urgency}
+                    onClick={() => navigate(`/tasks/${item.id}`)}
+                  />
+                ))}
+              </div>
+            </section>
+          </div>
 
-            <div className={styles.workItemList}>
-              {TODAY_WORK_ITEMS.map((item) => (
-                <WorkItemRow
-                  key={item.id}
-                  title={item.title}
-                  meta={item.meta}
-                  nextAction={item.nextAction}
-                  urgency={item.urgency}
-                  onClick={() => navigate(`/tasks/${item.id}`)}
-                />
-              ))}
+          <aside className={styles.agentPrepared} aria-labelledby="agent-prepared-title">
+            <div className={styles.agentPreparedTitle}>
+              <img src={agentSparkIcon} alt="" aria-hidden="true" />
+              <h2 id="agent-prepared-title">Agent가 준비한 내용</h2>
+            </div>
+            <div className={styles.preparedIntro}>
+              <strong>준비 완료 4건 · HR 확인 필요 2건</strong>
+              <p>Agent는 초안까지만 준비하며, 검토와 승인은 담당자가 수행합니다.</p>
             </div>
-          </div>
 
-          <aside className={styles.agentPanel}>
-            <p className={styles.agentPanelTitle}>✦ Agent가 준비한 내용</p>
-            <p className={styles.agentPanelSummary}>{AGENT_PREPARED.summary}</p>
-            <p className={styles.agentPanelNote}>{AGENT_PREPARED.note}</p>
+            <div className={styles.preparedSections}>
+              <section className={styles.preparedSection}>
+                <h3>준비 완료 · 4건</h3>
+                <ul>
+                  {AGENT_PREPARED.prepared.map((item) => (
+                    <li key={item.id}>
+                      <span className={styles.doneMark}>✓</span>
+                      <strong>{item.label}</strong>
+                    </li>
+                  ))}
+                </ul>
+              </section>
 
-            <p className={styles.agentGroupLabel}>{AGENT_PREPARED.readyLabel}</p>
-            <ul className={styles.agentReadyList}>
-              {AGENT_PREPARED.ready.map((item) => (
-                <li key={item.id} className={styles.agentReadyItem}>
-                  <span aria-hidden="true">✓</span> {item.label}
-                </li>
-              ))}
-            </ul>
+              <section className={`${styles.preparedSection} ${styles.reviewSection}`}>
+                <h3>HR 확인 필요 · 2건</h3>
+                <ul>
+                  {AGENT_PREPARED.review.map((item) => (
+                    <li key={item.id} className={styles.describedItem}>
+                      <span className={styles.reviewMark}>!</span>
+                      <strong>{item.label}</strong>
+                      <p>{item.description}</p>
+                    </li>
+                  ))}
+                </ul>
+              </section>
 
-            <div className={styles.agentNeedsInfoBox}>
-              <p className={styles.agentGroupLabelWarning}>{AGENT_PREPARED.needsInfoLabel}</p>
-              {AGENT_PREPARED.needsInfo.map((item) => (
-                <div key={item.id} className={styles.agentPendingItem}>
-                  <p className={styles.agentPendingLabel}>
-                    <span aria-hidden="true">!</span> {item.label}
-                  </p>
-                  <p className={styles.agentPendingNote}>{item.note}</p>
-                </div>
-              ))}
+              <section className={styles.preparedSection}>
+                <h3>승인 후 진행 · 2건</h3>
+                <ul>
+                  {AGENT_PREPARED.afterApproval.map((item) => (
+                    <li key={item.id} className={styles.describedItem}>
+                      <span className={styles.nextMark}>→</span>
+                      <strong>{item.label}</strong>
+                      <p>{item.description}</p>
+                    </li>
+                  ))}
+                </ul>
+              </section>
             </div>
-
-            <p className={styles.agentGroupLabel}>{AGENT_PREPARED.afterApprovalLabel}</p>
-            {AGENT_PREPARED.afterApproval.map((item) => (
-              <div key={item.id} className={styles.agentPendingItem}>
-                <p className={styles.agentPendingLabel}>
-                  <span aria-hidden="true">→</span> {item.label}
-                </p>
-                <p className={styles.agentPendingNote}>{item.note}</p>
-              </div>
-            ))}
           </aside>
         </div>
       )}
diff --git a/src/pages/DashboardPage/assets/agent-spark.svg b/src/pages/DashboardPage/assets/agent-spark.svg
new file mode 100644
index 0000000..20ff920
--- /dev/null
+++ b/src/pages/DashboardPage/assets/agent-spark.svg
@@ -0,0 +1,4 @@
+<svg preserveAspectRatio="none" overflow="visible" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 2.5L11.15 6.35L15 7.5L11.15 8.65L10 12.5L8.85 8.65L5 7.5L8.85 6.35L10 2.5Z" stroke="#07847F" stroke-width="1.6" stroke-linejoin="round"/>
+  <path d="M15.5 12.5L16.15 14.35L18 15L16.15 15.65L15.5 17.5L14.85 15.65L13 15L14.85 14.35L15.5 12.5Z" stroke="#07847F" stroke-width="1.4" stroke-linejoin="round"/>
+</svg>
diff --git a/src/pages/DashboardPage/assets/command-submit.svg b/src/pages/DashboardPage/assets/command-submit.svg
new file mode 100644
index 0000000..44ae101
--- /dev/null
+++ b/src/pages/DashboardPage/assets/command-submit.svg
@@ -0,0 +1,4 @@
+<svg preserveAspectRatio="none" overflow="visible" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8 15.5C12.1421 15.5 15.5 12.1421 15.5 8C15.5 3.85786 12.1421 0.5 8 0.5C3.85786 0.5 0.5 3.85786 0.5 8C0.5 12.1421 3.85786 15.5 8 15.5Z" stroke="#075E5B"/>
+  <path d="M11.375 9.125L8 5.75L4.625 9.125" stroke="#075E5B" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/pages/DashboardPage/assets/metric-approval.svg b/src/pages/DashboardPage/assets/metric-approval.svg
new file mode 100644
index 0000000..f1bfe1e
--- /dev/null
+++ b/src/pages/DashboardPage/assets/metric-approval.svg
@@ -0,0 +1,4 @@
+<svg preserveAspectRatio="none" overflow="visible" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M5.25 9.25L7.5 11.5L12.75 6.25" stroke="#D98A0C" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M9 15.5C12.5899 15.5 15.5 12.5899 15.5 9C15.5 5.41015 12.5899 2.5 9 2.5C5.41015 2.5 2.5 5.41015 2.5 9C2.5 12.5899 5.41015 15.5 9 15.5Z" stroke="#D98A0C" stroke-width="1.4"/>
+</svg>
diff --git a/src/pages/DashboardPage/assets/metric-due.svg b/src/pages/DashboardPage/assets/metric-due.svg
new file mode 100644
index 0000000..ee794f2
--- /dev/null
+++ b/src/pages/DashboardPage/assets/metric-due.svg
@@ -0,0 +1,4 @@
+<svg preserveAspectRatio="none" overflow="visible" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M13.25 4.25H4.75C3.64543 4.25 2.75 5.14543 2.75 6.25V13.25C2.75 14.3546 3.64543 15.25 4.75 15.25H13.25C14.3546 15.25 15.25 14.3546 15.25 13.25V6.25C15.25 5.14543 14.3546 4.25 13.25 4.25Z" stroke="#2563EB" stroke-width="1.4"/>
+  <path d="M5.5 2.5V5.5M12.5 2.5V5.5M2.75 7.25H15.25" stroke="#2563EB" stroke-width="1.4" stroke-linecap="round"/>
+</svg>
diff --git a/src/pages/DashboardPage/assets/metric-info.svg b/src/pages/DashboardPage/assets/metric-info.svg
new file mode 100644
index 0000000..ee80a4c
--- /dev/null
+++ b/src/pages/DashboardPage/assets/metric-info.svg
@@ -0,0 +1,4 @@
+<svg preserveAspectRatio="none" overflow="visible" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8.999 2.75L15.249 14.25H2.749L8.999 2.75Z" stroke="#DC2626" stroke-width="1.4" stroke-linejoin="round"/>
+  <path d="M9 6.5V10M9 12.5V12.6" stroke="#DC2626" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/src/pages/DashboardPage/assets/metric-response.svg b/src/pages/DashboardPage/assets/metric-response.svg
new file mode 100644
index 0000000..c00500e
--- /dev/null
+++ b/src/pages/DashboardPage/assets/metric-response.svg
@@ -0,0 +1,4 @@
+<svg preserveAspectRatio="none" overflow="visible" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M9 15.5C12.5899 15.5 15.5 12.5899 15.5 9C15.5 5.41015 12.5899 2.5 9 2.5C5.41015 2.5 2.5 5.41015 2.5 9C2.5 12.5899 5.41015 15.5 9 15.5Z" stroke="#16A34A" stroke-width="1.4"/>
+  <path d="M5.75 9.25L8 11.5L12.5 6.75" stroke="#16A34A" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/pages/DashboardPage/dashboardData.ts b/src/pages/DashboardPage/dashboardData.ts
index a962920..20cce7c 100644
--- a/src/pages/DashboardPage/dashboardData.ts
+++ b/src/pages/DashboardPage/dashboardData.ts
@@ -1,109 +1,144 @@
-import type { WorkItemUrgency } from '../../components/ui/WorkItemRow/WorkItemRow'
-import { EXAMPLE_PROMPTS } from '../CreateWorkPage/createWorkData'
+import metricApprovalIcon from './assets/metric-approval.svg'
+import metricDueIcon from './assets/metric-due.svg'
+import metricInfoIcon from './assets/metric-info.svg'
+import metricResponseIcon from './assets/metric-response.svg'
 
-// TODO(backend): 이 파일의 상수는 데모용 목데이터. 실제 연동 시 아래 엔드포인트로 대체
-// - GET /api/dashboard/work-items -> TODAY_WORK_ITEMS
-// - GET /api/dashboard/top-approval -> TOP_APPROVAL
-// - GET /api/dashboard/metrics -> METRIC_STRIP
-// - GET /api/dashboard/agent-progress -> AGENT_PREPARED
+// TODO(backend): 이 파일의 상수는 Figma HOME-001을 재현하기 위한 Prototype 데이터다.
+// Dashboard Projection API가 준비되면 동일한 ViewModel 형태로 응답을 정규화한다.
 
-export interface WorkItem {
+export type DashboardWorkStatus = '승인대기' | '요청전송' | '서류대기'
+export type DashboardWorkTone = 'warning' | 'critical' | 'info'
+
+export interface DashboardWorkItem {
   id: string
   title: string
-  meta: string
+  status: DashboardWorkStatus
+  schedule: string
+  assignee?: string
   nextAction: string
-  urgency: WorkItemUrgency
+  urgency: DashboardWorkTone
 }
 
-// Figma HOME-001(node 1291:209) "오늘의 우선 업무" 목록.
-export const TODAY_WORK_ITEMS: WorkItem[] = [
+export const TODAY_WORK_ITEMS: DashboardWorkItem[] = [
   {
     id: 'WI-1',
     title: '응웬반A 체류연장 요청문',
-    meta: 'D-2 · 담당 김민지',
+    status: '승인대기',
+    schedule: 'D-2',
+    assignee: '담당 김민지',
     nextAction: '승인 검토',
-    urgency: 'critical',
+    urgency: 'warning',
   },
   {
     id: 'WI-2',
     title: '외국인등록증 사본 제출',
-    meta: '오늘 마감 · 담당 이지연',
+    status: '요청전송',
+    schedule: 'D-0',
     nextAction: '요청 현황',
-    urgency: 'warning',
+    urgency: 'critical',
   },
   {
     id: 'WI-3',
     title: '7월 외부기관 제출자료',
-    meta: '이번 주 · 담당 박서준',
+    status: '서류대기',
+    schedule: 'D-3',
     nextAction: '증빙 등록',
-    urgency: 'neutral',
+    urgency: 'info',
   },
 ]
 
-// Figma HOME-001의 "먼저 검토할 승인 업무" 카드 — 우선순위가 가장 높은 승인 1건을 크게 보여준다.
-export const TOP_APPROVAL = {
-  requestedLabel: '요청 · 3시간 전',
+export const APPROVAL_QUEUE = {
+  blockingCount: 2,
+  totalCount: 7,
+  oldestValue: '3시간 전',
   title: '응웬반A 체류연장 요청문 승인',
   meta: '응웬반A · D-2 · 담당 김민지',
   note: '승인을 완료하면 근로자 안내 단계가 활성화됩니다.',
-  actionLabel: '승인 검토',
 }
 
-export type MetricIconKey = 'check' | 'calendar' | 'warning' | 'response'
+export const AI_REQUEST_PROMPT_CHIPS = [
+  '체류기간 연장',
+  '누락 문서 확인',
+  '승인 대기 정리',
+  '근로자 요청',
+]
+
+export type DashboardMetricTone = 'warning' | 'info' | 'critical' | 'success'
 
 export interface DashboardMetric {
   id: string
   label: string
   value: number
-  icon: MetricIconKey
+  iconSrc: string
+  tone: DashboardMetricTone
 }
 
 export const METRIC_STRIP: DashboardMetric[] = [
-  { id: 'pending-approval', label: '승인 대기', value: 7, icon: 'check' },
-  { id: 'due-today', label: '오늘 마감', value: 6, icon: 'calendar' },
-  { id: 'needs-info', label: '정보 보완', value: 1, icon: 'warning' },
-  { id: 'worker-response', label: '근로자 응답', value: 8, icon: 'response' },
+  {
+    id: 'pending-approval',
+    label: '승인 대기',
+    value: APPROVAL_QUEUE.totalCount,
+    iconSrc: metricApprovalIcon,
+    tone: 'warning',
+  },
+  {
+    id: 'due-today',
+    label: '오늘 마감',
+    value: 6,
+    iconSrc: metricDueIcon,
+    tone: 'info',
+  },
+  {
+    id: 'needs-info',
+    label: '정보 보완',
+    value: 1,
+    iconSrc: metricInfoIcon,
+    tone: 'critical',
+  },
+  {
+    id: 'worker-response',
+    label: '근로자 응답',
+    value: 8,
+    iconSrc: metricResponseIcon,
+    tone: 'success',
+  },
 ]
 
-// Figma HOME-001의 상단 "Agent 업무 요청" 입력 박스 안내문·예시 태그.
-export const COMMAND_BAR = {
-  title: 'Agent 업무 요청',
-  placeholder: '처리할 업무를 자연어로 입력해 주세요. 예: 응웬반A의 체류기간 연장 준비',
-}
-
-// Figma HOME-001(node 1291:209)의 자연어 입력 프롬프트 칩은 CreateWorkPage의 예시 칩과 동일 문구.
-export const AI_REQUEST_PROMPT_CHIPS = EXAMPLE_PROMPTS
-
 export interface AgentPreparedItem {
   id: string
   label: string
+  description?: string
 }
 
-export interface AgentPendingItem {
-  id: string
-  label: string
-  note: string
-}
-
-// Figma HOME-001 우측 "Agent가 준비한 내용" 패널.
 export const AGENT_PREPARED = {
-  summary: '준비 완료 4건 · HR 확인 필요 2건',
-  note: 'Agent는 초안까지만 준비하며, 검토와 승인은 담당자가 수행합니다.',
-  readyLabel: '준비 완료 · 4건',
-  ready: [
-    { id: 'ready-1', label: '필요 문서 5개 확인' },
-    { id: 'ready-2', label: '체류연장 요청문 초안' },
-    { id: 'ready-3', label: '기존 계약·체류 정보 연결' },
-    { id: 'ready-4', label: '유사 업무 중복 여부 확인' },
-  ] as AgentPreparedItem[],
-  needsInfoLabel: 'HR 확인 필요 · 2건',
-  needsInfo: [
-    { id: 'needs-1', label: '여권 만료일 확인', note: '여권 원본과 만료일을 확인한 뒤 승인합니다.' },
-    { id: 'needs-2', label: '추천 마감일·담당자 확인', note: '업무량과 제출 기한을 확인한 뒤 확정합니다.' },
-  ] as AgentPendingItem[],
-  afterApprovalLabel: '승인 후 진행 · 2건',
+  prepared: [
+    { id: 'documents', label: '필요 문서 5개 확인' },
+    { id: 'draft', label: '체류연장 요청문 초안' },
+    { id: 'connected', label: '기존 계약·체류 정보 연결' },
+    { id: 'duplicate', label: '유사 업무 중복 여부 확인' },
+  ] satisfies AgentPreparedItem[],
+  review: [
+    {
+      id: 'passport',
+      label: '여권 만료일 확인',
+      description: '여권 원본과 만료일을 확인한 뒤 승인합니다.',
+    },
+    {
+      id: 'deadline',
+      label: '추천 마감일·담당자 확인',
+      description: '업무량과 제출 기한을 확인한 뒤 확정합니다.',
+    },
+  ] satisfies AgentPreparedItem[],
   afterApproval: [
-    { id: 'after-1', label: '근로자 요청문 확인', note: '승인되면 근로자 요청 확인 단계가 열립니다.' },
-    { id: 'after-2', label: '보안 링크 발급 준비', note: '승인 후 담당자가 발급하고 근로자에게 전달합니다.' },
-  ] as AgentPendingItem[],
+    {
+      id: 'worker-request',
+      label: '근로자 요청문 확인',
+      description: '승인되면 근로자 요청 확인 단계가 열립니다.',
+    },
+    {
+      id: 'secure-link',
+      label: '보안 링크 발급 준비',
+      description: '승인 후 담당자가 발급하고 근로자에게 전달합니다.',
+    },
+  ] satisfies AgentPreparedItem[],
 }
diff --git a/src/pages/WorkListPage/WorkInboxDetail.tsx b/src/pages/WorkListPage/WorkInboxDetail.tsx
index a5a4927..d939969 100644
--- a/src/pages/WorkListPage/WorkInboxDetail.tsx
+++ b/src/pages/WorkListPage/WorkInboxDetail.tsx
@@ -18,6 +18,23 @@ interface WorkInboxDetailProps {
   onOpenTask: (taskId: string) => void
 }
 
+const NATIONALITY_LABEL: Record<string, string> = {
+  VN: '베트남',
+  ID: '인도네시아',
+  KH: '캄보디아',
+  NP: '네팔',
+  MM: '미얀마',
+  PH: '필리핀',
+  TH: '태국',
+}
+
+function getWorkerMeta(group: WorkInboxWorkerGroup): string {
+  const nationality =
+    NATIONALITY_LABEL[group.worker.nationality_code] ?? group.worker.nationality_code
+  const workStatus = group.worker.work_status === 'ACTIVE' ? '재직' : '근무 상태 확인 필요'
+  return `${nationality} · ${workStatus} · 비자·근무 정보 미등록`
+}
+
 export function WorkInboxDetail({ group, onOpenTask }: WorkInboxDetailProps) {
   const showToast = useToastStore((state) => state.showToast)
   const [activeCaseKey, setActiveCaseKey] = useState(group.primaryCase.key)
@@ -33,8 +50,6 @@ export function WorkInboxDetail({ group, onOpenTask }: WorkInboxDetailProps) {
   const progress = getWorkInboxCaseProgress(activeCase)
   const due = getDuePresentation(activeTask.task.due_date)
   const activeStatus = getTaskStatusPresentation(activeTask.task.status)
-  const headerStatus =
-    due.tone === 'critical' ? { label: '긴급', tone: 'critical' as const } : activeStatus
   const reviewTasks = group.tasks.filter((item) => isReviewTask(item.task.status))
   const detailTitleId = `work-inbox-detail-${group.worker.worker_id}`
 
@@ -47,6 +62,10 @@ export function WorkInboxDetail({ group, onOpenTask }: WorkInboxDetailProps) {
     showToast('판단 근거 보기는 준비 중입니다.')
   }
 
+  function handleOpenWorkerMenu() {
+    showToast('근로자 업무 메뉴는 준비 중입니다.')
+  }
+
   return (
     <section className={styles.detailPanel} role="region" aria-labelledby={detailTitleId}>
       <header className={styles.detailHeader}>
@@ -54,113 +73,123 @@ export function WorkInboxDetail({ group, onOpenTask }: WorkInboxDetailProps) {
           <h2 id={detailTitleId} className={styles.detailName}>
             {group.worker.display_name}
           </h2>
-          <p className={styles.detailMeta}>
-            국적 코드 {group.worker.nationality_code} · 비자·근무 정보 미제공
-          </p>
+          <p className={styles.detailMeta}>{getWorkerMeta(group)}</p>
         </div>
-        <StatusLabel tone={headerStatus.tone}>{headerStatus.label}</StatusLabel>
+        <button
+          type="button"
+          className={styles.moreButton}
+          aria-label={`${group.worker.display_name} 업무 메뉴`}
+          onClick={handleOpenWorkerMenu}
+        >
+          <span aria-hidden="true">···</span>
+        </button>
       </header>
 
-      <p className={styles.agentSuggestion}>
-        Agent 제안 · {due.label}, {getWorkflowLabel(activeTask)} 확인 필요
-      </p>
+      <div className={styles.caseSummaryScroll}>
+        <p className={styles.agentSuggestion}>
+          Agent 제안 · {due.label}, {getWorkflowLabel(activeTask)} 확인 필요
+        </p>
 
-      <div className={styles.priorityCase}>
-        <div className={styles.priorityCaseHeader}>
-          <p className={styles.caseEyebrow}>
-            우선 Case {Math.max(activeCaseIndex, 0) + 1}/{group.cases.length}
-          </p>
-          <button
-            type="button"
-            className={styles.textLink}
-            onClick={() => onOpenTask(activeTask.task.task_id)}
-          >
-            Case 열기 →
-          </button>
-        </div>
-        <div className={styles.priorityCaseBody}>
-          {activeCase.caseId && <p className={styles.caseIdentifier}>Case {activeCase.caseId}</p>}
-          <h3 className={styles.caseTitle}>{activeTask.task.title}</h3>
-          <p className={styles.caseMeta}>
-            {getWorkflowLabel(activeTask)} · {due.label} · {activeStatus.label}
-          </p>
-          <div className={styles.progressRow}>
-            <span>
-              진행 {progress.completed}/{progress.total}
-            </span>
-            <progress
-              className={styles.progress}
-              value={progress.completed}
-              max={Math.max(progress.total, 1)}
-              aria-label={`${activeTask.task.title} Case 진행률`}
-            />
-          </div>
-          {group.cases.length > 1 && (
-            <button type="button" className={styles.textLink} onClick={handleOpenOtherCase}>
-              다른 Case 열기 →
+        <div className={styles.priorityCase}>
+          <div className={styles.priorityCaseHeader}>
+            <p className={styles.caseEyebrow}>
+              우선 업무 건 · {Math.max(activeCaseIndex, 0) + 1}/{group.cases.length}
+            </p>
+            <button
+              type="button"
+              className={styles.textLink}
+              onClick={() => onOpenTask(activeTask.task.task_id)}
+            >
+              <span>업무 건 열기</span>
+              <span className={styles.linkChevron} aria-hidden="true">
+                ›
+              </span>
             </button>
-          )}
-        </div>
-      </div>
-
-      <section className={styles.detailSection} aria-labelledby="review-task-title">
-        <div className={styles.sectionHeadingRow}>
-          <h3 id="review-task-title" className={styles.sectionTitle}>
-            검토할 업무
-          </h3>
-          <span className={styles.sectionCount}>{reviewTasks.length}건</span>
+          </div>
+          <div className={styles.priorityCaseBody}>
+            {activeCase.caseId && <span className={styles.srOnly}>Case {activeCase.caseId}</span>}
+            <h3 className={styles.caseTitle}>{activeTask.task.title}</h3>
+            <p className={styles.caseMeta}>
+              {getWorkflowLabel(activeTask)} · {due.label} · {activeStatus.label}
+            </p>
+            <div className={styles.progressRow}>
+              <span>
+                {progress.completed}/{progress.total}
+              </span>
+              <progress
+                className={styles.progress}
+                value={progress.completed}
+                max={Math.max(progress.total, 1)}
+                aria-label={`${activeTask.task.title} Case 진행률`}
+              />
+            </div>
+            {group.cases.length > 1 && (
+              <button type="button" className={styles.textLink} onClick={handleOpenOtherCase}>
+                다른 Case 열기 →
+              </button>
+            )}
+          </div>
         </div>
 
-        {reviewTasks.length === 0 ? (
-          <p className={styles.sectionEmpty}>현재 검토할 업무가 없습니다.</p>
-        ) : (
-          <div className={styles.reviewTaskList}>
-            {reviewTasks.map((item, index) => {
-              const taskDue = getDuePresentation(item.task.due_date)
-              const taskStatus = getTaskStatusPresentation(item.task.status)
-              return (
-                <article key={item.task.task_id} className={styles.reviewTaskRow}>
-                  <div className={styles.reviewTaskContent}>
-                    <h4 className={styles.reviewTaskTitle}>{item.task.title}</h4>
-                    <p className={styles.reviewTaskMeta}>
-                      {getWorkflowLabel(item)} · {taskStatus.label}
-                    </p>
-                  </div>
-                  <StatusLabel tone={taskDue.tone}>{taskDue.label}</StatusLabel>
-                  <Button
-                    variant={index === 0 ? 'primary' : 'secondary'}
-                    className={styles.reviewTaskButton}
-                    onClick={() => onOpenTask(item.task.task_id)}
-                  >
-                    {getReviewActionLabel(item.task.status)}
-                  </Button>
-                </article>
-              )
-            })}
+        <section className={styles.detailSection} aria-labelledby="review-task-title">
+          <div className={styles.sectionHeadingRow}>
+            <h3 id="review-task-title" className={styles.sectionTitle}>
+              검토할 업무
+            </h3>
+            <span className={styles.srOnly}>{reviewTasks.length}건</span>
           </div>
-        )}
-      </section>
 
-      <section className={styles.decisionSection} aria-labelledby="current-decision-title">
-        <div className={styles.decisionHeader}>
-          <h3 id="current-decision-title" className={styles.sectionTitle}>
-            현재 결정
-          </h3>
-          <button type="button" className={styles.textLink} onClick={handleViewEvidence}>
-            근거 보기 →
-          </button>
-        </div>
-        <div className={styles.decisionBody}>
-          <div className={styles.decisionStatusRow}>
+          {reviewTasks.length === 0 ? (
+            <p className={styles.sectionEmpty}>현재 검토할 업무가 없습니다.</p>
+          ) : (
+            <div className={styles.reviewTaskList}>
+              {reviewTasks.map((item, index) => {
+                const taskDue = getDuePresentation(item.task.due_date)
+                const taskStatus = getTaskStatusPresentation(item.task.status)
+                return (
+                  <article key={item.task.task_id} className={styles.reviewTaskRow}>
+                    <div className={styles.reviewTaskContent}>
+                      <h4 className={styles.reviewTaskTitle}>{item.task.title}</h4>
+                      <p className={styles.reviewTaskMeta}>
+                        {getWorkflowLabel(item)} · {taskStatus.label}
+                      </p>
+                    </div>
+                    <StatusLabel tone={taskDue.tone}>{taskDue.label}</StatusLabel>
+                    <Button
+                      variant={index === 0 ? 'primary' : 'secondary'}
+                      className={styles.reviewTaskButton}
+                      onClick={() => onOpenTask(item.task.task_id)}
+                    >
+                      {getReviewActionLabel(item.task.status)}
+                    </Button>
+                  </article>
+                )
+              })}
+            </div>
+          )}
+        </section>
+
+        <section className={styles.decisionSection} aria-labelledby="current-decision-title">
+          <div className={styles.decisionHeader}>
+            <h3 id="current-decision-title" className={styles.sectionTitle}>
+              현재 결정
+            </h3>
+            <button type="button" className={styles.textLink} onClick={handleViewEvidence}>
+              <span>근거 보기</span>
+              <span className={styles.linkChevron} aria-hidden="true">
+                ›
+              </span>
+            </button>
+          </div>
+          <div className={styles.decisionBody}>
             <p className={styles.decisionSummary}>{getDecisionSummary(activeTask.task.status)}</p>
-            <StatusLabel tone={activeStatus.tone}>{activeStatus.label}</StatusLabel>
+            <p className={styles.decisionMeta}>
+              진행 업무 건 {group.cases.length}개 · 확인할 업무 {reviewTasks.length}개 · 자동
+              확정되지 않음
+            </p>
           </div>
-          <p className={styles.decisionMeta}>
-            진행 업무 건 {group.cases.length}개 · 확인할 업무 {reviewTasks.length}개 · 자동 확정되지
-            않음
-          </p>
-        </div>
-      </section>
+        </section>
+      </div>
     </section>
   )
 }
diff --git a/src/pages/WorkListPage/WorkInboxTargetList.tsx b/src/pages/WorkListPage/WorkInboxTargetList.tsx
index 5460abf..a6ce70f 100644
--- a/src/pages/WorkListPage/WorkInboxTargetList.tsx
+++ b/src/pages/WorkListPage/WorkInboxTargetList.tsx
@@ -46,7 +46,6 @@ export function WorkInboxTargetList({
         <h2 id="work-inbox-list-title" className={styles.listTitle}>
           근로자 {totalCount}명
         </h2>
-        <span className={styles.listCountNote}>업무 연결 기준</span>
       </div>
 
       {capNotice && <p className={styles.capNotice}>{capNotice}</p>}
diff --git a/src/pages/WorkListPage/WorkListPage.module.css b/src/pages/WorkListPage/WorkListPage.module.css
index 297dd57..1487792 100644
--- a/src/pages/WorkListPage/WorkListPage.module.css
+++ b/src/pages/WorkListPage/WorkListPage.module.css
@@ -1,6 +1,6 @@
 .page {
   width: 100%;
-  margin: -20px 0 0;
+  margin: -21px 0 0;
 }
 
 .headline {
@@ -14,7 +14,7 @@
 .description {
   margin: 5px 0 0;
   font-size: 14px;
-  line-height: 1.5;
+  line-height: 20px;
   color: var(--text-secondary);
 }
 
@@ -31,6 +31,9 @@
   height: 40px;
   max-width: none;
   padding: 0 14px;
+}
+
+.searchInput input {
   font-size: 13px;
 }
 
@@ -74,17 +77,21 @@
 .workspace {
   display: grid;
   grid-template-columns: clamp(280px, 28.82%, 332px) minmax(0, 1fr);
-  min-height: 520px;
+  min-height: 0;
   height: calc(100svh - 208px);
-  max-height: 712px;
+  max-height: none;
   margin-top: 0;
   overflow: hidden;
   background: var(--surface-default);
-  border: 1px solid var(--border-default);
   border-radius: var(--fowoco-radius-8);
+  box-shadow: inset 0 0 0 1px var(--border-default);
 }
 
 .noticeStack + .workspace {
+  margin-top: 0;
+}
+
+.noticeStack:not(:empty) + .workspace {
   margin-top: var(--fowoco-spacing-12);
 }
 
@@ -116,12 +123,6 @@
   color: var(--text-primary);
 }
 
-.listCountNote {
-  font-size: 11px;
-  white-space: nowrap;
-  color: var(--text-secondary);
-}
-
 .capNotice {
   flex-shrink: 0;
   margin: var(--fowoco-spacing-8) 0 0;
@@ -143,6 +144,12 @@
   margin-top: var(--fowoco-spacing-12);
   padding: 0;
   overflow-y: auto;
+  scrollbar-width: none;
+}
+
+.targetList::-webkit-scrollbar,
+.detailPanel::-webkit-scrollbar {
+  display: none;
 }
 
 .targetOption {
@@ -224,8 +231,11 @@
 .detailPanel {
   min-width: 0;
   min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
   padding: var(--fowoco-spacing-16) var(--fowoco-spacing-24);
-  overflow-y: auto;
+  overflow: hidden;
   background: var(--surface-default);
 }
 
@@ -237,6 +247,49 @@
   min-height: 72px;
 }
 
+.moreButton {
+  display: inline-flex;
+  flex: 0 0 40px;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  background: var(--surface-default);
+  border: 1px solid var(--border-default);
+  border-radius: var(--fowoco-radius-6);
+  font-family: inherit;
+  font-size: 16px;
+  line-height: 20px;
+  color: var(--text-secondary);
+  cursor: pointer;
+}
+
+.caseSummaryScroll {
+  min-height: 0;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--fowoco-spacing-16);
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-width: none;
+}
+
+.caseSummaryScroll::-webkit-scrollbar {
+  display: none;
+}
+
+.moreButton:hover {
+  border-color: var(--brand-primary);
+  color: var(--brand-primary);
+}
+
+.moreButton:focus-visible {
+  outline: 2px solid var(--brand-primary);
+  outline-offset: 2px;
+}
+
 .detailName {
   margin: 0;
   font-size: 18px;
@@ -253,6 +306,7 @@
 }
 
 .agentSuggestion {
+  flex-shrink: 0;
   min-height: 40px;
   margin: 0;
   padding: 9px 16px;
@@ -264,7 +318,8 @@
 }
 
 .priorityCase {
-  margin-top: var(--fowoco-spacing-16);
+  flex-shrink: 0;
+  margin: 0;
   padding: 0;
   overflow: hidden;
   border: 1px solid var(--border-default);
@@ -287,6 +342,11 @@
   padding: 12px 16px;
 }
 
+.decisionHeader {
+  padding-right: 21px;
+  padding-left: 21px;
+}
+
 .sectionHeadingRow {
   display: flex;
   align-items: center;
@@ -294,32 +354,45 @@
   gap: var(--fowoco-spacing-12);
 }
 
-.caseEyebrow,
-.caseIdentifier {
+.caseEyebrow {
   margin: 0;
   font-size: 16px;
   font-weight: 700;
-  color: var(--text-primary);
-}
-
-.caseIdentifier {
-  margin: 0 0 var(--fowoco-spacing-4);
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--brand-primary);
+  line-height: 20px;
+  color: var(--brand-dark);
 }
 
 .textLink {
-  padding: 4px;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--fowoco-spacing-8);
+  min-height: 40px;
+  padding: 0;
   background: none;
   border: none;
   font-family: inherit;
-  font-size: 12px;
-  font-weight: 700;
+  font-size: 14px;
+  font-weight: 500;
   color: var(--brand-primary);
   cursor: pointer;
 }
 
+.linkChevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  margin: 0;
+  border: 1px solid var(--border-default);
+  border-radius: var(--fowoco-radius-6);
+  background: var(--surface-default);
+  font-size: 22px;
+  font-weight: 400;
+  line-height: 1;
+  color: var(--text-secondary);
+}
+
 .textLink:hover {
   text-decoration: underline;
 }
@@ -333,14 +406,14 @@
   margin: 0;
   font-size: 16px;
   font-weight: 500;
-  line-height: 1.45;
+  line-height: 24px;
   color: var(--text-primary);
 }
 
 .caseMeta {
-  margin: 6px 0 0;
-  font-size: 12px;
-  line-height: 1.5;
+  margin: var(--fowoco-spacing-4) 0 0;
+  font-size: 13px;
+  line-height: 20px;
   color: var(--text-secondary);
 }
 
@@ -350,7 +423,9 @@
   align-items: center;
   gap: var(--fowoco-spacing-12);
   margin-top: var(--fowoco-spacing-4);
+  min-height: 20px;
   font-size: 13px;
+  line-height: 20px;
   color: var(--text-secondary);
 }
 
@@ -381,7 +456,8 @@
 
 .detailSection,
 .decisionSection {
-  margin-top: var(--fowoco-spacing-16);
+  flex-shrink: 0;
+  margin: 0;
 }
 
 .sectionTitle {
@@ -409,7 +485,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--fowoco-spacing-8);
-  margin-top: var(--fowoco-spacing-12);
+  margin-top: var(--fowoco-spacing-8);
 }
 
 .reviewTaskRow {
@@ -462,21 +538,19 @@
 }
 
 .decisionBody {
-  padding: 8px 16px 12px;
-}
-
-.decisionStatusRow {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: var(--fowoco-spacing-12);
+  min-height: 64px;
+  padding: 8px 7px 12px;
 }
 
 .decisionSummary {
   margin: 0;
   font-size: 14px;
   line-height: 1.6;
-  color: var(--text-primary);
+  color: var(--text-secondary);
+}
+
+.decisionHeader .sectionTitle {
+  color: var(--brand-dark);
 }
 
 .decisionMeta {
diff --git a/src/pages/WorkListPage/WorkListPage.test.tsx b/src/pages/WorkListPage/WorkListPage.test.tsx
index 9d46ab6..ad32baf 100644
--- a/src/pages/WorkListPage/WorkListPage.test.tsx
+++ b/src/pages/WorkListPage/WorkListPage.test.tsx
@@ -244,7 +244,7 @@ describe('WorkListPage', () => {
     expect(
       screen.getByRole('heading', { name: '체류연장 업무 초안', level: 3 }),
     ).toBeInTheDocument()
-    expect(screen.getByText('진행 1/2')).toBeInTheDocument()
+    expect(screen.getByText('1/2')).toBeInTheDocument()
     expect(
       screen.getByRole('progressbar', { name: /체류연장 업무 초안 Case 진행률/ }),
     ).toHaveAttribute('value', '1')
@@ -288,7 +288,7 @@ describe('WorkListPage', () => {
     const user = userEvent.setup()
     renderPage()
 
-    const search = await screen.findByLabelText('근로자·Case·업무 검색')
+    const search = await screen.findByLabelText('근로자·업무 건·지금 할 일 검색')
     await user.type(search, 'Contract Review')
 
     await waitFor(() => {
@@ -326,7 +326,7 @@ describe('WorkListPage', () => {
     const user = userEvent.setup()
     renderPage()
 
-    await user.click(await screen.findByRole('button', { name: 'Case 열기 →' }))
+    await user.click(await screen.findByRole('button', { name: '업무 건 열기' }))
 
     expect(await screen.findByText('업무 상세 T-1')).toBeInTheDocument()
     expect(screen.queryByText('업무 상세 CASE-1')).not.toBeInTheDocument()
@@ -406,7 +406,10 @@ describe('WorkListPage', () => {
     const user = userEvent.setup()
     renderPage()
 
-    await user.type(await screen.findByLabelText('근로자·Case·업무 검색'), '존재하지 않는 검색어')
+    await user.type(
+      await screen.findByLabelText('근로자·업무 건·지금 할 일 검색'),
+      '존재하지 않는 검색어',
+    )
 
     expect(await screen.findByText('검색 결과가 없습니다')).toBeInTheDocument()
   })
@@ -428,13 +431,17 @@ describe('WorkListPage', () => {
 
     await user.click(await screen.findByRole('option', { name: /응우옌 안/ }))
 
-    expect(screen.getByText('우선 Case 1/2')).toBeInTheDocument()
-    expect(screen.getByRole('heading', { level: 3, name: '체류연장 업무 초안' })).toBeInTheDocument()
+    expect(screen.getByText('우선 업무 건 · 1/2')).toBeInTheDocument()
+    expect(
+      screen.getByRole('heading', { level: 3, name: '체류연장 업무 초안' }),
+    ).toBeInTheDocument()
 
     await user.click(screen.getByRole('button', { name: '다른 Case 열기 →' }))
 
-    expect(screen.getByText('우선 Case 2/2')).toBeInTheDocument()
-    expect(screen.getByRole('heading', { level: 3, name: '근로자 안내문 초안' })).toBeInTheDocument()
+    expect(screen.getByText('우선 업무 건 · 2/2')).toBeInTheDocument()
+    expect(
+      screen.getByRole('heading', { level: 3, name: '근로자 안내문 초안' }),
+    ).toBeInTheDocument()
   })
 
   it('shows a placeholder toast for "근거 보기"', async () => {
@@ -442,7 +449,7 @@ describe('WorkListPage', () => {
     const user = userEvent.setup()
     renderPage('/tasks', { withToasts: true })
 
-    await user.click(await screen.findByRole('button', { name: '근거 보기 →' }))
+    await user.click(await screen.findByRole('button', { name: '근거 보기' }))
 
     expect(screen.getByText('판단 근거 보기는 준비 중입니다.')).toBeInTheDocument()
   })
diff --git a/src/pages/WorkListPage/WorkListPage.tsx b/src/pages/WorkListPage/WorkListPage.tsx
index b23ee6c..47b32fb 100644
--- a/src/pages/WorkListPage/WorkListPage.tsx
+++ b/src/pages/WorkListPage/WorkListPage.tsx
@@ -67,7 +67,6 @@ function TaskStateWorkspace({
           <h2 id="work-inbox-list-title" className={styles.listTitle}>
             근로자 {workers.length}명
           </h2>
-          <span className={styles.listCountNote}>업무 상태 미확인</span>
         </div>
         <div className={styles.targetList} role="listbox" aria-label="업무 대상 근로자">
           {visibleWorkers.map((worker) => {
@@ -185,15 +184,15 @@ export function WorkListPage() {
     <div className={styles.page}>
       <header>
         <h1 className={styles.headline}>업무함</h1>
-        <p className={styles.description}>근로자별 진행 Case와 지금 처리할 업무를 확인합니다.</p>
+        <p className={styles.description}>근로자별 진행 업무 건과 지금 할 일을 확인합니다.</p>
       </header>
 
       <div className={styles.toolbar}>
         <SearchInput
           value={query}
           onChange={setQuery}
-          placeholder="근로자·Case·업무 검색"
-          ariaLabel="근로자·Case·업무 검색"
+          placeholder="근로자·업무 건·지금 할 일 검색"
+          ariaLabel="근로자·업무 건·지금 할 일 검색"
           className={styles.searchInput}
         />
         <Dropdown
diff --git a/src/pages/WorkListPage/workInboxPresentation.ts b/src/pages/WorkListPage/workInboxPresentation.ts
index bb4b1d6..e62562c 100644
--- a/src/pages/WorkListPage/workInboxPresentation.ts
+++ b/src/pages/WorkListPage/workInboxPresentation.ts
@@ -7,7 +7,7 @@ import type { WorkInboxTask } from './workInboxModel'
 const REVIEW_ACTION_LABEL: Record<TaskStatus, string> = {
   DRAFT: '초안 검토',
   NEEDS_INFO: '정보 확인',
-  READY_FOR_REVIEW: '검토하기',
+  READY_FOR_REVIEW: '초안 검토',
   APPROVED: '실행 확인',
   WAITING_WORKER: '대기 확인',
   WAITING_EXTERNAL: '진행 확인',
@@ -40,8 +40,15 @@ export function getTaskStatusPresentation(status: TaskStatus): {
   label: string
   tone: StatusTone
 } {
+  const workInboxLabel: Partial<Record<TaskStatus, string>> = {
+    DRAFT: '서류 대기',
+    NEEDS_INFO: '처리 필요',
+    READY_FOR_REVIEW: '승인 대기',
+    WAITING_WORKER: '요청 전송',
+  }
+
   return {
-    label: TASK_STATUS_LABEL[status],
+    label: workInboxLabel[status] ?? TASK_STATUS_LABEL[status],
     tone: TASK_STATUS_TONE[status],
   }
 }