diff --git a/web-ui/components/navbar.html b/web-ui/components/navbar.html
index a0be968..ad676af 100644
--- a/web-ui/components/navbar.html
+++ b/web-ui/components/navbar.html
@@ -70,9 +70,19 @@
   color: var(--text-inverse);
   padding: var(--space-4) var(--space-6);
   box-shadow: var(--shadow-lg);
-  position: sticky;
+  position: fixed;
   top: 0;
-  z-index: 100;
+  left: 0;
+  right: 0;
+  z-index: 200;
+  height: 80px;
+  display: flex;
+  align-items: center;
+}
+
+/* 헤더 높이만큼 본문 여백 추가 */
+body {
+  padding-top: 80px;
 }
 
 .header-content {
diff --git a/web-ui/pages/dashboard.html b/web-ui/pages/dashboard.html
index 7f2b9a3..c98ae61 100644
--- a/web-ui/pages/dashboard.html
+++ b/web-ui/pages/dashboard.html
@@ -31,155 +31,6 @@
     <!-- 메인 콘텐츠 -->
     <main class="dashboard-main">
 
-      <!-- 빠른 작업 섹션 -->
-      <section class="quick-actions-section">
-        <div class="card">
-          <div class="card-header">
-            <h2 class="card-title">빠른 작업</h2>
-          </div>
-          <div class="card-body">
-            <div class="quick-actions-grid-full">
-              <!-- TBM 관리 (페이지 권한 체크) -->
-              <a href="/pages/work/tbm.html" class="quick-action-card" id="tbmQuickAction" style="display: none; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white;">
-                <div class="action-content">
-                  <h3 style="color: white;">🛠️ TBM 관리</h3>
-                  <p style="color: rgba(255, 255, 255, 0.9);">아침 안전 회의 및 팀 구성을 관리합니다</p>
-                </div>
-                <div class="action-arrow" style="color: white;">→</div>
-              </a>
-
-              <a href="/pages/safety/visit-request.html" class="quick-action-card" style="background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); color: white;">
-                <div class="action-content">
-                  <h3 style="color: white;">🚪 출입 신청</h3>
-                  <p style="color: rgba(255, 255, 255, 0.9);">작업장 출입 및 안전교육을 신청합니다</p>
-                </div>
-                <div class="action-arrow" style="color: white;">→</div>
-              </a>
-
-              <a href="/pages/safety/management.html" class="quick-action-card admin-only" style="background: linear-gradient(135deg, #ec4899 0%, #db2777 100%); color: white;">
-                <div class="action-content">
-                  <h3 style="color: white;">🛡️ 안전관리</h3>
-                  <p style="color: rgba(255, 255, 255, 0.9);">출입 신청 승인 및 안전교육 관리</p>
-                </div>
-                <div class="action-arrow" style="color: white;">→</div>
-              </a>
-
-              <a href="/pages/safety/checklist-manage.html" class="quick-action-card admin-only" style="background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%); color: white;">
-                <div class="action-content">
-                  <h3 style="color: white;">📋 안전 체크리스트 관리</h3>
-                  <p style="color: rgba(255, 255, 255, 0.9);">TBM 안전 체크 항목 관리 (기본/날씨/작업별)</p>
-                </div>
-                <div class="action-arrow" style="color: white;">→</div>
-              </a>
-
-              <a href="/pages/safety/issue-report.html" class="quick-action-card" style="background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white;">
-                <div class="action-content">
-                  <h3 style="color: white;">⚠️ 문제 신고</h3>
-                  <p style="color: rgba(255, 255, 255, 0.9);">작업 중 발생한 문제를 신고합니다</p>
-                </div>
-                <div class="action-arrow" style="color: white;">→</div>
-              </a>
-
-              <a href="/pages/safety/issue-list.html" class="quick-action-card" style="background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); color: white;">
-                <div class="action-content">
-                  <h3 style="color: white;">📋 신고 현황</h3>
-                  <p style="color: rgba(255, 255, 255, 0.9);">신고 목록 및 처리 현황을 확인합니다</p>
-                </div>
-                <div class="action-arrow" style="color: white;">→</div>
-              </a>
-
-              <a href="/pages/work/report-create.html" class="quick-action-card">
-                <div class="action-content">
-                  <h3>작업 보고서 작성</h3>
-                  <p>오늘의 작업 내용을 입력하고 관리합니다</p>
-                </div>
-                <div class="action-arrow">→</div>
-              </a>
-
-              <a href="/pages/work/report-view.html" class="quick-action-card">
-                <div class="action-content">
-                  <h3>작업 현황 확인</h3>
-                  <p>팀원들의 작업 현황을 실시간으로 조회합니다</p>
-                </div>
-                <div class="action-arrow">→</div>
-              </a>
-
-              <a href="/pages/work/analysis.html" class="quick-action-card admin-only">
-                <div class="action-content">
-                  <h3>작업 분석</h3>
-                  <p>작업 효율성 및 통계를 분석합니다</p>
-                </div>
-                <div class="action-arrow">→</div>
-              </a>
-
-              <a href="/pages/admin/projects.html" class="quick-action-card admin-only">
-                <div class="action-content">
-                  <h3>기본 정보 관리</h3>
-                  <p>프로젝트, 작업자, 코드를 관리합니다</p>
-                </div>
-                <div class="action-arrow">→</div>
-              </a>
-
-              <a href="/pages/attendance/daily.html" class="quick-action-card" style="background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); color: white;">
-                <div class="action-content">
-                  <h3 style="color: white;">📅 일일 출퇴근 입력</h3>
-                  <p style="color: rgba(255, 255, 255, 0.9);">오늘의 출퇴근 기록을 입력합니다</p>
-                </div>
-                <div class="action-arrow" style="color: white;">→</div>
-              </a>
-
-              <a href="/pages/attendance/monthly.html" class="quick-action-card">
-                <div class="action-content">
-                  <h3>📆 월별 출퇴근 현황</h3>
-                  <p>이번 달 출퇴근 현황을 조회합니다</p>
-                </div>
-                <div class="action-arrow">→</div>
-              </a>
-
-              <a href="/pages/attendance/vacation-request.html" class="quick-action-card">
-                <div class="action-content">
-                  <h3>📝 휴가 신청</h3>
-                  <p>휴가를 신청하고 신청 내역을 확인합니다</p>
-                </div>
-                <div class="action-arrow">→</div>
-              </a>
-
-              <a href="/pages/attendance/vacation-management.html" class="quick-action-card admin-only">
-                <div class="action-content">
-                  <h3>🏖️ 휴가 관리</h3>
-                  <p>휴가 승인, 직접 입력, 전체 내역을 관리합니다</p>
-                </div>
-                <div class="action-arrow">→</div>
-              </a>
-
-              <a href="/pages/attendance/annual-overview.html" class="quick-action-card admin-only">
-                <div class="action-content">
-                  <h3>📊 연간 연차 현황</h3>
-                  <p>모든 작업자의 연간 휴가 현황을 차트로 확인합니다</p>
-                </div>
-                <div class="action-arrow">→</div>
-              </a>
-
-              <a href="/pages/attendance/vacation-allocation.html" class="quick-action-card admin-only">
-                <div class="action-content">
-                  <h3>➕ 휴가 발생 입력</h3>
-                  <p>작업자별 휴가를 입력하고 특별 휴가를 관리합니다</p>
-                </div>
-                <div class="action-arrow">→</div>
-              </a>
-
-              <a href="/pages/admin/attendance-report.html" class="quick-action-card admin-only">
-                <div class="action-content">
-                  <h3>🔍 출퇴근-작업보고서 대조</h3>
-                  <p>출퇴근 기록과 작업보고서를 비교 분석합니다</p>
-                </div>
-                <div class="action-arrow">→</div>
-              </a>
-            </div>
-          </div>
-        </div>
-      </section>
-
       <!-- 작업장 현황 -->
       <section class="workplace-status-section">
         <div class="card">
diff --git a/web-ui/templates/README.md b/web-ui/templates/README.md
index 7c114db..2c004a5 100644
--- a/web-ui/templates/README.md
+++ b/web-ui/templates/README.md
@@ -79,17 +79,28 @@
 - 색상, 타이포그래피, 간격 등 CSS 변수
 - 공통 컴포넌트 스타일 (버튼, 카드, 배지 등)
 
-### 네비게이션
+### 상단 네비게이션 (Navbar)
 ```html
 <div id="navbar-container"></div>
-<script src="/js/load-navbar.js"></script>
+<script type="module" src="/js/load-navbar.js"></script>
 ```
 - 자동으로 로드되는 표준 네비게이션 헤더
 - 사용자 프로필 메뉴, 로그아웃 기능 포함
+- 현재 시각 표시
+
+### 사이드바 네비게이션 (Sidebar)
+```html
+<div id="sidebar-container"></div>
+<script type="module" src="/js/load-sidebar.js"></script>
+```
+- 카테고리별 접이식 메뉴 (작업관리, 안전관리, 근태관리, 시스템관리)
+- 사용자 권한에 따른 메뉴 자동 필터링
+- 접기/펼치기 상태 자동 저장 (localStorage)
+- 현재 페이지 자동 하이라이트
 
 ### 인증
 ```html
-<script src="/js/auth-check.js"></script>
+<script type="module" src="/js/auth-check.js"></script>
 ```
 - 페이지 접근 시 자동 로그인 확인
 - 미인증 시 로그인 페이지로 리다이렉트
diff --git a/web-ui/templates/admin-layout.html b/web-ui/templates/admin-layout.html
index e1b4bfd..c9ee676 100644
--- a/web-ui/templates/admin-layout.html
+++ b/web-ui/templates/admin-layout.html
@@ -17,12 +17,16 @@
   <script type="module" src="/js/api-config.js"></script>
   <script type="module" src="/js/auth-check.js"></script>
   <script type="module" src="/js/load-navbar.js"></script>
+  <script type="module" src="/js/load-sidebar.js"></script>
 
   <!-- 페이지별 스크립트 추가 -->
   <!-- <script type="module" src="/js/your-admin-page.js" defer></script> -->
 </head>
 
 <body>
+  <!-- 사이드바 네비게이션 (자동 로드됨) -->
+  <div id="sidebar-container"></div>
+
   <!-- 네비게이션 헤더 (자동 로드됨) -->
   <div id="navbar-container"></div>
 
diff --git a/web-ui/templates/dashboard-layout.html b/web-ui/templates/dashboard-layout.html
index 40126fb..fa06825 100644
--- a/web-ui/templates/dashboard-layout.html
+++ b/web-ui/templates/dashboard-layout.html
@@ -15,12 +15,16 @@
   <script type="module" src="/js/api-config.js"></script>
   <script type="module" src="/js/auth-check.js" defer></script>
   <script type="module" src="/js/load-navbar.js"></script>
+  <script type="module" src="/js/load-sidebar.js"></script>
 
   <!-- 페이지별 스크립트 추가 -->
   <!-- <script type="module" src="/js/your-page.js" defer></script> -->
 </head>
 
 <body>
+  <!-- 사이드바 네비게이션 (자동 로드됨) -->
+  <div id="sidebar-container"></div>
+
   <!-- 메인 컨테이너 -->
   <div class="dashboard-container">
 
diff --git a/web-ui/templates/simple-layout.html b/web-ui/templates/simple-layout.html
index 68a99cf..d2b4d2f 100644
--- a/web-ui/templates/simple-layout.html
+++ b/web-ui/templates/simple-layout.html
@@ -16,12 +16,16 @@
   <script type="module" src="/js/api-config.js"></script>
   <script type="module" src="/js/auth-check.js"></script>
   <script type="module" src="/js/load-navbar.js"></script>
+  <script type="module" src="/js/load-sidebar.js"></script>
 
   <!-- 페이지별 스크립트 추가 -->
   <!-- <script type="module" src="/js/your-page.js" defer></script> -->
 </head>
 
 <body>
+  <!-- 사이드바 네비게이션 (자동 로드됨) -->
+  <div id="sidebar-container"></div>
+
   <!-- 네비게이션 헤더 (자동 로드됨) -->
   <div id="navbar-container"></div>
 
diff --git a/web-ui/templates/work-layout.html b/web-ui/templates/work-layout.html
index d4c1c80..44ca82d 100644
--- a/web-ui/templates/work-layout.html
+++ b/web-ui/templates/work-layout.html
@@ -17,12 +17,16 @@
   <script type="module" src="/js/api-config.js"></script>
   <script type="module" src="/js/auth-check.js"></script>
   <script type="module" src="/js/load-navbar.js"></script>
+  <script type="module" src="/js/load-sidebar.js"></script>
 
   <!-- 페이지별 스크립트 추가 -->
   <!-- <script type="module" src="/js/your-page.js" defer></script> -->
 </head>
 
 <body>
+  <!-- 사이드바 네비게이션 (자동 로드됨) -->
+  <div id="sidebar-container"></div>
+
   <!-- 네비게이션 헤더 (자동 로드됨) -->
   <div id="navbar-container"></div>