diff --git a/services/user/Chainmail/ui/src/components/account-switcher.tsx b/services/user/Chainmail/ui/src/components/account-switcher.tsx
index 1e460dc4c..8c2b371bb 100644
--- a/services/user/Chainmail/ui/src/components/account-switcher.tsx
+++ b/services/user/Chainmail/ui/src/components/account-switcher.tsx
@@ -1,52 +1,180 @@
-import { useIncomingMessages, useUser } from "@hooks";
+import {
+    useCreateConnectionToken,
+    useCurrentAccounts,
+    useLoggedInUser,
+    useLogout,
+    useSelectAccount,
+} from "@hooks";
 import { cn } from "@lib/utils";
+import { Avatar, AvatarFallback } from "@shadcn/avatar";
+import { Button } from "@shadcn/button";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuGroup,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuPortal,
+    DropdownMenuSeparator,
+    DropdownMenuSub,
+    DropdownMenuSubContent,
+    DropdownMenuSubTrigger,
+    DropdownMenuTrigger,
+} from "@shadcn/dropdown-menu";
 import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from "@shadcn/select";
+    ChevronsUpDown,
+    LogIn,
+    LogOut,
+    PlusCircle,
+    User,
+    UserPlus,
+} from "lucide-react";
 
 interface AccountSwitcherProps {
     isCollapsed: boolean;
 }
 
 export function AccountSwitcher({ isCollapsed }: AccountSwitcherProps) {
-    const { setSelectedMessageId } = useIncomingMessages();
-    const { availableAccounts, user, setUser } = useUser();
+    const { mutateAsync: onLogin } = useCreateConnectionToken();
+
+    const { data: loggedInUser } = useLoggedInUser();
+    const isLoggedIn = !!loggedInUser;
+
+    const { data: currentAccounts, isPending: isLoadingAccounts } =
+        useCurrentAccounts();
+
+    const isNoOptions = !isLoggedIn && currentAccounts.length == 0;
+
+    const { mutateAsync: onLogout } = useLogout();
+    const { mutateAsync: selectAccount } = useSelectAccount();
+
+    const otherConnectedAccounts = currentAccounts.filter(
+        (account) => account !== loggedInUser,
+    );
 
     return (
-        <Select
-            defaultValue={user}
-            onValueChange={(value) => {
-                setSelectedMessageId("");
-                setUser(value);
-            }}
-        >
-            <SelectTrigger
-                className={cn(
-                    "flex items-center gap-2 [&>span]:line-clamp-1 [&>span]:flex [&>span]:w-full [&>span]:items-center [&>span]:gap-1 [&>span]:truncate [&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0",
-                    isCollapsed &&
-                        "flex h-9 w-9 shrink-0 items-center justify-center p-0 [&>span]:w-auto [&>svg]:hidden",
-                )}
-                aria-label="Select account"
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button
+                    size="lg"
+                    variant="ghost"
+                    className={cn("w-full", !isCollapsed && "pl-1 pr-2")}
+                >
+                    <Avatar className="h-8 w-8 rounded-lg">
+                        <AvatarFallback className="rounded-lg">
+                            {loggedInUser?.[0] ?? <LogIn className="h-4 w-4" />}
+                        </AvatarFallback>
+                    </Avatar>
+                    {isCollapsed ? null : (
+                        <>
+                            <div className="ml-2 grid flex-1 text-left text-sm leading-tight">
+                                <span className="truncate font-semibold">
+                                    {loggedInUser ?? "Get started"}
+                                </span>
+                            </div>
+                            <ChevronsUpDown className="ml-auto size-4" />
+                        </>
+                    )}
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+                className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                // side={isMobile ? "bottom" : "right"}
+                side="right"
+                align="end"
+                sideOffset={4}
             >
-                <SelectValue placeholder="Select an account">
-                    <span className={cn("ml-2", isCollapsed && "hidden")}>
-                        {user}
-                    </span>
-                </SelectValue>
-            </SelectTrigger>
-            <SelectContent>
-                {availableAccounts.map((account) => (
-                    <SelectItem key={account} value={account}>
-                        <div className="flex items-center gap-3 [&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0 [&_svg]:text-foreground">
-                            {account}
-                        </div>
-                    </SelectItem>
-                ))}
-            </SelectContent>
-        </Select>
+                {loggedInUser ? (
+                    <>
+                        <DropdownMenuLabel className="p-0 font-normal">
+                            <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                                <Avatar className="h-8 w-8 rounded-lg">
+                                    <AvatarFallback className="rounded-lg">
+                                        {loggedInUser[0]}
+                                    </AvatarFallback>
+                                </Avatar>
+                                <div className="grid flex-1 text-left text-sm leading-tight">
+                                    <span className="truncate font-semibold">
+                                        {loggedInUser}
+                                    </span>
+                                </div>
+                            </div>
+                        </DropdownMenuLabel>
+                        <DropdownMenuSeparator />
+                    </>
+                ) : null}
+                {isNoOptions && (
+                    <DropdownMenuItem
+                        onClick={() => {
+                            onLogin();
+                        }}
+                    >
+                        <LogIn className="mr-2 h-4 w-4" />
+                        <span>
+                            {isLoadingAccounts ? "Loading..." : "Log in"}
+                        </span>
+                    </DropdownMenuItem>
+                )}
+                {!isNoOptions && !otherConnectedAccounts.length ? (
+                    <DropdownMenuItem
+                        onClick={() => {
+                            onLogin();
+                        }}
+                    >
+                        <UserPlus className="mr-2 h-4 w-4" />
+                        <span>Switch account</span>
+                    </DropdownMenuItem>
+                ) : null}
+                {!isNoOptions && otherConnectedAccounts.length ? (
+                    <DropdownMenuGroup>
+                        <DropdownMenuSub>
+                            <DropdownMenuSubTrigger>
+                                <UserPlus className="mr-2 h-4 w-4" />
+                                <span>
+                                    {loggedInUser
+                                        ? "Switch account"
+                                        : "Select an account"}
+                                </span>
+                            </DropdownMenuSubTrigger>
+                            <DropdownMenuPortal>
+                                <DropdownMenuSubContent>
+                                    {otherConnectedAccounts.map((account) => (
+                                        <DropdownMenuItem
+                                            key={account}
+                                            onClick={() => {
+                                                selectAccount(account);
+                                            }}
+                                        >
+                                            <User className="mr-2 h-4 w-4" />
+                                            <span>{account}</span>
+                                        </DropdownMenuItem>
+                                    ))}
+                                    {otherConnectedAccounts.length ? (
+                                        <DropdownMenuSeparator />
+                                    ) : null}
+                                    <DropdownMenuItem
+                                        onClick={() => {
+                                            onLogin();
+                                        }}
+                                    >
+                                        <PlusCircle className="mr-2 h-4 w-4" />
+                                        <span>More...</span>
+                                    </DropdownMenuItem>
+                                </DropdownMenuSubContent>
+                            </DropdownMenuPortal>
+                        </DropdownMenuSub>
+                    </DropdownMenuGroup>
+                ) : null}
+                <DropdownMenuItem
+                    disabled={!isLoggedIn}
+                    onClick={() => {
+                        onLogout();
+                    }}
+                >
+                    <LogOut className="mr-2 h-4 w-4" />
+                    <span>Log out</span>
+                </DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
     );
 }
