diff --git a/website/canvas.html b/website/canvas.html
index ca6b60a..424e186 100644
--- a/website/canvas.html
+++ b/website/canvas.html
@@ -2316,17 +2316,17 @@
 		<!-- Reminder mini-calendar widget -->
 		<style>
 			#reminder-widget {
-				position: fixed; top: 108px; right: 16px; z-index: 1001;
+				position: fixed; z-index: 1001;
 				background: var(--rs-toolbar-bg, #1a1a2e); border: 1px solid #333;
 				border-radius: 14px; padding: 14px; width: 260px;
 				box-shadow: 0 8px 32px rgba(0,0,0,0.4);
-				opacity: 0; transform: translateY(-8px) scale(0.96);
+				opacity: 0; transform: scale(0.3); transform-origin: top left;
 				pointer-events: none; transition: opacity 0.2s, transform 0.2s;
 				font-family: system-ui, -apple-system, sans-serif;
 				color: var(--rs-text, #e0e0e0);
 			}
 			#reminder-widget.visible {
-				opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
+				opacity: 1; transform: scale(1); pointer-events: auto;
 			}
 			.rw-header { font-size: 12px; color: #94a3b8; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
 			.rw-header-icon { font-size: 16px; }
@@ -3118,7 +3118,17 @@
 								ev.stopPropagation();
 								if (rwWidget.classList.contains("visible")) {
 									rwWidget.classList.remove("visible");
+									scheduleIconEl.classList.add("visible");
 								} else {
+									// Position widget at the icon, then hide the icon
+									const iconRect = scheduleIconEl.getBoundingClientRect();
+									const ww = 260 + 28; // widget width + padding
+									const wh = 340; // approx widget height
+									const left = Math.min(iconRect.left, window.innerWidth - ww);
+									const top = Math.min(Math.max(iconRect.top, 8), window.innerHeight - wh);
+									rwWidget.style.left = left + "px";
+									rwWidget.style.top = top + "px";
+									scheduleIconEl.classList.remove("visible");
 									updateReminderWidget();
 								}
 							});