diff --git a/website/canvas.html b/website/canvas.html
index ceceb4f..3be790c 100644
--- a/website/canvas.html
+++ b/website/canvas.html
@@ -26,33 +26,131 @@
 				left: 50%;
 				transform: translateX(-50%);
 				display: flex;
-				gap: 8px;
-				padding: 8px 16px;
+				align-items: center;
+				gap: 4px;
+				padding: 6px 10px;
 				background: white;
 				border-radius: 12px;
 				box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
 				z-index: 1000;
 			}
 
-			#toolbar button {
-				padding: 8px 16px;
+			/* Dropdown group container */
+			.toolbar-group {
+				position: relative;
+			}
+
+			.toolbar-group-toggle {
+				padding: 7px 12px;
 				border: none;
 				border-radius: 8px;
 				background: #f1f5f9;
 				cursor: pointer;
-				font-size: 14px;
+				font-size: 13px;
 				transition: background 0.2s;
+				white-space: nowrap;
 			}
 
-			#toolbar button:hover {
+			.toolbar-group-toggle:hover {
 				background: #e2e8f0;
 			}
 
-			#toolbar button.active {
+			.toolbar-group.open > .toolbar-group-toggle {
 				background: #14b8a6;
 				color: white;
 			}
 
+			.toolbar-dropdown {
+				display: none;
+				position: absolute;
+				top: calc(100% + 6px);
+				left: 50%;
+				transform: translateX(-50%);
+				min-width: 160px;
+				background: white;
+				border-radius: 10px;
+				box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
+				padding: 6px;
+				z-index: 1001;
+			}
+
+			.toolbar-group.open > .toolbar-dropdown {
+				display: flex;
+				flex-direction: column;
+				gap: 2px;
+			}
+
+			.toolbar-dropdown button {
+				padding: 8px 12px;
+				border: none;
+				border-radius: 6px;
+				background: transparent;
+				cursor: pointer;
+				font-size: 13px;
+				text-align: left;
+				white-space: nowrap;
+				transition: background 0.15s;
+			}
+
+			.toolbar-dropdown button:hover {
+				background: #f1f5f9;
+			}
+
+			/* Separator between sections */
+			.toolbar-sep {
+				width: 1px;
+				height: 24px;
+				background: #e2e8f0;
+				margin: 0 2px;
+				flex-shrink: 0;
+			}
+
+			/* Direct toolbar buttons (Connect, Memory, Zoom) */
+			#toolbar > button {
+				padding: 7px 12px;
+				border: none;
+				border-radius: 8px;
+				background: #f1f5f9;
+				cursor: pointer;
+				font-size: 13px;
+				transition: background 0.2s;
+				white-space: nowrap;
+			}
+
+			#toolbar > button:hover {
+				background: #e2e8f0;
+			}
+
+			#toolbar > button.active {
+				background: #14b8a6;
+				color: white;
+			}
+
+			/* Collapse/expand toggle */
+			#toolbar-collapse {
+				padding: 7px 8px !important;
+				background: transparent !important;
+				font-size: 16px !important;
+				line-height: 1;
+				opacity: 0.6;
+				transition: opacity 0.2s;
+			}
+
+			#toolbar-collapse:hover {
+				opacity: 1;
+				background: #f1f5f9 !important;
+			}
+
+			#toolbar.collapsed .toolbar-group,
+			#toolbar.collapsed .toolbar-sep,
+			#toolbar.collapsed > button:not(#toolbar-collapse) {
+				display: none;
+			}
+
+			#toolbar.collapsed {
+				padding: 6px;
+			}
+
 			#community-info {
 				position: fixed;
 				top: 72px;
@@ -389,7 +487,7 @@
 					touch-action: manipulation;
 				}
 
-				/* Hide desktop toolbar, show as grid overlay when toggled */
+				/* Hide desktop toolbar, show as column overlay when toggled */
 				#toolbar {
 					display: none;
 					position: fixed;
@@ -410,20 +508,48 @@
 					display: flex;
 				}
 
-				#toolbar button {
-					flex: 0 0 calc(33.33% - 4px);
-					padding: 10px 4px;
-					font-size: 12px;
-					text-align: center;
-					white-space: nowrap;
-					overflow: hidden;
-					text-overflow: ellipsis;
+				/* On mobile, flatten groups into a grid */
+				#toolbar .toolbar-group {
+					width: 100%;
 				}
 
