diff --git a/ui/src/components/LayoutShell.tsx b/ui/src/components/LayoutShell.tsx
index ef17f094..6d9abcd5 100644
--- a/ui/src/components/LayoutShell.tsx
+++ b/ui/src/components/LayoutShell.tsx
@@ -1,5 +1,5 @@
 import { Outlet, useNavigate, useLocation } from 'react-router';
-import { AppShell, Sidebar, TopBar, CommandPalette, CommandPaletteProvider, GlobalFilterProvider, useCommandPalette, Dropdown, Avatar } from '@cameleer/design-system';
+import { AppShell, Sidebar, TopBar, CommandPalette, CommandPaletteProvider, GlobalFilterProvider, ToastProvider, useCommandPalette } from '@cameleer/design-system';
 import { useRouteCatalog } from '../api/queries/catalog';
 import { useAuthStore } from '../auth/auth-store';
 import { useMemo, useCallback } from 'react';
@@ -41,6 +41,11 @@ function LayoutContent() {
     }));
   }, [location.pathname]);
 
+  const handleLogout = useCallback(() => {
+    logout();
+    navigate('/login');
+  }, [logout, navigate]);
+
   const handlePaletteSelect = useCallback((result: any) => {
     if (result.path) navigate(result.path);
     setPaletteOpen(false);
@@ -56,22 +61,11 @@ function LayoutContent() {
         />
       }
     >
-      <div style={{ display: 'flex', alignItems: 'center' }}>
-        <TopBar
-          breadcrumb={breadcrumb}
-          user={username ? { name: username } : undefined}
-        />
-        {username && (
-          <Dropdown
-            trigger={<Avatar name={username} size="sm" />}
-            items={[
-              { label: `Signed in as ${username}`, disabled: true },
-              { divider: true, label: '' },
-              { label: 'Logout', onClick: () => { logout(); navigate('/login'); } },
-            ]}
-          />
-        )}
-      </div>
+      <TopBar
+        breadcrumb={breadcrumb}
+        user={username ? { name: username } : undefined}
+        onLogout={handleLogout}
+      />
       <CommandPalette
         open={paletteOpen}
         onClose={() => setPaletteOpen(false)}
@@ -87,10 +81,12 @@ function LayoutContent() {
 
 export function LayoutShell() {
   return (
-    <CommandPaletteProvider>
-      <GlobalFilterProvider>
-        <LayoutContent />
-      </GlobalFilterProvider>
-    </CommandPaletteProvider>
+    <ToastProvider>
+      <CommandPaletteProvider>
+        <GlobalFilterProvider>
+          <LayoutContent />
+        </GlobalFilterProvider>
+      </CommandPaletteProvider>
+    </ToastProvider>
   );
 }