diff --git a/services/user/Chainmail/ui/src/components/compose-dialog.tsx b/services/user/Chainmail/ui/src/components/compose-dialog.tsx
index aea7bbf15..352f122af 100644
--- a/services/user/Chainmail/ui/src/components/compose-dialog.tsx
+++ b/services/user/Chainmail/ui/src/components/compose-dialog.tsx
@@ -10,8 +10,6 @@ import { toast } from "sonner";
 
 import { type PluginId } from "@psibase/common-lib";
 
-import { getSupervisor } from "@lib/supervisor";
-
 import { Button } from "@shadcn/button";
 import {
     Dialog,
@@ -27,7 +25,7 @@ import { Separator } from "@shadcn/separator";
 
 import { MarkdownEditor } from "@components";
 import { ControlBar } from "@components/editor";
-import { type Message, useDraftMessages, useUser } from "@hooks";
+import { type Message, useDraftMessages, useLoggedInUser } from "@hooks";
 
 import {
     Form,
@@ -38,6 +36,8 @@ import {
 } from "@shadcn/form";
 import { Input } from "@shadcn/input";
 
+import { supervisor } from "src/main";
+
 interface SupervisorError {
     code: number;
     producer: PluginId;
@@ -58,7 +58,7 @@ export const ComposeDialog = ({
 }) => {
     const [open, setOpen] = useState(false);
     const isSent = useRef(false);
-    const { user } = useUser();
+    const { data: user } = useLoggedInUser();
     const { drafts, setDrafts, getDrafts, deleteDraftById } =
         useDraftMessages();
 
@@ -122,7 +122,6 @@ export const ComposeDialog = ({
         }
 
         try {
-            const supervisor = await getSupervisor();
             // TODO: Improve error detection. This promise resolves with success before the transaction is pushed.
             await supervisor.functionCall({
                 service: "chainmail",
diff --git a/services/user/Chainmail/ui/src/components/mail-display.tsx b/services/user/Chainmail/ui/src/components/mail-display.tsx
index 14f7f5a34..8c9c5d3e7 100644
--- a/services/user/Chainmail/ui/src/components/mail-display.tsx
+++ b/services/user/Chainmail/ui/src/components/mail-display.tsx
@@ -24,9 +24,10 @@ import {
     ReplyDialogTriggerIconWithTooltip,
 } from "@components";
 import { Message, useDraftMessages, useIncomingMessages } from "@hooks";
-import { getSupervisor } from "@lib/supervisor";
 import { wait } from "@lib/utils";
 
+import { supervisor } from "src/main";
+
 export function MailDisplay({
     message,
     mailbox,
@@ -97,7 +98,6 @@ const ActionBar = ({
 
     const onArchive = async (itemId: string) => {
         let id = parseInt(itemId);
-        const supervisor = await getSupervisor();
         // TODO: Improve error detection. This promise resolves with success before the transaction is pushed.
         await supervisor.functionCall({
             service: "chainmail",
@@ -119,7 +119,6 @@ const ActionBar = ({
 
     const onSave = async (itemId: string) => {
         let id = parseInt(itemId);
-        const supervisor = await getSupervisor();
         await supervisor.functionCall({
             service: "chainmail",
             intf: "api",
diff --git a/services/user/Chainmail/ui/src/components/mode-toggle.tsx b/services/user/Chainmail/ui/src/components/mode-toggle.tsx
index 7127b113e..9d2e8ae3f 100644
--- a/services/user/Chainmail/ui/src/components/mode-toggle.tsx
+++ b/services/user/Chainmail/ui/src/components/mode-toggle.tsx
@@ -15,7 +15,7 @@ export function ModeToggle() {
     return (
         <DropdownMenu>
             <DropdownMenuTrigger asChild>
-                <Button variant="outline" size="icon">
+                <Button variant="outline" size="icon" className="my-2">
                     <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
                     <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
                     <span className="sr-only">Toggle theme</span>
diff --git a/services/user/Chainmail/ui/src/components/nav-menu.tsx b/services/user/Chainmail/ui/src/components/nav-menu.tsx
index 9c42d8dc5..190c5a015 100644
--- a/services/user/Chainmail/ui/src/components/nav-menu.tsx
+++ b/services/user/Chainmail/ui/src/components/nav-menu.tsx
@@ -5,15 +5,16 @@ import { cn } from "@lib/utils";
 
 import { AccountSwitcher } from "./account-switcher";
 import { Nav } from "./nav";
-import { useNavigate, useLocation } from "react-router-dom";
-import { useIncomingMessages } from "@hooks";
+import { useLocation } from "react-router-dom";
+import { useIncomingMessages, useLoggedInUser } from "@hooks";
 
 interface Props {
     isCollapsed?: boolean;
 }
 
 export const NavMenu = ({ isCollapsed = false }: Props) => {
-    const navigate = useNavigate();
+    const { data: loggedInUser } = useLoggedInUser();
+    const isLoggedIn = !!loggedInUser;
 
     const { pathname } = useLocation();
     const at = pathname;
@@ -41,30 +42,35 @@ export const NavMenu = ({ isCollapsed = false }: Props) => {
                         icon: Inbox,
                         variant: at === "/" ? "default" : "ghost",
                         href: "/",
+                        disabled: !isLoggedIn,
                     },
                     {
                         title: "Drafts",
                         icon: PencilLine,
                         variant: at === "/drafts" ? "default" : "ghost",
                         href: "/drafts",
+                        disabled: !isLoggedIn,
                     },
                     {
                         title: "Saved",
                         icon: Pin,
                         variant: at === "/saved" ? "default" : "ghost",
                         href: "/saved",
+                        disabled: !isLoggedIn,
                     },
                     {
                         title: "Sent",
                         icon: Send,
                         variant: at === "/sent" ? "default" : "ghost",
                         href: "/sent",
+                        disabled: !isLoggedIn,
                     },
                     {
                         title: "Archived",
                         icon: Archive,
                         variant: at === "/archived" ? "default" : "ghost",
                         href: "/archived",
+                        disabled: !isLoggedIn,
                     },
                 ]}
             />
diff --git a/services/user/Chainmail/ui/src/components/nav.tsx b/services/user/Chainmail/ui/src/components/nav.tsx
index eebc4c708..7d9df9d9e 100644
--- a/services/user/Chainmail/ui/src/components/nav.tsx
+++ b/services/user/Chainmail/ui/src/components/nav.tsx
@@ -1,13 +1,9 @@
+import { useNavigate } from "react-router-dom";
 import { LucideIcon } from "lucide-react";
 
-import { cn } from "../lib/utils";
-import { buttonVariants } from "../shad/components/ui/button";
-import {
-    Tooltip,
-    TooltipContent,
-    TooltipTrigger,
-} from "../shad/components/ui/tooltip";
-import { useNavigate } from "react-router-dom";
+import { buttonVariants } from "@shadcn/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@shadcn/tooltip";
+import { cn } from "@lib/utils";
 
 interface NavProps {
     isCollapsed: boolean;
@@ -17,6 +13,7 @@ interface NavProps {
         icon: LucideIcon;
         variant: "default" | "ghost";
         href: string;
+        disabled?: boolean;
     }[];
 }
 
@@ -42,6 +39,8 @@ export function Nav({ links, isCollapsed }: NavProps) {
                                         "h-9 w-9",
                                         link.variant === "default" &&
                                             "dark:bg-muted dark:text-muted-foreground dark:hover:bg-muted dark:hover:text-white",
+                                        link.disabled &&
+                                            "pointer-events-none opacity-50",
                                     )}
                                 >
                                     <link.icon className="h-4 w-4" />
@@ -77,6 +76,7 @@ export function Nav({ links, isCollapsed }: NavProps) {
                                     "dark:bg-muted dark:text-white dark:hover:bg-muted dark:hover:text-white",
                                 "justify-start",
                             )}
+                            disabled={link.disabled}
                         >
                             <link.icon className="mr-2 h-4 w-4" />
                             {link.title}
diff --git a/services/user/Chainmail/ui/src/hooks/index.ts b/services/user/Chainmail/ui/src/hooks/index.ts
index 9d9f80e91..54e1807a6 100644
--- a/services/user/Chainmail/ui/src/hooks/index.ts
+++ b/services/user/Chainmail/ui/src/hooks/index.ts
@@ -1,3 +1,7 @@
+export * from "./use-create-connection-token";
+export * from "./use-current-accounts";
 export * from "./use-local-storage";
+export * from "./use-logged-in-user";
+export * from "./use-logout";
 export * from "./use-mail";
-export * from "./use-user";
+export * from "./use-select-account";
diff --git a/services/user/Chainmail/ui/src/hooks/use-create-connection-token.ts b/services/user/Chainmail/ui/src/hooks/use-create-connection-token.ts
new file mode 100644
index 000000000..9e2b1dbd0
--- /dev/null
+++ b/services/user/Chainmail/ui/src/hooks/use-create-connection-token.ts
@@ -0,0 +1,33 @@
+import { z } from "zod";
+import { useMutation } from "@tanstack/react-query";
+import { toast } from "sonner";
+
+import { siblingUrl } from "@psibase/common-lib";
+
+import { modifyUrlParams } from "@lib/utils";
+
+import { supervisor } from "src/main";
+
+export const useCreateConnectionToken = () =>
+    useMutation<string, Error>({
+        mutationFn: async () => {
+            const token = await supervisor.functionCall({
+                method: "createConnectionToken",
+                params: [],
+                service: "accounts",
+                intf: "activeApp",
+            });
+            return z.string().parse(token);
+        },
+        onSuccess: (token) => {
+            window.location.href = modifyUrlParams(
+                siblingUrl(undefined, "accounts", null, true),
+                {
+                    token,
+                },
+            );
+        },
+        onError: (error) => {
+            toast.error(error.message);
+        },
+    });
diff --git a/services/user/Chainmail/ui/src/hooks/use-current-accounts.ts b/services/user/Chainmail/ui/src/hooks/use-current-accounts.ts
new file mode 100644
index 000000000..475efde14
--- /dev/null
+++ b/services/user/Chainmail/ui/src/hooks/use-current-accounts.ts
@@ -0,0 +1,21 @@
+import { useQuery } from "@tanstack/react-query";
+import { z } from "zod";
+
+import { supervisor } from "src/main";
+
+export const useCurrentAccounts = (enabled = true) =>
+    useQuery({
+        queryKey: ["currentAccounts"],
+        enabled,
+        initialData: [],
+        queryFn: async () => {
+            const connectedAccounts = await supervisor.functionCall({
+                method: "getConnectedAccounts",
+                params: [],
+                service: "accounts",
+                intf: "activeApp",
+            });
+            const res = z.string().array().parse(connectedAccounts);
+            return res;
+        },
+    });
diff --git a/services/user/Chainmail/ui/src/hooks/use-logged-in-user.ts b/services/user/Chainmail/ui/src/hooks/use-logged-in-user.ts
new file mode 100644
index 000000000..b804853df
--- /dev/null
+++ b/services/user/Chainmail/ui/src/hooks/use-logged-in-user.ts
@@ -0,0 +1,24 @@
+import { useQuery } from "@tanstack/react-query";
+import { z } from "zod";
+
+import { supervisor } from "src/main";
+
+export const useLoggedInUser = (enabled = true) =>
+    useQuery({
+        queryKey: ["loggedInUser"],
+        enabled,
+        initialData: null,
+        queryFn: async () => {
+            const res = await supervisor.functionCall({
+                method: "getLoggedInUser",
+                params: [],
+                service: "accounts",
+                intf: "activeApp",
+            });
+            if (res) {
+                return z.string().parse(res);
+            } else {
+                return null;
+            }
+        },
+    });
diff --git a/services/user/Chainmail/ui/src/hooks/use-logout.ts b/services/user/Chainmail/ui/src/hooks/use-logout.ts
new file mode 100644
index 000000000..ce863232e
--- /dev/null
+++ b/services/user/Chainmail/ui/src/hooks/use-logout.ts
@@ -0,0 +1,28 @@
+import { useNavigate } from "react-router-dom";
+import { useQueryClient, useMutation } from "@tanstack/react-query";
+
+import { supervisor } from "src/main";
+
+export const useLogout = () => {
+    const navigate = useNavigate();
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationKey: ["logout"],
+        mutationFn: async () => {
+            return supervisor.functionCall({
+                method: "logout",
+                params: [],
+                service: "accounts",
+                intf: "activeApp",
+            });
+        },
+        onSuccess: () => {
+            navigate("/");
+            queryClient.refetchQueries({ queryKey: ["loggedInUser"] });
+            setTimeout(() => {
+                queryClient.refetchQueries({ queryKey: ["loggedInUser"] });
+            }, 2500);
+        },
+    });
+};
diff --git a/services/user/Chainmail/ui/src/hooks/use-mail.ts b/services/user/Chainmail/ui/src/hooks/use-mail.ts
index d2812b915..b9d8ac653 100644
--- a/services/user/Chainmail/ui/src/hooks/use-mail.ts
+++ b/services/user/Chainmail/ui/src/hooks/use-mail.ts
@@ -1,9 +1,10 @@
 import { atom, useAtom } from "jotai";
 
-import { useUser } from "./use-user";
+import { useLoggedInUser } from "./use-logged-in-user";
 import { useQuery } from "@tanstack/react-query";
 import { useLocalStorage } from "./use-local-storage";
-import { getSupervisor } from "@lib/supervisor";
+
+import { supervisor } from "src/main";
 
 const composeAtom = atom(false);
 export function useCompose() {
@@ -49,9 +50,7 @@ const transformRawMessagesToMessages = (rawMessages: RawMessage[]) => {
     );
 };
 
-const getIncomingMessages = async (account: string | undefined) => {
-    const supervisor = await getSupervisor();
-    // const res = await fetch(`/messages?receiver=${account}`);
+const getIncomingMessages = async (account?: string | null) => {
     let rawMessages = (await supervisor.functionCall({
         service: "chainmail",
         intf: "queries",
@@ -63,7 +62,7 @@ const getIncomingMessages = async (account: string | undefined) => {
 
 const incomingMsgAtom = atom<Message["id"]>("");
 export function useIncomingMessages() {
-    const { user } = useUser();
+    const { data: user } = useLoggedInUser();
     const query = useQuery({
         queryKey: ["incoming", user],
         queryFn: () => getIncomingMessages(user),
@@ -82,8 +81,7 @@ export function useIncomingMessages() {
     };
 }
 
-const getArchivedMessages = async (account: string | undefined) => {
-    const supervisor = await getSupervisor();
+const getArchivedMessages = async (account?: string | null) => {
     let rawMessages = (await supervisor.functionCall({
         service: "chainmail",
         intf: "queries",
@@ -95,7 +93,7 @@ const getArchivedMessages = async (account: string | undefined) => {
 
 const archivedMsgAtom = atom<Message["id"]>("");
 export function useArchivedMessages() {
-    const { user } = useUser();
+    const { data: user } = useLoggedInUser();
     const query = useQuery({
         queryKey: ["archived", user, ""],
         queryFn: () => getArchivedMessages(user),
@@ -114,8 +112,7 @@ export function useArchivedMessages() {
     };
 }
 
-const getSavedMessages = async (account: string | undefined) => {
-    const supervisor = await getSupervisor();
+const getSavedMessages = async (account?: string | null) => {
     let rawMessages = (await supervisor.functionCall({
         service: "chainmail",
         intf: "queries",
@@ -128,7 +125,7 @@ const getSavedMessages = async (account: string | undefined) => {
 
 const savedMsgAtom = atom<Message["id"]>("");
 export function useSavedMessages() {
-    const { user } = useUser();
+    const { data: user } = useLoggedInUser();
     const query = useQuery({
         queryKey: ["saved", user],
         queryFn: () => getSavedMessages(user),
@@ -147,8 +144,7 @@ export function useSavedMessages() {
     };
 }
 
-const getSentMessages = async (account: string | undefined) => {
-    const supervisor = await getSupervisor();
+const getSentMessages = async (account?: string | null) => {
     let rawMessages = (await supervisor.functionCall({
         service: "chainmail",
         intf: "queries",
@@ -161,7 +157,7 @@ const getSentMessages = async (account: string | undefined) => {
 
 const sentMsgAtom = atom<Message["id"]>("");
 export function useSentMessages() {
-    const { user } = useUser();
+    const { data: user } = useLoggedInUser();
     const query = useQuery({
         queryKey: ["sent", user],
         queryFn: () => getSentMessages(user),
@@ -182,7 +178,7 @@ export function useSentMessages() {
 
 const draftMsgAtom = atom<Message["id"]>("");
 export function useDraftMessages() {
-    const { user } = useUser();
+    const { data: user } = useLoggedInUser();
 
     const [allDrafts, setDrafts, getDrafts] = useLocalStorage<Message[]>(
         "drafts",
diff --git a/services/user/Chainmail/ui/src/hooks/use-select-account.ts b/services/user/Chainmail/ui/src/hooks/use-select-account.ts
new file mode 100644
index 000000000..f1e9f9dba
--- /dev/null
+++ b/services/user/Chainmail/ui/src/hooks/use-select-account.ts
@@ -0,0 +1,30 @@
+import { useQueryClient, useMutation } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { z } from "zod";
+
+import { supervisor } from "src/main";
+
+export const useSelectAccount = () => {
+    const queryClient = useQueryClient();
+
+    return useMutation<void, Error, string>({
+        mutationKey: ["selectAccount"],
+        mutationFn: async (accountName: string) => {
+            void (await supervisor.functionCall({
+                method: "login",
+                params: [z.string().parse(accountName)],
+                service: "accounts",
+                intf: "activeApp",
+            }));
+        },
+        onSuccess: () => {
+            queryClient.refetchQueries({ queryKey: ["loggedInUser"] });
+            setTimeout(() => {
+                queryClient.refetchQueries({ queryKey: ["loggedInUser"] });
+            }, 2000);
+        },
+        onError: (error) => {
+            toast.error(error.message);
+        },
+    });
+};
diff --git a/services/user/Chainmail/ui/src/hooks/use-user.ts b/services/user/Chainmail/ui/src/hooks/use-user.ts
deleted file mode 100644
index a63bdaeda..000000000
--- a/services/user/Chainmail/ui/src/hooks/use-user.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { useEffect } from "react";
-import { atom, useAtom } from "jotai";
-
-import { type PluginId } from "@psibase/common-lib";
-
-import { getSupervisor } from "@lib/supervisor";
-interface SupervisorError {
-    code: number;
-    producer: PluginId;
-    message: string;
-}
-
-const accountsAtom = atom<string[]>([]);
-const userAtom = atom<string | undefined>(undefined);
-export function useUser() {
-    const [availableAccounts, setAvailableAccounts] = useAtom(accountsAtom);
-    const [user, setUser] = useAtom(userAtom);
-
-    const getConnectedAccounts = async () => {
-        const supervisor = await getSupervisor();
-        try {
-            const res = (await supervisor.functionCall({
-                service: "accounts",
-                intf: "activeApp",
-                method: "getConnectedAccounts",
-                params: [],
-            })) as string[];
-            setAvailableAccounts(res);
-        } catch (e: unknown) {
-            console.error(`${(e as SupervisorError).message}`);
-        }
-    };
-
-    const logInAs = async (accountName: string) => {
-        const supervisor = await getSupervisor();
-        try {
-            await supervisor.functionCall({
-                service: "accounts",
-                intf: "activeApp",
-                method: "login",
-                params: [accountName],
-            });
-            setUser(accountName);
-        } catch (e: unknown) {
-            console.error("ERROR setting user:");
-            console.log(e);
-        }
-    };
-
-    useEffect(() => {
-        const logIn = async () => {
-            await logInAs("alice");
-            await logInAs("bob");
-            getConnectedAccounts();
-        };
-        if (availableAccounts.length) return;
-        logIn();
-    }, []);
-
-    return {
-        availableAccounts,
-        user,
-        setUser: logInAs,
-    };
-}
diff --git a/services/user/Chainmail/ui/src/lib/supervisor.ts b/services/user/Chainmail/ui/src/lib/supervisor.ts
deleted file mode 100644
index e2958d9f5..000000000
--- a/services/user/Chainmail/ui/src/lib/supervisor.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Supervisor } from "@psibase/common-lib";
-
-const supervisor = new Supervisor();
-export const getSupervisor = async () => {
-    if (supervisor.isSupervisorInitialized) return supervisor;
-    await supervisor.onLoaded();
-    return supervisor;
-};
diff --git a/services/user/Chainmail/ui/src/lib/utils.ts b/services/user/Chainmail/ui/src/lib/utils.ts
index 3c73df14b..76bf86b11 100644
--- a/services/user/Chainmail/ui/src/lib/utils.ts
+++ b/services/user/Chainmail/ui/src/lib/utils.ts
@@ -27,3 +27,20 @@ export function debounce<T extends (...args: any[]) => any>(
 }
 
 export const wait = (ms: number) => new Promise((res) => setTimeout(res, ms));
+
+export const modifyUrlParams = (
+    url: string,
+    params: { [key: string]: string },
+): string => {
+    const urlObject = new URL(url);
+
+    const parsObject = new URLSearchParams(urlObject.search);
+
+    Object.entries(params).forEach(([key, value]) => {
+        parsObject.set(key, value);
+    });
+
+    urlObject.search = parsObject.toString();
+
+    return urlObject.toString();
+};
diff --git a/services/user/Chainmail/ui/src/main.tsx b/services/user/Chainmail/ui/src/main.tsx
index 8130a22e6..16a904fb4 100644
--- a/services/user/Chainmail/ui/src/main.tsx
+++ b/services/user/Chainmail/ui/src/main.tsx
@@ -5,14 +5,16 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { MilkdownProvider } from "@milkdown/react";
 import { ProsemirrorAdapterProvider } from "@prosemirror-adapter/react";
 
-import { Drafts, Editor, Home, Sent, Saved, Viewer } from "@routes";
+import { Archived, Drafts, Editor, Home, Sent, Saved, Viewer } from "@routes";
 import { TooltipProvider } from "@shadcn/tooltip";
 
+import { Supervisor } from "@psibase/common-lib";
+
 import DefaultLayout from "./layouts/default";
 
 import "./styles/globals.css";
-import Archived from "@routes/archived";
 
+export const supervisor = new Supervisor();
 const queryClient = new QueryClient();
 
 const router = createBrowserRouter([
diff --git a/services/user/Chainmail/ui/src/routes/home.tsx b/services/user/Chainmail/ui/src/routes/home.tsx
index a3bbcaa87..55a16b9e1 100644
--- a/services/user/Chainmail/ui/src/routes/home.tsx
+++ b/services/user/Chainmail/ui/src/routes/home.tsx
@@ -10,8 +10,7 @@ import { Separator } from "@shadcn/separator";
 import { MailDisplay } from "@components/mail-display";
 import { MailList } from "@components/mail-list";
 
-import { useIncomingMessages } from "@hooks/use-mail";
-import { Dialog } from "@shadcn/dialog";
+import { useIncomingMessages, useLoggedInUser } from "@hooks";
 import {
     ComposeDialog,
     ComposeDialogTriggerIconWithTooltip,
@@ -20,6 +19,9 @@ import {
 } from "@components";
 
 export function Home() {
+    const { data: loggedInUser } = useLoggedInUser();
+    const isLoggedIn = !!loggedInUser;
+
     const { query, selectedMessage, setSelectedMessageId } =
         useIncomingMessages();
 
@@ -37,9 +39,13 @@ export function Home() {
                 <div className="flex items-center justify-between px-4">
                     <h1 className="text-xl font-bold">Inbox</h1>
                     <div className="flex items-center gap-2">
-                        <ComposeDialog
-                            trigger={<ComposeDialogTriggerIconWithTooltip />}
-                        />
+                        {isLoggedIn ? (
+                            <ComposeDialog
+                                trigger={
+                                    <ComposeDialogTriggerIconWithTooltip />
+                                }
+                            />
+                        ) : null}
                         <ModeToggle />
                     </div>
                 </div>
diff --git a/services/user/Chainmail/ui/src/routes/index.ts b/services/user/Chainmail/ui/src/routes/index.ts
index caee0518d..38b67de3d 100644
--- a/services/user/Chainmail/ui/src/routes/index.ts
+++ b/services/user/Chainmail/ui/src/routes/index.ts
@@ -1,3 +1,4 @@
+export * from "./archived";
 export * from "./drafts";
 export * from "./editor";
 export * from "./home";