-				/* Hide zoom/reset from toolbar grid (they're in #mobile-zoom) */
+				#toolbar .toolbar-group-toggle {
+					width: 100%;
+					text-align: left;
+					padding: 10px 12px;
+					font-size: 13px;
+				}
+
+				#toolbar .toolbar-dropdown {
+					position: static;
+					transform: none;
+					box-shadow: none;
+					padding: 4px 0 4px 12px;
+					min-width: 0;
+				}
+
+				#toolbar .toolbar-dropdown button {
+					padding: 10px 12px;
+					font-size: 13px;
+				}
+
+				#toolbar > button {
+					width: 100%;
+					text-align: left;
+					padding: 10px 12px;
+				}
+
+				#toolbar .toolbar-sep {
+					width: 100%;
+					height: 1px;
+					margin: 4px 0;
+				}
+
+				/* Hide zoom/reset from toolbar (they're in #mobile-zoom) */
 				#toolbar #zoom-in,
 				#toolbar #zoom-out,
-				#toolbar #reset-view {
+				#toolbar #reset-view,
+				#toolbar #toolbar-collapse {
 					display: none;
 				}
 
@@ -461,36 +587,79 @@
 		</div>
 
 		<div id="toolbar">
-			<button id="new-markdown" title="New Note">📝 Note</button>
-			<button id="new-wrapper" title="New Card">🗂️ Card</button>
-			<button id="new-slide" title="New Slide">🎞️ Slide</button>
-			<button id="new-chat" title="New Chat">💬 Chat</button>
-			<button id="new-piano" title="New Piano">🎹 Piano</button>
-			<button id="new-embed" title="New Embed">🔗 Embed</button>
-			<button id="new-google-item" title="New Google Item">📎 Google</button>
-			<button id="new-calendar" title="New Calendar">📅 Calendar</button>
-			<button id="new-map" title="New Map">🗺️ Map</button>
-			<button id="new-image-gen" title="New AI Image">🎨 Image</button>
-			<button id="new-video-gen" title="New AI Video">🎬 Video</button>
-			<button id="new-prompt" title="New AI Chat">🤖 AI</button>
-			<button id="new-transcription" title="New Transcription">🎤 Transcribe</button>
-			<button id="new-video-chat" title="New Video Call">📹 Call</button>
-			<button id="new-obs-note" title="New Rich Note">📓 Rich Note</button>
-			<button id="new-workflow" title="New Workflow">⚙️ Workflow</button>
-			<button id="new-itinerary" title="New Itinerary">🗓️ Itinerary</button>
-			<button id="new-destination" title="New Destination">📍 Destination</button>
-			<button id="new-budget" title="New Budget">💰 Budget</button>
-			<button id="new-packing-list" title="New Packing List">🎒 Packing</button>
-			<button id="new-booking" title="New Booking">✈️ Booking</button>
-			<button id="new-token" title="New Token">🪙 Token</button>
-			<button id="new-choice-vote" title="New Poll">☑ Poll</button>
-			<button id="new-choice-rank" title="New Ranking">📊 Rank</button>
-			<button id="new-choice-spider" title="New Scoring">🕸 Spider</button>
-			<button id="new-social-post" title="New Post">📱 Post</button>
+			<button id="toolbar-collapse" title="Minimize toolbar">◀</button>
+
+			<div class="toolbar-group">
+				<button class="toolbar-group-toggle">📝 Create</button>
+				<div class="toolbar-dropdown">
+					<button id="new-markdown" title="New Note">📝 Note</button>
+					<button id="new-wrapper" title="New Card">🗂️ Card</button>
+					<button id="new-slide" title="New Slide">🎞️ Slide</button>
+					<button id="new-obs-note" title="New Rich Note">📓 Rich Note</button>
+					<button id="new-chat" title="New Chat">💬 Chat</button>
+				</div>
+			</div>
+
+			<div class="toolbar-group">
+				<button class="toolbar-group-toggle">🎨 Media</button>
+				<div class="toolbar-dropdown">
+					<button id="new-image-gen" title="New AI Image">🎨 AI Image</button>
+					<button id="new-video-gen" title="New AI Video">🎬 AI Video</button>
+					<button id="new-transcription" title="New Transcription">🎤 Transcribe</button>
+					<button id="new-video-chat" title="New Video Call">📹 Video Call</button>
+					<button id="new-piano" title="New Piano">🎹 Piano</button>
+				</div>
+			</div>
+
+			<div class="toolbar-group">
+				<button class="toolbar-group-toggle">🔗 Embed</button>
+				<div class="toolbar-dropdown">
+					<button id="new-embed" title="New Embed">🔗 Web Embed</button>
+					<button id="new-google-item" title="New Google Item">📎 Google</button>
+					<button id="new-calendar" title="New Calendar">📅 Calendar</button>
+					<button id="new-map" title="New Map">🗺️ Map</button>
+					<button id="new-social-post" title="New Post">📱 Social Post</button>
+				</div>
+			</div>
+
+			<div class="toolbar-group">
+				<button class="toolbar-group-toggle">🤖 AI</button>
+				<div class="toolbar-dropdown">
+					<button id="new-prompt" title="New AI Chat">🤖 AI Chat</button>
+					<button id="new-workflow" title="New Workflow">⚙️ Workflow</button>
+				</div>
+			</div>
+
+			<div class="toolbar-group">
+				<button class="toolbar-group-toggle">✈️ Travel</button>
+				<div class="toolbar-dropdown">
+					<button id="new-itinerary" title="New Itinerary">🗓️ Itinerary</button>
+					<button id="new-destination" title="New Destination">📍 Destination</button>
+					<button id="new-budget" title="New Budget">💰 Budget</button>
+					<button id="new-packing-list" title="New Packing List">🎒 Packing List</button>
+					<button id="new-booking" title="New Booking">✈️ Booking</button>
+				</div>
+			</div>
+
+			<div class="toolbar-group">
+				<button class="toolbar-group-toggle">📊 Decide</button>
+				<div class="toolbar-dropdown">
+					<button id="new-choice-vote" title="New Poll">☑ Poll</button>
+					<button id="new-choice-rank" title="New Ranking">📊 Ranking</button>
+					<button id="new-choice-spider" title="New Scoring">🕸 Scoring</button>
+					<button id="new-token" title="New Token">🪙 Token</button>
+				</div>
+			</div>
+
+			<span class="toolbar-sep"></span>
+
 			<button id="new-arrow" title="Connect rSpaces">↗️ Connect</button>
 			<button id="toggle-memory" title="Forgotten rSpaces">💭 Memory</button>
