diff --git a/backend/templates/app_layout.templ b/backend/templates/app_layout.templ
index aac8659..de5d2eb 100644
--- a/backend/templates/app_layout.templ
+++ b/backend/templates/app_layout.templ
@@ -122,28 +122,59 @@ templ SidebarOrganizationFooter(user *auth.User, csrfToken string) {
 }
 
 // DashboardSidebar renders the full sidebar with brand, nav, projects, and footer.
+// Rebuilt in Phase 18 Plan 02 per D-07/D-08/D-09: two-section structure (GENERAL + PROJECTS),
+// collapse button wired via inline JS (no server round-trip, resets on reload per D-09).
+// SidebarOrganizationFooter moves to avatar dropdown in Plan 03.
 templ DashboardSidebar(activePath string, tablos []sqlc.Tablo, user *auth.User, csrfToken string) {
 	<aside class="dashboard-sidebar">
 		<nav aria-label="Main navigation" class="sidebar-nav-shell">
+			<!-- Brand / logo -->
 			<div class="sidebar-brand">
 				<a class="sidebar-brand-link" href="/" aria-label="Home">
 					<img class="sidebar-brand-logo" src="/static/logo_dark.png" alt="Logo XTablo"/>
 					<h1 class="sidebar-brand-title">XTablo</h1>
 				</a>
+				<button
+					class="sidebar-collapse-button"
+					aria-label="Toggle sidebar"
+					onclick="(function(btn){var shell=document.querySelector('.dashboard-shell');if(shell){shell.classList.toggle('sidebar-is-collapsed');}})(this)"
+					type="button"
+				>
+					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" width="16" height="16">
+						<path d="m15 18-6-6 6-6"/>
+					</svg>
+				</button>
 			</div>
+
+			<!-- GENERAL section -->
 			<div class="sidebar-primary">
+				<div class="sidebar-section-label">General</div>
 				<ul class="sidebar-list" role="list">
 					for _, item := range sidebarPrimaryNavItems(activePath) {
 						<li>
 							@SidebarNavItemRow(item)
 						</li>
-						if item.DividerAfter {
-							<li class="sidebar-divider"><hr role="separator"/></li>
-						}
 					}
 				</ul>
-				@SidebarProjectsSection(tablos)
-				@SidebarOrganizationFooter(user, csrfToken)
+
+				<!-- PROJECTS section (tablo list) -->
+				<div class="sidebar-projects">
+					<div class="sidebar-section-label">Projects</div>
+					<ul class="sidebar-project-list">
+						for _, tablo := range tablos {
+							<li>
+								<a href={ templ.SafeURL("/tablos/" + tablo.ID.String()) } class="sidebar-project-link">
+									if tablo.Color.Valid && tablo.Color.String != "" {
+										<span class="sidebar-project-icon" style={ "background-color: " + tablo.Color.String }></span>
+									} else {
+										<span class="sidebar-project-icon"></span>
+									}
+									<span class="sidebar-project-label">{ tablo.Title }</span>
+								</a>
+							</li>
+						}
+					</ul>
+				</div>
 			</div>
 		</nav>
 	</aside>