diff --git a/UI/app.tsx b/UI/app.tsx
index 4e1c012..adbbaed 100644
--- a/UI/app.tsx
+++ b/UI/app.tsx
@@ -412,29 +412,23 @@ export function AppComponent(props: {
     ) {
         if (model.navigationModel.activeNav == "DM") {
             dmVNode = (
-                <div
-                    class={tw`flex-1 overflow-hidden`}
-                >
-                    {DirectMessageContainer({
-                        ...model.dm,
-                        rightPanelModel: model.rightPanelModel,
-                        bus: app.eventBus,
-                        ctx: myAccountCtx,
-                        profileGetter: app.database,
-                        pool: props.pool,
-                        conversationLists: app.conversationLists,
-                        profilesSyncer: app.profileSyncer,
-                        eventSyncer: app.eventSyncer,
-                        pinListGetter: app.otherConfig,
-                        groupChatController: app.groupChatController,
-                        newMessageChecker: app.conversationLists,
-                        messageGetter: model.dm.isGroupMessage ? app.groupChatController : app.dmController,
-                        newMessageListener: model.dm.isGroupMessage
-                            ? app.groupChatController
-                            : app.dmController,
-                        relayRecordGetter: app.database,
-                    })}
-                </div>
+                <DirectMessageContainer
+                    {...model.dm}
+                    rightPanelModel={model.rightPanelModel}
+                    bus={app.eventBus}
+                    ctx={myAccountCtx}
+                    profileGetter={app.database}
+                    pool={props.pool}
+                    conversationLists={app.conversationLists}
+                    profilesSyncer={app.profileSyncer}
+                    eventSyncer={app.eventSyncer}
+                    pinListGetter={app.otherConfig}
+                    groupChatController={app.groupChatController}
+                    newMessageChecker={app.conversationLists}
+                    messageGetter={model.dm.isGroupMessage ? app.groupChatController : app.dmController}
+                    newMessageListener={model.dm.isGroupMessage ? app.groupChatController : app.dmController}
+                    relayRecordGetter={app.database}
+                />
             );
         }
 
@@ -446,7 +440,7 @@ export function AppComponent(props: {
     console.debug("AppComponent:2", Date.now() - t);
 
     const final = (
-        <div class={tw`h-screen fixed w-full flex-1 flex overflow-hidden`}>
+        <div class={tw`h-screen w-full flex`}>
             <nav.NavBar
                 publicKey={app.ctx.publicKey}
                 profileGetter={app.database}
diff --git a/UI/conversation-list.test.tsx b/UI/conversation-list.test.tsx
index dbf93f9..78815e8 100644
--- a/UI/conversation-list.test.tsx
+++ b/UI/conversation-list.test.tsx
@@ -6,7 +6,6 @@ import { Datebase_View } from "../database.ts";
 import { PrivateKey } from "../lib/nostr-ts/key.ts";
 import { InMemoryAccountContext, NostrEvent, NostrKind } from "../lib/nostr-ts/nostr.ts";
 import { testEventBus } from "./_setup.test.ts";
-import { initialModel } from "./app_model.ts";
 import { DM_List } from "./conversation-list.ts";
 import { NewIndexedDB } from "./dexie-db.ts";
 import { ProfileSyncer } from "../features/profile.ts";
@@ -16,7 +15,6 @@ import { GroupChatSyncer, GroupMessageController } from "../features/gm.ts";
 import { Channel } from "https://raw.githubusercontent.com/BlowaterNostr/csp/master/csp.ts";
 import { LamportTime } from "../time.ts";
 import { prepareEncryptedNostrEvent } from "../lib/nostr-ts/event.ts";
-import { PublicKey } from "../lib/nostr-ts/nodejs/index.mjs";
 
 const ctx = InMemoryAccountContext.Generate();
 const db = NewIndexedDB();
diff --git a/UI/conversation-list.tsx b/UI/conversation-list.tsx
index 3724a0f..5a26737 100644
--- a/UI/conversation-list.tsx
+++ b/UI/conversation-list.tsx
@@ -107,12 +107,15 @@ export class ConversationList extends Component<Props, State> {
 
         return (
             <div
-                class={tw`h-screen flex flex-col mobile:w-full desktop:w-64 bg-[${SecondaryBackgroundColor}]`}
+                // https://tailwindcss.com/docs/hover-focus-and-other-states#quick-reference
+                class={`
+                h-screen w-80 max-sm:w-full
+                flex flex-col bg-[${SecondaryBackgroundColor}]`}
             >
                 <div
-                    class={tw`flex items-center gap-2 px-4 h-20 border-b border-[#36393F]`}
+                    class={`gap-2 py-2.5 px-4 border-b border-[#36393F]`}
                 >
-                    <div class={`flex-1 ${LinearGradientsClass}} items-center`}>
+                    <div class={`${LinearGradientsClass} flex items-center justify-center rounded-lg`}>
                         <button
                             onClick={async () => {
                                 props.emit({
diff --git a/UI/deploy/index-extension.html b/UI/deploy/index-extension.html
index a113bc2..6ee2aa7 100644
--- a/UI/deploy/index-extension.html
+++ b/UI/deploy/index-extension.html
@@ -69,7 +69,5 @@
         }
     </style>
 </head>
-<body>
-
-</body>
+<body></body>
 </html>
diff --git a/UI/deploy/index.html b/UI/deploy/index.html
index b1f628c..107db81 100644
--- a/UI/deploy/index.html
+++ b/UI/deploy/index.html
@@ -76,7 +76,5 @@
         }
     </style>
 </head>
-<body>
-
-</body>
+<body></body>
 </html>
diff --git a/UI/dm.test.tsx b/UI/dm.test.tsx
index 45889ed..67f24dc 100644
--- a/UI/dm.test.tsx
+++ b/UI/dm.test.tsx
@@ -69,33 +69,30 @@ pool.addRelayURL(relays[0]);
 const gmControl = new GroupMessageController(ctx, { add: (_) => {} }, { add: (_) => {} });
 const dmControl = new DirectedMessageController(ctx);
 
-const view = () => {
-    return (
-        <DirectMessageContainer
-            conversationLists={dm_list}
-            eventSyncer={new EventSyncer(pool, database)}
-            profilesSyncer={new ProfileSyncer(database, pool)}
-            bus={testEventBus}
-            rightPanelModel={{
-                show: true,
-            }}
-            currentEditor={model.dm.currentEditor}
-            focusedContent={model.dm.focusedContent}
-            ctx={ctx}
-            pool={pool}
-            isGroupMessage={false}
-            pinListGetter={OtherConfig.Empty(new Channel(), ctx, lamport)}
-            profileGetter={database}
-            groupChatController={gmControl}
-            messageGetter={gmControl}
-            newMessageChecker={dm_list}
-            newMessageListener={dmControl}
-            relayRecordGetter={database}
-        />
-    );
-};
-
-render(view(), document.body);
+render(
+    <DirectMessageContainer
+        conversationLists={dm_list}
+        eventSyncer={new EventSyncer(pool, database)}
+        profilesSyncer={new ProfileSyncer(database, pool)}
+        bus={testEventBus}
+        rightPanelModel={{
+            show: true,
+        }}
+        currentEditor={model.dm.currentEditor}
+        focusedContent={model.dm.focusedContent}
+        ctx={ctx}
+        pool={pool}
+        isGroupMessage={false}
+        pinListGetter={OtherConfig.Empty(new Channel(), ctx, lamport)}
+        profileGetter={database}
+        groupChatController={gmControl}
+        messageGetter={gmControl}
+        newMessageChecker={dm_list}
+        newMessageListener={dmControl}
+        relayRecordGetter={database}
+    />,
+    document.body,
+);
 
 (async () => {
     for await (const event of database.subscribe()) {
@@ -105,25 +102,3 @@ render(view(), document.body);
         dm_list.addEvents([event]);
     }
 })();
-
-for await (const e of testEventBus.onChange()) {
-    console.log(e);
-    if (e.type == "SendMessage") {
-        const err = await handle_SendMessage(
-            e,
-            ctx,
-            lamport,
-            pool,
-            model.dmEditors,
-            model.gmEditors,
-            database,
-            gmControl,
-        );
-
-        if (err instanceof Error) {
-            console.error("update:SendMessage", err);
-            continue; // todo: global error toast
-        }
-    }
-    render(view(), document.body);
-}
diff --git a/UI/dm.tsx b/UI/dm.tsx
index 87b219f..e12001e 100644
--- a/UI/dm.tsx
+++ b/UI/dm.tsx
@@ -1,5 +1,5 @@
 /** @jsx h */
-import { h } from "https://esm.sh/preact@10.17.1";
+import { Component, h, VNode } from "https://esm.sh/preact@10.17.1";
 import * as cl from "./conversation-list.tsx";
 import { MessagePanel, NewMessageListener } from "./message-panel.tsx";
 import { EventBus } from "../event-bus.ts";
@@ -22,6 +22,7 @@ import { UserIcon } from "./icons/user-icon.tsx";
 import { LeftArrowIcon } from "./icons/left-arrow-icon.tsx";
 import { RelayRecordGetter } from "../database.ts";
 import { RightPanelModel } from "./right-panel.tsx";
+import { Channel, PopChannel } from "https://raw.githubusercontent.com/BlowaterNostr/csp/master/csp.ts";
 
 export type DM_Model = {
     currentEditor: EditorModel | undefined;
@@ -52,176 +53,234 @@ export type StartInvite = {
     publicKey: PublicKey;
 };
 
-export function DirectMessageContainer(props: DirectMessageContainerProps) {
-    const t = Date.now();
+type State = {
+    currentEditor: EditorModel | undefined;
+};
 
-    const currentEditor = props.currentEditor;
-    let buttons = [];
-    if (currentEditor && IS_BETA_VERSION) {
-        if (props.isGroupMessage) {
-            buttons.push(
-                <button
-                    class={`w-8 h-8 ${CenterClass}`}
-                    onClick={() => {
-                        props.bus.emit({
-                            type: "ViewUserDetail",
-                            pubkey: currentEditor.pubkey,
-                        });
-                    }}
-                >
-                    <UserIcon
-                        class={`w-6 h-6 text-[${PrimaryTextColor}] stroke-current`}
-                        style={{ fill: "none" }}
-                    />
-                </button>,
-            );
+export class DirectMessageContainer extends Component<DirectMessageContainerProps, State> {
+    changes?: PopChannel<UI_Interaction_Event>;
 
-            const canEditGroupProfile = props.groupChatController.getGroupAdminCtx(currentEditor.pubkey);
-            if (canEditGroupProfile) {
+    state: State = {
+        currentEditor: undefined,
+    };
+
+    componentWillUpdate(nextProps: Readonly<DirectMessageContainerProps>): void {
+        this.setState({
+            currentEditor: nextProps.currentEditor,
+        });
+    }
+
+    async componentDidMount() {
+        this.setState({
+            currentEditor: this.props.currentEditor,
+        });
+
+        const changes = this.props.bus.onChange();
+        this.changes = changes;
+        for await (const change of changes) {
+            if (change.type == "SelectConversation") {
+                // todo
+            }
+        }
+    }
+
+    componentWillUnmount(): void {
+        if (this.changes) {
+            this.changes.close();
+        }
+    }
+
+    render(props: DirectMessageContainerProps) {
+        const t = Date.now();
+
+        const currentEditor = props.currentEditor;
+        let buttons = [];
+        if (currentEditor && IS_BETA_VERSION) {
+            if (props.isGroupMessage) {
                 buttons.push(
-                    // setting button
                     <button
                         class={`w-8 h-8 ${CenterClass}`}
                         onClick={() => {
                             props.bus.emit({
-                                type: "StartEditGroupChatProfile",
-                                ctx: canEditGroupProfile,
+                                type: "ViewUserDetail",
+                                pubkey: currentEditor.pubkey,
                             });
                         }}
                     >
-                        <SettingIcon
+                        <UserIcon
                             class={`w-6 h-6 text-[${PrimaryTextColor}] stroke-current`}
                             style={{ fill: "none" }}
                         />
                     </button>,
                 );
-            }
-        } else {
-            buttons.push(
-                <InviteButton
-                    groupChatController={props.groupChatController}
-                    profileGetter={props.profileGetter}
-                    userPublicKey={currentEditor.pubkey}
-                    emit={props.bus.emit}
-                />,
-            );
-        }
-    }
 
-    const vDom = (
-        <div
-            class={`h-full w-full flex bg-[#36393F] overflow-hidden`}
-        >
-            <div class={`${props.currentEditor ? "mobile:hidden" : "mobile:w-full"}`}>
-                <cl.ConversationList
-                    eventBus={props.bus}
-                    emit={props.bus.emit}
-                    convoListRetriever={props.conversationLists}
-                    groupChatListGetter={props.groupChatController}
-                    hasNewMessages={props.newMessageChecker}
-                    {...props}
-                />
-            </div>
-            {props.currentEditor
-                ? (
-                    <div class={`h-screen flex-1 overflow-hidden flex-col flex`}>
-                        <div
-                            class={`h-14 mobile:h-12
-                            border-l border-b border-[#36393F] flex
-                            items-center justify-between px- mobile:px-2 bg-[#2F3136]`}
+                const canEditGroupProfile = props.groupChatController.getGroupAdminCtx(currentEditor.pubkey);
+                if (canEditGroupProfile) {
+                    buttons.push(
+                        // setting button
+                        <button
+                            class={`w-8 h-8 ${CenterClass}`}
+                            onClick={() => {
+                                props.bus.emit({
+                                    type: "StartEditGroupChatProfile",
+                                    ctx: canEditGroupProfile,
+                                });
+                            }}
                         >
-                            <div class={`flex items-center overflow-hidden`}>
-                                <button
-                                    onClick={() => {
-                                        props.bus.emit({
-                                            type: "BackToContactList",
-                                        });
-                                    }}
-                                    class={`w-6 h-6 mobile:mr-2 desktop:hidden ${IconButtonClass}`}
-                                >
-                                    <LeftArrowIcon
-                                        class={`w-4 h-4`}
-                                        style={{
-                                            fill: "rgb(185, 187, 190)",
-                                        }}
-                                    />
-                                </button>
-                                <span
-                                    // https://tailwindcss.com/docs/customizing-colors
-                                    // https://tailwindcss.com/docs/cursor
-                                    class={`text-[#F3F4EA] text-[1.2rem]
+                            <SettingIcon
+                                class={`w-6 h-6 text-[${PrimaryTextColor}] stroke-current`}
+                                style={{ fill: "none" }}
+                            />
+                        </button>,
+                    );
+                }
+            } else {
+                buttons.push(
+                    <InviteButton
+                        groupChatController={props.groupChatController}
+                        profileGetter={props.profileGetter}
+                        userPublicKey={currentEditor.pubkey}
+                        emit={props.bus.emit}
+                    />,
+                );
+            }
+        }
+
+        const vDom = (
+            <div
+                class={`h-full w-full flex bg-[#36393F] overflow-hidden`}
+            >
+                <div
+                    class={`w-fit
+                    max-sm:w-full
+                    ${props.currentEditor ? "max-sm:hidden" : ""}`}
+                >
+                    <cl.ConversationList
+                        eventBus={props.bus}
+                        emit={props.bus.emit}
+                        convoListRetriever={props.conversationLists}
+                        groupChatListGetter={props.groupChatController}
+                        hasNewMessages={props.newMessageChecker}
+                        {...props}
+                    />
+                </div>
+
+                {this.state.currentEditor
+                    ? (
+                        <div class={`flex flex-col flex-1 overflow-hidden`}>
+                            <TopBar
+                                bus={this.props.bus}
+                                buttons={buttons}
+                                currentEditor={this.state.currentEditor}
+                                profileGetter={this.props.profileGetter}
+                                showRightPanel={this.props.rightPanelModel.show}
+                            />
+                            <div class={`flex-1 overflow-auto`}>
+                                <MessagePanel
+                                    myPublicKey={props.ctx.publicKey}
+                                    rightPanelModel={props.rightPanelModel}
+                                    emit={props.bus.emit}
+                                    newMessageListener={props.newMessageListener}
+                                    focusedContent={getFocusedContent(
+                                        props.focusedContent.get(this.state.currentEditor.pubkey.hex),
+                                        props.profileGetter,
+                                    )}
+                                    profilesSyncer={props.profilesSyncer}
+                                    eventSyncer={props.eventSyncer}
+                                    isGroupMessage={props.isGroupMessage}
+                                    profileGetter={props.profileGetter}
+                                    editorModel={this.state.currentEditor}
+                                    messageGetter={props.messageGetter}
+                                    relayRecordGetter={props.relayRecordGetter}
+                                />
+                            </div>
+                        </div>
+                    )
+                    : undefined}
+            </div>
+        );
+        console.debug("DirectMessageContainer:end", Date.now() - t);
+        return vDom;
+    }
+}
+
+function TopBar(props: {
+    bus: EventBus<UI_Interaction_Event>;
+    currentEditor: EditorModel;
+    profileGetter: ProfileGetter;
+    showRightPanel: boolean;
+    buttons: VNode[];
+}) {
+    return (
+        <div
+            class={`h-14 border-l border-b border-[#36393F] flex
+                items-center justify-between bg-[#2F3136]`}
+        >
+            <div class={`flex items-center overflow-hidden`}>
+                <button
+                    onClick={() => {
+                        props.bus.emit({
+                            type: "BackToContactList",
+                        });
+                    }}
+                    class={`w-6 h-6 mobile:mr-2 desktop:hidden ${IconButtonClass}`}
+                >
+                    <LeftArrowIcon
+                        class={`w-4 h-4`}
+                        style={{
+                            fill: "rgb(185, 187, 190)",
+                        }}
+                    />
+                </button>
+                <span
+                    // https://tailwindcss.com/docs/customizing-colors
+                    // https://tailwindcss.com/docs/cursor
+                    class={`text-[#F3F4EA] text-[1.2rem]
                                     hover:text-[#60a5fa] hover:cursor-pointer
                                     ml-4 mobile:text-base whitespace-nowrap truncate`}
-                                    onClick={() => {
-                                        if (!props.currentEditor) {
-                                            return;
-                                        }
-                                        props.bus.emit({
-                                            type: "ViewUserDetail",
-                                            pubkey: props.currentEditor.pubkey,
-                                        });
-                                    }}
-                                >
-                                    {props.profileGetter.getProfilesByPublicKey(props.currentEditor.pubkey)
-                                        ?.profile.name ||
-                                        props.currentEditor.pubkey.bech32()}
-                                </span>
-                            </div>
-                            <div>
-                                {buttons}
+                    onClick={() => {
+                        if (!props.currentEditor) {
+                            return;
+                        }
+                        props.bus.emit({
+                            type: "ViewUserDetail",
+                            pubkey: props.currentEditor.pubkey,
+                        });
+                    }}
+                >
+                    {props.profileGetter.getProfilesByPublicKey(
+                        props.currentEditor.pubkey,
+                    )
+                        ?.profile.name ||
+                        props.currentEditor.pubkey.bech32()}
+                </span>
+            </div>
+            <div>
+                {props.buttons}
 
-                                {!props.rightPanelModel.show
-                                    ? (
-                                        <button
-                                            class={`absolute z-10 w-6 h-6 transition-transform duration-100 ease-in-out right-4 mobile:right-0 top-4${
-                                                props.rightPanelModel.show ? " rotate-180" : ""
-                                            } ${IconButtonClass}`}
-                                            onClick={() => {
-                                                props.bus.emit({
-                                                    type: "ToggleRightPanel",
-                                                    show: !props.rightPanelModel.show,
-                                                });
-                                            }}
-                                        >
-                                            <LeftArrowIcon
-                                                class={`w-4 h-4`}
-                                                style={{
-                                                    fill: "#F3F4EA",
-                                                }}
-                                            />
-                                        </button>
-                                    )
-                                    : undefined}
-                            </div>
-                        </div>
-                        <div class={`flex-1 overflow-x-auto`}>
-                            {props.currentEditor
-                                ? (
-                                    <MessagePanel
-                                        myPublicKey={props.ctx.publicKey}
-                                        rightPanelModel={props.rightPanelModel}
-                                        emit={props.bus.emit}
-                                        newMessageListener={props.newMessageListener}
-                                        focusedContent={getFocusedContent(
-                                            props.focusedContent.get(props.currentEditor.pubkey.hex),
-                                            props.profileGetter,
-                                        )}
-                                        profilesSyncer={props.profilesSyncer}
-                                        eventSyncer={props.eventSyncer}
-                                        isGroupMessage={props.isGroupMessage}
-                                        profileGetter={props.profileGetter}
-                                        editorModel={props.currentEditor}
-                                        messageGetter={props.messageGetter}
-                                        relayRecordGetter={props.relayRecordGetter}
-                                    />
-                                )
-                                : undefined}
-                        </div>
-                    </div>
-                )
-                : undefined}
+                {!props.showRightPanel
+                    ? (
+                        <button
+                            class={`absolute z-10 w-6 h-6 transition-transform duration-100 ease-in-out right-4 mobile:right-0 top-4${
+                                props.showRightPanel ? " rotate-180" : ""
+                            } ${IconButtonClass}`}
+                            onClick={() => {
+                                props.bus.emit({
+                                    type: "ToggleRightPanel",
+                                    show: !props.showRightPanel,
+                                });
+                            }}
+                        >
+                            <LeftArrowIcon
+                                class={`w-4 h-4`}
+                                style={{
+                                    fill: "#F3F4EA",
+                                }}
+                            />
+                        </button>
+                    )
+                    : undefined}
+            </div>
         </div>
     );
-    console.debug("DirectMessageContainer:end", Date.now() - t);
-    return vDom;
 }