+
+			<span class="toolbar-sep"></span>
+
 			<button id="zoom-in" title="Zoom In">+</button>
-			<button id="zoom-out" title="Zoom Out">-</button>
+			<button id="zoom-out" title="Zoom Out">−</button>
 			<button id="reset-view" title="Reset View">Reset</button>
 		</div>
 
@@ -1458,14 +1627,50 @@
 				if (window.innerWidth > 768) return;
 				const btn = e.target.closest("button");
 				if (!btn) return;
-				// Keep open for connect, memory, zoom controls
-				const keepOpen = ["new-arrow", "toggle-memory", "zoom-in", "zoom-out", "reset-view"];
+				// Keep open for connect, memory, zoom, group toggles, collapse
+				const keepOpen = ["new-arrow", "toggle-memory", "zoom-in", "zoom-out", "reset-view", "toolbar-collapse"];
+				if (btn.classList.contains("toolbar-group-toggle")) return;
 				if (!keepOpen.includes(btn.id)) {
 					toolbarEl.classList.remove("mobile-open");
 					mobileMenuBtn.textContent = "✚";
 				}
 			});
 
+			// Dropdown group toggles
+			toolbarEl.querySelectorAll(".toolbar-group-toggle").forEach(toggle => {
+				toggle.addEventListener("click", (e) => {
+					e.stopPropagation();
+					const group = toggle.closest(".toolbar-group");
+					const wasOpen = group.classList.contains("open");
+					// Close all other groups
+					toolbarEl.querySelectorAll(".toolbar-group.open").forEach(g => g.classList.remove("open"));
+					// Toggle this one
+					if (!wasOpen) group.classList.add("open");
+				});
+			});
+
+			// Close dropdowns when clicking a tool inside one
+			toolbarEl.querySelectorAll(".toolbar-dropdown button").forEach(btn => {
+				btn.addEventListener("click", () => {
+					toolbarEl.querySelectorAll(".toolbar-group.open").forEach(g => g.classList.remove("open"));
+				});
+			});
+
+			// Close dropdowns when clicking outside
+			document.addEventListener("click", (e) => {
+				if (!e.target.closest("#toolbar")) {
+					toolbarEl.querySelectorAll(".toolbar-group.open").forEach(g => g.classList.remove("open"));
+				}
+			});
+
+			// Collapse/expand toolbar
+			const collapseBtn = document.getElementById("toolbar-collapse");
+			collapseBtn.addEventListener("click", () => {
+				const isCollapsed = toolbarEl.classList.toggle("collapsed");
+				collapseBtn.textContent = isCollapsed ? "▶" : "◀";
+				collapseBtn.title = isCollapsed ? "Expand toolbar" : "Minimize toolbar";
+			});
+
 			// Mobile zoom controls (separate from toolbar)
 			document.getElementById("mz-in").addEventListener("click", () => {
 				scale = Math.min(scale * 1.25, maxScale);