diff --git a/website/canvas.html b/website/canvas.html
index 69e8be5..a82891f 100644
--- a/website/canvas.html
+++ b/website/canvas.html
@@ -241,6 +241,19 @@
 				color: white;
 			}
 
+			/* Icon + label structure inside toggle */
+			.tg-icon {
+				flex-shrink: 0;
+				font-size: 18px;
+				line-height: 1;
+			}
+			.tg-label {
+				display: none;
+				font-size: 12px;
+				font-weight: 600;
+				white-space: nowrap;
+			}
+
 			/* Icon-only toolbar: show only emoji, fluid expand on hover/open */
 			.toolbar-group-toggle {
 				max-width: 42px;
@@ -251,15 +264,22 @@
 				padding-right: 0;
 				position: relative;
 				transition: max-width 0.25s ease, padding 0.2s ease;
+				gap: 6px;
 			}
 
 			/* Fluid expand: show title text on hover or when group is open */
 			.toolbar-group:hover > .toolbar-group-toggle,
 			.toolbar-group.open > .toolbar-group-toggle {
 				max-width: 160px;
-				padding-left: 10px;
+				padding-left: 8px;
 				padding-right: 10px;
 				text-align: left;
+				justify-content: flex-start;
+			}
+
+			.toolbar-group:hover > .toolbar-group-toggle .tg-label,
+			.toolbar-group.open > .toolbar-group-toggle .tg-label {
+				display: inline;
 			}
 
 			/* Collapse/expand toggle — at top of toolbar */
@@ -1561,12 +1581,17 @@
 					overflow: visible;
 					justify-content: flex-start;
 				}
-				/* Show group name on mobile via title attr */
-				#toolbar .toolbar-group-toggle::after {
-					content: attr(title);
-					margin-left: 8px;
+				/* Show group name on mobile */
+				#toolbar .toolbar-group-toggle .tg-label {
+					display: inline;
 					font-size: 15px;
 				}
+				#toolbar .toolbar-group-toggle {
+					max-width: none;
+					padding-left: 10px;
+					padding-right: 10px;
+					justify-content: flex-start;
+				}
 
 				#toolbar .toolbar-dropdown {
 					position: static;
@@ -1871,7 +1896,7 @@
 
 			<!-- 1. Note -->
 			<div class="toolbar-group">
-				<button class="toolbar-group-toggle" title="Note">📝</button>
+				<button class="toolbar-group-toggle" title="Note"><span class="tg-icon">📝</span><span class="tg-label">Note</span></button>
 				<div class="toolbar-dropdown">
 					<div class="toolbar-dropdown-header">Note</div>
 					<button id="new-markdown" title="New Note">📝 Note</button>
@@ -1881,7 +1906,7 @@
 
 			<!-- 2. Connect -->
 			<div class="toolbar-group">
-				<button class="toolbar-group-toggle" title="Connect">🤝</button>
+				<button class="toolbar-group-toggle" title="Connect"><span class="tg-icon">🤝</span><span class="tg-label">Connect</span></button>
 				<div class="toolbar-dropdown">
 					<div class="toolbar-dropdown-header">Connect</div>
 					<button id="new-chat" title="New Chat">💬 Chat</button>
@@ -1892,7 +1917,7 @@
 
 			<!-- 3. Media -->
 			<div class="toolbar-group">
-				<button class="toolbar-group-toggle" title="Media">🎵</button>
+				<button class="toolbar-group-toggle" title="Media"><span class="tg-icon">🎵</span><span class="tg-label">Media</span></button>
 				<div class="toolbar-dropdown">
 					<div class="toolbar-dropdown-header">Media</div>
 					<button id="new-transcription" title="Transcribe">🎤 Transcribe</button>
@@ -1905,7 +1930,7 @@
 
 			<!-- 4. Embed -->
 			<div class="toolbar-group">
