diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..29c8891
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,5 @@
+# Palette Journal
+
+## 2025-03-27 - Nesting Triggers with Radix UI Tooltips and Dropdown Menus
+**Learning:** When adding tooltips to an element that is already a Radix UI trigger (like a `DropdownMenuTrigger` in the Topbar), the combination of triggers must explicitly use `asChild` for proper event delegation.
+**Action:** Strictly use the `asChild` prop at each intermediate trigger layer down to the final interactive element: `<TooltipTrigger asChild>` -> `<DropdownMenuTrigger asChild>` -> `<Button>`. This maintains accessibility and ensures both the tooltip and dropdown operate smoothly.
diff --git a/src/components/nav/topbar.tsx b/src/components/nav/topbar.tsx
index 9d1d921..5d2fb30 100644
--- a/src/components/nav/topbar.tsx
+++ b/src/components/nav/topbar.tsx
@@ -12,6 +12,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 
 export function Topbar() {
   return (
@@ -52,59 +53,76 @@ export function Topbar() {
 
       {/* Right Side - Actions */}
       <div className="flex items-center gap-2">
-        {/* Notifications */}
-        <Button
-          variant="ghost"
-          size="icon"
-          className="text-neutral-medium hover:text-[var(--foreground)] hover:bg-[var(--surface)] transition-colors duration-150"
-          aria-label="Notifications"
-        >
-          <Bell className="size-4" />
-        </Button>
+        <TooltipProvider>
+          {/* Notifications */}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="text-neutral-medium hover:text-[var(--foreground)] hover:bg-[var(--surface)] transition-colors duration-150"
+                aria-label="Notifications"
+              >
+                <Bell className="size-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Notifications</TooltipContent>
+          </Tooltip>
 
-        {/* User Menu */}
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="text-neutral-medium hover:text-[var(--foreground)] hover:bg-[var(--surface)] transition-colors duration-150"
-              aria-label="User menu"
+          {/* User Menu */}
+          <DropdownMenu>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="text-neutral-medium hover:text-[var(--foreground)] hover:bg-[var(--surface)] transition-colors duration-150"
+                    aria-label="User menu"
+                  >
+                    <User className="size-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+              </TooltipTrigger>
+              <TooltipContent>User menu</TooltipContent>
+            </Tooltip>
+            <DropdownMenuContent
+              align="end"
+              className="bg-[var(--background)] border border-[var(--border)] text-[var(--foreground)]"
             >
-              <User className="size-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            align="end"
-            className="bg-[var(--background)] border border-[var(--border)] text-[var(--foreground)]"
-          >
-            <DropdownMenuLabel className="text-[var(--foreground)]">My Account</DropdownMenuLabel>
-            <DropdownMenuSeparator className="bg-[var(--border)]" />
-            <DropdownMenuItem className="text-[var(--foreground)] hover:bg-[var(--surface)]">
-              Profile
-            </DropdownMenuItem>
-            <DropdownMenuItem className="text-[var(--foreground)] hover:bg-[var(--surface)]">
-              Settings
-            </DropdownMenuItem>
-            <DropdownMenuSeparator className="bg-[var(--border)]" />
-            <DropdownMenuItem className="text-[var(--foreground)] hover:bg-[var(--surface)]">
-              Logout
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
+              <DropdownMenuLabel className="text-[var(--foreground)]">My Account</DropdownMenuLabel>
+              <DropdownMenuSeparator className="bg-[var(--border)]" />
+              <DropdownMenuItem className="text-[var(--foreground)] hover:bg-[var(--surface)]">
+                Profile
+              </DropdownMenuItem>
+              <DropdownMenuItem className="text-[var(--foreground)] hover:bg-[var(--surface)]">
+                Settings
+              </DropdownMenuItem>
+              <DropdownMenuSeparator className="bg-[var(--border)]" />
+              <DropdownMenuItem className="text-[var(--foreground)] hover:bg-[var(--surface)]">
+                Logout
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
 
-        {/* Settings Link */}
-        <Button
-          variant="ghost"
-          size="icon"
-          className="text-neutral-medium hover:text-[var(--foreground)] hover:bg-[var(--surface)] transition-colors duration-150"
-          aria-label="Settings"
-          asChild
-        >
-          <a href="/settings">
-            <SettingsIcon className="size-4" />
-          </a>
-        </Button>
+          {/* Settings Link */}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="text-neutral-medium hover:text-[var(--foreground)] hover:bg-[var(--surface)] transition-colors duration-150"
+                aria-label="Settings"
+                asChild
+              >
+                <a href="/settings">
+                  <SettingsIcon className="size-4" />
+                </a>
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Settings</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
       </div>
     </header>
   )