diff --git a/public/app.mjs b/public/app.mjs
index 5b32367..09f928f 100644
--- a/public/app.mjs
+++ b/public/app.mjs
@@ -263,9 +263,9 @@ function make_task_row(task, children_map) {
 	row.dataset.priority = task.priority;
 	row.dataset.status   = task.status;
 
-	// Expand button
+	// Expand button — hidden in flat mode
 	const expand_btn = row.querySelector('.btn-expand');
-	if (children.length > 0) {
+	if (!state.flat_mode && children.length > 0) {
 		show(expand_btn);
 		expand_btn.textContent = state.expanded.has(task.id) ? '▼' : '▶';
 		expand_btn.addEventListener('click', () => {
@@ -350,10 +350,17 @@ function render_tasks(container) {
 	toolbar.className = 'toolbar';
 	toolbar.innerHTML = '<h2>Tasks</h2>';
 
-	const flat_btn = document.createElement('button');
-	flat_btn.textContent = state.flat_mode ? 'Tree mode' : 'Flat mode';
-	flat_btn.addEventListener('click', () => { state.flat_mode = !state.flat_mode; render(); });
-	toolbar.appendChild(flat_btn);
+	const mode_toggle = document.createElement('div');
+	mode_toggle.className = 'segmented-control';
+	for (const [val, label] of [[false, 'Tree'], [true, 'Flat']]) {
+		const btn = document.createElement('button');
+		btn.type = 'button';
+		btn.textContent = label;
+		btn.classList.toggle('active', state.flat_mode === val);
+		btn.addEventListener('click', () => { state.flat_mode = val; render(); });
+		mode_toggle.appendChild(btn);
+	}
+	toolbar.appendChild(mode_toggle);
 
 	const add_btn = document.createElement('button');
 	add_btn.className = 'btn-primary';
diff --git a/public/style.css b/public/style.css
index ab01252..ee8e64e 100644
--- a/public/style.css
+++ b/public/style.css
@@ -35,6 +35,27 @@ nav { display: flex; gap: 0.5rem; }
 	font-size: 13px;
 }
 
+.segmented-control {
+	display: flex;
+	border: 1px solid #444;
+	border-radius: 4px;
+	overflow: hidden;
+}
+
+.segmented-control button {
+	border: none;
+	border-radius: 0;
+	padding: 0.3rem 0.75rem;
+	background: transparent;
+	color: #777;
+	font-size: 13px;
+}
+
+.segmented-control button + button { border-left: 1px solid #444; }
+
+.segmented-control button.active { background: #383838; color: #fff; }
+.segmented-control button:hover:not(.active) { color: #bbb; }
+
 .nav-btn.active, .nav-btn:hover {
 	background: #333;
 	color: #fff;