-				<button class="toolbar-group-toggle" title="Embed">🔗</button>
+				<button class="toolbar-group-toggle" title="Embed"><span class="tg-icon">🔗</span><span class="tg-label">Embed</span></button>
 				<div class="toolbar-dropdown">
 					<div class="toolbar-dropdown-header">Embed</div>
 					<button id="new-embed" title="Web Embed">🔗 Web Embed</button>
@@ -1927,7 +1952,7 @@
 
 			<!-- 5. AI -->
 			<div class="toolbar-group">
-				<button class="toolbar-group-toggle" title="AI">🤖</button>
+				<button class="toolbar-group-toggle" title="AI"><span class="tg-icon">🤖</span><span class="tg-label">AI</span></button>
 				<div class="toolbar-dropdown">
 					<div class="toolbar-dropdown-header">AI</div>
 					<button id="new-prompt" title="AI Chat">🤖 AI Chat</button>
@@ -1940,7 +1965,7 @@
 
 			<!-- 6. Create -->
 			<div class="toolbar-group">
-				<button class="toolbar-group-toggle" title="Create">🛠️</button>
+				<button class="toolbar-group-toggle" title="Create"><span class="tg-icon">🛠️</span><span class="tg-label">Create</span></button>
 				<div class="toolbar-dropdown">
 					<div class="toolbar-dropdown-header">Create</div>
 					<button id="new-splat" title="3D Splat">🔮 3D Splat</button>
@@ -1955,7 +1980,7 @@
 
 			<!-- 7. Decide -->
 			<div class="toolbar-group">
-				<button class="toolbar-group-toggle" title="Decide">📊</button>
+				<button class="toolbar-group-toggle" title="Decide"><span class="tg-icon">📊</span><span class="tg-label">Decide</span></button>
 				<div class="toolbar-dropdown">
 					<div class="toolbar-dropdown-header">Decide</div>
 					<button id="new-choice-vote" title="Poll">☑ Poll</button>
@@ -1970,7 +1995,7 @@
 
 			<!-- 8. Spend -->
 			<div class="toolbar-group">
-				<button class="toolbar-group-toggle" title="Spend">💰</button>
+				<button class="toolbar-group-toggle" title="Spend"><span class="tg-icon">💰</span><span class="tg-label">Spend</span></button>
 				<div class="toolbar-dropdown">
 					<div class="toolbar-dropdown-header">Spend</div>
 					<button id="embed-wallet" title="rWallet">💰 rWallet</button>
@@ -1980,7 +2005,7 @@
 
 			<!-- 9. Travel -->
 			<div class="toolbar-group">
-				<button class="toolbar-group-toggle" title="Travel">✈️</button>
+				<button class="toolbar-group-toggle" title="Travel"><span class="tg-icon">✈️</span><span class="tg-label">Travel</span></button>
 				<div class="toolbar-dropdown">
 					<div class="toolbar-dropdown-header">Travel</div>
 					<button id="new-itinerary" title="Itinerary">🗓️ Itinerary</button>
@@ -4385,7 +4410,7 @@
 
 					const heading = document.createElement("div");
 					heading.className = "menu-heading";
-					heading.textContent = toggle.textContent.trim();
+					heading.textContent = toggle.getAttribute("title") || toggle.textContent.trim();
 					toolPlusMenu.appendChild(heading);
 
 					for (const origBtn of dropdown.querySelectorAll("button")) {
@@ -5078,8 +5103,8 @@
 				const dropdown = group.querySelector(".toolbar-dropdown");
 				if (!dropdown) return;
 
-				// Set header text from the toggle button
-				toolbarPanelHeader.textContent = toggle.textContent.trim();
+				// Set header text from the toggle button's title attribute
+				toolbarPanelHeader.textContent = toggle.getAttribute("title") || toggle.textContent.trim();
 
 				// Clone dropdown buttons into the panel body
 				toolbarPanelBody.innerHTML = "";