diff --git a/frontend/app/src/components/AlertBoxModal.svelte b/frontend/app/src/components/AlertBoxModal.svelte
deleted file mode 100644
index 5c571e9edf..0000000000
--- a/frontend/app/src/components/AlertBoxModal.svelte
+++ /dev/null
@@ -1,54 +0,0 @@
-<script lang="ts">
-    import { i18nKey, mobileWidth, type ResourceKey } from "@client";
-    import { _ } from "svelte-i18n";
-    import { interpolate } from "../i18n/i18n";
-    import AlertBox from "./AlertBox.svelte";
-    import Button from "./Button.svelte";
-    import ButtonGroup from "./ButtonGroup.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import ModalContent from "./ModalContent.svelte";
-    import Overlay from "./Overlay.svelte";
-    import Translatable from "./Translatable.svelte";
-
-    interface Props {
-        title: ResourceKey;
-        warning: ResourceKey;
-        onClose: () => void;
-    }
-
-    let { onClose, title, warning }: Props = $props();
-</script>
-
-<Overlay {onClose} dismissible>
-    <ModalContent closeIcon {onClose}>
-        {#snippet header()}
-            <div class="header">
-                <Translatable resourceKey={title}></Translatable>
-            </div>
-        {/snippet}
-        {#snippet body()}
-            <div class="body">
-                <AlertBox>
-                    <Markdown text={interpolate($_, warning)} />
-                </AlertBox>
-            </div>
-        {/snippet}
-        {#snippet footer()}
-            <div class="footer">
-                <ButtonGroup>
-                    <Button onClick={onClose} small={!$mobileWidth} tiny={$mobileWidth}>
-                        <Translatable resourceKey={i18nKey("close")} />
-                    </Button>
-                </ButtonGroup>
-            </div>
-        {/snippet}
-    </ModalContent>
-</Overlay>
-
-<style lang="scss">
-    .body {
-        display: flex;
-        flex-direction: column;
-        gap: $sp4;
-    }
-</style>
diff --git a/frontend/app/src/components/App.svelte b/frontend/app/src/components/App.svelte
deleted file mode 100644
index c9097c8e84..0000000000
--- a/frontend/app/src/components/App.svelte
+++ /dev/null
@@ -1,721 +0,0 @@
-<script lang="ts">
-    import "@styles/global.scss";
-
-    import "@i18n/i18n";
-    import { reviewingTranslations } from "@i18n/i18n";
-    import { trackedEffect } from "@src/utils/effects.svelte";
-    import { detectNeedsSafeInset, setupKeyboardTracking } from "@src/utils/safe_area";
-    import { rtlStore } from "@stores/rtl";
-    import { snowing } from "@stores/snow";
-    import { incomingVideoCall } from "@stores/video";
-    import { broadcastLoggedInUser } from "@stores/xframe";
-    import { currentTheme } from "@theme/themes";
-    import "@utils/markdown";
-    import {
-        expectNewFcmToken,
-        expectNotificationTap,
-        expectPushNotifications,
-    } from "@utils/native/notification_channels";
-    import "@utils/scream";
-    import {
-        isLandingPageRoute,
-        isScrollingRoute,
-        redirectLandingPageLinksIfNecessary,
-    } from "@utils/urls";
-    import { portalState } from "component-lib";
-    import {
-        type ChatIdentifier,
-        type DexId,
-        type DiamondMembershipFees,
-        OpenChat,
-        PremiumItem,
-        type UpdateMarketMakerConfigArgs,
-        type VideoCallType,
-        anonUserStore,
-        botState,
-        chatListScopeStore,
-        fontSize,
-        identityStateStore,
-        inititaliseLogger,
-        notFoundStore,
-        routeForChatIdentifier,
-        routeForScope,
-        routeStore,
-        subscribe,
-    } from "@client";
-    import { navigate } from "@utils/navigation";
-    import { onMount, setContext } from "svelte";
-    import { overrideItemIdKeyNameBeforeInitialisingDndZones } from "svelte-dnd-action";
-    import { _, isLoading } from "svelte-i18n";
-    import {
-        clearAllNotifications,
-        deleteFcmToken,
-        getFcmToken,
-        svelteReady,
-    } from "tauri-plugin-oc-api";
-    import Head from "./Head.svelte";
-    import Profiler from "./Profiler.svelte";
-    import Router from "./Router.svelte";
-    import Snow from "@shared_components/Snow.svelte";
-    import UpgradeBanner from "./UpgradeBanner.svelte";
-    import Witch from "@shared_components/Witch.svelte";
-    import InstallPrompt from "./home/InstallPrompt.svelte";
-    import NotificationsBar from "./home/NotificationsBar.svelte";
-    import ActiveCall from "./home/video/ActiveCall.svelte";
-    import IncomingCall from "./home/video/IncomingCall.svelte";
-    import VideoCallAccessRequests from "./home/video/VideoCallAccessRequests.svelte";
-
-    overrideItemIdKeyNameBeforeInitialisingDndZones("_id");
-
-    const logger = inititaliseLogger(
-        import.meta.env.OC_ROLLBAR_ACCESS_TOKEN!,
-        import.meta.env.OC_WEBSITE_VERSION!,
-        import.meta.env.OC_BUILD_ENV!,
-    );
-
-    function createOpenChatClient(): OpenChat {
-        const client = new OpenChat({
-            mobileLayout: import.meta.env.OC_MOBILE_LAYOUT,
-            icUrl: import.meta.env.OC_IC_URL,
-            webAuthnOrigin: import.meta.env.OC_WEBAUTHN_ORIGIN,
-            iiDerivationOrigin: import.meta.env.OC_II_DERIVATION_ORIGIN,
-            openStorageIndexCanister: import.meta.env.OC_STORAGE_INDEX_CANISTER!,
-            groupIndexCanister: import.meta.env.OC_GROUP_INDEX_CANISTER!,
-            notificationsCanister: import.meta.env.OC_NOTIFICATIONS_CANISTER!,
-            identityCanister: import.meta.env.OC_IDENTITY_CANISTER!,
-            onlineCanister: import.meta.env.OC_ONLINE_CANISTER!,
-            userIndexCanister: import.meta.env.OC_USER_INDEX_CANISTER!,
-            translationsCanister: import.meta.env.OC_TRANSLATIONS_CANISTER!,
-            registryCanister: import.meta.env.OC_REGISTRY_CANISTER!,
-            internetIdentityUrl: import.meta.env.OC_INTERNET_IDENTITY_URL!,
-            nfidUrl: import.meta.env.OC_NFID_URL!,
-            userGeekApiKey: import.meta.env.OC_USERGEEK_APIKEY!,
-            videoBridgeUrl: import.meta.env.OC_VIDEO_BRIDGE_URL!,
-            meteredApiKey: import.meta.env.OC_METERED_APIKEY!,
-            blobUrlPattern: import.meta.env.OC_BLOB_URL_PATTERN!,
-            canisterUrlPath: import.meta.env.OC_CANISTER_URL_PATH!,
-            proposalBotCanister: import.meta.env.OC_PROPOSALS_BOT_CANISTER!,
-            marketMakerCanister: import.meta.env.OC_MARKET_MAKER_CANISTER!,
-            signInWithEmailCanister: import.meta.env.OC_SIGN_IN_WITH_EMAIL_CANISTER!,
-            signInWithEthereumCanister: import.meta.env.OC_SIGN_IN_WITH_ETHEREUM_CANISTER!,
-            signInWithSolanaCanister: import.meta.env.OC_SIGN_IN_WITH_SOLANA_CANISTER!,
-            oneSecForwarderCanister: import.meta.env.OC_ONESEC_FORWARDER_CANISTER!,
-            oneSecMinterCanister: import.meta.env.OC_ONESEC_MINTER_CANISTER!,
-            i18nFormatter: $_,
-            logger,
-            websiteVersion: import.meta.env.OC_WEBSITE_VERSION!,
-            rollbarApiKey: import.meta.env.OC_ROLLBAR_ACCESS_TOKEN!,
-            env: import.meta.env.OC_BUILD_ENV!,
-            bitcoinMainnetEnabled: import.meta.env.OC_BITCOIN_MAINNET_ENABLED! === "true",
-            vapidPublicKey: import.meta.env.OC_VAPID_PUBLIC_KEY!,
-            accountLinkingCodesEnabled:
-                import.meta.env.OC_ACCOUNT_LINKING_CODES_ENABLED! === "true",
-            baseOrigin: import.meta.env.OC_BASE_ORIGIN!,
-        });
-
-        return client;
-    }
-
-    let client: OpenChat = createOpenChatClient();
-    setContext<OpenChat>("client", client);
-
-    let profileTrace = client.showTrace();
-    // I can't (yet) find a way to avoid using "any" here. Will try to improve but need to commit this crime for the time being
-    let videoCallElement: any;
-    let landingPageRoute = $derived(isLandingPageRoute($routeStore));
-    let homeRoute = $derived($routeStore.kind === "home_route");
-    let showLandingPage = $derived(
-        landingPageRoute || (homeRoute && $identityStateStore.kind === "anon" && $anonUserStore),
-    );
-    let isFirefox = navigator.userAgent.indexOf("Firefox") >= 0;
-    let burstPath = $derived(
-        $currentTheme.mode === "dark" ? "/assets/burst_dark" : "/assets/burst_light",
-    );
-    let burstUrl = $derived(isFirefox ? `${burstPath}.png` : `${burstPath}.svg`);
-    let burstFixed = $derived(isScrollingRoute($routeStore));
-
-    trackedEffect("rtl", () => {
-        // subscribe to the rtl store so that we can set the overall page direction at the right time
-        document.dir = $rtlStore ? "rtl" : "ltr";
-    });
-
-    trackedEffect("landing-page", () => {
-        if (!$notFoundStore && showLandingPage) {
-            document.body.classList.add("landing-page");
-        } else {
-            document.body.classList.remove("landing-page");
-        }
-    });
-
-    trackedEffect("font-size", () => {
-        console.log("Setting font size to: ", $fontSize);
-        document.documentElement.style.setProperty("--font-size", `${$fontSize}px`);
-    });
-
-    trackedEffect("calculate-height", calculateHeight);
-
-    onMount(() => {
-        const unsubs = [
-            subscribe("startVideoCall", startVideoCall),
-            subscribe("hangup", hangup),
-            subscribe("askToSpeak", askToSpeak),
-            subscribe("userLoggedIn", onUserLoggedIn),
-        ];
-        window.addEventListener("orientationchange", calculateHeight);
-        window.addEventListener("unhandledrejection", unhandledError);
-        if (!client.isNativeApp()) {
-            window.visualViewport?.addEventListener("resize", calculateHeight);
-        }
-
-        redirectLandingPageLinksIfNecessary();
-
-        //@ts-ignore
-        window.platformModerator = {
-            addHotGroupExclusion,
-            deleteFrozenGroup,
-            deleteMessage,
-            deleteChannelMessage,
-            freezeGroup,
-            removeHotGroupExclusion,
-            setCommunityModerationFlags,
-            unfreezeGroup,
-            addMessageFilter,
-            removeMessageFilter,
-            reportedMessages,
-        };
-
-        //@ts-ignore
-        window.platformOperator = {
-            addRemoveSwapProvider,
-            setGroupUpgradeConcurrency,
-            setCommunityUpgradeConcurrency,
-            setUserUpgradeConcurrency,
-            markLocalGroupIndexFull,
-            reinstateMissedDailyClaims,
-            setAirdropConfig,
-            setDiamondMembershipFees,
-            setTokenEnabled,
-            stakeNeuronForSubmittingProposals,
-            topUpNeuronForSubmittingProposals,
-            updateMarketMakerConfig,
-            withdrawFromIcpSwap,
-            setPremiumItemCost,
-            updateBlockedUsernamePatterns,
-            pauseEventLoop: () => client.pauseEventLoop(),
-            resumeEventLoop: () => client.resumeEventLoop(),
-        };
-
-        const unsub = _.subscribe((formatter) => {
-            botState.messageFormatter = formatter;
-        });
-
-        if (client.isNativeAndroid()) {
-            // Inform the native android app that svelte code is ready! SetTimeout
-            // delays the fn execution until the call stack is empty, just to
-            // make sure anything else non-async that needs to run is done.
-            //
-            // Once Svelte app is ready, native code can start pushing events.
-            setTimeout(svelteReady);
-        }
-
-        const unsubKeyboard = setupKeyboardTracking();
-
-        return () => {
-            window.removeEventListener("orientationchange", calculateHeight);
-            window.removeEventListener("unhandledrejection", unhandledError);
-            if (!client.isNativeApp()) {
-                window.visualViewport?.removeEventListener("resize", calculateHeight);
-            }
-            unsubs.forEach((u) => u());
-            unsub();
-            unsubKeyboard();
-        };
-    });
-
-    // Guards the one-time native setup (listeners + logout hook) so it runs once
-    // per page session. setupNativeApp() itself runs again on every userLoggedIn
-    // (account switch), but only the FCM token registration should repeat —
-    // re-registering listeners or the logout hook would stack duplicate handlers.
-    let nativeSetupDone = false;
-
-    // Sets up push notifications and FCM token management for native apps
-    function setupNativeApp() {
-        const addFcmToken = (token: string) => {
-            client
-                .addFcmToken(token)
-                .then(() => console.info("FCM token updated successfully"))
-                .catch(console.error);
-        };
-
-        if (!client.isNativeApp()) {
-            return;
-        }
-
-        // Ask for the current FCM token and register it unconditionally on every
-        // login. Registration is last-login-wins on the backend, so this also
-        // reclaims a token still bound to a previous account on this device (a
-        // fcm_token_exists pre-check would wrongly skip that).
-        getFcmToken().then((token) => {
-            if (!token) {
-                // TODO do we handle this somehow? Debounce, try again?
-                console.error("No FCM token received");
-                return;
-            }
-
-            addFcmToken(token);
-        });
-
-        // Everything below registers session-scoped handlers and must run once.
-        if (nativeSetupDone) {
-            return;
-        }
-        nativeSetupDone = true;
-
-        // Listen for incoming push notifications from Firebase; also asks
-        // for permission to show notifications if not already granted.
-        expectPushNotifications().catch(console.error);
-
-        // Listen for notifications user has tapped on
-        expectNotificationTap().catch(console.error);
-
-        // Expect FCM token refreshes
-        expectNewFcmToken(addFcmToken);
-
-        // Best-effort push hygiene on sign-out, while the identity is
-        // still valid: unbind this device's token from the account,
-        // delete the device token (pushes to it then dead-end at FCM,
-        // and the next login mints + registers a fresh one), and empty
-        // the tray so nothing from this account lingers.
-        client.onLogout(async () => {
-            const token = await getFcmToken().catch(() => null);
-            if (token) {
-                await client.removeFcmToken(token).catch(console.error);
-            }
-            await deleteFcmToken().catch(console.error);
-            await clearAllNotifications().catch(console.error);
-        });
-    }
-
-    if ($identityStateStore.kind === "logged_in") {
-        setupNativeApp();
-    }
-
-    function onUserLoggedIn(userId: string) {
-        setupNativeApp();
-        broadcastLoggedInUser(userId);
-    }
-
-    function addHotGroupExclusion(chatId: string): void {
-        client.addHotGroupExclusion({ kind: "group_chat", groupId: chatId }).then((success) => {
-            if (success) {
-                console.log("Hot group exclusion added", chatId);
-            } else {
-                console.log("Failed to add hot group exclusion", chatId);
-            }
-        });
-    }
-
-    function deleteFrozenGroup(chatId: string): void {
-        client.deleteFrozenGroup({ kind: "group_chat", groupId: chatId }).then((success) => {
-            if (success) {
-                console.log("Group deleted", chatId);
-            } else {
-                console.log("Failed to delete frozen group", chatId);
-            }
-        });
-    }
-
-    function freezeGroup(chatId: string, reason: string | undefined): void {
-        client.freezeGroup({ kind: "group_chat", groupId: chatId }, reason).then((success) => {
-            if (success) {
-                console.log("Group frozen", chatId);
-            } else {
-                console.log("Failed to freeze group", chatId);
-            }
-        });
-    }
-
-    function removeHotGroupExclusion(chatId: string): void {
-        client.removeHotGroupExclusion({ kind: "group_chat", groupId: chatId }).then((success) => {
-            if (success) {
-                console.log("Hot group exclusion removed", chatId);
-            } else {
-                console.log("Failed to remove hot group exclusion", chatId);
-            }
-        });
-    }
-
-    function setCommunityModerationFlags(communityId: string, flags: number): void {
-        client.setCommunityModerationFlags(communityId, flags).then((success) => {
-            if (success) {
-                console.log("Community moderation flags updated", communityId);
-            } else {
-                console.log("Failed to set community moderation flags", communityId);
-            }
-        });
-    }
-
-    function unfreezeGroup(chatId: string): void {
-        client.unfreezeGroup({ kind: "group_chat", groupId: chatId }).then((success) => {
-            if (success) {
-                console.log("Group unfrozen", chatId);
-            } else {
-                console.log("Failed to unfreeze group", chatId);
-            }
-        });
-    }
-
-    function addMessageFilter(regex: string): void {
-        client.addMessageFilter(regex);
-    }
-
-    function removeMessageFilter(id: bigint): void {
-        client.removeMessageFilter(id);
-    }
-
-    function reportedMessages(userId?: string): void {
-        console.log(client.reportedMessages(userId));
-    }
-
-    function deleteChannelMessage(
-        communityId: string,
-        channelId: number,
-        messageId: bigint,
-        threadRootMessageIndex?: number | undefined,
-    ): void {
-        client
-            .deleteMessage(
-                { kind: "channel", communityId, channelId },
-                threadRootMessageIndex,
-                messageId,
-                true,
-            )
-            .then((success) => {
-                if (success) {
-                    console.log(
-                        "Message deleted",
-                        communityId,
-                        channelId,
-                        messageId,
-                        threadRootMessageIndex,
-                    );
-                } else {
-                    console.log(
-                        "Failed to delete message",
-                        communityId,
-                        channelId,
-                        messageId,
-                        threadRootMessageIndex,
-                    );
-                }
-            });
-    }
-
-    function deleteMessage(
-        chatId: string,
-        messageId: bigint,
-        threadRootMessageIndex?: number | undefined,
-    ): void {
-        client
-            .deleteMessage(
-                { kind: "group_chat", groupId: chatId },
-                threadRootMessageIndex,
-                messageId,
-                true,
-            )
-            .then((success) => {
-                if (success) {
-                    console.log("Message deleted", chatId, messageId, threadRootMessageIndex);
-                } else {
-                    console.log(
-                        "Failed to delete message",
-                        chatId,
-                        messageId,
-                        threadRootMessageIndex,
-                    );
-                }
-            });
-    }
-
-    function addRemoveSwapProvider(swapProvider: DexId, add: boolean): void {
-        client.addRemoveSwapProvider(swapProvider, add).then((success) => {
-            if (success) {
-                const action = add ? "Added" : "Removed";
-                console.log(`${action} swap provider`, swapProvider);
-            } else {
-                console.error("Failed to add/remove swap provider");
-            }
-        });
-    }
-
-    function setGroupUpgradeConcurrency(value: number): void {
-        client.setGroupUpgradeConcurrency(value).then((success) => {
-            if (success) {
-                console.log("Group upgrade concurrency set", value);
-            } else {
-                console.error("Failed to set group upgrade concurrency", value);
-            }
-        });
-    }
-
-    function setCommunityUpgradeConcurrency(value: number): void {
-        client.setCommunityUpgradeConcurrency(value).then((success) => {
-            if (success) {
-                console.log("Community upgrade concurrency set", value);
-            } else {
-                console.error("Failed to set community upgrade concurrency", value);
-            }
-        });
-    }
-
-    function setUserUpgradeConcurrency(value: number): void {
-        client.setUserUpgradeConcurrency(value).then((success) => {
-            if (success) {
-                console.log("User upgrade concurrency set", value);
-            } else {
-                console.error("Failed to set user upgrade concurrency", value);
-            }
-        });
-    }
-
-    function markLocalGroupIndexFull(canisterId: string, full: boolean): void {
-        client.markLocalGroupIndexFull(canisterId, full).then((success) => {
-            if (success) {
-                console.log("LocalGroupIndex marked as full", full);
-            } else {
-                console.error("Failed to mark LocalGroupIndex as full", full);
-            }
-        });
-    }
-
-    function reinstateMissedDailyClaims(userId: string, days: number[]): void {
-        client.reinstateMissedDailyClaims(userId, days).then((success) => {
-            if (success) {
-                console.log("Reinstated missed daily claims");
-            } else {
-                console.error("Failed to reinstate missed daily claims");
-            }
-        });
-    }
-
-    function setAirdropConfig(
-        channelId: number,
-        channelName: string,
-        communityId?: string,
-        communityName?: string,
-    ): void {
-        client
-            .setAirdropConfig(channelId, channelName, communityId, communityName)
-            .then((success) => {
-                if (success) {
-                    console.log("Airdrop config set");
-                } else {
-                    console.error("Failed to set airdrop config");
-                }
-            });
-    }
-
-    function setDiamondMembershipFees(fees: DiamondMembershipFees[]): void {
-        client.setDiamondMembershipFees(fees).then((success) => {
-            if (success) {
-                console.log("Diamond membership fees set", fees);
-            } else {
-                console.error("Failed to set diamond membership fees", fees);
-            }
-        });
-    }
-
-    function setTokenEnabled(ledger: string, enabled: boolean): void {
-        client.setTokenEnabled(ledger, enabled).then((success) => {
-            const status = enabled ? "enabled" : "disabled";
-            if (success) {
-                console.log(`Token ${status}`);
-            } else {
-                console.error(`Failed to set token ${status}`);
-            }
-        });
-    }
-
-    function stakeNeuronForSubmittingProposals(governanceCanisterId: string, stake: bigint): void {
-        client.stakeNeuronForSubmittingProposals(governanceCanisterId, stake).then((success) => {
-            if (success) {
-                console.log("Neuron staked successfully");
-            } else {
-                console.error("Failed to stake neuron");
-            }
-        });
-    }
-
-    function topUpNeuronForSubmittingProposals(governanceCanisterId: string, amount: bigint): void {
-        client.topUpNeuronForSubmittingProposals(governanceCanisterId, amount).then((success) => {
-            if (success) {
-                console.log("Neuron topped up successfully");
-            } else {
-                console.error("Failed to top up neuron");
-            }
-        });
-    }
-
-    function updateMarketMakerConfig(config: UpdateMarketMakerConfigArgs): void {
-        client.updateMarketMakerConfig(config).then((resp) => {
-            if (resp === "success") {
-                console.log("Market maker config updated");
-            } else {
-                console.error("Failed to update market maker config", resp);
-            }
-        });
-    }
-
-    function withdrawFromIcpSwap(
-        userId: string,
-        swapId: bigint,
-        inputToken: boolean,
-        amount: bigint | undefined,
-        fee: bigint | undefined,
-    ): void {
-        client.withdrawFromIcpSwap(userId, swapId, inputToken, amount, fee);
-    }
-
-    function setPremiumItemCost(item: PremiumItem, chitCost: number): void {
-        client.setPremiumItemCost(item, chitCost);
-    }
-
-    function updateBlockedUsernamePatterns(pattern: string, add: boolean) {
-        client.updateBlockedUsernamePatterns(pattern, add);
-    }
-
-    function calculateHeight() {
-        // fix the issue with 100vh layouts in various mobile browsers.
-        // In PWA (home-screen) mode on iOS, window.innerHeight does NOT shrink
-        // when the virtual keyboard appears, but visualViewport.height does.
-        // The native Tauri app has its own keyboard handling via expectWindowInsetChange,
-        // so we only use visualViewport.height for non-native builds.
-        const viewportHeight =
-            !client.isNativeApp() && window.visualViewport
-                ? window.visualViewport.height
-                : window.innerHeight;
-        document.documentElement.style.setProperty("--vh", `${viewportHeight * 0.01}px`);
-    }
-
-    function unhandledError(ev: Event) {
-        if (
-            ev instanceof ErrorEvent &&
-            (ev.message.includes("ResizeObserver loop completed with undelivered notifications") ||
-                ev.message.includes("ResizeObserver loop limit exceeded"))
-        ) {
-            return;
-        }
-
-        logger?.error("Unhandled error: ", ev);
-        if (
-            ev instanceof PromiseRejectionEvent &&
-            (ev.reason?.name === "SessionExpiryError" ||
-                ev.reason?.name === "InvalidDelegationError")
-        ) {
-            client.logout();
-            ev.preventDefault();
-        }
-    }
-
-    function resize() {
-        portalState.close();
-        calculateHeight();
-    }
-
-    function startVideoCall(payload: {
-        chatId: ChatIdentifier;
-        callType: VideoCallType;
-        join: boolean;
-    }) {
-        videoCallElement?.startOrJoinVideoCall(payload.chatId, payload.callType, payload.join);
-    }
-
-    function askToSpeak() {
-        videoCallElement?.askToSpeak();
-    }
-
-    function hangup() {
-        videoCallElement?.hangup();
-    }
-
-    function joinVideoCall(chatId: ChatIdentifier, callType: VideoCallType) {
-        incomingVideoCall.set(undefined);
-        navigate(routeForChatIdentifier("none", chatId));
-        videoCallElement?.startOrJoinVideoCall(chatId, callType, true);
-    }
-
-    if (client.isNativeAndroid()) {
-        document.body.classList.add("native-android");
-    }
-    detectNeedsSafeInset();
-</script>
-
-{#if $currentTheme.burst}
-    <div
-        class:fixed={burstFixed}
-        class="burst-wrapper"
-        style={`background-image: url(${burstUrl})`}>
-    </div>
-{/if}
-
-<Head />
-
-<ActiveCall
-    {showLandingPage}
-    onClearSelection={() => navigate(routeForScope($chatListScopeStore))}
-    bind:this={videoCallElement} />
-
-<VideoCallAccessRequests />
-
-<IncomingCall onJoinVideoCall={joinVideoCall} />
-
-<Witch background />
-
-{#if !client.isNativeApp()}
-    <InstallPrompt />
-{/if}
-
-<NotificationsBar />
-
-{#if $identityStateStore.kind === "anon" || $identityStateStore.kind === "logging_in" || $identityStateStore.kind === "registering" || $identityStateStore.kind === "logged_in" || $identityStateStore.kind === "loading_user"}
-    {#if !$isLoading || $reviewingTranslations}
-        <Router {showLandingPage} />
-    {/if}
-{/if}
-
-{#if profileTrace}
-    <Profiler />
-{/if}
-
-<UpgradeBanner />
-
-{#if $snowing}
-    <Snow />
-{/if}
-
-<svelte:window onresize={resize} onerror={unhandledError} onorientationchange={resize} />
-
-<style lang="scss">
-    .burst-wrapper {
-        overflow: hidden;
-        max-width: 100%;
-        width: 100%;
-        position: absolute;
-        height: 100vh;
-        min-height: 100%;
-        pointer-events: none;
-        background-repeat: no-repeat;
-        background-size: 1400px;
-        background-origin: 50% 50%;
-        background-position: right 20% top toRem(150);
-
-        &.fixed {
-            position: fixed;
-        }
-
-        @include mobile() {
-            background-size: 800px;
-            background-position: left 0 top toRem(150);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/AreYouSure.svelte b/frontend/app/src/components/AreYouSure.svelte
deleted file mode 100644
index e3f5d924ce..0000000000
--- a/frontend/app/src/components/AreYouSure.svelte
+++ /dev/null
@@ -1,105 +0,0 @@
-<script lang="ts">
-    import type { ResourceKey } from "@client";
-    import type { Snippet } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { i18nKey, interpolate } from "../i18n/i18n";
-    import Button from "./Button.svelte";
-    import ButtonGroup from "./ButtonGroup.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import Input from "./Input.svelte";
-    import ModalContent from "./ModalContent.svelte";
-    import Overlay from "./Overlay.svelte";
-    import Translatable from "./Translatable.svelte";
-
-    interface Props {
-        message?: ResourceKey | undefined;
-        action: (yes: boolean) => Promise<void>;
-        doubleCheck?: { challenge: ResourceKey; response: ResourceKey } | undefined;
-        title?: ResourceKey | undefined;
-        yesLabel?: ResourceKey | undefined;
-        noLabel?: ResourceKey | undefined;
-        children?: Snippet;
-    }
-
-    let {
-        message,
-        action,
-        doubleCheck,
-        title = i18nKey("areYouSure"),
-        yesLabel = i18nKey("yesPlease"),
-        noLabel = i18nKey("noThanks"),
-        children,
-    }: Props = $props();
-
-    let inProgress = $state(false);
-    let response = $state("");
-
-    let canConfirm = $derived(
-        !inProgress &&
-            (doubleCheck === undefined || response === interpolate($_, doubleCheck.response)),
-    );
-
-    function onClick(yes: boolean) {
-        if (yes) {
-            inProgress = true;
-        }
-
-        action(yes).finally(() => {
-            inProgress = false;
-        });
-    }
-</script>
-
-<Overlay>
-    <ModalContent hideBody={message === undefined && children === undefined}>
-        {#snippet header()}
-            {#if title !== undefined}
-                <Translatable resourceKey={title} />
-            {/if}
-        {/snippet}
-        {#snippet body()}
-            {@render children?.()}
-            {#if message !== undefined}
-                <Markdown inline={false} text={interpolate($_, message)} />
-
-                {#if doubleCheck !== undefined}
-                    <p class="challenge">
-                        <Markdown text={interpolate($_, doubleCheck.challenge)} />
-                    </p>
-                    <Input
-                        invalid={false}
-                        disabled={inProgress}
-                        autofocus
-                        bind:value={response}
-                        minlength={0}
-                        maxlength={200}
-                        countdown={false} />
-                {/if}
-            {/if}
-        {/snippet}
-        {#snippet footer()}
-            <ButtonGroup>
-                <Button disabled={inProgress} small onClick={() => onClick(false)} secondary>
-                    {#if noLabel !== undefined}
-                        <Translatable resourceKey={noLabel} />
-                    {/if}
-                </Button>
-                <Button
-                    loading={inProgress}
-                    disabled={!canConfirm}
-                    small
-                    onClick={() => onClick(true)}>
-                    {#if yesLabel !== undefined}
-                        <Translatable resourceKey={yesLabel} />
-                    {/if}
-                </Button>
-            </ButtonGroup>
-        {/snippet}
-    </ModalContent>
-</Overlay>
-
-<style lang="scss">
-    .challenge {
-        margin: $sp3 0;
-    }
-</style>
diff --git a/frontend/app/src/components/ArrowLink.svelte b/frontend/app/src/components/ArrowLink.svelte
deleted file mode 100644
index fd4ee5ade9..0000000000
--- a/frontend/app/src/components/ArrowLink.svelte
+++ /dev/null
@@ -1,51 +0,0 @@
-<script lang="ts">
-    import type { Snippet } from "svelte";
-    import Arrow from "@shared_components/Arrow.svelte";
-
-    interface Props {
-        url: string;
-        color?: string;
-        target?: string | undefined;
-        children?: Snippet;
-    }
-
-    let { url, color = "#7E52FF", target = undefined, children }: Props = $props();
-</script>
-
-<a class="link" href={url} {target}>
-    {@render children?.()}
-    <div class="arrow">
-        <Arrow {color} />
-    </div>
-</a>
-
-<style lang="scss">
-    a {
-        position: relative;
-        @include font(bold, normal, fs-100);
-        color: inherit;
-        text-decoration: none;
-        display: flex;
-        align-items: center;
-        gap: $sp3;
-        transition: color 250ms ease-in-out;
-        white-space: nowrap;
-
-        .arrow {
-            transition: flex 250ms ease-in-out;
-            flex: 0 0 toRem(16);
-            text-align: end;
-        }
-
-        @media (hover: hover) {
-            &:hover {
-                text-decoration: none;
-                color: var(--landing-txt-light);
-
-                .arrow {
-                    flex: 0 0 toRem(24);
-                }
-            }
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/Checkbox.svelte b/frontend/app/src/components/Checkbox.svelte
deleted file mode 100644
index be3347ddc2..0000000000
--- a/frontend/app/src/components/Checkbox.svelte
+++ /dev/null
@@ -1,193 +0,0 @@
-<script lang="ts">
-    import type { ResourceKey } from "@client";
-    import { rtlStore } from "../stores/rtl";
-    import Translatable from "./Translatable.svelte";
-    import type { Snippet } from "svelte";
-
-    interface Props {
-        checked?: boolean;
-        disabled?: boolean;
-        waiting?: boolean;
-        id: string;
-        label: ResourceKey | undefined;
-        toggle?: boolean;
-        small?: boolean; // only applies to toggles
-        align?: "center" | "start";
-        children?: Snippet;
-        onChange?: () => void;
-    }
-
-    let {
-        checked = $bindable(false),
-        disabled = false,
-        waiting = false,
-        id,
-        label,
-        toggle = false,
-        small = false,
-        align = "center",
-        children,
-        onChange,
-    }: Props = $props();
-</script>
-
-<div
-    class="checkbox"
-    class:toggle
-    class:waiting
-    class:disabled
-    class:rtl={$rtlStore}
-    class:align-start={align === "start"}>
-    <input {id} type="checkbox" bind:checked {disabled} onchange={onChange} />
-    <label class:small for={id}>
-        {#if children}{@render children()}{:else if label !== undefined}
-            <Translatable resourceKey={label} />
-        {/if}
-    </label>
-</div>
-
-<style lang="scss">
-    $size: 32px;
-    $size-small: 21px;
-
-    :root {
-        --color: var(--input-accent);
-    }
-
-    // todo - this will have rtl issues at the moment
-
-    input {
-        margin: 0;
-        margin-right: toRem(12);
-        width: 1.5em;
-        height: 1.5rem;
-        accent-color: var(--color);
-        appearance: none;
-        background-color: transparent;
-        margin: 0;
-        cursor: pointer;
-
-        font: inherit;
-        color: currentColor;
-        width: 1.15em;
-        height: 1.15em;
-        border: 1px solid currentColor;
-        transform: translateY(-0.075em);
-
-        display: grid;
-        place-content: center;
-    }
-
-    input[type="checkbox"]::before {
-        content: "";
-        width: 0.65em;
-        height: 0.65em;
-        transform: scale(0);
-        transition: 120ms transform ease-in-out;
-        box-shadow: inset 1em 1em var(--color);
-        transform-origin: bottom left;
-        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
-    }
-
-    input[type="checkbox"]:checked::before {
-        transform: scale(1);
-    }
-
-    input[type="checkbox"]:disabled {
-        --color: var(--txt-light);
-        color: var(--txt-light);
-        cursor: not-allowed;
-    }
-
-    .checkbox {
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-        gap: $sp4;
-
-        &.align-start {
-            align-items: flex-start;
-
-            input {
-                margin-top: 3px;
-            }
-        }
-
-        &.rtl input {
-            margin-left: toRem(12);
-            margin-right: unset;
-        }
-    }
-
-    label {
-        flex: 1;
-        user-select: none;
-        cursor: pointer;
-    }
-
-    .toggle {
-        input {
-            display: none;
-        }
-
-        label {
-            transition: background-color 200ms ease-in-out;
-            cursor: pointer;
-            text-indent: -9999px;
-            width: 80px;
-            height: 36px;
-            background: var(--toggle-bg);
-            display: block;
-            border-radius: var(--toggle-rd-track);
-            position: relative;
-
-            &.small {
-                width: 50px;
-                height: 25px;
-            }
-        }
-
-        label:after {
-            content: "";
-            position: absolute;
-            top: 2px;
-            left: 2px;
-            width: $size !important;
-            height: $size;
-            background: #fff;
-            border-radius: var(--toggle-rd-thumb);
-            transition: 150ms ease-in-out;
-        }
-
-        label.small:after {
-            width: $size-small !important;
-            height: $size-small;
-        }
-
-        input:checked + label {
-            background-color: var(--input-accent);
-        }
-
-        input:checked + label:after {
-            left: calc(100% - 2px);
-            transform: translateX(-100%);
-        }
-
-        label:active:after {
-            width: 60px;
-        }
-    }
-
-    .toggle {
-        &.disabled {
-            label {
-                cursor: default;
-            }
-        }
-        &.waiting {
-            label {
-                cursor: wait;
-            }
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/CollapsibleCard.svelte b/frontend/app/src/components/CollapsibleCard.svelte
deleted file mode 100644
index 3cd6384454..0000000000
--- a/frontend/app/src/components/CollapsibleCard.svelte
+++ /dev/null
@@ -1,135 +0,0 @@
-<script lang="ts">
-    import { rtlStore } from "../stores/rtl";
-    import { slide } from "svelte/transition";
-    import { expoInOut } from "svelte/easing";
-
-    import { type Snippet } from "svelte";
-    import Arrow from "@shared_components/Arrow.svelte";
-    import type { ResourceKey } from "@client";
-    import Translatable from "./Translatable.svelte";
-
-    interface Props {
-        headerText?: ResourceKey | undefined;
-        open?: boolean;
-        first?: boolean;
-        transition?: boolean;
-        fill?: boolean;
-        titleSlot?: Snippet;
-        children?: Snippet;
-        onOpened?: () => void;
-        onClosed?: () => void;
-        onToggle?: () => void;
-    }
-
-    let {
-        headerText = undefined,
-        open = $bindable(true),
-        first = false,
-        transition = true,
-        fill = false,
-        titleSlot,
-        children,
-        onClosed,
-        onOpened,
-        onToggle,
-    }: Props = $props();
-
-    function toggle() {
-        open = !open;
-        onToggle?.();
-        if (open) {
-            onOpened?.();
-        } else {
-            onClosed?.();
-        }
-    }
-</script>
-
-<div class="card" class:first class:open>
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div class="header" class:open onclick={toggle} class:fill>
-        {#if titleSlot}{@render titleSlot()}{:else if headerText !== undefined}
-            <Translatable resourceKey={headerText} />
-        {/if}
-
-        <div class="arrow" class:rtl={$rtlStore}>
-            <Arrow
-                size={16}
-                rotate={open ? -45 : 45}
-                color={open
-                    ? "var(--collapsible-open-header-arrow)"
-                    : "var(--collapsible-closed-header-txt)"} />
-        </div>
-    </div>
-    {#if transition}
-        {#if open}
-            <div
-                transition:slide|local={{ duration: 200, easing: expoInOut }}
-                class="body"
-                class:open>
-                {@render children?.()}
-            </div>
-        {/if}
-    {:else}
-        <div class="body static" class:open>
-            {@render children?.()}
-        </div>
-    {/if}
-</div>
-
-<style lang="scss">
-    .card {
-        border-bottom: var(--bw) solid var(--bd);
-
-        &.first {
-            border-top: var(--bw) solid var(--bd);
-        }
-    }
-
-    .header {
-        padding: toRem(20) 0;
-        display: flex;
-        cursor: pointer;
-        justify-content: space-between;
-        align-items: center;
-        @include font(bold, normal, fs-100);
-        color: var(--collapsible-closed-header-txt);
-
-        @include mobile() {
-            padding: toRem(18) 0;
-        }
-
-        &.open {
-            color: var(--txt);
-        }
-
-        &.fill {
-            padding-left: $sp4;
-            padding-right: $sp4;
-        }
-    }
-
-    .arrow {
-        flex: 0 0 20px;
-        justify-self: flex-end;
-        text-align: right;
-    }
-
-    .body {
-        padding-bottom: $sp4;
-
-        @include mobile() {
-            padding-bottom: $sp3;
-        }
-
-        &.static {
-            display: none;
-            pointer-events: none;
-            &.open {
-                pointer-events: all;
-                display: block;
-            }
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/DateInput.svelte b/frontend/app/src/components/DateInput.svelte
deleted file mode 100644
index 197101b1cc..0000000000
--- a/frontend/app/src/components/DateInput.svelte
+++ /dev/null
@@ -1,186 +0,0 @@
-<script module lang="ts">
-    export interface Props {
-        align?: string;
-        disabled?: boolean;
-        endDate?: string | Date;
-        format?: string;
-        futureOnly?: boolean;
-        inputId?: string;
-        inputClasses?: string;
-        mode?: "date" | "time" | "datetime";
-        pickerOnly?: boolean;
-        placeholder?: ResourceKey | undefined;
-        required?: boolean;
-        startDate?: string | Date;
-        value?: bigint | null | undefined;
-        onchange?: (val: bigint | null) => void;
-    }
-</script>
-
-<script lang="ts">
-    // TODO i18n localisation for the date picker!
-
-    import type { ResourceKey } from "@client";
-    import { onMount } from "svelte";
-    import { _ } from "svelte-i18n";
-    import Information from "svelte-material-icons/Information.svelte";
-    import SveltyPicker from "svelty-picker";
-    import { i18nKey, interpolate } from "../i18n/i18n";
-    import Tooltip from "./tooltip/Tooltip.svelte";
-    import Translatable from "./Translatable.svelte";
-
-    let {
-        align = "left",
-        disabled = false,
-        endDate = undefined,
-        format = "dd M yyyy, hh:ii",
-        futureOnly = false,
-        inputId = undefined,
-        inputClasses = "",
-        mode = "datetime",
-        pickerOnly = false,
-        placeholder = undefined,
-        required = false,
-        startDate = undefined,
-        value = undefined,
-        onchange = undefined,
-    }: Props = $props();
-
-    let dateIsValid = $state(true);
-
-    // Initialise local date from the provided value on component mount
-    let localDate: string | undefined = $state(undefined);
-    onMount(() => {
-        if (typeof value === "number") {
-            localDate = new Date(Number(value)).toISOString();
-        }
-    });
-</script>
-
-<div class={`input-wrapper date-time ${align} ${!dateIsValid ? "error" : ""}`}>
-    <SveltyPicker
-        value={localDate}
-        {disabled}
-        {endDate}
-        {format}
-        {inputId}
-        inputClasses={`date-time ${inputClasses}`}
-        {mode}
-        {pickerOnly}
-        placeholder={placeholder !== undefined ? interpolate($_, placeholder) : ""}
-        {required}
-        {startDate}
-        onDateChange={({ dateValue }) => {
-            if (futureOnly && dateValue instanceof Date && dateValue < new Date()) {
-                dateIsValid = false;
-            } else {
-                dateIsValid = true;
-            }
-            dateValue instanceof Date ? onchange?.(BigInt(dateValue.getTime())) : onchange?.(null);
-        }} />
-    {#if !dateIsValid}
-        <div class="error-icon">
-            <Tooltip position={"top"} align={"middle"}>
-                <div class="param" class:required>
-                    <Information width="1.25rem" height="1.25rem" />
-                </div>
-                {#snippet popupTemplate()}
-                    <Translatable resourceKey={i18nKey("mustBeFutureDateError")} />
-                {/snippet}
-            </Tooltip>
-        </div>
-    {/if}
-</div>
-
-<style lang="scss">
-    .input-wrapper {
-        position: relative;
-        margin-bottom: $sp3;
-
-        @include mobile() {
-            margin-bottom: $sp3;
-        }
-
-        :global(.sdt-component-wrap),
-        :global(.sdt-input-wrap) {
-            width: 100%;
-        }
-
-        :global(.sdt-tick) {
-            background-color: transparent;
-        }
-
-        :global(input[name="date_input"]) {
-            @include input();
-            width: 100%;
-
-            &::placeholder {
-                color: var(--placeholder);
-            }
-        }
-
-        &.error {
-            :global(input[name="date_input"]) {
-                box-shadow: 0 0 0 1px var(--error);
-            }
-        }
-
-        .error-icon {
-            position: absolute;
-            right: $sp3;
-            width: 1.25rem;
-            height: 1.25rem;
-            top: 50%;
-            transform: translateY(-50%);
-
-            :global(svg > path) {
-                fill: var(--error);
-            }
-        }
-    }
-
-    :global(body) {
-        /* general */
-        --sdt-bg-main: var(--bd);
-        --sdt-shadow-color: var(--bg);
-        --sdt-wrap-shadow: 0 1px 6px var(--sdt-shadow-color); /** wrap shadow settings */
-        --sdt-radius: 4px; /** wrap radius */
-        --sdt-color: var(--txt);
-        --sdt-color-selected: var(--txt); /** selected data(e.g date/time) text color */
-        --sdt-header-color: var(--txt); /** header items color (e.g. text & buttons) */
-        --sdt-header-btn-bg-hover: transparent; /** header items hover background color */
-        --sdt-bg-selected: var(--primary);
-
-        /* date picker */
-        --sdt-table-selected-bg: var(--sdt-bg-selected); /** selected date background color */
-        --sdt-table-disabled-date: var(--unread-mute-txt); /** disabled dates text color */
-        --sdt-table-disabled-date-bg: transparent; /** disabled dates background color */
-        --sdt-table-bg: transparent; /** date picker inner table background color */
-        --sdt-table-data-bg-hover: var(
-            --primary
-        ); /** table selection data hover background color */
-        --sdt-table-today-indicator: var(--primary); /** date picker current day marker color */
-
-        /* action buttons */
-        --sdt-today-bg: var(--reaction-me); /** date picker today button hover background color */
-        --sdt-today-color: var(--txt); /** date picker today button text & border color */
-        --sdt-clear-color: var(--txt-light); /** clear button text & border color */
-        --sdt-clear-bg: transparent; /** clear button background color */
-        --sdt-clear-hover-color: var(--txt); /** clear button hover text color */
-        --sdt-clear-hover-bg: transparent; /** clear button hover background color */
-
-        /* time picker */
-        --sdt-clock-selected-bg: var(--sdt-bg-selected); /** selected time background color */
-        --sdt-clock-bg: var(--input-bg); /** time picker inner circle background color */
-        --sdt-clock-color: var(--txt); /** time picker text color (watch "--sdt-color") */
-        --sdt-clock-color-hover: var(
-            --txt
-        ); /** time picker hover text color (watch "--sdt-color") */
-        --sdt-clock-time-bg: transparent; /** time picker time background color */
-        --sdt-clock-time-bg-hover: var(
-            --primary
-        ); /** time picker time selection hover background color */
-        --sdt-clock-disabled: var(--unread-mute); /** disabled time picker time text color */
-        --sdt-clock-disabled-bg: transparent; /** disabled time picker time background color */
-    }
-</style>
diff --git a/frontend/app/src/components/DisplayNameInput.svelte b/frontend/app/src/components/DisplayNameInput.svelte
deleted file mode 100644
index 632fe06398..0000000000
--- a/frontend/app/src/components/DisplayNameInput.svelte
+++ /dev/null
@@ -1,60 +0,0 @@
-<script lang="ts">
-    import type { OpenChat } from "@client";
-    import { onMount } from "svelte";
-    import { i18nKey } from "../i18n/i18n";
-    import Input from "./Input.svelte";
-
-    const MIN_DISPLAY_NAME_LENGTH = 3;
-    const MAX_DISPLAY_NAME_LENGTH = 25;
-
-    interface Props {
-        client: OpenChat;
-        originalDisplayName: string | undefined;
-        displayName: string | undefined;
-        displayNameValid: boolean;
-        disabled: boolean;
-        children?: import("svelte").Snippet;
-    }
-
-    let {
-        client,
-        originalDisplayName,
-        displayName = $bindable(),
-        displayNameValid = $bindable(),
-        disabled,
-        children,
-    }: Props = $props();
-
-    let invalid = $derived(originalDisplayName !== displayName && !displayNameValid);
-
-    onMount(() => {
-        displayName = originalDisplayName;
-        displayNameValid = true;
-    });
-
-    function onChange(val: string | number | bigint) {
-        if (typeof val !== "string") return;
-
-        displayName = val;
-
-        if (displayName.length === 0) {
-            displayName = undefined;
-            displayNameValid = true;
-            return;
-        }
-
-        displayNameValid = client.isDisplayNameValid(displayName);
-    }
-</script>
-
-<Input
-    {onChange}
-    value={originalDisplayName ?? ""}
-    {disabled}
-    {invalid}
-    minlength={MIN_DISPLAY_NAME_LENGTH}
-    maxlength={MAX_DISPLAY_NAME_LENGTH}
-    countdown
-    placeholder={i18nKey("register.enterDisplayName")}>
-    {@render children?.()}
-</Input>
diff --git a/frontend/app/src/components/EditableBanner.svelte b/frontend/app/src/components/EditableBanner.svelte
deleted file mode 100644
index 970e413f57..0000000000
--- a/frontend/app/src/components/EditableBanner.svelte
+++ /dev/null
@@ -1,56 +0,0 @@
-<script lang="ts">
-    import EditableImageWrapper from "./EditableImageWrapper.svelte";
-    import ChooseImage from "./icons/ChooseImage.svelte";
-
-    interface Props {
-        image: string | null | undefined;
-        onImageSelected: (args: { url: string; data: Uint8Array }) => void;
-    }
-
-    let { image = $bindable(), onImageSelected }: Props = $props();
-</script>
-
-<EditableImageWrapper mode={"banner"} {image} {onImageSelected}>
-    {#snippet children(choosePhoto: () => void, _elementWidth: number, elementHeight: number)}
-        <!-- svelte-ignore a11y_click_events_have_key_events -->
-        <!-- svelte-ignore a11y_no_static_element_interactions -->
-        <div
-            class={`photo-section`}
-            onclick={choosePhoto}
-            style={image
-                ? `height: ${elementHeight}px; background-image: url(${image})`
-                : `height: ${elementHeight}px`}>
-            <div class={`photo-icon`}>
-                <ChooseImage size={"3em"} color={image ? "#fff" : "var(--icon-txt)"} />
-            </div>
-        </div>
-    {/snippet}
-</EditableImageWrapper>
-
-<style lang="scss">
-    .photo-section {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        background-color: var(--input-bg);
-        background-size: cover;
-        height: 200px;
-    }
-
-    .overlay {
-        position: absolute;
-    }
-
-    .photo-icon {
-        border-radius: var(--avatar-rd);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        position: relative;
-
-        width: toRem(150);
-        height: toRem(150);
-    }
-</style>
diff --git a/frontend/app/src/components/EditableImageWrapper.svelte b/frontend/app/src/components/EditableImageWrapper.svelte
deleted file mode 100644
index 5b95735236..0000000000
--- a/frontend/app/src/components/EditableImageWrapper.svelte
+++ /dev/null
@@ -1,165 +0,0 @@
-<script lang="ts">
-    import type { Snippet } from "svelte";
-    import type { OnCropCompleteEvent } from "svelte-easy-crop";
-    import Cropper from "svelte-easy-crop";
-    import { i18nKey } from "../i18n/i18n";
-    import Button from "./Button.svelte";
-    import ButtonGroup from "./ButtonGroup.svelte";
-    import ModalContent from "./ModalContent.svelte";
-    import Overlay from "./Overlay.svelte";
-    import Translatable from "./Translatable.svelte";
-
-    type OnChoosePhoto = () => void;
-
-    interface Props {
-        image: string | null | undefined;
-        disabled?: boolean;
-        mode?: Mode;
-        onImageSelected: (args: { url: string; data: Uint8Array }) => void;
-        children: Snippet<[OnChoosePhoto, number, number]>;
-    }
-
-    let {
-        image = $bindable(),
-        disabled = false,
-        mode = "avatar",
-        onImageSelected,
-        children,
-    }: Props = $props();
-
-    type Dimensions = { width: number; height: number };
-    type Mode = "banner" | "avatar" | "profile";
-    type CropShape = "round" | "rect";
-
-    let fileinput: HTMLInputElement;
-    let selectedImage: string | undefined = $state();
-    let originalImage = new Image();
-    let showModal = $state(false);
-    let cropData: OnCropCompleteEvent | undefined = undefined;
-
-    function getSaveDimensions(mode: Mode): Dimensions {
-        switch (mode) {
-            case "avatar":
-                return { width: 150, height: 150 };
-            case "banner":
-                return { width: 600, height: 300 };
-            case "profile":
-                return { width: 600, height: 800 };
-        }
-    }
-
-    export function addPhoto() {
-        if (!disabled) {
-            fileinput.click();
-        }
-    }
-
-    function onFileSelected(e: { currentTarget: HTMLInputElement }) {
-        if (e.currentTarget) {
-            const target = e.currentTarget as HTMLInputElement;
-            if (target.files) {
-                const image = target.files[0];
-                let reader = new FileReader();
-                reader.readAsDataURL(image);
-                reader.onload = (e) => {
-                    selectedImage = e?.target?.result as string;
-                    originalImage.src = selectedImage;
-                    showModal = true;
-                    fileinput.value = "";
-                };
-            }
-        }
-    }
-
-    function cropImage() {
-        if (!cropData || !originalImage) return;
-
-        const {
-            pixels: { x, y, width, height },
-        } = cropData;
-
-        const canvas: HTMLCanvasElement = document.createElement("canvas");
-        canvas.width = SAVE_DIMS.width;
-        canvas.height = SAVE_DIMS.height;
-        canvas
-            .getContext("2d")
-            ?.drawImage(
-                originalImage,
-                x,
-                y,
-                width,
-                height,
-                0,
-                0,
-                SAVE_DIMS.width,
-                SAVE_DIMS.height,
-            );
-
-        canvas.toBlob(async (blob: Blob | null) => {
-            if (blob) {
-                const array = await blob.arrayBuffer();
-                const data = new Uint8Array(array);
-                image = canvas.toDataURL("image/jpg");
-                showModal = false;
-                console.log("image size: ", data.length);
-                onImageSelected({ url: image, data });
-            }
-        }, "image/jpg");
-    }
-
-    function onCrop(ev: OnCropCompleteEvent): void {
-        cropData = ev;
-    }
-    let SAVE_DIMS = $derived(getSaveDimensions(mode));
-    let CROP_SHAPE = $derived(mode === "avatar" ? "round" : ("rect" as CropShape));
-    let elementWidth = $state(0);
-    let elementHeight = $derived(elementWidth / (SAVE_DIMS.width / SAVE_DIMS.height));
-    let aspect = $derived(mode === "avatar" ? 1 : SAVE_DIMS.width / SAVE_DIMS.height);
-</script>
-
-{#if showModal}
-    <Overlay>
-        <ModalContent fill>
-            {#snippet header()}
-                Crop image
-            {/snippet}
-            {#snippet body()}
-                <div class="cropper">
-                    <Cropper
-                        image={selectedImage}
-                        oncropcomplete={onCrop}
-                        crop={{ x: 0, y: 0 }}
-                        {aspect}
-                        cropShape={CROP_SHAPE} />
-                </div>
-            {/snippet}
-            {#snippet footer()}
-                <ButtonGroup>
-                    <Button tiny secondary onClick={() => (showModal = false)}
-                        ><Translatable resourceKey={i18nKey("cancel")} /></Button>
-                    <Button tiny onClick={cropImage}
-                        ><Translatable resourceKey={i18nKey("apply")} /></Button>
-                </ButtonGroup>
-            {/snippet}
-        </ModalContent>
-    </Overlay>
-{/if}
-
-<input
-    hidden
-    type="file"
-    accept=".jpg, .jpeg, .png, .gif, .svg"
-    onchange={onFileSelected}
-    bind:this={fileinput} />
-
-<div class="editable-image" bind:clientWidth={elementWidth}>
-    {@render children(addPhoto, elementWidth, elementHeight)}
-</div>
-
-<style lang="scss">
-    .cropper {
-        position: relative;
-        height: 400px;
-        width: 100%;
-    }
-</style>
diff --git a/frontend/app/src/components/FindUser.svelte b/frontend/app/src/components/FindUser.svelte
deleted file mode 100644
index 2829031f98..0000000000
--- a/frontend/app/src/components/FindUser.svelte
+++ /dev/null
@@ -1,177 +0,0 @@
-<script lang="ts">
-    import { iconSize, type UserSummary } from "@client";
-    import { onMount } from "svelte";
-    import { _ } from "svelte-i18n";
-    import Close from "svelte-material-icons/Close.svelte";
-    import Magnify from "svelte-material-icons/Magnify.svelte";
-    import { translatable } from "../actions/translatable";
-    import { i18nKey } from "../i18n/i18n";
-    import { toastStore } from "../stores/toast";
-    import { Debouncer } from "../utils/debouncer";
-    import { trimLeadingAtSymbol } from "../utils/user";
-    import Loading from "@shared_components/Loading.svelte";
-    import MatchingUser from "./MatchingUser.svelte";
-    import Translatable from "./Translatable.svelte";
-
-    interface Props {
-        mode: "add" | "edit";
-        enabled?: boolean;
-        userLookup: (searchTerm: string) => Promise<[UserSummary[], UserSummary[]]>;
-        placeholderKey?: string;
-        compact?: boolean;
-        autofocus?: boolean;
-        onSelectUser?: (user: UserSummary) => void;
-    }
-
-    let {
-        mode,
-        enabled = true,
-        userLookup,
-        placeholderKey = "searchForUsername",
-        compact = false,
-        autofocus = true,
-        onSelectUser,
-    }: Props = $props();
-
-    let inp: HTMLInputElement | undefined;
-    let searchTerm: string = $state("");
-    let communityMembers: UserSummary[] = $state([]);
-    let users: UserSummary[] = $state([]);
-    let searching: boolean = $state(false);
-    let hovering = $state(false);
-    const debouncer = new Debouncer(searchUsers, 350);
-
-    onMount(() => {
-        // this focus seems to cause a problem with the animation of the right panel without
-        // this setTimeout. Pretty horrible and who knows if 300 ms will be enough on other machines?
-        if (autofocus) {
-            window.setTimeout(() => inp?.focus(), 300);
-        }
-    });
-
-    /**
-     * This is used both for starting a new direct chat and also for adding a member to a group chat
-     */
-
-    function onSelect(user: UserSummary) {
-        onSelectUser?.(user);
-        searchTerm = "";
-        users = [];
-        inp?.focus();
-    }
-
-    function searchUsers(value: string) {
-        if (value === "") {
-            users = [];
-            return;
-        }
-        searching = true;
-        userLookup(value)
-            .then((p) => {
-                communityMembers = p[0];
-                users = p[1];
-            })
-            .catch((_err) => toastStore.showFailureToast(i18nKey("userSearchFailed")))
-            .finally(() => (searching = false));
-    }
-
-    function onInput() {
-        if (inp) {
-            debouncer.execute(trimLeadingAtSymbol(inp.value));
-        }
-    }
-
-    function clearFilter() {
-        users = [];
-        searchTerm = "";
-    }
-</script>
-
-<div class="search-form" class:add={mode === "add"} class:edit={mode === "edit"}>
-    <span class="icon"><Magnify size={$iconSize} color={"#ccc"} viewBox="-5 -3 24 24" /></span>
-    <input
-        bind:this={inp}
-        bind:value={searchTerm}
-        disabled={!enabled}
-        type="text"
-        oninput={onInput}
-        use:translatable={{ key: i18nKey(placeholderKey) }}
-        placeholder={$_(placeholderKey)} />
-    {#if searching}
-        <span class="loading"></span>
-    {:else if searchTerm !== ""}
-        <span onclick={clearFilter} class="icon close"><Close color={"#ccc"} /></span>
-    {/if}
-</div>
-<div class="results">
-    {#if searching}
-        <Loading />
-    {:else}
-        {#if communityMembers?.length > 0}
-            <div class="sub-heading">
-                <Translatable resourceKey={i18nKey("communityMembers")} />
-            </div>
-            {#each communityMembers as user (user.userId)}
-                <MatchingUser {searchTerm} {user} bind:hovering {onSelect} />
-            {/each}
-        {/if}
-        {#if communityMembers?.length > 0 && users?.length > 0}
-            <div class="sub-heading"><Translatable resourceKey={i18nKey("otherUsers")} /></div>
-        {/if}
-        {#each users as user (user.userId)}
-            <MatchingUser {compact} {searchTerm} {user} bind:hovering {onSelect} />
-        {/each}
-    {/if}
-</div>
-
-<style lang="scss">
-    .search-form {
-        margin: 0 $sp4 $sp4 $sp4;
-        background-color: var(--chatSearch-bg);
-        display: flex;
-        align-items: center;
-        position: relative;
-        padding: $sp2 $sp4;
-        border-radius: var(--rd);
-
-        &.add {
-            margin: 0;
-        }
-
-        // &.edit {
-        //     margin: 0 0 $sp3 0;
-        // }
-
-        @include mobile() {
-            margin: 0 $sp3;
-            margin-bottom: $sp3;
-        }
-    }
-    .icon {
-        flex: 0 0 25px;
-    }
-    .close {
-        cursor: pointer;
-    }
-    input {
-        background-color: transparent;
-        color: var(--txt);
-        outline: none;
-        flex: 1;
-        padding: $sp3;
-        margin: 0;
-        border: none;
-        width: 100%;
-        @include font(book, normal, fs-100);
-
-        &::placeholder {
-            color: var(--placeholder);
-        }
-    }
-
-    .results {
-        position: relative;
-        overflow: auto;
-        flex: 1;
-    }
-</style>
diff --git a/frontend/app/src/components/GlobalAlert.svelte b/frontend/app/src/components/GlobalAlert.svelte
deleted file mode 100644
index d4fe4617ba..0000000000
--- a/frontend/app/src/components/GlobalAlert.svelte
+++ /dev/null
@@ -1,59 +0,0 @@
-<script lang="ts">
-    import AlertOutline from "svelte-material-icons/AlertOutline.svelte";
-    import Overlay from "./Overlay.svelte";
-    import ModalContent from "./ModalContent.svelte";
-    import ButtonGroup from "./ButtonGroup.svelte";
-    import Button from "./Button.svelte";
-    import Translatable from "./Translatable.svelte";
-    import { i18nKey } from "../i18n/i18n";
-    import Link from "./Link.svelte";
-    import { navigate } from "@utils/navigation";
-
-    let show = $state(true);
-
-    function close() {
-        show = false;
-    }
-
-    function showMessage() {
-        close();
-        navigate(
-            "/community/dgegb-daaaa-aaaar-arlhq-cai/channel/12148470416168947889486180374669069959/136",
-        );
-    }
-</script>
-
-{#if show}
-    <Overlay dismissible={false}>
-        <ModalContent>
-            {#snippet header()}
-                <span class="header">
-                    <AlertOutline size={"1.5em"} color={"currentColor"} />
-                    <span>Service update</span>
-                </span>
-            {/snippet}
-            {#snippet body()}
-                <span>
-                    We are experiencing ongoing issues at the moment as described
-                    <Link underline={"hover"} onClick={showMessage}>here</Link>. We are working hard
-                    to resolve them as soon as possible but you may experience some disruption in
-                    the meantime.
-                </span>
-            {/snippet}
-            {#snippet footer()}
-                <ButtonGroup>
-                    <Button small onClick={close}>
-                        <Translatable resourceKey={i18nKey("close")} />
-                    </Button>
-                </ButtonGroup>
-            {/snippet}
-        </ModalContent>
-    </Overlay>
-{/if}
-
-<style lang="scss">
-    .header {
-        display: flex;
-        gap: $sp4;
-    }
-</style>
diff --git a/frontend/app/src/components/Head.svelte b/frontend/app/src/components/Head.svelte
deleted file mode 100644
index 3b84cd9b4e..0000000000
--- a/frontend/app/src/components/Head.svelte
+++ /dev/null
@@ -1,108 +0,0 @@
-<script lang="ts">
-    import {
-        type ChatListScope,
-        type ChatSummary,
-        type CombinedUnreadCounts,
-        type CommunitySummary,
-        type OpenChat,
-        type UserLookup,
-        allUsersStore,
-        chatListScopeStore,
-        globalUnreadCountStore,
-        locationStore,
-        routeForChatIdentifier,
-        selectedChatSummaryStore,
-        selectedCommunitySummaryStore,
-    } from "@client";
-    import { getContext, onMount } from "svelte";
-    import { mobileOperatingSystem } from "../utils/devices";
-
-    const client = getContext<OpenChat>("client");
-
-    let viewPortContent = $state("width=device-width, initial-scale=1");
-
-    type Details = {
-        title: string;
-        icon: string;
-        description: string;
-        canonicalUrl: URL;
-    };
-
-    function getDetails(
-        scope: ChatListScope,
-        location: string,
-        users: UserLookup,
-        unread: CombinedUnreadCounts,
-        chat: ChatSummary | undefined,
-        community: CommunitySummary | undefined,
-    ): Details {
-        let canonicalUrl = new URL("/", window.location.origin);
-        let title = "OpenChat";
-        let description =
-            "OpenChat is a fully featured chat application running end-to-end on the Internet Computer blockchain.";
-
-        if (location === "/communities") {
-            canonicalUrl = new URL("/communities", window.location.origin);
-        }
-
-        if (community !== undefined) {
-            title = `${title} - ${community.name}`;
-            description = community.description;
-            canonicalUrl = new URL(
-                `/community/${community.id.communityId}`,
-                window.location.origin,
-            );
-        }
-        if (chat !== undefined) {
-            if (chat.kind === "direct_chat") {
-                title = `${title} - 
-                    ${
-                        users.get(chat.them.userId)?.displayName ??
-                        users.get(chat.them.userId)?.username ??
-                        "Direct chat"
-                    }`;
-            } else {
-                title = `${title} - ${chat.name}`;
-                description = chat.description;
-                canonicalUrl = new URL(
-                    routeForChatIdentifier(scope.kind, chat.id),
-                    window.location.origin,
-                );
-            }
-        }
-        const merged = client.mergeCombinedUnreadCounts(unread);
-        return {
-            title: merged.unmuted > 0 ? `(${merged.unmuted}) ${title}` : title,
-            description,
-            icon: merged.unmuted > 0 ? "/icon-unread.png" : "/icon.png",
-            canonicalUrl,
-        };
-    }
-
-    onMount(() => {
-        if (mobileOperatingSystem === "iOS") {
-            viewPortContent += ", maximum-scale=1";
-        }
-    });
-
-    let details = $derived(
-        getDetails(
-            $chatListScopeStore,
-            $locationStore,
-            $allUsersStore,
-            $globalUnreadCountStore,
-            $selectedChatSummaryStore,
-            $selectedCommunitySummaryStore,
-        ),
-    );
-</script>
-
-<svelte:head>
-    <title>{details.title}</title>
-    <meta name="viewport" content={viewPortContent} />
-    <link rel="icon" type="image/png" href={details.icon} />
-    <link rel="canonical" href={details.canonicalUrl.toString()} />
-    <meta name="description" content={details.description} />
-    <meta property="og:title" content={details.title} />
-    <meta property="og:description" content={details.description} />
-</svelte:head>
diff --git a/frontend/app/src/components/Hex.svelte b/frontend/app/src/components/Hex.svelte
deleted file mode 100644
index 277a588a6d..0000000000
--- a/frontend/app/src/components/Hex.svelte
+++ /dev/null
@@ -1,63 +0,0 @@
-<svg
-    preserveAspectRatio="none"
-    class="hex"
-    viewBox="0 0 1800 1000"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:bx="https://boxy-svg.com">
-    <path d="m100 900 100 50v100l-100 50-100-50V950Z" transform="rotate(-45 274.543 562.458)" />
-    <path d="m100 900 100 50v100l-100 50-100-50V950Z" transform="rotate(-45 405.959 369.63)" />
-    <path d="m100 900 100 50v100l-100 50-100-50V950Z" transform="rotate(-45 173.465 320.655)" />
-    <path d="m100 900 100 50v100l-100 50-100-50V950Z" transform="rotate(-45 308.097 123.569)" />
-    <path d="m100 900 100 50v100l-100 50-100-50V950Z" transform="rotate(-45 541.336 175.05)" />
-    <path d="m100 900 100 50v100l-100 50-100-50V950Z" transform="rotate(-45 -58.373 268.253)" />
-    <path d="m100 900 100 50v100l-100 50-100-50V950Z" transform="rotate(-45 73.043 75.425)" />
-    <path d="m100 900 100 50v100l-100 50-100-50V950Z" transform="rotate(-45 -159.451 26.45)" />
-    <path d="m100 900 100 50v100l-100 50-100-50V950Z" transform="rotate(-45 -24.819 -170.636)" />
-    <path d="m100 900 100 50v100l-100 50-100-50V950Z" transform="rotate(-45 208.42 -119.154)" />
-    <path d="m100 900 100 50v100l-100 50-100-50V950Z" transform="rotate(-45 443.696 -71.865)" />
-    <path d="m100 900 100 50v100l-100 50-100-50V950Z" transform="rotate(-45 575.112 -264.693)" />
-    <path d="m100 900 100 50v100l-100 50-100-50V950Z" transform="rotate(-45 342.617 -313.667)" />
-    <path d="m100 900 100 50v100l-100 50-100-50V950Z" transform="rotate(-45 477.25 -510.754)" />
-    <path d="m100 900 100 50v100l-100 50-100-50V950Z" transform="rotate(-45 710.488 -459.272)" />
-    <path d="m100 900 100 50v100l-100 50-100-50V950Z" transform="rotate(-45 841.854 -658.71)" />
-    <path d="m100 900 100 50v100l-100 50-100-50V950Z" transform="rotate(-45 973.27 -851.54)" />
-    <path d="m100 900 100 50v100l-100 50-100-50V950Z" transform="rotate(-45 740.775 -900.514)" />
-    <path d="m100 900 100 50v100l-100 50-100-50V950Z" transform="rotate(-45 875.408 -1097.6)" />
-    <path d="m100 900 100 50v100l-100 50-100-50V950Z" transform="rotate(-45 1108.646 -1046.118)" />
-    <path d="m100 900 100 50v100l-100 50-100-50V950Z" transform="rotate(-45 110.488 -365.36)" />
-    <path d="m100 900 100 50v100l-100 50-100-50V950Z" transform="rotate(-45 241.904 -558.189)" />
-    <path d="m100 900 100 50v100l-100 50-100-50V950Z" transform="rotate(-45 9.41 -607.163)" />
-    <path d="m100 900 100 50v100l-100 50-100-50V950Z" transform="rotate(-45 144.042 -804.25)" />
-    <path d="m100 900 100 50v100l-100 50-100-50V950Z" transform="rotate(-45 377.28 -752.768)" />
-    <path d="m100 900 100 50v100l-100 50-100-50V950Z" transform="rotate(-45 609.275 -704.163)" />
-    <path d="m100 900 100 50v100l-100 50-100-50V950Z" transform="rotate(-45 509.021 -949.798)" />
-    <path d="m100 900 100 50v100l-100 50-100-50V950Z" transform="rotate(-45 40.466 516.327)" />
-    <path d="m100 900 100 50v100l-100 50-100-50V950Z" transform="rotate(-45 141.343 762.056)" />
-</svg>
-
-<style lang="scss">
-    .hex {
-        position: absolute;
-        bottom: 0;
-        left: 30%;
-        z-index: -1;
-
-        path {
-            stroke: rgba(255, 255, 255, 0.01);
-            fill: rgba(255, 255, 255, 0.01);
-        }
-    }
-
-    @for $i from 1 through 29 {
-        .hex path:nth-child(#{$i}) {
-            animation: ripple 3s ($i * 0.2s) ease-in-out 5 alternate;
-        }
-    }
-
-    @keyframes ripple {
-        100% {
-            stroke: rgba(255, 255, 255, 0.2);
-            fill: rgba(255, 255, 255, 0.1);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/MatchingUser.svelte b/frontend/app/src/components/MatchingUser.svelte
deleted file mode 100644
index 3f88a4c223..0000000000
--- a/frontend/app/src/components/MatchingUser.svelte
+++ /dev/null
@@ -1,110 +0,0 @@
-<script lang="ts">
-    import type { OpenChat, UserSummary } from "@client";
-    import { AvatarSize, currentUserIdStore } from "@client";
-    import { getContext } from "svelte";
-    import Avatar from "./Avatar.svelte";
-    import FilteredUsername from "@shared_components/FilteredUsername.svelte";
-    import Badges from "./home/profile/Badges.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        searchTerm: string;
-        user: UserSummary;
-        hovering?: boolean;
-        compact?: boolean;
-        onSelect: (user: UserSummary) => void;
-    }
-
-    let {
-        searchTerm,
-        user,
-        hovering = $bindable(false),
-        compact = false,
-        onSelect,
-    }: Props = $props();
-</script>
-
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-    class="user"
-    class:compact
-    onclick={() => onSelect(user)}
-    onmouseenter={() => (hovering = true)}
-    onmouseleave={() => (hovering = false)}>
-    <span class="avatar">
-        <Avatar
-            statusBorder={hovering ? "var(--members-hv)" : "transparent"}
-            showStatus
-            userId={user.userId}
-            url={client.userAvatarUrl(user)}
-            size={AvatarSize.Default} />
-    </span>
-    <div class="details">
-        <h4>
-            <FilteredUsername
-                {searchTerm}
-                me={user.userId === $currentUserIdStore}
-                username={user.displayName ?? user.username} />
-            <Badges
-                uniquePerson={user.isUniquePerson}
-                diamondStatus={user.diamondStatus}
-                streak={user.streak} />
-        </h4>
-        <div class="username">
-            <FilteredUsername {searchTerm} username={"@" + user.username} />
-        </div>
-    </div>
-</div>
-
-<style lang="scss">
-    .user {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        color: var(--txt);
-        padding: $sp4;
-        margin: 0 0 $sp3 0;
-        transition:
-            background-color ease-in-out 100ms,
-            border-color ease-in-out 100ms;
-        cursor: pointer;
-        gap: 12px;
-
-        @include mobile() {
-            padding: $sp3 toRem(10);
-        }
-
-        &.compact {
-            margin: 0;
-            padding: $sp3;
-        }
-
-        @media (hover: hover) {
-            &:hover {
-                background-color: var(--members-hv);
-            }
-        }
-    }
-    .avatar {
-        flex: 0 0 50px;
-    }
-    .details {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        padding: 0 5px;
-
-        .username {
-            font-weight: 200;
-            color: var(--txt-light);
-        }
-
-        h4 {
-            display: flex;
-            gap: $sp2;
-            align-items: center;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/NotFound.svelte b/frontend/app/src/components/NotFound.svelte
deleted file mode 100644
index c59c56320c..0000000000
--- a/frontend/app/src/components/NotFound.svelte
+++ /dev/null
@@ -1,61 +0,0 @@
-<script module lang="ts">
-    export type NotFoundType = Component;
-</script>
-
-<script lang="ts">
-    import { mobileWidth } from "@client";
-    import type { Component } from "svelte";
-    import { i18nKey } from "../i18n/i18n";
-    import Button from "./Button.svelte";
-    import ButtonGroup from "./ButtonGroup.svelte";
-    import ModalContent from "./ModalContent.svelte";
-    import Translatable from "./Translatable.svelte";
-
-    interface Props {
-        onClose?: () => void;
-    }
-    let { onClose }: Props = $props();
-</script>
-
-<ModalContent backgroundImage={"/assets/landscape.png"} {onClose}>
-    {#snippet body()}
-        <div class="body">
-            <h1 class="msg">page not found</h1>
-            <div class="not-found"></div>
-        </div>
-    {/snippet}
-    {#snippet footer()}
-        <div>
-            <ButtonGroup align={$mobileWidth ? "fill" : "center"}>
-                <Button onClick={onClose}>
-                    <Translatable resourceKey={i18nKey("goHome")} />
-                </Button>
-            </ButtonGroup>
-        </div>
-    {/snippet}
-</ModalContent>
-
-<style lang="scss">
-    .body {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: $sp5;
-    }
-    .msg {
-        @include font(bold, normal, fs-200);
-        text-shadow: 2px 2px #000;
-        text-transform: uppercase;
-    }
-
-    .not-found {
-        background-image: url("/assets/not_found.svg");
-        width: 250px;
-        height: 250px;
-
-        @include mobile() {
-            width: 150px;
-            height: 150px;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/NumberInput.svelte b/frontend/app/src/components/NumberInput.svelte
deleted file mode 100644
index 4ee6f57b4f..0000000000
--- a/frontend/app/src/components/NumberInput.svelte
+++ /dev/null
@@ -1,132 +0,0 @@
-<script lang="ts">
-    import type { ResourceKey } from "@client";
-    import { onMount } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { interpolate } from "../i18n/i18n";
-
-    interface Props {
-        disabled?: boolean;
-        autofocus?: boolean;
-        placeholder?: ResourceKey | undefined;
-        min?: number;
-        max?: number;
-        defaultValue?: any;
-        value?: number | null;
-        align?: "left" | "right" | "center";
-        shouldClamp?: boolean;
-        onChange?: () => void;
-        onEnter?: () => void;
-    }
-
-    let {
-        disabled = false,
-        autofocus = false,
-        placeholder = undefined,
-        min = 0,
-        max = Number.MAX_VALUE,
-        defaultValue = Math.round(max - min / 2),
-        value = $bindable(min),
-        align = "left",
-        shouldClamp = true,
-        onChange,
-        onEnter,
-    }: Props = $props();
-
-    let inp: HTMLInputElement | undefined = $state();
-
-    onMount(() => {
-        if (autofocus) {
-            inp?.focus();
-        }
-    });
-
-    function clamp(val: number): number {
-        if (isNaN(val)) return defaultValue;
-        if (val > max) return max;
-        if (val < min) return min;
-        return val;
-    }
-
-    function handleInput(e: { currentTarget: { value: string } }) {
-        if (inp) {
-            if (shouldClamp) {
-                value = clamp(parseInt(e.currentTarget.value, 10));
-                if (value != null) {
-                    inp.value = value.toString();
-                }
-            }
-            onChange?.();
-        }
-    }
-
-    function keyDown(e: KeyboardEvent) {
-        if (e.key === "Enter") {
-            onEnter?.();
-        }
-    }
-</script>
-
-<div class="input-wrapper">
-    <input
-        data-gram="false"
-        data-gramm_editor="false"
-        data-enable-grammarly="false"
-        spellcheck="false"
-        {disabled}
-        type="number"
-        {min}
-        {max}
-        placeholder={placeholder !== undefined ? interpolate($_, placeholder) : ""}
-        onkeydown={keyDown}
-        oninput={handleInput}
-        bind:this={inp}
-        bind:value
-        class={`textbox ${align}`} />
-</div>
-
-<style lang="scss">
-    .input-wrapper {
-        position: relative;
-        margin-bottom: $sp3;
-
-        @include mobile() {
-            margin-bottom: $sp3;
-        }
-    }
-
-    input[type="number"] {
-        -moz-appearance: textfield;
-        appearance: textfield;
-        margin: 0;
-    }
-
-    input[type="number"]::-webkit-inner-spin-button,
-    input[type="number"]::-webkit-outer-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
-    }
-
-    .textbox {
-        transition: border ease-in-out 300ms;
-        display: block;
-        width: 100%;
-
-        @include input();
-
-        &.left {
-            text-align: left;
-        }
-
-        &.right {
-            text-align: right;
-        }
-
-        &.center {
-            text-align: center;
-        }
-
-        &::placeholder {
-            color: var(--placeholder);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/OfflineFooter.svelte b/frontend/app/src/components/OfflineFooter.svelte
deleted file mode 100644
index 0424fe1b9a..0000000000
--- a/frontend/app/src/components/OfflineFooter.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<script lang="ts">
-    import { fade } from "svelte/transition";
-    import CloudOffOutline from "svelte-material-icons/CloudOffOutline.svelte";
-    import Translatable from "./Translatable.svelte";
-    import { i18nKey } from "../i18n/i18n";
-</script>
-
-<div transition:fade={{ duration: 250 }} role="button" tabindex="0" class="offline">
-    <div class="icon">
-        <CloudOffOutline size={"1.5em"} color={"currentColor"} />
-    </div>
-    <Translatable resourceKey={i18nKey("offlineMessage")} />
-</div>
-
-<style lang="scss">
-    .offline {
-        position: absolute;
-        height: toRem(40);
-        width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: $sp4;
-        bottom: 0;
-        cursor: pointer;
-        @include z-index("anon-banner");
-        background-color: var(--notificationBar-bg);
-        color: var(--notificationBar-txt);
-        padding: $sp4 $sp3;
-        text-transform: uppercase;
-
-        .icon {
-            flex: 0 0 toRem(24);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/PremiumItem.svelte b/frontend/app/src/components/PremiumItem.svelte
deleted file mode 100644
index ba224cb629..0000000000
--- a/frontend/app/src/components/PremiumItem.svelte
+++ /dev/null
@@ -1,75 +0,0 @@
-<script lang="ts">
-    import { i18nKey } from "@src/i18n/i18n";
-    import { PremiumItem, premiumItemsStore, premiumPrices } from "@client";
-    import { type Snippet } from "svelte";
-    import Lock from "svelte-material-icons/Lock.svelte";
-    import PremiumItemPayment from "./PremiumItemPayment.svelte";
-    import Translatable from "./Translatable.svelte";
-    import Tooltip from "./tooltip/Tooltip.svelte";
-
-    type OnClick = () => void;
-
-    interface Props {
-        onClick: OnClick;
-        children: Snippet<[OnClick]>;
-        item: PremiumItem;
-    }
-
-    let { onClick, children, item }: Props = $props();
-    let showPayGate = $state(false);
-    let hasFeature = $derived($premiumItemsStore.has(item));
-
-    let wrappedClick = $derived.by(() => {
-        return () => {
-            if (hasFeature) {
-                showPayGate = false;
-                return onClick();
-            } else {
-                showPayGate = true;
-            }
-        };
-    });
-</script>
-
-{#if showPayGate}
-    <PremiumItemPayment {item} onSuccess={wrappedClick} onCancel={() => (showPayGate = false)} />
-{/if}
-
-<Tooltip enable={!hasFeature} position="top" align="middle">
-    <div class="premium" class:locked={!hasFeature}>
-        {@render children(wrappedClick)}
-
-        {#if !hasFeature}
-            <div class="locked">
-                <Lock size={"1.3em"} color={"var(--accent)"} />
-            </div>
-        {/if}
-    </div>
-    {#snippet popupTemplate()}
-        <Translatable
-            resourceKey={i18nKey("premiumItem.priceTooltip", {
-                price: premiumPrices[item].toLocaleString(),
-            })}></Translatable>
-    {/snippet}
-</Tooltip>
-
-<style lang="scss">
-    .premium {
-        position: relative;
-        display: flex;
-        justify-content: flex-start;
-        align-items: flex-start;
-
-        .locked {
-            transition: opacity 200ms ease-in-out;
-            position: absolute;
-            pointer-events: none;
-        }
-
-        &:hover {
-            .locked {
-                opacity: 0.8;
-            }
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/Progress.svelte b/frontend/app/src/components/Progress.svelte
deleted file mode 100644
index 2be0f16bba..0000000000
--- a/frontend/app/src/components/Progress.svelte
+++ /dev/null
@@ -1,63 +0,0 @@
-<script lang="ts">
-    import type { Snippet } from "svelte";
-    import { rtlStore } from "../stores/rtl";
-
-    interface Props {
-        percent: number;
-        bg?: "button" | "accent";
-        size?: string;
-        children?: Snippet;
-    }
-
-    let { percent, bg = "button", size = "40px", children }: Props = $props();
-</script>
-
-<div class="bar" style={`--size: ${size}`}>
-    <span
-        class="meter"
-        class:rtl={$rtlStore}
-        style={`width: ${percent}%; background-color: ${
-            bg === "button" ? "var(--primary)" : "var(--progress-fill)"
-        }`}></span>
-    <div class="label">
-        {@render children?.()}
-    </div>
-</div>
-
-<style lang="scss">
-    $radius: calc(var(--size) / 2);
-
-    .bar {
-        border: 1px solid var(--progress-bd);
-        width: 100%;
-        height: var(--size);
-        position: relative;
-        border-radius: $radius;
-        overflow: hidden;
-    }
-
-    .meter {
-        width: 0;
-        transition: width 300ms;
-        display: block;
-        height: 100%;
-
-        position: absolute;
-        left: 0;
-        top: 0;
-
-        &.rtl {
-            left: unset;
-            right: 0;
-        }
-    }
-
-    .label {
-        display: flex;
-        align-items: center;
-        height: 100%;
-        padding: 0 $sp4;
-        position: relative;
-        @include ellipsis();
-    }
-</style>
diff --git a/frontend/app/src/components/ProgressStep.svelte b/frontend/app/src/components/ProgressStep.svelte
deleted file mode 100644
index 0fcfb29d52..0000000000
--- a/frontend/app/src/components/ProgressStep.svelte
+++ /dev/null
@@ -1,93 +0,0 @@
-<script lang="ts">
-    import Spinner from "./icons/Spinner.svelte";
-    import { _ } from "svelte-i18n";
-    import DoneIcon from "svelte-material-icons/CheckCircle.svelte";
-    import FailedIcon from "svelte-material-icons/CloseCircle.svelte";
-    import { currentTheme } from "../theme/themes";
-    import { interpolate } from "../i18n/i18n";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import type { ResourceKey } from "@client";
-
-    interface Props {
-        label: ResourceKey;
-        status: string;
-        step?: number;
-    }
-
-    let { label, status, step = 0 }: Props = $props();
-</script>
-
-<div class={`step ${status}`}>
-    {#if status === "doing"}
-        <div class="spinner">
-            <Spinner
-                size="25px"
-                foregroundColour={$currentTheme.toast.success.bg}
-                backgroundColour={"rgba(255,255,255,0.5)"}></Spinner>
-            <div class="number">{step + 1}</div>
-        </div>
-    {:else if status === "overall-done"}
-        <div class="icon">
-            <DoneIcon size="30px" viewBox="2 2 24 24" color={$currentTheme.toast.success.bg} />
-        </div>
-    {:else if status === "overall-failed"}
-        <div class="icon">
-            <FailedIcon size="30px" viewBox="2 2 24 24" color={$currentTheme.error} />
-        </div>
-    {:else}
-        <div class={`index ${status}`}>
-            {step + 1}
-        </div>
-    {/if}
-    <div class={`label ${status}`}>
-        <Markdown text={interpolate($_, label)} />
-    </div>
-</div>
-
-<style lang="scss">
-    .step {
-        display: flex;
-        gap: $sp3;
-        align-items: center;
-        margin-bottom: $sp4;
-        &.todo {
-            color: var(--txt-light);
-            @include font(book, normal, fs-80);
-        }
-        .index {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            @include font(book, normal, fs-80);
-            border: 3px solid red;
-            width: 25px;
-            height: 25px;
-            border-radius: 50%;
-            &.todo {
-                border-color: var(--txt-light);
-            }
-            &.done {
-                border-color: var(--toast-success-bg);
-            }
-            &.failed {
-                border-color: var(--error);
-            }
-        }
-    }
-    .spinner {
-        position: relative;
-        height: 25px;
-        .number {
-            @include font(book, normal, fs-80);
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-        }
-    }
-
-    .icon {
-        width: 25px;
-        height: 25px;
-    }
-</style>
diff --git a/frontend/app/src/components/ProgressSteps.svelte b/frontend/app/src/components/ProgressSteps.svelte
deleted file mode 100644
index 84aed6937a..0000000000
--- a/frontend/app/src/components/ProgressSteps.svelte
+++ /dev/null
@@ -1,58 +0,0 @@
-<script module lang="ts">
-    export type Status = "done" | "doing" | "todo" | "failed";
-    export type OverallStatus = "done" | "failed";
-
-    export type Step = {
-        status: Status;
-        label: string;
-    };
-
-    export type Result =
-        | {
-              status: OverallStatus;
-              label: string;
-          }
-        | undefined;
-</script>
-
-<script lang="ts">
-    import { fade } from "svelte/transition";
-    import { flip } from "svelte/animate";
-    import Progress from "./Progress.svelte";
-    import ProgressStep from "./ProgressStep.svelte";
-    import type { InterpolationValues } from "@client";
-    import { i18nKey } from "../i18n/i18n";
-
-    interface Props {
-        steps: Step[];
-        result: Result;
-        labelValues?: InterpolationValues | undefined;
-        percent?: number | undefined;
-    }
-
-    let { steps, result, labelValues = undefined, percent = undefined }: Props = $props();
-</script>
-
-<div>
-    {#each steps as step, i ("step" + i)}
-        <div in:fade={{ duration: 500 }} animate:flip={{ duration: 500 }}>
-            <ProgressStep
-                label={i18nKey(steps[i].label, labelValues)}
-                step={i}
-                status={step.status} />
-        </div>
-    {/each}
-    {#if result !== undefined}
-        <div>
-            <ProgressStep
-                label={i18nKey(result.label, labelValues)}
-                status={"overall-" + result.status} />
-        </div>
-    {/if}
-</div>
-
-{#if result === undefined && percent !== undefined}
-    <div class="progress">
-        <Progress size={"30px"} {percent} />
-    </div>
-{/if}
diff --git a/frontend/app/src/components/RotationChallenge.svelte b/frontend/app/src/components/RotationChallenge.svelte
deleted file mode 100644
index 84f0cf1c19..0000000000
--- a/frontend/app/src/components/RotationChallenge.svelte
+++ /dev/null
@@ -1,195 +0,0 @@
-<script lang="ts">
-    import { i18nKey } from "@src/i18n/i18n";
-    import { mobileWidth } from "@client";
-    import { onMount } from "svelte";
-    import Button from "./Button.svelte";
-    import ButtonGroup from "./ButtonGroup.svelte";
-    import ModalContent from "./ModalContent.svelte";
-    import Overlay from "./Overlay.svelte";
-    import Translatable from "./Translatable.svelte";
-
-    const TOLERANCE = 0.1; // tolerance in radians
-
-    interface Props {
-        onClose: () => void;
-        onResult: (e: MouseEvent, success: boolean) => void;
-        imagePath?: string;
-    }
-
-    let { onClose, onResult, imagePath = "/assets/robot.svg" }: Props = $props();
-
-    let leftImage: HTMLImageElement;
-    const targetRotation = normaliseAngle(Math.random() * 2 * Math.PI);
-    const rightImageTransform = `rotate(${targetRotation}rad)`;
-    let userRotation: number = $state(0);
-    let leftImageTransform = $derived(`rotate(${userRotation}rad)`);
-    let isDragging = $state(false);
-    let startAngle = $state(0);
-    let diff = $derived(angleDiff(userRotation, targetRotation));
-    let correct = $derived(diff < TOLERANCE);
-
-    function angleDiff(a: number, b: number): number {
-        const diff = Math.abs(a - b) % (2 * Math.PI);
-        return diff > Math.PI ? 2 * Math.PI - diff : diff;
-    }
-
-    onMount(() => {
-        userRotation = normaliseAngle(Math.random() * 2 * Math.PI);
-        document.addEventListener("mouseup", mouseUp);
-        document.addEventListener("touchend", mouseUp);
-        document.addEventListener("mousemove", onMouseMove);
-        document.addEventListener("touchmove", onMouseMove);
-
-        return () => {
-            document.removeEventListener("mouseup", mouseUp);
-            document.removeEventListener("touchend", mouseUp);
-            document.removeEventListener("mousemove", onMouseMove);
-            document.removeEventListener("touchmove", onMouseMove);
-        };
-    });
-
-    function mouseUp() {
-        isDragging = false;
-    }
-
-    function checkAnswer(e: MouseEvent) {
-        onResult(e, correct);
-    }
-
-    function getMouseAngle(event: MouseEvent | TouchEvent): number {
-        const rect = leftImage.getBoundingClientRect();
-        const centerX = rect.left + rect.width / 2;
-        const centerY = rect.top + rect.height / 2;
-
-        let mouseX: number, mouseY: number;
-
-        if (event instanceof MouseEvent) {
-            mouseX = event.clientX;
-            mouseY = event.clientY;
-        } else if (event instanceof TouchEvent) {
-            mouseX = event.touches[0].clientX;
-            mouseY = event.touches[0].clientY;
-        } else {
-            return 0; // just in case
-        }
-
-        return Math.atan2(mouseY - centerY, mouseX - centerX);
-    }
-
-    function onMouseMove(e: MouseEvent | TouchEvent) {
-        if (isDragging) {
-            const currentMouseAngle = getMouseAngle(e);
-            const angleDifference = currentMouseAngle - startAngle;
-            userRotation = normaliseAngle(angleDifference);
-        }
-    }
-
-    function onMouseDown(e: MouseEvent | TouchEvent) {
-        isDragging = true;
-        startAngle = normaliseAngle(getMouseAngle(e) - userRotation);
-    }
-
-    function normaliseAngle(angle: number): number {
-        return ((angle % (2 * Math.PI)) + 2 * Math.PI) % (2 * Math.PI);
-    }
-</script>
-
-<Overlay dismissible {onClose}>
-    <ModalContent closeIcon {onClose}>
-        {#snippet header()}
-            <div class="header">
-                <Translatable resourceKey={i18nKey("rotationChallenge.title")}></Translatable>
-            </div>
-        {/snippet}
-        {#snippet body()}
-            <div class="image-container">
-                <div class="left">
-                    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-                    <img
-                        bind:this={leftImage}
-                        class:dragging={isDragging}
-                        style={`transform: ${leftImageTransform}`}
-                        class="image handle"
-                        src={imagePath}
-                        onmousedown={onMouseDown}
-                        ontouchstart={onMouseDown}
-                        ondragstart={(e) => e.preventDefault()}
-                        alt="Left" />
-                </div>
-                <div class="right">
-                    <img
-                        style={`--diff: ${diff}; transform: ${rightImageTransform}`}
-                        class="image"
-                        src={imagePath}
-                        alt="Right" />
-                </div>
-            </div>
-            <div class="info">
-                <Translatable
-                    resourceKey={i18nKey(
-                        $mobileWidth ? "rotationChallenge.infoMobile" : "rotationChallenge.info",
-                    )}></Translatable>
-            </div>
-        {/snippet}
-        {#snippet footer()}
-            <ButtonGroup align="center">
-                <Button onClick={checkAnswer}>Check</Button>
-            </ButtonGroup>
-        {/snippet}
-    </ModalContent>
-</Overlay>
-
-<style lang="scss">
-    .image-container {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        gap: $sp6;
-        position: relative;
-        margin-bottom: $sp3;
-
-        @include mobile() {
-            gap: $sp5;
-            flex-direction: column-reverse;
-        }
-    }
-
-    .left img {
-        cursor: grab;
-        user-select: none;
-
-        &.dragging {
-            cursor: grabbing;
-        }
-    }
-
-    .right img {
-        $pi: 3.14159265359;
-        filter: saturate(calc(1 - (var(--diff) / $pi)));
-    }
-
-    .image {
-        width: 200px;
-        height: auto;
-        text-align: center;
-
-        @include mobile() {
-            width: 160px;
-        }
-    }
-
-    .handle {
-        cursor: pointer;
-    }
-
-    .info {
-        margin-top: $sp4;
-        @include font(light, normal, fs-80);
-        text-align: center;
-        padding: 0 $sp4;
-    }
-
-    .header {
-        text-align: center;
-    }
-</style>
diff --git a/frontend/app/src/components/Router.svelte b/frontend/app/src/components/Router.svelte
deleted file mode 100644
index 8236bdacfe..0000000000
--- a/frontend/app/src/components/Router.svelte
+++ /dev/null
@@ -1,315 +0,0 @@
-
-<script lang="ts">
-    import { initNavigationHistoryTracking, navigate } from "@src/utils/navigation";
-    import { handleLinkClick, removeQueryStringParam } from "@src/utils/urls";
-    import { type ChatIdentifier, OpenChat, type RouteParams, adminRoute, blogRoute, chatIdentifiersEqual, chatListRoute, chatListScopeStore, chatsInitialisedStore, communitesRoute, exploringStore, globalDirectChatSelectedRoute, globalGroupChatSelectedRoute, messageIndexStore, notFoundStore, routeKindStore, routeStore, routerReadyStore, selectedChannelRoute, selectedChatIdStore, selectedCommunityIdStore, selectedCommunityRoute, selectedServerChatStore, shareRoute, threadMessageIndexStore, threadOpenStore } from "@client";
-    import page from "page";
-    import { getContext, onMount, untrack } from "svelte";
-    import Home, { type HomeType } from "./home/HomeRoute.svelte";
-    import LandingPage, { type LandingPageType } from "./landingpages/LandingPage.svelte";
-    import NotFound, { type NotFoundType } from "./NotFound.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        showLandingPage: boolean;
-    }
-
-    let { showLandingPage }: Props = $props();
-
-    let route: HomeType | LandingPageType | NotFoundType | undefined = $state(undefined);
-
-    function parsePathParams(fn: (ctx: PageJS.Context) => RouteParams) {
-        return (ctx: PageJS.Context, next: () => any) => {
-            client.setRouteParams(ctx, fn(ctx));
-            scrollToTop();
-            next();
-        };
-    }
-
-    onMount(() => {
-        const onLinkClick = handleLinkClick(client, navigate);
-        document.addEventListener("click", onLinkClick, { capture: true });
-
-        page(
-            "/home",
-            parsePathParams(() => ({ kind: "home_landing_route", scope: { kind: "none" } })),
-            track,
-            () => (route = LandingPage),
-        );
-        page(
-            "/features",
-            parsePathParams(() => ({ kind: "features_route", scope: { kind: "none" } })),
-            track,
-            () => (route = LandingPage),
-        );
-        page(
-            "/roadmap",
-            parsePathParams(() => ({ kind: "roadmap_route", scope: { kind: "none" } })),
-            track,
-            () => (route = LandingPage),
-        );
-        page("/blog/:slug?", parsePathParams(blogRoute), track, () => (route = LandingPage));
-        page(
-            "/whitepaper",
-            parsePathParams(() => ({ kind: "whitepaper_route", scope: { kind: "none" } })),
-            track,
-            () => (route = LandingPage),
-        );
-        page(
-            "/guidelines",
-            parsePathParams(() => ({ kind: "guidelines_route", scope: { kind: "none" } })),
-            track,
-            () => (route = LandingPage),
-        );
-        page(
-            "/terms",
-            parsePathParams(() => ({ kind: "terms_route", scope: { kind: "none" } })),
-            track,
-            () => (route = LandingPage),
-        );
-        page(
-            "/faq",
-            parsePathParams(() => ({ kind: "faq_route", scope: { kind: "none" } })),
-            track,
-            () => (route = LandingPage),
-        );
-        page(
-            "/diamond",
-            parsePathParams(() => ({ kind: "diamond_route", scope: { kind: "none" } })),
-            track,
-            () => (route = LandingPage),
-        );
-        page(
-            "/architecture",
-            parsePathParams(() => ({ kind: "architecture_route", scope: { kind: "none" } })),
-            track,
-            () => (route = LandingPage),
-        );
-        // this is for explore mode
-        page("/communities", parsePathParams(communitesRoute), track, () => (route = Home));
-        // global direct chat selected
-        page(
-            "/user/:chatId/:messageIndex?/:threadMessageIndex?",
-            parsePathParams(globalDirectChatSelectedRoute({ kind: "chats" })),
-            track,
-            () => (route = Home),
-        );
-        // global group chat selected
-        page(
-            "/group/:chatId/:messageIndex?/:threadMessageIndex?",
-            parsePathParams(globalGroupChatSelectedRoute({ kind: "chats" })),
-            track,
-            () => (route = Home),
-        );
-        // selected community group
-        page(
-            "/community/:communityId",
-            parsePathParams(selectedCommunityRoute),
-            track,
-            () => (route = Home),
-        );
-        // selected community channel
-        page(
-            "/community/:communityId/channel/:channelId/:messageIndex?/:threadMessageIndex?",
-            parsePathParams(selectedChannelRoute(false)),
-            track,
-            () => (route = Home),
-        );
-        // global direct and group chats
-        page(
-            "/chats",
-            parsePathParams(chatListRoute({ kind: "chats" })),
-            track,
-            () => (route = Home),
-        );
-        page(
-            "/chats/user/:chatId/:messageIndex?/:threadMessageIndex?",
-            parsePathParams(globalDirectChatSelectedRoute({ kind: "chats" })),
-            track,
-            () => (route = Home),
-        );
-        page(
-            "/chats/group/:chatId/:messageIndex?/:threadMessageIndex?",
-            parsePathParams(globalGroupChatSelectedRoute({ kind: "chats" })),
-            track,
-            () => (route = Home),
-        );
-        // favourites
-        page(
-            "/favourite",
-            parsePathParams(chatListRoute({ kind: "favourite" })),
-            track,
-            () => (route = Home),
-        );
-        // selected global group favourite
-        page(
-            "/favourite/group/:chatId/:messageIndex?/:threadMessageIndex?",
-            parsePathParams(globalGroupChatSelectedRoute({ kind: "favourite" })),
-            track,
-            () => (route = Home),
-        );
-        // selected global direct favourite
-        page(
-            "/favourite/user/:chatId/:messageIndex?/:threadMessageIndex?",
-            parsePathParams(globalDirectChatSelectedRoute({ kind: "favourite" })),
-            track,
-            () => (route = Home),
-        );
-        // selected favourite channel
-        page(
-            "/favourite/community/:communityId/channel/:channelId/:messageIndex?/:threadMessageIndex?",
-            parsePathParams(selectedChannelRoute(true)),
-            track,
-            () => (route = Home),
-        );
-        page("/share", parsePathParams(shareRoute), track, () => (route = Home));
-        page("/admin", parsePathParams(adminRoute), track, () => (route = Home));
-        page(
-            "/",
-            parsePathParams(() => ({ kind: "home_route", scope: { kind: "none" } })),
-            track,
-            () => (route = Home),
-        );
-        // legacy route
-        page(
-            "/:chatId/:messageIndex?/:threadMessageIndex?",
-            parsePathParams(globalGroupChatSelectedRoute({ kind: "chats" })),
-            track,
-            () => (route = Home),
-        );
-        page(
-            "*",
-            parsePathParams(() => ({ kind: "not_found_route", scope: { kind: "none" } })),
-            () => {
-                notFoundStore.set(true);
-                route = NotFound;
-            },
-        );
-        page.start({ click: false });
-        const cleanupNavigationHistoryTracking = initNavigationHistoryTracking();
-
-        routerReadyStore.set(true);
-
-        return () => {
-            cleanupNavigationHistoryTracking();
-            document.removeEventListener("click", onLinkClick, { capture: true });
-            page.stop();
-        };
-    });
-
-    function scrollToTop() {
-        window.scrollTo({
-            behavior: "auto",
-            top: 0,
-        });
-    }
-
-    function track(ctx: PageJS.Context, next: () => any) {
-        console.debug("GA: page_view", ctx.pathname);
-        gtag("event", "page_view", {
-            page_location: ctx.pathname,
-        });
-        next();
-    }
-
-    // This is where our general effects are going to go. They don't *really* belong in a component at all
-    // but unfortunately unowned effects do not respond to store value changes
-
-    // Set selected community
-    $effect(() => {
-        if ($chatsInitialisedStore && $selectedCommunityIdStore !== undefined) {
-            const id = $selectedCommunityIdStore;
-
-            // this untrack is not really necessary in this case but it's probably a good pattern to follow to
-            // make double sure we are only reacting to the things we want to react to
-            untrack(() => {
-                client.setSelectedCommunity(id).then((preview) => {
-                    if (preview && $selectedChatIdStore === undefined) {
-                        // if we are previewing the community we need to select the first chat manually
-                        client.selectDefaultChat();
-                    }
-                });
-            });
-        }
-    });
-
-    $effect(() => {
-        if (client.captureReferralCode()) {
-            navigate(removeQueryStringParam("ref"));
-        }
-    });
-
-    let previousChatId: ChatIdentifier | undefined = undefined;
-    $effect(() => {
-        if (
-            $threadOpenStore &&
-            $messageIndexStore !== undefined &&
-            $selectedChatIdStore !== undefined &&
-            chatIdentifiersEqual(previousChatId, $selectedChatIdStore)
-        ) {
-            const chatId = $selectedChatIdStore;
-            const idx = $messageIndexStore;
-            const threadIdx = $threadMessageIndexStore;
-            untrack(() => {
-                client.openThreadFromMessageIndex(chatId, idx, threadIdx);
-            });
-        }
-        previousChatId = $selectedChatIdStore;
-    });
-
-    $effect(() => {
-        if (!$threadOpenStore) {
-            untrack(() => {
-                client.filterRightPanelHistory((panel) => panel.kind !== "message_thread_panel");
-            });
-        }
-    });
-
-    $effect(() => {
-        if (
-            $selectedChatIdStore === undefined &&
-            $chatListScopeStore.kind !== "none" &&
-            !$exploringStore
-        ) {
-            client.selectDefaultChat();
-        }
-    });
-
-    // Set selected chat
-    $effect(() => {
-        // we have to be *so* careful with the reactivity here. Is this actually better?
-        if (
-            $chatsInitialisedStore &&
-            $selectedChatIdStore !== undefined &&
-            ($routeKindStore === "selected_channel_route" ||
-                $routeKindStore === "global_chat_selected_route")
-        ) {
-            untrack(() => {
-                if (
-                    $routeStore.kind === "selected_channel_route" ||
-                    $routeStore.kind === "global_chat_selected_route"
-                ) {
-                    const id = $selectedChatIdStore;
-                    const messageIndex = $routeStore.messageIndex;
-                    const threadMessageIndex = $routeStore.threadMessageIndex;
-                    if (id !== undefined) {
-                        client.setSelectedChat(id, messageIndex, threadMessageIndex);
-                    }
-                }
-            });
-        }
-    });
-
-    // clear selected chat
-    $effect(() => {
-        if ($selectedChatIdStore === undefined) {
-            selectedServerChatStore.set(undefined);
-        }
-    });
-</script>
-
-{#if route !== undefined}
-    {@const RouteComponent = route}
-    <RouteComponent {showLandingPage} />
-{/if}
diff --git a/frontend/app/src/components/Search.svelte b/frontend/app/src/components/Search.svelte
deleted file mode 100644
index 966d1ad2fd..0000000000
--- a/frontend/app/src/components/Search.svelte
+++ /dev/null
@@ -1,162 +0,0 @@
-<script lang="ts">
-    import { iconSize, type ResourceKey } from "@client";
-    import { onMount } from "svelte";
-    import { _ } from "svelte-i18n";
-    import Close from "svelte-material-icons/Close.svelte";
-    import Magnify from "svelte-material-icons/Magnify.svelte";
-    import { translatable } from "../actions/translatable";
-    import { i18nKey, interpolate } from "../i18n/i18n";
-
-    interface Props {
-        searchTerm?: string;
-        searching: boolean;
-        placeholder?: ResourceKey;
-        fill?: boolean;
-        inputStyle?: boolean;
-        autofocus?: boolean;
-        onPerformSearch?: (term: string) => void;
-        onFocus?: () => void;
-        onBlur?: () => void;
-    }
-
-    let {
-        searchTerm = $bindable(""),
-        searching = $bindable(false),
-        placeholder = i18nKey("searchPlaceholder"),
-        fill = false,
-        inputStyle = false,
-        onPerformSearch,
-        onFocus,
-        onBlur,
-        autofocus = false,
-    }: Props = $props();
-
-    let timer: number | undefined;
-    let inp: HTMLInputElement;
-
-    function performSearch(e: Event) {
-        e.preventDefault();
-        window.clearTimeout(timer);
-        onPerformSearch?.(searchTerm);
-    }
-    function clearSearch() {
-        searchTerm = "";
-        onPerformSearch?.(searchTerm);
-    }
-    function keydown(ev: KeyboardEvent) {
-        if (["Up", "Down", "Left", "Right", "Tab"].includes(ev.key)) {
-            return;
-        }
-        if (ev.key === "Escape") {
-            searchTerm = "";
-        }
-        if (timer !== undefined) {
-            window.clearTimeout(timer);
-        }
-        timer = window.setTimeout(() => {
-            if (searchTerm.length != 1) {
-                onPerformSearch?.(searchTerm);
-            }
-        }, 300);
-    }
-
-    onMount(() => {
-        if (autofocus) {
-            inp.focus();
-        }
-    });
-</script>
-
-<form onsubmit={performSearch} class="wrapper" class:fill class:input-style={inputStyle}>
-    <input
-        bind:this={inp}
-        onkeydown={keydown}
-        spellcheck="false"
-        bind:value={searchTerm}
-        type="text"
-        class:input-style={inputStyle}
-        use:translatable={{ key: placeholder }}
-        placeholder={interpolate($_, placeholder)}
-        onfocus={onFocus}
-        onblur={onBlur} />
-    {#if searchTerm !== ""}
-        <!-- svelte-ignore a11y_click_events_have_key_events -->
-        <!-- svelte-ignore a11y_no_static_element_interactions -->
-        <span onclick={clearSearch} class="icon close" class:input-style={inputStyle}
-            ><Close
-                viewBox={inputStyle ? "0 -3 24 24" : "0 0 24 24"}
-                size={$iconSize}
-                color={"var(--icon-txt)"} /></span>
-    {:else}
-        <span class="icon" class:searching class:input-style={inputStyle}>
-            {#if !searching}
-                <Magnify
-                    viewBox={inputStyle ? "0 -3 24 24" : "0 0 24 24"}
-                    size={$iconSize}
-                    color={"var(--icon-txt)"} />
-            {/if}
-        </span>
-    {/if}
-</form>
-
-<style lang="scss">
-    .wrapper {
-        margin: 0 $sp4 $sp4 $sp4;
-        background-color: var(--chatSearch-bg);
-        display: flex;
-        align-items: center;
-        position: relative;
-        padding: $sp2 $sp4;
-        border-radius: var(--rd);
-        box-shadow: var(--chatSearch-sh);
-        border: var(--bw) solid var(--chatSearch-bd);
-        border-radius: var(--chatSearch-rd);
-
-        @include mobile() {
-            margin: 0 $sp3;
-            margin-bottom: $sp3;
-        }
-
-        &.fill {
-            margin: 0;
-        }
-
-        &.input-style {
-            padding: $sp3 $sp4;
-            border-radius: var(--rd);
-        }
-    }
-    .icon {
-        margin-top: $sp3;
-        flex: 0 0 25px;
-
-        &.input-style {
-            margin-top: 0;
-        }
-    }
-    .close {
-        cursor: pointer;
-    }
-    .searching {
-        @include loading-spinner(1em, 0.5em, var(--button-spinner));
-    }
-    input {
-        background-color: transparent;
-        color: var(--txt);
-        outline: none;
-        flex: 1;
-        padding: $sp3;
-        margin: 0;
-        border: none;
-        width: 100%;
-        @include font(book, normal, fs-100);
-
-        &.input-style {
-            padding: 0;
-        }
-
-        &::placeholder {
-            color: var(--placeholder);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/SecureButton.svelte b/frontend/app/src/components/SecureButton.svelte
deleted file mode 100644
index 3025b4828b..0000000000
--- a/frontend/app/src/components/SecureButton.svelte
+++ /dev/null
@@ -1,48 +0,0 @@
-<script lang="ts">
-    import { onMount } from "svelte";
-    import type { ButtonProps } from "./Button.svelte";
-    import Button from "./Button.svelte";
-    import { suspectedAutomationBot } from "../stores/automation";
-    import { isTouchDevice } from "../utils/devices";
-
-    let {
-        children,
-        onClick,
-        label,
-        ...rest
-    }: ButtonProps & { label: string; onClick: (ev: MouseEvent) => void } = $props();
-
-    // real users move, pause and then click. Bots either don't move at all or move and then click immediately
-    const PAUSE_TRESHOLD = 10;
-
-    let lastMoved = Date.now();
-
-    onMount(() => {
-        document.addEventListener("mousemove", mousemove);
-        return () => {
-            document.removeEventListener("mousemove", mousemove);
-        };
-    });
-
-    function mousemove() {
-        lastMoved = Date.now();
-    }
-
-    function probablyBot(ev: MouseEvent): boolean {
-        const pause = Date.now() - lastMoved;
-        const fakePause = pause < PAUSE_TRESHOLD && !isTouchDevice;
-        return fakePause || !ev.isTrusted || $suspectedAutomationBot;
-    }
-
-    function internalOnclick(ev: MouseEvent) {
-        if (probablyBot(ev)) {
-            console.log("Looks like this button was clicked by a bot");
-        } else {
-            onClick(ev);
-        }
-    }
-</script>
-
-<Button onClick={internalOnclick} {...rest}>
-    {@render children?.()}
-</Button>
diff --git a/frontend/app/src/components/SelectChatModal.svelte b/frontend/app/src/components/SelectChatModal.svelte
deleted file mode 100644
index 25536dcf43..0000000000
--- a/frontend/app/src/components/SelectChatModal.svelte
+++ /dev/null
@@ -1,573 +0,0 @@
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<script lang="ts">
-    import { trackedEffect } from "@src/utils/effects.svelte";
-    import type {
-        ChatIdentifier,
-        ChatSummary,
-        CommunityIdentifier,
-        CommunitySummary,
-        DiamondMembershipStatus,
-        DirectChatSummary,
-        MultiUserChat,
-        OpenChat,
-    } from "@client";
-    import {
-        allUsersStore,
-        AvatarSize,
-        chatIdentifiersEqual,
-        communitiesStore,
-        favouritesStore,
-        iconSize,
-        selectedChatIdStore,
-        serverDirectChatsStore,
-        serverGroupChatsStore,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import AccountMultiple from "svelte-material-icons/AccountMultiple.svelte";
-    import Close from "svelte-material-icons/Close.svelte";
-    import ForumOutline from "svelte-material-icons/ForumOutline.svelte";
-    import HeartOutline from "svelte-material-icons/HeartOutline.svelte";
-    import MessageOutline from "svelte-material-icons/MessageOutline.svelte";
-    import { i18nKey } from "../i18n/i18n";
-    import { rtlStore } from "../stores/rtl";
-    import { now } from "../stores/time";
-    import { buildDisplayName } from "../utils/user";
-    import Avatar from "./Avatar.svelte";
-    import CollapsibleCard from "./CollapsibleCard.svelte";
-    import HoverIcon from "./HoverIcon.svelte";
-    import Search from "./Search.svelte";
-    import SectionHeader from "./SectionHeader.svelte";
-    import Translatable from "./Translatable.svelte";
-    import Badges from "./home/profile/Badges.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        onSelect: (chatId: ChatIdentifier) => void;
-        onClose: () => void;
-    }
-
-    type ShareTo = {
-        directChats: ShareChat[];
-        groupChats: ShareChat[];
-        favourites: ShareChat[];
-        communities: ShareCommunity[];
-    };
-    type ShareChat = {
-        kind: "chat";
-        id: ChatIdentifier;
-        userId: string | undefined;
-        name: string;
-        diamondStatus: DiamondMembershipStatus["kind"];
-        streak: number;
-        avatarUrl: string;
-        description: string;
-        username: string | undefined;
-        lastUpdated: bigint;
-        uniquePerson: boolean;
-    };
-    type ShareCommunity = {
-        kind: "community";
-        id: CommunityIdentifier;
-        name: string;
-        avatarUrl: string;
-        description: string;
-        lastUpdated: bigint;
-        channels: ShareChat[];
-    };
-
-    let { onClose, onSelect }: Props = $props();
-    let searchTerm = $state("");
-    let searchTermLower = $derived(searchTerm.toLowerCase());
-    let targets = $state<ShareTo>({
-        directChats: [],
-        groupChats: [],
-        favourites: [],
-        communities: [],
-    });
-
-    trackedEffect("select-chat-modal", () => {
-        buildListOfTargets($now, $selectedChatIdStore, searchTermLower).then((t) => (targets = t));
-    });
-    let noTargets = $derived(getNumberOfTargets(targets) === 0);
-
-    function getNumberOfTargets(targets: ShareTo): number {
-        return (
-            targets.directChats.length +
-            targets.groupChats.length +
-            targets.communities.flatMap((c) => c.channels).length
-        );
-    }
-
-    async function targetsFromChatList(
-        now: number,
-        chats: ChatSummary[],
-        selectedChatId: ChatIdentifier | undefined,
-    ): Promise<ShareChat[]> {
-        return Promise.all(
-            filterChatSelection(chats, selectedChatId).map((c) => normaliseChatSummary(now, c)),
-        );
-    }
-
-    function matchesSearch(thing: ShareChat | ShareCommunity, searchTerm: string): boolean {
-        return (
-            (searchTerm === "" ||
-                thing.name.toLocaleLowerCase().includes(searchTerm) ||
-                (thing.kind === "chat" &&
-                    thing.username?.toLocaleLowerCase()?.includes(searchTerm))) ??
-            false
-        );
-    }
-
-    function chatMatchesSearch(chats: ShareChat[], searchTerm: string): ShareChat[] {
-        return chats.filter((c) => matchesSearch(c, searchTerm)).sort(compare);
-    }
-
-    function communityMatchesSearch(communities: ShareCommunity[], searchTerm: string) {
-        return communities
-            .reduce((agg, c) => {
-                if (matchesSearch(c, searchTerm)) {
-                    agg.push(c);
-                } else {
-                    const filtered = chatMatchesSearch(c.channels, searchTerm);
-                    if (filtered.length > 0) {
-                        agg.push({
-                            ...c,
-                            channels: filtered,
-                        });
-                    }
-                }
-                return agg;
-            }, [] as ShareCommunity[])
-            .sort(compare);
-    }
-
-    async function buildListOfTargets(
-        now: number,
-        selectedChatId: ChatIdentifier | undefined,
-        searchTerm: string,
-    ): Promise<ShareTo> {
-        let targets: ShareTo = {
-            directChats: [],
-            groupChats: [],
-            favourites: [],
-            communities: [],
-        };
-        const direct = [...$serverDirectChatsStore.values()].map((d) => ({
-            ...d,
-            name: buildDisplayName($allUsersStore, d.them.userId, "user"),
-        }));
-
-        const group = [...$serverGroupChatsStore.values()];
-        const channels = [...$communitiesStore.values()].flatMap((c) => c.channels);
-        const all = [...group, ...direct, ...channels];
-        const favs = all.filter((c) => $favouritesStore.has(c.id));
-        try {
-            const directChats = await targetsFromChatList(now, direct, selectedChatId);
-            const groupChats = await targetsFromChatList(now, group, selectedChatId);
-            const favourites = await targetsFromChatList(now, favs, selectedChatId);
-            const communities = await Promise.all(
-                [...$communitiesStore.values()].map((c) =>
-                    normaliseCommunity(now, selectedChatId, c),
-                ),
-            );
-            return {
-                directChats: chatMatchesSearch(directChats, searchTerm),
-                groupChats: chatMatchesSearch(groupChats, searchTerm),
-                favourites: chatMatchesSearch(favourites, searchTerm),
-                communities: communityMatchesSearch(communities, searchTerm),
-            };
-        } catch (err) {}
-        return targets;
-    }
-
-    async function normaliseCommunity(
-        now: number,
-        selectedChatId: ChatIdentifier | undefined,
-        { id, name, avatar, description, channels, lastUpdated }: CommunitySummary,
-    ): Promise<ShareCommunity> {
-        const normalisedChannels = await Promise.all(
-            filterChatSelection(channels, selectedChatId).map((c) => normaliseChatSummary(now, c)),
-        );
-        return {
-            kind: "community",
-            id,
-            name,
-            avatarUrl: client.communityAvatarUrl(id.communityId, avatar),
-            description,
-            lastUpdated,
-            channels: normalisedChannels,
-        };
-    }
-
-    async function normaliseChatSummary(now: number, chatSummary: ChatSummary): Promise<ShareChat> {
-        switch (chatSummary.kind) {
-            case "direct_chat":
-                const description = await buildDirectChatDescription(chatSummary, now);
-                const them = $allUsersStore.get(chatSummary.them.userId);
-                return {
-                    kind: "chat",
-                    id: chatSummary.id,
-                    userId: chatSummary.them.userId,
-                    name: client.displayName(them),
-                    diamondStatus: them?.diamondStatus ?? "inactive",
-                    streak: client.getStreak(chatSummary.them.userId),
-                    avatarUrl: client.userAvatarUrl(them),
-                    description,
-                    username: them ? "@" + them.username : undefined,
-                    lastUpdated: chatSummary.lastUpdated,
-                    uniquePerson: them?.isUniquePerson ?? false,
-                };
-
-            default:
-                return {
-                    kind: "chat",
-                    id: chatSummary.id,
-                    userId: undefined,
-                    name: chatSummary.name,
-                    diamondStatus: "inactive" as DiamondMembershipStatus["kind"],
-                    streak: 0,
-                    avatarUrl: client.groupAvatarUrl(chatSummary),
-                    description: buildGroupChatDescription(chatSummary),
-                    username: undefined,
-                    lastUpdated: chatSummary.lastUpdated,
-                    uniquePerson: false,
-                };
-        }
-    }
-
-    async function buildDirectChatDescription(
-        chat: DirectChatSummary,
-        now: number,
-    ): Promise<string> {
-        return client.getLastOnlineDate(chat.them.userId, now).then((lastOnline) => {
-            if (lastOnline !== undefined && lastOnline !== 0) {
-                return client.formatLastOnlineDate($_, now, lastOnline)[0];
-            } else {
-                return $_("offline");
-            }
-        });
-    }
-
-    function buildGroupChatDescription(group: MultiUserChat): string {
-        if (group.description.length > 0) {
-            return group.description;
-        } else {
-            const level = $_(`level.${group.level}`).toLowerCase();
-            const number = group.memberCount;
-            return group.public
-                ? $_("publicGroupWithN", { values: { number, level } })
-                : $_("privateGroupWithN", { values: { number, level } });
-        }
-    }
-
-    function filterChatSelection(
-        chats: ChatSummary[],
-        selectedChatId: ChatIdentifier | undefined,
-    ): ChatSummary[] {
-        return chats.filter(
-            (c) =>
-                !chatIdentifiersEqual(selectedChatId, c.id) &&
-                client.canSendMessage(c.id, "message", "text"),
-        );
-    }
-
-    function compare(a: { name: string }, b: { name: string }): number {
-        return a.name.localeCompare(b.name);
-    }
-</script>
-
-<section>
-    <SectionHeader border={false} gap>
-        <HoverIcon>
-            <AccountMultiple size={$iconSize} color={"var(--icon-txt)"} />
-        </HoverIcon>
-        <h4><Translatable resourceKey={i18nKey("sendTo")} /></h4>
-        <span role="button" tabindex="0" title={$_("close")} class="close" onclick={onClose}>
-            <HoverIcon>
-                <Close size={$iconSize} color={"var(--icon-txt)"} />
-            </HoverIcon>
-        </span>
-    </SectionHeader>
-    <div class="search">
-        <Search searching={false} bind:searchTerm placeholder={i18nKey("search")} />
-    </div>
-    {#if noTargets}
-        <div class="no-chats"><Translatable resourceKey={i18nKey("noChatsAvailable")} /></div>
-    {:else}
-        <div class="selectable-chats">
-            {#if targets.directChats.length > 0}
-                <CollapsibleCard
-                    open={searchTerm !== ""}
-                    first
-                    transition={false}
-                    headerText={i18nKey("communities.directChats")}>
-                    {#snippet titleSlot()}
-                        <div class="card-header">
-                            <div class="avatar">
-                                <MessageOutline size={$iconSize} color={"var(--icon-txt)"} />
-                            </div>
-                            <div class="details">
-                                <h4 class="title">
-                                    <Translatable
-                                        resourceKey={i18nKey("communities.directChats")} />
-                                </h4>
-                            </div>
-                        </div>
-                    {/snippet}
-                    {#each targets.directChats as target}
-                        <div
-                            role="button"
-                            tabindex="0"
-                            class="row"
-                            class:rtl={$rtlStore}
-                            onclick={() => onSelect(target.id)}>
-                            <div class="avatar">
-                                <Avatar url={target.avatarUrl} size={AvatarSize.Default} />
-                            </div>
-                            <div class="details">
-                                <div class="name">
-                                    <span class="display-name">
-                                        {target.name}
-                                    </span>
-                                    <Badges
-                                        uniquePerson={target.uniquePerson}
-                                        diamondStatus={target.diamondStatus}
-                                        streak={target.streak} />
-                                    {#if target.username !== undefined}
-                                        <span class="username">{target.username}</span>
-                                    {/if}
-                                </div>
-                                <div class="description">{target.description}</div>
-                            </div>
-                        </div>
-                    {/each}
-                </CollapsibleCard>
-            {/if}
-            {#if targets.groupChats.length > 0}
-                <CollapsibleCard
-                    transition={false}
-                    open={searchTerm !== ""}
-                    headerText={i18nKey("communities.groupChats")}>
-                    {#snippet titleSlot()}
-                        <div class="card-header">
-                            <div class="avatar">
-                                <ForumOutline size={$iconSize} color={"var(--icon-txt)"} />
-                            </div>
-                            <div class="details">
-                                <h4 class="title">
-                                    <Translatable resourceKey={i18nKey("communities.groupChats")} />
-                                </h4>
-                            </div>
-                        </div>
-                    {/snippet}
-                    {#each targets.groupChats as target}
-                        <div
-                            role="button"
-                            tabindex="0"
-                            class="row"
-                            class:rtl={$rtlStore}
-                            onclick={() => onSelect(target.id)}>
-                            <div class="avatar">
-                                <Avatar url={target.avatarUrl} size={AvatarSize.Default} />
-                            </div>
-                            <div class="details">
-                                <div class="name">{target.name}</div>
-                                <div class="description">{target.description}</div>
-                            </div>
-                        </div>
-                    {/each}
-                </CollapsibleCard>
-            {/if}
-            {#if targets.favourites.length > 0}
-                <CollapsibleCard
-                    transition={false}
-                    open={searchTerm !== ""}
-                    headerText={i18nKey("communities.favourites")}>
-                    {#snippet titleSlot()}
-                        <div class="card-header">
-                            <div class="avatar">
-                                <HeartOutline size={$iconSize} color={"var(--icon-txt)"} />
-                            </div>
-                            <div class="details">
-                                <h4 class="title">
-                                    <Translatable resourceKey={i18nKey("communities.favourites")} />
-                                </h4>
-                            </div>
-                        </div>
-                    {/snippet}
-                    {#each targets.favourites as target}
-                        <div
-                            role="button"
-                            tabindex="0"
-                            class="row"
-                            class:rtl={$rtlStore}
-                            onclick={() => onSelect(target.id)}>
-                            <div class="avatar">
-                                <Avatar url={target.avatarUrl} size={AvatarSize.Default} />
-                            </div>
-                            <div class="details">
-                                <div class="name">{target.name}</div>
-                                <div class="description">{target.description}</div>
-                            </div>
-                        </div>
-                    {/each}
-                </CollapsibleCard>
-            {/if}
-            {#each targets.communities as community}
-                {#if community.channels.length > 0}
-                    <CollapsibleCard
-                        transition={false}
-                        open={searchTerm !== ""}
-                        headerText={i18nKey(community.name)}>
-                        {#snippet titleSlot()}
-                            <div class="card-header">
-                                <div class="avatar">
-                                    <Avatar url={community.avatarUrl} size={AvatarSize.Default} />
-                                </div>
-                                <div class="details">
-                                    <h4 class="title">
-                                        {community.name}
-                                    </h4>
-                                </div>
-                            </div>
-                        {/snippet}
-                        {#each community.channels as target}
-                            <div
-                                role="button"
-                                tabindex="0"
-                                class="row"
-                                class:rtl={$rtlStore}
-                                onclick={() => onSelect(target.id)}>
-                                <div class="avatar">
-                                    <Avatar url={target.avatarUrl} size={AvatarSize.Default} />
-                                </div>
-                                <div class="details">
-                                    <div class="name">{target.name}</div>
-                                    <div class="description">{target.description}</div>
-                                </div>
-                            </div>
-                        {/each}
-                    </CollapsibleCard>
-                {/if}
-            {/each}
-        </div>
-    {/if}
-</section>
-
-<style lang="scss">
-    :global(.selectable-chats .body) {
-        padding: 0;
-    }
-
-    :global(.selectable-chats .header) {
-        padding: $sp3;
-    }
-
-    h4 {
-        flex: 1;
-        margin: 0;
-        margin-top: 2px;
-    }
-
-    section {
-        background: var(--panel-right-modal);
-        height: calc(var(--vh, 1vh) * 100);
-        position: relative;
-        width: 500px;
-        overflow: auto;
-        overflow-x: hidden;
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-
-        @include mobile() {
-            width: 100%;
-        }
-    }
-
-    .no-chats {
-        margin: $sp3;
-        padding: $sp3 $sp4;
-        background-color: var(--chatSummary-bg);
-        @include font(bold, normal, fs-100);
-        color: var(--error);
-    }
-
-    .close {
-        flex: 0 0 30px;
-    }
-
-    .selectable-chats {
-        overflow: auto;
-        @include nice-scrollbar();
-        @include mobile() {
-            width: 100%;
-        }
-    }
-
-    .card-header {
-        position: relative;
-        display: flex;
-        align-items: center;
-        width: calc(100% - 24px);
-        gap: toRem(12);
-
-        .avatar {
-            flex: 0 0 48px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 48px;
-            border-radius: 50%;
-            background-color: var(--chatSummary-bg-selected);
-
-            @include mobile() {
-                flex: 0 0 42px;
-                height: 42px;
-            }
-        }
-    }
-
-    .row {
-        position: relative;
-        display: flex;
-        gap: toRem(12);
-        justify-content: space-between;
-        align-items: center;
-        background-color: var(--chatSummary-bg);
-        cursor: pointer;
-        padding: $sp3;
-
-        @media (hover: hover) {
-            &:hover {
-                background-color: var(--chatSummary-hv);
-            }
-        }
-    }
-
-    .details {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        overflow: hidden;
-        .name {
-            @include font(book, normal, fs-100);
-
-            display: flex;
-            align-items: center;
-            gap: $sp2;
-
-            .username {
-                color: var(--txt-light);
-            }
-        }
-        .description {
-            @include ellipsis();
-            @include font(book, normal, fs-80);
-            color: var(--txt-light);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/SuspendedModal.svelte b/frontend/app/src/components/SuspendedModal.svelte
deleted file mode 100644
index 56c908a16d..0000000000
--- a/frontend/app/src/components/SuspendedModal.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<script lang="ts">
-    import { currentUserStore } from "@client";
-    import { i18nKey } from "../i18n/i18n";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import ModalContent from "./ModalContent.svelte";
-    import Translatable from "./Translatable.svelte";
-
-    interface Props {
-        onClose: () => void;
-    }
-
-    let { onClose }: Props = $props();
-
-    function buildNoticeText(): string {
-        const suspensionDetails = $currentUserStore.suspensionDetails!;
-        const actionDate = new Date(Number(suspensionDetails.action.timestamp));
-        const actionText =
-            suspensionDetails.action.kind === "delete_action" ? "deleted" : "unsuspended";
-
-        return `Your account has been suspended.
-
-Reason:
-"${suspensionDetails.reason}"
-
-You can appeal this suspension by sending a direct message to the @OpenChat Twitter account otherwise your account will be ${actionText} on ${actionDate.toLocaleString()}.`;
-    }
-</script>
-
-<ModalContent {onClose}>
-    {#snippet header()}
-        <Translatable resourceKey={i18nKey("accountSuspended")} />
-    {/snippet}
-    {#snippet body()}
-        <Markdown text={buildNoticeText()} />
-    {/snippet}
-</ModalContent>
diff --git a/frontend/app/src/components/Tabs.svelte b/frontend/app/src/components/Tabs.svelte
deleted file mode 100644
index 661f7bdff6..0000000000
--- a/frontend/app/src/components/Tabs.svelte
+++ /dev/null
@@ -1,87 +0,0 @@
-<script module>
-    export type Tab = {
-        title: ResourceKey;
-        snippet: Snippet;
-    };
-</script>
-
-<script lang="ts">
-    import type { ResourceKey } from "@client";
-    import type { Snippet } from "svelte";
-    import Translatable from "./Translatable.svelte";
-
-    interface Props {
-        tabs: Tab[];
-        initialIndex?: number;
-        nested?: boolean;
-        selectedIndex?: number;
-        onTabSelected?: (index: number) => void;
-    }
-
-    let {
-        tabs,
-        initialIndex = 0,
-        nested = false,
-        selectedIndex = $bindable(initialIndex),
-        onTabSelected,
-    }: Props = $props();
-
-    function selectTab(idx: number) {
-        selectedIndex = idx;
-        onTabSelected?.(idx);
-    }
-</script>
-
-<div class="tabs" class:nested>
-    {#each tabs as tab, i}
-        <!-- svelte-ignore a11y_click_events_have_key_events -->
-        <div
-            tabindex="0"
-            role="button"
-            class="tab"
-            class:nested
-            onclick={() => selectTab(i)}
-            class:selected={selectedIndex === i}>
-            <Translatable resourceKey={tab.title}></Translatable>
-        </div>
-    {/each}
-</div>
-{#if selectedIndex !== undefined}
-    {@render tabs[selectedIndex]?.snippet()}
-{/if}
-
-<style lang="scss">
-    .tabs {
-        display: flex;
-        align-items: center;
-        @include font(medium, normal, fs-90);
-        color: var(--txt-light);
-        gap: $sp5;
-        border-bottom: 1px solid var(--bd);
-        cursor: pointer;
-        margin-bottom: $sp4;
-
-        @include mobile() {
-            gap: $sp4;
-        }
-
-        &.nested {
-            @include font(medium, normal, fs-80);
-        }
-
-        .tab {
-            padding-bottom: 10px;
-            margin-bottom: -2px;
-            border-bottom: 3px solid transparent;
-            white-space: nowrap;
-            &.selected {
-                color: var(--txt);
-                border-bottom: 3px solid var(--txt);
-
-                &.nested {
-                    border-bottom-color: var(--accent);
-                }
-            }
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/Toast.svelte b/frontend/app/src/components/Toast.svelte
deleted file mode 100644
index 9f007e1f12..0000000000
--- a/frontend/app/src/components/Toast.svelte
+++ /dev/null
@@ -1,138 +0,0 @@
-<script lang="ts">
-    import {
-        type ChatIdentifier,
-        iconSize,
-        localUpdates,
-        routeForChatIdentifier,
-        subscribe,
-    } from "@client";
-    import { navigate } from "@utils/navigation";
-    import { onMount } from "svelte";
-    import { _ } from "svelte-i18n";
-    import Bug from "svelte-material-icons/Bug.svelte";
-    import Close from "svelte-material-icons/Close.svelte";
-    import { sineIn } from "svelte/easing";
-    import { fly } from "svelte/transition";
-    import { i18nKey, interpolate } from "../i18n/i18n";
-    import { toastStore } from "../stores/toast";
-    import Tooltip from "./tooltip/Tooltip.svelte";
-    import Translatable from "./Translatable.svelte";
-
-    let reactiveResourceKey = $derived($toastStore?.resourceKey);
-
-    function report() {
-        if (
-            $toastStore &&
-            $toastStore.kind === "failure" &&
-            $toastStore.err !== undefined &&
-            $reactiveResourceKey !== undefined
-        ) {
-            const msg = interpolate($_, $reactiveResourceKey);
-            const withDetail = `${msg} (${$toastStore.err})`;
-            const chatId = {
-                kind: "channel",
-                communityId: "dgegb-daaaa-aaaar-arlhq-cai",
-                channelId: 2235218862,
-            } as ChatIdentifier;
-            navigate(routeForChatIdentifier("community", chatId));
-            localUpdates.draftMessages.setTextContent({ chatId }, withDetail);
-            toastStore.hideToast();
-        }
-    }
-
-    onMount(() => {
-        const unsubs = [
-            subscribe("showFailureToast", ({ resourceKey, err }) =>
-                toastStore.showFailureToast(resourceKey, err),
-            ),
-            subscribe("showSuccessToast", (resourceKey) =>
-                toastStore.showSuccessToast(resourceKey),
-            ),
-        ];
-        return () => {
-            unsubs.forEach((u) => u());
-        };
-    });
-</script>
-
-{#if $toastStore && $reactiveResourceKey}
-    <div class="toast" transition:fly={{ y: 200, duration: 200, easing: sineIn }}>
-        <div
-            class="message"
-            class:failure={$toastStore.kind === "failure"}
-            class:success={$toastStore.kind === "success"}>
-            <div class="text"><Translatable resourceKey={$reactiveResourceKey} /></div>
-            {#if $toastStore.kind === "failure"}
-                {#if $toastStore.err !== undefined}
-                    <Tooltip position="top" align="middle">
-                        <div class="report" onclick={report}>
-                            <Bug size={$iconSize} color={"var(--button-txt)"} />
-                        </div>
-                        {#snippet popupTemplate()}
-                            <Translatable resourceKey={i18nKey("reportBug")} />
-                        {/snippet}
-                    </Tooltip>
-                {/if}
-                <div class="close" onclick={toastStore.hideToast}>
-                    <Close size={$iconSize} color={"var(--button-txt)"} />
-                </div>
-            {/if}
-        </div>
-    </div>
-{/if}
-
-<style lang="scss">
-    .toast {
-        position: fixed;
-        bottom: $sp7;
-        width: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        @include z-index("toast");
-    }
-
-    .message {
-        transition: background 200ms ease-in-out;
-        background: var(--button-bg);
-        padding: $sp4;
-        width: 75%;
-        max-width: 800px;
-        margin: 0 $sp4;
-        display: flex;
-        gap: $sp4;
-        justify-content: center;
-        align-items: center;
-        color: var(--button-txt);
-        @include mobile() {
-            width: 100%;
-        }
-
-        @media (hover: hover) {
-            &:hover {
-                background: var(--button-hv);
-            }
-        }
-
-        &.failure {
-            background: var(--toast-failure-bg);
-            color: var(--toast-failure-txt);
-        }
-
-        .text {
-            text-align: center;
-            flex: auto;
-        }
-
-        &.success {
-            background: var(--toast-success-bg);
-            color: var(--toast-success-txt);
-        }
-
-        .close,
-        .report {
-            flex: 0 0 30px;
-            cursor: pointer;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/Translatable.svelte b/frontend/app/src/components/Translatable.svelte
deleted file mode 100644
index 99cf8c5350..0000000000
--- a/frontend/app/src/components/Translatable.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script lang="ts">
-    import { _ } from "svelte-i18n";
-    import { interpolate } from "../i18n/i18n";
-    import { translatable } from "../actions/translatable";
-    import type { ResourceKey } from "@client";
-
-    interface Props {
-        resourceKey: ResourceKey;
-    }
-
-    let { resourceKey }: Props = $props();
-</script>
-
-<span use:translatable={{ key: resourceKey }}>
-    {interpolate($_, resourceKey)}
-</span>
diff --git a/frontend/app/src/components/UpgradeBanner.svelte b/frontend/app/src/components/UpgradeBanner.svelte
deleted file mode 100644
index f39bcb0ab5..0000000000
--- a/frontend/app/src/components/UpgradeBanner.svelte
+++ /dev/null
@@ -1,115 +0,0 @@
-<script lang="ts">
-    import { OpenChat, Poller, Version } from "@client";
-    import { getContext, onDestroy } from "svelte";
-    import { i18nKey } from "../i18n/i18n";
-    import { activeVideoCall } from "../stores/video";
-    import Translatable from "./Translatable.svelte";
-
-    const VERSION_INTERVAL = 60 * 1000;
-    const client = getContext<OpenChat>("client");
-
-    let poller = new Poller(checkVersion, VERSION_INTERVAL);
-    // @ts-ignore
-    let clientVersion = Version.parse(window.OC_WEBSITE_VERSION);
-    let serverVersion = $state(clientVersion);
-    let countdown = $state(30);
-    let showBanner = $state(false);
-    let errorCount = 0;
-
-    onDestroy(() => poller.stop());
-
-    function checkVersion(): Promise<void> {
-        if (import.meta.env.OC_NODE_ENV !== "production" || $activeVideoCall !== undefined)
-            return Promise.resolve();
-        return getServerVersion().then((sv) => {
-            serverVersion = sv;
-            if (serverVersion.isGreaterThan(clientVersion)) {
-                poller.stop();
-                countdown = 30;
-                showBanner = true;
-                const interval = window.setInterval(() => {
-                    countdown = countdown - 1;
-                    if (countdown === 0) {
-                        window.clearInterval(interval);
-                        window.location.reload();
-                    }
-                }, 1000);
-            }
-        });
-    }
-
-    function getServerVersion(): Promise<Version> {
-        return fetch("/version", {
-            method: "get",
-            headers: {
-                "Content-Type": "application/json",
-            },
-        })
-            .then((res) => res.json())
-            .then((res) => {
-                client.logMessage("Server version: ", res);
-                errorCount = 0;
-                return Version.parse(res.version);
-            })
-            .catch((err) => {
-                errorCount += 1;
-                client.logError(`Unable to load server version ${errorCount} times`, err);
-                return clientVersion;
-            });
-    }
-
-    function reload(ev: Event) {
-        window.location.reload();
-        ev.preventDefault();
-    }
-</script>
-
-{#if showBanner}
-    <div class="upgrade-banner">
-        <div class="inner">
-            <span class="message"
-                ><Translatable resourceKey={i18nKey("updateRequired", { countdown })} /></span>
-            <span class="update-now">
-                <a href="/" onclick={reload}><Translatable resourceKey={i18nKey("updateNow")} /></a>
-            </span>
-        </div>
-        <div class="versions">
-            {clientVersion.toText()} -> {serverVersion.toText()}
-        </div>
-    </div>
-{/if}
-
-<style lang="scss">
-    .upgrade-banner {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        @include z-index("upgrade-banner");
-        background-color: var(--notificationBar-bg);
-        color: var(--notificationBar-txt);
-        padding: $sp3;
-        text-align: center;
-        @include box-shadow(2);
-    }
-
-    .inner {
-        max-width: 1200px;
-        margin: 0 auto;
-    }
-
-    .update-now {
-        margin-left: $sp4;
-    }
-
-    a {
-        text-decoration: underline;
-        text-underline-offset: $sp1;
-        cursor: pointer;
-        color: inherit;
-    }
-
-    .versions {
-        @include font(light, normal, fs-70);
-    }
-</style>
diff --git a/frontend/app/src/components/UsernameInput.svelte b/frontend/app/src/components/UsernameInput.svelte
deleted file mode 100644
index a7f7e327fd..0000000000
--- a/frontend/app/src/components/UsernameInput.svelte
+++ /dev/null
@@ -1,106 +0,0 @@
-<script lang="ts">
-    import type { OpenChat } from "@client";
-    import { onMount } from "svelte";
-    import { i18nKey } from "../i18n/i18n";
-    import Input from "./Input.svelte";
-
-    const MIN_EXTANT_USERNAME_LENGTH = 3;
-    const MAX_USERNAME_LENGTH = 20;
-
-    interface Props {
-        client: OpenChat;
-        originalUsername: string;
-        username: string;
-        usernameValid: boolean;
-        error?: string | undefined;
-        checking?: boolean;
-        disabled?: boolean;
-        autofocus?: boolean;
-        children?: import("svelte").Snippet;
-    }
-
-    let {
-        client,
-        originalUsername,
-        username = $bindable(),
-        usernameValid = $bindable(),
-        error = $bindable(undefined),
-        checking = $bindable(false),
-        disabled = false,
-        autofocus = false,
-        children,
-    }: Props = $props();
-
-    error;
-
-    let timer: number | undefined = undefined;
-    let currentPromise: Promise<unknown> | undefined;
-
-    let invalid = $derived(originalUsername !== username && !usernameValid && !checking);
-
-    onMount(() => {
-        username = originalUsername;
-        usernameValid = originalUsername?.length > 0;
-    });
-
-    function checkUsername(value: string) {
-        const promise = client
-            .checkUsername(value, false)
-            .then((resp) => {
-                if (promise !== currentPromise) {
-                    return;
-                }
-
-                checking = false;
-
-                if (value.toLowerCase() === originalUsername.toLowerCase() || resp === "success") {
-                    usernameValid = true;
-                    error = undefined;
-                    return;
-                }
-
-                if (resp === "username_taken") {
-                    error = "register.usernameTaken";
-                }
-            })
-            .catch((err) => {
-                error = "register.errorCheckingUsername";
-                client.logError("Unable to check username: ", err);
-                checking = false;
-            });
-
-        currentPromise = promise;
-    }
-
-    function onChange(val: string | number | bigint) {
-        if (typeof val !== "string") return;
-
-        username = val;
-        usernameValid = false;
-        error = undefined;
-
-        window.clearTimeout(timer);
-        checking = false;
-
-        if (
-            client.isUsernameValid(username) ||
-            username.toLowerCase() === originalUsername.toLowerCase()
-        ) {
-            checking = true;
-            timer = window.setTimeout(() => checkUsername(username), 350);
-        }
-    }
-</script>
-
-<Input
-    {onChange}
-    value={originalUsername}
-    {disabled}
-    {invalid}
-    {autofocus}
-    minlength={MIN_EXTANT_USERNAME_LENGTH}
-    maxlength={MAX_USERNAME_LENGTH}
-    countdown
-    placeholder={i18nKey("register.enterUsername")}>
-    {@render children?.()}
-</Input>
diff --git a/frontend/app/src/components/bots/AutoBotBuilder.svelte b/frontend/app/src/components/bots/AutoBotBuilder.svelte
deleted file mode 100644
index 4b90567428..0000000000
--- a/frontend/app/src/components/bots/AutoBotBuilder.svelte
+++ /dev/null
@@ -1,394 +0,0 @@
-<script lang="ts">
-    import {
-        allUsersStore,
-        debouncedDerived,
-        iconSize,
-        OpenChat,
-        validateBot,
-        ValidationErrors,
-        validEndpoint,
-        type BotDefinition,
-        type CommandDefinition,
-        type ExternalBot,
-        type ValidationErrorMessages,
-    } from "@client";
-    import { getContext } from "svelte";
-    import Reload from "svelte-material-icons/Reload.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { toastStore } from "../../stores/toast";
-    import EditableAvatar from "../EditableAvatar.svelte";
-    import ErrorMessage from "../ErrorMessage.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import SingleUserSelector from "../home/SingleUserSelector.svelte";
-    import HoverIcon from "../HoverIcon.svelte";
-    import Legend from "../Legend.svelte";
-    import Tabs, { type Tab } from "../Tabs.svelte";
-    import Translatable from "../Translatable.svelte";
-    import BotCommands from "./BotCommands.svelte";
-    import BotPermissionViewer from "./BotPermissionViewer.svelte";
-    import CommandViewer from "./CommandViewer.svelte";
-    import InstallationLocationSelector from "./InstallationLocationSelector.svelte";
-    import ValidatingInput from "./ValidatingInput.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        valid: boolean;
-        schemaLoaded: boolean;
-        candidate: ExternalBot;
-        nameDirty: boolean;
-        principal: string;
-        mode: "register" | "update";
-    }
-
-    let {
-        valid = $bindable(),
-        schemaLoaded = $bindable(),
-        principal = $bindable(),
-        candidate = $bindable(),
-        nameDirty,
-        mode,
-    }: Props = $props();
-    let selectedCommand = $state<CommandDefinition | undefined>(undefined);
-    let selectedCommandIndex = $state<number | undefined>(undefined);
-    let debug = $state(false);
-    let schemaLoading = $state(false);
-    let showNext = $derived(
-        selectedCommandIndex !== undefined &&
-            selectedCommandIndex < candidate.definition.commands.length - 1,
-    );
-    let showPrev = $derived(selectedCommandIndex !== undefined && selectedCommandIndex > 0);
-
-    let errors = $derived.by(
-        debouncedDerived(
-            () => [$state.snapshot(candidate), principal],
-            async () => {
-                const errors = validateBot(principal, candidate, mode);
-                if (errors.get("bot_name").length == 0 && nameDirty) {
-                    errors.addErrors("bot_name", await checkUsername(candidate.name));
-                }
-                return errors;
-            },
-            300,
-            new ValidationErrors(),
-        ),
-    );
-
-    function traverseCommand(add: number) {
-        if (selectedCommandIndex === undefined) return;
-
-        selectedCommandIndex += add;
-        selectedCommand = candidate.definition.commands[selectedCommandIndex];
-        if (selectedCommand === undefined) {
-            selectedCommandIndex = undefined;
-        }
-    }
-
-    function nextCommand() {
-        traverseCommand(1);
-    }
-
-    function previousCommand() {
-        traverseCommand(-1);
-    }
-
-    function checkUsername(value: string): Promise<ValidationErrorMessages> {
-        return client
-            .checkUsername(value, true)
-            .then((resp) => {
-                if (resp === "success") {
-                    return [];
-                }
-
-                if (resp === "username_taken") {
-                    return [i18nKey("bots.builder.errors.duplicateName")];
-                }
-
-                return [i18nKey("bots.builder.errors.botNameInvalid")];
-            })
-            .catch((_) => {
-                return [i18nKey("bots.builder.errors.nameCheckError")];
-            });
-    }
-
-    // TODO we will probably need to come back to this to flesh out edit mode (is the bot dirty etc)
-    // let editing = $derived(bot !== undefined);
-
-    $effect(() => {
-        const isValid = errors.size === 0 && schemaLoaded;
-        if (isValid !== valid) {
-            valid = isValid;
-        }
-    });
-
-    function botAvatarSelected(detail: { url: string; data: Uint8Array }) {
-        candidate.avatarUrl = detail.url;
-    }
-
-    function onSubmit(e: Event) {
-        e.preventDefault();
-    }
-
-    function onSelectCommand(cmd: CommandDefinition, index: number) {
-        selectedCommand = cmd;
-        selectedCommandIndex = index;
-    }
-
-    function endpointChanged() {
-        schemaLoaded = false;
-        candidate.definition = {
-            kind: "bot_definition",
-            description: "",
-            commands: [],
-            autonomousConfig: undefined,
-            defaultSubscriptions: undefined,
-            dataEncoding: undefined,
-            restrictedLocations: undefined,
-        };
-    }
-
-    function loadDefinition() {
-        if (!schemaLoading && validEndpoint(candidate.endpoint)) {
-            schemaLoading = true;
-            schemaLoaded = false;
-            client
-                .getBotDefinition(candidate.endpoint)
-                .then((resp) => {
-                    if (resp.kind === "bot_definition") {
-                        candidate.definition = resp;
-                        schemaLoaded = true;
-                    } else {
-                        toastStore.showFailureToast(i18nKey(`${JSON.stringify(resp.error)}`));
-                    }
-                })
-                .finally(() => (schemaLoading = false));
-        }
-    }
-
-    function getTabs(definition: BotDefinition): Tab[] {
-        const tabs: Tab[] = [];
-        if (definition.commands.length > 0) {
-            tabs.push({ title: i18nKey("bots.builder.commandsLabel"), snippet: commands });
-        }
-        if (definition.autonomousConfig !== undefined) {
-            tabs.push({
-                title: i18nKey("bots.builder.autonomousPermissionsLabel"),
-                snippet: autonomousPermissions,
-            });
-        }
-        return tabs;
-    }
-</script>
-
-{#snippet configtabs()}
-    {@const tabs = getTabs(candidate.definition)}
-    {#if tabs.length === 1}
-        <Legend label={tabs[0].title}></Legend>
-        {@render tabs[0].snippet()}
-    {:else}
-        <Tabs {tabs}></Tabs>
-    {/if}
-{/snippet}
-
-{#snippet commands()}
-    {#if candidate.definition.commands.length > 0}
-        <BotCommands {errors} commands={candidate.definition.commands} onClick={onSelectCommand} />
-    {:else}
-        <div class="smallprint">
-            <Translatable resourceKey={i18nKey("bots.builder.noCommands")}></Translatable>
-        </div>
-    {/if}
-{/snippet}
-
-{#snippet autonomousPermissions()}
-    {#if candidate.definition.autonomousConfig !== undefined}
-        <BotPermissionViewer
-            nested
-            permissions={candidate.definition.autonomousConfig.permissions} />
-    {:else}
-        <div class="smallprint">
-            <Translatable resourceKey={i18nKey("bots.builder.noAutonomousConfig")}></Translatable>
-        </div>
-    {/if}
-{/snippet}
-
-{#if selectedCommand !== undefined && selectedCommandIndex !== undefined}
-    <CommandViewer
-        onClose={() => (selectedCommand = undefined)}
-        errorPath={`command_${selectedCommandIndex}`}
-        onNext={showNext ? nextCommand : undefined}
-        onPrevious={showPrev ? previousCommand : undefined}
-        {errors}
-        command={selectedCommand}></CommandViewer>
-{/if}
-
-<form onsubmit={onSubmit} class="bot">
-    <Legend label={i18nKey("bots.builder.iconLabel")} />
-    <div class="photo">
-        <EditableAvatar
-            overlayIcon
-            size={"medium"}
-            image={candidate.avatarUrl}
-            onImageSelected={botAvatarSelected} />
-    </div>
-
-    {#if candidate.registrationStatus.kind === "private" && mode === "register"}
-        <InstallationLocationSelector bind:location={candidate.registrationStatus.location} />
-    {/if}
-
-    <Legend
-        required={mode === "register"}
-        label={i18nKey("bots.builder.principalLabel")}
-        rules={i18nKey("bots.builder.principalRules")}></Legend>
-    <ValidatingInput
-        autofocus
-        minlength={3}
-        maxlength={100}
-        invalid={errors.has("bot_principal")}
-        placeholder={mode === "update"
-            ? i18nKey("bots.builder.editPrincipalPlaceholder")
-            : i18nKey("bots.builder.principalPlaceholder")}
-        error={errors.get("bot_principal")}
-        bind:value={principal}>
-    </ValidatingInput>
-
-    {#if mode === "update"}
-        <Legend
-            required
-            label={i18nKey("bots.builder.ownerLabel")}
-            rules={i18nKey("bots.builder.ownerRules")}></Legend>
-        <SingleUserSelector
-            invalid={errors.has("bot_owner")}
-            error={errors.get("bot_owner")}
-            border={false}
-            direction={"up"}
-            mentionSelf
-            onUserSelected={(user) => (candidate.ownerId = user.userId)}
-            onUserRemoved={() => (candidate.ownerId = "")}
-            selectedReceiver={$allUsersStore.get(candidate.ownerId)}
-            placeholder={"bots.builder.ownerLabel"}
-            autofocus={false} />
-    {/if}
-
-    {#if mode === "register"}
-        <Legend
-            required
-            label={i18nKey("bots.builder.nameLabel")}
-            rules={i18nKey("bots.builder.nameRules")}></Legend>
-        <ValidatingInput
-            minlength={3}
-            maxlength={25}
-            invalid={errors.has("bot_name")}
-            placeholder={i18nKey("bots.builder.namePlaceholder")}
-            error={errors.get("bot_name")}
-            bind:value={candidate.name}>
-        </ValidatingInput>
-    {/if}
-
-    <Legend
-        label={i18nKey("bots.builder.endpointLabel")}
-        required
-        rules={i18nKey("bots.builder.endpointRules")}></Legend>
-    <div class="endpoint" class:endpoint-error={errors.has("bot_endpoint")}>
-        <div class="endpoint-input">
-            <ValidatingInput
-                minlength={3}
-                maxlength={200}
-                invalid={errors.has("bot_endpoint")}
-                error={errors.get("bot_endpoint")}
-                onInput={endpointChanged}
-                onEnter={loadDefinition}
-                placeholder={i18nKey("https://my_openchat_bot")}
-                bind:value={candidate.endpoint} />
-        </div>
-        <div class="icon">
-            {#if !errors.has("bot_endpoint")}
-                <HoverIcon title={"load definition"} onclick={loadDefinition}>
-                    <Reload
-                        size={$iconSize}
-                        color={schemaLoaded ? "var(--icon-txt)" : "var(--accent)"}></Reload>
-                </HoverIcon>
-            {/if}
-        </div>
-    </div>
-
-    {#if schemaLoaded}
-        <Legend label={i18nKey("bots.builder.descLabel")}></Legend>
-        <div class="desc">
-            <Markdown inline={false} text={candidate.definition.description} />
-        </div>
-
-        {@render configtabs()}
-
-        <div class="error">
-            {#if errors.has("duplicate_commands")}
-                <ErrorMessage>
-                    <Translatable resourceKey={errors.get("duplicate_commands")[0]}></Translatable
-                    ></ErrorMessage>
-            {/if}
-            {#if errors.has("no_commands")}
-                <ErrorMessage>
-                    <Translatable resourceKey={errors.get("no_commands")[0]}></Translatable
-                    ></ErrorMessage>
-            {/if}
-        </div>
-    {/if}
-
-    {#if debug}
-        <pre class="debug">
-            {JSON.stringify(candidate, null, 4)}
-        </pre>
-        <pre>{valid}</pre>
-    {/if}
-</form>
-
-<style lang="scss">
-    .debug {
-        @include font(book, normal, fs-80);
-    }
-    .photo {
-        max-width: toRem(100);
-        margin-bottom: $sp3;
-    }
-
-    .error {
-        :global(.error) {
-            margin-top: $sp3;
-        }
-    }
-
-    .endpoint {
-        display: flex;
-        align-items: center;
-        gap: $sp3;
-        margin-bottom: $sp3;
-
-        &.endpoint-error {
-            margin-bottom: 22px;
-        }
-
-        :global(.input-wrapper) {
-            margin-bottom: 0;
-        }
-
-        .endpoint-input {
-            flex: 3;
-        }
-
-        .icon {
-            flex: 0 0 40px;
-        }
-    }
-
-    .smallprint {
-        @include font(light, normal, fs-80);
-        color: var(--txt-light);
-    }
-
-    .desc {
-        @include input();
-        max-height: 180px;
-        overflow: auto;
-        margin-bottom: $sp3;
-    }
-</style>
diff --git a/frontend/app/src/components/bots/BotBuilderModal.svelte b/frontend/app/src/components/bots/BotBuilderModal.svelte
deleted file mode 100644
index 3352ceb6f7..0000000000
--- a/frontend/app/src/components/bots/BotBuilderModal.svelte
+++ /dev/null
@@ -1,191 +0,0 @@
-<script lang="ts">
-    import {
-        currentUserIdStore,
-        emptyBotInstance,
-        mobileWidth,
-        OpenChat,
-        type ExternalBot,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { toastStore } from "../../stores/toast";
-    import Button from "../Button.svelte";
-    import ButtonGroup from "../ButtonGroup.svelte";
-    import FancyLoader from "../icons/FancyLoader.svelte";
-    import ModalContent from "../ModalContent.svelte";
-    import Translatable from "../Translatable.svelte";
-    import BotBuilder from "./AutoBotBuilder.svelte";
-    import ChooseBot from "./ChooseBot.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        onClose: () => void;
-        mode: "register" | "update" | "remove";
-    }
-
-    let { onClose, mode = "register" }: Props = $props();
-
-    let principal = $state("");
-    let valid = $state(false);
-    let schemaLoaded = $state(false);
-    let busy = $state(false);
-    let step: "choose" | "edit" = $state(
-        mode === "update" || mode === "remove" ? "choose" : "edit",
-    );
-
-    let botState = $state({
-        original: emptyBotInstance($currentUserIdStore),
-        current: emptyBotInstance($currentUserIdStore),
-    });
-
-    let ownerDirty = $derived(botState.original.ownerId !== botState.current.ownerId);
-    let nameDirty = $derived(botState.original.name !== botState.current.name);
-    let avatarDirty = $derived(botState.original.avatarUrl !== botState.current.avatarUrl);
-    let endpointDirty = $derived(botState.original.endpoint !== botState.current.endpoint);
-    // let dirty = $derived(ownerDirty || nameDirty || avatarDirty || endpointDirty);
-
-    function register() {
-        if (botState.current !== undefined && valid) {
-            busy = true;
-            client
-                .registerBot(principal, botState.current)
-                .then((success) => {
-                    if (!success) {
-                        toastStore.showFailureToast(i18nKey("Unable to register bot"));
-                    } else {
-                        console.log("Bot registered");
-                        onClose();
-                    }
-                })
-                .finally(() => (busy = false));
-        }
-    }
-
-    function update() {
-        if (botState.current !== undefined && valid) {
-            busy = true;
-            const { id, ownerId, avatarUrl, endpoint, definition } = $state.snapshot(
-                botState.current,
-            );
-            client
-                .updateRegisteredBot(
-                    id,
-                    principal !== "" ? principal : undefined,
-                    ownerDirty ? ownerId : undefined,
-                    avatarDirty ? avatarUrl : undefined,
-                    endpointDirty ? endpoint : undefined,
-                    definition,
-                )
-                .then((success) => {
-                    if (!success) {
-                        toastStore.showFailureToast(i18nKey("Unable to register test bot"));
-                    } else {
-                        console.log("Bot registered");
-                        onClose();
-                    }
-                })
-                .finally(() => (busy = false));
-        }
-    }
-
-    function remove(id: string) {
-        busy = true;
-        client
-            .removeBot(id)
-            .then((success) => {
-                if (!success) {
-                    toastStore.showFailureToast(i18nKey("Unable to remove bot"));
-                } else {
-                    console.log("Bot removed");
-                    onClose();
-                }
-            })
-            .finally(() => (busy = false));
-    }
-
-    function selectBot(bot: ExternalBot) {
-        if (bot.ownerId === $currentUserIdStore) {
-            botState.original = bot;
-            botState.current = structuredClone(bot);
-            if (mode === "update") {
-                step = "edit";
-            } else if (mode === "remove") {
-                remove(bot.id);
-            }
-        }
-    }
-
-    let titleKey = $derived.by(() => {
-        switch (mode) {
-            case "register":
-                return i18nKey("bots.builder.title");
-            case "update":
-                return step === "choose"
-                    ? i18nKey("bots.update_bot.select")
-                    : i18nKey("bots.update_bot.title", { name: botState.current.name });
-            case "remove":
-                return i18nKey("bots.update_bot.remove");
-        }
-    });
-</script>
-
-<ModalContent {onClose}>
-    {#snippet header()}
-        <div class="header">
-            <Translatable resourceKey={titleKey}></Translatable>
-        </div>
-    {/snippet}
-    {#snippet body()}
-        <div class="body">
-            {#if step === "choose"}
-                {#if !busy && (mode === "update" || mode === "remove")}
-                    <ChooseBot ownedOnly onSelect={selectBot} />
-                {/if}
-                {#if mode === "remove" && busy}
-                    <div class="loader">
-                        <FancyLoader />
-                    </div>
-                {/if}
-            {:else if step === "edit" && botState.current !== undefined && mode !== "remove"}
-                <BotBuilder
-                    {nameDirty}
-                    {mode}
-                    bind:candidate={botState.current}
-                    bind:schemaLoaded
-                    bind:valid
-                    bind:principal />
-            {/if}
-        </div>
-    {/snippet}
-    {#snippet footer()}
-        <div class="footer">
-            <ButtonGroup>
-                <Button secondary small={!$mobileWidth} tiny={$mobileWidth} onClick={onClose}>
-                    <Translatable resourceKey={i18nKey("cancel")} />
-                </Button>
-                {#if mode !== "remove"}
-                    <Button
-                        onClick={mode === "update" ? update : register}
-                        disabled={!valid || busy}
-                        loading={busy}
-                        small={!$mobileWidth}
-                        tiny={$mobileWidth}>
-                        <Translatable
-                            resourceKey={mode === "update"
-                                ? i18nKey("bots.update_bot.action")
-                                : i18nKey("bots.add.action")} />
-                    </Button>
-                {/if}
-            </ButtonGroup>
-        </div>
-    {/snippet}
-</ModalContent>
-
-<style lang="scss">
-    .loader {
-        width: toRem(80);
-        height: toRem(80);
-        margin: auto;
-    }
-</style>
diff --git a/frontend/app/src/components/bots/BotExplorer.svelte b/frontend/app/src/components/bots/BotExplorer.svelte
deleted file mode 100644
index c3e4a13573..0000000000
--- a/frontend/app/src/components/bots/BotExplorer.svelte
+++ /dev/null
@@ -1,88 +0,0 @@
-<script lang="ts">
-    import {
-        i18nKey,
-        type BotInstallationLocation,
-        type BotMatch as BotMatchType,
-        type ExternalBotLike,
-        type OpenChat,
-    } from "@client";
-    import { getContext, onMount } from "svelte";
-    import { botSearchState } from "../../stores/search.svelte";
-    import Search from "../Search.svelte";
-    import BotProperties from "./install/BotProperties.svelte";
-
-    const client = getContext<OpenChat>("client");
-    const PAGE_SIZE = 50;
-
-    interface Props {
-        location?: BotInstallationLocation;
-        onSelect: (match: ExternalBotLike | undefined) => void;
-        fill?: boolean;
-        maxHeight?: string;
-        installingBot?: BotMatchType | undefined;
-        excludeInstalled?: boolean;
-    }
-
-    let {
-        location,
-        onSelect,
-        fill = false,
-        maxHeight,
-        installingBot,
-        excludeInstalled,
-    }: Props = $props();
-
-    function onSearchEntered(reset = false) {
-        if (reset) {
-            botSearchState.reset();
-        } else {
-            botSearchState.nextPage();
-        }
-        console.log("Search entered: ", botSearchState.term);
-        client
-            .exploreBots(
-                botSearchState.term === "" ? undefined : botSearchState.term,
-                botSearchState.index,
-                PAGE_SIZE,
-                location,
-                excludeInstalled ?? false,
-            )
-            .then((results) => {
-                console.log("Results: ", results);
-                if (results.kind === "success") {
-                    if (reset) {
-                        botSearchState.results = results.matches;
-                    } else {
-                        botSearchState.appendResults(results.matches);
-                    }
-                    botSearchState.total = results.total;
-                }
-            });
-    }
-
-    onMount(() => onSearchEntered(true));
-</script>
-
-<Search
-    {fill}
-    onPerformSearch={() => onSearchEntered(true)}
-    searching={false}
-    bind:searchTerm={botSearchState.term}
-    placeholder={i18nKey("search")} />
-
-<div class="matches" style={maxHeight ? `max-height: ${maxHeight}` : ""}>
-    {#each botSearchState.results as match}
-        <BotProperties
-            showAvatar
-            padded
-            installing={match === installingBot}
-            onClick={onSelect}
-            bot={match} />
-    {/each}
-</div>
-
-<style lang="scss">
-    .matches {
-        @include nice-scrollbar();
-    }
-</style>
diff --git a/frontend/app/src/components/bots/BotMember.svelte b/frontend/app/src/components/bots/BotMember.svelte
deleted file mode 100644
index 5403aaf51a..0000000000
--- a/frontend/app/src/components/bots/BotMember.svelte
+++ /dev/null
@@ -1,149 +0,0 @@
-<script lang="ts">
-    import { iconSize, type CommunitySummary, type MultiUserChat } from "@client";
-    import { type ExternalBot, type GrantedBotPermissions } from "@shared";
-    import ChevronDown from "svelte-material-icons/ChevronDown.svelte";
-    import DeleteOutline from "svelte-material-icons/DeleteOutline.svelte";
-    import PencilOutline from "svelte-material-icons/PencilOutline.svelte";
-    import TextBoxOutline from "svelte-material-icons/TextBoxOutline.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import FilteredUsername from "@shared_components/FilteredUsername.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import BotBadge from "../home/profile/BotBadge.svelte";
-    import HoverIcon from "../HoverIcon.svelte";
-    import Menu from "../Menu.svelte";
-    import MenuIcon from "../MenuIcon.svelte";
-    import MenuItem from "../MenuItem.svelte";
-    import Translatable from "../Translatable.svelte";
-    import BotAvatar from "./BotAvatar.svelte";
-    import WithBotManagement from "./WithBotManagement.svelte";
-
-    interface Props {
-        collection: CommunitySummary | MultiUserChat;
-        bot: ExternalBot;
-        canManage: boolean;
-        searchTerm: string;
-        grantedPermissions: GrantedBotPermissions;
-    }
-
-    let { collection, bot, canManage, searchTerm, grantedPermissions }: Props = $props();
-</script>
-
-<WithBotManagement {collection} {bot} {canManage} {grantedPermissions}>
-    {#snippet contents({ removeBot, reviewPermissions, viewBotDetails })}
-        <div class="bot_member" role="button">
-            <span class="avatar">
-                <BotAvatar {bot} />
-            </span>
-            <div class="details">
-                <div class="bot_name">
-                    <h4>
-                        <FilteredUsername {searchTerm} username={bot.name} />
-                        <BotBadge bot />
-                    </h4>
-                </div>
-                <div class="bot_description">
-                    <Markdown inline={false} suppressLinks text={bot.definition.description} />
-                </div>
-            </div>
-            <MenuIcon position={"bottom"} align={"end"}>
-                {#snippet menuIcon()}
-                    <HoverIcon>
-                        <ChevronDown size={$iconSize} color={"var(--icon-txt)"} />
-                    </HoverIcon>
-                {/snippet}
-                {#snippet menuItems()}
-                    <Menu>
-                        {#if canManage}
-                            <MenuItem onclick={() => removeBot()}>
-                                {#snippet icon()}
-                                    <DeleteOutline
-                                        size={$iconSize}
-                                        color={"var(--icon-inverted-txt)"} />
-                                {/snippet}
-                                {#snippet text()}
-                                    <Translatable resourceKey={i18nKey("bots.manage.remove")} />
-                                {/snippet}
-                            </MenuItem>
-                            {#if bot.definition.commands.length > 0 || bot.definition.autonomousConfig !== undefined}
-                                <MenuItem onclick={() => reviewPermissions()}>
-                                    {#snippet icon()}
-                                        <PencilOutline
-                                            size={$iconSize}
-                                            color={"var(--icon-inverted-txt)"} />
-                                    {/snippet}
-                                    {#snippet text()}
-                                        <Translatable resourceKey={i18nKey("bots.manage.review")} />
-                                    {/snippet}
-                                </MenuItem>
-                            {/if}
-                        {/if}
-                        <MenuItem onclick={() => viewBotDetails()}>
-                            {#snippet icon()}
-                                <TextBoxOutline
-                                    size={$iconSize}
-                                    color={"var(--icon-inverted-txt)"} />
-                            {/snippet}
-                            {#snippet text()}
-                                <Translatable resourceKey={i18nKey("bots.manage.view")} />
-                            {/snippet}
-                        </MenuItem>
-                    </Menu>
-                {/snippet}
-            </MenuIcon>
-        </div>
-    {/snippet}
-</WithBotManagement>
-
-<style lang="scss">
-    .bot_member {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding: $sp4;
-        transition:
-            background-color ease-in-out 100ms,
-            border-color ease-in-out 100ms;
-        gap: 12px;
-
-        @media (hover: hover) {
-            &:hover {
-                background-color: var(--members-hv);
-            }
-        }
-
-        @include mobile() {
-            padding: $sp3 toRem(10);
-        }
-    }
-    .avatar {
-        flex: 0 0 50px;
-        position: relative;
-    }
-
-    .details {
-        display: flex;
-        flex: 1;
-        flex-direction: column;
-        @include font(medium, normal, fs-100);
-        gap: $sp2;
-
-        .bot_name {
-            display: flex;
-            flex: 1;
-            align-items: center;
-            @include ellipsis();
-
-            h4 {
-                display: flex;
-                align-items: center;
-                gap: $sp2;
-            }
-        }
-
-        .bot_description {
-            font-weight: 200;
-            color: var(--txt-light);
-            @include clamp(2);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/bots/BotMessageContext.svelte b/frontend/app/src/components/bots/BotMessageContext.svelte
deleted file mode 100644
index 92db428e25..0000000000
--- a/frontend/app/src/components/bots/BotMessageContext.svelte
+++ /dev/null
@@ -1,142 +0,0 @@
-<script lang="ts">
-    import {
-        allUsersStore,
-        AvatarSize,
-        mobileWidth,
-        OpenChat,
-        type CommandArg,
-    } from "@client";
-    import type { BotContextCommand } from "@shared";
-    import { getContext } from "svelte";
-    import CogOutline from "svelte-material-icons/CogOutline.svelte";
-    import Avatar from "../Avatar.svelte";
-    import Typing from "@shared_components/Typing.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import Tooltip from "../tooltip/Tooltip.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        botCommand: BotContextCommand;
-        botName: string;
-        finalised: boolean;
-    }
-
-    let { botCommand, finalised }: Props = $props();
-    let MAX_COMMAND_LENGTH = $derived($mobileWidth ? 50 : 150);
-    let paramValues = $derived(botCommand.args.map(paramValue));
-    let paramsLength = $derived(paramValues.reduce((total, p) => total + p.length, 0));
-    let paramMode: "truncated" | "full" = $derived(
-        paramsLength > MAX_COMMAND_LENGTH ? "truncated" : "full",
-    );
-    let text = $derived.by(() => {
-        if (paramMode === "truncated") {
-            return `@UserId(${botCommand.initiator}) used **/${botCommand.name}**${
-                botCommand.args.length > 0 ? " with " : ""
-            }`;
-        } else {
-            return `@UserId(${botCommand.initiator}) used **/${botCommand.name}**`;
-        }
-    });
-    let user = $derived($allUsersStore.get(botCommand.initiator));
-
-    function paramValue(param: CommandArg): string {
-        switch (param.kind) {
-            case "boolean":
-                return param.value?.toString() ?? "false";
-            case "integer":
-            case "decimal":
-                return param.value?.toString() ?? "null";
-            case "string":
-                return param.value ?? "null";
-            case "user":
-                return param.userId ? $allUsersStore.get(param.userId)?.username ?? "null" : "null";
-            case "dateTime":
-                return param.value
-                    ? client.toDatetimeString(new Date(Number(param.value)))
-                    : "null";
-        }
-    }
-</script>
-
-<div class="bot-context">
-    {#if user}
-        <Avatar url={client.userAvatarUrl(user)} userId={user.userId} size={AvatarSize.Tiny} />
-    {/if}
-    <Markdown {text} />
-    {#if botCommand.args.length > 0}
-        {#if paramMode === "truncated"}
-            <Tooltip position="right" align="middle">
-                <div class="cog">
-                    <CogOutline size={"1.2em"} color={"var(--icon-txt)"} />
-                </div>
-                {#snippet popupTemplate()}
-                    <div class="command-params">
-                        {#each botCommand.args as param}
-                            <div class="param">
-                                <div class="name">{param.name}:</div>
-                                <div class="value">{paramValue(param)}</div>
-                            </div>
-                        {/each}
-                    </div>
-                {/snippet}
-            </Tooltip>
-        {:else}
-            {#each paramValues as param}
-                <div class="inline-param">{param}</div>
-            {/each}
-        {/if}
-    {/if}
-    {#if !finalised}
-        <Typing />
-    {/if}
-</div>
-
-<style lang="scss">
-    .bot-context {
-        @include font(light, normal, fs-70);
-        color: var(--txt-light);
-        display: flex;
-        gap: $sp2;
-        align-items: center;
-        @include ellipsis();
-
-        :global(.markdown-wrapper) {
-            @include ellipsis();
-            flex-shrink: 0;
-        }
-
-        :global(.avatar.tiny) {
-            flex: 0 0 toRem(20);
-        }
-
-        .cog {
-            display: flex;
-        }
-    }
-
-    .inline-param {
-        // background-color: #efefef;
-        padding: 0 $sp2;
-        border-radius: $sp2;
-        border: 1px solid var(--bd);
-        @include font(light, normal, fs-60);
-    }
-
-    :global(.command-params) {
-        word-wrap: unset;
-
-        .param {
-            display: flex;
-            align-items: start;
-            text-align: left;
-            gap: $sp2;
-            flex-wrap: nowrap;
-            flex-direction: column;
-
-            .value {
-                @include font(bold, normal, fs-50);
-            }
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/bots/BotPermissionViewer.svelte b/frontend/app/src/components/bots/BotPermissionViewer.svelte
deleted file mode 100644
index 5fd185ba37..0000000000
--- a/frontend/app/src/components/bots/BotPermissionViewer.svelte
+++ /dev/null
@@ -1,94 +0,0 @@
-<script lang="ts">
-    import Check from "svelte-material-icons/Check.svelte";
-    import Minus from "svelte-material-icons/Minus.svelte";
-    import {
-        botChatPermissionList,
-        botCommunityPermissionList,
-        type ExternalBotPermissions,
-        messagePermissionsList,
-        type ResourceKey,
-    } from "@client";
-    import { i18nKey } from "../../i18n/i18n";
-    import Legend from "../Legend.svelte";
-    import Translatable from "../Translatable.svelte";
-    import Tabs from "../Tabs.svelte";
-
-    interface Props {
-        permissions: ExternalBotPermissions;
-        title?: ResourceKey;
-        nested?: boolean;
-    }
-
-    let { permissions, title, nested = false }: Props = $props();
-</script>
-
-{#snippet check(label: ResourceKey, requested: boolean)}
-    <div class="perm" class:disabled={!requested}>
-        <div class="check">
-            {#if requested}
-                <Check size={"1em"} color={"var(--success)"} />
-            {:else}
-                <Minus size={"1em"} color={"var(--txt-light)"} />
-            {/if}
-        </div>
-        <div class="label">
-            <Translatable resourceKey={label}></Translatable>
-        </div>
-    </div>
-{/snippet}
-
-{#snippet chatTab()}
-    {#each botChatPermissionList as perm}
-        {@render check(i18nKey(`permissions.${perm}`), permissions.chatPermissions.includes(perm))}
-    {/each}
-{/snippet}
-{#snippet communityTab()}
-    {#each botCommunityPermissionList as perm}
-        {@render check(
-            i18nKey(`permissions.${perm}`),
-            permissions.communityPermissions.includes(perm),
-        )}
-    {/each}
-{/snippet}
-{#snippet messageTab()}
-    {#each messagePermissionsList as perm}
-        {@render check(
-            i18nKey(`permissions.messagePermissions.${perm}`),
-            permissions.messagePermissions.includes(perm),
-        )}
-    {/each}
-{/snippet}
-
-{#if title !== undefined}
-    <Legend label={title}></Legend>
-{/if}
-<Tabs
-    {nested}
-    initialIndex={2}
-    tabs={[
-        {
-            title: i18nKey("bots.builder.permScopeCommunity"),
-            snippet: communityTab,
-        },
-        {
-            title: i18nKey("bots.builder.permScopeChat"),
-            snippet: chatTab,
-        },
-        {
-            title: i18nKey("bots.builder.permScopeMessage"),
-            snippet: messageTab,
-        },
-    ]}></Tabs>
-
-<style lang="scss">
-    .perm {
-        display: flex;
-        gap: $sp3;
-        align-items: center;
-
-        &.disabled {
-            @include font(light, normal, fs-100);
-            color: var(--txt-light);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/bots/BotPublisher.svelte b/frontend/app/src/components/bots/BotPublisher.svelte
deleted file mode 100644
index 14b22d8568..0000000000
--- a/frontend/app/src/components/bots/BotPublisher.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script lang="ts">
-    import { i18nKey, type ExternalBot } from "@client";
-    import Legend from "../Legend.svelte";
-    import ChooseBot from "./ChooseBot.svelte";
-    import BotProperties from "./install/BotProperties.svelte";
-
-    interface Props {
-        selected: ExternalBot | undefined;
-    }
-
-    let { selected = $bindable() }: Props = $props();
-
-    function select(bot: ExternalBot) {
-        selected = bot;
-    }
-</script>
-
-{#if selected === undefined}
-    <Legend large label={i18nKey("proposal.maker.chooseBot")} />
-    <ChooseBot ownedOnly onSelect={select} />
-{:else}
-    <BotProperties padded bot={selected} installing={false}></BotProperties>
-{/if}
-
-<style lang="scss">
-</style>
diff --git a/frontend/app/src/components/bots/ChooseBot.svelte b/frontend/app/src/components/bots/ChooseBot.svelte
deleted file mode 100644
index da05a2188e..0000000000
--- a/frontend/app/src/components/bots/ChooseBot.svelte
+++ /dev/null
@@ -1,101 +0,0 @@
-<script lang="ts">
-    import { AvatarSize, botState, currentUserIdStore, type ExternalBot } from "@client";
-    import { i18nKey } from "../../i18n/i18n";
-    import AlertBox from "../AlertBox.svelte";
-    import Avatar from "../Avatar.svelte";
-    import Translatable from "../Translatable.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-
-    interface Props {
-        onSelect: (bot: ExternalBot) => void;
-        ownedOnly: boolean;
-    }
-
-    let { onSelect, ownedOnly }: Props = $props();
-
-    let bots = $derived(
-        ownedOnly
-            ? [...botState.externalBots.values()].filter((b) => b.ownerId === $currentUserIdStore)
-            : [...botState.externalBots.values()],
-    );
-</script>
-
-{#if bots.length === 0}
-    <AlertBox>
-        <Translatable resourceKey={i18nKey("bots.update_bot.nobots")}></Translatable>
-    </AlertBox>
-{:else}
-    <div class="bots">
-        {#each bots as bot}
-            <!-- svelte-ignore a11y_click_events_have_key_events -->
-            <!-- svelte-ignore a11y_no_static_element_interactions -->
-            <div onclick={() => onSelect(bot)} class="match">
-                <span class="avatar">
-                    <Avatar
-                        url={bot.avatarUrl ?? "/assets/bot_avatar.svg"}
-                        size={AvatarSize.Default} />
-                </span>
-                <div class="details">
-                    <h4 class="bot-name">
-                        {bot.name}
-                    </h4>
-                    <p title={bot.definition.description} class="bot-desc">
-                        <Markdown inline={false} suppressLinks text={bot.definition.description} />
-                    </p>
-                </div>
-            </div>
-        {/each}
-    </div>
-{/if}
-
-<style lang="scss">
-    .bots {
-        max-height: 500px;
-        overflow: auto;
-    }
-
-    .match {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding: $sp4;
-        transition:
-            background-color ease-in-out 100ms,
-            border-color ease-in-out 100ms;
-        gap: 12px;
-        cursor: pointer;
-
-        @media (hover: hover) {
-            &:hover {
-                background-color: var(--members-hv);
-            }
-        }
-
-        @include mobile() {
-            padding: $sp3 toRem(10);
-        }
-    }
-    .avatar {
-        flex: 0 0 50px;
-        position: relative;
-        align-self: start;
-    }
-
-    .details {
-        display: flex;
-        gap: $sp2;
-        flex: 1;
-        flex-direction: column;
-        @include font(book, normal, fs-100);
-
-        .bot-name {
-            @include ellipsis();
-        }
-
-        .bot-desc {
-            @include font(light, normal, fs-100);
-            color: var(--txt-light);
-            @include clamp(2);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/bots/CommandArg.svelte b/frontend/app/src/components/bots/CommandArg.svelte
deleted file mode 100644
index dd5d3d851f..0000000000
--- a/frontend/app/src/components/bots/CommandArg.svelte
+++ /dev/null
@@ -1,128 +0,0 @@
-<script lang="ts">
-    import type { CommandArg, CommandParam } from "@client";
-    import { _ } from "svelte-i18n";
-    import { i18nKey, interpolate } from "../../i18n/i18n";
-    import DateInput from "../DateInput.svelte";
-    import SingleUserSelector from "../home/SingleUserSelector.svelte";
-    import Input from "../Input.svelte";
-    import IntegerInput from "../IntegerInput.svelte";
-    import Legend from "../Legend.svelte";
-    import NumberInput from "../NumberInput.svelte";
-    import Select from "../Select.svelte";
-    import TextArea from "../TextArea.svelte";
-    import Translatable from "../Translatable.svelte";
-
-    interface Props {
-        param: CommandParam;
-        arg: CommandArg;
-    }
-
-    let { param, arg = $bindable() }: Props = $props();
-</script>
-
-<div class="param">
-    {#if arg.kind === "user" && param.kind === "user"}
-        <Legend label={i18nKey(param.name)} required={param.required} />
-        <SingleUserSelector
-            onUserSelected={(user) => {
-                arg.userId = user.userId;
-            }}
-            onUserRemoved={() => {
-                arg.userId = undefined;
-            }}
-            autofocus={false}
-            direction={"down"}
-            placeholder={$_(param.placeholder ?? "")} />
-    {:else if arg.kind === "string" && param.kind === "string"}
-        <Legend
-            label={i18nKey(param.name)}
-            required={param.required}
-            rules={param.choices.length > 0
-                ? undefined
-                : i18nKey(`Max length ${param.maxLength}`)} />
-        {#if param.choices?.length ?? 0 > 0}
-            <Select bind:value={arg.value}>
-                <option value={""} selected disabled>
-                    {interpolate(
-                        $_,
-                        i18nKey("bots.builder.chooseOption", {
-                            option: interpolate($_, i18nKey(param.name)),
-                        }),
-                    )}
-                </option>
-                {#each param.choices as choice}
-                    <option value={choice.value}>
-                        <Translatable resourceKey={i18nKey(choice.name)} />
-                    </option>
-                {/each}
-            </Select>
-        {:else if param.multi_line}
-            <TextArea
-                rows={2}
-                placeholder={i18nKey(param.placeholder ?? "")}
-                minlength={param.minLength}
-                maxlength={param.maxLength}
-                bind:value={arg.value} />
-        {:else}
-            <Input
-                minlength={param.minLength}
-                maxlength={param.maxLength}
-                placeholder={i18nKey(param.placeholder ?? "")}
-                countdown
-                bind:value={arg.value} />
-        {/if}
-    {:else if arg.kind === "boolean" && param.kind === "boolean"}
-        <Legend label={i18nKey(param.name)} required={param.required} />
-        <Select bind:value={arg.value}>
-            <option value={""} selected disabled>{`Choose ${$_(param.name)}`}</option>
-            <option value={true}>True</option>
-            <option value={false}>False</option>
-        </Select>
-    {:else if (arg.kind === "integer" && param.kind === "integer") || (arg.kind === "decimal" && param.kind === "decimal")}
-        <Legend label={i18nKey(param.name)} required={param.required} />
-        {#if param.choices?.length ?? 0 > 0}
-            <Select bind:value={arg.value}>
-                <option value={null} selected disabled>{`Choose ${$_(param.name)}`}</option>
-                {#each param.choices as choice}
-                    <option value={choice.value}>
-                        <Translatable resourceKey={i18nKey(choice.name)} />
-                    </option>
-                {/each}
-            </Select>
-        {:else if arg.kind === "integer" && param.kind === "integer"}
-            <IntegerInput
-                min={param.minValue}
-                max={param.maxValue}
-                shouldClamp={false}
-                placeholder={i18nKey(param.placeholder ?? "")}
-                bind:value={arg.value} />
-        {:else if arg.kind === "decimal" && param.kind === "decimal"}
-            <NumberInput
-                min={param.minValue}
-                max={param.maxValue}
-                shouldClamp={false}
-                placeholder={i18nKey(param.placeholder ?? "")}
-                bind:value={arg.value} />
-        {/if}
-    {:else if arg.kind === "dateTime" && param.kind === "dateTime"}
-        <Legend label={i18nKey(param.name)} required={param.required} />
-        <DateInput
-            value={arg.value}
-            futureOnly={param.future_only}
-            placeholder={i18nKey(param.placeholder ?? "")}
-            onchange={(value) => {
-                arg.value = value;
-            }} />
-    {/if}
-</div>
-
-<style lang="scss">
-    .param {
-        margin-top: $sp3;
-    }
-
-    .param:not(:last-child) {
-        /* Gives a bit more spacing between param inputs */
-        margin-bottom: $sp4;
-    }
-</style>
diff --git a/frontend/app/src/components/bots/CommandInstanceBuilder.svelte b/frontend/app/src/components/bots/CommandInstanceBuilder.svelte
deleted file mode 100644
index 4c622379ae..0000000000
--- a/frontend/app/src/components/bots/CommandInstanceBuilder.svelte
+++ /dev/null
@@ -1,114 +0,0 @@
-<script lang="ts">
-    import { botState, mobileWidth, OpenChat } from "@client";
-    import { random64, type FlattenedCommand, type MessageContext } from "@shared";
-    import { getContext, onMount } from "svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { toastStore } from "../../stores/toast";
-    import Button from "../Button.svelte";
-    import ModalContent from "../ModalContent.svelte";
-    import Overlay from "../Overlay.svelte";
-    import Translatable from "../Translatable.svelte";
-    import CommandArg from "./CommandArg.svelte";
-
-    interface Props {
-        command: FlattenedCommand;
-        onCancel: () => void;
-        onCommandSent: () => void;
-        messageContext: MessageContext;
-    }
-
-    const client = getContext<OpenChat>("client");
-    let { command, onCancel, onCommandSent, messageContext }: Props = $props();
-    let commandName = $derived(`/${command.name}`);
-    let form: HTMLFormElement;
-    let busy = $state(false);
-
-    onMount(() => {
-        setTimeout(() => focusFirstInput(), 100);
-    });
-
-    function onSubmit(e: Event) {
-        e.preventDefault();
-
-        if (!botState.instanceValid) return;
-        busy = true;
-        client
-            .executeBotCommand(
-                {
-                    kind: "chat_scope",
-                    chatId: messageContext.chatId,
-                    threadRootMessageIndex: messageContext.threadRootMessageIndex,
-                    messageId: random64(),
-                },
-                botState.createBotInstance(command),
-            )
-            .then((result) => {
-                if (result === "failure") {
-                    toastStore.showFailureToast(i18nKey("bots.failed"));
-                } else if (result === "too_many_requests") {
-                    toastStore.showFailureToast(i18nKey("bots.tooManyRequests"));
-                }
-            });
-        onCommandSent();
-    }
-
-    function focusFirstInput() {
-        if (form === undefined) return;
-
-        const formElements = form.querySelectorAll("input, select, textarea, button, .textbox");
-        for (const el of formElements) {
-            if (el instanceof HTMLElement && isFocusable(el)) {
-                el.focus();
-
-                if (isTextBox(el)) {
-                    el.select();
-                }
-                break;
-            }
-        }
-    }
-
-    function isTextBox(element: HTMLElement): element is HTMLInputElement | HTMLTextAreaElement {
-        return (
-            (element instanceof HTMLInputElement && element.type === "text") ||
-            element instanceof HTMLTextAreaElement
-        );
-    }
-
-    function isFocusable(element: HTMLElement): boolean {
-        return (
-            !(element as HTMLInputElement | HTMLButtonElement | HTMLSelectElement).disabled &&
-            element.offsetParent !== null
-        );
-    }
-</script>
-
-<Overlay dismissible onClose={onCancel}>
-    <ModalContent closeIcon onClose={onCancel} overflowVisible={true}>
-        {#snippet header()}
-            {commandName}
-        {/snippet}
-        {#snippet body()}
-            <form bind:this={form} onsubmit={onSubmit}>
-                {#if command.description}
-                    <p><Translatable resourceKey={i18nKey(command.description)} /></p>
-                {/if}
-                {#if botState.selectedCommandArgs.length === command?.params?.length}
-                    {#each command?.params ?? [] as param, i}
-                        <CommandArg arg={botState.selectedCommandArgs[i]} {param} />
-                    {/each}
-                {/if}
-            </form>
-        {/snippet}
-        {#snippet footer()}
-            <Button
-                disabled={!botState.instanceValid || busy}
-                loading={busy}
-                onClick={onSubmit}
-                small={!$mobileWidth}
-                tiny={$mobileWidth}>
-                <Translatable resourceKey={i18nKey("Submit")} />
-            </Button>
-        {/snippet}
-    </ModalContent>
-</Overlay>
diff --git a/frontend/app/src/components/bots/CommandParameterViewer.svelte b/frontend/app/src/components/bots/CommandParameterViewer.svelte
deleted file mode 100644
index 8aafc3eb41..0000000000
--- a/frontend/app/src/components/bots/CommandParameterViewer.svelte
+++ /dev/null
@@ -1,280 +0,0 @@
-<script lang="ts">
-    import { iconSize, type CommandParam, type ValidationErrors } from "@client";
-    import ChevronLeft from "svelte-material-icons/ChevronLeft.svelte";
-    import ChevronRight from "svelte-material-icons/ChevronRight.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import Checkbox from "../Checkbox.svelte";
-    import HoverIcon from "../HoverIcon.svelte";
-    import Input from "../Input.svelte";
-    import IntegerInput from "../IntegerInput.svelte";
-    import Legend from "../Legend.svelte";
-    import ModalContent from "../ModalContent.svelte";
-    import NumberInput from "../NumberInput.svelte";
-    import Overlay from "../Overlay.svelte";
-    import Select from "../Select.svelte";
-    import Translatable from "../Translatable.svelte";
-    import ValidatingInput from "./ValidatingInput.svelte";
-
-    interface Props {
-        errorPath: string;
-        errors: ValidationErrors;
-        param: CommandParam;
-        onNext?: () => void;
-        onPrevious?: () => void;
-        onClose: () => void;
-    }
-
-    let { param, errors, errorPath, onNext, onPrevious, onClose }: Props = $props();
-</script>
-
-<Overlay dismissible>
-    <ModalContent closeIcon {onClose}>
-        {#snippet header()}
-            <div class="header">
-                <Translatable resourceKey={i18nKey("bots.builder.paramLabel", { name: param.name })}
-                ></Translatable>
-            </div>
-        {/snippet}
-        {#snippet body()}
-            <div class="body">
-                <section>
-                    <Legend label={i18nKey("bots.builder.paramTypeLabel")}></Legend>
-                    <Select disabled value={param.kind}>
-                        <option value={"string"}>
-                            <Translatable resourceKey={i18nKey("String")}></Translatable>
-                        </option>
-                        <option value={"user"}>
-                            <Translatable resourceKey={i18nKey("User")}></Translatable>
-                        </option>
-                        <option value={"boolean"}>
-                            <Translatable resourceKey={i18nKey("Boolean")}></Translatable>
-                        </option>
-                        <option value={"integer"}>
-                            <Translatable resourceKey={i18nKey("Integer")}></Translatable>
-                        </option>
-                        <option value={"decimal"}>
-                            <Translatable resourceKey={i18nKey("Decimal")}></Translatable>
-                        </option>
-                        <option value={"dateTime"}>
-                            <Translatable resourceKey={i18nKey("DateTime")}></Translatable>
-                        </option>
-                    </Select>
-                </section>
-                <section>
-                    <Checkbox
-                        id={`param_required`}
-                        label={i18nKey("bots.builder.required")}
-                        checked={param.required}
-                        disabled
-                        align={"start"}>
-                        <Translatable resourceKey={i18nKey("bots.builder.required")} />
-                        <div class="info">
-                            <Translatable resourceKey={i18nKey("bots.builder.requiredDesc")}
-                            ></Translatable>
-                        </div>
-                    </Checkbox>
-                </section>
-                <section>
-                    <Legend
-                        required
-                        label={i18nKey("bots.builder.paramNameLabel")}
-                        rules={i18nKey("bots.builder.nameRules")}></Legend>
-                    <ValidatingInput
-                        autofocus
-                        disabled
-                        error={errors.get(`${errorPath}_name`)}
-                        minlength={3}
-                        maxlength={25}
-                        invalid={errors.has(`${errorPath}_name`)}
-                        placeholder={i18nKey("bots.builder.paramNamePlaceholder")}
-                        value={param.name} />
-                </section>
-                <section>
-                    <Legend
-                        label={i18nKey("bots.builder.paramDescLabel")}
-                        rules={i18nKey("bots.builder.optional")}></Legend>
-                    <Input
-                        disabled
-                        minlength={3}
-                        maxlength={200}
-                        placeholder={i18nKey("bots.builder.paramDescPlaceholder")}
-                        value={param.description} />
-                </section>
-                <section>
-                    <Legend
-                        label={i18nKey("bots.builder.paramPlaceholderLabel")}
-                        rules={i18nKey("bots.builder.optional")}></Legend>
-                    <Input
-                        disabled
-                        minlength={3}
-                        maxlength={200}
-                        placeholder={i18nKey("bots.builder.paramPlaceholderPlaceholder")}
-                        value={param.placeholder} />
-                </section>
-                {#if param.kind === "string"}
-                    <section class="minmax">
-                        <div class="min">
-                            <Legend label={i18nKey("bots.builder.minLengthLabel")}></Legend>
-                            <NumberInput
-                                disabled
-                                min={0}
-                                max={param.maxLength}
-                                placeholder={i18nKey("bots.builder.minLengthPlaceholder")}
-                                value={param.minLength} />
-                        </div>
-                        <div class="max">
-                            <Legend label={i18nKey("bots.builder.maxLengthLabel")}></Legend>
-                            <NumberInput
-                                disabled
-                                min={param.minLength}
-                                max={1000}
-                                placeholder={i18nKey("bots.builder.maxLengthPlaceholder")}
-                                value={param.maxLength} />
-                        </div>
-                    </section>
-                {:else if param.kind === "integer"}
-                    <section class="minmax">
-                        <div class="min">
-                            <Legend label={i18nKey("bots.builder.minValueLabel")}></Legend>
-                            <IntegerInput
-                                disabled
-                                min={BigInt(0)}
-                                max={param.maxValue}
-                                placeholder={i18nKey("bots.builder.minValuePlaceholder")}
-                                value={param.minValue} />
-                        </div>
-                        <div class="max">
-                            <Legend label={i18nKey("bots.builder.maxValueLabel")}></Legend>
-                            <IntegerInput
-                                disabled
-                                min={param.minValue}
-                                max={BigInt(1000)}
-                                placeholder={i18nKey("bots.builder.maxValuePlaceholder")}
-                                value={param.maxValue} />
-                        </div>
-                    </section>
-                {:else if param.kind === "decimal"}
-                    <section class="minmax">
-                        <div class="min">
-                            <Legend label={i18nKey("bots.builder.minValueLabel")}></Legend>
-                            <NumberInput
-                                disabled
-                                min={0}
-                                max={param.maxValue}
-                                placeholder={i18nKey("bots.builder.minValuePlaceholder")}
-                                value={param.minValue} />
-                        </div>
-                        <div class="max">
-                            <Legend label={i18nKey("bots.builder.maxValueLabel")}></Legend>
-                            <NumberInput
-                                disabled
-                                min={param.minValue}
-                                max={1000}
-                                placeholder={i18nKey("bots.builder.maxValuePlaceholder")}
-                                value={param.maxValue} />
-                        </div>
-                    </section>
-                {:else if param.kind === "dateTime"}
-                    <section>
-                        <Legend
-                            label={i18nKey("bots.builder.dateTimeFutureOnly")}
-                            rules={i18nKey("bots.builder.dateTimeFutureOnlyDesc")}></Legend>
-                        <Input disabled value={param.future_only.toString()} />
-                    </section>
-                {/if}
-
-                {#if (param.kind === "string" || param.kind === "integer" || param.kind === "decimal") && param.choices.length > 0}
-                    <section>
-                        <Legend label={i18nKey("bots.builder.choices")}></Legend>
-                        <p class="info">
-                            <Translatable resourceKey={i18nKey("bots.builder.choicesInfo")}
-                            ></Translatable>
-                        </p>
-                        <div class="choices">
-                            <div class="choice">
-                                <div class="choice-name">Name</div>
-                                <div class="choice-value">Value</div>
-                            </div>
-                            {#each param.choices as _, i}
-                                <div class="choice">
-                                    <div class="choice-name">
-                                        <ValidatingInput
-                                            disabled
-                                            error={errors.get(`${errorPath}_choices_${i}_name`)}
-                                            invalid={errors.has(`${errorPath}_choices_${i}_name`)}
-                                            minlength={3}
-                                            maxlength={100}
-                                            placeholder={i18nKey("bots.builder.choiceName")}
-                                            value={param.choices[i].name} />
-                                    </div>
-                                    <div class="choice-value">
-                                        <ValidatingInput
-                                            disabled
-                                            error={errors.get(`${errorPath}_choices_${i}_value`)}
-                                            invalid={errors.has(`${errorPath}_choices_${i}_value`)}
-                                            minlength={3}
-                                            maxlength={100}
-                                            placeholder={i18nKey("bots.builder.choiceValue")}
-                                            value={param.choices[i].value} />
-                                    </div>
-                                </div>
-                            {/each}
-                        </div>
-                    </section>
-                {/if}
-            </div>
-        {/snippet}
-
-        {#snippet footer()}
-            <div class="footer">
-                <div class="navigate">
-                    <HoverIcon disabled={onPrevious === undefined} onclick={onPrevious}>
-                        <ChevronLeft size={$iconSize} color={"var(--icon-txt)"}></ChevronLeft>
-                    </HoverIcon>
-                    <HoverIcon disabled={onNext === undefined} onclick={onNext}>
-                        <ChevronRight size={$iconSize} color={"var(--icon-txt)"}></ChevronRight>
-                    </HoverIcon>
-                </div>
-            </div>
-        {/snippet}
-    </ModalContent>
-</Overlay>
-
-<style lang="scss">
-    .navigate {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-    }
-
-    .info {
-        @include font(book, normal, fs-70);
-        color: var(--txt-light);
-        margin-bottom: $sp3;
-    }
-
-    .choices {
-        margin-bottom: $sp3;
-    }
-
-    .choice {
-        display: flex;
-        align-items: center;
-        gap: $sp3;
-
-        .choice-name,
-        .choice-value {
-            flex: 1;
-        }
-    }
-
-    .minmax {
-        display: flex;
-        gap: $sp3;
-
-        .min,
-        .max {
-            flex: 1;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/bots/CommandSelector.svelte b/frontend/app/src/components/bots/CommandSelector.svelte
deleted file mode 100644
index 94d1523938..0000000000
--- a/frontend/app/src/components/bots/CommandSelector.svelte
+++ /dev/null
@@ -1,348 +0,0 @@
-<script lang="ts">
-    import type {
-        ChatPermissions,
-        ChatSummary,
-        GrantedBotPermissions,
-        MessageContext,
-        OpenChat,
-        PermissionRole,
-        ReadonlyMap,
-    } from "@client";
-    import {
-        botState,
-        directChatBotsStore,
-        isPermitted,
-        messagePermissionsForSelectedChatStore,
-        selectedChatBotsStore,
-        selectedChatSummaryStore,
-        selectedCommunityBotsStore,
-        threadPermissionsForSelectedChatStore,
-    } from "@client";
-    import { hasEveryRequiredPermission, random64, type FlattenedCommand } from "@shared";
-    import { getContext, onMount } from "svelte";
-    import Close from "svelte-material-icons/Close.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { toastStore } from "../../stores/toast";
-    import ErrorMessage from "../ErrorMessage.svelte";
-    import HoverIcon from "../HoverIcon.svelte";
-    import Logo from "@shared_components/Logo.svelte";
-    import Tooltip from "../tooltip/Tooltip.svelte";
-    import Translatable from "../Translatable.svelte";
-    import BotAvatar from "./BotAvatar.svelte";
-
-    interface Props {
-        selectedBotId?: string; // this will be the botId if we are in a direct chat with a bot
-        onCancel: () => void;
-        onNoMatches: () => void;
-        onCommandSent: () => void;
-        mode: "thread" | "message";
-        messageContext: MessageContext;
-    }
-
-    const client = getContext<OpenChat>("client");
-
-    let { onCancel, onNoMatches, onCommandSent, mode, messageContext, selectedBotId }: Props =
-        $props();
-
-    let installedBots = $derived.by(() => {
-        switch (messageContext.chatId.kind) {
-            case "channel":
-                return $selectedCommunityBotsStore;
-            case "direct_chat":
-                return $directChatBotsStore;
-            default:
-                return $selectedChatBotsStore;
-        }
-    });
-
-    let commands = $derived.by(() => {
-        return botState.commands.filter((c) => {
-            return (
-                restrictByBotIfNecessary(c) &&
-                restrictByChatIfNecessary(c) &&
-                hasPermissionForCommand(c, installedBots, $selectedChatSummaryStore)
-            );
-        });
-    });
-
-    function restrictByBotIfNecessary(command: FlattenedCommand): boolean {
-        return (
-            selectedBotId === undefined ||
-            (command.kind === "external_bot" && command.botId === selectedBotId) ||
-            (command.kind === "internal_bot" && command.directBotDisabled === false)
-        );
-    }
-
-    function restrictByChatIfNecessary(command: FlattenedCommand): boolean {
-        return !(
-            messageContext.chatId.kind === "direct_chat" && command.directChatsDisabled === true
-        );
-    }
-
-    function userHasPermissionForCommand(
-        command: FlattenedCommand,
-        chat: ChatSummary | undefined,
-    ): boolean {
-        const chatRolePermitted =
-            chat !== undefined && chat.kind !== "direct_chat"
-                ? isPermitted(chat.membership.role, command.defaultRole)
-                : true;
-
-        const chatPermitted =
-            chat !== undefined && chat.kind !== "direct_chat"
-                ? [...command.permissions.chatPermissions].every(
-                      (p) =>
-                          ["readMessages", "readMembership", "readChatSummary"].includes(p) ||
-                          isPermitted(
-                              chat.membership.role,
-                              chat.permissions[p as keyof ChatPermissions] as PermissionRole,
-                          ),
-                  )
-                : true;
-
-        switch (mode) {
-            case "message":
-                return (
-                    chatRolePermitted &&
-                    chatPermitted &&
-                    [...command.permissions.messagePermissions].every((p) =>
-                        $messagePermissionsForSelectedChatStore.has(p),
-                    )
-                );
-            case "thread":
-                return (
-                    chatRolePermitted &&
-                    chatPermitted &&
-                    [...command.permissions.messagePermissions].every((p) =>
-                        $threadPermissionsForSelectedChatStore.has(p),
-                    )
-                );
-        }
-    }
-
-    function hasPermissionForCommand(
-        command: FlattenedCommand,
-        installedBots: ReadonlyMap<string, GrantedBotPermissions>,
-        chat: ChatSummary | undefined,
-    ): boolean {
-        const userPermission = userHasPermissionForCommand(command, chat);
-        if (command.kind === "external_bot") {
-            // for an external bot we also need to know that the bot has been granted all the permissions it requires
-            const granted = installedBots.get(command.botId);
-            const required = command.permissions;
-            return (
-                userPermission &&
-                granted !== undefined &&
-                hasEveryRequiredPermission(required, granted.command)
-            );
-        } else {
-            return userPermission;
-        }
-    }
-
-    function selectCommand(command: FlattenedCommand) {
-        botState.setSelectedCommand(messageContext, commands, command);
-        sendCommandIfValid();
-    }
-
-    function sendCommandIfValid() {
-        if (botState.selectedCommand && botState.instanceValid && $selectedChatSummaryStore) {
-            client
-                .executeBotCommand(
-                    {
-                        kind: "chat_scope",
-                        chatId: messageContext.chatId,
-                        threadRootMessageIndex: messageContext.threadRootMessageIndex,
-                        messageId: random64(),
-                    },
-                    botState.createBotInstance(botState.selectedCommand),
-                )
-                .then((result) => {
-                    if (result === "failure") {
-                        toastStore.showFailureToast(i18nKey("bots.failed"));
-                    } else if (result === "too_many_requests") {
-                        toastStore.showFailureToast(i18nKey("bots.tooManyRequests"));
-                    }
-                });
-            onCommandSent();
-        }
-    }
-
-    onMount(() => {
-        botState.error = undefined;
-        document.addEventListener("keydown", onkeydown);
-        return () => {
-            document.removeEventListener("keydown", onkeydown);
-        };
-    });
-
-    $effect(() => {
-        if (commands.length === 0) {
-            onNoMatches();
-        }
-    });
-
-    function onkeydown(ev: KeyboardEvent): void {
-        switch (ev.key) {
-            case "ArrowDown":
-                botState.focusPreviousCommand();
-                break;
-            case "ArrowUp":
-                botState.focusNextCommand();
-                break;
-            case "Enter":
-                if (!botState.showingBuilder) {
-                    botState.setSelectedCommand(messageContext, commands);
-                    sendCommandIfValid();
-                    ev.preventDefault();
-                }
-                break;
-            case "Escape":
-                onCancel();
-                break;
-        }
-    }
-</script>
-
-<div class="command-header">
-    <h4>
-        <Translatable resourceKey={i18nKey("bots.matchingCommands")} />
-    </h4>
-    <HoverIcon onclick={onCancel}>
-        <Close size={"1em"} color={"var(--icon-txt)"} />
-    </HoverIcon>
-</div>
-<div class="command-list">
-    {#each commands as command, i}
-        <!-- svelte-ignore a11y_click_events_have_key_events -->
-        <!-- svelte-ignore a11y_no_static_element_interactions -->
-        <div
-            class="command"
-            class:selected={botState.focusedCommandIndex === i}
-            onclick={() => selectCommand(command)}>
-            {#if command.kind === "external_bot"}
-                <BotAvatar bot={command} />
-            {:else}
-                <Logo />
-            {/if}
-            <div class="details">
-                <div class="interface">
-                    <div class="command-name">
-                        /{command.name}
-                    </div>
-                    {#each command?.params ?? [] as param}
-                        <Tooltip position={"top"} align={"middle"}>
-                            <div class="param" class:required={param.required}>
-                                <Translatable resourceKey={i18nKey(param.name)} />
-                            </div>
-                            {#snippet popupTemplate()}
-                                <Translatable resourceKey={i18nKey(param.description ?? "")} />
-                            {/snippet}
-                        </Tooltip>
-                    {/each}
-                </div>
-                {#if command.description}
-                    <div class="desc">
-                        <Translatable resourceKey={i18nKey(command.description)} />
-                    </div>
-                {/if}
-            </div>
-            <div class="bot-name">
-                <Translatable resourceKey={i18nKey(command.botName)} />
-            </div>
-        </div>
-    {/each}
-</div>
-
-{#if botState.error !== undefined}
-    <div class="command-error">
-        <ErrorMessage>
-            {botState.error}
-        </ErrorMessage>
-    </div>
-{/if}
-
-<style lang="scss">
-    .command-error {
-        :global(h4) {
-            margin-bottom: 0;
-        }
-    }
-
-    .command-header {
-        background-color: var(--modal-bg);
-        padding: $sp3 $sp4;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        border-bottom: 1px solid var(--bd);
-        border-top: 1px solid var(--bd);
-    }
-
-    .command-list {
-        position: relative;
-        max-height: calc(var(--vh, 1vh) * 50);
-        overflow: auto;
-        background-color: var(--modal-bg);
-
-        .command {
-            $size: toRem(48);
-            display: flex;
-            align-items: center;
-            gap: $sp3;
-            border-bottom: 1px solid var(--bd);
-            padding: $sp3;
-            cursor: pointer;
-
-            :global(.logo),
-            :global(.avatar) {
-                width: $size;
-                height: $size;
-                flex: 0 0 $size;
-            }
-
-            &.selected {
-                background-color: var(--chatSummary-bg-selected);
-            }
-
-            .bot-name {
-                @include font(light, normal, fs-80);
-                color: var(--txt-light);
-            }
-
-            .details {
-                flex: auto;
-                display: flex;
-                flex-direction: column;
-
-                .interface {
-                    display: flex;
-                    align-items: center;
-                    gap: $sp3;
-
-                    .command-name {
-                        @include font(bold, normal, fs-100);
-                    }
-
-                    .param {
-                        @include font(light, normal, fs-80);
-                        border: 1px solid var(--button-bg);
-                        padding: $sp1 $sp3;
-                        border-radius: $sp2;
-                        line-height: 18px;
-
-                        &.required {
-                            background: var(--button-bg);
-                            color: var(--button-txt);
-                            border: none;
-                        }
-                    }
-                }
-
-                .desc {
-                    @include font(light, normal, fs-80);
-                }
-            }
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/bots/CommandViewer.svelte b/frontend/app/src/components/bots/CommandViewer.svelte
deleted file mode 100644
index bac864d940..0000000000
--- a/frontend/app/src/components/bots/CommandViewer.svelte
+++ /dev/null
@@ -1,202 +0,0 @@
-<script lang="ts">
-    import {
-        type CommandDefinition,
-        type CommandParam,
-        iconSize,
-        ValidationErrors,
-    } from "@client";
-    import ChevronLeft from "svelte-material-icons/ChevronLeft.svelte";
-    import ChevronRight from "svelte-material-icons/ChevronRight.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import ErrorMessage from "../ErrorMessage.svelte";
-    import HoverIcon from "../HoverIcon.svelte";
-    import Input from "../Input.svelte";
-    import Legend from "../Legend.svelte";
-    import ModalContent from "../ModalContent.svelte";
-    import Overlay from "../Overlay.svelte";
-    import Translatable from "../Translatable.svelte";
-    import BotPermissionViewer from "./BotPermissionViewer.svelte";
-    import CommandParameterViewer from "./CommandParameterViewer.svelte";
-    import ValidatingInput from "./ValidatingInput.svelte";
-
-    interface Props {
-        errors: ValidationErrors;
-        errorPath: string;
-        command: CommandDefinition;
-        onNext?: () => void;
-        onPrevious?: () => void;
-        onClose: () => void;
-    }
-
-    let { command, errors, errorPath, onNext, onPrevious, onClose }: Props = $props();
-
-    let selectedParam = $state<CommandParam | undefined>(undefined);
-    let selectedParamIndex = $state<number | undefined>(undefined);
-    let showNext = $derived(
-        selectedParamIndex !== undefined && selectedParamIndex < command.params.length - 1,
-    );
-    let showPrev = $derived(selectedParamIndex !== undefined && selectedParamIndex > 0);
-
-    function onSelectParam(param: CommandParam, index: number) {
-        selectedParam = param;
-        selectedParamIndex = index;
-    }
-
-    function traverseParams(add: number) {
-        if (selectedParamIndex === undefined) return;
-
-        selectedParamIndex += add;
-        selectedParam = command.params[selectedParamIndex];
-        if (selectedParam === undefined) {
-            selectedParamIndex = undefined;
-        }
-    }
-
-    function nextParam() {
-        traverseParams(1);
-    }
-
-    function previousParam() {
-        traverseParams(-1);
-    }
-</script>
-
-{#if selectedParam !== undefined && selectedParamIndex !== undefined}
-    <CommandParameterViewer
-        errorPath={`${errorPath}_param_${selectedParamIndex}`}
-        {errors}
-        onNext={showNext ? nextParam : undefined}
-        onPrevious={showPrev ? previousParam : undefined}
-        onClose={() => (selectedParam = undefined)}
-        param={selectedParam}></CommandParameterViewer>
-{/if}
-
-<Overlay dismissible {onClose}>
-    <ModalContent closeIcon {onClose}>
-        {#snippet header()}
-            <Translatable resourceKey={i18nKey("bots.builder.commandLabel", { name: command.name })}
-            ></Translatable>
-        {/snippet}
-        {#snippet body()}
-            <section>
-                <Legend required label={i18nKey("bots.builder.commandNameLabel")}></Legend>
-                <ValidatingInput
-                    disabled
-                    error={errors.get(`${errorPath}_name`)}
-                    minlength={3}
-                    maxlength={25}
-                    invalid={errors.has(`${errorPath}_name`)}
-                    placeholder={i18nKey("bots.builder.commandNamePlaceholder")}
-                    value={command.name} />
-            </section>
-
-            <section>
-                <Legend required label={i18nKey("bots.builder.commandDescLabel")}></Legend>
-                <Input
-                    disabled
-                    minlength={5}
-                    maxlength={500}
-                    placeholder={i18nKey("bots.builder.commandDescPlaceholder")}
-                    value={command.description} />
-            </section>
-
-            <section>
-                <Legend label={i18nKey("bots.builder.commandPlaceholderLabel")}></Legend>
-                <Input
-                    disabled
-                    minlength={5}
-                    maxlength={500}
-                    placeholder={i18nKey("bots.builder.commandPlaceholderPlaceholder")}
-                    value={command.placeholder} />
-            </section>
-
-            <section>
-                <BotPermissionViewer
-                    title={i18nKey("bots.builder.commandPermissionsLabel")}
-                    permissions={command.permissions} />
-            </section>
-
-            {#if command.params.length > 0}
-                <section>
-                    <Legend label={i18nKey("bots.builder.paramsLabel")}></Legend>
-                    <div class="params">
-                        {#each command.params as param, i}
-                            <!-- svelte-ignore a11y_click_events_have_key_events -->
-                            <!-- svelte-ignore a11y_no_static_element_interactions -->
-                            <div
-                                onclick={() => onSelectParam(param, i)}
-                                class="param"
-                                class:param-error={errors.has(`${errorPath}_param_${i}`)}>
-                                <Translatable resourceKey={i18nKey(param.name)}></Translatable>
-                            </div>
-                        {/each}
-                    </div>
-                </section>
-            {/if}
-
-            {#if errors.has(`${errorPath}_duplicate_params`)}
-                <ErrorMessage>{errors.get(`${errorPath}_duplicate_params`)}</ErrorMessage>
-            {/if}
-        {/snippet}
-
-        {#snippet footer()}
-            <div class="footer">
-                <div class="navigate">
-                    <HoverIcon disabled={onPrevious === undefined} onclick={onPrevious}>
-                        <ChevronLeft size={$iconSize} color={"var(--icon-txt)"}></ChevronLeft>
-                    </HoverIcon>
-                    <HoverIcon disabled={onNext === undefined} onclick={onNext}>
-                        <ChevronRight size={$iconSize} color={"var(--icon-txt)"}></ChevronRight>
-                    </HoverIcon>
-                </div>
-            </div>
-        {/snippet}
-    </ModalContent>
-</Overlay>
-
-<style lang="scss">
-    section {
-        margin-bottom: $sp4;
-    }
-
-    .navigate {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-    }
-
-    .params {
-        margin: 0 0 $sp3 0;
-        display: flex;
-        gap: $sp3;
-        flex-wrap: wrap;
-
-        .param {
-            padding: $sp3 $sp4;
-            cursor: pointer;
-            align-items: center;
-            background: var(--button-bg);
-            color: var(--button-txt);
-            transition:
-                background ease-in-out 200ms,
-                color ease-in-out 200ms;
-            border-radius: var(--button-rd);
-
-            @media (hover: hover) {
-                &:hover {
-                    background: var(--button-hv);
-                    color: var(--button-hv-txt);
-                }
-            }
-
-            &.param-error {
-                background-color: var(--error);
-                @media (hover: hover) {
-                    &:hover {
-                        background: var(--error);
-                    }
-                }
-            }
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/bots/DirectChatHeader.svelte b/frontend/app/src/components/bots/DirectChatHeader.svelte
deleted file mode 100644
index d02f4b3a6c..0000000000
--- a/frontend/app/src/components/bots/DirectChatHeader.svelte
+++ /dev/null
@@ -1,206 +0,0 @@
-<script lang="ts">
-    import type { DirectChatSummary, ExternalBot } from "@client";
-    import {
-        allUsersStore,
-        AvatarSize,
-        definitionToPermissions,
-        directChatBotsStore,
-        favouritesStore,
-        iconSize,
-        mobileWidth,
-        type OpenChat,
-        publish,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import ArrowLeft from "svelte-material-icons/ArrowLeft.svelte";
-    import ArrowRight from "svelte-material-icons/ArrowRight.svelte";
-    import DeleteOutline from "svelte-material-icons/DeleteOutline.svelte";
-    import DotsVertical from "svelte-material-icons/DotsVertical.svelte";
-    import HeartMinus from "svelte-material-icons/HeartMinus.svelte";
-    import HeartPlus from "svelte-material-icons/HeartPlus.svelte";
-    import Magnify from "svelte-material-icons/Magnify.svelte";
-    import PencilOutline from "svelte-material-icons/PencilOutline.svelte";
-    import TextBoxOutline from "svelte-material-icons/TextBoxOutline.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { rtlStore } from "../../stores/rtl";
-    import Avatar from "../Avatar.svelte";
-    import HoverIcon from "../HoverIcon.svelte";
-    import Menu from "../Menu.svelte";
-    import MenuIcon from "../MenuIcon.svelte";
-    import MenuItem from "../MenuItem.svelte";
-    import SectionHeader from "../SectionHeader.svelte";
-    import Translatable from "../Translatable.svelte";
-    import WithBotManagement from "./WithBotManagement.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        chat: DirectChatSummary;
-        bot: ExternalBot;
-        onSearchChat: (term: string) => void;
-    }
-
-    let { chat, bot, onSearchChat }: Props = $props();
-    let botUser = $derived($allUsersStore.get(chat.them.userId));
-    let grantedPermissions = $derived(
-        $directChatBotsStore.get(bot.id) ?? definitionToPermissions(bot.definition),
-    );
-
-    function addToFavourites() {
-        client.addToFavourites(chat.id);
-    }
-
-    function removeFromFavourites() {
-        client.removeFromFavourites(chat.id);
-    }
-
-    function searchChat() {
-        onSearchChat("");
-    }
-</script>
-
-<WithBotManagement collection={chat} {bot} canManage {grantedPermissions}>
-    {#snippet contents({ removeBot, reviewPermissions, viewBotDetails })}
-        <SectionHeader shadow flush>
-            {#if $mobileWidth}
-                <!-- svelte-ignore a11y_click_events_have_key_events -->
-                <!-- svelte-ignore a11y_no_static_element_interactions -->
-                <div class="back" class:rtl={$rtlStore} onclick={() => publish("clearSelection")}>
-                    <HoverIcon>
-                        {#if $rtlStore}
-                            <ArrowRight size={$iconSize} color={"var(--icon-txt)"} />
-                        {:else}
-                            <ArrowLeft size={$iconSize} color={"var(--icon-txt)"} />
-                        {/if}
-                    </HoverIcon>
-                </div>
-            {/if}
-
-            <div class="avatar">
-                <Avatar
-                    userId={chat.them.userId}
-                    url={client.userAvatarUrl(botUser)}
-                    size={AvatarSize.Default} />
-            </div>
-            <div class="chat-details">
-                <div class="chat-name">
-                    {client.displayName(botUser)}
-                </div>
-            </div>
-
-            <div class="menu">
-                <MenuIcon position={"bottom"} align={"end"}>
-                    {#snippet menuIcon()}
-                        <HoverIcon title={$_("chatMenu")}>
-                            <DotsVertical size={$iconSize} color={"var(--icon-txt)"} />
-                        </HoverIcon>
-                    {/snippet}
-                    {#snippet menuItems()}
-                        <Menu>
-                            {#if !$favouritesStore.has(chat.id)}
-                                <MenuItem onclick={addToFavourites}>
-                                    {#snippet icon()}
-                                        <HeartPlus size={$iconSize} color={"var(--menu-warn)"} />
-                                    {/snippet}
-                                    {#snippet text()}
-                                        <Translatable
-                                            resourceKey={i18nKey("communities.addToFavourites")} />
-                                    {/snippet}
-                                </MenuItem>
-                            {:else}
-                                <MenuItem onclick={removeFromFavourites}>
-                                    {#snippet icon()}
-                                        <HeartMinus size={$iconSize} color={"var(--menu-warn)"} />
-                                    {/snippet}
-                                    {#snippet text()}
-                                        <Translatable
-                                            resourceKey={i18nKey(
-                                                "communities.removeFromFavourites",
-                                            )} />
-                                    {/snippet}
-                                </MenuItem>
-                            {/if}
-                            {#if $mobileWidth}
-                                <MenuItem onclick={searchChat}>
-                                    {#snippet icon()}
-                                        <Magnify
-                                            size={$iconSize}
-                                            color={"var(--icon-inverted-txt)"} />
-                                    {/snippet}
-                                    {#snippet text()}
-                                        <Translatable resourceKey={i18nKey("searchChat")} />
-                                    {/snippet}
-                                </MenuItem>
-                            {/if}
-
-                            <MenuItem onclick={() => removeBot()}>
-                                {#snippet icon()}
-                                    <DeleteOutline
-                                        size={$iconSize}
-                                        color={"var(--icon-inverted-txt)"} />
-                                {/snippet}
-                                {#snippet text()}
-                                    <Translatable resourceKey={i18nKey("bots.manage.remove")} />
-                                {/snippet}
-                            </MenuItem>
-
-                            <MenuItem onclick={() => reviewPermissions()}>
-                                {#snippet icon()}
-                                    <PencilOutline
-                                        size={$iconSize}
-                                        color={"var(--icon-inverted-txt)"} />
-                                {/snippet}
-                                {#snippet text()}
-                                    <Translatable resourceKey={i18nKey("bots.manage.review")} />
-                                {/snippet}
-                            </MenuItem>
-
-                            <MenuItem onclick={() => viewBotDetails()}>
-                                {#snippet icon()}
-                                    <TextBoxOutline
-                                        size={$iconSize}
-                                        color={"var(--icon-inverted-txt)"} />
-                                {/snippet}
-                                {#snippet text()}
-                                    <Translatable resourceKey={i18nKey("bots.manage.view")} />
-                                {/snippet}
-                            </MenuItem>
-                        </Menu>
-                    {/snippet}
-                </MenuIcon>
-            </div>
-        </SectionHeader>
-    {/snippet}
-</WithBotManagement>
-
-<style lang="scss">
-    .chat-name {
-        @include font(book, normal, fs-120);
-        @include ellipsis();
-        margin-bottom: $sp1;
-        display: flex;
-        align-items: center;
-        gap: $sp2;
-    }
-
-    .avatar {
-        flex: 0 0 55px;
-    }
-
-    .chat-details {
-        flex: 1;
-        overflow: auto;
-        padding: 0 $sp2;
-    }
-
-    .back {
-        flex: 0 0 10px;
-        margin-right: 5px;
-
-        &.rtl {
-            margin-right: 0;
-            margin-left: 5px;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/bots/EphemeralMessage.svelte b/frontend/app/src/components/bots/EphemeralMessage.svelte
deleted file mode 100644
index 34650fe237..0000000000
--- a/frontend/app/src/components/bots/EphemeralMessage.svelte
+++ /dev/null
@@ -1,118 +0,0 @@
-<script lang="ts">
-    import { i18nKey } from "@src/i18n/i18n";
-    import { AvatarSize, botState, type EphemeralMessageEvent } from "@client";
-    import { onMount } from "svelte";
-    import Close from "svelte-material-icons/Close.svelte";
-    import { Tween } from "svelte/motion";
-    import HoverIcon from "../HoverIcon.svelte";
-    import Translatable from "../Translatable.svelte";
-    import ChatMessageContent from "../home/ChatMessageContent.svelte";
-    import BotAvatar from "./BotAvatar.svelte";
-
-    const duration = 10_000;
-
-    interface Props {
-        event: EphemeralMessageEvent;
-        onClose: () => void;
-    }
-
-    let perc = new Tween(100, { duration });
-    let { event, onClose }: Props = $props();
-    let bot = $derived(botState.externalBots.get(event.botId));
-    let timer = $state<number>();
-
-    onMount(() => {
-        perc.target = 0;
-        timer = window.setTimeout(onClose, duration);
-        return clearTimer;
-    });
-
-    function clearTimer() {
-        window.clearTimeout(timer);
-        timer = undefined;
-    }
-
-    function pause() {
-        perc.target = perc.current;
-        clearTimer();
-    }
-
-    function resume() {
-        const remainingTime = (perc.current / 100) * duration;
-        perc.set(0, { duration: remainingTime });
-        timer = window.setTimeout(onClose, remainingTime);
-    }
-
-    function closeClicked() {
-        clearTimer();
-        onClose();
-    }
-</script>
-
-{#if bot}
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div class="ephemeral-msg">
-        <div onmousedown={pause} onmouseup={resume} class="content">
-            <div class="header">
-                <BotAvatar size={AvatarSize.Tiny} {bot} />
-                <div class="title">
-                    <Translatable resourceKey={i18nKey(`${bot.name} /${event.commandName}`)} />
-                </div>
-                <!-- svelte-ignore a11y_click_events_have_key_events -->
-                <!-- svelte-ignore a11y_no_static_element_interactions -->
-                <span class="close" onclick={closeClicked}>
-                    <HoverIcon>
-                        <Close size={"1em"} color={"var(--icon-txt)"} />
-                    </HoverIcon>
-                </span>
-            </div>
-            <ChatMessageContent
-                failed={false}
-                messageId={event.message.messageId}
-                messageIndex={0}
-                messageContext={{ chatId: { kind: "direct_chat", userId: "" } }}
-                intersecting={false}
-                blockLevelMarkdown={event.message.blockLevelMarkdown}
-                edited={false}
-                senderId={bot.id}
-                fill={false}
-                readonly={true}
-                content={event.message.messageContent} />
-        </div>
-        <div class="countdown">
-            <div style={`width: ${perc.current}%`} class="bar"></div>
-        </div>
-    </div>
-{/if}
-
-<style lang="scss">
-    .header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        gap: $sp3;
-        margin-bottom: $sp4;
-
-        .title {
-            flex: auto;
-            @include font(bold, normal, fs-110);
-        }
-    }
-    .ephemeral-msg {
-        width: 100%;
-
-        .content {
-            padding: $sp4;
-        }
-    }
-
-    .countdown {
-        height: toRem(10);
-        width: 100%;
-
-        .bar {
-            height: toRem(10);
-            background-color: var(--warn);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/bots/InstallationLocationSelector.svelte b/frontend/app/src/components/bots/InstallationLocationSelector.svelte
deleted file mode 100644
index dd53490839..0000000000
--- a/frontend/app/src/components/bots/InstallationLocationSelector.svelte
+++ /dev/null
@@ -1,183 +0,0 @@
-<script lang="ts">
-    import {
-        AvatarSize,
-        communitiesStore,
-        i18nKey,
-        OpenChat,
-        serverGroupChatsStore,
-        type BotInstallationLocation,
-    } from "@client";
-    import { getContext, onMount } from "svelte";
-    import Avatar from "../Avatar.svelte";
-    import SelectedMatch from "../home/proposal/SelectedMatch.svelte";
-    import Legend from "../Legend.svelte";
-    import Menu from "../Menu.svelte";
-    import MenuItem from "../MenuItem.svelte";
-    import Search from "../Search.svelte";
-    import Translatable from "../Translatable.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    type Match = {
-        avatarUrl: string;
-        name: string;
-        id: string;
-        isCommunity: boolean;
-    };
-
-    interface Props {
-        location?: BotInstallationLocation;
-    }
-
-    let { location = $bindable() }: Props = $props();
-    let searchTerm: string = $state("");
-    let placeholder = i18nKey("Search for a community, group or user");
-    let results: Match[] = $state([]);
-    let selected: Match | undefined = $state(undefined);
-    let focused = $state(false);
-    location; // usual hack
-
-    onMount(() => onPerformSearch(""));
-
-    function onPerformSearch(term: string) {
-        const termLower = term.toLowerCase();
-
-        const communities: Match[] = [...$communitiesStore.values()]
-            .filter((c) => termLower === "" || c.name.toLowerCase().includes(termLower))
-            .map((c) => ({
-                avatarUrl: client.communityAvatarUrl(c.id.communityId, c.avatar),
-                name: c.name,
-                id: c.id.communityId,
-                isCommunity: true,
-            }));
-
-        const groups: Match[] = [...$serverGroupChatsStore.values()]
-            .filter((g) => termLower === "" || g.name.toLowerCase().includes(termLower))
-            .map((g) => ({
-                avatarUrl: client.groupAvatarUrl(g),
-                name: g.name,
-                id: g.id.groupId,
-                isCommunity: false,
-            }));
-
-        communities.sort((a: Match, b: Match) => a.name.localeCompare(b.name));
-        groups.sort((a: Match, b: Match) => a.name.localeCompare(b.name));
-        results = [...communities, ...groups];
-    }
-
-    function reset() {
-        selected = undefined;
-        onPerformSearch("");
-    }
-
-    function select(match: Match | undefined) {
-        selected = match;
-        results = [];
-        if (match !== undefined) {
-            if (match.isCommunity) {
-                location = { kind: "community", communityId: match.id };
-            } else {
-                location = { kind: "group_chat", groupId: match.id };
-            }
-        }
-    }
-
-    function onFocus() {
-        focused = true;
-    }
-
-    function onBlur() {
-        window.setTimeout(() => (focused = false), 300);
-    }
-</script>
-
-<div class="bot-install-location" class:showing-menu={results.length > 0}>
-    <Legend
-        label={i18nKey("bots.builder.testContext")}
-        rules={i18nKey("bots.builder.testContextInfo")}></Legend>
-    {#if selected !== undefined}
-        <SelectedMatch onRemove={() => reset()} match={selected}></SelectedMatch>
-    {:else}
-        <Search
-            inputStyle
-            fill
-            {placeholder}
-            searching={false}
-            {searchTerm}
-            {onPerformSearch}
-            {onFocus}
-            {onBlur} />
-    {/if}
-
-    {#if focused && results.length > 0}
-        <div class="menu">
-            <Menu shadow={false}>
-                {#each results as match (match.id)}
-                    <MenuItem onclick={() => select(match)}>
-                        {#snippet icon()}
-                            <Avatar url={match.avatarUrl} size={AvatarSize.Small} />
-                        {/snippet}
-                        {#snippet text()}
-                            <div class="details">
-                                <div class="name">
-                                    {match.name}
-                                </div>
-                                <div class="type">
-                                    {#if match.isCommunity}
-                                        Community
-                                    {:else}
-                                        Group chat
-                                    {/if}
-                                </div>
-                            </div>
-                        {/snippet}
-                    </MenuItem>
-                {/each}
-            </Menu>
-        </div>
-    {/if}
-
-    <p class="info">
-        <Translatable resourceKey={i18nKey("bots.builder.testContextExplanation")}></Translatable>
-    </p>
-</div>
-
-<style lang="scss">
-    .bot-install-location {
-        margin-bottom: $sp4;
-
-        &.showing-menu {
-            :global(.wrapper) {
-                border-radius: var(--rd) var(--rd) var(--rd) 0;
-            }
-
-            :global(.menu) {
-                border-radius: 0 0 var(--rd) var(--rd);
-            }
-
-            :global(.menu .menu) {
-                border-radius: 0 0 var(--rd) var(--rd);
-                border-top: none;
-            }
-        }
-    }
-    .info {
-        @include font(book, normal, fs-70);
-        color: var(--txt-light);
-        margin-top: $sp3;
-    }
-
-    .menu {
-        max-height: 250px;
-        overflow: auto;
-        width: fit-content;
-        position: absolute;
-        @include z-index("popup-menu");
-        box-shadow: var(--menu-sh);
-    }
-
-    .type {
-        @include font(light, normal, fs-70);
-        color: var(--txt-light);
-    }
-</style>
diff --git a/frontend/app/src/components/bots/SummaryButton.svelte b/frontend/app/src/components/bots/SummaryButton.svelte
deleted file mode 100644
index cd12bad936..0000000000
--- a/frontend/app/src/components/bots/SummaryButton.svelte
+++ /dev/null
@@ -1,71 +0,0 @@
-<script lang="ts">
-    import { iconSize, type ResourceKey } from "@client";
-    import DeleteOutline from "svelte-material-icons/DeleteOutline.svelte";
-    import Translatable from "../Translatable.svelte";
-
-    interface Props {
-        resourceKey: ResourceKey;
-        valid: boolean;
-        onDelete: () => void;
-        onSelect: () => void;
-    }
-
-    let { onDelete, onSelect, resourceKey, valid }: Props = $props();
-</script>
-
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div onclick={onSelect} class:invalid={!valid} class="command">
-    <div class="name">
-        <Translatable {resourceKey}></Translatable>
-    </div>
-    <div
-        onclick={(e) => {
-            e.stopPropagation();
-            onDelete();
-        }}
-        class="icon">
-        <DeleteOutline viewBox={"0 -3 24 24"} size={$iconSize} color={"var(--button-txt)"} />
-    </div>
-</div>
-
-<style lang="scss">
-    .command {
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        background: var(--button-bg);
-        color: var(--button-txt);
-        transition:
-            background ease-in-out 200ms,
-            color ease-in-out 200ms;
-        border-radius: var(--button-rd);
-        margin-bottom: $sp3;
-
-        @media (hover: hover) {
-            &:hover {
-                background: var(--button-hv);
-                color: var(--button-hv-txt);
-            }
-        }
-
-        .icon {
-            flex: 0 0 toRem(30);
-            padding: $sp3 $sp4;
-        }
-
-        .name {
-            padding: $sp3 $sp4;
-            flex: auto;
-        }
-
-        &.invalid {
-            background-color: var(--error);
-            @media (hover: hover) {
-                &:hover {
-                    background: var(--error);
-                }
-            }
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/bots/WebhookMember.svelte b/frontend/app/src/components/bots/WebhookMember.svelte
deleted file mode 100644
index cc9718eeff..0000000000
--- a/frontend/app/src/components/bots/WebhookMember.svelte
+++ /dev/null
@@ -1,139 +0,0 @@
-<script lang="ts">
-    import { toastStore } from "@src/stores/toast";
-    import { iconSize, type MultiUserChat, OpenChat } from "@client";
-    import { publish, type WebhookDetails } from "@shared";
-    import { getContext } from "svelte";
-    import ChevronDown from "svelte-material-icons/ChevronDown.svelte";
-    import DeleteOutline from "svelte-material-icons/DeleteOutline.svelte";
-    import TextBoxOutline from "svelte-material-icons/TextBoxOutline.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import FilteredUsername from "@shared_components/FilteredUsername.svelte";
-    import BotBadge from "../home/profile/BotBadge.svelte";
-    import HoverIcon from "../HoverIcon.svelte";
-    import Menu from "../Menu.svelte";
-    import MenuIcon from "../MenuIcon.svelte";
-    import MenuItem from "../MenuItem.svelte";
-    import Translatable from "../Translatable.svelte";
-    import BotAvatar from "./BotAvatar.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        chat: MultiUserChat;
-        webhook: WebhookDetails;
-        searchTerm: string;
-    }
-
-    let { chat, webhook, searchTerm }: Props = $props();
-
-    function deleteWebhook() {
-        client.deleteWebhook(chat.id, webhook.id).then((success) => {
-            if (!success) {
-                toastStore.showFailureToast(i18nKey("webhook.removeFailed"));
-            }
-        });
-    }
-
-    function viewEditWebhook() {
-        client.getWebhook(chat.id, webhook.id).then((secret) => {
-            if (secret !== undefined) {
-                publish("updateWebhook", {
-                    chat,
-                    hook: {
-                        ...webhook,
-                        secret,
-                    },
-                });
-            }
-        });
-    }
-</script>
-
-<div class="bot_member" role="button">
-    <span class="avatar">
-        <BotAvatar bot={webhook} />
-    </span>
-    <div class="details">
-        <div class="bot_name">
-            <h4>
-                <FilteredUsername {searchTerm} username={webhook.name} />
-                <BotBadge webhook />
-            </h4>
-        </div>
-    </div>
-    <MenuIcon position={"bottom"} align={"end"}>
-        {#snippet menuIcon()}
-            <HoverIcon>
-                <ChevronDown size={$iconSize} color={"var(--icon-txt)"} />
-            </HoverIcon>
-        {/snippet}
-        {#snippet menuItems()}
-            <Menu>
-                <MenuItem onclick={() => viewEditWebhook()}>
-                    {#snippet icon()}
-                        <TextBoxOutline size={$iconSize} color={"var(--icon-inverted-txt)"} />
-                    {/snippet}
-                    {#snippet text()}
-                        <Translatable resourceKey={i18nKey("webhook.viewEditAction")} />
-                    {/snippet}
-                </MenuItem>
-                <MenuItem onclick={() => deleteWebhook()}>
-                    {#snippet icon()}
-                        <DeleteOutline size={$iconSize} color={"var(--icon-inverted-txt)"} />
-                    {/snippet}
-                    {#snippet text()}
-                        <Translatable resourceKey={i18nKey("webhook.removeAction")} />
-                    {/snippet}
-                </MenuItem>
-            </Menu>
-        {/snippet}
-    </MenuIcon>
-</div>
-
-<style lang="scss">
-    .bot_member {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding: $sp4;
-        transition:
-            background-color ease-in-out 100ms,
-            border-color ease-in-out 100ms;
-        gap: 12px;
-
-        @media (hover: hover) {
-            &:hover {
-                background-color: var(--members-hv);
-            }
-        }
-
-        @include mobile() {
-            padding: $sp3 toRem(10);
-        }
-    }
-    .avatar {
-        flex: 0 0 50px;
-        position: relative;
-    }
-
-    .details {
-        display: flex;
-        flex: 1;
-        flex-direction: column;
-        @include font(medium, normal, fs-100);
-        gap: $sp2;
-
-        .bot_name {
-            display: flex;
-            flex: 1;
-            align-items: center;
-            @include ellipsis();
-
-            h4 {
-                display: flex;
-                align-items: center;
-                gap: $sp2;
-            }
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/bots/WebhookModal.svelte b/frontend/app/src/components/bots/WebhookModal.svelte
deleted file mode 100644
index 4124441bfb..0000000000
--- a/frontend/app/src/components/bots/WebhookModal.svelte
+++ /dev/null
@@ -1,267 +0,0 @@
-<script lang="ts">
-    import { toastStore } from "@src/stores/toast";
-    import { copyToClipboard } from "@src/utils/urls";
-    import {
-        emptyWebhookInstance,
-        iconSize,
-        mobileWidth,
-        OpenChat,
-        validBotComponentName,
-        type FullWebhookDetails,
-        type MultiUserChatIdentifier,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import ContentCopy from "svelte-material-icons/ContentCopy.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import Button from "../Button.svelte";
-    import ButtonGroup from "../ButtonGroup.svelte";
-    import EditableAvatar from "../EditableAvatar.svelte";
-    import Legend from "../Legend.svelte";
-    import ModalContent from "../ModalContent.svelte";
-    import Translatable from "../Translatable.svelte";
-    import ValidatingInput from "./ValidatingInput.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        onClose: () => void;
-        chatId: MultiUserChatIdentifier;
-        mode: { kind: "register" } | { kind: "update"; webhook: FullWebhookDetails };
-    }
-
-    let { onClose, chatId, mode = $bindable({ kind: "register" }) }: Props = $props();
-
-    let busy = $state(false);
-    let busyUpdate = $state(false);
-    let step = $state(mode.kind as string);
-
-    let webhook = $state({
-        original: mode.kind === "update" ? mode.webhook : emptyWebhookInstance(),
-        current: mode.kind === "update" ? { ...mode.webhook } : emptyWebhookInstance(),
-    });
-
-    let nameDirty = $derived(webhook.original.name !== webhook.current.name);
-    let avatarDirty = $derived(webhook.original.avatarUrl !== webhook.current.avatarUrl);
-    let dirty = $derived(nameDirty || avatarDirty);
-    let name_errors = $derived(validBotComponentName(webhook.current.name, 3));
-    let valid = $derived(name_errors.length === 0);
-    let url = $derived(client.webhookUrl(webhook.current, chatId));
-
-    let titleKey = $derived.by(() => {
-        switch (step) {
-            case "update":
-                return i18nKey("webhook.updateTitle", { name: webhook.current.name });
-            default:
-                return i18nKey("webhook.registerTitle");
-        }
-    });
-
-    function register() {
-        if (valid && dirty) {
-            busy = true;
-            client
-                .registerWebhook(chatId, webhook.current.name, webhook.current.avatarUrl)
-                .then((success) => {
-                    if (success === undefined) {
-                        toastStore.showFailureToast(i18nKey("Unable to register webhook"));
-                    } else {
-                        webhook.current = {
-                            id: success.id,
-                            name: webhook.current.name,
-                            secret: success.secret,
-                            avatarUrl: success.avatarUrl,
-                        };
-                        webhook.original = { ...webhook.current };
-                        step = "registered";
-                    }
-                })
-                .finally(() => (busy = false));
-        }
-    }
-
-    function update() {
-        busyUpdate = true;
-        if (valid && dirty) {
-            client
-                .updateWebhook(
-                    chatId,
-                    webhook.current,
-                    nameDirty ? webhook.current.name : undefined,
-                    avatarDirty
-                        ? webhook.current.avatarUrl !== undefined
-                            ? { value: webhook.current.avatarUrl }
-                            : "set_to_none"
-                        : undefined,
-                )
-                .then((success) => {
-                    if (!success) {
-                        toastStore.showFailureToast(i18nKey("Unable to update webhook details"));
-                    } else {
-                        webhook.original = { ...webhook.current };
-                    }
-                })
-                .finally(() => (busyUpdate = false));
-        }
-    }
-
-    function regenerate() {
-        busy = true;
-        client
-            .regenerateWebhook(chatId, webhook.original.id)
-            .then((success) => {
-                if (success === undefined) {
-                    toastStore.showFailureToast(i18nKey("Unable to regenerate webhook"));
-                } else {
-                    webhook.current.secret = success;
-                    webhook.original.secret = success;
-                }
-            })
-            .finally(() => (busy = false));
-    }
-
-    function onSubmit(e: Event) {
-        e.preventDefault();
-    }
-
-    function avatarSelected(detail: { url: string; data: Uint8Array }) {
-        webhook.current.avatarUrl = detail.url;
-    }
-
-    function copy() {
-        copyToClipboard(url ?? "").then((success) => {
-            if (success) {
-                toastStore.showSuccessToast(i18nKey("copiedToClipboard"));
-            } else {
-                toastStore.showFailureToast(
-                    i18nKey("failedToCopyToClipboard", {
-                        url,
-                    }),
-                );
-            }
-        });
-    }
-</script>
-
-<ModalContent {onClose}>
-    {#snippet header()}
-        <div class="header">
-            <Translatable resourceKey={titleKey}></Translatable>
-        </div>
-    {/snippet}
-    {#snippet body()}
-        <div class="body">
-            <form onsubmit={onSubmit} class="webhook-form">
-                <Legend label={i18nKey("webhook.avatarLabel")} />
-                <div class="photo">
-                    <EditableAvatar
-                        overlayIcon
-                        size={"medium"}
-                        image={webhook.current.avatarUrl}
-                        onImageSelected={avatarSelected} />
-                </div>
-
-                <Legend
-                    required
-                    label={i18nKey("webhook.nameLabel")}
-                    rules={step !== "registered" ? i18nKey("webhook.nameRules") : undefined}
-                ></Legend>
-                <ValidatingInput
-                    minlength={3}
-                    maxlength={15}
-                    disabled={step === "registered"}
-                    invalid={name_errors.length > 0}
-                    placeholder={i18nKey("webhook.namePlaceholder")}
-                    error={name_errors}
-                    bind:value={webhook.current.name}>
-                </ValidatingInput>
-            </form>
-
-            {#if step !== "register" && url !== undefined}
-                {#if step === "update"}
-                    <ButtonGroup>
-                        <Button
-                            onClick={update}
-                            disabled={busyUpdate || !valid || !dirty}
-                            loading={busyUpdate}
-                            small={!$mobileWidth}
-                            tiny={$mobileWidth}>
-                            <Translatable resourceKey={i18nKey("webhook.updateAction")} />
-                        </Button>
-                    </ButtonGroup>
-                {/if}
-                <hr />
-                <div class="url">
-                    <div class="title">
-                        <Translatable resourceKey={i18nKey("webhook.urlLabel")} />
-                    </div>
-                    <div class="copy" title={$_("copyToClipboard")} onclick={copy}>
-                        <ContentCopy size={$iconSize} color={"var(--icon-txt)"} />
-                    </div>
-                </div>
-                {url}
-            {/if}
-        </div>
-    {/snippet}
-    {#snippet footer()}
-        <div class="footer">
-            <ButtonGroup>
-                <Button secondary small={!$mobileWidth} tiny={$mobileWidth} onClick={onClose}>
-                    <Translatable
-                        resourceKey={step !== "register" && !dirty
-                            ? i18nKey("close")
-                            : i18nKey("cancel")} />
-                </Button>
-                <Button
-                    onClick={step === "update" ? regenerate : step === "register" ? register : copy}
-                    disabled={busy || (step === "register" && (!valid || !dirty))}
-                    loading={busy}
-                    small={!$mobileWidth}
-                    tiny={$mobileWidth}>
-                    <Translatable
-                        resourceKey={step === "update"
-                            ? i18nKey("webhook.regenerateAction")
-                            : step === "register"
-                              ? i18nKey("webhook.registerAction")
-                              : i18nKey("copy")} />
-                </Button>
-            </ButtonGroup>
-        </div>
-    {/snippet}
-</ModalContent>
-
-<style lang="scss">
-    .webhook-form {
-        :global(.input-wrapper) {
-            margin-bottom: $sp5;
-        }
-    }
-    .url {
-        display: flex;
-        align-items: center;
-        gap: $sp3;
-        margin-bottom: $sp5;
-
-        .title {
-            @include font(bold, normal, fs-130, 29);
-            @include mobile() {
-                @include font(bold, normal, fs-120, 29);
-            }
-        }
-
-        .copy {
-            display: flex;
-            cursor: pointer;
-        }
-    }
-
-    hr {
-        margin: $sp5 0;
-        color: var(--bd);
-    }
-
-    .photo {
-        max-width: toRem(100);
-        margin-bottom: $sp3;
-    }
-</style>
diff --git a/frontend/app/src/components/bots/install/BotInstaller.svelte b/frontend/app/src/components/bots/install/BotInstaller.svelte
deleted file mode 100644
index 9019d941c6..0000000000
--- a/frontend/app/src/components/bots/install/BotInstaller.svelte
+++ /dev/null
@@ -1,177 +0,0 @@
-<script lang="ts">
-    import {
-        type BotInstallationLocation,
-        definitionToPermissions,
-        type ExternalBotLike,
-        type GrantedBotPermissions,
-        type Level,
-        mobileWidth,
-        OpenChat,
-        type ReadonlyMap,
-        type ResourceKey,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { toastStore } from "../../../stores/toast";
-    import Button from "../../Button.svelte";
-    import ButtonGroup from "../../ButtonGroup.svelte";
-    import ModalContent from "../../ModalContent.svelte";
-    import Overlay from "../../Overlay.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import BotProperties from "./BotProperties.svelte";
-    import ChoosePermissions from "./ChoosePermissions.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    type Step = "choose_command_permissions" | "choose_autonomous_permissions" | "unknown";
-
-    interface Props {
-        location: BotInstallationLocation;
-        level: Level;
-        bot: ExternalBotLike;
-        onClose: (installed: boolean) => void;
-        installedBots: ReadonlyMap<string, GrantedBotPermissions>;
-    }
-
-    let { location, bot, onClose, level, installedBots }: Props = $props();
-    let requestedPermissions = $derived(definitionToPermissions(bot.definition));
-    let grantedPermissions = $state(filterByLocation(definitionToPermissions(bot.definition)));
-
-    let busy = $state(false);
-    let step = $state<Step>(firstStep());
-
-    function filterByLocation(perm: GrantedBotPermissions): GrantedBotPermissions {
-        if (level === "group") {
-            perm.command.communityPermissions = [];
-            if (perm.autonomous !== undefined) {
-                perm.autonomous.communityPermissions = [];
-            }
-        }
-        return perm;
-    }
-
-    function firstStep(): Step {
-        if (bot.definition.commands.length > 0) {
-            return "choose_command_permissions";
-        } else if (bot.definition.autonomousConfig !== undefined) {
-            return "choose_autonomous_permissions";
-        } else {
-            return "unknown";
-        }
-    }
-
-    function nextStep(current: Step) {
-        switch (current) {
-            case "choose_command_permissions":
-                if (bot.definition.autonomousConfig !== undefined) {
-                    step = "choose_autonomous_permissions";
-                } else {
-                    busy = true;
-                    install(() => onClose(true));
-                }
-                break;
-            case "choose_autonomous_permissions":
-                busy = true;
-                install();
-                break;
-        }
-    }
-
-    function install(then?: () => void) {
-        if (installedBots.has(bot.id)) {
-            if (then) {
-                then();
-            } else {
-                onClose(true);
-            }
-        } else {
-            client
-                .installBot(location, bot.id, {
-                    command: grantedPermissions.command,
-                    autonomous: grantedPermissions.autonomous,
-                })
-                .then((success) => {
-                    if (!success) {
-                        toastStore.showFailureToast(i18nKey("bots.add.failure"));
-                    } else {
-                        if (then) {
-                            then();
-                        } else {
-                            onClose(true);
-                        }
-                    }
-                });
-        }
-    }
-</script>
-
-<Overlay>
-    <ModalContent>
-        {#snippet header()}
-            <div class="header">
-                <Translatable resourceKey={i18nKey("bots.add.title", undefined, level, true)}
-                ></Translatable>
-            </div>
-        {/snippet}
-        {#snippet body()}
-            <div class="body">
-                <BotProperties installing={busy} {grantedPermissions} {bot}>
-                    {#if step === "choose_command_permissions"}
-                        <ChoosePermissions
-                            {level}
-                            title={i18nKey("bots.add.chooseCommandPermissions")}
-                            subtitle={i18nKey("bots.add.commandPermissionsInfo")}
-                            bind:granted={grantedPermissions.command}
-                            requested={requestedPermissions.command} />
-                    {:else if step === "choose_autonomous_permissions"}
-                        <ChoosePermissions
-                            {level}
-                            title={i18nKey("bots.add.chooseAutonomousPermissions")}
-                            subtitle={i18nKey("bots.add.autonomousPermissionsInfo")}
-                            bind:granted={grantedPermissions.autonomous!}
-                            requested={requestedPermissions.autonomous!} />
-                    {/if}
-                </BotProperties>
-            </div>
-        {/snippet}
-        {#snippet footer()}
-            <div class="footer">
-                <ButtonGroup>
-                    {#if step === "choose_command_permissions" && bot.definition.autonomousConfig !== undefined}
-                        {@render button(i18nKey("bots.add.next"), () => nextStep(step))}
-                    {:else}
-                        {@render button(i18nKey("cancel"), () => onClose(false), true)}
-                        {@render button(i18nKey("bots.add.install"), () => nextStep(step))}
-                    {/if}
-                </ButtonGroup>
-            </div>
-        {/snippet}
-    </ModalContent>
-</Overlay>
-
-{#snippet button(
-    txt: ResourceKey,
-    click: () => void,
-    secondary = false,
-    disabled = busy,
-    loading = busy,
-)}
-    <Button
-        {secondary}
-        small={!$mobileWidth}
-        tiny={$mobileWidth}
-        {disabled}
-        {loading}
-        onClick={click}>
-        <Translatable resourceKey={txt} />
-    </Button>
-{/snippet}
-
-<style lang="scss">
-    .body {
-        display: flex;
-        justify-content: center;
-        gap: 12px;
-        flex-direction: column;
-    }
-</style>
diff --git a/frontend/app/src/components/bots/install/BotProperties.svelte b/frontend/app/src/components/bots/install/BotProperties.svelte
deleted file mode 100644
index 68de4850b7..0000000000
--- a/frontend/app/src/components/bots/install/BotProperties.svelte
+++ /dev/null
@@ -1,188 +0,0 @@
-<script lang="ts">
-    import Avatar from "@src/components/Avatar.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import type { ExternalBotLike, GrantedBotPermissions, OpenChat } from "@client";
-    import { AvatarSize, allUsersStore, currentUserIdStore, mobileWidth } from "@client";
-    import { getContext, type Snippet } from "svelte";
-    import BotAvatar from "../BotAvatar.svelte";
-    import BotCommands from "../BotCommands.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        bot: ExternalBotLike;
-        grantedPermissions?: GrantedBotPermissions;
-        installing: boolean;
-        padded?: boolean;
-        onClick?: (match: ExternalBotLike) => void;
-        children?: Snippet;
-        showAvatar?: boolean;
-        showCommands?: boolean;
-    }
-
-    let {
-        bot,
-        grantedPermissions,
-        installing,
-        padded = false,
-        onClick,
-        children,
-        showAvatar = !$mobileWidth,
-        showCommands = true,
-    }: Props = $props();
-    let owner = $derived($allUsersStore.get(bot.ownerId));
-    let isPublic = $derived(
-        bot.kind === "external_bot" && bot.registrationStatus.kind === "public",
-    );
-</script>
-
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-    class="props"
-    class:clickable={onClick !== undefined}
-    class:padded
-    onclick={() => onClick?.(bot)}>
-    {#if showAvatar}
-        <span class="avatar">
-            <BotAvatar {bot} />
-        </span>
-    {/if}
-    <div class="details">
-        <div class="bot-name">
-            <h4>
-                <div class={`img ${isPublic ? "public" : "private"}`}></div>
-                {bot.name}
-            </h4>
-            {#if owner}
-                <div class="owner">
-                    <Avatar url={client.userAvatarUrl(owner)} size={AvatarSize.Tiny} />
-                    <span class="username">{owner.username}</span>
-                </div>
-            {/if}
-            {#if installing}
-                <div class="installing"></div>
-            {/if}
-        </div>
-        <div class="bot-desc">
-            <Markdown inline={false} text={bot.definition.description} />
-        </div>
-        {#if bot.ownerId === $currentUserIdStore}
-            <div class="bot-id">
-                bot id: {bot.id}
-            </div>
-        {/if}
-        {#if showCommands}
-            <BotCommands {grantedPermissions} commands={bot.definition.commands} />
-        {/if}
-
-        {@render children?.()}
-    </div>
-</div>
-
-<style lang="scss">
-    .props {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        gap: 12px;
-
-        &.clickable {
-            cursor: pointer;
-        }
-
-        &.padded {
-            padding: $sp4;
-            transition:
-                background-color ease-in-out 100ms,
-                border-color ease-in-out 100ms;
-            /* @media (hover: hover) {
-                &:hover {
-                    background-color: var(--members-hv);
-                }
-            } */
-
-            @include mobile() {
-                padding: $sp3 toRem(10);
-            }
-        }
-    }
-
-    .avatar {
-        flex: 0 0 50px;
-        position: relative;
-        align-self: start;
-    }
-
-    .installing {
-        margin-left: $sp3;
-        @include loading-spinner(1em, 0.5em, var(--button-spinner), "/assets/plain-spinner.svg");
-    }
-
-    .details {
-        display: flex;
-        gap: $sp2;
-        flex: 1;
-        flex-direction: column;
-        @include font(book, normal, fs-100);
-
-        .bot-name {
-            @include ellipsis();
-            display: flex;
-            gap: $sp3;
-            @include font(book, normal, fs-110);
-
-            h4 {
-                display: flex;
-                gap: $sp2;
-                align-items: center;
-            }
-        }
-
-        .bot-desc {
-            @include font(light, normal, fs-100);
-            color: var(--txt-light);
-            margin-bottom: $sp3;
-            max-height: 300px;
-            overflow: auto;
-        }
-    }
-
-    .owner {
-        padding: $sp1 $sp3;
-        border: var(--bw) solid var(--bd);
-        border-radius: $sp2;
-        display: flex;
-        gap: $sp2;
-        align-items: center;
-        color: var(--txt-light);
-        @include font(light, normal, fs-90);
-
-        .username {
-            flex: auto;
-        }
-    }
-
-    .img {
-        background-repeat: no-repeat;
-        $size: 12px;
-        flex: 0 0 $size;
-        width: $size;
-        height: $size;
-
-        &.public {
-            background-image: url("/assets/unlocked.svg");
-        }
-
-        &.private {
-            background-image: url("/assets/locked.svg");
-        }
-    }
-
-    .bot-id {
-        @include font(light, normal, fs-70);
-        color: var(--txt-light);
-        font: courier;
-        margin-bottom: $sp3;
-    }
-</style>
diff --git a/frontend/app/src/components/bots/install/ChoosePermissions.svelte b/frontend/app/src/components/bots/install/ChoosePermissions.svelte
deleted file mode 100644
index d7966d069a..0000000000
--- a/frontend/app/src/components/bots/install/ChoosePermissions.svelte
+++ /dev/null
@@ -1,109 +0,0 @@
-<script lang="ts">
-    import {
-        i18nKey,
-        type ExternalBotPermissions,
-        type Level,
-        type ResourceKey,
-    } from "@client";
-    import Tabs from "../../Tabs.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import Checkbox from "../../Checkbox.svelte";
-    import Legend from "../../Legend.svelte";
-    import { togglePermission } from "../../../utils/bots";
-
-    interface Props {
-        level: Level;
-        title: ResourceKey;
-        subtitle: ResourceKey;
-        granted: ExternalBotPermissions;
-        requested: ExternalBotPermissions;
-    }
-
-    let { granted = $bindable(), requested, title, subtitle, level }: Props = $props();
-
-    let initialIndex = $derived(level === "group" ? 1 : 2);
-
-    function filterTabs<T>(tabs: T[]): T[] {
-        if (level === "group") {
-            return tabs.slice(1);
-        }
-        return tabs;
-    }
-</script>
-
-{#snippet chatTab()}
-    {#if requested.chatPermissions.length === 0}
-        <Translatable resourceKey={i18nKey("bots.add.noPermissions")}></Translatable>
-    {:else}
-        {#each requested.chatPermissions as perm}
-            <Checkbox
-                id={`chat_permission_${perm}`}
-                label={i18nKey(`permissions.${perm}`)}
-                checked={granted.chatPermissions.includes(perm)}
-                onChange={() => togglePermission(granted, "chatPermissions", perm)}
-                align={"start"}>
-            </Checkbox>
-        {/each}
-    {/if}
-{/snippet}
-{#snippet communityTab()}
-    {#if requested.communityPermissions.length === 0}
-        <Translatable resourceKey={i18nKey("bots.add.noPermissions")}></Translatable>
-    {:else}
-        {#each requested.communityPermissions as perm}
-            <Checkbox
-                id={`community_permission_${perm}`}
-                label={i18nKey(`permissions.${perm}`)}
-                checked={granted.communityPermissions.includes(perm)}
-                onChange={() => togglePermission(granted, "communityPermissions", perm)}
-                align={"start"}>
-            </Checkbox>
-        {/each}
-    {/if}
-{/snippet}
-{#snippet messageTab()}
-    {#if requested.messagePermissions.length === 0}
-        <Translatable resourceKey={i18nKey("bots.add.noPermissions")}></Translatable>
-    {:else}
-        {#each requested.messagePermissions as perm}
-            <Checkbox
-                id={`message_permission_${perm}`}
-                label={i18nKey(`permissions.messagePermissions.${perm}`)}
-                checked={granted.messagePermissions.includes(perm)}
-                onChange={() => togglePermission(granted, "messagePermissions", perm)}
-                align={"start"}>
-            </Checkbox>
-        {/each}
-    {/if}
-{/snippet}
-
-<div class="permissions">
-    <Legend large label={title}></Legend>
-    <p class="info">
-        <Translatable resourceKey={subtitle}></Translatable>
-    </p>
-    <Tabs
-        {initialIndex}
-        tabs={filterTabs([
-            {
-                title: i18nKey("bots.builder.permScopeCommunity"),
-                snippet: communityTab,
-            },
-            {
-                title: i18nKey("bots.builder.permScopeChat"),
-                snippet: chatTab,
-            },
-            {
-                title: i18nKey("bots.builder.permScopeMessage"),
-                snippet: messageTab,
-            },
-        ])}></Tabs>
-</div>
-
-<style lang="scss">
-    .info {
-        @include font(book, normal, fs-80);
-        color: var(--txt-light);
-        margin-bottom: $sp4;
-    }
-</style>
diff --git a/frontend/app/src/components/bots/install/EnableAutonomousAccess.svelte b/frontend/app/src/components/bots/install/EnableAutonomousAccess.svelte
deleted file mode 100644
index 96225206c4..0000000000
--- a/frontend/app/src/components/bots/install/EnableAutonomousAccess.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<script lang="ts">
-    import { type Level } from "@client";
-    import Translatable from "../../Translatable.svelte";
-    import Legend from "../../Legend.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import AlertBox from "@src/components/AlertBox.svelte";
-
-    interface Props {
-        level: Level;
-    }
-
-    let { level }: Props = $props();
-</script>
-
-<Legend large label={i18nKey("bots.add.enableAutonomousAccess", undefined, level, true)}></Legend>
-<p class="info">
-    <Translatable
-        resourceKey={i18nKey("bots.add.enableAutonomousAccessBlurb", undefined, level, true)}
-    ></Translatable>
-</p>
-
-{#if level === "community"}
-    <AlertBox>
-        <Translatable
-            resourceKey={i18nKey("bots.add.communityLevelWarning", undefined, level, true)}
-        ></Translatable>
-    </AlertBox>
-{/if}
-
-<style lang="scss">
-    .info {
-        @include font(book, normal, fs-80);
-        color: var(--txt-light);
-        margin-bottom: $sp4;
-    }
-</style>
diff --git a/frontend/app/src/components/bots/install/SubscribeBlurb.svelte b/frontend/app/src/components/bots/install/SubscribeBlurb.svelte
deleted file mode 100644
index 0cb24de3fb..0000000000
--- a/frontend/app/src/components/bots/install/SubscribeBlurb.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script lang="ts">
-    import { i18nKey } from "../../../i18n/i18n";
-    import Legend from "../../../components/Legend.svelte";
-    import Translatable from "../../../components/Translatable.svelte";
-</script>
-
-<Legend large label={i18nKey("bots.add.subscribeTitle")}></Legend>
-<p class="info">
-    <Translatable resourceKey={i18nKey("bots.add.subscribeBlurb")}></Translatable>
-</p>
-
-<style lang="scss">
-    .info {
-        @include font(book, normal, fs-80);
-        color: var(--txt-light);
-        margin-bottom: $sp4;
-    }
-</style>
diff --git a/frontend/app/src/components/calendar/Calendar.svelte b/frontend/app/src/components/calendar/Calendar.svelte
deleted file mode 100644
index 623ec8b92e..0000000000
--- a/frontend/app/src/components/calendar/Calendar.svelte
+++ /dev/null
@@ -1,179 +0,0 @@
-<script lang="ts">
-    import { iconSize } from "@client";
-    import { type Snippet } from "svelte";
-    import { locale } from "svelte-i18n";
-    import PrevIcon from "svelte-material-icons/ChevronLeft.svelte";
-    import NextIcon from "svelte-material-icons/ChevronRight.svelte";
-    import { translationCodes } from "../../i18n/i18n";
-    import HoverIcon from "../HoverIcon.svelte";
-    import { calendarState, type DateRange } from "./calendarState.svelte";
-    import { getMonthCalendar, getTitleText, isSameDay } from "./utils";
-    import { weekDays } from "./weekdays";
-
-    interface Props {
-        monthTitleTemplate?: Snippet;
-        dayTemplate?: Snippet<[Date]>;
-        dateSelected?: (range: DateRange) => void;
-    }
-
-    let { monthTitleTemplate, dayTemplate, dateSelected }: Props = $props();
-
-    let today = $state(new Date());
-    let showDate = $state(new Date());
-    let dates = $state<Date[][]>([]);
-    let translatedLocale = $derived(translationCodes[$locale || "en"] || "en");
-
-    $effect(() => getDates(showDate));
-
-    function endOfDay(date: Date): Date {
-        return new Date(date.getTime() + 24 * 60 * 60 * 1000 - 1);
-    }
-
-    function getDates(start: Date) {
-        console.log("Getting dates for start date: ", start);
-        const resp = getMonthCalendar(start);
-        calendarState.monthTitle = getTitleText(resp.year, resp.month, translatedLocale);
-        dates = resp.dates;
-        calendarState.selectedMonth = resp.month;
-        const allDates = resp.dates.flatMap((d) => d);
-        const finalDay = allDates[allDates.length - 1];
-        const range: DateRange = {
-            date: start,
-            range: [allDates[0], endOfDay(finalDay)],
-        };
-        calendarState.selectedRange = range;
-        dateSelected?.(range);
-    }
-
-    function previousMonth() {
-        const year = showDate.getFullYear();
-        const month = showDate.getMonth();
-        if (month - 1 < 0) {
-            showDate = new Date(year - 1, 11, 1);
-        } else {
-            showDate = new Date(year, month - 1, 1);
-        }
-    }
-    function nextMonth() {
-        const year = showDate.getFullYear();
-        const month = showDate.getMonth();
-        if (month + 1 > 11) {
-            showDate = new Date(year + 1, 0, 1);
-        } else {
-            showDate = new Date(year, month + 1, 1);
-        }
-    }
-</script>
-
-<div class={"calendar-wrapper"}>
-    <div class="calendar-header">
-        <HoverIcon onclick={previousMonth}>
-            <PrevIcon size={$iconSize} color={"var(--icon-txt"} />
-        </HoverIcon>
-        {#if monthTitleTemplate}
-            {@render monthTitleTemplate()}
-        {:else}
-            <h3>{calendarState.monthTitle}</h3>
-        {/if}
-        <HoverIcon onclick={nextMonth}>
-            <NextIcon size={$iconSize} color={"var(--icon-txt"} />
-        </HoverIcon>
-    </div>
-    <div class="week-days-row">
-        {#each $weekDays as [day, d]}
-            <div title={day} class="block weekday-name-block">
-                {d}
-            </div>
-        {/each}
-    </div>
-    <div class="daily-date-container">
-        {#each dates as week}
-            <div class="week-row">
-                {#each week as day}
-                    <div
-                        class:disabled={day.getMonth() !== calendarState.selectedMonth}
-                        class:today={typeof day === "string" ? false : isSameDay(today, day)}
-                        class="block daily-date-block pointer">
-                        {#if dayTemplate}
-                            {@render dayTemplate(day)}
-                        {:else}
-                            {day.getDate()}
-                        {/if}
-                    </div>
-                {/each}
-            </div>
-        {/each}
-    </div>
-</div>
-
-<style lang="scss">
-    .calendar-wrapper {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        border-radius: var(--rd);
-        margin-bottom: $sp4;
-    }
-
-    .block {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        min-height: toRem(50);
-        @include font(medium, normal, fs-100);
-        flex-grow: 0;
-        flex-shrink: 0;
-        border-left: var(--bw) solid var(--bd);
-        border-bottom: var(--bw) solid var(--bd);
-
-        &:last-child {
-            border-right: var(--bw) solid var(--bd);
-        }
-    }
-
-    .calendar-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: $sp4;
-        border: solid var(--bw) var(--bd);
-    }
-
-    .week-days-row,
-    .week-row {
-        width: 100%;
-        display: flex;
-        flex-wrap: wrap;
-    }
-
-    .weekday-name-block,
-    .daily-date-block {
-        width: calc(100% / 7);
-        font-variant-numeric: tabular-nums;
-    }
-
-    .daily-date-block {
-        transition: background 0.25s ease-in-out;
-        &:hover:not(.disabled) {
-            background: rgba(255, 255, 255, 0.1);
-        }
-    }
-
-    .today {
-        font-weight: 700;
-        text-decoration: underline;
-    }
-
-    .disabled {
-        color: var(--txt-light);
-    }
-
-    .weekday-name-block {
-        font-weight: bold;
-    }
-
-    .pointer {
-        cursor: pointer;
-    }
-</style>
diff --git a/frontend/app/src/components/calendar/weekdays.ts b/frontend/app/src/components/calendar/weekdays.ts
deleted file mode 100644
index 39f58900bc..0000000000
--- a/frontend/app/src/components/calendar/weekdays.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-import { locale } from "svelte-i18n";
-import { derived } from "svelte/store";
-import { translationCodes } from "../../i18n/i18n";
-
-type WeekDay = [string, string];
-type WeekDayMap = Record<string, WeekDay[]>;
-
-const map: WeekDayMap = {
-    "zh-cn": [
-        ["星期日", "日"],
-        ["星期一", "一"],
-        ["星期二", "二"],
-        ["星期三", "三"],
-        ["星期四", "四"],
-        ["星期五", "五"],
-        ["星期六", "六"],
-    ],
-    de: [
-        ["Sonntag", "So"],
-        ["Montag", "Mo"],
-        ["Dienstag", "Di"],
-        ["Mittwoch", "Mi"],
-        ["Donnerstag", "Do"],
-        ["Freitag", "Fr"],
-        ["Samstag", "Sa"],
-    ],
-    en: [
-        ["Sunday", "Su"],
-        ["Monday", "Mo"],
-        ["Tuesday", "Tu"],
-        ["Wednesday", "We"],
-        ["Thursday", "Th"],
-        ["Friday", "Fr"],
-        ["Saturday", "Sa"],
-    ],
-    es: [
-        ["Domingo", "Do"],
-        ["Lunes", "Lu"],
-        ["Martes", "Ma"],
-        ["Miércoles", "Mi"],
-        ["Jueves", "Ju"],
-        ["Viernes", "Vi"],
-        ["Sábado", "Sa"],
-    ],
-    fr: [
-        ["Dimanche", "Di"],
-        ["Lundi", "Lu"],
-        ["Mardi", "Ma"],
-        ["Mercredi", "Me"],
-        ["Jeudi", "Je"],
-        ["Vendredi", "Ve"],
-        ["Samedi", "Sa"],
-    ],
-    hi: [
-        ["रविवार", "र"],
-        ["सोमवार", "सो"],
-        ["मंगलवार", "मं"],
-        ["बुधवार", "बु"],
-        ["गुरुवार", "गु"],
-        ["शुक्रवार", "शु"],
-        ["शनिवार", "श"],
-    ],
-    it: [
-        ["Domenica", "Do"],
-        ["Lunedì", "Lu"],
-        ["Martedì", "Ma"],
-        ["Mercoledì", "Me"],
-        ["Giovedì", "Gi"],
-        ["Venerdì", "Ve"],
-        ["Sabato", "Sa"],
-    ],
-    iw: [
-        ["יום ראשון", "א"],
-        ["יום שני", "ב"],
-        ["יום שלישי", "ג"],
-        ["יום רביעי", "ד"],
-        ["יום חמישי", "ה"],
-        ["יום שישי", "ו"],
-        ["שבת", "ש"],
-    ],
-    ja: [
-        ["日曜日", "日"],
-        ["月曜日", "月"],
-        ["火曜日", "火"],
-        ["水曜日", "水"],
-        ["木曜日", "木"],
-        ["金曜日", "金"],
-        ["土曜日", "土"],
-    ],
-    ru: [
-        ["Воскресенье", "Вс"],
-        ["Понедельник", "Пн"],
-        ["Вторник", "Вт"],
-        ["Среда", "Ср"],
-        ["Четверг", "Чт"],
-        ["Пятница", "Пт"],
-        ["Суббота", "Сб"],
-    ],
-    uk: [
-        ["Неділя", "Нд"],
-        ["Понеділок", "Пн"],
-        ["Вівторок", "Вт"],
-        ["Середа", "Ср"],
-        ["Четвер", "Чт"],
-        ["П’ятниця", "Пт"],
-        ["Субота", "Сб"],
-    ],
-    vi: [
-        ["Chủ Nhật", "CN"],
-        ["Thứ Hai", "T2"],
-        ["Thứ Ba", "T3"],
-        ["Thứ Tư", "T4"],
-        ["Thứ Năm", "T5"],
-        ["Thứ Sáu", "T6"],
-        ["Thứ Bảy", "T7"],
-    ],
-};
-
-export const weekDays = derived(locale, (locale) => {
-    const translated = translationCodes[locale || "en"] || "en";
-    return map[translated] ?? map["en"];
-});
diff --git a/frontend/app/src/components/home/AcceptP2PSwapModal.svelte b/frontend/app/src/components/home/AcceptP2PSwapModal.svelte
deleted file mode 100644
index b18261bc00..0000000000
--- a/frontend/app/src/components/home/AcceptP2PSwapModal.svelte
+++ /dev/null
@@ -1,142 +0,0 @@
-<script lang="ts">
-    import type { OpenChat } from "@client";
-    import {
-        cryptoBalanceStore,
-        enhancedCryptoLookup as cryptoLookup,
-        mobileWidth,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import Button from "../Button.svelte";
-    import ButtonGroup from "../ButtonGroup.svelte";
-    import ModalContent from "../ModalContent.svelte";
-    import Overlay from "../Overlay.svelte";
-    import Translatable from "../Translatable.svelte";
-    import AccountInfo from "./AccountInfo.svelte";
-    import BalanceWithRefresh from "./BalanceWithRefresh.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        ledger0: string;
-        ledger1: string;
-        amount0: bigint;
-        amount1: bigint;
-        onClose: () => void;
-        onAccept: () => void;
-    }
-
-    let { ledger0, ledger1, amount0, amount1, onClose, onAccept }: Props = $props();
-
-    let refreshing = false;
-    let error: string | undefined = undefined;
-    //@ts-ignore
-    let balanceWithRefresh: BalanceWithRefresh;
-
-    function reset() {
-        balanceWithRefresh.refresh();
-    }
-
-    let cryptoBalance = $derived($cryptoBalanceStore.get(ledger1) ?? 0n);
-    let tokenDetails0 = $derived($cryptoLookup.get(ledger0)!);
-    let tokenDetails1 = $derived($cryptoLookup.get(ledger1)!);
-    let symbol0 = $derived(tokenDetails0.symbol);
-    let symbol1 = $derived(tokenDetails1.symbol);
-    let transferFees = $derived(BigInt(2) * tokenDetails1.transferFee);
-    let insufficient = $derived(cryptoBalance <= amount1 + transferFees);
-    let valid = $derived(error === undefined && !insufficient);
-    let amount0Text = $derived(client.formatTokens(amount0, tokenDetails0.decimals));
-    let amount1Text = $derived(client.formatTokens(amount1 + transferFees, tokenDetails1.decimals));
-</script>
-
-<Overlay dismissible>
-    <ModalContent>
-        {#snippet header()}
-            <span class="header">
-                <div>
-                    <Translatable
-                        resourceKey={i18nKey(
-                            insufficient ? "p2pSwap.insufficientBalance" : "areYouSure",
-                        )} />
-                </div>
-                <BalanceWithRefresh
-                    bind:this={balanceWithRefresh}
-                    ledger={ledger1}
-                    value={cryptoBalance}
-                    label={i18nKey("p2pSwap.tokenBalance", { token: symbol1 })}
-                    bold />
-            </span>
-        {/snippet}
-        {#snippet body()}
-            <form>
-                <div class="body" class:insufficient>
-                    {#if insufficient}
-                        <p class="info">
-                            <Translatable
-                                resourceKey={i18nKey("p2pSwap.insufficientBalanceMessage", {
-                                    amount: amount1Text,
-                                    token: symbol1,
-                                })} />
-                        </p>
-                        <AccountInfo ledger={ledger1} />
-                        <p><Translatable resourceKey={i18nKey("tokenTransfer.makeDeposit")} /></p>
-                    {:else}
-                        <Translatable
-                            resourceKey={i18nKey("p2pSwap.confirmAccept", {
-                                amount: amount1Text,
-                                token: symbol1,
-                                amountOther: amount0Text,
-                                tokenOther: symbol0,
-                            })} />
-                    {/if}
-                </div>
-            </form>
-        {/snippet}
-        {#snippet footer()}
-            <span>
-                <ButtonGroup>
-                    <Button small={!$mobileWidth} tiny={$mobileWidth} secondary onClick={onClose}
-                        ><Translatable resourceKey={i18nKey("cancel")} /></Button>
-                    {#if insufficient}
-                        <Button
-                            small={!$mobileWidth}
-                            disabled={refreshing}
-                            loading={refreshing}
-                            tiny={$mobileWidth}
-                            onClick={reset}
-                            ><Translatable resourceKey={i18nKey("refresh")} /></Button>
-                    {:else}
-                        <Button
-                            small={!$mobileWidth}
-                            disabled={!valid}
-                            tiny={$mobileWidth}
-                            onClick={onAccept}
-                            ><Translatable resourceKey={i18nKey("yes")} /></Button>
-                    {/if}
-                </ButtonGroup>
-            </span>
-        {/snippet}
-    </ModalContent>
-</Overlay>
-
-<style lang="scss">
-    .header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: $sp2;
-    }
-
-    .body {
-        transition: background-color 100ms ease-in-out;
-        @include font(book, normal, fs-100, 28);
-    }
-
-    .how-to {
-        margin-top: $sp4;
-    }
-
-    .info {
-        margin-bottom: $sp3;
-    }
-</style>
diff --git a/frontend/app/src/components/home/AcceptRulesModal.svelte b/frontend/app/src/components/home/AcceptRulesModal.svelte
deleted file mode 100644
index d383035aa9..0000000000
--- a/frontend/app/src/components/home/AcceptRulesModal.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script lang="ts">
-    import {
-        type OpenChat,
-        captureRulesAcceptanceStore as rulesAcceptanceStore,
-        selectedChatRulesStore,
-        selectedCommunityRulesStore,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import AreYouSure from "../AreYouSure.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    function onAction(accepted: boolean): Promise<void> {
-        $rulesAcceptanceStore?.resolve(accepted);
-        return Promise.resolve();
-    }
-</script>
-
-<AreYouSure
-    title={i18nKey("rules.acceptTitle")}
-    message={i18nKey(
-        client.combineRulesText($selectedChatRulesStore, $selectedCommunityRulesStore),
-    )}
-    yesLabel={i18nKey("rules.accept")}
-    noLabel={i18nKey("rules.reject")}
-    action={onAction} />
diff --git a/frontend/app/src/components/home/AccountInfo.svelte b/frontend/app/src/components/home/AccountInfo.svelte
deleted file mode 100644
index 48a1bd19e4..0000000000
--- a/frontend/app/src/components/home/AccountInfo.svelte
+++ /dev/null
@@ -1,217 +0,0 @@
-<script lang="ts">
-    import {
-        BTC_SYMBOL,
-        CKBTC_SYMBOL,
-        cryptoLookup,
-        currentUserIdStore,
-        currentUserStore,
-        ICP_SYMBOL,
-        Lazy,
-        type OneSecTransferFees,
-        OpenChat,
-    } from "@client";
-    import { i18nKey } from "../../i18n/i18n";
-    import { _ } from "svelte-i18n";
-    import { getContext } from "svelte";
-    import QRCode from "../QRCode.svelte";
-    import Translatable from "../Translatable.svelte";
-    import TruncatedAccount from "./TruncatedAccount.svelte";
-    import NetworkSelector from "./NetworkSelector.svelte";
-    import { rtlStore } from "../../stores/rtl";
-
-    interface Props {
-        qrSize?: "default" | "smaller" | "larger";
-        ledger: string;
-        centered?: boolean;
-        border?: boolean;
-        fullWidthOnMobile?: boolean;
-    }
-
-    let {
-        qrSize = "default",
-        ledger,
-        centered = false,
-        border = true,
-        fullWidthOnMobile = false,
-    }: Props = $props();
-
-    const client = getContext<OpenChat>("client");
-
-    let tokenDetails = $derived($cryptoLookup.get(ledger)!);
-    let selectedNetwork = $state<string>();
-    let isBtc = $derived(tokenDetails.symbol === BTC_SYMBOL);
-    let isBtcNetwork = $derived(selectedNetwork === BTC_SYMBOL);
-    let oneSecEnabled = $derived(tokenDetails.oneSecEnabled && tokenDetails.evmContractAddresses.length > 0);
-    let isOneSecNetwork = $derived(oneSecEnabled && selectedNetwork !== ICP_SYMBOL);
-    let networks = $derived.by(() => {
-        if (isBtc) {
-            return [BTC_SYMBOL, CKBTC_SYMBOL];
-        } else if (oneSecEnabled) {
-            return client.oneSecGetNetworks(tokenDetails.symbol);
-        } else {
-            return [];
-        }
-    });
-    let btcAddress = $state<string>();
-    let oneSecAddress = $state<string>();
-
-    // Whenever the networks list changes, autoselect the first one
-    $effect(() => {
-        selectedNetwork = networks[0];
-    });
-
-    let account = $derived.by(() => {
-        if (tokenDetails.symbol === ICP_SYMBOL) {
-            return $currentUserStore.cryptoAccount;
-        } else if (isBtcNetwork) {
-            return btcAddress;
-        } else if (isOneSecNetwork) {
-            return oneSecAddress;
-        } else {
-            return $currentUserIdStore;
-        }
-    });
-
-    let error = $state();
-    $effect(() => {
-        if (account === undefined) {
-            if (isBtcNetwork) {
-                client.getBtcAddress().then((addr) => btcAddress = addr).catch((e) => error = e);
-            } else if (isOneSecNetwork) {
-                client.getOneSecAddress().then((addr) => oneSecAddress = addr).catch(e => error = e);
-            }
-        }
-    });
-
-    let tokenName = $derived.by(() => {
-        if (isBtc) return selectedNetwork;
-        if (selectedNetwork !== undefined) {
-            return $rtlStore
-                ? `(${selectedNetwork}) ${tokenDetails.symbol}`
-                : `${tokenDetails.symbol} (${selectedNetwork})`;
-        }
-        return tokenDetails.symbol;
-    });
-
-    const btcDepositFeePromise = new Lazy(() => client.getCkbtcMinterDepositInfo()
-        .then((depositInfo) => `~${client.formatTokens(depositInfo.depositFee, 8)}`));
-
-    const oneSecFeesPromise = new Lazy(() => client.oneSecGetTransferFees()
-        // Filter to where source token equals destination token since we're dealing with cross-chain deposits
-        .then((fees) => oneSecFees = fees.filter((f) => f.sourceToken === f.destinationToken)));
-
-    let oneSecFees = $state<OneSecTransferFees[]>();
-    let oneSecFeesForToken = $derived.by(() => {
-        if (!isOneSecNetwork || oneSecFees === undefined) return undefined;
-        return oneSecFees.filter((f) => f.sourceToken === tokenDetails.symbol);
-    });
-    let oneSecProtocolFee = $derived.by(() => {
-        if (oneSecFeesForToken === undefined) return undefined;
-        return oneSecFeesForToken.find((f) => f.sourceChain === selectedNetwork && f.destinationChain === ICP_SYMBOL)?.protocolFeePercent;
-    });
-    let oneSecTransferFee = $derived.by(() => {
-        if (oneSecFeesForToken === undefined) return undefined;
-        return oneSecFeesForToken.find((f) => f.sourceChain === ICP_SYMBOL && f.destinationChain === selectedNetwork)?.latestTransferFee;
-    });
-    let oneSecTotalFee = $derived.by(() => {
-        if (oneSecProtocolFee === undefined || oneSecTransferFee === undefined) return undefined;
-        return `${oneSecProtocolFee}% + ~${client.formatTokens(oneSecTransferFee, tokenDetails.decimals)}`;
-    });
-</script>
-
-<div class="account-info">
-    {#if networks.length > 0 && selectedNetwork !== undefined}
-        <NetworkSelector {networks} bind:selectedNetwork={selectedNetwork} />
-    {/if}
-
-    {#if account === undefined}
-        <div class="generating">
-            {#if error !== undefined}
-                <div class="error-icon"></div>
-            {:else}
-                <div class="spinner"></div>
-            {/if}
-        </div>
-    {:else}
-        <QRCode {fullWidthOnMobile} text={account} size={qrSize} logo={tokenDetails.logo} {border} />
-    {/if}
-    <p class="your-account" class:centered>
-        <Translatable resourceKey={i18nKey("tokenTransfer.yourAccount", { token: tokenName })} />
-    </p>
-    {#if account === undefined}
-        {#if error !== undefined}
-            <span class="error-label">{$_("cryptoAccount.failedToGenerateAddress")}</span>
-        {:else}
-            <span class="label">{$_("generating")}</span>
-        {/if}
-    {:else}
-        <TruncatedAccount {centered} {account} />
-    {/if}
-
-    {#if isBtcNetwork}
-        {#await btcDepositFeePromise.get()}
-            <span class="label">{$_("cryptoAccount.fetchingDepositFee")}</span>
-        {:then amount}
-            <span class="label">{$_("cryptoAccount.networkFee", { values: { amount, token: tokenDetails.symbol }})}</span>
-        {:catch}
-            <span class="error-label">{$_("cryptoAccount.failedToFetchDepositFee")}</span>
-        {/await}
-    {:else if isOneSecNetwork}
-        {#await oneSecFeesPromise.get()}
-            <span class="label">{$_("cryptoAccount.fetchingDepositFee")}</span>
-        {:then}
-            {#if oneSecTotalFee !== undefined}
-                <span class="label">{$_("cryptoAccount.networkFee", { values: { amount: oneSecTotalFee, token: tokenDetails.symbol }})}</span>
-            {:else}
-                <span class="error-label">{$_("cryptoAccount.failedToFetchDepositFee")}</span>
-            {/if}
-        {:catch}
-            <span class="error-label">{$_("cryptoAccount.failedToFetchDepositFee")}</span>
-        {/await}
-    {/if}
-</div>
-
-<style lang="scss">
-    .centered {
-        text-align: center;
-    }
-
-    .account-info {
-        display: flex;
-        flex-direction: column;
-        margin-bottom: $sp4;
-        align-items: center;
-    }
-
-    .your-account {
-        margin-top: $sp4;
-    }
-
-    .generating {
-        height: 298px;
-        width: 298px;
-        border: 1px solid var(--bd);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .spinner {
-        @include loading-spinner(4rem, 2rem, var(--button-spinner), "/assets/spinner.svg");
-        flex: 0 0 toRem(24);
-    }
-
-    .label {
-        color: var(--unread-mute-txt);
-    }
-
-    .error-icon {
-        background-image: url("/assets/dead-bot.svg");
-        height: 4rem;
-        width: 4rem;
-    }
-
-    .error-label {
-        color: var(--error);
-    }
-</style>
diff --git a/frontend/app/src/components/home/AggregateCommonEvents.svelte b/frontend/app/src/components/home/AggregateCommonEvents.svelte
deleted file mode 100644
index e8004cd824..0000000000
--- a/frontend/app/src/components/home/AggregateCommonEvents.svelte
+++ /dev/null
@@ -1,174 +0,0 @@
-<script lang="ts">
-    import type { Level, MemberRole, OpenChat, UserLookup, UserSummary } from "@client";
-    import { allUsersStore, roleAsText } from "@client";
-    import { getContext, onDestroy, onMount } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { i18nKey, interpolate } from "../../i18n/i18n";
-    import { buildDisplayName } from "../../utils/user";
-    import Markdown from "@shared_components/Markdown.svelte";
-
-    interface Props {
-        user: UserSummary | undefined;
-        joined: Set<string>;
-        messagesDeleted: number[];
-        rolesChanged: Map<string, Map<MemberRole, Set<string>>>;
-        observer?: IntersectionObserver;
-        readByMe: boolean;
-        level: Level;
-    }
-
-    let { user, joined, messagesDeleted, rolesChanged, observer, readByMe, level }: Props =
-        $props();
-
-    let deletedMessagesElement: HTMLElement | undefined = $state();
-
-    const client = getContext<OpenChat>("client");
-
-    onMount(() => {
-        if (!readByMe && deletedMessagesElement) {
-            observer?.observe(deletedMessagesElement);
-        }
-    });
-
-    onDestroy(() => {
-        if (deletedMessagesElement) {
-            observer?.unobserve(deletedMessagesElement);
-        }
-    });
-
-    function buildJoinedText(userStore: UserLookup, userIds: Set<string>): string | undefined {
-        return userIds.size > 10
-            ? interpolate(
-                  $_,
-                  i18nKey(
-                      "nUsersJoined",
-                      {
-                          number: userIds.size.toString(),
-                      },
-                      level,
-                      true,
-                  ),
-              )
-            : userIds.size > 0
-              ? interpolate(
-                    $_,
-                    i18nKey(
-                        "userJoined",
-                        {
-                            username: buildUserList(userStore, Array.from(userIds)),
-                        },
-                        level,
-                        true,
-                    ),
-                )
-              : undefined;
-    }
-
-    function buildRoleChangedTextList(
-        userStore: UserLookup,
-        rolesChanged: Map<string, Map<MemberRole, Set<string>>>,
-    ): string[] {
-        return [...rolesChanged.entries()].flatMap(([changedBy, changedByMap]) => {
-            const me = changedBy === user?.userId;
-            const changedByStr = buildDisplayName(userStore, changedBy, me ? "me" : "user");
-
-            return [...changedByMap.entries()].flatMap(([newRole, userIds]) =>
-                buildRoleChangedText(userStore, changedByStr, newRole, Array.from(userIds)),
-            );
-        });
-    }
-
-    function buildRoleChangedText(
-        userStore: UserLookup,
-        changedBy: string,
-        newRole: MemberRole,
-        userIds: string[],
-    ): string {
-        const meChanged = userIds.length == 1 && userIds[0] === user?.userId;
-        const members = buildUserList(userStore, userIds);
-
-        return $_(meChanged ? "yourRoleChanged" : "roleChanged", {
-            values: {
-                changed: members,
-                changedBy,
-                newRole: $_(roleAsText(newRole)),
-            },
-        });
-    }
-
-    function buildUserList(userStore: UserLookup, userIds: string[]): string {
-        return client.getMembersString(
-            user!,
-            userStore,
-            userIds,
-            $_("unknownUser"),
-            $_("you"),
-            user ? client.compareIsNotYouThenUsername(user.userId) : client.compareUsername,
-            false,
-        );
-    }
-
-    function expandDeletedMessages() {
-        client.expandDeletedMessages(new Set(messagesDeleted));
-    }
-    let joinedText = $derived(buildJoinedText($allUsersStore, joined));
-    let deletedText = $derived(
-        messagesDeleted.length > 0
-            ? messagesDeleted.length === 1
-                ? $_("oneMessageDeleted")
-                : $_("nMessagesDeleted", { values: { number: messagesDeleted.length } })
-            : undefined,
-    );
-    let roleChangedTextList = $derived(buildRoleChangedTextList($allUsersStore, rolesChanged));
-</script>
-
-{#if joinedText !== undefined || deletedText !== undefined || roleChangedTextList?.length > 0}
-    <div class="timeline-event">
-        {#if joinedText !== undefined}
-            <p>
-                <Markdown oneLine suppressLinks text={joinedText} />
-            </p>
-        {/if}
-        {#if deletedText !== undefined}
-            <p
-                class="deleted"
-                title={$_("expandDeletedMessages")}
-                bind:this={deletedMessagesElement}
-                data-index={messagesDeleted.join(" ")}
-                onclick={expandDeletedMessages}>
-                {deletedText}
-            </p>
-        {/if}
-        {#each roleChangedTextList as text}
-            <p>
-                <Markdown suppressLinks {text} />
-            </p>
-        {/each}
-    </div>
-{/if}
-
-<style lang="scss">
-    .timeline-event {
-        max-width: 80%;
-        padding: $sp2;
-        background-color: var(--timeline-bg);
-        margin: 0 auto $sp4 auto;
-        text-align: center;
-        color: var(--timeline-txt);
-        @include font(book, normal, fs-70);
-
-        p {
-            margin-bottom: $sp3;
-            &:last-child {
-                margin-bottom: 0;
-            }
-
-            @media (hover: hover) {
-                &.deleted:hover {
-                    cursor: pointer;
-                    text-decoration: underline;
-                }
-            }
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/AnonFooter.svelte b/frontend/app/src/components/home/AnonFooter.svelte
deleted file mode 100644
index 16ce40c078..0000000000
--- a/frontend/app/src/components/home/AnonFooter.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-    import type { OpenChat } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import Markdown from "@shared_components/Markdown.svelte";
-
-    const client = getContext<OpenChat>("client");
-</script>
-
-<div
-    role="button"
-    tabindex="0"
-    on:click={() => client.updateIdentityState({ kind: "logging_in" })}
-    class="anon-footer">
-    <Markdown text={$_("createAccountOrSignIn")} />
-</div>
-
-<style lang="scss">
-    .anon-footer {
-        position: absolute;
-        height: toRem(50);
-        width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        bottom: 0;
-        bottom: var(--safe-inset);
-        cursor: pointer;
-        @include z-index("anon-banner");
-        background-color: var(--notificationBar-bg);
-        color: var(--notificationBar-txt);
-        padding: $sp4 $sp3;
-        font-size: 1.2rem;
-    }
-</style>
diff --git a/frontend/app/src/components/home/AudioAttacher.svelte b/frontend/app/src/components/home/AudioAttacher.svelte
deleted file mode 100644
index 7fcc122e63..0000000000
--- a/frontend/app/src/components/home/AudioAttacher.svelte
+++ /dev/null
@@ -1,129 +0,0 @@
-<script lang="ts">
-    import { iconSize, quantiseWaveform, type AudioContent, type OpenChat } from "@client";
-    import { getContext, onMount } from "svelte";
-    import { _ } from "svelte-i18n";
-    import Microphone from "svelte-material-icons/Microphone.svelte";
-    import RadioboxMarked from "svelte-material-icons/RadioboxMarked.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { toastStore } from "../../stores/toast";
-    import HoverIcon from "../HoverIcon.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        recording?: boolean;
-        percentRecorded?: number;
-        mimeType: string;
-        supported: boolean;
-        onAudioCaptured: (content: AudioContent) => void;
-    }
-
-    let {
-        recording = $bindable(false),
-        percentRecorded = $bindable(0),
-        mimeType,
-        supported = $bindable(),
-        onAudioCaptured,
-    }: Props = $props();
-
-    percentRecorded;
-
-    let mediaRecorder: MediaRecorder | undefined;
-
-    onMount(() => {
-        if (supported) {
-            // TODO - there are problems with this whole thing on safari.
-            // in particular, there is no access to the permissions api
-            if ("permissions" in navigator) {
-                navigator.permissions
-                    //@ts-ignore
-                    .query({ name: "microphone" })
-                    .then(function (result) {
-                        if (result.state === "denied") {
-                            // if they already said no, don't be rude
-                            supported = false;
-                        }
-                    })
-                    .catch((_err) => {
-                        console.log(
-                            "unable to check microphone permissions (probably unsupported)",
-                        );
-                    });
-            }
-        }
-    });
-
-    function stopRecording() {
-        if (mediaRecorder && mediaRecorder.state === "recording") {
-            mediaRecorder.stop();
-        }
-    }
-
-    function toggle() {
-        if (recording) {
-            stopRecording();
-        } else {
-            record();
-        }
-    }
-
-    function record() {
-        if (supported) {
-            navigator.mediaDevices
-                .getUserMedia({ audio: true, video: false })
-                .then((stream) => {
-                    recording = true;
-                    const recordedChunks: Blob[] = [];
-                    const maxSizes = client.maxMediaSizes();
-                    let totalSize = 0;
-                    let truncated = false;
-                    percentRecorded = 0;
-                    mediaRecorder = new MediaRecorder(stream, { mimeType });
-
-                    mediaRecorder.addEventListener("dataavailable", (e) => {
-                        if (e.data.size > 0) recordedChunks.push(e.data);
-                        totalSize += e.data.size;
-                        percentRecorded = (totalSize / maxSizes.audio) * 100;
-                        if (totalSize >= maxSizes.audio) {
-                            truncated = true;
-                            stopRecording();
-                        }
-                    });
-
-                    mediaRecorder.addEventListener("stop", async () => {
-                        const data = await new Blob(recordedChunks).arrayBuffer();
-                        mediaRecorder = undefined;
-                        recording = false;
-                        if (truncated) {
-                            // let the user know if we stopped recording prematurely
-                            toastStore.showFailureToast(i18nKey("maxAudioSize"));
-                        }
-                        const quantised = await quantiseWaveform(data.slice(0));
-                        onAudioCaptured({
-                            kind: "audio_content",
-                            mimeType: mimeType,
-                            blobData: new Uint8Array(data),
-                            blobUrl: client.dataToBlobUrl(data, mimeType),
-                            ...quantised,
-                        });
-                        stream.getTracks().forEach((track) => track.stop());
-                    });
-
-                    mediaRecorder.start(200);
-                })
-                .catch(() => (supported = false)); //catch the case where the user denies access
-        }
-    }
-</script>
-
-{#if supported}
-    <div onclick={toggle}>
-        <HoverIcon title={recording ? $_("stopRecording") : $_("recordAudioMessage")}>
-            {#if recording}
-                <RadioboxMarked size={$iconSize} color={"red"} />
-            {:else}
-                <Microphone size={$iconSize} color={"var(--icon-txt)"} />
-            {/if}
-        </HoverIcon>
-    </div>
-{/if}
diff --git a/frontend/app/src/components/home/AudioContent.svelte b/frontend/app/src/components/home/AudioContent.svelte
deleted file mode 100644
index 5f4179779b..0000000000
--- a/frontend/app/src/components/home/AudioContent.svelte
+++ /dev/null
@@ -1,138 +0,0 @@
-<script lang="ts">
-    import type { AudioContent } from "@client";
-    import ContentCaption from "./ContentCaption.svelte";
-    import MusicNote from "svelte-material-icons/MusicNote.svelte";
-    import Pause from "svelte-material-icons/Pause.svelte";
-    import { setPlayingMedia } from "../../utils/media";
-
-    interface Props {
-        content: AudioContent;
-        edited: boolean;
-        blockLevelMarkdown?: boolean;
-        me: boolean;
-    }
-
-    let { content, edited, blockLevelMarkdown = false, me }: Props = $props();
-
-    let inner = $derived(`var(--audio${me ? "-me" : ""}-inner)`);
-    let note = $derived(`var(--audio${me ? "-me" : ""}-note)`);
-
-    let audioPlayer: HTMLAudioElement | undefined = $state();
-    let playing: boolean = $state(false);
-    let percPlayed: number = $state(0);
-    const circum = 471.24;
-
-    function timeupdate() {
-        if (!audioPlayer) return;
-        const fractionPlayed = Math.min(audioPlayer.currentTime / audioPlayer.duration, 1);
-        percPlayed = fractionPlayed * 100;
-    }
-
-    function togglePlay() {
-        if (playing) {
-            audioPlayer?.pause();
-        } else {
-            audioPlayer?.play();
-        }
-    }
-
-    function onPlay() {
-        if (!audioPlayer) return;
-        playing = true;
-        setPlayingMedia(audioPlayer);
-    }
-</script>
-
-<audio
-    ontimeupdate={timeupdate}
-    preload="metadata"
-    onended={() => (playing = false)}
-    onplay={onPlay}
-    onpause={() => (playing = false)}
-    bind:this={audioPlayer}>
-    <track kind="captions" />
-    {#if content.blobUrl}
-        <source src={content.blobUrl} />
-    {/if}
-</audio>
-
-<div class="circular" role="button" onclick={togglePlay}>
-    <div class="circle">
-        <div class="number">
-            {#if playing}
-                <Pause size={"2.5em"} color={note} />
-            {:else}
-                <MusicNote size={"2.5em"} color={note} />
-            {/if}
-        </div>
-        <svg class="pie" viewBox="0 0 320 320">
-            <clipPath id="hollow">
-                <path
-                    d="M 160 160 m -160 0 a 160 160 0 1 0 320 0 a 160 160 0 1 0 -320 0 Z M 160 160 m -100 0 a 100 100 0 0 1 200 0 a 100 100 0 0 1 -200 0 Z"
-                    style={`fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);`} />
-            </clipPath>
-
-            <circle
-                class:me
-                class="background"
-                cx={160}
-                cy={160}
-                r={150}
-                clip-path="url(#hollow)" />
-
-            {#if percPlayed > 0}
-                <circle
-                    class={`slice`}
-                    cx={160}
-                    cy={160}
-                    r={75}
-                    stroke={inner}
-                    clip-path="url(#hollow)"
-                    transform={`rotate(${-90})`}
-                    stroke-dasharray={`${(percPlayed * circum) / 100} ${circum}`} />
-            {/if}
-        </svg>
-    </div>
-</div>
-
-<ContentCaption caption={content.caption} {edited} {blockLevelMarkdown} />
-
-<style lang="scss">
-    $size: 120px;
-
-    .circle {
-        position: relative;
-        height: $size;
-        width: $size;
-        margin: auto;
-        position: relative;
-        background: transparent;
-
-        .number {
-            position: absolute;
-            top: calc(50% - 1.25em);
-            left: calc(50% - 1.25em);
-        }
-
-        .background {
-            fill: var(--audio-outer);
-
-            &.me {
-                fill: var(--audio-me-outer);
-            }
-        }
-    }
-
-    .slice {
-        fill: transparent;
-        transform-origin: 50% 50%;
-        stroke-width: 150px;
-        cursor: pointer;
-        transition: stroke-dasharray 100ms ease-in-out;
-    }
-
-    .pie {
-        width: min(250px, 100%);
-        margin-bottom: $sp5;
-    }
-</style>
diff --git a/frontend/app/src/components/home/BlockedContent.svelte b/frontend/app/src/components/home/BlockedContent.svelte
deleted file mode 100644
index 66af800553..0000000000
--- a/frontend/app/src/components/home/BlockedContent.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<svelte:options immutable />
-
-<script lang="ts">
-    import Translatable from "../Translatable.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-</script>
-
-<div class="blocked">
-    <Translatable resourceKey={i18nKey("messageBlocked")} />
-</div>
-
-<style lang="scss">
-    .blocked {
-        @include font(light, italic, fs-80);
-    }
-</style>
diff --git a/frontend/app/src/components/home/BotChangedEvent.svelte b/frontend/app/src/components/home/BotChangedEvent.svelte
deleted file mode 100644
index 36bc32f3d7..0000000000
--- a/frontend/app/src/components/home/BotChangedEvent.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script lang="ts">
-    import { allUsersStore, botState } from "@client";
-    import type { BotAdded, BotRemoved, BotUpdated } from "@shared";
-    import { _ } from "svelte-i18n";
-    import { buildDisplayName } from "../../utils/user";
-    import NonMessageEvent from "./NonMessageEvent.svelte";
-
-    interface Props {
-        event: BotAdded | BotRemoved | BotUpdated;
-        timestamp: bigint;
-        userId: string;
-        changedBy: string;
-        resourceKey: string;
-    }
-
-    let { event, timestamp, userId, changedBy, resourceKey }: Props = $props();
-    let me = $derived(userId === changedBy);
-    let text = $derived.by(() => {
-        const bot = botState.externalBots.get(event.userId);
-        const username = buildDisplayName($allUsersStore, changedBy, me ? "me" : "user");
-        return $_(resourceKey, { values: { botname: bot?.name, username } });
-    });
-</script>
-
-<NonMessageEvent {text} {timestamp} />
diff --git a/frontend/app/src/components/home/BotPlaceholderContent.svelte b/frontend/app/src/components/home/BotPlaceholderContent.svelte
deleted file mode 100644
index d403011eae..0000000000
--- a/frontend/app/src/components/home/BotPlaceholderContent.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script lang="ts">
-    import Typing from "@shared_components/Typing.svelte";
-</script>
-
-<span class="placeholder">
-    <Typing />
-</span>
-
-<style lang="scss">
-    .placeholder {
-        padding: $sp4 0;
-    }
-</style>
diff --git a/frontend/app/src/components/home/ChatEvent.svelte b/frontend/app/src/components/home/ChatEvent.svelte
deleted file mode 100644
index 0b2af1199e..0000000000
--- a/frontend/app/src/components/home/ChatEvent.svelte
+++ /dev/null
@@ -1,361 +0,0 @@
-<script lang="ts">
-    import { findUser } from "@src/utils/user";
-    import {
-        allUsersStore,
-        currentUserIdStore,
-        currentUserStore,
-        selectedChatWebhooksStore,
-        typing,
-        type ChatEvent,
-        type ChatIdentifier,
-        type ChatType,
-        type EnhancedReplyContext,
-        type EventWrapper,
-        type Level,
-        type Message,
-        type OpenChat,
-        type UserSummary,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { i18nKey, interpolate } from "../../i18n/i18n";
-    import AggregateCommonEvents from "./AggregateCommonEvents.svelte";
-    import BotChangedEvent from "./BotChangedEvent.svelte";
-    import ChatFrozenEvent from "./ChatFrozenEvent.svelte";
-    import ChatMessage from "./ChatMessage.svelte";
-    import ChatUnfrozenEvent from "./ChatUnfrozenEvent.svelte";
-    import DirectChatCreatedEvent from "./DirectChatCreatedEvent.svelte";
-    import DisappearingMessageTimeUpdated from "./DisappearingMessageTimeUpdated.svelte";
-    import GroupChangedEvent from "./GroupChangedEvent.svelte";
-    import GroupChatCreatedEvent from "./GroupChatCreatedEvent.svelte";
-    import GroupInviteCodeChangedEvent from "./GroupInviteCodeChangedEvent.svelte";
-    import GroupRulesChangedEvent from "./GroupRulesChangedEvent.svelte";
-    import GroupVisibilityChangedEvent from "./GroupVisibilityChangedEvent.svelte";
-    import MembersChangedEvent from "./MembersChangedEvent.svelte";
-    import PermissionsChangedEvent from "./PermissionsChangedEvent.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        chatId: ChatIdentifier;
-        chatType: ChatType;
-        event: EventWrapper<ChatEvent>;
-        first: boolean;
-        last: boolean;
-        me: boolean;
-        accepted: boolean;
-        confirmed: boolean;
-        failed: boolean;
-        readByMe: boolean;
-        observer?: IntersectionObserver;
-        focused: boolean;
-        readonly: boolean;
-        pinned: boolean;
-        canPin: boolean;
-        canBlockUsers: boolean;
-        canDelete: boolean;
-        canSendAny: boolean;
-        canReact: boolean;
-        canInvite: boolean;
-        canReplyInThread: boolean;
-        publicGroup: boolean;
-        editing: boolean;
-        supportsEdit: boolean;
-        supportsReply: boolean;
-        collapsed: boolean;
-        threadRootMessage: Message | undefined;
-        onExpandMessage?: (() => void) | undefined;
-        onReplyTo: (replyContext: EnhancedReplyContext) => void;
-        onCollapseMessage: () => void;
-        onGoToMessageIndex: (args: { index: number }) => void;
-        onEditEvent: (ev: EventWrapper<Message>) => void;
-        onRemovePreview: (event: EventWrapper<Message>, url: string) => void;
-    }
-
-    let {
-        chatId,
-        chatType,
-        event,
-        first,
-        last,
-        me,
-        accepted,
-        confirmed,
-        failed,
-        readByMe,
-        observer,
-        focused,
-        readonly,
-        pinned,
-        canPin,
-        canBlockUsers,
-        canDelete,
-        canSendAny,
-        canReact,
-        canInvite,
-        canReplyInThread,
-        publicGroup,
-        editing,
-        supportsEdit,
-        supportsReply,
-        collapsed,
-        threadRootMessage,
-        onExpandMessage = undefined,
-        onReplyTo,
-        onCollapseMessage,
-        onGoToMessageIndex,
-        onEditEvent,
-        onRemovePreview,
-    }: Props = $props();
-
-    let userSummary = $derived<UserSummary>({
-        kind: "user",
-        userId: $currentUserStore.userId,
-        username: $currentUserStore.username,
-        displayName: $currentUserStore.displayName,
-        updated: BigInt(0),
-        suspended: false,
-        diamondStatus: "inactive",
-        chitBalance: 0,
-        streak: 0,
-        maxStreak: 0,
-        isUniquePerson: $currentUserStore.isUniquePerson,
-        totalChitEarned: 0,
-        hideOnlineStatus: false,
-    });
-
-    let levelType = $derived((chatType === "channel" ? "channel" : "group") as Level);
-    let level = $derived($_(`level.${levelType}`).toLowerCase());
-    let messageContext = $derived({
-        chatId,
-        threadRootMessageIndex: threadRootMessage?.messageIndex,
-    });
-    let hidden = $derived(
-        event.event.kind === "message" &&
-            event.event.content.kind === "message_reminder_created_content" &&
-            event.event.content.hidden,
-    );
-
-    function editEvent() {
-        onEditEvent(event as EventWrapper<Message>);
-    }
-
-    function deleteFailedMessage() {
-        if (event.event.kind === "message") {
-            client.deleteFailedMessage(
-                chatId,
-                event.event.messageId,
-                threadRootMessage?.messageIndex,
-            );
-        }
-    }
-
-    function retrySend() {
-        const message = event as EventWrapper<Message>;
-        client.sendMessageWithContent(
-            messageContext,
-            message.event.content,
-            message.event.blockLevelMarkdown,
-            [],
-            message.event.forwarded,
-            message.event.messageId,
-        );
-    }
-
-    let sender = $derived(
-        event.event.kind === "message"
-            ? findUser(event.event.sender, $allUsersStore, $selectedChatWebhooksStore)
-            : undefined,
-    );
-</script>
-
-{#if event.event.kind === "message"}
-    {#if !hidden}
-        <ChatMessage
-            {sender}
-            senderTyping={client.isTyping($typing, event.event.sender, messageContext)}
-            {focused}
-            {observer}
-            {accepted}
-            {confirmed}
-            {failed}
-            {readByMe}
-            {chatId}
-            {chatType}
-            {me}
-            {first}
-            {last}
-            {readonly}
-            {pinned}
-            {canPin}
-            {canBlockUsers}
-            {canDelete}
-            canQuoteReply={canSendAny}
-            {canReact}
-            canStartThread={canReplyInThread}
-            {publicGroup}
-            {editing}
-            {threadRootMessage}
-            {supportsEdit}
-            {supportsReply}
-            {collapsed}
-            senderContext={event.event.senderContext}
-            {onGoToMessageIndex}
-            {onReplyTo}
-            onRetrySend={retrySend}
-            onEditMessage={editEvent}
-            {onExpandMessage}
-            {onCollapseMessage}
-            onRemovePreview={(url) => onRemovePreview(event as EventWrapper<Message>, url)}
-            onDeleteFailedMessage={deleteFailedMessage}
-            eventIndex={event.index}
-            timestamp={event.timestamp}
-            expiresAt={event.expiresAt}
-            msg={event.event} />
-    {/if}
-{:else if event.event.kind === "group_chat_created"}
-    <GroupChatCreatedEvent {chatType} event={event.event} {me} timestamp={event.timestamp} />
-{:else if event.event.kind === "direct_chat_created"}
-    <DirectChatCreatedEvent timestamp={event.timestamp} />
-{:else if event.event.kind === "members_added"}
-    <MembersChangedEvent
-        level={levelType}
-        user={userSummary}
-        changed={event.event.userIds}
-        changedBy={event.event.addedBy}
-        resourceKey={"addedBy"}
-        timestamp={event.timestamp} />
-{:else if event.event.kind === "users_invited"}
-    <MembersChangedEvent
-        level={levelType}
-        user={userSummary}
-        changed={event.event.userIds}
-        changedBy={event.event.invitedBy}
-        resourceKey={"invitedBy"}
-        timestamp={event.timestamp} />
-{:else if event.event.kind === "members_removed"}
-    <MembersChangedEvent
-        level={levelType}
-        user={userSummary}
-        changed={event.event.userIds}
-        changedBy={event.event.removedBy}
-        resourceKey={"removedBy"}
-        timestamp={event.timestamp} />
-{:else if event.event.kind === "aggregate_common_events"}
-    <AggregateCommonEvents
-        level={levelType}
-        {observer}
-        {readByMe}
-        user={userSummary}
-        joined={event.event.usersJoined}
-        messagesDeleted={event.event.messagesDeleted}
-        rolesChanged={event.event.rolesChanged} />
-{:else if event.event.kind === "users_blocked"}
-    <MembersChangedEvent
-        level={levelType}
-        user={userSummary}
-        changed={event.event.userIds}
-        changedBy={event.event.blockedBy}
-        resourceKey={"blockedBy"}
-        timestamp={event.timestamp} />
-{:else if event.event.kind === "users_unblocked"}
-    <MembersChangedEvent
-        level={levelType}
-        user={userSummary}
-        changed={event.event.userIds}
-        changedBy={event.event.unblockedBy}
-        resourceKey={"unblockedBy"}
-        timestamp={event.timestamp} />
-{:else if event.event.kind === "name_changed"}
-    <GroupChangedEvent
-        {level}
-        user={userSummary}
-        changedBy={event.event.changedBy}
-        property={interpolate($_, i18nKey("groupName", undefined, levelType, true))}
-        timestamp={event.timestamp} />
-{:else if event.event.kind === "desc_changed"}
-    <GroupChangedEvent
-        {level}
-        user={userSummary}
-        changedBy={event.event.changedBy}
-        property={interpolate($_, i18nKey("groupDesc", undefined, levelType, true))}
-        timestamp={event.timestamp} />
-{:else if event.event.kind === "rules_changed"}
-    <GroupRulesChangedEvent user={userSummary} event={event.event} timestamp={event.timestamp} />
-{:else if event.event.kind === "avatar_changed"}
-    <GroupChangedEvent
-        {level}
-        user={userSummary}
-        changedBy={event.event.changedBy}
-        property={interpolate($_, i18nKey("groupAvatar", undefined, levelType, true))}
-        timestamp={event.timestamp} />
-{:else if event.event.kind === "gate_updated"}
-    <GroupChangedEvent
-        {level}
-        user={userSummary}
-        changedBy={event.event.updatedBy}
-        property={$_("access.gate").toLowerCase()}
-        timestamp={event.timestamp} />
-{:else if event.event.kind === "external_url_updated"}
-    <GroupChangedEvent
-        {level}
-        user={userSummary}
-        changedBy={event.event.updatedBy}
-        property={$_("externalContent.name").toLowerCase()}
-        timestamp={event.timestamp} />
-{:else if event.event.kind === "group_visibility_changed"}
-    <GroupVisibilityChangedEvent
-        level={levelType}
-        user={userSummary}
-        isPublic={event.event.public}
-        messagesVisibleToNonMembers={event.event.messagesVisibleToNonMembers}
-        changedBy={event.event.changedBy}
-        timestamp={event.timestamp} />
-{:else if event.event.kind === "group_invite_code_changed"}
-    {#if canInvite}
-        <GroupInviteCodeChangedEvent
-            user={userSummary}
-            change={event.event.change}
-            changedBy={event.event.changedBy}
-            timestamp={event.timestamp} />
-    {/if}
-{:else if event.event.kind === "permissions_changed"}
-    <PermissionsChangedEvent
-        level={levelType}
-        user={userSummary}
-        event={event.event}
-        timestamp={event.timestamp} />
-{:else if event.event.kind === "events_ttl_updated"}
-    <DisappearingMessageTimeUpdated
-        user={userSummary}
-        changedBy={event.event.updatedBy}
-        newTimeToLive={event.event.newTimeToLive}
-        timestamp={event.timestamp} />
-{:else if event.event.kind === "chat_frozen"}
-    <ChatFrozenEvent user={userSummary} event={event.event} timestamp={event.timestamp} />
-{:else if event.event.kind === "chat_unfrozen"}
-    <ChatUnfrozenEvent user={userSummary} event={event.event} timestamp={event.timestamp} />
-{:else if event.event.kind === "bot_added"}
-    <BotChangedEvent
-        changedBy={event.event.addedBy}
-        resourceKey={"bots.events.add"}
-        event={event.event}
-        userId={$currentUserIdStore}
-        timestamp={event.timestamp} />
-{:else if event.event.kind === "bot_removed"}
-    <BotChangedEvent
-        changedBy={event.event.removedBy}
-        resourceKey={"bots.events.remove"}
-        event={event.event}
-        userId={$currentUserIdStore}
-        timestamp={event.timestamp} />
-{:else if event.event.kind === "bot_updated"}
-    <BotChangedEvent
-        changedBy={event.event.updatedBy}
-        resourceKey={"bots.events.update"}
-        event={event.event}
-        userId={$currentUserIdStore}
-        timestamp={event.timestamp} />
-{:else if !client.isEventKindHidden(event.event.kind, publicGroup && chatType === "channel")}
-    <div>Unexpected event type: {event.event.kind}</div>
-{/if}
diff --git a/frontend/app/src/components/home/ChatEventList.svelte b/frontend/app/src/components/home/ChatEventList.svelte
deleted file mode 100644
index d8bafaedfe..0000000000
--- a/frontend/app/src/components/home/ChatEventList.svelte
+++ /dev/null
@@ -1,226 +0,0 @@
-<script lang="ts">
-    import type {
-        ChatSummary,
-        EventWrapper,
-        Mention,
-        Message,
-        MessageContext,
-    } from "@client";
-    import { iconSize } from "@client";
-    import { type Snippet } from "svelte";
-    import { _ } from "svelte-i18n";
-    import ArrowDown from "svelte-material-icons/ArrowDown.svelte";
-    import ArrowUp from "svelte-material-icons/ArrowUp.svelte";
-    import SharedChatEventList, {
-        type ChatEventListArgs,
-    } from "@shared_components/ChatEventList.svelte";
-    import type { FlatChatItem } from "@shared_components/flatChatItems";
-    import { rtlStore } from "../../stores/rtl";
-    import { pop } from "../../utils/transition";
-    import Fab from "../Fab.svelte";
-    import TimelineDate from "./TimelineDate.svelte";
-
-    interface Props {
-        rootSelector: string;
-        unreadMessages: number;
-        chat: ChatSummary;
-        messagesDiv: HTMLDivElement | undefined;
-        messagesDivHeight: number;
-        initialised: boolean;
-        items: FlatChatItem[];
-        readonly: boolean;
-        firstUnreadMention: Mention | undefined;
-        footer: boolean;
-        threadRootEvent: EventWrapper<Message> | undefined;
-        maintainScroll: boolean;
-        scrollTopButtonEnabled?: boolean;
-        row: Snippet<[FlatChatItem, ChatEventListArgs]>;
-        visible: boolean;
-    }
-
-    let {
-        rootSelector,
-        unreadMessages,
-        chat,
-        messagesDiv = $bindable(),
-        messagesDivHeight = $bindable(),
-        initialised = $bindable(),
-        items,
-        readonly,
-        firstUnreadMention,
-        footer,
-        threadRootEvent,
-        maintainScroll,
-        scrollTopButtonEnabled = false,
-        row,
-        visible,
-    }: Props = $props();
-
-    let list: SharedChatEventList | undefined = $state();
-    let stickyDateEl: HTMLElement | undefined = $state();
-    let stickyDateElTop = $derived(stickyDateEl?.getBoundingClientRect()?.top);
-    let stickyDateTimestamp = $state<bigint | undefined>(undefined);
-
-    export function scrollToMessageIndex(
-        context: MessageContext,
-        index: number,
-        preserveFocus: boolean,
-    ): Promise<void> {
-        return list?.scrollToMessageIndex(context, index, preserveFocus) ?? Promise.resolve();
-    }
-
-    export function onMessageWindowLoaded(args: {
-        context: MessageContext;
-        messageIndex: number | undefined;
-        initialLoad: boolean;
-    }): Promise<void> {
-        return list?.onMessageWindowLoaded(args) ?? Promise.resolve();
-    }
-</script>
-
-<div class="sticky-date" bind:this={stickyDateEl}>
-    {#if stickyDateTimestamp !== undefined}
-        <TimelineDate timestamp={stickyDateTimestamp} />
-    {/if}
-</div>
-
-<SharedChatEventList
-    bind:this={list}
-    {rootSelector}
-    {chat}
-    {threadRootEvent}
-    {items}
-    {readonly}
-    {maintainScroll}
-    {visible}
-    bind:initialised
-    bind:messagesDiv
-    bind:messagesDivHeight
-    viewportClass={"desktop-event-list"}
-    {stickyDateElTop}
-    bind:stickyDateTimestamp
-    {row}>
-    {#snippet fabs({
-        showGoToTop,
-        showGoToBottom,
-        loadingFromUserScroll,
-        scrollToTop,
-        scrollToLast,
-        scrollToMention,
-    })}
-        {#if scrollTopButtonEnabled}
-            <div
-                title={$_("scrollToTop")}
-                class:show={showGoToTop}
-                class="fab to-top"
-                class:rtl={$rtlStore}>
-                <Fab on:click={scrollToTop}>
-                    <ArrowUp size={$iconSize} color={"#fff"} />
-                </Fab>
-            </div>
-        {/if}
-
-        {#if !readonly}
-            <div
-                title={$_("goToFirstMention")}
-                class:show={firstUnreadMention !== undefined}
-                class="fab mentions"
-                class:rtl={$rtlStore}>
-                <Fab on:click={() => scrollToMention(firstUnreadMention)}>
-                    <div in:pop={{ duration: 1500 }} class="unread">
-                        <div class="mention-count">@</div>
-                    </div>
-                </Fab>
-            </div>
-        {/if}
-        <div
-            title={$_("goToLatestMessage")}
-            class:show={showGoToBottom || unreadMessages > 0}
-            class="fab to-bottom"
-            class:footer
-            class:rtl={$rtlStore}>
-            <Fab on:click={scrollToLast}>
-                {#if loadingFromUserScroll}
-                    <div class="spinner"></div>
-                {:else if unreadMessages > 0}
-                    <div in:pop={{ duration: 1500 }} class="unread">
-                        <div class="unread-count">
-                            {unreadMessages > 999 ? "999+" : unreadMessages}
-                        </div>
-                    </div>
-                {:else}
-                    <ArrowDown size={$iconSize} color={"#fff"} />
-                {/if}
-            </Fab>
-        </div>
-    {/snippet}
-</SharedChatEventList>
-
-<style lang="scss">
-    :global(.vcl-viewport.desktop-event-list) {
-        @include message-list();
-        background-color: var(--currentChat-msgs-bg);
-    }
-
-    .sticky-date {
-        position: absolute;
-        top: 90px;
-        left: 50%;
-        transform: translateX(calc(-50% - 3px));
-        @include z-index("date-label");
-    }
-
-    .spinner {
-        @include loading-spinner(1em, 0.5em, var(--button-spinner), "/assets/plain-spinner.svg");
-    }
-
-    .fab {
-        transition: opacity ease-in-out 300ms;
-        position: absolute;
-        @include z-index("fab");
-        right: 20px;
-        bottom: 0;
-        opacity: 0;
-        pointer-events: none;
-
-        &.show {
-            opacity: 1;
-            pointer-events: all;
-        }
-
-        &.rtl {
-            left: $sp6;
-            right: unset;
-        }
-    }
-
-    .mentions {
-        bottom: 140px;
-
-        .mention-count {
-            @include font(bold, normal, fs-140);
-        }
-    }
-
-    .unread {
-        color: var(--button-txt);
-        text-align: center;
-        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
-
-        .unread-count {
-            line-height: 80%;
-        }
-    }
-
-    .to-bottom {
-        bottom: 24px;
-        &.footer {
-            bottom: 80px;
-        }
-    }
-
-    .to-top {
-        top: 95px;
-        height: $sp7;
-    }
-</style>
diff --git a/frontend/app/src/components/home/ChatFrozenEvent.svelte b/frontend/app/src/components/home/ChatFrozenEvent.svelte
deleted file mode 100644
index d771a47f5f..0000000000
--- a/frontend/app/src/components/home/ChatFrozenEvent.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-    import type { UserSummary } from "@client";
-    import { allUsersStore } from "@client";
-    import type { ChatFrozenEvent } from "@shared";
-    import { _ } from "svelte-i18n";
-    import { buildDisplayName } from "../../utils/user";
-    import NonMessageEvent from "./NonMessageEvent.svelte";
-
-    interface Props {
-        event: ChatFrozenEvent;
-        user: UserSummary | undefined;
-        timestamp: bigint;
-    }
-
-    let { event, user, timestamp }: Props = $props();
-
-    let me = $derived(event.frozenBy === user?.userId);
-    let frozenByStr = $derived(
-        buildDisplayName($allUsersStore, event.frozenBy, me ? "me" : "user"),
-    );
-
-    let chatFrozenByText = $derived(
-        $_("chatFrozenBy", {
-            values: {
-                frozenBy: frozenByStr,
-            },
-        }),
-    );
-
-    let text = $derived(
-        event.reason ? `${chatFrozenByText}\n${$_("reason")}: ${event.reason}` : chatFrozenByText,
-    );
-</script>
-
-<NonMessageEvent {text} {timestamp} />
diff --git a/frontend/app/src/components/home/ChatList.svelte b/frontend/app/src/components/home/ChatList.svelte
deleted file mode 100644
index 6367601d21..0000000000
--- a/frontend/app/src/components/home/ChatList.svelte
+++ /dev/null
@@ -1,461 +0,0 @@
-<script lang="ts">
-    import { scrollLimits, menuCloser } from "component-lib";
-    import {
-        allUsersStore,
-        type BotMatch,
-        chatIdentifiersEqual,
-        chatIdentifierToString,
-        type ChatListScope,
-        chatListScopesEqual,
-        chatListScopeStore,
-        chatSummariesListStore,
-        type ChatSummary as ChatSummaryType,
-        type CombinedUnreadCounts,
-        currentUserIdStore,
-        emptyCombinedUnreadCounts,
-        type GroupMatch,
-        type GroupSearchResponse,
-        mobileWidth,
-        numberOfThreadsStore,
-        OpenChat,
-        publish,
-        ROLE_NONE,
-        routeForChatIdentifier,
-        routeForScope,
-        selectedChatIdStore,
-        selectedCommunitySummaryStore,
-        unreadCommunityChannelCountsStore,
-        unreadDirectAndGroupCountsStore,
-        unreadFavouriteCountsStore,
-        type UserSummary,
-    } from "@client";
-    import { navigate } from "@utils/navigation";
-    import { getContext, tick } from "svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { chatListView } from "../../stores/chatListView";
-    import Button from "../Button.svelte";
-    import ButtonGroup from "../ButtonGroup.svelte";
-    import FilteredUsername from "@shared_components/FilteredUsername.svelte";
-    import Translatable from "../Translatable.svelte";
-    import ChatListSearch from "./ChatListSearch.svelte";
-    import ChatListSectionButton from "./ChatListSectionButton.svelte";
-    import ChatSummary from "./ChatSummary.svelte";
-    import BrowseChannels from "./communities/details/BrowseChannels.svelte";
-    import DirectAndGroupChatsHeader from "./communities/DirectAndGroupChatsHeader.svelte";
-    import FavouriteChatsHeader from "./communities/FavouriteChatsHeader.svelte";
-    import PreviewWrapper from "./communities/PreviewWrapper.svelte";
-    import SelectedCommunityHeader from "./communities/SelectedCommunityHeader.svelte";
-    import Badges from "./profile/Badges.svelte";
-    import SearchResult from "./SearchResult.svelte";
-    import ThreadPreviews from "./thread/ThreadPreviews.svelte";
-    import ActiveCallSummary from "./video/ActiveCallSummary.svelte";
-
-    const TO_SHOW = 30;
-    const client = getContext<OpenChat>("client");
-
-    let groupSearchResults: Promise<GroupSearchResponse> | undefined = $state(undefined);
-    let userAndBotSearchResults: Promise<(UserSummary | BotMatch)[]> | undefined =
-        $state(undefined);
-    let searchTerm: string = $state("");
-    let searchResultsAvailable: boolean = $state(false);
-    let previousScope: ChatListScope = $chatListScopeStore;
-    let previousView: "chats" | "threads" = $chatListView;
-    let chatsToShow = $state(TO_SHOW);
-    let rendering = $state(false);
-
-    function insideBottom() {
-        if (rendering) return;
-        rendering = true;
-        chatsToShow = Math.min(allMatchingChats.length, chatsToShow + TO_SHOW / 2);
-        tick().then(() => (rendering = false));
-    }
-
-    $effect(() => {
-        if (!chatListScopesEqual(previousScope, $chatListScopeStore)) {
-            onScopeChanged();
-        } else if (previousView !== $chatListView) {
-            onViewChanged();
-        }
-    });
-
-    function anythingUnread(unread: CombinedUnreadCounts): boolean {
-        return (
-            unread.chats.muted +
-                unread.chats.unmuted +
-                unread.threads.muted +
-                unread.threads.unmuted >
-            0
-        );
-    }
-
-    function cancelPreview() {
-        if ($selectedCommunitySummaryStore) {
-            client.removeCommunity($selectedCommunitySummaryStore.id);
-            navigate(routeForScope(client.getDefaultScope()));
-        }
-    }
-
-    function chatWith(userId: string): void {
-        publish("chatWith", { kind: "direct_chat", userId });
-    }
-
-    /**
-     * All we need to do here is push the route
-     * the routing will take care of the rest
-     */
-    function selectGroup({ chatId }: GroupMatch): void {
-        navigate(routeForChatIdentifier($chatListScopeStore.kind, chatId));
-        searchTerm = "";
-    }
-
-    function chatSelected({ id }: ChatSummaryType): void {
-        const url = routeForChatIdentifier($chatListScopeStore.kind, id);
-        navigate(url);
-        searchTerm = "";
-    }
-
-    function setView(view: "chats" | "threads"): void {
-        chatListView.set(view);
-
-        if (view === "threads") {
-            searchTerm = "";
-        }
-    }
-
-    function onScopeChanged() {
-        previousScope = $chatListScopeStore;
-        chatListView.set("chats");
-        onViewChanged();
-    }
-
-    function onViewChanged() {
-        previousView = $chatListView;
-        chatsToShow = TO_SHOW;
-    }
-
-    function userOrBotKey(match: UserSummary | BotMatch): string {
-        switch (match.kind) {
-            case "bot_match":
-                return match.id;
-            default:
-                return match.userId;
-        }
-    }
-
-    let showPreview = $derived(
-        $mobileWidth &&
-            $selectedCommunitySummaryStore?.membership.role === ROLE_NONE &&
-            $selectedChatIdStore === undefined,
-    );
-    let user = $derived($allUsersStore.get($currentUserIdStore));
-    let lowercaseSearch = $derived(searchTerm.toLowerCase());
-    let showBrowseChannels = $derived($chatListScopeStore.kind === "community");
-    let unreadCounts = $derived.by(() => {
-        switch ($chatListScopeStore.kind) {
-            case "chats": {
-                return $unreadDirectAndGroupCountsStore;
-            }
-            case "favourite": {
-                return $unreadFavouriteCountsStore;
-            }
-            case "community": {
-                return (
-                    $unreadCommunityChannelCountsStore.get($chatListScopeStore.id) ??
-                    emptyCombinedUnreadCounts()
-                );
-            }
-            default:
-                return emptyCombinedUnreadCounts();
-        }
-    });
-    let canMarkAllRead = $derived(anythingUnread(unreadCounts));
-    $effect(() => {
-        if ($numberOfThreadsStore === 0) {
-            chatListView.set("chats");
-        }
-    });
-    $effect(() => {
-        if ($chatListView === "threads" && searchTerm !== "") {
-            chatListView.set("chats");
-        }
-    });
-    let allMatchingChats = $derived(
-        searchTerm !== ""
-            ? $chatSummariesListStore.filter((c) => client.chatMatchesSearch(lowercaseSearch, c))
-            : $chatSummariesListStore,
-    );
-    let chats = $derived(allMatchingChats.slice(0, chatsToShow));
-</script>
-
-<!-- svelte-ignore missing_declaration -->
-{#if user}
-    {#if $chatListScopeStore.kind === "chats"}
-        <DirectAndGroupChatsHeader {canMarkAllRead} />
-    {:else if $chatListScopeStore.kind === "favourite"}
-        <FavouriteChatsHeader {canMarkAllRead} />
-    {:else if $selectedCommunitySummaryStore && $chatListScopeStore.kind === "community"}
-        <SelectedCommunityHeader community={$selectedCommunitySummaryStore} {canMarkAllRead} />
-    {/if}
-
-    <ChatListSearch
-        bind:userAndBotsSearchResults={userAndBotSearchResults}
-        bind:groupSearchResults
-        bind:searchResultsAvailable
-        bind:searchTerm />
-
-    {#if $numberOfThreadsStore > 0}
-        <div class="section-selector">
-            <ChatListSectionButton
-                onClick={() => setView("chats")}
-                unread={unreadCounts.chats}
-                title={i18nKey("chats")}
-                selected={$chatListView === "chats"} />
-            <ChatListSectionButton
-                unread={unreadCounts.threads}
-                onClick={() => setView("threads")}
-                title={i18nKey("thread.previewTitle")}
-                selected={$chatListView === "threads"} />
-        </div>
-    {/if}
-
-    <div class="body">
-        {#if $chatListView === "threads"}
-            <ThreadPreviews />
-        {:else}
-            <div
-                use:scrollLimits={{
-                    threshold: 200,
-                    onEnd: insideBottom,
-                }}
-                use:menuCloser
-                class="chat-summaries">
-                {#if searchResultsAvailable && chats.length > 0}
-                    <h3 class="search-subtitle">
-                        <Translatable resourceKey={i18nKey("yourChats")} />
-                    </h3>
-                {/if}
-
-                {#each chats as chatSummary (chatIdentifierToString(chatSummary.id))}
-                    <ChatSummary
-                        {chatSummary}
-                        selected={chatIdentifiersEqual($selectedChatIdStore, chatSummary.id)}
-                        visible={searchTerm !== "" || !chatSummary.membership.archived}
-                        onChatSelected={chatSelected} />
-                {/each}
-
-                {#if userAndBotSearchResults !== undefined}
-                    <div class="search-matches">
-                        {#await userAndBotSearchResults then resp}
-                            {#if resp.length > 0}
-                                <h3 class="search-subtitle">
-                                    <Translatable resourceKey={i18nKey("usersAndBots")} />
-                                </h3>
-                                {#each resp as match, i (userOrBotKey(match))}
-                                    {#if match.kind === "bot_match"}
-                                        <SearchResult
-                                            index={i}
-                                            avatarUrl={match.avatarUrl ?? "/assets/bot_avatar.svg"}
-                                            onclick={() => chatWith(match.id)}>
-                                            <div class="user-result">
-                                                <h4>
-                                                    <FilteredUsername
-                                                        {searchTerm}
-                                                        username={match.name} />
-                                                </h4>
-                                                <div class="username">
-                                                    {match.definition.description}
-                                                </div>
-                                            </div>
-                                        </SearchResult>
-                                    {:else}
-                                        <SearchResult
-                                            index={i}
-                                            avatarUrl={client.userAvatarUrl(match)}
-                                            onclick={() => chatWith(match.userId)}>
-                                            <div class="user-result">
-                                                <h4>
-                                                    <FilteredUsername
-                                                        {searchTerm}
-                                                        username={match.displayName ??
-                                                            match.username} />
-
-                                                    <Badges
-                                                        uniquePerson={match.isUniquePerson}
-                                                        diamondStatus={match.diamondStatus}
-                                                        streak={match.streak} />
-                                                </h4>
-                                                <div class="username">
-                                                    <FilteredUsername
-                                                        {searchTerm}
-                                                        username={"@" + match.username} />
-                                                </div>
-                                            </div>
-                                        </SearchResult>
-                                    {/if}
-                                {/each}
-                            {/if}
-                        {/await}
-                    </div>
-                {/if}
-                {#if groupSearchResults !== undefined}
-                    <div class="search-matches">
-                        {#await groupSearchResults then resp}
-                            {#if resp.kind === "success" && resp.matches.length > 0}
-                                <h3 class="search-subtitle">
-                                    <Translatable resourceKey={i18nKey("publicGroups")} />
-                                </h3>
-                                {#each resp.matches as group, i (group.chatId.groupId)}
-                                    <SearchResult
-                                        index={i}
-                                        avatarUrl={client.groupAvatarUrl(
-                                            {
-                                                ...group,
-                                                id: group.chatId,
-                                            },
-                                            $selectedCommunitySummaryStore,
-                                        )}
-                                        onclick={() => selectGroup(group)}>
-                                        <h4 class="search-item-title">
-                                            {group.name}
-                                        </h4>
-                                        <p title={group.description} class="search-item-desc">
-                                            {group.description}
-                                        </p>
-                                    </SearchResult>
-                                {/each}
-                            {/if}
-                        {/await}
-                    </div>
-                {/if}
-            </div>
-            {#if showBrowseChannels}
-                <BrowseChannels {searchTerm} />
-            {/if}
-        {/if}
-    </div>
-    <ActiveCallSummary />
-    {#if showPreview}
-        <PreviewWrapper>
-            {#snippet children(joiningCommunity, joinCommunity)}
-                <div class="join">
-                    <ButtonGroup align="center">
-                        <Button secondary small onClick={cancelPreview}>
-                            <Translatable resourceKey={i18nKey("leave")} />
-                        </Button>
-                        <Button
-                            loading={joiningCommunity}
-                            disabled={joiningCommunity}
-                            onClick={joinCommunity}
-                            ><Translatable
-                                resourceKey={i18nKey("communities.joinCommunity")} /></Button>
-                    </ButtonGroup>
-                </div>
-            {/snippet}
-        </PreviewWrapper>
-    {/if}
-{/if}
-
-<style lang="scss">
-    .body {
-        overflow: hidden;
-        flex: auto;
-        position: relative;
-        display: flex;
-        flex-direction: column;
-    }
-    .chat-summaries {
-        @include nice-scrollbar();
-        overflow-x: hidden;
-        flex: 1 1 auto;
-    }
-
-    .join {
-        position: sticky;
-        bottom: 0;
-        padding: $sp3 $sp4;
-        background-color: var(--entry-bg);
-    }
-
-    .section-selector {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        margin: 0 $sp4 $sp4 $sp4;
-        gap: $sp3;
-        @include mobile() {
-            margin: 0 $sp3 $sp3 $sp3;
-        }
-    }
-
-    .search-subtitle {
-        margin-bottom: $sp3;
-        margin-left: 0;
-        padding: 0 $sp4;
-
-        @include mobile() {
-            padding: 0 $sp3;
-        }
-    }
-
-    .search-matches {
-        margin-top: $sp4;
-    }
-    .search-item-title {
-        margin-bottom: $sp3;
-    }
-    .search-item-desc {
-        color: var(--txt-light);
-        @include font(light, normal, fs-80);
-        @include ellipsis();
-    }
-
-    .explore-groups {
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        height: toRem(80);
-        border-top: var(--bw) solid var(--bd);
-        border-bottom: var(--bw) solid var(--bd);
-        padding: $sp4;
-        gap: toRem(12);
-        cursor: pointer;
-
-        @include mobile() {
-            padding: $sp3 toRem(10);
-        }
-
-        .label {
-            flex: auto;
-        }
-
-        .disc {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            align-content: center;
-            text-align: center;
-            height: toRem(48);
-            width: toRem(48);
-            background-color: var(--icon-hv);
-            border-radius: 50%;
-        }
-    }
-
-    .user-result {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-
-        h4 {
-            display: flex;
-            align-items: center;
-            gap: $sp2;
-        }
-
-        .username {
-            font-weight: 200;
-            color: var(--txt-light);
-            @include clamp();
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/ChatListSearch.svelte b/frontend/app/src/components/home/ChatListSearch.svelte
deleted file mode 100644
index 30faf4aa1d..0000000000
--- a/frontend/app/src/components/home/ChatListSearch.svelte
+++ /dev/null
@@ -1,141 +0,0 @@
-<script lang="ts">
-    import {
-        chatListScopeStore,
-        currentUserIdStore,
-        type BotMatch,
-        type ChatListScope,
-        type DirectChatIdentifier,
-        type GroupSearchResponse,
-        type OpenChat,
-        type ResourceKey,
-        type UserSummary,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { trimLeadingAtSymbol } from "../../utils/user";
-    import Search from "../Search.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        searchTerm: string;
-        searchResultsAvailable: boolean;
-        groupSearchResults?: Promise<GroupSearchResponse> | undefined;
-        userAndBotsSearchResults?: Promise<(UserSummary | BotMatch)[]> | undefined;
-    }
-
-    let {
-        searchTerm = $bindable(""),
-        searchResultsAvailable = $bindable(false),
-        groupSearchResults = $bindable(undefined),
-        userAndBotsSearchResults = $bindable(undefined),
-    }: Props = $props();
-
-    searchResultsAvailable;
-
-    let searching: boolean = $state(false);
-
-    $effect(() => {
-        void $chatListScopeStore.kind;
-        clearSearch();
-    });
-
-    function getPlaceholder(scope: ChatListScope["kind"]): ResourceKey {
-        switch (scope) {
-            case "community":
-                return i18nKey("searchChannelsPlaceholder");
-            case "chats":
-                return i18nKey("search");
-            case "favourite":
-                return i18nKey("searchFavouritesPlaceholder");
-            case "none":
-                return i18nKey("searchPlaceholder");
-        }
-    }
-
-    function clearSearch() {
-        searchTerm = "";
-    }
-
-    async function performSearch(term: string) {
-        searchResultsAvailable = false;
-        searchTerm = term;
-
-        searchTerm = trimLeadingAtSymbol(searchTerm);
-
-        if (searchTerm !== "") {
-            try {
-                searching = true;
-                const term = searchTerm.toLowerCase();
-                switch ($chatListScopeStore.kind) {
-                    case "none":
-                        legacySearch(term);
-                        break;
-                    case "chats":
-                        userAndBotSearch(term);
-                }
-            } catch (err) {
-                console.warn("search failed with: ", err);
-                searching = false;
-            } finally {
-                searching = false;
-            }
-        } else {
-            clearSearch();
-        }
-    }
-
-    function postSearch() {
-        if (searchTerm !== "") {
-            searchResultsAvailable = true;
-        } else {
-            clearSearch();
-        }
-    }
-
-    function sortUsersOrBots(_a: UserSummary | BotMatch, _b: UserSummary | BotMatch): number {
-        return 0;
-    }
-
-    async function userAndBotSearch(term: string) {
-        userAndBotsSearchResults = Promise.all([searchUsers(term), searchBots(term)]).then(
-            ([users, bots]) => [...users, ...bots].sort(sortUsersOrBots),
-        );
-        await userAndBotsSearchResults.then(postSearch);
-    }
-
-    function searchBots(term: string): Promise<BotMatch[]> {
-        // This location is rather hacky because we can't have a direct chat with ourselves
-        // but it signals to the explore_bots endpoint that we want to see bots that are
-        // available for direct chat.
-        const location = {
-            kind: "direct_chat",
-            userId: $currentUserIdStore,
-        } as DirectChatIdentifier;
-
-        return client.exploreBots(term, 0, 10, location, false).then((result) => {
-            return result.kind === "success" ? result.matches : [];
-        });
-    }
-
-    function searchUsers(term: string): Promise<UserSummary[]> {
-        return client.searchUsers(term, 10);
-    }
-
-    async function legacySearch(term: string) {
-        groupSearchResults = client.searchGroups(term, 10);
-        userAndBotsSearchResults = client.searchUsers(term, 10);
-        Promise.all([groupSearchResults, userAndBotsSearchResults]).then(postSearch);
-    }
-    let placeholder = $derived(getPlaceholder($chatListScopeStore.kind));
-    $effect(() => {
-        if (searchTerm === "") {
-            searching = false;
-            searchResultsAvailable = false;
-            groupSearchResults = undefined;
-            userAndBotsSearchResults = undefined;
-        }
-    });
-</script>
-
-<Search {placeholder} {searching} {searchTerm} onPerformSearch={performSearch} />
diff --git a/frontend/app/src/components/home/ChatMessage.svelte b/frontend/app/src/components/home/ChatMessage.svelte
deleted file mode 100644
index 3f6249f022..0000000000
--- a/frontend/app/src/components/home/ChatMessage.svelte
+++ /dev/null
@@ -1,1110 +0,0 @@
-
-<script lang="ts">
-    import { navigate } from "@utils/navigation";
-    import Typing from "@shared_components/Typing.svelte";
-    import { trackedEffect } from "@src/utils/effects.svelte";
-    import type { ProfileLinkClickedEvent } from "@webcomponents/profileLink";
-    import { AvatarSize, type ChatIdentifier, chatListScopeStore, type ChatType, currentUserIdStore, currentUserStore, type EnhancedReplyContext, iconSize, localUpdates, type Message, type MessageReminderCreatedContent, mobileWidth, OpenChat, publish, routeForMessage, routeStore, screenWidth, ScreenWidth, selectedChatBlockedUsersStore, selectedChatWebhooksStore, selectedCommunityMembersStore, type SelectedEmoji, type SenderContext, translationsStore, unconfirmedReadByThem, undeletingMessagesStore, type UserSummary } from "@client";
-    import { getContext, onDestroy, onMount, tick } from "svelte";
-    import { _ } from "svelte-i18n";
-    import Close from "svelte-material-icons/Close.svelte";
-    import EmoticonOutline from "svelte-material-icons/EmoticonOutline.svelte";
-    import ForwardIcon from "svelte-material-icons/Share.svelte";
-    import { fade } from "svelte/transition";
-    import { longpress } from "../../actions/longpress";
-    import { i18nKey } from "../../i18n/i18n";
-    import { quickReactions } from "../../stores/quickReactions";
-    import { rtlStore } from "../../stores/rtl";
-    import { dclickReply } from "../../stores/settings";
-    import { now } from "../../stores/time";
-    import { toastStore } from "../../stores/toast";
-    import { isTouchOnlyDevice } from "../../utils/devices";
-    import { reservedMediaWidth } from "../../utils/media";
-    import { canShareMessage } from "../../utils/share";
-    import { removeQueryStringParam } from "../../utils/urls";
-    import Avatar from "../Avatar.svelte";
-    import BotMessageContext from "../bots/BotMessageContext.svelte";
-    import BotProfile, { type BotProfileProps } from "../bots/BotProfile.svelte";
-    import HoverIcon from "../HoverIcon.svelte";
-    import Link from "../Link.svelte";
-    import ModalContent from "../ModalContent.svelte";
-    import Overlay from "../Overlay.svelte";
-    import Translatable from "../Translatable.svelte";
-    import ChatMessageContent from "./ChatMessageContent.svelte";
-    import ChatMessageMenu from "./ChatMessageMenu.svelte";
-    import EmojiPicker from "./EmojiPickerWrapper.svelte";
-    import EphemeralNote from "./EphemeralNote.svelte";
-    import IntersectionObserverComponent from "./IntersectionObserver.svelte";
-    import MessageReaction from "./MessageReaction.svelte";
-    import Badges from "./profile/Badges.svelte";
-    import BotBadge from "./profile/BotBadge.svelte";
-    import RoleIcon from "./profile/RoleIcon.svelte";
-    import WithRole from "./profile/WithRole.svelte";
-    import ReminderBuilder from "./ReminderBuilder.svelte";
-    import RepliesTo from "./RepliesTo.svelte";
-    import ReportMessage from "./ReportMessage.svelte";
-    import ThreadSummary from "./ThreadSummary.svelte";
-    import TimeAndTicks from "./TimeAndTicks.svelte";
-    import TipBuilder from "./TipBuilder.svelte";
-    import TipThumbnail from "./TipThumbnail.svelte";
-    import UnresolvedReply from "./UnresolvedReply.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        chatId: ChatIdentifier;
-        chatType: ChatType;
-        sender: UserSummary | undefined;
-        msg: Message;
-        me: boolean;
-        eventIndex: number;
-        timestamp: bigint;
-        expiresAt: number | undefined;
-        first: boolean;
-        last: boolean;
-        accepted: boolean;
-        confirmed: boolean;
-        failed: boolean;
-        readByMe: boolean;
-        observer?: IntersectionObserver;
-        focused: boolean;
-        readonly: boolean;
-        pinned: boolean;
-        canPin: boolean;
-        canBlockUsers: boolean;
-        canDelete: boolean;
-        canQuoteReply: boolean;
-        canReact: boolean;
-        publicGroup: boolean;
-        editing: boolean;
-        canStartThread: boolean;
-        senderTyping: boolean;
-        dateFormatter?: (date: Date) => string;
-        collapsed?: boolean;
-        threadRootMessage: Message | undefined;
-        senderContext: SenderContext | undefined;
-        onExpandMessage?: (() => void) | undefined;
-        // this is not to do with permission - some messages (namely thread root messages) will simply not support replying or editing inside a thread
-        supportsEdit: boolean;
-        supportsReply: boolean;
-        onReplyTo?: (replyContext: EnhancedReplyContext) => void;
-        onEditMessage?: () => void;
-        onCollapseMessage?: () => void;
-        onRetrySend?: () => void;
-        onDeleteFailedMessage?: () => void;
-        onRemovePreview?: (url: string) => void;
-        onGoToMessageIndex?: (args: { index: number }) => void;
-    }
-
-    let {
-        chatId,
-        chatType,
-        sender,
-        msg,
-        me,
-        eventIndex,
-        timestamp,
-        expiresAt,
-        first,
-        last,
-        accepted,
-        confirmed,
-        failed,
-        readByMe,
-        observer,
-        focused,
-        readonly,
-        pinned,
-        canPin,
-        canBlockUsers,
-        canDelete,
-        canQuoteReply,
-        canReact,
-        publicGroup,
-        editing,
-        canStartThread,
-        senderTyping,
-        dateFormatter = (date) => client.toShortTimeString(date),
-        collapsed = false,
-        threadRootMessage,
-        senderContext,
-        onExpandMessage = undefined,
-        supportsEdit,
-        supportsReply,
-        onReplyTo,
-        onEditMessage,
-        onCollapseMessage,
-        onRetrySend,
-        onDeleteFailedMessage,
-        onRemovePreview,
-        onGoToMessageIndex,
-    }: Props = $props();
-
-    let msgElement: HTMLElement | undefined;
-    let messageMenu: ChatMessageMenu | undefined;
-
-    let multiUserChat = chatType === "group_chat" || chatType === "channel";
-    let showEmojiPicker = $state(false);
-    let debug = false;
-    let crypto =
-        msg.content.kind === "crypto_content" ||
-        msg.content.kind === "prize_content" ||
-        msg.content.kind === "p2p_swap_content";
-    let showRemindMe = $state(false);
-    let showReport = $state(false);
-    let tipping: string | undefined = $state(undefined);
-    let percentageExpired = $state(100);
-    let botProfile: BotProfileProps | undefined = $state(undefined);
-    let confirmedReadByThem = $derived(client.messageIsReadByThem(chatId, msg.messageIndex));
-    let readByThem = $derived(confirmedReadByThem || $unconfirmedReadByThem.has(msg.messageId));
-    let streak = $derived(sender?.streak ?? 0);
-    let chitEarned = $derived(sender?.totalChitEarned ?? 0);
-    let hasAchievedMaxStreak = $derived((sender?.maxStreak ?? 0) >= 365);
-
-    trackedEffect("read-by-them", () => {
-        if (confirmedReadByThem && $unconfirmedReadByThem.has(msg.messageId)) {
-            unconfirmedReadByThem.delete(msg.messageId);
-        }
-    });
-
-    onMount(() => {
-        if (!readByMe) {
-            tick().then(() => {
-                if (observer !== undefined && msgElement !== undefined) {
-                    try {
-                        observer.observe(msgElement);
-                    } catch {}
-                }
-            });
-        }
-
-        if (expiresAt !== undefined) {
-            return now.subscribe((t) => {
-                const ttl = expiresAt ? expiresAt - Number(timestamp) : 0;
-                const age = t - Number(timestamp);
-                const expired = age > ttl;
-                percentageExpired = expired ? 100 : (age / ttl) * 100;
-                // if this message is the root of a thread, make sure that we close that thread when the message expires
-                if (percentageExpired >= 100 && msg.thread) {
-                    client.filterRightPanelHistory(
-                        (panel) => panel.kind !== "message_thread_panel",
-                    );
-                    navigate(removeQueryStringParam("open"));
-                }
-            });
-        }
-    });
-
-    onDestroy(() => {
-        if (msgElement) {
-            observer?.unobserve(msgElement);
-        }
-    });
-
-    function createReplyContext(): EnhancedReplyContext {
-        return {
-            kind: "rehydrated_reply_context",
-            senderId: msg.sender,
-            eventIndex: eventIndex,
-            content: msg.content,
-            sender,
-            messageId: msg.messageId,
-            messageIndex: msg.messageIndex,
-            edited: msg.edited,
-            isThreadRoot: msg.thread !== undefined,
-            sourceContext: messageContext,
-        };
-    }
-
-    function reply() {
-        if (canQuoteReply) {
-            onReplyTo?.(createReplyContext());
-        }
-    }
-
-    function replyPrivately() {
-        publish("replyPrivatelyTo", createReplyContext());
-    }
-
-    function cancelReminder(content: MessageReminderCreatedContent) {
-        client
-            .cancelMessageReminder(msg.messageId, { ...content, hidden: true })
-            .then((success) => {
-                if (success) {
-                    toastStore.showSuccessToast(i18nKey("reminders.cancelSuccess"));
-                } else {
-                    toastStore.showFailureToast(i18nKey("reminders.cancelFailure"));
-                }
-            });
-    }
-
-    function editMessage() {
-        if (canEdit) {
-            onEditMessage?.();
-        }
-    }
-
-    function doubleClickMessage() {
-        if (failed || msg.deleted || !$dclickReply) return;
-
-        if (me) {
-            editMessage();
-        } else if (confirmed) {
-            reply();
-        }
-    }
-
-    function tipMessage(ledger: string) {
-        tipping = ledger;
-    }
-
-    function selectReaction(selected: SelectedEmoji) {
-        if (selected.kind === "native") {
-            toggleReaction(false, selected.unicode);
-        } else {
-            toggleReaction(false, `@CE(${selected.code})`);
-        }
-    }
-
-    function selectQuickReaction(unicode: string) {
-        toggleReaction(true, unicode);
-    }
-
-    function toggleReaction(isQuickReaction: boolean, reaction: string) {
-        if (canReact) {
-            const kind = client.containsReaction($currentUserIdStore, reaction, msg.reactions)
-                ? "remove"
-                : "add";
-
-            client
-                .selectReaction(
-                    chatId,
-                    $currentUserIdStore,
-                    threadRootMessageIndex,
-                    msg.messageId,
-                    reaction,
-                    $currentUserStore.username,
-                    $currentUserStore.displayName,
-                    kind,
-                )
-                .then((success) => {
-                    if (success && kind === "add") {
-                        client.trackEvent("reacted_to_message");
-
-                        if (isQuickReaction) {
-                            // Note: Manually selected reactions do not increment
-                            // their fav counter by default, so we do it manually.
-                            // Also refresh loaded reactions.
-                            quickReactions.incrementFavourite(reaction);
-                        }
-
-                        quickReactions.reload();
-                    }
-                });
-        }
-        showEmojiPicker = false;
-    }
-
-    function openUserProfile(ev: Event) {
-        if (sender?.kind === "bot") {
-            botProfile = {
-                botId: sender.userId,
-                chatId,
-                onClose: () => (botProfile = undefined),
-            };
-        } else {
-            ev.target?.dispatchEvent(
-                new CustomEvent<ProfileLinkClickedEvent>("profile-clicked", {
-                    detail: {
-                        userId: msg.sender,
-                        chatButton: multiUserChat,
-                        inGlobalContext: false,
-                    },
-                    bubbles: true,
-                }),
-            );
-        }
-    }
-
-    function onRegisterVote(detail: { answerIndex: number; type: "register" | "delete" }) {
-        if (chatId.kind === "direct_chat") return;
-
-        client
-            .registerPollVote(
-                chatId,
-                threadRootMessageIndex,
-                msg.messageId,
-                msg.messageIndex,
-                detail.answerIndex,
-                detail.type,
-            )
-            .then((success) => {
-                if (!success) {
-                    toastStore.showFailureToast(i18nKey("poll.voteFailed"));
-                }
-            });
-    }
-
-    function reportMessage() {
-        showReport = true;
-    }
-
-    function remindMe() {
-        showRemindMe = true;
-    }
-    let maxWidthFraction = $derived($screenWidth === ScreenWidth.ExtraLarge ? 0.7 : 0.8);
-    let mediaDimensions = $derived(client.extractDimensionsFromMessageContent(msg.content));
-    let mediaWidth = $derived(
-        mediaDimensions !== undefined
-            ? reservedMediaWidth(mediaDimensions.width, mediaDimensions.height)
-            : undefined,
-    );
-    let inert = $derived(
-        msg.content.kind === "deleted_content" ||
-            msg.content.kind === "blocked_content" ||
-            collapsed,
-    );
-    let canTip = $derived(!me && confirmed && !inert && !failed);
-    let inThread = $derived(threadRootMessage !== undefined);
-    let threadRootMessageIndex = $derived(
-        threadRootMessage?.messageId === msg.messageId
-            ? undefined
-            : threadRootMessage?.messageIndex,
-    );
-    let fill = $derived(client.fillMessage(msg));
-    let showAvatar = $derived($screenWidth !== ScreenWidth.ExtraExtraSmall);
-    let translated = $derived($translationsStore.has(msg.messageId));
-    let threadSummary = $derived(msg.thread);
-    let msgUrl = $derived(
-        `${routeForMessage($chatListScopeStore.kind, { chatId }, msg.messageIndex)}?open=true`,
-    );
-    let isProposal = $derived(msg.content.kind === "proposal_content");
-    let isPrize = $derived(msg.content.kind === "prize_content");
-    let isP2PSwap = $derived(msg.content.kind === "p2p_swap_content");
-    let canEdit = $derived(
-        me && supportsEdit && !msg.deleted && client.contentTypeSupportsEdit(msg.content.kind),
-    );
-    let undeleting = $derived($undeletingMessagesStore.has(msg.messageId));
-    let deletedByMe = $derived(
-        msg.content.kind === "deleted_content" && msg.content.deletedBy == $currentUserIdStore,
-    );
-    let permanentlyDeleted = $derived(
-        deletedByMe &&
-            me &&
-            msg.content.kind === "deleted_content" &&
-            Number(msg.content.timestamp) < $now - 5 * 60 * 1000,
-    );
-    let canRevealDeleted = $derived(deletedByMe && !undeleting && !permanentlyDeleted);
-    let canRevealBlocked = $derived(msg.content.kind === "blocked_content");
-    let messageContext = $derived({ chatId, threadRootMessageIndex });
-    let ephemeral = $derived(localUpdates.isEphemeral(messageContext, msg.messageId));
-    let showChatMenu = $derived(
-        (!inert || canRevealDeleted || canRevealBlocked) && !readonly && !ephemeral,
-    );
-    let canUndelete = $derived(msg.deleted && msg.content.kind !== "deleted_content");
-    let senderDisplayName = $derived(
-        client.getDisplayName(
-            msg.sender,
-            $selectedCommunityMembersStore,
-            $selectedChatWebhooksStore,
-        ),
-    );
-    let tips = $derived(msg.tips ? Object.entries(msg.tips) : []);
-    let canBlockUser = $derived(canBlockUsers && !$selectedChatBlockedUsersStore.has(msg.sender));
-    let edited = $derived(
-        msg.edited && (senderContext?.kind !== "bot" || !senderContext.finalised),
-    );
-    let canShare = $derived(canShareMessage(msg.content));
-    let canForward = $derived(client.canForward(msg.content));
-    let canTranslate = $derived((client.getMessageText(msg.content) ?? "").length > 0);
-</script>
-
-
-{#if botProfile !== undefined}
-    <BotProfile {...botProfile} />
-{/if}
-
-{#if tipping !== undefined}
-    <TipBuilder ledger={tipping} onClose={() => (tipping = undefined)} {msg} {messageContext} />
-{/if}
-
-{#if showEmojiPicker && canReact}
-    <Overlay onClose={() => (showEmojiPicker = false)} dismissible>
-        <ModalContent hideFooter hideHeader fill>
-            {#snippet body()}
-                <div class="emoji-header">
-                    <h4><Translatable resourceKey={i18nKey("chooseReaction")} /></h4>
-                    <span
-                        title={$_("close")}
-                        class="close-emoji"
-                        onclick={() => (showEmojiPicker = false)}>
-                        <HoverIcon>
-                            <Close size={$iconSize} color={"var(--icon-txt)"} />
-                        </HoverIcon>
-                    </span>
-                </div>
-                <EmojiPicker
-                    onEmojiSelected={selectReaction}
-                    onSkintoneChanged={(tone) => quickReactions.reload(tone)}
-                    supportCustom={true}
-                    mode={"reaction"} />
-            {/snippet}
-        </ModalContent>
-    </Overlay>
-{/if}
-
-{#if showRemindMe}
-    <ReminderBuilder
-        {chatId}
-        {eventIndex}
-        {threadRootMessageIndex}
-        onClose={() => (showRemindMe = false)} />
-{/if}
-
-{#if showReport}
-    <ReportMessage
-        {threadRootMessageIndex}
-        messageId={msg.messageId}
-        {chatId}
-        {canDelete}
-        onClose={() => (showReport = false)} />
-{/if}
-
-{#if expiresAt === undefined || percentageExpired < 100}
-    <div out:fade|local={{ duration: 1000 }} class="message-wrapper" class:last>
-        {#if senderContext?.kind === "bot" && senderContext.command !== undefined}
-            <div class="bot-context">
-                <BotMessageContext
-                    botName={senderDisplayName}
-                    botCommand={senderContext.command}
-                    finalised={senderContext.finalised} />
-            </div>
-        {/if}
-        <IntersectionObserverComponent>
-            {#snippet children(intersecting)}
-                <div
-                    bind:this={msgElement}
-                    class="message"
-                    class:me
-                    data-index={failed ? "" : msg.messageIndex}
-                    data-id={failed ? "" : msg.messageId}
-                    id={failed ? "" : `event-${eventIndex}`}>
-                    {#if showAvatar}
-                        <div class="avatar-col">
-                            {#if first}
-                                <!-- svelte-ignore a11y_click_events_have_key_events -->
-                                <!-- svelte-ignore a11y_no_static_element_interactions -->
-                                <div class="avatar" onclick={openUserProfile}>
-                                    <Avatar
-                                        maxStreak={hasAchievedMaxStreak}
-                                        url={client.userAvatarUrl(sender)}
-                                        userId={msg.sender}
-                                        size={$mobileWidth
-                                            ? AvatarSize.Small
-                                            : AvatarSize.Default} />
-                                </div>
-                            {/if}
-                        </div>
-                    {/if}
-
-                    <div
-                        class="bubble-wrapper"
-                        style={`--max-width: ${maxWidthFraction * 100}%;` +
-                            (mediaWidth !== undefined ? ` --media-width: ${mediaWidth};` : "")}
-                        class:clamped={mediaWidth !== undefined}
-                        class:p2pSwap={isP2PSwap}
-                        class:proposal={isProposal && !inert}>
-                        <!-- svelte-ignore a11y_no_static_element_interactions -->
-                        <div
-                            ondblclick={doubleClickMessage}
-                            use:longpress={() => messageMenu?.showMenu()}
-                            class="message-bubble"
-                            class:focused
-                            class:editing
-                            class:fill={fill && !inert}
-                            class:me
-                            class:inert
-                            class:collapsed
-                            class:first
-                            class:last
-                            class:readByMe
-                            class:crypto
-                            class:failed
-                            class:bot={senderContext?.kind === "bot"}
-                            class:thread={inThread}
-                            class:rtl={$rtlStore}>
-                            {#if first && !isProposal && !isPrize}
-                                <div class="sender" class:fill class:rtl={$rtlStore}>
-                                    <Link underline={"never"} onClick={openUserProfile}>
-                                        <h4 class="username" class:fill class:crypto>
-                                            {senderDisplayName}
-                                        </h4>
-
-                                        <Badges
-                                            uniquePerson={sender?.isUniquePerson}
-                                            diamondStatus={sender?.diamondStatus}
-                                            {streak}
-                                            {chitEarned} />
-                                        <BotBadge
-                                            bot={senderContext?.kind === "bot"}
-                                            webhook={senderContext?.kind === "webhook"} />
-                                        {#if sender !== undefined && multiUserChat}
-                                            <WithRole
-                                                userId={sender.userId}
-                                                chatMembers={$selectedCommunityMembersStore}
-                                                communityMembers={$selectedCommunityMembersStore}>
-                                                {#snippet children(communityRole, chatRole)}
-                                                    <RoleIcon
-                                                        level="community"
-                                                        popup
-                                                        role={communityRole} />
-                                                    <RoleIcon
-                                                        level={chatType === "channel"
-                                                            ? "channel"
-                                                            : "group"}
-                                                        popup
-                                                        role={chatRole} />
-                                                {/snippet}
-                                            </WithRole>
-                                        {/if}
-                                    </Link>
-                                    {#if senderTyping}
-                                        <span class="typing">
-                                            <Typing />
-                                        </span>
-                                    {/if}
-                                </div>
-                            {/if}
-                            {#if msg.forwarded}
-                                <div class="forwarded">
-                                    <div>
-                                        <ForwardIcon
-                                            size={$iconSize}
-                                            color={me
-                                                ? "var(--currentChat-msg-me-muted)"
-                                                : "var(--currentChat-msg-muted)"} />
-                                    </div>
-                                    <div class="text">{"Forwarded"}</div>
-                                </div>
-                            {/if}
-                            {#if msg.repliesTo !== undefined && !inert}
-                                {#if msg.repliesTo.kind === "rehydrated_reply_context"}
-                                    <RepliesTo
-                                        {readonly}
-                                        {chatId}
-                                        {intersecting}
-                                        {onRemovePreview}
-                                        {onGoToMessageIndex}
-                                        repliesTo={msg.repliesTo} />
-                                {:else}
-                                    <UnresolvedReply />
-                                {/if}
-                            {/if}
-
-                            <ChatMessageContent
-                                senderId={msg.sender}
-                                {readonly}
-                                {fill}
-                                {me}
-                                {messageContext}
-                                {collapsed}
-                                {undeleting}
-                                {intersecting}
-                                {failed}
-                                {timestamp}
-                                messageIndex={msg.messageIndex}
-                                messageId={msg.messageId}
-                                content={msg.content}
-                                {edited}
-                                blockLevelMarkdown={msg.blockLevelMarkdown}
-                                {onRemovePreview}
-                                {onRegisterVote}
-                                {onExpandMessage}
-                                ogPreviews={msg.ogPreviews}
-                                messagePreviews={msg.messagePreviews} />
-
-                            {#if !inert}
-                                <TimeAndTicks
-                                    {pinned}
-                                    prize={isPrize}
-                                    fill={fill && !isPrize}
-                                    {timestamp}
-                                    {expiresAt}
-                                    {percentageExpired}
-                                    {me}
-                                    bot={sender?.kind === "bot"}
-                                    {accepted}
-                                    {failed}
-                                    deleted={msg.deleted}
-                                    {undeleting}
-                                    {readByThem}
-                                    {crypto}
-                                    {chatType}
-                                    {dateFormatter} />
-                            {/if}
-
-                            {#if debug}
-                                <pre>Sender: {msg.sender}</pre>
-                                <pre>EventIdx: {eventIndex}</pre>
-                                <pre>MsgIdx: {msg.messageIndex}</pre>
-                                <pre>MsgId: {msg.messageId}</pre>
-                                <pre>Confirmed: {confirmed}</pre>
-                                <pre>ReadByThem: {readByThem}</pre>
-                                <pre>ReadByUs: {readByMe}</pre>
-                                <pre>Pinned: {pinned}</pre>
-                                <pre>edited: {msg.edited}</pre>
-                                <pre>failed: {failed}</pre>
-                                <pre>timestamp: {timestamp}</pre>
-                                <pre>expiresAt: {expiresAt}</pre>
-                                <pre>thread: {JSON.stringify(msg.thread, null, 4)}</pre>
-                                <pre>senderContext: {JSON.stringify(senderContext, null, 4)}</pre>
-                                <pre>inert: {inert}</pre>
-                                <pre>canRevealDeleted: {canRevealDeleted}</pre>
-                                <pre>canlRevealBlocked: {canRevealBlocked}</pre>
-                                <pre>readonly: {readonly}</pre>
-                                <pre>showChatMenu: {showChatMenu}</pre>
-                                <pre>intersecting: {intersecting}</pre>
-                                <pre>ephemeral: {ephemeral}</pre>
-                            {/if}
-                        </div>
-
-                        {#if showChatMenu && intersecting}
-                            <ChatMessageMenu
-                                bind:this={messageMenu}
-                                {chatId}
-                                {isProposal}
-                                {inert}
-                                {publicGroup}
-                                {confirmed}
-                                {failed}
-                                {canShare}
-                                {me}
-                                {canPin}
-                                {canTip}
-                                {pinned}
-                                {supportsReply}
-                                {canQuoteReply}
-                                {threadRootMessage}
-                                {canStartThread}
-                                {multiUserChat}
-                                {msg}
-                                {canForward}
-                                {canBlockUser}
-                                {canEdit}
-                                {canDelete}
-                                {canUndelete}
-                                {canRevealDeleted}
-                                {canRevealBlocked}
-                                translatable={canTranslate}
-                                {translated}
-                                {selectQuickReaction}
-                                showEmojiPicker={() => {
-                                    showEmojiPicker = true;
-                                }}
-                                {canReact}
-                                {onCollapseMessage}
-                                onReply={reply}
-                                {onRetrySend}
-                                {onDeleteFailedMessage}
-                                onReplyPrivately={replyPrivately}
-                                onEditMessage={editMessage}
-                                onTipMessage={tipMessage}
-                                onReportMessage={reportMessage}
-                                onCancelReminder={cancelReminder}
-                                onRemindMe={remindMe} />
-                        {/if}
-
-                        {#if ephemeral}
-                            <EphemeralNote />
-                        {/if}
-                    </div>
-
-                    {#if !collapsed && !msg.deleted && canReact && !failed}
-                        <div class="actions" class:touch={isTouchOnlyDevice}>
-                            <div class="reaction" onclick={() => (showEmojiPicker = true)}>
-                                <HoverIcon>
-                                    <EmoticonOutline size={$iconSize} color={"var(--icon-txt)"} />
-                                </HoverIcon>
-                            </div>
-                        </div>
-                    {/if}
-                </div>
-
-                {#if threadSummary !== undefined && !inThread}
-                    <ThreadSummary
-                        {chatId}
-                        threadRootMessageIndex={msg.messageIndex}
-                        selected={($routeStore.kind === "global_chat_selected_route" ||
-                            $routeStore.kind === "selected_channel_route") &&
-                            msg.messageIndex === $routeStore.messageIndex &&
-                            $routeStore.open}
-                        {threadSummary}
-                        indent={showAvatar}
-                        {me}
-                        url={msgUrl} />
-                {/if}
-
-                {#if msg.reactions.length > 0 && !inert}
-                    <div class="message-reactions" class:me class:indent={showAvatar}>
-                        {#each msg.reactions as { reaction, userIds } (reaction)}
-                            <MessageReaction
-                                onClick={() => toggleReaction(false, reaction)}
-                                {reaction}
-                                {intersecting}
-                                {userIds} />
-                        {/each}
-                    </div>
-                {/if}
-
-                {#if tips.length > 0 && !inert}
-                    <div class="tips" class:indent={showAvatar}>
-                        {#each tips as [ledger, userTips]}
-                            <TipThumbnail onClick={tipMessage} {canTip} {ledger} {userTips} />
-                        {/each}
-                    </div>
-                {/if}
-            {/snippet}
-        </IntersectionObserverComponent>
-    </div>
-{/if}
-
-<style lang="scss">
-    $size: 10px;
-
-    $avatar-width: toRem(56);
-    $avatar-width-mob: toRem(43);
-
-    @keyframes show-bubble-menu {
-        0% {
-            z-index: -1;
-            opacity: 0;
-        }
-        1% {
-            z-index: 1;
-            opacity: 0;
-        }
-        100% {
-            z-index: 1;
-            opacity: 1;
-        }
-    }
-
-    @include mobile() {
-        :global(.bubble-wrapper .menu) {
-            display: none;
-        }
-    }
-
-    @include not-mobile() {
-        :global(.bubble-wrapper .menu) {
-            display: flex;
-            z-index: -1;
-            opacity: 0;
-        }
-
-        // Keeps hover menu showing if context menu is clicked!
-        :global(.bubble-wrapper .menu:has(.menu-icon.open)) {
-            border-color: var(--primary);
-            z-index: 1;
-            opacity: 1;
-        }
-
-        @media (hover: hover) {
-            :global(.bubble-wrapper:hover .menu:not(:has(.menu-icon.open))) {
-                animation: show-bubble-menu 200ms ease-in-out forwards;
-            }
-        }
-    }
-
-    :global(.message .sender .never) {
-        display: inline-flex;
-        gap: $sp2;
-        align-items: center;
-    }
-
-    :global(.message .avatar .avatar) {
-        margin: 0;
-    }
-
-    :global(.message-bubble .content a) {
-        text-decoration: underline;
-    }
-
-    :global(.message-bubble .content ul) {
-        margin: 0 $sp4;
-    }
-
-    :global(.message-bubble a) {
-        color: inherit;
-    }
-
-    :global(.message-bubble.crypto a) {
-        color: inherit;
-    }
-
-    :global(.message-bubble.first .menu) {
-        top: -24px;
-    }
-
-    :global(.actions .reaction .wrapper) {
-        padding: 6px;
-    }
-
-    .message-wrapper {
-        &.last {
-            margin-bottom: $sp4;
-        }
-    }
-
-    .sender {
-        margin-bottom: $sp1;
-
-        &.fill {
-            position: absolute;
-            background-color: rgba(0, 0, 0, 0.3);
-            color: #fff;
-            padding: $sp4 $sp4;
-            border-radius: 0 0 $sp4 0;
-            z-index: 1;
-
-            &.rtl {
-                right: 0;
-                border-radius: 0 0 0 $sp4;
-            }
-        }
-
-        .typing {
-            color: var(--accent);
-        }
-    }
-
-    .message-reactions,
-    .tips {
-        display: flex;
-        justify-content: flex-start;
-        flex-wrap: wrap;
-        gap: 3px;
-
-        &.indent {
-            margin-left: $avatar-width;
-            @include mobile() {
-                margin-left: $avatar-width-mob;
-            }
-        }
-    }
-
-    .bot-context {
-        display: flex;
-        margin-inline-start: $avatar-width;
-        margin-bottom: $sp2;
-        margin-top: $sp2;
-
-        @include mobile() {
-            margin-inline-start: $avatar-width-mob;
-        }
-    }
-
-    .message {
-        display: flex;
-        justify-content: flex-start;
-        margin-bottom: $sp2;
-        position: relative;
-
-        .avatar-col {
-            flex: 0 0 $avatar-width;
-
-            @include mobile() {
-                flex: 0 0 $avatar-width-mob;
-            }
-
-            .avatar {
-                cursor: pointer;
-            }
-        }
-
-        .actions {
-            display: none;
-            opacity: 0.3;
-            padding: 0 $sp3;
-            align-items: center;
-            justify-content: center;
-            transition: opacity 200ms ease-in-out;
-        }
-
-        .actions.touch {
-            display: flex;
-        }
-
-        @include mobile() {
-            .actions:not(.touch) {
-                display: flex;
-            }
-        }
-    }
-
-    .bubble-wrapper {
-        position: relative;
-        max-width: var(--max-width);
-        min-width: 90px;
-
-        // media messages: hug the image (media width + bubble padding) so
-        // captions and reply quotes cannot widen the bubble past it
-        &.clamped {
-            max-width: min(var(--max-width), calc(var(--media-width) + toRem(24)));
-        }
-
-        &.p2pSwap {
-            width: 350px;
-        }
-
-        &.proposal {
-            max-width: 800px;
-        }
-
-        &.proposal,
-        &.p2pSwap {
-            .message-bubble {
-                width: 100%;
-            }
-        }
-    }
-
-    .message-bubble {
-        $radius: var(--currentChat-msg-r1);
-        $inner-radius: var(--currentChat-msg-r2);
-        transition:
-            box-shadow ease-out 500ms,
-            background-color ease-in-out 200ms,
-            border ease-in-out 300ms,
-            transform ease-in-out 200ms;
-        position: relative;
-        padding: toRem(8) toRem(12) toRem(8) toRem(12);
-        background-color: var(--currentChat-msg-bg);
-        color: var(--currentChat-msg-txt);
-        @include font(book, normal, fs-100);
-        border-radius: $radius;
-        border: var(--currentChat-msg-bd);
-        box-shadow: var(--currentChat-msg-sh);
-
-        :global(.markdown-wrapper) {
-            word-break: break-word;
-        }
-
-        .username {
-            color: inherit;
-            color: var(--txt);
-            display: inline;
-
-            &.fill {
-                color: #fff;
-            }
-        }
-
-        &:not(.readByMe) {
-            box-shadow: 0 0 0 5px var(--notificationBar-bg);
-        }
-
-        &.last:not(.first) {
-            border-radius: $inner-radius $radius $radius $radius;
-        }
-        &.first:not(.last) {
-            border-radius: $radius $radius $radius $inner-radius;
-        }
-        &:not(.first):not(.last) {
-            border-radius: $inner-radius $radius $radius $inner-radius;
-        }
-
-        &.me {
-            background-color: var(--currentChat-msg-me-bg);
-            color: var(--currentChat-msg-me-txt);
-
-            .username {
-                color: var(--currentChat-msg-me-txt);
-            }
-
-            &.inert {
-                .username {
-                    color: var(--txt);
-                }
-            }
-        }
-
-        &.rtl {
-            &.last:not(.first) {
-                border-radius: $radius $inner-radius $radius $radius;
-            }
-            &.first:not(.last) {
-                border-radius: $radius $radius $inner-radius $radius;
-            }
-            &:not(.first):not(.last) {
-                border-radius: $radius $inner-radius $inner-radius $radius;
-            }
-        }
-
-        &.fill {
-            padding: 0;
-            border: none;
-            line-height: 0;
-        }
-
-        &.focused {
-            box-shadow: 0 0 0 4px var(--currentChat-msg-focus);
-            transition:
-                background-color ease-in-out 200ms,
-                border ease-in-out 300ms,
-                transform ease-in-out 200ms;
-        }
-
-        &.editing {
-            box-shadow: 0 0 0 4px var(--currentChat-msg-focus);
-        }
-
-        &.inert {
-            opacity: 0.8;
-            color: var(--currentChat-msg-txt);
-            background-color: var(--currentChat-msg-inert);
-        }
-
-        &.collapsed {
-            cursor: pointer;
-        }
-
-        &:after {
-            content: "";
-            display: table;
-            clear: both;
-        }
-
-        .forwarded {
-            color: var(--currentChat-msg-muted);
-            display: flex;
-            gap: $sp1;
-            align-items: center;
-            @include font-size(fs-80);
-            font-style: italic;
-            .text {
-                margin-bottom: $sp2;
-            }
-        }
-
-        &.me .forwarded {
-            color: var(--currentChat-msg-me-muted);
-        }
-
-        &.failed {
-            background-color: var(--error);
-        }
-    }
-
-    .emoji-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: $sp3 $sp4;
-        background-color: var(--section-bg);
-
-        .close-emoji {
-            flex: 0 0 20px;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/ChatMessageContent.svelte b/frontend/app/src/components/home/ChatMessageContent.svelte
deleted file mode 100644
index b0b397e4e6..0000000000
--- a/frontend/app/src/components/home/ChatMessageContent.svelte
+++ /dev/null
@@ -1,158 +0,0 @@
-<script lang="ts">
-    import type { MessageContent, MessageContext, OgPreview, RehydratedMessagePreview } from "@client";
-    import { i18nKey } from "../../i18n/i18n";
-    import AudioContent from "./AudioContent.svelte";
-    import BlockedContent from "./BlockedContent.svelte";
-    import BotPlaceholderContent from "./BotPlaceholderContent.svelte";
-    import CryptoContent from "./CryptoContent.svelte";
-    import DeletedContent from "./DeletedContent.svelte";
-    import FileContent from "./FileContent.svelte";
-    import GiphyContent from "./GiphyContent.svelte";
-    import ImageContent from "./ImageContent.svelte";
-    import MessageContentInitial from "./MessageContentInitial.svelte";
-    import MessageReminderContent from "./MessageReminderContent.svelte";
-    import MessageReminderCreatedContent from "./MessageReminderCreatedContent.svelte";
-    import P2PSwapContent from "./P2PSwapContent.svelte";
-    import PlaceholderContent from "./PlaceholderContent.svelte";
-    import PollContent from "./PollContent.svelte";
-    import PrizeContent from "./PrizeContent.svelte";
-    import PrizeWinnerContent from "./PrizeWinnerContent.svelte";
-    import ProposalContent from "./proposals/ProposalContent.svelte";
-    import ReportedMessageContent from "./ReportedMessageContent.svelte";
-    import TextContent from "./TextContent.svelte";
-    import UserReferralCardContent from "./UserReferralCardContent.svelte";
-    import VideoCallContent from "./VideoCallContent.svelte";
-    import VideoContent from "./VideoContent.svelte";
-
-    interface Props {
-        content: MessageContent;
-        me?: boolean;
-        truncate?: boolean;
-        fill: boolean;
-        reply?: boolean;
-        pinned?: boolean;
-        height?: number | undefined;
-        readonly: boolean;
-        senderId: string;
-        messageId: bigint;
-        edited: boolean;
-        messageContext: MessageContext;
-        messageIndex: number;
-        collapsed?: boolean;
-        undeleting?: boolean;
-        intersecting: boolean;
-        failed: boolean;
-        timestamp?: bigint | undefined;
-        blockLevelMarkdown: boolean;
-        onExpandMessage?: (() => void) | undefined;
-        onRemovePreview?: (url: string) => void;
-        onRegisterVote?: (vote: { type: "delete" | "register"; answerIndex: number }) => void;
-        ogPreviews?: OgPreview[];
-        messagePreviews?: RehydratedMessagePreview[];
-    }
-
-    let {
-        content,
-        me = false,
-        truncate = false,
-        fill,
-        reply = false,
-        pinned = false,
-        height = undefined,
-        readonly,
-        senderId,
-        messageId,
-        edited,
-        messageContext,
-        messageIndex,
-        collapsed = false,
-        undeleting = false,
-        intersecting,
-        failed,
-        timestamp = undefined,
-        blockLevelMarkdown,
-        onExpandMessage = undefined,
-        onRemovePreview,
-        onRegisterVote,
-        ogPreviews = [],
-        messagePreviews = [],
-    }: Props = $props();
-</script>
-
-{#if content.kind === "text_content"}
-    <TextContent
-        {me}
-        {fill}
-        {truncate}
-        {pinned}
-        {content}
-        {edited}
-        {blockLevelMarkdown}
-        {onRemovePreview}
-        {ogPreviews}
-        {messagePreviews} />
-{:else if content.kind === "image_content"}
-    <ImageContent
-        {edited}
-        {intersecting}
-        {fill}
-        {content}
-        {reply}
-        {pinned}
-        {height}
-        {blockLevelMarkdown} />
-{:else if content.kind === "video_content"}
-    <VideoContent {edited} {fill} {content} {reply} {height} {blockLevelMarkdown} />
-{:else if content.kind === "video_call_content"}
-    <VideoCallContent {senderId} {messageIndex} {content} {timestamp} />
-{:else if content.kind === "audio_content"}
-    <AudioContent {me} {edited} {content} {blockLevelMarkdown} />
-{:else if content.kind === "file_content"}
-    <FileContent {edited} {me} {content} {blockLevelMarkdown} />
-{:else if content.kind === "deleted_content"}
-    <DeletedContent {content} {undeleting} />
-{:else if content.kind === "blocked_content"}
-    <BlockedContent />
-{:else if content.kind === "crypto_content"}
-    <CryptoContent {senderId} {content} {me} />
-{:else if content.kind === "placeholder_content"}
-    <PlaceholderContent />
-{:else if content.kind === "bot_placeholder_content"}
-    <BotPlaceholderContent />
-{:else if content.kind === "prize_content_initial"}
-    <MessageContentInitial text={i18nKey("prizes.creatingYourPrizeMessage")} {failed} />
-{:else if content.kind === "p2p_swap_content_initial"}
-    <MessageContentInitial
-        text={i18nKey(failed ? "p2pSwap.failedToCreateMessage" : "p2pSwap.creatingYourMessage")}
-        {failed} />
-{:else if content.kind === "prize_content"}
-    <PrizeContent chatId={messageContext.chatId} {messageId} {content} {me} {intersecting} />
-{:else if content.kind === "p2p_swap_content"}
-    <P2PSwapContent {senderId} {messageContext} {messageId} {content} {me} {reply} {pinned} />
-{:else if content.kind === "prize_winner_content"}
-    <PrizeWinnerContent {content} />
-{:else if content.kind === "poll_content"}
-    <PollContent {readonly} {me} {content} {senderId} {onRegisterVote} />
-{:else if content.kind === "giphy_content"}
-    <GiphyContent {edited} {intersecting} {fill} {content} {reply} {height} {blockLevelMarkdown} />
-{:else if content.kind === "proposal_content"}
-    <ProposalContent
-        {content}
-        chatId={messageContext.chatId}
-        {messageIndex}
-        {messageId}
-        {collapsed}
-        {readonly}
-        {reply}
-        {onExpandMessage} />
-{:else if content.kind === "message_reminder_created_content" && !content.hidden}
-    <MessageReminderCreatedContent {content} />
-{:else if content.kind === "message_reminder_content"}
-    <MessageReminderContent {content} />
-{:else if content.kind === "reported_message_content"}
-    <ReportedMessageContent {content} />
-{:else if content.kind === "meme_fighter_content"}
-    <ImageContent {edited} {intersecting} {fill} {content} {reply} {pinned} {height} />
-{:else if content.kind === "user_referral_card"}
-    <UserReferralCardContent />
-{/if}
diff --git a/frontend/app/src/components/home/ChatSubtext.svelte b/frontend/app/src/components/home/ChatSubtext.svelte
deleted file mode 100644
index f0e5568852..0000000000
--- a/frontend/app/src/components/home/ChatSubtext.svelte
+++ /dev/null
@@ -1,85 +0,0 @@
-<script lang="ts">
-    import type { ChatSummary, OpenChat } from "@client";
-    import { allUsersStore } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { i18nKey } from "../../i18n/i18n";
-    import { now } from "../../stores/time";
-    import Translatable from "../Translatable.svelte";
-    import DisappearLabel from "./DisappearLabel.svelte";
-    import VisibilityLabel from "./VisibilityLabel.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        chat: ChatSummary;
-        clickableMembers?: boolean;
-        onMembersClick?: () => void;
-    }
-
-    let { chat, clickableMembers = false, onMembersClick }: Props = $props();
-
-    let userId = $derived(chat.kind === "direct_chat" ? chat.them.userId : "");
-    let isBot = $derived($allUsersStore.get(userId)?.kind === "bot");
-    let isSuspended = $derived($allUsersStore.get(userId)?.suspended ?? false);
-    let subtext = $derived(isSuspended ? $_("accountSuspended") : "");
-    let checkLastOnline = $derived(!isSuspended && !isBot && chat.kind === "direct_chat");
-
-    $effect(() => {
-        if (checkLastOnline && chat.kind === "direct_chat") {
-            client.getLastOnlineDate(chat.them.userId, $now).then((lastOnline) => {
-                if (lastOnline !== undefined && lastOnline !== 0) {
-                    [subtext] = client.formatLastOnlineDate($_, $now, lastOnline);
-                } else {
-                    subtext = "";
-                }
-            });
-        }
-    });
-
-    function click() {
-        if (clickableMembers) {
-            onMembersClick?.();
-        }
-    }
-</script>
-
-{#if chat.kind === "direct_chat"}
-    <div class="wrapper">
-        {#if chat.eventsTTL !== undefined}
-            <DisappearLabel ttl={chat.eventsTTL} />
-        {/if}
-        {subtext}
-    </div>
-{:else if chat.kind === "group_chat" || chat.kind === "channel"}
-    <div class="wrapper">
-        {#if chat.eventsTTL !== undefined}
-            <DisappearLabel ttl={chat.eventsTTL} />
-        {/if}
-        <VisibilityLabel isPublic={chat.public} />
-        <div class="members" class:clickable={clickableMembers} onclick={click}>
-            <span class="num">{chat.memberCount.toLocaleString()}</span>
-            <Translatable resourceKey={i18nKey("members")} />
-        </div>
-    </div>
-{/if}
-
-<style lang="scss">
-    .wrapper {
-        display: flex;
-        gap: $sp3;
-        align-items: center;
-        @include font(book, normal, fs-70);
-    }
-
-    .members {
-        .num {
-            color: var(--txt);
-            font-weight: 700;
-        }
-    }
-
-    .clickable {
-        cursor: pointer;
-    }
-</style>
diff --git a/frontend/app/src/components/home/ChatSummary.svelte b/frontend/app/src/components/home/ChatSummary.svelte
deleted file mode 100644
index cbfbbea974..0000000000
--- a/frontend/app/src/components/home/ChatSummary.svelte
+++ /dev/null
@@ -1,963 +0,0 @@
-<script lang="ts">
-    import { trackedEffect } from "@src/utils/effects.svelte";
-    import type {
-        ChatSummary,
-        CommunitySummary,
-        DiamondMembershipStatus,
-        MessageContent,
-        TypersByKey,
-        UserLookup,
-    } from "@client";
-    import {
-        allUsersStore,
-        AvatarSize,
-        blockedUsersStore,
-        botState,
-        chatIdentifiersEqual,
-        chatListScopeStore,
-        communitiesStore,
-        currentUserIdStore,
-        favouritesStore,
-        iconSize,
-        messagesRead,
-        mobileWidth,
-        notificationsSupported,
-        OpenChat,
-        pinnedChatsStore,
-        publish,
-        ROLE_NONE,
-        routeForScope,
-        selectedChatIdStore,
-        selectedCommunitySummaryStore,
-        suspendedUserStore,
-        translationsStore,
-        byContext as typersByContext,
-    } from "@client";
-    import { navigate } from "@utils/navigation";
-    import { getContext, onMount, untrack } from "svelte";
-    import { _ } from "svelte-i18n";
-    import ArchiveIcon from "svelte-material-icons/Archive.svelte";
-    import BellIcon from "svelte-material-icons/Bell.svelte";
-    import MutedIcon from "svelte-material-icons/BellOff.svelte";
-    import CameraTimer from "svelte-material-icons/CameraTimer.svelte";
-    import CheckboxMultipleMarked from "svelte-material-icons/CheckboxMultipleMarked.svelte";
-    import Delete from "svelte-material-icons/Delete.svelte";
-    import DotsVertical from "svelte-material-icons/DotsVertical.svelte";
-    import Heart from "svelte-material-icons/Heart.svelte";
-    import LocationExit from "svelte-material-icons/LocationExit.svelte";
-    import PinIcon from "svelte-material-icons/Pin.svelte";
-    import PinOffIcon from "svelte-material-icons/PinOff.svelte";
-    import DeleteOutline from "svelte-material-icons/DeleteOutline.svelte";
-    import { i18nKey, interpolate } from "../../i18n/i18n";
-    import { canDeleteDirectChat, publishDeleteDirectChat } from "../../utils/directChat";
-    import { rtlStore } from "../../stores/rtl";
-    import { now } from "../../stores/time";
-    import { toastStore } from "../../stores/toast";
-    import { pop } from "../../utils/transition";
-    import { buildDisplayName } from "../../utils/user";
-    import Avatar from "../Avatar.svelte";
-    import { clamp, swipe } from "@shared_components/chatSwipe";
-    import HeartMinus from "../icons/HeartMinus.svelte";
-    import HeartPlus from "../icons/HeartPlus.svelte";
-    import WithVerifiedBadge from "../icons/WithVerifiedBadge.svelte";
-    import Menu from "../Menu.svelte";
-    import MenuIcon from "../MenuIcon.svelte";
-    import MenuItem from "../MenuItem.svelte";
-    import Translatable from "../Translatable.svelte";
-    import Typing from "@shared_components/Typing.svelte";
-    import ArchiveOffIcon from "./ArchiveOffIcon.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import Badges from "./profile/Badges.svelte";
-    import BotBadge from "./profile/BotBadge.svelte";
-    import VideoCallIcon from "./video/VideoCallIcon.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        chatSummary: ChatSummary;
-        selected: boolean;
-        visible: boolean;
-        onChatSelected: (chat: ChatSummary) => void;
-    }
-
-    let { chatSummary, selected, visible, onChatSelected }: Props = $props();
-
-    let externalContent = $derived(
-        chatSummary.kind === "channel" && chatSummary.externalUrl !== undefined,
-    );
-    let verified = $derived(chatSummary.kind === "group_chat" && chatSummary.verified);
-    let hovering = $state(false);
-    let unreadMessages = $state<number>(0);
-    let unreadMentions = $state<number>(0);
-    let chat = $derived(normaliseChatSummary($now, chatSummary, $typersByContext));
-    let lastMessage = $derived(formatLatestMessage(chatSummary, $allUsersStore));
-    let displayDate = $derived(client.getDisplayDate(chatSummary));
-    let community = $derived(
-        chatSummary.kind === "channel"
-            ? $communitiesStore.get({ kind: "community", communityId: chatSummary.id.communityId })
-            : undefined,
-    );
-    let blocked = $derived(
-        chatSummary.kind === "direct_chat" && $blockedUsersStore.has(chatSummary.them.userId),
-    );
-    let readonly = $derived(client.isChatReadOnly(chatSummary.id));
-    let canDelete = $derived(getCanDelete(chatSummary, community));
-    let pinned = $derived(
-        $pinnedChatsStore
-            .get($chatListScopeStore.kind)
-            ?.find((id) => chatIdentifiersEqual(id, chatSummary.id)) !== undefined,
-    );
-    let muted = $derived(chatSummary.membership.notificationsMuted);
-    let atEveryoneMuted = $derived(chatSummary.membership.atEveryoneMuted);
-    const maxDelOffset = -60;
-    let delOffset = $state(maxDelOffset);
-    let swiped = $state(false);
-
-    $effect(() => updateUnreadCounts(chatSummary));
-
-    onMount(() => {
-        return messagesRead.subscribe(() => updateUnreadCounts(chatSummary));
-    });
-
-    /***
-     * This needs to be called both when the chatSummary changes (because that may have changed the latestMessage)
-     * and when the internal state of the MessageReadTracker changes. Both are necessary to get the right value
-     * at all times.
-     */
-    function updateUnreadCounts(chatSummary: ChatSummary) {
-        untrack(() => {
-            unreadMessages = client.unreadMessageCount(
-                chatSummary.id,
-                chatSummary.latestMessage?.event.messageIndex,
-            );
-            unreadMentions = getUnreadMentionCount(chatSummary);
-
-            if (chatSummary.membership.archived && unreadMessages > 0 && !chat.bot) {
-                unarchiveChat();
-            }
-        });
-    }
-
-    function normaliseChatSummary(_now: number, chatSummary: ChatSummary, typing: TypersByKey) {
-        const fav =
-            $chatListScopeStore.kind !== "favourite" && $favouritesStore.has(chatSummary.id);
-        const muted = chatSummary.membership.notificationsMuted;
-        const video = chatSummary.videoCallInProgress
-            ? { muted: muted ? 1 : 0, unmuted: muted ? 0 : 1 }
-            : { muted: 0, unmuted: 0 };
-        switch (chatSummary.kind) {
-            case "direct_chat":
-                const them = $allUsersStore.get(chatSummary.them.userId);
-                return {
-                    name: client.displayName(them),
-                    diamondStatus: them?.diamondStatus ?? "inactive",
-                    streak: them?.streak ?? 0,
-                    chitEarned: them?.totalChitEarned,
-                    hasAchievedMaxStreak: (them?.maxStreak ?? 0) >= 365,
-                    avatarUrl: client.userAvatarUrl(them),
-                    userId: chatSummary.them,
-                    typing: client.getTypingString(
-                        $_,
-                        $allUsersStore,
-                        { chatId: chatSummary.id },
-                        typing,
-                    ),
-                    fav,
-                    eventsTTL: chatSummary.eventsTTL,
-                    video,
-                    private: false,
-                    uniquePerson: them?.isUniquePerson ?? false,
-                    bot: them?.kind === "bot",
-                };
-            default:
-                return {
-                    name: chatSummary.name,
-                    diamondStatus: "inactive" as DiamondMembershipStatus["kind"],
-                    streak: 0,
-                    chitEarned: undefined,
-                    hasAchievedMaxStreak: false,
-                    avatarUrl: client.groupAvatarUrl(chatSummary, $selectedCommunitySummaryStore),
-                    userId: undefined,
-                    typing: client.getTypingString(
-                        $_,
-                        $allUsersStore,
-                        { chatId: chatSummary.id },
-                        typing,
-                    ),
-                    fav,
-                    eventsTTL: chatSummary.eventsTTL,
-                    video,
-                    private: !chatSummary.public,
-                    uniquePerson: false,
-                    bot: false,
-                };
-        }
-    }
-
-    function getUnreadMentionCount(chat: ChatSummary): number {
-        if (chat.kind === "direct_chat") return 0;
-        return chat.membership.mentions.filter(
-            (m) => !client.isMessageRead({ chatId: chat.id }, m.messageIndex, m.messageId),
-        ).length;
-    }
-
-    function translateMessage(messageId: bigint, content: MessageContent): MessageContent {
-        const translation = $translationsStore.get(messageId);
-        return translation ? client.applyTranslation(content, translation) : content;
-    }
-
-    function formatLatestMessage(chatSummary: ChatSummary, users: UserLookup): string {
-        if (chatSummary.latestMessageIndex === undefined || externalContent) {
-            return "";
-        }
-
-        if (
-            (chatSummary.latestMessage !== undefined &&
-                chatSummary.eventsTtlLastUpdated > chatSummary.latestMessage.timestamp) ||
-            (chatSummary.latestMessage === undefined &&
-                chatSummary.eventsTTL !== undefined &&
-                chatSummary.membership.role !== ROLE_NONE)
-        ) {
-            return chatSummary.eventsTTL !== undefined
-                ? $_("disappearingMessages.timeUpdated", {
-                      values: {
-                          duration: client.formatDuration(Number(chatSummary.eventsTTL)),
-                      },
-                  })
-                : $_("disappearingMessages.disabled");
-        }
-
-        if (chatSummary.latestMessage === undefined) {
-            return "";
-        }
-
-        const latestMessageText = client.getContentAsText(
-            $_,
-            translateMessage(
-                chatSummary.latestMessage.event.messageId,
-                chatSummary.latestMessage.event.content,
-            ),
-        );
-
-        if (chatSummary.kind === "direct_chat") {
-            return latestMessageText;
-        }
-
-        let userType: "user" | "me" | "webhook" = "user";
-        if (chatSummary.latestMessage.event.senderContext?.kind === "webhook") {
-            userType = "webhook";
-        } else if (chatSummary.latestMessage.event.sender === $currentUserIdStore) {
-            userType = "me";
-        }
-
-        const user = buildDisplayName(
-            users,
-            chatSummary.latestMessage.event.sender,
-            userType,
-            false,
-        );
-
-        return `${user}: ${latestMessageText}`;
-    }
-
-    trackedEffect("unarchive-chat", () => {
-        if (chatSummary.membership.archived && unreadMessages > 0 && !chat.bot) {
-            unarchiveChat();
-        }
-    });
-
-    function deleteEmptyChat(e: Event) {
-        e.stopPropagation();
-        e.preventDefault();
-        const directBot =
-            chatSummary.kind === "direct_chat"
-                ? botState.externalBots.get(chatSummary.them.userId)
-                : undefined;
-        if (directBot !== undefined) {
-            client.uninstallBot({ kind: "direct_chat", userId: $currentUserIdStore }, directBot.id);
-        } else {
-            client.removePreviewedChat(chatSummary.id);
-        }
-        navigate(routeForScope($chatListScopeStore));
-        delOffset = -60;
-    }
-
-    function leftSwipe() {
-        if (swiped) return;
-        if (delOffset > maxDelOffset / 2) {
-            delOffset = 0;
-            swiped = true;
-        } else {
-            delOffset = maxDelOffset;
-            swiped = false;
-        }
-    }
-
-    function rightSwipe() {
-        if (!swiped) return;
-        if (delOffset < maxDelOffset / 2) {
-            delOffset = maxDelOffset;
-            swiped = false;
-        } else {
-            delOffset = 0;
-            swiped = true;
-        }
-    }
-
-    function swiping({ detail: { diffx } }: CustomEvent<{ diffx: number }>) {
-        if (diffx > 0 && !swiped) {
-            delOffset = clamp(maxDelOffset, 0, maxDelOffset + diffx);
-        }
-
-        if (diffx < 0 && swiped) {
-            delOffset = clamp(maxDelOffset, 0, 0 + diffx);
-        }
-    }
-
-    function pinChat() {
-        client.pinChat(chatSummary.id).then((success) => {
-            if (!success) {
-                toastStore.showFailureToast(i18nKey("pinChat.failed"));
-            }
-        });
-    }
-
-    function unpinChat() {
-        client.unpinChat(chatSummary.id).then((success) => {
-            if (!success) {
-                toastStore.showFailureToast(i18nKey("pinChat.unpinFailed"));
-            }
-        });
-    }
-
-    function toggleMuteNotifications(
-        mute: boolean | undefined,
-        muteAtEveryone: boolean | undefined,
-    ) {
-        publish("toggleMuteNotifications", { chatId: chatSummary.id, mute, muteAtEveryone });
-    }
-
-    function archiveChat() {
-        client.markAllRead(chatSummary);
-        client.archiveChat(chatSummary.id).then((success) => {
-            if (!success) {
-                toastStore.showFailureToast(i18nKey("archiveChatFailed"));
-            }
-        });
-        if (chatSummary.id === $selectedChatIdStore) {
-            navigate(routeForScope($chatListScopeStore));
-        }
-    }
-
-    function selectChat() {
-        onChatSelected(chatSummary);
-    }
-
-    function addToFavourites() {
-        client.addToFavourites(chatSummary.id);
-    }
-
-    function removeFromFavourites() {
-        client.removeFromFavourites(chatSummary.id);
-    }
-
-    function unarchiveChat() {
-        publish("unarchiveChat", chatSummary.id);
-    }
-
-    function leaveGroup() {
-        if (chatSummary.kind === "direct_chat") return;
-        publish("leaveGroup", {
-            kind: "leave",
-            chatId: chatSummary.id,
-            level: chatSummary.level,
-        });
-    }
-
-    function getCanDelete(chat: ChatSummary, community: CommunitySummary | undefined) {
-        switch (chat.kind) {
-            case "direct_chat":
-                return chat.latestMessage === undefined;
-            case "group_chat":
-                return chat.membership.role === ROLE_NONE;
-            case "channel":
-                return (
-                    community !== undefined &&
-                    community.membership.role !== ROLE_NONE &&
-                    chat.membership.role === ROLE_NONE
-                );
-        }
-    }
-
-    let showDeleteDirectChat = $derived(canDeleteDirectChat(chatSummary));
-</script>
-
-{#if visible}
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <div
-        role="button"
-        class="chat-summary"
-        class:selected
-        tabindex="0"
-        use:swipe={{ threshold: 20 }}
-        onswiping={swiping}
-        onleftswipe={leftSwipe}
-        onrightswipe={rightSwipe}
-        class:empty={canDelete}
-        class:rtl={$rtlStore}
-        onmouseenter={() => (hovering = true)}
-        onmouseleave={() => (hovering = false)}
-        onclick={selectChat}>
-        <div class="avatar">
-            <Avatar
-                statusBorder={selected || hovering ? "var(--chatSummary-hv)" : "transparent"}
-                {blocked}
-                url={chat.avatarUrl}
-                showStatus
-                maxStreak={chat.hasAchievedMaxStreak}
-                userId={chat.userId?.userId}
-                size={AvatarSize.Default} />
-            {#if chat.eventsTTL}
-                <div class="expires">
-                    <CameraTimer size={"1em"} color={"var(--txt)"} />
-                </div>
-            {/if}
-            <VideoCallIcon video={chat.video} />
-        </div>
-        <div class="details" class:rtl={$rtlStore}>
-            <div class="name-date">
-                <div class="chat-name">
-                    {#if chat.private}
-                        <div class="private"></div>
-                    {/if}
-                    <WithVerifiedBadge {verified} size={"small"}>
-                        <h4>
-                            {#if community !== undefined && $chatListScopeStore.kind === "favourite"}
-                                <span>{community.name}</span>
-                                <span>{">"}</span>
-                            {/if}
-                            <span>{chat.name}</span>
-                        </h4>
-                        <Badges
-                            uniquePerson={chat.uniquePerson}
-                            diamondStatus={chat.diamondStatus}
-                            streak={chat.streak}
-                            chitEarned={chat.chitEarned} />
-                    </WithVerifiedBadge>
-                    <BotBadge bot={chat.bot} />
-                </div>
-            </div>
-            <div class="chat-msg">
-                {#if chat.typing !== undefined}
-                    {chat.typing} <Typing />
-                {:else}
-                    <Markdown text={lastMessage} oneLine suppressLinks />
-                {/if}
-            </div>
-        </div>
-        {#if !externalContent}
-            <!-- this date formatting is OK for now but we might want to use something like this:
-            https://date-fns.org/v2.22.1/docs/formatDistanceToNow -->
-            <div class:rtl={$rtlStore} class="chat-date">
-                {#if muted && notificationsSupported}
-                    <div class="mute icon" class:rtl={$rtlStore}>
-                        <MutedIcon size={"1em"} color={"var(--icon-txt)"} />
-                    </div>
-                {/if}
-                {#if pinned}
-                    <div class="pin icon">
-                        <PinIcon size={"1em"} color={"var(--icon-txt)"} />
-                    </div>
-                {/if}
-                {#if chat.fav}
-                    <div class="fav icon">
-                        <Heart size={"1em"} color={"var(--icon-txt)"} />
-                    </div>
-                {/if}
-                {client.formatMessageDate(displayDate, $_("today"), $_("yesterday"), true, true)}
-            </div>
-            {#if !readonly}
-                {#if unreadMentions > 0}
-                    <div
-                        in:pop={{ duration: 1500 }}
-                        title={$_("chatSummary.mentions", {
-                            values: { count: unreadMentions.toString() },
-                        })}
-                        class:rtl={$rtlStore}
-                        class="notification mention">
-                        @
-                    </div>
-                {/if}
-                {#if unreadMessages > 0}
-                    <div
-                        in:pop={{ duration: 1500 }}
-                        title={$_("chatSummary.unread", {
-                            values: { count: unreadMessages.toString() },
-                        })}
-                        class:rtl={$rtlStore}
-                        class:muted
-                        class="notification">
-                        {unreadMessages > 999 ? "999+" : unreadMessages}
-                    </div>
-                {/if}
-                {#if !$suspendedUserStore}
-                    <div class="menu">
-                        <MenuIcon position={"bottom"} align={"end"}>
-                            {#snippet menuIcon()}
-                                <div class="menu-icon" class:rtl={$rtlStore}>
-                                    <DotsVertical
-                                        viewBox="0 -3 24 24"
-                                        size="1.6em"
-                                        color={"var(--icon-txt)"} />
-                                </div>
-                            {/snippet}
-                            {#snippet menuItems()}
-                                <Menu>
-                                    {#if !$favouritesStore.has(chatSummary.id)}
-                                        <MenuItem onclick={addToFavourites}>
-                                            {#snippet icon()}
-                                                <HeartPlus
-                                                    size={$iconSize}
-                                                    color={"var(--menu-warn)"} />
-                                            {/snippet}
-                                            {#snippet text()}
-                                                <Translatable
-                                                    resourceKey={i18nKey(
-                                                        "communities.addToFavourites",
-                                                    )} />
-                                            {/snippet}
-                                        </MenuItem>
-                                    {:else}
-                                        <MenuItem onclick={removeFromFavourites}>
-                                            {#snippet icon()}
-                                                <HeartMinus
-                                                    size={$iconSize}
-                                                    color={"var(--menu-warn)"} />
-                                            {/snippet}
-                                            {#snippet text()}
-                                                <Translatable
-                                                    resourceKey={i18nKey(
-                                                        "communities.removeFromFavourites",
-                                                    )} />
-                                            {/snippet}
-                                        </MenuItem>
-                                    {/if}
-                                    {#if !pinned}
-                                        <MenuItem onclick={pinChat}>
-                                            {#snippet icon()}
-                                                <PinIcon
-                                                    size={$iconSize}
-                                                    color={"var(--icon-inverted-txt)"} />
-                                            {/snippet}
-                                            {#snippet text()}
-                                                <Translatable
-                                                    resourceKey={i18nKey("pinChat.menuItem")} />
-                                            {/snippet}
-                                        </MenuItem>
-                                    {:else}
-                                        <MenuItem onclick={unpinChat}>
-                                            {#snippet icon()}
-                                                <PinOffIcon
-                                                    size={$iconSize}
-                                                    color={"var(--icon-inverted-txt)"} />
-                                            {/snippet}
-                                            {#snippet text()}
-                                                <Translatable
-                                                    resourceKey={i18nKey(
-                                                        "pinChat.unpinMenuItem",
-                                                    )} />
-                                            {/snippet}
-                                        </MenuItem>
-                                    {/if}
-                                    {#if notificationsSupported && !externalContent}
-                                        {#if muted}
-                                            <MenuItem
-                                                onclick={() =>
-                                                    toggleMuteNotifications(false, undefined)}>
-                                                {#snippet icon()}
-                                                    <BellIcon
-                                                        size={$iconSize}
-                                                        color={"var(--icon-inverted-txt)"} />
-                                                {/snippet}
-                                                {#snippet text()}
-                                                    <Translatable
-                                                        resourceKey={i18nKey(
-                                                            "unmuteNotifications",
-                                                        )} />
-                                                {/snippet}
-                                            </MenuItem>
-                                        {:else}
-                                            <MenuItem
-                                                onclick={() =>
-                                                    toggleMuteNotifications(true, undefined)}>
-                                                {#snippet icon()}
-                                                    <MutedIcon
-                                                        size={$iconSize}
-                                                        color={"var(--icon-inverted-txt)"} />
-                                                {/snippet}
-                                                {#snippet text()}
-                                                    <Translatable
-                                                        resourceKey={i18nKey(
-                                                            "muteNotifications",
-                                                        )} />
-                                                {/snippet}
-                                            </MenuItem>
-                                        {/if}
-                                        {#if atEveryoneMuted}
-                                            <MenuItem
-                                                onclick={() =>
-                                                    toggleMuteNotifications(undefined, false)}>
-                                                {#snippet icon()}
-                                                    <MutedIcon
-                                                        size={$iconSize}
-                                                        color={"var(--icon-inverted-txt)"} />
-                                                {/snippet}
-                                                {#snippet text()}
-                                                    <Translatable
-                                                        resourceKey={i18nKey("unmuteAtEveryone")} />
-                                                {/snippet}
-                                            </MenuItem>
-                                        {:else}
-                                            <MenuItem
-                                                onclick={() =>
-                                                    toggleMuteNotifications(undefined, true)}>
-                                                {#snippet icon()}
-                                                    <MutedIcon
-                                                        size={$iconSize}
-                                                        color={"var(--icon-inverted-txt)"} />
-                                                {/snippet}
-                                                {#snippet text()}
-                                                    <Translatable
-                                                        resourceKey={i18nKey("muteAtEveryone")} />
-                                                {/snippet}
-                                            </MenuItem>
-                                        {/if}
-                                    {/if}
-                                    {#if !externalContent}
-                                        <MenuItem
-                                            disabled={unreadMessages === 0}
-                                            onclick={() => client.markAllRead(chatSummary)}>
-                                            {#snippet icon()}
-                                                <CheckboxMultipleMarked
-                                                    size={$iconSize}
-                                                    color={"var(--icon-inverted-txt)"} />
-                                            {/snippet}
-                                            {#snippet text()}
-                                                <Translatable
-                                                    resourceKey={i18nKey("markAllRead")} />
-                                            {/snippet}
-                                        </MenuItem>
-                                    {/if}
-                                    {#if !chat.bot}
-                                        {#if chatSummary.membership.archived}
-                                            <MenuItem onclick={selectChat}>
-                                                {#snippet icon()}
-                                                    <ArchiveOffIcon
-                                                        size={$iconSize}
-                                                        color={"var(--icon-inverted-txt)"} />
-                                                {/snippet}
-                                                {#snippet text()}
-                                                    <Translatable
-                                                        resourceKey={i18nKey("unarchiveChat")} />
-                                                {/snippet}
-                                            </MenuItem>
-                                        {:else}
-                                            <MenuItem onclick={archiveChat}>
-                                                {#snippet icon()}
-                                                    <ArchiveIcon
-                                                        size={$iconSize}
-                                                        color={"var(--icon-inverted-txt)"} />
-                                                {/snippet}
-                                                {#snippet text()}
-                                                    <Translatable
-                                                        resourceKey={i18nKey("archiveChat")} />
-                                                {/snippet}
-                                            </MenuItem>
-                                        {/if}
-                                    {/if}
-                                    {#if chatSummary.kind !== "direct_chat" && client.canLeaveGroup(chatSummary.id)}
-                                        <MenuItem warning onclick={leaveGroup}>
-                                            {#snippet icon()}
-                                                <LocationExit
-                                                    size={$iconSize}
-                                                    color={"var(--menu-warn)"} />
-                                            {/snippet}
-                                            {#snippet text()}
-                                                {interpolate(
-                                                    $_,
-                                                    i18nKey(
-                                                        "leaveGroup",
-                                                        undefined,
-                                                        chatSummary.level,
-                                                        true,
-                                                    ),
-                                                )}
-                                            {/snippet}
-                                        </MenuItem>
-                                    {/if}
-                                    {#if showDeleteDirectChat}
-                                        <MenuItem
-                                            warning
-                                            onclick={() => publishDeleteDirectChat(chatSummary)}>
-                                            {#snippet icon()}
-                                                <DeleteOutline
-                                                    size={$iconSize}
-                                                    color={"var(--menu-warn)"} />
-                                            {/snippet}
-                                            {#snippet text()}
-                                                <Translatable resourceKey={i18nKey("deleteChat")} />
-                                            {/snippet}
-                                        </MenuItem>
-                                    {/if}
-                                </Menu>
-                            {/snippet}
-                        </MenuIcon>
-                    </div>
-                {/if}
-            {/if}
-        {/if}
-        {#if canDelete}
-            <!-- svelte-ignore a11y_no_static_element_interactions -->
-            <div
-                title={$_("removeChat")}
-                style={$mobileWidth
-                    ? $rtlStore
-                        ? `left: ${delOffset}px`
-                        : `right: ${delOffset}px`
-                    : ""}
-                onclick={deleteEmptyChat}
-                class:rtl={$rtlStore}
-                class="delete-chat">
-                <Delete size={$iconSize} color={"#fff"} />
-            </div>
-        {/if}
-    </div>
-{/if}
-
-<style lang="scss">
-    :global(.chat-name .with_verified) {
-        gap: $sp2;
-    }
-
-    .delete-chat {
-        background-color: var(--chatSummary-del);
-        padding: $sp3;
-        position: absolute;
-        right: -60px;
-        height: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 60px;
-        cursor: pointer;
-
-        @include size-above(sm) {
-            transition: right 200ms ease-in-out;
-            transition-delay: 200ms;
-        }
-
-        &.rtl {
-            right: unset;
-            left: -60px;
-        }
-    }
-
-    .chat-summary {
-        position: relative;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: $sp4;
-        margin-bottom: 0;
-        cursor: pointer;
-        transition:
-            background-color ease-in-out 100ms,
-            border-color ease-in-out 100ms;
-        user-select: none;
-
-        @include mobile() {
-            padding: $sp3 toRem(10);
-        }
-
-        @media (hover: hover) {
-            &:hover {
-                background-color: var(--chatSummary-hv);
-
-                @include size-above(sm) {
-                    .delete-chat {
-                        right: 0px;
-                        &.rtl {
-                            right: unset;
-                            left: 0px;
-                        }
-                    }
-                }
-            }
-        }
-
-        &.selected {
-            background-color: var(--chatSummary-bg-selected);
-        }
-
-        .menu {
-            flex: 0;
-        }
-
-        .menu-icon {
-            width: 0;
-            transition:
-                width 200ms ease-in-out,
-                opacity 200ms;
-            height: 0;
-            opacity: 0;
-            position: relative;
-            bottom: 0.4em;
-
-            @include mobile() {
-                width: 18px;
-                opacity: 0.4;
-                margin-left: 6px;
-
-                &.rtl {
-                    margin-left: unset;
-                    margin-right: 6px;
-                }
-            }
-        }
-
-        .icon {
-            height: 0;
-            &.mute {
-                margin-left: 2px;
-                @include font-size(fs-70);
-                &.rtl {
-                    margin-left: 0;
-                    margin-right: 2px;
-                }
-            }
-            &.pin {
-                @include font-size(fs-80);
-            }
-        }
-
-        @media (hover) {
-            &:hover {
-                .menu-icon {
-                    transition-delay: 200ms;
-                    width: $sp4;
-                    opacity: 1;
-                }
-            }
-        }
-    }
-    .avatar {
-        flex: 0 0 40px;
-        position: relative;
-    }
-
-    .expires {
-        @include disappearing();
-    }
-
-    .details {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        height: toRem(48);
-        overflow: hidden;
-
-        &:not(.rtl) {
-            padding: 0 0 0 12px;
-        }
-        &.rtl {
-            padding: 0 12px 0 0;
-        }
-
-        .name-date {
-            display: flex;
-            margin-bottom: $sp1;
-
-            .chat-name {
-                h4 {
-                    @include font(medium, normal, fs-100);
-                    display: flex;
-                    flex-direction: row;
-                    gap: $sp2;
-                }
-
-                display: flex;
-                align-items: center;
-                gap: $sp2;
-
-                @include ellipsis();
-                flex: auto;
-            }
-        }
-
-        .chat-msg {
-            color: var(--txt-light);
-            @include font(book, normal, fs-80);
-        }
-    }
-
-    .chat-date {
-        display: flex;
-        gap: $sp2;
-        position: absolute;
-        color: var(--txt-light);
-        @include font(book, normal, fs-60);
-        top: $sp3;
-        &:not(.rtl) {
-            right: $sp4;
-        }
-        &.rtl {
-            left: $sp4;
-        }
-
-        @include mobile() {
-            &:not(.rtl) {
-                right: $sp3;
-            }
-            &.rtl {
-                left: $sp3;
-            }
-        }
-    }
-
-    .notification {
-        @include unread();
-        margin-top: 18px;
-        margin-left: 2px;
-        &:not(.rtl) {
-            right: $sp3;
-        }
-
-        &.rtl {
-            left: $sp3;
-            margin-right: 2px;
-            margin-left: 0;
-        }
-
-        &.muted {
-            background-color: var(--unread-mute);
-            color: var(--unread-mute-txt);
-            text-shadow: none;
-        }
-    }
-
-    .mention {
-        margin-right: 2px;
-        &.rtl {
-            margin-left: 2px;
-        }
-    }
-    .private {
-        background-repeat: no-repeat;
-        $size: 12px;
-        flex: 0 0 $size;
-        width: $size;
-        height: $size;
-        background-image: url("/assets/locked.svg");
-    }
-</style>
diff --git a/frontend/app/src/components/home/ChatUnfrozenEvent.svelte b/frontend/app/src/components/home/ChatUnfrozenEvent.svelte
deleted file mode 100644
index 0a45d70225..0000000000
--- a/frontend/app/src/components/home/ChatUnfrozenEvent.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts">
-    import type { UserSummary } from "@client";
-    import { allUsersStore } from "@client";
-    import type { ChatUnfrozenEvent } from "@shared";
-    import { _ } from "svelte-i18n";
-    import { buildDisplayName } from "../../utils/user";
-    import NonMessageEvent from "./NonMessageEvent.svelte";
-
-    interface Props {
-        event: ChatUnfrozenEvent;
-        user: UserSummary | undefined;
-        timestamp: bigint;
-    }
-
-    let { event, user, timestamp }: Props = $props();
-
-    let me = $derived(event.unfrozenBy === user?.userId);
-    let unfrozenByStr = $derived(
-        buildDisplayName($allUsersStore, event.unfrozenBy, me ? "me" : "user"),
-    );
-
-    let text = $derived(
-        $_("chatUnfrozenBy", {
-            values: {
-                unfrozenBy: unfrozenByStr,
-            },
-        }),
-    );
-</script>
-
-<NonMessageEvent {text} {timestamp} />
diff --git a/frontend/app/src/components/home/ChitEarned.svelte b/frontend/app/src/components/home/ChitEarned.svelte
deleted file mode 100644
index e49804538d..0000000000
--- a/frontend/app/src/components/home/ChitEarned.svelte
+++ /dev/null
@@ -1,232 +0,0 @@
-<script lang="ts">
-    import { shakeElements } from "@src/utils/shake";
-    import { subscribe, type ChitEvent, type OpenChat } from "@client";
-    import { getContext, onMount } from "svelte";
-    import { Confetti } from "svelte-confetti";
-    import { _ } from "svelte-i18n";
-    import { Spring, Tween } from "svelte/motion";
-    import SpinningToken from "../icons/SpinningToken.svelte";
-
-    const OFF_SCREEN_OPACITY = 0.0;
-    const SHOW_DURATION = 3000;
-    const SLIDE_IN_DURATION = 400;
-    const TWEEN_DURATION = 300;
-    const LONG_DURATION = 10_000;
-
-    const client = getContext<OpenChat>("client");
-    let confetti = $state(false);
-    let dimensions = getDimension();
-    let ypos = new Spring(dimensions.height + 100, { damping: 0.4, stiffness: 0.2 });
-    let opacity = new Tween(OFF_SCREEN_OPACITY, { duration: TWEEN_DURATION });
-    let msg = new Tween({ scale: 0, opacity: 1 }, { duration: TWEEN_DURATION });
-    let left = $state(dimensions.width / 2);
-    let amount = $state(0);
-    let labels: string[] = $state([]);
-    let active = $state(false);
-    let imageUrl = $state("/assets/chit.svg");
-    let maxStreak = $state(false);
-
-    function trigger(events: ChitEvent[]) {
-        maxStreak = false;
-        amount = events.reduce((total, chit) => total + chit.amount, 0);
-        labels = events.reduce((labels, c) => {
-            if (c.reason.kind === "achievement_unlocked") {
-                if (c.reason.type === "streak_365") {
-                    maxStreak = true;
-                    imageUrl = "/assets/max_streak.svg";
-                }
-                labels.push($_(`learnToEarn.${c.reason.type}`));
-            }
-            if (c.reason.kind === "external_achievement_unlocked") {
-                labels.push(c.reason.name);
-            }
-            return labels;
-        }, [] as string[]);
-        const showDuration = maxStreak ? LONG_DURATION : SHOW_DURATION;
-        ypos.target = dimensions.height / 2;
-        opacity.target = 1;
-        active = true;
-        if (maxStreak) {
-            setTimeout(() => {
-                shakeElements(
-                    [
-                        ".message-wrapper",
-                        ".chat-summary",
-                        ".avatar",
-                        "svg",
-                        ".date-label",
-                        ".icon",
-                        ".section-header",
-                        ".message-entry",
-                        ".section-selector",
-                        ".input-wrapper",
-                        ".legend",
-                        ".chat-list",
-                        ".communities .card",
-                    ],
-                    {
-                        duration: showDuration,
-                        maxIntensity: 50,
-                    },
-                );
-            }, 100);
-        }
-        window.setTimeout(() => {
-            confetti = true;
-            msg.target = { scale: 1, opacity: 1 };
-            window.setTimeout(() => {
-                confetti = false;
-                opacity.target = OFF_SCREEN_OPACITY;
-                msg.target = { scale: 0, opacity: 1 };
-                window.setTimeout(reset, TWEEN_DURATION);
-            }, showDuration);
-        }, SLIDE_IN_DURATION);
-
-        // update the backend so we don't get notified again
-        client.markAchievementsSeen();
-    }
-
-    function reset() {
-        dimensions = getDimension();
-        left = dimensions.width / 2;
-        ypos.set(dimensions.height + 100);
-        opacity.set(OFF_SCREEN_OPACITY, { duration: 0 });
-        msg.set({ scale: 0, opacity: 1 }, { duration: 0 });
-        confetti = false;
-        active = false;
-    }
-
-    function getDimension() {
-        return {
-            height: window.innerHeight,
-            width: window.innerWidth,
-        };
-    }
-
-    onMount(() => {
-        // - Useful for testing
-        // trigger([
-        //     {
-        //         amount: 100_000,
-        //         timestamp: BigInt(Date.now()),
-        //         reason: {
-        //             kind: "achievement_unlocked",
-        //             type: "streak_365",
-        //         },
-        //     },
-        // ]);
-        return subscribe("chitEarned", trigger);
-    });
-</script>
-
-<svelte:window on:resize={reset} />
-
-<div class="overlay" class:active>
-    <div
-        class="wrapper"
-        style={`top: ${ypos.current}px; left: ${left}px; opacity: ${opacity.current}`}>
-        {#if confetti}
-            <div class="confetti">
-                <Confetti
-                    amount={100}
-                    x={[-1.5, 1.5]}
-                    y={[-1.5, 1.5]}
-                    size={20}
-                    colorArray={["url(/assets/chit.svg)"]} />
-            </div>
-        {/if}
-        <div class="coin">
-            <SpinningToken
-                spin
-                mirror={false}
-                size={maxStreak ? "extra-large" : "large"}
-                logo={imageUrl} />
-        </div>
-        <div
-            class="details"
-            style={`transform: scale(${msg.current.scale}); opacity: ${msg.current.opacity}`}>
-            <div class="chit">
-                {`+${amount.toLocaleString()} CHIT`}
-            </div>
-            <div class="msgs">
-                {#each labels as label}
-                    <div class="msg">{label}</div>
-                {/each}
-            </div>
-        </div>
-    </div>
-</div>
-
-<style lang="scss">
-    .wrapper {
-        position: absolute;
-        left: 500px;
-        @include z-index("coin");
-        transform: translate(-50%, -50%);
-        display: flex;
-        flex-direction: column;
-        gap: $sp4;
-        align-items: center;
-        padding: $sp8;
-        backdrop-filter: blur(10px);
-        background: var(--modal-bg);
-        border: var(--modal-bd);
-        border-radius: var(--modal-rd);
-        box-shadow: var(--modal-sh);
-
-        @include mobile() {
-            width: calc(100% - 80px);
-            padding: $sp6;
-        }
-    }
-
-    .confetti {
-        position: absolute;
-        @include z-index("coin");
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-    }
-
-    .chit {
-        border-radius: var(--rd);
-        background: var(--button-bg);
-        color: var(--button-txt);
-        width: fit-content;
-        padding: $sp2 $sp3;
-    }
-
-    .details {
-        display: flex;
-        flex-direction: column;
-        gap: $sp3;
-        align-items: center;
-    }
-
-    .msgs,
-    .msg {
-        text-align: center;
-        @include mobile() {
-            @include font(book, normal, fs-90);
-        }
-    }
-
-    .overlay {
-        @include z-index("chit");
-        position: fixed;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        top: 0;
-        left: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-        pointer-events: none;
-        transition: backdrop-filter 300ms ease-in-out;
-
-        &.active {
-            backdrop-filter: saturate(0.3);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/ContentCaption.svelte b/frontend/app/src/components/home/ContentCaption.svelte
deleted file mode 100644
index 35d818e086..0000000000
--- a/frontend/app/src/components/home/ContentCaption.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="ts">
-    import { i18nKey } from "../../i18n/i18n";
-    import Translatable from "../Translatable.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-
-    interface Props {
-        edited: boolean;
-        caption: string | undefined;
-        blockLevelMarkdown?: boolean;
-    }
-
-    let { edited, caption, blockLevelMarkdown = false }: Props = $props();
-</script>
-
-{#if caption !== undefined && caption !== ""}
-    <Markdown text={caption} inline={!blockLevelMarkdown} />
-    {#if edited}
-        <span class="edited-msg">(<Translatable resourceKey={i18nKey("edited")} />)</span>
-    {/if}
-{/if}
diff --git a/frontend/app/src/components/home/CryptoContent.svelte b/frontend/app/src/components/home/CryptoContent.svelte
deleted file mode 100644
index 0c1d179fbf..0000000000
--- a/frontend/app/src/components/home/CryptoContent.svelte
+++ /dev/null
@@ -1,95 +0,0 @@
-<script lang="ts">
-    import type { CryptocurrencyContent, OpenChat } from "@client";
-    import { cryptoLookup, currentUserIdStore } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { i18nKey } from "../../i18n/i18n";
-    import Translatable from "../Translatable.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        content: CryptocurrencyContent;
-        me?: boolean;
-        reply?: boolean;
-        senderId: string;
-    }
-
-    let { content, me = false, reply = false, senderId }: Props = $props();
-
-    let logo = $derived($cryptoLookup.get(content.transfer.ledger)?.logo);
-    let transferText = $derived(
-        client.buildCryptoTransferText($_, $currentUserIdStore, senderId, content, me),
-    );
-    let transactionLinkText = $derived(client.buildTransactionLink($_, content.transfer));
-</script>
-
-{#if transferText !== undefined}
-    <div class="message">
-        <div class="logo-wrapper">
-            <img class="logo" src={logo} />
-        </div>
-        <div class="details">
-            <div class="transfer-txt">
-                <Markdown text={transferText} inline={true} />
-            </div>
-            <div class="links">
-                {#if transactionLinkText !== undefined}
-                    <div class="link transaction">
-                        <Markdown text={transactionLinkText} inline={!reply} />
-                    </div>
-                {/if}
-            </div>
-        </div>
-    </div>
-{:else}
-    <div class="unexpected"><Translatable resourceKey={i18nKey("tokenTransfer.unexpected")} /></div>
-{/if}
-
-{#if content.caption !== undefined}
-    <Markdown text={content.caption} inline={!reply} />
-{/if}
-
-<style lang="scss">
-    .unexpected {
-        @include font(light, italic, fs-90);
-    }
-
-    .links {
-        display: flex;
-        align-items: center;
-        gap: $sp3;
-    }
-
-    .link {
-        text-align: center;
-        margin-bottom: $sp3;
-        cursor: pointer;
-        @include font-size(fs-80);
-    }
-
-    .logo {
-        $size: toRem(55);
-        width: $size;
-        height: $size;
-        background-size: contain;
-        background-repeat: no-repeat;
-        background-position: top;
-        border-radius: 50%;
-
-        -webkit-box-reflect: below 0
-            linear-gradient(hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0) 45%, hsla(0, 0%, 100%, 0.2));
-    }
-
-    .message {
-        display: flex;
-        align-items: center;
-        gap: $sp4;
-        padding: $sp3 0;
-    }
-
-    .transfer-txt {
-        margin-bottom: $sp2;
-    }
-</style>
diff --git a/frontend/app/src/components/home/CryptoSelector.svelte b/frontend/app/src/components/home/CryptoSelector.svelte
deleted file mode 100644
index 0e4439dd90..0000000000
--- a/frontend/app/src/components/home/CryptoSelector.svelte
+++ /dev/null
@@ -1,181 +0,0 @@
-<script lang="ts">
-    import { i18nKey } from "@src/i18n/i18n";
-    import type { EnhancedTokenDetails } from "@client";
-    import { cryptoLookup, cryptoTokensSorted, iconSize } from "@client";
-    import ChevronDown from "svelte-material-icons/ChevronDown.svelte";
-    import Menu from "../Menu.svelte";
-    import MenuIcon from "../MenuIcon.svelte";
-    import MenuItem from "../MenuItem.svelte";
-    import Search from "../Search.svelte";
-    import Translatable from "../Translatable.svelte";
-
-    interface Props {
-        ledger: string | undefined;
-        filter?: (details: EnhancedTokenDetails) => boolean;
-        onSelect?: (ledger: string, urlFormat: string) => void;
-    }
-
-    let { ledger = $bindable(), filter = (_) => true, onSelect }: Props = $props();
-
-    let selecting = false;
-    let ignoreClick = false;
-
-    let allAvailableTokens = $derived($cryptoTokensSorted.filter((t) => t.enabled && filter(t)));
-    let filteredTokens = $derived(allAvailableTokens.filter(matchesSearch));
-
-    $effect(() => {
-        if (ledger === undefined && allAvailableTokens.length > 0) {
-            ledger = allAvailableTokens[0].ledger;
-        }
-    });
-
-    function matchesSearch(details: EnhancedTokenDetails): boolean {
-        return (
-            searchTerm === "" ||
-            details.name.toLowerCase().includes(searchTermLower) ||
-            details.symbol.toLowerCase().includes(searchTermLower)
-        );
-    }
-
-    function selectToken(selectedLedger: string, urlFormat: string) {
-        selecting = false;
-        ledger = selectedLedger;
-        onSelect?.(ledger, urlFormat);
-    }
-
-    function onKeyDown(ev: KeyboardEvent) {
-        if (ev.key === "Escape") {
-            selecting = false;
-        }
-    }
-
-    function windowClick() {
-        if (selecting && !ignoreClick) {
-            selecting = false;
-        }
-        ignoreClick = false;
-    }
-
-    let searching = $state(false);
-    let searchTerm = $state("");
-    let searchTermLower = $derived(searchTerm.toLowerCase());
-    function searchClicked(e?: Event) {
-        e?.preventDefault();
-        e?.stopPropagation();
-    }
-</script>
-
-{#if allAvailableTokens.length > 0 && ledger !== undefined}
-    <MenuIcon centered position={"bottom"} align={"start"}>
-        {#snippet menuIcon()}
-            <div class="token-selector-trigger">
-                <div class="symbol">
-                    {$cryptoLookup.get(ledger ?? "")?.symbol}
-                </div>
-                <ChevronDown viewBox={"0 0 24 24"} size={$iconSize} color={"var(--icon-txt)"} />
-            </div>
-        {/snippet}
-
-        {#snippet menuItems()}
-            <div>
-                <!-- svelte-ignore a11y_click_events_have_key_events -->
-                <!-- svelte-ignore a11y_no_static_element_interactions -->
-                <div onclick={searchClicked} class="search">
-                    <Search
-                        placeholder={i18nKey("search")}
-                        fill
-                        bind:searching
-                        bind:searchTerm></Search>
-                </div>
-                <Menu cls="crypto_selector" centered>
-                    {#if filteredTokens.length === 0}
-                        <div class="no_match">
-                            <Translatable resourceKey={i18nKey("noMatchingTokens")}></Translatable>
-                        </div>
-                    {:else}
-                        {#each filteredTokens as token}
-                            <MenuItem onclick={() => selectToken(token.ledger, token.urlFormat)}>
-                                {#snippet icon()}
-                                    <img alt={token.symbol} class="token-icon" src={token.logo} />
-                                {/snippet}
-                                {#snippet text()}
-                                    <div class="token-text">
-                                        <div class="name">
-                                            {token.name}
-                                        </div>
-                                        <div class="symbol">
-                                            {token.symbol}
-                                        </div>
-                                    </div>
-                                {/snippet}
-                            </MenuItem>
-                        {/each}
-                    {/if}
-                </Menu>
-            </div>
-        {/snippet}
-    </MenuIcon>
-{/if}
-
-<svelte:window onclick={windowClick} onkeydown={onKeyDown} />
-
-<style lang="scss">
-    :global(.token-selector-trigger .menu-icon.open) {
-        transform: rotate(180deg);
-    }
-
-    :global(.token-selector-trigger .menu-icon) {
-        transition: transform 250ms ease-in-out;
-        transform-origin: 50%;
-    }
-
-    :global(.crypto_selector.menu) {
-        border-top: none;
-        border-radius: 0 0 var(--menu-rd) var(--menu-rd);
-        max-height: calc(var(--override-height, 80vh) - 67px);
-    }
-
-    .token-selector-trigger {
-        display: flex;
-        cursor: pointer;
-        align-items: center;
-        gap: $sp1;
-    }
-
-    .token-icon {
-        background-size: contain;
-        height: $sp5;
-        width: $sp5;
-        border-radius: 50%;
-        background-repeat: no-repeat;
-        background-position: top;
-    }
-
-    .token-text {
-        display: flex;
-        align-items: center;
-        gap: $sp3;
-    }
-
-    .symbol {
-        color: var(--primary);
-    }
-
-    .no_match {
-        padding: $sp3 $sp4;
-        color: var(--txt-light);
-    }
-
-    .search {
-        background-color: var(--menu-bg);
-        border: var(--bw) solid var(--menu-bd);
-        border-radius: var(--menu-rd) var(--menu-rd) 0 0;
-        border-bottom: none;
-        padding: $sp3;
-        width: toRem(250);
-
-        @include mobile() {
-            width: 70vw;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/CryptoTransferBuilder.svelte b/frontend/app/src/components/home/CryptoTransferBuilder.svelte
deleted file mode 100644
index 0e70ba98a6..0000000000
--- a/frontend/app/src/components/home/CryptoTransferBuilder.svelte
+++ /dev/null
@@ -1,336 +0,0 @@
-<script lang="ts">
-    import type { ChatSummary, OpenChat, UserSummary } from "@client";
-    import {
-        allUsersStore,
-        cryptoBalanceStore,
-        enhancedCryptoLookup as cryptoLookup,
-        currentUserIdStore,
-        iconSize,
-        mobileWidth,
-    } from "@client";
-    import { type CryptocurrencyContent, type MessageContext, nowNanos } from "@shared";
-    import { getContext, onMount } from "svelte";
-    import Alert from "svelte-material-icons/Alert.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { pinNumberErrorMessageStore } from "../../stores/pinNumber";
-    import Button from "../Button.svelte";
-    import ButtonGroup from "../ButtonGroup.svelte";
-    import ErrorMessage from "../ErrorMessage.svelte";
-    import Legend from "../Legend.svelte";
-    import ModalContent from "../ModalContent.svelte";
-    import Overlay from "../Overlay.svelte";
-    import TextArea from "../TextArea.svelte";
-    import Translatable from "../Translatable.svelte";
-    import AccountInfo from "./AccountInfo.svelte";
-    import BalanceWithRefresh from "./BalanceWithRefresh.svelte";
-    import CryptoSelector from "./CryptoSelector.svelte";
-    import SingleUserSelector from "./SingleUserSelector.svelte";
-    import TokenInput from "./TokenInput.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        draftAmount: bigint;
-        ledger: string;
-        chat: ChatSummary;
-        defaultReceiver: string | undefined;
-        messageContext: MessageContext;
-        onClose: () => void;
-    }
-
-    let {
-        draftAmount = $bindable(),
-        ledger = $bindable(),
-        chat,
-        defaultReceiver,
-        messageContext,
-        onClose,
-    }: Props = $props();
-
-    let refreshing = false;
-    let error: string | undefined = $state(undefined);
-    let message = $state("");
-    let confirming = $state(false);
-    let toppingUp = $state(false);
-    let tokenChanging = $state(true);
-    let balanceWithRefresh: BalanceWithRefresh;
-    let receiver: UserSummary | undefined = $state(undefined);
-    let validAmount: boolean = $state(false);
-    let sending = $state(false);
-
-    let cryptoBalance = $derived($cryptoBalanceStore.get(ledger) ?? 0n);
-    let tokenDetails = $derived($cryptoLookup.get(ledger)!);
-    let symbol = $derived(tokenDetails.symbol);
-    let transferFees = $derived(tokenDetails.transferFee);
-    let multiUserChat = $derived(chat.kind === "group_chat" || chat.kind === "channel");
-    let remainingBalance = $state(0n);
-    $effect(() => {
-        remainingBalance =
-            draftAmount > BigInt(0) ? cryptoBalance - draftAmount - transferFees : cryptoBalance;
-    });
-    let valid = $derived(
-        error === undefined && validAmount && receiver !== undefined && !tokenChanging,
-    );
-    let zero = $derived(cryptoBalance <= transferFees && !tokenChanging);
-    let errorMessage = $derived(error !== undefined ? i18nKey(error) : $pinNumberErrorMessageStore);
-
-    onMount(() => {
-        // default the receiver to the other user in a direct chat
-        if (chat.kind === "direct_chat") {
-            receiver = $allUsersStore.get(chat.them.userId);
-        } else if (defaultReceiver !== undefined && defaultReceiver !== $currentUserIdStore) {
-            receiver = $allUsersStore.get(defaultReceiver);
-        }
-    });
-
-    function reset() {
-        confirming = false;
-        balanceWithRefresh.refresh();
-    }
-
-    function maxAmount(balance: bigint): bigint {
-        return balance - transferFees;
-    }
-
-    function send() {
-        if (!confirming) {
-            confirming = true;
-            return;
-        }
-
-        if (receiver === undefined) return;
-
-        const content: CryptocurrencyContent = {
-            kind: "crypto_content",
-            caption: message === "" ? undefined : message,
-            transfer: {
-                kind: "pending",
-                ledger,
-                token: symbol,
-                recipient: receiver.userId,
-                amountE8s: draftAmount,
-                feeE8s: transferFees,
-                createdAtNanos: nowNanos(),
-            },
-        };
-
-        sending = true;
-        error = undefined;
-
-        client
-            .sendMessageWithContent(messageContext, content, false)
-            .then((resp) => {
-                if (resp.kind === "success" || resp.kind === "transfer_success") {
-                    onClose();
-                } else if ($pinNumberErrorMessageStore === undefined) {
-                    error = "errorSendingMessage";
-                }
-            })
-            .finally(() => (sending = false));
-    }
-
-    function cancel() {
-        toppingUp = false;
-        onClose();
-    }
-
-    function onBalanceRefreshed() {
-        onBalanceRefreshFinished();
-        error = undefined;
-    }
-
-    function onBalanceRefreshError(err: string) {
-        onBalanceRefreshFinished();
-        error = err;
-    }
-
-    function onBalanceRefreshFinished() {
-        toppingUp = false;
-        tokenChanging = false;
-        if (remainingBalance < 0) {
-            remainingBalance = BigInt(0);
-            draftAmount = cryptoBalance - transferFees;
-            if (draftAmount < 0) {
-                draftAmount = BigInt(0);
-            }
-        }
-    }
-</script>
-
-<Overlay dismissible>
-    <ModalContent>
-        {#snippet header()}
-            <span class="header">
-                <div class="left">
-                    <div class="main-title">
-                        <div><Translatable resourceKey={i18nKey("tokenTransfer.send")} /></div>
-                        <div>
-                            <CryptoSelector bind:ledger />
-                        </div>
-                    </div>
-                </div>
-                <BalanceWithRefresh
-                    bind:toppingUp
-                    bind:this={balanceWithRefresh}
-                    {ledger}
-                    value={remainingBalance}
-                    label={i18nKey("cryptoAccount.shortBalanceLabel")}
-                    bold
-                    showTopUp
-                    onClick={() => (confirming = false)}
-                    onRefreshed={onBalanceRefreshed}
-                    onError={onBalanceRefreshError} />
-            </span>
-        {/snippet}
-        {#snippet body()}
-            <form>
-                <div class="body" class:zero={zero || toppingUp}>
-                    {#if zero || toppingUp}
-                        <AccountInfo {ledger} />
-                        {#if zero}
-                            <p>
-                                <Translatable
-                                    resourceKey={i18nKey("tokenTransfer.zeroBalance", {
-                                        token: symbol,
-                                    })} />
-                            </p>
-                        {/if}
-                        <p><Translatable resourceKey={i18nKey("tokenTransfer.makeDeposit")} /></p>
-                    {:else}
-                        {#if multiUserChat}
-                            <div class="receiver">
-                                <Legend label={i18nKey("tokenTransfer.receiver")} />
-                                <SingleUserSelector
-                                    bind:selectedReceiver={receiver}
-                                    autofocus={multiUserChat} />
-                            </div>
-                        {/if}
-                        <div class="transfer">
-                            <TokenInput
-                                {ledger}
-                                {transferFees}
-                                autofocus={!multiUserChat}
-                                bind:valid={validAmount}
-                                maxAmount={maxAmount(cryptoBalance)}
-                                bind:amount={draftAmount} />
-                        </div>
-                        <div class="message">
-                            <Legend label={i18nKey("tokenTransfer.message")} />
-                            <TextArea
-                                maxlength={200}
-                                rows={3}
-                                autofocus={false}
-                                placeholder={i18nKey("tokenTransfer.messagePlaceholder")}
-                                bind:value={message} />
-                        </div>
-                        {#if confirming}
-                            <div class="confirming">
-                                <div class="alert">
-                                    <Alert size={$iconSize} color={"var(--warn"} />
-                                </div>
-                                <div class="alert-txt">
-                                    <Translatable
-                                        resourceKey={i18nKey("tokenTransfer.warning", {
-                                            token: symbol,
-                                        })} />
-                                </div>
-                            </div>
-                        {/if}
-                        {#if errorMessage !== undefined}
-                            <div class="error">
-                                <ErrorMessage
-                                    ><Translatable resourceKey={errorMessage} /></ErrorMessage>
-                            </div>
-                        {/if}
-                    {/if}
-                </div>
-            </form>
-        {/snippet}
-        {#snippet footer()}
-            <span>
-                <ButtonGroup>
-                    <Button small={!$mobileWidth} tiny={$mobileWidth} secondary onClick={cancel}
-                        ><Translatable resourceKey={i18nKey("cancel")} /></Button>
-                    {#if toppingUp || zero}
-                        <Button
-                            small={!$mobileWidth}
-                            disabled={refreshing}
-                            loading={refreshing}
-                            tiny={$mobileWidth}
-                            onClick={reset}
-                            ><Translatable resourceKey={i18nKey("refresh")} /></Button>
-                    {:else}
-                        <Button
-                            small={!$mobileWidth}
-                            disabled={!valid || sending}
-                            loading={sending}
-                            tiny={$mobileWidth}
-                            onClick={send}
-                            ><Translatable
-                                resourceKey={i18nKey(
-                                    confirming ? "tokenTransfer.confirm" : "tokenTransfer.send",
-                                )} /></Button>
-                    {/if}
-                </ButtonGroup>
-            </span>
-        {/snippet}
-    </ModalContent>
-</Overlay>
-
-<style lang="scss">
-    .header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: $sp2;
-
-        .left {
-            flex: auto;
-            display: flex;
-            align-items: center;
-            gap: $sp4;
-
-            .main-title {
-                flex: auto;
-                display: flex;
-                align-items: baseline;
-                gap: 10px;
-                @include font(bold, normal, fs-120);
-            }
-        }
-    }
-
-    .body {
-        transition: background-color 100ms ease-in-out;
-        @include font(book, normal, fs-100, 28);
-    }
-
-    .confirming {
-        padding: $sp4;
-        border: 1px solid var(--warn);
-        display: flex;
-        align-items: flex-start;
-        gap: $sp3;
-        border-radius: var(--rd);
-
-        .alert {
-            flex: 0 0 25px;
-        }
-
-        .alert-txt {
-            flex: auto;
-        }
-    }
-
-    .transfer {
-        margin-bottom: $sp4;
-    }
-
-    .how-to {
-        margin-top: $sp4;
-    }
-
-    .error {
-        margin-top: $sp4;
-    }
-</style>
diff --git a/frontend/app/src/components/home/CurrentChat.svelte b/frontend/app/src/components/home/CurrentChat.svelte
deleted file mode 100644
index 6a32cfe679..0000000000
--- a/frontend/app/src/components/home/CurrentChat.svelte
+++ /dev/null
@@ -1,515 +0,0 @@
-<script lang="ts">
-    import { trackedEffect } from "@src/utils/effects.svelte";
-    import {
-        type AttachmentContent,
-        blockedUsersStore,
-        botState,
-        type ChatIdentifier,
-        chatIdentifiersEqual,
-        type ChatSummary,
-        communitiesStore,
-        CommunityMap,
-        type CommunitySummary,
-        currentUserIdStore,
-        currentUserStore,
-        type EnhancedReplyContext,
-        type EventWrapper,
-        type FilteredProposals,
-        lastCryptoSent,
-        LEDGER_CANISTER_ICP,
-        localUpdates,
-        type Mention,
-        type Message,
-        type MessageContent,
-        type MessageContext,
-        messageContextsEqual,
-        messagesRead,
-        type MultiUserChat,
-        type OpenChat,
-        type ReadonlySet,
-        ROLE_OWNER,
-        selectedChatDraftMessageStore,
-        selectedChatPinnedMessagesStore,
-        selectedCommunitySummaryStore,
-        setRightPanelHistory,
-        subscribe,
-        suspendedUserStore,
-        type User,
-    } from "@client";
-    import { getContext, onMount, tick } from "svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { messageToForwardStore } from "../../stores/messageToForward";
-    import { toastStore } from "../../stores/toast";
-    import { randomSentence } from "../../utils/randomMsg";
-    import AreYouSure from "../AreYouSure.svelte";
-    import DirectChatHeader from "../bots/DirectChatHeader.svelte";
-    import ImportToCommunity from "./communities/Import.svelte";
-    import CryptoTransferBuilder from "./CryptoTransferBuilder.svelte";
-    import CurrentChatHeader from "./CurrentChatHeader.svelte";
-    import CurrentChatMessages from "./CurrentChatMessages.svelte";
-    import CurrentChatSearchHeader from "./CurrentChatSearchHeader.svelte";
-    import DropTarget from "./DropTarget.svelte";
-    import ExternalContent from "./ExternalContent.svelte";
-    import Footer from "./Footer.svelte";
-    import GiphySelector from "./GiphySelector.svelte";
-    import MemeBuilder from "./MemeBuilder.svelte";
-    import P2PSwapContentBuilder from "./P2PSwapContentBuilder.svelte";
-    import PollBuilder from "./PollBuilder.svelte";
-    import PrizeContentBuilder from "./PrizeContentBuilder.svelte";
-    import { releaseNotifications } from "tauri-plugin-oc-api";
-
-    interface Props {
-        joining: MultiUserChat | undefined;
-        chat: ChatSummary;
-        filteredProposals: FilteredProposals | undefined;
-    }
-
-    let { joining, chat, filteredProposals }: Props = $props();
-
-    let currentChatMessages = $state<CurrentChatMessages>();
-
-    const client = getContext<OpenChat>("client");
-
-    let previousChatId: ChatIdentifier | undefined = $state(undefined);
-    let unreadMessages = $state<number>(0);
-    let firstUnreadMention = $state<Mention | undefined>();
-    let creatingPoll = $state(false);
-    let creatingCryptoTransfer: { ledger: string; amount: bigint } | undefined = $state(undefined);
-    let creatingPrizeMessage = $state(false);
-    let creatingP2PSwapMessage = $state(false);
-    let selectingGif = $state(false);
-    let buildingMeme = $state(false);
-    //@ts-ignore
-    let pollBuilder: PollBuilder = $state();
-    //@ts-ignore
-    let giphySelector: GiphySelector = $state();
-    //@ts-ignore
-    let memeBuilder: MemeBuilder = $state();
-    let showSearchHeader = $state(false);
-    let searchTerm = $state("");
-    let importToCommunities: CommunityMap<CommunitySummary> | undefined = $state();
-    let removeLinkPreviewDetails: { event: EventWrapper<Message>; url: string } | undefined =
-        $state(undefined);
-
-    onMount(() => {
-        // Release any active notifications for the current chat when the component mounts
-        // TODO include thread index
-        if (client.isNativeAndroid()) {
-            switch (chat.id.kind) {
-                case "direct_chat":
-                    releaseNotifications({
-                        kind: "dms",
-                        senderId: chat.id.userId,
-                    });
-                    break;
-                case "group_chat":
-                    releaseNotifications({
-                        kind: "group",
-                        groupId: chat.id.groupId,
-                    });
-                    break;
-                case "channel":
-                    releaseNotifications({
-                        kind: "channel",
-                        communityId: chat.id.communityId,
-                        channelId: chat.id.channelId,
-                    });
-            }
-        }
-
-        const unsubs = [
-            messagesRead.subscribe(() => {
-                unreadMessages = getUnreadMessageCount(chat);
-                firstUnreadMention = client.getFirstUnreadMention(chat);
-            }),
-            subscribe("createPoll", onCreatePoll),
-            subscribe("attachGif", onAttachGif),
-            subscribe("tokenTransfer", onTokenTransfer),
-            subscribe("createTestMessages", onCreateTestMessages),
-            subscribe("searchChat", onSearchChat),
-        ];
-        return () => {
-            unsubs.forEach((u) => u());
-        };
-    });
-
-    function onCreatePoll(ctx: MessageContext) {
-        if (messageContextsEqual(ctx, messageContext)) {
-            createPoll();
-        }
-    }
-
-    function onAttachGif([evContext, search]: [MessageContext, string]) {
-        if (messageContextsEqual(messageContext, evContext)) {
-            attachGif(search);
-        }
-    }
-
-    function onTokenTransfer(args: { context: MessageContext; ledger?: string; amount?: bigint }) {
-        if (messageContextsEqual(messageContext, args.context)) {
-            tokenTransfer(args);
-        }
-    }
-
-    function onCreateTestMessages([ctx, num]: [MessageContext, number]) {
-        if (messageContextsEqual(ctx, messageContext)) {
-            createTestMessages(num);
-        }
-    }
-
-    function importToCommunity() {
-        importToCommunities = $communitiesStore.filter((c) => c.membership.role === ROLE_OWNER);
-        if (importToCommunities.size === 0) {
-            toastStore.showFailureToast(i18nKey("communities.noOwned"));
-            importToCommunities = undefined;
-        } else {
-            setRightPanelHistory([]);
-        }
-    }
-
-    function getUnreadMessageCount(chat: ChatSummary): number {
-        if (client.isPreviewing(chat.id) || client.isLapsed(chat.id)) return 0;
-
-        return messagesRead.unreadMessageCount(chat.id, chat.latestMessage?.event.messageIndex);
-    }
-
-    function onWindowFocus() {
-        client.closeNotificationsForChat(chat.id);
-    }
-
-    function createPoll() {
-        if (!client.canSendMessage(chat.id, "message", "poll")) return;
-
-        if (pollBuilder !== undefined) {
-            pollBuilder.resetPoll();
-        }
-        creatingPoll = true;
-    }
-
-    function tokenTransfer(detail: { ledger?: string; amount?: bigint }) {
-        creatingCryptoTransfer = {
-            ledger: detail.ledger ?? $lastCryptoSent ?? LEDGER_CANISTER_ICP,
-            amount: detail.amount ?? BigInt(0),
-        };
-    }
-
-    function createPrizeMessage() {
-        creatingPrizeMessage = true;
-    }
-
-    function createP2PSwapMessage() {
-        creatingP2PSwapMessage = true;
-    }
-
-    function onFileSelected(content: AttachmentContent) {
-        localUpdates.draftMessages.setAttachment({ chatId: chat.id }, content);
-    }
-
-    function attachGif(search: string) {
-        selectingGif = true;
-        if (giphySelector !== undefined) {
-            giphySelector.reset(search);
-        }
-    }
-
-    function makeMeme() {
-        buildingMeme = true;
-        if (memeBuilder !== undefined) {
-            memeBuilder.reset();
-        }
-    }
-
-    function replyTo(ctx: EnhancedReplyContext) {
-        showSearchHeader = false;
-        localUpdates.draftMessages.setReplyingTo({ chatId: chat.id }, ctx);
-    }
-
-    function searchChat(search: string) {
-        onSearchChat(search);
-    }
-
-    function onSearchChat(term: string) {
-        showSearchHeader = true;
-        searchTerm = term;
-    }
-
-    function createTestMessages(total: number): void {
-        function send(n: number) {
-            if (n === total) return;
-
-            sendMessageWithAttachment(randomSentence(), false, undefined);
-
-            window.setTimeout(() => send(n + 1), 500);
-        }
-
-        send(0);
-    }
-
-    function onSendMessage(detail: [string | undefined, User[], boolean]) {
-        if (!canSendAny) return;
-        let [text, mentioned, blockLevelMarkdown] = detail;
-        if ($selectedChatDraftMessageStore?.editingEvent !== undefined) {
-            client
-                .editMessageWithAttachment(
-                    messageContext,
-                    text,
-                    blockLevelMarkdown,
-                    $selectedChatDraftMessageStore.attachment,
-                    $selectedChatDraftMessageStore.editingEvent,
-                )
-                .then((success) => {
-                    if (!success) {
-                        toastStore.showFailureToast(i18nKey("errorEditingMessage"));
-                    }
-                });
-        } else {
-            sendMessageWithAttachment(
-                text,
-                blockLevelMarkdown,
-                $selectedChatDraftMessageStore?.attachment,
-                mentioned,
-            );
-        }
-    }
-
-    function sendMessageWithAttachment(
-        textContent: string | undefined,
-        blockLevelMarkdown: boolean,
-        attachment: AttachmentContent | undefined,
-        mentioned: User[] = [],
-    ) {
-        client.sendMessageWithAttachment(
-            messageContext,
-            textContent,
-            blockLevelMarkdown,
-            attachment,
-            mentioned,
-        );
-    }
-
-    function forwardMessage(msg: Message) {
-        client.forwardMessage(messageContext, msg);
-    }
-
-    function onSetTextContent(txt?: string): void {
-        localUpdates.draftMessages.setTextContent({ chatId: chat.id }, txt);
-    }
-
-    function onRemovePreview(event: EventWrapper<Message>, url: string): void {
-        removeLinkPreviewDetails = {
-            event,
-            url,
-        };
-    }
-
-    function removePreview(yes: boolean): Promise<void> {
-        if (removeLinkPreviewDetails !== undefined && yes) {
-            const { event, url } = removeLinkPreviewDetails;
-
-            client.hideLinkPreview(messageContext, event, url).then((success) => {
-                if (!success) {
-                    toastStore.showFailureToast(i18nKey("errorRemovingLinkPreview"));
-                }
-            });
-        }
-
-        removeLinkPreviewDetails = undefined;
-        return Promise.resolve();
-    }
-
-    function isBlocked(chatSummary: ChatSummary, blockedUsers: ReadonlySet<string>): boolean {
-        return chatSummary.kind === "direct_chat" && blockedUsers.has(chatSummary.them.userId);
-    }
-
-    function defaultCryptoTransferReceiver(): string | undefined {
-        return $selectedChatDraftMessageStore?.replyingTo?.sender?.userId;
-    }
-
-    function onSendMessageWithContent(content: MessageContent) {
-        client.sendMessageWithContent(messageContext, content, false);
-    }
-    let messageContext = $derived({ chatId: chat.id });
-
-    trackedEffect("current-chat", () => {
-        if (previousChatId === undefined || !chatIdentifiersEqual(chat.id, previousChatId)) {
-            previousChatId = chat.id;
-            showSearchHeader = false;
-            unreadMessages = getUnreadMessageCount(chat);
-            firstUnreadMention = client.getFirstUnreadMention(chat);
-            tick().then(() => {
-                if ($messageToForwardStore !== undefined) {
-                    forwardMessage($messageToForwardStore);
-                    messageToForwardStore.set(undefined);
-                }
-            });
-        }
-    });
-    let showFooter = $derived(!showSearchHeader && !$suspendedUserStore);
-    let blocked = $derived(isBlocked(chat, $blockedUsersStore));
-    let frozen = $derived(client.isChatOrCommunityFrozen(chat, $selectedCommunitySummaryStore));
-    let canSendAny = $derived(client.canSendMessage(chat.id, "message"));
-    let preview = $derived(client.isPreviewing(chat.id));
-    let lapsed = $derived(client.isLapsed(chat.id));
-    let canPin = $derived(client.canPinMessages(chat.id));
-    let canBlockUsers = $derived(client.canBlockUsers(chat.id));
-    let canDelete = $derived(client.canDeleteOtherUsersMessages(chat.id));
-    let canReplyInThread = $derived(client.canSendMessage(chat.id, "thread"));
-    let canReact = $derived(client.canReactToMessages(chat.id));
-    let canInvite = $derived(client.canInviteUsers(chat.id));
-    let readonly = $derived(client.isChatReadOnly(chat.id));
-    let externalUrl = $derived(chat.kind === "channel" ? chat.externalUrl : undefined);
-    let privateChatPreview = $derived(client.maskChatMessages(chat));
-    let bot = $derived(
-        chat.kind === "direct_chat" ? botState.externalBots.get(chat.them.userId) : undefined,
-    );
-
-    function onGoToMessageIndex(args: { index: number; preserveFocus: boolean }) {
-        currentChatMessages?.scrollToMessageIndex(args.index, args.preserveFocus);
-    }
-
-    function stopTyping() {
-        if (chat !== undefined) {
-            client.stopTyping(chat.id, $currentUserIdStore);
-        }
-    }
-
-    function startTyping() {
-        if (chat !== undefined) {
-            client.startTyping(chat.id, $currentUserIdStore);
-        }
-    }
-</script>
-
-<svelte:window onfocus={onWindowFocus} />
-
-{#if removeLinkPreviewDetails !== undefined}
-    <AreYouSure title={i18nKey("removePreviewQuestion")} action={removePreview} />
-{/if}
-
-{#if importToCommunities !== undefined}
-    <ImportToCommunity
-        groupId={chat.id}
-        onCancel={() => (importToCommunities = undefined)}
-        ownedCommunities={importToCommunities} />
-{/if}
-
-<PollBuilder onSend={onSendMessageWithContent} bind:this={pollBuilder} bind:open={creatingPoll} />
-
-{#if creatingCryptoTransfer !== undefined}
-    <CryptoTransferBuilder
-        {chat}
-        ledger={creatingCryptoTransfer.ledger}
-        draftAmount={creatingCryptoTransfer.amount}
-        defaultReceiver={defaultCryptoTransferReceiver()}
-        {messageContext}
-        onClose={() => (creatingCryptoTransfer = undefined)} />
-{/if}
-
-{#if creatingPrizeMessage}
-    <PrizeContentBuilder
-        context={messageContext}
-        {chat}
-        ledger={$lastCryptoSent ?? LEDGER_CANISTER_ICP}
-        draftAmount={0n}
-        onClose={() => (creatingPrizeMessage = false)} />
-{/if}
-
-{#if creatingP2PSwapMessage}
-    <P2PSwapContentBuilder
-        fromLedger={$lastCryptoSent ?? LEDGER_CANISTER_ICP}
-        {messageContext}
-        onClose={() => (creatingP2PSwapMessage = false)} />
-{/if}
-
-<GiphySelector
-    onSend={onSendMessageWithContent}
-    bind:this={giphySelector}
-    bind:open={selectingGif} />
-
-<MemeBuilder onSend={onSendMessageWithContent} bind:this={memeBuilder} bind:open={buildingMeme} />
-
-<DropTarget {chat} mode={"message"} {onFileSelected}>
-    <div class="wrapper">
-        {#if showSearchHeader}
-            <CurrentChatSearchHeader
-                {chat}
-                bind:searchTerm
-                {onGoToMessageIndex}
-                onClose={() => (showSearchHeader = false)} />
-        {:else if bot !== undefined && chat.kind === "direct_chat"}
-            <DirectChatHeader {bot} {chat} {onSearchChat}></DirectChatHeader>
-        {:else}
-            <CurrentChatHeader
-                onSearchChat={searchChat}
-                onImportToCommunity={importToCommunity}
-                {blocked}
-                {readonly}
-                selectedChatSummary={chat}
-                hasPinned={$selectedChatPinnedMessagesStore.size > 0} />
-        {/if}
-        {#if externalUrl !== undefined}
-            <ExternalContent {privateChatPreview} {frozen} {externalUrl} />
-        {:else}
-            <CurrentChatMessages
-                bind:this={currentChatMessages}
-                onReplyTo={replyTo}
-                {onRemovePreview}
-                {privateChatPreview}
-                {chat}
-                {filteredProposals}
-                {canPin}
-                {canBlockUsers}
-                {canDelete}
-                {canReplyInThread}
-                {canSendAny}
-                {canReact}
-                {canInvite}
-                {readonly}
-                {firstUnreadMention}
-                footer={showFooter}
-                {unreadMessages} />
-        {/if}
-        {#if showFooter}
-            <Footer
-                {chat}
-                attachment={$selectedChatDraftMessageStore?.attachment}
-                editingEvent={$selectedChatDraftMessageStore?.editingEvent}
-                replyingTo={$selectedChatDraftMessageStore?.replyingTo}
-                textContent={$selectedChatDraftMessageStore?.textContent}
-                user={$currentUserStore}
-                mode={"message"}
-                {joining}
-                {preview}
-                {lapsed}
-                {blocked}
-                {messageContext}
-                externalContent={externalUrl !== undefined}
-                onCancelReply={() =>
-                    localUpdates.draftMessages.setReplyingTo({ chatId: chat.id }, undefined)}
-                onClearAttachment={() =>
-                    localUpdates.draftMessages.setAttachment({ chatId: chat.id }, undefined)}
-                onCancelEdit={() => localUpdates.draftMessages.delete({ chatId: chat.id })}
-                {onSetTextContent}
-                onStartTyping={startTyping}
-                onStopTyping={stopTyping}
-                {onFileSelected}
-                {onSendMessage}
-                onAttachGif={attachGif}
-                onMakeMeme={makeMeme}
-                onTokenTransfer={tokenTransfer}
-                onCreatePrizeMessage={createPrizeMessage}
-                onCreateP2PSwapMessage={createP2PSwapMessage}
-                onCreatePoll={createPoll} />
-        {/if}
-    </div>
-</DropTarget>
-
-<style lang="scss">
-    .wrapper {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        height: 100%;
-        position: relative;
-    }
-</style>
diff --git a/frontend/app/src/components/home/CurrentChatHeader.svelte b/frontend/app/src/components/home/CurrentChatHeader.svelte
deleted file mode 100644
index fe0a973155..0000000000
--- a/frontend/app/src/components/home/CurrentChatHeader.svelte
+++ /dev/null
@@ -1,311 +0,0 @@
-<script lang="ts">
-    import type { ChatSummary, DiamondMembershipStatus, GroupChatSummary } from "@client";
-    import {
-        allUsersStore,
-        anonUserStore,
-        AvatarSize,
-        chatListScopeStore,
-        iconSize,
-        mobileWidth,
-        publish,
-        restrictToSelectedChat,
-        routeForChatIdentifier,
-        selectedChatIdStore,
-        selectedCommunitySummaryStore,
-        setRightPanelHistory,
-        byContext as typersByContext,
-        type OpenChat,
-        type TypersByKey,
-    } from "@client";
-    import { navigate } from "@utils/navigation";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import ArrowLeft from "svelte-material-icons/ArrowLeft.svelte";
-    import ArrowRight from "svelte-material-icons/ArrowRight.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { rtlStore } from "../../stores/rtl";
-    import { now } from "../../stores/time";
-    import Avatar from "../Avatar.svelte";
-    import HoverIcon from "../HoverIcon.svelte";
-    import WithVerifiedBadge from "../icons/WithVerifiedBadge.svelte";
-    import SectionHeader from "../SectionHeader.svelte";
-    import Translatable from "../Translatable.svelte";
-    import Typing from "@shared_components/Typing.svelte";
-    import type { ProfileLinkClickedEvent } from "@webcomponents/profileLink";
-    import ChatSubtext from "./ChatSubtext.svelte";
-    import CurrentChatMenu from "./CurrentChatMenu.svelte";
-    import Badges from "./profile/Badges.svelte";
-    import ActiveBroadcastSummary from "./video/ActiveBroadcastSummary.svelte";
-    import ActiveVideoCallResume from "./video/ActiveVideoCallResume.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        selectedChatSummary: ChatSummary;
-        blocked: boolean;
-        readonly: boolean;
-        hasPinned: boolean;
-        onSearchChat: (search: string) => void;
-        onImportToCommunity: (group: GroupChatSummary) => void;
-    }
-
-    let {
-        selectedChatSummary,
-        blocked,
-        readonly,
-        hasPinned,
-        onSearchChat,
-        onImportToCommunity,
-    }: Props = $props();
-
-    let userId = $derived(
-        selectedChatSummary.kind === "direct_chat" ? selectedChatSummary.them.userId : "",
-    );
-    let isMultiUser = $derived(
-        selectedChatSummary.kind === "group_chat" || selectedChatSummary.kind === "channel",
-    );
-    let isBot = $derived($allUsersStore.get(userId)?.kind === "bot");
-    let hasUserProfile = $derived(!isMultiUser && !isBot);
-    let verified = $derived(
-        selectedChatSummary.kind === "group_chat" && selectedChatSummary.verified,
-    );
-
-    function clearSelection() {
-        publish("clearSelection");
-    }
-
-    function showGroupDetails() {
-        if ($selectedChatIdStore !== undefined) {
-            setRightPanelHistory([
-                {
-                    kind: "group_details",
-                },
-            ]);
-        }
-    }
-
-    function showGroupMembers() {
-        publish("showGroupMembers");
-    }
-
-    function normaliseChatSummary(_now: number, chatSummary: ChatSummary, typing: TypersByKey) {
-        switch (chatSummary.kind) {
-            case "direct_chat":
-                const them = $allUsersStore.get(chatSummary.them.userId);
-                return {
-                    name: client.displayName(them),
-                    diamondStatus: them?.diamondStatus ?? "inactive",
-                    streak: them?.streak ?? 0,
-                    chitEarned: them?.totalChitEarned,
-                    avatarUrl: client.userAvatarUrl(them),
-                    userId: chatSummary.them.userId,
-                    typing: client.getTypingString(
-                        $_,
-                        $allUsersStore,
-                        { chatId: chatSummary.id },
-                        typing,
-                    ),
-                    username: them ? "@" + them.username : undefined,
-                    eventsTTL: chatSummary.eventsTTL,
-                    uniquePerson: them?.isUniquePerson ?? false,
-                };
-            default:
-                return {
-                    name: chatSummary.name,
-                    diamondStatus: "inactive" as DiamondMembershipStatus["kind"],
-                    streak: 0,
-                    chitEarned: undefined,
-                    avatarUrl: client.groupAvatarUrl(chatSummary, $selectedCommunitySummaryStore),
-                    userId: undefined,
-                    username: undefined,
-                    typing: client.getTypingString(
-                        $_,
-                        $allUsersStore,
-                        { chatId: chatSummary.id },
-                        typing,
-                    ),
-                    eventsTTL: chatSummary.eventsTTL,
-                    uniquePerson: false,
-                };
-        }
-    }
-
-    function openUserProfile(ev: Event) {
-        if (hasUserProfile) {
-            ev.target?.dispatchEvent(
-                new CustomEvent<ProfileLinkClickedEvent>("profile-clicked", {
-                    detail: {
-                        userId,
-                        chatButton: false,
-                        inGlobalContext: false,
-                    },
-                    bubbles: true,
-                }),
-            );
-        }
-    }
-
-    function navigateToCommunity() {
-        if ($selectedCommunitySummaryStore !== undefined) {
-            navigate(`/community/${$selectedCommunitySummaryStore.id.communityId}`);
-        }
-    }
-
-    function navigateToChannel() {
-        if ($selectedCommunitySummaryStore !== undefined) {
-            navigate(routeForChatIdentifier("community", selectedChatSummary.id));
-        }
-    }
-
-    let chat = $derived(normaliseChatSummary($now, selectedChatSummary, $typersByContext));
-</script>
-
-<SectionHeader shadow flush>
-    {#if $mobileWidth && !$restrictToSelectedChat}
-        <div class="back" class:rtl={$rtlStore} onclick={clearSelection}>
-            <HoverIcon>
-                {#if $rtlStore}
-                    <ArrowRight size={$iconSize} color={"var(--icon-txt)"} />
-                {:else}
-                    <ArrowLeft size={$iconSize} color={"var(--icon-txt)"} />
-                {/if}
-            </HoverIcon>
-        </div>
-    {/if}
-
-    <div class="avatar" class:has-user-profile={hasUserProfile} onclick={openUserProfile}>
-        <Avatar
-            statusBorder={"var(--section-bg)"}
-            {blocked}
-            showStatus
-            userId={chat.userId}
-            url={chat.avatarUrl}
-            size={AvatarSize.Default} />
-    </div>
-    <div class="chat-details">
-        <div class="chat-name">
-            {#if isMultiUser && !readonly}
-                <WithVerifiedBadge {verified} size={"small"}>
-                    <div class="title">
-                        {#if $selectedCommunitySummaryStore !== undefined && $chatListScopeStore.kind === "favourite"}
-                            <span onclick={navigateToCommunity} class="pointer">
-                                {$selectedCommunitySummaryStore.name}
-                            </span>
-                            <span>{">"}</span>
-                            <span onclick={navigateToChannel} class="pointer">
-                                {chat.name}
-                            </span>
-                        {:else}
-                            {chat.name}
-                        {/if}
-                    </div>
-                </WithVerifiedBadge>
-            {:else if hasUserProfile}
-                <span onclick={openUserProfile} class="user-link">
-                    {chat.name}
-                </span>
-                <Badges
-                    uniquePerson={chat.uniquePerson}
-                    diamondStatus={chat.diamondStatus}
-                    streak={chat.streak}
-                    chitEarned={chat.chitEarned} />
-                <span class="username">{chat.username}</span>
-            {:else}
-                {chat.name}
-            {/if}
-        </div>
-        <div class="chat-subtext">
-            {#if blocked}
-                <Translatable resourceKey={i18nKey("blocked")} />
-            {:else if readonly}
-                <ChatSubtext chat={selectedChatSummary} />
-            {:else if chat.typing !== undefined}
-                {chat.typing} <Typing />
-            {:else if isMultiUser}
-                <ChatSubtext
-                    chat={selectedChatSummary}
-                    clickableMembers
-                    onMembersClick={showGroupMembers} />
-            {:else}
-                <ChatSubtext chat={selectedChatSummary} />
-            {/if}
-        </div>
-    </div>
-    <ActiveVideoCallResume />
-    {#if !readonly && !$anonUserStore}
-        <CurrentChatMenu
-            {hasPinned}
-            {selectedChatSummary}
-            {blocked}
-            {onImportToCommunity}
-            onShowGroupDetails={showGroupDetails}
-            {onSearchChat} />
-    {/if}
-
-    <ActiveBroadcastSummary />
-</SectionHeader>
-
-<style lang="scss">
-    .chat-name {
-        @include font(book, normal, fs-120);
-        @include ellipsis();
-        margin-bottom: $sp1;
-        display: flex;
-        align-items: center;
-        gap: $sp2;
-    }
-
-    .chat-subtext {
-        @include font(book, normal, fs-80);
-        @include ellipsis();
-        color: var(--txt-light);
-    }
-
-    .avatar {
-        flex: 0 0 55px;
-
-        &.has-user-profile {
-            cursor: pointer;
-        }
-    }
-
-    .pointer {
-        cursor: pointer;
-    }
-
-    .user-link {
-        cursor: pointer;
-        @media (hover: hover) {
-            &:hover {
-                text-decoration: underline;
-            }
-        }
-    }
-
-    .username {
-        font-weight: 200;
-        color: var(--txt-light);
-    }
-
-    .chat-details {
-        flex: 1;
-        overflow: auto;
-        padding: 0 $sp2;
-    }
-
-    .title {
-        display: flex;
-        flex-direction: row;
-        gap: $sp3;
-    }
-
-    .back {
-        flex: 0 0 10px;
-        margin-right: 5px;
-
-        &.rtl {
-            margin-right: 0;
-            margin-left: 5px;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/CurrentChatMenu.svelte b/frontend/app/src/components/home/CurrentChatMenu.svelte
deleted file mode 100644
index 85375a4c48..0000000000
--- a/frontend/app/src/components/home/CurrentChatMenu.svelte
+++ /dev/null
@@ -1,761 +0,0 @@
-<script lang="ts">
-    import {
-        allUsersStore,
-        chatIdentifiersEqual,
-        type ChatSummary,
-        currentUserIdStore,
-        directChatBotsStore,
-        favouritesStore,
-        type GroupChatSummary,
-        iconSize,
-        isDiamondStore,
-        isProposalGroupStore,
-        lastRightPanelState,
-        messagesRead,
-        mobileWidth,
-        notificationsSupported,
-        type OpenChat,
-        platformModeratorStore,
-        publish,
-        setRightPanelHistory,
-    } from "@client";
-    import { getContext, onMount } from "svelte";
-    import { _ } from "svelte-i18n";
-    import AccountMultiple from "svelte-material-icons/AccountMultiple.svelte";
-    import AccountMultiplePlus from "svelte-material-icons/AccountMultiplePlus.svelte";
-    import Bell from "svelte-material-icons/Bell.svelte";
-    import BellOff from "svelte-material-icons/BellOff.svelte";
-    import CancelIcon from "svelte-material-icons/Cancel.svelte";
-    import ChatQuestionIcon from "svelte-material-icons/ChatQuestion.svelte";
-    import TickIcon from "svelte-material-icons/Check.svelte";
-    import ContentCopy from "svelte-material-icons/ContentCopy.svelte";
-    import DeleteOutline from "svelte-material-icons/DeleteOutline.svelte";
-    import DotsVertical from "svelte-material-icons/DotsVertical.svelte";
-    import FileDocument from "svelte-material-icons/FileDocument.svelte";
-    import Headphones from "svelte-material-icons/Headphones.svelte";
-    import Import from "svelte-material-icons/Import.svelte";
-    import LocationExit from "svelte-material-icons/LocationExit.svelte";
-    import Magnify from "svelte-material-icons/Magnify.svelte";
-    import Pin from "svelte-material-icons/Pin.svelte";
-    import Tune from "svelte-material-icons/Tune.svelte";
-    import Webhook from "svelte-material-icons/Webhook.svelte";
-    import { i18nKey, interpolate } from "../../i18n/i18n";
-    import { canDeleteDirectChat, publishDeleteDirectChat } from "../../utils/directChat";
-    import { rtlStore } from "../../stores/rtl";
-    import { toastStore } from "../../stores/toast";
-    import { activeVideoCall } from "../../stores/video";
-    import HoverIcon from "../HoverIcon.svelte";
-    import ConvertToCommunity from "../icons/ConvertToCommunity.svelte";
-    import HeartMinus from "../icons/HeartMinus.svelte";
-    import HeartPlus from "../icons/HeartPlus.svelte";
-    import Menu from "../Menu.svelte";
-    import MenuIcon from "../MenuIcon.svelte";
-    import MenuItem from "../MenuItem.svelte";
-    import Translatable from "../Translatable.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        selectedChatSummary: ChatSummary;
-        blocked: boolean;
-        hasPinned: boolean;
-        onShowGroupDetails: () => void;
-        onSearchChat: (search: string) => void;
-        onImportToCommunity: (group: GroupChatSummary) => void;
-    }
-
-    let {
-        selectedChatSummary,
-        blocked,
-        hasPinned,
-        onShowGroupDetails,
-        onSearchChat,
-        onImportToCommunity,
-    }: Props = $props();
-
-    let botIdToUninstall = $derived(
-        selectedChatSummary.kind === "direct_chat" &&
-            $directChatBotsStore.has(selectedChatSummary.them.userId)
-            ? selectedChatSummary.them.userId
-            : undefined,
-    );
-    let governanceCanisterId = $derived(
-        selectedChatSummary.kind !== "direct_chat" &&
-            selectedChatSummary.subtype?.kind === "governance_proposals"
-            ? selectedChatSummary.subtype.governanceCanisterId
-            : undefined,
-    );
-    let canMakeProposals = $derived(
-        client.tryGetNervousSystem(governanceCanisterId)?.submittingProposalsEnabled ?? false,
-    );
-    let userId = $derived(
-        selectedChatSummary.kind === "direct_chat" ? selectedChatSummary.them.userId : "",
-    );
-    let themIfDirectChat = $derived(userId ? $allUsersStore.get(userId) : undefined);
-    let isBot = $derived(themIfDirectChat?.kind === "bot");
-    let isSuspended = $derived(themIfDirectChat?.suspended ?? false);
-    let groupDetailsSelected = $derived($lastRightPanelState.kind === "group_details");
-    let pinnedSelected = $derived($lastRightPanelState.kind === "show_pinned");
-    let membersSelected = $derived($lastRightPanelState.kind === "show_group_members");
-    let inviteMembersSelected = $derived($lastRightPanelState.kind === "invite_group_users");
-    let desktop = $derived(!$mobileWidth);
-    let canConvert = $derived(
-        selectedChatSummary.kind === "group_chat" &&
-            client.canConvertGroupToCommunity(selectedChatSummary.id),
-    );
-    let canImportToCommunity = $derived(client.canImportToCommunity(selectedChatSummary.id));
-    let canStartVideoCalls = $derived(
-        !blocked && client.canStartVideoCalls(selectedChatSummary.id),
-    );
-
-    let videoCallInProgress = $derived(selectedChatSummary.videoCallInProgress !== undefined);
-    let isPublic = $derived(!client.isChatPrivate(selectedChatSummary));
-
-    let inCall = $derived(
-        $activeVideoCall !== undefined &&
-            videoCallInProgress &&
-            chatIdentifiersEqual($activeVideoCall.chatId, selectedChatSummary?.id),
-    );
-
-    let videoMenuText = $derived(
-        videoCallInProgress
-            ? i18nKey("videoCall.joinVideo")
-            : isPublic
-              ? i18nKey("videoCall.startBroadcast")
-              : i18nKey("videoCall.startVideo"),
-    );
-
-    let canRegisterWebhook = $derived(client.canRegisterWebhook(selectedChatSummary.id));
-
-    let canStartOrJoinVideoCall = $derived(!inCall && (videoCallInProgress || canStartVideoCalls));
-
-    let showDeleteDirectChat = $derived(canDeleteDirectChat(selectedChatSummary));
-
-    let hasUnreadPinned = $state(false);
-
-    $effect(() => {
-        setUnreadPinned(hasPinned, selectedChatSummary);
-    });
-
-    onMount(() => {
-        return messagesRead.subscribe(() => setUnreadPinned(hasPinned, selectedChatSummary));
-    });
-
-    function setUnreadPinned(hasPinned: boolean, chat: ChatSummary) {
-        hasUnreadPinned =
-            hasPinned &&
-            (chat.kind === "group_chat" || chat.kind === "channel") &&
-            client.unreadPinned(chat.id, chat.dateLastPinned);
-    }
-
-    function toggleMuteNotifications(
-        mute: boolean | undefined,
-        muteAtEveryone: boolean | undefined,
-    ) {
-        publish("toggleMuteNotifications", {
-            chatId: selectedChatSummary.id,
-            mute,
-            muteAtEveryone,
-        });
-    }
-
-    function addToFavourites() {
-        client.addToFavourites(selectedChatSummary.id);
-    }
-
-    function removeFromFavourites() {
-        client.removeFromFavourites(selectedChatSummary.id);
-    }
-
-    function copyUrl() {
-        publish("copyUrl");
-    }
-
-    function showGroupDetails() {
-        onShowGroupDetails();
-    }
-
-    function showPinned() {
-        setRightPanelHistory([
-            {
-                kind: "show_pinned",
-            },
-        ]);
-    }
-
-    function searchChat() {
-        onSearchChat("");
-    }
-
-    function showProposalFilters() {
-        publish("showProposalFilters");
-    }
-
-    function showGroupMembers() {
-        publish("showGroupMembers");
-    }
-
-    function blockUser() {
-        if (selectedChatSummary.kind === "direct_chat") {
-            client.blockUserFromDirectChat(selectedChatSummary.them.userId).then((success) => {
-                if (success) {
-                    toastStore.showSuccessToast(i18nKey("blockUserSucceeded"));
-                } else {
-                    toastStore.showFailureToast(i18nKey("blockUserFailed"));
-                }
-            });
-        }
-    }
-
-    function unblockUser() {
-        if (selectedChatSummary.kind === "direct_chat") {
-            client.unblockUserFromDirectChat(selectedChatSummary.them.userId).then((success) => {
-                if (success) {
-                    toastStore.showSuccessToast(i18nKey("unblockUserSucceeded"));
-                } else {
-                    toastStore.showFailureToast(i18nKey("unblockUserFailed"));
-                }
-            });
-        }
-    }
-
-    function showInviteGroupUsers() {
-        publish("showInviteGroupUsers", true);
-    }
-
-    function leaveGroup() {
-        if (selectedChatSummary.kind === "direct_chat") return;
-        publish("leaveGroup", {
-            kind: "leave",
-            chatId: selectedChatSummary.id,
-            level: selectedChatSummary.level,
-        });
-    }
-
-    function convertToCommunity() {
-        if (!$isDiamondStore) {
-            publish("upgrade");
-        } else {
-            if (selectedChatSummary.kind === "group_chat") {
-                publish("convertGroupToCommunity", selectedChatSummary);
-            }
-        }
-    }
-
-    function importToCommunity() {
-        if (selectedChatSummary.kind === "group_chat") {
-            onImportToCommunity(selectedChatSummary);
-        }
-    }
-
-    function freezeGroup() {
-        if (selectedChatSummary.id.kind === "group_chat") {
-            client.freezeGroup(selectedChatSummary.id, undefined).then((success) => {
-                if (!success) {
-                    toastStore.showFailureToast(i18nKey("failedToFreezeGroup"));
-                }
-            });
-        }
-    }
-
-    function unfreezeGroup() {
-        if (selectedChatSummary.id.kind === "group_chat") {
-            client.unfreezeGroup(selectedChatSummary.id).then((success) => {
-                if (!success) {
-                    toastStore.showFailureToast(i18nKey("failedToUnfreezeGroup"));
-                }
-            });
-        }
-    }
-
-    function onSuspendUser() {
-        publish("suspendUser", userId);
-    }
-
-    function unsuspendUser() {
-        client.unsuspendUser(userId).then((success) => {
-            if (success) {
-                toastStore.showSuccessToast(i18nKey("unsuspendedUser"));
-            } else {
-                toastStore.showFailureToast(i18nKey("failedToUnsuspendUser"));
-            }
-        });
-    }
-
-    function makeProposal() {
-        publish("makeProposal");
-    }
-
-    function registerWebhook() {
-        if (selectedChatSummary.kind !== "direct_chat") {
-            publish("registerWebhook", selectedChatSummary);
-        }
-    }
-
-    function startVideoCall() {
-        publish("startVideoCall", {
-            chatId: selectedChatSummary.id,
-            callType: isPublic ? "broadcast" : "default",
-            join: videoCallInProgress,
-        });
-    }
-
-    function removeBot(botId: string) {
-        client
-            .uninstallBot({ kind: "direct_chat", userId: $currentUserIdStore }, botId)
-            .then((success) => {
-                if (!success) {
-                    toastStore.showFailureToast(i18nKey("bots.manage.removeFailed"));
-                }
-            });
-    }
-
-</script>
-
-{#if desktop}
-    {#if $isProposalGroupStore}
-        <HoverIcon onclick={showProposalFilters} title={$_("showFilters")}>
-            <Tune size={$iconSize} color={"var(--icon-txt)"} />
-        </HoverIcon>
-    {/if}
-    <HoverIcon onclick={searchChat} title={$_("searchChat")}>
-        <Magnify size={$iconSize} color={"var(--icon-txt)"} />
-    </HoverIcon>
-
-    {#if hasPinned}
-        <HoverIcon onclick={showPinned} title={$_("showPinned")}>
-            <div
-                class="pin"
-                class:unread={!pinnedSelected && hasUnreadPinned}
-                class:rtl={$rtlStore}>
-                <Pin
-                    size={$iconSize}
-                    color={pinnedSelected ? "var(--icon-selected)" : "var(--icon-txt)"} />
-            </div>
-        </HoverIcon>
-    {/if}
-
-    {#if selectedChatSummary.kind === "direct_chat"}
-        <HoverIcon onclick={showGroupDetails}>
-            <FileDocument
-                size={$iconSize}
-                color={groupDetailsSelected ? "var(--icon-selected)" : "var(--icon-txt)"} />
-        </HoverIcon>
-    {/if}
-
-    {#if selectedChatSummary.kind === "group_chat" || selectedChatSummary.kind === "channel"}
-        <HoverIcon
-            onclick={showGroupDetails}
-            title={interpolate($_, i18nKey("groupDetails", undefined, selectedChatSummary.level))}>
-            <FileDocument
-                size={$iconSize}
-                color={groupDetailsSelected ? "var(--icon-selected)" : "var(--icon-txt)"} />
-        </HoverIcon>
-        <HoverIcon onclick={showGroupMembers} title={$_("members")}>
-            <AccountMultiple
-                size={$iconSize}
-                color={membersSelected ? "var(--icon-selected)" : "var(--icon-txt)"} />
-        </HoverIcon>
-        {#if selectedChatSummary.public || client.canInviteUsers(selectedChatSummary.id)}
-            <HoverIcon
-                onclick={showInviteGroupUsers}
-                title={interpolate(
-                    $_,
-                    i18nKey("group.inviteUsers", undefined, selectedChatSummary.level, true),
-                )}>
-                <AccountMultiplePlus
-                    size={$iconSize}
-                    color={inviteMembersSelected ? "var(--icon-selected)" : "var(--icon-txt)"} />
-            </HoverIcon>
-        {/if}
-    {/if}
-{/if}
-<div class="menu">
-    <MenuIcon position={"bottom"} align={"end"}>
-        {#snippet menuIcon()}
-            <HoverIcon title={$_("chatMenu")}>
-                <DotsVertical size={$iconSize} color={"var(--icon-txt)"} />
-            </HoverIcon>
-        {/snippet}
-        {#snippet menuItems()}
-            <Menu>
-                {#if canStartOrJoinVideoCall}
-                    <MenuItem onclick={startVideoCall}>
-                        {#snippet icon()}
-                            <Headphones size={$iconSize} color={"var(--icon-inverted-txt)"} />
-                        {/snippet}
-                        {#snippet text()}
-                            <Translatable resourceKey={videoMenuText} />
-                        {/snippet}
-                    </MenuItem>
-                {/if}
-                {#if !$favouritesStore.has(selectedChatSummary.id)}
-                    <MenuItem onclick={addToFavourites}>
-                        {#snippet icon()}
-                            <HeartPlus size={$iconSize} color={"var(--menu-warn)"} />
-                        {/snippet}
-                        {#snippet text()}
-                            <Translatable resourceKey={i18nKey("communities.addToFavourites")} />
-                        {/snippet}
-                    </MenuItem>
-                {:else}
-                    <MenuItem onclick={removeFromFavourites}>
-                        {#snippet icon()}
-                            <HeartMinus size={$iconSize} color={"var(--menu-warn)"} />
-                        {/snippet}
-                        {#snippet text()}
-                            <Translatable
-                                resourceKey={i18nKey("communities.removeFromFavourites")} />
-                        {/snippet}
-                    </MenuItem>
-                {/if}
-                <MenuItem onclick={copyUrl}>
-                    {#snippet icon()}
-                        <ContentCopy size={$iconSize} color={"var(--icon-txt)"} />
-                    {/snippet}
-                    {#snippet text()}
-                        <Translatable resourceKey={i18nKey("copyUrl")} />
-                    {/snippet}
-                </MenuItem>
-                {#if $mobileWidth}
-                    {#if selectedChatSummary.kind === "direct_chat"}
-                        <MenuItem onclick={showGroupDetails}>
-                            {#snippet icon()}
-                                <FileDocument size={$iconSize} color={"var(--icon-inverted-txt)"} />
-                            {/snippet}
-                            {#snippet text()}
-                                <Translatable resourceKey={i18nKey("chatDetails")} />
-                            {/snippet}
-                        </MenuItem>
-                    {/if}
-                    {#if $isProposalGroupStore}
-                        <MenuItem onclick={showProposalFilters}>
-                            {#snippet icon()}
-                                <Tune size={$iconSize} color={"var(--icon-inverted-txt)"} />
-                            {/snippet}
-                            {#snippet text()}
-                                <Translatable resourceKey={i18nKey("proposal.filter")} />
-                            {/snippet}
-                        </MenuItem>
-                    {/if}
-                    <MenuItem onclick={searchChat}>
-                        {#snippet icon()}
-                            <Magnify size={$iconSize} color={"var(--icon-inverted-txt)"} />
-                        {/snippet}
-                        {#snippet text()}
-                            <Translatable resourceKey={i18nKey("searchChat")} />
-                        {/snippet}
-                    </MenuItem>
-                {/if}
-                {#if selectedChatSummary.kind === "group_chat" || selectedChatSummary.kind === "channel"}
-                    {#if $mobileWidth}
-                        {#if hasPinned}
-                            <MenuItem onclick={showPinned}>
-                                {#snippet icon()}
-                                    <Pin
-                                        size={$iconSize}
-                                        color={hasUnreadPinned
-                                            ? "var(--icon-selected)"
-                                            : "var(--icon-inverted-txt)"} />
-                                {/snippet}
-                                {#snippet text()}
-                                    <Translatable resourceKey={i18nKey("showPinned")} />
-                                {/snippet}
-                            </MenuItem>
-                        {/if}
-                        <MenuItem onclick={showGroupDetails}>
-                            {#snippet icon()}
-                                <FileDocument size={$iconSize} color={"var(--icon-inverted-txt)"} />
-                            {/snippet}
-                            {#snippet text()}
-                                <Translatable
-                                    resourceKey={i18nKey(
-                                        "groupDetails",
-                                        undefined,
-                                        selectedChatSummary.level,
-                                    )} />
-                            {/snippet}
-                        </MenuItem>
-                        <MenuItem onclick={showGroupMembers}>
-                            {#snippet icon()}
-                                <AccountMultiple
-                                    size={$iconSize}
-                                    color={"var(--icon-inverted-txt)"} />
-                            {/snippet}
-                            {#snippet text()}
-                                <Translatable resourceKey={i18nKey("members")} />
-                            {/snippet}
-                        </MenuItem>
-                        {#if client.canInviteUsers(selectedChatSummary.id)}
-                            <MenuItem onclick={showInviteGroupUsers}>
-                                {#snippet icon()}
-                                    <AccountMultiplePlus
-                                        size={$iconSize}
-                                        color={"var(--icon-inverted-txt)"} />
-                                {/snippet}
-                                {#snippet text()}
-                                    <Translatable
-                                        resourceKey={i18nKey(
-                                            "group.inviteUsers",
-                                            undefined,
-                                            selectedChatSummary.level,
-                                            true,
-                                        )} />
-                                {/snippet}
-                            </MenuItem>
-                        {/if}
-                    {/if}
-
-                    {#if notificationsSupported}
-                        {#if selectedChatSummary.membership.notificationsMuted === true}
-                            <MenuItem onclick={() => toggleMuteNotifications(false, undefined)}>
-                                {#snippet icon()}
-                                    <Bell size={$iconSize} color={"var(--icon-inverted-txt)"} />
-                                {/snippet}
-                                {#snippet text()}
-                                    <Translatable resourceKey={i18nKey("unmuteNotifications")} />
-                                {/snippet}
-                            </MenuItem>
-                        {:else}
-                            <MenuItem onclick={() => toggleMuteNotifications(true, undefined)}>
-                                {#snippet icon()}
-                                    <BellOff size={$iconSize} color={"var(--icon-inverted-txt)"} />
-                                {/snippet}
-                                {#snippet text()}
-                                    <Translatable resourceKey={i18nKey("muteNotifications")} />
-                                {/snippet}
-                            </MenuItem>
-                        {/if}
-                        {#if selectedChatSummary.membership.atEveryoneMuted === true}
-                            <MenuItem onclick={() => toggleMuteNotifications(undefined, false)}>
-                                {#snippet icon()}
-                                    <Bell size={$iconSize} color={"var(--icon-inverted-txt)"} />
-                                {/snippet}
-                                {#snippet text()}
-                                    <Translatable resourceKey={i18nKey("unmuteAtEveryone")} />
-                                {/snippet}
-                            </MenuItem>
-                        {:else}
-                            <MenuItem onclick={() => toggleMuteNotifications(undefined, true)}>
-                                {#snippet icon()}
-                                    <BellOff size={$iconSize} color={"var(--icon-inverted-txt)"} />
-                                {/snippet}
-                                {#snippet text()}
-                                    <Translatable resourceKey={i18nKey("muteAtEveryone")} />
-                                {/snippet}
-                            </MenuItem>
-                        {/if}
-                    {/if}
-
-                    {#if canMakeProposals}
-                        <MenuItem onclick={makeProposal}>
-                            {#snippet icon()}
-                                <ChatQuestionIcon
-                                    size={$iconSize}
-                                    color={"var(--icon-inverted-txt)"} />
-                            {/snippet}
-                            {#snippet text()}
-                                <Translatable resourceKey={i18nKey("proposal.makeProposal")} />
-                            {/snippet}
-                        </MenuItem>
-                    {/if}
-
-                    {#if canRegisterWebhook}
-                        <MenuItem onclick={registerWebhook}>
-                            {#snippet icon()}
-                                <Webhook size={$iconSize} color={"var(--icon-inverted-txt)"} />
-                            {/snippet}
-                            {#snippet text()}
-                                <Translatable resourceKey={i18nKey("webhook.registerTitle")} />
-                            {/snippet}
-                        </MenuItem>
-                    {/if}
-
-                    {#if $platformModeratorStore && selectedChatSummary.kind === "group_chat"}
-                        {#if client.isChatFrozen(selectedChatSummary.id)}
-                            <MenuItem warning onclick={unfreezeGroup}>
-                                {#snippet icon()}
-                                    <TickIcon size={$iconSize} color={"var(--menu-warn"} />
-                                {/snippet}
-                                {#snippet text()}
-                                    <Translatable resourceKey={i18nKey("unfreezeGroup")} />
-                                {/snippet}
-                            </MenuItem>
-                        {:else}
-                            <MenuItem warning onclick={freezeGroup}>
-                                {#snippet icon()}
-                                    <CancelIcon size={$iconSize} color={"var(--menu-warn"} />
-                                {/snippet}
-                                {#snippet text()}
-                                    <Translatable resourceKey={i18nKey("freezeGroup")} />
-                                {/snippet}
-                            </MenuItem>
-                        {/if}
-                    {/if}
-
-                    {#if client.canLeaveGroup(selectedChatSummary.id)}
-                        <MenuItem warning onclick={leaveGroup}>
-                            {#snippet icon()}
-                                <LocationExit size={$iconSize} color={"var(--menu-warn)"} />
-                            {/snippet}
-                            {#snippet text()}
-                                <Translatable
-                                    resourceKey={i18nKey(
-                                        "leaveGroup",
-                                        undefined,
-                                        selectedChatSummary.level,
-                                        true,
-                                    )} />
-                            {/snippet}
-                        </MenuItem>
-                    {/if}
-                    {#if canConvert}
-                        <MenuItem warning onclick={convertToCommunity}>
-                            {#snippet icon()}
-                                <ConvertToCommunity size={$iconSize} color={"var(--menu-warn)"} />
-                            {/snippet}
-                            {#snippet text()}
-                                <Translatable resourceKey={i18nKey("communities.convert")} />
-                            {/snippet}
-                        </MenuItem>
-                    {/if}
-                    {#if canImportToCommunity}
-                        <MenuItem warning onclick={importToCommunity}>
-                            {#snippet icon()}
-                                <Import size={$iconSize} color={"var(--menu-warn)"} />
-                            {/snippet}
-                            {#snippet text()}
-                                <Translatable resourceKey={i18nKey("communities.import")} />
-                            {/snippet}
-                        </MenuItem>
-                    {/if}
-                {/if}
-                {#if selectedChatSummary.kind === "direct_chat" && !isBot}
-                    {#if hasPinned}
-                        <MenuItem onclick={showPinned}>
-                            {#snippet icon()}
-                                <Pin size={$iconSize} color={"var(--icon-inverted-txt)"} />
-                            {/snippet}
-                            {#snippet text()}
-                                <Translatable resourceKey={i18nKey("showPinned")} />
-                            {/snippet}
-                        </MenuItem>
-                    {/if}
-                    {#if notificationsSupported}
-                        {#if selectedChatSummary.membership.notificationsMuted === true}
-                            <MenuItem onclick={() => toggleMuteNotifications(false, undefined)}>
-                                {#snippet icon()}
-                                    <Bell size={$iconSize} color={"var(--icon-inverted-txt)"} />
-                                {/snippet}
-                                {#snippet text()}
-                                    <Translatable resourceKey={i18nKey("unmuteNotifications")} />
-                                {/snippet}
-                            </MenuItem>
-                        {:else}
-                            <MenuItem onclick={() => toggleMuteNotifications(true, undefined)}>
-                                {#snippet icon()}
-                                    <BellOff size={$iconSize} color={"var(--icon-inverted-txt)"} />
-                                {/snippet}
-                                {#snippet text()}
-                                    <Translatable resourceKey={i18nKey("muteNotifications")} />
-                                {/snippet}
-                            </MenuItem>
-                        {/if}
-                    {/if}
-                    {#if blocked}
-                        <MenuItem onclick={unblockUser}>
-                            {#snippet icon()}
-                                <CancelIcon size={$iconSize} color={"var(--icon-inverted-txt)"} />
-                            {/snippet}
-                            {#snippet text()}
-                                <Translatable resourceKey={i18nKey("unblockUser")} />
-                            {/snippet}
-                        </MenuItem>
-                    {:else}
-                        <MenuItem onclick={blockUser}>
-                            {#snippet icon()}
-                                <CancelIcon size={$iconSize} color={"var(--icon-inverted-txt)"} />
-                            {/snippet}
-                            {#snippet text()}
-                                <Translatable resourceKey={i18nKey("blockUser")} />
-                            {/snippet}
-                        </MenuItem>
-                    {/if}
-                    {#if $platformModeratorStore}
-                        {#if isSuspended}
-                            <MenuItem onclick={unsuspendUser}>
-                                {#snippet icon()}
-                                    <TickIcon size={$iconSize} color={"var(--icon-inverted-txt)"} />
-                                {/snippet}
-                                {#snippet text()}
-                                    <Translatable resourceKey={i18nKey("unsuspendUser")} />
-                                {/snippet}
-                            </MenuItem>
-                        {:else}
-                            <MenuItem onclick={onSuspendUser}>
-                                {#snippet icon()}
-                                    <CancelIcon
-                                        size={$iconSize}
-                                        color={"var(--icon-inverted-txt)"} />
-                                {/snippet}
-                                {#snippet text()}
-                                    <Translatable resourceKey={i18nKey("suspendUser")} />
-                                {/snippet}
-                            </MenuItem>
-                        {/if}
-                    {/if}
-                {/if}
-                {#if botIdToUninstall !== undefined}
-                    <MenuItem onclick={() => removeBot(botIdToUninstall)}>
-                        {#snippet icon()}
-                            <DeleteOutline size={$iconSize} color={"var(--icon-inverted-txt)"} />
-                        {/snippet}
-                        {#snippet text()}
-                            <Translatable resourceKey={i18nKey("bots.manage.remove")} />
-                        {/snippet}
-                    </MenuItem>
-                {/if}
-                {#if showDeleteDirectChat}
-                    <MenuItem warning onclick={() => publishDeleteDirectChat(selectedChatSummary)}>
-                        {#snippet icon()}
-                            <DeleteOutline size={$iconSize} color={"var(--menu-warn)"} />
-                        {/snippet}
-                        {#snippet text()}
-                            <Translatable resourceKey={i18nKey("deleteChat")} />
-                        {/snippet}
-                    </MenuItem>
-                {/if}
-            </Menu>
-        {/snippet}
-    </MenuIcon>
-</div>
-
-<style lang="scss">
-    .menu {
-        flex: 0 0 20px;
-    }
-
-    $dot-size: 9px;
-
-    .pin {
-        position: relative;
-        display: grid;
-        align-content: center;
-
-        &.unread::after {
-            content: "";
-            width: $dot-size;
-            height: $dot-size;
-            background-color: var(--accent);
-            border-radius: 50%;
-            position: absolute;
-            bottom: -$sp2;
-            right: -$sp2;
-        }
-
-        &.unread.rtl::after {
-            left: -$sp2;
-            right: auto;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/CurrentChatMessages.svelte b/frontend/app/src/components/home/CurrentChatMessages.svelte
deleted file mode 100644
index 5448902a86..0000000000
--- a/frontend/app/src/components/home/CurrentChatMessages.svelte
+++ /dev/null
@@ -1,361 +0,0 @@
-<script lang="ts">
-    import { trackedEffect } from "@src/utils/effects.svelte";
-    import {
-        type ChatEvent as ChatEventType,
-        type ChatIdentifier,
-        type ChatSummary,
-        type EnhancedReplyContext,
-        type EventWrapper,
-        type Mention,
-        type Message,
-        type OpenChat,
-        type ReadonlySet,
-        FilteredProposals,
-        allUsersStore,
-        chatIdentifiersEqual,
-        chatListScopeStore,
-        chatsInitialisedStore,
-        currentUserIdStore,
-        eventsStore,
-        failedMessagesStore,
-        localUpdates,
-        messageIndexStore,
-        messagesRead,
-        ROLE_NONE,
-        routeForChatIdentifier,
-        selectedChatDraftMessageStore,
-        selectedChatExpandedDeletedMessageStore,
-        selectedChatIdStore,
-        selectedChatPinnedMessagesStore,
-        selectedCommunitySummaryStore,
-        showMiddle,
-        stripSuspendedGate,
-        threadOpenStore,
-        unconfirmedStore,
-        chatIdentifierToString,
-    } from "@client";
-    import { navigate } from "@utils/navigation";
-    import { getContext, untrack } from "svelte";
-    import Witch from "@shared_components/Witch.svelte";
-    import {
-        chatStartItem,
-        flattenTimeline,
-        type FlatChatItem,
-    } from "@shared_components/flatChatItems";
-    import ChatEvent from "./ChatEvent.svelte";
-    import ChatEventList from "./ChatEventList.svelte";
-    import InitialChatMessage from "./InitialChatMessage.svelte";
-    import PrivatePreview from "./PrivatePreview.svelte";
-    import TimelineDate from "./TimelineDate.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        chat: ChatSummary;
-        unreadMessages: number;
-        readonly: boolean;
-        firstUnreadMention: Mention | undefined;
-        canPin: boolean;
-        canBlockUsers: boolean;
-        canDelete: boolean;
-        canSendAny: boolean;
-        canReact: boolean;
-        canInvite: boolean;
-        footer: boolean;
-        canReplyInThread: boolean;
-        filteredProposals: FilteredProposals | undefined;
-        privateChatPreview: boolean;
-        onRemovePreview: (event: EventWrapper<Message>, url: string) => void;
-        onReplyTo: (ctx: EnhancedReplyContext) => void;
-    }
-
-    let {
-        chat,
-        unreadMessages,
-        readonly,
-        firstUnreadMention,
-        canPin,
-        canBlockUsers,
-        canDelete,
-        canSendAny,
-        canReact,
-        canInvite,
-        footer,
-        canReplyInThread,
-        filteredProposals,
-        privateChatPreview,
-        onRemovePreview,
-        onReplyTo,
-    }: Props = $props();
-
-    // treat this as if it might be null so we don't get errors when it's unmounted
-    let chatEventList: ChatEventList | undefined = $state();
-    let messagesDiv: HTMLDivElement | undefined = $state();
-    let messagesDivHeight: number = $state(0);
-    let initialised = $state(false);
-    let currentChatId: ChatIdentifier | undefined = $state();
-
-    function onGoToMessageIndex(detail: { index: number }) {
-        doGoToMessageIndex(detail.index);
-    }
-
-    function doGoToMessageIndex(index: number): void {
-        navigate(routeForChatIdentifier($chatListScopeStore.kind, chat.id));
-        chatEventList?.scrollToMessageIndex(messageContext, index, false);
-    }
-
-    export function scrollToMessageIndex(index: number, preserveFocus: boolean) {
-        chatEventList?.scrollToMessageIndex(messageContext, index, preserveFocus);
-    }
-
-    function replyTo(replyContext: EnhancedReplyContext) {
-        if (!canSendAny) return;
-        onReplyTo(replyContext);
-    }
-
-    function onEditEvent(ev: EventWrapper<Message>) {
-        localUpdates.draftMessages.setEditing({ chatId: chat.id }, ev, $allUsersStore);
-    }
-
-    export function externalGoToMessage(messageIndex: number): void {
-        chatEventList?.onMessageWindowLoaded({
-            context: messageContext,
-            messageIndex,
-            initialLoad: false,
-        });
-    }
-
-    function isMe(evt: EventWrapper<ChatEventType>): boolean {
-        if (evt.event.kind === "message") {
-            return evt.event.sender === $currentUserIdStore;
-        }
-        if (evt.event.kind === "group_chat_created") {
-            return evt.event.created_by === $currentUserIdStore;
-        }
-        return false;
-    }
-
-    function isPinned(store: ReadonlySet<number>, evt: EventWrapper<ChatEventType>): boolean {
-        if (evt.event.kind === "message") {
-            return store.has(evt.event.messageIndex);
-        }
-
-        return false;
-    }
-
-    function isCollapsed(
-        ew: EventWrapper<ChatEventType>,
-        filteredProposals: FilteredProposals | undefined,
-    ): boolean {
-        return ew.event.kind === "message" && isCollpasedProposal(ew.event, filteredProposals);
-    }
-
-    function toggleMessageExpansion(ew: EventWrapper<ChatEventType>, expand: boolean) {
-        if (ew.event.kind === "message" && ew.event.content.kind === "proposal_content") {
-            client.toggleProposalFilterMessageExpansion(ew.event.messageId, expand);
-        }
-    }
-
-    function groupInner(filteredProposals: FilteredProposals | undefined) {
-        return (events: EventWrapper<ChatEventType>[]) => {
-            return client.groupWhile((a, b) => inSameGroup(a, b, filteredProposals), events);
-        };
-    }
-
-    // Each expanded proposal should be in a group by itself
-    // All collapsed proposals should be grouped together
-    // Otherwise group by sender
-    function inSameGroup(
-        a: EventWrapper<ChatEventType>,
-        b: EventWrapper<ChatEventType>,
-        filteredProposals: FilteredProposals | undefined,
-    ): boolean {
-        if (a.event.kind === "message" && b.event.kind === "message") {
-            const aKind = a.event.content.kind;
-            const bKind = b.event.content.kind;
-            if (aKind === "proposal_content" || bKind === "proposal_content") {
-                return (
-                    isCollpasedProposal(a.event, filteredProposals) &&
-                    isCollpasedProposal(b.event, filteredProposals)
-                );
-            } else {
-                return client.sameUser(a, b);
-            }
-        }
-        return false;
-    }
-
-    function isCollpasedProposal(
-        message: Message,
-        filteredProposals: FilteredProposals | undefined,
-    ): boolean {
-        if (message.content.kind !== "proposal_content") return false;
-        return filteredProposals?.isCollapsed(message.messageId, message.content.proposal) ?? false;
-    }
-
-    function shouldShowAvatar(
-        chat: ChatSummary,
-        earliestLoadedEventIndex: number | undefined,
-    ): boolean {
-        // If this is an empty chat, show the avatar
-        if (isEmptyChat) {
-            return true;
-        }
-        // Otherwise, only show the avatar if we have loaded right back to the earliest available events
-        if (earliestLoadedEventIndex === undefined) {
-            return false;
-        }
-        // For new direct chats the first event is the 'DirectChatCreated' event which we only load a short while after
-        // sending the first message, so to prevent a short flicker with no avatar, we still show the avatar if the
-        // earliest loaded event index is 1, even though event 0 is available
-        const indexRequired = Math.max(client.earliestAvailableEventIndex(chat), 1);
-        return earliestLoadedEventIndex <= indexRequired;
-    }
-    let privateCommunityPreview = $derived(
-        $selectedCommunitySummaryStore !== undefined &&
-            ($selectedCommunitySummaryStore.membership.role === ROLE_NONE ||
-                $selectedCommunitySummaryStore.membership.lapsed) &&
-            (!$selectedCommunitySummaryStore.public ||
-                stripSuspendedGate($selectedCommunitySummaryStore.gateConfig.gate).kind !==
-                    "no_gate"),
-    );
-    let privatePreview = $derived(privateCommunityPreview || privateChatPreview);
-    let isEmptyChat = $derived(chat.latestEventIndex <= 0 || privatePreview);
-
-    trackedEffect("current-chat-messages", () => {
-        if (currentChatId === undefined || !chatIdentifiersEqual(chat.id, currentChatId)) {
-            currentChatId = chat.id;
-            initialised = false;
-
-            // If the chat is empty, there is nothing to initialise, so we can set initialised to true
-            if (isEmptyChat) {
-                initialised = true;
-            }
-        }
-    });
-    let showAvatar = $derived(initialised && shouldShowAvatar(chat, $eventsStore[0]?.index));
-    let messageContext = $derived({ chatId: chat?.id, threadRootMessageIndex: undefined });
-    let timeline = $derived(
-        client.groupEvents(
-            [...$eventsStore].reverse(),
-            $currentUserIdStore,
-            chat.kind === "channel" && chat.public,
-            $selectedChatExpandedDeletedMessageStore,
-            groupInner(filteredProposals),
-        ),
-    );
-    let items = $derived.by<FlatChatItem[]>(() => {
-        const flat: FlatChatItem[] = flattenTimeline(timeline);
-        if (showAvatar) {
-            // rendered at the oldest end of the list (the visual top)
-            flat.push(chatStartItem(chatIdentifierToString(chat.id)));
-        }
-        return flat;
-    });
-
-    // Scroll to the route's message index when it changes — and also on the
-    // effect's FIRST run: on single-column layouts the pinned/details panels
-    // unmount the chat view, so a pinned-message tap navigates while the old
-    // instance is being destroyed (where it is silently swallowed) and the
-    // remounted instance must pick the navigation up from the route.
-    let previousChatId: ChatIdentifier | undefined = undefined;
-    let previousMessageIndex: number | undefined = undefined;
-    $effect(() => {
-        void $threadOpenStore;
-        const idx = $messageIndexStore;
-        const sameChat = chatIdentifiersEqual($selectedChatIdStore, previousChatId);
-        if ($chatsInitialisedStore && idx !== undefined && (!sameChat || idx !== previousMessageIndex)) {
-            untrack(() => {
-                scrollToMessageIndex(idx, false);
-            });
-        }
-        previousChatId = $selectedChatIdStore;
-        previousMessageIndex = idx;
-    });
-</script>
-
-<Witch />
-
-{#if privatePreview}
-    <div class="private-preview">
-        <PrivatePreview />
-        {#if showAvatar}
-            <InitialChatMessage {chat} />
-        {/if}
-    </div>
-{:else}
-    <ChatEventList
-        bind:this={chatEventList}
-        rootSelector={"chat-messages"}
-        threadRootEvent={undefined}
-        maintainScroll
-        visible={$showMiddle}
-        {readonly}
-        {unreadMessages}
-        {firstUnreadMention}
-        {footer}
-        {items}
-        {chat}
-        bind:initialised
-        bind:messagesDiv
-        bind:messagesDivHeight>
-        {#snippet row(
-            item,
-            { isAccepted, isConfirmed, isFailed, isReadByMe, messageObserver, focusIndex },
-        )}
-            {#if item.kind === "timeline_date"}
-                <TimelineDate timestamp={item.timestamp} />
-            {:else if item.kind === "chat_start"}
-                <InitialChatMessage {chat} />
-            {:else}
-                {@const evt = item.event}
-                <ChatEvent
-                    observer={messageObserver}
-                    focused={evt.event.kind === "message" &&
-                        evt.event.messageIndex === focusIndex &&
-                        !isFailed($failedMessagesStore, evt)}
-                    accepted={isAccepted($unconfirmedStore, evt)}
-                    confirmed={isConfirmed($unconfirmedStore, evt)}
-                    failed={isFailed($failedMessagesStore, evt)}
-                    readByMe={isReadByMe($messagesRead, evt)}
-                    chatId={chat.id}
-                    chatType={chat.kind}
-                    me={isMe(evt)}
-                    first={item.first}
-                    last={item.last}
-                    {readonly}
-                    {canPin}
-                    {canBlockUsers}
-                    {canDelete}
-                    {canSendAny}
-                    {canReact}
-                    {canInvite}
-                    {canReplyInThread}
-                    collapsed={isCollapsed(evt, filteredProposals)}
-                    supportsEdit
-                    supportsReply
-                    threadRootMessage={undefined}
-                    publicGroup={(chat.kind === "group_chat" || chat.kind === "channel") &&
-                        chat.public}
-                    pinned={isPinned($selectedChatPinnedMessagesStore, evt)}
-                    editing={$selectedChatDraftMessageStore?.editingEvent === evt}
-                    onReplyTo={replyTo}
-                    {onRemovePreview}
-                    {onEditEvent}
-                    {onGoToMessageIndex}
-                    onExpandMessage={() => toggleMessageExpansion(evt, true)}
-                    onCollapseMessage={() => toggleMessageExpansion(evt, false)}
-                    event={evt} />
-            {/if}
-        {/snippet}
-    </ChatEventList>
-{/if}
-
-<style lang="scss">
-    .private-preview {
-        @include message-list();
-        background-color: var(--currentChat-msgs-bg);
-        display: flex;
-        flex-direction: column-reverse;
-    }
-</style>
diff --git a/frontend/app/src/components/home/DeletedContent.svelte b/frontend/app/src/components/home/DeletedContent.svelte
deleted file mode 100644
index 90af3691c2..0000000000
--- a/frontend/app/src/components/home/DeletedContent.svelte
+++ /dev/null
@@ -1,63 +0,0 @@
-<script lang="ts">
-    import {
-        OPENCHAT_BOT_USER_ID,
-        selectedChatWebhooksStore,
-        selectedCommunityMembersStore,
-        type DeletedContent,
-        type OpenChat,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { i18nKey } from "../../i18n/i18n";
-    import Translatable from "../Translatable.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        content: DeletedContent;
-        undeleting: boolean;
-    }
-
-    let { content, undeleting }: Props = $props();
-
-    let date = $derived(new Date(Number(content.timestamp)));
-    let timestampStr = $derived(
-        `${client.toLongDateString(date)} @ ${client.toShortTimeString(date)}`,
-    );
-    let username = $derived(
-        client.getDisplayName(content.deletedBy, $selectedCommunityMembersStore, $selectedChatWebhooksStore),
-    );
-</script>
-
-<div class="deleted">
-    {#if undeleting}
-        <Translatable
-            resourceKey={i18nKey("undeletingMessage", {
-                username,
-                timestamp: timestampStr,
-            })} />
-    {:else if content.deletedBy === OPENCHAT_BOT_USER_ID}
-        <Markdown
-            text={$_("messageDeletedByOpenChatBot", {
-                values: {
-                    username,
-                    timestamp: timestampStr,
-                    rules: "/guidelines?section=3",
-                    modclub: "https://modclub.ai/",
-                },
-            })} />
-    {:else}
-        <Translatable
-            resourceKey={i18nKey("messageDeleted", {
-                username,
-                timestamp: timestampStr,
-            })} />
-    {/if}
-</div>
-
-<style lang="scss">
-    .deleted {
-        @include font(light, italic, fs-80);
-    }
-</style>
diff --git a/frontend/app/src/components/home/DisappearLabel.svelte b/frontend/app/src/components/home/DisappearLabel.svelte
deleted file mode 100644
index 5e666c4bd2..0000000000
--- a/frontend/app/src/components/home/DisappearLabel.svelte
+++ /dev/null
@@ -1,50 +0,0 @@
-<script lang="ts">
-    import type { OpenChat } from "@client";
-    import { getContext } from "svelte";
-    import CameraTimer from "svelte-material-icons/CameraTimer.svelte";
-    import Tooltip from "../tooltip/Tooltip.svelte";
-    import Translatable from "../Translatable.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { _ } from "svelte-i18n";
-
-    const client = getContext<OpenChat>("client");
-    interface Props {
-        ttl: bigint;
-    }
-
-    let { ttl }: Props = $props();
-</script>
-
-<Tooltip position={"bottom"} align={"end"}>
-    <div class="disappears">
-        <div class="expires">
-            <CameraTimer size={"1em"} color={"var(--txt-light)"} />
-        </div>
-        <div class="name">{client.formatDisappearingMessageTime(Number(ttl), $_)}</div>
-    </div>
-    {#snippet popupTemplate()}
-        <Translatable
-            resourceKey={i18nKey("disappearingMessages.summary", {
-                duration: client.formatDuration(Number(ttl)),
-            })} />
-    {/snippet}
-</Tooltip>
-
-<style lang="scss">
-    .disappears {
-        display: flex;
-        gap: $sp2;
-        align-items: center;
-        text-transform: uppercase;
-        background-color: var(--chatSummary-bg-selected);
-        padding: $sp2 $sp3;
-        border-radius: $sp3;
-
-        .expires {
-            $size: 12px;
-            flex: 0 0 $size;
-            width: $size;
-            height: $size;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/DisappearingMessageTimeUpdated.svelte b/frontend/app/src/components/home/DisappearingMessageTimeUpdated.svelte
deleted file mode 100644
index 6c8e1115c9..0000000000
--- a/frontend/app/src/components/home/DisappearingMessageTimeUpdated.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script lang="ts">
-    import type { OpenChat, UserSummary } from "@client";
-    import { allUsersStore } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { buildDisplayName } from "../../utils/user";
-    import NonMessageEvent from "./NonMessageEvent.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        user: UserSummary | undefined;
-        changedBy: string;
-        newTimeToLive: bigint | undefined;
-        timestamp: bigint;
-    }
-
-    let { user, changedBy, newTimeToLive, timestamp }: Props = $props();
-
-    let me = $derived(changedBy === user?.userId);
-    let changedByStr = $derived(buildDisplayName($allUsersStore, changedBy, me ? "me" : "user"));
-    let text = $derived(
-        newTimeToLive !== undefined
-            ? $_("disappearingMessages.timeUpdatedBy", {
-                  values: {
-                      changedBy: changedByStr,
-                      duration: client.formatDuration(Number(newTimeToLive)),
-                  },
-              })
-            : $_("disappearingMessages.disabledBy", {
-                  values: {
-                      changedBy: changedByStr,
-                  },
-              }),
-    );
-</script>
-
-<NonMessageEvent {text} {timestamp} />
diff --git a/frontend/app/src/components/home/DisappearingMessagesSummary.svelte b/frontend/app/src/components/home/DisappearingMessagesSummary.svelte
deleted file mode 100644
index 4162f393d6..0000000000
--- a/frontend/app/src/components/home/DisappearingMessagesSummary.svelte
+++ /dev/null
@@ -1,40 +0,0 @@
-<script lang="ts">
-    import type { OpenChat } from "@client";
-    import { getContext } from "svelte";
-    import Translatable from "../Translatable.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        ttl: bigint | undefined;
-    }
-
-    let { ttl }: Props = $props();
-</script>
-
-{#if ttl !== undefined}
-    <div class="disappearing">
-        <h4>
-            <Translatable resourceKey={i18nKey("disappearingMessages.label")} />
-        </h4>
-        <p>
-            <Translatable
-                resourceKey={i18nKey("disappearingMessages.summary", {
-                    duration: client.formatDuration(Number(ttl)),
-                })} />
-        </p>
-    </div>
-{/if}
-
-<style lang="scss">
-    .disappearing {
-        margin-bottom: $sp4;
-        h4 {
-            margin-bottom: $sp3;
-        }
-        p {
-            @include font(light, normal, fs-90);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/DoubleTick.svelte b/frontend/app/src/components/home/DoubleTick.svelte
deleted file mode 100644
index 742e3ab818..0000000000
--- a/frontend/app/src/components/home/DoubleTick.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-    <path
-        fill="currentColor"
-        d="M15.01 3.316l-.478-.372a.365.365 0 0 0-.51.063L8.666 9.879a.32.32 0 0 1-.484.033l-.358-.325a.319.319 0 0 0-.484.032l-.378.483a.418.418 0 0 0 .036.541l1.32 1.266c.143.14.361.125.484-.033l6.272-8.048a.366.366 0 0 0-.064-.512zm-4.1 0l-.478-.372a.365.365 0 0 0-.51.063L4.566 9.879a.32.32 0 0 1-.484.033L1.891 7.769a.366.366 0 0 0-.515.006l-.423.433a.364.364 0 0 0 .006.514l3.258 3.185c.143.14.361.125.484-.033l6.272-8.048a.365.365 0 0 0-.063-.51z" />
-</svg>
diff --git a/frontend/app/src/components/home/DraftMediaMessage.svelte b/frontend/app/src/components/home/DraftMediaMessage.svelte
deleted file mode 100644
index f1dea138e6..0000000000
--- a/frontend/app/src/components/home/DraftMediaMessage.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<script lang="ts">
-    import type { AttachmentContent } from "@client";
-    import VideoContent from "./VideoContent.svelte";
-    import ImageContent from "./ImageContent.svelte";
-    import AudioContent from "./AudioContent.svelte";
-    import FileContent from "./FileContent.svelte";
-
-    interface Props {
-        content: AttachmentContent;
-    }
-
-    let { content }: Props = $props();
-</script>
-
-<div class="msg-preview">
-    {#if content.kind === "video_content"}
-        <VideoContent edited={false} fill={false} {content} draft />
-    {:else if content.kind === "audio_content"}
-        <AudioContent me edited={false} {content} />
-    {:else if content.kind === "image_content"}
-        <ImageContent edited={false} fill={false} {content} draft />
-    {:else if content.kind === "file_content"}
-        <div class="file-preview">
-            <FileContent edited={false} me {content} draft />
-        </div>
-    {/if}
-</div>
-
-<style lang="scss">
-    .msg-preview {
-        min-width: 90px;
-        margin-top: $sp4;
-    }
-
-    .file-preview {
-        border-radius: $sp4;
-        padding: $sp3;
-        color: var(--currentChat-msg-me-txt);
-        background-color: var(--currentChat-msg-me-bg);
-    }
-</style>
diff --git a/frontend/app/src/components/home/EmailSigninFeedback.svelte b/frontend/app/src/components/home/EmailSigninFeedback.svelte
deleted file mode 100644
index ef7f0ee3f4..0000000000
--- a/frontend/app/src/components/home/EmailSigninFeedback.svelte
+++ /dev/null
@@ -1,52 +0,0 @@
-<script lang="ts">
-    import { iconSize } from "@client";
-    import CopyIcon from "svelte-material-icons/ContentCopy.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import Translatable from "../Translatable.svelte";
-
-    interface Props {
-        polling: boolean;
-        code: string | undefined;
-        onCopy?: (code?: string) => void;
-    }
-
-    let { polling, code, onCopy }: Props = $props();
-</script>
-
-<p>
-    <Translatable
-        resourceKey={i18nKey(!polling ? "loginDialog.generatingLink" : "loginDialog.checkEmail")} />
-
-    {#if polling && code !== undefined}
-        <div class="code-wrapper">
-            <div class="code">
-                {code}
-            </div>
-            <div class="copy" onclick={() => onCopy?.(code)}>
-                <CopyIcon size={$iconSize} color={"var(--icon-txt)"} />
-            </div>
-        </div>
-    {/if}
-</p>
-
-<style lang="scss">
-    .code-wrapper {
-        margin-top: $sp4;
-        display: flex;
-        gap: $sp3;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .code {
-        font-family: Menlo, Monaco, "Courier New", monospace;
-        @include font-size(fs-160);
-    }
-
-    .copy {
-        cursor: pointer;
-        position: relative;
-        top: 2px;
-    }
-</style>
diff --git a/frontend/app/src/components/home/EmojiAutocompleter.svelte b/frontend/app/src/components/home/EmojiAutocompleter.svelte
deleted file mode 100644
index 05834b5913..0000000000
--- a/frontend/app/src/components/home/EmojiAutocompleter.svelte
+++ /dev/null
@@ -1,125 +0,0 @@
-<script lang="ts">
-    import VirtualList from "@shared_components/VirtualList.svelte";
-    import { mobileWidth, type EmojiSummary, type SelectedEmoji } from "@client";
-    import { untrack } from "svelte";
-    import { searchAllEmojis, summaryToSelectedEmoji } from "../../utils/emojis";
-    import Menu from "../Menu.svelte";
-    import MenuItem from "../MenuItem.svelte";
-
-    interface Props {
-        query: string | undefined;
-        offset: number;
-        onSelect: (emoji: SelectedEmoji) => void;
-        onClose: () => void;
-    }
-
-    let { query, offset, onSelect, onClose }: Props = $props();
-
-    let index = $state(0);
-    let matches: EmojiSummary[] = $state([]);
-
-    // this is definitely a bit horrible. It seems to be necessary when we use the virtual list.
-    let ITEM_HEIGHT = $derived($mobileWidth ? 43.2 : 49.59);
-    $effect(() => {
-        if (query !== undefined) {
-            search(query);
-        }
-    });
-
-    function search(query: string) {
-        untrack(() => {
-            searchAllEmojis(query).then((m) => {
-                matches = m;
-            });
-        });
-    }
-
-    function select(match: EmojiSummary) {
-        onSelect(summaryToSelectedEmoji(match));
-    }
-
-    function onKeyDown(ev: KeyboardEvent): void {
-        switch (ev.key) {
-            case "ArrowDown":
-                index = (index + 1) % matches.length;
-                ev.preventDefault();
-                ev.stopPropagation();
-                break;
-            case "ArrowUp":
-                index = index === 0 ? matches.length - 1 : index - 1;
-                ev.preventDefault();
-                ev.stopPropagation();
-                break;
-            case "Escape":
-                onClose();
-                ev.preventDefault();
-                ev.stopPropagation();
-                break;
-            case "Enter":
-                const match = matches[index];
-                if (match) {
-                    select(match);
-                    ev.preventDefault();
-                    ev.stopPropagation();
-                }
-                break;
-        }
-    }
-</script>
-
-<div class="picker" style={`bottom: ${offset}px; height: ${matches.length * ITEM_HEIGHT}px`}>
-    <Menu>
-        <VirtualList keyFn={(e) => e.code} items={matches}>
-            {#snippet children(match, itemIndex)}
-                <MenuItem selected={itemIndex === index} onclick={() => select(match)}>
-                    {#snippet icon()}
-                        <div class="emoji">
-                            {#if match.kind === "native"}
-                                {match.unicode}
-                            {:else}
-                                <img class="custom-emoji" src={match.url} alt={match.code} />
-                            {/if}
-                        </div>
-                    {/snippet}
-                    {#snippet text()}
-                        <div>
-                            :{match.code}:
-                        </div>
-                    {/snippet}
-                </MenuItem>
-            {/snippet}
-        </VirtualList>
-    </Menu>
-</div>
-
-<svelte:body onkeydown={onKeyDown} />
-
-<style lang="scss">
-    :global(.picker .menu) {
-        box-shadow: none;
-        position: relative;
-        width: 100%;
-        height: 100%;
-        @include z-index("footer-overlay");
-    }
-
-    .picker {
-        position: absolute;
-        width: 100%;
-        max-height: calc(var(--vh, 1vh) * 50);
-        overflow: auto;
-        box-shadow: var(--menu-inverted-sh);
-        left: 0;
-    }
-    .emoji {
-        @include font(book, normal, fs-160);
-        margin-right: $sp4;
-    }
-
-    .custom-emoji {
-        width: 1em;
-        height: 1em;
-        object-fit: contain;
-        vertical-align: middle;
-    }
-</style>
diff --git a/frontend/app/src/components/home/EmojiPicker.svelte b/frontend/app/src/components/home/EmojiPicker.svelte
deleted file mode 100644
index cda06a4196..0000000000
--- a/frontend/app/src/components/home/EmojiPicker.svelte
+++ /dev/null
@@ -1,174 +0,0 @@
-<script lang="ts">
-    import "emoji-picker-element";
-    import type {
-        EmojiClickEvent,
-        SkinTone,
-        SkinToneChangeEvent,
-    } from "emoji-picker-element/shared";
-    import {
-        emojiGroupNames,
-        PremiumItem,
-        premiumItemsStore,
-        premiumPrices,
-        type CustomEmoji,
-        type SelectedEmoji,
-    } from "@client";
-    import { onMount, tick } from "svelte";
-    import { currentTheme } from "../../theme/themes";
-    import PremiumItemPayment from "../PremiumItemPayment.svelte";
-
-    interface Props {
-        mode?: "message" | "reaction" | "thread";
-        onEmojiSelected: (emoji: SelectedEmoji) => void;
-        onSkintoneChanged?: (tone: SkinTone) => void;
-        customEmojis?: Map<string, CustomEmoji>;
-    }
-
-    let { mode = "message", onEmojiSelected, onSkintoneChanged, customEmojis }: Props = $props();
-    let showPayGate = $state<CustomEmoji>();
-
-    function lockedCategoryCss(groupId: number, price: number) {
-        return `
-            .category:not(.gone)#menu-label-${groupId} {
-                position: relative;
-            }
-
-            .category:not(.gone)#menu-label-${groupId}::after {
-                content: "(${price.toLocaleString()} CHIT)";
-                font-size: 10px;
-                height: 14px;
-                background-image: url(/assets/locked_solid.svg);
-                background-repeat: no-repeat;
-                position: absolute;
-                margin-left: 5px;
-                padding-left: 18px;
-                padding-top: 2px;
-                color: var(--txt-light);
-                vertical-align: middle;
-                top: 8px;
-            }
-
-            .category:not(.gone)#menu-label-${groupId} + .emoji-menu[aria-labelledby="menu-label-${groupId}"] {
-                opacity: 0.5;
-            }
-        `;
-    }
-
-    function createCustomCss(): string {
-        const rules: string[] = [];
-        if (!$premiumItemsStore.has(PremiumItem.BotEmojis)) {
-            rules.push(lockedCategoryCss(0, premiumPrices[PremiumItem.BotEmojis]));
-        }
-        if (!$premiumItemsStore.has(PremiumItem.PopularEmojis)) {
-            rules.push(lockedCategoryCss(1, premiumPrices[PremiumItem.PopularEmojis]));
-        }
-        rules.push(".indicator { transition: none; }");
-        return rules.join("\n");
-    }
-
-    onMount(() => {
-        const emojiPicker = document.querySelector("emoji-picker");
-
-        if (emojiPicker && customEmojis) {
-            emojiPicker.customEmoji = [...customEmojis.entries()].map(([_, emoji]) => {
-                return {
-                    name: emoji.code,
-                    shortcodes: [emoji.code],
-                    url: emoji.url,
-                    category: emojiGroupNames[emoji.premiumItem],
-                };
-            });
-        }
-        emojiPicker?.addEventListener("emoji-click", onClick);
-        emojiPicker?.addEventListener("skin-tone-change", skinToneChanged);
-
-        const style = document.createElement("style");
-        style.textContent = createCustomCss();
-        emojiPicker?.shadowRoot?.appendChild(style);
-
-        tick().then(() => {
-            emojiPicker?.shadowRoot
-                ?.querySelector<HTMLButtonElement>("button.nav-button[data-group-id='0']")
-                ?.click();
-        });
-
-        return () => {
-            emojiPicker?.removeEventListener("emoji-click", onClick);
-        };
-    });
-
-    function skinToneChanged(ev: SkinToneChangeEvent) {
-        onSkintoneChanged?.(ev.detail.skinTone);
-    }
-
-    function onClick(ev: EmojiClickEvent) {
-        if (ev.detail.unicode) {
-            onEmojiSelected({ kind: "native", unicode: ev.detail.unicode });
-        } else if (ev.detail.name !== undefined) {
-            const custom = customEmojis?.get(ev.detail.name);
-            if (custom !== undefined) {
-                if (!$premiumItemsStore.has(custom.premiumItem)) {
-                    showPayGate = custom;
-                } else {
-                    onEmojiSelected(custom);
-                }
-            }
-        }
-    }
-
-    function paidForItem() {
-        if (showPayGate) {
-            onEmojiSelected(showPayGate);
-            showPayGate = undefined;
-        }
-    }
-</script>
-
-{#if showPayGate}
-    <PremiumItemPayment
-        item={showPayGate.premiumItem}
-        onSuccess={paidForItem}
-        onCancel={() => (showPayGate = undefined)}></PremiumItemPayment>
-{/if}
-
-<emoji-picker
-    class:message={mode === "message"}
-    class:reaction={mode === "reaction"}
-    class:thread={mode === "thread"}
-    class:dark={$currentTheme.mode === "dark"}
-    class:light={$currentTheme.mode === "light"}></emoji-picker>
-
-<style lang="scss">
-    :global(.emoji-overlay .modal-content) {
-        background-color: var(--menu-bg);
-    }
-
-    emoji-picker {
-        width: 100%;
-        --emoji-padding: 0.3rem;
-        --emoji-size: 1.8rem;
-        --background: transparent;
-
-        --border-size: 0;
-        --border-color: var(--bd);
-        --input-font-color: var(--txt);
-        --input-border-color: var(--bd);
-        --input-padding: 8px 16px;
-
-        --num-columns: 12 !important;
-
-        @include size-below(sm) {
-            --num-columns: 11 !important;
-        }
-        @include size-below(xs) {
-            --num-columns: 9 !important;
-        }
-        @include size-below(xxs) {
-            --num-columns: 7 !important;
-        }
-
-        &.thread {
-            --num-columns: 10 !important;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/ExternalContent.svelte b/frontend/app/src/components/home/ExternalContent.svelte
deleted file mode 100644
index 3a15f2654a..0000000000
--- a/frontend/app/src/components/home/ExternalContent.svelte
+++ /dev/null
@@ -1,136 +0,0 @@
-<script lang="ts">
-    import { currentUserStore } from "@client";
-    import { onMount } from "svelte";
-    import AlertCircleOutline from "svelte-material-icons/AlertCircleOutline.svelte";
-    import Cancel from "svelte-material-icons/Cancel.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { currentTheme } from "../../theme/themes";
-    import type { Theme } from "../../theme/types";
-    import Translatable from "../Translatable.svelte";
-    import PrivatePreview from "./PrivatePreview.svelte";
-
-    interface Props {
-        externalUrl: string;
-        frozen: boolean;
-        privateChatPreview: boolean;
-    }
-
-    let { externalUrl, frozen, privateChatPreview }: Props = $props();
-
-    let iframe: HTMLIFrameElement | undefined = $state();
-    let connected = $state(false);
-    let error = $state(false);
-
-    onMount(() => {
-        window.addEventListener("message", onMessage);
-        return () => {
-            window.removeEventListener("message", onMessage);
-            iframe?.removeEventListener("error", onError);
-        };
-    });
-
-    function onError() {
-        error = true;
-    }
-
-    function updateTheme(theme: Theme) {
-        if (connected && iframe) {
-            sendMessage(iframe, origin, {
-                kind: "set_theme",
-                theme,
-            });
-        }
-    }
-
-    function debug(msg: string, ...params: unknown[]): void {
-        console.debug(`OPENCHAT_EXTERNAL_HOST: ${msg}`, params);
-    }
-
-    function onMessage(ev: MessageEvent<{ kind: "external_content_ready" }>) {
-        if (ev.origin === origin && ev.data.kind === "external_content_ready") {
-            debug("External content signals its readiness");
-            if (iframe) {
-                sendMessage(iframe, origin, {
-                    kind: "initialise_external_content",
-                    theme: $currentTheme,
-                    username: $currentUserStore.username,
-                });
-            }
-            connected = true;
-        }
-    }
-
-    function sendMessage(frame: HTMLIFrameElement, targetOrigin: string, msg: unknown) {
-        if (frame && frame.contentWindow) {
-            try {
-                frame.contentWindow.postMessage(msg, targetOrigin);
-            } catch (err) {
-                console.log("Error sending message to iframe", err);
-            }
-        }
-    }
-    let origin = $derived(new URL(externalUrl).origin);
-    $effect(() => {
-        updateTheme($currentTheme);
-    });
-    $effect(() => {
-        // This is just a bit of a hack to make sure we pick up when the external url changes
-        if (externalUrl !== undefined) {
-            error = false;
-            connected = false;
-        }
-    });
-    $effect(() => {
-        if (iframe && !frozen && !privateChatPreview) {
-            iframe.removeEventListener("error", onError);
-            iframe.addEventListener("error", onError);
-        }
-    });
-</script>
-
-{#if frozen}
-    <div class="error">
-        <Cancel size={"2em"} color={"var(--error)"} />
-        <Translatable resourceKey={i18nKey("externalContent.frozen")} />
-    </div>
-{:else if privateChatPreview}
-    <div class="preview">
-        <PrivatePreview />
-    </div>
-{:else if error}
-    <div class="error">
-        <AlertCircleOutline size={"2em"} color={"var(--error)"} />
-        <Translatable resourceKey={i18nKey("externalContent.error")} />
-    </div>
-{/if}
-
-{#if !frozen && !privateChatPreview}
-    <iframe title="External Content" bind:this={iframe} src={externalUrl}></iframe>
-{/if}
-
-<style lang="scss">
-    iframe {
-        height: 100%;
-        width: 100%;
-    }
-
-    .error {
-        display: flex;
-        flex-direction: column;
-        gap: $sp5;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        text-align: center;
-        padding: 0 toRem(100);
-
-        @include font(bold, normal, fs-140);
-    }
-
-    .preview {
-        display: flex;
-        flex-direction: column-reverse;
-        padding: $sp3 $sp4;
-        flex: auto;
-    }
-</style>
diff --git a/frontend/app/src/components/home/FileAttacher.svelte b/frontend/app/src/components/home/FileAttacher.svelte
deleted file mode 100644
index be3faba280..0000000000
--- a/frontend/app/src/components/home/FileAttacher.svelte
+++ /dev/null
@@ -1,50 +0,0 @@
-<script lang="ts">
-    import HoverIcon from "../HoverIcon.svelte";
-    import { _ } from "svelte-i18n";
-    import { toastStore } from "../../stores/toast";
-    import { getContext } from "svelte";
-    import Paperclip from "./Paperclip.svelte";
-    import type { AttachmentContent, OpenChat } from "@client";
-    import { i18nKey } from "../../i18n/i18n";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        onOpen: () => void;
-        onFileSelected: (content: AttachmentContent) => void;
-    }
-
-    let { onOpen, onFileSelected }: Props = $props();
-
-    let fileinput: HTMLInputElement | undefined = $state();
-
-    function click() {
-        onOpen();
-        fileinput?.click();
-    }
-
-    function fileSelected(e: { currentTarget: HTMLInputElement }) {
-        if (e.currentTarget) {
-            const target = e.currentTarget;
-            if (target.files && target.files[0]) {
-                client
-                    .messageContentFromFile(target.files[0])
-                    .then((content) => {
-                        onFileSelected(content);
-                    })
-                    .catch((err) => {
-                        toastStore.showFailureToast(i18nKey(err));
-                    });
-
-                e.currentTarget.value = "";
-            }
-        }
-    }
-</script>
-
-<div onclick={click}>
-    <HoverIcon title={$_("attachFile")}>
-        <Paperclip />
-    </HoverIcon>
-    <input bind:this={fileinput} hidden type="file" onchange={fileSelected} />
-</div>
diff --git a/frontend/app/src/components/home/FileContent.svelte b/frontend/app/src/components/home/FileContent.svelte
deleted file mode 100644
index c896d58764..0000000000
--- a/frontend/app/src/components/home/FileContent.svelte
+++ /dev/null
@@ -1,105 +0,0 @@
-<script lang="ts">
-    import { _ } from "svelte-i18n";
-    import { rtlStore } from "../../stores/rtl";
-    import type { FileContent, OpenChat } from "@client";
-    import ContentCaption from "./ContentCaption.svelte";
-    import FileDownload from "svelte-material-icons/FileDownload.svelte";
-    import { getContext } from "svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        content: FileContent;
-        me?: boolean;
-        draft?: boolean;
-        edited: boolean;
-        blockLevelMarkdown?: boolean;
-    }
-
-    let {
-        content,
-        me = false,
-        draft = false,
-        edited,
-        blockLevelMarkdown = false,
-    }: Props = $props();
-
-    let color = me ? "#ffffff" : "var(--txt)";
-</script>
-
-{#if content.blobUrl}
-    <a
-        href={content.blobUrl}
-        title={$_("downloadFile", { values: { name: content.name } })}
-        download={content.name}
-        role="button"
-        target="_blank"
-        class:rtl={$rtlStore}
-        class:draft
-        class="file-content">
-        <div class="link-contents">
-            <FileDownload size={"1.7em"} {color} />
-            {content.name}
-        </div>
-    </a>
-
-    <div class="meta-wrapper" class:caption={content.caption !== undefined}>
-        {`${content.mimeType}-${client.formatFileSize(content.fileSize)}`}
-    </div>
-{/if}
-
-<ContentCaption caption={content.caption} {edited} {blockLevelMarkdown} />
-
-<style lang="scss">
-    .file-content {
-        height: 30px;
-        display: block;
-        cursor: pointer;
-        @include ellipsis();
-        margin-right: $sp2;
-
-        &.rtl {
-            margin-right: 0;
-            margin-left: $sp2;
-        }
-
-        @media (hover: hover) {
-            &:hover {
-                text-decoration: underline;
-            }
-        }
-    }
-
-    a {
-        color: inherit;
-    }
-
-    .link-contents {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-    }
-
-    :global(.link-contents > svg) {
-        margin-right: $sp2;
-    }
-
-    :global(.link-contents.rtl > svg) {
-        margin-right: 0;
-        margin-left: $sp2;
-    }
-
-    .meta-wrapper {
-        &.caption {
-            margin-bottom: 4px;
-        }
-
-        &:not(.caption) {
-            display: inline-block;
-        }
-
-        align-items: center;
-        @include font(light, normal, fs-60);
-        @include ellipsis();
-    }
-</style>
diff --git a/frontend/app/src/components/home/Footer.svelte b/frontend/app/src/components/home/Footer.svelte
deleted file mode 100644
index 941df1e6f8..0000000000
--- a/frontend/app/src/components/home/Footer.svelte
+++ /dev/null
@@ -1,300 +0,0 @@
-<script lang="ts">
-    import { fileFromDataTransferItems } from "@src/utils/datatransfer";
-    import {
-        iconSize,
-        messageContextsEqual,
-        subscribe,
-        type AttachmentContent,
-        type ChatSummary,
-        type CreatedUser,
-        type EnhancedReplyContext,
-        type EphemeralMessageEvent,
-        type EventWrapper,
-        type Message,
-        type MessageAction,
-        type MessageContext,
-        type MultiUserChat,
-        type OpenChat,
-        type SelectedEmoji,
-        type User,
-    } from "@client";
-    import { getContext, onMount, tick } from "svelte";
-    import { _ } from "svelte-i18n";
-    import Close from "svelte-material-icons/Close.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { toastStore } from "../../stores/toast";
-    import EphemeralMessage from "../bots/EphemeralMessage.svelte";
-    import HoverIcon from "../HoverIcon.svelte";
-    import ModalContent from "../ModalContent.svelte";
-    import Translatable from "../Translatable.svelte";
-    import DraftMediaMessage from "./DraftMediaMessage.svelte";
-    import EmojiPicker from "./EmojiPickerWrapper.svelte";
-    import MessageEntry from "./MessageEntry.svelte";
-    import ReplyingTo from "./ReplyingTo.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        blocked: boolean;
-        preview: boolean;
-        lapsed: boolean;
-        joining: MultiUserChat | undefined;
-        chat: ChatSummary;
-        attachment: AttachmentContent | undefined;
-        editingEvent: EventWrapper<Message> | undefined;
-        replyingTo: EnhancedReplyContext | undefined;
-        textContent: string | undefined;
-        user: CreatedUser;
-        mode?: "thread" | "message";
-        externalContent?: boolean;
-        messageContext: MessageContext;
-        onFileSelected: (content: AttachmentContent) => void;
-        onCancelReply: () => void;
-        onSetTextContent: (txt?: string) => void;
-        onStartTyping: () => void;
-        onStopTyping: () => void;
-        onCancelEdit: () => void;
-        onSendMessage: (args: [string | undefined, User[], boolean]) => void;
-        onClearAttachment: () => void;
-        onTokenTransfer: (args: { ledger?: string; amount?: bigint }) => void;
-        onCreatePrizeMessage?: () => void;
-        onCreateP2PSwapMessage: () => void;
-        onCreatePoll: () => void;
-        onAttachGif: (search: string) => void;
-        onMakeMeme: () => void;
-    }
-
-    let {
-        blocked,
-        preview,
-        lapsed,
-        joining,
-        chat,
-        attachment,
-        editingEvent,
-        replyingTo,
-        textContent,
-        user,
-        mode = "message",
-        externalContent = false,
-        messageContext,
-        onFileSelected,
-        onCancelReply,
-        onSetTextContent,
-        onCancelEdit,
-        onStartTyping,
-        onStopTyping,
-        onSendMessage,
-        onClearAttachment,
-        onTokenTransfer,
-        onCreatePrizeMessage,
-        onCreateP2PSwapMessage,
-        onCreatePoll,
-        onAttachGif,
-        onMakeMeme,
-    }: Props = $props();
-
-    let ephemeralMessageEvent = $state<EphemeralMessageEvent>();
-    let messageAction: MessageAction = $state(undefined);
-    //@ts-ignore
-    let messageEntry: MessageEntry;
-
-    onMount(() => {
-        const unsubs = [subscribe("ephemeralMessage", onEphemeralMessage)];
-        return () => {
-            unsubs.forEach((u) => u());
-        };
-    });
-
-    async function onEphemeralMessage(ev: EphemeralMessageEvent) {
-        if (ev.scope.kind !== "chat_scope") return;
-        if (!messageContextsEqual(messageContext, ev.scope)) return;
-        if (ephemeralMessageEvent !== undefined) {
-            ephemeralMessageEvent = undefined;
-            await tick();
-        }
-        ephemeralMessageEvent = ev;
-    }
-
-    function messageContentFromDataTransferItemList(items: DataTransferItem[]) {
-        const file = fileFromDataTransferItems(items);
-        if (file) {
-            client
-                .messageContentFromFile(file)
-                .then((content) => {
-                    let permission = client.contentTypeToPermission(content.kind);
-                    if (client.canSendMessage(chat.id, mode, permission)) {
-                        onFileSelected(content);
-                    } else {
-                        const errorMessage = i18nKey("permissions.notPermitted", {
-                            permission: $_(`permissions.threadPermissions.${permission}`),
-                        });
-                        toastStore.showFailureToast(errorMessage);
-                    }
-                })
-                .catch((err) => toastStore.showFailureToast(i18nKey(err)));
-        }
-    }
-
-    function onDataTransfer(data: DataTransfer): void {
-        messageContentFromDataTransferItemList([...data.items]);
-    }
-
-    function onPaste(e: ClipboardEvent) {
-        if (e.clipboardData) {
-            onDataTransfer(e.clipboardData);
-        }
-    }
-
-    function emojiSelected(selected: SelectedEmoji) {
-        messageEntry?.insertEmoji(selected);
-    }
-
-    $effect(() => {
-        if (
-            ephemeralMessageEvent !== undefined &&
-            ephemeralMessageEvent.scope.kind === "chat_scope" &&
-            !messageContextsEqual(messageContext, ephemeralMessageEvent.scope)
-        ) {
-            ephemeralMessageEvent = undefined;
-        }
-    });
-</script>
-
-{#if messageAction === "emoji"}
-    <div class={`emoji-overlay ${mode}`}>
-        <ModalContent hideFooter hideHeader fill>
-            {#snippet body()}
-                <span>
-                    <div class="emoji-header">
-                        <h4><Translatable resourceKey={i18nKey("pickEmoji")} /></h4>
-                        <span title={$_("close")} class="close-emoji">
-                            <HoverIcon onclick={() => (messageAction = undefined)}>
-                                <Close size={$iconSize} color={"var(--icon-txt)"} />
-                            </HoverIcon>
-                        </span>
-                    </div>
-                    <EmojiPicker onEmojiSelected={emojiSelected} {mode} supportCustom={true} />
-                </span>
-            {/snippet}
-            {#snippet footer()}
-                <span></span>
-            {/snippet}
-        </ModalContent>
-    </div>
-{/if}
-
-<div class="footer">
-    <div class="footer-overlay">
-        {#if ephemeralMessageEvent !== undefined}
-            <EphemeralMessage
-                onClose={() => (ephemeralMessageEvent = undefined)}
-                event={ephemeralMessageEvent} />
-        {/if}
-        {#if editingEvent === undefined && (replyingTo || attachment !== undefined)}
-            <div class="draft-container">
-                {#if replyingTo}
-                    <ReplyingTo readonly {onCancelReply} {user} {replyingTo} />
-                {/if}
-                {#if attachment !== undefined}
-                    <DraftMediaMessage content={attachment} />
-                {/if}
-            </div>
-        {/if}
-    </div>
-    <MessageEntry
-        bind:this={messageEntry}
-        bind:messageAction
-        {onPaste}
-        {externalContent}
-        {mode}
-        {preview}
-        {lapsed}
-        {blocked}
-        {joining}
-        {attachment}
-        {editingEvent}
-        {replyingTo}
-        {textContent}
-        {chat}
-        {messageContext}
-        {onSendMessage}
-        {onCancelEdit}
-        {onSetTextContent}
-        {onStartTyping}
-        {onStopTyping}
-        {onCreatePoll}
-        {onTokenTransfer}
-        {onCreatePrizeMessage}
-        {onCreateP2PSwapMessage}
-        {onAttachGif}
-        {onMakeMeme}
-        {onClearAttachment}
-        {onFileSelected} />
-</div>
-
-<style lang="scss">
-    :global(body.witch .middle .footer) {
-        @include z-index("footer");
-    }
-
-    :global(.emoji-overlay .modal-content) {
-        border: var(--bw) solid var(--bd);
-    }
-
-    :global(.emoji-overlay.thread .modal-content) {
-        width: 100%;
-        border-radius: var(--modal-rd) var(--modal-rd) 0 0;
-    }
-
-    .footer {
-        position: relative;
-        flex: 0 0 toRem(60);
-        padding-bottom: env(safe-area-inset-bottom);
-    }
-
-    .footer-overlay {
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-content: center;
-        align-items: flex-start;
-        background-color: var(--entry-bg);
-    }
-
-    .emoji-overlay {
-        position: absolute;
-        bottom: toRem(70);
-        left: toRem(10);
-        width: 100%;
-        @include z-index("footer-overlay");
-
-        @include mobile() {
-            left: 0;
-            bottom: toRem(60);
-        }
-
-        .emoji-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: $sp3 $sp4;
-            background-color: var(--section-bg);
-
-            .close-emoji {
-                flex: 0 0 20px;
-            }
-        }
-
-        &.thread {
-            bottom: toRem(60);
-            left: 0;
-        }
-    }
-
-    .draft-container {
-        max-width: 80%;
-        padding: 0 $sp4 $sp4 $sp4;
-    }
-</style>
diff --git a/frontend/app/src/components/home/ForgotPinLabel.svelte b/frontend/app/src/components/home/ForgotPinLabel.svelte
deleted file mode 100644
index 5d148a977b..0000000000
--- a/frontend/app/src/components/home/ForgotPinLabel.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script lang="ts">
-    import Translatable from "../Translatable.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-
-    interface Props {
-        onForgot: () => void;
-    }
-    let { onForgot }: Props = $props();
-</script>
-
-<div class="forgot">
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <!-- svelte-ignore a11y_missing_attribute -->
-    <a role="button" tabindex="0" onclick={onForgot}>
-        <Translatable resourceKey={i18nKey("pinNumber.forgotLabel")} />
-    </a>
-</div>
-
-<style lang="scss">
-    .forgot {
-        text-align: center;
-        @include font(light, normal, fs-80);
-        margin: $sp3 0;
-    }
-</style>
diff --git a/frontend/app/src/components/home/GiphyContent.svelte b/frontend/app/src/components/home/GiphyContent.svelte
deleted file mode 100644
index 93af638df2..0000000000
--- a/frontend/app/src/components/home/GiphyContent.svelte
+++ /dev/null
@@ -1,194 +0,0 @@
-<script lang="ts">
-    import { mobileWidth, type GiphyContent } from "@client";
-    import { i18nKey } from "../../i18n/i18n";
-    import { rtlStore } from "../../stores/rtl";
-    import { lowBandwidth } from "../../stores/settings";
-    import { reservedMediaStyle } from "../../utils/media";
-    import Button from "../Button.svelte";
-    import Translatable from "../Translatable.svelte";
-    import ContentCaption from "./ContentCaption.svelte";
-
-    interface Props {
-        content: GiphyContent;
-        fill: boolean;
-        draft?: boolean;
-        reply?: boolean;
-        height?: number | undefined;
-        intersecting?: boolean;
-        edited: boolean;
-        blockLevelMarkdown?: boolean;
-    }
-
-    let {
-        content,
-        fill,
-        draft = false,
-        reply = false,
-        height = undefined,
-        intersecting = true,
-        edited,
-        blockLevelMarkdown = false,
-    }: Props = $props();
-
-    let withCaption = $derived(content.caption !== undefined && content.caption !== "");
-    let image = $derived($mobileWidth ? content.mobile : content.desktop);
-    let landscape = $derived(image.height < image.width);
-    let style = $derived(
-        height !== undefined
-            ? `height: ${height}px; max-width: ${image.width}px;`
-            : draft || reply
-              ? `max-width: ${image.width}px;`
-              : (reservedMediaStyle(image.width, image.height) ??
-                `max-width: ${image.width}px;`),
-    );
-
-    let hidden = $derived($lowBandwidth);
-</script>
-
-<div class="img-wrapper">
-    {#if !intersecting}
-        <div
-            class="placeholder"
-            class:landscape
-            class:fill
-            class:withCaption
-            {style}
-            class:draft
-            title={content.caption ?? content.title}
-            class:reply
-            class:rtl={$rtlStore}>
-        </div>
-    {:else if $mobileWidth || hidden}
-        {#if hidden && !$mobileWidth}
-            <div class="mask">
-                {#if !reply}
-                    <div class="reveal">
-                        <Button onClick={() => (hidden = false)}
-                            ><Translatable resourceKey={i18nKey("loadGif")} /></Button>
-                    </div>
-                {/if}
-            </div>
-        {/if}
-        <img
-            class="gif"
-            class:landscape
-            class:fill
-            class:withCaption
-            class:draft
-            class:reply
-            class:rtl={$rtlStore}
-            {style}
-            src={content.mobile.url}
-            alt={content.caption ?? content.title} />
-    {:else}
-        <video
-            autoplay
-            muted
-            loop
-            playsinline
-            class:landscape
-            class:fill
-            class:withCaption
-            class:draft
-            class:reply
-            class:rtl={$rtlStore}
-            title={content.caption ?? content.title}
-            {style}>
-            <track kind="captions" />
-            <source src={content.desktop.url} type="video/mp4" />
-        </video>
-    {/if}
-    <div class="attribution">
-        <img src="/assets/klipy_logo.svg" alt="Powered by KLIPY" />
-    </div>
-</div>
-
-<ContentCaption caption={content.caption} {edited} {blockLevelMarkdown} />
-
-<style lang="scss">
-    .img-wrapper {
-        position: relative;
-    }
-
-    .attribution {
-        position: absolute;
-        bottom: $sp3;
-        left: $sp1;
-
-        img {
-            width: 4rem;
-        }
-    }
-
-    .mask {
-        position: absolute;
-        top: 0;
-        left: 0;
-        height: 100%;
-        width: 100%;
-        backdrop-filter: blur(10px);
-        -webkit-backdrop-filter: blur(10px);
-        background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5));
-    }
-
-    .reveal {
-        position: absolute;
-        top: calc(50% - 20px);
-        width: 100%;
-        text-align: center;
-    }
-
-    .placeholder,
-    img.gif,
-    video {
-        width: 100%;
-        display: block;
-
-        &:not(.landscape) {
-            min-height: 90px;
-            min-width: 0px;
-        }
-
-        &:not(.fill) {
-            border-radius: $sp4;
-        }
-
-        &.withCaption {
-            margin-bottom: $sp2;
-        }
-
-        &.draft {
-            max-width: calc(var(--vh, 1vh) * 50);
-            max-height: none;
-            height: auto;
-        }
-
-        &:not(.landscape).draft {
-            max-width: none;
-            max-height: calc(var(--vh, 1vh) * 50);
-            width: auto;
-            height: 100%;
-        }
-
-        &.reply {
-            max-width: 90px;
-            max-height: none;
-            height: auto;
-            float: right;
-            margin-left: $sp3;
-            margin-right: 0;
-        }
-
-        &.rtl.reply {
-            float: left;
-            margin-left: 0;
-            margin-right: $sp3;
-        }
-
-        &:not(.landscape).reply {
-            max-width: none;
-            max-height: 90px;
-            width: auto;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/GroupChangedEvent.svelte b/frontend/app/src/components/home/GroupChangedEvent.svelte
deleted file mode 100644
index 78aecac9e0..0000000000
--- a/frontend/app/src/components/home/GroupChangedEvent.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts">
-    import type { UserSummary } from "@client";
-    import { allUsersStore } from "@client";
-    import { _ } from "svelte-i18n";
-    import { buildDisplayName } from "../../utils/user";
-    import NonMessageEvent from "./NonMessageEvent.svelte";
-
-    interface Props {
-        user: UserSummary | undefined;
-        changedBy: string;
-        property: string;
-        timestamp: bigint;
-        level: string;
-    }
-
-    let { user, changedBy, property, timestamp, level }: Props = $props();
-
-    let me = $derived(changedBy === user?.userId);
-    let changedByStr = $derived(buildDisplayName($allUsersStore, changedBy, me ? "me" : "user"));
-    let text = $derived(
-        $_("groupChangedBy", {
-            values: {
-                changed: property,
-                changedBy: changedByStr,
-                level,
-            },
-        }),
-    );
-</script>
-
-<NonMessageEvent {text} {timestamp} />
diff --git a/frontend/app/src/components/home/GroupChatCreatedEvent.svelte b/frontend/app/src/components/home/GroupChatCreatedEvent.svelte
deleted file mode 100644
index 335320adb6..0000000000
--- a/frontend/app/src/components/home/GroupChatCreatedEvent.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script lang="ts">
-    import type { ChatType, GroupChatCreated } from "@client";
-    import { allUsersStore } from "@client";
-    import { _ } from "svelte-i18n";
-    import { buildDisplayName } from "../../utils/user";
-    import NonMessageEvent from "./NonMessageEvent.svelte";
-
-    interface Props {
-        me: boolean;
-        event: GroupChatCreated;
-        timestamp: bigint;
-        chatType: ChatType;
-    }
-
-    let { me, event, timestamp, chatType }: Props = $props();
-
-    let level = $derived($_(`level.${chatType === "channel" ? "channel" : "group"}`).toLowerCase());
-    let username = $derived(buildDisplayName($allUsersStore, event.created_by, me ? "me" : "user"));
-    let text = $derived(
-        $_("groupCreatedBy", {
-            values: {
-                username,
-                level,
-            },
-        }),
-    );
-</script>
-
-<NonMessageEvent {text} {timestamp} />
diff --git a/frontend/app/src/components/home/GroupInviteCodeChangedEvent.svelte b/frontend/app/src/components/home/GroupInviteCodeChangedEvent.svelte
deleted file mode 100644
index e030157d8d..0000000000
--- a/frontend/app/src/components/home/GroupInviteCodeChangedEvent.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script lang="ts">
-    import type { GroupInviteCodeChange, UserSummary } from "@client";
-    import { allUsersStore } from "@client";
-    import { _ } from "svelte-i18n";
-    import { buildDisplayName } from "../../utils/user";
-    import NonMessageEvent from "./NonMessageEvent.svelte";
-
-    interface Props {
-        user: UserSummary | undefined;
-        change: GroupInviteCodeChange;
-        changedBy: string;
-        timestamp: bigint;
-    }
-
-    let { user, change, changedBy, timestamp }: Props = $props();
-
-    let me = $derived(changedBy === user?.userId);
-    let changedByStr = $derived(buildDisplayName($allUsersStore, changedBy, me ? "me" : "user"));
-    let changedStr = $derived($_(`invite.${change}`));
-    let text = $derived(
-        $_("groupInviteChangedBy", {
-            values: {
-                changedBy: changedByStr,
-                changed: changedStr,
-            },
-        }),
-    );
-</script>
-
-<NonMessageEvent {text} {timestamp} />
diff --git a/frontend/app/src/components/home/GroupPermissionsPartitionViewer.svelte b/frontend/app/src/components/home/GroupPermissionsPartitionViewer.svelte
deleted file mode 100644
index 6d54f8d9b0..0000000000
--- a/frontend/app/src/components/home/GroupPermissionsPartitionViewer.svelte
+++ /dev/null
@@ -1,68 +0,0 @@
-<script lang="ts">
-    import Check from "svelte-material-icons/Check.svelte";
-    import {
-        type ChatPermissionRole,
-        chatRoles,
-        type PermissionsByRole,
-        ROLE_ADMIN,
-        ROLE_MEMBER,
-        ROLE_MODERATOR,
-        ROLE_NONE,
-        ROLE_OWNER,
-    } from "@client";
-    import Translatable from "../Translatable.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-
-    interface Props {
-        partition: PermissionsByRole;
-    }
-
-    let { partition }: Props = $props();
-
-    const roleLabels: Record<ChatPermissionRole, string> = {
-        [ROLE_NONE]: "permissions.nobody",
-        [ROLE_OWNER]: "permissions.ownerOnly",
-        [ROLE_ADMIN]: "permissions.ownerAndAdmins",
-        [ROLE_MODERATOR]: "permissions.ownerAndAdminsAndModerators",
-        [ROLE_MEMBER]: "permissions.allMembers",
-    };
-</script>
-
-<ul>
-    {#each chatRoles as role}
-        {#if partition[role].size > 0}
-            <li class="section">
-                <div class="who-can"><Translatable resourceKey={i18nKey(roleLabels[role])} /></div>
-                <ul>
-                    {#each [...partition[role]] as perm}
-                        <li class="permission">
-                            <Check size={"1em"} color={"var(--success)"} />
-                            {perm}
-                        </li>
-                    {/each}
-                </ul>
-            </li>
-        {/if}
-    {/each}
-</ul>
-
-<style lang="scss">
-    ul {
-        list-style: none;
-    }
-
-    .section {
-        margin-bottom: $sp4;
-    }
-
-    .who-can {
-        @include font(bold, normal, fs-110);
-    }
-
-    .permission {
-        display: flex;
-        align-items: center;
-        gap: $sp3;
-        @include font(light, normal, fs-90);
-    }
-</style>
diff --git a/frontend/app/src/components/home/GroupRulesChangedEvent.svelte b/frontend/app/src/components/home/GroupRulesChangedEvent.svelte
deleted file mode 100644
index 02b455d372..0000000000
--- a/frontend/app/src/components/home/GroupRulesChangedEvent.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script lang="ts">
-    import type { GroupRulesChanged, UserSummary } from "@client";
-    import { allUsersStore } from "@client";
-    import { _ } from "svelte-i18n";
-    import { buildDisplayName } from "../../utils/user";
-    import NonMessageEvent from "./NonMessageEvent.svelte";
-
-    interface Props {
-        user: UserSummary | undefined;
-        event: GroupRulesChanged;
-        timestamp: bigint;
-    }
-
-    let { user, event, timestamp }: Props = $props();
-
-    let me = $derived(event.changedBy === user?.userId);
-    let changedByStr = $derived(
-        buildDisplayName($allUsersStore, event.changedBy, me ? "me" : "user"),
-    );
-    let templateValues = $derived({
-        values: {
-            changed: $_("groupRules"),
-            changedBy: changedByStr,
-        },
-    });
-
-    let text = $derived(
-        event.enabled && event.enabledPrev
-            ? $_("groupChangedBy", templateValues)
-            : event.enabled
-              ? $_("groupRulesEnabled", templateValues)
-              : $_("groupRulesDisabled", templateValues),
-    );
-</script>
-
-{#if event.enabled || event.enabledPrev}
-    <NonMessageEvent {text} {timestamp} />
-{/if}
diff --git a/frontend/app/src/components/home/GroupVisibilityChangedEvent.svelte b/frontend/app/src/components/home/GroupVisibilityChangedEvent.svelte
deleted file mode 100644
index de231b98a7..0000000000
--- a/frontend/app/src/components/home/GroupVisibilityChangedEvent.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<script lang="ts">
-    import type { Level, UserSummary } from "@client";
-    import { allUsersStore } from "@client";
-    import { _ } from "svelte-i18n";
-    import { i18nKey, interpolate } from "../../i18n/i18n";
-    import { buildDisplayName } from "../../utils/user";
-    import NonMessageEvent from "./NonMessageEvent.svelte";
-
-    interface Props {
-        user: UserSummary | undefined;
-        isPublic: boolean | undefined;
-        messagesVisibleToNonMembers: boolean | undefined;
-        changedBy: string;
-        timestamp: bigint;
-        level: Level;
-    }
-
-    let { user, isPublic, messagesVisibleToNonMembers, changedBy, timestamp, level }: Props =
-        $props();
-
-    let showEvent = $derived(messagesVisibleToNonMembers !== undefined || isPublic !== undefined);
-    let me = $derived(changedBy === user?.userId);
-    let changedByStr = $derived(buildDisplayName($allUsersStore, changedBy, me ? "me" : "user"));
-    let text = $derived(
-        interpolate(
-            $_,
-            i18nKey(
-                "groupVisibilityChangedBy",
-                {
-                    changedBy: changedByStr,
-                },
-                level,
-                true,
-            ),
-        ),
-    );
-</script>
-
-{#if showEvent}
-    <NonMessageEvent {text} {timestamp} />
-{/if}
diff --git a/frontend/app/src/components/home/Home.svelte b/frontend/app/src/components/home/Home.svelte
deleted file mode 100644
index 4f3dc33cc5..0000000000
--- a/frontend/app/src/components/home/Home.svelte
+++ /dev/null
@@ -1,1182 +0,0 @@
-<script lang="ts">
-    import { trackedEffect } from "@src/utils/effects.svelte";
-    import { flushPendingNavigation } from "@src/utils/navigation";
-    import type { ProfileLinkClickedEvent } from "@webcomponents/profileLink";
-    import { portalState } from "component-lib";
-    import type {
-        CandidateGroupChat,
-        ChannelIdentifier,
-        ChatIdentifier,
-        CommunityIdentifier,
-        CommunitySummary,
-        DirectChatIdentifier,
-        EnhancedAccessGate,
-        EnhancedReplyContext,
-        FullWebhookDetails,
-        GateCheckSucceeded,
-        GroupChatSummary,
-        Level,
-        Message,
-        MultiUserChat,
-        MultiUserChatIdentifier,
-        NervousSystemDetails,
-        OpenChat,
-        PubSubEvents,
-        ResourceKey,
-        RouteParams,
-        Rules,
-        UpdatedRules,
-    } from "@client";
-    import {
-        allUsersStore,
-        anonUserStore,
-        chatIdentifiersEqual,
-        chatListScopeStore,
-        chatsInitialisedStore,
-        chatSummariesListStore,
-        chatSummariesStore,
-        communitiesStore,
-        currentUserStore,
-        defaultChatRules,
-        dimensionsHeight,
-        fullWidth,
-        identityStateStore,
-        localUpdates,
-        offlineStore,
-        pinNumberResolverStore,
-        querystringStore,
-        ROLE_NONE,
-        routeForChatIdentifier,
-        routeForScope,
-        routeStore,
-        captureRulesAcceptanceStore as rulesAcceptanceStore,
-        selectedChatIdStore,
-        selectedChatSummaryStore,
-        selectedCommunityRulesStore,
-        setRightPanelHistory,
-        subscribe,
-        suspendedUserStore,
-    } from "@client";
-    import { navigate } from "@utils/navigation";
-    import { getContext, onMount, tick, untrack } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { i18nKey } from "../../i18n/i18n";
-    import { createCandidateCommunity } from "../../stores/community";
-    import { messageToForwardStore } from "../../stores/messageToForward";
-    import { chitPopup, disableChit } from "../../stores/settings";
-    import { toastStore } from "../../stores/toast";
-    import { activeVideoCall, incomingVideoCall } from "../../stores/video";
-    import {
-        currentTheme,
-        currentThemeName,
-        preferredDarkThemeName,
-        themeType,
-    } from "../../theme/themes";
-    import { scream } from "../../utils/scream";
-    import type { Share } from "../../utils/share";
-    import { removeQueryStringParam } from "../../utils/urls";
-    import AreYouSure from "../AreYouSure.svelte";
-    import BackgroundLogo from "../BackgroundLogo.svelte";
-    import BotBuilderModal from "../bots/BotBuilderModal.svelte";
-    import WebhookModal from "../bots/WebhookModal.svelte";
-    import EditLabel from "../EditLabel.svelte";
-    import NotFound from "../NotFound.svelte";
-    import OfflineFooter from "../OfflineFooter.svelte";
-    import OnboardModal from "../onboard/OnboardModal.svelte";
-    import Overlay from "../Overlay.svelte";
-    import SelectChatModal from "../SelectChatModal.svelte";
-    import SuspendedModal from "../SuspendedModal.svelte";
-    import Toast from "../Toast.svelte";
-    import AcceptRulesModal from "./AcceptRulesModal.svelte";
-    import GateCheckFailed from "./access/AccessGateCheckFailed.svelte";
-    import AccessGateEvaluator from "./access/AccessGateEvaluator.svelte";
-    import AnonFooter from "./AnonFooter.svelte";
-    import ChitEarned from "./ChitEarned.svelte";
-    import HallOfFame from "./ChitHallOfFame.svelte";
-    import Convert from "./communities/Convert.svelte";
-    import EditCommunity from "./communities/edit/Edit.svelte";
-    import CreateOrUpdateGroup from "./createOrUpdateGroup/CreateOrUpdateGroup.svelte";
-    import DailyChitModal from "./DailyChitModal.svelte";
-    import LeftPanel from "./LeftPanel.svelte";
-    import MiddlePanel from "./MiddlePanel.svelte";
-    import LeftNav from "./nav/LeftNav.svelte";
-    import NoAccess from "./NoAccess.svelte";
-    import PinNumberModal from "./PinNumberModal.svelte";
-    import AccountsModal from "./profile/AccountsModal.svelte";
-    import SetPinNumberModal from "./profile/SetPinNumberModal.svelte";
-    import VerifyHumanity from "./profile/VerifyHumanity.svelte";
-    import ViewUserProfile from "./profile/ViewUserProfileModal.svelte";
-    import MakeProposalModal from "./proposal/MakeProposalModal.svelte";
-    import RightPanel from "./RightPanelWrapper.svelte";
-    import SuspendModal from "./SuspendModal.svelte";
-    import Upgrade from "./upgrade/Upgrade.svelte";
-
-    type ViewProfileConfig = {
-        userId: string;
-        chatButton: boolean;
-        alignTo?: HTMLElement;
-        inGlobalContext: boolean;
-    };
-
-    const client = getContext<OpenChat>("client");
-
-    let convertGroup: GroupChatSummary | undefined = $state(undefined);
-    let showProfileCard: ViewProfileConfig | undefined = $state(undefined);
-
-    type ConfirmActionEvent =
-        | ConfirmLeaveEvent
-        | ConfirmDeleteDirectChatEvent
-        | ConfirmDeleteEvent
-        | ConfirmLeaveCommunityEvent
-        | ConfirmDeleteCommunityEvent;
-
-    type ConfirmLeaveCommunityEvent = {
-        kind: "leave_community";
-        communityId: CommunityIdentifier;
-    };
-
-    type ConfirmLeaveEvent = {
-        kind: "leave";
-        chatId: MultiUserChatIdentifier;
-        level: Level;
-    };
-
-    type ConfirmDeleteDirectChatEvent = {
-        kind: "delete_direct_chat";
-        chatId: DirectChatIdentifier;
-        blockUser: boolean;
-    };
-
-    type ConfirmDeleteEvent = {
-        kind: "delete";
-        chatId: MultiUserChatIdentifier;
-        level: Level;
-        doubleCheck: { challenge: ResourceKey; response: ResourceKey };
-        after?: () => void;
-    };
-
-    type ConfirmDeleteCommunityEvent = {
-        kind: "delete_community";
-        communityId: CommunityIdentifier;
-        doubleCheck: { challenge: ResourceKey; response: ResourceKey };
-    };
-
-    type ModalType =
-        | { kind: "none" }
-        | { kind: "verify_humanity" }
-        | { kind: "select_chat" }
-        | { kind: "register_bot" }
-        | { kind: "update_bot" }
-        | { kind: "remove_bot" }
-        | { kind: "register_webhook" }
-        | { kind: "update_webhook"; webhook: FullWebhookDetails }
-        | { kind: "suspended" }
-        | { kind: "suspending"; userId: string }
-        | { kind: "no_access" }
-        | { kind: "new_group"; embeddedContent: boolean; candidate: CandidateGroupChat }
-        | { kind: "wallet" }
-        | { kind: "gate_check_failed"; gates: EnhancedAccessGate[] }
-        | { kind: "hall_of_fame" }
-        | { kind: "edit_community"; community: CommunitySummary; communityRules: Rules }
-        | { kind: "make_proposal"; chat: MultiUserChat; nervousSystem: NervousSystemDetails }
-        | { kind: "registering" }
-        | { kind: "logging_in" }
-        | { kind: "not_found" }
-        | { kind: "claim_daily_chit" }
-        | { kind: "challenge" }
-        | {
-              kind: "evaluating_access_gates";
-              group: MultiUserChat;
-              select: boolean;
-              gates: EnhancedAccessGate[];
-              level: Level;
-          };
-
-    let modal: ModalType = $state({ kind: "none" });
-    let confirmActionEvent: ConfirmActionEvent | undefined = $state();
-    let joining: MultiUserChat | undefined = $state(undefined);
-    let showUpgrade: boolean = $state(false);
-    let share: Share = { title: "", text: "", url: "", files: [] };
-    let messageToForward: Message | undefined = undefined;
-
-    onMount(() => {
-        const unsubEvents = [
-            subscribe("chatWith", chatWith),
-            subscribe("showInviteGroupUsers", showInviteGroupUsers),
-            subscribe("replyPrivatelyTo", replyPrivatelyTo),
-            subscribe("showGroupMembers", showGroupMembers),
-            subscribe("upgrade", upgrade),
-            subscribe("verifyHumanity", verifyHumanity),
-            subscribe("deleteDirectChat", onTriggerConfirm),
-            subscribe("deleteGroup", onTriggerConfirm),
-            subscribe("deleteCommunity", onTriggerConfirm),
-            subscribe("communityDetails", communityDetails),
-            subscribe("editCommunity", editCommunity),
-            subscribe("leaveCommunity", onTriggerConfirm),
-            subscribe("makeProposal", showMakeProposalModal),
-            subscribe("leaveGroup", onTriggerConfirm),
-            subscribe("newGroup", () => newGroup("group")),
-            subscribe("wallet", showWallet),
-            subscribe("profile", showProfile),
-            subscribe("claimDailyChit", claimDailyChit),
-            subscribe("joinGroup", joinGroup),
-            subscribe("createCommunity", createCommunity),
-            subscribe("unarchiveChat", unarchiveChat),
-            subscribe("forward", forwardMessage),
-            subscribe("toggleMuteNotifications", toggleMuteNotifications),
-            subscribe("newChannel", newChannel),
-            subscribe("successfulImport", successfulImport),
-            subscribe("showProposalFilters", showProposalFilters),
-            subscribe("convertGroupToCommunity", convertGroupToCommunity),
-            subscribe("clearSelection", () => navigate(routeForScope($chatListScopeStore))),
-            subscribe("editGroup", editGroup),
-            subscribe("userSuspensionChanged", () => window.location.reload()),
-            subscribe("selectedChatInvalid", selectedChatInvalid),
-            subscribe("sendMessageFailed", sendMessageFailed),
-            subscribe("summonWitch", summonWitch),
-            subscribe("registerBot", registerBot),
-            subscribe("updateBot", updateBot),
-            subscribe("removeBot", removeBot),
-            subscribe("registerWebhook", registerWebhook),
-            subscribe("updateWebhook", updateWebhook),
-            subscribe("remoteVideoCallStarted", remoteVideoCallStarted),
-            subscribe("remoteVideoCallEnded", remoteVideoCallEnded),
-            subscribe("notification", (n) => client.notificationReceived(n)),
-            subscribe("noAccess", () => (modal = { kind: "no_access" })),
-            subscribe("notFound", () => (modal = { kind: "not_found" })),
-            subscribe("copyUrl", copyUrl),
-            subscribe("suspendUser", suspendUser),
-            subscribe("closeModalStack", () => {
-                // TODO - not 100% sure that this is all we need to do here
-                portalState.close();
-                flushPendingNavigation();
-            }),
-        ];
-        client.initialiseNotifications();
-        document.body.addEventListener("profile-clicked", profileClicked);
-
-        if ($suspendedUserStore) {
-            modal = { kind: "suspended" };
-        }
-
-        return () => {
-            unsubEvents.forEach((u) => u());
-            document.body.removeEventListener("profile-clicked", profileClicked);
-        };
-    });
-
-    function suspendUser(userId: string) {
-        modal = { kind: "suspending", userId };
-    }
-
-    function profileClicked(event: Event) {
-        profileLinkClicked(event as CustomEvent<ProfileLinkClickedEvent>);
-    }
-
-    function selectedChatInvalid() {
-        navigate(routeForScope(client.getDefaultScope()));
-    }
-
-    function sendMessageFailed(alert: boolean) {
-        if (alert) {
-            toastStore.showFailureToast(i18nKey("errorSendingMessage"));
-        }
-    }
-
-    function registerBot() {
-        modal = { kind: "register_bot" };
-    }
-
-    function registerWebhook() {
-        modal = { kind: "register_webhook" };
-    }
-
-    function updateWebhook({ hook }: { hook: FullWebhookDetails; chat: MultiUserChat }) {
-        modal = { kind: "update_webhook", webhook: hook };
-    }
-
-    function updateBot() {
-        modal = { kind: "update_bot" };
-    }
-
-    function removeBot() {
-        modal = { kind: "remove_bot" };
-    }
-
-    function summonWitch() {
-        const isHalloweenTheme = $currentThemeName === "halloween";
-        if (!isHalloweenTheme) {
-            themeType.set("dark");
-            preferredDarkThemeName.set("halloween");
-        }
-        document.body.classList.add("witch");
-        scream.currentTime = 0;
-        scream.play();
-        window.setTimeout(() => {
-            document.body.classList.remove("witch");
-        }, 2000);
-    }
-
-    function remoteVideoCallEnded(messageId: bigint) {
-        if ($incomingVideoCall?.messageId === messageId) {
-            incomingVideoCall.set(undefined);
-        }
-    }
-
-    function remoteVideoCallStarted(ev: PubSubEvents["remoteVideoCallStarted"]) {
-        // If current user is already in the call, or has previously been in the call, or the call started more than 2 hours ago, exit
-        if (
-            chatIdentifiersEqual($activeVideoCall?.chatId, ev.chatId) ||
-            ev.currentUserIsParticipant ||
-            Number(ev.timestamp) < Date.now() - 2 * 60 * 60 * 1000
-        ) {
-            return;
-        }
-
-        incomingVideoCall.set(ev);
-    }
-
-    async function routeChange(initialised: boolean, route: RouteParams): Promise<void> {
-        // wrap the whole thing in untrack because we don't want it to react to everything it reads in here
-        untrack(async () => {
-            // wait until we have loaded the chats
-            if (initialised) {
-                client.filterRightPanelHistory((state) => state.kind !== "community_filters");
-                if (
-                    $anonUserStore &&
-                    client.isChatListRoute(route) &&
-                    route.scope.kind === "favourite"
-                ) {
-                    client.updateIdentityState({ kind: "logging_in" });
-                    navigate("/chats");
-                    return;
-                }
-
-                if (client.setChatListScopeAndRedirect(route)) {
-                    return;
-                }
-
-                if (client.isHomeRoute(route)) {
-                    filterChatSpecificRightPanelStates();
-                } else if (client.isCommunitiesRoute(route)) {
-                    setRightPanelHistory($fullWidth ? [{ kind: "community_filters" }] : []);
-                } else {
-                    // any other route with no associated chat therefore we must clear any selected chat and potentially close the right panel
-                    if (client.isShareRoute(route)) {
-                        share = {
-                            title: route.title,
-                            text: route.text,
-                            url: route.url,
-                            files: [],
-                        };
-                        navigate(routeForScope(client.getDefaultScope()));
-                        modal = { kind: "select_chat" };
-                    }
-                }
-
-                if (modal?.kind === "claim_daily_chit") {
-                    modal = { kind: "none" };
-                }
-            }
-        });
-    }
-
-    // Note: very important (and hacky) that this is hidden in a function rather than inline in the top level reactive
-    // statement because we don't want that reactive statement to execute in reponse to changes in rightPanelHistory :puke:
-    function filterChatSpecificRightPanelStates() {
-        client.filterRightPanelHistory((panel) => panel.kind === "user_profile");
-    }
-
-    function leaderboard() {
-        modal = { kind: "hall_of_fame" };
-    }
-
-    function closeModal() {
-        modal = { kind: "none" };
-        joining = undefined;
-    }
-
-    function closeNoAccess() {
-        closeModal();
-        navigate(routeForScope(client.getDefaultScope()));
-    }
-
-    function unarchiveChat(chatId: ChatIdentifier) {
-        client.unarchiveChat(chatId).then((success) => {
-            if (!success) {
-                toastStore.showFailureToast(i18nKey("unarchiveChatFailed"));
-            }
-        });
-    }
-
-    function getConfirmMessage(
-        confirmActionEvent: ConfirmActionEvent | undefined,
-    ): ResourceKey | undefined {
-        if (confirmActionEvent === undefined) return undefined;
-
-        switch (confirmActionEvent.kind) {
-            case "leave":
-                return i18nKey("confirmLeaveGroup", undefined, confirmActionEvent.level, true);
-            case "leave_community":
-                return i18nKey("communities.leaveMessage");
-            case "delete_direct_chat":
-                return i18nKey("confirmDeleteDirectChat", undefined, undefined, true);
-            case "delete_community":
-                return i18nKey("communities.deleteMessage");
-            case "delete":
-                return i18nKey("irreversible", undefined, confirmActionEvent.level, true);
-        }
-    }
-
-    function onTriggerConfirm(detail: ConfirmActionEvent) {
-        confirmActionEvent = detail;
-    }
-
-    function onConfirmAction(yes: boolean): Promise<void> {
-        const result = yes ? doConfirmAction(confirmActionEvent!) : Promise.resolve();
-
-        return result.finally(() => {
-            confirmActionEvent = undefined;
-        });
-    }
-
-    function doConfirmAction(confirmActionEvent: ConfirmActionEvent): Promise<void> {
-        switch (confirmActionEvent.kind) {
-            case "leave":
-                return leaveGroup(confirmActionEvent.chatId, confirmActionEvent.level);
-            case "leave_community":
-                return leaveCommunity(confirmActionEvent.communityId);
-            case "delete_direct_chat":
-            case "delete_direct_chat": {
-                const viewingThisChat = chatIdentifiersEqual(
-                    $selectedChatIdStore,
-                    confirmActionEvent.chatId,
-                );
-                return deleteDirectChat(
-                    confirmActionEvent.chatId,
-                    confirmActionEvent.blockUser,
-                ).then(() => {
-                    if (viewingThisChat) setRightPanelHistory([]);
-                });
-            }
-            case "delete_community":
-                return deleteCommunity(confirmActionEvent.communityId).then((_) => {
-                    setRightPanelHistory([]);
-                });
-            case "delete":
-                return deleteGroup(confirmActionEvent.chatId, confirmActionEvent.level).then(
-                    (_) => {
-                        setRightPanelHistory([]);
-                        confirmActionEvent.after?.();
-                    },
-                );
-            default:
-                return Promise.reject();
-        }
-    }
-
-    function deleteDirectChat(chatId: DirectChatIdentifier, blockUser: boolean): Promise<void> {
-        // Only redirect when deleting the chat we're currently viewing. The
-        // delete can now be triggered from the chat list for a non-selected
-        // chat, in which case we must leave the current route untouched.
-        const viewingThisChat = chatIdentifiersEqual($selectedChatIdStore, chatId);
-        if (viewingThisChat) {
-            navigate(routeForScope($chatListScopeStore));
-        }
-        return client.deleteDirectChat(chatId, blockUser).then((success) => {
-            if (!success) {
-                toastStore.showFailureToast(i18nKey("deleteDirectChatFailure"));
-                if (viewingThisChat) {
-                    navigate(routeForChatIdentifier($chatListScopeStore.kind, chatId));
-                }
-            }
-        });
-    }
-
-    function deleteGroup(chatId: MultiUserChatIdentifier, level: Level): Promise<void> {
-        if (chatId.kind === "channel") {
-            navigate(`/community/${chatId.communityId}`);
-        } else {
-            navigate(routeForScope($chatListScopeStore));
-        }
-        return client.deleteGroup(chatId).then((success) => {
-            if (success) {
-                toastStore.showSuccessToast(i18nKey("deleteGroupSuccess", undefined, level));
-            } else {
-                toastStore.showFailureToast(i18nKey("deleteGroupFailure", undefined, level, true));
-                navigate(routeForChatIdentifier($chatListScopeStore.kind, chatId));
-            }
-        });
-    }
-
-    function deleteCommunity(id: CommunityIdentifier): Promise<void> {
-        navigate(routeForScope(client.getDefaultScope()));
-
-        client.deleteCommunity(id).then((success) => {
-            if (!success) {
-                toastStore.showFailureToast(i18nKey("communities.errors.deleteFailed"));
-                navigate(`/community/${id.communityId}`);
-            }
-        });
-
-        return Promise.resolve();
-    }
-
-    function leaveCommunity(id: CommunityIdentifier): Promise<void> {
-        navigate(routeForScope(client.getDefaultScope()));
-
-        client.leaveCommunity(id).then((success) => {
-            if (!success) {
-                toastStore.showFailureToast(i18nKey("communities.errors.leaveFailed"));
-                navigate(`/community/${id.communityId}`);
-            }
-        });
-
-        return Promise.resolve();
-    }
-
-    function leaveGroup(chatId: MultiUserChatIdentifier, level: Level): Promise<void> {
-        navigate(routeForScope($chatListScopeStore));
-
-        client.leaveGroup(chatId).then((resp) => {
-            if (resp !== "success") {
-                if (resp === "owner_cannot_leave") {
-                    toastStore.showFailureToast(i18nKey("ownerCantLeave", undefined, level, true));
-                } else {
-                    toastStore.showFailureToast(
-                        i18nKey("failedToLeaveGroup", undefined, level, true),
-                    );
-                }
-                navigate(routeForChatIdentifier($chatListScopeStore.kind, chatId));
-            }
-        });
-
-        return Promise.resolve();
-    }
-
-    function chatWith(chatId: DirectChatIdentifier) {
-        const chat = $chatSummariesListStore.find((c) => {
-            return c.kind === "direct_chat" && c.them === chatId;
-        });
-
-        navigate(routeForChatIdentifier(chat ? $chatListScopeStore.kind : "chats", chatId));
-    }
-
-    function showInviteGroupUsers(show: boolean) {
-        if ($selectedChatIdStore !== undefined) {
-            if (show) {
-                setRightPanelHistory([{ kind: "invite_group_users" }]);
-            } else {
-                client.pushRightPanelHistory({ kind: "invite_group_users" });
-            }
-        }
-    }
-
-    function replyPrivatelyTo(context: EnhancedReplyContext) {
-        if (context.sender === undefined) return;
-
-        const chat = $chatSummariesListStore.find((c) => {
-            return (
-                c.kind === "direct_chat" &&
-                chatIdentifiersEqual(c.them, {
-                    kind: "direct_chat",
-                    userId: context.sender!.userId,
-                })
-            );
-        });
-
-        const chatId = chat?.id ?? { kind: "direct_chat", userId: context.sender.userId };
-        localUpdates.draftMessages.setTextContent({ chatId }, "");
-        localUpdates.draftMessages.setReplyingTo({ chatId }, context);
-        if (chat) {
-            navigate(routeForChatIdentifier($chatListScopeStore.kind, chatId));
-        } else {
-            createDirectChat(chatId as DirectChatIdentifier);
-        }
-    }
-
-    function forwardMessage(message: Message) {
-        messageToForward = message;
-        modal = { kind: "select_chat" };
-    }
-
-    function showGroupMembers() {
-        if ($selectedChatIdStore !== undefined) {
-            setRightPanelHistory([{ kind: "show_group_members" }]);
-        }
-    }
-
-    function showProfile() {
-        setRightPanelHistory([{ kind: "user_profile" }]);
-    }
-
-    function communityDetails(_: CommunitySummary) {
-        // what do we do here if the community is not selected
-        // do we select it?
-        if ($chatListScopeStore.kind === "community") {
-            setRightPanelHistory([{ kind: "community_details" }]);
-        }
-    }
-
-    function showProposalFilters() {
-        if ($selectedChatIdStore !== undefined) {
-            setRightPanelHistory([
-                {
-                    kind: "proposal_filters",
-                },
-            ]);
-        }
-    }
-
-    function showMakeProposalModal() {
-        if (nervousSystem !== undefined && selectedMultiUserChat !== undefined) {
-            modal = { kind: "make_proposal", chat: selectedMultiUserChat, nervousSystem };
-        }
-    }
-
-    async function joinGroup(detail: { group: MultiUserChat; select: boolean }): Promise<void> {
-        if ($anonUserStore) {
-            client.updateIdentityState({
-                kind: "logging_in",
-                postLogin: { kind: "join_group", ...detail },
-            });
-            return;
-        }
-        const { group, select } = detail;
-
-        // it's possible that we got here via a postLogin capture in which case it's possible
-        // that we are actually already a member of this group, so we should double check here
-        // that we actually *need* to join the group
-        let chat = $chatSummariesStore.get(group.id);
-        if (chat === undefined || chat.membership.role === ROLE_NONE || client.isLapsed(chat.id)) {
-            doJoinGroup(group, select, undefined);
-        }
-    }
-
-    function accessGatesEvaluated(success: GateCheckSucceeded) {
-        if (modal.kind === "evaluating_access_gates") {
-            const { group, select } = modal;
-            closeModal();
-            doJoinGroup(group, select, success);
-        }
-    }
-
-    /**
-     * When we try to join a group we need to first scrutinise the access gates and
-     * see whether any of them require client side action before we can proceed with the
-     * call to the back end. If there are gates which require action, we need to perform
-     * those actions one by one until they are all done and then feed their results
-     * back into this function.
-     */
-
-    async function doJoinGroup(
-        group: MultiUserChat,
-        select: boolean,
-        gateCheck: GateCheckSucceeded | undefined,
-    ): Promise<void> {
-        joining = group;
-        if (gateCheck === undefined) {
-            const gates = client.accessGatesForChat(group, true);
-            const passed = client.doesUserMeetAccessGates(gates);
-
-            if (!passed) {
-                /**
-                 * If we cannot already tell that the user passes the access gate(s), check if there are any gates that require front end
-                 * pre-processing.
-                 */
-                if (client.gatePreprocessingRequired(gates)) {
-                    modal = {
-                        kind: "evaluating_access_gates",
-                        group,
-                        select,
-                        gates,
-                        level: group.level,
-                    };
-                    return Promise.resolve();
-                }
-            }
-        }
-
-        const credentials = gateCheck?.credentials ?? [];
-        const paymentApprovals = gateCheck?.paymentApprovals ?? new Map();
-        const compositeGateIndex = gateCheck?.compositeGateIndex;
-
-        return client
-            .joinGroup(group, credentials, paymentApprovals, compositeGateIndex)
-            .then((resp) => {
-                if (resp.kind === "blocked") {
-                    toastStore.showFailureToast(i18nKey("youreBlocked"));
-                    joining = undefined;
-                } else if (resp.kind === "gate_check_failed") {
-                    const gates = client.accessGatesForChat(group);
-                    modal = { kind: "gate_check_failed", gates };
-                } else if (resp.kind !== "success") {
-                    toastStore.showFailureToast(
-                        i18nKey("joinGroupFailed", undefined, group.level, true),
-                    );
-                    joining = undefined;
-                } else if (select) {
-                    joining = undefined;
-                    navigate(routeForChatIdentifier($chatListScopeStore.kind, group.id));
-                } else {
-                    joining = undefined;
-                }
-            })
-            .catch(() => (joining = undefined));
-    }
-
-    function upgrade() {
-        showUpgrade = true;
-    }
-
-    function onSelectChat(chatId: ChatIdentifier) {
-        closeModal();
-        if (messageToForward !== undefined) {
-            forwardToChat(chatId);
-            messageToForward = undefined;
-        } else {
-            shareWithChat(chatId);
-        }
-    }
-
-    function onCloseSelectChat() {
-        closeModal();
-        messageToForward = undefined;
-    }
-
-    function forwardToChat(chatId: ChatIdentifier) {
-        navigate(routeForChatIdentifier($chatListScopeStore.kind, chatId));
-        messageToForwardStore.set(messageToForward);
-    }
-
-    function shareWithChat(chatId: ChatIdentifier) {
-        navigate(routeForChatIdentifier($chatListScopeStore.kind, chatId));
-
-        const shareText = share.text ?? "";
-        const shareTitle = share.title ?? "";
-        const shareUrl = share.url ?? "";
-
-        let text = shareText.length > 0 ? shareText : shareTitle;
-
-        if (shareUrl.length > 0) {
-            if (text.length > 0) {
-                text += "\n";
-            }
-            text += shareUrl;
-        }
-
-        localUpdates.draftMessages.setTextContent({ chatId }, text);
-    }
-
-    function showWallet() {
-        modal = { kind: "wallet" };
-    }
-
-    function newChannel(embeddedContent: boolean) {
-        newGroup("channel", embeddedContent);
-    }
-
-    function newGroup(level: Level = "group", embeddedContent: boolean = false) {
-        const candidate = client.createCandidateGroup(level, embeddedContent);
-        if (candidate === undefined) return;
-
-        modal = {
-            kind: "new_group",
-            embeddedContent,
-            candidate,
-        };
-    }
-
-    function editGroup(detail: { chat: MultiUserChat; rules: UpdatedRules | undefined }) {
-        const chat = detail.chat;
-        let level: Level = chat.id.kind === "group_chat" ? "group" : "channel";
-        let rules = detail.rules ?? { ...defaultChatRules(level), newVersion: false };
-        modal = {
-            kind: "new_group",
-            embeddedContent: chat.kind === "channel" && chat.externalUrl !== undefined,
-            candidate: {
-                id: chat.id,
-                kind: "candidate_group_chat",
-                name: chat.name,
-                description: chat.description,
-                historyVisible: chat.historyVisible,
-                public: chat.public,
-                frozen: chat.frozen,
-                members: [],
-                permissions: { ...chat.permissions },
-                rules,
-                avatar: {
-                    blobUrl: chat.blobUrl,
-                    blobData: chat.blobData,
-                },
-                gateConfig: { ...chat.gateConfig },
-                level,
-                membership: chat.membership,
-                eventsTTL: chat.eventsTTL,
-                messagesVisibleToNonMembers: chat.messagesVisibleToNonMembers,
-                externalUrl: chat.kind === "channel" ? chat.externalUrl : undefined,
-                verified: chat.kind === "group_chat" ? chat.verified : false,
-            },
-        };
-    }
-
-    function toggleMuteNotifications(detail: {
-        chatId: ChatIdentifier;
-        mute: boolean | undefined;
-        muteAtEveryone: boolean | undefined;
-    }) {
-        const op = detail.mute ? "muted" : "unmuted";
-        client
-            .toggleMuteNotifications(detail.chatId, detail.mute, detail.muteAtEveryone)
-            .then((success) => {
-                if (!success) {
-                    toastStore.showFailureToast(
-                        i18nKey("toggleMuteNotificationsFailed", {
-                            operation: $_(op),
-                        }),
-                    );
-                }
-            });
-    }
-
-    function copyUrl() {
-        const url = window.location.href;
-
-        navigator.clipboard.writeText(url).then(
-            () => {
-                toastStore.showSuccessToast(i18nKey("urlCopiedToClipboard"));
-            },
-            () => {
-                toastStore.showFailureToast(i18nKey("failedToCopyUrlToClipboard", { url }));
-            },
-        );
-    }
-
-    async function createDirectChat(chatId: DirectChatIdentifier): Promise<boolean> {
-        if (!(await client.createDirectChat(chatId))) {
-            modal = { kind: "not_found" };
-            return false;
-        }
-
-        navigate(routeForChatIdentifier("chats", chatId));
-        return true;
-    }
-
-    function createCommunity() {
-        const maxIndex = $communitiesStore.reduce(
-            (m, [_, c]) => (c.membership.index > m ? c.membership.index : m),
-            0,
-        );
-        modal = {
-            kind: "edit_community",
-            community: createCandidateCommunity("", maxIndex + 1),
-            communityRules: defaultChatRules("community"),
-        };
-    }
-
-    function editCommunity(community: CommunitySummary) {
-        modal = {
-            kind: "edit_community",
-            community,
-            communityRules: $selectedCommunityRulesStore ?? defaultChatRules("community"),
-        };
-    }
-
-    function convertGroupToCommunity(group: GroupChatSummary) {
-        setRightPanelHistory([]);
-        convertGroup = group;
-    }
-
-    function successfulImport(id: ChannelIdentifier) {
-        navigate(`/community/${id.communityId}`);
-    }
-
-    function profileLinkClicked(ev: CustomEvent<ProfileLinkClickedEvent>) {
-        showProfileCard = {
-            userId: ev.detail.userId,
-            chatButton: ev.detail.chatButton,
-            inGlobalContext: ev.detail.inGlobalContext,
-            alignTo: ev.target ? (ev.target as HTMLElement) : undefined,
-        };
-    }
-
-    function chatWithFromProfileCard() {
-        if (showProfileCard === undefined) return;
-        chatWith({ kind: "direct_chat", userId: showProfileCard.userId });
-        showProfileCard = undefined;
-    }
-
-    let forgotPin = $state(false);
-
-    function onForgotPin() {
-        forgotPin = true;
-    }
-
-    function onPinNumberComplete(pin: string | undefined) {
-        if (pin) {
-            $pinNumberResolverStore?.resolve(pin);
-        }
-    }
-
-    function onPinNumberClose() {
-        $pinNumberResolverStore?.reject();
-    }
-
-    function verifyHumanity() {
-        modal = { kind: "verify_humanity" };
-    }
-
-    function claimDailyChit() {
-        modal = { kind: "claim_daily_chit" };
-    }
-
-    let confirmMessage = $derived(getConfirmMessage(confirmActionEvent));
-    let selectedMultiUserChat = $derived(
-        $selectedChatSummaryStore?.kind === "group_chat" ||
-            $selectedChatSummaryStore?.kind === "channel"
-            ? $selectedChatSummaryStore
-            : undefined,
-    );
-    let governanceCanisterId = $derived(
-        selectedMultiUserChat !== undefined
-            ? selectedMultiUserChat.subtype?.governanceCanisterId
-            : undefined,
-    );
-    let nervousSystem = $derived(client.tryGetNervousSystem(governanceCanisterId));
-    // $: nervousSystem = client.tryGetNervousSystem("rrkah-fqaaa-aaaaa-aaaaq-cai");
-
-    trackedEffect("identity-state", () => {
-        if ($identityStateStore.kind === "registering") {
-            modal = { kind: "registering" };
-        } else if ($identityStateStore.kind === "logging_in") {
-            modal = { kind: "logging_in" };
-        } else if ($identityStateStore.kind === "logged_in" && modal.kind === "registering") {
-            console.log("We are now logged in so we are closing the register modal");
-            closeModal();
-        }
-        if (
-            $identityStateStore.kind === "logged_in" &&
-            $identityStateStore.postLogin?.kind === "join_group" &&
-            $chatsInitialisedStore
-        ) {
-            const join = { ...$identityStateStore.postLogin };
-            client.clearPostLoginState();
-            tick().then(() => joinGroup(join));
-        }
-    });
-
-    trackedEffect("route-change", () => {
-        routeChange($chatsInitialisedStore, $routeStore);
-    });
-
-    $effect(() => {
-        if ($chatsInitialisedStore) {
-            if ($querystringStore.get("diamond") !== null) {
-                showUpgrade = true;
-                navigate(removeQueryStringParam("diamond"));
-            }
-            const faq = $querystringStore.get("faq");
-            if (faq !== null) {
-                navigate(`/faq?q=${faq}`);
-            }
-            if ($querystringStore.get("wallet") !== null) {
-                showWallet();
-                navigate(removeQueryStringParam("wallet"));
-            }
-            if ($querystringStore.get("hof") !== null) {
-                modal = { kind: "hall_of_fame" };
-                navigate(removeQueryStringParam("hof"));
-            }
-            if ($querystringStore.get("everyone") !== null) {
-                setRightPanelHistory([{ kind: "show_group_members" }]);
-                navigate(removeQueryStringParam("everyone"));
-            }
-            const usergroup = $querystringStore.get("usergroup");
-            if (usergroup !== null) {
-                const userGroupId = Number(usergroup);
-                setRightPanelHistory([{ kind: "show_community_members", userGroupId }]);
-                navigate(removeQueryStringParam("usergroup"));
-            }
-        }
-    });
-
-    let bgHeight = $derived($dimensionsHeight * 0.9);
-    let bgClip = $derived((($dimensionsHeight - 32) / bgHeight) * 361);
-</script>
-
-{#if showProfileCard !== undefined}
-    {@const profileUser = $allUsersStore.get(showProfileCard.userId)}
-    {#if profileUser?.kind !== "bot"}
-        <ViewUserProfile
-            userId={showProfileCard.userId}
-            inGlobalContext={showProfileCard.inGlobalContext}
-            chatButton={showProfileCard.chatButton}
-            alignTo={showProfileCard.alignTo}
-            onOpenDirectChat={chatWithFromProfileCard}
-            onClose={() => (showProfileCard = undefined)} />
-    {/if}
-{/if}
-
-<main class:anon={$anonUserStore} class:offline={$offlineStore}>
-    <LeftNav />
-    <LeftPanel />
-    <MiddlePanel {joining} />
-    <RightPanel />
-</main>
-
-{#if $anonUserStore}
-    <AnonFooter />
-{/if}
-
-{#if $offlineStore}
-    <OfflineFooter />
-{/if}
-
-{#if confirmActionEvent !== undefined}
-    <AreYouSure
-        doubleCheck={confirmActionEvent.kind === "delete" ||
-        confirmActionEvent.kind === "delete_community"
-            ? confirmActionEvent.doubleCheck
-            : undefined}
-        message={confirmMessage}
-        action={onConfirmAction} />
-{/if}
-
-<Toast />
-
-{#if showUpgrade && $currentUserStore}
-    <Upgrade onCancel={() => (showUpgrade = false)} />
-{/if}
-
-{#if modal.kind !== "none"}
-    <Overlay
-        dismissible={modal.kind !== "select_chat" &&
-            modal.kind !== "not_found" &&
-            modal.kind !== "registering" &&
-            modal.kind !== "make_proposal"}
-        alignLeft={modal.kind === "select_chat"}
-        onClose={closeModal}>
-        {#if modal.kind === "select_chat"}
-            <SelectChatModal onClose={onCloseSelectChat} onSelect={onSelectChat} />
-        {:else if modal.kind === "suspended"}
-            <SuspendedModal onClose={closeModal} />
-        {:else if modal.kind === "register_bot"}
-            <BotBuilderModal mode={"register"} onClose={closeModal} />
-        {:else if modal.kind === "update_bot"}
-            <BotBuilderModal mode={"update"} onClose={closeModal} />
-        {:else if modal.kind === "remove_bot"}
-            <BotBuilderModal mode={"remove"} onClose={closeModal} />
-        {:else if modal.kind === "register_webhook" && ($selectedChatIdStore?.kind === "group_chat" || $selectedChatIdStore?.kind === "channel")}
-            <WebhookModal
-                chatId={$selectedChatIdStore}
-                mode={{ kind: "register" }}
-                onClose={closeModal} />
-        {:else if modal.kind === "update_webhook" && ($selectedChatIdStore?.kind === "group_chat" || $selectedChatIdStore?.kind === "channel")}
-            <WebhookModal
-                chatId={$selectedChatIdStore}
-                mode={{ kind: "update", webhook: modal.webhook }}
-                onClose={closeModal} />
-        {:else if modal.kind === "no_access"}
-            <NoAccess onClose={closeNoAccess} />
-        {:else if modal.kind === "not_found"}
-            <NotFound onClose={closeNoAccess} />
-        {:else if modal.kind === "gate_check_failed"}
-            <GateCheckFailed onClose={closeModal} gates={modal.gates} />
-        {:else if modal.kind === "evaluating_access_gates"}
-            <AccessGateEvaluator
-                gates={modal.gates}
-                onClose={closeModal}
-                onSuccess={accessGatesEvaluated} />
-        {:else if modal.kind === "new_group"}
-            <CreateOrUpdateGroup
-                embeddedContent={modal.embeddedContent}
-                bind:candidateGroup={modal.candidate}
-                onClose={closeModal} />
-        {:else if modal.kind === "edit_community"}
-            <EditCommunity
-                originalRules={modal.communityRules}
-                original={modal.community}
-                onClose={closeModal} />
-        {:else if modal.kind === "wallet"}
-            <AccountsModal onClose={closeModal} />
-        {:else if modal.kind === "hall_of_fame"}
-            <HallOfFame
-                onStreak={() => (modal = { kind: "claim_daily_chit" })}
-                onClose={closeModal} />
-        {:else if modal.kind === "make_proposal"}
-            <MakeProposalModal
-                selectedMultiUserChat={modal.chat}
-                nervousSystem={modal.nervousSystem}
-                onClose={closeModal} />
-        {:else if modal.kind === "logging_in" || modal.kind === "registering"}
-            <OnboardModal
-                step={modal.kind === "registering" ? "sign_up" : "select_mode"}
-                onClose={closeModal} />
-        {:else if modal.kind === "claim_daily_chit"}
-            <DailyChitModal onLeaderboard={leaderboard} onClose={closeModal} />
-        {:else if modal.kind === "verify_humanity"}
-            <VerifyHumanity onClose={closeModal} onSuccess={closeModal} />
-        {:else if modal.kind === "suspending"}
-            <SuspendModal userId={modal.userId} onClose={closeModal} />
-        {/if}
-    </Overlay>
-{/if}
-
-{#if $currentTheme.logo}
-    <BackgroundLogo
-        width={`${bgHeight}px`}
-        bottom={"unset"}
-        left={"0"}
-        opacity={"0.05"}
-        skew={"5deg"}
-        viewBox={`0 0 361 ${bgClip}`} />
-{/if}
-
-<Convert bind:group={convertGroup} />
-
-<EditLabel />
-
-{#if $rulesAcceptanceStore !== undefined}
-    <AcceptRulesModal />
-{:else if forgotPin}
-    <Overlay>
-        <SetPinNumberModal
-            onPinSet={onPinNumberComplete}
-            onClose={() => (forgotPin = false)}
-            type={{ kind: "forgot", while: { kind: "enter" } }} />
-    </Overlay>
-{:else if $pinNumberResolverStore !== undefined}
-    <Overlay>
-        <PinNumberModal
-            onClose={onPinNumberClose}
-            onComplete={onPinNumberComplete}
-            onForgot={onForgotPin} />
-    </Overlay>
-{/if}
-
-<!-- <svelte:body onprofile-clicked={profileLinkClicked} /> -->
-
-{#if $chitPopup && !$disableChit}
-    <ChitEarned />
-{/if}
-
-<style lang="scss">
-    :global(.edited-msg) {
-        @include font(light, normal, fs-70);
-    }
-
-    main {
-        transition: max-width ease-in-out 150ms;
-        position: relative;
-        width: 100%;
-        display: flex;
-        margin: 0 auto;
-
-        &.anon {
-            margin-bottom: toRem(50);
-        }
-        &.offline {
-            margin-bottom: toRem(40);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/HomeRoute.svelte b/frontend/app/src/components/home/HomeRoute.svelte
deleted file mode 100644
index 1dc398f08c..0000000000
--- a/frontend/app/src/components/home/HomeRoute.svelte
+++ /dev/null
@@ -1,54 +0,0 @@
-<script module lang="ts">
-    export interface HomeProps {
-        showLandingPage: boolean;
-    }
-
-    export type HomeType = Component<HomeProps>;
-</script>
-
-<script lang="ts">
-    import { chatsInitialisedStore, identityStateStore } from "@client";
-    import { type Component } from "svelte";
-    import FancyLoader from "../icons/FancyLoader.svelte";
-    import LandingPage from "../landingpages/LandingPage.svelte";
-    import Home from "./Home.svelte";
-
-    let { showLandingPage }: HomeProps = $props();
-
-    let registering = $derived(
-        $identityStateStore.kind === "registering" ||
-            ($identityStateStore.kind === "loading_user" && $identityStateStore.registering),
-    );
-
-    let showLoader = $derived(
-        !registering && (!$chatsInitialisedStore || $identityStateStore.kind === "loading_user"),
-    );
-</script>
-
-{#if showLandingPage}
-    <LandingPage />
-{:else if showLoader}
-    <div class="loading">
-        <div class="inner-loader">
-            <FancyLoader />
-        </div>
-    </div>
-{:else}
-    <Home />
-{/if}
-
-<style lang="scss">
-    .loading {
-        width: 100vw;
-        height: 100vh;
-        height: calc(var(--vh, 1vh) * 100);
-        height: 100dvh; // firefox will ignore this
-        display: grid;
-    }
-
-    .inner-loader {
-        width: toRem(48);
-        height: toRem(48);
-        margin: auto;
-    }
-</style>
diff --git a/frontend/app/src/components/home/HumanityConfirmation.svelte b/frontend/app/src/components/home/HumanityConfirmation.svelte
deleted file mode 100644
index 03917d3901..0000000000
--- a/frontend/app/src/components/home/HumanityConfirmation.svelte
+++ /dev/null
@@ -1,49 +0,0 @@
-<script lang="ts">
-    import { i18nKey, interpolate } from "../../i18n/i18n";
-    import Translatable from "../Translatable.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import { _ } from "svelte-i18n";
-    import Checkbox from "../Checkbox.svelte";
-    import AlertBox from "../AlertBox.svelte";
-
-    interface Props {
-        confirmed: boolean;
-    }
-
-    let { confirmed = $bindable() }: Props = $props();
-</script>
-
-<AlertBox icon={false}>
-    <Checkbox
-        id="history-visible"
-        label={i18nKey("access.doYouHaveUniquePersonCredential")}
-        align={"start"}
-        bind:checked={confirmed}>
-        <p class="question">
-            <Markdown text={interpolate($_, i18nKey("access.doYouHaveUniquePersonCredential"))} />
-        </p>
-        <p class="answer">
-            <Markdown text={interpolate($_, i18nKey("access.uniquePersonInfo2"))} />
-        </p>
-
-        <p class="answer">
-            <Translatable resourceKey={i18nKey("access.uniquePersonInfo3")} />
-        </p>
-    </Checkbox>
-</AlertBox>
-
-<style lang="scss">
-    .question,
-    .answer {
-        margin-bottom: $sp4;
-    }
-
-    .question {
-        @include font(book, normal, fs-90);
-    }
-
-    .answer {
-        color: var(--txt-light);
-        @include font(book, normal, fs-90);
-    }
-</style>
diff --git a/frontend/app/src/components/home/ImageContent.svelte b/frontend/app/src/components/home/ImageContent.svelte
deleted file mode 100644
index 8ecd905282..0000000000
--- a/frontend/app/src/components/home/ImageContent.svelte
+++ /dev/null
@@ -1,315 +0,0 @@
-<script lang="ts">
-    import type { ImageContent, MemeFighterContent } from "@client";
-    import ArrowCollapse from "svelte-material-icons/ArrowCollapse.svelte";
-    import ArrowExpand from "svelte-material-icons/ArrowExpand.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { rtlStore } from "../../stores/rtl";
-    import { lowBandwidth } from "../../stores/settings";
-    import { isTouchDevice } from "../../utils/devices";
-    import { reservedMediaStyle } from "../../utils/media";
-    import Button from "../Button.svelte";
-    import ModalContent from "../ModalContent.svelte";
-    import Overlay from "../Overlay.svelte";
-    import Translatable from "../Translatable.svelte";
-    import ContentCaption from "./ContentCaption.svelte";
-
-    interface Props {
-        content: ImageContent | MemeFighterContent;
-        fill: boolean;
-        draft?: boolean;
-        reply?: boolean;
-        pinned?: boolean;
-        height?: number | undefined;
-        intersecting?: boolean;
-        edited: boolean;
-        blockLevelMarkdown?: boolean;
-    }
-
-    let {
-        content,
-        fill,
-        draft = false,
-        reply = false,
-        pinned = false,
-        height = undefined,
-        intersecting = true,
-        edited,
-        blockLevelMarkdown = false,
-    }: Props = $props();
-
-    let imgElement: HTMLImageElement | undefined = $state();
-    let zoom = $state(false);
-    let withCaption = $derived(
-        content.kind === "image_content" && content.caption !== undefined && content.caption !== "",
-    );
-    let landscape = $derived(content.height < content.width);
-    let zoomedWidth: number = $state(0);
-    let zoomedHeight: number = $state(0);
-
-    function normaliseContent(content: ImageContent | MemeFighterContent) {
-        switch (content.kind) {
-            case "image_content":
-                return {
-                    url: content.blobUrl,
-                    caption: content.caption,
-                    fallback: content.thumbnailData,
-                    loadMsg: "loadImage",
-                };
-            case "meme_fighter_content":
-                return {
-                    url: content.url,
-                    caption: undefined,
-                    fallback: "/assets/memefighter.svg",
-                    loadMsg: "loadMeme",
-                };
-        }
-    }
-
-    function onClick() {
-        if (!isTouchDevice) {
-            toggleZoom();
-        }
-    }
-
-    function onDoubleClick(e: Event) {
-        e.stopPropagation();
-        if (isTouchDevice) {
-            toggleZoom();
-        }
-    }
-
-    function toggleZoom() {
-        zoom = !zoom;
-        if (zoom) {
-            recalculateZoomedDimensions();
-        }
-    }
-
-    function recalculateZoomedDimensions() {
-        const contentAspectRatio = content.width / content.height;
-        let imageWidth = Math.max(400, content.width);
-        let imageHeight = Math.max(400, content.height);
-        if (landscape) {
-            imageWidth = Math.min(window.innerWidth, imageWidth);
-            imageHeight = imageWidth / contentAspectRatio;
-            if (imageHeight > window.innerHeight) {
-                imageHeight = window.innerHeight;
-                imageWidth = imageHeight * contentAspectRatio;
-            }
-        } else {
-            imageHeight = Math.min(window.innerHeight, imageHeight);
-            imageWidth = imageHeight * contentAspectRatio;
-            if (imageWidth > window.innerWidth) {
-                imageWidth = window.innerWidth;
-                imageHeight = imageWidth / contentAspectRatio;
-            }
-        }
-        zoomedWidth = imageWidth;
-        zoomedHeight = imageHeight;
-    }
-    let normalised = $derived(normaliseContent(content));
-    let hidden = $state(false);
-    $effect(() => {
-        hidden = $lowBandwidth && !draft;
-    });
-    let zoomable = $derived(!draft && !reply && !pinned);
-
-    function onError() {
-        if (imgElement) {
-            imgElement.src = normalised.fallback;
-        }
-    }
-</script>
-
-<svelte:window
-    onresize={recalculateZoomedDimensions}
-    onorientationchange={recalculateZoomedDimensions} />
-
-{#if normalised.url !== undefined}
-    <div class="img-wrapper">
-        {#if hidden}
-            <div class="mask">
-                {#if !reply && !draft}
-                    <div class="reveal">
-                        <Button onClick={() => (hidden = false)}
-                            ><Translatable resourceKey={i18nKey(normalised.loadMsg)} /></Button>
-                    </div>
-                {/if}
-            </div>
-        {/if}
-        <img
-            bind:this={imgElement}
-            onclick={onClick}
-            ondblclick={onDoubleClick}
-            onerror={onError}
-            class="unzoomed"
-            class:landscape
-            class:fill
-            class:withCaption
-            class:draft
-            class:reply
-            class:zoomable={zoomable && !hidden}
-            class:rtl={$rtlStore}
-            style={height !== undefined
-                ? `height: ${height}px`
-                : draft || reply || pinned
-                  ? undefined
-                  : reservedMediaStyle(content.width, content.height)}
-            src={intersecting && !hidden ? normalised.url : normalised.fallback}
-            alt={normalised.caption} />
-
-        {#if zoomable && !hidden}
-            <div class="expand" class:rtl={$rtlStore} class:zoomed={zoom} onclick={toggleZoom}>
-                <ArrowExpand size={"1em"} color={"#fff"} />
-            </div>
-        {/if}
-    </div>
-{/if}
-
-<ContentCaption caption={normalised.caption} {edited} {blockLevelMarkdown} />
-
-{#if zoomable && zoom}
-    <Overlay onClose={() => (zoom = false)} dismissible alignBottomOnMobile={false}>
-        <ModalContent hideHeader hideFooter fill fitToContent fixedWidth={false}>
-            {#snippet body()}
-                <span class="body">
-                    <img
-                        class="zoomed"
-                        class:landscape
-                        width={zoomedWidth}
-                        height={zoomedHeight}
-                        onclick={onClick}
-                        ondblclick={onDoubleClick}
-                        onerror={onError}
-                        src={normalised.url}
-                        alt={normalised.caption} />
-                    <div
-                        class="expand"
-                        class:rtl={$rtlStore}
-                        class:zoomed={zoom}
-                        onclick={toggleZoom}>
-                        <ArrowCollapse size={"1em"} color={"#fff"} />
-                    </div>
-                </span>
-            {/snippet}
-        </ModalContent>
-    </Overlay>
-{/if}
-
-<style lang="scss">
-    $radius: $sp3;
-
-    .img-wrapper {
-        position: relative;
-    }
-
-    .mask {
-        position: absolute;
-        top: 0;
-        left: 0;
-        height: 100%;
-        width: 100%;
-        backdrop-filter: blur(10px);
-        -webkit-backdrop-filter: blur(10px);
-        background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5));
-    }
-
-    .reveal {
-        position: absolute;
-        top: calc(50% - 20px);
-        width: 100%;
-        text-align: center;
-    }
-
-    .body {
-        display: flex;
-        position: relative;
-    }
-
-    .expand {
-        border-radius: 0 $radius 0 $radius;
-
-        cursor: zoom-in;
-        &.zoomed {
-            cursor: zoom-out;
-            border-bottom-left-radius: var(--modal-rd);
-        }
-
-        &.rtl {
-            right: 0;
-            left: unset;
-            border-radius: $radius 0 $radius 0;
-            &.zoomed {
-                border-bottom-right-radius: var(--modal-rd);
-            }
-        }
-
-        position: absolute;
-        padding: $sp2 $sp4;
-        bottom: 0;
-        left: 0;
-        background-color: rgba(0, 0, 0, 0.3);
-        color: #fff;
-    }
-
-    img.zoomable.unzoomed {
-        cursor: zoom-in;
-    }
-
-    img.zoomed {
-        border-radius: var(--modal-rd);
-    }
-
-    img.unzoomed {
-        width: 100%;
-        display: block;
-
-        &:not(.landscape) {
-            min-height: 90px;
-            min-width: 0px;
-        }
-
-        &:not(.fill) {
-            border-radius: $radius;
-        }
-
-        &.withCaption {
-            margin-bottom: $sp2;
-        }
-
-        &.draft {
-            max-width: calc(var(--vh, 1vh) * 50);
-            max-height: none;
-            height: auto;
-        }
-
-        &:not(.landscape).draft {
-            max-width: none;
-            max-height: calc(var(--vh, 1vh) * 50);
-            width: auto;
-            width: -webkit-fill-available;
-            height: 100%;
-        }
-
-        &.reply {
-            max-width: 90px;
-            max-height: none;
-            height: auto;
-            float: right;
-            margin-left: $sp3;
-            margin-right: 0;
-        }
-
-        &.rtl.reply {
-            float: left;
-            margin-left: 0;
-            margin-right: $sp3;
-        }
-
-        &:not(.landscape).reply {
-            max-width: none;
-            max-height: 90px;
-            width: auto;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/InitialChatMessage.svelte b/frontend/app/src/components/home/InitialChatMessage.svelte
deleted file mode 100644
index cc79500e3a..0000000000
--- a/frontend/app/src/components/home/InitialChatMessage.svelte
+++ /dev/null
@@ -1,136 +0,0 @@
-<script lang="ts">
-    import {
-        allUsersStore,
-        AvatarSize,
-        botState,
-        type ChatSummary,
-        type CommandDefinition,
-        directChatBotsStore,
-        emptyGrantedBotPermissions,
-        type GrantedBotPermissions,
-        isProposalGroupStore,
-        type OpenChat,
-        type ResourceKey,
-        selectedCommunitySummaryStore,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import Avatar from "../Avatar.svelte";
-    import BotCommands from "../bots/BotCommands.svelte";
-    import WithVerifiedBadge from "../icons/WithVerifiedBadge.svelte";
-    import ProposalBot from "@shared_components/ProposalBot.svelte";
-    import Robot from "@shared_components/Robot.svelte";
-    import Translatable from "../Translatable.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    type BotState = {
-        commands: CommandDefinition[];
-        grantedPermissions: GrantedBotPermissions;
-    };
-
-    type State = {
-        title: ResourceKey;
-        verified: boolean;
-        description?: string;
-        avatarUrl: string;
-        subtitle?: ResourceKey;
-        bot?: BotState;
-    };
-
-    interface Props {
-        chat: ChatSummary;
-    }
-
-    let { chat }: Props = $props();
-
-    let state = $derived.by<State>(() => {
-        switch (chat.kind) {
-            case "direct_chat":
-                const them = $allUsersStore.get(chat.them.userId);
-                const s: State = {
-                    title: i18nKey(client.displayName(them)),
-                    verified: false,
-                    avatarUrl: client.userAvatarUrl($allUsersStore.get(chat.them.userId)),
-                };
-                const bot = botState.externalBots.get(chat.them.userId);
-                const perm =
-                    $directChatBotsStore.get(chat.them.userId) ?? emptyGrantedBotPermissions();
-                return bot === undefined
-                    ? s
-                    : {
-                          ...s,
-                          description: bot.definition.description,
-                          bot: {
-                              commands: bot.definition.commands,
-                              grantedPermissions: perm,
-                          },
-                      };
-            default:
-                return {
-                    title: i18nKey("group.welcome", { groupName: chat.name }),
-                    verified: chat.kind === "group_chat" ? chat.verified : false,
-                    description: chat.description,
-                    avatarUrl: client.groupAvatarUrl(chat, $selectedCommunitySummaryStore),
-                    subtitle: i18nKey(
-                        chat.public ? "thisIsPublicGroupWithN" : "thisIsPrivateGroupWithN",
-                        { number: chat.memberCount },
-                        chat.level,
-                        true,
-                    ),
-                    bot: undefined,
-                };
-        }
-    });
-</script>
-
-<div class="container">
-    {#if $isProposalGroupStore}
-        <ProposalBot />
-    {:else if chat.kind === "direct_chat" && client.isOpenChatBot(chat.them.userId)}
-        <Robot />
-    {:else}
-        <WithVerifiedBadge verified={state.verified} size={"small"}>
-            <h4 class="welcome">
-                <Translatable resourceKey={state.title} />
-            </h4>
-        </WithVerifiedBadge>
-        <div class="pop">
-            <Avatar url={state.avatarUrl} size={AvatarSize.Large} />
-        </div>
-        {#if state.description && state.description.length > 0}
-            <Markdown inline={false} text={state.description} />
-        {/if}
-        {#if state.bot !== undefined}
-            <BotCommands centered {...state.bot} />
-        {/if}
-        {#if state.subtitle}
-            <Translatable resourceKey={state.subtitle} />
-        {/if}
-    {/if}
-</div>
-
-<style lang="scss">
-    .container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: $sp4;
-        margin: $sp4 auto;
-        text-align: center;
-        background-color: var(--timeline-bg);
-        color: var(--timeline-txt);
-        @include font(book, normal, fs-70);
-        max-width: toRem(400);
-    }
-
-    .welcome {
-        @include font(bold, normal, fs-120);
-        color: var(--txt);
-    }
-
-    .pop {
-        @include pop(400ms);
-    }
-</style>
diff --git a/frontend/app/src/components/home/LeftPanel.svelte b/frontend/app/src/components/home/LeftPanel.svelte
deleted file mode 100644
index 6388a96783..0000000000
--- a/frontend/app/src/components/home/LeftPanel.svelte
+++ /dev/null
@@ -1,72 +0,0 @@
-<script lang="ts">
-    import { activityFeedShowing, showLeft, showNav } from "@client";
-    import { rtlStore } from "../../stores/rtl";
-    import { currentTheme } from "../../theme/themes";
-    import ActivityFeed from "./activity/ActivityFeed.svelte";
-    import ChatList from "./ChatList.svelte";
-</script>
-
-<section
-    class:visible={$showLeft}
-    class:offset={$showNav}
-    class:rtl={$rtlStore}
-    class:halloween={$currentTheme.name === "halloween"}>
-    <div class="chat-list">
-        {#if $activityFeedShowing}
-            <ActivityFeed />
-        {:else}
-            <ChatList />
-        {/if}
-    </div>
-</section>
-
-<style lang="scss">
-    .chat-list {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-    }
-
-    section {
-        overflow: auto;
-        overflow-x: hidden;
-        max-width: 500px;
-        min-width: 300px;
-        flex: 7;
-        position: relative;
-        border-right: var(--bw) solid var(--bd);
-        background: var(--panel-left-bg);
-
-        &.offset {
-            margin-inline-start: toRem(80);
-            @include mobile() {
-                margin-inline-start: toRem(60);
-            }
-        }
-
-        &.rtl {
-            border-right: none;
-            border-left: var(--bw) solid var(--bd);
-        }
-
-        @include mobile() {
-            width: 100%;
-            max-width: unset;
-            min-width: unset;
-            padding: 0;
-            flex: auto;
-            border-right: none;
-        }
-
-        &.halloween::after {
-            @include cobweb();
-            bottom: 0;
-            right: 0;
-            transform: scaleY(-1);
-        }
-
-        &:not(.visible) {
-            display: none;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/MembersChangedEvent.svelte b/frontend/app/src/components/home/MembersChangedEvent.svelte
deleted file mode 100644
index bc839ac598..0000000000
--- a/frontend/app/src/components/home/MembersChangedEvent.svelte
+++ /dev/null
@@ -1,54 +0,0 @@
-<script lang="ts">
-    import type { Level, OpenChat, UserSummary } from "@client";
-    import { allUsersStore } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { i18nKey, interpolate } from "../../i18n/i18n";
-    import { buildDisplayName } from "../../utils/user";
-    import NonMessageEvent from "./NonMessageEvent.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        user: UserSummary | undefined;
-        changedBy: string;
-        changed: string[];
-        timestamp: bigint;
-        resourceKey: string;
-        level: Level;
-    }
-
-    let { user, changedBy, changed, timestamp, resourceKey, level }: Props = $props();
-
-    let me = $derived(changedBy === user?.userId);
-    let changedByStr = $derived(
-        `**${buildDisplayName($allUsersStore, changedBy, me ? "me" : "user")}**`,
-    );
-    let members = $derived(
-        client.getMembersString(
-            user!,
-            $allUsersStore,
-            changed,
-            $_("unknownUser"),
-            $_("you"),
-            user ? client.compareIsNotYouThenUsername(user.userId) : client.compareUsername,
-        ),
-    );
-
-    let text = $derived(
-        interpolate(
-            $_,
-            i18nKey(
-                resourceKey,
-                {
-                    changed: members,
-                    changedBy: changedByStr,
-                },
-                level,
-                true,
-            ),
-        ),
-    );
-</script>
-
-<NonMessageEvent {text} {timestamp} />
diff --git a/frontend/app/src/components/home/MemeBuilder.svelte b/frontend/app/src/components/home/MemeBuilder.svelte
deleted file mode 100644
index 2737291b6d..0000000000
--- a/frontend/app/src/components/home/MemeBuilder.svelte
+++ /dev/null
@@ -1,135 +0,0 @@
-<script lang="ts">
-    import {
-        iconSize,
-        mobileWidth,
-        type MemeFighterContent as MemeFighterContentType,
-    } from "@client";
-    import { tick } from "svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { currentTheme } from "../../theme/themes";
-    import Button from "../Button.svelte";
-    import ButtonGroup from "../ButtonGroup.svelte";
-    import ModalContent from "../ModalContent.svelte";
-    import Overlay from "../Overlay.svelte";
-    import Translatable from "../Translatable.svelte";
-    import MemeFighter from "../icons/MemeFighter.svelte";
-
-    interface Props {
-        open: boolean;
-        width?: number;
-        height?: number;
-        onSend: (content: MemeFighterContentType) => void;
-    }
-
-    let { open = $bindable(), width = 500, height = 400, onSend }: Props = $props();
-
-    let memeUrl = $state(undefined as string | undefined);
-    let iframe: HTMLIFrameElement;
-    let img: HTMLImageElement | undefined = $state();
-    let placeholder = "/assets/memefighter.svg";
-
-    export function reset() {
-        memeUrl = undefined;
-        tick().then(async () => {
-            if (iframe) {
-                const { start } = await import("@memefighter/maker-core");
-                start({
-                    iframe,
-                    styleVariables,
-                    skipInsertButton: true,
-                }).then(onMemeCreated);
-            }
-        });
-    }
-
-    const styleVariables = {
-        "--background-color": "#1b1c21",
-        "--foreground-color": $currentTheme.txt,
-        "--button-color": $currentTheme.button.bg,
-    };
-
-    function send() {
-        if (memeUrl !== undefined && img !== undefined) {
-            const rect = img.getBoundingClientRect();
-            const content: MemeFighterContentType = {
-                kind: "meme_fighter_content",
-                url: memeUrl,
-                width: rect.width,
-                height: rect.height,
-            };
-            onSend(content);
-            open = false;
-        }
-    }
-
-    function close() {
-        open = false;
-    }
-
-    function onMemeCreated(url: string) {
-        memeUrl = url;
-    }
-
-    function error() {
-        if (img) {
-            img.src = placeholder;
-        }
-    }
-</script>
-
-{#if open}
-    <Overlay dismissible onClose={close}>
-        <ModalContent fill closeIcon onClose={close}>
-            {#snippet header()}
-                <div class="header">
-                    <MemeFighter size={$iconSize} color={"var(--icon-txt)"} />
-                    <div class="title">Meme Fighter</div>
-                </div>
-            {/snippet}
-            {#snippet body()}
-                <div class="meme-body">
-                    {#if memeUrl}
-                        <img bind:this={img} class="meme" src={memeUrl} onerror={error} />
-                    {:else}
-                        <iframe
-                            bind:this={iframe}
-                            {width}
-                            {height}
-                            style="border: none; max-width: 100%;"></iframe>
-                    {/if}
-                </div>
-            {/snippet}
-            {#snippet footer()}
-                <span class="footer">
-                    <ButtonGroup align={$mobileWidth ? "center" : "end"}>
-                        <Button tiny secondary onClick={reset}
-                            ><Translatable resourceKey={i18nKey("reset")} /></Button>
-                        <Button tiny secondary onClick={close}
-                            ><Translatable resourceKey={i18nKey("cancel")} /></Button>
-                        <Button tiny disabled={memeUrl === undefined} onClick={send}
-                            ><Translatable resourceKey={i18nKey("send")} /></Button>
-                    </ButtonGroup>
-                </span>
-            {/snippet}
-        </ModalContent>
-    </Overlay>
-{/if}
-
-<style lang="scss">
-    .header {
-        display: flex;
-        gap: $sp4;
-        align-items: center;
-    }
-
-    .meme {
-        width: 100%;
-    }
-
-    .meme-body {
-        min-height: 400px;
-        background-color: #1b1c21;
-        padding: $sp4 $sp5;
-        text-align: center;
-    }
-</style>
diff --git a/frontend/app/src/components/home/MentionPicker.svelte b/frontend/app/src/components/home/MentionPicker.svelte
deleted file mode 100644
index 454ae6cf61..0000000000
--- a/frontend/app/src/components/home/MentionPicker.svelte
+++ /dev/null
@@ -1,282 +0,0 @@
-<script lang="ts">
-    import VirtualList from "@shared_components/VirtualList.svelte";
-    import type { OpenChat, UserOrUserGroup } from "@client";
-    import {
-        allUsersStore,
-        AvatarSize,
-        currentUserIdStore,
-        iconSize,
-        mobileWidth,
-        selectedCommunityMembersStore,
-    } from "@client";
-    import { getContext, onMount } from "svelte";
-    import AccountMultiple from "svelte-material-icons/AccountMultiple.svelte";
-    import Avatar from "../Avatar.svelte";
-    import Menu from "../Menu.svelte";
-    import MenuItem from "../MenuItem.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        prefix: string | undefined;
-        offset: number;
-        direction?: "up" | "down";
-        border?: boolean;
-        mentionSelf?: boolean;
-        supportsUserGroups?: boolean;
-        usersOnly?: boolean;
-        inline?: boolean;
-        onMention: (user: UserOrUserGroup) => void;
-        onClose: () => void;
-    }
-
-    let {
-        prefix,
-        offset,
-        direction = "up",
-        border = false,
-        mentionSelf = false,
-        supportsUserGroups = false,
-        usersOnly = false,
-        inline = false,
-        onClose,
-        onMention,
-    }: Props = $props();
-
-    let index = $state(0);
-    let usersAndGroups: UserOrUserGroup[] = $state([]);
-
-    onMount(() => {
-        usersAndGroups = Object.values(client.getUserLookupForMentions()).sort(
-            (a: UserOrUserGroup, b: UserOrUserGroup) => {
-                const order = { everyone: 1, user_group: 2, user: 3, bot: 4 };
-                return order[a.kind] - order[b.kind];
-            },
-        );
-    });
-
-    function mention(userOrGroup: UserOrUserGroup) {
-        onMention($state.snapshot(userOrGroup));
-    }
-
-    function onKeyDown(ev: KeyboardEvent): void {
-        switch (ev.key) {
-            case "ArrowDown":
-                index = (index + 1) % filtered.length;
-                ev.preventDefault();
-                ev.stopPropagation();
-                break;
-            case "ArrowUp":
-                index = index === 0 ? filtered.length - 1 : index - 1;
-                ev.preventDefault();
-                ev.stopPropagation();
-                break;
-            case "Escape":
-                onClose();
-                ev.preventDefault();
-                ev.stopPropagation();
-                break;
-            case "Enter":
-                const userOrGroup = filtered[index];
-                if (userOrGroup) {
-                    mention(userOrGroup);
-                }
-                ev.preventDefault();
-                ev.stopPropagation();
-                break;
-        }
-    }
-
-    function compareMatchNames(a: string, b: string): number {
-        // Order by length, then alphabetically
-        if (a === b) return 0;
-        if (a.length === b.length) {
-            return a < b ? -1 : 1;
-        }
-        return a.length < b.length ? -1 : 1;
-    }
-    let itemHeight = $derived($mobileWidth ? 53 : 55);
-    let borderWidth = $derived(direction === "up" ? 2 : 3);
-    let maxHeight = $derived(
-        direction === "down" ? `${3.2 * itemHeight + borderWidth}px` : "calc(var(--vh, 1vh) * 50)",
-    );
-    let prefixLower = $derived(prefix?.toLowerCase());
-    let filtered = $derived(
-        usersAndGroups
-            .filter((userOrGroup) => {
-                switch (userOrGroup.kind) {
-                    case "user_group":
-                        return (
-                            !usersOnly &&
-                            (prefixLower === undefined ||
-                                (supportsUserGroups &&
-                                    userOrGroup.name.toLowerCase().startsWith(prefixLower)))
-                        );
-                    case "everyone": {
-                        return (
-                            !usersOnly &&
-                            (prefixLower === undefined || userOrGroup.kind.startsWith(prefixLower))
-                        );
-                    }
-                    default:
-                        return (
-                            (mentionSelf || userOrGroup.userId !== $currentUserIdStore) &&
-                            (prefixLower === undefined ||
-                                userOrGroup.username.toLowerCase().startsWith(prefixLower) ||
-                                userOrGroup.displayName?.toLowerCase().startsWith(prefixLower))
-                        );
-                }
-            })
-            .sort((a, b) => {
-                // 'everyone' first, then user groups, then users
-                if (a.kind === "everyone") return -1;
-                if (b.kind === "everyone") return 1;
-
-                if (a.kind === "user_group" && b.kind === "user_group") {
-                    return compareMatchNames(a.name, b.name);
-                }
-                if (a.kind === "user" && b.kind === "user") {
-                    return compareMatchNames(a.username, b.username);
-                }
-                return a.kind === "user_group" ? -1 : 1;
-            }),
-    );
-    let style = $derived(
-        direction === "up"
-            ? `bottom: ${offset}px; height: ${
-                  filtered.length * itemHeight + borderWidth
-              }px; max-height: ${maxHeight}`
-            : `top: ${offset}px; height: ${
-                  filtered.length * itemHeight + borderWidth
-              }px; max-height: ${maxHeight}`,
-    );
-
-    function userOrGroupKey(u: UserOrUserGroup): string {
-        switch (u.kind) {
-            case "user_group":
-                return u.id.toString();
-            case "everyone":
-                return "everyone";
-            default:
-                return u.userId;
-        }
-    }
-</script>
-
-{#if filtered.length > 0}
-    <div
-        class="mention-picker"
-        class:up={direction === "up"}
-        class:down={direction === "down"}
-        class:inline
-        class:border
-        {style}>
-        <Menu fit>
-            <VirtualList keyFn={userOrGroupKey} items={filtered}>
-                {#snippet children(item, itemIndex)}
-                    <MenuItem selected={itemIndex === index} onclick={() => mention(item)}>
-                        {#snippet icon()}
-                            <div class="avatar">
-                                {#if item.kind === "user_group" || item.kind === "everyone"}
-                                    <div class="group-icon">
-                                        <AccountMultiple
-                                            color={"var(--menu-disabled-txt)"}
-                                            size={$iconSize} />
-                                    </div>
-                                {:else}
-                                    <Avatar
-                                        url={client.userAvatarUrl($allUsersStore.get(item.userId))}
-                                        userId={item.userId}
-                                        size={AvatarSize.Small} />
-                                {/if}
-                            </div>
-                        {/snippet}
-                        {#snippet text()}
-                            <div>
-                                {#if item.kind === "user_group"}
-                                    <span class="display-name">
-                                        {item.name}
-                                    </span>
-                                {:else if item.kind === "everyone"}
-                                    <span class="display-name">
-                                        {"everyone"}
-                                    </span>
-                                {:else}
-                                    <span class="display-name">
-                                        {client.getDisplayName(
-                                            item.userId,
-                                            $selectedCommunityMembersStore,
-                                        )}
-                                    </span>
-                                    <span class="username">
-                                        @{item.username}
-                                    </span>
-                                {/if}
-                            </div>
-                        {/snippet}
-                    </MenuItem>
-                {/snippet}
-            </VirtualList>
-        </Menu>
-    </div>
-{/if}
-
-<svelte:body onkeydown={onKeyDown} />
-
-<style lang="scss">
-    :global(.mention-picker .menu) {
-        box-shadow: none;
-        position: relative;
-        width: 100%;
-        height: 100%;
-        @include z-index("footer-overlay");
-    }
-
-    .mention-picker {
-        position: absolute;
-        max-height: calc(var(--vh, 1vh) * 50);
-        overflow: auto;
-        z-index: 10000;
-        left: 0;
-
-        &.up {
-            box-shadow: var(--menu-inverted-sh);
-        }
-
-        &.down {
-            box-shadow: var(--menu-sh);
-        }
-
-        &.inline {
-            position: relative;
-            box-shadow: none;
-        }
-
-        &.border {
-            border: 1px solid var(--bd);
-            border-top: none;
-        }
-
-        .display-name {
-            font-weight: 500;
-        }
-
-        .username {
-            font-weight: 200;
-            color: var(--menu-disabled-txt);
-        }
-    }
-    .avatar {
-        margin-right: $sp3;
-    }
-
-    .group-icon {
-        width: toRem(35);
-        height: toRem(35);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background-color: var(--menu-bg);
-        border-radius: 50%;
-    }
-</style>
diff --git a/frontend/app/src/components/home/MessageContentInitial.svelte b/frontend/app/src/components/home/MessageContentInitial.svelte
deleted file mode 100644
index 238137a3cf..0000000000
--- a/frontend/app/src/components/home/MessageContentInitial.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<script lang="ts">
-    import type { ResourceKey } from "@client";
-    import FancyLoader from "../icons/FancyLoader.svelte";
-    import Translatable from "../Translatable.svelte";
-
-    interface Props {
-        text: ResourceKey;
-        failed: boolean;
-    }
-
-    let { text, failed }: Props = $props();
-</script>
-
-<div class={"prize"}>
-    {#if !failed}
-        <div class="spinner">
-            <FancyLoader />
-        </div>
-    {/if}
-    <p><Translatable resourceKey={text} /></p>
-</div>
-
-<style lang="scss">
-    .prize {
-        padding: $sp5;
-        display: flex;
-        flex-direction: column;
-        gap: $sp6;
-    }
-    .spinner {
-        width: 100px;
-        margin: 0 auto;
-    }
-</style>
diff --git a/frontend/app/src/components/home/MessageEntry.svelte b/frontend/app/src/components/home/MessageEntry.svelte
deleted file mode 100644
index 97843385cb..0000000000
--- a/frontend/app/src/components/home/MessageEntry.svelte
+++ /dev/null
@@ -1,673 +0,0 @@
-<script lang="ts">
-    import RichTextEditor from "@shared_components/RichTextEditor.svelte";
-    import { trackedEffect } from "@src/utils/effects.svelte";
-    import type {
-        AttachmentContent,
-        BotActionScope,
-        ChatSummary,
-        EnhancedReplyContext,
-        EventWrapper,
-        ExternalBot,
-        Message,
-        MessageAction,
-        MessageContext,
-        MultiUserChat,
-        OpenChat,
-        SelectedEmoji,
-        User,
-    } from "@client";
-    import {
-        allUsersStore,
-        anonUserStore,
-        botState,
-        chatIdentifiersEqual,
-        currentUserIdStore,
-        directMessageCommandInstance,
-        iconSize,
-        localUpdates,
-        messageContextsEqual,
-        random64,
-        screenWidth,
-        ScreenWidth,
-        selectedChatMembersStore,
-        selectedCommunitySummaryStore,
-        selectedCommunityUserGroupsStore,
-        throttleDeadline,
-        userGroupMentionRegex,
-        userIdMentionRegex,
-    } from "@client";
-    import { getContext, tick } from "svelte";
-    import { _ } from "svelte-i18n";
-    import Alert from "svelte-material-icons/Alert.svelte";
-    import Close from "svelte-material-icons/Close.svelte";
-    import ContentSaveEditOutline from "svelte-material-icons/ContentSaveMoveOutline.svelte";
-    import Send from "svelte-material-icons/Send.svelte";
-    import { i18nKey, interpolate } from "../../i18n/i18n";
-    import { enterSend } from "../../stores/settings";
-    import { snowing } from "../../stores/snow";
-    import AlertBoxModal from "../AlertBoxModal.svelte";
-    import CommandBuilder from "../bots/CommandInstanceBuilder.svelte";
-    import CommandSelector from "../bots/CommandSelector.svelte";
-    import HoverIcon from "../HoverIcon.svelte";
-    import Progress from "../Progress.svelte";
-    import Translatable from "../Translatable.svelte";
-    import AudioAttacher from "./AudioAttacher.svelte";
-    import EmojiAutocompleter from "./EmojiAutocompleter.svelte";
-    import MentionPicker from "./MentionPicker.svelte";
-    import MessageActions from "./MessageActions.svelte";
-    import PreviewFooter from "./PreviewFooter.svelte";
-    import ThrottleCountdown from "./ThrottleCountdown.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        chat: ChatSummary;
-        blocked: boolean;
-        preview: boolean;
-        lapsed: boolean;
-        messageAction?: MessageAction;
-        joining: MultiUserChat | undefined;
-        attachment: AttachmentContent | undefined;
-        editingEvent: EventWrapper<Message> | undefined;
-        replyingTo: EnhancedReplyContext | undefined;
-        textContent: string | undefined;
-        mode?: "thread" | "message";
-        externalContent: boolean;
-        messageContext: MessageContext;
-        onFileSelected: (content: AttachmentContent) => void;
-        onPaste: (e: ClipboardEvent) => void;
-        onSetTextContent: (txt?: string) => void;
-        onStartTyping: () => void;
-        onStopTyping: () => void;
-        onCancelEdit: () => void;
-        onSendMessage: (args: [string | undefined, User[], boolean]) => void;
-        onClearAttachment: () => void;
-        onTokenTransfer: (args: { ledger?: string; amount?: bigint }) => void;
-        onCreatePrizeMessage?: () => void;
-        onCreateP2PSwapMessage: () => void;
-        onCreatePoll: () => void;
-        onAttachGif: (search: string) => void;
-        onMakeMeme: () => void;
-    }
-
-    let {
-        chat,
-        blocked,
-        preview,
-        lapsed,
-        messageAction = $bindable(undefined),
-        joining,
-        attachment,
-        editingEvent,
-        replyingTo,
-        textContent,
-        mode = "message",
-        externalContent,
-        messageContext,
-        onFileSelected,
-        onPaste,
-        onSetTextContent,
-        onStartTyping,
-        onStopTyping,
-        onCancelEdit,
-        onSendMessage,
-        onClearAttachment,
-        onTokenTransfer,
-        onCreatePrizeMessage,
-        onCreateP2PSwapMessage,
-        onCreatePoll,
-        onAttachGif,
-        onMakeMeme,
-    }: Props = $props();
-
-    const USER_TYPING_EVENT_MIN_INTERVAL_MS = 1000; // 1 second
-    const MARK_TYPING_STOPPED_INTERVAL_MS = 5000; // 5 seconds
-
-    let editor = $state<RichTextEditor>();
-    let editorEmpty = $state(true);
-
-    // let inp: HTMLDivElement | undefined = $state();
-    let audioMimeType = client.audioRecordingMimeType();
-    let recording: boolean = $state(false);
-    let percentRecorded: number = $state(0);
-    let previousEditingEvent: EventWrapper<Message> | undefined = $state();
-    let lastTypingUpdate: number = 0;
-    let typingTimer: number | undefined = undefined;
-    let audioSupported: boolean = $state("mediaDevices" in navigator);
-    let showCommandSelector: boolean = $state(false);
-    let messageEntryHeight: number = $state(0);
-    let messageActions: MessageActions | undefined = $state();
-    let previousChatId = $state(chat.id);
-    let containsMarkdown = $state(false);
-    let showDirectBotChatWarning = $state(false);
-    let commandSent = false;
-
-    // Update this to force a new textbox instance to be created
-    let textboxId = $state(Symbol());
-
-    export function insertEmoji(emoji: SelectedEmoji) {
-        editor?.insertEmoji(emoji);
-    }
-
-    function onInput() {
-        const inputContent = editor?.getMarkdown() ?? "";
-        onSetTextContent(inputContent.trim().length === 0 ? undefined : inputContent);
-        triggerCommandSelector(inputContent);
-        triggerTypingTimer();
-        containsMarkdown = detectMarkdown(inputContent);
-    }
-
-    function triggerCommandSelector(inputContent: string | null): void {
-        const commandMatch = inputContent?.match(/^\/.*/);
-        if (commandMatch) {
-            showCommandSelector = true;
-            botState.prefix = commandMatch[0];
-        } else {
-            showCommandSelector = false;
-            botState.cancel();
-        }
-    }
-
-    function cancelCommandSelector(sent: boolean) {
-        commandSent = sent;
-        showCommandSelector = false;
-        botState.cancel();
-        if (sent) {
-            onSetTextContent();
-        }
-    }
-
-    function triggerTypingTimer() {
-        requestAnimationFrame(() => {
-            const now = Date.now();
-            if (now - lastTypingUpdate > USER_TYPING_EVENT_MIN_INTERVAL_MS) {
-                lastTypingUpdate = now;
-                onStartTyping();
-            }
-            if (typingTimer !== undefined) {
-                window.clearTimeout(typingTimer);
-            }
-
-            typingTimer = window.setTimeout(onStopTyping, MARK_TYPING_STOPPED_INTERVAL_MS);
-        });
-    }
-
-    function sendADirectBotMessage(bot: ExternalBot) {
-        const txt = editor?.getMarkdown() ?? "";
-        const userMessageId = random64();
-        const botMessageId = random64();
-
-        const commandInstance = directMessageCommandInstance(bot, txt);
-        if (commandInstance !== undefined) {
-            const scope: BotActionScope = {
-                kind: "chat_scope",
-                chatId: messageContext.chatId,
-                threadRootMessageIndex: messageContext.threadRootMessageIndex,
-                messageId: botMessageId,
-                userMessageId,
-            };
-            client.sendPlaceholderBotMessage(
-                scope,
-                undefined,
-                { kind: "text_content", text: txt },
-                userMessageId,
-                $currentUserIdStore,
-                containsMarkdown,
-            );
-            client.executeBotCommand(scope, commandInstance, true);
-            localUpdates.draftMessages.delete(messageContext);
-            afterSendMessage();
-        } else {
-            showDirectBotChatWarning = true;
-        }
-    }
-
-    function keyDown(e: KeyboardEvent) {
-        if (e.key === "Enter" && !e.shiftKey) {
-            if (directBot) {
-                if (!showCommandSelector && !messageIsEmpty) {
-                    sendADirectBotMessage(directBot);
-                } else if (!commandSent && botState.selectedCommand === undefined) {
-                    showDirectBotChatWarning = true;
-                }
-                e.preventDefault();
-            } else {
-                if (!showCommandSelector && $enterSend) {
-                    e.preventDefault();
-                    sendMessage();
-                }
-            }
-            commandSent = false;
-        }
-    }
-
-    function formatUserMentions(text: string): string {
-        return text.replace(userIdMentionRegex, (match, p1) => {
-            const u = $allUsersStore.get(p1);
-            if (u?.username !== undefined) {
-                const username = u.username;
-                return `@${username}`;
-            }
-            return match;
-        });
-    }
-
-    function formatUserGroupMentions(text: string): string {
-        return text.replace(userGroupMentionRegex, (match, p1) => {
-            const u = $selectedCommunityUserGroupsStore.get(Number(p1));
-            if (u !== undefined) {
-                return `@${u.name}`;
-            }
-            return match;
-        });
-    }
-
-    // replace anything of the form @username with @UserId(xyz) or @UserGroup(abc) where
-    // xyz is the userId or abc is the user group id
-    // if we can't find the user or user group just leave it as is
-    function expandMentions(text: string): [string | undefined, User[], boolean] {
-        let mentionedMap = new Map<string, User>();
-        let expandedText = text.replace(/@(\w+)/g, (match, p1) => {
-            const userOrGroup = client.lookupUserForMention(p1, false);
-            if (userOrGroup !== undefined) {
-                switch (userOrGroup.kind) {
-                    case "user_group":
-                        return `@UserGroup(${userOrGroup.id})`;
-                    case "everyone":
-                        return "@everyone";
-                    default:
-                        mentionedMap.set(userOrGroup.userId, userOrGroup);
-                        return `@UserId(${userOrGroup.userId})`;
-                }
-            } else {
-                return match;
-            }
-        });
-
-        let mentioned = Array.from(mentionedMap, ([_, user]) => user);
-
-        return [expandedText, mentioned, containsMarkdown];
-    }
-
-    function parseCommands(txt: string): boolean {
-        if (/snow|xmas|christmas|noel/.test(txt)) {
-            $snowing = true;
-        }
-        return false;
-    }
-
-    function sendMessage() {
-        if (showCommandSelector || messageIsEmpty) return;
-
-        const txt = editor?.getMarkdown() ?? "";
-
-        if (!parseCommands(txt)) {
-            const [text, mentioned, blockLevelMarkdown] = expandMentions(txt);
-            // Mentions picked from the mention picker are stored as nodes within the editor and
-            // are already in the `@UserId(xyz)` form, so `expandMentions` misses them - collect
-            // them from the editor itself
-            const mentionedUserIds = new Set(mentioned.map((u) => u.userId));
-            for (const user of editor?.getMentionedUsers() ?? []) {
-                if (!mentionedUserIds.has(user.userId)) {
-                    mentioned.push(user);
-                }
-            }
-            onSendMessage([text, mentioned, blockLevelMarkdown]);
-        }
-
-        afterSendMessage();
-    }
-
-    function afterSendMessage() {
-        editor?.clear();
-        onSetTextContent();
-
-        messageActions?.close();
-        onStopTyping();
-
-        // After sending a message we must force a new textbox instance to be created, otherwise on iPhone the
-        // predictive text doesn't notice the text has been cleared so the suggestions don't make sense.
-        textboxId = Symbol();
-        tick().then(() => editor?.focus());
-    }
-
-    function detectMarkdown(text: string | null) {
-        if (!text) return false;
-
-        // a few regexes to detect various block level markdown elements (possibly incomplete)
-        const headerRegex = /^(?:\#{1,6}\s+)/m;
-        const tableRegex = /(?:\|(?:[^\r\n\|\\]|\\.)*\|)+/;
-        const bulletedListRegex = /^(?:\s*[-\*+]\s+)/m;
-        const numberedListRegex = /^(?:\s*\d+\.\s+)/m;
-        const blockquoteRegex = /^(?:\s*>)/m;
-        const codeBlockRegex = /(?:^```[\s\S]*?^```)/m;
-        const regexList = [
-            headerRegex,
-            tableRegex,
-            bulletedListRegex,
-            numberedListRegex,
-            blockquoteRegex,
-            codeBlockRegex,
-        ];
-        const result = regexList.some((regex) => regex.test(text));
-        return result;
-    }
-    let directChatBotId = $derived(client.directChatWithBot(chat));
-    let directBot = $derived(
-        directChatBotId ? botState.externalBots.get(directChatBotId) : undefined,
-    );
-    let messageIsEmpty = $derived(
-        (textContent?.trim() ?? "").length === 0 && attachment === undefined,
-    );
-    let canSendAny = $derived(!$anonUserStore && client.canSendMessage(chat.id, mode));
-    let permittedMessages = $derived(client.permittedMessages(chat.id, mode));
-    let canEnterText = $derived(
-        (permittedMessages.get("text") ?? false) ||
-            editingEvent !== undefined ||
-            attachment !== undefined,
-    );
-
-    let excessiveLinks = $derived(client.extractEnabledLinks(textContent ?? "").length > 5);
-    let frozen = $derived(client.isChatOrCommunityFrozen(chat, $selectedCommunitySummaryStore));
-    $effect(() => {
-        if (editor) {
-            if (editingEvent && editingEvent.index !== previousEditingEvent?.index) {
-                if (editingEvent.event.content.kind === "text_content") {
-                    editor.setContent(
-                        formatUserGroupMentions(
-                            formatUserMentions(
-                                client.stripLinkDisabledMarker(editingEvent.event.content.text),
-                            ),
-                        ),
-                    );
-                } else if ("caption" in editingEvent.event.content) {
-                    editor.setContent(editingEvent.event.content.caption ?? "");
-                }
-                previousEditingEvent = editingEvent;
-                containsMarkdown = detectMarkdown(editor.getMarkdown());
-            } else {
-                const text = textContent ?? "";
-                // Only set the textbox text when required rather than every time, because doing so sets the focus back to
-                // the start of the textbox on some devices.
-                if (editor.getMarkdown() !== text) {
-                    editor.setContent(text);
-                    containsMarkdown = detectMarkdown(text);
-                }
-            }
-        }
-
-        if (editingEvent === undefined) {
-            previousEditingEvent = undefined;
-        }
-    });
-    trackedEffect("clear-message-actions", () => {
-        // If the chat has changed, close the emoji picker or file selector
-        if (!chatIdentifiersEqual(chat.id, previousChatId)) {
-            messageAction = undefined;
-            previousChatId = chat.id;
-        }
-    });
-    trackedEffect("attachment-focus", () => {
-        if (attachment !== undefined || replyingTo !== undefined) {
-            editor?.focus();
-        }
-    });
-    trackedEffect("screen-width-focus", () => {
-        if ($screenWidth === ScreenWidth.Large) {
-            editor?.focus();
-        }
-    });
-    let placeholder = $derived(
-        !canEnterText
-            ? i18nKey("sendTextDisabled")
-            : attachment !== undefined
-              ? i18nKey("enterCaption")
-              : directChatBotId
-                ? i18nKey("bots.direct.placeholder")
-                : i18nKey("enterMessage"),
-    );
-</script>
-
-{#if showDirectBotChatWarning}
-    <AlertBoxModal
-        onClose={() => (showDirectBotChatWarning = false)}
-        title={i18nKey("bots.direct.warningTitle")}
-        warning={i18nKey("bots.direct.warning")} />
-{/if}
-
-{#if botState.selectedCommand && messageContextsEqual(botState.showingBuilder, messageContext)}
-    <CommandBuilder
-        {messageContext}
-        onCommandSent={() => cancelCommandSelector(true)}
-        onCancel={() => cancelCommandSelector(false)}
-        command={botState.selectedCommand} />
-{/if}
-
-{#if showCommandSelector}
-    <CommandSelector
-        selectedBotId={directChatBotId}
-        {messageContext}
-        {mode}
-        onCommandSent={() => cancelCommandSelector(true)}
-        onNoMatches={() => cancelCommandSelector(false)}
-        onCancel={() => cancelCommandSelector(false)} />
-{/if}
-
-<div
-    class="message-entry"
-    class:editing={editingEvent !== undefined}
-    bind:clientHeight={messageEntryHeight}>
-    {#if frozen}
-        <div class="frozen">
-            <Translatable resourceKey={i18nKey("chatFrozen")} />
-        </div>
-    {:else if blocked}
-        <div class="blocked">
-            <Translatable resourceKey={i18nKey("userIsBlocked")} />
-        </div>
-    {:else if (preview || lapsed) && chat.kind !== "direct_chat"}
-        <PreviewFooter {lapsed} {joining} {chat} />
-    {:else if externalContent}
-        <div class="disclaimer">
-            <Alert size={$iconSize} color={"var(--warn"} />
-            <Translatable resourceKey={i18nKey("externalContent.disclaimer")} />
-        </div>
-    {:else if !canSendAny}
-        <div class="disabled">
-            <Translatable
-                resourceKey={i18nKey(
-                    $anonUserStore
-                        ? "sendMessageDisabledAnon"
-                        : mode === "thread"
-                          ? "readOnlyThread"
-                          : "readOnlyChat",
-                )} />
-        </div>
-    {:else if $throttleDeadline > 0}
-        <ThrottleCountdown deadline={$throttleDeadline} />
-    {:else}
-        {#if recording}
-            <div class="recording">
-                <Progress percent={percentRecorded} />
-            </div>
-        {:else if canEnterText}
-            {#key textboxId}
-                <div class="container">
-                    {#if excessiveLinks}
-                        <div class="note">{$_("excessiveLinksNote")}</div>
-                    {/if}
-
-                    <div class="textbox">
-                        <RichTextEditor
-                            bind:this={editor}
-                            bind:empty={editorEmpty}
-                            placeholder={interpolate($_, placeholder)}
-                            members={$selectedChatMembersStore}
-                            {onPaste}
-                            onKeydown={keyDown}
-                            oninput={onInput}>
-                            {#snippet mentionPicker(args)}
-                                <MentionPicker
-                                    supportsUserGroups
-                                    offset={messageEntryHeight}
-                                    onClose={args.onClose}
-                                    onMention={args.onMention}
-                                    prefix={args.query} />
-                            {/snippet}
-                            {#snippet emojiPicker(args)}
-                                <EmojiAutocompleter
-                                    offset={messageEntryHeight}
-                                    onClose={args.onClose}
-                                    onSelect={args.onSelect}
-                                    query={args.query} />
-                            {/snippet}
-                        </RichTextEditor>
-                    </div>
-                </div>
-            {/key}
-        {:else}
-            <div class="textbox light">
-                <Translatable resourceKey={placeholder} />
-            </div>
-        {/if}
-
-        {#if directChatBotId === undefined}
-            <div class="icons">
-                {#if editingEvent === undefined}
-                    {#if permittedMessages.get("audio") && messageIsEmpty && audioMimeType !== undefined && audioSupported}
-                        <div class="record">
-                            <AudioAttacher
-                                mimeType={audioMimeType}
-                                bind:percentRecorded
-                                bind:recording
-                                bind:supported={audioSupported}
-                                onAudioCaptured={onFileSelected} />
-                        </div>
-                    {:else if canEnterText}
-                        <!-- svelte-ignore a11y_no_static_element_interactions, a11y_click_events_have_key_events -->
-                        <div class="send" onclick={sendMessage}>
-                            <HoverIcon title={$_("sendMessage")}>
-                                <Send size={$iconSize} color={"var(--icon-txt)"} />
-                            </HoverIcon>
-                        </div>
-                    {/if}
-                    <!-- we might need this if we are editing too -->
-                    <MessageActions
-                        bind:this={messageActions}
-                        bind:messageAction
-                        {permittedMessages}
-                        {attachment}
-                        {mode}
-                        editing={editingEvent !== undefined}
-                        {onTokenTransfer}
-                        {onCreatePrizeMessage}
-                        {onCreateP2PSwapMessage}
-                        {onAttachGif}
-                        {onMakeMeme}
-                        {onCreatePoll}
-                        {onClearAttachment}
-                        {onFileSelected} />
-                {:else}
-                    <!-- svelte-ignore a11y_no_static_element_interactions, a11y_click_events_have_key_events -->
-                    <div class="send" onclick={sendMessage}>
-                        <HoverIcon>
-                            <ContentSaveEditOutline size={$iconSize} color={"var(--button-txt)"} />
-                        </HoverIcon>
-                    </div>
-                    <!-- svelte-ignore a11y_no_static_element_interactions, a11y_click_events_have_key_events -->
-                    <div class="send" onclick={onCancelEdit}>
-                        <HoverIcon>
-                            <Close size={$iconSize} color={"var(--button-txt)"} />
-                        </HoverIcon>
-                    </div>
-                {/if}
-            </div>
-        {/if}
-    {/if}
-</div>
-
-<style lang="scss">
-    .message-entry {
-        position: relative;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        background-color: var(--entry-bg);
-        padding: $sp3;
-        border-top: var(--bw) solid var(--bd);
-        min-height: toRem(60);
-
-        &.editing {
-            background: var(--button-bg);
-        }
-
-        .icons {
-            display: flex;
-            align-self: flex-end;
-        }
-    }
-    .send {
-        flex: 0 0 15px;
-    }
-
-    .container {
-        margin: 0 $sp3;
-        flex: 1;
-        position: relative;
-    }
-
-    .textbox {
-        padding: toRem(12) $sp4 $sp3 $sp4;
-        background-color: var(--entry-input-bg);
-        border-radius: var(--entry-input-rd);
-        outline: none;
-        border: 0;
-        max-height: calc(var(--vh, 1vh) * 50);
-        min-height: toRem(30);
-        overflow-x: hidden;
-        overflow-y: auto;
-        user-select: text;
-        // white-space: pre-wrap;
-        overflow-wrap: anywhere;
-        border: var(--bw) solid var(--entry-input-bd);
-        box-shadow: var(--entry-input-sh);
-
-        &.recording {
-            display: none;
-        }
-
-        &.light {
-            color: var(--txt-light);
-        }
-    }
-
-    .blocked,
-    .frozen,
-    .disabled {
-        height: 42px;
-        color: var(--txt);
-        @include font(book, normal, fs-100);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 100%;
-    }
-
-    .recording {
-        padding: 0 $sp3;
-        flex: auto;
-    }
-
-    .note {
-        @include font(book, normal, fs-70);
-        margin-bottom: $sp2;
-    }
-
-    .disclaimer {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 100%;
-        gap: $sp4;
-    }
-</style>
diff --git a/frontend/app/src/components/home/MessagePreview.svelte b/frontend/app/src/components/home/MessagePreview.svelte
deleted file mode 100644
index 59da50e7f6..0000000000
--- a/frontend/app/src/components/home/MessagePreview.svelte
+++ /dev/null
@@ -1,113 +0,0 @@
-<script lang="ts">
-    import {
-        allUsersStore,
-        AvatarSize,
-        currentUserIdStore,
-        OpenChat,
-        selectedChatWebhooksStore,
-        selectedCommunityMembersStore,
-        type RehydratedMessagePreview,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import Avatar from "../Avatar.svelte";
-    import ChatMessageContent from "./ChatMessageContent.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        preview: RehydratedMessagePreview;
-        intersecting: boolean;
-    }
-
-    const { preview, intersecting }: Props = $props();
-
-    let me = $derived(preview.message.sender === $currentUserIdStore);
-    let displayName = $derived(
-        me
-            ? client.toTitleCase($_("you"))
-            : client.getDisplayName(
-                  preview.message.sender,
-                  $selectedCommunityMembersStore,
-                  $selectedChatWebhooksStore,
-              ),
-    );
-</script>
-
-<a href={preview.url}>
-    <div
-        class="wrapper"
-        class:me
-        class:p2pSwap={preview.message.content.kind === "p2p_swap_content"}>
-        <div class="title">
-            <Avatar
-                url={client.userAvatarUrl($allUsersStore.get(preview.message.sender))}
-                userId={preview.message.sender}
-                size={AvatarSize.Tiny} />
-            <h4
-                class="username"
-                class:text-content={preview.message.content.kind === "text_content"}>
-                {displayName}
-            </h4>
-        </div>
-        <div class="inert">
-            <ChatMessageContent
-                {me}
-                readonly
-                messageContext={{
-                    chatId: preview.chatId,
-                    threadRootMessageIndex: preview.threadRootMessageIndex,
-                }}
-                {intersecting}
-                messageId={preview.message.messageId}
-                messageIndex={preview.message.messageIndex}
-                senderId={preview.message.sender}
-                edited={preview.message.edited}
-                fill={false}
-                failed={false}
-                blockLevelMarkdown
-                truncate
-                reply
-                content={preview.message.content}
-                ogPreviews={preview.message.ogPreviews} />
-        </div>
-    </div>
-</a>
-
-<style lang="scss">
-    .wrapper {
-        padding: $sp3;
-        border-radius: $sp3;
-        background-color: color-mix(in srgb, var(--currentChat-msg-bg), black 15%);
-        overflow: hidden;
-        @include nice-scrollbar();
-        max-height: 300px;
-        margin-bottom: $sp2;
-
-        &.me {
-            background-color: color-mix(in srgb, var(--currentChat-msg-me-bg), black 15%);
-        }
-
-        .inert {
-            pointer-events: none;
-        }
-
-        &:after {
-            content: "";
-            display: table;
-            clear: both;
-        }
-
-        &.p2pSwap {
-            max-width: 350px;
-        }
-    }
-
-    .title {
-        display: flex;
-        gap: $sp3;
-        > * {
-            flex: 1;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/MessageReminderContent.svelte b/frontend/app/src/components/home/MessageReminderContent.svelte
deleted file mode 100644
index 9c9426d983..0000000000
--- a/frontend/app/src/components/home/MessageReminderContent.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script lang="ts">
-    import type { MessageReminderContent } from "@client";
-    import ReminderNotes from "./ReminderNotes.svelte";
-    import Translatable from "../Translatable.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-
-    interface Props {
-        content: MessageReminderContent;
-    }
-
-    let { content }: Props = $props();
-</script>
-
-<div class="msg">
-    ⏰ <Translatable resourceKey={i18nKey("reminders.youAsked")} />
-</div>
-<ReminderNotes notes={content.notes} />
diff --git a/frontend/app/src/components/home/MessageReminderCreatedContent.svelte b/frontend/app/src/components/home/MessageReminderCreatedContent.svelte
deleted file mode 100644
index 462bed16eb..0000000000
--- a/frontend/app/src/components/home/MessageReminderCreatedContent.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script lang="ts">
-    import type { MessageReminderCreatedContent, OpenChat } from "@client";
-    import { getContext } from "svelte";
-    import ReminderNotes from "./ReminderNotes.svelte";
-    import Translatable from "../Translatable.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-
-    interface Props {
-        content: MessageReminderCreatedContent;
-    }
-
-    let { content }: Props = $props();
-    const client = getContext<OpenChat>("client");
-</script>
-
-<div class="msg">
-    ⏰ <Translatable resourceKey={i18nKey("reminders.remindAt", { datetime: "" })} />
-    <span class="datetime">{client.toDatetimeString(new Date(content.remindAt))}</span>
-</div>
-<ReminderNotes notes={content.notes} />
-
-<style lang="scss">
-    .datetime {
-        font-weight: 700;
-    }
-</style>
diff --git a/frontend/app/src/components/home/MiddlePanel.svelte b/frontend/app/src/components/home/MiddlePanel.svelte
deleted file mode 100644
index b4a812681e..0000000000
--- a/frontend/app/src/components/home/MiddlePanel.svelte
+++ /dev/null
@@ -1,178 +0,0 @@
-<script lang="ts">
-    import { trackedEffect } from "@src/utils/effects.svelte";
-    import {
-        botState,
-        chatIdentifiersEqual,
-        directChatBotsStore,
-        filteredProposalsStore,
-        rightPanelMode,
-        rightPanelWidth,
-        routeStore,
-        selectedChatIdStore,
-        selectedChatSummaryStore,
-        showLeft,
-        showMiddle,
-        showNav,
-        type ChatIdentifier,
-        type MultiUserChat,
-    } from "@client";
-    import { tick } from "svelte";
-    import { fade } from "svelte/transition";
-    import { activeVideoCall, type ActiveVideoCall } from "../../stores/video";
-    import { currentTheme } from "../../theme/themes";
-    import UninstalledDirectBot from "../bots/UninstalledDirectBot.svelte";
-    import Loading from "@shared_components/Loading.svelte";
-    import ExploreCommunities from "./communities/explore/Explore.svelte";
-    import CurrentChat from "./CurrentChat.svelte";
-    import NoChatSelected from "./NoChatSelected.svelte";
-    import RecommendedGroups from "./RecommendedGroups.svelte";
-
-    interface Props {
-        joining: MultiUserChat | undefined;
-    }
-
-    let { joining }: Props = $props();
-
-    let middlePanel: HTMLElement | undefined;
-
-    let botId = $derived.by(() => {
-        if ($selectedChatSummaryStore === undefined) return undefined;
-        if ($selectedChatSummaryStore.kind !== "direct_chat") return undefined;
-        return botState.externalBots.get($selectedChatSummaryStore.them.userId)?.id;
-    });
-
-    let uninstalledBotId = $derived.by(() => {
-        return botId !== undefined && $directChatBotsStore.get(botId) === undefined
-            ? botId
-            : undefined;
-    });
-
-    let installingBot = $state(false);
-    trackedEffect("installing-bot", () => {
-        if (uninstalledBotId !== undefined) {
-            installingBot = true;
-        }
-    });
-
-    function alignVideoCall(
-        call: ActiveVideoCall | undefined,
-        chatId: ChatIdentifier | undefined,
-        rightPanelWidth: number | undefined,
-        attempts: number = 0,
-    ) {
-        if (call && chatIdentifiersEqual(call.chatId, chatId) && middlePanel) {
-            const callContainer = document.getElementById("video-call-container");
-            const rect = middlePanel.getBoundingClientRect();
-            if (callContainer) {
-                if (call.view === "fullscreen") {
-                    let width = window.innerWidth;
-                    if (
-                        $rightPanelMode !== "floating" &&
-                        (call.threadOpen || call.participantsOpen)
-                    ) {
-                        width = width - (rightPanelWidth ?? 500);
-                    }
-                    callContainer.style.setProperty("left", `0px`);
-                    callContainer.style.setProperty("width", `${width}px`);
-                    callContainer.style.setProperty("top", `0px`);
-                    callContainer.style.setProperty("height", `${window.innerHeight}px`);
-                } else {
-                    callContainer.style.setProperty("left", `${rect.left}px`);
-                    callContainer.style.setProperty("width", `${rect.width}px`);
-                    callContainer.style.setProperty("top", `${rect.top}px`);
-                    callContainer.style.setProperty("height", `${rect.height}px`);
-                }
-            } else {
-                // hack: there is a race condition here and it's possible we don't find the container on the first try
-                if (attempts === 0) {
-                    tick().then(() => alignVideoCall(call, chatId, attempts + 1));
-                }
-            }
-        }
-    }
-
-    function resize() {
-        alignVideoCall($activeVideoCall, $selectedChatIdStore, $rightPanelWidth);
-    }
-    let noChat = $derived($routeStore.kind !== "global_chat_selected_route");
-    $effect(() => {
-        if (middlePanel) {
-            resize();
-        }
-    });
-</script>
-
-<svelte:window onresize={resize} onorientationchange={resize} />
-
-<section
-    bind:this={middlePanel}
-    class:visible={$showMiddle}
-    class:offset={$showNav && !$showLeft}
-    class:halloween={$currentTheme.name === "halloween"}>
-    {#if $routeStore.kind === "explore_groups_route"}
-        <RecommendedGroups {joining} />
-    {:else if $routeStore.kind === "communities_route"}
-        <ExploreCommunities />
-    {:else if $routeStore.kind === "admin_route"}
-        {#await import("./admin/Admin.svelte")}
-            <div class="loading">
-                <Loading />
-            </div>
-        {:then { default: Admin }}
-            <Admin />
-        {/await}
-    {:else if $selectedChatIdStore === undefined}
-        {#if noChat}
-            <div class="no-chat" in:fade>
-                <NoChatSelected />
-            </div>
-        {/if}
-    {:else if installingBot && botId && $selectedChatIdStore.kind === "direct_chat"}
-        <UninstalledDirectBot
-            onClose={() => (installingBot = false)}
-            chatId={$selectedChatIdStore}
-            {botId} />
-    {:else if $selectedChatSummaryStore !== undefined}
-        <CurrentChat
-            {joining}
-            chat={$selectedChatSummaryStore}
-            filteredProposals={$filteredProposalsStore} />
-    {/if}
-</section>
-
-<style lang="scss">
-    .no-chat {
-        height: 100%;
-    }
-
-    section {
-        min-width: 390px;
-        overflow: auto;
-        overflow-x: hidden;
-        flex: 13;
-        background: none;
-        padding: 0;
-
-        @include mobile() {
-            min-width: unset;
-        }
-
-        &.offset {
-            margin-inline-start: toRem(80);
-            @include mobile() {
-                margin-inline-start: toRem(60);
-            }
-        }
-
-        &.halloween::after {
-            @include cobweb();
-            bottom: 0;
-            right: 0;
-            transform: scaleY(-1);
-        }
-
-        &:not(.visible) {
-            display: none;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/NetworkSelector.svelte b/frontend/app/src/components/home/NetworkSelector.svelte
deleted file mode 100644
index a5b9617823..0000000000
--- a/frontend/app/src/components/home/NetworkSelector.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script lang="ts">
-    import { i18nKey } from "@i18n/i18n";
-    import MultiToggle from "../MultiToggle.svelte";
-    import Translatable from "../Translatable.svelte";
-
-    type Props = {
-        networks: string[];
-        selectedNetwork: string;
-    };
-
-    let { networks, selectedNetwork = $bindable() }: Props = $props();
-
-    const networkOptions = networks.map((n) => ({ id: n, label: n }));
-</script>
-
-<div class="network-selector">
-    <Translatable resourceKey={i18nKey("cryptoAccount.network")} />
-    <MultiToggle options={networkOptions} bind:selected={selectedNetwork} />
-</div>
-
-<style lang="scss">
-    .network-selector {
-        display: flex;
-        gap: $sp3;
-        margin-bottom: $sp4;
-        align-items: center;
-    }
-</style>
diff --git a/frontend/app/src/components/home/NoAccess.svelte b/frontend/app/src/components/home/NoAccess.svelte
deleted file mode 100644
index 5163a01087..0000000000
--- a/frontend/app/src/components/home/NoAccess.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<script lang="ts">
-    import ModalContent from "../ModalContent.svelte";
-    import { _ } from "svelte-i18n";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import Translatable from "../Translatable.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-
-    interface Props {
-        onClose: () => void;
-    }
-
-    let { onClose }: Props = $props();
-</script>
-
-<ModalContent {onClose}>
-    {#snippet header()}
-        <Translatable resourceKey={i18nKey("noAccess")} />
-    {/snippet}
-    {#snippet body()}
-        <Markdown text={$_("noAccessText")} />
-    {/snippet}
-</ModalContent>
diff --git a/frontend/app/src/components/home/NonMessageEvent.svelte b/frontend/app/src/components/home/NonMessageEvent.svelte
deleted file mode 100644
index c9069846be..0000000000
--- a/frontend/app/src/components/home/NonMessageEvent.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<script lang="ts">
-    import type { OpenChat } from "@client";
-    import { getContext } from "svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        text: string;
-        timestamp: bigint;
-    }
-
-    let { text, timestamp }: Props = $props();
-    let date = $derived(new Date(Number(timestamp)));
-</script>
-
-<div class="timeline-event">
-    <Markdown suppressLinks {text} />
-    <p class="timestamp">
-        {`${client.toLongDateString(date)} @ ${client.toShortTimeString(date)}`}
-    </p>
-</div>
-
-<style lang="scss">
-    .timeline-event {
-        padding: $sp2;
-        background-color: var(--timeline-bg);
-        margin: $sp4 auto;
-        text-align: center;
-        color: var(--timeline-txt);
-        @include font(book, normal, fs-70);
-    }
-    .timestamp {
-        @include font(light, normal, fs-70);
-    }
-</style>
diff --git a/frontend/app/src/components/home/NotificationsBar.svelte b/frontend/app/src/components/home/NotificationsBar.svelte
deleted file mode 100644
index aea0183146..0000000000
--- a/frontend/app/src/components/home/NotificationsBar.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<script lang="ts">
-    import type { OpenChat } from "@client";
-    import { anonUserStore, notificationStatus } from "@client";
-    import { getContext } from "svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import Button from "../Button.svelte";
-    import ButtonGroup from "../ButtonGroup.svelte";
-    import ModalContent from "../ModalContent.svelte";
-    import Overlay from "../Overlay.svelte";
-    import Translatable from "../Translatable.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    $inspect(`PUSH STATUS: ${$notificationStatus}`);
-</script>
-
-{#if !$anonUserStore && $notificationStatus === "prompt"}
-    <Overlay dismissible>
-        <ModalContent>
-            {#snippet header()}
-                <Translatable resourceKey={i18nKey("Notifications")} />
-            {/snippet}
-            {#snippet body()}
-                <Translatable resourceKey={i18nKey("enableNotifications")} />
-            {/snippet}
-            {#snippet footer()}
-                <ButtonGroup>
-                    <Button onClick={() => client.askForNotificationPermission()}
-                        ><Translatable resourceKey={i18nKey("yesPlease")} /></Button>
-                    <Button secondary onClick={() => client.setSoftDisabled(true)}
-                        ><Translatable resourceKey={i18nKey("noThanks")} /></Button>
-                </ButtonGroup>
-            {/snippet}
-        </ModalContent>
-    </Overlay>
-{/if}
diff --git a/frontend/app/src/components/home/P2PSwapContent.svelte b/frontend/app/src/components/home/P2PSwapContent.svelte
deleted file mode 100644
index 2447cf5606..0000000000
--- a/frontend/app/src/components/home/P2PSwapContent.svelte
+++ /dev/null
@@ -1,419 +0,0 @@
-<script lang="ts">
-    import type {
-        AcceptP2PSwapResponse,
-        CancelP2PSwapResponse,
-        MessageContext,
-        OpenChat,
-        P2PSwapContent,
-        ResourceKey,
-    } from "@client";
-    import {
-        cryptoLookup,
-        currentUserIdStore,
-        exchangeRatesLookupStore as exchangeRatesLookup,
-        isDiamondStore,
-        publish,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import Clock from "svelte-material-icons/Clock.svelte";
-    import SwapIcon from "svelte-material-icons/SwapHorizontal.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { pinNumberErrorMessageStore } from "../../stores/pinNumber";
-    import { rtlStore } from "../../stores/rtl";
-    import { now500 } from "../../stores/time";
-    import { toastStore } from "../../stores/toast";
-    import { calculateDollarAmount } from "../../utils/exchange";
-    import AreYouSure from "../AreYouSure.svelte";
-    import Button from "../Button.svelte";
-    import ButtonGroup from "../ButtonGroup.svelte";
-    import SpinningToken from "../icons/SpinningToken.svelte";
-    import Translatable from "../Translatable.svelte";
-    import AcceptP2PSwapModal from "./AcceptP2PSwapModal.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import P2PSwapProgress from "./P2PSwapProgress.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        senderId: string;
-        content: P2PSwapContent;
-        messageContext: MessageContext;
-        messageId: bigint;
-        me: boolean;
-        reply: boolean;
-        pinned: boolean;
-    }
-
-    let { senderId, content, messageContext, messageId, me, reply, pinned }: Props = $props();
-
-    let confirming = $state(false);
-    let showDetails = $state(false);
-
-    let fromDetails = $derived($cryptoLookup.get(content.token0.ledger));
-    let toDetails = $derived($cryptoLookup.get(content.token1.ledger));
-    let finished = $derived($now500 >= Number(content.expiresAt));
-    let timeRemaining = $derived(
-        finished
-            ? $_("p2pSwap.expired")
-            : client.formatTimeRemaining($now500, Number(content.expiresAt)),
-    );
-    let acceptedByYou = $derived(
-        (content.status.kind === "p2p_swap_reserved" &&
-            content.status.reservedBy === $currentUserIdStore) ||
-            ((content.status.kind === "p2p_swap_accepted" ||
-                content.status.kind === "p2p_swap_completed") &&
-                content.status.acceptedBy === $currentUserIdStore),
-    );
-
-    let fromAmount = $derived(client.formatTokens(content.token0Amount, content.token0.decimals));
-    let toAmount = $derived(client.formatTokens(content.token1Amount, content.token1.decimals));
-    let buttonDisabled = $derived(content.status.kind !== "p2p_swap_open" || reply || pinned);
-    let fromAmountInUsd = $derived(
-        fromDetails
-            ? calculateDollarAmount(
-                  content.token0Amount,
-                  $exchangeRatesLookup.get(fromDetails.symbol.toLowerCase())?.toUSD,
-                  fromDetails.decimals,
-              )
-            : "0",
-    );
-    let toAmountInUsd = $derived(
-        toDetails
-            ? calculateDollarAmount(
-                  content.token1Amount,
-                  $exchangeRatesLookup.get(toDetails.symbol.toLowerCase())?.toUSD,
-                  toDetails.decimals,
-              )
-            : "0",
-    );
-
-    type Labels = {
-        instructionText?: string;
-        buttonText: ResourceKey;
-        summaryText: ResourceKey;
-    };
-
-    let labels = $derived.by<Labels>(() => {
-        let instructionText: string | undefined = undefined;
-        let buttonText: ResourceKey = i18nKey("");
-
-        if (content.status.kind === "p2p_swap_open") {
-            if (me) {
-                instructionText = undefined;
-                buttonText = i18nKey("p2pSwap.cancel");
-            } else {
-                instructionText = undefined;
-                buttonText = i18nKey("p2pSwap.accept");
-            }
-        } else if (content.status.kind === "p2p_swap_cancelled") {
-            instructionText = undefined;
-            buttonText = i18nKey("p2pSwap.cancelled");
-        } else if (content.status.kind === "p2p_swap_expired") {
-            instructionText = undefined;
-            buttonText = i18nKey("p2pSwap.expired");
-        } else if (content.status.kind === "p2p_swap_reserved") {
-            if (acceptedByYou) {
-                instructionText = $_("p2pSwap.youReserved");
-            } else {
-                instructionText = $_("p2pSwap.reservedBy", {
-                    values: { user: `@UserId(${content.status.reservedBy})` },
-                });
-            }
-            buttonText = i18nKey("p2pSwap.reserved");
-        } else if (content.status.kind === "p2p_swap_accepted") {
-            if (acceptedByYou) {
-                instructionText = $_("p2pSwap.youAccepted");
-            } else {
-                instructionText = $_("p2pSwap.acceptedBy", {
-                    values: { user: `@UserId(${content.status.acceptedBy})` },
-                });
-            }
-            buttonText = i18nKey("p2pSwap.accepted");
-        } else if (content.status.kind === "p2p_swap_completed") {
-            if (acceptedByYou) {
-                instructionText = $_("p2pSwap.youCompleted");
-            } else {
-                instructionText = $_("p2pSwap.completed", {
-                    values: { user: `@UserId(${content.status.acceptedBy})` },
-                });
-            }
-            buttonText = i18nKey("p2pSwap.accepted");
-        }
-
-        return {
-            instructionText,
-            buttonText,
-            summaryText: i18nKey("p2pSwap.summary", {
-                fromAmount,
-                toAmount,
-                fromToken: content.token0.symbol,
-                toToken: content.token1.symbol,
-            }),
-        };
-    });
-
-    function onAcceptOrCancel(e: MouseEvent) {
-        if (e.isTrusted && !buttonDisabled) {
-            if (!me && !$isDiamondStore) {
-                publish("upgrade");
-            } else {
-                confirming = true;
-            }
-        }
-    }
-
-    function cancel(yes: boolean): Promise<void> {
-        confirming = false;
-
-        if (yes && me) {
-            client
-                .cancelP2PSwap(
-                    messageContext.chatId,
-                    messageContext.threadRootMessageIndex,
-                    messageId,
-                )
-                .then((resp) => {
-                    if (resp.kind !== "success") {
-                        showFailureToast(resp, false);
-                    }
-                });
-        }
-
-        return Promise.resolve();
-    }
-
-    function accept() {
-        confirming = false;
-
-        if (!me) {
-            client
-                .acceptP2PSwap(
-                    messageContext.chatId,
-                    messageContext.threadRootMessageIndex,
-                    messageId,
-                )
-                .then((resp) => {
-                    if (resp.kind !== "success") {
-                        showFailureToast(resp, true);
-                    }
-                });
-        }
-    }
-
-    function showFailureToast(
-        response: AcceptP2PSwapResponse | CancelP2PSwapResponse,
-        accepting: boolean,
-    ) {
-        if ($pinNumberErrorMessageStore !== undefined) {
-            toastStore.showFailureToast(pinNumberErrorMessageStore);
-            return;
-        }
-
-        let key: string = response.kind;
-
-        switch (key) {
-            case "already_reserved":
-            case "already_completed":
-                key = "already_accepted";
-                break;
-            case "channel_not_found":
-            case "chat_not_found":
-            case "user_suspended":
-            case "user_not_in_group":
-            case "user_not_in_community":
-            case "user_not_in_channel":
-            case "chat_frozen":
-            case "insufficient_funds":
-            case "internal_error":
-                key = accepting ? "unknown_accept_error" : "unknown_cancel_error";
-                break;
-        }
-
-        toastStore.showFailureToast(i18nKey("p2pSwap." + key));
-    }
-
-    function onSwapClick() {
-        if (!confirming) {
-            showDetails = true;
-        }
-    }
-</script>
-
-{#if confirming}
-    {#if me}
-        <AreYouSure
-            message={i18nKey("p2pSwap.confirmCancel", {
-                amount: fromAmount,
-                token: content.token0.symbol,
-            })}
-            action={cancel} />
-    {:else}
-        <AcceptP2PSwapModal
-            ledger0={content.token0.ledger}
-            ledger1={content.token1.ledger}
-            amount0={content.token0Amount}
-            amount1={content.token1Amount}
-            onAccept={accept}
-            onClose={() => (confirming = false)} />
-    {/if}
-{:else if showDetails}
-    <P2PSwapProgress {senderId} {content} onClose={() => (showDetails = false)} />
-{/if}
-
-<div class="swap">
-    <div class="top">
-        {#if content.status.kind === "p2p_swap_open"}
-            <div class="countdown" class:rtl={$rtlStore}>
-                <Clock size={"1em"} color={"#ffffff"} />
-                <span>{timeRemaining}</span>
-            </div>
-        {/if}
-        <div class="coins" onclick={onSwapClick}>
-            <div class="coin">
-                <SpinningToken
-                    logo={fromDetails?.logo ?? "/assets/not_found.svg"}
-                    spin={false}
-                    size="medium" />
-                <div class="amount">
-                    <div>{fromAmount} {content.token0.symbol}</div>
-                    <div class="dollar">({fromAmountInUsd} USD)</div>
-                </div>
-            </div>
-
-            <div class="swap-icon">
-                <SwapIcon size={"2.5em"} />
-            </div>
-
-            <div class="coin">
-                <SpinningToken
-                    logo={toDetails?.logo ?? "/assets/not_found.svg"}
-                    spin={false}
-                    size="medium" />
-                <div class="amount">
-                    <div>{toAmount} {content.token1.symbol}</div>
-                    <div class="dollar">({toAmountInUsd} USD)</div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="bottom">
-        {#if content.caption !== undefined}
-            <div class="caption">
-                {content.caption}
-            </div>
-        {/if}
-        <div class="summary"><Translatable resourceKey={labels.summaryText} /></div>
-        {#if labels.instructionText !== undefined}
-            <div class="instructions">
-                <Markdown text={labels.instructionText} />
-            </div>
-        {/if}
-        <div class="accept">
-            <ButtonGroup align="fill">
-                <Button
-                    loading={content.status.kind === "p2p_swap_reserved" ||
-                        content.status.kind === "p2p_swap_accepted"}
-                    disabled={buttonDisabled}
-                    hollow
-                    onClick={onAcceptOrCancel}>
-                    <Translatable resourceKey={labels.buttonText} />
-                </Button>
-            </ButtonGroup>
-        </div>
-    </div>
-</div>
-
-<style lang="scss">
-    $accent: var(--prize);
-
-    .swap .bottom .accept {
-        :global(button:not(.disabled)) {
-            border: 1px solid $accent !important;
-        }
-
-        :global(button:not(.disabled):hover) {
-            background-color: $accent;
-            color: var(--button-txt);
-        }
-
-        :global(button.loading) {
-            background-color: $accent;
-            color: var(--button-txt);
-        }
-
-        min-height: 45px !important;
-        min-width: unset !important;
-    }
-
-    .swap {
-        max-width: 400px;
-        padding: 0 $sp3 $sp3 $sp3;
-    }
-
-    .top {
-        position: relative;
-        margin-bottom: $sp4;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-    }
-
-    .countdown {
-        @include font-size(fs-60);
-        font-weight: 700;
-        display: flex;
-        gap: $sp2;
-        align-items: center;
-        border-radius: var(--rd);
-        color: white;
-        background-color: rgba(0, 0, 0, 0.3);
-        padding: $sp2 $sp3;
-        text-transform: lowercase;
-
-        &.rtl {
-            left: unset;
-            right: 10px;
-        }
-    }
-
-    .summary,
-    .instructions,
-    .caption {
-        @include font(book, normal, fs-80);
-        margin-bottom: $sp4;
-    }
-
-    .coins {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        margin-top: $sp3;
-        width: 100%;
-        cursor: pointer;
-    }
-
-    .amount {
-        @include font(bold, normal, fs-80);
-        text-align: center;
-
-        .dollar {
-            @include font(light, normal, fs-60);
-        }
-    }
-
-    .swap-icon {
-        height: 2.5em;
-        position: relative;
-        top: calc(2.5rem - 12px);
-    }
-
-    .coin {
-        display: flex;
-        flex-direction: column;
-        gap: $sp2;
-        align-items: center;
-        flex: 1;
-    }
-</style>
diff --git a/frontend/app/src/components/home/P2PSwapContentBuilder.svelte b/frontend/app/src/components/home/P2PSwapContentBuilder.svelte
deleted file mode 100644
index 64356c02a3..0000000000
--- a/frontend/app/src/components/home/P2PSwapContentBuilder.svelte
+++ /dev/null
@@ -1,313 +0,0 @@
-<script lang="ts">
-    import type { MessageContext, OpenChat, P2PSwapContentInitial } from "@client";
-    import {
-        enhancedCryptoLookup as cryptoLookup,
-        isDiamondStore,
-        mobileWidth,
-        publish,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { i18nKey } from "../../i18n/i18n";
-    import { pinNumberErrorMessageStore } from "../../stores/pinNumber";
-    import AreYouSure from "../AreYouSure.svelte";
-    import Button from "../Button.svelte";
-    import ButtonGroup from "../ButtonGroup.svelte";
-    import ErrorMessage from "../ErrorMessage.svelte";
-    import Legend from "../Legend.svelte";
-    import ModalContent from "../ModalContent.svelte";
-    import Overlay from "../Overlay.svelte";
-    import TextArea from "../TextArea.svelte";
-    import Translatable from "../Translatable.svelte";
-    import BalanceWithRefresh from "./BalanceWithRefresh.svelte";
-    import CryptoSelector from "./CryptoSelector.svelte";
-    import DurationPicker from "./DurationPicker.svelte";
-    import TokenInput from "./TokenInput.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        fromLedger: string;
-        messageContext: MessageContext;
-        onClose: () => void;
-    }
-
-    let { fromLedger = $bindable(), messageContext, onClose }: Props = $props();
-
-    let durationValid = $state(false);
-    let fromAmount: bigint = $state(0n);
-    let fromAmountValid: boolean = $state(false);
-    let toLedger: string = $state("");
-    let toAmount: bigint = $state(0n);
-    let toAmountValid: boolean = $state(false);
-    let expiresIn: bigint = $state(0n);
-    let message = $state("");
-    let error: string | undefined = $state(undefined);
-    let tokenInputState: "ok" | "zero" | "too_low" | "too_high" = $state("ok");
-    let confirming = $state(false);
-    let sending = $state(false);
-
-    let fromDetails = $derived($cryptoLookup.get(fromLedger)!);
-    let toDetails = $derived($cryptoLookup.get(toLedger)!);
-    let totalFees = $derived(fromDetails.transferFee * BigInt(2));
-    let remainingBalance = $state(0n);
-    $effect(() => {
-        remainingBalance =
-            fromAmount > 0n ? fromDetails.balance - fromAmount - totalFees : fromDetails.balance;
-    });
-    let minAmount = $derived(fromDetails.transferFee * BigInt(10));
-    let valid = $derived(error === undefined && fromAmountValid && toAmountValid && durationValid);
-    let errorMessage = $derived(error !== undefined ? i18nKey(error) : $pinNumberErrorMessageStore);
-
-    $effect(() => {
-        if (tokenInputState === "too_low") {
-            error = $_("minimumAmount", {
-                values: {
-                    amount: client.formatTokens(minAmount, fromDetails.decimals),
-                    symbol: fromDetails.symbol,
-                },
-            });
-        } else {
-            error = undefined;
-        }
-    });
-
-    function onSend() {
-        if (!$isDiamondStore) {
-            publish("upgrade");
-            return;
-        }
-
-        if (!valid) {
-            return;
-        }
-
-        confirming = true;
-    }
-
-    function send(yes: boolean): Promise<void> {
-        confirming = false;
-
-        if (!yes) {
-            return Promise.resolve();
-        }
-
-        const content: P2PSwapContentInitial = {
-            kind: "p2p_swap_content_initial",
-            token0: {
-                ledger: fromLedger,
-                symbol: fromDetails.symbol,
-                fee: fromDetails.transferFee,
-                decimals: fromDetails.decimals,
-            },
-            token1: {
-                ledger: toLedger,
-                symbol: toDetails.symbol,
-                fee: toDetails.transferFee,
-                decimals: toDetails.decimals,
-            },
-            token0Amount: fromAmount,
-            token1Amount: toAmount,
-            caption: message === "" ? undefined : message,
-            expiresIn,
-        };
-
-        sending = true;
-        error = undefined;
-
-        return client
-            .sendMessageWithContent(messageContext, content, false)
-            .then((resp) => {
-                if (resp.kind === "success" || resp.kind === "transfer_success") {
-                    onClose();
-                } else if ($pinNumberErrorMessageStore === undefined) {
-                    error = "errorSendingMessage";
-                }
-            })
-            .finally(() => (sending = false));
-    }
-
-    function cancel() {
-        onClose();
-    }
-
-    function onBalanceRefreshed() {
-        onBalanceRefreshFinished();
-        error = undefined;
-    }
-
-    function onBalanceRefreshError(err: string) {
-        onBalanceRefreshFinished();
-        error = err;
-    }
-
-    function onBalanceRefreshFinished() {
-        if (remainingBalance < 0) {
-            remainingBalance = BigInt(0);
-            fromAmount = fromDetails.balance - totalFees;
-        }
-    }
-
-    function onSelectFromToken(ledger: string, _: string) {
-        if (ledger === toLedger) {
-            toLedger =
-                [...$cryptoLookup.values()].map((t) => t.ledger).find((l) => l !== toLedger) ??
-                toLedger;
-        }
-    }
-</script>
-
-{#if confirming}
-    <AreYouSure
-        message={i18nKey("p2pSwap.confirmSend", {
-            amount: client.formatTokens(fromAmount + totalFees, fromDetails.decimals),
-            token: fromDetails.symbol,
-        })}
-        action={send} />
-{/if}
-
-<Overlay dismissible>
-    <ModalContent>
-        {#snippet header()}
-            <span class="header">
-                <div class="main-title">
-                    <Translatable resourceKey={i18nKey("p2pSwap.builderTitle")} />
-                </div>
-                <BalanceWithRefresh
-                    ledger={fromLedger}
-                    value={remainingBalance}
-                    label={i18nKey("cryptoAccount.shortBalanceLabel")}
-                    bold
-                    onRefreshed={onBalanceRefreshed}
-                    onError={onBalanceRefreshError} />
-            </span>
-        {/snippet}
-        {#snippet body()}
-            <form class="body swap-builder">
-                <div class="row">
-                    <div class="select-from">
-                        <Legend label={i18nKey("cryptoAccount.transactionHeaders.from")} />
-                        <div class="inner">
-                            <CryptoSelector
-                                filter={(t) => t.balance > 0}
-                                bind:ledger={fromLedger}
-                                onSelect={onSelectFromToken} />
-                        </div>
-                    </div>
-                    <div class="amount">
-                        <TokenInput
-                            ledger={fromLedger}
-                            {minAmount}
-                            maxAmount={fromDetails.balance - totalFees}
-                            showDollarAmount
-                            bind:status={tokenInputState}
-                            bind:valid={fromAmountValid}
-                            bind:amount={fromAmount} />
-                    </div>
-                </div>
-                <div class="row">
-                    <div class="select-to">
-                        <Legend label={i18nKey("cryptoAccount.transactionHeaders.to")} />
-                        <div class="inner">
-                            <CryptoSelector
-                                filter={(t) => t.ledger !== fromLedger}
-                                bind:ledger={toLedger} />
-                        </div>
-                    </div>
-                    <div class="amount">
-                        <TokenInput
-                            ledger={toLedger}
-                            showDollarAmount
-                            bind:valid={toAmountValid}
-                            bind:amount={toAmount} />
-                    </div>
-                </div>
-                <div class="duration">
-                    <Legend label={i18nKey("p2pSwap.expiryTime")} />
-                    <DurationPicker bind:valid={durationValid} bind:milliseconds={expiresIn} />
-                </div>
-                <div class="message">
-                    <Legend label={i18nKey("tokenTransfer.message")} />
-                    <TextArea
-                        maxlength={200}
-                        rows={3}
-                        autofocus={false}
-                        placeholder={i18nKey("tokenTransfer.messagePlaceholder")}
-                        bind:value={message} />
-                </div>
-                {#if errorMessage !== undefined}
-                    <div class="error">
-                        <ErrorMessage><Translatable resourceKey={errorMessage} /></ErrorMessage>
-                    </div>
-                {/if}
-            </form>
-        {/snippet}
-        {#snippet footer()}
-            <span>
-                <ButtonGroup>
-                    <Button small={!$mobileWidth} tiny={$mobileWidth} secondary onClick={cancel}
-                        ><Translatable resourceKey={i18nKey("cancel")} /></Button>
-                    <Button
-                        small={!$mobileWidth}
-                        disabled={!valid || sending}
-                        loading={sending}
-                        tiny={$mobileWidth}
-                        onClick={onSend}
-                        ><Translatable resourceKey={i18nKey("tokenTransfer.send")} /></Button>
-                </ButtonGroup>
-            </span>
-        {/snippet}
-    </ModalContent>
-</Overlay>
-
-<style lang="scss">
-    :global(.swap-builder .row input.amount-val) {
-        border: var(--bw) solid var(--bd) !important;
-        border-radius: 0 var(--rd) var(--rd) 0 !important;
-        height: 47px;
-    }
-
-    .header {
-        display: flex;
-        align-items: flex-start;
-        justify-content: space-between;
-        gap: $sp2;
-
-        .main-title {
-            flex: auto;
-        }
-    }
-
-    .body {
-        display: flex;
-        flex-direction: column;
-        gap: $sp4;
-    }
-
-    .row {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        border-radius: var(--rd);
-
-        .inner {
-            @include font(book, normal, fs-100);
-            padding: 0 $sp4;
-            background-color: var(--modal-bg);
-            border: var(--bw) solid var(--bd);
-            border-right: 0;
-            border-radius: var(--rd) 0 0 var(--rd);
-            display: flex;
-            height: 47px;
-            align-items: center;
-        }
-
-        .amount {
-            flex-grow: 1;
-        }
-    }
-
-    .error {
-        margin-top: $sp4;
-    }
-</style>
diff --git a/frontend/app/src/components/home/P2PSwapProgress.svelte b/frontend/app/src/components/home/P2PSwapProgress.svelte
deleted file mode 100644
index 9c132294c0..0000000000
--- a/frontend/app/src/components/home/P2PSwapProgress.svelte
+++ /dev/null
@@ -1,154 +0,0 @@
-<script lang="ts">
-    import type { OpenChat, P2PSwapContent } from "@client";
-    import Overlay from "../Overlay.svelte";
-    import ModalContent from "../ModalContent.svelte";
-    import ProgressSteps, { type Result, type Step } from "../ProgressSteps.svelte";
-    import { getContext } from "svelte";
-    import Translatable from "../Translatable.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-
-    const client = getContext<OpenChat>("client");
-    const labelPrefix = "p2pSwap.progress.";
-
-    interface Props {
-        senderId: string;
-        content: P2PSwapContent;
-        onClose: () => void;
-    }
-
-    let { senderId, content, onClose }: Props = $props();
-
-    let steps: Step[] = $state([
-        { label: "open", status: "done" },
-        { label: "waiting", status: "todo" },
-    ]);
-    let result = $state<Result>(undefined);
-    let token0TxnOut: string | undefined = $state(undefined);
-    let token1TxnIn: string | undefined = $state(undefined);
-    let token1TxnOut: string | undefined = $state(undefined);
-    let user1: string | undefined = $state(undefined);
-
-    function toUser(userId: string): string {
-        return `@UserId(${userId})`;
-    }
-    $effect(() => {
-        if (content.status.kind === "p2p_swap_cancelled") {
-            if (content.status.token0TxnOut === undefined) {
-                steps = [
-                    { label: "open", status: "done" },
-                    { label: "cancelled_pending", status: "doing" },
-                ];
-            } else {
-                steps = [
-                    { label: "open", status: "done" },
-                    { label: "refunded", status: "done" },
-                ];
-                result = { label: "cancelled", status: "failed" };
-                token0TxnOut = client.buildTransactionUrl(
-                    content.status.token0TxnOut,
-                    content.token0.ledger,
-                );
-            }
-        } else if (content.status.kind === "p2p_swap_expired") {
-            if (content.status.token0TxnOut === undefined) {
-                steps = [
-                    { label: "open", status: "done" },
-                    { label: "expired_pending", status: "doing" },
-                ];
-            } else {
-                steps = [
-                    { label: "open", status: "done" },
-                    { label: "refunded", status: "done" },
-                ];
-                result = { label: "expired", status: "failed" };
-                token0TxnOut = client.buildTransactionUrl(
-                    content.status.token0TxnOut,
-                    content.token0.ledger,
-                );
-            }
-        } else if (content.status.kind === "p2p_swap_reserved") {
-            steps = [
-                { label: "open", status: "done" },
-                { label: "reserved", status: "doing" },
-            ];
-            user1 = toUser(content.status.reservedBy);
-        } else if (content.status.kind === "p2p_swap_accepted") {
-            steps = [
-                { label: "open", status: "done" },
-                { label: "accepting", status: "done" },
-                { label: "accepted", status: "done" },
-                { label: "swapping", status: "doing" },
-            ];
-            user1 = toUser(content.status.acceptedBy);
-            token1TxnIn = client.buildTransactionUrl(
-                content.status.token1TxnIn,
-                content.token1.ledger,
-            );
-        } else if (content.status.kind === "p2p_swap_completed") {
-            steps = [
-                { label: "open", status: "done" },
-                { label: "accepting", status: "done" },
-                { label: "accepted", status: "done" },
-                { label: "swapped", status: "done" },
-            ];
-            result = { label: "completed", status: "done" };
-            user1 = toUser(content.status.acceptedBy);
-            token1TxnIn = client.buildTransactionUrl(
-                content.status.token1TxnIn,
-                content.token1.ledger,
-            );
-            token0TxnOut = client.buildTransactionUrl(
-                content.status.token0TxnOut,
-                content.token0.ledger,
-            );
-            token1TxnOut = client.buildTransactionUrl(
-                content.status.token0TxnOut,
-                content.token0.ledger,
-            );
-        }
-    });
-    let fullSteps = $derived(
-        steps.map((step) => ({ label: labelPrefix + step.label, status: step.status })),
-    );
-    let fullResult = $derived(
-        result !== undefined
-            ? { label: labelPrefix + result.label, status: result.status }
-            : undefined,
-    );
-    let labelValues = $derived({
-        token0: content.token0.symbol,
-        token1: content.token1.symbol,
-        amount0: client.formatTokens(content.token0Amount, content.token0.decimals),
-        amount1: client.formatTokens(content.token1Amount, content.token1.decimals),
-        user0: toUser(senderId),
-        user1,
-        token0TxnIn: client.buildTransactionUrl(content.token0TxnIn, content.token0.ledger),
-        token0TxnOut,
-        token1TxnIn,
-        token1TxnOut,
-    });
-    let title = $derived(i18nKey("p2pSwap.swapTokenTo", labelValues));
-</script>
-
-<Overlay dismissible {onClose}>
-    <ModalContent hideFooter>
-        {#snippet header()}
-            <Translatable resourceKey={title} />
-        {/snippet}
-        {#snippet body()}
-            <div class="p2p-swap-progress">
-                <ProgressSteps steps={fullSteps} {labelValues} result={fullResult} />
-            </div>
-        {/snippet}
-    </ModalContent>
-</Overlay>
-
-<style lang="scss">
-    :global(.p2p-swap-progress .markdown-wrapper a) {
-        color: unset;
-        text-decoration: none;
-        &:hover {
-            text-decoration: underline;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/PermissionsChangedEvent.svelte b/frontend/app/src/components/home/PermissionsChangedEvent.svelte
deleted file mode 100644
index ab404caef2..0000000000
--- a/frontend/app/src/components/home/PermissionsChangedEvent.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script lang="ts">
-    import type { Level, PermissionsChanged, UserSummary } from "@client";
-    import { allUsersStore } from "@client";
-    import { _ } from "svelte-i18n";
-    import { i18nKey, interpolate } from "../../i18n/i18n";
-    import { buildDisplayName } from "../../utils/user";
-    import NonMessageEvent from "./NonMessageEvent.svelte";
-
-    interface Props {
-        event: PermissionsChanged;
-        user: UserSummary | undefined;
-        timestamp: bigint;
-        level: Level;
-    }
-
-    let { event, user, timestamp, level }: Props = $props();
-
-    let me = $derived(event.changedBy === user?.userId);
-    let changedByStr = $derived(
-        buildDisplayName($allUsersStore, event.changedBy, me ? "me" : "user"),
-    );
-
-    let text = $derived(
-        interpolate(
-            $_,
-            i18nKey(
-                "permissionsChangedBy",
-                {
-                    changedBy: changedByStr,
-                },
-                level,
-                true,
-            ),
-        ),
-    );
-</script>
-
-<NonMessageEvent {text} {timestamp} />
diff --git a/frontend/app/src/components/home/PinNumberModal.svelte b/frontend/app/src/components/home/PinNumberModal.svelte
deleted file mode 100644
index 94108477e5..0000000000
--- a/frontend/app/src/components/home/PinNumberModal.svelte
+++ /dev/null
@@ -1,42 +0,0 @@
-<script lang="ts">
-    import { mobileWidth } from "@client";
-    import { i18nKey } from "../../i18n/i18n";
-    import ModalContent from "../ModalContent.svelte";
-    import Pincode from "../pincode/Pincode.svelte";
-    import Translatable from "../Translatable.svelte";
-    import ForgotPinLabel from "./ForgotPinLabel.svelte";
-
-    interface Props {
-        onComplete: (pin: string) => void;
-        onClose: () => void;
-        onForgot: () => void;
-    }
-
-    let { onComplete, onClose, onForgot }: Props = $props();
-
-    function onPinComplete(_: string[], value: string) {
-        onComplete(value);
-    }
-</script>
-
-<ModalContent closeIcon hideFooter fitToContent={!$mobileWidth} fixedWidth={false} {onClose}>
-    {#snippet header()}
-        <Translatable resourceKey={i18nKey("pinNumber.enterPin")} />
-    {/snippet}
-    {#snippet body()}
-        <div class="body">
-            <Pincode type="numeric" length={6} onComplete={onPinComplete} />
-            <ForgotPinLabel {onForgot} />
-        </div>
-    {/snippet}
-</ModalContent>
-
-<style lang="scss">
-    .body {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: $sp4;
-        max-width: 500px;
-    }
-</style>
diff --git a/frontend/app/src/components/home/PlaceholderContent.svelte b/frontend/app/src/components/home/PlaceholderContent.svelte
deleted file mode 100644
index 7212408dae..0000000000
--- a/frontend/app/src/components/home/PlaceholderContent.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<svelte:options immutable />
-
-<script lang="ts">
-    import { i18nKey } from "../../i18n/i18n";
-    import Translatable from "../Translatable.svelte";
-</script>
-
-<span class="placeholder">
-    <Translatable resourceKey={i18nKey("placeholderContent")} />
-</span>
-
-<style lang="scss">
-    .placeholder {
-        padding: $sp4;
-        @include font(light, italic, fs-90);
-    }
-</style>
diff --git a/frontend/app/src/components/home/PollAnswer.svelte b/frontend/app/src/components/home/PollAnswer.svelte
deleted file mode 100644
index 6f869e2ff2..0000000000
--- a/frontend/app/src/components/home/PollAnswer.svelte
+++ /dev/null
@@ -1,123 +0,0 @@
-<script lang="ts">
-    import type { OpenChat, UserLookup } from "@client";
-    import { allUsersStore, currentUserIdStore } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import CheckCircleOutline from "svelte-material-icons/CheckCircleOutline.svelte";
-    import Progress from "../Progress.svelte";
-    import Tooltip from "../tooltip/Tooltip.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        finished: boolean;
-        readonly: boolean;
-        percent: number;
-        answer: string;
-        voted: boolean;
-        txtColor: string;
-        voters: string[] | undefined;
-        numVotes: number;
-        showVotes: boolean;
-        me: boolean;
-        onClick?: () => void;
-    }
-
-    let {
-        finished,
-        readonly,
-        percent,
-        answer,
-        voted,
-        txtColor,
-        voters,
-        numVotes,
-        showVotes,
-        me,
-        onClick,
-    }: Props = $props();
-
-    let longPressed: boolean = $state(false);
-
-    function buildPollUsernames(
-        userStore: UserLookup,
-        voters: string[] | undefined,
-        myUserId: string | undefined,
-    ): string | undefined {
-        if (voters === undefined || voters.length === 0 || !showVotes) return undefined;
-        return client.buildUsernameList($_, new Set(voters), myUserId, userStore);
-    }
-
-    function buildTooltipText(): string {
-        if (usernames === undefined) {
-            if (numVotes === 1) {
-                if (voted) {
-                    return $_("poll.oneVoteBy") + " " + $_("you");
-                } else {
-                    return $_("poll.oneVote");
-                }
-            } else {
-                if (voted) {
-                    return $_("poll.numVotesIncludingYours", { values: { votes: numVotes } });
-                } else {
-                    return $_("poll.numVotes", { values: { votes: numVotes } });
-                }
-            }
-        } else {
-            if (numVotes === 1) {
-                return $_("poll.oneVoteBy") + " " + usernames;
-            } else {
-                return $_("poll.numVotesBy", { values: { votes: numVotes } }) + " " + usernames;
-            }
-        }
-    }
-
-    function click() {
-        if (!longPressed) {
-            onClick?.();
-        }
-    }
-    let usernames = $derived(buildPollUsernames($allUsersStore, voters, $currentUserIdStore));
-</script>
-
-<Tooltip
-    textLength={usernames === undefined ? 10 : usernames.length + 16}
-    longestWord={30}
-    bind:longPressed
-    position={"right"}
-    align={"middle"}
-    enable={showVotes}>
-    <div class:readonly class="answer-text" class:finished onclick={click}>
-        <Progress bg={me ? "accent" : "button"} {percent}>
-            <div class="label">
-                <span>{answer}</span>
-                {#if voted}
-                    <CheckCircleOutline size={"1em"} color={txtColor} />
-                {/if}
-            </div>
-        </Progress>
-    </div>
-    {#snippet popupTemplate()}
-        {buildTooltipText()}
-    {/snippet}
-</Tooltip>
-
-<style lang="scss">
-    .label {
-        display: flex;
-        align-items: center;
-        gap: $sp3;
-    }
-
-    .answer-text {
-        cursor: pointer;
-
-        &.finished {
-            cursor: default;
-        }
-
-        &.readonly {
-            cursor: default;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/PollBuilder.svelte b/frontend/app/src/components/home/PollBuilder.svelte
deleted file mode 100644
index f2f417943c..0000000000
--- a/frontend/app/src/components/home/PollBuilder.svelte
+++ /dev/null
@@ -1,355 +0,0 @@
-<script lang="ts">
-    import {
-        iconSize,
-        mobileWidth,
-        type PollContent,
-        type ResourceKey,
-        type TotalPollVotes,
-    } from "@client";
-    import { _ } from "svelte-i18n";
-    import DeleteOutline from "svelte-material-icons/DeleteOutline.svelte";
-    import PlusCircleOutline from "svelte-material-icons/PlusCircleOutline.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import Button from "../Button.svelte";
-    import ButtonGroup from "../ButtonGroup.svelte";
-    import ErrorMessage from "../ErrorMessage.svelte";
-    import Input from "../Input.svelte";
-    import Legend from "../Legend.svelte";
-    import ModalContent from "../ModalContent.svelte";
-    import Overlay from "../Overlay.svelte";
-    import Radio from "../Radio.svelte";
-    import Toggle from "../Toggle.svelte";
-    import Translatable from "../Translatable.svelte";
-
-    const MAX_QUESTION_LENGTH = 250;
-    const MAX_ANSWER_LENGTH = 50;
-    const MAX_ANSWERS = 10;
-    const durations: Duration[] = ["oneHour", "oneDay", "oneWeek"];
-
-    type Duration = "oneHour" | "oneDay" | "oneWeek";
-
-    type CandidatePoll = {
-        pollQuestion: string;
-        anonymous: boolean;
-        limitedDuration: boolean;
-        showVotesBeforeEndDate: boolean;
-        allowMultipleVotesPerUser: boolean;
-        allowUserToChangeVote: boolean;
-        pollAnswers: Map<string, string>;
-    };
-
-    interface Props {
-        open: boolean;
-        onSend: (content: PollContent) => void;
-    }
-
-    let { open = $bindable(), onSend }: Props = $props();
-
-    let poll: CandidatePoll = $state(emptyPoll());
-    let nextAnswer: string = $state("");
-    let answerError: ResourceKey | undefined = $state(undefined);
-    let selectedDuration: Duration = $state("oneDay");
-    let showSettings = $state(false);
-
-    export function resetPoll() {
-        selectedDuration = "oneDay";
-        answerError = undefined;
-        nextAnswer = "";
-        poll = emptyPoll();
-        showSettings = false;
-    }
-
-    function emptyPoll() {
-        return {
-            pollQuestion: "",
-            anonymous: true,
-            limitedDuration: true,
-            showVotesBeforeEndDate: true,
-            allowMultipleVotesPerUser: false,
-            allowUserToChangeVote: true,
-            pollAnswers: new Map<string, string>(),
-        };
-    }
-
-    function answerIsValid(answer: string): boolean {
-        const trimmed = answer?.trim();
-        return (
-            trimmed !== undefined &&
-            trimmed.length > 0 &&
-            trimmed.length <= MAX_ANSWER_LENGTH &&
-            !poll.pollAnswers.has(trimmed.toUpperCase())
-        );
-    }
-
-    function addAnswer() {
-        const trimmed = nextAnswer?.trim();
-        if (answerIsValid(trimmed)) {
-            answerError = undefined;
-            poll.pollAnswers = new Map(poll.pollAnswers.set(trimmed.toUpperCase(), trimmed));
-            nextAnswer = "";
-            return true;
-        } else {
-            answerError = i18nKey("poll.invalidAnswer");
-            return false;
-        }
-    }
-
-    function deleteAnswer(answer: string) {
-        poll.pollAnswers.delete(answer.toUpperCase());
-        poll.pollAnswers = new Map(poll.pollAnswers);
-    }
-
-    function createPollVotes(): TotalPollVotes {
-        if (poll.anonymous) {
-            return { kind: "anonymous_poll_votes", votes: {} };
-        } else if (poll.showVotesBeforeEndDate) {
-            return { kind: "visible_poll_votes", votes: {} };
-        } else {
-            return { kind: "hidden_poll_votes", votes: 0 };
-        }
-    }
-
-    const ONE_HOUR = 1000 * 60 * 60;
-    const ONE_DAY = ONE_HOUR * 24;
-    const ONE_WEEK = ONE_DAY * 7;
-
-    function createPollEndDate() {
-        if (!poll.limitedDuration) return undefined;
-        const now = Date.now();
-        if (selectedDuration === "oneHour") return BigInt(now + ONE_HOUR);
-        if (selectedDuration === "oneDay") return BigInt(now + ONE_DAY);
-        if (selectedDuration === "oneWeek") return BigInt(now + ONE_WEEK);
-    }
-
-    function createPollContent(): PollContent | undefined {
-        if (nextAnswer !== "") {
-            if (!addAnswer()) {
-                return undefined;
-            }
-        }
-        return {
-            kind: "poll_content",
-            votes: {
-                total: createPollVotes(),
-                user: [],
-            },
-            config: {
-                allowMultipleVotesPerUser: poll.allowMultipleVotesPerUser,
-                allowUserToChangeVote: poll.allowUserToChangeVote,
-                text: poll.pollQuestion === "" ? undefined : poll.pollQuestion,
-                showVotesBeforeEndDate: poll.showVotesBeforeEndDate,
-                endDate: createPollEndDate(),
-                anonymous: poll.anonymous,
-                options: [...poll.pollAnswers.values()],
-            },
-            ended: false,
-        };
-    }
-
-    function start() {
-        const poll = createPollContent();
-        if (poll) {
-            onSend(poll);
-            open = false;
-        }
-    }
-    let valid = $derived(
-        poll.pollAnswers.size >= 2 ||
-            (poll.pollAnswers.size === 1 && nextAnswer.length > 0 && answerIsValid(nextAnswer)),
-    );
-</script>
-
-{#if open}
-    <Overlay>
-        <ModalContent>
-            {#snippet header()}
-                <Translatable resourceKey={i18nKey("poll.create")} />
-            {/snippet}
-            {#snippet body()}
-                <div class="buttons">
-                    <ButtonGroup align={"start"}>
-                        <Button
-                            small={!$mobileWidth}
-                            tiny={$mobileWidth}
-                            secondary={showSettings}
-                            onClick={() => (showSettings = false)}
-                            ><Translatable resourceKey={i18nKey("poll.poll")} /></Button>
-                        <Button
-                            small={!$mobileWidth}
-                            secondary={!showSettings}
-                            tiny={$mobileWidth}
-                            onClick={() => (showSettings = true)}
-                            ><Translatable resourceKey={i18nKey("poll.settings")} /></Button>
-                    </ButtonGroup>
-                </div>
-                {#if !showSettings}
-                    <form>
-                        <div class="section underline">
-                            <Legend label={i18nKey("poll.questionLabel")} />
-                            <Input
-                                bind:value={poll.pollQuestion}
-                                autofocus
-                                minlength={0}
-                                maxlength={MAX_QUESTION_LENGTH}
-                                countdown
-                                placeholder={i18nKey("poll.optionalQuestion")} />
-                        </div>
-
-                        <div class="section">
-                            <Legend
-                                label={i18nKey("poll.answersLabel")}
-                                rules={i18nKey("poll.atLeastTwo")} />
-                            {#each [...poll.pollAnswers.values()] as answer (answer)}
-                                <div class="answer">
-                                    <div class="answer-text">
-                                        {answer}
-                                    </div>
-                                    <div class="delete" onclick={() => deleteAnswer(answer)}>
-                                        <DeleteOutline size={$iconSize} color={"var(--icon-txt)"} />
-                                    </div>
-                                </div>
-                            {/each}
-                            {#if poll.pollAnswers.size < MAX_ANSWERS}
-                                <div class="next">
-                                    <div class="next-txt">
-                                        <Input
-                                            bind:value={nextAnswer}
-                                            disabled={poll.pollAnswers.size >= MAX_ANSWERS}
-                                            minlength={1}
-                                            maxlength={MAX_ANSWER_LENGTH}
-                                            countdown
-                                            onEnter={addAnswer}
-                                            placeholder={i18nKey(
-                                                poll.pollAnswers.size === MAX_ANSWERS
-                                                    ? "poll.maxReached"
-                                                    : "poll.answerText",
-                                            )}>
-                                            {#if answerError !== undefined}
-                                                <ErrorMessage
-                                                    ><Translatable
-                                                        resourceKey={answerError} /></ErrorMessage>
-                                            {/if}
-                                        </Input>
-                                    </div>
-                                    <div class="add-btn" onclick={addAnswer}>
-                                        <PlusCircleOutline
-                                            size={$iconSize}
-                                            color={"var(--icon-txt)"} />
-                                    </div>
-                                </div>
-                            {/if}
-                        </div>
-                    </form>
-                {:else}
-                    <Toggle
-                        small
-                        id={"anonymous"}
-                        onChange={() => (poll.anonymous = !poll.anonymous)}
-                        label={i18nKey("poll.anonymous")}
-                        checked={poll.anonymous} />
-
-                    <Toggle
-                        small
-                        id={"allow-multiple"}
-                        label={i18nKey("poll.allowMultipleVotes")}
-                        onChange={() =>
-                            (poll.allowMultipleVotesPerUser = !poll.allowMultipleVotesPerUser)}
-                        checked={poll.allowMultipleVotesPerUser} />
-
-                    <Toggle
-                        small
-                        id={"allow-change"}
-                        disabled={poll.allowMultipleVotesPerUser}
-                        label={i18nKey("poll.allowChangeVotes")}
-                        onChange={() => (poll.allowUserToChangeVote = !poll.allowUserToChangeVote)}
-                        checked={!poll.allowMultipleVotesPerUser && poll.allowUserToChangeVote} />
-
-                    <Toggle
-                        small
-                        id={"limited-duration"}
-                        label={i18nKey("poll.limitedDuration")}
-                        onChange={() => (poll.limitedDuration = !poll.limitedDuration)}
-                        checked={poll.limitedDuration} />
-
-                    {#if poll.limitedDuration}
-                        <Toggle
-                            small
-                            id={"show-before-end"}
-                            label={i18nKey("poll.showBeforeEnd")}
-                            onChange={() =>
-                                (poll.showVotesBeforeEndDate = !poll.showVotesBeforeEndDate)}
-                            checked={poll.showVotesBeforeEndDate} />
-
-                        <Legend label={i18nKey("poll.pollDuration")} />
-                        {#each durations as d}
-                            <Radio
-                                onChange={() => (selectedDuration = d)}
-                                value={d}
-                                checked={selectedDuration === d}
-                                id={`duration_${d}`}
-                                label={i18nKey(`poll.${d}`)}
-                                group={"poll_duration"} />
-                        {/each}
-                    {/if}
-                {/if}
-            {/snippet}
-            {#snippet footer()}
-                <ButtonGroup>
-                    <Button
-                        small={!$mobileWidth}
-                        tiny={$mobileWidth}
-                        secondary
-                        onClick={() => (open = false)}>{$_("cancel")}</Button>
-                    <Button
-                        small={!$mobileWidth}
-                        disabled={!valid}
-                        tiny={$mobileWidth}
-                        onClick={start}>{$_("poll.start")}</Button>
-                </ButtonGroup>
-            {/snippet}
-        </ModalContent>
-    </Overlay>
-{/if}
-
-<style lang="scss">
-    .section {
-        padding-bottom: $sp4;
-
-        &.underline {
-            margin-bottom: $sp4;
-            border-bottom: 1px solid var(--bd);
-        }
-    }
-
-    .buttons {
-        margin-bottom: $sp4;
-    }
-
-    .answer-text {
-        flex: 1;
-        padding: $sp3 $sp4;
-        border-radius: var(--rd);
-        margin-bottom: $sp3;
-        position: relative;
-        border: 1px solid var(--bd);
-        background-color: var(--input-bg);
-    }
-
-    .next,
-    .answer {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        gap: $sp3;
-    }
-
-    .next-txt {
-        flex: 1;
-    }
-
-    .add-btn,
-    .delete {
-        flex: 0 0 30px;
-        cursor: pointer;
-    }
-</style>
diff --git a/frontend/app/src/components/home/PollContent.svelte b/frontend/app/src/components/home/PollContent.svelte
deleted file mode 100644
index 76b3cec892..0000000000
--- a/frontend/app/src/components/home/PollContent.svelte
+++ /dev/null
@@ -1,184 +0,0 @@
-<script lang="ts">
-    import { currentUserIdStore, iconSize, type OpenChat, type PollContent } from "@client";
-    import { getContext } from "svelte";
-    import Poll from "svelte-material-icons/Poll.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import Translatable from "../Translatable.svelte";
-    import PollAnswer from "./PollAnswer.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        content: PollContent;
-        me: boolean;
-        readonly: boolean;
-        senderId: string;
-        onRegisterVote?: (vote: { type: "delete" | "register"; answerIndex: number }) => void;
-    }
-
-    let { content, me, readonly, senderId, onRegisterVote }: Props = $props();
-
-    function vote(idx: number) {
-        if (cannotVote) return;
-
-        onRegisterVote?.({
-            type: votedFor(idx) ? "delete" : "register",
-            answerIndex: idx,
-        });
-    }
-
-    function votedFor(idx: number): boolean {
-        return content.votes.user.includes(idx);
-    }
-
-    function voteCount(idx: number): number {
-        let total = content.votes.total;
-        switch (total.kind) {
-            case "anonymous_poll_votes":
-                return total.votes[idx] ?? 0;
-            case "hidden_poll_votes":
-                return total.votes;
-            case "visible_poll_votes":
-                return total.votes[idx]?.length ?? 0;
-        }
-    }
-
-    function voters(idx: number): string[] | undefined {
-        if (content.votes.total.kind !== "visible_poll_votes") {
-            return undefined;
-        }
-
-        return content.votes.total.votes[idx];
-    }
-
-    function totalVotes(content: PollContent): number {
-        if (content.votes.total.kind === "anonymous_poll_votes") {
-            return Object.values(content.votes.total.votes).reduce((total, n) => total + n, 0);
-        }
-        if (content.votes.total.kind === "hidden_poll_votes") {
-            return content.votes.total.votes;
-        }
-        if (content.votes.total.kind === "visible_poll_votes") {
-            return Object.values(content.votes.total.votes).reduce(
-                (total, n) => total + n.length,
-                0,
-            );
-        }
-        return 0;
-    }
-
-    function votesForAnswer(idx: number): number {
-        if (content.votes.total.kind === "anonymous_poll_votes") {
-            return content.votes.total.votes[idx] ?? 0;
-        }
-        if (content.votes.total.kind === "hidden_poll_votes") {
-            return 0;
-        }
-        if (content.votes.total.kind === "visible_poll_votes") {
-            return content.votes.total.votes[idx]?.length ?? 0;
-        }
-        return 0;
-    }
-
-    function percentageOfVote(idx: number) {
-        return showVotes ? (votesForAnswer(idx) / numberOfVotes) * 100 : 0;
-    }
-    let txtColor = $derived(me ? "#ffffff" : "var(--txt)");
-    let date = $derived(
-        content.config.endDate ? new Date(Number(content.config.endDate)) : undefined,
-    );
-    let haveIVoted = $derived(content.votes.user.length > 0);
-    let numberOfVotes = $derived(totalVotes(content));
-    let cannotVote = $derived(
-        content.ended || readonly || (haveIVoted && !content.config.allowUserToChangeVote),
-    );
-    let showVotes = $derived(
-        content.ended ||
-            ((haveIVoted || senderId === $currentUserIdStore) &&
-                (content.config.showVotesBeforeEndDate || content.config.endDate === undefined)),
-    );
-</script>
-
-<div class="poll">
-    {#if content.config.text !== undefined}
-        <div class="question">
-            <div class="icon">
-                <Poll size={$iconSize} color={txtColor} />
-            </div>
-            <p class="question-txt">{content.config.text}</p>
-        </div>
-    {/if}
-    <div class="answers">
-        {#each [...content.config.options] as answer, i (answer)}
-            <PollAnswer
-                onClick={() => vote(i)}
-                finished={content.ended}
-                {readonly}
-                percent={percentageOfVote(i)}
-                {answer}
-                voted={votedFor(i)}
-                {txtColor}
-                {me}
-                voters={voters(i)}
-                numVotes={voteCount(i)}
-                {showVotes} />
-        {/each}
-    </div>
-    <p class="total-votes">
-        <Translatable
-            resourceKey={i18nKey("poll.totalVotes", { total: numberOfVotes.toString() })} />
-    </p>
-    <p class="timestamp">
-        {#if content.config.anonymous}
-            <Translatable resourceKey={i18nKey("poll.votersPrivate")} />
-        {:else}
-            <Translatable resourceKey={i18nKey("poll.votersPublic")} />
-        {/if}
-    </p>
-    {#if date !== undefined}
-        <p class="timestamp">
-            {#if content.ended}
-                <Translatable resourceKey={i18nKey("poll.finished")} />
-            {:else}
-                <Translatable
-                    resourceKey={i18nKey("poll.pollEnds", {
-                        end: `${client.toLongDateString(date)} @ ${client.toShortTimeString(date)}`,
-                    })} />
-            {/if}
-        </p>
-    {/if}
-</div>
-
-<style lang="scss">
-    .poll {
-        @include size-above(sm) {
-            min-width: 240px;
-        }
-    }
-
-    .question {
-        display: flex;
-        align-items: flex-start;
-        .question-txt {
-            @include font(bold, normal, fs-110);
-        }
-        .icon {
-            flex: 0 0 30px;
-        }
-    }
-
-    .answers {
-        margin: $sp3 0 $sp4 0;
-        display: flex;
-        flex-direction: column;
-        gap: $sp4;
-    }
-
-    .total-votes {
-        @include font(bold, normal, fs-70);
-    }
-
-    .timestamp {
-        @include font(light, normal, fs-70);
-    }
-</style>
diff --git a/frontend/app/src/components/home/PreviewFooter.svelte b/frontend/app/src/components/home/PreviewFooter.svelte
deleted file mode 100644
index ea1f974b94..0000000000
--- a/frontend/app/src/components/home/PreviewFooter.svelte
+++ /dev/null
@@ -1,187 +0,0 @@
-
-<script lang="ts">
-    import { navigate } from "@utils/navigation";
-    import { chatListScopeStore, isLocked, mobileWidth, type MultiUserChat, type OpenChat, platformModeratorStore, publish, ROLE_NONE, routeForScope, selectedCommunitySummaryStore } from "@client";
-    import { getContext } from "svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { toastStore } from "../../stores/toast";
-    import Button from "../Button.svelte";
-    import Translatable from "../Translatable.svelte";
-    import AccessGateIconsForChat from "./access/AccessGateIconsForChat.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        chat: MultiUserChat;
-        joining: MultiUserChat | undefined;
-        lapsed: boolean;
-    }
-
-    let { chat, joining, lapsed }: Props = $props();
-
-    let isFrozen = $derived(client.isChatOrCommunityFrozen(chat, $selectedCommunitySummaryStore));
-    let previewingCommunity = $derived(
-        $selectedCommunitySummaryStore?.membership.role === ROLE_NONE ||
-            $selectedCommunitySummaryStore?.membership.lapsed,
-    );
-    let gates = $derived(client.accessGatesForChat(chat));
-    let locked = $derived(gates.some((g) => isLocked(g)));
-
-    let freezingInProgress = $state(false);
-
-    function joinGroup() {
-        publish("joinGroup", {
-            group: chat,
-            select: false,
-        });
-    }
-
-    function cancelPreview() {
-        if (previewingCommunity && $selectedCommunitySummaryStore) {
-            client.removeCommunity($selectedCommunitySummaryStore.id);
-            navigate(routeForScope(client.getDefaultScope()));
-        } else {
-            if (!chat.public) {
-                client.declineInvitation(chat.id);
-            }
-            client.removePreviewedChat(chat.id);
-            if ($mobileWidth || !client.selectDefaultChat(false)) {
-                navigate(routeForScope($chatListScopeStore));
-            }
-        }
-    }
-
-    function freeze() {
-        freezingInProgress = true;
-        switch (chat.kind) {
-            case "group_chat":
-                client
-                    .freezeGroup(chat.id, undefined)
-                    .then((success) => {
-                        if (!success) {
-                            toastStore.showFailureToast(i18nKey("failedToFreezeGroup"));
-                        } else {
-                            toastStore.showSuccessToast(i18nKey("chatFrozen"));
-                        }
-                    })
-                    .finally(() => (freezingInProgress = false));
-                break;
-
-            case "channel":
-                if ($selectedCommunitySummaryStore) {
-                    client
-                        .freezeCommunity($selectedCommunitySummaryStore.id, undefined)
-                        .then((success) => {
-                            if (!success) {
-                                toastStore.showFailureToast(i18nKey("failedToFreezeCommunity"));
-                            } else {
-                                toastStore.showSuccessToast(i18nKey("communityFrozen"));
-                            }
-                        })
-                        .finally(() => (freezingInProgress = false));
-                }
-                break;
-        }
-    }
-
-    function unfreeze() {
-        freezingInProgress = true;
-
-        switch (chat.kind) {
-            case "group_chat":
-                client
-                    .unfreezeGroup(chat.id)
-                    .then((success) => {
-                        if (!success) {
-                            toastStore.showFailureToast(i18nKey("failedToUnfreezeGroup"));
-                        } else {
-                            toastStore.showSuccessToast(i18nKey("Chat unfrozen"));
-                        }
-                    })
-                    .finally(() => (freezingInProgress = false));
-
-            case "channel":
-                if ($selectedCommunitySummaryStore) {
-                    client
-                        .unfreezeCommunity($selectedCommunitySummaryStore.id)
-                        .then((success) => {
-                            if (!success) {
-                                toastStore.showFailureToast(i18nKey("failedToUnfreezeCommunity"));
-                            } else {
-                                toastStore.showSuccessToast(i18nKey("communityUnfrozen"));
-                            }
-                        })
-                        .finally(() => (freezingInProgress = false));
-                }
-        }
-    }
-</script>
-
-<div class="preview">
-    <div class="gate">
-        <AccessGateIconsForChat {gates} />
-    </div>
-    {#if lapsed}
-        <div class="lapsed">
-            <Translatable resourceKey={i18nKey("access.lapsed.label")} />
-        </div>
-    {/if}
-    {#if $platformModeratorStore}
-        {#if isFrozen}
-            <Button loading={freezingInProgress} secondary small onClick={unfreeze}>
-                <Translatable
-                    resourceKey={chat.kind === "group_chat"
-                        ? i18nKey("unfreezeGroup")
-                        : i18nKey("unfreezeCommunity")} />
-            </Button>
-        {:else}
-            <Button loading={freezingInProgress} secondary small onClick={freeze}>
-                <Translatable
-                    resourceKey={chat.kind === "group_chat"
-                        ? i18nKey("freezeGroup")
-                        : i18nKey("freezeCommunity")} />
-            </Button>
-        {/if}
-    {/if}
-    {#if !lapsed}
-        <Button secondary small onClick={cancelPreview}>
-            <Translatable resourceKey={i18nKey("leave")} />
-        </Button>
-    {/if}
-    <Button
-        loading={joining !== undefined}
-        disabled={locked || joining !== undefined}
-        small
-        onClick={joinGroup}>
-        <Translatable
-            resourceKey={locked
-                ? i18nKey("access.lockedGate", undefined, chat.level, true)
-                : lapsed
-                  ? i18nKey("access.lapsed.rejoin", undefined, chat.level, true)
-                  : i18nKey("joinGroup", undefined, chat.level, true)} />
-    </Button>
-</div>
-
-<style lang="scss">
-    .preview {
-        height: 42px;
-        color: var(--txt);
-        @include font(book, normal, fs-100);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 100%;
-        position: relative;
-        justify-content: flex-end;
-        gap: $sp3;
-
-        .gate {
-            position: absolute;
-            left: 0;
-        }
-    }
-
-    .lapsed {
-        @include font(bold, normal, fs-100);
-    }
-</style>
diff --git a/frontend/app/src/components/home/PrizeContent.svelte b/frontend/app/src/components/home/PrizeContent.svelte
deleted file mode 100644
index 169b2ab672..0000000000
--- a/frontend/app/src/components/home/PrizeContent.svelte
+++ /dev/null
@@ -1,443 +0,0 @@
-<script lang="ts">
-    import type { DelegationChain, ECDSAKeyIdentity } from "@icp-sdk/core/identity";
-    import {
-        AuthProvider,
-        chitBands,
-        chitStateStore,
-        cryptoLookup,
-        isDiamondStore,
-        isLifetimeDiamondStore,
-        mobileWidth,
-        publish,
-        type ChatIdentifier,
-        type DiamondMembershipStatus,
-        type OpenChat,
-        type PrizeContent,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { Confetti } from "svelte-confetti";
-    import { _ } from "svelte-i18n";
-    import Clock from "svelte-material-icons/Clock.svelte";
-    import Fingerprint from "svelte-material-icons/Fingerprint.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { claimsStore } from "../../stores/claims";
-    import { rtlStore } from "../../stores/rtl";
-    import { now500 } from "../../stores/time";
-    import { toastStore } from "../../stores/toast";
-    import ButtonGroup from "../ButtonGroup.svelte";
-    import Diamond from "../icons/Diamond.svelte";
-    import SpinningToken from "../icons/SpinningToken.svelte";
-    import SecureButton from "../SecureButton.svelte";
-    import Translatable from "../Translatable.svelte";
-    import Badges from "./profile/Badges.svelte";
-    import ChitEarnedBadge from "./profile/ChitEarnedBadge.svelte";
-    import ReAuthenticateModal from "./profile/ReAuthenticateModal.svelte";
-    import Streak from "./profile/Streak.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        content: PrizeContent;
-        chatId: ChatIdentifier;
-        messageId: bigint;
-        me: boolean;
-        intersecting: boolean;
-    }
-
-    let { content, chatId, messageId, me, intersecting }: Props = $props();
-
-    let progressWidth = $state(0);
-    let mouseEvent = $state<MouseEvent>();
-
-    async function claim(e: MouseEvent, auth: { signInProofJwt: string } | undefined) {
-        const signInProof = auth?.signInProofJwt;
-        if (signInProof === undefined && content.requiresCaptcha) {
-            mouseEvent = e;
-            showAuthentication = true;
-            return;
-        }
-
-        showAuthentication = false;
-        if (e.isTrusted && chatId.kind !== "direct_chat" && !me && userEligible) {
-            claimsStore.add(messageId);
-            client
-                .claimPrize(chatId, messageId, e, signInProof)
-                .then((success) => {
-                    if (!success) {
-                        toastStore.showFailureToast(i18nKey("prizes.claimFailed"));
-                    }
-                })
-                .finally(() => claimsStore.delete(messageId));
-        }
-    }
-
-    function onDiamondClick() {
-        publish("upgrade");
-    }
-
-    function onStreakClick() {
-        publish("claimDailyChit");
-    }
-    let logo = $derived(
-        [...$cryptoLookup.values()].find(
-            (t) => t.symbol.toLowerCase() === content.token.toLowerCase(),
-        )?.logo ?? "",
-    );
-    let total = $derived(content.prizesRemaining + content.prizesPending + content.winnerCount);
-    let percentage = $derived((content.winnerCount / total) * 100);
-    let claimedByYou = $derived(content.userIsWinner);
-    let finished = $derived($now500 >= Number(content.endDate));
-    let allClaimed = $derived(content.prizesRemaining <= 0);
-    let userEligible = $derived(
-        (!content.diamondOnly || $isDiamondStore) &&
-            (!content.lifetimeDiamondOnly || $isLifetimeDiamondStore) &&
-            // Unique person ("verified user") gating is suspended - always eligible
-            content.streakOnly <= $chitStateStore.streak &&
-            content.minChitEarned <= $chitStateStore.totalChitEarned,
-    );
-    let disabled = $derived(finished || claimedByYou || allClaimed || !userEligible);
-    let timeRemaining = $derived(
-        finished
-            ? $_("prizes.finished")
-            : client.formatTimeRemaining($now500, Number(content.endDate)),
-    );
-    let diamondStatus = $derived(
-        (content.lifetimeDiamondOnly
-            ? "lifetime"
-            : content.diamondOnly
-              ? "active"
-              : "inactive") as DiamondMembershipStatus["kind"],
-    );
-    let restrictedPrize = $derived(
-        content.diamondOnly ||
-            content.lifetimeDiamondOnly ||
-            content.streakOnly > 0 ||
-            content.requiresCaptcha ||
-            content.minChitEarned > 0,
-    );
-    let showAuthentication = $state(false);
-    let spin = $derived(intersecting && !finished && !allClaimed);
-    let mirror = $derived(intersecting && !$mobileWidth);
-
-    function reauthenticated(detail: {
-        key: ECDSAKeyIdentity;
-        delegation: DelegationChain;
-        provider: AuthProvider;
-        signInProofJwt: string;
-    }) {
-        if (mouseEvent !== undefined) {
-            claim(mouseEvent, detail);
-        }
-    }
-</script>
-
-{#if showAuthentication}
-    <ReAuthenticateModal
-        onCancel={() => (showAuthentication = false)}
-        onSuccess={reauthenticated}
-        title={i18nKey("prizes.authRequiredTitle")}
-        message={i18nKey("prizes.authRequiredMessage")} />
-{/if}
-
-<div class={`prize ${content.token}`}>
-    <div class="top">
-        <div class="countdown" class:rtl={$rtlStore}>
-            <Clock size={"1em"} color={"#ffffff"} />
-            <span>
-                {#if allClaimed && !finished}
-                    <Translatable resourceKey={i18nKey("prizes.allClaimed")} />
-                {:else}
-                    {timeRemaining}
-                {/if}
-            </span>
-            {#if restrictedPrize}
-                <div class="badges">
-                    <Badges
-                        {diamondStatus}
-                        uniquePerson={false}
-                        chitEarned={content.minChitEarned}
-                        streak={content.streakOnly} />
-                </div>
-            {/if}
-        </div>
-        <div class="prize-coin">
-            <SpinningToken {logo} {spin} {mirror} />
-        </div>
-    </div>
-    <div class="bottom">
-        {#if content.caption !== undefined}
-            <div class="caption">
-                {content.caption}
-            </div>
-        {/if}
-        {#if !me}
-            {#if restrictedPrize}
-                <div class="restricted">
-                    <Translatable resourceKey={i18nKey("prizes.restrictedMessage")} />
-                    {#if content.requiresCaptcha}
-                        <div class="captcha">
-                            <span class="fingerprint-icon">
-                                <Fingerprint
-                                    viewBox={"0 -1 24 24"}
-                                    size={"1.2em"}
-                                    color={"var(--accent)"} />
-                            </span>
-                            <Translatable
-                                resourceKey={i18nKey("prizes.authRequiredLabel", {
-                                    n: content.streakOnly,
-                                })} />
-                        </div>
-                    {/if}
-                    {#if content.minChitEarned > 0}
-                        <div class="chit_earned">
-                            <span class="chit_icon">
-                                <ChitEarnedBadge earned={content.minChitEarned}></ChitEarnedBadge>
-                            </span>
-
-                            <Translatable
-                                resourceKey={i18nKey("prizes.minChitEarnedValue", {
-                                    n: chitBands.get(content.minChitEarned) ?? "0",
-                                })}></Translatable>
-                        </div>
-                    {/if}
-                    {#if content.diamondOnly || content.lifetimeDiamondOnly}
-                        <div onclick={onDiamondClick}>
-                            <div>
-                                <Diamond
-                                    size={"1.1em"}
-                                    status={content.lifetimeDiamondOnly ? "lifetime" : "active"} />
-                            </div>
-                            <Translatable
-                                resourceKey={i18nKey(
-                                    "prizes." +
-                                        (content.lifetimeDiamondOnly
-                                            ? "lifetimeDiamondMembership"
-                                            : "diamondMembership"),
-                                )} />
-                        </div>
-                    {/if}
-                    <!-- Unique person ("verified user") gating is suspended -->
-                    {#if content.streakOnly > 0}
-                        <div onclick={onStreakClick}>
-                            <div><Streak days={content.streakOnly} /></div>
-                            <Translatable
-                                resourceKey={i18nKey("prizes.streakFull", {
-                                    n: content.streakOnly,
-                                })} />
-                        </div>
-                    {/if}
-                </div>
-            {/if}
-
-            {#if userEligible}
-                <div class="click"><Translatable resourceKey={i18nKey("prizes.click")} /></div>
-            {/if}
-        {:else if finished}
-            <div class="click"><Translatable resourceKey={i18nKey("prizes.prizeFinished")} /></div>
-        {:else}
-            <div class="click"><Translatable resourceKey={i18nKey("prizes.live")} /></div>
-        {/if}
-        <div class="progress" bind:clientWidth={progressWidth}>
-            <div
-                class="claimed"
-                class:rtl={$rtlStore}
-                style="background-size: {progressWidth}px 100%; width: {percentage}%">
-            </div>
-        </div>
-        <div class="number-claimed">
-            {content.winnerCount}/{total}
-        </div>
-        <div class="prize-claim">
-            {#if claimedByYou}
-                <div class="tada">
-                    <div class="confetti">
-                        <Confetti size={30} colorArray={[`url(${logo})`]} />
-                    </div>
-                </div>
-            {/if}
-
-            {#if !me}
-                <ButtonGroup align="fill">
-                    <SecureButton
-                        label={"Prize message clicked"}
-                        loading={$claimsStore.has(messageId)}
-                        onClick={(e) => claim(e, undefined)}
-                        {disabled}
-                        hollow
-                        ><Translatable
-                            resourceKey={i18nKey(
-                                claimedByYou
-                                    ? "prizes.claimed"
-                                    : finished
-                                      ? "prizes.finished"
-                                      : allClaimed
-                                        ? "prizes.allClaimed"
-                                        : "prizes.claim",
-                            )} /></SecureButton>
-                </ButtonGroup>
-            {/if}
-        </div>
-    </div>
-</div>
-
-<style lang="scss">
-    $accent: var(--prize);
-
-    :global(.message .prize .restricted .noselect) {
-        margin: auto;
-    }
-
-    .prize-claim :global(button) {
-        min-height: 45px !important;
-        min-width: unset !important;
-    }
-
-    .prize-claim :global(button.loading) {
-        background-color: $accent;
-        color: var(--button-txt);
-    }
-
-    .prize-claim :global(button:not(.disabled):hover) {
-        background-color: $accent;
-        color: var(--button-txt);
-    }
-
-    .prize-claim :global(button:not(.disabled)) {
-        border: 1px solid $accent !important;
-    }
-
-    .prize {
-        max-width: 400px;
-    }
-
-    .top {
-        position: relative;
-        padding: 30px 0 30px 0;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        background: radial-gradient(circle, rgba(238, 31, 122, 1) 0%, rgba(59, 12, 190, 1) 80%);
-    }
-
-    .countdown {
-        @include font-size(fs-60);
-        font-weight: 700;
-        position: absolute;
-        display: flex;
-        gap: $sp2;
-        align-items: center;
-        border-radius: var(--rd);
-        color: white;
-        top: 10px;
-        left: 10px;
-        background-color: rgba(0, 0, 0, 0.3);
-        padding: $sp2 $sp3;
-        text-transform: lowercase;
-
-        &.rtl {
-            left: unset;
-            right: 10px;
-        }
-
-        .badges {
-            gap: $sp2;
-            display: flex;
-            align-items: center;
-            @include font-size(fs-100);
-        }
-    }
-
-    .tada {
-        position: relative;
-
-        .confetti {
-            position: absolute;
-            pointer-events: none;
-            top: 50%;
-            left: 50%;
-        }
-    }
-
-    .number-claimed {
-        @include font(bold, normal, fs-80);
-        margin-bottom: $sp3;
-    }
-
-    .click,
-    .caption,
-    .restricted {
-        @include font(book, normal, fs-80);
-        margin-bottom: $sp4;
-    }
-
-    .progress {
-        height: toRem(16);
-        position: relative;
-        background: var(--chatSummary-bg-selected);
-        border-radius: $sp3;
-        margin-bottom: $sp2;
-        overflow: hidden;
-        @include mobile() {
-            margin-top: 0;
-        }
-
-        .claimed {
-            $red: rgba(234, 41, 41, 1);
-            $orange: rgba(244, 118, 4, 1);
-            $green: rgba(74, 233, 122, 1);
-            position: absolute;
-            top: 0;
-            left: 0;
-            bottom: 0;
-            background-image: linear-gradient(90deg, $green 0%, $orange 50%, $red 100%);
-            &.rtl {
-                left: unset;
-                right: 0;
-                background-image: linear-gradient(90deg, $red 0%, $orange 50%, $green 100%);
-            }
-        }
-    }
-
-    .bottom {
-        padding: $sp4;
-        padding-bottom: 0;
-    }
-    .image {
-        height: auto;
-        width: 360px;
-        @include mobile() {
-            width: 100%;
-        }
-    }
-
-    .restricted {
-        display: flex;
-        flex-direction: column;
-        gap: $sp2;
-
-        div {
-            display: flex;
-            flex-direction: row;
-            gap: $sp3;
-            align-items: center;
-            cursor: pointer;
-
-            :first-child {
-                width: $sp5;
-            }
-        }
-    }
-
-    .fingerprint-icon {
-        text-align: center;
-    }
-
-    .chit_icon {
-        $size: 18px;
-        width: $size;
-        height: $size;
-        display: flex;
-        align-items: center;
-    }
-</style>
diff --git a/frontend/app/src/components/home/PrizeContentBuilder.svelte b/frontend/app/src/components/home/PrizeContentBuilder.svelte
deleted file mode 100644
index fd64bffd15..0000000000
--- a/frontend/app/src/components/home/PrizeContentBuilder.svelte
+++ /dev/null
@@ -1,666 +0,0 @@
-<script lang="ts" module>
-    type Duration = "oneHour" | "oneDay" | "oneWeek";
-    type PrizeConfig = {
-        minChitEarned: number;
-        diamond: "none" | "standard" | "lifetime";
-        uniquePersonOnly: boolean;
-        minStreak: number;
-        requiresAuth: boolean;
-        distribution: "equal" | "random";
-        duration: Duration;
-    };
-    const defaultPrizeRestrictions: PrizeConfig = {
-        minChitEarned: 0,
-        diamond: "none",
-        uniquePersonOnly: false,
-        minStreak: 0,
-        requiresAuth: false,
-        distribution: "random",
-        duration: "oneDay",
-    };
-</script>
-
-<script lang="ts">
-    import type {
-        ChatSummary,
-        MessageContext,
-        OpenChat,
-        PrizeContentInitial,
-    } from "@client";
-    import {
-        bigIntMax,
-        chitBands,
-        cryptoBalanceStore,
-        cryptoLookup,
-        LocalStorageStore,
-        mobileWidth,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { i18nKey } from "../../i18n/i18n";
-    import { pinNumberErrorMessageStore } from "../../stores/pinNumber";
-    import Button from "../Button.svelte";
-    import ButtonGroup from "../ButtonGroup.svelte";
-    import Checkbox from "../Checkbox.svelte";
-    import ErrorMessage from "../ErrorMessage.svelte";
-    import EqualDistribution from "../icons/EqualDistribution.svelte";
-    import RandomDistribution from "../icons/RandomDistribution.svelte";
-    import Legend from "../Legend.svelte";
-    import ModalContent from "../ModalContent.svelte";
-    import NumberInput from "../NumberInput.svelte";
-    import Overlay from "../Overlay.svelte";
-    import Radio from "../Radio.svelte";
-    import Range from "../Range.svelte";
-    import Select from "../Select.svelte";
-    import TextArea from "../TextArea.svelte";
-    import Translatable from "../Translatable.svelte";
-    import AccountInfo from "./AccountInfo.svelte";
-    import BalanceWithRefresh from "./BalanceWithRefresh.svelte";
-    import CryptoSelector from "./CryptoSelector.svelte";
-    import TokenInput from "./TokenInput.svelte";
-
-    const ONE_HOUR = 1000 * 60 * 60;
-    const ONE_DAY = ONE_HOUR * 24;
-    const ONE_WEEK = ONE_DAY * 7;
-    const OC_FEE_PERCENTAGE = 5n;
-    const client = getContext<OpenChat>("client");
-    const streaks = [3, 7, 14, 30, 100, 365];
-
-    interface Props {
-        draftAmount: bigint;
-        ledger: string;
-        chat: ChatSummary;
-        context: MessageContext;
-        onClose: () => void;
-    }
-
-    let {
-        draftAmount = $bindable(),
-        ledger = $bindable(),
-        chat,
-        context,
-        onClose,
-    }: Props = $props();
-
-    const prizeConfig = new LocalStorageStore(
-        "openchat_prize_config",
-        defaultPrizeRestrictions,
-        JSON.stringify,
-        (s) => JSON.parse(s),
-        (_a, _b) => false,
-    );
-
-    let numberOfWinners = $state(20);
-    let distribution: "equal" | "random" = $state($prizeConfig.distribution);
-    const durations: Duration[] = ["oneHour", "oneDay", "oneWeek"];
-    let selectedDuration: Duration = $state($prizeConfig.duration);
-    let diamondType: "none" | "standard" | "lifetime" = $state($prizeConfig.diamond);
-    let diamondOnly = $derived(diamondType !== "none");
-    // Unique-person ("verified user") gating is suspended - force off so a value persisted from a
-    // previous session can't be silently reapplied (the restriction control is removed).
-    const uniquePersonOnly = false;
-    let minStreak = $state<number>($prizeConfig.minStreak);
-    let minChitEarned = $state<number>($prizeConfig.minChitEarned);
-    let streakOnly = $derived(minStreak > 0);
-    let chitOnly = $derived(minChitEarned > 0);
-    let refreshing = false;
-    let error: string | undefined = $state(undefined);
-    let message = $state("");
-    let toppingUp = $state(false);
-    let tokenChanging = $state(true);
-    let balanceWithRefresh: BalanceWithRefresh;
-    let tokenInputState: "ok" | "zero" | "too_low" | "too_high" = $state("ok");
-    let sending = $state(false);
-    let requiresAuth = $state($prizeConfig.requiresAuth);
-    let anyUser = $derived(!diamondOnly && !uniquePersonOnly && !streakOnly && !chitOnly);
-    let cryptoBalance = $derived($cryptoBalanceStore.get(ledger) ?? 0n);
-    let tokenDetails = $derived($cryptoLookup.get(ledger)!);
-    let symbol = $derived(tokenDetails.symbol);
-    let transferFee = $derived(tokenDetails.transferFee);
-    let transferFees = $derived(transferFee * BigInt(numberOfWinners ?? 0));
-    let prizeFees = $derived(transferFees + (draftAmount * OC_FEE_PERCENTAGE) / 100n);
-    let totalFees = $derived(transferFee + prizeFees);
-    let multiUserChat = $derived(chat.kind === "group_chat" || chat.kind === "channel");
-    let remainingBalance = $state(0n);
-    $effect(() => {
-        remainingBalance =
-            draftAmount > 0n ? cryptoBalance - draftAmount - totalFees : cryptoBalance;
-    });
-    let minAmount = $derived(100n * BigInt(numberOfWinners ?? 0) * transferFee);
-    let maxAmount = $derived(bigIntMax(cryptoBalance - totalFees, BigInt(0)));
-    let valid = $derived(error === undefined && tokenInputState === "ok" && !tokenChanging);
-    let zero = $derived(cryptoBalance <= transferFee && !tokenChanging);
-    let errorMessage = $derived(error !== undefined ? i18nKey(error) : $pinNumberErrorMessageStore);
-
-    $effect(() => {
-        if (tokenInputState === "too_low") {
-            error = $_("minimumAmount", {
-                values: {
-                    amount: client.formatTokens(minAmount, tokenDetails.decimals),
-                    symbol,
-                },
-            });
-        } else {
-            error = undefined;
-        }
-    });
-
-    function reset() {
-        balanceWithRefresh.refresh();
-    }
-
-    function onDiamondChanged() {
-        diamondType = diamondOnly ? "standard" : "none";
-    }
-
-    function recipientFromContext({ chatId }: MessageContext) {
-        switch (chatId.kind) {
-            case "channel":
-                return chatId.communityId;
-            case "group_chat":
-                return chatId.groupId;
-            default:
-                throw new Error("We can't create prizes in direct chats");
-        }
-    }
-
-    function getEndDate() {
-        const now = Date.now();
-        switch (selectedDuration) {
-            case "oneHour":
-                return BigInt(now + ONE_HOUR);
-            case "oneDay":
-                return BigInt(now + ONE_DAY);
-            case "oneWeek":
-                return BigInt(now + ONE_WEEK);
-        }
-    }
-
-    function send() {
-        const prizes = generatePrizes();
-        const amountE8s = prizes.reduce((total, p) => total + p) + prizeFees;
-
-        const content: PrizeContentInitial = {
-            kind: "prize_content_initial",
-            caption: message === "" ? undefined : message,
-            endDate: getEndDate(),
-            diamondOnly: diamondType === "standard",
-            lifetimeDiamondOnly: diamondType === "lifetime",
-            uniquePersonOnly,
-            streakOnly: minStreak,
-            minChitEarned: minChitEarned,
-            transfer: {
-                kind: "pending",
-                ledger,
-                token: symbol,
-                recipient: recipientFromContext(context),
-                amountE8s,
-                feeE8s: transferFee,
-                createdAtNanos: BigInt(Date.now()) * BigInt(1_000_000),
-            },
-            amount: draftAmount,
-            fees: totalFees,
-            prizes,
-            requiresCaptcha: requiresAuth,
-        };
-
-        prizeConfig.set({
-            minChitEarned,
-            diamond: diamondType,
-            uniquePersonOnly,
-            minStreak,
-            requiresAuth,
-            distribution,
-            duration: selectedDuration,
-        });
-
-        sending = true;
-        error = undefined;
-
-        client
-            .sendMessageWithContent(context, content, false)
-            .then((resp) => {
-                if (resp.kind === "success" || resp.kind === "transfer_success") {
-                    onClose();
-                } else if ($pinNumberErrorMessageStore === undefined) {
-                    error = "errorSendingMessage";
-                }
-            })
-            .finally(() => (sending = false));
-    }
-
-    function cancel() {
-        toppingUp = false;
-        onClose();
-    }
-
-    function onBalanceRefreshed() {
-        onBalanceRefreshFinished();
-        error = undefined;
-    }
-
-    function onBalanceRefreshError(err: string) {
-        onBalanceRefreshFinished();
-        error = err;
-    }
-
-    function onBalanceRefreshFinished() {
-        toppingUp = false;
-        tokenChanging = false;
-        if (remainingBalance < 0) {
-            remainingBalance = BigInt(0);
-            draftAmount = cryptoBalance - transferFee;
-            if (draftAmount < 0) {
-                draftAmount = BigInt(0);
-            }
-        }
-    }
-
-    function generatePrizes(): bigint[] {
-        if (!numberOfWinners) return [];
-
-        const share = Math.round(Number(draftAmount) / numberOfWinners);
-        switch (distribution) {
-            case "equal":
-                return generateEquallyDistributedPrizes(draftAmount, share);
-            case "random":
-                return generateRandomlyDistributedPrizes(draftAmount, share);
-        }
-    }
-
-    // make sure that any rounding errors are corrected for
-    function compensateRounding(prizes: bigint[], fund: bigint): bigint[] {
-        const total = prizes.reduce((agg, p) => agg + p, 0n);
-        const diff = fund - total;
-        if (diff !== 0n) {
-            prizes[0] = prizes[0] + diff;
-        }
-        return prizes;
-    }
-
-    function generateEquallyDistributedPrizes(fund: bigint, share: number): bigint[] {
-        const prizes = Array.from({ length: numberOfWinners }).map(() => BigInt(share));
-        return compensateRounding(prizes, fund);
-    }
-
-    function generateRandomlyDistributedPrizes(fund: bigint, share: number): bigint[] {
-        const min = share * 0.1;
-        const max = share * 2;
-
-        const intermediate = Array.from({ length: numberOfWinners }).map(() => random(min, max));
-        const total = intermediate.reduce((agg, p) => agg + p, 0);
-
-        // we might have more prizes than the total so let's scale
-        const scale = total / Number(fund);
-        const scaled = intermediate.map((p) => BigInt(Math.round(p / scale)));
-
-        const prizes = compensateRounding(scaled, fund);
-
-        return ensureMinPrizeAtLeastTransferFee(prizes);
-    }
-
-    function ensureMinPrizeAtLeastTransferFee(prizes: bigint[]): bigint[] {
-        let totalAdded = 0n;
-        let max = 0n;
-        let maxIndex = 0;
-        for (let i = 0; i < prizes.length; i++) {
-            const prize = prizes[i];
-            if (prize < transferFee) {
-                prizes[i] = transferFee;
-                totalAdded += transferFee - prize;
-            } else if (prize > max) {
-                max = prize;
-                maxIndex = i;
-            }
-        }
-
-        if (totalAdded > 0n) {
-            prizes[maxIndex] = max - totalAdded;
-        }
-
-        return prizes;
-    }
-
-    function random(min: number, max: number): number {
-        const range = max - min;
-        return Math.floor(min + Math.random() * range);
-    }
-
-    function onAnyUserChecked() {
-        anyUser = true;
-        diamondType = "none";
-        streakOnly = false;
-        chitOnly = false;
-    }
-
-    function onStreakChanged() {
-        minStreak = streakOnly ? 3 : 0;
-    }
-
-    function onChitChanged() {
-        minChitEarned = chitOnly ? 10_000 : 0;
-    }
-</script>
-
-<Overlay dismissible>
-    <ModalContent>
-        {#snippet header()}
-            <span class="header">
-                <div class="left">
-                    <div class="main-title">
-                        <div><Translatable resourceKey={i18nKey("prizes.title")} /></div>
-                        <div>
-                            <CryptoSelector bind:ledger />
-                        </div>
-                    </div>
-                </div>
-                <BalanceWithRefresh
-                    bind:toppingUp
-                    bind:this={balanceWithRefresh}
-                    {ledger}
-                    value={remainingBalance}
-                    label={i18nKey("cryptoAccount.shortBalanceLabel")}
-                    bold
-                    showTopUp
-                    onRefreshed={onBalanceRefreshed}
-                    onError={onBalanceRefreshError} />
-            </span>
-        {/snippet}
-        {#snippet body()}
-            <form>
-                <div class="body" class:zero={zero || toppingUp}>
-                    {#if zero || toppingUp}
-                        <AccountInfo {ledger} />
-                        {#if zero}
-                            <p>
-                                <Translatable
-                                    resourceKey={i18nKey("tokenTransfer.zeroBalance", {
-                                        token: symbol,
-                                    })} />
-                            </p>
-                        {/if}
-                        <p><Translatable resourceKey={i18nKey("tokenTransfer.makeDeposit")} /></p>
-                    {:else}
-                        <div class="transfer">
-                            <TokenInput
-                                {ledger}
-                                label={"prizes.totalAmount"}
-                                autofocus={!multiUserChat}
-                                bind:status={tokenInputState}
-                                transferFees={totalFees}
-                                {minAmount}
-                                {maxAmount}
-                                bind:amount={draftAmount} />
-                        </div>
-                        <div class="message">
-                            <Legend label={i18nKey("tokenTransfer.message")} />
-                            <TextArea
-                                maxlength={200}
-                                rows={3}
-                                autofocus={false}
-                                placeholder={i18nKey("tokenTransfer.messagePlaceholder")}
-                                bind:value={message} />
-                        </div>
-                        <div class="winners">
-                            <Legend
-                                label={i18nKey("prizes.numberOfWinners")}
-                                rules={i18nKey(numberOfWinners?.toString())} />
-                            <div class="pickers">
-                                <Range fat min={1} max={1000} bind:value={numberOfWinners} />
-                                <div class="num-picker">
-                                    <NumberInput
-                                        align={"right"}
-                                        defaultValue={20}
-                                        min={1}
-                                        max={1000}
-                                        bind:value={numberOfWinners} />
-                                </div>
-                            </div>
-                        </div>
-                        <Legend label={i18nKey("prizes.distribution")} />
-                        <div class="distributions">
-                            <!-- svelte-ignore a11y_click_events_have_key_events -->
-                            <div
-                                role="button"
-                                tabindex="0"
-                                onclick={() => (distribution = "random")}
-                                class="distribution">
-                                <div class:selected={distribution === "random"} class="dist-icon">
-                                    <RandomDistribution size={"100%"} color={"var(--icon-txt)"} />
-                                </div>
-                                <div class="dist-label">
-                                    <Translatable
-                                        resourceKey={i18nKey("prizes.randomDistribution")} />
-                                </div>
-                            </div>
-                            <!-- svelte-ignore a11y_click_events_have_key_events -->
-                            <div
-                                role="button"
-                                tabindex="0"
-                                onclick={() => (distribution = "equal")}
-                                class="distribution">
-                                <div class:selected={distribution === "equal"} class="dist-icon">
-                                    <EqualDistribution size={"100%"} color={"var(--icon-txt)"} />
-                                </div>
-                                <div class="dist-label">
-                                    <Translatable
-                                        resourceKey={i18nKey("prizes.equalDistribution")} />
-                                </div>
-                            </div>
-                        </div>
-                        <div class="config">
-                            <div class="duration">
-                                <Legend label={i18nKey("prizes.duration")} />
-                                {#each durations as d}
-                                    <Radio
-                                        onChange={() => (selectedDuration = d)}
-                                        value={d}
-                                        checked={selectedDuration === d}
-                                        id={`duration_${d}`}
-                                        label={i18nKey(`poll.${d}`)}
-                                        group={"prize_duration"} />
-                                {/each}
-                            </div>
-                            <div class="restrictions">
-                                <Legend label={i18nKey("prizes.restrictions")} />
-                                <Checkbox
-                                    id="captcha"
-                                    label={i18nKey(`prizes.authRequiredLabel`)}
-                                    bind:checked={requiresAuth} />
-                                <Checkbox
-                                    id="any_user"
-                                    label={i18nKey(`prizes.anyone`)}
-                                    bind:checked={anyUser}
-                                    onChange={onAnyUserChecked} />
-                                <Checkbox
-                                    id="diamond_only"
-                                    label={i18nKey(`prizes.onlyDiamond`)}
-                                    onChange={onDiamondChanged}
-                                    bind:checked={diamondOnly} />
-                                {#if diamondOnly}
-                                    <div class="diamond-choice">
-                                        <Radio
-                                            id={"standard-diamond"}
-                                            onChange={() => (diamondType = "standard")}
-                                            checked={diamondType === "standard"}
-                                            label={i18nKey(`prizes.standardDiamond`)}
-                                            group={"diamond"} />
-                                        <Radio
-                                            id={"lifetime-diamond"}
-                                            onChange={() => (diamondType = "lifetime")}
-                                            checked={diamondType === "lifetime"}
-                                            label={i18nKey(`prizes.lifetimeDiamond`)}
-                                            group={"diamond"} />
-                                    </div>
-                                {/if}
-                                <!-- Unique person ("verified user") gating is suspended -->
-                                <Checkbox
-                                    id="streak_only"
-                                    label={i18nKey(`prizes.onlyStreak`)}
-                                    onChange={onStreakChanged}
-                                    bind:checked={streakOnly} />
-                                {#if streakOnly}
-                                    <Select bind:value={minStreak}>
-                                        {#each streaks as streak}
-                                            <option value={streak}>
-                                                <Translatable
-                                                    resourceKey={i18nKey("prizes.streakValue", {
-                                                        n: streak.toString(),
-                                                    })}></Translatable>
-                                            </option>
-                                        {/each}
-                                    </Select>
-                                {/if}
-                                <Checkbox
-                                    id="chit_only"
-                                    label={i18nKey(`prizes.onlyChit`)}
-                                    onChange={onChitChanged}
-                                    bind:checked={chitOnly} />
-                                {#if chitOnly}
-                                    <Select bind:value={minChitEarned}>
-                                        {#each chitBands.entries() as [value, name]}
-                                            <option {value}>
-                                                <Translatable
-                                                    resourceKey={i18nKey(
-                                                        "prizes.minChitEarnedValue",
-                                                        { n: name },
-                                                    )}></Translatable>
-                                            </option>
-                                        {/each}
-                                    </Select>
-                                {/if}
-                            </div>
-                        </div>
-                        {#if errorMessage !== undefined}
-                            <div class="error">
-                                <ErrorMessage
-                                    ><Translatable resourceKey={errorMessage} /></ErrorMessage>
-                            </div>
-                        {/if}
-                    {/if}
-                </div>
-            </form>
-        {/snippet}
-        {#snippet footer()}
-            <span>
-                <ButtonGroup>
-                    <Button small={!$mobileWidth} tiny={$mobileWidth} secondary onClick={cancel}
-                        ><Translatable resourceKey={i18nKey("cancel")} /></Button>
-                    {#if toppingUp || zero}
-                        <Button
-                            small={!$mobileWidth}
-                            disabled={refreshing}
-                            loading={refreshing}
-                            tiny={$mobileWidth}
-                            onClick={reset}
-                            ><Translatable resourceKey={i18nKey("refresh")} /></Button>
-                    {:else}
-                        <Button
-                            small={!$mobileWidth}
-                            disabled={!valid || sending}
-                            loading={sending}
-                            tiny={$mobileWidth}
-                            onClick={send}
-                            ><Translatable resourceKey={i18nKey("tokenTransfer.send")} /></Button>
-                    {/if}
-                </ButtonGroup>
-            </span>
-        {/snippet}
-    </ModalContent>
-</Overlay>
-
-<style lang="scss">
-    :global(.restrictions .diamond-choice .radio) {
-        margin-bottom: 0;
-    }
-
-    .header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: $sp2;
-
-        .left {
-            flex: auto;
-            display: flex;
-            align-items: center;
-            gap: $sp4;
-
-            .main-title {
-                flex: auto;
-                display: flex;
-                align-items: baseline;
-                gap: 10px;
-                @include font(bold, normal, fs-120);
-            }
-        }
-    }
-
-    .body {
-        transition: background-color 100ms ease-in-out;
-        @include font(book, normal, fs-100, 28);
-    }
-
-    .transfer {
-        margin-bottom: $sp4;
-    }
-
-    .how-to {
-        margin-top: $sp4;
-    }
-
-    .distributions {
-        display: flex;
-        gap: $sp6;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: $sp3;
-
-        .distribution {
-            cursor: pointer;
-        }
-
-        .dist-icon {
-            margin: $sp3 0;
-            padding: $sp3 $sp5;
-            border-radius: $sp3;
-            transition: background-color 250ms ease-in-out;
-            &.selected {
-                background-color: var(--icon-hv);
-            }
-        }
-
-        .dist-label {
-            text-align: center;
-        }
-    }
-
-    .config {
-        display: flex;
-        gap: $sp5;
-        justify-content: space-between;
-
-        .restrictions,
-        .duration {
-            flex: 1;
-        }
-    }
-
-    .pickers {
-        display: flex;
-        align-items: center;
-        gap: $sp3;
-
-        .num-picker {
-            flex: 0 0 80px;
-        }
-    }
-
-    .error {
-        margin-top: $sp4;
-    }
-
-    .diamond-choice {
-        margin-left: $sp6;
-    }
-</style>
diff --git a/frontend/app/src/components/home/PrizeWinnerContent.svelte b/frontend/app/src/components/home/PrizeWinnerContent.svelte
deleted file mode 100644
index bd04863bac..0000000000
--- a/frontend/app/src/components/home/PrizeWinnerContent.svelte
+++ /dev/null
@@ -1,158 +0,0 @@
-<script lang="ts">
-    import type { OpenChat, PrizeWinnerContent } from "@client";
-    import { allUsersStore, cryptoLookup, currentUserIdStore } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import SpinningToken from "../icons/SpinningToken.svelte";
-    import type { ProfileLinkClickedEvent } from "@webcomponents/profileLink";
-    import Markdown from "@shared_components/Markdown.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        content: PrizeWinnerContent;
-    }
-
-    let { content }: Props = $props();
-
-    function username(userId: string): string {
-        return userId === $currentUserIdStore
-            ? $_("you")
-            : `${$allUsersStore.get(userId)?.username ?? $_("unknown")}`;
-    }
-
-    function openUserProfile(ev: Event) {
-        ev.target?.dispatchEvent(
-            new CustomEvent<ProfileLinkClickedEvent>("profile-clicked", {
-                detail: {
-                    userId: content.transaction.recipient,
-                    chatButton: false,
-                    inGlobalContext: false,
-                },
-                bubbles: true,
-            }),
-        );
-        ev.stopPropagation();
-    }
-    let logo = $derived($cryptoLookup.get(content.transaction.ledger)?.logo ?? "");
-    let tokenDetails = $derived($cryptoLookup.get(content.transaction.ledger)!);
-    let symbol = $derived(tokenDetails.symbol);
-    let amount = $derived(
-        client.formatTokens(content.transaction.amountE8s, tokenDetails.decimals),
-    );
-    let winner = $derived(`${username(content.transaction.recipient)}`);
-    let me = $derived($currentUserIdStore === content.transaction.recipient);
-    let transactionLinkText = $derived(client.buildTransactionLink($_, content.transaction));
-</script>
-
-<div class="msg">
-    <div class="wrapper" class:other={!me}>
-        <div class="graphic" class:tiny={!me}>
-            {#if me}
-                <img class="lid" src={"/assets/lid.png"} />
-                <div class="winner-coin">
-                    <SpinningToken spin mirror={false} size={"small"} {logo} />
-                </div>
-                <img class="box" src={"/assets/box.png"} />
-            {:else}
-                <SpinningToken spin={false} mirror size={"tiny"} {logo} />
-            {/if}
-        </div>
-        <div class="txt" class:other={!me}>
-            <div class="label" onclick={openUserProfile}>
-                <Markdown
-                    text={$_("prizes.winner", {
-                        values: { recipient: winner, amount, token: symbol },
-                    })} />
-            </div>
-            {#if transactionLinkText !== undefined}
-                <div class="link">
-                    <Markdown text={transactionLinkText} />
-                </div>
-            {/if}
-        </div>
-    </div>
-</div>
-
-<style lang="scss">
-    .msg {
-        text-align: center;
-        padding-top: $sp2;
-    }
-
-    .wrapper.other {
-        display: flex;
-        align-items: center;
-        gap: $sp3;
-    }
-
-    .txt.other {
-        text-align: start;
-    }
-
-    .label {
-        cursor: pointer;
-        @include font(book, normal, fs-100);
-    }
-
-    .link {
-        @include font(book, normal, fs-80, 28);
-        color: var(--txt-light);
-    }
-
-    .graphic {
-        display: flex;
-        flex-direction: column;
-        padding: 10px 60px;
-
-        &.tiny {
-            padding: 0 10px;
-        }
-
-        .winner-coin {
-            margin-top: -45px;
-            margin-bottom: -34px;
-            align-self: center;
-            animation: bob 3s linear infinite;
-        }
-
-        .lid {
-            width: 90px;
-            height: auto;
-            align-self: flex-end;
-            position: relative;
-            animation: weave 3s linear infinite;
-            z-index: 3;
-        }
-
-        .box {
-            width: 130px;
-            height: auto;
-            align-self: center;
-        }
-    }
-
-    @keyframes bob {
-        0% {
-            transform: translateY(0);
-        }
-        50% {
-            transform: translateY(-8px);
-        }
-        100% {
-            transform: translateY(0);
-        }
-    }
-
-    @keyframes weave {
-        0% {
-            transform: translateX(2px) translateY(0);
-        }
-        50% {
-            transform: translateX(8px) translateY(-5px);
-        }
-        100% {
-            transform: translateX(2px) translateY(0);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/ProposalGroupFilters.svelte b/frontend/app/src/components/home/ProposalGroupFilters.svelte
deleted file mode 100644
index 125911f8a7..0000000000
--- a/frontend/app/src/components/home/ProposalGroupFilters.svelte
+++ /dev/null
@@ -1,170 +0,0 @@
-<script lang="ts">
-    import type { ChatSummary, OpenChat } from "@client";
-    import {
-        filteredProposalsStore,
-        iconSize,
-        mobileWidth,
-        proposalTopicsStore,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import Close from "svelte-material-icons/Close.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import {
-        proposalActionCategories,
-        type ProposalActionCategory,
-    } from "../../stores/proposalSections";
-    import { OC_GOVERNANCE_CANISTER_ID } from "../../utils/sns";
-    import Checkbox from "../Checkbox.svelte";
-    import CollapsibleCard from "../CollapsibleCard.svelte";
-    import HoverIcon from "../HoverIcon.svelte";
-    import LinkButton from "../LinkButton.svelte";
-    import SectionHeader from "../SectionHeader.svelte";
-    import Translatable from "../Translatable.svelte";
-
-    interface Props {
-        selectedChat: ChatSummary;
-        onClose: () => void;
-    }
-
-    let { selectedChat, onClose }: Props = $props();
-
-    type SectionLabels = Record<ProposalActionCategory, string>;
-
-    const sectionLabels: SectionLabels = {
-        all: "",
-        unknown: "proposal.unknownActionCategory",
-        builtIn: "proposal.builtInAction",
-        userIndex: "proposal.userIndexAction",
-        groupIndex: "proposal.groupIndexAction",
-        notifications: "proposal.notificationsAction",
-        proposalsBot: "proposal.proposalsBotAction",
-        storageIndex: "proposal.storageIndexAction",
-        cyclesDispenser: "proposal.cyclesDispenserAction",
-        registry: "proposal.registryAction",
-        neuronController: "proposal.neuronControllerAction",
-        openchatInstaller: "proposal.openchatInstallerAction",
-    };
-
-    const client = getContext<OpenChat>("client");
-    let topics = $derived([...$proposalTopicsStore]);
-    let groupTopics = $derived(
-        selectedChat.kind !== "direct_chat" &&
-            selectedChat.subtype?.governanceCanisterId === OC_GOVERNANCE_CANISTER_ID,
-    );
-
-    let grouped = $derived([
-        ...client.groupBy(topics, ([id, _]) => {
-            if (!groupTopics) return "all";
-
-            if (id < 1000) {
-                return "builtIn";
-            } else if (id < 2000) {
-                return "userIndex";
-            } else if (id < 3000) {
-                return "groupIndex";
-            } else if (id < 4000) {
-                return "notifications";
-            } else if (id < 5000) {
-                return "proposalsBot";
-            } else if (id < 6000) {
-                return "storageIndex";
-            } else if (id < 7000) {
-                return "cyclesDispenser";
-            } else if (id < 8000) {
-                return "registry";
-            } else if (id < 9000) {
-                return "neuronController";
-            } else if (id < 10000) {
-                return "openchatInstaller";
-            } else {
-                return "unknown";
-            }
-        }),
-    ]);
-
-    function kebab(name: string): string {
-        return `topic_${name.toLowerCase().split(" ").join("_")}`;
-    }
-</script>
-
-<SectionHeader shadow flush={$mobileWidth}>
-    <h4><Translatable resourceKey={i18nKey("proposal.filter")} /></h4>
-    <span title={$_("close")} class="close" onclick={onClose}>
-        <HoverIcon>
-            <Close size={$iconSize} color={"var(--icon-txt)"} />
-        </HoverIcon>
-    </span>
-</SectionHeader>
-
-<div class="proposal-filters">
-    <div class="controls">
-        <LinkButton onClick={() => client.enableAllProposalFilters()} underline={"hover"}
-            ><Translatable resourceKey={i18nKey("proposal.enableAll")} /></LinkButton>
-        <LinkButton
-            onClick={() => client.disableAllProposalFilters(topics.map(([id]) => id))}
-            underline={"hover"}
-            ><Translatable resourceKey={i18nKey("proposal.disableAll")} /></LinkButton>
-    </div>
-    {#each grouped as [category, topicsInCategory]}
-        {#if groupTopics}
-            <CollapsibleCard
-                onToggle={() => proposalActionCategories.toggle(category)}
-                open={$proposalActionCategories[category]}
-                headerText={i18nKey(sectionLabels[category])}>
-                {#each topicsInCategory as [id, label]}
-                    <div class="toggle">
-                        <Checkbox
-                            id={kebab(label)}
-                            onChange={() => client.toggleProposalFilter(id)}
-                            label={i18nKey(label)}
-                            checked={!$filteredProposalsStore?.hasFilter(id)} />
-                    </div>
-                {/each}
-            </CollapsibleCard>
-        {:else}
-            {#each topicsInCategory as [id, label]}
-                <div class="toggle">
-                    <Checkbox
-                        id={kebab(label)}
-                        onChange={() => client.toggleProposalFilter(id)}
-                        label={i18nKey(label)}
-                        checked={!$filteredProposalsStore?.hasFilter(id)} />
-                </div>
-            {/each}
-        {/if}
-    {/each}
-</div>
-
-<style lang="scss">
-    h4 {
-        flex: 1;
-        margin: 0;
-        @include font-size(fs-120);
-    }
-    .close {
-        flex: 0 0 30px;
-    }
-
-    .toggle {
-        margin-bottom: $sp4;
-    }
-
-    .proposal-filters {
-        background-color: var(--bg);
-        padding: $sp4;
-        padding-bottom: 0;
-        @include nice-scrollbar();
-
-        @include mobile() {
-            height: 100%;
-        }
-    }
-
-    .controls {
-        display: flex;
-        gap: $sp4;
-        align-items: center;
-        margin-bottom: $sp4;
-    }
-</style>
diff --git a/frontend/app/src/components/home/ReminderBuilder.svelte b/frontend/app/src/components/home/ReminderBuilder.svelte
deleted file mode 100644
index ad17ea16b9..0000000000
--- a/frontend/app/src/components/home/ReminderBuilder.svelte
+++ /dev/null
@@ -1,181 +0,0 @@
-<script lang="ts">
-    import { mobileWidth, type ChatIdentifier, type OpenChat } from "@client";
-    import { getContext } from "svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { now } from "../../stores/time";
-    import { toastStore } from "../../stores/toast";
-    import Button from "../Button.svelte";
-    import ButtonGroup from "../ButtonGroup.svelte";
-    import DateInput from "../DateInput.svelte";
-    import Legend from "../Legend.svelte";
-    import ModalContent from "../ModalContent.svelte";
-    import Overlay from "../Overlay.svelte";
-    import Select from "../Select.svelte";
-    import TextArea from "../TextArea.svelte";
-    import Translatable from "../Translatable.svelte";
-
-    interface Props {
-        chatId: ChatIdentifier;
-        eventIndex: number;
-        threadRootMessageIndex: number | undefined;
-        onClose: () => void;
-    }
-
-    let { chatId, eventIndex, threadRootMessageIndex, onClose }: Props = $props();
-
-    const client = getContext<OpenChat>("client");
-
-    let busy = $state(false);
-    let note: string = $state("");
-    let selectedIntervalIndex = $state(0);
-    let intervals = [
-        {
-            label: i18nKey("reminders.twentyMinutes"),
-            index: 0,
-        },
-        {
-            label: i18nKey("reminders.oneHour"),
-            index: 1,
-        },
-        {
-            label: i18nKey("reminders.threeHours"),
-            index: 2,
-        },
-        {
-            label: i18nKey("reminders.tomorrow"),
-            index: 3,
-        },
-        {
-            label: i18nKey("reminders.nextWeek"),
-            index: 4,
-        },
-        {
-            label: i18nKey("reminders.custom"),
-            index: 5,
-        },
-    ];
-
-    function deriveRemindAt(now: number, interval: number): number {
-        if (interval === 0) {
-            return now + 20 * 60 * 1000;
-        }
-        if (interval === 1) {
-            return now + 60 * 60 * 1000;
-        }
-        if (interval === 2) {
-            return now + 180 * 60 * 1000;
-        }
-        if (interval === 3) {
-            return tomorrow(now);
-        }
-        if (interval === 4) {
-            return nextWeek(now);
-        }
-        if (interval === 5 && customTimestamp != null) {
-            return Number(customTimestamp);
-        }
-        return now;
-    }
-
-    function nextWeek(now: number) {
-        const date = new Date(now);
-        date.setDate(date.getDate() + ((1 + 7 - date.getDay()) % 7));
-        return toNine(date).getTime();
-    }
-
-    function tomorrow(now: number) {
-        const date = new Date(now);
-        date.setDate(date.getDate() + 1);
-        return toNine(date).getTime();
-    }
-
-    function toNine(date: Date): Date {
-        date.setHours(9);
-        date.setMinutes(0);
-        date.setSeconds(0);
-        date.setMilliseconds(0);
-        return date;
-    }
-
-    function createReminder() {
-        busy = true;
-        client
-            .setMessageReminder(chatId, eventIndex, remindAtMs, note, threadRootMessageIndex)
-            .then((success) => {
-                if (success) {
-                    toastStore.showSuccessToast(i18nKey("reminders.success"));
-                } else {
-                    toastStore.showFailureToast(i18nKey("reminders.failure"));
-                }
-            })
-            .finally(() => (busy = false));
-        onClose();
-    }
-    let customTimestamp = $state<bigint | null | undefined>();
-    let remindAtMs = $derived(deriveRemindAt($now, selectedIntervalIndex));
-    let remindAtDate = $derived(new Date(remindAtMs));
-    let valid = $derived(remindAtMs >= $now);
-</script>
-
-<Overlay {onClose} dismissible>
-    <ModalContent overflowVisible {onClose} closeIcon>
-        {#snippet header()}
-            <h1>⏰ <Translatable resourceKey={i18nKey("reminders.title")} /></h1>
-        {/snippet}
-        {#snippet body()}
-            <div class="interval">
-                <Legend label={i18nKey("reminders.menu")} />
-                <Select bind:value={selectedIntervalIndex}>
-                    {#each intervals as interval}
-                        <option value={interval.index}
-                            ><Translatable resourceKey={interval.label} /></option>
-                    {/each}
-                </Select>
-            </div>
-            {#if selectedIntervalIndex === 5}
-                <div class="custom">
-                    <DateInput
-                        futureOnly
-                        placeholder={i18nKey("reminders.customPlaceholder")}
-                        onchange={(t) => (customTimestamp = t)}
-                        value={customTimestamp} />
-                </div>
-            {/if}
-            <div class="note">
-                <Legend label={i18nKey("reminders.note")} rules={i18nKey("reminders.optional")} />
-                <TextArea
-                    maxlength={1000}
-                    rows={4}
-                    placeholder={i18nKey("reminders.notePlaceholder")}
-                    bind:value={note} />
-            </div>
-
-            <div class="remind-at">
-                <Translatable
-                    resourceKey={i18nKey("reminders.remindAt", {
-                        datetime: client.toDatetimeString(remindAtDate),
-                    })} />
-            </div>
-        {/snippet}
-        {#snippet footer()}
-            <ButtonGroup>
-                <Button secondary small={!$mobileWidth} tiny={$mobileWidth} onClick={onClose}
-                    ><Translatable resourceKey={i18nKey("cancel")} /></Button>
-                <Button
-                    disabled={busy || !valid}
-                    loading={busy}
-                    small={!$mobileWidth}
-                    tiny={$mobileWidth}
-                    onClick={createReminder}
-                    ><Translatable resourceKey={i18nKey("reminders.create")} /></Button>
-            </ButtonGroup>
-        {/snippet}
-    </ModalContent>
-</Overlay>
-
-<style lang="scss">
-    .remind-at {
-        color: var(--txt-light);
-        @include font(book, normal, fs-80);
-    }
-</style>
diff --git a/frontend/app/src/components/home/ReminderNotes.svelte b/frontend/app/src/components/home/ReminderNotes.svelte
deleted file mode 100644
index eba7d796f8..0000000000
--- a/frontend/app/src/components/home/ReminderNotes.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<script lang="ts">
-    import Markdown from "@shared_components/Markdown.svelte";
-
-    interface Props {
-        notes: string | undefined;
-    }
-
-    let { notes }: Props = $props();
-</script>
-
-{#if notes !== undefined && notes !== ""}
-    <div class="notes">
-        <Markdown inline suppressLinks text={notes} />
-    </div>
-{/if}
-
-<style lang="scss">
-    .notes {
-        margin-top: $sp4;
-        @include font(book, italic, fs-100);
-    }
-</style>
diff --git a/frontend/app/src/components/home/RepliesTo.svelte b/frontend/app/src/components/home/RepliesTo.svelte
deleted file mode 100644
index 1b4beda567..0000000000
--- a/frontend/app/src/components/home/RepliesTo.svelte
+++ /dev/null
@@ -1,159 +0,0 @@
-<script lang="ts">
-    import {
-        type ChatIdentifier,
-        type RehydratedReplyContext,
-        chatIdentifiersEqual,
-        chatListScopeStore,
-        currentUserIdStore,
-        OpenChat,
-        routeForChatIdentifier,
-        selectedChatWebhooksStore,
-        selectedCommunityMembersStore,
-    } from "@client";
-    import { navigate } from "@utils/navigation";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { rtlStore } from "../../stores/rtl";
-    import Link from "../Link.svelte";
-    import ChatMessageContent from "./ChatMessageContent.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        chatId: ChatIdentifier;
-        repliesTo: RehydratedReplyContext;
-        readonly: boolean;
-        intersecting: boolean;
-        onGoToMessageIndex?: (args: { index: number }) => void;
-        onRemovePreview?: (url: string) => void;
-    }
-
-    let { chatId, repliesTo, readonly, intersecting, onGoToMessageIndex, onRemovePreview }: Props =
-        $props();
-
-    let debug = false;
-
-    let me = $derived(repliesTo.senderId === $currentUserIdStore);
-    let isTextContent = $derived(repliesTo.content?.kind === "text_content");
-    let isP2PSwap = $derived(repliesTo.content.kind === "p2p_swap_content");
-    let displayName = $derived(
-        me
-            ? client.toTitleCase($_("you"))
-            : client.getDisplayName(
-                  repliesTo.senderId,
-                  $selectedCommunityMembersStore,
-                  $selectedChatWebhooksStore,
-              ),
-    );
-
-    function getUrl() {
-        const path = [
-            routeForChatIdentifier($chatListScopeStore.kind, repliesTo.sourceContext.chatId),
-            repliesTo.sourceContext.threadRootMessageIndex ?? repliesTo.messageIndex,
-        ];
-        if (repliesTo.sourceContext.threadRootMessageIndex !== undefined) {
-            path.push(repliesTo.messageIndex);
-        }
-        return path.join("/");
-    }
-
-    function zoomToMessage() {
-        if (chatIdentifiersEqual(repliesTo.sourceContext.chatId, chatId)) {
-            onGoToMessageIndex?.({
-                index: repliesTo.messageIndex,
-            });
-        } else {
-            navigate(getUrl());
-        }
-    }
-</script>
-
-<Link onClick={zoomToMessage}>
-    <div
-        class="reply-wrapper"
-        class:me
-        class:rtl={$rtlStore}
-        class:p2pSwap={isP2PSwap}
-        class:crypto={repliesTo.content.kind === "crypto_content"}>
-        <h4 class="username" class:text-content={isTextContent}>
-            {displayName}
-        </h4>
-        {#if repliesTo.content !== undefined}
-            <div class="inert">
-                <ChatMessageContent
-                    {me}
-                    {readonly}
-                    messageContext={repliesTo.sourceContext}
-                    {intersecting}
-                    messageId={repliesTo.messageId}
-                    messageIndex={repliesTo.messageIndex}
-                    senderId={repliesTo.senderId}
-                    edited={repliesTo.edited}
-                    fill={false}
-                    failed={false}
-                    blockLevelMarkdown={true}
-                    truncate
-                    reply
-                    {onRemovePreview}
-                    content={repliesTo.content}
-                    ogPreviews={[]} />
-            </div>
-            {#if debug}
-                <pre>EventIdx: {repliesTo.eventIndex}</pre>
-                <pre>MsgId: {repliesTo.messageId}</pre>
-                <pre>SenderId: {repliesTo.senderId}</pre>
-            {/if}
-        {:else}
-            {"TODO - we don't have the message content for this"}
-        {/if}
-    </div>
-</Link>
-
-<style lang="scss">
-    :global(.reply-wrapper.me a) {
-        color: inherit;
-    }
-
-    .reply-wrapper {
-        border-radius: $sp3;
-        padding: $sp3;
-        background-color: var(--currentChat-msg-bg);
-        color: var(--currentChat-msg-txt);
-        border: var(--bw) solid var(--replies-bd);
-        cursor: pointer;
-        margin-bottom: $sp3;
-        overflow: hidden;
-        @include nice-scrollbar();
-        max-height: 300px;
-
-        .inert {
-            pointer-events: none;
-        }
-
-        &.me {
-            background-color: var(--currentChat-msg-me-bg);
-            border: var(--bw) solid var(--currentChat-msg-me-bd);
-            color: var(--currentChat-msg-me-txt);
-        }
-
-        &:after {
-            content: "";
-            display: table;
-            clear: both;
-        }
-
-        &.p2pSwap {
-            max-width: 350px;
-        }
-    }
-
-    .username {
-        margin: 0;
-        margin-bottom: $sp1;
-        display: inline;
-
-        &.text-content {
-            display: block;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/ReplyingTo.svelte b/frontend/app/src/components/home/ReplyingTo.svelte
deleted file mode 100644
index fcd2651358..0000000000
--- a/frontend/app/src/components/home/ReplyingTo.svelte
+++ /dev/null
@@ -1,124 +0,0 @@
-<script lang="ts">
-    import type { CreatedUser, EnhancedReplyContext, OpenChat } from "@client";
-    import {
-        iconSize,
-        selectedChatWebhooksStore,
-        selectedCommunityMembersStore,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import Close from "svelte-material-icons/Close.svelte";
-    import { rtlStore } from "../../stores/rtl";
-    import HoverIcon from "../HoverIcon.svelte";
-    import ChatMessageContent from "./ChatMessageContent.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        replyingTo: EnhancedReplyContext;
-        user: CreatedUser;
-        readonly: boolean;
-        timestamp?: bigint | undefined;
-        onCancelReply: () => void;
-    }
-
-    let { replyingTo, user, readonly, timestamp = undefined, onCancelReply }: Props = $props();
-
-    let me = $derived(replyingTo.sender?.userId === user?.userId);
-
-    let displayName = $derived(
-        me
-            ? client.toTitleCase($_("you"))
-            : client.getDisplayName(
-                  replyingTo.sender?.userId,
-                  $selectedCommunityMembersStore,
-                  $selectedChatWebhooksStore,
-              ),
-    );
-</script>
-
-<div
-    class="replying"
-    class:me
-    class:rtl={$rtlStore}
-    class:crypto={replyingTo.content.kind === "crypto_content"}>
-    <div class="close-icon" onclick={onCancelReply}>
-        <HoverIcon compact>
-            <Close size={$iconSize} color={me ? "#fff" : "#aaa"} />
-        </HoverIcon>
-    </div>
-    <h4 class="username">
-        {displayName}
-    </h4>
-    <div class="reply-content">
-        <ChatMessageContent
-            {readonly}
-            {timestamp}
-            messageContext={replyingTo.sourceContext}
-            fill={false}
-            failed={false}
-            blockLevelMarkdown={false}
-            {me}
-            intersecting={true}
-            messageId={replyingTo.messageId}
-            messageIndex={replyingTo.messageIndex}
-            senderId={replyingTo.senderId}
-            truncate
-            edited={replyingTo.edited}
-            content={replyingTo.content}
-            ogPreviews={[]}
-            reply />
-    </div>
-</div>
-
-<style lang="scss">
-    :global(.replying.me a) {
-        color: inherit;
-    }
-
-    .replying {
-        @include font(book, normal, fs-100);
-        margin-top: $sp4;
-        min-width: 120px;
-        border-radius: $sp3;
-        padding: $sp3;
-        background-color: var(--currentChat-msg-bg);
-        color: var(--currentChat-msg-txt);
-        position: relative;
-        @include nice-scrollbar();
-        max-height: 150px;
-
-        .close-icon {
-            position: absolute;
-            top: $sp2;
-            right: $sp2;
-        }
-
-        &.rtl {
-            .close-icon {
-                right: unset;
-                left: $sp2;
-            }
-        }
-
-        &.me {
-            background-color: var(--currentChat-msg-me-bg);
-            color: #ffffff;
-        }
-
-        &:after {
-            content: "";
-            display: table;
-            clear: both;
-        }
-
-        .reply-content {
-            pointer-events: none;
-        }
-    }
-
-    .username {
-        margin: 0;
-        margin-bottom: $sp2;
-    }
-</style>
diff --git a/frontend/app/src/components/home/ReportMessage.svelte b/frontend/app/src/components/home/ReportMessage.svelte
deleted file mode 100644
index 5b36c84cfa..0000000000
--- a/frontend/app/src/components/home/ReportMessage.svelte
+++ /dev/null
@@ -1,131 +0,0 @@
-<script lang="ts">
-    import { iconSize, mobileWidth, type ChatIdentifier, type OpenChat } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import Flag from "svelte-material-icons/Flag.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { toastStore } from "../../stores/toast";
-    import Button from "../Button.svelte";
-    import ButtonGroup from "../ButtonGroup.svelte";
-    import Checkbox from "../Checkbox.svelte";
-    import Legend from "../Legend.svelte";
-    import ModalContent from "../ModalContent.svelte";
-    import Overlay from "../Overlay.svelte";
-    import Select from "../Select.svelte";
-    import Translatable from "../Translatable.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-
-    interface Props {
-        chatId: ChatIdentifier;
-        messageId: bigint;
-        threadRootMessageIndex: number | undefined;
-        canDelete: boolean;
-        onClose: () => void;
-    }
-
-    let { chatId, messageId, threadRootMessageIndex, canDelete, onClose }: Props = $props();
-
-    const client = getContext<OpenChat>("client");
-
-    let deleteMessage = $state(false);
-    let busy = false;
-    let selectedReasonIndex = $state(-1);
-    let reasons = [
-        "report.pleaseSelect",
-        "report.threat",
-        "report.child",
-        "report.nonConsensual",
-        "report.selfHarm",
-        "report.violence",
-        "report.scam",
-    ];
-
-    let valid = $derived(selectedReasonIndex > -1);
-
-    function createReport() {
-        report();
-        onClose();
-    }
-
-    function report() {
-        client
-            .reportMessage(chatId, threadRootMessageIndex, messageId, canDelete && deleteMessage)
-            .then((success) => {
-                if (success) {
-                    toastStore.showSuccessToast(i18nKey("report.success"));
-                } else {
-                    toastStore.showFailureToast(i18nKey("report.failure"));
-                }
-            });
-    }
-</script>
-
-<Overlay {onClose} dismissible>
-    <ModalContent {onClose} closeIcon>
-        {#snippet header()}
-            <span class="header">
-                <Flag size={$iconSize} color={"var(--error)"} />
-                <h1><Translatable resourceKey={i18nKey("report.title")} /></h1>
-            </span>
-        {/snippet}
-        {#snippet body()}
-            <span>
-                <div class="reason">
-                    <Legend label={i18nKey("report.reason")} />
-                    <Select bind:value={selectedReasonIndex}>
-                        {#each reasons as reason, i}
-                            <option disabled={i === 0} value={i - 1}
-                                ><Translatable resourceKey={i18nKey(reason)} /></option>
-                        {/each}
-                    </Select>
-                </div>
-                {#if canDelete}
-                    <div class="delete">
-                        <Checkbox
-                            id={"delete_message"}
-                            label={i18nKey("report.deleteMessage")}
-                            bind:checked={deleteMessage} />
-                    </div>
-                {/if}
-                <div class="advice">
-                    <Markdown
-                        text={$_("report.advice", {
-                            values: { rules: "https://oc.app/guidelines?section=3" },
-                        })} />
-                </div>
-            </span>
-        {/snippet}
-        {#snippet footer()}
-            <span>
-                <ButtonGroup>
-                    <Button secondary small={!$mobileWidth} tiny={$mobileWidth} onClick={onClose}
-                        ><Translatable resourceKey={i18nKey("cancel")} /></Button>
-                    <Button
-                        disabled={busy || !valid}
-                        loading={busy}
-                        small={!$mobileWidth}
-                        tiny={$mobileWidth}
-                        onClick={createReport}
-                        ><Translatable resourceKey={i18nKey("report.menu")} /></Button>
-                </ButtonGroup>
-            </span>
-        {/snippet}
-    </ModalContent>
-</Overlay>
-
-<style lang="scss">
-    .header {
-        display: flex;
-        gap: $sp3;
-        align-items: center;
-    }
-
-    .advice {
-        @include font(book, normal, fs-80);
-        color: var(--txt-light);
-    }
-
-    .delete {
-        margin-bottom: $sp4;
-    }
-</style>
diff --git a/frontend/app/src/components/home/ReportedMessageContent.svelte b/frontend/app/src/components/home/ReportedMessageContent.svelte
deleted file mode 100644
index b48848d025..0000000000
--- a/frontend/app/src/components/home/ReportedMessageContent.svelte
+++ /dev/null
@@ -1,95 +0,0 @@
-<script lang="ts">
-    import type { OpenChat, ReportedMessageContent } from "@client";
-    import { allUsersStore } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { i18nKey } from "../../i18n/i18n";
-    import Legend from "../Legend.svelte";
-    import TextArea from "../TextArea.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-
-    interface Props {
-        content: ReportedMessageContent;
-    }
-
-    let { content }: Props = $props();
-    const client = getContext<OpenChat>("client");
-
-    let index = $state(0);
-
-    let report = $derived(content.reports[index]);
-    let reasons = [
-        $_("report.threat"),
-        $_("report.child"),
-        $_("report.nonConsensual"),
-        $_("report.selfHarm"),
-        $_("report.violence"),
-        $_("report.scam"),
-        $_("report.other"),
-    ];
-    let message = $derived(
-        $_("report.messageReport", {
-            values: {
-                username:
-                    $allUsersStore.get(report.reportedBy)?.username ??
-                    `unknown user (${report.reportedBy}))`,
-                timestamp: client.toDatetimeString(new Date(report.timestamp)),
-                reason: reasons[report.reasonCode],
-            },
-        }),
-    );
-</script>
-
-<div class="report">
-    <p class="msg"><Markdown text={message} /></p>
-    {#if report.notes !== undefined && report.notes.length > 0}
-        <Legend label={i18nKey("Notes")} />
-        <TextArea disabled rows={2} bind:value={report.notes} />
-    {/if}
-</div>
-
-<div class="report-selectors">
-    {#each content.reports as r, i}
-        <div onclick={() => (index = i)} class="selector" class:selected={report === r}>
-            {i + 1}
-        </div>
-    {/each}
-</div>
-
-<div class="smallprint">
-    {$_("report.showing", {
-        values: { count: content.reports.length, total: content.total.toLocaleString() },
-    })}
-</div>
-
-<style lang="scss">
-    .report {
-        @include font(book, normal, fs-100);
-        margin-bottom: $sp4;
-    }
-    .msg {
-        margin-bottom: $sp3;
-    }
-    .smallprint {
-        color: var(--txt-light);
-        @include font-size(fs-80);
-    }
-    .report-selectors {
-        display: flex;
-        gap: $sp3;
-        margin-bottom: $sp3;
-    }
-    .selector {
-        cursor: pointer;
-        width: 26px;
-        border: 1px solid var(--bd);
-        border-radius: 50%;
-        text-align: center;
-
-        &.selected {
-            background-color: var(--accent);
-            text-shadow: 1px 1px 1px var(--accentDarker);
-            color: #ffffff;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/SelectUsers.svelte b/frontend/app/src/components/home/SelectUsers.svelte
deleted file mode 100644
index d3a0973b83..0000000000
--- a/frontend/app/src/components/home/SelectUsers.svelte
+++ /dev/null
@@ -1,52 +0,0 @@
-<script lang="ts">
-    import FindUser from "../FindUser.svelte";
-    import ErrorMessage from "../ErrorMessage.svelte";
-    import UserPill from "../UserPill.svelte";
-    import type { UserOrUserGroup, UserSummary } from "@client";
-    import Translatable from "../Translatable.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-
-    interface Props {
-        mode: "add" | "edit";
-        selectedUsers: UserSummary[];
-        enabled?: boolean;
-        userLookup: (searchTerm: string) => Promise<[UserSummary[], UserSummary[]]>;
-        onDeleteUser: (user: UserOrUserGroup) => void;
-        onSelectUser: (user: UserSummary) => void;
-    }
-
-    let {
-        mode,
-        selectedUsers,
-        enabled = true,
-        userLookup,
-        onDeleteUser,
-        onSelectUser,
-    }: Props = $props();
-
-    let error: string | undefined = undefined;
-</script>
-
-{#if selectedUsers.length > 0}
-    <div class="selected">
-        {#each selectedUsers as user (user.userId)}
-            <UserPill {onDeleteUser} userOrGroup={user} />
-        {/each}
-    </div>
-{/if}
-{#if error !== undefined}
-    <ErrorMessage><Translatable resourceKey={i18nKey("errorSearchingForUser")} /></ErrorMessage>
-{/if}
-
-<div class="find-user">
-    <FindUser {userLookup} {enabled} {mode} {onSelectUser} />
-</div>
-
-<style lang="scss">
-    .selected {
-        padding: 0 $sp4 $sp4 $sp4;
-        display: flex;
-        flex-wrap: wrap;
-        gap: $sp3;
-    }
-</style>
diff --git a/frontend/app/src/components/home/SelectionButton.svelte b/frontend/app/src/components/home/SelectionButton.svelte
deleted file mode 100644
index e2261b7236..0000000000
--- a/frontend/app/src/components/home/SelectionButton.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts">
-    import { mobileWidth } from "@client";
-    import Button from "../Button.svelte";
-
-    interface Props {
-        selected?: boolean;
-        title: string;
-        onClick?: (e: MouseEvent) => void;
-    }
-
-    let { selected = false, title, onClick }: Props = $props();
-</script>
-
-<Button fill={$mobileWidth} hollow={!selected} small={!$mobileWidth} tiny={$mobileWidth} {onClick}>
-    <div class="content">
-        {title}
-    </div>
-</Button>
-
-<style lang="scss">
-    .content {
-        position: relative;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        gap: $sp4;
-        min-width: 120px;
-        text-transform: capitalize;
-        @include font(medium, normal, fs-100);
-    }
-</style>
diff --git a/frontend/app/src/components/home/SingleUserSelector.svelte b/frontend/app/src/components/home/SingleUserSelector.svelte
deleted file mode 100644
index 8f6dea48aa..0000000000
--- a/frontend/app/src/components/home/SingleUserSelector.svelte
+++ /dev/null
@@ -1,109 +0,0 @@
-<script lang="ts">
-    import MentionPicker from "./MentionPicker.svelte";
-    import { _ } from "svelte-i18n";
-    import {
-        i18nKey,
-        type OpenChat,
-        type ResourceKey,
-        type UserOrUserGroup,
-        type UserSummary,
-    } from "@client";
-    import { getContext } from "svelte";
-    import UserPill from "../UserPill.svelte";
-    import ValidatingInput from "../bots/ValidatingInput.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        autofocus: boolean;
-        selectedReceiver?: UserOrUserGroup | undefined;
-        direction?: "up" | "down";
-        placeholder?: string;
-        border?: boolean;
-        mentionSelf?: boolean;
-        error?: ResourceKey[];
-        invalid?: boolean;
-        onUserSelected?: (user: UserSummary) => void;
-        onUserRemoved?: () => void;
-    }
-
-    let {
-        autofocus,
-        selectedReceiver = $bindable(undefined),
-        direction = "down",
-        placeholder = "tokenTransfer.chooseReceiver",
-        border = true,
-        mentionSelf = false,
-        error = [],
-        invalid = false,
-        onUserSelected,
-        onUserRemoved,
-    }: Props = $props();
-
-    let showMentionPicker = $state(false);
-    let textValue: string = $state("");
-    let inputHeight: number = $state(0);
-
-    function selectReceiver(userOrGroup: UserOrUserGroup) {
-        selectedReceiver = userOrGroup;
-        showMentionPicker = false;
-        textValue = "";
-        if (userOrGroup.kind === "user") {
-            onUserSelected?.(userOrGroup);
-        }
-    }
-
-    function removeReceiver(_: UserOrUserGroup) {
-        selectedReceiver = undefined;
-        showMentionPicker = true;
-        textValue = "";
-        onUserRemoved?.();
-    }
-
-    function blur() {
-        // we need a short timeout here so that any click event is handled before the blur
-        window.setTimeout(() => {
-            if (selectedReceiver === undefined) {
-                selectedReceiver = client.lookupUserForMention(textValue, false);
-            }
-            showMentionPicker = false;
-        }, 200);
-    }
-</script>
-
-<div class="selector">
-    {#if showMentionPicker}
-        <MentionPicker
-            offset={inputHeight}
-            {direction}
-            {mentionSelf}
-            onMention={selectReceiver}
-            onClose={() => (showMentionPicker = false)}
-            {border}
-            usersOnly
-            prefix={textValue.startsWith("@") ? textValue.substring(1) : textValue} />
-    {/if}
-    {#if selectedReceiver !== undefined}
-        <UserPill onDeleteUser={removeReceiver} userOrGroup={selectedReceiver} />
-    {:else}
-        <div class="wrapper" bind:clientHeight={inputHeight}>
-            <ValidatingInput
-                onFocus={() => (showMentionPicker = true)}
-                onBlur={blur}
-                {invalid}
-                {error}
-                {autofocus}
-                bind:value={textValue}
-                maxlength={100}
-                placeholder={i18nKey(placeholder)}>
-            </ValidatingInput>
-        </div>
-    {/if}
-</div>
-
-<style lang="scss">
-    .selector {
-        position: relative;
-        margin-bottom: $sp4;
-    }
-</style>
diff --git a/frontend/app/src/components/home/Stats.svelte b/frontend/app/src/components/home/Stats.svelte
deleted file mode 100644
index a5ec3e6082..0000000000
--- a/frontend/app/src/components/home/Stats.svelte
+++ /dev/null
@@ -1,432 +0,0 @@
-<script lang="ts">
-    import type { Metrics, OpenChat } from "@client";
-    import { iconSize, minutesOnlineStore } from "@client";
-    import { getContext, onMount } from "svelte";
-    import Flag from "svelte-material-icons/Flag.svelte";
-    import { cubicOut } from "svelte/easing";
-    import { Tween } from "svelte/motion";
-    import { i18nKey } from "../../i18n/i18n";
-    import Tooltip from "../tooltip/Tooltip.svelte";
-    import Translatable from "../Translatable.svelte";
-
-    const client = getContext<OpenChat>("client");
-    interface Props {
-        stats: Metrics;
-        showReported?: boolean;
-    }
-
-    let { stats, showReported = false }: Props = $props();
-
-    const tweenOptions = {
-        duration: 600,
-        easing: cubicOut,
-    };
-    let hoveredIndex: number | undefined = $state();
-    let rendered = $state(false);
-    let previousStats: Metrics | undefined = $state(undefined);
-    let totalMessages = $state(0);
-    let textPerc = new Tween(12.5, tweenOptions);
-    let imagePerc = new Tween(12.5, tweenOptions);
-    let videoPerc = new Tween(12.5, tweenOptions);
-    let audioPerc = new Tween(12.5, tweenOptions);
-    let filePerc = new Tween(12.5, tweenOptions);
-    let pollPerc = new Tween(12.5, tweenOptions);
-    let cryptoPerc = new Tween(12.5, tweenOptions);
-    let giphyPerc = new Tween(12.5, tweenOptions);
-
-    function percToDegree(perc: number): number {
-        return (perc / 100) * 360;
-    }
-
-    onMount(() => {
-        window.setTimeout(() => (rendered = true), 600);
-    });
-
-    function slice(val: number, tween: Tween<number>) {
-        const perc = totalMessages > 0 ? (val / totalMessages) * 100 : 12.5;
-        tween.set(0, { duration: 0 });
-        tween.target = perc;
-    }
-
-    const circum = 471.24;
-
-    function sumSlice(from: number, to: number): number {
-        return percentages.slice(from, to).reduce((total, n) => total + percToDegree(n), 0);
-    }
-
-    $effect(() => {
-        if (previousStats === undefined || !client.metricsEqual(stats, previousStats)) {
-            totalMessages =
-                stats.textMessages +
-                stats.imageMessages +
-                stats.videoMessages +
-                stats.audioMessages +
-                stats.fileMessages +
-                stats.polls +
-                stats.cryptoMessages +
-                stats.giphyMessages;
-
-            slice(stats.textMessages, textPerc);
-            slice(stats.imageMessages, imagePerc);
-            slice(stats.videoMessages, videoPerc);
-            slice(stats.audioMessages, audioPerc);
-            slice(stats.fileMessages, filePerc);
-            slice(stats.polls, pollPerc);
-            slice(stats.cryptoMessages, cryptoPerc);
-            slice(stats.giphyMessages, giphyPerc);
-            previousStats = stats;
-        }
-    });
-    let percentages = $derived([
-        textPerc.current,
-        imagePerc.current,
-        videoPerc.current,
-        audioPerc.current,
-        filePerc.current,
-        pollPerc.current,
-        cryptoPerc.current,
-        giphyPerc.current,
-    ]);
-    let data = $derived([
-        {
-            cls: "text",
-            perc: textPerc.current,
-            rotate: 0,
-        },
-        {
-            cls: "image",
-            perc: imagePerc.current,
-            rotate: sumSlice(0, 1),
-        },
-        {
-            cls: "video",
-            perc: videoPerc.current,
-            rotate: sumSlice(0, 2),
-        },
-        {
-            cls: "audio",
-            perc: audioPerc.current,
-            rotate: sumSlice(0, 3),
-        },
-        {
-            cls: "file",
-            perc: filePerc.current,
-            rotate: sumSlice(0, 4),
-        },
-        {
-            cls: "poll",
-            perc: pollPerc.current,
-            rotate: sumSlice(0, 5),
-        },
-        {
-            cls: "crypto",
-            perc: cryptoPerc.current,
-            rotate: sumSlice(0, 6),
-        },
-        {
-            cls: "giphy",
-            perc: giphyPerc.current,
-            rotate: sumSlice(0, 7),
-        },
-    ]);
-</script>
-
-<div class="message-stats">
-    <svg class:rendered class="pie" viewBox="0 0 320 320">
-        <clipPath id="hollow">
-            <path
-                d="M 160 160 m -160 0 a 160 160 0 1 0 320 0 a 160 160 0 1 0 -320 0 Z M 160 160 m -100 0 a 100 100 0 0 1 200 0 a 100 100 0 0 1 -200 0 Z"
-                style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);" />
-        </clipPath>
-
-        <circle class="background" cx={160} cy={160} r={150} clip-path="url(#hollow)" />
-
-        {#each data as slice, i}
-            <circle
-                onmouseenter={(_) => (hoveredIndex = i)}
-                onmouseleave={(_) => (hoveredIndex = undefined)}
-                class={`slice ${slice.cls}`}
-                cx={160}
-                cy={160}
-                r={75}
-                clip-path="url(#hollow)"
-                stroke-dasharray={`${(slice.perc * circum) / 100} ${circum}`}
-                transform={`rotate(${-90 + slice.rotate}) ${
-                    i === hoveredIndex ? "scale(1.05)" : ""
-                }`}>
-                <title>{`${slice.perc.toFixed(2)}%`}</title>
-            </circle>
-        {/each}
-    </svg>
-    <div class="numbers">
-        <div class="text legend">
-            <div class="key"></div>
-            <div class="label">
-                <span class="stat">{stats.textMessages.toLocaleString()}</span><Translatable
-                    resourceKey={i18nKey("stats.textMessages")} />
-            </div>
-        </div>
-        <div class="image legend">
-            <div class="key"></div>
-            <div class="label">
-                <span class="stat">{stats.imageMessages.toLocaleString()}</span><Translatable
-                    resourceKey={i18nKey("stats.imageMessages")} />
-            </div>
-        </div>
-        <div class="video legend">
-            <div class="key"></div>
-            <div class="label">
-                <span class="stat">{stats.videoMessages.toLocaleString()}</span><Translatable
-                    resourceKey={i18nKey("stats.videoMessages")} />
-            </div>
-        </div>
-        <div class="audio legend">
-            <div class="key"></div>
-            <div class="label">
-                <span class="stat">{stats.audioMessages.toLocaleString()}</span><Translatable
-                    resourceKey={i18nKey("stats.audioMessages")} />
-            </div>
-        </div>
-        <div class="file legend">
-            <div class="key"></div>
-            <div class="label">
-                <span class="stat">{stats.fileMessages.toLocaleString()}</span><Translatable
-                    resourceKey={i18nKey("stats.fileMessages")} />
-            </div>
-        </div>
-        <div class="poll legend">
-            <div class="key"></div>
-            <div class="label">
-                <span class="stat">{stats.polls.toLocaleString()}</span><Translatable
-                    resourceKey={i18nKey("stats.pollMessages")} />
-            </div>
-        </div>
-        <div class="crypto legend">
-            <div class="key"></div>
-            <div class="label">
-                <span class="stat">{stats.cryptoMessages.toLocaleString()}</span><Translatable
-                    resourceKey={i18nKey("stats.cryptoTransfers")} />
-            </div>
-        </div>
-        <div class="giphy legend">
-            <div class="key"></div>
-            <div class="label">
-                <span class="stat">{stats.giphyMessages.toLocaleString()}</span><Translatable
-                    resourceKey={i18nKey("stats.giphyMessages")} />
-            </div>
-        </div>
-    </div>
-</div>
-
-<div class="other-stats">
-    <div class="poll-votes">
-        <span class="stat">{stats.pollVotes.toLocaleString()}</span>
-        <Translatable resourceKey={i18nKey("stats.pollVotes")} />
-    </div>
-    <div class="replies">
-        <span class="stat">{stats.replies.toLocaleString()}</span>
-        <Translatable resourceKey={i18nKey("stats.replies")} />
-    </div>
-    <div class="reactions">
-        <span class="stat">{stats.reactions.toLocaleString()}</span>
-        <Translatable resourceKey={i18nKey("stats.reactions")} />
-    </div>
-    <div class="deleted-messages">
-        <span class="stat">{stats.deletedMessages.toLocaleString()}</span>
-        <Translatable resourceKey={i18nKey("stats.deletedMessages")} />
-    </div>
-    <div class="minutes-online">
-        <span class="stat">{$minutesOnlineStore.minutesOnlineThisMonth.toLocaleString()}</span>
-        <Translatable resourceKey={i18nKey("stats.minutesOnlineThisMonth")} />
-    </div>
-    <div class="minutes-online">
-        <span class="stat">{$minutesOnlineStore.minutesOnlineLastMonth.toLocaleString()}</span>
-        <Translatable resourceKey={i18nKey("stats.minutesOnlineLastMonth")} />
-    </div>
-    {#if showReported}
-        <Tooltip longestWord={20} position={"top"} align="middle">
-            <div class="reported-messages">
-                <span>
-                    <span class="stat">{stats.reportedMessages.toLocaleString()}</span>
-                    <Translatable resourceKey={i18nKey("stats.reportedMessages")} />
-                </span>
-                <span class="icon">
-                    <Flag size={$iconSize} color={"var(--accent)"} />
-                </span>
-            </div>
-            {#snippet popupTemplate()}
-                <Translatable resourceKey={i18nKey("stats.reportedMessagesInfo")} />
-            {/snippet}
-        </Tooltip>
-    {/if}
-</div>
-
-<style lang="scss">
-    $saturation: 80%;
-    $lightness: 65%;
-
-    $video-colour: #ed5ec9;
-    $audio-colour: #a65eed;
-    $image-colour: #5eeded;
-    $file-colour: #edc95e;
-    $text-colour: #5e82ed;
-    $poll-colour: #5eed82;
-    $crypto-colour: #a6ed5e;
-    $giphy-colour: #ed5e5e;
-
-    .stat {
-        color: var(--txt);
-        @include font-size(fs-110);
-
-        @include mobile() {
-            @include font-size(fs-90);
-        }
-    }
-
-    .other-stats {
-        display: flex;
-        gap: $sp4;
-        margin-bottom: $sp4;
-        flex-wrap: wrap;
-        justify-content: space-between;
-
-        color: var(--txt-light);
-        @include font(book, normal, fs-80);
-
-        @include mobile() {
-            gap: 6px;
-        }
-
-        .reported-messages {
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            gap: $sp3;
-            color: var(--accent);
-
-            .icon {
-                position: relative;
-                top: $sp2;
-            }
-        }
-    }
-
-    .message-stats {
-        text-align: center;
-    }
-
-    .slice {
-        fill: transparent;
-        transform-origin: 50% 50%;
-        stroke-width: 150px;
-        cursor: pointer;
-    }
-    .pie {
-        width: min(250px, 100%);
-        margin-bottom: $sp5;
-        &.rendered circle {
-            transition: transform 200ms ease-in-out;
-        }
-    }
-
-    .numbers {
-        text-align: left;
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        margin-bottom: $sp5;
-        row-gap: $sp3;
-    }
-
-    .background {
-        fill: transparent;
-    }
-
-    .legend {
-        color: var(--txt-light);
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        gap: $sp3;
-
-        .stat {
-            margin-right: $sp3;
-        }
-        .key {
-            width: $sp5;
-            height: $sp5;
-            flex: 0 0 $sp5;
-
-            @include mobile() {
-                width: $sp6;
-                height: $sp6;
-                flex: 0 0 $sp6;
-            }
-        }
-        .label {
-            flex: auto;
-
-            @include mobile() {
-                @include font-size(fs-90);
-
-                display: flex;
-                flex-direction: column;
-            }
-        }
-    }
-
-    .text {
-        stroke: $text-colour;
-        .key {
-            background-color: $text-colour;
-        }
-    }
-
-    .image {
-        stroke: $image-colour;
-        .key {
-            background-color: $image-colour;
-        }
-    }
-
-    .video {
-        stroke: $video-colour;
-        .key {
-            background-color: $video-colour;
-        }
-    }
-
-    .audio {
-        stroke: $audio-colour;
-        .key {
-            background-color: $audio-colour;
-        }
-    }
-
-    .file {
-        stroke: $file-colour;
-        .key {
-            background-color: $file-colour;
-        }
-    }
-
-    .poll {
-        stroke: $poll-colour;
-        .key {
-            background-color: $poll-colour;
-        }
-    }
-
-    .crypto {
-        stroke: $crypto-colour;
-        .key {
-            background-color: $crypto-colour;
-        }
-    }
-
-    .giphy {
-        stroke: $giphy-colour;
-        .key {
-            background-color: $giphy-colour;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/SuspendModal.svelte b/frontend/app/src/components/home/SuspendModal.svelte
deleted file mode 100644
index 64688f1568..0000000000
--- a/frontend/app/src/components/home/SuspendModal.svelte
+++ /dev/null
@@ -1,74 +0,0 @@
-<script lang="ts">
-    import type { OpenChat } from "@client";
-    import { getContext } from "svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import Button from "../Button.svelte";
-    import ButtonGroup from "../ButtonGroup.svelte";
-    import ErrorMessage from "../ErrorMessage.svelte";
-    import ModalContent from "../ModalContent.svelte";
-    import Overlay from "../Overlay.svelte";
-    import TextArea from "../TextArea.svelte";
-    import Translatable from "../Translatable.svelte";
-
-    interface Props {
-        userId: string;
-        onClose: () => void;
-    }
-
-    let { userId, onClose }: Props = $props();
-
-    const client = getContext<OpenChat>("client");
-
-    let reason: string = $state("");
-    let suspending = $state(false);
-    let showError = $state(false);
-
-    function onSuspend() {
-        suspending = true;
-        showError = false;
-        client.suspendUser(userId, reason).then((success) => {
-            if (success) {
-                onClose();
-            } else {
-                showError = true;
-            }
-            suspending = false;
-        });
-    }
-</script>
-
-<Overlay dismissible {onClose}>
-    <ModalContent {onClose}>
-        {#snippet header()}
-            <div><Translatable resourceKey={i18nKey("suspendedUser")} /></div>
-        {/snippet}
-        {#snippet body()}
-            <div>
-                <TextArea
-                    bind:value={reason}
-                    autofocus
-                    minlength={3}
-                    maxlength={512}
-                    placeholder={i18nKey("reasonForSuspension")}>
-                    {#if showError}
-                        <ErrorMessage
-                            ><Translatable
-                                resourceKey={i18nKey("failedToSuspendUser")} /></ErrorMessage>
-                    {/if}
-                </TextArea>
-            </div>
-        {/snippet}
-        {#snippet footer()}
-            <div>
-                <ButtonGroup>
-                    <Button onClick={onSuspend} loading={suspending} small>
-                        <Translatable resourceKey={i18nKey("suspend")} />
-                    </Button>
-                    <Button onClick={onClose} disabled={suspending} small secondary>
-                        <Translatable resourceKey={i18nKey("cancel")} />
-                    </Button>
-                </ButtonGroup>
-            </div>
-        {/snippet}
-    </ModalContent>
-</Overlay>
diff --git a/frontend/app/src/components/home/TextContent.svelte b/frontend/app/src/components/home/TextContent.svelte
deleted file mode 100644
index ccb362d62c..0000000000
--- a/frontend/app/src/components/home/TextContent.svelte
+++ /dev/null
@@ -1,64 +0,0 @@
-<script lang="ts">
-    import Markdown from "@shared_components/Markdown.svelte";
-    import type { OgPreview, RehydratedMessagePreview, TextContent } from "@client";
-    import { _ } from "svelte-i18n";
-    import IntersectionObserver from "./IntersectionObserver.svelte";
-    import LinkPreviews from "./LinkPreviews.svelte";
-
-    const SIZE_LIMIT = 1000;
-
-    interface Props {
-        content: TextContent;
-        truncate?: boolean;
-        pinned?: boolean;
-        edited: boolean;
-        fill: boolean;
-        me: boolean;
-        blockLevelMarkdown: boolean;
-        onRemovePreview?: (url: string) => void;
-        ogPreviews?: OgPreview[];
-        messagePreviews?: RehydratedMessagePreview[];
-    }
-
-    let {
-        content,
-        truncate = false,
-        pinned = false,
-        edited,
-        fill,
-        me,
-        blockLevelMarkdown,
-        onRemovePreview,
-        ogPreviews = [],
-        messagePreviews = [],
-    }: Props = $props();
-
-    function truncateText(text: string): string {
-        // todo - we might be able to do something nicer than this with pure css, but we just need to do
-        // *something* to make sure there a limit to the size of this box
-        if (truncate && text.length > SIZE_LIMIT) {
-            text = text.slice(0, SIZE_LIMIT) + "...";
-        }
-        return text;
-    }
-
-    let text = $derived(truncateText(content.text));
-</script>
-
-<IntersectionObserver unobserveOnIntersect={false}>
-    {#snippet children(intersecting)}
-        <LinkPreviews
-            {me}
-            {pinned}
-            {fill}
-            {ogPreviews}
-            {messagePreviews}
-            {intersecting}
-            onRemove={onRemovePreview} />
-    {/snippet}
-</IntersectionObserver>
-
-<Markdown inline={!blockLevelMarkdown} suppressLinks={pinned} {text} />
-{#if edited}
-    <span class="edited-msg">({$_("edited")})</span>
-{/if}
diff --git a/frontend/app/src/components/home/ThreadSummary.svelte b/frontend/app/src/components/home/ThreadSummary.svelte
deleted file mode 100644
index 715f6c84ec..0000000000
--- a/frontend/app/src/components/home/ThreadSummary.svelte
+++ /dev/null
@@ -1,179 +0,0 @@
-<script lang="ts">
-    import type { ChatIdentifier, OpenChat, ThreadSummary } from "@client";
-    import {
-        allUsersStore,
-        AvatarSize,
-        messagesRead,
-        mobileWidth,
-        threadsFollowedByMeStore,
-    } from "@client";
-    import { getContext, onMount } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { pop } from "../../utils/transition";
-    import Avatar from "../Avatar.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        threadSummary: ThreadSummary;
-        indent: boolean;
-        me: boolean;
-        selected: boolean;
-        url: string;
-        chatId: ChatIdentifier;
-        threadRootMessageIndex: number;
-    }
-
-    let { threadSummary, indent, me, selected, url, chatId, threadRootMessageIndex }: Props =
-        $props();
-
-    let isFollowedByMe = $derived(
-        $threadsFollowedByMeStore.get(chatId)?.has(threadRootMessageIndex) ?? false,
-    );
-    let lastMessageIndex = $derived(threadSummary.numberOfReplies - 1); //using this as a surrogate for message index for now
-    let unreadCount = $derived(
-        client.unreadThreadMessageCount(chatId, threadRootMessageIndex, lastMessageIndex),
-    );
-
-    onMount(() => {
-        return messagesRead.subscribe(() => {
-            unreadCount = client.unreadThreadMessageCount(
-                chatId,
-                threadRootMessageIndex,
-                lastMessageIndex,
-            );
-        });
-    });
-</script>
-
-<div class="thread-summary-wrapper" class:me class:indent>
-    <a href={url} class="thread-summary" class:selected>
-        <div class="thread-avatars">
-            {#each [...threadSummary.participantIds].slice(0, 5) as participantId}
-                <Avatar
-                    url={client.userAvatarUrl($allUsersStore.get(participantId))}
-                    userId={participantId}
-                    size={AvatarSize.Tiny} />
-            {/each}
-            {#if threadSummary.participantIds.size > 5}
-                <div class="thread-extra">
-                    {`+${threadSummary.participantIds.size - 5}`}
-                </div>
-            {/if}
-        </div>
-        <div class="thread-legend">
-            <span
-                >{$_("thread.nreplies", {
-                    values: {
-                        number: threadSummary.numberOfReplies.toString(),
-                        replies:
-                            threadSummary.numberOfReplies === 1
-                                ? $_("thread.reply")
-                                : $_("thread.replies"),
-                        message: $mobileWidth
-                            ? ""
-                            : $_("thread.lastMessage", {
-                                  values: {
-                                      date: client.formatMessageDate(
-                                          threadSummary.latestEventTimestamp,
-                                          $_("today"),
-                                          $_("yesterday"),
-                                          true,
-                                          true,
-                                      ),
-                                  },
-                              }),
-                    },
-                })}
-                <div class:selected class="arrow">&#8595;</div></span>
-        </div>
-    </a>
-    {#if isFollowedByMe && unreadCount > 0}
-        <div
-            in:pop={{ duration: 1500 }}
-            title={$_("chatSummary.unread", { values: { count: unreadCount.toString() } })}
-            class="unread-count">
-            {unreadCount > 999 ? "999+" : unreadCount}
-        </div>
-    {/if}
-</div>
-
-<style lang="scss">
-    $avatar-width: 53px;
-    $avatar-width-mob: 43px;
-
-    .unread-count {
-        @include unread();
-    }
-
-    .thread-summary-wrapper {
-        display: flex;
-        justify-content: flex-start;
-        flex-wrap: wrap;
-        align-items: center;
-        gap: $sp3;
-        margin-bottom: $sp2;
-
-        &.indent {
-            margin-left: $avatar-width;
-            @include mobile() {
-                margin-left: $avatar-width-mob;
-            }
-        }
-    }
-
-    .arrow {
-        transition: transform 200ms ease-in-out;
-        display: inline-block;
-        transform-origin: 50% 50%;
-
-        &.selected {
-            transform: rotate(-90deg);
-        }
-    }
-
-    .thread-summary {
-        display: inline-flex;
-        align-items: center;
-        gap: $sp2;
-        padding: $sp2 $sp3;
-        border-radius: $sp3;
-        cursor: pointer;
-        transition: background 200ms ease-in-out;
-        border: 1px solid var(--bd);
-        color: var(--currentChat-msg-txt);
-
-        @media (hover: hover) {
-            &:not(.selected):hover {
-                background: rgba(255, 255, 255, 0.1);
-            }
-        }
-
-        &.selected {
-            background: var(--notificationBar-bg);
-            color: var(--notificationBar-txt);
-            border: 1px solid transparent;
-        }
-
-        .thread-avatars {
-            display: flex;
-            gap: $sp2;
-        }
-
-        .thread-legend {
-            @include font(book, normal, fs-80);
-            margin-left: $sp2;
-        }
-
-        .thread-extra {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            border-radius: 50%;
-            width: toRem(25);
-            height: toRem(25);
-            @include font-size(fs-60);
-            background-color: rgba(0, 0, 0, 0.15);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/ThrottleCountdown.svelte b/frontend/app/src/components/home/ThrottleCountdown.svelte
deleted file mode 100644
index 2cc1e54bcd..0000000000
--- a/frontend/app/src/components/home/ThrottleCountdown.svelte
+++ /dev/null
@@ -1,60 +0,0 @@
-<script lang="ts">
-    import Progress from "../Progress.svelte";
-    import DisappearsAt from "./DisappearsAt.svelte";
-    import Translatable from "../Translatable.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { now500 } from "../../stores/time";
-    import { throttleDeadline } from "@client";
-    import { untrack } from "svelte";
-
-    interface Props {
-        deadline: number;
-    }
-
-    let { deadline }: Props = $props();
-
-    let seconds = $state(0);
-    let percent = $state(0);
-
-    $effect(() => {
-        calculate(deadline, $now500);
-    });
-
-    function calculate(deadline: number, now: number) {
-        untrack(() => {
-            seconds = Math.floor((deadline - now) / 1000);
-            percent = Math.floor((seconds / 60) * 100);
-            if (deadline <= $now500) {
-                throttleDeadline.set(0);
-            }
-        });
-    }
-</script>
-
-<div class="throttle">
-    <Progress size={"20px"} {percent}>
-        <div class="msg">
-            <DisappearsAt me={true} percentageExpired={percent} expiresAt={deadline} />
-            <Translatable resourceKey={i18nKey("throttleMessage", { time: seconds })} />
-        </div>
-    </Progress>
-</div>
-
-<style lang="scss">
-    :global(.throttle .bar) {
-        height: 40px;
-    }
-
-    .throttle {
-        padding: 0;
-        width: 100%;
-
-        .msg {
-            display: flex;
-            gap: $sp3;
-            align-items: center;
-            justify-content: center;
-            width: 100%;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/Tick.svelte b/frontend/app/src/components/home/Tick.svelte
deleted file mode 100644
index 05cf21a069..0000000000
--- a/frontend/app/src/components/home/Tick.svelte
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-    <path fill="currentColor" d="M10.91 3.316l-.478-.372a.365.365 0 0 0-.51.063L4.566 9.879a.32.32 0 0 1-.484.033L1.891 7.769a.366.366 0 0 0-.515.006l-.423.433a.364.364 0 0 0 .006.514l3.258 3.185c.143.14.361.125.484-.033l6.272-8.048a.365.365 0 0 0-.063-.51z"></path>
-</svg>
\ No newline at end of file
diff --git a/frontend/app/src/components/home/TipBuilder.svelte b/frontend/app/src/components/home/TipBuilder.svelte
deleted file mode 100644
index e9677539ad..0000000000
--- a/frontend/app/src/components/home/TipBuilder.svelte
+++ /dev/null
@@ -1,453 +0,0 @@
-<script lang="ts">
-    import type {
-        Message,
-        MessageContext,
-        OpenChat,
-        PendingCryptocurrencyTransfer,
-    } from "@client";
-    import {
-        cryptoBalanceStore,
-        cryptoLookup,
-        currentUserIdStore,
-        exchangeRatesLookupStore as exchangeRatesLookup,
-        lastCryptoSent,
-        mobileWidth,
-    } from "@client";
-    import { getContext, onMount } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { quadOut } from "svelte/easing";
-    import { Tween } from "svelte/motion";
-    import { fade } from "svelte/transition";
-    import { i18nKey } from "../../i18n/i18n";
-    import { pinNumberErrorMessageStore } from "../../stores/pinNumber";
-    import { toastStore } from "../../stores/toast";
-    import Button from "../Button.svelte";
-    import ButtonGroup from "../ButtonGroup.svelte";
-    import ErrorMessage from "../ErrorMessage.svelte";
-    import ModalContent from "../ModalContent.svelte";
-    import Overlay from "../Overlay.svelte";
-    import Translatable from "../Translatable.svelte";
-    import AccountInfo from "./AccountInfo.svelte";
-    import BalanceWithRefresh from "./BalanceWithRefresh.svelte";
-    import CryptoSelector from "./CryptoSelector.svelte";
-    import TipButton from "./TipButton.svelte";
-    import TokenInput from "./TokenInput.svelte";
-
-    const client = getContext<OpenChat>("client");
-    const increments: Increment[] = [1, 10, 100];
-    type Increment = 1 | 10 | 100;
-
-    interface Props {
-        ledger: string;
-        msg: Message;
-        messageContext: MessageContext;
-        onClose: () => void;
-    }
-
-    let { ledger = $bindable(), msg, messageContext, onClose }: Props = $props();
-
-    const tweenOptions = {
-        duration: 800,
-        easing: quadOut,
-    };
-
-    let refreshing = $state(false);
-    let error: string | undefined = $state(undefined);
-    let toppingUp = $state(false);
-    let tokenChanging = $state(true);
-    let balanceWithRefresh: BalanceWithRefresh;
-    let dollar = $state<HTMLElement | undefined>();
-    let dollarTop = new Tween(-1000, tweenOptions);
-    let dollarOpacity = new Tween(0, tweenOptions);
-    let dollarScale = new Tween(0, tweenOptions);
-    let centAmount = $state(0);
-    let showCustomTip = $state(false);
-    let validAmount: boolean = $state(false);
-    let draftAmount = $state(0n);
-
-    onMount(() => {
-        let d = document.getElementById("tip-dollar");
-        if (!d) {
-            d = document.createElement("div");
-            d.id = "tip-dollar";
-            d.className = "tip-dollar";
-            const t = document.createTextNode("🤑");
-            d.appendChild(t);
-            document.body.appendChild(d);
-        }
-        dollar = d;
-    });
-
-    function amountLabel(n: Increment): string {
-        return `$${(n / 100).toFixed(2)}`;
-    }
-
-    function calculateCentAmount(e8s: bigint, exchangeRate: number): number {
-        const tokens = Number(e8s) / Math.pow(10, tokenDetails.decimals);
-        const dollar = tokens * exchangeRate;
-        const cents = dollar * 100;
-        return Math.round(cents);
-    }
-
-    function to2SigFigs(num: number): number {
-        return parseFloat(num.toPrecision(2));
-    }
-
-    function calculateAmount(centAmount: number, exchangeRate: number): bigint {
-        const e8s = ((centAmount / 100) * Math.pow(10, tokenDetails.decimals)) / exchangeRate;
-        return BigInt(Math.round(e8s));
-    }
-
-    function reset() {
-        balanceWithRefresh.refresh();
-    }
-
-    function cancel() {
-        toppingUp = false;
-        onClose();
-    }
-
-    function onBalanceRefreshed() {
-        onBalanceRefreshFinished();
-        error = undefined;
-    }
-
-    function onBalanceRefreshError(err: string) {
-        onBalanceRefreshFinished();
-        error = err;
-    }
-
-    function onBalanceRefreshFinished() {
-        toppingUp = false;
-        tokenChanging = false;
-        if (remainingBalance < 0) {
-            remainingBalance = 0n;
-            draftAmount = cryptoBalance - tokenDetails.transferFee;
-            if (draftAmount < 0) {
-                draftAmount = 0n;
-            }
-        }
-    }
-
-    function bounceMoneyMouthFrom(target: HTMLElement) {
-        if (!dollar) return;
-        const buttonRect = target.getBoundingClientRect();
-        const hDiff = buttonRect.height - dollar.clientHeight;
-        const wDiff = buttonRect.width - dollar.clientWidth;
-        const top = buttonRect.top + hDiff / 2;
-        const left = buttonRect.left + wDiff / 2;
-
-        Promise.all([
-            dollarTop.set(top, { duration: 0 }),
-            dollarOpacity.set(1, { duration: 0 }),
-            dollarScale.set(0, { duration: 0 }),
-        ]).then(() => {
-            dollarTop.target = top - 300;
-            dollarOpacity.target = 0;
-            dollarScale.target = 2;
-            dollarOpacity.set(0);
-        });
-        dollar.style.left = `${left}px`;
-    }
-
-    function clickAmount(e: MouseEvent, increment: Increment) {
-        e.preventDefault();
-        bounceMoneyMouthFrom(e.target as HTMLElement);
-        centAmount += increment;
-        draftAmount = calculateAmount(centAmount, exchangeRate);
-    }
-
-    function maxAmount(balance: bigint): bigint {
-        return balance - transferFees;
-    }
-
-    function send(e: Event) {
-        e.preventDefault();
-        const transfer: PendingCryptocurrencyTransfer = {
-            kind: "pending",
-            ledger,
-            token: tokenDetails.symbol,
-            recipient: msg.sender,
-            amountE8s: draftAmount,
-            feeE8s: tokenDetails.transferFee,
-            createdAtNanos: BigInt(Date.now()) * 1_000_000n,
-        };
-        lastCryptoSent.set(ledger);
-
-        const currentTip = (msg.tips[transfer.ledger] ?? {})[$currentUserIdStore] ?? 0n;
-
-        client.tipMessage(messageContext, msg.messageId, transfer, currentTip).then((resp) => {
-            if (resp.kind === "failure") {
-                toastStore.showFailureToast(i18nKey("tip.failure"));
-            } else if (resp.kind !== "success") {
-                toastStore.showFailureToast(pinNumberErrorMessageStore);
-            }
-        });
-
-        onClose();
-    }
-    let tokenDetails = $derived($cryptoLookup.get(ledger)!);
-    let cryptoBalance = $derived($cryptoBalanceStore.get(ledger) ?? 0n);
-    let exchangeRate = $derived(
-        to2SigFigs($exchangeRatesLookup.get(tokenDetails.symbol.toLowerCase())?.toUSD ?? 0),
-    );
-    $effect(() => {
-        if (ledger !== undefined) {
-            // reset when ledger changes
-            centAmount = 0;
-            tokenChanging = true;
-            draftAmount = 0n;
-        }
-    });
-    let displayDraftAmount = $derived(client.formatTokens(draftAmount, tokenDetails.decimals));
-    let displayFee = $derived(client.formatTokens(tokenDetails.transferFee, tokenDetails.decimals));
-    let remainingBalance = $state(0n);
-    $effect(() => {
-        remainingBalance =
-            draftAmount > 0n
-                ? cryptoBalance - draftAmount - tokenDetails.transferFee
-                : cryptoBalance;
-    });
-    let valid = $derived(
-        draftAmount > 0n && remainingBalance >= 0n && error === undefined && !tokenChanging,
-    );
-    let zero = $derived(cryptoBalance <= tokenDetails.transferFee && !tokenChanging);
-    let transferFees = $derived(tokenDetails.transferFee);
-    $effect(() => {
-        centAmount = calculateCentAmount(draftAmount, exchangeRate);
-    });
-    $effect(() => {
-        if (dollar) {
-            dollar.style.setProperty("top", `${dollarTop.current}px`);
-            dollar.style.setProperty("opacity", `${dollarOpacity.current}`);
-            dollar.style.setProperty(
-                "transform",
-                `scale(${dollarScale.current}) rotate(${dollarScale.current}turn)`,
-            );
-        }
-    });
-</script>
-
-<Overlay dismissible>
-    <ModalContent fill>
-        {#snippet header()}
-            <span class="header">
-                <div class="left">
-                    <div class="main-title">
-                        <div><Translatable resourceKey={i18nKey("tip.title")} /></div>
-                        <div>
-                            <CryptoSelector bind:ledger />
-                        </div>
-                    </div>
-                </div>
-                <BalanceWithRefresh
-                    bind:toppingUp
-                    bind:this={balanceWithRefresh}
-                    {ledger}
-                    value={remainingBalance}
-                    label={i18nKey("cryptoAccount.shortBalanceLabel")}
-                    bold
-                    showTopUp
-                    bind:refreshing
-                    onRefreshed={onBalanceRefreshed}
-                    onError={onBalanceRefreshError} />
-            </span>
-        {/snippet}
-        {#snippet body()}
-            <form onsubmit={send}>
-                <div class="body" class:zero={zero || toppingUp}>
-                    {#if zero || toppingUp}
-                        <AccountInfo {ledger} />
-                        {#if zero}
-                            <p>
-                                <Translatable
-                                    resourceKey={i18nKey("tokenTransfer.zeroBalance", {
-                                        token: tokenDetails.symbol,
-                                    })} />
-                            </p>
-                        {/if}
-                        <p><Translatable resourceKey={i18nKey("tokenTransfer.makeDeposit")} /></p>
-                    {:else}
-                        {#if exchangeRate > 0}
-                            <div class="amounts">
-                                {#each increments as increment}
-                                    <TipButton
-                                        label={i18nKey(amountLabel(increment))}
-                                        onClick={(e) => clickAmount(e, increment)}
-                                        disabled={exchangeRate === 0 ||
-                                            calculateAmount(centAmount + increment, exchangeRate) >
-                                                cryptoBalance - tokenDetails.transferFee} />
-                                {/each}
-                            </div>
-                            <div in:fade|local={{ duration: 300 }} class="message">
-                                {#if draftAmount > 0}
-                                    <div class="summary">
-                                        <div class="dollar-amount">
-                                            ${(centAmount / 100).toFixed(2)}
-                                        </div>
-                                        <div class="token-amount">
-                                            {displayDraftAmount}
-                                            {tokenDetails.symbol}
-                                        </div>
-                                        <div class="fee">
-                                            <Translatable
-                                                resourceKey={i18nKey("tip.plusFee", {
-                                                    fee: displayFee,
-                                                    token: tokenDetails.symbol,
-                                                })} />
-                                        </div>
-                                    </div>
-                                {:else}
-                                    <div class="summary">
-                                        <Translatable resourceKey={i18nKey("tip.advice")} />
-                                    </div>
-                                {/if}
-                            </div>
-                        {/if}
-                        <div class="custom-tip">
-                            {#if !showCustomTip && exchangeRate > 0}
-                                <!-- svelte-ignore a11y_click_events_have_key_events -->
-                                <!-- svelte-ignore a11y_missing_attribute -->
-                                <a
-                                    role="button"
-                                    tabindex="0"
-                                    onclick={() => (showCustomTip = true)}
-                                    class="options"
-                                    in:fade|local={{ duration: 500 }}
-                                    class:expanded={showCustomTip}>
-                                    <Translatable resourceKey={i18nKey("tip.showCustom")} />
-                                </a>
-                            {/if}
-
-                            {#if showCustomTip || exchangeRate <= 0}
-                                <div in:fade|local={{ duration: 500 }} class="custom-tip-amount">
-                                    <TokenInput
-                                        {ledger}
-                                        {transferFees}
-                                        bind:valid={validAmount}
-                                        maxAmount={maxAmount(cryptoBalance)}
-                                        bind:amount={draftAmount} />
-                                </div>
-                            {/if}
-                        </div>
-                        {#if error !== undefined}
-                            <div class="error">
-                                <ErrorMessage>{$_(error)}</ErrorMessage>
-                            </div>
-                        {/if}
-                    {/if}
-                </div>
-            </form>
-        {/snippet}
-        {#snippet footer()}
-            <span>
-                <ButtonGroup>
-                    <Button small={!$mobileWidth} tiny={$mobileWidth} secondary onClick={cancel}
-                        ><Translatable resourceKey={i18nKey("cancel")} /></Button>
-                    {#if toppingUp || zero}
-                        <Button
-                            small={!$mobileWidth}
-                            disabled={refreshing}
-                            loading={refreshing}
-                            tiny={$mobileWidth}
-                            onClick={reset}
-                            ><Translatable resourceKey={i18nKey("refresh")} /></Button>
-                    {:else}
-                        <Button
-                            small={!$mobileWidth}
-                            disabled={!valid}
-                            tiny={$mobileWidth}
-                            onClick={send}
-                            ><Translatable resourceKey={i18nKey("tokenTransfer.send")} /></Button>
-                    {/if}
-                </ButtonGroup>
-            </span>
-        {/snippet}
-    </ModalContent>
-</Overlay>
-
-<style lang="scss">
-    .header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: $sp2;
-
-        .left {
-            flex: auto;
-            display: flex;
-            align-items: center;
-            gap: $sp4;
-
-            .main-title {
-                flex: auto;
-                display: flex;
-                align-items: baseline;
-                gap: 10px;
-                @include font(bold, normal, fs-120);
-            }
-        }
-    }
-
-    .body {
-        transition: background-color 100ms ease-in-out;
-        @include font(book, normal, fs-100, 28);
-        position: relative;
-
-        &.zero {
-            padding: 0 $sp4;
-        }
-    }
-
-    .message {
-        text-align: center;
-        margin-bottom: $sp4;
-    }
-
-    .error {
-        text-align: center;
-    }
-
-    .summary {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: var(--txt);
-
-        .dollar-amount,
-        .fee,
-        .token-amount {
-            padding: 0 $sp4;
-        }
-
-        .dollar-amount,
-        .token-amount {
-            border-right: 1px solid var(--txt-light);
-        }
-
-        .fee {
-            color: var(--txt-light);
-            @include font(light, normal, fs-70);
-        }
-    }
-
-    .amounts {
-        display: flex;
-        justify-content: space-evenly;
-        gap: $sp2;
-        padding: $sp6 0;
-    }
-
-    .how-to {
-        margin-top: $sp4;
-    }
-
-    .custom-tip {
-        text-align: center;
-        @include font(light, normal, fs-80);
-
-        .custom-tip-amount {
-            padding: $sp4 $sp5;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/TipButton.svelte b/frontend/app/src/components/home/TipButton.svelte
deleted file mode 100644
index 122f4fbd77..0000000000
--- a/frontend/app/src/components/home/TipButton.svelte
+++ /dev/null
@@ -1,69 +0,0 @@
-<script lang="ts">
-    import { spring } from "svelte/motion";
-    import type { ResourceKey } from "@client";
-    import Translatable from "../Translatable.svelte";
-
-    interface Props {
-        disabled?: boolean;
-        label: ResourceKey;
-        onClick: (e: MouseEvent) => void;
-    }
-
-    let { disabled = false, label, onClick }: Props = $props();
-
-    let buttonScale = spring(1);
-
-    function mouseDown() {
-        buttonScale.set(1.1);
-        window.setTimeout(() => buttonScale.set(1), 200);
-    }
-</script>
-
-<button
-    style={`transform: scale(${$buttonScale})`}
-    onmousedown={mouseDown}
-    {disabled}
-    onclick={onClick}
-    class="amount">
-    <Translatable resourceKey={label} />
-</button>
-
-<style lang="scss">
-    .amount {
-        $size: 100px;
-        border-radius: $sp3;
-        padding: $sp4;
-        border: 1px solid var(--bd);
-        transition:
-            background 250ms ease-in-out,
-            color 250ms ease-in-out;
-        text-align: center;
-        cursor: pointer;
-        height: $size;
-        width: $size;
-        border-radius: 50%;
-        display: grid;
-        align-content: center;
-        background: transparent;
-        color: var(--button-txt);
-        background: var(--button-bg);
-        position: relative;
-        &:hover {
-            background: var(--button-hv);
-        }
-
-        @include font(book, normal, fs-120);
-
-        @include mobile() {
-            $size: 100px;
-            height: $size;
-            width: $size;
-        }
-
-        &:disabled {
-            background: transparent;
-            color: var(--txt-light);
-            cursor: not-allowed;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/TokenInput.svelte b/frontend/app/src/components/home/TokenInput.svelte
deleted file mode 100644
index 9708e8d843..0000000000
--- a/frontend/app/src/components/home/TokenInput.svelte
+++ /dev/null
@@ -1,243 +0,0 @@
-<script lang="ts">
-    import {
-        cryptoLookup,
-        exchangeRatesLookupStore as exchangeRatesLookup,
-        iconSize,
-        type OpenChat,
-    } from "@client";
-    import { getContext, onMount, untrack } from "svelte";
-    import Alert from "svelte-material-icons/Alert.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { calculateDollarAmount } from "../../utils/exchange";
-    import Legend from "../Legend.svelte";
-    import Translatable from "../Translatable.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        amount?: bigint;
-        autofocus?: boolean;
-        minAmount?: bigint;
-        maxAmount?: bigint | undefined;
-        ledger: string;
-        valid?: boolean;
-        status?: "ok" | "zero" | "too_low" | "too_high";
-        label?: string;
-        transferFees?: bigint | undefined;
-        showDollarAmount?: boolean;
-    }
-
-    let {
-        amount = $bindable(BigInt(0)),
-        autofocus = false,
-        minAmount = BigInt(0),
-        maxAmount = undefined,
-        ledger,
-        valid = $bindable(false),
-        status = $bindable("zero"),
-        label = "tokenTransfer.amount",
-        transferFees = undefined,
-        showDollarAmount = false,
-    }: Props = $props();
-
-    valid;
-
-    let inputElement: HTMLInputElement | undefined = $state();
-
-    onMount(() => {
-        if (amount > BigInt(0) && inputElement) {
-            inputElement.value = client.formatTokens(amount, tokenDecimals, ".", true);
-        }
-    });
-
-    function onKeyup() {
-        trimDecimals();
-        const value = inputElement?.value ?? "";
-        const inputAmount = Math.round(Number(value) * Math.pow(10, tokenDecimals));
-        if (!isNaN(inputAmount)) {
-            const [integral, fractional] = value.split(".");
-            let units = BigInt(integral) * BigInt(10) ** BigInt(tokenDecimals);
-
-            if (fractional !== undefined) {
-                units += BigInt(fractional.padEnd(tokenDecimals, "0"));
-            }
-
-            amount = units;
-        }
-    }
-
-    function max() {
-        if (maxAmount !== undefined) {
-            amount = maxAmount;
-        }
-        validate();
-    }
-
-    function validate() {
-        untrack(() => {
-            if (amount === BigInt(0)) {
-                status = "zero";
-            } else if (amount < minAmount) {
-                status = "too_low";
-            } else if (maxAmount !== undefined && amount > maxAmount) {
-                status = "too_high";
-            } else {
-                status = "ok";
-            }
-            valid = status === "ok";
-        });
-    }
-
-    function trimDecimals() {
-        const value = inputElement?.value ?? "";
-        const fractional = value.split(".")[1];
-        if (fractional !== undefined) {
-            const toTrim = fractional.length - tokenDecimals;
-            if (toTrim > 0 && inputElement) {
-                inputElement.value = value.substring(0, value.length - toTrim);
-            }
-        }
-    }
-    let tokenDetails = $derived($cryptoLookup.get(ledger)!);
-    let symbol = $derived(tokenDetails?.symbol);
-    let tokenDecimals = $derived(tokenDetails?.decimals ?? 0);
-    let amountInUsd = $derived(
-        tokenDetails !== undefined && showDollarAmount
-            ? calculateDollarAmount(
-                  amount,
-                  $exchangeRatesLookup.get(tokenDetails.symbol.toLowerCase())?.toUSD,
-                  tokenDetails.decimals,
-              )
-            : "???",
-    );
-    let minAmountFormatted = $derived(`${client.formatTokens(minAmount, tokenDecimals)} ${symbol}`);
-    $effect(() => {
-        // TODO - worry about this
-        if (inputElement !== undefined) {
-            trimDecimals();
-            const validateResult = client.validateTokenInput(inputElement.value, tokenDecimals);
-            if (validateResult.amount !== amount) {
-                inputElement.value = client.formatTokens(amount, tokenDecimals, ".", true);
-            }
-            validate();
-        }
-    });
-    $effect(() => {
-        // Re-validate whenever minAmount or maxAmount changes
-        if (minAmount || maxAmount) {
-            validate();
-        }
-    });
-</script>
-
-<div class="label">
-    <Legend label={i18nKey(label)} rules={i18nKey(symbol)} />
-    {#if maxAmount !== undefined}
-        <div onclick={max} class="max">
-            <Translatable resourceKey={i18nKey("tokenTransfer.max")} />
-        </div>
-    {/if}
-    {#if showDollarAmount && amount > 0}
-        <div class="usd">({amountInUsd} USD)</div>
-    {:else if minAmount > BigInt(0)}
-        <div class="min">
-            <Translatable
-                resourceKey={i18nKey("tokenTransfer.min", { amount: minAmountFormatted })} />
-        </div>
-    {/if}
-</div>
-<div class="wrapper">
-    {#if transferFees !== undefined && transferFees > 0n}
-        <div class="fee">
-            <Alert size={$iconSize} color={"var(--warn)"} />
-            <span>
-                <Translatable
-                    resourceKey={i18nKey("tokenTransfer.fee", {
-                        fee: client.formatTokens(transferFees, tokenDecimals),
-                        token: symbol,
-                    })} />
-            </span>
-        </div>
-    {/if}
-    <input
-        {autofocus}
-        class="amount-val"
-        min={Number(minAmount) / Math.pow(10, tokenDecimals)}
-        max={maxAmount !== undefined ? Number(maxAmount) / Math.pow(10, tokenDecimals) : undefined}
-        type="number"
-        step="0.00000001"
-        bind:this={inputElement}
-        onkeyup={onKeyup}
-        placeholder="0" />
-</div>
-
-<style lang="scss">
-    .wrapper {
-        position: relative;
-    }
-
-    .label {
-        display: flex;
-        align-items: center;
-        gap: $sp3;
-
-        .max {
-            transition: background ease-in-out 200ms;
-            background: var(--button-bg);
-            color: var(--button-txt);
-            padding: 0 $sp3;
-            border-radius: var(--rd);
-            cursor: pointer;
-            border: none;
-            @include font(book, normal, fs-50, 20);
-
-            @media (hover: hover) {
-                &:hover {
-                    background: var(--button-hv);
-                }
-            }
-        }
-
-        .usd,
-        .min {
-            @include font(light, normal, fs-60);
-            color: var(--txt-light);
-            flex: 1;
-            text-align: right;
-        }
-    }
-
-    .amount-val {
-        width: 100%;
-        display: block;
-        text-align: start;
-
-        @include input();
-
-        &::placeholder {
-            color: var(--placeholder);
-        }
-    }
-
-    .fee {
-        position: absolute;
-        right: $sp3;
-        top: 12px;
-        display: flex;
-        gap: $sp3;
-        align-items: center;
-        @include font(book, normal, fs-60);
-    }
-
-    /* Chrome, Safari, Edge, Opera */
-    input::-webkit-outer-spin-button,
-    input::-webkit-inner-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
-    }
-
-    /* Firefox */
-    input[type="number"] {
-        -moz-appearance: textfield;
-    }
-</style>
diff --git a/frontend/app/src/components/home/TruncatedAccount.svelte b/frontend/app/src/components/home/TruncatedAccount.svelte
deleted file mode 100644
index 2e58206b30..0000000000
--- a/frontend/app/src/components/home/TruncatedAccount.svelte
+++ /dev/null
@@ -1,77 +0,0 @@
-<script lang="ts">
-    import { iconSize } from "@client";
-    import type { Snippet } from "svelte";
-    import { _ } from "svelte-i18n";
-    import ContentCopy from "svelte-material-icons/ContentCopy.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { toastStore } from "../../stores/toast";
-    import { copyToClipboard } from "../../utils/urls";
-
-    interface Props {
-        account: string;
-        centered?: boolean;
-        disableCopy?: boolean;
-        children?: Snippet;
-    }
-
-    let { account, centered = false, disableCopy = false, children }: Props = $props();
-
-    function collapseAccount(account: string) {
-        if (account.length > 23) {
-            return account.slice(0, 10) + "..." + account.slice(account.length - 10);
-        }
-        return account;
-    }
-
-    function copy() {
-        copyToClipboard(account).then((success) => {
-            if (success) {
-                toastStore.showSuccessToast(i18nKey("accountCopiedToClipboard"));
-            } else {
-                toastStore.showFailureToast(
-                    i18nKey("failedToCopyToClipboard", {
-                        account,
-                    }),
-                );
-            }
-        });
-    }
-</script>
-
-<div class="wrapper" class:centered>
-    {@render children?.()}
-    <div class="principal">
-        {collapseAccount(account)}
-    </div>
-    {#if !disableCopy}
-        <div class="copy" title={$_("copyToClipboard")} onclick={copy}>
-            <ContentCopy size={$iconSize} color={"var(--icon-txt)"} />
-        </div>
-    {/if}
-</div>
-
-<style lang="scss">
-    .centered {
-        text-align: center;
-    }
-
-    .wrapper {
-        display: flex;
-        align-items: center;
-        gap: $sp3;
-        .principal {
-            @include ellipsis();
-            @include font(book, normal, fs-80);
-            color: var(--primary);
-        }
-
-        &.centered {
-            justify-content: center;
-        }
-
-        .copy {
-            display: flex;
-            cursor: pointer;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/UnresolvedReply.svelte b/frontend/app/src/components/home/UnresolvedReply.svelte
deleted file mode 100644
index 3130576c3a..0000000000
--- a/frontend/app/src/components/home/UnresolvedReply.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<svelte:options immutable />
-
-<script lang="ts">
-    import { i18nKey } from "../../i18n/i18n";
-    import { rtlStore } from "../../stores/rtl";
-    import Translatable from "../Translatable.svelte";
-</script>
-
-<div class="reply-wrapper" class:rtl={$rtlStore}>
-    <Translatable resourceKey={i18nKey("unresolvedReply")} />
-</div>
-
-<style lang="scss">
-    .reply-wrapper {
-        border-radius: $sp4;
-        padding: $sp4;
-        background-color: var(--currentChat-msg-bg);
-        color: var(--txt);
-        cursor: pointer;
-        box-shadow: -7px 0px 0px 0px var(--currentChat-msg-reply-accent);
-        border: 2px solid var(--currentChat-msg-reply-accent);
-        margin-bottom: $sp3;
-
-        &.rtl {
-            box-shadow: 7px 0px 0px 0px var(--button-bg);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/UserReferralCardContent.svelte b/frontend/app/src/components/home/UserReferralCardContent.svelte
deleted file mode 100644
index f6e7817f4b..0000000000
--- a/frontend/app/src/components/home/UserReferralCardContent.svelte
+++ /dev/null
@@ -1,44 +0,0 @@
-<script lang="ts">
-    import { currentUserIdStore } from "@client";
-    import CopyIcon from "svelte-material-icons/ContentCopy.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { toastStore } from "../../stores/toast";
-    import QRCode from "../QRCode.svelte";
-    import Translatable from "../Translatable.svelte";
-
-    let link = `${window.location.origin}/?ref=${$currentUserIdStore}`;
-
-    function onCopy() {
-        navigator.clipboard.writeText(link).then(
-            () => toastStore.showSuccessToast(i18nKey("linkCopiedToClipboard")),
-            () => toastStore.showFailureToast(i18nKey("failedToCopyLinkToClipboard")),
-        );
-    }
-</script>
-
-<div class="container">
-    <div on:click={onCopy} class="link">
-        <div><Translatable resourceKey={i18nKey("tapForReferralLink")} /></div>
-        <CopyIcon size={"1em"} color={"var(--icon-txt)"} />
-    </div>
-    <QRCode text={link} size="larger" fullWidthOnMobile />
-</div>
-
-<style lang="scss">
-    .link {
-        display: flex;
-        gap: $sp2;
-        align-items: center;
-        cursor: pointer;
-    }
-
-    .link {
-        color: var(--link-underline);
-    }
-
-    .container {
-        display: flex;
-        flex-direction: column;
-        gap: $sp4;
-    }
-</style>
diff --git a/frontend/app/src/components/home/VideoCallContent.svelte b/frontend/app/src/components/home/VideoCallContent.svelte
deleted file mode 100644
index 0c4a58a394..0000000000
--- a/frontend/app/src/components/home/VideoCallContent.svelte
+++ /dev/null
@@ -1,172 +0,0 @@
-<script lang="ts">
-    import {
-        AvatarSize,
-        OpenChat,
-        allUsersStore,
-        chatIdentifiersEqual,
-        currentUserIdStore,
-        publish,
-        selectedChatSummaryStore,
-        selectedChatWebhooksStore,
-        selectedCommunityMembersStore,
-        type VideoCallContent,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { activeVideoCall } from "../../stores/video";
-    import Avatar from "../Avatar.svelte";
-    import Button from "../Button.svelte";
-    import Translatable from "../Translatable.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        content: VideoCallContent;
-        messageIndex: number;
-        timestamp: bigint | undefined;
-        senderId: string;
-    }
-
-    let { content, messageIndex, timestamp, senderId }: Props = $props();
-
-    let displayName = $derived(client.getDisplayName(senderId, $selectedCommunityMembersStore, $selectedChatWebhooksStore));
-    let inCall = $derived(
-        $activeVideoCall !== undefined &&
-            $selectedChatSummaryStore !== undefined &&
-            $selectedChatSummaryStore.videoCallInProgress?.messageIndex === messageIndex &&
-            chatIdentifiersEqual($activeVideoCall.chatId, $selectedChatSummaryStore?.id),
-    );
-    let endedDate = $derived(content.ended ? new Date(Number(content.ended)) : undefined);
-    let missed = $derived(
-        content.ended &&
-            content.participants.find((p) => p.userId === $currentUserIdStore) === undefined,
-    );
-    let duration = $derived(
-        content.ended !== undefined && timestamp !== undefined
-            ? i18nKey("videoCall.duration", {
-                  duration: client.formatDuration(Number(content.ended - timestamp)),
-              })
-            : undefined,
-    );
-
-    function joinCall() {
-        if (!inCall && $selectedChatSummaryStore?.videoCallInProgress) {
-            publish("startVideoCall", {
-                chatId: $selectedChatSummaryStore.id,
-                callType: $selectedChatSummaryStore.videoCallInProgress.callType,
-                join: true,
-            });
-        }
-    }
-
-    function leaveCall() {
-        if (inCall) {
-            activeVideoCall.endCall();
-        }
-    }
-</script>
-
-<div class="video-call">
-    <p class="initiator" class:missed>
-        {#if content.callType === "broadcast"}
-            <Translatable
-                resourceKey={i18nKey("videoCall.broadcastStartedBy", { username: displayName })} />
-        {:else if missed}
-            <Translatable
-                resourceKey={i18nKey("videoCall.missedCall", { username: displayName })} />
-        {:else}
-            <Translatable resourceKey={i18nKey("videoCall.startedBy", { username: displayName })} />
-        {/if}
-    </p>
-    <div class="avatars">
-        {#each [...content.participants].slice(0, 5) as participantId}
-            <Avatar
-                url={client.userAvatarUrl($allUsersStore.get(participantId.userId))}
-                userId={participantId.userId}
-                size={AvatarSize.Small} />
-        {/each}
-        {#if content.participants.length > 5}
-            <div class="extra">
-                {`+${content.participants.length - 5}`}
-            </div>
-        {/if}
-    </div>
-    <div class="video-call-btn">
-        {#if inCall}
-            <Button fill disabled={content.ended !== undefined} onClick={leaveCall}>
-                <Translatable
-                    resourceKey={i18nKey(content.ended ? "videoCall.ended" : "videoCall.leave")} />
-            </Button>
-        {:else}
-            <Button fill disabled={endedDate !== undefined} onClick={joinCall}>
-                <Translatable
-                    resourceKey={endedDate
-                        ? i18nKey("videoCall.endedAt", {
-                              time: client.toShortTimeString(endedDate),
-                          })
-                        : i18nKey("videoCall.join")} />
-                {#if duration}
-                    <div class="duration">
-                        <Translatable resourceKey={duration} />
-                    </div>
-                {/if}
-            </Button>
-        {/if}
-    </div>
-</div>
-
-<style lang="scss">
-    $accent: var(--prize);
-
-    .video-call-btn :global(button) {
-        min-height: 45px !important;
-        min-width: unset !important;
-    }
-
-    .video-call-btn :global(button.loading) {
-        background-color: $accent;
-        color: var(--button-txt);
-    }
-
-    .video-call-btn :global(button:not(.disabled):hover) {
-        background-color: $accent;
-        color: var(--button-txt);
-    }
-
-    .video-call-btn :global(button:not(.disabled)) {
-        border: 1px solid $accent !important;
-    }
-
-    .video-call {
-        padding: $sp3 0 0 0;
-    }
-
-    .initiator {
-        margin-bottom: $sp3;
-
-        &.missed {
-            color: var(--warn);
-        }
-    }
-
-    .avatars {
-        display: inline-flex;
-        gap: $sp2;
-        margin-bottom: $sp4;
-    }
-
-    .extra {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        border-radius: 50%;
-        width: toRem(25);
-        height: toRem(25);
-        @include font-size(fs-60);
-        background-color: rgba(0, 0, 0, 0.15);
-    }
-
-    .duration {
-        @include font(light, normal, fs-60);
-    }
-</style>
diff --git a/frontend/app/src/components/home/VideoContent.svelte b/frontend/app/src/components/home/VideoContent.svelte
deleted file mode 100644
index dca9e2848a..0000000000
--- a/frontend/app/src/components/home/VideoContent.svelte
+++ /dev/null
@@ -1,124 +0,0 @@
-<script lang="ts">
-    import { rtlStore } from "../../stores/rtl";
-    import type { VideoContent } from "@client";
-    import ContentCaption from "./ContentCaption.svelte";
-    import { reservedMediaStyle, setPlayingMedia } from "../../utils/media";
-
-    interface Props {
-        content: VideoContent;
-        fill: boolean;
-        draft?: boolean;
-        reply?: boolean;
-        height?: number | undefined;
-        edited: boolean;
-        blockLevelMarkdown?: boolean;
-    }
-
-    let {
-        content,
-        fill,
-        draft = false,
-        reply = false,
-        height = undefined,
-        edited,
-        blockLevelMarkdown = false,
-    }: Props = $props();
-
-    let videoPlayer: HTMLVideoElement | undefined = $state();
-    let withCaption = content.caption !== undefined && content.caption !== "";
-    let landscape = content.height < content.width;
-
-    function onPlay() {
-        if (videoPlayer) {
-            setPlayingMedia(videoPlayer);
-        }
-    }
-</script>
-
-<div class="video" class:reply class:rtl={$rtlStore}>
-    <video
-        preload="none"
-        poster={content.imageData.blobUrl}
-        class:landscape
-        class:fill
-        class:withCaption
-        class:draft
-        class:reply
-        style={height !== undefined
-            ? `height: ${height}px`
-            : draft || reply
-              ? undefined
-              : reservedMediaStyle(content.width, content.height)}
-        controls
-        onplay={onPlay}
-        bind:this={videoPlayer}>
-        <track kind="captions" />
-        {#if content.videoData.blobUrl}
-            <source src={content.videoData.blobUrl} />
-        {/if}
-    </video>
-</div>
-
-<ContentCaption caption={content.caption} {edited} {blockLevelMarkdown} />
-
-<style lang="scss">
-    .video {
-        position: relative;
-        cursor: pointer;
-
-        &.reply {
-            float: right;
-            margin-left: $sp3;
-            margin-right: 0;
-        }
-
-        &.rtl.reply {
-            float: left;
-            margin-left: 0;
-            margin-right: $sp3;
-        }
-
-        video {
-            width: 100%;
-            display: block;
-
-            &:not(.landscape) {
-                min-height: 90px;
-                min-width: 0px;
-            }
-
-            &:not(.fill) {
-                border-radius: $sp4;
-            }
-
-            &.withCaption {
-                margin-bottom: $sp2;
-            }
-
-            &.draft {
-                max-width: calc(var(--vh, 1vh) * 50);
-                max-height: none;
-                height: auto;
-            }
-
-            &:not(.landscape).draft {
-                max-width: none;
-                max-height: calc(var(--vh, 1vh) * 50);
-                width: auto;
-                height: 100%;
-            }
-
-            &.reply {
-                max-width: 90px;
-                max-height: none;
-                height: auto;
-            }
-
-            &:not(.landscape).reply {
-                max-width: none;
-                max-height: 90px;
-                width: auto;
-            }
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/VisibilityLabel.svelte b/frontend/app/src/components/home/VisibilityLabel.svelte
deleted file mode 100644
index f3fb047622..0000000000
--- a/frontend/app/src/components/home/VisibilityLabel.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-<script lang="ts">
-    import Translatable from "../Translatable.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-
-    interface Props {
-        isPublic: boolean;
-    }
-
-    let { isPublic }: Props = $props();
-</script>
-
-<div class="visibility">
-    <div class={`img ${isPublic ? "public" : "private"}`}></div>
-    <div class="name">
-        <Translatable resourceKey={i18nKey(isPublic ? "access.public" : "access.private")} />
-    </div>
-</div>
-
-<style lang="scss">
-    .visibility {
-        display: flex;
-        gap: $sp2;
-        align-items: center;
-        text-transform: uppercase;
-        background-color: var(--chatSummary-bg-selected);
-        padding: $sp2 $sp3;
-        border-radius: $sp3;
-
-        .img {
-            background-repeat: no-repeat;
-            $size: 12px;
-            flex: 0 0 $size;
-            width: $size;
-            height: $size;
-
-            &.public {
-                background-image: url("/assets/unlocked.svg");
-            }
-
-            &.private {
-                background-image: url("/assets/locked.svg");
-            }
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/access/AccessGateCheckFailed.svelte b/frontend/app/src/components/home/access/AccessGateCheckFailed.svelte
deleted file mode 100644
index fe4f098f68..0000000000
--- a/frontend/app/src/components/home/access/AccessGateCheckFailed.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script lang="ts">
-    import { mobileWidth, type EnhancedAccessGate } from "@client";
-    import { i18nKey } from "../../../i18n/i18n";
-    import ModalContent from "../../ModalContent.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import AccessGateSummary from "./AccessGateSummary.svelte";
-
-    interface Props {
-        gates: EnhancedAccessGate[];
-        onClose: () => void;
-    }
-
-    let { gates, onClose }: Props = $props();
-</script>
-
-<ModalContent fixedWidth={$mobileWidth} fitToContent={!$mobileWidth} {onClose}>
-    {#snippet header()}
-        <div><Translatable resourceKey={i18nKey("access.gateCheckFailed")} /></div>
-    {/snippet}
-    {#snippet body()}
-        <div class="body">
-            {#each gates as gate}
-                <AccessGateSummary
-                    editable={false}
-                    gateConfig={{ expiry: gate.expiry, gate }}
-                    level={gate.level} />
-            {/each}
-        </div>
-    {/snippet}
-</ModalContent>
-
-<style lang="scss">
-    .body {
-        display: flex;
-        flex-direction: column;
-        gap: $sp4;
-    }
-</style>
diff --git a/frontend/app/src/components/home/access/AccessGateEvaluator.svelte b/frontend/app/src/components/home/access/AccessGateEvaluator.svelte
deleted file mode 100644
index 8fa4acc465..0000000000
--- a/frontend/app/src/components/home/access/AccessGateEvaluator.svelte
+++ /dev/null
@@ -1,270 +0,0 @@
-<script lang="ts">
-    import {
-        iconSize,
-        isCompositeGate,
-        isCredentialGate,
-        isDiamondGate,
-        isLeafGate,
-        isLifetimeDiamondGate,
-        isPaymentGate,
-        isUniquePersonGate,
-        OpenChat,
-        shouldPreprocessGate,
-        type EnhancedAccessGate,
-        type GateCheckSucceeded,
-        type LeafGate,
-        type PaymentGateApprovals,
-    } from "@client";
-    import { getContext, onMount } from "svelte";
-    import VectorCombine from "svelte-material-icons/VectorCombine.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Button from "../../Button.svelte";
-    import ButtonGroup from "../../ButtonGroup.svelte";
-    import ModalContent from "../../ModalContent.svelte";
-    import Radio from "../../Radio.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import AccessGateSummary from "./AccessGateSummary.svelte";
-    import CredentialGateEvaluator from "./CredentialGateEvaluator.svelte";
-    import DiamondGateEvaluator from "./DiamondGateEvaluator.svelte";
-    import PaymentGateEvaluator from "./PaymentGateEvaluator.svelte";
-    import UniqueHumanGateEvaluator from "./UniqueHumanGateEvaluator.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        gates: EnhancedAccessGate[];
-        onSuccess: (success: GateCheckSucceeded) => void;
-        onClose: () => void;
-    }
-
-    let { gates, onSuccess, onClose }: Props = $props();
-
-    let result: IteratorResult<EnhancedAccessGate>;
-    let iterator = preprocessGates(gates, needsPreprocessing);
-    let currentGate: EnhancedAccessGate | undefined = $state();
-    let credentials: string[] = [];
-    let paymentApprovals: PaymentGateApprovals = new Map();
-    let compositeGateIndex: number | undefined = undefined;
-    let optionalGatesByIndex: Map<number, LeafGate> = $state(new Map());
-    let optionalInvalid = $derived(
-        currentGate?.kind === "composite_gate" &&
-            optionalGatesByIndex.size >= currentGate.gates.length,
-    );
-
-    onMount(nextGate);
-
-    function needsPreprocessing(gate: EnhancedAccessGate): boolean {
-        if (isCompositeGate(gate) && gate.operator === "or") {
-            return gate.gates.some((g) => shouldPreprocessGate(g));
-        } else {
-            return shouldPreprocessGate(gate);
-        }
-    }
-
-    function leafGatesMatch(a: LeafGate, b: LeafGate) {
-        return JSON.stringify(a) === JSON.stringify(b);
-    }
-
-    function nextGate() {
-        result = iterator.next();
-        if (!result.done) {
-            currentGate = result.value;
-            if (isCompositeGate(currentGate) && currentGate.operator === "or") {
-                optionalGatesByIndex = new Map(
-                    currentGate.gates.map((g, i) => [
-                        i,
-                        { ...g, level: currentGate?.level, expiry: currentGate?.expiry, collectionName: currentGate?.collectionName },
-                    ]),
-                );
-            }
-            if (isLeafGate(currentGate)) {
-                const found = [...optionalGatesByIndex.values()].find((g) =>
-                    leafGatesMatch(g, currentGate as LeafGate),
-                );
-                if (found || client.doesUserMeetAccessGate(currentGate)) {
-                    nextGate();
-                }
-            }
-        } else {
-            currentGate = undefined;
-            onSuccess({ credentials, paymentApprovals, compositeGateIndex });
-        }
-    }
-
-    function* preprocessGates(
-        gates: EnhancedAccessGate[],
-        predicate: (gate: EnhancedAccessGate) => boolean,
-    ): Generator<EnhancedAccessGate> {
-        for (const gate of gates) {
-            if (predicate(gate)) {
-                yield gate;
-            }
-            if (isCompositeGate(gate)) {
-                yield* preprocessGates(
-                    gate.gates.map((g) => ({
-                        ...g,
-                        level: gate.level,
-                        expiry: gate.expiry,
-                        collectionName: gate.collectionName,
-                    })),
-                    predicate,
-                );
-            }
-        }
-    }
-
-    function onApprovePayment({
-        ledger,
-        amount,
-        approvalFee,
-    }: {
-        ledger: string;
-        amount: bigint;
-        approvalFee: bigint;
-    }) {
-        const existing = paymentApprovals.get(ledger);
-        if (existing !== undefined) {
-            // if we already have an approval pending for this ledger we add on the amount
-            // but there will only be one fee
-            existing.amount += amount;
-            paymentApprovals.set(ledger, existing);
-        } else {
-            paymentApprovals.set(ledger, {
-                amount,
-                approvalFee,
-            });
-        }
-        nextGate();
-    }
-
-    function credentialReceived(cred: string) {
-        credentials.push(cred);
-        nextGate();
-    }
-
-    function toggleIndex(i: number, parent: EnhancedAccessGate | undefined) {
-        if (parent === undefined || !isCompositeGate(parent)) return;
-
-        const found = optionalGatesByIndex.has(i);
-        optionalGatesByIndex = new Map(
-            parent.gates.map((g, i) => [i, { ...g, level: parent.level, expiry: parent.expiry, collectionName: parent.collectionName }]),
-        );
-        if (found) {
-            optionalGatesByIndex.delete(i);
-            compositeGateIndex = i;
-        }
-        optionalGatesByIndex = optionalGatesByIndex;
-    }
-</script>
-
-<ModalContent
-    hideHeader
-    hideFooter={currentGate !== undefined && currentGate.kind !== "composite_gate"}
-    closeIcon
-    {onClose}>
-    {#snippet body()}
-        <div class="body access-gate-evaluator">
-            {#if currentGate}
-                {#if isCompositeGate(currentGate) && currentGate.operator === "or"}
-                    <div class="header">
-                        <div class="icon">
-                            <VectorCombine size={$iconSize} color={"var(--txt)"} />
-                        </div>
-                        <p class="title">
-                            <Translatable resourceKey={i18nKey("access.chooseOneGate")} />
-                        </p>
-                    </div>
-                    <p class="subtitle">
-                        <Translatable resourceKey={i18nKey("access.chooseOneGateInfo")} />
-                    </p>
-
-                    {#each currentGate.gates as subgate, i}
-                        <!-- Unique person (DecideAI) verification is suspended - hide it as an option.
-                             Keep the original index i so compositeGateIndex still maps to the real gate. -->
-                        {#if !isUniquePersonGate(subgate)}
-                            <div class="optional-gate">
-                                <Radio
-                                    group={"optional_gates"}
-                                    checked={!optionalGatesByIndex.has(i)}
-                                    onChange={() => toggleIndex(i, currentGate)}
-                                    label={i18nKey(subgate.kind)}
-                                    id={`subgate_${i}`}>
-                                    <AccessGateSummary
-                                        editable={false}
-                                        level={currentGate.level}
-                                        showNoGate={false}
-                                        gateConfig={{ expiry: undefined, gate: subgate }} />
-                                </Radio>
-                            </div>
-                        {/if}
-                    {/each}
-                {:else if isCredentialGate(currentGate)}
-                    <CredentialGateEvaluator
-                        {onClose}
-                        onCredentialReceived={credentialReceived}
-                        gate={currentGate}
-                        level={currentGate.level} />
-                {:else if isUniquePersonGate(currentGate)}
-                    <UniqueHumanGateEvaluator
-                        onCredentialReceived={credentialReceived}
-                        {onClose}
-                        expiry={currentGate.expiry}
-                        level={currentGate.level} />
-                {:else if isPaymentGate(currentGate)}
-                    <PaymentGateEvaluator
-                        {paymentApprovals}
-                        gate={currentGate}
-                        level={currentGate.level}
-                        {onApprovePayment}
-                        {onClose} />
-                {:else if isLifetimeDiamondGate(currentGate)}
-                    <DiamondGateEvaluator
-                        level={currentGate.level}
-                        lifetime
-                        onCredentialReceived={credentialReceived}
-                        onCancel={onClose} />
-                {:else if isDiamondGate(currentGate)}
-                    <DiamondGateEvaluator
-                        level={currentGate.level}
-                        lifetime={false}
-                        onCredentialReceived={credentialReceived}
-                        onCancel={onClose} />
-                {/if}
-            {/if}
-        </div>
-    {/snippet}
-
-    {#snippet footer()}
-        <div>
-            <ButtonGroup>
-                {#if currentGate !== undefined}
-                    {#if isCompositeGate(currentGate)}
-                        <Button disabled={optionalInvalid} onClick={nextGate}>
-                            <Translatable resourceKey={i18nKey("access.next")} />
-                        </Button>
-                    {/if}
-                {:else}
-                    <Button onClick={onClose}>
-                        <Translatable resourceKey={i18nKey("access.join")} />
-                    </Button>
-                {/if}
-            </ButtonGroup>
-        </div>
-    {/snippet}
-</ModalContent>
-
-<style lang="scss">
-    .header {
-        @include font(bold, normal, fs-130, 29);
-        margin-bottom: $sp4;
-        display: flex;
-        align-items: center;
-        gap: $sp3;
-    }
-    .subtitle {
-        margin-bottom: $sp4;
-    }
-    .optional-gate {
-        margin-bottom: $sp3;
-    }
-</style>
diff --git a/frontend/app/src/components/home/access/AccessGateExpiry.svelte b/frontend/app/src/components/home/access/AccessGateExpiry.svelte
deleted file mode 100644
index ea81b72c17..0000000000
--- a/frontend/app/src/components/home/access/AccessGateExpiry.svelte
+++ /dev/null
@@ -1,50 +0,0 @@
-<script lang="ts">
-    import { type OpenChat } from "@client";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Translatable from "../../Translatable.svelte";
-    import { getContext } from "svelte";
-    import { msToDays, msToHours, msToMinutes } from "../../../utils/time";
-
-    type DurationData = {
-        total: number;
-        days: number;
-        hours: number;
-        minutes: number;
-        seconds: number;
-    };
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        expiry: bigint | undefined;
-    }
-
-    let { expiry }: Props = $props();
-
-    function formatDuration(duration: DurationData | undefined): string | undefined {
-        if (duration === undefined) return undefined;
-
-        // TODO - pluralisation & i18n
-        if (duration.days > 0) {
-            return `${msToDays(duration.total)} days`;
-        }
-
-        if (duration.hours > 0) {
-            return `${msToHours(duration.total)} hours`;
-        }
-
-        // TODO - pluralisation & i18n
-        if (duration.minutes > 0) {
-            return `${msToMinutes(duration.total)} minutes`;
-        }
-    }
-    let duration = $derived(expiry ? client.durationFromMilliseconds(Number(expiry)) : undefined);
-    let durationString = $derived(formatDuration(duration));
-</script>
-
-{#if durationString !== undefined}
-    <Translatable
-        resourceKey={i18nKey("access.evaluationIntervalSummary", {
-            interval: durationString,
-        })} />
-{/if}
diff --git a/frontend/app/src/components/home/access/AccessGateParameters.svelte b/frontend/app/src/components/home/access/AccessGateParameters.svelte
deleted file mode 100644
index 7886616f86..0000000000
--- a/frontend/app/src/components/home/access/AccessGateParameters.svelte
+++ /dev/null
@@ -1,95 +0,0 @@
-<script lang="ts">
-    import {
-        OpenChat,
-        type CredentialGate,
-        type NeuronGate,
-        type PaymentGate,
-        type TokenBalanceGate,
-    } from "@client";
-    import { getContext } from "svelte";
-    import Translatable from "../../Translatable.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import CredentialGateSummary from "./CredentialGateSummary.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        gate: NeuronGate | CredentialGate | PaymentGate | TokenBalanceGate;
-    }
-
-    let { gate }: Props = $props();
-    let tokenDetails = $derived(client.getTokenDetailsForAccessGate(gate));
-</script>
-
-{#if gate.kind === "credential_gate"}
-    <CredentialGateSummary {gate} />
-{:else if gate.kind === "payment_gate" && tokenDetails !== undefined}
-    <div class="detail">
-        <div>
-            <Translatable
-                resourceKey={i18nKey("access.tokenPayment", { token: tokenDetails.symbol })} />
-        </div>
-        <div class="params">
-            <div>
-                <Translatable
-                    resourceKey={i18nKey("access.amountN", {
-                        n: client.formatTokens(gate.amount, tokenDetails.decimals),
-                    })} />
-            </div>
-        </div>
-    </div>
-{:else if gate.kind === "neuron_gate" && tokenDetails !== undefined}
-    <div class="detail">
-        <div>
-            <Translatable
-                resourceKey={i18nKey("access.tokenNeuronHolder", {
-                    token: tokenDetails.symbol,
-                })} />
-        </div>
-        <div class="params">
-            {#if gate.minDissolveDelay}
-                <div>
-                    <Translatable
-                        resourceKey={i18nKey("access.minDissolveDelayN", {
-                            n: gate.minDissolveDelay / (24 * 60 * 60 * 1000),
-                        })} />
-                </div>
-            {/if}
-            {#if gate.minStakeE8s}
-                <div>
-                    <Translatable
-                        resourceKey={i18nKey("access.minStakeN", {
-                            n: client.formatTokens(
-                                BigInt(gate.minStakeE8s),
-                                tokenDetails?.decimals ?? 8,
-                            ),
-                        })} />
-                </div>
-            {/if}
-        </div>
-    </div>
-{:else if gate.kind === "token_balance_gate" && tokenDetails !== undefined}
-    <div class="detail">
-        <div>
-            <Translatable
-                resourceKey={i18nKey("access.minimumTokenBalance", {
-                    token: tokenDetails.symbol,
-                })} />
-        </div>
-        <div class="params">
-            <div>
-                <Translatable
-                    resourceKey={i18nKey("access.minimumBalanceN", {
-                        n: client.formatTokens(gate.minBalance, tokenDetails.decimals),
-                    })} />
-            </div>
-        </div>
-    </div>
-{/if}
-
-<style lang="scss">
-    .params {
-        @include font(light, normal, fs-70);
-        color: var(--txt-light);
-    }
-</style>
diff --git a/frontend/app/src/components/home/access/AccessGateSummary.svelte b/frontend/app/src/components/home/access/AccessGateSummary.svelte
deleted file mode 100644
index cf20bbb373..0000000000
--- a/frontend/app/src/components/home/access/AccessGateSummary.svelte
+++ /dev/null
@@ -1,114 +0,0 @@
-<script lang="ts">
-    import {
-        type AccessGate,
-        type AccessGateConfig,
-        type Level,
-        stripSuspendedGate,
-    } from "@client";
-    import AccessGateIcon from "./AccessGateIcon.svelte";
-    import { gateLabel } from "../../../utils/access";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Translatable from "../../Translatable.svelte";
-    import AccessGateBuilder from "./AccessGateBuilder.svelte";
-    import { _ } from "svelte-i18n";
-
-    interface Props {
-        gateConfig: AccessGateConfig;
-        editable: boolean;
-        level: Level;
-        valid?: boolean;
-        showNoGate?: boolean;
-        onUpdated?: () => void;
-    }
-
-    let {
-        gateConfig = $bindable(),
-        editable,
-        level,
-        valid = $bindable(true),
-        showNoGate = false,
-        onUpdated,
-    }: Props = $props();
-
-    let showDetail = $state(false);
-
-    function open(e: Event) {
-        e.preventDefault();
-        e.stopPropagation();
-        showDetail = true;
-    }
-
-    function getGateResourceKey(gate: AccessGate) {
-        return gateLabel[gate.kind] ?? "access.unknownGate";
-    }
-
-    function getGateText(gate: AccessGate) {
-        if (gate.kind === "composite_gate") {
-            return i18nKey(
-                gate.gates.map((g) => $_(getGateResourceKey(g))).join(` ${gate.operator} `),
-            );
-        }
-        return i18nKey(getGateResourceKey(gate));
-    }
-
-    function close() {
-        showDetail = false;
-        onUpdated?.();
-    }
-    // Display the gate with any suspended (unique person) gates stripped out. The underlying
-    // gateConfig is left untouched so editing preserves the dormant gate.
-    let displayGateConfig = $derived({ ...gateConfig, gate: stripSuspendedGate(gateConfig.gate) });
-    let gateText = $derived(getGateText(displayGateConfig.gate));
-</script>
-
-{#if showDetail}
-    {#if editable}
-        <AccessGateBuilder bind:valid {level} onClose={close} bind:gateConfig {editable} />
-    {:else}
-        <AccessGateBuilder bind:valid {level} onClose={close} gateConfig={displayGateConfig} {editable} />
-    {/if}
-{/if}
-
-{#if displayGateConfig.gate.kind !== "no_gate" || showNoGate}
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div class:invalid={!valid} onclick={open} class:editable class="summary">
-        <div class="icon">
-            <AccessGateIcon button {level} showNoGate gateConfig={displayGateConfig} />
-        </div>
-        <div class="name">
-            {#if gateText !== undefined}
-                <Translatable resourceKey={gateText} />
-            {/if}
-        </div>
-    </div>
-{/if}
-
-<style lang="scss">
-    .summary {
-        width: fit-content;
-        padding: $sp3 $sp4;
-        display: flex;
-        align-items: center;
-        gap: $sp3;
-        background: var(--button-bg);
-        border-radius: var(--button-rd);
-        color: var(--button-txt);
-        transition:
-            background ease-in-out 200ms,
-            color ease-in-out 200ms;
-        cursor: pointer;
-
-        @media (hover: hover) {
-            &:hover {
-                background: var(--button-hv);
-                color: var(--button-hv-txt);
-            }
-        }
-
-        &.invalid {
-            background: var(--toast-failure-bg);
-            color: var(--toast-failure-txt);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/access/DiamondGateEvaluator.svelte b/frontend/app/src/components/home/access/DiamondGateEvaluator.svelte
deleted file mode 100644
index 445bfa7032..0000000000
--- a/frontend/app/src/components/home/access/DiamondGateEvaluator.svelte
+++ /dev/null
@@ -1,121 +0,0 @@
-<script lang="ts">
-    import {
-        LEDGER_CANISTER_CHAT,
-        LEDGER_CANISTER_ICP,
-        type Level,
-        cryptoBalanceStore,
-        cryptoLookup,
-    } from "@client";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Diamond from "../../icons/Diamond.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import BalanceWithRefresh from "../BalanceWithRefresh.svelte";
-    import CryptoSelector from "../CryptoSelector.svelte";
-    import Payment from "../upgrade/Payment.svelte";
-
-    interface Props {
-        lifetime: boolean;
-        level: Level;
-        onCancel: () => void;
-        onCredentialReceived: (cred: string) => void;
-    }
-
-    let { lifetime, level, onCancel, onCredentialReceived }: Props = $props();
-
-    let refreshingBalance = $state(false);
-    let error: string | undefined = $state();
-    let confirming = $state(false);
-    let confirmed = $state(false);
-
-    let ledger: string = $state(
-        import.meta.env.OC_NODE_ENV === "production" ? LEDGER_CANISTER_CHAT : LEDGER_CANISTER_ICP,
-    );
-
-    function onBalanceRefreshed() {
-        error = undefined;
-    }
-
-    function onBalanceRefreshError(err: string) {
-        error = err;
-    }
-    let tokenDetails = $derived({
-        symbol: $cryptoLookup.get(ledger),
-        balance: $cryptoBalanceStore.get(ledger) ?? 0n,
-    });
-</script>
-
-<div class="header">
-    <div class="title-and-icon">
-        <Diamond size={"1em"} show={lifetime ? "gold" : "blue"} />
-        <div>
-            <CryptoSelector
-                bind:ledger
-                filter={(t) => ["chat", "icp"].includes(t.symbol.toLowerCase())} />
-        </div>
-    </div>
-    <div class="balance">
-        <BalanceWithRefresh
-            {ledger}
-            value={tokenDetails.balance}
-            bind:refreshing={refreshingBalance}
-            onRefreshed={onBalanceRefreshed}
-            onError={onBalanceRefreshError} />
-    </div>
-</div>
-<div>
-    {#if !confirming}
-        <p class="para">
-            {#if lifetime}
-                <Translatable
-                    resourceKey={i18nKey(
-                        "access.lifetimeDiamondGateInfo2",
-                        undefined,
-                        level,
-                        true,
-                    )} />
-            {:else}
-                <Translatable
-                    resourceKey={i18nKey("access.diamondGateInfo2", undefined, level, true)} />
-            {/if}
-        </p>
-    {/if}
-
-    <Payment
-        bind:confirmed
-        bind:confirming
-        bind:refreshingBalance
-        {ledger}
-        {error}
-        allowBack={false}
-        {lifetime}
-        showExpiry={false}
-        padded={false}
-        accountBalance={Number(tokenDetails.balance)}
-        onSuccess={onCredentialReceived}
-        {onCancel} />
-</div>
-
-<style lang="scss">
-    .header {
-        @include font(bold, normal, fs-130, 29);
-        margin-bottom: $sp4;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: $sp2;
-    }
-
-    .title-and-icon {
-        display: flex;
-        align-items: center;
-        gap: $sp3;
-    }
-
-    .para {
-        margin-bottom: $sp4;
-    }
-
-    .error {
-        margin-top: $sp4;
-    }
-</style>
diff --git a/frontend/app/src/components/home/access/PaymentGateEvaluator.svelte b/frontend/app/src/components/home/access/PaymentGateEvaluator.svelte
deleted file mode 100644
index 203e9b9b93..0000000000
--- a/frontend/app/src/components/home/access/PaymentGateEvaluator.svelte
+++ /dev/null
@@ -1,171 +0,0 @@
-<script lang="ts">
-    import {
-        type Level,
-        type OpenChat,
-        type PaymentGate,
-        type PaymentGateApprovals,
-        type ResourceKey,
-        cryptoBalanceStore,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { i18nKey, interpolate } from "../../../i18n/i18n";
-    import { pinNumberErrorMessageStore } from "../../../stores/pinNumber";
-    import AlertBox from "../../AlertBox.svelte";
-    import Button from "../../Button.svelte";
-    import ButtonGroup from "../../ButtonGroup.svelte";
-    import ErrorMessage from "../../ErrorMessage.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import AccountInfo from "../AccountInfo.svelte";
-    import BalanceWithRefresh from "../BalanceWithRefresh.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import AccessGateExpiry from "./AccessGateExpiry.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        gate: PaymentGate & { expiry: bigint | undefined };
-        level: Level;
-        paymentApprovals: PaymentGateApprovals;
-        onApprovePayment: (args: { ledger: string; amount: bigint; approvalFee: bigint }) => void;
-        onClose: () => void;
-    }
-
-    let { gate, level, paymentApprovals, onApprovePayment, onClose }: Props = $props();
-
-    let error: ResourceKey | undefined = $state(undefined);
-    let balanceWithRefresh: BalanceWithRefresh | undefined = $state();
-    let refreshingBalance = $state(false);
-
-    function balanceAfterCurrentCommitments(
-        ledger: string,
-        approvals: PaymentGateApprovals,
-        balance: bigint,
-    ) {
-        return balance - (approvals.get(ledger)?.amount ?? 0n);
-    }
-
-    function onStartRefreshingBalance() {
-        refreshingBalance = true;
-    }
-
-    function onRefreshingBalanceSuccess() {
-        error = insufficientFunds ? i18nKey("Insufficient funds") : undefined;
-        refreshingBalance = false;
-    }
-
-    function onRefreshingBalanceFailed() {
-        error = i18nKey("Failed to refresh balance");
-        refreshingBalance = false;
-    }
-
-    function onClickPrimary() {
-        if (insufficientFunds) {
-            balanceWithRefresh?.refresh();
-        } else {
-            onApprovePayment({
-                ledger: token.ledger,
-                amount: gate.amount,
-                approvalFee: token.transferFee,
-            });
-        }
-    }
-    let token = $derived(client.getTokenDetailsForAccessGate(gate)!);
-    let originalBalance = $derived($cryptoBalanceStore.get(token.ledger) ?? 0n);
-    let cryptoBalance = $derived(
-        balanceAfterCurrentCommitments(token.ledger, paymentApprovals, originalBalance),
-    );
-    let insufficientFunds = $derived(cryptoBalance < gate.amount);
-    let approvalMessage = $derived(
-        interpolate(
-            $_,
-            i18nKey(
-                "access.paymentApprovalMessage",
-                {
-                    amount: client.formatTokens(gate.amount, token.decimals),
-                    token: token.symbol,
-                },
-                level,
-                true,
-            ),
-        ),
-    );
-    let distributionMessage = $derived(
-        interpolate($_, i18nKey("access.paymentDistributionMessage", undefined, level, true)),
-    );
-    let errorMessage = $derived(error !== undefined ? error : $pinNumberErrorMessageStore);
-</script>
-
-<div class="header">
-    <div class="title-and-icon">
-        <div class="icon">🔒️</div>
-        <div class="title">
-            <Translatable resourceKey={i18nKey("access.approvePaymentTitle")} />
-        </div>
-    </div>
-    <BalanceWithRefresh
-        bind:this={balanceWithRefresh}
-        ledger={gate.ledgerCanister}
-        value={cryptoBalance}
-        label={i18nKey("cryptoAccount.shortBalanceLabel")}
-        bold
-        onClick={onStartRefreshingBalance}
-        onRefreshed={onRefreshingBalanceSuccess}
-        onError={onRefreshingBalanceFailed} />
-</div>
-<div>
-    <p>
-        <Markdown text={approvalMessage + " " + distributionMessage} />
-    </p>
-    {#if gate.expiry !== undefined}
-        <AlertBox>
-            <AccessGateExpiry expiry={gate.expiry} />
-        </AlertBox>
-    {/if}
-    {#if errorMessage !== undefined}
-        <div class="error">
-            <ErrorMessage><Translatable resourceKey={errorMessage} /></ErrorMessage>
-        </div>
-    {/if}
-    {#if insufficientFunds}
-        <AccountInfo ledger={gate.ledgerCanister} />
-        <p><Translatable resourceKey={i18nKey("tokenTransfer.makeDeposit")} /></p>
-    {/if}
-</div>
-<div>
-    <ButtonGroup>
-        <Button secondary onClick={onClose}>{$_("cancel")}</Button>
-        <Button loading={refreshingBalance} onClick={onClickPrimary}
-            ><Translatable
-                resourceKey={i18nKey(insufficientFunds ? "Refresh" : "Approve payment")} /></Button>
-    </ButtonGroup>
-</div>
-
-<style lang="scss">
-    .header {
-        @include font(bold, normal, fs-130, 29);
-        margin-bottom: $sp4;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: $sp2;
-    }
-
-    .title-and-icon {
-        display: flex;
-        align-items: center;
-        gap: $sp3;
-    }
-
-    .icon {
-        @include font-size(fs-130);
-    }
-
-    p {
-        margin-bottom: $sp4;
-    }
-
-    .error {
-        margin-top: $sp4;
-    }
-</style>
diff --git a/frontend/app/src/components/home/access/UniqueHumanGateEvaluator.svelte b/frontend/app/src/components/home/access/UniqueHumanGateEvaluator.svelte
deleted file mode 100644
index ad28b9b97c..0000000000
--- a/frontend/app/src/components/home/access/UniqueHumanGateEvaluator.svelte
+++ /dev/null
@@ -1,172 +0,0 @@
-<script lang="ts">
-    import { iconSize, type Level, type OpenChat } from "@client";
-    import { getContext, onMount } from "svelte";
-    import { _ } from "svelte-i18n";
-    import AccountCheck from "svelte-material-icons/AccountCheck.svelte";
-    import { i18nKey, interpolate } from "../../../i18n/i18n";
-    import { uniquePersonCredentialGate } from "../../../utils/access";
-    import AlertBox from "../../AlertBox.svelte";
-    import Button from "../../Button.svelte";
-    import ButtonGroup from "../../ButtonGroup.svelte";
-    import ErrorMessage from "../../ErrorMessage.svelte";
-    import FancyLoader from "../../icons/FancyLoader.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import HumanityConfirmation from "../HumanityConfirmation.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import LinkAccounts from "../profile/LinkAccounts.svelte";
-    import AccessGateExpiry from "./AccessGateExpiry.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        level: Level;
-        expiry: bigint | undefined;
-        onCredentialReceived: (cred: string) => void;
-        onClose: () => void;
-    }
-
-    let { level, expiry, onClose, onCredentialReceived }: Props = $props();
-
-    let failed = $state(false);
-    let verifying = $state(false);
-    let confirmed = $state(false);
-    let step: "linking" | "verification" = $state("linking");
-    let iiPrincipal: string | undefined = $state(undefined);
-    let checkingPrincipal = $state(true);
-
-    onMount(() => {
-        client
-            .getLinkedIIPrincipal()
-            .then((p) => {
-                iiPrincipal = p;
-                if (iiPrincipal !== undefined) {
-                    step = "verification";
-                }
-            })
-            .finally(() => (checkingPrincipal = false));
-    });
-
-    function verify() {
-        verifying = true;
-        failed = false;
-        if (iiPrincipal === undefined) return;
-        client
-            .verifyAccessGate(uniquePersonCredentialGate, iiPrincipal)
-            .then((credential) => {
-                if (credential === undefined) {
-                    failed = true;
-                } else {
-                    onCredentialReceived(credential);
-                }
-            })
-            .catch(() => (failed = true))
-            .finally(() => (verifying = false));
-    }
-</script>
-
-{#if checkingPrincipal}
-    <div class="loader">
-        <FancyLoader />
-    </div>
-{:else if step === "linking"}
-    <LinkAccounts
-        bind:iiPrincipal
-        {onClose}
-        onProceed={() => (step = "verification")}
-        explanations={[i18nKey("identity.humanityWarning")]} />
-{:else}
-    <div class="header">
-        <AccountCheck size={$iconSize} color={"var(--txt)"} />
-        <div class="title">
-            <Translatable resourceKey={i18nKey("access.uniquePerson")} />
-        </div>
-    </div>
-    <div>
-        {#if failed}
-            <p class="info">
-                <ErrorMessage>
-                    <Translatable
-                        resourceKey={i18nKey(
-                            "access.credential.credentialCheckFailed",
-                            {
-                                credential: "Unique person",
-                            },
-                            level,
-                            true,
-                        )} />
-                </ErrorMessage>
-            </p>
-            <p class="question">
-                <Translatable resourceKey={i18nKey("access.uniquePersonInfo1")} />
-            </p>
-
-            <p class="answer">
-                <Markdown text={interpolate($_, i18nKey("access.uniquePersonInfo2"))} />
-            </p>
-
-            <p class="answer">
-                <Translatable resourceKey={i18nKey("access.uniquePersonInfo3")} />
-            </p>
-        {:else}
-            <p class="info">
-                <Translatable
-                    resourceKey={i18nKey(
-                        "access.credential.credentialCheckMessage",
-                        {
-                            credential: "Unique person",
-                        },
-                        level,
-                        true,
-                    )} />
-            </p>
-
-            <HumanityConfirmation bind:confirmed />
-
-            {#if expiry !== undefined}
-                <AlertBox>
-                    <AccessGateExpiry {expiry} />
-                </AlertBox>
-            {/if}
-        {/if}
-    </div>
-    <div>
-        <ButtonGroup>
-            <Button secondary onClick={onClose}
-                ><Translatable resourceKey={i18nKey("cancel")} /></Button>
-            <Button
-                loading={verifying}
-                disabled={verifying || !confirmed || iiPrincipal === undefined}
-                onClick={verify}><Translatable resourceKey={i18nKey("access.verify")} /></Button>
-        </ButtonGroup>
-    </div>
-{/if}
-
-<style lang="scss">
-    .header {
-        @include font(bold, normal, fs-130, 29);
-        margin-bottom: $sp4;
-        display: flex;
-        align-items: center;
-        gap: $sp3;
-    }
-
-    .info,
-    .question,
-    .answer {
-        margin-bottom: $sp4;
-    }
-
-    .question {
-        @include font(book, normal, fs-90);
-    }
-
-    .answer {
-        color: var(--txt-light);
-        @include font(book, normal, fs-90);
-    }
-
-    .loader {
-        width: 100px;
-        margin: 100px auto;
-    }
-</style>
diff --git a/frontend/app/src/components/home/activity/ActivityEvent.svelte b/frontend/app/src/components/home/activity/ActivityEvent.svelte
deleted file mode 100644
index adef5ddb08..0000000000
--- a/frontend/app/src/components/home/activity/ActivityEvent.svelte
+++ /dev/null
@@ -1,323 +0,0 @@
-<script lang="ts">
-    import type { Message, MessageActivityEvent, ResourceKey } from "@client";
-    import {
-        activityFeedShowing,
-        allUsersStore,
-        AvatarSize,
-        communitiesStore,
-        currentUserIdStore,
-        OpenChat,
-        routeForMessageContext,
-        type MessageContext,
-    } from "@client";
-    import { navigate } from "@utils/navigation";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { i18nKey, interpolate } from "../../../i18n/i18n";
-    import { buildDisplayName } from "../../../utils/user";
-    import Avatar from "../../Avatar.svelte";
-    import Link from "../../Link.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import MessageReaction from "../MessageReaction.svelte";
-    import TipThumbnail from "../TipThumbnail.svelte";
-    import ActivityIcon from "./ActivityIcon.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        event: MessageActivityEvent;
-        selected: boolean;
-        onClick: () => void;
-    }
-
-    let { event, selected, onClick }: Props = $props();
-
-    function getChatName(ctx: MessageContext): string | undefined {
-        const chat = client.lookupChatSummary(ctx.chatId);
-        const parts = [];
-        if (chat !== undefined) {
-            switch (chat.kind) {
-                case "direct_chat":
-                    parts.push(client.getDisplayName(chat.them.userId));
-                    break;
-                case "group_chat":
-                    parts.push(chat.name);
-                    break;
-                case "channel":
-                    const community = $communitiesStore.get({
-                        kind: "community",
-                        communityId: chat.id.communityId,
-                    });
-                    if (community) {
-                        parts.push(community.name);
-                    }
-                    parts.push(chat.name);
-                    break;
-            }
-            if (ctx.threadRootMessageIndex !== undefined) {
-                parts.push("Thread");
-            }
-            return parts.join(" > ");
-        }
-        return undefined;
-    }
-
-    function otherReactors(ev: MessageActivityEvent): Set<string> {
-        if (ev.message === undefined) return new Set();
-        return new Set(
-            ev.message.reactions.flatMap((r) =>
-                [...r.userIds].filter((u) => u !== ev.userId && u !== $currentUserIdStore),
-            ),
-        );
-    }
-
-    function otherTippers(ev: MessageActivityEvent): Set<string> {
-        if (ev.message === undefined) return new Set();
-        return new Set(
-            Object.values(ev.message.tips).flatMap((tips) => {
-                return Object.keys(tips).filter((u) => u !== ev.userId);
-            }),
-        );
-    }
-
-    function numberOfPeopleVoting(msg: Message | undefined): number {
-        if (msg === undefined || msg.content.kind !== "poll_content") return 1;
-        const content = msg.content;
-        if (content.votes.total.kind === "anonymous_poll_votes") {
-            return Object.values(content.votes.total.votes).reduce((total, n) => total + n, 0);
-        } else if (content.votes.total.kind === "hidden_poll_votes") {
-            return content.votes.total.votes;
-        } else if (content.votes.total.kind === "visible_poll_votes") {
-            return Object.values(content.votes.total.votes).reduce(
-                (total, n) => total + n.length,
-                0,
-            );
-        }
-        return 1;
-    }
-
-    function pluraliseMessage(
-        root: "tip" | "reaction",
-        username: string,
-        others: Set<string>,
-    ): ResourceKey {
-        switch (others.size) {
-            case 0:
-                return i18nKey(`activity.${root}One`, { username });
-            case 1:
-                const u = [...others][0];
-                return i18nKey(`activity.${root}Two`, {
-                    username,
-                    other: buildDisplayName(
-                        $allUsersStore,
-                        u,
-                        u === $currentUserIdStore ? "me" : "user",
-                    ),
-                });
-            default:
-                return i18nKey(`activity.${root}N`, { username, n: others.size });
-        }
-    }
-
-    function buildEventSummary(event: MessageActivityEvent, username: string) {
-        switch (event.activity) {
-            case "reaction":
-                return pluraliseMessage("reaction", username, otherReactors(event));
-            case "mention":
-                return i18nKey("activity.mention", { username });
-            case "quote_reply":
-                return i18nKey("activity.quoteReply", { username });
-            case "tip":
-                return pluraliseMessage("tip", username, otherTippers(event));
-            case "crypto":
-                return i18nKey("activity.crypto", { username });
-            case "poll_vote":
-                const numVoters = numberOfPeopleVoting(event.message);
-                if (numVoters > 1) {
-                    return i18nKey("activity.pollVoteN", { username, number: numVoters - 1 });
-                } else {
-                    return i18nKey("activity.pollVote", { username });
-                }
-            case "p2p_swap_accepted":
-                return i18nKey("activity.p2pSwapAccepted", { username });
-        }
-    }
-
-    function formatLatestMessage(event: MessageActivityEvent, username: string): string {
-        if (event.message === undefined) return "TODO - not sure what this means";
-        const latestMessageText = client.getContentAsText($_, event.message.content);
-        return `${username}: ${latestMessageText}`;
-    }
-
-    function goToEventContext() {
-        activityFeedShowing.set(false);
-        navigate(routeForMessageContext("none", event.messageContext, true));
-    }
-    let sender = $derived(event.userId ? $allUsersStore.get(event.userId) : undefined);
-    let eventUsername = $derived(
-        event.userId
-            ? buildDisplayName(
-                  $allUsersStore,
-                  event.userId,
-                  event.userId === $currentUserIdStore ? "me" : "user",
-              )
-            : $_("activity.anon"),
-    );
-    let messageUsername = $derived(
-        event.message
-            ? buildDisplayName(
-                  $allUsersStore,
-                  event.message.sender,
-                  event.message.sender === $currentUserIdStore ? "me" : "user",
-              )
-            : $_("activity.anon"),
-    );
-    let lastMessage = $derived(formatLatestMessage(event, messageUsername));
-    let eventSummary = $derived(buildEventSummary(event, eventUsername));
-    let chatName = $derived(getChatName(event.messageContext));
-    let tips = $derived(event?.message?.tips ? Object.entries(event.message.tips) : []);
-</script>
-
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<div role="button" class="activity-event" class:selected tabindex="0" onclick={onClick}>
-    <div class="header">
-        <div class="name">
-            <Link onClick={goToEventContext}>{chatName}</Link>
-        </div>
-        <div class="date">
-            {client.formatMessageDate(event.timestamp, $_("today"), $_("yesterday"), true, true)}
-        </div>
-    </div>
-    <div class="body">
-        <div class="avatar">
-            <Avatar
-                statusBorder={selected ? "var(--chatSummary-hv)" : "transparent"}
-                url={client.userAvatarUrl(sender)}
-                userId={event.userId}
-                size={AvatarSize.Default} />
-            <ActivityIcon activity={event.activity} />
-        </div>
-        <div class="details">
-            <div class="event-sumary">
-                <h4>
-                    <Markdown text={interpolate($_, eventSummary)} />
-                </h4>
-            </div>
-            <div class="chat-msg">
-                {#if event.message !== undefined}
-                    <Markdown text={lastMessage} oneLine twoLine suppressLinks />
-                {:else}
-                    <Translatable resourceKey={i18nKey("activity.missingMessage")} />
-                {/if}
-            </div>
-            {#if event.activity === "reaction" && event.message !== undefined && event.message.reactions.length > 0}
-                <div class="message-reactions">
-                    {#each event.message.reactions as { reaction, userIds } (reaction)}
-                        <MessageReaction {reaction} {userIds} />
-                    {/each}
-                </div>
-            {/if}
-            {#if event.activity === "tip" && tips.length > 0}
-                <div class="tips">
-                    {#each tips as [ledger, userTips]}
-                        <TipThumbnail canTip={false} {ledger} {userTips} />
-                    {/each}
-                </div>
-            {/if}
-        </div>
-    </div>
-</div>
-
-<style lang="scss">
-    :global(.activity-event a) {
-        color: inherit;
-    }
-
-    .activity-event {
-        display: flex;
-        flex-direction: column;
-        margin-bottom: 0;
-        cursor: pointer;
-        transition:
-            background-color ease-in-out 100ms,
-            border-color ease-in-out 100ms;
-        user-select: none;
-        border-bottom: var(--bw) solid var(--bd);
-
-        @media (hover: hover) {
-            &:hover {
-                background-color: var(--chatSummary-hv);
-            }
-        }
-
-        &.selected {
-            background-color: var(--chatSummary-bg-selected);
-        }
-    }
-
-    .header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        color: var(--txt-light);
-        @include font(book, normal, fs-60);
-        padding: $sp3 $sp4 0 $sp4;
-    }
-
-    .body {
-        padding: $sp3 $sp4 $sp4 $sp4;
-        display: flex;
-        align-items: flex-start;
-        gap: 12px;
-
-        @include mobile() {
-            padding: $sp3 toRem(10);
-        }
-    }
-
-    .avatar {
-        flex: 0 0 40px;
-        position: relative;
-    }
-
-    .details {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        overflow: hidden;
-
-        .event-sumary {
-            h4 {
-                @include font(medium, normal, fs-100);
-                display: flex;
-                flex-direction: row;
-                gap: $sp2;
-            }
-            margin-bottom: $sp1;
-        }
-
-        .chat-msg {
-            color: var(--txt-light);
-            @include font(book, normal, fs-80);
-        }
-    }
-
-    .date {
-        display: flex;
-        gap: $sp2;
-        align-self: flex-end;
-        color: var(--txt-light);
-        @include font(book, normal, fs-60);
-    }
-
-    .message-reactions,
-    .tips {
-        display: flex;
-        justify-content: flex-start;
-        flex-wrap: wrap;
-        gap: 3px;
-        margin-top: $sp2;
-    }
-</style>
diff --git a/frontend/app/src/components/home/activity/ActivityFeed.svelte b/frontend/app/src/components/home/activity/ActivityFeed.svelte
deleted file mode 100644
index eba8d76a66..0000000000
--- a/frontend/app/src/components/home/activity/ActivityFeed.svelte
+++ /dev/null
@@ -1,102 +0,0 @@
-<script lang="ts">
-    import { activityFeedState } from "@src/runes/activity.svelte";
-    import { menuCloser } from "component-lib";
-    import {
-        activityFeedShowing,
-        iconSize,
-        messageActivitySummaryStore,
-        messageContextToChatListScope,
-        messageContextToString,
-        OpenChat,
-        routeForMessage,
-        type MessageActivityEvent,
-    } from "@client";
-    import { navigate } from "@utils/navigation";
-    import { getContext } from "svelte";
-    import BellRingOutline from "svelte-material-icons/BellRingOutline.svelte";
-    import Close from "svelte-material-icons/Close.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import HoverIcon from "../../HoverIcon.svelte";
-    import SectionHeader from "../../SectionHeader.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import VirtualList from "@shared_components/VirtualList.svelte";
-    import ActivityEvent from "./ActivityEvent.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    let selectedEventIndex = $state<number | undefined>();
-    let uptodate = $derived.by(() => {
-        return $messageActivitySummaryStore.latestTimestamp <= activityFeedState.latestTimestamp;
-    });
-
-    function loadActivity() {
-        client.subscribeToMessageActivityFeed((resp, final) => {
-            activityFeedState.activityEvents = resp.events;
-            if (activityFeedState.activityEvents.length > 0 && final) {
-                client.markActivityFeedRead(activityFeedState.latestTimestamp);
-            }
-        });
-    }
-
-    function selectEvent(ev: MessageActivityEvent, idx: number) {
-        selectedEventIndex = idx;
-        navigate(
-            routeForMessage(
-                messageContextToChatListScope(ev.messageContext).kind,
-                ev.messageContext,
-                ev.messageIndex,
-            ),
-        );
-    }
-
-    function eventKey(event: MessageActivityEvent): string {
-        return `${messageContextToString(event.messageContext)}_${event.eventIndex}_${
-            event.activity
-        }`;
-    }
-
-    $effect(() => {
-        if (!uptodate) {
-            loadActivity();
-        }
-    });
-</script>
-
-<SectionHeader slim border={false}>
-    <div class="header">
-        <div class="icon">
-            <BellRingOutline size={$iconSize} color={"var(--icon-txt)"} />
-        </div>
-        <div class="details">
-            <h4 class="name"><Translatable resourceKey={i18nKey("activity.title")} /></h4>
-        </div>
-        <span class="menu">
-            <HoverIcon onclick={() => activityFeedShowing.set(false)}>
-                <Close size={$iconSize} color={"var(--icon-txt)"} />
-            </HoverIcon>
-        </span>
-    </div>
-</SectionHeader>
-
-<div use:menuCloser class="body">
-    <VirtualList keyFn={eventKey} items={activityFeedState.activityEvents}>
-        {#snippet children(item, idx)}
-            <ActivityEvent
-                event={item}
-                selected={selectedEventIndex === idx}
-                onClick={() => selectEvent(item, idx)} />
-        {/snippet}
-    </VirtualList>
-</div>
-
-<style lang="scss">
-    .header {
-        @include left_panel_header();
-    }
-    .body {
-        overflow: auto;
-        flex: auto;
-        @include nice-scrollbar();
-        position: relative;
-    }
-</style>
diff --git a/frontend/app/src/components/home/communities/CommunityMenu.svelte b/frontend/app/src/components/home/communities/CommunityMenu.svelte
deleted file mode 100644
index 780395d3c5..0000000000
--- a/frontend/app/src/components/home/communities/CommunityMenu.svelte
+++ /dev/null
@@ -1,306 +0,0 @@
-<script lang="ts">
-    import type { CommunitySummary, OpenChat } from "@client";
-    import {
-        chatSummariesListStore,
-        iconSize,
-        mobileWidth,
-        notificationsSupported,
-        platformModeratorStore,
-        publish,
-        ROLE_NONE,
-        setRightPanelHistory,
-    } from "@client";
-    import { getContext } from "svelte";
-    import AccountMultiple from "svelte-material-icons/AccountMultiple.svelte";
-    import AccountMultiplePlus from "svelte-material-icons/AccountMultiplePlus.svelte";
-    import BellOff from "svelte-material-icons/BellOff.svelte";
-    import CancelIcon from "svelte-material-icons/Cancel.svelte";
-    import TickIcon from "svelte-material-icons/Check.svelte";
-    import CheckboxMultipleMarked from "svelte-material-icons/CheckboxMultipleMarked.svelte";
-    import Contain from "svelte-material-icons/Contain.svelte";
-    import ContentCopy from "svelte-material-icons/ContentCopy.svelte";
-    import DeleteOutline from "svelte-material-icons/DeleteOutline.svelte";
-    import Kebab from "svelte-material-icons/DotsVertical.svelte";
-    import FileDocument from "svelte-material-icons/FileDocument.svelte";
-    import LocationExit from "svelte-material-icons/LocationExit.svelte";
-    import PencilOutline from "svelte-material-icons/PencilOutline.svelte";
-    import PlaylistPlus from "svelte-material-icons/PlaylistPlus.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { toastStore } from "../../../stores/toast";
-    import HoverIcon from "../../HoverIcon.svelte";
-    import Menu from "../../Menu.svelte";
-    import MenuIcon from "../../MenuIcon.svelte";
-    import MenuItem from "../../MenuItem.svelte";
-    import Translatable from "../../Translatable.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        community: CommunitySummary;
-        canMarkAllRead: boolean;
-    }
-
-    let { community, canMarkAllRead }: Props = $props();
-
-    let member = $derived(community.membership.role !== ROLE_NONE);
-    let frozen = $derived(client.isCommunityFrozen(community.id));
-    let canLeave = $derived(member);
-    let canDelete = $derived(member && !frozen && client.canDeleteCommunity(community.id));
-    let canEdit = $derived(member && !frozen && client.canEditCommunity(community.id));
-    let canInvite = $derived(member && !frozen && client.canInviteUsers(community.id));
-    let canCreateChannel = $derived(member && !frozen && client.canCreateChannel(community.id));
-    let isCommunityMuted = $derived(
-        $chatSummariesListStore.every((c) => c.membership.notificationsMuted),
-    );
-    let isAtEveryoneMutedForCommunity = $derived(
-        $chatSummariesListStore.every((c) => c.membership.atEveryoneMuted),
-    );
-
-    function leaveCommunity() {
-        publish("leaveCommunity", {
-            kind: "leave_community",
-            communityId: community.id,
-        });
-    }
-
-    function deleteCommunity() {
-        publish("deleteCommunity", {
-            kind: "delete_community",
-            communityId: community.id,
-            doubleCheck: {
-                challenge: i18nKey("typeGroupName", { name: community.name }),
-                response: i18nKey(community.name),
-            },
-        });
-    }
-
-    function communityDetails() {
-        publish("communityDetails", community);
-    }
-
-    function markAllRead() {
-        client.markAllReadForCurrentScope();
-    }
-
-    function newChannel() {
-        canCreateChannel && publish("newChannel", false);
-    }
-
-    function embedContent() {
-        canCreateChannel && publish("newChannel", true);
-    }
-
-    function copyUrl() {
-        publish("copyUrl");
-    }
-
-    function showMembers() {
-        setRightPanelHistory([{ kind: "show_community_members" }]);
-    }
-
-    function invite() {
-        if (canInvite) {
-            setRightPanelHistory([{ kind: "invite_community_users" }]);
-        }
-    }
-
-    function editCommunity() {
-        canEdit && publish("editCommunity", community);
-    }
-
-    function muteAllChannels(muteAtEveryone: boolean) {
-        client.muteAllChannels(community.id, muteAtEveryone);
-    }
-
-    function freezeCommunity() {
-        client.freezeCommunity(community.id, undefined).then((success) => {
-            if (!success) {
-                toastStore.showFailureToast(i18nKey("failedToFreezeCommunity"));
-            } else {
-                toastStore.showSuccessToast(i18nKey("communityFrozen"));
-            }
-        });
-    }
-
-    function unfreezeCommunity() {
-        client.unfreezeCommunity(community.id).then((success) => {
-            if (!success) {
-                toastStore.showFailureToast(i18nKey("failedToUnfreezeCommunity"));
-            } else {
-                toastStore.showSuccessToast(i18nKey("communityUnfrozen"));
-            }
-        });
-    }
-</script>
-
-<MenuIcon position="bottom" align="end">
-    {#snippet menuIcon()}
-        <HoverIcon>
-            <Kebab size={$iconSize} color={"var(--icon-txt)"} />
-        </HoverIcon>
-    {/snippet}
-    {#snippet menuItems()}
-        <Menu>
-            <MenuItem onclick={communityDetails}>
-                {#snippet icon()}
-                    <FileDocument size={$iconSize} color={"var(--icon-inverted-txt)"} />
-                {/snippet}
-                {#snippet text()}
-                    <div><Translatable resourceKey={i18nKey("communities.details")} /></div>
-                {/snippet}
-            </MenuItem>
-            <MenuItem onclick={showMembers}>
-                {#snippet icon()}
-                    <AccountMultiple size={$iconSize} color={"var(--icon-inverted-txt)"} />
-                {/snippet}
-                {#snippet text()}
-                    <div><Translatable resourceKey={i18nKey("communities.members")} /></div>
-                {/snippet}
-            </MenuItem>
-            {#if canInvite}
-                <MenuItem onclick={invite}>
-                    {#snippet icon()}
-                        <AccountMultiplePlus size={$iconSize} color={"var(--icon-inverted-txt)"} />
-                    {/snippet}
-                    {#snippet text()}
-                        <div>
-                            <Translatable resourceKey={i18nKey("communities.invite")} />
-                        </div>
-                    {/snippet}
-                </MenuItem>
-            {/if}
-            {#if canEdit}
-                <MenuItem onclick={editCommunity}>
-                    {#snippet icon()}
-                        <PencilOutline size={$iconSize} color={"var(--icon-inverted-txt)"} />
-                    {/snippet}
-                    {#snippet text()}
-                        <div>
-                            <Translatable resourceKey={i18nKey("communities.edit")} />
-                        </div>
-                    {/snippet}
-                </MenuItem>
-            {/if}
-            {#if canCreateChannel}
-                <MenuItem onclick={newChannel}>
-                    {#snippet icon()}
-                        <PlaylistPlus size={$iconSize} color={"var(--icon-inverted-txt)"} />
-                    {/snippet}
-                    {#snippet text()}
-                        <span
-                            ><Translatable
-                                resourceKey={i18nKey("communities.createChannel")} /></span>
-                    {/snippet}
-                </MenuItem>
-            {/if}
-            {#if canCreateChannel}
-                <MenuItem onclick={embedContent}>
-                    {#snippet icon()}
-                        <Contain size={$iconSize} color={"var(--icon-inverted-txt)"} />
-                    {/snippet}
-                    {#snippet text()}
-                        <span><Translatable resourceKey={i18nKey("communities.embed")} /></span>
-                    {/snippet}
-                </MenuItem>
-            {/if}
-            {#if $mobileWidth}
-                <MenuItem onclick={copyUrl}>
-                    {#snippet icon()}
-                        <ContentCopy size={$iconSize} color={"var(--icon-txt)"} />
-                    {/snippet}
-                    {#snippet text()}
-                        <Translatable resourceKey={i18nKey("copyUrl")} />
-                    {/snippet}
-                </MenuItem>
-            {/if}
-            <MenuItem disabled={!canMarkAllRead} onclick={markAllRead}>
-                {#snippet icon()}
-                    <CheckboxMultipleMarked size={$iconSize} color={"var(--icon-inverted-txt)"} />
-                {/snippet}
-                {#snippet text()}
-                    <span><Translatable resourceKey={i18nKey("markAllRead")} /></span>
-                {/snippet}
-            </MenuItem>
-            {#if notificationsSupported}
-                {#if !isCommunityMuted}
-                    <MenuItem onclick={() => muteAllChannels(false)}>
-                        {#snippet icon()}
-                            <BellOff size={$iconSize} color={"var(--icon-inverted-txt)"} />
-                        {/snippet}
-                        {#snippet text()}
-                            <span
-                                ><Translatable
-                                    resourceKey={i18nKey("communities.muteAllChannels")} /></span>
-                        {/snippet}
-                    </MenuItem>
-                {/if}
-                {#if !isAtEveryoneMutedForCommunity}
-                    <MenuItem onclick={() => muteAllChannels(true)}>
-                        {#snippet icon()}
-                            <BellOff size={$iconSize} color={"var(--icon-inverted-txt)"} />
-                        {/snippet}
-                        {#snippet text()}
-                            <span
-                                ><Translatable
-                                    resourceKey={i18nKey(
-                                        "communities.muteAllChannelsAtEveryone",
-                                    )} /></span>
-                        {/snippet}
-                    </MenuItem>
-                {/if}
-            {/if}
-            {#if member}
-                <MenuItem separator />
-                {#if canDelete}
-                    <MenuItem warning onclick={deleteCommunity}>
-                        {#snippet icon()}
-                            <DeleteOutline size={$iconSize} color={"var(--menu-warn)"} />
-                        {/snippet}
-                        {#snippet text()}
-                            <div>
-                                <Translatable resourceKey={i18nKey("communities.delete")} />
-                            </div>
-                        {/snippet}
-                    </MenuItem>
-                {/if}
-                {#if canLeave}
-                    <MenuItem warning onclick={leaveCommunity}>
-                        {#snippet icon()}
-                            <LocationExit size={$iconSize} color={"var(--menu-warn)"} />
-                        {/snippet}
-                        {#snippet text()}
-                            <div>
-                                <Translatable resourceKey={i18nKey("communities.leave")} />
-                            </div>
-                        {/snippet}
-                    </MenuItem>
-                {/if}
-            {/if}
-            {#if $platformModeratorStore}
-                {#if client.isCommunityFrozen(community.id)}
-                    <MenuItem warning onclick={unfreezeCommunity}>
-                        {#snippet icon()}
-                            <TickIcon size={$iconSize} color={"var(--menu-warn"} />
-                        {/snippet}
-                        {#snippet text()}
-                            <div>
-                                <Translatable resourceKey={i18nKey("unfreezeCommunity")} />
-                            </div>
-                        {/snippet}
-                    </MenuItem>
-                {:else}
-                    <MenuItem warning onclick={freezeCommunity}>
-                        {#snippet icon()}
-                            <CancelIcon size={$iconSize} color={"var(--menu-warn"} />
-                        {/snippet}
-                        {#snippet text()}
-                            <div>
-                                <Translatable resourceKey={i18nKey("freezeCommunity")} />
-                            </div>
-                        {/snippet}
-                    </MenuItem>
-                {/if}
-            {/if}
-        </Menu>
-    {/snippet}
-</MenuIcon>
diff --git a/frontend/app/src/components/home/communities/Convert.svelte b/frontend/app/src/components/home/communities/Convert.svelte
deleted file mode 100644
index 0ab9ce25f6..0000000000
--- a/frontend/app/src/components/home/communities/Convert.svelte
+++ /dev/null
@@ -1,149 +0,0 @@
-<script lang="ts">
-    import {
-        chatListScopeStore,
-        defaultChatRules,
-        routeForChatIdentifier,
-        type ChannelIdentifier,
-        type ChatListScope,
-        type GroupChatSummary,
-        type OpenChat,
-    } from "@client";
-    import { navigate } from "@utils/navigation";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Button from "../../Button.svelte";
-    import ButtonGroup from "../../ButtonGroup.svelte";
-    import FancyLoader from "../../icons/FancyLoader.svelte";
-    import ModalContent from "../../ModalContent.svelte";
-    import Overlay from "../../Overlay.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import Congratulations from "../upgrade/Congratulations.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        group: GroupChatSummary | undefined;
-    }
-
-    let { group = $bindable() }: Props = $props();
-
-    let scope: ChatListScope["kind"] | undefined;
-
-    let state: "idle" | "converting" | "converted" | "error" = $state("idle");
-    let channelId: ChannelIdentifier | undefined;
-
-    function convert() {
-        if (group === undefined) return;
-
-        scope = $chatListScopeStore.kind;
-        state = "converting";
-        client.convertGroupToCommunity(group, defaultChatRules("community")).then((id) => {
-            state = id ? "converted" : "error";
-            channelId = id;
-        });
-    }
-
-    function go() {
-        if (channelId !== undefined) {
-            close();
-            navigate(routeForChatIdentifier(scope ?? $chatListScopeStore.kind, channelId));
-        }
-    }
-
-    function close() {
-        group = undefined;
-        state = "idle";
-    }
-</script>
-
-{#if group !== undefined}
-    <Overlay dismissible onClose={close}>
-        <ModalContent closeIcon onClose={close}>
-            {#snippet header()}
-                <Translatable resourceKey={i18nKey("communities.convert")} />
-            {/snippet}
-            {#snippet body()}
-                <div
-                    class="body convert-to-community"
-                    class:error={state === "error"}
-                    class:loading={state === "converting" || state === "converted"}>
-                    {#if state === "converting"}
-                        <div class="spinner">
-                            <FancyLoader />
-                        </div>
-                        <p class="para">
-                            <Translatable resourceKey={i18nKey("communities.pleaseWait")} />
-                        </p>
-                    {:else if state === "idle"}
-                        <Markdown inline={false} text={$_("communities.convertInfo")} />
-                    {:else if state === "converted"}
-                        <Congratulations para={i18nKey("communities.converted")} />
-                    {:else if state === "error"}
-                        <div class="error-img"></div>
-                        <p class="para">
-                            <Translatable
-                                resourceKey={i18nKey("communities.errors.convertFailed")} />
-                        </p>
-                    {/if}
-                </div>
-            {/snippet}
-            {#snippet footer()}
-                <ButtonGroup>
-                    {#if state === "converted"}
-                        <Button secondary onClick={close}
-                            ><Translatable resourceKey={i18nKey("close")} /></Button>
-                        <Button onClick={go}
-                            ><Translatable resourceKey={i18nKey("communities.goto")} /></Button>
-                    {:else if state !== "error"}
-                        <Button secondary onClick={close}
-                            ><Translatable resourceKey={i18nKey("cancel")} /></Button>
-                        <Button
-                            disabled={state === "converting"}
-                            loading={state === "converting"}
-                            onClick={convert}
-                            ><Translatable
-                                resourceKey={i18nKey("communities.convertButton")} /></Button>
-                    {/if}
-                </ButtonGroup>
-            {/snippet}
-        </ModalContent>
-    </Overlay>
-{/if}
-
-<style lang="scss">
-    :global(.convert-to-community .markdown-wrapper ul) {
-        @include bullet_list();
-        @include font(book, normal, fs-90);
-        color: var(--txt-light);
-    }
-
-    .body {
-        min-height: 300px;
-
-        &.loading,
-        &.error {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-        }
-    }
-    .spinner {
-        width: 150px;
-        margin: 30px auto;
-    }
-
-    .error-img {
-        background-image: url("/assets/dead-bot.svg");
-        background-repeat: no-repeat;
-        width: 150px;
-        height: 150px;
-        margin: 30px auto;
-    }
-
-    .para {
-        margin-bottom: $sp3;
-    }
-</style>
diff --git a/frontend/app/src/components/home/communities/DirectAndGroupChatsHeader.svelte b/frontend/app/src/components/home/communities/DirectAndGroupChatsHeader.svelte
deleted file mode 100644
index 12c9be67d8..0000000000
--- a/frontend/app/src/components/home/communities/DirectAndGroupChatsHeader.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<script lang="ts">
-    import { iconSize } from "@client";
-    import ForumOutline from "svelte-material-icons/ForumOutline.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import SectionHeader from "../../SectionHeader.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import GroupChatsMenu from "./GroupChatsMenu.svelte";
-
-    interface Props {
-        canMarkAllRead: boolean;
-    }
-
-    let props: Props = $props();
-</script>
-
-<SectionHeader slim border={false}>
-    <div class="favourites">
-        <div class="icon">
-            <ForumOutline size={$iconSize} color={"var(--icon-txt)"} />
-        </div>
-        <div class="details">
-            <h4 class="name">
-                <Translatable resourceKey={i18nKey("communities.directAndGroupChats")} />
-            </h4>
-        </div>
-        <span class="menu">
-            <GroupChatsMenu {...props} />
-        </span>
-    </div>
-</SectionHeader>
-
-<style lang="scss">
-    .favourites {
-        @include left_panel_header();
-    }
-</style>
diff --git a/frontend/app/src/components/home/communities/DirectChatsHeader.svelte b/frontend/app/src/components/home/communities/DirectChatsHeader.svelte
deleted file mode 100644
index d36edc76de..0000000000
--- a/frontend/app/src/components/home/communities/DirectChatsHeader.svelte
+++ /dev/null
@@ -1,64 +0,0 @@
-<script lang="ts">
-    import { iconSize, type OpenChat } from "@client";
-    import { getContext } from "svelte";
-    import CheckboxMultipleMarked from "svelte-material-icons/CheckboxMultipleMarked.svelte";
-    import Kebab from "svelte-material-icons/DotsVertical.svelte";
-    import MessageOutline from "svelte-material-icons/MessageOutline.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import HoverIcon from "../../HoverIcon.svelte";
-    import Menu from "../../Menu.svelte";
-    import MenuIcon from "../../MenuIcon.svelte";
-    import MenuItem from "../../MenuItem.svelte";
-    import SectionHeader from "../../SectionHeader.svelte";
-    import Translatable from "../../Translatable.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        canMarkAllRead: boolean;
-    }
-
-    let { canMarkAllRead }: Props = $props();
-</script>
-
-<SectionHeader slim border={false}>
-    <div class="direct-chats">
-        <div class="icon">
-            <MessageOutline size={$iconSize} color={"var(--icon-txt)"} />
-        </div>
-        <div class="details">
-            <h4 class="name"><Translatable resourceKey={i18nKey("communities.directChats")} /></h4>
-        </div>
-        <span class="menu">
-            <MenuIcon position="bottom" align="end">
-                {#snippet menuIcon()}
-                    <HoverIcon>
-                        <Kebab size={$iconSize} color={"var(--icon-txt)"} />
-                    </HoverIcon>
-                {/snippet}
-                {#snippet menuItems()}
-                    <Menu>
-                        <MenuItem
-                            disabled={!canMarkAllRead}
-                            onclick={() => client.markAllReadForCurrentScope()}>
-                            {#snippet icon()}
-                                <CheckboxMultipleMarked
-                                    size={$iconSize}
-                                    color={"var(--icon-inverted-txt)"} />
-                            {/snippet}
-                            {#snippet text()}
-                                <span><Translatable resourceKey={i18nKey("markAllRead")} /></span>
-                            {/snippet}
-                        </MenuItem>
-                    </Menu>
-                {/snippet}
-            </MenuIcon>
-        </span>
-    </div>
-</SectionHeader>
-
-<style lang="scss">
-    .direct-chats {
-        @include left_panel_header();
-    }
-</style>
diff --git a/frontend/app/src/components/home/communities/FavouriteChatsHeader.svelte b/frontend/app/src/components/home/communities/FavouriteChatsHeader.svelte
deleted file mode 100644
index 5cdfdb64dc..0000000000
--- a/frontend/app/src/components/home/communities/FavouriteChatsHeader.svelte
+++ /dev/null
@@ -1,64 +0,0 @@
-<script lang="ts">
-    import { iconSize, OpenChat } from "@client";
-    import { getContext } from "svelte";
-    import CheckboxMultipleMarked from "svelte-material-icons/CheckboxMultipleMarked.svelte";
-    import Kebab from "svelte-material-icons/DotsVertical.svelte";
-    import HeartOutline from "svelte-material-icons/HeartOutline.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import HoverIcon from "../../HoverIcon.svelte";
-    import Menu from "../../Menu.svelte";
-    import MenuIcon from "../../MenuIcon.svelte";
-    import MenuItem from "../../MenuItem.svelte";
-    import SectionHeader from "../../SectionHeader.svelte";
-    import Translatable from "../../Translatable.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        canMarkAllRead: boolean;
-    }
-
-    let { canMarkAllRead }: Props = $props();
-</script>
-
-<SectionHeader slim border={false}>
-    <div class="favourites">
-        <div class="icon">
-            <HeartOutline size={$iconSize} color={"var(--icon-txt)"} />
-        </div>
-        <div class="details">
-            <h4 class="name"><Translatable resourceKey={i18nKey("communities.favourites")} /></h4>
-        </div>
-        <span class="menu">
-            <MenuIcon position="bottom" align="end">
-                {#snippet menuIcon()}
-                    <HoverIcon>
-                        <Kebab size={$iconSize} color={"var(--icon-txt)"} />
-                    </HoverIcon>
-                {/snippet}
-                {#snippet menuItems()}
-                    <Menu>
-                        <MenuItem
-                            disabled={!canMarkAllRead}
-                            onclick={() => client.markAllReadForCurrentScope()}>
-                            {#snippet icon()}
-                                <CheckboxMultipleMarked
-                                    size={$iconSize}
-                                    color={"var(--icon-inverted-txt)"} />
-                            {/snippet}
-                            {#snippet text()}
-                                <span><Translatable resourceKey={i18nKey("markAllRead")} /></span>
-                            {/snippet}
-                        </MenuItem>
-                    </Menu>
-                {/snippet}
-            </MenuIcon>
-        </span>
-    </div>
-</SectionHeader>
-
-<style lang="scss">
-    .favourites {
-        @include left_panel_header();
-    }
-</style>
diff --git a/frontend/app/src/components/home/communities/GroupChatsHeader.svelte b/frontend/app/src/components/home/communities/GroupChatsHeader.svelte
deleted file mode 100644
index 1f75abc447..0000000000
--- a/frontend/app/src/components/home/communities/GroupChatsHeader.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<script lang="ts">
-    import { iconSize } from "@client";
-    import ForumOutline from "svelte-material-icons/ForumOutline.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import SectionHeader from "../../SectionHeader.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import GroupChatsMenu from "./GroupChatsMenu.svelte";
-
-    interface Props {
-        canMarkAllRead: boolean;
-    }
-
-    let props: Props = $props();
-</script>
-
-<SectionHeader slim border={false}>
-    <div class="group-chats">
-        <div class="icon">
-            <ForumOutline size={$iconSize} color={"var(--icon-txt)"} />
-        </div>
-        <div class="details">
-            <h4 class="name">
-                <Translatable resourceKey={i18nKey("communities.groupChats")} />
-            </h4>
-        </div>
-    </div>
-    <span class="menu">
-        <GroupChatsMenu {...props} />
-    </span>
-</SectionHeader>
-
-<style lang="scss">
-    .group-chats {
-        @include left_panel_header();
-    }
-</style>
diff --git a/frontend/app/src/components/home/communities/GroupChatsMenu.svelte b/frontend/app/src/components/home/communities/GroupChatsMenu.svelte
deleted file mode 100644
index a4a3913545..0000000000
--- a/frontend/app/src/components/home/communities/GroupChatsMenu.svelte
+++ /dev/null
@@ -1,72 +0,0 @@
-<script lang="ts">
-    import type { OpenChat } from "@client";
-    import { anonUserStore, iconSize, identityStateStore, publish } from "@client";
-    import { getContext, tick } from "svelte";
-    import AccountMultiplePlus from "svelte-material-icons/AccountMultiplePlus.svelte";
-    import CheckboxMultipleMarked from "svelte-material-icons/CheckboxMultipleMarked.svelte";
-    import Kebab from "svelte-material-icons/DotsVertical.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import HoverIcon from "../../HoverIcon.svelte";
-    import Menu from "../../Menu.svelte";
-    import MenuIcon from "../../MenuIcon.svelte";
-    import MenuItem from "../../MenuItem.svelte";
-    import Translatable from "../../Translatable.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        canMarkAllRead: boolean;
-    }
-
-    let { canMarkAllRead }: Props = $props();
-
-    function newGroup() {
-        if ($anonUserStore) {
-            client.updateIdentityState({
-                kind: "logging_in",
-                postLogin: { kind: "create_group" },
-            });
-        } else {
-            publish("newGroup");
-        }
-    }
-    $effect(() => {
-        if (
-            $identityStateStore.kind === "logged_in" &&
-            $identityStateStore.postLogin?.kind === "create_group"
-        ) {
-            client.clearPostLoginState();
-            tick().then(() => newGroup());
-        }
-    });
-</script>
-
-<MenuIcon position="bottom" align="end">
-    {#snippet menuIcon()}
-        <HoverIcon>
-            <Kebab size={$iconSize} color={"var(--icon-txt)"} />
-        </HoverIcon>
-    {/snippet}
-    {#snippet menuItems()}
-        <Menu>
-            <MenuItem onclick={newGroup}>
-                {#snippet icon()}
-                    <AccountMultiplePlus size={$iconSize} color={"var(--icon-inverted-txt)"} />
-                {/snippet}
-                {#snippet text()}
-                    <Translatable resourceKey={i18nKey("newGroup")} />
-                {/snippet}
-            </MenuItem>
-            <MenuItem
-                disabled={!canMarkAllRead}
-                onclick={() => client.markAllReadForCurrentScope()}>
-                {#snippet icon()}
-                    <CheckboxMultipleMarked size={$iconSize} color={"var(--icon-inverted-txt)"} />
-                {/snippet}
-                {#snippet text()}
-                    <Translatable resourceKey={i18nKey("markAllRead")} />
-                {/snippet}
-            </MenuItem>
-        </Menu>
-    {/snippet}
-</MenuIcon>
diff --git a/frontend/app/src/components/home/communities/Import.svelte b/frontend/app/src/components/home/communities/Import.svelte
deleted file mode 100644
index b0e2b68966..0000000000
--- a/frontend/app/src/components/home/communities/Import.svelte
+++ /dev/null
@@ -1,131 +0,0 @@
-<script lang="ts">
-    import {
-        AvatarSize,
-        type ChatIdentifier,
-        type CommunityMap,
-        type CommunitySummary,
-        type OpenChat,
-        publish,
-    } from "@client";
-    import { getContext, onMount } from "svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { toastStore } from "../../../stores/toast";
-    import Avatar from "../../Avatar.svelte";
-    import Button from "../../Button.svelte";
-    import ButtonGroup from "../../ButtonGroup.svelte";
-    import ModalContent from "../../ModalContent.svelte";
-    import Overlay from "../../Overlay.svelte";
-    import Translatable from "../../Translatable.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        ownedCommunities: CommunityMap<CommunitySummary>;
-        groupId: ChatIdentifier;
-        onCancel: () => void;
-    }
-
-    let { ownedCommunities, groupId, onCancel }: Props = $props();
-
-    let communitiesList = $derived([...ownedCommunities.values()]);
-
-    let importing = $state(false);
-    let selected: CommunitySummary | undefined = $state();
-
-    function performImport() {
-        if (selected === undefined || groupId.kind !== "group_chat") return;
-
-        importing = true;
-        client
-            .importToCommunity(groupId, selected.id)
-            .then((channelId) => {
-                if (channelId === undefined) {
-                    toastStore.showFailureToast(i18nKey("communities.errors.importFailed"));
-                } else {
-                    onCancel();
-                    publish("successfulImport", channelId);
-                }
-            })
-            .finally(() => (importing = false));
-    }
-
-    function selectCommunity(community: CommunitySummary) {
-        selected = community;
-    }
-
-    onMount(() => {
-        selected = communitiesList.length > 0 ? communitiesList[0] : undefined;
-    });
-
-    function areEqual(c1?: CommunitySummary, c2?: CommunitySummary): boolean {
-        return c1 !== undefined && c2 !== undefined && c1.id.communityId === c2.id.communityId;
-    }
-</script>
-
-{#if communitiesList.length > 0}
-    <Overlay>
-        <ModalContent>
-            {#snippet header()}
-                <span><Translatable resourceKey={i18nKey("communities.chooseCommunity")} /></span>
-            {/snippet}
-            {#snippet body()}
-                <span>
-                    {#each communitiesList as community}
-                        <div
-                            onclick={() => selectCommunity(community)}
-                            class="card"
-                            class:selected={areEqual(selected, community)}>
-                            <div class="avatar">
-                                <Avatar
-                                    url={client.communityAvatarUrl(
-                                        community.id.communityId,
-                                        community.avatar,
-                                    )}
-                                    userId={undefined}
-                                    size={AvatarSize.Default} />
-                            </div>
-                            <div class="details">
-                                <h4 class="name">{community.name}</h4>
-                            </div>
-                        </div>
-                    {/each}
-                </span>
-            {/snippet}
-            {#snippet footer()}
-                <span>
-                    <ButtonGroup>
-                        <Button secondary onClick={onCancel}
-                            ><Translatable resourceKey={i18nKey("cancel")} /></Button>
-                        <Button loading={importing} disabled={importing} onClick={performImport}
-                            ><Translatable
-                                resourceKey={i18nKey("communities.importBtn")} /></Button>
-                    </ButtonGroup>
-                </span>
-            {/snippet}
-        </ModalContent>
-    </Overlay>
-{/if}
-
-<style lang="scss">
-    .card {
-        display: flex;
-        align-items: center;
-        gap: $sp4;
-        cursor: pointer;
-        padding: $sp4;
-        border-radius: var(--rd);
-        transition: background-color 250ms ease-in-out;
-        border: 1px solid transparent;
-
-        &.selected {
-            background-color: var(--chatSummary-bg-selected);
-            border: 1px solid var(--txt-light);
-        }
-
-        @media (hover: hover) {
-            &:hover {
-                background-color: var(--chatSummary-hv);
-            }
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/communities/PreviewWrapper.svelte b/frontend/app/src/components/home/communities/PreviewWrapper.svelte
deleted file mode 100644
index 52344de552..0000000000
--- a/frontend/app/src/components/home/communities/PreviewWrapper.svelte
+++ /dev/null
@@ -1,128 +0,0 @@
-<script lang="ts">
-    import type { EnhancedAccessGate, GateCheckSucceeded, OpenChat } from "@client";
-    import {
-        anonUserStore,
-        identityStateStore,
-        ROLE_NONE,
-        selectedCommunitySummaryStore,
-        stripSuspendedGate,
-    } from "@client";
-    import { getContext, tick, type Snippet } from "svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { toastStore } from "../../../stores/toast";
-    import Overlay from "../../Overlay.svelte";
-    import GateCheckFailed from "../access/AccessGateCheckFailed.svelte";
-    import AccessGateEvaluator from "../access/AccessGateEvaluator.svelte";
-    interface Props {
-        children?: Snippet<[boolean, () => void]>;
-    }
-
-    let { children }: Props = $props();
-
-    const client = getContext<OpenChat>("client");
-
-    let joiningCommunity = $state(false);
-    let gateCheckFailed: EnhancedAccessGate | undefined = $state(undefined);
-    let checkingAccessGate: EnhancedAccessGate | undefined = $state(undefined);
-
-    function joinCommunity() {
-        if ($anonUserStore) {
-            client.updateIdentityState({
-                kind: "logging_in",
-                postLogin: { kind: "join_community" },
-            });
-            return;
-        }
-        doJoinCommunity(undefined);
-    }
-
-    function accessGatesEvaluated(success: GateCheckSucceeded) {
-        doJoinCommunity(success);
-    }
-
-    function doJoinCommunity(gateCheck: GateCheckSucceeded | undefined): Promise<void> {
-        if (previewingCommunity && $selectedCommunitySummaryStore) {
-            const credentials = gateCheck?.credentials ?? [];
-            const paymentApprovals = gateCheck?.paymentApprovals ?? new Map();
-            const compositeGateIndex = gateCheck?.compositeGateIndex;
-            const gateConfigWithLevel: EnhancedAccessGate = {
-                ...$selectedCommunitySummaryStore.gateConfig.gate,
-                level: "community",
-                expiry: $selectedCommunitySummaryStore.gateConfig.expiry,
-                collectionName: $selectedCommunitySummaryStore.name,
-            };
-
-            if (gateCheck === undefined) {
-                if (
-                    stripSuspendedGate($selectedCommunitySummaryStore.gateConfig.gate).kind !==
-                        "no_gate" &&
-                    !$selectedCommunitySummaryStore.isInvited
-                ) {
-                    const gateConfigs = [$selectedCommunitySummaryStore.gateConfig];
-                    const gates = gateConfigs.map((gc) => gc.gate);
-                    const passed = client.doesUserMeetAccessGates(gates);
-                    if (!passed) {
-                        /**
-                         * If we cannot already tell that the user passes the access gate(s), check if there are any gates that require front end
-                         * pre-processing.
-                         */
-                        if (client.gatePreprocessingRequired(gates)) {
-                            checkingAccessGate = gateConfigWithLevel;
-                            return Promise.resolve();
-                        }
-                    }
-                }
-            }
-
-            closeModal();
-            joiningCommunity = true;
-
-            return client
-                .joinCommunity($selectedCommunitySummaryStore, credentials, paymentApprovals, compositeGateIndex)
-                .then((resp) => {
-                    if (resp.kind === "gate_check_failed") {
-                        gateCheckFailed = gateConfigWithLevel;
-                    } else if (resp.kind !== "success") {
-                        toastStore.showFailureToast(i18nKey("communities.errors.joinFailed"));
-                    }
-                })
-                .finally(() => (joiningCommunity = false));
-        }
-        return Promise.resolve();
-    }
-
-    function closeModal() {
-        checkingAccessGate = undefined;
-        gateCheckFailed = undefined;
-    }
-    let previewingCommunity = $derived(
-        $selectedCommunitySummaryStore?.membership.role === ROLE_NONE ||
-            $selectedCommunitySummaryStore?.membership.lapsed,
-    );
-    $effect(() => {
-        if (
-            $identityStateStore.kind === "logged_in" &&
-            $identityStateStore.postLogin?.kind === "join_community"
-        ) {
-            client.clearPostLoginState();
-            tick().then(() => joinCommunity());
-        }
-    });
-</script>
-
-{#if checkingAccessGate}
-    <Overlay dismissible onClose={closeModal}>
-        <AccessGateEvaluator
-            gates={[checkingAccessGate]}
-            onClose={closeModal}
-            onSuccess={accessGatesEvaluated} />
-    </Overlay>
-{/if}
-
-{#if gateCheckFailed}
-    <Overlay dismissible onClose={closeModal}>
-        <GateCheckFailed onClose={closeModal} gates={[gateCheckFailed]} />
-    </Overlay>
-{/if}
-
-{@render children?.(joiningCommunity, joinCommunity)}
diff --git a/frontend/app/src/components/home/communities/SelectedCommunityHeader.svelte b/frontend/app/src/components/home/communities/SelectedCommunityHeader.svelte
deleted file mode 100644
index 6df204c6aa..0000000000
--- a/frontend/app/src/components/home/communities/SelectedCommunityHeader.svelte
+++ /dev/null
@@ -1,93 +0,0 @@
-<script lang="ts">
-    import {
-        AvatarSize,
-        setRightPanelHistory,
-        type CommunitySummary,
-        type OpenChat,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { rtlStore } from "../../../stores/rtl";
-    import Avatar from "../../Avatar.svelte";
-    import WithVerifiedBadge from "../../icons/WithVerifiedBadge.svelte";
-    import SectionHeader from "../../SectionHeader.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import VisibilityLabel from "../VisibilityLabel.svelte";
-    import CommunityMenu from "./CommunityMenu.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        community: CommunitySummary;
-        canMarkAllRead: boolean;
-    }
-
-    let { community, canMarkAllRead }: Props = $props();
-
-    function showCommunityMembers() {
-        setRightPanelHistory([{ kind: "show_community_members" }]);
-    }
-</script>
-
-<SectionHeader border={false}>
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <div
-        role="button"
-        tabindex="0"
-        onclick={showCommunityMembers}
-        class="current-selection"
-        class:rtl={$rtlStore}>
-        <div class="avatar">
-            <Avatar
-                url={client.communityAvatarUrl(community.id.communityId, community.avatar)}
-                userId={undefined}
-                size={AvatarSize.Default} />
-        </div>
-        <div class="details">
-            <WithVerifiedBadge verified={community.verified} size={"small"}>
-                <h4 class="name">
-                    {community.name}
-                </h4>
-            </WithVerifiedBadge>
-            <div class="wrapper">
-                <VisibilityLabel isPublic={community.public} />
-                <div class="members">
-                    <span class="num">{community.memberCount.toLocaleString()}</span>
-                    <Translatable resourceKey={i18nKey("members")} />
-                </div>
-            </div>
-        </div>
-    </div>
-    <span class="menu">
-        <CommunityMenu {canMarkAllRead} {community} />
-    </span>
-</SectionHeader>
-
-<style lang="scss">
-    .current-selection {
-        display: flex;
-        flex: 1;
-        align-items: center;
-        gap: $sp3;
-        cursor: pointer;
-    }
-    .wrapper {
-        display: flex;
-        gap: $sp3;
-        align-items: center;
-        @include font(book, normal, fs-70);
-    }
-
-    .name {
-        @include font(book, normal, fs-120);
-        margin-bottom: $sp1;
-    }
-
-    .members {
-        color: var(--txt-light);
-        .num {
-            color: var(--txt);
-            font-weight: 700;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/communities/details/AdvancedSection.svelte b/frontend/app/src/components/home/communities/details/AdvancedSection.svelte
deleted file mode 100644
index a383fd24e6..0000000000
--- a/frontend/app/src/components/home/communities/details/AdvancedSection.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script lang="ts">
-    import Button from "../../../Button.svelte";
-    import ButtonGroup from "../../../ButtonGroup.svelte";
-    import { publish, type CommunitySummary } from "@client";
-    import { i18nKey } from "../../../../i18n/i18n";
-    import Translatable from "../../../Translatable.svelte";
-
-    interface Props {
-        community: CommunitySummary;
-    }
-
-    let { community }: Props = $props();
-
-    function deleteCommunity() {
-        publish("deleteCommunity", {
-            kind: "delete_community",
-            communityId: community.id,
-            doubleCheck: {
-                challenge: i18nKey("typeGroupName", { name: community.name }),
-                response: i18nKey(community.name),
-            },
-        });
-    }
-</script>
-
-<ButtonGroup align="start">
-    <Button danger onClick={deleteCommunity}
-        ><Translatable resourceKey={i18nKey("communities.delete")} /></Button>
-</ButtonGroup>
diff --git a/frontend/app/src/components/home/communities/details/ChannelCard.svelte b/frontend/app/src/components/home/communities/details/ChannelCard.svelte
deleted file mode 100644
index d3d195adad..0000000000
--- a/frontend/app/src/components/home/communities/details/ChannelCard.svelte
+++ /dev/null
@@ -1,204 +0,0 @@
-<script lang="ts">
-    import HoverIcon from "@src/components/HoverIcon.svelte";
-    import Menu from "@src/components/Menu.svelte";
-    import MenuIcon from "@src/components/MenuIcon.svelte";
-    import MenuItem from "@src/components/MenuItem.svelte";
-    import Translatable from "@src/components/Translatable.svelte";
-    import { i18nKey } from "@src/i18n/i18n";
-    import {
-        AvatarSize,
-        type ChannelMatch,
-        chatListScopeStore,
-        iconSize,
-        mobileWidth,
-        type OpenChat,
-        routeForChatIdentifier,
-        selectedCommunitySummaryStore,
-    } from "@client";
-    import { navigate } from "@utils/navigation";
-    import { getContext } from "svelte";
-    import AccountMultiple from "svelte-material-icons/AccountMultiple.svelte";
-    import DeleteOutline from "svelte-material-icons/DeleteOutline.svelte";
-    import DotsVertical from "svelte-material-icons/DotsVertical.svelte";
-    import Avatar from "../../../Avatar.svelte";
-    import AccessGateIcon from "../../access/AccessGateIcon.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-
-    interface Props {
-        channel: ChannelMatch;
-        onDeleteChannel: () => void;
-    }
-
-    let { channel, onDeleteChannel }: Props = $props();
-
-    const client = getContext<OpenChat>("client");
-
-    let canDeleteChannel = $derived(client.canDeleteChannel(channel.id));
-
-    function selectChannel(match: ChannelMatch) {
-        if ($selectedCommunitySummaryStore === undefined) return;
-        if (!match.public && !match.invited) return;
-        if ($mobileWidth) {
-            client.popRightPanelHistory();
-        }
-        navigate(routeForChatIdentifier($chatListScopeStore.kind, match.id));
-    }
-</script>
-
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-    class:clickable={channel.public || channel.invited}
-    class="details"
-    onclick={() => selectChannel(channel)}>
-    <div class="avatar">
-        <Avatar
-            url={client.groupAvatarUrl(
-                { id: channel.id, ...channel.avatar },
-                $selectedCommunitySummaryStore,
-            )}
-            size={AvatarSize.Default} />
-    </div>
-    <div class="channel-text">
-        <div class="channel-name">
-            {#if !channel.public}
-                <div class="private"></div>
-            {/if}
-            <h3>
-                {channel.name}
-            </h3>
-        </div>
-        {#if channel.description !== ""}
-            <div class="desc">
-                <Markdown text={channel.description} oneLine suppressLinks />
-            </div>
-        {/if}
-        <div class="meta">
-            <div class="attributes">
-                <div class="members">
-                    <span class="label"
-                        ><AccountMultiple viewBox="0 -4 24 24" size={"1.2em"} /></span>
-                    <span class="number">{channel.memberCount.toLocaleString()}</span>
-                </div>
-                <div class="gate">
-                    <AccessGateIcon
-                        button
-                        clickable
-                        level={"channel"}
-                        small
-                        position={"bottom"}
-                        align={"middle"}
-                        gateConfig={channel.gateConfig} />
-                </div>
-            </div>
-        </div>
-    </div>
-    {#if canDeleteChannel}
-        <div class="menu">
-            <MenuIcon position={"bottom"} align={"end"}>
-                {#snippet menuIcon()}
-                    <HoverIcon>
-                        <DotsVertical size={$iconSize} color={"var(--icon-inverted-txt)"} />
-                    </HoverIcon>
-                {/snippet}
-                {#snippet menuItems()}
-                    <Menu>
-                        <MenuItem warning onclick={onDeleteChannel}>
-                            {#snippet icon()}
-                                <DeleteOutline size={$iconSize} color={"var(--menu-warn)"} />
-                            {/snippet}
-                            {#snippet text()}
-                                <Translatable
-                                    resourceKey={i18nKey("deleteGroup", undefined, "channel")} />
-                            {/snippet}
-                        </MenuItem>
-                    </Menu>
-                {/snippet}
-            </MenuIcon>
-        </div>
-    {/if}
-</div>
-
-<style lang="scss">
-    .details {
-        display: flex;
-        align-items: center;
-        gap: $sp4;
-        padding: $sp4;
-        transition:
-            background-color ease-in-out 100ms,
-            border-color ease-in-out 100ms;
-
-        &.clickable {
-            cursor: pointer;
-            @media (hover: hover) {
-                &:hover {
-                    background-color: var(--chatSummary-hv);
-                }
-            }
-        }
-
-        @include mobile() {
-            padding: 0 toRem(10);
-        }
-
-        .desc {
-            @include font(light, normal, fs-80);
-            color: var(--txt-light);
-        }
-
-        .meta {
-            display: flex;
-            align-items: flex-end;
-            justify-content: space-between;
-            gap: $sp3;
-
-            .attributes {
-                display: flex;
-                align-items: center;
-                gap: $sp3;
-            }
-
-            .members {
-                background-color: var(--input-bg);
-                padding: $sp1 $sp3;
-                border-radius: var(--rd);
-                .number {
-                    font-weight: 500;
-                }
-                .label {
-                    color: var(--txt-light);
-                }
-            }
-        }
-
-        .channel-text {
-            overflow: hidden;
-            width: 100%;
-        }
-
-        .channel-name {
-            display: flex;
-            align-items: center;
-            gap: $sp2;
-            @include ellipsis();
-            h3 {
-                @include font(bold, normal, fs-100);
-            }
-        }
-
-        .channel-name,
-        .desc {
-            margin-bottom: $sp2;
-        }
-    }
-
-    .private {
-        background-repeat: no-repeat;
-        $size: 12px;
-        flex: 0 0 $size;
-        width: $size;
-        height: $size;
-        background-image: url("/assets/locked.svg");
-    }
-</style>
diff --git a/frontend/app/src/components/home/communities/details/CommunitySummary.svelte b/frontend/app/src/components/home/communities/details/CommunitySummary.svelte
deleted file mode 100644
index 7021fc1a9a..0000000000
--- a/frontend/app/src/components/home/communities/details/CommunitySummary.svelte
+++ /dev/null
@@ -1,68 +0,0 @@
-<script lang="ts">
-    import {
-        type OpenChat,
-        defaultChatRules,
-        selectedCommunityReferralsStore,
-        selectedCommunityRulesStore,
-        selectedCommunitySummaryStore,
-    } from "@client";
-    import { getContext } from "svelte";
-    import CommunityCard from "../explore/CommunityCard.svelte";
-    import CommunityDetails from "./CommunityDetails.svelte";
-    import CommunityDetailsHeader from "./CommunityDetailsHeader.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    let frozen = $derived(client.isCommunityFrozen($selectedCommunitySummaryStore?.id));
-    let rules = $derived($selectedCommunityRulesStore ?? defaultChatRules("community"));
-    let canDelete = $derived(
-        $selectedCommunitySummaryStore !== undefined &&
-            !frozen &&
-            client.canDeleteCommunity($selectedCommunitySummaryStore.id),
-    );
-    let canEdit = $derived(
-        $selectedCommunitySummaryStore !== undefined &&
-            !frozen &&
-            client.canEditCommunity($selectedCommunitySummaryStore.id),
-    );
-    let canInvite = $derived(
-        $selectedCommunitySummaryStore !== undefined &&
-            !frozen &&
-            client.canInviteUsers($selectedCommunitySummaryStore.id),
-    );
-</script>
-
-{#if $selectedCommunitySummaryStore}
-    <CommunityDetailsHeader
-        community={$selectedCommunitySummaryStore}
-        {canEdit}
-        level={"community"} />
-    <div class="body">
-        <CommunityCard
-            id={$selectedCommunitySummaryStore.id.communityId}
-            name={$selectedCommunitySummaryStore.name}
-            description={$selectedCommunitySummaryStore.description}
-            banner={$selectedCommunitySummaryStore.banner}
-            avatar={$selectedCommunitySummaryStore.avatar}
-            memberCount={$selectedCommunitySummaryStore.memberCount}
-            gateConfig={$selectedCommunitySummaryStore.gateConfig}
-            language={$selectedCommunitySummaryStore.primaryLanguage}
-            flags={0}
-            channelCount={0}
-            header
-            verified={$selectedCommunitySummaryStore.verified} />
-        <CommunityDetails
-            {canDelete}
-            {canInvite}
-            {rules}
-            metrics={$selectedCommunitySummaryStore.metrics}
-            community={$selectedCommunitySummaryStore}
-            referrals={$selectedCommunityReferralsStore} />
-    </div>
-{/if}
-
-<style lang="scss">
-    .body {
-        @include nice-scrollbar();
-    }
-</style>
diff --git a/frontend/app/src/components/home/communities/details/UserGroup.svelte b/frontend/app/src/components/home/communities/details/UserGroup.svelte
deleted file mode 100644
index 6c80ce4ec4..0000000000
--- a/frontend/app/src/components/home/communities/details/UserGroup.svelte
+++ /dev/null
@@ -1,286 +0,0 @@
-<script lang="ts">
-    import {
-        iconSize,
-        type CommunitySummary,
-        type OpenChat,
-        type UserGroupDetails,
-        type UserSummary,
-    } from "@client";
-    import { ErrorCode } from "@shared";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import DeleteOutline from "svelte-material-icons/DeleteOutline.svelte";
-    import { i18nKey } from "../../../../i18n/i18n";
-    import { toastStore } from "../../../../stores/toast";
-    import { trimLeadingAtSymbol } from "../../../../utils/user";
-    import Button from "../../../Button.svelte";
-    import ButtonGroup from "../../../ButtonGroup.svelte";
-    import Input from "../../../Input.svelte";
-    import Legend from "../../../Legend.svelte";
-    import Search from "../../../Search.svelte";
-    import Translatable from "../../../Translatable.svelte";
-    import VirtualList from "@shared_components/VirtualList.svelte";
-    import User from "../../groupdetails/User.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        community: CommunitySummary;
-        original: UserGroupDetails;
-        canManageUserGroups: boolean;
-        communityUsers?: Record<string, UserSummary>;
-        communityUsersList?: UserSummary[];
-        onCancel: () => void;
-    }
-
-    let {
-        community,
-        original,
-        canManageUserGroups,
-        communityUsers = {},
-        communityUsersList = [],
-        onCancel,
-    }: Props = $props();
-
-    let userGroup = $state({ ...original });
-    let added: Set<string> = new Set();
-    let removed: Set<string> = new Set();
-    let searchVirtualList = $state<VirtualList<UserSummary> | undefined>();
-    let searchTermEntered = $state("");
-    let usersDirty = $state(false);
-    let saving = $state(false);
-
-    const MIN_LENGTH = 3;
-    const MAX_LENGTH = 25;
-
-    // we are going to just wait for the save to succeed here rather than mess about with
-    // local updates since this is probably not a very common operation and it's much simpler this way
-    function save() {
-        saving = true;
-        const creating = userGroup.id === -1;
-        (creating
-            ? client.createUserGroup(community.id, userGroup)
-            : client.updateUserGroup(community.id, userGroup, added, removed)
-        )
-            .then((resp) => {
-                if (resp.kind === "success") {
-                    cancel();
-                } else {
-                    if (resp.kind === "error" && resp.code === ErrorCode.NameTaken) {
-                        toastStore.showFailureToast(
-                            i18nKey("communities.errors.userGroupNameTaken"),
-                        );
-                    } else {
-                        toastStore.showFailureToast(
-                            i18nKey(
-                                `communities.errors.${
-                                    creating ? "createGroupFailed" : "updateGroupFailed"
-                                }`,
-                            ),
-                        );
-                    }
-                }
-            })
-            .finally(() => (saving = false));
-    }
-
-    function autoCorrect() {
-        if (nameDirty) {
-            userGroup.name = userGroup.name.replace(/ /g, "_");
-        }
-    }
-
-    function cancel() {
-        reset();
-        onCancel();
-    }
-
-    function reset() {
-        userGroup = original;
-        added = new Set();
-        removed = new Set();
-    }
-
-    function matchesSearch(searchTerm: string, user: UserSummary): boolean {
-        if (searchTerm === "") return false;
-        return (
-            !userGroup.members.has(user.userId) &&
-            (user.username.toLowerCase().includes(searchTerm) ||
-                (user.displayName !== undefined &&
-                    user.displayName.toLowerCase().includes(searchTerm)))
-        );
-    }
-
-    function addUserToGroup(userId: string) {
-        searchTermEntered = "";
-        added.add(userId);
-        removed.delete(userId);
-        changeUsers(() => userGroup.members.add(userId));
-    }
-
-    function removeUserFromGroup(userId: string) {
-        removed.add(userId);
-        added.delete(userId);
-        changeUsers(() => userGroup.members.delete(userId));
-    }
-
-    function changeUsers(fn: () => void) {
-        fn();
-        usersDirty = true;
-        userGroup = userGroup; //:puke: trigger a reaction
-    }
-    let searchTerm = $derived(trimLeadingAtSymbol(searchTermEntered));
-    let searchTermLower = $derived(searchTerm.toLowerCase());
-    let groupUsers = $derived(
-        [...userGroup.members].map((m) => communityUsers[m]).filter((u) => u !== undefined),
-    );
-    let matchedUsers = $derived(
-        communityUsersList.filter((u) => matchesSearch(searchTermLower, u)),
-    );
-    let nameDirty = $derived(original.name !== userGroup.name);
-    let dirty = $derived(nameDirty || usersDirty);
-    let trimmedName = $derived(userGroup.name.trim());
-    let nameValid = $derived(
-        trimmedName.length >= MIN_LENGTH &&
-            trimmedName.length <= MAX_LENGTH &&
-            trimmedName.indexOf(" ") < 0,
-    );
-    let valid = $derived(nameValid && userGroup.members.size > 0);
-</script>
-
-<div class="user-group">
-    {#if canManageUserGroups}
-        <div class="header">
-            <Legend
-                label={i18nKey("communities.userGroupName")}
-                rules={i18nKey("communities.noSpaces")} />
-            <Input
-                bind:value={userGroup.name}
-                minlength={MIN_LENGTH}
-                maxlength={MAX_LENGTH}
-                disabled={!canManageUserGroups}
-                countdown
-                invalid={nameDirty && !nameValid}
-                onBlur={autoCorrect}
-                placeholder={i18nKey("communities.enterUserGroupName")} />
-        </div>
-        <div class="search">
-            <Search
-                onPerformSearch={() => searchVirtualList?.reset()}
-                fill
-                searching={false}
-                bind:searchTerm={searchTermEntered}
-                placeholder={i18nKey("searchUsersPlaceholder")} />
-        </div>
-        {#if matchedUsers.length > 0}
-            <div style={`height: ${matchedUsers.length * 80}px`} class="searched-users">
-                <VirtualList
-                    bind:this={searchVirtualList}
-                    keyFn={(user) => user.userId}
-                    items={matchedUsers}>
-                    {#snippet children(item)}
-                        <User
-                            onClick={() => addUserToGroup(item.userId)}
-                            user={item}
-                            me={false}
-                            profile={false}
-                            {searchTerm} />
-                    {/snippet}
-                </VirtualList>
-            </div>
-        {/if}
-    {/if}
-
-    <div class="users">
-        <div class="legend" class:readonly={!canManageUserGroups}>
-            {#if canManageUserGroups}
-                <Translatable resourceKey={i18nKey("communities.userGroupMembers")} />
-            {:else}
-                <Markdown
-                    text={$_("communities.namedUserGroupMembers", {
-                        values: { name: userGroup.name },
-                    })} />
-            {/if}
-        </div>
-        {#each groupUsers as user}
-            <div class="user">
-                <User {user} me={false}>
-                    {#if canManageUserGroups}
-                        <div onclick={() => removeUserFromGroup(user.userId)} class="delete">
-                            <DeleteOutline size={$iconSize} color={"var(--icon-txt)"} />
-                        </div>
-                    {/if}
-                </User>
-            </div>
-        {/each}
-    </div>
-
-    <div class="buttons">
-        <ButtonGroup align="fill">
-            <Button onClick={cancel} secondary
-                ><Translatable resourceKey={i18nKey("cancel")} /></Button>
-            {#if canManageUserGroups}
-                <Button onClick={save} disabled={!dirty || !valid || saving} loading={saving}
-                    ><Translatable resourceKey={i18nKey("save")} /></Button>
-            {/if}
-        </ButtonGroup>
-    </div>
-</div>
-
-<style lang="scss">
-    :global(.user-group .header .input-wrapper) {
-        margin-bottom: 0;
-    }
-
-    :global(.user-group .search .wrapper) {
-        padding: 0 $sp3;
-    }
-
-    .header,
-    .search,
-    .buttons {
-        padding: 0 $sp4;
-        @include mobile() {
-            padding: 0 $sp3;
-        }
-    }
-
-    .searched-users {
-        max-height: calc(var(--vh, 1vh) * 50);
-    }
-
-    .user-group {
-        display: flex;
-        flex-direction: column;
-        gap: toRem(12);
-        height: 100%;
-        justify-content: space-between;
-
-        .users {
-            flex: auto;
-
-            .legend {
-                padding: $sp4;
-                border-bottom: 1px solid var(--bd);
-
-                &.readonly {
-                    padding-top: 0;
-                }
-            }
-
-            .user {
-                .delete {
-                    transition: opacity 250ms ease-in-out;
-                    opacity: 0.6;
-                }
-
-                &:hover {
-                    .delete {
-                        opacity: 1;
-                    }
-                }
-            }
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/communities/details/UserGroups.svelte b/frontend/app/src/components/home/communities/details/UserGroups.svelte
deleted file mode 100644
index 3c9b7b0efa..0000000000
--- a/frontend/app/src/components/home/communities/details/UserGroups.svelte
+++ /dev/null
@@ -1,329 +0,0 @@
-<script lang="ts">
-    import type {
-        CommunitySummary,
-        Member,
-        OpenChat,
-        ReadonlyMap,
-        UserGroupDetails,
-        UserLookup,
-        UserSummary,
-    } from "@client";
-    import {
-        allUsersStore,
-        iconSize,
-        selectedCommunityMembersStore,
-        selectedCommunityUserGroupsStore,
-    } from "@client";
-    import { getContext, onMount } from "svelte";
-    import DeleteOutline from "svelte-material-icons/DeleteOutline.svelte";
-    import PencilOutline from "svelte-material-icons/PencilOutline.svelte";
-    import Plus from "svelte-material-icons/Plus.svelte";
-    import { SvelteSet } from "svelte/reactivity";
-    import { i18nKey } from "../../../../i18n/i18n";
-    import { toastStore } from "../../../../stores/toast";
-    import AreYouSure from "../../../AreYouSure.svelte";
-    import CollapsibleCard from "../../../CollapsibleCard.svelte";
-    import HoverIcon from "../../../HoverIcon.svelte";
-    import Search from "../../../Search.svelte";
-    import Translatable from "../../../Translatable.svelte";
-    import User from "../../groupdetails/User.svelte";
-    import UserGroup from "./UserGroup.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        community: CommunitySummary;
-        openedGroupId?: number | undefined;
-    }
-
-    let { community, openedGroupId = $bindable(undefined) }: Props = $props();
-
-    let searchTerm = $state("");
-    let selectedGroup: UserGroupDetails | undefined = $state(undefined);
-    let confirmingDelete = $state(false);
-    let groupToDelete: UserGroupDetails | undefined = undefined;
-    let communityUsers: Record<string, UserSummary> = $state({});
-    let communityUsersList: UserSummary[] = $state([]);
-
-    onMount(() => {
-        communityUsers = createLookup($selectedCommunityMembersStore, $allUsersStore);
-        communityUsersList = Object.values(communityUsers);
-    });
-
-    function createLookup(
-        members: ReadonlyMap<string, Member>,
-        allUsers: UserLookup,
-    ): Record<string, UserSummary> {
-        return [...members.values()].reduce(
-            (map, m) => {
-                const user = allUsers.get(m.userId);
-                if (user !== undefined) {
-                    map[user.userId] = {
-                        ...user,
-                        displayName: m.displayName ?? user.displayName,
-                        username: user.username,
-                    };
-                }
-                return map;
-            },
-            {} as Record<string, UserSummary>,
-        );
-    }
-
-    function matchesSearch(searchTerm: string, userGroup: UserGroupDetails): boolean {
-        if (searchTerm === "") return true;
-        return userGroup.name.toLowerCase().includes(searchTerm);
-    }
-
-    function createUserGroup() {
-        selectedGroup = {
-            kind: "user_group",
-            id: -1,
-            name: "",
-            members: new SvelteSet<string>(),
-        };
-    }
-
-    function deleteUserGroup(yes: boolean = true): Promise<void> {
-        if (confirmingDelete && !yes) {
-            groupToDelete = undefined;
-            confirmingDelete = false;
-            return Promise.resolve();
-        }
-        if (groupToDelete === undefined) {
-            return Promise.resolve();
-        }
-
-        confirmingDelete = false;
-
-        return client
-            .deleteUserGroup(community.id, groupToDelete)
-            .then((success) => {
-                if (!success) {
-                    toastStore.showFailureToast(
-                        i18nKey("communities.errors.deleteUserGroupFailed"),
-                    );
-                }
-            })
-            .finally(() => (groupToDelete = undefined));
-    }
-
-    function editUserGroup(e: Event, userGroup: UserGroupDetails) {
-        e.stopPropagation();
-        selectedGroup = userGroup;
-    }
-
-    function confirmDeleteUserGroup(e: Event, userGroup: UserGroupDetails) {
-        e.stopPropagation();
-        groupToDelete = userGroup;
-        confirmingDelete = true;
-    }
-
-    export function reset() {
-        selectedGroup = undefined;
-        openedGroupId = undefined;
-    }
-    let searchTermLower = $derived(searchTerm.toLowerCase());
-    let userGroups = $derived([...$selectedCommunityUserGroupsStore.values()]);
-    let canManageUserGroups = $derived(client.canManageUserGroups(community.id));
-    let matchingGroups = $derived(userGroups.filter((ug) => matchesSearch(searchTermLower, ug)));
-</script>
-
-{#if confirmingDelete}
-    <AreYouSure message={i18nKey("communities.confirmDeleteUserGroup")} action={deleteUserGroup} />
-{/if}
-
-{#if selectedGroup !== undefined}
-    <UserGroup
-        {canManageUserGroups}
-        {community}
-        {communityUsers}
-        {communityUsersList}
-        onCancel={reset}
-        original={selectedGroup} />
-{:else}
-    <div class="user-groups">
-        <div class="search-row">
-            <div class="search">
-                <Search
-                    fill
-                    searching={false}
-                    bind:searchTerm
-                    placeholder={i18nKey("communities.searchUserGroups")} />
-            </div>
-            {#if canManageUserGroups}
-                <div class="add">
-                    <HoverIcon onclick={createUserGroup}>
-                        <Plus size={$iconSize} color={"var(--icon-txt)"} />
-                    </HoverIcon>
-                </div>
-            {/if}
-        </div>
-        <div class="groups">
-            {#if matchingGroups.length === 0}
-                <div class="no-groups">
-                    <Translatable resourceKey={i18nKey("communities.noUserGroups")} />
-                </div>
-            {:else}
-                {#each matchingGroups as userGroup}
-                    <div class="user-group-card">
-                        <CollapsibleCard
-                            open={userGroup.id === openedGroupId}
-                            headerText={i18nKey(userGroup.name)}>
-                            {#snippet titleSlot()}
-                                <h4 class="name">
-                                    {#if canManageUserGroups}
-                                        <div
-                                            role="button"
-                                            tabindex="0"
-                                            onclick={(e) => editUserGroup(e, userGroup)}
-                                            class="edit">
-                                            <PencilOutline
-                                                viewBox={"0 -3 24 24"}
-                                                size={"1.2em"}
-                                                color={"var(--icon-txt)"} />
-                                        </div>
-                                        <div
-                                            role="button"
-                                            tabindex="0"
-                                            onclick={(e) => confirmDeleteUserGroup(e, userGroup)}
-                                            class="delete">
-                                            <DeleteOutline
-                                                viewBox={"0 -3 24 24"}
-                                                size={"1.2em"}
-                                                color={"var(--icon-txt)"} />
-                                        </div>
-                                    {/if}
-                                    <span class="name-text">{userGroup.name}</span>
-                                    <span class="members">
-                                        <span class="num"
-                                            >{userGroup.members.size.toLocaleString()}</span>
-                                        <Translatable resourceKey={i18nKey("members")} />
-                                    </span>
-                                </h4>
-                            {/snippet}
-
-                            {#each userGroup.members as member}
-                                {#if communityUsers[member] !== undefined}
-                                    <div class="user">
-                                        <User user={communityUsers[member]} me={false} />
-                                    </div>
-                                {/if}
-                            {/each}
-                        </CollapsibleCard>
-                    </div>
-                {/each}
-            {/if}
-        </div>
-    </div>
-{/if}
-
-<style lang="scss">
-    :global(.user-group-card .body) {
-        padding: 0;
-    }
-
-    :global(.user-group-card .header) {
-        padding: $sp4 !important;
-        @include mobile() {
-            padding: $sp3 !important;
-        }
-    }
-
-    .search-row {
-        display: flex;
-        align-items: center;
-        gap: $sp3;
-        padding: 0 $sp4;
-
-        @include mobile() {
-            padding: 0 $sp3;
-        }
-
-        .search {
-            flex: auto;
-        }
-
-        .add {
-            flex: 0 0 30px;
-        }
-    }
-
-    .user-groups {
-        display: flex;
-        flex-direction: column;
-        gap: toRem(12);
-        height: 100%;
-        justify-content: space-between;
-
-        .no-groups {
-            padding: $sp4;
-            @include font-size(fs-80);
-            color: var(--txt-light);
-        }
-
-        .groups {
-            flex: auto;
-
-            .name {
-                flex: auto;
-                display: flex;
-                gap: $sp2;
-                align-items: center;
-                @include font(medium, normal, fs-100);
-                @include ellipsis();
-
-                .name-text {
-                    display: inline-block;
-                    padding: toRem(6);
-                    background-color: rgba(0, 0, 0, 0.05);
-                    border-radius: $sp3;
-                }
-
-                .members {
-                    @include font(light, normal, fs-70);
-                    margin-left: $sp2;
-                    color: var(--txt-light);
-                    .num {
-                        color: var(--txt);
-                        font-weight: 700;
-                    }
-                }
-            }
-
-            .user-group {
-                cursor: pointer;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                padding: toRem(12) $sp4;
-                transition:
-                    background-color ease-in-out 100ms,
-                    border-color ease-in-out 100ms;
-                gap: 12px;
-
-                @media (hover: hover) {
-                    &:not(.me):hover {
-                        background-color: var(--members-hv);
-                    }
-                }
-
-                @include mobile() {
-                    padding: $sp3 toRem(10);
-                }
-
-                .delete {
-                    flex: 0 0 30px;
-                    transition: opacity 250ms ease-in-out;
-                    opacity: 0.6;
-                }
-
-                &:hover {
-                    .delete {
-                        opacity: 1;
-                    }
-                }
-            }
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/communities/edit/Details.svelte b/frontend/app/src/components/home/communities/edit/Details.svelte
deleted file mode 100644
index 678ff5b56b..0000000000
--- a/frontend/app/src/components/home/communities/edit/Details.svelte
+++ /dev/null
@@ -1,118 +0,0 @@
-<script lang="ts">
-    import EditableAvatar from "@src/components/EditableAvatar.svelte";
-    import EditableBanner from "@src/components/EditableBanner.svelte";
-    import type { CommunitySummary } from "@client";
-    import { i18nKey, supportedLanguages } from "../../../../i18n/i18n";
-    import Input from "../../../Input.svelte";
-    import Legend from "../../../Legend.svelte";
-    import Select from "../../../Select.svelte";
-    import TextArea from "../../../TextArea.svelte";
-
-    const MIN_LENGTH = 3;
-    const MAX_LENGTH = 25;
-    const MAX_DESC_LENGTH = 1024;
-
-    interface Props {
-        busy: boolean;
-        candidate: CommunitySummary;
-        valid: boolean;
-    }
-
-    let { busy = $bindable(false), candidate = $bindable(), valid = $bindable() }: Props = $props();
-
-    $effect(() => {
-        const isValid =
-            candidate.name.length >= MIN_LENGTH &&
-            candidate.name.length <= MAX_LENGTH &&
-            candidate.description.length <= MAX_DESC_LENGTH &&
-            candidate.description.length > 0;
-        if (isValid !== valid) {
-            valid = isValid;
-        }
-    });
-
-    function communityAvatarSelected(detail: { url: string; data: Uint8Array }) {
-        candidate.avatar = {
-            blobUrl: detail.url,
-            blobData: detail.data,
-        };
-    }
-
-    function communityBannerSelected(detail: { url: string; data: Uint8Array }) {
-        candidate.banner = {
-            blobUrl: detail.url,
-            blobData: detail.data,
-        };
-    }
-</script>
-
-<section class="images-section">
-    <Legend label={i18nKey("communities.imageLabel")} />
-    <div class="images">
-        <div class="banner">
-            <EditableBanner
-                image={candidate.banner?.blobUrl}
-                onImageSelected={communityBannerSelected} />
-        </div>
-        <div class="avatar">
-            <EditableAvatar
-                overlayIcon
-                size={"medium"}
-                image={candidate.avatar?.blobUrl}
-                onImageSelected={communityAvatarSelected} />
-        </div>
-    </div>
-</section>
-<section>
-    <Legend required label={i18nKey("communities.name")} />
-    <Input
-        autofocus
-        disabled={busy}
-        bind:value={candidate.name}
-        minlength={MIN_LENGTH}
-        maxlength={MAX_LENGTH}
-        countdown
-        placeholder={i18nKey("communities.namePlaceholder")} />
-</section>
-<section>
-    <Legend label={i18nKey("communities.primaryLanguage")} />
-    <Select bind:value={candidate.primaryLanguage}>
-        {#each supportedLanguages as lang}
-            <option value={lang.code}>{lang.name}</option>
-        {/each}
-    </Select>
-</section>
-<section>
-    <Legend
-        required
-        label={i18nKey("communities.description")}
-        rules={i18nKey("supportsMarkdown")} />
-    <TextArea
-        rows={4}
-        disabled={busy}
-        bind:value={candidate.description}
-        maxlength={MAX_DESC_LENGTH}
-        placeholder={i18nKey("communities.descriptionPlaceholder")} />
-</section>
-
-<style lang="scss">
-    .avatar {
-        position: absolute;
-        bottom: toRem(-32);
-        left: toRem(24);
-        border-radius: var(--avatar-rd);
-        border: 2px solid var(--txt-light);
-    }
-
-    section {
-        margin-bottom: $sp4;
-
-        &.images-section {
-            margin-bottom: $sp7;
-        }
-    }
-
-    .images {
-        position: relative;
-    }
-</style>
diff --git a/frontend/app/src/components/home/communities/explore/CommunityCard.svelte b/frontend/app/src/components/home/communities/explore/CommunityCard.svelte
deleted file mode 100644
index d32b275c84..0000000000
--- a/frontend/app/src/components/home/communities/explore/CommunityCard.svelte
+++ /dev/null
@@ -1,219 +0,0 @@
-<script lang="ts">
-    import AccountMultiple from "svelte-material-icons/AccountMultiple.svelte";
-    import Pound from "svelte-material-icons/Pound.svelte";
-    import type { AccessGateConfig, DataContent, OpenChat } from "@client";
-    import Avatar from "../../../Avatar.svelte";
-    import IntersectionObserver from "../../IntersectionObserver.svelte";
-    import { _ } from "svelte-i18n";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import { AvatarSize, ModerationFlags } from "@client";
-    import { getContext } from "svelte";
-    import CommunityBanner from "./CommunityBanner.svelte";
-    import AccessGateIcon from "../../access/AccessGateIcon.svelte";
-    import { i18nKey, supportedLanguagesByCode } from "../../../../i18n/i18n";
-    import Translatable from "../../../Translatable.svelte";
-    import WithVerifiedBadge from "../../../icons/WithVerifiedBadge.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        id: string;
-        name: string;
-        description: string;
-        avatar: DataContent;
-        banner: DataContent;
-        memberCount: number;
-        channelCount: number;
-        header?: boolean;
-        gateConfig: AccessGateConfig;
-        language: string;
-        flags: number;
-        verified: boolean;
-    }
-
-    let {
-        id,
-        name,
-        description,
-        avatar,
-        banner,
-        memberCount,
-        channelCount,
-        header = false,
-        gateConfig,
-        language,
-        flags,
-        verified,
-    }: Props = $props();
-
-    let flagsArray = $derived(serialiseFlags(flags));
-
-    function serialiseFlags(flags: number) {
-        const f: string[] = [supportedLanguagesByCode[language]?.name];
-        if (client.hasModerationFlag(flags, ModerationFlags.Adult)) {
-            f.push("communities.adult");
-        }
-        if (client.hasModerationFlag(flags, ModerationFlags.Offensive)) {
-            f.push("communities.offensive");
-        }
-        if (client.hasModerationFlag(flags, ModerationFlags.UnderReview)) {
-            f.push("communities.underReview");
-        }
-        return f;
-    }
-</script>
-
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class:header class="card">
-    <IntersectionObserver>
-        {#snippet children(intersecting)}
-            <CommunityBanner {intersecting} square={header} {banner}>
-                <div class="gate">
-                    <AccessGateIcon
-                        clickable
-                        button
-                        level={"community"}
-                        position={"bottom"}
-                        align={"end"}
-                        {gateConfig} />
-                </div>
-                <div class="avatar">
-                    <Avatar
-                        url={client.communityAvatarUrl(id, avatar)}
-                        userId={undefined}
-                        size={AvatarSize.Default} />
-                </div>
-            </CommunityBanner>
-        {/snippet}
-    </IntersectionObserver>
-    <div class="content">
-        <WithVerifiedBadge
-            {verified}
-            size={"small"}
-            tooltip={i18nKey("verified.verified", undefined, "community")}>
-            <div class="name">
-                {name}
-            </div>
-        </WithVerifiedBadge>
-        <div class="desc" class:fixed={!header}>
-            <Markdown inline={false} text={description} />
-        </div>
-        {#if !header}
-            <div class="footer">
-                <div class="footer-row">
-                    <div class="members" title={$_("members")}>
-                        <span class="label"
-                            ><AccountMultiple viewBox="0 -4 24 24" size={"1.2em"} /></span>
-                        <span class="number">{memberCount.toLocaleString()}</span>
-                    </div>
-                    <div class="channels" title={$_("communities.publicChannels")}>
-                        <span class="label"><Pound viewBox="0 -3 24 24" size={"1.2em"} /></span>
-                        <span class="number">{channelCount.toLocaleString()}</span>
-                    </div>
-                </div>
-                <div class="footer-row flags">
-                    {#each flagsArray as flag}
-                        <div class="flag"><Translatable resourceKey={i18nKey(flag)} /></div>
-                    {/each}
-                </div>
-            </div>
-        {/if}
-    </div>
-</div>
-
-<style lang="scss">
-    .card {
-        cursor: pointer;
-        background-color: var(--recommended-bg);
-        border: var(--bw) solid var(--bd);
-        border-radius: var(--card-rd);
-        box-shadow: var(--card-sh);
-
-        .avatar {
-            width: toRem(48);
-            height: toRem(48);
-            position: absolute;
-            bottom: toRem(-24);
-            left: $sp4;
-        }
-
-        .gate {
-            position: absolute;
-            top: $sp4;
-            right: $sp4;
-        }
-
-        &.header {
-            border-radius: 0;
-            border: none;
-        }
-
-        .content {
-            padding: toRem(16);
-            padding-top: toRem(28);
-
-            .name {
-                @include font(bold, normal, fs-130);
-            }
-
-            .desc {
-                @include font(book, normal, fs-100, 28);
-                color: var(--txt-light);
-                margin-bottom: $sp4;
-                max-height: toRem(130);
-                @include nice-scrollbar();
-                overflow-wrap: anywhere;
-
-                :global(.markdown-wrapper pre) {
-                    text-wrap: auto;
-                }
-
-                &.fixed {
-                    height: toRem(130);
-                }
-            }
-
-            .footer {
-                border-top: 1px solid var(--bd);
-                padding-top: $sp4;
-                margin-top: $sp4;
-
-                .footer-row {
-                    display: flex;
-                    justify-content: space-between;
-                    gap: $sp3;
-                    margin-bottom: 12px;
-                    .members,
-                    .channels {
-                        background-color: var(--input-bg);
-                        padding: $sp1 $sp3;
-                        border-radius: var(--rd);
-                        .number {
-                            font-weight: 500;
-                        }
-                        .label {
-                            color: var(--txt-light);
-                        }
-                    }
-                }
-            }
-
-            .flags {
-                @include font(book, normal, fs-80);
-                justify-content: flex-start !important;
-                margin-bottom: 0 !important;
-                display: flex;
-                gap: $sp2;
-                flex-wrap: wrap;
-
-                .flag {
-                    background: var(--button-bg);
-                    color: var(--button-txt);
-                    padding: $sp1 $sp3;
-                    border-radius: var(--rd);
-                }
-            }
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/communities/explore/Explore.svelte b/frontend/app/src/components/home/communities/explore/Explore.svelte
deleted file mode 100644
index 370364029c..0000000000
--- a/frontend/app/src/components/home/communities/explore/Explore.svelte
+++ /dev/null
@@ -1,393 +0,0 @@
-<script lang="ts">
-    import type { OpenChat } from "@client";
-    import {
-        anonUserStore,
-        exploreCommunitiesFiltersStore,
-        iconSize,
-        identityStateStore,
-        ipadWidth,
-        isDiamondStore,
-        mobileWidth,
-        offlineStore,
-        publish,
-        ScreenWidth,
-        screenWidth,
-    } from "@client";
-    import { getContext, onMount, tick } from "svelte";
-    import { _ } from "svelte-i18n";
-    import ArrowUp from "svelte-material-icons/ArrowUp.svelte";
-    import CloudOffOutline from "svelte-material-icons/CloudOffOutline.svelte";
-    import Plus from "svelte-material-icons/Plus.svelte";
-    import Tune from "svelte-material-icons/Tune.svelte";
-    import { i18nKey } from "../../../../i18n/i18n";
-    import { communitySearchState } from "../../../../stores/search.svelte";
-    import Search from "../../..//Search.svelte";
-    import Button from "../../../Button.svelte";
-    import Fab from "../../../Fab.svelte";
-    import HoverIcon from "../../../HoverIcon.svelte";
-    import FancyLoader from "../../../icons/FancyLoader.svelte";
-    import Translatable from "../../../Translatable.svelte";
-    import CommunityCard from "./CommunityCard.svelte";
-    import CommunityCardLink from "./CommunityCardLink.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    let searching = $state(false);
-    let showFab = $state(false);
-    let scrollableElement: HTMLElement | null;
-    let initialised = $state(false);
-
-    function calculatePageSize(width: ScreenWidth): number {
-        // make sure we get even rows of results
-        switch (width) {
-            case ScreenWidth.Large:
-            case ScreenWidth.ExtraLarge:
-                return 30;
-            default:
-                return 32;
-        }
-    }
-
-    function createCommunity() {
-        if ($anonUserStore) {
-            client.updateIdentityState({
-                kind: "logging_in",
-                postLogin: { kind: "create_community" },
-            });
-            return;
-        }
-        if (!$isDiamondStore) {
-            publish("upgrade");
-        } else {
-            publish("createCommunity");
-        }
-    }
-
-    function search(filters: { languages: string[]; flags: number }, reset = false) {
-        searching = true;
-        if (reset) {
-            communitySearchState.reset();
-        } else {
-            communitySearchState.nextPage();
-        }
-
-        client
-            .exploreCommunities(
-                communitySearchState.term === "" ? undefined : communitySearchState.term,
-                communitySearchState.index,
-                pageSize,
-                filters.flags ?? 0,
-                filters.languages,
-            )
-            .then((results) => {
-                if (results.kind === "success") {
-                    if (reset) {
-                        communitySearchState.results = results.matches;
-                    } else {
-                        communitySearchState.appendResults(results.matches);
-                    }
-                    communitySearchState.total = results.total;
-                }
-            })
-            .finally(() => (searching = false));
-    }
-
-    function showFilters() {
-        client.pushRightPanelHistory({ kind: "community_filters" });
-    }
-
-    onMount(() => {
-        tick().then(() => {
-            scrollableElement = document.getElementById("communities-wrapper");
-            if (scrollableElement) {
-                scrollableElement.scrollTop = communitySearchState.scrollPos;
-            }
-            onScroll();
-        });
-        return exploreCommunitiesFiltersStore.subscribe((filters) => {
-            if (initialised || communitySearchState.results.length === 0) {
-                search(filters, true);
-            }
-            initialised = true;
-        });
-    });
-
-    function scrollToTop() {
-        if (scrollableElement) {
-            scrollableElement.scrollTop = 0;
-        }
-    }
-
-    function onScroll() {
-        if (scrollableElement) {
-            showFab = scrollableElement.scrollTop > 500;
-            communitySearchState.scrollPos = scrollableElement.scrollTop;
-        }
-    }
-    let pageSize = $derived(calculatePageSize($screenWidth));
-    let more = $derived(communitySearchState.total > communitySearchState.results.length);
-    let loading = $derived(searching && communitySearchState.results.length === 0);
-
-    $effect(() => {
-        if (
-            $identityStateStore.kind === "logged_in" &&
-            $identityStateStore.postLogin?.kind === "create_community"
-        ) {
-            client.clearPostLoginState();
-            tick().then(() => createCommunity());
-        }
-    });
-</script>
-
-<div class="explore">
-    <div class="header">
-        <div class="title-row">
-            <div class="title">
-                {#if $mobileWidth}
-                    <h4><Translatable resourceKey={i18nKey("communities.exploreMobile")} /></h4>
-                {:else}
-                    <h4><Translatable resourceKey={i18nKey("communities.explore")} /></h4>
-                {/if}
-            </div>
-            {#if !$ipadWidth}
-                <div class="search">
-                    <Search
-                        fill
-                        bind:searchTerm={communitySearchState.term}
-                        searching={false}
-                        onPerformSearch={() => search($exploreCommunitiesFiltersStore, true)}
-                        placeholder={i18nKey("communities.search")} />
-                </div>
-                <div class="create">
-                    <Button onClick={createCommunity} hollow
-                        ><Translatable resourceKey={i18nKey("communities.create")} /></Button>
-                </div>
-            {/if}
-            <div class="buttons">
-                {#if $ipadWidth}
-                    <HoverIcon onclick={createCommunity}>
-                        <Plus size={$iconSize} color={"var(--icon-txt)"} />
-                    </HoverIcon>
-                {/if}
-
-                <HoverIcon title={$_("showFilters")} onclick={showFilters}>
-                    <Tune size={$iconSize} color={"var(--icon-txt)"} />
-                </HoverIcon>
-            </div>
-        </div>
-        <div class="subtitle-row">
-            {#if $ipadWidth}
-                <div class="search">
-                    <Search
-                        searching={false}
-                        fill
-                        bind:searchTerm={communitySearchState.term}
-                        onPerformSearch={() => search($exploreCommunitiesFiltersStore, true)}
-                        placeholder={i18nKey("communities.search")} />
-                </div>
-            {/if}
-        </div>
-    </div>
-
-    <div onscroll={onScroll} id="communities-wrapper" class="communities-wrapper">
-        <div
-            class="communities"
-            class:loading
-            class:empty={communitySearchState.results.length === 0}>
-            {#if loading}
-                <div class="loading">
-                    <FancyLoader />
-                </div>
-            {:else if communitySearchState.results.length === 0}
-                {#if $offlineStore}
-                    <div class="no-match">
-                        <CloudOffOutline size={"1.8em"} color={"var(--txt-light)"} />
-                        <p class="sub-header">
-                            <Translatable resourceKey={i18nKey("offlineError")} />
-                        </p>
-                    </div>
-                {:else}
-                    <div class="no-match">
-                        <h4 class="header">
-                            <Translatable resourceKey={i18nKey("communities.noMatch")} />
-                        </h4>
-                        <p class="sub-header">
-                            <Translatable resourceKey={i18nKey("communities.refineSearch")} />
-                        </p>
-                    </div>
-                {/if}
-            {:else}
-                {#each communitySearchState.results as community (community.id.communityId)}
-                    <CommunityCardLink url={`/community/${community.id.communityId}`}>
-                        <CommunityCard
-                            id={community.id.communityId}
-                            name={community.name}
-                            description={community.description}
-                            avatar={community.avatar}
-                            banner={community.banner}
-                            memberCount={community.memberCount}
-                            channelCount={community.channelCount}
-                            gateConfig={community.gateConfig}
-                            language={community.primaryLanguage}
-                            flags={community.flags}
-                            verified={community.verified} />
-                    </CommunityCardLink>
-                {/each}
-            {/if}
-        </div>
-        {#if more}
-            <div class="more">
-                <Button
-                    disabled={searching}
-                    loading={searching}
-                    onClick={() => search($exploreCommunitiesFiltersStore, false)}
-                    ><Translatable resourceKey={i18nKey("communities.loadMore")} /></Button>
-            </div>
-        {/if}
-    </div>
-    <div class:show={showFab} class="fab">
-        <Fab on:click={scrollToTop}>
-            <ArrowUp size={$iconSize} color={"#fff"} />
-        </Fab>
-    </div>
-</div>
-
-<style lang="scss">
-    .explore {
-        display: flex;
-        flex-direction: column;
-        gap: $sp4;
-        padding: $sp5;
-        height: 100%;
-        overflow: hidden;
-        position: relative;
-
-        @include mobile() {
-            padding: $sp3;
-            gap: $sp3;
-        }
-    }
-
-    .header {
-        .title-row {
-            display: flex;
-            align-items: center;
-            gap: $sp4;
-            margin-bottom: $sp5;
-
-            @include size-below(lg) {
-                margin-bottom: $sp3;
-                justify-content: space-between;
-            }
-
-            .title {
-                display: flex;
-                gap: $sp3;
-                align-items: center;
-
-                h4 {
-                    @include font(bold, normal, fs-160, 38);
-                    flex: auto;
-
-                    @include mobile() {
-                        @include font(bold, normal, fs-140, 38);
-                    }
-                }
-            }
-
-            .search {
-                flex: auto;
-            }
-
-            .buttons {
-                display: flex;
-                align-items: center;
-                justify-content: flex-end;
-            }
-        }
-
-        .subtitle-row {
-            display: flex;
-            justify-content: space-between;
-            gap: $sp4;
-
-            @include size-below(lg) {
-                flex-direction: column;
-            }
-        }
-    }
-
-    .communities-wrapper {
-        @include nice-scrollbar();
-        flex: auto;
-        height: 3000px;
-    }
-
-    .communities {
-        display: grid;
-        grid-template-columns: repeat(4, 1fr);
-        grid-gap: $sp5;
-        margin-bottom: $sp5;
-
-        @include size-below(xxl) {
-            grid-gap: $sp4;
-        }
-
-        @include size-below(xl) {
-            grid-template-columns: repeat(3, 1fr);
-        }
-
-        @include size-below(md) {
-            grid-template-columns: repeat(2, 1fr);
-        }
-
-        @include size-below(sm) {
-            grid-template-columns: repeat(1, 1fr);
-        }
-
-        &.loading,
-        &.empty {
-            height: 100%;
-            grid-template-columns: repeat(1, 1fr);
-            margin-bottom: 0;
-        }
-    }
-
-    .more {
-        text-align: center;
-    }
-
-    $size: 200px;
-
-    .loading {
-        width: $size;
-        margin: auto;
-    }
-
-    .no-match {
-        .header {
-            @include font(bold, normal, fs-160, 38);
-        }
-        .sub-header {
-            @include font(book, normal, fs-100, 38);
-            color: var(--txt-light);
-        }
-        margin: auto;
-        text-align: center;
-    }
-
-    .fab {
-        transition: opacity ease-in-out 300ms;
-        position: absolute;
-        @include z-index("fab");
-        right: 20px;
-        bottom: 20px;
-        opacity: 0;
-        pointer-events: none;
-
-        &.show {
-            opacity: 1;
-            pointer-events: all;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/communities/explore/Filters.svelte b/frontend/app/src/components/home/communities/explore/Filters.svelte
deleted file mode 100644
index e409cc9674..0000000000
--- a/frontend/app/src/components/home/communities/explore/Filters.svelte
+++ /dev/null
@@ -1,69 +0,0 @@
-<script lang="ts">
-    import { communityFiltersStore, iconSize, mobileWidth, OpenChat } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import Close from "svelte-material-icons/Close.svelte";
-    import { i18nKey, supportedLanguages } from "../../../../i18n/i18n";
-    import Checkbox from "../../../Checkbox.svelte";
-    import CollapsibleCard from "../../../CollapsibleCard.svelte";
-    import HoverIcon from "../../../HoverIcon.svelte";
-    import SectionHeader from "../../../SectionHeader.svelte";
-    import Translatable from "../../../Translatable.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        onClose: () => void;
-    }
-
-    let { onClose }: Props = $props();
-</script>
-
-<SectionHeader shadow flush={$mobileWidth}>
-    <h4><Translatable resourceKey={i18nKey("communities.filters")} /></h4>
-    <span title={$_("close")} class="close" on:click={onClose}>
-        <HoverIcon>
-            <Close size={$iconSize} color={"var(--icon-txt)"} />
-        </HoverIcon>
-    </span>
-</SectionHeader>
-
-<div class="community-filters">
-    <CollapsibleCard open headerText={i18nKey("communities.primaryLanguage")}>
-        {#each supportedLanguages as lang}
-            <div class="toggle">
-                <Checkbox
-                    id={`language_${lang.code}`}
-                    onChange={() => client.toggleCommunityFilterLanguage(lang.code)}
-                    label={i18nKey(lang.name)}
-                    checked={$communityFiltersStore.has(lang.code)} />
-            </div>
-        {/each}
-    </CollapsibleCard>
-</div>
-
-<style lang="scss">
-    h4 {
-        flex: 1;
-        margin: 0;
-        @include font-size(fs-120);
-    }
-    .close {
-        flex: 0 0 30px;
-    }
-
-    .toggle {
-        margin-bottom: $sp4;
-    }
-
-    .community-filters {
-        background-color: var(--bg);
-        padding: 0 $sp4;
-        padding-bottom: 0;
-        @include nice-scrollbar();
-
-        @include mobile() {
-            height: 100%;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/createOrUpdateGroup/GroupDetails.svelte b/frontend/app/src/components/home/createOrUpdateGroup/GroupDetails.svelte
deleted file mode 100644
index d5c08e33d3..0000000000
--- a/frontend/app/src/components/home/createOrUpdateGroup/GroupDetails.svelte
+++ /dev/null
@@ -1,128 +0,0 @@
-<script lang="ts">
-    import EditableAvatar from "@src/components/EditableAvatar.svelte";
-    import type { CandidateGroupChat } from "@client";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Input from "../../Input.svelte";
-    import Legend from "../../Legend.svelte";
-    import TextArea from "../../TextArea.svelte";
-    import Translatable from "../../Translatable.svelte";
-
-    const MIN_LENGTH = 3;
-    const MAX_LENGTH = 40;
-    const MAX_URL_LENGTH = 500;
-    const MAX_DESC_LENGTH = 1024;
-
-    interface Props {
-        busy: boolean;
-        candidateGroup: CandidateGroupChat;
-        valid: boolean;
-        embeddedContent: boolean;
-    }
-
-    let {
-        busy,
-        candidateGroup = $bindable(),
-        valid = $bindable(),
-        embeddedContent,
-    }: Props = $props();
-
-    $effect(() => {
-        let urlValid = true;
-        if (embeddedContent) {
-            if (candidateGroup.externalUrl === undefined) {
-                urlValid = false;
-            } else {
-                try {
-                    new URL(candidateGroup.externalUrl);
-                } catch (_) {
-                    urlValid = false;
-                }
-            }
-        }
-        const isValid =
-            candidateGroup.name.length >= MIN_LENGTH &&
-            candidateGroup.name.length <= MAX_LENGTH &&
-            urlValid;
-
-        if (isValid !== valid) {
-            valid = isValid;
-        }
-    });
-
-    function groupAvatarSelected(detail: { url: string; data: Uint8Array }) {
-        candidateGroup.avatar = {
-            blobUrl: detail.url,
-            blobData: detail.data,
-        };
-    }
-</script>
-
-<section>
-    <Legend label={i18nKey("group.image", undefined, candidateGroup.level)} />
-    <div class="photo">
-        <EditableAvatar
-            overlayIcon
-            image={candidateGroup.avatar?.blobUrl}
-            onImageSelected={groupAvatarSelected} />
-    </div>
-</section>
-
-<section>
-    <Legend label={i18nKey("group.name", undefined, candidateGroup.level)} required />
-    <Input
-        autofocus
-        disabled={busy}
-        bind:value={candidateGroup.name}
-        minlength={MIN_LENGTH}
-        maxlength={MAX_LENGTH}
-        countdown
-        placeholder={i18nKey("newGroupName", undefined, candidateGroup.level, true)} />
-</section>
-
-{#if embeddedContent}
-    <section>
-        <Legend label={i18nKey("group.externalUrl", undefined, candidateGroup.level)} required />
-        <Input
-            disabled={busy}
-            bind:value={candidateGroup.externalUrl}
-            minlength={MIN_LENGTH}
-            maxlength={MAX_URL_LENGTH}
-            placeholder={i18nKey(
-                "group.externalUrlPlaceholder",
-                undefined,
-                candidateGroup.level,
-                true,
-            )} />
-        <p class="smallprint">
-            <Translatable resourceKey={i18nKey("group.externalUrlWarning")} />
-        </p>
-    </section>
-{/if}
-
-<section>
-    <Legend label={i18nKey("group.description", undefined, candidateGroup.level)} />
-    <TextArea
-        rows={4}
-        disabled={busy}
-        bind:value={candidateGroup.description}
-        maxlength={MAX_DESC_LENGTH}
-        placeholder={i18nKey("newGroupDesc", undefined, candidateGroup.level, true)} />
-</section>
-
-<style lang="scss">
-    .photo {
-        text-align: center;
-        padding: $sp4 0;
-        margin-bottom: $sp3;
-    }
-
-    section {
-        margin-bottom: $sp5;
-    }
-
-    .smallprint {
-        @include font(light, normal, fs-70);
-        color: var(--txt-light);
-        margin-bottom: $sp4;
-    }
-</style>
diff --git a/frontend/app/src/components/home/groupdetails/AdvancedSection.svelte b/frontend/app/src/components/home/groupdetails/AdvancedSection.svelte
deleted file mode 100644
index c71bbc2289..0000000000
--- a/frontend/app/src/components/home/groupdetails/AdvancedSection.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script lang="ts">
-    import Button from "../../Button.svelte";
-    import ButtonGroup from "../../ButtonGroup.svelte";
-    import { publish, type MultiUserChat } from "@client";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Translatable from "../../Translatable.svelte";
-
-    interface Props {
-        group: MultiUserChat;
-    }
-
-    let { group }: Props = $props();
-
-    function deleteGroup() {
-        publish("deleteGroup", {
-            kind: "delete",
-            chatId: group.id,
-            level: group.level,
-            doubleCheck: {
-                challenge: i18nKey("typeGroupName", { name: group.name }),
-                response: i18nKey(group.name),
-            },
-        });
-    }
-</script>
-
-<ButtonGroup align="start">
-    <Button danger onClick={deleteGroup}
-        ><Translatable resourceKey={i18nKey("deleteGroup", undefined, group.level)} /></Button>
-</ButtonGroup>
diff --git a/frontend/app/src/components/home/groupdetails/BlockedUser.svelte b/frontend/app/src/components/home/groupdetails/BlockedUser.svelte
deleted file mode 100644
index 3de3bf2a76..0000000000
--- a/frontend/app/src/components/home/groupdetails/BlockedUser.svelte
+++ /dev/null
@@ -1,57 +0,0 @@
-<script lang="ts">
-    import { iconSize } from "@client";
-    import type { UserSummary } from "@shared";
-    import Cancel from "svelte-material-icons/Cancel.svelte";
-    import ChevronDown from "svelte-material-icons/ChevronDown.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import HoverIcon from "../../HoverIcon.svelte";
-    import Menu from "../../Menu.svelte";
-    import MenuIcon from "../../MenuIcon.svelte";
-    import MenuItem from "../../MenuItem.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import User from "./User.svelte";
-
-    interface Props {
-        user: UserSummary;
-        canUnblockUser?: boolean;
-        searchTerm?: string;
-        me?: boolean;
-        onUnblockUser: (userId: string) => void;
-    }
-
-    let {
-        user,
-        canUnblockUser = false,
-        searchTerm = "",
-        me = false,
-        onUnblockUser,
-    }: Props = $props();
-</script>
-
-<User {me} {user} {searchTerm}>
-    {#if canUnblockUser}
-        <span class="menu">
-            <MenuIcon position={"bottom"} align={"end"}>
-                {#snippet menuIcon()}
-                    <HoverIcon>
-                        <ChevronDown size={$iconSize} color={"var(--icon-txt)"} />
-                    </HoverIcon>
-                {/snippet}
-                {#snippet menuItems()}
-                    <Menu>
-                        <MenuItem onclick={() => onUnblockUser(user.userId)}>
-                            {#snippet icon()}
-                                <Cancel size={$iconSize} color={"var(--icon-inverted-txt)"} />
-                            {/snippet}
-                            {#snippet text()}
-                                <div>
-                                    <Translatable resourceKey={i18nKey("unblockUser")} />
-                                </div>
-                            {/snippet}
-                        </MenuItem>
-                    </Menu>
-                {/snippet}
-            </MenuIcon>
-        </span>
-    {/if}
-</User>
diff --git a/frontend/app/src/components/home/groupdetails/DirectChatDetails.svelte b/frontend/app/src/components/home/groupdetails/DirectChatDetails.svelte
deleted file mode 100644
index bd52c6c895..0000000000
--- a/frontend/app/src/components/home/groupdetails/DirectChatDetails.svelte
+++ /dev/null
@@ -1,319 +0,0 @@
-<script lang="ts">
-    import Button from "@src/components/Button.svelte";
-    import ButtonGroup from "@src/components/ButtonGroup.svelte";
-    import Checkbox from "@src/components/Checkbox.svelte";
-    import HoverIcon from "@src/components/HoverIcon.svelte";
-    import HeartMinus from "@src/components/icons/HeartMinus.svelte";
-    import HeartPlus from "@src/components/icons/HeartPlus.svelte";
-    import SectionHeader from "@src/components/SectionHeader.svelte";
-    import Translatable from "@src/components/Translatable.svelte";
-    import { i18nKey } from "@src/i18n/i18n";
-    import { toastStore } from "@src/stores/toast";
-    import { activeVideoCall } from "@src/stores/video";
-    import { currentTheme } from "@src/theme/themes";
-    import { darkenHexColour } from "@src/theme/utils";
-    import type { DirectChatSummary, OptionUpdate, PublicProfile } from "@client";
-    import {
-        allUsersStore,
-        blockedUsersStore,
-        chatIdentifiersEqual,
-        favouritesStore,
-        iconSize,
-        mobileWidth,
-        OpenChat,
-        publish,
-    } from "@client";
-    import { getContext, onMount } from "svelte";
-    import { _ } from "svelte-i18n";
-    import CancelIcon from "svelte-material-icons/Cancel.svelte";
-    import Close from "svelte-material-icons/Close.svelte";
-    import Headphones from "svelte-material-icons/Headphones.svelte";
-    import PhoneHangup from "svelte-material-icons/PhoneHangup.svelte";
-    import DurationPicker from "../DurationPicker.svelte";
-    import UserProfileCard from "../profile/UserProfileCard.svelte";
-
-    const client = getContext<OpenChat>("client");
-    const ONE_WEEK = 604800000n;
-
-    interface Props {
-        chat: DirectChatSummary;
-        onClose: () => void;
-    }
-
-    let { onClose, chat }: Props = $props();
-
-    let blocked = $derived($blockedUsersStore.has(chat.them.userId));
-    let user = $derived($allUsersStore.get(chat.them.userId));
-    let profile = $state<PublicProfile | undefined>();
-    let disappearingMessages = $state(chat.eventsTTL !== undefined);
-    let eventsTTL = $state(chat.eventsTTL);
-    let originalTTL = $state(chat.eventsTTL);
-    let saving = $state(false);
-    let dirty = $derived(eventsTTL !== chat.eventsTTL);
-    let darkenedCall = $derived(darkenHexColour($currentTheme.vote.yes.color, 20));
-    let videoCallInProgress = $derived(chat.videoCallInProgress !== undefined);
-    let blockLabel = $derived(blocked ? i18nKey("Unblock") : i18nKey("Block"));
-    let inCall = $derived(
-        videoCallInProgress &&
-            $activeVideoCall !== undefined &&
-            chatIdentifiersEqual($activeVideoCall.chatId, chat.id),
-    );
-    let videoMenuText = $derived(
-        videoCallInProgress ? (inCall ? i18nKey("Leave") : i18nKey("Join")) : i18nKey("Start"),
-    );
-
-    onMount(() => {
-        client.getPublicProfile(chat.them.userId).subscribe({
-            onResult: (res) => {
-                profile = res;
-            },
-        });
-    });
-
-    $effect(() => {
-        if (chat.eventsTTL !== originalTTL) {
-            eventsTTL = originalTTL = chat.eventsTTL;
-            disappearingMessages = chat.eventsTTL !== undefined;
-        }
-    });
-
-    $effect(() => {
-        dirty = eventsTTL !== chat.eventsTTL;
-    });
-
-    function toggleDisappearingMessages() {
-        disappearingMessages = !disappearingMessages;
-        if (!disappearingMessages) {
-            eventsTTL = undefined;
-        } else {
-            eventsTTL = ONE_WEEK;
-        }
-    }
-
-    function getUpdate(): OptionUpdate<bigint> {
-        if (eventsTTL !== undefined) {
-            return { value: eventsTTL };
-        } else if (chat.eventsTTL !== undefined) {
-            return "set_to_none";
-        } else {
-            return undefined;
-        }
-    }
-
-    async function updateDirectChatDetails(e: Event) {
-        e.preventDefault();
-        if (!dirty) return;
-
-        saving = true;
-
-        const success = await client
-            .updateDirectChatSettings(chat, getUpdate())
-            .finally(() => (saving = false));
-        if (success) {
-            originalTTL = originalTTL = chat.eventsTTL;
-        }
-    }
-    function addToFavourites() {
-        client.addToFavourites(chat.id);
-    }
-
-    function removeFromFavourites() {
-        client.removeFromFavourites(chat.id);
-    }
-
-    function startVideoCall() {
-        if (inCall) {
-            publish("hangup");
-        } else {
-            publish("startVideoCall", {
-                chatId: chat.id,
-                callType: "default",
-                join: videoCallInProgress,
-            });
-        }
-    }
-
-    function toggleBlocked() {
-        if (blocked) {
-            unblockUser();
-        } else {
-            blockUser();
-        }
-    }
-
-    function blockUser() {
-        client.blockUserFromDirectChat(chat.them.userId).then((success) => {
-            if (success) {
-                toastStore.showSuccessToast(i18nKey("blockUserSucceeded"));
-            } else {
-                toastStore.showFailureToast(i18nKey("blockUserFailed"));
-            }
-        });
-    }
-
-    function unblockUser() {
-        client.unblockUserFromDirectChat(chat.them.userId).then((success) => {
-            if (success) {
-                toastStore.showSuccessToast(i18nKey("unblockUserSucceeded"));
-            } else {
-                toastStore.showFailureToast(i18nKey("unblockUserFailed"));
-            }
-        });
-    }
-</script>
-
-<SectionHeader border={false} flush={!$mobileWidth} shadow>
-    {#if !$favouritesStore.has(chat.id)}
-        <HoverIcon onclick={addToFavourites}>
-            <HeartPlus size={$iconSize} color={"var(--menu-warn)"} />
-        </HoverIcon>
-    {:else}
-        <HoverIcon onclick={removeFromFavourites}>
-            <HeartMinus size={$iconSize} color={"var(--menu-warn)"} />
-        </HoverIcon>
-    {/if}
-    <h4>
-        <Translatable
-            resourceKey={i18nKey(`Direct chat with ${client.getDisplayName(chat.them.userId)}`)} />
-    </h4>
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <span title={$_("close")} class="close" onclick={onClose}>
-        <HoverIcon>
-            <Close size={$iconSize} color={"var(--icon-txt)"} />
-        </HoverIcon>
-    </span>
-</SectionHeader>
-
-{#if user !== undefined}
-    <div class="wrapper">
-        <div class="user-form">
-            {#if profile}
-                <div class="profile-card">
-                    <UserProfileCard {profile} {user} userProfileMode></UserProfileCard>
-                </div>
-            {/if}
-            <div style={`--darkened-call: ${darkenedCall}`} class="controls">
-                <ButtonGroup align={"fill"}>
-                    <Button onClick={startVideoCall} cls="call-user icon-button">
-                        {#if inCall}
-                            <PhoneHangup size={$iconSize} color={"var(--button-txt)"} />
-                        {:else}
-                            <Headphones size={$iconSize} color={"var(--button-txt)"} />
-                        {/if}
-                        <Translatable resourceKey={videoMenuText} />
-                    </Button>
-                    <Button onClick={toggleBlocked} cls="icon-button" danger>
-                        <CancelIcon size={$iconSize} color={"var(--button-txt)"} />
-                        <Translatable resourceKey={blockLabel} />
-                    </Button>
-                </ButtonGroup>
-            </div>
-            <div class="disappearing">
-                <Checkbox
-                    id="disappearing-messages"
-                    onChange={toggleDisappearingMessages}
-                    label={i18nKey("disappearingMessages.label")}
-                    align={"start"}
-                    checked={disappearingMessages}>
-                    <div class="section-title disappear">
-                        <Translatable resourceKey={i18nKey("disappearingMessages.label")} />
-                    </div>
-                </Checkbox>
-                {#if disappearingMessages}
-                    <div class="picker">
-                        <DurationPicker bind:milliseconds={eventsTTL} />
-                    </div>
-                {/if}
-            </div>
-        </div>
-        <div class="full-width-btn">
-            <Button
-                loading={saving}
-                disabled={!dirty || saving}
-                fill
-                onClick={updateDirectChatDetails}
-                ><Translatable resourceKey={i18nKey("update")} /></Button>
-        </div>
-    </div>
-{/if}
-
-<style lang="scss">
-    .wrapper {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        height: 100%;
-    }
-    .user-form {
-        @include nice-scrollbar();
-        padding: $sp3 $sp5 0 $sp5;
-        @include mobile() {
-            padding: $sp3 $sp4 0 $sp4;
-        }
-        display: flex;
-        flex-direction: column;
-        gap: $sp4;
-        align-items: center;
-    }
-
-    h4 {
-        flex: 1;
-        margin: 0;
-        text-align: center;
-        @include font-size(fs-120);
-    }
-    .close {
-        flex: 0 0 30px;
-    }
-
-    .bio {
-        overflow-wrap: anywhere;
-    }
-
-    .disappearing {
-        align-self: flex-start;
-    }
-
-    .full-width-btn {
-        align-self: stretch;
-        margin-top: $sp4;
-        padding: 0 $sp4 $sp4 $sp4;
-        @include mobile() {
-            padding: 0 $sp3 $sp3 $sp3;
-        }
-    }
-
-    .controls {
-        align-self: stretch;
-        margin-bottom: $sp5;
-    }
-
-    .picker {
-        margin-top: $sp3;
-    }
-
-    .user-form {
-        :global(button.icon-button) {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            gap: $sp4;
-        }
-
-        .profile-card {
-            width: 100%;
-            margin-bottom: $sp4;
-        }
-
-        :global(button.call-user) {
-            background: var(--vote-yes-color);
-            color: var(--toast-failure-txt);
-            @media (hover: hover) {
-                &:hover {
-                    background: var(--darkened-call);
-                }
-            }
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/groupdetails/InvitedUser.svelte b/frontend/app/src/components/home/groupdetails/InvitedUser.svelte
deleted file mode 100644
index bdf601e216..0000000000
--- a/frontend/app/src/components/home/groupdetails/InvitedUser.svelte
+++ /dev/null
@@ -1,61 +0,0 @@
-<script lang="ts">
-    import { iconSize } from "@client";
-    import type { UserSummary } from "@shared";
-    import Cancel from "svelte-material-icons/Cancel.svelte";
-    import ChevronDown from "svelte-material-icons/ChevronDown.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import HoverIcon from "../../HoverIcon.svelte";
-    import Menu from "../../Menu.svelte";
-    import MenuIcon from "../../MenuIcon.svelte";
-    import MenuItem from "../../MenuItem.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import User from "./User.svelte";
-
-    interface Props {
-        user: UserSummary;
-        canUninviteUser?: boolean;
-        searchTerm?: string;
-        me?: boolean;
-        onCancelInvite: (userId: string) => void;
-    }
-
-    let {
-        user,
-        canUninviteUser = false,
-        searchTerm = "",
-        me = false,
-        onCancelInvite,
-    }: Props = $props();
-
-    function cancelInvite() {
-        onCancelInvite(user.userId);
-    }
-</script>
-
-<User {me} {user} {searchTerm}>
-    {#if canUninviteUser}
-        <span class="menu">
-            <MenuIcon position={"bottom"} align={"end"}>
-                {#snippet menuIcon()}
-                    <HoverIcon>
-                        <ChevronDown size={$iconSize} color={"var(--icon-txt)"} />
-                    </HoverIcon>
-                {/snippet}
-                {#snippet menuItems()}
-                    <Menu>
-                        <MenuItem onclick={cancelInvite}>
-                            {#snippet icon()}
-                                <Cancel size={$iconSize} color={"var(--icon-inverted-txt)"} />
-                            {/snippet}
-                            {#snippet text()}
-                                <div>
-                                    <Translatable resourceKey={i18nKey("cancelInvite")} />
-                                </div>
-                            {/snippet}
-                        </MenuItem>
-                    </Menu>
-                {/snippet}
-            </MenuIcon>
-        </span>
-    {/if}
-</User>
diff --git a/frontend/app/src/components/home/groupdetails/LapsedUser.svelte b/frontend/app/src/components/home/groupdetails/LapsedUser.svelte
deleted file mode 100644
index 92985bb9e8..0000000000
--- a/frontend/app/src/components/home/groupdetails/LapsedUser.svelte
+++ /dev/null
@@ -1,68 +0,0 @@
-<script lang="ts">
-    import { iconSize } from "@client";
-    import type { UserSummary } from "@shared";
-    import Cancel from "svelte-material-icons/Cancel.svelte";
-    import ChevronDown from "svelte-material-icons/ChevronDown.svelte";
-    import MinusCircleOutline from "svelte-material-icons/MinusCircleOutline.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import HoverIcon from "../../HoverIcon.svelte";
-    import Menu from "../../Menu.svelte";
-    import MenuIcon from "../../MenuIcon.svelte";
-    import MenuItem from "../../MenuItem.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import User from "./User.svelte";
-
-    interface Props {
-        user: UserSummary;
-        searchTerm?: string;
-        me?: boolean;
-        onBlockUser?: (userId: string) => void;
-        onRemoveMember?: (userId: string) => void;
-    }
-
-    let { user, searchTerm = "", me = false, onBlockUser, onRemoveMember }: Props = $props();
-</script>
-
-<User {me} {user} {searchTerm}>
-    {#if onBlockUser || onRemoveMember}
-        <span class="menu">
-            <MenuIcon position={"bottom"} align={"end"}>
-                {#snippet menuIcon()}
-                    <HoverIcon>
-                        <ChevronDown size={$iconSize} color={"var(--icon-txt)"} />
-                    </HoverIcon>
-                {/snippet}
-                {#snippet menuItems()}
-                    <Menu>
-                        {#if onBlockUser}
-                            <MenuItem onclick={() => onBlockUser(user.userId)}>
-                                {#snippet icon()}
-                                    <Cancel size={$iconSize} color={"var(--icon-inverted-txt)"} />
-                                {/snippet}
-                                {#snippet text()}
-                                    <div>
-                                        <Translatable resourceKey={i18nKey("blockUser")} />
-                                    </div>
-                                {/snippet}
-                            </MenuItem>
-                        {/if}
-                        {#if onRemoveMember}
-                            <MenuItem onclick={() => onRemoveMember(user.userId)}>
-                                {#snippet icon()}
-                                    <MinusCircleOutline
-                                        size={$iconSize}
-                                        color={"var(--icon-inverted-txt)"} />
-                                {/snippet}
-                                {#snippet text()}
-                                    <div>
-                                        <Translatable resourceKey={i18nKey("remove")} />
-                                    </div>
-                                {/snippet}
-                            </MenuItem>
-                        {/if}
-                    </Menu>
-                {/snippet}
-            </MenuIcon>
-        </span>
-    {/if}
-</User>
diff --git a/frontend/app/src/components/home/groupdetails/Member.svelte b/frontend/app/src/components/home/groupdetails/Member.svelte
deleted file mode 100644
index 8f9f5ce2f5..0000000000
--- a/frontend/app/src/components/home/groupdetails/Member.svelte
+++ /dev/null
@@ -1,245 +0,0 @@
-<script lang="ts">
-    import {
-        iconSize,
-        type FullMember,
-        type MemberRole,
-        ROLE_ADMIN,
-        ROLE_MEMBER,
-        ROLE_MODERATOR,
-        ROLE_OWNER,
-        roleAsText,
-    } from "@client";
-    import { _ } from "svelte-i18n";
-    import AccountPlusOutline from "svelte-material-icons/AccountPlusOutline.svelte";
-    import AccountRemoveOutline from "svelte-material-icons/AccountRemoveOutline.svelte";
-    import Cancel from "svelte-material-icons/Cancel.svelte";
-    import ChevronDown from "svelte-material-icons/ChevronDown.svelte";
-    import MinusCircleOutline from "svelte-material-icons/MinusCircleOutline.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import HoverIcon from "../../HoverIcon.svelte";
-    import Menu from "../../Menu.svelte";
-    import MenuIcon from "../../MenuIcon.svelte";
-    import MenuItem from "../../MenuItem.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import User from "./User.svelte";
-
-    interface Props {
-        me: boolean;
-        member: FullMember;
-        canPromoteToOwner?: boolean;
-        canPromoteToAdmin?: boolean;
-        canDemoteToAdmin?: boolean;
-        canPromoteToModerator?: boolean;
-        canDemoteToModerator?: boolean;
-        canDemoteToMember?: boolean;
-        canRemoveMember?: boolean;
-        canBlockUser?: boolean;
-        searchTerm?: string;
-        onRemoveMember?: (userId: string) => void;
-        onChangeRole?: (args: { userId: string; newRole: MemberRole; oldRole: MemberRole }) => void;
-        onBlockUser?: (userId: string) => void;
-    }
-
-    let {
-        me,
-        member,
-        canPromoteToOwner = false,
-        canPromoteToAdmin = false,
-        canDemoteToAdmin = false,
-        canPromoteToModerator = false,
-        canDemoteToModerator = false,
-        canDemoteToMember = false,
-        canRemoveMember = false,
-        canBlockUser = false,
-        searchTerm = "",
-        onRemoveMember,
-        onChangeRole,
-        onBlockUser,
-    }: Props = $props();
-
-    // if search term is !== "", split the username into three parts [prefix, match, postfix]
-
-    let showMenu = $derived(
-        canPromoteToOwner ||
-            canPromoteToAdmin ||
-            canDemoteToAdmin ||
-            canPromoteToModerator ||
-            canDemoteToModerator ||
-            canDemoteToMember ||
-            canRemoveMember ||
-            canBlockUser,
-    );
-
-    let ownerText = $derived($_(roleAsText(ROLE_OWNER)));
-    let adminText = $derived($_(roleAsText(ROLE_ADMIN)));
-    let moderatorText = $derived($_(roleAsText(ROLE_MODERATOR)));
-    let memberText = $derived($_(roleAsText(ROLE_MEMBER)));
-
-    function removeUser() {
-        onRemoveMember?.(member.userId);
-    }
-
-    function changeRole(role: MemberRole) {
-        onChangeRole?.({
-            userId: member.userId,
-            newRole: role,
-            oldRole: member.role,
-        });
-    }
-
-    function blockUser() {
-        onBlockUser?.(member.userId);
-    }
-</script>
-
-<User
-    user={member}
-    {me}
-    {searchTerm}
-    role={member.role > ROLE_MEMBER
-        ? roleAsText(member.role)
-        : undefined}>
-    {#if showMenu}
-        <span class="menu">
-            <MenuIcon position={"bottom"} align={"end"}>
-                {#snippet menuIcon()}
-                    <HoverIcon>
-                        <ChevronDown size={$iconSize} color={"var(--icon-txt)"} />
-                    </HoverIcon>
-                {/snippet}
-                {#snippet menuItems()}
-                    <Menu>
-                        {#if canPromoteToOwner}
-                            <MenuItem onclick={() => changeRole(ROLE_OWNER)}>
-                                {#snippet icon()}
-                                    <AccountPlusOutline
-                                        size={$iconSize}
-                                        color={"var(--icon-inverted-txt)"} />
-                                {/snippet}
-                                {#snippet text()}
-                                    <div>
-                                        <Translatable
-                                            resourceKey={i18nKey("promoteTo", {
-                                                role: ownerText,
-                                            })} />
-                                    </div>
-                                {/snippet}
-                            </MenuItem>
-                        {/if}
-                        {#if canPromoteToAdmin}
-                            <MenuItem onclick={() => changeRole(ROLE_ADMIN)}>
-                                {#snippet icon()}
-                                    <AccountPlusOutline
-                                        size={$iconSize}
-                                        color={"var(--icon-inverted-txt)"} />
-                                {/snippet}
-                                {#snippet text()}
-                                    <div>
-                                        <Translatable
-                                            resourceKey={i18nKey("promoteTo", {
-                                                role: adminText,
-                                            })} />
-                                    </div>
-                                {/snippet}
-                            </MenuItem>
-                        {/if}
-                        {#if canDemoteToAdmin}
-                            <MenuItem onclick={() => changeRole(ROLE_ADMIN)}>
-                                {#snippet icon()}
-                                    <AccountRemoveOutline
-                                        size={$iconSize}
-                                        color={"var(--icon-inverted-txt)"} />
-                                {/snippet}
-                                {#snippet text()}
-                                    <div>
-                                        <Translatable
-                                            resourceKey={i18nKey("demoteTo", {
-                                                role: adminText,
-                                            })} />
-                                    </div>
-                                {/snippet}
-                            </MenuItem>
-                        {/if}
-                        {#if canPromoteToModerator}
-                            <MenuItem onclick={() => changeRole(ROLE_MODERATOR)}>
-                                {#snippet icon()}
-                                    <AccountPlusOutline
-                                        size={$iconSize}
-                                        color={"var(--icon-inverted-txt)"} />
-                                {/snippet}
-                                {#snippet text()}
-                                    <div>
-                                        <Translatable
-                                            resourceKey={i18nKey("promoteTo", {
-                                                role: moderatorText,
-                                            })} />
-                                    </div>
-                                {/snippet}
-                            </MenuItem>
-                        {/if}
-                        {#if canDemoteToModerator}
-                            <MenuItem onclick={() => changeRole(ROLE_MODERATOR)}>
-                                {#snippet icon()}
-                                    <AccountRemoveOutline
-                                        size={$iconSize}
-                                        color={"var(--icon-inverted-txt)"} />
-                                {/snippet}
-                                {#snippet text()}
-                                    <div>
-                                        <Translatable
-                                            resourceKey={i18nKey("demoteTo", {
-                                                role: moderatorText,
-                                            })} />
-                                    </div>
-                                {/snippet}
-                            </MenuItem>
-                        {/if}
-                        {#if canDemoteToMember}
-                            <MenuItem onclick={() => changeRole(ROLE_MEMBER)}>
-                                {#snippet icon()}
-                                    <AccountRemoveOutline
-                                        size={$iconSize}
-                                        color={"var(--icon-inverted-txt)"} />
-                                {/snippet}
-                                {#snippet text()}
-                                    <div>
-                                        <Translatable
-                                            resourceKey={i18nKey("demoteTo", {
-                                                role: memberText,
-                                            })} />
-                                    </div>
-                                {/snippet}
-                            </MenuItem>
-                        {/if}
-                        {#if canBlockUser}
-                            <MenuItem onclick={blockUser}>
-                                {#snippet icon()}
-                                    <Cancel size={$iconSize} color={"var(--icon-inverted-txt)"} />
-                                {/snippet}
-                                {#snippet text()}
-                                    <div>
-                                        <Translatable resourceKey={i18nKey("blockUser")} />
-                                    </div>
-                                {/snippet}
-                            </MenuItem>
-                        {/if}
-                        {#if canRemoveMember}
-                            <MenuItem onclick={removeUser}>
-                                {#snippet icon()}
-                                    <MinusCircleOutline
-                                        size={$iconSize}
-                                        color={"var(--icon-inverted-txt)"} />
-                                {/snippet}
-                                {#snippet text()}
-                                    <div>
-                                        <Translatable resourceKey={i18nKey("remove")} />
-                                    </div>
-                                {/snippet}
-                            </MenuItem>
-                        {/if}
-                    </Menu>
-                {/snippet}
-            </MenuIcon>
-        </span>
-    {/if}
-</User>
diff --git a/frontend/app/src/components/home/groupdetails/User.svelte b/frontend/app/src/components/home/groupdetails/User.svelte
deleted file mode 100644
index b348f7b403..0000000000
--- a/frontend/app/src/components/home/groupdetails/User.svelte
+++ /dev/null
@@ -1,167 +0,0 @@
-<script lang="ts">
-    import type { OpenChat } from "@client";
-    import {
-        AvatarSize,
-        selectedChatWebhooksStore,
-        selectedCommunityMembersStore,
-    } from "@client";
-    import type { UserSummary } from "@shared";
-    import { getContext, type Snippet } from "svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Avatar from "../../Avatar.svelte";
-    import FilteredUsername from "@shared_components/FilteredUsername.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import type { ProfileLinkClickedEvent } from "@webcomponents/profileLink";
-    import Badges from "../profile/Badges.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        user: UserSummary;
-        me?: boolean;
-        searchTerm?: string;
-        role?: string | undefined;
-        profile?: boolean;
-        children?: Snippet;
-        onClick?: () => void;
-    }
-
-    let {
-        user,
-        me = false,
-        searchTerm = "",
-        role = undefined,
-        profile = true,
-        children,
-        onClick,
-    }: Props = $props();
-
-    // if search term is !== "", split the username into three parts [prefix, match, postfix]
-
-    let hovering = $state(false);
-
-    let displayName = $derived(
-        client.getDisplayName(
-            user.userId,
-            $selectedCommunityMembersStore,
-            $selectedChatWebhooksStore,
-        ),
-    );
-
-    function click(ev: Event) {
-        if (profile) {
-            ev.target?.dispatchEvent(
-                new CustomEvent<ProfileLinkClickedEvent>("profile-clicked", {
-                    detail: {
-                        userId: user.userId,
-                        chatButton: !me,
-                        inGlobalContext: false,
-                    },
-                    bubbles: true,
-                }),
-            );
-        }
-
-        onClick?.();
-    }
-</script>
-
-<!-- svelte-ignore a11y_interactive_supports_focus -->
-<div
-    class="member"
-    class:me
-    onclick={click}
-    role="button"
-    onmouseenter={() => (hovering = true)}
-    onmouseleave={() => (hovering = false)}>
-    <span class="avatar">
-        <Avatar
-            statusBorder={hovering && !me ? "var(--members-hv)" : "transparent"}
-            userId={user.userId}
-            url={client.userAvatarUrl(user)}
-            maxStreak={user.maxStreak >= 365}
-            size={AvatarSize.Default} />
-    </span>
-    <div class="details">
-        <div class="display-name">
-            <h4>
-                <FilteredUsername {searchTerm} username={displayName} {me} />
-                <Badges
-                    uniquePerson={user.isUniquePerson}
-                    diamondStatus={user.diamondStatus}
-                    streak={user.streak}
-                    chitEarned={user.totalChitEarned} />
-            </h4>
-            {#if role !== undefined}
-                <span class="role">
-                    (<Translatable resourceKey={i18nKey(role)} />)
-                </span>
-            {/if}
-        </div>
-        <div class="username">
-            <FilteredUsername {searchTerm} username={"@" + user.username} />
-        </div>
-    </div>
-    {@render children?.()}
-</div>
-
-<style lang="scss">
-    .member {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding: $sp4;
-        transition:
-            background-color ease-in-out 100ms,
-            border-color ease-in-out 100ms;
-        gap: 12px;
-
-        &:not(.me) {
-            cursor: pointer;
-        }
-
-        @media (hover: hover) {
-            &:not(.me):hover {
-                background-color: var(--members-hv);
-            }
-        }
-
-        @include mobile() {
-            padding: $sp3 toRem(10);
-        }
-    }
-    .avatar {
-        flex: 0 0 50px;
-        position: relative;
-    }
-
-    .details {
-        display: flex;
-        flex: 1;
-        flex-direction: column;
-        @include font(medium, normal, fs-100);
-
-        .display-name {
-            display: flex;
-            flex: 1;
-            align-items: center;
-            @include ellipsis();
-
-            h4 {
-                display: flex;
-                align-items: center;
-                gap: $sp2;
-            }
-        }
-
-        .username {
-            font-weight: 200;
-            color: var(--txt-light);
-        }
-    }
-
-    .role {
-        margin: 0 $sp3;
-        @include font(light, normal, fs-70);
-    }
-</style>
diff --git a/frontend/app/src/components/home/insurance/StreakInsuranceBuy.svelte b/frontend/app/src/components/home/insurance/StreakInsuranceBuy.svelte
deleted file mode 100644
index fa976d8b0c..0000000000
--- a/frontend/app/src/components/home/insurance/StreakInsuranceBuy.svelte
+++ /dev/null
@@ -1,190 +0,0 @@
-<script lang="ts">
-    import Button from "@src/components/Button.svelte";
-    import ButtonGroup from "@src/components/ButtonGroup.svelte";
-    import { toastStore } from "@src/stores/toast";
-    import {
-        LEDGER_CANISTER_CHAT,
-        OpenChat,
-        cryptoBalanceStore,
-        cryptoLookup,
-        streakInsuranceStore,
-    } from "@client";
-    import { getContext } from "svelte";
-    import Equal from "svelte-material-icons/Equal.svelte";
-    import Minus from "svelte-material-icons/Minus.svelte";
-    import ShieldHalfFull from "svelte-material-icons/ShieldHalfFull.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import ModalContent from "../../ModalContent.svelte";
-    import Overlay from "../../Overlay.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import BalanceWithRefresh from "../BalanceWithRefresh.svelte";
-
-    const client = getContext<OpenChat>("client");
-    interface Props {
-        onClose: () => void;
-    }
-
-    const MAX_DAYS = 30;
-    const ledger = LEDGER_CANISTER_CHAT;
-    const currentDaysInsured = $streakInsuranceStore.daysInsured;
-    const currentDaysMissed = $streakInsuranceStore.daysMissed;
-    let { onClose }: Props = $props();
-    let tokenDetails = $derived({
-        symbol: $cryptoLookup.get(ledger),
-        balance: $cryptoBalanceStore.get(ledger) ?? 0n,
-    });
-    let additionalDays = $state(0);
-    let confirming = $state(false);
-    let confirmed = $state(false);
-    let refreshingBalance = $state(false);
-    let priceE8s = $derived(client.streakInsurancePrice(currentDaysInsured, additionalDays));
-    let price = $derived(priceE8s / 100_000_000n);
-    let remainingBalance = $derived(tokenDetails.balance - priceE8s);
-    let insufficientBalance = $derived(remainingBalance < 0);
-    let paying = $state(false);
-    let remaining = $derived(currentDaysInsured + additionalDays - currentDaysMissed);
-    let totalDays = $derived(currentDaysInsured + additionalDays);
-    let maxReached = $derived(totalDays >= MAX_DAYS);
-
-    function pay() {
-        paying = true;
-        client
-            .payForStreakInsurance(additionalDays, priceE8s)
-            .then((resp) => {
-                if (resp.kind !== "success") {
-                    toastStore.showFailureToast(i18nKey("streakInsurance.failure"));
-                } else {
-                    onClose();
-                }
-            })
-            .finally(() => (paying = false));
-    }
-</script>
-
-<Overlay {onClose}>
-    <ModalContent fill {onClose}>
-        {#snippet header()}
-            <div class="header">
-                {#if !confirming && !confirmed}
-                    <div class="title">
-                        <ShieldHalfFull size={"1em"} />
-                        <Translatable resourceKey={i18nKey("streakInsurance.topUpTitle")} />
-                    </div>
-                    <div class="balance">
-                        <BalanceWithRefresh
-                            {ledger}
-                            value={remainingBalance}
-                            bind:refreshing={refreshingBalance} />
-                    </div>
-                {/if}
-            </div>
-        {/snippet}
-        {#snippet body()}
-            <div class="details">
-                <div class="column">
-                    <div class="label">
-                        <Translatable resourceKey={i18nKey("streakInsurance.bought")}
-                        ></Translatable>
-                    </div>
-                    <div class="number">
-                        {totalDays}
-                    </div>
-                </div>
-
-                <div class="column operator">
-                    <Minus color={"var(--txt-light)"} />
-                </div>
-
-                <div class="column">
-                    <div class="label">
-                        <Translatable resourceKey={i18nKey("streakInsurance.missed")}
-                        ></Translatable>
-                    </div>
-                    <div class="number">
-                        {currentDaysMissed}
-                    </div>
-                </div>
-
-                <div class="column operator">
-                    <Equal color={"var(--txt-light)"} />
-                </div>
-
-                <div class="column">
-                    <div class="label">
-                        <Translatable resourceKey={i18nKey("streakInsurance.remaining")}
-                        ></Translatable>
-                    </div>
-                    <div class="number">
-                        {remaining}
-                    </div>
-                </div>
-            </div>
-        {/snippet}
-        {#snippet footer()}
-            <ButtonGroup nowrap>
-                <Button disabled={paying} small secondary onClick={onClose}>
-                    <Translatable resourceKey={i18nKey("cancel")}></Translatable>
-                </Button>
-                <Button disabled={paying || maxReached} small onClick={() => (additionalDays += 1)}>
-                    <Translatable resourceKey={i18nKey("streakInsurance.addDay")}></Translatable>
-                </Button>
-                <Button
-                    loading={paying}
-                    disabled={paying || additionalDays === 0 || insufficientBalance}
-                    small
-                    onClick={pay}>
-                    <Translatable
-                        resourceKey={i18nKey("streakInsurance.pay", {
-                            price: price.toLocaleString(),
-                        })}></Translatable>
-                </Button>
-            </ButtonGroup>
-        {/snippet}
-    </ModalContent>
-</Overlay>
-
-<style lang="scss">
-    .header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-    }
-
-    .title {
-        display: flex;
-        align-items: center;
-        gap: $sp3;
-    }
-
-    .details {
-        display: flex;
-        gap: $sp3;
-        padding: $sp5;
-        justify-content: space-evenly;
-        max-width: toRem(500);
-        margin: 0 auto;
-        min-width: 75%;
-
-        .column {
-            text-align: center;
-            align-self: center;
-
-            .label {
-                text-transform: uppercase;
-                @include font(light, normal, fs-80);
-                color: var(--txt-light);
-            }
-
-            .number {
-                @include font(bold, normal, fs-240);
-                color: var(--error);
-            }
-        }
-
-        .operator {
-            margin-top: $sp6;
-            @include font(light, normal, fs-200);
-            color: var(--txt-light);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/pinned/PinnedMessage.svelte b/frontend/app/src/components/home/pinned/PinnedMessage.svelte
deleted file mode 100644
index 9d0338a265..0000000000
--- a/frontend/app/src/components/home/pinned/PinnedMessage.svelte
+++ /dev/null
@@ -1,234 +0,0 @@
-<script lang="ts">
-    import { findUser } from "@src/utils/user";
-    import type { ProfileLinkClickedEvent } from "@webcomponents/profileLink";
-    import type { CreatedUser, Message, MultiUserChatIdentifier, OpenChat } from "@client";
-    import {
-        allUsersStore,
-        AvatarSize,
-        chatListScopeStore,
-        fullWidth,
-        mobileWidth,
-        routeForMessage,
-        selectedChatIdStore,
-        selectedChatWebhooksStore,
-        selectedCommunityMembersStore,
-    } from "@client";
-    import { navigate } from "@utils/navigation";
-    import { getContext } from "svelte";
-    import { rtlStore } from "../../../stores/rtl";
-    import Avatar from "../../Avatar.svelte";
-    import Link from "../../Link.svelte";
-    import ChatMessageContent from "../ChatMessageContent.svelte";
-    import IntersectionObserver from "../IntersectionObserver.svelte";
-    import RepliesTo from "../RepliesTo.svelte";
-    import UnresolvedReply from "../UnresolvedReply.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        chatId: MultiUserChatIdentifier;
-        user: CreatedUser;
-        senderId: string;
-        msg: Message;
-        timestamp: bigint;
-    }
-
-    let { chatId, user, senderId, msg, timestamp }: Props = $props();
-
-    let crypto = msg.content.kind === "crypto_content";
-
-    let sender = $derived(findUser(msg.sender, $allUsersStore, $selectedChatWebhooksStore));
-    let username = $derived(
-        client.getDisplayName(
-            msg.sender,
-            $selectedCommunityMembersStore,
-            $selectedChatWebhooksStore,
-        ),
-    );
-    let deleted = $derived(msg.content.kind === "deleted_content");
-    let fill = $derived(client.fillMessage(msg));
-    let me = $derived(user.userId === senderId);
-    let modal = $derived(!$fullWidth);
-
-    function openUserProfile(e: Event) {
-        if (!sender) return;
-
-        e.preventDefault();
-        e.target?.dispatchEvent(
-            new CustomEvent<ProfileLinkClickedEvent>("profile-clicked", {
-                detail: {
-                    userId: sender.userId,
-                    chatButton: !me,
-                    inGlobalContext: false,
-                },
-                bubbles: true,
-            }),
-        );
-    }
-
-    function goToMessageIndex() {
-        if ($selectedChatIdStore !== undefined) {
-            if (modal) {
-                client.popRightPanelHistory();
-            }
-            navigate(
-                routeForMessage(
-                    $chatListScopeStore.kind,
-                    { chatId: $selectedChatIdStore },
-                    msg.messageIndex,
-                ),
-            );
-        }
-    }
-</script>
-
-<div class="message-row" class:me onclick={goToMessageIndex}>
-    <div class="avatar" onclick={openUserProfile}>
-        <Avatar
-            url={client.userAvatarUrl(sender)}
-            userId={sender?.userId}
-            size={$mobileWidth ? AvatarSize.Small : AvatarSize.Default} />
-    </div>
-    <IntersectionObserver>
-        {#snippet children(intersecting)}
-            <div
-                class="message-bubble"
-                class:fill={fill && !deleted}
-                class:me
-                class:deleted
-                class:crypto
-                class:rtl={$rtlStore}>
-                {#if !deleted}
-                    <div class="sender" class:fill class:rtl={$rtlStore}>
-                        <Link underline={"never"} onClick={openUserProfile}>
-                            <h4 class="username" class:fill class:crypto>{username}</h4>
-                        </Link>
-                    </div>
-                {/if}
-                {#if msg.repliesTo !== undefined && !deleted}
-                    {#if msg.repliesTo.kind === "rehydrated_reply_context"}
-                        <RepliesTo {intersecting} readonly {chatId} repliesTo={msg.repliesTo} />
-                    {:else}
-                        <UnresolvedReply />
-                    {/if}
-                {/if}
-
-                <ChatMessageContent
-                    readonly
-                    pinned
-                    {senderId}
-                    {fill}
-                    {timestamp}
-                    failed={false}
-                    messageContext={{ chatId }}
-                    edited={msg.edited}
-                    messageIndex={msg.messageIndex}
-                    messageId={msg.messageId}
-                    {me}
-                    {intersecting}
-                    content={msg.content}
-                    blockLevelMarkdown={msg.blockLevelMarkdown}
-                    ogPreviews={msg.ogPreviews} />
-            </div>
-        {/snippet}
-    </IntersectionObserver>
-</div>
-
-<style lang="scss">
-    :global(.message-bubble .content a) {
-        text-decoration: underline;
-    }
-
-    :global(.message-bubble .content ul) {
-        margin: 0 $sp4;
-    }
-
-    .sender {
-        margin-bottom: $sp1;
-
-        &.fill {
-            position: absolute;
-            background-color: rgba(0, 0, 0, 0.3);
-            color: #fff;
-            padding: $sp2 $sp4;
-            border-radius: 0 0 $sp4 0;
-            z-index: 1;
-
-            &.rtl {
-                right: 0;
-                border-radius: 0 0 0 $sp4;
-            }
-        }
-    }
-
-    $avatar-width: 56px;
-    $avatar-width-mob: 43px;
-
-    .message-row {
-        display: flex;
-        justify-content: flex-start;
-        cursor: pointer;
-        margin-bottom: $sp4;
-        gap: $sp3;
-
-        .avatar {
-            flex: 0 0 $avatar-width;
-            cursor: pointer;
-
-            @include mobile() {
-                flex: 0 0 $avatar-width-mob;
-            }
-        }
-    }
-
-    .message-bubble {
-        $radius: $sp3;
-        $inner-radius: 4px;
-        transition:
-            box-shadow ease-in-out 200ms,
-            background-color ease-in-out 200ms,
-            border ease-in-out 300ms,
-            transform ease-in-out 200ms;
-        position: relative;
-        padding: 6px $sp3 6px $sp3;
-        background-color: var(--currentChat-msg-bg);
-        color: var(--currentChat-msg-txt);
-        @include font(book, normal, fs-100);
-        border-radius: $radius;
-        overflow: hidden;
-        pointer-events: none;
-
-        .username {
-            color: inherit;
-            display: inline;
-        }
-
-        &.me {
-            background-color: var(--currentChat-msg-me-bg);
-            color: var(--currentChat-msg-me-txt);
-        }
-
-        &.fill {
-            padding: 0;
-            overflow: hidden;
-            border: none;
-            line-height: 0;
-        }
-
-        &.deleted {
-            opacity: 0.8;
-        }
-
-        &:after {
-            content: "";
-            display: table;
-            clear: both;
-        }
-    }
-
-    .username {
-        margin: 0;
-        @include font(bold, normal, fs-100);
-        color: #fff;
-    }
-</style>
diff --git a/frontend/app/src/components/home/pinned/PinnedMessages.svelte b/frontend/app/src/components/home/pinned/PinnedMessages.svelte
deleted file mode 100644
index 5de45c3e11..0000000000
--- a/frontend/app/src/components/home/pinned/PinnedMessages.svelte
+++ /dev/null
@@ -1,192 +0,0 @@
-<script lang="ts">
-    import type {
-        EventWrapper,
-        Message,
-        MultiUserChatIdentifier,
-        OpenChat,
-        ReadonlySet,
-    } from "@client";
-    import {
-        currentUserStore,
-        iconSize,
-        messagesRead,
-        selectedChatPinnedMessagesStore,
-        selectedServerChatStore,
-        subscribe,
-    } from "@client";
-    import { isSuccessfulEventsResponse } from "@shared";
-    import { getContext, onMount, tick, untrack } from "svelte";
-    import { _ } from "svelte-i18n";
-    import Close from "svelte-material-icons/Close.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import type { RemoteData } from "../../../utils/remoteData";
-    import HoverIcon from "../../HoverIcon.svelte";
-    import Loading from "@shared_components/Loading.svelte";
-    import SectionHeader from "../../SectionHeader.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import PinnedMessage from "./PinnedMessage.svelte";
-
-    interface Props {
-        pinned: ReadonlySet<number>;
-        chatId: MultiUserChatIdentifier;
-        dateLastPinned: bigint | undefined;
-        onClose: () => void;
-    }
-
-    let { chatId, dateLastPinned, onClose }: Props = $props();
-
-    const client = getContext<OpenChat>("client");
-    let unread = $state<boolean>(false);
-    // $derived is load-bearing: a plain `let` captures a one-time snapshot,
-    // and if the panel mounts before the chat details (pinned set) arrive
-    // the panel stays empty forever.
-    let pinnedMessages = $derived($selectedChatPinnedMessagesStore);
-
-    onMount(() => {
-        const unsubs = [
-            subscribe("chatWith", onClose),
-            messagesRead.subscribe(() => {
-                unread = client.unreadPinned(chatId, dateLastPinned);
-            }),
-        ];
-        return () => {
-            unsubs.forEach((u) => u());
-        };
-    });
-
-    let messagesDiv: HTMLDivElement | undefined = $state();
-
-    let messages: RemoteData<EventWrapper<Message>[][], string> = $state({ kind: "idle" });
-
-    function close() {
-        onClose();
-        messages = { kind: "idle" };
-    }
-
-    function scrollBottom() {
-        if (messagesDiv !== undefined) {
-            messagesDiv.scrollTo({
-                top: messagesDiv.scrollHeight - messagesDiv.clientHeight,
-                behavior: "auto",
-            });
-        }
-    }
-
-    function reloadPinned(pinned: ReadonlySet<number>): void {
-        untrack(() => {
-            if (pinned.size > 0) {
-                if (messages.kind !== "success") {
-                    messages = { kind: "loading" };
-                }
-                client
-                    .getMessagesByMessageIndex(chatId, undefined, [...pinned])
-                    .then((resp) => {
-                        if (!isSuccessfulEventsResponse(resp)) {
-                            messages = { kind: "error", error: "Unable to load pinned messages" };
-                        } else {
-                            messages = {
-                                kind: "success",
-                                data: client.groupMessagesByDate(
-                                    resp.events.sort((a, b) => a.index - b.index),
-                                ),
-                            };
-
-                            if (unread) {
-                                client.markPinnedMessagesRead(chatId, dateLastPinned!);
-                            }
-
-                            tick().then(scrollBottom);
-                        }
-                    })
-                    .catch((err) => {
-                        client.logError("Unable to load pinned messages: ", err);
-                        messages = { kind: "error", error: err.toString() };
-                    });
-            } else {
-                messages = { kind: "success", data: [] };
-            }
-        });
-    }
-
-    $effect(() => {
-        // Until the chat details arrive the pinned set is UNKNOWN, not empty —
-        // rendering the empty state here made the panel show "no pins" for the
-        // first second on a first open (cold cache / slow connection).
-        if ($selectedServerChatStore === undefined) {
-            messages = { kind: "loading" };
-            return;
-        }
-        reloadPinned(pinnedMessages);
-        unread = client.unreadPinned(chatId, dateLastPinned);
-    });
-
-    function dateGroupKey(group: EventWrapper<Message>[]): string {
-        const first = group[0] && group[0] && group[0].timestamp;
-        return first ? new Date(Number(first)).toDateString() : "unknown";
-    }
-</script>
-
-<SectionHeader gap>
-    <h4><Translatable resourceKey={i18nKey("pinnedMessages")} /></h4>
-    <span title={$_("close")} class="close" onclick={close}>
-        <HoverIcon>
-            <Close size={$iconSize} color={"var(--icon-txt)"} />
-        </HoverIcon>
-    </span>
-</SectionHeader>
-
-<div bind:this={messagesDiv} class="pinned-messages">
-    {#if messages.kind !== "success"}
-        <Loading />
-    {:else}
-        {#each messages.data as dayGroup (dateGroupKey(dayGroup))}
-            <div class="day-group">
-                <div class="date-label">
-                    {client.formatMessageDate(dayGroup[0]?.timestamp, $_("today"), $_("yesterday"))}
-                </div>
-                {#each dayGroup as message (message.event.messageId)}
-                    <PinnedMessage
-                        {chatId}
-                        timestamp={message.timestamp}
-                        user={$currentUserStore}
-                        senderId={message.event.sender}
-                        msg={message.event} />
-                {/each}
-            </div>
-        {/each}
-    {/if}
-</div>
-
-<style lang="scss">
-    h4 {
-        flex: 1;
-        margin: 0 $sp3;
-        @include font-size(fs-120);
-    }
-    .close {
-        flex: 0 0 30px;
-    }
-    .pinned-messages {
-        @include message-list();
-    }
-
-    .day-group {
-        position: relative;
-
-        .date-label {
-            padding: $sp2;
-            background-color: var(--currentChat-date-bg);
-            border: var(--currentChat-date-bd);
-            color: var(--currentChat-date-txt);
-            position: sticky;
-            top: 0;
-            width: 200px;
-            margin: 0 auto;
-            border-radius: $sp4;
-            @include z-index("date-label");
-            @include font(book, normal, fs-70);
-            text-align: center;
-            margin-bottom: $sp4;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/profile/AccountSelector.svelte b/frontend/app/src/components/home/profile/AccountSelector.svelte
deleted file mode 100644
index c36fae1d4a..0000000000
--- a/frontend/app/src/components/home/profile/AccountSelector.svelte
+++ /dev/null
@@ -1,108 +0,0 @@
-<script lang="ts">
-    import { iconSize, mobileWidth, type NamedAccount } from "@client";
-    import ChevronDown from "svelte-material-icons/ChevronDown.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Menu from "../../Menu.svelte";
-    import MenuIcon from "../../MenuIcon.svelte";
-    import MenuItem from "../../MenuItem.svelte";
-    import Translatable from "../../Translatable.svelte";
-
-    interface Props {
-        accounts: NamedAccount[];
-        targetAccount: string;
-    }
-
-    let { accounts, targetAccount = $bindable() }: Props = $props();
-
-    let selectedName: string | undefined = $state(undefined);
-    let menuIconEl: MenuIcon | undefined = $state();
-
-    $effect(() => {
-        selectedName = accounts.find((a) => {
-            return a.account.toLowerCase() === targetAccount.toLowerCase();
-        })?.name;
-    });
-
-    function collapseAccount(account: string) {
-        if (account.length > 23) {
-            return account.slice(0, 10) + "..." + account.slice(account.length - 10);
-        }
-        return account;
-    }
-
-    function selectAccount(namedAccount: NamedAccount) {
-        targetAccount = namedAccount.account;
-    }
-
-    function showMenu(e: Event) {
-        e.stopPropagation();
-        menuIconEl?.showMenu();
-    }
-</script>
-
-<div role="combobox" tabindex="0" class="selected" onclick={showMenu}>
-    <div class="name">
-        <Translatable resourceKey={i18nKey(selectedName ?? "tokenTransfer.chooseAddress")} />
-    </div>
-    <div class="icon">
-        <MenuIcon bind:this={menuIconEl} position={$mobileWidth ? "top" : "bottom"} align={"end"}>
-            {#snippet menuIcon()}
-                <ChevronDown viewBox={"0 -3 24 24"} size={$iconSize} color={"var(--icon-txt)"} />
-            {/snippet}
-            {#snippet menuItems()}
-                <Menu>
-                    {#each accounts as namedAccount}
-                        <MenuItem unpadded onclick={() => selectAccount(namedAccount)}>
-                            {#snippet text()}
-                                <div class="named-account">
-                                    <div class="name">
-                                        {namedAccount.name}
-                                    </div>
-                                    <div class="account">
-                                        {collapseAccount(namedAccount.account)}
-                                    </div>
-                                </div>
-                            {/snippet}
-                        </MenuItem>
-                    {/each}
-                </Menu>
-            {/snippet}
-        </MenuIcon>
-    </div>
-</div>
-
-<style lang="scss">
-    .selected {
-        display: flex;
-        align-items: center;
-        gap: $sp3;
-        cursor: pointer;
-        @include font(book, normal, fs-80);
-
-        .name {
-            color: var(--primary);
-        }
-
-        .icon {
-            transition: transform 250ms ease-in-out;
-            transform-origin: 50%;
-        }
-    }
-
-    .named-account {
-        padding: $sp3;
-        display: flex;
-        flex-direction: column;
-        @include font(book, normal, fs-80);
-        font-family: var(--font);
-
-        .name {
-            color: var(--primary);
-        }
-
-        .account {
-            @include font(light, normal, fs-70);
-            color: var(--menu-disabled-txt);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/profile/Accounts.svelte b/frontend/app/src/components/home/profile/Accounts.svelte
deleted file mode 100644
index 3322cf6cb7..0000000000
--- a/frontend/app/src/components/home/profile/Accounts.svelte
+++ /dev/null
@@ -1,385 +0,0 @@
-<script lang="ts">
-    import {
-        walletTokensSorted as accountsSorted,
-        type EnhancedTokenDetails,
-        iconSize,
-        ICP_SYMBOL,
-        nervousSystemLookup,
-        type OpenChat,
-        swappableTokensStore,
-        walletConfigStore,
-    } from "@client";
-    import { getContext, onMount } from "svelte";
-    import ArrowLeftBoldCircle from "svelte-material-icons/ArrowLeftBoldCircle.svelte";
-    import ArrowRightBoldCircle from "svelte-material-icons/ArrowRightBoldCircle.svelte";
-    import ChevronDown from "svelte-material-icons/ChevronDown.svelte";
-    import HeartRemoveOutline from "svelte-material-icons/HeartRemoveOutline.svelte";
-    import SwapIcon from "svelte-material-icons/SwapHorizontal.svelte";
-    import ViewList from "svelte-material-icons/ViewList.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { sum } from "../../../utils/math";
-    import ErrorMessage from "../../ErrorMessage.svelte";
-    import Menu from "../../Menu.svelte";
-    import MenuIcon from "../../MenuIcon.svelte";
-    import MenuItem from "../../MenuItem.svelte";
-    import MultiToggle, { type Option } from "../../MultiToggle.svelte";
-    import Overlay from "../../Overlay.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import BalanceWithRefresh from "../BalanceWithRefresh.svelte";
-    import AccountTransactions from "./AccountTransactions.svelte";
-    import ReceiveCrypto from "./ReceiveCrypto.svelte";
-    import RestrictedFeature from "./RestrictedFeature.svelte";
-    import SendCrypto from "./SendCrypto.svelte";
-    import SwapCrypto from "./SwapCrypto.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        conversionOptions: Option[];
-        selectedConversion?: "none" | "usd" | "icp" | "btc" | "eth";
-        hideTokenBalances?: boolean;
-    }
-
-    let {
-        conversionOptions,
-        selectedConversion = $bindable("none"),
-        hideTokenBalances = false,
-    }: Props = $props();
-
-    let balanceError: string | undefined = $state();
-    let actionMode: "none" | "send" | "receive" | "swap" | "transactions" | "restricted" =
-        $state("none");
-    let selectedLedger: string | undefined = $state(undefined);
-    let transactionsFormat: string = $state("");
-
-    onMount(() => client.refreshSwappableTokens());
-
-    function calculateTotal(
-        accounts: EnhancedTokenDetails[],
-        conversion: "usd" | "icp" | "btc" | "eth",
-    ): string {
-        switch (conversion) {
-            case "usd":
-                return sum(accounts.map((c) => c.dollarBalance ?? 0)).toFixed(2);
-            case "icp":
-                return sum(accounts.map((c) => c.icpBalance ?? 0)).toFixed(3);
-            case "btc":
-                return sum(accounts.map((c) => c.btcBalance ?? 0)).toFixed(6);
-            case "eth":
-                return sum(accounts.map((c) => c.ethBalance ?? 0)).toFixed(6);
-        }
-    }
-
-    function onBalanceRefreshed() {
-        balanceError = undefined;
-    }
-
-    function onBalanceRefreshError(err: string) {
-        balanceError = err;
-    }
-
-    function hideManageModal() {
-        actionMode = "none";
-    }
-
-    function showReceive(ledger: string) {
-        selectedLedger = ledger;
-        actionMode = "receive";
-    }
-
-    function showSend(ledger: string) {
-        selectedLedger = ledger;
-        actionMode = "send";
-    }
-
-    function showSwap(ledger: string) {
-        selectedLedger = ledger;
-        client.swapRestricted().then((restricted) => {
-            if (restricted) {
-                actionMode = "restricted";
-            } else {
-                actionMode = "swap";
-            }
-        });
-    }
-
-    function showTransactions(token: { ledger: string; urlFormat: string }) {
-        selectedLedger = token.ledger;
-        transactionsFormat = token.urlFormat;
-        actionMode = "transactions";
-    }
-
-    function removeFromWallet(ledger: string) {
-        client.removeTokenFromWallet(ledger);
-    }
-    let manualWalletConfig = $derived($walletConfigStore.kind === "manual_wallet");
-    let snsLedgers = $derived(
-        new Set<string>(
-            [...$nervousSystemLookup.values()]
-                .filter((ns) => !ns.isNns)
-                .map((ns) => ns.ledgerCanisterId),
-        ),
-    );
-    let total = $derived(
-        selectedConversion === "none" ? "" : calculateTotal($accountsSorted, selectedConversion),
-    );
-</script>
-
-{#if actionMode !== "none" && selectedLedger !== undefined}
-    <Overlay
-        dismissible={actionMode === "receive" || actionMode === "transactions"}
-        onClose={hideManageModal}>
-        {#if actionMode === "receive"}
-            <ReceiveCrypto ledger={selectedLedger} onClose={hideManageModal} />
-        {:else if actionMode === "send"}
-            <SendCrypto ledger={selectedLedger} onClose={hideManageModal} />
-        {:else if actionMode === "swap"}
-            <SwapCrypto bind:ledgerIn={selectedLedger} onClose={hideManageModal} />
-        {:else if actionMode === "transactions"}
-            <AccountTransactions
-                ledger={selectedLedger}
-                onClose={hideManageModal}
-                urlFormat={transactionsFormat} />
-        {:else if actionMode === "restricted"}
-            <RestrictedFeature onClose={hideManageModal} feature="swap" />
-        {/if}
-    </Overlay>
-{/if}
-
-<table>
-    <thead>
-        <tr>
-            <th class="token-header"
-                ><Translatable resourceKey={i18nKey("cryptoAccount.token")} /></th>
-            <th class="balance-header" colspan="2" class:hideTokenBalances>
-                <MultiToggle options={conversionOptions} bind:selected={selectedConversion} />
-            </th>
-        </tr>
-    </thead>
-    {#each $accountsSorted as token (token.ledger)}
-        <tr>
-            <td width="99%">
-                <div class="token">
-                    <img
-                        alt={token.name}
-                        class:disabled={!token.enabled}
-                        class="icon"
-                        src={token.logo} />
-                    <div>
-                        {token.symbol}
-                    </div>
-                </div>
-            </td>
-            <td>
-                <BalanceWithRefresh
-                    ledger={token.ledger}
-                    value={token.balance}
-                    conversion={selectedConversion}
-                    hideBalance={hideTokenBalances}
-                    allowCached={true}
-                    onRefreshed={onBalanceRefreshed}
-                    onError={onBalanceRefreshError} />
-            </td>
-            <td class="manage-col">
-                <div class="manage">
-                    <MenuIcon position="bottom" align="end">
-                        {#snippet menuIcon()}
-                            <span class="wallet-menu">
-                                <ChevronDown
-                                    viewBox={"0 -3 24 24"}
-                                    size={$iconSize}
-                                    color={"var(--txt)"} />
-                            </span>
-                        {/snippet}
-                        {#snippet menuItems()}
-                            <Menu>
-                                <MenuItem onclick={() => showSend(token.ledger)}>
-                                    {#snippet icon()}
-                                        <ArrowRightBoldCircle
-                                            size={$iconSize}
-                                            color={"var(--icon-inverted-txt)"} />
-                                    {/snippet}
-                                    {#snippet text()}
-                                        <div>
-                                            <Translatable
-                                                resourceKey={i18nKey("cryptoAccount.send")} />
-                                        </div>
-                                    {/snippet}
-                                </MenuItem>
-                                {#if token.enabled}
-                                    <MenuItem onclick={() => showReceive(token.ledger)}>
-                                        {#snippet icon()}
-                                            <ArrowLeftBoldCircle
-                                                size={$iconSize}
-                                                color={"var(--icon-inverted-txt)"} />
-                                        {/snippet}
-                                        {#snippet text()}
-                                            <div>
-                                                <Translatable
-                                                    resourceKey={i18nKey(
-                                                        "cryptoAccount.receive",
-                                                    )} />
-                                            </div>
-                                        {/snippet}
-                                    </MenuItem>
-                                    {#if $swappableTokensStore.has(token.ledger)}
-                                        <MenuItem onclick={() => showSwap(token.ledger)}>
-                                            {#snippet icon()}
-                                                <SwapIcon
-                                                    size={$iconSize}
-                                                    color={"var(--icon-inverted-txt)"} />
-                                            {/snippet}
-                                            {#snippet text()}
-                                                <div>
-                                                    <Translatable
-                                                        resourceKey={i18nKey(
-                                                            "cryptoAccount.swap",
-                                                        )} />
-                                                </div>
-                                            {/snippet}
-                                        </MenuItem>
-                                    {/if}
-                                {/if}
-                                {#if token.symbol === ICP_SYMBOL || snsLedgers.has(token.ledger)}
-                                    <MenuItem onclick={() => showTransactions(token)}>
-                                        {#snippet icon()}
-                                            <ViewList
-                                                size={$iconSize}
-                                                color={"var(--icon-inverted-txt)"} />
-                                        {/snippet}
-                                        {#snippet text()}
-                                            <div>
-                                                <Translatable
-                                                    resourceKey={i18nKey(
-                                                        "cryptoAccount.transactions",
-                                                    )} />
-                                            </div>
-                                        {/snippet}
-                                    </MenuItem>
-                                {/if}
-                                {#if manualWalletConfig}
-                                    <MenuItem onclick={() => removeFromWallet(token.ledger)}>
-                                        {#snippet icon()}
-                                            <HeartRemoveOutline
-                                                size={$iconSize}
-                                                color={"var(--icon-inverted-txt)"} />
-                                        {/snippet}
-                                        {#snippet text()}
-                                            <div>
-                                                <Translatable
-                                                    resourceKey={i18nKey("cryptoAccount.remove")} />
-                                            </div>
-                                        {/snippet}
-                                    </MenuItem>
-                                {/if}
-                            </Menu>
-                        {/snippet}
-                    </MenuIcon>
-                </div>
-            </td>
-        </tr>
-    {/each}
-    {#if selectedConversion !== "none" && !hideTokenBalances}
-        <tr class="total">
-            <td>
-                <div class="token">
-                    <div class="icon"></div>
-                    <Translatable resourceKey={i18nKey("cryptoAccount.total")} />
-                </div>
-            </td>
-            <td class="total">{total}</td>
-            <td></td>
-        </tr>
-    {/if}
-</table>
-
-{#if balanceError !== undefined}
-    <ErrorMessage>{balanceError}</ErrorMessage>
-{/if}
-
-<style lang="scss">
-    :global(.manage .link-button) {
-        padding: 0 0 0 $sp3;
-        &:first-child {
-            border-right: 1px solid var(--txt-light);
-            padding: 0 $sp3 0 0;
-        }
-    }
-
-    .wallet-menu {
-        cursor: pointer;
-    }
-
-    table {
-        width: 100%;
-
-        th {
-            @include font(book, normal, fs-70);
-            padding-bottom: $sp4;
-
-            &.token-header {
-                font-weight: 700;
-                text-align: left;
-            }
-
-            &.balance-header {
-                @include font-size(fs-60);
-                text-transform: uppercase;
-            }
-        }
-
-        td {
-            vertical-align: middle;
-            padding-bottom: $sp3;
-
-            &.manage-col {
-                width: 0;
-            }
-
-            &.total {
-                @include font(bold, normal, fs-100, 22);
-                padding-right: 30px;
-                text-align: right;
-            }
-        }
-
-        tr.total {
-            color: var(--txt-light);
-
-            td {
-                padding-top: $sp3;
-                border-top: solid 1px var(--bd);
-            }
-        }
-
-        .token {
-            display: flex;
-            flex-direction: row;
-            gap: toRem(10);
-        }
-
-        .manage {
-            @include font(light, normal, fs-70);
-            display: flex;
-            padding-left: $sp3;
-            text-wrap: nowrap;
-        }
-
-        .icon {
-            background-size: contain;
-            height: 24px;
-            width: 24px;
-            border-radius: 50%;
-            background-repeat: no-repeat;
-            background-position: top;
-
-            &.disabled {
-                filter: grayscale(1);
-            }
-        }
-
-        .hideTokenBalances {
-            visibility: hidden;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/profile/Badges.svelte b/frontend/app/src/components/home/profile/Badges.svelte
deleted file mode 100644
index cd4dfdbb96..0000000000
--- a/frontend/app/src/components/home/profile/Badges.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script lang="ts">
-    import { disableChit } from "@src/stores/settings";
-    import type { DiamondMembershipStatus } from "@client";
-    import Diamond from "../../icons/Diamond.svelte";
-    import ChitEarnedBadge from "./ChitEarnedBadge.svelte";
-    import Streak from "./Streak.svelte";
-
-    interface Props {
-        diamondStatus?: DiamondMembershipStatus["kind"] | undefined;
-        streak?: number;
-        uniquePerson?: boolean;
-        chitEarned?: number;
-    }
-
-    // uniquePerson prop retained on Props for callers, but unused - the verified badge is suspended.
-    let { diamondStatus = undefined, streak = 0, chitEarned = 0 }: Props = $props();
-</script>
-
-<Diamond status={diamondStatus} />
-<!-- Verified user (DecideAI) badge is suspended - not rendered. -->
-{#if !$disableChit}
-    <Streak days={streak} />
-    <ChitEarnedBadge earned={chitEarned} />
-{/if}
diff --git a/frontend/app/src/components/home/profile/ChitEarnedBadge.svelte b/frontend/app/src/components/home/profile/ChitEarnedBadge.svelte
deleted file mode 100644
index 9624296cd5..0000000000
--- a/frontend/app/src/components/home/profile/ChitEarnedBadge.svelte
+++ /dev/null
@@ -1,73 +0,0 @@
-<script lang="ts">
-    import Translatable from "@src/components/Translatable.svelte";
-    import { i18nKey } from "@src/i18n/i18n";
-    import { chitBands, findClosestChitBand } from "@client";
-    import Tooltip from "../../tooltip/Tooltip.svelte";
-
-    interface Props {
-        earned: number;
-        showTooltip?: boolean;
-    }
-
-    let { earned, showTooltip = true }: Props = $props();
-
-    let closest = $derived(findClosestChitBand(earned));
-
-    let chitIconText = $derived(
-        closest === 1_000_000 ? "1 m" : Math.floor(closest / 1_000).toString(),
-    );
-    let show = $derived(closest > 0);
-</script>
-
-{#if show}
-    {#if showTooltip}
-        <Tooltip position="top" align="middle">
-            <div class={`icon`}>
-                {chitIconText}
-            </div>
-            {#snippet popupTemplate()}
-                <Translatable
-                    resourceKey={i18nKey("prizes.minChitEarnedValue", {
-                        n: chitBands.get(closest) ?? "0",
-                    })}></Translatable>
-            {/snippet}
-        </Tooltip>
-    {:else}
-        <div class="wrapper">
-            <div>
-                <Translatable
-                    resourceKey={i18nKey("prizes.minChitEarnedValue", {
-                        n: chitBands.get(closest) ?? "0",
-                    })}></Translatable>
-            </div>
-            <div class={`icon`}>
-                {chitIconText}
-            </div>
-        </div>
-    {/if}
-{/if}
-
-<style lang="scss">
-    .icon {
-        $size: 17px;
-        background-repeat: no-repeat;
-        width: $size;
-        height: $size;
-        background-position: 50%;
-        background-image: url("/assets/chit.svg");
-        filter: saturate(0.8);
-        text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
-        display: flex;
-        align-items: center;
-        color: #fff;
-        justify-content: center;
-        @include font(bold, normal, fs-50);
-        font-size: 8px;
-    }
-
-    .wrapper {
-        display: flex;
-        align-items: center;
-        gap: $sp2;
-    }
-</style>
diff --git a/frontend/app/src/components/home/profile/ChitEventsForDay.svelte b/frontend/app/src/components/home/profile/ChitEventsForDay.svelte
deleted file mode 100644
index 472d2d6b0b..0000000000
--- a/frontend/app/src/components/home/profile/ChitEventsForDay.svelte
+++ /dev/null
@@ -1,118 +0,0 @@
-<script lang="ts">
-    import { mobileWidth, type ChitEvent } from "@client";
-    import Tooltip from "../../../components/tooltip/Tooltip.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Translatable from "../../Translatable.svelte";
-
-    interface Props {
-        events: ChitEvent[];
-        day: Date;
-        selectedMonth: number;
-        utcMode: boolean;
-    }
-
-    let { events, day, selectedMonth, utcMode }: Props = $props();
-
-    let otherMonth = $derived(day.getMonth() !== selectedMonth);
-</script>
-
-{#snippet eventtime(t: string)}
-    <span class="time">({t})</span>
-{/snippet}
-
-{#if events.length === 0}
-    <div class="day">{day.getDate()}</div>
-{:else}
-    <div class="day has-events" class:otherMonth>
-        <Tooltip autoWidth fill position="top" align={$mobileWidth ? "middle" : "end"}>
-            {day.getDate()}
-            {#snippet popupTemplate()}
-                <div class="tt">
-                    {#each events as event}
-                        {@const time = new Date(Number(event.timestamp))}
-                        {@const timeStr = utcMode
-                            ? time.toLocaleTimeString("en-GB", { timeZone: "UTC" })
-                            : time.toLocaleTimeString()}
-                        {#if event.reason.kind === "daily_claim" || event.reason.kind === "daily_claim_reinstated" || event.reason.kind === "streak_insurance_claim"}
-                            <p>
-                                {`🚀 Daily claim: ${event.amount.toLocaleString()}`}
-                                {@render eventtime(timeStr)}
-                            </p>
-                        {:else if event.reason.kind === "achievement_unlocked"}
-                            <p>
-                                🥳 <Translatable
-                                    resourceKey={i18nKey(`learnToEarn.${event.reason.type}`)} />: {event.amount.toLocaleString()}
-                                {@render eventtime(timeStr)}
-                            </p>
-                        {:else if event.reason.kind === "purchased_premium_item"}
-                            <p>
-                                🤑 <Translatable resourceKey={i18nKey("premiumItem.purchased")} />: {event.amount.toLocaleString()}
-                                {@render eventtime(timeStr)}
-                            </p>
-                        {:else if event.reason.kind === "referral"}
-                            <p>
-                                🤝 <Translatable
-                                    resourceKey={i18nKey(
-                                        `chitReferralRewardReason.${event.reason.type}`,
-                                    )} />: {event.amount.toLocaleString()}
-                                {@render eventtime(timeStr)}
-                            </p>
-                        {:else if event.reason.kind === "meme_contest_winner"}
-                            <p>
-                                {`🏆️ Meme contest win: ${event.amount.toLocaleString()}`}
-                                {@render eventtime(timeStr)}
-                            </p>
-                        {:else if event.reason.kind === "external_achievement_unlocked"}
-                            <p>
-                                🔓 <Translatable resourceKey={i18nKey(event.reason.name)} />: {event.amount.toLocaleString()}
-                                {@render eventtime(timeStr)}
-                            </p>
-                        {/if}
-                    {/each}
-                </div>
-            {/snippet}
-        </Tooltip>
-    </div>
-{/if}
-
-<style lang="scss">
-    :global(.day.has-events .tooltip-popup) {
-        word-wrap: unset;
-    }
-
-    .day {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        &.has-events {
-            background: var(--button-bg);
-            color: var(--button-txt);
-            transition: background-color 300ms ease-in-out;
-
-            &:hover {
-                background: var(--button-hv);
-            }
-        }
-
-        &.otherMonth {
-            background: var(--button-disabled);
-            color: var(--button-disabled-txt);
-            &:hover {
-                background: var(--button-disabled);
-            }
-        }
-    }
-
-    .tt {
-        text-align: start;
-        @include font(book, normal, fs-100);
-        padding: $sp3;
-    }
-
-    .time {
-        @include font(book, normal, fs-60);
-    }
-</style>
diff --git a/frontend/app/src/components/home/profile/ChooseSignInOption.svelte b/frontend/app/src/components/home/profile/ChooseSignInOption.svelte
deleted file mode 100644
index d7f6d538db..0000000000
--- a/frontend/app/src/components/home/profile/ChooseSignInOption.svelte
+++ /dev/null
@@ -1,253 +0,0 @@
-<script lang="ts">
-    import { AuthProvider, selectedAuthProviderStore, type OpenChat } from "@client";
-    import { getContext } from "svelte";
-    import EmailIcon from "svelte-material-icons/EmailOutline.svelte";
-    import SendIcon from "svelte-material-icons/Send.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Button from "../../Button.svelte";
-    import Input from "../../Input.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import SignInOption from "./SignInOption.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        mode?: "signin" | "signup";
-        restrictTo?: Set<string>;
-        emailInvalid: boolean;
-        email: string;
-        currentProvider?: AuthProvider | undefined;
-        showMore?: boolean;
-        onLogin: (provider: AuthProvider) => void;
-    }
-
-    let {
-        mode = "signin",
-        restrictTo = new Set(),
-        emailInvalid = $bindable(),
-        email = $bindable(),
-        currentProvider = undefined,
-        showMore = $bindable(false),
-        onLogin,
-    }: Props = $props();
-
-    function buildOptions(
-        selected: AuthProvider | undefined,
-        mode: "signin" | "signup",
-        restrictTo: Set<string>,
-    ): AuthProvider[] {
-        let options = [];
-        const supportsII = "PublicKeyCredential" in window;
-
-        options.push(AuthProvider.EMAIL);
-        options.push(AuthProvider.PASSKEY);
-
-        if (supportsII) {
-            options.push(AuthProvider.II);
-            options.push(AuthProvider.ETH);
-            options.push(AuthProvider.SOL);
-
-            if (mode === "signin") {
-                options.push(AuthProvider.NFID);
-            }
-        } else if (client.isNativeAndroid()) {
-            options.push(AuthProvider.II);
-        }
-
-        if (restrictTo.size > 0) {
-            options = options.filter((o) => {
-                return (
-                    restrictTo.has(o) ||
-                    (o === AuthProvider.II && restrictTo.has("II")) ||
-                    (o === AuthProvider.EMAIL && restrictTo.has("EMAIL")) ||
-                    (o === AuthProvider.PASSKEY && restrictTo.has("PASSKEY")) ||
-                    (o === AuthProvider.ETH && restrictTo.has("ETH")) ||
-                    (o === AuthProvider.SOL && restrictTo.has("SOL")) ||
-                    (o === AuthProvider.NFID && restrictTo.has("NFID"))
-                );
-            });
-        }
-
-        if (selected !== undefined) {
-            let i = options.findIndex((p) => p === selected);
-
-            if (i >= 0) {
-                options.splice(i, 1);
-                options.splice(0, 0, selected);
-            }
-        }
-        return options;
-    }
-
-    function providerName(provider: AuthProvider): string {
-        return provider === AuthProvider.NFID ? "NFID (Legacy)" : provider;
-    }
-
-    function isEmailValid(email: string): boolean {
-        return email.length > 0;
-    }
-
-    let options = $derived(
-        buildOptions(currentProvider ?? $selectedAuthProviderStore, mode, restrictTo),
-    );
-    let showAllOptions = $derived(
-        (currentProvider ?? $selectedAuthProviderStore) === undefined ||
-            showMore ||
-            mode === "signup",
-    );
-    $effect(() => {
-        const invalid = !isEmailValid(email);
-        if (emailInvalid !== invalid) {
-            emailInvalid = invalid;
-        }
-    });
-</script>
-
-<div class="sign-in-options">
-    {#each options as provider, i}
-        {#if showAllOptions || i === 0}
-            <div
-                class={`option ${
-                    showAllOptions && options.length > 1 && i === 0 ? "separate" : ""
-                }`}>
-                {#if provider === AuthProvider.EMAIL}
-                    <div class="email">
-                        <div class="email-icon icon">
-                            <EmailIcon size={"1.5em"} color={"var(--txt-light)"} />
-                        </div>
-                        <div class="email-txt">
-                            <Input
-                                bind:value={email}
-                                minlength={10}
-                                maxlength={200}
-                                onEnter={() => onLogin(provider)}
-                                placeholder={i18nKey(
-                                    mode === "signin"
-                                        ? "loginDialog.signinEmailPlaceholder"
-                                        : "loginDialog.signupEmailPlaceholder",
-                                )} />
-                        </div>
-                        <Button disabled={emailInvalid} tiny onClick={() => onLogin(provider)}>
-                            <div class="center">
-                                <SendIcon size={"1.5em"} />
-                            </div>
-                        </Button>
-                    </div>
-                {:else}
-                    <SignInOption
-                        {provider}
-                        name={i18nKey(
-                            mode === "signin" ? "loginDialog.signinWith" : "loginDialog.signupWith",
-                            { provider: providerName(provider) },
-                        )}
-                        onClick={() => onLogin(provider)} />
-                {/if}
-            </div>
-        {/if}
-    {/each}
-
-    {#if !showAllOptions && options.length > 1}
-        <div class="more">
-            <a role="button" tabindex="0" onclick={() => (showMore = true)}>
-                <Translatable resourceKey={i18nKey("loginDialog.showMore")} />
-            </a>
-        </div>
-    {/if}
-</div>
-
-<style lang="scss">
-    $height: 45px;
-
-    :global(.sign-in-options .email .input-wrapper) {
-        margin-bottom: 0;
-    }
-
-    :global(.sign-in-options .email button) {
-        height: $height;
-        width: 50px;
-        padding: 0 $sp3 !important;
-        border-radius: 0 $sp2 $sp2 0;
-    }
-
-    :global(.sign-in-options .email .input-wrapper input) {
-        border-radius: 0;
-        box-shadow: none;
-        border-right: 1px solid var(--bd);
-        height: $height;
-    }
-
-    :global(.sign-in-options .email [data-lastpass-icon-root]) {
-        display: none;
-    }
-
-    :global(.sign-in-options button.tiny) {
-        padding: $sp2 $sp4;
-        min-height: 45px;
-        min-width: auto;
-    }
-
-    .center {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-
-    a:hover {
-        text-decoration: underline;
-    }
-
-    .sign-in-options {
-        display: flex;
-        gap: 12px;
-        flex-direction: column;
-        align-items: center;
-        margin-bottom: $sp3;
-        width: 100%;
-
-        .option {
-            width: 100%;
-            max-width: 440px;
-            display: flex;
-            align-items: center;
-            gap: 12px;
-
-            .email {
-                flex: 1;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-
-                .email-txt {
-                    flex: auto;
-                }
-            }
-
-            &.separate {
-                margin-bottom: $sp2;
-                border-bottom: 1px solid var(--bd);
-                padding-bottom: $sp4;
-            }
-        }
-
-        .icon {
-            flex: 0 0 60px;
-            width: 60px;
-            height: $height;
-            border-radius: $sp2 0 0 $sp2;
-            border-right: 1px solid var(--bd);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background-color: var(--input-bg);
-
-            .nfid-img {
-                width: 40px;
-            }
-
-            .eth-img,
-            .sol-img {
-                width: 30px;
-            }
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/profile/ConfirmDeleteAccount.svelte b/frontend/app/src/components/home/profile/ConfirmDeleteAccount.svelte
deleted file mode 100644
index 3f8fe5ff27..0000000000
--- a/frontend/app/src/components/home/profile/ConfirmDeleteAccount.svelte
+++ /dev/null
@@ -1,82 +0,0 @@
-<script lang="ts">
-    import { AuthProvider, i18nKey, OpenChat } from "@client";
-    import ModalContent from "../../ModalContent.svelte";
-    import Overlay from "../../Overlay.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import { interpolate } from "../../../i18n/i18n";
-    import { _ } from "svelte-i18n";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import ButtonGroup from "../../ButtonGroup.svelte";
-    import Button from "../../Button.svelte";
-    import { getContext } from "svelte";
-    import { toastStore } from "../../../stores/toast";
-    import ReAuthenticate from "./ReAuthenticate.svelte";
-    import type { DelegationChain, ECDSAKeyIdentity } from "@icp-sdk/core/identity";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        deleting: boolean;
-        onClose: () => void;
-    }
-
-    let { deleting = $bindable(), onClose }: Props = $props();
-
-    let authenticating = $state(false);
-
-    function deleteAccount(detail: {
-        key: ECDSAKeyIdentity;
-        delegation: DelegationChain;
-        provider: AuthProvider;
-    }) {
-        deleting = true;
-        authenticating = false;
-        return client
-            .deleteCurrentUser(detail.key.getKeyPair(), detail.delegation.toJSON())
-            .then((success) => {
-                if (!success) {
-                    toastStore.showFailureToast(i18nKey("danger.deleteAccountFailed"));
-                } else {
-                    onClose();
-                }
-            })
-            .finally(() => (deleting = false));
-    }
-</script>
-
-<Overlay>
-    <ModalContent>
-        {#snippet header()}
-            <Translatable resourceKey={i18nKey("danger.deleteAccount")} />
-        {/snippet}
-        {#snippet body()}
-            {#if authenticating}
-                <ReAuthenticate onSuccess={deleteAccount} message={i18nKey("danger.reauth")} />
-            {:else}
-                <Markdown
-                    inline={false}
-                    text={interpolate($_, i18nKey("danger.deleteAccountConfirm"))} />
-            {/if}
-        {/snippet}
-        {#snippet footer()}
-            <ButtonGroup>
-                <Button small onClick={onClose} secondary>
-                    <Translatable resourceKey={i18nKey("cancel")} />
-                </Button>
-                {#if !authenticating}
-                    <Button
-                        danger
-                        disabled={deleting}
-                        loading={deleting}
-                        small
-                        onClick={() => (authenticating = true)}>
-                        <Translatable
-                            resourceKey={i18nKey(
-                                deleting ? "danger.deleting" : "danger.deleteAccount",
-                            )} />
-                    </Button>
-                {/if}
-            </ButtonGroup>
-        {/snippet}
-    </ModalContent>
-</Overlay>
diff --git a/frontend/app/src/components/home/profile/FontSize.svelte b/frontend/app/src/components/home/profile/FontSize.svelte
deleted file mode 100644
index 0a1b7bff58..0000000000
--- a/frontend/app/src/components/home/profile/FontSize.svelte
+++ /dev/null
@@ -1,124 +0,0 @@
-<script lang="ts">
-    import { fontScaleStore } from "@client";
-    import Range from "../../Range.svelte";
-    // onChange={() => (ui.fontScale = $fontScaleStore)} />
-</script>
-
-<div class="grid">
-    <div class="letter zero" onclick={() => fontScaleStore.set(0)}>A</div>
-    <div class="letter one" onclick={() => fontScaleStore.set(1)}>A</div>
-    <div class="letter two" onclick={() => fontScaleStore.set(2)}>A</div>
-    <div class="letter three" onclick={() => fontScaleStore.set(3)}>A</div>
-    <div class="letter four" onclick={() => fontScaleStore.set(4)}>A</div>
-    <div class="slider">
-        <Range min={0} max={4} bind:value={$fontScaleStore} />
-    </div>
-</div>
-
-<style lang="scss">
-    $trackHeight: 6px;
-    $thumbSize: 16px;
-    $trackColor: var(--button-bg);
-
-    input[type="range"] {
-        -webkit-appearance: none;
-        margin: 18px 0;
-        width: 100%;
-    }
-    input[type="range"]:focus {
-        outline: none;
-    }
-    input[type="range"]::-webkit-slider-runnable-track {
-        width: 100%;
-        height: $trackHeight;
-        cursor: pointer;
-        background: $trackColor;
-    }
-    input[type="range"]::-webkit-slider-thumb {
-        height: $thumbSize;
-        width: $thumbSize;
-        border-radius: 50%;
-        background: #ffffff;
-        cursor: pointer;
-        -webkit-appearance: none;
-        margin-top: -6px;
-    }
-    input[type="range"]:focus::-webkit-slider-runnable-track {
-        background: $trackColor;
-    }
-    input[type="range"]::-moz-range-track {
-        width: 100%;
-        height: $trackHeight;
-        cursor: pointer;
-        background: $trackColor;
-    }
-    input[type="range"]::-moz-range-thumb {
-        height: $thumbSize;
-        width: $thumbSize;
-        border-radius: 50%;
-        background: #ffffff;
-        cursor: pointer;
-    }
-    input[type="range"]::-ms-track {
-        width: 100%;
-        height: $trackHeight;
-        cursor: pointer;
-        background: transparent;
-        border-color: transparent;
-        border-width: 16px 0;
-        color: transparent;
-    }
-    input[type="range"]::-ms-thumb {
-        height: $thumbSize;
-        width: $thumbSize;
-        border-radius: 50%;
-        background: #ffffff;
-        cursor: pointer;
-    }
-
-    .grid {
-        display: grid;
-        grid-template-columns: 1fr repeat(3, 2fr) 1fr;
-        align-items: flex-end;
-    }
-
-    .slider {
-        grid-column: 1 / span 8;
-        .range-input {
-            width: 100%;
-        }
-    }
-
-    .letter {
-        cursor: pointer;
-        text-align: center;
-        padding: 0 $sp2;
-    }
-
-    .zero {
-        font-size: 12px;
-        font-weight: 100;
-        text-align: left;
-    }
-
-    .one {
-        font-size: 14px;
-        font-weight: 200;
-    }
-
-    .two {
-        font-size: 16px;
-        font-weight: 300;
-    }
-
-    .three {
-        font-size: 18px;
-        font-weight: 400;
-    }
-
-    .four {
-        font-size: 20px;
-        font-weight: 500;
-        text-align: right;
-    }
-</style>
diff --git a/frontend/app/src/components/home/profile/LearnToEarn.svelte b/frontend/app/src/components/home/profile/LearnToEarn.svelte
deleted file mode 100644
index de1f7dc382..0000000000
--- a/frontend/app/src/components/home/profile/LearnToEarn.svelte
+++ /dev/null
@@ -1,373 +0,0 @@
-<script lang="ts">
-    import {
-        OpenChat,
-        achievements,
-        achievementsStore,
-        currentUserIdStore,
-        currentUserStore,
-        iconSize,
-        type Achievement,
-        type ExternalAchievement,
-    } from "@client";
-    import { getContext, onMount } from "svelte";
-    import CheckCircle from "svelte-material-icons/CheckCircle.svelte";
-    import CheckCircleOutline from "svelte-material-icons/CheckCircleOutline.svelte";
-    import InformationOutline from "svelte-material-icons/InformationOutline.svelte";
-    import Tooltip from "../../../components/tooltip/Tooltip.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { now } from "../../../stores/time";
-    import Button from "../../Button.svelte";
-    import ModalContent from "../../ModalContent.svelte";
-    import Overlay from "../../Overlay.svelte";
-    import Progress from "../../Progress.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import ExternalLink from "../../landingpages/ExternalLink.svelte";
-
-    const client = getContext<OpenChat>("client");
-    const enabled = new Set<string>([
-        "streak_3",
-        "streak_7",
-        "streak_14",
-        "streak_30",
-        "streak_100",
-        "streak_365",
-        "set_bio",
-        "set_avatar",
-        "joined_group",
-        "joined_community",
-        "sent_direct_message",
-        "received_direct_message",
-        "upgraded_to_diamond",
-        "set_display_name",
-        "sent_text",
-        "reacted_to_message",
-        "sent_file",
-        "sent_image",
-        "sent_poll",
-        "sent_crypto",
-        "sent_video",
-        "sent_audio",
-        "sent_giphy",
-        "sent_prize",
-        "sent_meme",
-        "sent_swap_offer",
-        "quote_replied",
-        "replied_in_thread",
-        "edited_message",
-        "deleted_message",
-        "tipped_message",
-        "forwarded_message",
-        "received_crypto",
-        "received_reaction",
-        "had_message_tipped",
-        "voted_on_poll",
-        "sent_reminder",
-        "set_community_display_name",
-        "joined_call",
-        "set_pin",
-        "favourited_chat",
-        "pinned_chat",
-        "followed_thread",
-        "swapped_from_wallet",
-        "accepted_swap_offer",
-        "referred_1st_user",
-        "referred_3rd_user",
-        "referred_10th_user",
-        "referred_20th_user",
-        "referred_50th_user",
-        "upgrade_to_gold_diamond",
-    ]);
-
-    interface Props {
-        onClose: () => void;
-    }
-    let { onClose }: Props = $props();
-
-    let selectedTab: "todo" | "done" | "external" = $state("todo");
-
-    function filter(achievement: Achievement): boolean {
-        return enabled.has(achievement) || $achievementsStore.has(achievement);
-    }
-
-    function selectTab(tab: "todo" | "done" | "external") {
-        selectedTab = tab;
-    }
-
-    onMount(() => {
-        client.getExternalAchievements().then((achievements) => {
-            externalAchievements = achievements.sort((a, b) => b.chitReward - a.chitReward);
-        });
-    });
-    let filtered = $derived([...achievements].filter(filter));
-    let [internalAchieved, internalNotAchieved] = $derived(
-        client.partition(filtered, (a) => $achievementsStore.has(a)),
-    );
-    let externalAchievements: ExternalAchievement[] = $state([]);
-    let totalAchievements = $derived(filtered.length + externalAchievements.length);
-    let [externalAchieved, externalNotAchieved] = $derived(
-        client.partition(externalAchievements, (a) => {
-            return $achievementsStore.has(a.name);
-        }),
-    );
-    let achieved = $derived([
-        ...internalAchieved.map((a) => `learnToEarn.${a}`),
-        ...externalAchieved.map((a) => a.name),
-    ]);
-    let percComplete = $derived(Math.round((achieved.length / totalAchievements) * 100));
-    let validExternalNotAchieved = $derived(
-        externalNotAchieved.filter((a) => !a.budgetExhausted && BigInt($now) < a.expires),
-    );
-</script>
-
-<Overlay {onClose} dismissible>
-    <ModalContent closeIcon {onClose}>
-        {#snippet header()}
-            <span class="header"><Translatable resourceKey={i18nKey("learnToEarn.title")} /></span>
-        {/snippet}
-
-        {#snippet body()}
-            <div class="body">
-                <div class="tabs">
-                    <!-- svelte-ignore a11y_click_events_have_key_events -->
-                    <div
-                        tabindex="0"
-                        role="button"
-                        onclick={() => selectTab("todo")}
-                        class:selected={selectedTab === "todo"}
-                        class="tab">
-                        <Translatable resourceKey={i18nKey("learnToEarn.todo")} />
-                    </div>
-                    {#if externalAchievements.length > 0}
-                        <!-- svelte-ignore a11y_click_events_have_key_events -->
-                        <div
-                            tabindex="0"
-                            role="button"
-                            onclick={() => selectTab("external")}
-                            class:selected={selectedTab === "external"}
-                            class="tab">
-                            <Translatable resourceKey={i18nKey("learnToEarn.external")} />
-                            <div class="icon">
-                                <Tooltip position={"bottom"} align={"end"}>
-                                    <InformationOutline
-                                        size={"1.2em"}
-                                        color={selectedTab === "external"
-                                            ? "var(--txt)"
-                                            : "var(--txt-light)"} />
-                                    {#snippet popupTemplate()}
-                                        <Translatable
-                                            resourceKey={i18nKey("learnToEarn.externalInfo")} />
-                                    {/snippet}
-                                </Tooltip>
-                            </div>
-                        </div>
-                    {/if}
-                    <!-- svelte-ignore a11y_click_events_have_key_events -->
-                    <div
-                        tabindex="0"
-                        role="button"
-                        onclick={() => selectTab("done")}
-                        class:selected={selectedTab === "done"}
-                        class="tab">
-                        <Translatable resourceKey={i18nKey("learnToEarn.done")} />
-                    </div>
-                </div>
-                {#if selectedTab === "todo"}
-                    <div class="list">
-                        {#if internalNotAchieved.length === 0}
-                            <div class="empty">
-                                <div class="emoji">😎</div>
-                                <div class="msg">
-                                    <Translatable
-                                        resourceKey={i18nKey("learnToEarn.nothingLeftToDo")} />
-                                </div>
-                            </div>
-                        {:else}
-                            {#each internalNotAchieved as achievement}
-                                <div class="achievement">
-                                    <div class="no icon">
-                                        <CheckCircleOutline size={$iconSize} color={"#ccc"} />
-                                    </div>
-                                    <Translatable
-                                        resourceKey={i18nKey(`learnToEarn.${achievement}`)} />
-                                </div>
-                            {/each}
-                        {/if}
-                    </div>
-                {/if}
-                {#if selectedTab === "done"}
-                    <div class="list">
-                        {#if achieved.length === 0}
-                            <div class="empty">
-                                <div class="emoji">😢</div>
-                                <div class="msg">
-                                    <Translatable
-                                        resourceKey={i18nKey("learnToEarn.nothingDone")} />
-                                </div>
-                            </div>
-                        {:else}
-                            {#each achieved as achievement}
-                                <div class="achievement">
-                                    <div class="yes icon">
-                                        <CheckCircle
-                                            size={$iconSize}
-                                            color={"var(--toast-success-bg)"} />
-                                    </div>
-                                    <Translatable resourceKey={i18nKey(achievement)} />
-                                </div>
-                            {/each}
-                        {/if}
-                    </div>
-                {/if}
-                {#if selectedTab === "external"}
-                    <div class="list">
-                        {#if validExternalNotAchieved.length === 0}
-                            <div class="empty">
-                                <div class="emoji">😎</div>
-                                <div class="msg">
-                                    <Translatable
-                                        resourceKey={i18nKey("learnToEarn.nothingLeftToDo")} />
-                                </div>
-                            </div>
-                        {:else}
-                            {#each validExternalNotAchieved as achievement}
-                                <div class="achievement external">
-                                    <div class="external icon">
-                                        <img
-                                            class="logo"
-                                            src={client.achievementLogo(achievement.id)}
-                                            alt={achievement.name} />
-                                        <ExternalLink
-                                            iconColor={"var(--txt)"}
-                                            href={`${achievement.url}?oc_userid=${$currentUserIdStore}&oc_username=${$currentUserStore.username}`}>
-                                            {achievement.name}
-                                        </ExternalLink>
-                                        <div class="reward">
-                                            {achievement.chitReward.toLocaleString()}
-                                        </div>
-                                    </div>
-                                </div>
-                            {/each}
-                        {/if}
-                    </div>
-                {/if}
-            </div>
-        {/snippet}
-
-        {#snippet footer()}
-            <span class="footer">
-                <div class="perc">
-                    <Progress size={"45px"} percent={percComplete}>
-                        <Translatable
-                            resourceKey={i18nKey("learnToEarn.percentageComplete", {
-                                perc: percComplete,
-                            })} />
-                    </Progress>
-                </div>
-                <Button small onClick={onClose}>
-                    <Translatable resourceKey={i18nKey("close")} />
-                </Button>
-            </span>
-        {/snippet}
-    </ModalContent>
-</Overlay>
-
-<style lang="scss">
-    :global(.tab .icon .noselect) {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .achievement {
-        display: flex;
-        gap: $sp3;
-
-        &.external {
-            margin-bottom: $sp2;
-        }
-    }
-
-    .perc {
-        flex: auto;
-        color: var(--txt);
-    }
-
-    .footer {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        gap: $sp4;
-    }
-
-    .tabs {
-        display: flex;
-        align-items: center;
-        @include font(medium, normal, fs-90);
-        color: var(--txt-light);
-        gap: $sp5;
-        border-bottom: 1px solid var(--bd);
-        cursor: pointer;
-        margin-bottom: $sp5;
-
-        @include mobile() {
-            gap: $sp4;
-        }
-
-        .tab {
-            padding-bottom: 10px;
-            margin-bottom: -2px;
-            border-bottom: 3px solid transparent;
-            white-space: nowrap;
-            display: flex;
-            align-items: center;
-            gap: $sp2;
-
-            &.selected {
-                color: var(--txt);
-                border-bottom: 3px solid var(--txt);
-            }
-        }
-    }
-
-    .list {
-        height: 400px;
-        @include nice-scrollbar();
-    }
-
-    .empty {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        padding: 0 25%;
-        gap: $sp4;
-        text-align: center;
-
-        .emoji {
-            @include font(book, normal, fs-260);
-        }
-        .msg {
-            @include font(bold, normal, fs-140);
-        }
-    }
-
-    .logo {
-        width: toRem(20);
-        height: toRem(20);
-    }
-
-    .external {
-        display: flex;
-        align-items: center;
-        gap: $sp3;
-    }
-
-    .reward {
-        background: var(--button-bg);
-        color: var(--button-txt);
-        padding: $sp1 $sp2;
-        border-radius: $sp2;
-        @include font(light, normal, fs-70);
-    }
-</style>
diff --git a/frontend/app/src/components/home/profile/LinkAccounts.svelte b/frontend/app/src/components/home/profile/LinkAccounts.svelte
deleted file mode 100644
index c36fbfd8c7..0000000000
--- a/frontend/app/src/components/home/profile/LinkAccounts.svelte
+++ /dev/null
@@ -1,501 +0,0 @@
-<script lang="ts">
-    import { AuthClient } from "@icp-sdk/auth/client";
-    import { DelegationChain, ECDSAKeyIdentity } from "@icp-sdk/core/identity";
-    import { Principal } from "@icp-sdk/core/principal";
-    import {
-        AuthProvider,
-        InMemoryAuthClientStorage,
-        iconSize,
-        selectedAuthProviderStore,
-        type AuthenticationPrincipal,
-        type OpenChat,
-        type ResourceKey,
-        type WebAuthnKey,
-    } from "@client";
-    import { ErrorCode } from "@shared";
-    import { getContext, onMount } from "svelte";
-    import ArrowRightBoldOutline from "svelte-material-icons/ArrowRightBoldOutline.svelte";
-    import LinkVariantPlus from "svelte-material-icons/LinkVariantPlus.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { configKeys } from "../../../utils/config";
-    import {
-        EmailPollerError,
-        EmailPollerSuccess,
-        EmailSigninHandler,
-    } from "../../../utils/signin";
-    import AlertBox from "../../AlertBox.svelte";
-    import Button from "../../Button.svelte";
-    import ButtonGroup from "../../ButtonGroup.svelte";
-    import ErrorMessage from "../../ErrorMessage.svelte";
-    import InternetIdentityLogo from "../../landingpages/InternetIdentityLogo.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import EmailSigninFeedback from "../EmailSigninFeedback.svelte";
-    import ChooseSignInOption from "./ChooseSignInOption.svelte";
-    import SignInOption from "./SignInOption.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        explanations: ResourceKey[];
-        iiPrincipal: string | undefined;
-        linkInternetIdentity?: boolean;
-        onProceed?: () => void;
-        onClose?: () => void;
-    }
-
-    let {
-        explanations,
-        iiPrincipal = $bindable(),
-        linkInternetIdentity = true,
-        onProceed,
-        onClose,
-    }: Props = $props();
-
-    iiPrincipal;
-
-    type IdentityDetail = {
-        key: ECDSAKeyIdentity;
-        delegation: DelegationChain;
-        provider: AuthProvider;
-        webAuthnKey?: WebAuthnKey;
-    };
-
-    type ApproverIdentity = { kind: "approver"; initiator: IdentityDetail };
-    type InitiatorIdentity = { kind: "initiator" };
-    type ReadyToLink = {
-        kind: "ready_to_link";
-        approver: IdentityDetail;
-        initiator: IdentityDetail;
-    };
-    type LinkStage = ApproverIdentity | InitiatorIdentity | ReadyToLink;
-
-    type ProviderStep =
-        | "choose_provider"
-        | "choose_eth_wallet"
-        | "choose_sol_wallet"
-        | "signing_in_with_email";
-
-    let error: string | undefined = $state();
-    let emailSigninHandler = new EmailSigninHandler(client, "account_linking", false);
-    let step: "explain" | "linking" = $state("explain");
-    let substep = $state<LinkStage>({ kind: "initiator" });
-    let emailInvalid = $state(false);
-    let email = $state("");
-    let providerStep: ProviderStep = $state("choose_provider");
-    let linking = $state(false);
-    let loggingInInitiator = false;
-    let verificationCode: string | undefined = $state(undefined);
-    let accounts: (AuthenticationPrincipal & { provider: AuthProvider })[] = $state([]);
-
-    let currentIdentity = $derived(accounts.find((a) => a.isCurrentIdentity));
-    let currentProvider = $derived(currentIdentity?.provider ?? $selectedAuthProviderStore);
-    let restrictTo = $derived(
-        substep.kind === "approver" && currentProvider !== undefined
-            ? new Set<string>([currentProvider])
-            : new Set<string>([AuthProvider.PASSKEY, AuthProvider.II, AuthProvider.EMAIL]),
-    );
-
-    onMount(() => {
-        client.getAuthenticationPrincipals().then((a) => (accounts = a));
-        emailSigninHandler.addEventListener("email_signin_event", emailEvent);
-        return () => {
-            emailSigninHandler.removeEventListener("email_signin_event", emailEvent);
-            emailSigninHandler.destroy();
-        };
-    });
-
-    function emailEvent(ev: Event): void {
-        if (ev instanceof EmailPollerError) {
-            error = "identity.failure.pollingError";
-        }
-
-        if (ev instanceof EmailPollerSuccess) {
-            authComplete(AuthProvider.EMAIL, ev.detail);
-        }
-    }
-
-    function initiateLinking() {
-        step = "linking";
-    }
-
-    // This is called both for the initiator and the approver
-    async function loginProvider(provider: AuthProvider) {
-        if (substep.kind === "ready_to_link") return;
-
-        const generalError = `identity.failure.login_${substep.kind}`;
-
-        if (emailInvalid && provider === AuthProvider.EMAIL) {
-            return;
-        }
-
-        localStorage.setItem(configKeys.selectedAuthEmail, email);
-        error = undefined;
-
-        if (provider === AuthProvider.PASSKEY) {
-            if (substep.kind === "initiator") {
-                const [identity, delegation, webAuthnKey] = await client.signUpWithWebAuthn(false);
-                substep = {
-                    kind: "approver",
-                    initiator: {
-                        key: identity,
-                        delegation,
-                        webAuthnKey,
-                        provider: AuthProvider.PASSKEY,
-                    },
-                };
-            } else {
-                const initiator = substep.initiator;
-                const [identity, delegation, webAuthnKey] =
-                    await client.reSignInWithCurrentWebAuthnIdentity();
-                substep = {
-                    kind: "ready_to_link",
-                    initiator,
-                    approver: {
-                        key: identity,
-                        delegation,
-                        webAuthnKey,
-                        provider: AuthProvider.PASSKEY,
-                    },
-                };
-            }
-        } else if (provider === AuthProvider.EMAIL) {
-            providerStep = "signing_in_with_email";
-            emailSigninHandler.generateMagicLink(email).then((resp) => {
-                if (resp.kind === "success") {
-                    verificationCode = resp.code;
-                } else if (resp.kind === "email_invalid") {
-                    error = "loginDialog.invalidEmail";
-                } else if (resp.kind === "failed_to_send_email") {
-                    console.debug("generateMagicLink failed_to_send_email", resp.error);
-                    error = "loginDialog.failedToSendEmail";
-                } else {
-                    error = generalError;
-                }
-            });
-        } else if (provider === AuthProvider.ETH) {
-            providerStep = "choose_eth_wallet";
-        } else if (provider === AuthProvider.SOL) {
-            providerStep = "choose_sol_wallet";
-        } else {
-            // This is the II / NFID case
-            const identity = await ECDSAKeyIdentity.generate();
-            const storage = new InMemoryAuthClientStorage();
-            const authClient = AuthClient.create({
-                storage,
-                identity: identity,
-            });
-            authClient
-                .then((c) => {
-                    c.login({
-                        ...client.getAuthClientOptions(provider),
-                        onSuccess: async () => {
-                            const delegation = await storage.get("delegation");
-                            if (delegation) {
-                                const principal = c.getIdentity().getPrincipal().toString();
-                                if (
-                                    substep.kind === "approver" &&
-                                    principal !== client.AuthPrincipal
-                                ) {
-                                    error = "identity.failure.principalMismatch";
-                                } else {
-                                    if (substep.kind === "initiator") {
-                                        iiPrincipal = principal;
-                                        substep = {
-                                            kind: "approver",
-                                            initiator: {
-                                                key: identity,
-                                                delegation: DelegationChain.fromJSON(delegation),
-                                                provider: AuthProvider.II,
-                                            },
-                                        };
-                                    } else if (substep.kind === "approver") {
-                                        substep = {
-                                            kind: "ready_to_link",
-                                            initiator: substep.initiator,
-                                            approver: {
-                                                key: identity,
-                                                delegation: DelegationChain.fromJSON(delegation),
-                                                provider,
-                                            },
-                                        };
-                                    }
-                                }
-                            }
-                        },
-                        onError: (err) => {
-                            console.log(`Failed to log into ${substep.kind}: `, err);
-                            error = generalError;
-                        },
-                    });
-                })
-                .catch((err) => {
-                    console.log(`Failed to log into ${substep.kind}: `, err);
-                    error = generalError;
-                });
-        }
-    }
-
-    // This is where we login in with the Internet Identity that we want to link to our existing OC account aka the Initiator
-    async function loginInternetIdentity() {
-        return loginProvider(AuthProvider.II);
-    }
-
-    function authComplete(
-        provider: AuthProvider.ETH | AuthProvider.SOL | AuthProvider.EMAIL,
-        detail: { kind: "success"; key: ECDSAKeyIdentity; delegation: DelegationChain },
-    ) {
-        providerStep = "choose_provider";
-        if (substep.kind === "approver") {
-            substep = {
-                kind: "ready_to_link",
-                initiator: substep.initiator,
-                approver: {
-                    key: detail.key,
-                    delegation: detail.delegation,
-                    provider,
-                },
-            };
-        } else if (substep.kind === "initiator") {
-            substep = {
-                kind: "approver",
-                initiator: {
-                    key: detail.key,
-                    delegation: detail.delegation,
-                    provider,
-                },
-            };
-        }
-    }
-
-    // Link the two identities that we have built together
-    function linkIdentities() {
-        if (substep.kind !== "ready_to_link" || currentIdentity === undefined) return;
-
-        const { initiator, approver } = substep;
-
-        const approverPrincipal = Principal.selfAuthenticating(
-            new Uint8Array(approver.delegation.publicKey),
-        ).toString();
-
-        if (currentIdentity.principal !== approverPrincipal) {
-            console.log("Principal mismatch: ", currentIdentity.principal, approverPrincipal);
-            error = "identity.failure.principalMismatch";
-            substep = { kind: "initiator" };
-            return;
-        }
-
-        error = undefined;
-        linking = true;
-        client
-            .linkIdentities(
-                initiator.key,
-                initiator.delegation,
-                initiator.provider === AuthProvider.II,
-                initiator.webAuthnKey,
-                approver.key,
-                approver.delegation,
-            )
-            .then((resp) => {
-                if (typeof resp === "object") {
-                    if (resp.kind === "success") {
-                        onProceed?.();
-                    } else if (resp.code === ErrorCode.PrincipalAlreadyUsed) {
-                        console.log("Identity already linked to another OpenChat account: ", resp);
-                        error = "identity.failure.alreadyLinked";
-                        substep = { kind: "initiator" };
-                    } else {
-                        console.log("Failed to link identities: ", resp);
-                        error = "identity.failure.link";
-                        substep = { kind: "initiator" };
-                    }
-                } else {
-                    // This branch will be removed once the Identity canister is fully
-                    // migrated over to returning the standardised error codes
-                    if (resp === "success") {
-                        onProceed?.();
-                    } else if (resp === "already_linked_to_principal") {
-                        console.log("Identity already linked by you: ", resp);
-                        error = "identity.failure.alreadyLinked";
-                    } else if (resp === "already_registered") {
-                        console.log("Identity already linked by someone else: ", resp);
-                        error = "identity.failure.alreadyLinked";
-                        substep = { kind: "initiator" };
-                    } else {
-                        console.log("Failed to link identities: ", resp);
-                        error = "identity.failure.link";
-                        substep = { kind: "initiator" };
-                    }
-                }
-            })
-            .finally(() => (linking = false));
-    }
-
-    function reset() {
-        emailSigninHandler.stopPolling();
-        providerStep = "choose_provider";
-        error = undefined;
-        step = "explain";
-        substep = { kind: "initiator" };
-    }
-</script>
-
-<div class="header">
-    <LinkVariantPlus size={$iconSize} color={"var(--txt)"} />
-    <div class="title">
-        <Translatable resourceKey={i18nKey("identity.linkIdentity")} />
-    </div>
-</div>
-
-<div class="body">
-    {#if error !== undefined}
-        <p class="info">
-            <ErrorMessage>
-                <Translatable resourceKey={i18nKey(error)} />
-            </ErrorMessage>
-        </p>
-    {:else if step === "explain"}
-        <AlertBox>
-            {#each explanations as explanation}
-                <p class="info">
-                    <Translatable resourceKey={explanation} />
-                </p>
-            {/each}
-        </AlertBox>
-    {:else if step === "linking"}
-        {#if substep.kind === "ready_to_link"}
-            <div class="info">
-                <Translatable resourceKey={i18nKey("identity.linkTwoIdentities")} />
-            </div>
-            <div class="identities">
-                <SignInOption
-                    hollow
-                    provider={substep.initiator.provider}
-                    name={i18nKey(substep.initiator.provider)} />
-                <ArrowRightBoldOutline size={$iconSize} color={"var(--icon-txt)"} />
-                <SignInOption
-                    hollow
-                    provider={substep.approver.provider}
-                    name={i18nKey(substep.approver.provider)} />
-            </div>
-        {:else if substep.kind === "initiator" && linkInternetIdentity}
-            <div class="info">
-                <Translatable resourceKey={i18nKey("identity.signInNext")} />
-            </div>
-            <Button
-                loading={loggingInInitiator}
-                disabled={loggingInInitiator}
-                onClick={loginInternetIdentity}>
-                <span class="link-ii-logo">
-                    <InternetIdentityLogo />
-                </span>
-                <Translatable resourceKey={i18nKey("loginDialog.signin")} /></Button>
-        {:else if providerStep === "choose_provider"}
-            <div class="info center">
-                <Translatable resourceKey={i18nKey(`identity.signIn_${substep.kind}`)} />
-            </div>
-            <ChooseSignInOption
-                mode={"signin"}
-                {restrictTo}
-                {currentProvider}
-                showMore={substep.kind === "initiator"}
-                bind:emailInvalid
-                bind:email
-                onLogin={loginProvider} />
-        {:else if providerStep === "choose_eth_wallet"}
-            <div class="eth-options">
-                {#await import("../SigninWithEth.svelte")}
-                    <div class="loading">...</div>
-                {:then { default: SigninWithEth }}
-                    <SigninWithEth
-                        assumeIdentity={false}
-                        onConnected={(ev) => authComplete(AuthProvider.ETH, ev)} />
-                {/await}
-            </div>
-        {:else if providerStep === "choose_sol_wallet"}
-            <div class="sol-options">
-                {#await import("../SigninWithSol.svelte")}
-                    <div class="loading">...</div>
-                {:then { default: SigninWithSol }}
-                    <SigninWithSol
-                        assumeIdentity={false}
-                        onConnected={(ev) => authComplete(AuthProvider.SOL, ev)} />
-                {/await}
-            </div>
-        {:else if providerStep === "signing_in_with_email"}
-            <EmailSigninFeedback
-                code={verificationCode}
-                polling={$emailSigninHandler}
-                onCopy={(code) => emailSigninHandler.copyCode(code)} />
-            {#if error !== undefined}
-                <ErrorMessage><Translatable resourceKey={i18nKey(error)} /></ErrorMessage>
-            {/if}
-        {/if}
-    {/if}
-</div>
-
-<div class="footer">
-    <ButtonGroup>
-        <Button secondary onClick={onClose}
-            ><Translatable resourceKey={i18nKey("cancel")} /></Button>
-        {#if error !== undefined}
-            <Button secondary onClick={reset}
-                ><Translatable resourceKey={i18nKey("identity.tryAgain")} /></Button>
-        {:else if step === "explain"}
-            {#if linkInternetIdentity}
-                <Button onClick={initiateLinking}>
-                    <span class="link-ii-logo">
-                        <InternetIdentityLogo />
-                    </span>
-                    <Translatable resourceKey={i18nKey("identity.link")} /></Button>
-            {:else}
-                <Button onClick={initiateLinking}>
-                    <Translatable resourceKey={i18nKey("identity.linkedAccounts.start")} /></Button>
-            {/if}
-        {:else if step === "linking"}
-            <Button secondary onClick={reset}
-                ><Translatable resourceKey={i18nKey("identity.back")} /></Button>
-            {#if substep.kind === "ready_to_link"}
-                <Button loading={linking} disabled={linking} onClick={linkIdentities}>
-                    <Translatable resourceKey={i18nKey("identity.link")} /></Button>
-            {/if}
-        {/if}
-    </ButtonGroup>
-</div>
-
-<style lang="scss">
-    .header {
-        @include font(bold, normal, fs-130, 29);
-        margin-bottom: $sp4;
-        display: flex;
-        align-items: center;
-        gap: $sp3;
-    }
-
-    .body,
-    .header {
-        margin-bottom: $sp5;
-    }
-
-    .info {
-        margin-bottom: $sp4;
-
-        &.center {
-            text-align: center;
-        }
-    }
-
-    .eth-options,
-    .sol-options {
-        text-align: center;
-        display: flex;
-        flex-direction: column;
-        gap: $sp4;
-    }
-
-    .identities {
-        display: flex;
-        gap: $sp3;
-        justify-content: space-between;
-        align-items: center;
-    }
-</style>
diff --git a/frontend/app/src/components/home/profile/ProfileRole.svelte b/frontend/app/src/components/home/profile/ProfileRole.svelte
deleted file mode 100644
index cc6d5eff22..0000000000
--- a/frontend/app/src/components/home/profile/ProfileRole.svelte
+++ /dev/null
@@ -1,68 +0,0 @@
-<script lang="ts">
-    import { type CommunitySummary, type Member, type MultiUserChat, ROLE_NONE } from "@client";
-    import Translatable from "../../Translatable.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import RoleIcon from "./RoleIcon.svelte";
-    import WithRole from "./WithRole.svelte";
-
-    interface Props {
-        userId: string;
-        community: CommunitySummary | undefined;
-        chat: MultiUserChat | undefined;
-        communityMembers: Map<string, Member>;
-        chatMembers: Map<string, Member>;
-    }
-
-    let { userId, community, chat, communityMembers, chatMembers }: Props = $props();
-</script>
-
-<WithRole {userId} {chatMembers} {communityMembers}>
-    {#snippet children(communityRole, chatRole)}
-        <div class="wrapper">
-            {#if community !== undefined && communityRole !== ROLE_NONE}
-                <div class="role-col">
-                    <Translatable
-                        resourceKey={i18nKey(
-                            "permissions.currentRole",
-                            { role: communityRole },
-                            "community",
-                            false,
-                        )} />
-                    <RoleIcon level="community" role={communityRole} />
-                </div>
-            {/if}
-            {#if chat !== undefined && chatRole !== ROLE_NONE}
-                <div class="role-col">
-                    <Translatable
-                        resourceKey={i18nKey(
-                            "permissions.currentRole",
-                            { role: chatRole },
-                            chat.level,
-                            false,
-                        )} />
-                    <RoleIcon level={chat.level} role={chatRole} />
-                </div>
-            {/if}
-        </div>
-    {/snippet}
-</WithRole>
-
-<style lang="scss">
-    .wrapper {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-    }
-
-    .role-col {
-        @include font(light, normal, fs-60);
-        display: flex;
-        align-items: center;
-        gap: $sp2;
-        margin-bottom: $sp2;
-
-        @include mobile() {
-            @include font(light, normal, fs-90);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/profile/ReAuthenticate.svelte b/frontend/app/src/components/home/profile/ReAuthenticate.svelte
deleted file mode 100644
index 47760e610b..0000000000
--- a/frontend/app/src/components/home/profile/ReAuthenticate.svelte
+++ /dev/null
@@ -1,243 +0,0 @@
-<script lang="ts">
-    import { AuthClient } from "@icp-sdk/auth/client";
-    import { DelegationChain, DelegationIdentity, ECDSAKeyIdentity } from "@icp-sdk/core/identity";
-    import {
-        AuthProvider,
-        InMemoryAuthClientStorage,
-        selectedAuthProviderStore,
-        type OpenChat,
-        type ResourceKey,
-    } from "@client";
-    import { getContext, onMount } from "svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { configKeys } from "../../../utils/config";
-    import {
-        EmailPollerError,
-        EmailPollerSuccess,
-        EmailSigninHandler,
-    } from "../../../utils/signin";
-    import ErrorMessage from "../../ErrorMessage.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import EmailSigninFeedback from "../EmailSigninFeedback.svelte";
-    import ChooseSignInOption from "./ChooseSignInOption.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        autoSelect?: boolean;
-        message: ResourceKey;
-        onSuccess: (args: {
-            key: ECDSAKeyIdentity;
-            delegation: DelegationChain;
-            provider: AuthProvider;
-            signInProofJwt: string;
-        }) => void;
-    }
-
-    let { message, onSuccess, autoSelect = false }: Props = $props();
-
-    let error: string | undefined = $state();
-    let emailSigninHandler = new EmailSigninHandler(client, "account_linking", false);
-    let emailInvalid = $state(false);
-    let email = $state("");
-    let authStep:
-        | "choose_provider"
-        | "choose_eth_wallet"
-        | "choose_sol_wallet"
-        | "signing_in_with_email" = $state("choose_provider");
-    let verificationCode: string | undefined = $state(undefined);
-
-    onMount(() => {
-        emailSigninHandler.addEventListener("email_signin_event", emailEvent);
-        if (autoSelect) {
-            login($selectedAuthProviderStore);
-        }
-        return () => {
-            emailSigninHandler.removeEventListener("email_signin_event", emailEvent);
-            emailSigninHandler.destroy();
-        };
-    });
-
-    function emailEvent(ev: Event): void {
-        if (ev instanceof EmailPollerError) {
-            error = "identity.failure.pollingError";
-        }
-
-        if (ev instanceof EmailPollerSuccess) {
-            authComplete(ev.detail.key, ev.detail.delegation, AuthProvider.EMAIL);
-        }
-    }
-
-    // This is where we login in with the provider that we are currently signed in with (which can be any provider type)
-    async function login(provider: AuthProvider) {
-        if (emailInvalid && provider === AuthProvider.EMAIL) {
-            return;
-        }
-
-        localStorage.setItem(configKeys.selectedAuthEmail, email);
-        selectedAuthProviderStore.set(provider);
-        error = undefined;
-
-        if (provider === AuthProvider.PASSKEY) {
-            try {
-                const [key, delegation] = await client.reSignInWithCurrentWebAuthnIdentity();
-                await authComplete(
-                    key,
-                    delegation,
-                    provider,
-                );
-            } catch (err) {
-                console.error("An error occurred doing passkey auth: ", err);
-                error = "identity.failure.loginApprover";
-            }
-        } else if (provider === AuthProvider.EMAIL) {
-            authStep = "signing_in_with_email";
-            emailSigninHandler.generateMagicLink(email).then((resp) => {
-                if (resp.kind === "success") {
-                    verificationCode = resp.code;
-                } else if (resp.kind === "email_invalid") {
-                    error = "loginDialog.invalidEmail";
-                } else if (resp.kind === "failed_to_send_email") {
-                    console.debug("generateMagicLink failed_to_send_email", resp.error);
-                    error = "loginDialog.failedToSendEmail";
-                } else {
-                    error = "identity.failure.loginApprover";
-                }
-            });
-        } else if (provider === AuthProvider.ETH) {
-            authStep = "choose_eth_wallet";
-        } else if (provider === AuthProvider.SOL) {
-            authStep = "choose_sol_wallet";
-        } else {
-            // This is the II / NFID case
-            const identity = await ECDSAKeyIdentity.generate();
-            const storage = new InMemoryAuthClientStorage();
-            const authClient = AuthClient.create({
-                storage,
-                identity: identity,
-            });
-            authClient
-                .then((c) => {
-                    c.login({
-                        ...client.getAuthClientOptions(provider),
-                        onSuccess: async () => {
-                            const delegation = await storage.get("delegation");
-                            if (delegation) {
-                                const principal = c.getIdentity().getPrincipal().toString();
-                                if (principal !== client.AuthPrincipal) {
-                                    error = "identity.failure.principalMismatch";
-                                } else {
-                                    await authComplete(
-                                        identity,
-                                        DelegationChain.fromJSON(delegation),
-                                        provider,
-                                    );
-                                }
-                            }
-                        },
-                        onError: (err) => {
-                            console.log("Failed to log into approver: ", err);
-                            error = "identity.failure.loginApprover";
-                        },
-                    });
-                })
-                .catch((err) => {
-                    console.log("Failed to log into approver: ", err);
-                    error = "identity.failure.loginApprover";
-                });
-        }
-    }
-
-    async function authComplete(
-        key: ECDSAKeyIdentity,
-        delegation: DelegationChain,
-        provider: AuthProvider,
-    ) {
-        const identity = DelegationIdentity.fromDelegation(key, delegation);
-        const principal = identity.getPrincipal().toString();
-        if (principal !== client.AuthPrincipal) {
-            const authPrincipals = await client.getAuthenticationPrincipals();
-            const isPrincipalValid = authPrincipals.some((p) => p.principal === principal);
-            if (!isPrincipalValid) {
-                authStep = "choose_provider";
-                error = "identity.failure.principalMismatch";
-                return;
-            }
-        }
-
-        const signInProofJwt = await client.getSignInProof(key, delegation);
-        onSuccess({
-            key,
-            delegation,
-            provider,
-            signInProofJwt,
-        });
-    }
-</script>
-
-<div class="body">
-    {#if authStep === "choose_provider"}
-        <div class="info center">
-            <Translatable resourceKey={message} />
-        </div>
-        <ChooseSignInOption mode={"signin"} bind:emailInvalid bind:email onLogin={login} />
-    {:else if authStep === "choose_eth_wallet"}
-        <div class="eth-options">
-            {#await import("../SigninWithEth.svelte")}
-                <div class="loading">...</div>
-            {:then { default: SigninWithEth }}
-                <SigninWithEth
-                    assumeIdentity={false}
-                    onConnected={(ev) => authComplete(ev.key, ev.delegation, AuthProvider.ETH)} />
-            {/await}
-        </div>
-    {:else if authStep === "choose_sol_wallet"}
-        <div class="sol-options">
-            {#await import("../SigninWithSol.svelte")}
-                <div class="loading">...</div>
-            {:then { default: SigninWithSol }}
-                <SigninWithSol
-                    assumeIdentity={false}
-                    onConnected={(ev) => authComplete(ev.key, ev.delegation, AuthProvider.SOL)} />
-            {/await}
-        </div>
-    {:else if authStep === "signing_in_with_email"}
-        <EmailSigninFeedback
-            code={verificationCode}
-            polling={$emailSigninHandler}
-            onCopy={(code) => emailSigninHandler.copyCode(code)} />
-    {/if}
-    {#if error !== undefined}
-        <p class="info">
-            <ErrorMessage>
-                <Translatable resourceKey={i18nKey(error)} />
-            </ErrorMessage>
-        </p>
-    {/if}
-</div>
-
-<style lang="scss">
-    .body {
-        width: 100%;
-
-        @include not-mobile() {
-            min-width: 350px;
-        }
-    }
-
-    .info {
-        margin-bottom: $sp4;
-
-        &.center {
-            text-align: center;
-        }
-    }
-
-    .eth-options,
-    .sol-options {
-        text-align: center;
-        display: flex;
-        flex-direction: column;
-        gap: $sp4;
-    }
-</style>
diff --git a/frontend/app/src/components/home/profile/ReAuthenticateModal.svelte b/frontend/app/src/components/home/profile/ReAuthenticateModal.svelte
deleted file mode 100644
index aa98ae7029..0000000000
--- a/frontend/app/src/components/home/profile/ReAuthenticateModal.svelte
+++ /dev/null
@@ -1,32 +0,0 @@
-<script lang="ts">
-    import type { DelegationChain, ECDSAKeyIdentity } from "@icp-sdk/core/identity";
-    import Overlay from "@src/components/Overlay.svelte";
-    import Translatable from "@src/components/Translatable.svelte";
-    import type { AuthProvider, ResourceKey } from "@client";
-    import ModalContent from "../../ModalContent.svelte";
-    import ReAuthenticate from "./ReAuthenticate.svelte";
-    interface Props {
-        message: ResourceKey;
-        title: ResourceKey;
-        onSuccess: (args: {
-            key: ECDSAKeyIdentity;
-            delegation: DelegationChain;
-            provider: AuthProvider;
-            signInProofJwt: string;
-        }) => void;
-        onCancel: () => void;
-    }
-
-    let { onSuccess, message, onCancel, title }: Props = $props();
-</script>
-
-<Overlay dismissible onClose={onCancel}>
-    <ModalContent hideFooter closeIcon onClose={onCancel}>
-        {#snippet header()}
-            <Translatable resourceKey={title}></Translatable>
-        {/snippet}
-        {#snippet body()}
-            <ReAuthenticate autoSelect {onSuccess} {message} />
-        {/snippet}
-    </ModalContent>
-</Overlay>
diff --git a/frontend/app/src/components/home/profile/ReceiveCrypto.svelte b/frontend/app/src/components/home/profile/ReceiveCrypto.svelte
deleted file mode 100644
index 0378d88a74..0000000000
--- a/frontend/app/src/components/home/profile/ReceiveCrypto.svelte
+++ /dev/null
@@ -1,98 +0,0 @@
-<script lang="ts">
-    import {
-        cryptoBalanceStore,
-        cryptoLookup,
-        mobileWidth,
-        Poller,
-    } from "@client";
-    import { _ } from "svelte-i18n";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Button from "../../Button.svelte";
-    import ButtonGroup from "../../ButtonGroup.svelte";
-    import ErrorMessage from "../../ErrorMessage.svelte";
-    import ModalContent from "../../ModalContent.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import AccountInfo from "../AccountInfo.svelte";
-    import BalanceWithRefresh from "../BalanceWithRefresh.svelte";
-    import { onDestroy } from "svelte";
-
-    interface Props {
-        ledger: string;
-        onClose: () => void;
-    }
-
-    let { ledger, onClose }: Props = $props();
-
-    let error: string | undefined = $state(undefined);
-
-    let tokenDetails = $derived($cryptoLookup.get(ledger)!);
-    let symbol = $derived(tokenDetails.symbol);
-    let title = $derived(i18nKey(`cryptoAccount.receiveToken`, { symbol }));
-    let balanceWithRefresh: BalanceWithRefresh;
-
-    const refreshBalancePoller = new Poller(() => balanceWithRefresh?.refresh(), 10_000);
-
-    onDestroy(() => refreshBalancePoller.stop());
-
-    function onBalanceRefreshed() {
-        error = undefined;
-    }
-
-    function onBalanceRefreshError(err: string) {
-        error = $_(err);
-    }
-</script>
-
-<ModalContent>
-    {#snippet header()}
-        <span class="header">
-            <div class="main-title"><Translatable resourceKey={title} /></div>
-            <BalanceWithRefresh
-                bind:this={balanceWithRefresh}
-                {ledger}
-                value={$cryptoBalanceStore.get(ledger) ?? 0n}
-                label={i18nKey("cryptoAccount.shortBalanceLabel")}
-                bold
-                onRefreshed={onBalanceRefreshed}
-                onError={onBalanceRefreshError} />
-        </span>
-    {/snippet}
-    {#snippet body()}
-        <form class="body">
-            <AccountInfo qrSize={"larger"} centered {ledger} />
-            {#if error}
-                <ErrorMessage>{error}</ErrorMessage>
-            {/if}
-        </form>
-    {/snippet}
-    {#snippet footer()}
-        <span>
-            <ButtonGroup>
-                <Button tiny={$mobileWidth} onClick={onClose}
-                    ><Translatable resourceKey={i18nKey("close")} /></Button>
-            </ButtonGroup>
-        </span>
-    {/snippet}
-</ModalContent>
-
-<style lang="scss">
-    .header {
-        display: flex;
-        align-items: flex-start;
-        justify-content: space-between;
-        gap: $sp2;
-
-        .main-title {
-            flex: auto;
-        }
-    }
-    .how-to {
-        margin-top: $sp3;
-    }
-
-    .body {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-</style>
diff --git a/frontend/app/src/components/home/profile/RestrictedFeature.svelte b/frontend/app/src/components/home/profile/RestrictedFeature.svelte
deleted file mode 100644
index ceb7b2260d..0000000000
--- a/frontend/app/src/components/home/profile/RestrictedFeature.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-    import type { Feature } from "@client";
-    import ModalContent from "../../ModalContent.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import ButtonGroup from "../../ButtonGroup.svelte";
-    import Button from "../../Button.svelte";
-
-    interface Props {
-        feature: Feature;
-        onClose: () => void;
-    }
-
-    let { feature, onClose }: Props = $props();
-</script>
-
-<ModalContent>
-    {#snippet header()}
-        <Translatable resourceKey={i18nKey("restricted.title")} />
-    {/snippet}
-    {#snippet body()}
-        <form class="body">
-            {#if feature === "swap"}
-                <Translatable resourceKey={i18nKey("restricted.swap")} />
-            {:else}
-                <Translatable resourceKey={i18nKey("restricted.generic")} />
-            {/if}
-        </form>
-    {/snippet}
-    {#snippet footer()}
-        <ButtonGroup>
-            <Button onClick={onClose}><Translatable resourceKey={i18nKey("close")} /></Button>
-        </ButtonGroup>
-    {/snippet}
-</ModalContent>
diff --git a/frontend/app/src/components/home/profile/SendCrypto.svelte b/frontend/app/src/components/home/profile/SendCrypto.svelte
deleted file mode 100644
index 6e3d270f29..0000000000
--- a/frontend/app/src/components/home/profile/SendCrypto.svelte
+++ /dev/null
@@ -1,425 +0,0 @@
-<script lang="ts">
-    import {
-        BTC_SYMBOL,
-        CKBTC_SYMBOL,
-        type CkbtcMinterWithdrawalInfo,
-        cryptoBalanceStore,
-        cryptoLookup,
-        currentUserIdStore,
-        currentUserStore,
-        type EvmChain,
-        iconSize,
-        ICP_SYMBOL,
-        Lazy,
-        mobileWidth,
-        type NamedAccount,
-        type OneSecTransferFees,
-        type OpenChat,
-        type ResourceKey,
-    } from "@client";
-    import { ErrorCode, isAccountIdentifierValid, isICRCAddressValid } from "@shared";
-    import { getContext, onMount } from "svelte";
-    import QrcodeScan from "svelte-material-icons/QrcodeScan.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { pinNumberErrorMessageStore } from "../../../stores/pinNumber";
-    import { toastStore } from "../../../stores/toast";
-    import { Debouncer } from "../../../utils/debouncer";
-    import Button from "../../Button.svelte";
-    import ButtonGroup from "../../ButtonGroup.svelte";
-    import ErrorMessage from "../../ErrorMessage.svelte";
-    import Input from "../../Input.svelte";
-    import ModalContent from "../../ModalContent.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import BalanceWithRefresh from "../BalanceWithRefresh.svelte";
-    import NetworkSelector from "../NetworkSelector.svelte";
-    import TokenInput from "../TokenInput.svelte";
-    import AccountSelector from "./AccountSelector.svelte";
-    import SaveAccount from "./SaveAccount.svelte";
-    import Scanner from "./Scanner.svelte";
-
-    interface Props {
-        ledger: string;
-        onClose: () => void;
-    }
-
-    let { ledger, onClose }: Props = $props();
-
-    const client = getContext<OpenChat>("client");
-
-    let error: ResourceKey | undefined = $state();
-    let amountToSend: bigint = $state(0n);
-    let ckbtcMinterWithdrawalInfo = $state<CkbtcMinterWithdrawalInfo>();
-    let busy = $state(false);
-    let valid = $state(false);
-    let validAccountName = $state(false);
-    let capturingAccount = $state(false);
-    let validAmount = $state(false);
-    let targetAccount: string = $state("");
-
-    let scanner: Scanner;
-    let accounts: NamedAccount[] = $state([]);
-    let saveAccountElement: SaveAccount;
-    let balanceWithRefresh: BalanceWithRefresh;
-    const ckbtcMinterInfoDebouncer = new Debouncer(getCkbtcMinterWithdrawalInfo, 500);
-
-    let cryptoBalance = $derived($cryptoBalanceStore.get(ledger) ?? 0n);
-    let tokenDetails = $derived($cryptoLookup.get(ledger)!);
-    let account = $derived(
-        tokenDetails?.symbol === ICP_SYMBOL ? $currentUserStore.cryptoAccount : $currentUserIdStore,
-    );
-    let symbol = $derived(tokenDetails.symbol);
-    let selectedNetwork = $state<string>();
-    let isBtc = $derived(symbol === BTC_SYMBOL);
-    let isBtcNetwork = $derived(selectedNetwork === BTC_SYMBOL);
-    let oneSecEnabled = $derived(
-        tokenDetails.oneSecEnabled && tokenDetails.evmContractAddresses.length > 0,
-    );
-    let isOneSecNetwork = $derived(oneSecEnabled && selectedNetwork !== ICP_SYMBOL);
-    let networks = $derived.by(() => {
-        if (isBtc) {
-            return [BTC_SYMBOL, CKBTC_SYMBOL];
-        } else if (oneSecEnabled) {
-            return client.oneSecGetNetworks(tokenDetails.symbol);
-        } else {
-            return [];
-        }
-    });
-    let transferFees = $derived(tokenDetails?.transferFee ?? 0n);
-    let targetAccountValid = $derived.by(() => {
-        if (targetAccount.length === 0 || targetAccount === account) return false;
-        if (isBtc) return targetAccount.length >= 14;
-        if (isOneSecNetwork) return targetAccount.length === 42;
-        if (isICRCAddressValid(targetAccount)) return true;
-        if (symbol === ICP_SYMBOL && isAccountIdentifierValid(targetAccount)) return true;
-        return false;
-    });
-
-    let oneSecFees = $state<OneSecTransferFees[]>();
-    let oneSecFeesForToken = $derived.by(() => {
-        if (!isOneSecNetwork || oneSecFees === undefined) return undefined;
-        return oneSecFees.find(
-            (f) => f.sourceToken === tokenDetails.symbol && f.destinationChain === selectedNetwork,
-        );
-    });
-
-    let minAmount = $derived.by(() => {
-        if (isBtcNetwork && ckbtcMinterWithdrawalInfo !== undefined) {
-            return ckbtcMinterWithdrawalInfo.minWithdrawalAmount;
-        }
-        if (isOneSecNetwork && oneSecFeesForToken !== undefined) {
-            return oneSecFeesForToken.minAmount;
-        }
-        return BigInt(0);
-    });
-    let validSend = $derived(validAmount && targetAccountValid);
-    $effect(() => {
-        // If sending via the BTC network we must wait until the ckbtc minter info is loaded to correctly apply the min amount
-        valid =
-            (capturingAccount ? validAccountName : validSend) &&
-            (!isBtcNetwork || ckbtcMinterWithdrawalInfo !== undefined);
-    });
-    let title = $derived(i18nKey("cryptoAccount.sendToken", { symbol }));
-
-    let remainingBalance = $derived(
-        amountToSend > BigInt(0) ? cryptoBalance - amountToSend - transferFees : cryptoBalance,
-    );
-
-    let errorMessage = $derived(error !== undefined ? error : $pinNumberErrorMessageStore);
-    let networkFee = $derived.by(() => {
-        if (isBtcNetwork && ckbtcMinterWithdrawalInfo !== undefined) {
-            return ckbtcMinterWithdrawalInfo.feeEstimate;
-        } else if (isOneSecNetwork && oneSecFeesForToken !== undefined) {
-            return (
-                oneSecFeesForToken.latestTransferFee +
-                (amountToSend * BigInt(100 * oneSecFeesForToken.protocolFeePercent)) / BigInt(10000)
-            );
-        } else {
-            return undefined;
-        }
-    });
-    let networkFeeFormatted = $derived(
-        networkFee === undefined
-            ? undefined
-            : `~${client.formatTokens(networkFee, tokenDetails.decimals)}`,
-    );
-
-    onMount(async () => {
-        accounts = await client.loadSavedCryptoAccounts();
-
-        if (isBtc) {
-            getCkbtcMinterWithdrawalInfo(BigInt(0));
-        }
-    });
-
-    // Whenever the networks list changes, autoselect the first one
-    $effect(() => {
-        selectedNetwork = networks[0];
-    });
-
-    const oneSecFeesPromise = new Lazy(() => client.oneSecGetTransferFees());
-    $effect(() => {
-        if (isBtcNetwork) {
-            ckbtcMinterInfoDebouncer.execute(amountToSend);
-        } else if (isOneSecNetwork) {
-            // Filter to where source token equals destination token since we're dealing with cross-chain withdrawals
-            oneSecFeesPromise
-                .get()
-                .then(
-                    (fees) =>
-                        (oneSecFees = fees.filter(
-                            (f) =>
-                                f.sourceToken === f.destinationToken &&
-                                f.sourceChain === ICP_SYMBOL,
-                        )),
-                );
-        }
-    });
-
-    function getCkbtcMinterWithdrawalInfo(amountToSend: bigint) {
-        client
-            .getCkbtcMinterWithdrawalInfo(amountToSend)
-            .then((i) => (ckbtcMinterWithdrawalInfo = i));
-    }
-
-    function saveAccount() {
-        if (saveAccountElement !== undefined) {
-            saveAccountElement
-                .saveAccount()
-                .then((resp) => {
-                    if (resp.kind === "success") {
-                        onClose();
-                    } else if (resp.kind === "error" && resp.code === ErrorCode.NameTaken) {
-                        error = i18nKey("tokenTransfer.accountNameTaken");
-                    } else {
-                        error = i18nKey("tokenTransfer.failedToSaveAccount");
-                    }
-                })
-                .finally(() => (busy = false));
-        }
-    }
-
-    function scan() {
-        scanner?.scan();
-    }
-
-    function unknownAccount(account: string): boolean {
-        return accounts.find((a) => a.account === account) === undefined;
-    }
-
-    function send() {
-        if (!valid) return;
-
-        busy = true;
-        error = undefined;
-
-        const withdrawTokensPromise = isBtcNetwork
-            ? client.withdrawBtc(targetAccount, amountToSend)
-            : isOneSecNetwork
-              ? client.withdrawViaOneSec(
-                    ledger,
-                    symbol,
-                    selectedNetwork as EvmChain,
-                    targetAccount,
-                    amountToSend,
-                )
-              : client.withdrawCryptocurrency({
-                    kind: "pending",
-                    ledger,
-                    token: symbol,
-                    to: targetAccount,
-                    amountE8s: amountToSend,
-                    feeE8s: transferFees,
-                    createdAtNanos: BigInt(Date.now()) * BigInt(1_000_000),
-                });
-
-        withdrawTokensPromise
-            .then((resp) => {
-                if (resp.kind === "completed" || resp.kind === "success") {
-                    amountToSend = BigInt(0);
-                    balanceWithRefresh.refresh();
-                    toastStore.showSuccessToast(
-                        i18nKey("cryptoAccount.sendSucceeded", {
-                            symbol,
-                        }),
-                    );
-                    if (unknownAccount(targetAccount)) {
-                        capturingAccount = true;
-                    } else {
-                        onClose();
-                        targetAccount = "";
-                    }
-                } else if (resp.kind === "failed" || resp.kind === "error") {
-                    error = i18nKey("cryptoAccount.sendFailed", { symbol });
-                    client.logMessage(`Unable to withdraw ${symbol}`, resp);
-                }
-            })
-            .catch((err) => {
-                if (err !== "cancelled") {
-                    error = i18nKey("cryptoAccount.sendFailed", { symbol });
-                    client.logError(`Unable to withdraw ${symbol}`, err);
-                }
-            })
-            .finally(() => (busy = false));
-    }
-
-    function onBalanceRefreshed() {
-        error = undefined;
-    }
-
-    function onBalanceRefreshError(err: string) {
-        error = i18nKey(err);
-    }
-
-    function onPrimaryClick() {
-        busy = true;
-        if (capturingAccount) {
-            saveAccount();
-        } else {
-            send();
-        }
-    }
-</script>
-
-<ModalContent>
-    {#snippet header()}
-        <span class="header">
-            <div class="main-title"><Translatable resourceKey={title} /></div>
-            <BalanceWithRefresh
-                bind:this={balanceWithRefresh}
-                {ledger}
-                value={remainingBalance}
-                label={i18nKey("cryptoAccount.shortBalanceLabel")}
-                bold
-                onRefreshed={onBalanceRefreshed}
-                onError={onBalanceRefreshError} />
-        </span>
-    {/snippet}
-    {#snippet body()}
-        <form class="body">
-            {#if capturingAccount}
-                <SaveAccount
-                    bind:this={saveAccountElement}
-                    bind:valid={validAccountName}
-                    account={targetAccount}
-                    {accounts} />
-            {:else}
-                <Scanner onData={(data) => (targetAccount = data)} bind:this={scanner} />
-
-                {#if networks.length > 0 && selectedNetwork !== undefined}
-                    <NetworkSelector {networks} bind:selectedNetwork />
-                {/if}
-
-                <div class="token-input">
-                    <TokenInput
-                        {ledger}
-                        {transferFees}
-                        {minAmount}
-                        maxAmount={BigInt(Math.max(0, Number(cryptoBalance - transferFees)))}
-                        bind:valid={validAmount}
-                        bind:amount={amountToSend} />
-                </div>
-                <div class="target">
-                    <Input
-                        bind:value={targetAccount}
-                        countdown={false}
-                        maxlength={100}
-                        invalid={targetAccount.length > 0 && !targetAccountValid}
-                        placeholder={i18nKey("cryptoAccount.sendTarget")} />
-
-                    <div class="qr" onclick={scan}>
-                        <QrcodeScan size={$iconSize} color={"var(--icon-selected)"} />
-                    </div>
-                </div>
-
-                {#if accounts.length > 0 || networkFee !== undefined}
-                    <div class="lower-container">
-                        {#if accounts.length > 0}
-                            <div class="accounts">
-                                <AccountSelector bind:targetAccount {accounts} />
-                            </div>
-                        {/if}
-
-                        {#if networkFeeFormatted !== undefined}
-                            <div class="network-fee">
-                                <Translatable
-                                    resourceKey={i18nKey("cryptoAccount.networkFee", {
-                                        amount: networkFeeFormatted,
-                                        token: symbol,
-                                    })} />
-                            </div>
-                        {/if}
-                    </div>
-                {/if}
-            {/if}
-
-            {#if errorMessage !== undefined}
-                <ErrorMessage><Translatable resourceKey={errorMessage} /></ErrorMessage>
-            {/if}
-        </form>
-    {/snippet}
-    {#snippet footer()}
-        <span>
-            <ButtonGroup>
-                <Button secondary tiny={$mobileWidth} onClick={onClose}
-                    ><Translatable
-                        resourceKey={i18nKey(capturingAccount ? "noThanks" : "cancel")} /></Button>
-                <Button
-                    disabled={busy || !valid}
-                    loading={busy}
-                    tiny={$mobileWidth}
-                    onClick={onPrimaryClick}
-                    ><Translatable
-                        resourceKey={i18nKey(
-                            capturingAccount ? "tokenTransfer.saveAccount" : "tokenTransfer.send",
-                        )} /></Button>
-            </ButtonGroup>
-        </span>
-    {/snippet}
-</ModalContent>
-
-<style lang="scss">
-    :global(.target .input-wrapper input) {
-        padding-right: 40px;
-    }
-
-    .header {
-        display: flex;
-        align-items: flex-start;
-        justify-content: space-between;
-        gap: $sp2;
-
-        .main-title {
-            flex: auto;
-        }
-    }
-
-    .body {
-        display: flex;
-        flex-direction: column;
-    }
-
-    .token-input {
-        margin-bottom: $sp3;
-    }
-
-    .target {
-        position: relative;
-
-        .qr {
-            position: absolute !important;
-            top: 10px;
-            right: $sp3;
-            cursor: pointer;
-        }
-    }
-
-    .lower-container {
-        display: flex;
-        justify-content: space-between;
-    }
-
-    .network-fee {
-        @include font(book, normal, fs-60);
-        margin-left: auto;
-    }
-</style>
diff --git a/frontend/app/src/components/home/profile/SetPinNumberModal.svelte b/frontend/app/src/components/home/profile/SetPinNumberModal.svelte
deleted file mode 100644
index cf75993fdf..0000000000
--- a/frontend/app/src/components/home/profile/SetPinNumberModal.svelte
+++ /dev/null
@@ -1,216 +0,0 @@
-<script lang="ts">
-    import type { DelegationChain, ECDSAKeyIdentity } from "@icp-sdk/core/identity";
-    import {
-        AuthProvider,
-        mobileWidth,
-        pinNumberFailureStore,
-        type OpenChat,
-        type Verification,
-    } from "@client";
-    import { getContext, onMount } from "svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import {
-        pinNumberErrorMessageStore,
-        supportsForgot,
-        type PinOperation,
-    } from "../../../stores/pinNumber";
-    import { toastStore } from "../../../stores/toast";
-    import Button from "../../Button.svelte";
-    import ButtonGroup from "../../ButtonGroup.svelte";
-    import ErrorMessage from "../../ErrorMessage.svelte";
-    import ModalContent from "../../ModalContent.svelte";
-    import Pincode from "../../pincode/Pincode.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import ForgotPinLabel from "../ForgotPinLabel.svelte";
-    import ReAuthenticate from "./ReAuthenticate.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        type: PinOperation;
-        onPinSet?: (pin: string | undefined) => void;
-        onClose: () => void;
-    }
-
-    let { type = $bindable(), onClose, onPinSet }: Props = $props();
-
-    let busy = $state(false);
-    let currPinArray: string[] = $state([]);
-    let newPinArray: string[] = $state([]);
-    let signInProofJwt: string | undefined = $state(undefined);
-
-    onMount(() => {
-        pinNumberFailureStore.set(undefined);
-    });
-
-    function isPinValid(pin: string[]): boolean {
-        return pin.filter((c) => /^[0-9]$/.test(c)).length === 6;
-    }
-
-    function getVerification(): Verification {
-        if (signInProofJwt !== undefined) {
-            return {
-                kind: "reauthenticated",
-                signInProofJwt,
-            };
-        }
-
-        if (type.kind === "clear" || type.kind === "change") {
-            return {
-                kind: "pin_verification",
-                pin: currPinArray.join(""),
-            };
-        }
-
-        return { kind: "no_verification" };
-    }
-
-    function changePin(): Promise<void> {
-        const newPin = type.kind === "clear" ? undefined : newPinArray.join("");
-
-        busy = true;
-
-        return client
-            .setPinNumber(getVerification(), newPin)
-            .then((resp) => {
-                if (resp.kind === "success") {
-                    toastStore.showSuccessToast(i18nKey(`pinNumber.${type.kind}PinSuccess`));
-                    onPinSet?.(newPin);
-                    onClose();
-                } else {
-                    console.log("SetPinNumber failed", resp);
-                }
-            })
-            .finally(() => {
-                busy = false;
-            });
-    }
-
-    function reauthenticated(detail: {
-        key: ECDSAKeyIdentity;
-        delegation: DelegationChain;
-        provider: AuthProvider;
-        signInProofJwt: string;
-    }) {
-        if (type.kind !== "forgot") return;
-
-        signInProofJwt = detail.signInProofJwt;
-
-        switch (type.while.kind) {
-            case "clear":
-                type = { kind: "clear" };
-                changePin(); // no further input is required so just do it
-                break;
-            default:
-                type = { kind: "change" };
-        }
-    }
-
-    function onForgot() {
-        if (supportsForgot(type)) {
-            type = {
-                kind: "forgot",
-                while: type,
-            };
-        }
-    }
-
-    let title = $derived(i18nKey(`pinNumber.${type.kind}PinTitle`));
-    let message = $derived(
-        type.kind === "change" ? undefined : i18nKey(`pinNumber.${type.kind}PinMessage`),
-    );
-    let action = $derived(i18nKey(`pinNumber.${type.kind}Pin`));
-    let verificationValid = $derived(isPinValid(currPinArray) || signInProofJwt !== undefined);
-    let changeValid = $derived(
-        type.kind === "change" && isPinValid(newPinArray) && verificationValid,
-    );
-    let setValid = $derived(type.kind === "set" && isPinValid(newPinArray));
-    let clearValid = $derived(type.kind === "clear" && verificationValid);
-    let isValid = $derived(type.kind === "forgot" || changeValid || setValid || clearValid);
-    let showCurrentPin = $derived(type.kind !== "set" && signInProofJwt === undefined);
-    let errorMessage = $derived($pinNumberErrorMessageStore);
-</script>
-
-<ModalContent closeIcon fitToContent={!$mobileWidth} fixedWidth={false} {onClose}>
-    {#snippet header()}
-        <div class="header">
-            <Translatable resourceKey={title} />
-        </div>
-    {/snippet}
-    {#snippet body()}
-        <div class="body">
-            {#if type.kind === "forgot"}
-                {#if message !== undefined}
-                    <ReAuthenticate onSuccess={reauthenticated} {message} />
-                {/if}
-            {:else}
-                {#if message !== undefined}
-                    <p>
-                        <Translatable resourceKey={message} />
-                    </p>
-                {/if}
-                {#if showCurrentPin}
-                    <div class="code">
-                        {#if type.kind === "change"}
-                            <div>
-                                <Translatable resourceKey={i18nKey("pinNumber.currentPin")} />
-                            </div>
-                        {/if}
-                        <Pincode type="numeric" length={6} bind:code={currPinArray} />
-                        <ForgotPinLabel {onForgot} />
-                    </div>
-                {/if}
-                {#if type.kind !== "clear"}
-                    <div class="code">
-                        {#if type.kind === "change"}
-                            <div><Translatable resourceKey={i18nKey("pinNumber.newPin")} /></div>
-                        {/if}
-                        <Pincode type="numeric" length={6} bind:code={newPinArray} />
-                    </div>
-                {/if}
-                {#if errorMessage !== undefined}
-                    <ErrorMessage>
-                        <Translatable resourceKey={errorMessage} />
-                    </ErrorMessage>
-                {/if}
-            {/if}
-        </div>
-    {/snippet}
-    {#snippet footer()}
-        <div class="footer">
-            {#if type.kind === "forgot"}
-                <ButtonGroup align="center">
-                    <Button disabled={busy} secondary onClick={onClose}
-                        ><Translatable resourceKey={i18nKey("cancel")} /></Button>
-                </ButtonGroup>
-            {:else}
-                <ButtonGroup align="center">
-                    <Button disabled={busy} secondary onClick={onClose}
-                        ><Translatable resourceKey={i18nKey("cancel")} /></Button>
-                    <Button loading={busy} disabled={busy || !isValid} onClick={changePin}
-                        ><Translatable resourceKey={action} /></Button>
-                </ButtonGroup>
-            {/if}
-        </div>
-    {/snippet}
-</ModalContent>
-
-<style lang="scss">
-    .header {
-        text-align: center;
-    }
-
-    .body {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: $sp4;
-        max-width: 500px;
-    }
-
-    .code {
-        display: flex;
-        flex-direction: column;
-        gap: $sp3;
-    }
-</style>
diff --git a/frontend/app/src/components/home/profile/SignInOption.svelte b/frontend/app/src/components/home/profile/SignInOption.svelte
deleted file mode 100644
index c6d9ae7065..0000000000
--- a/frontend/app/src/components/home/profile/SignInOption.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-    import { AuthProvider, type ResourceKey } from "@client";
-    import Button from "../../Button.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import AuthProviderLogo from "./AuthProviderLogo.svelte";
-
-    interface Props {
-        provider: AuthProvider;
-        name: ResourceKey;
-        hollow?: boolean;
-        onClick?: (e: MouseEvent) => void;
-    }
-
-    let { provider, name, hollow = false, onClick }: Props = $props();
-</script>
-
-<div class="auth-option">
-    <AuthProviderLogo {provider} />
-    <Button fill {hollow} {onClick}>
-        <Translatable resourceKey={name} />
-    </Button>
-</div>
-
-<style lang="scss">
-    :global(.auth-option button) {
-        border-radius: 0 $sp2 $sp2 0;
-    }
-
-    .auth-option {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        flex: auto;
-    }
-</style>
diff --git a/frontend/app/src/components/home/profile/SwapCrypto.svelte b/frontend/app/src/components/home/profile/SwapCrypto.svelte
deleted file mode 100644
index a8e2f010a8..0000000000
--- a/frontend/app/src/components/home/profile/SwapCrypto.svelte
+++ /dev/null
@@ -1,451 +0,0 @@
-<script lang="ts">
-    import type { DexId, InterpolationValues, OpenChat, ResourceKey } from "@client";
-    import {
-        cryptoBalanceStore,
-        enhancedCryptoLookup as cryptoLookup,
-        exchangeRatesLookupStore as exchangeRatesLookup,
-        mobileWidth,
-        swappableTokensStore,
-    } from "@client";
-    import { random128 } from "@shared";
-    import { getContext, onMount } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { pinNumberErrorMessageStore } from "../../../stores/pinNumber";
-    import { calculateDollarAmount } from "../../../utils/exchange";
-    import AlertBox from "../../AlertBox.svelte";
-    import Button from "../../Button.svelte";
-    import ButtonGroup from "../../ButtonGroup.svelte";
-    import Checkbox from "../../Checkbox.svelte";
-    import ErrorMessage from "../../ErrorMessage.svelte";
-    import Legend from "../../Legend.svelte";
-    import ModalContent from "../../ModalContent.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import BalanceWithRefresh from "../BalanceWithRefresh.svelte";
-    import CryptoSelector from "../CryptoSelector.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import TokenInput from "../TokenInput.svelte";
-    import SwapProgress, { type SwapOutcome } from "./SwapProgress.svelte";
-
-    interface Props {
-        ledgerIn: string;
-        onClose: () => void;
-    }
-
-    let { ledgerIn = $bindable(), onClose }: Props = $props();
-
-    const client = getContext<OpenChat>("client");
-
-    type SwapState = "quote" | "swap" | "finished";
-    type Result = "success" | "rateChanged" | "insufficientFunds" | "error" | undefined;
-
-    let error: string | undefined = $state(undefined);
-    let amountIn: bigint = $state(BigInt(0));
-    let busy = $state(false);
-    let valid = $state(false);
-    let swapState = $state<SwapState>("quote");
-    let result: Result = $state(undefined);
-    let validAmount = $state(false);
-    let ledgerOut: string | undefined = $state();
-    let swaps = $state({} as Record<string, DexId[]>);
-    let swapMessageValues: InterpolationValues | undefined = $state(undefined);
-    let bestQuote: [DexId, bigint] | undefined = $state(undefined);
-    let swapId: bigint | undefined = $state();
-    let userAcceptedWarning = $state(false);
-    let warnValueUnknown = $state(false);
-    let warnValueDropped = $state(false);
-
-    onMount(() => loadSwaps(ledgerIn));
-
-    function getPrimaryButtonText(state: SwapState, result: Result): ResourceKey {
-        let label;
-
-        if (state === "finished") {
-            label = result === "insufficientFunds" ? "back" : "requote";
-        } else {
-            label = state;
-        }
-
-        return i18nKey(`tokenSwap.${label}`);
-    }
-
-    function quote() {
-        if (!valid) return;
-
-        busy = true;
-        error = undefined;
-        result = undefined;
-        swapId = undefined;
-
-        client
-            .getTokenSwapQuotes(ledgerIn, ledgerOut!, amountIn - BigInt(2) * detailsIn.transferFee)
-            .then((response) => {
-                if (response.length === 0) {
-                    error = $_("tokenSwap.noQuotes", { values: { tokenIn: detailsIn.symbol } });
-                } else {
-                    bestQuote = response[0];
-
-                    const [dexId, quote] = bestQuote!;
-
-                    const amountOutText = client.formatTokens(quote, detailsOut!.decimals);
-                    const rate = (Number(amountOutText) / Number(amountInText)).toPrecision(3);
-                    const dex = dexName(dexId);
-                    const minAmountOut = BigInt(10) * detailsOut!.transferFee;
-                    const minAmountOutText = client.formatTokens(
-                        minAmountOut,
-                        detailsOut!.decimals,
-                    );
-
-                    const usdInText = calculateDollarAmount(
-                        amountIn,
-                        $exchangeRatesLookup.get(detailsIn.symbol.toLowerCase())?.toUSD,
-                        detailsIn.decimals,
-                    );
-                    const usdOutText = calculateDollarAmount(
-                        bestQuote[1],
-                        $exchangeRatesLookup.get(detailsOut!.symbol.toLowerCase())?.toUSD,
-                        detailsOut!.decimals,
-                    );
-
-                    warnValueUnknown = usdInText === "???" || usdOutText === "???";
-                    warnValueDropped =
-                        !warnValueUnknown && Number(usdOutText) < 0.9 * Number(usdInText);
-
-                    swapMessageValues = {
-                        amountIn: amountInText,
-                        tokenIn: detailsIn.symbol,
-                        rate,
-                        amountOut: amountOutText,
-                        tokenOut: detailsOut!.symbol,
-                        dex,
-                        minAmountOut: minAmountOutText,
-                        usdOut: usdOutText,
-                        usdIn: usdInText,
-                    };
-
-                    if (quote > minAmountOut) {
-                        swapState = "swap";
-                    } else {
-                        error = $_("tokenSwap.quoteTooLow", { values: swapMessageValues });
-                    }
-                }
-            })
-            .catch((err) => {
-                client.logError(`Error getting swap quotes for token: ${detailsIn.symbol}`, err);
-                error = $_("tokenSwap.quoteError", { values: { tokenIn: detailsIn.symbol } });
-            })
-            .finally(() => (busy = false));
-    }
-
-    function swap() {
-        if (!valid || bestQuote === undefined) return;
-
-        busy = true;
-        error = undefined;
-        result = undefined;
-
-        const ledgerInLocal = ledgerIn;
-        const ledgerOutLocal = ledgerOut!;
-        const bestQuoteLocal = bestQuote;
-
-        let minAmountOut = (bestQuoteLocal[1] * BigInt(98)) / BigInt(100);
-
-        client
-            .refreshAccountBalance(ledgerIn)
-            .then((balance) => {
-                if (balance < amountIn) {
-                    error = $_("tokenSwap.progress.insufficientFunds");
-                    result = "insufficientFunds";
-                    return false;
-                } else {
-                    return true;
-                }
-            })
-            .then((balanceCheckSuccess) => {
-                if (balanceCheckSuccess) {
-                    swapId = random128();
-                    return client.swapTokens(
-                        swapId,
-                        ledgerInLocal,
-                        ledgerOutLocal,
-                        amountIn,
-                        minAmountOut,
-                        bestQuoteLocal[0],
-                    );
-                }
-            })
-            .catch(() => {
-                swapId = undefined;
-                busy = false;
-            });
-    }
-
-    function dexName(dex: DexId): string {
-        switch (dex) {
-            case "icpswap":
-                return "ICPSwap";
-            case "taco":
-                return "TACO";
-        }
-        return dex;
-    }
-
-    function loadSwaps(ledger: string) {
-        client.getTokenSwaps(ledger).then((results) => {
-            ledgerOut = undefined;
-            swaps = results;
-            client.refreshSwappableTokens();
-            initialized = true;
-        });
-    }
-
-    function onLedgerInSelected(ledger: string, _: string): void {
-        loadSwaps(ledger);
-    }
-
-    function onSwapFinished(outcome: SwapOutcome, ledgerIn: string, ledgerOut: string) {
-        busy = false;
-        swapState = "finished";
-        result = outcome;
-
-        client.refreshAccountBalance(ledgerIn);
-        client.refreshAccountBalance(ledgerOut);
-    }
-
-    function onPrimaryClick() {
-        if (swapState === "finished" && result === "insufficientFunds") {
-            amountIn = BigInt(0);
-            swapState = "quote";
-        } else if (swapState === "quote" || result === "rateChanged") {
-            quote();
-        } else if (swapState === "swap") {
-            swap();
-        }
-    }
-
-    function onBalanceRefreshed() {
-        error = undefined;
-    }
-
-    function onBalanceRefreshError(err: string) {
-        error = $_(err);
-    }
-    let initialized = $state(false);
-
-    let detailsIn = $derived($cryptoLookup.get(ledgerIn)!);
-    let detailsOut = $derived(ledgerOut !== undefined ? $cryptoLookup.get(ledgerOut) : undefined);
-    let anySwapsAvailable = $derived(Object.keys(swaps).length > 0 && detailsOut !== undefined);
-    let swapping = $derived(swapState === "swap" && busy);
-    let amountInText = $derived(client.formatTokens(amountIn, detailsIn.decimals));
-    $effect(() => {
-        valid =
-            anySwapsAvailable &&
-            validAmount &&
-            (swapState === "swap"
-                ? (bestQuote !== undefined && userAcceptedWarning) ||
-                  (!warnValueUnknown && !warnValueDropped)
-                : true);
-    });
-    let title = $derived(
-        swapState === "quote"
-            ? i18nKey("tokenSwap.swapToken", { tokenIn: detailsIn.symbol })
-            : i18nKey("tokenSwap.swapTokenTo", {
-                  tokenIn: detailsIn.symbol,
-                  tokenOut: detailsOut!.symbol,
-              }),
-    );
-    let balanceIn = $derived($cryptoBalanceStore.get(ledgerIn) ?? 0n);
-    let remainingBalance = $derived(
-        amountIn > BigInt(0) ? balanceIn - amountIn - detailsIn.transferFee : balanceIn,
-    );
-    let primaryButtonText = $derived(getPrimaryButtonText(swapState, result));
-    let pinNumberError = $derived($pinNumberErrorMessageStore);
-</script>
-
-<ModalContent>
-    {#snippet header()}
-        <span class="header">
-            <div class="main-title"><Translatable resourceKey={title} /></div>
-            {#if swapState === "quote"}
-                <BalanceWithRefresh
-                    ledger={ledgerIn}
-                    value={remainingBalance}
-                    label={i18nKey("cryptoAccount.shortBalanceLabel")}
-                    bold
-                    onRefreshed={onBalanceRefreshed}
-                    onError={onBalanceRefreshError} />
-            {/if}
-        </span>
-    {/snippet}
-    {#snippet body()}
-        <form class="body">
-            {#if initialized}
-                {#if swapState === "quote"}
-                    <div class="swap">
-                        <div class="select-from">
-                            <Legend label={i18nKey("cryptoAccount.transactionHeaders.from")} />
-                            <div class="inner">
-                                <CryptoSelector
-                                    filter={(t) =>
-                                        t.balance > 0 && $swappableTokensStore.has(t.ledger)}
-                                    bind:ledger={ledgerIn}
-                                    onSelect={onLedgerInSelected} />
-                            </div>
-                        </div>
-                        <div class="amount">
-                            <TokenInput
-                                ledger={ledgerIn}
-                                minAmount={detailsIn.transferFee * BigInt(10)}
-                                maxAmount={detailsIn.balance}
-                                bind:valid={validAmount}
-                                bind:amount={amountIn} />
-                        </div>
-                        <div class="select-to">
-                            <Legend label={i18nKey("cryptoAccount.transactionHeaders.to")} />
-                            <div class="inner">
-                                <CryptoSelector
-                                    filter={(t) => Object.keys(swaps).includes(t.ledger)}
-                                    bind:ledger={ledgerOut} />
-                            </div>
-                        </div>
-                    </div>
-                {/if}
-
-                {#if (swapping || swapState === "finished") && swapId !== undefined && detailsOut !== undefined && bestQuote !== undefined}
-                    <div>
-                        <SwapProgress
-                            {swapId}
-                            tokenIn={detailsIn.symbol}
-                            tokenOut={detailsOut.symbol}
-                            ledgerIn={detailsIn.ledger}
-                            ledgerOut={detailsOut.ledger}
-                            amountIn={amountInText}
-                            decimalsOut={detailsOut.decimals}
-                            dex={dexName(bestQuote[0])}
-                            onFinished={onSwapFinished} />
-                    </div>
-                {/if}
-
-                {#if swapState === "swap" && !swapping}
-                    <div>{$_("tokenSwap.bestQuote", { values: swapMessageValues })}</div>
-                    <Markdown
-                        text={$_("tokenSwap.youWillReceive", { values: swapMessageValues })} />
-
-                    {#if warnValueDropped || warnValueUnknown}
-                        <AlertBox>
-                            <div class="warning">
-                                {#if warnValueDropped}
-                                    <Translatable
-                                        resourceKey={i18nKey(
-                                            "tokenSwap.warningValueDropped",
-                                            swapMessageValues,
-                                        )} />
-                                {:else}
-                                    <Translatable
-                                        resourceKey={i18nKey(
-                                            "tokenSwap.warningValueUnknown",
-                                            swapMessageValues,
-                                        )} />
-                                {/if}
-                            </div>
-                            <Checkbox
-                                id="confirm-understanding"
-                                small
-                                label={i18nKey("tokenSwap.confirmUnderstanding")}
-                                bind:checked={userAcceptedWarning} />
-                        </AlertBox>
-                    {/if}
-
-                    <div>{$_("tokenSwap.proceedWithSwap", { values: swapMessageValues })}</div>
-                {/if}
-
-                {#if error !== undefined || pinNumberError !== undefined}
-                    <ErrorMessage>
-                        {#if pinNumberError !== undefined}
-                            <Translatable resourceKey={pinNumberError} />
-                        {:else}
-                            {error}
-                        {/if}
-                    </ErrorMessage>
-                {/if}
-            {/if}
-        </form>
-    {/snippet}
-    {#snippet footer()}
-        <span>
-            <ButtonGroup>
-                {#if !swapping}
-                    <Button secondary tiny={$mobileWidth} onClick={onClose}
-                        ><Translatable resourceKey={i18nKey("close")} /></Button>
-                {/if}
-                {#if result !== "success" && result !== "error"}
-                    <Button
-                        disabled={busy || !valid}
-                        loading={busy}
-                        tiny={$mobileWidth}
-                        onClick={onPrimaryClick}
-                        ><Translatable resourceKey={primaryButtonText} /></Button>
-                {/if}
-            </ButtonGroup>
-        </span>
-    {/snippet}
-</ModalContent>
-
-<style lang="scss">
-    :global(.swap input.amount-val) {
-        border-radius: 0 !important;
-        border: var(--bw) solid var(--bd) !important;
-        border-left: none !important;
-        border-right: none !important;
-        height: 47px;
-    }
-
-    .header {
-        display: flex;
-        align-items: flex-start;
-        justify-content: space-between;
-        gap: $sp2;
-
-        .main-title {
-            flex: auto;
-        }
-    }
-
-    .body {
-        display: flex;
-        flex-direction: column;
-        gap: $sp4;
-    }
-
-    .swap {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        .inner {
-            @include font(book, normal, fs-100);
-            padding: 0 $sp4;
-            border: var(--bw) solid var(--bd);
-            background-color: var(--modal-bg);
-            display: flex;
-            height: 47px;
-            align-items: center;
-        }
-
-        .select-from .inner {
-            border-radius: var(--rd) 0 0 var(--rd);
-        }
-
-        .select-to .inner {
-            border-radius: 0 var(--rd) var(--rd) 0;
-        }
-
-        .amount {
-            flex-grow: 1;
-        }
-    }
-
-    .warning {
-        margin-bottom: $sp4;
-    }
-</style>
diff --git a/frontend/app/src/components/home/profile/SwapProgress.svelte b/frontend/app/src/components/home/profile/SwapProgress.svelte
deleted file mode 100644
index 6774c1675b..0000000000
--- a/frontend/app/src/components/home/profile/SwapProgress.svelte
+++ /dev/null
@@ -1,170 +0,0 @@
-<script lang="ts" module>
-    export type SwapOutcome = "success" | "rateChanged" | "insufficientFunds" | "error";
-</script>
-
-<script lang="ts">
-    import type { OpenChat } from "@client";
-    import { Poller } from "@client";
-    import { getContext, onMount } from "svelte";
-    import ProgressSteps, { type Result, type Step } from "../../ProgressSteps.svelte";
-
-    interface Props {
-        swapId: bigint;
-        tokenIn: string;
-        tokenOut: string;
-        ledgerIn: string;
-        ledgerOut: string;
-        amountIn: string;
-        decimalsOut: number;
-        dex: string;
-        onFinished: (outcome: SwapOutcome, ledgerIn: string, ledgerOut: string) => void;
-    }
-
-    let {
-        swapId,
-        tokenIn,
-        tokenOut,
-        ledgerIn,
-        ledgerOut,
-        amountIn,
-        decimalsOut,
-        dex,
-        onFinished,
-    }: Props = $props();
-
-    ledgerOut;
-
-    const client = getContext<OpenChat>("client");
-    const POLL_INTERVAL = 1000;
-    const labelPrefix = "tokenSwap.progress.";
-
-    let percent: number | undefined = $state(0);
-    let amountOut = $state("");
-    let steps = $state<Step[]>([{ label: "get", status: "doing" }]);
-    let result = $state<Result>(undefined);
-    let poller: Poller | undefined = undefined;
-
-    let fullSteps = $derived(
-        steps.map((step) => ({ label: labelPrefix + step.label, status: step.status })),
-    );
-
-    let fullResult = $derived(
-        result !== undefined
-            ? { label: labelPrefix + result.label, status: result.status }
-            : undefined,
-    );
-
-    let labelValues = $derived({
-        tokenIn,
-        tokenOut,
-        amountIn,
-        amountOut,
-        dex,
-    });
-
-    onMount(() => {
-        poller = new Poller(querySwapProgress, POLL_INTERVAL, POLL_INTERVAL, true);
-
-        return () => poller?.stop();
-    });
-
-    function notifyFinished(outcome: "success" | "rateChanged" | "insufficientFunds" | "error") {
-        onFinished(outcome, ledgerIn, ledgerIn);
-        poller?.stop();
-    }
-
-    function updateSteps(newSteps: Step[]) {
-        if (newSteps.length >= steps.length) {
-            steps = newSteps;
-        }
-    }
-
-    function updatePercent(newPercent: number) {
-        if (newPercent >= (percent ?? 0)) {
-            percent = newPercent;
-        }
-    }
-
-    async function querySwapProgress() {
-        let response = await client.tokenSwapStatus(swapId);
-
-        if (response.kind === "success") {
-            if (
-                response.amountSwapped?.kind === "ok" &&
-                response.amountSwapped?.value.kind === "ok"
-            ) {
-                amountOut = client.formatTokens(response.amountSwapped.value.value, decimalsOut);
-            }
-
-            if (response.withdrawnFromDex?.kind === "ok") {
-                const success =
-                    response.amountSwapped?.kind === "ok" &&
-                    response.amountSwapped.value.kind === "ok";
-
-                updateSteps([
-                    { label: "get", status: "done" },
-                    { label: "deposit", status: "done" },
-                    { label: "notify", status: "done" },
-                    { label: "swap", status: "done" },
-                    { label: success ? "withdraw" : "refund", status: "done" },
-                ]);
-                result = { label: success ? "done" : "failed", status: "done" };
-                notifyFinished(success ? "success" : "rateChanged");
-            } else if (response.amountSwapped?.kind === "ok") {
-                if (response.amountSwapped.value.kind === "ok") {
-                    updateSteps([
-                        { label: "get", status: "done" },
-                        { label: "deposit", status: "done" },
-                        { label: "notify", status: "done" },
-                        { label: "swap", status: "done" },
-                        { label: "withdraw", status: "doing" },
-                    ]);
-                    updatePercent(80);
-                } else {
-                    updateSteps([
-                        { label: "get", status: "done" },
-                        { label: "deposit", status: "done" },
-                        { label: "notify", status: "done" },
-                        { label: "swap", status: "failed" },
-                        { label: "refund", status: "doing" },
-                    ]);
-                    percent = undefined;
-                }
-            } else if (response.notifyDex?.kind == "ok") {
-                updateSteps([
-                    { label: "get", status: "done" },
-                    { label: "deposit", status: "done" },
-                    { label: "notify", status: "done" },
-                    { label: "swap", status: "doing" },
-                ]);
-                updatePercent(60);
-            } else if (response.transfer?.kind == "ok") {
-                updateSteps([
-                    { label: "get", status: "done" },
-                    { label: "deposit", status: "done" },
-                    { label: "notify", status: "doing" },
-                ]);
-                updatePercent(40);
-            } else if (response.transfer?.kind == "error") {
-                updateSteps([
-                    { label: "get", status: "done" },
-                    { label: "deposit", status: "failed" },
-                ]);
-                result = { label: "insufficientFunds", status: "failed" };
-                notifyFinished("insufficientFunds");
-            } else if (response.depositAccount?.kind == "ok") {
-                updateSteps([
-                    { label: "get", status: "done" },
-                    { label: "deposit", status: "doing" },
-                ]);
-                updatePercent(20);
-            } else if (response.depositAccount?.kind == "error") {
-                updateSteps([{ label: "get", status: "failed" }]);
-                result = { label: "error", status: "failed" };
-                notifyFinished("error");
-            }
-        }
-    }
-</script>
-
-<ProgressSteps steps={fullSteps} {labelValues} result={fullResult} {percent} />
diff --git a/frontend/app/src/components/home/profile/VerifyHumanity.svelte b/frontend/app/src/components/home/profile/VerifyHumanity.svelte
deleted file mode 100644
index a89974a177..0000000000
--- a/frontend/app/src/components/home/profile/VerifyHumanity.svelte
+++ /dev/null
@@ -1,181 +0,0 @@
-<script lang="ts">
-    import { iconSize, type OpenChat } from "@client";
-    import { getContext, onMount } from "svelte";
-    import { _ } from "svelte-i18n";
-    import AccountCheck from "svelte-material-icons/AccountCheck.svelte";
-    import { i18nKey, interpolate } from "../../../i18n/i18n";
-    import { uniquePersonCredentialGate } from "../../../utils/access";
-    import Button from "../../Button.svelte";
-    import ButtonGroup from "../../ButtonGroup.svelte";
-    import ErrorMessage from "../../ErrorMessage.svelte";
-    import FancyLoader from "../../icons/FancyLoader.svelte";
-    import ModalContent from "../../ModalContent.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import HumanityConfirmation from "../HumanityConfirmation.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import LinkAccounts from "./LinkAccounts.svelte";
-    import LinkAccountsModal from "./LinkAccountsModal.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        onClose: () => void;
-        onSuccess: () => void;
-    }
-
-    let { onClose, onSuccess }: Props = $props();
-
-    let failed = $state(false);
-    let verifying = $state(false);
-    let step: "linking" | "verification" = $state("linking");
-    let confirmed = $state(false);
-    let iiPrincipal: string | undefined = $state(undefined);
-    let checkingPrincipal = $state(true);
-
-    onMount(() => {
-        client
-            .getLinkedIIPrincipal()
-            .then((p) => {
-                iiPrincipal = p;
-                if (iiPrincipal !== undefined) {
-                    step = "verification";
-                }
-            })
-            .finally(() => (checkingPrincipal = false));
-    });
-
-    function verify() {
-        if (iiPrincipal === undefined) return;
-        const iiPrincipalCopy = iiPrincipal;
-
-        verifying = true;
-        failed = false;
-        client
-            .verifyAccessGate(uniquePersonCredentialGate, iiPrincipalCopy)
-            .then((credential) => {
-                if (credential === undefined) {
-                    failed = true;
-                } else {
-                    return client
-                        .submitProofOfUniquePersonhood(credential, iiPrincipalCopy)
-                        .then((resp) => {
-                            if (resp.kind !== "success") {
-                                failed = true;
-                            } else {
-                                onSuccess();
-                            }
-                        });
-                }
-            })
-            .catch(() => (failed = true))
-            .finally(() => (verifying = false));
-    }
-</script>
-
-{#if checkingPrincipal}
-    <ModalContent hideFooter hideHeader fadeDelay={0} fadeDuration={0}>
-        {#snippet body()}
-            <div>
-                <div class="loader">
-                    <FancyLoader />
-                </div>
-            </div>
-        {/snippet}
-    </ModalContent>
-{:else if step === "linking"}
-    <LinkAccountsModal>
-        <LinkAccounts
-            bind:iiPrincipal
-            {onClose}
-            onProceed={() => (step = "verification")}
-            explanations={[i18nKey("identity.humanityWarning")]} />
-    </LinkAccountsModal>
-{:else}
-    <ModalContent fadeDelay={0} fadeDuration={0}>
-        {#snippet header()}
-            <div class="header">
-                <AccountCheck size={$iconSize} color={"var(--txt)"} />
-                <div class="title">
-                    <Translatable resourceKey={i18nKey("access.uniquePerson")} />
-                </div>
-            </div>
-        {/snippet}
-        {#snippet body()}
-            <div>
-                {#if failed}
-                    <p class="info">
-                        <ErrorMessage>
-                            <Translatable resourceKey={i18nKey("human.failed")} />
-                        </ErrorMessage>
-                    </p>
-                    <p class="question">
-                        <Translatable resourceKey={i18nKey("access.uniquePersonInfo1")} />
-                    </p>
-
-                    <p class="answer">
-                        <Markdown text={interpolate($_, i18nKey("access.uniquePersonInfo2"))} />
-                    </p>
-
-                    <p class="answer">
-                        <Translatable resourceKey={i18nKey("access.uniquePersonInfo3")} />
-                    </p>
-                {:else}
-                    <p class="info">
-                        <Translatable resourceKey={i18nKey("human.instruction")} />
-                    </p>
-                    <HumanityConfirmation bind:confirmed />
-                {/if}
-            </div>
-        {/snippet}
-
-        {#snippet footer()}
-            <div>
-                <ButtonGroup>
-                    <Button secondary onClick={onClose}
-                        ><Translatable resourceKey={i18nKey("cancel")} /></Button>
-                    <!-- <Button secondary on:click={() => (step = "linking")}
-                        ><Translatable resourceKey={i18nKey("identity.back")} /></Button> -->
-                    <Button
-                        loading={verifying}
-                        disabled={verifying || !confirmed || iiPrincipal === undefined}
-                        onClick={verify}
-                        ><Translatable resourceKey={i18nKey("access.verify")} /></Button>
-                </ButtonGroup>
-            </div>
-        {/snippet}
-    </ModalContent>
-{/if}
-
-<style lang="scss">
-    :global(.link-ii-logo img) {
-        width: 24px;
-    }
-
-    .header {
-        @include font(bold, normal, fs-130, 29);
-        margin-bottom: $sp4;
-        display: flex;
-        align-items: center;
-        gap: $sp3;
-    }
-
-    .info,
-    .question,
-    .answer {
-        margin-bottom: $sp4;
-    }
-
-    .question {
-        @include font(book, normal, fs-90);
-    }
-
-    .answer {
-        color: var(--txt-light);
-        @include font(book, normal, fs-90);
-    }
-
-    .loader {
-        width: 100px;
-        margin: 100px auto;
-    }
-</style>
diff --git a/frontend/app/src/components/home/profile/VideoCallRingtone.svelte b/frontend/app/src/components/home/profile/VideoCallRingtone.svelte
deleted file mode 100644
index ca5fd6a1c8..0000000000
--- a/frontend/app/src/components/home/profile/VideoCallRingtone.svelte
+++ /dev/null
@@ -1,88 +0,0 @@
-<script lang="ts">
-    import { iconSize } from "@client";
-    import { onMount } from "svelte";
-    import PauseCircleOutline from "svelte-material-icons/PauseCircleOutline.svelte";
-    import PlayCircleOutline from "svelte-material-icons/PlayCircleOutline.svelte";
-    import WaveSurfer from "wavesurfer.js";
-    import { Ringtone, selectedRingtone } from "../../../stores/video";
-    import { currentTheme } from "../../../theme/themes";
-    import Radio from "../../Radio.svelte";
-
-    interface Props {
-        ringtone: Ringtone;
-        onTogglePlay: (ringtone: Ringtone) => void;
-    }
-
-    let { ringtone, onTogglePlay }: Props = $props();
-
-    let waveform: HTMLDivElement | undefined = $state();
-
-    let checked = $derived($selectedRingtone === ringtone.key);
-
-    onMount(() => {
-        if (!waveform) return;
-
-        const wavesurfer = WaveSurfer.create({
-            height: 30,
-            cursorWidth: 0,
-            barWidth: 2,
-            barRadius: 4,
-            barGap: 2,
-            container: waveform,
-            waveColor: $currentTheme["txt-light"],
-            progressColor: $currentTheme.accent,
-            media: ringtone.audio,
-        });
-
-        wavesurfer.on("click", () => {
-            if (!ringtone.playing) {
-                togglePlay();
-            }
-        });
-    });
-
-    function togglePlay(e?: Event) {
-        e?.preventDefault();
-        onTogglePlay(ringtone);
-    }
-
-    function selectRingtone() {
-        selectedRingtone.set(ringtone.key);
-    }
-</script>
-
-<div class="wrapper">
-    <Radio onChange={selectRingtone} {checked} id={ringtone.name} group="video-ringtone">
-        <div class="ringtone">
-            <div class="name">{ringtone.name}</div>
-            <div onclick={togglePlay} class="play">
-                {#if ringtone.playing}
-                    <PauseCircleOutline size={$iconSize} color={"var(--icon-selected)"} />
-                {:else}
-                    <PlayCircleOutline size={$iconSize} color={"var(--icon-txt)"} />
-                {/if}
-            </div>
-        </div>
-    </Radio>
-    <div bind:this={waveform} class="waveform"></div>
-</div>
-
-<style lang="scss">
-    .wrapper {
-        border: var(--bw) solid var(--bd);
-        border-radius: var(--rd);
-        padding: $sp3;
-        margin-bottom: $sp3;
-    }
-
-    .ringtone {
-        display: flex;
-        gap: $sp4;
-        align-items: center;
-        justify-content: space-between;
-    }
-
-    .play {
-        cursor: pointer;
-    }
-</style>
diff --git a/frontend/app/src/components/home/profile/ViewUserProfileModal.svelte b/frontend/app/src/components/home/profile/ViewUserProfileModal.svelte
deleted file mode 100644
index f4d22494de..0000000000
--- a/frontend/app/src/components/home/profile/ViewUserProfileModal.svelte
+++ /dev/null
@@ -1,330 +0,0 @@
-<script lang="ts">
-    import {
-        type ChatSummary,
-        type CommunitySummary,
-        type OpenChat,
-        type PublicProfile,
-        type ReadonlySet,
-        type ResourceKey,
-        type UserSummary,
-        blockedUsersStore,
-        currentUserIdStore,
-        mobileWidth,
-        platformModeratorStore,
-        publish,
-        selectedChatBlockedUsersStore,
-        selectedChatSummaryStore,
-        selectedCommunityBlockedUsersStore,
-        selectedCommunitySummaryStore,
-        setRightPanelHistory,
-    } from "@client";
-
-    import { getContext, onMount } from "svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { toastStore } from "../../../stores/toast";
-    import Button from "../../Button.svelte";
-    import ButtonGroup from "../../ButtonGroup.svelte";
-    import ModalContent from "../../ModalContent.svelte";
-    import Overlay from "../../Overlay.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import UserProfileCard from "./UserProfileCard.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        userId: string;
-        alignTo?: HTMLElement | undefined;
-        chatButton?: boolean;
-        inGlobalContext?: boolean;
-        onOpenDirectChat: () => void;
-        onClose: () => void;
-    }
-
-    let {
-        userId,
-        alignTo = undefined,
-        chatButton = true,
-        inGlobalContext = false,
-        onOpenDirectChat,
-        onClose,
-    }: Props = $props();
-
-    let profile: PublicProfile | undefined = $state();
-    let user: UserSummary | undefined = $state();
-    let backgroundUrl = $derived(
-        profile !== undefined
-            ? client.buildUserBackgroundUrl(
-                  import.meta.env.OC_BLOB_URL_PATTERN!,
-                  userId,
-                  profile.backgroundId,
-              )
-            : undefined,
-    );
-    let hasCustomBackground = $derived(backgroundUrl !== undefined);
-
-    let rendering = $state<Promise<void>>();
-
-    onMount(async () => {
-        try {
-            rendering = new Promise(async (resolve) => {
-                user = await client.getUser(userId);
-                client.getPublicProfile(userId).subscribe({
-                    onResult: (result) => {
-                        profile = result;
-                        if (profile === undefined) {
-                            onClose();
-                        } else {
-                            resolve();
-                        }
-                    },
-                });
-            });
-        } catch (e: any) {
-            client.logError("Failed to load user profile", e);
-            onClose();
-        }
-    });
-
-    function afterBlock(result: boolean, success: ResourceKey, failure: ResourceKey) {
-        if (!result) {
-            toastStore.showFailureToast(failure);
-        } else {
-            toastStore.showSuccessToast(success);
-        }
-    }
-
-    function blockUser() {
-        if ($selectedChatSummaryStore !== undefined) {
-            if ($selectedChatSummaryStore.kind === "direct_chat") {
-                client.blockUserFromDirectChat(userId).then((success) => {
-                    afterBlock(success, i18nKey("blockUserSucceeded"), i18nKey("blockUserFailed"));
-                });
-                onClose();
-                return;
-            }
-            if ($selectedChatSummaryStore.kind === "group_chat") {
-                client.blockUser($selectedChatSummaryStore.id, userId).then((success) => {
-                    afterBlock(success, i18nKey("blockUserSucceeded"), i18nKey("blockUserFailed"));
-                });
-                onClose();
-                return;
-            }
-        }
-        if ($selectedCommunitySummaryStore !== undefined) {
-            client
-                .blockCommunityUser($selectedCommunitySummaryStore.id, userId)
-                .then((success) =>
-                    afterBlock(success, i18nKey("blockUserSucceeded"), i18nKey("blockUserFailed")),
-                );
-            onClose();
-            return;
-        }
-    }
-
-    function unblockUser() {
-        if ($selectedChatSummaryStore !== undefined) {
-            if ($selectedChatSummaryStore.kind === "direct_chat") {
-                client.unblockUserFromDirectChat(userId).then((success) => {
-                    afterBlock(
-                        success,
-                        i18nKey("unblockUserSucceeded"),
-                        i18nKey("unblockUserFailed"),
-                    );
-                });
-                onClose();
-                return;
-            }
-            if ($selectedChatSummaryStore.kind === "group_chat") {
-                client.unblockUser($selectedChatSummaryStore.id, userId).then((success) => {
-                    afterBlock(
-                        success,
-                        i18nKey("unblockUserSucceeded"),
-                        i18nKey("unblockUserFailed"),
-                    );
-                });
-                onClose();
-                return;
-            }
-        }
-        if ($selectedCommunitySummaryStore !== undefined) {
-            client
-                .unblockCommunityUser($selectedCommunitySummaryStore.id, userId)
-                .then((success) =>
-                    afterBlock(
-                        success,
-                        i18nKey("unblockUserSucceeded"),
-                        i18nKey("unblockUserFailed"),
-                    ),
-                );
-            onClose();
-            return;
-        }
-    }
-
-    function canBlockUser(
-        chat: ChatSummary | undefined,
-        community: CommunitySummary | undefined,
-        blockedUsers: ReadonlySet<string>,
-        blockedChatUsers: ReadonlySet<string>,
-        blockedCommunityUsers: ReadonlySet<string>,
-    ) {
-        if (me || inGlobalContext) return false;
-
-        if (chat !== undefined) {
-            if (chat.kind === "direct_chat") return !blockedUsers.has(userId);
-            if (chat.kind === "group_chat")
-                return !blockedChatUsers.has(userId) && client.canBlockUsers(chat.id);
-        }
-        if (community !== undefined) {
-            return !blockedCommunityUsers.has(userId) && client.canBlockUsers(community.id);
-        }
-        return false;
-    }
-
-    function canUnblockUser(
-        chat: ChatSummary | undefined,
-        community: CommunitySummary | undefined,
-        blockedUsers: ReadonlySet<string>,
-        blockedChatUsers: ReadonlySet<string>,
-        blockedCommunityUsers: ReadonlySet<string>,
-    ) {
-        if (me || inGlobalContext) return false;
-        if (chat !== undefined) {
-            if (chat.kind === "direct_chat") return blockedUsers.has(userId);
-            if (chat.kind === "group_chat")
-                return blockedChatUsers.has(userId) && client.canBlockUsers(chat.id);
-        }
-        if (community !== undefined) {
-            return blockedCommunityUsers.has(userId) && client.canBlockUsers(community.id);
-        }
-        return false;
-    }
-
-    function handleOpenDirectChat() {
-        onOpenDirectChat();
-    }
-
-    function showUserProfile() {
-        setRightPanelHistory([{ kind: "user_profile" }]);
-        onClose();
-    }
-
-    function onWindowResize() {
-        if (!modal) {
-            onClose();
-        }
-    }
-
-    function unsuspendUser() {
-        client.unsuspendUser(userId).then((success) => {
-            if (success) {
-                toastStore.showSuccessToast(i18nKey("unsuspendedUser"));
-                onClose();
-            } else {
-                toastStore.showFailureToast(i18nKey("failedToUnsuspendUser"));
-            }
-        });
-    }
-
-    function suspendUser() {
-        publish("suspendUser", userId);
-        onClose();
-    }
-    let me = $derived(userId === $currentUserIdStore);
-    let isSuspended = $derived(user?.suspended ?? false);
-    let modal = $derived($mobileWidth);
-    let canBlock = $derived(
-        canBlockUser(
-            $selectedChatSummaryStore,
-            $selectedCommunitySummaryStore,
-            $blockedUsersStore,
-            $selectedChatBlockedUsersStore,
-            $selectedCommunityBlockedUsersStore,
-        ),
-    );
-    let canUnblock = $derived(
-        canUnblockUser(
-            $selectedChatSummaryStore,
-            $selectedCommunitySummaryStore,
-            $blockedUsersStore,
-            $selectedChatBlockedUsersStore,
-            $selectedCommunityBlockedUsersStore,
-        ),
-    );
-</script>
-
-<svelte:window onresize={onWindowResize} />
-
-{#if profile !== undefined}
-    <Overlay dismissible {onClose}>
-        <ModalContent
-            fill
-            {rendering}
-            compactFooter
-            backgroundImage={backgroundUrl}
-            hideFooter={!me && !chatButton && !canBlock && !canUnblock}
-            hideHeader
-            fixedWidth={false}
-            large={modal}
-            footerClass={hasCustomBackground ? "mask-footer" : ""}
-            {alignTo}
-            {onClose}>
-            {#snippet body()}
-                {#if profile !== undefined && user !== undefined}
-                    <UserProfileCard {user} {profile} {inGlobalContext} {onClose}></UserProfileCard>
-                {/if}
-            {/snippet}
-            {#snippet footer()}
-                <div class="footer" class:hasCustomBackground>
-                    <ButtonGroup align={"fill"}>
-                        {#if chatButton && !me}
-                            <Button onClick={handleOpenDirectChat} small
-                                ><Translatable resourceKey={i18nKey("profile.chat")} /></Button>
-                        {/if}
-                        {#if me}
-                            <Button onClick={showUserProfile} small
-                                ><Translatable resourceKey={i18nKey("profile.settings")} /></Button>
-                        {/if}
-                        {#if canBlock}
-                            <Button onClick={blockUser} small
-                                ><Translatable resourceKey={i18nKey("profile.block")} /></Button>
-                        {/if}
-                        {#if canUnblock}
-                            <Button onClick={unblockUser} small
-                                ><Translatable resourceKey={i18nKey("profile.unblock")} /></Button>
-                        {/if}
-                    </ButtonGroup>
-                    {#if $platformModeratorStore}
-                        <div class="suspend">
-                            <ButtonGroup align={"fill"}>
-                                {#if isSuspended}
-                                    <Button onClick={unsuspendUser} small
-                                        ><Translatable
-                                            resourceKey={i18nKey("unsuspendUser")} /></Button>
-                                {:else}
-                                    <Button onClick={suspendUser} small
-                                        ><Translatable
-                                            resourceKey={i18nKey("suspendUser")} /></Button>
-                                {/if}
-                            </ButtonGroup>
-                        </div>
-                    {/if}
-                </div>
-            {/snippet}
-        </ModalContent>
-    </Overlay>
-{/if}
-
-<style lang="scss">
-    .suspend {
-        margin-top: $sp3;
-    }
-
-    :global(.modal-content .footer.mask-footer) {
-        background-color: rgba(0, 0, 0, 0.45);
-
-        @include not-mobile() {
-            border-radius: 0 0 var(--modal-rd) var(--modal-rd);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/proposal/CommunityFinder.svelte b/frontend/app/src/components/home/proposal/CommunityFinder.svelte
deleted file mode 100644
index 50be3fb2ef..0000000000
--- a/frontend/app/src/components/home/proposal/CommunityFinder.svelte
+++ /dev/null
@@ -1,108 +0,0 @@
-<script lang="ts">
-    import { _ } from "svelte-i18n";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Search from "../../Search.svelte";
-    import { communitySearchState } from "../../../stores/search.svelte";
-    import { getContext } from "svelte";
-    import { AvatarSize, OpenChat, type CommunityMatch } from "@client";
-    import SelectedMatch from "./SelectedMatch.svelte";
-    import Avatar from "../../Avatar.svelte";
-    import Menu from "../../Menu.svelte";
-    import MenuItem from "../../MenuItem.svelte";
-
-    const client = getContext<OpenChat>("client");
-    const PAGE_SIZE = 15;
-
-    interface Props {
-        onSelect: (community: CommunityMatch | undefined) => void;
-        selected?: CommunityMatch;
-    }
-
-    let { onSelect, selected }: Props = $props();
-
-    function search(term: string) {
-        if (term === "") {
-            reset(true);
-            return;
-        }
-        communitySearchState.term = term;
-        communitySearchState.reset();
-
-        client
-            .exploreCommunities(
-                communitySearchState.term === "" ? undefined : communitySearchState.term,
-                communitySearchState.index,
-                PAGE_SIZE,
-                0,
-                [],
-            )
-            .then((results) => {
-                if (results.kind === "success") {
-                    communitySearchState.results = results.matches;
-                    communitySearchState.total = results.total;
-                }
-            });
-    }
-
-    function reset(clearSelected: boolean) {
-        communitySearchState.results = [];
-        communitySearchState.term = "";
-        if (clearSelected) {
-            select(undefined);
-        }
-    }
-
-    function select(match: CommunityMatch | undefined) {
-        selected = match;
-        communitySearchState.results = [];
-        onSelect(match);
-    }
-</script>
-
-<div class="finder">
-    {#if selected !== undefined}
-        <SelectedMatch onRemove={() => reset(true)} match={selected}></SelectedMatch>
-    {:else}
-        <Search
-            fill
-            bind:searchTerm={communitySearchState.term}
-            searching={false}
-            onPerformSearch={search}
-            placeholder={i18nKey("communities.search")} />
-    {/if}
-
-    {#if communitySearchState.results.length > 0}
-        <div class="menu">
-            <Menu fit>
-                {#each communitySearchState.results as community (community.id.communityId)}
-                    <MenuItem onclick={() => select(community)}>
-                        {#snippet icon()}
-                            <Avatar
-                                url={client.communityAvatarUrl(
-                                    community.id.communityId,
-                                    community.avatar,
-                                )}
-                                size={AvatarSize.Small} />
-                        {/snippet}
-                        {#snippet text()}
-                            {community.name}
-                        {/snippet}
-                    </MenuItem>
-                {/each}
-            </Menu>
-        </div>
-    {/if}
-</div>
-
-<style lang="scss">
-    .finder {
-        margin-bottom: $sp3;
-    }
-
-    .menu {
-        max-height: 250px;
-        overflow: auto;
-        width: fit-content;
-        margin-top: $sp3;
-    }
-</style>
diff --git a/frontend/app/src/components/home/proposal/GroupFinder.svelte b/frontend/app/src/components/home/proposal/GroupFinder.svelte
deleted file mode 100644
index 709463b50d..0000000000
--- a/frontend/app/src/components/home/proposal/GroupFinder.svelte
+++ /dev/null
@@ -1,100 +0,0 @@
-<script lang="ts">
-    import { _ } from "svelte-i18n";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Search from "../../Search.svelte";
-    import { groupSearchState } from "../../../stores/search.svelte";
-    import { getContext } from "svelte";
-    import { AvatarSize, OpenChat, type GroupMatch } from "@client";
-    import SelectedMatch from "./SelectedMatch.svelte";
-    import Avatar from "../../Avatar.svelte";
-    import Menu from "../../Menu.svelte";
-    import MenuItem from "../../MenuItem.svelte";
-
-    const client = getContext<OpenChat>("client");
-    const PAGE_SIZE = 15;
-
-    interface Props {
-        onSelect: (group: GroupMatch | undefined) => void;
-        selected?: GroupMatch;
-    }
-
-    let { onSelect, selected }: Props = $props();
-
-    function search(term: string) {
-        if (term === "") {
-            reset(true);
-            return;
-        }
-        groupSearchState.term = term;
-        groupSearchState.reset();
-
-        client.searchGroups(groupSearchState.term, PAGE_SIZE).then((results) => {
-            if (results.kind === "success") {
-                groupSearchState.results = results.matches;
-                groupSearchState.total = results.total;
-            }
-        });
-    }
-
-    function reset(clearSelected: boolean) {
-        groupSearchState.results = [];
-        groupSearchState.term = "";
-        if (clearSelected) {
-            select(undefined);
-        }
-    }
-
-    function select(match: GroupMatch | undefined) {
-        selected = match;
-        groupSearchState.results = [];
-        onSelect(match);
-    }
-</script>
-
-<div class="finder">
-    {#if selected !== undefined}
-        <SelectedMatch onRemove={() => reset(true)} match={selected}></SelectedMatch>
-    {:else}
-        <Search
-            fill
-            bind:searchTerm={groupSearchState.term}
-            searching={false}
-            onPerformSearch={search}
-            placeholder={i18nKey("searchGroupsPlaceholder")} />
-    {/if}
-
-    {#if groupSearchState.results.length > 0}
-        <div class="menu">
-            <Menu fit>
-                {#each groupSearchState.results as group (group.chatId.groupId)}
-                    <MenuItem onclick={() => select(group)}>
-                        {#snippet icon()}
-                            <Avatar
-                                url={client.groupAvatarUrl({
-                                    ...group,
-                                    id: group.chatId,
-                                })}
-                                size={AvatarSize.Small} />
-                        {/snippet}
-                        {#snippet text()}
-                            {group.name}
-                        {/snippet}
-                    </MenuItem>
-                {/each}
-            </Menu>
-        </div>
-    {/if}
-</div>
-
-<style lang="scss">
-    .finder {
-        margin-bottom: $sp3;
-    }
-
-    .menu {
-        max-height: 250px;
-        overflow: auto;
-        width: fit-content;
-        margin-top: $sp3;
-    }
-</style>
diff --git a/frontend/app/src/components/home/proposal/MakeProposalModal.svelte b/frontend/app/src/components/home/proposal/MakeProposalModal.svelte
deleted file mode 100644
index 84d3717fe2..0000000000
--- a/frontend/app/src/components/home/proposal/MakeProposalModal.svelte
+++ /dev/null
@@ -1,935 +0,0 @@
-<script lang="ts">
-    import BotPublisher from "@src/components/bots/BotPublisher.svelte";
-    import {
-        cryptoBalanceStore,
-        currentUserIdStore,
-        currentUserStore,
-        iconSize,
-        mobileWidth,
-        routeForChatIdentifier,
-        type CandidateProposalAction,
-        type MultiUserChat,
-        type NervousSystemDetails,
-        type OpenChat,
-        type ResourceKey,
-    } from "@client";
-    import { isPrincipalValid, isUrl, random32, type ExternalBot } from "@shared";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import EyeIcon from "svelte-material-icons/EyeOutline.svelte";
-    import PencilIcon from "svelte-material-icons/PencilOutline.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { pinNumberErrorMessageStore } from "../../../stores/pinNumber";
-    import {
-        createAddTokenPayload,
-        createPublishExternalBotPayload,
-        createRegisterExternalAchievementPayload,
-        createUpdateTokenPayload,
-    } from "../../../utils/sns";
-    import Button from "../../Button.svelte";
-    import ErrorMessage from "../../ErrorMessage.svelte";
-    import Input from "../../Input.svelte";
-    import Legend from "../../Legend.svelte";
-    import ModalContent from "../../ModalContent.svelte";
-    import Select from "../../Select.svelte";
-    import TextArea from "../../TextArea.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import AccountInfo from "../AccountInfo.svelte";
-    import BalanceWithRefresh from "../BalanceWithRefresh.svelte";
-    import DurationPicker from "../DurationPicker.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import RemoveBot from "./RemoveBot.svelte";
-    import TransferSnsFunds from "./TransferSNSFunds.svelte";
-    import VerificationProposal from "./VerificationProposal.svelte";
-
-    const MIN_TITLE_LENGTH = 3;
-    const MAX_TITLE_LENGTH = 120;
-    const MAX_URL_LENGTH = 2000;
-    const MIN_SUMMARY_LENGTH = 3;
-    const MAX_SUMMARY_LENGTH = 10000;
-    const CANISTER_ID_LENGTH = 27;
-    const MIN_ACHIEVEMENT_NAME_LENGTH = 3;
-    const MAX_ACHIEVEMENT_NAME_LENGTH = 45;
-    const MIN_CHIT_REWARD = 5000;
-    const MIN_AWARDS = 200;
-    const CHAT_FEE_PER_CHIT_AWARD: bigint = 20_000n; // 1/5000th of a CHAT
-    const ONE_MONTH = 1000 * 60 * 60 * 24 * 7 * 4;
-    const TOKEN_LISTING_FEE: bigint = 50_000_100_000n; // 500 CHAT + transfer fee
-
-    const PROPOSALS_BOT_CANISTER = import.meta.env.OC_PROPOSALS_BOT_CANISTER!;
-    const REGISTRY_CANISTER = import.meta.env.OC_REGISTRY_CANISTER!;
-    const USER_INDEX_CANISTER = import.meta.env.OC_USER_INDEX_CANISTER!;
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        selectedMultiUserChat: MultiUserChat;
-        nervousSystem: NervousSystemDetails;
-        onClose: () => void;
-    }
-
-    let { selectedMultiUserChat, nervousSystem, onClose }: Props = $props();
-
-    let title = $state("");
-    let url = $state("");
-    let summary = $state("");
-    let achievementExpiry: bigint = $state(BigInt(ONE_MONTH));
-    let achievementExpiryValid = $state(true);
-    let chitRewardText = $state("5000");
-    let maxAwardsText = $state("200");
-    let step = $state(-1);
-    let actualWidth = $state(0);
-    let summaryPreview = $state(false);
-    let busy = $state(true);
-    let selectedProposalType:
-        | "motion"
-        | "publish_bot"
-        | "remove_bot"
-        | "transfer_sns_funds"
-        | "register_external_achievement"
-        | "advance_sns_target_version"
-        | "add_token"
-        | "update_token"
-        | "set_community_verification"
-        | "set_group_verification"
-        | "revoke_community_verification"
-        | "revoke_group_verification"
-        | undefined = $state(undefined);
-    let error: string | undefined = $state(undefined);
-    let depositMessage: ResourceKey | undefined = $state(undefined);
-    let depositError = $state(true);
-    let summaryContainerHeight = $state(0);
-    let summaryHeight = $state(0);
-    let refreshingBalance = $state(false);
-    let balanceWithRefresh: BalanceWithRefresh;
-    let achivementName = $state("");
-    let selectedBot: ExternalBot | undefined = $state(undefined);
-    //@ts-ignore
-    let transferSnsFunds: TransferSnsFunds | undefined = $state();
-    //@ts-ignore
-    let verificationComponent: VerificationProposal | undefined = $state();
-    //@ts-ignore
-    let removeBotComponent: RemoveBot | undefined;
-    let transferSnsFundsValid: boolean = $state(false);
-    let removeBotValid: boolean = $state(false);
-    let verificationValid: boolean = $state(false);
-
-    function summaryDescription(type: typeof selectedProposalType): [ResourceKey, ResourceKey] {
-        switch (type) {
-            case "set_community_verification":
-            case "set_group_verification":
-            case "revoke_community_verification":
-            case "revoke_group_verification":
-                return [i18nKey("verified.evidenceLabel"), i18nKey("verified.evidencePlaceholder")];
-            case "remove_bot":
-                return [
-                    i18nKey("bots.manage.removeReason"),
-                    i18nKey("bots.manage.removeReasonPlaceholder"),
-                ];
-            default:
-                return [i18nKey("proposal.maker.summary"), i18nKey("proposal.maker.enterSummary")];
-        }
-    }
-
-    function defaultMessage(): ResourceKey {
-        const cost = client.formatTokens(requiredFunds, tokenDetails.decimals);
-        return i18nKey("proposal.maker.message", { cost, token: symbol });
-    }
-
-    async function onClickPrimary(): Promise<void> {
-        if (step === 0) {
-            balanceWithRefresh.refresh();
-        } else if (canSubmit) {
-            onSubmit();
-        } else if (step === 1) {
-            step = 2;
-        }
-    }
-
-    async function onSubmit(): Promise<void> {
-        if (!valid) return;
-
-        busy = true;
-
-        const pin = await client.promptForPinIfRequired();
-
-        if (
-            !(await approvePayment(
-                PROPOSALS_BOT_CANISTER,
-                proposalCost + BigInt(2) * transferFee,
-                pin,
-            ))
-        ) {
-            busy = false;
-            return;
-        }
-
-        if (
-            selectedProposalType === "register_external_achievement" ||
-            selectedProposalType === "add_token"
-        ) {
-            const addToken = selectedProposalType === "add_token";
-            let spender = addToken ? REGISTRY_CANISTER : USER_INDEX_CANISTER;
-            let amount = addToken ? TOKEN_LISTING_FEE : achievementChatCost;
-
-            if (!(await approvePayment(spender, amount, pin))) {
-                busy = false;
-                return;
-            }
-        }
-
-        const action = convertAction();
-
-        if (action === undefined) {
-            busy = false;
-            return;
-        }
-
-        client
-            .submitProposal(nervousSystem.governanceCanisterId, {
-                title,
-                url: url === "" ? undefined : url,
-                summary,
-                action,
-            })
-            .then((success) => {
-                busy = false;
-                if (success) {
-                    onClose();
-                } else {
-                    error = "unexpectedError";
-                }
-            });
-    }
-
-    function convertAction(): CandidateProposalAction | undefined {
-        switch (selectedProposalType) {
-            case "motion":
-            case "advance_sns_target_version":
-                return { kind: selectedProposalType };
-            case "transfer_sns_funds": {
-                return transferSnsFunds?.convertAction();
-            }
-            case "remove_bot": {
-                return removeBotComponent?.convertAction();
-            }
-            case "set_community_verification":
-            case "revoke_community_verification":
-            case "set_group_verification":
-            case "revoke_group_verification": {
-                return verificationComponent?.convertAction();
-            }
-            case "add_token": {
-                return {
-                    kind: "execute_generic_nervous_system_function",
-                    functionId: BigInt(7000),
-                    payload: createAddTokenPayload(
-                        addOrUpdateTokenLedgerCanisterId,
-                        $currentUserIdStore,
-                        addOrUpdateTokenInfoUrl,
-                        addOrUpdateTokenTransactionUrlFormat,
-                        undefined,
-                    ),
-                };
-            }
-            case "update_token": {
-                return {
-                    kind: "execute_generic_nervous_system_function",
-                    functionId: BigInt(7001),
-                    payload: createUpdateTokenPayload(
-                        addOrUpdateTokenLedgerCanisterId,
-                        undefined,
-                        undefined,
-                        addOrUpdateTokenInfoUrl,
-                        addOrUpdateTokenTransactionUrlFormat,
-                        undefined,
-                    ),
-                };
-            }
-            case "register_external_achievement": {
-                return {
-                    kind: "execute_generic_nervous_system_function",
-                    functionId: BigInt(1012),
-                    payload: createRegisterExternalAchievementPayload(
-                        random32(),
-                        $currentUserIdStore,
-                        achivementName,
-                        achievementUrl,
-                        logo,
-                        awardingAchievementCanisterId,
-                        chitReward,
-                        BigInt(Date.now()) + achievementExpiry,
-                        maxAwards,
-                    ),
-                };
-            }
-            case "publish_bot": {
-                if (selectedBot === undefined) {
-                    throw new Error("No bot has been selected - this should not happen");
-                }
-                return {
-                    kind: "execute_generic_nervous_system_function",
-                    functionId: BigInt(1015),
-                    payload: createPublishExternalBotPayload(selectedBot),
-                };
-            }
-        }
-    }
-
-    async function approvePayment(
-        spender_canister_id: string,
-        amount: bigint,
-        pin: string | undefined,
-    ): Promise<boolean> {
-        return client
-            .approveTransfer(
-                spender_canister_id,
-                tokenDetails.ledger,
-                amount,
-                BigInt(Date.now() + 1000 * 60 * 60 * 24 * 5), // allow 5 days for proposal
-                pin,
-            )
-            .then((resp) => {
-                if (resp.kind === "success") {
-                    return true;
-                } else if ($pinNumberErrorMessageStore === undefined) {
-                    error = "approvalError";
-                }
-
-                return false;
-            })
-            .catch(() => {
-                return false;
-            });
-    }
-
-    function onStartRefreshingBalance() {
-        refreshingBalance = true;
-    }
-
-    function onRefreshingBalanceSuccess() {
-        if (step === -1) {
-            step = insufficientFunds ? 0 : 1;
-            busy = false;
-            if (!insufficientFunds) {
-                depositError = false;
-            }
-        } else if (step === 0 && !insufficientFunds) {
-            step = 1;
-            depositError = false;
-        }
-
-        refreshingBalance = false;
-    }
-
-    function onRefreshingBalanceFailed() {
-        depositMessage = i18nKey("Failed to refresh balance");
-        depositError = true;
-        refreshingBalance = false;
-    }
-
-    function wrappedSummary(summary: string) {
-        const groupPath = routeForChatIdentifier(
-            selectedMultiUserChat.kind === "group_chat" ? "chats" : "community",
-            selectedMultiUserChat.id,
-        );
-
-        return `${summary}
-
-> Submitted by [@${$currentUserStore.username}](https://oc.app/user/${$currentUserIdStore}) on [OpenChat](https://oc.app${groupPath})`;
-    }
-
-    function isLogoValid(logo: string): boolean {
-        return logo.length === 0 || isUrl(logo);
-    }
-    let errorMessage = $derived(
-        error !== undefined ? i18nKey("proposal.maker." + error) : $pinNumberErrorMessageStore,
-    );
-    let tokenDetails = $derived(nervousSystem.token);
-    let ledger = $derived(tokenDetails.ledger);
-    let cryptoBalance = $derived($cryptoBalanceStore.get(ledger) ?? BigInt(0));
-    let symbol = $derived(tokenDetails.symbol);
-    let transferFee = $derived(tokenDetails.transferFee);
-    let proposalCost = $derived(nervousSystem.proposalRejectionFee);
-    let requiredFunds = $derived(proposalCost + BigInt(3) * transferFee);
-    let chitReward = $derived(Number(chitRewardText));
-    let chitRewardValid = $derived(chitReward >= MIN_CHIT_REWARD);
-    let maxAwards = $derived(Number(maxAwardsText));
-    let achievementChatCost = $derived(
-        BigInt(chitReward * maxAwards) * CHAT_FEE_PER_CHIT_AWARD + tokenDetails.transferFee,
-    );
-    let insufficientFunds = $derived(cryptoBalance < requiredFunds);
-    let insufficientFundsForPayment = $derived(
-        cryptoBalance <
-            requiredFunds +
-                (selectedProposalType === "register_external_achievement"
-                    ? achievementChatCost
-                    : selectedProposalType === "add_token"
-                      ? TOKEN_LISTING_FEE
-                      : BigInt(0)),
-    );
-    let titleValid = $derived(title.length >= MIN_TITLE_LENGTH && title.length <= MAX_TITLE_LENGTH);
-    let urlValid = $derived(url.length <= MAX_URL_LENGTH);
-    let summaryValid = $derived(
-        summary.length >= MIN_SUMMARY_LENGTH && summary.length <= MAX_SUMMARY_LENGTH,
-    );
-    let maxAwardsValid = $derived(maxAwards >= MIN_AWARDS);
-    let achievementNameValid = $derived(
-        achivementName.length >= MIN_ACHIEVEMENT_NAME_LENGTH &&
-            achivementName.length <= MAX_ACHIEVEMENT_NAME_LENGTH,
-    );
-    let addOrUpdateTokenLedgerCanisterId = $state("");
-
-    let addOrUpdateTokenInfoUrl = $state("");
-
-    let addOrUpdateTokenTransactionUrlFormat = $state("");
-
-    let logo = $state("");
-
-    let achievementUrl = $state("");
-
-    let awardingAchievementCanisterId = $state("");
-
-    let valid = $derived(
-        selectedProposalType !== undefined &&
-            !insufficientFunds &&
-            !insufficientFundsForPayment &&
-            titleValid &&
-            urlValid &&
-            summaryValid &&
-            (selectedProposalType === "motion" ||
-                selectedProposalType === "advance_sns_target_version" ||
-                (selectedProposalType === "publish_bot" && selectedBot !== undefined) ||
-                (selectedProposalType === "remove_bot" && removeBotValid) ||
-                (selectedProposalType === "transfer_sns_funds" && transferSnsFundsValid) ||
-                (selectedProposalType === "set_community_verification" && verificationValid) ||
-                (selectedProposalType === "set_group_verification" && verificationValid) ||
-                (selectedProposalType === "register_external_achievement" &&
-                    achievementNameValid &&
-                    chitRewardValid &&
-                    maxAwardsValid &&
-                    achievementExpiryValid &&
-                    isLogoValid(logo) &&
-                    achievementUrl.length > 0 &&
-                    awardingAchievementCanisterId.length > 0 &&
-                    isPrincipalValid(awardingAchievementCanisterId)) ||
-                (selectedProposalType === "add_token" &&
-                    isPrincipalValid(addOrUpdateTokenLedgerCanisterId) &&
-                    addOrUpdateTokenTransactionUrlFormat.length > 0) ||
-                (selectedProposalType === "update_token" &&
-                    isPrincipalValid(addOrUpdateTokenLedgerCanisterId) &&
-                    addOrUpdateTokenTransactionUrlFormat.length > 0)),
-    );
-    let canSubmit = $derived(
-        step === 2 ||
-            (step === 1 &&
-                (selectedProposalType === "motion" ||
-                    selectedProposalType === "advance_sns_target_version")),
-    );
-    $effect(() => {
-        if (tokenDetails !== undefined) {
-            depositMessage = defaultMessage();
-        }
-    });
-    let [summaryLabel, summaryPlaceholder] = $derived(summaryDescription(selectedProposalType));
-</script>
-
-<ModalContent bind:actualWidth fill>
-    {#snippet header()}
-        <div class="header">
-            {$_("proposal.maker.header")}
-            <BalanceWithRefresh
-                bind:this={balanceWithRefresh}
-                {ledger}
-                value={cryptoBalance}
-                label={i18nKey("cryptoAccount.shortBalanceLabel")}
-                bold
-                onClick={onStartRefreshingBalance}
-                onRefreshed={onRefreshingBalanceSuccess}
-                onError={onRefreshingBalanceFailed} />
-        </div>
-    {/snippet}
-    {#snippet body()}
-        <div class="body">
-            <div class="sections">
-                <div class="topup hidden" class:visible={step === 0}>
-                    <AccountInfo {ledger} />
-                    <p><Translatable resourceKey={i18nKey("tokenTransfer.makeDeposit")} /></p>
-                </div>
-                <div class="common hidden" class:visible={step === 1}>
-                    <section class="type">
-                        <Legend label={i18nKey("proposal.maker.type")} required />
-                        <Select bind:value={selectedProposalType} margin={false}>
-                            <option value={undefined} disabled selected
-                                ><Translatable
-                                    resourceKey={i18nKey("proposal.maker.selectType")} /></option>
-                            <option value={"motion"}>Motion</option>
-                            <option value={"transfer_sns_funds"}>Transfer SNS funds</option>
-                            <option value={"advance_sns_target_version"}
-                                >Advance SNS target version</option>
-                            {#if symbol === "CHAT"}
-                                <option value={"register_external_achievement"}
-                                    >Register external achievement</option>
-                                <option value={"add_token"}>Add token</option>
-                                <option value={"update_token"}>Update token</option>
-                                <option value={"publish_bot"}>Publish a bot</option>
-                                <option value={"remove_bot"}>
-                                    <Translatable resourceKey={i18nKey("bots.manage.remove")}
-                                    ></Translatable>
-                                </option>
-                                <option value={"set_community_verification"}>
-                                    <Translatable
-                                        resourceKey={i18nKey(
-                                            "verified.verify",
-                                            undefined,
-                                            "community",
-                                            true,
-                                        )}></Translatable>
-                                </option>
-                                <option value={"set_group_verification"}>
-                                    <Translatable
-                                        resourceKey={i18nKey(
-                                            "verified.verify",
-                                            undefined,
-                                            "group",
-                                            true,
-                                        )}></Translatable>
-                                </option>
-                                <option value={"revoke_community_verification"}>
-                                    <Translatable
-                                        resourceKey={i18nKey(
-                                            "verified.revoke",
-                                            undefined,
-                                            "community",
-                                            true,
-                                        )}></Translatable>
-                                </option>
-                                <option value={"revoke_group_verification"}>
-                                    <Translatable
-                                        resourceKey={i18nKey(
-                                            "verified.revoke",
-                                            undefined,
-                                            "group",
-                                            true,
-                                        )}></Translatable>
-                                </option>
-                            {/if}
-                        </Select>
-                    </section>
-                    <section>
-                        <Legend label={i18nKey("proposal.maker.title")} required />
-                        <Input
-                            autofocus
-                            disabled={busy}
-                            invalid={title.length > 0 && !titleValid}
-                            bind:value={title}
-                            minlength={MIN_TITLE_LENGTH}
-                            maxlength={MAX_TITLE_LENGTH}
-                            countdown
-                            placeholder={i18nKey("proposal.maker.enterTitle")} />
-                    </section>
-                    <section>
-                        <Legend
-                            label={i18nKey("proposal.maker.url")}
-                            rules={i18nKey("proposal.maker.urlRules")} />
-                        <Input
-                            disabled={busy}
-                            invalid={!urlValid}
-                            bind:value={url}
-                            maxlength={MAX_URL_LENGTH}
-                            countdown
-                            placeholder={i18nKey("proposal.maker.enterUrl")} />
-                    </section>
-                    <section>
-                        <div class="summary-heading">
-                            <Legend
-                                required
-                                label={summaryLabel}
-                                rules={i18nKey("proposal.maker.summaryRules")} />
-                            <div
-                                role="switch"
-                                tabindex="1"
-                                class="preview"
-                                onclick={() => (summaryPreview = !summaryPreview)}>
-                                <span class="text"
-                                    ><Translatable
-                                        resourceKey={i18nKey(
-                                            summaryPreview ? "edit" : "preview",
-                                        )} /></span>
-                                <span class="icon">
-                                    {#if summaryPreview}
-                                        <PencilIcon size={$iconSize} viewBox="0 -3 24 24" />
-                                    {:else}
-                                        <EyeIcon size={$iconSize} viewBox="0 -3 24 24" />
-                                    {/if}
-                                </span>
-                            </div>
-                        </div>
-                        <div style={`height: ${summaryContainerHeight}px`}>
-                            {#if summaryPreview}
-                                <div class="markdown" style={`height: ${summaryHeight}px`}>
-                                    <Markdown inline={false} text={wrappedSummary(summary)} />
-                                </div>
-                            {:else}
-                                <TextArea
-                                    rows={8}
-                                    bind:outerHeight={summaryContainerHeight}
-                                    bind:innerHeight={summaryHeight}
-                                    disabled={busy}
-                                    invalid={summary.length > 0 && !summaryValid}
-                                    bind:value={summary}
-                                    margin={false}
-                                    scroll
-                                    minlength={MIN_SUMMARY_LENGTH}
-                                    maxlength={MAX_SUMMARY_LENGTH}
-                                    placeholder={summaryPlaceholder} />
-                            {/if}
-                        </div>
-                    </section>
-                </div>
-                <div class="action hidden" class:visible={step === 2}>
-                    {#if selectedProposalType === "set_community_verification" || selectedProposalType === "revoke_community_verification" || selectedProposalType === "set_group_verification" || selectedProposalType === "revoke_group_verification"}
-                        <VerificationProposal
-                            bind:this={verificationComponent}
-                            bind:valid={verificationValid}
-                            type={selectedProposalType} />
-                    {:else if selectedProposalType === "publish_bot"}
-                        <BotPublisher bind:selected={selectedBot}></BotPublisher>
-                    {:else if selectedProposalType === "remove_bot"}
-                        <RemoveBot bind:valid={removeBotValid}></RemoveBot>
-                    {:else if selectedProposalType === "transfer_sns_funds"}
-                        <TransferSnsFunds
-                            bind:valid={transferSnsFundsValid}
-                            bind:this={transferSnsFunds}
-                            {nervousSystem} />
-                    {:else if selectedProposalType === "register_external_achievement"}
-                        <div>
-                            <section>
-                                <Legend
-                                    label={i18nKey("proposal.maker.achievementName")}
-                                    required />
-                                <Input
-                                    autofocus
-                                    disabled={busy}
-                                    invalid={achivementName.length > 0 && !achievementNameValid}
-                                    bind:value={achivementName}
-                                    minlength={MIN_ACHIEVEMENT_NAME_LENGTH}
-                                    maxlength={MAX_ACHIEVEMENT_NAME_LENGTH}
-                                    countdown
-                                    placeholder={i18nKey("proposal.maker.enterAchievementName")} />
-                            </section>
-                            <section>
-                                <Legend label={i18nKey("proposal.maker.achievementUrl")} required />
-                                <Input
-                                    disabled={busy}
-                                    minlength={1}
-                                    maxlength={100}
-                                    bind:value={achievementUrl}
-                                    countdown
-                                    placeholder={i18nKey("https://myapp.xyz/register")} />
-                            </section>
-                            <section>
-                                <Legend label={i18nKey("proposal.maker.achievementLogo")} />
-                                <Input
-                                    disabled={busy}
-                                    invalid={!isLogoValid(logo)}
-                                    minlength={0}
-                                    maxlength={50000}
-                                    bind:value={logo}
-                                    countdown
-                                    placeholder={i18nKey(
-                                        "data:image/svg+xml;base64,PHN2ZyB3aW...",
-                                    )} />
-                            </section>
-                            <section>
-                                <Legend
-                                    label={i18nKey("proposal.maker.awardingAchievementCanisterId")}
-                                    rules={i18nKey(
-                                        "proposal.maker.awardingAchievementCanisterIdRules",
-                                    )}
-                                    required />
-                                <Input
-                                    autofocus
-                                    disabled={busy}
-                                    invalid={awardingAchievementCanisterId.length > 0 &&
-                                        !isPrincipalValid(awardingAchievementCanisterId)}
-                                    bind:value={awardingAchievementCanisterId}
-                                    minlength={CANISTER_ID_LENGTH}
-                                    maxlength={CANISTER_ID_LENGTH}
-                                    countdown
-                                    placeholder={i18nKey("2ouva-viaaa-aaaaq-aaamq-cai")} />
-                            </section>
-                            <section>
-                                <Legend
-                                    label={i18nKey("proposal.maker.chitReward")}
-                                    rules={i18nKey("proposal.maker.chitRewardRules", {
-                                        value: MIN_CHIT_REWARD,
-                                    })}
-                                    required />
-                                <Input
-                                    disabled={busy}
-                                    invalid={chitRewardText.length > 0 && !chitRewardValid}
-                                    minlength={4}
-                                    maxlength={5}
-                                    bind:value={chitRewardText}
-                                    placeholder={i18nKey("proposal.maker.enterChitReward")} />
-                            </section>
-                            <section>
-                                <Legend
-                                    label={i18nKey("proposal.maker.maxAwards")}
-                                    rules={i18nKey("proposal.maker.maxAwardsRules", {
-                                        value: MIN_AWARDS,
-                                    })}
-                                    required />
-                                <Input
-                                    disabled={busy}
-                                    invalid={maxAwardsText.length > 0 && !maxAwardsValid}
-                                    minlength={3}
-                                    maxlength={8}
-                                    bind:value={maxAwardsText}
-                                    placeholder={i18nKey("proposal.maker.enterMaxAwards")} />
-                            </section>
-                            <section>
-                                <Legend
-                                    label={i18nKey("proposal.maker.achievementExpiry")}
-                                    required />
-
-                                <DurationPicker
-                                    bind:valid={achievementExpiryValid}
-                                    bind:milliseconds={achievementExpiry}
-                                    unitFilter={(u) => !["minutes", "hours"].includes(u)} />
-                            </section>
-                        </div>
-                    {:else if selectedProposalType === "add_token" || selectedProposalType === "update_token"}
-                        <div>
-                            <section>
-                                <Legend
-                                    label={i18nKey("proposal.maker.ledgerCanisterId")}
-                                    required />
-                                <Input
-                                    autofocus
-                                    disabled={busy}
-                                    invalid={addOrUpdateTokenLedgerCanisterId.length > 0 &&
-                                        !isPrincipalValid(addOrUpdateTokenLedgerCanisterId)}
-                                    bind:value={addOrUpdateTokenLedgerCanisterId}
-                                    minlength={CANISTER_ID_LENGTH}
-                                    maxlength={CANISTER_ID_LENGTH}
-                                    countdown
-                                    placeholder={i18nKey("2ouva-viaaa-aaaaq-aaamq-cai")} />
-                            </section>
-                            <section>
-                                <Legend
-                                    label={i18nKey("proposal.maker.tokenInfoUrl")}
-                                    required={selectedProposalType === "add_token"} />
-                                <Input
-                                    disabled={busy}
-                                    minlength={1}
-                                    maxlength={100}
-                                    bind:value={addOrUpdateTokenInfoUrl}
-                                    countdown
-                                    placeholder={i18nKey("https://token.com/info")} />
-                            </section>
-                            <section>
-                                <Legend
-                                    label={i18nKey("proposal.maker.transactionUrlFormat")}
-                                    required={selectedProposalType === "add_token"} />
-                                <Input
-                                    disabled={busy}
-                                    minlength={1}
-                                    maxlength={200}
-                                    bind:value={addOrUpdateTokenTransactionUrlFormat}
-                                    countdown
-                                    placeholder={i18nKey(
-                                        `https://token.com/transactions/{transaction_index}`,
-                                    )} />
-                            </section>
-                        </div>
-                    {/if}
-                </div>
-            </div>
-        </div>
-    {/snippet}
-    {#snippet footer()}
-        <span class="footer">
-            {#if (selectedProposalType === "register_external_achievement" || selectedProposalType === "add_token") && step === 2}
-                <p class="message" class:error={insufficientFundsForPayment}>
-                    <Translatable
-                        resourceKey={i18nKey(
-                            "proposal.maker." +
-                                (selectedProposalType === "add_token"
-                                    ? "addTokenChatCost"
-                                    : "achievementChatCost"),
-                            {
-                                cost: client.formatTokens(
-                                    selectedProposalType === "add_token"
-                                        ? TOKEN_LISTING_FEE
-                                        : achievementChatCost,
-                                    8,
-                                ),
-                                chat: "CHAT",
-                            },
-                        )} />
-                </p>
-            {/if}
-            {#if depositMessage !== undefined}
-                <p class="message" class:error={depositError}>
-                    <Translatable resourceKey={depositMessage} />
-                </p>
-            {/if}
-            {#if errorMessage !== undefined}
-                <div class="error">
-                    <ErrorMessage><Translatable resourceKey={errorMessage} /></ErrorMessage>
-                </div>
-            {/if}
-            <div class="group-buttons">
-                <div class="back">
-                    {#if step > 1 || (step == 1 && insufficientFunds)}
-                        <Button
-                            disabled={busy}
-                            small={!$mobileWidth}
-                            tiny={$mobileWidth}
-                            onClick={() => (step = step - 1)}
-                            ><Translatable resourceKey={i18nKey("group.back")} /></Button>
-                    {/if}
-                </div>
-                <div class="actions">
-                    <Button
-                        disabled={busy}
-                        small={!$mobileWidth}
-                        tiny={$mobileWidth}
-                        onClick={onClose}
-                        secondary>{$_("cancel")}</Button>
-
-                    <Button
-                        disabled={busy ||
-                            (canSubmit && !valid) ||
-                            selectedProposalType === undefined}
-                        loading={busy || refreshingBalance}
-                        small={!$mobileWidth}
-                        tiny={$mobileWidth}
-                        onClick={onClickPrimary}
-                        ><Translatable
-                            resourceKey={i18nKey(
-                                step === 0 ? "refresh" : canSubmit ? "submit" : "group.next",
-                            )} /></Button>
-                </div>
-            </div>
-        </span>
-    {/snippet}
-</ModalContent>
-
-<style lang="scss">
-    :global(.group-buttons button:not(.loading)) {
-        @include mobile() {
-            min-width: 0 !important;
-        }
-    }
-
-    :global(.group-buttons .actions button) {
-        height: auto;
-    }
-
-    .header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: $sp2;
-    }
-
-    .footer {
-        text-align: left;
-    }
-
-    .group-buttons {
-        display: flex;
-        justify-content: space-between;
-        width: 100%;
-        gap: $sp3;
-
-        .back {
-            display: flex;
-        }
-
-        .actions {
-            display: flex;
-            justify-content: flex-end;
-            gap: $sp3;
-        }
-    }
-
-    .body {
-        width: 100%;
-        padding: $sp3 $sp5 $sp2 $sp5;
-
-        @include mobile() {
-            padding: $sp3 $sp4 $sp2 $sp4;
-        }
-
-        overflow: hidden;
-        position: relative;
-    }
-
-    .sections {
-        display: flex;
-        position: relative;
-        gap: $sp5;
-        @include mobile() {
-            gap: $sp4;
-        }
-    }
-
-    section.type {
-        margin-bottom: $sp3;
-    }
-
-    .topup,
-    .common,
-    .action {
-        flex: 0 0 100%;
-        gap: $sp2;
-        display: flex;
-        flex-direction: column;
-    }
-
-    .hidden {
-        display: none;
-        &.visible {
-            display: flex;
-        }
-    }
-
-    .summary-heading {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-    }
-
-    .preview {
-        cursor: pointer;
-        color: var(--txt-light);
-        display: flex;
-        justify-content: flex-end;
-        align-items: center;
-        gap: 6px;
-
-        .text {
-            text-transform: lowercase;
-            text-decoration: underline;
-            @include font(light, normal, fs-60);
-        }
-    }
-
-    .markdown {
-        margin-bottom: $sp2;
-        @include input(normal);
-        @include nice-scrollbar();
-    }
-
-    .message {
-        margin-bottom: $sp4;
-        color: var(--txt-light);
-        &.error {
-            color: var(--error);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/proposal/RemoveBot.svelte b/frontend/app/src/components/home/proposal/RemoveBot.svelte
deleted file mode 100644
index 7764764e23..0000000000
--- a/frontend/app/src/components/home/proposal/RemoveBot.svelte
+++ /dev/null
@@ -1,68 +0,0 @@
-<script lang="ts">
-    import { IDL } from "@icp-sdk/core/candid";
-    import { _ } from "svelte-i18n";
-    import Legend from "../../Legend.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import {
-        type ExecuteGenericNervousSystemFunction,
-        type ExternalBotLike,
-    } from "@client";
-    import { Principal } from "@icp-sdk/core/principal";
-    import BotExplorer from "../../bots/BotExplorer.svelte";
-    import SelectedMatch from "./SelectedMatch.svelte";
-
-    interface Props {
-        valid: boolean;
-    }
-
-    let { valid = $bindable() }: Props = $props();
-
-    let selected = $state<ExternalBotLike | undefined>(undefined);
-    let isValid = $derived(selected !== undefined);
-
-    function selectMatch(match: ExternalBotLike | undefined) {
-        selected = match;
-    }
-
-    $effect(() => {
-        if (valid !== isValid) {
-            valid = isValid;
-        }
-    });
-
-    function removeBotPayload(bot: ExternalBotLike): Uint8Array {
-        return new Uint8Array(
-            IDL.encode(
-                [
-                    IDL.Record({
-                        bot_id: IDL.Principal,
-                    }),
-                ],
-                [
-                    {
-                        bot_id: Principal.fromText(bot.id),
-                    },
-                ],
-            ),
-        );
-    }
-
-    export function convertAction(): ExecuteGenericNervousSystemFunction | undefined {
-        if (selected === undefined || !isValid) return undefined;
-
-        return {
-            kind: "execute_generic_nervous_system_function",
-            functionId: BigInt(1014),
-            payload: removeBotPayload(selected),
-        };
-    }
-</script>
-
-<section>
-    <Legend label={i18nKey("bots.manage.removeSearch")} />
-    {#if selected !== undefined}
-        <SelectedMatch onRemove={() => (selected = undefined)} match={selected}></SelectedMatch>
-    {:else}
-        <BotExplorer maxHeight={"450px"} fill onSelect={selectMatch}></BotExplorer>
-    {/if}
-</section>
diff --git a/frontend/app/src/components/home/proposal/TransferSNSFunds.svelte b/frontend/app/src/components/home/proposal/TransferSNSFunds.svelte
deleted file mode 100644
index 845d035737..0000000000
--- a/frontend/app/src/components/home/proposal/TransferSNSFunds.svelte
+++ /dev/null
@@ -1,115 +0,0 @@
-<script lang="ts">
-    import {
-        isPrincipalValid,
-        isSubAccountValid,
-        type NervousSystemDetails,
-        type Treasury,
-        type TransferSnsFunds,
-    } from "@client";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Legend from "../../Legend.svelte";
-    import Radio from "../../Radio.svelte";
-    import Input from "../../Input.svelte";
-
-    interface Props {
-        nervousSystem: NervousSystemDetails;
-        valid: boolean;
-    }
-
-    let { nervousSystem, valid = $bindable() }: Props = $props();
-
-    let treasury: Treasury = $state("SNS");
-    let busy = $state(false);
-    let recipientOwner = $state("");
-    let recipientSubaccount = $state("");
-    let amountText = $state("");
-    let tokenDetails = $derived(nervousSystem.token);
-    let transferFee = $derived(tokenDetails.transferFee);
-    let amount = $derived(Number(amountText) * Number(Math.pow(10, tokenDetails.decimals)));
-    let amountValid = $derived(amount >= transferFee);
-    let symbol = $derived(tokenDetails.symbol);
-    let recipientOwnerValid = $derived(isPrincipalValid(recipientOwner));
-    let recipientSubaccountValid = $derived(
-        recipientSubaccount.length === 0 || isSubAccountValid(recipientSubaccount),
-    );
-    let token = $derived(treasury === "SNS" ? symbol : "ICP");
-    let isValid = $derived(amountValid && recipientOwnerValid && recipientSubaccountValid);
-
-    $effect(() => {
-        if (valid !== isValid) {
-            valid = isValid;
-        }
-    });
-
-    export function convertAction(): TransferSnsFunds {
-        return {
-            kind: "transfer_sns_funds",
-            recipient: {
-                owner: recipientOwner,
-                subaccount:
-                    recipientSubaccount.length > 0
-                        ? recipientSubaccount.padStart(64, "0")
-                        : undefined,
-            },
-            amount: BigInt(Math.floor(amount)),
-            treasury,
-        };
-    }
-</script>
-
-<div>
-    <section>
-        <Legend label={i18nKey("proposal.maker.treasury")} required />
-        <Radio
-            id="chat_treasury"
-            group="treasury"
-            value={symbol}
-            label={i18nKey(symbol)}
-            disabled={busy}
-            checked={treasury === "SNS"}
-            onChange={() => (treasury = "SNS")} />
-        <Radio
-            id="icp_treasury"
-            group="treasury"
-            value="ICP"
-            label={i18nKey("ICP")}
-            disabled={busy}
-            checked={treasury === "ICP"}
-            onChange={() => (treasury = "ICP")} />
-    </section>
-    <section>
-        <Legend label={i18nKey("proposal.maker.recipientOwner")} required />
-        <Input
-            disabled={busy}
-            invalid={recipientOwner.length > 0 && !recipientOwnerValid}
-            maxlength={63}
-            bind:value={recipientOwner}
-            placeholder={i18nKey("proposal.maker.enterRecipientOwner")} />
-    </section>
-    <section>
-        <Legend
-            label={i18nKey("proposal.maker.recipientSubaccount")}
-            rules={i18nKey("proposal.maker.recipientSubaccountRules")} />
-        <Input
-            disabled={busy}
-            invalid={!recipientSubaccountValid}
-            maxlength={64}
-            bind:value={recipientSubaccount}
-            placeholder={i18nKey("proposal.maker.enterRecipientSubaccount")} />
-    </section>
-    <section>
-        <Legend
-            label={i18nKey("proposal.maker.amount")}
-            rules={i18nKey("proposal.maker.amountRules", { token })}
-            required />
-        <Input
-            disabled={busy}
-            invalid={amountText.length > 0 && !amountValid}
-            minlength={1}
-            maxlength={20}
-            bind:value={amountText}
-            placeholder={i18nKey("proposal.maker.enterAmount", {
-                token,
-            })} />
-    </section>
-</div>
diff --git a/frontend/app/src/components/home/proposal/VerificationProposal.svelte b/frontend/app/src/components/home/proposal/VerificationProposal.svelte
deleted file mode 100644
index 64d632d270..0000000000
--- a/frontend/app/src/components/home/proposal/VerificationProposal.svelte
+++ /dev/null
@@ -1,186 +0,0 @@
-<script lang="ts">
-    import { IDL } from "@icp-sdk/core/candid";
-    import { _ } from "svelte-i18n";
-    import Legend from "../../Legend.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Input from "../../Input.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import {
-        type CommunityMatch,
-        type ExecuteGenericNervousSystemFunction,
-        type GroupMatch,
-        type Level,
-    } from "@client";
-    import CommunityFinder from "./CommunityFinder.svelte";
-    import GroupFinder from "./GroupFinder.svelte";
-    import { fade } from "svelte/transition";
-    import { Principal } from "@icp-sdk/core/principal";
-
-    const MIN_LENGTH = 3;
-    const MAX_LENGTH = 25;
-    type Operation = "set" | "revoke";
-
-    interface Props {
-        type:
-            | "set_community_verification"
-            | "revoke_community_verification"
-            | "set_group_verification"
-            | "revoke_group_verification";
-        valid: boolean;
-    }
-
-    let { type, valid = $bindable() }: Props = $props();
-
-    let selected = $state<GroupMatch | CommunityMatch | undefined>();
-    let name = $state("");
-    let nameValid = $derived(name.length >= MIN_LENGTH && name.length <= MAX_LENGTH);
-    let level = $derived<Level>(
-        type === "set_community_verification" || type === "revoke_community_verification"
-            ? "community"
-            : "group",
-    );
-    let operation = $derived<Operation>(
-        type === "set_community_verification" || type === "set_group_verification"
-            ? "set"
-            : "revoke",
-    );
-    let isValid = $derived(selected !== undefined && (operation === "revoke" || nameValid));
-
-    function selectMatch(match: GroupMatch | CommunityMatch | undefined) {
-        selected = match;
-        name = match?.name ?? "";
-    }
-
-    $effect(() => {
-        if (valid !== isValid) {
-            valid = isValid;
-        }
-    });
-
-    function setCommunityValidityPayload(communityId: string, name: string): Uint8Array {
-        return new Uint8Array(
-            IDL.encode(
-                [
-                    IDL.Record({
-                        community_id: IDL.Principal,
-                        name: IDL.Text,
-                    }),
-                ],
-                [
-                    {
-                        community_id: Principal.fromText(communityId),
-                        name,
-                    },
-                ],
-            ),
-        );
-    }
-
-    function revokeCommunityValidityPayload(communityId: string): Uint8Array {
-        return new Uint8Array(
-            IDL.encode(
-                [IDL.Record({ community_id: IDL.Principal })],
-                [{ community_id: Principal.fromText(communityId) }],
-            ),
-        );
-    }
-
-    function setGroupValidityPayload(groupId: string, name: string): Uint8Array {
-        return new Uint8Array(
-            IDL.encode(
-                [
-                    IDL.Record({
-                        group_id: IDL.Principal,
-                        name: IDL.Text,
-                    }),
-                ],
-                [
-                    {
-                        group_id: Principal.fromText(groupId),
-                        name,
-                    },
-                ],
-            ),
-        );
-    }
-
-    function revokeGroupValidityPayload(groupId: string): Uint8Array {
-        return new Uint8Array(
-            IDL.encode(
-                [IDL.Record({ group_id: IDL.Principal })],
-                [{ group_id: Principal.fromText(groupId) }],
-            ),
-        );
-    }
-
-    export function convertAction(): ExecuteGenericNervousSystemFunction | undefined {
-        if (selected === undefined || !isValid) return undefined;
-
-        if (type === "set_community_verification" && selected.kind === "community_match") {
-            return {
-                kind: "execute_generic_nervous_system_function",
-                functionId: BigInt(2006),
-                payload: setCommunityValidityPayload(selected.id.communityId, name),
-            };
-        } else if (type === "set_group_verification" && selected.kind === "group_match") {
-            return {
-                kind: "execute_generic_nervous_system_function",
-                functionId: BigInt(2007),
-                payload: setGroupValidityPayload(selected.chatId.groupId, name),
-            };
-        } else if (
-            type === "revoke_community_verification" &&
-            selected.kind === "community_match"
-        ) {
-            return {
-                kind: "execute_generic_nervous_system_function",
-                functionId: BigInt(2008),
-                payload: revokeCommunityValidityPayload(selected.id.communityId),
-            };
-        } else if (type === "revoke_group_verification" && selected.kind === "group_match") {
-            return {
-                kind: "execute_generic_nervous_system_function",
-                functionId: BigInt(2009),
-                payload: revokeGroupValidityPayload(selected.chatId.groupId),
-            };
-        }
-
-        return undefined;
-    }
-</script>
-
-<section>
-    <Legend label={i18nKey("verified.choose", undefined, level, true)} />
-    {#if type === "set_community_verification" || type === "revoke_community_verification"}
-        <CommunityFinder onSelect={selectMatch}></CommunityFinder>
-    {/if}
-    {#if type === "set_group_verification" || type === "revoke_group_verification"}
-        <GroupFinder onSelect={selectMatch}></GroupFinder>
-    {/if}
-
-    {#if selected !== undefined && operation === "set"}
-        <section in:fade class="name">
-            <Legend label={i18nKey("verified.preferredName")} />
-            <Input
-                autofocus
-                disabled={selected === undefined}
-                invalid={!nameValid}
-                bind:value={name}
-                minlength={MIN_LENGTH}
-                maxlength={MAX_LENGTH}
-                countdown
-                placeholder={i18nKey("verified.preferredName")} />
-            <p class="info">
-                <Translatable resourceKey={i18nKey("verified.rename", undefined, level, true)}
-                ></Translatable>
-            </p>
-        </section>
-    {/if}
-</section>
-
-<style lang="scss">
-    .info {
-        color: var(--txt-light);
-        @include font(light, normal, fs-80);
-    }
-</style>
diff --git a/frontend/app/src/components/home/proposals/ProposalContent.svelte b/frontend/app/src/components/home/proposals/ProposalContent.svelte
deleted file mode 100644
index 7c68986003..0000000000
--- a/frontend/app/src/components/home/proposals/ProposalContent.svelte
+++ /dev/null
@@ -1,446 +0,0 @@
-<script lang="ts">
-    import {
-        type ChatIdentifier,
-        type OpenChat,
-        type ProposalContent,
-        ProposalDecisionStatus,
-        type RegisterProposalVoteResponse,
-        currentUserIdStore,
-        proposalTopicsStore,
-    } from "@client";
-    import { ErrorCode, type ReadonlyMap } from "@shared";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import ExpandIcon from "svelte-material-icons/ArrowExpandDown.svelte";
-    import ChevronDown from "svelte-material-icons/ChevronDown.svelte";
-    import Launch from "svelte-material-icons/Launch.svelte";
-    import OpenInNew from "svelte-material-icons/OpenInNew.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { NamedNeurons } from "../../../stores/namedNeurons";
-    import { proposalVotes } from "../../../stores/proposalVotes";
-    import { rtlStore } from "../../../stores/rtl";
-    import { now } from "../../../stores/time";
-    import { toastStore } from "../../../stores/toast";
-    import { round2 } from "../../../utils/math";
-    import ModalContent from "../../ModalContent.svelte";
-    import Overlay from "../../Overlay.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import ProposalProgressLayout from "./ProposalProgressLayout.svelte";
-    import ProposalVoteButton from "./ProposalVoteButton.svelte";
-    import ProposalVotingProgress from "./ProposalVotingProgress.svelte";
-
-    interface Props {
-        content: ProposalContent;
-        chatId: ChatIdentifier;
-        messageIndex: number;
-        messageId: bigint;
-        collapsed: boolean;
-        readonly: boolean;
-        reply: boolean;
-        onExpandMessage?: () => void;
-    }
-
-    let {
-        content,
-        chatId,
-        messageIndex,
-        messageId,
-        collapsed,
-        readonly,
-        reply,
-        onExpandMessage,
-    }: Props = $props();
-
-    const client = getContext<OpenChat>("client");
-    const EMPTY_MOTION_PAYLOAD = "# Motion Proposal:\n## Motion Text:\n\n";
-
-    const dashboardUrl = "https://dashboard.internetcomputer.org";
-
-    let summaryExpanded = $state(false);
-    let showNeuronInfo = $state(false);
-    let showPayload = $state(false);
-
-    function toggleSummary() {
-        if (!showFullSummary) {
-            summaryExpanded = !summaryExpanded;
-        }
-    }
-
-    function onVote(adopt: boolean) {
-        if (votingDisabled || (chatId.kind !== "group_chat" && chatId.kind !== "channel")) {
-            return;
-        }
-
-        const mId = messageId;
-        proposalVotes.insert(mId, adopt ? "adopting" : "rejecting");
-
-        let success = false;
-        client
-            .registerProposalVote(chatId, messageIndex, adopt)
-            .then((resp) => {
-                if (resp.kind === "success") {
-                    success = true;
-                    proposalVotes.insert(mId, adopt ? "adopted" : "rejected");
-                    client.getProposalVoteDetails(messageId, content.governanceCanisterId, proposal.id, isNns);
-                } else if (resp.kind === "error" && resp.code === ErrorCode.NoEligibleNeurons) {
-                    showNeuronInfo = true;
-                } else {
-                    const err = registerProposalVoteErrorMessage(resp);
-                    if (err) toastStore.showFailureToast(i18nKey("proposal." + err));
-                }
-            })
-            .catch((err) => {
-                client.logError("Unable to vote on proposal", err);
-                toastStore.showFailureToast(i18nKey("proposal.voteFailed"));
-            })
-            .finally(() => {
-                if (!success) {
-                    proposalVotes.delete(mId);
-                }
-            });
-    }
-
-    function registerProposalVoteErrorMessage(
-        resp: RegisterProposalVoteResponse,
-    ): string | undefined {
-        if (resp.kind === "error" && resp.code === ErrorCode.NoChange) return "alreadyVoted";
-        if (resp.kind === "error" && resp.code === ErrorCode.ProposalNotAcceptingVotes)
-            return "proposalNotAcceptingVotes";
-        return "voteFailed";
-    }
-
-    function onClick() {
-        if (collapsed) {
-            onExpandMessage?.();
-        }
-    }
-
-    function renderNeuronId(neuronId: string): string {
-        const name = NamedNeurons[neuronId];
-        if (name !== undefined) {
-            return name;
-        }
-
-        const length = neuronId.length;
-        if (length < 12) {
-            return neuronId;
-        }
-
-        return `${neuronId.slice(0, 4)}..${neuronId.slice(length - 4, length)}`;
-    }
-
-    export function getProposalTopicLabel(
-        content: ProposalContent,
-        proposalTopics: ReadonlyMap<number, string>,
-    ): string {
-        return (
-            proposalTopics.get(
-                content.proposal.kind === "nns" ? content.proposal.topic : content.proposal.action,
-            ) ?? "unknown"
-        );
-    }
-    let rootCanister = $derived(
-        client.tryGetNervousSystem(content.governanceCanisterId)?.rootCanisterId ?? "",
-    );
-    let isNns = $derived(content.proposal.kind === "nns");
-    let voteStatus = $derived(
-        $proposalVotes.get(messageId) ??
-            (content.myVote !== undefined ? (content.myVote ? "adopted" : "rejected") : undefined),
-    );
-    let proposal = $derived(content.proposal);
-    let positive = $derived(
-        proposal.status == ProposalDecisionStatus.Adopted ||
-            proposal.status == ProposalDecisionStatus.Executed,
-    );
-    let negative = $derived(
-        proposal.status == ProposalDecisionStatus.Failed ||
-            proposal.status == ProposalDecisionStatus.Rejected ||
-            proposal.status == ProposalDecisionStatus.Unspecified,
-    );
-    let proposalUrl = $derived(
-        isNns
-            ? `${dashboardUrl}/proposal/${proposal.id}`
-            : `${dashboardUrl}/sns/${rootCanister}/proposal/${proposal.id}`,
-    );
-    let proposerUrl = $derived(
-        isNns
-            ? `${dashboardUrl}/neuron/${proposal.proposer}`
-            : `${dashboardUrl}/sns/${rootCanister}/neuron/${proposal.proposer}`,
-    );
-    let adoptPercent = $derived(round2((100 * proposal.tally.yes) / proposal.tally.total));
-    let rejectPercent = $derived(round2((100 * proposal.tally.no) / proposal.tally.total));
-    let votingEnded = $derived(proposal.deadline <= $now);
-    let disable = $derived(readonly || reply || votingEnded);
-    let votingDisabled = $derived(voteStatus !== undefined || disable);
-    let typeValue = $derived(getProposalTopicLabel(content, $proposalTopicsStore));
-    let showFullSummary = $derived(proposal.summary.length < 400);
-    let payload = $derived(content.proposal.payloadTextRendering);
-    let payloadEmpty = $derived(
-        payload === undefined || payload === EMPTY_MOTION_PAYLOAD || payload.length === 0,
-    );
-    $effect(() => {
-        if (collapsed) {
-            summaryExpanded = false;
-        }
-    });
-</script>
-
-{#if collapsed}
-    <div onclick={onClick}>
-        <em>{proposal.title}</em>
-        <ExpandIcon viewBox="0 -3 24 24" />
-    </div>
-{:else}
-    <div class="wrapper">
-        <div class="header">
-            <div class="title-block">
-                <div class="title">
-                    {#if proposal.url.length > 0}
-                        <a href={proposal.url} rel="noreferrer" target="_blank"
-                            >{proposal.title} <Launch viewBox="0 -1 24 24" /></a>
-                    {:else}
-                        {proposal.title}
-                    {/if}
-                </div>
-                <div class="status" class:positive class:negative>
-                    {ProposalDecisionStatus[proposal.status]}
-                </div>
-            </div>
-        </div>
-
-        {#if proposal.summary.length > 0}
-            <div class="summary" class:expanded={summaryExpanded} class:full={showFullSummary}>
-                <Markdown text={proposal.summary} inline={false} />
-            </div>
-        {/if}
-        <div class="actions">
-            {#if !showFullSummary}
-                <div class="expand" onclick={toggleSummary}>
-                    <div class="label">
-                        <Translatable
-                            resourceKey={summaryExpanded
-                                ? i18nKey("proposal.readless")
-                                : i18nKey("proposal.readmore")} />
-                    </div>
-                    <div class="icon" class:open={summaryExpanded}>
-                        <ChevronDown viewBox="0 -3 24 24" size="1.6em" color="var(--icon-txt)" />
-                    </div>
-                </div>
-            {/if}
-            {#if !payloadEmpty}
-                <div onclick={() => (showPayload = true)} class="payload">
-                    <span><Translatable resourceKey={i18nKey("proposal.details")} /></span>
-                    <OpenInNew color="var(--icon-txt)" />
-                </div>
-            {/if}
-        </div>
-
-        <ProposalProgressLayout>
-            {#snippet adopt()}
-                <div class="adopt">
-                    <ProposalVoteButton
-                        voting={voteStatus === "adopting"}
-                        voted={voteStatus === "adopted"}
-                        disabled={votingDisabled}
-                        mode={"yes"}
-                        onClick={() => onVote(true)}
-                        percentage={adoptPercent} />
-                </div>
-            {/snippet}
-
-            {#snippet progress()}
-                <div class="progress">
-                    <ProposalVotingProgress
-                        deadline={proposal.deadline}
-                        {votingEnded}
-                        {adoptPercent}
-                        {rejectPercent}
-                        minYesPercentageOfTotal={proposal.minYesPercentageOfTotal}
-                        minYesPercentageOfExercised={proposal.minYesPercentageOfExercised} />
-                </div>
-            {/snippet}
-
-            {#snippet reject()}
-                <div class="reject">
-                    <ProposalVoteButton
-                        voting={voteStatus === "rejecting"}
-                        voted={voteStatus === "rejected"}
-                        disabled={votingDisabled}
-                        mode={"no"}
-                        onClick={() => onVote(false)}
-                        percentage={rejectPercent} />
-                </div>
-            {/snippet}
-        </ProposalProgressLayout>
-    </div>
-    <div class="more" class:rtl={$rtlStore}>
-        <a href={proposalUrl} rel="noreferrer" target="_blank">{proposal.id}</a>
-        <div class="subtitle">
-            {typeValue} |
-            <Translatable resourceKey={i18nKey("proposal.proposedBy")} />
-            <a target="_blank" rel="noreferrer" href={proposerUrl}
-                >{renderNeuronId(proposal.proposer)}</a>
-        </div>
-    </div>
-{/if}
-
-{#if showNeuronInfo}
-    <Overlay dismissible onClose={() => (showNeuronInfo = false)}>
-        <ModalContent compactFooter onClose={() => (showNeuronInfo = false)}>
-            {#snippet header()}
-                <Translatable resourceKey={i18nKey("proposal.noEligibleNeurons")} />
-            {/snippet}
-            {#snippet body()}
-                <Markdown
-                    text={$_("proposal.noEligibleNeuronsMessage", {
-                        values: { userId: $currentUserIdStore },
-                    })} />
-            {/snippet}
-        </ModalContent>
-    </Overlay>
-{/if}
-
-{#if showPayload && !payloadEmpty}
-    <Overlay dismissible onClose={() => (showPayload = false)}>
-        <ModalContent compactFooter onClose={() => (showPayload = false)}>
-            {#snippet header()}
-                <div><Translatable resourceKey={i18nKey("proposal.details")} /></div>
-            {/snippet}
-            {#snippet body()}
-                <div class="payload-body">
-                    <Markdown text={payload ?? ""} inline={false} />
-                </div>
-            {/snippet}
-        </ModalContent>
-    </Overlay>
-{/if}
-
-<style lang="scss">
-    .header {
-        margin-bottom: toRem(4);
-
-        .title-block {
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-start;
-            margin-bottom: $sp4;
-            gap: $sp3;
-            .title {
-                @include font(bold, normal, fs-120, 22);
-                word-break: break-all;
-
-                a {
-                    display: flex;
-                    gap: $sp2;
-                    align-items: center;
-                    width: fit-content;
-                }
-            }
-            .status {
-                border-radius: var(--rd);
-                padding: toRem(1) toRem(6);
-                height: fit-content;
-                color: white;
-                background-color: var(--vote-maybe-color);
-
-                &.positive {
-                    background-color: var(--vote-yes-color);
-                }
-
-                &.negative {
-                    background-color: var(--vote-no-color);
-                }
-            }
-        }
-    }
-
-    .summary {
-        transition: none;
-        max-height: toRem(72);
-        @include nice-scrollbar();
-        overflow-y: auto;
-        cursor: pointer;
-        position: relative;
-        overflow-x: hidden;
-        color: "inherit";
-        background-color: rgba(0, 0, 0, 0.05);
-        padding: $sp3;
-
-        &.expanded {
-            transition: max-height ease-in 200ms;
-            max-height: toRem(360);
-        }
-
-        &.full {
-            max-height: none;
-            cursor: default;
-        }
-    }
-
-    .value {
-        @include font-size(fs-120);
-        font-feature-settings: "tnum";
-        font-variant-numeric: tabular-nums;
-    }
-
-    .progress {
-        flex: auto;
-        width: 100%;
-    }
-
-    .more {
-        margin-top: $sp2;
-        @include font-size(fs-70);
-        float: left;
-        display: flex;
-        gap: $sp3;
-        &.rtl {
-            float: right;
-        }
-
-        .subtitle {
-            @include font(book, normal, fs-70);
-            font-weight: 700;
-            @include font-size(fs-70);
-        }
-    }
-
-    .expand {
-        font-weight: 700;
-        display: flex;
-        align-items: center;
-
-        .label {
-            min-width: 70px;
-        }
-
-        .icon {
-            transition: transform 200ms ease-in-out;
-            transform-origin: 50%;
-            &.open {
-                transform: rotate(180deg);
-            }
-        }
-    }
-
-    .actions {
-        margin-top: $sp3;
-        cursor: pointer;
-        @include font(book, normal, fs-80);
-        display: flex;
-        align-items: center;
-        gap: $sp4;
-    }
-
-    .payload {
-        display: flex;
-        align-items: center;
-        gap: $sp2;
-    }
-
-    .payload-body {
-        word-wrap: break-word;
-        max-height: 65vh;
-    }
-</style>
diff --git a/frontend/app/src/components/home/proposals/ProposalVoteButton.svelte b/frontend/app/src/components/home/proposals/ProposalVoteButton.svelte
deleted file mode 100644
index 8e65d870b7..0000000000
--- a/frontend/app/src/components/home/proposals/ProposalVoteButton.svelte
+++ /dev/null
@@ -1,112 +0,0 @@
-<script lang="ts">
-    import { iconSize } from "@client";
-    import { _ } from "svelte-i18n";
-    import ThumbDown from "svelte-material-icons/ThumbDown.svelte";
-    import ThumbUp from "svelte-material-icons/ThumbUp.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Translatable from "../../Translatable.svelte";
-
-    interface Props {
-        mode: "yes" | "no";
-        percentage: number;
-        disabled: boolean;
-        voting: boolean;
-        voted: boolean;
-        onClick: () => void;
-    }
-
-    let { mode, percentage, disabled, voting, voted, onClick }: Props = $props();
-
-    let label = $derived(mode === "yes" ? i18nKey("proposal.adopt") : i18nKey("proposal.reject"));
-    let iconColor = $derived(disabled && !voted ? "var(--vote-maybe-color)" : "var(--txt)");
-    let title = $derived(
-        voted
-            ? mode === "yes"
-                ? $_("proposal.youVotedAdopt")
-                : $_("proposal.youVotedReject")
-            : "",
-    );
-</script>
-
-<div class="vote-button" {title}>
-    <div class="label"><Translatable resourceKey={label} /></div>
-    <div onclick={onClick} class:voting class:voted class:disabled class={`icon ${mode}`}>
-        {#if !voting}
-            {#if mode === "yes"}
-                <ThumbUp size={$iconSize} color={iconColor} />
-            {:else}
-                <ThumbDown size={$iconSize} color={iconColor} />
-            {/if}
-        {/if}
-    </div>
-    <div class={`percentage ${mode}`}>{percentage}%</div>
-</div>
-
-<style lang="scss">
-    .vote-button {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 6px;
-    }
-
-    .icon {
-        border-radius: 50%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 45px;
-        height: 45px;
-        cursor: pointer;
-        border: solid 1px transparent;
-        background-color: var(--vote-maybe-color);
-        transition: background-color 250ms ease-in-out;
-
-        &.voted.yes,
-        &.voting.yes {
-            background-color: var(--vote-yes-color);
-        }
-
-        &.voted.no,
-        &.voting.no {
-            background-color: var(--vote-no-color);
-        }
-
-        @media (hover: hover) {
-            &.yes:not(.voted):not(.voting):not(.disabled):hover {
-                background-color: var(--vote-yes-color);
-            }
-
-            &.no:not(.voted):not(.voting):not(.disabled):hover {
-                background-color: var(--vote-no-color);
-            }
-        }
-
-        &.disabled {
-            background-color: transparent;
-            cursor: not-allowed;
-
-            &:not(.voted):not(.voting) {
-                border: 1px solid var(--vote-maybe-color);
-            }
-        }
-
-        &.voting {
-            @include loading-spinner(
-                1.2em,
-                0.6em,
-                var(--button-spinner),
-                "/assets/plain-spinner.svg"
-            );
-        }
-    }
-
-    .percentage {
-        &.yes {
-            color: var(--vote-yes-color);
-        }
-        &.no {
-            color: var(--vote-no-color);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/proposals/ProposalVotingProgress.svelte b/frontend/app/src/components/home/proposals/ProposalVotingProgress.svelte
deleted file mode 100644
index 54f031c7fe..0000000000
--- a/frontend/app/src/components/home/proposals/ProposalVotingProgress.svelte
+++ /dev/null
@@ -1,135 +0,0 @@
-<script lang="ts">
-    import { rtlStore } from "../../../stores/rtl";
-    import ChevronDown from "svelte-material-icons/ChevronDown.svelte";
-    import { getContext } from "svelte";
-    import type { OpenChat } from "@client";
-    import { now500 } from "../../../stores/time";
-    import Translatable from "../../Translatable.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-
-    interface Props {
-        adoptPercent: number;
-        rejectPercent: number;
-        votingEnded: boolean;
-        deadline: number;
-        minYesPercentageOfTotal: number;
-        minYesPercentageOfExercised: number;
-    }
-
-    let {
-        adoptPercent,
-        rejectPercent,
-        votingEnded,
-        deadline,
-        minYesPercentageOfTotal,
-        minYesPercentageOfExercised,
-    }: Props = $props();
-
-    const client = getContext<OpenChat>("client");
-
-    let deadlineDate = $derived(new Date(Number(deadline)));
-    let rtl = $derived($rtlStore ? "right" : "left");
-</script>
-
-<div class="wrapper">
-    <div class="icon" style="{rtl}: calc({minYesPercentageOfTotal}% - 0.5em)">
-        <ChevronDown viewBox="-1 0 24 24" />
-    </div>
-    <div class="icon solid" style="{rtl}: calc({minYesPercentageOfExercised}% - 0.5em)">
-        <svg viewBox="-1 0 24 24">
-            <path d="M6,10 L12,16 L18,10 H7Z" fill="currentColor" />
-        </svg>
-    </div>
-    <div class="progress">
-        <div class="adopt" style="transform: scaleX({adoptPercent}%)"></div>
-        <div class="reject" style="transform: scaleX({rejectPercent}%)"></div>
-        <div class="vertical-line" style="{rtl}: {minYesPercentageOfTotal}%"></div>
-        <div class="vertical-line" style="{rtl}: {minYesPercentageOfExercised}%"></div>
-    </div>
-
-    <div class="remaining">
-        {#if !votingEnded}
-            <span class="label"
-                ><Translatable resourceKey={i18nKey("proposal.votingPeriodRemaining")} /></span>
-            <span class="value">{client.formatTimeRemaining($now500, deadline)}</span>
-        {:else}
-            <span class="label"
-                ><Translatable resourceKey={i18nKey("proposal.votingPeriodEnded")} /></span>
-            <span class="value"
-                >{client.toDateString(deadlineDate)}
-                {client.toShortTimeString(deadlineDate)}</span>
-        {/if}
-    </div>
-</div>
-
-<style lang="scss">
-    .wrapper {
-        flex: auto;
-        position: relative;
-    }
-
-    .icon {
-        position: absolute;
-        top: toRem(-16);
-        color: var(--txt);
-
-        &.solid {
-            width: 1em;
-            height: 1em;
-        }
-    }
-
-    .progress {
-        height: toRem(16);
-        position: relative;
-        background: var(--chatSummary-bg-selected);
-        border-radius: $sp3;
-        margin-top: 24px;
-        overflow: hidden;
-        @include mobile() {
-            margin-top: 0;
-        }
-
-        .adopt, .reject {
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            transition-duration: 1s;
-        }
-
-        .adopt {
-            background: var(--vote-yes-color);
-            border-radius: $sp3 0 0 $sp3;
-            transform-origin: left;
-        }
-
-        .reject {
-            background: var(--vote-no-color);
-            border-radius: 0 $sp3 $sp3 0;
-            transform-origin: right;
-        }
-
-        .vertical-line {
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            width: 1px;
-            background-color: var(--txt);
-        }
-    }
-    .remaining {
-        margin: 0 auto;
-        margin-top: 10px;
-        text-align: center;
-        @include font(book, normal, fs-80);
-        color: var(--txt-light);
-        .label {
-            font-weight: 700;
-        }
-        @include mobile() {
-            margin-top: $sp4;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/thread/Thread.svelte b/frontend/app/src/components/home/thread/Thread.svelte
deleted file mode 100644
index d4f24a45bd..0000000000
--- a/frontend/app/src/components/home/thread/Thread.svelte
+++ /dev/null
@@ -1,446 +0,0 @@
-<script lang="ts">
-    import type {
-        AttachmentContent,
-        ChatEvent as ChatEventType,
-        ChatIdentifier,
-        ChatSummary,
-        EnhancedReplyContext,
-        EventWrapper,
-        Message,
-        MessageContent,
-        MessageContext,
-        OpenChat,
-        TimelineItem,
-        User,
-    } from "@client";
-    import {
-        allUsersStore,
-        currentUserIdStore,
-        currentUserStore,
-        failedMessagesStore,
-        lastCryptoSent,
-        LEDGER_CANISTER_ICP,
-        localUpdates,
-        messageContextsEqual,
-        messagesRead,
-        selectedChatBlockedUsersStore,
-        selectedChatExpandedDeletedMessageStore,
-        selectedThreadDraftMessageStore,
-        subscribe,
-        threadEventsStore,
-        threadsFollowedByMeStore,
-        unconfirmedStore,
-    } from "@client";
-    import { getContext, onMount } from "svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { toastStore } from "../../../stores/toast";
-    import { randomSentence } from "../../../utils/randomMsg";
-    import AreYouSure from "../../AreYouSure.svelte";
-    import Loading from "@shared_components/Loading.svelte";
-    import { flattenTimeline } from "@shared_components/flatChatItems";
-    import ChatEvent from "../ChatEvent.svelte";
-    import ChatEventList from "../ChatEventList.svelte";
-    import CryptoTransferBuilder from "../CryptoTransferBuilder.svelte";
-    import DropTarget from "../DropTarget.svelte";
-    import Footer from "../Footer.svelte";
-    import GiphySelector from "../GiphySelector.svelte";
-    import MemeBuilder from "../MemeBuilder.svelte";
-    import P2PSwapContentBuilder from "../P2PSwapContentBuilder.svelte";
-    import PollBuilder from "../PollBuilder.svelte";
-    import TimelineDate from "../TimelineDate.svelte";
-    import ThreadHeader from "./ThreadHeader.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        rootEvent: EventWrapper<Message>;
-        chat: ChatSummary;
-        onCloseThread: (id: ChatIdentifier) => void;
-    }
-
-    let { rootEvent, chat, onCloseThread }: Props = $props();
-
-    let chatEventList: ChatEventList | undefined = $state();
-    //@ts-ignore
-    let pollBuilder: PollBuilder = $state();
-    //@ts-ignore
-    let giphySelector: GiphySelector = $state();
-    //@ts-ignore
-    let memeBuilder: MemeBuilder = $state();
-    let creatingPoll = $state(false);
-    let creatingCryptoTransfer: { ledger: string; amount: bigint } | undefined = $state(undefined);
-    let selectingGif = $state(false);
-    let buildingMeme = $state(false);
-    let initialised = $state(false);
-    let messagesDiv: HTMLDivElement | undefined = $state();
-    let messagesDivHeight: number = $state(0);
-    let creatingP2PSwapMessage = $state(false);
-    let removeLinkPreviewDetails: { event: EventWrapper<Message>; url: string } | undefined =
-        $state(undefined);
-
-    let threadRootMessageIndex = $derived(rootEvent?.event?.messageIndex ?? 0);
-    let messageContext = $derived({ chatId: chat.id, threadRootMessageIndex });
-    let threadRootMessage = $derived(rootEvent.event);
-    let blocked = $derived(
-        chat.kind === "direct_chat" && $selectedChatBlockedUsersStore.has(chat.them.userId),
-    );
-    let textContent = $derived($selectedThreadDraftMessageStore?.textContent);
-    let replyingTo = $derived($selectedThreadDraftMessageStore?.replyingTo);
-    let attachment = $derived($selectedThreadDraftMessageStore?.attachment);
-    let editingEvent = $derived($selectedThreadDraftMessageStore?.editingEvent);
-    let canSendAny = $derived(client.canSendMessage(chat.id, "thread"));
-    let canReact = $derived(client.canReactToMessages(chat.id));
-    let atRoot = $derived($threadEventsStore.length === 0 || $threadEventsStore[0]?.index === 0);
-    let events = $derived(atRoot ? [rootEvent, ...$threadEventsStore] : $threadEventsStore);
-    let timeline = $derived(
-        client.groupEvents(
-            [...events].reverse(),
-            $currentUserIdStore,
-            chat.kind === "channel" && chat.public,
-            $selectedChatExpandedDeletedMessageStore,
-        ) as TimelineItem<Message>[],
-    );
-    let items = $derived(flattenTimeline(timeline));
-    let readonly = $derived(client.isChatReadOnly(chat.id));
-    let thread = $derived(rootEvent.event.thread);
-    let loading = $derived(!initialised && $threadEventsStore.length === 0 && thread !== undefined);
-    let isFollowedByMe = $derived(
-        $threadsFollowedByMeStore.get(chat.id)?.has(threadRootMessageIndex) ?? false,
-    );
-
-    onMount(() => {
-        const unsubs = [
-            subscribe("createPoll", onCreatePoll),
-            subscribe("attachGif", onAttachGif),
-            subscribe("tokenTransfer", onTokenTransfer),
-            subscribe("createTestMessages", onCreateTestMessages),
-        ];
-        return () => {
-            unsubs.forEach((u) => u());
-        };
-    });
-
-    function onCreatePoll(ctx: MessageContext) {
-        if (messageContextsEqual(ctx, messageContext)) {
-            createPoll();
-        }
-    }
-
-    function onAttachGif([evContext, search]: [MessageContext, string]) {
-        if (messageContextsEqual(messageContext, evContext)) {
-            attachGif(search);
-        }
-    }
-
-    function onTokenTransfer(args: { context: MessageContext; ledger?: string; amount?: bigint }) {
-        if (messageContextsEqual(messageContext, args.context)) {
-            tokenTransfer(args);
-        }
-    }
-
-    function onCreateTestMessages([ctx, num]: [MessageContext, number]) {
-        if (messageContextsEqual(ctx, messageContext)) {
-            createTestMessages(num);
-        }
-    }
-
-    function createTestMessages(total: number): void {
-        function send(n: number) {
-            if (n === total) return;
-
-            sendMessageWithAttachment(randomSentence(), false, undefined);
-
-            window.setTimeout(() => send(n + 1), 500);
-        }
-
-        send(0);
-    }
-
-    function onSendMessage(detail: [string | undefined, User[], boolean]) {
-        if (!canSendAny) return;
-        let [text, mentioned, blockLevelMarkdown] = detail;
-        if (editingEvent !== undefined) {
-            client
-                .editMessageWithAttachment(
-                    messageContext,
-                    text,
-                    blockLevelMarkdown,
-                    attachment,
-                    editingEvent,
-                )
-                .then((success) => {
-                    if (!success) {
-                        toastStore.showFailureToast(i18nKey("errorEditingMessage"));
-                    }
-                });
-        } else {
-            sendMessageWithAttachment(text, blockLevelMarkdown, attachment, mentioned);
-        }
-    }
-
-    function editEvent(ev: EventWrapper<Message>): void {
-        localUpdates.draftMessages.setEditing(messageContext, ev, $allUsersStore);
-    }
-
-    function sendMessageWithAttachment(
-        textContent: string | undefined,
-        blockLevelMarkdown: boolean,
-        attachment: AttachmentContent | undefined,
-        mentioned: User[] = [],
-    ) {
-        client.sendMessageWithAttachment(
-            messageContext,
-            textContent,
-            blockLevelMarkdown,
-            attachment,
-            mentioned,
-        );
-    }
-
-    function onCancelReply() {
-        localUpdates.draftMessages.setReplyingTo(messageContext, undefined);
-    }
-
-    function clearAttachment() {
-        localUpdates.draftMessages.setAttachment(messageContext, undefined);
-    }
-
-    function cancelEditEvent() {
-        localUpdates.draftMessages.delete(messageContext);
-    }
-
-    function onSetTextContent(txt?: string) {
-        localUpdates.draftMessages.setTextContent(messageContext, txt);
-    }
-
-    function onStartTyping() {
-        if (chat !== undefined) {
-            client.startTyping(chat.id, $currentUserIdStore, threadRootMessageIndex);
-        }
-    }
-
-    function onStopTyping() {
-        if (chat !== undefined) {
-            client.stopTyping(chat.id, $currentUserIdStore, threadRootMessageIndex);
-        }
-    }
-
-    function onFileSelected(content: AttachmentContent) {
-        localUpdates.draftMessages.setAttachment(messageContext, content);
-    }
-
-    function tokenTransfer(detail: { ledger?: string; amount?: bigint }) {
-        creatingCryptoTransfer = {
-            ledger: detail.ledger ?? $lastCryptoSent ?? LEDGER_CANISTER_ICP,
-            amount: detail.amount ?? BigInt(0),
-        };
-    }
-
-    function createPoll() {
-        if (!client.canSendMessage(chat.id, "thread", "poll")) return;
-
-        if (pollBuilder !== undefined) {
-            pollBuilder.resetPoll();
-        }
-        creatingPoll = true;
-    }
-
-    function attachGif(search: string) {
-        selectingGif = true;
-        if (giphySelector !== undefined) {
-            giphySelector.reset(search);
-        }
-    }
-
-    function makeMeme() {
-        buildingMeme = true;
-        if (memeBuilder !== undefined) {
-            memeBuilder.reset();
-        }
-    }
-
-    function replyTo(replyContext: EnhancedReplyContext) {
-        localUpdates.draftMessages.setReplyingTo(messageContext, replyContext);
-    }
-
-    function defaultCryptoTransferReceiver(): string | undefined {
-        return replyingTo?.sender?.userId;
-    }
-
-    function goToMessageIndex(index: number) {
-        chatEventList?.scrollToMessageIndex(messageContext, index, false);
-    }
-
-    function onGoToMessageIndex(detail: { index: number }) {
-        goToMessageIndex(detail.index);
-    }
-
-    function createP2PSwapMessage() {
-        creatingP2PSwapMessage = true;
-    }
-
-    function onRemovePreview(event: EventWrapper<Message>, url: string): void {
-        removeLinkPreviewDetails = {
-            event,
-            url,
-        };
-    }
-
-    function removePreview(yes: boolean): Promise<void> {
-        if (removeLinkPreviewDetails !== undefined && yes) {
-            const { event, url } = removeLinkPreviewDetails;
-
-            client.hideLinkPreview(messageContext, event, url).then((success) => {
-                if (!success) {
-                    toastStore.showFailureToast(i18nKey("errorRemovingLinkPreview"));
-                }
-            });
-        }
-
-        removeLinkPreviewDetails = undefined;
-        return Promise.resolve();
-    }
-
-    function toggleMessageExpansion(ew: EventWrapper<ChatEventType>, expand: boolean) {
-        if (ew.event.kind === "message" && ew.event.content.kind === "proposal_content") {
-            client.toggleProposalFilterMessageExpansion(ew.event.messageId, expand);
-        }
-    }
-
-    function onSendMessageWithContent(content: MessageContent) {
-        client.sendMessageWithContent(messageContext, content, false);
-    }
-</script>
-
-{#if removeLinkPreviewDetails !== undefined}
-    <AreYouSure title={i18nKey("removePreviewQuestion")} action={removePreview} />
-{/if}
-
-<PollBuilder onSend={onSendMessageWithContent} bind:this={pollBuilder} bind:open={creatingPoll} />
-
-{#if creatingP2PSwapMessage}
-    <P2PSwapContentBuilder
-        fromLedger={$lastCryptoSent ?? LEDGER_CANISTER_ICP}
-        {messageContext}
-        onClose={() => (creatingP2PSwapMessage = false)} />
-{/if}
-
-<GiphySelector
-    onSend={onSendMessageWithContent}
-    bind:this={giphySelector}
-    bind:open={selectingGif} />
-
-<MemeBuilder onSend={onSendMessageWithContent} bind:this={memeBuilder} bind:open={buildingMeme} />
-
-{#if creatingCryptoTransfer !== undefined}
-    <CryptoTransferBuilder
-        {chat}
-        ledger={creatingCryptoTransfer.ledger}
-        draftAmount={creatingCryptoTransfer.amount}
-        defaultReceiver={defaultCryptoTransferReceiver()}
-        {messageContext}
-        onClose={() => (creatingCryptoTransfer = undefined)} />
-{/if}
-
-<DropTarget {chat} mode={"thread"} {onFileSelected}>
-    <ThreadHeader {threadRootMessageIndex} {onCloseThread} {rootEvent} chatSummary={chat} />
-
-    {#if loading}
-        <Loading />
-    {:else}
-        <ChatEventList
-            threadRootEvent={rootEvent}
-            rootSelector={"thread-messages"}
-            maintainScroll={false}
-            bind:this={chatEventList}
-            scrollTopButtonEnabled
-            {readonly}
-            unreadMessages={0}
-            firstUnreadMention={undefined}
-            footer
-            visible
-            {items}
-            {chat}
-            bind:initialised
-            bind:messagesDiv
-            bind:messagesDivHeight>
-            {#snippet row(
-                item,
-                { isAccepted, isConfirmed, isFailed, isReadByMe, messageObserver, focusIndex },
-            )}
-                {#if item.kind === "timeline_date"}
-                    <TimelineDate timestamp={item.timestamp} />
-                {:else if item.kind === "event"}
-                    {@const evt = item.event as EventWrapper<Message>}
-                    <ChatEvent
-                        chatId={chat.id}
-                        chatType={chat.kind}
-                        event={evt}
-                        first={item.first}
-                        last={item.last}
-                        me={evt.event.sender === $currentUserIdStore}
-                        accepted={isAccepted($unconfirmedStore, evt)}
-                        confirmed={isConfirmed($unconfirmedStore, evt)}
-                        failed={isFailed($failedMessagesStore, evt)}
-                        readByMe={evt.event.messageId === rootEvent.event.messageId ||
-                            !isFollowedByMe ||
-                            isReadByMe($messagesRead, evt)}
-                        observer={messageObserver}
-                        focused={evt.event.kind === "message" &&
-                            focusIndex === evt.event.messageIndex}
-                        {readonly}
-                        {threadRootMessage}
-                        pinned={false}
-                        supportsEdit={evt.event.messageId !== rootEvent.event.messageId}
-                        supportsReply={evt.event.messageId !== rootEvent.event.messageId}
-                        canPin={client.canPinMessages(chat.id)}
-                        canBlockUsers={client.canBlockUsers(chat.id)}
-                        canDelete={client.canDeleteOtherUsersMessages(chat.id)}
-                        publicGroup={(chat.kind === "group_chat" || chat.kind === "channel") &&
-                            chat.public}
-                        editing={editingEvent === evt}
-                        canSendAny
-                        {canReact}
-                        canInvite={false}
-                        canReplyInThread={false}
-                        collapsed={false}
-                        {onRemovePreview}
-                        {onGoToMessageIndex}
-                        onReplyTo={replyTo}
-                        onEditEvent={() => editEvent(evt)}
-                        onExpandMessage={() => toggleMessageExpansion(evt, true)}
-                        onCollapseMessage={() => toggleMessageExpansion(evt, false)} />
-                {/if}
-            {/snippet}
-        </ChatEventList>
-    {/if}
-
-    {#if !readonly}
-        <Footer
-            {chat}
-            {attachment}
-            {editingEvent}
-            {replyingTo}
-            {textContent}
-            user={$currentUserStore}
-            joining={undefined}
-            preview={false}
-            lapsed={false}
-            mode={"thread"}
-            {blocked}
-            {messageContext}
-            {onCancelReply}
-            onClearAttachment={clearAttachment}
-            onCancelEdit={cancelEditEvent}
-            {onSetTextContent}
-            {onStartTyping}
-            {onStopTyping}
-            {onFileSelected}
-            {onSendMessage}
-            onAttachGif={attachGif}
-            onMakeMeme={makeMeme}
-            onTokenTransfer={tokenTransfer}
-            onCreateP2PSwapMessage={createP2PSwapMessage}
-            onCreatePoll={createPoll} />
-    {/if}
-</DropTarget>
diff --git a/frontend/app/src/components/home/thread/ThreadHeader.svelte b/frontend/app/src/components/home/thread/ThreadHeader.svelte
deleted file mode 100644
index f70688413e..0000000000
--- a/frontend/app/src/components/home/thread/ThreadHeader.svelte
+++ /dev/null
@@ -1,149 +0,0 @@
-<script lang="ts">
-    import type {
-        ChatIdentifier,
-        ChatSummary,
-        EventWrapper,
-        Message,
-        OpenChat,
-        TypersByKey,
-    } from "@client";
-    import {
-        allUsersStore,
-        AvatarSize,
-        byContext,
-        iconSize,
-        mobileWidth,
-        selectedCommunitySummaryStore,
-        UserStatus,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import ArrowLeft from "svelte-material-icons/ArrowLeft.svelte";
-    import ArrowRight from "svelte-material-icons/ArrowRight.svelte";
-    import Close from "svelte-material-icons/Close.svelte";
-    import { rtlStore } from "../../../stores/rtl";
-    import { now } from "../../../stores/time";
-    import Avatar from "../../Avatar.svelte";
-    import HoverIcon from "../../HoverIcon.svelte";
-    import SectionHeader from "../../SectionHeader.svelte";
-    import Typing from "@shared_components/Typing.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        chatSummary: ChatSummary;
-        rootEvent: EventWrapper<Message>;
-        threadRootMessageIndex: number;
-        onCloseThread: (id: ChatIdentifier) => void;
-    }
-
-    let { chatSummary, rootEvent, threadRootMessageIndex, onCloseThread }: Props = $props();
-
-    function close() {
-        onCloseThread(chatSummary.id);
-    }
-
-    function normaliseChatSummary(_now: number, chatSummary: ChatSummary, typing: TypersByKey) {
-        const someoneTyping = client.getTypingString(
-            $_,
-            $allUsersStore,
-            { chatId: chatSummary.id, threadRootMessageIndex },
-            typing,
-        );
-
-        const msgTxt = rootEvent ? client.getContentAsText($_, rootEvent.event.content) : "";
-        const subtext =
-            someoneTyping ?? ($mobileWidth ? `${$_("thread.title")}: ${msgTxt}` : msgTxt);
-        if (chatSummary.kind === "direct_chat") {
-            return {
-                title: $mobileWidth
-                    ? $allUsersStore.get(chatSummary.them.userId)?.username
-                    : $_("thread.title"),
-                avatarUrl: client.userAvatarUrl($allUsersStore.get(chatSummary.them.userId)),
-                userId: chatSummary.them.userId,
-                subtext,
-                typing: someoneTyping !== undefined,
-            };
-        }
-        return {
-            title: $mobileWidth ? chatSummary.name : $_("thread.title"),
-            userStatus: UserStatus.None,
-            avatarUrl: client.groupAvatarUrl(chatSummary, $selectedCommunitySummaryStore),
-            userId: undefined,
-            subtext,
-            typing: someoneTyping !== undefined,
-        };
-    }
-
-    function onKeyDown(ev: KeyboardEvent) {
-        if (ev.key === "Escape") {
-            if (!document.getElementById("portal-element")) {
-                close();
-            }
-        }
-    }
-    let chat = $derived(normaliseChatSummary($now, chatSummary, $byContext));
-</script>
-
-<svelte:window onkeydown={onKeyDown} />
-
-<SectionHeader gap flush shadow>
-    <div class="avatar">
-        <Avatar
-            statusBorder={"var(--section-bg)"}
-            showStatus
-            userId={chat.userId}
-            url={chat.avatarUrl}
-            size={AvatarSize.Default} />
-    </div>
-    <div class="chat-details">
-        <div class="chat-name" title={chat.title}>
-            {chat.title}
-        </div>
-        <div class="chat-subtext" title={chat.subtext}>
-            {#if chat.typing}
-                {chat.subtext} <Typing />
-            {:else}
-                <Markdown text={chat.subtext} oneLine suppressLinks />
-            {/if}
-        </div>
-    </div>
-    <div class="close" onclick={close}>
-        <HoverIcon>
-            {#if $mobileWidth}
-                {#if $rtlStore}
-                    <ArrowRight size={$iconSize} color={"var(--icon-txt)"} />
-                {:else}
-                    <ArrowLeft size={$iconSize} color={"var(--icon-txt)"} />
-                {/if}
-            {:else}
-                <Close size={$iconSize} color={"var(--icon-txt)"} />
-            {/if}
-        </HoverIcon>
-    </div>
-</SectionHeader>
-
-<style lang="scss">
-    .chat-name {
-        @include font(book, normal, fs-120);
-        @include ellipsis();
-        margin-bottom: $sp1;
-    }
-
-    .chat-subtext {
-        @include font(book, normal, fs-80);
-        @include ellipsis();
-        color: var(--txt-light);
-    }
-
-    .chat-details {
-        flex: 1;
-        overflow: auto;
-        padding: 0 $sp2;
-    }
-
-    .avatar {
-        flex: 0 0 55px;
-    }
-</style>
diff --git a/frontend/app/src/components/home/thread/ThreadPreview.svelte b/frontend/app/src/components/home/thread/ThreadPreview.svelte
deleted file mode 100644
index 68376dd9c0..0000000000
--- a/frontend/app/src/components/home/thread/ThreadPreview.svelte
+++ /dev/null
@@ -1,348 +0,0 @@
-<script lang="ts">
-    import Spinner from "@src/components/icons/Spinner.svelte";
-    import Tooltip from "@src/components/tooltip/Tooltip.svelte";
-    import { toastStore } from "@src/stores/toast";
-    import {
-        allUsersStore,
-        AvatarSize,
-        chatListScopeStore,
-        chatSummariesStore,
-        currentUserIdStore,
-        type EventWrapper,
-        type Message,
-        messagesRead,
-        type MultiUserChat,
-        OpenChat,
-        routeForChatIdentifier,
-        selectedCommunitySummaryStore,
-        type ThreadPreview,
-    } from "@client";
-    import { navigate } from "@utils/navigation";
-    import { getContext, onMount } from "svelte";
-    import { _ } from "svelte-i18n";
-    import EyeOffIcon from "svelte-material-icons/EyeOffOutline.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { pop } from "../../../utils/transition";
-    import Avatar from "../../Avatar.svelte";
-    import CollapsibleCard from "../../CollapsibleCard.svelte";
-    import LinkButton from "../../LinkButton.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import ChatMessage from "../ChatMessage.svelte";
-    import IntersectionObserverComponent from "../IntersectionObserver.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        thread: ThreadPreview;
-        observer: IntersectionObserver;
-    }
-
-    let { thread, observer }: Props = $props();
-
-    let unfollowing = $state(false);
-    let missingMessages = $derived(thread.totalReplies - thread.latestReplies.length);
-    let threadRootMessageIndex = $derived(thread.rootMessage.event.messageIndex);
-    let chat = $derived($chatSummariesStore.get(thread.chatId) as MultiUserChat | undefined);
-    let muted = $derived(chat?.membership?.notificationsMuted || false);
-    let syncDetails = $derived(
-        chat?.membership?.latestThreads?.find(
-            (t) => t.threadRootMessageIndex === threadRootMessageIndex,
-        ),
-    );
-    let unreadCount = $derived(
-        syncDetails
-            ? client.unreadThreadMessageCount(
-                  thread.chatId,
-                  threadRootMessageIndex,
-                  syncDetails.latestMessageIndex,
-              )
-            : 0,
-    );
-    let chatData = $derived({
-        name: chat?.name,
-        avatarUrl: client.groupAvatarUrl(chat, $selectedCommunitySummaryStore),
-    });
-
-    onMount(() => {
-        return messagesRead.subscribe(() => {
-            if (syncDetails !== undefined) {
-                unreadCount = client.unreadThreadMessageCount(
-                    thread.chatId,
-                    threadRootMessageIndex,
-                    syncDetails.latestMessageIndex,
-                );
-            }
-        });
-    });
-
-    let grouped = $derived(client.groupBySender(thread.latestReplies));
-
-    let open = $state(false);
-
-    function lastMessageIndex(events: EventWrapper<Message>[]): number | undefined {
-        for (let i = events.length - 1; i >= 0; i--) {
-            const evt = events[i].event;
-            if (evt.kind === "message") {
-                return evt.messageIndex;
-            }
-        }
-        return undefined;
-    }
-
-    function isIntersecting() {
-        // if we can see *all* of the unread messages in this thread, then mark it as read.
-        if (unreadCount > 0 && unreadCount < thread.latestReplies.length + 1) {
-            const lastMsgIdx = lastMessageIndex(thread.latestReplies);
-            if (lastMsgIdx !== undefined && chat !== undefined) {
-                client.markThreadRead(chat.id, threadRootMessageIndex, lastMsgIdx);
-            }
-        }
-    }
-
-    function selectThread() {
-        navigate(
-            `${routeForChatIdentifier($chatListScopeStore.kind, thread.chatId)}/${
-                thread.rootMessage.event.messageIndex
-            }?open=true`,
-        );
-    }
-
-    function unfollow(e: Event) {
-        e.preventDefault();
-        e.stopPropagation();
-        unfollowing = true;
-        client
-            .followThread(thread.chatId, thread.rootMessage.event, false)
-            .then((success) => {
-                if (!success) {
-                    toastStore.showFailureToast(i18nKey("unfollowThreadFailed"));
-                    unfollowing = false;
-                }
-            })
-            .catch(() => (unfollowing = false));
-    }
-</script>
-
-{#if chat !== undefined}
-    <div class="wrapper">
-        <CollapsibleCard
-            onToggle={() => (open = !open)}
-            {open}
-            headerText={i18nKey("userInfoHeader")}>
-            {#snippet titleSlot()}
-                <div class="header">
-                    <div class="avatar">
-                        <Avatar url={chatData.avatarUrl} size={AvatarSize.Default} />
-                    </div>
-                    <div class="details">
-                        <div class="title-and-link">
-                            <h4 class="title">
-                                {(chat.kind === "group_chat" || chat.kind === "channel") &&
-                                    chat.name}
-                            </h4>
-                            <LinkButton underline="hover" onClick={selectThread}
-                                ><Translatable
-                                    resourceKey={i18nKey("thread.open")} />&#8594;</LinkButton>
-                        </div>
-                        <div class="root-msg">
-                            <Markdown
-                                text={client.getContentAsText($_, thread.rootMessage.event.content)}
-                                oneLine
-                                suppressLinks />
-                        </div>
-                    </div>
-                    <Tooltip position={"bottom"} align={"middle"}>
-                        <!-- svelte-ignore a11y_no_static_element_interactions -->
-                        <!-- svelte-ignore a11y_click_events_have_key_events -->
-                        <div onclick={unfollow} class="unfollow">
-                            {#if !unfollowing}
-                                <EyeOffIcon size={"1.2em"} color={"var(--icon-inverted-txt)"} />
-                            {:else}
-                                <Spinner
-                                    backgroundColour={"rgba(0,0,0,0.3)"}
-                                    foregroundColour={"var(--button-spinner)"} />
-                            {/if}
-                        </div>
-                        {#snippet popupTemplate()}
-                            <Translatable resourceKey={i18nKey("unfollowThread")}></Translatable>
-                        {/snippet}
-                    </Tooltip>
-                    {#if unreadCount > 0}
-                        <div
-                            in:pop={{ duration: 1500 }}
-                            title={$_("chatSummary.unread", {
-                                values: { count: unreadCount.toString() },
-                            })}
-                            class:muted
-                            class="unread">
-                            {unreadCount > 999 ? "999+" : unreadCount}
-                        </div>
-                    {/if}
-                </div>
-            {/snippet}
-            <IntersectionObserverComponent onIntersecting={isIntersecting}>
-                <div class="body">
-                    <div class="root-msg">
-                        <ChatMessage
-                            sender={$allUsersStore.get(thread.rootMessage.event.sender)}
-                            focused={false}
-                            {observer}
-                            accepted
-                            confirmed
-                            failed={false}
-                            senderTyping={false}
-                            readByMe
-                            chatId={thread.chatId}
-                            chatType={chat.kind}
-                            me={thread.rootMessage.event.sender === $currentUserIdStore}
-                            first
-                            last
-                            readonly
-                            threadRootMessage={thread.rootMessage.event}
-                            pinned={false}
-                            supportsEdit={false}
-                            supportsReply={false}
-                            canPin={false}
-                            canBlockUsers={false}
-                            canDelete={false}
-                            canQuoteReply={false}
-                            canReact={false}
-                            canStartThread={false}
-                            publicGroup={chat.kind === "group_chat" && chat.public}
-                            editing={false}
-                            eventIndex={thread.rootMessage.index}
-                            timestamp={thread.rootMessage.timestamp}
-                            expiresAt={thread.rootMessage.expiresAt}
-                            dateFormatter={(date) => client.toDatetimeString(date)}
-                            msg={thread.rootMessage.event}
-                            senderContext={thread.rootMessage.event.senderContext} />
-                    </div>
-                    {#if missingMessages > 0}
-                        <div class="separator">
-                            <Translatable
-                                resourceKey={i18nKey("thread.moreMessages", {
-                                    number: missingMessages.toString(),
-                                })} />
-                        </div>
-                    {/if}
-                    {#each grouped as userGroup}
-                        {#each userGroup as evt, i (evt.event.messageId)}
-                            <ChatMessage
-                                sender={$allUsersStore.get(evt.event.sender)}
-                                focused={false}
-                                {observer}
-                                accepted
-                                confirmed
-                                failed={false}
-                                senderTyping={false}
-                                readByMe
-                                chatId={thread.chatId}
-                                chatType={chat.kind}
-                                me={evt.event.sender === $currentUserIdStore}
-                                first={i === 0}
-                                last={i === userGroup.length - 1}
-                                readonly
-                                threadRootMessage={thread.rootMessage.event}
-                                pinned={false}
-                                supportsEdit={false}
-                                supportsReply={false}
-                                canPin={false}
-                                canBlockUsers={false}
-                                canDelete={false}
-                                canQuoteReply={false}
-                                canReact={false}
-                                canStartThread={false}
-                                publicGroup={chat.kind === "group_chat" && chat.public}
-                                editing={false}
-                                eventIndex={evt.index}
-                                timestamp={evt.timestamp}
-                                expiresAt={evt.expiresAt}
-                                dateFormatter={(date) => client.toDatetimeString(date)}
-                                msg={evt.event}
-                                senderContext={evt.event.senderContext} />
-                        {/each}
-                    {/each}
-                    <LinkButton underline="hover" onClick={selectThread}
-                        ><Translatable
-                            resourceKey={i18nKey("thread.openThread")} />&#8594;</LinkButton>
-                </div>
-            </IntersectionObserverComponent>
-        </CollapsibleCard>
-    </div>
-{/if}
-
-<style lang="scss">
-    :global(.threads .link-button) {
-        color: var(--timeline-txt);
-        @include font(book, normal, fs-90);
-        display: block;
-        text-align: right;
-    }
-
-    :global(.threads .card.bordered) {
-        border: none;
-        border-top: 1px solid var(--bd);
-    }
-
-    .wrapper {
-        background-color: var(--thread-preview-bg);
-    }
-    .separator {
-        padding: $sp2;
-        background-color: var(--timeline-bg);
-        margin: $sp4 auto;
-        text-align: center;
-        color: var(--timeline-txt);
-        @include font(book, normal, fs-90);
-    }
-    .header {
-        position: relative;
-        display: flex;
-        align-items: center;
-        width: calc(100% - 24px);
-        gap: $sp4;
-
-        @include mobile() {
-            gap: $sp3;
-        }
-    }
-    .avatar {
-        flex: 0 0 40px;
-    }
-    .details {
-        flex: 1;
-        overflow: hidden;
-
-        .title-and-link {
-            display: flex;
-            gap: $sp3;
-            align-items: center;
-            margin-bottom: $sp1;
-        }
-
-        .title {
-            @include font(book, normal, fs-100);
-            color: var(--txt);
-            @include ellipsis();
-        }
-
-        .root-msg {
-            color: var(--txt-light);
-            @include font(book, normal, fs-80);
-        }
-    }
-    .unread {
-        @include unread();
-        margin: 0 $sp2;
-
-        &.muted {
-            background-color: var(--unread-mute);
-            text-shadow: none;
-        }
-    }
-
-    .unfollow {
-        padding: 0 $sp2;
-    }
-</style>
diff --git a/frontend/app/src/components/home/thread/ThreadPreviews.svelte b/frontend/app/src/components/home/thread/ThreadPreviews.svelte
deleted file mode 100644
index 6b52c581e2..0000000000
--- a/frontend/app/src/components/home/thread/ThreadPreviews.svelte
+++ /dev/null
@@ -1,52 +0,0 @@
-<script lang="ts">
-    import { i18nKey } from "@src/i18n/i18n";
-    import { toastStore } from "@src/stores/toast";
-    import { debouncedDerived, threadsByChatStore, type OpenChat } from "@client";
-    import { getContext } from "svelte";
-    import Loading from "@shared_components/Loading.svelte";
-    import { default as ThreadPreviewComponent } from "./ThreadPreview.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    let observer: IntersectionObserver = new IntersectionObserver(() => {});
-    let loading = $state(false);
-    let initialised = $state(false);
-
-    let threads = $derived.by(
-        debouncedDerived(() => [$threadsByChatStore], loadThreadPreviews, 300, []),
-    );
-
-    async function loadThreadPreviews() {
-        loading = true;
-        try {
-            return client.threadPreviews($threadsByChatStore);
-        } catch (_) {
-            toastStore.showFailureToast(i18nKey("thread.previewFailure"));
-            return [];
-        } finally {
-            loading = false;
-        }
-    }
-</script>
-
-<div class="threads">
-    {#if loading && !initialised}
-        <Loading />
-    {:else}
-        {#each threads as thread (`${thread.rootMessage.index}_${thread.rootMessage.event.messageId}`)}
-            <ThreadPreviewComponent {observer} {thread} />
-        {/each}
-    {/if}
-</div>
-
-<style lang="scss">
-    .threads {
-        height: 100%;
-        overflow-x: hidden;
-        padding: 0 $sp4;
-        @include nice-scrollbar();
-        @include mobile() {
-            padding: 0 toRem(10);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/upgrade/Expiry.svelte b/frontend/app/src/components/home/upgrade/Expiry.svelte
deleted file mode 100644
index 45ff430dda..0000000000
--- a/frontend/app/src/components/home/upgrade/Expiry.svelte
+++ /dev/null
@@ -1,89 +0,0 @@
-<script lang="ts">
-    import {
-        diamondStatusStore,
-        type DiamondMembershipDuration,
-        type DiamondMembershipStatus,
-        type OpenChat,
-    } from "@client";
-    import { getContext, untrack } from "svelte";
-    import { _, locale } from "svelte-i18n";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { now500 } from "../../../stores/time";
-    import Translatable from "../../Translatable.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        extendBy?: DiamondMembershipDuration | undefined;
-    }
-
-    let { extendBy = undefined }: Props = $props();
-
-    let expiresIn: string | undefined = $state(undefined);
-    let expiresAt: string | undefined = $state(undefined);
-    let extendTo: string | undefined = $state(undefined);
-
-    function durationToMs(duration: DiamondMembershipDuration | undefined): number | undefined {
-        if (duration !== undefined && duration !== "lifetime") {
-            return client.diamondDurationToMs(duration);
-        }
-        return undefined;
-    }
-    let extendByMs = $derived(durationToMs(extendBy));
-    $effect(() => {
-        refresh($diamondStatusStore, $now500, $locale);
-    });
-
-    function refresh(
-        status: DiamondMembershipStatus,
-        now: number,
-        locale: string | null | undefined,
-    ) {
-        untrack(() => {
-            if (status.kind === "active") {
-                expiresIn = client.diamondExpiresIn(now, locale);
-
-                if (extendBy !== "lifetime") {
-                    const expiresAtMs = Number(status.expiresAt);
-                    expiresAt = client.toDateString(new Date(expiresAtMs));
-                    if (extendByMs !== undefined) {
-                        extendTo = client.toDateString(new Date(expiresAtMs + extendByMs));
-                    }
-                } else {
-                    extendTo = $_("upgrade.lifetime");
-                }
-            }
-        });
-    }
-</script>
-
-{#if $diamondStatusStore.kind !== "inactive"}
-    <p class="expiry">
-        <span class="msg">
-            <Translatable resourceKey={i18nKey("upgrade.expiryMessage", { relative: expiresIn })} />
-        </span>
-        <span class="date">
-            ({expiresAt}).
-        </span>
-
-        {#if extendTo !== undefined}
-            <span class="msg">
-                {$_("upgrade.extendTo")}
-            </span>
-            <span class="date">
-                {extendTo}.
-            </span>
-        {/if}
-    </p>
-{/if}
-
-<style lang="scss">
-    .expiry {
-        @include font(book, normal, fs-90);
-        margin-bottom: $sp4;
-
-        .date {
-            color: var(--primary);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/upgrade/Feature.svelte b/frontend/app/src/components/home/upgrade/Feature.svelte
deleted file mode 100644
index e3bd1cbd47..0000000000
--- a/frontend/app/src/components/home/upgrade/Feature.svelte
+++ /dev/null
@@ -1,85 +0,0 @@
-<script lang="ts">
-    import type { ResourceKey } from "@client";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Translatable from "../../Translatable.svelte";
-
-    import MoreInfo from "../../InfoIcon.svelte";
-    import type { Snippet } from "svelte";
-
-    interface Props {
-        comingSoon?: boolean;
-        freeInfo?: ResourceKey | undefined;
-        diamondInfo?: ResourceKey | undefined;
-        landing?: boolean;
-        title?: Snippet;
-        free?: Snippet;
-        diamond?: Snippet;
-    }
-
-    let {
-        comingSoon = false,
-        freeInfo = undefined,
-        diamondInfo = undefined,
-        landing = false,
-        title,
-        free,
-        diamond,
-    }: Props = $props();
-</script>
-
-<div class:landing class="title">
-    {@render title?.()}
-    {#if comingSoon}
-        <span class="soon">(<Translatable resourceKey={i18nKey("upgrade.comingSoon")} />)</span>
-    {/if}
-</div>
-<div class:landing class="feature free">
-    {@render free?.()}
-
-    {#if freeInfo !== undefined}
-        <MoreInfo><Translatable resourceKey={freeInfo} /></MoreInfo>
-    {/if}
-</div>
-<div class:landing class="feature diamond">
-    {@render diamond?.()}
-
-    {#if diamondInfo !== undefined}
-        <MoreInfo><Translatable resourceKey={diamondInfo} /></MoreInfo>
-    {/if}
-</div>
-
-<style lang="scss">
-    .diamond {
-        background-color: rgba(255, 255, 255, 0.05);
-    }
-
-    .title {
-        display: flex;
-        align-items: center;
-    }
-
-    .feature,
-    .title {
-        @include font-size(fs-80);
-        color: var(--txt-light);
-        padding: 6px;
-        border-bottom: 1px solid var(--bd);
-    }
-
-    .feature {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        text-align: center;
-    }
-
-    .soon {
-        @include font(light, normal, fs-50);
-        margin-left: $sp2;
-    }
-
-    .landing {
-        @include font-size(fs-120);
-        color: var(--landing-txt-light);
-    }
-</style>
diff --git a/frontend/app/src/components/home/upgrade/Features.svelte b/frontend/app/src/components/home/upgrade/Features.svelte
deleted file mode 100644
index e3df628967..0000000000
--- a/frontend/app/src/components/home/upgrade/Features.svelte
+++ /dev/null
@@ -1,327 +0,0 @@
-<script lang="ts">
-    import { mobileWidth } from "@client";
-    import Check from "svelte-material-icons/Check.svelte";
-    import Minus from "svelte-material-icons/Minus.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Button from "../../Button.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import Feature from "./Feature.svelte";
-    import Footer from "./Footer.svelte";
-
-    interface Props {
-        isDiamond: boolean;
-        canExtend: boolean;
-        landing?: boolean;
-        onUpgrade?: () => void;
-        onCancel?: () => void;
-    }
-
-    let { isDiamond, canExtend, landing = false, onUpgrade, onCancel }: Props = $props();
-</script>
-
-<div class:landing class="grid header">
-    <div class="header-col"><Translatable resourceKey={i18nKey("upgrade.feature")} /></div>
-    <div class="header-col free"><Translatable resourceKey={i18nKey("upgrade.free")} /></div>
-    <div class="header-col diamond"><Translatable resourceKey={i18nKey("upgrade.diamond")} /></div>
-</div>
-
-<div class:landing class="grid body">
-    <Feature {landing}>
-        {#snippet title()}
-            <Translatable resourceKey={i18nKey("upgrade.textMessages")} />
-        {/snippet}
-        {#snippet free()}
-            <Check size={"1em"} color={"var(--success)"} />
-        {/snippet}
-        {#snippet diamond()}
-            <Check size={"1em"} color={"var(--success)"} />
-        {/snippet}
-    </Feature>
-
-    <Feature {landing}>
-        {#snippet title()}
-            <Translatable resourceKey={i18nKey("upgrade.giphys")} />
-        {/snippet}
-        {#snippet free()}
-            <Check size={"1em"} color={"var(--success)"} />
-        {/snippet}
-        {#snippet diamond()}
-            <Check size={"1em"} color={"var(--success)"} />
-        {/snippet}
-    </Feature>
-
-    <Feature {landing}>
-        {#snippet title()}
-            <Translatable resourceKey={i18nKey("upgrade.reactions")} />
-        {/snippet}
-        {#snippet free()}
-            <Check size={"1em"} color={"var(--success)"} />
-        {/snippet}
-        {#snippet diamond()}
-            <Check size={"1em"} color={"var(--success)"} />
-        {/snippet}
-    </Feature>
-
-    <Feature {landing}>
-        {#snippet title()}
-            <Translatable resourceKey={i18nKey("upgrade.polls")} />
-        {/snippet}
-        {#snippet free()}
-            <Check size={"1em"} color={"var(--success)"} />
-        {/snippet}
-        {#snippet diamond()}
-            <Check size={"1em"} color={"var(--success)"} />
-        {/snippet}
-    </Feature>
-
-    <Feature {landing}>
-        {#snippet title()}
-            <Translatable resourceKey={i18nKey("upgrade.reminders")} />
-        {/snippet}
-        {#snippet free()}
-            <Check size={"1em"} color={"var(--success)"} />
-        {/snippet}
-        {#snippet diamond()}
-            <Check size={"1em"} color={"var(--success)"} />
-        {/snippet}
-    </Feature>
-
-    <Feature {landing}>
-        {#snippet title()}
-            <Translatable resourceKey={i18nKey("upgrade.crypto")} />
-        {/snippet}
-        {#snippet free()}
-            <Check size={"1em"} color={"var(--success)"} />
-        {/snippet}
-        {#snippet diamond()}
-            <Check size={"1em"} color={"var(--success)"} />
-        {/snippet}
-    </Feature>
-
-    <Feature {landing}>
-        {#snippet title()}
-            <Translatable resourceKey={i18nKey("upgrade.videoCalls")} />
-        {/snippet}
-        {#snippet free()}
-            <Minus size={"1em"} color={"var(--menu-warn)"} />
-        {/snippet}
-        {#snippet diamond()}
-            <Check size={"1em"} color={"var(--success)"} />
-        {/snippet}
-    </Feature>
-
-    <Feature {landing}>
-        {#snippet title()}
-            <Translatable resourceKey={i18nKey("upgrade.notifications")} />
-        {/snippet}
-        {#snippet free()}
-            <Translatable resourceKey={i18nKey("upgrade.freeNotifications")} />
-        {/snippet}
-        {#snippet diamond()}
-            <Translatable resourceKey={i18nKey("upgrade.diamondNotifications")} />
-        {/snippet}
-    </Feature>
-
-    <Feature
-        {landing}
-        diamondInfo={i18nKey("upgrade.mediaLimits", { image: "5mb", video: "50mb" })}
-        freeInfo={i18nKey("upgrade.mediaLimits", { image: "1mb", video: "5mb" })}>
-        {#snippet title()}
-            <Translatable resourceKey={i18nKey("upgrade.mediaMessages")} />
-        {/snippet}
-        {#snippet free()}
-            <Translatable resourceKey={i18nKey("upgrade.freeMediaMessages")} />
-        {/snippet}
-        {#snippet diamond()}
-            <Translatable resourceKey={i18nKey("upgrade.diamondMediaMessages")} />
-        {/snippet}
-    </Feature>
-
-    <Feature
-        {landing}
-        diamondInfo={i18nKey("upgrade.diamondStorageLimit")}
-        freeInfo={i18nKey("upgrade.freeStorageLimit")}>
-        {#snippet title()}
-            <Translatable resourceKey={i18nKey("upgrade.storage")} />
-        {/snippet}
-        {#snippet free()}
-            <Translatable resourceKey={i18nKey("upgrade.freeStorage")} />
-        {/snippet}
-        {#snippet diamond()}
-            <Translatable resourceKey={i18nKey("upgrade.diamondStorage")} />
-        {/snippet}
-    </Feature>
-
-    <Feature {landing}>
-        {#snippet title()}
-            <Translatable resourceKey={i18nKey("upgrade.createCommunities")} />
-        {/snippet}
-        {#snippet free()}
-            <Minus size={"1em"} color={"var(--menu-warn)"} />
-        {/snippet}
-        {#snippet diamond()}
-            <Check size={"1em"} color={"var(--success)"} />
-        {/snippet}
-    </Feature>
-
-    <Feature {landing}>
-        {#snippet title()}
-            <Translatable resourceKey={i18nKey("upgrade.directChats")} />
-        {/snippet}
-        {#snippet free()}
-            <Check size={"1em"} color={"var(--success)"} />
-        {/snippet}
-        {#snippet diamond()}
-            <Check size={"1em"} color={"var(--success)"} />
-        {/snippet}
-    </Feature>
-
-    <Feature {landing}>
-        {#snippet title()}
-            <Translatable resourceKey={i18nKey("upgrade.privateGroups")} />
-        {/snippet}
-        {#snippet free()}
-            <Translatable resourceKey={i18nKey("upgrade.freePrivateGroups")} />
-        {/snippet}
-        {#snippet diamond()}
-            <Translatable resourceKey={i18nKey("upgrade.diamondPrivateGroups")} />
-        {/snippet}
-    </Feature>
-
-    <Feature {landing}>
-        {#snippet title()}
-            <Translatable resourceKey={i18nKey("upgrade.publicGroups")} />
-        {/snippet}
-        {#snippet free()}
-            <Minus size={"1em"} color={"var(--menu-warn)"} />
-        {/snippet}
-        {#snippet diamond()}
-            <Translatable resourceKey={i18nKey("upgrade.diamondPublicGroups")} />
-        {/snippet}
-    </Feature>
-
-    <Feature {landing}>
-        {#snippet title()}
-            <Translatable resourceKey={i18nKey("upgrade.gatedGroups")} />
-        {/snippet}
-        {#snippet free()}
-            <Minus size={"1em"} color={"var(--menu-warn)"} />
-        {/snippet}
-        {#snippet diamond()}
-            <Check size={"1em"} color={"var(--success)"} />
-        {/snippet}
-    </Feature>
-
-    <Feature {landing}>
-        {#snippet title()}
-            <Translatable resourceKey={i18nKey("upgrade.translations")} />
-        {/snippet}
-        {#snippet free()}
-            <Minus size={"1em"} color={"var(--menu-warn)"} />
-        {/snippet}
-        {#snippet diamond()}
-            <Check size={"1em"} color={"var(--success)"} />
-        {/snippet}
-    </Feature>
-
-    <Feature {landing}>
-        {#snippet title()}
-            <Translatable resourceKey={i18nKey("upgrade.p2pSwap")} />
-        {/snippet}
-        {#snippet free()}
-            <Minus size={"1em"} color={"var(--menu-warn)"} />
-        {/snippet}
-        {#snippet diamond()}
-            <Check size={"1em"} color={"var(--success)"} />
-        {/snippet}
-    </Feature>
-
-    <Feature {landing}>
-        {#snippet title()}
-            <Translatable resourceKey={i18nKey("upgrade.diamondBadge")} />
-        {/snippet}
-        {#snippet free()}
-            <Minus size={"1em"} color={"var(--menu-warn)"} />
-        {/snippet}
-        {#snippet diamond()}
-            <Check size={"1em"} color={"var(--success)"} />
-        {/snippet}
-    </Feature>
-
-    <Feature {landing} diamondInfo={i18nKey("upgrade.airdropsInfo")}>
-        {#snippet title()}
-            <Translatable resourceKey={i18nKey("upgrade.airdrops")} />
-        {/snippet}
-        {#snippet free()}
-            <Minus size={"1em"} color={"var(--menu-warn)"} />
-        {/snippet}
-        {#snippet diamond()}
-            <Translatable resourceKey={i18nKey("upgrade.eligible")} />
-        {/snippet}
-    </Feature>
-</div>
-
-{#if !landing}
-    <div class="footer">
-        <Footer>
-            <Button tiny={$mobileWidth} small={!$mobileWidth} secondary onClick={onCancel}
-                ><Translatable resourceKey={i18nKey(isDiamond ? "close" : "cancel")} /></Button>
-            {#if !isDiamond}
-                <Button onClick={() => onUpgrade?.()} tiny={$mobileWidth} small={!$mobileWidth}
-                    ><Translatable resourceKey={i18nKey("upgrade.button")} /></Button>
-            {:else if canExtend}
-                <Button onClick={() => onUpgrade?.()} tiny={$mobileWidth} small={!$mobileWidth}
-                    ><Translatable resourceKey={i18nKey("upgrade.extendShort")} /></Button>
-            {/if}
-        </Footer>
-    </div>
-{/if}
-
-<style lang="scss">
-    .grid {
-        @include font(book, normal, fs-90);
-        display: grid;
-        grid-template-columns: 1fr 1fr 1fr;
-    }
-
-    .body {
-        padding: 0 $sp5 $sp5 $sp5;
-        flex: 1;
-        overflow-y: scroll;
-
-        @include mobile() {
-            padding: 0 $sp3 $sp3 $sp3;
-        }
-
-        &.landing {
-            padding: 0;
-        }
-    }
-
-    .header {
-        padding: $sp5 $sp5 0 $sp5;
-
-        @include mobile() {
-            padding: $sp3 $sp3 0 $sp3;
-        }
-
-        &.landing {
-            padding: 0;
-            @include font-size(fs-120);
-        }
-    }
-    .header-col {
-        font-weight: 700;
-        padding: $sp3 $sp2;
-
-        &.free,
-        &.diamond {
-            text-align: center;
-        }
-
-        &.diamond {
-            background-color: var(--primary);
-            color: #ffffff;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/upgrade/Footer.svelte b/frontend/app/src/components/home/upgrade/Footer.svelte
deleted file mode 100644
index 7d11df8e06..0000000000
--- a/frontend/app/src/components/home/upgrade/Footer.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script lang="ts">
-    import ButtonGroup from "../../ButtonGroup.svelte";
-
-    interface Props {
-        align?: "end" | "fill" | "center";
-        children?: import("svelte").Snippet;
-    }
-
-    let { align = "end", children }: Props = $props();
-</script>
-
-<div class="footer">
-    <ButtonGroup {align}>
-        {@render children?.()}
-    </ButtonGroup>
-</div>
-
-<style lang="scss">
-    .footer {
-        padding: $sp4 $sp5;
-        position: relative;
-
-        @include mobile() {
-            padding: $sp3 $sp4;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/upgrade/Payment.svelte b/frontend/app/src/components/home/upgrade/Payment.svelte
deleted file mode 100644
index 364f80dc05..0000000000
--- a/frontend/app/src/components/home/upgrade/Payment.svelte
+++ /dev/null
@@ -1,357 +0,0 @@
-<script lang="ts">
-    import {
-        type DiamondMembershipDuration,
-        type DiamondMembershipFees,
-        type OpenChat,
-        type ResourceKey,
-        cryptoLookup,
-        E8S_PER_TOKEN,
-        mobileWidth,
-    } from "@client";
-    import { getContext, onMount } from "svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { toastStore } from "../../../stores/toast";
-    import type { RemoteData } from "../../../utils/remoteData";
-    import Button from "../../Button.svelte";
-    import Checkbox from "../../Checkbox.svelte";
-    import ErrorMessage from "../../ErrorMessage.svelte";
-    import Diamond from "../../icons/Diamond.svelte";
-    import Loading from "@shared_components/Loading.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import AccountInfo from "../AccountInfo.svelte";
-    import Congratulations from "./Congratulations.svelte";
-    import Expiry from "./Expiry.svelte";
-    import Footer from "./Footer.svelte";
-
-    interface Props {
-        accountBalance?: number;
-        error: string | undefined;
-        confirming?: boolean;
-        confirmed?: boolean;
-        refreshingBalance?: boolean;
-        ledger: string;
-        allowBack?: boolean;
-        lifetime?: boolean;
-        showExpiry?: boolean;
-        padded?: boolean;
-        onCancel: () => void;
-        onFeatures?: () => void;
-        onSuccess?: (proof: string) => void;
-    }
-
-    let {
-        accountBalance = 0,
-        error = $bindable(),
-        confirming = $bindable(false),
-        confirmed = $bindable(false),
-        refreshingBalance = $bindable(false),
-        ledger,
-        allowBack = true,
-        lifetime = false,
-        showExpiry = true,
-        padded = true,
-        onCancel,
-        onFeatures,
-        onSuccess,
-    }: Props = $props();
-
-    type FeeKey = keyof Omit<DiamondMembershipFees, "token">;
-    type FeeData = RemoteData<Record<"ICP" | "CHAT", DiamondMembershipFees>, string>;
-
-    const client = getContext<OpenChat>("client");
-
-    const options: Option[] = [
-        {
-            index: 0,
-            duration: i18nKey("upgrade.oneMonth"),
-            fee: "oneMonth",
-            enabled: !lifetime,
-        },
-        {
-            index: 1,
-            duration: i18nKey("upgrade.threeMonths"),
-            fee: "threeMonths",
-            enabled: !lifetime,
-        },
-        {
-            index: 2,
-            duration: i18nKey("upgrade.oneYear"),
-            fee: "oneYear",
-            enabled: !lifetime,
-        },
-        {
-            index: 3,
-            duration: i18nKey("upgrade.lifetime"),
-            fee: "lifetime",
-            enabled: true,
-        },
-    ];
-
-    let autoRenew = $state(true);
-    let selectedOption: Option | undefined = $state(options[lifetime ? 3 : 0]);
-
-    type Option = {
-        index: number;
-        duration: ResourceKey;
-        fee: FeeKey;
-        enabled: boolean;
-    };
-
-    let diamondFees: FeeData = $state({
-        kind: "idle",
-    });
-
-    const indexToDuration: Record<number, DiamondMembershipDuration> = {
-        0: "one_month",
-        1: "three_months",
-        2: "one_year",
-        3: "lifetime",
-    };
-
-    function amount(e8s: bigint): number {
-        return Number(e8s) / E8S_PER_TOKEN;
-    }
-
-    function amountInE8s(symbol: string, fees: FeeData, option: Option | undefined): bigint {
-        if (fees.kind !== "success" || option === undefined) {
-            return 0n;
-        }
-        return fees.data[symbol as "ICP" | "CHAT"][option.fee] ?? 0n;
-    }
-
-    function confirm() {
-        confirming = true;
-        client
-            .payForDiamondMembership(
-                tokenDetails.ledger,
-                selectedDuration,
-                autoRenew && selectedDuration !== "lifetime",
-                toPayE8s,
-            )
-            .then((resp) => {
-                if (resp.kind === "success") {
-                    confirmed = true;
-                    onSuccess?.(resp.proof);
-                } else {
-                    const errorKey = "upgrade.paymentFailed";
-                    error = errorKey;
-                    toastStore.showFailureToast(i18nKey(errorKey));
-                }
-            })
-            .finally(() => (confirming = false));
-    }
-
-    onMount(() => {
-        diamondFees = { kind: "loading" };
-        client
-            .diamondMembershipFees()
-            .then((fees) => {
-                diamondFees = {
-                    kind: "success",
-                    data: client.toRecord(fees, (f) => f.token),
-                };
-            })
-            .catch((err) => {
-                diamondFees = { kind: "error", error: err };
-            });
-    });
-    let icpBalance = $derived(accountBalance / E8S_PER_TOKEN); //balance in the user's account expressed as ICP
-    let tokenDetails = $derived($cryptoLookup.get(ledger)!);
-    let toPayE8s = $derived(amountInE8s(tokenDetails.symbol, diamondFees, selectedOption));
-    let toPay = $derived(amount(toPayE8s));
-    let insufficientFunds = $derived(toPay - icpBalance > 0.0001); //we need to account for the fact that js cannot do maths
-    let selectedDuration = $derived(indexToDuration[selectedOption?.index ?? 0] ?? "one_month");
-</script>
-
-<div class="body" class:padded class:confirming class:is-confirmed={confirmed}>
-    {#if confirming}
-        <Loading size={"large"} />
-    {:else if confirmed}
-        <Congratulations />
-    {:else}
-        {#if showExpiry}
-            <Expiry extendBy={selectedDuration} />
-        {/if}
-        <div class="cols">
-            <div class="left">
-                {#each options as option}
-                    <div
-                        role="button"
-                        tabindex="0"
-                        class="option"
-                        class:disabled={!option.enabled}
-                        class:insufficientFunds={insufficientFunds && !refreshingBalance}
-                        class:selected={selectedOption?.index === option.index}
-                        onclick={() => {
-                            if (option.enabled) {
-                                selectedOption = option;
-                            }
-                        }}>
-                        <div class="option-details">
-                            <p class="duration"><Translatable resourceKey={option.duration} /></p>
-                            <p class="price">
-                                {`${amount(
-                                    amountInE8s(tokenDetails.symbol, diamondFees, option),
-                                )} ${tokenDetails.symbol}`}
-                            </p>
-                        </div>
-                        {#if option.index === 3}
-                            <Diamond size={"1.2em"} show={"gold"} />
-                        {/if}
-                    </div>
-                {/each}
-            </div>
-            <div class="right">
-                <AccountInfo fullWidthOnMobile border={false} centered {ledger} />
-            </div>
-        </div>
-
-        {#if !lifetime}
-            <div class="autorenew">
-                <Checkbox
-                    id="auto-renew"
-                    onChange={() => (autoRenew = !autoRenew)}
-                    label={i18nKey("upgrade.autorenew")}
-                    align={"start"}
-                    disabled={selectedDuration === "lifetime"}
-                    checked={autoRenew && selectedDuration !== "lifetime"}>
-                    <div class="section-title">
-                        <Translatable resourceKey={i18nKey("upgrade.autorenew")} />
-                    </div>
-                    <div class="smallprint">
-                        <Translatable resourceKey={i18nKey("upgrade.paymentSmallprint")} />
-                    </div>
-                </Checkbox>
-            </div>
-        {/if}
-
-        <div class="autorenew">
-            {#if insufficientFunds}
-                <ErrorMessage
-                    ><Translatable
-                        resourceKey={i18nKey("upgrade.insufficientFunds", {
-                            token: tokenDetails.symbol,
-                            amount: `${toPay} ${tokenDetails.symbol}`,
-                        })} /></ErrorMessage>
-            {/if}
-
-            {#if error}
-                <ErrorMessage>
-                    <Translatable resourceKey={i18nKey(error)} />
-                </ErrorMessage>
-            {/if}
-        </div>
-    {/if}
-</div>
-<Footer align={$mobileWidth ? "center" : "end"}>
-    {#if confirmed}
-        <Button small={!$mobileWidth} tiny={$mobileWidth} onClick={onCancel}
-            ><Translatable resourceKey={i18nKey("close")} /></Button>
-    {:else}
-        <Button
-            disabled={confirming}
-            tiny={$mobileWidth}
-            small={!$mobileWidth}
-            secondary
-            onClick={onCancel}><Translatable resourceKey={i18nKey("cancel")} /></Button>
-        {#if allowBack}
-            <Button
-                disabled={confirming}
-                tiny={$mobileWidth}
-                small={!$mobileWidth}
-                secondary
-                onClick={onFeatures}
-                ><Translatable resourceKey={i18nKey("upgrade.features")} /></Button>
-        {/if}
-        <Button
-            small={!$mobileWidth}
-            disabled={confirming || insufficientFunds}
-            loading={confirming || refreshingBalance}
-            onClick={confirm}
-            tiny={$mobileWidth}><Translatable resourceKey={i18nKey("upgrade.confirm")} /></Button>
-    {/if}
-</Footer>
-
-<style lang="scss">
-    .body {
-        min-height: 390px;
-        transition: height 200ms ease-in-out;
-
-        &.padded {
-            padding: $sp4 $sp5;
-            @include mobile() {
-                padding: $sp3 $sp4;
-            }
-        }
-
-        &.is-confirmed {
-            height: 240px;
-        }
-
-        &.confirming {
-            height: 390px;
-        }
-    }
-
-    .option {
-        border: 1px solid var(--bd);
-        padding: $sp3 $sp4;
-        border-radius: $sp3;
-        margin-bottom: $sp4;
-        cursor: pointer;
-        transition: background-color 250ms ease-in-out;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        &.selected {
-            background-color: var(--primary);
-            color: #ffffff;
-
-            &.insufficientFunds {
-                background-color: var(--txt-light);
-            }
-        }
-
-        &.disabled {
-            color: var(--txt-light);
-            cursor: default;
-        }
-
-        @include mobile() {
-            text-align: center;
-            padding: 10px $sp4;
-            margin-bottom: $sp3;
-        }
-    }
-
-    .cols {
-        display: flex;
-        gap: $sp4;
-
-        .left,
-        .right {
-            flex: 1;
-        }
-    }
-
-    .duration {
-        @include font-size(fs-70);
-        text-transform: uppercase;
-        margin-bottom: $sp2;
-    }
-
-    .price {
-        @include font(bold, normal, fs-120);
-    }
-
-    .autorenew {
-        margin-bottom: $sp4;
-    }
-
-    .smallprint {
-        @include font(light, normal, fs-60);
-        color: var(--txt-light);
-        margin-bottom: $sp3;
-    }
-</style>
diff --git a/frontend/app/src/components/home/upgrade/Upgrade.svelte b/frontend/app/src/components/home/upgrade/Upgrade.svelte
deleted file mode 100644
index 9c901267c1..0000000000
--- a/frontend/app/src/components/home/upgrade/Upgrade.svelte
+++ /dev/null
@@ -1,137 +0,0 @@
-<script lang="ts">
-    import {
-        LEDGER_CANISTER_CHAT,
-        LEDGER_CANISTER_ICP,
-        canExtendDiamondStore,
-        cryptoBalanceStore,
-        cryptoLookup,
-        isDiamondStore,
-    } from "@client";
-    import { onMount } from "svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Diamond from "../../icons/Diamond.svelte";
-    import ModalContent from "../../ModalContent.svelte";
-    import Overlay from "../../Overlay.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import BalanceWithRefresh from "../BalanceWithRefresh.svelte";
-    import CryptoSelector from "../CryptoSelector.svelte";
-    import Features from "./Features.svelte";
-    import Payment from "./Payment.svelte";
-
-    interface Props {
-        onCancel: () => void;
-    }
-
-    let { onCancel }: Props = $props();
-
-    let ledger: string = $state(
-        import.meta.env.OC_NODE_ENV === "production" ? LEDGER_CANISTER_CHAT : LEDGER_CANISTER_ICP,
-    );
-
-    let step: "features" | "payment" = $state("features");
-    let error: string | undefined = $state();
-    let confirming = $state(false);
-    let confirmed = $state(false);
-    let refreshingBalance = $state(false);
-
-    let tokenDetails = $derived({
-        symbol: $cryptoLookup.get(ledger),
-        balance: $cryptoBalanceStore.get(ledger) ?? BigInt(0),
-    });
-
-    function onBalanceRefreshed() {
-        error = undefined;
-    }
-
-    function onBalanceRefreshError(err: string) {
-        error = err;
-    }
-
-    onMount(() => {
-        if ($canExtendDiamondStore) {
-            step = "payment";
-        }
-    });
-</script>
-
-<Overlay>
-    <ModalContent overflows={step === "features"} hideFooter fill>
-        {#snippet header()}
-            <div class="header">
-                {#if !confirming && !confirmed}
-                    <div class="title">
-                        <Diamond size={"1em"} show={"blue"} />
-                        {#if step === "features"}
-                            {#if $canExtendDiamondStore}
-                                <Translatable resourceKey={i18nKey("upgrade.extend")} />
-                            {:else if $isDiamondStore}
-                                <Translatable resourceKey={i18nKey("upgrade.benefits")} />
-                            {:else}
-                                <Translatable resourceKey={i18nKey("upgrade.featuresTitle")} />
-                            {/if}
-                        {:else if step === "payment"}
-                            <div>
-                                <CryptoSelector
-                                    bind:ledger
-                                    filter={(t) =>
-                                        ["chat", "icp"].includes(t.symbol.toLowerCase())} />
-                            </div>
-                        {/if}
-                    </div>
-                    {#if step === "payment"}
-                        <div class="balance">
-                            <BalanceWithRefresh
-                                {ledger}
-                                value={tokenDetails.balance}
-                                bind:refreshing={refreshingBalance}
-                                onRefreshed={onBalanceRefreshed}
-                                onError={onBalanceRefreshError} />
-                        </div>
-                    {/if}
-                {/if}
-            </div>
-        {/snippet}
-        {#snippet body()}
-            <div class="body">
-                {#if step === "features"}
-                    <Features
-                        canExtend={$canExtendDiamondStore}
-                        isDiamond={$isDiamondStore}
-                        {onCancel}
-                        onUpgrade={() => (step = "payment")} />
-                {/if}
-                {#if step === "payment"}
-                    <Payment
-                        bind:confirmed
-                        bind:confirming
-                        bind:refreshingBalance
-                        {ledger}
-                        {error}
-                        accountBalance={Number(tokenDetails.balance)}
-                        {onCancel}
-                        onFeatures={() => (step = "features")} />
-                {/if}
-            </div>
-        {/snippet}
-    </ModalContent>
-</Overlay>
-
-<style lang="scss">
-    .header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-    }
-
-    .body {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-    }
-
-    .title {
-        display: flex;
-        align-items: center;
-        gap: $sp3;
-    }
-</style>
diff --git a/frontend/app/src/components/home/video/ActiveCall.svelte b/frontend/app/src/components/home/video/ActiveCall.svelte
deleted file mode 100644
index 5d1c08bcbf..0000000000
--- a/frontend/app/src/components/home/video/ActiveCall.svelte
+++ /dev/null
@@ -1,404 +0,0 @@
-<script lang="ts">
-    import type { DailyThemeConfig } from "@daily-co/daily-js";
-    import daily, { type DailyCall } from "@daily-co/daily-js";
-    import {
-        allUsersStore,
-        chatIdentifiersEqual,
-        communitiesStore,
-        currentUserIdStore,
-        currentUserStore,
-        mobileWidth,
-        NoMeetingToJoin,
-        OpenChat,
-        selectedChatSummaryStore,
-        selectedCommunitySummaryStore,
-        type AccessTokenType,
-        type ChatIdentifier,
-        type VideoCallType,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { videoCameraOn, videoMicOn, videoSpeakerView } from "../../../stores/settings";
-    import { toastStore } from "../../../stores/toast";
-    import {
-        activeVideoCall,
-        camera,
-        hasPresence,
-        microphone,
-        sharing,
-        type InterCallMessage,
-    } from "../../../stores/video";
-    import { currentTheme } from "../../../theme/themes";
-    import type { Theme } from "../../../theme/types";
-    import { removeQueryStringParam } from "../../../utils/urls";
-    import AreYouSure from "../../AreYouSure.svelte";
-    import Button from "../../Button.svelte";
-    import ButtonGroup from "../../ButtonGroup.svelte";
-    import ModalContent from "../../ModalContent.svelte";
-    import Overlay from "../../Overlay.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import ActiveCallHeader from "./ActiveCallHeader.svelte";
-
-    interface Props {
-        onClearSelection: () => void;
-        showLandingPage: boolean;
-    }
-
-    let { onClearSelection, showLandingPage }: Props = $props();
-
-    const client = getContext<OpenChat>("client");
-
-    let iframeContainer: HTMLDivElement | undefined = $state();
-    let confirmSwitchTo:
-        | { chatId: ChatIdentifier; callType: VideoCallType; join: boolean }
-        | undefined = $state(undefined);
-    let hostEnded = $state(false);
-    let denied = $state(false);
-    let askedToSpeak = $state(false);
-    let call: DailyCall | undefined = $state();
-    let chat = $derived(normaliseChatSummary($activeVideoCall?.chatId));
-    let threadOpen = $derived($activeVideoCall?.threadOpen ?? false);
-    let participantsOpen = $derived($activeVideoCall?.participantsOpen ?? false);
-
-    $effect(() => {
-        activeVideoCall.changeTheme(getThemeConfig($currentTheme));
-    });
-
-    function normaliseChatSummary(chatId: ChatIdentifier | undefined) {
-        if (chatId) {
-            const chat = client.lookupChatSummary(chatId);
-            if (chat) {
-                switch (chat.kind) {
-                    case "direct_chat":
-                        const them = $allUsersStore.get(chat.them.userId);
-                        return {
-                            chatId,
-                            name: client.displayName(them),
-                            avatarUrl: client.userAvatarUrl(them),
-                            userId: chat.them,
-                            videoCallInProgress: chat.videoCallInProgress,
-                        };
-                    case "group_chat":
-                        return {
-                            chatId,
-                            name: chat.name,
-                            avatarUrl: client.groupAvatarUrl(chat),
-                            userId: undefined,
-                            videoCallInProgress: chat.videoCallInProgress,
-                        };
-                    case "channel":
-                        return {
-                            chatId,
-                            name: `${
-                                $communitiesStore.get({
-                                    kind: "community",
-                                    communityId: chat.id.communityId,
-                                })?.name
-                            } > ${chat.name}`,
-                            avatarUrl: client.groupAvatarUrl(chat, $selectedCommunitySummaryStore),
-                            userId: undefined,
-                            videoCallInProgress: chat.videoCallInProgress,
-                        };
-                }
-            }
-        }
-    }
-
-    export async function startOrJoinVideoCall(
-        chatId: ChatIdentifier,
-        callType: VideoCallType,
-        join: boolean,
-    ) {
-        if (iframeContainer === undefined) return;
-
-        try {
-            if ($activeVideoCall !== undefined) {
-                confirmSwitchTo = { chatId, callType, join };
-                return;
-            }
-
-            // close and threads we have open in the right panel
-            client.filterRightPanelHistory((panel) => panel.kind !== "message_thread_panel");
-            removeQueryStringParam("open");
-
-            activeVideoCall.joining(chatId, callType);
-
-            const accessType: AccessTokenType = join
-                ? { kind: "join_video_call", chatId }
-                : { kind: "start_video_call", callType, chatId };
-
-            // first we need to get access jwt from the oc backend
-            const { token, roomName, messageId, joining } = await client.getVideoChatAccessToken(
-                chatId,
-                accessType,
-            );
-
-            if (call !== undefined) {
-                await call.destroy();
-                call = undefined;
-            }
-
-            call = daily.createFrame(iframeContainer, {
-                token,
-                activeSpeakerMode: callType === "broadcast" ? true : $videoSpeakerView,
-                showLeaveButton: false,
-                showFullscreenButton: false,
-                startVideoOff: !$videoCameraOn,
-                startAudioOff: !$videoMicOn,
-                iframeStyle: {
-                    width: "100%",
-                    height: "100%",
-                },
-                url: `https://openchat.daily.co/${roomName}`,
-                userName: $currentUserStore.username,
-                theme: getThemeConfig($currentTheme),
-            });
-
-            call.on("app-message", (ev: InterCallMessage | undefined) => {
-                if (chatId.kind === "direct_chat") return;
-
-                if (ev && ev.action === "app-message") {
-                    if (ev.data.kind === "ask_to_speak") {
-                        activeVideoCall.captureAccessRequest(ev.data);
-                    }
-                    if (ev.data.kind === "demote_participant") {
-                        const me = call?.participants().local.session_id;
-                        if (
-                            ev.data.participantId === me &&
-                            $currentUserIdStore === ev.data.userId
-                        ) {
-                            askedToSpeak = false;
-                            client.setVideoCallPresence(chatId, BigInt(messageId), "hidden");
-                        }
-                    }
-                    if (ev.data.kind === "ask_to_speak_response") {
-                        const me = call?.participants().local.session_id;
-                        if (
-                            ev.data.participantId === me &&
-                            $currentUserIdStore === ev.data.userId
-                        ) {
-                            askedToSpeak = false;
-                            denied = !ev.data.approved;
-                            if (ev.data.approved) {
-                                client.setVideoCallPresence(chatId, BigInt(messageId), "default");
-                            }
-                        }
-                    }
-                }
-            });
-
-            // this only fires when *I* leave the meeting
-            call.on("left-meeting", () => {
-                // at this point I have already left the meeting and so participantCount will always report 0
-                // so we can't use it.
-                activeVideoCall.endCall();
-            });
-
-            // this fires when a remote participant leaves the meeting
-            call.on("participant-left", (ev) => {
-                // if the owner leaves, end the call
-                if (ev?.participant.owner && !ev.participant.local && callType === "broadcast") {
-                    hangup();
-                    hostEnded = true;
-                }
-            });
-
-            call.on("joined-meeting", (ev) => {
-                const me = ev?.participants?.local;
-                if (!me) return;
-                if (me.owner) {
-                    activeVideoCall.isOwner(true);
-                }
-            });
-
-            call.on("participant-updated", (ev) => {
-                if (ev?.participant.local) {
-                    microphone.set(ev?.participant.tracks.audio.state !== "off");
-                    camera.set(ev?.participant.tracks.video.state !== "off");
-                    sharing.set(ev?.participant.tracks.screenVideo.state !== "off");
-                    hasPresence.set(ev?.participant.permissions.hasPresence);
-                } else {
-                    if (ev?.participant.user_name === $currentUserStore.username) {
-                        // this means that I have joined the call from somewhere else e.g. another device
-                        hangup();
-                    }
-                }
-            });
-
-            // if we are not joining aka starting we need to tell the other users
-            if (!joining) {
-                client.ringOtherUsers(chatId, messageId, callType);
-            }
-
-            await call.join();
-
-            activeVideoCall.setCall(chatId, BigInt(messageId), call);
-
-            if (joining) {
-                switch (chatId.kind) {
-                    case "direct_chat":
-                        await client.joinVideoCall(chatId, BigInt(messageId));
-                        break;
-                    default:
-                        await client.setVideoCallPresence(
-                            chatId,
-                            BigInt(messageId),
-                            callType === "broadcast" ? "hidden" : "default",
-                        );
-                }
-            }
-        } catch (err) {
-            if (err instanceof NoMeetingToJoin) {
-                toastStore.showSuccessToast(i18nKey("videoCall.noMeetingToJoin"));
-            } else {
-                toastStore.showFailureToast(i18nKey("videoCall.callFailed"), err);
-            }
-            activeVideoCall.endCall();
-            console.error("Unable to start video call: ", err);
-        }
-    }
-
-    function getThemeConfig(theme: Theme): DailyThemeConfig {
-        const dailyTheme = {
-            colors: {
-                accent: `${theme.daily.accent}`,
-                accentText: `${theme.daily.accentText}`,
-                background: `${theme.daily.background}`,
-                backgroundAccent: `${theme.daily.backgroundAccent}`,
-                baseText: `${theme.daily.baseText}`,
-                border: `${theme.daily.border}`,
-                mainAreaBg: `${theme.daily.mainAreaBg}`,
-                mainAreaBgAccent: `${theme.daily.mainAreaBgAccent}`,
-                mainAreaText: `${theme.daily.mainAreaText}`,
-                supportiveText: `${theme.daily.supportiveText}`,
-            },
-        };
-        return dailyTheme;
-    }
-
-    function switchCall(confirmed: boolean): Promise<void> {
-        if (confirmed && confirmSwitchTo) {
-            activeVideoCall.endCall();
-            const { chatId, callType, join } = confirmSwitchTo;
-            window.setTimeout(() => startOrJoinVideoCall(chatId, callType, join), 100);
-        }
-        confirmSwitchTo = undefined;
-        return Promise.resolve();
-    }
-
-    export function askToSpeak() {
-        activeVideoCall.askToSpeak($currentUserIdStore);
-        askedToSpeak = true;
-    }
-
-    export function hangup() {
-        if ($activeVideoCall?.call) {
-            if ($hasPresence) {
-                const present = $activeVideoCall.call.participantCounts().present;
-                if (present === 1) {
-                    // I must be the last person left in the call
-                    client.endVideoCall($activeVideoCall.chatId, $activeVideoCall.messageId);
-                }
-            }
-
-            // this will trigger the left-meeting event which will in turn end the call
-            $activeVideoCall.call.leave();
-            client.popRightPanelHistory();
-        }
-    }
-
-    export function closeThread() {
-        activeVideoCall.threadOpen(false);
-    }
-</script>
-
-{#if confirmSwitchTo}
-    <AreYouSure message={i18nKey("videoCall.switchCall")} action={switchCall} />
-{/if}
-
-{#if hostEnded}
-    <Overlay>
-        <ModalContent hideHeader>
-            {#snippet body()}
-                <div class="host-ended">
-                    <Translatable resourceKey={i18nKey("videoCall.hostEnded")} />
-                </div>
-            {/snippet}
-            {#snippet footer()}
-                <ButtonGroup align={"center"}>
-                    <Button onClick={() => (hostEnded = false)}>
-                        <Translatable resourceKey={i18nKey("close")} />
-                    </Button>
-                </ButtonGroup>
-            {/snippet}
-        </ModalContent>
-    </Overlay>
-{/if}
-
-{#if denied}
-    <Overlay>
-        <ModalContent hideHeader>
-            {#snippet body()}
-                <div class="denied">
-                    <Translatable resourceKey={i18nKey("videoCall.denied")} />
-                </div>
-            {/snippet}
-            {#snippet footer()}
-                <span>
-                    <ButtonGroup align={"center"}>
-                        <Button onClick={() => (denied = false)}>
-                            <Translatable resourceKey={i18nKey("close")} />
-                        </Button>
-                    </ButtonGroup>
-                </span>
-            {/snippet}
-        </ModalContent>
-    </Overlay>
-{/if}
-
-<div
-    id="video-call-container"
-    class="video-call-container"
-    class:visible={$activeVideoCall &&
-        $activeVideoCall.view !== "minimised" &&
-        !showLandingPage &&
-        !(threadOpen && $mobileWidth) &&
-        !(participantsOpen && $mobileWidth) &&
-        chatIdentifiersEqual($activeVideoCall.chatId, $selectedChatSummaryStore?.id)}>
-    {#if chat !== undefined}
-        <ActiveCallHeader
-            {onClearSelection}
-            onHangup={hangup}
-            onAskToSpeak={askToSpeak}
-            {chat}
-            {askedToSpeak} />
-    {/if}
-    <div class="iframe-container" bind:this={iframeContainer}></div>
-</div>
-
-<style lang="scss">
-    :global(.video-call-container .section-header) {
-        background-color: var(--daily-header);
-    }
-
-    .host-ended,
-    .denied {
-        @include font(bold, normal, fs-130);
-        text-align: center;
-    }
-
-    .video-call-container {
-        position: absolute;
-        display: none;
-        flex-direction: column;
-        @include z-index("video-call");
-
-        &.visible {
-            display: flex;
-        }
-    }
-
-    .iframe-container {
-        height: 100%;
-    }
-</style>
diff --git a/frontend/app/src/components/home/video/ActiveCallActions.svelte b/frontend/app/src/components/home/video/ActiveCallActions.svelte
deleted file mode 100644
index d42d6a61c6..0000000000
--- a/frontend/app/src/components/home/video/ActiveCallActions.svelte
+++ /dev/null
@@ -1,200 +0,0 @@
-<script lang="ts">
-    import { chatListScopeStore, iconSize, mobileWidth, OpenChat, routeForMessage, setRightPanelHistory } from "@client";
-    import { navigate } from "@utils/navigation";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import AccountMultiple from "svelte-material-icons/AccountMultiple.svelte";
-    import DotsVertical from "svelte-material-icons/DotsVertical.svelte";
-    import HandFrontLeft from "svelte-material-icons/HandFrontLeft.svelte";
-    import MessageOutline from "svelte-material-icons/MessageOutline.svelte";
-    import PhoneHangup from "svelte-material-icons/PhoneHangup.svelte";
-    import WindowMaximize from "svelte-material-icons/WindowMaximize.svelte";
-    import WindowMinimize from "svelte-material-icons/WindowMinimize.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { activeVideoCall, hasPresence } from "../../../stores/video";
-    import { removeQueryStringParam } from "../../../utils/urls";
-    import HoverIcon from "../../HoverIcon.svelte";
-    import Menu from "../../Menu.svelte";
-    import MenuIcon from "../../MenuIcon.svelte";
-    import MenuItem from "../../MenuItem.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import type { VideoCallChat } from "./callChat";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        askedToSpeak: boolean;
-        chat: VideoCallChat;
-        onAskToSpeak: () => void;
-        onHangup: () => void;
-        onMinimise: () => void;
-        onToggleFullscreen: () => void;
-    }
-
-    let { askedToSpeak, chat, onAskToSpeak, onHangup, onMinimise, onToggleFullscreen }: Props =
-        $props();
-
-    let threadOpen = $derived($activeVideoCall?.threadOpen ?? false);
-    let participantsOpen = $derived($activeVideoCall?.participantsOpen ?? false);
-    let isOwner = $derived($activeVideoCall?.isOwner ?? false);
-
-    function toggleThread() {
-        if (chat.chatId !== undefined && chat.videoCallInProgress?.messageIndex !== undefined) {
-            if (threadOpen) {
-                client.popRightPanelHistory();
-                navigate(removeQueryStringParam("open"));
-            } else {
-                navigate(
-                    `${routeForMessage(
-                        $chatListScopeStore.kind,
-                        { chatId: chat.chatId },
-                        chat.videoCallInProgress?.messageIndex,
-                    )}?open=true`,
-                );
-            }
-            activeVideoCall.threadOpen(!threadOpen);
-        }
-    }
-
-    function toggleParticipants() {
-        if (participantsOpen) {
-            client.popRightPanelHistory();
-        } else {
-            if (
-                $activeVideoCall?.messageId !== undefined &&
-                $activeVideoCall.chatId.kind !== "direct_chat"
-            ) {
-                setRightPanelHistory([
-                    {
-                        kind: "call_participants_panel",
-                        chatId: $activeVideoCall.chatId,
-                        messageId: $activeVideoCall.messageId,
-                        isOwner,
-                    },
-                ]);
-            }
-        }
-        activeVideoCall.participantsOpen(!participantsOpen);
-    }
-</script>
-
-{#if $mobileWidth}
-    {#if $activeVideoCall?.status === "joined"}
-        <MenuIcon position={"bottom"} align={"end"}>
-            {#snippet menuIcon()}
-                <HoverIcon title={$_("chatMenu")}>
-                    <DotsVertical size={$iconSize} color={"var(--icon-txt)"} />
-                </HoverIcon>
-            {/snippet}
-            {#snippet menuItems()}
-                <Menu>
-                    {#if !$hasPresence}
-                        <MenuItem onclick={onAskToSpeak}>
-                            {#snippet icon()}
-                                <HandFrontLeft
-                                    title={$_("videoCall.askToSpeak")}
-                                    size={$iconSize}
-                                    color={askedToSpeak
-                                        ? "var(--icon-selected)"
-                                        : "var(--icon-txt)"} />
-                            {/snippet}
-                            {#snippet text()}
-                                <Translatable resourceKey={i18nKey("videoCall.askToSpeak")} />
-                            {/snippet}
-                        </MenuItem>
-                    {/if}
-                    {#if $activeVideoCall?.messageId !== undefined && $activeVideoCall.chatId.kind !== "direct_chat"}
-                        <MenuItem onclick={toggleParticipants}>
-                            {#snippet icon()}
-                                <AccountMultiple
-                                    size={$iconSize}
-                                    color={participantsOpen
-                                        ? "var(--icon-selected)"
-                                        : "var(--icon-txt)"} />
-                            {/snippet}
-                            {#snippet text()}
-                                <Translatable resourceKey={i18nKey("videoCall.showParticipants")} />
-                            {/snippet}
-                        </MenuItem>
-                    {/if}
-                    {#if chat.chatId && chat.videoCallInProgress?.messageIndex !== undefined}
-                        <MenuItem onclick={toggleThread}>
-                            {#snippet icon()}
-                                <MessageOutline
-                                    size={$iconSize}
-                                    color={threadOpen
-                                        ? "var(--icon-selected)"
-                                        : "var(--icon-txt)"} />
-                            {/snippet}
-                            {#snippet text()}
-                                <Translatable resourceKey={i18nKey("videoCall.chat")} />
-                            {/snippet}
-                        </MenuItem>
-                    {/if}
-                    <MenuItem onclick={onMinimise}>
-                        {#snippet icon()}
-                            <WindowMinimize size={$iconSize} color={"var(--icon-txt)"} />
-                        {/snippet}
-                        {#snippet text()}
-                            <Translatable resourceKey={i18nKey("videoCall.minimise")} />
-                        {/snippet}
-                    </MenuItem>
-                    <MenuItem onclick={onHangup}>
-                        {#snippet icon()}
-                            <PhoneHangup size={$iconSize} color={"var(--vote-no-color)"} />
-                        {/snippet}
-                        {#snippet text()}
-                            <Translatable resourceKey={i18nKey("videoCall.leave")} />
-                        {/snippet}
-                    </MenuItem>
-                </Menu>
-            {/snippet}
-        </MenuIcon>
-    {/if}
-{:else}
-    <div class:joining={$activeVideoCall?.status === "joining"} class="actions">
-        {#if !$hasPresence && $activeVideoCall?.status !== "joining"}
-            <HoverIcon onclick={onAskToSpeak}>
-                <HandFrontLeft
-                    title={$_("videoCall.askToSpeak")}
-                    size={$iconSize}
-                    color={askedToSpeak ? "var(--icon-selected)" : "var(--icon-txt)"} />
-            </HoverIcon>
-        {/if}
-        {#if $activeVideoCall?.messageId !== undefined && $activeVideoCall.chatId.kind !== "direct_chat"}
-            <HoverIcon title={$_("videoCall.showParticipants")} onclick={toggleParticipants}>
-                <AccountMultiple
-                    size={$iconSize}
-                    color={participantsOpen ? "var(--icon-selected)" : "var(--icon-txt)"} />
-            </HoverIcon>
-        {/if}
-        {#if chat.chatId && chat.videoCallInProgress?.messageIndex !== undefined}
-            <HoverIcon title={$_("videoCall.chat")} onclick={toggleThread}>
-                <MessageOutline
-                    size={$iconSize}
-                    color={threadOpen ? "var(--icon-selected)" : "var(--icon-txt)"} />
-            </HoverIcon>
-        {/if}
-        <HoverIcon onclick={onMinimise}>
-            <WindowMinimize size={$iconSize} color={"var(--icon-txt)"} />
-        </HoverIcon>
-        <HoverIcon onclick={onToggleFullscreen}>
-            <WindowMaximize size={$iconSize} color={"var(--icon-txt)"} />
-        </HoverIcon>
-        <HoverIcon title={$_("videoCall.leave")} onclick={onHangup}>
-            <PhoneHangup size={$iconSize} color={"var(--vote-no-color)"} />
-        </HoverIcon>
-    </div>
-{/if}
-
-<style lang="scss">
-    .actions {
-        display: flex;
-        align-items: center;
-        gap: $sp3;
-
-        &.joining {
-            pointer-events: none;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/video/ActiveCallHeader.svelte b/frontend/app/src/components/home/video/ActiveCallHeader.svelte
deleted file mode 100644
index 69b16d8430..0000000000
--- a/frontend/app/src/components/home/video/ActiveCallHeader.svelte
+++ /dev/null
@@ -1,113 +0,0 @@
-<script lang="ts">
-    import { AvatarSize, iconSize, mobileWidth } from "@client";
-    import ArrowLeft from "svelte-material-icons/ArrowLeft.svelte";
-    import ArrowRight from "svelte-material-icons/ArrowRight.svelte";
-    import { rtlStore } from "../../../stores/rtl";
-    import { activeVideoCall } from "../../../stores/video";
-    import Avatar from "../../Avatar.svelte";
-    import HoverIcon from "../../HoverIcon.svelte";
-    import FancyLoader from "../../icons/FancyLoader.svelte";
-    import SectionHeader from "../../SectionHeader.svelte";
-    import Typing from "@shared_components/Typing.svelte";
-    import ActiveCallActions from "./ActiveCallActions.svelte";
-    import type { VideoCallChat } from "./callChat";
-
-    interface Props {
-        askedToSpeak: boolean;
-        chat: VideoCallChat;
-        onClearSelection: () => void;
-        onAskToSpeak: () => void;
-        onHangup: () => void;
-    }
-
-    let { askedToSpeak, chat, onClearSelection, onAskToSpeak, onHangup }: Props = $props();
-
-    function minimise() {
-        activeVideoCall.setView("minimised");
-    }
-
-    function toggleFullscreen() {
-        if ($activeVideoCall?.view === "default") {
-            activeVideoCall.setView("fullscreen");
-        } else if ($activeVideoCall?.view === "fullscreen") {
-            activeVideoCall.setView("default");
-        }
-    }
-</script>
-
-<SectionHeader shadow flush>
-    <div class="header">
-        {#if $mobileWidth}
-            <!-- svelte-ignore a11y_click_events_have_key_events -->
-            <div
-                tabindex="0"
-                role="button"
-                class="back"
-                class:rtl={$rtlStore}
-                onclick={onClearSelection}>
-                <HoverIcon>
-                    {#if $rtlStore}
-                        <ArrowRight size={$iconSize} color={"var(--icon-txt)"} />
-                    {:else}
-                        <ArrowLeft size={$iconSize} color={"var(--icon-txt)"} />
-                    {/if}
-                </HoverIcon>
-            </div>
-        {/if}
-        <div class="details">
-            {#if $activeVideoCall?.status === "joining"}
-                <div class="joining">
-                    <FancyLoader loop />
-                </div>
-            {:else}
-                <div class="avatar">
-                    <Avatar
-                        statusBorder={"var(--section-bg)"}
-                        url={chat.avatarUrl}
-                        showStatus
-                        userId={chat.userId?.userId}
-                        size={AvatarSize.Default} />
-                </div>
-            {/if}
-            <h2 class="name">{chat.name}</h2>
-            {#if $activeVideoCall?.status === "joining"}
-                <Typing />
-            {/if}
-        </div>
-
-        <ActiveCallActions
-            {chat}
-            {askedToSpeak}
-            {onAskToSpeak}
-            onMinimise={minimise}
-            onToggleFullscreen={toggleFullscreen}
-            {onHangup} />
-    </div>
-</SectionHeader>
-
-<style lang="scss">
-    .header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: $sp3;
-        width: 100%;
-
-        .details {
-            display: flex;
-            align-items: center;
-            gap: $sp4;
-            flex: auto;
-
-            .joining {
-                width: toRem(48);
-                height: toRem(48);
-            }
-        }
-
-        .name {
-            @include font(book, normal, fs-120);
-            @include ellipsis();
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/video/ActiveCallParticipant.svelte b/frontend/app/src/components/home/video/ActiveCallParticipant.svelte
deleted file mode 100644
index 88a46ea58d..0000000000
--- a/frontend/app/src/components/home/video/ActiveCallParticipant.svelte
+++ /dev/null
@@ -1,37 +0,0 @@
-<script lang="ts">
-    import { iconSize } from "@client";
-    import type { UserSummary, VideoCallPresence, VideoCallType } from "@shared";
-    import { _ } from "svelte-i18n";
-    import AccountCancel from "svelte-material-icons/AccountCancel.svelte";
-    import User from "../../home/groupdetails/User.svelte";
-    import HoverIcon from "../../HoverIcon.svelte";
-
-    interface Props {
-        participant: UserSummary;
-        presence: VideoCallPresence;
-        isOwner: boolean;
-        callType: VideoCallType;
-        onDemote?: (userId: string) => void;
-    }
-
-    let { participant, presence, isOwner, callType, onDemote }: Props = $props();
-
-    let showMenu = $derived(isOwner && presence === "default" && callType === "broadcast");
-
-    function demote(e: Event) {
-        e.stopPropagation();
-        onDemote?.(participant.userId);
-    }
-</script>
-
-<User user={participant}>
-    {#if showMenu}
-        <!-- svelte-ignore a11y_click_events_have_key_events -->
-        <!-- svelte-ignore a11y_no_static_element_interactions -->
-        <div onclick={demote}>
-            <HoverIcon title={$_("videoCall.demoteToHidden")}>
-                <AccountCancel size={$iconSize} color={"var(--icon-txt)"} />
-            </HoverIcon>
-        </div>
-    {/if}
-</User>
diff --git a/frontend/app/src/components/home/video/ActiveCallParticipants.svelte b/frontend/app/src/components/home/video/ActiveCallParticipants.svelte
deleted file mode 100644
index 3fd2ee539b..0000000000
--- a/frontend/app/src/components/home/video/ActiveCallParticipants.svelte
+++ /dev/null
@@ -1,190 +0,0 @@
-<script lang="ts">
-    import {
-        type ChatIdentifier,
-        type MultiUserChatIdentifier,
-        type OpenChat,
-        type UserSummary,
-        chatIdentifiersEqual,
-        currentUserIdStore,
-        subscribe,
-    } from "@client";
-    import { getContext, onMount } from "svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { activeVideoCall } from "../../../stores/video";
-    import FancyLoader from "../../icons/FancyLoader.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import VirtualList from "@shared_components/VirtualList.svelte";
-    import ActiveCallParticipant from "./ActiveCallParticipant.svelte";
-    import ActiveCallParticipantsHeader from "./ActiveCallParticipantsHeader.svelte";
-
-    type MappedParticipants = {
-        participants: Record<string, UserSummary>;
-        hidden: Record<string, UserSummary>;
-        lastUpdated: bigint;
-    };
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        chatId: MultiUserChatIdentifier;
-        messageId: bigint;
-        isOwner: boolean;
-        onClose: () => void;
-    }
-
-    let { chatId, messageId, isOwner, onClose }: Props = $props();
-
-    let demoted = $state(new Set<string>());
-    let loading = $state(false);
-
-    let selectedTab: "presenters" | "viewers" = $state("presenters");
-    let videoParticipants: MappedParticipants = $state({
-        participants: {},
-        hidden: {},
-        lastUpdated: 0n,
-    });
-
-    let participants = $derived(
-        Object.values(videoParticipants.participants).filter((u) => !demoted.has(u.userId)),
-    );
-    let hidden = $derived([
-        ...Object.values(videoParticipants.hidden),
-        ...Object.values(videoParticipants.participants).filter((u) => demoted.has(u.userId)),
-    ]);
-
-    onMount(() => {
-        const unsub = subscribe("videoCallMessageUpdated", videoCallMessageUpdated);
-        refresh(true);
-        return unsub;
-    });
-
-    function videoCallMessageUpdated(payload: { chatId: ChatIdentifier; messageId: bigint }) {
-        if (chatIdentifiersEqual(chatId, payload.chatId) && messageId === payload.messageId) {
-            refresh();
-        }
-    }
-
-    function refresh(initialising: boolean = false) {
-        loading = initialising;
-        client
-            .videoCallParticipants(chatId, messageId, 0n)
-            .then((res) => {
-                videoParticipants = res;
-                Object.values(videoParticipants.hidden).forEach((h) => demoted.delete(h.userId));
-                demoted = demoted;
-            })
-            .finally(() => (loading = false));
-    }
-
-    function close() {
-        onClose();
-        activeVideoCall.participantsOpen(false);
-        client.popRightPanelHistory();
-    }
-
-    function selectTab(tab: "presenters" | "viewers") {
-        selectedTab = tab;
-    }
-
-    function demote(userId: string) {
-        demoted.add(userId);
-        demoted = demoted;
-        activeVideoCall.demote(userId);
-    }
-</script>
-
-<ActiveCallParticipantsHeader onClose={close} />
-
-{#if $activeVideoCall !== undefined}
-    {#if loading}
-        <div class="loader">
-            <FancyLoader loop />
-        </div>
-    {:else}
-        {#if $activeVideoCall?.callType === "broadcast"}
-            <div class="tabs">
-                <!-- svelte-ignore a11y_click_events_have_key_events -->
-                <div
-                    tabindex="0"
-                    role="button"
-                    onclick={() => selectTab("presenters")}
-                    class:selected={selectedTab === "presenters"}
-                    class="tab">
-                    <Translatable
-                        resourceKey={i18nKey("videoCall.presenters", {
-                            count: participants.length,
-                        })} />
-                </div>
-                <!-- svelte-ignore a11y_click_events_have_key_events -->
-                <div
-                    tabindex="0"
-                    role="button"
-                    onclick={() => selectTab("viewers")}
-                    class:selected={selectedTab === "viewers"}
-                    class="tab">
-                    <Translatable
-                        resourceKey={i18nKey("videoCall.viewers", {
-                            count: hidden.length,
-                        })} />
-                </div>
-            </div>
-        {/if}
-
-        {#if selectedTab === "presenters"}
-            {#each participants as participant}
-                <ActiveCallParticipant
-                    {isOwner}
-                    callType={$activeVideoCall.callType}
-                    onDemote={demote}
-                    presence={isOwner && participant.userId === $currentUserIdStore
-                        ? "owner"
-                        : "default"}
-                    {participant} />
-            {/each}
-        {/if}
-
-        {#if selectedTab === "viewers"}
-            <VirtualList keyFn={(user) => user.userId} items={hidden}>
-                {#snippet children(item)}
-                    <ActiveCallParticipant
-                        callType={$activeVideoCall.callType}
-                        {isOwner}
-                        presence={"hidden"}
-                        participant={item} />
-                {/snippet}
-            </VirtualList>
-        {/if}
-    {/if}
-{/if}
-
-<style lang="scss">
-    .tabs {
-        display: flex;
-        align-items: center;
-        @include font(medium, normal, fs-90);
-        color: var(--txt-light);
-        gap: $sp5;
-        border-bottom: 1px solid var(--bd);
-        cursor: pointer;
-        margin: 0 $sp4 $sp5 $sp4;
-
-        @include mobile() {
-            gap: $sp4;
-        }
-
-        .tab {
-            padding-bottom: 10px;
-            margin-bottom: -2px;
-            border-bottom: 3px solid transparent;
-            white-space: nowrap;
-            &.selected {
-                color: var(--txt);
-                border-bottom: 3px solid var(--txt);
-            }
-        }
-    }
-    .loader {
-        width: 80px;
-        margin: auto auto;
-    }
-</style>
diff --git a/frontend/app/src/components/home/video/ActiveCallParticipantsHeader.svelte b/frontend/app/src/components/home/video/ActiveCallParticipantsHeader.svelte
deleted file mode 100644
index d7485017b9..0000000000
--- a/frontend/app/src/components/home/video/ActiveCallParticipantsHeader.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts">
-    import { iconSize } from "@client";
-    import { _ } from "svelte-i18n";
-    import Close from "svelte-material-icons/Close.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import HoverIcon from "../../HoverIcon.svelte";
-    import SectionHeader from "../../SectionHeader.svelte";
-    import Translatable from "../../Translatable.svelte";
-
-    let { onClose }: { onClose: () => void } = $props();
-</script>
-
-<SectionHeader gap border={false}>
-    <h4><Translatable resourceKey={i18nKey("videoCall.participants")} /></h4>
-    <span title={$_("close")} class="close" onclick={onClose}>
-        <HoverIcon>
-            <Close size={$iconSize} color={"var(--icon-txt)"} />
-        </HoverIcon>
-    </span>
-</SectionHeader>
-
-<style lang="scss">
-    h4 {
-        flex: 1;
-        margin: 0;
-        @include font-size(fs-120);
-    }
-    .close {
-        flex: 0 0 30px;
-    }
-</style>
diff --git a/frontend/app/src/components/home/video/ActiveCallSummary.svelte b/frontend/app/src/components/home/video/ActiveCallSummary.svelte
deleted file mode 100644
index 06c35c72a0..0000000000
--- a/frontend/app/src/components/home/video/ActiveCallSummary.svelte
+++ /dev/null
@@ -1,230 +0,0 @@
-<script lang="ts">
-    import {
-        allUsersStore,
-        AvatarSize,
-        chatIdentifiersEqual,
-        communitiesStore,
-        OpenChat,
-        publish,
-        routeForChatIdentifier,
-        selectedChatIdStore,
-        selectedCommunitySummaryStore,
-        type ChatIdentifier,
-    } from "@client";
-    import { navigate } from "@utils/navigation";
-    import { getContext } from "svelte";
-    import HandFrontLeft from "svelte-material-icons/HandFrontLeft.svelte";
-    import Microphone from "svelte-material-icons/Microphone.svelte";
-    import MicrophoneOff from "svelte-material-icons/MicrophoneOff.svelte";
-    import MonitorOff from "svelte-material-icons/MonitorOff.svelte";
-    import MonitorShare from "svelte-material-icons/MonitorShare.svelte";
-    import PhoneHangup from "svelte-material-icons/PhoneHangup.svelte";
-    import Video from "svelte-material-icons/Video.svelte";
-    import VideoOff from "svelte-material-icons/VideoOff.svelte";
-    import Tooltip from "../../../components/tooltip/Tooltip.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import {
-        activeVideoCall,
-        camera,
-        hasPresence,
-        microphone,
-        sharing,
-    } from "../../../stores/video";
-    import Avatar from "../../Avatar.svelte";
-    import FancyLoader from "../../icons/FancyLoader.svelte";
-    import Translatable from "../../Translatable.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    let show = $derived(
-        $activeVideoCall?.chatId !== undefined &&
-            (!chatIdentifiersEqual($activeVideoCall.chatId, $selectedChatIdStore) ||
-                (chatIdentifiersEqual($activeVideoCall.chatId, $selectedChatIdStore) &&
-                    $activeVideoCall.view === "minimised")),
-    );
-
-    let chat = $derived(normaliseChatSummary($activeVideoCall?.chatId));
-
-    function goToCall() {
-        if ($activeVideoCall) {
-            if (!chatIdentifiersEqual($activeVideoCall.chatId, $selectedChatIdStore)) {
-                navigate(routeForChatIdentifier("none", $activeVideoCall.chatId));
-            }
-            activeVideoCall.setView("default");
-        }
-    }
-
-    function askToSpeak(e: Event) {
-        e.stopPropagation();
-        publish("askToSpeak");
-    }
-
-    function normaliseChatSummary(chatId: ChatIdentifier | undefined) {
-        if (chatId) {
-            const chat = client.lookupChatSummary(chatId);
-            if (chat) {
-                switch (chat.kind) {
-                    case "direct_chat":
-                        const them = $allUsersStore.get(chat.them.userId);
-                        return {
-                            name: client.displayName(them),
-                            avatarUrl: client.userAvatarUrl(them),
-                            userId: chat.them,
-                        };
-                    case "group_chat":
-                        return {
-                            name: chat.name,
-                            avatarUrl: client.groupAvatarUrl(chat),
-                            userId: undefined,
-                        };
-                    case "channel":
-                        return {
-                            name: `${
-                                $communitiesStore.get({
-                                    kind: "community",
-                                    communityId: chat.id.communityId,
-                                })?.name
-                            } > ${chat.name}`,
-                            avatarUrl: client.groupAvatarUrl(chat, $selectedCommunitySummaryStore),
-                            userId: undefined,
-                        };
-                }
-            }
-        }
-    }
-
-    function toggleShare(e: Event) {
-        e.stopPropagation();
-        if ($activeVideoCall?.call) {
-            if ($sharing) {
-                $activeVideoCall.call.stopScreenShare();
-            } else {
-                $activeVideoCall.call.startScreenShare();
-            }
-        }
-    }
-
-    function toggleMic(e: Event) {
-        e.stopPropagation();
-        if ($activeVideoCall?.call) {
-            $activeVideoCall.call.setLocalAudio(!$activeVideoCall.call.localAudio());
-        }
-    }
-
-    function toggleCamera(e: Event) {
-        e.stopPropagation();
-        if ($activeVideoCall?.call) {
-            $activeVideoCall.call.setLocalVideo(!$activeVideoCall.call.localVideo());
-        }
-    }
-
-    function hangup(e: Event) {
-        e.stopPropagation();
-        publish("hangup");
-    }
-</script>
-
-{#if show && $activeVideoCall !== undefined && chat !== undefined}
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <div class="call" tabindex="0" role="button" onclick={goToCall}>
-        {#if $activeVideoCall.status === "joining"}
-            <div class="joining">
-                <FancyLoader loop />
-            </div>
-        {:else}
-            <div class="avatar">
-                <Avatar
-                    statusBorder={"var(--toast-success-bg)"}
-                    url={chat.avatarUrl}
-                    showStatus
-                    userId={chat.userId?.userId}
-                    size={AvatarSize.Default} />
-            </div>
-        {/if}
-        <div class="details">
-            <div class="actions">
-                {#if !$hasPresence && $activeVideoCall?.status !== "joining"}
-                    <Tooltip position={"top"} align={"middle"}>
-                        <div role="button" tabindex="0" class="cam" onclick={askToSpeak}>
-                            <HandFrontLeft size={"1.6em"} color={"var(--toast-success-txt)"} />
-                        </div>
-                        {#snippet popupTemplate()}
-                            <Translatable resourceKey={i18nKey("videoCall.askToSpeak")} />
-                        {/snippet}
-                    </Tooltip>
-                {:else}
-                    <Tooltip position={"top"} align={"middle"}>
-                        <div role="button" tabindex="0" class="cam" onclick={toggleCamera}>
-                            {#if $camera}
-                                <Video size={"1.6em"} color={"var(--toast-success-txt)"} />
-                            {:else}
-                                <VideoOff size={"1.6em"} color={"var(--toast-success-txt)"} />
-                            {/if}
-                        </div>
-                        {#snippet popupTemplate()}
-                            <Translatable resourceKey={i18nKey("videoCall.toggleCam")} />
-                        {/snippet}
-                    </Tooltip>
-                    <Tooltip position={"top"} align={"middle"}>
-                        <div role="button" tabindex="0" class="mic" onclick={toggleMic}>
-                            {#if $microphone}
-                                <Microphone size={"1.6em"} color={"var(--toast-success-txt)"} />
-                            {:else}
-                                <MicrophoneOff size={"1.6em"} color={"var(--toast-success-txt)"} />
-                            {/if}
-                        </div>
-                        {#snippet popupTemplate()}
-                            <Translatable resourceKey={i18nKey("videoCall.toggleMic")} />
-                        {/snippet}
-                    </Tooltip>
-                    <Tooltip position={"top"} align={"middle"}>
-                        <div role="button" tabindex="0" class="mic" onclick={toggleShare}>
-                            {#if $sharing}
-                                <MonitorOff size={"1.6em"} color={"var(--toast-success-txt)"} />
-                            {:else}
-                                <MonitorShare size={"1.6em"} color={"var(--toast-success-txt)"} />
-                            {/if}
-                        </div>
-                        {#snippet popupTemplate()}
-                            <Translatable resourceKey={i18nKey("videoCall.toggleShare")} />
-                        {/snippet}
-                    </Tooltip>
-                {/if}
-                <Tooltip position={"top"} align={"middle"}>
-                    <div role="button" tabindex="0" class="hangup" onclick={hangup}>
-                        <PhoneHangup size={"1.6em"} color={"var(--toast-success-txt)"} />
-                    </div>
-                    {#snippet popupTemplate()}
-                        <Translatable resourceKey={i18nKey("videoCall.leave")} />
-                    {/snippet}
-                </Tooltip>
-            </div>
-            <span class="name">{chat.name}</span>
-        </div>
-    </div>
-{/if}
-
-<style lang="scss">
-    .call {
-        cursor: pointer;
-        position: sticky;
-        display: flex;
-        gap: $sp4;
-        align-items: center;
-        bottom: 0;
-        width: 100%;
-        padding: $sp4;
-        background-color: var(--toast-success-bg);
-        color: var(--toast-success-txt);
-    }
-
-    .joining {
-        width: toRem(48);
-        height: toRem(48);
-    }
-
-    .actions {
-        display: flex;
-        gap: $sp4;
-    }
-</style>
diff --git a/frontend/app/src/components/home/video/IncomingCall.svelte b/frontend/app/src/components/home/video/IncomingCall.svelte
deleted file mode 100644
index 81e5738f59..0000000000
--- a/frontend/app/src/components/home/video/IncomingCall.svelte
+++ /dev/null
@@ -1,203 +0,0 @@
-<script lang="ts">
-    import {
-        allUsersStore,
-        AvatarSize,
-        communitiesStore,
-        iconSize,
-        selectedCommunitySummaryStore,
-        type ChatIdentifier,
-        type OpenChat,
-        type VideoCallType,
-    } from "@client";
-    import { getContext } from "svelte";
-    import Phone from "svelte-material-icons/Phone.svelte";
-    import PhoneHangup from "svelte-material-icons/PhoneHangup.svelte";
-    import Tooltip from "../../../components/tooltip/Tooltip.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import {
-        activeVideoCall,
-        incomingVideoCall,
-        ringtoneUrls,
-        selectedRingtone,
-        type IncomingVideoCall,
-        type RingtoneKey,
-    } from "../../../stores/video";
-    import Avatar from "../../Avatar.svelte";
-    import ModalContent from "../../ModalContent.svelte";
-    import Overlay from "../../Overlay.svelte";
-    import Translatable from "../../Translatable.svelte";
-
-    interface Props {
-        onJoinVideoCall: (chatId: ChatIdentifier, callType: VideoCallType) => void;
-    }
-
-    let { onJoinVideoCall }: Props = $props();
-
-    const client = getContext<OpenChat>("client");
-
-    const chat = $derived(normaliseChatSummary($incomingVideoCall));
-    const ringtoneUrl = $derived(ringtoneUrls[$selectedRingtone as RingtoneKey]);
-    const isOnAnotherCall = $derived($activeVideoCall !== undefined);
-
-    function normaliseChatSummary(call: IncomingVideoCall | undefined) {
-        if (call) {
-            const chat = client.lookupChatSummary(call.chatId);
-            const initiator = $allUsersStore.get(call.userId);
-            if (chat && initiator) {
-                switch (chat.kind) {
-                    case "direct_chat":
-                        const them = $allUsersStore.get(chat.them.userId);
-                        return {
-                            chatId: chat.id,
-                            name: client.displayName(them),
-                            avatarUrl: client.userAvatarUrl(them),
-                            initiator: initiator.username,
-                        };
-                    case "group_chat":
-                        return {
-                            chatId: chat.id,
-                            name: chat.name,
-                            avatarUrl: client.groupAvatarUrl(chat),
-                            initiator: initiator.username,
-                        };
-                    case "channel":
-                        return {
-                            chatId: chat.id,
-                            name: `${
-                                $communitiesStore.get({
-                                    kind: "community",
-                                    communityId: chat.id.communityId,
-                                })?.name
-                            } > ${chat.name}`,
-                            avatarUrl: client.groupAvatarUrl(chat, $selectedCommunitySummaryStore),
-                            initiator: initiator.username,
-                        };
-                }
-            }
-        }
-    }
-
-    function join() {
-        if ($incomingVideoCall !== undefined) {
-            onJoinVideoCall($incomingVideoCall.chatId, $incomingVideoCall.callType);
-        }
-    }
-
-    function cancel() {
-        incomingVideoCall.set(undefined);
-    }
-</script>
-
-{#if chat !== undefined}
-    {#if !isOnAnotherCall}
-        <audio playsinline={true} autoplay={true} src={ringtoneUrl} muted={false} preload="auto">
-        </audio>
-    {/if}
-
-    <Overlay onClose={cancel} dismissible>
-        <ModalContent hideHeader hideFooter closeIcon>
-            {#snippet body()}
-                <span class="body">
-                    <div class="details">
-                        <div class="avatar">
-                            <Avatar url={chat.avatarUrl} size={AvatarSize.Default} />
-                        </div>
-                        <div class="txt">
-                            <div class="name">
-                                {chat.name}
-                            </div>
-                            <div class="msg">
-                                <Translatable
-                                    resourceKey={i18nKey("videoCall.remoteStart", {
-                                        name: chat.initiator,
-                                    })} />
-                            </div>
-                        </div>
-                    </div>
-                    <div class="btns">
-                        <Tooltip position={"top"} align={"middle"}>
-                            <div role="button" onclick={cancel} class="btn ignore">
-                                <PhoneHangup size={$iconSize} color={"var(--txt)"} />
-                            </div>
-                            {#snippet popupTemplate()}
-                                <Translatable resourceKey={i18nKey("videoCall.ignore")} />
-                            {/snippet}
-                        </Tooltip>
-                        <Tooltip position={"top"} align={"middle"}>
-                            <div role="button" onclick={join} class="btn join">
-                                <Phone size={$iconSize} color={"var(--txt)"} />
-                            </div>
-                            {#snippet popupTemplate()}
-                                <Translatable resourceKey={i18nKey("videoCall.join")} />
-                            {/snippet}
-                        </Tooltip>
-                    </div>
-                </span>
-            {/snippet}
-        </ModalContent>
-    </Overlay>
-{/if}
-
-<style lang="scss">
-    .body {
-        display: flex;
-        gap: $sp3;
-        align-items: center;
-        justify-content: space-between;
-        padding: $sp3 0;
-
-        @include mobile() {
-            flex-direction: column;
-            gap: $sp5;
-            padding: $sp4 0;
-        }
-
-        .details {
-            display: flex;
-            align-items: center;
-            gap: $sp3;
-        }
-
-        .txt {
-            .name {
-                @include font(bold, normal, fs-140);
-                margin-bottom: $sp1;
-            }
-            .msg {
-                @include font(light, normal, fs-100);
-            }
-        }
-
-        .btns {
-            display: flex;
-            gap: $sp4;
-
-            @include mobile() {
-                justify-content: space-evenly;
-                gap: $sp5;
-            }
-        }
-
-        .btn {
-            border-radius: 50%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: 45px;
-            height: 45px;
-            cursor: pointer;
-
-            @include mobile() {
-                width: 60px;
-                height: 60px;
-            }
-
-            &.ignore {
-                background-color: var(--vote-no-color);
-            }
-            &.join {
-                background-color: var(--vote-yes-color);
-            }
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/video/VideoCallAccessRequests.svelte b/frontend/app/src/components/home/video/VideoCallAccessRequests.svelte
deleted file mode 100644
index 5b98a0e9ff..0000000000
--- a/frontend/app/src/components/home/video/VideoCallAccessRequests.svelte
+++ /dev/null
@@ -1,89 +0,0 @@
-<script lang="ts">
-    import { allUsersStore, AvatarSize, iconSize, type OpenChat } from "@client";
-    import { getContext } from "svelte";
-    import ThumbDown from "svelte-material-icons/ThumbDown.svelte";
-    import ThumbUp from "svelte-material-icons/ThumbUp.svelte";
-    import { cubicInOut } from "svelte/easing";
-    import { fly } from "svelte/transition";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { activeVideoCall, type RequestToSpeak } from "../../../stores/video";
-    import Avatar from "../../Avatar.svelte";
-    import Translatable from "../../Translatable.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    let requests = $derived($activeVideoCall?.accessRequests ?? []);
-
-    function approve(request: RequestToSpeak) {
-        activeVideoCall.approveAccessRequest(request);
-    }
-
-    function reject(request: RequestToSpeak) {
-        activeVideoCall.rejectAccessRequest(request);
-    }
-</script>
-
-{#each requests as request, i}
-    <div
-        style={`top: ${50 + i * 8}px; right: ${50 + i * 8}px;`}
-        in:fly={{
-            duration: 300,
-            y: -500,
-            opacity: 0,
-            easing: cubicInOut,
-        }}
-        out:fly={{
-            duration: 300,
-            x: 500,
-            opacity: 0,
-            easing: cubicInOut,
-        }}
-        class="message">
-        <div class="avatar">
-            <Avatar
-                url={client.userAvatarUrl($allUsersStore.get(request.userId))}
-                userId={request.userId}
-                size={AvatarSize.Small} />
-        </div>
-        <Translatable
-            resourceKey={i18nKey("videoCall.accessRequest", {
-                username: $allUsersStore.get(request.userId)?.username,
-            })} />
-        <!-- svelte-ignore a11y_interactive_supports_focus -->
-        <!-- svelte-ignore a11y_click_events_have_key_events -->
-        <div role="button" onclick={() => approve(request)} class="btn">
-            <ThumbUp size={$iconSize} color={"var(--vote-yes-color)"} />
-        </div>
-        <!-- svelte-ignore a11y_interactive_supports_focus -->
-        <!-- svelte-ignore a11y_click_events_have_key_events -->
-        <div role="button" onclick={() => reject(request)} class="btn">
-            <ThumbDown size={$iconSize} color={"var(--vote-no-color)"} />
-        </div>
-    </div>
-{/each}
-
-<style lang="scss">
-    .message {
-        position: absolute;
-        @include z-index("toast");
-        padding: $sp4;
-        // width: 75%;
-        max-width: 800px;
-        margin: 0 $sp4;
-        display: flex;
-        gap: $sp4;
-        justify-content: center;
-        align-items: center;
-        border: 1px solid var(--bd);
-        @include mobile() {
-            width: 100%;
-        }
-        background-color: var(--modal-bg);
-        box-shadow: var(--modal-sh);
-        color: var(--txt);
-
-        .btn {
-            cursor: pointer;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/icons/AccountGroup.svelte b/frontend/app/src/components/icons/AccountGroup.svelte
deleted file mode 100644
index 758046ca0e..0000000000
--- a/frontend/app/src/components/icons/AccountGroup.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script lang="ts">
-    interface Props {
-        size?: string;
-        width?: string;
-        height?: string;
-        color?: string;
-        viewBox?: string;
-    }
-
-    let {
-        size = "1em",
-        width = size,
-        height = size,
-        color = "currentColor",
-        viewBox = "0 0 24 24",
-    }: Props = $props();
-</script>
-
-<svg {width} {height} {viewBox}>
-    <path
-        d="M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z"
-        fill={color} />
-</svg>
diff --git a/frontend/app/src/components/icons/Diamond.svelte b/frontend/app/src/components/icons/Diamond.svelte
deleted file mode 100644
index 9b8157174b..0000000000
--- a/frontend/app/src/components/icons/Diamond.svelte
+++ /dev/null
@@ -1,48 +0,0 @@
-<script lang="ts">
-    import type { DiamondMembershipStatus, ResourceKey } from "@client";
-    import Tooltip from "../tooltip/Tooltip.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import Translatable from "../Translatable.svelte";
-    import DiamondBase from "./DiamondBase.svelte";
-    import { blueDiamondHue, deriveColours, goldDiamondHue } from "./diamond";
-
-    interface Props {
-        size?: string;
-        show?: "blue" | "gold" | undefined;
-        status?: DiamondMembershipStatus["kind"] | undefined;
-        y?: any;
-    }
-
-    let { size = "0.9em", show = undefined, status = undefined, y = -40 }: Props = $props();
-
-    function getStatusName(
-        status: DiamondMembershipStatus["kind"] | undefined,
-    ): ResourceKey | undefined {
-        if (status === undefined) return undefined;
-
-        switch (status) {
-            case "lifetime":
-                return i18nKey("upgrade.lifetime");
-            case "active":
-                return i18nKey("upgrade.diamond");
-            default:
-                return i18nKey(status);
-        }
-    }
-    let colour = $derived(
-        status === "lifetime" || show === "gold" ? goldDiamondHue : blueDiamondHue,
-    );
-    let colours = $derived(deriveColours(colour));
-    let statusName = $derived(getStatusName(status));
-</script>
-
-{#if status !== "inactive" || show}
-    <Tooltip uppercase position="top" align="middle">
-        <DiamondBase {size} dark={colours.dark} medium={colours.medium} light={colours.light} {y} />
-        {#snippet popupTemplate()}
-            {#if statusName !== undefined}
-                <Translatable resourceKey={statusName} />
-            {/if}
-        {/snippet}
-    </Tooltip>
-{/if}
diff --git a/frontend/app/src/components/icons/DirectChats.svelte b/frontend/app/src/components/icons/DirectChats.svelte
deleted file mode 100644
index 03b49bd207..0000000000
--- a/frontend/app/src/components/icons/DirectChats.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script lang="ts">
-    interface Props {
-        size?: string;
-        width?: string;
-        height?: string;
-        color?: string;
-        viewBox?: string;
-    }
-
-    let {
-        size = "1em",
-        width = size,
-        height = size,
-        color = "currentColor",
-        viewBox = "0 0 24 24",
-    }: Props = $props();
-</script>
-
-<svg {width} {height} {viewBox}>
-    <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M24 20.001H21V24.001L15.667 20.001H8V16.001H10V18.001H16.333L19 20.001V18.001H22V10H20V8H24V20.001ZM8.333 14.001L3 18.001V14.001H0V0L18 0.001V14.001H8.333ZM2 12.001H5V14.001L7.667 12.001H16V2.001L2 2V12.001Z"
-        fill={color} />
-</svg>
diff --git a/frontend/app/src/components/icons/Transfer.svelte b/frontend/app/src/components/icons/Transfer.svelte
deleted file mode 100644
index 3dfd78ea18..0000000000
--- a/frontend/app/src/components/icons/Transfer.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script lang="ts">
-    interface Props {
-        size?: string;
-        width?: string;
-        height?: string;
-        color?: string;
-        viewBox?: string;
-    }
-
-    let {
-        size = "1em",
-        width = size,
-        height = size,
-        color = "currentColor",
-        viewBox = "0 0 24 24",
-    }: Props = $props();
-</script>
-
-<svg {width} {height} {viewBox}>
-    <path
-        d="M24 3V13H19.191L17.057 11H22V5H10V4.616L6.83 7.588L9.1 10H6.353L4 7.5L12 0V3H24ZM17.288 9.42C16.707 9.42 16.352 9.01 16.215 8.5H17.334L17.389 8.166H16.157L16.155 7.834H17.446L17.5 7.5H16.208C16.339 6.982 16.684 6.562 17.233 6.562C17.421 6.562 17.631 6.595 17.873 6.666L18 6.139C17.691 6.047 17.397 6 17.127 6C16.133 6 15.536 6.691 15.361 7.5H15L14.945 7.834H15.312L15.31 8.166H14.888L14.834 8.5H15.357C15.53 9.309 16.134 10 17.205 10C17.455 10 17.706 9.953 17.951 9.863L17.804 9.324C17.629 9.388 17.456 9.42 17.288 9.42ZM20 16.5L12 9V12H0V21H12V24L20 16.5ZM6.668 18.562V19H6.25V18.584C5.819 18.576 5.372 18.474 5 18.281L5.19 17.595C5.588 17.75 6.118 17.914 6.533 17.821C7.012 17.713 7.11 17.22 6.581 16.983C6.192 16.802 5.008 16.647 5.008 15.631C5.008 15.064 5.44 14.556 6.25 14.443V14H6.668V14.424C6.969 14.432 7.308 14.485 7.685 14.6L7.535 15.287C7.216 15.175 6.861 15.072 6.517 15.094C5.897 15.13 5.841 15.667 6.275 15.892C6.988 16.227 7.919 16.476 7.919 17.37C7.919 18.084 7.357 18.465 6.668 18.562Z"
-        fill={color} />
-</svg>
diff --git a/frontend/app/src/components/icons/Verified.svelte b/frontend/app/src/components/icons/Verified.svelte
deleted file mode 100644
index a893a23c8b..0000000000
--- a/frontend/app/src/components/icons/Verified.svelte
+++ /dev/null
@@ -1,56 +0,0 @@
-<script lang="ts">
-    import type { ResourceKey } from "@client";
-    import Tooltip from "../tooltip/Tooltip.svelte";
-    import Translatable from "../Translatable.svelte";
-
-    interface Props {
-        verified: boolean;
-        size: "small" | "default" | "large";
-        tooltip?: ResourceKey;
-    }
-
-    let { size, tooltip }: Props = $props();
-
-    // Verified user (DecideAI) concept is suspended - never render the badge.
-    const verified = false;
-</script>
-
-{#if verified}
-    {#if tooltip !== undefined}
-        <Tooltip uppercase position="top" align="middle">
-            <div class={`verified ${size}`}></div>
-            {#snippet popupTemplate()}
-                <Translatable resourceKey={tooltip} />
-            {/snippet}
-        </Tooltip>
-    {:else}
-        <div class={`verified ${size}`}></div>
-    {/if}
-{/if}
-
-<style lang="scss">
-    .verified {
-        $size: $avatar-mod;
-        width: $size;
-        height: $size;
-        background-image: url("/assets/verified.svg");
-        background-size: cover;
-        background-repeat: no-repeat;
-
-        @include mobile() {
-            $size: $avatar-mod-small;
-            width: $size;
-            height: $size;
-        }
-
-        &.small {
-            width: toRem(16);
-            height: toRem(16);
-        }
-
-        &.large {
-            width: toRem(26);
-            height: toRem(26);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/landingpages/DiamondContent.svelte b/frontend/app/src/components/landingpages/DiamondContent.svelte
deleted file mode 100644
index fd9652b40e..0000000000
--- a/frontend/app/src/components/landingpages/DiamondContent.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-<script lang="ts">
-    import Features from "../home/upgrade/Features.svelte";
-</script>
-
-<Features landing isDiamond={false} canExtend={false} />
-
-<style lang="scss">
-</style>
diff --git a/frontend/app/src/components/landingpages/Team.svelte b/frontend/app/src/components/landingpages/Team.svelte
deleted file mode 100644
index 5ac6a4bf2e..0000000000
--- a/frontend/app/src/components/landingpages/Team.svelte
+++ /dev/null
@@ -1,48 +0,0 @@
-<script lang="ts">
-    import Section from "./Section.svelte";
-    import TeamCard from "./TeamCard.svelte";
-</script>
-
-<Section id={"team"}>
-    <h2>The Team</h2>
-
-    <div class="team">
-        <TeamCard
-            imageUrl={"/assets/team/matt2.png"}
-            hoverImageUrl={"/assets/team/matt.jpeg"}
-            name={"Matt"}
-            blurb={`Matthew is a Software Engineer with 25 years experience across a wide range of domains generally involving web technologies. Recently he has focused on building microservice backends supporting a multi-tenant platform for running online travel agencies. Matt values reliable and maintainable software. He holds a Masters Degree in Engineering and Computer Science from the University of Oxford.`} />
-        <TeamCard
-            imageUrl={"/assets/team/hamish2.png"}
-            hoverImageUrl={"/assets/team/hamish.jpeg"}
-            name={"Hamish"}
-            blurb={`After graduating with a degree in mathematics from Cambridge University, Hamish transitioned into the world of software engineering where he focused primarily on high throughput, low latency cloud based systems. Before building OpenChat, he worked at Emirates where he quickly rose through the ranks, eventually leading the design of their new B2B hotel search engine.`} />
-        <TeamCard
-            imageUrl={"/assets/team/julian2.png"}
-            hoverImageUrl={"/assets/team/julian.jpg"}
-            name={"Julian"}
-            blurb={`Julian has been dabbling in software engineering for the last 25 years or so. He has a varied industry background from defence to risk management, from e-commerce to education technology and from travel to chat. He has developed a penchant for functional front ends. He holds a masters degree in Politics, Philosophy & Economics from the University of Oxford and likes things to be just so.`} />
-    </div>
-</Section>
-
-<style lang="scss">
-    h2 {
-        margin-bottom: $sp6;
-    }
-
-    .team {
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        gap: toRem(50);
-
-        @include mobile() {
-            grid-template-columns: 1fr;
-        }
-    }
-    h2 {
-        @include font(bold, normal, fs-220);
-        @include mobile() {
-            @include font(bold, normal, fs-200);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/landingpages/TermsContent.svelte b/frontend/app/src/components/landingpages/TermsContent.svelte
deleted file mode 100644
index 25e876201d..0000000000
--- a/frontend/app/src/components/landingpages/TermsContent.svelte
+++ /dev/null
@@ -1,2124 +0,0 @@
-<script lang="ts">
-    import { locationStore } from "@client";
-    import { copyToClipboard } from "../../utils/urls";
-    import HashLinkTarget from "./HashLinkTarget.svelte";
-
-    function onCopyUrl(e: Event, section: string): void {
-        e.stopPropagation();
-        copyToClipboard(`${window.location.origin}${$locationStore}?section=${section}`);
-    }
-</script>
-
-<div class="preamble">
-    <p>
-        IT IS IMPORTANT YOU READ THESE TERMS CAREFULLY BEFORE USING THE OPENCHAT PLATFORM OR
-        OTHERWISE USING OUR SERVICES. BY USING THE OPENCHAT PLATFORM OR OTHERWISE USING OUR
-        SERVICES, YOU INDICATE THAT YOU ACCEPT THESE TERMS AND AGREE TO COMPLY WITH THEM. IF YOU USE
-        THE OPENCHAT PLATFORM OR OTHERWISE USE OUR SERVICES IN THE COURSE OF YOUR BUSINESS OR WORK,
-        YOU ARE ALSO AGREEING TO THESE TERMS ON BEHALF OF THAT BUSINESS. IF YOU DO NOT AGREE TO
-        THESE TERMS, YOU MUST NOT USE THE OPENCHAT PLATFORM OR OTHERWISE USE OUR SERVICES.
-    </p>
-
-    <p>
-        YOU SHOULD CAREFULLY CONSIDER WHETHER USING THE OPENCHAT PLATFORM OR OTHERWISE DEALING IN
-        CRYPTOASSETS IS SUITABLE FOR YOU IN LIGHT OF YOUR OWN SITUATION AND ATTITUDE TO RISK, AS
-        EVALUATED BY YOU CAREFULLY. WE DO NOT MAKE ANY REPRESENTATIONS OR RECOMMENDATIONS REGARDING
-        THE ADVISABILITY OR OTHERWISE OF USING THE OPENCHAT PLATFORM OR OTHERWISE USING OUR SERVICES
-        OR DEALING IN CRYPTOASSETS. IF YOU ARE UNSURE AS TO WHETHER USING THE OPENCHAT PLATFORM,
-        USING OUR SERVICES OR OTHERWISE DEALING IN CRYPTOASSETS IS SUITABLE FOR YOU, YOU SHOULD SEEK
-        INDEPENDENT PROFESSIONAL ADVICE PRIOR TO USING THE OPENCHAT PLATFORM, USING OUR SERVICES OR
-        OTHERWISE DEALING IN CRYPTOASSETS. DEALING IN CRYPTOASSETS MAY NOT BE SUBJECT TO ANY
-        INVESTOR PROTECTION, AND MAY INVOLVE A HIGH DEGREE OF RISK TO YOUR CAPITAL.
-    </p>
-</div>
-
-<div class="section">
-    <HashLinkTarget {onCopyUrl} id="1">
-        <h2>Section A: General terms applicable to all services</h2>
-    </HashLinkTarget>
-
-    <ul class="custom_list bold" style={"--prefix: 'A'; --suffix: ''"}>
-        <li>
-            <h3>Introduction</h3>
-
-            <ul class="custom_list" style={"--prefix: '1.'"}>
-                <li>
-                    We are OpenChat DAO. In these Terms, we refer to ourselves as "<strong
-                        >OpenChat</strong
-                    >", “<strong>we</strong>”, “<strong>us</strong>”, or “<strong>our</strong>”. We
-                    operate the OpenChat Platform which enables users of the OpenChat Platform (“<strong
-                        >you</strong
-                    >”, “<strong>your</strong>”) to access and benefit from our Services.
-                </li>
-                <li>
-                    These terms and conditions and each of the documents we refer to in them (all
-                    together, the “<strong>Terms</strong>”) form the relationship between us and you
-                    in relation to your use of the OpenChat Platform and our Services provided under
-                    these Terms (our “<strong>Services</strong>”). Our Terms apply when using
-                    specific Services as follows:
-
-                    <ul class="custom_list" style={"--prefix: '1.2.'"}>
-                        <li>Section A: General terms applicable to all Services</li>
-                        <li>Section B: Additional terms for messaging on the OpenChat Platform</li>
-                        <li>Section C: Additional terms for using the OpenChat Wallet</li>
-                        <li>Section D: Additional terms applicable to Swaps</li>
-                        <li>Section E: Additional terms for dealing in CHAT</li>
-                        <li>Section F: Additional terms for Diamond Membership holders</li>
-                        <li>Section G: Participating in the OpenChat DAO</li>
-                        <li>Schedule 1: Risks relating to Cryptoassets</li>
-                        <li>Schedule 2: Content Standards</li>
-                        <li>Schedule 3: CHAT Features</li>
-                        <li>Schedule 4: Multiple accounts</li>
-                    </ul>
-                </li>
-                <li>
-                    By using the OpenChat platform, you confirm that you accept these Terms and that
-                    you agree to comply with them. If you do not agree to these Terms, you must not
-                    use the OpenChat Platform or our Services.
-                </li>
-                <li>
-                    <h3>Interpretation</h3>
-                    <p>
-                        In these Terms, the following words and expressions have the following
-                        meanings:
-                    </p>
-                    <div class="interpretation">
-                        <div>"Applicable Law"</div>
-                        <div>
-                            all applicable statutes, laws, enactments, orders, regulations,
-                            regulatory rules, official guidance, standards, regulator expectations
-                            and other similar instruments in any relevant jurisdiction, as in force
-                            and amended from time to time;
-                        </div>
-                        <div>"Channel"</div>
-                        <div>
-                            refers to chats within Communities, to make clear that they are part of
-                            a Community;
-                        </div>
-                        <div>"CHAT"</div>
-                        <div>
-                            refers to the token used to facilitate the governance of OpenChat, with
-                            the features set out at Schedule 3;
-                        </div>
-                        <div>"Community", "Communities"</div>
-                        <div>
-                            refers to a group of Channels users can communicate within. This is
-                            distinct from the concept of a Group, as in a Group involves users
-                            messaging within a single channel (and Communities and Groups are a
-                            distinct forms of communication within the OpenChat Platform);
-                        </div>
-                        <div>"Content Standards"</div>
-                        <div>
-                            means the standards that apply to all Contributions, as set out at
-                            Schedule 2;
-                        </div>
-                        <div>"Contribution"</div>
-                        <div>
-                            refers to any material which you contribute to the OpenChat Platform,
-                            including any communication you make via our Services;
-                        </div>
-                        <div>"Cryptoassets"</div>
-                        <div>
-                            refers to CHAT as well as any and all other cryptoassets that are
-                            supported by the OpenChat Platform, a list of which are available in
-                            your OpenChat Wallet;
-                        </div>
-                        <div>"Diamond Membership"</div>
-                        <div>
-                            refers to our subscription service that gives members access to
-                            exclusive benefits;
-                        </div>
-                        <div>"Exchange Swap"</div>
-                        <div>has the meaning set out at clause D 1.2.1;</div>
-                        <div>"Gated"</div>
-                        <div>
-                            refers to the restrictions or rules that the owner of a Group,
-                            Community, or Channel may impose on users' ability to access or use that
-                            Group, Community, or Channel;
-                        </div>
-                        <div>"Governance Matters"</div>
-                        <div>
-                            refers to matters which relate to the operation or governance of the
-                            OpenChat DAO;
-                        </div>
-                        <div>"Group"</div>
-                        <div>
-                            refers to a channel in which a group of users can communicate. This is
-                            distinct from the concept of a Community, as a Community involves users
-                            messaging within a set of channels (and Communities and Groups are a
-                            distinct forms of communication within the OpenChat Platform);
-                        </div>
-                        <div>"Manifest Error"</div>
-                        <div>
-                            refers to the purported price of a Cryptoasset that differs so
-                            significantly from that reported by exchanges generally that it is
-                            clearly inaccurate due to, for example, a computer error;
-                        </div>
-                        <div>"OpenChat Platform"</div>
-                        <div>
-                            refers to the platform we provide, available at <a
-                                href="https://oc.app/">https://oc.app</a
-                            >;
-                        </div>
-                        <div>"OpenChat Wallet"</div>
-                        <div>
-                            refers to the digital wallet we provide, in which you can store your
-                            Cryptoassets;
-                        </div>
-                        <div>"P2P Swap"</div>
-                        <div>has the meaning set out at clause D 1.2.2;</div>
-                        <div>"Prize Messages"</div>
-                        <div>
-                            refers to messages containing Cryptoassets which are distributed to
-                            OpenChat users, who, upon receipt of the message, can potentially be
-                            gifted Cryptoassets;
-                        </div>
-                        <div>"Source Cryptoasset"</div>
-                        <div>
-                            refers to the Cryptoasset you wish to exchange to obtain the Target
-                            Cryptoasset;
-                        </div>
-                        <div>"Swap(s)"</div>
-                        <div>
-                            refers to either or both an Exchange Swap and / or a P2P Swap (as
-                            relevant);
-                        </div>
-                        <div>"Swap Offer"</div>
-                        <div>has the meaning set out at clause D 1.6;</div>
-                        <div>"Target Cryptoasset"</div>
-                        <div>
-                            refers to the Cryptoasset you wish to acquire in exchange for the Source
-                            Cryptoasset;
-                        </div>
-                        <div>"Virus"</div>
-                        <div>
-                            means any software, thing or device which contains any malicious code,
-                            file, program, or other internal component which may prevent, impair or
-                            otherwise adversely affect the operation of any computer software,
-                            hardware or network; or which may prevent, impair or otherwise adversely
-                            affect access to or the operation of any programme or data, including
-                            the reliability of any programme or data (whether by re-arranging,
-                            altering or erasing the programme or data in whole or part or
-                            otherwise); or adversely affect the user experience, including worms,
-                            trojan horses, viruses, time bombs and other similar things or devices;
-                        </div>
-                        <div>"Voting Platform"</div>
-                        <div>
-                            refers to the mechanism by which CHAT holders may submit votes as
-                            prescribed from time to time; and
-                        </div>
-                        <div>"Vulnerability"</div>
-                        <div>
-                            means a weakness, glitch or bug in the computational logic (for example,
-                            code) found in software and hardware components that, when exploited,
-                            results in a negative impact to confidentiality, integrity, or
-                            availability.
-                        </div>
-                    </div>
-                </li>
-                <li>
-                    Where the words "<strong>includes</strong>", "<strong>including</strong>", "<strong
-                        >for example</strong
-                    >" or "<strong>such as</strong>" are used in these Terms, they are deemed to
-                    have the words "<strong>without limitation</strong>" following them.
-                </li>
-                <li>
-                    A reference to “<strong>writing</strong>” or “<strong>written</strong>” includes
-                    email but not faxes. Any reference to "<strong>written consent</strong>" shall
-                    mean specific explicit consent.
-                </li>
-                <li>
-                    References to “<strong>dealing in</strong>” or “<strong>deal in</strong>” are
-                    references to any participation in Cryptoassets including buying, acquiring,
-                    accepting, holding, selling, staking, disposing of and / or otherwise making use
-                    of Cryptoassets. References to “<strong>transaction”</strong> or “<strong
-                        >transactions</strong
-                    >” are references to any activity involving a person disposing, acquiring, or
-                    otherwise transferring a Cryptoasset to another person (be that by a Swap, a
-                    chat message, or any other means).
-                </li>
-                <li>
-                    The headings of the clauses and schedules of these Terms are for convenience
-                    only and shall not affect its construction or interpretation. The schedules form
-                    part of these Terms and any reference in these Terms to a clause or schedule is
-                    a reference to a clause or schedule of these Terms.
-                </li>
-                <li>
-                    A reference to these Terms or to any other agreement or document referred to in
-                    these Terms is a reference to these Terms or such other document or agreement as
-                    amended or varied in accordance with its terms from time to time.
-                </li>
-                <li>
-                    A reference to a statute, statutory provision or subordinate legislation is a
-                    reference to it as it is in force from time to time, and includes any statute,
-                    statutory provision or subordinate legislation which it amends or re-enacts and
-                    subordinate legislation for the time being in force made under it.
-                </li>
-                <li>
-                    Unless the context otherwise requires, words in the singular shall include the
-                    plural and the plural shall include the singular, and a reference to one gender
-                    shall include a reference to the other genders.
-                </li>
-            </ul>
-        </li>
-        <li>
-            <h3>Contact Details</h3>
-
-            <ul class="custom_list" style={"--prefix: '2.'"}>
-                <li>
-                    If you have any queries, you can contact us via the help channel in the OpenChat
-                    Community, accessible via the OpenChat Platform.
-                </li>
-                <li>
-                    Communications between us shall be in English. Should we receive a communication
-                    which purports to be from you, we are entitled, but are not obliged, to rely on
-                    and conclusively presume that such communication has been given by you. We may
-                    record and monitor conversations we have with you.
-                </li>
-                <li>
-                    You must keep your information with us up to date, as any communication we send
-                    using the details you provide us will be deemed received by you, regardless of
-                    whether or not you actually receive it.
-                </li>
-                <li>
-                    You accept that we are deemed to have received any correspondence only at the
-                    time we actually access it. You accept that there may be a delay in responding
-                    to correspondence received.
-                </li>
-            </ul>
-        </li>
-        <li>
-            <h3>Setting up and securing your OpenChat account</h3>
-
-            <ul class="custom_list" style={"--prefix: '3.'"}>
-                <li>
-                    Before you can use our Services, you need to set up an account and provide
-                    certain information. You can do this via our Platform.
-                </li>
-                <li>
-                    To set up an account, our Platform will ask you to authenticate your identity
-                    via a third party identity provider. By authenticating your identity, you agree
-                    to the terms of the third party identity provider.
-                </li>
-                <li>
-                    As part of setting up your account, you may be provided with or asked to create
-                    security details. You must keep your security details secure and not disclose
-                    them to anyone else. Any action or instruction by anyone using your security
-                    details will be treated as if such action or instruction had been made by you,
-                    and we are not responsible for any loss as a result. You should contact us
-                    immediately upon discovering any unauthorised use of your security details.
-                </li>
-                <li>
-                    <strong
-                        >We strongly recommend logging out of the OpenChat Platform at the end of
-                        every session you have on the OpenChat Platform, as otherwise the OpenChat
-                        Platform may not prompt the next user of the device used to access the
-                        OpenChat Platform to enter credentials in order to use the OpenChat
-                        Platform. If you do not log out of the OpenChat Platform at the end of each
-                        session, there is a risk that another person may impersonate you, for
-                        example to send Contributions or to access your Cryptoassets without your
-                        knowledge or consent. We are not responsible for any losses as a consequence
-                        of your failure to log out at the end of a session or your credentials
-                        otherwise being compromised.
-                    </strong>
-                </li>
-            </ul>
-        </li>
-
-        <li>
-            <h3>Eligibility to use our services</h3>
-
-            <ul class="custom_list" style={"--prefix: '4.'"}>
-                <li>
-                    <p>
-                        By using the OpenChat Platform, you confirm and represent at all times that:
-                    </p>
-
-                    <ul class="custom_list" style={"--prefix: '4.1.'"}>
-                        <li>
-                            (if you are a body corporate) you are duly organised and validly
-                            existing under the laws of the jurisdiction of your domicile, and have
-                            full power, authority and right, and have taken all action required, to
-                            bind yourself to these Terms, including as regards performing all
-                            actions and obligations under these Terms, which therefore constitute
-                            valid and legally binding obligations;
-                        </li>
-                        <li>
-                            (if you are an individual) you are of legal age and competency to agree
-                            to these Terms and all related obligations, including as regards any
-                            age, residency, legal capacity, competency and all other requirements;
-                        </li>
-                        <li>
-                            you are not a citizen or resident of, or a legal entity in any country
-                            or territory which appears on the sanctions lists of the Office of
-                            Foreign Assets Control of the U.S. Department of Treasury (“<strong
-                                >OFAC</strong
-                            >”), United Nations Security Council (“<strong>UNSC</strong>”), Her
-                            Majesty’s Treasury (“<strong>HMT</strong>”) or any other relevant
-                            sanctions list;
-                        </li>
-                        <li>
-                            (if using our Services to deal in Cryptoassets) you are not a citizen or
-                            resident of, or a legal entity in any country that prohibits dealing in
-                            Cryptoassets or which would otherwise require us to have a licence,
-                            permission, registration or authorisation which we do not have;
-                        </li>
-                        <li>
-                            (if using our Services to send Contributions) you shall not make a
-                            Contribution that is prohibited in the country where you are a citizen
-                            or resident, or registered as a legal entity.
-                        </li>
-                        <li>
-                            you will comply with any Applicable Law relevant to you, including not
-                            committing, causing, facilitating or contributing to the commission by
-                            any person of any bribery, corruption or tax evasion offence;
-                        </li>
-                        <li>
-                            you shall not deal in Cryptoassets where this would require you or us to
-                            obtain any registration, approval, authorisation or similar which you /
-                            we do not have, or in any other circumstances in which your dealing in
-                            Cryptoassets is prohibited;
-                        </li>
-                        <li>
-                            in using the OpenChat Platform you do not breach the rights of any third
-                            party, including any intellectual property or data privacy rights of any
-                            third party;
-                        </li>
-                        <li>
-                            you have not received any advice from us in relation to the using the
-                            Openchat Platform or our Services or dealing in CHAT, and you are solely
-                            responsible for any evaluations, decisions and actions taken in
-                            connection with such;
-                        </li>
-                        <li>
-                            you will provide us with whatever information we may request for the
-                            purposes of satisfying our regulatory, compliance and contractual
-                            obligations;
-                        </li>
-                        <li>
-                            you will deal with us in any open and honest way, including as regards
-                            providing us with full, complete and accurate information when
-                            responding to our reasonable requests;
-                        </li>
-                        <li>
-                            you waive any right you may have to participate in a class action
-                            lawsuit or a class-wide arbitration against us and / or any person
-                            involved with us that arises out of or relates to CHAT or these Terms;
-                        </li>
-                        <li>
-                            you will not attempt to circumvent the security of or interfere with the
-                            proper working of the OpenChat Platform, CHAT or any server on which
-                            they are hosted, nor otherwise introduce, nor permit the introduction
-                            of, any Virus or Vulnerability into the OpenChat Platform, CHAT nor any
-                            of our systems; and
-                        </li>
-                        <li>
-                            you will not use (or assist others in using) our Services or CHAT in
-                            ways that are unlawful, misleading, harmful, discriminatory or
-                            fraudulent.
-                        </li>
-                    </ul>
-                </li>
-                <li>
-                    In using the OpenChat Platform and our Services you are responsible for all
-                    activity that occurs under your OpenChat account and via any device connected
-                    with/to your OpenChat account.
-                </li>
-                <li>
-                    You shall notify us via the help channel in the OpenChat Community (accessible
-                    via the OpenChat Platform) immediately if you become aware you have breached, or
-                    may have breached, any of your obligations under these Terms.
-                </li>
-                <li>
-                    You may not create multiple accounts on the OpenChat Platform according to
-                    Schedule 4;
-                </li>
-            </ul>
-        </li>
-
-        <li>
-            <h3>Availability</h3>
-
-            <ul class="custom_list" style={"--prefix: '5.'"}>
-                <li>
-                    Whilst we strive to make our Services and the OpenChat Platform available for
-                    all users all the time, we do not guarantee that our Services or the OpenChat
-                    Platform will be available without interruption, and there may be unavailability
-                    for reasons such as maintenance, repairs, upgrades, or failures of network or
-                    equipment.
-                </li>
-                <li>
-                    We shall not be responsible for any loss from or arising out of Service
-                    interruptions, delays in processing transactions or inability to execute
-                    transactions.
-                </li>
-            </ul>
-        </li>
-
-        <li>
-            <h3>General obligations when dealing with cryptoassets</h3>
-
-            <ul class="custom_list" style={"--prefix: '6.'"}>
-                <li>
-                    <p>
-                        When using our Services to deal in Cryptoassets (including CHAT), you
-                        acknowledge and accept that:
-                    </p>
-                    <ul class="custom_list" style={"--prefix: '6.1.'"}>
-                        <li>
-                            you understand that we do not provide, nor do we accept responsibility
-                            for, any investment, legal, tax or accounting advice, and we do not
-                            provide any form of recommendation regarding the
-                            suitability/appropriateness or quality of any Cryptoasset, and the fact
-                            that our Services may be used in relation to any Cryptoasset should not
-                            be taken as an indication of such;
-                        </li>
-                        <li>
-                            your dealing in Cryptoassets is based on your own assessment of the
-                            risks involved, and if you are in any doubt as to what these risks are
-                            you confirm you have taken your own independent advice as appropriate;
-                        </li>
-                        <li>
-                            you are responsible for ensuring that any Cryptoassets and software
-                            (including any external wallet) you use in connection with our Services
-                            is compatible with the OpenChat Platform and CHAT, and we are not liable
-                            in the event of any incompatibility resulting in loss;
-                        </li>
-                        <li>
-                            you are only able to send Cryptoassets using our Services that are
-                            stored in your OpenChat Wallet, and you are not able to send
-                            Cryptoassets stored in any external wallet;
-                        </li>
-                        <li>
-                            the OpenChat Platform will refuse to complete, cancel or reverse any
-                            transaction you have authorised or made using our Services where there
-                            is insufficient Cryptoassets in your OpenChat Wallet to cover the
-                            transaction and our fees incurred;
-                        </li>
-                        <li>
-                            you will be charged a fee for every chat message sent containing
-                            Cryptoassets as determined by the relevant Cryptoasset ledger, and this
-                            fee will be automatically deducted from your OpenChat Wallet (this is
-                            not a fee charged by us);
-                        </li>
-                        <li>
-                            you will provide us with whatever information we request to facilitate
-                            any transaction using our Services;
-                        </li>
-                        <li>
-                            Cryptoasset transfers are irreversible and so accidental or fraudulent
-                            transactions with respect to Cryptoassets may not be recoverable. We are
-                            not responsible for any losses that may arise in connection with
-                            accidental or fraudulent transactions and as such, caution should be
-                            exercised whenever you make a transaction via the OpenChat Platform;
-                        </li>
-                        <li>
-                            whilst we will use reasonable endeavours to ensure that instructions in
-                            relation to Cryptoassets are processed in a timely manner, we make no
-                            representation or warranty regarding the amount of time needed to
-                            complete any instruction, as this is dependent upon many factors outside
-                            of our control, and we shall not be responsible for any loss from or
-                            arising out of delays in processing transactions or any inability to
-                            execute transactions; and
-                        </li>
-                        <li>
-                            you are responsible for complying with any tax obligations applicable to
-                            you in connection with your dealing in Cryptoassets.
-                        </li>
-                    </ul>
-                </li>
-            </ul>
-        </li>
-        <li>
-            <h3>Intellectual property</h3>
-
-            <ul class="custom_list" style={"--prefix: '7.'"}>
-                <li>
-                    OpenChat and their licensors (if any) are at all times the owners of all
-                    intellectual property rights (of whatever nature, anywhere in the world)
-                    associated with our Services, the OpenChat Platform or CHAT, as well as any
-                    related software or information provided in relation to the CHAT (the “<strong>
-                        OpenChat Intellectual Property
-                    </strong>”). The OpenChat Intellectual Property and aforesaid rights are
-                    licensed (not sold) to you under the AGPLv3 licence (at
-                    <a href="https://www.gnu.org/licenses/agpl-3.0.html"
-                        >https://www.gnu.org/licenses/agpl-3.0.html</a
-                    >) and you have the right to use the OpenChat Intellectual Property only for the
-                    purpose of using our Services and as otherwise permitted under the AGPLv3
-                    licence. You have no intellectual property rights in the OpenChat Intellectual
-                    Property other than the right to use them in accordance with these Terms and the
-                    AGPLv3 licence. Any other use is expressly prohibited. We reserve all rights not
-                    expressly granted under these Terms.
-                </li>
-
-                <li>
-                    <p>
-                        The main repository for the OpenChat application used in the OpenChat
-                        Platform is at <a href="https://github.com/open-chat-labs/open-chat/"
-                            >https://github.com/open-chat-labs/open-chat/</a
-                        >. You may use this code solely in accordance with the AGPLv3 licence or as
-                        otherwise expressly agreed by us in these Terms or in writing. Subject to
-                        the foregoing, you shall not, except as may be allowed by Applicable Law
-                        which is incapable of exclusion by agreement between the Parties:
-                    </p>
-                    <ul class="custom_list" style={"--prefix: '7.1.'"}>
-                        <li>
-                            except to the extent expressly permitted under these Terms, attempt to
-                            copy, modify, duplicate, create derivative works from, frame, mirror,
-                            republish, download, display, transmit, or distribute all or any portion
-                            of any OpenChat Intellectual Property;
-                        </li>
-                        <li>
-                            attempt to reverse compile, disassemble, reverse engineer or otherwise
-                            reduce to human-perceivable form all or any part of any OpenChat
-                            Intellectual Property;
-                        </li>
-                        <li>
-                            access all or any part of the OpenChat Intellectual Property in order to
-                            build a product or Service which competes with the CHAT and / or the
-                            activities of OpenChat;
-                        </li>
-                        <li>
-                            license, sell, rent, lease, transfer, assign, distribute, display,
-                            disclose, or otherwise commercially exploit OpenChat Intellectual
-                            Property, and this includes not doing so via any third party; and / or
-                        </li>
-                        <li>
-                            attempt to obtain, or assist third parties in obtaining, access to
-                            OpenChat Intellectual Property other than as expressly permitted by
-                            these Terms.
-                        </li>
-                    </ul>
-                </li>
-                <li>
-                    All logos related to us and the OpenChat Intellectual Property are marks of
-                    OpenChat or our licensors. You may not copy, imitate, or use our trading names
-                    or logos without our prior written consent. All rights, title and interests in
-                    and to such is the exclusive property of us and our licensors.
-                </li>
-                <li>
-                    OpenChat Intellectual Property may contain code, commonly referred to as
-                    open-source software, which is distributed under any of the many known
-                    variations of open source licence terms, including terms which allow the free
-                    distribution and modification of the relevant software’s source code and/or
-                    which require all distributors to make such source code freely available upon
-                    request, including any contributions or modifications made by such distributor
-                    (collectively, “<strong>Open Source Software</strong>”). To the extent that our
-                    Services, the OpenChat Platform or CHAT use or contain any Open Source Software,
-                    that element only is licensed to you under the relevant licence terms of the
-                    applicable third party licensor (“<strong>Open Source Licence Terms</strong>”),
-                    and you accept and agree to be bound by such Open Source Licence Terms.
-                </li>
-            </ul>
-        </li>
-        <li>
-            <h3>Our liability</h3>
-
-            <ul class="custom_list" style={"--prefix: '8.'"}>
-                <li>
-                    Notwithstanding any other clause in these Terms, we do not in any way exclude or
-                    limit our liability for death or personal injury caused by our negligence; fraud
-                    or fraudulent misrepresentation; or any other liability which cannot be limited
-                    or excluded by Applicable Law.
-                </li>
-                <li>
-                    Subject to clause A 8.1, we shall be responsible to you only for loss that you
-                    suffer as a direct and foreseeable result of our breach of this Agreement as a
-                    result of our gross negligence, and only insofar that such loss does not arise
-                    as a result of a breach of these Terms and / or Applicable Law by you. In any
-                    event, we shall not be liable to you for any loss: (i) of profits or expected
-                    revenue; (ii) caused by events outside our reasonable control; (iii) resulting
-                    from any attack by a third party on our systems; (iv) as a result of us
-                    exercising any of our rights or any exercise of discretion permitted to us under
-                    these Terms; or (v) anything else which we state we are not responsible for or
-                    which we otherwise exclude our liability for under these Terms.
-                </li>
-                <li>
-                    Subject to clause A 8.1, our total liability under these Terms shall be capped
-                    at the total amount of fees received by us from you in the year proceeding the
-                    breach.
-                </li>
-            </ul>
-        </li>
-        <li>
-            <h3>Your liability</h3>
-
-            <ul class="custom_list" style={"--prefix: '9.'"}>
-                <li>
-                    <p>You agree to indemnify us for any losses that arise from or relate to:</p>
-                    <ul class="custom_list" style={"--prefix: '9.1.'"}>
-                        <li>your breach of any Applicable Law or these Terms;</li>
-                        <li>your breach of the rights of any third party to these Terms;</li>
-                        <li>
-                            any regulatory inquiry, legal action, litigation, dispute or
-                            investigation, whether such situations occur or are anticipated, that
-                            relate to you; and
-                        </li>
-                        <li>
-                            any fees, taxes or costs not imposed by or via us, which we pay on your
-                            behalf.
-                        </li>
-                    </ul>
-                </li>
-                <li>
-                    Losses for the purposes of this clause A 9 include direct and indirect losses,
-                    as well as any costs and expenses (including reasonable legal fees).
-                </li>
-            </ul>
-        </li>
-        <li>
-            <h3>Termination</h3>
-            <ul class="custom_list" style={"--prefix: '10.'"}>
-                <li>
-                    <p>
-                        You may terminate your relationship with us immediately at any time for any
-                        reason by ceasing to use our Services. You will not be charged for
-                        terminating your OpenChat account. Once your OpenChat account is closed, you
-                        accept and acknowledge that:
-                    </p>
-                    <ul class="custom_list" style={"--prefix: '10.1.'"}>
-                        <li>you will no longer have access to any Contributions you have made;</li>
-                        <li>
-                            our other users will continue to have access to the Contributions you
-                            have made (as Contributions are not deleted when you terminate); and
-                        </li>
-                        <li>
-                            you will no longer have access to your OpenChat Wallet, and you are
-                            solely responsible for transferring any Cryptoassets stored in your
-                            OpenChat Wallet to an external wallet prior to account deletion
-                            (otherwise you will lose access to those Cryptoassets).
-                        </li>
-                    </ul>
-                </li>
-                <li>
-                    We may suspend, restrict or terminate your access to or use of any or all of our
-                    Services or the OpenChat Platform with immediate effect at any time by giving
-                    you notice via the OpenChat Platform where (i) we believe that has been
-                    suspicious or unlawful conduct, including fraud; (ii) if we reasonably believe
-                    you breach these Terms repeatedly or in a serious way; (iii) if we reasonably
-                    believe you create harm, risk, or possible legal exposure for us, our users, or
-                    others; (iv) for security, legal or regulatory reasons; or (v) if you have not
-                    given us information we need, or we believe that the information you have
-                    provided us is incorrect.
-                </li>
-                <li>
-                    On suspension of some or all of our Services, you shall not be able to access
-                    some or all of our Services until the suspension is ended at our discretion. We
-                    shall have no obligation to end any suspension within any particular time period
-                    or at all, and we shall not incur any liability for any loss caused or as a
-                    consequence of us exercising our suspension rights under these Terms.
-                </li>
-                <li>
-                    <p>On termination of all of our Services:</p>
-                    <ul class="custom_list" style={"--prefix: '10.4.'"}>
-                        <li>
-                            you will no longer be permitted or have any right to access or use the
-                            OpenChat Platform or our Services, and we will also cease to support
-                            your use of CHAT in connection with these purposes.
-                        </li>
-                        <li>
-                            you must withdraw all of your Cryptoassets from your OpenChat Wallet
-                            within 1 week of termination, as we will cease to provide support for
-                            your OpenChat Wallet after the expiry of that period, and we are not
-                            responsible for any loss as a consequence.
-                        </li>
-                        <li>
-                            all other rights, obligations and liabilities of the parties accrued up
-                            to and including the date of termination shall not be affected by
-                            termination.
-                        </li>
-                    </ul>
-                </li>
-                <li>
-                    Termination shall not affect the continued operation of clauses and provisions
-                    which by their nature clearly reflect the intention of the parties that they
-                    survive termination, including in relation to liability and the protection of
-                    intellectual property.
-                </li>
-            </ul>
-        </li>
-        <li>
-            <h3>Changes to these terms</h3>
-            <ul class="custom_list" style={"--prefix: '11.'"}>
-                <li>
-                    <p>
-                        We may make changes to these Terms and our Services available from time to
-                        time:
-                    </p>
-                    <ul class="custom_list" style={"--prefix: '11.1.'"}>
-                        <li>to reflect changes to Applicable Law;</li>
-                        <li>
-                            to reflect changes required by any court, regulatory or tax authority or
-                            industry guidance or codes of practice;
-                        </li>
-                        <li>to reflect changes in the way cryptoasset markets work;</li>
-                        <li>
-                            to reflect changes to our technology or other systems, including those
-                            required to reflect to our intention to have increasing decentralisation
-                            of the OpenChat Platform;
-                        </li>
-                        <li>
-                            if it becomes impossible or impractical, in our reasonable opinion, to
-                            carry out any aspect of these Terms as a result of circumstances beyond
-                            our reasonable control;
-                        </li>
-                        <li>to make these Terms easier to understand;</li>
-                        <li>
-                            to reflect changes to the nature or scope of the Services we provide
-                            generally;
-                        </li>
-                        <li>where the changes are to your benefit or not detrimental to you; or</li>
-                        <li>for any other valid reason.</li>
-                    </ul>
-                </li>
-                <li>
-                    We will give you reasonable notice of any changes to these Terms, or we may make
-                    changes with immediate effect where they are in your favour or are required by
-                    Applicable Law.
-                </li>
-                <li>
-                    We will notify you of any changes via the OpenChat Platform. You will be treated
-                    as accepting any change that we make to these Terms unless you tell us that you
-                    do not agree to the change, in which case you must discontinue using our
-                    Services. We will treat this as your termination of your agreement to use our
-                    Services, with effect from the date that the change would otherwise come into
-                    effect.
-                </li>
-            </ul>
-        </li>
-        <li>
-            <h3>Novation</h3>
-            <ul class="custom_list" style={"--prefix: '12.'"}>
-                <li>
-                    We may appoint another entity to take over all or some of our rights and
-                    obligations under these Terms (the “<strong>New Entity</strong>”), in which case
-                    you consent to us transferring by way of novation all or some of our rights and
-                    obligations under these Terms to the New Entity. As soon as reasonably
-                    practicable following such novation, we shall notify you in writing of the
-                    effective date of such novation. From such effective date, all references in
-                    these Terms to “OpenChat”, “we”, “us” or “our” shall be deemed to be references
-                    to the New Entity.
-                </li>
-            </ul>
-        </li>
-        <li>
-            <h3>Governing law and jurisdiction</h3>
-            <ul class="custom_list" style={"--prefix: '13.'"}>
-                <li>
-                    If you are a consumer, please note that these Terms and any dispute or claim
-                    arising out of or in connection with them shall be governed by English law. You
-                    and we both agree that the courts of England and Wales will have non-exclusive
-                    jurisdiction to settle any dispute or claim arising out of or in connection with
-                    these Terms or their subject matter. However, nothing in these Terms will
-                    override any mandatory laws of the country in which you have your usual place of
-                    residence.
-                </li>
-                <li>
-                    If you are a business, these Terms and any dispute or claim arising out of or in
-                    connection with them or their subject matter or formation (including
-                    non-contractual disputes or claims) shall be governed by and construed in
-                    accordance with English law. We both agree that the courts of England and Wales
-                    shall have exclusive jurisdiction to settle any such dispute or claim (including
-                    non-contractual disputes or claims).
-                </li>
-            </ul>
-        </li>
-        <li>
-            <h3>Entire agreement</h3>
-            <ul class="custom_list" style={"--prefix: '14.'"}>
-                <li>
-                    These Terms constitute the entire agreement between you and us and supersede any
-                    prior agreement, terms and conditions or arrangement in respect of their subject
-                    matter. There are no promises, representations, warranties, terms, conditions or
-                    obligations between you and us other than those set out in these Terms.
-                </li>
-                <li>
-                    You warrant that you have not entered into these Terms in reliance upon, and
-                    will have no remedy in respect of, any misrepresentation, representation or
-                    statement which is not expressly set out or referred to in these Terms. The only
-                    remedy available for any misrepresentation or breach of any representation or
-                    statement set out or referred to in these Terms shall be for breach of contract.
-                </li>
-            </ul>
-        </li>
-        <li>
-            <h3>Miscellaneous</h3>
-            <ul class="custom_list" style={"--prefix: '15.'"}>
-                <li>
-                    These Terms shall take effect from the earlier of the date on which you (i)
-                    receive CHAT (ii) access the OpenChat Platform or (iii) otherwise use our
-                    Services.
-                </li>
-                <li>
-                    Each of the provisions of these Terms are separate, severable and enforceable
-                    and, accordingly, if at any time any provision or part-provision of these Terms
-                    is or becomes invalid, void, illegal or unenforceable, it shall be deemed
-                    deleted, but that shall not affect the validity and enforceability of the rest
-                    of these Terms. If any provision or part-provision of these Terms is deemed
-                    deleted under this clause A 15.2, these Terms shall be interpreted so as, to the
-                    greatest extent possible, to achieve the intended commercial result of the
-                    deleted provision.
-                </li>
-                <li>
-                    You may not assign, lien, mortgage, transfer, charge or otherwise encumber any
-                    of your rights or obligations in a way which may impede your performance of your
-                    obligations under these Terms. We may assign the benefit of these Terms without
-                    restriction subject to compliance with Applicable Law.
-                </li>
-                <li>
-                    The parties intend that any New Entity shall have the right to enforce any
-                    rights granted to it under clause A 12 pursuant to the Contracts (Rights of
-                    Third Parties) Act 1999 (the "<strong>1999 Act</strong>"). Save as aforesaid,
-                    the participants do not intend that the provisions of these Terms shall be
-                    enforceable by virtue of the 1999 Act or otherwise by any person not a user of
-                    the OpenChat Platform. Notwithstanding this clause A 15.4, the consent any third
-                    party is not required for any variation (including any release or compromise of
-                    any liability) or termination of these Terms.
-                </li>
-                <li>
-                    No variation or waiver of any of the terms of these Terms shall be effective
-                    unless agreed by us explicitly in writing. No failure or delay by us to exercise
-                    any right, power or remedy under these Terms shall operate as a waiver of that
-                    right, or any other right, nor shall any single or partial exercise by us of any
-                    right, power or remedy preclude any other or further exercise of that right or
-                    any other right, power or remedy.
-                </li>
-            </ul>
-        </li>
-    </ul>
-
-    <HashLinkTarget {onCopyUrl} id="2">
-        <h2>Section B: Additional terms for messaging on the OpenChat platform</h2>
-    </HashLinkTarget>
-
-    <ul class="custom_list bold" style={"--prefix: 'B'; --suffix: ''"}>
-        <li>
-            <h3>Introduction</h3>
-            <ul class="custom_list" style={"--prefix: '1.'"}>
-                <li>
-                    This section of these Terms will apply to OpenChat users when using the OpenChat
-                    Platform to send Contributions to each other.
-                </li>
-            </ul>
-        </li>
-
-        <li>
-            <h3>Messaging services</h3>
-            <ul class="custom_list" style={"--prefix: '2.'"}>
-                <li>
-                    <p>The OpenChat Platform enables all its users to, for example:</p>
-                    <ul class="custom_list" style={"--prefix: '2.1.'"}>
-                        <li>send and receive text and multimedia communications;</li>
-                        <li>send messages containing Cryptoassets (including tips);</li>
-                        <li>send Prize Messages;</li>
-                        <li>join video and voice calls;</li>
-                        <li>create private Groups;</li>
-                        <li>join public and / or private and / or Gated Groups; and</li>
-                        <li>join (but not create) public and / or private Communities.</li>
-                    </ul>
-                </li>
-                <li>
-                    <p>Please note:</p>
-                    <ul class="custom_list" style={"--prefix: '2.2.'"}>
-                        <li>
-                            when using our messages or prize messages to send Cryptoassets, this
-                            shall constitute dealing in Cryptoassets and the provisions in clause A
-                            6 shall apply.
-                        </li>
-                        <li>
-                            that we strongly recommend logging out of the OpenChat Platform at the
-                            end of every session you have on the OpenChat Platform, as otherwise the
-                            OpenChat Platform may not prompt the next user of the device used to
-                            access the OpenChat Platform to enter credentials in order to use the
-                            OpenChat Platform. If you do not log out of the OpenChat Platform at the
-                            end of each session, there is a risk that another person may impersonate
-                            you to send Contributions. We are not responsible for any losses as a
-                            consequence of your failure to log out at the end of a session or your
-                            credentials otherwise being compromised.
-                        </li>
-                    </ul>
-                </li>
-            </ul>
-        </li>
-
-        <li>
-            <h3>Conditions for contributions</h3>
-            <ul class="custom_list" style={"--prefix: '3.'"}>
-                <li>
-                    <p>A Contribution must not:</p>
-                    <ul class="custom_list" style={"--prefix: '3.1.'"}>
-                        <li>do anything that is unlawful;</li>
-                        <li>communicate any illegal content or activity;</li>
-                        <li>be defamatory, obscene, offensive, hateful or inflammatory;</li>
-                        <li>bully, harass, insult or intimidate; or</li>
-                        <li>otherwise breach our Content Standards.</li>
-                    </ul>
-                </li>
-                <li>
-                    We shall decide, at our discretion, if a Contribution does not meet these
-                    requirements and if we decide that there has been a breach of clause B 3.1, we
-                    may suspend or terminate your access to or use of our Services immediately and
-                    you will be liable for any loss we incur as a consequence.
-                </li>
-                <li>
-                    If we decide that a Contribution is prohibited in any jurisdiction, we reserve
-                    the right to conceal the Contribution and prevent it from being viewed by users
-                    who are citizens, residents or legal entities in those jurisdictions where such
-                    a Contribution is prohibited.
-                </li>
-                <li>
-                    If we decide that a Contribution is likely to be interpreted by any users as
-                    defamatory, offensive, hateful or inflammatory, we reserve the right to require
-                    users to confirm an appropriate risk warning before permitting them to view such
-                    a Contribution.
-                </li>
-                <li>
-                    If you see any Contribution that you believe is in breach of clause B 3.1, you
-                    should contact us via the help channel in the OpenChat Community (accessible via
-                    the OpenChat Platform) and we will investigate. However, you acknowledge that we
-                    are not responsible if a person breaches clause B 3.1 when using our Services,
-                    whether or not we take any action as a result.
-                </li>
-                <li>
-                    <p>
-                        We will enable you to send Prize Messages. Where you do so, you shall ensure
-                        that the arrangements under which any Cryptoasset prizes are gifted:
-                    </p>
-                    <ul class="custom_list" style={"--prefix: '3.6.'"}>
-                        <li>
-                            are clear, fair, honest, not misleading and in compliance with any
-                            Applicable Law;
-                        </li>
-                        <li>
-                            are not structured in a way that would meet the definition of regulated
-                            gambling under any relevant jurisdiction; and
-                        </li>
-                        <li>
-                            are gifted in accordance on a basis which is clearly communicated with
-                            all participants.
-                        </li>
-                    </ul>
-                </li>
-                <li>
-                    All participants in any arrangement for Cryptoasset prizes accept that we do not
-                    control, and are not responsible or liable for, any issue or loss in connection
-                    with any Cryptoassets prizes offered or gifted via our Services.
-                </li>
-                <li>
-                    You understand that messaging services are vulnerable to spoofing and phishing
-                    attacks and so caution should be exercised in reviewing all Contributions, and
-                    we shall not be responsible for any loss caused by phishing, spoofing or any
-                    other malicious attack.
-                </li>
-                <li>
-                    You also accept that we shall also not be responsible for any loss in connection
-                    with any delay or error in the transmission or receipt of any Contribution, so
-                    long as we have acted in good faith. This includes loss caused as a result of a
-                    delay in the transmission or receipt of Cryptoassets sent via our messaging
-                    system, so long as we have acted in good faith.
-                </li>
-            </ul>
-        </li>
-        <li>
-            <h3>Conditions for joining groups and communities</h3>
-
-            <ul class="custom_list" style={"--prefix: '4.'"}>
-                <li>
-                    By joining a public or private Group or Community (including those which are
-                    Gated) on the OpenChat Platform, you understand and accept that you must comply
-                    with all applicable rules of that Group or Community. You also understand that
-                    we do not accept responsibility for the operation of Groups and Communities
-                    available via the OpenChat Platform.
-                </li>
-                <li>
-                    In addition, to join a Gated Group or Community you will need to at all relevant
-                    times satisfy the criteria as determined by the creator of that particular Group
-                    or Community.
-                </li>
-            </ul>
-        </li>
-        <li>
-            <h3>Intellectual property</h3>
-            <ul class="custom_list" style={"--prefix: '5.'"}>
-                <li>
-                    We do not claim any ownership of any intellectual property in the content that
-                    you submit via our messaging Services. However, you represent that any content
-                    you submit does not breach the intellectual property of any person, that you
-                    have the full right to send such information, and there is no other reason why
-                    we would be in breach of any obligation to any person in enabling you to send
-                    such information via our Services.
-                </li>
-            </ul>
-        </li>
-    </ul>
-
-    <HashLinkTarget {onCopyUrl} id="3">
-        <h2>Section C: Additional terms for using the OpenChat wallet</h2>
-    </HashLinkTarget>
-    <ul class="custom_list bold" style={"--prefix: 'C'; --suffix: ''"}>
-        <li>
-            <h3>Introduction</h3>
-            <ul class="custom_list" style={"--prefix: '1.'"}>
-                <li>
-                    This section of these Terms will apply to OpenChat users who use the OpenChat
-                    Wallet.
-                </li>
-            </ul>
-        </li>
-        <li>
-            <h3>Conditions for use</h3>
-            <ul class="custom_list" style={"--prefix: '2.'"}>
-                <li>
-                    <p>By using the OpenChat Wallet, you acknowledge and accept that:</p>
-                    <ul class="custom_list" style={"--prefix: '2.1.'"}>
-                        <li>
-                            you understand that in order to secure your OpenChat Wallet and be able
-                            to store Cryptoassets, you must access your OpenChat account using the
-                            credentials provided when opening your account. You are responsible for
-                            keeping, protecting and safeguarding your credentials. In this respect,
-                            you are aware that if you lose your credentials or access to your
-                            OpenChat account is compromised for any other reason, you may not be
-                            able to access your OpenChat Wallet and someone else may take control of
-                            your Cryptoassets (and may as a consequence be treated by the OpenChat
-                            Platform as if they were owner of those Cryptoassets). We are not
-                            responsible for any losses in relation to your loss of or inability to
-                            access the Cryptoassets stored in your OpenChat Wallet in connection
-                            with you losing your credentials or your credentials otherwise being
-                            compromised;
-                        </li>
-                        <li>
-                            unless you log out of the OpenChat Platform at the end of every session
-                            you have on the OpenChat Platform, the OpenChat Platform may not prompt
-                            the next user of the device used to access the OpenChat Platform to
-                            enter credentials in order to use the OpenChat Platform. If you do not
-                            log out of the OpenChat Platform at the end of each session, there is a
-                            risk that another person may impersonate you to access your Cryptoassets
-                            without your knowledge or consent, and the OpenChat Platform may treat
-                            them as if they are the owner of those Cryptoassets. We are not
-                            responsible for any losses as a consequence of your failure to log out
-                            at the end of a session or your credentials otherwise being compromised;
-                        </li>
-                        <li>
-                            we assume no responsibility in connection with any attempt to use your
-                            OpenChat Wallet for cryptoassets that we do not support or with regard
-                            to Cryptoassets sent from your OpenChat Wallet to an incompatible
-                            external wallet address;
-                        </li>
-                        <li>
-                            you understand that if you authorise or allow any third party to access
-                            your OpenChat Wallet, the third party will know your OpenChat Wallet
-                            information (including without limitation, information relating to your
-                            assets and transactions), and your OpenChat Wallet will be exposed to
-                            certain risks, and you may suffer losses (we are not responsible for any
-                            such losses);
-                        </li>
-                        <li>
-                            the transfer of Cryptoassets into your OpenChat Wallet exposes those
-                            Cryptoassets to the risk of loss from, amongst other things, security
-                            breaches from cyber-attacks, and so long as we have acted in good faith
-                            we are not responsible for any such loss; and
-                        </li>
-                        <li>
-                            you understand that if you hold Cryptoassets in your OpenChat Wallet,
-                            and there has been no activity on your OpenChat account for a prolonged
-                            period of time and we are unable to contact you, Applicable Law may
-                            require us to deliver any such Cryptoassets to the authorities in
-                            certain jurisdictions as unclaimed property. Where this is the case, we
-                            will comply with such requirements to the extent reasonably required by
-                            Applicable Law.
-                        </li>
-                    </ul>
-                </li>
-                <li>
-                    <p>By using the OpenChat Wallet, you covenant, represent and warrant that:</p>
-                    <ul class="custom_list" style={"--prefix: '2.2.'"}>
-                        <li>
-                            you shall allow your OpenChat Wallet to be used in connection with any
-                            activities that are prohibited by Applicable Law;
-                        </li>
-                        <li>
-                            you shall not use your OpenChat Wallet to store, send, or receive
-                            cryptoassets that we do not support;
-                        </li>
-                        <li>
-                            you are the legal and rightful owner of all Cryptoassets in your
-                            OpenChat Wallet, and that the sources of such Crptoassets are legal, and
-                            you will not transfer or trade through the OpenChat Platform anything
-                            other than Cryptoassets that have been legally obtained by you and that
-                            belong to you; and
-                        </li>
-                        <li>
-                            you shall notify us without undue delay of any unauthorised use and / or
-                            access of your OpenChat Wallet.
-                        </li>
-                    </ul>
-                </li>
-            </ul>
-        </li>
-    </ul>
-
-    <HashLinkTarget {onCopyUrl} id="4">
-        <h2>Section D: Additional terms applicable to making a swap</h2>
-    </HashLinkTarget>
-    <ul class="custom_list bold" style={"--prefix: 'D'; --suffix: ''"}>
-        <li>
-            <h3>Introduction</h3>
-            <ul class="custom_list" style={"--prefix: '1.'"}>
-                <li>
-                    This section of these Terms will apply to OpenChat users who use the OpenChat
-                    Platform to make a Swap.
-                </li>
-                <li>
-                    <p>A Swap can be either:</p>
-                    <ul class="custom_list" style={"--prefix: '1.2.'"}>
-                        <li>
-                            an Exchange Swap, which is where the OpenChat Platform offers you a
-                            price for the Cryptoasset, and the transaction is completed using the
-                            third party exchange(s) the OpenChat Platform is linked to; or
-                        </li>
-                        <li>
-                            a P2P Swap, which is where you send a message to the users of a chat
-                            with the proposed terms of a transaction, and the OpenChat Platform
-                            facilitates you in completing that transaction with the other user.
-                        </li>
-                    </ul>
-                </li>
-                <li>
-                    In order to make an Exchange Swap, you need to choose (i) your Source
-                    Cryptoasset, (ii) your Target Cryptoasset and (ii) the amount of the Source
-                    Cryptoasset you wish to exchange for that Target Cryptoasset. You can then ask
-                    us to provide you with a proposed estimated exchange rate. This exchange rate
-                    reflects the rate(s) provided by the third party exchange(s) we are connected
-                    with.
-                </li>
-                <li>
-                    If you instruct us to proceed with an Exchange Swap, we will transfer the Source
-                    Cryptoasset from your OpenChat Wallet to the relevant third party exchange to
-                    make the conversion. You will then receive the Target Cryptoasset back to your
-                    OpenChat Wallet.
-                </li>
-                <li>
-                    Where we use a third party exchange to complete an Exchange Swap, please note
-                    that the exchange rates provided by us are an estimated rate at the time you
-                    request the rate. The actual rate provided will be determined at the time you
-                    instruct us to make the Exchange Swap. <strong>
-                        As the prices of Cryptoassets can be highly volatile, we do not guarantee
-                        that the amount of Target Cryptoassets you acquire from an Exchange Swap
-                        will be the same as that set out in the proposed exchange rate. Rather, it
-                        will reflect the rate actually obtained when the Exchange Swap is actually
-                        executed by the third party exchange (which may result you in receiving less
-                        of the Target Cryptoasset than that predicted by the estimated exchange rate
-                        you receive
-                    </strong>).
-                </li>
-                <li>
-                    <p>
-                        In order to engage in a P2P Swap (either by making a Swap Offer or accepting
-                        a Swap Offer), you need to have a Diamond Membership. A “Swap Offer”, is a
-                        communication which you, if you hold a Diamond Membership, can make to other
-                        users in chat(s) with the following information:
-                    </p>
-                    <ul class="custom_list" style={"--prefix: '1.6.'"}>
-                        <li>your Source Cryptoasset;</li>
-                        <li>your Target Cryptoasset;</li>
-                        <li>the amount of the Source Cryptoasset you are willing to exchange;</li>
-                        <li>the amount of the Target Cryptoasset you wish to acquire; and</li>
-                        <li>the chat(s) who can accept the Swap Offer.</li>
-                    </ul>
-                </li>
-                <li>
-                    <p>Upon making a Swap Offer:</p>
-                    <ul class="custom_list" style={"--prefix: '1.7.'"}>
-                        <li>
-                            the amount of the Source Cryptoasset you are willing to exchange is sent
-                            from your OpenChat Wallet into escrow.
-                        </li>
-                        <li>
-                            a message containing the details of the Swap Offer is sent to the users
-                            in the relevant chat(s), who have the ability to accept your Swap Offer
-                            at their discretion.
-                        </li>
-                        <li>
-                            you have the ability to cancel the Swap Offer for as long as no other
-                            user has accepted the Swap Offer, in which case the Source Cryptoasset
-                            shall be returned to your OpenChat Wallet.
-                        </li>
-                    </ul>
-                </li>
-                <li>
-                    <p>
-                        As soon as another user accepts your Swap Offer, the P2P Swap is processed,
-                        meaning that:
-                    </p>
-                    <ul class="custom_list" style={"--prefix: '1.8.'"}>
-                        <li>
-                            the Target Cryptoassets will be transferred from their wallet to escrow;
-                        </li>
-                        <li>
-                            the Source Cryptoassets will be transferred from escrow to the other
-                            user’s OpenChat Wallet; and
-                        </li>
-                        <li>
-                            the Target Cryptoassets will be transferred from escrow to your OpenChat
-                            Wallet.
-                        </li>
-                    </ul>
-                </li>
-            </ul>
-        </li>
-        <li>
-            <h3>Conditions for making a swap</h3>
-            <ul class="custom_list" style={"--prefix: '2.'"}>
-                <li>
-                    <p>
-                        By using our Services to make a Swap, you are dealing in Cryptoassets and
-                        clause A 6 shall apply. In addition, you acknowledge and accept that:
-                    </p>
-                    <ul class="custom_list" style={"--prefix: '2.1.'"}>
-                        <li>
-                            you will only able to make a Swap if there are sufficient Cryptoassets
-                            stored in your OpenChat Wallet to do so;
-                        </li>
-                        <li>
-                            you understand that once an offer for a Swap has been accepted, you are
-                            not able to cancel that Swap (or otherwise ask for a refund), and as
-                            such before making any Swap or Swap Offer you should make sure that you
-                            are certain you want to proceed;
-                        </li>
-                        <li>
-                            whilst we may cancel an Exchange Swap where there is a Manifest Error in
-                            the price of a Cryptoasset as shown by us (in which case we will give
-                            you the ability as soon as commercially practicable to acquire the
-                            Cryptoasset at the correct price, and we shall notify you of any
-                            cancellation as soon as we reasonably can by email or via the OpenChat
-                            Platform), you do not have the right to cancel an accepted Swap Offer
-                            because of a Manifest Error (and so you should be careful to ensure that
-                            the details of any Swap Offer you make are accurate); and
-                        </li>
-                        <li>
-                            we reserve the right to make changes to these Terms to reflect changes
-                            to the third party exchanges available to us and their offerings.
-                        </li>
-                    </ul>
-                </li>
-                <li>
-                    <p>As long as we act in good faith, we do not accept responsibility for:</p>
-                    <ul class="custom_list" style={"--prefix: '2.2.'"}>
-                        <li>our Services being interrupted;</li>
-                        <li>any Swap not being executed or accepted by any counterparty;</li>
-                        <li>any delay in processing a Swap;</li>
-                        <li>any lack of liquidity in any market for a Cryptoasset; or</li>
-                        <li>
-                            our refusal to carry out any Swap for you if we believe it is in breach
-                            of these Terms.
-                        </li>
-                    </ul>
-                </li>
-            </ul>
-        </li>
-    </ul>
-
-    <HashLinkTarget {onCopyUrl} id="5">
-        <h2>Section E: Additional terms for dealing in CHAT</h2>
-    </HashLinkTarget>
-    <ul class="custom_list bold" style={"--prefix: 'E'; --suffix: ''"}>
-        <li>
-            <h3>Introduction</h3>
-            <ul class="custom_list" style={"--prefix: '1.'"}>
-                <li>This section of these Terms will apply whenever you deal in CHAT.</li>
-            </ul>
-        </li>
-        <li>
-            <h3>Conditions for dealing in CHAT</h3>
-            <ul class="custom_list" style={"--prefix: '2.'"}>
-                <li>
-                    <p>
-                        By dealing in CHAT, you are dealing in Cryptoassets and clause A 6 shall
-                        apply. In addition, you acknowledge and accept that:
-                    </p>
-                    <ul class="custom_list" style={"--prefix: '2.1.'"}>
-                        <li>
-                            you have the necessary and relevant experience, knowledge and
-                            understanding to deal in CHAT;
-                        </li>
-                        <li>
-                            other than as set out in these Terms, you are not relying upon any other
-                            representation or warranty by OpenChat or any other person, written or
-                            otherwise, in determining whether to deal in CHAT, and have reached your
-                            independent view regarding that dealing in CHAT is right for you;
-                        </li>
-                        <li>
-                            you accept that CHAT is created and you obtain CHAT on an “as is” basis.
-                            Therefore, provided we act in good faith in accordance with these Terms,
-                            you accept that OpenChat is providing CHAT without being able to provide
-                            any warranties in relation to them, including, but not limited to,
-                            title, merchantability or fitness for a particular purpose;
-                        </li>
-                        <li>
-                            OpenChat has not made, and does not make, any representations that you
-                            will be able to generate a return on your obtaining of CHAT, and you
-                            should not expect a return or any kind of cancellation or refund rights
-                            in relation to the CHAT;
-                        </li>
-                        <li>
-                            whilst OpenChat will use reasonable endeavours to ensure that CHAT will
-                            have the utility reflected in these Terms, the features of the CHAT are
-                            subject to change, modification, amendment, alternation or
-                            supplementation at any time (at OpenChat’s sole discretion);
-                        </li>
-                        <li>
-                            these Terms do not constitute a prospectus, offering memorandum or
-                            private placement memorandum of any sort and does not pertain in any way
-                            to be any kind of regulated offering;
-                        </li>
-                        <li>
-                            you understand that the CHAT is not being offered as securities, e-money
-                            or stablecoins; and
-                        </li>
-                        <li>
-                            you accept that we reserve the right to create new classes of
-                            cryptoassets other than CHAT under separate brands and with features
-                            outside of the scope of these Terms and nothing in these Terms shall
-                            entitle you to have any rights (of whatever nature) in relation to such
-                            cryptoassets.
-                        </li>
-                    </ul>
-                </li>
-                <li>
-                    Any sale of CHAT by you to another person is subject to these Terms, and you are
-                    responsible for ensuring that any acquirer of CHAT is aware of the fact that in
-                    doing so they accept, and are subject to, these Terms.
-                </li>
-            </ul>
-        </li>
-    </ul>
-
-    <HashLinkTarget {onCopyUrl} id="6">
-        <h2>Section F: Additional terms for Diamnond membership holders</h2>
-    </HashLinkTarget>
-    <ul class="custom_list bold" style={"--prefix: 'F'; --suffix: ''"}>
-        <li>
-            <h3>Introduction</h3>
-            <ul class="custom_list" style={"--prefix: '1.'"}>
-                <li>This section of these Terms will apply if you hold a Diamond Membership.</li>
-                <li>
-                    <p>As a Diamond Membership holder, you are eligible to:</p>
-
-                    <ul class="custom_list" style={"--prefix: '1.2.'"}>
-                        <li>
-                            earn rewards in return for referring other users to become Diamond
-                            Membership holders. Rewards are 50% of the referred member’s total
-                            Diamond Membership payments for the first year after the referral is
-                            completed. Rewards are paid out in either CHAT or ICP, depending on
-                            whether the referred member uses CHAT or ICP to purchase the Diamond
-                            Membership;
-                        </li>
-                        <li>
-                            create public Groups (in addition to the general ability to create
-                            private Groups);
-                        </li>
-                        <li>create public and / or private Communities;</li>
-                        <li>create Gated Groups and Gated Communities;</li>
-                        <li>make video and voice calls;</li>
-                        <li>
-                            make or accept Swap Offers in relation to a P2P Swaps (see section D for
-                            further information); and
-                        </li>
-                        <li>
-                            access any other features that we make available from time to time at
-                            our discretion to holders of a Diamond Membership (subject to your
-                            acceptance of any additional terms which may apply to such).
-                        </li>
-                    </ul>
-                </li>
-            </ul>
-        </li>
-        <li>
-            <h3>Conditions for becoming a Diamond membership holder</h3>
-            <ul class="custom_list" style={"--prefix: '2.'"}>
-                <li>
-                    We will charge you in advance for your Diamond Membership and we will
-                    automatically deduct the fee (as specified on the fees page on the OpenChat
-                    Platform and payable in either CHAT or ICP) directly from your OpenChat Wallet
-                    at the start of your membership. This fee shall cover your Diamond Membership
-                    for the membership period specified when you sign up for Diamond Membership.
-                </li>
-                <li>
-                    <p>In the event that we suspend the provision of Diamond Membership to you:</p>
-                    <ul class="custom_list" style={"--prefix: '2.2.'"}>
-                        <li>
-                            because you breach the terms of this Agreement, you will forfeit your
-                            Diamond Membership (and shall not be entitled to any refund in respect
-                            of such).
-                        </li>
-                        <li>
-                            for any other reason, the membership period shall be extended
-                            accordingly so that you do not pay any fee in respect of a time period
-                            during which the Diamond Membership is suspended.
-                        </li>
-                    </ul>
-                </li>
-                <li>
-                    Your Diamond Membership cannot be transferred or assigned. To the extent
-                    permitted by Applicable Law, we do not provide any refund rights in relation to
-                    your purchase of a Diamond Membership, and we note that the Diamond Membership
-                    is contingent on the operation and value of CHAT and ICP which is dependent on
-                    fluctuations in the financial market which cannot be controlled by us.
-                </li>
-            </ul>
-        </li>
-        <li>
-            <h3>Conditions for creating groups and communities</h3>
-            <ul class="custom_list" style={"--prefix: '3.'"}>
-                <li>
-                    <p>As the creator of a Group, Community or Channel, you may:</p>
-                    <ul class="custom_list" style={"--prefix: '3.1.'"}>
-                        <li>
-                            determine the rules that users must comply with in order to send
-                            messages in the Group, Community or Channel;
-                        </li>
-                        <li>
-                            manage and control the operation of the Group, Community or Channel; and
-                        </li>
-                        <li>
-                            assign functions to admins and moderators at their discretion to assist
-                            with the management of the Group, Community or Channel,
-                        </li>
-                        <li>and in doing so you accept that you are responsible for:</li>
-                        <li>the Groups, Communities, and Channels you administer;</li>
-                        <li>
-                            ensuring that the rules of the Groups, Communities and Channels you
-                            administer are appropriately enforced; and
-                        </li>
-                        <li>
-                            dealing with any complaints or queries received from participants in
-                            relation to the Groups, Communities, and Channels you administer.
-                        </li>
-                    </ul>
-                </li>
-                <li>
-                    Notwithstanding the rest of this clause F 3, we may require you to change the
-                    rules of any Group, Community or Channel, or we may require that certain
-                    jurisdictions be geo-blocked from a Group, Community or Channel, if we in good
-                    faith believe that this is required to comply with Applicable Law. We also have
-                    the right to require you to resolve any complaint or query in a particular way,
-                    if we in good faith believe that this is required to protect the rights of any
-                    person. You shall comply with any such requirement we impose promptly, and
-                    ensure that we are provided with full, complete, accurate and up to date
-                    responses to any queries we make in deciding whether to place such a requirement
-                    on you or any Group or Community. We do not accept any liability for our
-                    exercise of our rights under this clause F 3.
-                </li>
-            </ul>
-        </li>
-    </ul>
-
-    <HashLinkTarget {onCopyUrl} id="7">
-        <h2>Section G: Participating in the OpenChat DAO</h2>
-    </HashLinkTarget>
-    <ul class="custom_list bold" style={"--prefix: 'G'; --suffix: ''"}>
-        <li>
-            <h3>Introduction</h3>
-            <ul class="custom_list" style={"--prefix: '1.'"}>
-                <li>
-                    This section of these Terms will apply if you participate in the governance of
-                    the OpenChat DAO.
-                </li>
-            </ul>
-        </li>
-        <li>
-            <h3>Location of information regarding the DAO</h3>
-            <ul class="custom_list" style={"--prefix: '2.'"}>
-                <li>
-                    <p>For information regarding:</p>
-                    <ul class="custom_list" style={"--prefix: '2.1.'"}>
-                        <li>
-                            the rules setting out the operation and governance of the OpenChat DAO,
-                            please see: <a href="https://oc.app/blog/governance"
-                                >https://oc.app/blog/governance</a
-                            >; and
-                        </li>
-                        <li>
-                            how holders of CHAT may vote on Governance Matters, please see:
-                            <a href="https://oc.app/blog/governance"
-                                >https://oc.app/blog/governance</a
-                            >,
-                        </li>
-                    </ul>
-                    <p>
-                        and in participating in the OpenChat DAO you agree to and are bound by these
-                        rules as amended from time to time, which shall be considered as part of
-                        these Terms.
-                    </p>
-                </li>
-            </ul>
-        </li>
-        <li>
-            <h3>Conditions for using the voting platform</h3>
-            <ul class="custom_list" style={"--prefix: '3.'"}>
-                <li>
-                    You understand that the Voting Platform you use to vote may be operated by a
-                    third party. As such, you may be subject to the additional terms of the third
-                    party operating the Voting Platform. Where this is the case, and you confirm
-                    that (i) you accept and will comply with these additional terms as applicable to
-                    you and (ii) you understand that we are not responsible for them.
-                </li>
-            </ul>
-        </li>
-    </ul>
-
-    <HashLinkTarget {onCopyUrl} id="8">
-        <h2>Schedule 1: Risks relating to cryptoassets</h2>
-    </HashLinkTarget>
-    <p>
-        <strong>
-            DEALING IN CRYPTOASSETS INVOLVES A HIGH DEGREE OF RISK, AND, THEREFORE, SHOULD BE
-            UNDERTAKEN ONLY IF YOU ARE CAPABLE OF EVALUATING THE RISKS INVOLVED AND ABLE TO BEAR THE
-            RISK OF A COMPLETE LOSS OF ALL CAPITAL USED TO PARTICIPATE IN CRYPTOASSETS.
-        </strong>
-    </p>
-    <p>
-        <strong>
-            YOU SHOULD CAREFULLY CONSIDER THE RISKS DESCRIBED BELOW BEFORE DEALING IN CRYPTOASSETS.
-            IT SHOULD BE NOTED THAT THE LIST OF RISK FACTORS DESCRIBED HEREUNDER IS NOT INTENDED TO
-            BE EXHAUSTIVE AND DOES NOT NECESSARILY INCLUDE ALL THE RISKS TO WHICH YOU MAY BE EXPOSED
-            WHEN DEALING IN CRYPTOASSETS.
-        </strong>
-    </p>
-    <p>
-        We expressly disclaim all responsibility for any loss or damage of any kind whatsoever
-        arising directly or indirectly from: (i) reliance on any information contained in this
-        Schedule 1, (ii) any error, omission or inaccuracy in any such information or (iii) any
-        action resulting from such information.
-    </p>
-    <p>
-        Please note that in addition to the risks below, there may be other risks associated with
-        your dealing in Cryptoassets and using our Services generally, including those that we
-        cannot reasonably foresee. Additional risks may also materialise as unanticipated variations
-        or combinations of the risks discussed below.
-    </p>
-    <p>
-        By participating in these Terms, or by otherwise dealing in Cryptoassets, including CHAT,
-        you expressly acknowledge and assume the following risks, which we shall not be liable
-        should they materialise:
-    </p>
-    <p>
-        <strong> Risks applicable to all Cryptoassets (including CHAT) </strong>
-    </p>
-
-    <ul class="custom_list" style={"--prefix: ''"}>
-        <li>
-            <h3>General risks</h3>
-            <p>
-                The value of the Cryptoassets can fall as well as rise. If you buy Cryptoassets, you
-                may not get back the full amount you spent on them, or anything at all. The value of
-                Cryptoassets may depend on fluctuations in the financial markets, or other economic
-                factors, which are outside our control. The past performance of a Cryptoassets is
-                not a guide to the future performance of Cryptoassets.
-            </p>
-        </li>
-        <li>
-            <h3>The prices of Cryptoassets are extremely volatile</h3>
-            <p>
-                Fluctuations in the price of Cryptoassets are subject to significant price
-                volatility. The prices of Cryptoassets have historically been subject to dramatic
-                fluctuations and are highly volatile. A range of factors may influence the market
-                price, if any, of Cryptoassets , including, but not limited to: (i) the ability (if
-                any) of Cryptoassets to trade on a secondary market; (ii) global supply and demand
-                (iii) general expectations with respect to the rate of inflation, interest rates and
-                exchange rates; (iv) changes in the software, software requirements or hardware
-                requirements underlying Cryptoassets; (v) changes in the rights, obligations,
-                incentives, or rewards for holders of Cryptoassets;(vii) interruptions in service
-                from or failures of exchanges on which Cryptoassets are traded; (viii) investment
-                and trading activities of large purchasers, including private and registered funds,
-                that may directly or indirectly invest in Cryptoassets; (ix) monetary policies of
-                governments, trade restrictions, currency devaluations and revaluations; (x)
-                regulatory measures, if any, that affect the use of Cryptoassets and changes in
-                Applicable Law; (xi) global or regional political, economic or financial events and
-                situations; and (x) expectations among participants that the value of a particular
-                Cryptoasset or Cryptoassets generally will soon change. A decrease in the price of a
-                single cryptoasset may cause volatility in the entire cryptoasset industry and may
-                affect the Cryptoassets available via our Services. Volatility in the price of
-                Cryptoassets may result in significant loss over a short period of time.
-            </p>
-        </li>
-        <li>
-            <h3>
-                Risk of losing access to Cryptoassets due to loss of private key(s) and wallet(s)
-            </h3>
-            <p>
-                A private key, or a combination of private keys, is necessary to deal in
-                Cryptoassets. Accordingly, loss of requisite private key(s) associated with your
-                digital wallet or vault storing Cryptoassets will result in loss of such
-                Cryptoassets. Moreover, any third party that gains access to such private key(s),
-                including by gaining access to login credentials of a hosted wallet service you use
-                (including the OpenChat Wallet), may be able to misappropriate your Cryptoassets.
-            </p>
-            <p>
-                Any errors or malfunctions caused by or otherwise related to the wallet you use to
-                receive and store Cryptoassets, including your own failure to properly maintain or
-                use such wallet, may also result in the loss of your Cryptoassets. Failure to
-                precisely follow any procedures set forth by us for dealing in Cryptoassets,
-                including, for instance, providing an incorrect wallet address, or using
-                incompatible wallet(s), may result in the loss of Cryptoassets you hold.
-            </p>
-        </li>
-        <li>
-            <h3>Regulatory risks</h3>
-            <p>
-                Regulation of Cryptoassets and the offering thereof, as well as blockchain
-                technologies, and cryptoasset exchanges is currently underdeveloped and likely to
-                rapidly evolve. Regulation varies significantly between different jurisdictions and
-                is subject to significant uncertainty. Regulators may in the future adopt laws,
-                regulations, guidance or other actions that may severely impact the development,
-                operations and growth of the OpenChat Platform and the adoption and utility of
-                Cryptoassets.
-            </p>
-        </li>
-        <li>
-            <h3>Risks associated with the blockchain protocol</h3>
-            <p>
-                Because Cryptoassets are based on blockchain protocols, any malfunction, breakdown
-                or abandonment of a blockchain protocol may have a material adverse effect on
-                Cryptoassets. Moreover, advances in cryptography, or technical advances such as the
-                development of quantum computing, could present risks to Cryptoassets by rendering
-                ineffective the cryptographic consensus mechanism that underpins the blockchain
-                protocol.
-            </p>
-        </li>
-        <li>
-            <h3>Risk of hacking and software and security weaknesses</h3>
-            <p>
-                Hackers or other malicious groups or organizations may attempt to interfere with
-                Cryptoassets in a variety of ways, including malware attacks, denial of service
-                attacks, consensus-based attacks, Sybil attacks, smurfing and spoofing, as well as
-                attacks which overpower the consensus-based mechanism on which the blockchain in
-                built and attacks which interfere with or otherwise cause nodes to malfunction
-                (nodes are computers / hardware devices that help maintain the blockchain).
-            </p>
-            <p>
-                There is also an inherent risk that the software and related technologies and
-                theories we use could contain Viruses or Vulnerabilities. Viruses or Vulnerabilities
-                could cause, inter alia, complete loss of Cryptoassets, or could negatively affect
-                the OpenChat Platform.
-            </p>
-        </li>
-        <li>
-            <h3>Other potential risks applicable to Cryptoassets</h3>
-            <p>
-                In addition to the risks included in this Schedule 1, there are other risks
-                associated with dealing in Cryptoassets (including CHAT), including those that we
-                cannot reasonably foresee. Additional risks may also materialize as unanticipated
-                variations or combinations of the risks discussed above in this Schedule 1.
-            </p>
-            <p>
-                Where you deal in any Cryptoasset you should take care to understand the risks
-                involved. In this respect, we note some of the additional specific risks relevant to
-                CHAT. In relation to Cryptoassets other than CHAT, it is usual for the issuer of the
-                Cryptoasset to provide an explanation of the risks involved (or if they have not,
-                this can be an indicator that a Cryptoasset is particularly risky as there has been
-                a lack of consideration of the risks relevant to that Cryptoasset). By dealing in
-                any Cryptoasset, you confirm to us that you have taken to time to understand, and
-                accept, the risks involved (including in respect of the risks as explained by the
-                issuer of the Cryptoasset).
-            </p>
-        </li>
-        <li>
-            <h3>Forks and Airdrops</h3>
-            <p>
-                The underlying protocols of Cryptoassets may be subject to substantial changes in
-                their operating rules (called a “forks”), and these may alter the value or function
-                of a Cryptoasset. A fork may result in multiple versions of a Cryptoasset, leading
-                to volatility as one version becomes dominant over another, which may lose its
-                value.
-            </p>
-            <p>
-                There may be additional distributions (called an “airdrop”) made to holders of a
-                particular Cryptoasset, which may be a new variant of a Cryptoasset or a further
-                quantity of the same Cryptoasset. The (anticipated) occurrence of an airdrop may
-                impact the value of the Cryptoasset(s) affected by that airdrop.
-            </p>
-        </li>
-    </ul>
-
-    <p>
-        <strong>CHAT specific risks</strong>
-    </p>
-    <p>
-        As noted elsewhere in these Terms, CHAT is not being structured or sold as securities nor
-        any other form of regulated investment product. Accordingly, there has not been any
-        consideration as to whether the CHAT is a suitable or an appropriate thing for you to deal
-        in. In addition to the General Cryptoasset risks, you should be aware of the following risks
-        in relation to CHAT specifically:
-    </p>
-    <ul class="custom_list" style={"--prefix: ''"}>
-        <li>
-            <h3>Lack of operating history</h3>
-            <p>
-                Purchases of CHAT involve a high degree of risk. The value of CHAT is reliant on the
-                success of us developing our business. As such, CHAT has all of the risks and
-                uncertainties normally associated with a developing business, including in respect
-                of potential difficulties operating the OpenChat Platform, lack of name recognition,
-                lack of adequate capital to progress the business, and difficulties in complying
-                with all Applicable Law. Financial and operational risks confronting start-ups are
-                significant and we are not immune to these. The market in which we compete is highly
-                competitive, and the percentage of companies that survive and prosper is small.
-            </p>
-            <p>
-                Our lack of an operating history may make it difficult for you to evaluate our
-                business and long-term operating prospects and the prospects of the OpenChat
-                Platform in connection with acquiring CHAT. These risks include, but are not limited
-                to, our ability to: (i) increase revenues and manage costs relating to the operation
-                of the OpenChat Platform; (ii) increase awareness of the OpenChat Platform and CHAT;
-                (iii) offer compelling content on the OpenChat Platform; (iv) maintain current and
-                develop new strategic relationships; (v) respond effectively to competitive
-                pressures; (vi) continue to develop and upgrade technology; and (vii) raise any
-                additional capital as potentially required. There are no assurances that our
-                business strategy will be successful, nor that we will address these risks
-                successfully during the operation of the OpenChat Platform and CHAT.
-            </p>
-        </li>
-        <li>
-            <h3>Risks associated with uncertain regulation</h3>
-            <p>
-                The regulatory status of the CHAT may be unclear or unsettled in certain
-                jurisdictions. It is difficult to predict how or whether regulatory agencies may
-                apply existing regulation with respect to CHAT and its applications, including the
-                OpenChat Platform. It is likewise difficult to predict how or whether legislatures
-                or regulatory agencies may implement changes to law and regulation affecting
-                distributed ledger technology and its applications. Regulatory actions could
-                negatively impact CHAT in various ways, including, for purposes of illustration
-                only, through a determination that CHAT are a regulated financial instrument that
-                require registration or licensing. We may cease operations in a jurisdiction in the
-                event that regulatory actions, or changes to Applicable Law, make it illegal to
-                operate in such jurisdiction, or commercially undesirable to obtain the necessary
-                regulatory approval(s) to operate in such jurisdiction.
-            </p>
-            <p>
-                More generally, the OpenChat Platform is pioneered on new and evolving technology,
-                which increases legal complexity, particularly as the Applicable Law is subject to
-                interpretation and change. This could result in a variety of adverse consequences,
-                including civil penalties and fines as well as the requirement that some or all of
-                our Services by restricted or prohibited in certain jurisdictions. These
-                developments could have an adverse effect on the operations of the OpenChat Platform
-                and the value of CHAT.
-            </p>
-        </li>
-        <li>
-            <h3>Legal proceedings and litigation</h3>
-            <p>
-                From time to time, we may be involved in legal proceedings or litigation. The
-                results of such legal proceedings and claims cannot be predicted with certainty and,
-                regardless of the outcome, legal proceedings could have an adverse impact on our
-                business, because of defence and settlement costs, diversion of resources, and other
-                factors. Generally, if third parties are successful in their claims, we may have to
-                pay substantial damages, account for profits derived from the alleged infringing
-                acts, and cease to use certain technologies or take other actions that could be
-                detrimental to our business. If there is an intellectual property infringement
-                claim, or to avoid such claims, we may be prohibited from selling or licensing to
-                others some or all Services we develop, unless the patent or copyright holder grants
-                a license of the relevant intellectual property to us, which the patent or copyright
-                holder is not obligated to do. There also may be adverse publicity associated with
-                litigation that could negatively affect people’s perception of us, the OpenChat
-                Platform and/or CHAT, regardless of whether the allegations are valid or we are
-                ultimately found liable. Accordingly, litigation may adversely affect our business
-                and financial condition.
-            </p>
-        </li>
-        <li>
-            <h3>Intellectual property</h3>
-            <p>
-                Companies, organisations, or individuals, including competitors, may hold or obtain
-                patents, trademarks, or other proprietary rights that would prevent, limit, or
-                interfere with our ability to make, use, develop, sell, and / or market CHAT and /
-                or the OpenChat Platform, which could make it more difficult for us to operate our
-                business. These third parties may have applied for, been granted, or obtained,
-                patents that relate to intellectual property, and which compete with our
-                intellectual property or technology. This may require us to develop or obtain
-                alternative technology, or obtain appropriate licenses under these patents, which
-                may not be available on acceptable terms or at all. Such a circumstance may result
-                in us having to significantly increase development efforts and resources to redesign
-                the technology in order for us to safeguard our competitive edge against competitors
-                in the same industry. There is a risk that our means of protecting intellectual
-                property rights may not be adequate, and weaknesses or failures in this area could
-                adversely affect our business or reputation, financial condition, the operations of
-                the OpenChat Platform and the development of CHAT.
-            </p>
-            <p>
-                From time to time, we may receive communications from holders of patents or
-                trademarks regarding their proprietary rights. Companies holding patents or other
-                intellectual property rights may bring suits alleging infringement of such rights or
-                otherwise assert their rights and urge us to take licenses. In addition, if we are
-                determined to have infringed upon a third party's intellectual property rights, we
-                may be required to cease operating the OpenChat Platform or certain Services, pay
-                substantial damages, seek a license from the holder of the infringed intellectual
-                property right (which license may not be available on reasonable terms or at all),
-                and/or establish and maintain alternative branding for items relating to the
-                OpenChat Platform and our Services. We may need to file lawsuits to protect our
-                intellectual property rights from infringement from third parties, which could be
-                expensive, time consuming, and distract management's attention from our core
-                operations.
-            </p>
-            <p>
-                Our ability to serve our customers and the OpenChat Platform’s participants will
-                depend upon our intellectual property. The steps we take to protect our intellectual
-                property rights may be inadequate. In order to protect our intellectual property
-                rights, we may be required to spend significant resources to monitor and protect
-                these rights. Litigation brought to protect and enforce our intellectual property
-                rights could be costly, time-consuming and distracting to management and could
-                result in the impairment or loss of portions of our intellectual property.
-                Furthermore, our efforts to enforce our intellectual property rights may be met with
-                defences, counterclaims, and countersuits attacking the validity and enforceability
-                of our intellectual property rights. Our failure to secure, protect, and enforce our
-                intellectual property rights could seriously harm the CHAT brand and adversely
-                affect the development of the CHAT.
-            </p>
-        </li>
-        <li>
-            <h3>
-                CHAT will have no refund rights or similar features and may have limited liquidity
-            </h3>
-            <p>
-                After issuance, to the extent permitted by Applicable Law you will have no right to
-                return your CHAT to us or to receive a refund or otherwise require us to exchange
-                CHAT for a certain value. As a result, if there is not sufficient demand or interest
-                in the OpenChat Platform and CHAT, or if there are limits on the transferability of,
-                or limited liquidity for, CHAT, then you may lose all or a portion of your
-                investment.
-            </p>
-        </li>
-        <li>
-            <h3>Future distribution of CHAT and other types of token</h3>
-            <p>
-                The distribution by us of a substantial number of CHAT or additional types of token
-                could have an adverse effect on the value of CHAT. Any distribution of CHAT could
-                dilute your percentage interest in then-outstanding CHAT, if any, and have an
-                adverse effect on the market value of the CHAT. Additional new types of cryptoasset
-                may also impact the value of CHAT, and you have no rights in relation to such new
-                types of cryptoasset as a result of entering into these Terms.
-            </p>
-        </li>
-        <li>
-            <h3>Funding</h3>
-            <p>
-                We intend to use the amounts received from CHAT holders to fund the development of
-                our business and the OpenChat Platform. Amounts received from CHAT holders may be
-                converted into other cryptoassets or fiat currencies. If the value of cryptoassets
-                or fiat currencies fluctuate unfavourably this may mean that we may not be able to
-                fund business development and deployment as expected or may not be able to develop
-                the OpenChat Platform in the manner it intended, which may consequently impact the
-                value of CHAT.
-            </p>
-        </li>
-        <li>
-            <h3>Lack information for monitoring their CHAT</h3>
-            <p>
-                You may not be able to obtain all information you want from time to time regarding
-                the OpenChat Platform and / or CHAT. Even if you do receive such information, you
-                may not receive it on a timely basis. It is possible that you may not be aware of
-                materially adverse changes that have occurred with respect to the OpenChat Platform
-                and/or CHAT in a timely manner. As a result of these difficulties, as well as other
-                uncertainties, you may not have accurate or accessible information relating to your
-                purchase, which could prevent you from taking actions with the potential to prevent
-                adverse consequences relating to your holding of CHAT.
-            </p>
-        </li>
-        <li>
-            <h3>CHAT may not be classified as unregulated</h3>
-            <p>
-                Although we intend for CHAT to be classified as unregulated, the regulatory position
-                of cryptoassets can be uncertain and subject to change. This may, at a later date,
-                cause us to reclassify CHAT as a security, in which case CHAT may be subject to
-                restrictions on resale and transfer.
-            </p>
-        </li>
-        <li>
-            <h3>Voting power</h3>
-            <p>
-                Whilst CHAT allows CHAT holders to participate in the governance of the OpenChat DAO
-                by voting on proposals, each CHAT holder’s voting power is proportional to the
-                amount of CHAT they have deposited and locked. As such, there is a risk that a small
-                number of CHAT holders may be able to exercise the majority of the voting power from
-                time to time, meaning that other holders of CHAT cannot effectively influence the
-                governance of the OpenChat DAO, and devaluing the CHAT they hold.
-            </p>
-        </li>
-    </ul>
-
-    <HashLinkTarget {onCopyUrl} id="9">
-        <h2>Schedule 2: Content Standards</h2>
-    </HashLinkTarget>
-
-    <p>
-        A Contribution must comply with Applicable Law. In addition, the Content Standards below
-        must be complied with in spirit as well as to the letter. The Content Standards apply to
-        each part of any Contribution as well as to its whole. We will determine, at our discretion,
-        whether a Contribution breaches the Content Standards.
-    </p>
-    <p>A Contribution must not:</p>
-    <ul class="custom_list" style={"--prefix: ''"}>
-        <li>
-            threaten to harm another individual or group of people. This includes direct, indirect,
-            and suggestive threats.
-        </li>
-        <li>
-            solicit, share, or make attempts to distribute content that depicts, promotes, or
-            attempts to normalise child sexual abuse.
-        </li>
-        <li>post content that in any way sexualises children.</li>
-        <li>
-            share sexually explicit or sexually suggestive content without the subject’s knowledge
-            and consent, otherwise known as “revenge porn”. This includes the non-consensual
-            distribution of intimate media that was created either with or without an individual’s
-            consent.
-        </li>
-        <li>
-            share content that glorifies, promotes, or normalises suicide or other acts of physical
-            self-harm. This includes content that encourages others to cut, burn, or starve
-            themselves, as well as content that normalizes eating disorders, such as anorexia and
-            bulimia. Self-harm acts or threats used as a form of emotional manipulation or coercion
-            are also prohibited.
-        </li>
-        <li>
-            share real media depicting gore, excessive violence, or animal harm, especially with the
-            intention to harass or shock others.
-        </li>
-        <li>
-            promote, coordinate, or execute financial scams. Promoting a particular crypto token or
-            NFT does not break this rule in general.
-        </li>
-        <li>
-            be sent persistently as a spam message. This includes repeatedly sending the same or
-            meaningless messages, either in the same chat or across multiple chats.
-        </li>
-    </ul>
-
-    <HashLinkTarget {onCopyUrl} id="10">
-        <h2>Schedule 3: Chat features</h2>
-    </HashLinkTarget>
-    <p>
-        <strong
-            >PLEASE NOTE THAT THE BELOW REPRESENTS FEATURES OF CHAT AS AT THE CURRENT DATE OF THESE
-            TERMS. HOWEVER, THERE MAY BE LEGAL, REGULATORY OR COMMERCIAL REASONS WHY CHAT FEATURE
-            MAY IN THE FUTURE CHANGE FROM THE BELOW.</strong>
-    </p>
-    <p>CHAT gives CHAT holders the following rights:</p>
-    <p>CHAT may be:</p>
-    <ul class="custom_list" style={"--prefix: ''"}>
-        <li>
-            deposited and locked as neurons to participate in the OpenChat DAO governance by voting
-            on proposals;
-        </li>
-        <li>
-            distributed as a voting reward in accordance with the DAO governance rules as set out at
-            https://oc.app/blog/governance.
-        </li>
-        <li>used to purchase a Diamond Membership; and</li>
-        <li>
-            used to gain access to additional features that we may, at our discretion, make
-            available from time to time.
-        </li>
-    </ul>
-    <p>
-        Please see Section G: Participating in OpenChat DAO to find out where you can obtain
-        information on the OpenChat DAO.
-    </p>
-    <p>
-        <strong>
-            Please note that we have <em>no</em> obligation to give CHAT any rights or attributes other
-            than those outlined above, and CHAT shall not give you any rights in relation to any aspect
-            of any business conducted at any time by us other than as explicitly stated above.
-        </strong>
-    </p>
-
-    <HashLinkTarget {onCopyUrl} id="11">
-        <h2>Schedule 4: Multiple accounts</h2>
-    </HashLinkTarget>
-
-    <p>
-        You may not buy or sell OpenChat accounts, nor may you create multiple accounts on the
-        OpenChat Platform:
-    </p>
-    <ul class="custom_list" style={"--prefix: ''"}>
-        <li>that you aren't actively using</li>
-        <li>to squat on usernames with the intention of selling them</li>
-        <li>to farm tokens</li>
-        <li>to give the appearance of activity in a group/community</li>
-        <li>to DoS the platform or otherwise drain platform resources</li>
-        <li>any other nefarious purpose</li>
-    </ul>
-</div>
-
-<style lang="scss">
-    .preamble p {
-        margin-bottom: toRem(24);
-    }
-
-    .section {
-        h2,
-        h3 {
-            margin-bottom: $sp4;
-            display: inline-block;
-        }
-        p {
-            margin-bottom: $sp4;
-        }
-        h2 {
-            @include font(bold, normal, fs-120);
-        }
-
-        h3 {
-            @include font(bold, normal, fs-110);
-        }
-
-        .custom_list.bold > li > h3 {
-            padding-left: 60px;
-        }
-
-        .custom_list {
-            --suffix: ")";
-            list-style-type: none;
-            counter-reset: item;
-            @include font(book, normal, fs-100);
-            margin-bottom: $sp5;
-        }
-
-        .custom_list > li {
-            padding-left: 60px;
-            position: relative;
-            margin-bottom: $sp3;
-        }
-
-        .custom_list.bold > li {
-            padding-left: 0;
-        }
-
-        .custom_list > li::before {
-            content: var(--prefix) counter(item) var(--suffix);
-            counter-increment: item;
-            font-weight: normal;
-            position: absolute;
-            left: 0;
-        }
-
-        .custom_list.bold > li::before {
-            font-weight: bold;
-        }
-    }
-
-    .interpretation {
-        display: grid;
-        grid-template-columns: 1fr 2fr;
-        gap: $sp4;
-        margin-bottom: $sp4;
-
-        @include mobile() {
-            grid-template-columns: 1fr;
-            gap: $sp3;
-        }
-
-        :nth-child(2n-1) {
-            font-weight: bold;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/landingpages/blog/SignIn.svelte b/frontend/app/src/components/landingpages/blog/SignIn.svelte
deleted file mode 100644
index aaa8b18424..0000000000
--- a/frontend/app/src/components/landingpages/blog/SignIn.svelte
+++ /dev/null
@@ -1,163 +0,0 @@
-<script lang="ts">
-    import ExternalLink from "../ExternalLink.svelte";
-    import BlogScreenshot from "./BlogScreenshot.svelte";
-</script>
-
-<section>
-    <p>
-        In addition to Internet Identity, OpenChat users can now sign-in or sign-up using email, an
-        Ethereum wallet or a Solana wallet. Coming soon are, email recovery, sign-in with a simple
-        PassKey, flexible sessions and two-factor authentication (2FA).
-    </p>
-    <BlogScreenshot
-        caption="Sign in to OpenChat"
-        desktopUrl={"/assets/blog/signin/signin_desktop.png"}
-        mobileUrl={"/assets/blog/signin/signin_mobile.png"} />
-</section>
-<section>
-    <h2>Sign in with email</h2>
-    <p>
-        The default option for new sign-ups is email. Your email is not stored but is used to
-        generate a unique (and deterministic) identifier. A secure <ExternalLink
-            href="https://auth0.com/docs/authenticate/passwordless/authentication-methods/email-magic-link"
-            >magic link</ExternalLink>
-        including this identifier is sent to your email and is used to prove ownership of the email.
-        Having clicked the email link, enter a username to create your OpenChat account. No password
-        is required. To sign in at a later date, simply repeat the process by entering your email and
-        you will be sent a sign-in link.
-    </p>
-    <BlogScreenshot
-        caption="Sign in with email"
-        desktopUrl={"/assets/blog/signin/email_desktop.png"}
-        mobileUrl={"/assets/blog/signin/email_mobile.png"} />
-</section>
-<section>
-    <h2>Sign-in with II</h2>
-    <p>
-        <ExternalLink href="https://internetcomputer.org/internet-identity"
-            >Internet Identity</ExternalLink>
-        is the gold standard for signing in to apps on the Internet Computer. It is super secure and
-        soon will support
-        <ExternalLink href="https://en.wikipedia.org/wiki/Verifiable_credentials"
-            >verifiable credentials</ExternalLink> (VCs) This will allow users to acquire credentials/attributes
-        from a 3rd party "issuer" and share these securely with OpenChat or other “relying parties”.
-        Owners of OpenChat communities, channels and groups will be able to gate access using VCs. Some
-        examples:
-    </p>
-    <ul>
-        <li>Is the user over 18?</li>
-        <li>Are they a unique person?</li>
-        <li>Did they attend conference XYZ?</li>
-        <li>Are they an employee of ABC?</li>
-    </ul>
-    <p>
-        Going forwards the primary way to be eligible for airdrops on OpenChat will be to prove
-        unique personhood using a verified credential.
-    </p>
-</section>
-<section>
-    <h2>Sign-in with Ethereum wallet</h2>
-    <p>
-        For users coming from the Ethereum ecosystem, OpenChat now offers sign-in by Ethereum wallet
-        such as MetaMask, increasing the potential pool of OpenChat users. In the future, we
-        anticipate signing in with your Ethereum wallet will enable you to send/swap/tip/gift ETH
-        ecosystem tokens as you currently can with ICP tokens, albeit not so quickly or cheaply!
-    </p>
-    <BlogScreenshot
-        caption="Sign in with Ethereum wallet"
-        desktopUrl={"/assets/blog/signin/ethereum_desktop.png"}
-        mobileUrl={"/assets/blog/signin/ethereum_mobile.png"} />
-</section>
-<section>
-    <h2>Sign-in with Solana wallet</h2>
-    <p>See the Ethereum wallet above. The same goes for the Solana wallet and ecosystem!</p>
-    <BlogScreenshot
-        caption="Sign in with Solana wallet"
-        desktopUrl={"/assets/blog/signin/solana_desktop.png"}
-        mobileUrl={"/assets/blog/signin/solana_mobile.png"} />
-</section>
-<section>
-    <h2>What has changed?</h2>
-    <p>
-        Up until recently, to sign in to OpenChat, users would authenticate with II then use the
-        returned key to sign requests to OpenChat canisters. This worked fine, and was simple to
-        implement, but it prevented OpenChat from supporting things such as email account recovery,
-        or having multiple sign in options per account.
-    </p>
-    <p>
-        To solve this, we have introduced the <ExternalLink
-            href="https://github.com/open-chat-labs/open-chat/tree/master/backend/canisters/identity"
-            >Identity canister</ExternalLink> which can link multiple authentication identities to a
-        single OpenChat account, allowing users to sign in using any of them.
-    </p>
-    <p>
-        Now, when a user signs in to OpenChat, they first authenticate via their chosen provider,
-        then use the returned signing key to authenticate with the Identity canister. The Identity
-        canister checks which OpenChat account the key is linked to (or creates a new one) and
-        returns a new key which is used to sign requests to OpenChat canisters on behalf of the
-        user.
-    </p>
-    <p>
-        To generate email magic links, two private keys are used, one in the canister and one in
-        AWS. Using this mechanism, even someone with physical access to the nodes is unable to
-        generate valid links since they would not know the key in AWS. However, the emails
-        themselves are sent from AWS servers and as a result email sign-in is only as secure as
-        other web2 services. For the security paranoid it is recommended to use II.
-    </p>
-</section>
-<section>
-    <h2>Multiple sign-in providers</h2>
-    <p>
-        Now that multiple sign-in providers can be linked to the same OpenChat account the following
-        use cases will be supported.
-    </p>
-    <p>
-        Firstly, as a backup, in case you lose access to your account. Whilst II does allow you to
-        recover your account by seed phrase and to set up multiple devices, it isn't foolproof and
-        many users lost access when they changed mobile phone or laptop. Users will be able to
-        associate an email with their account for simple recovery. Even if your primary sign-in is
-        by email, you will be able to add an additional recovery email.
-    </p>
-    <p>
-        Secondly, to gain access to the specific features offered by a particular provider while
-        keeping the same OpenChat account. So for example, by signing in with II, users will be able
-        to provide Verifiable Credentials.
-    </p>
-</section>
-<section>
-    <h2>Simple Passkey</h2>
-    <p>
-        A <ExternalLink href="https://webauthn.me/passkeys">PassKey</ExternalLink> is a password replacement
-        typically using a biometric device for a faster, easier, and more secure user sign-in experience.
-        This is the same technology used by II but without the complication of "II anchors". Using a
-        PassKey won't be possible for sign-up but only as an additional provider. This is because if
-        you were to lose access to your PassKey device (say your phone or laptop) then you would lose
-        access to your OpenChat account. A good combination will be to sign up with an email and then
-        add a PassKey. The PassKey (e.g. a fingerprint scan) can be used day to day to provide quick
-        and secure access to your account, and if you ever lose access you can recover by email.
-    </p>
-</section>
-<section>
-    <h2>Enhanced session management</h2>
-    <p>
-        A "session" is the period you have been signed in for. This was limited by II to 30 days but
-        with the introduction of the Identity canister this can now be any duration. Some likely
-        options are:
-    </p>
-    <ul>
-        <li>
-            indefinite sessions which lasts until you manually sign out (default for mobile devices)
-        </li>
-        <li>30 day sessions (default for non-mobile devices)</li>
-        <li>secure mode which requires sign-in whenever you open OpenChat</li>
-    </ul>
-    <p>Also coming is the option to sign out of your account across all devices simultaneously.</p>
-</section>
-<section>
-    <h2>2FA</h2>
-    <p>
-        The new system will also support Two-factor authentication (2FA). Users will be able to
-        configure their accounts to require sign-in by 2 providers, say Metamask and a Passkey, or a
-        PassKey and an authenticator app.
-    </p>
-</section>
diff --git a/frontend/app/src/components/mobile/MobileLanding.svelte b/frontend/app/src/components/mobile/MobileLanding.svelte
deleted file mode 100644
index b1bcd0f949..0000000000
--- a/frontend/app/src/components/mobile/MobileLanding.svelte
+++ /dev/null
@@ -1,236 +0,0 @@
-<script lang="ts">
-    import { getContext } from "svelte";
-    import { openUrl } from "tauri-plugin-oc-api";
-    import { type OpenChat } from "@client";
-    import FancyLoader from "../icons/FancyLoader.svelte";
-    import Button from "../Button.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    const iiUrl = "https://internetcomputer.org/";
-    const ocUrl = "https://oc.app/home";
-
-    function openInBrowser(e: MouseEvent, url: string) {
-        openUrl({ url });
-        e.preventDefault();
-    }
-
-    function getStarted() {
-        if (client.isNativeAndroid()) {
-            console.log("TODO");
-        }
-    }
-</script>
-
-{#snippet logo(label: string = "OpenChat")}
-    <div class="logo">
-        <div class="img">
-            <FancyLoader loop={false} />
-        </div>
-        <h1>{label}</h1>
-    </div>
-{/snippet}
-
-{#snippet orSeparator(label: string = "or")}
-    <div class="or-separator">
-        <div class="line"></div>
-        <div class="label">{label}</div>
-        <div class="line"></div>
-    </div>
-{/snippet}
-
-<div class="view">
-    <div class="bg"></div>
-    <div class="body">
-        <div class="content -landing">
-            {@render logo()}
-            <h2 class="title">Where web3 communicates</h2>
-            <p class="blurb">
-                OpenChat is a fully featured chat application running end-to-end on the <a
-                    onclick={(e) => openInBrowser(e, iiUrl)}
-                    rel="noreferrer"
-                    href={iiUrl}>
-                    Internet Computer
-                </a> blockchain.
-            </p>
-        </div>
-        <div class="buttons">
-            <button class="btn" onclick={getStarted}>
-                <span class="label">Get started</span>
-            </button>
-            {@render orSeparator("for more info")}
-            <Button cls="btn -hollow" hollow onClick={(e) => openInBrowser(e, ocUrl)}
-                >Visit OpenChat Web</Button>
-        </div>
-    </div>
-</div>
-
-<style lang="scss">
-    @mixin btn-gradient {
-        background: #833ab4;
-        background: linear-gradient(
-            90deg,
-            rgba(131, 58, 180, 1) 0%,
-            rgba(253, 29, 29, 1) 75%,
-            rgba(252, 176, 69, 1) 100%
-        );
-    }
-
-    .view {
-        display: flex;
-        flex-direction: column;
-        position: relative;
-        width: 100%;
-        height: 100vh;
-        overflow: hidden;
-        justify-content: flex-end;
-    }
-
-    .bg {
-        z-index: 0;
-        filter: blur(8px);
-        position: absolute;
-        /* scale up to hide the halo effect that happens with blured elements */
-        top: -50px;
-        right: -40px;
-        bottom: -10px;
-        left: -20px;
-        background-size: contain;
-        background-position-y: -255px;
-        background-repeat: no-repeat;
-        background-image: url("/assets/screenshots/intro_light.png");
-
-        @media (prefers-color-scheme: dark) {
-            background-image: url("/assets/screenshots/intro_dark.png");
-        }
-
-        contain: paint; /* Prevents blur overflow from affecting layout */
-        pointer-events: none;
-    }
-
-    .body {
-        z-index: 1;
-        display: flex;
-        flex-direction: column;
-        height: 70vh;
-        gap: $sp8;
-        padding: $sp6 $sp6 $sp8;
-        background-color: var(--landing-bg);
-        border-radius: 2rem 2rem 0 0;
-        box-shadow: 0 -1.5rem 2.5rem rgb(77 108 188);
-
-        @media (prefers-color-scheme: dark) {
-            box-shadow: 0 -1.5rem 2.5rem rgb(70 69 69);
-        }
-
-        .content {
-            display: flex;
-            flex-direction: column;
-            gap: $sp5;
-            margin-top: auto;
-        }
-    }
-
-    .logo {
-        gap: $sp3;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-    }
-
-    .btn {
-        display: flex;
-        padding: 0.5rem 2rem;
-        border: none;
-        min-height: 45px;
-        align-items: center;
-        border-radius: 0.25rem;
-        color: white;
-
-        @include btn-gradient;
-
-        &.-has-icon {
-            padding-left: 0.75rem;
-        }
-
-        .icon {
-            width: 1.45rem;
-            height: 1.45rem;
-
-            &.-passkey img {
-                filter: invert(1);
-            }
-
-            &.-ii {
-                background-color: #fff;
-                border-radius: 50px;
-
-                :global {
-                    > img {
-                        width: 18px;
-                    }
-                }
-            }
-        }
-
-        .label {
-            flex: 1;
-        }
-    }
-
-    .buttons {
-        display: flex;
-        flex-direction: column;
-        gap: $sp3;
-
-        :global {
-            button {
-                font-size: 1.2rem;
-
-                &.back-btn {
-                    color: var(--txt-light);
-                }
-
-                &.hollow {
-                    border-width: calc(1rem * 0.2);
-                }
-            }
-        }
-    }
-
-    .or-separator {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        padding: 1rem 0;
-        gap: 1rem;
-
-        .line {
-            flex: 1;
-            height: 1px;
-            background-color: var(--progress-bd);
-        }
-    }
-
-    .content.-landing {
-        .logo {
-            .img {
-                height: 36px;
-                width: 36px;
-            }
-
-            h1 {
-                @include font(bold, normal, fs-220);
-            }
-        }
-
-        .title {
-            @include font(medium, normal, fs-230);
-        }
-
-        .blurb {
-            color: var(--landing-txt-light);
-            @include font(bold, normal, fs-120, 32);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/mobile/NativeOnboardModal.svelte b/frontend/app/src/components/mobile/NativeOnboardModal.svelte
deleted file mode 100644
index be5cca9e63..0000000000
--- a/frontend/app/src/components/mobile/NativeOnboardModal.svelte
+++ /dev/null
@@ -1,366 +0,0 @@
-<script lang="ts">
-    import { i18nKey, setLocale, supportedLanguages } from "@src/i18n/i18n";
-    import { anonUserStore, identityStateStore, OpenChat, type CreatedUser } from "@client";
-    import { ErrorCode } from "@shared";
-    import { getContext } from "svelte";
-    import { locale } from "svelte-i18n";
-    import AccountPlus from "svelte-material-icons/AccountPlus.svelte";
-    import LinkVariant from "svelte-material-icons/LinkVariant.svelte";
-    import Login from "svelte-material-icons/Login.svelte";
-    import Button from "../Button.svelte";
-    import OnBoardOptionLogo from "../home/profile/OnBoardOptionLogo.svelte";
-    import FancyLoader from "../icons/FancyLoader.svelte";
-    import ModalContent from "../ModalContent.svelte";
-    import SignUp from "../onboard/SignUp.svelte";
-    import Select from "../Select.svelte";
-    import Translatable from "../Translatable.svelte";
-
-    const ALC_LENGTH = 6;
-
-    interface Props {
-        onClose: () => void;
-    }
-
-    let { onClose }: Props = $props();
-
-    const client = getContext<OpenChat>("client");
-
-    type Step = "choose-auth" | "new-user" | "one-time-password";
-    let step: Step = $state("choose-auth");
-    let accountLinkingCode = $state("");
-    let alcInput: HTMLInputElement | undefined = $state(undefined);
-    let linkingInProgress = $state(false);
-    let error: string | undefined = $state(undefined);
-    let signUpError: string | undefined = $state(undefined);
-    let selectedLocale = $state(($locale as string).substring(0, 2));
-
-    $effect(() => {
-        setLocale(selectedLocale);
-    });
-
-    function cancel() {
-        if ($anonUserStore && $identityStateStore.kind === "logging_in") {
-            client.updateIdentityState({ kind: "anon" });
-        }
-        onClose();
-    }
-
-    function signIn() {
-        client.signInWithAndroidWebAuthn().catch(async (e) => {
-            if ("AUTH_FAILED" === e) {
-                error = "native.auth.error";
-                console.error("Auth error: ", e);
-            } else {
-                // Passkey either not found, or user cancelled auth request
-                step = "one-time-password";
-            }
-        });
-    }
-
-    function newUser() {
-        step = "new-user";
-    }
-
-    function errorCodeToi18nKey(code: number | string): string {
-        switch (code) {
-            case ErrorCode.AlreadyRegistered:
-                return "alreadyRegistered";
-            case ErrorCode.LinkingCodeNotFound:
-                return "linkingCodeNotFound";
-            case ErrorCode.MaxLinkedIdentitiesLimitReached:
-                return "maxLinkedIdentitiesLimitReached";
-            default:
-                return "string" === typeof code ? code : "default";
-        }
-    }
-
-    function linkAccount() {
-        if (!linkingInProgress && accountLinkingCode.length === ALC_LENGTH) {
-            linkingInProgress = true;
-            error = undefined;
-            client.linkAccountsWithAndroidWebAuthn(accountLinkingCode).catch((err) => {
-                console.error(err);
-                linkingInProgress = false;
-                if (err && "object" === typeof err && "code" in err) {
-                    error = errorCodeToi18nKey(err.code);
-                } else {
-                    error = "default";
-                }
-            });
-        } else {
-            error = "codeInvalid";
-        }
-    }
-
-    function onCreatedUser(user: CreatedUser) {
-        client.onRegisteredUser(user);
-        onClose();
-    }
-
-    function logout(e: Event) {
-        e.preventDefault();
-        e.stopPropagation();
-        client.logout();
-    }
-</script>
-
-{#snippet getIcon(icon: string)}
-    {#if icon === "Login"}
-        <Login size="1.5em" />
-    {:else if icon === "AccountPlus"}
-        <AccountPlus size="1.5em" />
-    {:else if icon === "LinkVariant"}
-        <LinkVariant size="1.5em" />
-    {:else}
-        <!-- Fallback or error handling -->
-        ?
-    {/if}
-{/snippet}
-
-{#snippet button(
-    primary: boolean,
-    label: string,
-    icon: string,
-    onClick: () => void,
-    loading?: boolean,
-)}
-    <div class="button">
-        <OnBoardOptionLogo>
-            {@render getIcon(icon)}
-        </OnBoardOptionLogo>
-        <Button fill secondary={!primary} {loading} {onClick}>
-            <Translatable resourceKey={i18nKey(label)} />
-        </Button>
-    </div>
-{/snippet}
-
-<ModalContent fill hideFooter onClose={cancel}>
-    {#snippet header()}
-        <div class="header">
-            <div class="logo-img">
-                <FancyLoader loop={false} />
-            </div>
-            <div class="title">
-                {#if step === "one-time-password"}
-                    <Translatable resourceKey={i18nKey("native.auth.linkAccount.title")} />
-                {:else}
-                    <Translatable resourceKey={i18nKey("register.welcome")} />
-                {/if}
-                {#if step !== "one-time-password"}
-                    <div class="strapline">
-                        <Translatable resourceKey={i18nKey("loginDialog.strapline")} />
-                    </div>
-                {/if}
-            </div>
-        </div>
-    {/snippet}
-    {#snippet body()}
-        <div class="body">
-            {#if error || signUpError}
-                <div class="error">
-                    <Translatable
-                        resourceKey={i18nKey(`native.auth.errors.${error ?? "default"}`)} />
-                </div>
-            {/if}
-            {#if step === "choose-auth"}
-                <div class="buttons">
-                    {@render button(true, "native.auth.createAccount", "AccountPlus", newUser)}
-                    {@render button(false, "native.auth.existingAccount", "Login", signIn)}
-                </div>
-            {:else if step === "new-user"}
-                <SignUp {onCreatedUser} bind:error={signUpError} />
-            {:else if step === "one-time-password"}
-                <div class="alc-container">
-                    <div class="title">
-                        <Translatable resourceKey={i18nKey("native.auth.linkAccount.info")} />
-                    </div>
-                    <input
-                        class="alc-input"
-                        bind:value={accountLinkingCode}
-                        bind:this={alcInput}
-                        type="text"
-                        maxlength="6"
-                        pattern="[a-zA-Z0-9]{6}" />
-                    <!-- svelte-ignore a11y_no_static_element_interactions -->
-                    <!-- svelte-ignore a11y_click_events_have_key_events -->
-                    <div class="alc" onclick={() => alcInput?.focus()}>
-                        {#each [...Array(6).keys()] as key}
-                            <div class="char {key === accountLinkingCode.length ? 'current' : ''}">
-                                <span class="value">{accountLinkingCode[key] || ""}</span>
-                            </div>
-                        {/each}
-                    </div>
-                    {@render button(
-                        true,
-                        "native.auth.linkAccount.cta",
-                        "LinkVariant",
-                        linkAccount,
-                        linkingInProgress,
-                    )}
-                    <div class="note">
-                        <Translatable resourceKey={i18nKey("native.auth.linkAccount.note")} />
-                    </div>
-                </div>
-            {/if}
-        </div>
-    {/snippet}
-</ModalContent>
-
-<div class="lang">
-    <Select bind:value={selectedLocale}>
-        {#each supportedLanguages as lang}
-            <option value={lang.code}>{lang.name}</option>
-        {/each}
-    </Select>
-</div>
-
-<a class="logout" role="button" href="/" onclick={logout}>
-    <Translatable resourceKey={i18nKey("logout")} />
-</a>
-
-<style lang="scss">
-    .body {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        padding: $sp4;
-        padding-bottom: $sp6;
-    }
-    .header {
-        display: flex;
-        gap: $sp3;
-        @include font(bold, normal, fs-130, 29);
-        @include mobile() {
-            @include font(bold, normal, fs-120, 29);
-        }
-        align-items: center;
-
-        .logo-img {
-            height: 56px;
-            width: 56px;
-
-            @include mobile() {
-                height: 40px;
-                width: 40px;
-            }
-        }
-
-        .strapline {
-            @include font(light, normal, fs-80);
-            color: var(--txt-light);
-        }
-
-        .title {
-            display: flex;
-            flex-direction: column;
-            gap: $sp2;
-        }
-    }
-
-    .lang {
-        position: absolute;
-        left: $sp3;
-        top: $sp6;
-    }
-
-    .logout {
-        @include font(light, normal, fs-90);
-        cursor: pointer;
-        position: absolute;
-        top: $sp6;
-        right: $sp3;
-        color: #fff;
-        text-decoration: underline;
-        text-decoration-color: var(--accent);
-        text-underline-offset: $sp1;
-    }
-
-    .button {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        flex: auto;
-    }
-
-    .buttons {
-        display: flex;
-        flex-direction: column;
-        gap: $sp4;
-        max-width: 440px;
-        width: 100%;
-    }
-
-    .alc-container {
-        .alc {
-            display: flex;
-            padding: $sp6 0;
-            gap: $sp4;
-            justify-content: center;
-
-            .char {
-                display: flex;
-                flex: 1;
-                height: 5rem;
-                justify-content: end;
-                flex-direction: column;
-                align-items: center;
-                @include font(light, normal, fs-220);
-                position: relative;
-                overflow: hidden;
-
-                &:after {
-                    content: "";
-                    display: block;
-                    width: 100%;
-                    height: 0.25rem;
-                    border-radius: $sp2;
-                    background-color: var(--primary);
-                }
-            }
-        }
-
-        .title {
-            text-align: center;
-        }
-
-        .note {
-            @include font(light, normal, fs-90);
-            color: var(--txt-light);
-            text-align: center;
-            margin-top: $sp3;
-        }
-
-        .alc-input {
-            height: 0;
-            padding: 0;
-            border: none;
-            position: absolute;
-            left: -2000px;
-            &:focus + .alc > .char.current {
-                &:before {
-                    content: "";
-                    display: block;
-                    width: 1rem;
-                    height: 1rem;
-                    background-color: var(--primary);
-                    position: absolute;
-                    top: -0.75rem;
-                    left: 50%;
-                    transform: translateX(-50%) rotate(45deg);
-                }
-            }
-        }
-    }
-
-    .error {
-        @include font(book, normal, fs-90);
-        background-color: var(--error);
-        color: white;
-        padding: $sp2 $sp4;
-        width: 100%;
-        margin-bottom: $sp4;
-        border-radius: $sp2;
-        padding: $sp3;
-        text-align: center;
-    }
-</style>
diff --git a/frontend/app/src/components/onboard/OnboardModal.svelte b/frontend/app/src/components/onboard/OnboardModal.svelte
deleted file mode 100644
index bca678830b..0000000000
--- a/frontend/app/src/components/onboard/OnboardModal.svelte
+++ /dev/null
@@ -1,182 +0,0 @@
-<script lang="ts">
-    import { i18nKey, setLocale, supportedLanguages } from "@src/i18n/i18n";
-    import { anonUserStore, identityStateStore, OpenChat, type CreatedUser } from "@client";
-    import { getContext } from "svelte";
-    import { locale } from "svelte-i18n";
-    import FancyLoader from "../icons/FancyLoader.svelte";
-    import ModalContent from "../ModalContent.svelte";
-    import Select from "../Select.svelte";
-    import Translatable from "../Translatable.svelte";
-    import ModeSelection from "./ModeSelection.svelte";
-    import SignIn from "./SignIn.svelte";
-    import SignUp from "./SignUp.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    type Step = "select_mode" | "sign_up" | "sign_in";
-
-    interface Props {
-        step?: Step;
-        onClose: () => void;
-    }
-
-    let { onClose, step = $bindable("select_mode") }: Props = $props();
-    let error: string | undefined = $state(undefined);
-    let selectedLocale = $state(($locale as string).substring(0, 2));
-    $effect(() => {
-        setLocale(selectedLocale);
-    });
-
-    function cancel() {
-        if ($anonUserStore && $identityStateStore.kind === "logging_in") {
-            client.updateIdentityState({ kind: "anon" });
-        }
-        onClose();
-    }
-
-    let spinning = $state(false);
-
-    let title = $derived.by(() => {
-        switch (step) {
-            case "select_mode":
-                return i18nKey("register.welcome");
-            case "sign_in":
-                return i18nKey("loginDialog.title");
-            case "sign_up":
-                return i18nKey("loginDialog.signupTitle");
-        }
-    });
-
-    function onCreatedUser(user: CreatedUser) {
-        client.onRegisteredUser(user);
-        onClose();
-    }
-
-    function logout(e: Event) {
-        e.preventDefault();
-        e.stopPropagation();
-        client.logout();
-    }
-</script>
-
-<ModalContent fill hideFooter onClose={cancel} closeIcon={step === "select_mode"} onBack={() => (step = "select_mode")} backIcon={step !== "select_mode"}>
-    {#snippet header()}
-        <div class="header">
-            <div class="logo-img">
-                <FancyLoader loop={spinning} />
-            </div>
-            <div class="title">
-                <Translatable resourceKey={title} />
-                <div class="strapline">
-                    <Translatable resourceKey={i18nKey("loginDialog.strapline")} />
-                </div>
-            </div>
-        </div>
-    {/snippet}
-    {#snippet body()}
-        <div class="body">
-            {#if step === "select_mode"}
-                <ModeSelection
-                    onSignIn={() => (step = "sign_in")}
-                    onSignUp={() => (step = "sign_up")} />
-            {:else if step === "sign_in"}
-                <SignIn bind:spinning bind:error {onClose} />
-            {:else if step === "sign_up"}
-                <SignUp {onCreatedUser} bind:error />
-            {/if}
-        </div>
-    {/snippet}
-</ModalContent>
-
-<div class="lang">
-    <Select bind:value={selectedLocale}>
-        {#each supportedLanguages as lang}
-            <option value={lang.code}>{lang.name}</option>
-        {/each}
-    </Select>
-</div>
-
-<a class="logout" role="button" href="/" onclick={logout}>
-    <Translatable resourceKey={i18nKey("logout")} />
-</a>
-
-<style lang="scss">
-    :global(.lang .wrapper .icon) {
-        right: -1px;
-        top: 1px;
-    }
-
-    :global(.lang select.select) {
-        @include font(light, normal, fs-90);
-        background-color: transparent;
-        min-width: 80px;
-        height: auto;
-        color: #fff;
-        padding: $sp2 $sp5 $sp2 $sp4;
-        border: 1px solid var(--bd);
-
-        option {
-            @include font(light, normal, fs-90);
-        }
-    }
-
-    .body {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        padding: $sp4;
-    }
-    .header {
-        display: flex;
-        gap: $sp3;
-        @include font(bold, normal, fs-130, 29);
-        @include mobile() {
-            @include font(bold, normal, fs-120, 29);
-        }
-        align-items: center;
-
-        .logo-img {
-            height: 56px;
-            width: 56px;
-
-            @include mobile() {
-                height: 40px;
-                width: 40px;
-            }
-        }
-
-        .strapline {
-            @include font(light, normal, fs-80);
-            color: var(--txt-light);
-        }
-
-        .title {
-            display: flex;
-            flex-direction: column;
-            gap: $sp2;
-        }
-    }
-
-    .lang {
-        position: absolute;
-        left: $sp3;
-        top: $sp3;
-    }
-
-    .logout {
-        @include font(light, normal, fs-90);
-        cursor: pointer;
-        position: absolute;
-        top: $sp3;
-        right: $sp3;
-        color: #fff;
-        text-decoration: underline;
-        text-decoration-color: var(--accent);
-        text-underline-offset: $sp1;
-        @media (hover: hover) {
-            &:hover {
-                text-decoration-thickness: 2px;
-            }
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/onboard/SignIn.svelte b/frontend/app/src/components/onboard/SignIn.svelte
deleted file mode 100644
index e62d7d7926..0000000000
--- a/frontend/app/src/components/onboard/SignIn.svelte
+++ /dev/null
@@ -1,152 +0,0 @@
-<script lang="ts">
-    import { i18nKey } from "@src/i18n/i18n";
-    import { configKeys } from "@src/utils/config";
-    import { EmailSigninHandler } from "@src/utils/signin";
-    import {
-        AuthProvider,
-        identityStateStore,
-        OpenChat,
-        querystringStore,
-        selectedAuthProviderStore,
-    } from "@client";
-    import { getContext } from "svelte";
-    import Button from "../Button.svelte";
-    import ButtonGroup from "../ButtonGroup.svelte";
-    import ErrorMessage from "../ErrorMessage.svelte";
-    import EmailSigninFeedback from "../home/EmailSigninFeedback.svelte";
-    import ChooseSignInOption from "../home/profile/ChooseSignInOption.svelte";
-    import Translatable from "../Translatable.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        onClose: () => void;
-        error: string | undefined;
-        spinning: boolean;
-    }
-
-    let { error = $bindable(), onClose, spinning = $bindable() }: Props = $props();
-    void spinning;
-
-    let loginState = $state<"options" | "logging-in">("options");
-    let emailInvalid = $state(false);
-    let email = $state(localStorage.getItem(configKeys.selectedAuthEmail) ?? "");
-    let verificationCode: string | undefined = $state(undefined);
-    let emailSigninHandler = new EmailSigninHandler(client, "registration", true);
-    let restrictTo = $derived(new Set($querystringStore.getAll("auth")));
-    let loggingInWithEmail = $derived(
-        loginState === "logging-in" && $selectedAuthProviderStore === AuthProvider.EMAIL,
-    );
-    let loggingInWithEth = $derived(
-        loginState === "logging-in" && $selectedAuthProviderStore === AuthProvider.ETH,
-    );
-    let loggingInWithSol = $derived(
-        loginState === "logging-in" && $selectedAuthProviderStore === AuthProvider.SOL,
-    );
-
-    $effect(() => {
-        spinning =
-            loginState === "logging-in" &&
-            error === undefined &&
-            $selectedAuthProviderStore !== AuthProvider.ETH &&
-            $selectedAuthProviderStore !== AuthProvider.SOL;
-    });
-
-    $effect(() => {
-        if ($identityStateStore.kind === "anon" && loginState === "logging-in") {
-            onClose();
-        }
-        if ($identityStateStore.kind === "logged_in") {
-            onClose();
-        }
-    });
-
-    function login(provider: AuthProvider) {
-        if (emailInvalid && provider === AuthProvider.EMAIL) {
-            return;
-        }
-
-        client.gaTrack("initiated_signin", "registration", provider);
-
-        localStorage.setItem(configKeys.selectedAuthEmail, email);
-        selectedAuthProviderStore.set(provider);
-        loginState = "logging-in";
-        error = undefined;
-
-        if (provider === AuthProvider.EMAIL) {
-            verificationCode = undefined;
-            emailSigninHandler.generateMagicLink(email).then((resp) => {
-                if (resp.kind === "success") {
-                    verificationCode = resp.code;
-                } else if (resp.kind === "email_invalid") {
-                    error = "loginDialog.invalidEmail";
-                } else if (resp.kind === "failed_to_send_email") {
-                    console.debug("generateMagicLink failed_to_send_email", resp.error);
-                    error = "loginDialog.failedToSendEmail";
-                } else {
-                    error = "loginDialog.unexpectedError";
-                }
-            });
-        } else if (provider === AuthProvider.PASSKEY) {
-            if (client.isNativeAndroid()) {
-                client.signInWithAndroidWebAuthn();
-            } else {
-                client.signInWithWebAuthn();
-            }
-        } else if (provider === AuthProvider.ETH) {
-            console.log("Logging in with ETH");
-        } else if (provider === AuthProvider.SOL) {
-            console.log("Logging in with SOL");
-        } else {
-            client.login();
-        }
-    }
-
-    function cancelLink() {
-        client.gaTrack("email_signin_cancelled", "registration");
-        emailSigninHandler.stopPolling();
-        loginState = "options";
-    }
-</script>
-
-{#if loginState === "options"}
-    <ChooseSignInOption onLogin={login} mode={"signin"} {restrictTo} bind:emailInvalid bind:email />
-{:else if loggingInWithEmail}
-    <EmailSigninFeedback
-        code={verificationCode}
-        polling={$emailSigninHandler}
-        onCopy={(code) => emailSigninHandler.copyCode(code)} />
-    {#if error !== undefined}
-        <ErrorMessage><Translatable resourceKey={i18nKey(error)} /></ErrorMessage>
-    {/if}
-{:else if loggingInWithEth}
-    {#await import("../home/SigninWithEth.svelte")}
-        <div class="loading">...</div>
-    {:then { default: SigninWithEth }}
-        <SigninWithEth />
-    {/await}
-{:else if loggingInWithSol}
-    {#await import("../home/SigninWithSol.svelte")}
-        <div class="loading">...</div>
-    {:then { default: SigninWithSol }}
-        <SigninWithSol />
-    {/await}
-{/if}
-
-{#if loggingInWithEmail}
-    <div class="footer">
-        <ButtonGroup>
-            <Button onClick={cancelLink}
-                ><Translatable
-                    resourceKey={i18nKey(
-                        error === undefined ? "cancel" : "loginDialog.back",
-                    )} /></Button>
-        </ButtonGroup>
-    </div>
-{/if}
-
-<style lang="scss">
-    .footer {
-        align-self: flex-end;
-    }
-</style>
diff --git a/frontend/app/src/components/onboard/SignUp.svelte b/frontend/app/src/components/onboard/SignUp.svelte
deleted file mode 100644
index d46bca8ac4..0000000000
--- a/frontend/app/src/components/onboard/SignUp.svelte
+++ /dev/null
@@ -1,318 +0,0 @@
-<script lang="ts">
-    import { i18nKey } from "@src/i18n/i18n";
-    import { createLocalStorageStore } from "@src/utils/store";
-    import EmailValidator from "email-validator";
-    import type { CreatedUser, OpenChat, UserOrUserGroup, UserSummary } from "@client";
-    import {
-        AuthProvider,
-        identityStateStore,
-        mobileWidth,
-        selectedAuthProviderStore,
-    } from "@client";
-    import { getContext, onMount } from "svelte";
-    import AlertBox from "../AlertBox.svelte";
-    import Button from "../Button.svelte";
-    import ButtonGroup from "../ButtonGroup.svelte";
-    import ErrorMessage from "../ErrorMessage.svelte";
-    import FindUser from "../FindUser.svelte";
-    import Input from "../Input.svelte";
-    import TermsContent from "../landingpages/TermsContent.svelte";
-    import Legend from "../Legend.svelte";
-    import ModalContent from "../ModalContent.svelte";
-    import Overlay from "../Overlay.svelte";
-    import Translatable from "../Translatable.svelte";
-    import UsernameInput from "../UsernameInput.svelte";
-    import UserPill from "../UserPill.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        onCreatedUser: (user: CreatedUser) => void;
-        error: string | undefined;
-    }
-
-    let { error = $bindable(), onCreatedUser }: Props = $props();
-
-    let showGuidelines = $state(false);
-    let username = $state("");
-    let usernameValid = $state(false);
-    let usernameStore = createLocalStorageStore("openchat_candidate_username", "");
-    let checkingUsername: boolean = $state(false);
-    let email = $state("");
-    let emailValid = $derived(email.length === 0 || EmailValidator.validate(email));
-    let busy = $state(false);
-    let badCode = $state(false);
-    let referringUser: UserSummary | undefined = $state(undefined);
-    let createdUser: CreatedUser | undefined = undefined;
-    let passkeyCreated = $state(false);
-
-    function onShowGuidelines() {
-        showGuidelines = true;
-        client.gaTrack("show_guidelines_clicked", "registration");
-    }
-    function onCloseGuidelines() {
-        showGuidelines = false;
-    }
-
-    async function register(e: Event) {
-        e.preventDefault();
-        if (usernameValid && emailValid) {
-            usernameStore.set(username);
-            try {
-                busy = true;
-                selectedAuthProviderStore.set(AuthProvider.PASSKEY);
-
-                // if we are already in the registering state it means that we are somehow
-                // already signed in, but there is no user. In that case, skip the webauthn
-                // and just call registerUser
-                if ($identityStateStore.kind !== "registering") {
-                    if (!passkeyCreated) {
-                        if (client.isNativeAndroid()) {
-                            await client.signUpWithAndroidWebAuthn(true, username);
-                        } else {
-                            await client.signUpWithWebAuthn(true, username);
-                        }
-                    }
-                }
-                passkeyCreated = true;
-                await registerUser(username, email.length > 0 ? email : undefined);
-            } catch (err) {
-                error = `Error registering user: ${err}`;
-            } finally {
-                busy = false;
-            }
-        }
-    }
-
-    async function registerUser(username: string, email: string | undefined) {
-        await client.registerUser(username, email).then((resp) => {
-            badCode = false;
-            if (resp.kind === "username_taken") {
-                error = "register.usernameTaken";
-            } else if (resp.kind === "username_too_short") {
-                error = "register.usernameTooShort";
-            } else if (resp.kind === "username_too_long") {
-                error = "register.usernameTooLong";
-            } else if (resp.kind === "username_invalid") {
-                error = "register.usernameInvalid";
-            } else if (resp.kind === "email_invalid") {
-                error = "register.emailInvalid";
-            } else if (resp.kind === "user_limit_reached") {
-                error = "register.userLimitReached";
-            } else if (resp.kind === "internal_error") {
-                error = "unexpectedError";
-            } else if (resp.kind === "referral_code_invalid") {
-                error = "register.referralCodeInvalid";
-                badCode = true;
-            } else if (resp.kind === "referral_code_already_claimed") {
-                error = "register.referralCodeAlreadyClaimed";
-                badCode = true;
-            } else if (resp.kind === "referral_code_expired") {
-                error = "register.referralCodeExpired";
-                badCode = true;
-            } else if (resp.kind === "success") {
-                error = undefined;
-                createdUser = {
-                    kind: "created_user",
-                    username,
-                    dateCreated: BigInt(Date.now()),
-                    displayName: undefined,
-                    cryptoAccount: resp.icpAccount,
-                    userId: resp.userId,
-                    isPlatformModerator: false,
-                    isPlatformOperator: false,
-                    suspensionDetails: undefined,
-                    isSuspectedBot: false,
-                    diamondStatus: { kind: "inactive" },
-                    moderationFlagsEnabled: 0,
-                    updated: 0n,
-                    isBot: false,
-                    isUniquePerson: false,
-                    totalChitEarned: 0,
-                    chitBalance: 0,
-                    streak: 0,
-                    maxStreak: 0,
-                    hideOnlineStatus: false,
-                };
-                onCreatedUser(createdUser);
-                busy = false;
-                usernameStore.set("");
-            } else {
-                error = `Unexpected register user response: ${resp.kind}`;
-            }
-        });
-    }
-
-    function deleteUser(_: UserOrUserGroup) {
-        referringUser = undefined;
-        client.clearReferralCode();
-    }
-
-    function selectUser(user: UserSummary) {
-        referringUser = user;
-        client.setReferralCode(user.userId);
-    }
-
-    function userLookup(searchTerm: string): Promise<[UserSummary[], UserSummary[]]> {
-        return client.searchUsers(searchTerm, 20).then((res) => [[], res]);
-    }
-
-    function clearCodeAndLogout() {
-        client.clearReferralCode();
-        client.logout();
-    }
-
-    onMount(async () => {
-        referringUser = await client.getReferringUser();
-    });
-</script>
-
-{#if showGuidelines}
-    <Overlay onClose={onCloseGuidelines} dismissible={false}>
-        <ModalContent large onClose={onCloseGuidelines}>
-            {#snippet header()}
-                <span class="header">
-                    <h1>OpenChat Terms</h1>
-                </span>
-            {/snippet}
-            {#snippet body()}
-                <span class="guidelines-modal">
-                    <TermsContent />
-                </span>
-            {/snippet}
-            {#snippet footer(onClose)}
-                <span>
-                    <Button onClick={() => onClose?.()} small={!$mobileWidth} tiny={$mobileWidth}>
-                        <Translatable resourceKey={i18nKey("register.agree")} />
-                    </Button>
-                </span>
-            {/snippet}
-        </ModalContent>
-    </Overlay>
-{/if}
-
-{#if badCode}
-    <AlertBox>
-        <h4 class="main">
-            <Translatable resourceKey={i18nKey("register.referralCodeInvalid")} />
-        </h4>
-        <p class="sub">
-            <Translatable resourceKey={i18nKey("register.doYouWantToProceed")} />
-        </p>
-    </AlertBox>
-{:else}
-    <form class="username-wrapper" onsubmit={register}>
-        <div class="form-element">
-            <Legend label={i18nKey("username")} rules={i18nKey("usernameRules")} />
-            <UsernameInput
-                {client}
-                disabled={busy}
-                originalUsername={$usernameStore ?? ""}
-                autofocus
-                bind:username
-                bind:usernameValid
-                bind:checking={checkingUsername}
-                bind:error />
-        </div>
-
-        <div class="form-element">
-            <Legend label={i18nKey("register.email")} rules={i18nKey("register.emailRules")} />
-
-            <Input
-                invalid={!emailValid}
-                disabled={busy}
-                placeholder={i18nKey("register.emailPlaceholder")}
-                bind:value={email}
-                minlength={0}
-                maxlength={254} />
-        </div>
-
-        <div class="form-element">
-            {#if referringUser !== undefined}
-                <Legend label={i18nKey("register.referredBy")} />
-                <UserPill onDeleteUser={deleteUser} userOrGroup={referringUser} />
-            {:else}
-                <Legend label={i18nKey("register.findReferrer")} />
-                <FindUser
-                    placeholderKey={"register.searchForReferrer"}
-                    {userLookup}
-                    enabled
-                    compact
-                    mode={"add"}
-                    autofocus={false}
-                    onSelectUser={selectUser} />
-            {/if}
-        </div>
-        <!-- svelte-ignore a11y_click_events_have_key_events -->
-        <!-- svelte-ignore a11y_no_static_element_interactions -->
-        <div onclick={onShowGuidelines} class="smallprint">
-            <Translatable resourceKey={i18nKey("register.disclaimer")} />
-        </div>
-        {#if error !== undefined}
-            <div class="error">
-                <ErrorMessage><Translatable resourceKey={i18nKey(error)} /></ErrorMessage>
-            </div>
-        {/if}
-    </form>
-{/if}
-
-<div class="footer">
-    <ButtonGroup>
-        {#if badCode}
-            <Button secondary onClick={clearCodeAndLogout}
-                ><Translatable resourceKey={i18nKey("cancel")} /></Button>
-        {/if}
-        <Button
-            loading={checkingUsername || busy}
-            disabled={!usernameValid || !emailValid || busy}
-            onClick={register}>
-            <Translatable resourceKey={i18nKey("register.proceed")} />
-        </Button>
-    </ButtonGroup>
-</div>
-
-<style lang="scss">
-    :global(.guidelines-modal .card .header:not(.open) .arrow path) {
-        fill: var(--txt);
-    }
-    :global(.username-wrapper .results) {
-        max-height: 250px;
-        @include nice-scrollbar();
-    }
-
-    .username-wrapper {
-        margin-bottom: $sp4;
-        width: 100%;
-    }
-
-    .smallprint {
-        margin-top: $sp4;
-        align-self: flex-start;
-        @include font(light, normal, fs-60);
-        color: var(--primary);
-        cursor: pointer;
-        text-decoration: none;
-
-        @media (hover: hover) {
-            &:hover {
-                text-decoration: underline;
-            }
-        }
-    }
-
-    .footer {
-        align-self: flex-end;
-    }
-
-    .error {
-        margin-top: $sp4;
-    }
-
-    .main {
-        margin-bottom: $sp3;
-    }
-
-    .sub {
-        color: var(--txt-light);
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/AlertBoxModal.svelte b/frontend/app/src/components_mobile/AlertBoxModal.svelte
deleted file mode 100644
index 1c057af539..0000000000
--- a/frontend/app/src/components_mobile/AlertBoxModal.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script lang="ts">
-    import { ColourVars, Column, Sheet, StatusCard } from "component-lib";
-    import { type ResourceKey } from "@client";
-    import { _ } from "svelte-i18n";
-    import { interpolate } from "../i18n/i18n";
-    import Markdown from "@shared_components/Markdown.svelte";
-
-    interface Props {
-        title: ResourceKey;
-        warning: ResourceKey;
-        onClose: () => void;
-    }
-
-    let { onClose, title, warning }: Props = $props();
-</script>
-
-<Sheet onDismiss={onClose}>
-    <Column gap={"xl"} padding={"xl"}>
-        <StatusCard
-            background={ColourVars.background0}
-            mode="warning"
-            title={interpolate($_, title)}>
-            {#snippet body()}
-                <Markdown text={interpolate($_, warning)} />
-            {/snippet}
-        </StatusCard>
-    </Column>
-</Sheet>
diff --git a/frontend/app/src/components_mobile/App.svelte b/frontend/app/src/components_mobile/App.svelte
deleted file mode 100644
index a421717492..0000000000
--- a/frontend/app/src/components_mobile/App.svelte
+++ /dev/null
@@ -1,382 +0,0 @@
-<script lang="ts">
-    import "@styles/global.scss";
-
-    import "@i18n/i18n";
-    import { trackedEffect } from "@src/utils/effects.svelte";
-    import { detectNeedsSafeInset, setupKeyboardTracking } from "@src/utils/safe_area";
-    import {
-        setStatusAndNavBarSizesForNativeApp,
-        updateAndroidInterfaceSizes,
-    } from "@stores/androidInterfaceSizes";
-    import { rtlStore } from "@stores/rtl";
-    import { snowing } from "@stores/snow";
-    import { incomingVideoCall } from "@stores/video";
-    import { broadcastLoggedInUser } from "@stores/xframe";
-    import "@utils/markdown";
-    import {
-        expectDeepLinks,
-        expectNewFcmToken,
-        expectNotificationTap,
-        expectPushNotifications,
-        expectWindowInsetChange,
-    } from "@utils/native/notification_channels";
-    import { expectShareTarget, handleShareTarget } from "@utils/native/share_target";
-    import "@utils/scream";
-    import { portalState } from "component-lib";
-    import {
-        type ChatIdentifier,
-        OpenChat,
-        type VideoCallType,
-        botState,
-        chatListScopeStore,
-        fontSize,
-        identityStateStore,
-        inititaliseLogger,
-        routeForChatIdentifier,
-        routeForScope,
-        subscribe,
-    } from "@client";
-    import { navigate } from "@utils/navigation";
-    import { onMount, setContext } from "svelte";
-    import { overrideItemIdKeyNameBeforeInitialisingDndZones } from "svelte-dnd-action";
-    import { _, isLoading } from "svelte-i18n";
-    import {
-        clearAllNotifications,
-        deleteFcmToken,
-        getFcmToken,
-        svelteReady,
-    } from "tauri-plugin-oc-api";
-    import { clearChatShortcuts, startChatShortcutPusher } from "@stores/chatShortcuts";
-    import Head from "./Head.svelte";
-    import NotificationsBar from "./home/NotificationsBar.svelte";
-    import ActiveCall from "./home/video/ActiveCall.svelte";
-    import IncomingCall from "./home/video/IncomingCall.svelte";
-    import VideoCallAccessRequests from "./home/video/VideoCallAccessRequests.svelte";
-    import Router from "./Router.svelte";
-    import Snow from "@shared_components/Snow.svelte";
-    import UpgradeBanner from "./UpgradeBanner.svelte";
-    import { keyboard } from "@src/stores/keyboard.svelte";
-
-    overrideItemIdKeyNameBeforeInitialisingDndZones("_id");
-
-    const logger = inititaliseLogger(
-        import.meta.env.OC_ROLLBAR_ACCESS_TOKEN!,
-        import.meta.env.OC_WEBSITE_VERSION!,
-        import.meta.env.OC_BUILD_ENV!,
-    );
-
-    function createOpenChatClient(): OpenChat {
-        const client = new OpenChat({
-            mobileLayout: import.meta.env.OC_MOBILE_LAYOUT,
-            icUrl: import.meta.env.OC_IC_URL,
-            webAuthnOrigin: import.meta.env.OC_WEBAUTHN_ORIGIN,
-            iiDerivationOrigin: import.meta.env.OC_II_DERIVATION_ORIGIN,
-            openStorageIndexCanister: import.meta.env.OC_STORAGE_INDEX_CANISTER!,
-            groupIndexCanister: import.meta.env.OC_GROUP_INDEX_CANISTER!,
-            notificationsCanister: import.meta.env.OC_NOTIFICATIONS_CANISTER!,
-            identityCanister: import.meta.env.OC_IDENTITY_CANISTER!,
-            onlineCanister: import.meta.env.OC_ONLINE_CANISTER!,
-            userIndexCanister: import.meta.env.OC_USER_INDEX_CANISTER!,
-            translationsCanister: import.meta.env.OC_TRANSLATIONS_CANISTER!,
-            registryCanister: import.meta.env.OC_REGISTRY_CANISTER!,
-            internetIdentityUrl: import.meta.env.OC_INTERNET_IDENTITY_URL!,
-            nfidUrl: import.meta.env.OC_NFID_URL!,
-            userGeekApiKey: import.meta.env.OC_USERGEEK_APIKEY!,
-            videoBridgeUrl: import.meta.env.OC_VIDEO_BRIDGE_URL!,
-            meteredApiKey: import.meta.env.OC_METERED_APIKEY!,
-            blobUrlPattern: import.meta.env.OC_BLOB_URL_PATTERN!,
-            canisterUrlPath: import.meta.env.OC_CANISTER_URL_PATH!,
-            proposalBotCanister: import.meta.env.OC_PROPOSALS_BOT_CANISTER!,
-            marketMakerCanister: import.meta.env.OC_MARKET_MAKER_CANISTER!,
-            signInWithEmailCanister: import.meta.env.OC_SIGN_IN_WITH_EMAIL_CANISTER!,
-            signInWithEthereumCanister: import.meta.env.OC_SIGN_IN_WITH_ETHEREUM_CANISTER!,
-            signInWithSolanaCanister: import.meta.env.OC_SIGN_IN_WITH_SOLANA_CANISTER!,
-            oneSecForwarderCanister: import.meta.env.OC_ONESEC_FORWARDER_CANISTER!,
-            oneSecMinterCanister: import.meta.env.OC_ONESEC_MINTER_CANISTER!,
-            i18nFormatter: $_,
-            logger,
-            websiteVersion: import.meta.env.OC_WEBSITE_VERSION!,
-            rollbarApiKey: import.meta.env.OC_ROLLBAR_ACCESS_TOKEN!,
-            env: import.meta.env.OC_BUILD_ENV!,
-            bitcoinMainnetEnabled: import.meta.env.OC_BITCOIN_MAINNET_ENABLED! === "true",
-            vapidPublicKey: import.meta.env.OC_VAPID_PUBLIC_KEY!,
-            accountLinkingCodesEnabled:
-                import.meta.env.OC_ACCOUNT_LINKING_CODES_ENABLED! === "true",
-            baseOrigin: import.meta.env.OC_BASE_ORIGIN!,
-        });
-
-        return client;
-    }
-
-    let client: OpenChat = createOpenChatClient();
-    setContext<OpenChat>("client", client);
-
-    // I can't (yet) find a way to avoid using "any" here. Will try to improve but need to commit this crime for the time being
-    let videoCallElement: any;
-
-    trackedEffect("rtl", () => {
-        // subscribe to the rtl store so that we can set the overall page direction at the right time
-        document.dir = $rtlStore ? "rtl" : "ltr";
-    });
-
-    trackedEffect("font-size", () => {
-        console.log("Setting font size to: ", $fontSize);
-        document.documentElement.style.setProperty("--font-size", `${$fontSize}px`);
-    });
-
-    trackedEffect("calculate-height", calculateHeight);
-
-    onMount(() => {
-        const unsubs = [
-            subscribe("startVideoCall", startVideoCall),
-            subscribe("hangup", hangup),
-            subscribe("askToSpeak", askToSpeak),
-            subscribe("userLoggedIn", onUserLoggedIn),
-        ];
-        window.addEventListener("orientationchange", calculateHeight);
-        window.addEventListener("unhandledrejection", unhandledError);
-        // visualViewport.resize fires when the iOS virtual keyboard appears/disappears
-        // in PWA (home-screen) mode, where window.resize does not.
-        // Guarded to non-native apps only to avoid conflicting with the native
-        // keyboard handling system (expectWindowInsetChange) in the Tauri app.
-        if (!client.isNativeApp()) {
-            window.visualViewport?.addEventListener("resize", calculateHeight);
-        }
-
-        const unsub = _.subscribe((formatter) => {
-            botState.messageFormatter = formatter;
-        });
-
-        const unsubKeyboard = setupKeyboardTracking();
-        return () => {
-            window.removeEventListener("orientationchange", calculateHeight);
-            window.removeEventListener("unhandledrejection", unhandledError);
-            if (!client.isNativeApp()) {
-                window.visualViewport?.removeEventListener("resize", calculateHeight);
-            }
-            unsubs.forEach((u) => u());
-            unsub();
-            unsubKeyboard();
-        };
-    });
-
-    if (client.isNativeApp()) {
-        expectWindowInsetChange((data) => {
-            // Setting these values in store should also set the CSS vars!
-            // Gated so identical status/nav sizes don't re-write localStorage and
-            // CSS vars on every keyboard-animation frame.
-            updateAndroidInterfaceSizes(data.statusBarHeightDp, data.navHeightDp);
-
-            keyboard.visible = data.isKeyboardOpen;
-            keyboard.currentHeight = data.keyboardHeightDp;
-            data.isKeyboardOpen
-                ? document.body.classList.add("keyboard-visible")
-                : document.body.classList.remove("keyboard-visible");
-
-            data.isGestureNavigation
-                ? document.body.classList.add("has-gesture-nav")
-                : document.body.classList.remove("has-gesture-nav");
-        }).catch(console.error);
-
-        // We need to set the status bar height from the store, in case that
-        // the webview was refreshed, but inset change didn't happen.
-        setStatusAndNavBarSizesForNativeApp();
-    }
-
-    // Guards the one-time native setup (listeners, logout hook, svelteReady)
-    // so it runs once per page session. setupNativeApp() itself runs again on
-    // every userLoggedIn (account switch), but only the FCM token registration
-    // should repeat — re-registering listeners or the logout hook would stack
-    // duplicate handlers (e.g. a single warm tap firing multiple times).
-    let nativeSetupDone = false;
-
-    // Sets up push notifications and FCM token management for native apps
-    function setupNativeApp() {
-        const addFcmToken = (token: string) => {
-            client
-                .addFcmToken(token)
-                .then(() => console.info("FCM token updated successfully"))
-                .catch(console.error);
-        };
-
-        if (!client.isNativeApp()) {
-            return;
-        }
-
-        // Ask for the current FCM token and register it unconditionally on every
-        // login. Registration is last-login-wins on the backend, so this also
-        // reclaims a token still bound to a previous account on this device (a
-        // fcm_token_exists pre-check would wrongly skip that).
-        getFcmToken().then((token) => {
-            if (!token) {
-                // TODO do we handle this somehow? Debounce, try again?
-                console.error("No FCM token received");
-                return;
-            }
-
-            addFcmToken(token);
-        });
-
-        // Everything below registers session-scoped handlers and must run once.
-        if (nativeSetupDone) {
-            return;
-        }
-        nativeSetupDone = true;
-
-        // Register every native event listener BEFORE signalling svelteReady:
-        // the native side flushes its queued events the moment svelteReady
-        // fires, and a flush that beats an in-flight listener registration
-        // silently drops the event (e.g. a cold-start notification tap).
-        const listenersRegistered = Promise.allSettled([
-            // Listen for incoming push notifications from Firebase; also asks
-            // for permission to show notifications if not already granted.
-            expectPushNotifications(),
-
-            // Listen for notifications user has tapped on
-            expectNotificationTap(),
-
-            // Listen for content shared into OpenChat from the system share sheet
-            // (or via a Direct Share chat shortcut). Cold-start shares are queued
-            // by the native side and delivered once svelteReady fires below.
-            expectShareTarget((share) => handleShareTarget(client, share)),
-
-            // Listen for deep links (e.g. https://oc.app/group/xyz tapped from another app).
-            // Cold-start deep links are queued by MainActivity and delivered once svelteReady fires.
-            expectDeepLinks(),
-
-            // Expect FCM token refreshes
-            expectNewFcmToken(addFcmToken),
-        ]);
-        listenersRegistered.then((results) => {
-            results
-                .filter((r): r is PromiseRejectedResult => r.status === "rejected")
-                .forEach((r) => console.error("Native listener setup failed", r.reason));
-        });
-
-        // Best-effort push hygiene on sign-out, while the identity is
-        // still valid: unbind this device's token from the account,
-        // delete the device token (pushes to it then dead-end at FCM,
-        // and the next login mints + registers a fresh one), and empty
-        // the tray so nothing from this account lingers.
-        client.onLogout(async () => {
-            const token = await getFcmToken().catch(() => null);
-            if (token) {
-                await client.removeFcmToken(token).catch(console.error);
-            }
-            await deleteFcmToken().catch(console.error);
-            await clearAllNotifications().catch(console.error);
-        });
-
-        // Push the top recent chats to the Android Sharing Shortcuts API
-        // so they appear directly in the system share sheet (like
-        // WhatsApp's per-chat tiles).
-        startChatShortcutPusher(client);
-
-        // Inform the native android app that svelte code is ready — but only
-        // once all the listeners above are registered, so the native event
-        // queue flushes into handlers that actually exist.
-        listenersRegistered.then(() => svelteReady());
-    }
-
-    if ($identityStateStore.kind === "logged_in") {
-        setupNativeApp();
-    }
-
-    function onUserLoggedIn(userId: string) {
-        setupNativeApp();
-        broadcastLoggedInUser(userId);
-    }
-
-    function calculateHeight() {
-        // fix the issue with 100vh layouts in various mobile browsers.
-        // In PWA (home-screen) mode on iOS, window.innerHeight does NOT shrink
-        // when the virtual keyboard appears, but visualViewport.height does.
-        // The native Tauri app has its own keyboard handling via expectWindowInsetChange,
-        // so we only use visualViewport.height for non-native builds.
-        const viewportHeight =
-            !client.isNativeApp() && window.visualViewport
-                ? window.visualViewport.height
-                : window.innerHeight;
-        document.documentElement.style.setProperty("--vh", `${viewportHeight * 0.01}px`);
-    }
-
-    function unhandledError(ev: Event) {
-        if (
-            ev instanceof ErrorEvent &&
-            (ev.message.includes("ResizeObserver loop completed with undelivered notifications") ||
-                ev.message.includes("ResizeObserver loop limit exceeded"))
-        ) {
-            return;
-        }
-
-        logger?.error("Unhandled error: ", ev);
-        if (
-            ev instanceof PromiseRejectionEvent &&
-            (ev.reason?.name === "SessionExpiryError" ||
-                ev.reason?.name === "InvalidDelegationError")
-        ) {
-            if (client.isNativeApp()) clearChatShortcuts();
-            client.logout();
-            ev.preventDefault();
-        }
-    }
-
-    function resize() {
-        portalState.close();
-        calculateHeight();
-    }
-
-    function startVideoCall(payload: {
-        chatId: ChatIdentifier;
-        callType: VideoCallType;
-        join: boolean;
-    }) {
-        videoCallElement?.startOrJoinVideoCall(payload.chatId, payload.callType, payload.join);
-    }
-
-    function askToSpeak() {
-        videoCallElement?.askToSpeak();
-    }
-
-    function hangup() {
-        videoCallElement?.hangup();
-    }
-
-    function joinVideoCall(chatId: ChatIdentifier, callType: VideoCallType) {
-        incomingVideoCall.set(undefined);
-        navigate(routeForChatIdentifier("none", chatId));
-        videoCallElement?.startOrJoinVideoCall(chatId, callType, true);
-    }
-
-    document.body.classList.add("native-android");
-    detectNeedsSafeInset();
-</script>
-
-<Head />
-
-<ActiveCall
-    onClearSelection={() => navigate(routeForScope($chatListScopeStore))}
-    bind:this={videoCallElement} />
-
-<VideoCallAccessRequests />
-
-<IncomingCall onJoinVideoCall={joinVideoCall} />
-
-<NotificationsBar />
-
-<!-- should we perhaps just _always_ render the router -->
-{#if $identityStateStore.kind === "anon" || $identityStateStore.kind === "logging_in" || $identityStateStore.kind === "registering" || $identityStateStore.kind === "logged_in" || $identityStateStore.kind === "loading_user"}
-    {#if !$isLoading}
-        <Router />
-    {/if}
-{/if}
-
-{#if !client.isNativeApp()}
-    <UpgradeBanner />
-{/if}
-
-{#if $snowing}
-    <Snow />
-{/if}
-
-<svelte:window onresize={resize} onerror={unhandledError} onorientationchange={resize} />
diff --git a/frontend/app/src/components_mobile/AreYouSure.svelte b/frontend/app/src/components_mobile/AreYouSure.svelte
deleted file mode 100644
index 73b7536ea6..0000000000
--- a/frontend/app/src/components_mobile/AreYouSure.svelte
+++ /dev/null
@@ -1,107 +0,0 @@
-<script lang="ts">
-    import { Body, CommonButton, Container, Input, Sheet, Title } from "component-lib";
-    import type { ResourceKey } from "@client";
-    import { type Snippet } from "svelte";
-    import { _ } from "svelte-i18n";
-    import Check from "svelte-material-icons/Check.svelte";
-    import Close from "svelte-material-icons/Close.svelte";
-    import { i18nKey, interpolate } from "../i18n/i18n";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import Translatable from "./Translatable.svelte";
-
-    interface Props {
-        message?: ResourceKey | undefined;
-        action: (yes: boolean) => Promise<void>;
-        dismiss?: () => void;
-        doubleCheck?: { challenge: ResourceKey; response: ResourceKey } | undefined;
-        title?: ResourceKey | undefined;
-        yesLabel?: ResourceKey | undefined;
-        noLabel?: ResourceKey | undefined;
-        children?: Snippet;
-    }
-
-    let {
-        message,
-        action,
-        dismiss,
-        doubleCheck,
-        title = i18nKey("areYouSure"),
-        yesLabel = i18nKey("yesPlease"),
-        noLabel = i18nKey("noThanks"),
-        children,
-    }: Props = $props();
-
-    let inProgress = $state(false);
-    let response = $state("");
-
-    let canConfirm = $derived(
-        !inProgress &&
-            (doubleCheck === undefined || response === interpolate($_, doubleCheck.response)),
-    );
-
-    function onClick(yes: boolean) {
-        if (yes) {
-            inProgress = true;
-        }
-
-        action(yes).finally(() => {
-            inProgress = false;
-        });
-    }
-</script>
-
-<!-- TODO look into logic for this component, how to distinguish most effectively
- between dismissing, pressing no, and pressing yes? -->
-<Sheet onDismiss={dismiss}>
-    <Container height={"hug"} padding={"xl"} gap={"xl"} direction={"vertical"}>
-        {#if title !== undefined}
-            <Title fontWeight={"bold"}>
-                <Translatable resourceKey={title} />
-            </Title>
-        {/if}
-
-        {@render children?.()}
-
-        {#if message !== undefined}
-            <Body>
-                <Markdown inline={false} text={interpolate($_, message)} />
-            </Body>
-
-            {#if doubleCheck !== undefined}
-                <p class="challenge">
-                    <Markdown text={interpolate($_, doubleCheck.challenge)} />
-                </p>
-                <Input
-                    disabled={inProgress}
-                    bind:value={response}
-                    minlength={0}
-                    maxlength={200}
-                    countdown={false} />
-            {/if}
-        {/if}
-
-        <Container gap={"md"} crossAxisAlignment={"end"} mainAxisAlignment={"end"}>
-            <CommonButton disabled={inProgress} onClick={() => onClick(false)} size={"medium"}>
-                {#snippet icon(color, size)}
-                    <Close {color} {size} />
-                {/snippet}
-                {#if noLabel !== undefined}
-                    <Translatable resourceKey={noLabel} />
-                {/if}
-            </CommonButton>
-            <CommonButton
-                loading={inProgress}
-                disabled={!canConfirm}
-                mode={"active"}
-                onClick={() => onClick(true)}
-                size={"medium"}>
-                {#snippet icon(color, size)}
-                    <Check {color} {size} />
-                {/snippet}
-                {#if yesLabel !== undefined}
-                    <Translatable resourceKey={yesLabel} />
-                {/if}
-            </CommonButton>
-        </Container>
-    </Container>
-</Sheet>
diff --git a/frontend/app/src/components_mobile/Checkbox.svelte b/frontend/app/src/components_mobile/Checkbox.svelte
deleted file mode 100644
index 355a1d6806..0000000000
--- a/frontend/app/src/components_mobile/Checkbox.svelte
+++ /dev/null
@@ -1,196 +0,0 @@
-<script lang="ts">
-    import { Body } from "component-lib";
-    import type { ResourceKey } from "@client";
-    import type { Snippet } from "svelte";
-    import { rtlStore } from "../stores/rtl";
-    import Translatable from "./Translatable.svelte";
-
-    interface Props {
-        checked?: boolean;
-        disabled?: boolean;
-        waiting?: boolean;
-        id: string;
-        label: ResourceKey | undefined;
-        toggle?: boolean;
-        small?: boolean; // only applies to toggles
-        align?: "center" | "start";
-        children?: Snippet;
-        onChange?: () => void;
-    }
-
-    let {
-        checked = $bindable(false),
-        disabled = false,
-        waiting = false,
-        id,
-        label,
-        toggle = false,
-        small = false,
-        align = "center",
-        children,
-        onChange,
-    }: Props = $props();
-</script>
-
-<div
-    class="checkbox"
-    class:toggle
-    class:waiting
-    class:disabled
-    class:rtl={$rtlStore}
-    class:align-start={align === "start"}>
-    <input {id} type="checkbox" bind:checked {disabled} onchange={onChange} />
-    <label class:small for={id}>
-        {#if children}{@render children()}{:else if label !== undefined}
-            <Body ellipsisTruncate>
-                <Translatable resourceKey={label} />
-            </Body>
-        {/if}
-    </label>
-</div>
-
-<style lang="scss">
-    $size: 32px;
-    $size-small: 21px;
-
-    :root {
-        --color: var(--input-accent);
-    }
-
-    // todo - this will have rtl issues at the moment
-
-    input {
-        margin: 0;
-        margin-right: toRem(12);
-        width: 1.5em;
-        height: 1.5rem;
-        accent-color: var(--color);
-        appearance: none;
-        background-color: transparent;
-        margin: 0;
-        cursor: pointer;
-
-        font: inherit;
-        color: currentColor;
-        width: 1.15em;
-        height: 1.15em;
-        border: 1px solid currentColor;
-        transform: translateY(-0.075em);
-
-        display: grid;
-        place-content: center;
-    }
-
-    input[type="checkbox"]::before {
-        content: "";
-        width: 0.65em;
-        height: 0.65em;
-        transform: scale(0);
-        transition: 120ms transform ease-in-out;
-        box-shadow: inset 1em 1em var(--color);
-        transform-origin: bottom left;
-        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
-    }
-
-    input[type="checkbox"]:checked::before {
-        transform: scale(1);
-    }
-
-    input[type="checkbox"]:disabled {
-        --color: var(--txt-light);
-        color: var(--txt-light);
-        cursor: not-allowed;
-    }
-
-    .checkbox {
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-        gap: $sp4;
-
-        &.align-start {
-            align-items: flex-start;
-
-            input {
-                margin-top: 3px;
-            }
-        }
-
-        &.rtl input {
-            margin-left: toRem(12);
-            margin-right: unset;
-        }
-    }
-
-    label {
-        flex: 1;
-        user-select: none;
-        cursor: pointer;
-    }
-
-    .toggle {
-        input {
-            display: none;
-        }
-
-        label {
-            transition: background-color 200ms ease-in-out;
-            cursor: pointer;
-            text-indent: -9999px;
-            width: 80px;
-            height: 36px;
-            background: var(--toggle-bg);
-            display: block;
-            border-radius: var(--toggle-rd-track);
-            position: relative;
-
-            &.small {
-                width: 50px;
-                height: 25px;
-            }
-        }
-
-        label:after {
-            content: "";
-            position: absolute;
-            top: 2px;
-            left: 2px;
-            width: $size !important;
-            height: $size;
-            background: #fff;
-            border-radius: var(--toggle-rd-thumb);
-            transition: 150ms ease-in-out;
-        }
-
-        label.small:after {
-            width: $size-small !important;
-            height: $size-small;
-        }
-
-        input:checked + label {
-            background-color: var(--input-accent);
-        }
-
-        input:checked + label:after {
-            left: calc(100% - 2px);
-            transform: translateX(-100%);
-        }
-
-        label:active:after {
-            width: 60px;
-        }
-    }
-
-    .toggle {
-        &.disabled {
-            label {
-                cursor: default;
-            }
-        }
-        &.waiting {
-            label {
-                cursor: wait;
-            }
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/CollapsibleCard.svelte b/frontend/app/src/components_mobile/CollapsibleCard.svelte
deleted file mode 100644
index 55c183c18d..0000000000
--- a/frontend/app/src/components_mobile/CollapsibleCard.svelte
+++ /dev/null
@@ -1,128 +0,0 @@
-<script lang="ts">
-    import { expoInOut } from "svelte/easing";
-    import { slide } from "svelte/transition";
-    import { rtlStore } from "../stores/rtl";
-
-    import type { ResourceKey } from "@client";
-    import { type Snippet } from "svelte";
-    import Arrow from "@shared_components/Arrow.svelte";
-    import Translatable from "./Translatable.svelte";
-
-    interface Props {
-        headerText?: ResourceKey | undefined;
-        open?: boolean;
-        first?: boolean;
-        transition?: boolean;
-        fill?: boolean;
-        titleSlot?: Snippet;
-        children?: Snippet;
-        onOpened?: () => void;
-        onClosed?: () => void;
-        onToggle?: () => void;
-    }
-
-    let {
-        headerText = undefined,
-        open = $bindable(true),
-        first = false,
-        transition = true,
-        fill = false,
-        titleSlot,
-        children,
-        onClosed,
-        onOpened,
-        onToggle,
-    }: Props = $props();
-
-    function toggle() {
-        open = !open;
-        onToggle?.();
-        if (open) {
-            onOpened?.();
-        } else {
-            onClosed?.();
-        }
-    }
-</script>
-
-<div class="card" class:first class:open>
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div class="header" class:open onclick={toggle} class:fill>
-        {#if titleSlot}{@render titleSlot()}{:else if headerText !== undefined}
-            <Translatable resourceKey={headerText} />
-        {/if}
-
-        <div class="arrow" class:rtl={$rtlStore}>
-            <Arrow
-                size={16}
-                rotate={open ? -45 : 45}
-                color={open
-                    ? "var(--collapsible-open-header-arrow)"
-                    : "var(--collapsible-closed-header-txt)"} />
-        </div>
-    </div>
-    {#if transition}
-        {#if open}
-            <div
-                transition:slide|local={{ duration: 200, easing: expoInOut }}
-                class="body"
-                class:open>
-                {@render children?.()}
-            </div>
-        {/if}
-    {:else}
-        <div class="body static" class:open>
-            {@render children?.()}
-        </div>
-    {/if}
-</div>
-
-<style lang="scss">
-    .card {
-        width: 100%;
-        border-bottom: var(--bw) solid var(--bd);
-
-        &.first {
-            border-top: var(--bw) solid var(--bd);
-        }
-    }
-
-    .header {
-        padding: toRem(18) 0;
-        display: flex;
-        cursor: pointer;
-        justify-content: space-between;
-        align-items: center;
-        @include font(bold, normal, fs-100);
-        color: var(--collapsible-closed-header-txt);
-
-        &.open {
-            color: var(--txt);
-        }
-
-        &.fill {
-            padding-left: $sp4;
-            padding-right: $sp4;
-        }
-    }
-
-    .arrow {
-        flex: 0 0 20px;
-        justify-self: flex-end;
-        text-align: right;
-    }
-
-    .body {
-        padding-bottom: $sp3;
-
-        &.static {
-            display: none;
-            pointer-events: none;
-            &.open {
-                pointer-events: all;
-                display: block;
-            }
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/DateInput.svelte b/frontend/app/src/components_mobile/DateInput.svelte
deleted file mode 100644
index 647b07cc9a..0000000000
--- a/frontend/app/src/components_mobile/DateInput.svelte
+++ /dev/null
@@ -1,182 +0,0 @@
-<script module lang="ts">
-    export interface Props {
-        align?: string;
-        disabled?: boolean;
-        endDate?: string | Date;
-        format?: string;
-        futureOnly?: boolean;
-        inputId?: string;
-        inputClasses?: string;
-        mode?: "date" | "time" | "datetime";
-        pickerOnly?: boolean;
-        placeholder?: ResourceKey | undefined;
-        required?: boolean;
-        startDate?: string | Date;
-        value?: bigint | null | undefined;
-        onchange?: (val: bigint | null) => void;
-    }
-</script>
-
-<script lang="ts">
-    // TODO i18n localisation for the date picker!
-
-    import { Tooltip } from "component-lib";
-    import type { ResourceKey } from "@client";
-    import { onMount } from "svelte";
-    import { _ } from "svelte-i18n";
-    import Information from "svelte-material-icons/Information.svelte";
-    import SveltyPicker from "svelty-picker";
-    import { i18nKey, interpolate } from "../i18n/i18n";
-    import Translatable from "./Translatable.svelte";
-
-    let {
-        align = "left",
-        disabled = false,
-        endDate = undefined,
-        format = "dd M yyyy, hh:ii",
-        futureOnly = false,
-        inputId = undefined,
-        inputClasses = "",
-        mode = "datetime",
-        pickerOnly = false,
-        placeholder = undefined,
-        required = false,
-        startDate = undefined,
-        value = undefined,
-        onchange = undefined,
-    }: Props = $props();
-
-    let dateIsValid = $state(true);
-
-    // Initialise local date from the provided value on component mount
-    let localDate: string | undefined = $state(undefined);
-    onMount(() => {
-        if (typeof value === "number") {
-            localDate = new Date(Number(value)).toISOString();
-        }
-    });
-</script>
-
-<div class={`input-wrapper date-time ${align} ${!dateIsValid ? "error" : ""}`}>
-    <SveltyPicker
-        value={localDate}
-        {disabled}
-        {endDate}
-        {format}
-        {inputId}
-        inputClasses={`date-time ${inputClasses}`}
-        {mode}
-        {pickerOnly}
-        placeholder={placeholder !== undefined ? interpolate($_, placeholder) : ""}
-        {required}
-        {startDate}
-        onDateChange={({ dateValue }) => {
-            if (futureOnly && dateValue instanceof Date && dateValue < new Date()) {
-                dateIsValid = false;
-            } else {
-                dateIsValid = true;
-            }
-            dateValue instanceof Date ? onchange?.(BigInt(dateValue.getTime())) : onchange?.(null);
-        }} />
-    {#if !dateIsValid}
-        <div class="error-icon">
-            <Tooltip position={"top"} align={"middle"}>
-                <div class="param" class:required>
-                    <Information width="1.25rem" height="1.25rem" />
-                </div>
-                {#snippet popup()}
-                    <Translatable resourceKey={i18nKey("mustBeFutureDateError")} />
-                {/snippet}
-            </Tooltip>
-        </div>
-    {/if}
-</div>
-
-<style lang="scss">
-    .input-wrapper {
-        position: relative;
-        margin-bottom: $sp3;
-
-        :global(.sdt-component-wrap),
-        :global(.sdt-input-wrap) {
-            width: 100%;
-        }
-
-        :global(.sdt-tick) {
-            background-color: transparent;
-        }
-
-        :global(input[name="date_input"]) {
-            @include input();
-            width: 100%;
-
-            &::placeholder {
-                color: var(--placeholder);
-            }
-        }
-
-        &.error {
-            :global(input[name="date_input"]) {
-                box-shadow: 0 0 0 1px var(--error);
-            }
-        }
-
-        .error-icon {
-            position: absolute;
-            right: $sp3;
-            width: 1.25rem;
-            height: 1.25rem;
-            top: 50%;
-            transform: translateY(-50%);
-
-            :global(svg > path) {
-                fill: var(--error);
-            }
-        }
-    }
-
-    :global(body) {
-        /* general */
-        --sdt-bg-main: var(--bd);
-        --sdt-shadow-color: var(--bg);
-        --sdt-wrap-shadow: 0 1px 6px var(--sdt-shadow-color); /** wrap shadow settings */
-        --sdt-radius: 4px; /** wrap radius */
-        --sdt-color: var(--txt);
-        --sdt-color-selected: var(--txt); /** selected data(e.g date/time) text color */
-        --sdt-header-color: var(--txt); /** header items color (e.g. text & buttons) */
-        --sdt-header-btn-bg-hover: transparent; /** header items hover background color */
-        --sdt-bg-selected: var(--primary);
-
-        /* date picker */
-        --sdt-table-selected-bg: var(--sdt-bg-selected); /** selected date background color */
-        --sdt-table-disabled-date: var(--unread-mute-txt); /** disabled dates text color */
-        --sdt-table-disabled-date-bg: transparent; /** disabled dates background color */
-        --sdt-table-bg: transparent; /** date picker inner table background color */
-        --sdt-table-data-bg-hover: var(
-            --primary
-        ); /** table selection data hover background color */
-        --sdt-table-today-indicator: var(--primary); /** date picker current day marker color */
-
-        /* action buttons */
-        --sdt-today-bg: var(--reaction-me); /** date picker today button hover background color */
-        --sdt-today-color: var(--txt); /** date picker today button text & border color */
-        --sdt-clear-color: var(--txt-light); /** clear button text & border color */
-        --sdt-clear-bg: transparent; /** clear button background color */
-        --sdt-clear-hover-color: var(--txt); /** clear button hover text color */
-        --sdt-clear-hover-bg: transparent; /** clear button hover background color */
-
-        /* time picker */
-        --sdt-clock-selected-bg: var(--sdt-bg-selected); /** selected time background color */
-        --sdt-clock-bg: var(--input-bg); /** time picker inner circle background color */
-        --sdt-clock-color: var(--txt); /** time picker text color (watch "--sdt-color") */
-        --sdt-clock-color-hover: var(
-            --txt
-        ); /** time picker hover text color (watch "--sdt-color") */
-        --sdt-clock-time-bg: transparent; /** time picker time background color */
-        --sdt-clock-time-bg-hover: var(
-            --primary
-        ); /** time picker time selection hover background color */
-        --sdt-clock-disabled: var(--unread-mute); /** disabled time picker time text color */
-        --sdt-clock-disabled-bg: transparent; /** disabled time picker time background color */
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/DisplayNameInput.svelte b/frontend/app/src/components_mobile/DisplayNameInput.svelte
deleted file mode 100644
index 5fa5c3f2d6..0000000000
--- a/frontend/app/src/components_mobile/DisplayNameInput.svelte
+++ /dev/null
@@ -1,65 +0,0 @@
-<script lang="ts">
-    import { Input } from "component-lib";
-    import type { OpenChat } from "@client";
-    import { onMount, untrack } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { i18nKey, interpolate } from "../i18n/i18n";
-    import Translatable from "./Translatable.svelte";
-
-    const MIN_DISPLAY_NAME_LENGTH = 3;
-    const MAX_DISPLAY_NAME_LENGTH = 25;
-
-    interface Props {
-        client: OpenChat;
-        originalDisplayName: string | undefined;
-        displayName: string | undefined;
-        displayNameValid: boolean;
-        disabled?: boolean;
-        errorMsg?: string;
-    }
-
-    let {
-        client,
-        originalDisplayName,
-        displayName = $bindable(),
-        displayNameValid = $bindable(),
-        disabled = false,
-        errorMsg = $bindable(),
-    }: Props = $props();
-
-    void displayNameValid;
-
-    onMount(() => {
-        displayName = originalDisplayName;
-        displayNameValid = true;
-    });
-
-    $effect(() => {
-        if (typeof displayName !== "string") return;
-
-        let d = displayName;
-
-        untrack(() => {
-            if (d.length === 0) {
-                displayName = undefined;
-                displayNameValid = true;
-                return;
-            }
-
-            displayNameValid = client.isDisplayNameValid(d);
-        });
-    });
-</script>
-
-<Input
-    bind:value={displayName}
-    {disabled}
-    minlength={MIN_DISPLAY_NAME_LENGTH}
-    maxlength={MAX_DISPLAY_NAME_LENGTH}
-    countdown
-    placeholder={interpolate($_, i18nKey("register.enterDisplayName"))}>
-    {#snippet subtext()}
-        <Translatable resourceKey={i18nKey(errorMsg ?? "Optionally enter your display name")}
-        ></Translatable>
-    {/snippet}
-</Input>
diff --git a/frontend/app/src/components_mobile/EditableBanner.svelte b/frontend/app/src/components_mobile/EditableBanner.svelte
deleted file mode 100644
index 970e413f57..0000000000
--- a/frontend/app/src/components_mobile/EditableBanner.svelte
+++ /dev/null
@@ -1,56 +0,0 @@
-<script lang="ts">
-    import EditableImageWrapper from "./EditableImageWrapper.svelte";
-    import ChooseImage from "./icons/ChooseImage.svelte";
-
-    interface Props {
-        image: string | null | undefined;
-        onImageSelected: (args: { url: string; data: Uint8Array }) => void;
-    }
-
-    let { image = $bindable(), onImageSelected }: Props = $props();
-</script>
-
-<EditableImageWrapper mode={"banner"} {image} {onImageSelected}>
-    {#snippet children(choosePhoto: () => void, _elementWidth: number, elementHeight: number)}
-        <!-- svelte-ignore a11y_click_events_have_key_events -->
-        <!-- svelte-ignore a11y_no_static_element_interactions -->
-        <div
-            class={`photo-section`}
-            onclick={choosePhoto}
-            style={image
-                ? `height: ${elementHeight}px; background-image: url(${image})`
-                : `height: ${elementHeight}px`}>
-            <div class={`photo-icon`}>
-                <ChooseImage size={"3em"} color={image ? "#fff" : "var(--icon-txt)"} />
-            </div>
-        </div>
-    {/snippet}
-</EditableImageWrapper>
-
-<style lang="scss">
-    .photo-section {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        background-color: var(--input-bg);
-        background-size: cover;
-        height: 200px;
-    }
-
-    .overlay {
-        position: absolute;
-    }
-
-    .photo-icon {
-        border-radius: var(--avatar-rd);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        position: relative;
-
-        width: toRem(150);
-        height: toRem(150);
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/EditableImageWrapper.svelte b/frontend/app/src/components_mobile/EditableImageWrapper.svelte
deleted file mode 100644
index 9cdde7b380..0000000000
--- a/frontend/app/src/components_mobile/EditableImageWrapper.svelte
+++ /dev/null
@@ -1,151 +0,0 @@
-<script lang="ts">
-    import { Button, ColourVars, Column, Sheet, Subtitle } from "component-lib";
-    import type { Snippet } from "svelte";
-    import type { OnCropCompleteEvent } from "svelte-easy-crop";
-    import Cropper from "svelte-easy-crop";
-    import Crop from "svelte-material-icons/Crop.svelte";
-    import { i18nKey } from "../i18n/i18n";
-    import Translatable from "./Translatable.svelte";
-
-    type OnChoosePhoto = () => void;
-
-    interface Props {
-        image: string | null | undefined;
-        disabled?: boolean;
-        mode?: Mode;
-        onImageSelected: (args: { url: string; data: Uint8Array }) => void;
-        children: Snippet<[OnChoosePhoto, number, number]>;
-        classString?: string;
-    }
-
-    let {
-        image = $bindable(),
-        disabled = false,
-        mode = "avatar",
-        onImageSelected,
-        children,
-        classString,
-    }: Props = $props();
-
-    type Dimensions = { width: number; height: number };
-    type Mode = "banner" | "avatar" | "profile";
-    type CropShape = "round" | "rect";
-
-    let fileinput: HTMLInputElement;
-    let selectedImage: string | undefined = $state();
-    let originalImage = new Image();
-    let showModal = $state(false);
-    let cropData: OnCropCompleteEvent | undefined = undefined;
-
-    function getSaveDimensions(mode: Mode): Dimensions {
-        switch (mode) {
-            case "avatar":
-                return { width: 150, height: 150 };
-            case "banner":
-                return { width: 600, height: 300 };
-            case "profile":
-                return { width: 600, height: 300 };
-        }
-    }
-
-    export function addPhoto() {
-        if (!disabled) {
-            fileinput.click();
-        }
-    }
-
-    function onFileSelected(e: { currentTarget: HTMLInputElement }) {
-        if (e.currentTarget) {
-            const target = e.currentTarget as HTMLInputElement;
-            if (target.files) {
-                const image = target.files[0];
-                let reader = new FileReader();
-                reader.readAsDataURL(image);
-                reader.onload = (e) => {
-                    selectedImage = e?.target?.result as string;
-                    originalImage.src = selectedImage;
-                    showModal = true;
-                    fileinput.value = "";
-                };
-            }
-        }
-    }
-
-    function cropImage() {
-        if (!cropData || !originalImage) return;
-
-        const {
-            pixels: { x, y, width, height },
-        } = cropData;
-
-        const canvas: HTMLCanvasElement = document.createElement("canvas");
-        canvas.width = SAVE_DIMS.width;
-        canvas.height = SAVE_DIMS.height;
-        canvas
-            .getContext("2d")
-            ?.drawImage(
-                originalImage,
-                x,
-                y,
-                width,
-                height,
-                0,
-                0,
-                SAVE_DIMS.width,
-                SAVE_DIMS.height,
-            );
-
-        canvas.toBlob(async (blob: Blob | null) => {
-            if (blob) {
-                const array = await blob.arrayBuffer();
-                const data = new Uint8Array(array);
-                image = canvas.toDataURL("image/jpg");
-                showModal = false;
-                console.log("image size: ", data.length);
-                onImageSelected({ url: image, data });
-            }
-        }, "image/jpg");
-    }
-
-    function onCrop(ev: OnCropCompleteEvent): void {
-        cropData = ev;
-    }
-    let SAVE_DIMS = $derived(getSaveDimensions(mode));
-    let CROP_SHAPE = $derived(mode === "avatar" ? "round" : ("rect" as CropShape));
-    let elementWidth = $state(0);
-    let elementHeight = $derived(elementWidth / (SAVE_DIMS.width / SAVE_DIMS.height));
-    let aspect = $derived(mode === "avatar" ? 1 : SAVE_DIMS.width / SAVE_DIMS.height);
-</script>
-
-{#if showModal}
-    <Sheet onDismiss={() => (showModal = false)}>
-        <Column gap={"lg"} padding={"lg"}>
-            <Subtitle fontWeight={"bold"}>Crop image</Subtitle>
-            <Column backgroundColor={ColourVars.background1} height={{ size: "25rem" }}>
-                <Cropper
-                    image={selectedImage}
-                    oncropcomplete={onCrop}
-                    crop={{ x: 0, y: 0 }}
-                    {aspect}
-                    cropShape={CROP_SHAPE} />
-            </Column>
-            <Button onClick={cropImage}>
-                {#snippet icon(color)}
-                    <Crop {color}></Crop>
-                {/snippet}
-                <Translatable resourceKey={i18nKey("apply")} />
-            </Button>
-        </Column>
-    </Sheet>
-{/if}
-
-<input
-    hidden
-    type="file"
-    accept=".jpg, .jpeg, .png, .gif, .svg"
-    onchange={onFileSelected}
-    bind:this={fileinput} />
-
-<div class={`editable-image ${classString}`} bind:clientWidth={elementWidth}>
-    {@render children(addPhoto, elementWidth, elementHeight)}
-</div>
diff --git a/frontend/app/src/components_mobile/FindUser.svelte b/frontend/app/src/components_mobile/FindUser.svelte
deleted file mode 100644
index ec3c6a8f71..0000000000
--- a/frontend/app/src/components_mobile/FindUser.svelte
+++ /dev/null
@@ -1,155 +0,0 @@
-<script lang="ts">
-    import { Body, Container, Label, Search } from "component-lib";
-    import {
-        allUsersStore,
-        compareChats,
-        serverDirectChatsStore,
-        type BotMatch,
-        type UserSummary,
-    } from "@client";
-    import type { Snippet } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { i18nKey } from "../i18n/i18n";
-    import { toastStore } from "../stores/toast";
-    import MatchingUser from "./MatchingUser.svelte";
-    import Translatable from "./Translatable.svelte";
-
-    type OnSelectUser = (user: UserSummary) => void;
-
-    interface Props {
-        userLookup: (searchTerm: string) => Promise<[UserSummary[], UserSummary[]]>;
-        placeholderKey?: string;
-        onSelectUser: OnSelectUser;
-        selected?: Snippet;
-        selectedUsers?: UserSummary[];
-        matchingUser?: Snippet<[UserSummary, OnSelectUser]>;
-        dmFilter?: (user: UserSummary) => boolean;
-    }
-
-    let {
-        userLookup,
-        placeholderKey = "searchForUsername",
-        onSelectUser,
-        selected,
-        selectedUsers = [],
-        matchingUser,
-        dmFilter,
-    }: Props = $props();
-
-    let searchTerm: string = $state("");
-    let communityMembers: UserSummary[] = $state([]);
-    let users: UserSummary[] = $state([]);
-    let searching: boolean = $state(false);
-    let selectedSet = $derived(new Set(selectedUsers.map((u) => u.userId)));
-
-    function onSelect(user: UserSummary | BotMatch) {
-        if (user.kind !== "bot_match") {
-            onSelectUser?.(user);
-        }
-    }
-
-    function searchUsers(value?: string) {
-        if (value === "" || value === undefined) {
-            users = [];
-            return;
-        }
-        searching = true;
-        userLookup(value)
-            .then((p) => {
-                communityMembers = p[0];
-                users = p[1];
-            })
-            .catch((_err) => toastStore.showFailureToast(i18nKey("userSearchFailed")))
-            .finally(() => (searching = false));
-    }
-
-    function clearFilter() {
-        users = [];
-        communityMembers = [];
-        searchTerm = "";
-    }
-
-    let dms = $derived(
-        [...$serverDirectChatsStore.values()]
-            .sort(compareChats)
-            .map((c) => $allUsersStore.get(c.them.userId))
-            .filter(
-                (u) =>
-                    u !== undefined && u.kind !== "bot" && (dmFilter === undefined || dmFilter(u)),
-            )
-            .slice(0, 30),
-    );
-</script>
-
-<Container gap={"lg"} direction={"vertical"}>
-    <Search
-        {searching}
-        id={"search_component"}
-        onSearch={(v) => searchUsers(v)}
-        onClear={clearFilter}
-        placeholder={$_(placeholderKey)}
-        bind:value={searchTerm} />
-
-    {@render selected?.()}
-</Container>
-
-{#snippet match(user: UserSummary)}
-    <MatchingUser checked={selectedSet.has(user.userId)} {searchTerm} {user} {onSelect} />
-{/snippet}
-
-{#if communityMembers?.length > 0 || users?.length > 0}
-    <Container gap={"md"} padding={["zero", "md"]} direction={"vertical"}>
-        <Body fontWeight={"bold"}>
-            <Translatable resourceKey={i18nKey("Search results")}></Translatable>
-        </Body>
-
-        {#if communityMembers?.length > 0}
-            <Label colour={"textSecondary"}>
-                <Translatable resourceKey={i18nKey("communityMembers")} />
-            </Label>
-            <Container direction={"vertical"}>
-                {#each communityMembers as user (user.userId)}
-                    {#if matchingUser !== undefined}
-                        {@render matchingUser(user, onSelectUser)}
-                    {:else}
-                        {@render match(user)}
-                    {/if}
-                {/each}
-            </Container>
-        {/if}
-        {#if communityMembers?.length > 0 && users?.length > 0}
-            <Label colour={"textSecondary"}>
-                <Translatable resourceKey={i18nKey("otherUsers")} />
-            </Label>
-        {/if}
-        <Container direction={"vertical"}>
-            {#each users as user (user.userId)}
-                {#if matchingUser !== undefined}
-                    {@render matchingUser(user, onSelectUser)}
-                {:else}
-                    {@render match(user)}
-                {/if}
-            {/each}
-        </Container>
-    </Container>
-{/if}
-
-{#if dms.length > 0}
-    <Container gap={"md"} padding={["zero", "md"]} direction={"vertical"}>
-        <Body fontWeight={"bold"}>
-            <Translatable resourceKey={i18nKey("Frequently contacted on OpenChat")}></Translatable>
-        </Body>
-
-        <Container direction={"vertical"}>
-            {#each dms as user (user?.userId)}
-                {#if user}
-                    {#if matchingUser !== undefined}
-                        {@render matchingUser(user, onSelectUser)}
-                    {:else}
-                        {@render match(user)}
-                    {/if}
-                {/if}
-            {/each}
-        </Container>
-    </Container>
-{/if}
diff --git a/frontend/app/src/components_mobile/Head.svelte b/frontend/app/src/components_mobile/Head.svelte
deleted file mode 100644
index 91eecebb1f..0000000000
--- a/frontend/app/src/components_mobile/Head.svelte
+++ /dev/null
@@ -1,104 +0,0 @@
-<script lang="ts">
-    import {
-        type ChatListScope,
-        type ChatSummary,
-        type CombinedUnreadCounts,
-        type CommunitySummary,
-        type OpenChat,
-        type UserLookup,
-        allUsersStore,
-        chatListScopeStore,
-        globalUnreadCountStore,
-        locationStore,
-        routeForChatIdentifier,
-        selectedChatSummaryStore,
-        selectedCommunitySummaryStore,
-    } from "@client";
-    import { getContext, onMount } from "svelte";
-    import { mobileOperatingSystem } from "../utils/devices";
-
-    const client = getContext<OpenChat>("client");
-
-    let origin = $derived(client.canonicalOrigin());
-
-    let viewPortContent = $state("width=device-width, initial-scale=1");
-
-    type Details = {
-        title: string;
-        icon: string;
-        description: string;
-        canonicalUrl: URL;
-    };
-
-    function getDetails(
-        scope: ChatListScope,
-        location: string,
-        users: UserLookup,
-        unread: CombinedUnreadCounts,
-        chat: ChatSummary | undefined,
-        community: CommunitySummary | undefined,
-    ): Details {
-        let canonicalUrl = new URL("/", origin);
-        let title = "OpenChat";
-        let description =
-            "OpenChat is a fully featured chat application running end-to-end on the Internet Computer blockchain.";
-
-        if (location === "/communities") {
-            canonicalUrl = new URL("/communities", origin);
-        }
-
-        if (community !== undefined) {
-            title = `${title} - ${community.name}`;
-            description = community.description;
-            canonicalUrl = new URL(`/community/${community.id.communityId}`, origin);
-        }
-        if (chat !== undefined) {
-            if (chat.kind === "direct_chat") {
-                title = `${title} -
-                    ${
-                        users.get(chat.them.userId)?.displayName ??
-                        users.get(chat.them.userId)?.username ??
-                        "Direct chat"
-                    }`;
-            } else {
-                title = `${title} - ${chat.name}`;
-                description = chat.description;
-                canonicalUrl = new URL(routeForChatIdentifier(scope.kind, chat.id), origin);
-            }
-        }
-        const merged = client.mergeCombinedUnreadCounts(unread);
-        return {
-            title: merged.unmuted > 0 ? `(${merged.unmuted}) ${title}` : title,
-            description,
-            icon: merged.unmuted > 0 ? "/icon-unread.png" : "/icon.png",
-            canonicalUrl,
-        };
-    }
-
-    onMount(() => {
-        if (mobileOperatingSystem === "iOS") {
-            viewPortContent += ", maximum-scale=1";
-        }
-    });
-
-    let details = $derived(
-        getDetails(
-            $chatListScopeStore,
-            $locationStore,
-            $allUsersStore,
-            $globalUnreadCountStore,
-            $selectedChatSummaryStore,
-            $selectedCommunitySummaryStore,
-        ),
-    );
-</script>
-
-<svelte:head>
-    <title>{details.title}</title>
-    <meta name="viewport" content={viewPortContent} />
-    <link rel="icon" type="image/png" href={details.icon} />
-    <link rel="canonical" href={details.canonicalUrl.toString()} />
-    <meta name="description" content={details.description} />
-    <meta property="og:title" content={details.title} />
-    <meta property="og:description" content={details.description} />
-</svelte:head>
diff --git a/frontend/app/src/components_mobile/MatchingUser.svelte b/frontend/app/src/components_mobile/MatchingUser.svelte
deleted file mode 100644
index c6977e0235..0000000000
--- a/frontend/app/src/components_mobile/MatchingUser.svelte
+++ /dev/null
@@ -1,84 +0,0 @@
-<script lang="ts">
-    import { Avatar, BodySmall, ColourVars, Container } from "component-lib";
-    import type { BotMatch, DiamondMembershipStatus, OpenChat, UserSummary } from "@client";
-    import { currentUserIdStore } from "@client";
-    import { getContext } from "svelte";
-    import Check from "svelte-material-icons/Check.svelte";
-    import FilteredUsername from "@shared_components/FilteredUsername.svelte";
-    import Badges from "./home/profile/Badges.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    type Match = {
-        avatarUrl: string;
-        name: string;
-        unique: boolean;
-        diamond: DiamondMembershipStatus["kind"];
-        streak: number;
-        username: string;
-        chitEarned: number;
-    };
-
-    interface Props {
-        searchTerm?: string;
-        user: UserSummary | BotMatch;
-        onSelect: (user: UserSummary | BotMatch) => void;
-        checked?: boolean;
-    }
-
-    let { searchTerm, user, onSelect, checked = false }: Props = $props();
-
-    let match = $derived(normalise());
-
-    function normalise(): Match {
-        switch (user.kind) {
-            case "bot_match":
-                return {
-                    avatarUrl: user.avatarUrl ?? "/assets/bot_avatar.svg",
-                    name: user.name,
-                    unique: false,
-                    diamond: "inactive",
-                    streak: 0,
-                    username: user.name,
-                    chitEarned: 0,
-                };
-            default:
-                return {
-                    avatarUrl: client.userAvatarUrl(user),
-                    name: user.displayName ?? user.username,
-                    unique: user.isUniquePerson,
-                    diamond: user.diamondStatus,
-                    streak: user.streak,
-                    username: `@${user.username}`,
-                    chitEarned: user.totalChitEarned,
-                };
-        }
-    }
-</script>
-
-<Container
-    padding={["sm", "zero"]}
-    crossAxisAlignment={"center"}
-    gap={"lg"}
-    onClick={() => onSelect(user)}>
-    <Avatar size={"md"} url={match.avatarUrl}></Avatar>
-    <Container direction={"vertical"}>
-        <Container crossAxisAlignment={"center"} gap={"xs"}>
-            <FilteredUsername
-                {searchTerm}
-                me={user.kind === "user" && user.userId === $currentUserIdStore}
-                username={match.name} />
-            <Badges
-                uniquePerson={match.unique}
-                diamondStatus={match.diamond}
-                chitEarned={match.chitEarned}
-                streak={match.streak} />
-        </Container>
-        <BodySmall colour={"textSecondary"}>
-            <FilteredUsername {searchTerm} username={match.username} />
-        </BodySmall>
-    </Container>
-    {#if checked}
-        <Check size={"1.4rem"} color={ColourVars.primary} />
-    {/if}
-</Container>
diff --git a/frontend/app/src/components_mobile/Menu.svelte b/frontend/app/src/components_mobile/Menu.svelte
deleted file mode 100644
index 17c6e7c29b..0000000000
--- a/frontend/app/src/components_mobile/Menu.svelte
+++ /dev/null
@@ -1,49 +0,0 @@
-<script lang="ts">
-    import type { Snippet } from "svelte";
-    import { fade } from "svelte/transition";
-
-    interface Props {
-        centered?: boolean;
-        fit?: boolean;
-        children?: Snippet;
-        shadow?: boolean;
-        cls?: string;
-    }
-
-    let { centered = false, fit = false, children, shadow = true, cls }: Props = $props();
-</script>
-
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-    oncontextmenu={(e) => e.preventDefault()}
-    in:fade={{ duration: 100 }}
-    class={`menu ${cls}`}
-    class:fit
-    class:shadow
-    class:centered>
-    {@render children?.()}
-</div>
-
-<style lang="scss">
-    .menu {
-        width: toRem(250);
-        background-color: var(--menu-bg);
-        border-radius: var(--menu-rd);
-        border: var(--bw) solid var(--menu-bd);
-        max-height: 80vh;
-        max-height: var(--override-height, 80vh);
-        @include nice-scrollbar();
-
-        &.centered {
-            width: 70vw;
-        }
-
-        &.shadow {
-            box-shadow: var(--menu-sh);
-        }
-
-        &.fit {
-            width: fit-content;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/NotFound.svelte b/frontend/app/src/components_mobile/NotFound.svelte
deleted file mode 100644
index 2c34f2c758..0000000000
--- a/frontend/app/src/components_mobile/NotFound.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script lang="ts">
-    import { Sheet } from "component-lib";
-    import Home from "svelte-material-icons/HomeCircleOutline.svelte";
-    import RobotDead from "svelte-material-icons/RobotDeadOutline.svelte";
-    import NothingToSee from "./home/NothingToSee.svelte";
-
-    interface Props {
-        onClose?: () => void;
-    }
-    let { onClose }: Props = $props();
-</script>
-
-<Sheet onDismiss={onClose}>
-    <NothingToSee
-        title={"Page not found"}
-        subtitle={"We can't find the page you're looking for"}
-        reset={onClose ? { text: "Go home", onClick: onClose, icon: home } : undefined}
-        height={{ size: "20rem" }}>
-        {#snippet icon(color, size)}
-            <RobotDead {color} {size} />
-        {/snippet}
-    </NothingToSee>
-</Sheet>
-
-{#snippet home(color: string, size: string)}
-    <Home {color} {size} />
-{/snippet}
diff --git a/frontend/app/src/components_mobile/NumberInput.svelte b/frontend/app/src/components_mobile/NumberInput.svelte
deleted file mode 100644
index 86c880eb37..0000000000
--- a/frontend/app/src/components_mobile/NumberInput.svelte
+++ /dev/null
@@ -1,149 +0,0 @@
-<script lang="ts">
-    import { Caption, ColourVars, Container } from "component-lib";
-    import type { ResourceKey } from "@client";
-    import { onMount, type Snippet } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { interpolate } from "../i18n/i18n";
-
-    interface Props {
-        disabled?: boolean;
-        autofocus?: boolean;
-        placeholder?: ResourceKey | undefined;
-        min?: number;
-        max?: number;
-        defaultValue?: any;
-        value?: number | null;
-        align?: "left" | "right" | "center";
-        shouldClamp?: boolean;
-        onChange?: () => void;
-        onEnter?: () => void;
-        subtext?: Snippet;
-        error?: boolean;
-    }
-
-    let {
-        disabled = false,
-        autofocus = false,
-        placeholder = undefined,
-        min = 0,
-        max = Number.MAX_VALUE,
-        defaultValue = Math.round(max - min / 2),
-        value = $bindable(min),
-        align = "left",
-        shouldClamp = true,
-        onChange,
-        onEnter,
-        subtext,
-        error,
-    }: Props = $props();
-
-    let inp: HTMLInputElement | undefined = $state();
-
-    onMount(() => {
-        if (autofocus) {
-            inp?.focus();
-        }
-    });
-
-    function clamp(val: number): number {
-        if (isNaN(val)) return defaultValue;
-        if (val > max) return max;
-        if (val < min) return min;
-        return val;
-    }
-
-    function handleInput(e: { currentTarget: { value: string } }) {
-        if (inp) {
-            if (shouldClamp) {
-                value = clamp(parseInt(e.currentTarget.value, 10));
-                if (value != null) {
-                    inp.value = value.toString();
-                }
-            }
-            onChange?.();
-        }
-    }
-
-    function keyDown(e: KeyboardEvent) {
-        if (e.key === "Enter") {
-            onEnter?.();
-        }
-    }
-</script>
-
-<Container direction={"vertical"} gap={"xs"}>
-    <Container
-        background={ColourVars.textTertiary}
-        height={{ size: "3rem" }}
-        padding={["xs", "xl"]}
-        borderRadius={"circle"}
-        gap={"sm"}
-        crossAxisAlignment={"center"}>
-        <input
-            data-gram="false"
-            data-gramm_editor="false"
-            data-enable-grammarly="false"
-            spellcheck="false"
-            {disabled}
-            type="number"
-            {min}
-            {max}
-            placeholder={placeholder !== undefined ? interpolate($_, placeholder) : ""}
-            onkeydown={keyDown}
-            oninput={handleInput}
-            bind:this={inp}
-            bind:value
-            class={`textbox ${align}`} />
-    </Container>
-    {#if subtext}
-        <div class="subtext">
-            <Caption colour={error ? "error" : "textSecondary"}>
-                {@render subtext()}
-            </Caption>
-        </div>
-    {/if}
-</Container>
-
-<style lang="scss">
-    .subtext {
-        padding-inline-start: var(--sp-xl);
-        padding-inline-end: var(--sp-xl);
-    }
-
-    input[type="number"] {
-        -moz-appearance: textfield;
-        appearance: textfield;
-        margin: 0;
-    }
-
-    input[type="number"]::-webkit-inner-spin-button,
-    input[type="number"]::-webkit-outer-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
-    }
-
-    .textbox {
-        transition: border ease-in-out 300ms;
-        display: block;
-        width: 100%;
-
-        @include input();
-        padding: 0;
-
-        &.left {
-            text-align: left;
-        }
-
-        &.right {
-            text-align: right;
-        }
-
-        &.center {
-            text-align: center;
-        }
-
-        &::placeholder {
-            color: var(--placeholder);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/OfflineFooter.svelte b/frontend/app/src/components_mobile/OfflineFooter.svelte
deleted file mode 100644
index 0de48a218d..0000000000
--- a/frontend/app/src/components_mobile/OfflineFooter.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script lang="ts">
-    import { ColourVars, Row, Title } from "component-lib";
-    import CloudOffOutline from "svelte-material-icons/CloudOffOutline.svelte";
-    import { i18nKey } from "../i18n/i18n";
-    import Translatable from "./Translatable.svelte";
-</script>
-
-<Row
-    padding={["md", "lg"]}
-    mainAxisAlignment={"spaceBetween"}
-    crossAxisAlignment={"center"}
-    supplementalClass={"offline_footer"}
-    backgroundColor={ColourVars.warning}>
-    <CloudOffOutline size={"1.5em"} color={"currentColor"} />
-    <Title width={"hug"} uppercase>
-        <Translatable resourceKey={i18nKey("offlineMessage")} />
-    </Title>
-</Row>
-
-<style lang="scss">
-    :global(.container.offline_footer) {
-        position: absolute;
-        bottom: 0;
-        cursor: pointer;
-        @include z-index("anon-banner");
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/PremiumItem.svelte b/frontend/app/src/components_mobile/PremiumItem.svelte
deleted file mode 100644
index d810107e60..0000000000
--- a/frontend/app/src/components_mobile/PremiumItem.svelte
+++ /dev/null
@@ -1,77 +0,0 @@
-<script lang="ts">
-    import { i18nKey } from "@src/i18n/i18n";
-    import { ColourVars, Tooltip } from "component-lib";
-    import { PremiumItem, premiumItemsStore, premiumPrices } from "@client";
-    import { type Snippet } from "svelte";
-    import Lock from "svelte-material-icons/Lock.svelte";
-    import PremiumItemPayment from "./PremiumItemPayment.svelte";
-    import Translatable from "./Translatable.svelte";
-
-    type OnClick = () => void;
-
-    interface Props {
-        onClick: OnClick;
-        children: Snippet<[OnClick]>;
-        item: PremiumItem;
-    }
-
-    let { onClick, children, item }: Props = $props();
-    let showPayGate = $state(false);
-    let hasFeature = $derived($premiumItemsStore.has(item));
-
-    let wrappedClick = $derived.by(() => {
-        return () => {
-            if (hasFeature) {
-                showPayGate = false;
-                return onClick();
-            } else {
-                showPayGate = true;
-            }
-        };
-    });
-</script>
-
-{#if showPayGate}
-    <PremiumItemPayment {item} onSuccess={wrappedClick} onCancel={() => (showPayGate = false)} />
-{/if}
-
-<Tooltip enable={!hasFeature} position="top" align="middle">
-    <div class="premium" class:locked={!hasFeature}>
-        {@render children(wrappedClick)}
-
-        {#if !hasFeature}
-            <div class="locked">
-                <Lock size={"1.3em"} color={ColourVars.secondary} />
-            </div>
-        {/if}
-    </div>
-    {#snippet popup()}
-        <Translatable
-            resourceKey={i18nKey("premiumItem.priceTooltip", {
-                price: premiumPrices[item].toLocaleString(),
-            })}></Translatable>
-    {/snippet}
-</Tooltip>
-
-<style lang="scss">
-    .premium {
-        position: relative;
-        display: flex;
-        justify-content: flex-start;
-        align-items: flex-start;
-
-        .locked {
-            top: -0.3rem;
-            left: -0.3rem;
-            transition: opacity 200ms ease-in-out;
-            position: absolute;
-            pointer-events: none;
-        }
-
-        &:hover {
-            .locked {
-                opacity: 0.8;
-            }
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/Progress.svelte b/frontend/app/src/components_mobile/Progress.svelte
deleted file mode 100644
index 8c74bb0e77..0000000000
--- a/frontend/app/src/components_mobile/Progress.svelte
+++ /dev/null
@@ -1,62 +0,0 @@
-<script lang="ts">
-    import { ColourVars } from "component-lib";
-    import type { Snippet } from "svelte";
-    import { rtlStore } from "../stores/rtl";
-
-    interface Props {
-        percent: number;
-        size?: string;
-        children?: Snippet;
-        colour?: string;
-    }
-
-    let { percent, size = "40px", children, colour = ColourVars.primary }: Props = $props();
-</script>
-
-<div class="bar" style={`--size: ${size}`}>
-    <span
-        class="meter"
-        class:rtl={$rtlStore}
-        style={`width: ${percent}%; background-color: ${colour};}`}></span>
-    <div class="label">
-        {@render children?.()}
-    </div>
-</div>
-
-<style lang="scss">
-    .bar {
-        width: 100%;
-        height: var(--size);
-        position: relative;
-        background-color: var(--text-tertiary);
-        border-radius: var(--rad-circle);
-        overflow: hidden;
-    }
-
-    .meter {
-        background-color: var(--primary);
-        border-radius: var(--rad-circle);
-        width: 0;
-        transition: width 300ms;
-        display: block;
-        height: 100%;
-
-        position: absolute;
-        left: 0;
-        top: 0;
-
-        &.rtl {
-            left: unset;
-            right: 0;
-        }
-    }
-
-    .label {
-        display: flex;
-        align-items: center;
-        height: 100%;
-        padding: 0 $sp4;
-        position: relative;
-        @include ellipsis();
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/ProgressStep.svelte b/frontend/app/src/components_mobile/ProgressStep.svelte
deleted file mode 100644
index 6ca2673b10..0000000000
--- a/frontend/app/src/components_mobile/ProgressStep.svelte
+++ /dev/null
@@ -1,76 +0,0 @@
-<script lang="ts">
-    import { Body, BodySmall, ColourVars, Container, Row } from "component-lib";
-    import type { ResourceKey } from "@client";
-    import { _ } from "svelte-i18n";
-    import DoneIcon from "svelte-material-icons/CheckCircle.svelte";
-    import FailedIcon from "svelte-material-icons/CloseCircle.svelte";
-    import { interpolate } from "../i18n/i18n";
-    import { currentTheme } from "../theme/themes";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import Spinner from "./icons/Spinner.svelte";
-
-    interface Props {
-        label: ResourceKey;
-        status: string;
-        step?: number;
-    }
-
-    let { label, status, step = 0 }: Props = $props();
-
-    const colours: Record<string, string> = {
-        todo: ColourVars.textPrimary,
-        done: ColourVars.success,
-        failed: ColourVars.error,
-    };
-</script>
-
-<Row padding={["sm", "zero"]} gap={"md"} crossAxisAlignment={"center"}>
-    {#if status === "doing"}
-        <div class="spinner">
-            <Spinner
-                size="1.6rem"
-                strokeWidth={"2px"}
-                foregroundColour={$currentTheme.toast.success.bg}
-                backgroundColour={"rgba(255,255,255,0.5)"}></Spinner>
-            <div class="number">
-                <BodySmall align={"center"} width={"hug"}>
-                    {step + 1}
-                </BodySmall>
-            </div>
-        </div>
-    {:else if status === "overall-done"}
-        <DoneIcon size="1.6rem" color={ColourVars.success} />
-    {:else if status === "overall-failed"}
-        <FailedIcon size="1.6rem" color={ColourVars.error} />
-    {:else}
-        <Container
-            borderColour={colours[status] ?? ColourVars.textPrimary}
-            borderWidth={"thick"}
-            borderRadius={"circle"}
-            mainAxisAlignment={"center"}
-            crossAxisAlignment={"center"}
-            width={{ size: "1.5rem" }}
-            height={{ size: "1.5rem" }}>
-            <BodySmall width={"hug"}>
-                {step + 1}
-            </BodySmall>
-        </Container>
-    {/if}
-    <Body>
-        <Markdown text={interpolate($_, label)} />
-    </Body>
-</Row>
-
-<style lang="scss">
-    .spinner {
-        position: relative;
-        height: 24px;
-        width: 24px;
-        .number {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/ProgressSteps.svelte b/frontend/app/src/components_mobile/ProgressSteps.svelte
deleted file mode 100644
index 9d12e2cd56..0000000000
--- a/frontend/app/src/components_mobile/ProgressSteps.svelte
+++ /dev/null
@@ -1,57 +0,0 @@
-<script module lang="ts">
-    export type Status = "done" | "doing" | "todo" | "failed";
-    export type OverallStatus = "done" | "failed";
-
-    export type Step = {
-        status: Status;
-        label: string;
-    };
-
-    export type Result =
-        | {
-              status: OverallStatus;
-              label: string;
-          }
-        | undefined;
-</script>
-
-<script lang="ts">
-    import { Column } from "component-lib";
-    import type { InterpolationValues } from "@client";
-    import { flip } from "svelte/animate";
-    import { fade } from "svelte/transition";
-    import { i18nKey } from "../i18n/i18n";
-    import Progress from "./Progress.svelte";
-    import ProgressStep from "./ProgressStep.svelte";
-
-    interface Props {
-        steps: Step[];
-        result: Result;
-        labelValues?: InterpolationValues | undefined;
-        percent?: number | undefined;
-    }
-
-    let { steps, result, labelValues = undefined, percent = undefined }: Props = $props();
-</script>
-
-<Column>
-    {#each steps as step, i ("step" + i)}
-        <div in:fade={{ duration: 500 }} animate:flip={{ duration: 500 }}>
-            <ProgressStep
-                label={i18nKey(steps[i].label, labelValues)}
-                step={i}
-                status={step.status} />
-        </div>
-    {/each}
-    {#if result !== undefined}
-        <div>
-            <ProgressStep
-                label={i18nKey(result.label, labelValues)}
-                status={"overall-" + result.status} />
-        </div>
-    {/if}
-</Column>
-
-{#if result === undefined && percent !== undefined}
-    <Progress size={"8px"} {percent} />
-{/if}
diff --git a/frontend/app/src/components_mobile/Router.svelte b/frontend/app/src/components_mobile/Router.svelte
deleted file mode 100644
index cd0183b7bb..0000000000
--- a/frontend/app/src/components_mobile/Router.svelte
+++ /dev/null
@@ -1,375 +0,0 @@
-
-<script lang="ts">
-    import { initNavigationHistoryTracking, navigate } from "@src/utils/navigation";
-    import {
-        consumePendingDeepLink,
-        consumePendingNotificationTap,
-    } from "@utils/native/notification_channels";
-    import { handleLinkClick, removeQueryStringParam } from "@src/utils/urls";
-    import type { TransitionType } from "component-lib";
-    import { type ChatIdentifier, OpenChat, type RouteParams, adminRoute, chatIdentifiersEqual, chatListRoute, chatListScopeStore, chatsInitialisedStore, communitesRoute, communitiesStore, communityIdentifiersEqual, exploringStore, globalDirectChatSelectedRoute, globalGroupChatSelectedRoute, isMessageIndexRoute, messageIndexStore, notFoundStore, notificationsRoute, profileSummaryRoute, publish, routeKindStore, routeStore, routerReadyStore, selectedChannelRoute, selectedChatIdStore, selectedCommunityIdStore, selectedCommunityRoute, selectedServerChatStore, shareRoute, threadMessageIndexStore, threadOpenStore, walletRoute, welcomeRoute } from "@client";
-    import page from "page";
-    import { type Component, getContext, onMount, tick, untrack } from "svelte";
-    import Home from "./home/HomeRoute.svelte";
-    import NotFound from "./NotFound.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    const bottomBarRoutes: RouteParams["kind"][] = [
-        "chat_list_route",
-        "selected_community_route",
-        "welcome_route",
-        "favourites_route",
-        "notifications_route",
-        "wallet_route",
-        "profile_summary_route",
-        "global_chat_selected_route",
-        "selected_channel_route",
-    ];
-
-    function disambiguateRouteKind(route: RouteParams): RouteParams["kind"] {
-        if (route.kind === "chat_list_route" && route.scope.kind === "favourite") {
-            return "favourites_route";
-        }
-        return route.kind;
-    }
-
-    function routeToTransitionType(next: RouteParams, current: RouteParams): TransitionType {
-        if (
-            isMessageIndexRoute(next) &&
-            isMessageIndexRoute(current) &&
-            chatIdentifiersEqual(next.chatId, current.chatId)
-        ) {
-            // we don't want to slide when opening and closing threads because
-            // threads are implemented as sliding modals
-            // we have opened a thread
-            if (next.open && !current.open) {
-                return "fade";
-            }
-            // we have closed a thread
-            if (!next.open && current.open) {
-                return "fade";
-            }
-        }
-
-        if (
-            next.kind === "selected_community_route" &&
-            current.kind === "selected_community_route"
-        ) {
-            if (communityIdentifiersEqual(next.communityId, current.communityId)) {
-                return "fade";
-            }
-            const nextCommunity = $communitiesStore.get(next.communityId);
-            const currentCommunity = $communitiesStore.get(current.communityId);
-            if (nextCommunity !== undefined && currentCommunity !== undefined) {
-                return nextCommunity.membership.index > currentCommunity.membership.index
-                    ? "slide_right"
-                    : "slide_left";
-            }
-            return "fade";
-        }
-        const nextIdx = bottomBarRoutes.indexOf(disambiguateRouteKind(next));
-        const currIdx = bottomBarRoutes.indexOf(disambiguateRouteKind(current));
-        if (nextIdx === currIdx) return "fade";
-        if (nextIdx === -1 || currIdx === -1) return "fade";
-        return nextIdx > currIdx ? "slide_left" : "slide_right";
-    }
-
-    let route: Component | undefined = $state(undefined);
-
-    const svt = (document as any).startViewTransition;
-    const supportsObjectForm = (() => {
-        try {
-            (document as any).startViewTransition({ update: () => {} });
-            return true;
-        } catch {
-            return false;
-        }
-    })();
-
-    function parsePathParams(fn: (ctx: PageJS.Context) => RouteParams) {
-        return (ctx: PageJS.Context, next: () => any) => {
-            const params = fn(ctx);
-
-            if (ctx.init || !svt || !supportsObjectForm) {
-                client.setRouteParams(ctx, params);
-                scrollToTop();
-                next();
-                return;
-            }
-
-            // Finally - we are in a position to specify the *type* of transition
-            const transitionType = routeToTransitionType(params, routeStore.value);
-            const trans = (document as any).startViewTransition({
-                update: () => {
-                    client.setRouteParams(ctx, params);
-                    scrollToTop();
-                    next();
-                    return tick();
-                },
-                types: [transitionType],
-            });
-            trans.ready.catch(() => {});
-            trans.finished.catch(() => {
-                console.debug("Transition was skipped or interrupted");
-            });
-        };
-    }
-
-    onMount(() => {
-        const onLinkClick = handleLinkClick(client, navigate);
-        document.addEventListener("click", onLinkClick, { capture: true });
-
-        // this is for explore mode
-        page("/communities", parsePathParams(communitesRoute), track, () => (route = Home));
-        // global direct chat selected
-        page(
-            "/user/:chatId/:messageIndex?/:threadMessageIndex?",
-            parsePathParams(globalDirectChatSelectedRoute({ kind: "chats" })),
-            track,
-            () => (route = Home),
-        );
-        // global group chat selected
-        page(
-            "/group/:chatId/:messageIndex?/:threadMessageIndex?",
-            parsePathParams(globalGroupChatSelectedRoute({ kind: "chats" })),
-            track,
-            () => (route = Home),
-        );
-        // selected community group
-        page(
-            "/community/:communityId",
-            parsePathParams(selectedCommunityRoute),
-            track,
-            () => (route = Home),
-        );
-        // selected community channel
-        page(
-            "/community/:communityId/channel/:channelId/:messageIndex?/:threadMessageIndex?",
-            parsePathParams(selectedChannelRoute(false)),
-            track,
-            () => (route = Home),
-        );
-        // global direct and group chats
-        page(
-            "/chats",
-            parsePathParams(chatListRoute({ kind: "chats" })),
-            track,
-            () => (route = Home),
-        );
-        page(
-            "/chats/user/:chatId/:messageIndex?/:threadMessageIndex?",
-            parsePathParams(globalDirectChatSelectedRoute({ kind: "chats" })),
-            track,
-            () => (route = Home),
-        );
-        page(
-            "/chats/group/:chatId/:messageIndex?/:threadMessageIndex?",
-            parsePathParams(globalGroupChatSelectedRoute({ kind: "chats" })),
-            track,
-            () => (route = Home),
-        );
-        // favourites
-        page(
-            "/favourite",
-            parsePathParams(chatListRoute({ kind: "favourite" })),
-            track,
-            () => (route = Home),
-        );
-        // selected global group favourite
-        page(
-            "/favourite/group/:chatId/:messageIndex?/:threadMessageIndex?",
-            parsePathParams(globalGroupChatSelectedRoute({ kind: "favourite" })),
-            track,
-            () => (route = Home),
-        );
-        // selected global direct favourite
-        page(
-            "/favourite/user/:chatId/:messageIndex?/:threadMessageIndex?",
-            parsePathParams(globalDirectChatSelectedRoute({ kind: "favourite" })),
-            track,
-            () => (route = Home),
-        );
-        // selected favourite channel
-        page(
-            "/favourite/community/:communityId/channel/:channelId/:messageIndex?/:threadMessageIndex?",
-            parsePathParams(selectedChannelRoute(true)),
-            track,
-            () => (route = Home),
-        );
-        page("/share", parsePathParams(shareRoute), track, () => (route = Home));
-        page("/admin", parsePathParams(adminRoute), track, () => (route = Home));
-        page("/profile_summary", parsePathParams(profileSummaryRoute), track, () => (route = Home));
-        page("/welcome", parsePathParams(welcomeRoute), track, () => (route = Home));
-        page("/wallet", parsePathParams(walletRoute), track, () => (route = Home));
-        page("/notifications", parsePathParams(notificationsRoute), track, () => (route = Home));
-        page(
-            "/",
-            parsePathParams(() => ({ kind: "home_route", scope: { kind: "none" } })),
-            track,
-            () => (route = Home),
-        );
-        // legacy route
-        page(
-            "/:chatId/:messageIndex?/:threadMessageIndex?",
-            parsePathParams(globalGroupChatSelectedRoute({ kind: "chats" })),
-            track,
-            () => (route = Home),
-        );
-        page(
-            "*",
-            parsePathParams(() => ({ kind: "not_found_route", scope: { kind: "none" } })),
-            () => {
-                notFoundStore.set(true);
-                route = NotFound;
-            },
-        );
-
-        page.start({ click: false });
-        const cleanupNavigationHistoryTracking = initNavigationHistoryTracking();
-
-        routerReadyStore.set(true);
-
-        return () => {
-            cleanupNavigationHistoryTracking();
-            document.removeEventListener("click", onLinkClick, { capture: true });
-            page.stop();
-        };
-    });
-
-    function scrollToTop() {
-        window.scrollTo({
-            behavior: "auto",
-            top: 0,
-        });
-    }
-
-    function track(ctx: PageJS.Context, next: () => any) {
-        console.debug("GA: page_view", ctx.pathname);
-        gtag("event", "page_view", {
-            page_location: ctx.pathname,
-        });
-        next();
-    }
-
-    // This is where our general effects are going to go. They don't *really* belong in a component at all
-    // but unfortunately unowned effects do not respond to store value changes
-
-    // Set selected community
-    $effect(() => {
-        if ($chatsInitialisedStore && $selectedCommunityIdStore !== undefined) {
-            const id = $selectedCommunityIdStore;
-
-            // this untrack is not really necessary in this case but it's probably a good pattern to follow to
-            // make double sure we are only reacting to the things we want to react to
-            untrack(() => {
-                client.setSelectedCommunity(id).then((preview) => {
-                    if (preview && $selectedChatIdStore === undefined) {
-                        // if we are previewing the community we need to select the first chat manually
-                        client.selectDefaultChat();
-                    }
-                });
-            });
-        }
-    });
-
-    $effect(() => {
-        if (client.captureReferralCode()) {
-            navigate(removeQueryStringParam("ref"));
-        }
-    });
-
-    let previousChatId: ChatIdentifier | undefined = undefined;
-    $effect(() => {
-        /**
-         * The purpose of this effect is to capture the thread open when we click a thread when we already have a chat open
-         * Therefore this will not run when we click on a thread preview (because at that point both previousChatId will be undefined)
-         */
-        if (
-            $threadOpenStore &&
-            $messageIndexStore !== undefined &&
-            $selectedChatIdStore !== undefined &&
-            chatIdentifiersEqual(previousChatId, $selectedChatIdStore)
-        ) {
-            const chatId = $selectedChatIdStore;
-            const idx = $messageIndexStore;
-            const threadIdx = $threadMessageIndexStore;
-            untrack(() => {
-                client.openThreadFromMessageIndex(chatId, idx, threadIdx);
-            });
-        }
-        previousChatId = $selectedChatIdStore;
-    });
-
-    $effect(() => {
-        if (!$threadOpenStore) {
-            untrack(() => {
-                publish("closeThread");
-            });
-        }
-    });
-
-    $effect(() => {
-        if (
-            $selectedChatIdStore === undefined &&
-            $chatListScopeStore.kind !== "none" &&
-            !$exploringStore
-        ) {
-            const deepLink = consumePendingDeepLink();
-            const tapPath = deepLink === null ? consumePendingNotificationTap() : null;
-            if (deepLink) {
-                untrack(() => {
-                    try {
-                        const { pathname, search } = new URL(deepLink);
-                        navigate(pathname + search, "notification");
-                    } catch {
-                        console.error("Deep link: failed to parse cold-start URL", deepLink);
-                        client.selectDefaultChat();
-                    }
-                });
-            } else if (tapPath) {
-                untrack(() => navigate(tapPath, "notification"));
-            } else {
-                client.selectDefaultChat();
-            }
-        }
-    });
-
-    // Set selected chat
-    $effect(() => {
-        // we have to be *so* careful with the reactivity here. Is this actually better?
-        if (
-            $chatsInitialisedStore &&
-            $selectedChatIdStore !== undefined &&
-            ($routeKindStore === "selected_channel_route" ||
-                $routeKindStore === "global_chat_selected_route")
-        ) {
-            untrack(() => {
-                if (
-                    $routeStore.kind === "selected_channel_route" ||
-                    $routeStore.kind === "global_chat_selected_route"
-                ) {
-                    const id = $selectedChatIdStore;
-                    const messageIndex = $routeStore.messageIndex;
-                    const threadMessageIndex = $routeStore.threadMessageIndex;
-                    if (id !== undefined) {
-                        client.setSelectedChat(id, messageIndex, threadMessageIndex);
-                    }
-                }
-            });
-        }
-    });
-
-    // clear selected chat
-    $effect(() => {
-        if ($selectedChatIdStore === undefined) {
-            selectedServerChatStore.set(undefined);
-            previousChatId = undefined;
-        }
-    });
-</script>
-
-{#if route !== undefined}
-    {@const RouteComponent = route}
-    <RouteComponent />
-{/if}
diff --git a/frontend/app/src/components_mobile/Search.svelte b/frontend/app/src/components_mobile/Search.svelte
deleted file mode 100644
index 5d88ca53f4..0000000000
--- a/frontend/app/src/components_mobile/Search.svelte
+++ /dev/null
@@ -1,153 +0,0 @@
-<script lang="ts">
-    import { Container } from "component-lib";
-    import { iconSize, type ResourceKey } from "@client";
-    import { onMount } from "svelte";
-    import { _ } from "svelte-i18n";
-    import Close from "svelte-material-icons/Close.svelte";
-    import Magnify from "svelte-material-icons/Magnify.svelte";
-    import { translatable } from "../actions/translatable";
-    import { i18nKey, interpolate } from "../i18n/i18n";
-
-    interface Props {
-        searchTerm?: string;
-        searching: boolean;
-        placeholder?: ResourceKey;
-        inputStyle?: boolean;
-        autofocus?: boolean;
-        onPerformSearch?: (term: string) => void;
-        onFocus?: () => void;
-        onBlur?: () => void;
-    }
-
-    let {
-        searchTerm = $bindable(""),
-        searching = $bindable(false),
-        placeholder = i18nKey("searchPlaceholder"),
-        inputStyle = false,
-        onPerformSearch,
-        onFocus,
-        onBlur,
-        autofocus = false,
-    }: Props = $props();
-
-    let timer: number | undefined;
-    let inp: HTMLInputElement;
-
-    function performSearch(e: Event) {
-        e.preventDefault();
-        window.clearTimeout(timer);
-        onPerformSearch?.(searchTerm);
-    }
-    function clearSearch() {
-        searchTerm = "";
-        onPerformSearch?.(searchTerm);
-    }
-    function keydown(ev: KeyboardEvent) {
-        if (["Up", "Down", "Left", "Right", "Tab"].includes(ev.key)) {
-            return;
-        }
-        if (ev.key === "Escape") {
-            searchTerm = "";
-        }
-        if (timer !== undefined) {
-            window.clearTimeout(timer);
-        }
-        timer = window.setTimeout(() => {
-            if (searchTerm.length != 1) {
-                onPerformSearch?.(searchTerm);
-            }
-        }, 300);
-    }
-
-    onMount(() => {
-        if (autofocus) {
-            inp.focus();
-        }
-    });
-</script>
-
-<Container padding={["sm", "md"]}>
-    <form onsubmit={performSearch} class="wrapper" class:input-style={inputStyle}>
-        <input
-            bind:this={inp}
-            onkeydown={keydown}
-            spellcheck="false"
-            bind:value={searchTerm}
-            type="text"
-            class:input-style={inputStyle}
-            use:translatable={{ key: placeholder }}
-            placeholder={interpolate($_, placeholder)}
-            onfocus={onFocus}
-            onblur={onBlur} />
-        {#if searchTerm !== ""}
-            <!-- svelte-ignore a11y_click_events_have_key_events -->
-            <!-- svelte-ignore a11y_no_static_element_interactions -->
-            <span onclick={clearSearch} class="icon close" class:input-style={inputStyle}
-                ><Close
-                    viewBox={inputStyle ? "0 -3 24 24" : "0 0 24 24"}
-                    size={$iconSize}
-                    color={"var(--icon-txt)"} /></span>
-        {:else}
-            <span class="icon" class:searching class:input-style={inputStyle}>
-                {#if !searching}
-                    <Magnify
-                        viewBox={inputStyle ? "0 -3 24 24" : "0 0 24 24"}
-                        size={$iconSize}
-                        color={"var(--icon-txt)"} />
-                {/if}
-            </span>
-        {/if}
-    </form>
-</Container>
-
-<style lang="scss">
-    .wrapper {
-        background-color: var(--chatSearch-bg);
-        display: flex;
-        align-items: center;
-        position: relative;
-        border-radius: var(--rd);
-        box-shadow: var(--chatSearch-sh);
-        border: var(--bw) solid var(--chatSearch-bd);
-        border-radius: var(--chatSearch-rd);
-        width: 100%;
-
-        &.input-style {
-            padding: $sp3 $sp4;
-            border-radius: var(--rd);
-        }
-    }
-    .icon {
-        margin-top: $sp3;
-        flex: 0 0 25px;
-
-        &.input-style {
-            margin-top: 0;
-        }
-    }
-    .close {
-        cursor: pointer;
-    }
-    .searching {
-        @include loading-spinner(1em, 0.5em, var(--button-spinner));
-    }
-    input {
-        background-color: transparent;
-        color: var(--txt);
-        outline: none;
-        flex: 1;
-        padding: $sp3;
-        margin: 0;
-        border: none;
-        width: 100%;
-        @include font(book, normal, fs-100);
-
-        &.input-style {
-            padding: 0;
-        }
-
-        &::placeholder {
-            color: var(--placeholder);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/SecureButton.svelte b/frontend/app/src/components_mobile/SecureButton.svelte
deleted file mode 100644
index 2aa5a97078..0000000000
--- a/frontend/app/src/components_mobile/SecureButton.svelte
+++ /dev/null
@@ -1,47 +0,0 @@
-<script lang="ts">
-    import { CommonButton2, type ButtonProps } from "component-lib";
-    import { onMount } from "svelte";
-    import { suspectedAutomationBot } from "../stores/automation";
-    import { isTouchDevice } from "../utils/devices";
-
-    let {
-        children,
-        onClick,
-        label,
-        ...rest
-    }: ButtonProps & { label: string; onClick: (ev: MouseEvent) => void } = $props();
-
-    // real users move, pause and then click. Bots either don't move at all or move and then click immediately
-    const PAUSE_TRESHOLD = 10;
-
-    let lastMoved = Date.now();
-
-    onMount(() => {
-        document.addEventListener("mousemove", mousemove);
-        return () => {
-            document.removeEventListener("mousemove", mousemove);
-        };
-    });
-
-    function mousemove() {
-        lastMoved = Date.now();
-    }
-
-    function probablyBot(ev: MouseEvent): boolean {
-        const pause = Date.now() - lastMoved;
-        const fakePause = pause < PAUSE_TRESHOLD && !isTouchDevice;
-        return fakePause || !ev.isTrusted || $suspectedAutomationBot;
-    }
-
-    function internalOnclick(ev: MouseEvent) {
-        if (probablyBot(ev)) {
-            console.log("Looks like this button was clicked by a bot");
-        } else {
-            onClick(ev);
-        }
-    }
-</script>
-
-<CommonButton2 variant="primary" mode="regular" onClick={internalOnclick} {...rest}>
-    {@render children?.()}
-</CommonButton2>
diff --git a/frontend/app/src/components_mobile/SelectChatModal.svelte b/frontend/app/src/components_mobile/SelectChatModal.svelte
deleted file mode 100644
index a16f9c67f3..0000000000
--- a/frontend/app/src/components_mobile/SelectChatModal.svelte
+++ /dev/null
@@ -1,411 +0,0 @@
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<script lang="ts">
-    import { trackedEffect } from "@src/utils/effects.svelte";
-    import {
-        Avatar,
-        Body,
-        BodySmall,
-        ColourVars,
-        Column,
-        Row,
-        Search,
-        Subtitle,
-    } from "component-lib";
-    import type {
-        ChatIdentifier,
-        ChatSummary,
-        CommunityIdentifier,
-        CommunitySummary,
-        DiamondMembershipStatus,
-        DirectChatSummary,
-        MultiUserChat,
-        OpenChat,
-    } from "@client";
-    import {
-        allUsersStore,
-        chatIdentifiersEqual,
-        communitiesStore,
-        favouritesStore,
-        selectedChatIdStore,
-        serverDirectChatsStore,
-        serverGroupChatsStore,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import ForumOutline from "svelte-material-icons/ForumOutline.svelte";
-    import HeartOutline from "svelte-material-icons/HeartOutline.svelte";
-    import MessageOutline from "svelte-material-icons/MessageOutline.svelte";
-    import { i18nKey, interpolate } from "../i18n/i18n";
-    import { now } from "../stores/time";
-    import { buildDisplayName } from "../utils/user";
-    import CollapsibleCard from "./CollapsibleCard.svelte";
-    import NothingToSee from "./home/NothingToSee.svelte";
-    import Badges from "./home/profile/Badges.svelte";
-    import SlidingPageContent from "./home/SlidingPageContent.svelte";
-    import Translatable from "./Translatable.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        onSelect: (chatId: ChatIdentifier) => void;
-        onClose: () => void;
-    }
-
-    type ShareTo = {
-        directChats: ShareChat[];
-        groupChats: ShareChat[];
-        favourites: ShareChat[];
-        communities: ShareCommunity[];
-    };
-    type ShareChat = {
-        kind: "chat";
-        id: ChatIdentifier;
-        userId: string | undefined;
-        name: string;
-        diamondStatus: DiamondMembershipStatus["kind"];
-        streak: number;
-        avatarUrl: string;
-        description: string;
-        username: string | undefined;
-        lastUpdated: bigint;
-        uniquePerson: boolean;
-    };
-    type ShareCommunity = {
-        kind: "community";
-        id: CommunityIdentifier;
-        name: string;
-        avatarUrl: string;
-        description: string;
-        lastUpdated: bigint;
-        channels: ShareChat[];
-    };
-
-    let { onClose, onSelect }: Props = $props();
-    let searchTerm = $state("");
-    let searchTermLower = $derived(searchTerm.toLowerCase());
-    let targets = $state<ShareTo>();
-
-    trackedEffect("select-chat-modal", () => {
-        buildListOfTargets($now, $selectedChatIdStore, searchTermLower).then((t) => (targets = t));
-    });
-
-    let noTargets = $derived(targets !== undefined ? getNumberOfTargets(targets) === 0 : false);
-
-    function getNumberOfTargets(targets: ShareTo): number {
-        return (
-            targets.directChats.length +
-            targets.groupChats.length +
-            targets.communities.flatMap((c) => c.channels).length
-        );
-    }
-
-    async function targetsFromChatList(
-        now: number,
-        chats: ChatSummary[],
-        selectedChatId: ChatIdentifier | undefined,
-    ): Promise<ShareChat[]> {
-        return Promise.all(
-            filterChatSelection(chats, selectedChatId).map((c) => normaliseChatSummary(now, c)),
-        );
-    }
-
-    function matchesSearch(thing: ShareChat | ShareCommunity, searchTerm: string): boolean {
-        return (
-            (searchTerm === "" ||
-                thing.name.toLocaleLowerCase().includes(searchTerm) ||
-                (thing.kind === "chat" &&
-                    thing.username?.toLocaleLowerCase()?.includes(searchTerm))) ??
-            false
-        );
-    }
-
-    function chatMatchesSearch(chats: ShareChat[], searchTerm: string): ShareChat[] {
-        return chats.filter((c) => matchesSearch(c, searchTerm)).sort(compare);
-    }
-
-    function communityMatchesSearch(communities: ShareCommunity[], searchTerm: string) {
-        return communities
-            .reduce((agg, c) => {
-                if (matchesSearch(c, searchTerm)) {
-                    agg.push(c);
-                } else {
-                    const filtered = chatMatchesSearch(c.channels, searchTerm);
-                    if (filtered.length > 0) {
-                        agg.push({
-                            ...c,
-                            channels: filtered,
-                        });
-                    }
-                }
-                return agg;
-            }, [] as ShareCommunity[])
-            .sort(compare);
-    }
-
-    async function buildListOfTargets(
-        now: number,
-        selectedChatId: ChatIdentifier | undefined,
-        searchTerm: string,
-    ): Promise<ShareTo> {
-        let targets: ShareTo = {
-            directChats: [],
-            groupChats: [],
-            favourites: [],
-            communities: [],
-        };
-        const direct = [...$serverDirectChatsStore.values()].map((d) => ({
-            ...d,
-            name: buildDisplayName($allUsersStore, d.them.userId, "user"),
-        }));
-
-        const group = [...$serverGroupChatsStore.values()];
-        const channels = [...$communitiesStore.values()].flatMap((c) => c.channels);
-        const all = [...group, ...direct, ...channels];
-        const favs = all.filter((c) => $favouritesStore.has(c.id));
-        try {
-            const directChats = await targetsFromChatList(now, direct, selectedChatId);
-            const groupChats = await targetsFromChatList(now, group, selectedChatId);
-            const favourites = await targetsFromChatList(now, favs, selectedChatId);
-            const communities = await Promise.all(
-                [...$communitiesStore.values()].map((c) =>
-                    normaliseCommunity(now, selectedChatId, c),
-                ),
-            );
-            return {
-                directChats: chatMatchesSearch(directChats, searchTerm),
-                groupChats: chatMatchesSearch(groupChats, searchTerm),
-                favourites: chatMatchesSearch(favourites, searchTerm),
-                communities: communityMatchesSearch(communities, searchTerm),
-            };
-        } catch (err) {}
-        return targets;
-    }
-
-    async function normaliseCommunity(
-        now: number,
-        selectedChatId: ChatIdentifier | undefined,
-        { id, name, avatar, description, channels, lastUpdated }: CommunitySummary,
-    ): Promise<ShareCommunity> {
-        const normalisedChannels = await Promise.all(
-            filterChatSelection(channels, selectedChatId).map((c) => normaliseChatSummary(now, c)),
-        );
-        return {
-            kind: "community",
-            id,
-            name,
-            avatarUrl: client.communityAvatarUrl(id.communityId, avatar),
-            description,
-            lastUpdated,
-            channels: normalisedChannels,
-        };
-    }
-
-    async function normaliseChatSummary(now: number, chatSummary: ChatSummary): Promise<ShareChat> {
-        switch (chatSummary.kind) {
-            case "direct_chat":
-                const description = await buildDirectChatDescription(chatSummary, now);
-                const them = $allUsersStore.get(chatSummary.them.userId);
-                return {
-                    kind: "chat",
-                    id: chatSummary.id,
-                    userId: chatSummary.them.userId,
-                    name: client.displayName(them),
-                    diamondStatus: them?.diamondStatus ?? "inactive",
-                    streak: client.getStreak(chatSummary.them.userId),
-                    avatarUrl: client.userAvatarUrl(them),
-                    description,
-                    username: them ? "@" + them.username : undefined,
-                    lastUpdated: chatSummary.lastUpdated,
-                    uniquePerson: them?.isUniquePerson ?? false,
-                };
-
-            default:
-                return {
-                    kind: "chat",
-                    id: chatSummary.id,
-                    userId: undefined,
-                    name: chatSummary.name,
-                    diamondStatus: "inactive" as DiamondMembershipStatus["kind"],
-                    streak: 0,
-                    avatarUrl: client.groupAvatarUrl(chatSummary),
-                    description: buildGroupChatDescription(chatSummary),
-                    username: undefined,
-                    lastUpdated: chatSummary.lastUpdated,
-                    uniquePerson: false,
-                };
-        }
-    }
-
-    async function buildDirectChatDescription(
-        chat: DirectChatSummary,
-        now: number,
-    ): Promise<string> {
-        return client.getLastOnlineDate(chat.them.userId, now).then((lastOnline) => {
-            if (lastOnline !== undefined && lastOnline !== 0) {
-                return client.formatLastOnlineDate($_, now, lastOnline)[0];
-            } else {
-                return $_("offline");
-            }
-        });
-    }
-
-    function buildGroupChatDescription(group: MultiUserChat): string {
-        if (group.description.length > 0) {
-            return group.description;
-        } else {
-            const level = $_(`level.${group.level}`).toLowerCase();
-            const number = group.memberCount;
-            return group.public
-                ? $_("publicGroupWithN", { values: { number, level } })
-                : $_("privateGroupWithN", { values: { number, level } });
-        }
-    }
-
-    function filterChatSelection(
-        chats: ChatSummary[],
-        selectedChatId: ChatIdentifier | undefined,
-    ): ChatSummary[] {
-        return chats.filter(
-            (c) =>
-                !chatIdentifiersEqual(selectedChatId, c.id) &&
-                client.canSendMessage(c.id, "message", "text"),
-        );
-    }
-
-    function compare(a: { name: string }, b: { name: string }): number {
-        return a.name.localeCompare(b.name);
-    }
-</script>
-
-{#snippet generalHeader(Icon: any, title: string)}
-    <Row padding={["sm", "zero"]} gap={"md"} crossAxisAlignment={"center"}>
-        <Icon size={"1.5rem"} color={ColourVars.textPrimary} />
-        <Subtitle fontWeight={"bold"}>
-            <Translatable resourceKey={i18nKey(title)} />
-        </Subtitle>
-    </Row>
-{/snippet}
-
-{#snippet nonDirect(target: ShareChat)}
-    <Row
-        onClick={() => onSelect(target.id)}
-        padding={["sm", "md"]}
-        gap={"md"}
-        crossAxisAlignment={"center"}>
-        <Avatar url={target.avatarUrl} size={"lg"} />
-        <Column>
-            <Body width={"hug"}>{target.name}</Body>
-            <Body ellipsisTruncate colour={"textSecondary"}>
-                {target.description}
-            </Body>
-        </Column>
-    </Row>
-{/snippet}
-
-<SlidingPageContent title={i18nKey("sendTo")} onBack={onClose}>
-    <Column gap={"xl"} padding={"lg"}>
-        <Search
-            onClear={() => (searchTerm = "")}
-            searching={false}
-            bind:value={searchTerm}
-            placeholder={interpolate($_, i18nKey("search"))} />
-    </Column>
-    {#if noTargets}
-        <NothingToSee
-            title={interpolate($_, i18nKey("noChatsAvailable"))}
-            subtitle={"Looks like you aren't a member of any other chats"} />
-    {:else if targets !== undefined}
-        <Column>
-            {#if targets.directChats.length > 0}
-                <CollapsibleCard
-                    open={searchTerm !== ""}
-                    first
-                    fill
-                    transition={false}
-                    headerText={i18nKey("communities.directChats")}>
-                    {#snippet titleSlot()}
-                        {@render generalHeader(MessageOutline, "communities.directChats")}
-                    {/snippet}
-                    {#each targets.directChats as target}
-                        <Row
-                            onClick={() => onSelect(target.id)}
-                            padding={["sm", "md"]}
-                            gap={"md"}
-                            crossAxisAlignment={"center"}>
-                            <Avatar url={target.avatarUrl} size={"lg"} />
-                            <Column>
-                                <Row width={"hug"} crossAxisAlignment={"center"} gap={"xs"}>
-                                    <Body width={"hug"}>{target.name}</Body>
-                                    <Badges
-                                        uniquePerson={target.uniquePerson}
-                                        diamondStatus={target.diamondStatus}
-                                        streak={target.streak} />
-                                    {#if target.username !== undefined}
-                                        <BodySmall colour={"textSecondary"}>
-                                            {target.username}
-                                        </BodySmall>
-                                    {/if}
-                                </Row>
-                                <Body colour={"textSecondary"}>
-                                    {target.description}
-                                </Body>
-                            </Column>
-                        </Row>
-                    {/each}
-                </CollapsibleCard>
-            {/if}
-            {#if targets.groupChats.length > 0}
-                <CollapsibleCard
-                    transition={false}
-                    fill
-                    open={searchTerm !== ""}
-                    headerText={i18nKey("communities.groupChats")}>
-                    {#snippet titleSlot()}
-                        {@render generalHeader(ForumOutline, "communities.groupChats")}
-                    {/snippet}
-                    {#each targets.groupChats as target}
-                        {@render nonDirect(target)}
-                    {/each}
-                </CollapsibleCard>
-            {/if}
-            {#if targets.favourites.length > 0}
-                <CollapsibleCard
-                    transition={false}
-                    fill
-                    open={searchTerm !== ""}
-                    headerText={i18nKey("communities.favourites")}>
-                    {#snippet titleSlot()}
-                        {@render generalHeader(HeartOutline, "communities.favourites")}
-                    {/snippet}
-                    {#each targets.favourites as target}
-                        {@render nonDirect(target)}
-                    {/each}
-                </CollapsibleCard>
-            {/if}
-            {#each targets.communities as community}
-                {#if community.channels.length > 0}
-                    <CollapsibleCard
-                        fill
-                        transition={false}
-                        open={searchTerm !== ""}
-                        headerText={i18nKey(community.name)}>
-                        {#snippet titleSlot()}
-                            <Row
-                                padding={["zero", "zero"]}
-                                gap={"md"}
-                                crossAxisAlignment={"center"}>
-                                <Avatar url={community.avatarUrl} size={"lg"} />
-                                <Subtitle fontWeight={"bold"}>
-                                    {community.name}
-                                </Subtitle>
-                            </Row>
-                        {/snippet}
-                        {#each community.channels as target}
-                            {@render nonDirect(target)}
-                        {/each}
-                    </CollapsibleCard>
-                {/if}
-            {/each}
-        </Column>
-    {/if}
-</SlidingPageContent>
diff --git a/frontend/app/src/components_mobile/SuspendedModal.svelte b/frontend/app/src/components_mobile/SuspendedModal.svelte
deleted file mode 100644
index 91d68506b5..0000000000
--- a/frontend/app/src/components_mobile/SuspendedModal.svelte
+++ /dev/null
@@ -1,42 +0,0 @@
-<script lang="ts">
-    import { Body, ColourVars, Column, H2, Row, Sheet } from "component-lib";
-    import { currentUserStore } from "@client";
-    import RobotDead from "svelte-material-icons/RobotDeadOutline.svelte";
-    import { i18nKey } from "../i18n/i18n";
-    import Translatable from "./Translatable.svelte";
-
-    interface Props {
-        onClose: () => void;
-    }
-
-    let { onClose }: Props = $props();
-
-    let suspensionDetails = $derived($currentUserStore.suspensionDetails);
-    let actionDate = $derived(new Date(Number(suspensionDetails?.action?.timestamp)));
-    const actionText = $derived(
-        suspensionDetails?.action?.kind === "delete_action" ? "deleted" : "unsuspended",
-    );
-    let notice = $derived(
-        `You can appeal this suspension by sending a direct message to the @OpenChat Twitter account otherwise your account will be ${actionText} on ${actionDate?.toLocaleString()}.`,
-    );
-</script>
-
-<Sheet onDismiss={onClose}>
-    <Column crossAxisAlignment={"center"} gap={"xl"} padding={"xl"}>
-        <H2 width={"hug"} fontWeight={"bold"} colour={"primary"}>
-            <Translatable resourceKey={i18nKey("accountSuspended")} />
-        </H2>
-        <Row padding={["lg", "zero"]} mainAxisAlignment={"center"}>
-            <RobotDead color={ColourVars.primary} size={"6rem"} />
-        </Row>
-        <Column>
-            {#if $currentUserStore.suspensionDetails?.reason !== undefined}
-                <Row gap={"sm"}>
-                    <Body width={"hug"} colour={"primary"}>Reason:</Body>
-                    <Body width={"hug"}>{$currentUserStore.suspensionDetails?.reason}</Body>
-                </Row>
-            {/if}
-        </Column>
-        <Body colour={"textSecondary"}>{notice}</Body>
-    </Column>
-</Sheet>
diff --git a/frontend/app/src/components_mobile/Tabs.svelte b/frontend/app/src/components_mobile/Tabs.svelte
deleted file mode 100644
index f83a92f2f7..0000000000
--- a/frontend/app/src/components_mobile/Tabs.svelte
+++ /dev/null
@@ -1,79 +0,0 @@
-<script module>
-    export type Tab = {
-        title: ResourceKey;
-        snippet: Snippet;
-    };
-</script>
-
-<script lang="ts">
-    import { Body, BodySmall, Row, transition } from "component-lib";
-    import type { ResourceKey } from "@client";
-    import type { Snippet } from "svelte";
-    import Translatable from "./Translatable.svelte";
-
-    interface Props {
-        tabs: Tab[];
-        initialIndex?: number;
-        nested?: boolean;
-        selectedIndex?: number;
-        onTabSelected?: (index: number) => void;
-    }
-
-    let {
-        tabs,
-        initialIndex = 0,
-        nested = false,
-        selectedIndex = $bindable(initialIndex),
-        onTabSelected,
-    }: Props = $props();
-
-    function selectTab(idx: number) {
-        transition(["fade"], () => {
-            selectedIndex = idx;
-            onTabSelected?.(idx);
-        });
-    }
-</script>
-
-<Row overflow={"visible"} gap={"md"} crossAxisAlignment={"center"}>
-    {#each tabs as tab, i}
-        {@const selected = selectedIndex === i}
-        <!-- svelte-ignore a11y_click_events_have_key_events -->
-        <div
-            tabindex="0"
-            role="button"
-            class="tab"
-            class:nested
-            onclick={() => selectTab(i)}
-            class:selected>
-            {#if nested}
-                <BodySmall colour={selected ? "textPrimary" : "textSecondary"} fontWeight={"bold"}>
-                    <Translatable resourceKey={tab.title}></Translatable>
-                </BodySmall>
-            {:else}
-                <Body colour={selected ? "textPrimary" : "textSecondary"} fontWeight={"bold"}>
-                    <Translatable resourceKey={tab.title}></Translatable>
-                </Body>
-            {/if}
-        </div>
-    {/each}
-</Row>
-{#if selectedIndex !== undefined}
-    {@render tabs[selectedIndex]?.snippet()}
-{/if}
-
-<style lang="scss">
-    .tab {
-        padding-bottom: toRem(8);
-        margin-bottom: -2px;
-        border-bottom: var(--bw-thick) solid transparent;
-        white-space: nowrap;
-        &.selected {
-            border-bottom: var(--bw-thick) solid var(--text-primary);
-
-            &.nested {
-                border-bottom-color: var(--primary);
-            }
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/TermsContent.svelte b/frontend/app/src/components_mobile/TermsContent.svelte
deleted file mode 100644
index 1aa5766103..0000000000
--- a/frontend/app/src/components_mobile/TermsContent.svelte
+++ /dev/null
@@ -1,2122 +0,0 @@
-<script lang="ts">
-    import { locationStore, OpenChat } from "@client";
-    import { getContext } from "svelte";
-    import { copyToClipboard } from "../utils/urls";
-    import HashLinkTarget from "./HashLinkTarget.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    function onCopyUrl(e: Event, section: string): void {
-        e.stopPropagation();
-        copyToClipboard(`${client.canonicalOrigin()}${$locationStore}?section=${section}`);
-    }
-</script>
-
-<div class="preamble">
-    <p>
-        IT IS IMPORTANT YOU READ THESE TERMS CAREFULLY BEFORE USING THE OPENCHAT PLATFORM OR
-        OTHERWISE USING OUR SERVICES. BY USING THE OPENCHAT PLATFORM OR OTHERWISE USING OUR
-        SERVICES, YOU INDICATE THAT YOU ACCEPT THESE TERMS AND AGREE TO COMPLY WITH THEM. IF YOU USE
-        THE OPENCHAT PLATFORM OR OTHERWISE USE OUR SERVICES IN THE COURSE OF YOUR BUSINESS OR WORK,
-        YOU ARE ALSO AGREEING TO THESE TERMS ON BEHALF OF THAT BUSINESS. IF YOU DO NOT AGREE TO
-        THESE TERMS, YOU MUST NOT USE THE OPENCHAT PLATFORM OR OTHERWISE USE OUR SERVICES.
-    </p>
-
-    <p>
-        YOU SHOULD CAREFULLY CONSIDER WHETHER USING THE OPENCHAT PLATFORM OR OTHERWISE DEALING IN
-        CRYPTOASSETS IS SUITABLE FOR YOU IN LIGHT OF YOUR OWN SITUATION AND ATTITUDE TO RISK, AS
-        EVALUATED BY YOU CAREFULLY. WE DO NOT MAKE ANY REPRESENTATIONS OR RECOMMENDATIONS REGARDING
-        THE ADVISABILITY OR OTHERWISE OF USING THE OPENCHAT PLATFORM OR OTHERWISE USING OUR SERVICES
-        OR DEALING IN CRYPTOASSETS. IF YOU ARE UNSURE AS TO WHETHER USING THE OPENCHAT PLATFORM,
-        USING OUR SERVICES OR OTHERWISE DEALING IN CRYPTOASSETS IS SUITABLE FOR YOU, YOU SHOULD SEEK
-        INDEPENDENT PROFESSIONAL ADVICE PRIOR TO USING THE OPENCHAT PLATFORM, USING OUR SERVICES OR
-        OTHERWISE DEALING IN CRYPTOASSETS. DEALING IN CRYPTOASSETS MAY NOT BE SUBJECT TO ANY
-        INVESTOR PROTECTION, AND MAY INVOLVE A HIGH DEGREE OF RISK TO YOUR CAPITAL.
-    </p>
-</div>
-
-<div class="section">
-    <HashLinkTarget {onCopyUrl} id="1">
-        <h2>Section A: General terms applicable to all services</h2>
-    </HashLinkTarget>
-
-    <ul class="custom_list bold" style={"--prefix: 'A'; --suffix: ''"}>
-        <li>
-            <h3>Introduction</h3>
-
-            <ul class="custom_list" style={"--prefix: '1.'"}>
-                <li>
-                    We are OpenChat DAO. In these Terms, we refer to ourselves as "<strong
-                        >OpenChat</strong
-                    >", “<strong>we</strong>”, “<strong>us</strong>”, or “<strong>our</strong>”. We
-                    operate the OpenChat Platform which enables users of the OpenChat Platform (“<strong
-                        >you</strong
-                    >”, “<strong>your</strong>”) to access and benefit from our Services.
-                </li>
-                <li>
-                    These terms and conditions and each of the documents we refer to in them (all
-                    together, the “<strong>Terms</strong>”) form the relationship between us and you
-                    in relation to your use of the OpenChat Platform and our Services provided under
-                    these Terms (our “<strong>Services</strong>”). Our Terms apply when using
-                    specific Services as follows:
-
-                    <ul class="custom_list" style={"--prefix: '1.2.'"}>
-                        <li>Section A: General terms applicable to all Services</li>
-                        <li>Section B: Additional terms for messaging on the OpenChat Platform</li>
-                        <li>Section C: Additional terms for using the OpenChat Wallet</li>
-                        <li>Section D: Additional terms applicable to Swaps</li>
-                        <li>Section E: Additional terms for dealing in CHAT</li>
-                        <li>Section F: Additional terms for Diamond Membership holders</li>
-                        <li>Section G: Participating in the OpenChat DAO</li>
-                        <li>Schedule 1: Risks relating to Cryptoassets</li>
-                        <li>Schedule 2: Content Standards</li>
-                        <li>Schedule 3: CHAT Features</li>
-                        <li>Schedule 4: Multiple accounts</li>
-                    </ul>
-                </li>
-                <li>
-                    By using the OpenChat platform, you confirm that you accept these Terms and that
-                    you agree to comply with them. If you do not agree to these Terms, you must not
-                    use the OpenChat Platform or our Services.
-                </li>
-                <li>
-                    <h3>Interpretation</h3>
-                    <p>
-                        In these Terms, the following words and expressions have the following
-                        meanings:
-                    </p>
-                    <div class="interpretation">
-                        <div>"Applicable Law"</div>
-                        <div>
-                            all applicable statutes, laws, enactments, orders, regulations,
-                            regulatory rules, official guidance, standards, regulator expectations
-                            and other similar instruments in any relevant jurisdiction, as in force
-                            and amended from time to time;
-                        </div>
-                        <div>"Channel"</div>
-                        <div>
-                            refers to chats within Communities, to make clear that they are part of
-                            a Community;
-                        </div>
-                        <div>"CHAT"</div>
-                        <div>
-                            refers to the token used to facilitate the governance of OpenChat, with
-                            the features set out at Schedule 3;
-                        </div>
-                        <div>"Community", "Communities"</div>
-                        <div>
-                            refers to a group of Channels users can communicate within. This is
-                            distinct from the concept of a Group, as in a Group involves users
-                            messaging within a single channel (and Communities and Groups are a
-                            distinct forms of communication within the OpenChat Platform);
-                        </div>
-                        <div>"Content Standards"</div>
-                        <div>
-                            means the standards that apply to all Contributions, as set out at
-                            Schedule 2;
-                        </div>
-                        <div>"Contribution"</div>
-                        <div>
-                            refers to any material which you contribute to the OpenChat Platform,
-                            including any communication you make via our Services;
-                        </div>
-                        <div>"Cryptoassets"</div>
-                        <div>
-                            refers to CHAT as well as any and all other cryptoassets that are
-                            supported by the OpenChat Platform, a list of which are available in
-                            your OpenChat Wallet;
-                        </div>
-                        <div>"Diamond Membership"</div>
-                        <div>
-                            refers to our subscription service that gives members access to
-                            exclusive benefits;
-                        </div>
-                        <div>"Exchange Swap"</div>
-                        <div>has the meaning set out at clause D 1.2.1;</div>
-                        <div>"Gated"</div>
-                        <div>
-                            refers to the restrictions or rules that the owner of a Group,
-                            Community, or Channel may impose on users' ability to access or use that
-                            Group, Community, or Channel;
-                        </div>
-                        <div>"Governance Matters"</div>
-                        <div>
-                            refers to matters which relate to the operation or governance of the
-                            OpenChat DAO;
-                        </div>
-                        <div>"Group"</div>
-                        <div>
-                            refers to a channel in which a group of users can communicate. This is
-                            distinct from the concept of a Community, as a Community involves users
-                            messaging within a set of channels (and Communities and Groups are a
-                            distinct forms of communication within the OpenChat Platform);
-                        </div>
-                        <div>"Manifest Error"</div>
-                        <div>
-                            refers to the purported price of a Cryptoasset that differs so
-                            significantly from that reported by exchanges generally that it is
-                            clearly inaccurate due to, for example, a computer error;
-                        </div>
-                        <div>"OpenChat Platform"</div>
-                        <div>
-                            refers to the platform we provide, available at <a
-                                href="https://oc.app/">https://oc.app</a
-                            >;
-                        </div>
-                        <div>"OpenChat Wallet"</div>
-                        <div>
-                            refers to the digital wallet we provide, in which you can store your
-                            Cryptoassets;
-                        </div>
-                        <div>"P2P Swap"</div>
-                        <div>has the meaning set out at clause D 1.2.2;</div>
-                        <div>"Prize Messages"</div>
-                        <div>
-                            refers to messages containing Cryptoassets which are distributed to
-                            OpenChat users, who, upon receipt of the message, can potentially be
-                            gifted Cryptoassets;
-                        </div>
-                        <div>"Source Cryptoasset"</div>
-                        <div>
-                            refers to the Cryptoasset you wish to exchange to obtain the Target
-                            Cryptoasset;
-                        </div>
-                        <div>"Swap(s)"</div>
-                        <div>
-                            refers to either or both an Exchange Swap and / or a P2P Swap (as
-                            relevant);
-                        </div>
-                        <div>"Swap Offer"</div>
-                        <div>has the meaning set out at clause D 1.6;</div>
-                        <div>"Target Cryptoasset"</div>
-                        <div>
-                            refers to the Cryptoasset you wish to acquire in exchange for the Source
-                            Cryptoasset;
-                        </div>
-                        <div>"Virus"</div>
-                        <div>
-                            means any software, thing or device which contains any malicious code,
-                            file, program, or other internal component which may prevent, impair or
-                            otherwise adversely affect the operation of any computer software,
-                            hardware or network; or which may prevent, impair or otherwise adversely
-                            affect access to or the operation of any programme or data, including
-                            the reliability of any programme or data (whether by re-arranging,
-                            altering or erasing the programme or data in whole or part or
-                            otherwise); or adversely affect the user experience, including worms,
-                            trojan horses, viruses, time bombs and other similar things or devices;
-                        </div>
-                        <div>"Voting Platform"</div>
-                        <div>
-                            refers to the mechanism by which CHAT holders may submit votes as
-                            prescribed from time to time; and
-                        </div>
-                        <div>"Vulnerability"</div>
-                        <div>
-                            means a weakness, glitch or bug in the computational logic (for example,
-                            code) found in software and hardware components that, when exploited,
-                            results in a negative impact to confidentiality, integrity, or
-                            availability.
-                        </div>
-                    </div>
-                </li>
-                <li>
-                    Where the words "<strong>includes</strong>", "<strong>including</strong>", "<strong
-                        >for example</strong
-                    >" or "<strong>such as</strong>" are used in these Terms, they are deemed to
-                    have the words "<strong>without limitation</strong>" following them.
-                </li>
-                <li>
-                    A reference to “<strong>writing</strong>” or “<strong>written</strong>” includes
-                    email but not faxes. Any reference to "<strong>written consent</strong>" shall
-                    mean specific explicit consent.
-                </li>
-                <li>
-                    References to “<strong>dealing in</strong>” or “<strong>deal in</strong>” are
-                    references to any participation in Cryptoassets including buying, acquiring,
-                    accepting, holding, selling, staking, disposing of and / or otherwise making use
-                    of Cryptoassets. References to “<strong>transaction”</strong> or “<strong
-                        >transactions</strong
-                    >” are references to any activity involving a person disposing, acquiring, or
-                    otherwise transferring a Cryptoasset to another person (be that by a Swap, a
-                    chat message, or any other means).
-                </li>
-                <li>
-                    The headings of the clauses and schedules of these Terms are for convenience
-                    only and shall not affect its construction or interpretation. The schedules form
-                    part of these Terms and any reference in these Terms to a clause or schedule is
-                    a reference to a clause or schedule of these Terms.
-                </li>
-                <li>
-                    A reference to these Terms or to any other agreement or document referred to in
-                    these Terms is a reference to these Terms or such other document or agreement as
-                    amended or varied in accordance with its terms from time to time.
-                </li>
-                <li>
-                    A reference to a statute, statutory provision or subordinate legislation is a
-                    reference to it as it is in force from time to time, and includes any statute,
-                    statutory provision or subordinate legislation which it amends or re-enacts and
-                    subordinate legislation for the time being in force made under it.
-                </li>
-                <li>
-                    Unless the context otherwise requires, words in the singular shall include the
-                    plural and the plural shall include the singular, and a reference to one gender
-                    shall include a reference to the other genders.
-                </li>
-            </ul>
-        </li>
-        <li>
-            <h3>Contact Details</h3>
-
-            <ul class="custom_list" style={"--prefix: '2.'"}>
-                <li>
-                    If you have any queries, you can contact us via the help channel in the OpenChat
-                    Community, accessible via the OpenChat Platform.
-                </li>
-                <li>
-                    Communications between us shall be in English. Should we receive a communication
-                    which purports to be from you, we are entitled, but are not obliged, to rely on
-                    and conclusively presume that such communication has been given by you. We may
-                    record and monitor conversations we have with you.
-                </li>
-                <li>
-                    You must keep your information with us up to date, as any communication we send
-                    using the details you provide us will be deemed received by you, regardless of
-                    whether or not you actually receive it.
-                </li>
-                <li>
-                    You accept that we are deemed to have received any correspondence only at the
-                    time we actually access it. You accept that there may be a delay in responding
-                    to correspondence received.
-                </li>
-            </ul>
-        </li>
-        <li>
-            <h3>Setting up and securing your OpenChat account</h3>
-
-            <ul class="custom_list" style={"--prefix: '3.'"}>
-                <li>
-                    Before you can use our Services, you need to set up an account and provide
-                    certain information. You can do this via our Platform.
-                </li>
-                <li>
-                    To set up an account, our Platform will ask you to authenticate your identity
-                    via a third party identity provider. By authenticating your identity, you agree
-                    to the terms of the third party identity provider.
-                </li>
-                <li>
-                    As part of setting up your account, you may be provided with or asked to create
-                    security details. You must keep your security details secure and not disclose
-                    them to anyone else. Any action or instruction by anyone using your security
-                    details will be treated as if such action or instruction had been made by you,
-                    and we are not responsible for any loss as a result. You should contact us
-                    immediately upon discovering any unauthorised use of your security details.
-                </li>
-                <li>
-                    <strong
-                        >We strongly recommend logging out of the OpenChat Platform at the end of
-                        every session you have on the OpenChat Platform, as otherwise the OpenChat
-                        Platform may not prompt the next user of the device used to access the
-                        OpenChat Platform to enter credentials in order to use the OpenChat
-                        Platform. If you do not log out of the OpenChat Platform at the end of each
-                        session, there is a risk that another person may impersonate you, for
-                        example to send Contributions or to access your Cryptoassets without your
-                        knowledge or consent. We are not responsible for any losses as a consequence
-                        of your failure to log out at the end of a session or your credentials
-                        otherwise being compromised.
-                    </strong>
-                </li>
-            </ul>
-        </li>
-
-        <li>
-            <h3>Eligibility to use our services</h3>
-
-            <ul class="custom_list" style={"--prefix: '4.'"}>
-                <li>
-                    <p>
-                        By using the OpenChat Platform, you confirm and represent at all times that:
-                    </p>
-
-                    <ul class="custom_list" style={"--prefix: '4.1.'"}>
-                        <li>
-                            (if you are a body corporate) you are duly organised and validly
-                            existing under the laws of the jurisdiction of your domicile, and have
-                            full power, authority and right, and have taken all action required, to
-                            bind yourself to these Terms, including as regards performing all
-                            actions and obligations under these Terms, which therefore constitute
-                            valid and legally binding obligations;
-                        </li>
-                        <li>
-                            (if you are an individual) you are of legal age and competency to agree
-                            to these Terms and all related obligations, including as regards any
-                            age, residency, legal capacity, competency and all other requirements;
-                        </li>
-                        <li>
-                            you are not a citizen or resident of, or a legal entity in any country
-                            or territory which appears on the sanctions lists of the Office of
-                            Foreign Assets Control of the U.S. Department of Treasury (“<strong
-                                >OFAC</strong
-                            >”), United Nations Security Council (“<strong>UNSC</strong>”), Her
-                            Majesty’s Treasury (“<strong>HMT</strong>”) or any other relevant
-                            sanctions list;
-                        </li>
-                        <li>
-                            (if using our Services to deal in Cryptoassets) you are not a citizen or
-                            resident of, or a legal entity in any country that prohibits dealing in
-                            Cryptoassets or which would otherwise require us to have a licence,
-                            permission, registration or authorisation which we do not have;
-                        </li>
-                        <li>
-                            (if using our Services to send Contributions) you shall not make a
-                            Contribution that is prohibited in the country where you are a citizen
-                            or resident, or registered as a legal entity.
-                        </li>
-                        <li>
-                            you will comply with any Applicable Law relevant to you, including not
-                            committing, causing, facilitating or contributing to the commission by
-                            any person of any bribery, corruption or tax evasion offence;
-                        </li>
-                        <li>
-                            you shall not deal in Cryptoassets where this would require you or us to
-                            obtain any registration, approval, authorisation or similar which you /
-                            we do not have, or in any other circumstances in which your dealing in
-                            Cryptoassets is prohibited;
-                        </li>
-                        <li>
-                            in using the OpenChat Platform you do not breach the rights of any third
-                            party, including any intellectual property or data privacy rights of any
-                            third party;
-                        </li>
-                        <li>
-                            you have not received any advice from us in relation to the using the
-                            Openchat Platform or our Services or dealing in CHAT, and you are solely
-                            responsible for any evaluations, decisions and actions taken in
-                            connection with such;
-                        </li>
-                        <li>
-                            you will provide us with whatever information we may request for the
-                            purposes of satisfying our regulatory, compliance and contractual
-                            obligations;
-                        </li>
-                        <li>
-                            you will deal with us in any open and honest way, including as regards
-                            providing us with full, complete and accurate information when
-                            responding to our reasonable requests;
-                        </li>
-                        <li>
-                            you waive any right you may have to participate in a class action
-                            lawsuit or a class-wide arbitration against us and / or any person
-                            involved with us that arises out of or relates to CHAT or these Terms;
-                        </li>
-                        <li>
-                            you will not attempt to circumvent the security of or interfere with the
-                            proper working of the OpenChat Platform, CHAT or any server on which
-                            they are hosted, nor otherwise introduce, nor permit the introduction
-                            of, any Virus or Vulnerability into the OpenChat Platform, CHAT nor any
-                            of our systems; and
-                        </li>
-                        <li>
-                            you will not use (or assist others in using) our Services or CHAT in
-                            ways that are unlawful, misleading, harmful, discriminatory or
-                            fraudulent.
-                        </li>
-                    </ul>
-                </li>
-                <li>
-                    In using the OpenChat Platform and our Services you are responsible for all
-                    activity that occurs under your OpenChat account and via any device connected
-                    with/to your OpenChat account.
-                </li>
-                <li>
-                    You shall notify us via the help channel in the OpenChat Community (accessible
-                    via the OpenChat Platform) immediately if you become aware you have breached, or
-                    may have breached, any of your obligations under these Terms.
-                </li>
-                <li>
-                    You may not create multiple accounts on the OpenChat Platform according to
-                    Schedule 4;
-                </li>
-            </ul>
-        </li>
-
-        <li>
-            <h3>Availability</h3>
-
-            <ul class="custom_list" style={"--prefix: '5.'"}>
-                <li>
-                    Whilst we strive to make our Services and the OpenChat Platform available for
-                    all users all the time, we do not guarantee that our Services or the OpenChat
-                    Platform will be available without interruption, and there may be unavailability
-                    for reasons such as maintenance, repairs, upgrades, or failures of network or
-                    equipment.
-                </li>
-                <li>
-                    We shall not be responsible for any loss from or arising out of Service
-                    interruptions, delays in processing transactions or inability to execute
-                    transactions.
-                </li>
-            </ul>
-        </li>
-
-        <li>
-            <h3>General obligations when dealing with cryptoassets</h3>
-
-            <ul class="custom_list" style={"--prefix: '6.'"}>
-                <li>
-                    <p>
-                        When using our Services to deal in Cryptoassets (including CHAT), you
-                        acknowledge and accept that:
-                    </p>
-                    <ul class="custom_list" style={"--prefix: '6.1.'"}>
-                        <li>
-                            you understand that we do not provide, nor do we accept responsibility
-                            for, any investment, legal, tax or accounting advice, and we do not
-                            provide any form of recommendation regarding the
-                            suitability/appropriateness or quality of any Cryptoasset, and the fact
-                            that our Services may be used in relation to any Cryptoasset should not
-                            be taken as an indication of such;
-                        </li>
-                        <li>
-                            your dealing in Cryptoassets is based on your own assessment of the
-                            risks involved, and if you are in any doubt as to what these risks are
-                            you confirm you have taken your own independent advice as appropriate;
-                        </li>
-                        <li>
-                            you are responsible for ensuring that any Cryptoassets and software
-                            (including any external wallet) you use in connection with our Services
-                            is compatible with the OpenChat Platform and CHAT, and we are not liable
-                            in the event of any incompatibility resulting in loss;
-                        </li>
-                        <li>
-                            you are only able to send Cryptoassets using our Services that are
-                            stored in your OpenChat Wallet, and you are not able to send
-                            Cryptoassets stored in any external wallet;
-                        </li>
-                        <li>
-                            the OpenChat Platform will refuse to complete, cancel or reverse any
-                            transaction you have authorised or made using our Services where there
-                            is insufficient Cryptoassets in your OpenChat Wallet to cover the
-                            transaction and our fees incurred;
-                        </li>
-                        <li>
-                            you will be charged a fee for every chat message sent containing
-                            Cryptoassets as determined by the relevant Cryptoasset ledger, and this
-                            fee will be automatically deducted from your OpenChat Wallet (this is
-                            not a fee charged by us);
-                        </li>
-                        <li>
-                            you will provide us with whatever information we request to facilitate
-                            any transaction using our Services;
-                        </li>
-                        <li>
-                            Cryptoasset transfers are irreversible and so accidental or fraudulent
-                            transactions with respect to Cryptoassets may not be recoverable. We are
-                            not responsible for any losses that may arise in connection with
-                            accidental or fraudulent transactions and as such, caution should be
-                            exercised whenever you make a transaction via the OpenChat Platform;
-                        </li>
-                        <li>
-                            whilst we will use reasonable endeavours to ensure that instructions in
-                            relation to Cryptoassets are processed in a timely manner, we make no
-                            representation or warranty regarding the amount of time needed to
-                            complete any instruction, as this is dependent upon many factors outside
-                            of our control, and we shall not be responsible for any loss from or
-                            arising out of delays in processing transactions or any inability to
-                            execute transactions; and
-                        </li>
-                        <li>
-                            you are responsible for complying with any tax obligations applicable to
-                            you in connection with your dealing in Cryptoassets.
-                        </li>
-                    </ul>
-                </li>
-            </ul>
-        </li>
-        <li>
-            <h3>Intellectual property</h3>
-
-            <ul class="custom_list" style={"--prefix: '7.'"}>
-                <li>
-                    OpenChat and their licensors (if any) are at all times the owners of all
-                    intellectual property rights (of whatever nature, anywhere in the world)
-                    associated with our Services, the OpenChat Platform or CHAT, as well as any
-                    related software or information provided in relation to the CHAT (the “<strong>
-                        OpenChat Intellectual Property
-                    </strong>”). The OpenChat Intellectual Property and aforesaid rights are
-                    licensed (not sold) to you under the AGPLv3 licence (at
-                    <a href="https://www.gnu.org/licenses/agpl-3.0.html"
-                        >https://www.gnu.org/licenses/agpl-3.0.html</a
-                    >) and you have the right to use the OpenChat Intellectual Property only for the
-                    purpose of using our Services and as otherwise permitted under the AGPLv3
-                    licence. You have no intellectual property rights in the OpenChat Intellectual
-                    Property other than the right to use them in accordance with these Terms and the
-                    AGPLv3 licence. Any other use is expressly prohibited. We reserve all rights not
-                    expressly granted under these Terms.
-                </li>
-
-                <li>
-                    <p>
-                        The main repository for the OpenChat application used in the OpenChat
-                        Platform is at <a href="https://github.com/open-chat-labs/open-chat/"
-                            >https://github.com/open-chat-labs/open-chat/</a
-                        >. You may use this code solely in accordance with the AGPLv3 licence or as
-                        otherwise expressly agreed by us in these Terms or in writing. Subject to
-                        the foregoing, you shall not, except as may be allowed by Applicable Law
-                        which is incapable of exclusion by agreement between the Parties:
-                    </p>
-                    <ul class="custom_list" style={"--prefix: '7.1.'"}>
-                        <li>
-                            except to the extent expressly permitted under these Terms, attempt to
-                            copy, modify, duplicate, create derivative works from, frame, mirror,
-                            republish, download, display, transmit, or distribute all or any portion
-                            of any OpenChat Intellectual Property;
-                        </li>
-                        <li>
-                            attempt to reverse compile, disassemble, reverse engineer or otherwise
-                            reduce to human-perceivable form all or any part of any OpenChat
-                            Intellectual Property;
-                        </li>
-                        <li>
-                            access all or any part of the OpenChat Intellectual Property in order to
-                            build a product or Service which competes with the CHAT and / or the
-                            activities of OpenChat;
-                        </li>
-                        <li>
-                            license, sell, rent, lease, transfer, assign, distribute, display,
-                            disclose, or otherwise commercially exploit OpenChat Intellectual
-                            Property, and this includes not doing so via any third party; and / or
-                        </li>
-                        <li>
-                            attempt to obtain, or assist third parties in obtaining, access to
-                            OpenChat Intellectual Property other than as expressly permitted by
-                            these Terms.
-                        </li>
-                    </ul>
-                </li>
-                <li>
-                    All logos related to us and the OpenChat Intellectual Property are marks of
-                    OpenChat or our licensors. You may not copy, imitate, or use our trading names
-                    or logos without our prior written consent. All rights, title and interests in
-                    and to such is the exclusive property of us and our licensors.
-                </li>
-                <li>
-                    OpenChat Intellectual Property may contain code, commonly referred to as
-                    open-source software, which is distributed under any of the many known
-                    variations of open source licence terms, including terms which allow the free
-                    distribution and modification of the relevant software’s source code and/or
-                    which require all distributors to make such source code freely available upon
-                    request, including any contributions or modifications made by such distributor
-                    (collectively, “<strong>Open Source Software</strong>”). To the extent that our
-                    Services, the OpenChat Platform or CHAT use or contain any Open Source Software,
-                    that element only is licensed to you under the relevant licence terms of the
-                    applicable third party licensor (“<strong>Open Source Licence Terms</strong>”),
-                    and you accept and agree to be bound by such Open Source Licence Terms.
-                </li>
-            </ul>
-        </li>
-        <li>
-            <h3>Our liability</h3>
-
-            <ul class="custom_list" style={"--prefix: '8.'"}>
-                <li>
-                    Notwithstanding any other clause in these Terms, we do not in any way exclude or
-                    limit our liability for death or personal injury caused by our negligence; fraud
-                    or fraudulent misrepresentation; or any other liability which cannot be limited
-                    or excluded by Applicable Law.
-                </li>
-                <li>
-                    Subject to clause A 8.1, we shall be responsible to you only for loss that you
-                    suffer as a direct and foreseeable result of our breach of this Agreement as a
-                    result of our gross negligence, and only insofar that such loss does not arise
-                    as a result of a breach of these Terms and / or Applicable Law by you. In any
-                    event, we shall not be liable to you for any loss: (i) of profits or expected
-                    revenue; (ii) caused by events outside our reasonable control; (iii) resulting
-                    from any attack by a third party on our systems; (iv) as a result of us
-                    exercising any of our rights or any exercise of discretion permitted to us under
-                    these Terms; or (v) anything else which we state we are not responsible for or
-                    which we otherwise exclude our liability for under these Terms.
-                </li>
-                <li>
-                    Subject to clause A 8.1, our total liability under these Terms shall be capped
-                    at the total amount of fees received by us from you in the year proceeding the
-                    breach.
-                </li>
-            </ul>
-        </li>
-        <li>
-            <h3>Your liability</h3>
-
-            <ul class="custom_list" style={"--prefix: '9.'"}>
-                <li>
-                    <p>You agree to indemnify us for any losses that arise from or relate to:</p>
-                    <ul class="custom_list" style={"--prefix: '9.1.'"}>
-                        <li>your breach of any Applicable Law or these Terms;</li>
-                        <li>your breach of the rights of any third party to these Terms;</li>
-                        <li>
-                            any regulatory inquiry, legal action, litigation, dispute or
-                            investigation, whether such situations occur or are anticipated, that
-                            relate to you; and
-                        </li>
-                        <li>
-                            any fees, taxes or costs not imposed by or via us, which we pay on your
-                            behalf.
-                        </li>
-                    </ul>
-                </li>
-                <li>
-                    Losses for the purposes of this clause A 9 include direct and indirect losses,
-                    as well as any costs and expenses (including reasonable legal fees).
-                </li>
-            </ul>
-        </li>
-        <li>
-            <h3>Termination</h3>
-            <ul class="custom_list" style={"--prefix: '10.'"}>
-                <li>
-                    <p>
-                        You may terminate your relationship with us immediately at any time for any
-                        reason by ceasing to use our Services. You will not be charged for
-                        terminating your OpenChat account. Once your OpenChat account is closed, you
-                        accept and acknowledge that:
-                    </p>
-                    <ul class="custom_list" style={"--prefix: '10.1.'"}>
-                        <li>you will no longer have access to any Contributions you have made;</li>
-                        <li>
-                            our other users will continue to have access to the Contributions you
-                            have made (as Contributions are not deleted when you terminate); and
-                        </li>
-                        <li>
-                            you will no longer have access to your OpenChat Wallet, and you are
-                            solely responsible for transferring any Cryptoassets stored in your
-                            OpenChat Wallet to an external wallet prior to account deletion
-                            (otherwise you will lose access to those Cryptoassets).
-                        </li>
-                    </ul>
-                </li>
-                <li>
-                    We may suspend, restrict or terminate your access to or use of any or all of our
-                    Services or the OpenChat Platform with immediate effect at any time by giving
-                    you notice via the OpenChat Platform where (i) we believe that has been
-                    suspicious or unlawful conduct, including fraud; (ii) if we reasonably believe
-                    you breach these Terms repeatedly or in a serious way; (iii) if we reasonably
-                    believe you create harm, risk, or possible legal exposure for us, our users, or
-                    others; (iv) for security, legal or regulatory reasons; or (v) if you have not
-                    given us information we need, or we believe that the information you have
-                    provided us is incorrect.
-                </li>
-                <li>
-                    On suspension of some or all of our Services, you shall not be able to access
-                    some or all of our Services until the suspension is ended at our discretion. We
-                    shall have no obligation to end any suspension within any particular time period
-                    or at all, and we shall not incur any liability for any loss caused or as a
-                    consequence of us exercising our suspension rights under these Terms.
-                </li>
-                <li>
-                    <p>On termination of all of our Services:</p>
-                    <ul class="custom_list" style={"--prefix: '10.4.'"}>
-                        <li>
-                            you will no longer be permitted or have any right to access or use the
-                            OpenChat Platform or our Services, and we will also cease to support
-                            your use of CHAT in connection with these purposes.
-                        </li>
-                        <li>
-                            you must withdraw all of your Cryptoassets from your OpenChat Wallet
-                            within 1 week of termination, as we will cease to provide support for
-                            your OpenChat Wallet after the expiry of that period, and we are not
-                            responsible for any loss as a consequence.
-                        </li>
-                        <li>
-                            all other rights, obligations and liabilities of the parties accrued up
-                            to and including the date of termination shall not be affected by
-                            termination.
-                        </li>
-                    </ul>
-                </li>
-                <li>
-                    Termination shall not affect the continued operation of clauses and provisions
-                    which by their nature clearly reflect the intention of the parties that they
-                    survive termination, including in relation to liability and the protection of
-                    intellectual property.
-                </li>
-            </ul>
-        </li>
-        <li>
-            <h3>Changes to these terms</h3>
-            <ul class="custom_list" style={"--prefix: '11.'"}>
-                <li>
-                    <p>
-                        We may make changes to these Terms and our Services available from time to
-                        time:
-                    </p>
-                    <ul class="custom_list" style={"--prefix: '11.1.'"}>
-                        <li>to reflect changes to Applicable Law;</li>
-                        <li>
-                            to reflect changes required by any court, regulatory or tax authority or
-                            industry guidance or codes of practice;
-                        </li>
-                        <li>to reflect changes in the way cryptoasset markets work;</li>
-                        <li>
-                            to reflect changes to our technology or other systems, including those
-                            required to reflect to our intention to have increasing decentralisation
-                            of the OpenChat Platform;
-                        </li>
-                        <li>
-                            if it becomes impossible or impractical, in our reasonable opinion, to
-                            carry out any aspect of these Terms as a result of circumstances beyond
-                            our reasonable control;
-                        </li>
-                        <li>to make these Terms easier to understand;</li>
-                        <li>
-                            to reflect changes to the nature or scope of the Services we provide
-                            generally;
-                        </li>
-                        <li>where the changes are to your benefit or not detrimental to you; or</li>
-                        <li>for any other valid reason.</li>
-                    </ul>
-                </li>
-                <li>
-                    We will give you reasonable notice of any changes to these Terms, or we may make
-                    changes with immediate effect where they are in your favour or are required by
-                    Applicable Law.
-                </li>
-                <li>
-                    We will notify you of any changes via the OpenChat Platform. You will be treated
-                    as accepting any change that we make to these Terms unless you tell us that you
-                    do not agree to the change, in which case you must discontinue using our
-                    Services. We will treat this as your termination of your agreement to use our
-                    Services, with effect from the date that the change would otherwise come into
-                    effect.
-                </li>
-            </ul>
-        </li>
-        <li>
-            <h3>Novation</h3>
-            <ul class="custom_list" style={"--prefix: '12.'"}>
-                <li>
-                    We may appoint another entity to take over all or some of our rights and
-                    obligations under these Terms (the “<strong>New Entity</strong>”), in which case
-                    you consent to us transferring by way of novation all or some of our rights and
-                    obligations under these Terms to the New Entity. As soon as reasonably
-                    practicable following such novation, we shall notify you in writing of the
-                    effective date of such novation. From such effective date, all references in
-                    these Terms to “OpenChat”, “we”, “us” or “our” shall be deemed to be references
-                    to the New Entity.
-                </li>
-            </ul>
-        </li>
-        <li>
-            <h3>Governing law and jurisdiction</h3>
-            <ul class="custom_list" style={"--prefix: '13.'"}>
-                <li>
-                    If you are a consumer, please note that these Terms and any dispute or claim
-                    arising out of or in connection with them shall be governed by English law. You
-                    and we both agree that the courts of England and Wales will have non-exclusive
-                    jurisdiction to settle any dispute or claim arising out of or in connection with
-                    these Terms or their subject matter. However, nothing in these Terms will
-                    override any mandatory laws of the country in which you have your usual place of
-                    residence.
-                </li>
-                <li>
-                    If you are a business, these Terms and any dispute or claim arising out of or in
-                    connection with them or their subject matter or formation (including
-                    non-contractual disputes or claims) shall be governed by and construed in
-                    accordance with English law. We both agree that the courts of England and Wales
-                    shall have exclusive jurisdiction to settle any such dispute or claim (including
-                    non-contractual disputes or claims).
-                </li>
-            </ul>
-        </li>
-        <li>
-            <h3>Entire agreement</h3>
-            <ul class="custom_list" style={"--prefix: '14.'"}>
-                <li>
-                    These Terms constitute the entire agreement between you and us and supersede any
-                    prior agreement, terms and conditions or arrangement in respect of their subject
-                    matter. There are no promises, representations, warranties, terms, conditions or
-                    obligations between you and us other than those set out in these Terms.
-                </li>
-                <li>
-                    You warrant that you have not entered into these Terms in reliance upon, and
-                    will have no remedy in respect of, any misrepresentation, representation or
-                    statement which is not expressly set out or referred to in these Terms. The only
-                    remedy available for any misrepresentation or breach of any representation or
-                    statement set out or referred to in these Terms shall be for breach of contract.
-                </li>
-            </ul>
-        </li>
-        <li>
-            <h3>Miscellaneous</h3>
-            <ul class="custom_list" style={"--prefix: '15.'"}>
-                <li>
-                    These Terms shall take effect from the earlier of the date on which you (i)
-                    receive CHAT (ii) access the OpenChat Platform or (iii) otherwise use our
-                    Services.
-                </li>
-                <li>
-                    Each of the provisions of these Terms are separate, severable and enforceable
-                    and, accordingly, if at any time any provision or part-provision of these Terms
-                    is or becomes invalid, void, illegal or unenforceable, it shall be deemed
-                    deleted, but that shall not affect the validity and enforceability of the rest
-                    of these Terms. If any provision or part-provision of these Terms is deemed
-                    deleted under this clause A 15.2, these Terms shall be interpreted so as, to the
-                    greatest extent possible, to achieve the intended commercial result of the
-                    deleted provision.
-                </li>
-                <li>
-                    You may not assign, lien, mortgage, transfer, charge or otherwise encumber any
-                    of your rights or obligations in a way which may impede your performance of your
-                    obligations under these Terms. We may assign the benefit of these Terms without
-                    restriction subject to compliance with Applicable Law.
-                </li>
-                <li>
-                    The parties intend that any New Entity shall have the right to enforce any
-                    rights granted to it under clause A 12 pursuant to the Contracts (Rights of
-                    Third Parties) Act 1999 (the "<strong>1999 Act</strong>"). Save as aforesaid,
-                    the participants do not intend that the provisions of these Terms shall be
-                    enforceable by virtue of the 1999 Act or otherwise by any person not a user of
-                    the OpenChat Platform. Notwithstanding this clause A 15.4, the consent any third
-                    party is not required for any variation (including any release or compromise of
-                    any liability) or termination of these Terms.
-                </li>
-                <li>
-                    No variation or waiver of any of the terms of these Terms shall be effective
-                    unless agreed by us explicitly in writing. No failure or delay by us to exercise
-                    any right, power or remedy under these Terms shall operate as a waiver of that
-                    right, or any other right, nor shall any single or partial exercise by us of any
-                    right, power or remedy preclude any other or further exercise of that right or
-                    any other right, power or remedy.
-                </li>
-            </ul>
-        </li>
-    </ul>
-
-    <HashLinkTarget {onCopyUrl} id="2">
-        <h2>Section B: Additional terms for messaging on the OpenChat platform</h2>
-    </HashLinkTarget>
-
-    <ul class="custom_list bold" style={"--prefix: 'B'; --suffix: ''"}>
-        <li>
-            <h3>Introduction</h3>
-            <ul class="custom_list" style={"--prefix: '1.'"}>
-                <li>
-                    This section of these Terms will apply to OpenChat users when using the OpenChat
-                    Platform to send Contributions to each other.
-                </li>
-            </ul>
-        </li>
-
-        <li>
-            <h3>Messaging services</h3>
-            <ul class="custom_list" style={"--prefix: '2.'"}>
-                <li>
-                    <p>The OpenChat Platform enables all its users to, for example:</p>
-                    <ul class="custom_list" style={"--prefix: '2.1.'"}>
-                        <li>send and receive text and multimedia communications;</li>
-                        <li>send messages containing Cryptoassets (including tips);</li>
-                        <li>send Prize Messages;</li>
-                        <li>join video and voice calls;</li>
-                        <li>create private Groups;</li>
-                        <li>join public and / or private and / or Gated Groups; and</li>
-                        <li>join (but not create) public and / or private Communities.</li>
-                    </ul>
-                </li>
-                <li>
-                    <p>Please note:</p>
-                    <ul class="custom_list" style={"--prefix: '2.2.'"}>
-                        <li>
-                            when using our messages or prize messages to send Cryptoassets, this
-                            shall constitute dealing in Cryptoassets and the provisions in clause A
-                            6 shall apply.
-                        </li>
-                        <li>
-                            that we strongly recommend logging out of the OpenChat Platform at the
-                            end of every session you have on the OpenChat Platform, as otherwise the
-                            OpenChat Platform may not prompt the next user of the device used to
-                            access the OpenChat Platform to enter credentials in order to use the
-                            OpenChat Platform. If you do not log out of the OpenChat Platform at the
-                            end of each session, there is a risk that another person may impersonate
-                            you to send Contributions. We are not responsible for any losses as a
-                            consequence of your failure to log out at the end of a session or your
-                            credentials otherwise being compromised.
-                        </li>
-                    </ul>
-                </li>
-            </ul>
-        </li>
-
-        <li>
-            <h3>Conditions for contributions</h3>
-            <ul class="custom_list" style={"--prefix: '3.'"}>
-                <li>
-                    <p>A Contribution must not:</p>
-                    <ul class="custom_list" style={"--prefix: '3.1.'"}>
-                        <li>do anything that is unlawful;</li>
-                        <li>communicate any illegal content or activity;</li>
-                        <li>be defamatory, obscene, offensive, hateful or inflammatory;</li>
-                        <li>bully, harass, insult or intimidate; or</li>
-                        <li>otherwise breach our Content Standards.</li>
-                    </ul>
-                </li>
-                <li>
-                    We shall decide, at our discretion, if a Contribution does not meet these
-                    requirements and if we decide that there has been a breach of clause B 3.1, we
-                    may suspend or terminate your access to or use of our Services immediately and
-                    you will be liable for any loss we incur as a consequence.
-                </li>
-                <li>
-                    If we decide that a Contribution is prohibited in any jurisdiction, we reserve
-                    the right to conceal the Contribution and prevent it from being viewed by users
-                    who are citizens, residents or legal entities in those jurisdictions where such
-                    a Contribution is prohibited.
-                </li>
-                <li>
-                    If we decide that a Contribution is likely to be interpreted by any users as
-                    defamatory, offensive, hateful or inflammatory, we reserve the right to require
-                    users to confirm an appropriate risk warning before permitting them to view such
-                    a Contribution.
-                </li>
-                <li>
-                    If you see any Contribution that you believe is in breach of clause B 3.1, you
-                    should contact us via the help channel in the OpenChat Community (accessible via
-                    the OpenChat Platform) and we will investigate. However, you acknowledge that we
-                    are not responsible if a person breaches clause B 3.1 when using our Services,
-                    whether or not we take any action as a result.
-                </li>
-                <li>
-                    <p>
-                        We will enable you to send Prize Messages. Where you do so, you shall ensure
-                        that the arrangements under which any Cryptoasset prizes are gifted:
-                    </p>
-                    <ul class="custom_list" style={"--prefix: '3.6.'"}>
-                        <li>
-                            are clear, fair, honest, not misleading and in compliance with any
-                            Applicable Law;
-                        </li>
-                        <li>
-                            are not structured in a way that would meet the definition of regulated
-                            gambling under any relevant jurisdiction; and
-                        </li>
-                        <li>
-                            are gifted in accordance on a basis which is clearly communicated with
-                            all participants.
-                        </li>
-                    </ul>
-                </li>
-                <li>
-                    All participants in any arrangement for Cryptoasset prizes accept that we do not
-                    control, and are not responsible or liable for, any issue or loss in connection
-                    with any Cryptoassets prizes offered or gifted via our Services.
-                </li>
-                <li>
-                    You understand that messaging services are vulnerable to spoofing and phishing
-                    attacks and so caution should be exercised in reviewing all Contributions, and
-                    we shall not be responsible for any loss caused by phishing, spoofing or any
-                    other malicious attack.
-                </li>
-                <li>
-                    You also accept that we shall also not be responsible for any loss in connection
-                    with any delay or error in the transmission or receipt of any Contribution, so
-                    long as we have acted in good faith. This includes loss caused as a result of a
-                    delay in the transmission or receipt of Cryptoassets sent via our messaging
-                    system, so long as we have acted in good faith.
-                </li>
-            </ul>
-        </li>
-        <li>
-            <h3>Conditions for joining groups and communities</h3>
-
-            <ul class="custom_list" style={"--prefix: '4.'"}>
-                <li>
-                    By joining a public or private Group or Community (including those which are
-                    Gated) on the OpenChat Platform, you understand and accept that you must comply
-                    with all applicable rules of that Group or Community. You also understand that
-                    we do not accept responsibility for the operation of Groups and Communities
-                    available via the OpenChat Platform.
-                </li>
-                <li>
-                    In addition, to join a Gated Group or Community you will need to at all relevant
-                    times satisfy the criteria as determined by the creator of that particular Group
-                    or Community.
-                </li>
-            </ul>
-        </li>
-        <li>
-            <h3>Intellectual property</h3>
-            <ul class="custom_list" style={"--prefix: '5.'"}>
-                <li>
-                    We do not claim any ownership of any intellectual property in the content that
-                    you submit via our messaging Services. However, you represent that any content
-                    you submit does not breach the intellectual property of any person, that you
-                    have the full right to send such information, and there is no other reason why
-                    we would be in breach of any obligation to any person in enabling you to send
-                    such information via our Services.
-                </li>
-            </ul>
-        </li>
-    </ul>
-
-    <HashLinkTarget {onCopyUrl} id="3">
-        <h2>Section C: Additional terms for using the OpenChat wallet</h2>
-    </HashLinkTarget>
-    <ul class="custom_list bold" style={"--prefix: 'C'; --suffix: ''"}>
-        <li>
-            <h3>Introduction</h3>
-            <ul class="custom_list" style={"--prefix: '1.'"}>
-                <li>
-                    This section of these Terms will apply to OpenChat users who use the OpenChat
-                    Wallet.
-                </li>
-            </ul>
-        </li>
-        <li>
-            <h3>Conditions for use</h3>
-            <ul class="custom_list" style={"--prefix: '2.'"}>
-                <li>
-                    <p>By using the OpenChat Wallet, you acknowledge and accept that:</p>
-                    <ul class="custom_list" style={"--prefix: '2.1.'"}>
-                        <li>
-                            you understand that in order to secure your OpenChat Wallet and be able
-                            to store Cryptoassets, you must access your OpenChat account using the
-                            credentials provided when opening your account. You are responsible for
-                            keeping, protecting and safeguarding your credentials. In this respect,
-                            you are aware that if you lose your credentials or access to your
-                            OpenChat account is compromised for any other reason, you may not be
-                            able to access your OpenChat Wallet and someone else may take control of
-                            your Cryptoassets (and may as a consequence be treated by the OpenChat
-                            Platform as if they were owner of those Cryptoassets). We are not
-                            responsible for any losses in relation to your loss of or inability to
-                            access the Cryptoassets stored in your OpenChat Wallet in connection
-                            with you losing your credentials or your credentials otherwise being
-                            compromised;
-                        </li>
-                        <li>
-                            unless you log out of the OpenChat Platform at the end of every session
-                            you have on the OpenChat Platform, the OpenChat Platform may not prompt
-                            the next user of the device used to access the OpenChat Platform to
-                            enter credentials in order to use the OpenChat Platform. If you do not
-                            log out of the OpenChat Platform at the end of each session, there is a
-                            risk that another person may impersonate you to access your Cryptoassets
-                            without your knowledge or consent, and the OpenChat Platform may treat
-                            them as if they are the owner of those Cryptoassets. We are not
-                            responsible for any losses as a consequence of your failure to log out
-                            at the end of a session or your credentials otherwise being compromised;
-                        </li>
-                        <li>
-                            we assume no responsibility in connection with any attempt to use your
-                            OpenChat Wallet for cryptoassets that we do not support or with regard
-                            to Cryptoassets sent from your OpenChat Wallet to an incompatible
-                            external wallet address;
-                        </li>
-                        <li>
-                            you understand that if you authorise or allow any third party to access
-                            your OpenChat Wallet, the third party will know your OpenChat Wallet
-                            information (including without limitation, information relating to your
-                            assets and transactions), and your OpenChat Wallet will be exposed to
-                            certain risks, and you may suffer losses (we are not responsible for any
-                            such losses);
-                        </li>
-                        <li>
-                            the transfer of Cryptoassets into your OpenChat Wallet exposes those
-                            Cryptoassets to the risk of loss from, amongst other things, security
-                            breaches from cyber-attacks, and so long as we have acted in good faith
-                            we are not responsible for any such loss; and
-                        </li>
-                        <li>
-                            you understand that if you hold Cryptoassets in your OpenChat Wallet,
-                            and there has been no activity on your OpenChat account for a prolonged
-                            period of time and we are unable to contact you, Applicable Law may
-                            require us to deliver any such Cryptoassets to the authorities in
-                            certain jurisdictions as unclaimed property. Where this is the case, we
-                            will comply with such requirements to the extent reasonably required by
-                            Applicable Law.
-                        </li>
-                    </ul>
-                </li>
-                <li>
-                    <p>By using the OpenChat Wallet, you covenant, represent and warrant that:</p>
-                    <ul class="custom_list" style={"--prefix: '2.2.'"}>
-                        <li>
-                            you shall allow your OpenChat Wallet to be used in connection with any
-                            activities that are prohibited by Applicable Law;
-                        </li>
-                        <li>
-                            you shall not use your OpenChat Wallet to store, send, or receive
-                            cryptoassets that we do not support;
-                        </li>
-                        <li>
-                            you are the legal and rightful owner of all Cryptoassets in your
-                            OpenChat Wallet, and that the sources of such Crptoassets are legal, and
-                            you will not transfer or trade through the OpenChat Platform anything
-                            other than Cryptoassets that have been legally obtained by you and that
-                            belong to you; and
-                        </li>
-                        <li>
-                            you shall notify us without undue delay of any unauthorised use and / or
-                            access of your OpenChat Wallet.
-                        </li>
-                    </ul>
-                </li>
-            </ul>
-        </li>
-    </ul>
-
-    <HashLinkTarget {onCopyUrl} id="4">
-        <h2>Section D: Additional terms applicable to making a swap</h2>
-    </HashLinkTarget>
-    <ul class="custom_list bold" style={"--prefix: 'D'; --suffix: ''"}>
-        <li>
-            <h3>Introduction</h3>
-            <ul class="custom_list" style={"--prefix: '1.'"}>
-                <li>
-                    This section of these Terms will apply to OpenChat users who use the OpenChat
-                    Platform to make a Swap.
-                </li>
-                <li>
-                    <p>A Swap can be either:</p>
-                    <ul class="custom_list" style={"--prefix: '1.2.'"}>
-                        <li>
-                            an Exchange Swap, which is where the OpenChat Platform offers you a
-                            price for the Cryptoasset, and the transaction is completed using the
-                            third party exchange(s) the OpenChat Platform is linked to; or
-                        </li>
-                        <li>
-                            a P2P Swap, which is where you send a message to the users of a chat
-                            with the proposed terms of a transaction, and the OpenChat Platform
-                            facilitates you in completing that transaction with the other user.
-                        </li>
-                    </ul>
-                </li>
-                <li>
-                    In order to make an Exchange Swap, you need to choose (i) your Source
-                    Cryptoasset, (ii) your Target Cryptoasset and (ii) the amount of the Source
-                    Cryptoasset you wish to exchange for that Target Cryptoasset. You can then ask
-                    us to provide you with a proposed estimated exchange rate. This exchange rate
-                    reflects the rate(s) provided by the third party exchange(s) we are connected
-                    with.
-                </li>
-                <li>
-                    If you instruct us to proceed with an Exchange Swap, we will transfer the Source
-                    Cryptoasset from your OpenChat Wallet to the relevant third party exchange to
-                    make the conversion. You will then receive the Target Cryptoasset back to your
-                    OpenChat Wallet.
-                </li>
-                <li>
-                    Where we use a third party exchange to complete an Exchange Swap, please note
-                    that the exchange rates provided by us are an estimated rate at the time you
-                    request the rate. The actual rate provided will be determined at the time you
-                    instruct us to make the Exchange Swap. <strong>
-                        As the prices of Cryptoassets can be highly volatile, we do not guarantee
-                        that the amount of Target Cryptoassets you acquire from an Exchange Swap
-                        will be the same as that set out in the proposed exchange rate. Rather, it
-                        will reflect the rate actually obtained when the Exchange Swap is actually
-                        executed by the third party exchange (which may result you in receiving less
-                        of the Target Cryptoasset than that predicted by the estimated exchange rate
-                        you receive
-                    </strong>).
-                </li>
-                <li>
-                    <p>
-                        In order to engage in a P2P Swap (either by making a Swap Offer or accepting
-                        a Swap Offer), you need to have a Diamond Membership. A “Swap Offer”, is a
-                        communication which you, if you hold a Diamond Membership, can make to other
-                        users in chat(s) with the following information:
-                    </p>
-                    <ul class="custom_list" style={"--prefix: '1.6.'"}>
-                        <li>your Source Cryptoasset;</li>
-                        <li>your Target Cryptoasset;</li>
-                        <li>the amount of the Source Cryptoasset you are willing to exchange;</li>
-                        <li>the amount of the Target Cryptoasset you wish to acquire; and</li>
-                        <li>the chat(s) who can accept the Swap Offer.</li>
-                    </ul>
-                </li>
-                <li>
-                    <p>Upon making a Swap Offer:</p>
-                    <ul class="custom_list" style={"--prefix: '1.7.'"}>
-                        <li>
-                            the amount of the Source Cryptoasset you are willing to exchange is sent
-                            from your OpenChat Wallet into escrow.
-                        </li>
-                        <li>
-                            a message containing the details of the Swap Offer is sent to the users
-                            in the relevant chat(s), who have the ability to accept your Swap Offer
-                            at their discretion.
-                        </li>
-                        <li>
-                            you have the ability to cancel the Swap Offer for as long as no other
-                            user has accepted the Swap Offer, in which case the Source Cryptoasset
-                            shall be returned to your OpenChat Wallet.
-                        </li>
-                    </ul>
-                </li>
-                <li>
-                    <p>
-                        As soon as another user accepts your Swap Offer, the P2P Swap is processed,
-                        meaning that:
-                    </p>
-                    <ul class="custom_list" style={"--prefix: '1.8.'"}>
-                        <li>
-                            the Target Cryptoassets will be transferred from their wallet to escrow;
-                        </li>
-                        <li>
-                            the Source Cryptoassets will be transferred from escrow to the other
-                            user’s OpenChat Wallet; and
-                        </li>
-                        <li>
-                            the Target Cryptoassets will be transferred from escrow to your OpenChat
-                            Wallet.
-                        </li>
-                    </ul>
-                </li>
-            </ul>
-        </li>
-        <li>
-            <h3>Conditions for making a swap</h3>
-            <ul class="custom_list" style={"--prefix: '2.'"}>
-                <li>
-                    <p>
-                        By using our Services to make a Swap, you are dealing in Cryptoassets and
-                        clause A 6 shall apply. In addition, you acknowledge and accept that:
-                    </p>
-                    <ul class="custom_list" style={"--prefix: '2.1.'"}>
-                        <li>
-                            you will only able to make a Swap if there are sufficient Cryptoassets
-                            stored in your OpenChat Wallet to do so;
-                        </li>
-                        <li>
-                            you understand that once an offer for a Swap has been accepted, you are
-                            not able to cancel that Swap (or otherwise ask for a refund), and as
-                            such before making any Swap or Swap Offer you should make sure that you
-                            are certain you want to proceed;
-                        </li>
-                        <li>
-                            whilst we may cancel an Exchange Swap where there is a Manifest Error in
-                            the price of a Cryptoasset as shown by us (in which case we will give
-                            you the ability as soon as commercially practicable to acquire the
-                            Cryptoasset at the correct price, and we shall notify you of any
-                            cancellation as soon as we reasonably can by email or via the OpenChat
-                            Platform), you do not have the right to cancel an accepted Swap Offer
-                            because of a Manifest Error (and so you should be careful to ensure that
-                            the details of any Swap Offer you make are accurate); and
-                        </li>
-                        <li>
-                            we reserve the right to make changes to these Terms to reflect changes
-                            to the third party exchanges available to us and their offerings.
-                        </li>
-                    </ul>
-                </li>
-                <li>
-                    <p>As long as we act in good faith, we do not accept responsibility for:</p>
-                    <ul class="custom_list" style={"--prefix: '2.2.'"}>
-                        <li>our Services being interrupted;</li>
-                        <li>any Swap not being executed or accepted by any counterparty;</li>
-                        <li>any delay in processing a Swap;</li>
-                        <li>any lack of liquidity in any market for a Cryptoasset; or</li>
-                        <li>
-                            our refusal to carry out any Swap for you if we believe it is in breach
-                            of these Terms.
-                        </li>
-                    </ul>
-                </li>
-            </ul>
-        </li>
-    </ul>
-
-    <HashLinkTarget {onCopyUrl} id="5">
-        <h2>Section E: Additional terms for dealing in CHAT</h2>
-    </HashLinkTarget>
-    <ul class="custom_list bold" style={"--prefix: 'E'; --suffix: ''"}>
-        <li>
-            <h3>Introduction</h3>
-            <ul class="custom_list" style={"--prefix: '1.'"}>
-                <li>This section of these Terms will apply whenever you deal in CHAT.</li>
-            </ul>
-        </li>
-        <li>
-            <h3>Conditions for dealing in CHAT</h3>
-            <ul class="custom_list" style={"--prefix: '2.'"}>
-                <li>
-                    <p>
-                        By dealing in CHAT, you are dealing in Cryptoassets and clause A 6 shall
-                        apply. In addition, you acknowledge and accept that:
-                    </p>
-                    <ul class="custom_list" style={"--prefix: '2.1.'"}>
-                        <li>
-                            you have the necessary and relevant experience, knowledge and
-                            understanding to deal in CHAT;
-                        </li>
-                        <li>
-                            other than as set out in these Terms, you are not relying upon any other
-                            representation or warranty by OpenChat or any other person, written or
-                            otherwise, in determining whether to deal in CHAT, and have reached your
-                            independent view regarding that dealing in CHAT is right for you;
-                        </li>
-                        <li>
-                            you accept that CHAT is created and you obtain CHAT on an “as is” basis.
-                            Therefore, provided we act in good faith in accordance with these Terms,
-                            you accept that OpenChat is providing CHAT without being able to provide
-                            any warranties in relation to them, including, but not limited to,
-                            title, merchantability or fitness for a particular purpose;
-                        </li>
-                        <li>
-                            OpenChat has not made, and does not make, any representations that you
-                            will be able to generate a return on your obtaining of CHAT, and you
-                            should not expect a return or any kind of cancellation or refund rights
-                            in relation to the CHAT;
-                        </li>
-                        <li>
-                            whilst OpenChat will use reasonable endeavours to ensure that CHAT will
-                            have the utility reflected in these Terms, the features of the CHAT are
-                            subject to change, modification, amendment, alternation or
-                            supplementation at any time (at OpenChat’s sole discretion);
-                        </li>
-                        <li>
-                            these Terms do not constitute a prospectus, offering memorandum or
-                            private placement memorandum of any sort and does not pertain in any way
-                            to be any kind of regulated offering;
-                        </li>
-                        <li>
-                            you understand that the CHAT is not being offered as securities, e-money
-                            or stablecoins; and
-                        </li>
-                        <li>
-                            you accept that we reserve the right to create new classes of
-                            cryptoassets other than CHAT under separate brands and with features
-                            outside of the scope of these Terms and nothing in these Terms shall
-                            entitle you to have any rights (of whatever nature) in relation to such
-                            cryptoassets.
-                        </li>
-                    </ul>
-                </li>
-                <li>
-                    Any sale of CHAT by you to another person is subject to these Terms, and you are
-                    responsible for ensuring that any acquirer of CHAT is aware of the fact that in
-                    doing so they accept, and are subject to, these Terms.
-                </li>
-            </ul>
-        </li>
-    </ul>
-
-    <HashLinkTarget {onCopyUrl} id="6">
-        <h2>Section F: Additional terms for Diamnond membership holders</h2>
-    </HashLinkTarget>
-    <ul class="custom_list bold" style={"--prefix: 'F'; --suffix: ''"}>
-        <li>
-            <h3>Introduction</h3>
-            <ul class="custom_list" style={"--prefix: '1.'"}>
-                <li>This section of these Terms will apply if you hold a Diamond Membership.</li>
-                <li>
-                    <p>As a Diamond Membership holder, you are eligible to:</p>
-
-                    <ul class="custom_list" style={"--prefix: '1.2.'"}>
-                        <li>
-                            earn rewards in return for referring other users to become Diamond
-                            Membership holders. Rewards are 50% of the referred member’s total
-                            Diamond Membership payments for the first year after the referral is
-                            completed. Rewards are paid out in either CHAT or ICP, depending on
-                            whether the referred member uses CHAT or ICP to purchase the Diamond
-                            Membership;
-                        </li>
-                        <li>
-                            create public Groups (in addition to the general ability to create
-                            private Groups);
-                        </li>
-                        <li>create public and / or private Communities;</li>
-                        <li>create Gated Groups and Gated Communities;</li>
-                        <li>make video and voice calls;</li>
-                        <li>
-                            make or accept Swap Offers in relation to a P2P Swaps (see section D for
-                            further information); and
-                        </li>
-                        <li>
-                            access any other features that we make available from time to time at
-                            our discretion to holders of a Diamond Membership (subject to your
-                            acceptance of any additional terms which may apply to such).
-                        </li>
-                    </ul>
-                </li>
-            </ul>
-        </li>
-        <li>
-            <h3>Conditions for becoming a Diamond membership holder</h3>
-            <ul class="custom_list" style={"--prefix: '2.'"}>
-                <li>
-                    We will charge you in advance for your Diamond Membership and we will
-                    automatically deduct the fee (as specified on the fees page on the OpenChat
-                    Platform and payable in either CHAT or ICP) directly from your OpenChat Wallet
-                    at the start of your membership. This fee shall cover your Diamond Membership
-                    for the membership period specified when you sign up for Diamond Membership.
-                </li>
-                <li>
-                    <p>In the event that we suspend the provision of Diamond Membership to you:</p>
-                    <ul class="custom_list" style={"--prefix: '2.2.'"}>
-                        <li>
-                            because you breach the terms of this Agreement, you will forfeit your
-                            Diamond Membership (and shall not be entitled to any refund in respect
-                            of such).
-                        </li>
-                        <li>
-                            for any other reason, the membership period shall be extended
-                            accordingly so that you do not pay any fee in respect of a time period
-                            during which the Diamond Membership is suspended.
-                        </li>
-                    </ul>
-                </li>
-                <li>
-                    Your Diamond Membership cannot be transferred or assigned. To the extent
-                    permitted by Applicable Law, we do not provide any refund rights in relation to
-                    your purchase of a Diamond Membership, and we note that the Diamond Membership
-                    is contingent on the operation and value of CHAT and ICP which is dependent on
-                    fluctuations in the financial market which cannot be controlled by us.
-                </li>
-            </ul>
-        </li>
-        <li>
-            <h3>Conditions for creating groups and communities</h3>
-            <ul class="custom_list" style={"--prefix: '3.'"}>
-                <li>
-                    <p>As the creator of a Group, Community or Channel, you may:</p>
-                    <ul class="custom_list" style={"--prefix: '3.1.'"}>
-                        <li>
-                            determine the rules that users must comply with in order to send
-                            messages in the Group, Community or Channel;
-                        </li>
-                        <li>
-                            manage and control the operation of the Group, Community or Channel; and
-                        </li>
-                        <li>
-                            assign functions to admins and moderators at their discretion to assist
-                            with the management of the Group, Community or Channel,
-                        </li>
-                        <li>and in doing so you accept that you are responsible for:</li>
-                        <li>the Groups, Communities, and Channels you administer;</li>
-                        <li>
-                            ensuring that the rules of the Groups, Communities and Channels you
-                            administer are appropriately enforced; and
-                        </li>
-                        <li>
-                            dealing with any complaints or queries received from participants in
-                            relation to the Groups, Communities, and Channels you administer.
-                        </li>
-                    </ul>
-                </li>
-                <li>
-                    Notwithstanding the rest of this clause F 3, we may require you to change the
-                    rules of any Group, Community or Channel, or we may require that certain
-                    jurisdictions be geo-blocked from a Group, Community or Channel, if we in good
-                    faith believe that this is required to comply with Applicable Law. We also have
-                    the right to require you to resolve any complaint or query in a particular way,
-                    if we in good faith believe that this is required to protect the rights of any
-                    person. You shall comply with any such requirement we impose promptly, and
-                    ensure that we are provided with full, complete, accurate and up to date
-                    responses to any queries we make in deciding whether to place such a requirement
-                    on you or any Group or Community. We do not accept any liability for our
-                    exercise of our rights under this clause F 3.
-                </li>
-            </ul>
-        </li>
-    </ul>
-
-    <HashLinkTarget {onCopyUrl} id="7">
-        <h2>Section G: Participating in the OpenChat DAO</h2>
-    </HashLinkTarget>
-    <ul class="custom_list bold" style={"--prefix: 'G'; --suffix: ''"}>
-        <li>
-            <h3>Introduction</h3>
-            <ul class="custom_list" style={"--prefix: '1.'"}>
-                <li>
-                    This section of these Terms will apply if you participate in the governance of
-                    the OpenChat DAO.
-                </li>
-            </ul>
-        </li>
-        <li>
-            <h3>Location of information regarding the DAO</h3>
-            <ul class="custom_list" style={"--prefix: '2.'"}>
-                <li>
-                    <p>For information regarding:</p>
-                    <ul class="custom_list" style={"--prefix: '2.1.'"}>
-                        <li>
-                            the rules setting out the operation and governance of the OpenChat DAO,
-                            please see: <a href="https://oc.app/blog/governance"
-                                >https://oc.app/blog/governance</a
-                            >; and
-                        </li>
-                        <li>
-                            how holders of CHAT may vote on Governance Matters, please see:
-                            <a href="https://oc.app/blog/governance"
-                                >https://oc.app/blog/governance</a
-                            >,
-                        </li>
-                    </ul>
-                    <p>
-                        and in participating in the OpenChat DAO you agree to and are bound by these
-                        rules as amended from time to time, which shall be considered as part of
-                        these Terms.
-                    </p>
-                </li>
-            </ul>
-        </li>
-        <li>
-            <h3>Conditions for using the voting platform</h3>
-            <ul class="custom_list" style={"--prefix: '3.'"}>
-                <li>
-                    You understand that the Voting Platform you use to vote may be operated by a
-                    third party. As such, you may be subject to the additional terms of the third
-                    party operating the Voting Platform. Where this is the case, and you confirm
-                    that (i) you accept and will comply with these additional terms as applicable to
-                    you and (ii) you understand that we are not responsible for them.
-                </li>
-            </ul>
-        </li>
-    </ul>
-
-    <HashLinkTarget {onCopyUrl} id="8">
-        <h2>Schedule 1: Risks relating to cryptoassets</h2>
-    </HashLinkTarget>
-    <p>
-        <strong>
-            DEALING IN CRYPTOASSETS INVOLVES A HIGH DEGREE OF RISK, AND, THEREFORE, SHOULD BE
-            UNDERTAKEN ONLY IF YOU ARE CAPABLE OF EVALUATING THE RISKS INVOLVED AND ABLE TO BEAR THE
-            RISK OF A COMPLETE LOSS OF ALL CAPITAL USED TO PARTICIPATE IN CRYPTOASSETS.
-        </strong>
-    </p>
-    <p>
-        <strong>
-            YOU SHOULD CAREFULLY CONSIDER THE RISKS DESCRIBED BELOW BEFORE DEALING IN CRYPTOASSETS.
-            IT SHOULD BE NOTED THAT THE LIST OF RISK FACTORS DESCRIBED HEREUNDER IS NOT INTENDED TO
-            BE EXHAUSTIVE AND DOES NOT NECESSARILY INCLUDE ALL THE RISKS TO WHICH YOU MAY BE EXPOSED
-            WHEN DEALING IN CRYPTOASSETS.
-        </strong>
-    </p>
-    <p>
-        We expressly disclaim all responsibility for any loss or damage of any kind whatsoever
-        arising directly or indirectly from: (i) reliance on any information contained in this
-        Schedule 1, (ii) any error, omission or inaccuracy in any such information or (iii) any
-        action resulting from such information.
-    </p>
-    <p>
-        Please note that in addition to the risks below, there may be other risks associated with
-        your dealing in Cryptoassets and using our Services generally, including those that we
-        cannot reasonably foresee. Additional risks may also materialise as unanticipated variations
-        or combinations of the risks discussed below.
-    </p>
-    <p>
-        By participating in these Terms, or by otherwise dealing in Cryptoassets, including CHAT,
-        you expressly acknowledge and assume the following risks, which we shall not be liable
-        should they materialise:
-    </p>
-    <p>
-        <strong> Risks applicable to all Cryptoassets (including CHAT) </strong>
-    </p>
-
-    <ul class="custom_list" style={"--prefix: ''"}>
-        <li>
-            <h3>General risks</h3>
-            <p>
-                The value of the Cryptoassets can fall as well as rise. If you buy Cryptoassets, you
-                may not get back the full amount you spent on them, or anything at all. The value of
-                Cryptoassets may depend on fluctuations in the financial markets, or other economic
-                factors, which are outside our control. The past performance of a Cryptoassets is
-                not a guide to the future performance of Cryptoassets.
-            </p>
-        </li>
-        <li>
-            <h3>The prices of Cryptoassets are extremely volatile</h3>
-            <p>
-                Fluctuations in the price of Cryptoassets are subject to significant price
-                volatility. The prices of Cryptoassets have historically been subject to dramatic
-                fluctuations and are highly volatile. A range of factors may influence the market
-                price, if any, of Cryptoassets , including, but not limited to: (i) the ability (if
-                any) of Cryptoassets to trade on a secondary market; (ii) global supply and demand
-                (iii) general expectations with respect to the rate of inflation, interest rates and
-                exchange rates; (iv) changes in the software, software requirements or hardware
-                requirements underlying Cryptoassets; (v) changes in the rights, obligations,
-                incentives, or rewards for holders of Cryptoassets;(vii) interruptions in service
-                from or failures of exchanges on which Cryptoassets are traded; (viii) investment
-                and trading activities of large purchasers, including private and registered funds,
-                that may directly or indirectly invest in Cryptoassets; (ix) monetary policies of
-                governments, trade restrictions, currency devaluations and revaluations; (x)
-                regulatory measures, if any, that affect the use of Cryptoassets and changes in
-                Applicable Law; (xi) global or regional political, economic or financial events and
-                situations; and (x) expectations among participants that the value of a particular
-                Cryptoasset or Cryptoassets generally will soon change. A decrease in the price of a
-                single cryptoasset may cause volatility in the entire cryptoasset industry and may
-                affect the Cryptoassets available via our Services. Volatility in the price of
-                Cryptoassets may result in significant loss over a short period of time.
-            </p>
-        </li>
-        <li>
-            <h3>
-                Risk of losing access to Cryptoassets due to loss of private key(s) and wallet(s)
-            </h3>
-            <p>
-                A private key, or a combination of private keys, is necessary to deal in
-                Cryptoassets. Accordingly, loss of requisite private key(s) associated with your
-                digital wallet or vault storing Cryptoassets will result in loss of such
-                Cryptoassets. Moreover, any third party that gains access to such private key(s),
-                including by gaining access to login credentials of a hosted wallet service you use
-                (including the OpenChat Wallet), may be able to misappropriate your Cryptoassets.
-            </p>
-            <p>
-                Any errors or malfunctions caused by or otherwise related to the wallet you use to
-                receive and store Cryptoassets, including your own failure to properly maintain or
-                use such wallet, may also result in the loss of your Cryptoassets. Failure to
-                precisely follow any procedures set forth by us for dealing in Cryptoassets,
-                including, for instance, providing an incorrect wallet address, or using
-                incompatible wallet(s), may result in the loss of Cryptoassets you hold.
-            </p>
-        </li>
-        <li>
-            <h3>Regulatory risks</h3>
-            <p>
-                Regulation of Cryptoassets and the offering thereof, as well as blockchain
-                technologies, and cryptoasset exchanges is currently underdeveloped and likely to
-                rapidly evolve. Regulation varies significantly between different jurisdictions and
-                is subject to significant uncertainty. Regulators may in the future adopt laws,
-                regulations, guidance or other actions that may severely impact the development,
-                operations and growth of the OpenChat Platform and the adoption and utility of
-                Cryptoassets.
-            </p>
-        </li>
-        <li>
-            <h3>Risks associated with the blockchain protocol</h3>
-            <p>
-                Because Cryptoassets are based on blockchain protocols, any malfunction, breakdown
-                or abandonment of a blockchain protocol may have a material adverse effect on
-                Cryptoassets. Moreover, advances in cryptography, or technical advances such as the
-                development of quantum computing, could present risks to Cryptoassets by rendering
-                ineffective the cryptographic consensus mechanism that underpins the blockchain
-                protocol.
-            </p>
-        </li>
-        <li>
-            <h3>Risk of hacking and software and security weaknesses</h3>
-            <p>
-                Hackers or other malicious groups or organizations may attempt to interfere with
-                Cryptoassets in a variety of ways, including malware attacks, denial of service
-                attacks, consensus-based attacks, Sybil attacks, smurfing and spoofing, as well as
-                attacks which overpower the consensus-based mechanism on which the blockchain in
-                built and attacks which interfere with or otherwise cause nodes to malfunction
-                (nodes are computers / hardware devices that help maintain the blockchain).
-            </p>
-            <p>
-                There is also an inherent risk that the software and related technologies and
-                theories we use could contain Viruses or Vulnerabilities. Viruses or Vulnerabilities
-                could cause, inter alia, complete loss of Cryptoassets, or could negatively affect
-                the OpenChat Platform.
-            </p>
-        </li>
-        <li>
-            <h3>Other potential risks applicable to Cryptoassets</h3>
-            <p>
-                In addition to the risks included in this Schedule 1, there are other risks
-                associated with dealing in Cryptoassets (including CHAT), including those that we
-                cannot reasonably foresee. Additional risks may also materialize as unanticipated
-                variations or combinations of the risks discussed above in this Schedule 1.
-            </p>
-            <p>
-                Where you deal in any Cryptoasset you should take care to understand the risks
-                involved. In this respect, we note some of the additional specific risks relevant to
-                CHAT. In relation to Cryptoassets other than CHAT, it is usual for the issuer of the
-                Cryptoasset to provide an explanation of the risks involved (or if they have not,
-                this can be an indicator that a Cryptoasset is particularly risky as there has been
-                a lack of consideration of the risks relevant to that Cryptoasset). By dealing in
-                any Cryptoasset, you confirm to us that you have taken to time to understand, and
-                accept, the risks involved (including in respect of the risks as explained by the
-                issuer of the Cryptoasset).
-            </p>
-        </li>
-        <li>
-            <h3>Forks and Airdrops</h3>
-            <p>
-                The underlying protocols of Cryptoassets may be subject to substantial changes in
-                their operating rules (called a “forks”), and these may alter the value or function
-                of a Cryptoasset. A fork may result in multiple versions of a Cryptoasset, leading
-                to volatility as one version becomes dominant over another, which may lose its
-                value.
-            </p>
-            <p>
-                There may be additional distributions (called an “airdrop”) made to holders of a
-                particular Cryptoasset, which may be a new variant of a Cryptoasset or a further
-                quantity of the same Cryptoasset. The (anticipated) occurrence of an airdrop may
-                impact the value of the Cryptoasset(s) affected by that airdrop.
-            </p>
-        </li>
-    </ul>
-
-    <p>
-        <strong>CHAT specific risks</strong>
-    </p>
-    <p>
-        As noted elsewhere in these Terms, CHAT is not being structured or sold as securities nor
-        any other form of regulated investment product. Accordingly, there has not been any
-        consideration as to whether the CHAT is a suitable or an appropriate thing for you to deal
-        in. In addition to the General Cryptoasset risks, you should be aware of the following risks
-        in relation to CHAT specifically:
-    </p>
-    <ul class="custom_list" style={"--prefix: ''"}>
-        <li>
-            <h3>Lack of operating history</h3>
-            <p>
-                Purchases of CHAT involve a high degree of risk. The value of CHAT is reliant on the
-                success of us developing our business. As such, CHAT has all of the risks and
-                uncertainties normally associated with a developing business, including in respect
-                of potential difficulties operating the OpenChat Platform, lack of name recognition,
-                lack of adequate capital to progress the business, and difficulties in complying
-                with all Applicable Law. Financial and operational risks confronting start-ups are
-                significant and we are not immune to these. The market in which we compete is highly
-                competitive, and the percentage of companies that survive and prosper is small.
-            </p>
-            <p>
-                Our lack of an operating history may make it difficult for you to evaluate our
-                business and long-term operating prospects and the prospects of the OpenChat
-                Platform in connection with acquiring CHAT. These risks include, but are not limited
-                to, our ability to: (i) increase revenues and manage costs relating to the operation
-                of the OpenChat Platform; (ii) increase awareness of the OpenChat Platform and CHAT;
-                (iii) offer compelling content on the OpenChat Platform; (iv) maintain current and
-                develop new strategic relationships; (v) respond effectively to competitive
-                pressures; (vi) continue to develop and upgrade technology; and (vii) raise any
-                additional capital as potentially required. There are no assurances that our
-                business strategy will be successful, nor that we will address these risks
-                successfully during the operation of the OpenChat Platform and CHAT.
-            </p>
-        </li>
-        <li>
-            <h3>Risks associated with uncertain regulation</h3>
-            <p>
-                The regulatory status of the CHAT may be unclear or unsettled in certain
-                jurisdictions. It is difficult to predict how or whether regulatory agencies may
-                apply existing regulation with respect to CHAT and its applications, including the
-                OpenChat Platform. It is likewise difficult to predict how or whether legislatures
-                or regulatory agencies may implement changes to law and regulation affecting
-                distributed ledger technology and its applications. Regulatory actions could
-                negatively impact CHAT in various ways, including, for purposes of illustration
-                only, through a determination that CHAT are a regulated financial instrument that
-                require registration or licensing. We may cease operations in a jurisdiction in the
-                event that regulatory actions, or changes to Applicable Law, make it illegal to
-                operate in such jurisdiction, or commercially undesirable to obtain the necessary
-                regulatory approval(s) to operate in such jurisdiction.
-            </p>
-            <p>
-                More generally, the OpenChat Platform is pioneered on new and evolving technology,
-                which increases legal complexity, particularly as the Applicable Law is subject to
-                interpretation and change. This could result in a variety of adverse consequences,
-                including civil penalties and fines as well as the requirement that some or all of
-                our Services by restricted or prohibited in certain jurisdictions. These
-                developments could have an adverse effect on the operations of the OpenChat Platform
-                and the value of CHAT.
-            </p>
-        </li>
-        <li>
-            <h3>Legal proceedings and litigation</h3>
-            <p>
-                From time to time, we may be involved in legal proceedings or litigation. The
-                results of such legal proceedings and claims cannot be predicted with certainty and,
-                regardless of the outcome, legal proceedings could have an adverse impact on our
-                business, because of defence and settlement costs, diversion of resources, and other
-                factors. Generally, if third parties are successful in their claims, we may have to
-                pay substantial damages, account for profits derived from the alleged infringing
-                acts, and cease to use certain technologies or take other actions that could be
-                detrimental to our business. If there is an intellectual property infringement
-                claim, or to avoid such claims, we may be prohibited from selling or licensing to
-                others some or all Services we develop, unless the patent or copyright holder grants
-                a license of the relevant intellectual property to us, which the patent or copyright
-                holder is not obligated to do. There also may be adverse publicity associated with
-                litigation that could negatively affect people’s perception of us, the OpenChat
-                Platform and/or CHAT, regardless of whether the allegations are valid or we are
-                ultimately found liable. Accordingly, litigation may adversely affect our business
-                and financial condition.
-            </p>
-        </li>
-        <li>
-            <h3>Intellectual property</h3>
-            <p>
-                Companies, organisations, or individuals, including competitors, may hold or obtain
-                patents, trademarks, or other proprietary rights that would prevent, limit, or
-                interfere with our ability to make, use, develop, sell, and / or market CHAT and /
-                or the OpenChat Platform, which could make it more difficult for us to operate our
-                business. These third parties may have applied for, been granted, or obtained,
-                patents that relate to intellectual property, and which compete with our
-                intellectual property or technology. This may require us to develop or obtain
-                alternative technology, or obtain appropriate licenses under these patents, which
-                may not be available on acceptable terms or at all. Such a circumstance may result
-                in us having to significantly increase development efforts and resources to redesign
-                the technology in order for us to safeguard our competitive edge against competitors
-                in the same industry. There is a risk that our means of protecting intellectual
-                property rights may not be adequate, and weaknesses or failures in this area could
-                adversely affect our business or reputation, financial condition, the operations of
-                the OpenChat Platform and the development of CHAT.
-            </p>
-            <p>
-                From time to time, we may receive communications from holders of patents or
-                trademarks regarding their proprietary rights. Companies holding patents or other
-                intellectual property rights may bring suits alleging infringement of such rights or
-                otherwise assert their rights and urge us to take licenses. In addition, if we are
-                determined to have infringed upon a third party's intellectual property rights, we
-                may be required to cease operating the OpenChat Platform or certain Services, pay
-                substantial damages, seek a license from the holder of the infringed intellectual
-                property right (which license may not be available on reasonable terms or at all),
-                and/or establish and maintain alternative branding for items relating to the
-                OpenChat Platform and our Services. We may need to file lawsuits to protect our
-                intellectual property rights from infringement from third parties, which could be
-                expensive, time consuming, and distract management's attention from our core
-                operations.
-            </p>
-            <p>
-                Our ability to serve our customers and the OpenChat Platform’s participants will
-                depend upon our intellectual property. The steps we take to protect our intellectual
-                property rights may be inadequate. In order to protect our intellectual property
-                rights, we may be required to spend significant resources to monitor and protect
-                these rights. Litigation brought to protect and enforce our intellectual property
-                rights could be costly, time-consuming and distracting to management and could
-                result in the impairment or loss of portions of our intellectual property.
-                Furthermore, our efforts to enforce our intellectual property rights may be met with
-                defences, counterclaims, and countersuits attacking the validity and enforceability
-                of our intellectual property rights. Our failure to secure, protect, and enforce our
-                intellectual property rights could seriously harm the CHAT brand and adversely
-                affect the development of the CHAT.
-            </p>
-        </li>
-        <li>
-            <h3>
-                CHAT will have no refund rights or similar features and may have limited liquidity
-            </h3>
-            <p>
-                After issuance, to the extent permitted by Applicable Law you will have no right to
-                return your CHAT to us or to receive a refund or otherwise require us to exchange
-                CHAT for a certain value. As a result, if there is not sufficient demand or interest
-                in the OpenChat Platform and CHAT, or if there are limits on the transferability of,
-                or limited liquidity for, CHAT, then you may lose all or a portion of your
-                investment.
-            </p>
-        </li>
-        <li>
-            <h3>Future distribution of CHAT and other types of token</h3>
-            <p>
-                The distribution by us of a substantial number of CHAT or additional types of token
-                could have an adverse effect on the value of CHAT. Any distribution of CHAT could
-                dilute your percentage interest in then-outstanding CHAT, if any, and have an
-                adverse effect on the market value of the CHAT. Additional new types of cryptoasset
-                may also impact the value of CHAT, and you have no rights in relation to such new
-                types of cryptoasset as a result of entering into these Terms.
-            </p>
-        </li>
-        <li>
-            <h3>Funding</h3>
-            <p>
-                We intend to use the amounts received from CHAT holders to fund the development of
-                our business and the OpenChat Platform. Amounts received from CHAT holders may be
-                converted into other cryptoassets or fiat currencies. If the value of cryptoassets
-                or fiat currencies fluctuate unfavourably this may mean that we may not be able to
-                fund business development and deployment as expected or may not be able to develop
-                the OpenChat Platform in the manner it intended, which may consequently impact the
-                value of CHAT.
-            </p>
-        </li>
-        <li>
-            <h3>Lack information for monitoring their CHAT</h3>
-            <p>
-                You may not be able to obtain all information you want from time to time regarding
-                the OpenChat Platform and / or CHAT. Even if you do receive such information, you
-                may not receive it on a timely basis. It is possible that you may not be aware of
-                materially adverse changes that have occurred with respect to the OpenChat Platform
-                and/or CHAT in a timely manner. As a result of these difficulties, as well as other
-                uncertainties, you may not have accurate or accessible information relating to your
-                purchase, which could prevent you from taking actions with the potential to prevent
-                adverse consequences relating to your holding of CHAT.
-            </p>
-        </li>
-        <li>
-            <h3>CHAT may not be classified as unregulated</h3>
-            <p>
-                Although we intend for CHAT to be classified as unregulated, the regulatory position
-                of cryptoassets can be uncertain and subject to change. This may, at a later date,
-                cause us to reclassify CHAT as a security, in which case CHAT may be subject to
-                restrictions on resale and transfer.
-            </p>
-        </li>
-        <li>
-            <h3>Voting power</h3>
-            <p>
-                Whilst CHAT allows CHAT holders to participate in the governance of the OpenChat DAO
-                by voting on proposals, each CHAT holder’s voting power is proportional to the
-                amount of CHAT they have deposited and locked. As such, there is a risk that a small
-                number of CHAT holders may be able to exercise the majority of the voting power from
-                time to time, meaning that other holders of CHAT cannot effectively influence the
-                governance of the OpenChat DAO, and devaluing the CHAT they hold.
-            </p>
-        </li>
-    </ul>
-
-    <HashLinkTarget {onCopyUrl} id="9">
-        <h2>Schedule 2: Content Standards</h2>
-    </HashLinkTarget>
-
-    <p>
-        A Contribution must comply with Applicable Law. In addition, the Content Standards below
-        must be complied with in spirit as well as to the letter. The Content Standards apply to
-        each part of any Contribution as well as to its whole. We will determine, at our discretion,
-        whether a Contribution breaches the Content Standards.
-    </p>
-    <p>A Contribution must not:</p>
-    <ul class="custom_list" style={"--prefix: ''"}>
-        <li>
-            threaten to harm another individual or group of people. This includes direct, indirect,
-            and suggestive threats.
-        </li>
-        <li>
-            solicit, share, or make attempts to distribute content that depicts, promotes, or
-            attempts to normalise child sexual abuse.
-        </li>
-        <li>post content that in any way sexualises children.</li>
-        <li>
-            share sexually explicit or sexually suggestive content without the subject’s knowledge
-            and consent, otherwise known as “revenge porn”. This includes the non-consensual
-            distribution of intimate media that was created either with or without an individual’s
-            consent.
-        </li>
-        <li>
-            share content that glorifies, promotes, or normalises suicide or other acts of physical
-            self-harm. This includes content that encourages others to cut, burn, or starve
-            themselves, as well as content that normalizes eating disorders, such as anorexia and
-            bulimia. Self-harm acts or threats used as a form of emotional manipulation or coercion
-            are also prohibited.
-        </li>
-        <li>
-            share real media depicting gore, excessive violence, or animal harm, especially with the
-            intention to harass or shock others.
-        </li>
-        <li>
-            promote, coordinate, or execute financial scams. Promoting a particular crypto token or
-            NFT does not break this rule in general.
-        </li>
-        <li>
-            be sent persistently as a spam message. This includes repeatedly sending the same or
-            meaningless messages, either in the same chat or across multiple chats.
-        </li>
-    </ul>
-
-    <HashLinkTarget {onCopyUrl} id="10">
-        <h2>Schedule 3: Chat features</h2>
-    </HashLinkTarget>
-    <p>
-        <strong
-            >PLEASE NOTE THAT THE BELOW REPRESENTS FEATURES OF CHAT AS AT THE CURRENT DATE OF THESE
-            TERMS. HOWEVER, THERE MAY BE LEGAL, REGULATORY OR COMMERCIAL REASONS WHY CHAT FEATURE
-            MAY IN THE FUTURE CHANGE FROM THE BELOW.</strong>
-    </p>
-    <p>CHAT gives CHAT holders the following rights:</p>
-    <p>CHAT may be:</p>
-    <ul class="custom_list" style={"--prefix: ''"}>
-        <li>
-            deposited and locked as neurons to participate in the OpenChat DAO governance by voting
-            on proposals;
-        </li>
-        <li>
-            distributed as a voting reward in accordance with the DAO governance rules as set out at
-            https://oc.app/blog/governance.
-        </li>
-        <li>used to purchase a Diamond Membership; and</li>
-        <li>
-            used to gain access to additional features that we may, at our discretion, make
-            available from time to time.
-        </li>
-    </ul>
-    <p>
-        Please see Section G: Participating in OpenChat DAO to find out where you can obtain
-        information on the OpenChat DAO.
-    </p>
-    <p>
-        <strong>
-            Please note that we have <em>no</em> obligation to give CHAT any rights or attributes other
-            than those outlined above, and CHAT shall not give you any rights in relation to any aspect
-            of any business conducted at any time by us other than as explicitly stated above.
-        </strong>
-    </p>
-
-    <HashLinkTarget {onCopyUrl} id="11">
-        <h2>Schedule 4: Multiple accounts</h2>
-    </HashLinkTarget>
-
-    <p>
-        You may not buy or sell OpenChat accounts, nor may you create multiple accounts on the
-        OpenChat Platform:
-    </p>
-    <ul class="custom_list" style={"--prefix: ''"}>
-        <li>that you aren't actively using</li>
-        <li>to squat on usernames with the intention of selling them</li>
-        <li>to farm tokens</li>
-        <li>to give the appearance of activity in a group/community</li>
-        <li>to DoS the platform or otherwise drain platform resources</li>
-        <li>any other nefarious purpose</li>
-    </ul>
-</div>
-
-<style lang="scss">
-    .preamble p {
-        margin-bottom: toRem(24);
-    }
-
-    .section {
-        h2,
-        h3 {
-            margin-bottom: $sp4;
-            display: inline-block;
-        }
-        p {
-            margin-bottom: $sp4;
-        }
-        h2 {
-            @include font(bold, normal, fs-120);
-        }
-
-        h3 {
-            @include font(bold, normal, fs-110);
-        }
-
-        .custom_list.bold > li > h3 {
-            padding-left: 60px;
-        }
-
-        .custom_list {
-            --suffix: ")";
-            list-style-type: none;
-            counter-reset: item;
-            @include font(book, normal, fs-100);
-            margin-bottom: $sp5;
-        }
-
-        .custom_list > li {
-            padding-left: 60px;
-            position: relative;
-            margin-bottom: $sp3;
-        }
-
-        .custom_list.bold > li {
-            padding-left: 0;
-        }
-
-        .custom_list > li::before {
-            content: var(--prefix) counter(item) var(--suffix);
-            counter-increment: item;
-            font-weight: normal;
-            position: absolute;
-            left: 0;
-        }
-
-        .custom_list.bold > li::before {
-            font-weight: bold;
-        }
-    }
-
-    .interpretation {
-        display: grid;
-        margin-bottom: $sp4;
-        grid-template-columns: 1fr;
-        gap: $sp3;
-
-        :nth-child(2n-1) {
-            font-weight: bold;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/Toast.svelte b/frontend/app/src/components_mobile/Toast.svelte
deleted file mode 100644
index eb68dc7062..0000000000
--- a/frontend/app/src/components_mobile/Toast.svelte
+++ /dev/null
@@ -1,125 +0,0 @@
-<script lang="ts">
-    import { Body, Tooltip } from "component-lib";
-    import {
-        type ChatIdentifier,
-        iconSize,
-        localUpdates,
-        routeForChatIdentifier,
-        subscribe,
-    } from "@client";
-    import { navigate } from "@utils/navigation";
-    import { onMount } from "svelte";
-    import { _ } from "svelte-i18n";
-    import Bug from "svelte-material-icons/Bug.svelte";
-    import Close from "svelte-material-icons/Close.svelte";
-    import { sineIn } from "svelte/easing";
-    import { fly } from "svelte/transition";
-    import { i18nKey, interpolate } from "../i18n/i18n";
-    import { toastStore } from "../stores/toast";
-    import Translatable from "./Translatable.svelte";
-
-    let reactiveResourceKey = $derived($toastStore?.resourceKey);
-
-    function report() {
-        if (
-            $toastStore &&
-            $toastStore.kind === "failure" &&
-            $toastStore.err !== undefined &&
-            $reactiveResourceKey !== undefined
-        ) {
-            const msg = interpolate($_, $reactiveResourceKey);
-            const withDetail = `${msg} (${$toastStore.err})`;
-            const chatId = {
-                kind: "channel",
-                communityId: "dgegb-daaaa-aaaar-arlhq-cai",
-                channelId: 2235218862,
-            } as ChatIdentifier;
-            navigate(routeForChatIdentifier("community", chatId));
-            localUpdates.draftMessages.setTextContent({ chatId }, withDetail);
-            toastStore.hideToast();
-        }
-    }
-
-    onMount(() => {
-        const unsubs = [
-            subscribe("showFailureToast", ({ resourceKey, err }) =>
-                toastStore.showFailureToast(resourceKey, err),
-            ),
-            subscribe("showSuccessToast", (resourceKey) =>
-                toastStore.showSuccessToast(resourceKey),
-            ),
-        ];
-        return () => {
-            unsubs.forEach((u) => u());
-        };
-    });
-</script>
-
-{#if $toastStore && $reactiveResourceKey}
-    <div class="toast" transition:fly={{ y: 200, duration: 200, easing: sineIn }}>
-        <div
-            class="message"
-            class:failure={$toastStore.kind === "failure"}
-            class:success={$toastStore.kind === "success"}>
-            <Body align={"center"}>
-                <Translatable resourceKey={$reactiveResourceKey} />
-            </Body>
-            {#if $toastStore.kind === "failure"}
-                {#if $toastStore.err !== undefined}
-                    <Tooltip position="top" align="middle">
-                        <div class="report" onclick={report}>
-                            <Bug size={$iconSize} color={"var(--text-primary)"} />
-                        </div>
-                        {#snippet popup()}
-                            <Translatable resourceKey={i18nKey("reportBug")} />
-                        {/snippet}
-                    </Tooltip>
-                {/if}
-                <div class="close" onclick={toastStore.hideToast}>
-                    <Close size={$iconSize} color={"var(--text-primary)"} />
-                </div>
-            {/if}
-        </div>
-    </div>
-{/if}
-
-<style lang="scss">
-    .toast {
-        position: fixed;
-        bottom: $sp7;
-        width: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        @include z-index("toast");
-    }
-
-    .message {
-        transition: background 200ms ease-in-out;
-        background: var(--success);
-        border-radius: var(--rad-md);
-        padding: $sp4;
-        max-width: 800px;
-        margin: 0 $sp4;
-        display: flex;
-        gap: $sp4;
-        justify-content: center;
-        align-items: center;
-        color: var(--text-primary);
-        width: 100%;
-
-        &.failure {
-            background: var(--error);
-        }
-
-        &.success {
-            background: var(--success);
-        }
-
-        .close,
-        .report {
-            flex: 0 0 30px;
-            cursor: pointer;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/Translatable.svelte b/frontend/app/src/components_mobile/Translatable.svelte
deleted file mode 100644
index 63081819aa..0000000000
--- a/frontend/app/src/components_mobile/Translatable.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script lang="ts">
-    import type { ResourceKey } from "@client";
-    import { _ } from "svelte-i18n";
-    import { translatable } from "../actions/translatable";
-    import { interpolate } from "../i18n/i18n";
-
-    interface Props {
-        resourceKey: ResourceKey;
-        inline?: boolean;
-    }
-
-    let { resourceKey, inline = false }: Props = $props();
-</script>
-
-<span use:translatable={{ key: resourceKey }} style={inline ? "display:inline;" : ""}>
-    {interpolate($_, resourceKey)}
-</span>
diff --git a/frontend/app/src/components_mobile/UpgradeBanner.svelte b/frontend/app/src/components_mobile/UpgradeBanner.svelte
deleted file mode 100644
index 1e840937c7..0000000000
--- a/frontend/app/src/components_mobile/UpgradeBanner.svelte
+++ /dev/null
@@ -1,101 +0,0 @@
-<script lang="ts">
-    import { Body, BodySmall, ColourVars, Column, Row } from "component-lib";
-    import { OpenChat, Poller, Version } from "@client";
-    import { getContext, onDestroy } from "svelte";
-    import { i18nKey } from "../i18n/i18n";
-    import { activeVideoCall } from "../stores/video";
-    import Translatable from "./Translatable.svelte";
-
-    const VERSION_INTERVAL = 60 * 1000;
-    const client = getContext<OpenChat>("client");
-
-    let poller = new Poller(checkVersion, VERSION_INTERVAL);
-    // @ts-ignore
-    let clientVersion = Version.parse(window.OC_WEBSITE_VERSION);
-    let serverVersion = $state(clientVersion);
-    let countdown = $state(30);
-    let showBanner = $state(false);
-    let errorCount = 0;
-
-    onDestroy(() => poller.stop());
-
-    function checkVersion(): Promise<void> {
-        if (import.meta.env.OC_NODE_ENV !== "production" || $activeVideoCall !== undefined)
-            return Promise.resolve();
-        return getServerVersion().then((sv) => {
-            serverVersion = sv;
-            if (serverVersion.isGreaterThan(clientVersion)) {
-                poller.stop();
-                countdown = 30;
-                showBanner = true;
-                const interval = window.setInterval(() => {
-                    countdown = countdown - 1;
-                    if (countdown === 0) {
-                        window.clearInterval(interval);
-                        window.location.reload();
-                    }
-                }, 1000);
-            }
-        });
-    }
-
-    function getServerVersion(): Promise<Version> {
-        return fetch("/version", {
-            method: "get",
-            headers: {
-                "Content-Type": "application/json",
-            },
-        })
-            .then((res) => res.json())
-            .then((res) => {
-                client.logMessage("Server version: ", res);
-                errorCount = 0;
-                return Version.parse(res.version);
-            })
-            .catch((err) => {
-                errorCount += 1;
-                client.logError(`Unable to load server version ${errorCount} times`, err);
-                return clientVersion;
-            });
-    }
-
-    function reload(ev: Event) {
-        window.location.reload();
-        ev.preventDefault();
-    }
-</script>
-
-{#if showBanner}
-    <Column
-        mainAxisAlignment={"center"}
-        crossAxisAlignment={"center"}
-        backgroundColor={ColourVars.warning}
-        padding={"lg"}
-        supplementalClass={"upgrade_banner"}>
-        <Row wrap>
-            <Body width={"hug"} fontWeight={"bold"}>
-                <Translatable resourceKey={i18nKey("updateRequired", { countdown })} />
-            </Body>
-        </Row>
-        <BodySmall width={"hug"} fontWeight={"light"}>
-            <a href="/" onclick={reload}><Translatable resourceKey={i18nKey("updateNow")} /></a>
-        </BodySmall>
-    </Column>
-{/if}
-
-<style lang="scss">
-    :global(.container.upgrade_banner) {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        @include z-index("upgrade-banner");
-    }
-
-    a {
-        text-decoration: underline;
-        text-underline-offset: $sp1;
-        cursor: pointer;
-        color: inherit;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/UsernameInput.svelte b/frontend/app/src/components_mobile/UsernameInput.svelte
deleted file mode 100644
index 17222069e6..0000000000
--- a/frontend/app/src/components_mobile/UsernameInput.svelte
+++ /dev/null
@@ -1,112 +0,0 @@
-<script lang="ts">
-    import { Input, Spinner } from "component-lib";
-    import type { OpenChat } from "@client";
-    import { onMount, untrack } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { i18nKey, interpolate } from "../i18n/i18n";
-    import Translatable from "./Translatable.svelte";
-
-    const MIN_EXTANT_USERNAME_LENGTH = 3;
-    const MAX_USERNAME_LENGTH = 20;
-
-    interface Props {
-        client: OpenChat;
-        originalUsername: string;
-        username: string;
-        usernameValid: boolean;
-        disabled?: boolean;
-        errorMsg?: string;
-    }
-
-    let {
-        client,
-        originalUsername,
-        username = $bindable(),
-        usernameValid = $bindable(),
-        disabled = false,
-        errorMsg = $bindable(),
-    }: Props = $props();
-
-    let timer: number | undefined = undefined;
-    let currentPromise: Promise<unknown> | undefined;
-    let checking = $state(false);
-
-    onMount(() => {
-        username = originalUsername;
-        usernameValid = originalUsername?.length > 0;
-    });
-
-    function checkUsername(value: string) {
-        const promise = client
-            .checkUsername(value, false)
-            .then((resp) => {
-                if (promise !== currentPromise) {
-                    return;
-                }
-
-                checking = false;
-
-                if (value.toLowerCase() === originalUsername.toLowerCase() || resp === "success") {
-                    usernameValid = true;
-                    errorMsg = undefined;
-                    return;
-                } else {
-                    usernameValid = false;
-                }
-
-                if (resp === "username_taken") {
-                    errorMsg = "register.usernameTaken";
-                }
-            })
-            .catch((err) => {
-                errorMsg = "register.errorCheckingUsername";
-                client.logError("Unable to check username: ", err);
-                checking = false;
-                usernameValid = false;
-            });
-
-        currentPromise = promise;
-    }
-
-    $effect(() => {
-        if (typeof username !== "string") return;
-
-        let u = username;
-
-        untrack(() => {
-            usernameValid = client.isUsernameValid(u);
-            errorMsg = undefined;
-
-            window.clearTimeout(timer);
-            checking = false;
-
-            if (usernameValid || u.toLowerCase() === originalUsername.toLowerCase()) {
-                checking = true;
-                timer = window.setTimeout(() => checkUsername(u), 350);
-            }
-        });
-    });
-</script>
-
-<Input
-    bind:value={username}
-    {disabled}
-    error={errorMsg !== undefined || !usernameValid}
-    minlength={MIN_EXTANT_USERNAME_LENGTH}
-    maxlength={MAX_USERNAME_LENGTH}
-    placeholder={interpolate($_, i18nKey("register.enterUsername"))}>
-    {#snippet icon(color)}
-        {#if checking}
-            <Spinner
-                size={"1.4rem"}
-                backgroundColour={"var(--text-tertiary)"}
-                foregroundColour={color} />
-        {/if}
-    {/snippet}
-    {#snippet subtext()}
-        <Translatable
-            resourceKey={i18nKey(
-                errorMsg ?? "Username, alphanumeric characters & underscrores only",
-            )}></Translatable>
-    {/snippet}
-</Input>
diff --git a/frontend/app/src/components_mobile/bots/AutoBotBuilder.svelte b/frontend/app/src/components_mobile/bots/AutoBotBuilder.svelte
deleted file mode 100644
index a1f035be87..0000000000
--- a/frontend/app/src/components_mobile/bots/AutoBotBuilder.svelte
+++ /dev/null
@@ -1,328 +0,0 @@
-<script lang="ts">
-    import { Body, BodySmall, Column, Form, Input, InputIconButton, Row } from "component-lib";
-    import {
-        allUsersStore,
-        debouncedDerived,
-        OpenChat,
-        publish,
-        validateBot,
-        ValidationErrors,
-        validEndpoint,
-        type BotDefinition,
-        type CommandDefinition,
-        type ExternalBot,
-        type ValidationErrorMessages,
-    } from "@client";
-    import { getContext, untrack } from "svelte";
-    import { _ } from "svelte-i18n";
-    import Reload from "svelte-material-icons/Reload.svelte";
-    import { i18nKey, interpolate } from "../../i18n/i18n";
-    import { toastStore } from "../../stores/toast";
-    import EditableAvatar from "../EditableAvatar.svelte";
-    import ErrorMessage from "../ErrorMessage.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import SingleUserSelector from "../home/SingleUserSelector.svelte";
-    import Tabs, { type Tab } from "../Tabs.svelte";
-    import Translatable from "../Translatable.svelte";
-    import BotCommands from "./BotCommands.svelte";
-    import BotPermissionViewer from "./BotPermissionViewer.svelte";
-    import InstallationLocationSelector from "./InstallationLocationSelector.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        valid: boolean;
-        schemaLoaded: boolean;
-        candidate: ExternalBot;
-        nameDirty: boolean;
-        principal: string;
-        mode: "register" | "update";
-    }
-
-    let {
-        valid = $bindable(),
-        schemaLoaded = $bindable(),
-        principal = $bindable(),
-        candidate = $bindable(),
-        nameDirty,
-        mode,
-    }: Props = $props();
-    let debug = $state(false);
-    let schemaLoading = $state(false);
-
-    let errors = $derived.by(
-        debouncedDerived(
-            () => [$state.snapshot(candidate), principal],
-            async () => {
-                const errors = validateBot(principal, candidate, mode);
-                if (errors.get("bot_name").length == 0 && nameDirty) {
-                    errors.addErrors("bot_name", await checkUsername(candidate.name));
-                }
-                return errors;
-            },
-            300,
-            new ValidationErrors(),
-        ),
-    );
-
-    function checkUsername(value: string): Promise<ValidationErrorMessages> {
-        return client
-            .checkUsername(value, true)
-            .then((resp) => {
-                if (resp === "success") {
-                    return [];
-                }
-
-                if (resp === "username_taken") {
-                    return [i18nKey("bots.builder.errors.duplicateName")];
-                }
-
-                return [i18nKey("bots.builder.errors.botNameInvalid")];
-            })
-            .catch((_) => {
-                return [i18nKey("bots.builder.errors.nameCheckError")];
-            });
-    }
-
-    // TODO we will probably need to come back to this to flesh out edit mode (is the bot dirty etc)
-    // let editing = $derived(bot !== undefined);
-
-    $effect(() => {
-        const isValid = errors.size === 0 && schemaLoaded;
-        if (isValid !== valid) {
-            valid = isValid;
-        }
-    });
-
-    function botAvatarSelected(detail: { url: string; data: Uint8Array }) {
-        candidate.avatarUrl = detail.url;
-    }
-
-    function onSubmit(e: Event) {
-        e.preventDefault();
-    }
-
-    function onSelectCommand(cmd: CommandDefinition) {
-        publish("viewBotCommand", cmd);
-    }
-
-    $effect(() => {
-        void candidate.endpoint;
-        untrack(endpointChanged);
-    });
-
-    function endpointChanged() {
-        schemaLoaded = false;
-        candidate.definition = {
-            kind: "bot_definition",
-            description: "",
-            commands: [],
-            autonomousConfig: undefined,
-            defaultSubscriptions: undefined,
-            dataEncoding: undefined,
-            restrictedLocations: undefined,
-        };
-    }
-
-    function loadDefinition() {
-        if (!schemaLoading && validEndpoint(candidate.endpoint)) {
-            schemaLoading = true;
-            schemaLoaded = false;
-            client
-                .getBotDefinition(candidate.endpoint)
-                .then((resp) => {
-                    if (resp.kind === "bot_definition") {
-                        candidate.definition = resp;
-                        schemaLoaded = true;
-                    } else {
-                        toastStore.showFailureToast(i18nKey("Failed to load bot definition"));
-                    }
-                })
-                .finally(() => (schemaLoading = false));
-        }
-    }
-
-    function getTabs(definition: BotDefinition): Tab[] {
-        const tabs: Tab[] = [];
-        if (definition.commands.length > 0) {
-            tabs.push({ title: i18nKey("bots.builder.commandsLabel"), snippet: commands });
-        }
-        if (definition.autonomousConfig !== undefined) {
-            tabs.push({
-                title: i18nKey("bots.builder.autonomousPermissionsLabel"),
-                snippet: autonomousPermissions,
-            });
-        }
-        return tabs;
-    }
-</script>
-
-{#snippet configtabs()}
-    {@const tabs = getTabs(candidate.definition)}
-    {#if tabs.length === 1}
-        <Body fontWeight={"bold"}>
-            <Translatable resourceKey={tabs[0].title} />
-        </Body>
-        {@render tabs[0].snippet()}
-    {:else}
-        <Tabs {tabs}></Tabs>
-    {/if}
-{/snippet}
-
-{#snippet commands()}
-    {#if candidate.definition.commands.length > 0}
-        <BotCommands commands={candidate.definition.commands} onClick={onSelectCommand} />
-    {:else}
-        <BodySmall colour={"textSecondary"}>
-            <Translatable resourceKey={i18nKey("bots.builder.noCommands")}></Translatable>
-        </BodySmall>
-    {/if}
-{/snippet}
-
-{#snippet autonomousPermissions()}
-    {#if candidate.definition.autonomousConfig !== undefined}
-        <BotPermissionViewer
-            nested
-            permissions={candidate.definition.autonomousConfig.permissions} />
-    {:else}
-        <BodySmall colour={"textSecondary"}>
-            <Translatable resourceKey={i18nKey("bots.builder.noAutonomousConfig")}></Translatable>
-        </BodySmall>
-    {/if}
-{/snippet}
-
-<Form {onSubmit}>
-    <Column gap={"xl"}>
-        <Row mainAxisAlignment={"center"} crossAxisAlignment={"center"}>
-            <EditableAvatar
-                highlightBorder
-                size={"headline"}
-                image={candidate.avatarUrl}
-                onImageSelected={botAvatarSelected} />
-        </Row>
-
-        {#if candidate.registrationStatus.kind === "private" && mode === "register"}
-            <InstallationLocationSelector bind:location={candidate.registrationStatus.location} />
-        {/if}
-
-        <Input
-            autofocus
-            minlength={3}
-            maxlength={100}
-            placeholder={interpolate(
-                $_,
-                mode === "update"
-                    ? i18nKey("bots.builder.editPrincipalPlaceholder")
-                    : i18nKey("bots.builder.principalPlaceholder"),
-            )}
-            error={errors.has("bot_principal")}
-            bind:value={principal}>
-            {#snippet subtext()}
-                <Row gap={"xs"}>
-                    <Translatable resourceKey={i18nKey("bots.builder.principalLabel")} />
-                    <span>
-                        (<Translatable resourceKey={i18nKey("bots.builder.principalRules")} />)
-                    </span>
-                </Row>
-            {/snippet}
-        </Input>
-
-        {#if mode === "update"}
-            <SingleUserSelector
-                mentionSelf
-                onUserSelected={(user) => (candidate.ownerId = user.userId)}
-                selectedReceiver={$allUsersStore.get(candidate.ownerId)}
-                placeholder={"bots.builder.ownerLabel"}>
-                {#snippet subtext()}
-                    <Translatable resourceKey={i18nKey("bots.builder.ownerRules")} />
-                {/snippet}
-            </SingleUserSelector>
-        {/if}
-
-        {#if mode === "register"}
-            <Input
-                minlength={3}
-                maxlength={25}
-                placeholder={interpolate($_, i18nKey("bots.builder.namePlaceholder"))}
-                error={errors.has("bot_name")}
-                bind:value={candidate.name}>
-                {#snippet subtext()}
-                    <Translatable resourceKey={i18nKey("bots.builder.nameRules")} />
-                {/snippet}
-            </Input>
-        {/if}
-
-        <Input
-            autofocus
-            minlength={3}
-            maxlength={200}
-            placeholder={interpolate($_, i18nKey("https://my_openchat_bot"))}
-            error={errors.has("bot_endpoint")}
-            bind:value={candidate.endpoint}>
-            {#snippet subtext()}
-                <Row gap={"xs"}>
-                    <Translatable resourceKey={i18nKey("bots.builder.endpointLabel")} />
-                    <span>
-                        (<Translatable resourceKey={i18nKey("bots.builder.endpointRules")} />)
-                    </span>
-                </Row>
-            {/snippet}
-
-            {#snippet iconButtons()}
-                <InputIconButton disabled={errors.has("bot_endpoint")} onClick={loadDefinition}>
-                    {#snippet children(color)}
-                        <Reload {color}></Reload>
-                    {/snippet}
-                </InputIconButton>
-            {/snippet}
-        </Input>
-
-        {#if schemaLoaded}
-            <Column gap={"xl"} padding={["zero", "md"]}>
-                <Column>
-                    <Body fontWeight={"bold"}>
-                        <Translatable resourceKey={i18nKey("bots.builder.descLabel")} />
-                    </Body>
-                    <BodySmall colour={"textSecondary"}>
-                        <Markdown inline={false} text={candidate.definition.description} />
-                    </BodySmall>
-                </Column>
-
-                {@render configtabs()}
-            </Column>
-
-            <div class="error">
-                {#if errors.has("duplicate_commands")}
-                    <ErrorMessage>
-                        <Translatable resourceKey={errors.get("duplicate_commands")[0]}
-                        ></Translatable
-                        ></ErrorMessage>
-                {/if}
-                {#if errors.has("no_commands")}
-                    <ErrorMessage>
-                        <Translatable resourceKey={errors.get("no_commands")[0]}></Translatable
-                        ></ErrorMessage>
-                {/if}
-            </div>
-        {/if}
-
-        {#if debug}
-            <pre class="debug">
-            {JSON.stringify(candidate, null, 4)}
-        </pre>
-            <pre>{valid}</pre>
-        {/if}
-    </Column>
-</Form>
-
-<style lang="scss">
-    .debug {
-        @include font(book, normal, fs-80);
-    }
-
-    .error {
-        :global(.error) {
-            margin-top: $sp3;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/bots/BotBuilderModal.svelte b/frontend/app/src/components_mobile/bots/BotBuilderModal.svelte
deleted file mode 100644
index 44bf8b7137..0000000000
--- a/frontend/app/src/components_mobile/bots/BotBuilderModal.svelte
+++ /dev/null
@@ -1,181 +0,0 @@
-<script lang="ts">
-    import { Column, CommonButton, Row } from "component-lib";
-    import {
-        currentUserIdStore,
-        emptyBotInstance,
-        OpenChat,
-        type ExternalBot,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { toastStore } from "../../stores/toast";
-    import SlidingPageContent from "../home/SlidingPageContent.svelte";
-    import FancyLoader from "../icons/FancyLoader.svelte";
-    import Translatable from "../Translatable.svelte";
-    import BotBuilder from "./AutoBotBuilder.svelte";
-    import ChooseBot from "./ChooseBot.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        onClose: () => void;
-        mode: "register" | "update" | "remove";
-    }
-
-    let { onClose, mode = "register" }: Props = $props();
-
-    let principal = $state("");
-    let valid = $state(false);
-    let schemaLoaded = $state(false);
-    let busy = $state(false);
-    let step: "choose" | "edit" = $state(
-        mode === "update" || mode === "remove" ? "choose" : "edit",
-    );
-
-    let botState = $state({
-        original: emptyBotInstance($currentUserIdStore),
-        current: emptyBotInstance($currentUserIdStore),
-    });
-
-    let ownerDirty = $derived(botState.original.ownerId !== botState.current.ownerId);
-    let nameDirty = $derived(botState.original.name !== botState.current.name);
-    let avatarDirty = $derived(botState.original.avatarUrl !== botState.current.avatarUrl);
-    let endpointDirty = $derived(botState.original.endpoint !== botState.current.endpoint);
-    // let dirty = $derived(ownerDirty || nameDirty || avatarDirty || endpointDirty);
-
-    function register() {
-        if (botState.current !== undefined && valid) {
-            busy = true;
-            client
-                .registerBot(principal, botState.current)
-                .then((success) => {
-                    if (!success) {
-                        toastStore.showFailureToast(i18nKey("Unable to register bot"));
-                    } else {
-                        console.log("Bot registered");
-                        onClose();
-                    }
-                })
-                .finally(() => (busy = false));
-        }
-    }
-
-    function update() {
-        if (botState.current !== undefined && valid) {
-            busy = true;
-            const { id, ownerId, avatarUrl, endpoint, definition } = $state.snapshot(
-                botState.current,
-            );
-            client
-                .updateRegisteredBot(
-                    id,
-                    principal !== "" ? principal : undefined,
-                    ownerDirty ? ownerId : undefined,
-                    avatarDirty ? avatarUrl : undefined,
-                    endpointDirty ? endpoint : undefined,
-                    definition,
-                )
-                .then((success) => {
-                    if (!success) {
-                        toastStore.showFailureToast(i18nKey("Unable to register test bot"));
-                    } else {
-                        console.log("Bot registered");
-                        onClose();
-                    }
-                })
-                .finally(() => (busy = false));
-        }
-    }
-
-    function remove(id: string) {
-        busy = true;
-        client
-            .removeBot(id)
-            .then((success) => {
-                if (!success) {
-                    toastStore.showFailureToast(i18nKey("Unable to remove bot"));
-                } else {
-                    console.log("Bot removed");
-                    onClose();
-                }
-            })
-            .finally(() => (busy = false));
-    }
-
-    function selectBot(bot: ExternalBot) {
-        if (bot.ownerId === $currentUserIdStore) {
-            botState.original = bot;
-            botState.current = structuredClone(bot);
-            if (mode === "update") {
-                step = "edit";
-            } else if (mode === "remove") {
-                remove(bot.id);
-            }
-        }
-    }
-
-    let titleKey = $derived.by(() => {
-        switch (mode) {
-            case "register":
-                return i18nKey("bots.builder.title");
-            case "update":
-                return step === "choose"
-                    ? i18nKey("bots.update_bot.select")
-                    : i18nKey("bots.update_bot.title", { name: botState.current.name });
-            case "remove":
-                return i18nKey("bots.update_bot.remove");
-        }
-    });
-</script>
-
-<SlidingPageContent onBack={onClose} title={titleKey}>
-    <Column height={"fill"} gap={"xl"} padding={"xl"}>
-        {#if step === "choose"}
-            {#if !busy && (mode === "update" || mode === "remove")}
-                <ChooseBot ownedOnly onSelect={selectBot} />
-            {/if}
-            {#if mode === "remove" && busy}
-                <div class="loader">
-                    <FancyLoader />
-                </div>
-            {/if}
-        {:else if step === "edit" && botState.current !== undefined && mode !== "remove"}
-            <BotBuilder
-                {nameDirty}
-                {mode}
-                bind:candidate={botState.current}
-                bind:schemaLoaded
-                bind:valid
-                bind:principal />
-        {/if}
-
-        {#if step !== "choose"}
-            <Row crossAxisAlignment={"center"} mainAxisAlignment={"end"} gap={"md"}>
-                <CommonButton onClick={onClose} size={"small_text"}>
-                    <Translatable resourceKey={i18nKey("cancel")} />
-                </CommonButton>
-                {#if mode !== "remove"}
-                    <CommonButton
-                        mode={"active"}
-                        size={"medium"}
-                        onClick={mode === "update" ? update : register}
-                        disabled={!valid || busy}
-                        loading={busy}>
-                        <Translatable
-                            resourceKey={mode === "update"
-                                ? i18nKey("bots.update_bot.action")
-                                : i18nKey("bots.add.action")} />
-                    </CommonButton>
-                {/if}
-            </Row>
-        {/if}
-    </Column>
-</SlidingPageContent>
-
-<style lang="scss">
-    .loader {
-        width: toRem(50);
-        height: toRem(50);
-        margin: auto;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/bots/BotExplorer.svelte b/frontend/app/src/components_mobile/bots/BotExplorer.svelte
deleted file mode 100644
index d6eccdc3ec..0000000000
--- a/frontend/app/src/components_mobile/bots/BotExplorer.svelte
+++ /dev/null
@@ -1,76 +0,0 @@
-<script lang="ts">
-    import { interpolate } from "@src/i18n/i18n";
-    import { Search } from "component-lib";
-    import {
-        i18nKey,
-        type BotInstallationLocation,
-        type ExternalBotLike,
-        type OpenChat,
-    } from "@client";
-    import { getContext, onMount } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { botSearchState } from "../../stores/search.svelte";
-    import BotCard from "../home/communities/explore/BotCard.svelte";
-
-    const client = getContext<OpenChat>("client");
-    const PAGE_SIZE = 50;
-
-    interface Props {
-        location?: BotInstallationLocation;
-        onSelect: (match: ExternalBotLike | undefined) => void;
-        fill?: boolean;
-        maxHeight?: string;
-        excludeInstalled?: boolean;
-    }
-
-    let { location, onSelect, maxHeight, excludeInstalled }: Props = $props();
-
-    function onSearchEntered(reset = false) {
-        if (reset) {
-            botSearchState.reset();
-        } else {
-            botSearchState.nextPage();
-        }
-        console.log("Search entered: ", botSearchState.term);
-        client
-            .exploreBots(
-                botSearchState.term === "" ? undefined : botSearchState.term,
-                botSearchState.index,
-                PAGE_SIZE,
-                location,
-                excludeInstalled ?? false,
-            )
-            .then((results) => {
-                console.log("Results: ", results);
-                if (results.kind === "success") {
-                    if (reset) {
-                        botSearchState.results = results.matches;
-                    } else {
-                        botSearchState.appendResults(results.matches);
-                    }
-                    botSearchState.total = results.total;
-                }
-            });
-    }
-
-    onMount(() => onSearchEntered(true));
-</script>
-
-<Search
-    onSearch={() => onSearchEntered(true)}
-    onClear={() => (botSearchState.term = "")}
-    searching={false}
-    bind:value={botSearchState.term}
-    placeholder={interpolate($_, i18nKey("search"))} />
-
-<div class="matches" style={maxHeight ? `max-height: ${maxHeight}` : ""}>
-    {#each botSearchState.results as match}
-        <BotCard onSelect={() => onSelect(match)} bot={match} />
-    {/each}
-</div>
-
-<style lang="scss">
-    .matches {
-        @include nice-scrollbar();
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/bots/BotMember.svelte b/frontend/app/src/components_mobile/bots/BotMember.svelte
deleted file mode 100644
index 9339169e83..0000000000
--- a/frontend/app/src/components_mobile/bots/BotMember.svelte
+++ /dev/null
@@ -1,73 +0,0 @@
-<script lang="ts">
-    import { toastStore } from "@src/stores/toast";
-    import { BodySmall, Container, IconButton, MenuItem, MenuTrigger } from "component-lib";
-    import { installationLocationFrom, OpenChat, type CommunitySummary } from "@client";
-    import {
-        publish,
-        type ChatSummary,
-        type ExternalBot,
-        type GrantedBotPermissions,
-    } from "@shared";
-    import { getContext } from "svelte";
-    import DeleteOutline from "svelte-material-icons/DeleteOutline.svelte";
-    import DotsVertical from "svelte-material-icons/DotsVertical.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import FilteredUsername from "@shared_components/FilteredUsername.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import BotBadge from "../home/profile/BotBadge.svelte";
-    import Translatable from "../Translatable.svelte";
-    import BotAvatar from "./BotAvatar.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        collection: CommunitySummary | ChatSummary;
-        bot: ExternalBot;
-        canManage: boolean;
-        searchTerm?: string;
-        grantedPermissions: GrantedBotPermissions;
-    }
-
-    let { collection, bot, canManage, searchTerm, grantedPermissions }: Props = $props();
-
-    function removeBot() {
-        client.uninstallBot(installationLocationFrom(collection), bot.id).then((success) => {
-            if (!success) {
-                toastStore.showFailureToast(i18nKey("bots.manage.removeFailed"));
-            }
-        });
-    }
-</script>
-
-<Container
-    onClick={() => publish("showBot", { bot, collection, grantedPermissions })}
-    crossAxisAlignment={"start"}
-    gap={"md"}>
-    <BotAvatar size={"md"} {bot} />
-    <Container overflow={"hidden"} gap={"xxs"} direction={"vertical"} width={"fill"}>
-        <Container crossAxisAlignment={"center"} gap={"xs"}>
-            <FilteredUsername {searchTerm} username={bot.name} />
-            <BotBadge bot />
-        </Container>
-        <BodySmall width={"hug"} colour={"textSecondary"}>
-            <Markdown twoLine inline={false} suppressLinks text={bot.definition.description} />
-        </BodySmall>
-    </Container>
-    {#if canManage}
-        <MenuTrigger position={"bottom"} align={"end"}>
-            <IconButton padding={["sm", "xs", "sm", "zero"]} size={"md"}>
-                {#snippet icon(color)}
-                    <DotsVertical {color} />
-                {/snippet}
-            </IconButton>
-            {#snippet menuItems()}
-                <MenuItem onclick={() => removeBot()}>
-                    {#snippet icon(color, size)}
-                        <DeleteOutline {size} {color} />
-                    {/snippet}
-                    <Translatable resourceKey={i18nKey("bots.manage.remove")} />
-                </MenuItem>
-            {/snippet}
-        </MenuTrigger>
-    {/if}
-</Container>
diff --git a/frontend/app/src/components_mobile/bots/BotMessageContext.svelte b/frontend/app/src/components_mobile/bots/BotMessageContext.svelte
deleted file mode 100644
index be8a0bc4b6..0000000000
--- a/frontend/app/src/components_mobile/bots/BotMessageContext.svelte
+++ /dev/null
@@ -1,129 +0,0 @@
-<script lang="ts">
-    import { Avatar, Caption, ColourVars, Container, Tooltip } from "component-lib";
-    import { allUsersStore, OpenChat, type CommandArg } from "@client";
-    import type { BotContextCommand } from "@shared";
-    import { getContext } from "svelte";
-    import CogOutline from "svelte-material-icons/CogOutline.svelte";
-    import Typing from "@shared_components/Typing.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        botCommand: BotContextCommand;
-        botName: string;
-        finalised: boolean;
-    }
-
-    let { botCommand, finalised }: Props = $props();
-    const MAX_COMMAND_LENGTH = 30;
-    let paramValues = $derived(botCommand.args.map(paramValue));
-    let paramsLength = $derived(paramValues.reduce((total, p) => total + p.length, 0));
-    let paramMode: "truncated" | "full" = $derived(
-        paramsLength > MAX_COMMAND_LENGTH ? "truncated" : "full",
-    );
-    let text = $derived.by(() => {
-        if (paramMode === "truncated") {
-            return `@UserId(${botCommand.initiator}) used **/${botCommand.name}**${
-                botCommand.args.length > 0 ? " with " : ""
-            }`;
-        } else {
-            return `@UserId(${botCommand.initiator}) used **/${botCommand.name}**`;
-        }
-    });
-    let user = $derived($allUsersStore.get(botCommand.initiator));
-
-    function paramValue(param: CommandArg): string {
-        switch (param.kind) {
-            case "boolean":
-                return param.value?.toString() ?? "false";
-            case "integer":
-            case "decimal":
-                return param.value?.toString() ?? "null";
-            case "string":
-                return param.value ?? "null";
-            case "user":
-                return param.userId ? $allUsersStore.get(param.userId)?.username ?? "null" : "null";
-            case "dateTime":
-                return param.value
-                    ? client.toDatetimeString(new Date(Number(param.value)))
-                    : "null";
-        }
-    }
-</script>
-
-<Container crossAxisAlignment={"center"} gap={"xs"} supplementalClass={"bot-context"}>
-    {#if user}
-        <Avatar url={client.userAvatarUrl(user)} size={"xs"} />
-    {/if}
-    <Caption colour={"textSecondary"}>
-        <Markdown {text} />
-    </Caption>
-    {#if botCommand.args.length > 0}
-        {#if paramMode === "truncated"}
-            <Tooltip position="right" align="middle">
-                <div class="cog">
-                    <CogOutline color={ColourVars.textSecondary} />
-                </div>
-                {#snippet popup()}
-                    <div class="command-params">
-                        {#each botCommand.args as param}
-                            <div class="param">
-                                <div class="name">{param.name}:</div>
-                                <div class="value">{paramValue(param)}</div>
-                            </div>
-                        {/each}
-                    </div>
-                {/snippet}
-            </Tooltip>
-        {:else}
-            {#each paramValues as param}
-                <div class="inline-param">{param}</div>
-            {/each}
-        {/if}
-    {/if}
-    {#if !finalised}
-        <Typing />
-    {/if}
-</Container>
-
-<style lang="scss">
-    :global(.bot-context) {
-        :global(.markdown-wrapper) {
-            @include ellipsis();
-            flex-shrink: 0;
-        }
-
-        :global(.avatar.tiny) {
-            flex: 0 0 toRem(20);
-        }
-
-        .cog {
-            display: flex;
-        }
-    }
-
-    .inline-param {
-        padding: 0 $sp2;
-        border-radius: $sp2;
-        border: 1px solid var(--bd);
-        @include font(light, normal, fs-60);
-    }
-
-    :global(.command-params) {
-        word-wrap: unset;
-
-        .param {
-            display: flex;
-            align-items: start;
-            text-align: left;
-            gap: $sp2;
-            flex-wrap: nowrap;
-            flex-direction: column;
-
-            .value {
-                @include font(bold, normal, fs-50);
-            }
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/bots/BotPermissionViewer.svelte b/frontend/app/src/components_mobile/bots/BotPermissionViewer.svelte
deleted file mode 100644
index 48ca5c5037..0000000000
--- a/frontend/app/src/components_mobile/bots/BotPermissionViewer.svelte
+++ /dev/null
@@ -1,90 +0,0 @@
-<script lang="ts">
-    import { Body, Column, Row } from "component-lib";
-    import {
-        botChatPermissionList,
-        botCommunityPermissionList,
-        type ExternalBotPermissions,
-        messagePermissionsList,
-        type ResourceKey,
-    } from "@client";
-    import Check from "svelte-material-icons/Check.svelte";
-    import Minus from "svelte-material-icons/Minus.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import Tabs from "../Tabs.svelte";
-    import Translatable from "../Translatable.svelte";
-
-    interface Props {
-        permissions: ExternalBotPermissions;
-        title?: ResourceKey;
-        nested?: boolean;
-    }
-
-    let { permissions, title, nested = false }: Props = $props();
-</script>
-
-{#snippet check(label: ResourceKey, requested: boolean)}
-    <Row crossAxisAlignment={"center"} gap={"sm"}>
-        {#if requested}
-            <Check size={"1em"} color={"var(--success)"} />
-        {:else}
-            <Minus size={"1em"} color={"var(--txt-light)"} />
-        {/if}
-        <Body colour={requested ? "textPrimary" : "textSecondary"}>
-            <Translatable resourceKey={label}></Translatable>
-        </Body>
-    </Row>
-{/snippet}
-
-{#snippet chatTab()}
-    <Column gap={"sm"}>
-        {#each botChatPermissionList as perm}
-            {@render check(
-                i18nKey(`permissions.${perm}`),
-                permissions.chatPermissions.includes(perm),
-            )}
-        {/each}
-    </Column>
-{/snippet}
-{#snippet communityTab()}
-    <Column gap={"sm"}>
-        {#each botCommunityPermissionList as perm}
-            {@render check(
-                i18nKey(`permissions.${perm}`),
-                permissions.communityPermissions.includes(perm),
-            )}
-        {/each}
-    </Column>
-{/snippet}
-{#snippet messageTab()}
-    <Column gap={"sm"}>
-        {#each messagePermissionsList as perm}
-            {@render check(
-                i18nKey(`permissions.messagePermissions.${perm}`),
-                permissions.messagePermissions.includes(perm),
-            )}
-        {/each}
-    </Column>
-{/snippet}
-
-{#if title !== undefined}
-    <Body fontWeight={"bold"}>
-        <Translatable resourceKey={title} />
-    </Body>
-{/if}
-<Tabs
-    {nested}
-    initialIndex={2}
-    tabs={[
-        {
-            title: i18nKey("bots.builder.permScopeCommunity"),
-            snippet: communityTab,
-        },
-        {
-            title: i18nKey("bots.builder.permScopeChat"),
-            snippet: chatTab,
-        },
-        {
-            title: i18nKey("bots.builder.permScopeMessage"),
-            snippet: messageTab,
-        },
-    ]}></Tabs>
diff --git a/frontend/app/src/components_mobile/bots/BotPublisher.svelte b/frontend/app/src/components_mobile/bots/BotPublisher.svelte
deleted file mode 100644
index 5fb10ad1cb..0000000000
--- a/frontend/app/src/components_mobile/bots/BotPublisher.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script lang="ts">
-    import { Body, Column } from "component-lib";
-    import { i18nKey, type ExternalBot } from "@client";
-    import Translatable from "../Translatable.svelte";
-    import ChooseBot from "./ChooseBot.svelte";
-    import BotProperties from "./install/BotProperties.svelte";
-
-    interface Props {
-        selected: ExternalBot | undefined;
-    }
-
-    let { selected = $bindable() }: Props = $props();
-
-    function select(bot: ExternalBot) {
-        selected = bot;
-    }
-</script>
-
-{#if selected === undefined}
-    <Column padding={["zero", "md"]} gap={"lg"}>
-        <Body>
-            <Translatable resourceKey={i18nKey("proposal.maker.chooseBot")} />
-        </Body>
-        <ChooseBot ownedOnly onSelect={select} />
-    </Column>
-{:else}
-    <BotProperties padded bot={selected} installing={false}></BotProperties>
-{/if}
diff --git a/frontend/app/src/components_mobile/bots/ChooseBot.svelte b/frontend/app/src/components_mobile/bots/ChooseBot.svelte
deleted file mode 100644
index 5a76dd5da1..0000000000
--- a/frontend/app/src/components_mobile/bots/ChooseBot.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<script lang="ts">
-    import { ColourVars, Column, StatusCard } from "component-lib";
-    import { botState, currentUserIdStore, type ExternalBot } from "@client";
-    import { i18nKey } from "../../i18n/i18n";
-    import Translatable from "../Translatable.svelte";
-    import BotMatch from "./BotMatch.svelte";
-
-    interface Props {
-        onSelect: (bot: ExternalBot) => void;
-        ownedOnly: boolean;
-    }
-
-    let { onSelect, ownedOnly }: Props = $props();
-
-    let bots = $derived(
-        ownedOnly
-            ? [...botState.externalBots.values()].filter((b) => b.ownerId === $currentUserIdStore)
-            : [...botState.externalBots.values()],
-    );
-</script>
-
-{#if bots.length === 0}
-    <StatusCard borderColour={ColourVars.warning} mode={"warning"} title={"No bots available"}>
-        {#snippet body()}
-            <Translatable resourceKey={i18nKey("bots.update_bot.nobots")}></Translatable>
-        {/snippet}
-    </StatusCard>
-{:else}
-    <Column maxHeight={"30rem"} gap={"md"}>
-        {#each bots as bot}
-            <BotMatch {bot} {onSelect} />
-        {/each}
-    </Column>
-{/if}
diff --git a/frontend/app/src/components_mobile/bots/CommandArg.svelte b/frontend/app/src/components_mobile/bots/CommandArg.svelte
deleted file mode 100644
index 665003b6c5..0000000000
--- a/frontend/app/src/components_mobile/bots/CommandArg.svelte
+++ /dev/null
@@ -1,182 +0,0 @@
-<script lang="ts">
-    import { Column, Input, Option, Select, TextArea } from "component-lib";
-    import type { CommandArg, CommandParam } from "@client";
-    import { _ } from "svelte-i18n";
-    import { i18nKey, interpolate } from "../../i18n/i18n";
-    import DateInput from "../DateInput.svelte";
-    import SingleUserSelector from "../home/SingleUserSelector.svelte";
-    import IntegerInput from "../IntegerInput.svelte";
-    import Legend from "../Legend.svelte";
-    import NumberInput from "../NumberInput.svelte";
-    import Translatable from "../Translatable.svelte";
-
-    interface Props {
-        param: CommandParam;
-        arg: CommandArg;
-    }
-
-    let { param, arg = $bindable() }: Props = $props();
-</script>
-
-<div class="param">
-    {#snippet subtext()}
-        <Translatable resourceKey={i18nKey(param.name)} />
-        {#if param.required}
-            <Translatable resourceKey={i18nKey("(required)")} />
-        {/if}
-    {/snippet}
-
-    {#if arg.kind === "user" && param.kind === "user"}
-        <SingleUserSelector
-            onUserSelected={(user) => {
-                arg.userId = user.userId;
-            }}
-            placeholder={$_(param.placeholder ?? "")} />
-    {:else if arg.kind === "string" && param.kind === "string"}
-        {#if param.choices?.length ?? 0 > 0}
-            <Select
-                {subtext}
-                value={arg.value}
-                placeholder={interpolate(
-                    $_,
-                    i18nKey("bots.builder.chooseOption", {
-                        option: interpolate($_, i18nKey(param.name)),
-                    }),
-                )}
-                onSelect={(val) => (arg.value = val)}>
-                {#snippet selectedValue(val)}
-                    {#if val === ""}
-                        <Translatable
-                            resourceKey={i18nKey("bots.builder.chooseOption", {
-                                option: interpolate($_, i18nKey(param.name)),
-                            })} />
-                    {:else}
-                        {val}
-                    {/if}
-                {/snippet}
-                {#snippet selectOptions(onSelect)}
-                    <Column padding={"lg"}>
-                        {#each param.choices as choice}
-                            <Option
-                                value={choice.value}
-                                onClick={onSelect}
-                                selected={choice.value === arg.value}>
-                                <Translatable resourceKey={i18nKey(choice.name)} />
-                            </Option>
-                        {/each}
-                    </Column>
-                {/snippet}
-            </Select>
-        {:else if param.multi_line}
-            <TextArea
-                {subtext}
-                rows={2}
-                placeholder={interpolate($_, i18nKey(param.placeholder ?? ""))}
-                minlength={param.minLength}
-                maxlength={param.maxLength}
-                bind:value={arg.value}>
-            </TextArea>
-        {:else}
-            <Input
-                {subtext}
-                minlength={param.minLength}
-                maxlength={param.maxLength}
-                placeholder={interpolate($_, i18nKey(param.placeholder ?? ""))}
-                countdown
-                bind:value={arg.value}>
-            </Input>
-        {/if}
-    {:else if arg.kind === "boolean" && param.kind === "boolean"}
-        <Select
-            {subtext}
-            value={arg.value}
-            placeholder={`Choose ${$_(param.name)}`}
-            onSelect={(val) => (arg.value = val)}>
-            {#snippet selectedValue(val)}
-                {#if val}
-                    True
-                {:else}
-                    False
-                {/if}
-            {/snippet}
-            {#snippet selectOptions(onSelect)}
-                <Column padding={"lg"}>
-                    <Option value={true} onClick={onSelect} selected={true === arg.value}>
-                        <Translatable resourceKey={i18nKey("true")} />
-                    </Option>
-                    <Option value={false} onClick={onSelect} selected={false === arg.value}>
-                        <Translatable resourceKey={i18nKey("false")} />
-                    </Option>
-                </Column>
-            {/snippet}
-        </Select>
-    {:else if (arg.kind === "integer" && param.kind === "integer") || (arg.kind === "decimal" && param.kind === "decimal")}
-        {#if param.choices?.length ?? 0 > 0}
-            <Select
-                {subtext}
-                value={arg.value}
-                placeholder={`Choose ${$_(param.name)}`}
-                onSelect={(val) => (arg.value = val)}>
-                {#snippet selectedValue(val)}
-                    {#if val == null}
-                        <Translatable
-                            resourceKey={i18nKey("bots.builder.chooseOption", {
-                                option: interpolate($_, i18nKey(param.name)),
-                            })} />
-                    {:else}
-                        {val}
-                    {/if}
-                {/snippet}
-                {#snippet selectOptions(onSelect)}
-                    <Column padding={"lg"}>
-                        {#each param.choices as choice}
-                            <Option
-                                value={choice.value}
-                                onClick={onSelect}
-                                selected={choice.value === arg.value}>
-                                <Translatable resourceKey={i18nKey(choice.name)} />
-                            </Option>
-                        {/each}
-                    </Column>
-                {/snippet}
-            </Select>
-        {:else if arg.kind === "integer" && param.kind === "integer"}
-            <IntegerInput
-                {subtext}
-                min={param.minValue}
-                max={param.maxValue}
-                shouldClamp={false}
-                placeholder={i18nKey(param.placeholder ?? "")}
-                bind:value={arg.value} />
-        {:else if arg.kind === "decimal" && param.kind === "decimal"}
-            <NumberInput
-                {subtext}
-                min={param.minValue}
-                max={param.maxValue}
-                shouldClamp={false}
-                placeholder={i18nKey(param.placeholder ?? "")}
-                bind:value={arg.value}>
-            </NumberInput>
-        {/if}
-    {:else if arg.kind === "dateTime" && param.kind === "dateTime"}
-        <Legend label={i18nKey(param.name)} required={param.required} />
-        <DateInput
-            value={arg.value}
-            futureOnly={param.future_only}
-            placeholder={i18nKey(param.placeholder ?? "")}
-            onchange={(value) => {
-                arg.value = value;
-            }} />
-    {/if}
-</div>
-
-<style lang="scss">
-    .param {
-        margin-top: $sp3;
-    }
-
-    .param:not(:last-child) {
-        /* Gives a bit more spacing between param inputs */
-        margin-bottom: $sp4;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/bots/CommandInstanceBuilder.svelte b/frontend/app/src/components_mobile/bots/CommandInstanceBuilder.svelte
deleted file mode 100644
index 62b44feba2..0000000000
--- a/frontend/app/src/components_mobile/bots/CommandInstanceBuilder.svelte
+++ /dev/null
@@ -1,70 +0,0 @@
-<script lang="ts">
-    import { BodySmall, Button, Column, Form, Sheet, Subtitle } from "component-lib";
-    import { botState, OpenChat } from "@client";
-    import { random64, type FlattenedCommand, type MessageContext } from "@shared";
-    import { getContext } from "svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { toastStore } from "../../stores/toast";
-    import Translatable from "../Translatable.svelte";
-    import CommandArg from "./CommandArg.svelte";
-
-    interface Props {
-        command: FlattenedCommand;
-        onCancel: () => void;
-        onCommandSent: () => void;
-        messageContext: MessageContext;
-    }
-
-    const client = getContext<OpenChat>("client");
-    let { command, onCancel, onCommandSent, messageContext }: Props = $props();
-    let commandName = $derived(`/${command.name}`);
-    let busy = $state(false);
-
-    function onSubmit(e: Event) {
-        e.preventDefault();
-
-        if (!botState.instanceValid) return;
-        busy = true;
-        client
-            .executeBotCommand(
-                {
-                    kind: "chat_scope",
-                    chatId: messageContext.chatId,
-                    threadRootMessageIndex: messageContext.threadRootMessageIndex,
-                    messageId: random64(),
-                },
-                botState.createBotInstance(command),
-            )
-            .then((result) => {
-                if (result === "failure") {
-                    toastStore.showFailureToast(i18nKey("bots.failed"));
-                } else if (result === "too_many_requests") {
-                    toastStore.showFailureToast(i18nKey("bots.tooManyRequests"));
-                }
-            });
-        onCommandSent();
-    }
-</script>
-
-<Sheet onDismiss={onCancel}>
-    <Column overflow={"visible"} gap={"lg"} padding={"lg"}>
-        <Subtitle fontWeight={"bold"}>
-            {commandName}
-        </Subtitle>
-        <Form {onSubmit}>
-            {#if command.description}
-                <BodySmall>
-                    <Translatable resourceKey={i18nKey(command.description)} />
-                </BodySmall>
-            {/if}
-            {#if botState.selectedCommandArgs.length === command?.params?.length}
-                {#each command?.params ?? [] as param, i}
-                    <CommandArg arg={botState.selectedCommandArgs[i]} {param} />
-                {/each}
-            {/if}
-        </Form>
-        <Button disabled={!botState.instanceValid || busy} loading={busy} onClick={onSubmit}>
-            <Translatable resourceKey={i18nKey("Submit")} />
-        </Button>
-    </Column>
-</Sheet>
diff --git a/frontend/app/src/components_mobile/bots/CommandParameterViewer.svelte b/frontend/app/src/components_mobile/bots/CommandParameterViewer.svelte
deleted file mode 100644
index 5cd7a41670..0000000000
--- a/frontend/app/src/components_mobile/bots/CommandParameterViewer.svelte
+++ /dev/null
@@ -1,67 +0,0 @@
-<script lang="ts">
-    import { Body, BodySmall, Column, Row, Sheet } from "component-lib";
-    import { type CommandParam } from "@client";
-    import { i18nKey } from "../../i18n/i18n";
-    import Translatable from "../Translatable.svelte";
-
-    interface Props {
-        param: CommandParam;
-        onClose: () => void;
-    }
-
-    let { param, onClose }: Props = $props();
-</script>
-
-{#snippet field(title: string, value: string)}
-    <Column>
-        <Body fontWeight={"bold"}>
-            <Translatable resourceKey={i18nKey(title)} />
-        </Body>
-
-        <BodySmall colour={"textSecondary"}>
-            <Translatable resourceKey={i18nKey(value)} />
-        </BodySmall>
-    </Column>
-{/snippet}
-
-<Sheet onDismiss={onClose}>
-    <Column gap={"xl"} padding={"xl"}>
-        {@render field("bots.builder.paramNameLabel", param.name)}
-        {#if param.description}
-            {@render field("bots.builder.paramDescLabel", param.description)}
-        {/if}
-        {@render field("bots.builder.paramTypeLabel", param.kind)}
-        {@render field("bots.builder.required", param.required.toString())}
-        {#if param.placeholder}
-            {@render field("bots.builder.paramDescLabel", param.placeholder)}
-        {/if}
-        {#if param.kind === "string"}
-            <Row>
-                {@render field("bots.builder.minLengthLabel", param.minLength.toString())}
-                {@render field("bots.builder.maxLengthLabel", param.maxLength.toString())}
-            </Row>
-        {:else if param.kind === "integer" || param.kind === "decimal"}
-            <Row>
-                {@render field("bots.builder.minValueLabel", param.minValue.toString())}
-                {@render field("bots.builder.maxValueLabel", param.maxValue.toString())}
-            </Row>
-        {:else if param.kind === "dateTime"}
-            {@render field("bots.builder.dateTimeFutureOnly", param.future_only.toString())}
-        {/if}
-
-        {#if (param.kind === "string" || param.kind === "integer" || param.kind === "decimal") && param.choices.length > 0}
-            {@render field("bots.builder.choices", "bots.builder.choicesInfo")}
-            <Column>
-                <Body fontWeight={"bold"}>
-                    <Translatable resourceKey={i18nKey("Possible values")} />
-                </Body>
-
-                {#each param.choices as choice}
-                    <BodySmall colour={"textSecondary"}>
-                        <Translatable resourceKey={i18nKey(choice.name)} />
-                    </BodySmall>
-                {/each}
-            </Column>
-        {/if}
-    </Column>
-</Sheet>
diff --git a/frontend/app/src/components_mobile/bots/CommandSelector.svelte b/frontend/app/src/components_mobile/bots/CommandSelector.svelte
deleted file mode 100644
index e18cfb67b3..0000000000
--- a/frontend/app/src/components_mobile/bots/CommandSelector.svelte
+++ /dev/null
@@ -1,304 +0,0 @@
-<script lang="ts">
-    import {
-        Body,
-        BodySmall,
-        ColourVars,
-        Container,
-        IconButton,
-        Subtitle,
-        Tooltip,
-    } from "component-lib";
-    import type {
-        ChatPermissions,
-        ChatSummary,
-        GrantedBotPermissions,
-        MessageContext,
-        OpenChat,
-        PermissionRole,
-        ReadonlyMap,
-    } from "@client";
-    import {
-        botState,
-        directChatBotsStore,
-        isPermitted,
-        messagePermissionsForSelectedChatStore,
-        selectedChatBotsStore,
-        selectedChatSummaryStore,
-        selectedCommunityBotsStore,
-        threadPermissionsForSelectedChatStore,
-    } from "@client";
-    import { hasEveryRequiredPermission, random64, type FlattenedCommand } from "@shared";
-    import { getContext, onMount } from "svelte";
-    import Close from "svelte-material-icons/Close.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { toastStore } from "../../stores/toast";
-    import ErrorMessage from "../ErrorMessage.svelte";
-    import Logo from "@shared_components/Logo.svelte";
-    import Translatable from "../Translatable.svelte";
-    import BotAvatar from "./BotAvatar.svelte";
-
-    interface Props {
-        selectedBotId?: string; // this will be the botId if we are in a direct chat with a bot
-        onCancel: () => void;
-        onNoMatches: () => void;
-        onCommandSent: () => void;
-        mode: "thread" | "message";
-        messageContext: MessageContext;
-    }
-
-    const client = getContext<OpenChat>("client");
-
-    let { onCancel, onNoMatches, onCommandSent, mode, messageContext, selectedBotId }: Props =
-        $props();
-
-    let installedBots = $derived.by(() => {
-        switch (messageContext.chatId.kind) {
-            case "channel":
-                return $selectedCommunityBotsStore;
-            case "direct_chat":
-                return $directChatBotsStore;
-            default:
-                return $selectedChatBotsStore;
-        }
-    });
-
-    let commands = $derived.by(() => {
-        return botState.commands.filter((c) => {
-            return (
-                restrictByBotIfNecessary(c) &&
-                restrictByChatIfNecessary(c) &&
-                hasPermissionForCommand(c, installedBots, $selectedChatSummaryStore)
-            );
-        });
-    });
-
-    function restrictByBotIfNecessary(command: FlattenedCommand): boolean {
-        return (
-            selectedBotId === undefined ||
-            (command.kind === "external_bot" && command.botId === selectedBotId) ||
-            (command.kind === "internal_bot" && command.directBotDisabled === false)
-        );
-    }
-
-    function restrictByChatIfNecessary(command: FlattenedCommand): boolean {
-        return !(
-            messageContext.chatId.kind === "direct_chat" && command.directChatsDisabled === true
-        );
-    }
-
-    function userHasPermissionForCommand(
-        command: FlattenedCommand,
-        chat: ChatSummary | undefined,
-    ): boolean {
-        const chatRolePermitted =
-            chat !== undefined && chat.kind !== "direct_chat"
-                ? isPermitted(chat.membership.role, command.defaultRole)
-                : true;
-
-        const chatPermitted =
-            chat !== undefined && chat.kind !== "direct_chat"
-                ? [...command.permissions.chatPermissions].every(
-                      (p) =>
-                          ["readMessages", "readMembership", "readChatSummary"].includes(p) ||
-                          isPermitted(
-                              chat.membership.role,
-                              chat.permissions[p as keyof ChatPermissions] as PermissionRole,
-                          ),
-                  )
-                : true;
-
-        switch (mode) {
-            case "message":
-                return (
-                    chatRolePermitted &&
-                    chatPermitted &&
-                    [...command.permissions.messagePermissions].every((p) =>
-                        $messagePermissionsForSelectedChatStore.has(p),
-                    )
-                );
-            case "thread":
-                return (
-                    chatRolePermitted &&
-                    chatPermitted &&
-                    [...command.permissions.messagePermissions].every((p) =>
-                        $threadPermissionsForSelectedChatStore.has(p),
-                    )
-                );
-        }
-    }
-
-    function hasPermissionForCommand(
-        command: FlattenedCommand,
-        installedBots: ReadonlyMap<string, GrantedBotPermissions>,
-        chat: ChatSummary | undefined,
-    ): boolean {
-        const userPermission = userHasPermissionForCommand(command, chat);
-        if (command.kind === "external_bot") {
-            // for an external bot we also need to know that the bot has been granted all the permissions it requires
-            const granted = installedBots.get(command.botId);
-            const required = command.permissions;
-            return (
-                userPermission &&
-                granted !== undefined &&
-                hasEveryRequiredPermission(required, granted.command)
-            );
-        } else {
-            return userPermission;
-        }
-    }
-
-    function selectCommand(command: FlattenedCommand) {
-        botState.setSelectedCommand(messageContext, commands, command);
-        sendCommandIfValid();
-    }
-
-    function sendCommandIfValid() {
-        if (botState.selectedCommand && botState.instanceValid && $selectedChatSummaryStore) {
-            client
-                .executeBotCommand(
-                    {
-                        kind: "chat_scope",
-                        chatId: messageContext.chatId,
-                        threadRootMessageIndex: messageContext.threadRootMessageIndex,
-                        messageId: random64(),
-                    },
-                    botState.createBotInstance(botState.selectedCommand),
-                )
-                .then((result) => {
-                    if (result === "failure") {
-                        toastStore.showFailureToast(i18nKey("bots.failed"));
-                    } else if (result === "too_many_requests") {
-                        toastStore.showFailureToast(i18nKey("bots.tooManyRequests"));
-                    }
-                });
-            onCommandSent();
-        }
-    }
-
-    onMount(() => {
-        botState.error = undefined;
-        document.addEventListener("keydown", onkeydown);
-        return () => {
-            document.removeEventListener("keydown", onkeydown);
-        };
-    });
-
-    $effect(() => {
-        if (commands.length === 0) {
-            onNoMatches();
-        }
-    });
-
-    function onkeydown(ev: KeyboardEvent): void {
-        switch (ev.key) {
-            case "ArrowDown":
-                botState.focusPreviousCommand();
-                break;
-            case "ArrowUp":
-                botState.focusNextCommand();
-                break;
-            case "Enter":
-                if (!botState.showingBuilder) {
-                    botState.setSelectedCommand(messageContext, commands);
-                    sendCommandIfValid();
-                    ev.preventDefault();
-                }
-                break;
-            case "Escape":
-                onCancel();
-                break;
-        }
-    }
-</script>
-
-<Container
-    background={ColourVars.background1}
-    padding={["sm", "lg"]}
-    mainAxisAlignment={"spaceBetween"}
-    crossAxisAlignment={"center"}>
-    <Subtitle>
-        <Translatable resourceKey={i18nKey("bots.matchingCommands")} />
-    </Subtitle>
-    <IconButton onclick={onCancel} size={"sm"}>
-        {#snippet icon(color)}
-            <Close {color} />
-        {/snippet}
-    </IconButton>
-</Container>
-<Container maxHeight={"calc(var(--vh, 1vh) * 50)"} direction={"vertical"}>
-    {#each commands as command}
-        <Container
-            padding={"sm"}
-            crossAxisAlignment={"center"}
-            mainAxisAlignment={"spaceBetween"}
-            gap={"sm"}
-            onClick={() => selectCommand(command)}>
-            <Container maxWidth={"3rem"} maxHeight={"3rem"} width={"hug"}>
-                {#if command.kind === "external_bot"}
-                    <BotAvatar bot={command} />
-                {:else}
-                    <Logo />
-                {/if}
-            </Container>
-            <Container direction={"vertical"}>
-                <Container crossAxisAlignment={"center"} gap={"sm"}>
-                    <Body fontWeight={"bold"} width={"hug"}>
-                        /{command.name}
-                    </Body>
-                    {#each command?.params ?? [] as param}
-                        <Tooltip position={"top"} align={"middle"}>
-                            <div class="param" class:required={param.required}>
-                                <BodySmall>
-                                    <Translatable resourceKey={i18nKey(param.name)} />
-                                </BodySmall>
-                            </div>
-                            {#snippet popup()}
-                                <Translatable resourceKey={i18nKey(param.description ?? "")} />
-                            {/snippet}
-                        </Tooltip>
-                    {/each}
-                </Container>
-                <Container>
-                    <div class="interface"></div>
-                    {#if command.description}
-                        <Body ellipsisTruncate width={"hug"} colour={"textSecondary"}>
-                            <Translatable resourceKey={i18nKey(command.description)} />
-                        </Body>
-                    {/if}
-                </Container>
-            </Container>
-            <BodySmall width={"hug"} colour={"textSecondary"}>
-                <Translatable resourceKey={i18nKey(command.botName)} />
-            </BodySmall>
-        </Container>
-    {/each}
-</Container>
-
-{#if botState.error !== undefined}
-    <div class="command-error">
-        <ErrorMessage>
-            {botState.error}
-        </ErrorMessage>
-    </div>
-{/if}
-
-<style lang="scss">
-    .command-error {
-        :global(h4) {
-            margin-bottom: 0;
-        }
-    }
-
-    .param {
-        border: 1px solid var(--primary);
-        padding: var(--sp-xxs) var(--sp-sm);
-        border-radius: var(--rad-sm);
-        line-height: 18px;
-
-        &.required {
-            background: var(--gradient-inverted);
-            color: var(--text-on-primary);
-            border: none;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/bots/CommandViewer.svelte b/frontend/app/src/components_mobile/bots/CommandViewer.svelte
deleted file mode 100644
index 77785e7a52..0000000000
--- a/frontend/app/src/components_mobile/bots/CommandViewer.svelte
+++ /dev/null
@@ -1,75 +0,0 @@
-<script lang="ts">
-    import { Body, BodySmall, Chip, Column, Row } from "component-lib";
-    import { type CommandDefinition, type CommandParam } from "@client";
-    import { i18nKey } from "../../i18n/i18n";
-    import SlidingPageContent from "../home/SlidingPageContent.svelte";
-    import Translatable from "../Translatable.svelte";
-    import BotPermissionViewer from "./BotPermissionViewer.svelte";
-    import CommandParameterViewer from "./CommandParameterViewer.svelte";
-
-    interface Props {
-        command: CommandDefinition;
-        onClose: () => void;
-    }
-
-    let { command, onClose }: Props = $props();
-
-    let selectedParam = $state<CommandParam | undefined>(undefined);
-
-    function onSelectParam(param: CommandParam) {
-        selectedParam = param;
-    }
-</script>
-
-{#if selectedParam !== undefined}
-    <CommandParameterViewer onClose={() => (selectedParam = undefined)} param={selectedParam}
-    ></CommandParameterViewer>
-{/if}
-
-{#snippet field(title: string, value: string)}
-    <Column>
-        <Body fontWeight={"bold"}>
-            <Translatable resourceKey={i18nKey(title)} />
-        </Body>
-
-        <BodySmall colour={"textSecondary"}>
-            {value}
-        </BodySmall>
-    </Column>
-{/snippet}
-
-<SlidingPageContent
-    title={i18nKey("Command details")}
-    subtitle={i18nKey(`/${command.name}`)}
-    onBack={onClose}>
-    <Column gap={"xl"} padding={"xl"}>
-        {#if command.description}
-            {@render field("bots.builder.commandDescLabel", command.description ?? "")}
-        {/if}
-
-        {#if command.placeholder}
-            {@render field("bots.builder.commandPlaceholderLabel", command.placeholder ?? "")}
-        {/if}
-
-        <Column gap={"sm"}>
-            <BotPermissionViewer
-                title={i18nKey("bots.builder.commandPermissionsLabel")}
-                permissions={command.permissions} />
-        </Column>
-
-        {#if command.params.length > 0}
-            <Column gap={"sm"}>
-                <Body fontWeight={"bold"}>
-                    <Translatable resourceKey={i18nKey("bots.builder.paramsLabel")} />
-                </Body>
-                <Row crossAxisAlignment={"center"} wrap gap={"sm"}>
-                    {#each command.params as param}
-                        <Chip mode={"filter"} onClick={() => onSelectParam(param)}>
-                            <Translatable resourceKey={i18nKey(param.name)}></Translatable>
-                        </Chip>
-                    {/each}
-                </Row>
-            </Column>
-        {/if}
-    </Column>
-</SlidingPageContent>
diff --git a/frontend/app/src/components_mobile/bots/DirectChatHeader.svelte b/frontend/app/src/components_mobile/bots/DirectChatHeader.svelte
deleted file mode 100644
index 76ee637010..0000000000
--- a/frontend/app/src/components_mobile/bots/DirectChatHeader.svelte
+++ /dev/null
@@ -1,120 +0,0 @@
-<script lang="ts">
-    import { toastStore } from "@src/stores/toast";
-    import { Avatar, MenuItem, SectionHeader } from "component-lib";
-    import type { DirectChatSummary, ExternalBot, OpenChat } from "@client";
-    import {
-        allUsersStore,
-        chatListScopeStore,
-        currentUserIdStore,
-        definitionToPermissions,
-        directChatBotsStore,
-        favouritesStore,
-        publish,
-        routeForScope,
-    } from "@client";
-    import { navigate } from "@utils/navigation";
-    import { getContext } from "svelte";
-    import DeleteOutline from "svelte-material-icons/DeleteOutline.svelte";
-    import HeartMinus from "svelte-material-icons/HeartMinus.svelte";
-    import HeartPlus from "svelte-material-icons/HeartPlus.svelte";
-    import Magnify from "svelte-material-icons/Magnify.svelte";
-    import TextBoxOutline from "svelte-material-icons/TextBoxOutline.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import Translatable from "../Translatable.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        chat: DirectChatSummary;
-        bot: ExternalBot;
-        onSearchChat: (term: string) => void;
-    }
-
-    let { chat, bot, onSearchChat }: Props = $props();
-    let botUser = $derived($allUsersStore.get(chat.them.userId));
-    let grantedPermissions = $derived(
-        $directChatBotsStore.get(bot.id) ?? definitionToPermissions(bot.definition),
-    );
-
-    function addToFavourites() {
-        client.addToFavourites(chat.id);
-    }
-
-    function removeFromFavourites() {
-        client.removeFromFavourites(chat.id);
-    }
-
-    function searchChat() {
-        onSearchChat("");
-    }
-
-    function removeBot() {
-        navigate(routeForScope($chatListScopeStore));
-        client
-            .uninstallBot({ kind: "direct_chat", userId: $currentUserIdStore }, bot.id)
-            .then((success) => {
-                if (!success) {
-                    toastStore.showFailureToast(i18nKey("bots.manage.removeFailed"));
-                }
-            });
-    }
-
-    function viewBotDetails() {
-        publish("showBot", { bot, collection: chat, grantedPermissions });
-    }
-</script>
-
-<SectionHeader onBack={() => publish("clearSelection")}>
-    {#snippet avatar()}
-        <Avatar
-            url={client.userAvatarUrl(botUser)}
-            size={"lg"}
-            name={client.displayName(botUser)} />
-    {/snippet}
-
-    {#snippet title()}
-        {client.displayName(botUser)}
-    {/snippet}
-
-    {#snippet subtitle()}
-        <Translatable resourceKey={i18nKey("Use bot commands below")} />
-    {/snippet}
-
-    {#snippet menu()}
-        {#if !$favouritesStore.has(chat.id)}
-            <MenuItem danger onclick={addToFavourites}>
-                {#snippet icon(color, size)}
-                    <HeartPlus {size} {color} />
-                {/snippet}
-                <Translatable resourceKey={i18nKey("communities.addToFavourites")} />
-            </MenuItem>
-        {:else}
-            <MenuItem danger onclick={removeFromFavourites}>
-                {#snippet icon(color, size)}
-                    <HeartMinus {color} {size} />
-                {/snippet}
-                <Translatable resourceKey={i18nKey("communities.removeFromFavourites")} />
-            </MenuItem>
-        {/if}
-        <MenuItem onclick={searchChat}>
-            {#snippet icon(color, size)}
-                <Magnify {color} {size} />
-            {/snippet}
-            <Translatable resourceKey={i18nKey("searchChat")} />
-        </MenuItem>
-
-        <MenuItem onclick={() => removeBot()}>
-            {#snippet icon(color, size)}
-                <DeleteOutline {color} {size} />
-            {/snippet}
-            <Translatable resourceKey={i18nKey("bots.manage.remove")} />
-        </MenuItem>
-
-        <MenuItem onclick={() => viewBotDetails()}>
-            {#snippet icon(color, size)}
-                <TextBoxOutline {color} {size} />
-            {/snippet}
-            <Translatable resourceKey={i18nKey("bots.manage.view")} />
-        </MenuItem>
-    {/snippet}
-</SectionHeader>
diff --git a/frontend/app/src/components_mobile/bots/EphemeralMessage.svelte b/frontend/app/src/components_mobile/bots/EphemeralMessage.svelte
deleted file mode 100644
index e4e1c079ad..0000000000
--- a/frontend/app/src/components_mobile/bots/EphemeralMessage.svelte
+++ /dev/null
@@ -1,96 +0,0 @@
-<script lang="ts">
-    import { i18nKey } from "@src/i18n/i18n";
-    import { Column, IconButton, Row, Subtitle } from "component-lib";
-    import { botState, type EphemeralMessageEvent } from "@client";
-    import { onMount } from "svelte";
-    import Close from "svelte-material-icons/Close.svelte";
-    import { Tween } from "svelte/motion";
-    import Translatable from "../Translatable.svelte";
-    import ChatMessageContent from "../home/ChatMessageContent.svelte";
-    import BotAvatar from "./BotAvatar.svelte";
-
-    const duration = 10_000;
-
-    interface Props {
-        event: EphemeralMessageEvent;
-        onClose: () => void;
-    }
-
-    let perc = new Tween(100, { duration });
-    let { event, onClose }: Props = $props();
-    let bot = $derived(botState.externalBots.get(event.botId));
-    let timer = $state<number>();
-
-    onMount(() => {
-        perc.target = 0;
-        timer = window.setTimeout(onClose, duration);
-        return clearTimer;
-    });
-
-    function clearTimer() {
-        window.clearTimeout(timer);
-        timer = undefined;
-    }
-
-    function pause() {
-        perc.target = perc.current;
-        clearTimer();
-    }
-
-    function resume() {
-        const remainingTime = (perc.current / 100) * duration;
-        perc.set(0, { duration: remainingTime });
-        timer = window.setTimeout(onClose, remainingTime);
-    }
-
-    function closeClicked() {
-        clearTimer();
-        onClose();
-    }
-</script>
-
-{#if bot}
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <Column>
-        <div onmousedown={pause} onmouseup={resume} class="content">
-            <Row padding={["md", "zero"]} gap={"sm"} crossAxisAlignment={"center"}>
-                <BotAvatar size={"xs"} {bot} />
-                <Subtitle fontWeight={"bold"}>
-                    <Translatable resourceKey={i18nKey(`${bot.name} /${event.commandName}`)} />
-                </Subtitle>
-                <IconButton size={"sm"} onclick={closeClicked}>
-                    {#snippet icon(color)}
-                        <Close size={"1em"} {color} />
-                    {/snippet}
-                </IconButton>
-            </Row>
-            <ChatMessageContent
-                failed={false}
-                messageId={event.message.messageId}
-                messageIndex={0}
-                messageContext={{ chatId: { kind: "direct_chat", userId: "" } }}
-                intersecting={false}
-                blockLevelMarkdown={event.message.blockLevelMarkdown}
-                edited={false}
-                senderId={bot.id}
-                fill={false}
-                readonly={true}
-                ogPreviews={[]}
-                content={event.message.messageContent} />
-        </div>
-        <Row height={{ size: "0.75rem" }}>
-            <div style={`width: ${perc.current}%`} class="bar"></div>
-        </Row>
-    </Column>
-{/if}
-
-<style lang="scss">
-    .content {
-        padding: $sp4;
-    }
-
-    .bar {
-        height: toRem(10);
-        background-color: var(--warn);
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/bots/InstallationLocationSelector.svelte b/frontend/app/src/components_mobile/bots/InstallationLocationSelector.svelte
deleted file mode 100644
index f73e65d162..0000000000
--- a/frontend/app/src/components_mobile/bots/InstallationLocationSelector.svelte
+++ /dev/null
@@ -1,142 +0,0 @@
-<script lang="ts">
-    import { interpolate } from "@src/i18n/i18n";
-    import { Avatar, Body, BodySmall, Column, Option, Row, Search, Select } from "component-lib";
-    import {
-        communitiesStore,
-        i18nKey,
-        OpenChat,
-        serverGroupChatsStore,
-        type BotInstallationLocation,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import NothingToSee from "../home/NothingToSee.svelte";
-    import Translatable from "../Translatable.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    type Match = {
-        avatarUrl: string;
-        name: string;
-        id: string;
-        isCommunity: boolean;
-    };
-
-    interface Props {
-        location?: BotInstallationLocation;
-    }
-
-    let { location = $bindable() }: Props = $props();
-    let searchTerm: string = $state("");
-    let placeholder = i18nKey("Search for a community or group");
-    let selected = $state<Match>();
-    let searchTermLower = $derived(searchTerm.toLocaleLowerCase());
-    location; // usual hack
-
-    let options = $derived.by(() => {
-        const communities: Match[] = [...$communitiesStore.values()].map((c) => ({
-            avatarUrl: client.communityAvatarUrl(c.id.communityId, c.avatar),
-            name: c.name,
-            id: c.id.communityId,
-            isCommunity: true,
-        }));
-
-        const groups: Match[] = [...$serverGroupChatsStore.values()].map((g) => ({
-            avatarUrl: client.groupAvatarUrl(g),
-            name: g.name,
-            id: g.id.groupId,
-            isCommunity: false,
-        }));
-
-        communities.sort((a: Match, b: Match) => a.name.localeCompare(b.name));
-        groups.sort((a: Match, b: Match) => a.name.localeCompare(b.name));
-        return [...communities, ...groups];
-    });
-
-    let matches = $derived(
-        options.filter(
-            (o) => searchTermLower === "" || o.name.toLocaleLowerCase().includes(searchTermLower),
-        ),
-    );
-
-    function reset() {
-        selected = undefined;
-        searchTerm = "";
-    }
-
-    function select(match: Match | undefined) {
-        selected = match;
-        if (match !== undefined) {
-            if (match.isCommunity) {
-                location = { kind: "community", communityId: match.id };
-            } else {
-                location = { kind: "group_chat", groupId: match.id };
-            }
-        }
-    }
-</script>
-
-<Select
-    placeholder={interpolate($_, i18nKey("bots.builder.testContext"))}
-    onSelect={select}
-    value={selected}>
-    {#snippet selectedValue(match)}
-        {match.name}
-    {/snippet}
-    {#snippet selectOptions(onSelect)}
-        <Column gap={"xl"} padding={"xl"}>
-            <Column padding={["zero", "sm"]} gap={"md"} crossAxisAlignment={"center"}>
-                <Body fontWeight={"bold"}>
-                    <Translatable resourceKey={i18nKey("bots.builder.testContext")}></Translatable>
-                </Body>
-                <BodySmall colour={"textSecondary"}>
-                    <Translatable resourceKey={i18nKey("bots.builder.testContextExplanation")}
-                    ></Translatable>
-                </BodySmall>
-            </Column>
-
-            <Search
-                placeholder={interpolate($_, placeholder)}
-                searching={false}
-                bind:value={searchTerm}
-                onClear={reset} />
-
-            <Column padding={["zero", "md"]} gap={"lg"}>
-                {#if matches.length === 0}
-                    <NothingToSee
-                        height={{ size: "6" }}
-                        padding={"zero"}
-                        title={"No matching locations"}
-                        subtitle={searchTerm !== ""
-                            ? "Try relaxing your search criteria"
-                            : "You may not be a member of any groups or communities"} />
-                {:else}
-                    {#each matches as match (match.id)}
-                        <Option
-                            onClick={() => onSelect(match)}
-                            padding={["zero", "md", "zero", "zero"]}
-                            value={match}
-                            selected={false}>
-                            <Row gap={"md"}>
-                                <Avatar url={match.avatarUrl} size={"md"}></Avatar>
-                                <Column>
-                                    <Body>{match.name}</Body>
-                                    <BodySmall colour={"textSecondary"}>
-                                        {#if match.isCommunity}
-                                            Test in community
-                                        {:else}
-                                            Test in chat
-                                        {/if}
-                                    </BodySmall>
-                                </Column>
-                            </Row>
-                        </Option>
-                    {/each}
-                {/if}
-            </Column>
-        </Column>
-    {/snippet}
-    {#snippet subtext()}
-        <Translatable resourceKey={i18nKey("bots.builder.testContextInfo")} />
-    {/snippet}
-</Select>
diff --git a/frontend/app/src/components_mobile/bots/WebhookMember.svelte b/frontend/app/src/components_mobile/bots/WebhookMember.svelte
deleted file mode 100644
index 40a107697d..0000000000
--- a/frontend/app/src/components_mobile/bots/WebhookMember.svelte
+++ /dev/null
@@ -1,95 +0,0 @@
-<script lang="ts">
-    import { toastStore } from "@src/stores/toast";
-    import { copyToClipboard } from "@src/utils/urls";
-    import { Container, IconButton, MenuItem, MenuTrigger } from "component-lib";
-    import { OpenChat, type MultiUserChat } from "@client";
-    import { publish, type FullWebhookDetails, type WebhookDetails } from "@shared";
-    import { getContext } from "svelte";
-    import DotsVertical from "svelte-material-icons/DotsVertical.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import FilteredUsername from "@shared_components/FilteredUsername.svelte";
-    import BotBadge from "../home/profile/BotBadge.svelte";
-    import Translatable from "../Translatable.svelte";
-    import BotAvatar from "./BotAvatar.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        chat: MultiUserChat;
-        webhook: WebhookDetails;
-        searchTerm?: string;
-        canManage?: boolean;
-        showMenu?: boolean;
-    }
-
-    let { chat, webhook, searchTerm = "", canManage = false, showMenu = true }: Props = $props();
-
-    function deleteWebhook() {
-        client.deleteWebhook(chat.id, webhook.id).then((success) => {
-            if (!success) {
-                toastStore.showFailureToast(i18nKey("webhook.removeFailed"));
-            }
-        });
-    }
-
-    function getWebhookAndThen(fn: (hook: FullWebhookDetails) => void) {
-        client.getWebhook(chat.id, webhook.id).then((secret) => {
-            if (secret !== undefined) {
-                fn({
-                    ...webhook,
-                    secret,
-                });
-            }
-        });
-    }
-
-    function copy() {
-        getWebhookAndThen((hook) => {
-            const url = client.webhookUrl(hook, chat.id);
-            if (url) {
-                copyToClipboard(url);
-            }
-        });
-    }
-
-    function regenerate() {
-        getWebhookAndThen((hook) => publish("regenerateWebhook", { chat, hook }));
-    }
-
-    function edit() {
-        getWebhookAndThen((hook) => publish("updateWebhook", { chat, hook }));
-    }
-</script>
-
-<Container onClick={edit} crossAxisAlignment={"center"} gap={"md"}>
-    <BotAvatar size={"md"} bot={webhook} />
-    <Container crossAxisAlignment={"center"} gap={"sm"}>
-        <BotBadge webhook />
-        <FilteredUsername {searchTerm} username={webhook.name} />
-    </Container>
-    {#if showMenu}
-        <MenuTrigger position={"bottom"} align={"end"}>
-            <IconButton padding={["sm", "xs", "sm", "zero"]} size={"md"}>
-                {#snippet icon(color)}
-                    <DotsVertical {color} />
-                {/snippet}
-            </IconButton>
-            {#snippet menuItems()}
-                <MenuItem onclick={() => copy()}>
-                    <Translatable resourceKey={i18nKey("Copy URL")} />
-                </MenuItem>
-                {#if canManage}
-                    <MenuItem onclick={() => edit()}>
-                        <Translatable resourceKey={i18nKey("Edit")} />
-                    </MenuItem>
-                    <MenuItem onclick={() => regenerate()}>
-                        <Translatable resourceKey={i18nKey("Regenerate")} />
-                    </MenuItem>
-                    <MenuItem danger onclick={() => deleteWebhook()}>
-                        <Translatable resourceKey={i18nKey("Remove")} />
-                    </MenuItem>
-                {/if}
-            {/snippet}
-        </MenuTrigger>
-    {/if}
-</Container>
diff --git a/frontend/app/src/components_mobile/bots/WebhookModal.svelte b/frontend/app/src/components_mobile/bots/WebhookModal.svelte
deleted file mode 100644
index 5d3aabff7d..0000000000
--- a/frontend/app/src/components_mobile/bots/WebhookModal.svelte
+++ /dev/null
@@ -1,250 +0,0 @@
-<script lang="ts">
-    import { toastStore } from "@src/stores/toast";
-    import {
-        BodySmall,
-        Button,
-        ColourVars,
-        Container,
-        CopyCard,
-        Form,
-        Input,
-        Subtitle,
-    } from "component-lib";
-    import {
-        emptyWebhookInstance,
-        OpenChat,
-        publish,
-        validBotComponentName,
-        type FullWebhookDetails,
-        type MultiUserChat,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import Close from "svelte-material-icons/Close.svelte";
-    import Webhook from "svelte-material-icons/Webhook.svelte";
-    import { i18nKey, interpolate } from "../../i18n/i18n";
-    import EditableAvatar from "../EditableAvatar.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import SlidingPageContent from "../home/SlidingPageContent.svelte";
-    import Translatable from "../Translatable.svelte";
-    import WebhookMember from "./WebhookMember.svelte";
-
-    type Mode = "register" | "update" | "regenerate";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        chat: MultiUserChat;
-        webhook?: FullWebhookDetails;
-        mode?: Mode;
-    }
-
-    let { mode = "register", chat, webhook = $bindable(emptyWebhookInstance()) }: Props = $props();
-
-    let busy = $state(false);
-    let original = { ...webhook };
-    let nameDirty = $derived(original.name !== webhook.name);
-    let avatarDirty = $derived(original.avatarUrl !== webhook.avatarUrl);
-    let dirty = $derived(nameDirty || avatarDirty);
-    let name_errors = $derived(validBotComponentName(webhook.name, 3));
-    let valid = $derived(name_errors.length === 0);
-    let url = $derived(client.webhookUrl(webhook, chat.id));
-    let ctaText = $derived.by(() => {
-        switch (mode) {
-            case "update":
-                return i18nKey("Update webhook");
-            case "regenerate":
-                return i18nKey("Regenerate webhook");
-            case "register":
-                return i18nKey("Register webhook");
-        }
-    });
-
-    let titleKey = $derived.by(() => {
-        switch (mode) {
-            case "update":
-                return i18nKey("webhook.updateTitle", { name: webhook.name });
-            case "regenerate":
-                return i18nKey("Regenerate webhook");
-            case "register":
-                return i18nKey("webhook.registerTitle");
-        }
-    });
-
-    function register() {
-        if (valid && dirty) {
-            busy = true;
-            client
-                .registerWebhook(chat.id, webhook.name, webhook.avatarUrl)
-                .then((success) => {
-                    if (success === undefined) {
-                        toastStore.showFailureToast(i18nKey("Unable to register webhook"));
-                    } else {
-                        publish("closeModalPage");
-                    }
-                })
-                .finally(() => (busy = false));
-        }
-    }
-
-    function update() {
-        busy = true;
-        if (valid && dirty) {
-            client
-                .updateWebhook(
-                    chat.id,
-                    webhook,
-                    nameDirty ? webhook.name : undefined,
-                    avatarDirty
-                        ? webhook.avatarUrl !== undefined
-                            ? { value: webhook.avatarUrl }
-                            : "set_to_none"
-                        : undefined,
-                )
-                .then((success) => {
-                    if (!success) {
-                        toastStore.showFailureToast(i18nKey("Unable to update webhook details"));
-                    } else {
-                        publish("closeModalPage");
-                    }
-                })
-                .finally(() => (busy = false));
-        }
-    }
-
-    function regenerate() {
-        busy = true;
-        client
-            .regenerateWebhook(chat.id, original.id)
-            .then((success) => {
-                if (success === undefined) {
-                    toastStore.showFailureToast(i18nKey("Unable to regenerate webhook"));
-                } else {
-                    webhook.secret = success;
-                    original.secret = success;
-                }
-            })
-            .finally(() => (busy = false));
-    }
-
-    function onSubmit(e: Event) {
-        e.preventDefault();
-    }
-
-    function mainAction() {
-        switch (mode) {
-            case "regenerate":
-                return regenerate();
-            case "register":
-                return register();
-            case "update":
-                return update();
-        }
-    }
-
-    function avatarSelected(detail: { url: string; data: Uint8Array }) {
-        webhook.avatarUrl = detail.url;
-    }
-</script>
-
-<SlidingPageContent title={titleKey} subtitle={i18nKey(chat.name)}>
-    <Container gap={"xxxl"} direction={"vertical"} padding={["xxl", "lg"]}>
-        {#if mode === "register"}
-            <Container
-                crossAxisAlignment={"center"}
-                borderRadius={"lg"}
-                padding={"lg"}
-                background={ColourVars.background1}
-                gap={"lg"}>
-                <Webhook color={ColourVars.textSecondary} size={"4rem"} />
-                <Container direction={"vertical"}>
-                    <Subtitle fontWeight={"bold"}>
-                        <Translatable resourceKey={i18nKey("Webhooks")} />
-                    </Subtitle>
-                    <BodySmall colour={"textSecondary"}>
-                        <Markdown
-                            text={interpolate(
-                                $_,
-                                i18nKey(
-                                    "Webhooks let you send external events to this group programmatically. Once registered, your group gets a URL you can use to forward events. Learn more in the [bots developer guide](https://github.com/open-chat-labs/open-chat-bots).",
-                                ),
-                            )}></Markdown>
-                    </BodySmall>
-                </Container>
-            </Container>
-        {:else if mode === "regenerate" && url !== undefined}
-            <Container gap={"lg"} direction={"vertical"}>
-                <Container
-                    padding={["md", "lg"]}
-                    borderRadius={"lg"}
-                    background={ColourVars.background1}>
-                    <WebhookMember showMenu={false} {chat} {webhook} />
-                </Container>
-                <Container
-                    padding={["md", "lg"]}
-                    borderRadius={"lg"}
-                    background={ColourVars.background1}>
-                    <BodySmall>
-                        <Translatable
-                            resourceKey={i18nKey(
-                                "If for any reason you may need to update your webhook URL, regenerating the webhook will update the “secret” part of the URL  and therefore effectively change it.",
-                            )} />
-                    </BodySmall>
-                </Container>
-                <CopyCard title={"Webhook URL"} body={url}></CopyCard>
-            </Container>
-        {:else if mode === "update" && url !== undefined}
-            <CopyCard title={"Webhook URL"} body={url}></CopyCard>
-        {/if}
-        <Form {onSubmit}>
-            <Container crossAxisAlignment={"center"} direction={"vertical"} gap={"xl"}>
-                {#if mode !== "regenerate"}
-                    <EditableAvatar
-                        highlightBorder
-                        size={"headline"}
-                        image={webhook.avatarUrl}
-                        onImageSelected={avatarSelected} />
-
-                    <Input
-                        minlength={3}
-                        maxlength={15}
-                        disabled={busy}
-                        error={name_errors.length > 0}
-                        bind:value={webhook.name}
-                        autofocus
-                        placeholder={interpolate($_, i18nKey("Webhook name"))}>
-                        {#snippet subtext()}
-                            <Translatable
-                                resourceKey={i18nKey(
-                                    "Must be unique in this chat and contain alphanumeric characters and underscores only (required)",
-                                )} />
-                        {/snippet}
-                    </Input>
-                {/if}
-
-                {#if mode === "register" || mode === "update"}
-                    <Button loading={busy} disabled={busy || !valid || !dirty} onClick={mainAction}>
-                        {#snippet icon(color)}
-                            <Webhook {color} />
-                        {/snippet}
-                        <Translatable resourceKey={ctaText} />
-                    </Button>
-
-                    <Button onClick={() => publish("closeModalPage")} secondary>
-                        {#snippet icon(color)}
-                            <Close {color} />
-                        {/snippet}
-                        <Translatable resourceKey={i18nKey("cancel")} />
-                    </Button>
-                {:else if mode === "regenerate"}
-                    <Button loading={busy} disabled={busy} onClick={mainAction}>
-                        {#snippet icon(color)}
-                            <Webhook {color} />
-                        {/snippet}
-                        <Translatable resourceKey={ctaText} />
-                    </Button>
-                {/if}
-            </Container>
-        </Form>
-    </Container>
-</SlidingPageContent>
diff --git a/frontend/app/src/components_mobile/bots/install/BotInstaller.svelte b/frontend/app/src/components_mobile/bots/install/BotInstaller.svelte
deleted file mode 100644
index 5ef754ebf4..0000000000
--- a/frontend/app/src/components_mobile/bots/install/BotInstaller.svelte
+++ /dev/null
@@ -1,306 +0,0 @@
-<script lang="ts">
-    import {
-        Avatar,
-        Body,
-        BodySmall,
-        Button,
-        ColourVars,
-        Container,
-        defaultBackgroundGradient,
-        FloatingButton,
-        ReadMore,
-        StatusCard,
-        Subtitle,
-    } from "component-lib";
-    import {
-        allUsersStore,
-        botContainerFrom,
-        type ChatSummary,
-        type CommunitySummary,
-        definitionToPermissions,
-        type ExternalBotLike,
-        type GrantedBotPermissions,
-        installationLocationFrom,
-        OpenChat,
-        publish,
-    } from "@client";
-    import { getContext, tick } from "svelte";
-    import ArrowDown from "svelte-material-icons/ArrowDown.svelte";
-    import Cloud from "svelte-material-icons/CloudDownloadOutline.svelte";
-    import Save from "svelte-material-icons/ContentSaveOutline.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { toastStore } from "../../../stores/toast";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import SlidingPageContent from "../../home/SlidingPageContent.svelte";
-    import MulticolourText from "../../MulticolourText.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import BotAvatar from "../BotAvatar.svelte";
-    import BotCommands from "../BotCommands.svelte";
-    import BotsPermissionInfo from "../BotsPermissionInfo.svelte";
-    import ChoosePermissions from "./ChoosePermissions.svelte";
-
-    /**
-     * This component is used for both installing a new bot and reviewing the permissions of a bot that is already installed
-     */
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        collection: CommunitySummary | ChatSummary;
-        bot: ExternalBotLike;
-        installedWithPermissions?: GrantedBotPermissions;
-    }
-
-    let { bot, collection, installedWithPermissions }: Props = $props();
-    let requestedPermissions = $derived(definitionToPermissions(bot.definition));
-    let grantedPermissions = $state(
-        installedWithPermissions ?? filterByLocation(definitionToPermissions(bot.definition)),
-    );
-    let installing = $state(installedWithPermissions === undefined);
-    let location = $derived(installationLocationFrom(collection));
-    let level = $derived(collection.kind === "direct_chat" ? "group" : collection.level); // TODO suspect
-    let container = $derived(botContainerFrom(collection));
-    let containerAvatarUrl = $derived.by(() => {
-        if (container === undefined) return undefined;
-        switch (container.kind) {
-            case "community":
-                return client.communityAvatarUrl(container.id.communityId, container.avatar);
-            case "group_chat":
-                return client.groupAvatarUrl(container);
-            case "direct_chat":
-                return client.userAvatarUrl($allUsersStore.get(container.id.userId));
-        }
-    });
-    let containerName = $derived.by(() => {
-        if (container === undefined) return undefined;
-        switch (container.kind) {
-            case "direct_chat":
-                return $allUsersStore.get(container.id.userId)?.username ?? "Unknown user";
-            default:
-                return container.name;
-        }
-    });
-
-    let busy = $state(false);
-
-    function filterByLocation(perm: GrantedBotPermissions): GrantedBotPermissions {
-        if (collection.kind === "group_chat") {
-            perm.command.communityPermissions = [];
-            if (perm.autonomous !== undefined) {
-                perm.autonomous.communityPermissions = [];
-            }
-        }
-        return perm;
-    }
-
-    function update() {
-        busy = true;
-        client
-            .updateInstalledBot(location, bot.id, grantedPermissions)
-            .then((success) => {
-                if (!success) {
-                    toastStore.showFailureToast(i18nKey("bots.edit.failure"));
-                } else {
-                    publish("closeModalPage");
-                }
-            })
-            .finally(() => (busy = false));
-    }
-
-    function install() {
-        busy = true;
-        client
-            .installBot(location, bot.id, {
-                command: grantedPermissions.command,
-                autonomous: grantedPermissions.autonomous,
-            })
-            .then((success) => {
-                if (!success) {
-                    toastStore.showFailureToast(i18nKey("bots.add.failure"));
-                } else {
-                    publish("closeModalPage");
-                }
-            })
-            .finally(() => (busy = false));
-    }
-
-    function cancel() {
-        if (collection.kind === "direct_chat") {
-            client.removeChat(collection.id);
-            publish("clearSelection");
-        }
-        tick().then(() => publish("closeModalPage"));
-    }
-</script>
-
-<SlidingPageContent
-    onBack={cancel}
-    title={i18nKey(
-        installing ? "bots.add.title" : "Review bot permissions",
-        undefined,
-        level,
-        true,
-    )}>
-    <Container height={"fill"} gap={"xl"} direction={"vertical"} padding={["xl", "lg"]}>
-        <Container gap={"sm"} direction={"vertical"}>
-            <Container
-                overflow={"visible"}
-                borderRadius={"md"}
-                padding={"md"}
-                background={defaultBackgroundGradient}
-                crossAxisAlignment={"start"}
-                gap={"md"}>
-                <BotAvatar size={"xl"} {bot} />
-                <Container
-                    overflow={"hidden"}
-                    gap={"xxs"}
-                    direction={"vertical"}
-                    width={"fill"}>
-                    <Body colour={"textPrimary"} fontWeight={"bold"}>
-                        <Translatable
-                            resourceKey={i18nKey(installing ? "Installing" : "Reviewing")} />
-                    </Body>
-                    <Subtitle colour={"textOnPrimary"} fontWeight={"bold"}>
-                        {bot.name}
-                    </Subtitle>
-                </Container>
-            </Container>
-
-            <Container
-                overflow={"visible"}
-                borderRadius={"md"}
-                padding={"md"}
-                background={defaultBackgroundGradient}
-                crossAxisAlignment={"start"}
-                gap={"md"}>
-                <Avatar url={containerAvatarUrl!} size={"xl"} />
-                <Container
-                    overflow={"hidden"}
-                    gap={"xxs"}
-                    direction={"vertical"}
-                    width={"fill"}>
-                    <Body colour={"textPrimary"} fontWeight={"bold"}>
-                        {#if collection.kind === "direct_chat"}
-                            <Translatable resourceKey={i18nKey("As a direct chat with")} />
-                        {:else}
-                            <Translatable
-                                resourceKey={i18nKey(installing ? "Into" : "Installed in")} />
-                        {/if}
-                    </Body>
-                    <Subtitle colour={"textOnPrimary"} fontWeight={"bold"}>
-                        {containerName}
-                    </Subtitle>
-                </Container>
-                <Container
-                    supplementalClass={"connecting_arrow"}
-                    padding={"sm"}
-                    width={"hug"}
-                    background={ColourVars.background1}
-                    borderRadius={"circle"}>
-                    <ArrowDown size={"1.2rem"} color={ColourVars.primary} />
-                </Container>
-            </Container>
-        </Container>
-
-        <Container padding={["zero", "md"]} direction={"vertical"}>
-            <Body>
-                <Translatable resourceKey={i18nKey("About")} />
-            </Body>
-            <ReadMore>
-                <Body colour={"textSecondary"}>
-                    <Markdown inline={false} text={bot.definition.description} />
-                </Body>
-            </ReadMore>
-        </Container>
-
-        <BotsPermissionInfo />
-
-        {#if bot.definition.commands.length > 0}
-            <Container gap={"lg"} padding={["zero", "md"]} direction={"vertical"}>
-                <Body>
-                    <Translatable resourceKey={i18nKey("Command permissions")} />
-                </Body>
-                <ChoosePermissions
-                    {level}
-                    bind:granted={grantedPermissions.command}
-                    requested={requestedPermissions.command} />
-            </Container>
-        {/if}
-
-        {#if bot.definition.autonomousConfig !== undefined}
-            <Container gap={"lg"} padding={["zero", "md"]} direction={"vertical"}>
-                <Body>
-                    <Translatable resourceKey={i18nKey("Autonomous permissions")} />
-                </Body>
-                <ChoosePermissions
-                    {level}
-                    bind:granted={grantedPermissions.autonomous!}
-                    requested={requestedPermissions.autonomous!} />
-            </Container>
-        {/if}
-
-        <Container padding={["zero", "md"]} direction={"vertical"} gap={"sm"}>
-            <BodySmall fontWeight={"bold"} colour={"textSecondary"}>
-                <Translatable resourceKey={i18nKey("Commands")} />
-            </BodySmall>
-            <BotCommands {grantedPermissions} commands={bot.definition.commands} />
-        </Container>
-
-        <Container padding={["zero", "md"]} direction={"vertical"} gap={"sm"}>
-            <StatusCard
-                mode={"warning"}
-                title={"Granting limited permissions"}
-                body={"Granting limited permissions will limit bot's supported commands. Unavailable commands are greyed out."} />
-        </Container>
-
-        {#if installing}
-            <Container padding={["zero", "md"]} direction={"vertical"} gap={"lg"}>
-                <BodySmall align={"center"} colour={"textSecondary"}>
-                    <MulticolourText
-                        parts={[
-                            {
-                                text: i18nKey(
-                                    "By pressing the button below, you will install this bot int the ",
-                                ),
-                                colour: "textSecondary",
-                            },
-                            {
-                                text: i18nKey(containerName!),
-                                colour: "primary",
-                            },
-                            {
-                                text: i18nKey(" location."),
-                                colour: "textSecondary",
-                            },
-                        ]}>
-                    </MulticolourText>
-                </BodySmall>
-                <Button disabled={busy} loading={busy} onClick={install}>
-                    {#snippet icon(color)}
-                        <Cloud {color} />
-                    {/snippet}
-                    <Translatable resourceKey={i18nKey("bots.add.install")} />
-                </Button>
-                <Button secondary disabled={busy} onClick={cancel}>
-                    <Translatable resourceKey={i18nKey("cancel")} />
-                </Button>
-            </Container>
-        {/if}
-    </Container>
-    {#if !installing}
-        <FloatingButton loading={busy} pos={{ bottom: "lg", right: "lg" }} onClick={update}>
-            {#snippet icon(color)}
-                <Save {color} />
-            {/snippet}
-        </FloatingButton>
-    {/if}
-</SlidingPageContent>
-
-<style lang="scss">
-    :global(.container.connecting_arrow) {
-        position: absolute !important;
-        top: 0;
-        left: 50%;
-        transform: translateY(calc(-50% - 4px)) translateX(-50%);
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/bots/install/BotProperties.svelte b/frontend/app/src/components_mobile/bots/install/BotProperties.svelte
deleted file mode 100644
index c9efc47100..0000000000
--- a/frontend/app/src/components_mobile/bots/install/BotProperties.svelte
+++ /dev/null
@@ -1,184 +0,0 @@
-<script lang="ts">
-    import Markdown from "@shared_components/Markdown.svelte";
-    import { Avatar } from "component-lib";
-    import type { ExternalBotLike, GrantedBotPermissions, OpenChat } from "@client";
-    import { allUsersStore, currentUserIdStore } from "@client";
-    import { getContext, type Snippet } from "svelte";
-    import BotAvatar from "../BotAvatar.svelte";
-    import BotCommands from "../BotCommands.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        bot: ExternalBotLike;
-        grantedPermissions?: GrantedBotPermissions;
-        installing: boolean;
-        padded?: boolean;
-        onClick?: (match: ExternalBotLike) => void;
-        children?: Snippet;
-        showAvatar?: boolean;
-        showCommands?: boolean;
-    }
-
-    let {
-        bot,
-        grantedPermissions,
-        installing,
-        padded = false,
-        onClick,
-        children,
-        showAvatar = false,
-        showCommands = true,
-    }: Props = $props();
-    let owner = $derived($allUsersStore.get(bot.ownerId));
-    let isPublic = $derived(
-        bot.kind === "external_bot" && bot.registrationStatus.kind === "public",
-    );
-</script>
-
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-    class="props"
-    class:clickable={onClick !== undefined}
-    class:padded
-    onclick={() => onClick?.(bot)}>
-    {#if showAvatar}
-        <span class="avatar">
-            <BotAvatar {bot} />
-        </span>
-    {/if}
-    <div class="details">
-        <div class="bot-name">
-            <h4>
-                <div class={`img ${isPublic ? "public" : "private"}`}></div>
-                {bot.name}
-            </h4>
-            {#if owner}
-                <div class="owner">
-                    <Avatar url={client.userAvatarUrl(owner)} size={"xs"} />
-                    <span class="username">{owner.username}</span>
-                </div>
-            {/if}
-            {#if installing}
-                <div class="installing"></div>
-            {/if}
-        </div>
-        <div class="bot-desc">
-            <Markdown inline={false} text={bot.definition.description} />
-        </div>
-        {#if bot.ownerId === $currentUserIdStore}
-            <div class="bot-id">
-                bot id: {bot.id}
-            </div>
-        {/if}
-        {#if showCommands}
-            <BotCommands {grantedPermissions} commands={bot.definition.commands} />
-        {/if}
-
-        {@render children?.()}
-    </div>
-</div>
-
-<style lang="scss">
-    .props {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        gap: 12px;
-
-        &.clickable {
-            cursor: pointer;
-        }
-
-        &.padded {
-            padding: $sp3 toRem(10);
-            transition:
-                background-color ease-in-out 100ms,
-                border-color ease-in-out 100ms;
-            /* @media (hover: hover) {
-                &:hover {
-                    background-color: var(--members-hv);
-                }
-            } */
-        }
-    }
-
-    .avatar {
-        flex: 0 0 50px;
-        position: relative;
-        align-self: start;
-    }
-
-    .installing {
-        margin-left: $sp3;
-        @include loading-spinner(1em, 0.5em, var(--button-spinner), "/assets/plain-spinner.svg");
-    }
-
-    .details {
-        display: flex;
-        gap: $sp2;
-        flex: 1;
-        flex-direction: column;
-        @include font(book, normal, fs-100);
-
-        .bot-name {
-            @include ellipsis();
-            display: flex;
-            gap: $sp3;
-            @include font(book, normal, fs-110);
-
-            h4 {
-                display: flex;
-                gap: $sp2;
-                align-items: center;
-            }
-        }
-
-        .bot-desc {
-            @include font(light, normal, fs-100);
-            color: var(--txt-light);
-            margin-bottom: $sp3;
-            max-height: 300px;
-            overflow: auto;
-        }
-    }
-
-    .owner {
-        padding: $sp1 $sp3;
-        border: var(--bw) solid var(--bd);
-        border-radius: $sp2;
-        display: flex;
-        gap: $sp2;
-        align-items: center;
-        color: var(--txt-light);
-        @include font(light, normal, fs-90);
-
-        .username {
-            flex: auto;
-        }
-    }
-
-    .img {
-        background-repeat: no-repeat;
-        $size: 12px;
-        flex: 0 0 $size;
-        width: $size;
-        height: $size;
-
-        &.public {
-            background-image: url("/assets/unlocked.svg");
-        }
-
-        &.private {
-            background-image: url("/assets/locked.svg");
-        }
-    }
-
-    .bot-id {
-        @include font(light, normal, fs-70);
-        color: var(--txt-light);
-        font: courier;
-        margin-bottom: $sp3;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/bots/install/ChoosePermissions.svelte b/frontend/app/src/components_mobile/bots/install/ChoosePermissions.svelte
deleted file mode 100644
index bf583f2bed..0000000000
--- a/frontend/app/src/components_mobile/bots/install/ChoosePermissions.svelte
+++ /dev/null
@@ -1,108 +0,0 @@
-<script lang="ts">
-    import { Body, ColourVars, Container, Switch } from "component-lib";
-    import { i18nKey, type ExternalBotPermissions, type Level } from "@client";
-    import AccountGroup from "svelte-material-icons/AccountGroup.svelte";
-    import ChatOutline from "svelte-material-icons/ChatOutline.svelte";
-    import ForumOutline from "svelte-material-icons/ForumOutline.svelte";
-    import { togglePermission } from "../../../utils/bots";
-    import Translatable from "../../Translatable.svelte";
-
-    interface Props {
-        level: Level;
-        granted: ExternalBotPermissions;
-        requested: ExternalBotPermissions;
-    }
-
-    let { granted = $bindable(), requested, level }: Props = $props();
-</script>
-
-{#snippet permHeader(title: string, Icon: any)}
-    <Container gap={"sm"} crossAxisAlignment={"center"}>
-        <Icon color={ColourVars.textSecondary} />
-        <Body fontWeight={"bold"} colour={"textSecondary"}>
-            <Translatable resourceKey={i18nKey(title)}></Translatable>
-        </Body>
-    </Container>
-{/snippet}
-
-{#snippet noperm()}
-    <Body>
-        <Translatable resourceKey={i18nKey("bots.add.noPermissions")}></Translatable>
-    </Body>
-{/snippet}
-
-{#snippet chatTab()}
-    <Container
-        direction={"vertical"}
-        borderRadius={"md"}
-        padding={"lg"}
-        gap={"lg"}
-        background={ColourVars.background1}>
-        {@render permHeader("Chat permissions", ForumOutline)}
-        {#if requested.chatPermissions.length === 0}
-            {@render noperm()}
-        {:else}
-            {#each requested.chatPermissions as perm}
-                <Switch
-                    reverse
-                    width={"fill"}
-                    onChange={() => togglePermission(granted, "chatPermissions", perm)}
-                    checked={granted.chatPermissions.includes(perm)}>
-                    <Translatable resourceKey={i18nKey(`permissions.${perm}`)} />
-                </Switch>
-            {/each}
-        {/if}
-    </Container>
-{/snippet}
-{#snippet communityTab()}
-    <Container
-        direction={"vertical"}
-        borderRadius={"md"}
-        padding={"lg"}
-        gap={"lg"}
-        background={ColourVars.background1}>
-        {@render permHeader("Community permissions", AccountGroup)}
-        {#if requested.communityPermissions.length === 0}
-            {@render noperm()}
-        {:else}
-            {#each requested.communityPermissions as perm}
-                <Switch
-                    reverse
-                    width={"fill"}
-                    onChange={() => togglePermission(granted, "communityPermissions", perm)}
-                    checked={granted.communityPermissions.includes(perm)}>
-                    <Translatable resourceKey={i18nKey(`permissions.${perm}`)} />
-                </Switch>
-            {/each}
-        {/if}
-    </Container>
-{/snippet}
-{#snippet messageTab()}
-    <Container
-        direction={"vertical"}
-        borderRadius={"md"}
-        padding={"lg"}
-        gap={"lg"}
-        background={ColourVars.background1}>
-        {@render permHeader("Message permissions", ChatOutline)}
-        {#if requested.messagePermissions.length === 0}
-            {@render noperm()}
-        {:else}
-            {#each requested.messagePermissions as perm}
-                <Switch
-                    reverse
-                    width={"fill"}
-                    onChange={() => togglePermission(granted, "messagePermissions", perm)}
-                    checked={granted.messagePermissions.includes(perm)}>
-                    <Translatable resourceKey={i18nKey(`permissions.messagePermissions.${perm}`)} />
-                </Switch>
-            {/each}
-        {/if}
-    </Container>
-{/snippet}
-
-{#if level !== "group"}
-    {@render communityTab()}
-{/if}
-{@render chatTab()}
-{@render messageTab()}
diff --git a/frontend/app/src/components_mobile/calendar/Calendar.svelte b/frontend/app/src/components_mobile/calendar/Calendar.svelte
deleted file mode 100644
index 10fd46b0c4..0000000000
--- a/frontend/app/src/components_mobile/calendar/Calendar.svelte
+++ /dev/null
@@ -1,168 +0,0 @@
-<script lang="ts">
-    import { ColourVars, Container, IconButton, Subtitle } from "component-lib";
-    import { type Snippet } from "svelte";
-    import { locale } from "svelte-i18n";
-    import PrevIcon from "svelte-material-icons/ChevronLeft.svelte";
-    import NextIcon from "svelte-material-icons/ChevronRight.svelte";
-    import { translationCodes } from "../../i18n/i18n";
-    import { calendarState, type DateRange } from "./calendarState.svelte";
-    import { getMonthCalendar, getTitleText, isSameDay } from "./utils";
-    import { weekDays } from "./weekdays";
-
-    interface Props {
-        monthTitleTemplate?: Snippet;
-        dayTemplate?: Snippet<[Date]>;
-        dateSelected?: (range: DateRange) => void;
-    }
-
-    let { monthTitleTemplate, dayTemplate, dateSelected }: Props = $props();
-
-    let today = $state(new Date());
-    let showDate = $state(new Date());
-    let dates = $state<Date[][]>([]);
-    let translatedLocale = $derived(translationCodes[$locale || "en"] || "en");
-
-    $effect(() => getDates(showDate));
-
-    function endOfDay(date: Date): Date {
-        return new Date(date.getTime() + 24 * 60 * 60 * 1000 - 1);
-    }
-
-    function getDates(start: Date) {
-        console.log("Getting dates for start date: ", start);
-        const resp = getMonthCalendar(start);
-        calendarState.monthTitle = getTitleText(resp.year, resp.month, translatedLocale);
-        dates = resp.dates;
-        calendarState.selectedMonth = resp.month;
-        const allDates = resp.dates.flatMap((d) => d);
-        const finalDay = allDates[allDates.length - 1];
-        const range: DateRange = {
-            date: start,
-            range: [allDates[0], endOfDay(finalDay)],
-        };
-        calendarState.selectedRange = range;
-        dateSelected?.(range);
-    }
-
-    function previousMonth() {
-        const year = showDate.getFullYear();
-        const month = showDate.getMonth();
-        if (month - 1 < 0) {
-            showDate = new Date(year - 1, 11, 1);
-        } else {
-            showDate = new Date(year, month - 1, 1);
-        }
-    }
-    function nextMonth() {
-        const year = showDate.getFullYear();
-        const month = showDate.getMonth();
-        if (month + 1 > 11) {
-            showDate = new Date(year + 1, 0, 1);
-        } else {
-            showDate = new Date(year, month + 1, 1);
-        }
-    }
-</script>
-
-<div class={"calendar-wrapper"}>
-    <Container crossAxisAlignment={"center"} mainAxisAlignment={"spaceBetween"}>
-        <IconButton size={"lg"} onclick={previousMonth}>
-            {#snippet icon()}
-                <PrevIcon color={ColourVars.primary} />
-            {/snippet}
-        </IconButton>
-        {#if monthTitleTemplate}
-            {@render monthTitleTemplate()}
-        {:else}
-            <Subtitle width={"hug"} fontWeight={"bold"}>
-                {calendarState.monthTitle}
-            </Subtitle>
-        {/if}
-        <IconButton size={"lg"} onclick={nextMonth}>
-            {#snippet icon()}
-                <NextIcon color={ColourVars.primary} />
-            {/snippet}
-        </IconButton>
-    </Container>
-    <div class="week-days-row">
-        {#each $weekDays as [day, d]}
-            <div title={day} class="block weekday-name-block">
-                {d}
-            </div>
-        {/each}
-    </div>
-    <div class="daily-date-container">
-        {#each dates as week}
-            <div class="week-row">
-                {#each week as day}
-                    <div
-                        class:disabled={day.getMonth() !== calendarState.selectedMonth}
-                        class:today={typeof day === "string" ? false : isSameDay(today, day)}
-                        class="block daily-date-block pointer">
-                        {#if dayTemplate}
-                            {@render dayTemplate(day)}
-                        {:else}
-                            {day.getDate()}
-                        {/if}
-                    </div>
-                {/each}
-            </div>
-        {/each}
-    </div>
-</div>
-
-<style lang="scss">
-    .calendar-wrapper {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        margin-bottom: $sp4;
-    }
-
-    .block {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        min-height: 2.5rem;
-        @include font(medium, normal, fs-100);
-        flex-grow: 0;
-        flex-shrink: 0;
-    }
-
-    .week-days-row,
-    .week-row {
-        width: 100%;
-        display: flex;
-        flex-wrap: wrap;
-    }
-
-    .weekday-name-block,
-    .daily-date-block {
-        width: calc(100% / 7);
-        font-variant-numeric: tabular-nums;
-    }
-
-    .daily-date-block {
-        transition: background 0.25s ease-in-out;
-        &:hover:not(.disabled) {
-            background: rgba(255, 255, 255, 0.1);
-        }
-    }
-
-    .today {
-        font-weight: 700;
-    }
-
-    .disabled {
-        color: var(--text-secondary);
-    }
-
-    .weekday-name-block {
-        font-weight: bold;
-    }
-
-    .pointer {
-        cursor: pointer;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/calendar/weekdays.ts b/frontend/app/src/components_mobile/calendar/weekdays.ts
deleted file mode 100644
index 39f58900bc..0000000000
--- a/frontend/app/src/components_mobile/calendar/weekdays.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-import { locale } from "svelte-i18n";
-import { derived } from "svelte/store";
-import { translationCodes } from "../../i18n/i18n";
-
-type WeekDay = [string, string];
-type WeekDayMap = Record<string, WeekDay[]>;
-
-const map: WeekDayMap = {
-    "zh-cn": [
-        ["星期日", "日"],
-        ["星期一", "一"],
-        ["星期二", "二"],
-        ["星期三", "三"],
-        ["星期四", "四"],
-        ["星期五", "五"],
-        ["星期六", "六"],
-    ],
-    de: [
-        ["Sonntag", "So"],
-        ["Montag", "Mo"],
-        ["Dienstag", "Di"],
-        ["Mittwoch", "Mi"],
-        ["Donnerstag", "Do"],
-        ["Freitag", "Fr"],
-        ["Samstag", "Sa"],
-    ],
-    en: [
-        ["Sunday", "Su"],
-        ["Monday", "Mo"],
-        ["Tuesday", "Tu"],
-        ["Wednesday", "We"],
-        ["Thursday", "Th"],
-        ["Friday", "Fr"],
-        ["Saturday", "Sa"],
-    ],
-    es: [
-        ["Domingo", "Do"],
-        ["Lunes", "Lu"],
-        ["Martes", "Ma"],
-        ["Miércoles", "Mi"],
-        ["Jueves", "Ju"],
-        ["Viernes", "Vi"],
-        ["Sábado", "Sa"],
-    ],
-    fr: [
-        ["Dimanche", "Di"],
-        ["Lundi", "Lu"],
-        ["Mardi", "Ma"],
-        ["Mercredi", "Me"],
-        ["Jeudi", "Je"],
-        ["Vendredi", "Ve"],
-        ["Samedi", "Sa"],
-    ],
-    hi: [
-        ["रविवार", "र"],
-        ["सोमवार", "सो"],
-        ["मंगलवार", "मं"],
-        ["बुधवार", "बु"],
-        ["गुरुवार", "गु"],
-        ["शुक्रवार", "शु"],
-        ["शनिवार", "श"],
-    ],
-    it: [
-        ["Domenica", "Do"],
-        ["Lunedì", "Lu"],
-        ["Martedì", "Ma"],
-        ["Mercoledì", "Me"],
-        ["Giovedì", "Gi"],
-        ["Venerdì", "Ve"],
-        ["Sabato", "Sa"],
-    ],
-    iw: [
-        ["יום ראשון", "א"],
-        ["יום שני", "ב"],
-        ["יום שלישי", "ג"],
-        ["יום רביעי", "ד"],
-        ["יום חמישי", "ה"],
-        ["יום שישי", "ו"],
-        ["שבת", "ש"],
-    ],
-    ja: [
-        ["日曜日", "日"],
-        ["月曜日", "月"],
-        ["火曜日", "火"],
-        ["水曜日", "水"],
-        ["木曜日", "木"],
-        ["金曜日", "金"],
-        ["土曜日", "土"],
-    ],
-    ru: [
-        ["Воскресенье", "Вс"],
-        ["Понедельник", "Пн"],
-        ["Вторник", "Вт"],
-        ["Среда", "Ср"],
-        ["Четверг", "Чт"],
-        ["Пятница", "Пт"],
-        ["Суббота", "Сб"],
-    ],
-    uk: [
-        ["Неділя", "Нд"],
-        ["Понеділок", "Пн"],
-        ["Вівторок", "Вт"],
-        ["Середа", "Ср"],
-        ["Четвер", "Чт"],
-        ["П’ятниця", "Пт"],
-        ["Субота", "Сб"],
-    ],
-    vi: [
-        ["Chủ Nhật", "CN"],
-        ["Thứ Hai", "T2"],
-        ["Thứ Ba", "T3"],
-        ["Thứ Tư", "T4"],
-        ["Thứ Năm", "T5"],
-        ["Thứ Sáu", "T6"],
-        ["Thứ Bảy", "T7"],
-    ],
-};
-
-export const weekDays = derived(locale, (locale) => {
-    const translated = translationCodes[locale || "en"] || "en";
-    return map[translated] ?? map["en"];
-});
diff --git a/frontend/app/src/components_mobile/home/AcceptP2PSwapModal.svelte b/frontend/app/src/components_mobile/home/AcceptP2PSwapModal.svelte
deleted file mode 100644
index 31d3763bd3..0000000000
--- a/frontend/app/src/components_mobile/home/AcceptP2PSwapModal.svelte
+++ /dev/null
@@ -1,102 +0,0 @@
-<script lang="ts">
-    import { Body, Column, CommonButton, Row, Sheet, Subtitle } from "component-lib";
-    import type { OpenChat } from "@client";
-    import { cryptoBalanceStore, enhancedCryptoLookup as cryptoLookup } from "@client";
-    import { getContext } from "svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import Translatable from "../Translatable.svelte";
-    import AccountInfo from "./AccountInfo.svelte";
-    import BalanceWithRefresh from "./BalanceWithRefresh.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        ledger0: string;
-        ledger1: string;
-        amount0: bigint;
-        amount1: bigint;
-        onClose: () => void;
-        onAccept: () => void;
-    }
-
-    let { ledger0, ledger1, amount0, amount1, onClose, onAccept }: Props = $props();
-
-    let refreshing = false;
-    let error: string | undefined = undefined;
-    //@ts-ignore
-    let balanceWithRefresh: BalanceWithRefresh;
-
-    function reset() {
-        balanceWithRefresh.refresh();
-    }
-
-    let cryptoBalance = $derived($cryptoBalanceStore.get(ledger1) ?? 0n);
-    let tokenDetails0 = $derived($cryptoLookup.get(ledger0)!);
-    let tokenDetails1 = $derived($cryptoLookup.get(ledger1)!);
-    let symbol0 = $derived(tokenDetails0.symbol);
-    let symbol1 = $derived(tokenDetails1.symbol);
-    let transferFees = $derived(BigInt(2) * tokenDetails1.transferFee);
-    let insufficient = $derived(cryptoBalance <= amount1 + transferFees);
-    let valid = $derived(error === undefined && !insufficient);
-    let amount0Text = $derived(client.formatTokens(amount0, tokenDetails0.decimals));
-    let amount1Text = $derived(client.formatTokens(amount1 + transferFees, tokenDetails1.decimals));
-</script>
-
-<Sheet onDismiss={onClose}>
-    <Column gap={"lg"} padding={"lg"}>
-        <Row mainAxisAlignment={"spaceBetween"} crossAxisAlignment={"center"}>
-            <Subtitle width={"hug"} fontWeight={"bold"}>
-                <Translatable
-                    resourceKey={i18nKey(
-                        insufficient ? "p2pSwap.insufficientBalance" : "areYouSure",
-                    )} />
-            </Subtitle>
-            <BalanceWithRefresh
-                bind:this={balanceWithRefresh}
-                ledger={ledger1}
-                value={cryptoBalance} />
-        </Row>
-        <div class="body" class:insufficient>
-            {#if insufficient}
-                <Body colour={"textSecondary"}>
-                    <Translatable
-                        resourceKey={i18nKey("p2pSwap.insufficientBalanceMessage", {
-                            amount: amount1Text,
-                            token: symbol1,
-                        })} />
-                </Body>
-                <AccountInfo ledger={ledger1} />
-            {:else}
-                <Body colour={"textSecondary"}>
-                    <Translatable
-                        resourceKey={i18nKey("p2pSwap.confirmAccept", {
-                            amount: amount1Text,
-                            token: symbol1,
-                            amountOther: amount0Text,
-                            tokenOther: symbol0,
-                        })} />
-                </Body>
-            {/if}
-        </div>
-        <Row gap={"md"} mainAxisAlignment={"end"} crossAxisAlignment={"center"}>
-            <CommonButton size={"small_text"} onClick={onClose}
-                ><Translatable resourceKey={i18nKey("cancel")} /></CommonButton>
-            {#if insufficient}
-                <CommonButton
-                    mode={"active"}
-                    size={"medium"}
-                    width={{ size: "4rem" }}
-                    disabled={refreshing}
-                    loading={refreshing}
-                    onClick={reset}><Translatable resourceKey={i18nKey("refresh")} /></CommonButton>
-            {:else}
-                <CommonButton
-                    width={{ size: "4rem" }}
-                    mode={"active"}
-                    size={"medium"}
-                    disabled={!valid}
-                    onClick={onAccept}><Translatable resourceKey={i18nKey("yes")} /></CommonButton>
-            {/if}
-        </Row>
-    </Column>
-</Sheet>
diff --git a/frontend/app/src/components_mobile/home/AcceptRulesModal.svelte b/frontend/app/src/components_mobile/home/AcceptRulesModal.svelte
deleted file mode 100644
index d383035aa9..0000000000
--- a/frontend/app/src/components_mobile/home/AcceptRulesModal.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script lang="ts">
-    import {
-        type OpenChat,
-        captureRulesAcceptanceStore as rulesAcceptanceStore,
-        selectedChatRulesStore,
-        selectedCommunityRulesStore,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import AreYouSure from "../AreYouSure.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    function onAction(accepted: boolean): Promise<void> {
-        $rulesAcceptanceStore?.resolve(accepted);
-        return Promise.resolve();
-    }
-</script>
-
-<AreYouSure
-    title={i18nKey("rules.acceptTitle")}
-    message={i18nKey(
-        client.combineRulesText($selectedChatRulesStore, $selectedCommunityRulesStore),
-    )}
-    yesLabel={i18nKey("rules.accept")}
-    noLabel={i18nKey("rules.reject")}
-    action={onAction} />
diff --git a/frontend/app/src/components_mobile/home/AccessGateSummary.svelte b/frontend/app/src/components_mobile/home/AccessGateSummary.svelte
deleted file mode 100644
index f039e3f5fb..0000000000
--- a/frontend/app/src/components_mobile/home/AccessGateSummary.svelte
+++ /dev/null
@@ -1,70 +0,0 @@
-<script lang="ts">
-    import { i18nKey } from "@src/i18n/i18n";
-    import { flattenGateConfig } from "@src/utils/access";
-    import { Body, Container, type SizeMode } from "component-lib";
-    import { type AccessGateConfig } from "@client";
-    import Translatable from "../Translatable.svelte";
-    import Separator from "./Separator.svelte";
-    import AccessGateText from "./access_gates/AccessGateText.svelte";
-
-    interface Props {
-        gateConfig: AccessGateConfig;
-    }
-
-    let { gateConfig }: Props = $props();
-
-    let gates = $derived(flattenGateConfig(gateConfig));
-    const width: SizeMode = "hug";
-    let evaluationDays = $derived(initialEvaluationDays());
-    function initialEvaluationDays() {
-        if (gateConfig.expiry === undefined) return undefined;
-        return Math.floor(Number(gateConfig.expiry) / 1000 / 60 / 60 / 24).toString();
-    }
-</script>
-
-<Separator />
-
-<Container padding={["zero", "md"]} gap={"xl"} direction={"vertical"}>
-    <Container direction={"vertical"} gap={"md"}>
-        <Body colour={"textSecondary"} fontWeight={"bold"}>
-            <Translatable resourceKey={i18nKey("Access gates")}></Translatable>
-        </Body>
-
-        {#if gates.length > 0}
-            <Container {width} wrap gap={"sm"}>
-                {#each gates as gate, i}
-                    {@const last = i === gates.length - 1}
-                    <AccessGateText {gate} />
-                    {#if !last}
-                        <Body colour={"primary"} {width}>/</Body>
-                    {/if}
-                {/each}
-            </Container>
-        {:else}
-            <Body {width}>
-                <Translatable
-                    resourceKey={i18nKey(
-                        "There are no access gates defined for the community. You may still define access gates for individual channels within the community.",
-                    )}></Translatable>
-            </Body>
-        {/if}
-    </Container>
-    {#if evaluationDays !== undefined}
-        <Container direction={"vertical"} gap={"md"}>
-            <Container crossAxisAlignment={"center"} mainAxisAlignment={"spaceBetween"}>
-                <Body colour={"textSecondary"} fontWeight={"bold"}>
-                    <Translatable resourceKey={i18nKey("Gate evaluation interval")}></Translatable>
-                </Body>
-                <Body {width} colour={"secondary"} fontWeight={"bold"}>
-                    <Translatable resourceKey={i18nKey(`${evaluationDays} days`)}></Translatable>
-                </Body>
-            </Container>
-            <Body>
-                <Translatable
-                    resourceKey={i18nKey(
-                        `After ${evaluationDays} days, your members will be evaluated against your group’s access gates. Any members that do not satisfy the access gates will be demoted to lapsed members and will have to re-join.`,
-                    )}></Translatable>
-            </Body>
-        </Container>
-    {/if}
-</Container>
diff --git a/frontend/app/src/components_mobile/home/AccountInfo.svelte b/frontend/app/src/components_mobile/home/AccountInfo.svelte
deleted file mode 100644
index 5291e30bd6..0000000000
--- a/frontend/app/src/components_mobile/home/AccountInfo.svelte
+++ /dev/null
@@ -1,265 +0,0 @@
-<script lang="ts">
-    import { BodySmall, ColourVars, Container, Row, type Padding } from "component-lib";
-    import {
-        BTC_SYMBOL,
-        CKBTC_SYMBOL,
-        cryptoLookup,
-        currentUserIdStore,
-        currentUserStore,
-        ICP_SYMBOL,
-        Lazy,
-        OpenChat,
-        type OneSecTransferFees,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { i18nKey } from "../../i18n/i18n";
-    import { rtlStore } from "../../stores/rtl";
-    import QRCode from "../QRCode.svelte";
-    import Translatable from "../Translatable.svelte";
-    import NetworkSelector from "./NetworkSelector.svelte";
-    import TruncatedAccount from "./TruncatedAccount.svelte";
-    import AlertCircleOutline from "svelte-material-icons/AlertCircleOutline.svelte";
-    import RobotConfusedOutline from "svelte-material-icons/RobotConfusedOutline.svelte";
-    import { Subtitle } from "component-lib";
-
-    interface Props {
-        ledger: string;
-        padding?: Padding;
-        background?: string;
-    }
-
-    let { ledger, padding = ["lg", "xl"], background = ColourVars.background1 }: Props = $props();
-
-    const client = getContext<OpenChat>("client");
-
-    let tokenDetails = $derived($cryptoLookup.get(ledger)!);
-    let selectedNetwork = $state<string>();
-    let isBtc = $derived(tokenDetails.symbol === BTC_SYMBOL);
-    let isBtcNetwork = $derived(selectedNetwork === BTC_SYMBOL);
-    let oneSecEnabled = $derived(
-        tokenDetails.oneSecEnabled && tokenDetails.evmContractAddresses.length > 0,
-    );
-    let isOneSecNetwork = $derived(oneSecEnabled && selectedNetwork !== ICP_SYMBOL);
-    let networks = $derived.by(() => {
-        if (isBtc) {
-            return [BTC_SYMBOL, CKBTC_SYMBOL];
-        } else if (oneSecEnabled) {
-            return client.oneSecGetNetworks(tokenDetails.symbol);
-        } else {
-            return [];
-        }
-    });
-    let btcAddress = $state<string>();
-    let oneSecAddress = $state<string>();
-
-    // Whenever the networks list changes, autoselect the first one
-    $effect(() => {
-        selectedNetwork = networks[0];
-    });
-
-    let account = $derived.by(() => {
-        if (tokenDetails.symbol === ICP_SYMBOL) {
-            return $currentUserStore.cryptoAccount;
-        } else if (isBtcNetwork) {
-            return btcAddress;
-        } else if (isOneSecNetwork) {
-            return oneSecAddress;
-        } else {
-            return $currentUserIdStore;
-        }
-    });
-
-    let error = $state();
-    $effect(() => {
-        if (account === undefined) {
-            if (isBtcNetwork) {
-                client
-                    .getBtcAddress()
-                    .then((addr) => (btcAddress = addr))
-                    .catch((e) => (error = e));
-            } else if (isOneSecNetwork) {
-                client
-                    .getOneSecAddress()
-                    .then((addr) => (oneSecAddress = addr))
-                    .catch((e) => (error = e));
-            }
-        }
-    });
-
-    let tokenName = $derived.by(() => {
-        if (isBtc) return selectedNetwork;
-        if (selectedNetwork !== undefined) {
-            return $rtlStore
-                ? `(${selectedNetwork}) ${tokenDetails.symbol}`
-                : `${tokenDetails.symbol} (${selectedNetwork})`;
-        }
-        return tokenDetails.symbol;
-    });
-
-    const btcDepositFeePromise = new Lazy(() =>
-        client
-            .getCkbtcMinterDepositInfo()
-            .then((depositInfo) => `~${client.formatTokens(depositInfo.depositFee, 8)}`),
-    );
-
-    const oneSecFeesPromise = new Lazy(() =>
-        client
-            .oneSecGetTransferFees()
-            // Filter to where source token equals destination token since we're dealing with cross-chain deposits
-            .then(
-                (fees) => (oneSecFees = fees.filter((f) => f.sourceToken === f.destinationToken)),
-            ),
-    );
-
-    let oneSecFees = $state<OneSecTransferFees[]>();
-    let oneSecFeesForToken = $derived.by(() => {
-        if (!isOneSecNetwork || oneSecFees === undefined) return undefined;
-        return oneSecFees.filter((f) => f.sourceToken === tokenDetails.symbol);
-    });
-    let oneSecProtocolFee = $derived.by(() => {
-        if (oneSecFeesForToken === undefined) return undefined;
-        return oneSecFeesForToken.find(
-            (f) => f.sourceChain === selectedNetwork && f.destinationChain === ICP_SYMBOL,
-        )?.protocolFeePercent;
-    });
-    let oneSecTransferFee = $derived.by(() => {
-        if (oneSecFeesForToken === undefined) return undefined;
-        return oneSecFeesForToken.find(
-            (f) => f.sourceChain === ICP_SYMBOL && f.destinationChain === selectedNetwork,
-        )?.latestTransferFee;
-    });
-    let oneSecTotalFee = $derived.by(() => {
-        if (oneSecProtocolFee === undefined || oneSecTransferFee === undefined) return undefined;
-        return `${oneSecProtocolFee}% + ~${client.formatTokens(
-            oneSecTransferFee,
-            tokenDetails.decimals,
-        )}`;
-    });
-</script>
-
-{#snippet fetchingDepositFee()}
-    <!-- TODO add loading spinner ? -->
-    <Subtitle colour={"textSecondary"}>
-        {$_("cryptoAccount.fetchingDepositFee")}
-    </Subtitle>
-{/snippet}
-
-{#snippet fetchingFeeError()}
-    <Subtitle colour={"error"}>
-        {$_("cryptoAccount.failedToFetchDepositFee")}
-    </Subtitle>
-    <RobotConfusedOutline color={ColourVars.error} size="1.25rem" />
-{/snippet}
-
-<!-- TODO open fee breakdown modal -->
-{#snippet displayFee(values: { amount: string; token: string })}
-    <Subtitle colour={"warning"}>
-        {$_("cryptoAccount.networkFee", { values })}
-    </Subtitle>
-    <AlertCircleOutline color={ColourVars.warning} size="1.25rem" />
-{/snippet}
-
-<Container gap={"xxs"} direction={"vertical"}>
-    <Container
-        borderRadius={["lg", "lg", "zero", "zero"]}
-        {background}
-        direction={"vertical"}
-        {padding}>
-        {#if account === undefined}
-            <div class="generating">
-                {#if error !== undefined}
-                    <div class="error-icon"></div>
-                {:else}
-                    <div class="spinner"></div>
-                {/if}
-            </div>
-        {:else}
-            <QRCode
-                fullWidthOnMobile
-                text={account}
-                size={"larger"}
-                logo={tokenDetails.logo}
-                border={false} />
-        {/if}
-    </Container>
-
-    {#if networks.length > 0 && selectedNetwork !== undefined}
-        <NetworkSelector {background} {networks} flatSelect={true} bind:selectedNetwork />
-    {/if}
-
-    {#if isBtcNetwork}
-        <Row {background} padding={["lg", "xl"]} crossAxisAlignment="center">
-            {#await btcDepositFeePromise.get()}
-                {@render fetchingDepositFee()}
-            {:then amount}
-                {@render displayFee({ amount, token: tokenDetails.symbol })}
-            {:catch}
-                {@render fetchingFeeError()}
-            {/await}
-        </Row>
-    {:else if isOneSecNetwork}
-        <Row {background} padding={["lg", "xl"]} crossAxisAlignment="center">
-            {#await oneSecFeesPromise.get()}
-                {@render fetchingDepositFee()}
-            {:then}
-                {#if oneSecTotalFee !== undefined}
-                    {@render displayFee({ amount: oneSecTotalFee, token: tokenDetails.symbol })}
-                {:else}
-                    {@render fetchingFeeError()}
-                {/if}
-            {:catch}
-                {@render fetchingFeeError()}
-            {/await}
-        </Row>
-    {/if}
-
-    <Container
-        {background}
-        direction={"vertical"}
-        padding={["lg", "xl"]}
-        crossAxisAlignment="center"
-        borderRadius={["zero", "zero", "lg", "lg"]}>
-        {#if account === undefined}
-            {#if error !== undefined}
-                <Subtitle colour={"error"}>
-                    {$_("cryptoAccount.failedToGenera4teAddress")}
-                </Subtitle>
-                <RobotConfusedOutline color={ColourVars.error} size="1.25rem" />
-            {:else}
-                <!-- TODO add spinner? -->
-                <Subtitle colour={"textSecondary"}>
-                    {$_("generating")}
-                </Subtitle>
-            {/if}
-        {:else}
-            <TruncatedAccount {account}>
-                <BodySmall colour={"textSecondary"} fontWeight={"bold"}>
-                    <Translatable
-                        resourceKey={i18nKey("tokenTransfer.yourAccount", { token: tokenName })} />
-                </BodySmall>
-            </TruncatedAccount>
-        {/if}
-    </Container>
-</Container>
-
-<style lang="scss">
-    .generating {
-        height: 298px;
-        width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .spinner {
-        @include loading-spinner(4rem, 2rem, var(--button-spinner), "/assets/spinner.svg");
-        flex: 0 0 toRem(24);
-    }
-
-    .error-icon {
-        background-image: url("/assets/dead-bot.svg");
-        height: 4rem;
-        width: 4rem;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/AggregateCommonEvents.svelte b/frontend/app/src/components_mobile/home/AggregateCommonEvents.svelte
deleted file mode 100644
index 970db3f547..0000000000
--- a/frontend/app/src/components_mobile/home/AggregateCommonEvents.svelte
+++ /dev/null
@@ -1,151 +0,0 @@
-<script lang="ts">
-    import { Caption, Container } from "component-lib";
-    import type { Level, MemberRole, OpenChat, UserLookup, UserSummary } from "@client";
-    import { allUsersStore, roleAsText } from "@client";
-    import { getContext, onDestroy, onMount } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { i18nKey, interpolate } from "../../i18n/i18n";
-    import { buildDisplayName } from "../../utils/user";
-    import Markdown from "@shared_components/Markdown.svelte";
-
-    interface Props {
-        user: UserSummary | undefined;
-        joined: Set<string>;
-        messagesDeleted: number[];
-        rolesChanged: Map<string, Map<MemberRole, Set<string>>>;
-        observer?: IntersectionObserver;
-        readByMe: boolean;
-        level: Level;
-    }
-
-    let { user, joined, messagesDeleted, rolesChanged, observer, readByMe, level }: Props =
-        $props();
-
-    let deletedMessagesElement: HTMLElement | undefined = $state();
-
-    const client = getContext<OpenChat>("client");
-
-    onMount(() => {
-        if (!readByMe && deletedMessagesElement) {
-            observer?.observe(deletedMessagesElement);
-        }
-    });
-
-    onDestroy(() => {
-        if (deletedMessagesElement) {
-            observer?.unobserve(deletedMessagesElement);
-        }
-    });
-
-    function buildJoinedText(userStore: UserLookup, userIds: Set<string>): string | undefined {
-        return userIds.size > 10
-            ? interpolate(
-                  $_,
-                  i18nKey(
-                      "nUsersJoined",
-                      {
-                          number: userIds.size.toString(),
-                      },
-                      level,
-                      true,
-                  ),
-              )
-            : userIds.size > 0
-              ? interpolate(
-                    $_,
-                    i18nKey(
-                        "userJoined",
-                        {
-                            username: buildUserList(userStore, Array.from(userIds)),
-                        },
-                        level,
-                        true,
-                    ),
-                )
-              : undefined;
-    }
-
-    function buildRoleChangedTextList(
-        userStore: UserLookup,
-        rolesChanged: Map<string, Map<MemberRole, Set<string>>>,
-    ): string[] {
-        return [...rolesChanged.entries()].flatMap(([changedBy, changedByMap]) => {
-            const me = changedBy === user?.userId;
-            const changedByStr = buildDisplayName(userStore, changedBy, me ? "me" : "user");
-
-            return [...changedByMap.entries()].flatMap(([newRole, userIds]) =>
-                buildRoleChangedText(userStore, changedByStr, newRole, Array.from(userIds)),
-            );
-        });
-    }
-
-    function buildRoleChangedText(
-        userStore: UserLookup,
-        changedBy: string,
-        newRole: MemberRole,
-        userIds: string[],
-    ): string {
-        const meChanged = userIds.length == 1 && userIds[0] === user?.userId;
-        const members = buildUserList(userStore, userIds);
-
-        return $_(meChanged ? "yourRoleChanged" : "roleChanged", {
-            values: {
-                changed: members,
-                changedBy,
-                newRole: $_(roleAsText(newRole)),
-            },
-        });
-    }
-
-    function buildUserList(userStore: UserLookup, userIds: string[]): string {
-        return client.getMembersString(
-            user!,
-            userStore,
-            userIds,
-            $_("unknownUser"),
-            $_("you"),
-            user ? client.compareIsNotYouThenUsername(user.userId) : client.compareUsername,
-            false,
-        );
-    }
-
-    function expandDeletedMessages() {
-        client.expandDeletedMessages(new Set(messagesDeleted));
-    }
-    let joinedText = $derived(buildJoinedText($allUsersStore, joined));
-    let deletedText = $derived(
-        messagesDeleted.length > 0
-            ? messagesDeleted.length === 1
-                ? $_("oneMessageDeleted")
-                : $_("nMessagesDeleted", { values: { number: messagesDeleted.length } })
-            : undefined,
-    );
-    let roleChangedTextList = $derived(buildRoleChangedTextList($allUsersStore, rolesChanged));
-</script>
-
-{#if joinedText !== undefined || deletedText !== undefined || roleChangedTextList?.length > 0}
-    <Container padding={"sm"} crossAxisAlignment={"center"} direction={"vertical"}>
-        {#if joinedText !== undefined}
-            <Caption width={"hug"} colour={"textSecondary"}>
-                <Markdown oneLine suppressLinks text={joinedText} />
-            </Caption>
-        {/if}
-        {#if deletedText !== undefined}
-            <div
-                bind:this={deletedMessagesElement}
-                data-index={messagesDeleted.join(" ")}
-                class="deleted">
-                <Container onClick={expandDeletedMessages}>
-                    <Caption width={"hug"} colour={"textSecondary"}>
-                        {deletedText}
-                    </Caption>
-                </Container>
-            </div>
-        {/if}
-        {#each roleChangedTextList as text}
-            <Caption width={"hug"} colour={"textSecondary"}>
-                <Markdown suppressLinks {text} />
-            </Caption>
-        {/each}
-    </Container>
-{/if}
diff --git a/frontend/app/src/components_mobile/home/AnonFooter.svelte b/frontend/app/src/components_mobile/home/AnonFooter.svelte
deleted file mode 100644
index 0dcf636db0..0000000000
--- a/frontend/app/src/components_mobile/home/AnonFooter.svelte
+++ /dev/null
@@ -1,102 +0,0 @@
-<script lang="ts">
-    import { i18nKey } from "@src/i18n/i18n";
-    import { Body, ColourVars, Container, transition } from "component-lib";
-    import { publish, routeStore } from "@client";
-    import { navigate } from "@utils/navigation";
-    import { type Snippet } from "svelte";
-    import ChevronLeft from "svelte-material-icons/ChevronLeft.svelte";
-    import MulticolourText, { type TextPart } from "../MulticolourText.svelte";
-
-    interface Props {
-        children?: Snippet;
-    }
-
-    let { children }: Props = $props();
-
-    const signInMsg = [
-        {
-            text: i18nKey("Back to "),
-            colour: "textSecondary",
-        },
-        {
-            text: i18nKey("create account "),
-            colour: "primary",
-        },
-        {
-            text: i18nKey("& "),
-            colour: "textSecondary",
-        },
-        {
-            text: i18nKey("sign in"),
-            colour: "primary",
-        },
-    ];
-    const backToExploreMsg = [
-        {
-            text: i18nKey("Back to "),
-            colour: "textSecondary",
-        },
-        {
-            text: i18nKey("Communities explorer"),
-            colour: "primary",
-        },
-    ];
-
-    let msg = $derived.by<TextPart[]>(() => {
-        switch ($routeStore.kind) {
-            case "communities_route":
-                return signInMsg as TextPart[];
-            default:
-                return backToExploreMsg as TextPart[];
-        }
-    });
-
-    function back() {
-        transition(["fade"], () => {
-            publish("closeModalStack");
-            if ($routeStore.kind === "communities_route") {
-                navigate("/");
-            } else {
-                navigate("/communities");
-            }
-        });
-    }
-</script>
-
-<Container
-    gap={"sm"}
-    overflow={"visible"}
-    mainAxisAlignment={children ? "spaceBetween" : "center"}
-    supplementalClass={"anon-footer"}
-    padding={["lg", "lg", "zero", "lg"]}>
-    <Container
-        width={children ? "fill" : "hug"}
-        height={{ size: "3.5rem" }}
-        padding={["md", "xl", "md", "sm"]}
-        gap={"sm"}
-        shadow={"var(--shadow-menu)"}
-        borderRadius={"circle"}
-        mainAxisAlignment={"center"}
-        crossAxisAlignment={"center"}
-        background={ColourVars.background2}
-        onClick={back}>
-        <ChevronLeft size={"1.6rem"} color={ColourVars.textSecondary} />
-        <Body width={"hug"}>
-            <MulticolourText parts={msg}></MulticolourText>
-        </Body>
-    </Container>
-    {@render children?.()}
-</Container>
-
-<style lang="scss">
-    :global {
-        .anon-footer {
-            @include z-index("anon-banner");
-            bottom: 0;
-            left: 0;
-            width: 100%;
-            position: fixed !important;
-            cursor: pointer;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/AudioAttacher.svelte b/frontend/app/src/components_mobile/home/AudioAttacher.svelte
deleted file mode 100644
index 72f101fdc5..0000000000
--- a/frontend/app/src/components_mobile/home/AudioAttacher.svelte
+++ /dev/null
@@ -1,134 +0,0 @@
-<script lang="ts">
-    import { IconButton } from "component-lib";
-    import { quantiseWaveform, type AudioContent, type OpenChat } from "@client";
-    import { getContext, onDestroy, onMount } from "svelte";
-    import Microphone from "svelte-material-icons/MicrophoneOutline.svelte";
-    import RadioboxMarked from "svelte-material-icons/RadioboxMarked.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { toastStore } from "../../stores/toast";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        activeStream?: MediaStream;
-        mimeType: string;
-        supported: boolean;
-        onAudioCaptured: (content: AudioContent) => void;
-    }
-
-    let {
-        activeStream = $bindable(undefined),
-        mimeType,
-        supported = $bindable(),
-        onAudioCaptured,
-    }: Props = $props();
-
-    let mediaRecorder: MediaRecorder | undefined;
-
-    onMount(() => {
-        if (supported) {
-            // TODO - there are problems with this whole thing on safari.
-            // in particular, there is no access to the permissions api
-            if ("permissions" in navigator) {
-                navigator.permissions
-                    //@ts-ignore
-                    .query({ name: "microphone" })
-                    .then(function (result) {
-                        if (result.state === "denied") {
-                            // if they already said no, don't be rude
-                            supported = false;
-                        }
-                    })
-                    .catch((_err) => {
-                        console.log(
-                            "unable to check microphone permissions (probably unsupported)",
-                        );
-                    });
-            }
-        }
-    });
-
-    onDestroy(() => {
-        if (mediaRecorder && mediaRecorder.state === "recording") {
-            mediaRecorder.stop();
-        }
-        activeStream?.getTracks().forEach((track) => track.stop());
-        activeStream = undefined;
-        mediaRecorder = undefined;
-    });
-
-    function stopRecording() {
-        if (mediaRecorder && mediaRecorder.state === "recording") {
-            mediaRecorder.stop();
-        }
-    }
-
-    function toggle() {
-        if (activeStream !== undefined) {
-            stopRecording();
-        } else {
-            record();
-        }
-    }
-
-    function record() {
-        if (supported) {
-            navigator.mediaDevices
-                .getUserMedia({ audio: true, video: false })
-                .then((stream) => {
-                    activeStream = stream;
-                    const recordedChunks: Blob[] = [];
-                    const maxSizes = client.maxMediaSizes();
-                    let totalSize = 0;
-                    let truncated = false;
-                    mediaRecorder = new MediaRecorder(stream, { mimeType });
-
-                    mediaRecorder.addEventListener("dataavailable", (e) => {
-                        if (e.data.size > 0) recordedChunks.push(e.data);
-                        totalSize += e.data.size;
-                        if (totalSize >= maxSizes.audio) {
-                            truncated = true;
-                            stopRecording();
-                        }
-                    });
-
-                    mediaRecorder.addEventListener("stop", async () => {
-                        try {
-                            const data = await new Blob(recordedChunks).arrayBuffer();
-                            if (truncated) {
-                                // let the user know if we stopped recording prematurely
-                                toastStore.showFailureToast(i18nKey("maxAudioSize"));
-                            }
-                            const quantised = await quantiseWaveform(data.slice(0));
-                            onAudioCaptured({
-                                kind: "audio_content",
-                                mimeType: mimeType,
-                                blobData: new Uint8Array(data),
-                                blobUrl: client.dataToBlobUrl(data, mimeType),
-                                ...quantised,
-                            });
-                        } finally {
-                            mediaRecorder = undefined;
-                            stream.getTracks().forEach((track) => track.stop());
-                            activeStream = undefined;
-                        }
-                    });
-
-                    mediaRecorder.start(200);
-                })
-                .catch(() => (supported = false)); //catch the case where the user denies access
-        }
-    }
-</script>
-
-{#if supported}
-    <IconButton padding={"md"} size={"lg"} mode={"primary"} onclick={toggle}>
-        {#snippet icon(color)}
-            {#if activeStream !== undefined}
-                <RadioboxMarked {color} />
-            {:else}
-                <Microphone {color} />
-            {/if}
-        {/snippet}
-    </IconButton>
-{/if}
diff --git a/frontend/app/src/components_mobile/home/AudioContent.svelte b/frontend/app/src/components_mobile/home/AudioContent.svelte
deleted file mode 100644
index 2fb9a3abc1..0000000000
--- a/frontend/app/src/components_mobile/home/AudioContent.svelte
+++ /dev/null
@@ -1,366 +0,0 @@
-<script module lang="ts">
-    let current: WaveSurfer | undefined = undefined;
-    let registry: WaveSurfer[] = [];
-    function register(w: WaveSurfer) {
-        registry.push(w);
-    }
-
-    function playNext(w: WaveSurfer) {
-        for (let i = registry.length - 1; i > 0; i--) {
-            if (registry[i] === w) {
-                registry[i - 1]?.play();
-            }
-        }
-    }
-</script>
-
-<script lang="ts">
-    import { i18nKey } from "@src/i18n/i18n";
-    import { rtlStore } from "@stores/rtl";
-    import {
-        Body,
-        BodySmall,
-        ChatFootnote,
-        ColourVars,
-        Column,
-        Container,
-        IconButton,
-        Row,
-        type ColourVarKeys,
-    } from "component-lib";
-    import type { AudioContent, TextContent as TextContentType } from "@client";
-    import { onMount, type Snippet } from "svelte";
-    import Close from "svelte-material-icons/Close.svelte";
-    import MicrophoneOutline from "svelte-material-icons/MicrophoneOutline.svelte";
-    import Pause from "svelte-material-icons/PauseCircleOutline.svelte";
-    import Play from "svelte-material-icons/PlayCircleOutline.svelte";
-    import WaveSurfer from "wavesurfer.js";
-    import Translatable from "../Translatable.svelte";
-    import TextContent from "./TextContent.svelte";
-
-    interface Props {
-        content: AudioContent;
-        edited: boolean;
-        blockLevelMarkdown?: boolean;
-        onRemove?: () => void;
-        draft?: boolean;
-        me: boolean;
-        reply?: boolean;
-        title?: Snippet;
-    }
-
-    let {
-        content,
-        edited,
-        blockLevelMarkdown = false,
-        onRemove,
-        draft = false,
-        me,
-        reply = false,
-        title,
-    }: Props = $props();
-
-    // TODO this pattern seems to repeat itself for various components, we should find a better way to handle this.
-    let textContent = $derived<TextContentType | undefined>(
-        content.caption ? { kind: "text_content", text: content.caption ?? "" } : undefined,
-    );
-    let hasContent = $derived(!!textContent?.text);
-    let textHighlightColour = $derived<ColourVarKeys>(me ? "secondaryLight" : "primaryLight");
-
-    let currentTime = $state<string>();
-    let waveformDiv: HTMLDivElement | undefined;
-    let playing = $state(false);
-    let duration = $derived(Number(content.durationMs) / 1000);
-    let speed = $state(1);
-
-    function togglePlay() {
-        wavesurfer?.playPause();
-        playing = wavesurfer?.isPlaying() ?? false;
-    }
-
-    const precomputed = $derived(Array.from(content.samples, (s: number) => s / 255));
-
-    let wavesurfer = $state<WaveSurfer>();
-
-    function formatTime(seconds: number) {
-        const minutes = Math.floor(seconds / 60);
-        const secondsRemainder = Math.round(seconds) % 60;
-        const paddedSeconds = `0${secondsRemainder}`.slice(-2);
-        return `${minutes}:${paddedSeconds}`;
-    }
-
-    $effect(() => {
-        wavesurfer?.setPlaybackRate(speed, true);
-    });
-
-    function cycleSpeed() {
-        switch (speed) {
-            case 1:
-                speed = 1.5;
-                break;
-            case 1.5:
-                speed = 2;
-                break;
-            case 2:
-                speed = 1;
-                break;
-            default:
-                speed = 1;
-                break;
-        }
-    }
-
-    function getColor(varName: string): string {
-        const root = document.documentElement;
-        return getComputedStyle(root).getPropertyValue(varName).trim();
-    }
-
-    const textPrimaryColor = getColor("--text-primary");
-    const primaryLightColor = getColor("--primary-light");
-    const secondaryColor = getColor("--secondary");
-
-    onMount(() => {
-        if (waveformDiv !== undefined) {
-            wavesurfer = WaveSurfer.create({
-                height: 42,
-                barHeight: 0.65,
-                width: "100%",
-                container: waveformDiv,
-                waveColor: draft || !me ? textPrimaryColor : primaryLightColor,
-                progressColor: draft || !me ? secondaryColor : textPrimaryColor,
-                barWidth: 3,
-                barRadius: 6,
-                dragToSeek: true,
-                barGap: 4,
-                url: content.blobUrl,
-                peaks: precomputed.length > 0 ? [precomputed] : undefined,
-                duration,
-            });
-
-            wavesurfer.on("interaction", () => {
-                wavesurfer?.play();
-            });
-
-            wavesurfer.on("finish", () => {
-                wavesurfer?.setTime(0);
-                if (wavesurfer) {
-                    playNext(wavesurfer);
-                }
-            });
-
-            wavesurfer.on("timeupdate", (t) => (currentTime = formatTime(t)));
-
-            wavesurfer.on("play", () => {
-                if (wavesurfer !== current) {
-                    current?.pause();
-                    current = wavesurfer;
-                }
-                playing = true;
-            });
-
-            wavesurfer.on("pause", () => (playing = false));
-
-            register(wavesurfer);
-        }
-    });
-</script>
-
-{#snippet togglePlayButton()}
-    {@const color = me && !draft ? ColourVars.textPrimary : ColourVars.textSecondary}
-    <IconButton padding="xs" size={"lg"} onclick={togglePlay} mode={"transparent"}>
-        {#snippet icon()}
-            {#if playing}
-                <Pause {color} />
-            {:else}
-                <Play {color} />
-            {/if}
-        {/snippet}
-    </IconButton>
-{/snippet}
-
-{#snippet remainingTime()}
-    {@const currentColor = me && !draft ? "textPrimary" : "secondary"}
-    {@const durationColor = me && !draft ? "primaryLight" : "textSecondary"}
-    <Container gap={"xxs"} padding={["zero", "sm"]}>
-        <ChatFootnote colour={currentColor} width={"hug"}>
-            {currentTime ?? "0:00"}
-        </ChatFootnote>
-        <ChatFootnote colour={durationColor} width={"hug"}>/</ChatFootnote>
-        <ChatFootnote colour={durationColor} width={"hug"}>
-            {formatTime(duration)}
-        </ChatFootnote>
-    </Container>
-{/snippet}
-
-{#snippet messageTextContent()}
-    {#if textContent?.text}
-        <TextContent
-            content={textContent}
-            {me}
-            {reply}
-            {blockLevelMarkdown}
-            {edited}
-            showPreviews={false}
-            isPreview={draft || reply} />
-    {/if}
-{/snippet}
-
-{#snippet waveformView()}
-    {@const bgColor = hasContent
-        ? me
-            ? ColourVars.primaryMuted
-            : ColourVars.background1
-        : "transparent"}
-    <Row
-        minWidth={"18rem"}
-        width={"fill"}
-        padding={["sm", "xs", hasContent ? "sm" : "xxs", "zero"]}
-        borderRadius={hasContent ? [me ? "lg" : "md", !me ? "lg" : "md", "md", "md"] : "zero"}
-        backgroundColor={bgColor}>
-        <Row width="hug" mainAxisAlignment={"center"}>
-            {@render togglePlayButton()}
-        </Row>
-        <Row width="fill">
-            <Column>
-                <div
-                    bind:this={waveformDiv}
-                    class="waveform"
-                    class:has_content={hasContent}
-                    class:me
-                    class:draft>
-                </div>
-                {@render remainingTime()}
-            </Column>
-        </Row>
-        <Row width="hug" padding={["xs", "zero"]}>
-            <Container
-                backgroundColor={me && !draft ? ColourVars.primaryLight : ColourVars.textTertiary}
-                borderRadius={"xl"}
-                mainAxisAlignment={"center"}
-                onClick={cycleSpeed}
-                gap={"xs"}
-                height="hug"
-                width={{ size: "3rem" }}
-                padding={["xs", "md"]}
-                crossAxisAlignment={"center"}>
-                <Body
-                    width={"hug"}
-                    fontWeight={"bold"}
-                    colour={me && !draft ? "myChatBubble" : "textPrimary"}>
-                    x{speed}
-                </Body>
-            </Container>
-        </Row>
-    </Row>
-{/snippet}
-
-{#if reply}
-    <!-- User is replying to an audio attached message, and this is how reply is rendered -->
-    <Column gap="xxs">
-        {@render title?.()}
-        <Row gap="xs" crossAxisAlignment="center">
-            <MicrophoneOutline
-                size="1rem"
-                color={me ? ColourVars.secondaryLight : ColourVars.primaryLight} />
-            <BodySmall colour={textHighlightColour}>
-                <!-- TODO i18n -->
-                <Translatable resourceKey={i18nKey("Audio message")} /> ({formatTime(duration)})
-            </BodySmall>
-        </Row>
-    </Column>
-{:else if draft}
-    <!-- User is drafting a new message with audio attached, so we render it here -->
-    <Column padding="xs">
-        <Row
-            supplementalClass="audio_draft_contents"
-            padding={["md", "sm", "sm", "sm"]}
-            borderRadius="lg"
-            background={ColourVars.background1}>
-            {@render waveformView()}
-            <div class="close" class:rtl={$rtlStore}>
-                <IconButton size="sm" onclick={onRemove}>
-                    {#snippet icon()}
-                        <Close color={ColourVars.textPrimary} />
-                    {/snippet}
-                </IconButton>
-            </div>
-        </Row>
-    </Column>
-{:else}
-    <!-- Render a message with audio attached -->
-    {@render waveformView()}
-    {@render messageTextContent()}
-{/if}
-
-<style lang="scss">
-    :global {
-        .audio_draft_contents {
-            // TODO apply this to all attachment variants
-            animation: grow-height 300ms ease-out forwards;
-            will-change: max-height, opacity;
-        }
-        .waveform {
-            width: 100%;
-            padding: 0 0.5rem;
-
-            ::part(scroll),
-            ::part(wrapper) {
-                overflow: visible;
-            }
-
-            ::part(cursor) {
-                height: 100%;
-                width: 1rem;
-                background-color: transparent;
-            }
-
-            ::part(cursor):before {
-                content: "";
-                width: 0.75rem;
-                height: 0.75rem;
-                display: block;
-                position: relative;
-                top: 50%;
-                left: -0.5rem;
-                transform: translateY(-50%);
-                border-radius: var(--rad-circle);
-                background-color: var(--secondary);
-                border-width: var(--bw-thick);
-                border-style: solid;
-                border-color: var(--background-1);
-            }
-
-            ::part(region) {
-                width: 0.125rem;
-                background-color: var(--primary);
-            }
-
-            &.me:not(.draft) {
-                ::part(cursor):before {
-                    background-color: var(--text-primary);
-                }
-
-                &.has_content ::part(cursor):before {
-                    border-color: var(--primary-muted);
-                }
-
-                &:not(.has_content) ::part(cursor):before {
-                    border-color: var(--my-chat-bubble);
-                }
-            }
-        }
-    }
-
-    .close {
-        position: absolute;
-        top: -0.25rem;
-
-        &:not(.rtl) {
-            right: -0.25rem;
-        }
-
-        &.rtl {
-            left: -0.25rem;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/BlockedContent.svelte b/frontend/app/src/components_mobile/home/BlockedContent.svelte
deleted file mode 100644
index 66af800553..0000000000
--- a/frontend/app/src/components_mobile/home/BlockedContent.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<svelte:options immutable />
-
-<script lang="ts">
-    import Translatable from "../Translatable.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-</script>
-
-<div class="blocked">
-    <Translatable resourceKey={i18nKey("messageBlocked")} />
-</div>
-
-<style lang="scss">
-    .blocked {
-        @include font(light, italic, fs-80);
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/BotChangedEvent.svelte b/frontend/app/src/components_mobile/home/BotChangedEvent.svelte
deleted file mode 100644
index 36bc32f3d7..0000000000
--- a/frontend/app/src/components_mobile/home/BotChangedEvent.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script lang="ts">
-    import { allUsersStore, botState } from "@client";
-    import type { BotAdded, BotRemoved, BotUpdated } from "@shared";
-    import { _ } from "svelte-i18n";
-    import { buildDisplayName } from "../../utils/user";
-    import NonMessageEvent from "./NonMessageEvent.svelte";
-
-    interface Props {
-        event: BotAdded | BotRemoved | BotUpdated;
-        timestamp: bigint;
-        userId: string;
-        changedBy: string;
-        resourceKey: string;
-    }
-
-    let { event, timestamp, userId, changedBy, resourceKey }: Props = $props();
-    let me = $derived(userId === changedBy);
-    let text = $derived.by(() => {
-        const bot = botState.externalBots.get(event.userId);
-        const username = buildDisplayName($allUsersStore, changedBy, me ? "me" : "user");
-        return $_(resourceKey, { values: { botname: bot?.name, username } });
-    });
-</script>
-
-<NonMessageEvent {text} {timestamp} />
diff --git a/frontend/app/src/components_mobile/home/BotPlaceholderContent.svelte b/frontend/app/src/components_mobile/home/BotPlaceholderContent.svelte
deleted file mode 100644
index d403011eae..0000000000
--- a/frontend/app/src/components_mobile/home/BotPlaceholderContent.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script lang="ts">
-    import Typing from "@shared_components/Typing.svelte";
-</script>
-
-<span class="placeholder">
-    <Typing />
-</span>
-
-<style lang="scss">
-    .placeholder {
-        padding: $sp4 0;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/ChatEvent.svelte b/frontend/app/src/components_mobile/home/ChatEvent.svelte
deleted file mode 100644
index 94affdeeb3..0000000000
--- a/frontend/app/src/components_mobile/home/ChatEvent.svelte
+++ /dev/null
@@ -1,359 +0,0 @@
-<script lang="ts">
-    import { findUser } from "@src/utils/user";
-    import {
-        allUsersStore,
-        currentUserIdStore,
-        currentUserStore,
-        selectedChatWebhooksStore,
-        typing,
-        type ChatEvent,
-        type ChatIdentifier,
-        type ChatType,
-        type EnhancedReplyContext,
-        type EventWrapper,
-        type Level,
-        type Message,
-        type OpenChat,
-        type UserSummary,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { i18nKey, interpolate } from "../../i18n/i18n";
-    import AggregateCommonEvents from "./AggregateCommonEvents.svelte";
-    import BotChangedEvent from "./BotChangedEvent.svelte";
-    import ChatFrozenEvent from "./ChatFrozenEvent.svelte";
-    import ChatMessage from "./ChatMessage.svelte";
-    import ChatUnfrozenEvent from "./ChatUnfrozenEvent.svelte";
-    import DirectChatCreatedEvent from "./DirectChatCreatedEvent.svelte";
-    import DisappearingMessageTimeUpdated from "./DisappearingMessageTimeUpdated.svelte";
-    import GroupChangedEvent from "./GroupChangedEvent.svelte";
-    import GroupChatCreatedEvent from "./GroupChatCreatedEvent.svelte";
-    import GroupInviteCodeChangedEvent from "./GroupInviteCodeChangedEvent.svelte";
-    import GroupRulesChangedEvent from "./GroupRulesChangedEvent.svelte";
-    import GroupVisibilityChangedEvent from "./GroupVisibilityChangedEvent.svelte";
-    import MembersChangedEvent from "./MembersChangedEvent.svelte";
-    import PermissionsChangedEvent from "./PermissionsChangedEvent.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        chatId: ChatIdentifier;
-        chatType: ChatType;
-        event: EventWrapper<ChatEvent>;
-        first: boolean;
-        last: boolean;
-        me: boolean;
-        accepted: boolean;
-        confirmed: boolean;
-        failed: boolean;
-        readByMe: boolean;
-        observer?: IntersectionObserver;
-        focused: boolean;
-        readonly: boolean;
-        pinned: boolean;
-        canPin: boolean;
-        canBlockUsers: boolean;
-        canDelete: boolean;
-        canSendAny: boolean;
-        canReact: boolean;
-        canInvite: boolean;
-        canReplyInThread: boolean;
-        publicGroup: boolean;
-        editing: boolean;
-        supportsEdit: boolean;
-        supportsReply: boolean;
-        collapsed: boolean;
-        threadRootMessage: Message | undefined;
-        onExpandMessage?: (() => void) | undefined;
-        onReplyTo: (replyContext: EnhancedReplyContext) => void;
-        onCollapseMessage: () => void;
-        onGoToMessageIndex: (args: { index: number }) => void;
-        onEditEvent: (ev: EventWrapper<Message>) => void;
-        onRemovePreview: (event: EventWrapper<Message>, url: string) => void;
-    }
-
-    let {
-        chatId,
-        chatType,
-        event,
-        first,
-        last,
-        me,
-        accepted,
-        confirmed,
-        failed,
-        readByMe,
-        observer,
-        focused,
-        readonly,
-        pinned,
-        canPin,
-        canBlockUsers,
-        canDelete,
-        canSendAny,
-        canReact,
-        canInvite,
-        canReplyInThread,
-        publicGroup,
-        supportsEdit,
-        supportsReply,
-        collapsed,
-        threadRootMessage,
-        onExpandMessage = undefined,
-        onReplyTo,
-        onCollapseMessage,
-        onGoToMessageIndex,
-        onEditEvent,
-        onRemovePreview,
-    }: Props = $props();
-
-    let userSummary = $derived<UserSummary>({
-        kind: "user",
-        userId: $currentUserStore.userId,
-        username: $currentUserStore.username,
-        displayName: $currentUserStore.displayName,
-        updated: BigInt(0),
-        suspended: false,
-        diamondStatus: "inactive",
-        chitBalance: 0,
-        streak: 0,
-        maxStreak: 0,
-        isUniquePerson: $currentUserStore.isUniquePerson,
-        totalChitEarned: 0,
-        hideOnlineStatus: false,
-    });
-
-    let levelType = $derived((chatType === "channel" ? "channel" : "group") as Level);
-    let level = $derived($_(`level.${levelType}`).toLowerCase());
-    let messageContext = $derived({
-        chatId,
-        threadRootMessageIndex: threadRootMessage?.messageIndex,
-    });
-    let hidden = $derived(
-        event.event.kind === "message" &&
-            event.event.content.kind === "message_reminder_created_content" &&
-            event.event.content.hidden,
-    );
-
-    function editEvent() {
-        onEditEvent(event as EventWrapper<Message>);
-    }
-
-    function deleteFailedMessage() {
-        if (event.event.kind === "message") {
-            client.deleteFailedMessage(
-                chatId,
-                event.event.messageId,
-                threadRootMessage?.messageIndex,
-            );
-        }
-    }
-
-    function retrySend() {
-        const message = event as EventWrapper<Message>;
-        client.sendMessageWithContent(
-            messageContext,
-            message.event.content,
-            message.event.blockLevelMarkdown,
-            [],
-            message.event.forwarded,
-            message.event.messageId,
-        );
-    }
-
-    let sender = $derived(
-        event.event.kind === "message"
-            ? findUser(event.event.sender, $allUsersStore, $selectedChatWebhooksStore)
-            : undefined,
-    );
-</script>
-
-{#if event.event.kind === "message"}
-    {#if !hidden}
-        <ChatMessage
-            {sender}
-            senderTyping={client.isTyping($typing, event.event.sender, messageContext)}
-            {focused}
-            {observer}
-            {accepted}
-            {confirmed}
-            {failed}
-            {readByMe}
-            {chatId}
-            {chatType}
-            {me}
-            {first}
-            {last}
-            {readonly}
-            {pinned}
-            {canPin}
-            {canBlockUsers}
-            {canDelete}
-            canQuoteReply={canSendAny}
-            {canReact}
-            canStartThread={canReplyInThread}
-            {publicGroup}
-            {threadRootMessage}
-            {supportsEdit}
-            {supportsReply}
-            {collapsed}
-            senderContext={event.event.senderContext}
-            {onGoToMessageIndex}
-            {onReplyTo}
-            onRetrySend={retrySend}
-            onEditMessage={editEvent}
-            {onExpandMessage}
-            {onCollapseMessage}
-            onRemovePreview={(url) => onRemovePreview(event as EventWrapper<Message>, url)}
-            onDeleteFailedMessage={deleteFailedMessage}
-            eventIndex={event.index}
-            timestamp={event.timestamp}
-            expiresAt={event.expiresAt}
-            msg={event.event} />
-    {/if}
-{:else if event.event.kind === "group_chat_created"}
-    <GroupChatCreatedEvent {chatType} event={event.event} {me} timestamp={event.timestamp} />
-{:else if event.event.kind === "direct_chat_created"}
-    <DirectChatCreatedEvent timestamp={event.timestamp} />
-{:else if event.event.kind === "members_added"}
-    <MembersChangedEvent
-        level={levelType}
-        user={userSummary}
-        changed={event.event.userIds}
-        changedBy={event.event.addedBy}
-        resourceKey={"addedBy"}
-        timestamp={event.timestamp} />
-{:else if event.event.kind === "users_invited"}
-    <MembersChangedEvent
-        level={levelType}
-        user={userSummary}
-        changed={event.event.userIds}
-        changedBy={event.event.invitedBy}
-        resourceKey={"invitedBy"}
-        timestamp={event.timestamp} />
-{:else if event.event.kind === "members_removed"}
-    <MembersChangedEvent
-        level={levelType}
-        user={userSummary}
-        changed={event.event.userIds}
-        changedBy={event.event.removedBy}
-        resourceKey={"removedBy"}
-        timestamp={event.timestamp} />
-{:else if event.event.kind === "aggregate_common_events"}
-    <AggregateCommonEvents
-        level={levelType}
-        {observer}
-        {readByMe}
-        user={userSummary}
-        joined={event.event.usersJoined}
-        messagesDeleted={event.event.messagesDeleted}
-        rolesChanged={event.event.rolesChanged} />
-{:else if event.event.kind === "users_blocked"}
-    <MembersChangedEvent
-        level={levelType}
-        user={userSummary}
-        changed={event.event.userIds}
-        changedBy={event.event.blockedBy}
-        resourceKey={"blockedBy"}
-        timestamp={event.timestamp} />
-{:else if event.event.kind === "users_unblocked"}
-    <MembersChangedEvent
-        level={levelType}
-        user={userSummary}
-        changed={event.event.userIds}
-        changedBy={event.event.unblockedBy}
-        resourceKey={"unblockedBy"}
-        timestamp={event.timestamp} />
-{:else if event.event.kind === "name_changed"}
-    <GroupChangedEvent
-        {level}
-        user={userSummary}
-        changedBy={event.event.changedBy}
-        property={interpolate($_, i18nKey("groupName", undefined, levelType, true))}
-        timestamp={event.timestamp} />
-{:else if event.event.kind === "desc_changed"}
-    <GroupChangedEvent
-        {level}
-        user={userSummary}
-        changedBy={event.event.changedBy}
-        property={interpolate($_, i18nKey("groupDesc", undefined, levelType, true))}
-        timestamp={event.timestamp} />
-{:else if event.event.kind === "rules_changed"}
-    <GroupRulesChangedEvent user={userSummary} event={event.event} timestamp={event.timestamp} />
-{:else if event.event.kind === "avatar_changed"}
-    <GroupChangedEvent
-        {level}
-        user={userSummary}
-        changedBy={event.event.changedBy}
-        property={interpolate($_, i18nKey("groupAvatar", undefined, levelType, true))}
-        timestamp={event.timestamp} />
-{:else if event.event.kind === "gate_updated"}
-    <GroupChangedEvent
-        {level}
-        user={userSummary}
-        changedBy={event.event.updatedBy}
-        property={$_("access.gate").toLowerCase()}
-        timestamp={event.timestamp} />
-{:else if event.event.kind === "external_url_updated"}
-    <GroupChangedEvent
-        {level}
-        user={userSummary}
-        changedBy={event.event.updatedBy}
-        property={$_("externalContent.name").toLowerCase()}
-        timestamp={event.timestamp} />
-{:else if event.event.kind === "group_visibility_changed"}
-    <GroupVisibilityChangedEvent
-        level={levelType}
-        user={userSummary}
-        isPublic={event.event.public}
-        messagesVisibleToNonMembers={event.event.messagesVisibleToNonMembers}
-        changedBy={event.event.changedBy}
-        timestamp={event.timestamp} />
-{:else if event.event.kind === "group_invite_code_changed"}
-    {#if canInvite}
-        <GroupInviteCodeChangedEvent
-            user={userSummary}
-            change={event.event.change}
-            changedBy={event.event.changedBy}
-            timestamp={event.timestamp} />
-    {/if}
-{:else if event.event.kind === "permissions_changed"}
-    <PermissionsChangedEvent
-        level={levelType}
-        user={userSummary}
-        event={event.event}
-        timestamp={event.timestamp} />
-{:else if event.event.kind === "events_ttl_updated"}
-    <DisappearingMessageTimeUpdated
-        user={userSummary}
-        changedBy={event.event.updatedBy}
-        newTimeToLive={event.event.newTimeToLive}
-        timestamp={event.timestamp} />
-{:else if event.event.kind === "chat_frozen"}
-    <ChatFrozenEvent user={userSummary} event={event.event} timestamp={event.timestamp} />
-{:else if event.event.kind === "chat_unfrozen"}
-    <ChatUnfrozenEvent user={userSummary} event={event.event} timestamp={event.timestamp} />
-{:else if event.event.kind === "bot_added"}
-    <BotChangedEvent
-        changedBy={event.event.addedBy}
-        resourceKey={"bots.events.add"}
-        event={event.event}
-        userId={$currentUserIdStore}
-        timestamp={event.timestamp} />
-{:else if event.event.kind === "bot_removed"}
-    <BotChangedEvent
-        changedBy={event.event.removedBy}
-        resourceKey={"bots.events.remove"}
-        event={event.event}
-        userId={$currentUserIdStore}
-        timestamp={event.timestamp} />
-{:else if event.event.kind === "bot_updated"}
-    <BotChangedEvent
-        changedBy={event.event.updatedBy}
-        resourceKey={"bots.events.update"}
-        event={event.event}
-        userId={$currentUserIdStore}
-        timestamp={event.timestamp} />
-{:else if !client.isEventKindHidden(event.event.kind, publicGroup && chatType === "channel")}
-    <div>Unexpected event type: {event.event.kind}</div>
-{/if}
diff --git a/frontend/app/src/components_mobile/home/ChatEventList.svelte b/frontend/app/src/components_mobile/home/ChatEventList.svelte
deleted file mode 100644
index 4f2df71715..0000000000
--- a/frontend/app/src/components_mobile/home/ChatEventList.svelte
+++ /dev/null
@@ -1,217 +0,0 @@
-<script lang="ts">
-    import { FloatingButton } from "component-lib";
-    import type {
-        ChatSummary,
-        EventWrapper,
-        Mention,
-        Message,
-        MessageContext,
-    } from "@client";
-    import { type Snippet } from "svelte";
-    import { _ } from "svelte-i18n";
-    import ArrowDown from "svelte-material-icons/ArrowDown.svelte";
-    import ArrowUp from "svelte-material-icons/ArrowUp.svelte";
-    import SharedChatEventList, {
-        type ChatEventListArgs,
-    } from "@shared_components/ChatEventList.svelte";
-    import type { FlatChatItem } from "@shared_components/flatChatItems";
-    import { rtlStore } from "../../stores/rtl";
-    import { pop } from "../../utils/transition";
-    import TimelineDate from "./TimelineDate.svelte";
-
-    interface Props {
-        rootSelector: string;
-        unreadMessages: number;
-        chat: ChatSummary;
-        messagesDiv: HTMLDivElement | undefined;
-        messagesDivHeight: number;
-        initialised: boolean;
-        items: FlatChatItem[];
-        readonly: boolean;
-        firstUnreadMention: Mention | undefined;
-        footer: boolean;
-        threadRootEvent: EventWrapper<Message> | undefined;
-        maintainScroll: boolean;
-        scrollTopButtonEnabled?: boolean;
-        row: Snippet<[FlatChatItem, ChatEventListArgs]>;
-        visible: boolean;
-    }
-
-    let {
-        rootSelector,
-        unreadMessages,
-        chat,
-        messagesDiv = $bindable(),
-        messagesDivHeight = $bindable(),
-        initialised = $bindable(),
-        items,
-        readonly,
-        firstUnreadMention,
-        // footer,
-        threadRootEvent,
-        maintainScroll,
-        scrollTopButtonEnabled = false,
-        row,
-        visible,
-    }: Props = $props();
-
-    let list: SharedChatEventList | undefined = $state();
-    let stickyDateEl: HTMLElement | undefined = $state();
-    let stickyDateElTop = $derived(stickyDateEl?.getBoundingClientRect()?.top);
-    let stickyDateTimestamp = $state<bigint | undefined>(undefined);
-
-    export function scrollToMessageIndex(
-        context: MessageContext,
-        index: number,
-        preserveFocus: boolean,
-    ): Promise<void> {
-        return list?.scrollToMessageIndex(context, index, preserveFocus) ?? Promise.resolve();
-    }
-
-    export function onMessageWindowLoaded(args: {
-        context: MessageContext;
-        messageIndex: number | undefined;
-        initialLoad: boolean;
-    }): Promise<void> {
-        return list?.onMessageWindowLoaded(args) ?? Promise.resolve();
-    }
-</script>
-
-<div class="sticky-date" bind:this={stickyDateEl}>
-    {#if stickyDateTimestamp !== undefined}
-        <TimelineDate timestamp={stickyDateTimestamp} />
-    {/if}
-</div>
-
-<SharedChatEventList
-    bind:this={list}
-    {rootSelector}
-    {chat}
-    {threadRootEvent}
-    {items}
-    {readonly}
-    {maintainScroll}
-    {visible}
-    bind:initialised
-    bind:messagesDiv
-    bind:messagesDivHeight
-    viewportClass={"mobile-event-list"}
-    {stickyDateElTop}
-    bind:stickyDateTimestamp
-    {row}>
-    {#snippet fabs({
-        showGoToTop,
-        showGoToBottom,
-        loadingFromUserScroll,
-        scrollToTop,
-        scrollToLast,
-        scrollToMention,
-    })}
-        <div class="fab_wrapper" class:rtl={$rtlStore}>
-            {#if scrollTopButtonEnabled}
-                <div title={$_("scrollToTop")} class:show={showGoToTop} class="fab to-top">
-                    <FloatingButton variant="secondary" onClick={scrollToTop}>
-                        {#snippet icon(color)}
-                            <ArrowUp {color} />
-                        {/snippet}
-                    </FloatingButton>
-                </div>
-            {/if}
-
-            {#if !readonly}
-                <div
-                    title={$_("goToFirstMention")}
-                    class:show={firstUnreadMention !== undefined}
-                    class="fab mentions">
-                    <FloatingButton
-                        variant="secondary"
-                        onClick={() => scrollToMention(firstUnreadMention)}>
-                        {#snippet icon()}
-                            <div in:pop={{ duration: 1500 }} class="unread">
-                                <div class="mention-count">@</div>
-                            </div>
-                        {/snippet}
-                    </FloatingButton>
-                </div>
-            {/if}
-            <div
-                title={$_("goToLatestMessage")}
-                class:show={showGoToBottom || unreadMessages > 0}
-                class="fab to-bottom">
-                <FloatingButton variant="secondary" onClick={scrollToLast}>
-                    {#snippet icon(color)}
-                        {#if loadingFromUserScroll}
-                            <div class="spinner"></div>
-                        {:else if unreadMessages > 0}
-                            <div in:pop={{ duration: 1500 }} class="unread">
-                                <div class="unread-count">
-                                    {unreadMessages > 999 ? "999+" : unreadMessages}
-                                </div>
-                            </div>
-                        {:else}
-                            <ArrowDown {color} />
-                        {/if}
-                    {/snippet}
-                </FloatingButton>
-            </div>
-        </div>
-    {/snippet}
-</SharedChatEventList>
-
-<style lang="scss">
-    :global(.vcl-viewport.mobile-event-list) {
-        flex: 1 1 0;
-        position: relative;
-        padding: var(--sp-md) var(--sp-lg) 0 var(--sp-lg);
-        gap: var(--sp-xs);
-    }
-
-    .sticky-date {
-        position: absolute;
-        top: 0.375rem;
-        left: 50%;
-        transform: translateX(-50%);
-        @include z-index("date-label");
-    }
-
-    .spinner {
-        @include loading-spinner(1em, 0.5em, var(--button-spinner), "/assets/plain-spinner.svg");
-    }
-
-    .fab_wrapper {
-        display: flex;
-        flex-direction: column;
-        gap: var(--sp-md);
-        position: absolute;
-        bottom: var(--sp-sm);
-        pointer-events: none;
-
-        &:not(.rtl) {
-            right: var(--sp-xl);
-        }
-
-        &.rtl {
-            left: var(--sp-md);
-        }
-    }
-
-    .fab {
-        opacity: 0;
-        transition: opacity ease-in-out 300ms;
-        pointer-events: none;
-        @include z-index("fab");
-
-        &.show {
-            opacity: 1;
-            pointer-events: all;
-        }
-    }
-
-    .mentions .mention-count {
-        @include font(bold, normal, fs-140);
-    }
-
-    .unread {
-        color: var(--primary);
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/ChatFrozenEvent.svelte b/frontend/app/src/components_mobile/home/ChatFrozenEvent.svelte
deleted file mode 100644
index d771a47f5f..0000000000
--- a/frontend/app/src/components_mobile/home/ChatFrozenEvent.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-    import type { UserSummary } from "@client";
-    import { allUsersStore } from "@client";
-    import type { ChatFrozenEvent } from "@shared";
-    import { _ } from "svelte-i18n";
-    import { buildDisplayName } from "../../utils/user";
-    import NonMessageEvent from "./NonMessageEvent.svelte";
-
-    interface Props {
-        event: ChatFrozenEvent;
-        user: UserSummary | undefined;
-        timestamp: bigint;
-    }
-
-    let { event, user, timestamp }: Props = $props();
-
-    let me = $derived(event.frozenBy === user?.userId);
-    let frozenByStr = $derived(
-        buildDisplayName($allUsersStore, event.frozenBy, me ? "me" : "user"),
-    );
-
-    let chatFrozenByText = $derived(
-        $_("chatFrozenBy", {
-            values: {
-                frozenBy: frozenByStr,
-            },
-        }),
-    );
-
-    let text = $derived(
-        event.reason ? `${chatFrozenByText}\n${$_("reason")}: ${event.reason}` : chatFrozenByText,
-    );
-</script>
-
-<NonMessageEvent {text} {timestamp} />
diff --git a/frontend/app/src/components_mobile/home/ChatList.svelte b/frontend/app/src/components_mobile/home/ChatList.svelte
deleted file mode 100644
index 9bafd10da5..0000000000
--- a/frontend/app/src/components_mobile/home/ChatList.svelte
+++ /dev/null
@@ -1,184 +0,0 @@
-<script lang="ts">
-    import { chatListFilterStore } from "@src/stores/settings";
-    import { Container, FloatingButton } from "component-lib";
-    import {
-        allUsersStore,
-        chatIdentifiersEqual,
-        chatIdentifierToString,
-        type ChatListScope,
-        chatListScopesEqual,
-        chatListScopeStore,
-        chatsInitialisedStore,
-        chatSummariesListStore,
-        type ChatSummary as ChatSummaryType,
-        type CombinedUnreadCounts,
-        currentUserIdStore,
-        emptyCombinedUnreadCounts,
-        numberOfThreadsStore,
-        OpenChat,
-        publish,
-        routeForChatIdentifier,
-        selectedChatIdStore,
-        selectedCommunitySummaryStore,
-        unreadCommunityChannelCountsStore,
-        unreadDirectAndGroupCountsStore,
-        unreadFavouriteCountsStore,
-    } from "@client";
-    import { navigate } from "@utils/navigation";
-    import { getContext, tick } from "svelte";
-    import Pencil from "svelte-material-icons/LeadPencil.svelte";
-    import ChatListFilters, { type ChatListFilter } from "./ChatListFilters.svelte";
-    import ChatSummary from "./ChatSummary.svelte";
-    import DirectAndGroupChatsHeader from "./communities/DirectAndGroupChatsHeader.svelte";
-    import FavouriteChatsHeader from "./communities/FavouriteChatsHeader.svelte";
-    import SelectedCommunityHeader from "./communities/SelectedCommunityHeader.svelte";
-    import NoMatchingChats from "./NoMatchingChats.svelte";
-    import ThreadIndicator from "./ThreadIndicator.svelte";
-
-    const client = getContext<OpenChat>("client");
-    const TO_SHOW = 30;
-
-    let previousScope: ChatListScope = $chatListScopeStore;
-    let chatsToShow = $state(TO_SHOW);
-    let rendering = $state(false);
-    function insideBottom() {
-        if (rendering || chatsToShow >= filteredChats.length) return;
-        rendering = true;
-        chatsToShow = Math.min(filteredChats.length, chatsToShow + TO_SHOW / 2);
-        tick().then(() => (rendering = false));
-    }
-
-    $effect(() => {
-        if (!chatListScopesEqual(previousScope, $chatListScopeStore)) {
-            onScopeChanged();
-        }
-    });
-
-    function anythingUnread(unread: CombinedUnreadCounts): boolean {
-        return (
-            unread.chats.muted +
-                unread.chats.unmuted +
-                unread.threads.muted +
-                unread.threads.unmuted >
-            0
-        );
-    }
-
-    function chatSelected({ id }: ChatSummaryType): void {
-        const url = routeForChatIdentifier($chatListScopeStore.kind, id);
-        navigate(url);
-    }
-
-    function onScopeChanged() {
-        previousScope = $chatListScopeStore;
-    }
-
-    let user = $derived($allUsersStore.get($currentUserIdStore));
-    let unreadCounts = $derived.by(() => {
-        switch ($chatListScopeStore.kind) {
-            case "chats": {
-                return $unreadDirectAndGroupCountsStore;
-            }
-            case "favourite": {
-                return $unreadFavouriteCountsStore;
-            }
-            case "community": {
-                return (
-                    $unreadCommunityChannelCountsStore.get($chatListScopeStore.id) ??
-                    emptyCombinedUnreadCounts()
-                );
-            }
-            default:
-                return emptyCombinedUnreadCounts();
-        }
-    });
-    let canMarkAllRead = $derived(anythingUnread(unreadCounts));
-    let allChats = $derived($chatSummariesListStore);
-    let filteredChats = $derived.by(() => {
-        if ($chatListScopeStore.kind !== "chats") return allChats;
-        return allChats.filter((c) => {
-            return (
-                $chatListFilterStore === "all" ||
-                ($chatListFilterStore === "unread" &&
-                    client.unreadMessageCount(c.id, c.latestMessage?.event.messageIndex) > 0) ||
-                ($chatListFilterStore === "direct" && c.kind === "direct_chat") ||
-                ($chatListFilterStore === "groups" && c.kind === "group_chat")
-            );
-        });
-    });
-
-    let chats = $derived(filteredChats.slice(0, chatsToShow));
-
-    function newMessage() {
-        publish("newMessage");
-    }
-</script>
-
-{#if user}
-    {#if $chatListScopeStore.kind === "chats"}
-        <DirectAndGroupChatsHeader {canMarkAllRead} />
-    {:else if $chatListScopeStore.kind === "favourite"}
-        <FavouriteChatsHeader {canMarkAllRead} />
-    {:else if $selectedCommunitySummaryStore && $chatListScopeStore.kind === "community"}
-        <SelectedCommunityHeader community={$selectedCommunitySummaryStore} {canMarkAllRead} />
-    {/if}
-
-    <Container
-        closeMenuOnScroll
-        direction={"vertical"}
-        gap={"sm"}
-        width={"fill"}
-        onInsideEnd={insideBottom}
-        height={"fill"}
-        padding={["lg", "zero", "xxxl"]}>
-        <!-- chat filters -->
-        {#if $chatListScopeStore.kind === "chats"}
-            <ChatListFilters bind:filter={$chatListFilterStore as ChatListFilter} />
-        {/if}
-
-        {#if chats.length === 0 && $chatsInitialisedStore}
-            <NoMatchingChats onReset={() => chatListFilterStore.set("all")} />
-        {:else}
-            <!-- threads -->
-            {#if $numberOfThreadsStore > 0}
-                <ThreadIndicator
-                    onClick={() => publish("showThreads")}
-                    unread={unreadCounts.threads} />
-            {/if}
-
-            <!-- chat list -->
-            <Container
-                supplementalClass={"chat_summary_list"}
-                direction={"vertical"}
-                width={"fill"}
-                height={"hug"}
-                padding={["sm", "zero", "zero"]}>
-                {#each chats as chatSummary (chatIdentifierToString(chatSummary.id))}
-                    <ChatSummary
-                        {chatSummary}
-                        selected={chatIdentifiersEqual($selectedChatIdStore, chatSummary.id)}
-                        visible={!chatSummary.membership.archived}
-                        onChatSelected={chatSelected} />
-                {/each}
-            </Container>
-        {/if}
-    </Container>
-{/if}
-
-{#if $chatListScopeStore.kind === "chats"}
-    <div class="floating">
-        <FloatingButton onClick={newMessage}>
-            {#snippet icon(color)}
-                <Pencil {color}></Pencil>
-            {/snippet}
-        </FloatingButton>
-    </div>
-{/if}
-
-<style lang="scss">
-    .floating {
-        position: absolute;
-        bottom: var(--sp-md);
-        right: var(--sp-md);
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/ChatListSearch.svelte b/frontend/app/src/components_mobile/home/ChatListSearch.svelte
deleted file mode 100644
index 631681368a..0000000000
--- a/frontend/app/src/components_mobile/home/ChatListSearch.svelte
+++ /dev/null
@@ -1,140 +0,0 @@
-<script lang="ts">
-    import { Search } from "component-lib";
-    import {
-        chatListScopeStore,
-        currentUserIdStore,
-        type BotMatch,
-        type ChatListScope,
-        type DirectChatIdentifier,
-        type GroupSearchResponse,
-        type OpenChat,
-        type UserSummary,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { i18nKey, interpolate } from "../../i18n/i18n";
-    import { trimLeadingAtSymbol } from "../../utils/user";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        searchTerm?: string;
-        searchResultsAvailable: boolean;
-        groupSearchResults?: Promise<GroupSearchResponse> | undefined;
-        userAndBotsSearchResults?: Promise<(UserSummary | BotMatch)[]> | undefined;
-    }
-
-    let {
-        searchTerm = $bindable(""),
-        searchResultsAvailable = $bindable(false),
-        groupSearchResults = $bindable(undefined),
-        userAndBotsSearchResults = $bindable(undefined),
-    }: Props = $props();
-
-    searchResultsAvailable;
-
-    let searching: boolean = $state(false);
-
-    $effect(() => {
-        void $chatListScopeStore.kind;
-        clearSearch();
-    });
-
-    function getPlaceholder(scope: ChatListScope["kind"]): string {
-        switch (scope) {
-            case "community":
-                return interpolate($_, i18nKey("searchChannelsPlaceholder"));
-            case "chats":
-                return interpolate($_, i18nKey("search"));
-            case "favourite":
-                return interpolate($_, i18nKey("searchFavouritesPlaceholder"));
-            case "none":
-                return interpolate($_, i18nKey("searchPlaceholder"));
-        }
-    }
-
-    function clearSearch() {
-        searchTerm = "";
-    }
-
-    async function performSearch(term?: string) {
-        if (term === undefined || term === "") return;
-        searchResultsAvailable = false;
-        searchTerm = term;
-
-        searchTerm = trimLeadingAtSymbol(searchTerm);
-
-        if (searchTerm !== "") {
-            try {
-                searching = true;
-                const term = searchTerm.toLowerCase();
-                searchQuery(term);
-            } catch (err) {
-                console.warn("search failed with: ", err);
-                searching = false;
-            } finally {
-                searching = false;
-            }
-        } else {
-            clearSearch();
-        }
-    }
-
-    function postSearch() {
-        if (searchTerm !== "") {
-            searchResultsAvailable = true;
-        } else {
-            clearSearch();
-        }
-    }
-
-    function sortUsersOrBots(_a: UserSummary | BotMatch, _b: UserSummary | BotMatch): number {
-        return 0;
-    }
-
-    function searchBots(term: string): Promise<BotMatch[]> {
-        // This location is rather hacky because we can't have a direct chat with ourselves
-        // but it signals to the explore_bots endpoint that we want to see bots that are
-        // available for direct chat.
-        const location = {
-            kind: "direct_chat",
-            userId: $currentUserIdStore,
-        } as DirectChatIdentifier;
-
-        return client.exploreBots(term, 0, 10, location, false).then((result) => {
-            return result.kind === "success" ? result.matches : [];
-        });
-    }
-
-    function searchUsers(term: string): Promise<UserSummary[]> {
-        return client.searchUsers(term, 10);
-    }
-
-    async function searchQuery(term: string) {
-        groupSearchResults = client.searchGroups(term, 10).then((res) => {
-            console.log(res);
-            return res;
-        });
-        userAndBotsSearchResults = Promise.all([searchUsers(term), searchBots(term)]).then(
-            ([users, bots]) => [...users, ...bots].sort(sortUsersOrBots),
-        );
-        Promise.all([groupSearchResults, userAndBotsSearchResults]).then(postSearch);
-    }
-    let placeholder = $derived(getPlaceholder($chatListScopeStore.kind));
-
-    $effect(() => {
-        if (searchTerm === "") {
-            searching = false;
-            searchResultsAvailable = false;
-            groupSearchResults = undefined;
-            userAndBotsSearchResults = undefined;
-        }
-    });
-</script>
-
-<Search
-    onClear={() => (searchTerm = "")}
-    {placeholder}
-    {searching}
-    value={searchTerm}
-    onSearch={performSearch} />
diff --git a/frontend/app/src/components_mobile/home/ChatMessage.svelte b/frontend/app/src/components_mobile/home/ChatMessage.svelte
deleted file mode 100644
index bc2255815e..0000000000
--- a/frontend/app/src/components_mobile/home/ChatMessage.svelte
+++ /dev/null
@@ -1,872 +0,0 @@
-<script lang="ts">
-    import { navigate } from "@utils/navigation";
-    import { confirmMessageDeletion } from "@src/stores/settings";
-    import { trackedEffect } from "@src/utils/effects.svelte";
-    import { keyboard } from "@stores/keyboard.svelte";
-    import { popHistoryStateWithAction, pushDummyHistoryState } from "@utils/history";
-    import type { ProfileLinkClickedEvent } from "@webcomponents/profileLink";
-    import {
-        Avatar,
-        Column,
-        Container,
-        MenuTrigger,
-        type PanDirection,
-        Sheet,
-    } from "component-lib";
-    import {
-        type ChatIdentifier,
-        chatListScopeStore,
-        type ChatType,
-        currentUserIdStore,
-        currentUserStore,
-        type EnhancedReplyContext,
-        localUpdates,
-        type Message,
-        type MessageReminderCreatedContent,
-        OpenChat,
-        publish,
-        routeForMessage,
-        screenWidth,
-        ScreenWidth,
-        selectedChatBlockedUsersStore,
-        type SelectedEmoji,
-        type SenderContext,
-        translationsStore,
-        unconfirmedReadByThem,
-        undeletingMessagesStore,
-        type UserSummary,
-    } from "@client";
-    import { getContext, onDestroy, onMount, tick } from "svelte";
-    import Reply from "svelte-material-icons/Reply.svelte";
-    import ShareOutline from "svelte-material-icons/ShareOutline.svelte";
-    import SquareEditOutline from "svelte-material-icons/SquareEditOutline.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { quickReactions } from "../../stores/quickReactions";
-    import { scrollStatus } from "../../stores/scroll.svelte";
-    import { now } from "../../stores/time";
-    import { toastStore } from "../../stores/toast";
-    import { canShareMessage } from "../../utils/share";
-    import { removeQueryStringParam } from "../../utils/urls";
-    import AreYouSure from "../AreYouSure.svelte";
-    import BotMessageContext from "../bots/BotMessageContext.svelte";
-    import BotProfile, { type BotProfileProps } from "../bots/BotProfile.svelte";
-    import Checkbox from "../Checkbox.svelte";
-    import Translatable from "../Translatable.svelte";
-    import ChatMessageContent from "./ChatMessageContent.svelte";
-    import ChatMessageMenu from "./ChatMessageMenu.svelte";
-    import ChatMessageOptions from "./ChatMessageOptions.svelte";
-    import EmojiPicker from "./EmojiPickerWrapper.svelte";
-    import IntersectionObserverComponent from "./IntersectionObserver.svelte";
-    import MessageBubble from "./message/MessageBubble.svelte";
-    import Reactions from "./message/Reactions.svelte";
-    import ThreadSummary from "./message/ThreadSummary.svelte";
-    import Tips from "./message/Tips.svelte";
-    import ReminderBuilder from "./ReminderBuilder.svelte";
-    import RepliesTo from "./RepliesTo.svelte";
-    import ReportMessage from "./ReportMessage.svelte";
-    import TipBuilder from "./TipBuilder.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        chatId: ChatIdentifier;
-        chatType: ChatType;
-        sender: UserSummary | undefined;
-        msg: Message;
-        me: boolean;
-        eventIndex: number;
-        timestamp: bigint;
-        expiresAt: number | undefined;
-        first: boolean;
-        last: boolean;
-        accepted: boolean;
-        confirmed: boolean;
-        failed: boolean;
-        readByMe: boolean;
-        observer?: IntersectionObserver;
-        focused: boolean;
-        readonly: boolean;
-        pinned: boolean;
-        canPin: boolean;
-        canBlockUsers: boolean;
-        canDelete: boolean;
-        canQuoteReply: boolean;
-        canReact: boolean;
-        publicGroup: boolean;
-        canStartThread: boolean;
-        senderTyping: boolean;
-        dateFormatter?: (date: Date) => string;
-        collapsed?: boolean;
-        threadRootMessage: Message | undefined;
-        senderContext: SenderContext | undefined;
-        onExpandMessage?: (() => void) | undefined;
-        // this is not to do with permission - some messages (namely thread root messages) will simply not support replying or editing inside a thread
-        supportsEdit: boolean;
-        supportsReply: boolean;
-        disablePan?: boolean;
-        onReplyTo?: (replyContext: EnhancedReplyContext) => void;
-        onEditMessage?: () => void;
-        onCollapseMessage?: () => void;
-        onRetrySend?: () => void;
-        onDeleteFailedMessage?: () => void;
-        onRemovePreview?: (url: string) => void;
-        onGoToMessageIndex?: (args: { index: number }) => void;
-    }
-
-    let {
-        chatId,
-        chatType,
-        sender,
-        msg,
-        me,
-        eventIndex,
-        timestamp,
-        expiresAt,
-        first,
-        last,
-        accepted,
-        confirmed,
-        failed,
-        readByMe,
-        observer,
-        focused,
-        readonly,
-        pinned,
-        canPin,
-        canBlockUsers,
-        canDelete,
-        canQuoteReply,
-        canReact,
-        publicGroup,
-        canStartThread,
-        senderTyping,
-        collapsed = false,
-        threadRootMessage,
-        senderContext,
-        onExpandMessage = undefined,
-        supportsEdit,
-        supportsReply,
-        disablePan = false,
-        onReplyTo,
-        onEditMessage,
-        onCollapseMessage,
-        onRetrySend,
-        onDeleteFailedMessage,
-        onRemovePreview,
-        onGoToMessageIndex,
-    }: Props = $props();
-
-    let msgElement: HTMLElement | undefined;
-    let msgBubbleElement: HTMLElement | undefined;
-
-    let multiUserChat = chatType === "group_chat" || chatType === "channel";
-    let showEmojiPicker = $state(false);
-    let debug = false;
-    let showRemindMe = $state(false);
-    let showReport = $state(false);
-    let tipping: string | undefined = $state(undefined);
-    let percentageExpired = $state(100);
-    let botProfile: BotProfileProps | undefined = $state(undefined);
-    let confirmedReadByThem = $derived(client.messageIsReadByThem(chatId, msg.messageIndex));
-    let readByThem = $derived(confirmedReadByThem || $unconfirmedReadByThem.has(msg.messageId));
-    let contentWidth = $state<number>();
-
-    trackedEffect("read-by-them", () => {
-        if (confirmedReadByThem && $unconfirmedReadByThem.has(msg.messageId)) {
-            unconfirmedReadByThem.delete(msg.messageId);
-        }
-    });
-
-    onMount(() => {
-        if (!readByMe) {
-            tick().then(() => {
-                if (observer !== undefined && msgElement !== undefined) {
-                    try {
-                        observer.observe(msgElement);
-                    } catch {}
-                }
-            });
-        }
-
-        if (expiresAt !== undefined) {
-            return now.subscribe((t) => {
-                const ttl = expiresAt ? expiresAt - Number(timestamp) : 0;
-                const age = t - Number(timestamp);
-                const expired = age > ttl;
-                percentageExpired = expired ? 100 : (age / ttl) * 100;
-                // if this message is the root of a thread, make sure that we close that thread when the message expires
-                if (percentageExpired >= 100 && msg.thread) {
-                    client.filterRightPanelHistory(
-                        (panel) => panel.kind !== "message_thread_panel",
-                    );
-                    navigate(removeQueryStringParam("open"));
-                }
-            });
-        }
-    });
-
-    onDestroy(() => {
-        if (msgElement) {
-            observer?.unobserve(msgElement);
-        }
-    });
-
-    function createReplyContext(): EnhancedReplyContext {
-        return {
-            kind: "rehydrated_reply_context",
-            senderId: msg.sender,
-            eventIndex: eventIndex,
-            content: msg.content,
-            sender,
-            messageId: msg.messageId,
-            messageIndex: msg.messageIndex,
-            edited: msg.edited,
-            isThreadRoot: msg.thread !== undefined,
-            sourceContext: messageContext,
-        };
-    }
-
-    function reply() {
-        if (canQuoteReply) {
-            onReplyTo?.(createReplyContext());
-        }
-    }
-
-    function replyPrivately() {
-        publish("replyPrivatelyTo", createReplyContext());
-    }
-
-    function cancelReminder(content: MessageReminderCreatedContent) {
-        client
-            .cancelMessageReminder(msg.messageId, { ...content, hidden: true })
-            .then((success) => {
-                if (success) {
-                    toastStore.showSuccessToast(i18nKey("reminders.cancelSuccess"));
-                } else {
-                    toastStore.showFailureToast(i18nKey("reminders.cancelFailure"));
-                }
-            });
-    }
-
-    function editMessage() {
-        if (canEdit) {
-            onEditMessage?.();
-        }
-    }
-
-    function tipMessage(ledger: string) {
-        tipping = ledger;
-    }
-
-    function selectReaction(selected: SelectedEmoji) {
-        if (selected.kind === "native") {
-            toggleReaction(false, selected.unicode);
-        } else {
-            toggleReaction(false, `@CE(${selected.code})`);
-        }
-    }
-
-    function selectQuickReaction(unicode: string) {
-        toggleReaction(true, unicode);
-    }
-
-    function toggleReaction(isQuickReaction: boolean, reaction: string) {
-        if (canReact) {
-            const kind = client.containsReaction($currentUserIdStore, reaction, msg.reactions)
-                ? "remove"
-                : "add";
-
-            client
-                .selectReaction(
-                    chatId,
-                    $currentUserIdStore,
-                    threadRootMessageIndex,
-                    msg.messageId,
-                    reaction,
-                    $currentUserStore.username,
-                    $currentUserStore.displayName,
-                    kind,
-                )
-                .then((success) => {
-                    if (success && kind === "add") {
-                        client.trackEvent("reacted_to_message");
-
-                        if (isQuickReaction) {
-                            // Note: Manually selected reactions do not increment
-                            // their fav counter by default, so we do it manually.
-                            // Also refresh loaded reactions.
-                            quickReactions.incrementFavourite(reaction);
-                        }
-
-                        quickReactions.reload();
-                    }
-                });
-        }
-        showEmojiPicker = false;
-        popHistoryStateWithAction("emoji_picker_action");
-    }
-
-
-    function openUserProfile(ev?: Event) {
-        if (sender?.kind === "bot") {
-            botProfile = {
-                botId: sender.userId,
-                chatId,
-                onClose: () => (botProfile = undefined),
-            };
-        } else {
-            ev?.target?.dispatchEvent(
-                new CustomEvent<ProfileLinkClickedEvent>("profile-clicked", {
-                    detail: {
-                        userId: msg.sender,
-                        chatButton: multiUserChat,
-                        inGlobalContext: false,
-                    },
-                    bubbles: true,
-                }),
-            );
-        }
-    }
-
-    function onRegisterVote(detail: { answerIndex: number; type: "register" | "delete" }) {
-        if (chatId.kind === "direct_chat") return;
-
-        client
-            .registerPollVote(
-                chatId,
-                threadRootMessageIndex,
-                msg.messageId,
-                msg.messageIndex,
-                detail.answerIndex,
-                detail.type,
-            )
-            .then((success) => {
-                if (!success) {
-                    toastStore.showFailureToast(i18nKey("poll.voteFailed"));
-                }
-            });
-    }
-
-    function reportMessage() {
-        showReport = true;
-    }
-
-    function remindMe() {
-        showRemindMe = true;
-    }
-
-    let inert = $derived(
-        msg.content.kind === "deleted_content" ||
-            msg.content.kind === "blocked_content" ||
-            collapsed,
-    );
-    let canTip = $derived(!me && confirmed && !inert && !failed);
-    let inThread = $derived(threadRootMessage !== undefined);
-    let scrollingId = $derived(
-        inThread ? "scrollable-list-thread-messages" : "scrollable-list-chat-messages",
-    );
-    let threadRootMessageIndex = $derived(
-        threadRootMessage?.messageId === msg.messageId
-            ? undefined
-            : threadRootMessage?.messageIndex,
-    );
-    let fill = $derived(client.fillMessage(msg));
-    let showAvatar = $derived(
-        chatType !== "direct_chat" && !me && $screenWidth !== ScreenWidth.ExtraExtraSmall,
-    );
-    let translated = $derived($translationsStore.has(msg.messageId));
-    let threadSummary = $derived(msg.thread);
-    let msgUrl = $derived(
-        `${routeForMessage($chatListScopeStore.kind, { chatId }, msg.messageIndex)}?open=true`,
-    );
-    let isProposal = $derived(msg.content.kind === "proposal_content");
-    let canEdit = $derived(
-        me && supportsEdit && !msg.deleted && client.contentTypeSupportsEdit(msg.content.kind),
-    );
-    let undeleting = $derived($undeletingMessagesStore.has(msg.messageId));
-    let deletedByMe = $derived(
-        msg.content.kind === "deleted_content" && msg.content.deletedBy == $currentUserIdStore,
-    );
-    let permanentlyDeleted = $derived(
-        deletedByMe &&
-            me &&
-            msg.content.kind === "deleted_content" &&
-            Number(msg.content.timestamp) < $now - 5 * 60 * 1000,
-    );
-    let canRevealDeleted = $derived(deletedByMe && !undeleting && !permanentlyDeleted);
-    let canRevealBlocked = $derived(msg.content.kind === "blocked_content");
-    let messageContext = $derived({ chatId, threadRootMessageIndex });
-    let ephemeral = $derived(localUpdates.isEphemeral(messageContext, msg.messageId));
-    let showChatMenu = $derived(
-        (!inert || canRevealDeleted || canRevealBlocked) && !readonly && !ephemeral,
-    );
-    let canUndelete = $derived(msg.deleted && msg.content.kind !== "deleted_content");
-    let tips = $derived(msg.tips ? Object.entries(msg.tips) : []);
-    let canBlockUser = $derived(canBlockUsers && !$selectedChatBlockedUsersStore.has(msg.sender));
-    let edited = $derived(
-        msg.edited && (senderContext?.kind !== "bot" || !senderContext.finalised),
-    );
-    let canShare = $derived(canShareMessage(msg.content));
-    let canForward = $derived(client.canForward(msg.content));
-    let canTranslate = $derived((client.getMessageText(msg.content) ?? "").length > 0);
-    let canDeleteMessage = $derived(
-        (canDelete || me) &&
-            !inert &&
-            !(msg.content.kind === "video_call_content" && msg.content.ended === undefined),
-    );
-    let showConfirmDelete = $state(false);
-
-    let longpressCooldown = $derived(scrollStatus.isCooldown);
-
-    async function deleteMessage(deletionConfirmed: boolean) {
-        if (failed) {
-            onDeleteFailedMessage?.();
-            return;
-        }
-        if (!canDeleteMessage) return;
-
-        if (!deletionConfirmed) {
-            showConfirmDelete = !showConfirmDelete;
-            return;
-        }
-
-        showConfirmDelete = false;
-        await client.deleteMessage(chatId, threadRootMessageIndex, msg.messageId);
-    }
-
-    let isSheetMenuOpen = $state(false);
-
-    function openSheetMenu() {
-        isSheetMenuOpen = true;
-    }
-
-    let panDirection = $state();
-    let panFactor = $state(0);
-
-    function forward() {
-        window.setTimeout(() => publish("forward", msg), 250);
-    }
-
-    function onPanCommit(direction: PanDirection) {
-        if (me && direction === "left") editMessage();
-        if (!me && direction === "left") forward();
-        else reply();
-    }
-
-    function onPanMove(direction: PanDirection, factor: number) {
-        panDirection = direction;
-        panFactor = factor;
-    }
-</script>
-
-{#if botProfile !== undefined}
-    <BotProfile {...botProfile} />
-{/if}
-
-{#if tipping !== undefined}
-    <TipBuilder ledger={tipping} onClose={() => (tipping = undefined)} {msg} {messageContext} />
-{/if}
-
-{#if showConfirmDelete}
-    <AreYouSure action={deleteMessage} dismiss={() => (showConfirmDelete = false)}>
-        <Container gap={"lg"} direction={"vertical"}>
-            <Translatable resourceKey={i18nKey("deleteMessageConfirm")}></Translatable>
-            <Checkbox
-                id="dont_show"
-                label={i18nKey("install.dontShow")}
-                checked={!$confirmMessageDeletion}
-                onChange={confirmMessageDeletion.toggle}>
-            </Checkbox>
-        </Container>
-    </AreYouSure>
-{/if}
-
-{#if showEmojiPicker && canReact}
-    <Sheet
-        onDismiss={() => {
-            showEmojiPicker = false;
-            popHistoryStateWithAction("emoji_picker_action");
-        }}>
-        <div
-            class="emoji_picker_wrapper"
-            style:padding-bottom={keyboard.visible ? `${keyboard.currentHeight - 64}px` : "0"}>
-            <Column height="fill" overflow="auto" minHeight={keyboard.visible ? "35vh" : "50vh"}>
-                <EmojiPicker
-                    onEmojiSelected={selectReaction}
-                    onSkintoneChanged={(tone) => quickReactions.reload(tone)}
-                    supportCustom={true}
-                    mode={"reaction"} />
-            </Column>
-        </div>
-    </Sheet>
-{/if}
-
-{#if isSheetMenuOpen}
-    <Sheet onDismiss={() => (isSheetMenuOpen = false)}>
-        <Column gap="sm" padding={["lg", "lg", "xxl", "lg"]} maxHeight="70vh">
-            <ChatMessageOptions
-                menuType="menu_items"
-                {chatId}
-                {isProposal}
-                {inert}
-                {publicGroup}
-                {confirmed}
-                {failed}
-                {canShare}
-                {me}
-                {canPin}
-                {canTip}
-                {pinned}
-                {supportsReply}
-                {canQuoteReply}
-                {canStartThread}
-                {multiUserChat}
-                {threadRootMessage}
-                {msg}
-                {canForward}
-                {canBlockUser}
-                {canEdit}
-                {canDelete}
-                {canUndelete}
-                {canRevealDeleted}
-                {canRevealBlocked}
-                translatable={canTranslate}
-                {translated}
-                {onCollapseMessage}
-                onReply={reply}
-                {onRetrySend}
-                onReplyPrivately={replyPrivately}
-                onEditMessage={editMessage}
-                onTipMessage={tipMessage}
-                onReportMessage={reportMessage}
-                onCancelReminder={cancelReminder}
-                onDeleteMessage={deleteMessage}
-                onRemindMe={remindMe}
-                {onDeleteFailedMessage}
-                onOptionSelected={() => (isSheetMenuOpen = false)} />
-        </Column>
-    </Sheet>
-{/if}
-
-{#if showRemindMe}
-    <ReminderBuilder
-        {chatId}
-        {eventIndex}
-        {threadRootMessageIndex}
-        onClose={() => (showRemindMe = false)} />
-{/if}
-
-{#if showReport}
-    <ReportMessage
-        {threadRootMessageIndex}
-        messageId={msg.messageId}
-        {chatId}
-        {canDelete}
-        onClose={() => (showReport = false)} />
-{/if}
-
-{#if debug}
-    <pre>Sender: {msg.sender}</pre>
-    <pre>EventIdx: {eventIndex}</pre>
-    <pre>MsgIdx: {msg.messageIndex}</pre>
-    <pre>MsgId: {msg.messageId}</pre>
-    <pre>Confirmed: {confirmed}</pre>
-    <pre>ReadByThem: {readByThem}</pre>
-    <pre>ReadByUs: {readByMe}</pre>
-    <pre>Pinned: {pinned}</pre>
-    <pre>edited: {msg.edited}</pre>
-    <pre>failed: {failed}</pre>
-    <pre>timestamp: {timestamp}</pre>
-    <pre>expiresAt: {expiresAt}</pre>
-    <pre>thread: {JSON.stringify(msg.thread, null, 4)}</pre>
-    <pre>senderContext: {JSON.stringify(senderContext, null, 4)}</pre>
-    <pre>inert: {inert}</pre>
-    <pre>canRevealDeleted: {canRevealDeleted}</pre>
-    <pre>canlRevealBlocked: {canRevealBlocked}</pre>
-    <pre>readonly: {readonly}</pre>
-    <pre>showChatMenu: {showChatMenu}</pre>
-    <pre>ephemeral: {ephemeral}</pre>
-{/if}
-
-{#if expiresAt === undefined || percentageExpired < 100}
-    <IntersectionObserverComponent>
-        {#snippet children(intersecting)}
-            <Container
-                data_index={failed ? "" : `${msg.messageIndex}`}
-                data_id={failed ? "" : `${msg.messageId}`}
-                id={failed ? "" : `event-${eventIndex}`}
-                bind:ref={msgElement}
-                padding={last ? ["zero", "zero", "sm", "zero"] : "zero"}
-                gap={"sm"}
-                overflow={"visible"}
-                mainAxisAlignment={me ? "end" : "start"}
-                pan={msg.deleted || disablePan || msg.content.kind === "proposal_content"
-                    ? undefined
-                    : {
-                          oncommit: onPanCommit,
-                          onmove: onPanMove,
-                          isScrolling: scrollStatus.isScrolling || scrollStatus.isCooldown,
-                      }}>
-                {#if showAvatar}
-                    <div class:first class="avatar">
-                        <Avatar
-                            onClick={openUserProfile}
-                            url={client.userAvatarUrl(sender)}
-                            size={"sm"}></Avatar>
-                    </div>
-                {/if}
-                {@const hasThread = threadSummary !== undefined && !inThread}
-                {@const hasReactions = msg.reactions.length > 0}
-                {@const hasTips = tips.length > 0}
-                <Container
-                    supplementalClass={"message_bubble_wrapper"}
-                    overflow={"visible"}
-                    crossAxisAlignment={me ? "end" : "start"}
-                    width={"hug"}
-                    maxWidth={chatId.kind === "direct_chat" ? "78vw" : "75vw"}
-                    gap={"xxs"}
-                    minWidth={"6rem"}
-                    direction={"vertical"}>
-                    {#if panDirection}
-                        <div
-                            class={`pan-action ${panDirection}`}
-                            class:active={panFactor >= 1}
-                            style:opacity={panFactor}>
-                            {#if me && canEdit && panDirection === "left"}
-                                <SquareEditOutline size="1.5rem" />
-                            {:else if !me && canShare && panDirection === "left"}
-                                <ShareOutline size="1.5rem" />
-                            {:else}
-                                <Reply size="1.5rem" />
-                            {/if}
-                        </div>
-                    {/if}
-                    <MenuTrigger
-                        constrainMask={scrollingId}
-                        maskUI
-                        disabled={!showChatMenu || !intersecting}
-                        mobileMode="longpress"
-                        longpressAnimation="scale"
-                        position="bottom"
-                        customContent={true}
-                        {longpressCooldown}>
-                        {#snippet menuItems()}
-                            {#if showChatMenu && intersecting}
-                                <ChatMessageMenu
-                                    menuType="icon_buttons"
-                                    {chatId}
-                                    {isProposal}
-                                    {inert}
-                                    {publicGroup}
-                                    {confirmed}
-                                    {failed}
-                                    {canShare}
-                                    deleted={msg.deleted}
-                                    {me}
-                                    {canReact}
-                                    {canPin}
-                                    {canTip}
-                                    {pinned}
-                                    {supportsReply}
-                                    {canQuoteReply}
-                                    {canStartThread}
-                                    {multiUserChat}
-                                    {threadRootMessage}
-                                    {msg}
-                                    {canForward}
-                                    {canBlockUser}
-                                    {canEdit}
-                                    {selectQuickReaction}
-                                    {canDelete}
-                                    {canUndelete}
-                                    {canRevealDeleted}
-                                    {canRevealBlocked}
-                                    translatable={canTranslate}
-                                    {translated}
-                                    {onCollapseMessage}
-                                    showEmojiPicker={() => {
-                                        showEmojiPicker = true;
-                                        pushDummyHistoryState("emoji_picker_action");
-                                    }}
-                                    onReply={reply}
-                                    {onRetrySend}
-                                    onReplyPrivately={replyPrivately}
-                                    onEditMessage={editMessage}
-                                    onTipMessage={tipMessage}
-                                    onReportMessage={reportMessage}
-                                    onCancelReminder={cancelReminder}
-                                    onDeleteMessage={deleteMessage}
-                                    onRemindMe={remindMe}
-                                    onOpenSheetMenu={openSheetMenu}
-                                    {onDeleteFailedMessage} />
-                            {/if}
-                        {/snippet}
-                        <MessageBubble
-                            {chatId}
-                            {focused}
-                            {senderTyping}
-                            {senderContext}
-                            {sender}
-                            bind:ref={msgBubbleElement}
-                            onOpenUserProfile={openUserProfile}
-                            {msg}
-                            {fill}
-                            {first}
-                            {last}
-                            {hasThread}
-                            time={Number(timestamp)}
-                            {pinned}
-                            {expiresAt}
-                            {percentageExpired}
-                            bot={sender?.kind === "bot"}
-                            {accepted}
-                            {failed}
-                            {undeleting}
-                            {readByThem}
-                            {readByMe}
-                            {onGoToMessageIndex}
-                            {chatType}>
-                            {#snippet repliesTo(reply)}
-                                <RepliesTo
-                                    {contentWidth}
-                                    {readonly}
-                                    {chatId}
-                                    {intersecting}
-                                    repliesTo={reply} />
-                            {/snippet}
-
-                            {#snippet messageContent(me)}
-                                <ChatMessageContent
-                                    bind:contentWidth
-                                    senderId={msg.sender}
-                                    {readonly}
-                                    {fill}
-                                    {me}
-                                    {messageContext}
-                                    {collapsed}
-                                    {undeleting}
-                                    {intersecting}
-                                    {failed}
-                                    {timestamp}
-                                    messageIndex={msg.messageIndex}
-                                    messageId={msg.messageId}
-                                    content={msg.content}
-                                    {edited}
-                                    blockLevelMarkdown={msg.blockLevelMarkdown}
-                                    {onRemovePreview}
-                                    {onRegisterVote}
-                                    {onExpandMessage}
-                                    ogPreviews={msg.ogPreviews}
-                                    messagePreviews={msg.messagePreviews} />
-                            {/snippet}
-                        </MessageBubble>
-                    </MenuTrigger>
-                    {#if hasThread}
-                        <ThreadSummary
-                            url={msgUrl}
-                            {threadSummary}
-                            {chatId}
-                            threadRootMessageIndex={msg.messageIndex}
-                            {me} />
-                    {/if}
-                    {#if hasReactions}
-                        <Reactions
-                            {me}
-                            onClick={({ reaction }) => toggleReaction(false, reaction)}
-                            {intersecting}
-                            reactions={msg.reactions}
-                            offset={!hasThread}></Reactions>
-                    {/if}
-                    {#if hasTips && !inert}
-                        <Tips
-                            {me}
-                            tips={msg.tips}
-                            onClick={tipMessage}
-                            {canTip}
-                            offset={!hasThread} />
-                    {/if}
-                </Container>
-            </Container>
-        {/snippet}
-    </IntersectionObserverComponent>
-    {#if senderContext?.kind === "bot" && senderContext.command !== undefined}
-        <div class="bot-context">
-            <BotMessageContext
-                botName={"cockpiss"}
-                botCommand={senderContext.command}
-                finalised={senderContext.finalised} />
-        </div>
-    {/if}
-{/if}
-
-<style lang="scss">
-    $avatar-width-mob: 2.5rem;
-
-    :global(.container.message_bubble_wrapper .menu-trigger) {
-        width: 100%;
-    }
-
-    .avatar:not(.first) {
-        visibility: hidden;
-    }
-
-    // TODO is this used at all?
-    .emoji-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: $sp3 $sp4;
-        background-color: var(--section-bg);
-    }
-
-    .bot-context {
-        display: flex;
-        margin-inline-start: $avatar-width-mob;
-        margin-bottom: $sp2;
-        margin-top: $sp2;
-    }
-
-    :global(.pan-action svg) {
-        transition: scale 200ms ease-out;
-    }
-
-    :global(.pan-action.active svg) {
-        scale: 1.25;
-    }
-
-    :global(.pan-action path) {
-        fill: var(--text-secondary);
-        transition: fill 200ms ease-out;
-    }
-
-    :global(.pan-action.active path) {
-        fill: var(--primary-light);
-    }
-
-    .pan-action {
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        width: 3rem;
-        height: 3rem;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        &.right {
-            left: -4rem;
-        }
-
-        &.left {
-            right: -4rem;
-        }
-    }
-
-    .emoji_picker_wrapper {
-        flex: 1;
-        width: 100%;
-        display: flex;
-        overflow: hidden;
-        flex-direction: column;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/ChatMessageContent.svelte b/frontend/app/src/components_mobile/home/ChatMessageContent.svelte
deleted file mode 100644
index f0ad1bc403..0000000000
--- a/frontend/app/src/components_mobile/home/ChatMessageContent.svelte
+++ /dev/null
@@ -1,196 +0,0 @@
-<script lang="ts">
-    import type { MessageContent, MessageContext, OgPreview, RehydratedMessagePreview } from "@client";
-    import { i18nKey } from "../../i18n/i18n";
-    import AudioContent from "./AudioContent.svelte";
-    import BlockedContent from "./BlockedContent.svelte";
-    import BotPlaceholderContent from "./BotPlaceholderContent.svelte";
-    import CryptoContent from "./CryptoContent.svelte";
-    import DeletedContent from "./DeletedContent.svelte";
-    import FileContent from "./FileContent.svelte";
-    import GiphyContent from "./GiphyContent.svelte";
-    import ImageContent from "./ImageContent.svelte";
-    import MessageContentInitial from "./MessageContentInitial.svelte";
-    import MessageReminderContent from "./MessageReminderContent.svelte";
-    import MessageReminderCreatedContent from "./MessageReminderCreatedContent.svelte";
-    import P2PSwapContent from "./P2PSwapContent.svelte";
-    import PlaceholderContent from "./PlaceholderContent.svelte";
-    import PollContent from "./PollContent.svelte";
-    import PrizeContent from "./PrizeContent.svelte";
-    import PrizeWinnerContent from "./PrizeWinnerContent.svelte";
-    import ProposalContent from "./proposals/ProposalContent.svelte";
-    import ReportedMessageContent from "./ReportedMessageContent.svelte";
-    import TextContent from "./TextContent.svelte";
-    import UserReferralCardContent from "./UserReferralCardContent.svelte";
-    import VideoCallContent from "./VideoCallContent.svelte";
-    import VideoContent from "./VideoContent.svelte";
-
-    interface Props {
-        content: MessageContent;
-        contentWidth?: number;
-        me?: boolean;
-        truncate?: boolean;
-        fill: boolean;
-        reply?: boolean;
-        pinned?: boolean;
-        height?: number | undefined;
-        readonly: boolean;
-        senderId: string;
-        messageId: bigint;
-        edited: boolean;
-        messageContext: MessageContext;
-        messageIndex: number;
-        collapsed?: boolean;
-        undeleting?: boolean;
-        intersecting: boolean;
-        failed: boolean;
-        timestamp?: bigint | undefined;
-        blockLevelMarkdown: boolean;
-        isPreview?: boolean;
-        hasReplySibling?: boolean;
-        onExpandMessage?: (() => void) | undefined;
-        onRemovePreview?: (url: string) => void;
-        onRegisterVote?: (vote: { type: "delete" | "register"; answerIndex: number }) => void;
-        ogPreviews?: OgPreview[];
-        messagePreviews?: RehydratedMessagePreview[];
-    }
-
-    let {
-        content,
-        contentWidth = $bindable(),
-        me = false,
-        truncate = false,
-        fill,
-        reply = false,
-        pinned = false,
-        height = undefined,
-        readonly,
-        senderId,
-        messageId,
-        edited,
-        messageContext,
-        messageIndex,
-        collapsed = false,
-        undeleting = false,
-        intersecting,
-        failed,
-        timestamp = undefined,
-        blockLevelMarkdown,
-        isPreview = false,
-        onExpandMessage = undefined,
-        onRemovePreview,
-        onRegisterVote,
-        ogPreviews = [],
-        messagePreviews = [],
-    }: Props = $props();
-</script>
-
-{#if content.kind === "text_content"}
-    <TextContent
-        {me}
-        {edited}
-        {truncate}
-        {content}
-        {blockLevelMarkdown}
-        {isPreview}
-        {onRemovePreview}
-        {ogPreviews}
-        {messagePreviews} />
-{:else if content.kind === "image_content"}
-    <ImageContent
-        bind:contentWidth
-        {me}
-        {edited}
-        {intersecting}
-        {fill}
-        {content}
-        {reply}
-        {pinned}
-        {height}
-        {blockLevelMarkdown}
-        {isPreview}
-        {onRemovePreview} />
-{:else if content.kind === "video_content"}
-    <VideoContent
-        bind:contentWidth
-        {me}
-        {fill}
-        {edited}
-        {content}
-        {reply}
-        {height}
-        {blockLevelMarkdown}
-        {isPreview} />
-{:else if content.kind === "video_call_content"}
-    <VideoCallContent {me} {senderId} {messageIndex} {content} {timestamp} />
-{:else if content.kind === "audio_content"}
-    <AudioContent {me} {edited} {content} {blockLevelMarkdown} />
-{:else if content.kind === "file_content"}
-    <FileContent {edited} {me} {content} {blockLevelMarkdown} />
-{:else if content.kind === "deleted_content"}
-    <DeletedContent {me} {content} {undeleting} />
-{:else if content.kind === "blocked_content"}
-    <BlockedContent />
-{:else if content.kind === "crypto_content"}
-    <CryptoContent {senderId} {content} {me} {reply} {edited} {blockLevelMarkdown} />
-{:else if content.kind === "placeholder_content"}
-    <PlaceholderContent />
-{:else if content.kind === "bot_placeholder_content"}
-    <BotPlaceholderContent />
-{:else if content.kind === "prize_content_initial"}
-    <MessageContentInitial
-        text={i18nKey(
-            failed ? "prizes.creatingPrizeMessageFailed" : "prizes.creatingYourPrizeMessage",
-        )}
-        {failed} />
-{:else if content.kind === "p2p_swap_content_initial"}
-    <MessageContentInitial
-        text={i18nKey(failed ? "p2pSwap.failedToCreateMessage" : "p2pSwap.creatingYourMessage")}
-        {failed} />
-{:else if content.kind === "prize_content"}
-    <PrizeContent chatId={messageContext.chatId} {messageId} {content} {me} {intersecting} />
-{:else if content.kind === "p2p_swap_content"}
-    <P2PSwapContent
-        {senderId}
-        {messageContext}
-        {messageId}
-        {content}
-        {me}
-        {reply}
-        {pinned}
-        {isPreview} />
-{:else if content.kind === "prize_winner_content"}
-    <PrizeWinnerContent {content} />
-{:else if content.kind === "poll_content"}
-    <PollContent {readonly} {me} {content} {senderId} {reply} {edited} {onRegisterVote} />
-{:else if content.kind === "giphy_content"}
-    <GiphyContent
-        {me}
-        {edited}
-        {intersecting}
-        {fill}
-        {content}
-        {reply}
-        {height}
-        {blockLevelMarkdown}
-        {isPreview} />
-{:else if content.kind === "proposal_content"}
-    <ProposalContent
-        {content}
-        chatId={messageContext.chatId}
-        {messageIndex}
-        {messageId}
-        {collapsed}
-        {readonly}
-        {reply}
-        {onExpandMessage} />
-{:else if content.kind === "message_reminder_created_content" && !content.hidden}
-    <MessageReminderCreatedContent {content} />
-{:else if content.kind === "message_reminder_content"}
-    <MessageReminderContent {content} />
-{:else if content.kind === "reported_message_content"}
-    <ReportedMessageContent {content} />
-{:else if content.kind === "meme_fighter_content"}
-    <ImageContent {me} {edited} {intersecting} {fill} {content} {reply} {pinned} {height} />
-{:else if content.kind === "user_referral_card"}
-    <UserReferralCardContent />
-{/if}
diff --git a/frontend/app/src/components_mobile/home/ChatSubtext.svelte b/frontend/app/src/components_mobile/home/ChatSubtext.svelte
deleted file mode 100644
index e1c1c5c161..0000000000
--- a/frontend/app/src/components_mobile/home/ChatSubtext.svelte
+++ /dev/null
@@ -1,69 +0,0 @@
-<script lang="ts">
-    import { BodySmall, Container } from "component-lib";
-    import type { ChatSummary, OpenChat } from "@client";
-    import { allUsersStore } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { i18nKey } from "../../i18n/i18n";
-    import { now } from "../../stores/time";
-    import Translatable from "../Translatable.svelte";
-    import DisappearLabel from "./DisappearLabel.svelte";
-    import VisibilityLabel from "./VisibilityLabel.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        chat: ChatSummary;
-    }
-
-    let { chat }: Props = $props();
-
-    let userId = $derived(chat.kind === "direct_chat" ? chat.them.userId : "");
-    let isBot = $derived($allUsersStore.get(userId)?.kind === "bot");
-    let isSuspended = $derived($allUsersStore.get(userId)?.suspended ?? false);
-    let subtext = $derived(isSuspended ? $_("accountSuspended") : "");
-    let checkLastOnline = $derived(!isSuspended && !isBot && chat.kind === "direct_chat");
-
-    $effect(() => {
-        if (checkLastOnline && chat.kind === "direct_chat") {
-            client.getLastOnlineDate(chat.them.userId, $now).then((lastOnline) => {
-                if (lastOnline !== undefined && lastOnline !== 0) {
-                    [subtext] = client.formatLastOnlineDate($_, $now, lastOnline);
-                } else {
-                    subtext = "";
-                }
-            });
-        }
-    });
-</script>
-
-{#if chat.kind === "direct_chat"}
-    <Container gap={"sm"} crossAxisAlignment={"center"}>
-        {#if chat.eventsTTL !== undefined}
-            <DisappearLabel ttl={chat.eventsTTL} />
-        {/if}
-        {subtext}
-    </Container>
-{:else if chat.kind === "group_chat" || chat.kind === "channel"}
-    <Container gap={"xs"} crossAxisAlignment={"center"}>
-        <BodySmall width={"hug"} colour={"textSecondary"}>
-            <VisibilityLabel isPublic={chat.public} />
-        </BodySmall>
-        {#if chat.eventsTTL !== undefined}
-            <DisappearLabel ttl={chat.eventsTTL} />
-        {/if}
-        <BodySmall colour={"textSecondary"}>
-            <span class="num">{chat.memberCount.toLocaleString()}</span>
-            <span class="subject"><Translatable resourceKey={i18nKey("members")} /></span>
-        </BodySmall>
-    </Container>
-{/if}
-
-<style lang="scss">
-    .subject {
-        text-transform: lowercase;
-    }
-    .clickable {
-        cursor: pointer;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/ChatSummary.svelte b/frontend/app/src/components_mobile/home/ChatSummary.svelte
deleted file mode 100644
index 7c20cd49c4..0000000000
--- a/frontend/app/src/components_mobile/home/ChatSummary.svelte
+++ /dev/null
@@ -1,622 +0,0 @@
-<script lang="ts">
-    import { trackedEffect } from "@src/utils/effects.svelte";
-    import {
-        Avatar,
-        Body,
-        BodySmall,
-        ColourVars,
-        Container,
-        CountBadge,
-        MenuItem,
-        MenuTrigger,
-        Row,
-        Subtitle,
-    } from "component-lib";
-    import type {
-        ChatSummary,
-        DiamondMembershipStatus,
-        MessageContent,
-        TypersByKey,
-        UserLookup,
-    } from "@client";
-    import {
-        allUsersStore,
-        chatIdentifiersEqual,
-        chatListScopeStore,
-        communitiesStore,
-        currentUserIdStore,
-        favouritesStore,
-        messagesRead,
-        notificationsSupported,
-        OpenChat,
-        pinnedChatsStore,
-        publish,
-        ROLE_NONE,
-        routeForScope,
-        selectedChatIdStore,
-        selectedCommunitySummaryStore,
-        suspendedUserStore,
-        translationsStore,
-        byContext as typersByContext,
-    } from "@client";
-    import { navigate } from "@utils/navigation";
-    import { getContext, onMount, untrack } from "svelte";
-    import { _ } from "svelte-i18n";
-    import ArchiveIcon from "svelte-material-icons/Archive.svelte";
-    import BellIcon from "svelte-material-icons/Bell.svelte";
-    import MutedIcon from "svelte-material-icons/BellOff.svelte";
-    import CameraTimer from "svelte-material-icons/CameraTimer.svelte";
-    import CheckboxMultipleMarked from "svelte-material-icons/CheckboxMultipleMarked.svelte";
-    import Heart from "svelte-material-icons/Heart.svelte";
-    import Image from "svelte-material-icons/ImageOutline.svelte";
-    import LocationExit from "svelte-material-icons/LocationExit.svelte";
-    import LockOutline from "svelte-material-icons/LockOutline.svelte";
-    import Phone from "svelte-material-icons/Phone.svelte";
-    import PinIcon from "svelte-material-icons/Pin.svelte";
-    import PinOffIcon from "svelte-material-icons/PinOff.svelte";
-    import Sticker from "svelte-material-icons/StickerEmoji.svelte";
-    import Swap from "svelte-material-icons/SwapHorizontal.svelte";
-    import Video from "svelte-material-icons/VideoOutline.svelte";
-    import Waveform from "svelte-material-icons/Waveform.svelte";
-    import DeleteOutline from "svelte-material-icons/DeleteOutline.svelte";
-    import { i18nKey, interpolate } from "../../i18n/i18n";
-    import { canDeleteDirectChat, publishDeleteDirectChat } from "../../utils/directChat";
-    import { rtlStore } from "../../stores/rtl";
-    import { now } from "../../stores/time";
-    import { toastStore } from "../../stores/toast";
-    import { buildDisplayName } from "../../utils/user";
-    import Bitcoin from "../icons/Bitcoin.svelte";
-    import HeartMinus from "../icons/HeartMinus.svelte";
-    import HeartPlus from "../icons/HeartPlus.svelte";
-    import MemeFighter from "../icons/MemeFighter.svelte";
-    import WithVerifiedBadge from "../icons/WithVerifiedBadge.svelte";
-    import Translatable from "../Translatable.svelte";
-    import Typing from "@shared_components/Typing.svelte";
-    import ArchiveOffIcon from "./ArchiveOffIcon.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import BotBadge from "./profile/BotBadge.svelte";
-    import { scrollStatus } from "../../stores/scroll.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        chatSummary: ChatSummary;
-        selected: boolean;
-        visible: boolean;
-        onChatSelected: (chat: ChatSummary) => void;
-    }
-
-    let { chatSummary, visible, onChatSelected }: Props = $props();
-
-    let externalContent = $derived(
-        chatSummary.kind === "channel" && chatSummary.externalUrl !== undefined,
-    );
-    let verified = $derived(chatSummary.kind === "group_chat" && chatSummary.verified);
-    let unreadMessages = $state<number>(0);
-    let unreadMentions = $state<number>(0);
-    let chat = $derived(normaliseChatSummary($now, chatSummary, $typersByContext));
-    let lastMessage = $derived(formatLatestMessage(chatSummary, $allUsersStore));
-    let displayDate = $derived(client.getDisplayDate(chatSummary));
-    let community = $derived(
-        chatSummary.kind === "channel"
-            ? $communitiesStore.get({ kind: "community", communityId: chatSummary.id.communityId })
-            : undefined,
-    );
-    let readonly = $derived(client.isChatReadOnly(chatSummary.id));
-    let pinned = $derived(
-        $pinnedChatsStore
-            .get($chatListScopeStore.kind)
-            ?.find((id) => chatIdentifiersEqual(id, chatSummary.id)) !== undefined,
-    );
-    let muted = $derived(chatSummary.membership.notificationsMuted);
-    let atEveryoneMuted = $derived(chatSummary.membership.atEveryoneMuted);
-    let LastMessageIcon = $derived(getLastMessageIcon());
-
-    let longpressCooldown = $derived(scrollStatus.isCooldown);
-
-    $effect(() => updateUnreadCounts(chatSummary));
-
-    onMount(() => {
-        return messagesRead.subscribe(() => updateUnreadCounts(chatSummary));
-    });
-
-    trackedEffect("unarchive-chat", () => {
-        if (chatSummary.membership.archived && unreadMessages > 0 && !chat.bot) {
-            unarchiveChat();
-        }
-    });
-
-    /***
-     * This needs to be called both when the chatSummary changes (because that may have changed the latestMessage)
-     * and when the internal state of the MessageReadTracker changes. Both are necessary to get the right value
-     * at all times.
-     */
-    function updateUnreadCounts(chatSummary: ChatSummary) {
-        untrack(() => {
-            unreadMessages = client.unreadMessageCount(
-                chatSummary.id,
-                chatSummary.latestMessage?.event.messageIndex,
-            );
-
-            unreadMentions = getUnreadMentionCount(chatSummary);
-
-            if (chatSummary.membership.archived && unreadMessages > 0 && !chat.bot) {
-                unarchiveChat();
-            }
-        });
-    }
-
-    function getUnreadMentionCount(chat: ChatSummary): number {
-        if (chat.kind === "direct_chat") return 0;
-        return chat.membership.mentions.filter(
-            (m) => !client.isMessageRead({ chatId: chat.id }, m.messageIndex, m.messageId),
-        ).length;
-    }
-
-    function getLastMessageIcon() {
-        switch (chatSummary.latestMessage?.event?.content?.kind) {
-            case "audio_content":
-                return Waveform;
-            case "giphy_content":
-                return Sticker;
-            case "p2p_swap_content":
-            case "p2p_swap_content_initial":
-                return Swap;
-            case "crypto_content":
-                return Bitcoin;
-            case "image_content":
-                return Image;
-            case "meme_fighter_content":
-                return MemeFighter;
-            case "video_call_content":
-                return Phone;
-            case "video_content":
-                return Video;
-            default:
-                return undefined;
-        }
-    }
-
-    function normaliseChatSummary(_now: number, chatSummary: ChatSummary, typing: TypersByKey) {
-        const fav =
-            $chatListScopeStore.kind !== "favourite" && $favouritesStore.has(chatSummary.id);
-        const muted = chatSummary.membership.notificationsMuted;
-        const video = chatSummary.videoCallInProgress
-            ? { muted: muted ? 1 : 0, unmuted: muted ? 0 : 1 }
-            : { muted: 0, unmuted: 0 };
-        switch (chatSummary.kind) {
-            case "direct_chat":
-                const them = $allUsersStore.get(chatSummary.them.userId);
-                return {
-                    name: client.displayName(them),
-                    diamondStatus: them?.diamondStatus ?? "inactive",
-                    streak: them?.streak ?? 0,
-                    chitEarned: them?.totalChitEarned,
-                    hasAchievedMaxStreak: (them?.maxStreak ?? 0) >= 365,
-                    avatarUrl: client.userAvatarUrl(them),
-                    userId: chatSummary.them,
-                    typing: client.getTypingString(
-                        $_,
-                        $allUsersStore,
-                        { chatId: chatSummary.id },
-                        typing,
-                    ),
-                    fav,
-                    eventsTTL: chatSummary.eventsTTL,
-                    video,
-                    private: false,
-                    uniquePerson: them?.isUniquePerson ?? false,
-                    bot: them?.kind === "bot",
-                };
-            default:
-                return {
-                    name: chatSummary.name,
-                    diamondStatus: "inactive" as DiamondMembershipStatus["kind"],
-                    streak: 0,
-                    chitEarned: undefined,
-                    hasAchievedMaxStreak: false,
-                    avatarUrl: client.groupAvatarUrl(chatSummary, $selectedCommunitySummaryStore),
-                    userId: undefined,
-                    typing: client.getTypingString(
-                        $_,
-                        $allUsersStore,
-                        { chatId: chatSummary.id },
-                        typing,
-                    ),
-                    fav,
-                    eventsTTL: chatSummary.eventsTTL,
-                    video,
-                    private: !chatSummary.public,
-                    uniquePerson: false,
-                    bot: false,
-                };
-        }
-    }
-
-    function translateMessage(messageId: bigint, content: MessageContent): MessageContent {
-        const translation = $translationsStore.get(messageId);
-        return translation ? client.applyTranslation(content, translation) : content;
-    }
-
-    function formatLatestMessage(chatSummary: ChatSummary, users: UserLookup): string {
-        if (chatSummary.latestMessageIndex === undefined || externalContent) {
-            return "";
-        }
-
-        if (
-            (chatSummary.latestMessage !== undefined &&
-                chatSummary.eventsTtlLastUpdated > chatSummary.latestMessage.timestamp) ||
-            (chatSummary.latestMessage === undefined &&
-                chatSummary.eventsTTL !== undefined &&
-                chatSummary.membership.role !== ROLE_NONE)
-        ) {
-            return chatSummary.eventsTTL !== undefined
-                ? $_("disappearingMessages.timeUpdated", {
-                      values: {
-                          duration: client.formatDuration(Number(chatSummary.eventsTTL)),
-                      },
-                  })
-                : $_("disappearingMessages.disabled");
-        }
-
-        if (chatSummary.latestMessage === undefined) {
-            return "";
-        }
-
-        const latestMessageText = client.getContentAsText(
-            $_,
-            translateMessage(
-                chatSummary.latestMessage.event.messageId,
-                chatSummary.latestMessage.event.content,
-            ),
-        );
-
-        if (chatSummary.kind === "direct_chat") {
-            return latestMessageText;
-        }
-
-        let userType: "user" | "me" | "webhook" = "user";
-        if (chatSummary.latestMessage.event.senderContext?.kind === "webhook") {
-            userType = "webhook";
-        } else if (chatSummary.latestMessage.event.sender === $currentUserIdStore) {
-            userType = "me";
-        }
-
-        const user = buildDisplayName(
-            users,
-            chatSummary.latestMessage.event.sender,
-            userType,
-            false,
-        );
-
-        return `${user}: ${latestMessageText}`;
-    }
-
-    function pinChat() {
-        client.pinChat(chatSummary.id).then((success) => {
-            if (!success) {
-                toastStore.showFailureToast(i18nKey("pinChat.failed"));
-            }
-        });
-    }
-
-    function unpinChat() {
-        client.unpinChat(chatSummary.id).then((success) => {
-            if (!success) {
-                toastStore.showFailureToast(i18nKey("pinChat.unpinFailed"));
-            }
-        });
-    }
-
-    function toggleMuteNotifications(
-        mute: boolean | undefined,
-        muteAtEveryone: boolean | undefined,
-    ) {
-        publish("toggleMuteNotifications", { chatId: chatSummary.id, mute, muteAtEveryone });
-    }
-
-    function archiveChat() {
-        client.markAllRead(chatSummary);
-        client.archiveChat(chatSummary.id).then((success) => {
-            if (!success) {
-                toastStore.showFailureToast(i18nKey("archiveChatFailed"));
-            }
-        });
-        if (chatSummary.id === $selectedChatIdStore) {
-            navigate(routeForScope($chatListScopeStore));
-        }
-    }
-
-    function selectChat() {
-        onChatSelected(chatSummary);
-    }
-
-    function addToFavourites() {
-        client.addToFavourites(chatSummary.id);
-    }
-
-    function removeFromFavourites() {
-        client.removeFromFavourites(chatSummary.id);
-    }
-
-    function unarchiveChat() {
-        publish("unarchiveChat", chatSummary.id);
-    }
-
-    function leaveGroup() {
-        if (chatSummary.kind === "direct_chat") return;
-        publish("leaveGroup", {
-            kind: "leave",
-            chatId: chatSummary.id,
-            level: chatSummary.level,
-        });
-    }
-
-    let showDeleteDirectChat = $derived(canDeleteDirectChat(chatSummary));
-</script>
-
-{#snippet menuItems()}
-    {#if !$favouritesStore.has(chatSummary.id)}
-        <MenuItem onclick={addToFavourites}>
-            {#snippet icon(_, size)}
-                <HeartPlus color={"var(--error)"} {size} />
-            {/snippet}
-            <Translatable resourceKey={i18nKey("communities.addToFavourites")} />
-        </MenuItem>
-    {:else}
-        <MenuItem onclick={removeFromFavourites}>
-            {#snippet icon(_, size)}
-                <HeartMinus color={"var(--error)"} {size} />
-            {/snippet}
-            <Translatable resourceKey={i18nKey("communities.removeFromFavourites")} />
-        </MenuItem>
-    {/if}
-    {#if !pinned}
-        <MenuItem onclick={pinChat}>
-            {#snippet icon(color, size)}
-                <PinIcon {color} {size} />
-            {/snippet}
-            <Translatable resourceKey={i18nKey("pinChat.menuItem")} />
-        </MenuItem>
-    {:else}
-        <MenuItem onclick={unpinChat}>
-            {#snippet icon(color, size)}
-                <PinOffIcon {color} {size} />
-            {/snippet}
-            <Translatable resourceKey={i18nKey("pinChat.unpinMenuItem")} />
-        </MenuItem>
-    {/if}
-    {#if notificationsSupported && !externalContent}
-        {#if muted}
-            <MenuItem onclick={() => toggleMuteNotifications(false, undefined)}>
-                {#snippet icon(color, size)}
-                    <BellIcon {color} {size} />
-                {/snippet}
-                <Translatable resourceKey={i18nKey("unmuteNotifications")} />
-            </MenuItem>
-        {:else}
-            <MenuItem onclick={() => toggleMuteNotifications(true, undefined)}>
-                {#snippet icon(color, size)}
-                    <MutedIcon {color} {size} />
-                {/snippet}
-                <Translatable resourceKey={i18nKey("muteNotifications")} />
-            </MenuItem>
-        {/if}
-        {#if atEveryoneMuted}
-            <MenuItem onclick={() => toggleMuteNotifications(undefined, false)}>
-                {#snippet icon(color, size)}
-                    <MutedIcon {color} {size} />
-                {/snippet}
-                <Translatable resourceKey={i18nKey("unmuteAtEveryone")} />
-            </MenuItem>
-        {:else}
-            <MenuItem onclick={() => toggleMuteNotifications(undefined, true)}>
-                {#snippet icon(color, size)}
-                    <MutedIcon {color} {size} />
-                {/snippet}
-                <Translatable resourceKey={i18nKey("muteAtEveryone")} />
-            </MenuItem>
-        {/if}
-    {/if}
-    {#if !externalContent}
-        <MenuItem disabled={unreadMessages === 0} onclick={() => client.markAllRead(chatSummary)}>
-            {#snippet icon(color, size)}
-                <CheckboxMultipleMarked {size} {color} />
-            {/snippet}
-            <Translatable resourceKey={i18nKey("markAllRead")} />
-        </MenuItem>
-    {/if}
-    {#if !chat.bot}
-        {#if chatSummary.membership.archived}
-            <MenuItem onclick={selectChat}>
-                {#snippet icon(color, size)}
-                    <ArchiveOffIcon {color} {size} />
-                {/snippet}
-                <Translatable resourceKey={i18nKey("unarchiveChat")} />
-            </MenuItem>
-        {:else}
-            <MenuItem onclick={archiveChat}>
-                {#snippet icon(color, size)}
-                    <ArchiveIcon {color} {size} />
-                {/snippet}
-                <Translatable resourceKey={i18nKey("archiveChat")} />
-            </MenuItem>
-        {/if}
-    {/if}
-    {#if chatSummary.kind !== "direct_chat" && client.canLeaveGroup(chatSummary.id)}
-        <MenuItem danger onclick={leaveGroup}>
-            {#snippet icon(color, size)}
-                <LocationExit {color} {size} />
-            {/snippet}
-            {interpolate($_, i18nKey("leaveGroup", undefined, chatSummary.level, true))}
-        </MenuItem>
-    {/if}
-    {#if showDeleteDirectChat}
-        <MenuItem danger onclick={() => publishDeleteDirectChat(chatSummary)}>
-            {#snippet icon(color, size)}
-                <DeleteOutline {color} {size} />
-            {/snippet}
-            <Translatable resourceKey={i18nKey("deleteChat")} />
-        </MenuItem>
-    {/if}
-{/snippet}
-
-{#if visible}
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <Container supplementalClass="chat_summary_wrapper" padding={["zero", "sm"]}>
-        <MenuTrigger
-            fill
-            maskUI
-            classString={"chat_summary_menu_trigger"}
-            disabled={$suspendedUserStore || readonly}
-            position={"bottom"}
-            align={"end"}
-            mobileMode={"longpress"}
-            withBgEffect={true}
-            {longpressCooldown}
-            {menuItems}>
-            <Container
-                onClick={selectChat}
-                supplementalClass={"chat_summary"}
-                padding={["lg", "sm"]}
-                mainAxisAlignment={"spaceBetween"}
-                crossAxisAlignment={"center"}
-                gap={"lg"}
-                borderRadius={"md"}>
-                <div class="avatar">
-                    <Avatar size={"lg"} url={chat.avatarUrl} name={chat.name} />
-                    {#if chat.eventsTTL}
-                        <div class="expires">
-                            <CameraTimer size={"1em"} color={"var(--txt)"} />
-                        </div>
-                    {/if}
-                    <!-- TODO video call info should be the displayed instead of the last message if tehre are active calls  -->
-                    <!-- <VideoCallIcon video={chat.video} /> -->
-                    {#if chat.private}
-                        <div class="private">
-                            <LockOutline size="0.85rem" color={ColourVars.error} />
-                        </div>
-                    {/if}
-                </div>
-                <Container width={"fill"} direction={"vertical"}>
-                    <Container
-                        gap={"lg"}
-                        width={"fill"}
-                        mainAxisAlignment={"spaceBetween"}
-                        crossAxisAlignment={"center"}>
-                        <Container crossAxisAlignment={"center"} gap={"sm"} width={"fill"}>
-                            <WithVerifiedBadge {verified}>
-                                <Subtitle ellipsisTruncate fontWeight={"semi-bold"}>
-                                    {#if community !== undefined && $chatListScopeStore.kind === "favourite"}
-                                        <span>{community.name}</span>
-                                        <span>{">"}</span>
-                                    {/if}
-                                    <span>{chat.name}</span>
-                                </Subtitle>
-                            </WithVerifiedBadge>
-                            <BotBadge bot={chat.bot} />
-                        </Container>
-                        <Container
-                            supplementalClass={"chat-date"}
-                            width={"hug"}
-                            gap={"xs"}
-                            crossAxisAlignment={"center"}
-                            mainAxisAlignment={"end"}>
-                            {#if muted && notificationsSupported}
-                                <div class="icon" class:rtl={$rtlStore}>
-                                    <MutedIcon size={"1em"} color={"var(--icon-txt)"} />
-                                </div>
-                            {/if}
-                            {#if pinned}
-                                <div class="icon">
-                                    <PinIcon size={"1em"} color={"var(--icon-txt)"} />
-                                </div>
-                            {/if}
-                            {#if chat.fav}
-                                <div class="icon">
-                                    <Heart size={"1em"} color={"var(--primary)"} />
-                                </div>
-                            {/if}
-                            <BodySmall colour={"textSecondary"} fontWeight={"semi-bold"}>
-                                {client.formatMessageDate(
-                                    displayDate,
-                                    $_("today"),
-                                    $_("yesterday"),
-                                    true,
-                                    true,
-                                )}
-                            </BodySmall>
-                        </Container>
-                    </Container>
-                    <Container
-                        gap={"xs"}
-                        mainAxisAlignment={"spaceBetween"}
-                        crossAxisAlignment={"end"}>
-                        <Row gap={"xs"} crossAxisAlignment={"center"}>
-                            {#if LastMessageIcon}
-                                <LastMessageIcon color={ColourVars.textSecondary} />
-                            {/if}
-                            <Body ellipsisTruncate colour={"textSecondary"}>
-                                {#if chat.typing !== undefined}
-                                    {chat.typing} <Typing />
-                                {:else}
-                                    <Markdown text={lastMessage} oneLine suppressLinks />
-                                {/if}
-                            </Body>
-                        </Row>
-                        {#if unreadMentions > 0}
-                            <CountBadge>@</CountBadge>
-                        {/if}
-                        {#if unreadMessages > 0}
-                            <CountBadge {muted}
-                                >{unreadMessages > 999 ? "999+" : unreadMessages}
-                            </CountBadge>
-                        {/if}
-                        <!-- TODO add read/received receipt -->
-                    </Container>
-                </Container>
-            </Container>
-        </MenuTrigger>
-    </Container>
-{/if}
-
-<style lang="scss">
-    :global(.chat-name .with_verified) {
-        gap: $sp2;
-    }
-
-    :global(.chat_summary .chat-date) {
-        color: var(--txt-light);
-        @include font(book, normal, fs-60);
-        .icon {
-            display: flex;
-        }
-    }
-
-    .avatar {
-        display: flex;
-        position: relative;
-    }
-
-    .expires {
-        @include disappearing();
-        bottom: 0;
-        right: 0;
-    }
-
-    .private {
-        $size: 1.35rem;
-        position: absolute;
-        right: -0.5rem;
-        bottom: -0.05rem;
-        display: flex;
-        flex: 0 0 $size;
-        align-items: center;
-        justify-content: center;
-        align-content: center;
-        width: $size;
-        height: $size;
-        background-color: var(--background-0);
-        border-radius: var(--rad-circle);
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/ChatUnfrozenEvent.svelte b/frontend/app/src/components_mobile/home/ChatUnfrozenEvent.svelte
deleted file mode 100644
index 0a45d70225..0000000000
--- a/frontend/app/src/components_mobile/home/ChatUnfrozenEvent.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts">
-    import type { UserSummary } from "@client";
-    import { allUsersStore } from "@client";
-    import type { ChatUnfrozenEvent } from "@shared";
-    import { _ } from "svelte-i18n";
-    import { buildDisplayName } from "../../utils/user";
-    import NonMessageEvent from "./NonMessageEvent.svelte";
-
-    interface Props {
-        event: ChatUnfrozenEvent;
-        user: UserSummary | undefined;
-        timestamp: bigint;
-    }
-
-    let { event, user, timestamp }: Props = $props();
-
-    let me = $derived(event.unfrozenBy === user?.userId);
-    let unfrozenByStr = $derived(
-        buildDisplayName($allUsersStore, event.unfrozenBy, me ? "me" : "user"),
-    );
-
-    let text = $derived(
-        $_("chatUnfrozenBy", {
-            values: {
-                unfrozenBy: unfrozenByStr,
-            },
-        }),
-    );
-</script>
-
-<NonMessageEvent {text} {timestamp} />
diff --git a/frontend/app/src/components_mobile/home/ChitEarned.svelte b/frontend/app/src/components_mobile/home/ChitEarned.svelte
deleted file mode 100644
index 0e8879cdd4..0000000000
--- a/frontend/app/src/components_mobile/home/ChitEarned.svelte
+++ /dev/null
@@ -1,221 +0,0 @@
-<script lang="ts">
-    import { shakeElements } from "@src/utils/shake";
-    import { BodySmall, Column } from "component-lib";
-    import { subscribe, type ChitEvent, type OpenChat } from "@client";
-    import { getContext, onMount } from "svelte";
-    import { Confetti } from "svelte-confetti";
-    import { _ } from "svelte-i18n";
-    import { Spring, Tween } from "svelte/motion";
-    import SpinningToken from "../icons/SpinningToken.svelte";
-
-    const OFF_SCREEN_OPACITY = 0.0;
-    const SHOW_DURATION = 3000;
-    const SLIDE_IN_DURATION = 400;
-    const TWEEN_DURATION = 300;
-    const LONG_DURATION = 10_000;
-
-    const client = getContext<OpenChat>("client");
-    let confetti = $state(false);
-    let dimensions = getDimension();
-    let ypos = new Spring(dimensions.height + 100, { damping: 0.4, stiffness: 0.2 });
-    let opacity = new Tween(OFF_SCREEN_OPACITY, { duration: TWEEN_DURATION });
-    let msg = new Tween({ scale: 0, opacity: 1 }, { duration: TWEEN_DURATION });
-    let left = $state(dimensions.width / 2);
-    let amount = $state(0);
-    let labels: string[] = $state([]);
-    let active = $state(false);
-    let imageUrl = $state("/assets/chit.svg");
-    let maxStreak = $state(false);
-
-    function trigger(events: ChitEvent[]) {
-        maxStreak = false;
-        amount = events.reduce((total, chit) => total + chit.amount, 0);
-        labels = events.reduce((labels, c) => {
-            if (c.reason.kind === "achievement_unlocked") {
-                if (c.reason.type === "streak_365") {
-                    maxStreak = true;
-                    imageUrl = "/assets/max_streak.svg";
-                }
-                labels.push($_(`learnToEarn.${c.reason.type}`));
-            }
-            if (c.reason.kind === "external_achievement_unlocked") {
-                labels.push(c.reason.name);
-            }
-            return labels;
-        }, [] as string[]);
-        const showDuration = maxStreak ? LONG_DURATION : SHOW_DURATION;
-        ypos.target = dimensions.height / 2;
-        opacity.target = 1;
-        active = true;
-        if (maxStreak) {
-            setTimeout(() => {
-                shakeElements(
-                    [
-                        ".message-wrapper",
-                        ".chat-summary",
-                        ".avatar",
-                        "svg",
-                        ".date-label",
-                        ".icon",
-                        ".section-header",
-                        ".message-entry",
-                        ".section-selector",
-                        ".input-wrapper",
-                        ".legend",
-                        ".chat-list",
-                        ".communities .card",
-                    ],
-                    {
-                        duration: showDuration,
-                        maxIntensity: 50,
-                    },
-                );
-            }, 100);
-        }
-        window.setTimeout(() => {
-            confetti = true;
-            msg.target = { scale: 1, opacity: 1 };
-            window.setTimeout(() => {
-                confetti = false;
-                opacity.target = OFF_SCREEN_OPACITY;
-                msg.target = { scale: 0, opacity: 1 };
-                window.setTimeout(reset, TWEEN_DURATION);
-            }, showDuration);
-        }, SLIDE_IN_DURATION);
-
-        // update the backend so we don't get notified again
-        client.markAchievementsSeen();
-    }
-
-    function reset() {
-        dimensions = getDimension();
-        left = dimensions.width / 2;
-        ypos.set(dimensions.height + 100);
-        opacity.set(OFF_SCREEN_OPACITY, { duration: 0 });
-        msg.set({ scale: 0, opacity: 1 }, { duration: 0 });
-        confetti = false;
-        active = false;
-    }
-
-    function getDimension() {
-        return {
-            height: window.innerHeight,
-            width: window.innerWidth,
-        };
-    }
-
-    onMount(() => {
-        // - Useful for testing
-        // trigger([
-        //     {
-        //         amount: 100_000,
-        //         timestamp: BigInt(Date.now()),
-        //         reason: {
-        //             kind: "achievement_unlocked",
-        //             type: "edited_message",
-        //         },
-        //     },
-        // ]);
-        return subscribe("chitEarned", trigger);
-    });
-</script>
-
-<svelte:window on:resize={reset} />
-
-<div class="overlay" class:active>
-    <div
-        class="wrapper"
-        style={`top: ${ypos.current}px; left: ${left}px; opacity: ${opacity.current}`}>
-        {#if confetti}
-            <div class="confetti">
-                <Confetti
-                    amount={100}
-                    x={[-1.5, 1.5]}
-                    y={[-1.5, 1.5]}
-                    size={20}
-                    colorArray={["url(/assets/chit.svg)"]} />
-            </div>
-        {/if}
-        <div class="coin">
-            <SpinningToken
-                spin
-                mirror={false}
-                size={maxStreak ? "extra-large" : "large"}
-                logo={imageUrl} />
-        </div>
-        <div
-            class="details"
-            style={`transform: scale(${msg.current.scale}); opacity: ${msg.current.opacity}`}>
-            <div class="chit">
-                {`+${amount.toLocaleString()} CHIT`}
-            </div>
-            <Column crossAxisAlignment={"center"}>
-                {#each labels as label}
-                    <BodySmall width={"hug"}>{label}</BodySmall>
-                {/each}
-            </Column>
-        </div>
-    </div>
-</div>
-
-<style lang="scss">
-    .wrapper {
-        position: absolute;
-        left: 500px;
-        @include z-index("coin");
-        transform: translate(-50%, -50%);
-        display: flex;
-        flex-direction: column;
-        gap: $sp4;
-        align-items: center;
-        backdrop-filter: blur(10px);
-        background: var(--modal-bg);
-        border: var(--modal-bd);
-        border-radius: var(--modal-rd);
-        box-shadow: var(--modal-sh);
-        width: calc(100% - 80px);
-        padding: $sp6;
-    }
-
-    .confetti {
-        position: absolute;
-        @include z-index("coin");
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-    }
-
-    .chit {
-        border-radius: var(--rad-md);
-        background: var(--gradient);
-        color: var(--text-on-primary);
-        width: fit-content;
-        padding: $sp2 $sp3;
-    }
-
-    .details {
-        display: flex;
-        flex-direction: column;
-        gap: $sp3;
-        align-items: center;
-    }
-
-    .overlay {
-        @include z-index("chit");
-        position: fixed;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        top: 0;
-        left: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-        pointer-events: none;
-        transition: backdrop-filter 300ms ease-in-out;
-
-        &.active {
-            backdrop-filter: saturate(0.3);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/ContentCaption.svelte b/frontend/app/src/components_mobile/home/ContentCaption.svelte
deleted file mode 100644
index 120a5300a0..0000000000
--- a/frontend/app/src/components_mobile/home/ContentCaption.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script lang="ts">
-    import { ChatText } from "component-lib";
-    import Markdown from "@shared_components/Markdown.svelte";
-
-    interface Props {
-        edited: boolean;
-        caption: string | undefined;
-        blockLevelMarkdown?: boolean;
-    }
-
-    let { caption, blockLevelMarkdown = false }: Props = $props();
-</script>
-
-{#if caption !== undefined && caption !== ""}
-    <ChatText>
-        <Markdown text={caption} inline={!blockLevelMarkdown} />
-    </ChatText>
-{/if}
diff --git a/frontend/app/src/components_mobile/home/CryptoContent.svelte b/frontend/app/src/components_mobile/home/CryptoContent.svelte
deleted file mode 100644
index cc7bc50515..0000000000
--- a/frontend/app/src/components_mobile/home/CryptoContent.svelte
+++ /dev/null
@@ -1,201 +0,0 @@
-<script lang="ts">
-    import { Avatar, Body, BodySmall, ColourVars, Column, Row, Subtitle } from "component-lib";
-    import { getContext, type Snippet } from "svelte";
-    import type { CryptocurrencyContent, OpenChat } from "@client";
-    import { currentUserIdStore, enhancedCryptoLookup } from "@client";
-    import { _ } from "svelte-i18n";
-    import { i18nKey } from "../../i18n/i18n";
-    import Translatable from "../Translatable.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import { TokenState } from "./wallet/walletState.svelte";
-    import MessageRenderer from "./MessageRenderer.svelte";
-    import Alert from "svelte-material-icons/AlertRhombusOutline.svelte";
-    import ChevronRight from "svelte-material-icons/ChevronRight.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        content: CryptocurrencyContent;
-        title?: Snippet;
-        me?: boolean;
-        reply?: boolean;
-        senderId: string;
-        draft?: boolean;
-        edited?: boolean;
-        blockLevelMarkdown?: boolean;
-        onRemove?: () => void;
-    }
-
-    let {
-        content,
-        title,
-        me = false,
-        reply = false,
-        senderId,
-        draft = false,
-        edited = false,
-        blockLevelMarkdown = false,
-        onRemove,
-    }: Props = $props();
-
-    let participantUserId = $derived(
-        $currentUserIdStore === senderId ? content.transfer.recipient : senderId,
-    );
-
-    let tokenState = $derived(new TokenState($enhancedCryptoLookup.get(content.transfer.ledger)!));
-    let transactionUrl = $derived(
-        content.transfer.kind === "completed"
-            ? client.buildTransactionUrl(content.transfer.blockIndex, content.transfer.ledger)
-            : undefined,
-    );
-
-    function username(userId: string): string {
-        return userId === currentUserIdStore.value ? $_("you") : `@UserId(${userId})`;
-    }
-</script>
-
-{#snippet transactionDetails()}
-    <a class="transaction_link" href={transactionUrl ?? "_blank"} target="_blank">
-        <Row
-            width="fill"
-            padding="md"
-            borderRadius="md"
-            crossAxisAlignment="center"
-            background={ColourVars.background0}>
-            <Column>
-                <Subtitle fontWeight="bold">
-                    {#if me}
-                        <Markdown text={`@UserId(${participantUserId})`} inline={true} />
-                    {:else}
-                        You
-                    {/if}
-                </Subtitle>
-                <Body colour="textSecondary">
-                    Received {tokenState.formatTokens(content.transfer.amountE8s)}
-                    {tokenState.symbol}
-                </Body>
-            </Column>
-            <ChevronRight size="1.5rem" color={ColourVars.textSecondary} />
-        </Row>
-    </a>
-{/snippet}
-
-{#snippet tokenDetailsView()}
-    <Row
-        width="fill"
-        gap="lg"
-        borderRadius="md"
-        padding="md"
-        background={ColourVars.background0}
-        crossAxisAlignment="center">
-        <Avatar size={"md"} url={tokenState.logo} />
-        <Column width="fill">
-            <Subtitle fontWeight="bold">{tokenState.symbol}</Subtitle>
-            <Body colour="textSecondary" fontWeight="bold" maxLines={1}>
-                {tokenState.token.name}
-            </Body>
-        </Column>
-        <Column width="hug">
-            <Subtitle fontWeight="bold" align="end">
-                {tokenState.formatTokens(content.transfer.amountE8s)}
-            </Subtitle>
-            <Body colour="primary" fontWeight="bold" align="end">
-                ≈ {tokenState.formatConvertedTokens(content.transfer.amountE8s)}
-            </Body>
-        </Column>
-    </Row>
-{/snippet}
-
-{#snippet replyView(textContent?: Snippet)}
-    {@const iamSender = $currentUserIdStore === senderId}
-    {@const textColor = me ? "secondary" : "primary"}
-    {@render title?.()}
-    <Row padding={["xs", "zero", "zero"]}>
-        <Body fontWeight="semi-bold" colour={textColor}>
-            <Translatable resourceKey={i18nKey(iamSender ? "You sent" : "You received")} />
-            {tokenState.formatTokens(content.transfer.amountE8s)}
-            {tokenState.symbol}
-        </Body>
-    </Row>
-    {@render textContent?.()}
-{/snippet}
-
-{#snippet draftView()}
-    <Column supplementalClass="send_tx_draft" padding="xs">
-        <Column padding="xs" gap="xs" borderRadius="lg" background={ColourVars.background2}>
-            <Row
-                supplementalClass="tx_header"
-                gap={"xs"}
-                padding={["xs", "lg", "xs", "md"]}
-                crossAxisAlignment={"center"}
-                borderRadius={["lg", "lg", "md", "md"]}>
-                <Body width="hug" colour="textSecondary" fontWeight="semi-bold">Sending to</Body>
-                <Body width="hug" colour="primary" maxLines={1}>
-                    <Markdown text={username(content.transfer.recipient)} inline={true} />
-                </Body>
-            </Row>
-            {@render tokenDetailsView()}
-            <Row
-                gap="md"
-                borderRadius={["md", "md", "lg", "lg"]}
-                crossAxisAlignment={"center"}
-                padding={["sm", "lg", "sm", "sm"]}
-                background={ColourVars.background0}>
-                <Alert size={"1.5rem"} color={ColourVars.warning} />
-                <BodySmall colour={"warning"}>
-                    <Translatable
-                        resourceKey={i18nKey("tokenTransfer.warning", {
-                            token: tokenState.symbol,
-                        })} />
-                </BodySmall>
-            </Row>
-        </Column>
-    </Column>
-{/snippet}
-
-{#snippet regularView(textContent?: Snippet)}
-    <Column padding={["zero", "zero", textContent ? "zero" : me ? "xl" : "lg"]}>
-        <Column
-            gap={"xs"}
-            padding={me ? "xs" : "zero"}
-            borderRadius={me ? ["lg", "md", "md", "md"] : "zero"}
-            background={me ? ColourVars.background2 : undefined}>
-            <Row width="fill" mainAxisAlignment="end" padding={["xs", "xs", "xxs"]}>
-                <BodySmall colour="primary" fontWeight="bold" align="end">
-                    <Translatable
-                        resourceKey={i18nKey(me ? "Transaction sent" : "Transaction received")} />
-                </BodySmall>
-            </Row>
-            {@render transactionDetails()}
-            {@render tokenDetailsView()}
-        </Column>
-    </Column>
-    {@render textContent?.()}
-{/snippet}
-
-<MessageRenderer
-    {replyView}
-    {draftView}
-    {regularView}
-    caption={content.caption}
-    {me}
-    {reply}
-    {draft}
-    {edited}
-    {blockLevelMarkdown}
-    {onRemove} />
-
-<style lang="scss">
-    .transaction_link {
-        display: block;
-        width: 100%;
-    }
-
-    :global {
-        .send_tx_draft {
-            .tx_header profile-link {
-                text-decoration: none !important;
-            }
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/CryptoSelector.svelte b/frontend/app/src/components_mobile/home/CryptoSelector.svelte
deleted file mode 100644
index 85c013e36f..0000000000
--- a/frontend/app/src/components_mobile/home/CryptoSelector.svelte
+++ /dev/null
@@ -1,111 +0,0 @@
-<script lang="ts">
-    import { i18nKey } from "@src/i18n/i18n";
-    import { hideTokenBalances } from "@src/stores/settings";
-    import { Avatar, Body, BodySmall, ColourVars, Column, Row, type SizeMode } from "component-lib";
-    import type { EnhancedTokenDetails, OpenChat } from "@client";
-    import { enhancedCryptoLookup } from "@client";
-    import { getContext } from "svelte";
-    import ChevronDown from "svelte-material-icons/ChevronDown.svelte";
-    import Refresh from "svelte-material-icons/Refresh.svelte";
-    import TokenSelector from "./wallet/TokenSelector.svelte";
-    import { TokenState } from "./wallet/walletState.svelte";
-    import { getProxyAdjustedBlobUrl } from "../../utils/media";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        width?: SizeMode;
-        ledger: string;
-        filter?: (details: EnhancedTokenDetails) => boolean;
-        onSelect?: (ledger: string, urlFormat: string) => void;
-        draftAmount?: bigint;
-        showRefresh?: boolean;
-    }
-
-    let {
-        ledger = $bindable(),
-        filter,
-        onSelect,
-        width = "fill",
-        draftAmount,
-        showRefresh = false,
-    }: Props = $props();
-    let token = $derived($enhancedCryptoLookup.get(ledger)!);
-    let showTokenSelector = $state(false);
-    let tokenState = $derived.by(() => {
-        const ts = new TokenState(token);
-        client.refreshAccountBalance(ledger);
-        return ts;
-    });
-
-    $effect(() => {
-        if (draftAmount !== undefined && tokenState !== undefined) {
-            tokenState.draftAmount = draftAmount;
-        }
-    });
-</script>
-
-{#if tokenState}
-    <Row crossAxisAlignment={"center"} gap={"sm"}>
-        <Row
-            {width}
-            background={ColourVars.textTertiary}
-            gap={"md"}
-            borderRadius={"circle"}
-            onClick={() => (showTokenSelector = true)}
-            mainAxisAlignment={"spaceBetween"}
-            crossAxisAlignment={"center"}
-            padding={["sm", "md"]}>
-            <Avatar url={getProxyAdjustedBlobUrl(tokenState.logo) ?? tokenState.logo}></Avatar>
-            <Column>
-                <Body width={"hug"} fontWeight={"bold"}>{tokenState.symbol}</Body>
-                <BodySmall
-                    colour={"textSecondary"}
-                    blur={$hideTokenBalances}
-                    align={"end"}
-                    width={"hug"}
-                    fontWeight={"bold"}>{tokenState.formattedTokenBalance}</BodySmall>
-            </Column>
-            <ChevronDown size={"1.5rem"} color={ColourVars.textSecondary} />
-        </Row>
-        {#if showRefresh}
-            <button
-                onclick={() => tokenState.refreshBalance(client)}
-                class="refresh"
-                class:refreshing={tokenState.refreshingBalance}>
-                <Refresh size={"1.5rem"} color={ColourVars.textPrimary} />
-            </button>
-        {/if}
-    </Row>
-{/if}
-
-{#if showTokenSelector}
-    <TokenSelector
-        selected={new Set(ledger)}
-        onSelect={(t) => {
-            ledger = t.ledger;
-            showTokenSelector = false;
-            onSelect?.(t.ledger, t.urlFormat);
-        }}
-        extraFilter={filter}
-        placeholder={i18nKey("Filter tokens...")}
-        onDismiss={() => (showTokenSelector = false)}
-        title={i18nKey("Select token")} />
-{/if}
-
-<style lang="scss">
-    .refresh {
-        all: unset;
-        border-radius: var(--rad-circle);
-        background-color: var(--background-2);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 3.625rem;
-        height: 3.625rem;
-
-        &.refreshing {
-            @include spin();
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/CryptoTransferBuilder.svelte b/frontend/app/src/components_mobile/home/CryptoTransferBuilder.svelte
deleted file mode 100644
index e40a07bca3..0000000000
--- a/frontend/app/src/components_mobile/home/CryptoTransferBuilder.svelte
+++ /dev/null
@@ -1,144 +0,0 @@
-<script lang="ts">
-    import { Body, Column, CommonButton, Container, IconButton, Row, Sheet } from "component-lib";
-    import type { ChatSummary, UserSummary } from "@client";
-    import {
-        allUsersStore,
-        enhancedCryptoLookup as cryptoLookup,
-        currentUserIdStore,
-        localUpdates,
-    } from "@client";
-    import { type CryptocurrencyContent, type MessageContext, nowNanos } from "@shared";
-    import { onMount } from "svelte";
-    import Chat from "svelte-material-icons/ChatPlusOutline.svelte";
-    import Close from "svelte-material-icons/Close.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { pinNumberErrorMessageStore } from "../../stores/pinNumber";
-    import ErrorMessage from "../ErrorMessage.svelte";
-    import Translatable from "../Translatable.svelte";
-    import CryptoSelector from "./CryptoSelector.svelte";
-    import SingleUserSelector from "./SingleUserSelector.svelte";
-    import TokenInput from "./TokenInput.svelte";
-    import TransferFeesMessage from "./TransferFeesMessage.svelte";
-    import { TokenState } from "./wallet/walletState.svelte";
-
-    interface Props {
-        ledger: string;
-        chat: ChatSummary;
-        defaultReceiver: string | undefined;
-        messageContext: MessageContext;
-        onClose: () => void;
-    }
-
-    let { ledger = $bindable(), chat, defaultReceiver, messageContext, onClose }: Props = $props();
-
-    let error: string | undefined = $state(undefined);
-    let receiver: UserSummary | undefined = $state(undefined);
-    let validAmount: boolean = $state(false);
-    let tokenDetails = $derived($cryptoLookup.get(ledger)!);
-    let tokenState = $derived(new TokenState(tokenDetails, "usd"));
-    let multiUserChat = $derived(chat.kind === "group_chat" || chat.kind === "channel");
-    let valid = $derived(error === undefined && validAmount && receiver !== undefined);
-    let errorMessage = $derived(error !== undefined ? i18nKey(error) : $pinNumberErrorMessageStore);
-
-    onMount(() => {
-        // default the receiver to the other user in a direct chat
-        if (chat.kind === "direct_chat") {
-            receiver = $allUsersStore.get(chat.them.userId);
-        } else if (defaultReceiver !== undefined && defaultReceiver !== $currentUserIdStore) {
-            receiver = $allUsersStore.get(defaultReceiver);
-        }
-    });
-
-    function send() {
-        if (receiver === undefined) return;
-
-        const content: CryptocurrencyContent = {
-            kind: "crypto_content",
-            transfer: {
-                kind: "pending",
-                ledger,
-                token: tokenState.symbol,
-                recipient: receiver.userId,
-                amountE8s: tokenState.draftAmount,
-                feeE8s: tokenState.transferFees,
-                createdAtNanos: nowNanos(),
-            },
-        };
-
-        localUpdates.draftMessages.setAttachment(messageContext, content);
-
-        onClose();
-    }
-</script>
-
-<Sheet onDismiss={onClose}>
-    <Container gap={"xl"} padding={["sm", "xl", "huge"]} direction={"vertical"}>
-        <Row crossAxisAlignment="center" padding={["zero", "zero", "zero", "sm"]}>
-            <Body fontWeight={"bold"}>
-                <Translatable resourceKey={i18nKey("Send crypto")} />
-            </Body>
-            <IconButton onclick={onClose}>
-                {#snippet icon(color)}
-                    <Close {color} />
-                {/snippet}
-            </IconButton>
-        </Row>
-
-        <!-- TODO "fix" the double sheet! -->
-        <!-- Perhaps we just get the content of the crypto selector and replace current sheet (?) -->
-        <CryptoSelector
-            showRefresh
-            draftAmount={tokenState.draftAmount}
-            filter={(t) => t.balance > 0}
-            bind:ledger />
-
-        <Column gap={"md"}>
-            {#if multiUserChat}
-                <SingleUserSelector bind:selectedReceiver={receiver}>
-                    {#snippet subtext()}
-                        <Translatable resourceKey={i18nKey("Choose a token recipient")} />
-                    {/snippet}
-                </SingleUserSelector>
-            {/if}
-
-            <TokenInput
-                {ledger}
-                error={!validAmount}
-                balance={tokenState.cryptoBalance}
-                minAmount={tokenState.minAmount}
-                maxAmount={tokenState.maxAmount}
-                bind:valid={validAmount}
-                bind:amount={tokenState.draftAmount}>
-                {#snippet subtext()}
-                    {`Minimum amount ${tokenState.minAmountLabel} ${tokenState.symbol}`}
-                {/snippet}
-            </TokenInput>
-        </Column>
-
-        {#if errorMessage !== undefined}
-            <div class="error">
-                <ErrorMessage><Translatable resourceKey={errorMessage} /></ErrorMessage>
-            </div>
-        {/if}
-
-        <Container
-            mainAxisAlignment={"spaceBetween"}
-            crossAxisAlignment={"center"}
-            padding={["zero", "sm"]}>
-            <TransferFeesMessage
-                symbol={tokenState.symbol}
-                tokenDecimals={tokenState.decimals}
-                transferFees={tokenState.transferFees} />
-
-            <CommonButton
-                onClick={send}
-                disabled={!valid || !tokenState.draftAmount}
-                mode={"active"}>
-                {#snippet icon(color, size)}
-                    <Chat {color} {size} />
-                {/snippet}
-                <Translatable resourceKey={i18nKey("tokenTransfer.send")} />
-            </CommonButton>
-        </Container>
-    </Container>
-</Sheet>
diff --git a/frontend/app/src/components_mobile/home/CurrentChat.svelte b/frontend/app/src/components_mobile/home/CurrentChat.svelte
deleted file mode 100644
index cc0574db6f..0000000000
--- a/frontend/app/src/components_mobile/home/CurrentChat.svelte
+++ /dev/null
@@ -1,417 +0,0 @@
-<script lang="ts">
-    import { trackedEffect } from "@src/utils/effects.svelte";
-    import { ColourVars, Container } from "component-lib";
-    import {
-        type AttachmentContent,
-        blockedUsersStore,
-        botState,
-        type ChatIdentifier,
-        chatIdentifiersEqual,
-        type ChatSummary,
-        currentUserIdStore,
-        currentUserStore,
-        type EnhancedReplyContext,
-        type EventWrapper,
-        type FilteredProposals,
-        lastCryptoSent,
-        LEDGER_CANISTER_ICP,
-        localUpdates,
-        type Mention,
-        type Message,
-        type MessageContent,
-        type MessageContext,
-        messageContextsEqual,
-        messagesRead,
-        type OpenChat,
-        publish,
-        type ReadonlySet,
-        selectedChatDraftMessageStore,
-        selectedChatPinnedMessagesStore,
-        selectedCommunitySummaryStore,
-        subscribe,
-        suspendedUserStore,
-        type User,
-    } from "@client";
-    import { getContext, onMount, tick } from "svelte";
-    import { releaseNotifications } from "tauri-plugin-oc-api";
-    import { i18nKey } from "../../i18n/i18n";
-    import { messageToForwardStore } from "../../stores/messageToForward";
-    import { toastStore } from "../../stores/toast";
-    import { randomSentence } from "../../utils/randomMsg";
-    import AreYouSure from "../AreYouSure.svelte";
-    import DirectChatHeader from "../bots/DirectChatHeader.svelte";
-    import CryptoTransferBuilder from "./CryptoTransferBuilder.svelte";
-    import CurrentChatHeader from "./CurrentChatHeader.svelte";
-    import CurrentChatMessages from "./CurrentChatMessages.svelte";
-    import CurrentChatSearchHeader from "./CurrentChatSearchHeader.svelte";
-    import ExternalContent from "./ExternalContent.svelte";
-    import Footer from "./Footer.svelte";
-    import MemeBuilder from "./MemeBuilder.svelte";
-    import { keyboard } from "@stores/keyboard.svelte";
-
-    interface Props {
-        chat: ChatSummary;
-        filteredProposals: FilteredProposals | undefined;
-    }
-
-    let { chat, filteredProposals }: Props = $props();
-
-    let currentChatMessages = $state<CurrentChatMessages>();
-
-    const client = getContext<OpenChat>("client");
-
-    let previousChatId: ChatIdentifier | undefined = $state(undefined);
-    let unreadMessages = $state<number>(0);
-    let firstUnreadMention = $state<Mention | undefined>();
-    let creatingCryptoTransfer: { ledger: string; amount: bigint } | undefined = $state(undefined);
-    let buildingMeme = $state(false);
-    //@ts-ignore
-    let memeBuilder: MemeBuilder = $state();
-    let showSearchHeader = $state(false);
-    let searchTerm = $state("");
-    let removeLinkPreviewDetails: { event: EventWrapper<Message>; url: string } | undefined =
-        $state(undefined);
-
-    onMount(() => {
-        // Release any active notifications for the current chat when the component mounts
-        // TODO include thread index
-        if (client.isNativeAndroid()) {
-            switch (chat.id.kind) {
-                case "direct_chat":
-                    releaseNotifications({
-                        kind: "dms",
-                        senderId: chat.id.userId,
-                    });
-                    break;
-                case "group_chat":
-                    releaseNotifications({
-                        kind: "group",
-                        groupId: chat.id.groupId,
-                    });
-                    break;
-                case "channel":
-                    releaseNotifications({
-                        kind: "channel",
-                        communityId: chat.id.communityId,
-                        channelId: chat.id.channelId,
-                    });
-            }
-        }
-
-        const unsubs = [
-            messagesRead.subscribe(() => {
-                unreadMessages = getUnreadMessageCount(chat);
-                firstUnreadMention = client.getFirstUnreadMention(chat);
-            }),
-            subscribe("tokenTransfer", onTokenTransfer),
-            subscribe("createTestMessages", onCreateTestMessages),
-            subscribe("searchChat", onSearchChat),
-        ];
-        return () => {
-            unsubs.forEach((u) => u());
-        };
-    });
-
-    function onTokenTransfer(args: { context: MessageContext; ledger?: string; amount?: bigint }) {
-        if (messageContextsEqual(messageContext, args.context)) {
-            tokenTransfer(args);
-        }
-    }
-
-    function onCreateTestMessages([ctx, num]: [MessageContext, number]) {
-        if (messageContextsEqual(ctx, messageContext)) {
-            createTestMessages(num);
-        }
-    }
-
-    function getUnreadMessageCount(chat: ChatSummary): number {
-        if (client.isPreviewing(chat.id) || client.isLapsed(chat.id)) return 0;
-
-        return messagesRead.unreadMessageCount(chat.id, chat.latestMessage?.event.messageIndex);
-    }
-
-    function onWindowFocus() {
-        client.closeNotificationsForChat(chat.id);
-    }
-
-    function tokenTransfer(detail: { ledger?: string; amount?: bigint }) {
-        keyboard.enableViewportResize();
-        creatingCryptoTransfer = {
-            ledger: detail.ledger ?? $lastCryptoSent ?? LEDGER_CANISTER_ICP,
-            amount: detail.amount ?? BigInt(0),
-        };
-    }
-
-    function createPrizeMessage() {
-        publish("createPrize", messageContext);
-    }
-
-    function createP2PSwapMessage() {
-        publish("createSwap", {
-            fromLedger: $lastCryptoSent ?? LEDGER_CANISTER_ICP,
-            ctx: messageContext,
-        });
-    }
-
-    function onFileSelected(content: AttachmentContent) {
-        localUpdates.draftMessages.setAttachment({ chatId: chat.id }, content);
-    }
-
-    function makeMeme() {
-        keyboard.enableViewportResize();
-        buildingMeme = true;
-        if (memeBuilder !== undefined) {
-            memeBuilder.reset();
-        }
-    }
-
-    function replyTo(ctx: EnhancedReplyContext) {
-        showSearchHeader = false;
-        localUpdates.draftMessages.setReplyingTo({ chatId: chat.id }, ctx);
-    }
-
-    function searchChat(search: string) {
-        onSearchChat(search);
-    }
-
-    function onSearchChat(term: string) {
-        showSearchHeader = true;
-        searchTerm = term;
-    }
-
-    function createTestMessages(total: number): void {
-        function send(n: number) {
-            if (n === total) return;
-
-            sendMessageWithAttachment(randomSentence(), false, undefined);
-
-            window.setTimeout(() => send(n + 1), 500);
-        }
-
-        send(0);
-    }
-
-    function onSendMessage(detail: [string | undefined, User[], boolean]) {
-        if (!canSendAny) return;
-        let [text, mentioned, blockLevelMarkdown] = detail;
-        if ($selectedChatDraftMessageStore?.editingEvent !== undefined) {
-            client
-                .editMessageWithAttachment(
-                    messageContext,
-                    text,
-                    blockLevelMarkdown,
-                    $selectedChatDraftMessageStore.attachment,
-                    $selectedChatDraftMessageStore.editingEvent,
-                )
-                .then((success) => {
-                    if (!success) {
-                        toastStore.showFailureToast(i18nKey("errorEditingMessage"));
-                    }
-                });
-        } else {
-            sendMessageWithAttachment(
-                text,
-                blockLevelMarkdown,
-                $selectedChatDraftMessageStore?.attachment,
-                mentioned,
-            );
-        }
-    }
-
-    function sendMessageWithAttachment(
-        textContent: string | undefined,
-        blockLevelMarkdown: boolean,
-        attachment: AttachmentContent | undefined,
-        mentioned: User[] = [],
-    ) {
-        client.sendMessageWithAttachment(
-            messageContext,
-            textContent,
-            blockLevelMarkdown,
-            attachment,
-            mentioned,
-        );
-    }
-
-    function forwardMessage(msg: Message) {
-        client.forwardMessage(messageContext, msg);
-    }
-
-    function onSetTextContent(txt?: string): void {
-        localUpdates.draftMessages.setTextContent({ chatId: chat.id }, txt);
-    }
-
-    function onRemovePreview(event: EventWrapper<Message>, url: string): void {
-        removeLinkPreviewDetails = {
-            event,
-            url,
-        };
-    }
-
-    function removePreview(yes: boolean): Promise<void> {
-        if (removeLinkPreviewDetails !== undefined && yes) {
-            const { event, url } = removeLinkPreviewDetails;
-
-            client.hideLinkPreview(messageContext, event, url).then((success) => {
-                if (!success) {
-                    toastStore.showFailureToast(i18nKey("errorRemovingLinkPreview"));
-                }
-            });
-        }
-
-        removeLinkPreviewDetails = undefined;
-        return Promise.resolve();
-    }
-
-    function isBlocked(chatSummary: ChatSummary, blockedUsers: ReadonlySet<string>): boolean {
-        return chatSummary.kind === "direct_chat" && blockedUsers.has(chatSummary.them.userId);
-    }
-
-    function defaultCryptoTransferReceiver(): string | undefined {
-        return $selectedChatDraftMessageStore?.replyingTo?.sender?.userId;
-    }
-
-    function onSendMessageWithContent(content: MessageContent) {
-        client.sendMessageWithContent(messageContext, content, false);
-    }
-    let messageContext = $derived({ chatId: chat.id });
-
-    trackedEffect("current-chat", () => {
-        if (previousChatId === undefined || !chatIdentifiersEqual(chat.id, previousChatId)) {
-            previousChatId = chat.id;
-            showSearchHeader = false;
-            unreadMessages = getUnreadMessageCount(chat);
-            firstUnreadMention = client.getFirstUnreadMention(chat);
-            tick().then(() => {
-                if ($messageToForwardStore !== undefined) {
-                    forwardMessage($messageToForwardStore);
-                    messageToForwardStore.set(undefined);
-                }
-            });
-        }
-    });
-    let showFooter = $derived(!showSearchHeader && !$suspendedUserStore);
-    let blocked = $derived(isBlocked(chat, $blockedUsersStore));
-    let frozen = $derived(client.isChatOrCommunityFrozen(chat, $selectedCommunitySummaryStore));
-    let canSendAny = $derived(client.canSendMessage(chat.id, "message"));
-    let preview = $derived(client.isPreviewing(chat.id));
-    let lapsed = $derived(client.isLapsed(chat.id));
-    let canPin = $derived(client.canPinMessages(chat.id));
-    let canBlockUsers = $derived(client.canBlockUsers(chat.id));
-    let canDelete = $derived(client.canDeleteOtherUsersMessages(chat.id));
-    let canReplyInThread = $derived(client.canSendMessage(chat.id, "thread"));
-    let canReact = $derived(client.canReactToMessages(chat.id));
-    let canInvite = $derived(client.canInviteUsers(chat.id));
-    let readonly = $derived(client.isChatReadOnly(chat.id));
-    let externalUrl = $derived(chat.kind === "channel" ? chat.externalUrl : undefined);
-    let privateChatPreview = $derived(client.maskChatMessages(chat));
-    let bot = $derived(
-        chat.kind === "direct_chat" ? botState.externalBots.get(chat.them.userId) : undefined,
-    );
-
-    function onGoToMessageIndex(args: { index: number; preserveFocus: boolean }) {
-        currentChatMessages?.scrollToMessageIndex(args.index, args.preserveFocus);
-    }
-
-    function stopTyping() {
-        if (chat !== undefined) {
-            client.stopTyping(chat.id, $currentUserIdStore);
-        }
-    }
-
-    function startTyping() {
-        if (chat !== undefined) {
-            client.startTyping(chat.id, $currentUserIdStore);
-        }
-    }
-</script>
-
-<svelte:window onfocus={onWindowFocus} />
-
-{#if removeLinkPreviewDetails !== undefined}
-    <AreYouSure title={i18nKey("removePreviewQuestion")} action={removePreview} />
-{/if}
-
-{#if creatingCryptoTransfer !== undefined}
-    <CryptoTransferBuilder
-        {chat}
-        ledger={creatingCryptoTransfer.ledger}
-        defaultReceiver={defaultCryptoTransferReceiver()}
-        {messageContext}
-        onClose={() => {
-            keyboard.disableViewportResize();
-            creatingCryptoTransfer = undefined;
-        }} />
-{/if}
-
-<MemeBuilder onSend={onSendMessageWithContent} bind:this={memeBuilder} bind:open={buildingMeme} />
-
-<Container background={ColourVars.background0} height={"fill"} direction={"vertical"}>
-    {#if showSearchHeader}
-        <CurrentChatSearchHeader
-            {chat}
-            bind:searchTerm
-            {onGoToMessageIndex}
-            onClose={() => (showSearchHeader = false)} />
-    {:else if bot !== undefined && chat.kind === "direct_chat"}
-        <DirectChatHeader {bot} {chat} {onSearchChat}></DirectChatHeader>
-    {:else}
-        <CurrentChatHeader
-            onSearchChat={searchChat}
-            {blocked}
-            {readonly}
-            selectedChatSummary={chat}
-            hasPinned={$selectedChatPinnedMessagesStore.size > 0} />
-    {/if}
-    {#if externalUrl !== undefined}
-        <ExternalContent {privateChatPreview} {frozen} {externalUrl} />
-    {:else}
-        <CurrentChatMessages
-            bind:this={currentChatMessages}
-            onReplyTo={replyTo}
-            {onRemovePreview}
-            {privateChatPreview}
-            {chat}
-            {filteredProposals}
-            {canPin}
-            {canBlockUsers}
-            {canDelete}
-            {canReplyInThread}
-            {canSendAny}
-            {canReact}
-            {canInvite}
-            {readonly}
-            {firstUnreadMention}
-            footer={showFooter}
-            {unreadMessages} />
-    {/if}
-    {#if showFooter}
-        <Footer
-            {chat}
-            attachment={$selectedChatDraftMessageStore?.attachment}
-            editingEvent={$selectedChatDraftMessageStore?.editingEvent}
-            replyingTo={$selectedChatDraftMessageStore?.replyingTo}
-            textContent={$selectedChatDraftMessageStore?.textContent}
-            user={$currentUserStore}
-            mode={"message"}
-            {preview}
-            {lapsed}
-            {blocked}
-            {messageContext}
-            externalContent={externalUrl !== undefined}
-            onCancelReply={() =>
-                localUpdates.draftMessages.setReplyingTo({ chatId: chat.id }, undefined)}
-            onClearAttachment={() =>
-                localUpdates.draftMessages.setAttachment({ chatId: chat.id }, undefined)}
-            onCancelEdit={() => localUpdates.draftMessages.delete({ chatId: chat.id })}
-            {onSetTextContent}
-            onStartTyping={startTyping}
-            onStopTyping={stopTyping}
-            {onFileSelected}
-            {onSendMessage}
-            onMakeMeme={makeMeme}
-            onTokenTransfer={tokenTransfer}
-            onCreatePrizeMessage={createPrizeMessage}
-            onCreateP2PSwapMessage={createP2PSwapMessage} />
-    {/if}
-</Container>
diff --git a/frontend/app/src/components_mobile/home/CurrentChatHeader.svelte b/frontend/app/src/components_mobile/home/CurrentChatHeader.svelte
deleted file mode 100644
index 7f86b087d9..0000000000
--- a/frontend/app/src/components_mobile/home/CurrentChatHeader.svelte
+++ /dev/null
@@ -1,245 +0,0 @@
-<script lang="ts">
-    import Typing from "@shared_components/Typing.svelte";
-    import { activeVideoCall } from "@src/stores/video";
-    import { navigate } from "@utils/navigation";
-    import type { ProfileLinkClickedEvent } from "@webcomponents/profileLink";
-    import { Avatar, Container, SectionHeader } from "component-lib";
-    import type { ChatSummary, DiamondMembershipStatus } from "@client";
-    import {
-        allUsersStore,
-        anonUserStore,
-        chatIdentifiersEqual,
-        chatListScopeStore,
-        publish,
-        restrictToSelectedChat,
-        routeForChatIdentifier,
-        selectedChatIdStore,
-        selectedCommunitySummaryStore,
-        byContext as typersByContext,
-        type OpenChat,
-        type TypersByKey,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import Video from "svelte-material-icons/VideoOutline.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { now } from "../../stores/time";
-    import WithVerifiedBadge from "../icons/WithVerifiedBadge.svelte";
-    import Translatable from "../Translatable.svelte";
-    import ChatSubtext from "./ChatSubtext.svelte";
-    import CurrentChatMenu from "./CurrentChatMenu.svelte";
-    import Badges from "./profile/Badges.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        selectedChatSummary: ChatSummary;
-        blocked: boolean;
-        readonly: boolean;
-        hasPinned: boolean;
-        onSearchChat: (search: string) => void;
-    }
-
-    let { selectedChatSummary, blocked, readonly, hasPinned, onSearchChat }: Props = $props();
-
-    let userId = $derived(
-        selectedChatSummary.kind === "direct_chat" ? selectedChatSummary.them.userId : "",
-    );
-    let isMultiUser = $derived(
-        selectedChatSummary.kind === "group_chat" || selectedChatSummary.kind === "channel",
-    );
-    let isBot = $derived($allUsersStore.get(userId)?.kind === "bot");
-    let hasUserProfile = $derived(!isMultiUser && !isBot);
-    let verified = $derived(
-        selectedChatSummary.kind === "group_chat" && selectedChatSummary.verified,
-    );
-    let canStartVideoCalls = $derived(
-        !blocked && client.canStartVideoCalls(selectedChatSummary.id),
-    );
-    let videoCallInProgress = $derived(selectedChatSummary.videoCallInProgress !== undefined);
-    let inCall = $derived(
-        $activeVideoCall !== undefined &&
-            videoCallInProgress &&
-            chatIdentifiersEqual($activeVideoCall.chatId, selectedChatSummary?.id),
-    );
-    let canStartOrJoinVideoCall = $derived(!inCall && (videoCallInProgress || canStartVideoCalls));
-    let isPublic = $derived(!client.isChatPrivate(selectedChatSummary));
-
-    function clearSelection() {
-        publish("clearSelection");
-    }
-
-    function showGroupDetails() {
-        if ($selectedChatIdStore !== undefined) {
-            if (selectedChatSummary.kind === "direct_chat") {
-                publish("directChatDetails", selectedChatSummary);
-                return;
-            } else {
-                publish("groupChatDetails", selectedChatSummary);
-                return;
-            }
-        }
-    }
-
-    function normaliseChatSummary(_now: number, chatSummary: ChatSummary, typing: TypersByKey) {
-        switch (chatSummary.kind) {
-            case "direct_chat":
-                const them = $allUsersStore.get(chatSummary.them.userId);
-                return {
-                    name: client.displayName(them),
-                    diamondStatus: them?.diamondStatus ?? "inactive",
-                    streak: them?.streak ?? 0,
-                    chitEarned: them?.totalChitEarned,
-                    avatarUrl: client.userAvatarUrl(them),
-                    userId: chatSummary.them.userId,
-                    typing: client.getTypingString(
-                        $_,
-                        $allUsersStore,
-                        { chatId: chatSummary.id },
-                        typing,
-                    ),
-                    username: them ? "@" + them.username : undefined,
-                    eventsTTL: chatSummary.eventsTTL,
-                    uniquePerson: them?.isUniquePerson ?? false,
-                };
-            default:
-                return {
-                    name: chatSummary.name,
-                    diamondStatus: "inactive" as DiamondMembershipStatus["kind"],
-                    streak: 0,
-                    chitEarned: undefined,
-                    avatarUrl: client.groupAvatarUrl(chatSummary, $selectedCommunitySummaryStore),
-                    userId: undefined,
-                    username: undefined,
-                    typing: client.getTypingString(
-                        $_,
-                        $allUsersStore,
-                        { chatId: chatSummary.id },
-                        typing,
-                    ),
-                    eventsTTL: chatSummary.eventsTTL,
-                    uniquePerson: false,
-                };
-        }
-    }
-
-    function openUserProfile(ev?: Event) {
-        if (hasUserProfile) {
-            ev?.target?.dispatchEvent(
-                new CustomEvent<ProfileLinkClickedEvent>("profile-clicked", {
-                    detail: {
-                        userId,
-                        chatButton: false,
-                        inGlobalContext: false,
-                    },
-                    bubbles: true,
-                }),
-            );
-        }
-    }
-
-    function startVideoCall() {
-        publish("startVideoCall", {
-            chatId: selectedChatSummary.id,
-            callType: isPublic ? "broadcast" : "default",
-            join: videoCallInProgress,
-        });
-    }
-
-    function navigateToCommunity(e: Event) {
-        if ($selectedCommunitySummaryStore !== undefined) {
-            navigate(`/community/${$selectedCommunitySummaryStore.id.communityId}`);
-            e.stopPropagation();
-        }
-    }
-
-    function navigateToChannel(e: Event) {
-        if ($selectedCommunitySummaryStore !== undefined) {
-            navigate(routeForChatIdentifier("community", selectedChatSummary.id));
-            e.stopPropagation();
-        }
-    }
-
-    let chat = $derived(normaliseChatSummary($now, selectedChatSummary, $typersByContext));
-</script>
-
-{#snippet menu()}
-    {#if !readonly && !$anonUserStore}
-        <CurrentChatMenu
-            {hasPinned}
-            {selectedChatSummary}
-            {blocked}
-            onShowGroupDetails={showGroupDetails}
-            {onSearchChat} />
-    {/if}
-{/snippet}
-
-{#snippet action(color: string)}
-    <Video {color} />
-{/snippet}
-
-<SectionHeader
-    onAction={canStartOrJoinVideoCall ? startVideoCall : undefined}
-    action={canStartOrJoinVideoCall ? action : undefined}
-    menu={!readonly && !$anonUserStore ? menu : undefined}
-    onBack={$restrictToSelectedChat ? undefined : clearSelection}>
-    {#snippet avatar()}
-        <Avatar onClick={openUserProfile} url={chat.avatarUrl} size={"lg"} name={chat.name} />
-    {/snippet}
-
-    {#snippet title()}
-        <Container onClick={showGroupDetails}>
-            {#if isMultiUser && !readonly}
-                <WithVerifiedBadge {verified}>
-                    <Container gap={"xs"}>
-                        {#if $selectedCommunitySummaryStore !== undefined && $chatListScopeStore.kind === "favourite"}
-                            <span onclick={navigateToCommunity} class="pointer">
-                                {$selectedCommunitySummaryStore.name}
-                            </span>
-                            <span>{">"}</span>
-                            <span onclick={navigateToChannel} class="pointer">
-                                {chat.name}
-                            </span>
-                        {:else}
-                            {chat.name}
-                        {/if}
-                    </Container>
-                </WithVerifiedBadge>
-            {:else if hasUserProfile}
-                <Container crossAxisAlignment={"center"} gap={"xxs"}>
-                    {chat.name ?? chat.username}
-                    <Badges
-                        uniquePerson={chat.uniquePerson}
-                        diamondStatus={chat.diamondStatus}
-                        streak={chat.streak}
-                        chitEarned={chat.chitEarned} />
-                </Container>
-            {:else}
-                {chat.name}
-            {/if}
-        </Container>
-    {/snippet}
-
-    {#snippet subtitle()}
-        <Container onClick={showGroupDetails}>
-            {#if blocked}
-                <Translatable resourceKey={i18nKey("blocked")} />
-            {:else if chat.typing !== undefined}
-                {chat.typing} <Typing />
-            {:else}
-                <ChatSubtext chat={selectedChatSummary} />
-            {/if}
-        </Container>
-    {/snippet}
-</SectionHeader>
-
-<style lang="scss">
-    .pointer {
-        cursor: pointer;
-    }
-
-    .username {
-        font-weight: 200;
-        color: var(--txt-light);
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/CurrentChatMenu.svelte b/frontend/app/src/components_mobile/home/CurrentChatMenu.svelte
deleted file mode 100644
index 0fa259e277..0000000000
--- a/frontend/app/src/components_mobile/home/CurrentChatMenu.svelte
+++ /dev/null
@@ -1,285 +0,0 @@
-<script lang="ts">
-    import { disableMakeProposalFeature } from "@src/utils/features";
-    import { MenuItem } from "component-lib";
-    import {
-        allUsersStore,
-        type ChatSummary,
-        currentUserIdStore,
-        directChatBotsStore,
-        favouritesStore,
-        isProposalGroupStore,
-        type MultiUserChat,
-        notificationsSupported,
-        type OpenChat,
-        platformModeratorStore,
-        publish,
-        selectedChatPinnedMessagesStore,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { canDeleteDirectChat, publishDeleteDirectChat } from "../../utils/directChat";
-    import { toastStore } from "../../stores/toast";
-    import Translatable from "../Translatable.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        selectedChatSummary: ChatSummary;
-        blocked: boolean;
-        hasPinned: boolean;
-        onShowGroupDetails: () => void;
-        onSearchChat: (search: string) => void;
-    }
-
-    let { selectedChatSummary, blocked, hasPinned, onShowGroupDetails, onSearchChat }: Props =
-        $props();
-
-    let botIdToUninstall = $derived(
-        selectedChatSummary.kind === "direct_chat" &&
-            $directChatBotsStore.has(selectedChatSummary.them.userId)
-            ? selectedChatSummary.them.userId
-            : undefined,
-    );
-    let governanceCanisterId = $derived(
-        selectedChatSummary.kind !== "direct_chat" &&
-            selectedChatSummary.subtype?.kind === "governance_proposals"
-            ? selectedChatSummary.subtype.governanceCanisterId
-            : undefined,
-    );
-    let canMakeProposals = $derived(
-        !disableMakeProposalFeature &&
-            (client.tryGetNervousSystem(governanceCanisterId)?.submittingProposalsEnabled ?? false),
-    );
-    // let canMakeProposals = $derived(true);
-    let userId = $derived(
-        selectedChatSummary.kind === "direct_chat" ? selectedChatSummary.them.userId : "",
-    );
-    let isBot = $derived($allUsersStore.get(userId)?.kind === "bot");
-    let isSuspended = $derived($allUsersStore.get(userId)?.suspended ?? false);
-    let showDeleteDirectChat = $derived(canDeleteDirectChat(selectedChatSummary));
-
-    function toggleMuteNotifications(
-        mute: boolean | undefined,
-        muteAtEveryone: boolean | undefined,
-    ) {
-        publish("toggleMuteNotifications", {
-            chatId: selectedChatSummary.id,
-            mute,
-            muteAtEveryone,
-        });
-    }
-
-    function addToFavourites() {
-        client.addToFavourites(selectedChatSummary.id);
-    }
-
-    function removeFromFavourites() {
-        client.removeFromFavourites(selectedChatSummary.id);
-    }
-
-    function copyUrl() {
-        publish("copyUrl");
-    }
-
-    function showGroupDetails() {
-        onShowGroupDetails();
-    }
-
-    function showPinned(chat: MultiUserChat) {
-        publish("showPinned", { chat, pinned: $selectedChatPinnedMessagesStore });
-    }
-
-    function searchChat() {
-        onSearchChat("");
-    }
-
-    function showProposalFilters() {
-        publish("showProposalFilters");
-    }
-
-    function blockUser() {
-        if (selectedChatSummary.kind === "direct_chat") {
-            client.blockUserFromDirectChat(selectedChatSummary.them.userId).then((success) => {
-                if (success) {
-                    toastStore.showSuccessToast(i18nKey("blockUserSucceeded"));
-                } else {
-                    toastStore.showFailureToast(i18nKey("blockUserFailed"));
-                }
-            });
-        }
-    }
-
-    function unblockUser() {
-        if (selectedChatSummary.kind === "direct_chat") {
-            client.unblockUserFromDirectChat(selectedChatSummary.them.userId).then((success) => {
-                if (success) {
-                    toastStore.showSuccessToast(i18nKey("unblockUserSucceeded"));
-                } else {
-                    toastStore.showFailureToast(i18nKey("unblockUserFailed"));
-                }
-            });
-        }
-    }
-
-    function leaveGroup() {
-        if (selectedChatSummary.kind === "direct_chat") return;
-        publish("leaveGroup", {
-            kind: "leave",
-            chatId: selectedChatSummary.id,
-            level: selectedChatSummary.level,
-        });
-    }
-
-    function freezeGroup() {
-        if (selectedChatSummary.id.kind === "group_chat") {
-            client.freezeGroup(selectedChatSummary.id, undefined).then((success) => {
-                if (!success) {
-                    toastStore.showFailureToast(i18nKey("failedToFreezeGroup"));
-                }
-            });
-        }
-    }
-
-    function unfreezeGroup() {
-        if (selectedChatSummary.id.kind === "group_chat") {
-            client.unfreezeGroup(selectedChatSummary.id).then((success) => {
-                if (!success) {
-                    toastStore.showFailureToast(i18nKey("failedToUnfreezeGroup"));
-                }
-            });
-        }
-    }
-
-    function onSuspendUser() {
-        publish("suspendUser", userId);
-    }
-
-    function unsuspendUser() {
-        client.unsuspendUser(userId).then((success) => {
-            if (success) {
-                toastStore.showSuccessToast(i18nKey("unsuspendedUser"));
-            } else {
-                toastStore.showFailureToast(i18nKey("failedToUnsuspendUser"));
-            }
-        });
-    }
-
-    function makeProposal() {
-        publish("makeProposal");
-    }
-
-    function removeBot(botId: string) {
-        client
-            .uninstallBot({ kind: "direct_chat", userId: $currentUserIdStore }, botId)
-            .then((success) => {
-                if (!success) {
-                    toastStore.showFailureToast(i18nKey("bots.manage.removeFailed"));
-                }
-            });
-    }
-
-</script>
-
-<MenuItem onclick={searchChat}>
-    <Translatable resourceKey={i18nKey("searchChat")} />
-</MenuItem>
-{#if !$favouritesStore.has(selectedChatSummary.id)}
-    <MenuItem onclick={addToFavourites}>
-        <Translatable resourceKey={i18nKey("communities.addToFavourites")} />
-    </MenuItem>
-{:else}
-    <MenuItem onclick={removeFromFavourites}>
-        <Translatable resourceKey={i18nKey("communities.removeFromFavourites")} />
-    </MenuItem>
-{/if}
-<MenuItem onclick={copyUrl}>
-    <Translatable resourceKey={i18nKey("copyUrl")} />
-</MenuItem>
-{#if selectedChatSummary.kind === "direct_chat"}
-    <MenuItem onclick={showGroupDetails}>
-        <Translatable resourceKey={i18nKey("chatDetails")} />
-    </MenuItem>
-{/if}
-{#if $isProposalGroupStore}
-    <MenuItem onclick={showProposalFilters}>
-        <Translatable resourceKey={i18nKey("proposal.filter")} />
-    </MenuItem>
-{/if}
-{#if selectedChatSummary.kind === "group_chat" || selectedChatSummary.kind === "channel"}
-    {#if hasPinned}
-        <MenuItem onclick={() => showPinned(selectedChatSummary)}>
-            <Translatable resourceKey={i18nKey("showPinned")} />
-        </MenuItem>
-    {/if}
-    <MenuItem onclick={showGroupDetails}>
-        <Translatable resourceKey={i18nKey("groupDetails", undefined, selectedChatSummary.level)} />
-    </MenuItem>
-
-    {#if canMakeProposals}
-        <MenuItem onclick={makeProposal}>
-            <Translatable resourceKey={i18nKey("proposal.makeProposal")} />
-        </MenuItem>
-    {/if}
-
-    {#if $platformModeratorStore && selectedChatSummary.kind === "group_chat"}
-        {#if client.isChatFrozen(selectedChatSummary.id)}
-            <MenuItem danger onclick={unfreezeGroup}>
-                <Translatable resourceKey={i18nKey("unfreezeGroup")} />
-            </MenuItem>
-        {:else}
-            <MenuItem danger onclick={freezeGroup}>
-                <Translatable resourceKey={i18nKey("freezeGroup")} />
-            </MenuItem>
-        {/if}
-    {/if}
-
-    {#if client.canLeaveGroup(selectedChatSummary.id)}
-        <MenuItem danger onclick={leaveGroup}>
-            <Translatable
-                resourceKey={i18nKey("leaveGroup", undefined, selectedChatSummary.level, true)} />
-        </MenuItem>
-    {/if}
-{/if}
-{#if selectedChatSummary.kind === "direct_chat" && !isBot}
-    {#if notificationsSupported}
-        {#if selectedChatSummary.membership.notificationsMuted === true}
-            <MenuItem onclick={() => toggleMuteNotifications(false, undefined)}>
-                <Translatable resourceKey={i18nKey("unmuteNotifications")} />
-            </MenuItem>
-        {:else}
-            <MenuItem onclick={() => toggleMuteNotifications(true, undefined)}>
-                <Translatable resourceKey={i18nKey("muteNotifications")} />
-            </MenuItem>
-        {/if}
-    {/if}
-    {#if blocked}
-        <MenuItem onclick={unblockUser}>
-            <Translatable resourceKey={i18nKey("unblockUser")} />
-        </MenuItem>
-    {:else}
-        <MenuItem onclick={blockUser}>
-            <Translatable resourceKey={i18nKey("blockUser")} />
-        </MenuItem>
-    {/if}
-    {#if $platformModeratorStore}
-        {#if isSuspended}
-            <MenuItem onclick={unsuspendUser}>
-                <Translatable resourceKey={i18nKey("unsuspendUser")} />
-            </MenuItem>
-        {:else}
-            <MenuItem onclick={onSuspendUser}>
-                <Translatable resourceKey={i18nKey("suspendUser")} />
-            </MenuItem>
-        {/if}
-    {/if}
-{/if}
-{#if botIdToUninstall !== undefined}
-    <MenuItem onclick={() => removeBot(botIdToUninstall)}>
-        <Translatable resourceKey={i18nKey("bots.manage.remove")} />
-    </MenuItem>
-{/if}
-{#if showDeleteDirectChat}
-    <MenuItem danger onclick={() => publishDeleteDirectChat(selectedChatSummary)}>
-        <Translatable resourceKey={i18nKey("deleteChat")} />
-    </MenuItem>
-{/if}
diff --git a/frontend/app/src/components_mobile/home/CurrentChatMessages.svelte b/frontend/app/src/components_mobile/home/CurrentChatMessages.svelte
deleted file mode 100644
index d737957f57..0000000000
--- a/frontend/app/src/components_mobile/home/CurrentChatMessages.svelte
+++ /dev/null
@@ -1,421 +0,0 @@
-<script lang="ts">
-    import { trackedEffect } from "@src/utils/effects.svelte";
-    import {
-        type ChatEvent as ChatEventType,
-        type ChatIdentifier,
-        type ChatSummary,
-        type EnhancedReplyContext,
-        type EventWrapper,
-        type Mention,
-        type Message,
-        type OpenChat,
-        type ReadonlySet,
-        allUsersStore,
-        chatIdentifiersEqual,
-        chatListScopeStore,
-        chatsInitialisedStore,
-        currentUserIdStore,
-        eventsStore,
-        failedMessagesStore,
-        FilteredProposals,
-        localUpdates,
-        messageIndexStore,
-        messagesRead,
-        ROLE_NONE,
-        routeForChatIdentifier,
-        selectedChatDraftMessageStore,
-        selectedChatExpandedDeletedMessageStore,
-        selectedChatIdStore,
-        selectedChatPinnedMessagesStore,
-        selectedCommunitySummaryStore,
-        showMiddle,
-        stripSuspendedGate,
-        subscribe,
-        threadOpenStore,
-        unconfirmedStore,
-        type ImageContent,
-        type MemeFighterContent,
-        type VideoContent,
-        chatIdentifierToString,
-    } from "@client";
-    import { navigate } from "@utils/navigation";
-    import { getContext, untrack, setContext, onMount } from "svelte";
-    import Witch from "@shared_components/Witch.svelte";
-    import {
-        chatStartItem,
-        flattenTimeline,
-        type FlatChatItem,
-    } from "@shared_components/flatChatItems";
-    import ChatEvent from "./ChatEvent.svelte";
-    import ChatEventList from "./ChatEventList.svelte";
-    import InitialChatMessage from "./InitialChatMessage.svelte";
-    import PrivatePreview from "./PrivatePreview.svelte";
-    import TimelineDate from "./TimelineDate.svelte";
-    import ZoomedImage from "./ZoomedImage.svelte";
-    import ZoomedVideo from "./ZoomedVideo.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        chat: ChatSummary;
-        unreadMessages: number;
-        readonly: boolean;
-        firstUnreadMention: Mention | undefined;
-        canPin: boolean;
-        canBlockUsers: boolean;
-        canDelete: boolean;
-        canSendAny: boolean;
-        canReact: boolean;
-        canInvite: boolean;
-        footer: boolean;
-        canReplyInThread: boolean;
-        filteredProposals: FilteredProposals | undefined;
-        privateChatPreview: boolean;
-        onRemovePreview: (event: EventWrapper<Message>, url: string) => void;
-        onReplyTo: (ctx: EnhancedReplyContext) => void;
-    }
-
-    let {
-        chat,
-        unreadMessages,
-        readonly,
-        firstUnreadMention,
-        canPin,
-        canBlockUsers,
-        canDelete,
-        canSendAny,
-        canReact,
-        canInvite,
-        footer,
-        canReplyInThread,
-        filteredProposals,
-        privateChatPreview,
-        onRemovePreview,
-        onReplyTo,
-    }: Props = $props();
-
-    // treat this as if it might be null so we don't get errors when it's unmounted
-    let chatEventList: ChatEventList | undefined = $state();
-    let messagesDiv: HTMLDivElement | undefined = $state();
-    let messagesDivHeight: number = $state(0);
-    let initialised = $state(false);
-    let currentChatId: ChatIdentifier | undefined = $state();
-    let imageContent: ImageContent | MemeFighterContent | undefined = $state();
-    let videoContent: VideoContent | undefined = $state();
-
-    onMount(() => {
-        const unsubs = [
-            subscribe("focusImage", (data) => {
-                if (data !== imageContent) {
-                    imageContent = data;
-                    videoContent = undefined;
-                }
-            }),
-            subscribe("playVideo", (data) => {
-                if (data !== videoContent) {
-                    imageContent = undefined;
-                    videoContent = data;
-                }
-            }),
-        ];
-
-        return () => {
-            unsubs.forEach((u) => u());
-        };
-    });
-
-    // Allows child nodes, like IntersectionObserver to access the root scrollable node to allow rootMargin to be used.
-    let scrollState = $state<{ node: HTMLElement | undefined }>({ node: undefined });
-    setContext("scrollable-messages-div", scrollState);
-    $effect(() => {
-        if (messagesDiv) {
-            scrollState.node = messagesDiv;
-        }
-    });
-
-    function onGoToMessageIndex(detail: { index: number }) {
-        doGoToMessageIndex(detail.index);
-    }
-
-    function doGoToMessageIndex(index: number): void {
-        navigate(routeForChatIdentifier($chatListScopeStore.kind, chat.id));
-        chatEventList?.scrollToMessageIndex(messageContext, index, false);
-    }
-
-    export function scrollToMessageIndex(index: number, preserveFocus: boolean) {
-        chatEventList?.scrollToMessageIndex(messageContext, index, preserveFocus);
-    }
-
-    function replyTo(replyContext: EnhancedReplyContext) {
-        if (!canSendAny) return;
-        onReplyTo(replyContext);
-    }
-
-    function onEditEvent(ev: EventWrapper<Message>) {
-        localUpdates.draftMessages.setEditing({ chatId: chat.id }, ev, $allUsersStore);
-    }
-
-    export function externalGoToMessage(messageIndex: number): void {
-        chatEventList?.onMessageWindowLoaded({
-            context: messageContext,
-            messageIndex,
-            initialLoad: false,
-        });
-    }
-
-    function isMe(evt: EventWrapper<ChatEventType>): boolean {
-        if (evt.event.kind === "message") {
-            return evt.event.sender === $currentUserIdStore;
-        }
-        if (evt.event.kind === "group_chat_created") {
-            return evt.event.created_by === $currentUserIdStore;
-        }
-        return false;
-    }
-
-    function isPinned(store: ReadonlySet<number>, evt: EventWrapper<ChatEventType>): boolean {
-        if (evt.event.kind === "message") {
-            return store.has(evt.event.messageIndex);
-        }
-
-        return false;
-    }
-
-    function isCollapsed(
-        ew: EventWrapper<ChatEventType>,
-        filteredProposals: FilteredProposals | undefined,
-    ): boolean {
-        return ew.event.kind === "message" && isCollpasedProposal(ew.event, filteredProposals);
-    }
-
-    function toggleMessageExpansion(ew: EventWrapper<ChatEventType>, expand: boolean) {
-        if (ew.event.kind === "message" && ew.event.content.kind === "proposal_content") {
-            client.toggleProposalFilterMessageExpansion(ew.event.messageId, expand);
-        }
-    }
-
-    function groupInner(filteredProposals: FilteredProposals | undefined) {
-        return (events: EventWrapper<ChatEventType>[]) => {
-            return client.groupWhile((a, b) => inSameGroup(a, b, filteredProposals), events);
-        };
-    }
-
-    // Each expanded proposal should be in a group by itself
-    // All collapsed proposals should be grouped together
-    // Otherwise group by sender
-    function inSameGroup(
-        a: EventWrapper<ChatEventType>,
-        b: EventWrapper<ChatEventType>,
-        filteredProposals: FilteredProposals | undefined,
-    ): boolean {
-        if (a.event.kind === "message" && b.event.kind === "message") {
-            const aKind = a.event.content.kind;
-            const bKind = b.event.content.kind;
-            if (aKind === "proposal_content" || bKind === "proposal_content") {
-                return (
-                    isCollpasedProposal(a.event, filteredProposals) &&
-                    isCollpasedProposal(b.event, filteredProposals)
-                );
-            } else {
-                return client.sameUser(a, b);
-            }
-        }
-        return false;
-    }
-
-    function isCollpasedProposal(
-        message: Message,
-        filteredProposals: FilteredProposals | undefined,
-    ): boolean {
-        if (message.content.kind !== "proposal_content") return false;
-        return filteredProposals?.isCollapsed(message.messageId, message.content.proposal) ?? false;
-    }
-
-    function shouldShowAvatar(
-        chat: ChatSummary,
-        earliestLoadedEventIndex: number | undefined,
-    ): boolean {
-        // If this is an empty chat, show the avatar
-        if (isEmptyChat) {
-            return true;
-        }
-        // Otherwise, only show the avatar if we have loaded right back to the earliest available events
-        if (earliestLoadedEventIndex === undefined) {
-            return false;
-        }
-        // For new direct chats the first event is the 'DirectChatCreated' event which we only load a short while after
-        // sending the first message, so to prevent a short flicker with no avatar, we still show the avatar if the
-        // earliest loaded event index is 1, even though event 0 is available
-        const indexRequired = Math.max(client.earliestAvailableEventIndex(chat), 1);
-        return earliestLoadedEventIndex <= indexRequired;
-    }
-    let privateCommunityPreview = $derived(
-        $selectedCommunitySummaryStore !== undefined &&
-            ($selectedCommunitySummaryStore.membership.role === ROLE_NONE ||
-                $selectedCommunitySummaryStore.membership.lapsed) &&
-            (!$selectedCommunitySummaryStore.public ||
-                stripSuspendedGate($selectedCommunitySummaryStore.gateConfig.gate).kind !==
-                    "no_gate"),
-    );
-    let privatePreview = $derived(privateCommunityPreview || privateChatPreview);
-    let isEmptyChat = $derived(chat.latestEventIndex <= 0 || privatePreview);
-
-    trackedEffect("current-chat-messages", () => {
-        if (currentChatId === undefined || !chatIdentifiersEqual(chat.id, currentChatId)) {
-            currentChatId = chat.id;
-            initialised = false;
-
-            // If the chat is empty, there is nothing to initialise, so we can set initialised to true
-            if (isEmptyChat) {
-                initialised = true;
-            }
-        }
-    });
-    let showAvatar = $derived(initialised && shouldShowAvatar(chat, $eventsStore[0]?.index));
-    let messageContext = $derived({ chatId: chat?.id, threadRootMessageIndex: undefined });
-    let timeline = $derived(
-        client.groupEvents(
-            [...$eventsStore].reverse(),
-            $currentUserIdStore,
-            chat.kind === "channel" && chat.public,
-            $selectedChatExpandedDeletedMessageStore,
-            groupInner(filteredProposals),
-        ),
-    );
-    let items = $derived.by<FlatChatItem[]>(() => {
-        const flat: FlatChatItem[] = flattenTimeline(timeline);
-        if (showAvatar) {
-            // rendered at the oldest end of the list (the visual top)
-            flat.push(chatStartItem(chatIdentifierToString(chat.id)));
-        }
-        return flat;
-    });
-
-    // Scroll to the route's message index when it changes — and also on the
-    // effect's FIRST run: panels/modal pages can unmount the chat view, so a
-    // pinned-message tap navigates while the old instance is being destroyed
-    // (where it is silently swallowed) and the remounted instance must pick
-    // the navigation up from the route. Only when the thread is not open.
-    let previousChatId: ChatIdentifier | undefined = undefined;
-    let previousMessageIndex: number | undefined = undefined;
-    $effect(() => {
-        const idx = $messageIndexStore;
-        const sameChat = chatIdentifiersEqual($selectedChatIdStore, previousChatId);
-        if (
-            !$threadOpenStore &&
-            $chatsInitialisedStore &&
-            idx !== undefined &&
-            (!sameChat || idx !== previousMessageIndex)
-        ) {
-            untrack(() => {
-                scrollToMessageIndex(idx, false);
-            });
-        }
-        previousChatId = $selectedChatIdStore;
-        previousMessageIndex = idx;
-    });
-</script>
-
-<Witch />
-
-<div class="chat_messages_wrapper">
-    {#if privatePreview}
-        <div class="private-preview">
-            <PrivatePreview />
-            {#if showAvatar}
-                <InitialChatMessage {chat} />
-            {/if}
-        </div>
-    {:else}
-        <ChatEventList
-            bind:this={chatEventList}
-            rootSelector={"chat-messages"}
-            threadRootEvent={undefined}
-            maintainScroll
-            visible={$showMiddle}
-            {readonly}
-            {unreadMessages}
-            {firstUnreadMention}
-            {footer}
-            {items}
-            {chat}
-            bind:initialised
-            bind:messagesDiv
-            bind:messagesDivHeight>
-            {#snippet row(
-                item,
-                { isAccepted, isConfirmed, isFailed, isReadByMe, messageObserver, focusIndex },
-            )}
-                {#if item.kind === "timeline_date"}
-                    <TimelineDate timestamp={item.timestamp} />
-                {:else if item.kind === "chat_start"}
-                    <InitialChatMessage {chat} />
-                {:else}
-                    {@const evt = item.event}
-                    <ChatEvent
-                        observer={messageObserver}
-                        focused={evt.event.kind === "message" &&
-                            evt.event.messageIndex === focusIndex &&
-                            !isFailed($failedMessagesStore, evt)}
-                        accepted={isAccepted($unconfirmedStore, evt)}
-                        confirmed={isConfirmed($unconfirmedStore, evt)}
-                        failed={isFailed($failedMessagesStore, evt)}
-                        readByMe={isReadByMe($messagesRead, evt)}
-                        chatId={chat.id}
-                        chatType={chat.kind}
-                        me={isMe(evt)}
-                        first={item.first}
-                        last={item.last}
-                        {readonly}
-                        {canPin}
-                        {canBlockUsers}
-                        {canDelete}
-                        {canSendAny}
-                        {canReact}
-                        {canInvite}
-                        {canReplyInThread}
-                        collapsed={isCollapsed(evt, filteredProposals)}
-                        supportsEdit
-                        supportsReply
-                        threadRootMessage={undefined}
-                        publicGroup={(chat.kind === "group_chat" || chat.kind === "channel") &&
-                            chat.public}
-                        pinned={isPinned($selectedChatPinnedMessagesStore, evt)}
-                        editing={$selectedChatDraftMessageStore?.editingEvent === evt}
-                        onReplyTo={replyTo}
-                        {onRemovePreview}
-                        {onEditEvent}
-                        {onGoToMessageIndex}
-                        onExpandMessage={() => toggleMessageExpansion(evt, true)}
-                        onCollapseMessage={() => toggleMessageExpansion(evt, false)}
-                        event={evt} />
-                {/if}
-            {/snippet}
-        </ChatEventList>
-    {/if}
-    {#if imageContent}
-        <ZoomedImage onClose={() => (imageContent = undefined)} {imageContent} />
-    {/if}
-    {#if videoContent}
-        <ZoomedVideo onClose={() => (videoContent = undefined)} {videoContent} />
-    {/if}
-</div>
-
-<style lang="scss">
-    .chat_messages_wrapper {
-        position: relative;
-        display: flex;
-        flex: 1;
-        width: 100%;
-        overflow: auto;
-    }
-
-    .private-preview {
-        flex: 1 1 0;
-        display: flex;
-        flex-direction: column-reverse;
-        overflow-y: auto;
-        padding: var(--sp-md) var(--sp-lg) 0 var(--sp-lg);
-        gap: var(--sp-xs);
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/DeletedContent.svelte b/frontend/app/src/components_mobile/home/DeletedContent.svelte
deleted file mode 100644
index e386ba1245..0000000000
--- a/frontend/app/src/components_mobile/home/DeletedContent.svelte
+++ /dev/null
@@ -1,65 +0,0 @@
-<script lang="ts">
-    import { BodySmall, Column } from "component-lib";
-    import {
-        OPENCHAT_BOT_USER_ID,
-        selectedChatWebhooksStore,
-        selectedCommunityMembersStore,
-        type DeletedContent,
-        type OpenChat,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { i18nKey } from "../../i18n/i18n";
-    import Translatable from "../Translatable.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        content: DeletedContent;
-        undeleting: boolean;
-        me: boolean;
-    }
-
-    let { content, undeleting }: Props = $props();
-
-    let date = $derived(new Date(Number(content.timestamp)));
-    let timestampStr = $derived(
-        `${client.toLongDateString(date)} @ ${client.toShortTimeString(date)}`,
-    );
-    let username = $derived(
-        client.getDisplayName(
-            content.deletedBy,
-            $selectedCommunityMembersStore,
-            $selectedChatWebhooksStore,
-        ),
-    );
-</script>
-
-<Column padding={["xs", "sm"]}>
-    <BodySmall fontWeight={"light"} colour={"textTertiary"} italic={true}>
-        {#if undeleting}
-            <Translatable
-                resourceKey={i18nKey("undeletingMessage", {
-                    username,
-                    timestamp: timestampStr,
-                })} />
-        {:else if content.deletedBy === OPENCHAT_BOT_USER_ID}
-            <Markdown
-                text={$_("messageDeletedByOpenChatBot", {
-                    values: {
-                        username,
-                        timestamp: timestampStr,
-                        rules: "/guidelines?section=3",
-                        modclub: "https://modclub.ai/",
-                    },
-                })} />
-        {:else}
-            <Translatable
-                resourceKey={i18nKey("messageDeleted", {
-                    username,
-                    timestamp: timestampStr,
-                })} />
-        {/if}
-    </BodySmall>
-</Column>
diff --git a/frontend/app/src/components_mobile/home/DisappearLabel.svelte b/frontend/app/src/components_mobile/home/DisappearLabel.svelte
deleted file mode 100644
index 87e13f2fef..0000000000
--- a/frontend/app/src/components_mobile/home/DisappearLabel.svelte
+++ /dev/null
@@ -1,50 +0,0 @@
-<script lang="ts">
-    import { Tooltip } from "component-lib";
-    import type { OpenChat } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import CameraTimer from "svelte-material-icons/CameraTimer.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import Translatable from "../Translatable.svelte";
-
-    const client = getContext<OpenChat>("client");
-    interface Props {
-        ttl: bigint;
-    }
-
-    let { ttl }: Props = $props();
-</script>
-
-<Tooltip position={"bottom"} align={"end"}>
-    <div class="disappears">
-        <div class="expires">
-            <CameraTimer size={"1em"} color={"var(--txt-light)"} />
-        </div>
-        <div class="name">{client.formatDisappearingMessageTime(Number(ttl), $_)}</div>
-    </div>
-    {#snippet popup()}
-        <Translatable
-            resourceKey={i18nKey("disappearingMessages.summary", {
-                duration: client.formatDuration(Number(ttl)),
-            })} />
-    {/snippet}
-</Tooltip>
-
-<style lang="scss">
-    .disappears {
-        display: flex;
-        gap: $sp2;
-        align-items: center;
-        text-transform: uppercase;
-        background-color: var(--chatSummary-bg-selected);
-        padding: $sp2 $sp3;
-        border-radius: $sp3;
-
-        .expires {
-            $size: 12px;
-            flex: 0 0 $size;
-            width: $size;
-            height: $size;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/DisappearingMessageTimeUpdated.svelte b/frontend/app/src/components_mobile/home/DisappearingMessageTimeUpdated.svelte
deleted file mode 100644
index 6c8e1115c9..0000000000
--- a/frontend/app/src/components_mobile/home/DisappearingMessageTimeUpdated.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script lang="ts">
-    import type { OpenChat, UserSummary } from "@client";
-    import { allUsersStore } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { buildDisplayName } from "../../utils/user";
-    import NonMessageEvent from "./NonMessageEvent.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        user: UserSummary | undefined;
-        changedBy: string;
-        newTimeToLive: bigint | undefined;
-        timestamp: bigint;
-    }
-
-    let { user, changedBy, newTimeToLive, timestamp }: Props = $props();
-
-    let me = $derived(changedBy === user?.userId);
-    let changedByStr = $derived(buildDisplayName($allUsersStore, changedBy, me ? "me" : "user"));
-    let text = $derived(
-        newTimeToLive !== undefined
-            ? $_("disappearingMessages.timeUpdatedBy", {
-                  values: {
-                      changedBy: changedByStr,
-                      duration: client.formatDuration(Number(newTimeToLive)),
-                  },
-              })
-            : $_("disappearingMessages.disabledBy", {
-                  values: {
-                      changedBy: changedByStr,
-                  },
-              }),
-    );
-</script>
-
-<NonMessageEvent {text} {timestamp} />
diff --git a/frontend/app/src/components_mobile/home/DisappearingMessagesSummary.svelte b/frontend/app/src/components_mobile/home/DisappearingMessagesSummary.svelte
deleted file mode 100644
index 4162f393d6..0000000000
--- a/frontend/app/src/components_mobile/home/DisappearingMessagesSummary.svelte
+++ /dev/null
@@ -1,40 +0,0 @@
-<script lang="ts">
-    import type { OpenChat } from "@client";
-    import { getContext } from "svelte";
-    import Translatable from "../Translatable.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        ttl: bigint | undefined;
-    }
-
-    let { ttl }: Props = $props();
-</script>
-
-{#if ttl !== undefined}
-    <div class="disappearing">
-        <h4>
-            <Translatable resourceKey={i18nKey("disappearingMessages.label")} />
-        </h4>
-        <p>
-            <Translatable
-                resourceKey={i18nKey("disappearingMessages.summary", {
-                    duration: client.formatDuration(Number(ttl)),
-                })} />
-        </p>
-    </div>
-{/if}
-
-<style lang="scss">
-    .disappearing {
-        margin-bottom: $sp4;
-        h4 {
-            margin-bottom: $sp3;
-        }
-        p {
-            @include font(light, normal, fs-90);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/DraftMediaMessage.svelte b/frontend/app/src/components_mobile/home/DraftMediaMessage.svelte
deleted file mode 100644
index 93ca1d6b92..0000000000
--- a/frontend/app/src/components_mobile/home/DraftMediaMessage.svelte
+++ /dev/null
@@ -1,57 +0,0 @@
-<script lang="ts">
-    import { Row } from "component-lib";
-    import type { AttachmentContent } from "@client";
-    import { currentUserIdStore } from "@client";
-    import AudioContent from "./AudioContent.svelte";
-    import CryptoContent from "./CryptoContent.svelte";
-    import FileContent from "./FileContent.svelte";
-    import GiphyAttached from "./GiphyAttached.svelte";
-    import ImageContent from "./ImageContent.svelte";
-    import P2PSwapContent from "./P2PSwapContent.svelte";
-    import PrizeContent from "./PrizeContent.svelte";
-    import VideoContent from "./VideoContent.svelte";
-
-    interface Props {
-        content: AttachmentContent;
-        onRemoveAttachment?: () => void;
-    }
-
-    let { content, onRemoveAttachment }: Props = $props();
-</script>
-
-<Row>
-    {#if content.kind === "video_content"}
-        <VideoContent
-            onRemove={onRemoveAttachment}
-            {content}
-            me
-            draft
-            edited={false}
-            fill={false} />
-    {:else if content.kind === "audio_content"}
-        <AudioContent onRemove={onRemoveAttachment} {content} me draft edited={false} />
-    {:else if content.kind === "image_content"}
-        <ImageContent
-            onRemove={onRemoveAttachment}
-            {content}
-            me
-            draft
-            edited={false}
-            fill={false} />
-    {:else if content.kind === "giphy_content"}
-        <GiphyAttached onRemove={onRemoveAttachment} {content} />
-    {:else if content.kind === "crypto_content"}
-        <CryptoContent
-            onRemove={onRemoveAttachment}
-            {content}
-            me
-            draft
-            senderId={$currentUserIdStore} />
-    {:else if content.kind === "p2p_swap_content_initial"}
-        <P2PSwapContent draft me onRemove={onRemoveAttachment} {content} />
-    {:else if content.kind === "prize_content_initial"}
-        <PrizeContent me draft onRemove={onRemoveAttachment} {content} />
-    {:else if content.kind === "file_content"}
-        <FileContent onRemove={onRemoveAttachment} edited={false} me {content} draft />
-    {/if}
-</Row>
diff --git a/frontend/app/src/components_mobile/home/EmailSigninFeedback.svelte b/frontend/app/src/components_mobile/home/EmailSigninFeedback.svelte
deleted file mode 100644
index ef7f0ee3f4..0000000000
--- a/frontend/app/src/components_mobile/home/EmailSigninFeedback.svelte
+++ /dev/null
@@ -1,52 +0,0 @@
-<script lang="ts">
-    import { iconSize } from "@client";
-    import CopyIcon from "svelte-material-icons/ContentCopy.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import Translatable from "../Translatable.svelte";
-
-    interface Props {
-        polling: boolean;
-        code: string | undefined;
-        onCopy?: (code?: string) => void;
-    }
-
-    let { polling, code, onCopy }: Props = $props();
-</script>
-
-<p>
-    <Translatable
-        resourceKey={i18nKey(!polling ? "loginDialog.generatingLink" : "loginDialog.checkEmail")} />
-
-    {#if polling && code !== undefined}
-        <div class="code-wrapper">
-            <div class="code">
-                {code}
-            </div>
-            <div class="copy" onclick={() => onCopy?.(code)}>
-                <CopyIcon size={$iconSize} color={"var(--icon-txt)"} />
-            </div>
-        </div>
-    {/if}
-</p>
-
-<style lang="scss">
-    .code-wrapper {
-        margin-top: $sp4;
-        display: flex;
-        gap: $sp3;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .code {
-        font-family: Menlo, Monaco, "Courier New", monospace;
-        @include font-size(fs-160);
-    }
-
-    .copy {
-        cursor: pointer;
-        position: relative;
-        top: 2px;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/EmojiAutocompleter.svelte b/frontend/app/src/components_mobile/home/EmojiAutocompleter.svelte
deleted file mode 100644
index 1427a43099..0000000000
--- a/frontend/app/src/components_mobile/home/EmojiAutocompleter.svelte
+++ /dev/null
@@ -1,117 +0,0 @@
-<script lang="ts">
-    import { ColourVars, Column, MenuItem } from "component-lib";
-    import { type EmojiSummary, type SelectedEmoji } from "@client";
-    import { untrack } from "svelte";
-    import { searchAllEmojis, summaryToSelectedEmoji } from "../../utils/emojis";
-
-    interface Props {
-        query: string | undefined;
-        offset: number;
-        onSelect: (emoji: SelectedEmoji) => void;
-        onClose: () => void;
-    }
-
-    let { query, offset, onSelect, onClose }: Props = $props();
-
-    let index = $state(0);
-    let matches: EmojiSummary[] = $state([]);
-
-    // this is definitely a bit horrible. It seems to be necessary when we use the virtual list.
-    const ITEM_HEIGHT = 43.2;
-    $effect(() => {
-        if (query !== undefined) {
-            search(query);
-        }
-    });
-
-    function search(query: string) {
-        untrack(() => {
-            searchAllEmojis(query).then((m) => {
-                matches = m;
-            });
-        });
-    }
-
-    function select(match: EmojiSummary) {
-        onSelect(summaryToSelectedEmoji(match));
-    }
-
-    function onKeyDown(ev: KeyboardEvent): void {
-        switch (ev.key) {
-            case "ArrowDown":
-                index = (index + 1) % matches.length;
-                ev.preventDefault();
-                ev.stopPropagation();
-                break;
-            case "ArrowUp":
-                index = index === 0 ? matches.length - 1 : index - 1;
-                ev.preventDefault();
-                ev.stopPropagation();
-                break;
-            case "Escape":
-                onClose();
-                ev.preventDefault();
-                ev.stopPropagation();
-                break;
-            case "Enter":
-                const match = matches[index];
-                if (match) {
-                    select(match);
-                    ev.preventDefault();
-                    ev.stopPropagation();
-                }
-                break;
-        }
-    }
-</script>
-
-<div class="picker" style={`bottom: ${offset}px; height: ${matches.length * ITEM_HEIGHT}px`}>
-    <Column backgroundColor={ColourVars.background1}>
-        {#each matches as match, i}
-            <MenuItem selected={i === index} onclick={() => select(match)}>
-                {#snippet icon()}
-                    <div class="emoji">
-                        {#if match.kind === "native"}
-                            {match.unicode}
-                        {:else}
-                            <img class="custom-emoji" src={match.url} alt={match.code} />
-                        {/if}
-                    </div>
-                {/snippet}
-                :{match.code}:
-            </MenuItem>
-        {/each}
-    </Column>
-</div>
-
-<svelte:body onkeydown={onKeyDown} />
-
-<style lang="scss">
-    :global(.picker .menu) {
-        box-shadow: none;
-        position: relative;
-        width: 100%;
-        height: 100%;
-        @include z-index("footer-overlay");
-    }
-
-    .picker {
-        position: absolute;
-        z-index: 10;
-        width: 100%;
-        max-height: calc(var(--vh, 1vh) * 50);
-        overflow: auto;
-        left: 0;
-    }
-    .emoji {
-        @include font(book, normal, fs-160);
-        margin-right: $sp4;
-    }
-
-    .custom-emoji {
-        width: 1em;
-        height: 1em;
-        object-fit: contain;
-        vertical-align: middle;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/EmojiPicker.svelte b/frontend/app/src/components_mobile/home/EmojiPicker.svelte
deleted file mode 100644
index bdff53f714..0000000000
--- a/frontend/app/src/components_mobile/home/EmojiPicker.svelte
+++ /dev/null
@@ -1,195 +0,0 @@
-<script lang="ts">
-    import "emoji-picker-element";
-    import type {
-        EmojiClickEvent,
-        SkinTone,
-        SkinToneChangeEvent,
-    } from "emoji-picker-element/shared";
-    import {
-        emojiGroupNames,
-        PremiumItem,
-        premiumItemsStore,
-        premiumPrices,
-        type CustomEmoji,
-        type SelectedEmoji,
-    } from "@client";
-    import { onMount, tick } from "svelte";
-    import { currentTheme } from "../../theme/themes";
-    import PremiumItemPayment from "../PremiumItemPayment.svelte";
-
-    interface Props {
-        mode?: "message" | "reaction" | "thread";
-        searchInputPadding?: boolean;
-        onEmojiSelected: (emoji: SelectedEmoji) => void;
-        onSkintoneChanged?: (tone: SkinTone) => void;
-        customEmojis?: Map<string, CustomEmoji>;
-    }
-
-    let {
-        mode = "message",
-        searchInputPadding = false,
-        onEmojiSelected,
-        onSkintoneChanged,
-        customEmojis,
-    }: Props = $props();
-    let showPayGate = $state<CustomEmoji>();
-
-    function lockedCategoryCss(groupId: number, price: number) {
-        return `
-            .category:not(.gone)#menu-label-${groupId} {
-                position: relative;
-            }
-
-            .category:not(.gone)#menu-label-${groupId}::after {
-                content: "(${price.toLocaleString()} CHIT)";
-                font-size: 10px;
-                height: 14px;
-                background-image: url(/assets/locked_solid.svg);
-                background-repeat: no-repeat;
-                position: absolute;
-                margin-left: 5px;
-                padding-left: 18px;
-                padding-top: 2px;
-                color: var(--txt-light);
-                vertical-align: middle;
-                top: 8px;
-            }
-
-            .category:not(.gone)#menu-label-${groupId} + .emoji-menu[aria-labelledby="menu-label-${groupId}"] {
-                opacity: 0.5;
-            }
-        `;
-    }
-
-    function createCustomCss(): string {
-        const rules: string[] = [];
-
-        if (!$premiumItemsStore.has(PremiumItem.BotEmojis)) {
-            rules.push(lockedCategoryCss(0, premiumPrices[PremiumItem.BotEmojis]));
-        }
-
-        if (!$premiumItemsStore.has(PremiumItem.PopularEmojis)) {
-            rules.push(lockedCategoryCss(1, premiumPrices[PremiumItem.PopularEmojis]));
-        }
-
-        // Custom CSS rules...
-        rules.push(".indicator { transition: none; }");
-        if (searchInputPadding) {
-            rules.push(".search-row { padding-left: 6rem; }");
-        }
-        rules.push(
-            "#skintone-list { background-color: var(--background-2); border-radius: var(--rad-circle); box-shadow: var(--menu-sh); }",
-        );
-
-        return rules.join("\n");
-    }
-
-    onMount(() => {
-        const emojiPicker = document.querySelector("emoji-picker");
-
-        if (emojiPicker && customEmojis) {
-            emojiPicker.customEmoji = [...customEmojis.entries()].map(([_, emoji]) => {
-                return {
-                    name: emoji.code,
-                    shortcodes: [emoji.code],
-                    url: emoji.url,
-                    category: emojiGroupNames[emoji.premiumItem],
-                };
-            });
-        }
-        emojiPicker?.addEventListener("emoji-click", onClick);
-        emojiPicker?.addEventListener("skin-tone-change", skinToneChanged);
-
-        const style = document.createElement("style");
-        style.textContent = createCustomCss();
-        emojiPicker?.shadowRoot?.appendChild(style);
-
-        tick().then(() => {
-            emojiPicker?.shadowRoot
-                ?.querySelector<HTMLButtonElement>("button.nav-button[data-group-id='0']")
-                ?.click();
-        });
-
-        return () => {
-            emojiPicker?.removeEventListener("emoji-click", onClick);
-        };
-    });
-
-    function skinToneChanged(ev: SkinToneChangeEvent) {
-        onSkintoneChanged?.(ev.detail.skinTone);
-    }
-
-    function onClick(ev: EmojiClickEvent) {
-        if (ev.detail.unicode) {
-            onEmojiSelected({ kind: "native", unicode: ev.detail.unicode });
-        } else if (ev.detail.name !== undefined) {
-            const custom = customEmojis?.get(ev.detail.name);
-            if (custom !== undefined) {
-                if (!$premiumItemsStore.has(custom.premiumItem)) {
-                    showPayGate = custom;
-                } else {
-                    onEmojiSelected(custom);
-                }
-            }
-        }
-    }
-
-    function paidForItem() {
-        if (showPayGate) {
-            onEmojiSelected(showPayGate);
-            showPayGate = undefined;
-        }
-    }
-</script>
-
-{#if showPayGate}
-    <PremiumItemPayment
-        item={showPayGate.premiumItem}
-        onSuccess={paidForItem}
-        onCancel={() => (showPayGate = undefined)}></PremiumItemPayment>
-{/if}
-
-<emoji-picker
-    class:message={mode === "message"}
-    class:reaction={mode === "reaction"}
-    class:thread={mode === "thread"}
-    class:dark={$currentTheme.mode === "dark"}
-    class:light={$currentTheme.mode === "light"}></emoji-picker>
-
-<style lang="scss">
-    :global {
-        .emoji-overlay .modal-content {
-            background-color: var(--menu-bg);
-        }
-    }
-
-    emoji-picker {
-        width: 100%;
-        height: 100%;
-        // flex: 1;
-        display: flex;
-
-        // --emoji-padding: 0.3rem;
-        --emoji-size: 1.75rem;
-        // --emoji-padding: 0.25rem;
-        --background: transparent;
-        --border-size: 0;
-        --border-color: var(--bd);
-        --input-font-color: var(--text-primary);
-        --input-font-size: var(--typo-body-sz);
-        --input-line-height: var(--typo-body-lh);
-        --input-border-color: var(--text-tertiary);
-        --input-border-radius: var(--rad-circle);
-        --input-padding: var(--sp-sm) var(--sp-lg);
-        --indicator-color: var(--primary);
-        --num-columns: 9 !important;
-
-        @media (max-width: 390px) {
-            --num-columns: 7 !important;
-        }
-
-        @media (max-width: 340px) {
-            --num-columns: 6 !important;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/ExternalContent.svelte b/frontend/app/src/components_mobile/home/ExternalContent.svelte
deleted file mode 100644
index 3a15f2654a..0000000000
--- a/frontend/app/src/components_mobile/home/ExternalContent.svelte
+++ /dev/null
@@ -1,136 +0,0 @@
-<script lang="ts">
-    import { currentUserStore } from "@client";
-    import { onMount } from "svelte";
-    import AlertCircleOutline from "svelte-material-icons/AlertCircleOutline.svelte";
-    import Cancel from "svelte-material-icons/Cancel.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { currentTheme } from "../../theme/themes";
-    import type { Theme } from "../../theme/types";
-    import Translatable from "../Translatable.svelte";
-    import PrivatePreview from "./PrivatePreview.svelte";
-
-    interface Props {
-        externalUrl: string;
-        frozen: boolean;
-        privateChatPreview: boolean;
-    }
-
-    let { externalUrl, frozen, privateChatPreview }: Props = $props();
-
-    let iframe: HTMLIFrameElement | undefined = $state();
-    let connected = $state(false);
-    let error = $state(false);
-
-    onMount(() => {
-        window.addEventListener("message", onMessage);
-        return () => {
-            window.removeEventListener("message", onMessage);
-            iframe?.removeEventListener("error", onError);
-        };
-    });
-
-    function onError() {
-        error = true;
-    }
-
-    function updateTheme(theme: Theme) {
-        if (connected && iframe) {
-            sendMessage(iframe, origin, {
-                kind: "set_theme",
-                theme,
-            });
-        }
-    }
-
-    function debug(msg: string, ...params: unknown[]): void {
-        console.debug(`OPENCHAT_EXTERNAL_HOST: ${msg}`, params);
-    }
-
-    function onMessage(ev: MessageEvent<{ kind: "external_content_ready" }>) {
-        if (ev.origin === origin && ev.data.kind === "external_content_ready") {
-            debug("External content signals its readiness");
-            if (iframe) {
-                sendMessage(iframe, origin, {
-                    kind: "initialise_external_content",
-                    theme: $currentTheme,
-                    username: $currentUserStore.username,
-                });
-            }
-            connected = true;
-        }
-    }
-
-    function sendMessage(frame: HTMLIFrameElement, targetOrigin: string, msg: unknown) {
-        if (frame && frame.contentWindow) {
-            try {
-                frame.contentWindow.postMessage(msg, targetOrigin);
-            } catch (err) {
-                console.log("Error sending message to iframe", err);
-            }
-        }
-    }
-    let origin = $derived(new URL(externalUrl).origin);
-    $effect(() => {
-        updateTheme($currentTheme);
-    });
-    $effect(() => {
-        // This is just a bit of a hack to make sure we pick up when the external url changes
-        if (externalUrl !== undefined) {
-            error = false;
-            connected = false;
-        }
-    });
-    $effect(() => {
-        if (iframe && !frozen && !privateChatPreview) {
-            iframe.removeEventListener("error", onError);
-            iframe.addEventListener("error", onError);
-        }
-    });
-</script>
-
-{#if frozen}
-    <div class="error">
-        <Cancel size={"2em"} color={"var(--error)"} />
-        <Translatable resourceKey={i18nKey("externalContent.frozen")} />
-    </div>
-{:else if privateChatPreview}
-    <div class="preview">
-        <PrivatePreview />
-    </div>
-{:else if error}
-    <div class="error">
-        <AlertCircleOutline size={"2em"} color={"var(--error)"} />
-        <Translatable resourceKey={i18nKey("externalContent.error")} />
-    </div>
-{/if}
-
-{#if !frozen && !privateChatPreview}
-    <iframe title="External Content" bind:this={iframe} src={externalUrl}></iframe>
-{/if}
-
-<style lang="scss">
-    iframe {
-        height: 100%;
-        width: 100%;
-    }
-
-    .error {
-        display: flex;
-        flex-direction: column;
-        gap: $sp5;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        text-align: center;
-        padding: 0 toRem(100);
-
-        @include font(bold, normal, fs-140);
-    }
-
-    .preview {
-        display: flex;
-        flex-direction: column-reverse;
-        padding: $sp3 $sp4;
-        flex: auto;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/FileAttacher.svelte b/frontend/app/src/components_mobile/home/FileAttacher.svelte
deleted file mode 100644
index af4d386410..0000000000
--- a/frontend/app/src/components_mobile/home/FileAttacher.svelte
+++ /dev/null
@@ -1,43 +0,0 @@
-<script lang="ts">
-    import type { AttachmentContent, OpenChat } from "@client";
-    import { getContext, type Snippet } from "svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { toastStore } from "../../stores/toast";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        accept?: string;
-        onFileSelected: (content: AttachmentContent) => void;
-        children: Snippet<[() => void]>;
-    }
-
-    let { accept, onFileSelected, children }: Props = $props();
-
-    let fileinput: HTMLInputElement | undefined = $state();
-
-    function click() {
-        fileinput?.click();
-    }
-
-    function fileSelected(e: { currentTarget: HTMLInputElement }) {
-        if (e.currentTarget) {
-            const target = e.currentTarget;
-            if (target.files && target.files[0]) {
-                client
-                    .messageContentFromFile(target.files[0])
-                    .then((content) => {
-                        onFileSelected(content);
-                    })
-                    .catch((err) => {
-                        toastStore.showFailureToast(i18nKey(err));
-                    });
-
-                e.currentTarget.value = "";
-            }
-        }
-    }
-</script>
-
-{@render children(click)}
-<input bind:this={fileinput} hidden type="file" {accept} onchange={fileSelected} />
diff --git a/frontend/app/src/components_mobile/home/FileContent.svelte b/frontend/app/src/components_mobile/home/FileContent.svelte
deleted file mode 100644
index dd920dad85..0000000000
--- a/frontend/app/src/components_mobile/home/FileContent.svelte
+++ /dev/null
@@ -1,169 +0,0 @@
-<script lang="ts">
-    import { _ } from "svelte-i18n";
-    import { rtlStore } from "../../stores/rtl";
-    import { getContext, type Snippet } from "svelte";
-    import {
-        Body,
-        BodySmall,
-        ColourVars,
-        Column,
-        IconButton,
-        Row,
-        type Padding,
-        type Radius,
-    } from "component-lib";
-    import type { FileContent, OpenChat, TextContent as TextContentType } from "@client";
-    import { mimeTypeToHumanReadable } from "@client";
-    import { getProxyAdjustedBlobUrl } from "../../utils/media";
-    import MessageRenderer from "./MessageRenderer.svelte";
-    import Close from "svelte-material-icons/Close.svelte";
-    import FileUploadOutline from "svelte-material-icons/FileUploadOutline.svelte";
-
-    const client = getContext<OpenChat>("client");
-    const BULL = "\u2022";
-
-    interface Props {
-        content: FileContent;
-        title?: Snippet;
-        me?: boolean;
-        draft?: boolean;
-        edited: boolean;
-        reply?: boolean;
-        onRemove?: () => void;
-        blockLevelMarkdown?: boolean;
-    }
-
-    let {
-        content,
-        title,
-        me = false,
-        draft = false,
-        edited,
-        reply = false,
-        blockLevelMarkdown = false,
-        onRemove,
-    }: Props = $props();
-
-    let normalisedContent = $derived<TextContentType | undefined>(
-        content.caption ? { kind: "text_content", text: content.caption ?? "" } : undefined,
-    );
-</script>
-
-{#snippet fileContent(borderRadius: Radius, backgroundColor: string, padding?: Padding)}
-    {@const subtextColour = me && reply ? "secondaryLight" : "primaryLight"}
-    <Column
-        supplementalClass="link_contents"
-        padding={padding ?? "sm"}
-        gap="xs"
-        {borderRadius}
-        {backgroundColor}>
-        <Row>
-            <Body fontWeight="semi-bold">{content.name}</Body>
-        </Row>
-        <Row crossAxisAlignment="center" gap="xs">
-            <FileUploadOutline size="1rem" color={ColourVars[subtextColour]} />
-            <BodySmall width="hug" colour={subtextColour}>
-                {mimeTypeToHumanReadable(content.mimeType)}
-                {BULL}
-                {client.formatFileSize(content.fileSize)}
-            </BodySmall>
-        </Row>
-    </Column>
-{/snippet}
-
-{#snippet replyView(textContent?: Snippet)}
-    <Column>
-        {@render title?.()}
-        <Row gap="xs" crossAxisAlignment="center" padding={["xs", "xxs", "xxs", "zero"]}>
-            {@const textColor = me ? "secondary" : "primary"}
-            <FileUploadOutline size="1rem" color={ColourVars[textColor]} />
-            <Body fontWeight="semi-bold" colour={textColor}>
-                {content.name}
-            </Body>
-        </Row>
-        {@render textContent?.()}
-    </Column>
-{/snippet}
-
-{#snippet draftView(textContent?: Snippet)}
-    <!-- User is sending a new file, and it's still in draft -->
-    <Column padding="xs">
-        <Column
-            supplementalClass="file_draft_contents"
-            backgroundColor={ColourVars.background0}
-            borderRadius="lg">
-            {@render fileContent("zero", "background1")}
-            {@render textContent?.()}
-        </Column>
-    </Column>
-    <div class="close" class:rtl={$rtlStore}>
-        <IconButton size="sm" mode={"dark"} onclick={onRemove}>
-            {#snippet icon()}
-                <Close color={ColourVars.textPrimary} />
-            {/snippet}
-        </IconButton>
-    </div>
-{/snippet}
-
-{#snippet regularView(textContent?: Snippet)}
-    <!-- User has sent a message with file attached, and we're rendering the message -->
-    {@const borderRadius: Radius = [me ? "lg" : "md", me ? "md" : "lg", "md", "md"]}
-    {@const backgroundColor = me ? ColourVars.primaryMuted : ColourVars.background1}
-    {#if content.blobUrl}
-        <a
-            href={getProxyAdjustedBlobUrl(content.blobUrl)}
-            title={$_("downloadFile", { values: { name: content.name } })}
-            download={content.name}
-            role="button"
-            target="_blank"
-            class:rtl={$rtlStore}
-            class:draft
-            class:no_content={!reply && !textContent}
-            class="file_content">
-            {@render fileContent(borderRadius, backgroundColor, ["sm", "md"])}
-        </a>
-        {@render textContent?.()}
-    {/if}
-{/snippet}
-
-<MessageRenderer
-    {replyView}
-    {draftView}
-    {regularView}
-    caption={normalisedContent?.text}
-    {me}
-    {reply}
-    {draft}
-    {edited}
-    {blockLevelMarkdown}
-    {onRemove} />
-
-<style lang="scss">
-    :global(.file_draft_contents) {
-        // TODO apply this to all attachment variants
-        animation: grow-height 300ms ease-out forwards;
-        will-change: max-height, opacity;
-    }
-
-    .file_content {
-        display: block;
-        width: 100%;
-
-        &.no_content {
-            padding-bottom: 1.125rem;
-        }
-    }
-
-    .close {
-        position: absolute;
-        top: var(--sp-xs);
-
-        &:not(.rtl) {
-            right: var(--sp-xs);
-        }
-
-        &.rtl {
-            left: var(--sp-xs);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/Footer.svelte b/frontend/app/src/components_mobile/home/Footer.svelte
deleted file mode 100644
index cbdd850b89..0000000000
--- a/frontend/app/src/components_mobile/home/Footer.svelte
+++ /dev/null
@@ -1,217 +0,0 @@
-<script lang="ts">
-    import { fileFromDataTransferItems } from "@src/utils/datatransfer";
-    import {
-        messageContextsEqual,
-        subscribe,
-        type AttachmentContent,
-        type ChatSummary,
-        type CreatedUser,
-        type EnhancedReplyContext,
-        type EphemeralMessageEvent,
-        type EventWrapper,
-        type Message,
-        type MessageContext,
-        type OpenChat,
-        type User,
-    } from "@client";
-    import { getContext, onMount, tick } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { i18nKey } from "../../i18n/i18n";
-    import { toastStore } from "../../stores/toast";
-    import EphemeralMessage from "../bots/EphemeralMessage.svelte";
-    // import DraftMediaMessage from "./DraftMediaMessage.svelte";
-    import MessageEntry from "./MessageEntry.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        blocked: boolean;
-        preview: boolean;
-        lapsed: boolean;
-        chat: ChatSummary;
-        attachment: AttachmentContent | undefined;
-        editingEvent: EventWrapper<Message> | undefined;
-        replyingTo: EnhancedReplyContext | undefined;
-        textContent: string | undefined;
-        user: CreatedUser;
-        mode?: "thread" | "message";
-        externalContent?: boolean;
-        messageContext: MessageContext;
-        onFileSelected: (content: AttachmentContent) => void;
-        onCancelReply: () => void;
-        onSetTextContent: (txt?: string) => void;
-        onStartTyping: () => void;
-        onStopTyping: () => void;
-        onCancelEdit: () => void;
-        onSendMessage: (args: [string | undefined, User[], boolean]) => void;
-        onClearAttachment: () => void;
-        onTokenTransfer: (args: { ledger?: string; amount?: bigint }) => void;
-        onCreatePrizeMessage?: () => void;
-        onCreateP2PSwapMessage: () => void;
-        onMakeMeme: () => void;
-    }
-
-    let {
-        blocked,
-        preview,
-        lapsed,
-        chat,
-        attachment,
-        editingEvent,
-        replyingTo,
-        textContent,
-        user,
-        mode = "message",
-        externalContent = false,
-        messageContext,
-        onFileSelected,
-        onCancelReply,
-        onSetTextContent,
-        onCancelEdit,
-        onStartTyping,
-        onStopTyping,
-        onSendMessage,
-        onClearAttachment,
-        onTokenTransfer,
-        onCreatePrizeMessage,
-        onCreateP2PSwapMessage,
-        onMakeMeme,
-    }: Props = $props();
-
-    let ephemeralMessageEvent = $state<EphemeralMessageEvent>();
-    //@ts-ignore
-    let messageEntry: MessageEntry;
-
-    let inputTrayVisible = $state(false);
-
-    onMount(() => {
-        const unsubs = [subscribe("ephemeralMessage", onEphemeralMessage)];
-        return () => {
-            unsubs.forEach((u) => u());
-        };
-    });
-
-    async function onEphemeralMessage(ev: EphemeralMessageEvent) {
-        if (ev.scope.kind !== "chat_scope") return;
-        if (!messageContextsEqual(messageContext, ev.scope)) return;
-        if (ephemeralMessageEvent !== undefined) {
-            ephemeralMessageEvent = undefined;
-            await tick();
-        }
-        ephemeralMessageEvent = ev;
-    }
-
-    function messageContentFromDataTransferItemList(items: DataTransferItem[]) {
-        const file = fileFromDataTransferItems(items);
-        if (file) {
-            client
-                .messageContentFromFile(file)
-                .then((content) => {
-                    let permission = client.contentTypeToPermission(content.kind);
-                    if (client.canSendMessage(chat.id, mode, permission)) {
-                        onFileSelected(content);
-                    } else {
-                        const errorMessage = i18nKey("permissions.notPermitted", {
-                            permission: $_(`permissions.threadPermissions.${permission}`),
-                        });
-                        toastStore.showFailureToast(errorMessage);
-                    }
-                })
-                .catch((err) => toastStore.showFailureToast(i18nKey(err)));
-        }
-    }
-
-    function onDataTransfer(data: DataTransfer): void {
-        messageContentFromDataTransferItemList([...data.items]);
-    }
-
-    function onPaste(e: ClipboardEvent) {
-        if (e.clipboardData) {
-            onDataTransfer(e.clipboardData);
-        }
-    }
-
-    $effect(() => {
-        if (
-            ephemeralMessageEvent !== undefined &&
-            ephemeralMessageEvent.scope.kind === "chat_scope" &&
-            !messageContextsEqual(messageContext, ephemeralMessageEvent.scope)
-        ) {
-            ephemeralMessageEvent = undefined;
-        }
-    });
-</script>
-
-<div class={`footer ${mode} ${inputTrayVisible ? "tray_visible" : ""}`}>
-    <div class="footer-overlay">
-        {#if ephemeralMessageEvent !== undefined}
-            <EphemeralMessage
-                onClose={() => (ephemeralMessageEvent = undefined)}
-                event={ephemeralMessageEvent} />
-        {/if}
-        <!-- {#if editingEvent === undefined && (replyingTo || attachment !== undefined)}
-            {#if attachment !== undefined}
-                <DraftMediaMessage ctx={messageContext} content={attachment} />
-            {/if}
-        {/if} -->
-    </div>
-    <MessageEntry
-        bind:this={messageEntry}
-        bind:inputTrayVisible
-        {onPaste}
-        {externalContent}
-        {mode}
-        {preview}
-        {lapsed}
-        {blocked}
-        {attachment}
-        {editingEvent}
-        replyingTo={editingEvent === undefined && replyingTo !== undefined ? replyingTo : undefined}
-        {textContent}
-        {chat}
-        {messageContext}
-        {user}
-        {onSendMessage}
-        {onCancelReply}
-        {onCancelEdit}
-        {onSetTextContent}
-        {onStartTyping}
-        {onStopTyping}
-        {onTokenTransfer}
-        {onCreatePrizeMessage}
-        {onCreateP2PSwapMessage}
-        {onMakeMeme}
-        {onClearAttachment}
-        {onFileSelected} />
-</div>
-
-<style lang="scss">
-    :global(body.witch .middle .footer) {
-        @include z-index("footer");
-    }
-
-    .footer {
-        width: 100%;
-        position: relative;
-        padding: var(--sp-xs) var(--sp-zero) var(--sp-zero);
-        transition: padding-bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-
-        &:not(.tray_visible) {
-            padding-bottom: var(--device-nav-height);
-        }
-
-        &.tray_visible {
-            padding-bottom: 0;
-        }
-    }
-
-    .footer-overlay {
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-content: center;
-        align-items: flex-start;
-        background-color: var(--entry-bg);
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/ForgotPinLabel.svelte b/frontend/app/src/components_mobile/home/ForgotPinLabel.svelte
deleted file mode 100644
index 399323c446..0000000000
--- a/frontend/app/src/components_mobile/home/ForgotPinLabel.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script lang="ts">
-    import { i18nKey } from "../../i18n/i18n";
-    import Translatable from "../Translatable.svelte";
-
-    interface Props {
-        onForgot: () => void;
-    }
-    let { onForgot }: Props = $props();
-</script>
-
-<div class="forgot">
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <!-- svelte-ignore a11y_missing_attribute -->
-    <a role="button" tabindex="0" onclick={onForgot}>
-        <Translatable resourceKey={i18nKey("pinNumber.forgotLabel")} />
-    </a>
-</div>
-
-<style lang="scss">
-    .forgot {
-        width: 100%;
-        text-align: center;
-        @include font(light, normal, fs-80);
-        margin: $sp3 0;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/GiphyContent.svelte b/frontend/app/src/components_mobile/home/GiphyContent.svelte
deleted file mode 100644
index 2b84e44ede..0000000000
--- a/frontend/app/src/components_mobile/home/GiphyContent.svelte
+++ /dev/null
@@ -1,171 +0,0 @@
-<script lang="ts">
-    import { type GiphyContent, type TextContent as TextContentType } from "@client";
-    import { rtlStore } from "../../stores/rtl";
-    import { reservedMediaStyle } from "../../utils/media";
-    import TextContent from "./TextContent.svelte";
-
-    interface Props {
-        content: GiphyContent;
-        me: boolean;
-        fill: boolean;
-        reply?: boolean;
-        height?: number | undefined;
-        intersecting?: boolean;
-        edited: boolean;
-        blockLevelMarkdown?: boolean;
-        isPreview?: boolean;
-    }
-
-    let {
-        content,
-        me,
-        fill,
-        reply = false,
-        height = undefined,
-        intersecting = true,
-        edited,
-        blockLevelMarkdown = false,
-        isPreview = false,
-    }: Props = $props();
-
-    const MIN_GIF_WIDTH = 250;
-
-    let withCaption = $derived(!!content.caption);
-    let image = $derived(content.mobile);
-    let landscape = $derived(image.height < image.width);
-    let videoWidth = $derived(image.width < MIN_GIF_WIDTH ? MIN_GIF_WIDTH : image.width);
-    let textContent = $derived<TextContentType | undefined>(
-        withCaption ? { kind: "text_content", text: content.caption ?? "" } : undefined,
-    );
-    let style = $derived(
-        height !== undefined
-            ? `height: ${height}px; max-width: ${videoWidth}px;`
-            : reply || isPreview
-              ? `max-width: ${videoWidth}px;`
-              : (reservedMediaStyle(image.width, image.height) ?? `max-width: ${videoWidth}px;`),
-    );
-</script>
-
-<div class="gif_content_wrapper" class:me class:fill class:rtl={$rtlStore}>
-    {#if !intersecting}
-        <div
-            class="placeholder"
-            class:landscape
-            class:fill
-            {style}
-            class:withCaption
-            title={content.caption ?? content.title}
-            class:reply
-            class:rtl={$rtlStore}>
-        </div>
-    {:else}
-        <video
-            autoplay
-            muted
-            loop
-            playsinline
-            bind:clientWidth={videoWidth}
-            class:landscape
-            class:fill
-            class:withCaption
-            class:reply
-            class:rtl={$rtlStore}
-            {style}
-            title={content.caption ?? content.title}>
-            <track kind="captions" />
-            <source src={content.desktop.url} type="video/mp4" />
-        </video>
-    {/if}
-    <div class="attribution">
-        <img src="/assets/klipy_logo.svg" alt="Powered by KLIPY" />
-    </div>
-</div>
-
-{#if textContent?.text}
-    <TextContent
-        content={textContent}
-        {me}
-        {blockLevelMarkdown}
-        {edited}
-        maxWidth={videoWidth}
-        showPreviews={false}
-        {isPreview} />
-{/if}
-
-<style lang="scss">
-    :global {
-        .gif_content_wrapper svg {
-            opacity: 0.75;
-            position: absolute;
-            bottom: var(--sp-xxs);
-            filter: drop-shadow(0 0 0.125rem var(--backdrop));
-        }
-
-        .gif_content_wrapper:not(.rtl) svg {
-            left: var(--sp-xs);
-        }
-
-        .gif_content_wrapper.rtl svg {
-            right: var(--sp-xs);
-        }
-    }
-
-    .gif_content_wrapper {
-        position: relative;
-        overflow: hidden;
-
-        // Border radiuses logic is same for image, gif, video and other media content!
-        // TODO reuse the border radius logic, maybe a mixin?
-        border-radius: var(--rad-lg) var(--rad-lg) var(--rad-md) var(--rad-md);
-
-        &.me {
-            border-top-right-radius: var(--rad-sm);
-        }
-
-        &:not(.me) {
-            border-top-left-radius: var(--rad-sm);
-        }
-
-        &.fill {
-            border-bottom-left-radius: var(--rad-lg);
-            border-bottom-right-radius: var(--rad-lg);
-        }
-
-        .attribution {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-
-            img {
-                width: 4rem;
-            }
-        }
-    }
-
-    .placeholder,
-    video {
-        width: 100%;
-        display: block;
-
-        &.reply {
-            max-width: 90px;
-            max-height: none;
-            height: auto;
-            float: right;
-            margin-left: $sp3;
-            margin-right: 0;
-        }
-
-        &.rtl.reply {
-            float: left;
-            margin-left: 0;
-            margin-right: $sp3;
-        }
-
-        &:not(.landscape).reply {
-            max-width: none;
-            max-height: 90px;
-            width: auto;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/GroupChangedEvent.svelte b/frontend/app/src/components_mobile/home/GroupChangedEvent.svelte
deleted file mode 100644
index 78aecac9e0..0000000000
--- a/frontend/app/src/components_mobile/home/GroupChangedEvent.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts">
-    import type { UserSummary } from "@client";
-    import { allUsersStore } from "@client";
-    import { _ } from "svelte-i18n";
-    import { buildDisplayName } from "../../utils/user";
-    import NonMessageEvent from "./NonMessageEvent.svelte";
-
-    interface Props {
-        user: UserSummary | undefined;
-        changedBy: string;
-        property: string;
-        timestamp: bigint;
-        level: string;
-    }
-
-    let { user, changedBy, property, timestamp, level }: Props = $props();
-
-    let me = $derived(changedBy === user?.userId);
-    let changedByStr = $derived(buildDisplayName($allUsersStore, changedBy, me ? "me" : "user"));
-    let text = $derived(
-        $_("groupChangedBy", {
-            values: {
-                changed: property,
-                changedBy: changedByStr,
-                level,
-            },
-        }),
-    );
-</script>
-
-<NonMessageEvent {text} {timestamp} />
diff --git a/frontend/app/src/components_mobile/home/GroupChatCreatedEvent.svelte b/frontend/app/src/components_mobile/home/GroupChatCreatedEvent.svelte
deleted file mode 100644
index 335320adb6..0000000000
--- a/frontend/app/src/components_mobile/home/GroupChatCreatedEvent.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script lang="ts">
-    import type { ChatType, GroupChatCreated } from "@client";
-    import { allUsersStore } from "@client";
-    import { _ } from "svelte-i18n";
-    import { buildDisplayName } from "../../utils/user";
-    import NonMessageEvent from "./NonMessageEvent.svelte";
-
-    interface Props {
-        me: boolean;
-        event: GroupChatCreated;
-        timestamp: bigint;
-        chatType: ChatType;
-    }
-
-    let { me, event, timestamp, chatType }: Props = $props();
-
-    let level = $derived($_(`level.${chatType === "channel" ? "channel" : "group"}`).toLowerCase());
-    let username = $derived(buildDisplayName($allUsersStore, event.created_by, me ? "me" : "user"));
-    let text = $derived(
-        $_("groupCreatedBy", {
-            values: {
-                username,
-                level,
-            },
-        }),
-    );
-</script>
-
-<NonMessageEvent {text} {timestamp} />
diff --git a/frontend/app/src/components_mobile/home/GroupInviteCodeChangedEvent.svelte b/frontend/app/src/components_mobile/home/GroupInviteCodeChangedEvent.svelte
deleted file mode 100644
index e030157d8d..0000000000
--- a/frontend/app/src/components_mobile/home/GroupInviteCodeChangedEvent.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script lang="ts">
-    import type { GroupInviteCodeChange, UserSummary } from "@client";
-    import { allUsersStore } from "@client";
-    import { _ } from "svelte-i18n";
-    import { buildDisplayName } from "../../utils/user";
-    import NonMessageEvent from "./NonMessageEvent.svelte";
-
-    interface Props {
-        user: UserSummary | undefined;
-        change: GroupInviteCodeChange;
-        changedBy: string;
-        timestamp: bigint;
-    }
-
-    let { user, change, changedBy, timestamp }: Props = $props();
-
-    let me = $derived(changedBy === user?.userId);
-    let changedByStr = $derived(buildDisplayName($allUsersStore, changedBy, me ? "me" : "user"));
-    let changedStr = $derived($_(`invite.${change}`));
-    let text = $derived(
-        $_("groupInviteChangedBy", {
-            values: {
-                changedBy: changedByStr,
-                changed: changedStr,
-            },
-        }),
-    );
-</script>
-
-<NonMessageEvent {text} {timestamp} />
diff --git a/frontend/app/src/components_mobile/home/GroupPermissionsPartitionViewer.svelte b/frontend/app/src/components_mobile/home/GroupPermissionsPartitionViewer.svelte
deleted file mode 100644
index 0b4584258f..0000000000
--- a/frontend/app/src/components_mobile/home/GroupPermissionsPartitionViewer.svelte
+++ /dev/null
@@ -1,52 +0,0 @@
-<script lang="ts">
-    import { Body, Container, type SizeMode } from "component-lib";
-    import {
-        type ChatPermissionRole,
-        chatRoles,
-        type PermissionsByRole,
-        ROLE_ADMIN,
-        ROLE_MEMBER,
-        ROLE_MODERATOR,
-        ROLE_NONE,
-        ROLE_OWNER,
-    } from "@client";
-    import { i18nKey } from "../../i18n/i18n";
-    import Translatable from "../Translatable.svelte";
-
-    interface Props {
-        partition: PermissionsByRole;
-    }
-
-    let { partition }: Props = $props();
-
-    const roleLabels: Record<ChatPermissionRole, string> = {
-        [ROLE_NONE]: "permissions.nobody",
-        [ROLE_OWNER]: "permissions.ownerOnly",
-        [ROLE_ADMIN]: "permissions.ownerAndAdmins",
-        [ROLE_MODERATOR]: "permissions.ownerAndAdminsAndModerators",
-        [ROLE_MEMBER]: "permissions.allMembers",
-    };
-
-    const width: SizeMode = "hug";
-</script>
-
-{#each chatRoles as role}
-    {#if partition[role].size > 0}
-        {@const perms = [...partition[role]]}
-        <Container {width} wrap gap={"sm"}>
-            <Body {width} colour={"textSecondary"}>
-                <Translatable resourceKey={i18nKey(roleLabels[role])} />
-            </Body>
-            <Body {width} colour={"textSecondary"}>//</Body>
-            {#each perms as perm, i}
-                {@const last = i === perms.length - 1}
-                <Body {width}>
-                    {perm}
-                </Body>
-                {#if !last}
-                    <Body colour={"primary"} {width}>/</Body>
-                {/if}
-            {/each}
-        </Container>
-    {/if}
-{/each}
diff --git a/frontend/app/src/components_mobile/home/GroupRulesChangedEvent.svelte b/frontend/app/src/components_mobile/home/GroupRulesChangedEvent.svelte
deleted file mode 100644
index 02b455d372..0000000000
--- a/frontend/app/src/components_mobile/home/GroupRulesChangedEvent.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script lang="ts">
-    import type { GroupRulesChanged, UserSummary } from "@client";
-    import { allUsersStore } from "@client";
-    import { _ } from "svelte-i18n";
-    import { buildDisplayName } from "../../utils/user";
-    import NonMessageEvent from "./NonMessageEvent.svelte";
-
-    interface Props {
-        user: UserSummary | undefined;
-        event: GroupRulesChanged;
-        timestamp: bigint;
-    }
-
-    let { user, event, timestamp }: Props = $props();
-
-    let me = $derived(event.changedBy === user?.userId);
-    let changedByStr = $derived(
-        buildDisplayName($allUsersStore, event.changedBy, me ? "me" : "user"),
-    );
-    let templateValues = $derived({
-        values: {
-            changed: $_("groupRules"),
-            changedBy: changedByStr,
-        },
-    });
-
-    let text = $derived(
-        event.enabled && event.enabledPrev
-            ? $_("groupChangedBy", templateValues)
-            : event.enabled
-              ? $_("groupRulesEnabled", templateValues)
-              : $_("groupRulesDisabled", templateValues),
-    );
-</script>
-
-{#if event.enabled || event.enabledPrev}
-    <NonMessageEvent {text} {timestamp} />
-{/if}
diff --git a/frontend/app/src/components_mobile/home/GroupVisibilityChangedEvent.svelte b/frontend/app/src/components_mobile/home/GroupVisibilityChangedEvent.svelte
deleted file mode 100644
index de231b98a7..0000000000
--- a/frontend/app/src/components_mobile/home/GroupVisibilityChangedEvent.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<script lang="ts">
-    import type { Level, UserSummary } from "@client";
-    import { allUsersStore } from "@client";
-    import { _ } from "svelte-i18n";
-    import { i18nKey, interpolate } from "../../i18n/i18n";
-    import { buildDisplayName } from "../../utils/user";
-    import NonMessageEvent from "./NonMessageEvent.svelte";
-
-    interface Props {
-        user: UserSummary | undefined;
-        isPublic: boolean | undefined;
-        messagesVisibleToNonMembers: boolean | undefined;
-        changedBy: string;
-        timestamp: bigint;
-        level: Level;
-    }
-
-    let { user, isPublic, messagesVisibleToNonMembers, changedBy, timestamp, level }: Props =
-        $props();
-
-    let showEvent = $derived(messagesVisibleToNonMembers !== undefined || isPublic !== undefined);
-    let me = $derived(changedBy === user?.userId);
-    let changedByStr = $derived(buildDisplayName($allUsersStore, changedBy, me ? "me" : "user"));
-    let text = $derived(
-        interpolate(
-            $_,
-            i18nKey(
-                "groupVisibilityChangedBy",
-                {
-                    changedBy: changedByStr,
-                },
-                level,
-                true,
-            ),
-        ),
-    );
-</script>
-
-{#if showEvent}
-    <NonMessageEvent {text} {timestamp} />
-{/if}
diff --git a/frontend/app/src/components_mobile/home/Home.svelte b/frontend/app/src/components_mobile/home/Home.svelte
deleted file mode 100644
index 32b8811e9d..0000000000
--- a/frontend/app/src/components_mobile/home/Home.svelte
+++ /dev/null
@@ -1,635 +0,0 @@
-<script lang="ts">
-    import { trackedEffect } from "@src/utils/effects.svelte";
-    import { invoke } from "@tauri-apps/api/core";
-    import type { ProfileLinkClickedEvent } from "@webcomponents/profileLink";
-    import { Container, Sheet } from "component-lib";
-    import type {
-        ChannelIdentifier,
-        ChatIdentifier,
-        CommunityIdentifier,
-        DirectChatIdentifier,
-        EnhancedReplyContext,
-        Level,
-        MultiUserChat,
-        MultiUserChatIdentifier,
-        NervousSystemDetails,
-        OpenChat,
-        PubSubEvents,
-        ResourceKey,
-        RouteParams,
-    } from "@client";
-    import { navigate } from "@utils/navigation";
-    import {
-        allUsersStore,
-        anonUserStore,
-        chatIdentifiersEqual,
-        chatListScopeStore,
-        chatsInitialisedStore,
-        chatSummariesListStore,
-        identityStateStore,
-        localUpdates,
-        offlineStore,
-        pinNumberResolverStore,
-        publish,
-        querystringStore,
-        routeForChatIdentifier,
-        routeForScope,
-        routeStore,
-        captureRulesAcceptanceStore as rulesAcceptanceStore,
-        selectedChatIdStore,
-        selectedChatSummaryStore,
-        subscribe,
-        suspendedUserStore,
-    } from "@client";
-    import { getContext, onMount, untrack } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { i18nKey } from "../../i18n/i18n";
-    import { chitPopup, disableChit } from "../../stores/settings";
-    import { toastStore } from "../../stores/toast";
-    import { activeVideoCall, incomingVideoCall } from "../../stores/video";
-    import { removeQueryStringParam } from "../../utils/urls";
-    import AreYouSure from "../AreYouSure.svelte";
-    import NativeUpgradeBanner from "../NativeUpgradeBanner.svelte";
-    import NotFound from "../NotFound.svelte";
-    import OfflineFooter from "../OfflineFooter.svelte";
-    import OnboardModal from "../onboard/OnboardModal.svelte";
-    import SuspendedModal from "../SuspendedModal.svelte";
-    import Toast from "../Toast.svelte";
-    import AcceptRulesModal from "./AcceptRulesModal.svelte";
-    import AnonFooter from "./AnonFooter.svelte";
-    import ChitEarned from "./ChitEarned.svelte";
-    import LeftPanel from "./LeftPanel.svelte";
-    import MiddlePanel from "./MiddlePanel.svelte";
-    import NoAccess from "./NoAccess.svelte";
-    import PinNumberModal from "./PinNumberModal.svelte";
-    import VerifyHumanity from "./profile/VerifyHumanity.svelte";
-    import ViewUserProfile from "./profile/ViewUserProfileModal.svelte";
-    import MakeProposalModal from "./proposal/MakeProposalModal.svelte";
-    import SuspendModal from "./SuspendModal.svelte";
-    import SetPinNumberModal from "./wallet/SetPinNumberModal.svelte";
-
-    type ViewProfileConfig = {
-        userId: string;
-        chatButton: boolean;
-        alignTo?: HTMLElement;
-        inGlobalContext: boolean;
-    };
-
-    const client = getContext<OpenChat>("client");
-
-    let showProfileCard = $state<ViewProfileConfig>();
-
-    type ConfirmActionEvent =
-        | ConfirmLeaveEvent
-        | ConfirmLeaveCommunityEvent
-        | ConfirmDeleteDirectChatEvent
-        | ConfirmDeleteCommunityEvent;
-
-    type ConfirmLeaveCommunityEvent = {
-        kind: "leave_community";
-        communityId: CommunityIdentifier;
-    };
-
-    type ConfirmDeleteDirectChatEvent = {
-        kind: "delete_direct_chat";
-        chatId: DirectChatIdentifier;
-        blockUser: boolean;
-    };
-
-    type ConfirmLeaveEvent = {
-        kind: "leave";
-        chatId: MultiUserChatIdentifier;
-        level: Level;
-    };
-
-    type ConfirmDeleteCommunityEvent = {
-        kind: "delete_community";
-        communityId: CommunityIdentifier;
-        doubleCheck: { challenge: ResourceKey; response: ResourceKey };
-    };
-
-    type ModalType =
-        | { kind: "none" }
-        | { kind: "verify_humanity" }
-        | { kind: "suspended" }
-        | { kind: "suspending"; userId: string }
-        | { kind: "no_access" }
-        | { kind: "hall_of_fame" }
-        | { kind: "make_proposal"; chat: MultiUserChat; nervousSystem: NervousSystemDetails }
-        | { kind: "not_found" };
-
-    let modal: ModalType = $state({ kind: "none" });
-    let confirmActionEvent: ConfirmActionEvent | undefined = $state();
-
-    onMount(() => {
-        const unsubEvents = [
-            subscribe("chatWith", chatWith),
-            subscribe("replyPrivatelyTo", replyPrivatelyTo),
-            subscribe("verifyHumanity", verifyHumanity),
-            subscribe("deleteDirectChat", onTriggerConfirm),
-            subscribe("deleteCommunity", onTriggerConfirm),
-            subscribe("leaveCommunity", onTriggerConfirm),
-            subscribe("makeProposal", showMakeProposalModal),
-            subscribe("leaveGroup", onTriggerConfirm),
-            subscribe("unarchiveChat", unarchiveChat),
-            subscribe("toggleMuteNotifications", toggleMuteNotifications),
-            subscribe("successfulImport", successfulImport),
-            subscribe("clearSelection", () => navigate(routeForScope($chatListScopeStore))),
-            subscribe("userSuspensionChanged", reload),
-            subscribe("selectedChatInvalid", selectedChatInvalid),
-            subscribe("sendMessageFailed", sendMessageFailed),
-            subscribe("remoteVideoCallStarted", remoteVideoCallStarted),
-            subscribe("remoteVideoCallEnded", remoteVideoCallEnded),
-            subscribe("notification", (n) => client.notificationReceived(n)),
-            subscribe("noAccess", () => (modal = { kind: "no_access" })),
-            subscribe("notFound", () => (modal = { kind: "not_found" })),
-            subscribe("copyUrl", copyUrl),
-            subscribe("suspendUser", suspendUser),
-        ];
-        client.initialiseNotifications();
-        document.body.addEventListener("profile-clicked", profileClicked);
-
-        if ($suspendedUserStore) {
-            modal = { kind: "suspended" };
-        }
-
-        return () => {
-            unsubEvents.forEach((u) => u());
-            document.body.removeEventListener("profile-clicked", profileClicked);
-        };
-    });
-
-    function reload() {
-        if (client.isNativeApp()) {
-            invoke("plugin:oc|restart_app");
-        } else {
-            window.location.reload();
-        }
-    }
-
-    function suspendUser(userId: string) {
-        modal = { kind: "suspending", userId };
-    }
-
-    function profileClicked(event: Event) {
-        profileLinkClicked(event as CustomEvent<ProfileLinkClickedEvent>);
-    }
-
-    function selectedChatInvalid() {
-        navigate(routeForScope(client.getDefaultScope()));
-    }
-
-    function sendMessageFailed(alert: boolean) {
-        if (alert) {
-            toastStore.showFailureToast(i18nKey("errorSendingMessage"));
-        }
-    }
-
-    function remoteVideoCallEnded(messageId: bigint) {
-        if ($incomingVideoCall?.messageId === messageId) {
-            incomingVideoCall.set(undefined);
-        }
-    }
-
-    function remoteVideoCallStarted(ev: PubSubEvents["remoteVideoCallStarted"]) {
-        // If current user is already in the call, or has previously been in the call, or the call started more than 2 hours ago, exit
-        if (
-            chatIdentifiersEqual($activeVideoCall?.chatId, ev.chatId) ||
-            ev.currentUserIsParticipant ||
-            Number(ev.timestamp) < Date.now() - 2 * 60 * 60 * 1000
-        ) {
-            return;
-        }
-
-        incomingVideoCall.set(ev);
-    }
-
-    async function routeChange(initialised: boolean, route: RouteParams): Promise<void> {
-        // wrap the whole thing in untrack because we don't want it to react to everything it reads in here
-        untrack(async () => {
-            // wait until we have loaded the chats
-            if (initialised) {
-                if (
-                    $anonUserStore &&
-                    client.isChatListRoute(route) &&
-                    route.scope.kind === "favourite"
-                ) {
-                    client.updateIdentityState({ kind: "logging_in" });
-                    navigate("/chats");
-                    return;
-                }
-
-                if (client.isHomeRoute(route) && $anonUserStore) {
-                    showOnboarding = true;
-                    return;
-                }
-
-                if (client.setChatListScopeAndRedirect(route)) {
-                    return;
-                }
-
-                if (client.isShareRoute(route)) {
-                    publish("shareMessage", {
-                        title: route.title,
-                        text: route.text,
-                        url: route.url,
-                        files: [],
-                    });
-                    navigate(routeForScope(client.getDefaultScope()));
-                }
-            }
-        });
-    }
-
-    function closeModal() {
-        modal = { kind: "none" };
-    }
-
-    function closeNoAccess() {
-        closeModal();
-        navigate(routeForScope(client.getDefaultScope()));
-    }
-
-    function unarchiveChat(chatId: ChatIdentifier) {
-        client.unarchiveChat(chatId).then((success) => {
-            if (!success) {
-                toastStore.showFailureToast(i18nKey("unarchiveChatFailed"));
-            }
-        });
-    }
-
-    function getConfirmMessage(
-        confirmActionEvent: ConfirmActionEvent | undefined,
-    ): ResourceKey | undefined {
-        if (confirmActionEvent === undefined) return undefined;
-
-        switch (confirmActionEvent.kind) {
-            case "leave":
-                return i18nKey("confirmLeaveGroup", undefined, confirmActionEvent.level, true);
-            case "delete_direct_chat":
-                return i18nKey("confirmDeleteDirectChat", undefined, undefined, true);
-            case "leave_community":
-                return i18nKey("communities.leaveMessage");
-            case "delete_community":
-                return i18nKey("communities.deleteMessage");
-        }
-    }
-
-    function onTriggerConfirm(detail: ConfirmActionEvent) {
-        confirmActionEvent = detail;
-    }
-
-    function onConfirmAction(yes: boolean): Promise<void> {
-        const result = yes ? doConfirmAction(confirmActionEvent!) : Promise.resolve();
-
-        return result.finally(() => {
-            confirmActionEvent = undefined;
-        });
-    }
-
-    function doConfirmAction(confirmActionEvent: ConfirmActionEvent): Promise<void> {
-        switch (confirmActionEvent.kind) {
-            case "leave":
-                return leaveGroup(confirmActionEvent.chatId, confirmActionEvent.level);
-            case "delete_direct_chat":
-                return deleteDirectChat(confirmActionEvent.chatId, confirmActionEvent.blockUser);
-            case "leave_community":
-                return leaveCommunity(confirmActionEvent.communityId);
-            case "delete_community":
-                return deleteCommunity(confirmActionEvent.communityId);
-            default:
-                return Promise.reject();
-        }
-    }
-
-    function deleteDirectChat(chatId: DirectChatIdentifier, blockUser: boolean): Promise<void> {
-        // Only redirect when deleting the chat we're currently viewing. The
-        // delete can now be triggered from the chat list for a non-selected
-        // chat, in which case we must leave the current route untouched.
-        const viewingThisChat = chatIdentifiersEqual($selectedChatIdStore, chatId);
-        if (viewingThisChat) {
-            navigate(routeForScope($chatListScopeStore));
-        }
-        return client.deleteDirectChat(chatId, blockUser).then((success) => {
-            if (!success) {
-                toastStore.showFailureToast(i18nKey("deleteDirectChatFailure"));
-                if (viewingThisChat) {
-                    navigate(routeForChatIdentifier($chatListScopeStore.kind, chatId));
-                }
-            }
-        });
-    }
-
-    function deleteCommunity(id: CommunityIdentifier): Promise<void> {
-        navigate(routeForScope(client.getDefaultScope()));
-
-        client.deleteCommunity(id).then((success) => {
-            if (!success) {
-                toastStore.showFailureToast(i18nKey("communities.errors.deleteFailed"));
-                navigate(`/community/${id.communityId}`);
-            }
-        });
-
-        return Promise.resolve();
-    }
-
-    function leaveCommunity(id: CommunityIdentifier): Promise<void> {
-        navigate(routeForScope(client.getDefaultScope()));
-
-        client.leaveCommunity(id).then((success) => {
-            if (!success) {
-                toastStore.showFailureToast(i18nKey("communities.errors.leaveFailed"));
-                navigate(`/community/${id.communityId}`);
-            }
-        });
-
-        return Promise.resolve();
-    }
-
-    function leaveGroup(chatId: MultiUserChatIdentifier, level: Level): Promise<void> {
-        navigate(routeForScope($chatListScopeStore));
-
-        client.leaveGroup(chatId).then((resp) => {
-            if (resp !== "success") {
-                if (resp === "owner_cannot_leave") {
-                    toastStore.showFailureToast(i18nKey("ownerCantLeave", undefined, level, true));
-                } else {
-                    toastStore.showFailureToast(
-                        i18nKey("failedToLeaveGroup", undefined, level, true),
-                    );
-                }
-                navigate(routeForChatIdentifier($chatListScopeStore.kind, chatId));
-            } else {
-                publish("closeModalStack");
-            }
-        });
-
-        return Promise.resolve();
-    }
-
-    function chatWith(chatId: DirectChatIdentifier) {
-        publish("closeModalStack");
-        const chat = $chatSummariesListStore.find((c) => {
-            return c.kind === "direct_chat" && c.them === chatId;
-        });
-
-        navigate(routeForChatIdentifier(chat ? $chatListScopeStore.kind : "chats", chatId));
-    }
-
-    function replyPrivatelyTo(context: EnhancedReplyContext) {
-        if (context.sender === undefined) return;
-
-        const chat = $chatSummariesListStore.find((c) => {
-            return (
-                c.kind === "direct_chat" &&
-                chatIdentifiersEqual(c.them, {
-                    kind: "direct_chat",
-                    userId: context.sender!.userId,
-                })
-            );
-        });
-
-        const chatId = chat?.id ?? { kind: "direct_chat", userId: context.sender.userId };
-        localUpdates.draftMessages.setTextContent({ chatId }, "");
-        localUpdates.draftMessages.setReplyingTo({ chatId }, context);
-        if (chat) {
-            navigate(routeForChatIdentifier($chatListScopeStore.kind, chatId));
-        } else {
-            createDirectChat(chatId as DirectChatIdentifier);
-        }
-    }
-
-    function showMakeProposalModal() {
-        if (nervousSystem !== undefined && selectedMultiUserChat !== undefined) {
-            modal = { kind: "make_proposal", chat: selectedMultiUserChat, nervousSystem };
-        }
-    }
-
-    function toggleMuteNotifications(detail: {
-        chatId: ChatIdentifier;
-        mute: boolean | undefined;
-        muteAtEveryone: boolean | undefined;
-    }) {
-        const op = detail.mute ? "muted" : "unmuted";
-        client
-            .toggleMuteNotifications(detail.chatId, detail.mute, detail.muteAtEveryone)
-            .then((success) => {
-                if (!success) {
-                    toastStore.showFailureToast(
-                        i18nKey("toggleMuteNotificationsFailed", {
-                            operation: $_(op),
-                        }),
-                    );
-                }
-            });
-    }
-
-    async function copyUrl() {
-        try {
-            const url = new URL(
-                `${window.location.pathname}${window.location.search}${window.location.hash}`,
-                client.canonicalOrigin(),
-            );
-            await navigator.clipboard.writeText(url.toString());
-            toastStore.showSuccessToast(i18nKey("urlCopiedToClipboard"));
-        } catch (err) {
-            console.error("Failed to copy url to clipboard", err);
-            toastStore.showFailureToast(i18nKey("failedToCopyUrlToClipboard"));
-        }
-    }
-
-    async function createDirectChat(chatId: DirectChatIdentifier): Promise<boolean> {
-        if (!(await client.createDirectChat(chatId))) {
-            modal = { kind: "not_found" };
-            return false;
-        }
-
-        navigate(routeForChatIdentifier("chats", chatId));
-        return true;
-    }
-
-    function successfulImport(id: ChannelIdentifier) {
-        navigate(`/community/${id.communityId}`);
-    }
-
-    function profileLinkClicked(ev: CustomEvent<ProfileLinkClickedEvent>) {
-        showProfileCard = {
-            userId: ev.detail.userId,
-            chatButton: ev.detail.chatButton,
-            inGlobalContext: ev.detail.inGlobalContext,
-            alignTo: ev.target ? (ev.target as HTMLElement) : undefined,
-        };
-    }
-
-    function chatWithFromProfileCard() {
-        if (showProfileCard === undefined) return;
-        chatWith({ kind: "direct_chat", userId: showProfileCard.userId });
-        showProfileCard = undefined;
-    }
-
-    let forgotPin = $state(false);
-
-    function onForgotPin() {
-        forgotPin = true;
-    }
-
-    function onPinNumberComplete(pin: string | undefined) {
-        if (pin) {
-            $pinNumberResolverStore?.resolve(pin);
-        }
-    }
-
-    function onPinNumberClose() {
-        $pinNumberResolverStore?.reject();
-    }
-
-    function verifyHumanity() {
-        modal = { kind: "verify_humanity" };
-    }
-
-    let confirmMessage = $derived(getConfirmMessage(confirmActionEvent));
-    let selectedMultiUserChat = $derived(
-        $selectedChatSummaryStore?.kind === "group_chat" ||
-            $selectedChatSummaryStore?.kind === "channel"
-            ? $selectedChatSummaryStore
-            : undefined,
-    );
-    let governanceCanisterId = $derived(
-        selectedMultiUserChat !== undefined
-            ? selectedMultiUserChat.subtype?.governanceCanisterId
-            : undefined,
-    );
-    let nervousSystem = $derived(client.tryGetNervousSystem(governanceCanisterId));
-    // let nervousSystem = $derived(client.tryGetNervousSystem("rrkah-fqaaa-aaaaa-aaaaq-cai"));
-
-    let showOnboarding = $derived(client.isHomeRoute($routeStore) && $anonUserStore);
-
-    trackedEffect("identity-state", () => {
-        if (
-            $identityStateStore.kind === "logged_in" &&
-            $identityStateStore.postLogin?.kind === "join_group" &&
-            $chatsInitialisedStore
-        ) {
-            // const join = { ...$identityStateStore.postLogin };
-            client.clearPostLoginState();
-            // tick().then(() => joinGroup(join));
-        }
-    });
-
-    trackedEffect("route-change", () => {
-        routeChange($chatsInitialisedStore, $routeStore);
-    });
-
-    $effect(() => {
-        if ($chatsInitialisedStore) {
-            const faq = $querystringStore.get("faq");
-            if (faq !== null) {
-                navigate(`/faq?q=${faq}`);
-            }
-            if ($querystringStore.get("hof") !== null) {
-                modal = { kind: "hall_of_fame" };
-                navigate(removeQueryStringParam("hof"));
-            }
-        }
-    });
-
-    let mainClass = $derived.by(() => {
-        const cls = [];
-        if ($offlineStore) {
-            cls.push("offline");
-        }
-        return cls.join(" ");
-    });
-</script>
-
-{#if showProfileCard !== undefined}
-    {@const profileUser = $allUsersStore.get(showProfileCard.userId)}
-    {#if profileUser?.kind !== "bot"}
-        <ViewUserProfile
-            userId={showProfileCard.userId}
-            inGlobalContext={showProfileCard.inGlobalContext}
-            chatButton={showProfileCard.chatButton}
-            onOpenDirectChat={chatWithFromProfileCard}
-            onClose={() => (showProfileCard = undefined)} />
-    {/if}
-{/if}
-
-<Container height={"fill"} width={"fill"} supplementalClass={mainClass} tag="main">
-    {#if showOnboarding}
-        <OnboardModal />
-    {:else}
-        {#if client.isNativeApp()}
-            <NativeUpgradeBanner />
-        {/if}
-        <LeftPanel />
-        <MiddlePanel />
-    {/if}
-</Container>
-
-{#if $anonUserStore && !showOnboarding && $routeStore.kind !== "communities_route"}
-    <AnonFooter />
-{/if}
-
-{#if $offlineStore}
-    <OfflineFooter />
-{/if}
-
-{#if confirmActionEvent !== undefined}
-    <AreYouSure
-        doubleCheck={confirmActionEvent.kind === "delete_community"
-            ? confirmActionEvent.doubleCheck
-            : undefined}
-        message={confirmMessage}
-        action={onConfirmAction} />
-{/if}
-
-<Toast />
-
-{#if modal.kind !== "none"}
-    {#if modal.kind === "not_found"}
-        <NotFound onClose={closeNoAccess} />
-    {:else if modal.kind === "suspended"}
-        <SuspendedModal onClose={closeModal} />
-    {:else if modal.kind === "suspending"}
-        <SuspendModal userId={modal.userId} onClose={closeModal} />
-    {:else if modal.kind === "verify_humanity"}
-        <VerifyHumanity onClose={closeModal} onSuccess={closeModal} />
-    {:else if modal.kind === "no_access"}
-        <NoAccess onClose={closeNoAccess} />
-    {:else if modal.kind === "make_proposal"}
-        <MakeProposalModal
-            selectedMultiUserChat={modal.chat}
-            nervousSystem={modal.nervousSystem}
-            onClose={closeModal} />
-    {/if}
-{/if}
-
-{#if $rulesAcceptanceStore !== undefined}
-    <AcceptRulesModal />
-{:else if forgotPin}
-    <Sheet onDismiss={() => (forgotPin = false)}>
-        <SetPinNumberModal
-            onPinSet={onPinNumberComplete}
-            onClose={() => (forgotPin = false)}
-            type={{ kind: "forgot", while: { kind: "enter" } }} />
-    </Sheet>
-{:else if $pinNumberResolverStore !== undefined}
-    <PinNumberModal
-        onClose={onPinNumberClose}
-        onComplete={onPinNumberComplete}
-        onForgot={onForgotPin} />
-{/if}
-
-{#if $chitPopup && !$disableChit}
-    <ChitEarned />
-{/if}
-
-<style lang="scss">
-    :global(.edited-msg) {
-        @include font(light, normal, fs-70);
-    }
-
-    :global(main.offline) {
-        margin-bottom: toRem(50);
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/HomeRoute.svelte b/frontend/app/src/components_mobile/home/HomeRoute.svelte
deleted file mode 100644
index b957226530..0000000000
--- a/frontend/app/src/components_mobile/home/HomeRoute.svelte
+++ /dev/null
@@ -1,40 +0,0 @@
-<script lang="ts">
-    import { chatsInitialisedStore, identityStateStore } from "@client";
-    import FancyLoader from "../icons/FancyLoader.svelte";
-    import Home from "./Home.svelte";
-
-    let registering = $derived(
-        $identityStateStore.kind === "registering" ||
-            ($identityStateStore.kind === "loading_user" && $identityStateStore.registering),
-    );
-
-    let showLoader = $derived(
-        !registering && (!$chatsInitialisedStore || $identityStateStore.kind === "loading_user"),
-    );
-</script>
-
-{#if showLoader}
-    <div class="loading">
-        <div class="inner-loader">
-            <FancyLoader />
-        </div>
-    </div>
-{:else}
-    <Home />
-{/if}
-
-<style lang="scss">
-    .loading {
-        width: 100vw;
-        height: 100vh;
-        height: calc(var(--vh, 1vh) * 100);
-        height: 100dvh; // firefox will ignore this
-        display: grid;
-    }
-
-    .inner-loader {
-        width: toRem(48);
-        height: toRem(48);
-        margin: auto;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/HumanityConfirmation.svelte b/frontend/app/src/components_mobile/home/HumanityConfirmation.svelte
deleted file mode 100644
index fbfed1439e..0000000000
--- a/frontend/app/src/components_mobile/home/HumanityConfirmation.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-<script lang="ts">
-    import { Body, BodySmall, ColourVars, Container, Subtitle, Switch } from "component-lib";
-    import { _ } from "svelte-i18n";
-    import { i18nKey, interpolate } from "../../i18n/i18n";
-    import Translatable from "../Translatable.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-
-    interface Props {
-        confirmed: boolean;
-    }
-
-    let { confirmed = $bindable() }: Props = $props();
-</script>
-
-<Container gap={"lg"} direction={"vertical"}>
-    <Subtitle fontWeight={"bold"} colour={"primary"}>
-        <Translatable resourceKey={i18nKey("IMPORTANT! Before you proceed")}></Translatable>
-    </Subtitle>
-    <Body fontWeight={"bold"}>
-        <Markdown text={interpolate($_, i18nKey("access.doYouHaveUniquePersonCredential"))} />
-    </Body>
-
-    <BodySmall>
-        <Markdown text={interpolate($_, i18nKey("access.uniquePersonInfo2"))} />
-    </BodySmall>
-
-    <BodySmall>
-        <Translatable resourceKey={i18nKey("access.uniquePersonInfo3")}></Translatable>
-    </BodySmall>
-
-    <Container
-        onClick={() => (confirmed = !confirmed)}
-        background={ColourVars.background2}
-        crossAxisAlignment={"center"}
-        borderRadius={"md"}
-        gap={"lg"}
-        padding={"lg"}>
-        <BodySmall>
-            <Translatable
-                resourceKey={i18nKey("I have verified my unique personhood with DecideAI")}>
-            </Translatable>
-        </BodySmall>
-        <Switch bind:checked={confirmed}></Switch>
-    </Container>
-</Container>
diff --git a/frontend/app/src/components_mobile/home/ImageContent.svelte b/frontend/app/src/components_mobile/home/ImageContent.svelte
deleted file mode 100644
index 3289e0e581..0000000000
--- a/frontend/app/src/components_mobile/home/ImageContent.svelte
+++ /dev/null
@@ -1,409 +0,0 @@
-<script lang="ts">
-    import { scrollStatus } from "@stores/scroll.svelte";
-    import { Button, ChatCaption, ColourVars, Column, CommonButton2, Row } from "component-lib";
-    import {
-        publish,
-        type ImageContent,
-        type MemeFighterContent,
-        type TextContent as TextContentType,
-    } from "@client";
-    import { type Snippet } from "svelte";
-    import EyeOffOutline from "svelte-material-icons/EyeOffOutline.svelte";
-    import EyeOutline from "svelte-material-icons/EyeOutline.svelte";
-    import ImageOutline from "svelte-material-icons/ImageOutline.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { rtlStore } from "../../stores/rtl";
-    import { lowBandwidth } from "../../stores/settings";
-    import { getProxyAdjustedBlobUrl, reservedMediaStyle } from "../../utils/media";
-    import Translatable from "../Translatable.svelte";
-    import MessageRenderer from "./MessageRenderer.svelte";
-
-    interface Props {
-        content: ImageContent | MemeFighterContent;
-        contentWidth?: number;
-        title?: Snippet;
-        me: boolean;
-        fill: boolean;
-        draft?: boolean;
-        reply?: boolean;
-        pinned?: boolean;
-        height?: number | undefined;
-        intersecting?: boolean;
-        edited: boolean;
-        blockLevelMarkdown?: boolean;
-        showPreviews?: boolean;
-        isPreview?: boolean;
-        onRemove?: () => void;
-        onRemovePreview?: (url: string) => void;
-    }
-
-    let {
-        content,
-        contentWidth = $bindable(),
-        title,
-        me,
-        fill,
-        draft = false,
-        reply = false,
-        pinned = false,
-        height = undefined,
-        intersecting = true,
-        edited,
-        blockLevelMarkdown = false,
-        // TODO Fix show previews! Currently if a preview is removed, it also removes the attached image!!!
-        // showPreviews = true,
-        // onRemovePreview,
-        isPreview = false,
-        onRemove,
-    }: Props = $props();
-
-    const MIN_IMG_WIDTH = 150;
-
-    let imgElement: HTMLImageElement | undefined = $state();
-    let imageWidth = $state(0);
-    let landscape = $derived(content.height < content.width);
-    let normalised = $derived(normaliseContent(content));
-    let hidden = $state(false);
-    let zoomable = $derived(!draft && !reply && !pinned);
-    let textContent = $derived<TextContentType | undefined>(
-        normalised ? { kind: "text_content", text: normalised.caption ?? "" } : undefined,
-    );
-    let hasContent = $derived(!!textContent?.text);
-
-    let narrow = $derived(imageWidth > 0 && imageWidth < MIN_IMG_WIDTH && hasContent);
-    let maxTextContentWidth = $derived(narrow ? 200 : imageWidth);
-
-    $effect(() => {
-        contentWidth = maxTextContentWidth;
-    });
-    $effect(() => {
-        hidden = $lowBandwidth && !draft;
-    });
-
-    function normaliseContent(content: ImageContent | MemeFighterContent) {
-        switch (content.kind) {
-            case "image_content":
-                return {
-                    url: getProxyAdjustedBlobUrl(content.blobUrl),
-                    caption: content.caption,
-                    fallback: content.thumbnailData,
-                    loadMsg: "loadImage",
-                };
-            case "meme_fighter_content":
-                return {
-                    url: content.url,
-                    caption: undefined,
-                    fallback: "/assets/memefighter.svg",
-                    loadMsg: "loadMeme",
-                };
-        }
-    }
-
-    function focusImage() {
-        if (!scrollStatus.isCooldown) {
-            publish("focusImage", content);
-        }
-    }
-
-    function onError() {
-        if (imgElement) {
-            imgElement.src = normalised.fallback;
-        }
-    }
-</script>
-
-{#snippet replyView(textContent?: Snippet)}
-    <Row gap="sm" minWidth="12rem">
-        <Column width="fill" gap="xxs" padding={["xs", "zero"]}>
-            {@render title?.()}
-            {#if textContent}
-                {@render textContent()}
-            {:else}
-                <Row gap="xs" crossAxisAlignment="center">
-                    <ImageOutline
-                        color={me ? ColourVars.secondaryLight : ColourVars.primaryLight}
-                        size="1.25rem" />
-                    <ChatCaption colour={me ? "secondaryLight" : "primaryLight"}>
-                        <Translatable resourceKey={i18nKey("Photo")} />
-                    </ChatCaption>
-                </Row>
-            {/if}
-        </Column>
-        <div
-            class="reply_image_preview"
-            style="background-image:url({intersecting && !hidden
-                ? normalised.url
-                : normalised.fallback});">
-        </div>
-    </Row>
-{/snippet}
-
-{#snippet draftView()}
-    <Column width={"fill"}>
-        {#if hidden}
-            <Column
-                height={"fill"}
-                padding={"xl"}
-                supplementalClass={"image_content_mask"}
-                mainAxisAlignment={"center"}
-                crossAxisAlignment={"center"}>
-                {#if !reply && !draft}
-                    <Button height={"hug"} width={"fill"} onClick={() => (hidden = false)}
-                        ><Translatable resourceKey={i18nKey(normalised.loadMsg)} /></Button>
-                {/if}
-            </Column>
-        {/if}
-
-        <div class="draft_image_preview">
-            <!-- svelte-ignore a11y_click_events_have_key_events -->
-            <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-            <div class="image_wrapper">
-                <img
-                    class="img"
-                    class:landscape
-                    class:fill
-                    class:draft
-                    class:reply
-                    class:zoomable={zoomable && !hidden}
-                    class:rtl={$rtlStore}
-                    style={height === undefined ? undefined : `height: ${height}px`}
-                    src={intersecting && !hidden ? normalised.url : normalised.fallback}
-                    alt={normalised.caption} />
-            </div>
-        </div>
-    </Column>
-{/snippet}
-
-{#snippet regularView(textContent?: Snippet)}
-    <Column
-        supplementalClass={`regular_image_content ${me ? "me" : ""} ${fill ? "fill" : ""}`}
-        maxWidth={"100%"}
-        width={narrow ? "fill" : "hug"}>
-        {#if hidden}
-            <Column
-                height={"fill"}
-                supplementalClass={"image_content_mask"}
-                mainAxisAlignment={"center"}
-                crossAxisAlignment={"center"}>
-                {#if !reply && !draft}
-                    <CommonButton2 onClick={() => (hidden = false)} variant="secondary" mode="text">
-                        <EyeOutline size="2rem" color={ColourVars.textPrimary} />
-                    </CommonButton2>
-                {/if}
-            </Column>
-        {/if}
-        <!-- svelte-ignore a11y_interactive_supports_focus -->
-        <!-- svelte-ignore a11y_click_events_have_key_events -->
-        <!-- svelte-ignore a11y_no_static_element_interactions -->
-        <div class="image_wrapper" class:narrow onclick={focusImage}>
-            {#if normalised.url !== undefined}
-                <img
-                    bind:this={imgElement}
-                    bind:clientWidth={imageWidth}
-                    draggable="false"
-                    onerror={onError}
-                    class="image"
-                    class:me
-                    class:landscape
-                    class:fill
-                    class:draft
-                    class:reply
-                    class:zoomable={zoomable && !hidden}
-                    class:rtl={$rtlStore}
-                    style={height !== undefined
-                        ? `height: ${height}px`
-                        : draft || reply || pinned
-                          ? undefined
-                          : reservedMediaStyle(content.width, content.height)}
-                    src={intersecting && !hidden ? normalised.url : normalised.fallback}
-                    alt={normalised.caption} />
-            {:else}
-                <!-- TODO generic image preview -->
-                <div></div>
-            {/if}
-        </div>
-        {#if !zoomable}
-            <div class="status_icon" class:rtl={$rtlStore}>
-                <EyeOffOutline size={"1.25em"} color={ColourVars.textPrimary} />
-            </div>
-        {/if}
-    </Column>
-    {@render textContent?.()}
-{/snippet}
-
-<MessageRenderer
-    {replyView}
-    {draftView}
-    {regularView}
-    caption={textContent?.text}
-    maxCaptionWidth={!reply && !draft ? maxTextContentWidth : undefined}
-    {me}
-    {reply}
-    {draft}
-    {edited}
-    {blockLevelMarkdown}
-    {isPreview}
-    {onRemove} />
-
-<style lang="scss">
-    :global {
-        .image_content_mask {
-            position: absolute !important;
-            top: 0;
-            left: 0;
-            height: 100%;
-            width: 100%;
-            backdrop-filter: blur(10px);
-            -webkit-backdrop-filter: blur(10px);
-            background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5));
-        }
-
-        .regular_image_content {
-            .image_wrapper,
-            .image_content_mask {
-                border-radius: var(--rad-lg) var(--rad-lg) var(--rad-md) var(--rad-md) !important;
-            }
-
-            &.me {
-                .image_wrapper,
-                .image_content_mask {
-                    border-top-right-radius: var(--rad-sm) !important;
-                }
-
-                .image_wrapper.narrow {
-                    background-color: var(--primary-muted);
-                }
-            }
-
-            &:not(.me) {
-                .image_wrapper,
-                .image_content_mask {
-                    border-top-left-radius: var(--rad-sm) !important;
-                }
-
-                .image_wrapper.narrow {
-                    background-color: var(--background-1);
-                }
-            }
-
-            &.fill {
-                .image_wrapper,
-                .image_content_mask {
-                    border-bottom-left-radius: var(--rad-lg) !important;
-                    border-bottom-right-radius: var(--rad-lg) !important;
-                }
-            }
-
-            .image_wrapper {
-                overflow: hidden;
-
-                &.narrow {
-                    width: 100%;
-                    display: flex;
-                    justify-content: center;
-                    padding: var(--sp-xs);
-
-                    .image {
-                        border-radius: var(--rad-md);
-                    }
-                }
-            }
-
-            .image {
-                width: 100%;
-                display: block;
-
-                &:not(.landscape) {
-                    min-height: 6rem;
-                    min-width: 0;
-                }
-
-                &.draft {
-                    max-width: calc(var(--vh, 1vh) * 50);
-                    max-height: none;
-                    height: auto;
-                }
-
-                &:not(.landscape).draft {
-                    max-width: none;
-                    max-height: calc(var(--vh, 1vh) * 50);
-                    width: auto;
-                    width: -webkit-fill-available;
-                    height: 100%;
-                }
-
-                &.reply {
-                    max-width: 6rem;
-                    max-height: none;
-                    height: auto;
-                    float: right;
-                    margin-left: $sp3;
-                    margin-right: 0;
-                }
-
-                &.rtl.reply {
-                    float: left;
-                    margin-left: 0;
-                    margin-right: $sp3;
-                }
-
-                &:not(.landscape).reply {
-                    max-width: none;
-                    max-height: 6rem;
-                    width: auto;
-                }
-            }
-
-            .status_icon {
-                position: absolute;
-                bottom: var(--sp-xs);
-                right: var(--sp-sm);
-
-                &.rtl {
-                    left: 0;
-                    right: unset;
-                }
-            }
-        }
-    }
-
-    .reply_image_preview {
-        width: 4rem;
-        min-height: 3rem;
-        height: -webkit-fill-available;
-        background-size: cover;
-        background-position: center;
-        border-radius: var(--rad-sm);
-    }
-
-    .draft_image_preview {
-        width: 100%;
-        padding: var(--sp-xs);
-        animation: grow-height 300ms ease-out forwards;
-        will-change: max-height, opacity;
-
-        .image_wrapper {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            padding: var(--sp-xs);
-            background-color: var(--background-0);
-            border-radius: var(--rad-lg) var(--rad-lg) var(--rad-lg) var(--rad-lg);
-        }
-
-        .img {
-            display: flex;
-            max-width: 14rem;
-            max-height: 14rem;
-            overflow: hidden;
-            border-radius: var(--rad-md);
-        }
-
-        .img-bg {
-            width: 10rem;
-            height: 10rem;
-            background-size: contain;
-            background-repeat: no-repeat;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/InitialChatMessage.svelte b/frontend/app/src/components_mobile/home/InitialChatMessage.svelte
deleted file mode 100644
index 31754fc8c7..0000000000
--- a/frontend/app/src/components_mobile/home/InitialChatMessage.svelte
+++ /dev/null
@@ -1,135 +0,0 @@
-<script lang="ts">
-    import { Avatar } from "component-lib";
-    import {
-        allUsersStore,
-        botState,
-        type ChatSummary,
-        type CommandDefinition,
-        directChatBotsStore,
-        emptyGrantedBotPermissions,
-        type GrantedBotPermissions,
-        isProposalGroupStore,
-        type OpenChat,
-        type ResourceKey,
-        selectedCommunitySummaryStore,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import BotCommands from "../bots/BotCommands.svelte";
-    import WithVerifiedBadge from "../icons/WithVerifiedBadge.svelte";
-    import ProposalBot from "@shared_components/ProposalBot.svelte";
-    import Robot from "@shared_components/Robot.svelte";
-    import Translatable from "../Translatable.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    type BotState = {
-        commands: CommandDefinition[];
-        grantedPermissions: GrantedBotPermissions;
-    };
-
-    type State = {
-        title: ResourceKey;
-        verified: boolean;
-        description?: string;
-        avatarUrl: string;
-        subtitle?: ResourceKey;
-        bot?: BotState;
-    };
-
-    interface Props {
-        chat: ChatSummary;
-    }
-
-    let { chat }: Props = $props();
-
-    let state = $derived.by<State>(() => {
-        switch (chat.kind) {
-            case "direct_chat":
-                const them = $allUsersStore.get(chat.them.userId);
-                const s: State = {
-                    title: i18nKey(client.displayName(them)),
-                    verified: false,
-                    avatarUrl: client.userAvatarUrl($allUsersStore.get(chat.them.userId)),
-                };
-                const bot = botState.externalBots.get(chat.them.userId);
-                const perm =
-                    $directChatBotsStore.get(chat.them.userId) ?? emptyGrantedBotPermissions();
-                return bot === undefined
-                    ? s
-                    : {
-                          ...s,
-                          description: bot.definition.description,
-                          bot: {
-                              commands: bot.definition.commands,
-                              grantedPermissions: perm,
-                          },
-                      };
-            default:
-                return {
-                    title: i18nKey("group.welcome", { groupName: chat.name }),
-                    verified: chat.kind === "group_chat" ? chat.verified : false,
-                    description: chat.description,
-                    avatarUrl: client.groupAvatarUrl(chat, $selectedCommunitySummaryStore),
-                    subtitle: i18nKey(
-                        chat.public ? "thisIsPublicGroupWithN" : "thisIsPrivateGroupWithN",
-                        { number: chat.memberCount },
-                        chat.level,
-                        true,
-                    ),
-                    bot: undefined,
-                };
-        }
-    });
-</script>
-
-<div class="container">
-    {#if $isProposalGroupStore}
-        <ProposalBot />
-    {:else if chat.kind === "direct_chat" && client.isOpenChatBot(chat.them.userId)}
-        <Robot />
-    {:else}
-        <WithVerifiedBadge verified={state.verified}>
-            <h4 class="welcome">
-                <Translatable resourceKey={state.title} />
-            </h4>
-        </WithVerifiedBadge>
-        <div class="pop">
-            <Avatar url={state.avatarUrl} size={"huge"} name={(chat as any).name} />
-        </div>
-        {#if state.description && state.description.length > 0}
-            <Markdown inline={false} text={state.description} />
-        {/if}
-        {#if state.bot !== undefined}
-            <BotCommands centered {...state.bot} />
-        {/if}
-        {#if state.subtitle}
-            <Translatable resourceKey={state.subtitle} />
-        {/if}
-    {/if}
-</div>
-
-<style lang="scss">
-    .container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: $sp4;
-        margin: $sp4 auto;
-        text-align: center;
-        background-color: var(--timeline-bg);
-        color: var(--timeline-txt);
-        @include font(book, normal, fs-70);
-        max-width: toRem(400);
-    }
-
-    .welcome {
-        @include font(bold, normal, fs-120);
-        color: var(--txt);
-    }
-
-    .pop {
-        @include pop(400ms);
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/LeftPanel.svelte b/frontend/app/src/components_mobile/home/LeftPanel.svelte
deleted file mode 100644
index 03d3dacd5b..0000000000
--- a/frontend/app/src/components_mobile/home/LeftPanel.svelte
+++ /dev/null
@@ -1,175 +0,0 @@
-<script lang="ts">
-    import { i18nKey } from "@src/i18n/i18n";
-    import { Caption, ColourVars, CommonButton, Container } from "component-lib";
-    import {
-        activityFeedShowing,
-        anonUserStore,
-        chatListScopeStore,
-        ROLE_NONE,
-        routeStore,
-        selectedChatIdStore,
-        selectedCommunitySummaryStore,
-        showLeft,
-    } from "@client";
-    import ArrowLeft from "svelte-material-icons/ArrowLeft.svelte";
-    import Enter from "svelte-material-icons/LocationEnter.svelte";
-    import { rtlStore } from "../../stores/rtl";
-    import Translatable from "../Translatable.svelte";
-    import ActivityFeed from "./activity/ActivityFeed.svelte";
-    import BottomBar, { type Selection } from "./bottom_bar/BottomBar.svelte";
-    import ChatList from "./ChatList.svelte";
-    import PreviewWrapper from "./communities/PreviewWrapper.svelte";
-    import CommunitiesSheet from "./communities_sheet/CommunitiesSheet.svelte";
-    import SlidingModals from "./SlidingModals.svelte";
-    import UserProfileSummary from "./user_profile/UserProfileSummary.svelte";
-    import ActiveCallSummary from "./video/ActiveCallSummary.svelte";
-    import Wallet from "./wallet/Wallet.svelte";
-    import WelcomePage from "./WelcomePage.svelte";
-
-    let showPreview = $derived(
-        !$anonUserStore &&
-            $selectedCommunitySummaryStore?.membership.role === ROLE_NONE &&
-            $selectedChatIdStore === undefined,
-    );
-    let showProfileSummary = $derived($routeStore.kind === "profile_summary_route");
-    let showWelcome = $derived($routeStore.kind === "welcome_route");
-    let showWallet = $derived($routeStore.kind === "wallet_route");
-    let showNotifications = $derived($routeStore.kind === "notifications_route");
-    let selection = $derived<Selection>(bottomBarSelection());
-    let sectionClass = $derived.by(() => {
-        const c = ["left_panel"];
-        if ($showLeft) {
-            c.push("visible");
-        }
-        if ($rtlStore) {
-            c.push("rtl");
-        }
-        return c.join(" ");
-    });
-    let communitiesExpanded = $state(false);
-    let dimmed = $derived(communitiesExpanded && selection === "communities");
-
-    $effect(() => {
-        if (selection !== "communities") {
-            communitiesExpanded = false;
-        }
-    });
-
-    function bottomBarSelection() {
-        if (showNotifications) {
-            return "notification";
-        } else if (showProfileSummary) {
-            return "profile";
-        } else if (showWallet) {
-            return "wallet";
-        } else if (showWelcome) {
-            return "communities";
-        } else {
-            switch ($chatListScopeStore.kind) {
-                case "community":
-                    return "communities";
-                case "favourite":
-                    return "favourites";
-                default:
-                    return "chats";
-            }
-        }
-    }
-</script>
-
-<SlidingModals />
-
-<Container
-    mainAxisAlignment={"spaceBetween"}
-    supplementalClass={sectionClass}
-    background={ColourVars.background0}
-    tag={"section"}
-    height={"fill"}
-    direction={"vertical"}>
-    <Container
-        supplementalClass={`left_panel_inner ${dimmed ? "dimmed" : ""}`}
-        height={"fill"}
-        width={"fill"}
-        direction={"vertical"}>
-        {#if showNotifications}
-            <ActivityFeed />
-        {:else if showWallet}
-            <Wallet />
-        {:else if showProfileSummary}
-            <UserProfileSummary />
-        {:else if showWelcome}
-            <WelcomePage />
-        {:else}
-            <ChatList />
-        {/if}
-        <ActiveCallSummary />
-    </Container>
-
-    {#if !$anonUserStore}
-        {#if !showPreview && $chatListScopeStore.kind === "community" && !$activityFeedShowing}
-            <CommunitiesSheet bind:expanded={communitiesExpanded} />
-        {/if}
-        {#if showPreview}
-            <PreviewWrapper>
-                {#snippet children(joiningCommunity, joinCommunity, cancelPreview, gatesInEffect)}
-                    <Container
-                        gap={"sm"}
-                        direction={"vertical"}
-                        padding={"lg"}
-                        background={ColourVars.background1}>
-                        <Container crossAxisAlignment={"center"}>
-                            <Container>
-                                <CommonButton onClick={cancelPreview} size={"small_text"}>
-                                    {#snippet icon(color, size)}
-                                        <ArrowLeft {color} {size} />
-                                    {/snippet}
-                                    <Translatable resourceKey={i18nKey("back")} />
-                                </CommonButton>
-                            </Container>
-                            <CommonButton
-                                mode={"active"}
-                                loading={joiningCommunity}
-                                disabled={joiningCommunity}
-                                onClick={joinCommunity}>
-                                {#snippet icon(color, size)}
-                                    <Enter {color} {size} />
-                                {/snippet}
-                                <Translatable resourceKey={i18nKey("communities.joinCommunity")} />
-                            </CommonButton>
-                        </Container>
-                        {#if gatesInEffect}
-                            <Container padding={["zero", "sm"]} mainAxisAlignment={"end"}>
-                                <Caption width={"hug"} fontWeight={"bold"} colour={"textSecondary"}>
-                                    <Translatable resourceKey={i18nKey("Access gates enabled")} />
-                                </Caption>
-                            </Container>
-                        {/if}
-                    </Container>
-                {/snippet}
-            </PreviewWrapper>
-        {/if}
-        <BottomBar {selection} />
-    {/if}
-</Container>
-
-<style lang="scss">
-    :global(.container.left_panel:not(.visible)) {
-        display: none !important;
-    }
-
-    :global(.container.left_panel_inner) {
-        transition: opacity 200ms ease-in-out;
-    }
-
-    :global(.container.left_panel_inner.dimmed) {
-        opacity: 0.5;
-    }
-
-    /* .join {
-        position: sticky;
-        bottom: 0;
-        padding: $sp3 $sp4;
-        background-color: var(--entry-bg);
-        width: 100%;
-    } */
-</style>
diff --git a/frontend/app/src/components_mobile/home/MembersChangedEvent.svelte b/frontend/app/src/components_mobile/home/MembersChangedEvent.svelte
deleted file mode 100644
index bc839ac598..0000000000
--- a/frontend/app/src/components_mobile/home/MembersChangedEvent.svelte
+++ /dev/null
@@ -1,54 +0,0 @@
-<script lang="ts">
-    import type { Level, OpenChat, UserSummary } from "@client";
-    import { allUsersStore } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { i18nKey, interpolate } from "../../i18n/i18n";
-    import { buildDisplayName } from "../../utils/user";
-    import NonMessageEvent from "./NonMessageEvent.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        user: UserSummary | undefined;
-        changedBy: string;
-        changed: string[];
-        timestamp: bigint;
-        resourceKey: string;
-        level: Level;
-    }
-
-    let { user, changedBy, changed, timestamp, resourceKey, level }: Props = $props();
-
-    let me = $derived(changedBy === user?.userId);
-    let changedByStr = $derived(
-        `**${buildDisplayName($allUsersStore, changedBy, me ? "me" : "user")}**`,
-    );
-    let members = $derived(
-        client.getMembersString(
-            user!,
-            $allUsersStore,
-            changed,
-            $_("unknownUser"),
-            $_("you"),
-            user ? client.compareIsNotYouThenUsername(user.userId) : client.compareUsername,
-        ),
-    );
-
-    let text = $derived(
-        interpolate(
-            $_,
-            i18nKey(
-                resourceKey,
-                {
-                    changed: members,
-                    changedBy: changedByStr,
-                },
-                level,
-                true,
-            ),
-        ),
-    );
-</script>
-
-<NonMessageEvent {text} {timestamp} />
diff --git a/frontend/app/src/components_mobile/home/MemeBuilder.svelte b/frontend/app/src/components_mobile/home/MemeBuilder.svelte
deleted file mode 100644
index b5811c51a0..0000000000
--- a/frontend/app/src/components_mobile/home/MemeBuilder.svelte
+++ /dev/null
@@ -1,108 +0,0 @@
-<script lang="ts">
-    import { Column, CommonButton, Row, Sheet, Subtitle } from "component-lib";
-    import { iconSize, type MemeFighterContent as MemeFighterContentType } from "@client";
-    import { tick } from "svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { currentTheme } from "../../theme/themes";
-    import Translatable from "../Translatable.svelte";
-    import MemeFighter from "../icons/MemeFighter.svelte";
-    import { keyboard } from "@src/stores/keyboard.svelte";
-
-    interface Props {
-        open: boolean;
-        width?: number;
-        height?: number;
-        onSend: (content: MemeFighterContentType) => void;
-    }
-
-    let { open = $bindable(), width = 500, height = 400, onSend }: Props = $props();
-
-    let memeUrl = $state(undefined as string | undefined);
-    let iframe: HTMLIFrameElement;
-    let img: HTMLImageElement | undefined = $state();
-    let placeholder = "/assets/memefighter.svg";
-
-    export function reset() {
-        memeUrl = undefined;
-        tick().then(async () => {
-            if (iframe) {
-                const { start } = await import("@memefighter/maker-core");
-                start({
-                    iframe,
-                    styleVariables,
-                    skipInsertButton: true,
-                }).then(onMemeCreated);
-            }
-        });
-    }
-
-    const styleVariables = {
-        "--background-color": "#1b1c21",
-        "--foreground-color": $currentTheme.txt,
-        "--button-color": $currentTheme.button.bg,
-    };
-
-    function send() {
-        if (memeUrl !== undefined && img !== undefined) {
-            const rect = img.getBoundingClientRect();
-            const content: MemeFighterContentType = {
-                kind: "meme_fighter_content",
-                url: memeUrl,
-                width: rect.width,
-                height: rect.height,
-            };
-            onSend(content);
-            open = false;
-        }
-    }
-
-    function close() {
-        keyboard.disableViewportResize();
-        open = false;
-    }
-
-    function onMemeCreated(url: string) {
-        memeUrl = url;
-    }
-
-    function error() {
-        if (img) {
-            img.src = placeholder;
-        }
-    }
-</script>
-
-{#if open}
-    <Sheet onDismiss={close}>
-        <Column gap={"lg"} padding={"lg"}>
-            <Row crossAxisAlignment={"center"} gap={"sm"}>
-                <MemeFighter size={$iconSize} color={"var(--icon-txt)"} />
-                <Subtitle fontWeight={"bold"}>Meme Fighter</Subtitle>
-            </Row>
-            <Column minHeight={"25rem"} crossAxisAlignment={"center"} mainAxisAlignment={"center"}>
-                {#if memeUrl}
-                    <img bind:this={img} class="meme" src={memeUrl} onerror={error} />
-                {:else}
-                    <iframe
-                        bind:this={iframe}
-                        {width}
-                        {height}
-                        style="border: none; max-width: 100%;"></iframe>
-                {/if}
-            </Column>
-            <Row mainAxisAlignment={"end"} gap={"md"} crossAxisAlignment={"center"}>
-                <CommonButton size={"small_text"} onClick={reset}
-                    ><Translatable resourceKey={i18nKey("reset")} /></CommonButton>
-                <CommonButton size={"small_text"} onClick={close}
-                    ><Translatable resourceKey={i18nKey("cancel")} /></CommonButton>
-                <CommonButton
-                    mode={"active"}
-                    size={"medium"}
-                    disabled={memeUrl === undefined}
-                    onClick={send}>
-                    <Translatable resourceKey={i18nKey("send")} />
-                </CommonButton>
-            </Row>
-        </Column>
-    </Sheet>
-{/if}
diff --git a/frontend/app/src/components_mobile/home/MentionPicker.svelte b/frontend/app/src/components_mobile/home/MentionPicker.svelte
deleted file mode 100644
index b30668c07a..0000000000
--- a/frontend/app/src/components_mobile/home/MentionPicker.svelte
+++ /dev/null
@@ -1,145 +0,0 @@
-<script lang="ts">
-    import VirtualList from "@shared_components/VirtualList.svelte";
-    import { Avatar, Body, ColourVars, Column, MenuItem, Row } from "component-lib";
-    import type { OpenChat, UserOrUserGroup } from "@client";
-    import { allUsersStore, iconSize, selectedCommunityMembersStore } from "@client";
-    import { getContext } from "svelte";
-    import AccountMultiple from "svelte-material-icons/AccountMultiple.svelte";
-    import MentionPickerLogic from "./MentionPickerLogic.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        prefix: string | undefined;
-        offset: number;
-        direction?: "up" | "down";
-        border?: boolean;
-        mentionSelf?: boolean;
-        supportsUserGroups?: boolean;
-        usersOnly?: boolean;
-        inline?: boolean;
-        onMention: (user: UserOrUserGroup) => void;
-    }
-
-    let {
-        prefix,
-        offset,
-        direction = "up",
-        border = false,
-        mentionSelf = false,
-        supportsUserGroups = false,
-        usersOnly = false,
-        inline = false,
-        onMention,
-    }: Props = $props();
-</script>
-
-<MentionPickerLogic
-    {prefix}
-    {offset}
-    {direction}
-    {border}
-    {mentionSelf}
-    {supportsUserGroups}
-    {usersOnly}
-    {inline}
-    {onMention}>
-    {#snippet children(
-        userOrGroupKey,
-        mention,
-        filtered,
-        direction,
-        inline,
-        border,
-        style,
-        index,
-        height,
-    )}
-        {#if filtered.length > 0}
-            <div
-                class="mention-picker"
-                class:up={direction === "up"}
-                class:down={direction === "down"}
-                class:inline
-                class:border
-                {style}>
-                <Column
-                    parentDirection={"horizontal"}
-                    borderRadius={"md"}
-                    backgroundColor={ColourVars.background1}
-                    width={"fill"}
-                    height={{ size: `${height}px` }}>
-                    <VirtualList keyFn={userOrGroupKey} items={filtered}>
-                        {#snippet children(item, itemIndex)}
-                            <MenuItem selected={itemIndex === index} onclick={() => mention(item)}>
-                                {#snippet icon()}
-                                    {#if item.kind === "user_group" || item.kind === "everyone"}
-                                        <div class="group-icon">
-                                            <AccountMultiple
-                                                color={"var(--menu-disabled-txt)"}
-                                                size={$iconSize} />
-                                        </div>
-                                    {:else}
-                                        <Avatar
-                                            url={client.userAvatarUrl(
-                                                $allUsersStore.get(item.userId),
-                                            )}
-                                            size={"sm"} />
-                                    {/if}
-                                {/snippet}
-                                <Row gap={"xs"} crossAxisAlignment={"center"}>
-                                    {#if item.kind === "user_group"}
-                                        <Body width={"hug"}>
-                                            {item.name}
-                                        </Body>
-                                    {:else if item.kind === "everyone"}
-                                        <Body width={"hug"}>
-                                            {"everyone"}
-                                        </Body>
-                                    {:else}
-                                        <Body width={"hug"}>
-                                            {client.getDisplayName(
-                                                item.userId,
-                                                $selectedCommunityMembersStore,
-                                            )}
-                                        </Body>
-                                        <Body colour={"textSecondary"} width={"hug"}>
-                                            @{item.username}
-                                        </Body>
-                                    {/if}
-                                </Row>
-                            </MenuItem>
-                        {/snippet}
-                    </VirtualList>
-                </Column>
-            </div>
-        {/if}
-    {/snippet}
-</MentionPickerLogic>
-
-<style lang="scss">
-    .mention-picker {
-        @include z-index("footer-overlay");
-        position: absolute;
-        max-height: calc(var(--vh, 1vh) * 50);
-        overflow: auto;
-        z-index: 10000;
-        width: toRem(250);
-        left: 0;
-
-        &.inline {
-            position: relative;
-            box-shadow: none;
-        }
-    }
-
-    .group-icon {
-        width: toRem(35);
-        height: toRem(35);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background-color: var(--menu-bg);
-        border-radius: 50%;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/MessageContentInitial.svelte b/frontend/app/src/components_mobile/home/MessageContentInitial.svelte
deleted file mode 100644
index 58379ca76e..0000000000
--- a/frontend/app/src/components_mobile/home/MessageContentInitial.svelte
+++ /dev/null
@@ -1,40 +0,0 @@
-<script lang="ts">
-    import { ChatCaption, Column, ColourVars, Row, Spinner } from "component-lib";
-    import { type ResourceKey } from "@client";
-    import Translatable from "../Translatable.svelte";
-    import TextContent from "./TextContent.svelte";
-
-    interface Props {
-        text: ResourceKey;
-        failed: boolean;
-    }
-
-    let { text, failed }: Props = $props();
-</script>
-
-<Column padding={"zero"} maxWidth="70vw" mainAxisAlignment={"center"}>
-    <Row>
-        {#if !failed}
-            <Row width="hug" height="fill" padding={["xs", "md"]} crossAxisAlignment="center">
-                <Spinner
-                    size="1.5rem"
-                    backgroundColour={ColourVars.primaryLight}
-                    foregroundColour={ColourVars.primaryMuted} />
-            </Row>
-        {/if}
-        <TextContent me>
-            {#snippet content()}
-                <ChatCaption colour={failed ? "error" : "primaryLight"}>
-                    <Translatable resourceKey={text} />
-                </ChatCaption>
-            {/snippet}
-        </TextContent>
-    </Row>
-</Column>
-
-<style lang="scss">
-    .spinner {
-        width: 4rem;
-        margin: 0 auto;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/MessageEntry.svelte b/frontend/app/src/components_mobile/home/MessageEntry.svelte
deleted file mode 100644
index feabcedb50..0000000000
--- a/frontend/app/src/components_mobile/home/MessageEntry.svelte
+++ /dev/null
@@ -1,960 +0,0 @@
-<script lang="ts">
-    import RichTextEditor from "@shared_components/RichTextEditor.svelte";
-    import { keyboard } from "@src/stores/keyboard.svelte";
-    import { trackedEffect } from "@src/utils/effects.svelte";
-    import {
-        popHistoryStateWithAction,
-        pushDummyHistoryState,
-        type CustomHistoryAction,
-    } from "@src/utils/history";
-    import { BodySmall, ColourVars, Container, IconButton, Row } from "component-lib";
-    import type {
-        AttachmentContent,
-        BotActionScope,
-        ChatSummary,
-        EnhancedReplyContext,
-        EventWrapper,
-        ExternalBot,
-        Message,
-        MessageContext,
-        OpenChat,
-        SelectedEmoji,
-        User,
-    } from "@client";
-    import {
-        allUsersStore,
-        anonUserStore,
-        botState,
-        currentUserIdStore,
-        directMessageCommandInstance,
-        localUpdates,
-        messageContextsEqual,
-        random64,
-        screenWidth,
-        ScreenWidth,
-        selectedChatMembersStore,
-        selectedCommunitySummaryStore,
-        selectedCommunityUserGroupsStore,
-        throttleDeadline,
-        userGroupMentionRegex,
-        userIdMentionRegex,
-        type CreatedUser,
-    } from "@client";
-    import { getContext, onMount, tick } from "svelte";
-    import { _ } from "svelte-i18n";
-    import Alert from "svelte-material-icons/Alert.svelte";
-    import Camera from "svelte-material-icons/CameraOutline.svelte";
-    import Check from "svelte-material-icons/Check.svelte";
-    import Close from "svelte-material-icons/Close.svelte";
-    import Keyboard from "svelte-material-icons/KeyboardOutline.svelte";
-    import PlusCircle from "svelte-material-icons/PlusCircleOutline.svelte";
-    import StickerEmoji from "svelte-material-icons/StickerEmoji.svelte";
-    import { i18nKey, interpolate } from "../../i18n/i18n";
-    import { enterSend } from "../../stores/settings";
-    import { snowing } from "../../stores/snow";
-    import AlertBoxModal from "../AlertBoxModal.svelte";
-    import CommandBuilder from "../bots/CommandInstanceBuilder.svelte";
-    import CommandSelector from "../bots/CommandSelector.svelte";
-    import Send from "../icons/Send.svelte";
-    import Translatable from "../Translatable.svelte";
-    import AudioAttacher from "./AudioAttacher.svelte";
-    import CustomMessageTrigger from "./CustomMessageTrigger.svelte";
-    import DraftMediaMessage from "./DraftMediaMessage.svelte";
-    import EmojiAutocompleter from "./EmojiAutocompleter.svelte";
-    import EmojiOrGif from "./EmojiOrGif.svelte";
-    import FileAttacher from "./FileAttacher.svelte";
-    import MentionPicker from "./MentionPicker.svelte";
-    import PreviewFooter from "./PreviewFooter.svelte";
-    import RecordingWaveform from "./RecordingWaveform.svelte";
-    import ReplyingTo from "./ReplyingTo.svelte";
-    import ThrottleCountdown from "./ThrottleCountdown.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        chat: ChatSummary;
-        blocked: boolean;
-        preview: boolean;
-        lapsed: boolean;
-        attachment: AttachmentContent | undefined;
-        editingEvent: EventWrapper<Message> | undefined;
-        replyingTo: EnhancedReplyContext | undefined;
-        textContent: string | undefined;
-        mode?: "thread" | "message";
-        externalContent: boolean;
-        messageContext: MessageContext;
-        user: CreatedUser;
-        inputTrayVisible: boolean;
-        onFileSelected: (content: AttachmentContent) => void;
-        onPaste: (e: ClipboardEvent) => void;
-        onSetTextContent: (txt?: string) => void;
-        onStartTyping: () => void;
-        onStopTyping: () => void;
-        onCancelEdit: () => void;
-        onSendMessage: (args: [string | undefined, User[], boolean]) => void;
-        onClearAttachment: () => void;
-        onTokenTransfer: (args: { ledger?: string; amount?: bigint }) => void;
-        onCreatePrizeMessage?: () => void;
-        onCreateP2PSwapMessage: () => void;
-        onMakeMeme: () => void;
-        onCancelReply: () => void;
-    }
-
-    let {
-        chat,
-        blocked,
-        preview,
-        lapsed,
-        attachment,
-        editingEvent,
-        replyingTo,
-        textContent,
-        mode = "message",
-        externalContent,
-        messageContext,
-        user,
-        inputTrayVisible = $bindable(),
-        onFileSelected,
-        onPaste,
-        onSetTextContent,
-        onStartTyping,
-        onStopTyping,
-        onCancelEdit,
-        onSendMessage,
-        onClearAttachment,
-        onTokenTransfer,
-        onCreatePrizeMessage,
-        onCreateP2PSwapMessage,
-        onMakeMeme,
-        onCancelReply,
-    }: Props = $props();
-
-    const USER_TYPING_EVENT_MIN_INTERVAL_MS = 1000; // 1 second
-    const MARK_TYPING_STOPPED_INTERVAL_MS = 5000; // 5 seconds
-
-    let editor = $state<RichTextEditor>();
-    let editorEmpty = $state(true);
-
-    let messageEntryElement = $state<HTMLElement>();
-    let messageEntryHeight = $state<number>(0);
-
-    $effect(() => {
-        if (messageEntryElement === undefined) return;
-        const el = messageEntryElement;
-        const observer = new ResizeObserver(() => {
-            messageEntryHeight = el.clientHeight;
-        });
-        observer.observe(el);
-        return () => observer.disconnect();
-    });
-    let activeStream: MediaStream | undefined = $state(undefined);
-    let audioMimeType = client.audioRecordingMimeType();
-    let previousEditingEvent: EventWrapper<Message> | undefined = $state();
-    let lastTypingUpdate: number = 0;
-    let typingTimer: number | undefined = undefined;
-    let audioSupported: boolean = $state("mediaDevices" in navigator);
-    let showCommandSelector: boolean = $state(false);
-    let containsMarkdown = $state(false);
-    let showDirectBotChatWarning = $state(false);
-    let commandSent = false;
-
-    // Update this to force a new textbox instance to be created
-    let textboxId = $state(Symbol());
-
-    type InputTrayMode =
-        | "closed"
-        | "keyboard_only"
-        | "emoji_gif_selection"
-        | "emoji_gif_search"
-        | "attachments";
-
-    // Control variable to indicate that focus out happened, which changed the
-    // keyboard visibility, and we can take it into account to prevent extended
-    // section hiding prematurely.
-    let emojiSearchFocusedOut = $state(false);
-
-    // Prevents pop handler from running if not necessary!
-    let returnFromPopHandler = $state(false);
-
-    // Track changes in kb visibility to prevent the effect running twice for
-    // same value.
-    let previousKbVisibleValue = $state(keyboard.visible);
-
-    // Current mode for the input tray, section that opens up below the input
-    // and which provides additional message options.
-    let inputTrayMode = $state<InputTrayMode>("closed");
-
-    // Cases in which we show extended options, even when keyboard is visible,
-    // since the extened options provide bottom padding for the input to rise
-    // above the keyboard.
-    $effect(() => {
-        inputTrayVisible = keyboard.visible || inputTrayMode !== "closed";
-    });
-
-    $effect(() => {
-        if (previousKbVisibleValue === keyboard.visible) return;
-
-        // This is a new change, make sure to remember the new state...
-        previousKbVisibleValue = keyboard.visible;
-
-        if (!keyboard.visible) {
-            // In case we we're showing emoji search, or we focused out of emoji
-            // search, move to emoji selection.
-            if (inputTrayMode === "emoji_gif_search" || emojiSearchFocusedOut) {
-                inputTrayMode = "emoji_gif_selection";
-            }
-
-            // If we were only showing keyboard before...
-            if (inputTrayMode === "keyboard_only") {
-                inputTrayMode = "closed";
-            }
-
-            emojiSearchFocusedOut = false;
-        } else {
-            if (inputTrayMode === "closed") {
-                inputTrayMode = "keyboard_only";
-            }
-        }
-    });
-
-    // Show emoji!
-    function toggleEmojiPicker() {
-        inputTrayMode = "emoji_gif_selection";
-        pushExpandedHistoryState();
-    }
-
-    // Show extened options!
-    function toggleAttachments() {
-        inputTrayMode = inputTrayMode === "attachments" ? "closed" : "attachments";
-
-        // Only push history state if attachment options are showing, or pop state
-        // if the options are not showing.
-        inputTrayMode === "attachments" ? pushExpandedHistoryState() : popExpandedHistoryState();
-    }
-
-    function showKeyboard() {
-        editor?.focus();
-    }
-
-    // Should handle cases where usual user interactions are skipped, and
-    // input is focused directly, i.e. user clicking directly into input,
-    // or replying/editing to/a message.
-    function keyboardFocus() {
-        inputTrayMode = "keyboard_only";
-
-        // Reset indicator var...
-        emojiSearchFocusedOut = false;
-
-        // When keyboard shows, we pop any history state that may have been
-        // added due to opening emoji or extended options selectors.
-        popExpandedHistoryState();
-    }
-
-    function getHistoryStateAction(): CustomHistoryAction {
-        return `input-tray-${mode}`;
-    }
-
-    // State added to indicate expanded section is open. Devices back gesture
-    // can then pop the state from history, and the expanded section will close.
-    function pushExpandedHistoryState() {
-        pushDummyHistoryState(getHistoryStateAction());
-    }
-
-    // Pops expanded history state only if it's set.
-    function popExpandedHistoryState() {
-        if (popHistoryStateWithAction(getHistoryStateAction())) {
-            returnFromPopHandler = true;
-        }
-    }
-
-    // Runs on BACK gesture/button!
-    function popStateHandler(_e: PopStateEvent) {
-        if (returnFromPopHandler) {
-            // We manually ran pop state, so no need to handle pop any further...
-            returnFromPopHandler = false;
-            return;
-        }
-
-        if (inputTrayMode === "emoji_gif_search") {
-            inputTrayMode = "emoji_gif_selection";
-            return;
-        }
-
-        inputTrayMode = "closed";
-    }
-
-    function inputTrayFocusIn(e: FocusEvent) {
-        // Only handle focus if the originating element is input!
-        const eventOrigin = e.composedPath()[0] as HTMLElement;
-        const isInputOrigin = eventOrigin.tagName === "INPUT";
-
-        inputTrayMode = isInputOrigin ? "emoji_gif_search" : inputTrayMode;
-    }
-
-    function inputTrayFocusOut(e: FocusEvent) {
-        // Do not handle blur event for non input elements
-        const eventOrigin = e.composedPath()[0] as HTMLElement;
-        if (eventOrigin.tagName !== "INPUT") return;
-
-        inputTrayMode = "emoji_gif_selection";
-
-        // Indicate that we just focused out of an input field within the input
-        // tray, i.e. emoji search input, helps us to switch to emoji selection view.
-        emojiSearchFocusedOut = true;
-    }
-
-    // Switch back to attachments view after attachment is cleared, if the view
-    // is on keyboard!
-    function onRemoveAttachment() {
-        if (inputTrayMode === "keyboard_only") {
-            inputTrayMode = "attachments";
-        }
-
-        onClearAttachment();
-    }
-
-    onMount(() => {
-        // This component is also used for threads, so we need to remember the
-        // state of this when the component mounts.
-        const wasViewportResizeEnabled = keyboard.viewportResizeEnabled;
-
-        // When mesasge entry is on screen, the viewport should not just resize
-        // by default, since we want to support the input tray UI where soft
-        // keyboard overlaps some of the UI content.
-        keyboard.disableViewportResize();
-        return () => {
-            // Enable kb resizing again if it was enabled.
-            if (wasViewportResizeEnabled) keyboard.enableViewportResize();
-        };
-    });
-
-    function insertEmoji(emoji: SelectedEmoji) {
-        editor?.insertEmoji(emoji);
-    }
-
-    function backspace() {
-        document.execCommand("delete");
-    }
-
-    function onInput() {
-        const inputContent = editor?.getMarkdown() ?? "";
-        onSetTextContent(inputContent.trim().length === 0 ? undefined : inputContent);
-        triggerCommandSelector(inputContent);
-        triggerTypingTimer();
-        containsMarkdown = detectMarkdown(inputContent);
-    }
-
-    function triggerCommandSelector(inputContent: string | null): void {
-        const commandMatch = inputContent?.match(/^\/.*/);
-        if (commandMatch) {
-            showCommandSelector = true;
-            botState.prefix = commandMatch[0];
-        } else {
-            showCommandSelector = false;
-            botState.cancel();
-        }
-    }
-
-    function cancelCommandSelector(sent: boolean) {
-        commandSent = sent;
-        showCommandSelector = false;
-        botState.cancel();
-        if (sent) {
-            onSetTextContent();
-        }
-    }
-
-    function triggerTypingTimer() {
-        requestAnimationFrame(() => {
-            const now = Date.now();
-            if (now - lastTypingUpdate > USER_TYPING_EVENT_MIN_INTERVAL_MS) {
-                lastTypingUpdate = now;
-                onStartTyping();
-            }
-            if (typingTimer !== undefined) {
-                window.clearTimeout(typingTimer);
-            }
-
-            typingTimer = window.setTimeout(onStopTyping, MARK_TYPING_STOPPED_INTERVAL_MS);
-        });
-    }
-
-    function sendADirectBotMessage(bot: ExternalBot) {
-        const txt = editor?.getMarkdown() ?? "";
-        const userMessageId = random64();
-        const botMessageId = random64();
-
-        const commandInstance = directMessageCommandInstance(bot, txt);
-        if (commandInstance !== undefined) {
-            const scope: BotActionScope = {
-                kind: "chat_scope",
-                chatId: messageContext.chatId,
-                threadRootMessageIndex: messageContext.threadRootMessageIndex,
-                messageId: botMessageId,
-                userMessageId,
-            };
-            client.sendPlaceholderBotMessage(
-                scope,
-                undefined,
-                { kind: "text_content", text: txt },
-                userMessageId,
-                $currentUserIdStore,
-                containsMarkdown,
-            );
-            client.executeBotCommand(scope, commandInstance, true);
-            localUpdates.draftMessages.delete(messageContext);
-            afterSendMessage();
-        } else {
-            showDirectBotChatWarning = true;
-        }
-    }
-
-    function keyDown(e: KeyboardEvent) {
-        if (e.key === "Enter" && !e.shiftKey) {
-            if (directBot) {
-                if (!showCommandSelector && !messageIsEmpty) {
-                    sendADirectBotMessage(directBot);
-                } else if (!commandSent && botState.selectedCommand === undefined) {
-                    showDirectBotChatWarning = true;
-                }
-                e.preventDefault();
-            } else {
-                if (!showCommandSelector && $enterSend) {
-                    e.preventDefault();
-                    sendMessage();
-                }
-            }
-            commandSent = false;
-        }
-    }
-
-    function formatUserMentions(text: string): string {
-        return text.replace(userIdMentionRegex, (match, p1) => {
-            const u = $allUsersStore.get(p1);
-            if (u?.username !== undefined) {
-                const username = u.username;
-                return `@${username}`;
-            }
-            return match;
-        });
-    }
-
-    function formatUserGroupMentions(text: string): string {
-        return text.replace(userGroupMentionRegex, (match, p1) => {
-            const u = $selectedCommunityUserGroupsStore.get(Number(p1));
-            if (u !== undefined) {
-                return `@${u.name}`;
-            }
-            return match;
-        });
-    }
-
-    // replace anything of the form @username with @UserId(xyz) or @UserGroup(abc) where
-    // xyz is the userId or abc is the user group id
-    // if we can't find the user or user group just leave it as is
-    function expandMentions(text: string): [string | undefined, User[], boolean] {
-        let mentionedMap = new Map<string, User>();
-        let expandedText = text.replace(/@(\w+)/g, (match, p1) => {
-            const userOrGroup = client.lookupUserForMention(p1, false);
-            if (userOrGroup !== undefined) {
-                switch (userOrGroup.kind) {
-                    case "user_group":
-                        return `@UserGroup(${userOrGroup.id})`;
-                    case "everyone":
-                        return "@everyone";
-                    default:
-                        mentionedMap.set(userOrGroup.userId, userOrGroup);
-                        return `@UserId(${userOrGroup.userId})`;
-                }
-            } else {
-                return match;
-            }
-        });
-
-        let mentioned = Array.from(mentionedMap, ([_, user]) => user);
-
-        return [expandedText, mentioned, containsMarkdown];
-    }
-
-    function parseCommands(txt: string): boolean {
-        if (/snow|xmas|christmas|noel/.test(txt)) {
-            $snowing = true;
-        }
-        return false;
-    }
-
-    function sendMessage() {
-        if (showCommandSelector || messageIsEmpty) return;
-
-        const txt = editor?.getMarkdown() ?? "";
-
-        if (!parseCommands(txt)) {
-            const [text, mentioned, blockLevelMarkdown] = expandMentions(txt);
-            // Mentions picked from the mention picker are stored as nodes within the editor and
-            // are already in the `@UserId(xyz)` form, so `expandMentions` misses them - collect
-            // them from the editor itself
-            const mentionedUserIds = new Set(mentioned.map((u) => u.userId));
-            for (const user of editor?.getMentionedUsers() ?? []) {
-                if (!mentionedUserIds.has(user.userId)) {
-                    mentioned.push(user);
-                }
-            }
-            onSendMessage([text, mentioned, blockLevelMarkdown]);
-        }
-
-        afterSendMessage();
-    }
-
-    function afterSendMessage() {
-        editor?.clear();
-        onSetTextContent();
-
-        onStopTyping();
-
-        // After sending a message we must force a new textbox instance to be created, otherwise on iPhone the
-        // predictive text doesn't notice the text has been cleared so the suggestions don't make sense.
-        textboxId = Symbol();
-        tick().then(() => editor?.focus());
-    }
-
-    function detectMarkdown(text: string | null) {
-        if (!text) return false;
-
-        // a few regexes to detect various block level markdown elements (possibly incomplete)
-        const headerRegex = /^(?:\#{1,6}\s+)/m;
-        const tableRegex = /(?:\|(?:[^\r\n\|\\]|\\.)*\|)+/;
-        const bulletedListRegex = /^(?:\s*[-\*+]\s+)/m;
-        const numberedListRegex = /^(?:\s*\d+\.\s+)/m;
-        const blockquoteRegex = /^(?:\s*>)/m;
-        const codeBlockRegex = /(?:^```[\s\S]*?^```)/m;
-        const regexList = [
-            headerRegex,
-            tableRegex,
-            bulletedListRegex,
-            numberedListRegex,
-            blockquoteRegex,
-            codeBlockRegex,
-        ];
-        const result = regexList.some((regex) => regex.test(text));
-        return result;
-    }
-
-    let directChatBotId = $derived(client.directChatWithBot(chat));
-    let directBot = $derived(
-        directChatBotId ? botState.externalBots.get(directChatBotId) : undefined,
-    );
-    let textboxEmpty = $derived((textContent?.trim() ?? "").length === 0);
-    let messageIsEmpty = $derived(textboxEmpty && attachment === undefined);
-    let canSendAny = $derived(!$anonUserStore && client.canSendMessage(chat.id, mode));
-    let permittedMessages = $derived(client.permittedMessages(chat.id, mode));
-    let canEnterText = $derived(
-        (permittedMessages.get("text") ?? false) ||
-            editingEvent !== undefined ||
-            attachment !== undefined,
-    );
-    let canAddImageOrVideo = $derived(
-        permittedMessages.get("image") || permittedMessages.get("video"),
-    );
-    let frozen = $derived(client.isChatOrCommunityFrozen(chat, $selectedCommunitySummaryStore));
-
-    $effect(() => {
-        if (editor) {
-            if (editingEvent && editingEvent.index !== previousEditingEvent?.index) {
-                if (editingEvent.event.content.kind === "text_content") {
-                    editor.setContent(
-                        formatUserGroupMentions(
-                            formatUserMentions(
-                                client.stripLinkDisabledMarker(editingEvent.event.content.text),
-                            ),
-                        ),
-                    );
-                } else if ("caption" in editingEvent.event.content) {
-                    editor.setContent(editingEvent.event.content.caption ?? "");
-                }
-                previousEditingEvent = editingEvent;
-                containsMarkdown = detectMarkdown(editor.getMarkdown());
-            } else {
-                const text = textContent ?? "";
-                // Only set the textbox text when required rather than every time, because doing so sets the focus back to
-                // the start of the textbox on some devices.
-                if (editor.getMarkdown() !== text) {
-                    editor.setContent(text);
-                    containsMarkdown = detectMarkdown(text);
-                }
-            }
-        }
-
-        if (editingEvent === undefined) {
-            previousEditingEvent = undefined;
-        }
-    });
-
-    trackedEffect("attachment-focus", () => {
-        if (attachment !== undefined || replyingTo !== undefined) {
-            editor?.focus();
-        }
-    });
-
-    trackedEffect("screen-width-focus", () => {
-        if ($screenWidth === ScreenWidth.Large) {
-            editor?.focus();
-        }
-    });
-
-    let placeholder = $derived(
-        !canEnterText
-            ? i18nKey("sendTextDisabled")
-            : attachment !== undefined
-              ? i18nKey("enterCaption")
-              : directChatBotId
-                ? i18nKey("bots.direct.placeholder")
-                : i18nKey("enterMessage"),
-    );
-</script>
-
-<svelte:window onpopstate={popStateHandler} />
-
-{#if showDirectBotChatWarning}
-    <AlertBoxModal
-        onClose={() => (showDirectBotChatWarning = false)}
-        title={i18nKey("bots.direct.warningTitle")}
-        warning={i18nKey("bots.direct.warning")} />
-{/if}
-
-{#if botState.selectedCommand && messageContextsEqual(botState.showingBuilder, messageContext)}
-    <CommandBuilder
-        {messageContext}
-        onCommandSent={() => cancelCommandSelector(true)}
-        onCancel={() => cancelCommandSelector(false)}
-        command={botState.selectedCommand} />
-{/if}
-
-{#if showCommandSelector}
-    <CommandSelector
-        selectedBotId={directChatBotId}
-        {messageContext}
-        {mode}
-        onCommandSent={() => cancelCommandSelector(true)}
-        onNoMatches={() => cancelCommandSelector(false)}
-        onCancel={() => cancelCommandSelector(false)} />
-{/if}
-
-{#if !$anonUserStore}
-    <Container
-        overflow={"visible"}
-        gap={"sm"}
-        mainAxisAlignment={"spaceBetween"}
-        crossAxisAlignment={activeStream !== undefined ? "center" : "end"}
-        background={ColourVars.background0}
-        padding={["zero", "md", inputTrayMode !== "closed" ? "sm" : "zero"]}>
-        {#if frozen}
-            <div class="frozen">
-                <Translatable resourceKey={i18nKey("chatFrozen")} />
-            </div>
-        {:else if blocked}
-            <div class="blocked">
-                <Translatable resourceKey={i18nKey("userIsBlocked")} />
-            </div>
-        {:else if (preview || lapsed) && chat.kind !== "direct_chat"}
-            <PreviewFooter {lapsed} {chat} />
-        {:else if externalContent}
-            <Row crossAxisAlignment={"center"} gap={"md"}>
-                <Alert size={"1.5rem"} color={"var(--warning)"} />
-                <BodySmall colour={"textSecondary"}>
-                    <Translatable resourceKey={i18nKey("externalContent.disclaimer")} />
-                </BodySmall>
-            </Row>
-        {:else if !canSendAny}
-            <div class="disabled">
-                <Translatable
-                    resourceKey={i18nKey(mode === "thread" ? "readOnlyThread" : "readOnlyChat")} />
-            </div>
-        {:else if $throttleDeadline > 0}
-            <ThrottleCountdown deadline={$throttleDeadline} />
-        {:else}
-            {#if activeStream !== undefined}
-                <RecordingWaveform stream={activeStream} />
-            {:else if canEnterText}
-                {#key textboxId}
-                    <div
-                        class="message_entry_wrapper"
-                        class:has_reply={!!replyingTo}
-                        class:has_attachment={!!attachment}
-                        class:is_editing={editingEvent !== undefined}>
-                        {#if replyingTo}
-                            <ReplyingTo readonly {replyingTo} {user} {onCancelReply} />
-                        {/if}
-                        {#if !editingEvent && attachment !== undefined}
-                            <DraftMediaMessage {onRemoveAttachment} content={attachment} />
-                        {/if}
-                        {#if editingEvent !== undefined}
-                            <Row
-                                height={{ size: "1rem" }}
-                                crossAxisAlignment="center"
-                                supplementalClass="editing-title">
-                                <BodySmall colour="textSecondary">
-                                    <Translatable resourceKey={i18nKey("Editing...")} />
-                                </BodySmall>
-                                <IconButton size={"sm"} padding={"md"} onclick={onCancelEdit}>
-                                    {#snippet icon()}
-                                        <Close color={ColourVars.textSecondary} />
-                                    {/snippet}
-                                </IconButton>
-                            </Row>
-                        {/if}
-                        <Container
-                            bind:ref={messageEntryElement}
-                            gap="sm"
-                            minHeight="3.5rem"
-                            maxHeight="calc(var(--vh, 1vh) * 50)"
-                            padding="xs"
-                            overflow="visible"
-                            crossAxisAlignment="center"
-                            mainAxisAlignment="spaceBetween"
-                            supplementalClass="message_entry_text_box">
-                            {#if inputTrayMode !== "emoji_gif_selection"}
-                                <IconButton
-                                    onclick={toggleEmojiPicker}
-                                    padding={["sm", "zero", "md", "sm"]}
-                                    size={"md"}>
-                                    {#snippet icon()}
-                                        <StickerEmoji color={ColourVars.textPlaceholder} />
-                                    {/snippet}
-                                </IconButton>
-                            {:else}
-                                <IconButton
-                                    onclick={showKeyboard}
-                                    padding={["sm", "zero", "md", "sm"]}
-                                    size={"md"}>
-                                    {#snippet icon()}
-                                        <Keyboard color={ColourVars.textPlaceholder} />
-                                    {/snippet}
-                                </IconButton>
-                            {/if}
-
-                            <div class="textbox">
-                                <RichTextEditor
-                                    bind:this={editor}
-                                    bind:empty={editorEmpty}
-                                    placeholder={interpolate($_, placeholder)}
-                                    members={$selectedChatMembersStore}
-                                    {onPaste}
-                                    onfocus={keyboardFocus}
-                                    onKeydown={keyDown}
-                                    oninput={onInput}>
-                                    {#snippet mentionPicker(args)}
-                                        <MentionPicker
-                                            supportsUserGroups
-                                            offset={messageEntryHeight}
-                                            onMention={args.onMention}
-                                            prefix={args.query} />
-                                    {/snippet}
-                                    {#snippet emojiPicker(args)}
-                                        <EmojiAutocompleter
-                                            offset={messageEntryHeight}
-                                            onClose={args.onClose}
-                                            onSelect={args.onSelect}
-                                            query={args.query} />
-                                    {/snippet}
-                                </RichTextEditor>
-                            </div>
-
-                            {#if editingEvent === undefined}
-                                <Container
-                                    padding={["zero", "sm", "zero", "zero"]}
-                                    width={"hug"}
-                                    gap={"md"}>
-                                    <IconButton
-                                        onclick={toggleAttachments}
-                                        padding={["sm", "zero", "md", "zero"]}
-                                        size={"md"}>
-                                        {#snippet icon()}
-                                            <div
-                                                class:open={inputTrayMode === "attachments" &&
-                                                    !keyboard.visible}
-                                                class="drawer_trigger">
-                                                <PlusCircle color={ColourVars.textPlaceholder} />
-                                            </div>
-                                        {/snippet}
-                                    </IconButton>
-
-                                    {#if messageIsEmpty && canAddImageOrVideo}
-                                        <FileAttacher {onFileSelected}>
-                                            {#snippet children(onClick)}
-                                                <IconButton
-                                                    onclick={onClick}
-                                                    padding={["sm", "zero", "md", "zero"]}
-                                                    size={"md"}>
-                                                    {#snippet icon()}
-                                                        <Camera
-                                                            color={ColourVars.textPlaceholder} />
-                                                    {/snippet}
-                                                </IconButton>
-                                            {/snippet}
-                                        </FileAttacher>
-                                    {/if}
-                                </Container>
-                            {/if}
-                        </Container>
-                    </div>
-                {/key}
-            {:else}
-                <div class="textbox">
-                    <Translatable resourceKey={placeholder} />
-                </div>
-            {/if}
-
-            {#if directChatBotId === undefined}
-                <Container crossAxisAlignment={"center"} gap={"xs"} width={"hug"}>
-                    {#if editingEvent === undefined}
-                        {#if permittedMessages.get("audio") && messageIsEmpty && audioMimeType !== undefined && audioSupported && (activeStream !== undefined || editorEmpty)}
-                            <AudioAttacher
-                                mimeType={audioMimeType}
-                                bind:activeStream
-                                bind:supported={audioSupported}
-                                onAudioCaptured={onFileSelected} />
-                        {:else if canEnterText}
-                            <IconButton
-                                padding={"md"}
-                                mode={"primary"}
-                                size={"lg"}
-                                onclick={sendMessage}>
-                                {#snippet icon(color)}
-                                    <Send {color} />
-                                {/snippet}
-                            </IconButton>
-                        {/if}
-                    {:else}
-                        <IconButton
-                            padding={"md"}
-                            mode={"primary"}
-                            size={"lg"}
-                            onclick={sendMessage}>
-                            {#snippet icon(color)}
-                                <Check {color} />
-                            {/snippet}
-                        </IconButton>
-                    {/if}
-                </Container>
-            {/if}
-        {/if}
-    </Container>
-
-    <!-- svelte-ignore a11y_interactive_supports_focus -->
-    <div
-        role="dialog"
-        class={`input_tray ${inputTrayVisible ? "visible" : ""}`}
-        onmousedown={inputTrayFocusIn}
-        onfocusout={inputTrayFocusOut}
-        style:height={`${
-            inputTrayMode !== "closed"
-                ? keyboard.height + (inputTrayMode === "emoji_gif_search" ? 200 : 0)
-                : 0
-        }px`}
-        style:visibility={inputTrayMode !== "closed" ? "visible" : "hidden"}>
-        {#if inputTrayMode === "emoji_gif_selection" || inputTrayMode === "emoji_gif_search"}
-            <EmojiOrGif
-                empty={textboxEmpty}
-                ctx={messageContext}
-                onEmojiSelected={insertEmoji}
-                onBackspace={backspace}
-                onClose={toggleEmojiPicker} />
-        {/if}
-
-        {#if inputTrayMode === "attachments"}
-            <CustomMessageTrigger
-                {permittedMessages}
-                {onTokenTransfer}
-                {onCreatePrizeMessage}
-                {onCreateP2PSwapMessage}
-                {onMakeMeme}
-                {onFileSelected}
-                {messageContext}
-                open={true} />
-        {/if}
-    </div>
-{/if}
-
-<style lang="scss">
-    .message_entry_wrapper {
-        width: 100%;
-        // overflow: auto;
-        border-radius: var(--rad-huge);
-        background-color: var(--text-tertiary);
-        transition: border-radius 200ms ease-out;
-
-        &.has_reply,
-        &.has_attachment {
-            border-radius: var(--rad-xl) var(--rad-xl) var(--rad-xxl) var(--rad-xxl);
-        }
-
-        &.is_editing {
-            border-radius: var(--rad-xl);
-        }
-    }
-
-    .drawer_trigger {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        transition: transform 200ms ease-in-out;
-        transform-origin: 50%;
-        &.open {
-            transform: rotate(135deg);
-        }
-    }
-    .textbox {
-        outline: none;
-        border: 0;
-        overflow-x: hidden;
-        padding: var(--sp-md) 0 var(--sp-md) 0;
-        // overflow-y: visible;
-        user-select: text;
-        overflow-wrap: anywhere;
-        flex: auto;
-        min-width: 0;
-        font-size: var(--typo-chatText-sz);
-        line-height: var(--typo-chatText-lh);
-        color: var(--text-primary);
-
-        &.recording {
-            display: none;
-        }
-    }
-
-    .blocked,
-    .frozen,
-    .disabled {
-        height: 42px;
-        color: var(--text-secondary);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 100%;
-    }
-
-    .input_tray {
-        height: 0;
-        width: 100%;
-        padding-bottom: 0;
-        overflow: hidden;
-        background: var(--background-1);
-        border-radius: var(--rad-lg) var(--rad-lg) 0 0;
-        transition:
-            height 0.2s cubic-bezier(0.4, 0, 0.2, 1),
-            padding-bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-
-        &.visible {
-            padding-bottom: var(--device-nav-height);
-        }
-    }
-
-    :global {
-        .editing-title {
-            position: relative;
-            z-index: 1;
-            top: 0.65rem;
-            padding-left: 2.75rem !important;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/MessagePreview.svelte b/frontend/app/src/components_mobile/home/MessagePreview.svelte
deleted file mode 100644
index 1c0a04040a..0000000000
--- a/frontend/app/src/components_mobile/home/MessagePreview.svelte
+++ /dev/null
@@ -1,121 +0,0 @@
-<script lang="ts">
-    import { Avatar, Body } from "component-lib";
-    import {
-        allUsersStore,
-        currentUserIdStore,
-        OpenChat,
-        selectedChatWebhooksStore,
-        selectedCommunityMembersStore,
-        type RehydratedMessagePreview,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import ChatMessageContent from "./ChatMessageContent.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        preview: RehydratedMessagePreview;
-        me: boolean;
-        intersecting: boolean;
-    }
-
-    const { preview, me, intersecting }: Props = $props();
-
-    let senderIsMe = $derived(preview.message.sender === $currentUserIdStore);
-    let displayName = $derived(
-        senderIsMe
-            ? client.toTitleCase($_("you"))
-            : client.getDisplayName(
-                  preview.message.sender,
-                  $selectedCommunityMembersStore,
-                  $selectedChatWebhooksStore,
-              ),
-    );
-</script>
-
-<a class="preview_link" href={preview.url}>
-    <div
-        class="wrapper"
-        class:me
-        class:sender_is_me={senderIsMe}
-        class:p2pSwap={preview.message.content.kind === "p2p_swap_content"}>
-        <div class="title">
-            <Avatar
-                url={client.userAvatarUrl($allUsersStore.get(preview.message.sender))}
-                size={"xs"} />
-            <Body fontWeight="bold" colour={me ? "textPrimary" : "textSecondary"}>
-                {displayName}
-            </Body>
-        </div>
-        <div class="inert">
-            <ChatMessageContent
-                me={senderIsMe}
-                readonly
-                messageContext={{
-                    chatId: preview.chatId,
-                    threadRootMessageIndex: preview.threadRootMessageIndex,
-                }}
-                {intersecting}
-                messageId={preview.message.messageId}
-                messageIndex={preview.message.messageIndex}
-                senderId={preview.message.sender}
-                edited={preview.message.edited}
-                fill={false}
-                failed={false}
-                blockLevelMarkdown
-                truncate={true}
-                reply={false}
-                isPreview={true}
-                content={preview.message.content}
-                ogPreviews={preview.message.ogPreviews} />
-        </div>
-    </div>
-</a>
-
-<style lang="scss">
-    .preview_link {
-        width: 100%;
-    }
-    .wrapper {
-        display: flex;
-        flex-direction: column;
-        gap: var(--sp-xs);
-        width: 100%;
-        overflow: hidden;
-        padding: var(--sp-sm) var(--sp-xs) var(--sp-xs);
-
-        &.me {
-            &.sender_is_me {
-                // TODO bgs are same as for replies, reduce duplication
-                background-color: var(--background-2);
-            }
-
-            &:not(.sender_is_me) {
-                background-color: var(--primary-muted);
-            }
-        }
-
-        &:not(.me) {
-            background-color: var(--background-1);
-        }
-
-        .inert {
-            pointer-events: none;
-        }
-
-        &.p2pSwap {
-            max-width: 350px;
-        }
-    }
-
-    .title {
-        gap: $sp3;
-        display: flex;
-        padding: 0 var(--sp-sm);
-
-        > * {
-            flex: 1;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/MessageReminderContent.svelte b/frontend/app/src/components_mobile/home/MessageReminderContent.svelte
deleted file mode 100644
index 9da48421ed..0000000000
--- a/frontend/app/src/components_mobile/home/MessageReminderContent.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="ts">
-    import { ChatText, Column } from "component-lib";
-    import type { MessageReminderContent } from "@client";
-    import { i18nKey } from "../../i18n/i18n";
-    import Translatable from "../Translatable.svelte";
-    import ReminderNotes from "./ReminderNotes.svelte";
-
-    interface Props {
-        content: MessageReminderContent;
-    }
-
-    let { content }: Props = $props();
-</script>
-
-<Column gap={"lg"}>
-    <ChatText width={"hug"}>
-        <Translatable resourceKey={i18nKey("reminders.youAsked")} />
-    </ChatText>
-    <ReminderNotes notes={content.notes} />
-</Column>
diff --git a/frontend/app/src/components_mobile/home/MessageReminderCreatedContent.svelte b/frontend/app/src/components_mobile/home/MessageReminderCreatedContent.svelte
deleted file mode 100644
index 8b21c169e5..0000000000
--- a/frontend/app/src/components_mobile/home/MessageReminderCreatedContent.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script lang="ts">
-    import { ChatText, ColourVars, Column, Row } from "component-lib";
-    import type { MessageReminderCreatedContent, OpenChat } from "@client";
-    import { getContext } from "svelte";
-    import Alarm from "svelte-material-icons/Alarm.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import Translatable from "../Translatable.svelte";
-    import ReminderNotes from "./ReminderNotes.svelte";
-
-    interface Props {
-        content: MessageReminderCreatedContent;
-    }
-
-    let { content }: Props = $props();
-    const client = getContext<OpenChat>("client");
-</script>
-
-<Column gap={"lg"}>
-    <Row crossAxisAlignment={"center"} gap={"xs"} wrap>
-        <ChatText width={"hug"}>
-            <Translatable resourceKey={i18nKey("reminders.remindAt", { datetime: "" })} />
-        </ChatText>
-        <ChatText width={"hug"} fontWeight={"bold"} colour={"primary"}>
-            {client.toDatetimeString(new Date(content.remindAt))}
-        </ChatText>
-        <Alarm color={ColourVars.textPrimary} />
-    </Row>
-    <ReminderNotes notes={content.notes} />
-</Column>
diff --git a/frontend/app/src/components_mobile/home/MiddlePanel.svelte b/frontend/app/src/components_mobile/home/MiddlePanel.svelte
deleted file mode 100644
index d1a95dd7e3..0000000000
--- a/frontend/app/src/components_mobile/home/MiddlePanel.svelte
+++ /dev/null
@@ -1,125 +0,0 @@
-<script lang="ts">
-    import { trackedEffect } from "@src/utils/effects.svelte";
-    import {
-        botState,
-        chatIdentifiersEqual,
-        directChatBotsStore,
-        filteredProposalsStore,
-        publish,
-        rightPanelMode,
-        rightPanelWidth,
-        routeStore,
-        selectedChatIdStore,
-        selectedChatSummaryStore,
-        showMiddle,
-        type ChatIdentifier,
-    } from "@client";
-    import { tick } from "svelte";
-    import { activeVideoCall, type ActiveVideoCall } from "../../stores/video";
-    import { currentTheme } from "../../theme/themes";
-    import ExploreCommunities from "./communities/explore/Explore.svelte";
-    import CurrentChat from "./CurrentChat.svelte";
-
-    let middlePanel: HTMLElement | undefined;
-
-    let bot = $derived.by(() => {
-        if ($selectedChatSummaryStore === undefined) return undefined;
-        if ($selectedChatSummaryStore.kind !== "direct_chat") return undefined;
-        return botState.externalBots.get($selectedChatSummaryStore.them.userId);
-    });
-    let uninstalledBot = $derived.by(() => {
-        return bot !== undefined && $directChatBotsStore.get(bot.id) === undefined
-            ? bot
-            : undefined;
-    });
-
-    trackedEffect("installing-bot", () => {
-        if (uninstalledBot !== undefined && $selectedChatSummaryStore !== undefined) {
-            publish("installBot", { bot: uninstalledBot, collection: $selectedChatSummaryStore });
-        }
-    });
-
-    function alignVideoCall(
-        call: ActiveVideoCall | undefined,
-        chatId: ChatIdentifier | undefined,
-        rightPanelWidth: number | undefined,
-        attempts: number = 0,
-    ) {
-        if (call && chatIdentifiersEqual(call.chatId, chatId) && middlePanel) {
-            const callContainer = document.getElementById("video-call-container");
-            const rect = middlePanel.getBoundingClientRect();
-            if (callContainer) {
-                if (call.view === "fullscreen") {
-                    let width = window.innerWidth;
-                    if (
-                        $rightPanelMode !== "floating" &&
-                        (call.threadOpen || call.participantsOpen)
-                    ) {
-                        width = width - (rightPanelWidth ?? 500);
-                    }
-                    callContainer.style.setProperty("left", `0px`);
-                    callContainer.style.setProperty("width", `${width}px`);
-                    callContainer.style.setProperty("top", `0px`);
-                    callContainer.style.setProperty("height", `${window.innerHeight}px`);
-                } else {
-                    callContainer.style.setProperty("left", `${rect.left}px`);
-                    callContainer.style.setProperty("width", `${rect.width}px`);
-                    callContainer.style.setProperty("top", `${rect.top}px`);
-                    callContainer.style.setProperty("height", `${rect.height}px`);
-                }
-            } else {
-                // hack: there is a race condition here and it's possible we don't find the container on the first try
-                if (attempts === 0) {
-                    tick().then(() => alignVideoCall(call, chatId, attempts + 1));
-                }
-            }
-        }
-    }
-
-    function resize() {
-        alignVideoCall($activeVideoCall, $selectedChatIdStore, $rightPanelWidth);
-    }
-    $effect(() => {
-        if (middlePanel) {
-            resize();
-        }
-    });
-</script>
-
-<svelte:window onresize={resize} onorientationchange={resize} />
-
-<section
-    bind:this={middlePanel}
-    class:visible={$showMiddle}
-    class:halloween={$currentTheme.name === "halloween"}>
-    {#if $routeStore.kind === "communities_route"}
-        <ExploreCommunities />
-    {:else if $selectedChatSummaryStore !== undefined}
-        <CurrentChat chat={$selectedChatSummaryStore} filteredProposals={$filteredProposalsStore} />
-    {/if}
-</section>
-
-<style lang="scss">
-    section {
-        min-width: unset;
-        overflow: auto;
-        overflow-x: hidden;
-        flex: 13;
-        background: none;
-        padding: 0;
-        height: 100%;
-        flex-direction: column;
-        display: flex;
-
-        &.halloween::after {
-            @include cobweb();
-            bottom: 0;
-            right: 0;
-            transform: scaleY(-1);
-        }
-
-        &:not(.visible) {
-            display: none;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/NetworkSelector.svelte b/frontend/app/src/components_mobile/home/NetworkSelector.svelte
deleted file mode 100644
index 6704e6d46e..0000000000
--- a/frontend/app/src/components_mobile/home/NetworkSelector.svelte
+++ /dev/null
@@ -1,138 +0,0 @@
-<script lang="ts">
-    import { i18nKey } from "@i18n/i18n";
-    import { Body, BodySmall, ColourVars, Container, Sheet, Subtitle, Select } from "component-lib";
-    import ChevronRight from "svelte-material-icons/ChevronRight.svelte";
-    import ChevronDown from "svelte-material-icons/ChevronDown.svelte";
-    import Translatable from "../Translatable.svelte";
-
-    type Props = {
-        networks: string[];
-        selectedNetwork?: string;
-        background?: string;
-        flatSelect?: boolean;
-    };
-
-    type NetworkInfo = {
-        name: string;
-        info: string;
-    };
-
-    const networkInfo: Record<string, NetworkInfo> = {
-        arbitrum: {
-            name: "Arbitrum network",
-            info: "This is some information about what the Arbitrum network is all about and what it means. Blah blah blah and there we are.",
-        },
-        base: {
-            name: "Base network",
-            info: "This is some information about what the Base network is all about and what it means. Blah blah blah and there we are.",
-        },
-        btc: {
-            name: "BTC network",
-            info: "This is some information about what the BTC network is all about and what it means. Blah blah blah and there we are.",
-        },
-        ckbtc: {
-            name: "ckBTC network",
-            info: "This is some information about what the ckBTC network is all about and what it means. Blah blah blah and there we are.",
-        },
-        icp: {
-            name: "ICP network",
-            info: "Transfers USDT as a native token on the Internet Computer, enabling fast, low-cost transactions directly on-chain without gas fees from external networks.",
-        },
-        ethereum: {
-            name: "Ethereum network",
-            info: "Transfers USDT as an ERC-20 token on Ethereum, offering wide compatibility with wallets and exchanges but typically higher gas fees and slower confirmations.",
-        },
-    };
-
-    let {
-        networks,
-        selectedNetwork = $bindable(),
-        background,
-        flatSelect = false,
-    }: Props = $props();
-
-    let showSheet = $state(false);
-</script>
-
-{#snippet selectOptions(onSelect: (val: string) => void)}
-    <Container
-        onClick={(e) => e?.stopPropagation()}
-        height={{ size: "100%" }}
-        supplementalClass={"language_options"}
-        padding={["lg", "xl", "huge"]}
-        gap={"xxl"}
-        direction={"vertical"}>
-        <Subtitle fontWeight={"bold"}>
-            <Translatable resourceKey={i18nKey("Select token network")}></Translatable>
-        </Subtitle>
-
-        <Container gap={"xxl"} supplementalClass={"binding_options"} direction={"vertical"}>
-            {#each networks as network}
-                {@const { info, name } = networkInfo[network.toLowerCase()]}
-                <Container
-                    onClick={() => onSelect(network)}
-                    gap={"sm"}
-                    crossAxisAlignment={"center"}
-                    direction={"vertical"}>
-                    <Container>
-                        <Body fontWeight={"bold"} colour={"primary"}>{name}</Body>
-                        <ChevronRight color={ColourVars.primary} />
-                    </Container>
-                    <Body colour={"textSecondary"}>
-                        {info}
-                    </Body>
-                </Container>
-            {/each}
-        </Container>
-    </Container>
-{/snippet}
-
-{#if flatSelect}
-    <Container
-        {background}
-        padding={["lg", "xl"]}
-        direction="horizontal"
-        crossAxisAlignment="center">
-        <Container
-            direction="vertical"
-            width="fill"
-            gap="xs"
-            onClick={() => {
-                showSheet = true;
-            }}>
-            <BodySmall colour={"textSecondary"} fontWeight={"bold"}>
-                <Translatable resourceKey={i18nKey("tokenTransfer.selectTransferNetwork")} />
-            </BodySmall>
-            <Container crossAxisAlignment="end" gap="sm">
-                <Subtitle width="hug" fontWeight="bold">{selectedNetwork}</Subtitle>
-            </Container>
-        </Container>
-        <ChevronDown size="1.25rem" color={ColourVars.primary} />
-    </Container>
-
-    {#if showSheet}
-        <Sheet
-            onDismiss={() => {
-                showSheet = false;
-            }}>
-            {@render selectOptions((val) => {
-                selectedNetwork = val;
-                showSheet = false;
-            })}
-        </Sheet>
-    {/if}
-{:else}
-    <Select
-        onSelect={(val) => (selectedNetwork = val)}
-        placeholder={"Token networks"}
-        value={selectedNetwork}
-        {selectOptions}>
-        {#snippet subtext()}
-            <Translatable resourceKey={i18nKey("Select your token transfer network")}
-            ></Translatable>
-        {/snippet}
-        {#snippet selectedValue(val)}
-            {val}
-        {/snippet}
-    </Select>
-{/if}
diff --git a/frontend/app/src/components_mobile/home/NoAccess.svelte b/frontend/app/src/components_mobile/home/NoAccess.svelte
deleted file mode 100644
index 7b01e40814..0000000000
--- a/frontend/app/src/components_mobile/home/NoAccess.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts">
-    import { Body, Column, CommonButton, H2, Row, Sheet } from "component-lib";
-    import { _ } from "svelte-i18n";
-    import { i18nKey } from "../../i18n/i18n";
-    import Translatable from "../Translatable.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-
-    interface Props {
-        onClose: () => void;
-    }
-
-    let { onClose }: Props = $props();
-</script>
-
-<Sheet onDismiss={onClose}>
-    <Column gap={"xl"} padding={"xl"}>
-        <H2 colour={"primary"}>
-            <Translatable resourceKey={i18nKey("noAccess")} />
-        </H2>
-
-        <Body colour={"textSecondary"}>
-            <Markdown text={$_("noAccessText")} />
-        </Body>
-
-        <Row mainAxisAlignment={"end"}>
-            <CommonButton mode={"active"} size={"medium"} onClick={onClose}>
-                <Translatable resourceKey={i18nKey("close")} />
-            </CommonButton>
-        </Row>
-    </Column>
-</Sheet>
diff --git a/frontend/app/src/components_mobile/home/NonMessageEvent.svelte b/frontend/app/src/components_mobile/home/NonMessageEvent.svelte
deleted file mode 100644
index 2beacb930c..0000000000
--- a/frontend/app/src/components_mobile/home/NonMessageEvent.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script lang="ts">
-    import { Caption, Container } from "component-lib";
-    import type { OpenChat } from "@client";
-    import { getContext } from "svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        text: string;
-        timestamp: bigint;
-    }
-
-    let { text, timestamp }: Props = $props();
-    let date = $derived(new Date(Number(timestamp)));
-</script>
-
-<Container padding={"sm"} crossAxisAlignment={"center"} direction={"vertical"}>
-    <Caption width={"hug"} colour={"textSecondary"}>
-        <Markdown suppressLinks {text} />
-    </Caption>
-    <Caption width={"hug"} colour={"textSecondary"}>
-        {`${client.toLongDateString(date)} @ ${client.toShortTimeString(date)}`}
-    </Caption>
-</Container>
diff --git a/frontend/app/src/components_mobile/home/NotificationsBar.svelte b/frontend/app/src/components_mobile/home/NotificationsBar.svelte
deleted file mode 100644
index 84cbb5f339..0000000000
--- a/frontend/app/src/components_mobile/home/NotificationsBar.svelte
+++ /dev/null
@@ -1,44 +0,0 @@
-<script lang="ts">
-    import { BodySmall, CommonButton, Container, Sheet, Title } from "component-lib";
-    import type { OpenChat } from "@client";
-    import { anonUserStore, notificationStatus } from "@client";
-    import { getContext } from "svelte";
-    import Bell from "svelte-material-icons/BellOutline.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import Translatable from "../Translatable.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    $inspect(`PUSH STATUS: ${$notificationStatus}`);
-</script>
-
-{#if !$anonUserStore && $notificationStatus === "prompt"}
-    <Sheet onDismiss={() => client.setSoftDisabled(true)}>
-        <Container height={"hug"} padding={"xl"} gap={"xl"} direction={"vertical"}>
-            <Container gap={"lg"} padding={"md"} direction={"vertical"}>
-                <Title fontWeight={"bold"}>
-                    <Translatable resourceKey={i18nKey("Notifications")} />
-                </Title>
-
-                <BodySmall colour={"textSecondary"}>
-                    <Translatable resourceKey={i18nKey("enableNotifications")} />
-                </BodySmall>
-            </Container>
-
-            <Container gap={"md"} crossAxisAlignment={"end"} mainAxisAlignment={"end"}>
-                <CommonButton onClick={() => client.setSoftDisabled(true)} size={"medium"}>
-                    <Translatable resourceKey={i18nKey("noThanks")} />
-                </CommonButton>
-                <CommonButton
-                    mode={"active"}
-                    onClick={() => client.askForNotificationPermission()}
-                    size={"medium"}>
-                    {#snippet icon(color, size)}
-                        <Bell {color} {size} />
-                    {/snippet}
-                    <Translatable resourceKey={i18nKey("yesPlease")} />
-                </CommonButton>
-            </Container>
-        </Container>
-    </Sheet>
-{/if}
diff --git a/frontend/app/src/components_mobile/home/P2PSwapContent.svelte b/frontend/app/src/components_mobile/home/P2PSwapContent.svelte
deleted file mode 100644
index fe6548bbca..0000000000
--- a/frontend/app/src/components_mobile/home/P2PSwapContent.svelte
+++ /dev/null
@@ -1,450 +0,0 @@
-<script lang="ts">
-    import Markdown from "@shared_components/Markdown.svelte";
-    import {
-        Avatar,
-        Body,
-        Button,
-        ChatCaption,
-        ColourVars,
-        Column,
-        Row,
-        Subtitle,
-    } from "component-lib";
-    import type {
-        AcceptP2PSwapResponse,
-        CancelP2PSwapResponse,
-        MessageContext,
-        OpenChat,
-        P2PSwapContent,
-        P2PSwapContentInitial,
-    } from "@client";
-    import {
-        enhancedCryptoLookup as cryptoLookup,
-        currentUserIdStore,
-        isDiamondStore,
-        publish,
-    } from "@client";
-    import { type Snippet, getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import ArrowDown from "svelte-material-icons/ArrowDown.svelte";
-    import Cached from "svelte-material-icons/Cached.svelte";
-    import Check from "svelte-material-icons/Check.svelte";
-    import Close from "svelte-material-icons/Close.svelte";
-    import CloseCircleOutline from "svelte-material-icons/CloseCircleOutline.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { pinNumberErrorMessageStore } from "../../stores/pinNumber";
-    import { now500 } from "../../stores/time";
-    import { toastStore } from "../../stores/toast";
-    import { getProxyAdjustedBlobUrl } from "../../utils/media";
-    import AreYouSure from "../AreYouSure.svelte";
-    import Translatable from "../Translatable.svelte";
-    import AcceptP2PSwapModal from "./AcceptP2PSwapModal.svelte";
-    import MessageRenderer from "./MessageRenderer.svelte";
-    import P2PSwapProgress from "./P2PSwapProgress.svelte";
-    import { TokenState } from "./wallet/walletState.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        content: P2PSwapContentInitial | P2PSwapContent;
-        messageContext?: MessageContext;
-        senderId?: string;
-        messageId?: bigint;
-        title?: Snippet;
-        me?: boolean;
-        reply?: boolean;
-        draft?: boolean;
-        edited?: boolean;
-        pinned?: boolean;
-        isPreview?: boolean;
-        blockLevelMarkdown?: boolean;
-        onRemove?: () => void;
-    }
-
-    let {
-        content,
-        messageContext,
-        senderId,
-        messageId,
-        title,
-        me = false,
-        reply = false,
-        draft = false,
-        edited = false,
-        pinned = false,
-        isPreview = false,
-        blockLevelMarkdown = false,
-        onRemove,
-    }: Props = $props();
-
-    let fromState = $derived(new TokenState($cryptoLookup.get(content.token0.ledger)!));
-    let toState = $derived(new TokenState($cryptoLookup.get(content.token1.ledger)!));
-    let confirming = $state(false);
-    let showDetails = $state(false);
-    let finished = $derived(
-        content.kind === "p2p_swap_content" ? $now500 >= Number(content.expiresAt) : undefined,
-    );
-    let timeRemaining = $derived(
-        !finished && content.kind === "p2p_swap_content"
-            ? client.formatTimeRemaining($now500, Number(content.expiresAt))
-            : $_("p2pSwap.expired"),
-    );
-    let recipientId = $derived(
-        content.kind === "p2p_swap_content"
-            ? content.status.kind === "p2p_swap_reserved"
-                ? content.status.reservedBy
-                : content.status.kind === "p2p_swap_accepted" ||
-                    content.status.kind === "p2p_swap_completed"
-                  ? content.status.acceptedBy
-                  : undefined
-            : undefined,
-    );
-    let acceptedByYou = $derived(recipientId === $currentUserIdStore);
-    let fromAmount = $derived(client.formatTokens(content.token0Amount, content.token0.decimals));
-    let toAmount = $derived(client.formatTokens(content.token1Amount, content.token1.decimals));
-    let buttonDisabled = $derived(
-        (content.kind === "p2p_swap_content" && content.status.kind !== "p2p_swap_open") ||
-            reply ||
-            pinned,
-    );
-
-    let buttonLabelKey = $derived.by<string | undefined>(() => {
-        if (content.kind !== "p2p_swap_content") return;
-        const ifAcceptedByYou = (labelKey: string) =>
-            acceptedByYou || me ? labelKey : "p2pSwap.notAvailable";
-
-        switch (content.status.kind) {
-            case "p2p_swap_open":
-                return me ? "p2pSwap.cancel" : "p2pSwap.accept";
-
-            case "p2p_swap_cancelled":
-                return "p2pSwap.cancelled";
-
-            case "p2p_swap_expired":
-                return "p2pSwap.expired";
-
-            case "p2p_swap_reserved":
-            case "p2p_swap_accepted":
-                return ifAcceptedByYou("p2pSwap.progress.pendingCompletion");
-
-            case "p2p_swap_completed":
-                return ifAcceptedByYou("p2pSwap.progress.success");
-        }
-    });
-
-    let headerLabelKey = $derived.by<string | undefined>(() => {
-        if (content.kind !== "p2p_swap_content") return;
-
-        switch (content.status.kind) {
-            case "p2p_swap_open":
-                return timeRemaining;
-
-            case "p2p_swap_cancelled":
-                return "p2pSwap.cancelled";
-
-            case "p2p_swap_expired":
-                return "p2pSwap.expired";
-
-            case "p2p_swap_reserved":
-                return acceptedByYou ? "p2pSwap.reserved" : "p2pSwap.progress.acceptedBy";
-
-            case "p2p_swap_accepted":
-                return acceptedByYou ? "p2pSwap.accepted" : "p2pSwap.progress.acceptedBy";
-
-            case "p2p_swap_completed":
-                return acceptedByYou
-                    ? "p2pSwap.progress.completed"
-                    : recipientId
-                      ? "p2pSwap.progress.acceptedBy"
-                      : "p2pSwap.accepted";
-        }
-    });
-
-    function onAcceptOrCancel(e: MouseEvent) {
-        if (e.isTrusted && !buttonDisabled) {
-            if (!me && !$isDiamondStore) {
-                publish("upgrade");
-            } else {
-                confirming = true;
-            }
-        }
-    }
-
-    function cancel(yes: boolean): Promise<void> {
-        if (messageContext && messageId) {
-            confirming = false;
-
-            if (yes && me) {
-                client
-                    .cancelP2PSwap(
-                        messageContext.chatId,
-                        messageContext.threadRootMessageIndex,
-                        messageId,
-                    )
-                    .then((resp) => {
-                        if (resp.kind !== "success") {
-                            showFailureToast(resp, false);
-                        } else {
-                            client.refreshAccountBalance(content.token1.ledger);
-                        }
-                    });
-            }
-        }
-
-        return Promise.resolve();
-    }
-
-    function accept() {
-        if (!messageContext || !messageId) return;
-        confirming = false;
-
-        if (!me) {
-            client
-                .acceptP2PSwap(
-                    messageContext.chatId,
-                    messageContext.threadRootMessageIndex,
-                    messageId,
-                )
-                .then((resp) => {
-                    if (resp.kind !== "success") {
-                        showFailureToast(resp, true);
-                    } else {
-                        client.refreshAccountBalance(content.token1.ledger);
-                    }
-                });
-        }
-    }
-
-    function showFailureToast(
-        response: AcceptP2PSwapResponse | CancelP2PSwapResponse,
-        accepting: boolean,
-    ) {
-        if ($pinNumberErrorMessageStore !== undefined) {
-            toastStore.showFailureToast(pinNumberErrorMessageStore);
-            return;
-        }
-
-        let key: string = response.kind;
-
-        switch (key) {
-            case "already_reserved":
-            case "already_completed":
-                key = "already_accepted";
-                break;
-            case "channel_not_found":
-            case "chat_not_found":
-            case "user_suspended":
-            case "user_not_in_group":
-            case "user_not_in_community":
-            case "user_not_in_channel":
-            case "chat_frozen":
-            case "insufficient_funds":
-            case "internal_error":
-                key = accepting ? "unknown_accept_error" : "unknown_cancel_error";
-                break;
-        }
-
-        toastStore.showFailureToast(i18nKey("p2pSwap." + key));
-    }
-
-    function onSwapClick() {
-        if (!confirming) {
-            showDetails = true;
-        }
-    }
-</script>
-
-{#if confirming}
-    {#if me}
-        <AreYouSure
-            message={i18nKey("p2pSwap.confirmCancel", {
-                amount: fromAmount,
-                token: content.token0.symbol,
-            })}
-            action={cancel} />
-    {:else}
-        <AcceptP2PSwapModal
-            ledger0={content.token0.ledger}
-            ledger1={content.token1.ledger}
-            amount0={content.token0Amount}
-            amount1={content.token1Amount}
-            onAccept={accept}
-            onClose={() => (confirming = false)} />
-    {/if}
-{:else if showDetails && senderId && content.kind === "p2p_swap_content"}
-    <P2PSwapProgress {senderId} {content} onClose={() => (showDetails = false)} />
-{/if}
-
-{#snippet replyView(textContent?: Snippet)}
-    <Row gap="sm" minWidth="12rem">
-        <Column width="fill" gap="xs" padding={["xs", "zero"]}>
-            {@render title?.()}
-            {#if textContent}
-                {@render textContent()}
-            {/if}
-            <Row gap="xs" crossAxisAlignment="center">
-                <Cached
-                    color={me ? ColourVars.secondaryLight : ColourVars.primaryLight}
-                    size="1.25rem" />
-                <ChatCaption colour={me ? "secondaryLight" : "primaryLight"}>
-                    <Translatable
-                        resourceKey={i18nKey("p2pSwap.summaryShort", {
-                            fromAmount,
-                            toAmount,
-                            fromToken: content.token0.symbol,
-                            toToken: content.token1.symbol,
-                        })} />
-                </ChatCaption>
-            </Row>
-        </Column>
-    </Row>
-{/snippet}
-
-{#snippet draftView()}
-    <Column padding="xs">
-        <Column padding="xs" borderRadius="lg" background={ColourVars.background2}>
-            <Row
-                gap={"xs"}
-                padding={["xs", "lg", "xs", "md"]}
-                crossAxisAlignment={"center"}
-                borderRadius={["lg", "lg", "md", "md"]}>
-                <Body width="hug" colour="textSecondary" fontWeight="semi-bold">
-                    <Translatable resourceKey={i18nKey("p2pSwap.builderTitle")} />
-                </Body>
-            </Row>
-            {@render swapView()}
-        </Column>
-    </Column>
-{/snippet}
-
-{#snippet regularView(textContent?: Snippet)}
-    {@const statusKind = content.kind === "p2p_swap_content" ? content.status.kind : undefined}
-    <Column padding={["zero", "zero", textContent ? "zero" : "xl"]}>
-        <Column
-            gap="xs"
-            padding={me ? "xs" : "zero"}
-            backgroundColor={ColourVars.background2}
-            borderRadius={[me ? "lg" : "md", !me ? "lg" : "md", "lg", "lg"]}>
-            <Row supplementalClass="swap_header_title" padding={["sm", "sm", "zero"]}>
-                <Body
-                    align="end"
-                    fontWeight="bold"
-                    colour={statusKind === "p2p_swap_completed" && acceptedByYou
-                        ? "primary"
-                        : "textSecondary"}>
-                    <Translatable resourceKey={i18nKey(headerLabelKey ?? "")} />
-                    {#if recipientId && recipientId !== $currentUserIdStore}
-                        <Markdown text={`@UserId(${recipientId})`} inline />
-                    {/if}
-                </Body>
-            </Row>
-            {@render swapView(onSwapClick)}
-            <Row width="fill">
-                <!-- In DMs Swaps should have a decline option -->
-                <Button
-                    loading={(me || acceptedByYou) &&
-                        (statusKind === "p2p_swap_reserved" || statusKind === "p2p_swap_accepted")}
-                    disabled={buttonDisabled}
-                    onClick={onAcceptOrCancel}>
-                    <Translatable
-                        resourceKey={i18nKey(
-                            buttonLabelKey ?? (me ? "p2pSwap.cancel" : "p2pSwap.accept"),
-                        )} />
-                    {#snippet icon(color: string)}
-                        {@const size = "1rem"}
-                        <!-- for reserved and accepted statuses we don't show an icon, since a loader is showing -->
-                        {#if statusKind === "p2p_swap_open"}
-                            {#if me}
-                                <CloseCircleOutline {size} {color} />
-                            {:else}
-                                <Cached {size} {color} />
-                            {/if}
-                        {:else if acceptedByYou || me}
-                            {#if statusKind === "p2p_swap_completed"}
-                                <Check {size} {color} />
-                            {:else if statusKind === "p2p_swap_cancelled" || statusKind === "p2p_swap_expired"}
-                                <Close {size} {color} />
-                            {/if}
-                        {/if}
-                    {/snippet}
-                </Button>
-            </Row>
-        </Column>
-    </Column>
-    {@render textContent?.()}
-{/snippet}
-
-<MessageRenderer
-    {replyView}
-    {draftView}
-    {regularView}
-    caption={content.caption}
-    {me}
-    {reply}
-    {draft}
-    {edited}
-    {blockLevelMarkdown}
-    {isPreview}
-    {onRemove} />
-
-{#snippet tokenDetailsView(tokenState: TokenState, amount: bigint, isTopSection: boolean = false)}
-    <Row
-        width="fill"
-        gap="lg"
-        borderRadius="md"
-        padding={[!isTopSection ? "lg" : "md", "md", isTopSection ? "lg" : "md", "md"]}
-        background={ColourVars.background0}
-        crossAxisAlignment="center">
-        <Avatar size={"md"} url={getProxyAdjustedBlobUrl(tokenState.logo) ?? tokenState.logo} />
-        <Column width="fill">
-            <Subtitle fontWeight="bold">{tokenState.symbol}</Subtitle>
-            <Body colour="textSecondary" fontWeight="bold" maxLines={1}>
-                {tokenState.token.name}
-            </Body>
-        </Column>
-        <Column width="hug">
-            <Subtitle fontWeight="bold" align="end">
-                {tokenState.formatTokens(amount)}
-            </Subtitle>
-            <Body colour="primary" fontWeight="bold" align="end">
-                ≈ {tokenState.formatConvertedTokens(amount)}
-            </Body>
-        </Column>
-    </Row>
-{/snippet}
-
-{#snippet swapView(onClick?: () => void)}
-    <Column gap="xs" crossAxisAlignment={"center"} {onClick}>
-        {@render tokenDetailsView(fromState, content.token0Amount, true)}
-        <Row
-            supplementalClass={"swap_initial_down_arrow"}
-            width={{ size: "2rem" }}
-            height={{ size: "2rem" }}
-            borderRadius={"circle"}
-            borderWidth={"extraThick"}
-            borderColour={ColourVars.background2}
-            background={ColourVars.background0}
-            mainAxisAlignment={"center"}
-            crossAxisAlignment={"center"}>
-            <ArrowDown size={"1rem"} />
-        </Row>
-        {@render tokenDetailsView(toState, content.token1Amount)}
-    </Column>
-{/snippet}
-
-<style lang="scss">
-    :global {
-        .container.swap_initial_down_arrow {
-            position: absolute;
-            top: 50%;
-            transform: translateY(-1rem);
-            width: 2rem;
-            height: 2rem;
-            z-index: 1;
-        }
-
-        .swap_header_title profile-link {
-            text-decoration: none !important;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/P2PSwapContentBuilder.svelte b/frontend/app/src/components_mobile/home/P2PSwapContentBuilder.svelte
deleted file mode 100644
index 6381ad9296..0000000000
--- a/frontend/app/src/components_mobile/home/P2PSwapContentBuilder.svelte
+++ /dev/null
@@ -1,260 +0,0 @@
-<script lang="ts">
-    import { Body, Subtitle, Column, CommonButton2, Row, ColourVars } from "component-lib";
-    import type { MessageContext, OpenChat, P2PSwapContentInitial } from "@client";
-    import {
-        enhancedCryptoLookup as cryptoLookup,
-        isDiamondStore,
-        localUpdates,
-        ONE_DAY,
-        publish,
-    } from "@client";
-    import { getContext, onMount } from "svelte";
-    import { _ } from "svelte-i18n";
-    import Paperclip from "svelte-material-icons/Paperclip.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import AreYouSure from "../AreYouSure.svelte";
-    import Translatable from "../Translatable.svelte";
-    import CryptoSelector from "./CryptoSelector.svelte";
-    import DurationSelector from "./DurationSelector.svelte";
-    import SlidingPageContent from "./SlidingPageContent.svelte";
-    import TokenInput from "./TokenInput.svelte";
-    import TransferFeesMessage from "./TransferFeesMessage.svelte";
-    import { TokenState } from "./wallet/walletState.svelte";
-    import { keyboard } from "@stores/keyboard.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        fromLedger: string;
-        messageContext: MessageContext;
-        onClose: () => void;
-    }
-
-    let { fromLedger = $bindable(), messageContext, onClose }: Props = $props();
-
-    let toLedger: string = $state(initialToLedger());
-    let fromDetails = $derived($cryptoLookup.get(fromLedger)!);
-    let toDetails = $derived($cryptoLookup.get(toLedger)!);
-    let fromState = $derived(new TokenState(fromDetails));
-    let toState = $derived(new TokenState(toDetails));
-    let fromAmount: bigint = $state(0n);
-    let fromAmountValid: boolean = $state(false);
-    let toAmount: bigint = $state(0n);
-    let toAmountValid: boolean = $state(false);
-    let expiresIn: bigint = $state(BigInt(ONE_DAY));
-    let error: string | undefined = $state(undefined);
-    let tokenInputState: "ok" | "zero" | "too_low" | "too_high" = $state("ok");
-    let confirming = $state(false);
-
-    let totalFees = $derived(fromDetails.transferFee * BigInt(2));
-    let minAmount = $derived(fromDetails.transferFee * BigInt(10));
-    let valid = $derived(error === undefined && fromAmountValid && toAmountValid);
-
-    let wasViewportResizeEnabled = $state(false);
-
-    function initialToLedger() {
-        // just grab any old ledger for starters
-        return [...$cryptoLookup.keys()].find((l) => l !== fromLedger) ?? "";
-    }
-
-    function reinstateViewportResize() {
-        if (!wasViewportResizeEnabled) keyboard.disableViewportResize();
-
-        // This will prevent disableViewportResize call in case when this
-        // function was called before component un-mount.
-        wasViewportResizeEnabled = true;
-    }
-
-    onMount(() => {
-        wasViewportResizeEnabled = keyboard.viewportResizeEnabled;
-
-        // If resize is currently not enabled, enable it!
-        if (!keyboard.viewportResizeEnabled) keyboard.enableViewportResize();
-
-        return () => {
-            // If resize was not enabled enabled when the component was mounted,
-            // disable it again.
-            reinstateViewportResize();
-        };
-    });
-
-    $effect(() => {
-        if (tokenInputState === "too_low") {
-            error = $_("minimumAmount", {
-                values: {
-                    amount: client.formatTokens(minAmount, fromDetails.decimals),
-                    symbol: fromDetails.symbol,
-                },
-            });
-        } else {
-            error = undefined;
-        }
-    });
-
-    function onSend() {
-        if (!$isDiamondStore) {
-            publish("upgrade");
-            return;
-        }
-
-        if (!valid) {
-            return;
-        }
-
-        confirming = true;
-    }
-
-    function send(yes: boolean): Promise<void> {
-        confirming = false;
-
-        if (!yes) {
-            return Promise.resolve();
-        }
-
-        const content: P2PSwapContentInitial = {
-            kind: "p2p_swap_content_initial",
-            token0: {
-                ledger: fromLedger,
-                symbol: fromDetails.symbol,
-                fee: fromDetails.transferFee,
-                decimals: fromDetails.decimals,
-            },
-            token1: {
-                ledger: toLedger,
-                symbol: toDetails.symbol,
-                fee: toDetails.transferFee,
-                decimals: toDetails.decimals,
-            },
-            token0Amount: fromAmount,
-            token1Amount: toAmount,
-            caption: undefined,
-            expiresIn,
-        };
-
-        localUpdates.draftMessages.setAttachment(messageContext, content);
-        onClose();
-
-        // Component unload does not happen fast enough for the viewport resize
-        // to reinstate to it's original value if we're immediately focusing
-        // message entry.
-        reinstateViewportResize();
-
-        // Resolve on next animation frame to allow viewport resize to reinstate
-        // Note: this may work without rAF, but to be on the safe side.
-        return new Promise((resolve) => requestAnimationFrame(() => resolve()));
-    }
-
-    function onSelectFromToken(ledger: string, _: string) {
-        if (ledger === toLedger) {
-            toLedger =
-                [...$cryptoLookup.values()].map((t) => t.ledger).find((l) => l !== toLedger) ??
-                toLedger;
-        }
-    }
-</script>
-
-{#if confirming}
-    <AreYouSure
-        message={i18nKey("p2pSwap.confirmSend", {
-            amount: client.formatTokens(fromAmount + totalFees, fromDetails.decimals),
-            token: fromDetails.symbol,
-        })}
-        action={send} />
-{/if}
-
-<SlidingPageContent title={i18nKey("Create swap offer")}>
-    <Column gap={"xl"} padding={["lg", "lg", "huge"]} overflow="auto" height="fill">
-        <!-- Container for swap info -->
-        <Column
-            backgroundColor={ColourVars.background1}
-            padding={["xl", "lg"]}
-            borderRadius="lg"
-            gap="xxl">
-            <!-- Send token -->
-            <Column gap={"xl"}>
-                <Column gap="md">
-                    <Subtitle fontWeight={"bold"}>
-                        <Translatable resourceKey={i18nKey("Token to swap")} />
-                    </Subtitle>
-                    <Body colour={"textSecondary"}>
-                        <Translatable
-                            resourceKey={i18nKey(
-                                "This is the token that you are offering for exchange. You can only swap tokens for which you hold a non-zero balance. Top up via your wallet if necessary.",
-                            )} />
-                    </Body>
-                </Column>
-                <CryptoSelector
-                    filter={(t) => t.balance > 0}
-                    bind:ledger={fromLedger}
-                    draftAmount={fromAmount}
-                    showRefresh
-                    onSelect={onSelectFromToken} />
-                <TokenInput
-                    placeholder="Swap amount"
-                    balance={fromState.cryptoBalance}
-                    ledger={fromLedger}
-                    {minAmount}
-                    converted={fromState.formatConvertedTokens(fromAmount)}
-                    bind:status={tokenInputState}
-                    bind:valid={fromAmountValid}
-                    bind:amount={fromAmount}
-                    descriptionKey="Use the options above to select a specific percentage of your total token amount you would like to swap.">
-                    {#snippet subtext()}
-                        {`Minimum amount ${fromState.formatTokens(minAmount)} ${fromState.symbol}`}
-                    {/snippet}
-                </TokenInput>
-            </Column>
-
-            <!-- Receive token -->
-            <Column gap={"xl"}>
-                <Column gap="md">
-                    <Subtitle fontWeight={"bold"}>
-                        <Translatable resourceKey={i18nKey("Token to receive")} />
-                    </Subtitle>
-                    <Body colour={"textSecondary"}>
-                        <Translatable
-                            resourceKey={i18nKey(
-                                "This is the token that you would like to receive in return. You decide how many tokens you would like to receive in the exchange.",
-                            )} />
-                    </Body>
-                </Column>
-                <CryptoSelector filter={(t) => t.ledger !== fromLedger} bind:ledger={toLedger} />
-                <TokenInput
-                    placeholder="Receive amount"
-                    ledger={toLedger}
-                    converted={toState.formatConvertedTokens(toAmount)}
-                    bind:valid={toAmountValid}
-                    bind:amount={toAmount} />
-            </Column>
-        </Column>
-
-        <!-- Duration selection -->
-        <Column padding={["zero", "lg"]}>
-            <DurationSelector bind:duration={expiresIn}>
-                {#snippet title()}
-                    <Subtitle fontWeight={"bold"}>
-                        <Translatable resourceKey={i18nKey("Swap expiry time")} />
-                    </Subtitle>
-                {/snippet}
-            </DurationSelector>
-        </Column>
-
-        <!-- Fees and button -->
-        <Row
-            mainAxisAlignment="spaceBetween"
-            crossAxisAlignment="center"
-            padding={["lg", "md"]}
-            gap="xl">
-            <TransferFeesMessage
-                symbol={fromDetails.symbol}
-                tokenDecimals={fromDetails.decimals}
-                transferFees={totalFees} />
-            <CommonButton2 onClick={onSend} variant="primary" mode={"regular"} disabled={!valid}>
-                {#snippet icon(color, size)}
-                    <Paperclip {color} {size} />
-                {/snippet}
-                <Translatable resourceKey={i18nKey("Confirm")} />
-            </CommonButton2>
-        </Row>
-    </Column>
-</SlidingPageContent>
diff --git a/frontend/app/src/components_mobile/home/P2PSwapProgress.svelte b/frontend/app/src/components_mobile/home/P2PSwapProgress.svelte
deleted file mode 100644
index 675ce55223..0000000000
--- a/frontend/app/src/components_mobile/home/P2PSwapProgress.svelte
+++ /dev/null
@@ -1,139 +0,0 @@
-<script lang="ts">
-    import { Column, Sheet, Subtitle } from "component-lib";
-    import type { OpenChat, P2PSwapContent } from "@client";
-    import { getContext } from "svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import ProgressSteps, { type Result, type Step } from "../ProgressSteps.svelte";
-    import Translatable from "../Translatable.svelte";
-
-    const client = getContext<OpenChat>("client");
-    const labelPrefix = "p2pSwap.progress.";
-
-    interface Props {
-        senderId: string;
-        content: P2PSwapContent;
-        onClose: () => void;
-    }
-
-    let { senderId, content, onClose }: Props = $props();
-
-    let steps: Step[] = $state([
-        { label: "open", status: "done" },
-        { label: "waiting", status: "todo" },
-    ]);
-    let result = $state<Result>(undefined);
-    let token0TxnOut: string | undefined = $state(undefined);
-    let token1TxnIn: string | undefined = $state(undefined);
-    let token1TxnOut: string | undefined = $state(undefined);
-    let user1: string | undefined = $state(undefined);
-
-    function toUser(userId: string): string {
-        return `@UserId(${userId})`;
-    }
-    $effect(() => {
-        if (content.status.kind === "p2p_swap_cancelled") {
-            if (content.status.token0TxnOut === undefined) {
-                steps = [
-                    { label: "open", status: "done" },
-                    { label: "cancelled_pending", status: "doing" },
-                ];
-            } else {
-                steps = [
-                    { label: "open", status: "done" },
-                    { label: "refunded", status: "done" },
-                ];
-                result = { label: "cancelled", status: "failed" };
-                token0TxnOut = client.buildTransactionUrl(
-                    content.status.token0TxnOut,
-                    content.token0.ledger,
-                );
-            }
-        } else if (content.status.kind === "p2p_swap_expired") {
-            if (content.status.token0TxnOut === undefined) {
-                steps = [
-                    { label: "open", status: "done" },
-                    { label: "expired_pending", status: "doing" },
-                ];
-            } else {
-                steps = [
-                    { label: "open", status: "done" },
-                    { label: "refunded", status: "done" },
-                ];
-                result = { label: "expired", status: "failed" };
-                token0TxnOut = client.buildTransactionUrl(
-                    content.status.token0TxnOut,
-                    content.token0.ledger,
-                );
-            }
-        } else if (content.status.kind === "p2p_swap_reserved") {
-            steps = [
-                { label: "open", status: "done" },
-                { label: "reserved", status: "doing" },
-            ];
-            user1 = toUser(content.status.reservedBy);
-        } else if (content.status.kind === "p2p_swap_accepted") {
-            steps = [
-                { label: "open", status: "done" },
-                { label: "accepting", status: "done" },
-                { label: "accepted", status: "done" },
-                { label: "swapping", status: "doing" },
-            ];
-            user1 = toUser(content.status.acceptedBy);
-            token1TxnIn = client.buildTransactionUrl(
-                content.status.token1TxnIn,
-                content.token1.ledger,
-            );
-        } else if (content.status.kind === "p2p_swap_completed") {
-            steps = [
-                { label: "open", status: "done" },
-                { label: "accepting", status: "done" },
-                { label: "accepted", status: "done" },
-                { label: "swapped", status: "done" },
-            ];
-            result = { label: "completed", status: "done" };
-            user1 = toUser(content.status.acceptedBy);
-            token1TxnIn = client.buildTransactionUrl(
-                content.status.token1TxnIn,
-                content.token1.ledger,
-            );
-            token0TxnOut = client.buildTransactionUrl(
-                content.status.token0TxnOut,
-                content.token0.ledger,
-            );
-            token1TxnOut = client.buildTransactionUrl(
-                content.status.token0TxnOut,
-                content.token0.ledger,
-            );
-        }
-    });
-    let fullSteps = $derived(
-        steps.map((step) => ({ label: labelPrefix + step.label, status: step.status })),
-    );
-    let fullResult = $derived(
-        result !== undefined
-            ? { label: labelPrefix + result.label, status: result.status }
-            : undefined,
-    );
-    let labelValues = $derived({
-        token0: content.token0.symbol,
-        token1: content.token1.symbol,
-        amount0: client.formatTokens(content.token0Amount, content.token0.decimals),
-        amount1: client.formatTokens(content.token1Amount, content.token1.decimals),
-        user0: toUser(senderId),
-        user1,
-        token0TxnIn: client.buildTransactionUrl(content.token0TxnIn, content.token0.ledger),
-        token0TxnOut,
-        token1TxnIn,
-        token1TxnOut,
-    });
-    let title = $derived(i18nKey("p2pSwap.swapTokenTo", labelValues));
-</script>
-
-<Sheet onDismiss={onClose}>
-    <Column gap={"lg"} padding={"lg"}>
-        <Subtitle fontWeight={"bold"}>
-            <Translatable resourceKey={title} />
-        </Subtitle>
-        <ProgressSteps steps={fullSteps} {labelValues} result={fullResult} />
-    </Column>
-</Sheet>
diff --git a/frontend/app/src/components_mobile/home/PermissionsChangedEvent.svelte b/frontend/app/src/components_mobile/home/PermissionsChangedEvent.svelte
deleted file mode 100644
index ab404caef2..0000000000
--- a/frontend/app/src/components_mobile/home/PermissionsChangedEvent.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script lang="ts">
-    import type { Level, PermissionsChanged, UserSummary } from "@client";
-    import { allUsersStore } from "@client";
-    import { _ } from "svelte-i18n";
-    import { i18nKey, interpolate } from "../../i18n/i18n";
-    import { buildDisplayName } from "../../utils/user";
-    import NonMessageEvent from "./NonMessageEvent.svelte";
-
-    interface Props {
-        event: PermissionsChanged;
-        user: UserSummary | undefined;
-        timestamp: bigint;
-        level: Level;
-    }
-
-    let { event, user, timestamp, level }: Props = $props();
-
-    let me = $derived(event.changedBy === user?.userId);
-    let changedByStr = $derived(
-        buildDisplayName($allUsersStore, event.changedBy, me ? "me" : "user"),
-    );
-
-    let text = $derived(
-        interpolate(
-            $_,
-            i18nKey(
-                "permissionsChangedBy",
-                {
-                    changedBy: changedByStr,
-                },
-                level,
-                true,
-            ),
-        ),
-    );
-</script>
-
-<NonMessageEvent {text} {timestamp} />
diff --git a/frontend/app/src/components_mobile/home/PinNumberModal.svelte b/frontend/app/src/components_mobile/home/PinNumberModal.svelte
deleted file mode 100644
index 23436c91e9..0000000000
--- a/frontend/app/src/components_mobile/home/PinNumberModal.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts">
-    import { Column, Sheet, Subtitle } from "component-lib";
-    import { i18nKey } from "../../i18n/i18n";
-    import Pincode from "../pincode/Pincode.svelte";
-    import Translatable from "../Translatable.svelte";
-    import ForgotPinLabel from "./ForgotPinLabel.svelte";
-
-    interface Props {
-        onComplete: (pin: string) => void;
-        onClose: () => void;
-        onForgot: () => void;
-    }
-
-    let { onComplete, onClose, onForgot }: Props = $props();
-
-    function onPinComplete(_: string[], value: string) {
-        onComplete(value);
-    }
-</script>
-
-<Sheet onDismiss={onClose}>
-    <Column gap={"xl"} padding={"xl"}>
-        <Subtitle fontWeight={"bold"}>
-            <Translatable resourceKey={i18nKey("pinNumber.enterPin")} />
-        </Subtitle>
-        <Column gap={"lg"}>
-            <Pincode length={6} onComplete={onPinComplete} />
-            <ForgotPinLabel {onForgot} />
-        </Column>
-    </Column>
-</Sheet>
diff --git a/frontend/app/src/components_mobile/home/PlaceholderContent.svelte b/frontend/app/src/components_mobile/home/PlaceholderContent.svelte
deleted file mode 100644
index 7212408dae..0000000000
--- a/frontend/app/src/components_mobile/home/PlaceholderContent.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<svelte:options immutable />
-
-<script lang="ts">
-    import { i18nKey } from "../../i18n/i18n";
-    import Translatable from "../Translatable.svelte";
-</script>
-
-<span class="placeholder">
-    <Translatable resourceKey={i18nKey("placeholderContent")} />
-</span>
-
-<style lang="scss">
-    .placeholder {
-        padding: $sp4;
-        @include font(light, italic, fs-90);
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/PollAnswer.svelte b/frontend/app/src/components_mobile/home/PollAnswer.svelte
deleted file mode 100644
index e13eca9f55..0000000000
--- a/frontend/app/src/components_mobile/home/PollAnswer.svelte
+++ /dev/null
@@ -1,92 +0,0 @@
-<script lang="ts">
-    import { Body, ColourVars, Row, Tooltip } from "component-lib";
-    import type { OpenChat, UserLookup } from "@client";
-    import { allUsersStore, currentUserIdStore } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import CheckCircleOutline from "svelte-material-icons/CheckCircleOutline.svelte";
-    import Progress from "../Progress.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        percent: number;
-        answer: string;
-        voted: boolean;
-        txtColor: string;
-        voters: string[] | undefined;
-        numVotes: number;
-        showVotes: boolean;
-        me: boolean;
-        onClick?: () => void;
-    }
-
-    let { percent, answer, voted, txtColor, voters, numVotes, showVotes, onClick }: Props =
-        $props();
-
-    let longPressed: boolean = $state(false);
-
-    function buildPollUsernames(
-        userStore: UserLookup,
-        voters: string[] | undefined,
-        myUserId: string | undefined,
-    ): string | undefined {
-        if (voters === undefined || voters.length === 0 || !showVotes) return undefined;
-        return client.buildUsernameList($_, new Set(voters), myUserId, userStore);
-    }
-
-    function buildTooltipText(): string {
-        if (usernames === undefined) {
-            if (numVotes === 1) {
-                if (voted) {
-                    return $_("poll.oneVoteBy") + " " + $_("you");
-                } else {
-                    return $_("poll.oneVote");
-                }
-            } else {
-                if (voted) {
-                    return $_("poll.numVotesIncludingYours", { values: { votes: numVotes } });
-                } else {
-                    return $_("poll.numVotes", { values: { votes: numVotes } });
-                }
-            }
-        } else {
-            if (numVotes === 1) {
-                return $_("poll.oneVoteBy") + " " + usernames;
-            } else {
-                return $_("poll.numVotesBy", { values: { votes: numVotes } }) + " " + usernames;
-            }
-        }
-    }
-
-    function click() {
-        if (!longPressed) {
-            onClick?.();
-        }
-    }
-    let usernames = $derived(buildPollUsernames($allUsersStore, voters, $currentUserIdStore));
-</script>
-
-<Tooltip
-    textLength={usernames === undefined ? 10 : usernames.length + 16}
-    longestWord={30}
-    position={"right"}
-    align={"middle"}
-    fill
-    enable={showVotes}>
-    <Row onClick={click}>
-        <Progress colour={ColourVars.primaryMuted} {percent}>
-            <Row gap={"md"} crossAxisAlignment={"center"}>
-                <Body width={"hug"}>
-                    {answer}
-                </Body>
-                {#if voted}
-                    <CheckCircleOutline size={"1em"} color={txtColor} />
-                {/if}
-            </Row>
-        </Progress>
-    </Row>
-    {#snippet popup()}
-        {buildTooltipText()}
-    {/snippet}
-</Tooltip>
diff --git a/frontend/app/src/components_mobile/home/PollBuilder.svelte b/frontend/app/src/components_mobile/home/PollBuilder.svelte
deleted file mode 100644
index 5ead960348..0000000000
--- a/frontend/app/src/components_mobile/home/PollBuilder.svelte
+++ /dev/null
@@ -1,490 +0,0 @@
-<script lang="ts">
-    import {
-        AnchoredSheet,
-        Body,
-        BodySmall,
-        ColourVars,
-        Column,
-        CommonButton2,
-        Row,
-        Switch,
-        transition,
-        ExpandingTextArea,
-    } from "component-lib";
-    import {
-        ONE_DAY,
-        OpenChat,
-        publish,
-        type MessageContext,
-        type PollContent,
-        type TotalPollVotes,
-    } from "@client";
-    import { dragHandle, dragHandleZone, type DndEvent } from "svelte-dnd-action";
-    import { getContext, onMount } from "svelte";
-    import { _ } from "svelte-i18n";
-    import Cog from "svelte-material-icons/Cog.svelte";
-    import Check from "svelte-material-icons/Check.svelte";
-    import Chart from "svelte-material-icons/ChartBoxOutline.svelte";
-    import UnfoldMoreHorizontal from "svelte-material-icons/UnfoldMoreHorizontal.svelte";
-    import { i18nKey, interpolate } from "../../i18n/i18n";
-    import Setting from "../Setting.svelte";
-    import Translatable from "../Translatable.svelte";
-    import DurationSelector from "./DurationSelector.svelte";
-    import SlidingPageContent from "./SlidingPageContent.svelte";
-    import { keyboard } from "@stores/keyboard.svelte";
-    import { flip } from "svelte/animate";
-
-    const MAX_QUESTION_LENGTH = 250;
-    const MAX_ANSWER_LENGTH = 75;
-    const MAX_ANSWERS = 10;
-
-    const client = getContext<OpenChat>("client");
-    const flipDurationMs = 100;
-
-    type Answer = {
-        _id: number;
-        value: string;
-    };
-
-    let answerId = 0;
-    const emptyAnswer = () => ({ _id: answerId++, value: "" });
-    const isAnswerEmpty = ({ value }: Answer): boolean => value.length === 0;
-
-    type CandidatePoll = {
-        pollQuestion: string;
-        anonymous: boolean;
-        showVotesBeforeEndDate: boolean;
-        allowMultipleVotesPerUser: boolean;
-        allowUserToChangeVote: boolean;
-        pollAnswers: Answer[];
-        duration: bigint;
-    };
-
-    interface Props {
-        messageContext: MessageContext;
-        onClose: () => void;
-    }
-
-    let { messageContext, onClose }: Props = $props();
-
-    let anchoredSheet: AnchoredSheet;
-    let poll: CandidatePoll = $state(emptyPoll());
-    let enoughAnswers = $derived(poll.pollAnswers.filter((a) => !isAnswerEmpty(a)).length >= 2);
-    let uniqueAnswers = $derived.by(() => {
-        const a = poll.pollAnswers.map((a) => a.value.toUpperCase());
-        return a.length === new Set(a).size;
-    });
-    let validQuestion = $derived(poll.pollQuestion.length > 0);
-    let validAnswers = $derived(enoughAnswers && uniqueAnswers);
-    let valid = $derived(validQuestion && validAnswers);
-
-    type ShortStatusKeys = {
-        visibility: string;
-        voteType: string;
-        voteEdit: string;
-        viewResults: string | undefined;
-    };
-
-    // Internationalisation required here, and in the component layout.
-    let shortStatus = $derived.by<ShortStatusKeys>(() => {
-        return {
-            visibility: poll.anonymous ? "poll.anonymous" : "poll.app.public",
-            voteType: poll.allowMultipleVotesPerUser ? "poll.app.multiVote" : "poll.app.singleVote",
-            voteEdit: poll.allowUserToChangeVote
-                ? "poll.app.canChangeVote"
-                : "poll.app.cantChangeVote",
-            viewResults: poll.showVotesBeforeEndDate ? undefined : "poll.app.resultsWillShow",
-        };
-    });
-
-    onMount(() => {
-        const wasViewportResizeEnabled = keyboard.viewportResizeEnabled;
-        // If resize is currently not enabled, enable it!
-        if (!wasViewportResizeEnabled) keyboard.enableViewportResize();
-
-        return () => {
-            // If resize was not enabled enabled when the component was mounted,
-            // disable it again.
-            if (!wasViewportResizeEnabled) keyboard.disableViewportResize();
-        };
-    });
-
-    export function resetPoll() {
-        poll = emptyPoll();
-    }
-
-    function emptyPoll() {
-        return {
-            pollQuestion: "",
-            anonymous: true,
-            showVotesBeforeEndDate: true,
-            allowMultipleVotesPerUser: false,
-            allowUserToChangeVote: true,
-            pollAnswers: [emptyAnswer(), emptyAnswer()],
-            duration: BigInt(ONE_DAY),
-        };
-    }
-
-    let addingAnswer = $state(false);
-    function addAnswer() {
-        if (addingAnswer) return;
-
-        addingAnswer = true;
-        const emptyCount = poll.pollAnswers.filter(isAnswerEmpty).length;
-
-        // Only add a new field if there are NO empty slots left
-        if (emptyCount === 0 && poll.pollAnswers.length < MAX_ANSWERS) {
-            transition(["fade"], () => {
-                poll.pollAnswers = [...poll.pollAnswers, emptyAnswer()];
-            });
-        }
-
-        setTimeout(() => (addingAnswer = false), 100);
-    }
-
-    function checkInputIfEmpty(idx: number) {
-        const emptyCount = poll.pollAnswers.filter(isAnswerEmpty).length;
-
-        // Remove if input is empty, and there's at least one more empty answer
-        if (idx > 1 && emptyCount > 1 && isAnswerEmpty(poll.pollAnswers[idx])) {
-            deleteAnswer(idx);
-        }
-    }
-
-    // TODO fix an (android) issue where an answer input loses the focus, after
-    // a previously focused input value was fully removed, and the input deleted.
-    function deleteAnswer(idx: number) {
-        transition(["fade"], () => {
-            poll.pollAnswers.splice(idx, 1);
-            normalizeTrailingEmpty();
-        });
-    }
-
-    // Helper to keep the "one trailing empty" rule
-    function normalizeTrailingEmpty() {
-        const nonEmpty = poll.pollAnswers.filter((a) => !isAnswerEmpty(a));
-
-        if (nonEmpty.length === 0) {
-            poll.pollAnswers = [emptyAnswer(), emptyAnswer()];
-        } else {
-            // Keep non-empty + one empty at the end
-            poll.pollAnswers = [...nonEmpty, emptyAnswer()];
-        }
-    }
-
-    function handleDndConsider(e: CustomEvent<DndEvent<Answer>>) {
-        poll.pollAnswers = e.detail.items;
-    }
-
-    function handleDndFinalize(e: CustomEvent<DndEvent<Answer>>) {
-        poll.pollAnswers = e.detail.items;
-    }
-
-    function createPollVotes(): TotalPollVotes {
-        if (poll.anonymous) {
-            return { kind: "anonymous_poll_votes", votes: {} };
-        } else if (poll.showVotesBeforeEndDate) {
-            return { kind: "visible_poll_votes", votes: {} };
-        } else {
-            return { kind: "hidden_poll_votes", votes: 0 };
-        }
-    }
-
-    function createPollContent(): PollContent | undefined {
-        return {
-            kind: "poll_content",
-            votes: {
-                total: createPollVotes(),
-                user: [],
-            },
-            config: {
-                allowMultipleVotesPerUser: poll.allowMultipleVotesPerUser,
-                allowUserToChangeVote: poll.allowUserToChangeVote,
-                text: poll.pollQuestion === "" ? undefined : poll.pollQuestion,
-                showVotesBeforeEndDate: poll.showVotesBeforeEndDate,
-                endDate: BigInt(+new Date()) + poll.duration,
-                anonymous: poll.anonymous,
-                options: [
-                    ...poll.pollAnswers
-                        .filter(({ value }) => value.length > 0)
-                        .map((a) => a.value)
-                        .values(),
-                ],
-            },
-            ended: false,
-        };
-    }
-
-    function start() {
-        const poll = createPollContent();
-        if (poll) {
-            client.sendMessageWithContent(messageContext, poll, false);
-            onClose();
-        }
-    }
-
-    function back() {
-        publish("closeModalPage");
-    }
-
-    // Used to preemptively hide the anchored sheet when input is focused, and
-    // we expect the keyboard to show, but it has not shown yet.
-    let preemptiveHideOptions = $state(false);
-    function inputFocused() {
-        if (client.isNativeApp() && !keyboard.visible) {
-            preemptiveHideOptions = true;
-        }
-    }
-
-    $effect(() => {
-        if (keyboard.visible) {
-            // Resets the value once the keyboard is visible.
-            preemptiveHideOptions = false;
-        }
-    });
-</script>
-
-<SlidingPageContent onBack={back} title={i18nKey("poll.create")}>
-    <Column height={"fill"} gap={"xxl"} padding={["xxl", "lg", "huge"]}>
-        <Column gap="sm" padding={["zero", "lg"]}>
-            <DurationSelector bind:duration={poll.duration}>
-                {#snippet title()}
-                    <Body fontWeight={"bold"}>
-                        <Translatable resourceKey={i18nKey("poll.pollDuration")} />
-                    </Body>
-                {/snippet}
-            </DurationSelector>
-        </Column>
-        <Column gap={"md"}>
-            <Column gap="sm" padding={["zero", "lg"]}>
-                <Body fontWeight={"bold"}>
-                    <Translatable resourceKey={i18nKey("poll.app.questionLabel")} />
-                </Body>
-            </Column>
-            <ExpandingTextArea
-                maxlength={MAX_QUESTION_LENGTH}
-                countdown
-                bind:value={poll.pollQuestion}
-                placeholder={interpolate($_, i18nKey("poll.app.questionInputPlaceholder"))}
-                onfocus={inputFocused}>
-                {#snippet subtext()}
-                    <Translatable resourceKey={i18nKey("poll.app.questionInputSubtext")} />
-                {/snippet}
-            </ExpandingTextArea>
-        </Column>
-
-        <Column gap={"lg"}>
-            <Column gap="sm" padding={["zero", "lg"]}>
-                <Body fontWeight={"bold"}>
-                    <Translatable resourceKey={i18nKey("poll.app.answerLabel")} />
-                </Body>
-                <Body colour="textSecondary">
-                    <Translatable resourceKey={i18nKey("poll.app.answerRequirements")} />
-                </Body>
-            </Column>
-            <Column gap="sm">
-                <div
-                    class={"dropzone"}
-                    use:dragHandleZone={{
-                        items: poll.pollAnswers,
-                        flipDurationMs,
-                        dropTargetStyle: {},
-                    }}
-                    onconsider={handleDndConsider}
-                    onfinalize={handleDndFinalize}>
-                    {#each poll.pollAnswers as ans, i (ans._id)}
-                        <div animate:flip={{ duration: flipDurationMs }}>
-                            <Row gap="sm" overflow="visible">
-                                <ExpandingTextArea
-                                    placeholder={interpolate(
-                                        $_,
-                                        i18nKey("poll.app.answerPlaceholder"),
-                                    )}
-                                    maxlength={MAX_ANSWER_LENGTH}
-                                    countdown
-                                    bind:value={poll.pollAnswers[i].value}
-                                    oninput={addAnswer}
-                                    onfocus={inputFocused}
-                                    onblur={() => checkInputIfEmpty(i)} />
-                                <div
-                                    use:dragHandle
-                                    aria-label="drag-handle for answer {i}"
-                                    class="handle">
-                                    <UnfoldMoreHorizontal
-                                        size="1.5rem"
-                                        color={ColourVars.textSecondary} />
-                                </div>
-                            </Row>
-                        </div>
-                    {/each}
-                </div>
-            </Column>
-        </Column>
-    </Column>
-
-    <div class="opts_sheet" class:hidden={keyboard.visible || preemptiveHideOptions}>
-        <AnchoredSheet bind:this={anchoredSheet}>
-            {#snippet collapsedContent()}
-                <Row
-                    gap="xl"
-                    mainAxisAlignment="spaceBetween"
-                    crossAxisAlignment={"center"}
-                    padding={["sm", "lg", "xl"]}>
-                    <Row
-                        gap="sm"
-                        width="fill"
-                        crossAxisAlignment="center"
-                        onClick={() => anchoredSheet.expand()}>
-                        <Column width="fill">
-                            <Row width="hug" gap="xs" crossAxisAlignment="end">
-                                <Body fontWeight="bold" colour="primary">
-                                    <Translatable
-                                        resourceKey={i18nKey("poll.app.additionalSettings")} />
-                                </Body>
-                                <Column padding={["zero", "zero", "xxs"]} width="hug">
-                                    <Cog size="1rem" color={ColourVars.primary} />
-                                </Column>
-                            </Row>
-                            <BodySmall colour="textSecondary" maxLines={3}>
-                                <Translatable resourceKey={i18nKey(shortStatus.visibility)} /> •
-                                <Translatable resourceKey={i18nKey(shortStatus.voteType)} /> •
-                                <Translatable resourceKey={i18nKey(shortStatus.voteEdit)} />
-                                {#if shortStatus.viewResults}
-                                    • <Translatable
-                                        resourceKey={i18nKey(shortStatus.viewResults)} />
-                                {/if}
-                            </BodySmall>
-                        </Column>
-                    </Row>
-                    <CommonButton2
-                        disabled={!valid}
-                        onClick={start}
-                        variant="primary"
-                        mode="regular">
-                        {#snippet icon(color, size)}
-                            <Chart {color} {size} />
-                        {/snippet}
-                        <Translatable resourceKey={i18nKey("poll.app.publish")} />
-                    </CommonButton2>
-                </Row>
-            {/snippet}
-            {#snippet expandedContent()}
-                <Column gap="xxl" padding={["xl", "xl", "huge"]}>
-                    <Setting
-                        toggle={() => (poll.anonymous = !poll.anonymous)}
-                        info={"poll.app.settings.publicSwitchInfo"}>
-                        <Switch
-                            onChange={() => (poll.anonymous = !poll.anonymous)}
-                            width={"fill"}
-                            reverse
-                            checked={!poll.anonymous}>
-                            <Translatable
-                                resourceKey={i18nKey("poll.app.settings.publicSwitchLabel")} />
-                        </Switch>
-                    </Setting>
-
-                    <Setting
-                        toggle={() =>
-                            (poll.allowMultipleVotesPerUser = !poll.allowMultipleVotesPerUser)}
-                        info={"poll.app.settings.multipleVotesInfo"}>
-                        <Switch
-                            onChange={() =>
-                                (poll.allowMultipleVotesPerUser = !poll.allowMultipleVotesPerUser)}
-                            width={"fill"}
-                            reverse
-                            checked={poll.allowMultipleVotesPerUser}>
-                            <Translatable
-                                resourceKey={i18nKey("poll.app.settings.multipleVotesLabel")} />
-                        </Switch>
-                    </Setting>
-
-                    <Setting
-                        toggle={() => (poll.allowUserToChangeVote = !poll.allowUserToChangeVote)}
-                        info={"poll.app.settings.changeVoteInfo"}>
-                        <Switch
-                            onChange={() =>
-                                (poll.allowUserToChangeVote = !poll.allowUserToChangeVote)}
-                            width={"fill"}
-                            reverse
-                            checked={!poll.allowUserToChangeVote}>
-                            <Translatable
-                                resourceKey={i18nKey("poll.app.settings.changeVoteLabel")} />
-                        </Switch>
-                    </Setting>
-
-                    <Setting
-                        toggle={() => (poll.showVotesBeforeEndDate = !poll.showVotesBeforeEndDate)}
-                        info={"poll.app.settings.hideVotesInfo"}>
-                        <Switch
-                            onChange={() =>
-                                (poll.showVotesBeforeEndDate = !poll.showVotesBeforeEndDate)}
-                            width={"fill"}
-                            reverse
-                            checked={!poll.showVotesBeforeEndDate}>
-                            <Translatable
-                                resourceKey={i18nKey("poll.app.settings.hideVotesLabel")} />
-                        </Switch>
-                    </Setting>
-
-                    <Row mainAxisAlignment={"end"} crossAxisAlignment={"center"}>
-                        <CommonButton2
-                            onClick={() => anchoredSheet.collapse()}
-                            variant="primary"
-                            mode="text">
-                            {#snippet icon(color, size)}
-                                <Check {color} {size} />
-                            {/snippet}
-                            <Translatable
-                                resourceKey={i18nKey("poll.app.settings.closeSettings")} />
-                        </CommonButton2>
-                    </Row>
-                </Column>
-            {/snippet}
-        </AnchoredSheet>
-    </div>
-</SlidingPageContent>
-
-<style lang="scss">
-    .handle {
-        display: flex;
-        flex-direction: column;
-        height: 3.5rem;
-        justify-content: center;
-        padding: var(--sp-xs);
-    }
-
-    .dropzone {
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        gap: var(--sp-md);
-    }
-
-    @keyframes slide-down-and-fade {
-        from {
-            opacity: 1;
-            bottom: 0;
-            transform: translateY(0);
-        }
-        to {
-            opacity: 0;
-            bottom: 0;
-            transform: translateY(100%);
-        }
-    }
-
-    .opts_sheet.hidden {
-        position: absolute;
-        bottom: 0;
-        opacity: 0;
-        transform: translateY(100%);
-    }
-
-    :global {
-        #dnd-action-dragged-el {
-            .dl_expanding_textarea {
-                box-shadow: 0 0 0.5rem var(--primary) !important;
-            }
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/PollContent.svelte b/frontend/app/src/components_mobile/home/PollContent.svelte
deleted file mode 100644
index f822da7524..0000000000
--- a/frontend/app/src/components_mobile/home/PollContent.svelte
+++ /dev/null
@@ -1,279 +0,0 @@
-<script lang="ts">
-    import {
-        BodySmall,
-        Caption,
-        ChatText,
-        ChatCaption,
-        ColourVars,
-        Column,
-        Row,
-    } from "component-lib";
-    import { currentUserIdStore, publish, type OpenChat, type PollContent } from "@client";
-    import { getContext, type Snippet } from "svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import Translatable from "../Translatable.svelte";
-    import MessageRenderer from "./MessageRenderer.svelte";
-    import Poll from "svelte-material-icons/Poll.svelte";
-    import ChartBoxOutline from "svelte-material-icons/ChartBoxOutline.svelte";
-    import CheckCircleOutline from "svelte-material-icons/CheckCircle.svelte";
-    import CheckboxBlankCircleOutline from "svelte-material-icons/CheckboxBlankCircleOutline.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        content: PollContent;
-        me: boolean;
-        readonly: boolean;
-        senderId: string;
-        reply?: boolean;
-        edited?: boolean;
-        blockLevelMarkdown?: boolean;
-        title?: Snippet;
-        onRemove?: () => void;
-        onRegisterVote?: (vote: { type: "delete" | "register"; answerIndex: number }) => void;
-    }
-
-    let {
-        content,
-        me,
-        readonly,
-        senderId,
-        reply = false,
-        edited = false,
-        blockLevelMarkdown = false,
-        title,
-        onRemove,
-        onRegisterVote,
-    }: Props = $props();
-
-    function vote(idx: number) {
-        if (cannotVote) return;
-
-        onRegisterVote?.({
-            type: votedFor(idx) ? "delete" : "register",
-            answerIndex: idx,
-        });
-    }
-
-    function votedFor(idx: number): boolean {
-        return content.votes.user.includes(idx);
-    }
-
-    function viewPublicVotes() {
-        publish("pollPublicVotes", { content, senderId });
-    }
-
-    function totalVotes(content: PollContent): number {
-        if (content.votes.total.kind === "anonymous_poll_votes") {
-            return Object.values(content.votes.total.votes).reduce((total, n) => total + n, 0);
-        }
-        if (content.votes.total.kind === "hidden_poll_votes") {
-            return content.votes.total.votes;
-        }
-        if (content.votes.total.kind === "visible_poll_votes") {
-            return Object.values(content.votes.total.votes).reduce(
-                (total, n) => total + n.length,
-                0,
-            );
-        }
-        return 0;
-    }
-
-    function votesForAnswer(idx: number): number {
-        if (content.votes.total.kind === "anonymous_poll_votes") {
-            return content.votes.total.votes[idx] ?? 0;
-        }
-        if (content.votes.total.kind === "hidden_poll_votes") {
-            return 0;
-        }
-        if (content.votes.total.kind === "visible_poll_votes") {
-            return content.votes.total.votes[idx]?.length ?? 0;
-        }
-        return 0;
-    }
-
-    function percentageOfVote(idx: number) {
-        const answerVotes = votesForAnswer(idx);
-        return showVotes && answerVotes > 0 ? (votesForAnswer(idx) / numberOfVotes) * 100 : 0;
-    }
-
-    let date = $derived(
-        content.config.endDate ? new Date(Number(content.config.endDate)) : undefined,
-    );
-    let haveIVoted = $derived(content.votes.user.length > 0);
-    let numberOfVotes = $derived(totalVotes(content));
-    let cannotVote = $derived(
-        content.ended || readonly || (haveIVoted && !content.config.allowUserToChangeVote),
-    );
-    let showVotes = $derived(
-        content.ended ||
-            ((haveIVoted || senderId === $currentUserIdStore) &&
-                (content.config.showVotesBeforeEndDate || content.config.endDate === undefined)),
-    );
-
-    type ShortStatusKeys = {
-        visibility: string;
-        voteType: string;
-        voteEdit: string;
-        viewResults: string | undefined;
-    };
-
-    // Internationalisation required here, and in the component layout.
-    let shortStatus = $derived.by<ShortStatusKeys>(() => {
-        return {
-            visibility: content.config.anonymous
-                ? "poll.app.votesAreAnon"
-                : "poll.app.votesArePublic",
-            voteType: content.config.allowMultipleVotesPerUser
-                ? "poll.app.multiVote"
-                : "poll.app.singleVote",
-            voteEdit: content.config.allowUserToChangeVote
-                ? "poll.app.canChangeVote"
-                : "poll.app.cantChangeVote",
-            viewResults: content.config.showVotesBeforeEndDate
-                ? undefined
-                : "poll.app.resultsWillShow",
-        };
-    });
-</script>
-
-{#snippet replyView(textContent?: Snippet)}
-    <Column gap="xxs">
-        <Row>{@render title?.()}</Row>
-        <Row gap="xs" crossAxisAlignment="center">
-            <ChartBoxOutline
-                size="1rem"
-                color={me ? ColourVars.secondaryLight : ColourVars.primaryLight} />
-            {@render textContent?.()}
-        </Row>
-    </Column>
-{/snippet}
-
-{#snippet regularView()}
-    <Column padding={["zero", "zero", "lg"]} gap="sm">
-        <!-- Poll question and setup -->
-        <Row
-            gap="sm"
-            padding="md"
-            overflow="hidden"
-            background={me ? ColourVars.primaryMuted : ColourVars.background0}
-            borderRadius={[me ? "lg" : "md", me ? "md" : "lg", "lg", "lg"]}>
-            <Poll size="2rem" color={me ? ColourVars.primaryLight : ColourVars.textSecondary} />
-            <Column gap="sm">
-                <ChatText fontWeight="bold">{content.config?.text ?? "..."}</ChatText>
-                <ChatCaption colour="primaryLight">
-                    <Translatable resourceKey={i18nKey(shortStatus.visibility)} /> •
-                    <Translatable resourceKey={i18nKey(shortStatus.voteType)} /> •
-                    <Translatable resourceKey={i18nKey(shortStatus.voteEdit)} />
-                    {#if shortStatus.viewResults}
-                        • <Translatable resourceKey={i18nKey(shortStatus.viewResults)} />
-                    {/if}
-                </ChatCaption>
-            </Column>
-        </Row>
-
-        <!-- Answers list -->
-        <Column padding={["sm", "md"]} gap="xl">
-            {#each [...content.config.options] as answer, i (answer)}
-                {@const voted = votedFor(i)}
-                {@const pct = percentageOfVote(i)}
-                {@const pctSingleDec = Math.round(pct * 10) / 10}
-                <Column gap="sm" onClick={() => vote(i)}>
-                    <Row gap="sm" padding={["zero", "xs"]} crossAxisAlignment="center">
-                        <BodySmall width={{ size: "2.1rem" }} colour="primaryLight">
-                            {#if showVotes}
-                                {`${pctSingleDec}%`}
-                            {:else}
-                                %
-                            {/if}
-                        </BodySmall>
-                        <ChatText>{answer}</ChatText>
-                        {#if voted}
-                            <CheckCircleOutline size="1.25rem" color={ColourVars.textPrimary} />
-                        {:else}
-                            <CheckboxBlankCircleOutline
-                                size="1.25rem"
-                                color={me ? ColourVars.primaryLight : ColourVars.textSecondary} />
-                        {/if}
-                    </Row>
-                    <div class="progress" class:me>
-                        <div class="pct" style:width={showVotes ? `${pct}%` : "0%"}></div>
-                    </div>
-                </Column>
-            {/each}
-        </Column>
-
-        <!-- Info & Poll Options -->
-        <Column gap="xs" padding={["xs", "lg", "zero"]} crossAxisAlignment="start">
-            <Row height={{ size: "1rem" }} crossAxisAlignment="center" overflow="hidden">
-                <ChatCaption>
-                    <Translatable
-                        resourceKey={i18nKey("poll.totalVotes", {
-                            total: numberOfVotes.toString(),
-                        })} />
-                </ChatCaption>
-
-                {#if !content.config.anonymous && showVotes}
-                    <button class="view_votes" onclick={viewPublicVotes}>
-                        <ChatCaption colour="textPrimary" fontWeight="bold">View votes</ChatCaption>
-                    </button>
-                {/if}
-            </Row>
-
-            <Caption colour={me ? "primaryLight" : "textSecondary"}>
-                {#if content.ended}
-                    <Translatable resourceKey={i18nKey("poll.finished")} />
-                {:else if date}
-                    <Translatable
-                        resourceKey={i18nKey("poll.pollEnds", {
-                            end: `${client.toLongDateString(date)} @ ${client.toShortTimeString(
-                                date,
-                            )}`,
-                        })} />
-                {/if}
-            </Caption>
-        </Column>
-    </Column>
-{/snippet}
-
-<MessageRenderer
-    caption={content.config.text}
-    {replyView}
-    {regularView}
-    {me}
-    {reply}
-    {edited}
-    {blockLevelMarkdown}
-    {onRemove} />
-
-<style lang="scss">
-    .progress,
-    .pct {
-        border-radius: var(--rad-lg);
-    }
-
-    .progress.me {
-        background-color: var(--primary-muted);
-    }
-
-    .progress:not(.me) {
-        background-color: var(--background-0);
-    }
-
-    .progress {
-        height: 0.5rem;
-        width: 100%;
-    }
-
-    .pct {
-        height: 100%;
-        background-color: var(--text-primary);
-        transition: width 200ms ease-out;
-    }
-
-    .view_votes {
-        background: transparent;
-        border: none;
-        padding: var(--sp-sm) var(--sp-zero) var(--sp-sm);
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/PreviewFooter.svelte b/frontend/app/src/components_mobile/home/PreviewFooter.svelte
deleted file mode 100644
index 9a4c49f500..0000000000
--- a/frontend/app/src/components_mobile/home/PreviewFooter.svelte
+++ /dev/null
@@ -1,100 +0,0 @@
-<script lang="ts">
-    import { groupPreviewState } from "@src/utils/preview.svelte";
-    import { Caption, ColourVars, CommonButton, Container, Sheet } from "component-lib";
-    import {
-        type EnhancedAccessGate,
-        isCompositeGate,
-        isLeafGate,
-        isLocked,
-        isUniquePersonGate,
-        type MultiUserChat,
-        type OpenChat,
-    } from "@client";
-    import { getContext } from "svelte";
-    import ArrowLeft from "svelte-material-icons/ArrowLeft.svelte";
-    import Enter from "svelte-material-icons/LocationEnter.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import Translatable from "../Translatable.svelte";
-    import GateCheckFailed from "./access/AccessGateCheckFailed.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        chat: MultiUserChat;
-        lapsed: boolean;
-    }
-
-    let { chat, lapsed }: Props = $props();
-
-    let gates = $derived(client.accessGatesForChat(chat));
-    let flattenedGates = $derived.by<EnhancedAccessGate[]>(() => {
-        return gates.flatMap((g) => {
-            if (isCompositeGate(g)) {
-                // Unique person (DecideAI) verification is suspended - drop it from the join flow.
-                return g.gates
-                    .filter((l) => !isUniquePersonGate(l))
-                    .map((l) => ({
-                        ...l,
-                        level: g.level,
-                        expiry: g.expiry,
-                        collectionName: g.collectionName,
-                    }));
-            }
-            if (isLeafGate(g)) {
-                return isUniquePersonGate(g) ? [] : [g];
-            }
-            return [];
-        });
-    });
-    let hasGates = $derived(flattenedGates.length > 0);
-    let locked = $derived(gates.some((g) => isLocked(g)));
-</script>
-
-<!-- TODO check this section, in designs it was from edge to edge, but it's not rendered as such -->
-<Container
-    gap={"sm"}
-    direction={"vertical"}
-    padding={"lg"}
-    borderRadius="md"
-    background={ColourVars.background1}>
-    <Container crossAxisAlignment={"center"}>
-        <Container>
-            <CommonButton
-                onClick={() => groupPreviewState.cancelPreview(client)}
-                size={"small_text"}>
-                {#snippet icon(color, size)}
-                    <ArrowLeft {color} {size} />
-                {/snippet}
-                <Translatable resourceKey={i18nKey("back")} />
-            </CommonButton>
-        </Container>
-        <CommonButton
-            mode={"active"}
-            loading={groupPreviewState.joining !== undefined}
-            disabled={locked || groupPreviewState.joining !== undefined}
-            onClick={() => groupPreviewState.joinGroup(client)}>
-            {#snippet icon(color, size)}
-                <Enter {color} {size} />
-            {/snippet}
-            <Translatable
-                resourceKey={locked
-                    ? i18nKey("access.lockedGate", undefined, chat.level, true)
-                    : lapsed
-                      ? i18nKey("access.lapsed.rejoin", undefined, chat.level, true)
-                      : i18nKey("joinGroup", undefined, chat.level, true)} />
-        </CommonButton>
-    </Container>
-    {#if hasGates}
-        <Container padding={["zero", "sm"]} mainAxisAlignment={"end"}>
-            <Caption width={"hug"} fontWeight={"bold"} colour={"textSecondary"}>
-                <Translatable resourceKey={i18nKey("Access gates enabled")} />
-            </Caption>
-        </Container>
-    {/if}
-</Container>
-
-{#if groupPreviewState.gateCheckFailed.length > 0}
-    <Sheet onDismiss={() => groupPreviewState.reset()}>
-        <GateCheckFailed onClose={() => groupPreviewState.reset()} />
-    </Sheet>
-{/if}
diff --git a/frontend/app/src/components_mobile/home/PrizeContent.svelte b/frontend/app/src/components_mobile/home/PrizeContent.svelte
deleted file mode 100644
index f1f81d5ffb..0000000000
--- a/frontend/app/src/components_mobile/home/PrizeContent.svelte
+++ /dev/null
@@ -1,556 +0,0 @@
-<script lang="ts">
-    import type { DelegationChain, ECDSAKeyIdentity } from "@icp-sdk/core/identity";
-    import { disableClaimPrizeFeature } from "@src/utils/features";
-
-    import type { TextContent as TextContentType } from "@client";
-    import {
-        Body,
-        BodySmall,
-        ChatCaption,
-        Column,
-        ColourVars,
-        defaultBackgroundGradient,
-        Row,
-        Sheet,
-        Subtitle,
-    } from "component-lib";
-    import {
-        AuthProvider,
-        chitBands,
-        chitStateStore,
-        cryptoLookup,
-        enhancedCryptoLookup,
-        isDiamondStore,
-        isLifetimeDiamondStore,
-        type ChatIdentifier,
-        type DiamondMembershipStatus,
-        type OpenChat,
-        type PrizeContent,
-        type PrizeContentInitial,
-    } from "@client";
-    import { getContext, type Snippet } from "svelte";
-    import { Confetti } from "svelte-confetti";
-    import { _ } from "svelte-i18n";
-    import Clock from "svelte-material-icons/ClockOutline.svelte";
-    import Fingerprint from "svelte-material-icons/Fingerprint.svelte";
-    import Gift from "svelte-material-icons/GiftOutline.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { claimsStore } from "../../stores/claims";
-    import { rtlStore } from "../../stores/rtl";
-    import { now500 } from "../../stores/time";
-    import { toastStore } from "../../stores/toast";
-    import Diamond from "../icons/Diamond.svelte";
-    import SpinningToken from "../icons/SpinningToken.svelte";
-    import SecureButton from "../SecureButton.svelte";
-    import Translatable from "../Translatable.svelte";
-    import Badges from "./profile/Badges.svelte";
-    import ChitEarnedBadge from "./profile/ChitEarnedBadge.svelte";
-    import ReAuthenticateModal from "./profile/ReAuthenticateModal.svelte";
-    import Streak from "./profile/Streak.svelte";
-    import MessageRenderer from "./MessageRenderer.svelte";
-    import { TokenState } from "./wallet/walletState.svelte";
-    import TransferFeesMessage from "./TransferFeesMessage.svelte";
-    import TextContent from "./TextContent.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        content: PrizeContent | PrizeContentInitial;
-        me: boolean;
-        intersecting?: boolean;
-        chatId?: ChatIdentifier;
-        messageId?: bigint;
-        title?: Snippet;
-        draft?: boolean;
-        reply?: boolean;
-        edited?: boolean;
-        isPreview?: boolean;
-        blockLevelMarkdown?: boolean;
-        onRemove?: () => void;
-    }
-
-    let {
-        content,
-        me,
-        intersecting = false,
-        chatId,
-        messageId,
-        title,
-        draft = false,
-        reply = false,
-        edited = false,
-        isPreview = false,
-        blockLevelMarkdown = false,
-        onRemove,
-    }: Props = $props();
-
-    let progressWidth = $state(0);
-    let showRestrictionDetails = $state(false);
-    let mouseEvent = $state<MouseEvent>();
-    let normalisedTextContent = $derived.by<TextContentType | undefined>(() => {
-        if (content.caption && content.caption.length > 0) {
-            return {
-                kind: "text_content",
-                text: content.caption,
-            };
-        }
-    });
-    let hasTextContent = $derived(normalisedTextContent !== undefined);
-
-    async function claim(
-        e: MouseEvent,
-        auth: { key: ECDSAKeyIdentity; delegation: DelegationChain } | undefined,
-    ) {
-        if (!chatId || !messageId) return;
-
-        let signInProof: string | undefined = undefined;
-        if (content.requiresCaptcha) {
-            if (auth) {
-                signInProof = await client.getSignInProof(auth.key, auth.delegation);
-            } else {
-                mouseEvent = e;
-                showAuthentication = true;
-                return;
-            }
-        }
-
-        showAuthentication = false;
-        if (e.isTrusted && chatId.kind !== "direct_chat" && !me && userEligible) {
-            claimsStore.add(messageId);
-            client
-                .claimPrize(chatId, messageId, e, signInProof)
-                .then((success) => {
-                    if (!success) {
-                        toastStore.showFailureToast(i18nKey("prizes.claimFailed"));
-                    }
-                })
-                .finally(() => claimsStore.delete(messageId));
-        }
-    }
-
-    let logo = $derived(
-        [...$cryptoLookup.values()].find((t) =>
-            content.kind === "prize_content"
-                ? t.symbol.toLowerCase() === content.token.toLowerCase()
-                : false,
-        )?.logo ?? "",
-    );
-    let total = $derived(
-        content.kind === "prize_content"
-            ? content.prizesRemaining + content.prizesPending + content.winnerCount
-            : 0,
-    );
-    let percentage = $derived(
-        content.kind === "prize_content" && total > 0 ? (content.winnerCount / total) * 100 : 0,
-    );
-    let claimedByYou = $derived(content.kind === "prize_content" ? content.userIsWinner : false);
-    let finished = $derived($now500 >= Number(content.endDate));
-    let allClaimed = $derived(
-        content.kind === "prize_content" ? content.prizesRemaining <= 0 : false,
-    );
-    let userEligible = $derived(
-        (!content.diamondOnly || $isDiamondStore) &&
-            (!content.lifetimeDiamondOnly || $isLifetimeDiamondStore) &&
-            // Unique person ("verified user") gating is suspended - always eligible
-            content.streakOnly <= $chitStateStore.streak &&
-            content.minChitEarned <= $chitStateStore.totalChitEarned,
-    );
-    let disabled = $derived(finished || claimedByYou || allClaimed || !userEligible);
-    let timeRemaining = $derived(
-        finished
-            ? $_("prizes.finished")
-            : client.formatTimeRemaining($now500, Number(content.endDate)),
-    );
-    let diamondStatus = $derived(
-        (content.lifetimeDiamondOnly
-            ? "lifetime"
-            : content.diamondOnly
-              ? "active"
-              : "inactive") as DiamondMembershipStatus["kind"],
-    );
-    let restrictedPrize = $derived(
-        content.diamondOnly ||
-            content.lifetimeDiamondOnly ||
-            content.streakOnly > 0 ||
-            content.requiresCaptcha ||
-            content.minChitEarned > 0,
-    );
-    let showAuthentication = $state(false);
-    let spin = $derived(intersecting && !finished && !allClaimed);
-
-    let initialTokenState = $derived(
-        content.kind === "prize_content_initial"
-            ? new TokenState($enhancedCryptoLookup.get(content.transfer.ledger)!)
-            : undefined,
-    );
-
-    function reauthenticated(detail: {
-        key: ECDSAKeyIdentity;
-        delegation: DelegationChain;
-        provider: AuthProvider;
-    }) {
-        if (mouseEvent !== undefined) {
-            claim(mouseEvent, detail);
-        }
-    }
-</script>
-
-{#snippet replyView(textContent?: Snippet)}
-    {#if content.kind === "prize_content"}
-        <Row gap="sm" minWidth="12rem">
-            <Column width="fill" gap="xxs" padding={["xxs", "zero"]}>
-                {@render title?.()}
-                {#if textContent}
-                    {@render textContent()}
-                {:else}
-                    <Row gap="xs" crossAxisAlignment="center">
-                        <Gift
-                            color={me ? ColourVars.secondaryLight : ColourVars.primaryLight}
-                            size="1.15rem" />
-                        <ChatCaption colour={me ? "secondaryLight" : "primaryLight"}>
-                            <Translatable resourceKey={i18nKey("Prize")} />
-                        </ChatCaption>
-                    </Row>
-                {/if}
-            </Column>
-        </Row>
-    {/if}
-{/snippet}
-
-{#snippet draftView()}
-    {#if content.kind === "prize_content_initial" && initialTokenState}
-        <Column padding="xxs">
-            <Column
-                padding={["xs", "sm"]}
-                borderRadius={["xl", "xl", "md", "md"]}
-                backgroundColor={ColourVars.background0}>
-                <Row padding="sm" width="fill" gap="sm" crossAxisAlignment="center">
-                    <Gift size="1rem" color={ColourVars.primary} />
-                    <Body width="hug" fontWeight="semi-bold">
-                        <Translatable
-                            resourceKey={i18nKey(
-                                `${initialTokenState.formatTokens(content.amount)} ${initialTokenState.symbol}`,
-                            )} />
-                    </Body>
-                    <Body width="fill" colour="primary">
-                        <!-- TODO i18n -->
-                        <Translatable resourceKey={i18nKey("prize draw")} />
-                    </Body>
-                </Row>
-                <Row
-                    width="fill"
-                    height={{ size: "0.25rem" }}
-                    background={ColourVars.background1}
-                    borderRadius="circle">.</Row>
-                <Row padding="sm">
-                    <TransferFeesMessage
-                        symbol={initialTokenState.symbol}
-                        tokenDecimals={initialTokenState.decimals}
-                        transferFees={content.fees} />
-                </Row>
-            </Column>
-        </Column>
-    {/if}
-{/snippet}
-
-<!-- TODO allow prize message to be edited - to update their text caption -->
-{#snippet regularView()}
-    {#if content.kind === "prize_content"}
-        {#if showAuthentication}
-            <ReAuthenticateModal
-                onCancel={() => (showAuthentication = false)}
-                onSuccess={reauthenticated}
-                title={i18nKey("prizes.authRequiredTitle")}
-                message={i18nKey("prizes.authRequiredMessage")} />
-        {/if}
-        <Column
-            gap="xxs"
-            minWidth="62vw"
-            padding={["zero", "zero", hasTextContent ? "zero" : "xl"]}>
-            <!-- Spinning Token & Countdown -->
-            <Column>
-                <Column
-                    padding="xl"
-                    mainAxisAlignment="center"
-                    crossAxisAlignment="center"
-                    background={defaultBackgroundGradient}
-                    borderRadius={[me ? "lg" : "md", !me ? "lg" : "md", "zero", "zero"]}>
-                    <div class="prize-coin">
-                        <SpinningToken {logo} {spin} mirror={true} size="small" />
-                    </div>
-                </Column>
-                <Column
-                    gap="xs"
-                    padding="md"
-                    crossAxisAlignment="center"
-                    backgroundColor={me ? ColourVars.primaryMuted : ColourVars.background1}>
-                    <!-- Time remaining -->
-                    <Row gap="xs" mainAxisAlignment="center" crossAxisAlignment="center">
-                        {#if allClaimed}
-                            <BodySmall width="hug" fontWeight="semi-bold">
-                                <Translatable resourceKey={i18nKey("prizes.allClaimed")} />
-                            </BodySmall>
-                        {:else if finished}
-                            <BodySmall width="hug" fontWeight="semi-bold">
-                                <Translatable resourceKey={i18nKey("prizes.finished")} />
-                            </BodySmall>
-                        {:else}
-                            <Clock size="1em" color={ColourVars.textPrimary} />
-                            <BodySmall width={{ size: "4.75rem" }} fontWeight="semi-bold">
-                                {timeRemaining}
-                            </BodySmall>
-                        {/if}
-                    </Row>
-
-                    <!-- Badges -->
-                    {#if restrictedPrize}
-                        <Row
-                            mainAxisAlignment="center"
-                            onClick={() => (showRestrictionDetails = true)}>
-                            <!-- If chit features are turned off minChitEarned is zero, and chit badge cannot be rendered. -->
-                            <!-- Streak badge can still be forced to show, since that prize restriction is returned. -->
-                            <Badges
-                                size="large"
-                                forceStreakBadge
-                                withFingerprint={content.requiresCaptcha}
-                                {diamondStatus}
-                                uniquePerson={false}
-                                chitEarned={content.minChitEarned}
-                                streak={content.streakOnly}
-                                borderColor={me
-                                    ? ColourVars.primaryMuted
-                                    : ColourVars.background1} />
-                        </Row>
-                    {/if}
-                </Column>
-            </Column>
-
-            <!-- Claimed, Confetti & Button -->
-            <Column
-                gap="md"
-                padding={["sm", me ? "sm" : "xs", me ? "lg" : "xs"]}
-                borderRadius={["zero", "zero", "lg", "lg"]}
-                backgroundColor={me ? ColourVars.primaryMuted : ColourVars.background1}>
-                <Column gap="xxs">
-                    <!-- Claimed count -->
-                    <Row mainAxisAlignment="center">
-                        <BodySmall width="hug">
-                            {content.winnerCount}/{total}
-                            <Translatable resourceKey={i18nKey("claimed")} />
-                        </BodySmall>
-                    </Row>
-
-                    <!-- Claimed Progress -->
-                    <Row padding={["zero", "sm"]}>
-                        <div class="progress" class:me bind:clientWidth={progressWidth}>
-                            <div
-                                class="claimed"
-                                class:rtl={$rtlStore}
-                                style="background-size: {progressWidth}px 100%; width: {percentage}%">
-                            </div>
-                        </div>
-                    </Row>
-                </Column>
-
-                {#if !me && !disableClaimPrizeFeature && messageId}
-                    <SecureButton
-                        width="fill"
-                        label={"Prize message clicked"}
-                        loading={$claimsStore.has(messageId)}
-                        onClick={(e) => claim(e, undefined)}
-                        {disabled}>
-                        <Body>
-                            <Translatable
-                                resourceKey={i18nKey(
-                                    claimedByYou
-                                        ? "prizes.claimed"
-                                        : finished
-                                          ? "prizes.finished"
-                                          : allClaimed
-                                            ? "prizes.allClaimed"
-                                            : "prizes.claim",
-                                )} />
-                        </Body>
-                    </SecureButton>
-                {/if}
-            </Column>
-        </Column>
-        {#if claimedByYou}
-            <div class="tada">
-                <div class="confetti">
-                    <Confetti size={30} colorArray={[`url(${logo})`]} />
-                </div>
-            </div>
-        {/if}
-        {#if normalisedTextContent}
-            <TextContent {me} content={normalisedTextContent} />
-        {/if}
-    {/if}
-{/snippet}
-
-<MessageRenderer
-    {replyView}
-    {draftView}
-    {regularView}
-    caption={content.caption}
-    {me}
-    {reply}
-    {draft}
-    {edited}
-    {blockLevelMarkdown}
-    {isPreview}
-    {onRemove} />
-
-{#snippet restrictionsBanner(key: string)}
-    <Column padding="md" borderRadius="md" backgroundColor={ColourVars.secondaryMuted}>
-        <BodySmall>
-            <Translatable resourceKey={i18nKey(key)} />
-        </BodySmall>
-    </Column>
-{/snippet}
-
-{#if showRestrictionDetails}
-    <Sheet onDismiss={() => (showRestrictionDetails = false)}>
-        <!-- Prize participation gates -->
-        <Column
-            gap="md"
-            borderRadius="md"
-            padding={["md", "xl", "xxl"]}
-            backgroundColor={ColourVars.background1}>
-            {#if restrictedPrize}
-                <Column>
-                    <Subtitle fontWeight="semi-bold">
-                        <Translatable resourceKey={i18nKey("prizes.restrictions")} />
-                    </Subtitle>
-                    <Body colour="textSecondary">
-                        <Translatable resourceKey={i18nKey("prizes.restrictedMessage")} />
-                    </Body>
-                </Column>
-
-                <Column gap="sm" padding={["zero", "xs", "md"]}>
-                    {#if content.requiresCaptcha}
-                        <Row gap="md">
-                            <Column
-                                borderRadius="circle"
-                                width={{ size: "1.375rem" }}
-                                height={{ size: "1.375rem" }}
-                                mainAxisAlignment="center"
-                                crossAxisAlignment="center"
-                                backgroundColor={ColourVars.background2}>
-                                <Fingerprint
-                                    viewBox={"0 -1 24 24"}
-                                    size={"1rem"}
-                                    color={"var(--text-primary)"} />
-                            </Column>
-                            <Body>
-                                <Translatable
-                                    resourceKey={i18nKey("prizes.authRequiredLabel", {
-                                        n: content.streakOnly,
-                                    })} />
-                            </Body>
-                        </Row>
-                    {/if}
-                    {#if content.diamondOnly || content.lifetimeDiamondOnly}
-                        <Row gap="md">
-                            <Diamond
-                                borderColor={ColourVars.background1}
-                                size={"default"}
-                                status={content.lifetimeDiamondOnly ? "lifetime" : "active"} />
-
-                            <Body>
-                                <Translatable
-                                    resourceKey={i18nKey(
-                                        "prizes." +
-                                            (content.lifetimeDiamondOnly
-                                                ? "lifetimeDiamondMembership"
-                                                : "diamondMembership"),
-                                    )} />
-                            </Body>
-                        </Row>
-                    {/if}
-                    <!-- Unique person ("verified user") gating is suspended -->
-                    {#if content.streakOnly > 0}
-                        <Row gap="md">
-                            <Streak
-                                borderColor={ColourVars.background1}
-                                days={content.streakOnly} />
-                            <Body>
-                                <Translatable
-                                    resourceKey={i18nKey("prizes.streakFull", {
-                                        n: content.streakOnly,
-                                    })} />
-                            </Body>
-                        </Row>
-                    {/if}
-
-                    {#if content.minChitEarned > 0}
-                        <Row gap="md">
-                            <ChitEarnedBadge
-                                borderColor={ColourVars.background1}
-                                earned={content.minChitEarned} />
-
-                            <Body>
-                                <Translatable
-                                    resourceKey={i18nKey("prizes.minChitEarnedValue", {
-                                        n: chitBands.get(content.minChitEarned) ?? "0",
-                                    })} />
-                            </Body>
-                        </Row>
-                    {/if}
-                </Column>
-            {/if}
-            {#if me}
-                {#if allClaimed || finished}
-                    {@render restrictionsBanner("prizes.prizeFinished")}
-                {:else}
-                    {@render restrictionsBanner("prizes.live")}
-                {/if}
-            {/if}
-        </Column>
-    </Sheet>
-{/if}
-
-<style lang="scss">
-    .progress {
-        height: 0.35rem;
-        width: 100%;
-        overflow: hidden;
-        position: relative;
-        border-radius: var(--rad-lg);
-
-        &:not(.me) {
-            background: var(--background-0);
-        }
-
-        &.me {
-            background: var(--backdrop);
-        }
-
-        .claimed {
-            $red: rgba(234, 41, 41, 1);
-            $orange: rgba(244, 118, 4, 1);
-            $green: rgba(74, 233, 122, 1);
-            position: absolute;
-            left: 0;
-            top: 0;
-            bottom: 0;
-            background-image: linear-gradient(90deg, $green 0%, $orange 50%, $red 100%);
-            &.rtl {
-                left: unset;
-                right: 0;
-                background-image: linear-gradient(90deg, $red 0%, $orange 50%, $green 100%);
-            }
-        }
-    }
-
-    .tada {
-        position: relative;
-
-        .confetti {
-            position: absolute;
-            pointer-events: none;
-            top: 50%;
-            left: 50%;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/PrizeContentBuilder.svelte b/frontend/app/src/components_mobile/home/PrizeContentBuilder.svelte
deleted file mode 100644
index 3b08dfc605..0000000000
--- a/frontend/app/src/components_mobile/home/PrizeContentBuilder.svelte
+++ /dev/null
@@ -1,483 +0,0 @@
-<script lang="ts" module>
-    type PrizeConfig = {
-        minChitEarned: number;
-        diamond: "none" | "standard" | "lifetime";
-        uniquePersonOnly: boolean;
-        minStreak: number;
-        requiresAuth: boolean;
-        distribution: "equal" | "random";
-        duration: bigint;
-    };
-    const defaultPrizeRestrictions: PrizeConfig = {
-        minChitEarned: 0,
-        diamond: "none",
-        uniquePersonOnly: false,
-        minStreak: 0,
-        requiresAuth: false,
-        distribution: "random",
-        duration: BigInt(ONE_DAY),
-    };
-</script>
-
-<script lang="ts">
-    import {
-        Body,
-        Chip,
-        Column,
-        CommonButton2,
-        InputTextButton,
-        NumberInput,
-        Row,
-        Switch,
-    } from "component-lib";
-    import type { MessageContext, PrizeContentInitial } from "@client";
-    import {
-        bigIntMax,
-        chitBands,
-        cryptoBalanceStore,
-        enhancedCryptoLookup as cryptoLookup,
-        lastCryptoSent,
-        LEDGER_CANISTER_ICP,
-        LocalStorageStore,
-        localUpdates,
-        ONE_DAY,
-    } from "@client";
-    import { onMount } from "svelte";
-    import Diamond from "svelte-material-icons/DiamondOutline.svelte";
-    import Lifetime from "svelte-material-icons/DiamondStone.svelte";
-    import Fingerprint from "svelte-material-icons/Fingerprint.svelte";
-    import Flash from "svelte-material-icons/FlashOutline.svelte";
-    import Gift from "svelte-material-icons/GiftOutline.svelte";
-    import LightningBolt from "svelte-material-icons/LightningBoltCircle.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import Setting from "../Setting.svelte";
-    import Translatable from "../Translatable.svelte";
-    import CryptoSelector from "./CryptoSelector.svelte";
-    import DurationSelector from "./DurationSelector.svelte";
-    import SelectChitEarned from "./SelectChitEarned.svelte";
-    import SelectMinStreak from "./SelectMinStreak.svelte";
-    import SlidingPageContent from "./SlidingPageContent.svelte";
-    import TokenInput from "./TokenInput.svelte";
-    import TransferFeesMessage from "./TransferFeesMessage.svelte";
-    import { TokenState } from "./wallet/walletState.svelte";
-    import { keyboard } from "@stores/keyboard.svelte";
-
-    const OC_FEE_PERCENTAGE = 5n;
-    const streaks = [3, 7, 14, 30, 100, 365];
-
-    interface Props {
-        context: MessageContext;
-        onClose: () => void;
-    }
-
-    let { context, onClose }: Props = $props();
-
-    let draftAmount = $state(0n);
-    let ledger = $state($lastCryptoSent ?? LEDGER_CANISTER_ICP);
-
-    const prizeConfig = new LocalStorageStore(
-        "openchat_prize_config",
-        defaultPrizeRestrictions,
-        JSON.stringify,
-        (s) => JSON.parse(s),
-        (_a, _b) => false,
-    );
-
-    let numberOfWinners = $state<number | undefined>(20);
-    let numberOfWinnersValid = $derived(
-        numberOfWinners !== undefined && numberOfWinners >= 1 && numberOfWinners <= 1000,
-    );
-    let distribution: "equal" | "random" = $state($prizeConfig.distribution);
-    let selectedDuration = $state($prizeConfig.duration);
-    let diamondType: "none" | "standard" | "lifetime" = $state($prizeConfig.diamond);
-    // Unique-person ("verified user") gating is suspended - force off so a value persisted from a
-    // previous session can't be silently reapplied (there is no UI to clear it).
-    const uniquePersonOnly = false;
-    let minStreak = $state<number>($prizeConfig.minStreak);
-    let minChitEarned = $state<number>($prizeConfig.minChitEarned);
-    let tokenInputState: "ok" | "zero" | "too_low" | "too_high" = $state("ok");
-    let requiresAuth = $state($prizeConfig.requiresAuth);
-    let cryptoBalance = $derived($cryptoBalanceStore.get(ledger) ?? 0n);
-    let tokenDetails = $derived($cryptoLookup.get(ledger)!);
-    let tokenState = $derived(new TokenState(tokenDetails));
-    let transferFee = $derived(tokenDetails.transferFee);
-    let transferFees = $derived(transferFee * BigInt(numberOfWinners ?? 0));
-    let prizeFees = $derived(transferFees + (draftAmount * OC_FEE_PERCENTAGE) / 100n);
-    let totalFees = $derived(transferFee + prizeFees);
-    let minAmount = $derived(100n * BigInt(numberOfWinners ?? 0) * transferFee);
-    let maxAmount = $derived(bigIntMax(cryptoBalance - totalFees, BigInt(0)));
-    let valid = $derived(numberOfWinnersValid && tokenInputState === "ok");
-    let selectMinChitEarned = $state(false);
-    let selectMinStreak = $state(false);
-
-    onMount(() => {
-        const wasViewportResizeEnabled = keyboard.viewportResizeEnabled;
-        // If resize is currently not enabled, enable it!
-        if (!wasViewportResizeEnabled) keyboard.enableViewportResize();
-
-        return () => {
-            // If resize was not enabled enabled when the component was mounted,
-            // disable it again.
-            if (!wasViewportResizeEnabled) keyboard.disableViewportResize();
-        };
-    });
-
-    function onDiamondChanged(t: "standard" | "lifetime") {
-        switch (t) {
-            case "standard":
-                switch (diamondType) {
-                    case "lifetime":
-                    case "none":
-                        diamondType = "standard";
-                        break;
-                    case "standard":
-                        diamondType = "none";
-                        break;
-                }
-                break;
-            case "lifetime":
-                switch (diamondType) {
-                    case "standard":
-                    case "none":
-                        diamondType = "lifetime";
-                        break;
-                    case "lifetime":
-                        diamondType = "none";
-                        break;
-                }
-                break;
-        }
-    }
-
-    function recipientFromContext({ chatId }: MessageContext) {
-        switch (chatId.kind) {
-            case "channel":
-                return chatId.communityId;
-            case "group_chat":
-                return chatId.groupId;
-            default:
-                throw new Error("We can't create prizes in direct chats");
-        }
-    }
-
-    function getEndDate() {
-        return BigInt(BigInt(Date.now()) + selectedDuration);
-    }
-
-    function send() {
-        const prizes = generatePrizes();
-        const amountE8s = prizes.reduce((total, p) => total + p) + prizeFees;
-
-        const content: PrizeContentInitial = {
-            kind: "prize_content_initial",
-            caption: undefined,
-            endDate: getEndDate(),
-            diamondOnly: diamondType === "standard",
-            lifetimeDiamondOnly: diamondType === "lifetime",
-            uniquePersonOnly,
-            streakOnly: minStreak,
-            minChitEarned: minChitEarned,
-            transfer: {
-                kind: "pending",
-                ledger,
-                token: tokenState.symbol,
-                recipient: recipientFromContext(context),
-                amountE8s,
-                feeE8s: transferFee,
-                createdAtNanos: BigInt(Date.now()) * BigInt(1_000_000),
-            },
-            amount: draftAmount,
-            fees: totalFees,
-            prizes,
-            requiresCaptcha: requiresAuth,
-        };
-
-        prizeConfig.set({
-            minChitEarned,
-            diamond: diamondType,
-            uniquePersonOnly,
-            minStreak,
-            requiresAuth,
-            distribution,
-            duration: selectedDuration,
-        });
-
-        localUpdates.draftMessages.setAttachment(context, content);
-
-        onClose();
-    }
-
-    function generatePrizes(): bigint[] {
-        if (!numberOfWinners) return [];
-
-        const share = Math.round(Number(draftAmount) / numberOfWinners);
-        switch (distribution) {
-            case "equal":
-                return generateEquallyDistributedPrizes(draftAmount, share);
-            case "random":
-                return generateRandomlyDistributedPrizes(draftAmount, share);
-        }
-    }
-
-    // make sure that any rounding errors are corrected for
-    function compensateRounding(prizes: bigint[], fund: bigint): bigint[] {
-        const total = prizes.reduce((agg, p) => agg + p, 0n);
-        const diff = fund - total;
-        if (diff !== 0n) {
-            prizes[0] = prizes[0] + diff;
-        }
-        return prizes;
-    }
-
-    function generateEquallyDistributedPrizes(fund: bigint, share: number): bigint[] {
-        const prizes = Array.from({ length: numberOfWinners ?? 0 }).map(() => BigInt(share));
-        return compensateRounding(prizes, fund);
-    }
-
-    function generateRandomlyDistributedPrizes(fund: bigint, share: number): bigint[] {
-        const min = share * 0.1;
-        const max = share * 2;
-
-        const intermediate = Array.from({ length: numberOfWinners ?? 0 }).map(() =>
-            random(min, max),
-        );
-        const total = intermediate.reduce((agg, p) => agg + p, 0);
-
-        // we might have more prizes than the total so let's scale
-        const scale = total / Number(fund);
-        const scaled = intermediate.map((p) => BigInt(Math.round(p / scale)));
-
-        const prizes = compensateRounding(scaled, fund);
-
-        return ensureMinPrizeAtLeastTransferFee(prizes);
-    }
-
-    function ensureMinPrizeAtLeastTransferFee(prizes: bigint[]): bigint[] {
-        let totalAdded = 0n;
-        let max = 0n;
-        let maxIndex = 0;
-        for (let i = 0; i < prizes.length; i++) {
-            const prize = prizes[i];
-            if (prize < transferFee) {
-                prizes[i] = transferFee;
-                totalAdded += transferFee - prize;
-            } else if (prize > max) {
-                max = prize;
-                maxIndex = i;
-            }
-        }
-
-        if (totalAdded > 0n) {
-            prizes[maxIndex] = max - totalAdded;
-        }
-
-        return prizes;
-    }
-
-    function random(min: number, max: number): number {
-        const range = max - min;
-        return Math.floor(min + Math.random() * range);
-    }
-
-    function toggleDistribution() {
-        switch (distribution) {
-            case "equal":
-                distribution = "random";
-                break;
-            case "random":
-                distribution = "equal";
-                break;
-        }
-    }
-</script>
-
-{#if selectMinChitEarned}
-    <SelectChitEarned
-        min={minChitEarned}
-        onClose={() => (selectMinChitEarned = false)}
-        onSelect={(min: number) => {
-            minChitEarned = min;
-            selectMinChitEarned = false;
-        }} />
-{/if}
-
-{#if selectMinStreak}
-    <SelectMinStreak
-        {streaks}
-        min={minStreak}
-        onClose={() => (selectMinStreak = false)}
-        onSelect={(min: number) => {
-            minStreak = min;
-            selectMinStreak = false;
-        }} />
-{/if}
-
-{#snippet sectionTitle(key: string, padding: boolean = true)}
-    <Row padding={["zero", padding ? "xs" : "zero"]}>
-        <Body fontWeight="semi-bold">
-            <Translatable resourceKey={i18nKey(key)} />
-        </Body>
-    </Row>
-{/snippet}
-
-<SlidingPageContent title={i18nKey("Create a prize")}>
-    <Column height={"fill"} gap={"xxl"} padding={["xxl", "lg", "huge"]}>
-        <!-- -->
-        <!-- Token select -->
-        <Column gap={"md"}>
-            {@render sectionTitle("Select the prize token")}
-            <CryptoSelector {draftAmount} showRefresh bind:ledger />
-        </Column>
-
-        <!-- Withdrawal amount -->
-        <Column gap="md">
-            {@render sectionTitle("Total prize amount")}
-            <TokenInput
-                balance={tokenState.cryptoBalance}
-                {ledger}
-                bind:status={tokenInputState}
-                {minAmount}
-                {maxAmount}
-                bind:amount={draftAmount}>
-                {#snippet subtext()}
-                    <Translatable
-                        resourceKey={i18nKey(
-                            `Minimum amount ${tokenState.formatTokens(minAmount)} ${
-                                tokenState.symbol
-                            }`,
-                        )} />
-                {/snippet}
-            </TokenInput>
-            <Row padding={["zero", "sm"]}>
-                <TransferFeesMessage
-                    symbol={tokenState.symbol}
-                    tokenDecimals={tokenState.decimals}
-                    transferFees={totalFees} />
-            </Row>
-        </Column>
-
-        <!-- Number of winners -->
-        <Column gap="md">
-            {@render sectionTitle("Number of winners")}
-            <NumberInput
-                error={!numberOfWinnersValid}
-                min={1}
-                max={1000}
-                bind:value={numberOfWinners}>
-                {#snippet subtext()}
-                    <Translatable
-                        resourceKey={i18nKey("Please enter a number between 1 and 1000")} />
-                {/snippet}
-                {#snippet textButtons()}
-                    <InputTextButton onClick={() => (numberOfWinners = 1000)}>
-                        <Translatable resourceKey={i18nKey("tokenTransfer.max")} />
-                    </InputTextButton>
-                {/snippet}
-            </NumberInput>
-        </Column>
-
-        <!-- Prize expiry -->
-        <Column gap="md">
-            {@render sectionTitle("Prize expiry time")}
-            <DurationSelector bind:duration={selectedDuration} />
-        </Column>
-
-        <!-- Distribution -->
-        <Column padding={["zero", "xs"]}>
-            <Setting
-                toggle={toggleDistribution}
-                info={"By default, prize amounts per winner are randomised, meaning that winnings between users will be different. If you'd like each of the winners to get equal amounts of the prize, turn this option on."}>
-                <Switch
-                    onChange={toggleDistribution}
-                    width={"fill"}
-                    reverse
-                    checked={distribution === "equal"}>
-                    <Translatable resourceKey={i18nKey("Distribute evenly")} />
-                </Switch>
-            </Setting>
-        </Column>
-
-        <!-- Distribution -->
-        <Column gap={"lg"} padding={["zero", "xs"]}>
-            <Column gap={"sm"}>
-                {@render sectionTitle("Claim restrictions", false)}
-                <Body colour={"textSecondary"}>
-                    <Translatable
-                        resourceKey={i18nKey(
-                            "Set limitations on who can claim prizes. By default any user can claim a prize. Select which restrictions should apply below. ",
-                        )} />
-                </Body>
-            </Column>
-            <Row wrap gap={"sm"}>
-                <Chip
-                    onClick={() => (requiresAuth = !requiresAuth)}
-                    onRemove={requiresAuth ? () => (requiresAuth = false) : undefined}
-                    mode={requiresAuth ? "filter" : "default"}>
-                    {#snippet icon(color)}
-                        <Fingerprint {color} />
-                    {/snippet}
-                    <Translatable resourceKey={i18nKey("Requires authentication")} />
-                </Chip>
-                <Chip
-                    onClick={() => onDiamondChanged("standard")}
-                    onRemove={diamondType === "standard" ? () => (diamondType = "none") : undefined}
-                    mode={diamondType === "standard" ? "filter" : "default"}>
-                    {#snippet icon(color)}
-                        <Diamond {color} />
-                    {/snippet}
-                    <Translatable resourceKey={i18nKey("Diamond membership")} />
-                </Chip>
-                <Chip
-                    onClick={() => onDiamondChanged("lifetime")}
-                    onRemove={diamondType === "lifetime" ? () => (diamondType = "none") : undefined}
-                    mode={diamondType === "lifetime" ? "filter" : "default"}>
-                    {#snippet icon(color)}
-                        <Lifetime {color} />
-                    {/snippet}
-                    <Translatable resourceKey={i18nKey("Lifetime diamond membership")} />
-                </Chip>
-                <!-- Unique person ("verified user") gating is suspended -->
-                <Chip
-                    onClick={() => (selectMinChitEarned = true)}
-                    onRemove={minChitEarned > 0 ? () => (minChitEarned = 0) : undefined}
-                    mode={minChitEarned > 0 ? "filter" : "default"}>
-                    {#snippet icon(color)}
-                        <Flash {color} />
-                    {/snippet}
-                    {#if minChitEarned > 0}
-                        <Translatable
-                            resourceKey={i18nKey(`CHIT earned: ${chitBands.get(minChitEarned)}`)} />
-                    {:else}
-                        <Translatable resourceKey={i18nKey(`CHIT earned`)} />
-                    {/if}
-                </Chip>
-                <Chip
-                    onClick={() => (selectMinStreak = true)}
-                    onRemove={minStreak > 0 ? () => (minStreak = 0) : undefined}
-                    mode={minStreak > 0 ? "filter" : "default"}>
-                    {#snippet icon(color)}
-                        <LightningBolt {color} />
-                    {/snippet}
-                    {#if minStreak > 0}
-                        <Translatable resourceKey={i18nKey(`Users with streak: ${minStreak}d`)} />
-                    {:else}
-                        <Translatable resourceKey={i18nKey(`Users with streak`)} />
-                    {/if}
-                </Chip>
-            </Row>
-        </Column>
-
-        <!-- Buttons -->
-        <Row mainAxisAlignment={"spaceBetween"} crossAxisAlignment={"center"}>
-            <CommonButton2 variant="primary" mode="text" onClick={onClose}>
-                <Translatable resourceKey={i18nKey("cancel")} />
-            </CommonButton2>
-            <CommonButton2 variant="primary" mode="regular" disabled={!valid} onClick={send}>
-                {#snippet icon(color, size)}
-                    <Gift {color} {size} />
-                {/snippet}
-                <Translatable resourceKey={i18nKey("Attach prize")} />
-            </CommonButton2>
-        </Row>
-    </Column>
-</SlidingPageContent>
diff --git a/frontend/app/src/components_mobile/home/PrizeWinnerContent.svelte b/frontend/app/src/components_mobile/home/PrizeWinnerContent.svelte
deleted file mode 100644
index bd04863bac..0000000000
--- a/frontend/app/src/components_mobile/home/PrizeWinnerContent.svelte
+++ /dev/null
@@ -1,158 +0,0 @@
-<script lang="ts">
-    import type { OpenChat, PrizeWinnerContent } from "@client";
-    import { allUsersStore, cryptoLookup, currentUserIdStore } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import SpinningToken from "../icons/SpinningToken.svelte";
-    import type { ProfileLinkClickedEvent } from "@webcomponents/profileLink";
-    import Markdown from "@shared_components/Markdown.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        content: PrizeWinnerContent;
-    }
-
-    let { content }: Props = $props();
-
-    function username(userId: string): string {
-        return userId === $currentUserIdStore
-            ? $_("you")
-            : `${$allUsersStore.get(userId)?.username ?? $_("unknown")}`;
-    }
-
-    function openUserProfile(ev: Event) {
-        ev.target?.dispatchEvent(
-            new CustomEvent<ProfileLinkClickedEvent>("profile-clicked", {
-                detail: {
-                    userId: content.transaction.recipient,
-                    chatButton: false,
-                    inGlobalContext: false,
-                },
-                bubbles: true,
-            }),
-        );
-        ev.stopPropagation();
-    }
-    let logo = $derived($cryptoLookup.get(content.transaction.ledger)?.logo ?? "");
-    let tokenDetails = $derived($cryptoLookup.get(content.transaction.ledger)!);
-    let symbol = $derived(tokenDetails.symbol);
-    let amount = $derived(
-        client.formatTokens(content.transaction.amountE8s, tokenDetails.decimals),
-    );
-    let winner = $derived(`${username(content.transaction.recipient)}`);
-    let me = $derived($currentUserIdStore === content.transaction.recipient);
-    let transactionLinkText = $derived(client.buildTransactionLink($_, content.transaction));
-</script>
-
-<div class="msg">
-    <div class="wrapper" class:other={!me}>
-        <div class="graphic" class:tiny={!me}>
-            {#if me}
-                <img class="lid" src={"/assets/lid.png"} />
-                <div class="winner-coin">
-                    <SpinningToken spin mirror={false} size={"small"} {logo} />
-                </div>
-                <img class="box" src={"/assets/box.png"} />
-            {:else}
-                <SpinningToken spin={false} mirror size={"tiny"} {logo} />
-            {/if}
-        </div>
-        <div class="txt" class:other={!me}>
-            <div class="label" onclick={openUserProfile}>
-                <Markdown
-                    text={$_("prizes.winner", {
-                        values: { recipient: winner, amount, token: symbol },
-                    })} />
-            </div>
-            {#if transactionLinkText !== undefined}
-                <div class="link">
-                    <Markdown text={transactionLinkText} />
-                </div>
-            {/if}
-        </div>
-    </div>
-</div>
-
-<style lang="scss">
-    .msg {
-        text-align: center;
-        padding-top: $sp2;
-    }
-
-    .wrapper.other {
-        display: flex;
-        align-items: center;
-        gap: $sp3;
-    }
-
-    .txt.other {
-        text-align: start;
-    }
-
-    .label {
-        cursor: pointer;
-        @include font(book, normal, fs-100);
-    }
-
-    .link {
-        @include font(book, normal, fs-80, 28);
-        color: var(--txt-light);
-    }
-
-    .graphic {
-        display: flex;
-        flex-direction: column;
-        padding: 10px 60px;
-
-        &.tiny {
-            padding: 0 10px;
-        }
-
-        .winner-coin {
-            margin-top: -45px;
-            margin-bottom: -34px;
-            align-self: center;
-            animation: bob 3s linear infinite;
-        }
-
-        .lid {
-            width: 90px;
-            height: auto;
-            align-self: flex-end;
-            position: relative;
-            animation: weave 3s linear infinite;
-            z-index: 3;
-        }
-
-        .box {
-            width: 130px;
-            height: auto;
-            align-self: center;
-        }
-    }
-
-    @keyframes bob {
-        0% {
-            transform: translateY(0);
-        }
-        50% {
-            transform: translateY(-8px);
-        }
-        100% {
-            transform: translateY(0);
-        }
-    }
-
-    @keyframes weave {
-        0% {
-            transform: translateX(2px) translateY(0);
-        }
-        50% {
-            transform: translateX(8px) translateY(-5px);
-        }
-        100% {
-            transform: translateX(2px) translateY(0);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/ProposalGroupFilters.svelte b/frontend/app/src/components_mobile/home/ProposalGroupFilters.svelte
deleted file mode 100644
index f9ca07f5dd..0000000000
--- a/frontend/app/src/components_mobile/home/ProposalGroupFilters.svelte
+++ /dev/null
@@ -1,129 +0,0 @@
-<script lang="ts">
-    import { CommonButton, Container, Switch } from "component-lib";
-    import type { ChatSummary, OpenChat } from "@client";
-    import { filteredProposalsStore, proposalTopicsStore } from "@client";
-    import { getContext } from "svelte";
-    import Check from "svelte-material-icons/CheckCircleOutline.svelte";
-    import Minus from "svelte-material-icons/MinusCircleOutline.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import {
-        proposalActionCategories,
-        type ProposalActionCategory,
-    } from "../../stores/proposalSections";
-    import { OC_GOVERNANCE_CANISTER_ID } from "../../utils/sns";
-    import CollapsibleCard from "../CollapsibleCard.svelte";
-    import Translatable from "../Translatable.svelte";
-    import SlidingPageContent from "./SlidingPageContent.svelte";
-
-    interface Props {
-        selectedChat: ChatSummary;
-    }
-
-    let { selectedChat }: Props = $props();
-
-    type SectionLabels = Record<ProposalActionCategory, string>;
-
-    const sectionLabels: SectionLabels = {
-        all: "",
-        unknown: "proposal.unknownActionCategory",
-        builtIn: "proposal.builtInAction",
-        userIndex: "proposal.userIndexAction",
-        groupIndex: "proposal.groupIndexAction",
-        notifications: "proposal.notificationsAction",
-        proposalsBot: "proposal.proposalsBotAction",
-        storageIndex: "proposal.storageIndexAction",
-        cyclesDispenser: "proposal.cyclesDispenserAction",
-        registry: "proposal.registryAction",
-        neuronController: "proposal.neuronControllerAction",
-        openchatInstaller: "proposal.openchatInstallerAction",
-    };
-
-    const client = getContext<OpenChat>("client");
-    let topics = $derived([...$proposalTopicsStore]);
-    let groupTopics = $derived(
-        selectedChat.kind !== "direct_chat" &&
-            selectedChat.subtype?.governanceCanisterId === OC_GOVERNANCE_CANISTER_ID,
-    );
-
-    let grouped = $derived([
-        ...client.groupBy(topics, ([id, _]) => {
-            if (!groupTopics) return "all";
-
-            if (id < 1000) {
-                return "builtIn";
-            } else if (id < 2000) {
-                return "userIndex";
-            } else if (id < 3000) {
-                return "groupIndex";
-            } else if (id < 4000) {
-                return "notifications";
-            } else if (id < 5000) {
-                return "proposalsBot";
-            } else if (id < 6000) {
-                return "storageIndex";
-            } else if (id < 7000) {
-                return "cyclesDispenser";
-            } else if (id < 8000) {
-                return "registry";
-            } else if (id < 9000) {
-                return "neuronController";
-            } else if (id < 10000) {
-                return "openchatInstaller";
-            } else {
-                return "unknown";
-            }
-        }),
-    ]);
-</script>
-
-<SlidingPageContent title={i18nKey("proposal.filter")}>
-    <Container gap={"lg"} padding={"lg"} direction={"vertical"}>
-        <Container gap={"md"}>
-            <CommonButton onClick={() => client.enableAllProposalFilters()}>
-                {#snippet icon(color, size)}
-                    <Check {color} {size} />
-                {/snippet}
-                <Translatable resourceKey={i18nKey("proposal.enableAll")} />
-            </CommonButton>
-            <CommonButton
-                onClick={() => client.disableAllProposalFilters(topics.map(([id]) => id))}>
-                {#snippet icon(color, size)}
-                    <Minus {color} {size} />
-                {/snippet}
-                <Translatable resourceKey={i18nKey("proposal.disableAll")} />
-            </CommonButton>
-        </Container>
-        {#each grouped as [category, topicsInCategory]}
-            {#if groupTopics}
-                <CollapsibleCard
-                    onToggle={() => proposalActionCategories.toggle(category)}
-                    open={$proposalActionCategories[category]}
-                    headerText={i18nKey(sectionLabels[category])}>
-                    <Container gap={"lg"} direction={"vertical"}>
-                        {#each topicsInCategory as [id, label]}
-                            <Switch
-                                width={"fill"}
-                                reverse
-                                onChange={() => client.toggleProposalFilter(id)}
-                                checked={!$filteredProposalsStore?.hasFilter(id)}>
-                                <Translatable resourceKey={i18nKey(label)}></Translatable>
-                            </Switch>
-                        {/each}
-                    </Container>
-                </CollapsibleCard>
-            {:else}
-                <Container gap={"lg"} direction={"vertical"}>
-                    {#each topicsInCategory as [id, label]}
-                        <Switch
-                            width={"fill"}
-                            reverse
-                            onChange={() => client.toggleProposalFilter(id)}
-                            checked={!$filteredProposalsStore?.hasFilter(id)}>
-                            <Translatable resourceKey={i18nKey(label)}></Translatable>
-                        </Switch>
-                    {/each}
-                </Container>
-            {/if}
-        {/each}
-    </Container>
-</SlidingPageContent>
diff --git a/frontend/app/src/components_mobile/home/ReminderBuilder.svelte b/frontend/app/src/components_mobile/home/ReminderBuilder.svelte
deleted file mode 100644
index 75531413d3..0000000000
--- a/frontend/app/src/components_mobile/home/ReminderBuilder.svelte
+++ /dev/null
@@ -1,76 +0,0 @@
-<script lang="ts">
-    import { BodySmall, Button, Column, Sheet, TextArea, Title } from "component-lib";
-    import { ONE_DAY, type ChatIdentifier, type OpenChat } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import Alarm from "svelte-material-icons/Alarm.svelte";
-    import { i18nKey, interpolate } from "../../i18n/i18n";
-    import { now } from "../../stores/time";
-    import { toastStore } from "../../stores/toast";
-    import Translatable from "../Translatable.svelte";
-    import DurationSelector from "./DurationSelector.svelte";
-
-    interface Props {
-        chatId: ChatIdentifier;
-        eventIndex: number;
-        threadRootMessageIndex: number | undefined;
-        onClose: () => void;
-    }
-
-    let { chatId, eventIndex, threadRootMessageIndex, onClose }: Props = $props();
-
-    const client = getContext<OpenChat>("client");
-
-    let busy = $state(false);
-    let note: string = $state("");
-
-    function createReminder() {
-        busy = true;
-        client
-            .setMessageReminder(chatId, eventIndex, remindAtMs, note, threadRootMessageIndex)
-            .then((success) => {
-                if (success) {
-                    toastStore.showSuccessToast(i18nKey("reminders.success"));
-                } else {
-                    toastStore.showFailureToast(i18nKey("reminders.failure"));
-                }
-            })
-            .finally(() => (busy = false));
-        onClose();
-    }
-    let duration = $state(BigInt(ONE_DAY));
-    let remindAtMs = $derived($now + Number(duration));
-    let remindAtDate = $derived(new Date(remindAtMs));
-</script>
-
-<Sheet onDismiss={onClose}>
-    <Column gap={"xl"} padding={"xl"}>
-        <Title fontWeight={"bold"}>
-            <Translatable resourceKey={i18nKey("reminders.title")} />
-        </Title>
-        <DurationSelector bind:duration></DurationSelector>
-        <TextArea
-            maxlength={1000}
-            rows={4}
-            placeholder={interpolate($_, i18nKey("reminders.notePlaceholder"))}
-            bind:value={note}>
-            {#snippet subtext()}
-                <Translatable resourceKey={i18nKey("Optionally add a note to your reminder")} />
-            {/snippet}
-        </TextArea>
-        <Column gap={"md"}>
-            <Button disabled={busy} loading={busy} onClick={createReminder}>
-                {#snippet icon(color)}
-                    <Alarm {color} />
-                {/snippet}
-
-                <Translatable resourceKey={i18nKey("reminders.create")} /></Button>
-            <BodySmall align={"center"} colour={"textSecondary"}>
-                <Translatable
-                    resourceKey={i18nKey("reminders.remindAt", {
-                        datetime: client.toDatetimeString(remindAtDate),
-                    })} />
-            </BodySmall>
-        </Column>
-    </Column>
-</Sheet>
diff --git a/frontend/app/src/components_mobile/home/ReminderNotes.svelte b/frontend/app/src/components_mobile/home/ReminderNotes.svelte
deleted file mode 100644
index a4f42420de..0000000000
--- a/frontend/app/src/components_mobile/home/ReminderNotes.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script lang="ts">
-    import { ChatText } from "component-lib";
-    import Markdown from "@shared_components/Markdown.svelte";
-
-    interface Props {
-        notes: string | undefined;
-    }
-
-    let { notes }: Props = $props();
-</script>
-
-{#if notes !== undefined && notes !== ""}
-    <ChatText fontWeight={"bold"}>
-        <Markdown inline suppressLinks text={notes} />
-    </ChatText>
-{/if}
diff --git a/frontend/app/src/components_mobile/home/RepliesTo.svelte b/frontend/app/src/components_mobile/home/RepliesTo.svelte
deleted file mode 100644
index 1338d0a830..0000000000
--- a/frontend/app/src/components_mobile/home/RepliesTo.svelte
+++ /dev/null
@@ -1,116 +0,0 @@
-<script lang="ts">
-    import { Column } from "component-lib";
-    import {
-        currentUserIdStore,
-        OpenChat,
-        selectedChatWebhooksStore,
-        selectedCommunityMembersStore,
-        type ChatIdentifier,
-        type RehydratedReplyContext,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import ChatMessageReplyContent from "./ChatMessageReplyContent.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        chatId: ChatIdentifier;
-        repliesTo: RehydratedReplyContext;
-        readonly: boolean;
-        intersecting: boolean;
-        contentWidth?: number;
-    }
-
-    let { repliesTo, readonly, intersecting, contentWidth }: Props = $props();
-
-    let debug = false;
-
-    let me = $derived(repliesTo.senderId === $currentUserIdStore);
-    let displayName = $derived(
-        me
-            ? client.toTitleCase($_("you"))
-            : client.getDisplayName(
-                  repliesTo.senderId,
-                  $selectedCommunityMembersStore,
-                  $selectedChatWebhooksStore,
-              ),
-    );
-</script>
-
-<Column
-    width={contentWidth ? { size: `${contentWidth}px` } : undefined}
-    supplementalClass={`replies_to ${me ? "me" : ""}`}
-    padding="sm"
-    borderRadius="md">
-    {#if repliesTo.content !== undefined}
-        <ChatMessageReplyContent
-            {me}
-            {displayName}
-            {readonly}
-            messageContext={repliesTo.sourceContext}
-            {intersecting}
-            messageId={repliesTo.messageId}
-            messageIndex={repliesTo.messageIndex}
-            senderId={repliesTo.senderId}
-            edited={false}
-            fill={false}
-            failed={false}
-            blockLevelMarkdown={true}
-            truncate
-            reply
-            content={repliesTo.content} />
-        {#if debug}
-            <pre>EventIdx: {repliesTo.eventIndex}</pre>
-            <pre>MsgId: {repliesTo.messageId}</pre>
-            <pre>SenderId: {repliesTo.senderId}</pre>
-        {/if}
-    {:else}
-        {"TODO - we don't have the message content for this"}
-    {/if}
-</Column>
-
-<style lang="scss">
-    :global {
-        .container.replies_to {
-            position: relative;
-            pointer-events: none;
-            padding-left: 1.25rem !important;
-
-            // Same CSS is defined in ReplyingTo.svelte
-            &:before {
-                content: "";
-                display: block;
-                position: absolute;
-                left: var(--sp-sm);
-                top: var(--sp-sm);
-                bottom: var(--sp-sm);
-                width: 0.25rem;
-                background-color: var(--primary-light);
-                border-radius: var(--rad-circle);
-            }
-
-            &.me:before {
-                background-color: var(--secondary-light);
-            }
-        }
-
-        // Rules for a reply on my message.
-        .reply_wrapper.me > .replies_to {
-            border-top-left-radius: var(--rad-lg) !important;
-
-            &.me {
-                background-color: var(--background-2);
-            }
-
-            &:not(.me) {
-                background-color: var(--primary-muted);
-            }
-        }
-
-        .reply_wrapper:not(.me) > .replies_to {
-            border-top-right-radius: var(--rad-lg) !important;
-            background-color: var(--background-0);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/ReplyingTo.svelte b/frontend/app/src/components_mobile/home/ReplyingTo.svelte
deleted file mode 100644
index 84d8f56678..0000000000
--- a/frontend/app/src/components_mobile/home/ReplyingTo.svelte
+++ /dev/null
@@ -1,187 +0,0 @@
-<script lang="ts">
-    import { ChatCaption, ColourVars, Column, IconButton, Row } from "component-lib";
-    import type { CreatedUser, EnhancedReplyContext, OpenChat } from "@client";
-    import { selectedChatWebhooksStore, selectedCommunityMembersStore } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import Close from "svelte-material-icons/Close.svelte";
-    import ChatMessageContent from "./ChatMessageContent.svelte";
-    import ChatMessageReplyContent from "./ChatMessageReplyContent.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        replyingTo: EnhancedReplyContext;
-        user: CreatedUser;
-        readonly: boolean;
-        timestamp?: bigint | undefined;
-        onCancelReply: () => void;
-    }
-
-    let { replyingTo, user, readonly, timestamp = undefined, onCancelReply }: Props = $props();
-
-    let me = $derived(replyingTo.sender?.userId === user?.userId);
-
-    let displayName = $derived(
-        me
-            ? client.toTitleCase($_("you"))
-            : client.getDisplayName(
-                  replyingTo.sender?.userId,
-                  $selectedCommunityMembersStore,
-                  $selectedChatWebhooksStore,
-              ),
-    );
-
-    let fillReplyCancel = $derived(
-        ["image_content", "video_content"].indexOf(replyingTo.content.kind) > -1,
-    );
-
-    // This is transitional, until we adjust replies for different content types.
-    // TODO this should be the primary way to render replying to content!
-    let hasDedicatedReplyContent = $derived(
-        [
-            "text_content",
-            "image_content",
-            "file_content",
-            "audio_content",
-            "video_content",
-            "p2p_swap_content",
-            "poll_content",
-            "video_call_content",
-            "prize_content",
-            "prize_content_initial",
-        ].indexOf(replyingTo.content.kind) > -1,
-    );
-</script>
-
-<Column
-    borderRadius={"md"}
-    padding={["xs", "xs", "zero"]}
-    minWidth={"120px"}
-    maxHeight={"10rem"}
-    width="fill"
-    gap={"zero"}>
-    <div class="replying_wrapper" class:me class:with_padding={!hasDedicatedReplyContent}>
-        <div class="cancel_reply" class:filled={fillReplyCancel}>
-            <IconButton onclick={onCancelReply} size="sm">
-                {#snippet icon(_color)}
-                    <Close color={ColourVars.textSecondary} />
-                {/snippet}
-            </IconButton>
-        </div>
-        {#if hasDedicatedReplyContent}
-            <div class="replying_content" class:me>
-                <ChatMessageReplyContent
-                    {displayName}
-                    {readonly}
-                    {timestamp}
-                    messageContext={replyingTo.sourceContext}
-                    fill={false}
-                    failed={false}
-                    blockLevelMarkdown={false}
-                    {me}
-                    intersecting={true}
-                    messageId={replyingTo.messageId}
-                    messageIndex={replyingTo.messageIndex}
-                    senderId={replyingTo.senderId}
-                    truncate
-                    edited={replyingTo.edited}
-                    content={replyingTo.content}
-                    reply
-                    draft />
-            </div>
-        {:else}
-            <Row crossAxisAlignment={"center"}>
-                <ChatCaption fontWeight={"bold"}>
-                    {displayName}
-                </ChatCaption>
-            </Row>
-            <div class="replying_content no_padding" class:me>
-                <ChatMessageContent
-                    {readonly}
-                    {timestamp}
-                    messageContext={replyingTo.sourceContext}
-                    fill={false}
-                    failed={false}
-                    blockLevelMarkdown={false}
-                    {me}
-                    intersecting={true}
-                    messageId={replyingTo.messageId}
-                    messageIndex={replyingTo.messageIndex}
-                    senderId={replyingTo.senderId}
-                    truncate
-                    edited={replyingTo.edited}
-                    content={replyingTo.content}
-                    ogPreviews={[]}
-                    reply />
-            </div>
-        {/if}
-    </div>
-</Column>
-
-<style lang="scss">
-    :global(.replying.me a) {
-        color: inherit;
-    }
-
-    :global {
-        .replying_wrapper {
-            width: 100%;
-            position: relative;
-            padding-left: var(--sp-xl);
-            background-color: var(--background-2);
-            border-radius: var(--rad-lg) var(--rad-lg) var(--rad-md) var(--rad-md);
-
-            &:before {
-                content: "";
-                display: block;
-                position: absolute;
-                width: 0.25rem;
-                left: 0.5rem;
-                top: 0.5rem;
-                bottom: 0.5rem;
-                background-color: var(--primary-light);
-                border-radius: var(--rad-circle);
-            }
-
-            &.me:before {
-                background-color: var(--secondary-light);
-            }
-
-            &.with_padding {
-                padding-top: var(--sp-sm);
-                padding-bottom: var(--sp-sm);
-            }
-        }
-
-        .cancel_reply {
-            position: absolute;
-            right: 0;
-            top: 0;
-            z-index: 1;
-
-            &.filled {
-                background-color: var(--background-2);
-                border-radius: var(--rad-circle);
-            }
-
-            &.filled > .icon_button {
-                padding: var(--sp-xxs) !important;
-            }
-        }
-
-        .replying_content {
-            pointer-events: none;
-            padding: var(--sp-sm) var(--sp-xs);
-            padding-left: 0;
-
-            &.no_padding {
-                padding: 0;
-            }
-
-            a {
-                color: inherit;
-            }
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/ReportMessage.svelte b/frontend/app/src/components_mobile/home/ReportMessage.svelte
deleted file mode 100644
index 22cc21ffce..0000000000
--- a/frontend/app/src/components_mobile/home/ReportMessage.svelte
+++ /dev/null
@@ -1,134 +0,0 @@
-<script lang="ts">
-    import {
-        BodySmall,
-        Button,
-        Column,
-        Option,
-        Row,
-        Select,
-        Sheet,
-        Subtitle,
-        Switch,
-    } from "component-lib";
-    import { iconSize, type ChatIdentifier, type OpenChat } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import Flag from "svelte-material-icons/Flag.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { toastStore } from "../../stores/toast";
-    import Setting from "../Setting.svelte";
-    import Translatable from "../Translatable.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-
-    interface Props {
-        chatId: ChatIdentifier;
-        messageId: bigint;
-        threadRootMessageIndex: number | undefined;
-        canDelete: boolean;
-        onClose: () => void;
-    }
-
-    let { chatId, messageId, threadRootMessageIndex, canDelete, onClose }: Props = $props();
-
-    const client = getContext<OpenChat>("client");
-
-    let deleteMessage = $state(false);
-    let busy = $state(false);
-    let selectedReason = $state<string>();
-    let reasons = [
-        "report.pleaseSelect",
-        "report.threat",
-        "report.child",
-        "report.nonConsensual",
-        "report.selfHarm",
-        "report.violence",
-        "report.scam",
-    ];
-
-    let valid = $derived(selectedReason !== undefined);
-
-    function createReport() {
-        report();
-        onClose();
-    }
-
-    function report() {
-        client
-            .reportMessage(chatId, threadRootMessageIndex, messageId, canDelete && deleteMessage)
-            .then((success) => {
-                if (success) {
-                    toastStore.showSuccessToast(i18nKey("report.success"));
-                } else {
-                    toastStore.showFailureToast(i18nKey("report.failure"));
-                }
-            });
-    }
-</script>
-
-<Sheet>
-    <Column gap={"xl"} padding={"xl"}>
-        <Row crossAxisAlignment={"center"} gap={"sm"}>
-            <Flag size={$iconSize} color={"var(--error)"} />
-            <Subtitle fontWeight={"bold"}
-                ><Translatable resourceKey={i18nKey("report.title")} /></Subtitle>
-        </Row>
-        <Column gap={"lg"}>
-            <Select
-                error={selectedReason === undefined}
-                placeholder={"Select a reason for your report"}
-                onSelect={(reason) => (selectedReason = reason)}
-                value={selectedReason}>
-                {#snippet subtext()}
-                    <Translatable resourceKey={i18nKey("Select a reason for your report")} />
-                {/snippet}
-                {#snippet selectedValue(reason)}
-                    <Translatable resourceKey={i18nKey(reason)} />
-                {/snippet}
-                {#snippet selectOptions(onSelect)}
-                    <Column
-                        onClick={(e) => e?.stopPropagation()}
-                        height={{ size: "100%" }}
-                        supplementalClass={"reason_options"}
-                        padding={"lg"}
-                        gap={"lg"}>
-                        {#each reasons as reason}
-                            <Option
-                                padding={"xs"}
-                                selected={false}
-                                value={reason}
-                                onClick={onSelect}>
-                                <Translatable resourceKey={i18nKey(reason)} />
-                            </Option>
-                        {/each}
-                    </Column>
-                {/snippet}
-            </Select>
-            {#if canDelete}
-                <Setting
-                    toggle={() => (deleteMessage = !deleteMessage)}
-                    info={"As well as reporting this message, you can also choose whether or not to delete it by toggling this setting."}>
-                    <Switch
-                        onChange={() => (deleteMessage = !deleteMessage)}
-                        width={"fill"}
-                        reverse
-                        checked={deleteMessage}>
-                        <Translatable resourceKey={i18nKey("Delete message")} />
-                    </Switch>
-                </Setting>
-            {/if}
-
-            <BodySmall colour={"textSecondary"}>
-                <Markdown
-                    text={$_("report.advice", {
-                        values: { rules: "https://oc.app/guidelines?section=3" },
-                    })} />
-            </BodySmall>
-        </Column>
-        <Column gap={"md"}>
-            <Button disabled={!valid} loading={busy} onClick={createReport}
-                ><Translatable resourceKey={i18nKey("report.menu")} /></Button>
-            <Button secondary onClick={onClose}
-                ><Translatable resourceKey={i18nKey("cancel")} /></Button>
-        </Column>
-    </Column>
-</Sheet>
diff --git a/frontend/app/src/components_mobile/home/ReportedMessageContent.svelte b/frontend/app/src/components_mobile/home/ReportedMessageContent.svelte
deleted file mode 100644
index d3301b4327..0000000000
--- a/frontend/app/src/components_mobile/home/ReportedMessageContent.svelte
+++ /dev/null
@@ -1,95 +0,0 @@
-<script lang="ts">
-    import { TextArea } from "component-lib";
-    import type { OpenChat, ReportedMessageContent } from "@client";
-    import { allUsersStore } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { i18nKey } from "../../i18n/i18n";
-    import Legend from "../Legend.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-
-    interface Props {
-        content: ReportedMessageContent;
-    }
-
-    let { content }: Props = $props();
-    const client = getContext<OpenChat>("client");
-
-    let index = $state(0);
-
-    let report = $derived(content.reports[index]);
-    let reasons = [
-        $_("report.threat"),
-        $_("report.child"),
-        $_("report.nonConsensual"),
-        $_("report.selfHarm"),
-        $_("report.violence"),
-        $_("report.scam"),
-        $_("report.other"),
-    ];
-    let message = $derived(
-        $_("report.messageReport", {
-            values: {
-                username:
-                    $allUsersStore.get(report.reportedBy)?.username ??
-                    `unknown user (${report.reportedBy}))`,
-                timestamp: client.toDatetimeString(new Date(report.timestamp)),
-                reason: reasons[report.reasonCode],
-            },
-        }),
-    );
-</script>
-
-<div class="report">
-    <p class="msg"><Markdown text={message} /></p>
-    {#if report.notes !== undefined && report.notes.length > 0}
-        <Legend label={i18nKey("Notes")} />
-        <TextArea disabled rows={2} bind:value={report.notes} />
-    {/if}
-</div>
-
-<div class="report-selectors">
-    {#each content.reports as r, i}
-        <div onclick={() => (index = i)} class="selector" class:selected={report === r}>
-            {i + 1}
-        </div>
-    {/each}
-</div>
-
-<div class="smallprint">
-    {$_("report.showing", {
-        values: { count: content.reports.length, total: content.total.toLocaleString() },
-    })}
-</div>
-
-<style lang="scss">
-    .report {
-        @include font(book, normal, fs-100);
-        margin-bottom: $sp4;
-    }
-    .msg {
-        margin-bottom: $sp3;
-    }
-    .smallprint {
-        color: var(--txt-light);
-        @include font-size(fs-80);
-    }
-    .report-selectors {
-        display: flex;
-        gap: $sp3;
-        margin-bottom: $sp3;
-    }
-    .selector {
-        cursor: pointer;
-        width: 26px;
-        border: 1px solid var(--bd);
-        border-radius: 50%;
-        text-align: center;
-
-        &.selected {
-            background-color: var(--accent);
-            text-shadow: 1px 1px 1px var(--accentDarker);
-            color: #ffffff;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/SelectUsers.svelte b/frontend/app/src/components_mobile/home/SelectUsers.svelte
deleted file mode 100644
index 29a65dabaf..0000000000
--- a/frontend/app/src/components_mobile/home/SelectUsers.svelte
+++ /dev/null
@@ -1,65 +0,0 @@
-<script lang="ts">
-    import { i18nKey } from "@src/i18n/i18n";
-    import { Container, UserChip } from "component-lib";
-    import type { OpenChat, UserOrUserGroup, UserSummary } from "@client";
-    import { getContext, type Snippet } from "svelte";
-    import ErrorMessage from "../ErrorMessage.svelte";
-    import FindUser from "../FindUser.svelte";
-    import Translatable from "../Translatable.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    type OnSelectUser = (user: UserSummary) => void;
-    type OnDeleteUser = (user: UserOrUserGroup) => void;
-
-    interface Props {
-        mode: "add" | "edit";
-        selectedUsers: UserSummary[];
-        enabled?: boolean;
-        userLookup: (searchTerm: string) => Promise<[UserSummary[], UserSummary[]]>;
-        onDeleteUser: OnDeleteUser;
-        onSelectUser: OnSelectUser;
-        matchingUser?: Snippet<[UserSummary, OnSelectUser]>;
-        placeholderKey?: string;
-        dmFilter?: (user: UserSummary) => boolean;
-        onClear?: () => void;
-    }
-
-    let {
-        selectedUsers,
-        userLookup,
-        onDeleteUser,
-        onSelectUser,
-        matchingUser,
-        placeholderKey,
-        dmFilter,
-    }: Props = $props();
-
-    let error: string | undefined = undefined;
-</script>
-
-{#if error !== undefined}
-    <ErrorMessage><Translatable resourceKey={i18nKey("errorSearchingForUser")} /></ErrorMessage>
-{/if}
-
-<Container direction={"vertical"} gap={"lg"}>
-    <FindUser
-        {dmFilter}
-        {matchingUser}
-        {selectedUsers}
-        {userLookup}
-        {onSelectUser}
-        {placeholderKey}>
-        {#snippet selected()}
-            {#if selectedUsers.length > 0}
-                <Container padding={["zero", "sm"]} wrap gap={"sm"} crossAxisAlignment={"center"}>
-                    {#each selectedUsers as user (user.userId)}
-                        <UserChip
-                            avatarUrl={client.userAvatarUrl(user)}
-                            onRemove={() => onDeleteUser(user)}>@{user.username}</UserChip>
-                    {/each}
-                </Container>
-            {/if}
-        {/snippet}
-    </FindUser>
-</Container>
diff --git a/frontend/app/src/components_mobile/home/SingleUserSelector.svelte b/frontend/app/src/components_mobile/home/SingleUserSelector.svelte
deleted file mode 100644
index 85a6e35e53..0000000000
--- a/frontend/app/src/components_mobile/home/SingleUserSelector.svelte
+++ /dev/null
@@ -1,88 +0,0 @@
-<script lang="ts">
-    import { interpolate } from "@src/i18n/i18n";
-    import { Container, Option, Search, Select, Subtitle } from "component-lib";
-    import { i18nKey, type UserOrUserGroup, type UserSummary } from "@client";
-    import { type Snippet } from "svelte";
-    import { _ } from "svelte-i18n";
-    import Translatable from "../Translatable.svelte";
-    import MentionPickerLogic from "./MentionPickerLogic.svelte";
-    import User from "./User.svelte";
-
-    interface Props {
-        selectedReceiver?: UserOrUserGroup | undefined;
-        placeholder?: string;
-        mentionSelf?: boolean;
-        onUserSelected?: (user: UserSummary) => void;
-        subtext?: Snippet;
-    }
-
-    let {
-        selectedReceiver = $bindable(undefined),
-        placeholder = interpolate($_, i18nKey("tokenTransfer.chooseReceiver")),
-        mentionSelf = false,
-        onUserSelected,
-        subtext,
-    }: Props = $props();
-
-    let searching = $state(false);
-    let searchTerm = $state<string>();
-
-    function selectReceiver(userOrGroup: UserOrUserGroup) {
-        selectedReceiver = userOrGroup;
-        searchTerm = undefined;
-        if (userOrGroup.kind === "user") {
-            onUserSelected?.(userOrGroup);
-        }
-    }
-</script>
-
-{#snippet match(user: UserOrUserGroup)}
-    {#if user.kind === "user"}
-        <User profile={false} {searchTerm} onClick={() => selectReceiver(user)} {user} />
-    {/if}
-{/snippet}
-
-<Select {subtext} onSelect={selectReceiver} {placeholder} value={selectedReceiver}>
-    {#snippet selectedValue(val)}
-        {#if val.kind === "user"}
-            @{val.username}
-        {/if}
-    {/snippet}
-    {#snippet selectOptions(onSelect)}
-        <MentionPickerLogic prefix={searchTerm} {mentionSelf} onMention={onSelect}>
-            {#snippet children(userOrGroupKey, mention, filtered)}
-                <Container
-                    onClick={(e) => e?.stopPropagation()}
-                    height={{ size: "100%" }}
-                    supplementalClass={"language_options"}
-                    padding={"lg"}
-                    gap={"lg"}
-                    direction={"vertical"}>
-                    <Subtitle fontWeight={"bold"}>
-                        <Translatable resourceKey={i18nKey("Select user")}></Translatable>
-                    </Subtitle>
-
-                    <Search
-                        {searching}
-                        id={"search_component"}
-                        placeholder={$_("search")}
-                        bind:value={searchTerm} />
-
-                    <Container direction={"vertical"}>
-                        {#each filtered as user (userOrGroupKey(user))}
-                            {#if user}
-                                <Option
-                                    padding={["sm", "md", "sm", "sm"]}
-                                    value={user}
-                                    onClick={mention}
-                                    selected={false}>
-                                    {@render match(user)}
-                                </Option>
-                            {/if}
-                        {/each}
-                    </Container>
-                </Container>
-            {/snippet}
-        </MentionPickerLogic>
-    {/snippet}
-</Select>
diff --git a/frontend/app/src/components_mobile/home/Stats.svelte b/frontend/app/src/components_mobile/home/Stats.svelte
deleted file mode 100644
index d7df224434..0000000000
--- a/frontend/app/src/components_mobile/home/Stats.svelte
+++ /dev/null
@@ -1,351 +0,0 @@
-<script lang="ts">
-    import { Body, BodySmall, ColourVars, Container, Subtitle } from "component-lib";
-    import type { Metrics, OpenChat } from "@client";
-    import { minutesOnlineStore } from "@client";
-    import { getContext, onMount } from "svelte";
-    import Flag from "svelte-material-icons/Flag.svelte";
-    import { cubicOut } from "svelte/easing";
-    import { Tween } from "svelte/motion";
-    import { i18nKey } from "../../i18n/i18n";
-    import Translatable from "../Translatable.svelte";
-
-    const client = getContext<OpenChat>("client");
-    interface Props {
-        stats: Metrics;
-        showReported?: boolean;
-    }
-
-    let { stats, showReported = false }: Props = $props();
-
-    const tweenOptions = {
-        duration: 600,
-        easing: cubicOut,
-    };
-    let hoveredIndex: number | undefined = $state();
-    let rendered = $state(false);
-    let previousStats: Metrics | undefined = $state(undefined);
-    let totalMessages = $state(0);
-    let textPerc = new Tween(12.5, tweenOptions);
-    let imagePerc = new Tween(12.5, tweenOptions);
-    let videoPerc = new Tween(12.5, tweenOptions);
-    let audioPerc = new Tween(12.5, tweenOptions);
-    let filePerc = new Tween(12.5, tweenOptions);
-    let pollPerc = new Tween(12.5, tweenOptions);
-    let cryptoPerc = new Tween(12.5, tweenOptions);
-    let giphyPerc = new Tween(12.5, tweenOptions);
-
-    function percToDegree(perc: number): number {
-        return (perc / 100) * 360;
-    }
-
-    onMount(() => {
-        window.setTimeout(() => (rendered = true), 600);
-    });
-
-    function slice(val: number, tween: Tween<number>) {
-        const perc = totalMessages > 0 ? (val / totalMessages) * 100 : 12.5;
-        tween.set(0, { duration: 0 });
-        tween.target = perc;
-    }
-
-    const circum = 471.24;
-
-    function sumSlice(from: number, to: number): number {
-        return percentages.slice(from, to).reduce((total, n) => total + percToDegree(n), 0);
-    }
-
-    $effect(() => {
-        if (previousStats === undefined || !client.metricsEqual(stats, previousStats)) {
-            totalMessages =
-                stats.textMessages +
-                stats.imageMessages +
-                stats.videoMessages +
-                stats.audioMessages +
-                stats.fileMessages +
-                stats.polls +
-                stats.cryptoMessages +
-                stats.giphyMessages;
-
-            slice(stats.textMessages, textPerc);
-            slice(stats.imageMessages, imagePerc);
-            slice(stats.videoMessages, videoPerc);
-            slice(stats.audioMessages, audioPerc);
-            slice(stats.fileMessages, filePerc);
-            slice(stats.polls, pollPerc);
-            slice(stats.cryptoMessages, cryptoPerc);
-            slice(stats.giphyMessages, giphyPerc);
-            previousStats = stats;
-        }
-    });
-    let percentages = $derived([
-        textPerc.current,
-        imagePerc.current,
-        videoPerc.current,
-        audioPerc.current,
-        filePerc.current,
-        pollPerc.current,
-        cryptoPerc.current,
-        giphyPerc.current,
-    ]);
-    let data = $derived([
-        {
-            cls: "text",
-            perc: textPerc.current,
-            rotate: 0,
-        },
-        {
-            cls: "image",
-            perc: imagePerc.current,
-            rotate: sumSlice(0, 1),
-        },
-        {
-            cls: "video",
-            perc: videoPerc.current,
-            rotate: sumSlice(0, 2),
-        },
-        {
-            cls: "audio",
-            perc: audioPerc.current,
-            rotate: sumSlice(0, 3),
-        },
-        {
-            cls: "file",
-            perc: filePerc.current,
-            rotate: sumSlice(0, 4),
-        },
-        {
-            cls: "poll",
-            perc: pollPerc.current,
-            rotate: sumSlice(0, 5),
-        },
-        {
-            cls: "crypto",
-            perc: cryptoPerc.current,
-            rotate: sumSlice(0, 6),
-        },
-        {
-            cls: "giphy",
-            perc: giphyPerc.current,
-            rotate: sumSlice(0, 7),
-        },
-    ]);
-</script>
-
-{#snippet mediaStat(n: number, resourceKey: string, cls?: string)}
-    <Container crossAxisAlignment={"center"} gap={"sm"}>
-        <div class={`legend ${cls} key`}></div>
-        <div class={`legend ${cls}`}>{n.toLocaleString()}</div>
-        <Body width={"hug"}>
-            <Translatable resourceKey={i18nKey(resourceKey)} />
-        </Body>
-    </Container>
-{/snippet}
-
-<Container direction={"vertical"} gap={"xxl"} crossAxisAlignment={"center"}>
-    <svg class:rendered class="pie" viewBox="0 0 320 320">
-        <clipPath id="hollow">
-            <path
-                d="M 160 160 m -160 0 a 160 160 0 1 0 320 0 a 160 160 0 1 0 -320 0 Z M 160 160 m -100 0 a 100 100 0 0 1 200 0 a 100 100 0 0 1 -200 0 Z"
-                style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);" />
-        </clipPath>
-
-        <circle class="background" cx={160} cy={160} r={150} clip-path="url(#hollow)" />
-
-        {#each data as slice, i}
-            <circle
-                role="presentation"
-                onmouseenter={(_) => (hoveredIndex = i)}
-                onmouseleave={(_) => (hoveredIndex = undefined)}
-                class={`slice ${slice.cls}`}
-                cx={160}
-                cy={160}
-                r={75}
-                clip-path="url(#hollow)"
-                stroke-dasharray={`${(slice.perc * circum) / 100} ${circum}`}
-                transform={`rotate(${-90 + slice.rotate}) ${
-                    i === hoveredIndex ? "scale(1.05)" : ""
-                }`}>
-                <title>{`${slice.perc.toFixed(2)}%`}</title>
-            </circle>
-        {/each}
-    </svg>
-
-    <Container
-        supplementalClass={"stats_online_summary"}
-        crossAxisAlignment={"center"}
-        direction={"vertical"}>
-        <Container mainAxisAlignment={"center"} gap={"xs"}>
-            <Body colour={"primary"} width={"hug"} fontWeight={"bold"}
-                >{$minutesOnlineStore.minutesOnlineThisMonth.toLocaleString()}</Body>
-            <Body width={"hug"} fontWeight={"bold"}>min</Body>
-        </Container>
-        <Body align={"center"}>
-            <Translatable resourceKey={i18nKey("online this month")}></Translatable>
-        </Body>
-        <Container mainAxisAlignment={"center"} gap={"xs"}>
-            <BodySmall colour={"textSecondary"} width={"hug"} fontWeight={"bold"}
-                >{$minutesOnlineStore.minutesOnlineLastMonth.toLocaleString()}</BodySmall>
-            <BodySmall colour={"textSecondary"} width={"hug"} fontWeight={"bold"}
-                >previous month</BodySmall>
-        </Container>
-    </Container>
-
-    <Container gap={"lg"}>
-        <Container gap={"md"} direction={"vertical"}>
-            {@render mediaStat(stats.textMessages, "stats.textMessages", "text")}
-            {@render mediaStat(stats.videoMessages, "stats.videoMessages", "video")}
-            {@render mediaStat(stats.fileMessages, "stats.fileMessages", "file")}
-            {@render mediaStat(stats.cryptoMessages, "stats.cryptoTransfers", "crypto")}
-            {@render mediaStat(stats.pollVotes, "stats.pollVotes")}
-            {@render mediaStat(stats.reactions, "stats.reactions")}
-        </Container>
-        <Container gap={"md"} direction={"vertical"}>
-            {@render mediaStat(stats.imageMessages, "stats.imageMessages", "image")}
-            {@render mediaStat(stats.audioMessages, "stats.audioMessages", "audio")}
-            {@render mediaStat(stats.polls, "stats.pollMessages", "poll")}
-            {@render mediaStat(stats.giphyMessages, "stats.giphyMessages", "giphy")}
-            {@render mediaStat(stats.replies, "stats.replies")}
-            {@render mediaStat(stats.deletedMessages, "stats.deletedMessages")}
-        </Container>
-    </Container>
-
-    {#if showReported}
-        <Container gap={"md"} direction={"vertical"}>
-            <Container crossAxisAlignment={"center"} gap={"xs"}>
-                <Flag color={ColourVars.error} />
-                <Subtitle width={"hug"} colour={"error"} fontWeight={"bold"}>
-                    <Translatable resourceKey={i18nKey("stats.reportedMessages")} />
-                </Subtitle>
-                <Subtitle width={"hug"} colour={"error"} fontWeight={"bold"}>
-                    / {stats.reportedMessages.toLocaleString()}
-                </Subtitle>
-            </Container>
-            <Body colour={"textSecondary"} align={"start"}>
-                <Translatable resourceKey={i18nKey("stats.reportedMessagesInfo")} />
-            </Body>
-        </Container>
-    {/if}
-</Container>
-
-<style lang="scss">
-    :global(.container.stats_online_summary) {
-        top: 90px; // might need to do better than this but it'll do for now
-        left: 50%;
-        transform: translateX(-50%);
-        position: absolute;
-    }
-
-    $saturation: 80%;
-    $lightness: 65%;
-
-    $video-colour: #ed5ec9;
-    $audio-colour: #a65eed;
-    $image-colour: #5eeded;
-    $file-colour: #edc95e;
-    $text-colour: #5e82ed;
-    $poll-colour: #5eed82;
-    $crypto-colour: #a6ed5e;
-    $giphy-colour: #ed5e5e;
-
-    .legend {
-        font-size: var(--typo-body-sz);
-        line-height: var(--typo-body-lh);
-    }
-
-    .slice {
-        fill: transparent;
-        transform-origin: 50% 50%;
-        stroke-width: 150px;
-        cursor: pointer;
-    }
-    .pie {
-        width: min(250px, 100%);
-        margin-bottom: $sp5;
-        &.rendered circle {
-            transition: transform 200ms ease-in-out;
-        }
-    }
-
-    .numbers {
-        text-align: left;
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        margin-bottom: $sp5;
-        row-gap: $sp3;
-    }
-
-    .background {
-        fill: transparent;
-    }
-
-    .key {
-        width: toRem(12);
-        height: toRem(12);
-        flex: 0 0 toRem(12);
-        border-radius: var(--rad-circle);
-    }
-
-    .text {
-        stroke: $text-colour;
-        color: $text-colour;
-        &.key {
-            background-color: $text-colour;
-        }
-    }
-
-    .image {
-        stroke: $image-colour;
-        color: $image-colour;
-        &.key {
-            background-color: $image-colour;
-        }
-    }
-
-    .video {
-        stroke: $video-colour;
-        color: $video-colour;
-        &.key {
-            background-color: $video-colour;
-        }
-    }
-
-    .audio {
-        stroke: $audio-colour;
-        color: $audio-colour;
-        &.key {
-            background-color: $audio-colour;
-        }
-    }
-
-    .file {
-        stroke: $file-colour;
-        color: $file-colour;
-        &.key {
-            background-color: $file-colour;
-        }
-    }
-
-    .poll {
-        stroke: $poll-colour;
-        color: $poll-colour;
-        &.key {
-            background-color: $poll-colour;
-        }
-    }
-
-    .crypto {
-        stroke: $crypto-colour;
-        color: $crypto-colour;
-        &.key {
-            background-color: $crypto-colour;
-        }
-    }
-
-    .giphy {
-        stroke: $giphy-colour;
-        color: $giphy-colour;
-        &.key {
-            background-color: $giphy-colour;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/SuspendModal.svelte b/frontend/app/src/components_mobile/home/SuspendModal.svelte
deleted file mode 100644
index 0940bf7cb6..0000000000
--- a/frontend/app/src/components_mobile/home/SuspendModal.svelte
+++ /dev/null
@@ -1,64 +0,0 @@
-<script lang="ts">
-    import { Button, Container, Sheet, Subtitle, TextArea } from "component-lib";
-    import type { OpenChat } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { i18nKey, interpolate } from "../../i18n/i18n";
-    import ErrorMessage from "../ErrorMessage.svelte";
-    import Translatable from "../Translatable.svelte";
-
-    interface Props {
-        userId: string;
-        onClose: () => void;
-    }
-
-    let { userId, onClose }: Props = $props();
-
-    const client = getContext<OpenChat>("client");
-
-    let reason: string = $state("");
-    let suspending = $state(false);
-    let showError = $state(false);
-
-    function onSuspend() {
-        suspending = true;
-        showError = false;
-        client.suspendUser(userId, reason).then((success) => {
-            if (success) {
-                onClose();
-            } else {
-                showError = true;
-            }
-            suspending = false;
-        });
-    }
-</script>
-
-<Sheet onDismiss={onClose}>
-    <Container gap={"xl"} padding={"xl"} direction={"vertical"}>
-        <Subtitle fontWeight={"bold"}>
-            <Translatable resourceKey={i18nKey("suspendedUser")} />
-        </Subtitle>
-
-        <TextArea
-            bind:value={reason}
-            minlength={3}
-            maxlength={512}
-            placeholder={interpolate($_, i18nKey("reasonForSuspension"))}>
-        </TextArea>
-
-        {#if showError}
-            <ErrorMessage
-                ><Translatable resourceKey={i18nKey("failedToSuspendUser")} /></ErrorMessage>
-        {/if}
-
-        <Container gap={"md"} direction={"vertical"}>
-            <Button onClick={onSuspend} loading={suspending}>
-                <Translatable resourceKey={i18nKey("suspend")} />
-            </Button>
-            <Button onClick={onClose} disabled={suspending} secondary>
-                <Translatable resourceKey={i18nKey("cancel")} />
-            </Button>
-        </Container>
-    </Container>
-</Sheet>
diff --git a/frontend/app/src/components_mobile/home/TextContent.svelte b/frontend/app/src/components_mobile/home/TextContent.svelte
deleted file mode 100644
index 1d33128362..0000000000
--- a/frontend/app/src/components_mobile/home/TextContent.svelte
+++ /dev/null
@@ -1,122 +0,0 @@
-<script lang="ts">
-    import Markdown from "@shared_components/Markdown.svelte";
-    import { ChatCaption, ChatText, Column } from "component-lib";
-    import type { OgPreview, RehydratedMessagePreview, TextContent } from "@client";
-    import { type Snippet } from "svelte";
-    import { lowBandwidth } from "../../stores/settings";
-    import IntersectionObserver from "./IntersectionObserver.svelte";
-    import LinkPreviews from "./LinkPreviews.svelte";
-
-    interface Props {
-        content: TextContent | Snippet;
-        me: boolean;
-        reply?: boolean;
-        blockLevelMarkdown?: boolean;
-        showPreviews?: boolean;
-        edited?: boolean;
-        truncate?: boolean;
-        maxWidth?: number;
-        // Indicates if the text content is rendered in context of a preview
-        isPreview?: boolean;
-        suppressLinks?: boolean;
-        onRemovePreview?: (url: string) => void;
-        ogPreviews?: OgPreview[];
-        messagePreviews?: RehydratedMessagePreview[];
-    }
-
-    let {
-        content,
-        me,
-        reply = false,
-        blockLevelMarkdown = false,
-        edited = false,
-        truncate = false,
-        maxWidth,
-        isPreview = false,
-        suppressLinks = false,
-        onRemovePreview,
-        ogPreviews = [],
-        messagePreviews = [],
-    }: Props = $props();
-
-    let textContent = $derived<TextContent | undefined>("kind" in content ? content : undefined);
-    let snippetContent = $derived<Snippet | undefined>("kind" in content ? undefined : content);
-
-    let text = $derived(textContent?.text);
-</script>
-
-<IntersectionObserver
-    unobserveOnIntersect={false}
-    rootMarginTop={$lowBandwidth ? 0 : 1000}
-    rootMarginBottom={$lowBandwidth ? 0 : 1000}
-    contextId="scrollable-messages-div">
-    {#snippet children(intersecting)}
-        <LinkPreviews
-            {me}
-            {ogPreviews}
-            {messagePreviews}
-            {intersecting}
-            onRemove={onRemovePreview} />
-    {/snippet}
-</IntersectionObserver>
-
-<Column
-    supplementalClass={`text_content ${truncate ? "truncated" : ""}`}
-    padding={["xs", reply ? "zero" : "sm"]}
-    overflow={"hidden"}
-    maxWidth={maxWidth ? `${maxWidth}px` : "auto"}>
-    <div class="message_text" class:me class:reply>
-        {#if text}
-            {#if isPreview}
-                <ChatCaption
-                    width={"hug"}
-                    maxLines={truncate ? 3 : undefined}
-                    colour={me ? "secondaryLight" : "primaryLight"}>
-                    <Markdown inline={!blockLevelMarkdown} {suppressLinks} {text} />
-                </ChatCaption>
-            {:else}
-                <ChatText width={"hug"} maxLines={truncate ? 3 : undefined}>
-                    <Markdown inline={!blockLevelMarkdown} {suppressLinks} {text} />
-                </ChatText>
-                <span class="metadata_spacer" class:me class:edited></span>
-            {/if}
-        {:else if snippetContent}
-            {@render snippetContent?.()}
-            <span class="metadata_spacer" class:me class:edited></span>
-        {/if}
-    </div>
-</Column>
-
-<style lang="scss">
-    .message_text {
-        line-height: 0;
-    }
-
-    .expand {
-        cursor: pointer;
-        padding: 0 $sp3;
-        border-radius: var(--rd);
-        background-color: rgba(226, 226, 226, 0.2);
-    }
-
-    .metadata_spacer {
-        display: inline-block;
-        height: 1rem;
-
-        &.me {
-            width: 3.25rem;
-
-            &.edited {
-                width: 6.5rem;
-            }
-        }
-
-        &:not(.me) {
-            width: 2.25rem;
-
-            &.edited {
-                width: 5.5rem;
-            }
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/ThreadSummary.svelte b/frontend/app/src/components_mobile/home/ThreadSummary.svelte
deleted file mode 100644
index 217c6b0050..0000000000
--- a/frontend/app/src/components_mobile/home/ThreadSummary.svelte
+++ /dev/null
@@ -1,158 +0,0 @@
-<script lang="ts">
-    import { Avatar } from "component-lib";
-    import type { ChatIdentifier, OpenChat, ThreadSummary } from "@client";
-    import { allUsersStore, messagesRead, threadsFollowedByMeStore } from "@client";
-    import { getContext, onMount } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { pop } from "../../utils/transition";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        threadSummary: ThreadSummary;
-        indent: boolean;
-        me: boolean;
-        selected: boolean;
-        url: string;
-        chatId: ChatIdentifier;
-        threadRootMessageIndex: number;
-    }
-
-    let { threadSummary, indent, me, selected, url, chatId, threadRootMessageIndex }: Props =
-        $props();
-
-    let isFollowedByMe = $derived(
-        $threadsFollowedByMeStore.get(chatId)?.has(threadRootMessageIndex) ?? false,
-    );
-    let lastMessageIndex = $derived(threadSummary.numberOfReplies - 1); //using this as a surrogate for message index for now
-    let unreadCount = $derived(
-        client.unreadThreadMessageCount(chatId, threadRootMessageIndex, lastMessageIndex),
-    );
-
-    onMount(() => {
-        return messagesRead.subscribe(() => {
-            unreadCount = client.unreadThreadMessageCount(
-                chatId,
-                threadRootMessageIndex,
-                lastMessageIndex,
-            );
-        });
-    });
-</script>
-
-<div class="thread-summary-wrapper" class:me class:indent>
-    <a href={url} class="thread-summary" class:selected>
-        <div class="thread-avatars">
-            {#each [...threadSummary.participantIds].slice(0, 5) as participantId}
-                <Avatar url={client.userAvatarUrl($allUsersStore.get(participantId))} size={"xs"} />
-            {/each}
-            {#if threadSummary.participantIds.size > 5}
-                <div class="thread-extra">
-                    {`+${threadSummary.participantIds.size - 5}`}
-                </div>
-            {/if}
-        </div>
-        <div class="thread-legend">
-            <span
-                >{$_("thread.nreplies", {
-                    values: {
-                        number: threadSummary.numberOfReplies.toString(),
-                        replies:
-                            threadSummary.numberOfReplies === 1
-                                ? $_("thread.reply")
-                                : $_("thread.replies"),
-                        message: "",
-                    },
-                })}
-                <div class:selected class="arrow">&#8595;</div></span>
-        </div>
-    </a>
-    {#if isFollowedByMe && unreadCount > 0}
-        <div
-            in:pop={{ duration: 1500 }}
-            title={$_("chatSummary.unread", { values: { count: unreadCount.toString() } })}
-            class="unread-count">
-            {unreadCount > 999 ? "999+" : unreadCount}
-        </div>
-    {/if}
-</div>
-
-<style lang="scss">
-    $avatar-width-mob: 43px;
-
-    .unread-count {
-        @include unread();
-    }
-
-    .thread-summary-wrapper {
-        display: flex;
-        justify-content: flex-start;
-        flex-wrap: wrap;
-        align-items: center;
-        gap: $sp3;
-        margin-bottom: $sp2;
-
-        &.me {
-            justify-content: flex-end;
-        }
-
-        &.indent {
-            margin-left: $avatar-width-mob;
-        }
-    }
-
-    .arrow {
-        transition: transform 200ms ease-in-out;
-        display: inline-block;
-        transform-origin: 50% 50%;
-
-        &.selected {
-            transform: rotate(-90deg);
-        }
-    }
-
-    .thread-summary {
-        display: inline-flex;
-        align-items: center;
-        gap: $sp2;
-        padding: $sp2 $sp3;
-        border-radius: $sp3;
-        cursor: pointer;
-        transition: background 200ms ease-in-out;
-        border: 1px solid var(--bd);
-        color: var(--currentChat-msg-txt);
-
-        @media (hover: hover) {
-            &:not(.selected):hover {
-                background: rgba(255, 255, 255, 0.1);
-            }
-        }
-
-        &.selected {
-            background: var(--notificationBar-bg);
-            color: var(--notificationBar-txt);
-            border: 1px solid transparent;
-        }
-
-        .thread-avatars {
-            display: flex;
-            gap: $sp2;
-        }
-
-        .thread-legend {
-            @include font(book, normal, fs-80);
-            margin-left: $sp2;
-        }
-
-        .thread-extra {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            border-radius: 50%;
-            width: toRem(25);
-            height: toRem(25);
-            @include font-size(fs-60);
-            background-color: rgba(0, 0, 0, 0.15);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/ThrottleCountdown.svelte b/frontend/app/src/components_mobile/home/ThrottleCountdown.svelte
deleted file mode 100644
index 2cc1e54bcd..0000000000
--- a/frontend/app/src/components_mobile/home/ThrottleCountdown.svelte
+++ /dev/null
@@ -1,60 +0,0 @@
-<script lang="ts">
-    import Progress from "../Progress.svelte";
-    import DisappearsAt from "./DisappearsAt.svelte";
-    import Translatable from "../Translatable.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { now500 } from "../../stores/time";
-    import { throttleDeadline } from "@client";
-    import { untrack } from "svelte";
-
-    interface Props {
-        deadline: number;
-    }
-
-    let { deadline }: Props = $props();
-
-    let seconds = $state(0);
-    let percent = $state(0);
-
-    $effect(() => {
-        calculate(deadline, $now500);
-    });
-
-    function calculate(deadline: number, now: number) {
-        untrack(() => {
-            seconds = Math.floor((deadline - now) / 1000);
-            percent = Math.floor((seconds / 60) * 100);
-            if (deadline <= $now500) {
-                throttleDeadline.set(0);
-            }
-        });
-    }
-</script>
-
-<div class="throttle">
-    <Progress size={"20px"} {percent}>
-        <div class="msg">
-            <DisappearsAt me={true} percentageExpired={percent} expiresAt={deadline} />
-            <Translatable resourceKey={i18nKey("throttleMessage", { time: seconds })} />
-        </div>
-    </Progress>
-</div>
-
-<style lang="scss">
-    :global(.throttle .bar) {
-        height: 40px;
-    }
-
-    .throttle {
-        padding: 0;
-        width: 100%;
-
-        .msg {
-            display: flex;
-            gap: $sp3;
-            align-items: center;
-            justify-content: center;
-            width: 100%;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/TipBuilder.svelte b/frontend/app/src/components_mobile/home/TipBuilder.svelte
deleted file mode 100644
index 1f8c449f69..0000000000
--- a/frontend/app/src/components_mobile/home/TipBuilder.svelte
+++ /dev/null
@@ -1,316 +0,0 @@
-<script lang="ts">
-    import {
-        Body,
-        BodySmall,
-        Button,
-        ColourVars,
-        Column,
-        Row,
-        Sheet,
-        StatusCard,
-    } from "component-lib";
-    import type {
-        Message,
-        MessageContext,
-        OpenChat,
-        PendingCryptocurrencyTransfer,
-    } from "@client";
-    import {
-        enhancedCryptoLookup as cryptoLookup,
-        currentUserIdStore,
-        exchangeRatesLookupStore as exchangeRatesLookup,
-        lastCryptoSent,
-    } from "@client";
-    import { getContext, onMount } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { quadOut } from "svelte/easing";
-    import { Tween } from "svelte/motion";
-    import { fade } from "svelte/transition";
-    import { i18nKey } from "../../i18n/i18n";
-    import { pinNumberErrorMessageStore } from "../../stores/pinNumber";
-    import { toastStore } from "../../stores/toast";
-    import ErrorMessage from "../ErrorMessage.svelte";
-    import Translatable from "../Translatable.svelte";
-    import AccountInfo from "./AccountInfo.svelte";
-    import CryptoSelector from "./CryptoSelector.svelte";
-    import TipButton from "./TipButton.svelte";
-    import TokenInput from "./TokenInput.svelte";
-    import { TokenState } from "./wallet/walletState.svelte";
-
-    const client = getContext<OpenChat>("client");
-    const increments: Increment[] = [1, 10, 100];
-    type Increment = 1 | 10 | 100;
-
-    interface Props {
-        ledger: string;
-        msg: Message;
-        messageContext: MessageContext;
-        onClose: () => void;
-    }
-
-    let { ledger = $bindable(), msg, messageContext, onClose }: Props = $props();
-
-    const tweenOptions = {
-        duration: 800,
-        easing: quadOut,
-    };
-
-    let error: string | undefined = $state(undefined);
-    let toppingUp = $state(false);
-    let tokenChanging = $state(true);
-    let dollar = $state<HTMLElement | undefined>();
-    let dollarTop = new Tween(-1000, tweenOptions);
-    let dollarOpacity = new Tween(0, tweenOptions);
-    let dollarScale = new Tween(0, tweenOptions);
-    let centAmount = $state(0);
-    let showCustomTip = $state(false);
-    let validAmount: boolean = $state(false);
-
-    onMount(() => {
-        let d = document.getElementById("tip-dollar");
-        if (!d) {
-            d = document.createElement("div");
-            d.id = "tip-dollar";
-            d.className = "tip-dollar";
-            const t = document.createTextNode("🤑");
-            d.appendChild(t);
-            document.body.appendChild(d);
-        }
-        dollar = d;
-    });
-
-    function amountLabel(n: Increment): string {
-        return `$${(n / 100).toFixed(2)}`;
-    }
-
-    function calculateCentAmount(e8s: bigint, exchangeRate: number): number {
-        const tokens = Number(e8s) / Math.pow(10, tokenDetails.decimals);
-        const dollar = tokens * exchangeRate;
-        const cents = dollar * 100;
-        return Math.round(cents);
-    }
-
-    function to2SigFigs(num: number): number {
-        return parseFloat(num.toPrecision(2));
-    }
-
-    function calculateAmount(centAmount: number, exchangeRate: number): bigint {
-        const e8s = ((centAmount / 100) * Math.pow(10, tokenDetails.decimals)) / exchangeRate;
-        return BigInt(Math.round(e8s));
-    }
-
-    function cancel() {
-        toppingUp = false;
-        onClose();
-    }
-
-    function onBalanceRefreshFinished() {
-        toppingUp = false;
-        tokenChanging = false;
-    }
-
-    function bounceMoneyMouthFrom(target: HTMLElement) {
-        if (!dollar) return;
-        const buttonRect = target.getBoundingClientRect();
-        const hDiff = buttonRect.height - dollar.clientHeight;
-        const wDiff = buttonRect.width - dollar.clientWidth;
-        const top = buttonRect.top + hDiff / 2;
-        const left = buttonRect.left + wDiff / 2;
-
-        Promise.all([
-            dollarTop.set(top, { duration: 0 }),
-            dollarOpacity.set(1, { duration: 0 }),
-            dollarScale.set(0, { duration: 0 }),
-        ]).then(() => {
-            dollarTop.target = top - 300;
-            dollarOpacity.target = 0;
-            dollarScale.target = 2;
-            dollarOpacity.set(0);
-        });
-        dollar.style.left = `${left}px`;
-    }
-
-    function clickAmount(e: MouseEvent, increment: Increment) {
-        e.preventDefault();
-        bounceMoneyMouthFrom(e.target as HTMLElement);
-        centAmount += increment;
-        tokenState.draftAmount = calculateAmount(centAmount, exchangeRate);
-    }
-
-    function send(e: Event) {
-        e.preventDefault();
-        const transfer: PendingCryptocurrencyTransfer = {
-            kind: "pending",
-            ledger,
-            token: tokenDetails.symbol,
-            recipient: msg.sender,
-            amountE8s: tokenState.draftAmount,
-            feeE8s: tokenDetails.transferFee,
-            createdAtNanos: BigInt(Date.now()) * 1_000_000n,
-        };
-        lastCryptoSent.set(ledger);
-
-        const currentTip = (msg.tips[transfer.ledger] ?? {})[$currentUserIdStore] ?? 0n;
-
-        client.tipMessage(messageContext, msg.messageId, transfer, currentTip).then((resp) => {
-            if (resp.kind === "failure") {
-                toastStore.showFailureToast(i18nKey("tip.failure"));
-            } else if (resp.kind !== "success") {
-                toastStore.showFailureToast(pinNumberErrorMessageStore);
-            } else if (resp.kind === "success") {
-                client.refreshAccountBalance(ledger, false);
-            }
-        });
-
-        onClose();
-    }
-    let tokenDetails = $derived($cryptoLookup.get(ledger)!);
-    let tokenState = $derived.by(() => {
-        const s = new TokenState(tokenDetails);
-        s.refreshBalance(client).then(onBalanceRefreshFinished);
-        return s;
-    });
-    let exchangeRate = $derived(
-        to2SigFigs($exchangeRatesLookup.get(tokenDetails.symbol.toLowerCase())?.toUSD ?? 0),
-    );
-    $effect(() => {
-        if (ledger !== undefined) {
-            // reset when ledger changes
-            centAmount = 0;
-            tokenChanging = true;
-            tokenState.draftAmount = 0n;
-        }
-    });
-    let displayDraftAmount = $derived(
-        client.formatTokens(tokenState.draftAmount, tokenDetails.decimals),
-    );
-    let displayFee = $derived(client.formatTokens(tokenDetails.transferFee, tokenDetails.decimals));
-    let valid = $derived(
-        tokenState.draftAmount > 0n &&
-            tokenState.remainingBalance >= 0n &&
-            error === undefined &&
-            !tokenChanging,
-    );
-    let zero = $derived(tokenState.cryptoBalance <= tokenDetails.transferFee && !tokenChanging);
-    $effect(() => {
-        centAmount = calculateCentAmount(tokenState.draftAmount, exchangeRate);
-    });
-    $effect(() => {
-        if (dollar) {
-            dollar.style.setProperty("top", `${dollarTop.current}px`);
-            dollar.style.setProperty("opacity", `${dollarOpacity.current}`);
-            dollar.style.setProperty(
-                "transform",
-                `scale(${dollarScale.current}) rotate(${dollarScale.current}turn)`,
-            );
-        }
-    });
-</script>
-
-<Sheet onDismiss={onClose}>
-    <Column gap={"xl"} padding={["xl", "lg"]}>
-        <CryptoSelector showRefresh draftAmount={tokenState.draftAmount} bind:ledger />
-        {#if zero || toppingUp}
-            <AccountInfo background={ColourVars.background0} {ledger} />
-            {#if zero}
-                <StatusCard
-                    background={ColourVars.background0}
-                    mode={"warning"}
-                    title={"Insufficient funds"}>
-                    {#snippet body()}
-                        <Column gap={"sm"}>
-                            <Translatable
-                                resourceKey={i18nKey("tokenTransfer.zeroBalance", {
-                                    token: tokenDetails.symbol,
-                                })} />
-                            <Translatable resourceKey={i18nKey("tokenTransfer.makeDeposit")} />
-                        </Column>
-                    {/snippet}
-                </StatusCard>
-            {/if}
-        {:else}
-            {#if exchangeRate > 0}
-                <Row overflow={"visible"} mainAxisAlignment={"spaceAround"}>
-                    {#each increments as increment}
-                        <TipButton
-                            label={i18nKey(amountLabel(increment))}
-                            onClick={(e) => clickAmount(e, increment)}
-                            disabled={exchangeRate === 0 ||
-                                calculateAmount(centAmount + increment, exchangeRate) >
-                                    tokenState.cryptoBalance - tokenDetails.transferFee} />
-                    {/each}
-                </Row>
-                {#if tokenState.draftAmount > 0}
-                    <Row crossAxisAlignment={"center"} mainAxisAlignment={"center"} gap={"md"}>
-                        <Body fontWeight={"bold"} width={"hug"}>
-                            ${(centAmount / 100).toFixed(2)}
-                        </Body>
-                        <div class="separator"></div>
-                        <Body fontWeight={"bold"} width={"hug"}>
-                            {displayDraftAmount}
-                            {tokenDetails.symbol}
-                        </Body>
-                        <div class="separator"></div>
-                        <BodySmall colour={"textSecondary"} fontWeight={"bold"} width={"hug"}>
-                            <Translatable
-                                resourceKey={i18nKey("tip.plusFee", {
-                                    fee: displayFee,
-                                    token: tokenDetails.symbol,
-                                })} />
-                        </BodySmall>
-                    </Row>
-                {:else}
-                    <BodySmall align={"center"} colour={"textSecondary"}>
-                        <Translatable resourceKey={i18nKey("tip.advice")} />
-                    </BodySmall>
-                {/if}
-            {/if}
-
-            {#if !showCustomTip && exchangeRate > 0}
-                <Row
-                    mainAxisAlignment={"center"}
-                    crossAxisAlignment={"center"}
-                    onClick={() => (showCustomTip = true)}>
-                    <Body width={"hug"} colour={"secondary"}>
-                        <Translatable resourceKey={i18nKey("tip.showCustom")} />
-                    </Body>
-                </Row>
-            {/if}
-
-            {#if showCustomTip || exchangeRate <= 0}
-                <div in:fade|local={{ duration: 500 }} class="custom-tip-amount">
-                    <TokenInput
-                        balance={tokenState.cryptoBalance}
-                        {ledger}
-                        bind:valid={validAmount}
-                        maxAmount={tokenState.maxAmount}
-                        bind:amount={tokenState.draftAmount} />
-                </div>
-            {/if}
-            {#if error !== undefined}
-                <div class="error">
-                    <ErrorMessage>{$_(error)}</ErrorMessage>
-                </div>
-            {/if}
-        {/if}
-        <Column gap={"md"}>
-            <Button disabled={!valid} onClick={send}
-                ><Translatable resourceKey={i18nKey("tokenTransfer.send")} /></Button>
-            <Button secondary onClick={cancel}
-                ><Translatable resourceKey={i18nKey("cancel")} /></Button>
-        </Column>
-    </Column>
-</Sheet>
-
-<style lang="scss">
-    .custom-tip-amount {
-        width: 100%;
-    }
-
-    .separator {
-        width: 2px;
-        height: 100%;
-        border-radius: var(--rad-circle);
-        background-color: var(--text-secondary);
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/TipButton.svelte b/frontend/app/src/components_mobile/home/TipButton.svelte
deleted file mode 100644
index ac6973ca93..0000000000
--- a/frontend/app/src/components_mobile/home/TipButton.svelte
+++ /dev/null
@@ -1,63 +0,0 @@
-<script lang="ts">
-    import type { ResourceKey } from "@client";
-    import { spring } from "svelte/motion";
-    import Translatable from "../Translatable.svelte";
-
-    interface Props {
-        disabled?: boolean;
-        label: ResourceKey;
-        onClick: (e: MouseEvent) => void;
-    }
-
-    let { disabled = false, label, onClick }: Props = $props();
-
-    let buttonScale = spring(1);
-
-    function mouseDown() {
-        buttonScale.set(1.1);
-        window.setTimeout(() => buttonScale.set(1), 200);
-    }
-</script>
-
-<button
-    style={`transform: scale(${$buttonScale})`}
-    onmousedown={mouseDown}
-    {disabled}
-    onclick={onClick}
-    class="amount">
-    <Translatable resourceKey={label} />
-</button>
-
-<style lang="scss">
-    .amount {
-        $size: 100px;
-        border-radius: $sp3;
-        padding: $sp4;
-        border: 1px solid var(--bd);
-        transition:
-            background 250ms ease-in-out,
-            color 250ms ease-in-out;
-        text-align: center;
-        cursor: pointer;
-        height: $size;
-        width: $size;
-        border-radius: 50%;
-        display: grid;
-        align-content: center;
-        background: transparent;
-        color: var(--button-txt);
-        background: var(--button-bg);
-        position: relative;
-        &:hover {
-            background: var(--button-hv);
-        }
-
-        @include font(book, normal, fs-120);
-
-        &:disabled {
-            background: transparent;
-            color: var(--txt-light);
-            cursor: not-allowed;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/TokenInput.svelte b/frontend/app/src/components_mobile/home/TokenInput.svelte
deleted file mode 100644
index 83f40f0675..0000000000
--- a/frontend/app/src/components_mobile/home/TokenInput.svelte
+++ /dev/null
@@ -1,142 +0,0 @@
-<script lang="ts">
-    import { BodySmall, Chip, Container, NumberInput, Row } from "component-lib";
-    import { enhancedCryptoLookup as cryptoLookup, type OpenChat } from "@client";
-    import { getContext, untrack, type Snippet } from "svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import Translatable from "../Translatable.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        balance?: bigint;
-        amount?: bigint;
-        minAmount?: bigint;
-        maxAmount?: bigint | undefined;
-        ledger: string;
-        valid?: boolean;
-        status?: "ok" | "zero" | "too_low" | "too_high";
-        subtext?: Snippet;
-        error?: boolean;
-        disabled?: boolean;
-        icon?: Snippet;
-        converted?: string;
-        placeholder?: string;
-        descriptionKey?: string;
-    }
-
-    let {
-        balance,
-        amount = $bindable(BigInt(0)),
-        minAmount = BigInt(0),
-        maxAmount = undefined,
-        ledger,
-        subtext,
-        valid = $bindable(false),
-        status = $bindable("zero"),
-        error = false,
-        converted,
-        icon,
-        disabled = false,
-        placeholder = "Withdrawal amount",
-        descriptionKey,
-    }: Props = $props();
-
-    let tokenDetails = $derived($cryptoLookup.get(ledger)!);
-    let tokenDecimals = $derived(tokenDetails?.decimals ?? 0);
-    let displayValue = $state(toDisplayValue(amount));
-
-    $effect(() => {
-        const validateResult = client.validateTokenInput(displayValue, tokenDecimals);
-        // Avoid unnecessary updates!
-        if (validateResult.amount !== amount) {
-            amount = validateResult.amount;
-        }
-
-        validate();
-    });
-
-    // Re-validate whenever minAmount, maxAmount, or balance changes
-    // TODO shouldn't maxAmount and balance be the same ??
-    $effect(() => {
-        if (minAmount || maxAmount || balance) {
-            validate();
-        }
-    });
-
-    function validate() {
-        untrack(() => {
-            if (amount === BigInt(0)) {
-                status = "zero";
-            } else if (amount < minAmount) {
-                status = "too_low";
-            } else if (maxAmount !== undefined && amount > maxAmount) {
-                status = "too_high";
-            } else {
-                status = "ok";
-            }
-            valid = status === "ok";
-        });
-    }
-
-    function setAmountPct(percentage: number) {
-        const pctValue = BigInt(Math.floor(Number(balance) * (percentage / 100)));
-        const pctValueWithFee = pctValue + tokenDetails.transferFee;
-
-        // Update display value, this will run $effect which will set the amount!
-        // We either set an actual percentage value if the value with fee is less
-        // than balance, or we reduce the pct for the fee amount.
-        displayValue = toDisplayValue(
-            balance && pctValueWithFee <= balance ? pctValue : pctValue - tokenDetails.transferFee,
-        );
-
-        validate();
-    }
-
-    function toDisplayValue(val: bigint): string {
-        if (val <= BigInt(0)) return "";
-        return (Number(val) / 10 ** tokenDecimals).toString();
-    }
-</script>
-
-{#snippet percentage(perc: number)}
-    <Chip fill mode={"rounded"} onClick={() => setAmountPct(perc)}>
-        {`${perc}%`}
-    </Chip>
-{/snippet}
-
-<!-- TODO i18n -->
-<Container direction="vertical" width="fill" gap="xs">
-    <NumberInput
-        bind:value={displayValue}
-        {disabled}
-        {icon}
-        {subtext}
-        {placeholder}
-        error={error && amount > 0}
-        unitText={tokenDetails.symbol + (converted ? ` // ${converted}` : ``)}
-        maxDecimals={tokenDecimals}
-        min={Number(minAmount) / Math.pow(10, tokenDecimals)}
-        max={maxAmount !== undefined
-            ? Number(maxAmount) / Math.pow(10, tokenDecimals)
-            : undefined} />
-
-    {#if balance}
-        <Container direction="vertical" padding={["zero", "sm"]}>
-            <Row mainAxisAlignment={"spaceBetween"} gap={"sm"}>
-                {@render percentage(25)}
-                {@render percentage(50)}
-                {@render percentage(75)}
-                {@render percentage(100)}
-            </Row>
-            {#if descriptionKey !== undefined}
-                <Row padding={["zero", "xs"]} gap="md">
-                    <BodySmall colour="textSecondary">
-                        <Translatable resourceKey={i18nKey(descriptionKey)} />
-                    </BodySmall>
-                    <!-- TODO converted should be a part of the input? -->
-                    <!-- {@render converted?.()} -->
-                </Row>
-            {/if}
-        </Container>
-    {/if}
-</Container>
diff --git a/frontend/app/src/components_mobile/home/TruncatedAccount.svelte b/frontend/app/src/components_mobile/home/TruncatedAccount.svelte
deleted file mode 100644
index 40cd5960b5..0000000000
--- a/frontend/app/src/components_mobile/home/TruncatedAccount.svelte
+++ /dev/null
@@ -1,53 +0,0 @@
-<script lang="ts">
-    import { Subtitle, ColourVars, Container, IconButton } from "component-lib";
-    import type { Snippet } from "svelte";
-    import ContentCopy from "svelte-material-icons/ContentCopy.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { toastStore } from "../../stores/toast";
-    import { copyToClipboard } from "../../utils/urls";
-
-    interface Props {
-        account: string;
-        disableCopy?: boolean;
-        children?: Snippet;
-    }
-
-    let { account, disableCopy = false, children }: Props = $props();
-
-    function collapseAccount(account: string) {
-        if (account.length > 23) {
-            return account.slice(0, 10) + "..." + account.slice(account.length - 10);
-        }
-        return account;
-    }
-
-    function copy() {
-        copyToClipboard(account).then((success) => {
-            if (success) {
-                toastStore.showSuccessToast(i18nKey("accountCopiedToClipboard"));
-            } else {
-                toastStore.showFailureToast(
-                    i18nKey("failedToCopyToClipboard", {
-                        account,
-                    }),
-                );
-            }
-        });
-    }
-</script>
-
-<Container crossAxisAlignment={"center"} gap={"md"}>
-    <Container direction="vertical" gap="xs">
-        {@render children?.()}
-        <Subtitle colour={"textPrimary"} fontWeight={"bold"}>
-            {collapseAccount(account)}
-        </Subtitle>
-    </Container>
-    {#if !disableCopy}
-        <IconButton padding={"zero"} onclick={copy}>
-            {#snippet icon()}
-                <ContentCopy color={ColourVars.primary} />
-            {/snippet}
-        </IconButton>
-    {/if}
-</Container>
diff --git a/frontend/app/src/components_mobile/home/UnresolvedReply.svelte b/frontend/app/src/components_mobile/home/UnresolvedReply.svelte
deleted file mode 100644
index 2d7e04812a..0000000000
--- a/frontend/app/src/components_mobile/home/UnresolvedReply.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<svelte:options immutable />
-
-<script lang="ts">
-    import { i18nKey } from "../../i18n/i18n";
-    import Translatable from "../Translatable.svelte";
-    import { BodySmall, ColourVars, Row } from "component-lib";
-    import AlertCircleOutline from "svelte-material-icons/AlertCircleOutline.svelte";
-</script>
-
-<!-- TODO RTL layout -->
-<Row
-    supplementalClass="reply_wrapper"
-    gap="sm"
-    padding="sm"
-    crossAxisAlignment="center"
-    mainAxisAlignment="center"
-    borderColour={ColourVars.primaryMuted}>
-    <BodySmall italic={true} colour={"primaryLight"} width="hug">
-        <Translatable resourceKey={i18nKey("unresolvedReply")} />
-    </BodySmall>
-    <AlertCircleOutline size="1rem" color={ColourVars.primaryLight} />
-</Row>
diff --git a/frontend/app/src/components_mobile/home/User.svelte b/frontend/app/src/components_mobile/home/User.svelte
deleted file mode 100644
index d394ab326b..0000000000
--- a/frontend/app/src/components_mobile/home/User.svelte
+++ /dev/null
@@ -1,139 +0,0 @@
-<script lang="ts">
-    import type { ProfileLinkClickedEvent } from "@webcomponents/profileLink";
-    import {
-        Avatar,
-        BodySmall,
-        Caption,
-        ColourVars,
-        Container,
-        IconButton,
-        MenuTrigger,
-    } from "component-lib";
-    import type { OpenChat } from "@client";
-    import {
-        ROLE_ADMIN,
-        ROLE_MEMBER,
-        ROLE_MODERATOR,
-        ROLE_NONE,
-        ROLE_OWNER,
-        roleAsText,
-        selectedChatWebhooksStore,
-        selectedCommunityMembersStore,
-    } from "@client";
-    import type { MemberRole, UserSummary } from "@shared";
-    import { getContext, type Snippet } from "svelte";
-    import DotsVertical from "svelte-material-icons/DotsVertical.svelte";
-    import FilteredUsername from "@shared_components/FilteredUsername.svelte";
-    import Badges from "./profile/Badges.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        user: UserSummary;
-        me?: boolean;
-        searchTerm?: string;
-        role?: MemberRole;
-        profile?: boolean;
-        children?: Snippet;
-        onClick?: () => void;
-        action?: Snippet;
-    }
-
-    let {
-        user,
-        me = false,
-        searchTerm = "",
-        role = ROLE_NONE,
-        profile = true,
-        children,
-        onClick,
-        action,
-    }: Props = $props();
-
-    // if search term is !== "", split the username into three parts [prefix, match, postfix]
-
-    let displayName = $derived(
-        client.getDisplayName(
-            user.userId,
-            $selectedCommunityMembersStore,
-            $selectedChatWebhooksStore,
-        ),
-    );
-
-    function click(ev?: MouseEvent) {
-        if (profile) {
-            ev?.target?.dispatchEvent(
-                new CustomEvent<ProfileLinkClickedEvent>("profile-clicked", {
-                    detail: {
-                        userId: user.userId,
-                        chatButton: !me,
-                        inGlobalContext: false,
-                    },
-                    bubbles: true,
-                }),
-            );
-        }
-
-        onClick?.();
-    }
-
-    function getRoleColour() {
-        switch (role) {
-            case ROLE_OWNER:
-                return ColourVars.primary;
-            case ROLE_ADMIN:
-                return ColourVars.secondary;
-            case ROLE_MODERATOR:
-                return ColourVars.warning;
-            default:
-                return ColourVars.primary;
-        }
-    }
-</script>
-
-{#snippet role_label()}
-    {#if role > ROLE_MEMBER}
-        <Container
-            width={"hug"}
-            borderRadius={"sm"}
-            padding={["zero", "xs"]}
-            background={getRoleColour()}>
-            <Caption colour={"textOnPrimary"} fontWeight={"bold"}>{roleAsText(role)}</Caption>
-        </Container>
-    {/if}
-{/snippet}
-
-<Container onClick={click} crossAxisAlignment={"center"} gap={"md"}>
-    <Avatar url={client.userAvatarUrl(user)} size={"md"} />
-    <Container gap={"xxs"} direction={"vertical"} width={"fill"}>
-        <Container crossAxisAlignment={"center"} gap={"xs"}>
-            <FilteredUsername {searchTerm} username={displayName} {me} />
-            <Badges
-                uniquePerson={user.isUniquePerson}
-                diamondStatus={user.diamondStatus}
-                streak={user.streak}
-                chitEarned={user.totalChitEarned} />
-        </Container>
-        <Container crossAxisAlignment={"center"} gap={"sm"}>
-            <BodySmall width={"hug"} colour={"textSecondary"}>
-                @{user.username}
-            </BodySmall>
-            {@render role_label()}
-        </Container>
-    </Container>
-    {#if action}
-        {@render action()}
-    {/if}
-    {#if children}
-        <MenuTrigger position={"bottom"} align={"end"}>
-            <IconButton padding={["sm", "xs", "sm", "zero"]} size={"md"}>
-                {#snippet icon(color)}
-                    <DotsVertical {color} />
-                {/snippet}
-            </IconButton>
-            {#snippet menuItems()}
-                {@render children()}
-            {/snippet}
-        </MenuTrigger>
-    {/if}
-</Container>
diff --git a/frontend/app/src/components_mobile/home/UserReferralCardContent.svelte b/frontend/app/src/components_mobile/home/UserReferralCardContent.svelte
deleted file mode 100644
index b0a0d6c2dd..0000000000
--- a/frontend/app/src/components_mobile/home/UserReferralCardContent.svelte
+++ /dev/null
@@ -1,46 +0,0 @@
-<script lang="ts">
-    import { currentUserIdStore, OpenChat } from "@client";
-    import { getContext } from "svelte";
-    import CopyIcon from "svelte-material-icons/ContentCopy.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { toastStore } from "../../stores/toast";
-    import QRCode from "../QRCode.svelte";
-    import Translatable from "../Translatable.svelte";
-
-    const client = getContext<OpenChat>("client");
-    let link = `${client.canonicalOrigin()}/?ref=${$currentUserIdStore}`;
-
-    function onCopy() {
-        navigator.clipboard.writeText(link).then(
-            () => toastStore.showSuccessToast(i18nKey("linkCopiedToClipboard")),
-            () => toastStore.showFailureToast(i18nKey("failedToCopyLinkToClipboard")),
-        );
-    }
-</script>
-
-<div class="container">
-    <div on:click={onCopy} class="link">
-        <div><Translatable resourceKey={i18nKey("tapForReferralLink")} /></div>
-        <CopyIcon size={"1em"} color={"var(--icon-txt)"} />
-    </div>
-    <QRCode text={link} size="larger" fullWidthOnMobile />
-</div>
-
-<style lang="scss">
-    .link {
-        display: flex;
-        gap: $sp2;
-        align-items: center;
-        cursor: pointer;
-    }
-
-    .link {
-        color: var(--link-underline);
-    }
-
-    .container {
-        display: flex;
-        flex-direction: column;
-        gap: $sp4;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/VideoCallContent.svelte b/frontend/app/src/components_mobile/home/VideoCallContent.svelte
deleted file mode 100644
index f96f98e025..0000000000
--- a/frontend/app/src/components_mobile/home/VideoCallContent.svelte
+++ /dev/null
@@ -1,242 +0,0 @@
-<script lang="ts">
-    import {
-        Avatar,
-        Column,
-        Body,
-        BodySmall,
-        Button,
-        ChatCaption,
-        Row,
-        ColourVars,
-    } from "component-lib";
-    import {
-        OpenChat,
-        allUsersStore,
-        chatIdentifiersEqual,
-        currentUserIdStore,
-        publish,
-        selectedChatSummaryStore,
-        type VideoCallContent,
-    } from "@client";
-    import { getContext, type Snippet } from "svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { activeVideoCall } from "../../stores/video";
-    import Translatable from "../Translatable.svelte";
-    import Video from "svelte-material-icons/VideoOutline.svelte";
-    import PhoneJoin from "svelte-material-icons/PhoneInTalkOutline.svelte";
-    import PhoneRemove from "svelte-material-icons/PhoneRemoveOutline.svelte";
-    import Clock from "svelte-material-icons/ClockOutline.svelte";
-    import Participants from "svelte-material-icons/AccountMultipleOutline.svelte";
-    import { now500 } from "@stores/time";
-    import MessageRenderer from "./MessageRenderer.svelte";
-
-    const client = getContext<OpenChat>("client");
-    const DISPLAYED_PARTICIPANTS = 4;
-
-    interface Props {
-        content: VideoCallContent;
-        messageIndex: number;
-        timestamp: bigint | undefined;
-        senderId: string;
-        me: boolean;
-        title?: Snippet;
-        reply?: boolean;
-    }
-
-    let { content, messageIndex, timestamp, me, title, reply = false }: Props = $props();
-
-    let inCall = $derived(
-        $activeVideoCall !== undefined &&
-            $selectedChatSummaryStore !== undefined &&
-            $selectedChatSummaryStore.videoCallInProgress?.messageIndex === messageIndex &&
-            chatIdentifiersEqual($activeVideoCall.chatId, $selectedChatSummaryStore?.id),
-    );
-    let endedDate = $derived(content.ended ? new Date(Number(content.ended)) : undefined);
-    let finished = $derived(endedDate !== undefined);
-    let missed = $derived(
-        content.ended &&
-            content.participants.find((p) => p.userId === $currentUserIdStore) === undefined,
-    );
-
-    let duration = $derived.by(() => {
-        if (timestamp === undefined) return;
-
-        const elapsed = content.ended
-            ? Number(content.ended - timestamp)
-            : Number(BigInt($now500) - timestamp);
-
-        return client.formatDuration(elapsed);
-    });
-
-    let callTitle = $derived.by(() => {
-        if (!finished) {
-            if (content.callType === "broadcast") {
-                return "videoCall.startedBroadcast";
-            }
-
-            return "videoCall.started";
-        } else {
-            if (missed) {
-                return "videoCall.missedCall";
-            }
-
-            if (content.callType === "broadcast") {
-                return "videoCall.broadcastEnded";
-            }
-
-            return "videoCall.ended";
-        }
-    });
-
-    function joinCall() {
-        if (!inCall && $selectedChatSummaryStore?.videoCallInProgress) {
-            publish("startVideoCall", {
-                chatId: $selectedChatSummaryStore.id,
-                callType: $selectedChatSummaryStore.videoCallInProgress.callType,
-                join: true,
-            });
-        }
-    }
-
-    function leaveCall() {
-        if (inCall) {
-            activeVideoCall.endCall();
-        }
-    }
-</script>
-
-{#snippet replyView()}
-    <Row gap="sm" minWidth="12rem">
-        <Column width="fill" gap="xxs" padding={["xs", "zero"]}>
-            {@render title?.()}
-            <Row gap="xs" crossAxisAlignment="center">
-                <Video
-                    color={me ? ColourVars.secondaryLight : ColourVars.primaryLight}
-                    size="1.25rem" />
-                <ChatCaption colour={me ? "secondaryLight" : "primaryLight"}>
-                    <Translatable
-                        resourceKey={i18nKey(
-                            `videoCall.${content.callType === "broadcast" ? "broadcastType" : "defaultType"}`,
-                        )} />
-                </ChatCaption>
-            </Row>
-        </Column>
-    </Row>
-{/snippet}
-
-{#snippet regularView()}
-    <Column gap={"sm"} padding={["zero", "zero", "xl"]} minWidth="60vw">
-        <Column
-            padding={me ? "xs" : "zero"}
-            borderRadius={["lg", "lg", "md", "md"]}
-            backgroundColor={ColourVars.background2}>
-            <!-- Details -->
-            <Column gap="xs">
-                <!-- Title -->
-                <Column gap="xxs" padding={["xxs", "sm"]}>
-                    <Row gap="xs" crossAxisAlignment="center">
-                        <Video size="1.5rem" />
-                        <ChatCaption fontWeight="semi-bold" width="hug">
-                            <!-- TODO i18n -->
-                            <Translatable resourceKey={i18nKey(callTitle)} />
-                        </ChatCaption>
-                    </Row>
-                    <Row gap="sm" padding="xxs">
-                        <Row width="hug" gap="xs" crossAxisAlignment="center">
-                            <Participants size="1rem" color={ColourVars.textSecondary} />
-                            <BodySmall colour="textSecondary">
-                                {content.participants.length}
-                            </BodySmall>
-                        </Row>
-                        {#if duration !== undefined}
-                            <Row width="hug" gap="xs" crossAxisAlignment="center">
-                                <Clock size="1rem" color={ColourVars.textSecondary} />
-                                <BodySmall colour="textSecondary">
-                                    {duration}
-                                </BodySmall>
-                            </Row>
-                        {/if}
-                    </Row>
-                </Column>
-
-                <!-- Participants -->
-                <Row
-                    supplementalClass="vc_participants"
-                    gap="xs"
-                    padding={["sm", "md"]}
-                    borderRadius="md"
-                    crossAxisAlignment="center"
-                    backgroundColor={ColourVars.background0}>
-                    {#each [...content.participants].slice(0, DISPLAYED_PARTICIPANTS) as participantId}
-                        <Avatar
-                            url={client.userAvatarUrl($allUsersStore.get(participantId.userId))}
-                            size={"md"} />
-                    {/each}
-                    {#if content.participants.length > DISPLAYED_PARTICIPANTS}
-                        <div class="extra">
-                            <Body align="center">
-                                {`+${content.participants.length - DISPLAYED_PARTICIPANTS}`}
-                            </Body>
-                        </div>
-                    {/if}
-                </Row>
-
-                <!-- Buttons! -->
-                {#if inCall}
-                    <Button disabled={finished} onClick={leaveCall}>
-                        {#snippet icon(color)}
-                            <PhoneRemove {color} />
-                        {/snippet}
-                        <Translatable
-                            resourceKey={i18nKey(
-                                content.ended ? "videoCall.ended" : "videoCall.leave",
-                            )} />
-                    </Button>
-                {:else}
-                    <Button disabled={finished} onClick={joinCall}>
-                        {#snippet icon(color)}
-                            {#if !finished}
-                                <PhoneJoin {color} />
-                            {/if}
-                        {/snippet}
-                        <Column mainAxisAlignment={"center"} crossAxisAlignment={"center"}>
-                            <Body width={"hug"} fontWeight={"bold"} colour={"textOnPrimary"}>
-                                <Translatable
-                                    resourceKey={endedDate
-                                        ? i18nKey("videoCall.endedAt", {
-                                              time: client.toShortTimeString(endedDate),
-                                          })
-                                        : i18nKey("videoCall.join")} />
-                            </Body>
-                        </Column>
-                    </Button>
-                {/if}
-            </Column>
-        </Column>
-    </Column>
-{/snippet}
-
-<MessageRenderer {replyView} {regularView} {me} {reply} />
-
-<style lang="scss">
-    :global {
-        .vc_participants > * {
-            border: var(--bw-thick) solid var(--background-0);
-
-            &:not(:first-child) {
-                margin-left: -1rem;
-            }
-        }
-
-        .extra {
-            z-index: 1;
-            width: 2.5rem;
-            height: 2.5rem;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border-radius: var(--rad-circle);
-            background-color: var(--background-2);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/VideoContent.svelte b/frontend/app/src/components_mobile/home/VideoContent.svelte
deleted file mode 100644
index f9956b9446..0000000000
--- a/frontend/app/src/components_mobile/home/VideoContent.svelte
+++ /dev/null
@@ -1,310 +0,0 @@
-<script lang="ts">
-    import { i18nKey } from "@src/i18n/i18n";
-    import { ChatCaption, ChatFootnote, ColourVars, Column, Row } from "component-lib";
-    import type { VideoContent } from "@client";
-    import { publish } from "@client";
-    import { type Snippet } from "svelte";
-    import PlayCircleOutline from "svelte-material-icons/PlayCircleOutline.svelte";
-    import VideoOutline from "svelte-material-icons/VideoOutline.svelte";
-    import { rtlStore } from "../../stores/rtl";
-    import {
-        getProxyAdjustedBlobUrl,
-        getVideoDuration,
-        reservedMediaStyle,
-        setPlayingMedia,
-    } from "../../utils/media";
-    import Translatable from "../Translatable.svelte";
-    import MessageRenderer from "./MessageRenderer.svelte";
-
-    const MIN_VIDEO_WIDTH = 180;
-
-    interface Props {
-        content: VideoContent;
-        contentWidth?: number;
-        title?: Snippet;
-        fill: boolean;
-        me: boolean;
-        reply?: boolean;
-        draft?: boolean;
-        height?: number | undefined;
-        edited: boolean;
-        blockLevelMarkdown?: boolean;
-        isPreview?: boolean;
-        onRemove?: () => void;
-    }
-
-    let {
-        content,
-        contentWidth = $bindable(),
-        title,
-        fill,
-        me,
-        reply = false,
-        draft = false,
-        height = undefined,
-        edited,
-        blockLevelMarkdown = false,
-        isPreview = false,
-        onRemove,
-    }: Props = $props();
-
-    let videoPlayer: HTMLVideoElement | undefined = $state();
-    let landscape = $derived(content.height < content.width);
-    let imageUrl = $derived(getProxyAdjustedBlobUrl(content.imageData.blobUrl));
-    let videoUrl = $derived(getProxyAdjustedBlobUrl(content.videoData.blobUrl));
-    let videoDuration = $state<string>();
-    let ratio = $derived(content.width / content.height);
-    let posterHeight = $derived(draft || reply ? 70 : (height ?? 400));
-    // mirrors reservedMediaStyle's width formula (used for the caption cap;
-    // the container clamp is applied by CSS)
-    let posterWidth = $derived(
-        draft || reply
-            ? posterHeight * ratio
-            : Math.min(Math.max(200, content.width), 400 * ratio),
-    );
-
-    $effect(() => {
-        contentWidth = posterWidth;
-    });
-    $effect(() => {
-        if (videoUrl && videoDuration === undefined) {
-            getVideoDuration(videoUrl).then((duration) => {
-                videoDuration = formatDuration(Math.round(duration));
-            });
-        }
-    });
-
-    function formatDuration(duration: number): string {
-        if (duration === undefined) return "--:--";
-
-        const pad = (val: number) => `${val < 10 ? "0" : ""}${val}`;
-        const mins = Math.floor(duration / 60);
-        const secs = duration % 60;
-        return `${pad(mins)}:${pad(secs)}`;
-    }
-
-    function onPlayDraftPreview() {
-        if (videoPlayer) {
-            setPlayingMedia(videoPlayer);
-        }
-    }
-
-    function playVideo() {
-        publish("playVideo", content);
-    }
-</script>
-
-<!-- Reply to a video-->
-{#snippet replyView(textContent?: Snippet)}
-    <Row gap="sm">
-        <Column width="fill" gap="xxs" padding={textContent ? "zero" : ["xs", "zero"]}>
-            {@render title?.()}
-            {#if textContent}
-                {@render textContent()}
-            {:else}
-                <Row gap="xs" crossAxisAlignment="center">
-                    <VideoOutline
-                        color={me ? ColourVars.secondaryLight : ColourVars.primaryLight}
-                        size="1.25rem" />
-                    <ChatCaption colour={me ? "secondaryLight" : "primaryLight"}>
-                        <Translatable resourceKey={i18nKey("Video")} />
-                    </ChatCaption>
-                </Row>
-            {/if}
-        </Column>
-
-        <Column supplementalClass="reply_image_preview" width="hug" height="fill">
-            <div class="img" style="background-image:url({imageUrl});"></div>
-            <div class="play_icon">
-                <PlayCircleOutline class="play" size="1.25rem" color={ColourVars.textPrimary} />
-            </div>
-        </Column>
-    </Row>
-{/snippet}
-
-<!-- Message draft of a video -->
-{#snippet draftView()}
-    <Column width={"fill"}>
-        <div class="video_draft">
-            <div class="video_wrapper" class:rtl={$rtlStore}>
-                <video
-                    preload="none"
-                    poster={content.imageData.blobUrl}
-                    class:landscape
-                    class="video"
-                    style={height === undefined ? undefined : `height: ${height}px`}
-                    controls
-                    onplay={onPlayDraftPreview}
-                    bind:this={videoPlayer}>
-                    <track kind="captions" />
-                    {#if content.videoData.blobUrl}
-                        <source src={content.videoData.blobUrl} />
-                    {/if}
-                </video>
-            </div>
-        </div>
-    </Column>
-{/snippet}
-
-<!-- Rendered video message -->
-{#snippet regularView(textContent?: Snippet)}
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <!-- svelte-ignore a11y_interactive_supports_focus -->
-    <div role="button" class="video_regular" class:reply class:rtl={$rtlStore} onclick={playVideo}>
-        <img
-            alt="..."
-            class="preview_img"
-            class:landscape
-            class:fill
-            class:me
-            src={imageUrl}
-            style={height !== undefined
-                ? `height: ${height}px`
-                : (reservedMediaStyle(content.width, content.height) ??
-                  `height: ${posterHeight}px; width: ${MIN_VIDEO_WIDTH}px`)} />
-
-        <div class="play_icon">
-            <PlayCircleOutline class="play" size="3rem" color={ColourVars.textPrimary} />
-        </div>
-
-        <div class="duration">
-            <VideoOutline size="1rem" color={ColourVars.textPrimary} />
-            <ChatFootnote>{videoDuration ?? "--:--"}</ChatFootnote>
-        </div>
-    </div>
-    {@render textContent?.()}
-{/snippet}
-
-<MessageRenderer
-    {replyView}
-    {draftView}
-    {regularView}
-    caption={content.caption}
-    maxCaptionWidth={!reply && !draft ? posterWidth : undefined}
-    {me}
-    {reply}
-    {draft}
-    {edited}
-    {blockLevelMarkdown}
-    {isPreview}
-    {onRemove} />
-
-<style lang="scss">
-    .video_regular {
-        display: flex;
-        position: relative;
-
-        .preview_img {
-            width: 100%;
-            background-color: black;
-            border-radius: var(--rad-lg) var(--rad-lg) var(--rad-md) var(--rad-md);
-
-            &.me {
-                border-top-right-radius: var(--rad-sm);
-
-                &.fill {
-                    border-bottom-left-radius: var(--rad-lg);
-                    border-bottom-right-radius: var(--rad-lg);
-                }
-            }
-
-            &:not(.me) {
-                border-top-left-radius: var(--rad-sm);
-
-                &:not(.fill) {
-                    border-bottom-right-radius: var(--rad-md);
-                    border-bottom-left-radius: var(--rad-md);
-                }
-            }
-
-            &:not(.landscape) {
-                min-height: 6rem;
-                min-width: 0;
-            }
-        }
-
-        .play_icon {
-            padding: var(--sp-md);
-        }
-
-        .duration {
-            position: absolute;
-            bottom: var(--sp-xxs);
-            left: var(--sp-sm);
-            display: flex;
-            gap: var(--sp-xs);
-            align-items: center;
-            height: 0.75rem;
-        }
-    }
-
-    .video_draft {
-        width: 100%;
-        padding: var(--sp-xs);
-        animation: grow-height 300ms ease-out forwards;
-        will-change: max-height, opacity;
-
-        .video_wrapper {
-            min-height: 4rem;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            padding: var(--sp-xs);
-            background-color: var(--background-0);
-            border-radius: var(--rad-lg) var(--rad-lg) var(--rad-lg) var(--rad-lg);
-        }
-
-        .video {
-            display: flex;
-            width: 100%;
-            max-height: 14rem;
-            overflow: hidden;
-            border-radius: var(--rad-md);
-        }
-    }
-
-    :global {
-        .video_regular .play_icon,
-        .reply_image_preview .play_icon {
-            position: absolute;
-            display: flex;
-            top: 50%;
-            left: 50%;
-            border-radius: var(--rad-circle);
-            transform: translate(-50%, -50%);
-            // background: rgba(50, 50, 50, 0.5);
-            background: radial-gradient(
-                circle,
-                rgba(50, 50, 50, 0.75) 0%,
-                rgba(50, 50, 50, 0.5) 50%,
-                rgba(50, 50, 50, 0) 75%
-            );
-        }
-
-        .video_regular {
-            // Same CSS is set for message metadata
-            .duration {
-                text-shadow: 0 0 0.125rem var(--backdrop);
-
-                path {
-                    filter: drop-shadow(0 0 0.125rem var(--background-0));
-                }
-            }
-        }
-
-        .reply_image_preview {
-            position: relative;
-            height: -webkit-fill-available;
-
-            .img {
-                width: 4rem;
-                min-height: 3rem;
-                height: 100%;
-                background-size: cover;
-                background-position: top;
-                border-radius: var(--rad-sm);
-                filter: contrast(1.1) brightness(1.05) saturate(1.1);
-            }
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/VisibilityLabel.svelte b/frontend/app/src/components_mobile/home/VisibilityLabel.svelte
deleted file mode 100644
index d88e14e0cf..0000000000
--- a/frontend/app/src/components_mobile/home/VisibilityLabel.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script lang="ts">
-    import { ColourVars, Container } from "component-lib";
-    import { i18nKey } from "../../i18n/i18n";
-    import Translatable from "../Translatable.svelte";
-    import LockOutline from "svelte-material-icons/LockOutline.svelte";
-
-    interface Props {
-        isPublic: boolean;
-    }
-
-    let { isPublic }: Props = $props();
-</script>
-
-{#if !isPublic}
-    <Container gap={"xs"} width={"hug"} supplementalClass="visibility-indicator">
-        <Container gap={"xs"} crossAxisAlignment={"center"}>
-            <LockOutline color={ColourVars.error} />
-            <Translatable resourceKey={i18nKey(isPublic ? "access.public" : "access.private")} />
-        </Container>
-        //
-    </Container>
-{/if}
-
-<style lang="scss">
-    :global {
-        .visibility-indicator {
-            text-transform: lowercase;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/access/AccessGateCheckFailed.svelte b/frontend/app/src/components_mobile/home/access/AccessGateCheckFailed.svelte
deleted file mode 100644
index 8a89f788d0..0000000000
--- a/frontend/app/src/components_mobile/home/access/AccessGateCheckFailed.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script lang="ts">
-    import { ColourVars, Column, CommonButton, Row, StatusCard } from "component-lib";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Translatable from "../../Translatable.svelte";
-
-    interface Props {
-        onClose: () => void;
-    }
-
-    let { onClose }: Props = $props();
-
-    /**
-     * TODO - ideally we would tell them which access gate was failed. And the response from the back end *does*
-     * tell us the gate check fail reason, but it seems to be giving us the wrong reason at the moment. e.g.
-     * When I select a token balance gate from an "any" composite gate, it reports back that it failed because
-     * I'm not diamond.
-     */
-</script>
-
-<Column gap={"xl"} padding={"xl"}>
-    <StatusCard
-        mode={"warning"}
-        background={ColourVars.background2}
-        title={"Access gate check failed"}>
-        {#snippet body()}
-            <Translatable
-                resourceKey={i18nKey(
-                    "We have been unable to verify that you meet the required access gates to join this chat. Please double check and try again.",
-                )} />
-        {/snippet}
-    </StatusCard>
-
-    <Row mainAxisAlignment={"end"}>
-        <CommonButton width={"hug"} mode={"active"} onClick={onClose} size={"small_text"}>
-            <Translatable resourceKey={i18nKey("close")} />
-        </CommonButton>
-    </Row>
-</Column>
diff --git a/frontend/app/src/components_mobile/home/access/AccessGateEvaluator.svelte b/frontend/app/src/components_mobile/home/access/AccessGateEvaluator.svelte
deleted file mode 100644
index 59f52752a7..0000000000
--- a/frontend/app/src/components_mobile/home/access/AccessGateEvaluator.svelte
+++ /dev/null
@@ -1,344 +0,0 @@
-<script lang="ts">
-    import {
-        cryptoBalanceStore,
-        currentUserStore,
-        isBalanceGate,
-        isCompositeGate,
-        isDiamondGate,
-        isLeafGate,
-        isLifetimeDiamondGate,
-        isNeuronGate,
-        isPaymentGate,
-        isUniquePersonGate,
-        publish,
-        type EnhancedAccessGate,
-        type EnhancedLeafGate,
-        type LeafGate,
-        type TokenBalanceGate,
-    } from "@client";
-    import { i18nKey } from "../../../i18n/i18n";
-
-    import MulticolourText from "@src/components_mobile/MulticolourText.svelte";
-    import { accessApprovalState } from "@src/utils/preview.svelte";
-    import {
-        Body,
-        BodySmall,
-        Button,
-        ColourVars,
-        Column,
-        CommonButton,
-        H2,
-        Row,
-        transition,
-    } from "component-lib";
-    import { onMount } from "svelte";
-    import ShieldStar from "svelte-material-icons/ShieldStarOutline.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
-    import AccessGateExpiry from "./AccessGateExpiry.svelte";
-    import AccessGateSummary from "./AccessGateSummary.svelte";
-    import BalanceGateEvaluator from "./BalanceGateEvaluator.svelte";
-    import DiamondGateEvaluator from "./DiamondGateEvaluator.svelte";
-    import NeuronGateEvaluator from "./NeuronGateEvaluator.svelte";
-    import PaymentGateEvaluator from "./PaymentGateEvaluator.svelte";
-    import UniqueHumanGateEvaluator from "./UniqueHumanGateEvaluator.svelte";
-
-    type SatisfiedLeafGate = EnhancedLeafGate & {
-        satisfied: boolean;
-        satisfiable: boolean;
-        originalIndex: number;
-    };
-
-    interface Props {
-        gate: EnhancedAccessGate;
-        onClose: () => void;
-        onComplete: () => void;
-    }
-
-    let { gate, onClose, onComplete }: Props = $props();
-
-    onMount(() => {
-        return cryptoBalanceStore.subscribe((_) => {
-            refreshBalanceGates();
-        });
-    });
-
-    let flattenedGates = $state<SatisfiedLeafGate[]>(normaliseGates(gate));
-
-    let sortedGates = $derived(flattenedGates.toSorted(orderBySatisfied));
-
-    function orderBySatisfied(a: SatisfiedLeafGate, b: SatisfiedLeafGate): number {
-        if (a.satisfied && b.satisfied) return 0;
-        return a.satisfied ? -1 : 1;
-    }
-
-    let currentGateIndex = $state(-1);
-    let satisfiedGates = $derived(sortedGates.filter((g) => g.satisfied).length);
-    let compositeOr = $derived(isCompositeGate(gate) && gate.operator === "or");
-    let complete = $derived(
-        compositeOr ? satisfiedGates >= 1 : satisfiedGates === sortedGates.length,
-    );
-    let evaluatingGate = $derived<SatisfiedLeafGate>(sortedGates[currentGateIndex]);
-
-    function normaliseGates(gate: EnhancedAccessGate): SatisfiedLeafGate[] {
-        if (isCompositeGate(gate)) {
-            // Keep originalIndex before filtering so compositeGateIndex still maps to the real gate.
-            // Unique person (DecideAI) verification is suspended - hide it from the join flow.
-            return gate.gates
-                .map((l, i) => ({
-                    ...l,
-                    level: gate.level,
-                    collectionName: gate.collectionName,
-                    expiry: gate.expiry,
-                    satisfied: doesUserMeetLeafGate(l),
-                    satisfiable: false,
-                    originalIndex: i,
-                }))
-                .filter((g) => !isUniquePersonGate(g));
-        }
-        if (isLeafGate(gate)) {
-            if (isUniquePersonGate(gate)) return [];
-            return [
-                {
-                    ...gate,
-                    satisfied: doesUserMeetLeafGate(gate),
-                    satisfiable: false,
-                    originalIndex: 0,
-                },
-            ];
-        }
-        return [];
-    }
-
-    function doesUserMeetLeafGate(gate: LeafGate): boolean {
-        if (gate.kind === "diamond_gate") {
-            return $currentUserStore.diamondStatus.kind !== "inactive";
-        } else if (gate.kind === "lifetime_diamond_gate") {
-            return $currentUserStore.diamondStatus.kind === "lifetime";
-        } else if (gate.kind === "unique_person_gate") {
-            return $currentUserStore.isUniquePerson;
-        } else if (gate.kind === "chit_earned_gate") {
-            return $currentUserStore.totalChitEarned >= gate.minEarned;
-        } else if (gate.kind === "token_balance_gate") {
-            return doesUserMeetBalanceGate(gate);
-        } else {
-            return false;
-        }
-    }
-
-    function doesUserMeetBalanceGate(gate: TokenBalanceGate): boolean {
-        const balance = $cryptoBalanceStore.get(gate.ledgerCanister) ?? 0n;
-        const liveBalance = accessApprovalState.balanceAfterCurrentCommitments(
-            gate.ledgerCanister,
-            balance,
-        );
-        return liveBalance >= gate.minBalance;
-    }
-
-    function selectGate(idx: number) {
-        transition(["fade"], () => {
-            currentGateIndex = idx;
-        });
-    }
-
-    function cancelGate() {
-        transition(["fade"], () => {
-            currentGateIndex = -1;
-        });
-    }
-
-    function refreshBalanceGates() {
-        flattenedGates = flattenedGates.map((g) => {
-            if (g.kind === "token_balance_gate") {
-                g.satisfied = doesUserMeetBalanceGate(g);
-            }
-            return g;
-        });
-    }
-
-    function confirmNeuronGate() {
-        if (evaluatingGate !== undefined) {
-            evaluatingGate.satisfied = true;
-            onBack();
-        }
-    }
-
-    function onApprovePayment({
-        ledger,
-        amount,
-        approvalFee,
-    }: {
-        ledger: string;
-        amount: bigint;
-        approvalFee: bigint;
-    }) {
-        // TODO problem is that topping up a token can cause gates to be spontaneously satisfied
-        // This is not accounted for an it's difficult to account for.
-        if (evaluatingGate !== undefined) {
-            accessApprovalState.addPaymentApproval({ ledger, amount, approvalFee });
-            evaluatingGate.satisfied = true;
-            refreshBalanceGates();
-            onBack();
-        }
-    }
-
-    function credentialReceived(cred: string) {
-        if (evaluatingGate !== undefined) {
-            evaluatingGate.satisfied = true;
-            accessApprovalState.addCredential(cred);
-            refreshBalanceGates();
-            onBack();
-        }
-    }
-
-    function onBack() {
-        if (evaluatingGate !== undefined) {
-            selectGate(-1);
-        } else {
-            publish("closeModalPage");
-        }
-    }
-
-    function handleComplete() {
-        if (compositeOr) {
-            // Use originalIndex so the backend still maps to the real gate after filtering.
-            const satisfied = flattenedGates.find((g) => g.satisfied);
-            if (satisfied !== undefined) {
-                accessApprovalState.setCompositeGateIndex(satisfied.originalIndex);
-            }
-        }
-        onComplete();
-    }
-</script>
-
-<SlidingPageContent
-    {onBack}
-    title={i18nKey("joinGroup", undefined, gate.level)}
-    subtitle={i18nKey(gate.collectionName)}>
-    <Column gap={"xl"} padding={"xl"}>
-        {#if evaluatingGate !== undefined}
-            {#if isUniquePersonGate(evaluatingGate)}
-                <UniqueHumanGateEvaluator
-                    onCredentialReceived={credentialReceived}
-                    {onClose}
-                    expiry={evaluatingGate.expiry}
-                    level={evaluatingGate.level} />
-            {:else if isPaymentGate(evaluatingGate)}
-                <PaymentGateEvaluator
-                    gate={evaluatingGate}
-                    level={evaluatingGate.level}
-                    {onApprovePayment}
-                    onClose={cancelGate} />
-            {:else if isNeuronGate(evaluatingGate)}
-                <NeuronGateEvaluator
-                    gate={evaluatingGate}
-                    onClose={cancelGate}
-                    onApprove={confirmNeuronGate} />
-            {:else if isBalanceGate(evaluatingGate)}
-                <BalanceGateEvaluator gate={evaluatingGate} onClose={cancelGate} />
-            {:else if isLifetimeDiamondGate(evaluatingGate)}
-                <DiamondGateEvaluator
-                    onCancel={cancelGate}
-                    lifetime
-                    onCredentialReceived={credentialReceived} />
-            {:else if isDiamondGate(evaluatingGate)}
-                <DiamondGateEvaluator
-                    onCancel={cancelGate}
-                    lifetime={false}
-                    onCredentialReceived={credentialReceived} />
-            {/if}
-        {:else}
-            <Column gap={"lg"}>
-                <ShieldStar size={"4.5rem"} color={ColourVars.primary} />
-                <H2 fontWeight={"bold"}>
-                    <MulticolourText
-                        parts={[
-                            {
-                                text: i18nKey("Join the "),
-                                colour: "textPrimary",
-                            },
-                            {
-                                text: i18nKey(gate.collectionName + " "),
-                                colour: "primary",
-                            },
-                            {
-                                text: i18nKey(gate.level),
-                                colour: "textPrimary",
-                            },
-                        ]} />
-                </H2>
-                <Row wrap>
-                    {#if isCompositeGate(gate)}
-                        {@const or = gate.operator === "or"}
-                        <Body width={"hug"}>
-                            {#if or}
-                                <MulticolourText
-                                    parts={[
-                                        {
-                                            text: i18nKey("To join you will need to satisfy "),
-                                            colour: "textSecondary",
-                                        },
-                                        {
-                                            text: i18nKey("at least one access gate."),
-                                            colour: "secondary",
-                                        },
-                                    ]} />
-                            {:else}
-                                <MulticolourText
-                                    parts={[
-                                        {
-                                            text: i18nKey("To join you will need to satisfy "),
-                                            colour: "textSecondary",
-                                        },
-                                        {
-                                            text: i18nKey("ALL access gates."),
-                                            colour: "warning",
-                                        },
-                                    ]} />
-                            {/if}
-                        </Body>
-                    {/if}
-                    <Body width={"hug"} colour={"textSecondary"}>
-                        <AccessGateExpiry expiry={gate.expiry} />
-                    </Body>
-                </Row>
-            </Column>
-            <Column gap={"md"}>
-                {#each sortedGates as subgate, i}
-                    <AccessGateSummary
-                        satisfied={subgate.satisfied}
-                        onClick={() => selectGate(i)}
-                        gate={subgate} />
-                {/each}
-            </Column>
-
-            {#if isCompositeGate(gate)}
-                <BodySmall align={"center"} fontWeight={"bold"}>
-                    <MulticolourText
-                        parts={[
-                            {
-                                text: i18nKey("You current satisfy "),
-                                colour: "textSecondary",
-                            },
-                            {
-                                text: i18nKey(`${satisfiedGates} out of ${sortedGates.length}`),
-                                colour: "primary",
-                            },
-                            {
-                                text: i18nKey(" gates."),
-                                colour: "textSecondary",
-                            },
-                        ]} />
-                </BodySmall>
-            {/if}
-            <Column crossAxisAlignment={"center"} gap={"md"}>
-                <Button disabled={!complete} onClick={handleComplete}>
-                    <Translatable resourceKey={i18nKey("Join")} />
-                </Button>
-                <CommonButton onClick={onClose} width={"hug"} mode={"active"} size={"small_text"}>
-                    <Translatable resourceKey={i18nKey("cancel")} />
-                </CommonButton>
-            </Column>
-        {/if}
-    </Column>
-</SlidingPageContent>
diff --git a/frontend/app/src/components_mobile/home/access/AccessGateExpiry.svelte b/frontend/app/src/components_mobile/home/access/AccessGateExpiry.svelte
deleted file mode 100644
index ea81b72c17..0000000000
--- a/frontend/app/src/components_mobile/home/access/AccessGateExpiry.svelte
+++ /dev/null
@@ -1,50 +0,0 @@
-<script lang="ts">
-    import { type OpenChat } from "@client";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Translatable from "../../Translatable.svelte";
-    import { getContext } from "svelte";
-    import { msToDays, msToHours, msToMinutes } from "../../../utils/time";
-
-    type DurationData = {
-        total: number;
-        days: number;
-        hours: number;
-        minutes: number;
-        seconds: number;
-    };
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        expiry: bigint | undefined;
-    }
-
-    let { expiry }: Props = $props();
-
-    function formatDuration(duration: DurationData | undefined): string | undefined {
-        if (duration === undefined) return undefined;
-
-        // TODO - pluralisation & i18n
-        if (duration.days > 0) {
-            return `${msToDays(duration.total)} days`;
-        }
-
-        if (duration.hours > 0) {
-            return `${msToHours(duration.total)} hours`;
-        }
-
-        // TODO - pluralisation & i18n
-        if (duration.minutes > 0) {
-            return `${msToMinutes(duration.total)} minutes`;
-        }
-    }
-    let duration = $derived(expiry ? client.durationFromMilliseconds(Number(expiry)) : undefined);
-    let durationString = $derived(formatDuration(duration));
-</script>
-
-{#if durationString !== undefined}
-    <Translatable
-        resourceKey={i18nKey("access.evaluationIntervalSummary", {
-            interval: durationString,
-        })} />
-{/if}
diff --git a/frontend/app/src/components_mobile/home/access/AccessGateSummary.svelte b/frontend/app/src/components_mobile/home/access/AccessGateSummary.svelte
deleted file mode 100644
index 02e404e98d..0000000000
--- a/frontend/app/src/components_mobile/home/access/AccessGateSummary.svelte
+++ /dev/null
@@ -1,250 +0,0 @@
-<script lang="ts">
-    import { i18nKey } from "@src/i18n/i18n";
-    import { disableCryptoPaymentsFeature } from "@src/utils/features";
-    import { accessApprovalState } from "@src/utils/preview.svelte";
-    import {
-        Avatar,
-        Body,
-        BodySmall,
-        Caption,
-        ColourVars,
-        Column,
-        MenuItem,
-        MenuTrigger,
-        Row,
-    } from "component-lib";
-    import {
-        type CryptocurrencyDetails,
-        currentUserStore,
-        enhancedCryptoLookup,
-        type LeafGate,
-        type NeuronGate,
-        OpenChat,
-    } from "@client";
-    import { getContext } from "svelte";
-    import AccountCheck from "svelte-material-icons/AccountCheckOutline.svelte";
-    import Diamond from "svelte-material-icons/DiamondOutline.svelte";
-    import Lifetime from "svelte-material-icons/DiamondStone.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import AccessGateText from "../access_gates/AccessGateText.svelte";
-    import { TokenState } from "../wallet/walletState.svelte";
-    import AccessGateBox from "./AccessGateBox.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        gate: LeafGate;
-        satisfied: boolean;
-        onClick: (g: LeafGate) => void;
-    }
-
-    const restrictedMsg = i18nKey(
-        "Unfortunately access gates of this type cannot be met from the native app",
-    );
-    let { gate, onClick, satisfied }: Props = $props();
-    let token = $derived(client.getTokenDetailsForAccessGate(gate));
-    let tokenState = $derived.by(() => {
-        switch (gate.kind) {
-            case "token_balance_gate":
-            case "payment_gate":
-                return new TokenState($enhancedCryptoLookup.get(gate.ledgerCanister)!, "usd");
-            default:
-                return undefined;
-        }
-    });
-
-    function neuronGateSubtext(gate: NeuronGate): string | undefined {
-        const dissolveDelayDays = client.getMinDissolveDelayDays(gate);
-        const minStake = client.getMinStakeInTokens(gate);
-        const parts: string[] = [];
-        if (dissolveDelayDays !== undefined) {
-            parts.push(`${dissolveDelayDays}d dissolve delay`);
-        }
-        if (minStake !== undefined) {
-            parts.push(`${minStake} token stake`);
-        }
-        return parts.join(" / ");
-    }
-</script>
-
-{#snippet booleanGate(restricted: boolean, Icon: any, title: string, subtitle?: string)}
-    <AccessGateBox {satisfied} satisfiable onClick={restricted ? undefined : () => onClick(gate)}>
-        <Row mainAxisAlignment={"center"} width={{ size: "2.5rem" }}>
-            <Icon color={ColourVars.warning} size={"1.5rem"} />
-        </Row>
-        <Column>
-            <Body fontWeight="bold" colour={"textPrimary"}>
-                <Translatable resourceKey={i18nKey(title)} />
-            </Body>
-            {#if subtitle !== undefined}
-                <Caption colour={restricted ? "error" : "textSecondary"}>
-                    {#if restricted}
-                        <Translatable resourceKey={restrictedMsg} />
-                    {:else}
-                        <Translatable resourceKey={i18nKey(subtitle)} />
-                    {/if}
-                </Caption>
-            {/if}
-        </Column>
-    </AccessGateBox>
-{/snippet}
-
-{#snippet neuronGate(gate: NeuronGate, token: CryptocurrencyDetails)}
-    {@const subtext = neuronGateSubtext(gate)}
-    <AccessGateBox {satisfied} satisfiable onClick={() => onClick(gate)}>
-        <Avatar url={token.logo} />
-
-        <Column width={"fill"}>
-            <Body fontWeight={"bold"} colour={"textPrimary"} width={"hug"}>{token.name}</Body>
-            {#if subtext !== undefined}
-                <Caption colour={"textSecondary"}>
-                    {subtext}
-                </Caption>
-            {/if}
-        </Column>
-    </AccessGateBox>
-{/snippet}
-
-{#snippet tokenGate(
-    logo: string,
-    symbol: string,
-    insufficient: boolean,
-    label: string,
-    required: string,
-    balance: string,
-    onClick?: () => void,
-    refresh?: () => void,
-)}
-    {#if disableCryptoPaymentsFeature}
-        <AccessGateBox {satisfied} satisfiable={false}>
-            <Avatar url={logo} />
-
-            <Column width={"fill"}>
-                <Row crossAxisAlignment={"center"} gap={"xs"}>
-                    <Body
-                        fontWeight={"bold"}
-                        colour={insufficient ? "textSecondary" : "primary"}
-                        width={"hug"}>{symbol}</Body>
-                    <Body
-                        fontWeight={"bold"}
-                        colour={insufficient ? "textSecondary" : "textPrimary"}
-                        width={"hug"}>{label}</Body>
-                </Row>
-                <Caption colour={insufficient ? "error" : "textSecondary"}>
-                    <Translatable resourceKey={restrictedMsg} />
-                </Caption>
-            </Column>
-        </AccessGateBox>
-    {:else}
-        <MenuTrigger maskUI align={"end"} position={"bottom"} fill mobileMode={"longpress"}>
-            {#snippet menuItems()}
-                <MenuItem onclick={refresh}>
-                    <Translatable resourceKey={i18nKey("Refresh balance")} />
-                </MenuItem>
-            {/snippet}
-            <AccessGateBox {satisfied} satisfiable={!insufficient} {onClick}>
-                <Avatar url={logo} />
-
-                <Column width={"fill"}>
-                    <Row crossAxisAlignment={"center"} gap={"xs"}>
-                        <Body
-                            fontWeight={"bold"}
-                            colour={insufficient ? "textSecondary" : "primary"}
-                            width={"hug"}>{symbol}</Body>
-                        <Body
-                            fontWeight={"bold"}
-                            colour={insufficient ? "textSecondary" : "textPrimary"}
-                            width={"hug"}>{label}</Body>
-                    </Row>
-                    <Caption colour={insufficient ? "error" : "textSecondary"}>
-                        {balance}
-                        {#if insufficient}
-                            {`/ Insufficient ${symbol}`}
-                        {/if}
-                    </Caption>
-                </Column>
-
-                <Row width={"hug"}>
-                    <BodySmall colour={"textSecondary"}>
-                        {required}
-                    </BodySmall>
-                </Row>
-            </AccessGateBox>
-        </MenuTrigger>
-    {/if}
-{/snippet}
-
-{#if gate.kind !== "no_gate"}
-    {#if gate.kind === "payment_gate" && tokenState}
-        {@const balance = accessApprovalState.balanceAfterCurrentCommitments(
-            tokenState.ledger,
-            tokenState.cryptoBalance,
-        )}
-        {@const insufficient = balance < gate.amount && !satisfied}
-        {@render tokenGate(
-            tokenState.logo,
-            tokenState.symbol,
-            insufficient,
-            "payment gate",
-            tokenState.formatTokens(gate.amount),
-            tokenState.formatTokens(balance),
-            () => onClick(gate),
-            () => tokenState.refreshBalance(client),
-        )}
-    {:else if gate.kind === "token_balance_gate" && tokenState}
-        {@const balance = accessApprovalState.balanceAfterCurrentCommitments(
-            tokenState.ledger,
-            tokenState.cryptoBalance,
-        )}
-        {@const insufficient = balance < gate.minBalance}
-        {@render tokenGate(
-            tokenState.logo,
-            tokenState.symbol,
-            insufficient,
-            "minimum balance gate",
-            tokenState.formatTokens(gate.minBalance),
-            tokenState.formatTokens(balance),
-            () => onClick(gate),
-            () => tokenState.refreshBalance(client),
-        )}
-    {:else if gate.kind === "neuron_gate" && token}
-        {@render neuronGate(gate, token)}
-    {:else if gate.kind === "chit_earned_gate"}
-        {@const insufficient = $currentUserStore.totalChitEarned < gate.minEarned}
-        {@render tokenGate(
-            "/assets/chit.svg",
-            "CHIT",
-            insufficient,
-            "earned gate",
-            gate.minEarned.toLocaleString(),
-            $currentUserStore.totalChitEarned.toLocaleString(),
-        )}
-    {:else if gate.kind === "lifetime_diamond_gate"}
-        {@render booleanGate(
-            disableCryptoPaymentsFeature,
-            Lifetime,
-            satisfied || disableCryptoPaymentsFeature
-                ? "Lifetime diamond membership"
-                : "Get lifetime membership",
-            satisfied ? undefined : "You are currently not a member",
-        )}
-    {:else if gate.kind === "diamond_gate"}
-        {@render booleanGate(
-            disableCryptoPaymentsFeature,
-            Diamond,
-            satisfied || disableCryptoPaymentsFeature
-                ? "Diamond membership"
-                : "Get diamond membership",
-            satisfied ? undefined : "You are currently not a member",
-        )}
-    {:else if gate.kind === "unique_person_gate"}
-        {@render booleanGate(
-            false,
-            AccountCheck,
-            satisfied ? "Unique personhood verified" : "Verify unique personhood",
-            satisfied ? undefined : "You have not yet been verified",
-        )}
-    {:else}
-        <AccessGateText {gate} />
-    {/if}
-{/if}
diff --git a/frontend/app/src/components_mobile/home/access/DiamondGateEvaluator.svelte b/frontend/app/src/components_mobile/home/access/DiamondGateEvaluator.svelte
deleted file mode 100644
index 98cc792138..0000000000
--- a/frontend/app/src/components_mobile/home/access/DiamondGateEvaluator.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script lang="ts">
-    import Payment from "../upgrade/Payment.svelte";
-
-    interface Props {
-        lifetime: boolean;
-        onCredentialReceived: (cred: string) => void;
-        onCancel?: () => void;
-    }
-
-    let { lifetime, onCredentialReceived, onCancel }: Props = $props();
-</script>
-
-<Payment height={"hug"} {onCancel} padding={"zero"} {lifetime} onSuccess={onCredentialReceived} />
diff --git a/frontend/app/src/components_mobile/home/access/PaymentGateEvaluator.svelte b/frontend/app/src/components_mobile/home/access/PaymentGateEvaluator.svelte
deleted file mode 100644
index 4b7409a6dd..0000000000
--- a/frontend/app/src/components_mobile/home/access/PaymentGateEvaluator.svelte
+++ /dev/null
@@ -1,223 +0,0 @@
-<script lang="ts">
-    import MulticolourText from "@src/components_mobile/MulticolourText.svelte";
-    import { accessApprovalState } from "@src/utils/preview.svelte";
-    import {
-        Avatar,
-        Body,
-        BodySmall,
-        Button,
-        Caption,
-        ColourVars,
-        Column,
-        CommonButton,
-        H2,
-        Row,
-        StatusCard,
-    } from "component-lib";
-    import {
-        type Level,
-        type OpenChat,
-        type PaymentGate,
-        enhancedCryptoLookup,
-        publish,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import QrCode from "svelte-material-icons/Qrcode.svelte";
-    import Refresh from "svelte-material-icons/Refresh.svelte";
-    import Wallet from "svelte-material-icons/WalletOutline.svelte";
-    import { i18nKey, interpolate } from "../../../i18n/i18n";
-    import Translatable from "../../Translatable.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import { TokenState } from "../wallet/walletState.svelte";
-    import AccessGateExpiry from "./AccessGateExpiry.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        gate: PaymentGate & { expiry: bigint | undefined };
-        level: Level;
-        onApprovePayment: (args: { ledger: string; amount: bigint; approvalFee: bigint }) => void;
-        onClose: () => void;
-    }
-
-    let { gate, level, onApprovePayment, onClose }: Props = $props();
-
-    let token = $derived($enhancedCryptoLookup.get(gate.ledgerCanister)!);
-    let tokenState = $derived(new TokenState(token));
-    let refreshingBalance = $state(false);
-    let totalAmount = $derived(tokenState.formatTokens(gate.amount));
-    let toOwner = $derived(tokenState.formatTokens(BigInt(Number(gate.amount) * 0.98)));
-    let toOC = $derived(tokenState.formatTokens(BigInt(Number(gate.amount) * 0.02)));
-
-    let cryptoBalance = $derived(
-        accessApprovalState.balanceAfterCurrentCommitments(
-            tokenState.ledger,
-            tokenState.cryptoBalance,
-        ),
-    );
-
-    let insufficientFunds = $derived(cryptoBalance < gate.amount);
-    let approvalMessage = $derived(
-        interpolate(
-            $_,
-            i18nKey(
-                "access.paymentApprovalMessage",
-                {
-                    amount: tokenState.formatTokens(gate.amount),
-                    token: token.symbol,
-                },
-                level,
-                true,
-            ),
-        ),
-    );
-</script>
-
-{#snippet tokenBalance()}
-    <Row gap={"sm"}>
-        <Row
-            mainAxisAlignment={"spaceBetween"}
-            crossAxisAlignment={"center"}
-            borderRadius={"md"}
-            minHeight={"4rem"}
-            gap={"md"}
-            background={ColourVars.background2}
-            padding={["md", "lg"]}>
-            <Avatar url={tokenState.logo} />
-            <Column width={"fill"}>
-                <Body fontWeight={"bold"} colour={"textPrimary"} width={"hug"}
-                    >{tokenState.symbol}</Body>
-                <Caption colour={"textSecondary"} fontWeight={"bold"}>
-                    {tokenState.formatTokens(cryptoBalance)}
-                </Caption>
-            </Column>
-        </Row>
-        {#if insufficientFunds}
-            <Column
-                onClick={() => publish("receiveToken", tokenState)}
-                mainAxisAlignment={"center"}
-                crossAxisAlignment={"center"}
-                width={{ size: "4rem" }}
-                height={"fill"}
-                borderRadius={"lg"}
-                background={ColourVars.background2}
-                padding={["sm", "md"]}>
-                <QrCode size={"2rem"} color={ColourVars.textSecondary} />
-            </Column>
-        {/if}
-    </Row>
-{/snippet}
-
-<Column gap={"lg"}>
-    <Wallet size={"4.5rem"} color={ColourVars.primary} />
-    <H2 fontWeight={"bold"}>
-        <MulticolourText
-            parts={[
-                {
-                    text: i18nKey(tokenState.symbol),
-                    colour: "primary",
-                },
-                {
-                    text: i18nKey(" payment gate"),
-                    colour: "textPrimary",
-                },
-            ]} />
-    </H2>
-    <Body colour={"textSecondary"}>
-        <Markdown text={approvalMessage} />
-    </Body>
-
-    <Column gap={"sm"}>
-        {@render tokenBalance()}
-        {#if insufficientFunds}
-            <StatusCard
-                borderColour={ColourVars.background2}
-                background={ColourVars.background0}
-                mode={"warning"}
-                body={interpolate(
-                    $_,
-                    i18nKey(
-                        `Top up your ${tokenState.symbol} token account. Tap the QR code button to get your receiving address.`,
-                    ),
-                )}
-                title={interpolate($_, i18nKey("Insufficient funds"))}>
-            </StatusCard>
-        {/if}
-        {#if gate.expiry !== undefined}
-            <StatusCard
-                background={ColourVars.background2}
-                mode={"information"}
-                title={interpolate($_, i18nKey("This is a recurring payment"))}>
-                {#snippet body()}
-                    <AccessGateExpiry expiry={gate.expiry} />
-                {/snippet}
-            </StatusCard>
-        {/if}
-
-        <Column borderRadius={"lg"} gap={"lg"} padding={"lg"} background={ColourVars.background2}>
-            <Row mainAxisAlignment={"spaceBetween"}>
-                <BodySmall colour={"textSecondary"}>
-                    <Translatable resourceKey={i18nKey("Payment amount")} />
-                </BodySmall>
-                <Body width={"hug"} colour={"primary"} fontWeight={"bold"}>
-                    {totalAmount}
-                    {tokenState.symbol}
-                </Body>
-            </Row>
-            <Row mainAxisAlignment={"spaceBetween"}>
-                <BodySmall colour={"textSecondary"}>
-                    <Translatable resourceKey={i18nKey("Owner receives (98%)")} />
-                </BodySmall>
-                <Body width={"hug"} colour={"textPrimary"} fontWeight={"bold"}>
-                    {toOwner}
-                    {tokenState.symbol}
-                </Body>
-            </Row>
-            <Row mainAxisAlignment={"spaceBetween"}>
-                <BodySmall colour={"textSecondary"}>
-                    <Translatable resourceKey={i18nKey("OpenChat treasury receives (2%)")} />
-                </BodySmall>
-                <Body width={"hug"} colour={"textPrimary"} fontWeight={"bold"}>
-                    {toOC}
-                    {tokenState.symbol}
-                </Body>
-            </Row>
-        </Column>
-    </Column>
-</Column>
-
-{#if insufficientFunds}
-    {@render refreshBalance()}
-{:else}
-    <Button
-        width={"fill"}
-        onClick={() =>
-            onApprovePayment({
-                ledger: token.ledger,
-                amount: gate.amount,
-                approvalFee: token.transferFee,
-            })}>
-        {#snippet icon(color)}
-            <Wallet {color} />
-        {/snippet}
-        <Translatable resourceKey={i18nKey("Approve payment")} />
-    </Button>
-    <CommonButton width={"fill"} size={"small_text"} onClick={onClose}>
-        <Translatable resourceKey={i18nKey("cancel")} />
-    </CommonButton>
-{/if}
-
-{#snippet refreshBalance()}
-    <CommonButton
-        loading={refreshingBalance}
-        width={"fill"}
-        mode={"active"}
-        size={"small_text"}
-        onClick={() => tokenState.refreshBalance(client)}>
-        {#snippet icon(color, size)}
-            <Refresh {color} {size} />
-        {/snippet}
-        <Translatable resourceKey={i18nKey(`Refresh ${tokenState.symbol} balance`)} />
-    </CommonButton>
-{/snippet}
diff --git a/frontend/app/src/components_mobile/home/access/UniqueHumanGateEvaluator.svelte b/frontend/app/src/components_mobile/home/access/UniqueHumanGateEvaluator.svelte
deleted file mode 100644
index c68af263ec..0000000000
--- a/frontend/app/src/components_mobile/home/access/UniqueHumanGateEvaluator.svelte
+++ /dev/null
@@ -1,178 +0,0 @@
-<script lang="ts">
-    import {
-        Body,
-        BodySmall,
-        Button,
-        ColourVars,
-        Column,
-        CommonButton,
-        H2,
-        Row,
-        StatusCard,
-    } from "component-lib";
-    import { iconSize, type Level, type OpenChat } from "@client";
-    import { getContext, onMount } from "svelte";
-    import { _ } from "svelte-i18n";
-    import AccountCheck from "svelte-material-icons/AccountCheck.svelte";
-    import { i18nKey, interpolate } from "../../../i18n/i18n";
-    import { uniquePersonCredentialGate } from "../../../utils/access";
-    import ErrorMessage from "../../ErrorMessage.svelte";
-    import FancyLoader from "../../icons/FancyLoader.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import HumanityConfirmation from "../HumanityConfirmation.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import LinkAccounts from "../profile/LinkAccounts.svelte";
-    import AccessGateExpiry from "./AccessGateExpiry.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        level: Level;
-        expiry: bigint | undefined;
-        onCredentialReceived: (cred: string) => void;
-        onClose: () => void;
-    }
-
-    let { level, expiry, onClose, onCredentialReceived }: Props = $props();
-
-    let failed = $state(false);
-    let verifying = $state(false);
-    let confirmed = $state(false);
-    let step: "linking" | "verification" = $state("linking");
-    let iiPrincipal: string | undefined = $state(undefined);
-    let checkingPrincipal = $state(true);
-
-    onMount(() => {
-        client
-            .getLinkedIIPrincipal()
-            .then((p) => {
-                iiPrincipal = p;
-                if (iiPrincipal !== undefined) {
-                    step = "verification";
-                }
-            })
-            .finally(() => (checkingPrincipal = false));
-    });
-
-    function verify() {
-        verifying = true;
-        failed = false;
-        if (iiPrincipal === undefined) return;
-        client
-            .verifyAccessGate(uniquePersonCredentialGate, iiPrincipal)
-            .then((credential) => {
-                if (credential === undefined) {
-                    failed = true;
-                } else {
-                    onCredentialReceived(credential);
-                }
-            })
-            .catch(() => (failed = true))
-            .finally(() => (verifying = false));
-    }
-</script>
-
-{#if checkingPrincipal}
-    <div class="loader">
-        <FancyLoader />
-    </div>
-{:else if step === "linking"}
-    <LinkAccounts
-        bind:iiPrincipal
-        {onClose}
-        onProceed={() => (step = "verification")}
-        explanations={[i18nKey("identity.humanityWarning")]} />
-{:else}
-    <Row gap={"md"} crossAxisAlignment={"center"}>
-        <AccountCheck size={$iconSize} color={"var(--txt)"} />
-        <H2 fontWeight={"bold"}>
-            <Translatable resourceKey={i18nKey("access.uniquePerson")} />
-        </H2>
-    </Row>
-    <div>
-        {#if failed}
-            <Column gap={"lg"}>
-                <ErrorMessage>
-                    <Translatable
-                        resourceKey={i18nKey(
-                            "access.credential.credentialCheckFailed",
-                            {
-                                credential: "Unique person",
-                            },
-                            level,
-                            true,
-                        )} />
-                </ErrorMessage>
-
-                <Body>
-                    <Translatable resourceKey={i18nKey("access.uniquePersonInfo1")} />
-                </Body>
-
-                <BodySmall colour={"textSecondary"}>
-                    <Markdown text={interpolate($_, i18nKey("access.uniquePersonInfo2"))} />
-                </BodySmall>
-
-                <BodySmall colour={"textSecondary"}>
-                    <Translatable resourceKey={i18nKey("access.uniquePersonInfo3")} />
-                </BodySmall>
-            </Column>
-        {:else}
-            <Column gap={"lg"}>
-                <BodySmall>
-                    <Translatable
-                        resourceKey={i18nKey(
-                            "access.credential.credentialCheckMessage",
-                            {
-                                credential: "Unique person",
-                            },
-                            level,
-                            true,
-                        )} />
-                </BodySmall>
-
-                <HumanityConfirmation bind:confirmed />
-
-                {#if expiry !== undefined}
-                    <StatusCard
-                        background={ColourVars.background2}
-                        mode={"warning"}
-                        title={interpolate($_, i18nKey("Recurring access gate"))}>
-                        {#snippet body()}
-                            <AccessGateExpiry {expiry} />
-                        {/snippet}
-                    </StatusCard>
-                {/if}
-            </Column>
-        {/if}
-    </div>
-    <Column gap={"md"} crossAxisAlignment={"center"}>
-        <Button
-            loading={verifying}
-            disabled={verifying || !confirmed || iiPrincipal === undefined}
-            onClick={verify}><Translatable resourceKey={i18nKey("access.verify")} /></Button>
-        <CommonButton width={"hug"} size={"small_text"} onClick={onClose}
-            ><Translatable resourceKey={i18nKey("cancel")} /></CommonButton>
-    </Column>
-{/if}
-
-<style lang="scss">
-    .info,
-    .question,
-    .answer {
-        margin-bottom: $sp4;
-    }
-
-    .question {
-        @include font(book, normal, fs-90);
-    }
-
-    .answer {
-        color: var(--txt-light);
-        @include font(book, normal, fs-90);
-    }
-
-    .loader {
-        width: 100px;
-        margin: 100px auto;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/activity/ActivityEvent.svelte b/frontend/app/src/components_mobile/home/activity/ActivityEvent.svelte
deleted file mode 100644
index 41bd181c9f..0000000000
--- a/frontend/app/src/components_mobile/home/activity/ActivityEvent.svelte
+++ /dev/null
@@ -1,280 +0,0 @@
-<script lang="ts">
-    import { Avatar, Body, BodySmall, Container, CountBadge, Subtitle } from "component-lib";
-    import type { Message, MessageActivityEvent, ResourceKey } from "@client";
-    import {
-        allUsersStore,
-        communitiesStore,
-        currentUserIdStore,
-        OpenChat,
-        type MessageContext,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { i18nKey, interpolate } from "../../../i18n/i18n";
-    import { buildDisplayName } from "../../../utils/user";
-    import Translatable from "../../Translatable.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import Reaction from "../message/Reaction.svelte";
-    import Tip from "../message/Tip.svelte";
-
-    const MAX_REACTIONS = 4;
-    const client = getContext<OpenChat>("client");
-
-    type Event = Omit<MessageActivityEvent, "message">;
-
-    interface Props {
-        event: Event;
-        message?: Message;
-        onClick: () => void;
-    }
-
-    let { event, onClick, message }: Props = $props();
-
-    function getChatName(ctx: MessageContext): string | undefined {
-        const chat = client.lookupChatSummary(ctx.chatId);
-        const parts = [];
-        if (chat !== undefined) {
-            switch (chat.kind) {
-                case "direct_chat":
-                    parts.push(client.getDisplayName(chat.them.userId));
-                    break;
-                case "group_chat":
-                    parts.push(chat.name);
-                    break;
-                case "channel":
-                    const community = $communitiesStore.get({
-                        kind: "community",
-                        communityId: chat.id.communityId,
-                    });
-                    if (community) {
-                        parts.push(community.name);
-                    }
-                    parts.push(chat.name);
-                    break;
-            }
-            if (ctx.threadRootMessageIndex !== undefined) {
-                parts.push("Thread");
-            }
-            return parts.join(" > ");
-        }
-        return undefined;
-    }
-
-    function otherReactors(ev: Event): Set<string> {
-        if (message === undefined) return new Set();
-        return new Set(
-            message.reactions.flatMap((r) =>
-                [...r.userIds].filter((u) => u !== ev.userId && u !== $currentUserIdStore),
-            ),
-        );
-    }
-
-    function otherTippers(ev: Event): Set<string> {
-        if (message === undefined) return new Set();
-        return new Set(
-            Object.values(message.tips).flatMap((tips) => {
-                return Object.keys(tips).filter((u) => u !== ev.userId);
-            }),
-        );
-    }
-
-    function numberOfPeopleVoting(msg: Message | undefined): number {
-        if (msg === undefined || msg.content.kind !== "poll_content") return 1;
-        const content = msg.content;
-        if (content.votes.total.kind === "anonymous_poll_votes") {
-            return Object.values(content.votes.total.votes).reduce((total, n) => total + n, 0);
-        } else if (content.votes.total.kind === "hidden_poll_votes") {
-            return content.votes.total.votes;
-        } else if (content.votes.total.kind === "visible_poll_votes") {
-            return Object.values(content.votes.total.votes).reduce(
-                (total, n) => total + n.length,
-                0,
-            );
-        }
-        return 1;
-    }
-
-    function pluraliseMessage(
-        root: "tip" | "reaction",
-        username: string,
-        others: Set<string>,
-    ): ResourceKey {
-        switch (others.size) {
-            case 0:
-                return i18nKey(`activity.${root}One`, { username });
-            case 1:
-                const u = [...others][0];
-                return i18nKey(`activity.${root}Two`, {
-                    username,
-                    other: buildDisplayName(
-                        $allUsersStore,
-                        u,
-                        u === $currentUserIdStore ? "me" : "user",
-                    ),
-                });
-            default:
-                return i18nKey(`activity.${root}N`, { username, n: others.size });
-        }
-    }
-
-    function buildEventSummary(event: Event, username: string) {
-        switch (event.activity) {
-            case "reaction":
-                return pluraliseMessage("reaction", username, otherReactors(event));
-            case "mention":
-                return i18nKey("activity.mention", { username });
-            case "quote_reply":
-                return i18nKey("activity.quoteReply", { username });
-            case "tip":
-                return pluraliseMessage("tip", username, otherTippers(event));
-            case "crypto":
-                return i18nKey("activity.crypto", { username });
-            case "poll_vote":
-                const numVoters = numberOfPeopleVoting(message);
-                if (numVoters > 1) {
-                    return i18nKey("activity.pollVoteN", { username, number: numVoters - 1 });
-                } else {
-                    return i18nKey("activity.pollVote", { username });
-                }
-            case "p2p_swap_accepted":
-                return i18nKey("activity.p2pSwapAccepted", { username });
-        }
-    }
-
-    function formatLatestMessage(username: string): string {
-        // TODO - not sure what this means
-        if (message === undefined) return "...";
-
-        const latestMessageText = client.getContentAsText($_, message.content);
-        return `${username} / ${latestMessageText}`;
-    }
-
-    let sender = $derived(event.userId ? $allUsersStore.get(event.userId) : undefined);
-    let eventUsername = $derived(
-        event.userId
-            ? buildDisplayName(
-                  $allUsersStore,
-                  event.userId,
-                  event.userId === $currentUserIdStore ? "me" : "user",
-              )
-            : $_("activity.anon"),
-    );
-    let messageUsername = $derived(
-        message
-            ? buildDisplayName(
-                  $allUsersStore,
-                  message.sender,
-                  message.sender === $currentUserIdStore ? "me" : "user",
-              )
-            : $_("activity.anon"),
-    );
-    let lastMessage = $derived(formatLatestMessage(messageUsername));
-    let eventSummary = $derived(buildEventSummary(event, eventUsername));
-    let chatName = $derived(getChatName(event.messageContext));
-    let tips = $derived(message?.tips ? Object.entries(message.tips) : []);
-</script>
-
-<Container padding={["md", "lg"]} gap={"md"} supplementalClass={"activity-event"} {onClick}>
-    <Avatar size={"lg"} url={client.userAvatarUrl(sender)}></Avatar>
-    <Container direction={"vertical"}>
-        <!-- Title, time, chat path & activity indicator -->
-        <Container direction={"vertical"}>
-            <!-- Title and time -->
-            <Container direction={"horizontal"} gap={"lg"}>
-                <Container width={"fill"}>
-                    <Subtitle fontWeight={"bold"}>
-                        <Markdown text={interpolate($_, eventSummary)} />
-                    </Subtitle>
-                </Container>
-                <Container width={"hug"} padding={["xs", "zero"]}>
-                    <Body colour={"textSecondary"} width={"hug"}>
-                        {client.toRelativeTime(event.timestamp)}
-                    </Body>
-                </Container>
-            </Container>
-            <!-- Chat breadcrumb & indicator-->
-            <Container direction={"horizontal"} gap={"lg"}>
-                <BodySmall width={"fill"} colour={"primary"}>{chatName}</BodySmall>
-                <!-- TODO investigate if possible to show  indicators next to new notifications -->
-                <!-- <NotificationIndicator></NotificationIndicator> -->
-            </Container>
-        </Container>
-        <!-- Message and reactions -->
-        <Container gap={"xs"} direction={"vertical"}>
-            <Body colour={"textSecondary"}>
-                {#if message !== undefined}
-                    <Markdown text={lastMessage} oneLine twoLine suppressLinks />
-                {:else}
-                    <Translatable resourceKey={i18nKey("activity.missingMessage")} />
-                {/if}
-            </Body>
-
-            {#if event.activity === "reaction" && message !== undefined && message.reactions.length > 0}
-                <Container supplementalClass="reactions" width={"hug"}>
-                    {@const more = message.reactions.length - MAX_REACTIONS}
-                    {#each message.reactions.slice(0, MAX_REACTIONS) as reaction (reaction.reaction)}
-                        <Reaction alignTooltip={"end"} {reaction} intersecting size="large" />
-                    {/each}
-                    {#if more > 0}
-                        <div class="plus-badge">
-                            <Body width="hug" fontWeight="bold">+{Math.abs(more)}</Body>
-                        </div>
-                    {/if}
-                </Container>
-            {/if}
-
-            {#if event.activity === "tip" && tips.length > 0}
-                <Container gap={"xs"} crossAxisAlignment={"center"} width={"hug"}>
-                    {@const more = tips.length - MAX_REACTIONS}
-                    {#each tips.slice(0, MAX_REACTIONS) as tip}
-                        <Tip alignTooltip={"end"} {tip} />
-                    {/each}
-                    {#if more > 0}
-                        <CountBadge mode="additive" size="large">+{more}</CountBadge>
-                    {/if}
-                </Container>
-            {/if}
-        </Container>
-    </Container>
-</Container>
-
-<style lang="scss">
-    :global(.activity-event a) {
-        color: inherit;
-    }
-
-    :global(.activity-event .tip-wrapper) {
-        margin-bottom: 0;
-        padding: 0;
-    }
-
-    :global(.activity-event .message-reaction) {
-        margin-bottom: 0;
-        padding: 0;
-    }
-
-    :global {
-        .reactions {
-            margin-left: -0.125rem;
-
-            > .tooltip_wrapper:not(:first-child),
-            > .plus-badge,
-            > .badge {
-                margin-left: -0.35rem;
-            }
-
-            > .plus-badge {
-                z-index: 1;
-                display: flex;
-                min-width: 2.75rem;
-                height: 2.25rem;
-                align-items: center;
-                justify-content: center;
-                background-color: var(--background-2);
-
-                border-radius: var(--rad-circle);
-                border: var(--bw-thick) solid var(--background-0);
-            }
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/activity/ActivityFeed.svelte b/frontend/app/src/components_mobile/home/activity/ActivityFeed.svelte
deleted file mode 100644
index 32ef02cb96..0000000000
--- a/frontend/app/src/components_mobile/home/activity/ActivityFeed.svelte
+++ /dev/null
@@ -1,149 +0,0 @@
-<script lang="ts">
-    import { activityFeedState } from "@src/runes/activity.svelte";
-    import { trackedEffect } from "@src/utils/effects.svelte";
-    import { Body, Container, Logo, SectionHeader } from "component-lib";
-    import {
-        messageActivitySummaryStore,
-        messageContextToChatListScope,
-        messageContextToString,
-        OpenChat,
-        routeForMessage,
-        type MessageActivityEvent,
-    } from "@client";
-    import { navigate } from "@utils/navigation";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Translatable from "../../Translatable.svelte";
-    import VirtualList from "@shared_components/VirtualList.svelte";
-    import FancyLoader from "../../icons/FancyLoader.svelte";
-    import NothingToSee from "../NothingToSee.svelte";
-    import ActivityEvent from "./ActivityEvent.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    let uptodate = $derived.by(() => {
-        return $messageActivitySummaryStore.latestTimestamp <= activityFeedState.latestTimestamp;
-    });
-
-    type ActivityItem =
-        | { kind: "event"; formattedTime: string; event: MessageActivityEvent }
-        | { kind: "header"; formattedTime: string; timestamp: bigint };
-
-    let formatHeaderTime = (timestamp: bigint): string =>
-        client.getSmartDateHeader(timestamp, $_("today"), $_("yesterday"));
-
-    let activityItems: ActivityItem[] = $derived(
-        activityFeedState.activityEvents.reduce((acc, curItem, idx) => {
-            const curTimeFmt = formatHeaderTime(curItem.timestamp);
-            const prev = activityFeedState.activityEvents[idx - 1];
-            const prevTimeFmt = prev ? formatHeaderTime(prev.timestamp) : undefined;
-            if (curTimeFmt !== prevTimeFmt) {
-                acc.push({
-                    kind: "header",
-                    formattedTime: curTimeFmt,
-                    timestamp: curItem.timestamp,
-                });
-            }
-
-            acc.push({
-                kind: "event",
-                formattedTime: curTimeFmt,
-                event: curItem,
-            });
-
-            return acc;
-        }, [] as ActivityItem[]),
-    );
-
-    function loadActivity() {
-        let firstResponse = true;
-        client.subscribeToMessageActivityFeed((resp, final) => {
-            if (firstResponse) {
-                activityFeedState.activityEvents = resp.events;
-                firstResponse = false;
-            }
-            activityFeedState.populateMessages(resp.events);
-            if (activityFeedState.activityEvents.length > 0 && final) {
-                client.markActivityFeedRead(activityFeedState.latestTimestamp);
-            }
-        });
-    }
-
-    function selectEvent(ev: MessageActivityEvent) {
-        navigate(
-            routeForMessage(
-                messageContextToChatListScope(ev.messageContext).kind,
-                ev.messageContext,
-                ev.messageIndex,
-            ),
-        );
-    }
-
-    function eventKey(item: ActivityItem): string {
-        switch (item.kind) {
-            case "event": {
-                const { messageContext, eventIndex, activity } = item.event;
-                return `${messageContextToString(messageContext)}_${eventIndex}_${activity}`;
-            }
-
-            case "header": {
-                return `events_header_${item.timestamp}`;
-            }
-        }
-    }
-
-    trackedEffect("activityFeed", () => {
-        if (!uptodate || !activityFeedState.initialised) {
-            loadActivity();
-        }
-    });
-</script>
-
-<SectionHeader>
-    {#snippet avatar()}
-        <Logo />
-    {/snippet}
-    {#snippet title()}
-        <Translatable resourceKey={i18nKey("activity.title")} />
-    {/snippet}
-</SectionHeader>
-
-<Container
-    mainAxisAlignment={activityFeedState.initialised ? undefined : "center"}
-    crossAxisAlignment={activityFeedState.initialised ? undefined : "center"}
-    height={"fill"}
-    closeMenuOnScroll
-    direction={"vertical"}>
-    {#if !activityFeedState.initialised}
-        <FancyLoader size={"3rem"} />
-    {:else if activityFeedState.activityEvents.length === 0 && activityFeedState.initialised}
-        <NothingToSee title={"No activity yet"} subtitle={"Check back later for new activity"} />
-    {:else}
-        <VirtualList keyFn={eventKey} items={activityItems}>
-            {#snippet children(item)}
-                {#if item.kind === "header"}
-                    <!-- TODO make the time header stick to top-->
-                    <Container
-                        supplementalClass="activity_time_header"
-                        padding={["xl", "zero", "zero"]}>
-                        <Body colour={"textSecondary"} fontWeight={"semi-bold"}>
-                            {item.formattedTime}
-                        </Body>
-                    </Container>
-                {:else}
-                    <ActivityEvent
-                        message={activityFeedState.getMessage(item.event.messageId)}
-                        event={item.event}
-                        onClick={() => selectEvent(item.event)} />
-                {/if}
-            {/snippet}
-        </VirtualList>
-    {/if}
-</Container>
-
-<style lang="scss">
-    :global(.activity_time_header) {
-        padding-left: 4.75rem !important;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/communities/ChannelCard.svelte b/frontend/app/src/components_mobile/home/communities/ChannelCard.svelte
deleted file mode 100644
index c4cfeca248..0000000000
--- a/frontend/app/src/components_mobile/home/communities/ChannelCard.svelte
+++ /dev/null
@@ -1,92 +0,0 @@
-<script lang="ts">
-    import Translatable from "@src/components/Translatable.svelte";
-    import { i18nKey } from "@src/i18n/i18n";
-    import {
-        Avatar,
-        BodySmall,
-        Container,
-        IconButton,
-        MenuItem,
-        MenuTrigger,
-        Title,
-    } from "component-lib";
-    import {
-        type ChannelMatch,
-        iconSize,
-        type OpenChat,
-        selectedCommunitySummaryStore,
-    } from "@client";
-    import { getContext } from "svelte";
-    import AccountMultiple from "svelte-material-icons/AccountMultiple.svelte";
-    import DeleteOutline from "svelte-material-icons/DeleteOutline.svelte";
-    import DotsVertical from "svelte-material-icons/DotsVertical.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-
-    interface Props {
-        channel: ChannelMatch;
-        onDeleteChannel: () => void;
-        onSelectChannel: () => void;
-    }
-
-    let { channel, onDeleteChannel, onSelectChannel }: Props = $props();
-
-    const client = getContext<OpenChat>("client");
-
-    let canDeleteChannel = $derived(client.canDeleteChannel(channel.id));
-</script>
-
-<Container onClick={onSelectChannel} crossAxisAlignment={"center"} gap={"sm"}>
-    <Avatar
-        size={"md"}
-        url={client.groupAvatarUrl(
-            { id: channel.id, ...channel.avatar },
-            $selectedCommunitySummaryStore,
-        )} />
-    <Container direction={"vertical"}>
-        <Container crossAxisAlignment={"center"} gap={"sm"}>
-            {#if !channel.public}
-                <div class="private"></div>
-            {/if}
-            <Container width={"hug"} crossAxisAlignment={"center"} gap={"xxs"}>
-                <AccountMultiple size={"1.2em"} />
-                <BodySmall>{channel.memberCount.toLocaleString()}</BodySmall>
-            </Container>
-            <Title ellipsisTruncate fontWeight={"semi-bold"}>
-                {channel.name}
-            </Title>
-        </Container>
-        {#if channel.description !== ""}
-            <BodySmall ellipsisTruncate colour={"textSecondary"}>
-                <Markdown text={channel.description} oneLine suppressLinks />
-            </BodySmall>
-        {/if}
-    </Container>
-    {#if canDeleteChannel}
-        <MenuTrigger position={"top"} align={"end"}>
-            <IconButton padding={["sm", "xs", "sm", "zero"]} size={"md"}>
-                {#snippet icon(color)}
-                    <DotsVertical {color} />
-                {/snippet}
-            </IconButton>
-            {#snippet menuItems()}
-                <MenuItem danger onclick={onDeleteChannel}>
-                    {#snippet icon()}
-                        <DeleteOutline size={$iconSize} color={"var(--menu-warn)"} />
-                    {/snippet}
-                    <Translatable resourceKey={i18nKey("deleteGroup", undefined, "channel")} />
-                </MenuItem>
-            {/snippet}
-        </MenuTrigger>
-    {/if}
-</Container>
-
-<style lang="scss">
-    .private {
-        background-repeat: no-repeat;
-        $size: 12px;
-        flex: 0 0 $size;
-        width: $size;
-        height: $size;
-        background-image: url("/assets/locked.svg");
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/communities/CommunityMenu.svelte b/frontend/app/src/components_mobile/home/communities/CommunityMenu.svelte
deleted file mode 100644
index 147913e698..0000000000
--- a/frontend/app/src/components_mobile/home/communities/CommunityMenu.svelte
+++ /dev/null
@@ -1,158 +0,0 @@
-<script lang="ts">
-    import { MenuItem } from "component-lib";
-    import type { CommunitySummary, OpenChat } from "@client";
-    import {
-        chatSummariesListStore,
-        notificationsSupported,
-        platformModeratorStore,
-        publish,
-        ROLE_NONE,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { toastStore } from "../../../stores/toast";
-    import Translatable from "../../Translatable.svelte";
-    import { updateGroupState } from "../createOrUpdateGroup/group.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        community: CommunitySummary;
-        canMarkAllRead: boolean;
-        onOtherChannels?: () => void;
-    }
-
-    let { community, canMarkAllRead, onOtherChannels }: Props = $props();
-
-    let member = $derived(community.membership.role !== ROLE_NONE);
-    let frozen = $derived(client.isCommunityFrozen(community.id));
-    let canLeave = $derived(member);
-    let canDelete = $derived(member && !frozen && client.canDeleteCommunity(community.id));
-    let canCreateChannel = $derived(member && !frozen && client.canCreateChannel(community.id));
-    let isCommunityMuted = $derived(
-        $chatSummariesListStore.every((c) => c.membership.notificationsMuted),
-    );
-    let isAtEveryoneMutedForCommunity = $derived(
-        $chatSummariesListStore.every((c) => c.membership.atEveryoneMuted),
-    );
-
-    function leaveCommunity() {
-        publish("leaveCommunity", {
-            kind: "leave_community",
-            communityId: community.id,
-        });
-    }
-
-    function deleteCommunity() {
-        publish("deleteCommunity", {
-            kind: "delete_community",
-            communityId: community.id,
-            doubleCheck: {
-                challenge: i18nKey("typeGroupName", { name: community.name }),
-                response: i18nKey(community.name),
-            },
-        });
-    }
-
-    function communityDetails() {
-        publish("communityDetails", community);
-    }
-
-    function markAllRead() {
-        client.markAllReadForCurrentScope();
-    }
-
-    function newChannel() {
-        if (canCreateChannel) {
-            updateGroupState.initialise(client.createCandidateGroup("channel", false));
-            publish("newChannel", false);
-        }
-    }
-
-    function embedContent() {
-        if (canCreateChannel) {
-            updateGroupState.initialise(client.createCandidateGroup("channel", true));
-            publish("newChannel", true);
-        }
-    }
-
-    function muteAllChannels(muteAtEveryone: boolean) {
-        client.muteAllChannels(community.id, muteAtEveryone);
-    }
-
-    function freezeCommunity() {
-        client.freezeCommunity(community.id, undefined).then((success) => {
-            if (!success) {
-                toastStore.showFailureToast(i18nKey("failedToFreezeCommunity"));
-            } else {
-                toastStore.showSuccessToast(i18nKey("communityFrozen"));
-            }
-        });
-    }
-
-    function unfreezeCommunity() {
-        client.unfreezeCommunity(community.id).then((success) => {
-            if (!success) {
-                toastStore.showFailureToast(i18nKey("failedToUnfreezeCommunity"));
-            } else {
-                toastStore.showSuccessToast(i18nKey("communityUnfrozen"));
-            }
-        });
-    }
-</script>
-
-<MenuItem onclick={communityDetails}>
-    <Translatable resourceKey={i18nKey("communities.details")} />
-</MenuItem>
-{#if canCreateChannel}
-    <MenuItem onclick={newChannel}>
-        <Translatable resourceKey={i18nKey("communities.createChannel")} />
-    </MenuItem>
-{/if}
-{#if canCreateChannel}
-    <MenuItem onclick={embedContent}>
-        <Translatable resourceKey={i18nKey("communities.embed")} />
-    </MenuItem>
-{/if}
-<MenuItem disabled={!canMarkAllRead} onclick={markAllRead}>
-    <Translatable resourceKey={i18nKey("markAllRead")} />
-</MenuItem>
-{#if notificationsSupported}
-    {#if !isCommunityMuted}
-        <MenuItem onclick={() => muteAllChannels(false)}>
-            <Translatable resourceKey={i18nKey("communities.muteAllChannels")} />
-        </MenuItem>
-    {/if}
-    {#if !isAtEveryoneMutedForCommunity}
-        <MenuItem onclick={() => muteAllChannels(true)}>
-            <Translatable resourceKey={i18nKey("communities.muteAllChannelsAtEveryone")} />
-        </MenuItem>
-    {/if}
-{/if}
-<MenuItem onclick={onOtherChannels}>
-    <Translatable resourceKey={i18nKey("communities.otherChannels")} />
-</MenuItem>
-{#if member}
-    <MenuItem separator />
-    {#if canDelete}
-        <MenuItem danger onclick={deleteCommunity}>
-            <Translatable resourceKey={i18nKey("communities.delete")} />
-        </MenuItem>
-    {/if}
-    {#if canLeave}
-        <MenuItem danger onclick={leaveCommunity}>
-            <Translatable resourceKey={i18nKey("communities.leave")} />
-        </MenuItem>
-    {/if}
-{/if}
-{#if $platformModeratorStore}
-    {#if client.isCommunityFrozen(community.id)}
-        <MenuItem danger onclick={unfreezeCommunity}>
-            <Translatable resourceKey={i18nKey("unfreezeCommunity")} />
-        </MenuItem>
-    {:else}
-        <MenuItem danger onclick={freezeCommunity}>
-            <Translatable resourceKey={i18nKey("freezeCommunity")} />
-        </MenuItem>
-    {/if}
-{/if}
diff --git a/frontend/app/src/components_mobile/home/communities/DirectAndGroupChatsHeader.svelte b/frontend/app/src/components_mobile/home/communities/DirectAndGroupChatsHeader.svelte
deleted file mode 100644
index f3c1a0eec3..0000000000
--- a/frontend/app/src/components_mobile/home/communities/DirectAndGroupChatsHeader.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script lang="ts">
-    import { Logo, SectionHeader } from "component-lib";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Translatable from "../../Translatable.svelte";
-    import GroupChatsMenu from "./GroupChatsMenu.svelte";
-
-    interface Props {
-        canMarkAllRead: boolean;
-    }
-
-    let props: Props = $props();
-</script>
-
-<SectionHeader>
-    {#snippet avatar()}
-        <Logo />
-    {/snippet}
-    {#snippet title()}
-        <Translatable resourceKey={i18nKey("communities.directAndGroupChats")} />
-    {/snippet}
-    {#snippet menu()}
-        <GroupChatsMenu {...props} />
-    {/snippet}
-</SectionHeader>
diff --git a/frontend/app/src/components_mobile/home/communities/FavouriteChatsHeader.svelte b/frontend/app/src/components_mobile/home/communities/FavouriteChatsHeader.svelte
deleted file mode 100644
index dc3462672a..0000000000
--- a/frontend/app/src/components_mobile/home/communities/FavouriteChatsHeader.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script lang="ts">
-    import { Logo, MenuItem, SectionHeader } from "component-lib";
-    import { OpenChat } from "@client";
-    import { getContext } from "svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Translatable from "../../Translatable.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        canMarkAllRead: boolean;
-    }
-
-    let { canMarkAllRead }: Props = $props();
-</script>
-
-<SectionHeader>
-    {#snippet avatar()}
-        <Logo />
-    {/snippet}
-    {#snippet title()}
-        <Translatable resourceKey={i18nKey("communities.favourites")} />
-    {/snippet}
-    {#snippet menu()}
-        <MenuItem disabled={!canMarkAllRead} onclick={() => client.markAllReadForCurrentScope()}>
-            <Translatable resourceKey={i18nKey("markAllRead")} />
-        </MenuItem>
-    {/snippet}
-</SectionHeader>
diff --git a/frontend/app/src/components_mobile/home/communities/GroupChatsMenu.svelte b/frontend/app/src/components_mobile/home/communities/GroupChatsMenu.svelte
deleted file mode 100644
index 6533f20028..0000000000
--- a/frontend/app/src/components_mobile/home/communities/GroupChatsMenu.svelte
+++ /dev/null
@@ -1,46 +0,0 @@
-<script lang="ts">
-    import type { OpenChat } from "@client";
-    import { anonUserStore, identityStateStore, publish } from "@client";
-    import { getContext, tick } from "svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Translatable from "../../Translatable.svelte";
-
-    import { MenuItem } from "component-lib";
-    import { updateGroupState } from "../createOrUpdateGroup/group.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        canMarkAllRead: boolean;
-    }
-
-    let { canMarkAllRead }: Props = $props();
-
-    function newGroup() {
-        if ($anonUserStore) {
-            client.updateIdentityState({
-                kind: "logging_in",
-                postLogin: { kind: "create_group" },
-            });
-        } else {
-            updateGroupState.initialise(client.createCandidateGroup("group", false));
-            publish("newGroup");
-        }
-    }
-    $effect(() => {
-        if (
-            $identityStateStore.kind === "logged_in" &&
-            $identityStateStore.postLogin?.kind === "create_group"
-        ) {
-            client.clearPostLoginState();
-            tick().then(() => newGroup());
-        }
-    });
-</script>
-
-<MenuItem onclick={newGroup}>
-    <Translatable resourceKey={i18nKey("newGroup")} />
-</MenuItem>
-<MenuItem disabled={!canMarkAllRead} onclick={() => client.markAllReadForCurrentScope()}>
-    <Translatable resourceKey={i18nKey("markAllRead")} />
-</MenuItem>
diff --git a/frontend/app/src/components_mobile/home/communities/Import.svelte b/frontend/app/src/components_mobile/home/communities/Import.svelte
deleted file mode 100644
index f0deb865b5..0000000000
--- a/frontend/app/src/components_mobile/home/communities/Import.svelte
+++ /dev/null
@@ -1,97 +0,0 @@
-<script lang="ts">
-    import { Avatar, Body, Button, Container, Option, Sheet, Subtitle } from "component-lib";
-    import {
-        type ChatIdentifier,
-        type CommunityMap,
-        type CommunitySummary,
-        type OpenChat,
-        publish,
-    } from "@client";
-    import { getContext, onMount } from "svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { toastStore } from "../../../stores/toast";
-    import Translatable from "../../Translatable.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        ownedCommunities: CommunityMap<CommunitySummary>;
-        groupId: ChatIdentifier;
-        onCancel: () => void;
-    }
-
-    let { ownedCommunities, groupId, onCancel }: Props = $props();
-
-    let communitiesList = $derived([...ownedCommunities.values()]);
-
-    let importing = $state(false);
-    let selected: CommunitySummary | undefined = $state();
-
-    function performImport() {
-        if (selected === undefined || groupId.kind !== "group_chat") return;
-
-        importing = true;
-        client
-            .importToCommunity(groupId, selected.id)
-            .then((channelId) => {
-                if (channelId === undefined) {
-                    toastStore.showFailureToast(i18nKey("communities.errors.importFailed"));
-                } else {
-                    onCancel();
-                    publish("successfulImport", channelId);
-                }
-            })
-            .finally(() => (importing = false));
-    }
-
-    function selectCommunity(community: CommunitySummary) {
-        selected = community;
-    }
-
-    onMount(() => {
-        selected = communitiesList.length > 0 ? communitiesList[0] : undefined;
-    });
-
-    function areEqual(c1?: CommunitySummary, c2?: CommunitySummary): boolean {
-        return c1 !== undefined && c2 !== undefined && c1.id.communityId === c2.id.communityId;
-    }
-</script>
-
-<Sheet onDismiss={onCancel}>
-    <Container
-        height={{ size: "100%" }}
-        supplementalClass={"token_selector"}
-        padding={"lg"}
-        gap={"xl"}
-        direction={"vertical"}>
-        <Subtitle fontWeight={"bold"}>
-            <Translatable resourceKey={i18nKey("communities.chooseCommunity")}></Translatable>
-        </Subtitle>
-
-        <Container gap={"sm"} supplementalClass={"token_selector"} direction={"vertical"}>
-            {#each communitiesList as community}
-                <Option
-                    onClick={() => selectCommunity(community)}
-                    padding={["sm", "md", "sm", "sm"]}
-                    value={community}
-                    selected={areEqual(selected, community)}>
-                    <Container crossAxisAlignment={"center"} gap={"sm"}>
-                        <Avatar
-                            url={client.communityAvatarUrl(
-                                community.id.communityId,
-                                community.avatar,
-                            )} />
-                        <Body fontWeight={"bold"}>{community.name}</Body>
-                    </Container>
-                </Option>
-            {/each}
-        </Container>
-        <Container>
-            <Button
-                loading={importing}
-                disabled={importing || selected === undefined}
-                onClick={performImport}
-                ><Translatable resourceKey={i18nKey("communities.importBtn")} /></Button>
-        </Container>
-    </Container>
-</Sheet>
diff --git a/frontend/app/src/components_mobile/home/communities/PreviewWrapper.svelte b/frontend/app/src/components_mobile/home/communities/PreviewWrapper.svelte
deleted file mode 100644
index 3fd7fd6acf..0000000000
--- a/frontend/app/src/components_mobile/home/communities/PreviewWrapper.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<script lang="ts">
-    import { communityPreviewState } from "@src/utils/preview.svelte";
-    import { Sheet } from "component-lib";
-    import type { OpenChat } from "@client";
-    import { identityStateStore } from "@client";
-    import { getContext, tick, type Snippet } from "svelte";
-    import GateCheckFailed from "../access/AccessGateCheckFailed.svelte";
-
-    type ChildProps = [boolean, () => void, () => void, boolean];
-
-    interface Props {
-        children?: Snippet<ChildProps>;
-    }
-
-    let { children }: Props = $props();
-
-    const client = getContext<OpenChat>("client");
-
-    $effect(() => {
-        if (
-            $identityStateStore.kind === "logged_in" &&
-            $identityStateStore.postLogin?.kind === "join_community"
-        ) {
-            client.clearPostLoginState();
-            tick().then(() => communityPreviewState.joinCommunity(client));
-        }
-    });
-</script>
-
-{#if communityPreviewState.gateCheckFailed}
-    <Sheet onDismiss={() => communityPreviewState.reset()}>
-        <GateCheckFailed onClose={() => communityPreviewState.reset()} />
-    </Sheet>
-{/if}
-
-{@render children?.(
-    communityPreviewState.joining,
-    () => communityPreviewState.joinCommunity(client),
-    () => communityPreviewState.cancelPreview(client),
-    communityPreviewState.gatesInEffect,
-)}
diff --git a/frontend/app/src/components_mobile/home/communities/SelectedCommunityHeader.svelte b/frontend/app/src/components_mobile/home/communities/SelectedCommunityHeader.svelte
deleted file mode 100644
index fa179808a9..0000000000
--- a/frontend/app/src/components_mobile/home/communities/SelectedCommunityHeader.svelte
+++ /dev/null
@@ -1,82 +0,0 @@
-<script lang="ts">
-    import { Avatar, Body, Container, SectionHeader } from "component-lib";
-    import {
-        anonUserStore,
-        publish,
-        setRightPanelHistory,
-        type CommunitySummary,
-        type OpenChat,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import WithVerifiedBadge from "../../icons/WithVerifiedBadge.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import VisibilityLabel from "../VisibilityLabel.svelte";
-    import CommunityMenu from "./CommunityMenu.svelte";
-    import OtherChannels from "./OtherChannels.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        community: CommunitySummary;
-        canMarkAllRead: boolean;
-    }
-
-    let { community, canMarkAllRead }: Props = $props();
-
-    let showOtherChannels = $state(false);
-
-    function showCommunityMembers() {
-        setRightPanelHistory([{ kind: "show_community_members" }]);
-    }
-</script>
-
-{#if showOtherChannels}
-    <OtherChannels {community} onClose={() => (showOtherChannels = false)} />
-{/if}
-
-{#snippet menu()}
-    <CommunityMenu
-        onOtherChannels={() => (showOtherChannels = true)}
-        {canMarkAllRead}
-        {community} />
-{/snippet}
-
-<SectionHeader
-    onClick={() => publish("communityDetails", community)}
-    menu={$anonUserStore ? undefined : menu}>
-    {#snippet avatar()}
-        <Avatar
-            radius={"md"}
-            url={client.communityAvatarUrl(community.id.communityId, community.avatar)}
-            size={"lg"} />
-    {/snippet}
-    {#snippet title()}
-        <WithVerifiedBadge verified={community.verified}>
-            <h4 class="name">
-                {community.name}
-            </h4>
-        </WithVerifiedBadge>
-    {/snippet}
-    {#snippet subtitle()}
-        <Container gap={"sm"} onClick={showCommunityMembers} crossAxisAlignment={"center"}>
-            <VisibilityLabel isPublic={community.public} />
-            <Body>
-                <div class="members">
-                    <span class="num">{community.memberCount.toLocaleString()}</span>
-                    <Translatable resourceKey={i18nKey("members")} />
-                </div>
-            </Body>
-        </Container>
-    {/snippet}
-</SectionHeader>
-
-<style lang="scss">
-    .members {
-        color: var(--txt-light);
-        .num {
-            color: var(--txt);
-            font-weight: 700;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/communities/createOrUpdate/Permissions.svelte b/frontend/app/src/components_mobile/home/communities/createOrUpdate/Permissions.svelte
deleted file mode 100644
index 8c1956d0d7..0000000000
--- a/frontend/app/src/components_mobile/home/communities/createOrUpdate/Permissions.svelte
+++ /dev/null
@@ -1,91 +0,0 @@
-<script lang="ts">
-    import { i18nKey } from "@src/i18n/i18n";
-    import { Body, BodySmall, CommonButton, Container, Sheet } from "component-lib";
-    import {
-        communityRoles,
-        publish,
-        roleAsText,
-        type CommunityPermissions,
-    } from "@client";
-    import { _ } from "svelte-i18n";
-    import ArrowLeft from "svelte-material-icons/ArrowLeft.svelte";
-    import Translatable from "../../../Translatable.svelte";
-    import PermissionsRoleSlider from "../../PermissionsRoleSlider.svelte";
-    import SlidingPageContent from "../../SlidingPageContent.svelte";
-    import { updateCommunityState } from "./community.svelte";
-
-    const ucs = updateCommunityState;
-
-    const selectors = $derived(
-        Object.keys(ucs.permissions).map<[keyof CommunityPermissions, string]>((p) => [
-            p as keyof CommunityPermissions,
-            `permissions.${p}`,
-        ]),
-    );
-
-    let selected = $state<[keyof CommunityPermissions, string]>();
-</script>
-
-{#if selected !== undefined}
-    {@const [key, resourceKey] = selected}
-    <Sheet onDismiss={() => (selected = undefined)}>
-        <PermissionsRoleSlider
-            height={{ size: "150px" }}
-            roles={communityRoles}
-            label={i18nKey(resourceKey)}
-            onClose={() => (selected = undefined)}
-            bind:rolePermission={ucs.permissions[key]} />
-    </Sheet>
-{/if}
-
-<SlidingPageContent title={i18nKey("Community permissions")}>
-    <Container
-        height={"fill"}
-        gap={"xl"}
-        direction={"vertical"}
-        padding={["xxl", "xl", "lg", "xl"]}>
-        <Container gap={"sm"} direction={"vertical"}>
-            <Body fontWeight={"bold"}>
-                <Translatable resourceKey={i18nKey("Manage community permissions")}></Translatable>
-            </Body>
-
-            <BodySmall colour={"textSecondary"}>
-                <Translatable
-                    resourceKey={i18nKey(
-                        "You can assign permissions to different roles, from members to owners. Roles are built in a hierarchy, meaning that anyone above another role automatically gets everything that role can do.",
-                    )}></Translatable>
-            </BodySmall>
-        </Container>
-        <Container gap={"xxl"} direction={"vertical"}>
-            {#each selectors as [key, resourceKey]}
-                <Container
-                    onClick={() => (selected = [key, resourceKey])}
-                    mainAxisAlignment={"spaceBetween"}
-                    crossAxisAlignment={"end"}>
-                    <div class="label">
-                        <Body>
-                            <Translatable resourceKey={i18nKey(resourceKey)}></Translatable>
-                        </Body>
-                    </div>
-                    <BodySmall colour={"primary"} fontWeight={"bold"} width={"hug"}
-                        >{$_(`role.${roleAsText(ucs.permissions[key])}`)}</BodySmall>
-                </Container>
-            {/each}
-        </Container>
-
-        <Container padding={["xl", "zero", "zero", "zero"]} mainAxisAlignment={"end"}>
-            <CommonButton onClick={() => publish("closeModalPage")} mode="active" size={"medium"}>
-                {#snippet icon(color, size)}
-                    <ArrowLeft {color} {size} />
-                {/snippet}
-                <Translatable resourceKey={i18nKey("Done, go back")}></Translatable>
-            </CommonButton>
-        </Container>
-    </Container>
-</SlidingPageContent>
-
-<style lang="scss">
-    .label {
-        text-transform: capitalize;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/communities/details/CommunitySummary.svelte b/frontend/app/src/components_mobile/home/communities/details/CommunitySummary.svelte
deleted file mode 100644
index 5eb5f5d006..0000000000
--- a/frontend/app/src/components_mobile/home/communities/details/CommunitySummary.svelte
+++ /dev/null
@@ -1,357 +0,0 @@
-<script lang="ts">
-    import { i18nKey } from "@src/i18n/i18n";
-    import {
-        Avatar,
-        BigButton,
-        Body,
-        BodySmall,
-        Button,
-        ColourVars,
-        Container,
-        defaultBackgroundGradient,
-        H2,
-        IconButton,
-        StatusCard,
-    } from "component-lib";
-    import type { CommunitySummary, OpenChat } from "@client";
-    import {
-        allUsersStore,
-        anonUserStore,
-        chatSummariesListStore,
-        defaultChatRules,
-        publish,
-        ROLE_NONE,
-        ROLE_OWNER,
-        selectedCommunityMembersStore,
-        selectedCommunityRulesStore,
-    } from "@client";
-    import { getContext } from "svelte";
-    import AccountGroup from "svelte-material-icons/AccountGroup.svelte";
-    import ArrowLeft from "svelte-material-icons/ArrowLeft.svelte";
-    import At from "svelte-material-icons/At.svelte";
-    import BellOff from "svelte-material-icons/BellOff.svelte";
-    import Delete from "svelte-material-icons/DeleteForeverOutline.svelte";
-    import NewChannel from "svelte-material-icons/FormatListGroupPlus.svelte";
-    import Exit from "svelte-material-icons/Logout.svelte";
-    import Pound from "svelte-material-icons/Pound.svelte";
-    import Share from "svelte-material-icons/ShareVariantOutline.svelte";
-    import Edit from "svelte-material-icons/SquareEditOutline.svelte";
-    import Translatable from "../../../Translatable.svelte";
-    import AccessGateSummary from "../../AccessGateSummary.svelte";
-    import { updateGroupState } from "../../createOrUpdateGroup/group.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import BotsSummary from "../../membership/BotsSummary.svelte";
-    import MembersSummary from "../../membership/MembersSummary.svelte";
-    import Separator from "../../Separator.svelte";
-    import Stats from "../../Stats.svelte";
-    import { updateCommunityState } from "../createOrUpdate/community.svelte";
-    import { CommunityState } from "./communityState.svelte";
-    import PermissionsSummary from "./PermissionsSummary.svelte";
-    import UserGroupSummary from "./UserGroupSummary.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        community: CommunitySummary;
-    }
-
-    let { community }: Props = $props();
-
-    let communityState = new CommunityState(client, community);
-    let busy = $state(false);
-    let ownerMember = $derived(
-        [...$selectedCommunityMembersStore.values()].find((m) => m.role === ROLE_OWNER),
-    );
-    let owner = $derived(ownerMember ? $allUsersStore.get(ownerMember.userId) : undefined);
-    let canCreateChannel = $derived(communityState.canCreateChannel());
-    let accessibilityTitle = $derived(community.public ? "Public community" : "Private community");
-    let accessibilityInfo = $derived(
-        community.public
-            ? "This is a public community. Anyone will be able to discover and join this community."
-            : "This is a private community. Only people who are invited will be able to join this community.",
-    );
-    let canEdit = $derived(communityState.canEditCommunity());
-    let rules = $derived($selectedCommunityRulesStore ?? defaultChatRules("community"));
-
-    let isCommunityMuted = $derived(
-        $chatSummariesListStore.every((c) => c.membership.notificationsMuted),
-    );
-    let isAtEveryoneMutedForCommunity = $derived(
-        $chatSummariesListStore.every((c) => c.membership.atEveryoneMuted),
-    );
-
-    function newChannel(embedded: boolean) {
-        if (canCreateChannel) {
-            updateGroupState.initialise(client.createCandidateGroup("channel", embedded));
-            publish("newChannel", embedded);
-        }
-    }
-
-    function editCommunity() {
-        if (canEdit) {
-            updateCommunityState.initialise(community, rules);
-            publish("updateCommunity");
-        }
-    }
-
-    function leaveCommunity() {
-        publish("leaveCommunity", {
-            kind: "leave_community",
-            communityId: community.id,
-        });
-    }
-
-    function muteAllChannels(muteAtEveryone: boolean) {
-        communityState.muteAllChannels(muteAtEveryone);
-    }
-</script>
-
-<Container
-    closeMenuOnScroll
-    background={ColourVars.background0}
-    height={"fill"}
-    direction={"vertical"}>
-    <Container gap={"xl"} direction={"vertical"} padding={["lg", "md", "md", "md"]}>
-        <!-- this is the group card -->
-        <Container gap={"lg"} direction={"vertical"}>
-            <Container
-                supplementalClass={"group_details_header"}
-                borderRadius={"md"}
-                minHeight={"11rem"}
-                mainAxisAlignment={"end"}
-                padding={"sm"}
-                gap={"sm"}
-                background={communityState.bannerUrl() ?? defaultBackgroundGradient}>
-                <IconButton onclick={() => publish("closeModalPage")} size={"md"} mode={"dark"}>
-                    {#snippet icon(color)}
-                        <ArrowLeft {color} />
-                    {/snippet}
-                </IconButton>
-                {#if canCreateChannel}
-                    <IconButton onclick={() => newChannel(false)} size={"md"} mode={"dark"}>
-                        {#snippet icon(color)}
-                            <NewChannel {color} />
-                        {/snippet}
-                    </IconButton>
-                {/if}
-                {#if canEdit}
-                    <IconButton onclick={editCommunity} size={"md"} mode={"dark"}>
-                        {#snippet icon(color)}
-                            <Edit {color} />
-                        {/snippet}
-                    </IconButton>
-                {/if}
-            </Container>
-            <Container
-                supplementalClass={"name_and_description"}
-                gap={"xl"}
-                padding={["zero", "lg"]}
-                direction="vertical">
-                <Container crossAxisAlignment={"end"} gap={"md"}>
-                    <Avatar
-                        radius={"lg"}
-                        borderWidth={"thick"}
-                        size={"xxl"}
-                        url={communityState.avatarUrl()}></Avatar>
-                    <Container
-                        direction={"vertical"}
-                        mainAxisAlignment={"center"}
-                        supplementalClass={"group_name"}>
-                        <H2 fontWeight={"bold"} width={"hug"}>{community.name}</H2>
-                        <Container gap={"xs"}>
-                            <BodySmall colour={"textSecondary"} width={"hug"}>
-                                <Translatable resourceKey={i18nKey("owned by")} />
-                            </BodySmall>
-                            <BodySmall colour={"primary"}>
-                                @{owner?.username}
-                            </BodySmall>
-                        </Container>
-                    </Container>
-                </Container>
-
-                {#if !$anonUserStore}
-                    <Container gap={"sm"}>
-                        <BigButton
-                            disabled={isCommunityMuted}
-                            onClick={() => muteAllChannels(false)}>
-                            {#snippet icon(color, size)}
-                                <BellOff {color} {size} />
-                            {/snippet}
-                            <Translatable resourceKey={i18nKey("Mute all")} />
-                        </BigButton>
-                        <BigButton
-                            disabled={isAtEveryoneMutedForCommunity}
-                            onClick={() => muteAllChannels(true)}>
-                            {#snippet icon(color, size)}
-                                <At {color} {size} />
-                            {/snippet}
-                            <Translatable resourceKey={i18nKey("Mute @everyone")} />
-                        </BigButton>
-                        <BigButton onClick={() => communityState.share()}>
-                            {#snippet icon(color, size)}
-                                <Share {color} {size} />
-                            {/snippet}
-                            <Translatable resourceKey={i18nKey("Share")} />
-                        </BigButton>
-                    </Container>
-                {/if}
-            </Container>
-
-            <StatusCard mode="information" title={accessibilityTitle} body={accessibilityInfo}>
-                {#snippet icon(color, size)}
-                    <AccountGroup {color} {size} />
-                {/snippet}
-            </StatusCard>
-
-            <Container padding={["zero", "lg"]} direction="vertical">
-                <Body fontWeight={"light"}>
-                    <Markdown inline={false} text={community.description} />
-                </Body>
-            </Container>
-        </Container>
-
-        <MembersSummary collection={community} />
-
-        <BotsSummary collection={community} />
-
-        <UserGroupSummary {communityState} />
-
-        <PermissionsSummary permissions={community.permissions} isPublic={community.public} />
-
-        <AccessGateSummary gateConfig={community.gateConfig} />
-
-        {#if rules.enabled}
-            <Separator />
-
-            <Container gap={"lg"} direction={"vertical"} padding={["zero", "md"]}>
-                <Body colour={"textSecondary"} fontWeight={"bold"}>
-                    <Translatable resourceKey={i18nKey("Community rules")}></Translatable>
-                </Body>
-
-                <Body><Markdown inline={false} text={rules.text} /></Body>
-            </Container>
-        {/if}
-
-        <Separator />
-
-        <Container gap={"lg"} direction={"vertical"} padding={["zero", "md"]}>
-            <BodySmall colour={"textSecondary"} fontWeight={"bold"}>
-                <Translatable resourceKey={i18nKey("Community stats")}></Translatable>
-            </BodySmall>
-            <Stats showReported={false} stats={community.metrics} />
-        </Container>
-
-        {#if canCreateChannel}
-            <Separator />
-
-            <Container gap={"lg"} direction={"vertical"} padding={["zero", "md"]}>
-                <Container direction={"vertical"} gap={"sm"}>
-                    <Body fontWeight={"bold"}>
-                        <Translatable resourceKey={i18nKey("Add new channel")}></Translatable>
-                    </Body>
-                    <Body colour={"textSecondary"}>
-                        <Translatable resourceKey={i18nKey("Add a new channel to this community")}
-                        ></Translatable>
-                    </Body>
-                </Container>
-
-                <Button onClick={() => newChannel(false)}>
-                    {#snippet icon(color)}
-                        <NewChannel {color} />
-                    {/snippet}
-                    <Translatable resourceKey={i18nKey("Add channel")}></Translatable>
-                </Button>
-            </Container>
-
-            <Separator />
-
-            <Container gap={"lg"} direction={"vertical"} padding={["zero", "md"]}>
-                <Container direction={"vertical"} gap={"sm"}>
-                    <Body fontWeight={"bold"}>
-                        <Translatable resourceKey={i18nKey("Add embedded channel")}></Translatable>
-                    </Body>
-                    <Body colour={"textSecondary"}>
-                        <Translatable
-                            resourceKey={i18nKey(
-                                "Add an embedded channel to display third party content to this community.",
-                            )}></Translatable>
-                    </Body>
-                </Container>
-
-                <Button onClick={() => newChannel(true)}>
-                    {#snippet icon(color)}
-                        <Pound {color} />
-                    {/snippet}
-                    <Translatable resourceKey={i18nKey("Add embedded channel")}></Translatable>
-                </Button>
-            </Container>
-
-            {#if client.canDeleteCommunity(community.id)}
-                <Separator />
-
-                <Container gap={"lg"} direction={"vertical"} padding={["zero", "md"]}>
-                    <Container direction={"vertical"} gap={"sm"}>
-                        <Body fontWeight={"bold"}>
-                            <Translatable resourceKey={i18nKey("Delete community")}></Translatable>
-                        </Body>
-                        <Body colour={"textSecondary"}>
-                            <Translatable
-                                resourceKey={i18nKey(
-                                    "Keep in mind that by deleting a community all of its data is also removed, and this operation cannot be undone.",
-                                )}></Translatable>
-                        </Body>
-                    </Container>
-
-                    <Button
-                        danger
-                        loading={busy}
-                        onClick={() => publish("deleteCommunityMobile", community)}>
-                        {#snippet icon(color)}
-                            <Delete {color} />
-                        {/snippet}
-                        <Translatable resourceKey={i18nKey("Delete community")}></Translatable>
-                    </Button>
-                </Container>
-            {:else if community.membership.role !== ROLE_NONE}
-                <Separator />
-
-                <Container gap={"lg"} direction={"vertical"} padding={["zero", "md"]}>
-                    <Container direction={"vertical"} gap={"sm"}>
-                        <Body fontWeight={"bold"}>
-                            <Translatable resourceKey={i18nKey("Leave community")}></Translatable>
-                        </Body>
-                        <Body colour={"textSecondary"}>
-                            <Translatable
-                                resourceKey={i18nKey(
-                                    "Keep in mind that you may have to pass access gates to re-join later. A community must have at least one owner.",
-                                )}></Translatable>
-                        </Body>
-                    </Container>
-
-                    <Button loading={busy} onClick={leaveCommunity}>
-                        {#snippet icon(color)}
-                            <Exit {color} />
-                        {/snippet}
-                        <Translatable resourceKey={i18nKey("Leave community")}></Translatable>
-                    </Button>
-                </Container>
-            {/if}
-        {/if}
-    </Container>
-</Container>
-
-<style lang="scss">
-    :global(.container.name_and_description) {
-        margin-top: -1.75rem;
-    }
-
-    :global(.container.group_details_header) {
-        background-size: cover !important;
-        background-position: center !important;
-        background-repeat: no-repeat !important;
-    }
-
-    :global(.container.group_details_header > .icon_button:first-child) {
-        margin-inline-end: auto;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/communities/details/ConfirmDelete.svelte b/frontend/app/src/components_mobile/home/communities/details/ConfirmDelete.svelte
deleted file mode 100644
index 76c49f4e1b..0000000000
--- a/frontend/app/src/components_mobile/home/communities/details/ConfirmDelete.svelte
+++ /dev/null
@@ -1,112 +0,0 @@
-<script lang="ts">
-    import { toastStore } from "@src/stores/toast";
-    import { Body, Button, ColourVars, Container, H2, Input } from "component-lib";
-    import {
-        i18nKey,
-        OpenChat,
-        publish,
-        routeForScope,
-        type CommunitySummary,
-    } from "@client";
-    import { navigate } from "@utils/navigation";
-    import { getContext } from "svelte";
-    import ChevronRight from "svelte-material-icons/ChevronRight.svelte";
-    import Delete from "svelte-material-icons/DeleteForeverOutline.svelte";
-    import MulticolourText from "../../../MulticolourText.svelte";
-    import Translatable from "../../../Translatable.svelte";
-    import SlidingPageContent from "../../SlidingPageContent.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        community: CommunitySummary;
-    }
-
-    let { community }: Props = $props();
-
-    let communityName = $state<string>();
-    let deleting = $state(false);
-
-    function deleteCommunity() {
-        deleting = true;
-        navigate(routeForScope(client.getDefaultScope()));
-        client
-            .deleteCommunity(community.id)
-            .then((success) => {
-                if (!success) {
-                    toastStore.showFailureToast(i18nKey("communities.errors.deleteFailed"));
-                    navigate(`/community/${community.id.communityId}`);
-                } else {
-                    publish("closeModalStack");
-                }
-            })
-            .finally(() => (deleting = false));
-    }
-</script>
-
-<SlidingPageContent title={i18nKey("Delete a chat")} subtitle={i18nKey(community.name)}>
-    <Container direction={"vertical"} gap={"xxl"} padding={["xxl", "lg"]}>
-        <Container padding={["zero", "lg"]} gap={"sm"} direction={"vertical"}>
-            <Delete color={ColourVars.primary} size={"7rem"} />
-            <H2>
-                <MulticolourText
-                    parts={[
-                        {
-                            text: i18nKey("Delete the "),
-                            colour: "textPrimary",
-                        },
-                        {
-                            text: i18nKey(community.name),
-                            colour: "primary",
-                        },
-                        {
-                            text: i18nKey(" community"),
-                            colour: "textPrimary",
-                        },
-                    ]}></MulticolourText>
-            </H2>
-            <Body colour={"textSecondary"}>
-                <Translatable
-                    resourceKey={i18nKey(
-                        "Do you definitely want to delete this community? All of your history will be lost, and this cannot be undone.",
-                    )} />
-            </Body>
-        </Container>
-
-        <Container>
-            <Input
-                error={communityName !== community.name}
-                bind:value={communityName}
-                placeholder={"Type in community name..."}
-                minlength={0}
-                maxlength={200}
-                countdown={false}>
-                {#snippet subtext()}
-                    <Translatable
-                        resourceKey={i18nKey(
-                            "Type in the exact name of the chat to confirm deletion",
-                        )} />
-                {/snippet}
-            </Input>
-        </Container>
-
-        <Container direction={"vertical"} gap={"lg"}>
-            <Button
-                loading={deleting}
-                disabled={communityName !== community.name}
-                danger
-                onClick={deleteCommunity}>
-                <Translatable resourceKey={i18nKey("Delete")} />
-                {#snippet icon(color)}
-                    <Delete {color} />
-                {/snippet}
-            </Button>
-            <Button secondary onClick={() => publish("closeModalPage")}>
-                <Translatable resourceKey={i18nKey("No, back to safety")} />
-                {#snippet icon(color)}
-                    <ChevronRight {color} />
-                {/snippet}
-            </Button>
-        </Container>
-    </Container>
-</SlidingPageContent>
diff --git a/frontend/app/src/components_mobile/home/communities/details/PermissionsSummary.svelte b/frontend/app/src/components_mobile/home/communities/details/PermissionsSummary.svelte
deleted file mode 100644
index ebdad35f06..0000000000
--- a/frontend/app/src/components_mobile/home/communities/details/PermissionsSummary.svelte
+++ /dev/null
@@ -1,78 +0,0 @@
-<script lang="ts">
-    import { i18nKey } from "@src/i18n/i18n";
-    import { Body, Container, type SizeMode } from "component-lib";
-    import {
-        communityRoles,
-        ROLE_ADMIN,
-        ROLE_MEMBER,
-        ROLE_OWNER,
-        type CommunityPermissionRole,
-        type CommunityPermissions,
-        type ResourceKey,
-    } from "@client";
-    import Translatable from "../../../Translatable.svelte";
-    import Separator from "../../Separator.svelte";
-
-    interface Props {
-        permissions: CommunityPermissions;
-        isPublic: boolean;
-    }
-
-    let { permissions, isPublic }: Props = $props();
-
-    type PermissionsByRole = Record<CommunityPermissionRole, Set<string>>;
-    type PermissionsEntry = [keyof CommunityPermissions, CommunityPermissionRole];
-
-    const roleLabels: Record<CommunityPermissionRole, ResourceKey> = {
-        [ROLE_OWNER]: i18nKey("permissions.ownerOnly"),
-        [ROLE_ADMIN]: i18nKey("permissions.ownerAndAdmins"),
-        [ROLE_MEMBER]: i18nKey("permissions.allMembers"),
-    };
-
-    function partitionPermissions(permissions: CommunityPermissions): PermissionsByRole {
-        return (Object.entries(permissions) as PermissionsEntry[]).reduce(
-            (dict: PermissionsByRole, [key, val]) => {
-                if (key !== "inviteUsers" || !isPublic) {
-                    dict[val].add(`permissions.${key}`);
-                }
-                return dict;
-            },
-            {
-                [ROLE_OWNER]: new Set(),
-                [ROLE_ADMIN]: new Set(),
-                [ROLE_MEMBER]: new Set(),
-            } as PermissionsByRole,
-        );
-    }
-    let partitioned = $derived(partitionPermissions(permissions));
-    const width: SizeMode = "hug";
-</script>
-
-<Separator />
-
-<Container padding={["zero", "md"]} gap={"xl"} direction={"vertical"}>
-    <Body colour={"textSecondary"} fontWeight={"bold"}>
-        <Translatable resourceKey={i18nKey("Permissions")}></Translatable>
-    </Body>
-
-    {#each communityRoles as role}
-        {#if partitioned[role].size > 0}
-            {@const perms = [...partitioned[role]]}
-            <Container {width} wrap gap={"sm"}>
-                <Body {width} colour={"textSecondary"}>
-                    <Translatable resourceKey={roleLabels[role]} />
-                </Body>
-                <Body {width} colour={"textSecondary"}>//</Body>
-                {#each perms as perm, i}
-                    {@const last = i === perms.length - 1}
-                    <Body {width}>
-                        <Translatable resourceKey={i18nKey(perm)} />
-                    </Body>
-                    {#if !last}
-                        <Body colour={"primary"} {width}>/</Body>
-                    {/if}
-                {/each}
-            </Container>
-        {/if}
-    {/each}
-</Container>
diff --git a/frontend/app/src/components_mobile/home/communities/details/UserGroup.svelte b/frontend/app/src/components_mobile/home/communities/details/UserGroup.svelte
deleted file mode 100644
index d810f8159a..0000000000
--- a/frontend/app/src/components_mobile/home/communities/details/UserGroup.svelte
+++ /dev/null
@@ -1,107 +0,0 @@
-<script lang="ts">
-    import { Body, BodySmall, Container, FloatingButton, Search } from "component-lib";
-    import {
-        allUsersStore,
-        publish,
-        selectedCommunityUserGroupsStore,
-        type CommunitySummary,
-        type OpenChat,
-        type UserGroupDetails,
-        type UserSummary,
-    } from "@client";
-    import { getContext, onMount } from "svelte";
-    import { _ } from "svelte-i18n";
-    import Edit from "svelte-material-icons/SquareEditOutline.svelte";
-    import { i18nKey, interpolate } from "../../../../i18n/i18n";
-    import { trimLeadingAtSymbol } from "../../../../utils/user";
-    import Translatable from "../../../Translatable.svelte";
-    import SlidingPageContent from "../../SlidingPageContent.svelte";
-    import User from "../../User.svelte";
-    import { CommunityState } from "./communityState.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        community: CommunitySummary;
-        userGroup: UserGroupDetails;
-    }
-
-    onMount(() => {
-        return selectedCommunityUserGroupsStore.subscribe((groups) => {
-            const ug = groups.get(userGroup.id);
-            if (ug !== undefined) {
-                userGroup = ug;
-            }
-        });
-    });
-
-    let { community, userGroup }: Props = $props();
-
-    let communityState = new CommunityState(client, community);
-    let searchTermEntered = $state("");
-
-    function matchesSearch(searchTerm: string, user: UserSummary): boolean {
-        if (searchTerm === "") return true;
-        return (
-            user.username.toLowerCase().includes(searchTerm) ||
-            (user.displayName !== undefined && user.displayName.toLowerCase().includes(searchTerm))
-        );
-    }
-
-    let searchTerm = $derived(trimLeadingAtSymbol(searchTermEntered));
-    let searchTermLower = $derived(searchTerm.toLowerCase());
-    let groupUsers = $derived(
-        [...userGroup.members]
-            .map((m) => $allUsersStore.get(m))
-            .filter((u) => u !== undefined) as UserSummary[],
-    );
-    let matchedUsers = $derived(groupUsers.filter((u) => matchesSearch(searchTermLower, u)));
-
-    function editUserGroup() {
-        publish("editUserGroup", userGroup);
-    }
-</script>
-
-<SlidingPageContent
-    subtitle={i18nKey(`User group in ${community.name}`)}
-    title={i18nKey(userGroup.name)}>
-    <Container height={"fill"} mainAxisAlignment={"spaceBetween"} direction={"vertical"}>
-        <Container
-            height={"fill"}
-            gap={"xl"}
-            padding={["xxl", "lg", "lg", "lg"]}
-            direction={"vertical"}>
-            <Search
-                searching={false}
-                bind:value={searchTermEntered}
-                placeholder={interpolate($_, i18nKey("Search user group members..."))} />
-
-            <Container padding={["zero", "md"]} direction={"vertical"}>
-                <Body fontWeight={"bold"}>
-                    <Translatable
-                        resourceKey={i18nKey(`${userGroup.name} (${userGroup.members.size})`)} />
-                </Body>
-
-                <BodySmall colour={"textSecondary"}>
-                    <Translatable
-                        resourceKey={i18nKey(
-                            "Manage members of this group or update group data.",
-                        )} />
-                </BodySmall>
-            </Container>
-
-            <Container padding={["zero", "md"]} gap={"xl"} direction={"vertical"}>
-                {#each matchedUsers as user}
-                    <User {searchTerm} {user} />
-                {/each}
-            </Container>
-        </Container>
-    </Container>
-    {#if communityState.canManageUserGroups}
-        <FloatingButton pos={{ bottom: "lg", right: "lg" }} onClick={editUserGroup}>
-            {#snippet icon(color)}
-                <Edit {color} />
-            {/snippet}
-        </FloatingButton>
-    {/if}
-</SlidingPageContent>
diff --git a/frontend/app/src/components_mobile/home/communities/details/UserGroups.svelte b/frontend/app/src/components_mobile/home/communities/details/UserGroups.svelte
deleted file mode 100644
index c3804db71c..0000000000
--- a/frontend/app/src/components_mobile/home/communities/details/UserGroups.svelte
+++ /dev/null
@@ -1,88 +0,0 @@
-<script lang="ts">
-    import { Body, BodySmall, Container, FloatingButton, Search } from "component-lib";
-    import type { CommunitySummary, OpenChat, UserGroupDetails } from "@client";
-    import { publish, selectedCommunityUserGroupsStore } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import Plus from "svelte-material-icons/Plus.svelte";
-    import { SvelteSet } from "svelte/reactivity";
-    import { i18nKey, interpolate } from "../../../../i18n/i18n";
-    import Translatable from "../../../Translatable.svelte";
-    import SlidingPageContent from "../../SlidingPageContent.svelte";
-    import UserGroupRow from "./UserGroupRow.svelte";
-    import { CommunityState } from "./communityState.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        community: CommunitySummary;
-    }
-
-    let { community }: Props = $props();
-    let communityState = new CommunityState(client, community);
-
-    let searchTerm = $state("");
-
-    function matchesSearch(searchTerm: string, userGroup: UserGroupDetails): boolean {
-        if (searchTerm === "") return true;
-        return userGroup.name.toLowerCase().includes(searchTerm);
-    }
-
-    function createUserGroup() {
-        publish("editUserGroup", {
-            kind: "user_group",
-            id: -1,
-            name: "",
-            members: new SvelteSet<string>(),
-        });
-    }
-
-    let searchTermLower = $derived(searchTerm.toLowerCase());
-    let userGroups = $derived([...$selectedCommunityUserGroupsStore.values()]);
-    let canManageUserGroups = $derived(client.canManageUserGroups(community.id));
-    let matchingGroups = $derived(userGroups.filter((ug) => matchesSearch(searchTermLower, ug)));
-</script>
-
-<SlidingPageContent title={i18nKey("User groups")} subtitle={i18nKey(community.name)}>
-    <Container height={"fill"} mainAxisAlignment={"spaceBetween"} direction={"vertical"}>
-        <Container
-            height={"fill"}
-            gap={"xl"}
-            padding={["xxl", "lg", "lg", "lg"]}
-            direction={"vertical"}>
-            <Search
-                searching={false}
-                bind:value={searchTerm}
-                onClear={() => (searchTerm = "")}
-                placeholder={interpolate($_, i18nKey("communities.searchUserGroups"))} />
-
-            <Container padding={["zero", "md"]} direction={"vertical"}>
-                <Body fontWeight={"bold"}>
-                    {#if userGroups.length === 0}
-                        <Translatable resourceKey={i18nKey("communities.noUserGroups")} />
-                    {:else}
-                        <Translatable resourceKey={i18nKey(`User groups (${userGroups.length})`)} />
-                    {/if}
-                </Body>
-
-                <BodySmall colour={"textSecondary"}>
-                    <Translatable
-                        resourceKey={i18nKey(
-                            "User groups allow you to tag / @mention all users assigned to a particular group in a chat message.",
-                        )} />
-                </BodySmall>
-            </Container>
-
-            <Container padding={["zero", "md"]} gap={"xl"} direction={"vertical"}>
-                {#each matchingGroups as userGroup}
-                    <UserGroupRow {userGroup} {canManageUserGroups} {communityState} />
-                {/each}
-            </Container>
-        </Container>
-    </Container>
-    <FloatingButton pos={{ bottom: "lg", right: "lg" }} onClick={createUserGroup}>
-        {#snippet icon(color)}
-            <Plus {color} />
-        {/snippet}
-    </FloatingButton>
-</SlidingPageContent>
diff --git a/frontend/app/src/components_mobile/home/communities/edit/Details.svelte b/frontend/app/src/components_mobile/home/communities/edit/Details.svelte
deleted file mode 100644
index 678ff5b56b..0000000000
--- a/frontend/app/src/components_mobile/home/communities/edit/Details.svelte
+++ /dev/null
@@ -1,118 +0,0 @@
-<script lang="ts">
-    import EditableAvatar from "@src/components/EditableAvatar.svelte";
-    import EditableBanner from "@src/components/EditableBanner.svelte";
-    import type { CommunitySummary } from "@client";
-    import { i18nKey, supportedLanguages } from "../../../../i18n/i18n";
-    import Input from "../../../Input.svelte";
-    import Legend from "../../../Legend.svelte";
-    import Select from "../../../Select.svelte";
-    import TextArea from "../../../TextArea.svelte";
-
-    const MIN_LENGTH = 3;
-    const MAX_LENGTH = 25;
-    const MAX_DESC_LENGTH = 1024;
-
-    interface Props {
-        busy: boolean;
-        candidate: CommunitySummary;
-        valid: boolean;
-    }
-
-    let { busy = $bindable(false), candidate = $bindable(), valid = $bindable() }: Props = $props();
-
-    $effect(() => {
-        const isValid =
-            candidate.name.length >= MIN_LENGTH &&
-            candidate.name.length <= MAX_LENGTH &&
-            candidate.description.length <= MAX_DESC_LENGTH &&
-            candidate.description.length > 0;
-        if (isValid !== valid) {
-            valid = isValid;
-        }
-    });
-
-    function communityAvatarSelected(detail: { url: string; data: Uint8Array }) {
-        candidate.avatar = {
-            blobUrl: detail.url,
-            blobData: detail.data,
-        };
-    }
-
-    function communityBannerSelected(detail: { url: string; data: Uint8Array }) {
-        candidate.banner = {
-            blobUrl: detail.url,
-            blobData: detail.data,
-        };
-    }
-</script>
-
-<section class="images-section">
-    <Legend label={i18nKey("communities.imageLabel")} />
-    <div class="images">
-        <div class="banner">
-            <EditableBanner
-                image={candidate.banner?.blobUrl}
-                onImageSelected={communityBannerSelected} />
-        </div>
-        <div class="avatar">
-            <EditableAvatar
-                overlayIcon
-                size={"medium"}
-                image={candidate.avatar?.blobUrl}
-                onImageSelected={communityAvatarSelected} />
-        </div>
-    </div>
-</section>
-<section>
-    <Legend required label={i18nKey("communities.name")} />
-    <Input
-        autofocus
-        disabled={busy}
-        bind:value={candidate.name}
-        minlength={MIN_LENGTH}
-        maxlength={MAX_LENGTH}
-        countdown
-        placeholder={i18nKey("communities.namePlaceholder")} />
-</section>
-<section>
-    <Legend label={i18nKey("communities.primaryLanguage")} />
-    <Select bind:value={candidate.primaryLanguage}>
-        {#each supportedLanguages as lang}
-            <option value={lang.code}>{lang.name}</option>
-        {/each}
-    </Select>
-</section>
-<section>
-    <Legend
-        required
-        label={i18nKey("communities.description")}
-        rules={i18nKey("supportsMarkdown")} />
-    <TextArea
-        rows={4}
-        disabled={busy}
-        bind:value={candidate.description}
-        maxlength={MAX_DESC_LENGTH}
-        placeholder={i18nKey("communities.descriptionPlaceholder")} />
-</section>
-
-<style lang="scss">
-    .avatar {
-        position: absolute;
-        bottom: toRem(-32);
-        left: toRem(24);
-        border-radius: var(--avatar-rd);
-        border: 2px solid var(--txt-light);
-    }
-
-    section {
-        margin-bottom: $sp4;
-
-        &.images-section {
-            margin-bottom: $sp7;
-        }
-    }
-
-    .images {
-        position: relative;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/communities/explore/CommunityCard.svelte b/frontend/app/src/components_mobile/home/communities/explore/CommunityCard.svelte
deleted file mode 100644
index 4595bdbfbd..0000000000
--- a/frontend/app/src/components_mobile/home/communities/explore/CommunityCard.svelte
+++ /dev/null
@@ -1,152 +0,0 @@
-<script lang="ts">
-    import { flattenGateConfig } from "@src/utils/access";
-    import {
-        Avatar,
-        Body,
-        BodySmall,
-        Chip,
-        ColourVars,
-        Container,
-        ReadMore,
-        Title,
-    } from "component-lib";
-    import type { AccessGateConfig, DataContent, OpenChat } from "@client";
-    import { ModerationFlags } from "@client";
-    import { getContext } from "svelte";
-    import Translate from "svelte-material-icons/Translate.svelte";
-    import { i18nKey, supportedLanguagesByCode } from "../../../../i18n/i18n";
-    import Translatable from "../../../Translatable.svelte";
-    import WithVerifiedBadge from "../../../icons/WithVerifiedBadge.svelte";
-    import IntersectionObserver from "../../IntersectionObserver.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import AccessGateChip from "../../access_gates/AccessGateChip.svelte";
-    import CommunityBanner from "./CommunityBanner.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        id: string;
-        name: string;
-        description: string;
-        avatar: DataContent;
-        banner: DataContent;
-        memberCount: number;
-        channelCount: number;
-        header?: boolean;
-        gateConfig: AccessGateConfig;
-        language: string;
-        flags: number;
-        verified: boolean;
-    }
-
-    let {
-        id,
-        name,
-        description,
-        avatar,
-        banner,
-        memberCount,
-        channelCount,
-        header = false,
-        gateConfig,
-        language,
-        flags,
-        verified,
-    }: Props = $props();
-
-    let gates = flattenGateConfig(gateConfig);
-
-    let flagsArray = $derived(serialiseFlags(flags));
-    function serialiseFlags(flags: number) {
-        const f: string[] = [];
-        if (client.hasModerationFlag(flags, ModerationFlags.Adult)) {
-            f.push("communities.adult");
-        }
-        if (client.hasModerationFlag(flags, ModerationFlags.Offensive)) {
-            f.push("communities.offensive");
-        }
-        if (client.hasModerationFlag(flags, ModerationFlags.UnderReview)) {
-            f.push("communities.underReview");
-        }
-        return f;
-    }
-</script>
-
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<Container
-    padding={["zero", "zero", "lg", "zero"]}
-    borderRadius={"md"}
-    background={ColourVars.background1}
-    direction={"vertical"}>
-    <IntersectionObserver>
-        {#snippet children(intersecting)}
-            <CommunityBanner {intersecting} square={header} {banner}>
-                <Container
-                    pos={{ bottom: "sm", right: "sm" }}
-                    width={"hug"}
-                    crossAxisAlignment={"center"}
-                    gap={"xs"}
-                    borderRadius={"md"}
-                    padding={["xs", "md"]}
-                    background={ColourVars.background0}>
-                    <Translate color={ColourVars.primaryLight} />
-                    <BodySmall colour={"primaryLight"}>
-                        {supportedLanguagesByCode[language]?.name}
-                    </BodySmall>
-                </Container>
-            </CommunityBanner>
-        {/snippet}
-    </IntersectionObserver>
-    <Container
-        supplementalClass={"community_details"}
-        gap={"md"}
-        padding={["zero", "lg"]}
-        direction="vertical">
-        <Container gap={"sm"}>
-            <Avatar borderWidth={"thick"} size={"xxl"} url={client.communityAvatarUrl(id, avatar)}
-            ></Avatar>
-            <Container height={"fill"} mainAxisAlignment={"end"} direction={"vertical"}>
-                <Container gap={"sm"} crossAxisAlignment={"center"}>
-                    <WithVerifiedBadge
-                        {verified}
-                        tooltip={i18nKey("verified.verified", undefined, "community")}>
-                        <Title fontWeight={"bold"}>
-                            {name}
-                        </Title>
-                    </WithVerifiedBadge>
-                </Container>
-                <BodySmall colour={"textSecondary"}>
-                    <Container gap={"xs"}>
-                        {memberCount.toLocaleString()} members
-                        <span>//</span>
-                        {channelCount} channels
-                    </Container>
-                </BodySmall>
-            </Container>
-        </Container>
-        <ReadMore>
-            <Body fontWeight={"light"}>
-                <Markdown inline={false} text={description} />
-            </Body>
-        </ReadMore>
-        <Container gap={"sm"} wrap>
-            {#each flagsArray as flag}
-                <Chip mode={"default"}>
-                    <div class="flag"><Translatable resourceKey={i18nKey(flag)} /></div>
-                </Chip>
-            {/each}
-        </Container>
-        <Container gap={"sm"} wrap>
-            {#each gates as gate}
-                <AccessGateChip {gate} />
-            {/each}
-        </Container>
-    </Container>
-</Container>
-
-<style lang="scss">
-    :global(.container.community_details) {
-        margin-top: -2rem;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/communities/explore/Explore.svelte b/frontend/app/src/components_mobile/home/communities/explore/Explore.svelte
deleted file mode 100644
index 3ff6745334..0000000000
--- a/frontend/app/src/components_mobile/home/communities/explore/Explore.svelte
+++ /dev/null
@@ -1,480 +0,0 @@
-<script lang="ts">
-    import { disableRestrictedContent } from "@src/utils/features";
-    import {
-        Body,
-        Button,
-        Chip,
-        ColourVars,
-        CommonButton,
-        Container,
-        FloatingButton,
-        MenuItem,
-        Overview,
-        Search,
-        SectionHeader,
-        Sheet,
-        Subtitle,
-        transition,
-    } from "component-lib";
-    import {
-        anonUserStore,
-        botState,
-        exploreCommunitiesFiltersStore,
-        identityStateStore,
-        offlineStore,
-        publish,
-        showUnpublishedBots,
-        type BotMatch,
-        type CommunityMatch,
-        type OpenChat,
-    } from "@client";
-    import { navigate } from "@utils/navigation";
-    import { getContext, onMount, tick } from "svelte";
-    import { _ } from "svelte-i18n";
-    import Account from "svelte-material-icons/AccountGroupOutline.svelte";
-    import ArrowUp from "svelte-material-icons/ArrowUp.svelte";
-    import LoadMore from "svelte-material-icons/CloudDownloadOutline.svelte";
-    import CloudOffOutline from "svelte-material-icons/CloudOffOutline.svelte";
-    import EyeOutline from "svelte-material-icons/EyeOutline.svelte";
-    import Filter from "svelte-material-icons/FilterVariant.svelte";
-    import Robot from "svelte-material-icons/RobotOutline.svelte";
-    import { fade } from "svelte/transition";
-    import { i18nKey, interpolate } from "../../../../i18n/i18n";
-    import {
-        botSearchState,
-        communitySearchState,
-        SearchState,
-    } from "../../../../stores/search.svelte";
-    import FancyLoader from "../../../icons/FancyLoader.svelte";
-    import Translatable from "../../../Translatable.svelte";
-    import AnonFooter from "../../AnonFooter.svelte";
-    import NothingToSee from "../../NothingToSee.svelte";
-    import { updateCommunityState } from "../createOrUpdate/community.svelte";
-    import BotCard from "./BotCard.svelte";
-    import BotFilters from "./BotFilters.svelte";
-    import CommunityCard from "./CommunityCard.svelte";
-    import CommunityMatchComponent from "./CommunityMatch.svelte";
-    import CommunityFilters from "./Filters.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    type View = "communities" | "bots";
-    let searching = $state(false);
-    let showFab = $state(false);
-    let scrollableElement: HTMLElement | undefined;
-    let initialised = $state(false);
-    let view = $state<View>("communities");
-    let showingFilters = $state(false);
-    let selectedCommunity = $state<CommunityMatch>();
-
-    let searchState = $derived<SearchState<CommunityMatch | BotMatch>>(
-        view === "communities" ? communitySearchState : botSearchState,
-    );
-
-    function clear() {
-        searchState.term = "";
-        communitySearchState.term = "";
-        botSearchState.term = "";
-        search(true);
-    }
-
-    function createCommunity() {
-        updateCommunityState.createCommunity(client);
-    }
-
-    function registerBot() {
-        if (anonUserStore.value) {
-            client.updateIdentityState({
-                kind: "logging_in",
-                postLogin: { kind: "register_bot" },
-            });
-            return;
-        } else {
-            publish("registerBot");
-        }
-    }
-
-    function searchCommunities(
-        filters: {
-            languages: string[];
-            flags: number;
-        },
-        reset = false,
-    ) {
-        if (reset) {
-            communitySearchState.reset();
-        } else {
-            communitySearchState.nextPage();
-        }
-        client
-            .exploreCommunities(
-                communitySearchState.term === "" ? undefined : communitySearchState.term,
-                communitySearchState.index,
-                32,
-                disableRestrictedContent ? 0 : filters.flags ?? 0,
-                filters.languages,
-            )
-            .then((results) => {
-                if (results.kind === "success") {
-                    if (reset) {
-                        communitySearchState.results = results.matches;
-                    } else {
-                        communitySearchState.appendResults(results.matches);
-                    }
-                    communitySearchState.total = results.total;
-                }
-            })
-            .finally(() => (searching = false));
-    }
-
-    function searchBots(showUnpublished: boolean) {
-        botSearchState.results = [...botState.externalBots.values()]
-            .filter(
-                (b) =>
-                    (b.registrationStatus.kind === "public" || showUnpublished) &&
-                    (b.name.toLocaleLowerCase().includes(botSearchState.term.toLocaleLowerCase()) ||
-                        b.definition.description
-                            .toLocaleLowerCase()
-                            .includes(botSearchState.term.toLocaleLowerCase())),
-            )
-            .map((b) => ({
-                ...b,
-                kind: "bot_match",
-            }));
-        searching = false;
-    }
-
-    function search(reset = false) {
-        searching = true;
-        if (view === "communities") {
-            searchCommunities($exploreCommunitiesFiltersStore, reset);
-        } else {
-            searchBots($showUnpublishedBots);
-        }
-    }
-
-    onMount(() => {
-        tick().then(() => {
-            if (scrollableElement) {
-                scrollableElement.scrollTop = searchState.scrollPos;
-                scrollableElement.addEventListener("scroll", onScroll);
-            }
-            onScroll();
-        });
-
-        const unsub = exploreCommunitiesFiltersStore.subscribe((filters) => {
-            if (initialised || communitySearchState.results.length === 0) {
-                searchCommunities(filters, true);
-            }
-            initialised = true;
-        });
-
-        const unsubBot = showUnpublishedBots.subscribe((show) => {
-            if (initialised || botSearchState.results.length === 0) {
-                searchBots(show);
-            }
-            initialised = true;
-        }, undefined);
-
-        return () => {
-            scrollableElement?.removeEventListener("scroll", onScroll);
-            unsub();
-            unsubBot();
-        };
-    });
-
-    function setView(v: View) {
-        transition(["fade"], () => {
-            view = v;
-        });
-        search(true);
-    }
-
-    function scrollToTop() {
-        if (scrollableElement) {
-            scrollableElement.scrollTop = 0;
-        }
-    }
-
-    function onScroll() {
-        if (scrollableElement) {
-            showFab = scrollableElement.scrollTop > 500;
-            searchState.scrollPos = scrollableElement.scrollTop;
-        }
-    }
-    let more = $derived(searchState.total > searchState.results.length);
-    let loading = $derived(searching && searchState.results.length === 0);
-
-    function goToCommunity(community: CommunityMatch) {
-        navigate(`/community/${community.id.communityId}`);
-    }
-
-    function showCommunity(community: CommunityMatch) {
-        selectedCommunity = community;
-    }
-
-    function scrolledToBottom(fromEnd: number) {
-        if (fromEnd < 100 && more && !searching) {
-            search(false);
-        }
-    }
-</script>
-
-{#if selectedCommunity !== undefined}
-    <Sheet onDismiss={() => (selectedCommunity = undefined)}>
-        <Container padding={"lg"} direction={"vertical"} gap={"md"}>
-            {@const community = selectedCommunity}
-            <CommunityCard
-                id={community.id.communityId}
-                name={community.name}
-                description={community.description}
-                avatar={community.avatar}
-                banner={community.banner}
-                memberCount={community.memberCount}
-                channelCount={community.channelCount}
-                header={false}
-                gateConfig={community.gateConfig}
-                language={community.primaryLanguage}
-                flags={community.flags}
-                verified={community.verified} />
-            <Button onClick={() => goToCommunity(community)}>
-                {#snippet icon(color)}
-                    <EyeOutline {color} />
-                {/snippet}
-                View community</Button>
-        </Container>
-    </Sheet>
-{/if}
-
-{#if showingFilters}
-    <Sheet onDismiss={() => (showingFilters = false)}>
-        {#if view === "communities"}
-            <CommunityFilters />
-        {:else}
-            <BotFilters />
-        {/if}
-    </Sheet>
-{/if}
-
-{#snippet communityCard(community: CommunityMatch)}
-    <CommunityMatchComponent onClick={() => showCommunity(community)} {community} />
-{/snippet}
-
-<Container
-    bind:ref={scrollableElement}
-    onInsideEnd={scrolledToBottom}
-    height={"fill"}
-    parentDirection={"vertical"}
-    gap={"xl"}
-    direction={"vertical"}
-    padding={["zero", "zero", "huge"]}>
-    <!-- TODO Explore does not have a hedear -->
-    <SectionHeader onAction={createCommunity} onBack={() => history.back()}>
-        {#snippet title()}
-            <Translatable resourceKey={i18nKey("communities.exploreMobile")} />
-        {/snippet}
-        {#snippet menu()}
-            <MenuItem onclick={createCommunity}>
-                <Translatable resourceKey={i18nKey("communities.create")} />
-            </MenuItem>
-            <MenuItem onclick={registerBot}>
-                <Translatable resourceKey={i18nKey("Register a bot")} />
-            </MenuItem>
-        {/snippet}
-    </SectionHeader>
-
-    <Container direction={"vertical"} gap={"md"} padding={["zero", "xxl"]}>
-        <Overview>
-            <Translatable resourceKey={i18nKey("Explore Communities & Bots")} />
-        </Overview>
-        <Body colour={"textSecondary"}>
-            <Translatable
-                resourceKey={i18nKey(
-                    "Find communities that resonate with you or maybe start a community of your own. Whether it's crypto, gaming or your favourite sport - this is the place to find your people.",
-                )} />
-        </Body>
-    </Container>
-
-    <Container
-        supplementalClass={"explore_search_and_chips"}
-        direction={"vertical"}
-        padding={["zero", "zero", "lg", "zero"]}
-        gap={"lg"}
-        background={ColourVars.background0}>
-        <Container padding={["zero", "lg"]}>
-            <Search
-                bind:value={searchState.term}
-                onClear={clear}
-                {searching}
-                onSearch={() => search(true)}
-                placeholder={interpolate(
-                    $_,
-                    i18nKey(view === "communities" ? "communities.search" : "Search bots"),
-                )} />
-        </Container>
-
-        <Container padding={["zero", "xl"]} gap={"sm"}>
-            <Chip
-                onClick={() => setView("communities")}
-                mode={view === "communities" ? "rounded" : "unselected"}>
-                {#snippet icon(color)}
-                    <Account {color} />
-                {/snippet}
-                <Translatable resourceKey={i18nKey("Communities")} />
-            </Chip>
-            <Chip onClick={() => setView("bots")} mode={view === "bots" ? "rounded" : "unselected"}>
-                {#snippet icon(color)}
-                    <Robot {color} />
-                {/snippet}
-                <Translatable resourceKey={i18nKey("Bots")} />
-            </Chip>
-        </Container>
-    </Container>
-
-    <Container
-        height={loading || searchState.results.length === 0 ? "fill" : "hug"}
-        crossAxisAlignment={loading ? "center" : "start"}
-        mainAxisAlignment={loading ? "center" : "start"}
-        gap={"md"}
-        direction={"vertical"}
-        padding={["zero", "lg", "md", "lg"]}>
-        {#if loading}
-            <FancyLoader size={"4rem"} />
-        {:else if searchState.results.length === 0}
-            <Container
-                mainAxisAlignment={"center"}
-                crossAxisAlignment={"center"}
-                gap={"sm"}
-                height={"fill"}
-                direction={"vertical"}>
-                {#if $offlineStore}
-                    <CloudOffOutline size={"1.8em"} />
-                    <Subtitle colour={"textSecondary"} align={"center"}>
-                        <Translatable resourceKey={i18nKey("offlineError")} />
-                    </Subtitle>
-                {:else}
-                    <NothingToSee
-                        reset={{
-                            onClick: view === "communities" ? createCommunity : registerBot,
-                            text: view === "communities" ? "Create a community" : "Register a bot",
-                        }}
-                        subtitle={interpolate($_, i18nKey("communities.refineSearch"))}
-                        title={interpolate(
-                            $_,
-                            i18nKey(
-                                view === "communities" ? "communities.noMatch" : "No matching bots",
-                            ),
-                        )}>
-                    </NothingToSee>
-                {/if}
-            </Container>
-        {:else}
-            {#if view === "communities"}
-                <Container
-                    padding={$anonUserStore ? ["zero", "lg", "huge", "lg"] : ["zero", "lg"]}
-                    direction={"vertical"}
-                    gap={"lg"}>
-                    {#each communitySearchState.results as community (community.id.communityId)}
-                        {@render communityCard(community)}
-                    {/each}
-                </Container>
-            {:else}
-                <Container
-                    padding={$anonUserStore ? ["zero", "lg", "huge", "lg"] : ["zero", "lg"]}
-                    direction={"vertical"}
-                    gap={"lg"}>
-                    {#each botSearchState.results as bot (bot.id)}
-                        <BotCard
-                            onSelect={(id) =>
-                                publish("showBot", { bot: botState.externalBots.get(id)! })}
-                            {bot} />
-                    {/each}
-                </Container>
-            {/if}
-            {#if more}
-                <Container mainAxisAlignment={"center"}>
-                    <CommonButton
-                        size={"small_text"}
-                        onClick={() => search(false)}
-                        disabled={searching}
-                        loading={searching}>
-                        {#snippet icon(color, size)}
-                            <LoadMore {color} {size} />
-                        {/snippet}
-                        <Translatable resourceKey={i18nKey("communities.loadMore")} />
-                    </CommonButton>
-                </Container>
-            {/if}
-        {/if}
-    </Container>
-</Container>
-
-{#if $anonUserStore && $identityStateStore.kind !== "logging_in" && $identityStateStore.kind !== "registering"}
-    <AnonFooter>
-        <FloatingButton onClick={() => (showingFilters = true)}>
-            {#snippet icon(color)}
-                <Filter {color} />
-            {/snippet}
-        </FloatingButton>
-    </AnonFooter>
-{:else}
-    <FloatingButton onClick={() => (showingFilters = true)} pos={{ bottom: "lg", right: "lg" }}>
-        {#snippet icon(color)}
-            <Filter {color} />
-        {/snippet}
-    </FloatingButton>
-{/if}
-
-{#if showFab}
-    <div transition:fade class="fab">
-        <FloatingButton onClick={scrollToTop}>
-            {#snippet icon(color)}
-                <ArrowUp {color} />
-            {/snippet}
-        </FloatingButton>
-    </div>
-{/if}
-
-<style lang="scss">
-    :global(.container.explore_search_and_chips) {
-        position: sticky;
-        top: 0;
-        z-index: 1;
-    }
-
-    $size: 150px;
-
-    .fab {
-        position: absolute;
-        bottom: 5.5rem;
-        right: var(--sp-lg);
-    }
-
-    .img {
-        background-repeat: no-repeat;
-        width: 1rem;
-        height: 1rem;
-
-        &.public {
-            background-image: url("/assets/unlocked.svg");
-        }
-
-        &.private {
-            background-image: url("/assets/locked.svg");
-        }
-    }
-
-    .robot {
-        border: 4px solid var(--background-0);
-        background-color: var(--primary);
-        border-radius: var(--rad-circle);
-        width: 2rem;
-        height: 2rem;
-        position: absolute;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        bottom: -2px;
-        right: -2px;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/communities/explore/Filters.svelte b/frontend/app/src/components_mobile/home/communities/explore/Filters.svelte
deleted file mode 100644
index 29e1389218..0000000000
--- a/frontend/app/src/components_mobile/home/communities/explore/Filters.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script lang="ts">
-    import { Container, Subtitle, Switch, Title } from "component-lib";
-    import { communityFiltersStore, OpenChat } from "@client";
-    import { getContext } from "svelte";
-    import { i18nKey, supportedLanguages } from "../../../../i18n/i18n";
-    import Translatable from "../../../Translatable.svelte";
-
-    const client = getContext<OpenChat>("client");
-</script>
-
-<Container height={{ size: "55vh" }} padding={"xl"} gap={"lg"} direction={"vertical"}>
-    <Title fontWeight={"bold"}>
-        <Translatable resourceKey={i18nKey("communities.primaryLanguage")} />
-    </Title>
-    <Container height={"fill"} direction={"vertical"} gap={"md"}>
-        {#each supportedLanguages as lang}
-            <Switch
-                onChange={() => client.toggleCommunityFilterLanguage(lang.code)}
-                checked={$communityFiltersStore.has(lang.code)}>
-                <Subtitle>
-                    <Translatable resourceKey={i18nKey(lang.name)} />
-                </Subtitle>
-            </Switch>
-        {/each}
-    </Container>
-</Container>
diff --git a/frontend/app/src/components_mobile/home/createOrUpdateGroup/Permissions.svelte b/frontend/app/src/components_mobile/home/createOrUpdateGroup/Permissions.svelte
deleted file mode 100644
index ea6b6287f8..0000000000
--- a/frontend/app/src/components_mobile/home/createOrUpdateGroup/Permissions.svelte
+++ /dev/null
@@ -1,287 +0,0 @@
-<script lang="ts">
-    import { i18nKey } from "@src/i18n/i18n";
-    import { BodySmall, CommonButton, Container, Sheet, Switch } from "component-lib";
-    import {
-        type ChatPermissionRole,
-        chatRoles,
-        type MessagePermissions,
-        publish,
-        type ResourceKey,
-        roleAsText,
-        selectedCommunitySummaryStore,
-    } from "@client";
-    import { _ } from "svelte-i18n";
-    import ArrowLeft from "svelte-material-icons/ArrowLeft.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import GroupCard from "../createOrUpdateGroup/GroupCard.svelte";
-    import PermissionsRoleSlider from "../PermissionsRoleSlider.svelte";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
-    import { updateGroupState } from "./group.svelte";
-
-    type Selected = {
-        role?: ChatPermissionRole;
-        defaultRole?: ChatPermissionRole;
-        label: ResourceKey;
-        sync: (r?: ChatPermissionRole) => void;
-    };
-
-    const data = updateGroupState;
-    let defaultText = $derived($_("role.default"));
-    let roles = [...chatRoles];
-    let isCommunityPublic = $derived($selectedCommunitySummaryStore?.public ?? true);
-    let isChannel = $derived(data.candidate.id.kind === "channel");
-    let selectedTab = $state("permissions.general");
-    let overrideChatMessages = $state(data.permissions.threadPermissions !== undefined);
-
-    let selected = $state<Selected>();
-
-    // This is because I simply cannot get the data binding to work as I *think* it should
-    function syncPermission() {
-        if (selected !== undefined) {
-            selected.sync?.(selected.role);
-            selected = undefined;
-        }
-    }
-
-    function onOverrideChatMessagesChanged() {
-        data.permissions.threadPermissions = overrideChatMessages
-            ? structuredClone($state.snapshot(data.permissions.messagePermissions))
-            : undefined;
-    }
-</script>
-
-{#if selected !== undefined}
-    {@const { label } = selected}
-    <Sheet onDismiss={syncPermission}>
-        <PermissionsRoleSlider
-            height={{ size: "250px" }}
-            {roles}
-            {label}
-            onClose={syncPermission}
-            defaultRole={selected.defaultRole}
-            bind:rolePermission={selected.role} />
-    </Sheet>
-{/if}
-
-{#snippet permissionSummary(
-    label: ResourceKey,
-    sync: (r?: ChatPermissionRole) => void,
-    role?: ChatPermissionRole,
-    defaultRole?: ChatPermissionRole,
-)}
-    <Container
-        onClick={() => (selected = { role, defaultRole, label, sync })}
-        mainAxisAlignment={"spaceBetween"}
-        crossAxisAlignment={"end"}>
-        <div class="label">
-            <BodySmall>
-                <Translatable resourceKey={label}></Translatable>
-            </BodySmall>
-        </div>
-        {#if role !== undefined}
-            <BodySmall colour={"primary"} fontWeight={"bold"} width={"hug"}
-                >{$_(`role.${roleAsText(role)}`)}</BodySmall>
-        {:else if defaultRole !== undefined}
-            <BodySmall colour={"primary"} fontWeight={"bold"} width={"hug"}
-                >{defaultText} ({$_(`role.${roleAsText(defaultRole)}`)})</BodySmall>
-        {/if}
-    </Container>
-{/snippet}
-
-{#snippet button(name: ResourceKey)}
-    <CommonButton
-        height={"fill"}
-        width={"fill"}
-        onClick={() => (selectedTab = name.key)}
-        mode={selectedTab === name.key ? "active" : "default"}
-        size={"small"}>
-        <Translatable resourceKey={name}></Translatable>
-    </CommonButton>
-{/snippet}
-
-{#snippet messageLevelPermissions(p: MessagePermissions, label: string)}
-    {@render permissionSummary(
-        i18nKey(`permissions.${label}.default`),
-        (r) => (p.default = r ?? p.default),
-        p.default,
-    )}
-    {@render permissionSummary(
-        i18nKey(`permissions.${label}.text`),
-        (r) => (p.text = r),
-        p.text,
-        p.default,
-    )}
-    {@render permissionSummary(
-        i18nKey(`permissions.${label}.image`),
-        (r) => (p.image = r),
-        p.image,
-        p.default,
-    )}
-    {@render permissionSummary(
-        i18nKey(`permissions.${label}.video`),
-        (r) => (p.video = r),
-        p.video,
-        p.default,
-    )}
-    {@render permissionSummary(
-        i18nKey(`permissions.${label}.audio`),
-        (r) => (p.audio = r),
-        p.audio,
-        p.default,
-    )}
-    {@render permissionSummary(
-        i18nKey(`permissions.${label}.file`),
-        (r) => (p.file = r),
-        p.file,
-        p.default,
-    )}
-    {@render permissionSummary(
-        i18nKey(`permissions.${label}.poll`),
-        (r) => (p.poll = r),
-        p.poll,
-        p.default,
-    )}
-    {@render permissionSummary(
-        i18nKey(`permissions.${label}.crypto`),
-        (r) => (p.crypto = r),
-        p.crypto,
-        p.default,
-    )}
-    {@render permissionSummary(
-        i18nKey(`permissions.${label}.giphy`),
-        (r) => (p.giphy = r),
-        p.giphy,
-        p.default,
-    )}
-    {@render permissionSummary(
-        i18nKey(`permissions.${label}.prize`),
-        (r) => (p.prize = r),
-        p.prize,
-        p.default,
-    )}
-    {@render permissionSummary(
-        i18nKey(`permissions.${label}.memeFighter`),
-        (r) => (p.memeFighter = r),
-        p.memeFighter,
-        p.default,
-    )}
-    {@render permissionSummary(
-        i18nKey(`permissions.${label}.p2pSwap`),
-        (r) => (p.p2pSwap = r),
-        p.p2pSwap,
-        p.default,
-    )}
-{/snippet}
-
-<SlidingPageContent title={i18nKey("Permission")}>
-    <Container
-        height={"fill"}
-        gap={"xxl"}
-        direction={"vertical"}
-        padding={["xxl", "xl", "lg", "xl"]}>
-        <GroupCard candidateGroup={data.candidateGroup} />
-
-        <Container
-            height={{ size: "3rem" }}
-            mainAxisAlignment={"spaceBetween"}
-            padding={["zero", "zero", "sm", "zero"]}
-            gap={"sm"}>
-            {@render button(i18nKey("permissions.general"))}
-            {@render button(i18nKey("permissions.message"))}
-            {@render button(i18nKey("permissions.thread"))}
-        </Container>
-
-        <Container gap={"xxl"} direction={"vertical"}>
-            {#if selectedTab === "permissions.general"}
-                {@const p = data.permissions}
-                {@render permissionSummary(
-                    i18nKey("permissions.changeRoles"),
-                    (r) => (p.changeRoles = r ?? p.changeRoles),
-                    p.changeRoles,
-                )}
-                {@render permissionSummary(
-                    i18nKey("permissions.updateGroup"),
-                    (r) => (p.updateGroup = r ?? p.updateGroup),
-                    p.updateGroup,
-                )}
-
-                {#if isChannel && !isCommunityPublic}
-                    {@render permissionSummary(
-                        i18nKey("permissions.addMembers"),
-                        (r) => (p.addMembers = r ?? p.addMembers),
-                        p.addMembers,
-                    )}
-                {/if}
-                {@render permissionSummary(
-                    i18nKey("permissions.inviteUsers"),
-                    (r) => (p.inviteUsers = r ?? p.inviteUsers),
-                    p.inviteUsers,
-                )}
-                {@render permissionSummary(
-                    i18nKey("permissions.removeMembers"),
-                    (r) => (p.removeMembers = r ?? p.removeMembers),
-                    p.removeMembers,
-                )}
-                {@render permissionSummary(
-                    i18nKey("permissions.deleteMessages"),
-                    (r) => (p.deleteMessages = r ?? p.deleteMessages),
-                    p.deleteMessages,
-                )}
-                {@render permissionSummary(
-                    i18nKey("permissions.startVideoCall"),
-                    (r) => (p.startVideoCall = r ?? p.startVideoCall),
-                    p.startVideoCall,
-                )}
-                {@render permissionSummary(
-                    i18nKey("permissions.pinMessages"),
-                    (r) => (p.pinMessages = r ?? p.pinMessages),
-                    p.pinMessages,
-                )}
-                {@render permissionSummary(
-                    i18nKey("permissions.reactToMessages"),
-                    (r) => (p.reactToMessages = r ?? p.reactToMessages),
-                    p.reactToMessages,
-                )}
-                {@render permissionSummary(
-                    i18nKey("permissions.mentionAllMembers", { mention: "@everyone" }),
-                    (r) => (p.mentionAllMembers = r ?? p.mentionAllMembers),
-                    p.mentionAllMembers,
-                )}
-            {:else if selectedTab === "permissions.message"}
-                {@render messageLevelPermissions(
-                    data.permissions.messagePermissions,
-                    "messagePermissions",
-                )}
-            {:else if selectedTab === "permissions.thread"}
-                <Switch
-                    bind:checked={overrideChatMessages}
-                    onChange={onOverrideChatMessagesChanged}>
-                    <BodySmall>
-                        <Translatable resourceKey={i18nKey("permissions.overrideChatMessages")} />
-                    </BodySmall>
-                </Switch>
-                {#if data.permissions.threadPermissions !== undefined}
-                    {@render messageLevelPermissions(
-                        data.permissions.threadPermissions,
-                        "threadPermissions",
-                    )}
-                {/if}
-            {/if}
-        </Container>
-
-        <Container padding={["xl", "zero", "zero", "zero"]} mainAxisAlignment={"end"}>
-            <CommonButton onClick={() => publish("closeModalPage")} mode="active" size={"medium"}>
-                {#snippet icon(color, size)}
-                    <ArrowLeft {color} {size} />
-                {/snippet}
-                <Translatable resourceKey={i18nKey("Done, go back")}></Translatable>
-            </CommonButton>
-        </Container>
-    </Container>
-</SlidingPageContent>
-
-<style lang="scss">
-    .label {
-        text-transform: capitalize;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/groupdetails/ConfirmDelete.svelte b/frontend/app/src/components_mobile/home/groupdetails/ConfirmDelete.svelte
deleted file mode 100644
index e1364a97d1..0000000000
--- a/frontend/app/src/components_mobile/home/groupdetails/ConfirmDelete.svelte
+++ /dev/null
@@ -1,123 +0,0 @@
-<script lang="ts">
-    import { toastStore } from "@src/stores/toast";
-    import { Body, Button, ColourVars, Container, H2, Input } from "component-lib";
-    import {
-        chatListScopeStore,
-        OpenChat,
-        publish,
-        routeForChatIdentifier,
-        routeForScope,
-        type MultiUserChat,
-    } from "@client";
-    import { navigate } from "@utils/navigation";
-    import { getContext } from "svelte";
-    import ChevronRight from "svelte-material-icons/ChevronRight.svelte";
-    import Delete from "svelte-material-icons/DeleteForeverOutline.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import MulticolourText from "../../MulticolourText.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        chat: MultiUserChat;
-    }
-
-    let { chat }: Props = $props();
-
-    let chatName = $state<string>();
-    let deleting = $state(false);
-
-    function deleteChat() {
-        deleting = true;
-        if (chat.id.kind === "channel") {
-            navigate(`/community/${chat.id.communityId}`);
-        } else {
-            navigate(routeForScope($chatListScopeStore));
-        }
-        client
-            .deleteGroup(chat.id)
-            .then((success) => {
-                if (success) {
-                    toastStore.showSuccessToast(
-                        i18nKey("deleteGroupSuccess", undefined, chat.level),
-                    );
-                    publish("closeModalStack");
-                } else {
-                    toastStore.showFailureToast(
-                        i18nKey("deleteGroupFailure", undefined, chat.level, true),
-                    );
-                    navigate(routeForChatIdentifier($chatListScopeStore.kind, chat.id));
-                }
-            })
-            .finally(() => (deleting = false));
-    }
-</script>
-
-<SlidingPageContent title={i18nKey("Delete a chat")} subtitle={i18nKey(chat.name)}>
-    <Container direction={"vertical"} gap={"xxl"} padding={["xxl", "lg"]}>
-        <Container padding={["zero", "lg"]} gap={"sm"} direction={"vertical"}>
-            <Delete color={ColourVars.primary} size={"7rem"} />
-            <H2>
-                <MulticolourText
-                    parts={[
-                        {
-                            text: i18nKey("Delete the "),
-                            colour: "textPrimary",
-                        },
-                        {
-                            text: i18nKey(chat.name),
-                            colour: "primary",
-                        },
-                        {
-                            text: i18nKey(" chat"),
-                            colour: "textPrimary",
-                        },
-                    ]}></MulticolourText>
-            </H2>
-            <Body colour={"textSecondary"}>
-                <Translatable
-                    resourceKey={i18nKey(
-                        "Do you definitely want to delete this chat? All of your chat history will be lost, and this cannot be undone.",
-                    )} />
-            </Body>
-        </Container>
-
-        <Container>
-            <Input
-                error={chatName !== chat.name}
-                bind:value={chatName}
-                placeholder={"Type in chat name..."}
-                minlength={0}
-                maxlength={200}
-                countdown={false}>
-                {#snippet subtext()}
-                    <Translatable
-                        resourceKey={i18nKey(
-                            "Type in the exact name of the chat to confirm deletion",
-                        )} />
-                {/snippet}
-            </Input>
-        </Container>
-
-        <Container direction={"vertical"} gap={"lg"}>
-            <Button
-                loading={deleting}
-                disabled={chatName !== chat.name}
-                danger
-                onClick={deleteChat}>
-                <Translatable resourceKey={i18nKey("Delete")} />
-                {#snippet icon(color)}
-                    <Delete {color} />
-                {/snippet}
-            </Button>
-            <Button secondary onClick={() => publish("closeModalPage")}>
-                <Translatable resourceKey={i18nKey("No, back to safety")} />
-                {#snippet icon(color)}
-                    <ChevronRight {color} />
-                {/snippet}
-            </Button>
-        </Container>
-    </Container>
-</SlidingPageContent>
diff --git a/frontend/app/src/components_mobile/home/groupdetails/Convert.svelte b/frontend/app/src/components_mobile/home/groupdetails/Convert.svelte
deleted file mode 100644
index 42b85057c7..0000000000
--- a/frontend/app/src/components_mobile/home/groupdetails/Convert.svelte
+++ /dev/null
@@ -1,175 +0,0 @@
-<script lang="ts">
-    import { Body, BodySmall, Button, ColourVars, Container, H2, StatusCard } from "component-lib";
-    import {
-        defaultChatRules,
-        publish,
-        type GroupChatSummary,
-        type OpenChat,
-    } from "@client";
-    import { getContext } from "svelte";
-    import AccountGroup from "svelte-material-icons/AccountGroup.svelte";
-    import Check from "svelte-material-icons/Check.svelte";
-    import Close from "svelte-material-icons/Close.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import FancyLoader from "../../icons/FancyLoader.svelte";
-    import MulticolourText from "../../MulticolourText.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        chat: GroupChatSummary;
-    }
-
-    let { chat = $bindable() }: Props = $props();
-
-    let state: "idle" | "converting" | "error" = $state("idle");
-
-    let steps: string[] = [
-        "freeze the existing group",
-        "create a new community with the same name as the group",
-        "add a public channel to the community with the same name as the group",
-        "add all members of the group as members of the community",
-        "copy the full message history from the group into the channel",
-        "delete the existing group",
-        "inform all members of the group that it has been converted to a community",
-    ];
-
-    function convert() {
-        state = "converting";
-        client.convertGroupToCommunity(chat, defaultChatRules("community")).then((id) => {
-            if (id !== undefined) {
-                publish("convertedGroupToCommunity", { name: chat.name, channelId: id });
-            } else {
-                state = "error";
-            }
-        });
-    }
-
-    function close() {
-        state = "idle";
-        publish("closeModalStack");
-    }
-</script>
-
-<SlidingPageContent title={i18nKey("Convert to community")} subtitle={i18nKey(chat.name)}>
-    <Container direction={"vertical"} gap={"xxl"} padding={["xxl", "lg"]}>
-        <Container padding={["zero", "lg"]} gap={"sm"} direction={"vertical"}>
-            <AccountGroup color={ColourVars.primary} size={"7rem"} />
-            <H2>
-                <MulticolourText
-                    parts={[
-                        {
-                            text: i18nKey("Convert "),
-                            colour: "textPrimary",
-                        },
-                        {
-                            text: i18nKey(chat.name),
-                            colour: "primary",
-                        },
-                        {
-                            text: i18nKey(" into a community"),
-                            colour: "textPrimary",
-                        },
-                    ]}></MulticolourText>
-            </H2>
-            <Body colour={"textSecondary"}>
-                <Translatable
-                    resourceKey={i18nKey(
-                        "We can take care of converting your group into a community.",
-                    )} />
-            </Body>
-        </Container>
-
-        <Container direction={"vertical"} gap={"lg"}>
-            <StatusCard
-                mode={"warning"}
-                title={"This is irreversible"}
-                body={"Converting a group into a community is an irreversible process. Make sure you are okay with this before proceeding."}
-            ></StatusCard>
-            <Container
-                borderRadius={"lg"}
-                gap={"md"}
-                direction={"vertical"}
-                padding={"lg"}
-                background={ColourVars.background1}>
-                {#if state === "converting"}
-                    <Container
-                        minHeight={"24rem"}
-                        direction={"vertical"}
-                        mainAxisAlignment={"center"}
-                        padding={["zero", "xxl"]}
-                        gap={"lg"}
-                        crossAxisAlignment={"center"}>
-                        <div class="spinner">
-                            <FancyLoader />
-                        </div>
-                        <Body align={"center"} colour={"textSecondary"}>
-                            <Translatable resourceKey={i18nKey("communities.pleaseWait")} />
-                        </Body>
-                    </Container>
-                {:else if state === "idle"}
-                    <Container gap={"md"} direction={"vertical"}>
-                        {#each steps as step}
-                            <Container gap={"md"}>
-                                <Check color={ColourVars.primary} size={"1.5rem"} />
-                                <Body>{step}</Body>
-                            </Container>
-                        {/each}
-                    </Container>
-                {:else if state === "error"}
-                    <Container
-                        minHeight={"24rem"}
-                        direction={"vertical"}
-                        mainAxisAlignment={"center"}
-                        padding={["zero", "xxl"]}
-                        gap={"lg"}
-                        crossAxisAlignment={"center"}>
-                        <div class="error-img"></div>
-                        <Body align={"center"} colour={"textSecondary"}>
-                            <Translatable
-                                resourceKey={i18nKey("communities.errors.convertFailed")} />
-                        </Body>
-                    </Container>
-                {/if}
-            </Container>
-
-            <BodySmall align={"center"} colour={"textSecondary"}>
-                {"This process might take a few minutes depending on the size of the group so please be patient"}
-            </BodySmall>
-
-            {#if state !== "error"}
-                <Button
-                    disabled={state === "converting"}
-                    loading={state === "converting"}
-                    onClick={convert}>
-                    <Translatable resourceKey={i18nKey("Convert to community")} />
-                    {#snippet icon(color)}
-                        <AccountGroup {color} />
-                    {/snippet}
-                </Button>
-                <Button secondary onClick={close}>
-                    <Translatable resourceKey={i18nKey("Cancel")} />
-                    {#snippet icon(color)}
-                        <Close {color} />
-                    {/snippet}
-                </Button>
-            {/if}
-        </Container>
-    </Container>
-</SlidingPageContent>
-
-<style lang="scss">
-    .spinner {
-        width: 4rem;
-        height: 4rem;
-    }
-    .error-img {
-        background-image: url("/assets/dead-bot.svg");
-        background-repeat: no-repeat;
-        width: 150px;
-        height: 150px;
-        margin: 30px auto;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/groupdetails/DirectChatDetails.svelte b/frontend/app/src/components_mobile/home/groupdetails/DirectChatDetails.svelte
deleted file mode 100644
index faf248956b..0000000000
--- a/frontend/app/src/components_mobile/home/groupdetails/DirectChatDetails.svelte
+++ /dev/null
@@ -1,211 +0,0 @@
-<script lang="ts">
-    import Translatable from "@src/components/Translatable.svelte";
-    import Setting from "@src/components_mobile/Setting.svelte";
-    import { i18nKey } from "@src/i18n/i18n";
-    import { toastStore } from "@src/stores/toast";
-    import { activeVideoCall } from "@src/stores/video";
-    import { Body, Button, ColourVars, Container, IconButton, Switch } from "component-lib";
-    import type { DirectChatSummary, OptionUpdate, PublicProfile } from "@client";
-    import {
-        allUsersStore,
-        blockedUsersStore,
-        chatIdentifiersEqual,
-        favouritesStore,
-        OpenChat,
-        publish,
-    } from "@client";
-    import { getContext, onDestroy, onMount } from "svelte";
-    import ArrowLeft from "svelte-material-icons/ArrowLeft.svelte";
-    import CancelIcon from "svelte-material-icons/Cancel.svelte";
-    import HeartMinus from "svelte-material-icons/HeartMinusOutline.svelte";
-    import HeartPlus from "svelte-material-icons/HeartPlusOutline.svelte";
-    import Video from "svelte-material-icons/VideoOutline.svelte";
-    import DisappearingDuration from "../DisappearingDuration.svelte";
-    import UserProfileSummaryCard from "../user_profile/UserProfileSummaryCard.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        chat: DirectChatSummary;
-    }
-
-    let { chat }: Props = $props();
-
-    let blocked = $derived($blockedUsersStore.has(chat.them.userId));
-    let user = $derived($allUsersStore.get(chat.them.userId));
-    let profile = $state<PublicProfile | undefined>();
-    let eventsTTL = $state(chat.eventsTTL);
-    let videoCallInProgress = $derived(chat.videoCallInProgress !== undefined);
-    let blockLabel = $derived(blocked ? i18nKey("Unblock") : i18nKey("Block"));
-    let blockTitle = $derived(blocked ? i18nKey("Unblock this user") : i18nKey("Block this user"));
-    let blockInfo = $derived(
-        blocked
-            ? i18nKey(
-                  "If you would like to allow this user to send you messages or viewing your profile or activity.",
-              )
-            : i18nKey(
-                  "If you would like to prevent this user from sending you messages or viewing your profile or activity.",
-              ),
-    );
-    let inCall = $derived(
-        videoCallInProgress &&
-            $activeVideoCall !== undefined &&
-            chatIdentifiersEqual($activeVideoCall.chatId, chat.id),
-    );
-
-    onMount(() => {
-        client.getPublicProfile(chat.them.userId).subscribe({
-            onResult: (res) => {
-                profile = res;
-            },
-        });
-    });
-
-    function getUpdate(): OptionUpdate<bigint> {
-        if (eventsTTL !== undefined) {
-            return { value: eventsTTL };
-        } else if (chat.eventsTTL !== undefined) {
-            return "set_to_none";
-        } else {
-            return undefined;
-        }
-    }
-
-    onDestroy(async () => {
-        if (eventsTTL !== chat.eventsTTL) {
-            await client.updateDirectChatSettings(chat, getUpdate());
-        }
-    });
-
-    function toggleFavourites() {
-        if ($favouritesStore.has(chat.id)) {
-            client.removeFromFavourites(chat.id);
-        } else {
-            client.addToFavourites(chat.id);
-        }
-    }
-
-    function startVideoCall() {
-        if (inCall) {
-            publish("hangup");
-        } else {
-            publish("startVideoCall", {
-                chatId: chat.id,
-                callType: "default",
-                join: videoCallInProgress,
-            });
-        }
-    }
-
-    function toggleBlocked() {
-        if (blocked) {
-            unblockUser();
-        } else {
-            blockUser();
-        }
-    }
-
-    function blockUser() {
-        client.blockUserFromDirectChat(chat.them.userId).then((success) => {
-            if (success) {
-                toastStore.showSuccessToast(i18nKey("blockUserSucceeded"));
-            } else {
-                toastStore.showFailureToast(i18nKey("blockUserFailed"));
-            }
-        });
-    }
-
-    function unblockUser() {
-        client.unblockUserFromDirectChat(chat.them.userId).then((success) => {
-            if (success) {
-                toastStore.showSuccessToast(i18nKey("unblockUserSucceeded"));
-            } else {
-                toastStore.showFailureToast(i18nKey("unblockUserFailed"));
-            }
-        });
-    }
-</script>
-
-<Container background={ColourVars.background0} height={"fill"} direction={"vertical"}>
-    {#if user !== undefined}
-        <Container
-            supplementalClass={"direct_chat_details"}
-            gap={"xl"}
-            direction={"vertical"}
-            padding={["lg", "md", "md", "md"]}>
-            {#if profile}
-                <UserProfileSummaryCard showChit={false} mode={"view"} {user} {profile}>
-                    {#snippet buttons()}
-                        <IconButton
-                            onclick={() => publish("closeModalPage")}
-                            size={"md"}
-                            mode={"dark"}>
-                            {#snippet icon(color)}
-                                <ArrowLeft {color} />
-                            {/snippet}
-                        </IconButton>
-                        <IconButton onclick={toggleFavourites} size={"md"} mode={"dark"}>
-                            {#snippet icon(color)}
-                                {#if !$favouritesStore.has(chat.id)}
-                                    <HeartPlus {color} />
-                                {:else}
-                                    <HeartMinus {color} />
-                                {/if}
-                            {/snippet}
-                        </IconButton>
-                        <IconButton onclick={startVideoCall} size={"md"} mode={"dark"}>
-                            {#snippet icon(color)}
-                                <Video {color} />
-                            {/snippet}
-                        </IconButton>
-                    {/snippet}
-                </UserProfileSummaryCard>
-            {/if}
-
-            <div class="separator"></div>
-
-            <Container gap={"md"} padding={["zero", "lg"]} direction={"vertical"}>
-                <DisappearingDuration bind:eventsTTL>
-                    {#snippet toggle(onToggle, enabled)}
-                        <Setting
-                            toggle={onToggle}
-                            info={"A feature that automatically deletes messages after a set period, helping keep chats private and temporary."}>
-                            <Switch onChange={onToggle} width={"fill"} reverse checked={enabled}>
-                                <Translatable resourceKey={i18nKey("disappearingMessages.label")} />
-                            </Switch>
-                        </Setting>
-                    {/snippet}
-                </DisappearingDuration>
-            </Container>
-
-            <Container gap={"md"} padding={["zero", "lg"]} direction={"vertical"}>
-                <Body fontWeight={"bold"}>
-                    <Translatable resourceKey={blockTitle} />
-                </Body>
-                <Body colour={"textSecondary"}>
-                    <Translatable resourceKey={blockInfo} />
-                </Body>
-                <Button secondary={blocked} width={"fill"} onClick={toggleBlocked}>
-                    {#snippet icon(color)}
-                        <CancelIcon {color} />
-                    {/snippet}
-                    <Translatable resourceKey={blockLabel} />
-                </Button>
-            </Container>
-        </Container>
-    {/if}
-</Container>
-
-<style lang="scss">
-    .separator {
-        height: 6px;
-        align-self: stretch;
-        background-color: var(--background-1);
-        border-radius: var(--rad-circle);
-        margin: 0 var(--sp-md);
-    }
-
-    :global(.container.direct_chat_details .icon_button:first-child) {
-        margin-inline-end: auto;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/groupdetails/DisappearingMessagesSummary.svelte b/frontend/app/src/components_mobile/home/groupdetails/DisappearingMessagesSummary.svelte
deleted file mode 100644
index b416b6b4a0..0000000000
--- a/frontend/app/src/components_mobile/home/groupdetails/DisappearingMessagesSummary.svelte
+++ /dev/null
@@ -1,51 +0,0 @@
-<script lang="ts">
-    import { i18nKey } from "@src/i18n/i18n";
-    import { msToDays, msToHours, msToMinutes } from "@src/utils/time";
-    import { Body, Container } from "component-lib";
-    import { OpenChat } from "@client";
-    import { getContext } from "svelte";
-    import Translatable from "../../Translatable.svelte";
-    import Separator from "../Separator.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        eventsTTL?: bigint;
-    }
-
-    let { eventsTTL }: Props = $props();
-    let disappearsIn = $derived.by(() => {
-        if (eventsTTL === undefined) {
-            return undefined;
-        }
-        const duration = client.durationFromMilliseconds(Number(eventsTTL));
-        const { days, hours, minutes, total } = duration;
-        if (days > 0) {
-            return `${msToDays(total)} days`;
-        } else if (hours > 0) {
-            return `${msToHours(total)} hours`;
-        } else if (minutes > 0) {
-            return `${msToMinutes(total)} minutes`;
-        }
-    });
-</script>
-
-{#if disappearsIn !== undefined}
-    <Separator />
-    <Container padding={["zero", "md"]} direction={"vertical"} gap={"md"}>
-        <Container crossAxisAlignment={"center"} mainAxisAlignment={"spaceBetween"}>
-            <Body colour={"textSecondary"} fontWeight={"bold"}>
-                <Translatable resourceKey={i18nKey("Disappearing messages")}></Translatable>
-            </Body>
-            <Body width={"hug"} colour={"secondary"} fontWeight={"bold"}>
-                <Translatable resourceKey={i18nKey(`${disappearsIn}`)}></Translatable>
-            </Body>
-        </Container>
-        <Body>
-            <Translatable
-                resourceKey={i18nKey(
-                    `After ${disappearsIn}, any message sent in this group will be deleted.`,
-                )}></Translatable>
-        </Body>
-    </Container>
-{/if}
diff --git a/frontend/app/src/components_mobile/home/groupdetails/GroupDetails.svelte b/frontend/app/src/components_mobile/home/groupdetails/GroupDetails.svelte
deleted file mode 100644
index 2fffe42148..0000000000
--- a/frontend/app/src/components_mobile/home/groupdetails/GroupDetails.svelte
+++ /dev/null
@@ -1,472 +0,0 @@
-<script lang="ts">
-    import { i18nKey } from "@src/i18n/i18n";
-    import { toastStore } from "@src/stores/toast";
-    import { activeVideoCall } from "@src/stores/video";
-    import {
-        Avatar,
-        BigButton,
-        Body,
-        BodySmall,
-        Button,
-        ColourVars,
-        Container,
-        defaultBackgroundGradient,
-        H2,
-        IconButton,
-        ReadMore,
-        Row,
-    } from "component-lib";
-    import type { CommunityMap, CommunitySummary, MultiUserChat, OpenChat } from "@client";
-    import {
-        allUsersStore,
-        anonUserStore,
-        chatIdentifiersEqual,
-        communitiesStore,
-        defaultChatRules,
-        favouritesStore,
-        isDiamondStore,
-        publish,
-        ROLE_OWNER,
-        selectedChatMembersStore,
-        selectedChatRulesStore,
-        selectedChatSummaryStore,
-        selectedCommunityRulesStore,
-        selectedCommunitySummaryStore,
-    } from "@client";
-    import { getContext } from "svelte";
-    import AccountGroup from "svelte-material-icons/AccountGroup.svelte";
-    import ArrowLeft from "svelte-material-icons/ArrowLeft.svelte";
-    import At from "svelte-material-icons/At.svelte";
-    import BellOff from "svelte-material-icons/BellOffOutline.svelte";
-    import Bell from "svelte-material-icons/BellOutline.svelte";
-    import Delete from "svelte-material-icons/DeleteForeverOutline.svelte";
-    import HeartMinus from "svelte-material-icons/HeartMinusOutline.svelte";
-    import HeartPlus from "svelte-material-icons/HeartPlusOutline.svelte";
-    import Exit from "svelte-material-icons/Logout.svelte";
-    import Share from "svelte-material-icons/ShareVariantOutline.svelte";
-    import Edit from "svelte-material-icons/SquareEditOutline.svelte";
-    import Video from "svelte-material-icons/VideoOutline.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import AccessGateSummary from "../AccessGateSummary.svelte";
-    import ImportToCommunity from "../communities/Import.svelte";
-    import { updateGroupState } from "../createOrUpdateGroup/group.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import BotsSummary from "../membership/BotsSummary.svelte";
-    import MembersSummary from "../membership/MembersSummary.svelte";
-    import Separator from "../Separator.svelte";
-    import Stats from "../Stats.svelte";
-    import DisappearingMessagesSummary from "./DisappearingMessagesSummary.svelte";
-    import PermissionsSummary from "./PermissionsSummary.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        chat: MultiUserChat; // this is NOT reactive - why
-        memberCount: number;
-    }
-
-    let { chat }: Props = $props();
-
-    let muted = $derived($selectedChatSummaryStore?.membership.notificationsMuted);
-    let atEveryoneMuted = $derived($selectedChatSummaryStore?.membership.atEveryoneMuted);
-    let importToCommunities: CommunityMap<CommunitySummary> | undefined = $state();
-    let canImportToCommunity = $derived(!$anonUserStore && client.canImportToCommunity(chat.id));
-    let canConvert = $derived(
-        !$anonUserStore && chat.kind === "group_chat" && client.canConvertGroupToCommunity(chat.id),
-    );
-    let ownerMember = $derived(
-        [...$selectedChatMembersStore.values()].find((m) => m.role === ROLE_OWNER),
-    );
-    let owner = $derived(ownerMember ? $allUsersStore.get(ownerMember.userId) : undefined);
-    let videoCallInProgress = $derived(chat.videoCallInProgress !== undefined);
-    let inCall = $derived(
-        videoCallInProgress &&
-            $activeVideoCall !== undefined &&
-            chatIdentifiersEqual($activeVideoCall.chatId, chat.id),
-    );
-    let canEdit = $derived(!$anonUserStore && client.canEditGroupDetails(chat.id));
-    let canStartVideoCalls = $derived(!$anonUserStore && client.canStartVideoCalls(chat.id));
-    let rules = $derived($selectedChatRulesStore ?? defaultChatRules(chat.level));
-    let avatarUrl = $derived(client.groupAvatarUrl(chat, $selectedCommunitySummaryStore));
-    let busy = $state(false);
-    let canSend = $derived(client.canSendMessage(chat.id, "any"));
-    let combinedRulesText = $derived(
-        canSend
-            ? client.combineRulesText($selectedChatRulesStore, $selectedCommunityRulesStore)
-            : "",
-    );
-
-    function toggleFavourites() {
-        if ($favouritesStore.has(chat.id)) {
-            client.removeFromFavourites(chat.id);
-        } else {
-            client.addToFavourites(chat.id);
-        }
-    }
-
-    function convertToCommunity() {
-        if (!$isDiamondStore) {
-            publish("upgrade");
-        } else {
-            if (chat.kind === "group_chat") {
-                publish("convertGroupToCommunity", chat);
-            }
-        }
-    }
-
-    function importToCommunity() {
-        if (chat.kind === "group_chat") {
-            importToCommunities = $communitiesStore.filter((c) => c.membership.role === ROLE_OWNER);
-            if (importToCommunities.size === 0) {
-                toastStore.showFailureToast(i18nKey("communities.noOwned"));
-                importToCommunities = undefined;
-            }
-        }
-    }
-
-    function toggleMuteNotifications(
-        mute: boolean | undefined,
-        muteAtEveryone: boolean | undefined,
-    ) {
-        publish("toggleMuteNotifications", {
-            chatId: chat.id,
-            mute,
-            muteAtEveryone,
-            // mute: !$selectedChatSummaryStore?.membership.notificationsMuted,
-            // muteAtEveryone: undefined,
-        });
-    }
-
-    function editGroup() {
-        if (canEdit) {
-            updateGroupState.initialise({
-                id: chat.id,
-                kind: "candidate_group_chat",
-                name: chat.name,
-                description: chat.description,
-                historyVisible: chat.historyVisible,
-                public: chat.public,
-                frozen: chat.frozen,
-                members: [],
-                permissions: { ...chat.permissions },
-                rules: { ...rules, newVersion: false },
-                avatar: {
-                    blobReference: chat.blobReference,
-                    blobUrl: chat.blobUrl,
-                    blobData: chat.blobData,
-                },
-                gateConfig: { ...chat.gateConfig },
-                level: chat.level,
-                membership: chat.membership,
-                eventsTTL: chat.eventsTTL,
-                messagesVisibleToNonMembers: chat.messagesVisibleToNonMembers,
-                externalUrl: chat.kind === "channel" ? chat.externalUrl : undefined,
-                verified: chat.kind === "group_chat" ? chat.verified : false,
-            });
-            publish("updateGroup");
-        }
-    }
-
-    function shareGroup() {
-        publish("inviteAndShare", { collection: chat, view: "share" });
-    }
-
-    function leaveGroup() {
-        busy = true;
-        publish("leaveGroup", {
-            kind: "leave",
-            chatId: chat.id,
-            level: chat.level,
-        });
-    }
-
-    function startVideoCall() {
-        if (inCall) {
-            publish("hangup");
-        } else {
-            publish("startVideoCall", {
-                chatId: chat.id,
-                callType: "default",
-                join: videoCallInProgress,
-            });
-        }
-    }
-</script>
-
-{#if importToCommunities !== undefined}
-    <ImportToCommunity
-        groupId={chat.id}
-        onCancel={() => (importToCommunities = undefined)}
-        ownedCommunities={importToCommunities} />
-{/if}
-
-<Container
-    closeMenuOnScroll
-    background={ColourVars.background0}
-    height={"fill"}
-    direction={"vertical"}>
-    <Container gap={"xl"} direction={"vertical"} padding={["lg", "md", "md", "md"]}>
-        <!-- this is the group card -->
-        <Container direction={"vertical"}>
-            <Container
-                supplementalClass={"group_details_header"}
-                borderRadius={"md"}
-                minHeight={"7rem"}
-                mainAxisAlignment={"end"}
-                padding={"sm"}
-                gap={"sm"}
-                background={defaultBackgroundGradient}>
-                <IconButton onclick={() => publish("closeModalPage")} size={"md"} mode={"dark"}>
-                    {#snippet icon(color)}
-                        <ArrowLeft {color} />
-                    {/snippet}
-                </IconButton>
-                {#if canStartVideoCalls}
-                    <IconButton onclick={startVideoCall} size={"md"} mode={"dark"}>
-                        {#snippet icon(color)}
-                            <Video {color} />
-                        {/snippet}
-                    </IconButton>
-                {/if}
-                {#if canEdit}
-                    <IconButton onclick={editGroup} size={"md"} mode={"dark"}>
-                        {#snippet icon(color)}
-                            <Edit {color} />
-                        {/snippet}
-                    </IconButton>
-                {/if}
-            </Container>
-            <Container
-                supplementalClass={"name_and_description"}
-                gap={"xl"}
-                padding={["zero", "lg"]}
-                direction="vertical">
-                <Container crossAxisAlignment={"end"} gap={"md"}>
-                    <Avatar borderWidth={"thick"} size={"xxl"} url={avatarUrl}></Avatar>
-                    <Container
-                        direction={"vertical"}
-                        mainAxisAlignment={"center"}
-                        supplementalClass={"group_name"}>
-                        <H2 fontWeight={"bold"} width={"hug"}>{chat.name}</H2>
-                        <Container gap={"xs"}>
-                            <BodySmall colour={"textSecondary"} width={"hug"}>
-                                <Translatable resourceKey={i18nKey("owned by")} />
-                            </BodySmall>
-                            <BodySmall colour={"primary"}>
-                                @{owner?.username}
-                            </BodySmall>
-                        </Container>
-                    </Container>
-                </Container>
-
-                {#if !$anonUserStore}
-                    <Row gap={"sm"}>
-                        {@const width = { size: "6rem" }}
-                        <BigButton {width} onClick={toggleFavourites}>
-                            {#snippet icon(color, size)}
-                                {#if !$favouritesStore.has(chat.id)}
-                                    <HeartPlus {color} {size} />
-                                {:else}
-                                    <HeartMinus {color} {size} />
-                                {/if}
-                            {/snippet}
-                            {#if $favouritesStore.has(chat.id)}
-                                <Translatable resourceKey={i18nKey("Remove favourite")} />
-                            {:else}
-                                <Translatable resourceKey={i18nKey("Add favourite")} />
-                            {/if}
-                        </BigButton>
-                        <BigButton
-                            {width}
-                            onClick={() =>
-                                toggleMuteNotifications(
-                                    !$selectedChatSummaryStore?.membership.notificationsMuted,
-                                    undefined,
-                                )}>
-                            {#snippet icon(color, size)}
-                                {#if muted}
-                                    <Bell {color} {size} />
-                                {:else}
-                                    <BellOff {color} {size} />
-                                {/if}
-                            {/snippet}
-                            <Translatable
-                                resourceKey={i18nKey(muted ? "Unmute chat" : "Mute chat")} />
-                        </BigButton>
-                        <BigButton
-                            {width}
-                            onClick={() =>
-                                toggleMuteNotifications(
-                                    undefined,
-                                    !$selectedChatSummaryStore?.membership.atEveryoneMuted,
-                                )}>
-                            {#snippet icon(color, size)}
-                                <At {color} {size} />
-                            {/snippet}
-                            <Translatable
-                                resourceKey={i18nKey(
-                                    atEveryoneMuted ? "Unmute @everyone" : "Mute @everyone",
-                                )} />
-                        </BigButton>
-                        <BigButton {width} onClick={shareGroup}>
-                            {#snippet icon(color, size)}
-                                <Share {color} {size} />
-                            {/snippet}
-                            <Translatable resourceKey={i18nKey("Share chat")} />
-                        </BigButton>
-                    </Row>
-                {/if}
-
-                <ReadMore>
-                    <Body fontWeight={"light"}>
-                        <Markdown inline={false} text={chat.description} />
-                    </Body>
-                </ReadMore>
-            </Container>
-        </Container>
-
-        <MembersSummary collection={chat} />
-
-        <BotsSummary collection={chat} />
-
-        <PermissionsSummary
-            permissions={chat.permissions}
-            isPublic={chat.public}
-            isCommunityPublic={$selectedCommunitySummaryStore?.public ?? true}
-            isChannel={chat.kind === "channel"}
-            embeddedContent={chat.kind === "channel" && chat.externalUrl !== undefined} />
-
-        <AccessGateSummary gateConfig={chat.gateConfig} />
-
-        <DisappearingMessagesSummary eventsTTL={chat.eventsTTL} />
-
-        {#if combinedRulesText.length > 0}
-            <Separator />
-
-            <Container gap={"lg"} direction={"vertical"} padding={["zero", "md"]}>
-                <Body colour={"textSecondary"} fontWeight={"bold"}>
-                    <Translatable resourceKey={i18nKey("Group rules")}></Translatable>
-                </Body>
-
-                <Body><Markdown inline={false} text={combinedRulesText} /></Body>
-            </Container>
-        {/if}
-
-        <Separator />
-
-        <Container gap={"lg"} direction={"vertical"} padding={["zero", "md"]}>
-            <BodySmall colour={"textSecondary"} fontWeight={"bold"}>
-                <Translatable resourceKey={i18nKey("Group stats")}></Translatable>
-            </BodySmall>
-            <Stats showReported={false} stats={chat.metrics} />
-        </Container>
-
-        {#if canConvert}
-            <Separator />
-
-            <Container gap={"lg"} direction={"vertical"} padding={["zero", "md"]}>
-                <Container direction={"vertical"} gap={"sm"}>
-                    <Body fontWeight={"bold"}>
-                        <Translatable resourceKey={i18nKey("Convert to community")}></Translatable>
-                    </Body>
-                    <Body colour={"textSecondary"}>
-                        <Translatable
-                            resourceKey={i18nKey(
-                                "If your group is growing, and you would like to support multiple conversation streams, it might be time to convert to a community.",
-                            )}></Translatable>
-                    </Body>
-                </Container>
-
-                <Button loading={busy} onClick={convertToCommunity}>
-                    {#snippet icon(color)}
-                        <AccountGroup {color} />
-                    {/snippet}
-                    <Translatable resourceKey={i18nKey("Convert to community")}></Translatable>
-                </Button>
-            </Container>
-        {/if}
-
-        {#if canImportToCommunity}
-            <Separator />
-
-            <Container gap={"lg"} direction={"vertical"} padding={["zero", "md"]}>
-                <Container direction={"vertical"} gap={"sm"}>
-                    <Body fontWeight={"bold"}>
-                        <Translatable resourceKey={i18nKey("Import to community")}></Translatable>
-                    </Body>
-                    <Body colour={"textSecondary"}>
-                        <Translatable
-                            resourceKey={i18nKey(
-                                "Convert this group into a channel and import it into an existing community.",
-                            )}></Translatable>
-                    </Body>
-                </Container>
-
-                <Button loading={busy} onClick={importToCommunity}>
-                    {#snippet icon(color)}
-                        <AccountGroup {color} />
-                    {/snippet}
-                    <Translatable resourceKey={i18nKey("Import to community")}></Translatable>
-                </Button>
-            </Container>
-        {/if}
-
-        {#if !$anonUserStore && client.canDeleteGroup(chat.id)}
-            <Separator />
-
-            <Container gap={"lg"} direction={"vertical"} padding={["zero", "md"]}>
-                <Container direction={"vertical"} gap={"sm"}>
-                    <Body fontWeight={"bold"}>
-                        <Translatable resourceKey={i18nKey("Delete group")}></Translatable>
-                    </Body>
-                    <Body colour={"textSecondary"}>
-                        <Translatable
-                            resourceKey={i18nKey(
-                                "Keep in mind that by deleting a group all of its data is also removed, and this operation cannot be undone.",
-                            )}></Translatable>
-                    </Body>
-                </Container>
-
-                <Button danger loading={busy} onClick={() => publish("deleteChat", chat)}>
-                    {#snippet icon(color)}
-                        <Delete {color} />
-                    {/snippet}
-                    <Translatable resourceKey={i18nKey("Delete group")}></Translatable>
-                </Button>
-            </Container>
-        {:else if !$anonUserStore && client.canLeaveGroup(chat.id)}
-            <Separator />
-
-            <Container gap={"lg"} direction={"vertical"} padding={["zero", "md"]}>
-                <Container direction={"vertical"} gap={"sm"}>
-                    <Body fontWeight={"bold"}>
-                        <Translatable resourceKey={i18nKey("Leave group")}></Translatable>
-                    </Body>
-                    <Body colour={"textSecondary"}>
-                        <Translatable
-                            resourceKey={i18nKey(
-                                "Keep in mind that you may have to pass access gates to re-join later. A group must have at least one owner.",
-                            )}></Translatable>
-                    </Body>
-                </Container>
-
-                <Button loading={busy} onClick={leaveGroup}>
-                    {#snippet icon(color)}
-                        <Exit {color} />
-                    {/snippet}
-                    <Translatable resourceKey={i18nKey("Leave group")}></Translatable>
-                </Button>
-            </Container>
-        {/if}
-    </Container>
-</Container>
-
-<style lang="scss">
-    :global(.container.name_and_description) {
-        margin-top: -1.75rem;
-    }
-
-    :global(.container.group_details_header > .icon_button:first-child) {
-        margin-inline-end: auto;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/groupdetails/PermissionsSummary.svelte b/frontend/app/src/components_mobile/home/groupdetails/PermissionsSummary.svelte
deleted file mode 100644
index 59675bc7cf..0000000000
--- a/frontend/app/src/components_mobile/home/groupdetails/PermissionsSummary.svelte
+++ /dev/null
@@ -1,161 +0,0 @@
-<script lang="ts">
-    import { i18nKey } from "@src/i18n/i18n";
-    import { Body, Chip, Container, transition } from "component-lib";
-    import {
-        ROLE_ADMIN,
-        ROLE_MEMBER,
-        ROLE_MODERATOR,
-        ROLE_NONE,
-        ROLE_OWNER,
-        type ChatPermissionRole,
-        type ChatPermissions,
-        type MessagePermissions,
-        type PermissionsByRole,
-    } from "@client";
-    import { _ } from "svelte-i18n";
-    import Translatable from "../../Translatable.svelte";
-    import GroupPermissionsPartitionViewer from "../GroupPermissionsPartitionViewer.svelte";
-    import Separator from "../Separator.svelte";
-
-    interface Props {
-        permissions: ChatPermissions;
-        isPublic: boolean;
-        isCommunityPublic: boolean;
-        isChannel: boolean;
-        embeddedContent: boolean;
-    }
-
-    let { permissions, isPublic, isCommunityPublic, isChannel, embeddedContent }: Props = $props();
-
-    let items = embeddedContent
-        ? [i18nKey("permissions.general")]
-        : [
-              i18nKey("permissions.general"),
-              i18nKey("permissions.message"),
-              i18nKey("permissions.thread"),
-          ];
-    let selectedTab = $state(items[0].key);
-    let threadPartition = $derived(
-        partitionMessagePermissions(
-            permissions.threadPermissions ?? permissions.messagePermissions,
-            true,
-        ),
-    );
-    let messagePartition = $derived(
-        partitionMessagePermissions(permissions.messagePermissions, false),
-    );
-    let generalPartition = $derived(
-        partitionPermissions(
-            {
-                changeRoles: permissions.changeRoles,
-                updateGroup: permissions.updateGroup,
-                inviteUsers: permissions.inviteUsers,
-                addMembers: permissions.addMembers,
-                removeMembers: permissions.removeMembers,
-                deleteMessages: permissions.deleteMessages,
-                startVideoCall: permissions.startVideoCall,
-                pinMessages: permissions.pinMessages,
-                reactToMessages: permissions.reactToMessages,
-                mentionAllMembers: permissions.mentionAllMembers,
-            },
-            "",
-        ),
-    );
-
-    type PermissionsEntry = [keyof ChatPermissions, ChatPermissionRole];
-
-    function partitionMessagePermissions(
-        mps: MessagePermissions,
-        thread: boolean,
-    ): PermissionsByRole {
-        let permissions: Record<string, ChatPermissionRole> = {
-            text: mps.text ?? mps.default,
-            image: mps.image ?? mps.default,
-            video: mps.video ?? mps.default,
-            audio: mps.audio ?? mps.default,
-            file: mps.file ?? mps.default,
-            poll: mps.poll ?? mps.default,
-            crypto: mps.crypto ?? mps.default,
-            giphy: mps.giphy ?? mps.default,
-            memeFighter: mps.memeFighter ?? mps.default,
-            p2pSwap: mps.p2pSwap ?? mps.default,
-        };
-
-        if (!thread) {
-            permissions = { ...permissions, prize: mps.prize ?? mps.default };
-        }
-
-        return partitionPermissions(
-            permissions,
-            thread ? "threadPermissions." : "messagePermissions.",
-        );
-    }
-
-    function filterPermissions([key, _]: PermissionsEntry): boolean {
-        if (isPublic && key === "inviteUsers") {
-            return false;
-        }
-        if (key === "addMembers" && (!isChannel || isCommunityPublic)) {
-            return false;
-        }
-        return true;
-    }
-
-    function partitionPermissions(
-        permissions: Record<string, ChatPermissionRole>,
-        translationExt: string,
-    ): PermissionsByRole {
-        return (Object.entries(permissions) as PermissionsEntry[]).filter(filterPermissions).reduce(
-            (dict: PermissionsByRole, [key, val]) => {
-                const text = $_(
-                    `permissions.${translationExt}${key}`,
-                    key === "mentionAllMembers" ? { values: { mention: "@everyone" } } : {},
-                );
-
-                dict[val].add(text);
-                return dict;
-            },
-            {
-                [ROLE_OWNER]: new Set(),
-                [ROLE_ADMIN]: new Set(),
-                [ROLE_MODERATOR]: new Set(),
-                [ROLE_MEMBER]: new Set(),
-                [ROLE_NONE]: new Set(),
-            } as PermissionsByRole,
-        );
-    }
-
-    function switchTab(tab: string) {
-        transition(["fade"], () => {
-            selectedTab = tab;
-        });
-    }
-</script>
-
-{#snippet viewChip(tab: string)}
-    <Chip fill onClick={() => switchTab(tab)} mode={selectedTab === tab ? "rounded" : "unselected"}>
-        <Translatable resourceKey={i18nKey(tab)}></Translatable>
-    </Chip>
-{/snippet}
-
-<Separator />
-
-<Container padding={["zero", "md"]} gap={"xl"} direction={"vertical"}>
-    <Body colour={"textSecondary"} fontWeight={"bold"}>
-        <Translatable resourceKey={i18nKey("Permissions")}></Translatable>
-    </Body>
-
-    <Container gap={"sm"}>
-        {@render viewChip("permissions.general")}
-        {@render viewChip("permissions.message")}
-        {@render viewChip("permissions.thread")}
-    </Container>
-
-    {#if selectedTab === "permissions.general"}
-        <GroupPermissionsPartitionViewer partition={generalPartition} />
-    {:else if selectedTab === "permissions.message"}
-        <GroupPermissionsPartitionViewer partition={messagePartition} />
-    {:else if selectedTab === "permissions.thread"}
-        <GroupPermissionsPartitionViewer partition={threadPartition} />
-    {/if}
-</Container>
diff --git a/frontend/app/src/components_mobile/home/insurance/StreakInsuranceBuy.svelte b/frontend/app/src/components_mobile/home/insurance/StreakInsuranceBuy.svelte
deleted file mode 100644
index 46ee76440e..0000000000
--- a/frontend/app/src/components_mobile/home/insurance/StreakInsuranceBuy.svelte
+++ /dev/null
@@ -1,204 +0,0 @@
-<script lang="ts">
-    import MulticolourText from "@src/components_mobile/MulticolourText.svelte";
-    import { toastStore } from "@src/stores/toast";
-    import {
-        Avatar,
-        Body,
-        BodySmall,
-        Caption,
-        type ColourVarKeys,
-        ColourVars,
-        Column,
-        CommonButton,
-        Container,
-        H2,
-        Row,
-        Subtitle,
-    } from "component-lib";
-    import {
-        LEDGER_CANISTER_CHAT,
-        OpenChat,
-        enhancedCryptoLookup,
-        publish,
-        streakInsuranceStore,
-    } from "@client";
-    import { getContext } from "svelte";
-    import Plus from "svelte-material-icons/Plus.svelte";
-    import QrCode from "svelte-material-icons/Qrcode.svelte";
-    import Wallet from "svelte-material-icons/WalletOutline.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Translatable from "../../Translatable.svelte";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
-    import StreakHeadline from "../user_profile/StreakHeadline.svelte";
-    import { TokenState } from "../wallet/walletState.svelte";
-
-    const client = getContext<OpenChat>("client");
-    interface Props {
-        onClose: () => void;
-    }
-
-    const MAX_DAYS = 30;
-    const ledger = LEDGER_CANISTER_CHAT;
-    const token = $derived($enhancedCryptoLookup.get(ledger));
-    const tokenState = $derived(new TokenState(token!));
-    const currentDaysInsured = $streakInsuranceStore.daysInsured;
-    const currentDaysMissed = $streakInsuranceStore.daysMissed;
-    let { onClose }: Props = $props();
-    let additionalDays = $state(0);
-    let insufficientBalance = $derived(tokenState.remainingBalance < 0);
-    let paying = $state(false);
-    let remaining = $derived(currentDaysInsured + additionalDays - currentDaysMissed);
-    let totalDays = $derived(currentDaysInsured + additionalDays);
-    let maxReached = $derived(totalDays >= MAX_DAYS);
-
-    $effect(() => {
-        tokenState.draftAmount = client.streakInsurancePrice(currentDaysInsured, additionalDays);
-    });
-
-    function pay() {
-        paying = true;
-        client
-            .payForStreakInsurance(additionalDays, tokenState.draftAmount)
-            .then((resp) => {
-                if (resp.kind !== "success") {
-                    toastStore.showFailureToast(i18nKey("streakInsurance.failure"));
-                } else {
-                    onClose();
-                }
-            })
-            .finally(() => (paying = false));
-    }
-</script>
-
-{#snippet metric(word: string, subtext: string, accent: ColourVarKeys, val: number)}
-    <Row
-        mainAxisAlignment={"spaceBetween"}
-        crossAxisAlignment={"center"}
-        borderRadius={"md"}
-        minHeight={"4rem"}
-        gap={"md"}
-        background={ColourVars.background2}
-        padding={["md", "lg"]}>
-        <Column width={"fill"}>
-            <Subtitle fontWeight={"bold"}>
-                <MulticolourText
-                    parts={[
-                        { text: i18nKey("Days "), colour: "textPrimary" },
-                        { text: i18nKey(word), colour: accent },
-                    ]} />
-            </Subtitle>
-            <BodySmall colour={"textSecondary"}>
-                <Translatable resourceKey={i18nKey(subtext)} />
-            </BodySmall>
-        </Column>
-        <H2 colour={accent} width={"hug"} fontWeight={"bold"}>{val}</H2>
-    </Row>
-{/snippet}
-
-{#snippet tokenBalance()}
-    <Row gap={"sm"}>
-        <Row
-            mainAxisAlignment={"spaceBetween"}
-            crossAxisAlignment={"center"}
-            borderRadius={"md"}
-            minHeight={"4rem"}
-            gap={"md"}
-            background={ColourVars.background2}
-            padding={["md", "lg"]}>
-            <Avatar url={tokenState.logo} />
-            <Column width={"fill"}>
-                <Body fontWeight={"bold"} colour={"textPrimary"} width={"hug"}
-                    >{tokenState.symbol}</Body>
-                <Caption colour={"textSecondary"} fontWeight={"bold"}>
-                    {tokenState.formattedTokenBalance}
-                </Caption>
-            </Column>
-        </Row>
-        {#if insufficientBalance}
-            <Column
-                onClick={() => publish("receiveToken", tokenState)}
-                mainAxisAlignment={"center"}
-                crossAxisAlignment={"center"}
-                width={{ size: "4rem" }}
-                height={"fill"}
-                borderRadius={"lg"}
-                background={ColourVars.background2}
-                padding={["sm", "md"]}>
-                <QrCode size={"2rem"} color={ColourVars.textSecondary} />
-            </Column>
-        {/if}
-    </Row>
-{/snippet}
-
-<SlidingPageContent
-    title={i18nKey("Streak insurance")}
-    subtitle={i18nKey("Make sure your streak stays intact")}>
-    <Container height={"fill"} padding={["xl", "xl", "huge"]} gap={"xl"} direction={"vertical"}>
-        <StreakHeadline />
-
-        <Body>
-            <MulticolourText
-                parts={[
-                    {
-                        text: i18nKey("Use our "),
-                        colour: "textSecondary",
-                    },
-                    {
-                        text: i18nKey("streak insurance "),
-                        colour: "primary",
-                    },
-                    {
-                        text: i18nKey(
-                            "feature to prevent your streak from reseting to zero if you miss a day or two for any reason.",
-                        ),
-                        colour: "textSecondary",
-                    },
-                ]} />
-        </Body>
-
-        {@render tokenBalance()}
-
-        <Column gap={"sm"}>
-            {@render metric(
-                "insured",
-                "Number of streak days you've insured",
-                "primary",
-                totalDays,
-            )}
-            {@render metric(
-                "missed",
-                "Number of used streak insurance days",
-                "secondary",
-                currentDaysMissed,
-            )}
-            {@render metric("remaining", "Remaining insured streak days", "warning", remaining)}
-        </Column>
-
-        <Row crossAxisAlignment={"center"} mainAxisAlignment={"spaceBetween"}>
-            <CommonButton
-                mode={"active"}
-                size={"small_text"}
-                disabled={paying || maxReached}
-                onClick={() => (additionalDays += 1)}>
-                {#snippet icon(color)}
-                    <Plus {color} />
-                {/snippet}
-                <Translatable resourceKey={i18nKey("streakInsurance.addDay")}></Translatable>
-            </CommonButton>
-            <CommonButton
-                mode={"active"}
-                size={"medium"}
-                loading={paying}
-                disabled={paying || additionalDays === 0 || insufficientBalance}
-                onClick={pay}>
-                {#snippet icon(color, size)}
-                    <Wallet {color} {size} />
-                {/snippet}
-                <Translatable
-                    resourceKey={i18nKey("streakInsurance.pay", {
-                        price: tokenState.formatTokens(tokenState.draftAmount),
-                    })}></Translatable>
-            </CommonButton>
-        </Row>
-    </Container>
-</SlidingPageContent>
diff --git a/frontend/app/src/components_mobile/home/landing/ArrowLink.svelte b/frontend/app/src/components_mobile/home/landing/ArrowLink.svelte
deleted file mode 100644
index fd4ee5ade9..0000000000
--- a/frontend/app/src/components_mobile/home/landing/ArrowLink.svelte
+++ /dev/null
@@ -1,51 +0,0 @@
-<script lang="ts">
-    import type { Snippet } from "svelte";
-    import Arrow from "@shared_components/Arrow.svelte";
-
-    interface Props {
-        url: string;
-        color?: string;
-        target?: string | undefined;
-        children?: Snippet;
-    }
-
-    let { url, color = "#7E52FF", target = undefined, children }: Props = $props();
-</script>
-
-<a class="link" href={url} {target}>
-    {@render children?.()}
-    <div class="arrow">
-        <Arrow {color} />
-    </div>
-</a>
-
-<style lang="scss">
-    a {
-        position: relative;
-        @include font(bold, normal, fs-100);
-        color: inherit;
-        text-decoration: none;
-        display: flex;
-        align-items: center;
-        gap: $sp3;
-        transition: color 250ms ease-in-out;
-        white-space: nowrap;
-
-        .arrow {
-            transition: flex 250ms ease-in-out;
-            flex: 0 0 toRem(16);
-            text-align: end;
-        }
-
-        @media (hover: hover) {
-            &:hover {
-                text-decoration: none;
-                color: var(--landing-txt-light);
-
-                .arrow {
-                    flex: 0 0 toRem(24);
-                }
-            }
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/membership/BlockedUser.svelte b/frontend/app/src/components_mobile/home/membership/BlockedUser.svelte
deleted file mode 100644
index c27bf54b18..0000000000
--- a/frontend/app/src/components_mobile/home/membership/BlockedUser.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script lang="ts">
-    import { MenuItem } from "component-lib";
-    import type { UserSummary } from "@shared";
-    import Cancel from "svelte-material-icons/Cancel.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Translatable from "../../Translatable.svelte";
-    import User from "../User.svelte";
-
-    interface Props {
-        user: UserSummary;
-        searchTerm?: string;
-        me?: boolean;
-        onUnblockUser?: (userId: string) => void;
-    }
-
-    let { user, searchTerm = "", me = false, onUnblockUser }: Props = $props();
-</script>
-
-<User {me} {user} {searchTerm}>
-    {#if onUnblockUser !== undefined}
-        <MenuItem onclick={() => onUnblockUser(user.userId)}>
-            {#snippet icon(color, size)}
-                <Cancel {size} {color} />
-            {/snippet}
-            <Translatable resourceKey={i18nKey("unblockUser")} />
-        </MenuItem>
-    {/if}
-</User>
diff --git a/frontend/app/src/components_mobile/home/membership/InvitedUser.svelte b/frontend/app/src/components_mobile/home/membership/InvitedUser.svelte
deleted file mode 100644
index e4d270fa5a..0000000000
--- a/frontend/app/src/components_mobile/home/membership/InvitedUser.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script lang="ts">
-    import { MenuItem } from "component-lib";
-    import type { UserSummary } from "@shared";
-    import Cancel from "svelte-material-icons/Cancel.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Translatable from "../../Translatable.svelte";
-    import User from "../User.svelte";
-
-    interface Props {
-        user: UserSummary;
-        me?: boolean;
-        onCancelInvite?: (userId: string) => void;
-    }
-
-    let { user, me = false, onCancelInvite }: Props = $props();
-</script>
-
-<User {me} {user}>
-    {#if onCancelInvite !== undefined}
-        <MenuItem onclick={() => onCancelInvite(user.userId)}>
-            {#snippet icon(color, size)}
-                <Cancel {size} {color} />
-            {/snippet}
-            <Translatable resourceKey={i18nKey("cancelInvite")} />
-        </MenuItem>
-    {/if}
-</User>
diff --git a/frontend/app/src/components_mobile/home/membership/LapsedUser.svelte b/frontend/app/src/components_mobile/home/membership/LapsedUser.svelte
deleted file mode 100644
index 55e6805dde..0000000000
--- a/frontend/app/src/components_mobile/home/membership/LapsedUser.svelte
+++ /dev/null
@@ -1,40 +0,0 @@
-<script lang="ts">
-    import { MenuItem } from "component-lib";
-    import type { UserSummary } from "@shared";
-    import Cancel from "svelte-material-icons/Cancel.svelte";
-    import MinusCircleOutline from "svelte-material-icons/MinusCircleOutline.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Translatable from "../../Translatable.svelte";
-    import User from "../User.svelte";
-
-    interface Props {
-        user: UserSummary;
-        searchTerm?: string;
-        me?: boolean;
-        onBlockUser?: (userId: string) => void;
-        onRemoveMember?: (userId: string) => void;
-    }
-
-    let { user, searchTerm = "", me = false, onBlockUser, onRemoveMember }: Props = $props();
-</script>
-
-<User {me} {user} {searchTerm}>
-    {#if onBlockUser || onRemoveMember}
-        {#if onBlockUser}
-            <MenuItem onclick={() => onBlockUser(user.userId)}>
-                {#snippet icon(color, size)}
-                    <Cancel {size} {color} />
-                {/snippet}
-                <Translatable resourceKey={i18nKey("blockUser")} />
-            </MenuItem>
-        {/if}
-        {#if onRemoveMember}
-            <MenuItem onclick={() => onRemoveMember(user.userId)}>
-                {#snippet icon(color, size)}
-                    <MinusCircleOutline {size} {color} />
-                {/snippet}
-                <Translatable resourceKey={i18nKey("remove")} />
-            </MenuItem>
-        {/if}
-    {/if}
-</User>
diff --git a/frontend/app/src/components_mobile/home/membership/Member.svelte b/frontend/app/src/components_mobile/home/membership/Member.svelte
deleted file mode 100644
index f35b25d087..0000000000
--- a/frontend/app/src/components_mobile/home/membership/Member.svelte
+++ /dev/null
@@ -1,152 +0,0 @@
-<script lang="ts">
-    import { MenuItem } from "component-lib";
-    import {
-        ROLE_ADMIN,
-        ROLE_MEMBER,
-        ROLE_MODERATOR,
-        ROLE_OWNER,
-        roleAsText,
-        type FullMember,
-        type MemberRole,
-    } from "@client";
-    import { _ } from "svelte-i18n";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Translatable from "../../Translatable.svelte";
-    import User from "../User.svelte";
-
-    interface Props {
-        me: boolean;
-        member: FullMember;
-        canPromoteToOwner?: boolean;
-        canPromoteToAdmin?: boolean;
-        canDemoteToAdmin?: boolean;
-        canPromoteToModerator?: boolean;
-        canDemoteToModerator?: boolean;
-        canDemoteToMember?: boolean;
-        canRemoveMember?: boolean;
-        canBlockUser?: boolean;
-        searchTerm?: string;
-        onRemoveMember?: (userId: string) => void;
-        onChangeRole?: (args: { userId: string; newRole: MemberRole; oldRole: MemberRole }) => void;
-        onBlockUser?: (userId: string) => void;
-    }
-
-    let {
-        me,
-        member,
-        canPromoteToOwner = false,
-        canPromoteToAdmin = false,
-        canDemoteToAdmin = false,
-        canPromoteToModerator = false,
-        canDemoteToModerator = false,
-        canDemoteToMember = false,
-        canRemoveMember = false,
-        canBlockUser = false,
-        searchTerm = "",
-        onRemoveMember,
-        onChangeRole,
-        onBlockUser,
-    }: Props = $props();
-
-    // if search term is !== "", split the username into three parts [prefix, match, postfix]
-
-    let showMenu = $derived(
-        canPromoteToOwner ||
-            canPromoteToAdmin ||
-            canDemoteToAdmin ||
-            canPromoteToModerator ||
-            canDemoteToModerator ||
-            canDemoteToMember ||
-            canRemoveMember ||
-            canBlockUser,
-    );
-
-    let ownerText = $derived($_(roleAsText(ROLE_OWNER)));
-    let adminText = $derived($_(roleAsText(ROLE_ADMIN)));
-    let moderatorText = $derived($_(roleAsText(ROLE_MODERATOR)));
-    let memberText = $derived($_(roleAsText(ROLE_MEMBER)));
-
-    function removeUser() {
-        onRemoveMember?.(member.userId);
-    }
-
-    function changeRole(role: MemberRole) {
-        onChangeRole?.({
-            userId: member.userId,
-            newRole: role,
-            oldRole: member.role,
-        });
-    }
-
-    function blockUser() {
-        onBlockUser?.(member.userId);
-    }
-</script>
-
-{#snippet children()}
-    {#if canPromoteToOwner}
-        <MenuItem onclick={() => changeRole(ROLE_OWNER)}>
-            <Translatable
-                resourceKey={i18nKey("promoteTo", {
-                    role: ownerText,
-                })} />
-        </MenuItem>
-    {/if}
-    {#if canPromoteToAdmin}
-        <MenuItem onclick={() => changeRole(ROLE_ADMIN)}>
-            <Translatable
-                resourceKey={i18nKey("promoteTo", {
-                    role: adminText,
-                })} />
-        </MenuItem>
-    {/if}
-    {#if canDemoteToAdmin}
-        <MenuItem onclick={() => changeRole(ROLE_ADMIN)}>
-            <Translatable
-                resourceKey={i18nKey("demoteTo", {
-                    role: adminText,
-                })} />
-        </MenuItem>
-    {/if}
-    {#if canPromoteToModerator}
-        <MenuItem onclick={() => changeRole(ROLE_MODERATOR)}>
-            <Translatable
-                resourceKey={i18nKey("promoteTo", {
-                    role: moderatorText,
-                })} />
-        </MenuItem>
-    {/if}
-    {#if canDemoteToModerator}
-        <MenuItem onclick={() => changeRole(ROLE_MODERATOR)}>
-            <Translatable
-                resourceKey={i18nKey("demoteTo", {
-                    role: moderatorText,
-                })} />
-        </MenuItem>
-    {/if}
-    {#if canDemoteToMember}
-        <MenuItem onclick={() => changeRole(ROLE_MEMBER)}>
-            <Translatable
-                resourceKey={i18nKey("demoteTo", {
-                    role: memberText,
-                })} />
-        </MenuItem>
-    {/if}
-    {#if canBlockUser}
-        <MenuItem onclick={blockUser}>
-            <Translatable resourceKey={i18nKey("blockUser")} />
-        </MenuItem>
-    {/if}
-    {#if canRemoveMember}
-        <MenuItem onclick={removeUser}>
-            <Translatable resourceKey={i18nKey("remove")} />
-        </MenuItem>
-    {/if}
-{/snippet}
-
-<User
-    children={showMenu ? children : undefined}
-    user={member}
-    {me}
-    {searchTerm}
-    role={member.role > ROLE_MEMBER ? member.role : undefined} />
diff --git a/frontend/app/src/components_mobile/home/membership/Share.svelte b/frontend/app/src/components_mobile/home/membership/Share.svelte
deleted file mode 100644
index 1e15680b37..0000000000
--- a/frontend/app/src/components_mobile/home/membership/Share.svelte
+++ /dev/null
@@ -1,121 +0,0 @@
-<script lang="ts">
-    import { i18nKey, interpolate } from "@src/i18n/i18n";
-    import {
-        ColourVars,
-        CommonButton,
-        Container,
-        CopyCard,
-        FloatingButton,
-        StatusCard,
-        Switch,
-    } from "component-lib";
-    import Reload from "svelte-material-icons/Reload.svelte";
-    import ShareIcon from "svelte-material-icons/ShareOutline.svelte";
-    import AreYouSure from "../../AreYouSure.svelte";
-    import QRCode from "../../QRCode.svelte";
-    import Setting from "../../Setting.svelte";
-    import Translatable from "../../Translatable.svelte";
-
-    import { canShare } from "@src/utils/share";
-    import { OpenChat, type Level } from "@client";
-    import { getContext, onMount } from "svelte";
-    import { _ } from "svelte-i18n";
-    import type { MemberManagement } from "./membersState.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        membersState: MemberManagement;
-        level: Level;
-    }
-    let { membersState, level }: Props = $props();
-
-    onMount(() => membersState.initialiseSharing());
-
-    let link = $derived(membersState.getSharingLink(client));
-
-    function onShare() {
-        membersState.shareLink(link);
-    }
-
-    let showLink = $derived(
-        membersState.isPublic ||
-            (membersState.sharingLinkCode !== undefined && membersState.sharingLinkEnabled),
-    );
-</script>
-
-{#if membersState.confirmingResetLink}
-    <AreYouSure
-        message={i18nKey("invite.confirmReset", undefined, membersState.level, true)}
-        action={(answer) => membersState.confirmResetLinkResponse(answer)} />
-{/if}
-
-{#snippet action()}
-    <Container mainAxisAlignment={"end"}>
-        <CommonButton
-            loading={membersState.confirmingResetLink}
-            onClick={() => membersState.confirmResetLink()}
-            mode={"active"}
-            size={"small_text"}>
-            {#snippet icon(color, size)}
-                <Reload {color} {size} />
-            {/snippet}
-            <Translatable resourceKey={i18nKey("invite.resetLink")}></Translatable>
-        </CommonButton>
-    </Container>
-{/snippet}
-
-<Container gap={"xl"} direction={"vertical"} height={"fill"}>
-    {#if !membersState.isPublic}
-        <Container padding={["zero", "md"]} gap={"xl"} direction={"vertical"}>
-            <Setting
-                toggle={() => membersState.toggleInviteLink()}
-                info={"When enabled, a link and a QR code will be available to share with any user you would like to invite to become a member of this group."}>
-                <Switch
-                    loading={membersState.togglingSharingLink}
-                    onChange={() => membersState.toggleInviteLink()}
-                    width={"fill"}
-                    reverse
-                    checked={membersState.sharingLinkEnabled}>
-                    <Translatable resourceKey={i18nKey("Enable sharing via link")}></Translatable>
-                </Switch>
-            </Setting>
-        </Container>
-    {/if}
-    {#if showLink}
-        <StatusCard
-            mode={"warning"}
-            title={interpolate(
-                $_,
-                i18nKey("Anyone with this link can join the {level}", undefined, level, true),
-            )}
-            body={interpolate(
-                $_,
-                i18nKey(
-                    "Anyone with this link can preview and join the {level}. This means that access gates are ignored. As a Diamond member you can also earn referral rewards.",
-                    undefined,
-                    level,
-                    true,
-                ),
-            )}>
-        </StatusCard>
-        <Container gap={"xs"} direction={"vertical"}>
-            <CopyCard
-                action={membersState.sharingLinkCode !== undefined ? action : undefined}
-                title={"Share using this link"}
-                body={link}>
-            </CopyCard>
-            <Container padding={"md"} background={ColourVars.background1}>
-                <QRCode text={link} fullWidthOnMobile />
-            </Container>
-        </Container>
-    {/if}
-</Container>
-
-{#if showLink && canShare()}
-    <FloatingButton onClick={onShare} pos={{ bottom: "lg", right: "lg" }}>
-        {#snippet icon(color)}
-            <ShareIcon {color} />
-        {/snippet}
-    </FloatingButton>
-{/if}
diff --git a/frontend/app/src/components_mobile/home/message/ThreadSummary.svelte b/frontend/app/src/components_mobile/home/message/ThreadSummary.svelte
deleted file mode 100644
index ff521925d5..0000000000
--- a/frontend/app/src/components_mobile/home/message/ThreadSummary.svelte
+++ /dev/null
@@ -1,152 +0,0 @@
-<script lang="ts">
-    import {
-        Avatar,
-        ChatFootnote,
-        ColourVars,
-        Container,
-        CountBadge,
-        NotificationIndicator,
-        type Padding,
-        type Radius,
-    } from "component-lib";
-    import {
-        allUsersStore,
-        messagesRead,
-        OpenChat,
-        threadsFollowedByMeStore,
-        type ChatIdentifier,
-        type ThreadSummary,
-    } from "@client";
-    import { navigate } from "@utils/navigation";
-    import { getContext, onMount } from "svelte";
-    import { _ } from "svelte-i18n";
-    import ChevronRight from "svelte-material-icons/ChevronRight.svelte";
-
-    const client = getContext<OpenChat>("client");
-    const MAX_AVATARS = 3;
-
-    interface Props {
-        chatId: ChatIdentifier;
-        threadSummary: ThreadSummary;
-        threadRootMessageIndex: number;
-        me?: boolean;
-        url: string;
-    }
-
-    let { chatId, url, threadRootMessageIndex, threadSummary, me = false }: Props = $props();
-
-    let lastMessageIndex = $derived(threadSummary.numberOfReplies - 1); //using this as a surrogate for message index for now
-    let unreadCount = $derived(
-        client.unreadThreadMessageCount(chatId, threadRootMessageIndex, lastMessageIndex),
-    );
-    let hasUnread = $derived(unreadCount > 0);
-    let isFollowedByMe = $derived(
-        $threadsFollowedByMeStore.get(chatId)?.has(threadRootMessageIndex) ?? false,
-    );
-    let borderColour = $derived(
-        hasUnread && isFollowedByMe ? ColourVars.primary : ColourVars.disabledButton,
-    );
-    let borderRadius = $derived<Radius>(me ? ["xl", "sm", "xl", "xl"] : ["sm", "xl", "xl", "xl"]); // this will need more logic
-    let padding = $derived<Padding>(me ? ["xs", "md", "xs", "xs"] : ["xs", "xs", "xs", "md"]);
-    let participantAvatarUrls = $derived(
-        [...threadSummary.participantIds].map((p) => client.userAvatarUrl($allUsersStore.get(p))),
-    );
-    let additional = $derived(participantAvatarUrls.length - MAX_AVATARS);
-    let text = $derived(
-        $_("thread.nreplies", {
-            values: {
-                number: threadSummary.numberOfReplies.toString(),
-                replies:
-                    threadSummary.numberOfReplies === 1 ? $_("thread.reply") : $_("thread.replies"),
-                message: $_("thread.lastMessage", {
-                    values: {
-                        date: client.formatMessageDate(
-                            threadSummary.latestEventTimestamp,
-                            $_("today"),
-                            $_("yesterday"),
-                            true,
-                            true,
-                        ),
-                    },
-                }),
-            },
-        }),
-    );
-
-    onMount(() => {
-        return messagesRead.subscribe(() => {
-            unreadCount = client.unreadThreadMessageCount(
-                chatId,
-                threadRootMessageIndex,
-                lastMessageIndex,
-            );
-        });
-    });
-</script>
-
-<Container
-    onClick={() => navigate(url)}
-    overflow={"visible"}
-    {borderColour}
-    borderWidth={"thick"}
-    crossAxisAlignment={"center"}
-    {borderRadius}
-    {padding}
-    gap={"md"}
-    height={"hug"}
-    width={"hug"}>
-    <Container supplementalClass={"thread-summary-avatars"} width={"hug"}>
-        {#each participantAvatarUrls.slice(0, MAX_AVATARS) as url}
-            <Avatar {url} size={"xs"}></Avatar>
-        {/each}
-        {#if additional > 0}
-            <CountBadge mode="additive">+{additional}</CountBadge>
-        {/if}
-    </Container>
-    <ChatFootnote width={"hug"} colour={"textSecondary"}>{text}</ChatFootnote>
-    <Container width={"hug"}>
-        <div class={`arrow`} class:hasUnread>
-            <ChevronRight color={ColourVars.background0} />
-        </div>
-    </Container>
-    {#if hasUnread}
-        <div class:me class="notification">
-            <NotificationIndicator muted={!isFollowedByMe}></NotificationIndicator>
-        </div>
-    {/if}
-</Container>
-
-<style lang="scss">
-    :global(.thread-summary-avatars img) {
-        margin-inline-start: -0.4rem;
-    }
-
-    :global(.thread-summary-avatars .badge) {
-        margin-inline-start: -0.4rem;
-    }
-
-    :global(.thread-summary-avatars .border:first-child img) {
-        margin-inline-start: 0;
-    }
-
-    .arrow {
-        background-color: var(--secondary-light);
-        border-radius: var(--rad-circle);
-        height: 16px;
-        display: flex;
-        &.hasUnread {
-            background-color: var(--primary-light);
-        }
-    }
-
-    .notification {
-        position: absolute;
-        top: -17px;
-        left: -15px;
-
-        &.me {
-            left: unset;
-            right: -15px;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/pinned/PinnedMessage.svelte b/frontend/app/src/components_mobile/home/pinned/PinnedMessage.svelte
deleted file mode 100644
index 12da7450c2..0000000000
--- a/frontend/app/src/components_mobile/home/pinned/PinnedMessage.svelte
+++ /dev/null
@@ -1,113 +0,0 @@
-<script lang="ts">
-    import { findUser } from "@src/utils/user";
-    import type { ProfileLinkClickedEvent } from "@webcomponents/profileLink";
-    import { Avatar, Container } from "component-lib";
-    import type { CreatedUser, Message, MultiUserChatIdentifier, OpenChat } from "@client";
-    import {
-        allUsersStore,
-        chatListScopeStore,
-        fullWidth,
-        routeForMessage,
-        selectedChatIdStore,
-        selectedChatWebhooksStore,
-    } from "@client";
-    import { navigate } from "@utils/navigation";
-    import { getContext } from "svelte";
-    import ChatMessageContent from "../ChatMessageContent.svelte";
-    import IntersectionObserver from "../IntersectionObserver.svelte";
-    import RepliesTo from "../RepliesTo.svelte";
-    import MessageBubble from "../message/MessageBubble.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        chatId: MultiUserChatIdentifier;
-        user: CreatedUser;
-        senderId: string;
-        msg: Message;
-        timestamp: bigint;
-    }
-
-    let { chatId, user, senderId, msg, timestamp }: Props = $props();
-
-    let sender = $derived(findUser(msg.sender, $allUsersStore, $selectedChatWebhooksStore));
-    let fill = $derived(client.fillMessage(msg));
-    let me = $derived(user.userId === senderId);
-    let modal = $derived(!$fullWidth);
-
-    function openUserProfile(e?: Event) {
-        if (!sender) return;
-
-        e?.preventDefault();
-        e?.target?.dispatchEvent(
-            new CustomEvent<ProfileLinkClickedEvent>("profile-clicked", {
-                detail: {
-                    userId: sender.userId,
-                    chatButton: !me,
-                    inGlobalContext: false,
-                },
-                bubbles: true,
-            }),
-        );
-    }
-
-    function goToMessageIndex() {
-        if ($selectedChatIdStore !== undefined) {
-            if (modal) {
-                client.popRightPanelHistory();
-            }
-            navigate(
-                routeForMessage(
-                    $chatListScopeStore.kind,
-                    { chatId: $selectedChatIdStore },
-                    msg.messageIndex,
-                ),
-            );
-        }
-    }
-</script>
-
-<Container gap={"sm"} onClick={goToMessageIndex}>
-    <div class="avatar">
-        <Avatar onClick={openUserProfile} url={client.userAvatarUrl(sender)} size={"md"} />
-    </div>
-    <IntersectionObserver>
-        {#snippet children(intersecting)}
-            <MessageBubble
-                {chatId}
-                {sender}
-                {msg}
-                {fill}
-                first
-                time={Number(timestamp)}
-                pinned
-                expiresAt={undefined}
-                bot={sender?.kind === "bot"}
-                onGoToMessageIndex={goToMessageIndex}
-                onOpenUserProfile={openUserProfile}
-                chatType={chatId.kind}>
-                {#snippet repliesTo(reply)}
-                    <RepliesTo {intersecting} readonly {chatId} repliesTo={reply} />
-                {/snippet}
-                {#snippet messageContent(me)}
-                    <ChatMessageContent
-                        readonly
-                        pinned
-                        {senderId}
-                        {fill}
-                        {timestamp}
-                        failed={false}
-                        messageContext={{ chatId }}
-                        edited={msg.edited}
-                        messageIndex={msg.messageIndex}
-                        messageId={msg.messageId}
-                        {me}
-                        {intersecting}
-                        content={msg.content}
-                        blockLevelMarkdown={msg.blockLevelMarkdown}
-                        ogPreviews={msg.ogPreviews} />
-                {/snippet}
-            </MessageBubble>
-        {/snippet}
-    </IntersectionObserver>
-</Container>
diff --git a/frontend/app/src/components_mobile/home/pinned/PinnedMessages.svelte b/frontend/app/src/components_mobile/home/pinned/PinnedMessages.svelte
deleted file mode 100644
index 5f4ad8e34f..0000000000
--- a/frontend/app/src/components_mobile/home/pinned/PinnedMessages.svelte
+++ /dev/null
@@ -1,164 +0,0 @@
-<script lang="ts">
-    import { Container } from "component-lib";
-    import type {
-        EventWrapper,
-        Message,
-        MultiUserChat,
-        OpenChat,
-        ReadonlySet,
-    } from "@client";
-    import {
-        currentUserStore,
-        messagesRead,
-        selectedChatPinnedMessagesStore,
-        selectedServerChatStore,
-        subscribe,
-    } from "@client";
-    import { isSuccessfulEventsResponse, publish } from "@shared";
-    import { getContext, onMount, tick, untrack } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { i18nKey } from "../../../i18n/i18n";
-    import type { RemoteData } from "../../../utils/remoteData";
-    import Loading from "@shared_components/Loading.svelte";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
-    import PinnedMessage from "./PinnedMessage.svelte";
-
-    interface Props {
-        pinned: ReadonlySet<number>;
-        chat: MultiUserChat;
-    }
-
-    let { pinned, chat }: Props = $props();
-    void pinned;
-
-    const client = getContext<OpenChat>("client");
-    let unread = $state<boolean>(false);
-    // $derived is load-bearing: a plain `let` captures a one-time snapshot,
-    // and if the panel mounts before the chat details (pinned set) arrive
-    // the panel stays empty forever.
-    let pinnedMessages = $derived($selectedChatPinnedMessagesStore);
-
-    onMount(() => {
-        const unsubs = [
-            subscribe("chatWith", () => publish("closeModalPage")),
-            messagesRead.subscribe(() => {
-                unread = client.unreadPinned(chat.id, chat.dateLastPinned);
-            }),
-        ];
-        return () => {
-            unsubs.forEach((u) => u());
-        };
-    });
-
-    let messagesDiv: HTMLDivElement | undefined = $state();
-
-    let messages: RemoteData<EventWrapper<Message>[][], string> = $state({ kind: "idle" });
-
-    function scrollBottom() {
-        if (messagesDiv !== undefined) {
-            messagesDiv.scrollTo({
-                top: messagesDiv.scrollHeight - messagesDiv.clientHeight,
-                behavior: "auto",
-            });
-        }
-    }
-
-    function reloadPinned(pinned: ReadonlySet<number>): void {
-        untrack(() => {
-            if (pinned.size > 0) {
-                if (messages.kind !== "success") {
-                    messages = { kind: "loading" };
-                }
-                client
-                    .getMessagesByMessageIndex(chat.id, undefined, [...pinned])
-                    .then((resp) => {
-                        if (!isSuccessfulEventsResponse(resp)) {
-                            messages = { kind: "error", error: "Unable to load pinned messages" };
-                        } else {
-                            messages = {
-                                kind: "success",
-                                data: client.groupMessagesByDate(
-                                    resp.events.sort((a, b) => a.index - b.index),
-                                ),
-                            };
-
-                            if (unread) {
-                                client.markPinnedMessagesRead(chat.id, chat.dateLastPinned!);
-                            }
-
-                            tick().then(scrollBottom);
-                        }
-                    })
-                    .catch((err) => {
-                        client.logError("Unable to load pinned messages: ", err);
-                        messages = { kind: "error", error: err.toString() };
-                    });
-            } else {
-                messages = { kind: "success", data: [] };
-            }
-        });
-    }
-
-    $effect(() => {
-        // Until the chat details arrive the pinned set is UNKNOWN, not empty —
-        // rendering the empty state here made the panel show "no pins" for the
-        // first second on a first open (cold cache / slow connection).
-        if ($selectedServerChatStore === undefined) {
-            messages = { kind: "loading" };
-            return;
-        }
-        reloadPinned(pinnedMessages);
-        unread = client.unreadPinned(chat.id, chat.dateLastPinned);
-    });
-
-    function dateGroupKey(group: EventWrapper<Message>[]): string {
-        const first = group[0] && group[0] && group[0].timestamp;
-        return first ? new Date(Number(first)).toDateString() : "unknown";
-    }
-</script>
-
-<SlidingPageContent title={i18nKey("pinnedMessages")}>
-    <Container gap={"sm"} padding={"lg"} height={"fill"} direction={"vertical"} bind:ref={messagesDiv}>
-        {#if messages.kind !== "success"}
-            <Loading />
-        {:else}
-            {#each messages.data as dayGroup (dateGroupKey(dayGroup))}
-                <Container gap={"sm"} direction={"vertical"}>
-                    <div class="date-label">
-                        {client.formatMessageDate(
-                            dayGroup[0]?.timestamp,
-                            $_("today"),
-                            $_("yesterday"),
-                        )}
-                    </div>
-                    {#each dayGroup as message (message.event.messageId)}
-                        <PinnedMessage
-                            chatId={chat.id}
-                            timestamp={message.timestamp}
-                            user={$currentUserStore}
-                            senderId={message.event.sender}
-                            msg={message.event} />
-                    {/each}
-                </Container>
-            {/each}
-        {/if}
-    </Container>
-</SlidingPageContent>
-
-<style lang="scss">
-    .date-label {
-        padding: $sp2;
-        background-color: var(--currentChat-date-bg);
-        border: var(--currentChat-date-bd);
-        color: var(--currentChat-date-txt);
-        position: sticky;
-        top: 0;
-        width: 200px;
-        margin: 0 auto;
-        border-radius: $sp4;
-        @include z-index("date-label");
-        @include font(book, normal, fs-70);
-        text-align: center;
-        margin-bottom: $sp4;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/profile/Badges.svelte b/frontend/app/src/components_mobile/home/profile/Badges.svelte
deleted file mode 100644
index a8f7158f79..0000000000
--- a/frontend/app/src/components_mobile/home/profile/Badges.svelte
+++ /dev/null
@@ -1,72 +0,0 @@
-<script lang="ts">
-    import { disableChit } from "@src/stores/settings";
-    import { ColourVars, Container } from "component-lib";
-    import type { DiamondMembershipStatus } from "@client";
-    import Diamond from "../../icons/Diamond.svelte";
-    import ChitEarnedBadge from "./ChitEarnedBadge.svelte";
-    import Streak from "./Streak.svelte";
-    import BadgeContainer, { type BadgeSize } from "./BadgeContainer.svelte";
-    import Fingerprint from "svelte-material-icons/Fingerprint.svelte";
-
-    interface Props {
-        diamondStatus?: DiamondMembershipStatus["kind"] | undefined;
-        streak?: number;
-        uniquePerson?: boolean;
-        chitEarned?: number;
-        withFingerprint?: boolean;
-        size?: BadgeSize;
-        borderColor?: string;
-        forceStreakBadge?: boolean;
-    }
-
-    // uniquePerson prop retained on Props for callers, but unused - the verified badge is suspended.
-    let {
-        diamondStatus = undefined,
-        streak = 0,
-        chitEarned = 0,
-        withFingerprint = false,
-        size = "default",
-        borderColor,
-        forceStreakBadge = false,
-    }: Props = $props();
-</script>
-
-{#snippet fingerprint()}
-    <BadgeContainer {borderColor} {size} backgroundColor={ColourVars.background2}>
-        <Fingerprint size={size === "large" ? "1.25rem" : "0.85rem"} />
-    </BadgeContainer>
-{/snippet}
-
-<Container
-    supplementalClass={`badges ${size === "large" ? "large" : ""}`}
-    crossAxisAlignment={"center"}
-    gap={"xs"}
-    width={"hug"}
-    padding={["xxs", "zero"]}>
-    {#if withFingerprint}
-        {@render fingerprint()}
-    {/if}
-    <Diamond {size} {borderColor} status={diamondStatus} />
-    <!-- Verified user (DecideAI) badge is suspended - not rendered. -->
-    {#if !$disableChit || forceStreakBadge}
-        <Streak {size} {borderColor} days={streak} />
-        <ChitEarnedBadge {size} {borderColor} earned={chitEarned} />
-    {/if}
-</Container>
-
-<style lang="scss">
-    :global {
-        .badges {
-            overflow: visible;
-
-            > *:not(:first-child) {
-                z-index: 1;
-                margin-left: -0.5rem;
-            }
-
-            &.large > *:not(:first-child) {
-                margin-left: -0.65rem;
-            }
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/profile/ChitEarnedBadge.svelte b/frontend/app/src/components_mobile/home/profile/ChitEarnedBadge.svelte
deleted file mode 100644
index aaa2f23c7b..0000000000
--- a/frontend/app/src/components_mobile/home/profile/ChitEarnedBadge.svelte
+++ /dev/null
@@ -1,102 +0,0 @@
-<script lang="ts">
-    import { Body, Caption, ColourVars, Tooltip } from "component-lib";
-    import Translatable from "@src/components/Translatable.svelte";
-    import { i18nKey } from "@src/i18n/i18n";
-    import { chitBands, findClosestChitBand } from "@client";
-    import BadgeContainer, { type BadgeSize } from "./BadgeContainer.svelte";
-
-    interface Props {
-        earned: number;
-        showTooltip?: boolean;
-        size?: BadgeSize;
-        borderColor?: string;
-    }
-
-    let { earned, showTooltip = true, size = "default", borderColor }: Props = $props();
-
-    let closest = $derived(findClosestChitBand(earned));
-
-    let chitIconText = $derived(
-        closest === 1_000_000 ? "1 m" : Math.floor(closest / 1_000).toString(),
-    );
-    let show = $derived(closest > 0);
-</script>
-
-{#snippet renderChit()}
-    <BadgeContainer
-        {size}
-        {borderColor}
-        supplementalClass="chit-badge"
-        backgroundColor={ColourVars.tertiaryMuted}
-        backgroundImage={"/assets/oc_logo_no_bg.svg"}>
-        {#if size === "default"}
-            <Caption align="center" fontWeight="bold">{chitIconText}</Caption>
-        {:else}
-            <Body align="center" fontWeight="bold">{chitIconText}</Body>
-        {/if}
-    </BadgeContainer>
-{/snippet}
-
-{#if show}
-    {#if showTooltip}
-        <Tooltip position="top" align="middle">
-            {@render renderChit()}
-            {#snippet popup()}
-                <Translatable
-                    resourceKey={i18nKey("prizes.minChitEarnedValue", {
-                        n: chitBands.get(closest) ?? "0",
-                    })}></Translatable>
-            {/snippet}
-        </Tooltip>
-    {:else}
-        <div class="wrapper">
-            <div>
-                <Translatable
-                    resourceKey={i18nKey("prizes.minChitEarnedValue", {
-                        n: chitBands.get(closest) ?? "0",
-                    })}></Translatable>
-            </div>
-            {@render renderChit()}
-        </div>
-    {/if}
-{/if}
-
-<style lang="scss">
-    :global {
-        .chit-badge {
-            .caption {
-                z-index: 1;
-                scale: 0.8;
-                width: 100%;
-                text-shadow:
-                    -1px -1px 0 var(--tertiary-muted),
-                    1px -1px 0 var(--tertiary-muted),
-                    -1px 1px 0 var(--tertiary-muted),
-                    1px 1px 0 var(--tertiary-muted);
-            }
-        }
-    }
-
-    .icon {
-        $size: 17px;
-        background-repeat: no-repeat;
-        width: $size;
-        height: $size;
-        background-position: 50%;
-        background-image: url("/assets/chit.svg");
-        filter: saturate(0.8);
-        text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
-        display: flex;
-        align-items: center;
-        color: #fff;
-        justify-content: center;
-        @include font(bold, normal, fs-50);
-        font-size: 8px;
-    }
-
-    .wrapper {
-        display: flex;
-        align-items: center;
-        gap: $sp2;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/profile/ChitEventsForDay.svelte b/frontend/app/src/components_mobile/home/profile/ChitEventsForDay.svelte
deleted file mode 100644
index 72dc779338..0000000000
--- a/frontend/app/src/components_mobile/home/profile/ChitEventsForDay.svelte
+++ /dev/null
@@ -1,113 +0,0 @@
-<script lang="ts">
-    import { type ChitEvent } from "@client";
-    import Tooltip from "../../../components/tooltip/Tooltip.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Translatable from "../../Translatable.svelte";
-
-    interface Props {
-        events: ChitEvent[];
-        day: Date;
-        selectedMonth: number;
-        utcMode: boolean;
-    }
-
-    let { events, day, selectedMonth, utcMode }: Props = $props();
-
-    let otherMonth = $derived(day.getMonth() !== selectedMonth);
-</script>
-
-{#snippet eventtime(t: string)}
-    <span class="time">({t})</span>
-{/snippet}
-
-{#if events.length === 0}
-    <div class="day">{day.getDate()}</div>
-{:else}
-    <div class="day has-events" class:otherMonth>
-        <Tooltip autoWidth fill position="top" align={"middle"}>
-            {day.getDate()}
-            {#snippet popupTemplate()}
-                <div class="tt">
-                    {#each events as event}
-                        {@const time = new Date(Number(event.timestamp))}
-                        {@const timeStr = utcMode
-                            ? time.toLocaleTimeString("en-GB", { timeZone: "UTC" })
-                            : time.toLocaleTimeString()}
-                        {#if event.reason.kind === "daily_claim" || event.reason.kind === "daily_claim_reinstated" || event.reason.kind === "streak_insurance_claim"}
-                            <p>
-                                {`🚀 Daily claim: ${event.amount.toLocaleString()}`}
-                                {@render eventtime(timeStr)}
-                            </p>
-                        {:else if event.reason.kind === "achievement_unlocked"}
-                            <p>
-                                🥳 <Translatable
-                                    resourceKey={i18nKey(`learnToEarn.${event.reason.type}`)} />: {event.amount.toLocaleString()}
-                                {@render eventtime(timeStr)}
-                            </p>
-                        {:else if event.reason.kind === "purchased_premium_item"}
-                            <p>
-                                🤑 <Translatable resourceKey={i18nKey("premiumItem.purchased")} />: {event.amount.toLocaleString()}
-                                {@render eventtime(timeStr)}
-                            </p>
-                        {:else if event.reason.kind === "referral"}
-                            <p>
-                                🤝 <Translatable
-                                    resourceKey={i18nKey(
-                                        `chitReferralRewardReason.${event.reason.type}`,
-                                    )} />: {event.amount.toLocaleString()}
-                                {@render eventtime(timeStr)}
-                            </p>
-                        {:else if event.reason.kind === "meme_contest_winner"}
-                            <p>
-                                {`🏆️ Meme contest win: ${event.amount.toLocaleString()}`}
-                                {@render eventtime(timeStr)}
-                            </p>
-                        {:else if event.reason.kind === "external_achievement_unlocked"}
-                            <p>
-                                🔓 <Translatable resourceKey={i18nKey(event.reason.name)} />: {event.amount.toLocaleString()}
-                                {@render eventtime(timeStr)}
-                            </p>
-                        {/if}
-                    {/each}
-                </div>
-            {/snippet}
-        </Tooltip>
-    </div>
-{/if}
-
-<style lang="scss">
-    :global(.day.has-events .tooltip-popup) {
-        word-wrap: unset;
-    }
-
-    .day {
-        width: toRem(36);
-        height: toRem(36);
-        margin: var(--sp-xs);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: var(--rad-circle);
-
-        &.has-events {
-            background: var(--primary);
-            color: var(--text-on-primary);
-            transition: background-color 300ms ease-in-out;
-        }
-
-        &.otherMonth {
-            background: none;
-            color: var(--text-secondary);
-        }
-    }
-
-    .tt {
-        text-align: start;
-        @include font(book, normal, fs-100);
-        padding: $sp3;
-    }
-
-    .time {
-        @include font(book, normal, fs-60);
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/profile/ChooseSignInOption.svelte b/frontend/app/src/components_mobile/home/profile/ChooseSignInOption.svelte
deleted file mode 100644
index 7017ad7377..0000000000
--- a/frontend/app/src/components_mobile/home/profile/ChooseSignInOption.svelte
+++ /dev/null
@@ -1,156 +0,0 @@
-<script lang="ts">
-    import { Body, Container, Form, Input } from "component-lib";
-    import { AuthProvider, selectedAuthProviderStore, type OpenChat } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import SendIcon from "svelte-material-icons/Send.svelte";
-    import { i18nKey, interpolate } from "../../../i18n/i18n";
-    import Translatable from "../../Translatable.svelte";
-    import SignInOption from "./SignInOption.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        mode?: "signin" | "signup";
-        restrictTo?: Set<string>;
-        emailInvalid: boolean;
-        email: string;
-        currentProvider?: AuthProvider | undefined;
-        showMore?: boolean;
-        onLogin: (provider: AuthProvider) => void;
-    }
-
-    let {
-        mode = "signin",
-        restrictTo = new Set(),
-        emailInvalid = $bindable(),
-        email = $bindable(),
-        currentProvider = undefined,
-        showMore = $bindable(false),
-        onLogin,
-    }: Props = $props();
-
-    function buildOptions(
-        selected: AuthProvider | undefined,
-        mode: "signin" | "signup",
-        restrictTo: Set<string>,
-    ): AuthProvider[] {
-        let options = [];
-        const supportsII = "PublicKeyCredential" in window;
-
-        options.push(AuthProvider.EMAIL);
-        options.push(AuthProvider.PASSKEY);
-
-        if (supportsII) {
-            options.push(AuthProvider.II);
-            options.push(AuthProvider.ETH);
-            options.push(AuthProvider.SOL);
-
-            if (mode === "signin") {
-                options.push(AuthProvider.NFID);
-            }
-        } else if (client.isNativeAndroid()) {
-            options.push(AuthProvider.II);
-        }
-
-        if (restrictTo.size > 0) {
-            options = options.filter((o) => {
-                return (
-                    restrictTo.has(o) ||
-                    (o === AuthProvider.II && restrictTo.has("II")) ||
-                    (o === AuthProvider.EMAIL && restrictTo.has("EMAIL")) ||
-                    (o === AuthProvider.PASSKEY && restrictTo.has("PASSKEY")) ||
-                    (o === AuthProvider.ETH && restrictTo.has("ETH")) ||
-                    (o === AuthProvider.SOL && restrictTo.has("SOL")) ||
-                    (o === AuthProvider.NFID && restrictTo.has("NFID"))
-                );
-            });
-        }
-
-        if (selected !== undefined) {
-            let i = options.findIndex((p) => p === selected);
-
-            if (i >= 0) {
-                options.splice(i, 1);
-                options.splice(0, 0, selected);
-            }
-        }
-        return options;
-    }
-
-    function providerName(provider: AuthProvider): string {
-        return provider === AuthProvider.NFID ? "NFID (Legacy)" : provider;
-    }
-
-    function isEmailValid(email: string): boolean {
-        return email.length > 0;
-    }
-
-    let options = $derived(
-        buildOptions(currentProvider ?? $selectedAuthProviderStore, mode, restrictTo),
-    );
-    let showAllOptions = $derived(
-        (currentProvider ?? $selectedAuthProviderStore) === undefined ||
-            showMore ||
-            mode === "signup",
-    );
-    $effect(() => {
-        const invalid = !isEmailValid(email);
-        if (emailInvalid !== invalid) {
-            emailInvalid = invalid;
-        }
-    });
-</script>
-
-<Container gap={"lg"} direction={"vertical"}>
-    {#each options as provider, i}
-        {#if showAllOptions || i === 0}
-            <Container
-                supplementalClass={`option ${
-                    showAllOptions && options.length > 1 && i === 0 ? "separate" : ""
-                }`}>
-                {#if provider === AuthProvider.EMAIL}
-                    <Form onSubmit={() => onLogin(provider)}>
-                        <Container gap={"lg"} crossAxisAlignment={"center"}>
-                            <Container width={"fill"}>
-                                <Input
-                                    bind:value={email}
-                                    minlength={10}
-                                    maxlength={200}
-                                    placeholder={interpolate(
-                                        $_,
-                                        i18nKey(
-                                            mode === "signin"
-                                                ? "loginDialog.signinEmailPlaceholder"
-                                                : "loginDialog.signupEmailPlaceholder",
-                                        ),
-                                    )} />
-                            </Container>
-                            <Container
-                                width={"hug"}
-                                onClick={emailInvalid ? undefined : () => onLogin(provider)}>
-                                <SendIcon size={"1.5em"} />
-                            </Container>
-                        </Container>
-                    </Form>
-                {:else}
-                    <SignInOption
-                        hollow={provider !== AuthProvider.PASSKEY}
-                        name={i18nKey(
-                            mode === "signin" ? "loginDialog.signinWith" : "loginDialog.signupWith",
-                            { provider: providerName(provider) },
-                        )}
-                        onClick={() => onLogin(provider)} />
-                {/if}
-            </Container>
-        {/if}
-    {/each}
-
-    {#if !showAllOptions && options.length > 1}
-        <Container mainAxisAlignment={"center"} onClick={() => (showMore = true)}>
-            <Body width={"hug"} colour={"secondary"}>
-                <Translatable resourceKey={i18nKey("loginDialog.showMore")} />
-            </Body>
-        </Container>
-    {/if}
-</Container>
diff --git a/frontend/app/src/components_mobile/home/profile/ConfirmDeleteAccount.svelte b/frontend/app/src/components_mobile/home/profile/ConfirmDeleteAccount.svelte
deleted file mode 100644
index 0d54a3add5..0000000000
--- a/frontend/app/src/components_mobile/home/profile/ConfirmDeleteAccount.svelte
+++ /dev/null
@@ -1,78 +0,0 @@
-<script lang="ts">
-    import type { DelegationChain, ECDSAKeyIdentity } from "@icp-sdk/core/identity";
-    import { Column, CommonButton, Container, Sheet, Title } from "component-lib";
-    import { AuthProvider, i18nKey, OpenChat } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import Delete from "svelte-material-icons/DeleteForeverOutline.svelte";
-    import { interpolate } from "../../../i18n/i18n";
-    import { toastStore } from "../../../stores/toast";
-    import Translatable from "../../Translatable.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import ReAuthenticate from "./ReAuthenticate.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        deleting: boolean;
-        onClose: () => void;
-        authenticating?: boolean;
-    }
-
-    let { deleting = $bindable(), onClose, authenticating = $bindable(false) }: Props = $props();
-
-    function deleteAccount(detail: {
-        key: ECDSAKeyIdentity;
-        delegation: DelegationChain;
-        provider: AuthProvider;
-    }) {
-        deleting = true;
-        authenticating = false;
-        return client
-            .deleteCurrentUser(detail.key.getKeyPair(), detail.delegation.toJSON())
-            .then((success) => {
-                if (!success) {
-                    toastStore.showFailureToast(i18nKey("danger.deleteAccountFailed"));
-                } else {
-                    onClose();
-                }
-            })
-            .finally(() => (deleting = false));
-    }
-</script>
-
-<Sheet>
-    <Column gap={"xl"} padding={"xl"}>
-        <Title fontWeight={"bold"}>
-            <Translatable resourceKey={i18nKey("danger.deleteAccount")} />
-        </Title>
-        {#if authenticating}
-            <ReAuthenticate onSuccess={deleteAccount} message={i18nKey("danger.reauth")} />
-        {:else}
-            <Markdown
-                inline={false}
-                text={interpolate($_, i18nKey("danger.deleteAccountConfirm"))} />
-        {/if}
-        <Container gap={"md"} mainAxisAlignment={"end"} crossAxisAlignment={"end"}>
-            <CommonButton mode={"default"} onClick={onClose} size={"small_text"}>
-                <Translatable resourceKey={i18nKey("cancel")}></Translatable>
-            </CommonButton>
-            {#if !authenticating}
-                <CommonButton
-                    mode={"active"}
-                    disabled={deleting}
-                    loading={deleting}
-                    onClick={() => (authenticating = true)}
-                    size={"medium"}>
-                    {#snippet icon(color, size)}
-                        <Delete {color} {size}></Delete>
-                    {/snippet}
-                    <Translatable
-                        resourceKey={i18nKey(
-                            deleting ? "danger.deleting" : "danger.deleteAccount",
-                        )} />
-                </CommonButton>
-            {/if}
-        </Container>
-    </Column>
-</Sheet>
diff --git a/frontend/app/src/components_mobile/home/profile/LearnToEarn.svelte b/frontend/app/src/components_mobile/home/profile/LearnToEarn.svelte
deleted file mode 100644
index 3c2f7f33aa..0000000000
--- a/frontend/app/src/components_mobile/home/profile/LearnToEarn.svelte
+++ /dev/null
@@ -1,276 +0,0 @@
-<script lang="ts">
-    import {
-        Body,
-        BodySmall,
-        Chip,
-        ColourVars,
-        Column,
-        Row,
-        Sheet,
-        Title,
-        transition,
-    } from "component-lib";
-    import {
-        OpenChat,
-        achievements,
-        achievementsStore,
-        currentUserIdStore,
-        currentUserStore,
-        type Achievement,
-        type ExternalAchievement,
-    } from "@client";
-    import { getContext, onMount } from "svelte";
-    import { _ } from "svelte-i18n";
-    import CheckCircle from "svelte-material-icons/CheckCircle.svelte";
-    import CheckCircleOutline from "svelte-material-icons/CheckCircleOutline.svelte";
-    import InformationOutline from "svelte-material-icons/InformationOutline.svelte";
-    import RobotHappy from "svelte-material-icons/RobotHappyOutline.svelte";
-    import RobotLove from "svelte-material-icons/RobotLoveOutline.svelte";
-    import Tooltip from "../../../components/tooltip/Tooltip.svelte";
-    import { i18nKey, interpolate } from "../../../i18n/i18n";
-    import { now } from "../../../stores/time";
-    import Progress from "../../Progress.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import NothingToSee from "../NothingToSee.svelte";
-
-    const client = getContext<OpenChat>("client");
-    const enabled = new Set<string>([
-        "streak_3",
-        "streak_7",
-        "streak_14",
-        "streak_30",
-        "streak_100",
-        "streak_365",
-        "set_bio",
-        "set_avatar",
-        "joined_group",
-        "joined_community",
-        "sent_direct_message",
-        "received_direct_message",
-        "upgraded_to_diamond",
-        "set_display_name",
-        "sent_text",
-        "reacted_to_message",
-        "sent_file",
-        "sent_image",
-        "sent_poll",
-        "sent_crypto",
-        "sent_video",
-        "sent_audio",
-        "sent_giphy",
-        "sent_prize",
-        "sent_meme",
-        "sent_swap_offer",
-        "quote_replied",
-        "replied_in_thread",
-        "edited_message",
-        "deleted_message",
-        "tipped_message",
-        "forwarded_message",
-        "received_crypto",
-        "received_reaction",
-        "had_message_tipped",
-        "voted_on_poll",
-        "sent_reminder",
-        "set_community_display_name",
-        "joined_call",
-        "set_pin",
-        "favourited_chat",
-        "pinned_chat",
-        "followed_thread",
-        "swapped_from_wallet",
-        "accepted_swap_offer",
-        "referred_1st_user",
-        "referred_3rd_user",
-        "referred_10th_user",
-        "referred_20th_user",
-        "referred_50th_user",
-        "upgrade_to_gold_diamond",
-    ]);
-
-    interface Props {
-        onClose: () => void;
-    }
-    let { onClose }: Props = $props();
-
-    let selectedTab: "todo" | "done" | "external" = $state("todo");
-
-    function filter(achievement: Achievement): boolean {
-        return enabled.has(achievement) || $achievementsStore.has(achievement);
-    }
-
-    function selectTab(tab: "todo" | "done" | "external") {
-        transition(["fade"], () => {
-            selectedTab = tab;
-        });
-    }
-
-    onMount(() => {
-        client.getExternalAchievements().then((achievements) => {
-            externalAchievements = achievements.sort((a, b) => b.chitReward - a.chitReward);
-        });
-    });
-    let filtered = $derived([...achievements].filter(filter));
-    let [internalAchieved, internalNotAchieved] = $derived(
-        client.partition(filtered, (a) => $achievementsStore.has(a)),
-    );
-    let externalAchievements: ExternalAchievement[] = $state([]);
-    let totalAchievements = $derived(filtered.length + externalAchievements.length);
-    let [externalAchieved, externalNotAchieved] = $derived(
-        client.partition(externalAchievements, (a) => {
-            return $achievementsStore.has(a.name);
-        }),
-    );
-    let achieved = $derived([
-        ...internalAchieved.map((a) => `learnToEarn.${a}`),
-        ...externalAchieved.map((a) => a.name),
-    ]);
-    let percComplete = $derived(Math.round((achieved.length / totalAchievements) * 100));
-    let validExternalNotAchieved = $derived(
-        externalNotAchieved.filter((a) => !a.budgetExhausted && BigInt($now) < a.expires),
-    );
-</script>
-
-<Sheet onDismiss={onClose}>
-    <Column gap={"lg"} padding={"xl"}>
-        <Title fontWeight={"bold"}>
-            <Translatable resourceKey={i18nKey("learnToEarn.title")} />
-        </Title>
-
-        <Row mainAxisAlignment={"spaceAround"} gap={"lg"}>
-            <Chip
-                width={{ share: 1 }}
-                onClick={() => selectTab("todo")}
-                mode={"todo" === selectedTab ? "rounded" : "unselected"}>
-                <Translatable resourceKey={i18nKey("learnToEarn.todo")} />
-            </Chip>
-            {#if externalAchievements.length > 0}
-                <Chip
-                    width={{ share: 2 }}
-                    onClick={() => selectTab("external")}
-                    mode={"external" === selectedTab ? "rounded" : "unselected"}>
-                    <Row
-                        mainAxisAlignment={"center"}
-                        width={"hug"}
-                        crossAxisAlignment={"center"}
-                        gap={"xs"}>
-                        <Translatable resourceKey={i18nKey("learnToEarn.external")} />
-                        <Tooltip position={"bottom"} align={"end"}>
-                            <InformationOutline
-                                size={"1.2em"}
-                                color={selectedTab === "external"
-                                    ? ColourVars.primary
-                                    : ColourVars.textSecondary} />
-                            {#snippet popupTemplate()}
-                                <Translatable resourceKey={i18nKey("learnToEarn.externalInfo")} />
-                            {/snippet}
-                        </Tooltip>
-                    </Row>
-                </Chip>
-            {/if}
-            <Chip
-                width={{ share: 1 }}
-                onClick={() => selectTab("done")}
-                mode={"done" === selectedTab ? "rounded" : "unselected"}>
-                <Translatable resourceKey={i18nKey("learnToEarn.done")} />
-            </Chip>
-        </Row>
-
-        {#if selectedTab === "todo"}
-            {#if internalNotAchieved.length === 0}
-                <NothingToSee
-                    padding={["xl", "zero"]}
-                    height={{ size: "12rem" }}
-                    title={"Good job!"}
-                    subtitle={interpolate($_, i18nKey("learnToEarn.nothingLeftToDo"))}>
-                    {#snippet icon(color, size)}
-                        <RobotHappy {color} {size} />
-                    {/snippet}
-                </NothingToSee>
-            {:else}
-                <Column gap={"sm"} maxHeight={"25rem"}>
-                    {#each internalNotAchieved as achievement}
-                        <Row crossAxisAlignment={"center"} gap={"sm"}>
-                            <CheckCircleOutline size={"1.3rem"} color={ColourVars.textPrimary} />
-                            <Body>
-                                <Translatable resourceKey={i18nKey(`learnToEarn.${achievement}`)} />
-                            </Body>
-                        </Row>
-                    {/each}
-                </Column>
-            {/if}
-        {/if}
-        {#if selectedTab === "done"}
-            {#if achieved.length === 0}
-                <NothingToSee
-                    padding={["xl", "zero"]}
-                    height={{ size: "12rem" }}
-                    title={"Keep trying!"}
-                    subtitle={interpolate($_, i18nKey("learnToEarn.nothingDone"))}>
-                    {#snippet icon(color, size)}
-                        <RobotLove {color} {size} />
-                    {/snippet}
-                </NothingToSee>
-            {:else}
-                <Column gap={"sm"} maxHeight={"25rem"}>
-                    {#each achieved as achievement}
-                        <Row crossAxisAlignment={"center"} gap={"sm"}>
-                            <CheckCircle size={"1.3rem"} color={ColourVars.success} />
-                            <Body>
-                                <Translatable resourceKey={i18nKey(achievement)} />
-                            </Body>
-                        </Row>
-                    {/each}
-                </Column>
-            {/if}
-        {/if}
-        {#if selectedTab === "external"}
-            {#if validExternalNotAchieved.length === 0}
-                <NothingToSee
-                    padding={["xl", "zero"]}
-                    height={{ size: "12rem" }}
-                    title={"Good job!"}
-                    subtitle={interpolate($_, i18nKey("learnToEarn.nothingLeftToDo"))}>
-                    {#snippet icon(color, size)}
-                        <RobotHappy {color} {size} />
-                    {/snippet}
-                </NothingToSee>
-            {:else}
-                <Column gap={"sm"} maxHeight={"25rem"}>
-                    {#each validExternalNotAchieved as achievement}
-                        <Row crossAxisAlignment={"center"} gap={"sm"}>
-                            <img
-                                class="logo"
-                                src={client.achievementLogo(achievement.id)}
-                                alt={achievement.name} />
-                            <a
-                                target={"_blank"}
-                                href={`${achievement.url}?oc_userid=${$currentUserIdStore}&oc_username=${$currentUserStore.username}`}>
-                                {achievement.name}
-                            </a>
-                            <Body>
-                                {achievement.chitReward.toLocaleString()}
-                            </Body>
-                        </Row>
-                    {/each}
-                </Column>
-            {/if}
-        {/if}
-        <Column padding={["md", "zero"]} gap={"sm"}>
-            <Progress size={"0.5rem"} percent={percComplete}></Progress>
-            <BodySmall align={"center"} colour={"textSecondary"}>
-                <Translatable
-                    resourceKey={i18nKey("learnToEarn.percentageComplete", {
-                        perc: percComplete,
-                    })} />
-            </BodySmall>
-        </Column>
-    </Column>
-</Sheet>
-
-<style lang="scss">
-    .logo {
-        width: toRem(20);
-        height: toRem(20);
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/profile/LinkAccounts.svelte b/frontend/app/src/components_mobile/home/profile/LinkAccounts.svelte
deleted file mode 100644
index f0ae6ff527..0000000000
--- a/frontend/app/src/components_mobile/home/profile/LinkAccounts.svelte
+++ /dev/null
@@ -1,497 +0,0 @@
-<script lang="ts">
-    import { AuthClient } from "@icp-sdk/auth/client";
-    import { DelegationChain, ECDSAKeyIdentity } from "@icp-sdk/core/identity";
-    import { Principal } from "@icp-sdk/core/principal";
-    import {
-        Body,
-        Button,
-        ColourVars,
-        Column,
-        CommonButton,
-        Container,
-        Row,
-        StatusCard,
-        Subtitle,
-    } from "component-lib";
-    import {
-        AuthProvider,
-        InMemoryAuthClientStorage,
-        iconSize,
-        selectedAuthProviderStore,
-        type AuthenticationPrincipal,
-        type OpenChat,
-        type ResourceKey,
-        type WebAuthnKey,
-    } from "@client";
-    import { ErrorCode } from "@shared";
-    import { getContext, onMount } from "svelte";
-    import ArrowRightBoldOutline from "svelte-material-icons/ArrowRightBoldOutline.svelte";
-    import LinkVariantPlus from "svelte-material-icons/LinkVariantPlus.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { configKeys } from "../../../utils/config";
-    import {
-        EmailPollerError,
-        EmailPollerSuccess,
-        EmailSigninHandler,
-    } from "../../../utils/signin";
-    import ErrorMessage from "../../ErrorMessage.svelte";
-    import InternetIdentityLogo from "../../icons/InternetIdentityLogo.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import EmailSigninFeedback from "../EmailSigninFeedback.svelte";
-    import ChooseSignInOption from "./ChooseSignInOption.svelte";
-    import SignInOption from "./SignInOption.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        explanations: ResourceKey[];
-        iiPrincipal: string | undefined;
-        linkInternetIdentity?: boolean;
-        onProceed?: () => void;
-        onClose?: () => void;
-    }
-
-    let {
-        explanations,
-        iiPrincipal = $bindable(),
-        linkInternetIdentity = true,
-        onProceed,
-        onClose,
-    }: Props = $props();
-
-    iiPrincipal;
-
-    type IdentityDetail = {
-        key: ECDSAKeyIdentity;
-        delegation: DelegationChain;
-        provider: AuthProvider;
-        webAuthnKey?: WebAuthnKey;
-    };
-
-    type ApproverIdentity = { kind: "approver"; initiator: IdentityDetail };
-    type InitiatorIdentity = { kind: "initiator" };
-    type ReadyToLink = {
-        kind: "ready_to_link";
-        approver: IdentityDetail;
-        initiator: IdentityDetail;
-    };
-    type LinkStage = ApproverIdentity | InitiatorIdentity | ReadyToLink;
-
-    type ProviderStep =
-        | "choose_provider"
-        | "choose_eth_wallet"
-        | "choose_sol_wallet"
-        | "signing_in_with_email";
-
-    let error: string | undefined = $state();
-    let emailSigninHandler = new EmailSigninHandler(client, "account_linking", false);
-    let step: "explain" | "linking" = $state("explain");
-    let substep = $state<LinkStage>({ kind: "initiator" });
-    let emailInvalid = $state(false);
-    let email = $state("");
-    let providerStep: ProviderStep = $state("choose_provider");
-    let linking = $state(false);
-    let loggingInInitiator = false;
-    let verificationCode: string | undefined = $state(undefined);
-    let accounts: (AuthenticationPrincipal & { provider: AuthProvider })[] = $state([]);
-
-    let currentIdentity = $derived(accounts.find((a) => a.isCurrentIdentity));
-    let currentProvider = $derived(currentIdentity?.provider ?? $selectedAuthProviderStore);
-    let restrictTo = $derived(
-        substep.kind === "approver" && currentProvider !== undefined
-            ? new Set<string>([currentProvider])
-            : new Set<string>([AuthProvider.PASSKEY, AuthProvider.II, AuthProvider.EMAIL]),
-    );
-
-    onMount(() => {
-        client.getAuthenticationPrincipals().then((a) => (accounts = a));
-        emailSigninHandler.addEventListener("email_signin_event", emailEvent);
-        return () => {
-            emailSigninHandler.removeEventListener("email_signin_event", emailEvent);
-            emailSigninHandler.destroy();
-        };
-    });
-
-    function emailEvent(ev: Event): void {
-        if (ev instanceof EmailPollerError) {
-            error = "identity.failure.pollingError";
-        }
-
-        if (ev instanceof EmailPollerSuccess) {
-            authComplete(AuthProvider.EMAIL, ev.detail);
-        }
-    }
-
-    function initiateLinking() {
-        step = "linking";
-    }
-
-    // This is called both for the initiator and the approver
-    async function loginProvider(provider: AuthProvider) {
-        if (substep.kind === "ready_to_link") return;
-
-        const generalError = `identity.failure.login_${substep.kind}`;
-
-        if (emailInvalid && provider === AuthProvider.EMAIL) {
-            return;
-        }
-
-        localStorage.setItem(configKeys.selectedAuthEmail, email);
-        error = undefined;
-
-        if (provider === AuthProvider.PASSKEY) {
-            if (substep.kind === "initiator") {
-                const [identity, delegation, webAuthnKey] = await client.signUpWithWebAuthn(false);
-                substep = {
-                    kind: "approver",
-                    initiator: {
-                        key: identity,
-                        delegation,
-                        webAuthnKey,
-                        provider: AuthProvider.PASSKEY,
-                    },
-                };
-            } else {
-                const initiator = substep.initiator;
-                const [identity, delegation, webAuthnKey] =
-                    await client.reSignInWithCurrentWebAuthnIdentity();
-                substep = {
-                    kind: "ready_to_link",
-                    initiator,
-                    approver: {
-                        key: identity,
-                        delegation,
-                        webAuthnKey,
-                        provider: AuthProvider.PASSKEY,
-                    },
-                };
-            }
-        } else if (provider === AuthProvider.EMAIL) {
-            providerStep = "signing_in_with_email";
-            emailSigninHandler.generateMagicLink(email).then((resp) => {
-                if (resp.kind === "success") {
-                    verificationCode = resp.code;
-                } else if (resp.kind === "email_invalid") {
-                    error = "loginDialog.invalidEmail";
-                } else if (resp.kind === "failed_to_send_email") {
-                    console.debug("generateMagicLink failed_to_send_email", resp.error);
-                    error = "loginDialog.failedToSendEmail";
-                } else {
-                    error = generalError;
-                }
-            });
-        } else if (provider === AuthProvider.ETH) {
-            providerStep = "choose_eth_wallet";
-        } else if (provider === AuthProvider.SOL) {
-            providerStep = "choose_sol_wallet";
-        } else {
-            // This is the II / NFID case
-            const identity = await ECDSAKeyIdentity.generate();
-            const storage = new InMemoryAuthClientStorage();
-            const authClient = AuthClient.create({
-                storage,
-                identity: identity,
-            });
-            authClient
-                .then((c) => {
-                    c.login({
-                        ...client.getAuthClientOptions(provider),
-                        onSuccess: async () => {
-                            const delegation = await storage.get("delegation");
-                            if (delegation) {
-                                const principal = c.getIdentity().getPrincipal().toString();
-                                if (
-                                    substep.kind === "approver" &&
-                                    principal !== client.AuthPrincipal
-                                ) {
-                                    error = "identity.failure.principalMismatch";
-                                } else {
-                                    if (substep.kind === "initiator") {
-                                        iiPrincipal = principal;
-                                        substep = {
-                                            kind: "approver",
-                                            initiator: {
-                                                key: identity,
-                                                delegation: DelegationChain.fromJSON(delegation),
-                                                provider: AuthProvider.II,
-                                            },
-                                        };
-                                    } else if (substep.kind === "approver") {
-                                        substep = {
-                                            kind: "ready_to_link",
-                                            initiator: substep.initiator,
-                                            approver: {
-                                                key: identity,
-                                                delegation: DelegationChain.fromJSON(delegation),
-                                                provider,
-                                            },
-                                        };
-                                    }
-                                }
-                            }
-                        },
-                        onError: (err) => {
-                            console.log(`Failed to log into ${substep.kind}: `, err);
-                            error = generalError;
-                        },
-                    });
-                })
-                .catch((err) => {
-                    console.log(`Failed to log into ${substep.kind}: `, err);
-                    error = generalError;
-                });
-        }
-    }
-
-    // This is where we login in with the Internet Identity that we want to link to our existing OC account aka the Initiator
-    async function loginInternetIdentity() {
-        return loginProvider(AuthProvider.II);
-    }
-
-    function authComplete(
-        provider: AuthProvider.ETH | AuthProvider.SOL | AuthProvider.EMAIL,
-        detail: { kind: "success"; key: ECDSAKeyIdentity; delegation: DelegationChain },
-    ) {
-        providerStep = "choose_provider";
-        if (substep.kind === "approver") {
-            substep = {
-                kind: "ready_to_link",
-                initiator: substep.initiator,
-                approver: {
-                    key: detail.key,
-                    delegation: detail.delegation,
-                    provider,
-                },
-            };
-        } else if (substep.kind === "initiator") {
-            substep = {
-                kind: "approver",
-                initiator: {
-                    key: detail.key,
-                    delegation: detail.delegation,
-                    provider,
-                },
-            };
-        }
-    }
-
-    // Link the two identities that we have built together
-    function linkIdentities() {
-        if (substep.kind !== "ready_to_link" || currentIdentity === undefined) return;
-
-        const { initiator, approver } = substep;
-
-        const approverPrincipal = Principal.selfAuthenticating(
-            new Uint8Array(approver.delegation.publicKey),
-        ).toString();
-
-        if (currentIdentity.principal !== approverPrincipal) {
-            console.log("Principal mismatch: ", currentIdentity.principal, approverPrincipal);
-            error = "identity.failure.principalMismatch";
-            substep = { kind: "initiator" };
-            return;
-        }
-
-        error = undefined;
-        linking = true;
-        client
-            .linkIdentities(
-                initiator.key,
-                initiator.delegation,
-                initiator.provider === AuthProvider.II,
-                initiator.webAuthnKey,
-                approver.key,
-                approver.delegation,
-            )
-            .then((resp) => {
-                if (typeof resp === "object") {
-                    if (resp.kind === "success") {
-                        onProceed?.();
-                    } else if (resp.code === ErrorCode.PrincipalAlreadyUsed) {
-                        console.log("Identity already linked to another OpenChat account: ", resp);
-                        error = "identity.failure.alreadyLinked";
-                        substep = { kind: "initiator" };
-                    } else {
-                        console.log("Failed to link identities: ", resp);
-                        error = "identity.failure.link";
-                        substep = { kind: "initiator" };
-                    }
-                } else {
-                    // This branch will be removed once the Identity canister is fully
-                    // migrated over to returning the standardised error codes
-                    if (resp === "success") {
-                        onProceed?.();
-                    } else if (resp === "already_linked_to_principal") {
-                        console.log("Identity already linked by you: ", resp);
-                        error = "identity.failure.alreadyLinked";
-                    } else if (resp === "already_registered") {
-                        console.log("Identity already linked by someone else: ", resp);
-                        error = "identity.failure.alreadyLinked";
-                        substep = { kind: "initiator" };
-                    } else {
-                        console.log("Failed to link identities: ", resp);
-                        error = "identity.failure.link";
-                        substep = { kind: "initiator" };
-                    }
-                }
-            })
-            .finally(() => (linking = false));
-    }
-
-    function reset() {
-        emailSigninHandler.stopPolling();
-        providerStep = "choose_provider";
-        error = undefined;
-        step = "explain";
-        substep = { kind: "initiator" };
-    }
-</script>
-
-<Row crossAxisAlignment={"center"} gap={"md"}>
-    <LinkVariantPlus size={$iconSize} color={ColourVars.textPrimary} />
-
-    <Subtitle fontWeight={"bold"}>
-        <Translatable resourceKey={i18nKey("identity.linkIdentity")} />
-    </Subtitle>
-</Row>
-
-<Column padding={["lg", "zero"]}>
-    {#if error !== undefined}
-        <ErrorMessage>
-            <Translatable resourceKey={i18nKey(error)} />
-        </ErrorMessage>
-    {:else if step === "explain"}
-        <StatusCard background={ColourVars.background2} title={"Link identity"} mode={"warning"}>
-            {#snippet body()}
-                {#each explanations as explanation}
-                    <Translatable resourceKey={explanation} />
-                {/each}
-            {/snippet}
-        </StatusCard>
-    {:else if step === "linking"}
-        {#if substep.kind === "ready_to_link"}
-            <Column gap={"lg"}>
-                <Body colour={"textSecondary"}>
-                    <Translatable resourceKey={i18nKey("identity.linkTwoIdentities")} />
-                </Body>
-                <Row mainAxisAlignment={"spaceBetween"} gap={"sm"} crossAxisAlignment={"center"}>
-                    <SignInOption hollow name={i18nKey(substep.initiator.provider)} />
-                    <ArrowRightBoldOutline size={$iconSize} color={ColourVars.textSecondary} />
-                    <SignInOption hollow name={i18nKey(substep.approver.provider)} />
-                </Row>
-            </Column>
-        {:else if substep.kind === "initiator" && linkInternetIdentity}
-            <Column gap={"lg"}>
-                <Body colour={"textSecondary"}>
-                    <Translatable resourceKey={i18nKey("identity.signInNext")} />
-                </Body>
-                <Button
-                    loading={loggingInInitiator}
-                    disabled={loggingInInitiator}
-                    onClick={loginInternetIdentity}>
-                    {#snippet icon()}
-                        <span class="link-ii-logo">
-                            <InternetIdentityLogo />
-                        </span>
-                    {/snippet}
-                    <Translatable resourceKey={i18nKey("loginDialog.signin")} />
-                </Button>
-            </Column>
-        {:else if providerStep === "choose_provider"}
-            <Column gap={"lg"}>
-                <Body colour={"textSecondary"}>
-                    <Translatable resourceKey={i18nKey(`identity.signIn_${substep.kind}`)} />
-                </Body>
-                <ChooseSignInOption
-                    mode={"signin"}
-                    {restrictTo}
-                    {currentProvider}
-                    showMore={substep.kind === "initiator"}
-                    bind:emailInvalid
-                    bind:email
-                    onLogin={loginProvider} />
-            </Column>
-        {:else if providerStep === "choose_eth_wallet"}
-            <div class="eth-options">
-                {#await import("../SignInWithEth.svelte")}
-                    <div class="loading">...</div>
-                {:then { default: SignInWithEth }}
-                    <SignInWithEth
-                        assumeIdentity={false}
-                        onConnected={(ev) => authComplete(AuthProvider.ETH, ev)} />
-                {/await}
-            </div>
-        {:else if providerStep === "choose_sol_wallet"}
-            <div class="sol-options">
-                {#await import("../SignInWithSol.svelte")}
-                    <div class="loading">...</div>
-                {:then { default: SignInWithSol }}
-                    <SignInWithSol
-                        assumeIdentity={false}
-                        onConnected={(ev) => authComplete(AuthProvider.SOL, ev)} />
-                {/await}
-            </div>
-        {:else if providerStep === "signing_in_with_email"}
-            <EmailSigninFeedback
-                code={verificationCode}
-                polling={$emailSigninHandler}
-                onCopy={(code) => emailSigninHandler.copyCode(code)} />
-            {#if error !== undefined}
-                <ErrorMessage><Translatable resourceKey={i18nKey(error)} /></ErrorMessage>
-            {/if}
-        {/if}
-    {/if}
-</Column>
-
-<Container mainAxisAlignment={"end"} gap={"sm"} crossAxisAlignment={"end"}>
-    <CommonButton onClick={onClose} size={"small_text"}>
-        <Translatable resourceKey={i18nKey("cancel")}></Translatable>
-    </CommonButton>
-    {#if error !== undefined}
-        <CommonButton mode={"active"} onClick={reset} size={"small_text"}>
-            <Translatable resourceKey={i18nKey("identity.tryAgain")}></Translatable>
-        </CommonButton>
-    {:else if step === "explain"}
-        {#if linkInternetIdentity}
-            <CommonButton mode={"active"} onClick={initiateLinking} size={"small_text"}>
-                {#snippet icon()}
-                    <span class="link-ii-logo">
-                        <InternetIdentityLogo />
-                    </span>
-                {/snippet}
-                <Translatable resourceKey={i18nKey("identity.link")}></Translatable>
-            </CommonButton>
-        {:else}
-            <CommonButton mode={"active"} onClick={initiateLinking} size={"small_text"}>
-                <Translatable resourceKey={i18nKey("identity.linkedAccounts.start")}></Translatable>
-            </CommonButton>
-        {/if}
-    {:else if step === "linking"}
-        <CommonButton onClick={reset} size={"small_text"}>
-            <Translatable resourceKey={i18nKey("identity.back")}></Translatable>
-        </CommonButton>
-        {#if substep.kind === "ready_to_link"}
-            <CommonButton
-                mode={"active"}
-                disabled={linking}
-                loading={linking}
-                onClick={linkIdentities}
-                size={"small"}>
-                {#snippet icon(color)}
-                    <LinkVariantPlus {color} />
-                {/snippet}
-                <Translatable resourceKey={i18nKey("identity.link")}></Translatable>
-            </CommonButton>
-        {/if}
-    {/if}
-</Container>
-
-<style lang="scss">
-    .eth-options,
-    .sol-options {
-        text-align: center;
-        display: flex;
-        flex-direction: column;
-        gap: $sp4;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/profile/ReAuthenticate.svelte b/frontend/app/src/components_mobile/home/profile/ReAuthenticate.svelte
deleted file mode 100644
index b1b24dc81d..0000000000
--- a/frontend/app/src/components_mobile/home/profile/ReAuthenticate.svelte
+++ /dev/null
@@ -1,229 +0,0 @@
-<script lang="ts">
-    import { AuthClient } from "@icp-sdk/auth/client";
-    import { DelegationChain, DelegationIdentity, ECDSAKeyIdentity } from "@icp-sdk/core/identity";
-    import { Body } from "component-lib";
-    import {
-        AuthProvider,
-        InMemoryAuthClientStorage,
-        selectedAuthProviderStore,
-        type OpenChat,
-        type ResourceKey,
-    } from "@client";
-    import { getContext, onMount } from "svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { configKeys } from "../../../utils/config";
-    import {
-        EmailPollerError,
-        EmailPollerSuccess,
-        EmailSigninHandler,
-    } from "../../../utils/signin";
-    import ErrorMessage from "../../ErrorMessage.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import EmailSigninFeedback from "../EmailSigninFeedback.svelte";
-    import ChooseSignInOption from "./ChooseSignInOption.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        autoSelect?: boolean;
-        message: ResourceKey;
-        onSuccess: (args: {
-            key: ECDSAKeyIdentity;
-            delegation: DelegationChain;
-            provider: AuthProvider;
-            signInProofJwt: string;
-        }) => void;
-    }
-
-    let { message, onSuccess, autoSelect = false }: Props = $props();
-
-    let error: string | undefined = $state();
-    let emailSigninHandler = new EmailSigninHandler(client, "account_linking", false);
-    let emailInvalid = $state(false);
-    let email = $state("");
-    let authStep:
-        | "choose_provider"
-        | "choose_eth_wallet"
-        | "choose_sol_wallet"
-        | "signing_in_with_email" = $state("choose_provider");
-    let verificationCode: string | undefined = $state(undefined);
-
-    onMount(() => {
-        emailSigninHandler.addEventListener("email_signin_event", emailEvent);
-        if (autoSelect) {
-            login($selectedAuthProviderStore);
-        }
-        return () => {
-            emailSigninHandler.removeEventListener("email_signin_event", emailEvent);
-            emailSigninHandler.destroy();
-        };
-    });
-
-    function emailEvent(ev: Event): void {
-        if (ev instanceof EmailPollerError) {
-            error = "identity.failure.pollingError";
-        }
-
-        if (ev instanceof EmailPollerSuccess) {
-            authComplete(ev.detail.key, ev.detail.delegation, AuthProvider.EMAIL);
-        }
-    }
-
-    // This is where we login in with the provider that we are currently signed in with (which can be any provider type)
-    async function login(provider: AuthProvider) {
-        if (emailInvalid && provider === AuthProvider.EMAIL) {
-            return;
-        }
-
-        localStorage.setItem(configKeys.selectedAuthEmail, email);
-        selectedAuthProviderStore.set(provider);
-        error = undefined;
-
-        if (provider === AuthProvider.PASSKEY) {
-            try {
-                const [key, delegation] = await client.reSignInWithCurrentWebAuthnIdentity();
-                await authComplete(key, delegation, provider);
-            } catch (err) {
-                console.error("An error occurred doing passkey auth: ", err);
-                error = "identity.failure.loginApprover";
-            }
-        } else if (provider === AuthProvider.EMAIL) {
-            authStep = "signing_in_with_email";
-            emailSigninHandler.generateMagicLink(email).then((resp) => {
-                if (resp.kind === "success") {
-                    verificationCode = resp.code;
-                } else if (resp.kind === "email_invalid") {
-                    error = "loginDialog.invalidEmail";
-                } else if (resp.kind === "failed_to_send_email") {
-                    console.debug("generateMagicLink failed_to_send_email", resp.error);
-                    error = "loginDialog.failedToSendEmail";
-                } else {
-                    error = "identity.failure.loginApprover";
-                }
-            });
-        } else if (provider === AuthProvider.ETH) {
-            authStep = "choose_eth_wallet";
-        } else if (provider === AuthProvider.SOL) {
-            authStep = "choose_sol_wallet";
-        } else {
-            // This is the II / NFID case
-            const identity = await ECDSAKeyIdentity.generate();
-            const storage = new InMemoryAuthClientStorage();
-            const authClient = AuthClient.create({
-                storage,
-                identity: identity,
-            });
-            authClient
-                .then((c) => {
-                    c.login({
-                        ...client.getAuthClientOptions(provider),
-                        onSuccess: async () => {
-                            const delegation = await storage.get("delegation");
-                            if (delegation) {
-                                const principal = c.getIdentity().getPrincipal().toString();
-                                if (principal !== client.AuthPrincipal) {
-                                    error = "identity.failure.principalMismatch";
-                                } else {
-                                    await authComplete(
-                                        identity,
-                                        DelegationChain.fromJSON(delegation),
-                                        provider,
-                                    );
-                                }
-                            }
-                        },
-                        onError: (err) => {
-                            console.log("Failed to log into approver: ", err);
-                            error = "identity.failure.loginApprover";
-                        },
-                    });
-                })
-                .catch((err) => {
-                    console.log("Failed to log into approver: ", err);
-                    error = "identity.failure.loginApprover";
-                });
-        }
-    }
-
-    async function authComplete(
-        key: ECDSAKeyIdentity,
-        delegation: DelegationChain,
-        provider: AuthProvider,
-    ) {
-        const identity = DelegationIdentity.fromDelegation(key, delegation);
-        const principal = identity.getPrincipal().toString();
-        if (principal !== client.AuthPrincipal) {
-            authStep = "choose_provider";
-            error = "identity.failure.principalMismatch";
-        } else {
-            const signInProofJwt = await client.getSignInProof(key, delegation);
-            onSuccess({
-                key,
-                delegation,
-                provider,
-                signInProofJwt,
-            });
-        }
-    }
-</script>
-
-<div class="body">
-    {#if authStep === "choose_provider"}
-        <div class="info">
-            <Body colour={"error"}>
-                <Translatable resourceKey={message} />
-            </Body>
-        </div>
-        <ChooseSignInOption mode={"signin"} bind:emailInvalid bind:email onLogin={login} />
-    {:else if authStep === "choose_eth_wallet"}
-        <div class="eth-options">
-            {#await import("../SignInWithEth.svelte")}
-                <div class="loading">...</div>
-            {:then { default: SignInWithEth }}
-                <SignInWithEth
-                    assumeIdentity={false}
-                    onConnected={(ev) => authComplete(ev.key, ev.delegation, AuthProvider.ETH)} />
-            {/await}
-        </div>
-    {:else if authStep === "choose_sol_wallet"}
-        <div class="sol-options">
-            {#await import("../SignInWithSol.svelte")}
-                <div class="loading">...</div>
-            {:then { default: SignInWithSol }}
-                <SignInWithSol
-                    assumeIdentity={false}
-                    onConnected={(ev) => authComplete(ev.key, ev.delegation, AuthProvider.SOL)} />
-            {/await}
-        </div>
-    {:else if authStep === "signing_in_with_email"}
-        <EmailSigninFeedback
-            code={verificationCode}
-            polling={$emailSigninHandler}
-            onCopy={(code) => emailSigninHandler.copyCode(code)} />
-    {/if}
-    {#if error !== undefined}
-        <p class="info">
-            <ErrorMessage>
-                <Translatable resourceKey={i18nKey(error)} />
-            </ErrorMessage>
-        </p>
-    {/if}
-</div>
-
-<style lang="scss">
-    .body {
-        width: 100%;
-    }
-
-    .info {
-        margin-bottom: $sp4;
-    }
-
-    .eth-options,
-    .sol-options {
-        text-align: center;
-        display: flex;
-        flex-direction: column;
-        gap: $sp4;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/profile/ReAuthenticateModal.svelte b/frontend/app/src/components_mobile/home/profile/ReAuthenticateModal.svelte
deleted file mode 100644
index ebd9e3b69f..0000000000
--- a/frontend/app/src/components_mobile/home/profile/ReAuthenticateModal.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script lang="ts">
-    import type { DelegationChain, ECDSAKeyIdentity } from "@icp-sdk/core/identity";
-    import Translatable from "@src/components/Translatable.svelte";
-    import { Column, Sheet, Subtitle } from "component-lib";
-    import type { AuthProvider, ResourceKey } from "@client";
-    import ReAuthenticate from "./ReAuthenticate.svelte";
-    interface Props {
-        message: ResourceKey;
-        title: ResourceKey;
-        onSuccess: (args: {
-            key: ECDSAKeyIdentity;
-            delegation: DelegationChain;
-            provider: AuthProvider;
-        }) => void;
-        onCancel: () => void;
-    }
-
-    let { onSuccess, message, onCancel, title }: Props = $props();
-</script>
-
-<Sheet onDismiss={onCancel}>
-    <Column gap={"xl"} padding={"xl"}>
-        <Subtitle fontWeight={"bold"}>
-            <Translatable resourceKey={title}></Translatable>
-        </Subtitle>
-        <ReAuthenticate autoSelect {onSuccess} {message} />
-    </Column>
-</Sheet>
diff --git a/frontend/app/src/components_mobile/home/profile/RestrictedFeature.svelte b/frontend/app/src/components_mobile/home/profile/RestrictedFeature.svelte
deleted file mode 100644
index e6da19284f..0000000000
--- a/frontend/app/src/components_mobile/home/profile/RestrictedFeature.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script lang="ts">
-    import { Column, Sheet, Title } from "component-lib";
-    import type { Feature } from "@client";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Translatable from "../../Translatable.svelte";
-
-    interface Props {
-        feature: Feature;
-        onClose: () => void;
-    }
-
-    let { feature, onClose }: Props = $props();
-</script>
-
-<Sheet onDismiss={onClose}>
-    <Column mainAxisAlignment={"center"} crossAxisAlignment={"center"} padding={"xxxl"}>
-        <Title width={"hug"} fontWeight={"bold"}>
-            {#if feature === "swap"}
-                <Translatable resourceKey={i18nKey("restricted.swap")} />
-            {:else}
-                <Translatable resourceKey={i18nKey("restricted.generic")} />
-            {/if}
-        </Title>
-    </Column>
-</Sheet>
diff --git a/frontend/app/src/components_mobile/home/profile/SignInOption.svelte b/frontend/app/src/components_mobile/home/profile/SignInOption.svelte
deleted file mode 100644
index 136ea32955..0000000000
--- a/frontend/app/src/components_mobile/home/profile/SignInOption.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script lang="ts">
-    import { Button } from "component-lib";
-    import { type ResourceKey } from "@client";
-    import Translatable from "../../Translatable.svelte";
-
-    interface Props {
-        name: ResourceKey;
-        hollow?: boolean;
-        onClick?: (e: MouseEvent) => void;
-    }
-
-    let { name, hollow = false, onClick }: Props = $props();
-</script>
-
-<Button width={"fill"} secondary={hollow} {onClick}>
-    <Translatable resourceKey={name} />
-</Button>
diff --git a/frontend/app/src/components_mobile/home/profile/VerifyHumanity.svelte b/frontend/app/src/components_mobile/home/profile/VerifyHumanity.svelte
deleted file mode 100644
index adf2df2bbb..0000000000
--- a/frontend/app/src/components_mobile/home/profile/VerifyHumanity.svelte
+++ /dev/null
@@ -1,161 +0,0 @@
-<script lang="ts">
-    import {
-        Body,
-        ColourVars,
-        Column,
-        CommonButton,
-        Container,
-        Row,
-        Sheet,
-        Subtitle,
-    } from "component-lib";
-    import { type OpenChat } from "@client";
-    import { getContext, onMount } from "svelte";
-    import { _ } from "svelte-i18n";
-    import AccountCheck from "svelte-material-icons/AccountCheck.svelte";
-    import AccountStar from "svelte-material-icons/AccountStarOutline.svelte";
-    import { i18nKey, interpolate } from "../../../i18n/i18n";
-    import { uniquePersonCredentialGate } from "../../../utils/access";
-    import ErrorMessage from "../../ErrorMessage.svelte";
-    import FancyLoader from "../../icons/FancyLoader.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import LinkAccounts from "./LinkAccounts.svelte";
-    import LinkAccountsModal from "./LinkAccountsModal.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        onClose: () => void;
-        onSuccess: () => void;
-    }
-
-    let { onClose, onSuccess }: Props = $props();
-
-    let failed = $state(false);
-    let verifying = $state(false);
-    let step: "linking" | "verification" = $state("linking");
-    let iiPrincipal: string | undefined = $state(undefined);
-    let checkingPrincipal = $state(true);
-
-    onMount(() => {
-        client
-            .getLinkedIIPrincipal()
-            .then((p) => {
-                iiPrincipal = p;
-                if (iiPrincipal !== undefined) {
-                    verify();
-                }
-            })
-            .finally(() => (checkingPrincipal = false));
-    });
-
-    function verify() {
-        if (iiPrincipal === undefined) return;
-        const iiPrincipalCopy = iiPrincipal;
-
-        verifying = true;
-        failed = false;
-        client
-            .verifyAccessGate(uniquePersonCredentialGate, iiPrincipalCopy)
-            .then((credential) => {
-                if (credential === undefined) {
-                    failed = true;
-                } else {
-                    return client
-                        .submitProofOfUniquePersonhood(credential, iiPrincipalCopy)
-                        .then((resp) => {
-                            if (resp.kind !== "success") {
-                                failed = true;
-                            } else {
-                                onSuccess();
-                            }
-                        });
-                }
-            })
-            .catch(() => (failed = true))
-            .finally(() => (verifying = false));
-    }
-</script>
-
-{#if checkingPrincipal}
-    <Sheet>
-        <Column crossAxisAlignment={"center"} mainAxisAlignment={"center"} padding={"xl"}>
-            <div class="loader">
-                <FancyLoader />
-            </div>
-        </Column>
-    </Sheet>
-{:else if step === "linking"}
-    <LinkAccountsModal>
-        <LinkAccounts
-            bind:iiPrincipal
-            {onClose}
-            onProceed={() => (step = "verification")}
-            explanations={[i18nKey("identity.humanityWarning")]} />
-    </LinkAccountsModal>
-{:else}
-    <Sheet>
-        <Column gap={"xl"} padding={"xl"}>
-            <Row crossAxisAlignment={"center"} gap={"sm"}>
-                <AccountCheck size={"1.5rem"} color={ColourVars.textPrimary} />
-                <Subtitle fontWeight={"bold"}>
-                    <Translatable resourceKey={i18nKey("access.uniquePerson")} />
-                </Subtitle>
-            </Row>
-            <Column gap={"md"}>
-                {#if failed}
-                    <Body>
-                        <ErrorMessage>
-                            <Translatable resourceKey={i18nKey("human.failed")} />
-                        </ErrorMessage>
-                    </Body>
-
-                    <Body>
-                        <Translatable resourceKey={i18nKey("access.uniquePersonInfo1")} />
-                    </Body>
-
-                    <Body>
-                        <Markdown text={interpolate($_, i18nKey("access.uniquePersonInfo2"))} />
-                    </Body>
-
-                    <Body>
-                        <Translatable resourceKey={i18nKey("access.uniquePersonInfo3")} />
-                    </Body>
-                {:else}
-                    <Body>
-                        <Translatable resourceKey={i18nKey("human.instruction")} />
-                    </Body>
-                {/if}
-            </Column>
-
-            <Container mainAxisAlignment={"end"} gap={"sm"} crossAxisAlignment={"end"}>
-                <CommonButton onClick={onClose} size={"small_text"}>
-                    <Translatable resourceKey={i18nKey("cancel")}></Translatable>
-                </CommonButton>
-                <CommonButton
-                    loading={verifying}
-                    disabled={verifying || iiPrincipal === undefined}
-                    onClick={verify}
-                    size={"medium"}
-                    mode={"active"}>
-                    {#snippet icon(color, size)}
-                        <AccountStar {color} {size}></AccountStar>
-                    {/snippet}
-                    <Translatable resourceKey={i18nKey("access.verify")}></Translatable>
-                </CommonButton>
-            </Container>
-        </Column>
-    </Sheet>
-{/if}
-
-<style lang="scss">
-    :global(.link-ii-logo img) {
-        width: 24px;
-    }
-
-    .loader {
-        width: 100px;
-        margin: 100px auto;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/profile/VideoCallRingtone.svelte b/frontend/app/src/components_mobile/home/profile/VideoCallRingtone.svelte
deleted file mode 100644
index 39b94e9df3..0000000000
--- a/frontend/app/src/components_mobile/home/profile/VideoCallRingtone.svelte
+++ /dev/null
@@ -1,80 +0,0 @@
-<script lang="ts">
-    import { BodySmall, ColourVars, Column, IconButton, Radio, Row } from "component-lib";
-    import { onMount } from "svelte";
-    import PauseCircleOutline from "svelte-material-icons/PauseCircleOutline.svelte";
-    import PlayCircleOutline from "svelte-material-icons/PlayCircleOutline.svelte";
-    import WaveSurfer from "wavesurfer.js";
-    import { Ringtone, selectedRingtone } from "../../../stores/video";
-    import { currentTheme } from "../../../theme/themes";
-
-    interface Props {
-        ringtone: Ringtone;
-        onTogglePlay: (ringtone: Ringtone) => void;
-    }
-
-    let { ringtone, onTogglePlay }: Props = $props();
-
-    let waveform: HTMLDivElement | undefined = $state();
-
-    let checked = $derived($selectedRingtone === ringtone.key);
-
-    onMount(() => {
-        if (!waveform) return;
-
-        const wavesurfer = WaveSurfer.create({
-            height: 30,
-            cursorWidth: 0,
-            barWidth: 2,
-            barRadius: 4,
-            barGap: 2,
-            container: waveform,
-            waveColor: $currentTheme["txt-light"],
-            progressColor: $currentTheme.primary,
-            media: ringtone.audio,
-        });
-
-        wavesurfer.on("click", () => {
-            if (!ringtone.playing) {
-                togglePlay();
-            }
-        });
-    });
-
-    function togglePlay(e?: Event) {
-        e?.preventDefault();
-        onTogglePlay(ringtone);
-    }
-
-    function selectRingtone() {
-        selectedRingtone.set(ringtone.key);
-    }
-</script>
-
-<Column>
-    <Row crossAxisAlignment={"center"} mainAxisAlignment={"spaceBetween"}>
-        <Radio
-            value={$selectedRingtone}
-            onChange={selectRingtone}
-            {checked}
-            id={ringtone.name}
-            group="video-ringtone">
-            <BodySmall>{ringtone.name}</BodySmall>
-        </Radio>
-        <IconButton size={"sm"} onclick={togglePlay}>
-            {#snippet icon()}
-                {#if ringtone.playing}
-                    <PauseCircleOutline color={ColourVars.primary} />
-                {:else}
-                    <PlayCircleOutline color={ColourVars.textPrimary} />
-                {/if}
-            {/snippet}
-        </IconButton>
-    </Row>
-    <div bind:this={waveform} class="waveform"></div>
-</Column>
-
-<style lang="scss">
-    .waveform {
-        width: 100%;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/profile/ViewUserProfileModal.svelte b/frontend/app/src/components_mobile/home/profile/ViewUserProfileModal.svelte
deleted file mode 100644
index 80a1b9213e..0000000000
--- a/frontend/app/src/components_mobile/home/profile/ViewUserProfileModal.svelte
+++ /dev/null
@@ -1,290 +0,0 @@
-<script lang="ts">
-    import {
-        type ChatSummary,
-        type CommunitySummary,
-        type OpenChat,
-        type PublicProfile,
-        type ReadonlySet,
-        type ResourceKey,
-        type UserSummary,
-        blockedUsersStore,
-        currentUserIdStore,
-        platformModeratorStore,
-        publish,
-        selectedChatBlockedUsersStore,
-        selectedChatSummaryStore,
-        selectedCommunityBlockedUsersStore,
-        selectedCommunitySummaryStore,
-    } from "@client";
-
-    import { CommonButton, Container, Sheet } from "component-lib";
-    import { navigate } from "@utils/navigation";
-    import { getContext, onMount } from "svelte";
-    import AccountCancel from "svelte-material-icons/AccountCancelOutline.svelte";
-    import Cancel from "svelte-material-icons/Cancel.svelte";
-    import ChatOutline from "svelte-material-icons/ChatOutline.svelte";
-    import Cog from "svelte-material-icons/Cog.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { toastStore } from "../../../stores/toast";
-    import Translatable from "../../Translatable.svelte";
-    import UserProfileSummaryCard from "../user_profile/UserProfileSummaryCard.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        userId: string;
-        chatButton?: boolean;
-        inGlobalContext?: boolean;
-        onOpenDirectChat: () => void;
-        onClose: () => void;
-    }
-
-    let {
-        userId,
-        chatButton = true,
-        inGlobalContext = false,
-        onOpenDirectChat,
-        onClose,
-    }: Props = $props();
-
-    let profile: PublicProfile | undefined = $state();
-    let user: UserSummary | undefined = $state();
-    onMount(async () => {
-        try {
-            user = await client.getUser(userId);
-            client.getPublicProfile(userId).subscribe({
-                onResult: (result) => {
-                    profile = result;
-                    if (profile === undefined) {
-                        onClose();
-                    }
-                },
-            });
-        } catch (e: any) {
-            client.logError("Failed to load user profile", e);
-            onClose();
-        }
-    });
-
-    function afterBlock(result: boolean, success: ResourceKey, failure: ResourceKey) {
-        if (!result) {
-            toastStore.showFailureToast(failure);
-        } else {
-            toastStore.showSuccessToast(success);
-        }
-    }
-
-    function blockUser() {
-        if ($selectedChatSummaryStore !== undefined) {
-            if ($selectedChatSummaryStore.kind === "direct_chat") {
-                client.blockUserFromDirectChat(userId).then((success) => {
-                    afterBlock(success, i18nKey("blockUserSucceeded"), i18nKey("blockUserFailed"));
-                });
-                onClose();
-                return;
-            }
-            if ($selectedChatSummaryStore.kind === "group_chat") {
-                client.blockUser($selectedChatSummaryStore.id, userId).then((success) => {
-                    afterBlock(success, i18nKey("blockUserSucceeded"), i18nKey("blockUserFailed"));
-                });
-                onClose();
-                return;
-            }
-        }
-        if ($selectedCommunitySummaryStore !== undefined) {
-            client
-                .blockCommunityUser($selectedCommunitySummaryStore.id, userId)
-                .then((success) =>
-                    afterBlock(success, i18nKey("blockUserSucceeded"), i18nKey("blockUserFailed")),
-                );
-            onClose();
-            return;
-        }
-    }
-
-    function unblockUser() {
-        if ($selectedChatSummaryStore !== undefined) {
-            if ($selectedChatSummaryStore.kind === "direct_chat") {
-                client.unblockUserFromDirectChat(userId).then((success) => {
-                    afterBlock(
-                        success,
-                        i18nKey("unblockUserSucceeded"),
-                        i18nKey("unblockUserFailed"),
-                    );
-                });
-                onClose();
-                return;
-            }
-            if ($selectedChatSummaryStore.kind === "group_chat") {
-                client.unblockUser($selectedChatSummaryStore.id, userId).then((success) => {
-                    afterBlock(
-                        success,
-                        i18nKey("unblockUserSucceeded"),
-                        i18nKey("unblockUserFailed"),
-                    );
-                });
-                onClose();
-                return;
-            }
-        }
-        if ($selectedCommunitySummaryStore !== undefined) {
-            client
-                .unblockCommunityUser($selectedCommunitySummaryStore.id, userId)
-                .then((success) =>
-                    afterBlock(
-                        success,
-                        i18nKey("unblockUserSucceeded"),
-                        i18nKey("unblockUserFailed"),
-                    ),
-                );
-            onClose();
-            return;
-        }
-    }
-
-    function canBlockUser(
-        chat: ChatSummary | undefined,
-        community: CommunitySummary | undefined,
-        blockedUsers: ReadonlySet<string>,
-        blockedChatUsers: ReadonlySet<string>,
-        blockedCommunityUsers: ReadonlySet<string>,
-    ) {
-        if (me || inGlobalContext) return false;
-
-        if (chat !== undefined) {
-            if (chat.kind === "direct_chat") return !blockedUsers.has(userId);
-            if (chat.kind === "group_chat")
-                return !blockedChatUsers.has(userId) && client.canBlockUsers(chat.id);
-        }
-        if (community !== undefined) {
-            return !blockedCommunityUsers.has(userId) && client.canBlockUsers(community.id);
-        }
-        return false;
-    }
-
-    function canUnblockUser(
-        chat: ChatSummary | undefined,
-        community: CommunitySummary | undefined,
-        blockedUsers: ReadonlySet<string>,
-        blockedChatUsers: ReadonlySet<string>,
-        blockedCommunityUsers: ReadonlySet<string>,
-    ) {
-        if (me || inGlobalContext) return false;
-        if (chat !== undefined) {
-            if (chat.kind === "direct_chat") return blockedUsers.has(userId);
-            if (chat.kind === "group_chat")
-                return blockedChatUsers.has(userId) && client.canBlockUsers(chat.id);
-        }
-        if (community !== undefined) {
-            return blockedCommunityUsers.has(userId) && client.canBlockUsers(community.id);
-        }
-        return false;
-    }
-
-    function handleOpenDirectChat() {
-        onOpenDirectChat();
-    }
-
-    function showUserProfile() {
-        navigate("/profile_summary");
-        onClose();
-    }
-
-    function unsuspendUser() {
-        client.unsuspendUser(userId).then((success) => {
-            if (success) {
-                toastStore.showSuccessToast(i18nKey("unsuspendedUser"));
-                onClose();
-            } else {
-                toastStore.showFailureToast(i18nKey("failedToUnsuspendUser"));
-            }
-        });
-    }
-
-    function suspendUser() {
-        publish("suspendUser", userId);
-        onClose();
-    }
-    let me = $derived(userId === $currentUserIdStore);
-    let isSuspended = $derived(user?.suspended ?? false);
-    let canBlock = $derived(
-        canBlockUser(
-            $selectedChatSummaryStore,
-            $selectedCommunitySummaryStore,
-            $blockedUsersStore,
-            $selectedChatBlockedUsersStore,
-            $selectedCommunityBlockedUsersStore,
-        ),
-    );
-    let canUnblock = $derived(
-        canUnblockUser(
-            $selectedChatSummaryStore,
-            $selectedCommunitySummaryStore,
-            $blockedUsersStore,
-            $selectedChatBlockedUsersStore,
-            $selectedCommunityBlockedUsersStore,
-        ),
-    );
-</script>
-
-{#if profile !== undefined}
-    <Sheet onDismiss={onClose}>
-        {#if profile !== undefined && user !== undefined}
-            <!-- <UserProfileCard {user} {profile} {inGlobalContext} {onClose}></UserProfileCard> -->
-            <Container direction={"vertical"} padding={["md", "md", "lg", "md"]}>
-                <UserProfileSummaryCard mode={"view"} {user} {profile}></UserProfileSummaryCard>
-                <Container mainAxisAlignment={"center"} gap={"xs"}>
-                    {#if chatButton && !me}
-                        <CommonButton onClick={handleOpenDirectChat} mode={"active"}>
-                            {#snippet icon(color, size)}
-                                <ChatOutline {color} {size} />
-                            {/snippet}
-                            <Translatable resourceKey={i18nKey("profile.chat")} />
-                        </CommonButton>
-                    {/if}
-                    {#if me}
-                        <CommonButton onClick={showUserProfile} mode={"active"}>
-                            {#snippet icon(color, size)}
-                                <Cog {color} {size} />
-                            {/snippet}
-                            <Translatable resourceKey={i18nKey("profile.label")} />
-                        </CommonButton>
-                    {/if}
-                    {#if canBlock}
-                        <CommonButton onClick={blockUser} mode={"active"}>
-                            {#snippet icon(color, size)}
-                                <Cancel {color} {size} />
-                            {/snippet}
-                            <Translatable resourceKey={i18nKey("profile.block")} />
-                        </CommonButton>
-                    {/if}
-                    {#if canUnblock}
-                        <CommonButton onClick={unblockUser} mode={"active"}>
-                            {#snippet icon(color, size)}
-                                <Cancel {color} {size} />
-                            {/snippet}
-                            <Translatable resourceKey={i18nKey("profile.unblock")} />
-                        </CommonButton>
-                    {/if}
-                    {#if $platformModeratorStore}
-                        {#if isSuspended}
-                            <CommonButton onClick={unsuspendUser} mode={"active"}>
-                                {#snippet icon(color, size)}
-                                    <AccountCancel {color} {size} />
-                                {/snippet}
-                                <Translatable resourceKey={i18nKey("unsuspendUser")} />
-                            </CommonButton>
-                        {:else}
-                            <CommonButton onClick={suspendUser} mode={"active"}>
-                                {#snippet icon(color, size)}
-                                    <AccountCancel {color} {size} />
-                                {/snippet}
-                                <Translatable resourceKey={i18nKey("suspendUser")} />
-                            </CommonButton>
-                        {/if}
-                    {/if}
-                </Container>
-            </Container>
-        {/if}
-    </Sheet>
-{/if}
diff --git a/frontend/app/src/components_mobile/home/proposal/CommunityFinder.svelte b/frontend/app/src/components_mobile/home/proposal/CommunityFinder.svelte
deleted file mode 100644
index 5a3527086b..0000000000
--- a/frontend/app/src/components_mobile/home/proposal/CommunityFinder.svelte
+++ /dev/null
@@ -1,120 +0,0 @@
-<script lang="ts">
-    import { Avatar, Column, Option, Row, Search, Select, Subtitle } from "component-lib";
-    import { OpenChat, type CommunityMatch } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { i18nKey, interpolate } from "../../../i18n/i18n";
-    import { communitySearchState } from "../../../stores/search.svelte";
-    import Translatable from "../../Translatable.svelte";
-
-    const client = getContext<OpenChat>("client");
-    const PAGE_SIZE = 15;
-
-    interface Props {
-        onSelect: (community: CommunityMatch | undefined) => void;
-        selected?: CommunityMatch;
-    }
-
-    let { onSelect, selected }: Props = $props();
-
-    function search(term?: string) {
-        if (term === undefined || term === "") {
-            reset(true);
-            return;
-        }
-        communitySearchState.term = term;
-        communitySearchState.reset();
-
-        client
-            .exploreCommunities(
-                communitySearchState.term === "" ? undefined : communitySearchState.term,
-                communitySearchState.index,
-                PAGE_SIZE,
-                0,
-                [],
-            )
-            .then((results) => {
-                console.log("results", results);
-                if (results.kind === "success") {
-                    communitySearchState.results = results.matches;
-                    communitySearchState.total = results.total;
-                }
-            });
-    }
-
-    function reset(clearSelected: boolean) {
-        communitySearchState.results = [];
-        communitySearchState.term = "";
-        if (clearSelected) {
-            select(undefined);
-        }
-    }
-
-    function select(match: CommunityMatch | undefined) {
-        selected = match;
-        communitySearchState.results = [];
-        onSelect(match);
-    }
-</script>
-
-<Select
-    onSelect={select}
-    onOpen={() => search(communitySearchState.term)}
-    placeholder={interpolate($_, i18nKey("verified.choose", undefined, "community", true))}
-    value={selected}>
-    {#snippet subtext()}
-        <Translatable resourceKey={i18nKey("verified.choose", undefined, "community", true)}
-        ></Translatable>
-    {/snippet}
-    {#snippet selectedValue(val)}
-        {val.name}
-    {/snippet}
-    {#snippet selectOptions(onSelect)}
-        <Column
-            onClick={(e) => e?.stopPropagation()}
-            height={{ size: "100%" }}
-            supplementalClass={"community_options"}
-            padding={"lg"}
-            gap={"lg"}>
-            <Subtitle fontWeight={"bold"}>
-                <Translatable resourceKey={i18nKey("verified.choose", undefined, "community", true)}
-                ></Translatable>
-            </Subtitle>
-
-            <Search
-                onSearch={search}
-                onClear={() => (communitySearchState.term = "")}
-                searching={false}
-                placeholder={interpolate($_, i18nKey("communities.search"))}
-                value={communitySearchState.term} />
-
-            <Column supplementalClass={"binding_options"}>
-                {#each communitySearchState.results as community (community.id.communityId)}
-                    <Option
-                        padding={["xs", "lg", "xs", "xs"]}
-                        value={community}
-                        onClick={onSelect}
-                        selected={selected?.id.communityId === community.id.communityId}>
-                        <Row padding={["zero", "zero"]} gap={"md"} crossAxisAlignment={"center"}>
-                            <Avatar
-                                url={client.communityAvatarUrl(
-                                    community.id.communityId,
-                                    community.avatar,
-                                )}
-                                size={"lg"} />
-                            <Subtitle fontWeight={"bold"}>
-                                {community.name}
-                            </Subtitle>
-                        </Row>
-                    </Option>
-                {/each}
-            </Column>
-        </Column>
-    {/snippet}
-</Select>
-
-<style lang="scss">
-    :global(.container.community_options) {
-        flex: auto !important;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/proposal/GroupFinder.svelte b/frontend/app/src/components_mobile/home/proposal/GroupFinder.svelte
deleted file mode 100644
index 1d7222c058..0000000000
--- a/frontend/app/src/components_mobile/home/proposal/GroupFinder.svelte
+++ /dev/null
@@ -1,111 +0,0 @@
-<script lang="ts">
-    import { Avatar, Column, Option, Row, Search, Select, Subtitle } from "component-lib";
-    import { chatIdentifiersEqual, OpenChat, type GroupMatch } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { i18nKey, interpolate } from "../../../i18n/i18n";
-    import { groupSearchState } from "../../../stores/search.svelte";
-    import Translatable from "../../Translatable.svelte";
-
-    const client = getContext<OpenChat>("client");
-    const PAGE_SIZE = 15;
-
-    interface Props {
-        onSelect: (group: GroupMatch | undefined) => void;
-        selected?: GroupMatch;
-    }
-
-    let { onSelect, selected }: Props = $props();
-
-    function search(term?: string) {
-        if (term === undefined || term === "") {
-            reset(true);
-            return;
-        }
-        groupSearchState.term = term;
-        groupSearchState.reset();
-
-        client.searchGroups(groupSearchState.term, PAGE_SIZE).then((results) => {
-            if (results.kind === "success") {
-                groupSearchState.results = results.matches;
-                groupSearchState.total = results.total;
-            }
-        });
-    }
-
-    function reset(clearSelected: boolean) {
-        groupSearchState.results = [];
-        groupSearchState.term = "";
-        if (clearSelected) {
-            select(undefined);
-        }
-    }
-
-    function select(match: GroupMatch | undefined) {
-        selected = match;
-        groupSearchState.results = [];
-        onSelect(match);
-    }
-</script>
-
-<Select
-    onSelect={select}
-    onOpen={() => search(groupSearchState.term)}
-    placeholder={interpolate($_, i18nKey("verified.choose", undefined, "group", true))}
-    value={selected}>
-    {#snippet subtext()}
-        <Translatable resourceKey={i18nKey("verified.choose", undefined, "group", true)}
-        ></Translatable>
-    {/snippet}
-    {#snippet selectedValue(val)}
-        {val.name}
-    {/snippet}
-    {#snippet selectOptions(onSelect)}
-        <Column
-            onClick={(e) => e?.stopPropagation()}
-            height={{ size: "100%" }}
-            supplementalClass={"group_options"}
-            padding={"lg"}
-            gap={"lg"}>
-            <Subtitle fontWeight={"bold"}>
-                <Translatable resourceKey={i18nKey("verified.choose", undefined, "group", true)}
-                ></Translatable>
-            </Subtitle>
-
-            <Search
-                onSearch={search}
-                onClear={() => (groupSearchState.term = "")}
-                searching={false}
-                placeholder={interpolate($_, i18nKey("search"))}
-                value={groupSearchState.term} />
-
-            <Column supplementalClass={"binding_options"}>
-                {#each groupSearchState.results as group (group.chatId.groupId)}
-                    <Option
-                        padding={["xs", "lg", "xs", "xs"]}
-                        value={group}
-                        onClick={onSelect}
-                        selected={chatIdentifiersEqual(selected?.chatId, group.chatId)}>
-                        <Row padding={["zero", "zero"]} gap={"md"} crossAxisAlignment={"center"}>
-                            <Avatar
-                                url={client.groupAvatarUrl({
-                                    ...group,
-                                    id: group.chatId,
-                                })}
-                                size={"lg"} />
-                            <Subtitle fontWeight={"bold"}>
-                                {group.name}
-                            </Subtitle>
-                        </Row>
-                    </Option>
-                {/each}
-            </Column>
-        </Column>
-    {/snippet}
-</Select>
-
-<style lang="scss">
-    :global(.container.group_options) {
-        flex: auto !important;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/proposal/MakeProposalModal.svelte b/frontend/app/src/components_mobile/home/proposal/MakeProposalModal.svelte
deleted file mode 100644
index 493aad667b..0000000000
--- a/frontend/app/src/components_mobile/home/proposal/MakeProposalModal.svelte
+++ /dev/null
@@ -1,841 +0,0 @@
-<script lang="ts">
-    import {
-        Body,
-        BodySmall,
-        Caption,
-        ColourVars,
-        Column,
-        CommonButton,
-        Input,
-        Option,
-        Row,
-        Select,
-        Sheet,
-        Subtitle,
-        TextArea,
-    } from "component-lib";
-    import {
-        cryptoBalanceStore,
-        currentUserIdStore,
-        currentUserStore,
-        routeForChatIdentifier,
-        type CandidateProposalAction,
-        type MultiUserChat,
-        type NervousSystemDetails,
-        type OpenChat,
-        type ResourceKey,
-    } from "@client";
-    import { isPrincipalValid, isUrl, random32, type ExternalBot } from "@shared";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import EyeIcon from "svelte-material-icons/EyeOutline.svelte";
-    import PencilIcon from "svelte-material-icons/PencilOutline.svelte";
-    import { i18nKey, interpolate } from "../../../i18n/i18n";
-    import { pinNumberErrorMessageStore } from "../../../stores/pinNumber";
-    import {
-        createAddTokenPayload,
-        createPublishExternalBotPayload,
-        createRegisterExternalAchievementPayload,
-        createUpdateTokenPayload,
-    } from "../../../utils/sns";
-    import BotPublisher from "../../bots/BotPublisher.svelte";
-    import ErrorMessage from "../../ErrorMessage.svelte";
-    import Legend from "../../Legend.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import AccountInfo from "../AccountInfo.svelte";
-    import BalanceWithRefresh from "../BalanceWithRefresh.svelte";
-    import DurationSelector from "../DurationSelector.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import RemoveBot from "./RemoveBot.svelte";
-    import TransferSnsFunds from "./TransferSNSFunds.svelte";
-    import VerificationProposal from "./VerificationProposal.svelte";
-
-    const MIN_TITLE_LENGTH = 3;
-    const MAX_TITLE_LENGTH = 120;
-    const MAX_URL_LENGTH = 2000;
-    const MIN_SUMMARY_LENGTH = 3;
-    const MAX_SUMMARY_LENGTH = 10000;
-    const CANISTER_ID_LENGTH = 27;
-    const MIN_ACHIEVEMENT_NAME_LENGTH = 3;
-    const MAX_ACHIEVEMENT_NAME_LENGTH = 45;
-    const MIN_CHIT_REWARD = 5000;
-    const MIN_AWARDS = 200;
-    const CHAT_FEE_PER_CHIT_AWARD: bigint = 20_000n; // 1/5000th of a CHAT
-    const ONE_MONTH = 1000 * 60 * 60 * 24 * 30;
-    const TOKEN_LISTING_FEE: bigint = 50_000_100_000n; // 500 CHAT + transfer fee
-
-    const PROPOSALS_BOT_CANISTER = import.meta.env.OC_PROPOSALS_BOT_CANISTER!;
-    const REGISTRY_CANISTER = import.meta.env.OC_REGISTRY_CANISTER!;
-    const USER_INDEX_CANISTER = import.meta.env.OC_USER_INDEX_CANISTER!;
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        selectedMultiUserChat: MultiUserChat;
-        nervousSystem: NervousSystemDetails;
-        onClose: () => void;
-    }
-
-    let { selectedMultiUserChat, nervousSystem, onClose }: Props = $props();
-
-    type ProposalType =
-        | "motion"
-        | "publish_bot"
-        | "remove_bot"
-        | "transfer_sns_funds"
-        | "register_external_achievement"
-        | "advance_sns_target_version"
-        | "add_token"
-        | "update_token"
-        | "set_community_verification"
-        | "set_group_verification"
-        | "revoke_community_verification"
-        | "revoke_group_verification";
-
-    let title = $state("");
-    let url = $state("");
-    let summary = $state("");
-    let achievementExpiry: bigint = $state(BigInt(ONE_MONTH));
-    let achievementExpiryValid = $state(true);
-    let chitRewardText = $state("5000");
-    let maxAwardsText = $state("200");
-    let step = $state(-1);
-    let summaryPreview = $state(false);
-    let busy = $state(true);
-    let selectedProposalType: ProposalType | undefined = $state(undefined);
-    let error: string | undefined = $state(undefined);
-    let depositMessage: ResourceKey | undefined = $state(undefined);
-    let depositError = $state(true);
-    let refreshingBalance = $state(false);
-    let balanceWithRefresh: BalanceWithRefresh;
-    let achivementName = $state("");
-    let selectedBot: ExternalBot | undefined = $state(undefined);
-    //@ts-ignore
-    let transferSnsFunds: TransferSnsFunds | undefined = $state();
-    //@ts-ignore
-    let verificationComponent: VerificationProposal | undefined = $state();
-    //@ts-ignore
-    let removeBotComponent: RemoveBot | undefined;
-    let transferSnsFundsValid: boolean = $state(false);
-    let removeBotValid: boolean = $state(false);
-    let verificationValid: boolean = $state(false);
-
-    function summaryDescription(type: typeof selectedProposalType): [ResourceKey, ResourceKey] {
-        switch (type) {
-            case "set_community_verification":
-            case "set_group_verification":
-            case "revoke_community_verification":
-            case "revoke_group_verification":
-                return [i18nKey("verified.evidenceLabel"), i18nKey("verified.evidencePlaceholder")];
-            case "remove_bot":
-                return [
-                    i18nKey("bots.manage.removeReason"),
-                    i18nKey("bots.manage.removeReasonPlaceholder"),
-                ];
-            default:
-                return [i18nKey("proposal.maker.summary"), i18nKey("proposal.maker.enterSummary")];
-        }
-    }
-
-    function defaultMessage(): ResourceKey {
-        const cost = client.formatTokens(requiredFunds, tokenDetails.decimals);
-        return i18nKey("proposal.maker.message", { cost, token: symbol });
-    }
-
-    async function onClickPrimary(): Promise<void> {
-        if (step === 0) {
-            balanceWithRefresh.refresh();
-        } else if (canSubmit) {
-            onSubmit();
-        } else if (step === 1) {
-            step = 2;
-        }
-    }
-
-    async function onSubmit(): Promise<void> {
-        if (!valid) return;
-
-        busy = true;
-
-        const pin = await client.promptForPinIfRequired();
-
-        if (
-            !(await approvePayment(
-                PROPOSALS_BOT_CANISTER,
-                proposalCost + BigInt(2) * transferFee,
-                pin,
-            ))
-        ) {
-            busy = false;
-            return;
-        }
-
-        if (
-            selectedProposalType === "register_external_achievement" ||
-            selectedProposalType === "add_token"
-        ) {
-            const addToken = selectedProposalType === "add_token";
-            let spender = addToken ? REGISTRY_CANISTER : USER_INDEX_CANISTER;
-            let amount = addToken ? TOKEN_LISTING_FEE : achievementChatCost;
-
-            if (!(await approvePayment(spender, amount, pin))) {
-                busy = false;
-                return;
-            }
-        }
-
-        const action = convertAction();
-
-        if (action === undefined) {
-            busy = false;
-            return;
-        }
-
-        client
-            .submitProposal(nervousSystem.governanceCanisterId, {
-                title,
-                url: url === "" ? undefined : url,
-                summary,
-                action,
-            })
-            .then((success) => {
-                busy = false;
-                if (success) {
-                    onClose();
-                } else {
-                    error = "unexpectedError";
-                }
-            });
-    }
-
-    function convertAction(): CandidateProposalAction | undefined {
-        switch (selectedProposalType) {
-            case "motion":
-            case "advance_sns_target_version":
-                return { kind: selectedProposalType };
-            case "transfer_sns_funds": {
-                return transferSnsFunds?.convertAction();
-            }
-            case "remove_bot": {
-                return removeBotComponent?.convertAction();
-            }
-            case "set_community_verification":
-            case "revoke_community_verification":
-            case "set_group_verification":
-            case "revoke_group_verification": {
-                return verificationComponent?.convertAction();
-            }
-            case "add_token": {
-                return {
-                    kind: "execute_generic_nervous_system_function",
-                    functionId: BigInt(7000),
-                    payload: createAddTokenPayload(
-                        addOrUpdateTokenLedgerCanisterId,
-                        $currentUserIdStore,
-                        addOrUpdateTokenInfoUrl,
-                        addOrUpdateTokenTransactionUrlFormat,
-                        undefined,
-                    ),
-                };
-            }
-            case "update_token": {
-                return {
-                    kind: "execute_generic_nervous_system_function",
-                    functionId: BigInt(7001),
-                    payload: createUpdateTokenPayload(
-                        addOrUpdateTokenLedgerCanisterId,
-                        undefined,
-                        undefined,
-                        addOrUpdateTokenInfoUrl,
-                        addOrUpdateTokenTransactionUrlFormat,
-                        undefined,
-                    ),
-                };
-            }
-            case "register_external_achievement": {
-                return {
-                    kind: "execute_generic_nervous_system_function",
-                    functionId: BigInt(1012),
-                    payload: createRegisterExternalAchievementPayload(
-                        random32(),
-                        $currentUserIdStore,
-                        achivementName,
-                        achievementUrl,
-                        logo,
-                        awardingAchievementCanisterId,
-                        chitReward,
-                        BigInt(Date.now()) + achievementExpiry,
-                        maxAwards,
-                    ),
-                };
-            }
-            case "publish_bot": {
-                if (selectedBot === undefined) {
-                    throw new Error("No bot has been selected - this should not happen");
-                }
-                return {
-                    kind: "execute_generic_nervous_system_function",
-                    functionId: BigInt(1015),
-                    payload: createPublishExternalBotPayload(selectedBot),
-                };
-            }
-        }
-    }
-
-    async function approvePayment(
-        spender_canister_id: string,
-        amount: bigint,
-        pin: string | undefined,
-    ): Promise<boolean> {
-        return client
-            .approveTransfer(
-                spender_canister_id,
-                tokenDetails.ledger,
-                amount,
-                BigInt(Date.now() + 1000 * 60 * 60 * 24 * 5), // allow 5 days for proposal
-                pin,
-            )
-            .then((resp) => {
-                if (resp.kind === "success") {
-                    return true;
-                } else if ($pinNumberErrorMessageStore === undefined) {
-                    error = "approvalError";
-                }
-
-                return false;
-            })
-            .catch(() => {
-                return false;
-            });
-    }
-
-    function onStartRefreshingBalance() {
-        refreshingBalance = true;
-    }
-
-    function onRefreshingBalanceSuccess() {
-        if (step === -1) {
-            step = insufficientFunds ? 0 : 1;
-            busy = false;
-            if (!insufficientFunds) {
-                depositError = false;
-            }
-        } else if (step === 0 && !insufficientFunds) {
-            step = 1;
-            depositError = false;
-        }
-
-        refreshingBalance = false;
-    }
-
-    function onRefreshingBalanceFailed() {
-        depositMessage = i18nKey("Failed to refresh balance");
-        depositError = true;
-        refreshingBalance = false;
-    }
-
-    function wrappedSummary(summary: string) {
-        const groupPath = routeForChatIdentifier(
-            selectedMultiUserChat.kind === "group_chat" ? "chats" : "community",
-            selectedMultiUserChat.id,
-        );
-
-        return `${summary}
-
-> Submitted by [@${$currentUserStore.username}](https://oc.app/user/${$currentUserIdStore}) on [OpenChat](https://oc.app${groupPath})`;
-    }
-
-    function isLogoValid(logo: string): boolean {
-        return logo.length === 0 || isUrl(logo);
-    }
-    let errorMessage = $derived(
-        error !== undefined ? i18nKey("proposal.maker." + error) : $pinNumberErrorMessageStore,
-    );
-    let tokenDetails = $derived(nervousSystem.token);
-    let ledger = $derived(tokenDetails.ledger);
-    let cryptoBalance = $derived($cryptoBalanceStore.get(ledger) ?? BigInt(0));
-    let symbol = $derived(tokenDetails.symbol);
-    let transferFee = $derived(tokenDetails.transferFee);
-    let proposalCost = $derived(nervousSystem.proposalRejectionFee);
-    let requiredFunds = $derived(proposalCost + BigInt(3) * transferFee);
-    let chitReward = $derived(Number(chitRewardText));
-    let chitRewardValid = $derived(chitReward >= MIN_CHIT_REWARD);
-    let maxAwards = $derived(Number(maxAwardsText));
-    let achievementChatCost = $derived(
-        BigInt(chitReward * maxAwards) * CHAT_FEE_PER_CHIT_AWARD + tokenDetails.transferFee,
-    );
-    let insufficientFunds = $derived(cryptoBalance < requiredFunds);
-    let insufficientFundsForPayment = $derived(
-        cryptoBalance <
-            requiredFunds +
-                (selectedProposalType === "register_external_achievement"
-                    ? achievementChatCost
-                    : selectedProposalType === "add_token"
-                      ? TOKEN_LISTING_FEE
-                      : BigInt(0)),
-    );
-    let titleValid = $derived(title.length >= MIN_TITLE_LENGTH && title.length <= MAX_TITLE_LENGTH);
-    let urlValid = $derived(url.length <= MAX_URL_LENGTH);
-    let summaryValid = $derived(
-        summary.length >= MIN_SUMMARY_LENGTH && summary.length <= MAX_SUMMARY_LENGTH,
-    );
-    let maxAwardsValid = $derived(maxAwards >= MIN_AWARDS);
-    let achievementNameValid = $derived(
-        achivementName.length >= MIN_ACHIEVEMENT_NAME_LENGTH &&
-            achivementName.length <= MAX_ACHIEVEMENT_NAME_LENGTH,
-    );
-    let addOrUpdateTokenLedgerCanisterId = $state("");
-
-    let addOrUpdateTokenInfoUrl = $state("");
-
-    let addOrUpdateTokenTransactionUrlFormat = $state("");
-
-    let logo = $state("");
-
-    let achievementUrl = $state("");
-
-    let awardingAchievementCanisterId = $state("");
-
-    let valid = $derived(
-        selectedProposalType !== undefined &&
-            !insufficientFunds &&
-            !insufficientFundsForPayment &&
-            titleValid &&
-            urlValid &&
-            summaryValid &&
-            (selectedProposalType === "motion" ||
-                selectedProposalType === "advance_sns_target_version" ||
-                (selectedProposalType === "publish_bot" && selectedBot !== undefined) ||
-                (selectedProposalType === "remove_bot" && removeBotValid) ||
-                (selectedProposalType === "transfer_sns_funds" && transferSnsFundsValid) ||
-                (selectedProposalType === "set_community_verification" && verificationValid) ||
-                (selectedProposalType === "set_group_verification" && verificationValid) ||
-                (selectedProposalType === "register_external_achievement" &&
-                    achievementNameValid &&
-                    chitRewardValid &&
-                    maxAwardsValid &&
-                    achievementExpiryValid &&
-                    isLogoValid(logo) &&
-                    achievementUrl.length > 0 &&
-                    awardingAchievementCanisterId.length > 0 &&
-                    isPrincipalValid(awardingAchievementCanisterId)) ||
-                (selectedProposalType === "add_token" &&
-                    isPrincipalValid(addOrUpdateTokenLedgerCanisterId) &&
-                    addOrUpdateTokenTransactionUrlFormat.length > 0) ||
-                (selectedProposalType === "update_token" &&
-                    isPrincipalValid(addOrUpdateTokenLedgerCanisterId) &&
-                    addOrUpdateTokenTransactionUrlFormat.length > 0)),
-    );
-    let canSubmit = $derived(
-        step === 2 ||
-            (step === 1 &&
-                (selectedProposalType === "motion" ||
-                    selectedProposalType === "advance_sns_target_version")),
-    );
-    $effect(() => {
-        if (tokenDetails !== undefined) {
-            depositMessage = defaultMessage();
-        }
-    });
-    let [summaryLabel, summaryPlaceholder] = $derived(summaryDescription(selectedProposalType));
-
-    let proposalOptions = $derived.by<{ name: string; value: ProposalType }[]>(() => {
-        const options: { name: string; value: ProposalType }[] = [
-            { name: "Motion", value: "motion" },
-            { name: "Transfer SNS funds", value: "transfer_sns_funds" },
-            { name: "Advance SNS target version", value: "advance_sns_target_version" },
-        ];
-
-        if (symbol === "CHAT" || true) {
-            options.push(
-                { name: "Register external achievement", value: "register_external_achievement" },
-                { name: "Add token", value: "add_token" },
-                { name: "Update token", value: "update_token" },
-                { name: "Publish a bot", value: "publish_bot" },
-                { name: interpolate($_, i18nKey("bots.manage.remove")), value: "remove_bot" },
-                {
-                    name: interpolate($_, i18nKey("verified.verify", undefined, "community", true)),
-                    value: "set_community_verification",
-                },
-                {
-                    name: interpolate($_, i18nKey("verified.verify", undefined, "group", true)),
-                    value: "set_group_verification",
-                },
-                {
-                    name: interpolate($_, i18nKey("verified.revoke", undefined, "community", true)),
-                    value: "revoke_community_verification",
-                },
-                {
-                    name: interpolate($_, i18nKey("verified.revoke", undefined, "group", true)),
-                    value: "revoke_group_verification",
-                },
-            );
-        }
-
-        return options;
-    });
-</script>
-
-<Sheet onDismiss={onClose}>
-    <Column gap={"xl"} padding={"xl"}>
-        <Row crossAxisAlignment={"center"} mainAxisAlignment={"spaceBetween"}>
-            <Subtitle fontWeight={"bold"}>
-                <Translatable resourceKey={i18nKey("proposal.maker.header")} />
-            </Subtitle>
-            <BalanceWithRefresh
-                bind:this={balanceWithRefresh}
-                {ledger}
-                value={cryptoBalance}
-                onClick={onStartRefreshingBalance}
-                onRefreshed={onRefreshingBalanceSuccess}
-                onError={onRefreshingBalanceFailed} />
-        </Row>
-        <Column gap={"lg"}>
-            {#if step === 0}
-                <AccountInfo {ledger} />
-                <Body colour={"textSecondary"}>
-                    <Translatable resourceKey={i18nKey("tokenTransfer.makeDeposit")} />
-                </Body>
-            {:else if step === 1}
-                <Select
-                    onSelect={(val) => (selectedProposalType = val)}
-                    placeholder={interpolate($_, i18nKey("proposal.maker.selectType"))}
-                    value={selectedProposalType}>
-                    {#snippet selectedValue(val)}
-                        {val}
-                    {/snippet}
-                    {#snippet selectOptions(onSelect)}
-                        <Column padding={"lg"}>
-                            {#each proposalOptions as { name, value }}
-                                <Option
-                                    {value}
-                                    onClick={onSelect}
-                                    selected={selectedProposalType === value}>
-                                    {name}
-                                </Option>
-                            {/each}
-                        </Column>
-                    {/snippet}
-                    {#snippet subtext()}
-                        <Translatable resourceKey={i18nKey("proposal.maker.selectType")} />
-                    {/snippet}
-                </Select>
-
-                <Input
-                    autofocus
-                    disabled={busy}
-                    error={title.length > 0 && !titleValid}
-                    bind:value={title}
-                    minlength={MIN_TITLE_LENGTH}
-                    maxlength={MAX_TITLE_LENGTH}
-                    countdown
-                    required
-                    placeholder={interpolate($_, i18nKey("proposal.maker.enterTitle"))}>
-                    {#snippet subtext()}
-                        <Translatable resourceKey={i18nKey("proposal.maker.enterTitle")} />
-                    {/snippet}
-                </Input>
-
-                <Input
-                    disabled={busy}
-                    error={!urlValid}
-                    bind:value={url}
-                    maxlength={MAX_URL_LENGTH}
-                    countdown
-                    placeholder={interpolate($_, i18nKey("proposal.maker.enterUrl"))}>
-                    {#snippet subtext()}
-                        <Translatable resourceKey={i18nKey("proposal.maker.urlRules")} />
-                    {/snippet}
-                </Input>
-
-                <Column gap={"xs"}>
-                    <Column>
-                        {#if summaryPreview}
-                            <Row
-                                background={ColourVars.textTertiary}
-                                padding={["md", "xl", "xs", "xl"]}
-                                borderRadius={"xxl"}
-                                height={{ size: "12rem" }}
-                                gap={"sm"}
-                                crossAxisAlignment={"start"}>
-                                <Body>
-                                    <Markdown inline={false} text={wrappedSummary(summary)} />
-                                </Body>
-                            </Row>
-                        {:else}
-                            <TextArea
-                                rows={8}
-                                disabled={busy}
-                                error={summary.length > 0 && !summaryValid}
-                                bind:value={summary}
-                                minlength={MIN_SUMMARY_LENGTH}
-                                maxlength={MAX_SUMMARY_LENGTH}
-                                placeholder={interpolate($_, summaryPlaceholder)}></TextArea>
-                        {/if}
-                    </Column>
-                    <Row mainAxisAlignment={"spaceBetween"} crossAxisAlignment={"center"}>
-                        <Legend
-                            required
-                            label={summaryLabel}
-                            rules={i18nKey("proposal.maker.summaryRules")} />
-                        <Row
-                            onClick={() => (summaryPreview = !summaryPreview)}
-                            width={"hug"}
-                            padding={["zero", "xl", "zero", "zero"]}
-                            gap={"xs"}
-                            crossAxisAlignment={"center"}>
-                            <Caption colour={"textSecondary"}>
-                                <Translatable
-                                    resourceKey={i18nKey(summaryPreview ? "edit" : "preview")} />
-                            </Caption>
-                            {#if summaryPreview}
-                                <PencilIcon color={ColourVars.textSecondary} />
-                            {:else}
-                                <EyeIcon color={ColourVars.textSecondary} />
-                            {/if}
-                        </Row>
-                    </Row>
-                </Column>
-            {:else if step === 2}
-                {#if selectedProposalType === "set_community_verification" || selectedProposalType === "revoke_community_verification" || selectedProposalType === "set_group_verification" || selectedProposalType === "revoke_group_verification"}
-                    <VerificationProposal
-                        bind:this={verificationComponent}
-                        bind:valid={verificationValid}
-                        type={selectedProposalType} />
-                {:else if selectedProposalType === "publish_bot"}
-                    <BotPublisher bind:selected={selectedBot}></BotPublisher>
-                {:else if selectedProposalType === "remove_bot"}
-                    <RemoveBot bind:valid={removeBotValid}></RemoveBot>
-                {:else if selectedProposalType === "transfer_sns_funds"}
-                    <TransferSnsFunds
-                        bind:valid={transferSnsFundsValid}
-                        bind:this={transferSnsFunds}
-                        {nervousSystem} />
-                {:else if selectedProposalType === "register_external_achievement"}
-                    <Input
-                        autofocus
-                        disabled={busy}
-                        error={achivementName.length > 0 && !achievementNameValid}
-                        bind:value={achivementName}
-                        required
-                        minlength={MIN_ACHIEVEMENT_NAME_LENGTH}
-                        maxlength={MAX_ACHIEVEMENT_NAME_LENGTH}
-                        countdown
-                        placeholder={interpolate(
-                            $_,
-                            i18nKey("proposal.maker.enterAchievementName"),
-                        )}>
-                        {#snippet subtext()}
-                            <Translatable
-                                resourceKey={i18nKey("proposal.maker.enterAchievementName")} />
-                        {/snippet}
-                    </Input>
-                    <Input
-                        disabled={busy}
-                        minlength={1}
-                        maxlength={100}
-                        bind:value={achievementUrl}
-                        countdown
-                        required
-                        placeholder={interpolate($_, i18nKey("https://myapp.xyz/register"))}>
-                        {#snippet subtext()}
-                            <Translatable resourceKey={i18nKey("proposal.maker.achievementUrl")} />
-                        {/snippet}
-                    </Input>
-                    <Input
-                        disabled={busy}
-                        error={!isLogoValid(logo)}
-                        minlength={0}
-                        maxlength={50000}
-                        bind:value={logo}
-                        countdown
-                        placeholder={interpolate(
-                            $_,
-                            i18nKey("data:image/svg+xml;base64,PHN2ZyB3aW..."),
-                        )}>
-                        {#snippet subtext()}
-                            <Translatable resourceKey={i18nKey("proposal.maker.achievementLogo")} />
-                        {/snippet}
-                    </Input>
-                    <Input
-                        autofocus
-                        disabled={busy}
-                        error={awardingAchievementCanisterId.length > 0 &&
-                            !isPrincipalValid(awardingAchievementCanisterId)}
-                        bind:value={awardingAchievementCanisterId}
-                        minlength={CANISTER_ID_LENGTH}
-                        maxlength={CANISTER_ID_LENGTH}
-                        required
-                        countdown
-                        placeholder={interpolate(
-                            $_,
-                            i18nKey("proposal.maker.awardingAchievementCanisterId"),
-                        )}>
-                        {#snippet subtext()}
-                            <Translatable
-                                resourceKey={i18nKey(
-                                    "proposal.maker.awardingAchievementCanisterIdRules",
-                                )} />
-                        {/snippet}
-                    </Input>
-                    <Input
-                        disabled={busy}
-                        error={chitRewardText.length > 0 && !chitRewardValid}
-                        minlength={4}
-                        maxlength={5}
-                        required
-                        bind:value={chitRewardText}
-                        placeholder={interpolate($_, i18nKey("proposal.maker.enterChitReward"))}>
-                        {#snippet subtext()}
-                            <Row gap={"xs"}>
-                                <Translatable resourceKey={i18nKey("proposal.maker.chitReward")} />
-                                (<Translatable
-                                    resourceKey={i18nKey("proposal.maker.chitRewardRules", {
-                                        value: MIN_CHIT_REWARD,
-                                    })} />)
-                            </Row>
-                        {/snippet}
-                    </Input>
-                    <Input
-                        disabled={busy}
-                        error={maxAwardsText.length > 0 && !maxAwardsValid}
-                        minlength={3}
-                        maxlength={8}
-                        required
-                        bind:value={maxAwardsText}
-                        placeholder={interpolate($_, i18nKey("proposal.maker.enterMaxAwards"))}>
-                        {#snippet subtext()}
-                            <Row gap={"xs"}>
-                                <Translatable resourceKey={i18nKey("proposal.maker.maxAwards")} />
-                                (<Translatable
-                                    resourceKey={i18nKey("proposal.maker.maxAwardsRules", {
-                                        value: MIN_AWARDS,
-                                    })} />)
-                            </Row>
-                        {/snippet}
-                    </Input>
-                    <Column padding={["zero", "md"]}>
-                        <DurationSelector bind:duration={achievementExpiry}>
-                            {#snippet title()}
-                                <Column>
-                                    <Body>
-                                        <Translatable
-                                            resourceKey={i18nKey(
-                                                "proposal.maker.achievementExpiry",
-                                            )} />
-                                    </Body>
-                                    <BodySmall colour={"textSecondary"}>
-                                        <Translatable
-                                            resourceKey={i18nKey(
-                                                "Specify how long you would like your promotion to run for",
-                                            )} />
-                                    </BodySmall>
-                                </Column>
-                            {/snippet}
-                        </DurationSelector>
-                    </Column>
-                {:else if selectedProposalType === "add_token" || selectedProposalType === "update_token"}
-                    <Input
-                        autofocus
-                        disabled={busy}
-                        error={addOrUpdateTokenLedgerCanisterId.length > 0 &&
-                            !isPrincipalValid(addOrUpdateTokenLedgerCanisterId)}
-                        bind:value={addOrUpdateTokenLedgerCanisterId}
-                        minlength={CANISTER_ID_LENGTH}
-                        maxlength={CANISTER_ID_LENGTH}
-                        countdown
-                        required
-                        placeholder={interpolate($_, i18nKey("2ouva-viaaa-aaaaq-aaamq-cai"))}>
-                        {#snippet subtext()}
-                            <Translatable
-                                resourceKey={i18nKey("proposal.maker.ledgerCanisterId")} />
-                        {/snippet}
-                    </Input>
-                    <Input
-                        disabled={busy}
-                        minlength={1}
-                        maxlength={100}
-                        bind:value={addOrUpdateTokenInfoUrl}
-                        countdown
-                        required={selectedProposalType === "add_token"}
-                        placeholder={interpolate($_, i18nKey("https://token.com/info"))}>
-                        {#snippet subtext()}
-                            <Translatable resourceKey={i18nKey("proposal.maker.tokenInfoUrl")} />
-                        {/snippet}
-                    </Input>
-                    <Input
-                        disabled={busy}
-                        minlength={1}
-                        maxlength={200}
-                        bind:value={addOrUpdateTokenTransactionUrlFormat}
-                        countdown
-                        required={selectedProposalType === "add_token"}
-                        placeholder={interpolate(
-                            $_,
-                            i18nKey(`https://token.com/transactions/{transaction_index}`),
-                        )}>
-                        {#snippet subtext()}
-                            <Translatable
-                                resourceKey={i18nKey("proposal.maker.transactionUrlFormat")} />
-                        {/snippet}
-                    </Input>
-                {/if}
-            {/if}
-        </Column>
-
-        <!-- Footer -->
-        <Column gap={"lg"} padding={["zero", "md"]}>
-            {#if (selectedProposalType === "register_external_achievement" || selectedProposalType === "add_token") && step === 2}
-                <Body colour={insufficientFundsForPayment ? "error" : "textSecondary"}>
-                    <Translatable
-                        resourceKey={i18nKey(
-                            "proposal.maker." +
-                                (selectedProposalType === "add_token"
-                                    ? "addTokenChatCost"
-                                    : "achievementChatCost"),
-                            {
-                                cost: client.formatTokens(
-                                    selectedProposalType === "add_token"
-                                        ? TOKEN_LISTING_FEE
-                                        : achievementChatCost,
-                                    8,
-                                ),
-                                chat: "CHAT",
-                            },
-                        )} />
-                </Body>
-            {/if}
-            {#if depositMessage !== undefined}
-                <Body colour={depositError ? "error" : "textSecondary"}>
-                    <Translatable resourceKey={depositMessage} />
-                </Body>
-            {/if}
-            {#if errorMessage !== undefined}
-                <ErrorMessage><Translatable resourceKey={errorMessage} /></ErrorMessage>
-            {/if}
-
-            <Row crossAxisAlignment={"center"} gap={"md"} mainAxisAlignment={"end"}>
-                {#if step > 1 || (step == 1 && insufficientFunds)}
-                    <CommonButton
-                        size={"small_text"}
-                        disabled={busy}
-                        onClick={() => (step = step - 1)}
-                        ><Translatable resourceKey={i18nKey("group.back")} /></CommonButton>
-                {/if}
-                <CommonButton size={"small_text"} disabled={busy} onClick={onClose}
-                    >{$_("cancel")}</CommonButton>
-
-                <CommonButton
-                    mode={"active"}
-                    size={"medium"}
-                    disabled={busy || (canSubmit && !valid) || selectedProposalType === undefined}
-                    loading={busy || refreshingBalance}
-                    onClick={onClickPrimary}
-                    ><Translatable
-                        resourceKey={i18nKey(
-                            step === 0 ? "refresh" : canSubmit ? "submit" : "group.next",
-                        )} /></CommonButton>
-            </Row>
-        </Column>
-    </Column>
-</Sheet>
diff --git a/frontend/app/src/components_mobile/home/proposal/RemoveBot.svelte b/frontend/app/src/components_mobile/home/proposal/RemoveBot.svelte
deleted file mode 100644
index 602960d80f..0000000000
--- a/frontend/app/src/components_mobile/home/proposal/RemoveBot.svelte
+++ /dev/null
@@ -1,68 +0,0 @@
-<script lang="ts">
-    import { IDL } from "@icp-sdk/core/candid";
-    import { Principal } from "@icp-sdk/core/principal";
-    import { Column } from "component-lib";
-    import {
-        type ExecuteGenericNervousSystemFunction,
-        type ExternalBotLike,
-    } from "@client";
-    import { i18nKey } from "../../../i18n/i18n";
-    import BotExplorer from "../../bots/BotExplorer.svelte";
-    import Legend from "../../Legend.svelte";
-    import SelectedMatch from "./SelectedMatch.svelte";
-
-    interface Props {
-        valid: boolean;
-    }
-
-    let { valid = $bindable() }: Props = $props();
-
-    let selected = $state<ExternalBotLike | undefined>(undefined);
-    let isValid = $derived(selected !== undefined);
-
-    function selectMatch(match: ExternalBotLike | undefined) {
-        selected = match;
-    }
-
-    $effect(() => {
-        if (valid !== isValid) {
-            valid = isValid;
-        }
-    });
-
-    function removeBotPayload(bot: ExternalBotLike): Uint8Array {
-        return new Uint8Array(
-            IDL.encode(
-                [
-                    IDL.Record({
-                        bot_id: IDL.Principal,
-                    }),
-                ],
-                [
-                    {
-                        bot_id: Principal.fromText(bot.id),
-                    },
-                ],
-            ),
-        );
-    }
-
-    export function convertAction(): ExecuteGenericNervousSystemFunction | undefined {
-        if (selected === undefined || !isValid) return undefined;
-
-        return {
-            kind: "execute_generic_nervous_system_function",
-            functionId: BigInt(1014),
-            payload: removeBotPayload(selected),
-        };
-    }
-</script>
-
-<Column>
-    <Legend label={i18nKey("bots.manage.removeSearch")} />
-    {#if selected !== undefined}
-        <SelectedMatch onRemove={() => (selected = undefined)} match={selected}></SelectedMatch>
-    {:else}
-        <BotExplorer maxHeight={"450px"} fill onSelect={selectMatch}></BotExplorer>
-    {/if}
-</Column>
diff --git a/frontend/app/src/components_mobile/home/proposal/TransferSNSFunds.svelte b/frontend/app/src/components_mobile/home/proposal/TransferSNSFunds.svelte
deleted file mode 100644
index 177854316a..0000000000
--- a/frontend/app/src/components_mobile/home/proposal/TransferSNSFunds.svelte
+++ /dev/null
@@ -1,126 +0,0 @@
-<script lang="ts">
-    import { Column, Input, Radio } from "component-lib";
-    import {
-        isPrincipalValid,
-        isSubAccountValid,
-        type NervousSystemDetails,
-        type TransferSnsFunds,
-        type Treasury,
-    } from "@client";
-    import { _ } from "svelte-i18n";
-    import { i18nKey, interpolate } from "../../../i18n/i18n";
-    import Legend from "../../Legend.svelte";
-    import Translatable from "../../Translatable.svelte";
-
-    interface Props {
-        nervousSystem: NervousSystemDetails;
-        valid: boolean;
-    }
-
-    let { nervousSystem, valid = $bindable() }: Props = $props();
-
-    let treasury: Treasury = $state("SNS");
-    let busy = $state(false);
-    let recipientOwner = $state("");
-    let recipientSubaccount = $state("");
-    let amountText = $state("");
-    let tokenDetails = $derived(nervousSystem.token);
-    let transferFee = $derived(tokenDetails.transferFee);
-    let amount = $derived(Number(amountText) * Number(Math.pow(10, tokenDetails.decimals)));
-    let amountValid = $derived(amount >= transferFee);
-    let symbol = $derived(tokenDetails.symbol);
-    let recipientOwnerValid = $derived(isPrincipalValid(recipientOwner));
-    let recipientSubaccountValid = $derived(
-        recipientSubaccount.length === 0 || isSubAccountValid(recipientSubaccount),
-    );
-    let token = $derived(treasury === "SNS" ? symbol : "ICP");
-    let isValid = $derived(amountValid && recipientOwnerValid && recipientSubaccountValid);
-
-    $effect(() => {
-        if (valid !== isValid) {
-            valid = isValid;
-        }
-    });
-
-    export function convertAction(): TransferSnsFunds {
-        return {
-            kind: "transfer_sns_funds",
-            recipient: {
-                owner: recipientOwner,
-                subaccount:
-                    recipientSubaccount.length > 0
-                        ? recipientSubaccount.padStart(64, "0")
-                        : undefined,
-            },
-            amount: BigInt(Math.floor(amount)),
-            treasury,
-        };
-    }
-</script>
-
-<Column gap={"xl"}>
-    <Column>
-        <Legend
-            padding={["zero", "zero", "xs", "zero"]}
-            label={i18nKey("proposal.maker.treasury")}
-            required />
-        <Column gap={"sm"}>
-            <Radio
-                id="chat_treasury"
-                group="treasury"
-                value={symbol}
-                disabled={busy}
-                checked={treasury === "SNS"}
-                onChange={() => (treasury = "SNS")}>
-                <Translatable resourceKey={i18nKey(symbol)} />
-            </Radio>
-            <Radio
-                id="icp_treasury"
-                group="treasury"
-                value="ICP"
-                disabled={busy}
-                checked={treasury === "ICP"}
-                onChange={() => (treasury = "ICP")}>
-                <Translatable resourceKey={i18nKey("ICP")} />
-            </Radio>
-        </Column>
-    </Column>
-    <Column>
-        <Legend label={i18nKey("proposal.maker.recipientOwner")} required />
-        <Input
-            disabled={busy}
-            error={recipientOwner.length > 0 && !recipientOwnerValid}
-            maxlength={63}
-            bind:value={recipientOwner}
-            placeholder={interpolate($_, i18nKey("proposal.maker.enterRecipientOwner"))} />
-    </Column>
-    <Column>
-        <Legend
-            label={i18nKey("proposal.maker.recipientSubaccount")}
-            rules={i18nKey("proposal.maker.recipientSubaccountRules")} />
-        <Input
-            disabled={busy}
-            error={!recipientSubaccountValid}
-            maxlength={64}
-            bind:value={recipientSubaccount}
-            placeholder={interpolate($_, i18nKey("proposal.maker.enterRecipientSubaccount"))} />
-    </Column>
-    <Column>
-        <Legend
-            label={i18nKey("proposal.maker.amount")}
-            rules={i18nKey("proposal.maker.amountRules", { token })}
-            required />
-        <Input
-            disabled={busy}
-            error={amountText.length > 0 && !amountValid}
-            minlength={1}
-            maxlength={20}
-            bind:value={amountText}
-            placeholder={interpolate(
-                $_,
-                i18nKey("proposal.maker.enterAmount", {
-                    token,
-                }),
-            )} />
-    </Column>
-</Column>
diff --git a/frontend/app/src/components_mobile/home/proposal/VerificationProposal.svelte b/frontend/app/src/components_mobile/home/proposal/VerificationProposal.svelte
deleted file mode 100644
index 4caa512d3b..0000000000
--- a/frontend/app/src/components_mobile/home/proposal/VerificationProposal.svelte
+++ /dev/null
@@ -1,186 +0,0 @@
-<script lang="ts">
-    import { IDL } from "@icp-sdk/core/candid";
-    import { Principal } from "@icp-sdk/core/principal";
-    import { Body, Column, Input } from "component-lib";
-    import {
-        type CommunityMatch,
-        type ExecuteGenericNervousSystemFunction,
-        type GroupMatch,
-        type Level,
-    } from "@client";
-    import { _ } from "svelte-i18n";
-    import { i18nKey, interpolate } from "../../../i18n/i18n";
-    import Translatable from "../../Translatable.svelte";
-    import CommunityFinder from "./CommunityFinder.svelte";
-    import GroupFinder from "./GroupFinder.svelte";
-
-    const MIN_LENGTH = 3;
-    const MAX_LENGTH = 25;
-    type Operation = "set" | "revoke";
-
-    interface Props {
-        type:
-            | "set_community_verification"
-            | "revoke_community_verification"
-            | "set_group_verification"
-            | "revoke_group_verification";
-        valid: boolean;
-    }
-
-    let { type, valid = $bindable() }: Props = $props();
-
-    let selected = $state<GroupMatch | CommunityMatch | undefined>();
-    let name = $state("");
-    let nameValid = $derived(name.length >= MIN_LENGTH && name.length <= MAX_LENGTH);
-    let level = $derived<Level>(
-        type === "set_community_verification" || type === "revoke_community_verification"
-            ? "community"
-            : "group",
-    );
-    let operation = $derived<Operation>(
-        type === "set_community_verification" || type === "set_group_verification"
-            ? "set"
-            : "revoke",
-    );
-    let isValid = $derived(selected !== undefined && (operation === "revoke" || nameValid));
-
-    function selectMatch(match: GroupMatch | CommunityMatch | undefined) {
-        selected = match;
-        name = match?.name ?? "";
-    }
-
-    $effect(() => {
-        if (valid !== isValid) {
-            valid = isValid;
-        }
-    });
-
-    function setCommunityValidityPayload(communityId: string, name: string): Uint8Array {
-        return new Uint8Array(
-            IDL.encode(
-                [
-                    IDL.Record({
-                        community_id: IDL.Principal,
-                        name: IDL.Text,
-                    }),
-                ],
-                [
-                    {
-                        community_id: Principal.fromText(communityId),
-                        name,
-                    },
-                ],
-            ),
-        );
-    }
-
-    function revokeCommunityValidityPayload(communityId: string): Uint8Array {
-        return new Uint8Array(
-            IDL.encode(
-                [IDL.Record({ community_id: IDL.Principal })],
-                [{ community_id: Principal.fromText(communityId) }],
-            ),
-        );
-    }
-
-    function setGroupValidityPayload(groupId: string, name: string): Uint8Array {
-        return new Uint8Array(
-            IDL.encode(
-                [
-                    IDL.Record({
-                        group_id: IDL.Principal,
-                        name: IDL.Text,
-                    }),
-                ],
-                [
-                    {
-                        group_id: Principal.fromText(groupId),
-                        name,
-                    },
-                ],
-            ),
-        );
-    }
-
-    function revokeGroupValidityPayload(groupId: string): Uint8Array {
-        return new Uint8Array(
-            IDL.encode(
-                [IDL.Record({ group_id: IDL.Principal })],
-                [{ group_id: Principal.fromText(groupId) }],
-            ),
-        );
-    }
-
-    export function convertAction(): ExecuteGenericNervousSystemFunction | undefined {
-        if (selected === undefined || !isValid) return undefined;
-
-        if (type === "set_community_verification" && selected.kind === "community_match") {
-            return {
-                kind: "execute_generic_nervous_system_function",
-                functionId: BigInt(2006),
-                payload: setCommunityValidityPayload(selected.id.communityId, name),
-            };
-        } else if (type === "set_group_verification" && selected.kind === "group_match") {
-            return {
-                kind: "execute_generic_nervous_system_function",
-                functionId: BigInt(2007),
-                payload: setGroupValidityPayload(selected.chatId.groupId, name),
-            };
-        } else if (
-            type === "revoke_community_verification" &&
-            selected.kind === "community_match"
-        ) {
-            return {
-                kind: "execute_generic_nervous_system_function",
-                functionId: BigInt(2008),
-                payload: revokeCommunityValidityPayload(selected.id.communityId),
-            };
-        } else if (type === "revoke_group_verification" && selected.kind === "group_match") {
-            return {
-                kind: "execute_generic_nervous_system_function",
-                functionId: BigInt(2009),
-                payload: revokeGroupValidityPayload(selected.chatId.groupId),
-            };
-        }
-
-        return undefined;
-    }
-</script>
-
-<Column gap={"lg"}>
-    {#if type === "set_community_verification" || type === "revoke_community_verification"}
-        <CommunityFinder onSelect={selectMatch}></CommunityFinder>
-    {/if}
-    {#if type === "set_group_verification" || type === "revoke_group_verification"}
-        <GroupFinder onSelect={selectMatch}></GroupFinder>
-    {/if}
-
-    {#if selected !== undefined && operation === "set"}
-        <Input
-            autofocus
-            disabled={selected === undefined}
-            error={!nameValid}
-            bind:value={name}
-            minlength={MIN_LENGTH}
-            maxlength={MAX_LENGTH}
-            countdown
-            placeholder={interpolate($_, i18nKey("verified.preferredName"))}>
-            {#snippet subtext()}
-                <Translatable resourceKey={i18nKey("verified.preferredName")} />
-            {/snippet}
-        </Input>
-        <Column padding={["zero", "md"]}>
-            <Body colour={"textSecondary"}>
-                <Translatable resourceKey={i18nKey("verified.rename", undefined, level, true)}
-                ></Translatable>
-            </Body>
-        </Column>
-    {/if}
-</Column>
-
-<style lang="scss">
-    .info {
-        color: var(--txt-light);
-        @include font(light, normal, fs-80);
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/proposals/ProposalContent.svelte b/frontend/app/src/components_mobile/home/proposals/ProposalContent.svelte
deleted file mode 100644
index 3e5c967da1..0000000000
--- a/frontend/app/src/components_mobile/home/proposals/ProposalContent.svelte
+++ /dev/null
@@ -1,525 +0,0 @@
-<script lang="ts">
-    import {
-        Body,
-        BodySmall,
-        ChatLabel,
-        Caption,
-        ChatText,
-        ColourVars,
-        Column,
-        CommonButton2,
-        Row,
-        Sheet,
-        Subtitle,
-        Title,
-    } from "component-lib";
-    import {
-        type ChatIdentifier,
-        type OpenChat,
-        type ProposalContent,
-        ProposalDecisionStatus,
-        type RegisterProposalVoteResponse,
-        currentUserIdStore,
-        proposalTopicsStore,
-    } from "@client";
-    import { ErrorCode, type ReadonlyMap } from "@shared";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import ChevronRight from "svelte-material-icons/ChevronRight.svelte";
-    import Alert from "svelte-material-icons/ShieldAlert.svelte";
-    import InfoSlabBoxOut from "svelte-material-icons/InformationOutline.svelte";
-    import AccountMultiple from "svelte-material-icons/AccountMultipleOutline.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { NamedNeurons } from "../../../stores/namedNeurons";
-    import { proposalVotes } from "../../../stores/proposalVotes";
-    import { now } from "../../../stores/time";
-    import { toastStore } from "../../../stores/toast";
-    import { round2 } from "../../../utils/math";
-    import Translatable from "../../Translatable.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import ProposalVoteButton from "./ProposalVoteButton.svelte";
-    import ProposalVotingProgress from "./ProposalVotingProgress.svelte";
-    import ProposalStatusLabel from "./ProposalStatusLabel.svelte";
-
-    interface Props {
-        content: ProposalContent;
-        chatId: ChatIdentifier;
-        messageIndex: number;
-        messageId: bigint;
-        collapsed: boolean;
-        readonly: boolean;
-        reply: boolean;
-        onExpandMessage?: () => void;
-    }
-
-    let {
-        content,
-        chatId,
-        messageIndex,
-        messageId,
-        collapsed,
-        readonly,
-        reply,
-        onExpandMessage,
-    }: Props = $props();
-
-    const client = getContext<OpenChat>("client");
-    const EMPTY_MOTION_PAYLOAD = "# Motion Proposal:\n## Motion Text:\n\n";
-
-    const dashboardUrl = "https://dashboard.internetcomputer.org";
-    let showNeuronInfo = $state(false);
-    let rootCanister = $derived(
-        client.tryGetNervousSystem(content.governanceCanisterId)?.rootCanisterId ?? "",
-    );
-    let isNns = $derived(content.proposal.kind === "nns");
-    let voteStatus = $derived(
-        $proposalVotes.get(messageId) ??
-            (content.myVote !== undefined ? (content.myVote ? "adopted" : "rejected") : undefined),
-    );
-    let proposal = $derived(content.proposal);
-    let statusColour: Record<ProposalDecisionStatus, string> = {
-        0: ColourVars.disabledButton, // unspecified
-        1: ColourVars.error, // failed
-        2: ColourVars.warning, // open
-        3: ColourVars.error, // rejected
-        4: ColourVars.success, // executed
-        5: ColourVars.success, // adopted
-    };
-    let proposalUrl = $derived(
-        isNns
-            ? `${dashboardUrl}/proposal/${proposal.id}`
-            : `${dashboardUrl}/sns/${rootCanister}/proposal/${proposal.id}`,
-    );
-    let proposerUrl = $derived(
-        isNns
-            ? `${dashboardUrl}/neuron/${proposal.proposer}`
-            : `${dashboardUrl}/sns/${rootCanister}/neuron/${proposal.proposer}`,
-    );
-    let adoptPercent = $derived(round2((100 * proposal.tally.yes) / proposal.tally.total));
-    let rejectPercent = $derived(round2((100 * proposal.tally.no) / proposal.tally.total));
-    let votingEnded = $derived(proposal.deadline <= $now);
-    let disable = $derived(readonly || reply || votingEnded);
-    let votingDisabled = $derived(voteStatus !== undefined || disable);
-    let typeValue = $derived(getProposalTopicLabel(content, $proposalTopicsStore));
-    let payload = $derived(content.proposal.payloadTextRendering);
-    let payloadEmpty = $derived(
-        payload === undefined || payload === EMPTY_MOTION_PAYLOAD || payload.length === 0,
-    );
-
-    // Certain SNS proposal actions are considered "critical" and use higher
-    // voting thresholds. Keep this list in sync with the SNS governance
-    // specification / action-id mapping used by the client. (If the upstream
-    // action ids change, this classification must be updated accordingly.)
-    const criticalSnsProposals = [
-        9, // transfer treasury funds
-        11, // deregister dapp canisters
-        12, // mint sns tokens
-    ];
-    let isCritical = $derived(
-        content.proposal.kind === "sns"
-            ? criticalSnsProposals.indexOf(content.proposal.action) > -1
-            : false,
-    );
-
-    let showDetails = $state(false);
-
-    function onVote(adopt: boolean) {
-        if (votingDisabled || (chatId.kind !== "group_chat" && chatId.kind !== "channel")) {
-            return;
-        }
-
-        const mId = messageId;
-        proposalVotes.insert(mId, adopt ? "adopting" : "rejecting");
-
-        let success = false;
-        client
-            .registerProposalVote(chatId, messageIndex, adopt)
-            .then((resp) => {
-                if (resp.kind === "success") {
-                    success = true;
-                    proposalVotes.insert(mId, adopt ? "adopted" : "rejected");
-                    client.getProposalVoteDetails(
-                        messageId,
-                        content.governanceCanisterId,
-                        proposal.id,
-                        isNns,
-                    );
-                } else if (resp.kind === "error" && resp.code === ErrorCode.NoEligibleNeurons) {
-                    showNeuronInfo = true;
-                } else {
-                    const err = registerProposalVoteErrorMessage(resp);
-                    if (err) toastStore.showFailureToast(i18nKey("proposal." + err));
-                }
-            })
-            .catch((err) => {
-                client.logError("Unable to vote on proposal", err);
-                toastStore.showFailureToast(i18nKey("proposal.voteFailed"));
-            })
-            .finally(() => {
-                if (!success) {
-                    proposalVotes.delete(mId);
-                }
-            });
-    }
-
-    function registerProposalVoteErrorMessage(
-        resp: RegisterProposalVoteResponse,
-    ): string | undefined {
-        if (resp.kind === "error" && resp.code === ErrorCode.NoChange) return "alreadyVoted";
-        if (resp.kind === "error" && resp.code === ErrorCode.ProposalNotAcceptingVotes)
-            return "proposalNotAcceptingVotes";
-        return "voteFailed";
-    }
-
-    function expand() {
-        if (collapsed) {
-            onExpandMessage?.();
-        }
-    }
-
-    function renderNeuronId(neuronId: string): string {
-        const name = NamedNeurons[neuronId];
-        if (name !== undefined) {
-            return name;
-        }
-
-        const length = neuronId.length;
-        if (length < 12) {
-            return neuronId;
-        }
-
-        return `${neuronId.slice(0, 4)}..${neuronId.slice(length - 4, length)}`;
-    }
-
-    export function getProposalTopicLabel(
-        content: ProposalContent,
-        proposalTopics: ReadonlyMap<number, string>,
-    ): string {
-        return (
-            proposalTopics.get(
-                content.proposal.kind === "nns" ? content.proposal.topic : content.proposal.action,
-            ) ?? "unknown"
-        );
-    }
-</script>
-
-{#snippet header()}
-    <Column gap={"md"} width="fill">
-        <!-- Title -->
-        <Column>
-            <Title fontWeight="semi-bold" width="fill">
-                {#if proposal.url.length > 0}
-                    <a class="title_link" href={proposal.url} rel="noreferrer" target="_blank">
-                        {proposal.title}
-                        <BodySmall colour="textSecondary" fontWeight="semi-bold"
-                            >[<Translatable resourceKey={i18nKey("proposal.link")} />]</BodySmall>
-                    </a>
-                {:else}
-                    {proposal.title}
-                {/if}
-            </Title>
-        </Column>
-
-        <!-- Status & Details -->
-        <Row crossAxisAlignment="center" gap="xs">
-            <ProposalStatusLabel
-                content={{ kind: "value", value: ProposalDecisionStatus[proposal.status] }}
-                bgColor={statusColour[proposal.status]} />
-        </Row>
-    </Column>
-{/snippet}
-
-{#snippet metadata()}
-    <Column gap="sm" width="fill">
-        <!-- Proposal type -->
-        <Row gap="sm">
-            {#if isCritical}
-                <Alert color={ColourVars.error} size="1.25rem" />
-            {:else}
-                <InfoSlabBoxOut color={ColourVars.textPrimary} size="1.25rem" />
-            {/if}
-            <Column>
-                <ChatText width="hug" fontWeight="semi-bold" colour="textPrimary">
-                    {typeValue}
-                </ChatText>
-                {#if isCritical}
-                    <BodySmall colour="error">
-                        <Translatable resourceKey={i18nKey("proposal.criticalProposal")} />
-                    </BodySmall>
-                {/if}
-            </Column>
-        </Row>
-
-        <!-- Who proposed the proposal -->
-        <Row gap="sm">
-            <AccountMultiple color={ColourVars.textSecondary} size="1.25rem" />
-            <Row gap="xs">
-                <ChatText width="fill" colour="textSecondary">
-                    <Translatable resourceKey={i18nKey("proposal.proposedBy")} />
-                    <a class="sender_link" target="_blank" rel="noreferrer" href={proposerUrl}>
-                        {renderNeuronId(proposal.proposer)}
-                    </a>
-                </ChatText>
-            </Row>
-        </Row>
-    </Column>
-{/snippet}
-
-{#snippet progress()}
-    <ProposalVotingProgress
-        deadline={proposal.deadline}
-        {votingEnded}
-        {adoptPercent}
-        {rejectPercent}
-        minYesPercentageOfTotal={proposal.minYesPercentageOfTotal}
-        minYesPercentageOfExercised={proposal.minYesPercentageOfExercised} />
-{/snippet}
-
-{#if collapsed}
-    <Column onClick={expand}>
-        <Row
-            gap="sm"
-            padding="md"
-            borderRadius={["lg", "lg", "md", "md"]}
-            crossAxisAlignment="center"
-            backgroundColor={ColourVars.background1}>
-            <Subtitle fontWeight="semi-bold" colour="primary">
-                {proposal.title}
-            </Subtitle>
-            <ChevronRight size="1.25rem" color={ColourVars.primary} />
-        </Row>
-        <Row gap="xs" padding="sm" crossAxisAlignment="center">
-            <ChatLabel width="hug" colour="textSecondary">
-                <Translatable resourceKey={i18nKey("proposal.tapToExpand")} />
-            </ChatLabel>
-        </Row>
-    </Column>
-{:else}
-    <Column
-        gap="lg"
-        padding={["md", "md"]}
-        width={{ size: "72vw" }}
-        borderRadius={["lg", "lg", "md", "md"]}
-        backgroundColor={ColourVars.background0}>
-        {@render header()}
-        {@render metadata()}
-        <div class="separator"></div>
-        {@render progress()}
-        <div class="separator"></div>
-        <Row mainAxisAlignment="center">
-            <CommonButton2 onClick={() => (showDetails = true)} variant="primary" mode="text">
-                <Translatable resourceKey={i18nKey("proposal.viewDetails")} />
-            </CommonButton2>
-        </Row>
-    </Column>
-    <Row gap="sm" padding={["sm", "xxs", "xl"]}>
-        <ProposalVoteButton
-            mode="yes"
-            voting={voteStatus === "adopting"}
-            voted={voteStatus === "adopted"}
-            disabled={votingDisabled}
-            onClick={() => onVote(true)}
-            percentage={adoptPercent} />
-        <ProposalVoteButton
-            mode="no"
-            voting={voteStatus === "rejecting"}
-            voted={voteStatus === "rejected"}
-            disabled={votingDisabled}
-            onClick={() => onVote(false)}
-            percentage={rejectPercent} />
-    </Row>
-{/if}
-
-<!-- Proposal details -->
-
-{#if showDetails}
-    <Sheet onDismiss={() => (showDetails = false)}>
-        <Column gap="lg" maxHeight="70vh" overflow="auto" padding={["md", "xl", "huge"]}>
-            <Column gap="md">
-                <!-- Header labels -->
-                <Row gap="sm" crossAxisAlignment="end" mainAxisAlignment="start">
-                    <ProposalStatusLabel
-                        content={{ kind: "value", value: ProposalDecisionStatus[proposal.status] }}
-                        bgColor={statusColour[proposal.status]} />
-
-                    {#if isCritical}
-                        <Row
-                            width="hug"
-                            borderColour={ColourVars.error}
-                            borderWidth="thick"
-                            borderRadius="md"
-                            padding={["xs", "sm"]}>
-                            <Body colour="error">
-                                <Translatable resourceKey={i18nKey("proposal.criticalProposal")} />
-                            </Body>
-                        </Row>
-                    {/if}
-                </Row>
-
-                <!-- Title -->
-                <Title fontWeight="semi-bold" width="fill">
-                    {#if proposal.url.length > 0}
-                        <a
-                            class="title_link"
-                            href={proposal.url}
-                            rel="noreferrer"
-                            target="_blank"
-                            style:color={ColourVars.textPrimary}>
-                            {proposal.title}
-                            <BodySmall colour="primary" fontWeight="semi-bold"
-                                >[<Translatable
-                                    resourceKey={i18nKey("proposal.link")} />]</BodySmall>
-                        </a>
-                    {:else}
-                        {proposal.title}
-                    {/if}
-                </Title>
-
-                <Row wrap gap="sm" crossAxisAlignment="center">
-                    <!-- ID link -->
-                    <a href={proposalUrl} rel="noreferrer" target="_blank">
-                        <Row gap="xs" width="hug" crossAxisAlignment="center">
-                            <BodySmall fontWeight="semi-bold" colour="primary">
-                                ID {proposal.id}
-                            </BodySmall>
-                        </Row>
-                    </a>
-                    <Caption colour="textSecondary" width={"hug"}>|</Caption>
-
-                    <!-- Type of proposal -->
-                    <BodySmall width="hug" fontWeight="semi-bold" colour="textPrimary">
-                        {typeValue}
-                    </BodySmall>
-                </Row>
-
-                <!-- Proposal origin -->
-                <Row wrap gap="xs" crossAxisAlignment="center">
-                    <BodySmall width="hug" colour="textSecondary">
-                        <Translatable resourceKey={i18nKey("proposal.proposedBy")} />
-                    </BodySmall>
-                    <BodySmall fontWeight="semi-bold" colour="primary">
-                        <a
-                            target="_blank"
-                            rel="noreferrer"
-                            href={proposerUrl}
-                            style:color={ColourVars.primary}>
-                            {renderNeuronId(proposal.proposer)}
-                        </a>
-                    </BodySmall>
-                </Row>
-            </Column>
-
-            <!-- Summary -->
-            <Body fontWeight="light" colour="textPrimary">
-                <Markdown text={proposal.summary} inline={false} />
-            </Body>
-
-            <!-- Additional details -->
-            {#if !payloadEmpty}
-                <Row padding={["sm", "zero"]}>
-                    <div class="separator thick"></div>
-                </Row>
-                <Column gap="lg">
-                    <Subtitle fontWeight={"bold"}>
-                        <Translatable resourceKey={i18nKey("proposal.details")} />
-                    </Subtitle>
-                    <Body colour="textSecondary">
-                        <Markdown text={payload ?? ""} inline={false} />
-                    </Body>
-                </Column>
-            {/if}
-
-            <!-- Passing a proposal -->
-            <Row padding={["sm", "zero"]}>
-                <div class="separator thick"></div>
-            </Row>
-            <Column gap="lg">
-                <Body fontWeight="semi-bold" colour="textPrimary">
-                    <Translatable
-                        resourceKey={i18nKey(
-                            `proposal.passing.title.${isCritical ? "critical" : "regular"}`,
-                        )} />
-                </Body>
-                <Row gap="lg">
-                    <Row width={{ size: "0.75rem" }}>
-                        <Body width="hug" colour="textSecondary">1.</Body>
-                    </Row>
-                    <Column gap="sm">
-                        <Body colour="textPrimary">
-                            <Translatable
-                                resourceKey={i18nKey("proposal.passing.participation.fst", {
-                                    pct: `${proposal.minYesPercentageOfTotal}%`,
-                                })} />
-                        </Body>
-                        <Body colour="textSecondary">
-                            <Translatable
-                                resourceKey={i18nKey("proposal.passing.participation.snd")} />
-                        </Body>
-                    </Column>
-                </Row>
-                <Row gap="lg">
-                    <Row width={{ size: "0.75rem" }}>
-                        <Body width="hug" colour="textSecondary">2.</Body>
-                    </Row>
-                    <Column gap="sm">
-                        <Body colour="textPrimary">
-                            <Translatable
-                                resourceKey={i18nKey(
-                                    `proposal.passing.majority.${isCritical ? "critical" : "regular"}.fst`,
-                                    {
-                                        pct: `${proposal.minYesPercentageOfExercised}%`,
-                                    },
-                                )} />
-                        </Body>
-                        <Body colour="textSecondary">
-                            <Translatable
-                                resourceKey={i18nKey(
-                                    `proposal.passing.majority.${isCritical ? "critical" : "regular"}.snd`,
-                                )} />
-                        </Body>
-                        <Body colour="textSecondary">
-                            <Translatable resourceKey={i18nKey(`proposal.passing.majority.thrd`)} />
-                        </Body>
-                    </Column>
-                </Row>
-            </Column>
-        </Column>
-    </Sheet>
-{/if}
-
-{#if showNeuronInfo}
-    <Sheet onDismiss={() => (showNeuronInfo = false)}>
-        <Column gap="xl" padding={["md", "xl", "huge"]}>
-            <Title fontWeight={"bold"}>
-                <Translatable resourceKey={i18nKey("proposal.noEligibleNeurons")} />
-            </Title>
-            <Body colour="textSecondary">
-                <Markdown
-                    inline={true}
-                    text={$_("proposal.noEligibleNeuronsMessage", {
-                        values: { userId: $currentUserIdStore },
-                    })} />
-            </Body>
-        </Column>
-    </Sheet>
-{/if}
-
-<style lang="scss">
-    .title_link {
-        width: 100%;
-    }
-    .sender_link {
-        color: var(--primary) !important;
-        font-weight: var(--font-weight-semi-bold);
-    }
-    .separator {
-        width: 100%;
-        height: 0.125rem;
-        border-radius: var(--rad-md);
-        background-color: var(--background-2);
-
-        &.thick {
-            height: 0.25rem;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/proposals/ProposalProgressLayout.svelte b/frontend/app/src/components_mobile/home/proposals/ProposalProgressLayout.svelte
deleted file mode 100644
index 0ec793198d..0000000000
--- a/frontend/app/src/components_mobile/home/proposals/ProposalProgressLayout.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<script lang="ts">
-    import { Column, Row } from "component-lib";
-    import type { Snippet } from "svelte";
-    interface Props {
-        adopt: Snippet;
-        reject: Snippet;
-        progress: Snippet;
-    }
-
-    let { adopt, reject, progress }: Props = $props();
-</script>
-
-<Column crossAxisAlignment={"center"} mainAxisAlignment={"center"} gap={"lg"}>
-    {@render progress()}
-    <Row mainAxisAlignment={"spaceAround"}>
-        {@render adopt()}
-        {@render reject()}
-    </Row>
-</Column>
diff --git a/frontend/app/src/components_mobile/home/proposals/ProposalVoteButton.svelte b/frontend/app/src/components_mobile/home/proposals/ProposalVoteButton.svelte
deleted file mode 100644
index e0e0d3bf22..0000000000
--- a/frontend/app/src/components_mobile/home/proposals/ProposalVoteButton.svelte
+++ /dev/null
@@ -1,113 +0,0 @@
-<script lang="ts">
-    import {
-        Body,
-        BodySmall,
-        Column,
-        ColourVars,
-        Row,
-        Spinner,
-        type ColourVarKeys,
-    } from "component-lib";
-    import { iconSize } from "@client";
-    import ThumbDown from "svelte-material-icons/ThumbDown.svelte";
-    import ThumbUp from "svelte-material-icons/ThumbUp.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Translatable from "../../Translatable.svelte";
-
-    interface Props {
-        mode: "yes" | "no";
-        percentage: number;
-        disabled: boolean;
-        voting: boolean;
-        voted: boolean;
-        onClick: () => void;
-    }
-
-    let { mode, percentage, disabled, voting, voted, onClick }: Props = $props();
-
-    let labelKey = $derived(
-        mode === "yes"
-            ? `proposal.adopt${voted ? "ed" : ""}`
-            : `proposal.reject${voted ? "ed" : ""}`,
-    );
-
-    let voteActive = $derived(!disabled && !voted);
-
-    let textColour = $derived<ColourVarKeys>(
-        voteActive
-            ? mode === "yes"
-                ? "success"
-                : "error"
-            : voted
-              ? "textPrimary"
-              : "textSecondary",
-    );
-
-    let buttonBg = $derived(
-        voted ? (mode === "yes" ? ColourVars.success : ColourVars.error) : undefined,
-    );
-</script>
-
-<Row
-    onClick={() => {
-        if (!disabled && !voting && !voted) {
-            onClick();
-        }
-    }}
-    gap="xs"
-    padding={["sm", "md"]}
-    width="fill"
-    borderRadius="md"
-    mainAxisAlignment="spaceBetween"
-    crossAxisAlignment="center"
-    backgroundColor={buttonBg}
-    borderStyle="solid"
-    borderWidth="thick"
-    borderColour={disabled && !voted
-        ? ColourVars.disabledButton
-        : mode === "yes"
-          ? ColourVars.success
-          : ColourVars.error}>
-    <!-- Label & Pct -->
-    <Column width="hug" gap="zero">
-        <Body fontWeight="bold" width="hug" colour={textColour}>
-            <Translatable resourceKey={i18nKey(labelKey)} />
-        </Body>
-        <BodySmall width="hug" colour={textColour}>
-            {percentage}%
-        </BodySmall>
-    </Column>
-
-    <!-- Icon -->
-    <div class={`icon ${mode}`} class:voted>
-        {#if voting}
-            <Spinner
-                size="1.25rem"
-                backgroundColour={ColourVars.textPrimary}
-                foregroundColour={ColourVars.background2} />
-        {:else if mode === "yes"}
-            <ThumbUp size={$iconSize} />
-        {:else}
-            <ThumbDown size={$iconSize} />
-        {/if}
-    </div>
-</Row>
-
-<style lang="scss">
-    .icon {
-        border-radius: 50%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 2.25rem;
-        height: 2.25rem;
-        cursor: pointer;
-        padding: var(--sp-sm);
-        background-color: var(--background-0);
-
-        &.voted.yes,
-        &.voted.no {
-            background-color: var(--background-2);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/proposals/ProposalVotingProgress.svelte b/frontend/app/src/components_mobile/home/proposals/ProposalVotingProgress.svelte
deleted file mode 100644
index c759000f19..0000000000
--- a/frontend/app/src/components_mobile/home/proposals/ProposalVotingProgress.svelte
+++ /dev/null
@@ -1,143 +0,0 @@
-<script lang="ts">
-    import type { OpenChat } from "@client";
-    import { getContext } from "svelte";
-    import ChevronDown from "svelte-material-icons/ChevronDown.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { rtlStore } from "../../../stores/rtl";
-    import { now500 } from "../../../stores/time";
-    import Translatable from "../../Translatable.svelte";
-    import { Body, ColourVars, Column, Row } from "component-lib";
-
-    interface Props {
-        adoptPercent: number;
-        rejectPercent: number;
-        votingEnded: boolean;
-        deadline: number;
-        minYesPercentageOfTotal: number;
-        minYesPercentageOfExercised: number;
-    }
-
-    let {
-        adoptPercent,
-        rejectPercent,
-        votingEnded,
-        deadline,
-        minYesPercentageOfTotal,
-        minYesPercentageOfExercised,
-    }: Props = $props();
-
-    const client = getContext<OpenChat>("client");
-
-    let deadlineDate = $derived(new Date(Number(deadline)));
-    let rtl = $derived($rtlStore ? "right" : "left");
-    let rtlOpposite = $derived($rtlStore ? "left" : "right");
-</script>
-
-<Column>
-    <!-- Progress -->
-    <Column overflow="visible">
-        <div class="chevrons">
-            <div class="icon" style="{rtl}: calc({minYesPercentageOfTotal}% - 0.5em)">
-                <ChevronDown viewBox="-1 0 24 24" color={ColourVars.textPrimary} />
-            </div>
-            <div class="icon solid" style="{rtl}: calc({minYesPercentageOfExercised}% - 0.5em)">
-                <svg viewBox="-1 0 24 24">
-                    <path d="M6,10 L12,16 L18,10 H7Z" fill={ColourVars.textPrimary} />
-                </svg>
-            </div>
-        </div>
-        <div class="progress">
-            <div class="adopt" style="width: {adoptPercent}%; {rtl}: 0;"></div>
-            <div class="reject" style="width: {rejectPercent}%; {rtlOpposite}: 0;"></div>
-            <div class="vertical-line" style="{rtl}: {minYesPercentageOfTotal}%"></div>
-            <div class="vertical-line" style="{rtl}: {minYesPercentageOfExercised}%"></div>
-        </div>
-    </Column>
-
-    <!-- Percentages -->
-    <Row width="fill" mainAxisAlignment="spaceBetween">
-        <Column width="hug" padding="sm">
-            <Body width="hug" fontWeight="semi-bold" colour="success">{adoptPercent}%</Body>
-        </Column>
-        <Column width="hug" padding="sm">
-            <Body width="hug" fontWeight="semi-bold" colour="error">{rejectPercent}%</Body>
-        </Column>
-    </Row>
-
-    <!-- Remaining -->
-    <Column padding={["sm", "zero", "zero"]} crossAxisAlignment="center">
-        <Body colour="textSecondary" width="hug">
-            <Translatable
-                resourceKey={i18nKey(
-                    votingEnded ? "proposal.votingPeriodEnded" : "proposal.votingPeriodRemaining",
-                )} />
-        </Body>
-        <Body fontWeight="semi-bold" width="hug">
-            {#if votingEnded}
-                {client.toDateString(deadlineDate)} {client.toShortTimeString(deadlineDate)}
-            {:else}
-                {client.formatTimeRemaining($now500, deadline)}
-            {/if}
-        </Body>
-    </Column>
-</Column>
-
-<style lang="scss">
-    .wrapper {
-        flex: auto;
-        position: relative;
-    }
-
-    .chevrons {
-        width: 100%;
-        height: 1rem;
-        position: relative;
-        overflow: hidden;
-
-        .icon {
-            position: absolute;
-            top: 0;
-            width: 1rem;
-            color: var(--txt);
-            margin-left: 0px;
-
-            &.solid {
-                transform: scale(1.25);
-            }
-        }
-    }
-
-    .progress {
-        width: 100%;
-        height: 0.3rem;
-        position: relative;
-        border-radius: var(--rad-md);
-        background: var(--background-2);
-
-        .adopt,
-        .reject {
-            top: 0;
-            bottom: 0;
-            position: absolute;
-            transition-duration: 1s;
-            border-radius: var(--rad-md);
-        }
-
-        .adopt {
-            background: var(--vote-yes-color);
-        }
-
-        .reject {
-            background: var(--vote-no-color);
-        }
-
-        .vertical-line {
-            position: absolute;
-            top: -0.15rem;
-            bottom: -0.25rem;
-            width: 2px;
-            background-color: var(--txt);
-            border-radius: 2px;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/thread/Thread.svelte b/frontend/app/src/components_mobile/home/thread/Thread.svelte
deleted file mode 100644
index 2543b208b9..0000000000
--- a/frontend/app/src/components_mobile/home/thread/Thread.svelte
+++ /dev/null
@@ -1,400 +0,0 @@
-<script lang="ts">
-    import { ColourVars, Container } from "component-lib";
-    import type {
-        AttachmentContent,
-        ChatEvent as ChatEventType,
-        ChatSummary,
-        EnhancedReplyContext,
-        EventWrapper,
-        Message,
-        MessageContent,
-        MessageContext,
-        OpenChat,
-        TimelineItem,
-        User,
-    } from "@client";
-    import {
-        allUsersStore,
-        currentUserIdStore,
-        currentUserStore,
-        failedMessagesStore,
-        lastCryptoSent,
-        LEDGER_CANISTER_ICP,
-        localUpdates,
-        messageContextsEqual,
-        messagesRead,
-        publish,
-        selectedChatBlockedUsersStore,
-        selectedChatExpandedDeletedMessageStore,
-        selectedThreadDraftMessageStore,
-        subscribe,
-        threadEventsStore,
-        threadsFollowedByMeStore,
-        unconfirmedStore,
-    } from "@client";
-    import { getContext, onMount } from "svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { toastStore } from "../../../stores/toast";
-    import { randomSentence } from "../../../utils/randomMsg";
-    import AreYouSure from "../../AreYouSure.svelte";
-    import Loading from "@shared_components/Loading.svelte";
-    import { flattenTimeline } from "@shared_components/flatChatItems";
-    import ChatEvent from "../ChatEvent.svelte";
-    import ChatEventList from "../ChatEventList.svelte";
-    import CryptoTransferBuilder from "../CryptoTransferBuilder.svelte";
-    import Footer from "../Footer.svelte";
-    import MemeBuilder from "../MemeBuilder.svelte";
-    import TimelineDate from "../TimelineDate.svelte";
-    import ThreadHeader from "./ThreadHeader.svelte";
-    import { keyboard } from "@stores/keyboard.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        rootEvent: EventWrapper<Message>;
-        chat: ChatSummary;
-    }
-
-    let { rootEvent, chat }: Props = $props();
-
-    let chatEventList: ChatEventList | undefined = $state();
-    //@ts-ignore
-    let memeBuilder: MemeBuilder = $state();
-    let creatingCryptoTransfer: { ledger: string; amount: bigint } | undefined = $state(undefined);
-    let buildingMeme = $state(false);
-    let initialised = $state(false);
-    let messagesDiv: HTMLDivElement | undefined = $state();
-    let messagesDivHeight: number = $state(0);
-    let removeLinkPreviewDetails: { event: EventWrapper<Message>; url: string } | undefined =
-        $state(undefined);
-
-    let threadRootMessageIndex = $derived(rootEvent?.event?.messageIndex ?? 0);
-    let messageContext = $derived({ chatId: chat.id, threadRootMessageIndex });
-    let threadRootMessage = $derived(rootEvent.event);
-    let blocked = $derived(
-        chat.kind === "direct_chat" && $selectedChatBlockedUsersStore.has(chat.them.userId),
-    );
-    let textContent = $derived($selectedThreadDraftMessageStore?.textContent);
-    let replyingTo = $derived($selectedThreadDraftMessageStore?.replyingTo);
-    let attachment = $derived($selectedThreadDraftMessageStore?.attachment);
-    let editingEvent = $derived($selectedThreadDraftMessageStore?.editingEvent);
-    let canSendAny = $derived(client.canSendMessage(chat.id, "thread"));
-    let canReact = $derived(client.canReactToMessages(chat.id));
-    let atRoot = $derived($threadEventsStore.length === 0 || $threadEventsStore[0]?.index === 0);
-    let events = $derived(atRoot ? [rootEvent, ...$threadEventsStore] : $threadEventsStore);
-    let timeline = $derived(
-        client.groupEvents(
-            [...events].reverse(),
-            $currentUserIdStore,
-            chat.kind === "channel" && chat.public,
-            $selectedChatExpandedDeletedMessageStore,
-        ) as TimelineItem<Message>[],
-    );
-    let items = $derived(flattenTimeline(timeline));
-    let readonly = $derived(client.isChatReadOnly(chat.id));
-    let thread = $derived(rootEvent.event.thread);
-    let loading = $derived(!initialised && $threadEventsStore.length === 0 && thread !== undefined);
-    let isFollowedByMe = $derived(
-        $threadsFollowedByMeStore.get(chat.id)?.has(threadRootMessageIndex) ?? false,
-    );
-
-    function onCloseThread() {
-        publish("closeThread");
-    }
-
-    onMount(() => {
-        const unsubs = [
-            subscribe("tokenTransfer", onTokenTransfer),
-            subscribe("createTestMessages", onCreateTestMessages),
-        ];
-        return () => {
-            unsubs.forEach((u) => u());
-        };
-    });
-
-    function onTokenTransfer(args: { context: MessageContext; ledger?: string; amount?: bigint }) {
-        if (messageContextsEqual(messageContext, args.context)) {
-            tokenTransfer(args);
-        }
-    }
-
-    function onCreateTestMessages([ctx, num]: [MessageContext, number]) {
-        if (messageContextsEqual(ctx, messageContext)) {
-            createTestMessages(num);
-        }
-    }
-
-    function createTestMessages(total: number): void {
-        function send(n: number) {
-            if (n === total) return;
-
-            sendMessageWithAttachment(randomSentence(), false, undefined);
-
-            window.setTimeout(() => send(n + 1), 500);
-        }
-
-        send(0);
-    }
-
-    function onSendMessage(detail: [string | undefined, User[], boolean]) {
-        if (!canSendAny) return;
-        let [text, mentioned, blockLevelMarkdown] = detail;
-        if (editingEvent !== undefined) {
-            client
-                .editMessageWithAttachment(
-                    messageContext,
-                    text,
-                    blockLevelMarkdown,
-                    attachment,
-                    editingEvent,
-                )
-                .then((success) => {
-                    if (!success) {
-                        toastStore.showFailureToast(i18nKey("errorEditingMessage"));
-                    }
-                });
-        } else {
-            sendMessageWithAttachment(text, blockLevelMarkdown, attachment, mentioned);
-        }
-    }
-
-    function editEvent(ev: EventWrapper<Message>): void {
-        localUpdates.draftMessages.setEditing(messageContext, ev, $allUsersStore);
-    }
-
-    function sendMessageWithAttachment(
-        textContent: string | undefined,
-        blockLevelMarkdown: boolean,
-        attachment: AttachmentContent | undefined,
-        mentioned: User[] = [],
-    ) {
-        client.sendMessageWithAttachment(
-            messageContext,
-            textContent,
-            blockLevelMarkdown,
-            attachment,
-            mentioned,
-        );
-    }
-
-    function onCancelReply() {
-        localUpdates.draftMessages.setReplyingTo(messageContext, undefined);
-    }
-
-    function clearAttachment() {
-        localUpdates.draftMessages.setAttachment(messageContext, undefined);
-    }
-
-    function cancelEditEvent() {
-        localUpdates.draftMessages.delete(messageContext);
-    }
-
-    function onSetTextContent(txt?: string) {
-        localUpdates.draftMessages.setTextContent(messageContext, txt);
-    }
-
-    function onStartTyping() {
-        if (chat !== undefined) {
-            client.startTyping(chat.id, $currentUserIdStore, threadRootMessageIndex);
-        }
-    }
-
-    function onStopTyping() {
-        if (chat !== undefined) {
-            client.stopTyping(chat.id, $currentUserIdStore, threadRootMessageIndex);
-        }
-    }
-
-    function onFileSelected(content: AttachmentContent) {
-        localUpdates.draftMessages.setAttachment(messageContext, content);
-    }
-
-    function tokenTransfer(detail: { ledger?: string; amount?: bigint }) {
-        keyboard.enableViewportResize();
-        creatingCryptoTransfer = {
-            ledger: detail.ledger ?? $lastCryptoSent ?? LEDGER_CANISTER_ICP,
-            amount: detail.amount ?? BigInt(0),
-        };
-    }
-
-    function makeMeme() {
-        keyboard.enableViewportResize();
-        buildingMeme = true;
-        if (memeBuilder !== undefined) {
-            memeBuilder.reset();
-        }
-    }
-
-    function replyTo(replyContext: EnhancedReplyContext) {
-        localUpdates.draftMessages.setReplyingTo(messageContext, replyContext);
-    }
-
-    function defaultCryptoTransferReceiver(): string | undefined {
-        return replyingTo?.sender?.userId;
-    }
-
-    function goToMessageIndex(index: number) {
-        chatEventList?.scrollToMessageIndex(messageContext, index, false);
-    }
-
-    function onGoToMessageIndex(detail: { index: number }) {
-        goToMessageIndex(detail.index);
-    }
-
-    function createP2PSwapMessage() {
-        publish("createSwap", {
-            fromLedger: $lastCryptoSent ?? LEDGER_CANISTER_ICP,
-            ctx: messageContext,
-        });
-    }
-
-    function onRemovePreview(event: EventWrapper<Message>, url: string): void {
-        removeLinkPreviewDetails = {
-            event,
-            url,
-        };
-    }
-
-    function removePreview(yes: boolean): Promise<void> {
-        if (removeLinkPreviewDetails !== undefined && yes) {
-            const { event, url } = removeLinkPreviewDetails;
-
-            client.hideLinkPreview(messageContext, event, url).then((success) => {
-                if (!success) {
-                    toastStore.showFailureToast(i18nKey("errorRemovingLinkPreview"));
-                }
-            });
-        }
-
-        removeLinkPreviewDetails = undefined;
-        return Promise.resolve();
-    }
-
-    function toggleMessageExpansion(ew: EventWrapper<ChatEventType>, expand: boolean) {
-        if (ew.event.kind === "message" && ew.event.content.kind === "proposal_content") {
-            client.toggleProposalFilterMessageExpansion(ew.event.messageId, expand);
-        }
-    }
-
-    function onSendMessageWithContent(content: MessageContent) {
-        client.sendMessageWithContent(messageContext, content, false);
-    }
-</script>
-
-{#if removeLinkPreviewDetails !== undefined}
-    <AreYouSure title={i18nKey("removePreviewQuestion")} action={removePreview} />
-{/if}
-
-<MemeBuilder onSend={onSendMessageWithContent} bind:this={memeBuilder} bind:open={buildingMeme} />
-
-{#if creatingCryptoTransfer !== undefined}
-    <CryptoTransferBuilder
-        {chat}
-        ledger={creatingCryptoTransfer.ledger}
-        defaultReceiver={defaultCryptoTransferReceiver()}
-        {messageContext}
-        onClose={() => {
-            // TODO rethink, same as in CurrentChat.svelte
-            keyboard.disableViewportResize();
-            creatingCryptoTransfer = undefined;
-        }} />
-{/if}
-
-<Container background={ColourVars.background0} height={"fill"} direction={"vertical"}>
-    <ThreadHeader {threadRootMessageIndex} {onCloseThread} {rootEvent} chatSummary={chat} />
-    {#if loading}
-        <Loading />
-    {:else}
-        <ChatEventList
-            threadRootEvent={rootEvent}
-            rootSelector={"thread-messages"}
-            maintainScroll={false}
-            bind:this={chatEventList}
-            scrollTopButtonEnabled
-            {readonly}
-            unreadMessages={0}
-            firstUnreadMention={undefined}
-            footer
-            visible
-            {items}
-            {chat}
-            bind:initialised
-            bind:messagesDiv
-            bind:messagesDivHeight>
-            {#snippet row(
-                item,
-                { isAccepted, isConfirmed, isFailed, isReadByMe, messageObserver, focusIndex },
-            )}
-                {#if item.kind === "timeline_date"}
-                    <TimelineDate timestamp={item.timestamp} />
-                {:else if item.kind === "event"}
-                    {@const evt = item.event as EventWrapper<Message>}
-                    <ChatEvent
-                        chatId={chat.id}
-                        chatType={chat.kind}
-                        event={evt}
-                        first={item.first}
-                        last={item.last}
-                        me={evt.event.sender === $currentUserIdStore}
-                        accepted={isAccepted($unconfirmedStore, evt)}
-                        confirmed={isConfirmed($unconfirmedStore, evt)}
-                        failed={isFailed($failedMessagesStore, evt)}
-                        readByMe={evt.event.messageId === rootEvent.event.messageId ||
-                            !isFollowedByMe ||
-                            isReadByMe($messagesRead, evt)}
-                        observer={messageObserver}
-                        focused={evt.event.kind === "message" &&
-                            focusIndex === evt.event.messageIndex}
-                        {readonly}
-                        {threadRootMessage}
-                        pinned={false}
-                        supportsEdit={evt.event.messageId !== rootEvent.event.messageId}
-                        supportsReply={evt.event.messageId !== rootEvent.event.messageId}
-                        canPin={client.canPinMessages(chat.id)}
-                        canBlockUsers={client.canBlockUsers(chat.id)}
-                        canDelete={client.canDeleteOtherUsersMessages(chat.id)}
-                        publicGroup={(chat.kind === "group_chat" || chat.kind === "channel") &&
-                            chat.public}
-                        editing={editingEvent === evt}
-                        canSendAny
-                        {canReact}
-                        canInvite={false}
-                        canReplyInThread={false}
-                        collapsed={false}
-                        {onRemovePreview}
-                        {onGoToMessageIndex}
-                        onReplyTo={replyTo}
-                        onEditEvent={() => editEvent(evt)}
-                        onExpandMessage={() => toggleMessageExpansion(evt, true)}
-                        onCollapseMessage={() => toggleMessageExpansion(evt, false)} />
-                {/if}
-            {/snippet}
-        </ChatEventList>
-    {/if}
-
-    {#if !readonly}
-        <Footer
-            {chat}
-            {attachment}
-            {editingEvent}
-            {replyingTo}
-            {textContent}
-            user={$currentUserStore}
-            preview={false}
-            lapsed={false}
-            mode={"thread"}
-            {blocked}
-            {messageContext}
-            {onCancelReply}
-            onClearAttachment={clearAttachment}
-            onCancelEdit={cancelEditEvent}
-            {onSetTextContent}
-            {onStartTyping}
-            {onStopTyping}
-            {onFileSelected}
-            {onSendMessage}
-            onMakeMeme={makeMeme}
-            onTokenTransfer={tokenTransfer}
-            onCreateP2PSwapMessage={createP2PSwapMessage} />
-    {/if}
-</Container>
diff --git a/frontend/app/src/components_mobile/home/thread/ThreadHeader.svelte b/frontend/app/src/components_mobile/home/thread/ThreadHeader.svelte
deleted file mode 100644
index 49c6b7aea1..0000000000
--- a/frontend/app/src/components_mobile/home/thread/ThreadHeader.svelte
+++ /dev/null
@@ -1,93 +0,0 @@
-<script lang="ts">
-    import { Avatar, SectionHeader } from "component-lib";
-    import type {
-        ChatIdentifier,
-        ChatSummary,
-        EventWrapper,
-        Message,
-        OpenChat,
-        TypersByKey,
-    } from "@client";
-    import {
-        allUsersStore,
-        byContext,
-        selectedCommunitySummaryStore,
-        UserStatus,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import { now } from "../../../stores/time";
-    import Typing from "@shared_components/Typing.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        chatSummary: ChatSummary;
-        rootEvent: EventWrapper<Message>;
-        threadRootMessageIndex: number;
-        onCloseThread: (id: ChatIdentifier) => void;
-    }
-
-    let { chatSummary, rootEvent, threadRootMessageIndex, onCloseThread }: Props = $props();
-
-    function close() {
-        onCloseThread(chatSummary.id);
-    }
-
-    function normaliseChatSummary(_now: number, chatSummary: ChatSummary, typing: TypersByKey) {
-        const someoneTyping = client.getTypingString(
-            $_,
-            $allUsersStore,
-            { chatId: chatSummary.id, threadRootMessageIndex },
-            typing,
-        );
-
-        const msgTxt = rootEvent ? client.getContentAsText($_, rootEvent.event.content) : "";
-        const subtext = someoneTyping ?? `${$_("thread.title")}: ${msgTxt}`;
-        if (chatSummary.kind === "direct_chat") {
-            return {
-                title: $allUsersStore.get(chatSummary.them.userId)?.username,
-                avatarUrl: client.userAvatarUrl($allUsersStore.get(chatSummary.them.userId)),
-                userId: chatSummary.them.userId,
-                subtext,
-                typing: someoneTyping !== undefined,
-            };
-        }
-        return {
-            title: chatSummary.name,
-            userStatus: UserStatus.None,
-            avatarUrl: client.groupAvatarUrl(chatSummary, $selectedCommunitySummaryStore),
-            userId: undefined,
-            subtext,
-            typing: someoneTyping !== undefined,
-        };
-    }
-
-    function onKeyDown(ev: KeyboardEvent) {
-        if (ev.key === "Escape") {
-            if (!document.getElementById("portal-element")) {
-                close();
-            }
-        }
-    }
-    let chat = $derived(normaliseChatSummary($now, chatSummary, $byContext));
-</script>
-
-<svelte:window onkeydown={onKeyDown} />
-
-<SectionHeader onBack={close}>
-    {#snippet avatar()}
-        <Avatar url={chat.avatarUrl} size={"lg"} name={chat.title} />
-    {/snippet}
-    {#snippet title()}
-        {chat.title}
-    {/snippet}
-    {#snippet subtitle()}
-        {#if chat.typing}
-            {chat.subtext} <Typing />
-        {:else}
-            <Markdown text={chat.subtext} oneLine suppressLinks />
-        {/if}
-    {/snippet}
-</SectionHeader>
diff --git a/frontend/app/src/components_mobile/home/thread/ThreadPreview.svelte b/frontend/app/src/components_mobile/home/thread/ThreadPreview.svelte
deleted file mode 100644
index 3f6f53c669..0000000000
--- a/frontend/app/src/components_mobile/home/thread/ThreadPreview.svelte
+++ /dev/null
@@ -1,307 +0,0 @@
-<script lang="ts">
-    import { toastStore } from "@src/stores/toast";
-    import {
-        Avatar,
-        BodySmall,
-        ColourVars,
-        CommonButton,
-        Container,
-        CountBadge,
-        IconButton,
-        MenuItem,
-        MenuTrigger,
-        Title,
-    } from "component-lib";
-    import {
-        allUsersStore,
-        chatSummariesStore,
-        currentUserIdStore,
-        type EventWrapper,
-        type Message,
-        messagesRead,
-        type MultiUserChat,
-        OpenChat,
-        selectedCommunitySummaryStore,
-        type ThreadPreview,
-    } from "@client";
-    import { getContext, onMount } from "svelte";
-    import { _ } from "svelte-i18n";
-    import DotsVertical from "svelte-material-icons/DotsVertical.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Translatable from "../../Translatable.svelte";
-    import ChatMessage from "../ChatMessage.svelte";
-    import IntersectionObserverComponent from "../IntersectionObserver.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        thread: ThreadPreview;
-        observer: IntersectionObserver;
-    }
-
-    let { thread, observer }: Props = $props();
-
-    let expanded = $state(false);
-    let missingMessages = $derived(thread.totalReplies - thread.latestReplies.length);
-    let threadRootMessageIndex = $derived(thread.rootMessage.event.messageIndex);
-    let chat = $derived($chatSummariesStore.get(thread.chatId) as MultiUserChat | undefined);
-    let syncDetails = $derived(
-        chat?.membership?.latestThreads?.find(
-            (t) => t.threadRootMessageIndex === threadRootMessageIndex,
-        ),
-    );
-    let unreadCount = $derived(
-        syncDetails
-            ? client.unreadThreadMessageCount(
-                  thread.chatId,
-                  threadRootMessageIndex,
-                  syncDetails.latestMessageIndex,
-              )
-            : 0,
-    );
-    let chatData = $derived({
-        name: chat?.name,
-        avatarUrl: client.groupAvatarUrl(chat, $selectedCommunitySummaryStore),
-    });
-
-    function markAllRead() {
-        if (chat !== undefined && syncDetails !== undefined) {
-            const context = {
-                chatId: chat.id,
-                threadRootMessageIndex,
-            };
-            messagesRead.markReadUpTo(context, syncDetails?.latestMessageIndex);
-        }
-    }
-
-    onMount(() => {
-        return messagesRead.subscribe(() => {
-            if (syncDetails !== undefined) {
-                unreadCount = client.unreadThreadMessageCount(
-                    thread.chatId,
-                    threadRootMessageIndex,
-                    syncDetails.latestMessageIndex,
-                );
-            }
-        });
-    });
-
-    let grouped = $derived(client.groupBySender(thread.latestReplies));
-
-    function lastMessageIndex(events: EventWrapper<Message>[]): number | undefined {
-        for (let i = events.length - 1; i >= 0; i--) {
-            const evt = events[i].event;
-            if (evt.kind === "message") {
-                return evt.messageIndex;
-            }
-        }
-        return undefined;
-    }
-
-    function isIntersecting() {
-        // if we can see *all* of the unread messages in this thread, then mark it as read.
-        if (unreadCount > 0 && unreadCount < thread.latestReplies.length + 1) {
-            const lastMsgIdx = lastMessageIndex(thread.latestReplies);
-            if (lastMsgIdx !== undefined && chat !== undefined) {
-                client.markThreadRead(chat.id, threadRootMessageIndex, lastMsgIdx);
-            }
-        }
-    }
-
-    function clickedThread() {
-        if (expanded) {
-            selectThread();
-        } else {
-            expanded = true;
-        }
-    }
-
-    function selectThread() {
-        /**
-         * Note that we are deliberately not changing the route here. This is kind of
-         * peaking a thread, rather than loading it.
-         * This *should* make loading the thread faster because we don't load the chat and its
-         * messages *as well*.
-         */
-        client.openThread(thread.chatId, thread.rootMessage, false);
-    }
-
-    function unfollow() {
-        client.followThread(thread.chatId, thread.rootMessage.event, false).then((success) => {
-            if (!success) {
-                toastStore.showFailureToast(i18nKey("unfollowThreadFailed"));
-            }
-        });
-    }
-</script>
-
-{#if chat !== undefined}
-    <Container direction={"vertical"}>
-        <Container
-            background={ColourVars.background1}
-            padding={["lg", "md"]}
-            onClick={clickedThread}
-            mainAxisAlignment={"spaceBetween"}
-            crossAxisAlignment={"center"}
-            gap={"md"}>
-            <div class="avatar">
-                <Avatar url={chatData.avatarUrl} size={"lg"} />
-            </div>
-            <Container width={"fill"} gap={"xxs"} direction={"vertical"}>
-                <Container width={"hug"} gap={"sm"}>
-                    <Title ellipsisTruncate fontWeight={"semi-bold"}>
-                        {(chat.kind === "group_chat" || chat.kind === "channel") && chat.name}
-                    </Title>
-                </Container>
-                <Container gap={"xs"} mainAxisAlignment={"spaceBetween"} crossAxisAlignment={"end"}>
-                    <BodySmall ellipsisTruncate colour={"textSecondary"}>
-                        <Markdown
-                            text={client.getContentAsText($_, thread.rootMessage.event.content)}
-                            oneLine
-                            suppressLinks />
-                    </BodySmall>
-                </Container>
-            </Container>
-            {#if unreadCount > 0}
-                <CountBadge>{unreadCount > 999 ? "999+" : unreadCount}</CountBadge>
-            {/if}
-            <MenuTrigger position={"bottom"} align={"end"}>
-                <IconButton padding={["sm", "xs", "sm", "zero"]} size={"md"}>
-                    {#snippet icon(color)}
-                        <DotsVertical {color} />
-                    {/snippet}
-                </IconButton>
-                {#snippet menuItems()}
-                    <MenuItem onclick={unfollow}>
-                        <Translatable resourceKey={i18nKey("unfollowThread")} />
-                    </MenuItem>
-                    <MenuItem onclick={markAllRead}>
-                        <Translatable resourceKey={i18nKey("Mark all as read")} />
-                    </MenuItem>
-                {/snippet}
-            </MenuTrigger>
-        </Container>
-        {#if expanded}
-            <IntersectionObserverComponent onIntersecting={isIntersecting}>
-                <Container gap={"sm"} padding={"md"} direction={"vertical"}>
-                    <ChatMessage
-                        sender={$allUsersStore.get(thread.rootMessage.event.sender)}
-                        focused={false}
-                        {observer}
-                        accepted
-                        confirmed
-                        failed={false}
-                        senderTyping={false}
-                        readByMe
-                        chatId={thread.chatId}
-                        chatType={chat.kind}
-                        me={thread.rootMessage.event.sender === $currentUserIdStore}
-                        first
-                        last
-                        readonly
-                        threadRootMessage={thread.rootMessage.event}
-                        pinned={false}
-                        supportsEdit={false}
-                        supportsReply={false}
-                        canPin={false}
-                        canBlockUsers={false}
-                        canDelete={false}
-                        canQuoteReply={false}
-                        canReact={false}
-                        canStartThread={false}
-                        publicGroup={chat.kind === "group_chat" && chat.public}
-                        eventIndex={thread.rootMessage.index}
-                        timestamp={thread.rootMessage.timestamp}
-                        expiresAt={thread.rootMessage.expiresAt}
-                        dateFormatter={(date) => client.toDatetimeString(date)}
-                        msg={thread.rootMessage.event}
-                        senderContext={thread.rootMessage.event.senderContext}
-                        disablePan={true} />
-                    {#if missingMessages > 0}
-                        <BodySmall
-                            height={{ size: "2rem" }}
-                            colour={"textSecondary"}
-                            align={"center"}
-                            fontWeight={"bold"}>
-                            <Translatable
-                                resourceKey={i18nKey("thread.moreMessages", {
-                                    number: missingMessages.toString(),
-                                })} />
-                        </BodySmall>
-                    {/if}
-                    {#each grouped as userGroup}
-                        {#each userGroup as evt, i (evt.event.messageId)}
-                            <ChatMessage
-                                sender={$allUsersStore.get(evt.event.sender)}
-                                focused={false}
-                                {observer}
-                                accepted
-                                confirmed
-                                failed={false}
-                                senderTyping={false}
-                                readByMe
-                                chatId={thread.chatId}
-                                chatType={chat.kind}
-                                me={evt.event.sender === $currentUserIdStore}
-                                first={i === 0}
-                                last={i === userGroup.length - 1}
-                                readonly
-                                threadRootMessage={thread.rootMessage.event}
-                                pinned={false}
-                                supportsEdit={false}
-                                supportsReply={false}
-                                canPin={false}
-                                canBlockUsers={false}
-                                canDelete={false}
-                                canQuoteReply={false}
-                                canReact={false}
-                                canStartThread={false}
-                                publicGroup={chat.kind === "group_chat" && chat.public}
-                                eventIndex={evt.index}
-                                timestamp={evt.timestamp}
-                                expiresAt={evt.expiresAt}
-                                dateFormatter={(date) => client.toDatetimeString(date)}
-                                msg={evt.event}
-                                senderContext={evt.event.senderContext}
-                                disablePan={true} />
-                        {/each}
-                    {/each}
-
-                    <Container mainAxisAlignment={"end"}>
-                        <CommonButton mode={"active"} size={"medium"} onClick={selectThread}>
-                            <Translatable resourceKey={i18nKey("View thread")} />
-                        </CommonButton>
-                    </Container>
-                </Container>
-            </IntersectionObserverComponent>
-        {/if}
-    </Container>
-{/if}
-
-<style lang="scss">
-    :global(.threads .link-button) {
-        color: var(--timeline-txt);
-        @include font(book, normal, fs-90);
-        display: block;
-        text-align: right;
-    }
-
-    :global(.threads .card.bordered) {
-        border: none;
-        border-top: 1px solid var(--bd);
-    }
-
-    .separator {
-        padding: $sp2;
-        background-color: var(--timeline-bg);
-        margin: $sp4 auto;
-        text-align: center;
-        color: var(--timeline-txt);
-        @include font(book, normal, fs-90);
-    }
-
-    .unfollow {
-        padding: 0 $sp2;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/thread/ThreadPreviews.svelte b/frontend/app/src/components_mobile/home/thread/ThreadPreviews.svelte
deleted file mode 100644
index 9d89a16745..0000000000
--- a/frontend/app/src/components_mobile/home/thread/ThreadPreviews.svelte
+++ /dev/null
@@ -1,93 +0,0 @@
-<script lang="ts">
-    import { i18nKey } from "@src/i18n/i18n";
-    import { toastStore } from "@src/stores/toast";
-    import { Container } from "component-lib";
-    import {
-        chatListScopeStore,
-        debouncedDerived,
-        emptyCombinedUnreadCounts,
-        numberOfThreadsStore,
-        threadsByChatStore,
-        unreadCommunityChannelCountsStore,
-        unreadDirectAndGroupCountsStore,
-        unreadFavouriteCountsStore,
-        type OpenChat,
-    } from "@client";
-    import { getContext } from "svelte";
-    import FancyLoader from "../../icons/FancyLoader.svelte";
-    import VirtualList from "@shared_components/VirtualList.svelte";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
-    import ThreadPreviewComponent from "./ThreadPreview.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    let observer: IntersectionObserver = new IntersectionObserver(() => {});
-    let loading = $state(true);
-    let initialised = $state(false);
-    let spinner = $derived(loading && !initialised);
-
-    let threads = $derived.by(
-        debouncedDerived(() => [$threadsByChatStore], loadThreadPreviews, 300, []),
-    );
-
-    let unread = $derived.by(() => {
-        switch ($chatListScopeStore.kind) {
-            case "chats": {
-                return $unreadDirectAndGroupCountsStore.threads;
-            }
-            case "favourite": {
-                return $unreadFavouriteCountsStore.threads;
-            }
-            case "community": {
-                return (
-                    $unreadCommunityChannelCountsStore.get($chatListScopeStore.id) ??
-                    emptyCombinedUnreadCounts()
-                ).threads;
-            }
-            default:
-                return emptyCombinedUnreadCounts().threads;
-        }
-    });
-    let muted = $derived(!unread.mentions && unread.unmuted <= 0);
-    let count = $derived(muted ? unread.muted : unread.unmuted);
-
-    let subtitle = $derived(
-        count > 0
-            ? i18nKey(`Unread messages in ${count} thread(s)`)
-            : i18nKey(`Messages in ${$numberOfThreadsStore} thread(s)`),
-    );
-
-    async function loadThreadPreviews() {
-        loading = true;
-        try {
-            return client.threadPreviews($threadsByChatStore);
-        } catch (_) {
-            toastStore.showFailureToast(i18nKey("thread.previewFailure"));
-            return [];
-        } finally {
-            loading = false;
-        }
-    }
-</script>
-
-<SlidingPageContent title={i18nKey("Threads")} {subtitle}>
-    <Container
-        mainAxisAlignment={spinner ? "center" : undefined}
-        crossAxisAlignment={spinner ? "center" : undefined}
-        supplementalClass={"threads"}
-        width={"fill"}
-        height={"fill"}
-        direction={"vertical"}>
-        {#if loading && !initialised}
-            <FancyLoader size={"3rem"} />
-        {:else}
-            <VirtualList
-                keyFn={(e) => `${e.rootMessage.index}_${e.rootMessage.event.messageId}`}
-                items={threads}>
-                {#snippet children(thread)}
-                    <ThreadPreviewComponent {observer} {thread} />
-                {/snippet}
-            </VirtualList>
-        {/if}
-    </Container>
-</SlidingPageContent>
diff --git a/frontend/app/src/components_mobile/home/upgrade/Expiry.svelte b/frontend/app/src/components_mobile/home/upgrade/Expiry.svelte
deleted file mode 100644
index 45ff430dda..0000000000
--- a/frontend/app/src/components_mobile/home/upgrade/Expiry.svelte
+++ /dev/null
@@ -1,89 +0,0 @@
-<script lang="ts">
-    import {
-        diamondStatusStore,
-        type DiamondMembershipDuration,
-        type DiamondMembershipStatus,
-        type OpenChat,
-    } from "@client";
-    import { getContext, untrack } from "svelte";
-    import { _, locale } from "svelte-i18n";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { now500 } from "../../../stores/time";
-    import Translatable from "../../Translatable.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        extendBy?: DiamondMembershipDuration | undefined;
-    }
-
-    let { extendBy = undefined }: Props = $props();
-
-    let expiresIn: string | undefined = $state(undefined);
-    let expiresAt: string | undefined = $state(undefined);
-    let extendTo: string | undefined = $state(undefined);
-
-    function durationToMs(duration: DiamondMembershipDuration | undefined): number | undefined {
-        if (duration !== undefined && duration !== "lifetime") {
-            return client.diamondDurationToMs(duration);
-        }
-        return undefined;
-    }
-    let extendByMs = $derived(durationToMs(extendBy));
-    $effect(() => {
-        refresh($diamondStatusStore, $now500, $locale);
-    });
-
-    function refresh(
-        status: DiamondMembershipStatus,
-        now: number,
-        locale: string | null | undefined,
-    ) {
-        untrack(() => {
-            if (status.kind === "active") {
-                expiresIn = client.diamondExpiresIn(now, locale);
-
-                if (extendBy !== "lifetime") {
-                    const expiresAtMs = Number(status.expiresAt);
-                    expiresAt = client.toDateString(new Date(expiresAtMs));
-                    if (extendByMs !== undefined) {
-                        extendTo = client.toDateString(new Date(expiresAtMs + extendByMs));
-                    }
-                } else {
-                    extendTo = $_("upgrade.lifetime");
-                }
-            }
-        });
-    }
-</script>
-
-{#if $diamondStatusStore.kind !== "inactive"}
-    <p class="expiry">
-        <span class="msg">
-            <Translatable resourceKey={i18nKey("upgrade.expiryMessage", { relative: expiresIn })} />
-        </span>
-        <span class="date">
-            ({expiresAt}).
-        </span>
-
-        {#if extendTo !== undefined}
-            <span class="msg">
-                {$_("upgrade.extendTo")}
-            </span>
-            <span class="date">
-                {extendTo}.
-            </span>
-        {/if}
-    </p>
-{/if}
-
-<style lang="scss">
-    .expiry {
-        @include font(book, normal, fs-90);
-        margin-bottom: $sp4;
-
-        .date {
-            color: var(--primary);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/upgrade/Feature.svelte b/frontend/app/src/components_mobile/home/upgrade/Feature.svelte
deleted file mode 100644
index 4ca62ee916..0000000000
--- a/frontend/app/src/components_mobile/home/upgrade/Feature.svelte
+++ /dev/null
@@ -1,81 +0,0 @@
-<script lang="ts">
-    import type { ResourceKey } from "@client";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Translatable from "../../Translatable.svelte";
-
-    import { BodySmall, Caption, ColourVars, Container } from "component-lib";
-    import type { Snippet } from "svelte";
-    import MoreInfo from "../../InfoIcon.svelte";
-
-    interface Props {
-        comingSoon?: boolean;
-        freeInfo?: ResourceKey | undefined;
-        diamondInfo?: ResourceKey | undefined;
-        title?: Snippet;
-        free?: Snippet<[string]>;
-        diamond?: Snippet<[string]>;
-        Icon?: any;
-        last?: boolean;
-    }
-
-    let {
-        comingSoon = false,
-        freeInfo = undefined,
-        diamondInfo = undefined,
-        title,
-        free,
-        diamond,
-        Icon,
-        last = false,
-    }: Props = $props();
-</script>
-
-<Container height={{ size: "2.5rem" }} supplementalClass={"diamond_feature"}>
-    <Container
-        crossAxisAlignment={"center"}
-        gap={"sm"}
-        padding={["sm", "zero", "sm", "zero"]}
-        mainAxisAlignment={"center"}
-        width={{ share: 1 }}>
-        {#if Icon}
-            <Icon color={ColourVars.textSecondary} />
-        {/if}
-        <BodySmall ellipsisTruncate>
-            {@render title?.()}
-            {#if comingSoon}
-                <span class="soon"
-                    >(<Translatable resourceKey={i18nKey("upgrade.comingSoon")} />)</span>
-            {/if}
-        </BodySmall>
-    </Container>
-    <Container
-        padding={["sm", "zero", "sm", "zero"]}
-        crossAxisAlignment={"center"}
-        mainAxisAlignment={"center"}
-        height={"fill"}
-        width={{ share: 1 }}>
-        <Caption width={"hug"} align={"center"} colour={"textSecondary"}>
-            {@render free?.(ColourVars.textSecondary)}
-        </Caption>
-        {#if freeInfo !== undefined}
-            <MoreInfo color={ColourVars.textSecondary}
-                ><Translatable resourceKey={freeInfo} /></MoreInfo>
-        {/if}
-    </Container>
-    <Container
-        borderRadius={last ? ["zero", "zero", "md", "md"] : undefined}
-        padding={["sm", "zero", "sm", "zero"]}
-        mainAxisAlignment={"center"}
-        crossAxisAlignment={"center"}
-        height={"fill"}
-        background={ColourVars.background2}
-        width={{ share: 1 }}>
-        <Caption colour={"primary"} width={"hug"} align={"center"}>
-            {@render diamond?.(ColourVars.primary)}
-        </Caption>
-        {#if diamondInfo !== undefined}
-            <MoreInfo color={ColourVars.primary}
-                ><Translatable resourceKey={diamondInfo} /></MoreInfo>
-        {/if}
-    </Container>
-</Container>
diff --git a/frontend/app/src/components_mobile/home/upgrade/Features.svelte b/frontend/app/src/components_mobile/home/upgrade/Features.svelte
deleted file mode 100644
index 6c1404a0fa..0000000000
--- a/frontend/app/src/components_mobile/home/upgrade/Features.svelte
+++ /dev/null
@@ -1,259 +0,0 @@
-<script lang="ts">
-    import { Body, ColourVars, Container } from "component-lib";
-    import Gifs from "svelte-material-icons/AccountBoxOutline.svelte";
-    import CreateCommunities from "svelte-material-icons/AccountGroupOutline.svelte";
-    import Groups from "svelte-material-icons/AccountMultiple.svelte";
-    import Notifications from "svelte-material-icons/BellOutline.svelte";
-    import Bitcoin from "svelte-material-icons/Bitcoin.svelte";
-    import Polls from "svelte-material-icons/ChartBoxOutline.svelte";
-    import DirectChats from "svelte-material-icons/ChatOutline.svelte";
-    import Check from "svelte-material-icons/CheckBold.svelte";
-    import Reminders from "svelte-material-icons/ClockPlusOutline.svelte";
-    import Storage from "svelte-material-icons/ContentSaveOutline.svelte";
-    import Diamond from "svelte-material-icons/DiamondOutline.svelte";
-    import MediaMessage from "svelte-material-icons/ImageMultipleOutline.svelte";
-    import TextMessage from "svelte-material-icons/MessageTextOutline.svelte";
-    import Airdrops from "svelte-material-icons/PartyPopper.svelte";
-    import Gated from "svelte-material-icons/ShieldLockOutline.svelte";
-    import Swap from "svelte-material-icons/SwapVerticalVariant.svelte";
-    import Reactions from "svelte-material-icons/ThumbUpOutline.svelte";
-    import Translate from "svelte-material-icons/Translate.svelte";
-    import Video from "svelte-material-icons/VideoOutline.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Translatable from "../../Translatable.svelte";
-    import Feature from "./Feature.svelte";
-
-    let iconSize = "1rem";
-</script>
-
-<Container padding={["xl", "md", "zero", "md"]}>
-    <Container height={"fill"} padding={"md"} mainAxisAlignment={"center"} width={{ share: 1 }}>
-        <span></span>
-    </Container>
-    <Container height={"fill"} padding={"md"} mainAxisAlignment={"center"} width={{ share: 1 }}>
-        <Body fontWeight={"bold"} width={"hug"}>
-            <Translatable resourceKey={i18nKey("upgrade.free")} />
-        </Body>
-    </Container>
-    <Container
-        height={"fill"}
-        padding={"md"}
-        background={ColourVars.background2}
-        borderRadius={["md", "md", "zero", "zero"]}
-        mainAxisAlignment={"center"}
-        width={{ share: 1 }}>
-        <Diamond size={"1.5rem"} color={ColourVars.primary} />
-    </Container>
-</Container>
-
-<Container direction={"vertical"} padding={["zero", "md"]}>
-    <Feature Icon={TextMessage}>
-        {#snippet title()}
-            <Translatable resourceKey={i18nKey("upgrade.textMessages")} />
-        {/snippet}
-        {#snippet free(color)}
-            <Check size={iconSize} {color} />
-        {/snippet}
-        {#snippet diamond(color)}
-            <Check size={iconSize} {color} />
-        {/snippet}
-    </Feature>
-
-    <Feature Icon={Gifs}>
-        {#snippet title()}
-            <Translatable resourceKey={i18nKey("upgrade.giphys")} />
-        {/snippet}
-        {#snippet free(color)}
-            <Check size={iconSize} {color} />
-        {/snippet}
-        {#snippet diamond(color)}
-            <Check size={iconSize} {color} />
-        {/snippet}
-    </Feature>
-
-    <Feature Icon={Reactions}>
-        {#snippet title()}
-            <Translatable resourceKey={i18nKey("upgrade.reactions")} />
-        {/snippet}
-        {#snippet free(color)}
-            <Check size={iconSize} {color} />
-        {/snippet}
-        {#snippet diamond(color)}
-            <Check size={iconSize} {color} />
-        {/snippet}
-    </Feature>
-
-    <Feature Icon={Polls}>
-        {#snippet title()}
-            <Translatable resourceKey={i18nKey("upgrade.polls")} />
-        {/snippet}
-        {#snippet free(color)}
-            <Check size={iconSize} {color} />
-        {/snippet}
-        {#snippet diamond(color)}
-            <Check size={iconSize} {color} />
-        {/snippet}
-    </Feature>
-
-    <Feature Icon={Reminders}>
-        {#snippet title()}
-            <Translatable resourceKey={i18nKey("upgrade.reminders")} />
-        {/snippet}
-        {#snippet free(color)}
-            <Check size={iconSize} {color} />
-        {/snippet}
-        {#snippet diamond(color)}
-            <Check size={iconSize} {color} />
-        {/snippet}
-    </Feature>
-
-    <Feature Icon={Bitcoin}>
-        {#snippet title()}
-            <Translatable resourceKey={i18nKey("upgrade.crypto")} />
-        {/snippet}
-        {#snippet free(color)}
-            <Check size={iconSize} {color} />
-        {/snippet}
-        {#snippet diamond(color)}
-            <Check size={iconSize} {color} />
-        {/snippet}
-    </Feature>
-
-    <Feature Icon={Video}>
-        {#snippet title()}
-            <Translatable resourceKey={i18nKey("upgrade.videoCalls")} />
-        {/snippet}
-        {#snippet diamond(color)}
-            <Check size={iconSize} {color} />
-        {/snippet}
-    </Feature>
-
-    <Feature Icon={Notifications}>
-        {#snippet title()}
-            <Translatable resourceKey={i18nKey("upgrade.notifications")} />
-        {/snippet}
-        {#snippet free()}
-            <Translatable resourceKey={i18nKey("Mobile & Desktop")} />
-        {/snippet}
-        {#snippet diamond()}
-            <Translatable resourceKey={i18nKey("Mobile & Desktop")} />
-        {/snippet}
-    </Feature>
-
-    <Feature
-        Icon={MediaMessage}
-        diamondInfo={i18nKey("upgrade.mediaLimits", { image: "5mb", video: "50mb" })}
-        freeInfo={i18nKey("upgrade.mediaLimits", { image: "1mb", video: "5mb" })}>
-        {#snippet title()}
-            <Translatable resourceKey={i18nKey("upgrade.mediaMessages")} />
-        {/snippet}
-        {#snippet free()}
-            <Translatable resourceKey={i18nKey("upgrade.freeMediaMessages")} />
-        {/snippet}
-        {#snippet diamond()}
-            <Translatable resourceKey={i18nKey("upgrade.diamondMediaMessages")} />
-        {/snippet}
-    </Feature>
-
-    <Feature
-        Icon={Storage}
-        diamondInfo={i18nKey("upgrade.diamondStorageLimit")}
-        freeInfo={i18nKey("upgrade.freeStorageLimit")}>
-        {#snippet title()}
-            <Translatable resourceKey={i18nKey("upgrade.storage")} />
-        {/snippet}
-        {#snippet free()}
-            <Translatable resourceKey={i18nKey("upgrade.freeStorage")} />
-        {/snippet}
-        {#snippet diamond()}
-            <Translatable resourceKey={i18nKey("upgrade.diamondStorage")} />
-        {/snippet}
-    </Feature>
-
-    <Feature Icon={CreateCommunities}>
-        {#snippet title()}
-            <Translatable resourceKey={i18nKey("upgrade.createCommunities")} />
-        {/snippet}
-        {#snippet diamond(color)}
-            <Check size={iconSize} {color} />
-        {/snippet}
-    </Feature>
-
-    <Feature Icon={DirectChats}>
-        {#snippet title()}
-            <Translatable resourceKey={i18nKey("upgrade.directChats")} />
-        {/snippet}
-        {#snippet free(color)}
-            <Check size={iconSize} {color} />
-        {/snippet}
-        {#snippet diamond(color)}
-            <Check size={iconSize} {color} />
-        {/snippet}
-    </Feature>
-
-    <Feature Icon={Groups}>
-        {#snippet title()}
-            <Translatable resourceKey={i18nKey("upgrade.privateGroups")} />
-        {/snippet}
-        {#snippet free()}
-            <Translatable resourceKey={i18nKey("upgrade.freePrivateGroups")} />
-        {/snippet}
-        {#snippet diamond()}
-            <Translatable resourceKey={i18nKey("upgrade.diamondPrivateGroups")} />
-        {/snippet}
-    </Feature>
-
-    <Feature Icon={Groups}>
-        {#snippet title()}
-            <Translatable resourceKey={i18nKey("upgrade.publicGroups")} />
-        {/snippet}
-        {#snippet diamond()}
-            <Translatable resourceKey={i18nKey("upgrade.diamondPublicGroups")} />
-        {/snippet}
-    </Feature>
-
-    <Feature Icon={Gated}>
-        {#snippet title()}
-            <Translatable resourceKey={i18nKey("upgrade.gatedGroups")} />
-        {/snippet}
-        {#snippet diamond(color)}
-            <Check size={iconSize} {color} />
-        {/snippet}
-    </Feature>
-
-    <Feature Icon={Translate}>
-        {#snippet title()}
-            <Translatable resourceKey={i18nKey("upgrade.translations")} />
-        {/snippet}
-        {#snippet diamond(color)}
-            <Check size={iconSize} {color} />
-        {/snippet}
-    </Feature>
-
-    <Feature Icon={Swap}>
-        {#snippet title()}
-            <Translatable resourceKey={i18nKey("upgrade.p2pSwap")} />
-        {/snippet}
-        {#snippet diamond(color)}
-            <Check size={iconSize} {color} />
-        {/snippet}
-    </Feature>
-
-    <Feature Icon={Diamond}>
-        {#snippet title()}
-            <Translatable resourceKey={i18nKey("upgrade.diamondBadge")} />
-        {/snippet}
-        {#snippet diamond(color)}
-            <Check size={iconSize} {color} />
-        {/snippet}
-    </Feature>
-
-    <Feature Icon={Airdrops} last diamondInfo={i18nKey("upgrade.airdropsInfo")}>
-        {#snippet title()}
-            <Translatable resourceKey={i18nKey("upgrade.airdrops")} />
-        {/snippet}
-        {#snippet diamond()}
-            <Translatable resourceKey={i18nKey("upgrade.eligible")} />
-        {/snippet}
-    </Feature>
-</Container>
diff --git a/frontend/app/src/components_mobile/home/upgrade/Payment.svelte b/frontend/app/src/components_mobile/home/upgrade/Payment.svelte
deleted file mode 100644
index 36c1c3b322..0000000000
--- a/frontend/app/src/components_mobile/home/upgrade/Payment.svelte
+++ /dev/null
@@ -1,500 +0,0 @@
-<script lang="ts">
-    import MulticolourText from "@src/components_mobile/MulticolourText.svelte";
-    import { now500 } from "@src/stores/time";
-    import {
-        Body,
-        BodySmall,
-        Button,
-        ColourVars,
-        Column,
-        CommonButton,
-        defaultBackgroundGradient,
-        Row,
-        Sheet,
-        StatusCard,
-        Switch,
-        transition,
-        type ColourVarKeys,
-        type Padding,
-        type SizeMode,
-    } from "component-lib";
-    import {
-        diamondStatusStore,
-        E8S_PER_TOKEN,
-        enhancedCryptoLookup,
-        LEDGER_CANISTER_CHAT,
-        LEDGER_CANISTER_ICP,
-        type DiamondMembershipDuration,
-        type DiamondMembershipFees,
-        type Level,
-        type OpenChat,
-        type ResourceKey,
-    } from "@client";
-    import { getContext, onMount } from "svelte";
-    import { _, locale } from "svelte-i18n";
-    import Warning from "svelte-material-icons/AlertRhombusOutline.svelte";
-    import Right from "svelte-material-icons/ChevronRight.svelte";
-    import Diamond from "svelte-material-icons/DiamondOutline.svelte";
-    import Lifetime from "svelte-material-icons/DiamondStone.svelte";
-    import QrCode from "svelte-material-icons/Qrcode.svelte";
-    import Refresh from "svelte-material-icons/Refresh.svelte";
-    import { i18nKey, interpolate } from "../../../i18n/i18n";
-    import { toastStore } from "../../../stores/toast";
-    import type { RemoteData } from "../../../utils/remoteData";
-    import Setting from "../../Setting.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import AccountInfo from "../AccountInfo.svelte";
-    import CryptoSelector from "../CryptoSelector.svelte";
-    import { TokenState } from "../wallet/walletState.svelte";
-    import SelectMembershipHeader from "./SelectMembershipHeader.svelte";
-
-    type Step = "choose" | "confirm";
-
-    interface Props {
-        lifetime?: boolean;
-        onSuccess?: (proof: string) => void;
-        padding?: Padding;
-        height?: SizeMode;
-        joining?: Level;
-        onCancel?: () => void;
-    }
-
-    let {
-        lifetime = false,
-        onSuccess,
-        padding = ["xxl", "xl"],
-        onCancel,
-        height = { size: "100%" },
-    }: Props = $props();
-
-    let confirming = $state(false);
-
-    type FeeKey = keyof Omit<DiamondMembershipFees, "token">;
-    type FeeData = RemoteData<Record<"ICP" | "CHAT", DiamondMembershipFees>, string>;
-
-    const client = getContext<OpenChat>("client");
-
-    const options: Option[] = [
-        {
-            index: 0,
-            duration: i18nKey("upgrade.oneMonth"),
-            fee: "oneMonth",
-            enabled: !lifetime,
-        },
-        {
-            index: 1,
-            duration: i18nKey("upgrade.threeMonths"),
-            fee: "threeMonths",
-            enabled: !lifetime,
-        },
-        {
-            index: 2,
-            duration: i18nKey("upgrade.oneYear"),
-            fee: "oneYear",
-            enabled: !lifetime,
-        },
-        {
-            index: 3,
-            duration: i18nKey("upgrade.lifetime"),
-            fee: "lifetime",
-            enabled: true,
-        },
-    ];
-
-    let enabledOptions = $derived(options.filter((o) => o.enabled));
-    // svelte-ignore state_referenced_locally
-    let step = $state<Step>(enabledOptions.length === 1 ? "confirm" : "choose");
-
-    let autoRenew = $state(true);
-    let selectedOption: Option | undefined = $state(options[lifetime ? 3 : 0]);
-    let topup = $state(false);
-
-    let ledger: string = $state(
-        import.meta.env.OC_NODE_ENV === "production" ? LEDGER_CANISTER_CHAT : LEDGER_CANISTER_ICP,
-    );
-
-    type Option = {
-        index: number;
-        duration: ResourceKey;
-        fee: FeeKey;
-        enabled: boolean;
-    };
-
-    let diamondFees: FeeData = $state({
-        kind: "idle",
-    });
-
-    const indexToDuration: Record<number, DiamondMembershipDuration> = {
-        0: "one_month",
-        1: "three_months",
-        2: "one_year",
-        3: "lifetime",
-    };
-
-    function amount(e8s: bigint): number {
-        return Number(e8s) / E8S_PER_TOKEN;
-    }
-
-    function amountInE8s(symbol: string, fees: FeeData, option: Option | undefined): bigint {
-        if (fees.kind !== "success" || option === undefined) {
-            return 0n;
-        }
-        return fees.data[symbol as "ICP" | "CHAT"][option.fee] ?? 0n;
-    }
-
-    function confirm() {
-        confirming = true;
-        client
-            .payForDiamondMembership(
-                tokenDetails.ledger,
-                selectedDuration,
-                autoRenew && selectedDuration !== "lifetime",
-                toPayE8s,
-            )
-            .then((resp) => {
-                if (resp.kind === "success") {
-                    tokenState.refreshBalance(client);
-                    onSuccess?.(resp.proof);
-                } else {
-                    const errorKey = "upgrade.paymentFailed";
-                    toastStore.showFailureToast(i18nKey(errorKey));
-                }
-            })
-            .finally(() => (confirming = false));
-    }
-
-    onMount(() => {
-        diamondFees = { kind: "loading" };
-        client
-            .diamondMembershipFees()
-            .then((fees) => {
-                diamondFees = {
-                    kind: "success",
-                    data: client.toRecord(fees, (f) => f.token),
-                };
-            })
-            .catch((err) => {
-                diamondFees = { kind: "error", error: err };
-            });
-    });
-    let tokenDetails = $derived($enhancedCryptoLookup.get(ledger)!);
-    let tokenState = $derived(new TokenState(tokenDetails, "usd"));
-    let toPayE8s = $derived(amountInE8s(tokenDetails.symbol, diamondFees, selectedOption));
-    let toPay = $derived(amount(toPayE8s));
-    let insufficientFundsForSelectedSub = $derived(insufficientFundsForSub(selectedOption.index)); //we need to account for the fact that js cannot do maths
-    let insufficientFundsForAnySub = $derived(insufficientFundsForSub(0));
-    let insufficientFundsForAllSubs = $derived(insufficientFundsForSub(3));
-
-    let selectedDuration = $derived(indexToDuration[selectedOption?.index ?? 0] ?? "one_month");
-    let headerProps = $derived(
-        step === "choose" ? undefined : { key: i18nKey(selectedDuration), kind: selectedDuration },
-    );
-
-    function insufficientFundsForSub(index: number): boolean {
-        const toPayE8s = amountInE8s(tokenDetails.symbol, diamondFees, options[index]);
-        return toPayE8s - tokenState.remainingBalance > 0.0001;
-    }
-
-    let expiry = $derived.by(() => {
-        if ($diamondStatusStore.kind !== "active") return undefined;
-        const expiresIn = client.diamondExpiresIn($now500, $locale);
-        const expiresAtMs = Number($diamondStatusStore.expiresAt);
-        const expiresAt = client.toDateString(new Date(expiresAtMs));
-        return { expiresIn, expiresAt, expiresAtMs };
-    });
-
-    function getExtendTo({ index }: Option) {
-        if (expiry === undefined) return undefined;
-        const duration = indexToDuration[index] ?? 0;
-        if (duration === "lifetime") return `Upgrade to lifetime`;
-        const extendByMs = client.diamondDurationToMs(duration);
-        return `Extend to ${client.toDateString(new Date(expiry.expiresAtMs + extendByMs))}`;
-    }
-</script>
-
-{#snippet membershipTier(option: Option)}
-    {@const lifetime = option.index === 3}
-    {@const extendTo = getExtendTo(option)}
-    {@const insufficient = insufficientFundsForSub(option.index)}
-    {@const bg = lifetime
-        ? insufficient
-            ? ColourVars.disabledButton
-            : defaultBackgroundGradient
-        : undefined}
-    {@const txt: ColourVarKeys = lifetime ? "textOnPrimary" : (insufficient ? "disabledButton" : "textPrimary")}
-    {@const extendTxt: ColourVarKeys = lifetime ? "textOnPrimary" :(insufficient ? "disabledButton" : "textSecondary")}
-    {@const icon = lifetime
-        ? ColourVars.textOnPrimary
-        : insufficient
-          ? ColourVars.disabledButton
-          : ColourVars.textPrimary}
-    <Row
-        onClick={() => {
-            if (option.enabled) {
-                selectedOption = option;
-                if (!insufficient) {
-                    transition(["slide_left"], () => {
-                        step = "confirm";
-                    });
-                }
-            }
-        }}
-        mainAxisAlignment={"spaceBetween"}
-        crossAxisAlignment={"center"}
-        background={bg}
-        borderRadius={"md"}
-        borderWidth={lifetime ? "zero" : "thick"}
-        borderColour={insufficient ? ColourVars.disabledButton : ColourVars.primary}
-        padding={["md", "lg"]}>
-        <Column>
-            <Body fontWeight={"bold"} colour={txt} width={"hug"}>
-                <Translatable resourceKey={option.duration} />
-            </Body>
-            {#if extendTo}
-                <BodySmall fontWeight={"light"} colour={extendTxt} width={"hug"}>
-                    {extendTo}
-                </BodySmall>
-            {/if}
-        </Column>
-        <Row width={"hug"} gap={"sm"}>
-            <Body fontWeight={"bold"} colour={txt} width={"hug"}>
-                {`${amount(amountInE8s(tokenDetails.symbol, diamondFees, option))} ${
-                    tokenDetails.symbol
-                }`}
-            </Body>
-            <Right size={"1.5rem"} color={icon} />
-        </Row>
-    </Row>
-{/snippet}
-
-{#snippet selectMembershipTier()}
-    <Column gap={"sm"}>
-        <BodySmall colour={"textSecondary"}>
-            {#if expiry !== undefined}
-                <Translatable
-                    resourceKey={i18nKey("upgrade.expiryMessage", {
-                        relative: expiry.expiresIn,
-                    })} />
-            {:else}
-                <Translatable resourceKey={i18nKey("Select a membership duration")} />
-            {/if}
-        </BodySmall>
-        {#each enabledOptions as option}
-            {@render membershipTier(option)}
-        {/each}
-    </Column>
-{/snippet}
-
-<Column {height} gap={"lg"} {padding}>
-    <Column gap={"xl"}>
-        <SelectMembershipHeader extend={expiry !== undefined} duration={headerProps} />
-
-        {#if step === "confirm"}
-            {#if selectedDuration !== "lifetime"}
-                <Setting
-                    toggle={() => (autoRenew = !autoRenew)}
-                    info={"If you choose not to auto-renew, or payment cannot be taken, your account will revert to free plan. Otherwise, you will be reminded about renewal by @OpenChatBot, please make sure you have sufficient funds in your wallet."}>
-                    <Switch width={"fill"} reverse checked={autoRenew}>
-                        <Translatable resourceKey={i18nKey("upgrade.autorenew")} />
-                    </Switch>
-                </Setting>
-
-                <StatusCard
-                    background={ColourVars.background2}
-                    mode={"warning"}
-                    title={interpolate($_, i18nKey("Posted files and media"))}
-                    body={interpolate(
-                        $_,
-                        i18nKey(
-                            "If you decide not to renew your membership, files and media that you have posted may be lost.",
-                        ),
-                    )}>
-                </StatusCard>
-            {:else}
-                <Body colour={"textSecondary"}>
-                    <Translatable
-                        resourceKey={i18nKey(
-                            "Lifetime membership is our top-tier membership level that grants you access to all our features, now and in the future.",
-                        )} />
-                </Body>
-            {/if}
-
-            {#if insufficientFundsForAnySub}
-                {@render insufficientWarning()}
-            {/if}
-            {@render cryptoSelector()}
-
-            <Column
-                borderRadius={"lg"}
-                gap={"lg"}
-                padding={"lg"}
-                background={ColourVars.background2}>
-                <Row mainAxisAlignment={"spaceBetween"}>
-                    <BodySmall colour={"textSecondary"}>
-                        <Translatable resourceKey={i18nKey("Payment amount")} />
-                    </BodySmall>
-                    <Body width={"hug"} colour={"primary"} fontWeight={"bold"}>
-                        {toPay}
-                        {tokenState.symbol}
-                    </Body>
-                </Row>
-                <Row mainAxisAlignment={"spaceBetween"}>
-                    <BodySmall colour={"textSecondary"}>
-                        <Translatable resourceKey={i18nKey("OC treasury receives (100%)")} />
-                    </BodySmall>
-                    <Body width={"hug"} colour={"textPrimary"} fontWeight={"bold"}>
-                        {toPay}
-                        {tokenState.symbol}
-                    </Body>
-                </Row>
-            </Column>
-
-            <Button
-                onClick={confirm}
-                disabled={confirming || insufficientFundsForSelectedSub}
-                loading={confirming}>
-                {#snippet icon(color)}
-                    {#if selectedDuration === "lifetime"}
-                        <Lifetime {color} />
-                    {:else}
-                        <Diamond {color} />
-                    {/if}
-                {/snippet}
-                <Translatable resourceKey={i18nKey(`Confirm payment`)} />
-            </Button>
-
-            {#if step === "confirm"}
-                {#if insufficientFundsForSelectedSub}
-                    {@render refreshBalance()}
-                {:else}
-                    <CommonButton
-                        width={"fill"}
-                        size={"small_text"}
-                        onClick={() => {
-                            if (enabledOptions.length === 1) {
-                                onCancel?.();
-                            } else {
-                                transition(["fade"], () => {
-                                    step = "choose";
-                                });
-                            }
-                        }}>
-                        <Translatable resourceKey={i18nKey("back")} />
-                    </CommonButton>
-                {/if}
-            {/if}
-        {:else}
-            {#if insufficientFundsForAnySub}
-                {@render insufficientWarning()}
-            {/if}
-
-            {#if expiry !== undefined}
-                <Body colour={"textSecondary"}>
-                    <MulticolourText
-                        parts={[
-                            {
-                                text: i18nKey("Your current membership is due to expire in "),
-                                colour: "textSecondary",
-                            },
-                            {
-                                text: i18nKey(expiry.expiresIn!),
-                                colour: "primary",
-                            },
-                            {
-                                text: i18nKey(" on "),
-                                colour: "textSecondary",
-                            },
-                            {
-                                text: i18nKey(expiry.expiresAt),
-                                colour: "primary",
-                            },
-                            {
-                                text: i18nKey(
-                                    ". Any extended membership would start from that date.",
-                                ),
-                                colour: "textSecondary",
-                            },
-                        ]} />
-                </Body>
-            {/if}
-
-            {@render cryptoSelector()}
-            {@render selectMembershipTier()}
-            {#if insufficientFundsForAllSubs}
-                {@render refreshBalance()}
-            {/if}
-        {/if}
-    </Column>
-</Column>
-
-{#snippet refreshBalance()}
-    <CommonButton
-        width={"fill"}
-        mode={"active"}
-        size={"small_text"}
-        onClick={() => tokenState.refreshBalance(client)}>
-        {#snippet icon(color, size)}
-            <Refresh {color} {size} />
-        {/snippet}
-
-        <Translatable resourceKey={i18nKey(`Refresh ${tokenState.symbol} balance`)} />
-    </CommonButton>
-{/snippet}
-
-{#snippet insufficientWarning()}
-    <Row crossAxisAlignment={"center"} gap={"md"}>
-        <Warning size={"1.5rem"} color={ColourVars.warning} />
-        <BodySmall fontWeight={"bold"} colour={"warning"}>
-            <Translatable
-                resourceKey={i18nKey(
-                    `Insufficient funds! Top up your ${
-                        tokenState.symbol
-                    } account with at least ${`${toPay} ${tokenState.symbol}`} or choose a different token as payment.`,
-                )} />
-        </BodySmall>
-    </Row>
-{/snippet}
-
-{#snippet cryptoSelector()}
-    <Column gap={"sm"}>
-        <BodySmall colour={"textSecondary"}>
-            <Translatable resourceKey={i18nKey("Select token to pay with")} />
-        </BodySmall>
-
-        <Row gap={"sm"}>
-            <CryptoSelector
-                bind:ledger
-                filter={(t) => ["chat", "icp"].includes(t.symbol.toLowerCase())} />
-
-            {#if insufficientFundsForAllSubs}
-                <Column
-                    onClick={() => (topup = true)}
-                    mainAxisAlignment={"center"}
-                    crossAxisAlignment={"center"}
-                    width={{ size: "3.5rem" }}
-                    height={"fill"}
-                    borderRadius={"lg"}
-                    background={ColourVars.background2}
-                    padding={["sm", "md"]}>
-                    <QrCode size={"2rem"} color={ColourVars.textSecondary} />
-                </Column>
-            {/if}
-        </Row>
-    </Column>
-{/snippet}
-
-{#if topup}
-    <Sheet
-        onDismiss={() => {
-            tokenState.refreshBalance(client);
-            topup = false;
-        }}>
-        <Column gap={"xs"} padding={"xl"}>
-            <AccountInfo
-                background={ColourVars.background2}
-                padding={"zero"}
-                ledger={tokenState.ledger} />
-            {@render refreshBalance()}
-        </Column>
-    </Sheet>
-{/if}
diff --git a/frontend/app/src/components_mobile/home/upgrade/Upgrade.svelte b/frontend/app/src/components_mobile/home/upgrade/Upgrade.svelte
deleted file mode 100644
index a9afe87ee3..0000000000
--- a/frontend/app/src/components_mobile/home/upgrade/Upgrade.svelte
+++ /dev/null
@@ -1,139 +0,0 @@
-<script lang="ts">
-    import { disableDiamondPaymentFeature } from "@src/utils/features";
-    import {
-        Body,
-        Button,
-        ColourVars,
-        Column,
-        CommonButton,
-        Container,
-        H2,
-        Row,
-        Sheet,
-        type SwipeDirection,
-    } from "component-lib";
-    import { canExtendDiamondStore, isDiamondStore, publish } from "@client";
-    import { onMount } from "svelte";
-    import Diamond from "svelte-material-icons/DiamondOutline.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import MulticolourText from "../..//MulticolourText.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import Features from "./Features.svelte";
-    import Payment from "./Payment.svelte";
-
-    let showPayment = $state(false);
-
-    onMount(() => {
-        if ($canExtendDiamondStore && !disableDiamondPaymentFeature) {
-            showPayment = true;
-        }
-    });
-
-    function onCancel() {
-        publish("closeModalPage");
-    }
-
-    let onSwipe = $derived((dir: SwipeDirection) => {
-        if (dir === "right") {
-            onCancel();
-        }
-    });
-</script>
-
-<Container {onSwipe} background={ColourVars.background0} height={"fill"} direction={"vertical"}>
-    <Container direction={"vertical"} closeMenuOnScroll height={"fill"}>
-        <Column gap={"xl"} padding={["xxl", "xxl", "xxxl", "xxl"]} supplementalClass={"starfield"}>
-            <Column width={{ size: "80%" }} gap={"sm"}>
-                <Diamond color={ColourVars.primary} size={"4.5rem"} />
-                <H2 fontWeight={"bold"}>
-                    <MulticolourText
-                        parts={[
-                            {
-                                text: i18nKey("Explore "),
-                                colour: "textPrimary",
-                            },
-                            {
-                                text: i18nKey("OpenChat Diamond"),
-                                colour: "primary",
-                            },
-                            {
-                                text: i18nKey(" Membership"),
-                                colour: "textPrimary",
-                            },
-                        ]} />
-                </H2>
-            </Column>
-            <Body>
-                <MulticolourText
-                    parts={[
-                        {
-                            text: i18nKey("Diamond gives you "),
-                            colour: "textPrimary",
-                        },
-                        {
-                            text: i18nKey("enhanced features "),
-                            colour: "primary",
-                        },
-                        {
-                            text: i18nKey(" and valuable "),
-                            colour: "textPrimary",
-                        },
-                        {
-                            text: i18nKey("extra perks, "),
-                            colour: "primary",
-                        },
-                        {
-                            text: i18nKey(
-                                "offering a smoother, more powerful chat experience than the standard tier.",
-                            ),
-                            colour: "textPrimary",
-                        },
-                    ]} />
-            </Body>
-        </Column>
-        <Row
-            height={{ size: "4px" }}
-            background={"linear-gradient(90deg, var(--primary), var(--secondary))"}>
-            <span></span>
-        </Row>
-        <Features />
-        <div class="fade"></div>
-    </Container>
-    <Column gap={"lg"} crossAxisAlignment={"center"} padding={["lg", "xl"]}>
-        {#if !$isDiamondStore && !disableDiamondPaymentFeature}
-            <Button onClick={() => (showPayment = true)}>
-                {#snippet icon(color)}
-                    <Diamond {color} />
-                {/snippet}
-
-                <Translatable resourceKey={i18nKey("upgrade.button")} /></Button>
-        {:else if $canExtendDiamondStore && !disableDiamondPaymentFeature}
-            <Button onClick={() => (showPayment = true)}>
-                {#snippet icon(color)}
-                    <Diamond {color} />
-                {/snippet}
-                <Translatable resourceKey={i18nKey("upgrade.extendShort")} /></Button>
-        {/if}
-        <CommonButton onClick={onCancel} size={"small_text"} mode={"active"}>
-            <Translatable resourceKey={i18nKey("Go back")} />
-        </CommonButton>
-    </Column>
-</Container>
-
-{#if showPayment}
-    <Sheet onDismiss={() => (showPayment = false)}>
-        <Payment onSuccess={() => publish("closeModalStack")} />
-    </Sheet>
-{/if}
-
-<style lang="scss">
-    .fade {
-        position: sticky;
-        bottom: 0;
-        inset: auto 0 0 0;
-        flex: 0 0 3rem;
-        width: 100%;
-        pointer-events: none;
-        background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--background-1));
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/user_profile/FontSize.svelte b/frontend/app/src/components_mobile/home/user_profile/FontSize.svelte
deleted file mode 100644
index 2ac219cbde..0000000000
--- a/frontend/app/src/components_mobile/home/user_profile/FontSize.svelte
+++ /dev/null
@@ -1,81 +0,0 @@
-<script lang="ts">
-    import { Container } from "component-lib";
-    import { fontScaleStore } from "@client";
-    import Range from "../../Range.svelte";
-</script>
-
-<Container overflow={"visible"} direction={"vertical"}>
-    <Container overflow={"visible"} minHeight={"1rem"} mainAxisAlignment={"spaceBetween"}>
-        <div
-            class:selected={$fontScaleStore === 0}
-            class="letter zero"
-            onclick={() => fontScaleStore.set(0)}>
-            50%
-        </div>
-        <div
-            class:selected={$fontScaleStore === 1}
-            class="letter one"
-            onclick={() => fontScaleStore.set(1)}>
-            75%
-        </div>
-        <div
-            class:selected={$fontScaleStore === 2}
-            class="letter two"
-            onclick={() => fontScaleStore.set(2)}>
-            100%
-        </div>
-        <div
-            class:selected={$fontScaleStore === 3}
-            class="letter three"
-            onclick={() => fontScaleStore.set(3)}>
-            125%
-        </div>
-        <div
-            class:selected={$fontScaleStore === 4}
-            class="letter four"
-            onclick={() => fontScaleStore.set(4)}>
-            150%
-        </div>
-    </Container>
-    <Container>
-        <Range min={0} max={4} bind:value={$fontScaleStore} />
-    </Container>
-</Container>
-
-<style lang="scss">
-    .letter {
-        position: absolute;
-        transform: translateX(-50%);
-        cursor: pointer;
-        text-align: center;
-        font-size: 12px;
-        font-weight: 100;
-    }
-
-    .selected {
-        color: var(--primary);
-        font-weight: 700;
-    }
-
-    .zero {
-        left: 0;
-        transform: translateX(0);
-    }
-
-    .one {
-        left: 25%;
-    }
-
-    .two {
-        left: 50%;
-    }
-
-    .three {
-        left: 75%;
-    }
-
-    .four {
-        transform: translateX(-100%);
-        left: 100%;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/user_profile/Share.svelte b/frontend/app/src/components_mobile/home/user_profile/Share.svelte
deleted file mode 100644
index 2d4a2a57bf..0000000000
--- a/frontend/app/src/components_mobile/home/user_profile/Share.svelte
+++ /dev/null
@@ -1,90 +0,0 @@
-<script lang="ts">
-    import { i18nKey } from "@src/i18n/i18n";
-    import { toastStore } from "@src/stores/toast";
-    import { shareLink } from "@src/utils/share";
-    import { BodySmall, Caption, ColourVars, CommonButton, Container, H2 } from "component-lib";
-    import { allUsersStore, currentUserIdStore, OpenChat } from "@client";
-    import { getContext } from "svelte";
-    import ContentCopy from "svelte-material-icons/ContentCopy.svelte";
-    import ShareIcon from "svelte-material-icons/ShareVariant.svelte";
-    import QRCode from "../../QRCode.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    let user = $derived($allUsersStore.get($currentUserIdStore) ?? client.nullUser("unknown"));
-    let link = $derived(`${client.canonicalOrigin()}/?ref=${$currentUserIdStore}`);
-
-    function onCopy() {
-        navigator.clipboard.writeText(user.userId).then(() => {
-            toastStore.showSuccessToast(i18nKey("linkCopiedToClipboard"));
-        });
-    }
-</script>
-
-<SlidingPageContent title={i18nKey("Share")}>
-    <Container
-        padding={"xxl"}
-        gap={"lg"}
-        height={"fill"}
-        crossAxisAlignment={"center"}
-        direction={"vertical"}>
-        <Container gap={"xl"} direction={"vertical"}>
-            <Container gap={"lg"} direction={"vertical"}>
-                <H2 width={{ size: "70%" }} fontWeight={"bold"} colour={"primary"}>
-                    <Translatable resourceKey={i18nKey("Share with family & friends")}
-                    ></Translatable>
-                </H2>
-
-                <BodySmall>
-                    <Translatable
-                        resourceKey={i18nKey(
-                            "Share your OpenChat link to earn CHIT rewards. You get CHIT when referred users verify unique personhood or become Diamond members. Referring a Diamond member earns 5,000 CHIT, proving unique personhood earns 10,000 CHIT, and a lifetime Diamond membership yields 15,000 CHIT.  ",
-                        )}>
-                    </Translatable>
-                </BodySmall>
-
-                <BodySmall>
-                    <Translatable
-                        resourceKey={i18nKey(
-                            "Your friends can scan the QR code below, or you may copy the link and send it yourself, or share via available mediums.",
-                        )}>
-                    </Translatable>
-                </BodySmall>
-            </Container>
-
-            <Container
-                padding={["lg", "lg", "xl", "lg"]}
-                direction={"vertical"}
-                mainAxisAlignment={"center"}
-                crossAxisAlignment={"center"}
-                background={ColourVars.background1}>
-                <Container
-                    padding={["lg", "lg", "zero", "lg"]}
-                    mainAxisAlignment={"center"}
-                    crossAxisAlignment={"center"}>
-                    <QRCode text={link} fullWidthOnMobile />
-                </Container>
-                <Caption align={"center"} colour={"primary"}>
-                    {link}
-                </Caption>
-            </Container>
-
-            <Container mainAxisAlignment={"end"} gap={"sm"} crossAxisAlignment={"end"}>
-                <CommonButton onClick={onCopy} size={"small_text"}>
-                    {#snippet icon(color)}
-                        <ContentCopy {color}></ContentCopy>
-                    {/snippet}
-                    <Translatable resourceKey={i18nKey("Copy link")}></Translatable>
-                </CommonButton>
-                <CommonButton onClick={() => shareLink(link)} size={"medium"} mode={"active"}>
-                    {#snippet icon(color, size)}
-                        <ShareIcon {color} {size}></ShareIcon>
-                    {/snippet}
-                    <Translatable resourceKey={i18nKey("share")}></Translatable>
-                </CommonButton>
-            </Container>
-        </Container>
-    </Container>
-</SlidingPageContent>
diff --git a/frontend/app/src/components_mobile/home/video/ActiveCall.svelte b/frontend/app/src/components_mobile/home/video/ActiveCall.svelte
deleted file mode 100644
index ea24435cff..0000000000
--- a/frontend/app/src/components_mobile/home/video/ActiveCall.svelte
+++ /dev/null
@@ -1,373 +0,0 @@
-<script lang="ts">
-    import type { DailyThemeConfig } from "@daily-co/daily-js";
-    import daily, { type DailyCall } from "@daily-co/daily-js";
-    import { Column, Sheet, Title } from "component-lib";
-    import {
-        allUsersStore,
-        chatIdentifiersEqual,
-        communitiesStore,
-        currentUserIdStore,
-        currentUserStore,
-        NoMeetingToJoin,
-        OpenChat,
-        selectedChatSummaryStore,
-        selectedCommunitySummaryStore,
-        type AccessTokenType,
-        type ChatIdentifier,
-        type VideoCallType,
-    } from "@client";
-    import { getContext } from "svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { videoCameraOn, videoMicOn, videoSpeakerView } from "../../../stores/settings";
-    import { toastStore } from "../../../stores/toast";
-    import {
-        activeVideoCall,
-        camera,
-        hasPresence,
-        microphone,
-        sharing,
-        type InterCallMessage,
-    } from "../../../stores/video";
-    import { currentTheme } from "../../../theme/themes";
-    import type { Theme } from "../../../theme/types";
-    import { removeQueryStringParam } from "../../../utils/urls";
-    import AreYouSure from "../../AreYouSure.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import ActiveCallHeader from "./ActiveCallHeader.svelte";
-
-    interface Props {
-        onClearSelection: () => void;
-    }
-
-    let { onClearSelection }: Props = $props();
-
-    const client = getContext<OpenChat>("client");
-
-    let iframeContainer: HTMLDivElement | undefined = $state();
-    let confirmSwitchTo:
-        | { chatId: ChatIdentifier; callType: VideoCallType; join: boolean }
-        | undefined = $state(undefined);
-    let hostEnded = $state(false);
-    let denied = $state(false);
-    let askedToSpeak = $state(false);
-    let call: DailyCall | undefined = $state();
-    let chat = $derived(normaliseChatSummary($activeVideoCall?.chatId));
-    let threadOpen = $derived($activeVideoCall?.threadOpen ?? false);
-    let participantsOpen = $derived($activeVideoCall?.participantsOpen ?? false);
-
-    $effect(() => {
-        activeVideoCall.changeTheme(getThemeConfig($currentTheme));
-    });
-
-    function normaliseChatSummary(chatId: ChatIdentifier | undefined) {
-        if (chatId) {
-            const chat = client.lookupChatSummary(chatId);
-            if (chat) {
-                switch (chat.kind) {
-                    case "direct_chat":
-                        const them = $allUsersStore.get(chat.them.userId);
-                        return {
-                            chatId,
-                            name: client.displayName(them),
-                            avatarUrl: client.userAvatarUrl(them),
-                            userId: chat.them,
-                            videoCallInProgress: chat.videoCallInProgress,
-                        };
-                    case "group_chat":
-                        return {
-                            chatId,
-                            name: chat.name,
-                            avatarUrl: client.groupAvatarUrl(chat),
-                            userId: undefined,
-                            videoCallInProgress: chat.videoCallInProgress,
-                        };
-                    case "channel":
-                        return {
-                            chatId,
-                            name: `${
-                                $communitiesStore.get({
-                                    kind: "community",
-                                    communityId: chat.id.communityId,
-                                })?.name
-                            } > ${chat.name}`,
-                            avatarUrl: client.groupAvatarUrl(chat, $selectedCommunitySummaryStore),
-                            userId: undefined,
-                            videoCallInProgress: chat.videoCallInProgress,
-                        };
-                }
-            }
-        }
-    }
-
-    export async function startOrJoinVideoCall(
-        chatId: ChatIdentifier,
-        callType: VideoCallType,
-        join: boolean,
-    ) {
-        if (iframeContainer === undefined) return;
-
-        try {
-            if ($activeVideoCall !== undefined) {
-                confirmSwitchTo = { chatId, callType, join };
-                return;
-            }
-
-            // close and threads we have open in the right panel
-            client.filterRightPanelHistory((panel) => panel.kind !== "message_thread_panel");
-            removeQueryStringParam("open");
-
-            activeVideoCall.joining(chatId, callType);
-
-            const accessType: AccessTokenType = join
-                ? { kind: "join_video_call", chatId }
-                : { kind: "start_video_call", callType, chatId };
-
-            // first we need to get access jwt from the oc backend
-            const { token, roomName, messageId, joining } = await client.getVideoChatAccessToken(
-                chatId,
-                accessType,
-            );
-
-            if (call !== undefined) {
-                await call.destroy();
-                call = undefined;
-            }
-
-            call = daily.createFrame(iframeContainer, {
-                token,
-                activeSpeakerMode: callType === "broadcast" ? true : $videoSpeakerView,
-                showLeaveButton: false,
-                showFullscreenButton: false,
-                startVideoOff: !$videoCameraOn,
-                startAudioOff: !$videoMicOn,
-                iframeStyle: {
-                    width: "100%",
-                    height: "100%",
-                },
-                url: `https://openchat.daily.co/${roomName}`,
-                userName: $currentUserStore.username,
-                theme: getThemeConfig($currentTheme),
-            });
-
-            call.on("app-message", (ev: InterCallMessage | undefined) => {
-                if (chatId.kind === "direct_chat") return;
-
-                if (ev && ev.action === "app-message") {
-                    if (ev.data.kind === "ask_to_speak") {
-                        activeVideoCall.captureAccessRequest(ev.data);
-                    }
-                    if (ev.data.kind === "demote_participant") {
-                        const me = call?.participants().local.session_id;
-                        if (
-                            ev.data.participantId === me &&
-                            $currentUserIdStore === ev.data.userId
-                        ) {
-                            askedToSpeak = false;
-                            client.setVideoCallPresence(chatId, BigInt(messageId), "hidden");
-                        }
-                    }
-                    if (ev.data.kind === "ask_to_speak_response") {
-                        const me = call?.participants().local.session_id;
-                        if (
-                            ev.data.participantId === me &&
-                            $currentUserIdStore === ev.data.userId
-                        ) {
-                            askedToSpeak = false;
-                            denied = !ev.data.approved;
-                            if (ev.data.approved) {
-                                client.setVideoCallPresence(chatId, BigInt(messageId), "default");
-                            }
-                        }
-                    }
-                }
-            });
-
-            // this only fires when *I* leave the meeting
-            call.on("left-meeting", () => {
-                // at this point I have already left the meeting and so participantCount will always report 0
-                // so we can't use it.
-                activeVideoCall.endCall();
-            });
-
-            // this fires when a remote participant leaves the meeting
-            call.on("participant-left", (ev) => {
-                // if the owner leaves, end the call
-                if (ev?.participant.owner && !ev.participant.local && callType === "broadcast") {
-                    hangup();
-                    hostEnded = true;
-                }
-            });
-
-            call.on("joined-meeting", (ev) => {
-                const me = ev?.participants?.local;
-                if (!me) return;
-                if (me.owner) {
-                    activeVideoCall.isOwner(true);
-                }
-            });
-
-            call.on("participant-updated", (ev) => {
-                if (ev?.participant.local) {
-                    microphone.set(ev?.participant.tracks.audio.state !== "off");
-                    camera.set(ev?.participant.tracks.video.state !== "off");
-                    sharing.set(ev?.participant.tracks.screenVideo.state !== "off");
-                    hasPresence.set(ev?.participant.permissions.hasPresence);
-                } else {
-                    if (ev?.participant.user_name === $currentUserStore.username) {
-                        // this means that I have joined the call from somewhere else e.g. another device
-                        hangup();
-                    }
-                }
-            });
-
-            // if we are not joining aka starting we need to tell the other users
-            if (!joining) {
-                client.ringOtherUsers(chatId, messageId, callType);
-            }
-
-            await call.join();
-
-            activeVideoCall.setCall(chatId, BigInt(messageId), call);
-
-            if (joining) {
-                switch (chatId.kind) {
-                    case "direct_chat":
-                        await client.joinVideoCall(chatId, BigInt(messageId));
-                        break;
-                    default:
-                        await client.setVideoCallPresence(
-                            chatId,
-                            BigInt(messageId),
-                            callType === "broadcast" ? "hidden" : "default",
-                        );
-                }
-            }
-        } catch (err) {
-            if (err instanceof NoMeetingToJoin) {
-                toastStore.showSuccessToast(i18nKey("videoCall.noMeetingToJoin"));
-            } else {
-                toastStore.showFailureToast(i18nKey("videoCall.callFailed"), err);
-            }
-            activeVideoCall.endCall();
-            console.error("Unable to start video call: ", err);
-        }
-    }
-
-    function getThemeConfig(theme: Theme): DailyThemeConfig {
-        const dailyTheme = {
-            colors: {
-                accent: `${theme.daily.accent}`,
-                accentText: `${theme.daily.accentText}`,
-                background: `${theme.daily.background}`,
-                backgroundAccent: `${theme.daily.backgroundAccent}`,
-                baseText: `${theme.daily.baseText}`,
-                border: `${theme.daily.border}`,
-                mainAreaBg: `${theme.daily.mainAreaBg}`,
-                mainAreaBgAccent: `${theme.daily.mainAreaBgAccent}`,
-                mainAreaText: `${theme.daily.mainAreaText}`,
-                supportiveText: `${theme.daily.supportiveText}`,
-            },
-        };
-        return dailyTheme;
-    }
-
-    function switchCall(confirmed: boolean): Promise<void> {
-        if (confirmed && confirmSwitchTo) {
-            activeVideoCall.endCall();
-            const { chatId, callType, join } = confirmSwitchTo;
-            window.setTimeout(() => startOrJoinVideoCall(chatId, callType, join), 100);
-        }
-        confirmSwitchTo = undefined;
-        return Promise.resolve();
-    }
-
-    export function askToSpeak() {
-        activeVideoCall.askToSpeak($currentUserIdStore);
-        askedToSpeak = true;
-    }
-
-    export function hangup() {
-        if ($activeVideoCall?.call) {
-            if ($hasPresence) {
-                const present = $activeVideoCall.call.participantCounts().present;
-                if (present === 1) {
-                    // I must be the last person left in the call
-                    client.endVideoCall($activeVideoCall.chatId, $activeVideoCall.messageId);
-                }
-            }
-
-            // this will trigger the left-meeting event which will in turn end the call
-            $activeVideoCall.call.leave();
-            client.popRightPanelHistory();
-        }
-    }
-
-    export function closeThread() {
-        activeVideoCall.threadOpen(false);
-    }
-</script>
-
-{#if confirmSwitchTo}
-    <AreYouSure message={i18nKey("videoCall.switchCall")} action={switchCall} />
-{/if}
-
-{#if hostEnded}
-    <Sheet onDismiss={() => (hostEnded = false)}>
-        <Column mainAxisAlignment={"center"} crossAxisAlignment={"center"} padding={"xxxl"}>
-            <Title width={"hug"} fontWeight={"bold"}>
-                <Translatable resourceKey={i18nKey("videoCall.hostEnded")} />
-            </Title>
-        </Column>
-    </Sheet>
-{/if}
-
-{#if denied}
-    <Sheet onDismiss={() => (denied = false)}>
-        <Column mainAxisAlignment={"center"} crossAxisAlignment={"center"} padding={"xxxl"}>
-            <Title width={"hug"} fontWeight={"bold"}>
-                <Translatable resourceKey={i18nKey("videoCall.denied")} />
-            </Title>
-        </Column>
-    </Sheet>
-{/if}
-
-<div
-    id="video-call-container"
-    class="video-call-container"
-    class:visible={$activeVideoCall &&
-        $activeVideoCall.view !== "minimised" &&
-        !threadOpen &&
-        !participantsOpen &&
-        chatIdentifiersEqual($activeVideoCall.chatId, $selectedChatSummaryStore?.id)}>
-    {#if chat !== undefined}
-        <ActiveCallHeader {onClearSelection} onAskToSpeak={askToSpeak} {chat} {askedToSpeak} />
-    {/if}
-    <div class="iframe-container" bind:this={iframeContainer}></div>
-</div>
-
-<style lang="scss">
-    :global(.video-call-container .section-header) {
-        background-color: var(--daily-header);
-    }
-
-    .host-ended,
-    .denied {
-        @include font(bold, normal, fs-130);
-        text-align: center;
-    }
-
-    .video-call-container {
-        position: absolute;
-        display: none;
-        flex-direction: column;
-        @include z-index("video-call");
-
-        &.visible {
-            display: flex;
-        }
-    }
-
-    .iframe-container {
-        height: 100%;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/video/ActiveCallActions.svelte b/frontend/app/src/components_mobile/home/video/ActiveCallActions.svelte
deleted file mode 100644
index 3a5e96b8d6..0000000000
--- a/frontend/app/src/components_mobile/home/video/ActiveCallActions.svelte
+++ /dev/null
@@ -1,106 +0,0 @@
-<script lang="ts">
-    import { MenuItem } from "component-lib";
-    import { chatListScopeStore, OpenChat, publish, routeForMessage } from "@client";
-    import { navigate } from "@utils/navigation";
-    import { getContext } from "svelte";
-    import { _ } from "svelte-i18n";
-    import AccountMultiple from "svelte-material-icons/AccountMultiple.svelte";
-    import HandFrontLeft from "svelte-material-icons/HandFrontLeft.svelte";
-    import MessageOutline from "svelte-material-icons/MessageOutline.svelte";
-    import PhoneHangup from "svelte-material-icons/PhoneHangup.svelte";
-    import WindowMinimize from "svelte-material-icons/WindowMinimize.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { activeVideoCall, hasPresence } from "../../../stores/video";
-    import { removeQueryStringParam } from "../../../utils/urls";
-    import Translatable from "../../Translatable.svelte";
-    import type { VideoCallChat } from "./callChat";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        chat: VideoCallChat;
-        onAskToSpeak: () => void;
-        onMinimise: () => void;
-    }
-
-    let { chat, onAskToSpeak, onMinimise }: Props = $props();
-
-    let threadOpen = $derived($activeVideoCall?.threadOpen ?? false);
-    let participantsOpen = $derived($activeVideoCall?.participantsOpen ?? false);
-    let isOwner = $derived($activeVideoCall?.isOwner ?? false);
-
-    function toggleThread() {
-        if (chat.chatId !== undefined && chat.videoCallInProgress?.messageIndex !== undefined) {
-            if (threadOpen) {
-                client.popRightPanelHistory();
-                navigate(removeQueryStringParam("open"));
-            } else {
-                navigate(
-                    `${routeForMessage(
-                        $chatListScopeStore.kind,
-                        { chatId: chat.chatId },
-                        chat.videoCallInProgress?.messageIndex,
-                    )}?open=true`,
-                );
-            }
-            activeVideoCall.threadOpen(!threadOpen);
-        }
-    }
-
-    function toggleParticipants() {
-        if (participantsOpen) {
-            publish("closeModalPage");
-        } else {
-            if (
-                $activeVideoCall?.messageId !== undefined &&
-                $activeVideoCall.chatId.kind !== "direct_chat"
-            ) {
-                publish("showVideoCallParticipants", {
-                    chatId: $activeVideoCall.chatId,
-                    messageId: $activeVideoCall.messageId,
-                    isOwner,
-                });
-            }
-        }
-        activeVideoCall.participantsOpen(!participantsOpen);
-    }
-</script>
-
-{#if $activeVideoCall?.status === "joined"}
-    {#if !$hasPresence}
-        <MenuItem onclick={onAskToSpeak}>
-            {#snippet icon(color, size)}
-                <HandFrontLeft title={$_("videoCall.askToSpeak")} {size} {color} />
-            {/snippet}
-            <Translatable resourceKey={i18nKey("videoCall.askToSpeak")} />
-        </MenuItem>
-    {/if}
-    {#if $activeVideoCall?.messageId !== undefined && $activeVideoCall.chatId.kind !== "direct_chat"}
-        <MenuItem onclick={toggleParticipants}>
-            {#snippet icon(color, size)}
-                <AccountMultiple {size} {color} />
-            {/snippet}
-            <Translatable resourceKey={i18nKey("videoCall.showParticipants")} />
-        </MenuItem>
-    {/if}
-    {#if chat.chatId && chat.videoCallInProgress?.messageIndex !== undefined}
-        <MenuItem onclick={toggleThread}>
-            {#snippet icon(color, size)}
-                <MessageOutline {size} {color} />
-            {/snippet}
-            <Translatable resourceKey={i18nKey("videoCall.chat")} />
-        </MenuItem>
-    {/if}
-    <MenuItem onclick={onMinimise}>
-        {#snippet icon(color, size)}
-            <WindowMinimize {size} {color} />
-        {/snippet}
-        <Translatable resourceKey={i18nKey("videoCall.minimise")} />
-    </MenuItem>
-    <MenuItem onclick={() => publish("hangup")}>
-        {#snippet icon(color, size)}
-            <PhoneHangup {size} {color} />
-        {/snippet}
-        <Translatable resourceKey={i18nKey("videoCall.leave")} />
-    </MenuItem>
-{/if}
diff --git a/frontend/app/src/components_mobile/home/video/ActiveCallHeader.svelte b/frontend/app/src/components_mobile/home/video/ActiveCallHeader.svelte
deleted file mode 100644
index 47fb0598f3..0000000000
--- a/frontend/app/src/components_mobile/home/video/ActiveCallHeader.svelte
+++ /dev/null
@@ -1,43 +0,0 @@
-<script lang="ts">
-    import { Avatar, SectionHeader } from "component-lib";
-    import { activeVideoCall } from "../../../stores/video";
-    import FancyLoader from "../../icons/FancyLoader.svelte";
-    import Typing from "@shared_components/Typing.svelte";
-    import ActiveCallActions from "./ActiveCallActions.svelte";
-    import type { VideoCallChat } from "./callChat";
-
-    interface Props {
-        askedToSpeak: boolean;
-        chat: VideoCallChat;
-        onClearSelection: () => void;
-        onAskToSpeak: () => void;
-    }
-
-    let { chat, onClearSelection, onAskToSpeak }: Props = $props();
-
-    function minimise() {
-        activeVideoCall.setView("minimised");
-    }
-</script>
-
-{#snippet menu()}
-    <ActiveCallActions {chat} {onAskToSpeak} onMinimise={minimise} />
-{/snippet}
-
-<SectionHeader
-    menu={$activeVideoCall?.status === "joined" ? menu : undefined}
-    onBack={onClearSelection}>
-    {#snippet title()}
-        {chat.name}
-        {#if $activeVideoCall?.status === "joining"}
-            <Typing />
-        {/if}
-    {/snippet}
-    {#snippet avatar()}
-        {#if $activeVideoCall?.status === "joining"}
-            <FancyLoader size={"3rem"} loop />
-        {:else}
-            <Avatar url={chat.avatarUrl} name={chat.name} />
-        {/if}
-    {/snippet}
-</SectionHeader>
diff --git a/frontend/app/src/components_mobile/home/video/ActiveCallParticipant.svelte b/frontend/app/src/components_mobile/home/video/ActiveCallParticipant.svelte
deleted file mode 100644
index 4b5a67c409..0000000000
--- a/frontend/app/src/components_mobile/home/video/ActiveCallParticipant.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-<script lang="ts">
-    import { IconButton } from "component-lib";
-    import type { UserSummary, VideoCallPresence, VideoCallType } from "@shared";
-    import AccountCancel from "svelte-material-icons/AccountCancel.svelte";
-    import User from "../User.svelte";
-
-    interface Props {
-        participant: UserSummary;
-        presence: VideoCallPresence;
-        isOwner: boolean;
-        callType: VideoCallType;
-        onDemote?: (userId: string) => void;
-    }
-
-    let { participant, presence, isOwner, callType, onDemote }: Props = $props();
-
-    let showMenu = $derived(isOwner && presence === "default" && callType === "broadcast");
-
-    function demote(e?: Event) {
-        e?.stopPropagation();
-        onDemote?.(participant.userId);
-    }
-</script>
-
-{#snippet action()}
-    <IconButton onclick={demote}>
-        {#snippet icon(color)}
-            <AccountCancel {color} />
-        {/snippet}
-    </IconButton>
-{/snippet}
-
-<User action={showMenu ? action : undefined} user={participant}></User>
diff --git a/frontend/app/src/components_mobile/home/video/ActiveCallParticipants.svelte b/frontend/app/src/components_mobile/home/video/ActiveCallParticipants.svelte
deleted file mode 100644
index c786a5e522..0000000000
--- a/frontend/app/src/components_mobile/home/video/ActiveCallParticipants.svelte
+++ /dev/null
@@ -1,158 +0,0 @@
-<script lang="ts">
-    import { Chip, Container } from "component-lib";
-    import {
-        type ChatIdentifier,
-        type MultiUserChatIdentifier,
-        type OpenChat,
-        type UserSummary,
-        chatIdentifiersEqual,
-        currentUserIdStore,
-        publish,
-        subscribe,
-    } from "@client";
-    import { getContext, onMount } from "svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { activeVideoCall } from "../../../stores/video";
-    import FancyLoader from "../../icons/FancyLoader.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import VirtualList from "@shared_components/VirtualList.svelte";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
-    import ActiveCallParticipant from "./ActiveCallParticipant.svelte";
-
-    type MappedParticipants = {
-        participants: Record<string, UserSummary>;
-        hidden: Record<string, UserSummary>;
-        lastUpdated: bigint;
-    };
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        chatId: MultiUserChatIdentifier;
-        messageId: bigint;
-        isOwner: boolean;
-    }
-
-    let { chatId, messageId, isOwner }: Props = $props();
-
-    let demoted = $state(new Set<string>());
-    let loading = $state(false);
-
-    let selectedTab: "presenters" | "viewers" = $state("presenters");
-    let videoParticipants: MappedParticipants = $state({
-        participants: {},
-        hidden: {},
-        lastUpdated: 0n,
-    });
-
-    let participants = $derived(
-        Object.values(videoParticipants.participants).filter((u) => !demoted.has(u.userId)),
-    );
-    let hidden = $derived([
-        ...Object.values(videoParticipants.hidden),
-        ...Object.values(videoParticipants.participants).filter((u) => demoted.has(u.userId)),
-    ]);
-
-    onMount(() => {
-        const unsub = subscribe("videoCallMessageUpdated", videoCallMessageUpdated);
-        refresh(true);
-        return unsub;
-    });
-
-    function videoCallMessageUpdated(payload: { chatId: ChatIdentifier; messageId: bigint }) {
-        if (chatIdentifiersEqual(chatId, payload.chatId) && messageId === payload.messageId) {
-            refresh();
-        }
-    }
-
-    function refresh(initialising: boolean = false) {
-        loading = initialising;
-        client
-            .videoCallParticipants(chatId, messageId, 0n)
-            .then((res) => {
-                videoParticipants = res;
-                Object.values(videoParticipants.hidden).forEach((h) => demoted.delete(h.userId));
-                demoted = demoted;
-            })
-            .finally(() => (loading = false));
-    }
-
-    function close() {
-        publish("closeModalPage");
-        activeVideoCall.participantsOpen(false);
-        client.popRightPanelHistory();
-    }
-
-    function selectTab(tab: "presenters" | "viewers") {
-        selectedTab = tab;
-    }
-
-    function demote(userId: string) {
-        demoted.add(userId);
-        demoted = demoted;
-        activeVideoCall.demote(userId);
-    }
-</script>
-
-<SlidingPageContent onBack={close} title={i18nKey("videoCall.participants")}>
-    <Container height={"fill"} gap={"lg"} direction={"vertical"} padding={"lg"}>
-        {#if $activeVideoCall !== undefined}
-            {#if loading}
-                <Container
-                    height={"fill"}
-                    mainAxisAlignment={"center"}
-                    crossAxisAlignment={"center"}>
-                    <FancyLoader size={"5rem"} loop />
-                </Container>
-            {:else}
-                {#if $activeVideoCall?.callType === "broadcast"}
-                    <Container gap={"sm"}>
-                        <Chip
-                            mode={selectedTab === "presenters" ? "rounded" : "unselected"}
-                            onClick={() => selectTab("presenters")}>
-                            <Translatable
-                                resourceKey={i18nKey("videoCall.presenters", {
-                                    count: participants.length,
-                                })} />
-                        </Chip>
-                        <Chip
-                            mode={selectedTab === "viewers" ? "rounded" : "unselected"}
-                            onClick={() => selectTab("viewers")}>
-                            <Translatable
-                                resourceKey={i18nKey("videoCall.viewers", {
-                                    count: hidden.length,
-                                })} />
-                        </Chip>
-                    </Container>
-                {/if}
-
-                <Container direction={"vertical"} height={"fill"}>
-                    {#if selectedTab === "presenters"}
-                        {#each participants as participant}
-                            <ActiveCallParticipant
-                                {isOwner}
-                                callType={$activeVideoCall.callType}
-                                onDemote={demote}
-                                presence={isOwner && participant.userId === $currentUserIdStore
-                                    ? "owner"
-                                    : "default"}
-                                {participant} />
-                        {/each}
-                    {/if}
-
-                    {#if selectedTab === "viewers"}
-                        <VirtualList keyFn={(user) => user.userId} items={hidden}>
-                            {#snippet children(item)}
-                                <ActiveCallParticipant
-                                    callType={$activeVideoCall.callType}
-                                    {isOwner}
-                                    presence={"hidden"}
-                                    participant={item} />
-                            {/snippet}
-                        </VirtualList>
-                    {/if}
-                </Container>
-            {/if}
-        {/if}
-    </Container>
-</SlidingPageContent>
diff --git a/frontend/app/src/components_mobile/home/video/ActiveCallSummary.svelte b/frontend/app/src/components_mobile/home/video/ActiveCallSummary.svelte
deleted file mode 100644
index ffb51d1b5e..0000000000
--- a/frontend/app/src/components_mobile/home/video/ActiveCallSummary.svelte
+++ /dev/null
@@ -1,211 +0,0 @@
-<script lang="ts">
-    import { Avatar, ColourVars, Container, IconButton, Subtitle } from "component-lib";
-    import {
-        allUsersStore,
-        chatIdentifiersEqual,
-        communitiesStore,
-        OpenChat,
-        publish,
-        routeForChatIdentifier,
-        selectedChatIdStore,
-        selectedCommunitySummaryStore,
-        type ChatIdentifier,
-    } from "@client";
-    import { navigate } from "@utils/navigation";
-    import { getContext } from "svelte";
-    import HandFrontLeft from "svelte-material-icons/HandFrontLeft.svelte";
-    import Microphone from "svelte-material-icons/Microphone.svelte";
-    import MicrophoneOff from "svelte-material-icons/MicrophoneOff.svelte";
-    import MonitorOff from "svelte-material-icons/MonitorOff.svelte";
-    import MonitorShare from "svelte-material-icons/MonitorShare.svelte";
-    import PhoneHangup from "svelte-material-icons/PhoneHangup.svelte";
-    import Video from "svelte-material-icons/Video.svelte";
-    import VideoOff from "svelte-material-icons/VideoOff.svelte";
-    import Tooltip from "../../../components/tooltip/Tooltip.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import {
-        activeVideoCall,
-        camera,
-        hasPresence,
-        microphone,
-        sharing,
-    } from "../../../stores/video";
-    import FancyLoader from "../../icons/FancyLoader.svelte";
-    import Translatable from "../../Translatable.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    let show = $derived(
-        $activeVideoCall?.chatId !== undefined &&
-            (!chatIdentifiersEqual($activeVideoCall.chatId, $selectedChatIdStore) ||
-                (chatIdentifiersEqual($activeVideoCall.chatId, $selectedChatIdStore) &&
-                    $activeVideoCall.view === "minimised")),
-    );
-
-    let chat = $derived(normaliseChatSummary($activeVideoCall?.chatId));
-
-    function goToCall() {
-        if ($activeVideoCall) {
-            if (!chatIdentifiersEqual($activeVideoCall.chatId, $selectedChatIdStore)) {
-                navigate(routeForChatIdentifier("none", $activeVideoCall.chatId));
-            }
-            activeVideoCall.setView("default");
-        }
-    }
-
-    function askToSpeak(e?: Event) {
-        e?.stopPropagation();
-        publish("askToSpeak");
-    }
-
-    function normaliseChatSummary(chatId: ChatIdentifier | undefined) {
-        if (chatId) {
-            const chat = client.lookupChatSummary(chatId);
-            if (chat) {
-                switch (chat.kind) {
-                    case "direct_chat":
-                        const them = $allUsersStore.get(chat.them.userId);
-                        return {
-                            name: client.displayName(them),
-                            avatarUrl: client.userAvatarUrl(them),
-                            userId: chat.them,
-                        };
-                    case "group_chat":
-                        return {
-                            name: chat.name,
-                            avatarUrl: client.groupAvatarUrl(chat),
-                            userId: undefined,
-                        };
-                    case "channel":
-                        return {
-                            name: `${
-                                $communitiesStore.get({
-                                    kind: "community",
-                                    communityId: chat.id.communityId,
-                                })?.name
-                            } > ${chat.name}`,
-                            avatarUrl: client.groupAvatarUrl(chat, $selectedCommunitySummaryStore),
-                            userId: undefined,
-                        };
-                }
-            }
-        }
-    }
-
-    function toggleShare(e?: Event) {
-        e?.stopPropagation();
-        if ($activeVideoCall?.call) {
-            if ($sharing) {
-                $activeVideoCall.call.stopScreenShare();
-            } else {
-                $activeVideoCall.call.startScreenShare();
-            }
-        }
-    }
-
-    function toggleMic(e?: Event) {
-        e?.stopPropagation();
-        if ($activeVideoCall?.call) {
-            $activeVideoCall.call.setLocalAudio(!$activeVideoCall.call.localAudio());
-        }
-    }
-
-    function toggleCamera(e?: Event) {
-        e?.stopPropagation();
-        if ($activeVideoCall?.call) {
-            $activeVideoCall.call.setLocalVideo(!$activeVideoCall.call.localVideo());
-        }
-    }
-
-    function hangup(e?: Event) {
-        e?.stopPropagation();
-        publish("hangup");
-    }
-</script>
-
-{#if show && $activeVideoCall !== undefined && chat !== undefined}
-    <Container
-        crossAxisAlignment={"center"}
-        gap={"lg"}
-        padding={"lg"}
-        onClick={goToCall}
-        background={ColourVars.success}>
-        {#if $activeVideoCall.status === "joining"}
-            <FancyLoader size={"3rem"} loop />
-        {:else}
-            <Avatar size={"lg"} url={chat.avatarUrl} />
-        {/if}
-        <Container direction={"vertical"}>
-            <Container gap={"md"}>
-                {#if !$hasPresence && $activeVideoCall?.status !== "joining"}
-                    <Tooltip position={"top"} align={"middle"}>
-                        <IconButton padding={"zero"} onclick={askToSpeak}>
-                            {#snippet icon(color)}
-                                <HandFrontLeft {color} />
-                            {/snippet}
-                        </IconButton>
-                        {#snippet popupTemplate()}
-                            <Translatable resourceKey={i18nKey("videoCall.askToSpeak")} />
-                        {/snippet}
-                    </Tooltip>
-                {:else}
-                    <Tooltip position={"top"} align={"middle"}>
-                        <IconButton padding={"zero"} onclick={toggleCamera}>
-                            {#snippet icon(color)}
-                                {#if $camera}
-                                    <Video {color} />
-                                {:else}
-                                    <VideoOff {color} />
-                                {/if}
-                            {/snippet}
-                        </IconButton>
-                        {#snippet popupTemplate()}
-                            <Translatable resourceKey={i18nKey("videoCall.toggleCam")} />
-                        {/snippet}
-                    </Tooltip>
-                    <Tooltip position={"top"} align={"middle"}>
-                        <IconButton padding={"zero"} onclick={toggleMic}>
-                            {#snippet icon(color)}
-                                {#if $microphone}
-                                    <Microphone {color} />
-                                {:else}
-                                    <MicrophoneOff {color} />
-                                {/if}
-                            {/snippet}
-                        </IconButton>
-                        {#snippet popupTemplate()}
-                            <Translatable resourceKey={i18nKey("videoCall.toggleMic")} />
-                        {/snippet}
-                    </Tooltip>
-                    <Tooltip position={"top"} align={"middle"}>
-                        <IconButton padding={"zero"} onclick={toggleShare}>
-                            {#snippet icon(color)}
-                                {#if $sharing}
-                                    <MonitorOff {color} />
-                                {:else}
-                                    <MonitorShare {color} />
-                                {/if}
-                            {/snippet}
-                        </IconButton>
-                        {#snippet popupTemplate()}
-                            <Translatable resourceKey={i18nKey("videoCall.toggleShare")} />
-                        {/snippet}
-                    </Tooltip>
-                {/if}
-                <Tooltip position={"top"} align={"middle"}>
-                    <IconButton padding={"zero"} onclick={hangup}>
-                        {#snippet icon(color)}
-                            <PhoneHangup {color} />
-                        {/snippet}
-                    </IconButton>
-                    {#snippet popupTemplate()}
-                        <Translatable resourceKey={i18nKey("videoCall.leave")} />
-                    {/snippet}
-                </Tooltip>
-            </Container>
-            <Subtitle fontWeight={"bold"}>
-                {chat.name}
-            </Subtitle>
-        </Container>
-    </Container>
-{/if}
diff --git a/frontend/app/src/components_mobile/home/video/IncomingCall.svelte b/frontend/app/src/components_mobile/home/video/IncomingCall.svelte
deleted file mode 100644
index 6ec41ab044..0000000000
--- a/frontend/app/src/components_mobile/home/video/IncomingCall.svelte
+++ /dev/null
@@ -1,128 +0,0 @@
-<script lang="ts">
-    import { Avatar, Body, ColourVars, Column, Row, Sheet, Subtitle } from "component-lib";
-    import {
-        allUsersStore,
-        communitiesStore,
-        selectedCommunitySummaryStore,
-        type ChatIdentifier,
-        type OpenChat,
-        type VideoCallType,
-    } from "@client";
-    import { getContext } from "svelte";
-    import Phone from "svelte-material-icons/Phone.svelte";
-    import PhoneHangup from "svelte-material-icons/PhoneHangup.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import {
-        activeVideoCall,
-        incomingVideoCall,
-        ringtoneUrls,
-        selectedRingtone,
-        type IncomingVideoCall,
-        type RingtoneKey,
-    } from "../../../stores/video";
-    import Translatable from "../../Translatable.svelte";
-
-    interface Props {
-        onJoinVideoCall: (chatId: ChatIdentifier, callType: VideoCallType) => void;
-    }
-
-    let { onJoinVideoCall }: Props = $props();
-
-    const client = getContext<OpenChat>("client");
-
-    const chat = $derived(normaliseChatSummary($incomingVideoCall));
-    const ringtoneUrl = $derived(ringtoneUrls[$selectedRingtone as RingtoneKey]);
-    const isOnAnotherCall = $derived($activeVideoCall !== undefined);
-
-    function normaliseChatSummary(call: IncomingVideoCall | undefined) {
-        if (call) {
-            const chat = client.lookupChatSummary(call.chatId);
-            const initiator = $allUsersStore.get(call.userId);
-            if (chat && initiator) {
-                switch (chat.kind) {
-                    case "direct_chat":
-                        const them = $allUsersStore.get(chat.them.userId);
-                        return {
-                            chatId: chat.id,
-                            name: client.displayName(them),
-                            avatarUrl: client.userAvatarUrl(them),
-                            initiator: initiator.username,
-                        };
-                    case "group_chat":
-                        return {
-                            chatId: chat.id,
-                            name: chat.name,
-                            avatarUrl: client.groupAvatarUrl(chat),
-                            initiator: initiator.username,
-                        };
-                    case "channel":
-                        return {
-                            chatId: chat.id,
-                            name: `${
-                                $communitiesStore.get({
-                                    kind: "community",
-                                    communityId: chat.id.communityId,
-                                })?.name
-                            } > ${chat.name}`,
-                            avatarUrl: client.groupAvatarUrl(chat, $selectedCommunitySummaryStore),
-                            initiator: initiator.username,
-                        };
-                }
-            }
-        }
-    }
-
-    function join() {
-        if ($incomingVideoCall !== undefined) {
-            onJoinVideoCall($incomingVideoCall.chatId, $incomingVideoCall.callType);
-        }
-    }
-
-    function cancel() {
-        incomingVideoCall.set(undefined);
-    }
-</script>
-
-{#if chat !== undefined}
-    {#if !isOnAnotherCall}
-        <audio playsinline={true} autoplay={true} src={ringtoneUrl} muted={false} preload="auto">
-        </audio>
-    {/if}
-    <Sheet onDismiss={cancel}>
-        <Column gap={"xxl"} padding={"xxxl"}>
-            <Row gap={"lg"}>
-                <Avatar url={chat.avatarUrl} size={"lg"} />
-                <Column>
-                    <Subtitle fontWeight={"bold"}>{chat.name}</Subtitle>
-                    <Body colour={"textSecondary"}>
-                        <Translatable
-                            resourceKey={i18nKey("videoCall.remoteStart", {
-                                name: chat.initiator,
-                            })} />
-                    </Body>
-                </Column>
-            </Row>
-            <Row
-                padding={["zero", "xl"]}
-                gap={"lg"}
-                crossAxisAlignment={"center"}
-                mainAxisAlignment={"spaceAround"}>
-                {@render button(PhoneHangup, ColourVars.error, cancel)}
-                {@render button(Phone, ColourVars.success, join)}
-            </Row>
-        </Column>
-    </Sheet>
-{/if}
-
-{#snippet button(Icon: any, colour: string, onClick: () => void)}
-    <Column
-        mainAxisAlignment={"center"}
-        crossAxisAlignment={"center"}
-        borderRadius={"circle"}
-        {onClick}
-        backgroundColor={colour}
-        width={{ size: "5rem" }}
-        height={{ size: "5rem" }}>
-        <Icon size={"2.5rem"} color={ColourVars.textPrimary} />
-    </Column>
-{/snippet}
diff --git a/frontend/app/src/components_mobile/home/video/VideoCallAccessRequests.svelte b/frontend/app/src/components_mobile/home/video/VideoCallAccessRequests.svelte
deleted file mode 100644
index 42ec93339b..0000000000
--- a/frontend/app/src/components_mobile/home/video/VideoCallAccessRequests.svelte
+++ /dev/null
@@ -1,83 +0,0 @@
-<script lang="ts">
-    import { Avatar } from "component-lib";
-    import { allUsersStore, iconSize, type OpenChat } from "@client";
-    import { getContext } from "svelte";
-    import ThumbDown from "svelte-material-icons/ThumbDown.svelte";
-    import ThumbUp from "svelte-material-icons/ThumbUp.svelte";
-    import { cubicInOut } from "svelte/easing";
-    import { fly } from "svelte/transition";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { activeVideoCall, type RequestToSpeak } from "../../../stores/video";
-    import Translatable from "../../Translatable.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    let requests = $derived($activeVideoCall?.accessRequests ?? []);
-
-    function approve(request: RequestToSpeak) {
-        activeVideoCall.approveAccessRequest(request);
-    }
-
-    function reject(request: RequestToSpeak) {
-        activeVideoCall.rejectAccessRequest(request);
-    }
-</script>
-
-{#each requests as request, i}
-    <div
-        style={`top: ${50 + i * 8}px; right: ${50 + i * 8}px;`}
-        in:fly={{
-            duration: 300,
-            y: -500,
-            opacity: 0,
-            easing: cubicInOut,
-        }}
-        out:fly={{
-            duration: 300,
-            x: 500,
-            opacity: 0,
-            easing: cubicInOut,
-        }}
-        class="message">
-        <div class="avatar">
-            <Avatar url={client.userAvatarUrl($allUsersStore.get(request.userId))} size={"sm"} />
-        </div>
-        <Translatable
-            resourceKey={i18nKey("videoCall.accessRequest", {
-                username: $allUsersStore.get(request.userId)?.username,
-            })} />
-        <!-- svelte-ignore a11y_interactive_supports_focus -->
-        <!-- svelte-ignore a11y_click_events_have_key_events -->
-        <div role="button" onclick={() => approve(request)} class="btn">
-            <ThumbUp size={$iconSize} color={"var(--vote-yes-color)"} />
-        </div>
-        <!-- svelte-ignore a11y_interactive_supports_focus -->
-        <!-- svelte-ignore a11y_click_events_have_key_events -->
-        <div role="button" onclick={() => reject(request)} class="btn">
-            <ThumbDown size={$iconSize} color={"var(--vote-no-color)"} />
-        </div>
-    </div>
-{/each}
-
-<style lang="scss">
-    .message {
-        position: absolute;
-        @include z-index("toast");
-        padding: $sp4;
-        width: 100%;
-        max-width: 800px;
-        margin: 0 $sp4;
-        display: flex;
-        gap: $sp4;
-        justify-content: center;
-        align-items: center;
-        border: 1px solid var(--bd);
-        background-color: var(--modal-bg);
-        box-shadow: var(--modal-sh);
-        color: var(--txt);
-
-        .btn {
-            cursor: pointer;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/wallet/AccountSelector.svelte b/frontend/app/src/components_mobile/home/wallet/AccountSelector.svelte
deleted file mode 100644
index ca658d6571..0000000000
--- a/frontend/app/src/components_mobile/home/wallet/AccountSelector.svelte
+++ /dev/null
@@ -1,98 +0,0 @@
-<script lang="ts">
-    import {
-        Body,
-        Column,
-        Container,
-        DefaultAvatar,
-        Option,
-        Search,
-        Sheet,
-        Subtitle,
-    } from "component-lib";
-    import { namedAccountsStore, type NamedAccount } from "@client";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Translatable from "../../Translatable.svelte";
-
-    interface Props {
-        targetAccount: string;
-        onDismiss: () => void;
-    }
-
-    let { targetAccount = $bindable(), onDismiss }: Props = $props();
-    let searching = $state(false);
-    let searchTerm = $state<string>("");
-    let searchTermLower = $derived(searchTerm?.toLowerCase());
-    let filteredAccounts = $derived(
-        $namedAccountsStore.filter(
-            ({ account, name }) =>
-                searchTermLower === "" ||
-                name.toLowerCase().includes(searchTermLower) ||
-                account.toLowerCase().includes(searchTermLower),
-        ),
-    );
-
-    function collapseAccount(account: string) {
-        if (account.length > 23) {
-            return account.slice(0, 10) + "..." + account.slice(account.length - 10);
-        }
-        return account;
-    }
-
-    function selectAccount(namedAccount: NamedAccount) {
-        targetAccount = namedAccount.account;
-        onDismiss();
-    }
-</script>
-
-<Sheet {onDismiss}>
-    <Container
-        supplementalClass={"account_selector"}
-        padding={["lg", "zero", "zero"]}
-        gap={"xxl"}
-        direction={"vertical"}>
-        <Container padding={["zero", "xxl"]} crossAxisAlignment={"center"}>
-            <Subtitle fontWeight={"bold"}>
-                <Translatable resourceKey={i18nKey("Select saved address")}></Translatable>
-            </Subtitle>
-        </Container>
-
-        <Column gap="xs">
-            <Container padding={["zero", "lg"]}>
-                <Search
-                    {searching}
-                    id={"search_component"}
-                    placeholder={"Find address..."}
-                    bind:value={searchTerm} />
-            </Container>
-
-            <Container
-                supplementalClass={"token_selector"}
-                direction={"vertical"}
-                padding={["xxl", "lg", "huge"]}
-                overflow="auto"
-                maxHeight="60vh"
-                gap="md">
-                {#each filteredAccounts as account}
-                    <Option
-                        padding={["sm", "lg", "sm", "sm"]}
-                        selected={account.account === targetAccount}
-                        value={account}
-                        onClick={() => selectAccount(account)}>
-                        <Container gap="md" overflow="hidden" crossAxisAlignment="center">
-                            <DefaultAvatar
-                                icon="recipient"
-                                size="md"
-                                name={account.name}
-                                variant="filled" />
-                            <Column>
-                                <Subtitle fontWeight={"bold"}>{account.name}</Subtitle>
-                                <Body ellipsisTruncate colour={"textSecondary"}
-                                    >{collapseAccount(account.account)}</Body>
-                            </Column>
-                        </Container>
-                    </Option>
-                {/each}
-            </Container>
-        </Column>
-    </Container>
-</Sheet>
diff --git a/frontend/app/src/components_mobile/home/wallet/Accounts.svelte b/frontend/app/src/components_mobile/home/wallet/Accounts.svelte
deleted file mode 100644
index c6b9a09616..0000000000
--- a/frontend/app/src/components_mobile/home/wallet/Accounts.svelte
+++ /dev/null
@@ -1,103 +0,0 @@
-<script lang="ts">
-    import { BodySmall, Container, Sheet } from "component-lib";
-    import {
-        walletTokensSorted as accountsSorted,
-        i18nKey,
-        publish,
-        type OpenChat,
-    } from "@client";
-    import { getContext, onMount } from "svelte";
-    import ErrorMessage from "../../ErrorMessage.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import RestrictedFeature from "../profile/RestrictedFeature.svelte";
-    import WalletToken from "./WalletToken.svelte";
-    import type { ConversionToken } from "./walletState.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        selectedConversion?: ConversionToken;
-    }
-
-    let { selectedConversion = $bindable("usd") }: Props = $props();
-
-    let balanceError: string | undefined = $state();
-    let actionMode: "none" | "swap" | "restricted" = $state("none");
-    let selectedLedger: string | undefined = $state(undefined);
-
-    onMount(() => client.refreshSwappableTokens());
-
-    function hideManageModal() {
-        actionMode = "none";
-    }
-
-    function removeFromWallet(ledger: string) {
-        client.removeTokenFromWallet(ledger);
-    }
-</script>
-
-{#if actionMode !== "none" && selectedLedger !== undefined}
-    <Sheet onDismiss={hideManageModal}>
-        {#if actionMode === "swap"}
-            <ErrorMessage>TODO - get rid of this</ErrorMessage>
-        {:else if actionMode === "restricted"}
-            <RestrictedFeature onClose={hideManageModal} feature="swap" />
-        {/if}
-    </Sheet>
-{/if}
-
-{#snippet header_item(key: string)}
-    <BodySmall colour="textTertiary" fontWeight="bold" width="hug">
-        <Translatable resourceKey={i18nKey(`appWallet.header.${key}`)} />
-    </BodySmall>
-{/snippet}
-
-<Container
-    closeMenuOnScroll
-    height={"fill"}
-    direction={"vertical"}
-    padding={["zero", "sm", "huge"]}
-    overflow="initial">
-    <!-- Tokens header -->
-    <!-- TODO stick headers to top when scrolling -->
-    <Container supplementalClass="wallet_tokens_header" gap="md">
-        <Container crossAxisAlignment="start" width="fill">
-            {@render header_item("asset")}
-        </Container>
-        <Container mainAxisAlignment="end" width={{ size: "6rem" }}>
-            {@render header_item("holdings")}
-        </Container>
-        <!-- TODO enable asc desc sorting by total! -->
-        <Container mainAxisAlignment="end" width={{ size: "6rem" }}>
-            {@render header_item("total")}
-        </Container>
-    </Container>
-    <!-- Tokens list -->
-    {#each $accountsSorted as token (token.ledger)}
-        <WalletToken
-            withMenu
-            onClick={(tokenState) => publish("tokenPage", tokenState)}
-            {selectedConversion}
-            {token}
-            onRemoveFromWallet={removeFromWallet} />
-    {/each}
-    {#if balanceError !== undefined}
-        <ErrorMessage>{balanceError}</ErrorMessage>
-    {/if}
-</Container>
-
-<style lang="scss">
-    :global(.manage .link-button) {
-        padding: 0 0 0 $sp3;
-        &:first-child {
-            border-right: 1px solid var(--txt-light);
-            padding: 0 $sp3 0 0;
-        }
-    }
-
-    :global(.wallet_tokens_header) {
-        padding-left: 4.25rem !important;
-        padding-right: 2.5rem !important;
-        padding-bottom: var(--sp-sm) !important;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/wallet/ReceiveCrypto.svelte b/frontend/app/src/components_mobile/home/wallet/ReceiveCrypto.svelte
deleted file mode 100644
index 5c21d967db..0000000000
--- a/frontend/app/src/components_mobile/home/wallet/ReceiveCrypto.svelte
+++ /dev/null
@@ -1,61 +0,0 @@
-<script lang="ts">
-    import MulticolourText from "@src/components_mobile/MulticolourText.svelte";
-    import { Avatar, Body, Column, Row } from "component-lib";
-    import { publish, type OpenChat } from "@client";
-    import { getContext } from "svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import ErrorMessage from "../../ErrorMessage.svelte";
-    import AccountInfo from "../AccountInfo.svelte";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
-    import type { TokenState } from "./walletState.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        tokenState: TokenState;
-    }
-
-    let { tokenState }: Props = $props();
-
-    let error: string | undefined = $state(undefined);
-
-    let title = $derived(i18nKey(`cryptoAccount.receiveToken`, { symbol: tokenState.symbol }));
-
-    function onBack() {
-        tokenState.refreshBalance(client);
-        publish("closeModalPage");
-    }
-</script>
-
-<SlidingPageContent {onBack} {title}>
-    <Column gap={"lg"} padding={"lg"}>
-        <Row gap={"lg"} padding={["lg", "md"]}>
-            <Avatar size={"lg"} url={tokenState.logo} />
-            <Body>
-                <MulticolourText
-                    parts={[
-                        {
-                            text: i18nKey("Have your "),
-                            colour: "textPrimary",
-                        },
-                        {
-                            text: i18nKey(tokenState.symbol),
-                            colour: "primary",
-                        },
-                        {
-                            text: i18nKey(
-                                " address QR code scanned by the sender, or copy / paste it in a message!",
-                            ),
-                            colour: "textPrimary",
-                        },
-                    ]} />
-            </Body>
-        </Row>
-        <Column mainAxisAlignment={"center"}>
-            <AccountInfo ledger={tokenState.ledger} />
-            {#if error}
-                <ErrorMessage>{error}</ErrorMessage>
-            {/if}
-        </Column>
-    </Column>
-</SlidingPageContent>
diff --git a/frontend/app/src/components_mobile/home/wallet/SendCrypto.svelte b/frontend/app/src/components_mobile/home/wallet/SendCrypto.svelte
deleted file mode 100644
index e558453724..0000000000
--- a/frontend/app/src/components_mobile/home/wallet/SendCrypto.svelte
+++ /dev/null
@@ -1,60 +0,0 @@
-<script lang="ts">
-    import { BigButton, Container } from "component-lib";
-    import ChatPlus from "svelte-material-icons/ChatPlusOutline.svelte";
-    import Wallet from "svelte-material-icons/WalletOutline.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Translatable from "../../Translatable.svelte";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
-    import SendToAddress from "./SendToAddress.svelte";
-    import SendToUser from "./SendToUser.svelte";
-    import TokenCard from "./TokenCard.svelte";
-    import { TokenState } from "./walletState.svelte";
-
-    interface Props {
-        tokenState: TokenState;
-        onClose: () => void;
-    }
-
-    let { tokenState, onClose }: Props = $props();
-
-    let mode = $state<"user" | "address">("user");
-    let title = $derived(i18nKey("cryptoAccount.sendToken", { symbol: tokenState.symbol }));
-</script>
-
-<SlidingPageContent {title}>
-    <Container
-        mainAxisAlignment={"spaceBetween"}
-        height={"fill"}
-        gap={"xl"}
-        padding={"xl"}
-        direction={"vertical"}>
-        <TokenCard {tokenState} />
-
-        <Container gap={"xl"} height={"fill"} direction={"vertical"}>
-            {#if mode === "user"}
-                <SendToUser onComplete={onClose} {tokenState} />
-            {:else if mode === "address"}
-                <SendToAddress onComplete={onClose} {tokenState} />
-            {/if}
-        </Container>
-
-        <Container gap={"sm"}>
-            <BigButton
-                onClick={() => (mode = "user")}
-                mode={mode === "user" ? "active" : "default"}>
-                {#snippet icon(color)}
-                    <ChatPlus {color} />
-                {/snippet}
-                <Translatable resourceKey={i18nKey("Send to user")} />
-            </BigButton>
-            <BigButton
-                onClick={() => (mode = "address")}
-                mode={mode === "address" ? "active" : "default"}>
-                {#snippet icon(color)}
-                    <Wallet {color} />
-                {/snippet}
-                <Translatable resourceKey={i18nKey("Send to address")} />
-            </BigButton>
-        </Container>
-    </Container>
-</SlidingPageContent>
diff --git a/frontend/app/src/components_mobile/home/wallet/SetPinNumberModal.svelte b/frontend/app/src/components_mobile/home/wallet/SetPinNumberModal.svelte
deleted file mode 100644
index 3b63276e28..0000000000
--- a/frontend/app/src/components_mobile/home/wallet/SetPinNumberModal.svelte
+++ /dev/null
@@ -1,224 +0,0 @@
-<script lang="ts">
-    import type { DelegationChain, ECDSAKeyIdentity } from "@icp-sdk/core/identity";
-    import { Body, Button, Container, Subtitle } from "component-lib";
-    import {
-        AuthProvider,
-        pinNumberFailureStore,
-        type OpenChat,
-        type Verification,
-    } from "@client";
-    import { getContext, onMount } from "svelte";
-    import Lock from "svelte-material-icons/Lock.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import {
-        pinNumberErrorMessageStore,
-        supportsForgot,
-        type PinOperation,
-    } from "../../../stores/pinNumber";
-    import { toastStore } from "../../../stores/toast";
-    import ErrorMessage from "../../ErrorMessage.svelte";
-    import Pincode from "../../pincode/Pincode.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import ForgotPinLabel from "../ForgotPinLabel.svelte";
-    import ReAuthenticate from "../profile/ReAuthenticate.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        type: PinOperation;
-        onPinSet?: (pin: string | undefined) => void;
-        onClose: () => void;
-    }
-
-    let { type = $bindable(), onClose, onPinSet }: Props = $props();
-
-    let busy = $state(false);
-    let currPinArray: string[] = $state([]);
-    let newPinArray: string[] = $state([]);
-    let signInProofJwt: string | undefined = $state(undefined);
-
-    onMount(() => {
-        pinNumberFailureStore.set(undefined);
-    });
-
-    function isPinValid(pin: string[]): boolean {
-        return pin.filter((c) => /^[0-9]$/.test(c)).length === 6;
-    }
-
-    function getVerification(): Verification {
-        if (signInProofJwt !== undefined) {
-            return {
-                kind: "reauthenticated",
-                signInProofJwt,
-            };
-        }
-
-        if (type.kind === "clear" || type.kind === "change") {
-            return {
-                kind: "pin_verification",
-                pin: currPinArray.join(""),
-            };
-        }
-
-        return { kind: "no_verification" };
-    }
-
-    function changePin(): Promise<void> {
-        const newPin = type.kind === "clear" ? undefined : newPinArray.join("");
-
-        busy = true;
-
-        return client
-            .setPinNumber(getVerification(), newPin)
-            .then((resp) => {
-                if (resp.kind === "success") {
-                    toastStore.showSuccessToast(i18nKey(`pinNumber.${type.kind}PinSuccess`));
-                    onPinSet?.(newPin);
-                    onClose();
-                } else {
-                    console.log("SetPinNumber failed", resp);
-                }
-            })
-            .finally(() => {
-                busy = false;
-            });
-    }
-
-    function reauthenticated(detail: {
-        key: ECDSAKeyIdentity;
-        delegation: DelegationChain;
-        provider: AuthProvider;
-        signInProofJwt: string;
-    }) {
-        if (type.kind !== "forgot") return;
-
-        signInProofJwt = detail.signInProofJwt;
-
-        switch (type.while.kind) {
-            case "clear":
-                type = { kind: "clear" };
-                changePin(); // no further input is required so just do it
-                break;
-            default:
-                type = { kind: "change" };
-        }
-    }
-
-    function onForgot() {
-        if (supportsForgot(type)) {
-            type = {
-                kind: "forgot",
-                while: type,
-            };
-        }
-    }
-
-    let title = $derived(i18nKey(`pinNumber.${type.kind}PinTitle`));
-    let message = $derived(
-        type.kind === "change" ? undefined : i18nKey(`pinNumber.${type.kind}PinMessage`),
-    );
-    let action = $derived(i18nKey(`pinNumber.${type.kind}Pin`));
-    let verificationValid = $derived(isPinValid(currPinArray) || signInProofJwt !== undefined);
-    let changeValid = $derived(
-        type.kind === "change" && isPinValid(newPinArray) && verificationValid,
-    );
-    let setValid = $derived(type.kind === "set" && isPinValid(newPinArray));
-    let clearValid = $derived(type.kind === "clear" && verificationValid);
-    let isValid = $derived(type.kind === "forgot" || changeValid || setValid || clearValid);
-    let showCurrentPin = $derived(type.kind !== "set" && signInProofJwt === undefined);
-    let errorMessage = $derived($pinNumberErrorMessageStore);
-</script>
-
-<Container height={"hug"} padding={"xl"} gap={"xl"} direction={"vertical"}>
-    <Subtitle fontWeight={"bold"}>
-        <Translatable resourceKey={title} />
-    </Subtitle>
-
-    <Container direction={"vertical"} gap={"lg"}>
-        {#if type.kind === "forgot"}
-            {#if message !== undefined}
-                <ReAuthenticate onSuccess={reauthenticated} {message} />
-            {/if}
-        {:else}
-            {#if message !== undefined}
-                <Body colour={"textSecondary"}>
-                    <Translatable resourceKey={message} />
-                </Body>
-            {/if}
-            {#if showCurrentPin}
-                <Container
-                    overflow={"visible"}
-                    crossAxisAlignment={"center"}
-                    direction={"vertical"}>
-                    <Pincode
-                        subtext={type.kind === "change"
-                            ? i18nKey("pinNumber.currentPin")
-                            : undefined}
-                        length={6}
-                        bind:code={currPinArray} />
-                </Container>
-            {/if}
-            {#if type.kind !== "clear"}
-                <Pincode
-                    subtext={type.kind === "change" ? i18nKey("pinNumber.newPin") : undefined}
-                    length={6}
-                    bind:code={newPinArray} />
-            {/if}
-        {/if}
-    </Container>
-
-    {#if type.kind !== "forgot"}
-        <Container
-            padding={["xl", "zero", "zero", "zero"]}
-            direction={"vertical"}
-            gap={"xs"}
-            crossAxisAlignment={"center"}>
-            <Button loading={busy} disabled={busy || !isValid} onClick={changePin}>
-                {#snippet icon(color)}
-                    <Lock {color} />
-                {/snippet}
-                <Translatable resourceKey={action} />
-            </Button>
-            {#if type.kind !== "set"}
-                <ForgotPinLabel {onForgot} />
-            {/if}
-        </Container>
-    {/if}
-
-    {#if errorMessage !== undefined}
-        <ErrorMessage>
-            <Translatable resourceKey={errorMessage} />
-        </ErrorMessage>
-    {/if}
-
-    <!-- <Container gap={"md"} crossAxisAlignment={"end"} mainAxisAlignment={"end"}>
-        {#if type.kind === "forgot"}
-            <CommonButton disabled={busy} onClick={onClose} size={"medium"}>
-                <Translatable resourceKey={i18nKey("cancel")} />
-            </CommonButton>
-        {:else}
-            <CommonButton disabled={busy} onClick={onClose} size={"small_text"}>
-                <Translatable resourceKey={i18nKey("cancel")} />
-            </CommonButton>
-            <CommonButton
-                loading={busy}
-                disabled={busy || !isValid}
-                onClick={changePin}
-                mode={"active"}
-                size={"medium"}>
-                {#snippet icon(color)}
-                    <ShieldPlusOutline {color} />
-                {/snippet}
-                <Translatable resourceKey={action} />
-            </CommonButton>
-        {/if}
-    </Container> -->
-</Container>
-
-<style lang="scss">
-    .code {
-        display: flex;
-        flex-direction: column;
-        gap: $sp3;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/wallet/SwapCrypto.svelte b/frontend/app/src/components_mobile/home/wallet/SwapCrypto.svelte
deleted file mode 100644
index 6873346e1c..0000000000
--- a/frontend/app/src/components_mobile/home/wallet/SwapCrypto.svelte
+++ /dev/null
@@ -1,547 +0,0 @@
-<script lang="ts">
-    import {
-        Avatar,
-        Body,
-        BodySmall,
-        ColourVars,
-        Column,
-        CommonButton2,
-        Container,
-        Switch,
-    } from "component-lib";
-    import {
-        exchangeRatesLookupStore as exchangeRatesLookup,
-        formatTokens,
-        swappableTokensStore,
-        type DexId,
-        type EnhancedTokenDetails,
-        type InterpolationValues,
-        type OpenChat,
-        type ResourceKey,
-    } from "@client";
-    import { random128 } from "@shared";
-    import { getContext, onMount } from "svelte";
-    import { _ } from "svelte-i18n";
-    import Alert from "svelte-material-icons/AlertOutline.svelte";
-    import ArrowDown from "svelte-material-icons/ArrowDown.svelte";
-    import Check from "svelte-material-icons/Check.svelte";
-    import ChevronDown from "svelte-material-icons/ChevronDown.svelte";
-    import Info from "svelte-material-icons/InformationOutline.svelte";
-    import ShareOutline from "svelte-material-icons/ShareOutline.svelte";
-    import SwapVertical from "svelte-material-icons/SwapVertical.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { pinNumberErrorMessageStore } from "../../../stores/pinNumber";
-    import { calculateDollarAmount } from "../../../utils/exchange";
-    import ErrorMessage from "../../ErrorMessage.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
-    import TokenInput from "../TokenInput.svelte";
-    import SwapProgress from "./SwapProgress.svelte";
-    import TokenCard from "./TokenCard.svelte";
-    import TokenSelector from "./TokenSelector.svelte";
-    import { TokenState } from "./walletState.svelte";
-
-    interface Props {
-        inToken: TokenState;
-        onClose: () => void;
-    }
-
-    let { inToken = $bindable() }: Props = $props();
-
-    const client = getContext<OpenChat>("client");
-
-    type TokenSelectorParams = {
-        title: ResourceKey;
-        onSelect: (token: EnhancedTokenDetails) => void;
-        extraFilter?: (token: EnhancedTokenDetails) => boolean;
-    };
-    type SwapState = "quote" | "swap";
-
-    let outToken = $state<TokenState>();
-    let ledgerIn = $derived(inToken.ledger);
-    let tokenSelector = $state<TokenSelectorParams>();
-    let error: string | undefined = $state(undefined);
-    let busy = $state(false);
-    let valid = $state(false);
-    let swapState = $state<SwapState>("quote");
-    let validAmount = $state(false);
-    let ledgerOut = $derived(outToken?.ledger);
-    let swaps = $state({} as Record<string, DexId[]>);
-    let swapMessageValues: InterpolationValues | undefined = $state(undefined);
-    let bestQuote: [DexId, bigint] | undefined = $state(undefined);
-    let swapId: bigint | undefined = $state();
-    let userAcceptedWarning = $state(false);
-    let warnValueUnknown = $state(false);
-    let warnValueDropped = $state(false);
-    let initialized = $state(false);
-    let detailsIn = $derived(inToken.token);
-    let detailsOut = $derived(outToken?.token);
-    let anySwapsAvailable = $derived(Object.keys(swaps).length > 0 && detailsOut !== undefined);
-    let swapping = $derived(swapState === "swap" && busy);
-    let amountInText = $derived(formatTokens(inToken.draftAmount, detailsIn.decimals));
-
-    onMount(() => loadSwaps(inToken.ledger));
-
-    function quote() {
-        if (!valid) return;
-
-        busy = true;
-        error = undefined;
-        swapId = undefined;
-
-        client
-            .getTokenSwapQuotes(
-                ledgerIn,
-                ledgerOut!,
-                inToken.draftAmount - BigInt(2) * detailsIn.transferFee,
-            )
-            .then((response) => {
-                if (response.length === 0) {
-                    error = $_("tokenSwap.noQuotes", { values: { tokenIn: detailsIn.symbol } });
-                } else {
-                    bestQuote = response[0];
-
-                    const [dexId, quote] = bestQuote!;
-
-                    const amountOutText = formatTokens(quote, detailsOut!.decimals);
-                    const rate = (Number(amountOutText) / Number(amountInText)).toPrecision(3);
-                    const dex = dexName(dexId);
-                    const minAmountOut = BigInt(10) * detailsOut!.transferFee;
-                    const minAmountOutText = formatTokens(minAmountOut, detailsOut!.decimals);
-
-                    const usdInText = calculateDollarAmount(
-                        inToken.draftAmount,
-                        $exchangeRatesLookup.get(detailsIn.symbol.toLowerCase())?.toUSD,
-                        detailsIn.decimals,
-                    );
-                    const usdOutText = calculateDollarAmount(
-                        bestQuote[1],
-                        $exchangeRatesLookup.get(detailsOut!.symbol.toLowerCase())?.toUSD,
-                        detailsOut!.decimals,
-                    );
-
-                    warnValueUnknown = usdInText === "???" || usdOutText === "???";
-                    warnValueDropped =
-                        !warnValueUnknown && Number(usdOutText) < 0.9 * Number(usdInText);
-
-                    swapMessageValues = {
-                        amountIn: amountInText,
-                        tokenIn: detailsIn.symbol,
-                        rate,
-                        amountOut: amountOutText,
-                        tokenOut: detailsOut!.symbol,
-                        dex,
-                        minAmountOut: minAmountOutText,
-                        usdOut: usdOutText,
-                        usdIn: usdInText,
-                    };
-
-                    if (quote > minAmountOut) {
-                        swapState = "swap";
-                    } else {
-                        error = $_("tokenSwap.quoteTooLow", { values: swapMessageValues });
-                    }
-                }
-            })
-            .catch((err) => {
-                client.logError(`Error getting swap quotes for token: ${detailsIn.symbol}`, err);
-                error = $_("tokenSwap.quoteError", { values: { tokenIn: detailsIn.symbol } });
-            })
-            .finally(() => (busy = false));
-    }
-
-    function swap() {
-        if (!valid || bestQuote === undefined) return;
-
-        busy = true;
-        error = undefined;
-
-        const ledgerInLocal = ledgerIn;
-        const ledgerOutLocal = ledgerOut!;
-        const bestQuoteLocal = bestQuote;
-
-        let minAmountOut = (bestQuoteLocal[1] * BigInt(98)) / BigInt(100);
-
-        client
-            .refreshAccountBalance(ledgerIn)
-            .then((balance) => {
-                if (balance < inToken.draftAmount) {
-                    error = $_("tokenSwap.progress.insufficientFunds");
-                    return false;
-                } else {
-                    return true;
-                }
-            })
-            .then((balanceCheckSuccess) => {
-                if (balanceCheckSuccess) {
-                    swapId = random128();
-                    return client.swapTokens(
-                        swapId,
-                        ledgerInLocal,
-                        ledgerOutLocal,
-                        inToken.draftAmount,
-                        minAmountOut,
-                        bestQuoteLocal[0],
-                    );
-                }
-            })
-            .catch(() => {
-                swapId = undefined;
-                busy = false;
-            });
-    }
-
-    function dexName(dex: DexId): string {
-        switch (dex) {
-            case "icpswap":
-                return "ICPSwap";
-            case "taco":
-                return "TACO";
-        }
-        return dex;
-    }
-
-    function loadSwaps(ledger: string) {
-        client.getTokenSwaps(ledger).then((results) => {
-            outToken = undefined;
-            swaps = results;
-            client.refreshSwappableTokens();
-            initialized = true;
-        });
-    }
-
-    function onPrimaryClick() {
-        switch (swapState) {
-            case "quote":
-                quote();
-                break;
-            case "swap":
-                swap();
-                break;
-        }
-    }
-
-    $effect(() => {
-        valid =
-            anySwapsAvailable &&
-            validAmount &&
-            (swapState === "swap"
-                ? (bestQuote !== undefined && userAcceptedWarning) ||
-                  (!warnValueUnknown && !warnValueDropped)
-                : true);
-    });
-
-    let pinNumberError = $derived($pinNumberErrorMessageStore);
-
-    function selectFrom() {
-        tokenSelector = {
-            title: i18nKey("Select token to swap from"),
-            onSelect: (token: EnhancedTokenDetails) => {
-                inToken = new TokenState(token, "usd");
-                tokenSelector = undefined;
-                loadSwaps(inToken.ledger);
-            },
-            extraFilter: (token: EnhancedTokenDetails) =>
-                $swappableTokensStore.has(token.ledger) &&
-                token.symbol !== outToken?.symbol &&
-                token.balance > 0n,
-        };
-    }
-
-    function selectTo() {
-        tokenSelector = {
-            title: i18nKey("Select token to swap to"),
-            onSelect: (token: EnhancedTokenDetails) => {
-                outToken = new TokenState(token, "usd");
-                tokenSelector = undefined;
-            },
-            extraFilter: (token: EnhancedTokenDetails) =>
-                $swappableTokensStore.has(token.ledger) && token.symbol !== inToken?.symbol,
-        };
-    }
-</script>
-
-{#snippet swapIcon(color: string, size: string)}
-    <SwapVertical {color} {size} />
-{/snippet}
-
-{#if tokenSelector !== undefined}
-    <TokenSelector
-        icon={swapIcon}
-        onSelect={tokenSelector.onSelect}
-        placeholder={i18nKey("Find token...")}
-        extraFilter={tokenSelector.extraFilter}
-        onDismiss={() => (tokenSelector = undefined)}
-        title={tokenSelector.title} />
-{/if}
-
-{#snippet selectedToken(onClick: () => void, token?: EnhancedTokenDetails)}
-    <Container
-        {onClick}
-        background={ColourVars.textTertiary}
-        height={{ size: "3.5rem" }}
-        padding={["xs", "md"]}
-        borderRadius={"circle"}
-        gap={"sm"}
-        mainAxisAlignment={"spaceBetween"}
-        crossAxisAlignment={"center"}>
-        {#if token !== undefined}
-            <Container crossAxisAlignment={"center"} gap={"sm"}>
-                <Avatar url={token.logo} customSize={"1.5rem"}></Avatar>
-                <Body fontWeight={"bold"}>
-                    {token.symbol}
-                </Body>
-            </Container>
-        {:else}
-            <Container padding={["zero", "zero", "zero", "sm"]}>
-                <Body colour="textPlaceholder">
-                    <Translatable resourceKey={i18nKey("Choose token...")} />
-                </Body>
-            </Container>
-        {/if}
-        <ChevronDown color={"var(--text-placeholder)"} size="1.5rem" />
-    </Container>
-{/snippet}
-
-{#snippet quoteView()}
-    <Container
-        background={ColourVars.background1}
-        gap={"xl"}
-        direction={"vertical"}
-        borderRadius={"lg"}
-        padding={["xl", "lg"]}>
-        <Container direction={"vertical"} gap={"md"} crossAxisAlignment={"center"}>
-            {@render selectedToken(selectFrom, inToken.token)}
-            <Container
-                supplementalClass={"swap_down_arrow"}
-                width={{ size: "2.5rem" }}
-                borderRadius={"circle"}
-                background={ColourVars.background1}
-                mainAxisAlignment={"center"}
-                crossAxisAlignment={"center"}>
-                <ArrowDown size={"1.5rem"} />
-            </Container>
-            {@render selectedToken(selectTo, outToken?.token)}
-        </Container>
-
-        <TokenInput
-            balance={inToken.cryptoBalance}
-            ledger={inToken.ledger}
-            minAmount={inToken.minAmount}
-            disabled={busy}
-            error={!validAmount}
-            bind:valid={validAmount}
-            bind:amount={inToken.draftAmount}>
-            {#snippet subtext()}
-                {`Minimum amount ${inToken.minAmountLabel} ${inToken.symbol}`}
-            {/snippet}
-        </TokenInput>
-    </Container>
-{/snippet}
-
-{#snippet swapView()}
-    {#if outToken !== undefined && swapMessageValues !== undefined}
-        <TokenCard tokenState={outToken} />
-        <Container
-            gap={"lg"}
-            background={ColourVars.background1}
-            padding={"lg"}
-            borderRadius={"lg"}
-            direction={"vertical"}>
-            <Container mainAxisAlignment={"spaceBetween"}>
-                <BodySmall colour={"textSecondary"}>
-                    <Translatable resourceKey={i18nKey("You swap")} />
-                </BodySmall>
-                <Container crossAxisAlignment={"end"} width={"hug"} direction={"vertical"}>
-                    <Body align={"end"} width={"hug"} fontWeight={"bold"}>
-                        {`${swapMessageValues.amountIn} ${swapMessageValues.tokenIn}`}
-                    </Body>
-                    <BodySmall
-                        align={"end"}
-                        width={"hug"}
-                        fontWeight={"bold"}
-                        colour={"textSecondary"}>
-                        ≈ ${swapMessageValues.usdIn}
-                    </BodySmall>
-                </Container>
-            </Container>
-            <Container mainAxisAlignment={"spaceBetween"}>
-                <BodySmall colour={"textSecondary"}>
-                    <Translatable resourceKey={i18nKey("You receive (approx.)")} />
-                </BodySmall>
-                <Container crossAxisAlignment={"end"} width={"hug"} direction={"vertical"}>
-                    <Body align={"end"} width={"hug"} colour={"primary"} fontWeight={"bold"}>
-                        {`${swapMessageValues.amountOut} ${swapMessageValues.tokenOut}`}
-                    </Body>
-                    <BodySmall
-                        align={"end"}
-                        width={"hug"}
-                        fontWeight={"bold"}
-                        colour={"textSecondary"}>
-                        ≈ ${swapMessageValues.usdOut}
-                    </BodySmall>
-                </Container>
-            </Container>
-            <Container mainAxisAlignment={"spaceBetween"}>
-                <BodySmall colour={"textSecondary"}>
-                    <Translatable resourceKey={i18nKey("Exchange rate")} />
-                </BodySmall>
-                <Body width={"hug"} fontWeight={"bold"}>
-                    {`${swapMessageValues.rate} ${swapMessageValues.tokenOut} ~ 1 ${swapMessageValues.tokenIn}`}
-                </Body>
-            </Container>
-            <Container mainAxisAlignment={"spaceBetween"}>
-                <BodySmall colour={"textSecondary"}>
-                    <Translatable resourceKey={i18nKey("Quote provider")} />
-                </BodySmall>
-                <Body width={"hug"} fontWeight={"bold"}>
-                    {`${swapMessageValues.dex}`}
-                </Body>
-            </Container>
-        </Container>
-
-        {#if warnValueDropped || warnValueUnknown}
-            <Container
-                gap={"md"}
-                background={ColourVars.background1}
-                padding={"lg"}
-                borderRadius={"lg"}
-                direction={"vertical"}>
-                <Container crossAxisAlignment={"center"} gap={"sm"}>
-                    <Alert color={ColourVars.warning} />
-                    <Body fontWeight={"bold"} colour={"warning"}>
-                        <Translatable resourceKey={i18nKey("Low value warning")} />
-                    </Body>
-                </Container>
-                <Body colour={"textSecondary"}>
-                    {#if warnValueDropped}
-                        <Translatable
-                            resourceKey={i18nKey(
-                                "tokenSwap.warningValueDropped",
-                                swapMessageValues,
-                            )} />
-                    {:else}
-                        <Translatable
-                            resourceKey={i18nKey(
-                                "tokenSwap.warningValueUnknown",
-                                swapMessageValues,
-                            )} />
-                    {/if}
-                </Body>
-                <Switch reverse bind:checked={userAcceptedWarning}>
-                    <Translatable resourceKey={i18nKey("tokenSwap.confirmUnderstanding")} />
-                </Switch>
-            </Container>
-        {/if}
-
-        <Container
-            gap={"md"}
-            background={ColourVars.background1}
-            padding={"lg"}
-            borderRadius={"lg"}
-            direction={"vertical"}>
-            <Container crossAxisAlignment={"center"} gap={"sm"}>
-                <Info color={ColourVars.secondary} />
-                <Body fontWeight={"bold"} colour={"secondary"}>
-                    <Translatable resourceKey={i18nKey("Swap success limit")} />
-                </Body>
-            </Container>
-            <Body colour={"textSecondary"}>
-                <Translatable
-                    resourceKey={i18nKey("tokenSwap.proceedWithSwap", swapMessageValues)} />
-            </Body>
-        </Container>
-    {/if}
-{/snippet}
-
-<SlidingPageContent title={i18nKey("Swap tokens")}>
-    <Container height={"fill"} gap={"xl"} padding={["xl", "lg", "huge"]} direction={"vertical"}>
-        <!-- Title and description -->
-        <Container gap={"md"} direction={"vertical"} padding={["zero", "sm"]}>
-            <Body fontWeight={"bold"}>
-                <Translatable resourceKey={i18nKey(`Swap ${inToken.symbol}`)} />
-            </Body>
-            <Body colour={"textSecondary"}>
-                <Translatable
-                    resourceKey={i18nKey(
-                        "Provide values first to obtain our best quote from DEX partners. If you accept the quote your tokens are securely sent, exchanged for the selected token, and the swapped tokens are automatically returned to your wallet.",
-                    )} />
-            </Body>
-        </Container>
-
-        <!-- Content -->
-        <Column gap="sm">
-            <TokenCard tokenState={inToken} />
-
-            {#if initialized}
-                {#if swapState === "quote"}
-                    {@render quoteView()}
-                {/if}
-
-                {#if swapState === "swap"}
-                    {@render swapView()}
-                {/if}
-            {/if}
-            {#if error !== undefined || pinNumberError !== undefined}
-                <ErrorMessage>
-                    {#if pinNumberError !== undefined}
-                        <Translatable resourceKey={pinNumberError} />
-                    {:else}
-                        {error}
-                    {/if}
-                </ErrorMessage>
-            {/if}
-        </Column>
-
-        <!-- Buttons -->
-        <Container
-            crossAxisAlignment="center"
-            mainAxisAlignment={swapState === "quote" ? "end" : "spaceBetween"}>
-            {#if swapState === "swap"}
-                <CommonButton2
-                    onClick={() => (swapState = "quote")}
-                    variant="primary"
-                    mode="text"
-                    disabled={swapping}>
-                    <Translatable resourceKey={i18nKey("cancel")} />
-                </CommonButton2>
-            {/if}
-            <CommonButton2 loading={busy} onClick={onPrimaryClick} variant="primary" mode="small">
-                {#snippet icon(color, size)}
-                    {#if swapState === "swap"}
-                        <Check {color} {size} />
-                    {:else}
-                        <ShareOutline {color} {size} />
-                    {/if}
-                {/snippet}
-                {#if swapState === "swap"}
-                    <Translatable resourceKey={i18nKey("Accept quote & proceed")} />
-                {:else}
-                    <Translatable resourceKey={i18nKey("Get swap quote")} />
-                {/if}
-            </CommonButton2>
-        </Container>
-    </Container>
-</SlidingPageContent>
-
-{#if swapping && swapId !== undefined && detailsOut !== undefined && bestQuote !== undefined}
-    <SwapProgress
-        {swapId}
-        tokenIn={detailsIn.symbol}
-        tokenOut={detailsOut.symbol}
-        ledgerIn={detailsIn.ledger}
-        ledgerOut={detailsOut.ledger}
-        amountIn={amountInText}
-        decimalsOut={detailsOut.decimals}
-        dex={dexName(bestQuote[0])} />
-{/if}
-
-<style lang="scss">
-    :global(.container.swap_down_arrow) {
-        position: absolute;
-        width: 2.5rem;
-        height: 2.5rem;
-        transform: translateY(calc(50% + 1.25rem));
-        z-index: 1;
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/home/wallet/SwapProgress.svelte b/frontend/app/src/components_mobile/home/wallet/SwapProgress.svelte
deleted file mode 100644
index 7601a9800f..0000000000
--- a/frontend/app/src/components_mobile/home/wallet/SwapProgress.svelte
+++ /dev/null
@@ -1,298 +0,0 @@
-<script lang="ts" module>
-    export type SwapOutcome = "success" | "rateChanged" | "insufficientFunds" | "error";
-</script>
-
-<script lang="ts">
-    import { i18nKey } from "@src/i18n/i18n";
-    import {
-        Body,
-        Button,
-        ColourVars,
-        Container,
-        Sheet,
-        Subtitle,
-        type SizeMode,
-    } from "component-lib";
-    import type { OpenChat } from "@client";
-    import { Poller, publish } from "@client";
-    import { getContext, onMount } from "svelte";
-    import Check from "svelte-material-icons/Check.svelte";
-    import Close from "svelte-material-icons/Close.svelte";
-    import Robot from "svelte-material-icons/RobotOutline.svelte";
-    import ErrorMessage from "../../ErrorMessage.svelte";
-    import Translatable from "../../Translatable.svelte";
-
-    interface Props {
-        swapId: bigint;
-        tokenIn: string;
-        tokenOut: string;
-        ledgerIn: string;
-        ledgerOut: string;
-        amountIn: string;
-        decimalsOut: number;
-        dex: string;
-    }
-
-    let { swapId, tokenIn, tokenOut, ledgerIn, ledgerOut, amountIn, decimalsOut, dex }: Props =
-        $props();
-
-    ledgerOut;
-
-    const height: SizeMode = { size: "16rem" };
-    const client = getContext<OpenChat>("client");
-    const POLL_INTERVAL = 1000;
-    const labelPrefix = "tokenSwap.progress.";
-
-    let amountOut = $state("");
-    let poller: Poller | undefined = undefined;
-    let outcome = $state<SwapOutcome>();
-
-    let labelValues = $derived({
-        tokenIn,
-        tokenOut,
-        amountIn,
-        amountOut,
-        dex,
-    });
-
-    let stages = $state<Stage["kind"][]>(["get", "deposit", "notify", "swap", "withdraw", "done"]);
-
-    type Stage =
-        | { kind: "get" }
-        | { kind: "deposit" }
-        | { kind: "notify" }
-        | { kind: "swap" }
-        | { kind: "withdraw" }
-        | { kind: "refund" }
-        | { kind: "done" };
-
-    let currentStage = $state<Stage["kind"]>("get");
-    let currentStageIndex = $derived(stages.findIndex((s) => s === currentStage));
-    let error = $state(false);
-
-    onMount(() => {
-        poller = new Poller(querySwapProgress, POLL_INTERVAL, POLL_INTERVAL, true);
-        return () => poller?.stop();
-    });
-
-    function notifyFinished(o: "success" | "rateChanged" | "insufficientFunds" | "error") {
-        outcome = o;
-        poller?.stop();
-    }
-
-    async function querySwapProgress() {
-        let response = await client.tokenSwapStatus(swapId);
-
-        if (response.kind === "success") {
-            if (
-                response.amountSwapped?.kind === "ok" &&
-                response.amountSwapped?.value.kind === "ok"
-            ) {
-                amountOut = client.formatTokens(response.amountSwapped.value.value, decimalsOut);
-            }
-
-            if (response.withdrawnFromDex?.kind === "ok") {
-                const success =
-                    response.amountSwapped?.kind === "ok" &&
-                    response.amountSwapped.value.kind === "ok";
-
-                currentStage = "done";
-                notifyFinished(success ? "success" : "rateChanged");
-            } else if (response.amountSwapped?.kind === "ok") {
-                if (response.amountSwapped.value.kind === "ok") {
-                    currentStage = "withdraw";
-                } else {
-                    currentStage = "refund";
-                    stages = stages.filter((s) => (s === "withdraw" ? "refund" : s));
-                }
-            } else if (response.notifyDex?.kind == "ok") {
-                currentStage = "swap";
-            } else if (response.transfer?.kind == "ok") {
-                currentStage = "notify";
-            } else if (response.transfer?.kind == "error") {
-                error = true;
-                notifyFinished("insufficientFunds");
-            } else if (response.depositAccount?.kind == "ok") {
-                currentStage = "deposit";
-            } else if (response.depositAccount?.kind == "error") {
-                error = true;
-                notifyFinished("error");
-            }
-        }
-    }
-
-    function percentFromIndex(idx: number) {
-        return (idx / (stages.length - 1)) * 100;
-    }
-
-    function onFinished() {
-        client.refreshAccountBalance(ledgerIn);
-        client.refreshAccountBalance(ledgerOut);
-        closeModalStack();
-    }
-
-    function closeModalStack() {
-        publish("closeModalStack");
-    }
-</script>
-
-<Sheet onDismiss={closeModalStack}>
-    <Container direction={"vertical"} gap={"xxl"} padding={["lg", "xxl", "huge"]}>
-        <Subtitle fontWeight={"bold"}>
-            <Translatable resourceKey={i18nKey("Swap in progress")} />
-        </Subtitle>
-
-        <Container
-            supplementalClass={`permission_slider`}
-            mainAxisAlignment={"start"}
-            padding={["zero", "sm"]}>
-            <Container
-                width={"hug"}
-                {height}
-                direction={"vertical"}
-                overflow={"visible"}
-                padding={["md", "xxl", "md", "zero"]}>
-                <div class="track">
-                    <div class="progress" style={`height: ${percentFromIndex(currentStageIndex)}%`}>
-                    </div>
-                    {#each stages as _, i}
-                        {@const active = i <= currentStageIndex}
-                        {@const current = i === currentStageIndex}
-                        {@const inerror = current && error}
-                        <div style={`top: ${percentFromIndex(i)}%;`} class="marker-target">
-                            <div
-                                class:active
-                                class:current
-                                class:inerror
-                                class="marker"
-                                class:end={i === 0 || i === stages.length - 1}>
-                            </div>
-                        </div>
-                    {/each}
-                </div>
-            </Container>
-            <Container
-                width={"hug"}
-                {height}
-                direction={"vertical"}
-                padding={"zero"}
-                mainAxisAlignment={"spaceBetween"}>
-                {#each stages as stage, i}
-                    {@const active = i <= currentStageIndex}
-                    {@const current = i === currentStageIndex}
-                    {@const inerror = current && error}
-                    <div class="role_label" style={`top: ${percentFromIndex(i)}%;`}>
-                        <Container crossAxisAlignment={"center"} gap={"md"}>
-                            <Body
-                                align={"center"}
-                                colour={inerror
-                                    ? "error"
-                                    : active
-                                      ? "textPrimary"
-                                      : "textSecondary"}
-                                width={"hug"}>
-                                <Translatable
-                                    resourceKey={i18nKey(`${labelPrefix}${stage}`, labelValues)} />
-                            </Body>
-                            {#if inerror}
-                                <Close color={ColourVars.error} />
-                            {:else if active}
-                                <Check color={ColourVars.primary} />
-                            {/if}
-                        </Container>
-                    </div>
-                {/each}
-            </Container>
-        </Container>
-
-        {#if outcome && outcome !== "success"}
-            <ErrorMessage>
-                {#if outcome === "error"}
-                    <Translatable resourceKey={i18nKey("Failed to get deposit account")} />
-                {:else if outcome === "insufficientFunds"}
-                    <Translatable resourceKey={i18nKey("Insufficient funds")} />
-                {:else if outcome === "rateChanged"}
-                    <Translatable resourceKey={i18nKey("Rate changed")} />
-                {/if}
-            </ErrorMessage>
-        {/if}
-
-        <Container mainAxisAlignment={"end"}>
-            <Button
-                secondary={outcome !== undefined && outcome !== "success"}
-                onClick={outcome ? onFinished : undefined}
-                loading={outcome === undefined}>
-                {#if outcome === undefined}
-                    <Translatable resourceKey={i18nKey("In progress")} />
-                {:else if outcome === "success"}
-                    <Translatable resourceKey={i18nKey("Swap complete")} />
-                {:else}
-                    <Translatable resourceKey={i18nKey("Unable to complete swap")} />
-                {/if}
-                {#snippet icon(color)}
-                    <Robot {color} />
-                {/snippet}
-            </Button>
-        </Container>
-    </Container>
-</Sheet>
-
-<style lang="scss">
-    $speed: 200ms;
-
-    .role_label {
-        position: absolute;
-        all: unset;
-    }
-
-    .track,
-    .progress {
-        position: relative;
-        width: 2px;
-        height: 100%;
-        background-color: var(--button-disabled);
-        border-radius: var(--rad-circle);
-    }
-
-    .progress {
-        transition: width ease-in $speed;
-        background-color: var(--primary);
-    }
-
-    .marker-target {
-        position: absolute;
-        left: 1px; // half track height
-        width: 1.5rem;
-        height: 1.5rem;
-        border-radius: var(--rad-circle);
-        transform: translateX(-50%) translateY(-50%);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        .marker {
-            border: 1px solid transparent;
-            border-radius: var(--rad-circle);
-            background-color: var(--button-disabled);
-            transition:
-                background-color ease-in $speed,
-                width ease-in $speed,
-                height ease-in $speed;
-            width: 0.8rem;
-            height: 0.8rem;
-
-            &.active {
-                background-color: var(--primary);
-            }
-
-            &.current {
-                @include pulse();
-
-                &.inerror {
-                    background-color: var(--background-1);
-                    border-color: var(--error);
-                }
-            }
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/icons/AccountGroup.svelte b/frontend/app/src/components_mobile/icons/AccountGroup.svelte
deleted file mode 100644
index 758046ca0e..0000000000
--- a/frontend/app/src/components_mobile/icons/AccountGroup.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script lang="ts">
-    interface Props {
-        size?: string;
-        width?: string;
-        height?: string;
-        color?: string;
-        viewBox?: string;
-    }
-
-    let {
-        size = "1em",
-        width = size,
-        height = size,
-        color = "currentColor",
-        viewBox = "0 0 24 24",
-    }: Props = $props();
-</script>
-
-<svg {width} {height} {viewBox}>
-    <path
-        d="M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z"
-        fill={color} />
-</svg>
diff --git a/frontend/app/src/components_mobile/icons/Diamond.svelte b/frontend/app/src/components_mobile/icons/Diamond.svelte
deleted file mode 100644
index 470cb14f64..0000000000
--- a/frontend/app/src/components_mobile/icons/Diamond.svelte
+++ /dev/null
@@ -1,52 +0,0 @@
-<script lang="ts">
-    import { Tooltip } from "component-lib";
-    import type { DiamondMembershipStatus, ResourceKey } from "@client";
-    import { i18nKey } from "../../i18n/i18n";
-    import Translatable from "../Translatable.svelte";
-    import Diamond from "svelte-material-icons/Diamond.svelte";
-    import DiamondOutline from "svelte-material-icons/DiamondOutline.svelte";
-    import BadgeContainer, { type BadgeSize } from "../home/profile/BadgeContainer.svelte";
-
-    interface Props {
-        size?: BadgeSize;
-        show?: "blue" | "gold" | undefined;
-        status?: DiamondMembershipStatus["kind"] | undefined;
-        borderColor?: string;
-    }
-
-    let { size = "default", show = undefined, status = undefined, borderColor }: Props = $props();
-
-    function getStatusName(
-        status: DiamondMembershipStatus["kind"] | undefined,
-    ): ResourceKey | undefined {
-        if (status === undefined) return undefined;
-
-        switch (status) {
-            case "lifetime":
-                return i18nKey("upgrade.lifetime");
-            case "active":
-                return i18nKey("upgrade.diamond");
-            default:
-                return i18nKey(status);
-        }
-    }
-    let statusName = $derived(getStatusName(status));
-    let iconSize = size == "large" ? "1rem" : "0.625rem";
-</script>
-
-{#if status !== "inactive" || show}
-    <Tooltip uppercase position="top" align="middle">
-        <BadgeContainer {size} {borderColor}>
-            {#if status == "lifetime"}
-                <Diamond size={iconSize} />
-            {:else}
-                <DiamondOutline size={iconSize} />
-            {/if}
-        </BadgeContainer>
-        {#snippet popup()}
-            {#if statusName !== undefined}
-                <Translatable resourceKey={statusName} />
-            {/if}
-        {/snippet}
-    </Tooltip>
-{/if}
diff --git a/frontend/app/src/components_mobile/icons/Verified.svelte b/frontend/app/src/components_mobile/icons/Verified.svelte
deleted file mode 100644
index 2a0502659f..0000000000
--- a/frontend/app/src/components_mobile/icons/Verified.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script lang="ts">
-    import { Tooltip, ColourVars } from "component-lib";
-    import type { ResourceKey } from "@client";
-    import Translatable from "../Translatable.svelte";
-    import Check from "svelte-material-icons/Check.svelte";
-    import BadgeContainer, { type BadgeSize } from "../home/profile/BadgeContainer.svelte";
-
-    interface Props {
-        verified: boolean;
-        size?: BadgeSize;
-        tooltip?: ResourceKey;
-        borderColor?: string;
-    }
-
-    let { size = "default", tooltip, borderColor }: Props = $props();
-
-    // Verified user (DecideAI) concept is suspended - never render the badge.
-    const verified = false;
-</script>
-
-{#snippet renderCheck()}
-    <BadgeContainer {size} {borderColor} backgroundColor={ColourVars.secondary}>
-        <Check size={size === "large" ? "1rem" : "0.625rem"} />
-    </BadgeContainer>
-{/snippet}
-
-{#if verified}
-    {#if tooltip !== undefined}
-        <Tooltip uppercase position="top" align="middle">
-            {@render renderCheck()}
-            {#snippet popup()}
-                <Translatable resourceKey={tooltip} />
-            {/snippet}
-        </Tooltip>
-    {:else}
-        {@render renderCheck()}
-    {/if}
-{/if}
diff --git a/frontend/app/src/components_mobile/icons/diamond.ts b/frontend/app/src/components_mobile/icons/diamond.ts
deleted file mode 100644
index d873da6fe7..0000000000
--- a/frontend/app/src/components_mobile/icons/diamond.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-export type DiamondColours = {
-    dark: string;
-    medium: string;
-    light: string;
-};
-
-export const blueDiamondHue = 210;
-export const goldDiamondHue = 42;
-
-export function deriveColours(hue: number): DiamondColours {
-    return {
-        dark: `hsl(${hue}, 100%, 35%)`,
-        medium: `hsl(${hue}, 100%, 65%)`,
-        light: `hsl(${hue}, 100%, 80%)`,
-    };
-}
diff --git a/frontend/app/src/components_mobile/onboard/OnboardModal.svelte b/frontend/app/src/components_mobile/onboard/OnboardModal.svelte
deleted file mode 100644
index 2ee36660b1..0000000000
--- a/frontend/app/src/components_mobile/onboard/OnboardModal.svelte
+++ /dev/null
@@ -1,374 +0,0 @@
-<script lang="ts">
-    import { i18nKey, interpolate } from "@src/i18n/i18n";
-    import { VersionChecker } from "@src/utils/version.svelte";
-    import {
-        Body,
-        BodySmall,
-        Button,
-        ColourVars,
-        Column,
-        CommonButton,
-        Container,
-        H1,
-        Overview,
-        Sheet,
-        Subtitle,
-        Title,
-    } from "component-lib";
-    import { OpenChat, type CreatedUser } from "@client";
-    import { ErrorCode } from "@shared";
-    import { navigate } from "@utils/navigation";
-    import { getContext, onMount } from "svelte";
-    import { _ } from "svelte-i18n";
-    import ChevronLeft from "svelte-material-icons/ChevronLeft.svelte";
-    import ErrorMessage from "../ErrorMessage.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import Progress from "../Progress.svelte";
-    import Translatable from "../Translatable.svelte";
-    import SignUp from "./SignUp.svelte";
-
-    const ALC_LENGTH = 6;
-
-    const client = getContext<OpenChat>("client");
-
-    type Step = "choose-auth" | "new-user" | "one-time-password";
-    let step: Step = $state("choose-auth");
-    let accountLinkingCode = $state("");
-    let alcInput: HTMLInputElement | undefined = $state(undefined);
-    let alcValid = $derived(accountLinkingCode.length === 6);
-    let linkingInProgress = $state(false);
-    let error: string | undefined = $state(undefined);
-    let signUpError: string | undefined = $state(undefined);
-    let checker = new VersionChecker();
-
-    let outdated = $derived(checker.versionState.kind !== "up_to_date");
-
-    onMount(() => {
-        document.body.classList.add("onboarding");
-        return () => {
-            document.body.classList.remove("onboarding");
-            checker.stop();
-        };
-    });
-
-    function signIn() {
-        (client.isNativeAndroid()
-            ? client.signInWithAndroidWebAuthn()
-            : client.signInWithWebAuthn()
-        ).catch(async (e) => {
-            if ("AUTH_FAILED" === e) {
-                error = "native.auth.error";
-                console.error("Auth error: ", e);
-            } else {
-                // Passkey either not found, or user cancelled auth request
-                step = "one-time-password";
-            }
-        });
-    }
-
-    function signUp() {
-        step = "new-user";
-    }
-
-    function errorCodeToi18nKey(code: number | string): string {
-        switch (code) {
-            case ErrorCode.AlreadyRegistered:
-                return "alreadyRegistered";
-            case ErrorCode.LinkingCodeNotFound:
-                return "linkingCodeNotFound";
-            case ErrorCode.MaxLinkedIdentitiesLimitReached:
-                return "maxLinkedIdentitiesLimitReached";
-            default:
-                // TODO add error strings for the codes returned by the android code
-                return "string" === typeof code ? code : "default";
-        }
-    }
-
-    function linkAccount() {
-        if (!linkingInProgress && accountLinkingCode.length === ALC_LENGTH) {
-            linkingInProgress = true;
-            error = undefined;
-            client.linkAccountsWithAndroidWebAuthn(accountLinkingCode).catch((err) => {
-                console.error(err);
-                linkingInProgress = false;
-                if (err && "object" === typeof err && "code" in err) {
-                    error = errorCodeToi18nKey(err.code);
-                } else {
-                    error = "default";
-                }
-            });
-        } else {
-            error = "codeInvalid";
-        }
-    }
-
-    function onCreatedUser(user: CreatedUser) {
-        client.onRegisteredUser(user);
-        navigate("/welcome");
-    }
-
-    function explore() {
-        navigate("/communities");
-    }
-</script>
-
-{#snippet backButton()}
-    <Container padding={["zero", "lg"]} direction={"vertical"}>
-        <CommonButton onClick={() => (step = "choose-auth")} mode={"active"} size={"small_text"}>
-            {#snippet icon(color, size)}
-                <ChevronLeft {color} {size} />
-            {/snippet}
-            <Translatable resourceKey={i18nKey("back")} />
-        </CommonButton>
-    </Container>
-{/snippet}
-
-{#if checker.versionState.kind === "out_of_date"}
-    <Sheet>
-        <Column gap={"xl"} padding={"xxl"}>
-            <Overview colour={"primary"}>One second! Updating ...</Overview>
-            <BodySmall width={"hug"} fontWeight={"bold"}>
-                <Translatable
-                    resourceKey={i18nKey(
-                        `We are just downloading a quick update and then we will have you on your way ...`,
-                    )} />
-            </BodySmall>
-
-            <Progress
-                colour={ColourVars.primary}
-                size={"1rem"}
-                percent={checker.versionState.downloadProgress} />
-
-            <Button
-                disabled={checker.versionState.downloadProgress < 100}
-                onClick={() => checker.reload()}
-                secondary>
-                <Translatable resourceKey={i18nKey("Reload and continue")} />
-            </Button>
-        </Column>
-    </Sheet>
-{/if}
-
-{#snippet choosePath()}
-    <Container padding={["zero", "xxl"]} direction={"vertical"}>
-        <H1><Translatable resourceKey={i18nKey("Fully featured.")} /></H1>
-        <H1><Translatable resourceKey={i18nKey("Fully yours.")} /></H1>
-    </Container>
-    <Container gap={"md"} padding={["zero", "xxl"]} direction={"vertical"}>
-        <Button disabled={outdated} onClick={explore} secondary>
-            <Translatable resourceKey={i18nKey("Explore communities")} />
-        </Button>
-        <BodySmall colour={"textSecondary"} align={"center"} width={"hug"} fontWeight={"bold"}>
-            <Translatable
-                resourceKey={i18nKey(
-                    "Preview OpenChat communities without joining. You will need an account to gain access.",
-                )} />
-        </BodySmall>
-    </Container>
-
-    <Container
-        crossAxisAlignment={"center"}
-        mainAxisAlignment={"center"}
-        gap={"md"}
-        padding={["zero", "xxl"]}>
-        <div class="line"></div>
-        <Body colour={"textSecondary"} align={"center"} width={"hug"} fontWeight={"bold"}>
-            <Translatable resourceKey={i18nKey("or join")} />
-        </Body>
-        <div class="line"></div>
-    </Container>
-    <Container
-        crossAxisAlignment={"center"}
-        gap={"md"}
-        padding={["zero", "xxl"]}
-        direction={"vertical"}>
-        <Button disabled={outdated} onClick={signIn}>
-            <Translatable resourceKey={i18nKey("I'm an existing user")} />
-        </Button>
-        <Button disabled={outdated} onClick={signUp} secondary>
-            <Translatable resourceKey={i18nKey("Create new account")} />
-        </Button>
-        <BodySmall colour={"textSecondary"} align={"center"} width={"hug"} fontWeight={"bold"}>
-            <Markdown
-                text={interpolate(
-                    $_,
-                    i18nKey(
-                        "OpenChat uses *Passkeys* to secure accounts.\n Visit [oc.app web](https://oc.app) to found out more.",
-                    ),
-                )}></Markdown>
-        </BodySmall>
-    </Container>
-{/snippet}
-
-{#snippet newUserView()}
-    {@render backButton()}
-
-    <Container padding={["zero", "xxl"]} direction={"vertical"}>
-        <H1><Translatable resourceKey={i18nKey("Create new account")} /></H1>
-        <Title fontWeight={"bold"} colour={"primary"}
-            ><Translatable resourceKey={i18nKey("Welcome aboard!")} /></Title>
-    </Container>
-
-    <Container padding={["zero", "xxl"]} direction={"vertical"}>
-        <Subtitle fontWeight={"bold"} colour={"textSecondary"}>
-            <Translatable
-                resourceKey={i18nKey(
-                    "We're really glad you're here. You're joining a safe, private space built and shaped by its community.",
-                )} />
-        </Subtitle>
-    </Container>
-
-    <Container padding={["zero", "lg"]} direction={"vertical"}>
-        <SignUp {onCreatedUser} bind:error={signUpError} />
-    </Container>
-{/snippet}
-
-{#snippet existingUserView()}
-    {@render backButton()}
-
-    <Container padding={["zero", "xxl"]} direction={"vertical"}>
-        <H1><Translatable resourceKey={i18nKey("Existing user")} /></H1>
-        <Title fontWeight={"bold"} colour={"primary"}
-            ><Translatable resourceKey={i18nKey("Welcome back!")} /></Title>
-    </Container>
-
-    <Container gap={"sm"} padding={["zero", "xxl"]} direction={"vertical"}>
-        <Subtitle fontWeight={"bold"} colour={"textSecondary"}>
-            <Translatable
-                resourceKey={i18nKey(
-                    "Let's reconnect your account so you can continue exactly where you left off.",
-                )} />
-        </Subtitle>
-        <BodySmall colour={"textTertiary"}>
-            <Translatable
-                resourceKey={i18nKey(
-                    "If you expected to use an existing passkey, it may not be available on this device at the moment.",
-                )} />
-        </BodySmall>
-    </Container>
-
-    <Container padding={["zero", "xxl"]} direction={"vertical"}>
-        <div class="alc-container">
-            <input
-                class="alc-input"
-                bind:value={accountLinkingCode}
-                bind:this={alcInput}
-                type="text"
-                maxlength="6"
-                pattern="[a-zA-Z0-9]{6}" />
-            <!-- svelte-ignore a11y_click_events_have_key_events -->
-            <!-- svelte-ignore a11y_no_static_element_interactions -->
-            <div class="alc" onclick={() => alcInput?.focus()}>
-                {#each [...Array(6).keys()] as key}
-                    <div class="char {key === accountLinkingCode.length ? 'current' : ''}">
-                        <span class="value">{accountLinkingCode[key] || ""}</span>
-                    </div>
-                {/each}
-            </div>
-        </div>
-        <Container direction={"vertical"} gap={"xxl"}>
-            <BodySmall width={"hug"} align={"center"} colour={"textSecondary"}>
-                <Translatable resourceKey={i18nKey("native.auth.linkAccount.note")} />
-            </BodySmall>
-            <Button
-                loading={linkingInProgress}
-                disabled={linkingInProgress || !alcValid}
-                onClick={linkAccount}>
-                <Translatable resourceKey={i18nKey("Link with existing account")} />
-            </Button>
-        </Container>
-    </Container>
-{/snippet}
-
-<Container supplementalClass="login_screen" gap={"xl"} direction={"vertical"}>
-    <Container
-        supplementalClass={"login_mockup"}
-        height={{ size: step === "choose-auth" ? "23rem" : "11rem" }}
-        backgroundImage={"/assets/login_mockup.svg"}>
-        <span></span>
-    </Container>
-    {#if step === "choose-auth"}
-        {@render choosePath()}
-    {:else if step === "new-user"}
-        {@render newUserView()}
-    {:else if step === "one-time-password"}
-        {@render existingUserView()}
-    {/if}
-    {#if error !== undefined}
-        <Container gap={"md"} padding={["zero", "xxl"]} direction={"vertical"}>
-            <ErrorMessage>
-                <Translatable resourceKey={i18nKey(error)} />
-            </ErrorMessage>
-        </Container>
-    {/if}
-</Container>
-
-<style lang="scss">
-    :global(.container.login_mockup) {
-        background-position: bottom !important;
-    }
-
-    :global(.login_screen) {
-        // Allows the login screen buttons to appear above the phone's nav
-        padding-bottom: 6rem !important;
-    }
-
-    .line {
-        height: 6px;
-        width: 100%;
-        border-radius: var(--rad-xl);
-        background-color: var(--background-2);
-    }
-
-    .alc-container {
-        width: 100%;
-        .alc {
-            display: flex;
-            padding: var(--sp-xxl) 0 var(--sp-sm) 0;
-            gap: $sp4;
-            justify-content: center;
-
-            .char {
-                display: flex;
-                flex: 1;
-                height: 7rem;
-                justify-content: end;
-                flex-direction: column;
-                align-items: center;
-                @include font(light, normal, fs-220);
-                position: relative;
-                overflow: hidden;
-
-                &:after {
-                    content: "";
-                    display: block;
-                    width: 100%;
-                    height: 0.25rem;
-                    border-radius: $sp2;
-                    background-color: var(--primary);
-                }
-            }
-        }
-
-        .alc-input {
-            height: 0;
-            padding: 0;
-            border: none;
-            position: absolute;
-            left: -2000px;
-            &:focus + .alc > .char.current {
-                &:before {
-                    content: "";
-                    display: block;
-                    width: 1rem;
-                    height: 1rem;
-                    background-color: var(--primary);
-                    position: absolute;
-                    top: -0.75rem;
-                    left: 50%;
-                    transform: translateX(-50%) rotate(45deg);
-                }
-            }
-        }
-    }
-</style>
diff --git a/frontend/app/src/components_mobile/onboard/SignUp.svelte b/frontend/app/src/components_mobile/onboard/SignUp.svelte
deleted file mode 100644
index 76da70f58d..0000000000
--- a/frontend/app/src/components_mobile/onboard/SignUp.svelte
+++ /dev/null
@@ -1,250 +0,0 @@
-<script lang="ts">
-    import { i18nKey, interpolate } from "@src/i18n/i18n";
-    import { createLocalStorageStore } from "@src/utils/store";
-    import {
-        BodySmall,
-        Button,
-        Column,
-        Container,
-        Form,
-        Input,
-        Sheet,
-        StatusCard,
-        Subtitle,
-        Switch,
-    } from "component-lib";
-    import EmailValidator from "email-validator";
-    import type { CreatedUser, OpenChat, UserOrUserGroup, UserSummary } from "@client";
-    import { AuthProvider, identityStateStore, selectedAuthProviderStore } from "@client";
-    import { getContext, onMount } from "svelte";
-    import { _ } from "svelte-i18n";
-    import ErrorMessage from "../ErrorMessage.svelte";
-    import FindUser from "../FindUser.svelte";
-    import TermsContent from "../TermsContent.svelte";
-    import Translatable from "../Translatable.svelte";
-    import UsernameInput from "../UsernameInput.svelte";
-    import UserPill from "../UserPill.svelte";
-
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        onCreatedUser: (user: CreatedUser) => void;
-        error: string | undefined;
-    }
-
-    let { error = $bindable(), onCreatedUser }: Props = $props();
-
-    let showGuidelines = $state(false);
-    let username = $state("");
-    let usernameValid = $state(false);
-    let usernameStore = createLocalStorageStore("openchat_candidate_username", "");
-    let checkingUsername: boolean = $state(false);
-    let email = $state("");
-    let emailValid = $derived(email.length === 0 || EmailValidator.validate(email));
-    let busy = $state(false);
-    let badCode = $state(false);
-    let referringUser: UserSummary | undefined = $state(undefined);
-    let createdUser: CreatedUser | undefined = undefined;
-    let passkeyCreated = $state(false);
-    let termsAccepted = $state(false);
-
-    function onShowGuidelines() {
-        showGuidelines = true;
-        client.gaTrack("show_guidelines_clicked", "registration");
-    }
-    function onCloseGuidelines() {
-        showGuidelines = false;
-    }
-
-    async function register(e: Event) {
-        e.preventDefault();
-        if (usernameValid && emailValid) {
-            usernameStore.set(username);
-            try {
-                busy = true;
-                selectedAuthProviderStore.set(AuthProvider.PASSKEY);
-
-                // if we are already in the registering state it means that we are somehow
-                // already signed in, but there is no user. In that case, skip the webauthn
-                // and just call registerUser
-                if ($identityStateStore.kind !== "registering") {
-                    if (!passkeyCreated) {
-                        if (client.isNativeAndroid()) {
-                            await client.signUpWithAndroidWebAuthn(true, username);
-                        } else {
-                            await client.signUpWithWebAuthn(true, username);
-                        }
-                    }
-                }
-                passkeyCreated = true;
-                await registerUser(username, email.length > 0 ? email : undefined);
-            } catch (err) {
-                error = `Error registering user: ${JSON.stringify(err)}`;
-            } finally {
-                busy = false;
-            }
-        }
-    }
-
-    async function registerUser(username: string, email: string | undefined) {
-        await client.registerUser(username, email).then((resp) => {
-            badCode = false;
-            if (resp.kind === "username_taken") {
-                error = "register.usernameTaken";
-            } else if (resp.kind === "username_too_short") {
-                error = "register.usernameTooShort";
-            } else if (resp.kind === "username_too_long") {
-                error = "register.usernameTooLong";
-            } else if (resp.kind === "username_invalid") {
-                error = "register.usernameInvalid";
-            } else if (resp.kind === "email_invalid") {
-                error = "register.emailInvalid";
-            } else if (resp.kind === "user_limit_reached") {
-                error = "register.userLimitReached";
-            } else if (resp.kind === "internal_error") {
-                error = "unexpectedError";
-            } else if (resp.kind === "referral_code_invalid") {
-                error = "register.referralCodeInvalid";
-                badCode = true;
-            } else if (resp.kind === "referral_code_already_claimed") {
-                error = "register.referralCodeAlreadyClaimed";
-                badCode = true;
-            } else if (resp.kind === "referral_code_expired") {
-                error = "register.referralCodeExpired";
-                badCode = true;
-            } else if (resp.kind === "success") {
-                // error = undefined;
-                createdUser = {
-                    kind: "created_user",
-                    username,
-                    dateCreated: BigInt(Date.now()),
-                    displayName: undefined,
-                    cryptoAccount: resp.icpAccount,
-                    userId: resp.userId,
-                    isPlatformModerator: false,
-                    isPlatformOperator: false,
-                    suspensionDetails: undefined,
-                    isSuspectedBot: false,
-                    diamondStatus: { kind: "inactive" },
-                    moderationFlagsEnabled: 0,
-                    updated: 0n,
-                    isBot: false,
-                    isUniquePerson: false,
-                    totalChitEarned: 0,
-                    chitBalance: 0,
-                    streak: 0,
-                    maxStreak: 0,
-                    hideOnlineStatus: false,
-                };
-                onCreatedUser(createdUser);
-                busy = false;
-                usernameStore.set("");
-            } else {
-                error = `Unexpected register user response: ${resp.kind}`;
-            }
-        });
-    }
-
-    function deleteUser(_: UserOrUserGroup) {
-        referringUser = undefined;
-        client.clearReferralCode();
-    }
-
-    function selectUser(user: UserSummary) {
-        referringUser = user;
-        client.setReferralCode(user.userId);
-    }
-
-    function userLookup(searchTerm: string): Promise<[UserSummary[], UserSummary[]]> {
-        return client.searchUsers(searchTerm, 20).then((res) => [[], res]);
-    }
-
-    // function clearCodeAndLogout() {
-    //     client.clearReferralCode();
-    //     client.logout();
-    // }
-
-    onMount(async () => {
-        referringUser = await client.getReferringUser();
-    });
-</script>
-
-{#if showGuidelines}
-    <Sheet onDismiss={onCloseGuidelines}>
-        <Container gap={"lg"} direction={"vertical"} padding={"xl"}>
-            <Subtitle>OpenChat Terms</Subtitle>
-            <TermsContent />
-            <Button onClick={onCloseGuidelines}>
-                <Translatable resourceKey={i18nKey("register.agree")} />
-            </Button>
-        </Container>
-    </Sheet>
-{/if}
-
-<Container padding={["md", "zero", "xxl", "zero"]}>
-    {#if badCode}
-        <StatusCard
-            mode={"warning"}
-            title={interpolate($_, i18nKey("register.doYouWantToProceed"))}>
-            {#snippet body()}
-                <Translatable resourceKey={i18nKey("register.doYouWantToProceed")} />
-            {/snippet}
-        </StatusCard>
-    {:else}
-        <Form onSubmit={register}>
-            <Container gap={"xl"} direction={"vertical"}>
-                <UsernameInput
-                    {client}
-                    disabled={busy}
-                    originalUsername={$usernameStore ?? ""}
-                    bind:username
-                    bind:usernameValid
-                    bind:errorMsg={error} />
-
-                <Input
-                    error={!emailValid}
-                    disabled={busy}
-                    placeholder={interpolate($_, i18nKey("register.emailPlaceholder"))}
-                    bind:value={email}
-                    minlength={0}
-                    maxlength={254}>
-                    {#snippet subtext()}
-                        <Translatable resourceKey={i18nKey("register.emailRules")} />
-                    {/snippet}
-                </Input>
-
-                {#if referringUser !== undefined}
-                    <Column padding={["zero", "md"]}>
-                        <UserPill onDeleteUser={deleteUser} userOrGroup={referringUser} />
-                    </Column>
-                {:else}
-                    <FindUser
-                        placeholderKey={"register.findReferrer"}
-                        {userLookup}
-                        onSelectUser={selectUser} />
-                {/if}
-
-                {#if error !== undefined}
-                    <ErrorMessage><Translatable resourceKey={i18nKey(error)} /></ErrorMessage>
-                {/if}
-            </Container>
-        </Form>
-    {/if}
-</Container>
-
-<Container direction={"vertical"} gap={"lg"} padding={["zero", "md"]}>
-    <Container onClick={onShowGuidelines}>
-        <Switch reverse bind:checked={termsAccepted}>
-            <BodySmall onClick={onShowGuidelines}>
-                <Translatable resourceKey={i18nKey("I agree to the OpenChat terms & conditions")} />
-            </BodySmall>
-        </Switch>
-    </Container>
-    <Button
-        width={"fill"}
-        disabled={!termsAccepted || !usernameValid || !emailValid || busy}
-        loading={checkingUsername || busy}
-        onClick={register}>
-        <Translatable resourceKey={i18nKey("Start my journey")} />
-    </Button>
-</Container>
diff --git a/frontend/app/src/components_mobile/portalState.svelte.ts b/frontend/app/src/components_mobile/portalState.svelte.ts
deleted file mode 100644
index 805e569357..0000000000
--- a/frontend/app/src/components_mobile/portalState.svelte.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { unmount } from "svelte";
-
-type Component = Record<string, unknown>;
-type OnClose = () => void;
-type Mounted = [Component, OnClose | undefined];
-
-/**
- * This simply tracks the open portal. Note that it only allows for one open portal at the moment
- * This might not always be good enough, but for now it seems to be.
- */
-class PortalState {
-    #mounted: Mounted | undefined;
-
-    open(mounted: Component, onClose?: OnClose): boolean {
-        this.close();
-        this.#mounted = [mounted, onClose];
-        return true;
-    }
-
-    close(): boolean {
-        if (this.#mounted !== undefined) {
-            const [comp, onClose] = this.#mounted;
-            this.#mounted = undefined;
-            unmount(comp);
-            onClose?.();
-        }
-        return false;
-    }
-}
-
-export const portalState = new PortalState();
diff --git a/frontend/app/src/components_shared/ChatEventList.svelte b/frontend/app/src/components_shared/ChatEventList.svelte
deleted file mode 100644
index 369531ec4e..0000000000
--- a/frontend/app/src/components_shared/ChatEventList.svelte
+++ /dev/null
@@ -1,1212 +0,0 @@
-<script lang="ts" module>
-    import type { ChatEvent as ChatEventType, EventWrapper, Mention } from "@client";
-
-    export type ChatEventListArgs = {
-        isAccepted: (_unconf: unknown, evt: EventWrapper<ChatEventType>) => boolean;
-        isConfirmed: (_unconf: unknown, evt: EventWrapper<ChatEventType>) => boolean;
-        isFailed: (_failed: unknown, evt: EventWrapper<ChatEventType>) => boolean;
-        isReadByMe: (_store: unknown, evt: EventWrapper<ChatEventType>) => boolean;
-        messageObserver: IntersectionObserver | undefined;
-        focusIndex: number | undefined;
-    };
-
-    // state + actions handed to the platform-specific FAB snippet
-    export type ChatEventListFabArgs = {
-        showGoToTop: boolean;
-        showGoToBottom: boolean;
-        loadingFromUserScroll: boolean;
-        scrollToTop: () => void;
-        scrollToLast: () => void;
-        scrollToMention: (mention: Mention | undefined) => void;
-    };
-</script>
-
-<script lang="ts">
-    import { portalState } from "component-lib";
-    import {
-        currentUserIdStore,
-        eventIndexesLoadedStore,
-        eventListLastScrolled,
-        eventListScrollTop,
-        eventListScrolling,
-        localUpdates,
-        messageContextsEqual,
-        routeStore,
-        subscribe,
-        withEqCheck,
-        type ChatSummary,
-        type Message,
-        type MessageContext,
-        type OpenChat,
-    } from "@client";
-    import { getContext, onMount, tick, untrack, type Snippet } from "svelte";
-    import { isSafari, mobileOperatingSystem } from "@utils/devices";
-    import type { FlatChatItem } from "./flatChatItems";
-    import { vclDebug } from "./vclDebug";
-    import VirtualChatList from "./VirtualChatList.svelte";
-
-    // todo - these thresholds need to be relative to screen height otherwise things get screwed up on (relatively) tall screens
-    const MESSAGE_READ_THRESHOLD = 500;
-    const FROM_END_THRESHOLD = 600;
-    const LOADING_THRESHOLD = 400;
-    // Loading newer messages gets a bigger head start: scrolling forwards runs
-    // into the hard scrollTop=0 wall when the load hasn't landed yet, which
-    // feels far worse than the equivalent at the top of the list.
-    const LOAD_NEW_THRESHOLD = 800;
-    const SCROLL_THRESHOLD = 500;
-    const client = getContext<OpenChat>("client");
-
-    interface Props {
-        rootSelector: string;
-        chat: ChatSummary;
-        threadRootEvent: EventWrapper<Message> | undefined;
-        items: FlatChatItem[];
-        readonly: boolean;
-        maintainScroll: boolean;
-        visible: boolean;
-        initialised: boolean;
-        messagesDiv?: HTMLDivElement;
-        messagesDivHeight?: number;
-        // platform-specific class applied to the scroll viewport — must size it
-        // (e.g. flex: auto) and may set padding/gap/background
-        viewportClass?: string;
-        // y-position of the floating date element (from the platform wrapper)
-        stickyDateElTop?: number;
-        stickyDateTimestamp?: bigint;
-        row: Snippet<[FlatChatItem, ChatEventListArgs]>;
-        fabs?: Snippet<[ChatEventListFabArgs]>;
-    }
-
-    let {
-        rootSelector,
-        chat,
-        threadRootEvent,
-        items: allItems,
-        readonly,
-        maintainScroll,
-        visible,
-        initialised = $bindable(),
-        messagesDiv = $bindable(undefined),
-        messagesDivHeight = $bindable(0),
-        viewportClass,
-        stickyDateElTop,
-        stickyDateTimestamp = $bindable(undefined),
-        row,
-        fabs,
-    }: Props = $props();
-
-    let virtualList: VirtualChatList<FlatChatItem> | undefined = $state();
-    let focusIndex = $state<number | undefined>();
-    let interrupt = $state(false);
-    let fromBottom = $state(0);
-    let loadingFromUserScroll = $state(false);
-    let showGoToBottom = $state(false);
-    let showGoToTop = $state(false);
-    let messageObserver: IntersectionObserver | undefined = $state();
-    let scrollingToMessage = false;
-    let scrollToBottomOnSend = false;
-    // Set when the user asks for the latest messages (go-to-bottom FAB). While
-    // set, incoming loads of newer messages snap to the bottom instead of
-    // preserving the reading position — otherwise the catch-up cascade drifts
-    // the viewport away from the bottom the user just asked for. Cleared by a
-    // genuine user scroll or a context change.
-    let pinToBottom = false;
-    let destroyed = false;
-    let loadingNewMessages = false;
-    let loadingPrevMessages = false;
-    // After a scroll-triggered load, block further scroll-triggered loads until
-    // the gesture fully stops (see trackScrollStop) — prevents runaway loading
-    // while momentum keeps the viewport inside a loading threshold.
-    let requireScrollStop = false;
-    // Circuit breaker: if a load completes without changing the items at all
-    // (e.g. every returned event is filtered out of the timeline), the loading
-    // thresholds remain satisfied and the load loop would spin forever —
-    // load → scrollTop restore → scroll event → threshold check → load…
-    // burning CPU and memory until the tab dies. Cool the loader down when a
-    // load makes no progress — per direction, so a fruitless backward load
-    // doesn't also suppress new-message loading (or vice versa).
-    let loadPrevCooldownUntil = 0;
-    let loadNewCooldownUntil = 0;
-    let messageReadTimers: Record<number, number> = {};
-
-    let threadSummary = $derived(threadRootEvent?.event.thread);
-    let messageContext = $derived.by(
-        withEqCheck(
-            () => ({
-                chatId: chat?.id,
-                threadRootMessageIndex: threadRootEvent?.event.messageIndex,
-            }),
-            messageContextsEqual,
-        ),
-    );
-
-    // The event store can hold disjoint ranges: the window loaded around a
-    // navigation target, an island of the very latest messages (merged from
-    // chat summary updates), and scattered strays in between. The timeline
-    // flattens everything into one list, so the estimates spanning the gaps
-    // are fiction — scrolling forward from an old message crosses the gap in
-    // a screenful, hits a false bottom at the island tip, then grinds
-    // backfill loads whose progress lands invisibly above the viewport.
-    // Render only the contiguous segment containing the anchor: the last
-    // navigation target, or the newest segment when reading the live edge.
-    // Threads are always contiguous — no filtering.
-    let anchorMessageIndex = $state<number | undefined>(undefined);
-
-    let items = $derived.by<FlatChatItem[]>(() => {
-        if (threadRootEvent !== undefined || allItems.length === 0) return allItems;
-        const loaded = $eventIndexesLoadedStore;
-        // Segment boundaries: a split between adjacent event items whose gap
-        // is not fully covered by the loaded ranges (expired/disappeared
-        // events count as loaded). allItems is newest-first, so event
-        // indexes descend as the flat index ascends.
-        const bounds = [0];
-        let prev: number | undefined;
-        for (let i = 0; i < allItems.length; i++) {
-            const item = allItems[i];
-            if (item.kind !== "event") continue;
-            const idx = item.event.index;
-            if (prev !== undefined && prev - idx > 1) {
-                const gap = prev - idx - 1;
-                if (loaded.clone().intersect(idx + 1, prev - 1).length !== gap) {
-                    bounds.push(i);
-                }
-            }
-            prev = idx;
-        }
-        if (bounds.length === 1) return allItems;
-        bounds.push(allItems.length);
-        let chosen = 0;
-        if (anchorMessageIndex !== undefined) {
-            for (let s = 0; s < bounds.length - 1; s++) {
-                let newest: number | undefined;
-                let oldest: number | undefined;
-                for (let i = bounds[s]; i < bounds[s + 1]; i++) {
-                    const item = allItems[i];
-                    if (item.kind === "event" && item.event.event.kind === "message") {
-                        newest ??= item.event.event.messageIndex;
-                        oldest = item.event.event.messageIndex;
-                    }
-                }
-                if (
-                    newest !== undefined &&
-                    anchorMessageIndex <= newest &&
-                    anchorMessageIndex >= (oldest ?? newest)
-                ) {
-                    chosen = s;
-                    break;
-                }
-            }
-        }
-        const seg = allItems.slice(bounds[chosen], bounds[chosen + 1]);
-        vclDebug.log("segment", {
-            segs: bounds.length - 1,
-            chosen,
-            anchor: anchorMessageIndex,
-            len: seg.length,
-            of: allItems.length,
-        });
-        return seg;
-    });
-
-    // messageIndex -> flat item index, for programmatic scrolling.
-    // Failed messages are excluded (mirrors findMessageEvent).
-    let messageIndexToFlat = $derived.by(() => {
-        const map = new Map<number, number>();
-        for (let i = 0; i < items.length; i++) {
-            const item = items[i];
-            if (
-                item.kind === "event" &&
-                item.event.event.kind === "message" &&
-                !localUpdates.isFailed(messageContext, item.event.event.messageId)
-            ) {
-                map.set(item.event.event.messageIndex, i);
-            }
-        }
-        return map;
-    });
-
-    const fromTop = () => {
-        if (messagesDiv) {
-            return messagesDiv.scrollHeight - messagesDiv.clientHeight - fromBottom;
-        }
-        return 0;
-    };
-
-    const insideBottomThreshold = () => fromBottom < LOADING_THRESHOLD;
-
-    // A navigation abandoned by a chat switch exits through the context
-    // mismatch guard without clearing scrollingToMessage — which would leave
-    // background loading gated off in the newly selected chat.
-    $effect(() => {
-        void messageContext;
-        scrollingToMessage = false;
-        navToken++;
-        // a hidden-time navigation belongs to the chat it was issued in
-        pendingHiddenNav = undefined;
-        anchorMessageIndex = undefined;
-    });
-    const insideTopThreshold = () => fromTop() < LOADING_THRESHOLD;
-
-    $effect(() => {
-        void fromBottom;
-        updateShowGoToBottom();
-        updateShowGoToTop();
-    });
-
-    $effect(() => {
-        // previously the component would have been destroyed when not showing the middle panel meaning all of
-        // these variables would have been re-initialised
-        if (!visible) {
-            initialised = false;
-            destroyed = true;
-            loadingFromUserScroll = false;
-            scrollingToMessage = false;
-            scrollToBottomOnSend = false;
-            loadingNewMessages = false;
-            loadingPrevMessages = false;
-            requireScrollStop = false;
-            pinToBottom = false;
-        }
-    });
-
-    // A navigation that arrived while the list was hidden (covering panel);
-    // executed as soon as the list is visible again, with a real viewport to
-    // position against. $state is load-bearing: the revive effect must fire
-    // when the navigation is stashed, not only when `visible` next changes —
-    // depending on layout the visibility flip can precede the stash.
-    let pendingHiddenNav = $state<
-        { context: MessageContext; index: number; preserveFocus: boolean } | undefined
-    >(undefined);
-
-    $effect(() => {
-        if (visible && pendingHiddenNav !== undefined) {
-            const nav = pendingHiddenNav;
-            untrack(() => {
-                pendingHiddenNav = undefined;
-                destroyed = false;
-                vclDebug.log("scroll-to-msg-revive", { index: nav.index });
-                scrollToMessageIndex(nav.context, nav.index, nav.preserveFocus);
-            });
-        }
-    });
-
-    // Restore the persisted scroll position (stored as fromBottom, not
-    // scrollTop — it is stable across height re-estimation) when the list
-    // becomes visible again.
-    $effect(() => {
-        if (visible && maintainScroll) {
-            untrack(() => {
-                const fb = $eventListScrollTop;
-                if (fb !== undefined) {
-                    vclDebug.log("restore", { fb: Math.round(fb) });
-                    initialised = true;
-                    destroyed = false;
-                    fromBottom = fb;
-                    // restore the browser scroll position under interrupt; when the
-                    // interrupt ends VirtualChatList resyncs its window from it
-                    interruptScroll(-fb);
-                }
-            });
-        }
-    });
-
-    function updateShowGoToBottom() {
-        showGoToBottom = fromBottom > FROM_END_THRESHOLD;
-    }
-
-    function updateShowGoToTop() {
-        showGoToTop = fromTop() > FROM_END_THRESHOLD;
-    }
-
-    function isDateMarker(item: FlatChatItem): boolean {
-        return item.kind === "timeline_date";
-    }
-
-    // Height classes for the virtual list's unmeasured-item estimates. Date
-    // markers are effectively constant-height and media is several times
-    // taller than text — a single global average is systematically wrong for
-    // everything (trace: 39px markers against a 261px average). Bucket by
-    // content kind, with link-preview texts split out: a text message with an
-    // OG preview measures ~400px against ~80px for plain text, and lumping
-    // them together poisons the shared average from both ends (device trace:
-    // debt railing +892 through a preview cluster and -1183 through plain
-    // text estimated at the inflated shared average).
-    function estimateClass(item: FlatChatItem): string {
-        switch (item.kind) {
-            case "timeline_date":
-                return "date";
-            case "chat_start":
-                return "chat_start";
-            case "event": {
-                const evt = item.event.event;
-                if (evt.kind !== "message") return "event";
-                if (
-                    evt.content.kind === "text_content" &&
-                    ((evt.ogPreviews?.length ?? 0) > 0 ||
-                        (evt.messagePreviews?.length ?? 0) > 0)
-                ) {
-                    return "text_preview";
-                }
-                return evt.content.kind;
-            }
-        }
-    }
-
-    function timestampFor(item: FlatChatItem): bigint | undefined {
-        switch (item.kind) {
-            case "timeline_date":
-                return item.timestamp;
-            case "event":
-                return item.event.timestamp;
-            default:
-                return undefined;
-        }
-    }
-
-    onMount(() => {
-        const messageObserverOptions = {
-            root: messagesDiv as Element,
-            rootMargin: "0px",
-            threshold: [0.1, 0.2, 0.3, 0.4, 0.5],
-        };
-
-        messageObserver = new IntersectionObserver((entries: IntersectionObserverEntry[]) => {
-            entries.forEach((entry) => {
-                const idxAttrs = entry.target.attributes.getNamedItem("data-index");
-                const idAttr = entry.target.attributes.getNamedItem("data-id");
-                const idx = idxAttrs
-                    ? Math.max(...idxAttrs.value.split(" ").map((v) => parseInt(v, 10)))
-                    : undefined;
-                const id = idAttr ? BigInt(idAttr.value) : undefined;
-                if (idx !== undefined) {
-                    const intersectionRatioRequired =
-                        0 < messagesDivHeight && messagesDivHeight < entry.boundingClientRect.height
-                            ? (messagesDivHeight * 0.5) / entry.boundingClientRect.height
-                            : 0.5;
-
-                    const isIntersecting = entry.intersectionRatio >= intersectionRatioRequired;
-                    if (isIntersecting && messageReadTimers[idx] === undefined) {
-                        const context = messageContext;
-                        const timer = window.setTimeout(() => {
-                            // With virtualization a fast fling can destroy the row
-                            // before the observer reports it leaving — the cancel
-                            // branch below never runs, and a message that was only
-                            // glimpsed would be marked read. A destroyed row is
-                            // detached from the document; skip it.
-                            if (
-                                entry.target.isConnected &&
-                                messageContextsEqual(context, messageContext)
-                            ) {
-                                client.markMessageRead(messageContext, idx, id);
-                                messageObserver?.unobserve(entry.target);
-                            }
-                            delete messageReadTimers[idx];
-                        }, MESSAGE_READ_THRESHOLD);
-                        messageReadTimers[idx] = timer;
-                    }
-                    if (!isIntersecting && messageReadTimers[idx] !== undefined) {
-                        window.clearTimeout(messageReadTimers[idx]);
-                        delete messageReadTimers[idx];
-                    }
-                }
-            });
-        }, messageObserverOptions);
-
-        const unsubs = [
-            subscribe("chatUpdated", chatsUpdated),
-            subscribe("reactionSelected", afterReaction),
-            subscribe("sendingMessage", sendingMessage),
-            subscribe("sentMessage", sentMessage),
-            subscribe("loadedMessageWindow", onMessageWindowLoaded),
-            subscribe(
-                "loadedNewMessages",
-                (args) => !scrollingToMessage && onLoadedNewMessages(args),
-            ),
-            subscribe(
-                "loadedPreviousMessages",
-                (args) => !scrollingToMessage && onLoadedPreviousMessages(args),
-            ),
-        ];
-        return () => {
-            unsubs.forEach((u) => u());
-            destroyed = true;
-            messageObserver?.disconnect();
-            messageObserver = undefined;
-            for (const timer of Object.values(messageReadTimers)) {
-                window.clearTimeout(timer);
-            }
-            messageReadTimers = {};
-            clearTimeout(scrollTimeout);
-        };
-    });
-
-    function chatsUpdated(ctx: MessageContext) {
-        // Never start a background new-message load while a message navigation
-        // is in flight: loadEventWindow clears the event store before its
-        // window arrives, and a concurrent load merging the latest messages
-        // into the empty store makes the window fail the contiguity check and
-        // get dropped — the navigation then lands nowhere (observed as pinned
-        // message navigation failing on busy channels most of the time).
-        if (messageContextsEqual(ctx, messageContext) && !scrollingToMessage) {
-            // I *think* chatsUpdated is only going to be because there are new messages to load
-            // so there is no need to load more previous messages. It's better that we don't even check
-            // here because in certain race conditions we might ending up loading the previous messages twice.
-            loadNewMessagesIfRequired();
-        }
-    }
-
-    function sendingMessage(ctx: MessageContext) {
-        if (messageContextsEqual(ctx, messageContext)) {
-            scrollToBottomOnSend = insideBottomThreshold();
-        }
-    }
-
-    function sentMessage(payload: { context: MessageContext; event: EventWrapper<Message> }) {
-        tick().then(() => {
-            if (messageContextsEqual(payload.context, messageContext)) {
-                afterSendMessage(payload.context, payload.event);
-            }
-        });
-    }
-
-    async function afterReaction({
-        messageId,
-        kind,
-    }: {
-        messageId: bigint;
-        kind: "add" | "remove";
-    }) {
-        if (
-            !client.moreNewMessagesAvailable(chat.id, threadRootEvent) &&
-            kind === "add" &&
-            insideBottomThreshold() &&
-            findLastMessage()?.messageId === messageId
-        ) {
-            await scrollBottom("smooth");
-        }
-    }
-
-    function findLastMessage(): Message | undefined {
-        // items[0] is the newest
-        for (const item of items) {
-            if (item.kind === "event" && item.event.event.kind === "message") {
-                return item.event.event;
-            }
-        }
-    }
-
-    async function afterSendMessage(context: MessageContext, event: EventWrapper<Message>) {
-        if (context.threadRootMessageIndex !== undefined && threadRootEvent !== undefined) {
-            const summary = {
-                participantIds: new Set<string>([$currentUserIdStore]),
-                numberOfReplies: event.event.messageIndex + 1,
-                latestEventIndex: event.index,
-                latestEventTimestamp: event.timestamp,
-            };
-            client.markThreadSummaryUpdated(threadRootEvent.event.messageId, summary);
-        }
-
-        if (!client.moreNewMessagesAvailable(chat.id, threadRootEvent) && scrollToBottomOnSend) {
-            scrollBottom("smooth");
-            scrollToBottomOnSend = false;
-        }
-    }
-
-    async function scrollBottom(behavior: ScrollBehavior = "auto"): Promise<void> {
-        vclDebug.log("scroll-bottom", { behavior });
-        // going to the bottom means reading the live edge — re-anchor the
-        // rendered segment to the newest range
-        anchorMessageIndex = undefined;
-        virtualList?.scrollToBottom(behavior);
-        // Protect the jump-to-bottom from iOS momentum: a frame of overflow-y:hidden
-        // halts native momentum scrolling and gates onScroll, so stale in-flight
-        // scroll events can't desync the virtual window from `fromBottom`.
-        // Smooth scrolls are the gentle new-message auto-follow (already near the
-        // bottom, no momentum race), so leave those animating uninterrupted.
-        if (behavior !== "smooth") {
-            await interruptScroll(0);
-        }
-    }
-
-    function shouldLoadPreviousMessages() {
-        if (!chat || Date.now() < loadPrevCooldownUntil) return false;
-        return (
-            visible &&
-            insideTopThreshold() &&
-            client.morePreviousMessagesAvailable(chat.id, threadRootEvent)
-        );
-    }
-
-    function shouldLoadNewMessages() {
-        if (!chat || Date.now() < loadNewCooldownUntil) return false;
-        return (
-            visible &&
-            fromBottom < LOAD_NEW_THRESHOLD &&
-            client.moreNewMessagesAvailable(chat.id, threadRootEvent)
-        );
-    }
-
-    async function loadNew(): Promise<void> {
-        const el = messagesDiv;
-        const preLoadScrollHeight = el?.scrollHeight;
-        // At the bottom the view must FOLLOW new content, not preserve the
-        // reading position: scrollTop=0 is the column-reverse scroll origin
-        // (the old list stayed pinned there for free), so an anchor restore
-        // would push the view away from the bottom by the height of every
-        // arriving batch — in a busy channel that reads as the list
-        // repeatedly jumping ~a viewport up from the bottom.
-        const preAtBottom = fromBottom < 10;
-
-        await client.loadNewMessages(chat.id, threadRootEvent);
-
-        // In column-reverse, new messages are inserted at the visual bottom (scroll
-        // origin), shifting existing content upward. Move the browser scroll
-        // position to match. VirtualChatList's prepend handling has already
-        // moved fromBottom to the equivalent position in the new coordinate
-        // space using its height estimates, and its window/spacers are computed
-        // from those same estimates — so restore scrollTop to -fromBottom. Do
-        // NOT use the scrollHeight delta: it mixes real heights (rendered rows)
-        // with estimates (spacer), and on a large prepend the two coordinate
-        // systems disagree by more than the overscan — observed as a visible
-        // jump plus a flash of the wrong window at the first forward load.
-        if (pinToBottom) {
-            // the user asked for the latest messages; follow the new content
-            // instead of preserving the reading position
-            await tick();
-            await scrollBottom();
-            // The pin has served its purpose once we're caught up — without
-            // this release a user later reading just under the bottom
-            // (fromBottom below the genuine-scroll release threshold) would
-            // be yanked to the latest by the next new-message load.
-            if (!client.moreNewMessagesAvailable(chat.id, threadRootEvent)) {
-                pinToBottom = false;
-            }
-            return;
-        }
-
-        if (el && preLoadScrollHeight !== undefined) {
-            await tick();
-            const delta = el.scrollHeight - preLoadScrollHeight;
-            // The virtual list pinned the prepend to the user's live position
-            // in the same flush that rendered it (anchor-exact, paint-atomic).
-            // That pin is the restore target. Do NOT recompute from an anchor
-            // rect captured before the load await: the user keeps scrolling
-            // while the load is in flight, and restoring a pre-load position
-            // rewinds them by exactly the distance scrolled during the load —
-            // ~the full load latency's worth of scroll on a cold cache, which
-            // is why boundary feel varied so wildly between sessions.
-            const pinned = virtualList?.lastPrependPin();
-            let target = pinned ?? -fromBottom;
-            // Follow-to-bottom applies ONLY at the live bottom of the chat:
-            // preAtBottom re-checked against the current position (the user
-            // may have scrolled away mid-load), AND the load must have caught
-            // us up. At the catch-up WALL (scrollTop=0 mid-history because
-            // the newer content is not loaded yet) preAtBottom is also true,
-            // but forcing the bottom there teleports the user ~a batch of
-            // messages forward on every load — position preservation is what
-            // riding the wall needs.
-            const caughtUp = !client.moreNewMessagesAvailable(chat.id, threadRootEvent);
-            if (preAtBottom && caughtUp && -el.scrollTop < 200) {
-                target = 0;
-            }
-            vclDebug.log("load-new", {
-                preH: Math.round(preLoadScrollHeight),
-                postH: Math.round(el.scrollHeight),
-                delta: Math.round(delta),
-                st: Math.round(el.scrollTop),
-                fb: Math.round(fromBottom),
-                target: Math.round(target),
-                pinned: pinned !== undefined ? Math.round(pinned) : undefined,
-                atBottom: preAtBottom,
-            });
-            if (delta > 0) {
-                if (mobileOperatingSystem === "iOS" || isSafari) {
-                    // ALWAYS interrupt here, even when scrollTop already sits
-                    // at the target (the virtual list's same-flush pin usually
-                    // puts it there): the interrupt's overflow-y:hidden frame
-                    // is what holds the position across WebKit's own
-                    // post-growth scroll anchoring — without it the browser
-                    // snaps scrollTop back toward the pre-load value a moment
-                    // later, teleporting the user into the new batch and
-                    // re-triggering the load threshold (observed as a huge
-                    // forward leap at the boundary even at slow speeds). It
-                    // also stops native physics from swallowing the write.
-                    await interruptScroll(target);
-                } else if (Math.abs(el.scrollTop - target) > 1) {
-                    // on Chrome desktop the freeze itself is a visible hitch
-                    // mid-glide; a plain write is safe (it cancels the wheel
-                    // animation) and onScroll resyncs the window. Skip it when
-                    // the pin already landed us on target.
-                    virtualList?.markProgrammaticScroll();
-                    el.scrollTop = target;
-                }
-            }
-        }
-    }
-
-    async function loadPrev(initialLoad: boolean): Promise<void> {
-        const el = messagesDiv;
-        const preLoadScrollTop = el?.scrollTop;
-
-        await client.loadPreviousMessages(chat.id, threadRootEvent, initialLoad);
-
-        vclDebug.log("load-prev", {
-            preTop: preLoadScrollTop !== undefined ? Math.round(preLoadScrollTop) : undefined,
-            postTop: el ? Math.round(el.scrollTop) : undefined,
-            fb: Math.round(fromBottom),
-            initialLoad,
-        });
-        // Restore against the browser's async post-growth scroll adjustment
-        // (column-reverse quirk after the topSpacer grows), but to where the
-        // user actually IS — not to the position captured at load start. On
-        // iOS the user keeps scrolling while the load is in flight, and
-        // restoring the stale scrollTop yanked the view forward by exactly
-        // the distance scrolled during the load (the top message ducked off
-        // the top of the screen). fromBottom tracks the last scroll event and
-        // is frozen while the interrupt gates the handler, so it is the
-        // pre-quirk, post-user-scroll position.
-        await interruptScroll(-fromBottom);
-    }
-
-    async function loadNewMessagesIfRequired(fromScroll = false): Promise<boolean> {
-        if (loadingNewMessages || loadingPrevMessages) return true;
-        loadingNewMessages = shouldLoadNewMessages();
-        loadingFromUserScroll = loadingNewMessages && fromScroll;
-        if (loadingNewMessages) {
-            await loadNew();
-            loadingNewMessages = false;
-            loadingFromUserScroll = false;
-            return true;
-        }
-        return false;
-    }
-
-    async function loadMoreIfRequired(fromScroll = false, initialLoad = false): Promise<boolean> {
-        if (loadingPrevMessages || loadingNewMessages) return true;
-
-        // After a scroll-triggered load of OLDER messages, block further such
-        // loads until the gesture fully stops (trackScrollStop clears the flag)
-        // — this is what prevents runaway loading during momentum overshoot.
-        // Loads of NEWER messages are exempt: the user is heading for the
-        // bottom, consecutive loads are exactly what they want, and gating them
-        // turns a fast forward scroll into a stop-start crawl against the
-        // scrollTop=0 wall. A forward cascade terminates naturally at the
-        // latest message.
-        const shouldLoadPrev = shouldLoadPreviousMessages() && !(fromScroll && requireScrollStop);
-        const shouldLoadNew = shouldLoadNewMessages();
-
-        if (!shouldLoadPrev && !shouldLoadNew) return false;
-
-        loadingPrevMessages = shouldLoadPrev;
-        loadingNewMessages = shouldLoadNew;
-        loadingFromUserScroll = fromScroll;
-        if (fromScroll && shouldLoadPrev) requireScrollStop = true;
-
-        vclDebug.log("load-check", {
-            prev: shouldLoadPrev,
-            new: shouldLoadNew,
-            fromScroll,
-            fb: Math.round(fromBottom),
-            ft: Math.round(fromTop()),
-        });
-
-        const preLen = items.length;
-        const preFirst = items[0]?.key;
-        const preLast = items[items.length - 1]?.key;
-
-        const loadPromises = [];
-        if (shouldLoadNew) {
-            loadPromises.push(loadNew());
-        }
-        if (shouldLoadPrev) {
-            loadPromises.push(loadPrev(initialLoad));
-        }
-        await Promise.all(loadPromises);
-        loadingPrevMessages = false;
-        loadingNewMessages = false;
-        loadingFromUserScroll = false;
-
-        if (
-            items.length === preLen &&
-            items[0]?.key === preFirst &&
-            items[items.length - 1]?.key === preLast
-        ) {
-            vclDebug.log("!load-noprogress", { len: preLen, prev: shouldLoadPrev, new: shouldLoadNew });
-            const until = Date.now() + 5000;
-            if (shouldLoadPrev) loadPrevCooldownUntil = until;
-            if (shouldLoadNew) loadNewCooldownUntil = until;
-        }
-        return true;
-    }
-
-    async function resetScroll(initialLoad: boolean) {
-        if (initialLoad) {
-            await scrollBottom("auto");
-        }
-        if (!initialised) {
-            initialised = true;
-        }
-    }
-
-    function scrollToMention(mention: Mention | undefined) {
-        if (mention !== undefined) {
-            scrollToMessageIndex(messageContext, mention.messageIndex, false);
-        }
-    }
-
-    function findMessageEvent(index: number): EventWrapper<Message> | undefined {
-        for (const item of items) {
-            if (
-                item.kind === "event" &&
-                item.event.event.kind === "message" &&
-                item.event.event.messageIndex === index &&
-                (messageContext === undefined ||
-                    !localUpdates.isFailed(messageContext, item.event.event.messageId))
-            ) {
-                return item.event as EventWrapper<Message>;
-            }
-        }
-    }
-
-    function isAccepted(_: unknown, evt: EventWrapper<ChatEventType>): boolean {
-        if (evt.event.kind === "message" && messageContext) {
-            return !localUpdates.isPendingAcceptance(messageContext, evt.event.messageId);
-        }
-        return true;
-    }
-
-    function isConfirmed(_: unknown, evt: EventWrapper<ChatEventType>): boolean {
-        if (evt.event.kind === "message" && messageContext) {
-            return !localUpdates.isUnconfirmed(messageContext, evt.event.messageId);
-        }
-        return true;
-    }
-
-    function isFailed(_: unknown, evt: EventWrapper<ChatEventType>): boolean {
-        if (evt.event.kind === "message" && messageContext) {
-            return localUpdates.isFailed(messageContext, evt.event.messageId);
-        }
-        return false;
-    }
-
-    function isReadByMe(_: unknown, evt: EventWrapper<ChatEventType>): boolean {
-        if (readonly || (evt.event.kind === "message" && evt.event.sender === $currentUserIdStore))
-            return true;
-
-        if (evt.event.kind === "message" || evt.event.kind === "aggregate_common_events") {
-            let messageIndex =
-                evt.event.kind === "message"
-                    ? evt.event.messageIndex
-                    : Math.max(...evt.event.messagesDeleted);
-            let messageId = evt.event.kind === "message" ? evt.event.messageId : undefined;
-            return client.isMessageRead(messageContext, messageIndex, messageId);
-        }
-        return true;
-    }
-
-    function checkIfTargetMessageHasAThread(index: number) {
-        const msgEvent = findMessageEvent(index);
-        if (msgEvent && threadRootEvent === undefined) {
-            if (
-                msgEvent.event.thread !== undefined &&
-                // deliberately excludes favourites_route — matches the
-                // pre-virtualisation behaviour
-                ($routeStore.kind === "global_chat_selected_route" ||
-                    $routeStore.kind === "selected_channel_route") &&
-                ($routeStore.open || $routeStore.threadMessageIndex !== undefined)
-            ) {
-                client.openThread(chat.id, msgEvent, false, $routeStore.threadMessageIndex);
-            }
-        }
-    }
-
-    // Incremented for every externally-initiated navigation; the recursive
-    // load-and-refine loop checks it so that a newer navigation (or a rapid
-    // second click) cancels an older in-flight one instead of the two loops
-    // fighting each other with loads and scrolls.
-    let navToken = 0;
-
-    export function scrollToMessageIndex(
-        context: MessageContext,
-        index: number,
-        preserveFocus: boolean,
-        filling: boolean = false,
-        hasLookedUpEvent: boolean = false,
-    ): Promise<void> {
-        const token = ++navToken;
-        return scrollToMessageIndexInternal(
-            token,
-            context,
-            index,
-            preserveFocus,
-            filling,
-            hasLookedUpEvent,
-        ).finally(() => {
-            // The recursion clears the flag on its normal exit paths, but a
-            // rejection anywhere (e.g. loadEventWindow failing on a network
-            // blip) would otherwise leave it stuck true — permanently gating
-            // scroll-triggered and background loading. Only the navigation
-            // that currently owns the flag may clear it.
-            if (token === navToken) {
-                scrollingToMessage = false;
-                // Schedule the focus-highlight clear here, not on the happy
-                // path: an early exit (context switch, superseded navigation,
-                // rejection) used to skip the timer and leave the target
-                // highlighted forever.
-                if (!preserveFocus) {
-                    window.setTimeout(() => {
-                        if (token === navToken && messageContextsEqual(context, messageContext)) {
-                            focusIndex = undefined;
-                        }
-                    }, 500);
-                }
-            }
-        });
-    }
-
-    async function scrollToMessageIndexInternal(
-        token: number,
-        context: MessageContext,
-        index: number,
-        preserveFocus: boolean,
-        filling: boolean = false,
-        hasLookedUpEvent: boolean = false,
-    ): Promise<void> {
-        // it is possible for the chat to change while this function is recursing so double check.
-        // Every early exit logs: three separate debugging sessions were burned
-        // on navigations that died silently between two log lines.
-        if (token !== navToken) {
-            vclDebug.log("scroll-to-msg-exit", { index, why: "superseded", token, navToken });
-            return Promise.resolve();
-        }
-        if (!messageContextsEqual(context, messageContext)) {
-            vclDebug.log("scroll-to-msg-exit", { index, why: "context-changed" });
-            return Promise.resolve();
-        }
-
-        if (index < 0) {
-            focusIndex = undefined;
-            return Promise.resolve();
-        }
-
-        scrollingToMessage = true;
-        // Anchor the rendered segment to the navigation target: if the store
-        // holds the target in a range disjoint from the current one, the
-        // filtered timeline must switch segments for the lookup below to see
-        // it. Only anchor once the target is actually loaded — re-anchoring
-        // to an unloaded index would flip the timeline to the newest segment
-        // and flash unrelated content for the duration of the window load.
-        // (After the window load, the recursive call lands here again with
-        // the target present.)
-        if (
-            allItems.some(
-                (it) =>
-                    it.kind === "event" &&
-                    it.event.event.kind === "message" &&
-                    it.event.event.messageIndex === index,
-            )
-        ) {
-            anchorMessageIndex = index;
-        }
-
-        let flatIndex = messageIndexToFlat.get(index);
-        vclDebug.log("scroll-to-msg", {
-            index,
-            flatIndex,
-            filling,
-            hasLookedUpEvent,
-        });
-        if (flatIndex !== undefined) {
-            focusIndex = index;
-            // Delegate positioning to the virtual list: it positions on estimated
-            // heights immediately and fires debounced corrective re-scrolls as
-            // real measurements arrive.
-            if (virtualList === undefined) {
-                vclDebug.log("scroll-to-msg-exit", { index, why: "no-virtual-list" });
-            }
-            virtualList?.scrollToIndex(flatIndex, "instant");
-            await tick();
-            if (!messageContextsEqual(context, messageContext)) {
-                vclDebug.log("scroll-to-msg-exit", { index, why: "context-changed-post-tick" });
-                return Promise.resolve();
-            }
-            if (!filling) {
-                // if we are not filling in extra events around the target then check if we need to open a thread
-                checkIfTargetMessageHasAThread(index);
-            }
-            if (await loadMoreIfRequired(false, true)) {
-                return scrollToMessageIndexInternal(
-                    token,
-                    context,
-                    index,
-                    preserveFocus,
-                    true,
-                    hasLookedUpEvent,
-                );
-            } else {
-                scrollingToMessage = false;
-                return Promise.resolve();
-            }
-        } else if (destroyed) {
-            // The chat is hidden behind a covering panel (which marks the
-            // list destroyed to emulate the old unmount semantics). A
-            // navigation arriving in this state is usually the very act of
-            // returning to the chat — on single-column layouts the pinned
-            // panel's tap updates the route several ms before the panel
-            // finishes closing — so defer it until the list is visible again
-            // instead of swallowing it.
-            vclDebug.log("scroll-to-msg-deferred", { index });
-            pendingHiddenNav = { context, index, preserveFocus };
-        } else if (!destroyed) {
-            // check whether we have already loaded the event we are looking
-            // for (only the anchored segment counts — a hit in a disjoint
-            // island is filtered out above, so we want the window load)
-            const loaded = findMessageEvent(index);
-            if (loaded === undefined) {
-                if (!hasLookedUpEvent) {
-                    // we must only recurse if we have not already loaded the event, otherwise we will enter an infinite loop.
-                    // Suppress scroll handling across the store swap: the content
-                    // momentarily shrinks while the old events are cleared, and the
-                    // browser clamps scrollTop towards zero — without the interrupt
-                    // that stray scroll event slides the virtual window to the
-                    // bottom and queues a pile of bogus corrections before the
-                    // navigation has even positioned itself.
-                    interrupt = true;
-                    try {
-                        const loadedIdx = await client.loadEventWindow(
-                            context.chatId,
-                            index,
-                            threadRootEvent,
-                        );
-                        vclDebug.log("scroll-to-msg-window", { index, loadedIdx });
-                        await tick();
-                    } finally {
-                        await interruptScroll();
-                    }
-                    return scrollToMessageIndexInternal(
-                        token,
-                        context,
-                        index,
-                        preserveFocus,
-                        filling,
-                        true,
-                    );
-                }
-                vclDebug.log("scroll-to-msg-exit", { index, why: "not-found-after-window-load" });
-                scrollingToMessage = false;
-                // A failed event-window load clears the event store before it
-                // fails, which would otherwise leave the user staring at an
-                // empty list. Fall back to an initial load of the latest
-                // messages so there is always something on screen.
-                if (items.length === 0 && messageContextsEqual(context, messageContext)) {
-                    vclDebug.log("!blank-recovery", { index });
-                    await client.loadPreviousMessages(chat.id, threadRootEvent, true);
-                }
-            } else {
-                // the event is loaded but does not appear in the flat items (e.g. it
-                // is hidden or filtered out) so we cannot scroll to it. Try the next
-                // message, or failing that, the bottom.
-                const next = messageIndexToFlat.get(index + 1);
-                if (next !== undefined) {
-                    return scrollToMessageIndexInternal(
-                        token,
-                        context,
-                        index + 1,
-                        preserveFocus,
-                        filling,
-                    );
-                }
-                scrollingToMessage = false;
-                return scrollBottom();
-            }
-        }
-    }
-
-    export async function onMessageWindowLoaded({
-        context,
-        messageIndex,
-        initialLoad,
-    }: {
-        context: MessageContext;
-        messageIndex: number | undefined;
-        initialLoad: boolean;
-    }) {
-        if (messageIndex === undefined || initialLoad === false) return;
-        await tick();
-        if (!messageContextsEqual(context, messageContext)) return;
-        initialised = true;
-        await scrollToMessageIndex(context, messageIndex, false);
-    }
-
-    async function onLoadedPreviousMessages({
-        context,
-        initialLoad,
-    }: {
-        context: MessageContext;
-        initialLoad: boolean;
-    }) {
-        if (!messageContextsEqual(context, messageContext)) return;
-        await resetScroll(initialLoad);
-        if (!messageContextsEqual(context, messageContext)) return;
-
-        // It is possible the when we load previous messages, because of the filtering applied, we might not
-        // have enough events. To cover that case we will check if we need to load some more.
-        loadMoreIfRequired();
-    }
-
-    async function onLoadedNewMessages(context: MessageContext) {
-        if (!messageContextsEqual(context, messageContext)) return;
-
-        if (
-            !loadingFromUserScroll &&
-            !client.moreNewMessagesAvailable(chat.id, threadRootEvent) &&
-            insideBottomThreshold()
-        ) {
-            // only scroll if we are now within threshold from the bottom
-            scrollBottom("smooth");
-        }
-    }
-
-    // Set overflow-y: hidden on the viewport for one frame. This immediately
-    // halts any momentum scrolling on iOS (preventing the screen going black)
-    // and gates the scroll handler while we programmatically write scrollTop.
-    // If restoreScrollTop is given, it is applied inside the rAF — after any
-    // async browser scroll adjustment has fired — before revealing the viewport.
-    function interruptScroll(restoreScrollTop?: number): Promise<void> {
-        interrupt = true;
-        return new Promise((resolve) => {
-            window.requestAnimationFrame(() => {
-                const el = messagesDiv;
-                if (el && restoreScrollTop !== undefined && el.scrollTop !== restoreScrollTop) {
-                    vclDebug.log("interrupt-restore", {
-                        from: Math.round(el.scrollTop),
-                        to: Math.round(restoreScrollTop),
-                    });
-                    virtualList?.markProgrammaticScroll();
-                    el.scrollTop = restoreScrollTop;
-                }
-                interrupt = false;
-                resolve();
-            });
-        });
-    }
-
-    function onUserScroll(genuine: boolean) {
-        // Only release the bottom pin when the user genuinely scrolls away from
-        // the bottom — scroll events from our own smooth scrollBottom animation
-        // arrive later than the programmatic-write detection window and must
-        // not cancel the user's go-to-latest intent.
-        if (genuine && pinToBottom && fromBottom > 200) {
-            pinToBottom = false;
-        }
-        trackScrollStop(SCROLL_THRESHOLD);
-        if (maintainScroll) {
-            eventListScrollTop.set(fromBottom);
-        }
-        updateShowGoToBottom();
-        updateShowGoToTop();
-        portalState.close();
-        eventListLastScrolled.set(Date.now());
-
-        if (
-            !initialised ||
-            interrupt ||
-            loadingFromUserScroll ||
-            scrollingToMessage ||
-            !visible
-        )
-            return;
-
-        loadMoreIfRequired(true);
-    }
-
-    // A touchstart is an unambiguous user gesture (scroll events may be our
-    // own writes) — release the go-to-latest pin immediately. Without this,
-    // on iOS in a busy chat the pin's catch-up loads keep snapping the
-    // viewport to the bottom faster than the genuine-scroll release (200px of
-    // drag) can trigger, trapping the user at the latest message.
-    function onUserTouch() {
-        pinToBottom = false;
-    }
-
-    async function loadIndexThenScrollToBottom(context: MessageContext, messageIndex: number) {
-        await scrollToMessageIndex(context, messageIndex, false);
-        if (messageContextsEqual(context, messageContext)) {
-            await scrollBottom();
-            // Release the go-to-latest pin once it has completed with nothing
-            // left to catch up on; it must not linger and snap a later load.
-            if (!client.moreNewMessagesAvailable(chat.id, threadRootEvent)) {
-                pinToBottom = false;
-            }
-        }
-    }
-
-    function scrollToTop() {
-        scrollToMessageIndex(messageContext, 0, false);
-    }
-
-    function scrollToLast() {
-        pinToBottom = true;
-        if (threadSummary !== undefined) {
-            loadIndexThenScrollToBottom(messageContext, threadSummary.numberOfReplies - 1);
-        } else {
-            loadIndexThenScrollToBottom(
-                messageContext,
-                chat.latestMessage?.event.messageIndex ?? -1,
-            );
-        }
-    }
-
-    let scrollTimeout: number | undefined = undefined;
-    function trackScrollStop(delay: number) {
-        eventListScrolling.set(true);
-        clearTimeout(scrollTimeout);
-        scrollTimeout = window.setTimeout(() => {
-            eventListScrolling.set(false);
-            requireScrollStop = false;
-            // After scroll stops, re-check thresholds in case we're still inside one.
-            // This handles the case where a load completed but momentum kept scrolling
-            // (blocking further loads), and the user is now stationary near a threshold.
-            loadMoreIfRequired(false);
-        }, delay);
-    }
-</script>
-
-<VirtualChatList
-    bind:this={virtualList}
-    {items}
-    {interrupt}
-    bind:fromBottom
-    bind:viewport={messagesDiv}
-    bind:viewportHeight={messagesDivHeight}
-    id={`scrollable-list-${rootSelector}`}
-    viewportClass={`scrollable-list ${rootSelector} ${viewportClass ?? ""}`}
-    {onUserScroll}
-    {onUserTouch}
-    {estimateClass}
-    caughtUp={() => !client.moreNewMessagesAvailable(chat.id, threadRootEvent)}
-    {isDateMarker}
-    {timestampFor}
-    {stickyDateElTop}
-    bind:stickyDateTimestamp
-    row={renderRow} />
-
-{#snippet renderRow(item: FlatChatItem, _absIdx: number)}
-    {@render row(item, {
-        isAccepted,
-        isConfirmed,
-        isFailed,
-        isReadByMe,
-        messageObserver,
-        focusIndex,
-    })}
-{/snippet}
-
-{@render fabs?.({
-    showGoToTop,
-    showGoToBottom,
-    loadingFromUserScroll,
-    scrollToTop,
-    scrollToLast,
-    scrollToMention,
-})}
diff --git a/frontend/app/src/components_shared/Reload.svelte b/frontend/app/src/components_shared/Reload.svelte
deleted file mode 100644
index 4d49668fda..0000000000
--- a/frontend/app/src/components_shared/Reload.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script lang="ts">
-    import Button from "../components/Button.svelte";
-</script>
-
-<div class="reload">
-    <slot />
-    <div class="btn">
-        <Button onClick={() => window.location.reload()}>Reload</Button>
-    </div>
-</div>
-
-<style lang="scss">
-    .reload {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        text-align: center;
-        @include font(bold, normal, fs-120);
-        padding: $sp5;
-
-        .btn {
-            margin-top: $sp5;
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/home/access/AccessGateBuilder.svelte b/frontend/app/src/desktop/features/access/AccessGateBuilder.svelte
similarity index 94%
rename from frontend/app/src/components/home/access/AccessGateBuilder.svelte
rename to frontend/app/src/desktop/features/access/AccessGateBuilder.svelte
index 346dc4abf8..642c907a1b 100644
--- a/frontend/app/src/components/home/access/AccessGateBuilder.svelte
+++ b/frontend/app/src/desktop/features/access/AccessGateBuilder.svelte
@@ -13,8 +13,8 @@
     } from "@client";
     import Delete from "svelte-material-icons/Delete.svelte";
     import InformationOutline from "svelte-material-icons/InformationOutline.svelte";
-    import Tooltip from "../../../components/tooltip/Tooltip.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
+    import Tooltip from "@src/desktop/ui/tooltip/Tooltip.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
     import {
         gateLabel,
         getBalanceGateBindings,
@@ -22,16 +22,16 @@
         getNeuronGateBindings,
         getPaymentGateBindings,
         type GateBinding,
-    } from "../../../utils/access";
-    import Button from "../../Button.svelte";
-    import ButtonGroup from "../../ButtonGroup.svelte";
-    import Checkbox from "../../Checkbox.svelte";
-    import CollapsibleCard from "../../CollapsibleCard.svelte";
-    import ModalContent from "../../ModalContent.svelte";
-    import Overlay from "../../Overlay.svelte";
-    import Select from "../../Select.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import DurationPicker from "../DurationPicker.svelte";
+    } from "@src/utils/access";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import Checkbox from "@src/desktop/shared/Checkbox.svelte";
+    import CollapsibleCard from "@src/desktop/shared/CollapsibleCard.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import Select from "@src/desktop/shared/Select.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import DurationPicker from "@src/desktop/shared/DurationPicker.svelte";
     import AccessGateExpiry from "./AccessGateExpiry.svelte";
     import AccessGateIcon from "./AccessGateIcon.svelte";
     import LeafGateBuilder from "./LeafGateBuilder.svelte";
diff --git a/frontend/app/src/desktop/features/access/AccessGateCheckFailed.svelte b/frontend/app/src/desktop/features/access/AccessGateCheckFailed.svelte
new file mode 100644
index 0000000000..286e84f66f
--- /dev/null
+++ b/frontend/app/src/desktop/features/access/AccessGateCheckFailed.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+    import { mobileWidth, type EnhancedAccessGate } from "@client";
+    import { i18nKey } from "@src/i18n/i18n";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import AccessGateSummary from "./AccessGateSummary.svelte";
+
+    interface Props {
+        gates: EnhancedAccessGate[];
+        onClose: () => void;
+    }
+
+    let { gates, onClose }: Props = $props();
+</script>
+
+<ModalContent fixedWidth={$mobileWidth} fitToContent={!$mobileWidth} {onClose}>
+    {#snippet header()}
+        <div><Translatable resourceKey={i18nKey("access.gateCheckFailed")} /></div>
+    {/snippet}
+    {#snippet body()}
+        <div class="body">
+            {#each gates as gate}
+                <AccessGateSummary
+                    editable={false}
+                    gateConfig={{ expiry: gate.expiry, gate }}
+                    level={gate.level} />
+            {/each}
+        </div>
+    {/snippet}
+</ModalContent>
+
+<style lang="scss">
+    .body {
+        display: flex;
+        flex-direction: column;
+        gap: $sp4;
+    }
+</style>
diff --git a/frontend/app/src/components/home/access/AccessGateControl.svelte b/frontend/app/src/desktop/features/access/AccessGateControl.svelte
similarity index 91%
rename from frontend/app/src/components/home/access/AccessGateControl.svelte
rename to frontend/app/src/desktop/features/access/AccessGateControl.svelte
index 8a1417aee0..39c69488f0 100644
--- a/frontend/app/src/components/home/access/AccessGateControl.svelte
+++ b/frontend/app/src/desktop/features/access/AccessGateControl.svelte
@@ -3,9 +3,9 @@
     import { _ } from "svelte-i18n";
     import LockOutline from "svelte-material-icons/LockOutline.svelte";
     import { fade } from "svelte/transition";
-    import { i18nKey } from "../../../i18n/i18n";
-    import AlertBox from "../../AlertBox.svelte";
-    import Translatable from "../../Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import AlertBox from "@src/desktop/shared/AlertBox.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
     import AccessGateSummary from "./AccessGateSummary.svelte";
 
     interface Props {
diff --git a/frontend/app/src/desktop/features/access/AccessGateEvaluator.svelte b/frontend/app/src/desktop/features/access/AccessGateEvaluator.svelte
new file mode 100644
index 0000000000..d5dfac5f3a
--- /dev/null
+++ b/frontend/app/src/desktop/features/access/AccessGateEvaluator.svelte
@@ -0,0 +1,270 @@
+<script lang="ts">
+    import {
+        iconSize,
+        isCompositeGate,
+        isCredentialGate,
+        isDiamondGate,
+        isLeafGate,
+        isLifetimeDiamondGate,
+        isPaymentGate,
+        isUniquePersonGate,
+        OpenChat,
+        shouldPreprocessGate,
+        type EnhancedAccessGate,
+        type GateCheckSucceeded,
+        type LeafGate,
+        type PaymentGateApprovals,
+    } from "@client";
+    import { getContext, onMount } from "svelte";
+    import VectorCombine from "svelte-material-icons/VectorCombine.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Radio from "@src/desktop/shared/Radio.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import AccessGateSummary from "./AccessGateSummary.svelte";
+    import CredentialGateEvaluator from "./CredentialGateEvaluator.svelte";
+    import DiamondGateEvaluator from "./DiamondGateEvaluator.svelte";
+    import PaymentGateEvaluator from "./PaymentGateEvaluator.svelte";
+    import UniqueHumanGateEvaluator from "./UniqueHumanGateEvaluator.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        gates: EnhancedAccessGate[];
+        onSuccess: (success: GateCheckSucceeded) => void;
+        onClose: () => void;
+    }
+
+    let { gates, onSuccess, onClose }: Props = $props();
+
+    let result: IteratorResult<EnhancedAccessGate>;
+    let iterator = preprocessGates(gates, needsPreprocessing);
+    let currentGate: EnhancedAccessGate | undefined = $state();
+    let credentials: string[] = [];
+    let paymentApprovals: PaymentGateApprovals = new Map();
+    let compositeGateIndex: number | undefined = undefined;
+    let optionalGatesByIndex: Map<number, LeafGate> = $state(new Map());
+    let optionalInvalid = $derived(
+        currentGate?.kind === "composite_gate" &&
+            optionalGatesByIndex.size >= currentGate.gates.length,
+    );
+
+    onMount(nextGate);
+
+    function needsPreprocessing(gate: EnhancedAccessGate): boolean {
+        if (isCompositeGate(gate) && gate.operator === "or") {
+            return gate.gates.some((g) => shouldPreprocessGate(g));
+        } else {
+            return shouldPreprocessGate(gate);
+        }
+    }
+
+    function leafGatesMatch(a: LeafGate, b: LeafGate) {
+        return JSON.stringify(a) === JSON.stringify(b);
+    }
+
+    function nextGate() {
+        result = iterator.next();
+        if (!result.done) {
+            currentGate = result.value;
+            if (isCompositeGate(currentGate) && currentGate.operator === "or") {
+                optionalGatesByIndex = new Map(
+                    currentGate.gates.map((g, i) => [
+                        i,
+                        { ...g, level: currentGate?.level, expiry: currentGate?.expiry, collectionName: currentGate?.collectionName },
+                    ]),
+                );
+            }
+            if (isLeafGate(currentGate)) {
+                const found = [...optionalGatesByIndex.values()].find((g) =>
+                    leafGatesMatch(g, currentGate as LeafGate),
+                );
+                if (found || client.doesUserMeetAccessGate(currentGate)) {
+                    nextGate();
+                }
+            }
+        } else {
+            currentGate = undefined;
+            onSuccess({ credentials, paymentApprovals, compositeGateIndex });
+        }
+    }
+
+    function* preprocessGates(
+        gates: EnhancedAccessGate[],
+        predicate: (gate: EnhancedAccessGate) => boolean,
+    ): Generator<EnhancedAccessGate> {
+        for (const gate of gates) {
+            if (predicate(gate)) {
+                yield gate;
+            }
+            if (isCompositeGate(gate)) {
+                yield* preprocessGates(
+                    gate.gates.map((g) => ({
+                        ...g,
+                        level: gate.level,
+                        expiry: gate.expiry,
+                        collectionName: gate.collectionName,
+                    })),
+                    predicate,
+                );
+            }
+        }
+    }
+
+    function onApprovePayment({
+        ledger,
+        amount,
+        approvalFee,
+    }: {
+        ledger: string;
+        amount: bigint;
+        approvalFee: bigint;
+    }) {
+        const existing = paymentApprovals.get(ledger);
+        if (existing !== undefined) {
+            // if we already have an approval pending for this ledger we add on the amount
+            // but there will only be one fee
+            existing.amount += amount;
+            paymentApprovals.set(ledger, existing);
+        } else {
+            paymentApprovals.set(ledger, {
+                amount,
+                approvalFee,
+            });
+        }
+        nextGate();
+    }
+
+    function credentialReceived(cred: string) {
+        credentials.push(cred);
+        nextGate();
+    }
+
+    function toggleIndex(i: number, parent: EnhancedAccessGate | undefined) {
+        if (parent === undefined || !isCompositeGate(parent)) return;
+
+        const found = optionalGatesByIndex.has(i);
+        optionalGatesByIndex = new Map(
+            parent.gates.map((g, i) => [i, { ...g, level: parent.level, expiry: parent.expiry, collectionName: parent.collectionName }]),
+        );
+        if (found) {
+            optionalGatesByIndex.delete(i);
+            compositeGateIndex = i;
+        }
+        optionalGatesByIndex = optionalGatesByIndex;
+    }
+</script>
+
+<ModalContent
+    hideHeader
+    hideFooter={currentGate !== undefined && currentGate.kind !== "composite_gate"}
+    closeIcon
+    {onClose}>
+    {#snippet body()}
+        <div class="body access-gate-evaluator">
+            {#if currentGate}
+                {#if isCompositeGate(currentGate) && currentGate.operator === "or"}
+                    <div class="header">
+                        <div class="icon">
+                            <VectorCombine size={$iconSize} color={"var(--txt)"} />
+                        </div>
+                        <p class="title">
+                            <Translatable resourceKey={i18nKey("access.chooseOneGate")} />
+                        </p>
+                    </div>
+                    <p class="subtitle">
+                        <Translatable resourceKey={i18nKey("access.chooseOneGateInfo")} />
+                    </p>
+
+                    {#each currentGate.gates as subgate, i}
+                        <!-- Unique person (DecideAI) verification is suspended - hide it as an option.
+                             Keep the original index i so compositeGateIndex still maps to the real gate. -->
+                        {#if !isUniquePersonGate(subgate)}
+                            <div class="optional-gate">
+                                <Radio
+                                    group={"optional_gates"}
+                                    checked={!optionalGatesByIndex.has(i)}
+                                    onChange={() => toggleIndex(i, currentGate)}
+                                    label={i18nKey(subgate.kind)}
+                                    id={`subgate_${i}`}>
+                                    <AccessGateSummary
+                                        editable={false}
+                                        level={currentGate.level}
+                                        showNoGate={false}
+                                        gateConfig={{ expiry: undefined, gate: subgate }} />
+                                </Radio>
+                            </div>
+                        {/if}
+                    {/each}
+                {:else if isCredentialGate(currentGate)}
+                    <CredentialGateEvaluator
+                        {onClose}
+                        onCredentialReceived={credentialReceived}
+                        gate={currentGate}
+                        level={currentGate.level} />
+                {:else if isUniquePersonGate(currentGate)}
+                    <UniqueHumanGateEvaluator
+                        onCredentialReceived={credentialReceived}
+                        {onClose}
+                        expiry={currentGate.expiry}
+                        level={currentGate.level} />
+                {:else if isPaymentGate(currentGate)}
+                    <PaymentGateEvaluator
+                        {paymentApprovals}
+                        gate={currentGate}
+                        level={currentGate.level}
+                        {onApprovePayment}
+                        {onClose} />
+                {:else if isLifetimeDiamondGate(currentGate)}
+                    <DiamondGateEvaluator
+                        level={currentGate.level}
+                        lifetime
+                        onCredentialReceived={credentialReceived}
+                        onCancel={onClose} />
+                {:else if isDiamondGate(currentGate)}
+                    <DiamondGateEvaluator
+                        level={currentGate.level}
+                        lifetime={false}
+                        onCredentialReceived={credentialReceived}
+                        onCancel={onClose} />
+                {/if}
+            {/if}
+        </div>
+    {/snippet}
+
+    {#snippet footer()}
+        <div>
+            <ButtonGroup>
+                {#if currentGate !== undefined}
+                    {#if isCompositeGate(currentGate)}
+                        <Button disabled={optionalInvalid} onClick={nextGate}>
+                            <Translatable resourceKey={i18nKey("access.next")} />
+                        </Button>
+                    {/if}
+                {:else}
+                    <Button onClick={onClose}>
+                        <Translatable resourceKey={i18nKey("access.join")} />
+                    </Button>
+                {/if}
+            </ButtonGroup>
+        </div>
+    {/snippet}
+</ModalContent>
+
+<style lang="scss">
+    .header {
+        @include font(bold, normal, fs-130, 29);
+        margin-bottom: $sp4;
+        display: flex;
+        align-items: center;
+        gap: $sp3;
+    }
+    .subtitle {
+        margin-bottom: $sp4;
+    }
+    .optional-gate {
+        margin-bottom: $sp3;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/access/AccessGateExpiry.svelte b/frontend/app/src/desktop/features/access/AccessGateExpiry.svelte
new file mode 100644
index 0000000000..f403398104
--- /dev/null
+++ b/frontend/app/src/desktop/features/access/AccessGateExpiry.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+    import { type OpenChat } from "@client";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import { getContext } from "svelte";
+    import { msToDays, msToHours, msToMinutes } from "@src/utils/time";
+
+    type DurationData = {
+        total: number;
+        days: number;
+        hours: number;
+        minutes: number;
+        seconds: number;
+    };
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        expiry: bigint | undefined;
+    }
+
+    let { expiry }: Props = $props();
+
+    function formatDuration(duration: DurationData | undefined): string | undefined {
+        if (duration === undefined) return undefined;
+
+        // TODO - pluralisation & i18n
+        if (duration.days > 0) {
+            return `${msToDays(duration.total)} days`;
+        }
+
+        if (duration.hours > 0) {
+            return `${msToHours(duration.total)} hours`;
+        }
+
+        // TODO - pluralisation & i18n
+        if (duration.minutes > 0) {
+            return `${msToMinutes(duration.total)} minutes`;
+        }
+    }
+    let duration = $derived(expiry ? client.durationFromMilliseconds(Number(expiry)) : undefined);
+    let durationString = $derived(formatDuration(duration));
+</script>
+
+{#if durationString !== undefined}
+    <Translatable
+        resourceKey={i18nKey("access.evaluationIntervalSummary", {
+            interval: durationString,
+        })} />
+{/if}
diff --git a/frontend/app/src/components/home/access/AccessGateIcon.svelte b/frontend/app/src/desktop/features/access/AccessGateIcon.svelte
similarity index 96%
rename from frontend/app/src/components/home/access/AccessGateIcon.svelte
rename to frontend/app/src/desktop/features/access/AccessGateIcon.svelte
index 25c4bff3dc..687cccb9cd 100644
--- a/frontend/app/src/components/home/access/AccessGateIcon.svelte
+++ b/frontend/app/src/desktop/features/access/AccessGateIcon.svelte
@@ -18,11 +18,11 @@
     import Alarm from "svelte-material-icons/Alarm.svelte";
     import ShieldLockOpenOutline from "svelte-material-icons/ShieldLockOpenOutline.svelte";
     import VectorCombine from "svelte-material-icons/VectorCombine.svelte";
-    import Tooltip from "../../../components/tooltip/Tooltip.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import BlueDiamond from "../../icons/BlueDiamond.svelte";
-    import GoldDiamond from "../../icons/GoldDiamond.svelte";
-    import Translatable from "../../Translatable.svelte";
+    import Tooltip from "@src/desktop/ui/tooltip/Tooltip.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import BlueDiamond from "@src/desktop/ui/icons/BlueDiamond.svelte";
+    import GoldDiamond from "@src/desktop/ui/icons/GoldDiamond.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
     import AccessGateBuilder from "./AccessGateBuilder.svelte";
     import AccessGateExpiry from "./AccessGateExpiry.svelte";
     import CredentialGatePopup from "./CredentialGatePopup.svelte";
diff --git a/frontend/app/src/components/home/access/AccessGateIconsForChat.svelte b/frontend/app/src/desktop/features/access/AccessGateIconsForChat.svelte
similarity index 94%
rename from frontend/app/src/components/home/access/AccessGateIconsForChat.svelte
rename to frontend/app/src/desktop/features/access/AccessGateIconsForChat.svelte
index 4e9655f89e..c6d400c1e1 100644
--- a/frontend/app/src/components/home/access/AccessGateIconsForChat.svelte
+++ b/frontend/app/src/desktop/features/access/AccessGateIconsForChat.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { type EnhancedAccessGate, stripSuspendedGate } from "@client";
     import AccessGateIcon from "./AccessGateIcon.svelte";
-    import { mergeAccessGates } from "../../../utils/access";
+    import { mergeAccessGates } from "@src/utils/access";
 
     interface Props {
         gates: EnhancedAccessGate[];
diff --git a/frontend/app/src/desktop/features/access/AccessGateSummary.svelte b/frontend/app/src/desktop/features/access/AccessGateSummary.svelte
new file mode 100644
index 0000000000..17ebbf8ae4
--- /dev/null
+++ b/frontend/app/src/desktop/features/access/AccessGateSummary.svelte
@@ -0,0 +1,114 @@
+<script lang="ts">
+    import {
+        type AccessGate,
+        type AccessGateConfig,
+        type Level,
+        stripSuspendedGate,
+    } from "@client";
+    import AccessGateIcon from "./AccessGateIcon.svelte";
+    import { gateLabel } from "@src/utils/access";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import AccessGateBuilder from "./AccessGateBuilder.svelte";
+    import { _ } from "svelte-i18n";
+
+    interface Props {
+        gateConfig: AccessGateConfig;
+        editable: boolean;
+        level: Level;
+        valid?: boolean;
+        showNoGate?: boolean;
+        onUpdated?: () => void;
+    }
+
+    let {
+        gateConfig = $bindable(),
+        editable,
+        level,
+        valid = $bindable(true),
+        showNoGate = false,
+        onUpdated,
+    }: Props = $props();
+
+    let showDetail = $state(false);
+
+    function open(e: Event) {
+        e.preventDefault();
+        e.stopPropagation();
+        showDetail = true;
+    }
+
+    function getGateResourceKey(gate: AccessGate) {
+        return gateLabel[gate.kind] ?? "access.unknownGate";
+    }
+
+    function getGateText(gate: AccessGate) {
+        if (gate.kind === "composite_gate") {
+            return i18nKey(
+                gate.gates.map((g) => $_(getGateResourceKey(g))).join(` ${gate.operator} `),
+            );
+        }
+        return i18nKey(getGateResourceKey(gate));
+    }
+
+    function close() {
+        showDetail = false;
+        onUpdated?.();
+    }
+    // Display the gate with any suspended (unique person) gates stripped out. The underlying
+    // gateConfig is left untouched so editing preserves the dormant gate.
+    let displayGateConfig = $derived({ ...gateConfig, gate: stripSuspendedGate(gateConfig.gate) });
+    let gateText = $derived(getGateText(displayGateConfig.gate));
+</script>
+
+{#if showDetail}
+    {#if editable}
+        <AccessGateBuilder bind:valid {level} onClose={close} bind:gateConfig {editable} />
+    {:else}
+        <AccessGateBuilder bind:valid {level} onClose={close} gateConfig={displayGateConfig} {editable} />
+    {/if}
+{/if}
+
+{#if displayGateConfig.gate.kind !== "no_gate" || showNoGate}
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class:invalid={!valid} onclick={open} class:editable class="summary">
+        <div class="icon">
+            <AccessGateIcon button {level} showNoGate gateConfig={displayGateConfig} />
+        </div>
+        <div class="name">
+            {#if gateText !== undefined}
+                <Translatable resourceKey={gateText} />
+            {/if}
+        </div>
+    </div>
+{/if}
+
+<style lang="scss">
+    .summary {
+        width: fit-content;
+        padding: $sp3 $sp4;
+        display: flex;
+        align-items: center;
+        gap: $sp3;
+        background: var(--button-bg);
+        border-radius: var(--button-rd);
+        color: var(--button-txt);
+        transition:
+            background ease-in-out 200ms,
+            color ease-in-out 200ms;
+        cursor: pointer;
+
+        @media (hover: hover) {
+            &:hover {
+                background: var(--button-hv);
+                color: var(--button-hv-txt);
+            }
+        }
+
+        &.invalid {
+            background: var(--toast-failure-bg);
+            color: var(--toast-failure-txt);
+        }
+    }
+</style>
diff --git a/frontend/app/src/components/home/access/CredentialGateEvaluator.svelte b/frontend/app/src/desktop/features/access/CredentialGateEvaluator.svelte
similarity index 88%
rename from frontend/app/src/components/home/access/CredentialGateEvaluator.svelte
rename to frontend/app/src/desktop/features/access/CredentialGateEvaluator.svelte
index de210de1e6..abaee35b43 100644
--- a/frontend/app/src/components/home/access/CredentialGateEvaluator.svelte
+++ b/frontend/app/src/desktop/features/access/CredentialGateEvaluator.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
     import type { CredentialGate, Level, OpenChat } from "@client";
     import { getContext, onMount } from "svelte";
-    import Button from "../../Button.svelte";
-    import ErrorMessage from "../../ErrorMessage.svelte";
-    import ButtonGroup from "../../ButtonGroup.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Translatable from "../../Translatable.svelte";
-    import FancyLoader from "../../icons/FancyLoader.svelte";
-    import LinkAccounts from "../profile/LinkAccounts.svelte";
-    import AlertBox from "../../AlertBox.svelte";
+    import Button from "@src/ui/Button.svelte";
+    import ErrorMessage from "@src/desktop/shared/ErrorMessage.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import FancyLoader from "@src/desktop/ui/icons/FancyLoader.svelte";
+    import LinkAccounts from "@src/desktop/features/profile/LinkAccounts.svelte";
+    import AlertBox from "@src/desktop/shared/AlertBox.svelte";
     import AccessGateExpiry from "./AccessGateExpiry.svelte";
 
     const client = getContext<OpenChat>("client");
diff --git a/frontend/app/src/components/home/access/CredentialGatePopup.svelte b/frontend/app/src/desktop/features/access/CredentialGatePopup.svelte
similarity index 76%
rename from frontend/app/src/components/home/access/CredentialGatePopup.svelte
rename to frontend/app/src/desktop/features/access/CredentialGatePopup.svelte
index 734706341e..92f4128eaa 100644
--- a/frontend/app/src/components/home/access/CredentialGatePopup.svelte
+++ b/frontend/app/src/desktop/features/access/CredentialGatePopup.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
     import { _ } from "svelte-i18n";
     import type { CredentialGate } from "@client";
-    import Translatable from "../../Translatable.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
 
     interface Props {
         gate: CredentialGate;
diff --git a/frontend/app/src/components/home/access/CredentialGateSummary.svelte b/frontend/app/src/desktop/features/access/CredentialGateSummary.svelte
similarity index 86%
rename from frontend/app/src/components/home/access/CredentialGateSummary.svelte
rename to frontend/app/src/desktop/features/access/CredentialGateSummary.svelte
index 06ab5a5a74..87f82ba4eb 100644
--- a/frontend/app/src/components/home/access/CredentialGateSummary.svelte
+++ b/frontend/app/src/desktop/features/access/CredentialGateSummary.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { type CredentialGate } from "@client";
-    import Translatable from "../../Translatable.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
 
     interface Props {
         gate: CredentialGate;
diff --git a/frontend/app/src/components/home/access/CredentialSelector.svelte b/frontend/app/src/desktop/features/access/CredentialSelector.svelte
similarity index 96%
rename from frontend/app/src/components/home/access/CredentialSelector.svelte
rename to frontend/app/src/desktop/features/access/CredentialSelector.svelte
index e799a7e8b8..c645baf0ef 100644
--- a/frontend/app/src/components/home/access/CredentialSelector.svelte
+++ b/frontend/app/src/desktop/features/access/CredentialSelector.svelte
@@ -3,11 +3,11 @@
     import { iconSize, type Credential, type CredentialGate } from "@client";
     import { onMount } from "svelte";
     import Delete from "svelte-material-icons/Delete.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Button from "../../Button.svelte";
-    import Input from "../../Input.svelte";
-    import Legend from "../../Legend.svelte";
-    import Translatable from "../../Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Button from "@src/ui/Button.svelte";
+    import Input from "@src/desktop/shared/Input.svelte";
+    import Legend from "@src/desktop/shared/Legend.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
 
     const MIN_LENGTH = 1;
     const MAX_LENGTH = 50;
diff --git a/frontend/app/src/desktop/features/access/DiamondGateEvaluator.svelte b/frontend/app/src/desktop/features/access/DiamondGateEvaluator.svelte
new file mode 100644
index 0000000000..3f262692f6
--- /dev/null
+++ b/frontend/app/src/desktop/features/access/DiamondGateEvaluator.svelte
@@ -0,0 +1,121 @@
+<script lang="ts">
+    import {
+        LEDGER_CANISTER_CHAT,
+        LEDGER_CANISTER_ICP,
+        type Level,
+        cryptoBalanceStore,
+        cryptoLookup,
+    } from "@client";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Diamond from "@src/desktop/ui/icons/Diamond.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import BalanceWithRefresh from "@src/desktop/shared/BalanceWithRefresh.svelte";
+    import CryptoSelector from "@src/desktop/shared/CryptoSelector.svelte";
+    import Payment from "@src/desktop/features/upgrade/Payment.svelte";
+
+    interface Props {
+        lifetime: boolean;
+        level: Level;
+        onCancel: () => void;
+        onCredentialReceived: (cred: string) => void;
+    }
+
+    let { lifetime, level, onCancel, onCredentialReceived }: Props = $props();
+
+    let refreshingBalance = $state(false);
+    let error: string | undefined = $state();
+    let confirming = $state(false);
+    let confirmed = $state(false);
+
+    let ledger: string = $state(
+        import.meta.env.OC_NODE_ENV === "production" ? LEDGER_CANISTER_CHAT : LEDGER_CANISTER_ICP,
+    );
+
+    function onBalanceRefreshed() {
+        error = undefined;
+    }
+
+    function onBalanceRefreshError(err: string) {
+        error = err;
+    }
+    let tokenDetails = $derived({
+        symbol: $cryptoLookup.get(ledger),
+        balance: $cryptoBalanceStore.get(ledger) ?? 0n,
+    });
+</script>
+
+<div class="header">
+    <div class="title-and-icon">
+        <Diamond size={"1em"} show={lifetime ? "gold" : "blue"} />
+        <div>
+            <CryptoSelector
+                bind:ledger
+                filter={(t) => ["chat", "icp"].includes(t.symbol.toLowerCase())} />
+        </div>
+    </div>
+    <div class="balance">
+        <BalanceWithRefresh
+            {ledger}
+            value={tokenDetails.balance}
+            bind:refreshing={refreshingBalance}
+            onRefreshed={onBalanceRefreshed}
+            onError={onBalanceRefreshError} />
+    </div>
+</div>
+<div>
+    {#if !confirming}
+        <p class="para">
+            {#if lifetime}
+                <Translatable
+                    resourceKey={i18nKey(
+                        "access.lifetimeDiamondGateInfo2",
+                        undefined,
+                        level,
+                        true,
+                    )} />
+            {:else}
+                <Translatable
+                    resourceKey={i18nKey("access.diamondGateInfo2", undefined, level, true)} />
+            {/if}
+        </p>
+    {/if}
+
+    <Payment
+        bind:confirmed
+        bind:confirming
+        bind:refreshingBalance
+        {ledger}
+        {error}
+        allowBack={false}
+        {lifetime}
+        showExpiry={false}
+        padded={false}
+        accountBalance={Number(tokenDetails.balance)}
+        onSuccess={onCredentialReceived}
+        {onCancel} />
+</div>
+
+<style lang="scss">
+    .header {
+        @include font(bold, normal, fs-130, 29);
+        margin-bottom: $sp4;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: $sp2;
+    }
+
+    .title-and-icon {
+        display: flex;
+        align-items: center;
+        gap: $sp3;
+    }
+
+    .para {
+        margin-bottom: $sp4;
+    }
+
+    .error {
+        margin-top: $sp4;
+    }
+</style>
diff --git a/frontend/app/src/components/home/access/LeafGateBuilder.svelte b/frontend/app/src/desktop/features/access/LeafGateBuilder.svelte
similarity index 97%
rename from frontend/app/src/components/home/access/LeafGateBuilder.svelte
rename to frontend/app/src/desktop/features/access/LeafGateBuilder.svelte
index 3fb55fa9b6..903c6ba49b 100644
--- a/frontend/app/src/components/home/access/LeafGateBuilder.svelte
+++ b/frontend/app/src/desktop/features/access/LeafGateBuilder.svelte
@@ -15,18 +15,18 @@
     } from "@client";
     import { getContext, onMount } from "svelte";
     import { _ } from "svelte-i18n";
-    import { i18nKey, interpolate } from "../../../i18n/i18n";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
     import {
         balanceGateFolder,
         neuronGateFolder,
         paymentGateFolder,
         type GateBinding,
-    } from "../../../utils/access";
-    import Input from "../../Input.svelte";
-    import Legend from "../../Legend.svelte";
-    import Select from "../../Select.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
+    } from "@src/utils/access";
+    import Input from "@src/desktop/shared/Input.svelte";
+    import Legend from "@src/desktop/shared/Legend.svelte";
+    import Select from "@src/desktop/shared/Select.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
     import CredentialSelector from "./CredentialSelector.svelte";
 
     const client = getContext<OpenChat>("client");
diff --git a/frontend/app/src/desktop/features/access/NoAccess.svelte b/frontend/app/src/desktop/features/access/NoAccess.svelte
new file mode 100644
index 0000000000..931ec8622e
--- /dev/null
+++ b/frontend/app/src/desktop/features/access/NoAccess.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import { _ } from "svelte-i18n";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+
+    interface Props {
+        onClose: () => void;
+    }
+
+    let { onClose }: Props = $props();
+</script>
+
+<ModalContent {onClose}>
+    {#snippet header()}
+        <Translatable resourceKey={i18nKey("noAccess")} />
+    {/snippet}
+    {#snippet body()}
+        <Markdown text={$_("noAccessText")} />
+    {/snippet}
+</ModalContent>
diff --git a/frontend/app/src/desktop/features/access/PaymentGateEvaluator.svelte b/frontend/app/src/desktop/features/access/PaymentGateEvaluator.svelte
new file mode 100644
index 0000000000..67263c9f97
--- /dev/null
+++ b/frontend/app/src/desktop/features/access/PaymentGateEvaluator.svelte
@@ -0,0 +1,171 @@
+<script lang="ts">
+    import {
+        type Level,
+        type OpenChat,
+        type PaymentGate,
+        type PaymentGateApprovals,
+        type ResourceKey,
+        cryptoBalanceStore,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import { pinNumberErrorMessageStore } from "@src/stores/pinNumber";
+    import AlertBox from "@src/desktop/shared/AlertBox.svelte";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import ErrorMessage from "@src/desktop/shared/ErrorMessage.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import AccountInfo from "@src/desktop/shared/AccountInfo.svelte";
+    import BalanceWithRefresh from "@src/desktop/shared/BalanceWithRefresh.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import AccessGateExpiry from "./AccessGateExpiry.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        gate: PaymentGate & { expiry: bigint | undefined };
+        level: Level;
+        paymentApprovals: PaymentGateApprovals;
+        onApprovePayment: (args: { ledger: string; amount: bigint; approvalFee: bigint }) => void;
+        onClose: () => void;
+    }
+
+    let { gate, level, paymentApprovals, onApprovePayment, onClose }: Props = $props();
+
+    let error: ResourceKey | undefined = $state(undefined);
+    let balanceWithRefresh: BalanceWithRefresh | undefined = $state();
+    let refreshingBalance = $state(false);
+
+    function balanceAfterCurrentCommitments(
+        ledger: string,
+        approvals: PaymentGateApprovals,
+        balance: bigint,
+    ) {
+        return balance - (approvals.get(ledger)?.amount ?? 0n);
+    }
+
+    function onStartRefreshingBalance() {
+        refreshingBalance = true;
+    }
+
+    function onRefreshingBalanceSuccess() {
+        error = insufficientFunds ? i18nKey("Insufficient funds") : undefined;
+        refreshingBalance = false;
+    }
+
+    function onRefreshingBalanceFailed() {
+        error = i18nKey("Failed to refresh balance");
+        refreshingBalance = false;
+    }
+
+    function onClickPrimary() {
+        if (insufficientFunds) {
+            balanceWithRefresh?.refresh();
+        } else {
+            onApprovePayment({
+                ledger: token.ledger,
+                amount: gate.amount,
+                approvalFee: token.transferFee,
+            });
+        }
+    }
+    let token = $derived(client.getTokenDetailsForAccessGate(gate)!);
+    let originalBalance = $derived($cryptoBalanceStore.get(token.ledger) ?? 0n);
+    let cryptoBalance = $derived(
+        balanceAfterCurrentCommitments(token.ledger, paymentApprovals, originalBalance),
+    );
+    let insufficientFunds = $derived(cryptoBalance < gate.amount);
+    let approvalMessage = $derived(
+        interpolate(
+            $_,
+            i18nKey(
+                "access.paymentApprovalMessage",
+                {
+                    amount: client.formatTokens(gate.amount, token.decimals),
+                    token: token.symbol,
+                },
+                level,
+                true,
+            ),
+        ),
+    );
+    let distributionMessage = $derived(
+        interpolate($_, i18nKey("access.paymentDistributionMessage", undefined, level, true)),
+    );
+    let errorMessage = $derived(error !== undefined ? error : $pinNumberErrorMessageStore);
+</script>
+
+<div class="header">
+    <div class="title-and-icon">
+        <div class="icon">🔒️</div>
+        <div class="title">
+            <Translatable resourceKey={i18nKey("access.approvePaymentTitle")} />
+        </div>
+    </div>
+    <BalanceWithRefresh
+        bind:this={balanceWithRefresh}
+        ledger={gate.ledgerCanister}
+        value={cryptoBalance}
+        label={i18nKey("cryptoAccount.shortBalanceLabel")}
+        bold
+        onClick={onStartRefreshingBalance}
+        onRefreshed={onRefreshingBalanceSuccess}
+        onError={onRefreshingBalanceFailed} />
+</div>
+<div>
+    <p>
+        <Markdown text={approvalMessage + " " + distributionMessage} />
+    </p>
+    {#if gate.expiry !== undefined}
+        <AlertBox>
+            <AccessGateExpiry expiry={gate.expiry} />
+        </AlertBox>
+    {/if}
+    {#if errorMessage !== undefined}
+        <div class="error">
+            <ErrorMessage><Translatable resourceKey={errorMessage} /></ErrorMessage>
+        </div>
+    {/if}
+    {#if insufficientFunds}
+        <AccountInfo ledger={gate.ledgerCanister} />
+        <p><Translatable resourceKey={i18nKey("tokenTransfer.makeDeposit")} /></p>
+    {/if}
+</div>
+<div>
+    <ButtonGroup>
+        <Button secondary onClick={onClose}>{$_("cancel")}</Button>
+        <Button loading={refreshingBalance} onClick={onClickPrimary}
+            ><Translatable
+                resourceKey={i18nKey(insufficientFunds ? "Refresh" : "Approve payment")} /></Button>
+    </ButtonGroup>
+</div>
+
+<style lang="scss">
+    .header {
+        @include font(bold, normal, fs-130, 29);
+        margin-bottom: $sp4;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: $sp2;
+    }
+
+    .title-and-icon {
+        display: flex;
+        align-items: center;
+        gap: $sp3;
+    }
+
+    .icon {
+        @include font-size(fs-130);
+    }
+
+    p {
+        margin-bottom: $sp4;
+    }
+
+    .error {
+        margin-top: $sp4;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/access/UniqueHumanGateEvaluator.svelte b/frontend/app/src/desktop/features/access/UniqueHumanGateEvaluator.svelte
new file mode 100644
index 0000000000..9efa868cc5
--- /dev/null
+++ b/frontend/app/src/desktop/features/access/UniqueHumanGateEvaluator.svelte
@@ -0,0 +1,172 @@
+<script lang="ts">
+    import { iconSize, type Level, type OpenChat } from "@client";
+    import { getContext, onMount } from "svelte";
+    import { _ } from "svelte-i18n";
+    import AccountCheck from "svelte-material-icons/AccountCheck.svelte";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import { uniquePersonCredentialGate } from "@src/utils/access";
+    import AlertBox from "@src/desktop/shared/AlertBox.svelte";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import ErrorMessage from "@src/desktop/shared/ErrorMessage.svelte";
+    import FancyLoader from "@src/desktop/ui/icons/FancyLoader.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import HumanityConfirmation from "@src/desktop/shared/HumanityConfirmation.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import LinkAccounts from "@src/desktop/features/profile/LinkAccounts.svelte";
+    import AccessGateExpiry from "./AccessGateExpiry.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        level: Level;
+        expiry: bigint | undefined;
+        onCredentialReceived: (cred: string) => void;
+        onClose: () => void;
+    }
+
+    let { level, expiry, onClose, onCredentialReceived }: Props = $props();
+
+    let failed = $state(false);
+    let verifying = $state(false);
+    let confirmed = $state(false);
+    let step: "linking" | "verification" = $state("linking");
+    let iiPrincipal: string | undefined = $state(undefined);
+    let checkingPrincipal = $state(true);
+
+    onMount(() => {
+        client
+            .getLinkedIIPrincipal()
+            .then((p) => {
+                iiPrincipal = p;
+                if (iiPrincipal !== undefined) {
+                    step = "verification";
+                }
+            })
+            .finally(() => (checkingPrincipal = false));
+    });
+
+    function verify() {
+        verifying = true;
+        failed = false;
+        if (iiPrincipal === undefined) return;
+        client
+            .verifyAccessGate(uniquePersonCredentialGate, iiPrincipal)
+            .then((credential) => {
+                if (credential === undefined) {
+                    failed = true;
+                } else {
+                    onCredentialReceived(credential);
+                }
+            })
+            .catch(() => (failed = true))
+            .finally(() => (verifying = false));
+    }
+</script>
+
+{#if checkingPrincipal}
+    <div class="loader">
+        <FancyLoader />
+    </div>
+{:else if step === "linking"}
+    <LinkAccounts
+        bind:iiPrincipal
+        {onClose}
+        onProceed={() => (step = "verification")}
+        explanations={[i18nKey("identity.humanityWarning")]} />
+{:else}
+    <div class="header">
+        <AccountCheck size={$iconSize} color={"var(--txt)"} />
+        <div class="title">
+            <Translatable resourceKey={i18nKey("access.uniquePerson")} />
+        </div>
+    </div>
+    <div>
+        {#if failed}
+            <p class="info">
+                <ErrorMessage>
+                    <Translatable
+                        resourceKey={i18nKey(
+                            "access.credential.credentialCheckFailed",
+                            {
+                                credential: "Unique person",
+                            },
+                            level,
+                            true,
+                        )} />
+                </ErrorMessage>
+            </p>
+            <p class="question">
+                <Translatable resourceKey={i18nKey("access.uniquePersonInfo1")} />
+            </p>
+
+            <p class="answer">
+                <Markdown text={interpolate($_, i18nKey("access.uniquePersonInfo2"))} />
+            </p>
+
+            <p class="answer">
+                <Translatable resourceKey={i18nKey("access.uniquePersonInfo3")} />
+            </p>
+        {:else}
+            <p class="info">
+                <Translatable
+                    resourceKey={i18nKey(
+                        "access.credential.credentialCheckMessage",
+                        {
+                            credential: "Unique person",
+                        },
+                        level,
+                        true,
+                    )} />
+            </p>
+
+            <HumanityConfirmation bind:confirmed />
+
+            {#if expiry !== undefined}
+                <AlertBox>
+                    <AccessGateExpiry {expiry} />
+                </AlertBox>
+            {/if}
+        {/if}
+    </div>
+    <div>
+        <ButtonGroup>
+            <Button secondary onClick={onClose}
+                ><Translatable resourceKey={i18nKey("cancel")} /></Button>
+            <Button
+                loading={verifying}
+                disabled={verifying || !confirmed || iiPrincipal === undefined}
+                onClick={verify}><Translatable resourceKey={i18nKey("access.verify")} /></Button>
+        </ButtonGroup>
+    </div>
+{/if}
+
+<style lang="scss">
+    .header {
+        @include font(bold, normal, fs-130, 29);
+        margin-bottom: $sp4;
+        display: flex;
+        align-items: center;
+        gap: $sp3;
+    }
+
+    .info,
+    .question,
+    .answer {
+        margin-bottom: $sp4;
+    }
+
+    .question {
+        @include font(book, normal, fs-90);
+    }
+
+    .answer {
+        color: var(--txt-light);
+        @include font(book, normal, fs-90);
+    }
+
+    .loader {
+        width: 100px;
+        margin: 100px auto;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/access/insurance/StreakInsuranceBuy.svelte b/frontend/app/src/desktop/features/access/insurance/StreakInsuranceBuy.svelte
new file mode 100644
index 0000000000..7f77ada40f
--- /dev/null
+++ b/frontend/app/src/desktop/features/access/insurance/StreakInsuranceBuy.svelte
@@ -0,0 +1,190 @@
+<script lang="ts">
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import { toastStore } from "@src/stores/toast";
+    import {
+        LEDGER_CANISTER_CHAT,
+        OpenChat,
+        cryptoBalanceStore,
+        cryptoLookup,
+        streakInsuranceStore,
+    } from "@client";
+    import { getContext } from "svelte";
+    import Equal from "svelte-material-icons/Equal.svelte";
+    import Minus from "svelte-material-icons/Minus.svelte";
+    import ShieldHalfFull from "svelte-material-icons/ShieldHalfFull.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import BalanceWithRefresh from "@src/desktop/shared/BalanceWithRefresh.svelte";
+
+    const client = getContext<OpenChat>("client");
+    interface Props {
+        onClose: () => void;
+    }
+
+    const MAX_DAYS = 30;
+    const ledger = LEDGER_CANISTER_CHAT;
+    const currentDaysInsured = $streakInsuranceStore.daysInsured;
+    const currentDaysMissed = $streakInsuranceStore.daysMissed;
+    let { onClose }: Props = $props();
+    let tokenDetails = $derived({
+        symbol: $cryptoLookup.get(ledger),
+        balance: $cryptoBalanceStore.get(ledger) ?? 0n,
+    });
+    let additionalDays = $state(0);
+    let confirming = $state(false);
+    let confirmed = $state(false);
+    let refreshingBalance = $state(false);
+    let priceE8s = $derived(client.streakInsurancePrice(currentDaysInsured, additionalDays));
+    let price = $derived(priceE8s / 100_000_000n);
+    let remainingBalance = $derived(tokenDetails.balance - priceE8s);
+    let insufficientBalance = $derived(remainingBalance < 0);
+    let paying = $state(false);
+    let remaining = $derived(currentDaysInsured + additionalDays - currentDaysMissed);
+    let totalDays = $derived(currentDaysInsured + additionalDays);
+    let maxReached = $derived(totalDays >= MAX_DAYS);
+
+    function pay() {
+        paying = true;
+        client
+            .payForStreakInsurance(additionalDays, priceE8s)
+            .then((resp) => {
+                if (resp.kind !== "success") {
+                    toastStore.showFailureToast(i18nKey("streakInsurance.failure"));
+                } else {
+                    onClose();
+                }
+            })
+            .finally(() => (paying = false));
+    }
+</script>
+
+<Overlay {onClose}>
+    <ModalContent fill {onClose}>
+        {#snippet header()}
+            <div class="header">
+                {#if !confirming && !confirmed}
+                    <div class="title">
+                        <ShieldHalfFull size={"1em"} />
+                        <Translatable resourceKey={i18nKey("streakInsurance.topUpTitle")} />
+                    </div>
+                    <div class="balance">
+                        <BalanceWithRefresh
+                            {ledger}
+                            value={remainingBalance}
+                            bind:refreshing={refreshingBalance} />
+                    </div>
+                {/if}
+            </div>
+        {/snippet}
+        {#snippet body()}
+            <div class="details">
+                <div class="column">
+                    <div class="label">
+                        <Translatable resourceKey={i18nKey("streakInsurance.bought")}
+                        ></Translatable>
+                    </div>
+                    <div class="number">
+                        {totalDays}
+                    </div>
+                </div>
+
+                <div class="column operator">
+                    <Minus color={"var(--txt-light)"} />
+                </div>
+
+                <div class="column">
+                    <div class="label">
+                        <Translatable resourceKey={i18nKey("streakInsurance.missed")}
+                        ></Translatable>
+                    </div>
+                    <div class="number">
+                        {currentDaysMissed}
+                    </div>
+                </div>
+
+                <div class="column operator">
+                    <Equal color={"var(--txt-light)"} />
+                </div>
+
+                <div class="column">
+                    <div class="label">
+                        <Translatable resourceKey={i18nKey("streakInsurance.remaining")}
+                        ></Translatable>
+                    </div>
+                    <div class="number">
+                        {remaining}
+                    </div>
+                </div>
+            </div>
+        {/snippet}
+        {#snippet footer()}
+            <ButtonGroup nowrap>
+                <Button disabled={paying} small secondary onClick={onClose}>
+                    <Translatable resourceKey={i18nKey("cancel")}></Translatable>
+                </Button>
+                <Button disabled={paying || maxReached} small onClick={() => (additionalDays += 1)}>
+                    <Translatable resourceKey={i18nKey("streakInsurance.addDay")}></Translatable>
+                </Button>
+                <Button
+                    loading={paying}
+                    disabled={paying || additionalDays === 0 || insufficientBalance}
+                    small
+                    onClick={pay}>
+                    <Translatable
+                        resourceKey={i18nKey("streakInsurance.pay", {
+                            price: price.toLocaleString(),
+                        })}></Translatable>
+                </Button>
+            </ButtonGroup>
+        {/snippet}
+    </ModalContent>
+</Overlay>
+
+<style lang="scss">
+    .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .title {
+        display: flex;
+        align-items: center;
+        gap: $sp3;
+    }
+
+    .details {
+        display: flex;
+        gap: $sp3;
+        padding: $sp5;
+        justify-content: space-evenly;
+        max-width: toRem(500);
+        margin: 0 auto;
+        min-width: 75%;
+
+        .column {
+            text-align: center;
+            align-self: center;
+
+            .label {
+                text-transform: uppercase;
+                @include font(light, normal, fs-80);
+                color: var(--txt-light);
+            }
+
+            .number {
+                @include font(bold, normal, fs-240);
+                color: var(--error);
+            }
+        }
+
+        .operator {
+            margin-top: $sp6;
+            @include font(light, normal, fs-200);
+            color: var(--txt-light);
+        }
+    }
+</style>
diff --git a/frontend/app/src/components/home/insurance/StreakInsuranceSummary.svelte b/frontend/app/src/desktop/features/access/insurance/StreakInsuranceSummary.svelte
similarity index 87%
rename from frontend/app/src/components/home/insurance/StreakInsuranceSummary.svelte
rename to frontend/app/src/desktop/features/access/insurance/StreakInsuranceSummary.svelte
index 42e94daef1..ff7eb1c0ad 100644
--- a/frontend/app/src/components/home/insurance/StreakInsuranceSummary.svelte
+++ b/frontend/app/src/desktop/features/access/insurance/StreakInsuranceSummary.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-    import Button from "@src/components/Button.svelte";
-    import InfoIcon from "@src/components/InfoIcon.svelte";
-    import Legend from "@src/components/Legend.svelte";
-    import Translatable from "@src/components/Translatable.svelte";
+    import Button from "@src/ui/Button.svelte";
+    import InfoIcon from "@src/desktop/shared/InfoIcon.svelte";
+    import Legend from "@src/desktop/shared/Legend.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
     import { i18nKey } from "@src/i18n/i18n";
     import { streakInsuranceStore } from "@client";
     import StreakInsuranceBuy from "./StreakInsuranceBuy.svelte";
diff --git a/frontend/app/src/desktop/features/activity/ActivityEvent.svelte b/frontend/app/src/desktop/features/activity/ActivityEvent.svelte
new file mode 100644
index 0000000000..82b9d2b8e4
--- /dev/null
+++ b/frontend/app/src/desktop/features/activity/ActivityEvent.svelte
@@ -0,0 +1,323 @@
+<script lang="ts">
+    import type { Message, MessageActivityEvent, ResourceKey } from "@client";
+    import {
+        activityFeedShowing,
+        allUsersStore,
+        AvatarSize,
+        communitiesStore,
+        currentUserIdStore,
+        OpenChat,
+        routeForMessageContext,
+        type MessageContext,
+    } from "@client";
+    import { navigate } from "@src/utils/navigation";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import { buildDisplayName } from "@src/utils/user";
+    import Avatar from "@src/desktop/shared/Avatar.svelte";
+    import Link from "@src/desktop/shared/Link.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import MessageReaction from "@src/desktop/shared/MessageReaction.svelte";
+    import TipThumbnail from "@src/desktop/shared/TipThumbnail.svelte";
+    import ActivityIcon from "./ActivityIcon.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        event: MessageActivityEvent;
+        selected: boolean;
+        onClick: () => void;
+    }
+
+    let { event, selected, onClick }: Props = $props();
+
+    function getChatName(ctx: MessageContext): string | undefined {
+        const chat = client.lookupChatSummary(ctx.chatId);
+        const parts = [];
+        if (chat !== undefined) {
+            switch (chat.kind) {
+                case "direct_chat":
+                    parts.push(client.getDisplayName(chat.them.userId));
+                    break;
+                case "group_chat":
+                    parts.push(chat.name);
+                    break;
+                case "channel":
+                    const community = $communitiesStore.get({
+                        kind: "community",
+                        communityId: chat.id.communityId,
+                    });
+                    if (community) {
+                        parts.push(community.name);
+                    }
+                    parts.push(chat.name);
+                    break;
+            }
+            if (ctx.threadRootMessageIndex !== undefined) {
+                parts.push("Thread");
+            }
+            return parts.join(" > ");
+        }
+        return undefined;
+    }
+
+    function otherReactors(ev: MessageActivityEvent): Set<string> {
+        if (ev.message === undefined) return new Set();
+        return new Set(
+            ev.message.reactions.flatMap((r) =>
+                [...r.userIds].filter((u) => u !== ev.userId && u !== $currentUserIdStore),
+            ),
+        );
+    }
+
+    function otherTippers(ev: MessageActivityEvent): Set<string> {
+        if (ev.message === undefined) return new Set();
+        return new Set(
+            Object.values(ev.message.tips).flatMap((tips) => {
+                return Object.keys(tips).filter((u) => u !== ev.userId);
+            }),
+        );
+    }
+
+    function numberOfPeopleVoting(msg: Message | undefined): number {
+        if (msg === undefined || msg.content.kind !== "poll_content") return 1;
+        const content = msg.content;
+        if (content.votes.total.kind === "anonymous_poll_votes") {
+            return Object.values(content.votes.total.votes).reduce((total, n) => total + n, 0);
+        } else if (content.votes.total.kind === "hidden_poll_votes") {
+            return content.votes.total.votes;
+        } else if (content.votes.total.kind === "visible_poll_votes") {
+            return Object.values(content.votes.total.votes).reduce(
+                (total, n) => total + n.length,
+                0,
+            );
+        }
+        return 1;
+    }
+
+    function pluraliseMessage(
+        root: "tip" | "reaction",
+        username: string,
+        others: Set<string>,
+    ): ResourceKey {
+        switch (others.size) {
+            case 0:
+                return i18nKey(`activity.${root}One`, { username });
+            case 1:
+                const u = [...others][0];
+                return i18nKey(`activity.${root}Two`, {
+                    username,
+                    other: buildDisplayName(
+                        $allUsersStore,
+                        u,
+                        u === $currentUserIdStore ? "me" : "user",
+                    ),
+                });
+            default:
+                return i18nKey(`activity.${root}N`, { username, n: others.size });
+        }
+    }
+
+    function buildEventSummary(event: MessageActivityEvent, username: string) {
+        switch (event.activity) {
+            case "reaction":
+                return pluraliseMessage("reaction", username, otherReactors(event));
+            case "mention":
+                return i18nKey("activity.mention", { username });
+            case "quote_reply":
+                return i18nKey("activity.quoteReply", { username });
+            case "tip":
+                return pluraliseMessage("tip", username, otherTippers(event));
+            case "crypto":
+                return i18nKey("activity.crypto", { username });
+            case "poll_vote":
+                const numVoters = numberOfPeopleVoting(event.message);
+                if (numVoters > 1) {
+                    return i18nKey("activity.pollVoteN", { username, number: numVoters - 1 });
+                } else {
+                    return i18nKey("activity.pollVote", { username });
+                }
+            case "p2p_swap_accepted":
+                return i18nKey("activity.p2pSwapAccepted", { username });
+        }
+    }
+
+    function formatLatestMessage(event: MessageActivityEvent, username: string): string {
+        if (event.message === undefined) return "TODO - not sure what this means";
+        const latestMessageText = client.getContentAsText($_, event.message.content);
+        return `${username}: ${latestMessageText}`;
+    }
+
+    function goToEventContext() {
+        activityFeedShowing.set(false);
+        navigate(routeForMessageContext("none", event.messageContext, true));
+    }
+    let sender = $derived(event.userId ? $allUsersStore.get(event.userId) : undefined);
+    let eventUsername = $derived(
+        event.userId
+            ? buildDisplayName(
+                  $allUsersStore,
+                  event.userId,
+                  event.userId === $currentUserIdStore ? "me" : "user",
+              )
+            : $_("activity.anon"),
+    );
+    let messageUsername = $derived(
+        event.message
+            ? buildDisplayName(
+                  $allUsersStore,
+                  event.message.sender,
+                  event.message.sender === $currentUserIdStore ? "me" : "user",
+              )
+            : $_("activity.anon"),
+    );
+    let lastMessage = $derived(formatLatestMessage(event, messageUsername));
+    let eventSummary = $derived(buildEventSummary(event, eventUsername));
+    let chatName = $derived(getChatName(event.messageContext));
+    let tips = $derived(event?.message?.tips ? Object.entries(event.message.tips) : []);
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<div role="button" class="activity-event" class:selected tabindex="0" onclick={onClick}>
+    <div class="header">
+        <div class="name">
+            <Link onClick={goToEventContext}>{chatName}</Link>
+        </div>
+        <div class="date">
+            {client.formatMessageDate(event.timestamp, $_("today"), $_("yesterday"), true, true)}
+        </div>
+    </div>
+    <div class="body">
+        <div class="avatar">
+            <Avatar
+                statusBorder={selected ? "var(--chatSummary-hv)" : "transparent"}
+                url={client.userAvatarUrl(sender)}
+                userId={event.userId}
+                size={AvatarSize.Default} />
+            <ActivityIcon activity={event.activity} />
+        </div>
+        <div class="details">
+            <div class="event-sumary">
+                <h4>
+                    <Markdown text={interpolate($_, eventSummary)} />
+                </h4>
+            </div>
+            <div class="chat-msg">
+                {#if event.message !== undefined}
+                    <Markdown text={lastMessage} oneLine twoLine suppressLinks />
+                {:else}
+                    <Translatable resourceKey={i18nKey("activity.missingMessage")} />
+                {/if}
+            </div>
+            {#if event.activity === "reaction" && event.message !== undefined && event.message.reactions.length > 0}
+                <div class="message-reactions">
+                    {#each event.message.reactions as { reaction, userIds } (reaction)}
+                        <MessageReaction {reaction} {userIds} />
+                    {/each}
+                </div>
+            {/if}
+            {#if event.activity === "tip" && tips.length > 0}
+                <div class="tips">
+                    {#each tips as [ledger, userTips]}
+                        <TipThumbnail canTip={false} {ledger} {userTips} />
+                    {/each}
+                </div>
+            {/if}
+        </div>
+    </div>
+</div>
+
+<style lang="scss">
+    :global(.activity-event a) {
+        color: inherit;
+    }
+
+    .activity-event {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 0;
+        cursor: pointer;
+        transition:
+            background-color ease-in-out 100ms,
+            border-color ease-in-out 100ms;
+        user-select: none;
+        border-bottom: var(--bw) solid var(--bd);
+
+        @media (hover: hover) {
+            &:hover {
+                background-color: var(--chatSummary-hv);
+            }
+        }
+
+        &.selected {
+            background-color: var(--chatSummary-bg-selected);
+        }
+    }
+
+    .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        color: var(--txt-light);
+        @include font(book, normal, fs-60);
+        padding: $sp3 $sp4 0 $sp4;
+    }
+
+    .body {
+        padding: $sp3 $sp4 $sp4 $sp4;
+        display: flex;
+        align-items: flex-start;
+        gap: 12px;
+
+        @include mobile() {
+            padding: $sp3 toRem(10);
+        }
+    }
+
+    .avatar {
+        flex: 0 0 40px;
+        position: relative;
+    }
+
+    .details {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        overflow: hidden;
+
+        .event-sumary {
+            h4 {
+                @include font(medium, normal, fs-100);
+                display: flex;
+                flex-direction: row;
+                gap: $sp2;
+            }
+            margin-bottom: $sp1;
+        }
+
+        .chat-msg {
+            color: var(--txt-light);
+            @include font(book, normal, fs-80);
+        }
+    }
+
+    .date {
+        display: flex;
+        gap: $sp2;
+        align-self: flex-end;
+        color: var(--txt-light);
+        @include font(book, normal, fs-60);
+    }
+
+    .message-reactions,
+    .tips {
+        display: flex;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        gap: 3px;
+        margin-top: $sp2;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/activity/ActivityFeed.svelte b/frontend/app/src/desktop/features/activity/ActivityFeed.svelte
new file mode 100644
index 0000000000..0dd39489e9
--- /dev/null
+++ b/frontend/app/src/desktop/features/activity/ActivityFeed.svelte
@@ -0,0 +1,102 @@
+<script lang="ts">
+    import { activityFeedState } from "@src/runes/activity.svelte";
+    import { menuCloser } from "component-lib";
+    import {
+        activityFeedShowing,
+        iconSize,
+        messageActivitySummaryStore,
+        messageContextToChatListScope,
+        messageContextToString,
+        OpenChat,
+        routeForMessage,
+        type MessageActivityEvent,
+    } from "@client";
+    import { navigate } from "@src/utils/navigation";
+    import { getContext } from "svelte";
+    import BellRingOutline from "svelte-material-icons/BellRingOutline.svelte";
+    import Close from "svelte-material-icons/Close.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import SectionHeader from "@src/desktop/shared/SectionHeader.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import VirtualList from "@src/ui/VirtualList.svelte";
+    import ActivityEvent from "./ActivityEvent.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    let selectedEventIndex = $state<number | undefined>();
+    let uptodate = $derived.by(() => {
+        return $messageActivitySummaryStore.latestTimestamp <= activityFeedState.latestTimestamp;
+    });
+
+    function loadActivity() {
+        client.subscribeToMessageActivityFeed((resp, final) => {
+            activityFeedState.activityEvents = resp.events;
+            if (activityFeedState.activityEvents.length > 0 && final) {
+                client.markActivityFeedRead(activityFeedState.latestTimestamp);
+            }
+        });
+    }
+
+    function selectEvent(ev: MessageActivityEvent, idx: number) {
+        selectedEventIndex = idx;
+        navigate(
+            routeForMessage(
+                messageContextToChatListScope(ev.messageContext).kind,
+                ev.messageContext,
+                ev.messageIndex,
+            ),
+        );
+    }
+
+    function eventKey(event: MessageActivityEvent): string {
+        return `${messageContextToString(event.messageContext)}_${event.eventIndex}_${
+            event.activity
+        }`;
+    }
+
+    $effect(() => {
+        if (!uptodate) {
+            loadActivity();
+        }
+    });
+</script>
+
+<SectionHeader slim border={false}>
+    <div class="header">
+        <div class="icon">
+            <BellRingOutline size={$iconSize} color={"var(--icon-txt)"} />
+        </div>
+        <div class="details">
+            <h4 class="name"><Translatable resourceKey={i18nKey("activity.title")} /></h4>
+        </div>
+        <span class="menu">
+            <HoverIcon onclick={() => activityFeedShowing.set(false)}>
+                <Close size={$iconSize} color={"var(--icon-txt)"} />
+            </HoverIcon>
+        </span>
+    </div>
+</SectionHeader>
+
+<div use:menuCloser class="body">
+    <VirtualList keyFn={eventKey} items={activityFeedState.activityEvents}>
+        {#snippet children(item, idx)}
+            <ActivityEvent
+                event={item}
+                selected={selectedEventIndex === idx}
+                onClick={() => selectEvent(item, idx)} />
+        {/snippet}
+    </VirtualList>
+</div>
+
+<style lang="scss">
+    .header {
+        @include left_panel_header();
+    }
+    .body {
+        overflow: auto;
+        flex: auto;
+        @include nice-scrollbar();
+        position: relative;
+    }
+</style>
diff --git a/frontend/app/src/components/home/activity/ActivityIcon.svelte b/frontend/app/src/desktop/features/activity/ActivityIcon.svelte
similarity index 95%
rename from frontend/app/src/components/home/activity/ActivityIcon.svelte
rename to frontend/app/src/desktop/features/activity/ActivityIcon.svelte
index 9bbf7ff371..f4b67d3d05 100644
--- a/frontend/app/src/components/home/activity/ActivityIcon.svelte
+++ b/frontend/app/src/desktop/features/activity/ActivityIcon.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import type { MessageActivity } from "@client";
-    import Bitcoin from "../../icons/Bitcoin.svelte";
+    import Bitcoin from "@src/desktop/ui/icons/Bitcoin.svelte";
     import EmoticonLolOutline from "svelte-material-icons/EmoticonLolOutline.svelte";
     import ReplyOutline from "svelte-material-icons/ReplyOutline.svelte";
     import At from "svelte-material-icons/At.svelte";
diff --git a/frontend/app/src/components/home/admin/Admin.svelte b/frontend/app/src/desktop/features/admin/Admin.svelte
similarity index 94%
rename from frontend/app/src/components/home/admin/Admin.svelte
rename to frontend/app/src/desktop/features/admin/Admin.svelte
index edeace0983..484c69e847 100644
--- a/frontend/app/src/components/home/admin/Admin.svelte
+++ b/frontend/app/src/desktop/features/admin/Admin.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { iconSize, platformOperatorStore } from "@client";
-    import { navigate } from "@utils/navigation";
+    import { navigate } from "@src/utils/navigation";
     import CogOutline from "svelte-material-icons/CogOutline.svelte";
-    import Button from "../../Button.svelte";
-    import SectionHeader from "../../SectionHeader.svelte";
+    import Button from "@src/ui/Button.svelte";
+    import SectionHeader from "@src/desktop/shared/SectionHeader.svelte";
     import OperatorFunctions from "./OperatorFunctions.svelte";
     import ReviewTranslationCorrections from "./ReviewTranslationCorrections.svelte";
 
diff --git a/frontend/app/src/components/home/admin/OperatorFunctions.svelte b/frontend/app/src/desktop/features/admin/OperatorFunctions.svelte
similarity index 97%
rename from frontend/app/src/components/home/admin/OperatorFunctions.svelte
rename to frontend/app/src/desktop/features/admin/OperatorFunctions.svelte
index 2969107d62..a6aedc3174 100644
--- a/frontend/app/src/components/home/admin/OperatorFunctions.svelte
+++ b/frontend/app/src/desktop/features/admin/OperatorFunctions.svelte
@@ -6,15 +6,15 @@
         UpdateMarketMakerConfigArgs,
     } from "@client";
     import { getContext, onMount } from "svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { toastStore } from "../../../stores/toast";
-    import Button from "../../Button.svelte";
-    import ButtonGroup from "../../ButtonGroup.svelte";
-    import ErrorMessage from "../../ErrorMessage.svelte";
-    import Input from "../../Input.svelte";
-    import Select from "../../Select.svelte";
-    import Toggle from "../../Toggle.svelte";
-    import Translatable from "../../Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import ErrorMessage from "@src/desktop/shared/ErrorMessage.svelte";
+    import Input from "@src/desktop/shared/Input.svelte";
+    import Select from "@src/desktop/shared/Select.svelte";
+    import Toggle from "@src/desktop/shared/Toggle.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
 
     type Fees = {
         token: "CHAT" | "ICP";
diff --git a/frontend/app/src/components/home/admin/ReviewTranslationCorrections.svelte b/frontend/app/src/desktop/features/admin/ReviewTranslationCorrections.svelte
similarity index 97%
rename from frontend/app/src/components/home/admin/ReviewTranslationCorrections.svelte
rename to frontend/app/src/desktop/features/admin/ReviewTranslationCorrections.svelte
index bc1302c46f..d12e1eec62 100644
--- a/frontend/app/src/components/home/admin/ReviewTranslationCorrections.svelte
+++ b/frontend/app/src/desktop/features/admin/ReviewTranslationCorrections.svelte
@@ -15,12 +15,12 @@
     import Hamburger from "svelte-material-icons/Menu.svelte";
     import Refresh from "svelte-material-icons/Refresh.svelte";
     import Translate from "svelte-material-icons/Translate.svelte";
-    import { i18nKey, reviewingTranslations } from "../../../i18n/i18n";
-    import { toastStore } from "../../../stores/toast";
-    import HoverIcon from "../../HoverIcon.svelte";
-    import Menu from "../../Menu.svelte";
-    import MenuIcon from "../../MenuIcon.svelte";
-    import MenuItem from "../../MenuItem.svelte";
+    import { i18nKey, reviewingTranslations } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import Menu from "@src/desktop/shared/Menu.svelte";
+    import MenuIcon from "@src/desktop/shared/MenuIcon.svelte";
+    import MenuItem from "@src/desktop/shared/MenuItem.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/desktop/features/bots/AutoBotBuilder.svelte b/frontend/app/src/desktop/features/bots/AutoBotBuilder.svelte
new file mode 100644
index 0000000000..e38ef356ac
--- /dev/null
+++ b/frontend/app/src/desktop/features/bots/AutoBotBuilder.svelte
@@ -0,0 +1,394 @@
+<script lang="ts">
+    import {
+        allUsersStore,
+        debouncedDerived,
+        iconSize,
+        OpenChat,
+        validateBot,
+        ValidationErrors,
+        validEndpoint,
+        type BotDefinition,
+        type CommandDefinition,
+        type ExternalBot,
+        type ValidationErrorMessages,
+    } from "@client";
+    import { getContext } from "svelte";
+    import Reload from "svelte-material-icons/Reload.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import EditableAvatar from "@src/ui/EditableAvatar.svelte";
+    import ErrorMessage from "@src/desktop/shared/ErrorMessage.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import SingleUserSelector from "@src/desktop/shared/SingleUserSelector.svelte";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import Legend from "@src/desktop/shared/Legend.svelte";
+    import Tabs, { type Tab } from "./Tabs.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import BotCommands from "./BotCommands.svelte";
+    import BotPermissionViewer from "./BotPermissionViewer.svelte";
+    import CommandViewer from "./CommandViewer.svelte";
+    import InstallationLocationSelector from "./InstallationLocationSelector.svelte";
+    import ValidatingInput from "./ValidatingInput.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        valid: boolean;
+        schemaLoaded: boolean;
+        candidate: ExternalBot;
+        nameDirty: boolean;
+        principal: string;
+        mode: "register" | "update";
+    }
+
+    let {
+        valid = $bindable(),
+        schemaLoaded = $bindable(),
+        principal = $bindable(),
+        candidate = $bindable(),
+        nameDirty,
+        mode,
+    }: Props = $props();
+    let selectedCommand = $state<CommandDefinition | undefined>(undefined);
+    let selectedCommandIndex = $state<number | undefined>(undefined);
+    let debug = $state(false);
+    let schemaLoading = $state(false);
+    let showNext = $derived(
+        selectedCommandIndex !== undefined &&
+            selectedCommandIndex < candidate.definition.commands.length - 1,
+    );
+    let showPrev = $derived(selectedCommandIndex !== undefined && selectedCommandIndex > 0);
+
+    let errors = $derived.by(
+        debouncedDerived(
+            () => [$state.snapshot(candidate), principal],
+            async () => {
+                const errors = validateBot(principal, candidate, mode);
+                if (errors.get("bot_name").length == 0 && nameDirty) {
+                    errors.addErrors("bot_name", await checkUsername(candidate.name));
+                }
+                return errors;
+            },
+            300,
+            new ValidationErrors(),
+        ),
+    );
+
+    function traverseCommand(add: number) {
+        if (selectedCommandIndex === undefined) return;
+
+        selectedCommandIndex += add;
+        selectedCommand = candidate.definition.commands[selectedCommandIndex];
+        if (selectedCommand === undefined) {
+            selectedCommandIndex = undefined;
+        }
+    }
+
+    function nextCommand() {
+        traverseCommand(1);
+    }
+
+    function previousCommand() {
+        traverseCommand(-1);
+    }
+
+    function checkUsername(value: string): Promise<ValidationErrorMessages> {
+        return client
+            .checkUsername(value, true)
+            .then((resp) => {
+                if (resp === "success") {
+                    return [];
+                }
+
+                if (resp === "username_taken") {
+                    return [i18nKey("bots.builder.errors.duplicateName")];
+                }
+
+                return [i18nKey("bots.builder.errors.botNameInvalid")];
+            })
+            .catch((_) => {
+                return [i18nKey("bots.builder.errors.nameCheckError")];
+            });
+    }
+
+    // TODO we will probably need to come back to this to flesh out edit mode (is the bot dirty etc)
+    // let editing = $derived(bot !== undefined);
+
+    $effect(() => {
+        const isValid = errors.size === 0 && schemaLoaded;
+        if (isValid !== valid) {
+            valid = isValid;
+        }
+    });
+
+    function botAvatarSelected(detail: { url: string; data: Uint8Array }) {
+        candidate.avatarUrl = detail.url;
+    }
+
+    function onSubmit(e: Event) {
+        e.preventDefault();
+    }
+
+    function onSelectCommand(cmd: CommandDefinition, index: number) {
+        selectedCommand = cmd;
+        selectedCommandIndex = index;
+    }
+
+    function endpointChanged() {
+        schemaLoaded = false;
+        candidate.definition = {
+            kind: "bot_definition",
+            description: "",
+            commands: [],
+            autonomousConfig: undefined,
+            defaultSubscriptions: undefined,
+            dataEncoding: undefined,
+            restrictedLocations: undefined,
+        };
+    }
+
+    function loadDefinition() {
+        if (!schemaLoading && validEndpoint(candidate.endpoint)) {
+            schemaLoading = true;
+            schemaLoaded = false;
+            client
+                .getBotDefinition(candidate.endpoint)
+                .then((resp) => {
+                    if (resp.kind === "bot_definition") {
+                        candidate.definition = resp;
+                        schemaLoaded = true;
+                    } else {
+                        toastStore.showFailureToast(i18nKey(`${JSON.stringify(resp.error)}`));
+                    }
+                })
+                .finally(() => (schemaLoading = false));
+        }
+    }
+
+    function getTabs(definition: BotDefinition): Tab[] {
+        const tabs: Tab[] = [];
+        if (definition.commands.length > 0) {
+            tabs.push({ title: i18nKey("bots.builder.commandsLabel"), snippet: commands });
+        }
+        if (definition.autonomousConfig !== undefined) {
+            tabs.push({
+                title: i18nKey("bots.builder.autonomousPermissionsLabel"),
+                snippet: autonomousPermissions,
+            });
+        }
+        return tabs;
+    }
+</script>
+
+{#snippet configtabs()}
+    {@const tabs = getTabs(candidate.definition)}
+    {#if tabs.length === 1}
+        <Legend label={tabs[0].title}></Legend>
+        {@render tabs[0].snippet()}
+    {:else}
+        <Tabs {tabs}></Tabs>
+    {/if}
+{/snippet}
+
+{#snippet commands()}
+    {#if candidate.definition.commands.length > 0}
+        <BotCommands {errors} commands={candidate.definition.commands} onClick={onSelectCommand} />
+    {:else}
+        <div class="smallprint">
+            <Translatable resourceKey={i18nKey("bots.builder.noCommands")}></Translatable>
+        </div>
+    {/if}
+{/snippet}
+
+{#snippet autonomousPermissions()}
+    {#if candidate.definition.autonomousConfig !== undefined}
+        <BotPermissionViewer
+            nested
+            permissions={candidate.definition.autonomousConfig.permissions} />
+    {:else}
+        <div class="smallprint">
+            <Translatable resourceKey={i18nKey("bots.builder.noAutonomousConfig")}></Translatable>
+        </div>
+    {/if}
+{/snippet}
+
+{#if selectedCommand !== undefined && selectedCommandIndex !== undefined}
+    <CommandViewer
+        onClose={() => (selectedCommand = undefined)}
+        errorPath={`command_${selectedCommandIndex}`}
+        onNext={showNext ? nextCommand : undefined}
+        onPrevious={showPrev ? previousCommand : undefined}
+        {errors}
+        command={selectedCommand}></CommandViewer>
+{/if}
+
+<form onsubmit={onSubmit} class="bot">
+    <Legend label={i18nKey("bots.builder.iconLabel")} />
+    <div class="photo">
+        <EditableAvatar
+            overlayIcon
+            size={"medium"}
+            image={candidate.avatarUrl}
+            onImageSelected={botAvatarSelected} />
+    </div>
+
+    {#if candidate.registrationStatus.kind === "private" && mode === "register"}
+        <InstallationLocationSelector bind:location={candidate.registrationStatus.location} />
+    {/if}
+
+    <Legend
+        required={mode === "register"}
+        label={i18nKey("bots.builder.principalLabel")}
+        rules={i18nKey("bots.builder.principalRules")}></Legend>
+    <ValidatingInput
+        autofocus
+        minlength={3}
+        maxlength={100}
+        invalid={errors.has("bot_principal")}
+        placeholder={mode === "update"
+            ? i18nKey("bots.builder.editPrincipalPlaceholder")
+            : i18nKey("bots.builder.principalPlaceholder")}
+        error={errors.get("bot_principal")}
+        bind:value={principal}>
+    </ValidatingInput>
+
+    {#if mode === "update"}
+        <Legend
+            required
+            label={i18nKey("bots.builder.ownerLabel")}
+            rules={i18nKey("bots.builder.ownerRules")}></Legend>
+        <SingleUserSelector
+            invalid={errors.has("bot_owner")}
+            error={errors.get("bot_owner")}
+            border={false}
+            direction={"up"}
+            mentionSelf
+            onUserSelected={(user) => (candidate.ownerId = user.userId)}
+            onUserRemoved={() => (candidate.ownerId = "")}
+            selectedReceiver={$allUsersStore.get(candidate.ownerId)}
+            placeholder={"bots.builder.ownerLabel"}
+            autofocus={false} />
+    {/if}
+
+    {#if mode === "register"}
+        <Legend
+            required
+            label={i18nKey("bots.builder.nameLabel")}
+            rules={i18nKey("bots.builder.nameRules")}></Legend>
+        <ValidatingInput
+            minlength={3}
+            maxlength={25}
+            invalid={errors.has("bot_name")}
+            placeholder={i18nKey("bots.builder.namePlaceholder")}
+            error={errors.get("bot_name")}
+            bind:value={candidate.name}>
+        </ValidatingInput>
+    {/if}
+
+    <Legend
+        label={i18nKey("bots.builder.endpointLabel")}
+        required
+        rules={i18nKey("bots.builder.endpointRules")}></Legend>
+    <div class="endpoint" class:endpoint-error={errors.has("bot_endpoint")}>
+        <div class="endpoint-input">
+            <ValidatingInput
+                minlength={3}
+                maxlength={200}
+                invalid={errors.has("bot_endpoint")}
+                error={errors.get("bot_endpoint")}
+                onInput={endpointChanged}
+                onEnter={loadDefinition}
+                placeholder={i18nKey("https://my_openchat_bot")}
+                bind:value={candidate.endpoint} />
+        </div>
+        <div class="icon">
+            {#if !errors.has("bot_endpoint")}
+                <HoverIcon title={"load definition"} onclick={loadDefinition}>
+                    <Reload
+                        size={$iconSize}
+                        color={schemaLoaded ? "var(--icon-txt)" : "var(--accent)"}></Reload>
+                </HoverIcon>
+            {/if}
+        </div>
+    </div>
+
+    {#if schemaLoaded}
+        <Legend label={i18nKey("bots.builder.descLabel")}></Legend>
+        <div class="desc">
+            <Markdown inline={false} text={candidate.definition.description} />
+        </div>
+
+        {@render configtabs()}
+
+        <div class="error">
+            {#if errors.has("duplicate_commands")}
+                <ErrorMessage>
+                    <Translatable resourceKey={errors.get("duplicate_commands")[0]}></Translatable
+                    ></ErrorMessage>
+            {/if}
+            {#if errors.has("no_commands")}
+                <ErrorMessage>
+                    <Translatable resourceKey={errors.get("no_commands")[0]}></Translatable
+                    ></ErrorMessage>
+            {/if}
+        </div>
+    {/if}
+
+    {#if debug}
+        <pre class="debug">
+            {JSON.stringify(candidate, null, 4)}
+        </pre>
+        <pre>{valid}</pre>
+    {/if}
+</form>
+
+<style lang="scss">
+    .debug {
+        @include font(book, normal, fs-80);
+    }
+    .photo {
+        max-width: toRem(100);
+        margin-bottom: $sp3;
+    }
+
+    .error {
+        :global(.error) {
+            margin-top: $sp3;
+        }
+    }
+
+    .endpoint {
+        display: flex;
+        align-items: center;
+        gap: $sp3;
+        margin-bottom: $sp3;
+
+        &.endpoint-error {
+            margin-bottom: 22px;
+        }
+
+        :global(.input-wrapper) {
+            margin-bottom: 0;
+        }
+
+        .endpoint-input {
+            flex: 3;
+        }
+
+        .icon {
+            flex: 0 0 40px;
+        }
+    }
+
+    .smallprint {
+        @include font(light, normal, fs-80);
+        color: var(--txt-light);
+    }
+
+    .desc {
+        @include input();
+        max-height: 180px;
+        overflow: auto;
+        margin-bottom: $sp3;
+    }
+</style>
diff --git a/frontend/app/src/components/bots/BotAvatar.svelte b/frontend/app/src/desktop/features/bots/BotAvatar.svelte
similarity index 83%
rename from frontend/app/src/components/bots/BotAvatar.svelte
rename to frontend/app/src/desktop/features/bots/BotAvatar.svelte
index d6c9191630..e32dbb6602 100644
--- a/frontend/app/src/components/bots/BotAvatar.svelte
+++ b/frontend/app/src/desktop/features/bots/BotAvatar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { AvatarSize } from "@client";
-    import Avatar from "../Avatar.svelte";
+    import Avatar from "@src/desktop/shared/Avatar.svelte";
 
     interface Props {
         bot: { avatarUrl?: string };
diff --git a/frontend/app/src/desktop/features/bots/BotBuilderModal.svelte b/frontend/app/src/desktop/features/bots/BotBuilderModal.svelte
new file mode 100644
index 0000000000..75679d88c7
--- /dev/null
+++ b/frontend/app/src/desktop/features/bots/BotBuilderModal.svelte
@@ -0,0 +1,191 @@
+<script lang="ts">
+    import {
+        currentUserIdStore,
+        emptyBotInstance,
+        mobileWidth,
+        OpenChat,
+        type ExternalBot,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import FancyLoader from "@src/desktop/ui/icons/FancyLoader.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import BotBuilder from "./AutoBotBuilder.svelte";
+    import ChooseBot from "./ChooseBot.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        onClose: () => void;
+        mode: "register" | "update" | "remove";
+    }
+
+    let { onClose, mode = "register" }: Props = $props();
+
+    let principal = $state("");
+    let valid = $state(false);
+    let schemaLoaded = $state(false);
+    let busy = $state(false);
+    let step: "choose" | "edit" = $state(
+        mode === "update" || mode === "remove" ? "choose" : "edit",
+    );
+
+    let botState = $state({
+        original: emptyBotInstance($currentUserIdStore),
+        current: emptyBotInstance($currentUserIdStore),
+    });
+
+    let ownerDirty = $derived(botState.original.ownerId !== botState.current.ownerId);
+    let nameDirty = $derived(botState.original.name !== botState.current.name);
+    let avatarDirty = $derived(botState.original.avatarUrl !== botState.current.avatarUrl);
+    let endpointDirty = $derived(botState.original.endpoint !== botState.current.endpoint);
+    // let dirty = $derived(ownerDirty || nameDirty || avatarDirty || endpointDirty);
+
+    function register() {
+        if (botState.current !== undefined && valid) {
+            busy = true;
+            client
+                .registerBot(principal, botState.current)
+                .then((success) => {
+                    if (!success) {
+                        toastStore.showFailureToast(i18nKey("Unable to register bot"));
+                    } else {
+                        console.log("Bot registered");
+                        onClose();
+                    }
+                })
+                .finally(() => (busy = false));
+        }
+    }
+
+    function update() {
+        if (botState.current !== undefined && valid) {
+            busy = true;
+            const { id, ownerId, avatarUrl, endpoint, definition } = $state.snapshot(
+                botState.current,
+            );
+            client
+                .updateRegisteredBot(
+                    id,
+                    principal !== "" ? principal : undefined,
+                    ownerDirty ? ownerId : undefined,
+                    avatarDirty ? avatarUrl : undefined,
+                    endpointDirty ? endpoint : undefined,
+                    definition,
+                )
+                .then((success) => {
+                    if (!success) {
+                        toastStore.showFailureToast(i18nKey("Unable to register test bot"));
+                    } else {
+                        console.log("Bot registered");
+                        onClose();
+                    }
+                })
+                .finally(() => (busy = false));
+        }
+    }
+
+    function remove(id: string) {
+        busy = true;
+        client
+            .removeBot(id)
+            .then((success) => {
+                if (!success) {
+                    toastStore.showFailureToast(i18nKey("Unable to remove bot"));
+                } else {
+                    console.log("Bot removed");
+                    onClose();
+                }
+            })
+            .finally(() => (busy = false));
+    }
+
+    function selectBot(bot: ExternalBot) {
+        if (bot.ownerId === $currentUserIdStore) {
+            botState.original = bot;
+            botState.current = structuredClone(bot);
+            if (mode === "update") {
+                step = "edit";
+            } else if (mode === "remove") {
+                remove(bot.id);
+            }
+        }
+    }
+
+    let titleKey = $derived.by(() => {
+        switch (mode) {
+            case "register":
+                return i18nKey("bots.builder.title");
+            case "update":
+                return step === "choose"
+                    ? i18nKey("bots.update_bot.select")
+                    : i18nKey("bots.update_bot.title", { name: botState.current.name });
+            case "remove":
+                return i18nKey("bots.update_bot.remove");
+        }
+    });
+</script>
+
+<ModalContent {onClose}>
+    {#snippet header()}
+        <div class="header">
+            <Translatable resourceKey={titleKey}></Translatable>
+        </div>
+    {/snippet}
+    {#snippet body()}
+        <div class="body">
+            {#if step === "choose"}
+                {#if !busy && (mode === "update" || mode === "remove")}
+                    <ChooseBot ownedOnly onSelect={selectBot} />
+                {/if}
+                {#if mode === "remove" && busy}
+                    <div class="loader">
+                        <FancyLoader />
+                    </div>
+                {/if}
+            {:else if step === "edit" && botState.current !== undefined && mode !== "remove"}
+                <BotBuilder
+                    {nameDirty}
+                    {mode}
+                    bind:candidate={botState.current}
+                    bind:schemaLoaded
+                    bind:valid
+                    bind:principal />
+            {/if}
+        </div>
+    {/snippet}
+    {#snippet footer()}
+        <div class="footer">
+            <ButtonGroup>
+                <Button secondary small={!$mobileWidth} tiny={$mobileWidth} onClick={onClose}>
+                    <Translatable resourceKey={i18nKey("cancel")} />
+                </Button>
+                {#if mode !== "remove"}
+                    <Button
+                        onClick={mode === "update" ? update : register}
+                        disabled={!valid || busy}
+                        loading={busy}
+                        small={!$mobileWidth}
+                        tiny={$mobileWidth}>
+                        <Translatable
+                            resourceKey={mode === "update"
+                                ? i18nKey("bots.update_bot.action")
+                                : i18nKey("bots.add.action")} />
+                    </Button>
+                {/if}
+            </ButtonGroup>
+        </div>
+    {/snippet}
+</ModalContent>
+
+<style lang="scss">
+    .loader {
+        width: toRem(80);
+        height: toRem(80);
+        margin: auto;
+    }
+</style>
diff --git a/frontend/app/src/components/bots/BotCommands.svelte b/frontend/app/src/desktop/features/bots/BotCommands.svelte
similarity index 95%
rename from frontend/app/src/components/bots/BotCommands.svelte
rename to frontend/app/src/desktop/features/bots/BotCommands.svelte
index 209737dd38..930abf8bb7 100644
--- a/frontend/app/src/components/bots/BotCommands.svelte
+++ b/frontend/app/src/desktop/features/bots/BotCommands.svelte
@@ -9,8 +9,8 @@
     } from "@client";
     import ShieldAccount from "svelte-material-icons/ShieldAccount.svelte";
     import SwapHorizontal from "svelte-material-icons/SwapHorizontal.svelte";
-    import Pill from "../Pill.svelte";
-    import Tooltip from "../tooltip/Tooltip.svelte";
+    import Pill from "@src/desktop/shared/Pill.svelte";
+    import Tooltip from "@src/desktop/ui/tooltip/Tooltip.svelte";
 
     interface Props {
         grantedPermissions?: GrantedBotPermissions;
diff --git a/frontend/app/src/desktop/features/bots/BotExplorer.svelte b/frontend/app/src/desktop/features/bots/BotExplorer.svelte
new file mode 100644
index 0000000000..99c415bd95
--- /dev/null
+++ b/frontend/app/src/desktop/features/bots/BotExplorer.svelte
@@ -0,0 +1,88 @@
+<script lang="ts">
+    import {
+        i18nKey,
+        type BotInstallationLocation,
+        type BotMatch as BotMatchType,
+        type ExternalBotLike,
+        type OpenChat,
+    } from "@client";
+    import { getContext, onMount } from "svelte";
+    import { botSearchState } from "@src/stores/search.svelte";
+    import Search from "@src/desktop/shared/Search.svelte";
+    import BotProperties from "@src/desktop/features/bots/install/BotProperties.svelte";
+
+    const client = getContext<OpenChat>("client");
+    const PAGE_SIZE = 50;
+
+    interface Props {
+        location?: BotInstallationLocation;
+        onSelect: (match: ExternalBotLike | undefined) => void;
+        fill?: boolean;
+        maxHeight?: string;
+        installingBot?: BotMatchType | undefined;
+        excludeInstalled?: boolean;
+    }
+
+    let {
+        location,
+        onSelect,
+        fill = false,
+        maxHeight,
+        installingBot,
+        excludeInstalled,
+    }: Props = $props();
+
+    function onSearchEntered(reset = false) {
+        if (reset) {
+            botSearchState.reset();
+        } else {
+            botSearchState.nextPage();
+        }
+        console.log("Search entered: ", botSearchState.term);
+        client
+            .exploreBots(
+                botSearchState.term === "" ? undefined : botSearchState.term,
+                botSearchState.index,
+                PAGE_SIZE,
+                location,
+                excludeInstalled ?? false,
+            )
+            .then((results) => {
+                console.log("Results: ", results);
+                if (results.kind === "success") {
+                    if (reset) {
+                        botSearchState.results = results.matches;
+                    } else {
+                        botSearchState.appendResults(results.matches);
+                    }
+                    botSearchState.total = results.total;
+                }
+            });
+    }
+
+    onMount(() => onSearchEntered(true));
+</script>
+
+<Search
+    {fill}
+    onPerformSearch={() => onSearchEntered(true)}
+    searching={false}
+    bind:searchTerm={botSearchState.term}
+    placeholder={i18nKey("search")} />
+
+<div class="matches" style={maxHeight ? `max-height: ${maxHeight}` : ""}>
+    {#each botSearchState.results as match}
+        <BotProperties
+            showAvatar
+            padded
+            installing={match === installingBot}
+            onClick={onSelect}
+            bot={match} />
+    {/each}
+</div>
+
+<style lang="scss">
+    .matches {
+        @include nice-scrollbar();
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/bots/BotMember.svelte b/frontend/app/src/desktop/features/bots/BotMember.svelte
new file mode 100644
index 0000000000..4dcce289a1
--- /dev/null
+++ b/frontend/app/src/desktop/features/bots/BotMember.svelte
@@ -0,0 +1,149 @@
+<script lang="ts">
+    import { iconSize, type CommunitySummary, type MultiUserChat } from "@client";
+    import { type ExternalBot, type GrantedBotPermissions } from "@shared";
+    import ChevronDown from "svelte-material-icons/ChevronDown.svelte";
+    import DeleteOutline from "svelte-material-icons/DeleteOutline.svelte";
+    import PencilOutline from "svelte-material-icons/PencilOutline.svelte";
+    import TextBoxOutline from "svelte-material-icons/TextBoxOutline.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import FilteredUsername from "@src/ui/FilteredUsername.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import BotBadge from "@src/desktop/features/bots/exports/BotBadge.svelte";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import Menu from "@src/desktop/shared/Menu.svelte";
+    import MenuIcon from "@src/desktop/shared/MenuIcon.svelte";
+    import MenuItem from "@src/desktop/shared/MenuItem.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import BotAvatar from "./BotAvatar.svelte";
+    import WithBotManagement from "./WithBotManagement.svelte";
+
+    interface Props {
+        collection: CommunitySummary | MultiUserChat;
+        bot: ExternalBot;
+        canManage: boolean;
+        searchTerm: string;
+        grantedPermissions: GrantedBotPermissions;
+    }
+
+    let { collection, bot, canManage, searchTerm, grantedPermissions }: Props = $props();
+</script>
+
+<WithBotManagement {collection} {bot} {canManage} {grantedPermissions}>
+    {#snippet contents({ removeBot, reviewPermissions, viewBotDetails })}
+        <div class="bot_member" role="button">
+            <span class="avatar">
+                <BotAvatar {bot} />
+            </span>
+            <div class="details">
+                <div class="bot_name">
+                    <h4>
+                        <FilteredUsername {searchTerm} username={bot.name} />
+                        <BotBadge bot />
+                    </h4>
+                </div>
+                <div class="bot_description">
+                    <Markdown inline={false} suppressLinks text={bot.definition.description} />
+                </div>
+            </div>
+            <MenuIcon position={"bottom"} align={"end"}>
+                {#snippet menuIcon()}
+                    <HoverIcon>
+                        <ChevronDown size={$iconSize} color={"var(--icon-txt)"} />
+                    </HoverIcon>
+                {/snippet}
+                {#snippet menuItems()}
+                    <Menu>
+                        {#if canManage}
+                            <MenuItem onclick={() => removeBot()}>
+                                {#snippet icon()}
+                                    <DeleteOutline
+                                        size={$iconSize}
+                                        color={"var(--icon-inverted-txt)"} />
+                                {/snippet}
+                                {#snippet text()}
+                                    <Translatable resourceKey={i18nKey("bots.manage.remove")} />
+                                {/snippet}
+                            </MenuItem>
+                            {#if bot.definition.commands.length > 0 || bot.definition.autonomousConfig !== undefined}
+                                <MenuItem onclick={() => reviewPermissions()}>
+                                    {#snippet icon()}
+                                        <PencilOutline
+                                            size={$iconSize}
+                                            color={"var(--icon-inverted-txt)"} />
+                                    {/snippet}
+                                    {#snippet text()}
+                                        <Translatable resourceKey={i18nKey("bots.manage.review")} />
+                                    {/snippet}
+                                </MenuItem>
+                            {/if}
+                        {/if}
+                        <MenuItem onclick={() => viewBotDetails()}>
+                            {#snippet icon()}
+                                <TextBoxOutline
+                                    size={$iconSize}
+                                    color={"var(--icon-inverted-txt)"} />
+                            {/snippet}
+                            {#snippet text()}
+                                <Translatable resourceKey={i18nKey("bots.manage.view")} />
+                            {/snippet}
+                        </MenuItem>
+                    </Menu>
+                {/snippet}
+            </MenuIcon>
+        </div>
+    {/snippet}
+</WithBotManagement>
+
+<style lang="scss">
+    .bot_member {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: $sp4;
+        transition:
+            background-color ease-in-out 100ms,
+            border-color ease-in-out 100ms;
+        gap: 12px;
+
+        @media (hover: hover) {
+            &:hover {
+                background-color: var(--members-hv);
+            }
+        }
+
+        @include mobile() {
+            padding: $sp3 toRem(10);
+        }
+    }
+    .avatar {
+        flex: 0 0 50px;
+        position: relative;
+    }
+
+    .details {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        @include font(medium, normal, fs-100);
+        gap: $sp2;
+
+        .bot_name {
+            display: flex;
+            flex: 1;
+            align-items: center;
+            @include ellipsis();
+
+            h4 {
+                display: flex;
+                align-items: center;
+                gap: $sp2;
+            }
+        }
+
+        .bot_description {
+            font-weight: 200;
+            color: var(--txt-light);
+            @include clamp(2);
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/bots/BotMessageContext.svelte b/frontend/app/src/desktop/features/bots/BotMessageContext.svelte
new file mode 100644
index 0000000000..be087eaa2c
--- /dev/null
+++ b/frontend/app/src/desktop/features/bots/BotMessageContext.svelte
@@ -0,0 +1,142 @@
+<script lang="ts">
+    import {
+        allUsersStore,
+        AvatarSize,
+        mobileWidth,
+        OpenChat,
+        type CommandArg,
+    } from "@client";
+    import type { BotContextCommand } from "@shared";
+    import { getContext } from "svelte";
+    import CogOutline from "svelte-material-icons/CogOutline.svelte";
+    import Avatar from "@src/desktop/shared/Avatar.svelte";
+    import Typing from "@src/ui/Typing.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import Tooltip from "@src/desktop/ui/tooltip/Tooltip.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        botCommand: BotContextCommand;
+        botName: string;
+        finalised: boolean;
+    }
+
+    let { botCommand, finalised }: Props = $props();
+    let MAX_COMMAND_LENGTH = $derived($mobileWidth ? 50 : 150);
+    let paramValues = $derived(botCommand.args.map(paramValue));
+    let paramsLength = $derived(paramValues.reduce((total, p) => total + p.length, 0));
+    let paramMode: "truncated" | "full" = $derived(
+        paramsLength > MAX_COMMAND_LENGTH ? "truncated" : "full",
+    );
+    let text = $derived.by(() => {
+        if (paramMode === "truncated") {
+            return `@UserId(${botCommand.initiator}) used **/${botCommand.name}**${
+                botCommand.args.length > 0 ? " with " : ""
+            }`;
+        } else {
+            return `@UserId(${botCommand.initiator}) used **/${botCommand.name}**`;
+        }
+    });
+    let user = $derived($allUsersStore.get(botCommand.initiator));
+
+    function paramValue(param: CommandArg): string {
+        switch (param.kind) {
+            case "boolean":
+                return param.value?.toString() ?? "false";
+            case "integer":
+            case "decimal":
+                return param.value?.toString() ?? "null";
+            case "string":
+                return param.value ?? "null";
+            case "user":
+                return param.userId ? $allUsersStore.get(param.userId)?.username ?? "null" : "null";
+            case "dateTime":
+                return param.value
+                    ? client.toDatetimeString(new Date(Number(param.value)))
+                    : "null";
+        }
+    }
+</script>
+
+<div class="bot-context">
+    {#if user}
+        <Avatar url={client.userAvatarUrl(user)} userId={user.userId} size={AvatarSize.Tiny} />
+    {/if}
+    <Markdown {text} />
+    {#if botCommand.args.length > 0}
+        {#if paramMode === "truncated"}
+            <Tooltip position="right" align="middle">
+                <div class="cog">
+                    <CogOutline size={"1.2em"} color={"var(--icon-txt)"} />
+                </div>
+                {#snippet popupTemplate()}
+                    <div class="command-params">
+                        {#each botCommand.args as param}
+                            <div class="param">
+                                <div class="name">{param.name}:</div>
+                                <div class="value">{paramValue(param)}</div>
+                            </div>
+                        {/each}
+                    </div>
+                {/snippet}
+            </Tooltip>
+        {:else}
+            {#each paramValues as param}
+                <div class="inline-param">{param}</div>
+            {/each}
+        {/if}
+    {/if}
+    {#if !finalised}
+        <Typing />
+    {/if}
+</div>
+
+<style lang="scss">
+    .bot-context {
+        @include font(light, normal, fs-70);
+        color: var(--txt-light);
+        display: flex;
+        gap: $sp2;
+        align-items: center;
+        @include ellipsis();
+
+        :global(.markdown-wrapper) {
+            @include ellipsis();
+            flex-shrink: 0;
+        }
+
+        :global(.avatar.tiny) {
+            flex: 0 0 toRem(20);
+        }
+
+        .cog {
+            display: flex;
+        }
+    }
+
+    .inline-param {
+        // background-color: #efefef;
+        padding: 0 $sp2;
+        border-radius: $sp2;
+        border: 1px solid var(--bd);
+        @include font(light, normal, fs-60);
+    }
+
+    :global(.command-params) {
+        word-wrap: unset;
+
+        .param {
+            display: flex;
+            align-items: start;
+            text-align: left;
+            gap: $sp2;
+            flex-wrap: nowrap;
+            flex-direction: column;
+
+            .value {
+                @include font(bold, normal, fs-50);
+            }
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/bots/BotPermissionViewer.svelte b/frontend/app/src/desktop/features/bots/BotPermissionViewer.svelte
new file mode 100644
index 0000000000..fff8ad8a4a
--- /dev/null
+++ b/frontend/app/src/desktop/features/bots/BotPermissionViewer.svelte
@@ -0,0 +1,94 @@
+<script lang="ts">
+    import Check from "svelte-material-icons/Check.svelte";
+    import Minus from "svelte-material-icons/Minus.svelte";
+    import {
+        botChatPermissionList,
+        botCommunityPermissionList,
+        type ExternalBotPermissions,
+        messagePermissionsList,
+        type ResourceKey,
+    } from "@client";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Legend from "@src/desktop/shared/Legend.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import Tabs from "./Tabs.svelte";
+
+    interface Props {
+        permissions: ExternalBotPermissions;
+        title?: ResourceKey;
+        nested?: boolean;
+    }
+
+    let { permissions, title, nested = false }: Props = $props();
+</script>
+
+{#snippet check(label: ResourceKey, requested: boolean)}
+    <div class="perm" class:disabled={!requested}>
+        <div class="check">
+            {#if requested}
+                <Check size={"1em"} color={"var(--success)"} />
+            {:else}
+                <Minus size={"1em"} color={"var(--txt-light)"} />
+            {/if}
+        </div>
+        <div class="label">
+            <Translatable resourceKey={label}></Translatable>
+        </div>
+    </div>
+{/snippet}
+
+{#snippet chatTab()}
+    {#each botChatPermissionList as perm}
+        {@render check(i18nKey(`permissions.${perm}`), permissions.chatPermissions.includes(perm))}
+    {/each}
+{/snippet}
+{#snippet communityTab()}
+    {#each botCommunityPermissionList as perm}
+        {@render check(
+            i18nKey(`permissions.${perm}`),
+            permissions.communityPermissions.includes(perm),
+        )}
+    {/each}
+{/snippet}
+{#snippet messageTab()}
+    {#each messagePermissionsList as perm}
+        {@render check(
+            i18nKey(`permissions.messagePermissions.${perm}`),
+            permissions.messagePermissions.includes(perm),
+        )}
+    {/each}
+{/snippet}
+
+{#if title !== undefined}
+    <Legend label={title}></Legend>
+{/if}
+<Tabs
+    {nested}
+    initialIndex={2}
+    tabs={[
+        {
+            title: i18nKey("bots.builder.permScopeCommunity"),
+            snippet: communityTab,
+        },
+        {
+            title: i18nKey("bots.builder.permScopeChat"),
+            snippet: chatTab,
+        },
+        {
+            title: i18nKey("bots.builder.permScopeMessage"),
+            snippet: messageTab,
+        },
+    ]}></Tabs>
+
+<style lang="scss">
+    .perm {
+        display: flex;
+        gap: $sp3;
+        align-items: center;
+
+        &.disabled {
+            @include font(light, normal, fs-100);
+            color: var(--txt-light);
+        }
+    }
+</style>
diff --git a/frontend/app/src/components/bots/BotProfile.svelte b/frontend/app/src/desktop/features/bots/BotProfile.svelte
similarity index 100%
rename from frontend/app/src/components/bots/BotProfile.svelte
rename to frontend/app/src/desktop/features/bots/BotProfile.svelte
diff --git a/frontend/app/src/desktop/features/bots/BotPublisher.svelte b/frontend/app/src/desktop/features/bots/BotPublisher.svelte
new file mode 100644
index 0000000000..cc253e4afe
--- /dev/null
+++ b/frontend/app/src/desktop/features/bots/BotPublisher.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+    import { i18nKey, type ExternalBot } from "@client";
+    import Legend from "@src/desktop/shared/Legend.svelte";
+    import ChooseBot from "./ChooseBot.svelte";
+    import BotProperties from "@src/desktop/features/bots/install/BotProperties.svelte";
+
+    interface Props {
+        selected: ExternalBot | undefined;
+    }
+
+    let { selected = $bindable() }: Props = $props();
+
+    function select(bot: ExternalBot) {
+        selected = bot;
+    }
+</script>
+
+{#if selected === undefined}
+    <Legend large label={i18nKey("proposal.maker.chooseBot")} />
+    <ChooseBot ownedOnly onSelect={select} />
+{:else}
+    <BotProperties padded bot={selected} installing={false}></BotProperties>
+{/if}
+
+<style lang="scss">
+</style>
diff --git a/frontend/app/src/components/bots/BotSummary.svelte b/frontend/app/src/desktop/features/bots/BotSummary.svelte
similarity index 90%
rename from frontend/app/src/components/bots/BotSummary.svelte
rename to frontend/app/src/desktop/features/bots/BotSummary.svelte
index 68a6a40d59..ade7586342 100644
--- a/frontend/app/src/components/bots/BotSummary.svelte
+++ b/frontend/app/src/desktop/features/bots/BotSummary.svelte
@@ -8,15 +8,15 @@
         type Level,
     } from "@client";
     import { getContext } from "svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { toastStore } from "../../stores/toast";
-    import Button from "../Button.svelte";
-    import ButtonGroup from "../ButtonGroup.svelte";
-    import ModalContent from "../ModalContent.svelte";
-    import Overlay from "../Overlay.svelte";
-    import Translatable from "../Translatable.svelte";
-    import BotProperties from "./install/BotProperties.svelte";
-    import ChoosePermissions from "./install/ChoosePermissions.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import BotProperties from "@src/desktop/features/bots/install/BotProperties.svelte";
+    import ChoosePermissions from "@src/desktop/features/bots/install/ChoosePermissions.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/components/bots/BotsTab.svelte b/frontend/app/src/desktop/features/bots/BotsTab.svelte
similarity index 95%
rename from frontend/app/src/components/bots/BotsTab.svelte
rename to frontend/app/src/desktop/features/bots/BotsTab.svelte
index 0861094706..1709b81eb3 100644
--- a/frontend/app/src/components/bots/BotsTab.svelte
+++ b/frontend/app/src/desktop/features/bots/BotsTab.svelte
@@ -19,13 +19,13 @@
         type WebhookDetails,
     } from "@client";
     import { getContext } from "svelte";
-    import Search from "../Search.svelte";
-    import Tabs, { type Tab } from "../Tabs.svelte";
-    import Translatable from "../Translatable.svelte";
+    import Search from "@src/desktop/shared/Search.svelte";
+    import Tabs, { type Tab } from "./Tabs.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
     import BotMember from "./BotMember.svelte";
     import WebhookMember from "./WebhookMember.svelte";
-    import BotInstaller from "./install/BotInstaller.svelte";
-    import BotProperties from "./install/BotProperties.svelte";
+    import BotInstaller from "@src/desktop/features/bots/install/BotInstaller.svelte";
+    import BotProperties from "@src/desktop/features/bots/install/BotProperties.svelte";
 
     const INSTALLED = 0;
     const client = getContext<OpenChat>("client");
diff --git a/frontend/app/src/desktop/features/bots/ChooseBot.svelte b/frontend/app/src/desktop/features/bots/ChooseBot.svelte
new file mode 100644
index 0000000000..c5a4f1fc58
--- /dev/null
+++ b/frontend/app/src/desktop/features/bots/ChooseBot.svelte
@@ -0,0 +1,101 @@
+<script lang="ts">
+    import { AvatarSize, botState, currentUserIdStore, type ExternalBot } from "@client";
+    import { i18nKey } from "@src/i18n/i18n";
+    import AlertBox from "@src/desktop/shared/AlertBox.svelte";
+    import Avatar from "@src/desktop/shared/Avatar.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+
+    interface Props {
+        onSelect: (bot: ExternalBot) => void;
+        ownedOnly: boolean;
+    }
+
+    let { onSelect, ownedOnly }: Props = $props();
+
+    let bots = $derived(
+        ownedOnly
+            ? [...botState.externalBots.values()].filter((b) => b.ownerId === $currentUserIdStore)
+            : [...botState.externalBots.values()],
+    );
+</script>
+
+{#if bots.length === 0}
+    <AlertBox>
+        <Translatable resourceKey={i18nKey("bots.update_bot.nobots")}></Translatable>
+    </AlertBox>
+{:else}
+    <div class="bots">
+        {#each bots as bot}
+            <!-- svelte-ignore a11y_click_events_have_key_events -->
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <div onclick={() => onSelect(bot)} class="match">
+                <span class="avatar">
+                    <Avatar
+                        url={bot.avatarUrl ?? "/assets/bot_avatar.svg"}
+                        size={AvatarSize.Default} />
+                </span>
+                <div class="details">
+                    <h4 class="bot-name">
+                        {bot.name}
+                    </h4>
+                    <p title={bot.definition.description} class="bot-desc">
+                        <Markdown inline={false} suppressLinks text={bot.definition.description} />
+                    </p>
+                </div>
+            </div>
+        {/each}
+    </div>
+{/if}
+
+<style lang="scss">
+    .bots {
+        max-height: 500px;
+        overflow: auto;
+    }
+
+    .match {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: $sp4;
+        transition:
+            background-color ease-in-out 100ms,
+            border-color ease-in-out 100ms;
+        gap: 12px;
+        cursor: pointer;
+
+        @media (hover: hover) {
+            &:hover {
+                background-color: var(--members-hv);
+            }
+        }
+
+        @include mobile() {
+            padding: $sp3 toRem(10);
+        }
+    }
+    .avatar {
+        flex: 0 0 50px;
+        position: relative;
+        align-self: start;
+    }
+
+    .details {
+        display: flex;
+        gap: $sp2;
+        flex: 1;
+        flex-direction: column;
+        @include font(book, normal, fs-100);
+
+        .bot-name {
+            @include ellipsis();
+        }
+
+        .bot-desc {
+            @include font(light, normal, fs-100);
+            color: var(--txt-light);
+            @include clamp(2);
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/bots/CommandArg.svelte b/frontend/app/src/desktop/features/bots/CommandArg.svelte
new file mode 100644
index 0000000000..61521fccba
--- /dev/null
+++ b/frontend/app/src/desktop/features/bots/CommandArg.svelte
@@ -0,0 +1,128 @@
+<script lang="ts">
+    import type { CommandArg, CommandParam } from "@client";
+    import { _ } from "svelte-i18n";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import DateInput from "@src/desktop/shared/DateInput.svelte";
+    import SingleUserSelector from "@src/desktop/shared/SingleUserSelector.svelte";
+    import Input from "@src/desktop/shared/Input.svelte";
+    import IntegerInput from "./IntegerInput.svelte";
+    import Legend from "@src/desktop/shared/Legend.svelte";
+    import NumberInput from "@src/desktop/shared/NumberInput.svelte";
+    import Select from "@src/desktop/shared/Select.svelte";
+    import TextArea from "@src/desktop/shared/TextArea.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    interface Props {
+        param: CommandParam;
+        arg: CommandArg;
+    }
+
+    let { param, arg = $bindable() }: Props = $props();
+</script>
+
+<div class="param">
+    {#if arg.kind === "user" && param.kind === "user"}
+        <Legend label={i18nKey(param.name)} required={param.required} />
+        <SingleUserSelector
+            onUserSelected={(user) => {
+                arg.userId = user.userId;
+            }}
+            onUserRemoved={() => {
+                arg.userId = undefined;
+            }}
+            autofocus={false}
+            direction={"down"}
+            placeholder={$_(param.placeholder ?? "")} />
+    {:else if arg.kind === "string" && param.kind === "string"}
+        <Legend
+            label={i18nKey(param.name)}
+            required={param.required}
+            rules={param.choices.length > 0
+                ? undefined
+                : i18nKey(`Max length ${param.maxLength}`)} />
+        {#if param.choices?.length ?? 0 > 0}
+            <Select bind:value={arg.value}>
+                <option value={""} selected disabled>
+                    {interpolate(
+                        $_,
+                        i18nKey("bots.builder.chooseOption", {
+                            option: interpolate($_, i18nKey(param.name)),
+                        }),
+                    )}
+                </option>
+                {#each param.choices as choice}
+                    <option value={choice.value}>
+                        <Translatable resourceKey={i18nKey(choice.name)} />
+                    </option>
+                {/each}
+            </Select>
+        {:else if param.multi_line}
+            <TextArea
+                rows={2}
+                placeholder={i18nKey(param.placeholder ?? "")}
+                minlength={param.minLength}
+                maxlength={param.maxLength}
+                bind:value={arg.value} />
+        {:else}
+            <Input
+                minlength={param.minLength}
+                maxlength={param.maxLength}
+                placeholder={i18nKey(param.placeholder ?? "")}
+                countdown
+                bind:value={arg.value} />
+        {/if}
+    {:else if arg.kind === "boolean" && param.kind === "boolean"}
+        <Legend label={i18nKey(param.name)} required={param.required} />
+        <Select bind:value={arg.value}>
+            <option value={""} selected disabled>{`Choose ${$_(param.name)}`}</option>
+            <option value={true}>True</option>
+            <option value={false}>False</option>
+        </Select>
+    {:else if (arg.kind === "integer" && param.kind === "integer") || (arg.kind === "decimal" && param.kind === "decimal")}
+        <Legend label={i18nKey(param.name)} required={param.required} />
+        {#if param.choices?.length ?? 0 > 0}
+            <Select bind:value={arg.value}>
+                <option value={null} selected disabled>{`Choose ${$_(param.name)}`}</option>
+                {#each param.choices as choice}
+                    <option value={choice.value}>
+                        <Translatable resourceKey={i18nKey(choice.name)} />
+                    </option>
+                {/each}
+            </Select>
+        {:else if arg.kind === "integer" && param.kind === "integer"}
+            <IntegerInput
+                min={param.minValue}
+                max={param.maxValue}
+                shouldClamp={false}
+                placeholder={i18nKey(param.placeholder ?? "")}
+                bind:value={arg.value} />
+        {:else if arg.kind === "decimal" && param.kind === "decimal"}
+            <NumberInput
+                min={param.minValue}
+                max={param.maxValue}
+                shouldClamp={false}
+                placeholder={i18nKey(param.placeholder ?? "")}
+                bind:value={arg.value} />
+        {/if}
+    {:else if arg.kind === "dateTime" && param.kind === "dateTime"}
+        <Legend label={i18nKey(param.name)} required={param.required} />
+        <DateInput
+            value={arg.value}
+            futureOnly={param.future_only}
+            placeholder={i18nKey(param.placeholder ?? "")}
+            onchange={(value) => {
+                arg.value = value;
+            }} />
+    {/if}
+</div>
+
+<style lang="scss">
+    .param {
+        margin-top: $sp3;
+    }
+
+    .param:not(:last-child) {
+        /* Gives a bit more spacing between param inputs */
+        margin-bottom: $sp4;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/bots/CommandInstanceBuilder.svelte b/frontend/app/src/desktop/features/bots/CommandInstanceBuilder.svelte
new file mode 100644
index 0000000000..6f8833d348
--- /dev/null
+++ b/frontend/app/src/desktop/features/bots/CommandInstanceBuilder.svelte
@@ -0,0 +1,114 @@
+<script lang="ts">
+    import { botState, mobileWidth, OpenChat } from "@client";
+    import { random64, type FlattenedCommand, type MessageContext } from "@shared";
+    import { getContext, onMount } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import Button from "@src/ui/Button.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import CommandArg from "./CommandArg.svelte";
+
+    interface Props {
+        command: FlattenedCommand;
+        onCancel: () => void;
+        onCommandSent: () => void;
+        messageContext: MessageContext;
+    }
+
+    const client = getContext<OpenChat>("client");
+    let { command, onCancel, onCommandSent, messageContext }: Props = $props();
+    let commandName = $derived(`/${command.name}`);
+    let form: HTMLFormElement;
+    let busy = $state(false);
+
+    onMount(() => {
+        setTimeout(() => focusFirstInput(), 100);
+    });
+
+    function onSubmit(e: Event) {
+        e.preventDefault();
+
+        if (!botState.instanceValid) return;
+        busy = true;
+        client
+            .executeBotCommand(
+                {
+                    kind: "chat_scope",
+                    chatId: messageContext.chatId,
+                    threadRootMessageIndex: messageContext.threadRootMessageIndex,
+                    messageId: random64(),
+                },
+                botState.createBotInstance(command),
+            )
+            .then((result) => {
+                if (result === "failure") {
+                    toastStore.showFailureToast(i18nKey("bots.failed"));
+                } else if (result === "too_many_requests") {
+                    toastStore.showFailureToast(i18nKey("bots.tooManyRequests"));
+                }
+            });
+        onCommandSent();
+    }
+
+    function focusFirstInput() {
+        if (form === undefined) return;
+
+        const formElements = form.querySelectorAll("input, select, textarea, button, .textbox");
+        for (const el of formElements) {
+            if (el instanceof HTMLElement && isFocusable(el)) {
+                el.focus();
+
+                if (isTextBox(el)) {
+                    el.select();
+                }
+                break;
+            }
+        }
+    }
+
+    function isTextBox(element: HTMLElement): element is HTMLInputElement | HTMLTextAreaElement {
+        return (
+            (element instanceof HTMLInputElement && element.type === "text") ||
+            element instanceof HTMLTextAreaElement
+        );
+    }
+
+    function isFocusable(element: HTMLElement): boolean {
+        return (
+            !(element as HTMLInputElement | HTMLButtonElement | HTMLSelectElement).disabled &&
+            element.offsetParent !== null
+        );
+    }
+</script>
+
+<Overlay dismissible onClose={onCancel}>
+    <ModalContent closeIcon onClose={onCancel} overflowVisible={true}>
+        {#snippet header()}
+            {commandName}
+        {/snippet}
+        {#snippet body()}
+            <form bind:this={form} onsubmit={onSubmit}>
+                {#if command.description}
+                    <p><Translatable resourceKey={i18nKey(command.description)} /></p>
+                {/if}
+                {#if botState.selectedCommandArgs.length === command?.params?.length}
+                    {#each command?.params ?? [] as param, i}
+                        <CommandArg arg={botState.selectedCommandArgs[i]} {param} />
+                    {/each}
+                {/if}
+            </form>
+        {/snippet}
+        {#snippet footer()}
+            <Button
+                disabled={!botState.instanceValid || busy}
+                loading={busy}
+                onClick={onSubmit}
+                small={!$mobileWidth}
+                tiny={$mobileWidth}>
+                <Translatable resourceKey={i18nKey("Submit")} />
+            </Button>
+        {/snippet}
+    </ModalContent>
+</Overlay>
diff --git a/frontend/app/src/desktop/features/bots/CommandParameterViewer.svelte b/frontend/app/src/desktop/features/bots/CommandParameterViewer.svelte
new file mode 100644
index 0000000000..9c2f3145e7
--- /dev/null
+++ b/frontend/app/src/desktop/features/bots/CommandParameterViewer.svelte
@@ -0,0 +1,280 @@
+<script lang="ts">
+    import { iconSize, type CommandParam, type ValidationErrors } from "@client";
+    import ChevronLeft from "svelte-material-icons/ChevronLeft.svelte";
+    import ChevronRight from "svelte-material-icons/ChevronRight.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Checkbox from "@src/desktop/shared/Checkbox.svelte";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import Input from "@src/desktop/shared/Input.svelte";
+    import IntegerInput from "./IntegerInput.svelte";
+    import Legend from "@src/desktop/shared/Legend.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import NumberInput from "@src/desktop/shared/NumberInput.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import Select from "@src/desktop/shared/Select.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import ValidatingInput from "./ValidatingInput.svelte";
+
+    interface Props {
+        errorPath: string;
+        errors: ValidationErrors;
+        param: CommandParam;
+        onNext?: () => void;
+        onPrevious?: () => void;
+        onClose: () => void;
+    }
+
+    let { param, errors, errorPath, onNext, onPrevious, onClose }: Props = $props();
+</script>
+
+<Overlay dismissible>
+    <ModalContent closeIcon {onClose}>
+        {#snippet header()}
+            <div class="header">
+                <Translatable resourceKey={i18nKey("bots.builder.paramLabel", { name: param.name })}
+                ></Translatable>
+            </div>
+        {/snippet}
+        {#snippet body()}
+            <div class="body">
+                <section>
+                    <Legend label={i18nKey("bots.builder.paramTypeLabel")}></Legend>
+                    <Select disabled value={param.kind}>
+                        <option value={"string"}>
+                            <Translatable resourceKey={i18nKey("String")}></Translatable>
+                        </option>
+                        <option value={"user"}>
+                            <Translatable resourceKey={i18nKey("User")}></Translatable>
+                        </option>
+                        <option value={"boolean"}>
+                            <Translatable resourceKey={i18nKey("Boolean")}></Translatable>
+                        </option>
+                        <option value={"integer"}>
+                            <Translatable resourceKey={i18nKey("Integer")}></Translatable>
+                        </option>
+                        <option value={"decimal"}>
+                            <Translatable resourceKey={i18nKey("Decimal")}></Translatable>
+                        </option>
+                        <option value={"dateTime"}>
+                            <Translatable resourceKey={i18nKey("DateTime")}></Translatable>
+                        </option>
+                    </Select>
+                </section>
+                <section>
+                    <Checkbox
+                        id={`param_required`}
+                        label={i18nKey("bots.builder.required")}
+                        checked={param.required}
+                        disabled
+                        align={"start"}>
+                        <Translatable resourceKey={i18nKey("bots.builder.required")} />
+                        <div class="info">
+                            <Translatable resourceKey={i18nKey("bots.builder.requiredDesc")}
+                            ></Translatable>
+                        </div>
+                    </Checkbox>
+                </section>
+                <section>
+                    <Legend
+                        required
+                        label={i18nKey("bots.builder.paramNameLabel")}
+                        rules={i18nKey("bots.builder.nameRules")}></Legend>
+                    <ValidatingInput
+                        autofocus
+                        disabled
+                        error={errors.get(`${errorPath}_name`)}
+                        minlength={3}
+                        maxlength={25}
+                        invalid={errors.has(`${errorPath}_name`)}
+                        placeholder={i18nKey("bots.builder.paramNamePlaceholder")}
+                        value={param.name} />
+                </section>
+                <section>
+                    <Legend
+                        label={i18nKey("bots.builder.paramDescLabel")}
+                        rules={i18nKey("bots.builder.optional")}></Legend>
+                    <Input
+                        disabled
+                        minlength={3}
+                        maxlength={200}
+                        placeholder={i18nKey("bots.builder.paramDescPlaceholder")}
+                        value={param.description} />
+                </section>
+                <section>
+                    <Legend
+                        label={i18nKey("bots.builder.paramPlaceholderLabel")}
+                        rules={i18nKey("bots.builder.optional")}></Legend>
+                    <Input
+                        disabled
+                        minlength={3}
+                        maxlength={200}
+                        placeholder={i18nKey("bots.builder.paramPlaceholderPlaceholder")}
+                        value={param.placeholder} />
+                </section>
+                {#if param.kind === "string"}
+                    <section class="minmax">
+                        <div class="min">
+                            <Legend label={i18nKey("bots.builder.minLengthLabel")}></Legend>
+                            <NumberInput
+                                disabled
+                                min={0}
+                                max={param.maxLength}
+                                placeholder={i18nKey("bots.builder.minLengthPlaceholder")}
+                                value={param.minLength} />
+                        </div>
+                        <div class="max">
+                            <Legend label={i18nKey("bots.builder.maxLengthLabel")}></Legend>
+                            <NumberInput
+                                disabled
+                                min={param.minLength}
+                                max={1000}
+                                placeholder={i18nKey("bots.builder.maxLengthPlaceholder")}
+                                value={param.maxLength} />
+                        </div>
+                    </section>
+                {:else if param.kind === "integer"}
+                    <section class="minmax">
+                        <div class="min">
+                            <Legend label={i18nKey("bots.builder.minValueLabel")}></Legend>
+                            <IntegerInput
+                                disabled
+                                min={BigInt(0)}
+                                max={param.maxValue}
+                                placeholder={i18nKey("bots.builder.minValuePlaceholder")}
+                                value={param.minValue} />
+                        </div>
+                        <div class="max">
+                            <Legend label={i18nKey("bots.builder.maxValueLabel")}></Legend>
+                            <IntegerInput
+                                disabled
+                                min={param.minValue}
+                                max={BigInt(1000)}
+                                placeholder={i18nKey("bots.builder.maxValuePlaceholder")}
+                                value={param.maxValue} />
+                        </div>
+                    </section>
+                {:else if param.kind === "decimal"}
+                    <section class="minmax">
+                        <div class="min">
+                            <Legend label={i18nKey("bots.builder.minValueLabel")}></Legend>
+                            <NumberInput
+                                disabled
+                                min={0}
+                                max={param.maxValue}
+                                placeholder={i18nKey("bots.builder.minValuePlaceholder")}
+                                value={param.minValue} />
+                        </div>
+                        <div class="max">
+                            <Legend label={i18nKey("bots.builder.maxValueLabel")}></Legend>
+                            <NumberInput
+                                disabled
+                                min={param.minValue}
+                                max={1000}
+                                placeholder={i18nKey("bots.builder.maxValuePlaceholder")}
+                                value={param.maxValue} />
+                        </div>
+                    </section>
+                {:else if param.kind === "dateTime"}
+                    <section>
+                        <Legend
+                            label={i18nKey("bots.builder.dateTimeFutureOnly")}
+                            rules={i18nKey("bots.builder.dateTimeFutureOnlyDesc")}></Legend>
+                        <Input disabled value={param.future_only.toString()} />
+                    </section>
+                {/if}
+
+                {#if (param.kind === "string" || param.kind === "integer" || param.kind === "decimal") && param.choices.length > 0}
+                    <section>
+                        <Legend label={i18nKey("bots.builder.choices")}></Legend>
+                        <p class="info">
+                            <Translatable resourceKey={i18nKey("bots.builder.choicesInfo")}
+                            ></Translatable>
+                        </p>
+                        <div class="choices">
+                            <div class="choice">
+                                <div class="choice-name">Name</div>
+                                <div class="choice-value">Value</div>
+                            </div>
+                            {#each param.choices as _, i}
+                                <div class="choice">
+                                    <div class="choice-name">
+                                        <ValidatingInput
+                                            disabled
+                                            error={errors.get(`${errorPath}_choices_${i}_name`)}
+                                            invalid={errors.has(`${errorPath}_choices_${i}_name`)}
+                                            minlength={3}
+                                            maxlength={100}
+                                            placeholder={i18nKey("bots.builder.choiceName")}
+                                            value={param.choices[i].name} />
+                                    </div>
+                                    <div class="choice-value">
+                                        <ValidatingInput
+                                            disabled
+                                            error={errors.get(`${errorPath}_choices_${i}_value`)}
+                                            invalid={errors.has(`${errorPath}_choices_${i}_value`)}
+                                            minlength={3}
+                                            maxlength={100}
+                                            placeholder={i18nKey("bots.builder.choiceValue")}
+                                            value={param.choices[i].value} />
+                                    </div>
+                                </div>
+                            {/each}
+                        </div>
+                    </section>
+                {/if}
+            </div>
+        {/snippet}
+
+        {#snippet footer()}
+            <div class="footer">
+                <div class="navigate">
+                    <HoverIcon disabled={onPrevious === undefined} onclick={onPrevious}>
+                        <ChevronLeft size={$iconSize} color={"var(--icon-txt)"}></ChevronLeft>
+                    </HoverIcon>
+                    <HoverIcon disabled={onNext === undefined} onclick={onNext}>
+                        <ChevronRight size={$iconSize} color={"var(--icon-txt)"}></ChevronRight>
+                    </HoverIcon>
+                </div>
+            </div>
+        {/snippet}
+    </ModalContent>
+</Overlay>
+
+<style lang="scss">
+    .navigate {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .info {
+        @include font(book, normal, fs-70);
+        color: var(--txt-light);
+        margin-bottom: $sp3;
+    }
+
+    .choices {
+        margin-bottom: $sp3;
+    }
+
+    .choice {
+        display: flex;
+        align-items: center;
+        gap: $sp3;
+
+        .choice-name,
+        .choice-value {
+            flex: 1;
+        }
+    }
+
+    .minmax {
+        display: flex;
+        gap: $sp3;
+
+        .min,
+        .max {
+            flex: 1;
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/bots/CommandSelector.svelte b/frontend/app/src/desktop/features/bots/CommandSelector.svelte
new file mode 100644
index 0000000000..406fc0b1cd
--- /dev/null
+++ b/frontend/app/src/desktop/features/bots/CommandSelector.svelte
@@ -0,0 +1,348 @@
+<script lang="ts">
+    import type {
+        ChatPermissions,
+        ChatSummary,
+        GrantedBotPermissions,
+        MessageContext,
+        OpenChat,
+        PermissionRole,
+        ReadonlyMap,
+    } from "@client";
+    import {
+        botState,
+        directChatBotsStore,
+        isPermitted,
+        messagePermissionsForSelectedChatStore,
+        selectedChatBotsStore,
+        selectedChatSummaryStore,
+        selectedCommunityBotsStore,
+        threadPermissionsForSelectedChatStore,
+    } from "@client";
+    import { hasEveryRequiredPermission, random64, type FlattenedCommand } from "@shared";
+    import { getContext, onMount } from "svelte";
+    import Close from "svelte-material-icons/Close.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import ErrorMessage from "@src/desktop/shared/ErrorMessage.svelte";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import Logo from "@src/ui/Logo.svelte";
+    import Tooltip from "@src/desktop/ui/tooltip/Tooltip.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import BotAvatar from "./BotAvatar.svelte";
+
+    interface Props {
+        selectedBotId?: string; // this will be the botId if we are in a direct chat with a bot
+        onCancel: () => void;
+        onNoMatches: () => void;
+        onCommandSent: () => void;
+        mode: "thread" | "message";
+        messageContext: MessageContext;
+    }
+
+    const client = getContext<OpenChat>("client");
+
+    let { onCancel, onNoMatches, onCommandSent, mode, messageContext, selectedBotId }: Props =
+        $props();
+
+    let installedBots = $derived.by(() => {
+        switch (messageContext.chatId.kind) {
+            case "channel":
+                return $selectedCommunityBotsStore;
+            case "direct_chat":
+                return $directChatBotsStore;
+            default:
+                return $selectedChatBotsStore;
+        }
+    });
+
+    let commands = $derived.by(() => {
+        return botState.commands.filter((c) => {
+            return (
+                restrictByBotIfNecessary(c) &&
+                restrictByChatIfNecessary(c) &&
+                hasPermissionForCommand(c, installedBots, $selectedChatSummaryStore)
+            );
+        });
+    });
+
+    function restrictByBotIfNecessary(command: FlattenedCommand): boolean {
+        return (
+            selectedBotId === undefined ||
+            (command.kind === "external_bot" && command.botId === selectedBotId) ||
+            (command.kind === "internal_bot" && command.directBotDisabled === false)
+        );
+    }
+
+    function restrictByChatIfNecessary(command: FlattenedCommand): boolean {
+        return !(
+            messageContext.chatId.kind === "direct_chat" && command.directChatsDisabled === true
+        );
+    }
+
+    function userHasPermissionForCommand(
+        command: FlattenedCommand,
+        chat: ChatSummary | undefined,
+    ): boolean {
+        const chatRolePermitted =
+            chat !== undefined && chat.kind !== "direct_chat"
+                ? isPermitted(chat.membership.role, command.defaultRole)
+                : true;
+
+        const chatPermitted =
+            chat !== undefined && chat.kind !== "direct_chat"
+                ? [...command.permissions.chatPermissions].every(
+                      (p) =>
+                          ["readMessages", "readMembership", "readChatSummary"].includes(p) ||
+                          isPermitted(
+                              chat.membership.role,
+                              chat.permissions[p as keyof ChatPermissions] as PermissionRole,
+                          ),
+                  )
+                : true;
+
+        switch (mode) {
+            case "message":
+                return (
+                    chatRolePermitted &&
+                    chatPermitted &&
+                    [...command.permissions.messagePermissions].every((p) =>
+                        $messagePermissionsForSelectedChatStore.has(p),
+                    )
+                );
+            case "thread":
+                return (
+                    chatRolePermitted &&
+                    chatPermitted &&
+                    [...command.permissions.messagePermissions].every((p) =>
+                        $threadPermissionsForSelectedChatStore.has(p),
+                    )
+                );
+        }
+    }
+
+    function hasPermissionForCommand(
+        command: FlattenedCommand,
+        installedBots: ReadonlyMap<string, GrantedBotPermissions>,
+        chat: ChatSummary | undefined,
+    ): boolean {
+        const userPermission = userHasPermissionForCommand(command, chat);
+        if (command.kind === "external_bot") {
+            // for an external bot we also need to know that the bot has been granted all the permissions it requires
+            const granted = installedBots.get(command.botId);
+            const required = command.permissions;
+            return (
+                userPermission &&
+                granted !== undefined &&
+                hasEveryRequiredPermission(required, granted.command)
+            );
+        } else {
+            return userPermission;
+        }
+    }
+
+    function selectCommand(command: FlattenedCommand) {
+        botState.setSelectedCommand(messageContext, commands, command);
+        sendCommandIfValid();
+    }
+
+    function sendCommandIfValid() {
+        if (botState.selectedCommand && botState.instanceValid && $selectedChatSummaryStore) {
+            client
+                .executeBotCommand(
+                    {
+                        kind: "chat_scope",
+                        chatId: messageContext.chatId,
+                        threadRootMessageIndex: messageContext.threadRootMessageIndex,
+                        messageId: random64(),
+                    },
+                    botState.createBotInstance(botState.selectedCommand),
+                )
+                .then((result) => {
+                    if (result === "failure") {
+                        toastStore.showFailureToast(i18nKey("bots.failed"));
+                    } else if (result === "too_many_requests") {
+                        toastStore.showFailureToast(i18nKey("bots.tooManyRequests"));
+                    }
+                });
+            onCommandSent();
+        }
+    }
+
+    onMount(() => {
+        botState.error = undefined;
+        document.addEventListener("keydown", onkeydown);
+        return () => {
+            document.removeEventListener("keydown", onkeydown);
+        };
+    });
+
+    $effect(() => {
+        if (commands.length === 0) {
+            onNoMatches();
+        }
+    });
+
+    function onkeydown(ev: KeyboardEvent): void {
+        switch (ev.key) {
+            case "ArrowDown":
+                botState.focusPreviousCommand();
+                break;
+            case "ArrowUp":
+                botState.focusNextCommand();
+                break;
+            case "Enter":
+                if (!botState.showingBuilder) {
+                    botState.setSelectedCommand(messageContext, commands);
+                    sendCommandIfValid();
+                    ev.preventDefault();
+                }
+                break;
+            case "Escape":
+                onCancel();
+                break;
+        }
+    }
+</script>
+
+<div class="command-header">
+    <h4>
+        <Translatable resourceKey={i18nKey("bots.matchingCommands")} />
+    </h4>
+    <HoverIcon onclick={onCancel}>
+        <Close size={"1em"} color={"var(--icon-txt)"} />
+    </HoverIcon>
+</div>
+<div class="command-list">
+    {#each commands as command, i}
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div
+            class="command"
+            class:selected={botState.focusedCommandIndex === i}
+            onclick={() => selectCommand(command)}>
+            {#if command.kind === "external_bot"}
+                <BotAvatar bot={command} />
+            {:else}
+                <Logo />
+            {/if}
+            <div class="details">
+                <div class="interface">
+                    <div class="command-name">
+                        /{command.name}
+                    </div>
+                    {#each command?.params ?? [] as param}
+                        <Tooltip position={"top"} align={"middle"}>
+                            <div class="param" class:required={param.required}>
+                                <Translatable resourceKey={i18nKey(param.name)} />
+                            </div>
+                            {#snippet popupTemplate()}
+                                <Translatable resourceKey={i18nKey(param.description ?? "")} />
+                            {/snippet}
+                        </Tooltip>
+                    {/each}
+                </div>
+                {#if command.description}
+                    <div class="desc">
+                        <Translatable resourceKey={i18nKey(command.description)} />
+                    </div>
+                {/if}
+            </div>
+            <div class="bot-name">
+                <Translatable resourceKey={i18nKey(command.botName)} />
+            </div>
+        </div>
+    {/each}
+</div>
+
+{#if botState.error !== undefined}
+    <div class="command-error">
+        <ErrorMessage>
+            {botState.error}
+        </ErrorMessage>
+    </div>
+{/if}
+
+<style lang="scss">
+    .command-error {
+        :global(h4) {
+            margin-bottom: 0;
+        }
+    }
+
+    .command-header {
+        background-color: var(--modal-bg);
+        padding: $sp3 $sp4;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: 1px solid var(--bd);
+        border-top: 1px solid var(--bd);
+    }
+
+    .command-list {
+        position: relative;
+        max-height: calc(var(--vh, 1vh) * 50);
+        overflow: auto;
+        background-color: var(--modal-bg);
+
+        .command {
+            $size: toRem(48);
+            display: flex;
+            align-items: center;
+            gap: $sp3;
+            border-bottom: 1px solid var(--bd);
+            padding: $sp3;
+            cursor: pointer;
+
+            :global(.logo),
+            :global(.avatar) {
+                width: $size;
+                height: $size;
+                flex: 0 0 $size;
+            }
+
+            &.selected {
+                background-color: var(--chatSummary-bg-selected);
+            }
+
+            .bot-name {
+                @include font(light, normal, fs-80);
+                color: var(--txt-light);
+            }
+
+            .details {
+                flex: auto;
+                display: flex;
+                flex-direction: column;
+
+                .interface {
+                    display: flex;
+                    align-items: center;
+                    gap: $sp3;
+
+                    .command-name {
+                        @include font(bold, normal, fs-100);
+                    }
+
+                    .param {
+                        @include font(light, normal, fs-80);
+                        border: 1px solid var(--button-bg);
+                        padding: $sp1 $sp3;
+                        border-radius: $sp2;
+                        line-height: 18px;
+
+                        &.required {
+                            background: var(--button-bg);
+                            color: var(--button-txt);
+                            border: none;
+                        }
+                    }
+                }
+
+                .desc {
+                    @include font(light, normal, fs-80);
+                }
+            }
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/bots/CommandViewer.svelte b/frontend/app/src/desktop/features/bots/CommandViewer.svelte
new file mode 100644
index 0000000000..2b80e6566f
--- /dev/null
+++ b/frontend/app/src/desktop/features/bots/CommandViewer.svelte
@@ -0,0 +1,202 @@
+<script lang="ts">
+    import {
+        type CommandDefinition,
+        type CommandParam,
+        iconSize,
+        ValidationErrors,
+    } from "@client";
+    import ChevronLeft from "svelte-material-icons/ChevronLeft.svelte";
+    import ChevronRight from "svelte-material-icons/ChevronRight.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import ErrorMessage from "@src/desktop/shared/ErrorMessage.svelte";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import Input from "@src/desktop/shared/Input.svelte";
+    import Legend from "@src/desktop/shared/Legend.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import BotPermissionViewer from "./BotPermissionViewer.svelte";
+    import CommandParameterViewer from "./CommandParameterViewer.svelte";
+    import ValidatingInput from "./ValidatingInput.svelte";
+
+    interface Props {
+        errors: ValidationErrors;
+        errorPath: string;
+        command: CommandDefinition;
+        onNext?: () => void;
+        onPrevious?: () => void;
+        onClose: () => void;
+    }
+
+    let { command, errors, errorPath, onNext, onPrevious, onClose }: Props = $props();
+
+    let selectedParam = $state<CommandParam | undefined>(undefined);
+    let selectedParamIndex = $state<number | undefined>(undefined);
+    let showNext = $derived(
+        selectedParamIndex !== undefined && selectedParamIndex < command.params.length - 1,
+    );
+    let showPrev = $derived(selectedParamIndex !== undefined && selectedParamIndex > 0);
+
+    function onSelectParam(param: CommandParam, index: number) {
+        selectedParam = param;
+        selectedParamIndex = index;
+    }
+
+    function traverseParams(add: number) {
+        if (selectedParamIndex === undefined) return;
+
+        selectedParamIndex += add;
+        selectedParam = command.params[selectedParamIndex];
+        if (selectedParam === undefined) {
+            selectedParamIndex = undefined;
+        }
+    }
+
+    function nextParam() {
+        traverseParams(1);
+    }
+
+    function previousParam() {
+        traverseParams(-1);
+    }
+</script>
+
+{#if selectedParam !== undefined && selectedParamIndex !== undefined}
+    <CommandParameterViewer
+        errorPath={`${errorPath}_param_${selectedParamIndex}`}
+        {errors}
+        onNext={showNext ? nextParam : undefined}
+        onPrevious={showPrev ? previousParam : undefined}
+        onClose={() => (selectedParam = undefined)}
+        param={selectedParam}></CommandParameterViewer>
+{/if}
+
+<Overlay dismissible {onClose}>
+    <ModalContent closeIcon {onClose}>
+        {#snippet header()}
+            <Translatable resourceKey={i18nKey("bots.builder.commandLabel", { name: command.name })}
+            ></Translatable>
+        {/snippet}
+        {#snippet body()}
+            <section>
+                <Legend required label={i18nKey("bots.builder.commandNameLabel")}></Legend>
+                <ValidatingInput
+                    disabled
+                    error={errors.get(`${errorPath}_name`)}
+                    minlength={3}
+                    maxlength={25}
+                    invalid={errors.has(`${errorPath}_name`)}
+                    placeholder={i18nKey("bots.builder.commandNamePlaceholder")}
+                    value={command.name} />
+            </section>
+
+            <section>
+                <Legend required label={i18nKey("bots.builder.commandDescLabel")}></Legend>
+                <Input
+                    disabled
+                    minlength={5}
+                    maxlength={500}
+                    placeholder={i18nKey("bots.builder.commandDescPlaceholder")}
+                    value={command.description} />
+            </section>
+
+            <section>
+                <Legend label={i18nKey("bots.builder.commandPlaceholderLabel")}></Legend>
+                <Input
+                    disabled
+                    minlength={5}
+                    maxlength={500}
+                    placeholder={i18nKey("bots.builder.commandPlaceholderPlaceholder")}
+                    value={command.placeholder} />
+            </section>
+
+            <section>
+                <BotPermissionViewer
+                    title={i18nKey("bots.builder.commandPermissionsLabel")}
+                    permissions={command.permissions} />
+            </section>
+
+            {#if command.params.length > 0}
+                <section>
+                    <Legend label={i18nKey("bots.builder.paramsLabel")}></Legend>
+                    <div class="params">
+                        {#each command.params as param, i}
+                            <!-- svelte-ignore a11y_click_events_have_key_events -->
+                            <!-- svelte-ignore a11y_no_static_element_interactions -->
+                            <div
+                                onclick={() => onSelectParam(param, i)}
+                                class="param"
+                                class:param-error={errors.has(`${errorPath}_param_${i}`)}>
+                                <Translatable resourceKey={i18nKey(param.name)}></Translatable>
+                            </div>
+                        {/each}
+                    </div>
+                </section>
+            {/if}
+
+            {#if errors.has(`${errorPath}_duplicate_params`)}
+                <ErrorMessage>{errors.get(`${errorPath}_duplicate_params`)}</ErrorMessage>
+            {/if}
+        {/snippet}
+
+        {#snippet footer()}
+            <div class="footer">
+                <div class="navigate">
+                    <HoverIcon disabled={onPrevious === undefined} onclick={onPrevious}>
+                        <ChevronLeft size={$iconSize} color={"var(--icon-txt)"}></ChevronLeft>
+                    </HoverIcon>
+                    <HoverIcon disabled={onNext === undefined} onclick={onNext}>
+                        <ChevronRight size={$iconSize} color={"var(--icon-txt)"}></ChevronRight>
+                    </HoverIcon>
+                </div>
+            </div>
+        {/snippet}
+    </ModalContent>
+</Overlay>
+
+<style lang="scss">
+    section {
+        margin-bottom: $sp4;
+    }
+
+    .navigate {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .params {
+        margin: 0 0 $sp3 0;
+        display: flex;
+        gap: $sp3;
+        flex-wrap: wrap;
+
+        .param {
+            padding: $sp3 $sp4;
+            cursor: pointer;
+            align-items: center;
+            background: var(--button-bg);
+            color: var(--button-txt);
+            transition:
+                background ease-in-out 200ms,
+                color ease-in-out 200ms;
+            border-radius: var(--button-rd);
+
+            @media (hover: hover) {
+                &:hover {
+                    background: var(--button-hv);
+                    color: var(--button-hv-txt);
+                }
+            }
+
+            &.param-error {
+                background-color: var(--error);
+                @media (hover: hover) {
+                    &:hover {
+                        background: var(--error);
+                    }
+                }
+            }
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/bots/DirectChatHeader.svelte b/frontend/app/src/desktop/features/bots/DirectChatHeader.svelte
new file mode 100644
index 0000000000..a852d2ea22
--- /dev/null
+++ b/frontend/app/src/desktop/features/bots/DirectChatHeader.svelte
@@ -0,0 +1,206 @@
+<script lang="ts">
+    import type { DirectChatSummary, ExternalBot } from "@client";
+    import {
+        allUsersStore,
+        AvatarSize,
+        definitionToPermissions,
+        directChatBotsStore,
+        favouritesStore,
+        iconSize,
+        mobileWidth,
+        type OpenChat,
+        publish,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import ArrowLeft from "svelte-material-icons/ArrowLeft.svelte";
+    import ArrowRight from "svelte-material-icons/ArrowRight.svelte";
+    import DeleteOutline from "svelte-material-icons/DeleteOutline.svelte";
+    import DotsVertical from "svelte-material-icons/DotsVertical.svelte";
+    import HeartMinus from "svelte-material-icons/HeartMinus.svelte";
+    import HeartPlus from "svelte-material-icons/HeartPlus.svelte";
+    import Magnify from "svelte-material-icons/Magnify.svelte";
+    import PencilOutline from "svelte-material-icons/PencilOutline.svelte";
+    import TextBoxOutline from "svelte-material-icons/TextBoxOutline.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { rtlStore } from "@src/stores/rtl";
+    import Avatar from "@src/desktop/shared/Avatar.svelte";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import Menu from "@src/desktop/shared/Menu.svelte";
+    import MenuIcon from "@src/desktop/shared/MenuIcon.svelte";
+    import MenuItem from "@src/desktop/shared/MenuItem.svelte";
+    import SectionHeader from "@src/desktop/shared/SectionHeader.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import WithBotManagement from "./WithBotManagement.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        chat: DirectChatSummary;
+        bot: ExternalBot;
+        onSearchChat: (term: string) => void;
+    }
+
+    let { chat, bot, onSearchChat }: Props = $props();
+    let botUser = $derived($allUsersStore.get(chat.them.userId));
+    let grantedPermissions = $derived(
+        $directChatBotsStore.get(bot.id) ?? definitionToPermissions(bot.definition),
+    );
+
+    function addToFavourites() {
+        client.addToFavourites(chat.id);
+    }
+
+    function removeFromFavourites() {
+        client.removeFromFavourites(chat.id);
+    }
+
+    function searchChat() {
+        onSearchChat("");
+    }
+</script>
+
+<WithBotManagement collection={chat} {bot} canManage {grantedPermissions}>
+    {#snippet contents({ removeBot, reviewPermissions, viewBotDetails })}
+        <SectionHeader shadow flush>
+            {#if $mobileWidth}
+                <!-- svelte-ignore a11y_click_events_have_key_events -->
+                <!-- svelte-ignore a11y_no_static_element_interactions -->
+                <div class="back" class:rtl={$rtlStore} onclick={() => publish("clearSelection")}>
+                    <HoverIcon>
+                        {#if $rtlStore}
+                            <ArrowRight size={$iconSize} color={"var(--icon-txt)"} />
+                        {:else}
+                            <ArrowLeft size={$iconSize} color={"var(--icon-txt)"} />
+                        {/if}
+                    </HoverIcon>
+                </div>
+            {/if}
+
+            <div class="avatar">
+                <Avatar
+                    userId={chat.them.userId}
+                    url={client.userAvatarUrl(botUser)}
+                    size={AvatarSize.Default} />
+            </div>
+            <div class="chat-details">
+                <div class="chat-name">
+                    {client.displayName(botUser)}
+                </div>
+            </div>
+
+            <div class="menu">
+                <MenuIcon position={"bottom"} align={"end"}>
+                    {#snippet menuIcon()}
+                        <HoverIcon title={$_("chatMenu")}>
+                            <DotsVertical size={$iconSize} color={"var(--icon-txt)"} />
+                        </HoverIcon>
+                    {/snippet}
+                    {#snippet menuItems()}
+                        <Menu>
+                            {#if !$favouritesStore.has(chat.id)}
+                                <MenuItem onclick={addToFavourites}>
+                                    {#snippet icon()}
+                                        <HeartPlus size={$iconSize} color={"var(--menu-warn)"} />
+                                    {/snippet}
+                                    {#snippet text()}
+                                        <Translatable
+                                            resourceKey={i18nKey("communities.addToFavourites")} />
+                                    {/snippet}
+                                </MenuItem>
+                            {:else}
+                                <MenuItem onclick={removeFromFavourites}>
+                                    {#snippet icon()}
+                                        <HeartMinus size={$iconSize} color={"var(--menu-warn)"} />
+                                    {/snippet}
+                                    {#snippet text()}
+                                        <Translatable
+                                            resourceKey={i18nKey(
+                                                "communities.removeFromFavourites",
+                                            )} />
+                                    {/snippet}
+                                </MenuItem>
+                            {/if}
+                            {#if $mobileWidth}
+                                <MenuItem onclick={searchChat}>
+                                    {#snippet icon()}
+                                        <Magnify
+                                            size={$iconSize}
+                                            color={"var(--icon-inverted-txt)"} />
+                                    {/snippet}
+                                    {#snippet text()}
+                                        <Translatable resourceKey={i18nKey("searchChat")} />
+                                    {/snippet}
+                                </MenuItem>
+                            {/if}
+
+                            <MenuItem onclick={() => removeBot()}>
+                                {#snippet icon()}
+                                    <DeleteOutline
+                                        size={$iconSize}
+                                        color={"var(--icon-inverted-txt)"} />
+                                {/snippet}
+                                {#snippet text()}
+                                    <Translatable resourceKey={i18nKey("bots.manage.remove")} />
+                                {/snippet}
+                            </MenuItem>
+
+                            <MenuItem onclick={() => reviewPermissions()}>
+                                {#snippet icon()}
+                                    <PencilOutline
+                                        size={$iconSize}
+                                        color={"var(--icon-inverted-txt)"} />
+                                {/snippet}
+                                {#snippet text()}
+                                    <Translatable resourceKey={i18nKey("bots.manage.review")} />
+                                {/snippet}
+                            </MenuItem>
+
+                            <MenuItem onclick={() => viewBotDetails()}>
+                                {#snippet icon()}
+                                    <TextBoxOutline
+                                        size={$iconSize}
+                                        color={"var(--icon-inverted-txt)"} />
+                                {/snippet}
+                                {#snippet text()}
+                                    <Translatable resourceKey={i18nKey("bots.manage.view")} />
+                                {/snippet}
+                            </MenuItem>
+                        </Menu>
+                    {/snippet}
+                </MenuIcon>
+            </div>
+        </SectionHeader>
+    {/snippet}
+</WithBotManagement>
+
+<style lang="scss">
+    .chat-name {
+        @include font(book, normal, fs-120);
+        @include ellipsis();
+        margin-bottom: $sp1;
+        display: flex;
+        align-items: center;
+        gap: $sp2;
+    }
+
+    .avatar {
+        flex: 0 0 55px;
+    }
+
+    .chat-details {
+        flex: 1;
+        overflow: auto;
+        padding: 0 $sp2;
+    }
+
+    .back {
+        flex: 0 0 10px;
+        margin-right: 5px;
+
+        &.rtl {
+            margin-right: 0;
+            margin-left: 5px;
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/bots/EphemeralMessage.svelte b/frontend/app/src/desktop/features/bots/EphemeralMessage.svelte
new file mode 100644
index 0000000000..a810ec651e
--- /dev/null
+++ b/frontend/app/src/desktop/features/bots/EphemeralMessage.svelte
@@ -0,0 +1,118 @@
+<script lang="ts">
+    import { i18nKey } from "@src/i18n/i18n";
+    import { AvatarSize, botState, type EphemeralMessageEvent } from "@client";
+    import { onMount } from "svelte";
+    import Close from "svelte-material-icons/Close.svelte";
+    import { Tween } from "svelte/motion";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import ChatMessageContent from "@src/desktop/features/chats/core/content/ChatMessageContent.svelte";
+    import BotAvatar from "./BotAvatar.svelte";
+
+    const duration = 10_000;
+
+    interface Props {
+        event: EphemeralMessageEvent;
+        onClose: () => void;
+    }
+
+    let perc = new Tween(100, { duration });
+    let { event, onClose }: Props = $props();
+    let bot = $derived(botState.externalBots.get(event.botId));
+    let timer = $state<number>();
+
+    onMount(() => {
+        perc.target = 0;
+        timer = window.setTimeout(onClose, duration);
+        return clearTimer;
+    });
+
+    function clearTimer() {
+        window.clearTimeout(timer);
+        timer = undefined;
+    }
+
+    function pause() {
+        perc.target = perc.current;
+        clearTimer();
+    }
+
+    function resume() {
+        const remainingTime = (perc.current / 100) * duration;
+        perc.set(0, { duration: remainingTime });
+        timer = window.setTimeout(onClose, remainingTime);
+    }
+
+    function closeClicked() {
+        clearTimer();
+        onClose();
+    }
+</script>
+
+{#if bot}
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="ephemeral-msg">
+        <div onmousedown={pause} onmouseup={resume} class="content">
+            <div class="header">
+                <BotAvatar size={AvatarSize.Tiny} {bot} />
+                <div class="title">
+                    <Translatable resourceKey={i18nKey(`${bot.name} /${event.commandName}`)} />
+                </div>
+                <!-- svelte-ignore a11y_click_events_have_key_events -->
+                <!-- svelte-ignore a11y_no_static_element_interactions -->
+                <span class="close" onclick={closeClicked}>
+                    <HoverIcon>
+                        <Close size={"1em"} color={"var(--icon-txt)"} />
+                    </HoverIcon>
+                </span>
+            </div>
+            <ChatMessageContent
+                failed={false}
+                messageId={event.message.messageId}
+                messageIndex={0}
+                messageContext={{ chatId: { kind: "direct_chat", userId: "" } }}
+                intersecting={false}
+                blockLevelMarkdown={event.message.blockLevelMarkdown}
+                edited={false}
+                senderId={bot.id}
+                fill={false}
+                readonly={true}
+                content={event.message.messageContent} />
+        </div>
+        <div class="countdown">
+            <div style={`width: ${perc.current}%`} class="bar"></div>
+        </div>
+    </div>
+{/if}
+
+<style lang="scss">
+    .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: $sp3;
+        margin-bottom: $sp4;
+
+        .title {
+            flex: auto;
+            @include font(bold, normal, fs-110);
+        }
+    }
+    .ephemeral-msg {
+        width: 100%;
+
+        .content {
+            padding: $sp4;
+        }
+    }
+
+    .countdown {
+        height: toRem(10);
+        width: 100%;
+
+        .bar {
+            height: toRem(10);
+            background-color: var(--warn);
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/bots/InstallationLocationSelector.svelte b/frontend/app/src/desktop/features/bots/InstallationLocationSelector.svelte
new file mode 100644
index 0000000000..a8be5eaf63
--- /dev/null
+++ b/frontend/app/src/desktop/features/bots/InstallationLocationSelector.svelte
@@ -0,0 +1,183 @@
+<script lang="ts">
+    import {
+        AvatarSize,
+        communitiesStore,
+        i18nKey,
+        OpenChat,
+        serverGroupChatsStore,
+        type BotInstallationLocation,
+    } from "@client";
+    import { getContext, onMount } from "svelte";
+    import Avatar from "@src/desktop/shared/Avatar.svelte";
+    import SelectedMatch from "@src/desktop/features/proposals/SelectedMatch.svelte";
+    import Legend from "@src/desktop/shared/Legend.svelte";
+    import Menu from "@src/desktop/shared/Menu.svelte";
+    import MenuItem from "@src/desktop/shared/MenuItem.svelte";
+    import Search from "@src/desktop/shared/Search.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    type Match = {
+        avatarUrl: string;
+        name: string;
+        id: string;
+        isCommunity: boolean;
+    };
+
+    interface Props {
+        location?: BotInstallationLocation;
+    }
+
+    let { location = $bindable() }: Props = $props();
+    let searchTerm: string = $state("");
+    let placeholder = i18nKey("Search for a community, group or user");
+    let results: Match[] = $state([]);
+    let selected: Match | undefined = $state(undefined);
+    let focused = $state(false);
+    location; // usual hack
+
+    onMount(() => onPerformSearch(""));
+
+    function onPerformSearch(term: string) {
+        const termLower = term.toLowerCase();
+
+        const communities: Match[] = [...$communitiesStore.values()]
+            .filter((c) => termLower === "" || c.name.toLowerCase().includes(termLower))
+            .map((c) => ({
+                avatarUrl: client.communityAvatarUrl(c.id.communityId, c.avatar),
+                name: c.name,
+                id: c.id.communityId,
+                isCommunity: true,
+            }));
+
+        const groups: Match[] = [...$serverGroupChatsStore.values()]
+            .filter((g) => termLower === "" || g.name.toLowerCase().includes(termLower))
+            .map((g) => ({
+                avatarUrl: client.groupAvatarUrl(g),
+                name: g.name,
+                id: g.id.groupId,
+                isCommunity: false,
+            }));
+
+        communities.sort((a: Match, b: Match) => a.name.localeCompare(b.name));
+        groups.sort((a: Match, b: Match) => a.name.localeCompare(b.name));
+        results = [...communities, ...groups];
+    }
+
+    function reset() {
+        selected = undefined;
+        onPerformSearch("");
+    }
+
+    function select(match: Match | undefined) {
+        selected = match;
+        results = [];
+        if (match !== undefined) {
+            if (match.isCommunity) {
+                location = { kind: "community", communityId: match.id };
+            } else {
+                location = { kind: "group_chat", groupId: match.id };
+            }
+        }
+    }
+
+    function onFocus() {
+        focused = true;
+    }
+
+    function onBlur() {
+        window.setTimeout(() => (focused = false), 300);
+    }
+</script>
+
+<div class="bot-install-location" class:showing-menu={results.length > 0}>
+    <Legend
+        label={i18nKey("bots.builder.testContext")}
+        rules={i18nKey("bots.builder.testContextInfo")}></Legend>
+    {#if selected !== undefined}
+        <SelectedMatch onRemove={() => reset()} match={selected}></SelectedMatch>
+    {:else}
+        <Search
+            inputStyle
+            fill
+            {placeholder}
+            searching={false}
+            {searchTerm}
+            {onPerformSearch}
+            {onFocus}
+            {onBlur} />
+    {/if}
+
+    {#if focused && results.length > 0}
+        <div class="menu">
+            <Menu shadow={false}>
+                {#each results as match (match.id)}
+                    <MenuItem onclick={() => select(match)}>
+                        {#snippet icon()}
+                            <Avatar url={match.avatarUrl} size={AvatarSize.Small} />
+                        {/snippet}
+                        {#snippet text()}
+                            <div class="details">
+                                <div class="name">
+                                    {match.name}
+                                </div>
+                                <div class="type">
+                                    {#if match.isCommunity}
+                                        Community
+                                    {:else}
+                                        Group chat
+                                    {/if}
+                                </div>
+                            </div>
+                        {/snippet}
+                    </MenuItem>
+                {/each}
+            </Menu>
+        </div>
+    {/if}
+
+    <p class="info">
+        <Translatable resourceKey={i18nKey("bots.builder.testContextExplanation")}></Translatable>
+    </p>
+</div>
+
+<style lang="scss">
+    .bot-install-location {
+        margin-bottom: $sp4;
+
+        &.showing-menu {
+            :global(.wrapper) {
+                border-radius: var(--rd) var(--rd) var(--rd) 0;
+            }
+
+            :global(.menu) {
+                border-radius: 0 0 var(--rd) var(--rd);
+            }
+
+            :global(.menu .menu) {
+                border-radius: 0 0 var(--rd) var(--rd);
+                border-top: none;
+            }
+        }
+    }
+    .info {
+        @include font(book, normal, fs-70);
+        color: var(--txt-light);
+        margin-top: $sp3;
+    }
+
+    .menu {
+        max-height: 250px;
+        overflow: auto;
+        width: fit-content;
+        position: absolute;
+        @include z-index("popup-menu");
+        box-shadow: var(--menu-sh);
+    }
+
+    .type {
+        @include font(light, normal, fs-70);
+        color: var(--txt-light);
+    }
+</style>
diff --git a/frontend/app/src/components/IntegerInput.svelte b/frontend/app/src/desktop/features/bots/IntegerInput.svelte
similarity index 94%
rename from frontend/app/src/components/IntegerInput.svelte
rename to frontend/app/src/desktop/features/bots/IntegerInput.svelte
index 0f74865aa2..b40d9640d7 100644
--- a/frontend/app/src/components/IntegerInput.svelte
+++ b/frontend/app/src/desktop/features/bots/IntegerInput.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import type { ResourceKey } from "@client";
-    import NumberInput from "./NumberInput.svelte";
+    import NumberInput from "@src/desktop/shared/NumberInput.svelte";
     import { trackedEffect } from "@src/utils/effects.svelte";
 
     interface Props {
diff --git a/frontend/app/src/desktop/features/bots/Tabs.svelte b/frontend/app/src/desktop/features/bots/Tabs.svelte
new file mode 100644
index 0000000000..1a23f10ab9
--- /dev/null
+++ b/frontend/app/src/desktop/features/bots/Tabs.svelte
@@ -0,0 +1,87 @@
+<script module>
+    export type Tab = {
+        title: ResourceKey;
+        snippet: Snippet;
+    };
+</script>
+
+<script lang="ts">
+    import type { ResourceKey } from "@client";
+    import type { Snippet } from "svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    interface Props {
+        tabs: Tab[];
+        initialIndex?: number;
+        nested?: boolean;
+        selectedIndex?: number;
+        onTabSelected?: (index: number) => void;
+    }
+
+    let {
+        tabs,
+        initialIndex = 0,
+        nested = false,
+        selectedIndex = $bindable(initialIndex),
+        onTabSelected,
+    }: Props = $props();
+
+    function selectTab(idx: number) {
+        selectedIndex = idx;
+        onTabSelected?.(idx);
+    }
+</script>
+
+<div class="tabs" class:nested>
+    {#each tabs as tab, i}
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <div
+            tabindex="0"
+            role="button"
+            class="tab"
+            class:nested
+            onclick={() => selectTab(i)}
+            class:selected={selectedIndex === i}>
+            <Translatable resourceKey={tab.title}></Translatable>
+        </div>
+    {/each}
+</div>
+{#if selectedIndex !== undefined}
+    {@render tabs[selectedIndex]?.snippet()}
+{/if}
+
+<style lang="scss">
+    .tabs {
+        display: flex;
+        align-items: center;
+        @include font(medium, normal, fs-90);
+        color: var(--txt-light);
+        gap: $sp5;
+        border-bottom: 1px solid var(--bd);
+        cursor: pointer;
+        margin-bottom: $sp4;
+
+        @include mobile() {
+            gap: $sp4;
+        }
+
+        &.nested {
+            @include font(medium, normal, fs-80);
+        }
+
+        .tab {
+            padding-bottom: 10px;
+            margin-bottom: -2px;
+            border-bottom: 3px solid transparent;
+            white-space: nowrap;
+            &.selected {
+                color: var(--txt);
+                border-bottom: 3px solid var(--txt);
+
+                &.nested {
+                    border-bottom-color: var(--accent);
+                }
+            }
+        }
+    }
+</style>
diff --git a/frontend/app/src/components/bots/UninstalledDirectBot.svelte b/frontend/app/src/desktop/features/bots/UninstalledDirectBot.svelte
similarity index 89%
rename from frontend/app/src/components/bots/UninstalledDirectBot.svelte
rename to frontend/app/src/desktop/features/bots/UninstalledDirectBot.svelte
index 5da675e3c8..ad0b60d775 100644
--- a/frontend/app/src/components/bots/UninstalledDirectBot.svelte
+++ b/frontend/app/src/desktop/features/bots/UninstalledDirectBot.svelte
@@ -10,9 +10,9 @@
         routeStore,
         type DirectChatIdentifier,
     } from "@client";
-    import { navigate } from "@utils/navigation";
+    import { navigate } from "@src/utils/navigation";
     import { getContext } from "svelte";
-    import BotInstaller from "./install/BotInstaller.svelte";
+    import BotInstaller from "@src/desktop/features/bots/install/BotInstaller.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/components/bots/ValidatingInput.svelte b/frontend/app/src/desktop/features/bots/ValidatingInput.svelte
similarity index 86%
rename from frontend/app/src/components/bots/ValidatingInput.svelte
rename to frontend/app/src/desktop/features/bots/ValidatingInput.svelte
index 512aa7b13e..f28c8db726 100644
--- a/frontend/app/src/components/bots/ValidatingInput.svelte
+++ b/frontend/app/src/desktop/features/bots/ValidatingInput.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-    import Input from "../Input.svelte";
-    import { type InputProps } from "../Input.svelte";
-    import ErrorMessage from "../ErrorMessage.svelte";
-    import Translatable from "../Translatable.svelte";
+    import Input from "@src/desktop/shared/Input.svelte";
+    import { type InputProps } from "@src/desktop/shared/Input.svelte";
+    import ErrorMessage from "@src/desktop/shared/ErrorMessage.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
     import type { ResourceKey } from "@client";
 
     type Props = InputProps & { error: ResourceKey[] };
diff --git a/frontend/app/src/desktop/features/bots/WebhookMember.svelte b/frontend/app/src/desktop/features/bots/WebhookMember.svelte
new file mode 100644
index 0000000000..b13a80ef06
--- /dev/null
+++ b/frontend/app/src/desktop/features/bots/WebhookMember.svelte
@@ -0,0 +1,139 @@
+<script lang="ts">
+    import { toastStore } from "@src/stores/toast";
+    import { iconSize, type MultiUserChat, OpenChat } from "@client";
+    import { publish, type WebhookDetails } from "@shared";
+    import { getContext } from "svelte";
+    import ChevronDown from "svelte-material-icons/ChevronDown.svelte";
+    import DeleteOutline from "svelte-material-icons/DeleteOutline.svelte";
+    import TextBoxOutline from "svelte-material-icons/TextBoxOutline.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import FilteredUsername from "@src/ui/FilteredUsername.svelte";
+    import BotBadge from "@src/desktop/features/bots/exports/BotBadge.svelte";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import Menu from "@src/desktop/shared/Menu.svelte";
+    import MenuIcon from "@src/desktop/shared/MenuIcon.svelte";
+    import MenuItem from "@src/desktop/shared/MenuItem.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import BotAvatar from "./BotAvatar.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        chat: MultiUserChat;
+        webhook: WebhookDetails;
+        searchTerm: string;
+    }
+
+    let { chat, webhook, searchTerm }: Props = $props();
+
+    function deleteWebhook() {
+        client.deleteWebhook(chat.id, webhook.id).then((success) => {
+            if (!success) {
+                toastStore.showFailureToast(i18nKey("webhook.removeFailed"));
+            }
+        });
+    }
+
+    function viewEditWebhook() {
+        client.getWebhook(chat.id, webhook.id).then((secret) => {
+            if (secret !== undefined) {
+                publish("updateWebhook", {
+                    chat,
+                    hook: {
+                        ...webhook,
+                        secret,
+                    },
+                });
+            }
+        });
+    }
+</script>
+
+<div class="bot_member" role="button">
+    <span class="avatar">
+        <BotAvatar bot={webhook} />
+    </span>
+    <div class="details">
+        <div class="bot_name">
+            <h4>
+                <FilteredUsername {searchTerm} username={webhook.name} />
+                <BotBadge webhook />
+            </h4>
+        </div>
+    </div>
+    <MenuIcon position={"bottom"} align={"end"}>
+        {#snippet menuIcon()}
+            <HoverIcon>
+                <ChevronDown size={$iconSize} color={"var(--icon-txt)"} />
+            </HoverIcon>
+        {/snippet}
+        {#snippet menuItems()}
+            <Menu>
+                <MenuItem onclick={() => viewEditWebhook()}>
+                    {#snippet icon()}
+                        <TextBoxOutline size={$iconSize} color={"var(--icon-inverted-txt)"} />
+                    {/snippet}
+                    {#snippet text()}
+                        <Translatable resourceKey={i18nKey("webhook.viewEditAction")} />
+                    {/snippet}
+                </MenuItem>
+                <MenuItem onclick={() => deleteWebhook()}>
+                    {#snippet icon()}
+                        <DeleteOutline size={$iconSize} color={"var(--icon-inverted-txt)"} />
+                    {/snippet}
+                    {#snippet text()}
+                        <Translatable resourceKey={i18nKey("webhook.removeAction")} />
+                    {/snippet}
+                </MenuItem>
+            </Menu>
+        {/snippet}
+    </MenuIcon>
+</div>
+
+<style lang="scss">
+    .bot_member {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: $sp4;
+        transition:
+            background-color ease-in-out 100ms,
+            border-color ease-in-out 100ms;
+        gap: 12px;
+
+        @media (hover: hover) {
+            &:hover {
+                background-color: var(--members-hv);
+            }
+        }
+
+        @include mobile() {
+            padding: $sp3 toRem(10);
+        }
+    }
+    .avatar {
+        flex: 0 0 50px;
+        position: relative;
+    }
+
+    .details {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        @include font(medium, normal, fs-100);
+        gap: $sp2;
+
+        .bot_name {
+            display: flex;
+            flex: 1;
+            align-items: center;
+            @include ellipsis();
+
+            h4 {
+                display: flex;
+                align-items: center;
+                gap: $sp2;
+            }
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/bots/WebhookModal.svelte b/frontend/app/src/desktop/features/bots/WebhookModal.svelte
new file mode 100644
index 0000000000..32cead8ecc
--- /dev/null
+++ b/frontend/app/src/desktop/features/bots/WebhookModal.svelte
@@ -0,0 +1,267 @@
+<script lang="ts">
+    import { toastStore } from "@src/stores/toast";
+    import { copyToClipboard } from "@src/utils/urls";
+    import {
+        emptyWebhookInstance,
+        iconSize,
+        mobileWidth,
+        OpenChat,
+        validBotComponentName,
+        type FullWebhookDetails,
+        type MultiUserChatIdentifier,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import ContentCopy from "svelte-material-icons/ContentCopy.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import EditableAvatar from "@src/ui/EditableAvatar.svelte";
+    import Legend from "@src/desktop/shared/Legend.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import ValidatingInput from "./ValidatingInput.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        onClose: () => void;
+        chatId: MultiUserChatIdentifier;
+        mode: { kind: "register" } | { kind: "update"; webhook: FullWebhookDetails };
+    }
+
+    let { onClose, chatId, mode = $bindable({ kind: "register" }) }: Props = $props();
+
+    let busy = $state(false);
+    let busyUpdate = $state(false);
+    let step = $state(mode.kind as string);
+
+    let webhook = $state({
+        original: mode.kind === "update" ? mode.webhook : emptyWebhookInstance(),
+        current: mode.kind === "update" ? { ...mode.webhook } : emptyWebhookInstance(),
+    });
+
+    let nameDirty = $derived(webhook.original.name !== webhook.current.name);
+    let avatarDirty = $derived(webhook.original.avatarUrl !== webhook.current.avatarUrl);
+    let dirty = $derived(nameDirty || avatarDirty);
+    let name_errors = $derived(validBotComponentName(webhook.current.name, 3));
+    let valid = $derived(name_errors.length === 0);
+    let url = $derived(client.webhookUrl(webhook.current, chatId));
+
+    let titleKey = $derived.by(() => {
+        switch (step) {
+            case "update":
+                return i18nKey("webhook.updateTitle", { name: webhook.current.name });
+            default:
+                return i18nKey("webhook.registerTitle");
+        }
+    });
+
+    function register() {
+        if (valid && dirty) {
+            busy = true;
+            client
+                .registerWebhook(chatId, webhook.current.name, webhook.current.avatarUrl)
+                .then((success) => {
+                    if (success === undefined) {
+                        toastStore.showFailureToast(i18nKey("Unable to register webhook"));
+                    } else {
+                        webhook.current = {
+                            id: success.id,
+                            name: webhook.current.name,
+                            secret: success.secret,
+                            avatarUrl: success.avatarUrl,
+                        };
+                        webhook.original = { ...webhook.current };
+                        step = "registered";
+                    }
+                })
+                .finally(() => (busy = false));
+        }
+    }
+
+    function update() {
+        busyUpdate = true;
+        if (valid && dirty) {
+            client
+                .updateWebhook(
+                    chatId,
+                    webhook.current,
+                    nameDirty ? webhook.current.name : undefined,
+                    avatarDirty
+                        ? webhook.current.avatarUrl !== undefined
+                            ? { value: webhook.current.avatarUrl }
+                            : "set_to_none"
+                        : undefined,
+                )
+                .then((success) => {
+                    if (!success) {
+                        toastStore.showFailureToast(i18nKey("Unable to update webhook details"));
+                    } else {
+                        webhook.original = { ...webhook.current };
+                    }
+                })
+                .finally(() => (busyUpdate = false));
+        }
+    }
+
+    function regenerate() {
+        busy = true;
+        client
+            .regenerateWebhook(chatId, webhook.original.id)
+            .then((success) => {
+                if (success === undefined) {
+                    toastStore.showFailureToast(i18nKey("Unable to regenerate webhook"));
+                } else {
+                    webhook.current.secret = success;
+                    webhook.original.secret = success;
+                }
+            })
+            .finally(() => (busy = false));
+    }
+
+    function onSubmit(e: Event) {
+        e.preventDefault();
+    }
+
+    function avatarSelected(detail: { url: string; data: Uint8Array }) {
+        webhook.current.avatarUrl = detail.url;
+    }
+
+    function copy() {
+        copyToClipboard(url ?? "").then((success) => {
+            if (success) {
+                toastStore.showSuccessToast(i18nKey("copiedToClipboard"));
+            } else {
+                toastStore.showFailureToast(
+                    i18nKey("failedToCopyToClipboard", {
+                        url,
+                    }),
+                );
+            }
+        });
+    }
+</script>
+
+<ModalContent {onClose}>
+    {#snippet header()}
+        <div class="header">
+            <Translatable resourceKey={titleKey}></Translatable>
+        </div>
+    {/snippet}
+    {#snippet body()}
+        <div class="body">
+            <form onsubmit={onSubmit} class="webhook-form">
+                <Legend label={i18nKey("webhook.avatarLabel")} />
+                <div class="photo">
+                    <EditableAvatar
+                        overlayIcon
+                        size={"medium"}
+                        image={webhook.current.avatarUrl}
+                        onImageSelected={avatarSelected} />
+                </div>
+
+                <Legend
+                    required
+                    label={i18nKey("webhook.nameLabel")}
+                    rules={step !== "registered" ? i18nKey("webhook.nameRules") : undefined}
+                ></Legend>
+                <ValidatingInput
+                    minlength={3}
+                    maxlength={15}
+                    disabled={step === "registered"}
+                    invalid={name_errors.length > 0}
+                    placeholder={i18nKey("webhook.namePlaceholder")}
+                    error={name_errors}
+                    bind:value={webhook.current.name}>
+                </ValidatingInput>
+            </form>
+
+            {#if step !== "register" && url !== undefined}
+                {#if step === "update"}
+                    <ButtonGroup>
+                        <Button
+                            onClick={update}
+                            disabled={busyUpdate || !valid || !dirty}
+                            loading={busyUpdate}
+                            small={!$mobileWidth}
+                            tiny={$mobileWidth}>
+                            <Translatable resourceKey={i18nKey("webhook.updateAction")} />
+                        </Button>
+                    </ButtonGroup>
+                {/if}
+                <hr />
+                <div class="url">
+                    <div class="title">
+                        <Translatable resourceKey={i18nKey("webhook.urlLabel")} />
+                    </div>
+                    <div class="copy" title={$_("copyToClipboard")} onclick={copy}>
+                        <ContentCopy size={$iconSize} color={"var(--icon-txt)"} />
+                    </div>
+                </div>
+                {url}
+            {/if}
+        </div>
+    {/snippet}
+    {#snippet footer()}
+        <div class="footer">
+            <ButtonGroup>
+                <Button secondary small={!$mobileWidth} tiny={$mobileWidth} onClick={onClose}>
+                    <Translatable
+                        resourceKey={step !== "register" && !dirty
+                            ? i18nKey("close")
+                            : i18nKey("cancel")} />
+                </Button>
+                <Button
+                    onClick={step === "update" ? regenerate : step === "register" ? register : copy}
+                    disabled={busy || (step === "register" && (!valid || !dirty))}
+                    loading={busy}
+                    small={!$mobileWidth}
+                    tiny={$mobileWidth}>
+                    <Translatable
+                        resourceKey={step === "update"
+                            ? i18nKey("webhook.regenerateAction")
+                            : step === "register"
+                              ? i18nKey("webhook.registerAction")
+                              : i18nKey("copy")} />
+                </Button>
+            </ButtonGroup>
+        </div>
+    {/snippet}
+</ModalContent>
+
+<style lang="scss">
+    .webhook-form {
+        :global(.input-wrapper) {
+            margin-bottom: $sp5;
+        }
+    }
+    .url {
+        display: flex;
+        align-items: center;
+        gap: $sp3;
+        margin-bottom: $sp5;
+
+        .title {
+            @include font(bold, normal, fs-130, 29);
+            @include mobile() {
+                @include font(bold, normal, fs-120, 29);
+            }
+        }
+
+        .copy {
+            display: flex;
+            cursor: pointer;
+        }
+    }
+
+    hr {
+        margin: $sp5 0;
+        color: var(--bd);
+    }
+
+    .photo {
+        max-width: toRem(100);
+        margin-bottom: $sp3;
+    }
+</style>
diff --git a/frontend/app/src/components/bots/WithBotManagement.svelte b/frontend/app/src/desktop/features/bots/WithBotManagement.svelte
similarity index 98%
rename from frontend/app/src/components/bots/WithBotManagement.svelte
rename to frontend/app/src/desktop/features/bots/WithBotManagement.svelte
index dfe420187f..94f2f6bf42 100644
--- a/frontend/app/src/components/bots/WithBotManagement.svelte
+++ b/frontend/app/src/desktop/features/bots/WithBotManagement.svelte
@@ -12,7 +12,7 @@
         type GrantedBotPermissions,
         type Level,
     } from "@shared";
-    import { navigate } from "@utils/navigation";
+    import { navigate } from "@src/utils/navigation";
     import { getContext, type Snippet } from "svelte";
     import BotSummary from "./BotSummary.svelte";
 
diff --git a/frontend/app/src/components/home/profile/BotBadge.svelte b/frontend/app/src/desktop/features/bots/exports/BotBadge.svelte
similarity index 100%
rename from frontend/app/src/components/home/profile/BotBadge.svelte
rename to frontend/app/src/desktop/features/bots/exports/BotBadge.svelte
diff --git a/frontend/app/src/desktop/features/bots/install/BotInstaller.svelte b/frontend/app/src/desktop/features/bots/install/BotInstaller.svelte
new file mode 100644
index 0000000000..f81903d042
--- /dev/null
+++ b/frontend/app/src/desktop/features/bots/install/BotInstaller.svelte
@@ -0,0 +1,177 @@
+<script lang="ts">
+    import {
+        type BotInstallationLocation,
+        definitionToPermissions,
+        type ExternalBotLike,
+        type GrantedBotPermissions,
+        type Level,
+        mobileWidth,
+        OpenChat,
+        type ReadonlyMap,
+        type ResourceKey,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import BotProperties from "./BotProperties.svelte";
+    import ChoosePermissions from "./ChoosePermissions.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    type Step = "choose_command_permissions" | "choose_autonomous_permissions" | "unknown";
+
+    interface Props {
+        location: BotInstallationLocation;
+        level: Level;
+        bot: ExternalBotLike;
+        onClose: (installed: boolean) => void;
+        installedBots: ReadonlyMap<string, GrantedBotPermissions>;
+    }
+
+    let { location, bot, onClose, level, installedBots }: Props = $props();
+    let requestedPermissions = $derived(definitionToPermissions(bot.definition));
+    let grantedPermissions = $state(filterByLocation(definitionToPermissions(bot.definition)));
+
+    let busy = $state(false);
+    let step = $state<Step>(firstStep());
+
+    function filterByLocation(perm: GrantedBotPermissions): GrantedBotPermissions {
+        if (level === "group") {
+            perm.command.communityPermissions = [];
+            if (perm.autonomous !== undefined) {
+                perm.autonomous.communityPermissions = [];
+            }
+        }
+        return perm;
+    }
+
+    function firstStep(): Step {
+        if (bot.definition.commands.length > 0) {
+            return "choose_command_permissions";
+        } else if (bot.definition.autonomousConfig !== undefined) {
+            return "choose_autonomous_permissions";
+        } else {
+            return "unknown";
+        }
+    }
+
+    function nextStep(current: Step) {
+        switch (current) {
+            case "choose_command_permissions":
+                if (bot.definition.autonomousConfig !== undefined) {
+                    step = "choose_autonomous_permissions";
+                } else {
+                    busy = true;
+                    install(() => onClose(true));
+                }
+                break;
+            case "choose_autonomous_permissions":
+                busy = true;
+                install();
+                break;
+        }
+    }
+
+    function install(then?: () => void) {
+        if (installedBots.has(bot.id)) {
+            if (then) {
+                then();
+            } else {
+                onClose(true);
+            }
+        } else {
+            client
+                .installBot(location, bot.id, {
+                    command: grantedPermissions.command,
+                    autonomous: grantedPermissions.autonomous,
+                })
+                .then((success) => {
+                    if (!success) {
+                        toastStore.showFailureToast(i18nKey("bots.add.failure"));
+                    } else {
+                        if (then) {
+                            then();
+                        } else {
+                            onClose(true);
+                        }
+                    }
+                });
+        }
+    }
+</script>
+
+<Overlay>
+    <ModalContent>
+        {#snippet header()}
+            <div class="header">
+                <Translatable resourceKey={i18nKey("bots.add.title", undefined, level, true)}
+                ></Translatable>
+            </div>
+        {/snippet}
+        {#snippet body()}
+            <div class="body">
+                <BotProperties installing={busy} {grantedPermissions} {bot}>
+                    {#if step === "choose_command_permissions"}
+                        <ChoosePermissions
+                            {level}
+                            title={i18nKey("bots.add.chooseCommandPermissions")}
+                            subtitle={i18nKey("bots.add.commandPermissionsInfo")}
+                            bind:granted={grantedPermissions.command}
+                            requested={requestedPermissions.command} />
+                    {:else if step === "choose_autonomous_permissions"}
+                        <ChoosePermissions
+                            {level}
+                            title={i18nKey("bots.add.chooseAutonomousPermissions")}
+                            subtitle={i18nKey("bots.add.autonomousPermissionsInfo")}
+                            bind:granted={grantedPermissions.autonomous!}
+                            requested={requestedPermissions.autonomous!} />
+                    {/if}
+                </BotProperties>
+            </div>
+        {/snippet}
+        {#snippet footer()}
+            <div class="footer">
+                <ButtonGroup>
+                    {#if step === "choose_command_permissions" && bot.definition.autonomousConfig !== undefined}
+                        {@render button(i18nKey("bots.add.next"), () => nextStep(step))}
+                    {:else}
+                        {@render button(i18nKey("cancel"), () => onClose(false), true)}
+                        {@render button(i18nKey("bots.add.install"), () => nextStep(step))}
+                    {/if}
+                </ButtonGroup>
+            </div>
+        {/snippet}
+    </ModalContent>
+</Overlay>
+
+{#snippet button(
+    txt: ResourceKey,
+    click: () => void,
+    secondary = false,
+    disabled = busy,
+    loading = busy,
+)}
+    <Button
+        {secondary}
+        small={!$mobileWidth}
+        tiny={$mobileWidth}
+        {disabled}
+        {loading}
+        onClick={click}>
+        <Translatable resourceKey={txt} />
+    </Button>
+{/snippet}
+
+<style lang="scss">
+    .body {
+        display: flex;
+        justify-content: center;
+        gap: 12px;
+        flex-direction: column;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/bots/install/BotProperties.svelte b/frontend/app/src/desktop/features/bots/install/BotProperties.svelte
new file mode 100644
index 0000000000..3e19593d9c
--- /dev/null
+++ b/frontend/app/src/desktop/features/bots/install/BotProperties.svelte
@@ -0,0 +1,188 @@
+<script lang="ts">
+    import Avatar from "@src/desktop/shared/Avatar.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import type { ExternalBotLike, GrantedBotPermissions, OpenChat } from "@client";
+    import { AvatarSize, allUsersStore, currentUserIdStore, mobileWidth } from "@client";
+    import { getContext, type Snippet } from "svelte";
+    import BotAvatar from "@src/desktop/features/bots/BotAvatar.svelte";
+    import BotCommands from "@src/desktop/features/bots/BotCommands.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        bot: ExternalBotLike;
+        grantedPermissions?: GrantedBotPermissions;
+        installing: boolean;
+        padded?: boolean;
+        onClick?: (match: ExternalBotLike) => void;
+        children?: Snippet;
+        showAvatar?: boolean;
+        showCommands?: boolean;
+    }
+
+    let {
+        bot,
+        grantedPermissions,
+        installing,
+        padded = false,
+        onClick,
+        children,
+        showAvatar = !$mobileWidth,
+        showCommands = true,
+    }: Props = $props();
+    let owner = $derived($allUsersStore.get(bot.ownerId));
+    let isPublic = $derived(
+        bot.kind === "external_bot" && bot.registrationStatus.kind === "public",
+    );
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+    class="props"
+    class:clickable={onClick !== undefined}
+    class:padded
+    onclick={() => onClick?.(bot)}>
+    {#if showAvatar}
+        <span class="avatar">
+            <BotAvatar {bot} />
+        </span>
+    {/if}
+    <div class="details">
+        <div class="bot-name">
+            <h4>
+                <div class={`img ${isPublic ? "public" : "private"}`}></div>
+                {bot.name}
+            </h4>
+            {#if owner}
+                <div class="owner">
+                    <Avatar url={client.userAvatarUrl(owner)} size={AvatarSize.Tiny} />
+                    <span class="username">{owner.username}</span>
+                </div>
+            {/if}
+            {#if installing}
+                <div class="installing"></div>
+            {/if}
+        </div>
+        <div class="bot-desc">
+            <Markdown inline={false} text={bot.definition.description} />
+        </div>
+        {#if bot.ownerId === $currentUserIdStore}
+            <div class="bot-id">
+                bot id: {bot.id}
+            </div>
+        {/if}
+        {#if showCommands}
+            <BotCommands {grantedPermissions} commands={bot.definition.commands} />
+        {/if}
+
+        {@render children?.()}
+    </div>
+</div>
+
+<style lang="scss">
+    .props {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 12px;
+
+        &.clickable {
+            cursor: pointer;
+        }
+
+        &.padded {
+            padding: $sp4;
+            transition:
+                background-color ease-in-out 100ms,
+                border-color ease-in-out 100ms;
+            /* @media (hover: hover) {
+                &:hover {
+                    background-color: var(--members-hv);
+                }
+            } */
+
+            @include mobile() {
+                padding: $sp3 toRem(10);
+            }
+        }
+    }
+
+    .avatar {
+        flex: 0 0 50px;
+        position: relative;
+        align-self: start;
+    }
+
+    .installing {
+        margin-left: $sp3;
+        @include loading-spinner(1em, 0.5em, var(--button-spinner), "/assets/plain-spinner.svg");
+    }
+
+    .details {
+        display: flex;
+        gap: $sp2;
+        flex: 1;
+        flex-direction: column;
+        @include font(book, normal, fs-100);
+
+        .bot-name {
+            @include ellipsis();
+            display: flex;
+            gap: $sp3;
+            @include font(book, normal, fs-110);
+
+            h4 {
+                display: flex;
+                gap: $sp2;
+                align-items: center;
+            }
+        }
+
+        .bot-desc {
+            @include font(light, normal, fs-100);
+            color: var(--txt-light);
+            margin-bottom: $sp3;
+            max-height: 300px;
+            overflow: auto;
+        }
+    }
+
+    .owner {
+        padding: $sp1 $sp3;
+        border: var(--bw) solid var(--bd);
+        border-radius: $sp2;
+        display: flex;
+        gap: $sp2;
+        align-items: center;
+        color: var(--txt-light);
+        @include font(light, normal, fs-90);
+
+        .username {
+            flex: auto;
+        }
+    }
+
+    .img {
+        background-repeat: no-repeat;
+        $size: 12px;
+        flex: 0 0 $size;
+        width: $size;
+        height: $size;
+
+        &.public {
+            background-image: url("/assets/unlocked.svg");
+        }
+
+        &.private {
+            background-image: url("/assets/locked.svg");
+        }
+    }
+
+    .bot-id {
+        @include font(light, normal, fs-70);
+        color: var(--txt-light);
+        font: courier;
+        margin-bottom: $sp3;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/bots/install/ChoosePermissions.svelte b/frontend/app/src/desktop/features/bots/install/ChoosePermissions.svelte
new file mode 100644
index 0000000000..0fa698a8eb
--- /dev/null
+++ b/frontend/app/src/desktop/features/bots/install/ChoosePermissions.svelte
@@ -0,0 +1,109 @@
+<script lang="ts">
+    import {
+        i18nKey,
+        type ExternalBotPermissions,
+        type Level,
+        type ResourceKey,
+    } from "@client";
+    import Tabs from "@src/desktop/features/bots/Tabs.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import Checkbox from "@src/desktop/shared/Checkbox.svelte";
+    import Legend from "@src/desktop/shared/Legend.svelte";
+    import { togglePermission } from "@src/utils/bots";
+
+    interface Props {
+        level: Level;
+        title: ResourceKey;
+        subtitle: ResourceKey;
+        granted: ExternalBotPermissions;
+        requested: ExternalBotPermissions;
+    }
+
+    let { granted = $bindable(), requested, title, subtitle, level }: Props = $props();
+
+    let initialIndex = $derived(level === "group" ? 1 : 2);
+
+    function filterTabs<T>(tabs: T[]): T[] {
+        if (level === "group") {
+            return tabs.slice(1);
+        }
+        return tabs;
+    }
+</script>
+
+{#snippet chatTab()}
+    {#if requested.chatPermissions.length === 0}
+        <Translatable resourceKey={i18nKey("bots.add.noPermissions")}></Translatable>
+    {:else}
+        {#each requested.chatPermissions as perm}
+            <Checkbox
+                id={`chat_permission_${perm}`}
+                label={i18nKey(`permissions.${perm}`)}
+                checked={granted.chatPermissions.includes(perm)}
+                onChange={() => togglePermission(granted, "chatPermissions", perm)}
+                align={"start"}>
+            </Checkbox>
+        {/each}
+    {/if}
+{/snippet}
+{#snippet communityTab()}
+    {#if requested.communityPermissions.length === 0}
+        <Translatable resourceKey={i18nKey("bots.add.noPermissions")}></Translatable>
+    {:else}
+        {#each requested.communityPermissions as perm}
+            <Checkbox
+                id={`community_permission_${perm}`}
+                label={i18nKey(`permissions.${perm}`)}
+                checked={granted.communityPermissions.includes(perm)}
+                onChange={() => togglePermission(granted, "communityPermissions", perm)}
+                align={"start"}>
+            </Checkbox>
+        {/each}
+    {/if}
+{/snippet}
+{#snippet messageTab()}
+    {#if requested.messagePermissions.length === 0}
+        <Translatable resourceKey={i18nKey("bots.add.noPermissions")}></Translatable>
+    {:else}
+        {#each requested.messagePermissions as perm}
+            <Checkbox
+                id={`message_permission_${perm}`}
+                label={i18nKey(`permissions.messagePermissions.${perm}`)}
+                checked={granted.messagePermissions.includes(perm)}
+                onChange={() => togglePermission(granted, "messagePermissions", perm)}
+                align={"start"}>
+            </Checkbox>
+        {/each}
+    {/if}
+{/snippet}
+
+<div class="permissions">
+    <Legend large label={title}></Legend>
+    <p class="info">
+        <Translatable resourceKey={subtitle}></Translatable>
+    </p>
+    <Tabs
+        {initialIndex}
+        tabs={filterTabs([
+            {
+                title: i18nKey("bots.builder.permScopeCommunity"),
+                snippet: communityTab,
+            },
+            {
+                title: i18nKey("bots.builder.permScopeChat"),
+                snippet: chatTab,
+            },
+            {
+                title: i18nKey("bots.builder.permScopeMessage"),
+                snippet: messageTab,
+            },
+        ])}></Tabs>
+</div>
+
+<style lang="scss">
+    .info {
+        @include font(book, normal, fs-80);
+        color: var(--txt-light);
+        margin-bottom: $sp4;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/calendar/Calendar.svelte b/frontend/app/src/desktop/features/calendar/Calendar.svelte
new file mode 100644
index 0000000000..ecc25334f1
--- /dev/null
+++ b/frontend/app/src/desktop/features/calendar/Calendar.svelte
@@ -0,0 +1,179 @@
+<script lang="ts">
+    import { iconSize } from "@client";
+    import { type Snippet } from "svelte";
+    import { locale } from "svelte-i18n";
+    import PrevIcon from "svelte-material-icons/ChevronLeft.svelte";
+    import NextIcon from "svelte-material-icons/ChevronRight.svelte";
+    import { translationCodes } from "@src/i18n/i18n";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import { calendarState, type DateRange } from "./calendarState.svelte";
+    import { getMonthCalendar, getTitleText, isSameDay } from "@src/ui/calendarUtils";
+    import { weekDays } from "./weekdays";
+
+    interface Props {
+        monthTitleTemplate?: Snippet;
+        dayTemplate?: Snippet<[Date]>;
+        dateSelected?: (range: DateRange) => void;
+    }
+
+    let { monthTitleTemplate, dayTemplate, dateSelected }: Props = $props();
+
+    let today = $state(new Date());
+    let showDate = $state(new Date());
+    let dates = $state<Date[][]>([]);
+    let translatedLocale = $derived(translationCodes[$locale || "en"] || "en");
+
+    $effect(() => getDates(showDate));
+
+    function endOfDay(date: Date): Date {
+        return new Date(date.getTime() + 24 * 60 * 60 * 1000 - 1);
+    }
+
+    function getDates(start: Date) {
+        console.log("Getting dates for start date: ", start);
+        const resp = getMonthCalendar(start);
+        calendarState.monthTitle = getTitleText(resp.year, resp.month, translatedLocale);
+        dates = resp.dates;
+        calendarState.selectedMonth = resp.month;
+        const allDates = resp.dates.flatMap((d) => d);
+        const finalDay = allDates[allDates.length - 1];
+        const range: DateRange = {
+            date: start,
+            range: [allDates[0], endOfDay(finalDay)],
+        };
+        calendarState.selectedRange = range;
+        dateSelected?.(range);
+    }
+
+    function previousMonth() {
+        const year = showDate.getFullYear();
+        const month = showDate.getMonth();
+        if (month - 1 < 0) {
+            showDate = new Date(year - 1, 11, 1);
+        } else {
+            showDate = new Date(year, month - 1, 1);
+        }
+    }
+    function nextMonth() {
+        const year = showDate.getFullYear();
+        const month = showDate.getMonth();
+        if (month + 1 > 11) {
+            showDate = new Date(year + 1, 0, 1);
+        } else {
+            showDate = new Date(year, month + 1, 1);
+        }
+    }
+</script>
+
+<div class={"calendar-wrapper"}>
+    <div class="calendar-header">
+        <HoverIcon onclick={previousMonth}>
+            <PrevIcon size={$iconSize} color={"var(--icon-txt"} />
+        </HoverIcon>
+        {#if monthTitleTemplate}
+            {@render monthTitleTemplate()}
+        {:else}
+            <h3>{calendarState.monthTitle}</h3>
+        {/if}
+        <HoverIcon onclick={nextMonth}>
+            <NextIcon size={$iconSize} color={"var(--icon-txt"} />
+        </HoverIcon>
+    </div>
+    <div class="week-days-row">
+        {#each $weekDays as [day, d]}
+            <div title={day} class="block weekday-name-block">
+                {d}
+            </div>
+        {/each}
+    </div>
+    <div class="daily-date-container">
+        {#each dates as week}
+            <div class="week-row">
+                {#each week as day}
+                    <div
+                        class:disabled={day.getMonth() !== calendarState.selectedMonth}
+                        class:today={typeof day === "string" ? false : isSameDay(today, day)}
+                        class="block daily-date-block pointer">
+                        {#if dayTemplate}
+                            {@render dayTemplate(day)}
+                        {:else}
+                            {day.getDate()}
+                        {/if}
+                    </div>
+                {/each}
+            </div>
+        {/each}
+    </div>
+</div>
+
+<style lang="scss">
+    .calendar-wrapper {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        border-radius: var(--rd);
+        margin-bottom: $sp4;
+    }
+
+    .block {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-height: toRem(50);
+        @include font(medium, normal, fs-100);
+        flex-grow: 0;
+        flex-shrink: 0;
+        border-left: var(--bw) solid var(--bd);
+        border-bottom: var(--bw) solid var(--bd);
+
+        &:last-child {
+            border-right: var(--bw) solid var(--bd);
+        }
+    }
+
+    .calendar-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: $sp4;
+        border: solid var(--bw) var(--bd);
+    }
+
+    .week-days-row,
+    .week-row {
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    .weekday-name-block,
+    .daily-date-block {
+        width: calc(100% / 7);
+        font-variant-numeric: tabular-nums;
+    }
+
+    .daily-date-block {
+        transition: background 0.25s ease-in-out;
+        &:hover:not(.disabled) {
+            background: rgba(255, 255, 255, 0.1);
+        }
+    }
+
+    .today {
+        font-weight: 700;
+        text-decoration: underline;
+    }
+
+    .disabled {
+        color: var(--txt-light);
+    }
+
+    .weekday-name-block {
+        font-weight: bold;
+    }
+
+    .pointer {
+        cursor: pointer;
+    }
+</style>
diff --git a/frontend/app/src/components/calendar/calendarState.svelte.ts b/frontend/app/src/desktop/features/calendar/calendarState.svelte.ts
similarity index 100%
rename from frontend/app/src/components/calendar/calendarState.svelte.ts
rename to frontend/app/src/desktop/features/calendar/calendarState.svelte.ts
diff --git a/frontend/app/src/desktop/features/calendar/weekdays.ts b/frontend/app/src/desktop/features/calendar/weekdays.ts
new file mode 100644
index 0000000000..3043d41f50
--- /dev/null
+++ b/frontend/app/src/desktop/features/calendar/weekdays.ts
@@ -0,0 +1,122 @@
+import { locale } from "svelte-i18n";
+import { derived } from "svelte/store";
+import { translationCodes } from "@src/i18n/i18n";
+
+type WeekDay = [string, string];
+type WeekDayMap = Record<string, WeekDay[]>;
+
+const map: WeekDayMap = {
+    "zh-cn": [
+        ["星期日", "日"],
+        ["星期一", "一"],
+        ["星期二", "二"],
+        ["星期三", "三"],
+        ["星期四", "四"],
+        ["星期五", "五"],
+        ["星期六", "六"],
+    ],
+    de: [
+        ["Sonntag", "So"],
+        ["Montag", "Mo"],
+        ["Dienstag", "Di"],
+        ["Mittwoch", "Mi"],
+        ["Donnerstag", "Do"],
+        ["Freitag", "Fr"],
+        ["Samstag", "Sa"],
+    ],
+    en: [
+        ["Sunday", "Su"],
+        ["Monday", "Mo"],
+        ["Tuesday", "Tu"],
+        ["Wednesday", "We"],
+        ["Thursday", "Th"],
+        ["Friday", "Fr"],
+        ["Saturday", "Sa"],
+    ],
+    es: [
+        ["Domingo", "Do"],
+        ["Lunes", "Lu"],
+        ["Martes", "Ma"],
+        ["Miércoles", "Mi"],
+        ["Jueves", "Ju"],
+        ["Viernes", "Vi"],
+        ["Sábado", "Sa"],
+    ],
+    fr: [
+        ["Dimanche", "Di"],
+        ["Lundi", "Lu"],
+        ["Mardi", "Ma"],
+        ["Mercredi", "Me"],
+        ["Jeudi", "Je"],
+        ["Vendredi", "Ve"],
+        ["Samedi", "Sa"],
+    ],
+    hi: [
+        ["रविवार", "र"],
+        ["सोमवार", "सो"],
+        ["मंगलवार", "मं"],
+        ["बुधवार", "बु"],
+        ["गुरुवार", "गु"],
+        ["शुक्रवार", "शु"],
+        ["शनिवार", "श"],
+    ],
+    it: [
+        ["Domenica", "Do"],
+        ["Lunedì", "Lu"],
+        ["Martedì", "Ma"],
+        ["Mercoledì", "Me"],
+        ["Giovedì", "Gi"],
+        ["Venerdì", "Ve"],
+        ["Sabato", "Sa"],
+    ],
+    iw: [
+        ["יום ראשון", "א"],
+        ["יום שני", "ב"],
+        ["יום שלישי", "ג"],
+        ["יום רביעי", "ד"],
+        ["יום חמישי", "ה"],
+        ["יום שישי", "ו"],
+        ["שבת", "ש"],
+    ],
+    ja: [
+        ["日曜日", "日"],
+        ["月曜日", "月"],
+        ["火曜日", "火"],
+        ["水曜日", "水"],
+        ["木曜日", "木"],
+        ["金曜日", "金"],
+        ["土曜日", "土"],
+    ],
+    ru: [
+        ["Воскресенье", "Вс"],
+        ["Понедельник", "Пн"],
+        ["Вторник", "Вт"],
+        ["Среда", "Ср"],
+        ["Четверг", "Чт"],
+        ["Пятница", "Пт"],
+        ["Суббота", "Сб"],
+    ],
+    uk: [
+        ["Неділя", "Нд"],
+        ["Понеділок", "Пн"],
+        ["Вівторок", "Вт"],
+        ["Середа", "Ср"],
+        ["Четвер", "Чт"],
+        ["П’ятниця", "Пт"],
+        ["Субота", "Сб"],
+    ],
+    vi: [
+        ["Chủ Nhật", "CN"],
+        ["Thứ Hai", "T2"],
+        ["Thứ Ba", "T3"],
+        ["Thứ Tư", "T4"],
+        ["Thứ Năm", "T5"],
+        ["Thứ Sáu", "T6"],
+        ["Thứ Bảy", "T7"],
+    ],
+};
+
+export const weekDays = derived(locale, (locale) => {
+    const translated = translationCodes[locale || "en"] || "en";
+    return map[translated] ?? map["en"];
+});
diff --git a/frontend/app/src/components/home/video/ActiveBroadcastSummary.svelte b/frontend/app/src/desktop/features/calls/ActiveBroadcastSummary.svelte
similarity index 90%
rename from frontend/app/src/components/home/video/ActiveBroadcastSummary.svelte
rename to frontend/app/src/desktop/features/calls/ActiveBroadcastSummary.svelte
index 39a9dc6022..df3d9ad278 100644
--- a/frontend/app/src/components/home/video/ActiveBroadcastSummary.svelte
+++ b/frontend/app/src/desktop/features/calls/ActiveBroadcastSummary.svelte
@@ -7,12 +7,12 @@
         selectedChatSummaryStore,
         type OpenChat,
     } from "@client";
-    import { navigate } from "@utils/navigation";
+    import { navigate } from "@src/utils/navigation";
     import { getContext } from "svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { activeVideoCall } from "../../../stores/video";
-    import Button from "../../Button.svelte";
-    import Translatable from "../../Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { activeVideoCall } from "@src/stores/video";
+    import Button from "@src/ui/Button.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/desktop/features/calls/ActiveCall.svelte b/frontend/app/src/desktop/features/calls/ActiveCall.svelte
new file mode 100644
index 0000000000..b28c0ab960
--- /dev/null
+++ b/frontend/app/src/desktop/features/calls/ActiveCall.svelte
@@ -0,0 +1,404 @@
+<script lang="ts">
+    import type { DailyThemeConfig } from "@daily-co/daily-js";
+    import daily, { type DailyCall } from "@daily-co/daily-js";
+    import {
+        allUsersStore,
+        chatIdentifiersEqual,
+        communitiesStore,
+        currentUserIdStore,
+        currentUserStore,
+        mobileWidth,
+        NoMeetingToJoin,
+        OpenChat,
+        selectedChatSummaryStore,
+        selectedCommunitySummaryStore,
+        type AccessTokenType,
+        type ChatIdentifier,
+        type VideoCallType,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { videoCameraOn, videoMicOn, videoSpeakerView } from "@src/stores/settings";
+    import { toastStore } from "@src/stores/toast";
+    import {
+        activeVideoCall,
+        camera,
+        hasPresence,
+        microphone,
+        sharing,
+        type InterCallMessage,
+    } from "@src/stores/video";
+    import { currentTheme } from "@src/theme/themes";
+    import type { Theme } from "@src/theme/types";
+    import { removeQueryStringParam } from "@src/utils/urls";
+    import AreYouSure from "@src/desktop/shared/AreYouSure.svelte";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import ActiveCallHeader from "./ActiveCallHeader.svelte";
+
+    interface Props {
+        onClearSelection: () => void;
+        showLandingPage: boolean;
+    }
+
+    let { onClearSelection, showLandingPage }: Props = $props();
+
+    const client = getContext<OpenChat>("client");
+
+    let iframeContainer: HTMLDivElement | undefined = $state();
+    let confirmSwitchTo:
+        | { chatId: ChatIdentifier; callType: VideoCallType; join: boolean }
+        | undefined = $state(undefined);
+    let hostEnded = $state(false);
+    let denied = $state(false);
+    let askedToSpeak = $state(false);
+    let call: DailyCall | undefined = $state();
+    let chat = $derived(normaliseChatSummary($activeVideoCall?.chatId));
+    let threadOpen = $derived($activeVideoCall?.threadOpen ?? false);
+    let participantsOpen = $derived($activeVideoCall?.participantsOpen ?? false);
+
+    $effect(() => {
+        activeVideoCall.changeTheme(getThemeConfig($currentTheme));
+    });
+
+    function normaliseChatSummary(chatId: ChatIdentifier | undefined) {
+        if (chatId) {
+            const chat = client.lookupChatSummary(chatId);
+            if (chat) {
+                switch (chat.kind) {
+                    case "direct_chat":
+                        const them = $allUsersStore.get(chat.them.userId);
+                        return {
+                            chatId,
+                            name: client.displayName(them),
+                            avatarUrl: client.userAvatarUrl(them),
+                            userId: chat.them,
+                            videoCallInProgress: chat.videoCallInProgress,
+                        };
+                    case "group_chat":
+                        return {
+                            chatId,
+                            name: chat.name,
+                            avatarUrl: client.groupAvatarUrl(chat),
+                            userId: undefined,
+                            videoCallInProgress: chat.videoCallInProgress,
+                        };
+                    case "channel":
+                        return {
+                            chatId,
+                            name: `${
+                                $communitiesStore.get({
+                                    kind: "community",
+                                    communityId: chat.id.communityId,
+                                })?.name
+                            } > ${chat.name}`,
+                            avatarUrl: client.groupAvatarUrl(chat, $selectedCommunitySummaryStore),
+                            userId: undefined,
+                            videoCallInProgress: chat.videoCallInProgress,
+                        };
+                }
+            }
+        }
+    }
+
+    export async function startOrJoinVideoCall(
+        chatId: ChatIdentifier,
+        callType: VideoCallType,
+        join: boolean,
+    ) {
+        if (iframeContainer === undefined) return;
+
+        try {
+            if ($activeVideoCall !== undefined) {
+                confirmSwitchTo = { chatId, callType, join };
+                return;
+            }
+
+            // close and threads we have open in the right panel
+            client.filterRightPanelHistory((panel) => panel.kind !== "message_thread_panel");
+            removeQueryStringParam("open");
+
+            activeVideoCall.joining(chatId, callType);
+
+            const accessType: AccessTokenType = join
+                ? { kind: "join_video_call", chatId }
+                : { kind: "start_video_call", callType, chatId };
+
+            // first we need to get access jwt from the oc backend
+            const { token, roomName, messageId, joining } = await client.getVideoChatAccessToken(
+                chatId,
+                accessType,
+            );
+
+            if (call !== undefined) {
+                await call.destroy();
+                call = undefined;
+            }
+
+            call = daily.createFrame(iframeContainer, {
+                token,
+                activeSpeakerMode: callType === "broadcast" ? true : $videoSpeakerView,
+                showLeaveButton: false,
+                showFullscreenButton: false,
+                startVideoOff: !$videoCameraOn,
+                startAudioOff: !$videoMicOn,
+                iframeStyle: {
+                    width: "100%",
+                    height: "100%",
+                },
+                url: `https://openchat.daily.co/${roomName}`,
+                userName: $currentUserStore.username,
+                theme: getThemeConfig($currentTheme),
+            });
+
+            call.on("app-message", (ev: InterCallMessage | undefined) => {
+                if (chatId.kind === "direct_chat") return;
+
+                if (ev && ev.action === "app-message") {
+                    if (ev.data.kind === "ask_to_speak") {
+                        activeVideoCall.captureAccessRequest(ev.data);
+                    }
+                    if (ev.data.kind === "demote_participant") {
+                        const me = call?.participants().local.session_id;
+                        if (
+                            ev.data.participantId === me &&
+                            $currentUserIdStore === ev.data.userId
+                        ) {
+                            askedToSpeak = false;
+                            client.setVideoCallPresence(chatId, BigInt(messageId), "hidden");
+                        }
+                    }
+                    if (ev.data.kind === "ask_to_speak_response") {
+                        const me = call?.participants().local.session_id;
+                        if (
+                            ev.data.participantId === me &&
+                            $currentUserIdStore === ev.data.userId
+                        ) {
+                            askedToSpeak = false;
+                            denied = !ev.data.approved;
+                            if (ev.data.approved) {
+                                client.setVideoCallPresence(chatId, BigInt(messageId), "default");
+                            }
+                        }
+                    }
+                }
+            });
+
+            // this only fires when *I* leave the meeting
+            call.on("left-meeting", () => {
+                // at this point I have already left the meeting and so participantCount will always report 0
+                // so we can't use it.
+                activeVideoCall.endCall();
+            });
+
+            // this fires when a remote participant leaves the meeting
+            call.on("participant-left", (ev) => {
+                // if the owner leaves, end the call
+                if (ev?.participant.owner && !ev.participant.local && callType === "broadcast") {
+                    hangup();
+                    hostEnded = true;
+                }
+            });
+
+            call.on("joined-meeting", (ev) => {
+                const me = ev?.participants?.local;
+                if (!me) return;
+                if (me.owner) {
+                    activeVideoCall.isOwner(true);
+                }
+            });
+
+            call.on("participant-updated", (ev) => {
+                if (ev?.participant.local) {
+                    microphone.set(ev?.participant.tracks.audio.state !== "off");
+                    camera.set(ev?.participant.tracks.video.state !== "off");
+                    sharing.set(ev?.participant.tracks.screenVideo.state !== "off");
+                    hasPresence.set(ev?.participant.permissions.hasPresence);
+                } else {
+                    if (ev?.participant.user_name === $currentUserStore.username) {
+                        // this means that I have joined the call from somewhere else e.g. another device
+                        hangup();
+                    }
+                }
+            });
+
+            // if we are not joining aka starting we need to tell the other users
+            if (!joining) {
+                client.ringOtherUsers(chatId, messageId, callType);
+            }
+
+            await call.join();
+
+            activeVideoCall.setCall(chatId, BigInt(messageId), call);
+
+            if (joining) {
+                switch (chatId.kind) {
+                    case "direct_chat":
+                        await client.joinVideoCall(chatId, BigInt(messageId));
+                        break;
+                    default:
+                        await client.setVideoCallPresence(
+                            chatId,
+                            BigInt(messageId),
+                            callType === "broadcast" ? "hidden" : "default",
+                        );
+                }
+            }
+        } catch (err) {
+            if (err instanceof NoMeetingToJoin) {
+                toastStore.showSuccessToast(i18nKey("videoCall.noMeetingToJoin"));
+            } else {
+                toastStore.showFailureToast(i18nKey("videoCall.callFailed"), err);
+            }
+            activeVideoCall.endCall();
+            console.error("Unable to start video call: ", err);
+        }
+    }
+
+    function getThemeConfig(theme: Theme): DailyThemeConfig {
+        const dailyTheme = {
+            colors: {
+                accent: `${theme.daily.accent}`,
+                accentText: `${theme.daily.accentText}`,
+                background: `${theme.daily.background}`,
+                backgroundAccent: `${theme.daily.backgroundAccent}`,
+                baseText: `${theme.daily.baseText}`,
+                border: `${theme.daily.border}`,
+                mainAreaBg: `${theme.daily.mainAreaBg}`,
+                mainAreaBgAccent: `${theme.daily.mainAreaBgAccent}`,
+                mainAreaText: `${theme.daily.mainAreaText}`,
+                supportiveText: `${theme.daily.supportiveText}`,
+            },
+        };
+        return dailyTheme;
+    }
+
+    function switchCall(confirmed: boolean): Promise<void> {
+        if (confirmed && confirmSwitchTo) {
+            activeVideoCall.endCall();
+            const { chatId, callType, join } = confirmSwitchTo;
+            window.setTimeout(() => startOrJoinVideoCall(chatId, callType, join), 100);
+        }
+        confirmSwitchTo = undefined;
+        return Promise.resolve();
+    }
+
+    export function askToSpeak() {
+        activeVideoCall.askToSpeak($currentUserIdStore);
+        askedToSpeak = true;
+    }
+
+    export function hangup() {
+        if ($activeVideoCall?.call) {
+            if ($hasPresence) {
+                const present = $activeVideoCall.call.participantCounts().present;
+                if (present === 1) {
+                    // I must be the last person left in the call
+                    client.endVideoCall($activeVideoCall.chatId, $activeVideoCall.messageId);
+                }
+            }
+
+            // this will trigger the left-meeting event which will in turn end the call
+            $activeVideoCall.call.leave();
+            client.popRightPanelHistory();
+        }
+    }
+
+    export function closeThread() {
+        activeVideoCall.threadOpen(false);
+    }
+</script>
+
+{#if confirmSwitchTo}
+    <AreYouSure message={i18nKey("videoCall.switchCall")} action={switchCall} />
+{/if}
+
+{#if hostEnded}
+    <Overlay>
+        <ModalContent hideHeader>
+            {#snippet body()}
+                <div class="host-ended">
+                    <Translatable resourceKey={i18nKey("videoCall.hostEnded")} />
+                </div>
+            {/snippet}
+            {#snippet footer()}
+                <ButtonGroup align={"center"}>
+                    <Button onClick={() => (hostEnded = false)}>
+                        <Translatable resourceKey={i18nKey("close")} />
+                    </Button>
+                </ButtonGroup>
+            {/snippet}
+        </ModalContent>
+    </Overlay>
+{/if}
+
+{#if denied}
+    <Overlay>
+        <ModalContent hideHeader>
+            {#snippet body()}
+                <div class="denied">
+                    <Translatable resourceKey={i18nKey("videoCall.denied")} />
+                </div>
+            {/snippet}
+            {#snippet footer()}
+                <span>
+                    <ButtonGroup align={"center"}>
+                        <Button onClick={() => (denied = false)}>
+                            <Translatable resourceKey={i18nKey("close")} />
+                        </Button>
+                    </ButtonGroup>
+                </span>
+            {/snippet}
+        </ModalContent>
+    </Overlay>
+{/if}
+
+<div
+    id="video-call-container"
+    class="video-call-container"
+    class:visible={$activeVideoCall &&
+        $activeVideoCall.view !== "minimised" &&
+        !showLandingPage &&
+        !(threadOpen && $mobileWidth) &&
+        !(participantsOpen && $mobileWidth) &&
+        chatIdentifiersEqual($activeVideoCall.chatId, $selectedChatSummaryStore?.id)}>
+    {#if chat !== undefined}
+        <ActiveCallHeader
+            {onClearSelection}
+            onHangup={hangup}
+            onAskToSpeak={askToSpeak}
+            {chat}
+            {askedToSpeak} />
+    {/if}
+    <div class="iframe-container" bind:this={iframeContainer}></div>
+</div>
+
+<style lang="scss">
+    :global(.video-call-container .section-header) {
+        background-color: var(--daily-header);
+    }
+
+    .host-ended,
+    .denied {
+        @include font(bold, normal, fs-130);
+        text-align: center;
+    }
+
+    .video-call-container {
+        position: absolute;
+        display: none;
+        flex-direction: column;
+        @include z-index("video-call");
+
+        &.visible {
+            display: flex;
+        }
+    }
+
+    .iframe-container {
+        height: 100%;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/calls/ActiveCallActions.svelte b/frontend/app/src/desktop/features/calls/ActiveCallActions.svelte
new file mode 100644
index 0000000000..81e2068008
--- /dev/null
+++ b/frontend/app/src/desktop/features/calls/ActiveCallActions.svelte
@@ -0,0 +1,200 @@
+<script lang="ts">
+    import { chatListScopeStore, iconSize, mobileWidth, OpenChat, routeForMessage, setRightPanelHistory } from "@client";
+    import { navigate } from "@src/utils/navigation";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import AccountMultiple from "svelte-material-icons/AccountMultiple.svelte";
+    import DotsVertical from "svelte-material-icons/DotsVertical.svelte";
+    import HandFrontLeft from "svelte-material-icons/HandFrontLeft.svelte";
+    import MessageOutline from "svelte-material-icons/MessageOutline.svelte";
+    import PhoneHangup from "svelte-material-icons/PhoneHangup.svelte";
+    import WindowMaximize from "svelte-material-icons/WindowMaximize.svelte";
+    import WindowMinimize from "svelte-material-icons/WindowMinimize.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { activeVideoCall, hasPresence } from "@src/stores/video";
+    import { removeQueryStringParam } from "@src/utils/urls";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import Menu from "@src/desktop/shared/Menu.svelte";
+    import MenuIcon from "@src/desktop/shared/MenuIcon.svelte";
+    import MenuItem from "@src/desktop/shared/MenuItem.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import type { VideoCallChat } from "./callChat";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        askedToSpeak: boolean;
+        chat: VideoCallChat;
+        onAskToSpeak: () => void;
+        onHangup: () => void;
+        onMinimise: () => void;
+        onToggleFullscreen: () => void;
+    }
+
+    let { askedToSpeak, chat, onAskToSpeak, onHangup, onMinimise, onToggleFullscreen }: Props =
+        $props();
+
+    let threadOpen = $derived($activeVideoCall?.threadOpen ?? false);
+    let participantsOpen = $derived($activeVideoCall?.participantsOpen ?? false);
+    let isOwner = $derived($activeVideoCall?.isOwner ?? false);
+
+    function toggleThread() {
+        if (chat.chatId !== undefined && chat.videoCallInProgress?.messageIndex !== undefined) {
+            if (threadOpen) {
+                client.popRightPanelHistory();
+                navigate(removeQueryStringParam("open"));
+            } else {
+                navigate(
+                    `${routeForMessage(
+                        $chatListScopeStore.kind,
+                        { chatId: chat.chatId },
+                        chat.videoCallInProgress?.messageIndex,
+                    )}?open=true`,
+                );
+            }
+            activeVideoCall.threadOpen(!threadOpen);
+        }
+    }
+
+    function toggleParticipants() {
+        if (participantsOpen) {
+            client.popRightPanelHistory();
+        } else {
+            if (
+                $activeVideoCall?.messageId !== undefined &&
+                $activeVideoCall.chatId.kind !== "direct_chat"
+            ) {
+                setRightPanelHistory([
+                    {
+                        kind: "call_participants_panel",
+                        chatId: $activeVideoCall.chatId,
+                        messageId: $activeVideoCall.messageId,
+                        isOwner,
+                    },
+                ]);
+            }
+        }
+        activeVideoCall.participantsOpen(!participantsOpen);
+    }
+</script>
+
+{#if $mobileWidth}
+    {#if $activeVideoCall?.status === "joined"}
+        <MenuIcon position={"bottom"} align={"end"}>
+            {#snippet menuIcon()}
+                <HoverIcon title={$_("chatMenu")}>
+                    <DotsVertical size={$iconSize} color={"var(--icon-txt)"} />
+                </HoverIcon>
+            {/snippet}
+            {#snippet menuItems()}
+                <Menu>
+                    {#if !$hasPresence}
+                        <MenuItem onclick={onAskToSpeak}>
+                            {#snippet icon()}
+                                <HandFrontLeft
+                                    title={$_("videoCall.askToSpeak")}
+                                    size={$iconSize}
+                                    color={askedToSpeak
+                                        ? "var(--icon-selected)"
+                                        : "var(--icon-txt)"} />
+                            {/snippet}
+                            {#snippet text()}
+                                <Translatable resourceKey={i18nKey("videoCall.askToSpeak")} />
+                            {/snippet}
+                        </MenuItem>
+                    {/if}
+                    {#if $activeVideoCall?.messageId !== undefined && $activeVideoCall.chatId.kind !== "direct_chat"}
+                        <MenuItem onclick={toggleParticipants}>
+                            {#snippet icon()}
+                                <AccountMultiple
+                                    size={$iconSize}
+                                    color={participantsOpen
+                                        ? "var(--icon-selected)"
+                                        : "var(--icon-txt)"} />
+                            {/snippet}
+                            {#snippet text()}
+                                <Translatable resourceKey={i18nKey("videoCall.showParticipants")} />
+                            {/snippet}
+                        </MenuItem>
+                    {/if}
+                    {#if chat.chatId && chat.videoCallInProgress?.messageIndex !== undefined}
+                        <MenuItem onclick={toggleThread}>
+                            {#snippet icon()}
+                                <MessageOutline
+                                    size={$iconSize}
+                                    color={threadOpen
+                                        ? "var(--icon-selected)"
+                                        : "var(--icon-txt)"} />
+                            {/snippet}
+                            {#snippet text()}
+                                <Translatable resourceKey={i18nKey("videoCall.chat")} />
+                            {/snippet}
+                        </MenuItem>
+                    {/if}
+                    <MenuItem onclick={onMinimise}>
+                        {#snippet icon()}
+                            <WindowMinimize size={$iconSize} color={"var(--icon-txt)"} />
+                        {/snippet}
+                        {#snippet text()}
+                            <Translatable resourceKey={i18nKey("videoCall.minimise")} />
+                        {/snippet}
+                    </MenuItem>
+                    <MenuItem onclick={onHangup}>
+                        {#snippet icon()}
+                            <PhoneHangup size={$iconSize} color={"var(--vote-no-color)"} />
+                        {/snippet}
+                        {#snippet text()}
+                            <Translatable resourceKey={i18nKey("videoCall.leave")} />
+                        {/snippet}
+                    </MenuItem>
+                </Menu>
+            {/snippet}
+        </MenuIcon>
+    {/if}
+{:else}
+    <div class:joining={$activeVideoCall?.status === "joining"} class="actions">
+        {#if !$hasPresence && $activeVideoCall?.status !== "joining"}
+            <HoverIcon onclick={onAskToSpeak}>
+                <HandFrontLeft
+                    title={$_("videoCall.askToSpeak")}
+                    size={$iconSize}
+                    color={askedToSpeak ? "var(--icon-selected)" : "var(--icon-txt)"} />
+            </HoverIcon>
+        {/if}
+        {#if $activeVideoCall?.messageId !== undefined && $activeVideoCall.chatId.kind !== "direct_chat"}
+            <HoverIcon title={$_("videoCall.showParticipants")} onclick={toggleParticipants}>
+                <AccountMultiple
+                    size={$iconSize}
+                    color={participantsOpen ? "var(--icon-selected)" : "var(--icon-txt)"} />
+            </HoverIcon>
+        {/if}
+        {#if chat.chatId && chat.videoCallInProgress?.messageIndex !== undefined}
+            <HoverIcon title={$_("videoCall.chat")} onclick={toggleThread}>
+                <MessageOutline
+                    size={$iconSize}
+                    color={threadOpen ? "var(--icon-selected)" : "var(--icon-txt)"} />
+            </HoverIcon>
+        {/if}
+        <HoverIcon onclick={onMinimise}>
+            <WindowMinimize size={$iconSize} color={"var(--icon-txt)"} />
+        </HoverIcon>
+        <HoverIcon onclick={onToggleFullscreen}>
+            <WindowMaximize size={$iconSize} color={"var(--icon-txt)"} />
+        </HoverIcon>
+        <HoverIcon title={$_("videoCall.leave")} onclick={onHangup}>
+            <PhoneHangup size={$iconSize} color={"var(--vote-no-color)"} />
+        </HoverIcon>
+    </div>
+{/if}
+
+<style lang="scss">
+    .actions {
+        display: flex;
+        align-items: center;
+        gap: $sp3;
+
+        &.joining {
+            pointer-events: none;
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/calls/ActiveCallHeader.svelte b/frontend/app/src/desktop/features/calls/ActiveCallHeader.svelte
new file mode 100644
index 0000000000..cd9a034487
--- /dev/null
+++ b/frontend/app/src/desktop/features/calls/ActiveCallHeader.svelte
@@ -0,0 +1,113 @@
+<script lang="ts">
+    import { AvatarSize, iconSize, mobileWidth } from "@client";
+    import ArrowLeft from "svelte-material-icons/ArrowLeft.svelte";
+    import ArrowRight from "svelte-material-icons/ArrowRight.svelte";
+    import { rtlStore } from "@src/stores/rtl";
+    import { activeVideoCall } from "@src/stores/video";
+    import Avatar from "@src/desktop/shared/Avatar.svelte";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import FancyLoader from "@src/desktop/ui/icons/FancyLoader.svelte";
+    import SectionHeader from "@src/desktop/shared/SectionHeader.svelte";
+    import Typing from "@src/ui/Typing.svelte";
+    import ActiveCallActions from "./ActiveCallActions.svelte";
+    import type { VideoCallChat } from "./callChat";
+
+    interface Props {
+        askedToSpeak: boolean;
+        chat: VideoCallChat;
+        onClearSelection: () => void;
+        onAskToSpeak: () => void;
+        onHangup: () => void;
+    }
+
+    let { askedToSpeak, chat, onClearSelection, onAskToSpeak, onHangup }: Props = $props();
+
+    function minimise() {
+        activeVideoCall.setView("minimised");
+    }
+
+    function toggleFullscreen() {
+        if ($activeVideoCall?.view === "default") {
+            activeVideoCall.setView("fullscreen");
+        } else if ($activeVideoCall?.view === "fullscreen") {
+            activeVideoCall.setView("default");
+        }
+    }
+</script>
+
+<SectionHeader shadow flush>
+    <div class="header">
+        {#if $mobileWidth}
+            <!-- svelte-ignore a11y_click_events_have_key_events -->
+            <div
+                tabindex="0"
+                role="button"
+                class="back"
+                class:rtl={$rtlStore}
+                onclick={onClearSelection}>
+                <HoverIcon>
+                    {#if $rtlStore}
+                        <ArrowRight size={$iconSize} color={"var(--icon-txt)"} />
+                    {:else}
+                        <ArrowLeft size={$iconSize} color={"var(--icon-txt)"} />
+                    {/if}
+                </HoverIcon>
+            </div>
+        {/if}
+        <div class="details">
+            {#if $activeVideoCall?.status === "joining"}
+                <div class="joining">
+                    <FancyLoader loop />
+                </div>
+            {:else}
+                <div class="avatar">
+                    <Avatar
+                        statusBorder={"var(--section-bg)"}
+                        url={chat.avatarUrl}
+                        showStatus
+                        userId={chat.userId?.userId}
+                        size={AvatarSize.Default} />
+                </div>
+            {/if}
+            <h2 class="name">{chat.name}</h2>
+            {#if $activeVideoCall?.status === "joining"}
+                <Typing />
+            {/if}
+        </div>
+
+        <ActiveCallActions
+            {chat}
+            {askedToSpeak}
+            {onAskToSpeak}
+            onMinimise={minimise}
+            onToggleFullscreen={toggleFullscreen}
+            {onHangup} />
+    </div>
+</SectionHeader>
+
+<style lang="scss">
+    .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: $sp3;
+        width: 100%;
+
+        .details {
+            display: flex;
+            align-items: center;
+            gap: $sp4;
+            flex: auto;
+
+            .joining {
+                width: toRem(48);
+                height: toRem(48);
+            }
+        }
+
+        .name {
+            @include font(book, normal, fs-120);
+            @include ellipsis();
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/calls/ActiveCallParticipant.svelte b/frontend/app/src/desktop/features/calls/ActiveCallParticipant.svelte
new file mode 100644
index 0000000000..1414f9299c
--- /dev/null
+++ b/frontend/app/src/desktop/features/calls/ActiveCallParticipant.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+    import { iconSize } from "@client";
+    import type { UserSummary, VideoCallPresence, VideoCallType } from "@shared";
+    import { _ } from "svelte-i18n";
+    import AccountCancel from "svelte-material-icons/AccountCancel.svelte";
+    import User from "@src/desktop/features/chats/group/User.svelte";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+
+    interface Props {
+        participant: UserSummary;
+        presence: VideoCallPresence;
+        isOwner: boolean;
+        callType: VideoCallType;
+        onDemote?: (userId: string) => void;
+    }
+
+    let { participant, presence, isOwner, callType, onDemote }: Props = $props();
+
+    let showMenu = $derived(isOwner && presence === "default" && callType === "broadcast");
+
+    function demote(e: Event) {
+        e.stopPropagation();
+        onDemote?.(participant.userId);
+    }
+</script>
+
+<User user={participant}>
+    {#if showMenu}
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div onclick={demote}>
+            <HoverIcon title={$_("videoCall.demoteToHidden")}>
+                <AccountCancel size={$iconSize} color={"var(--icon-txt)"} />
+            </HoverIcon>
+        </div>
+    {/if}
+</User>
diff --git a/frontend/app/src/desktop/features/calls/ActiveCallParticipants.svelte b/frontend/app/src/desktop/features/calls/ActiveCallParticipants.svelte
new file mode 100644
index 0000000000..0e4f12347a
--- /dev/null
+++ b/frontend/app/src/desktop/features/calls/ActiveCallParticipants.svelte
@@ -0,0 +1,190 @@
+<script lang="ts">
+    import {
+        type ChatIdentifier,
+        type MultiUserChatIdentifier,
+        type OpenChat,
+        type UserSummary,
+        chatIdentifiersEqual,
+        currentUserIdStore,
+        subscribe,
+    } from "@client";
+    import { getContext, onMount } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { activeVideoCall } from "@src/stores/video";
+    import FancyLoader from "@src/desktop/ui/icons/FancyLoader.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import VirtualList from "@src/ui/VirtualList.svelte";
+    import ActiveCallParticipant from "./ActiveCallParticipant.svelte";
+    import ActiveCallParticipantsHeader from "./ActiveCallParticipantsHeader.svelte";
+
+    type MappedParticipants = {
+        participants: Record<string, UserSummary>;
+        hidden: Record<string, UserSummary>;
+        lastUpdated: bigint;
+    };
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        chatId: MultiUserChatIdentifier;
+        messageId: bigint;
+        isOwner: boolean;
+        onClose: () => void;
+    }
+
+    let { chatId, messageId, isOwner, onClose }: Props = $props();
+
+    let demoted = $state(new Set<string>());
+    let loading = $state(false);
+
+    let selectedTab: "presenters" | "viewers" = $state("presenters");
+    let videoParticipants: MappedParticipants = $state({
+        participants: {},
+        hidden: {},
+        lastUpdated: 0n,
+    });
+
+    let participants = $derived(
+        Object.values(videoParticipants.participants).filter((u) => !demoted.has(u.userId)),
+    );
+    let hidden = $derived([
+        ...Object.values(videoParticipants.hidden),
+        ...Object.values(videoParticipants.participants).filter((u) => demoted.has(u.userId)),
+    ]);
+
+    onMount(() => {
+        const unsub = subscribe("videoCallMessageUpdated", videoCallMessageUpdated);
+        refresh(true);
+        return unsub;
+    });
+
+    function videoCallMessageUpdated(payload: { chatId: ChatIdentifier; messageId: bigint }) {
+        if (chatIdentifiersEqual(chatId, payload.chatId) && messageId === payload.messageId) {
+            refresh();
+        }
+    }
+
+    function refresh(initialising: boolean = false) {
+        loading = initialising;
+        client
+            .videoCallParticipants(chatId, messageId, 0n)
+            .then((res) => {
+                videoParticipants = res;
+                Object.values(videoParticipants.hidden).forEach((h) => demoted.delete(h.userId));
+                demoted = demoted;
+            })
+            .finally(() => (loading = false));
+    }
+
+    function close() {
+        onClose();
+        activeVideoCall.participantsOpen(false);
+        client.popRightPanelHistory();
+    }
+
+    function selectTab(tab: "presenters" | "viewers") {
+        selectedTab = tab;
+    }
+
+    function demote(userId: string) {
+        demoted.add(userId);
+        demoted = demoted;
+        activeVideoCall.demote(userId);
+    }
+</script>
+
+<ActiveCallParticipantsHeader onClose={close} />
+
+{#if $activeVideoCall !== undefined}
+    {#if loading}
+        <div class="loader">
+            <FancyLoader loop />
+        </div>
+    {:else}
+        {#if $activeVideoCall?.callType === "broadcast"}
+            <div class="tabs">
+                <!-- svelte-ignore a11y_click_events_have_key_events -->
+                <div
+                    tabindex="0"
+                    role="button"
+                    onclick={() => selectTab("presenters")}
+                    class:selected={selectedTab === "presenters"}
+                    class="tab">
+                    <Translatable
+                        resourceKey={i18nKey("videoCall.presenters", {
+                            count: participants.length,
+                        })} />
+                </div>
+                <!-- svelte-ignore a11y_click_events_have_key_events -->
+                <div
+                    tabindex="0"
+                    role="button"
+                    onclick={() => selectTab("viewers")}
+                    class:selected={selectedTab === "viewers"}
+                    class="tab">
+                    <Translatable
+                        resourceKey={i18nKey("videoCall.viewers", {
+                            count: hidden.length,
+                        })} />
+                </div>
+            </div>
+        {/if}
+
+        {#if selectedTab === "presenters"}
+            {#each participants as participant}
+                <ActiveCallParticipant
+                    {isOwner}
+                    callType={$activeVideoCall.callType}
+                    onDemote={demote}
+                    presence={isOwner && participant.userId === $currentUserIdStore
+                        ? "owner"
+                        : "default"}
+                    {participant} />
+            {/each}
+        {/if}
+
+        {#if selectedTab === "viewers"}
+            <VirtualList keyFn={(user) => user.userId} items={hidden}>
+                {#snippet children(item)}
+                    <ActiveCallParticipant
+                        callType={$activeVideoCall.callType}
+                        {isOwner}
+                        presence={"hidden"}
+                        participant={item} />
+                {/snippet}
+            </VirtualList>
+        {/if}
+    {/if}
+{/if}
+
+<style lang="scss">
+    .tabs {
+        display: flex;
+        align-items: center;
+        @include font(medium, normal, fs-90);
+        color: var(--txt-light);
+        gap: $sp5;
+        border-bottom: 1px solid var(--bd);
+        cursor: pointer;
+        margin: 0 $sp4 $sp5 $sp4;
+
+        @include mobile() {
+            gap: $sp4;
+        }
+
+        .tab {
+            padding-bottom: 10px;
+            margin-bottom: -2px;
+            border-bottom: 3px solid transparent;
+            white-space: nowrap;
+            &.selected {
+                color: var(--txt);
+                border-bottom: 3px solid var(--txt);
+            }
+        }
+    }
+    .loader {
+        width: 80px;
+        margin: auto auto;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/calls/ActiveCallParticipantsHeader.svelte b/frontend/app/src/desktop/features/calls/ActiveCallParticipantsHeader.svelte
new file mode 100644
index 0000000000..d0b9d4bea6
--- /dev/null
+++ b/frontend/app/src/desktop/features/calls/ActiveCallParticipantsHeader.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+    import { iconSize } from "@client";
+    import { _ } from "svelte-i18n";
+    import Close from "svelte-material-icons/Close.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import SectionHeader from "@src/desktop/shared/SectionHeader.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    let { onClose }: { onClose: () => void } = $props();
+</script>
+
+<SectionHeader gap border={false}>
+    <h4><Translatable resourceKey={i18nKey("videoCall.participants")} /></h4>
+    <span title={$_("close")} class="close" onclick={onClose}>
+        <HoverIcon>
+            <Close size={$iconSize} color={"var(--icon-txt)"} />
+        </HoverIcon>
+    </span>
+</SectionHeader>
+
+<style lang="scss">
+    h4 {
+        flex: 1;
+        margin: 0;
+        @include font-size(fs-120);
+    }
+    .close {
+        flex: 0 0 30px;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/calls/ActiveCallSummary.svelte b/frontend/app/src/desktop/features/calls/ActiveCallSummary.svelte
new file mode 100644
index 0000000000..28513bead1
--- /dev/null
+++ b/frontend/app/src/desktop/features/calls/ActiveCallSummary.svelte
@@ -0,0 +1,230 @@
+<script lang="ts">
+    import {
+        allUsersStore,
+        AvatarSize,
+        chatIdentifiersEqual,
+        communitiesStore,
+        OpenChat,
+        publish,
+        routeForChatIdentifier,
+        selectedChatIdStore,
+        selectedCommunitySummaryStore,
+        type ChatIdentifier,
+    } from "@client";
+    import { navigate } from "@src/utils/navigation";
+    import { getContext } from "svelte";
+    import HandFrontLeft from "svelte-material-icons/HandFrontLeft.svelte";
+    import Microphone from "svelte-material-icons/Microphone.svelte";
+    import MicrophoneOff from "svelte-material-icons/MicrophoneOff.svelte";
+    import MonitorOff from "svelte-material-icons/MonitorOff.svelte";
+    import MonitorShare from "svelte-material-icons/MonitorShare.svelte";
+    import PhoneHangup from "svelte-material-icons/PhoneHangup.svelte";
+    import Video from "svelte-material-icons/Video.svelte";
+    import VideoOff from "svelte-material-icons/VideoOff.svelte";
+    import Tooltip from "@src/desktop/ui/tooltip/Tooltip.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import {
+        activeVideoCall,
+        camera,
+        hasPresence,
+        microphone,
+        sharing,
+    } from "@src/stores/video";
+    import Avatar from "@src/desktop/shared/Avatar.svelte";
+    import FancyLoader from "@src/desktop/ui/icons/FancyLoader.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    let show = $derived(
+        $activeVideoCall?.chatId !== undefined &&
+            (!chatIdentifiersEqual($activeVideoCall.chatId, $selectedChatIdStore) ||
+                (chatIdentifiersEqual($activeVideoCall.chatId, $selectedChatIdStore) &&
+                    $activeVideoCall.view === "minimised")),
+    );
+
+    let chat = $derived(normaliseChatSummary($activeVideoCall?.chatId));
+
+    function goToCall() {
+        if ($activeVideoCall) {
+            if (!chatIdentifiersEqual($activeVideoCall.chatId, $selectedChatIdStore)) {
+                navigate(routeForChatIdentifier("none", $activeVideoCall.chatId));
+            }
+            activeVideoCall.setView("default");
+        }
+    }
+
+    function askToSpeak(e: Event) {
+        e.stopPropagation();
+        publish("askToSpeak");
+    }
+
+    function normaliseChatSummary(chatId: ChatIdentifier | undefined) {
+        if (chatId) {
+            const chat = client.lookupChatSummary(chatId);
+            if (chat) {
+                switch (chat.kind) {
+                    case "direct_chat":
+                        const them = $allUsersStore.get(chat.them.userId);
+                        return {
+                            name: client.displayName(them),
+                            avatarUrl: client.userAvatarUrl(them),
+                            userId: chat.them,
+                        };
+                    case "group_chat":
+                        return {
+                            name: chat.name,
+                            avatarUrl: client.groupAvatarUrl(chat),
+                            userId: undefined,
+                        };
+                    case "channel":
+                        return {
+                            name: `${
+                                $communitiesStore.get({
+                                    kind: "community",
+                                    communityId: chat.id.communityId,
+                                })?.name
+                            } > ${chat.name}`,
+                            avatarUrl: client.groupAvatarUrl(chat, $selectedCommunitySummaryStore),
+                            userId: undefined,
+                        };
+                }
+            }
+        }
+    }
+
+    function toggleShare(e: Event) {
+        e.stopPropagation();
+        if ($activeVideoCall?.call) {
+            if ($sharing) {
+                $activeVideoCall.call.stopScreenShare();
+            } else {
+                $activeVideoCall.call.startScreenShare();
+            }
+        }
+    }
+
+    function toggleMic(e: Event) {
+        e.stopPropagation();
+        if ($activeVideoCall?.call) {
+            $activeVideoCall.call.setLocalAudio(!$activeVideoCall.call.localAudio());
+        }
+    }
+
+    function toggleCamera(e: Event) {
+        e.stopPropagation();
+        if ($activeVideoCall?.call) {
+            $activeVideoCall.call.setLocalVideo(!$activeVideoCall.call.localVideo());
+        }
+    }
+
+    function hangup(e: Event) {
+        e.stopPropagation();
+        publish("hangup");
+    }
+</script>
+
+{#if show && $activeVideoCall !== undefined && chat !== undefined}
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <div class="call" tabindex="0" role="button" onclick={goToCall}>
+        {#if $activeVideoCall.status === "joining"}
+            <div class="joining">
+                <FancyLoader loop />
+            </div>
+        {:else}
+            <div class="avatar">
+                <Avatar
+                    statusBorder={"var(--toast-success-bg)"}
+                    url={chat.avatarUrl}
+                    showStatus
+                    userId={chat.userId?.userId}
+                    size={AvatarSize.Default} />
+            </div>
+        {/if}
+        <div class="details">
+            <div class="actions">
+                {#if !$hasPresence && $activeVideoCall?.status !== "joining"}
+                    <Tooltip position={"top"} align={"middle"}>
+                        <div role="button" tabindex="0" class="cam" onclick={askToSpeak}>
+                            <HandFrontLeft size={"1.6em"} color={"var(--toast-success-txt)"} />
+                        </div>
+                        {#snippet popupTemplate()}
+                            <Translatable resourceKey={i18nKey("videoCall.askToSpeak")} />
+                        {/snippet}
+                    </Tooltip>
+                {:else}
+                    <Tooltip position={"top"} align={"middle"}>
+                        <div role="button" tabindex="0" class="cam" onclick={toggleCamera}>
+                            {#if $camera}
+                                <Video size={"1.6em"} color={"var(--toast-success-txt)"} />
+                            {:else}
+                                <VideoOff size={"1.6em"} color={"var(--toast-success-txt)"} />
+                            {/if}
+                        </div>
+                        {#snippet popupTemplate()}
+                            <Translatable resourceKey={i18nKey("videoCall.toggleCam")} />
+                        {/snippet}
+                    </Tooltip>
+                    <Tooltip position={"top"} align={"middle"}>
+                        <div role="button" tabindex="0" class="mic" onclick={toggleMic}>
+                            {#if $microphone}
+                                <Microphone size={"1.6em"} color={"var(--toast-success-txt)"} />
+                            {:else}
+                                <MicrophoneOff size={"1.6em"} color={"var(--toast-success-txt)"} />
+                            {/if}
+                        </div>
+                        {#snippet popupTemplate()}
+                            <Translatable resourceKey={i18nKey("videoCall.toggleMic")} />
+                        {/snippet}
+                    </Tooltip>
+                    <Tooltip position={"top"} align={"middle"}>
+                        <div role="button" tabindex="0" class="mic" onclick={toggleShare}>
+                            {#if $sharing}
+                                <MonitorOff size={"1.6em"} color={"var(--toast-success-txt)"} />
+                            {:else}
+                                <MonitorShare size={"1.6em"} color={"var(--toast-success-txt)"} />
+                            {/if}
+                        </div>
+                        {#snippet popupTemplate()}
+                            <Translatable resourceKey={i18nKey("videoCall.toggleShare")} />
+                        {/snippet}
+                    </Tooltip>
+                {/if}
+                <Tooltip position={"top"} align={"middle"}>
+                    <div role="button" tabindex="0" class="hangup" onclick={hangup}>
+                        <PhoneHangup size={"1.6em"} color={"var(--toast-success-txt)"} />
+                    </div>
+                    {#snippet popupTemplate()}
+                        <Translatable resourceKey={i18nKey("videoCall.leave")} />
+                    {/snippet}
+                </Tooltip>
+            </div>
+            <span class="name">{chat.name}</span>
+        </div>
+    </div>
+{/if}
+
+<style lang="scss">
+    .call {
+        cursor: pointer;
+        position: sticky;
+        display: flex;
+        gap: $sp4;
+        align-items: center;
+        bottom: 0;
+        width: 100%;
+        padding: $sp4;
+        background-color: var(--toast-success-bg);
+        color: var(--toast-success-txt);
+    }
+
+    .joining {
+        width: toRem(48);
+        height: toRem(48);
+    }
+
+    .actions {
+        display: flex;
+        gap: $sp4;
+    }
+</style>
diff --git a/frontend/app/src/components/home/video/ActiveVideoCallResume.svelte b/frontend/app/src/desktop/features/calls/ActiveVideoCallResume.svelte
similarity index 93%
rename from frontend/app/src/components/home/video/ActiveVideoCallResume.svelte
rename to frontend/app/src/desktop/features/calls/ActiveVideoCallResume.svelte
index 6b123f31f6..161cc2b064 100644
--- a/frontend/app/src/components/home/video/ActiveVideoCallResume.svelte
+++ b/frontend/app/src/desktop/features/calls/ActiveVideoCallResume.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { chatIdentifiersEqual, mobileWidth, selectedChatIdStore } from "@client";
-    import { activeVideoCall } from "../../../stores/video";
+    import { activeVideoCall } from "@src/stores/video";
 
     let show = $derived(
         $mobileWidth &&
diff --git a/frontend/app/src/desktop/features/calls/IncomingCall.svelte b/frontend/app/src/desktop/features/calls/IncomingCall.svelte
new file mode 100644
index 0000000000..534c7cbb87
--- /dev/null
+++ b/frontend/app/src/desktop/features/calls/IncomingCall.svelte
@@ -0,0 +1,203 @@
+<script lang="ts">
+    import {
+        allUsersStore,
+        AvatarSize,
+        communitiesStore,
+        iconSize,
+        selectedCommunitySummaryStore,
+        type ChatIdentifier,
+        type OpenChat,
+        type VideoCallType,
+    } from "@client";
+    import { getContext } from "svelte";
+    import Phone from "svelte-material-icons/Phone.svelte";
+    import PhoneHangup from "svelte-material-icons/PhoneHangup.svelte";
+    import Tooltip from "@src/desktop/ui/tooltip/Tooltip.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import {
+        activeVideoCall,
+        incomingVideoCall,
+        ringtoneUrls,
+        selectedRingtone,
+        type IncomingVideoCall,
+        type RingtoneKey,
+    } from "@src/stores/video";
+    import Avatar from "@src/desktop/shared/Avatar.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    interface Props {
+        onJoinVideoCall: (chatId: ChatIdentifier, callType: VideoCallType) => void;
+    }
+
+    let { onJoinVideoCall }: Props = $props();
+
+    const client = getContext<OpenChat>("client");
+
+    const chat = $derived(normaliseChatSummary($incomingVideoCall));
+    const ringtoneUrl = $derived(ringtoneUrls[$selectedRingtone as RingtoneKey]);
+    const isOnAnotherCall = $derived($activeVideoCall !== undefined);
+
+    function normaliseChatSummary(call: IncomingVideoCall | undefined) {
+        if (call) {
+            const chat = client.lookupChatSummary(call.chatId);
+            const initiator = $allUsersStore.get(call.userId);
+            if (chat && initiator) {
+                switch (chat.kind) {
+                    case "direct_chat":
+                        const them = $allUsersStore.get(chat.them.userId);
+                        return {
+                            chatId: chat.id,
+                            name: client.displayName(them),
+                            avatarUrl: client.userAvatarUrl(them),
+                            initiator: initiator.username,
+                        };
+                    case "group_chat":
+                        return {
+                            chatId: chat.id,
+                            name: chat.name,
+                            avatarUrl: client.groupAvatarUrl(chat),
+                            initiator: initiator.username,
+                        };
+                    case "channel":
+                        return {
+                            chatId: chat.id,
+                            name: `${
+                                $communitiesStore.get({
+                                    kind: "community",
+                                    communityId: chat.id.communityId,
+                                })?.name
+                            } > ${chat.name}`,
+                            avatarUrl: client.groupAvatarUrl(chat, $selectedCommunitySummaryStore),
+                            initiator: initiator.username,
+                        };
+                }
+            }
+        }
+    }
+
+    function join() {
+        if ($incomingVideoCall !== undefined) {
+            onJoinVideoCall($incomingVideoCall.chatId, $incomingVideoCall.callType);
+        }
+    }
+
+    function cancel() {
+        incomingVideoCall.set(undefined);
+    }
+</script>
+
+{#if chat !== undefined}
+    {#if !isOnAnotherCall}
+        <audio playsinline={true} autoplay={true} src={ringtoneUrl} muted={false} preload="auto">
+        </audio>
+    {/if}
+
+    <Overlay onClose={cancel} dismissible>
+        <ModalContent hideHeader hideFooter closeIcon>
+            {#snippet body()}
+                <span class="body">
+                    <div class="details">
+                        <div class="avatar">
+                            <Avatar url={chat.avatarUrl} size={AvatarSize.Default} />
+                        </div>
+                        <div class="txt">
+                            <div class="name">
+                                {chat.name}
+                            </div>
+                            <div class="msg">
+                                <Translatable
+                                    resourceKey={i18nKey("videoCall.remoteStart", {
+                                        name: chat.initiator,
+                                    })} />
+                            </div>
+                        </div>
+                    </div>
+                    <div class="btns">
+                        <Tooltip position={"top"} align={"middle"}>
+                            <div role="button" onclick={cancel} class="btn ignore">
+                                <PhoneHangup size={$iconSize} color={"var(--txt)"} />
+                            </div>
+                            {#snippet popupTemplate()}
+                                <Translatable resourceKey={i18nKey("videoCall.ignore")} />
+                            {/snippet}
+                        </Tooltip>
+                        <Tooltip position={"top"} align={"middle"}>
+                            <div role="button" onclick={join} class="btn join">
+                                <Phone size={$iconSize} color={"var(--txt)"} />
+                            </div>
+                            {#snippet popupTemplate()}
+                                <Translatable resourceKey={i18nKey("videoCall.join")} />
+                            {/snippet}
+                        </Tooltip>
+                    </div>
+                </span>
+            {/snippet}
+        </ModalContent>
+    </Overlay>
+{/if}
+
+<style lang="scss">
+    .body {
+        display: flex;
+        gap: $sp3;
+        align-items: center;
+        justify-content: space-between;
+        padding: $sp3 0;
+
+        @include mobile() {
+            flex-direction: column;
+            gap: $sp5;
+            padding: $sp4 0;
+        }
+
+        .details {
+            display: flex;
+            align-items: center;
+            gap: $sp3;
+        }
+
+        .txt {
+            .name {
+                @include font(bold, normal, fs-140);
+                margin-bottom: $sp1;
+            }
+            .msg {
+                @include font(light, normal, fs-100);
+            }
+        }
+
+        .btns {
+            display: flex;
+            gap: $sp4;
+
+            @include mobile() {
+                justify-content: space-evenly;
+                gap: $sp5;
+            }
+        }
+
+        .btn {
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 45px;
+            height: 45px;
+            cursor: pointer;
+
+            @include mobile() {
+                width: 60px;
+                height: 60px;
+            }
+
+            &.ignore {
+                background-color: var(--vote-no-color);
+            }
+            &.join {
+                background-color: var(--vote-yes-color);
+            }
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/calls/VideoCallAccessRequests.svelte b/frontend/app/src/desktop/features/calls/VideoCallAccessRequests.svelte
new file mode 100644
index 0000000000..931164c779
--- /dev/null
+++ b/frontend/app/src/desktop/features/calls/VideoCallAccessRequests.svelte
@@ -0,0 +1,89 @@
+<script lang="ts">
+    import { allUsersStore, AvatarSize, iconSize, type OpenChat } from "@client";
+    import { getContext } from "svelte";
+    import ThumbDown from "svelte-material-icons/ThumbDown.svelte";
+    import ThumbUp from "svelte-material-icons/ThumbUp.svelte";
+    import { cubicInOut } from "svelte/easing";
+    import { fly } from "svelte/transition";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { activeVideoCall, type RequestToSpeak } from "@src/stores/video";
+    import Avatar from "@src/desktop/shared/Avatar.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    let requests = $derived($activeVideoCall?.accessRequests ?? []);
+
+    function approve(request: RequestToSpeak) {
+        activeVideoCall.approveAccessRequest(request);
+    }
+
+    function reject(request: RequestToSpeak) {
+        activeVideoCall.rejectAccessRequest(request);
+    }
+</script>
+
+{#each requests as request, i}
+    <div
+        style={`top: ${50 + i * 8}px; right: ${50 + i * 8}px;`}
+        in:fly={{
+            duration: 300,
+            y: -500,
+            opacity: 0,
+            easing: cubicInOut,
+        }}
+        out:fly={{
+            duration: 300,
+            x: 500,
+            opacity: 0,
+            easing: cubicInOut,
+        }}
+        class="message">
+        <div class="avatar">
+            <Avatar
+                url={client.userAvatarUrl($allUsersStore.get(request.userId))}
+                userId={request.userId}
+                size={AvatarSize.Small} />
+        </div>
+        <Translatable
+            resourceKey={i18nKey("videoCall.accessRequest", {
+                username: $allUsersStore.get(request.userId)?.username,
+            })} />
+        <!-- svelte-ignore a11y_interactive_supports_focus -->
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <div role="button" onclick={() => approve(request)} class="btn">
+            <ThumbUp size={$iconSize} color={"var(--vote-yes-color)"} />
+        </div>
+        <!-- svelte-ignore a11y_interactive_supports_focus -->
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <div role="button" onclick={() => reject(request)} class="btn">
+            <ThumbDown size={$iconSize} color={"var(--vote-no-color)"} />
+        </div>
+    </div>
+{/each}
+
+<style lang="scss">
+    .message {
+        position: absolute;
+        @include z-index("toast");
+        padding: $sp4;
+        // width: 75%;
+        max-width: 800px;
+        margin: 0 $sp4;
+        display: flex;
+        gap: $sp4;
+        justify-content: center;
+        align-items: center;
+        border: 1px solid var(--bd);
+        @include mobile() {
+            width: 100%;
+        }
+        background-color: var(--modal-bg);
+        box-shadow: var(--modal-sh);
+        color: var(--txt);
+
+        .btn {
+            cursor: pointer;
+        }
+    }
+</style>
diff --git a/frontend/app/src/components/home/video/VideoCallIcon.svelte b/frontend/app/src/desktop/features/calls/VideoCallIcon.svelte
similarity index 100%
rename from frontend/app/src/components/home/video/VideoCallIcon.svelte
rename to frontend/app/src/desktop/features/calls/VideoCallIcon.svelte
diff --git a/frontend/app/src/components/home/video/callChat.ts b/frontend/app/src/desktop/features/calls/callChat.ts
similarity index 100%
rename from frontend/app/src/components/home/video/callChat.ts
rename to frontend/app/src/desktop/features/calls/callChat.ts
diff --git a/frontend/app/src/components/home/ArchiveOffIcon.svelte b/frontend/app/src/desktop/features/chatlist/ArchiveOffIcon.svelte
similarity index 100%
rename from frontend/app/src/components/home/ArchiveOffIcon.svelte
rename to frontend/app/src/desktop/features/chatlist/ArchiveOffIcon.svelte
diff --git a/frontend/app/src/desktop/features/chatlist/ChatList.svelte b/frontend/app/src/desktop/features/chatlist/ChatList.svelte
new file mode 100644
index 0000000000..d013b0a9a6
--- /dev/null
+++ b/frontend/app/src/desktop/features/chatlist/ChatList.svelte
@@ -0,0 +1,461 @@
+<script lang="ts">
+    import { scrollLimits, menuCloser } from "component-lib";
+    import {
+        allUsersStore,
+        type BotMatch,
+        chatIdentifiersEqual,
+        chatIdentifierToString,
+        type ChatListScope,
+        chatListScopesEqual,
+        chatListScopeStore,
+        chatSummariesListStore,
+        type ChatSummary as ChatSummaryType,
+        type CombinedUnreadCounts,
+        currentUserIdStore,
+        emptyCombinedUnreadCounts,
+        type GroupMatch,
+        type GroupSearchResponse,
+        mobileWidth,
+        numberOfThreadsStore,
+        OpenChat,
+        publish,
+        ROLE_NONE,
+        routeForChatIdentifier,
+        routeForScope,
+        selectedChatIdStore,
+        selectedCommunitySummaryStore,
+        unreadCommunityChannelCountsStore,
+        unreadDirectAndGroupCountsStore,
+        unreadFavouriteCountsStore,
+        type UserSummary,
+    } from "@client";
+    import { navigate } from "@src/utils/navigation";
+    import { getContext, tick } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { chatListView } from "@src/stores/chatListView";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import FilteredUsername from "@src/ui/FilteredUsername.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import ChatListSearch from "./ChatListSearch.svelte";
+    import ChatListSectionButton from "./ChatListSectionButton.svelte";
+    import ChatSummary from "./ChatSummary.svelte";
+    import BrowseChannels from "@src/desktop/features/chats/community/details/BrowseChannels.svelte";
+    import DirectAndGroupChatsHeader from "@src/desktop/features/chats/community/DirectAndGroupChatsHeader.svelte";
+    import FavouriteChatsHeader from "@src/desktop/features/chats/community/FavouriteChatsHeader.svelte";
+    import PreviewWrapper from "@src/desktop/features/chats/community/PreviewWrapper.svelte";
+    import SelectedCommunityHeader from "@src/desktop/features/chats/community/SelectedCommunityHeader.svelte";
+    import Badges from "@src/desktop/features/profile/Badges.svelte";
+    import SearchResult from "./SearchResult.svelte";
+    import ThreadPreviews from "@src/desktop/features/chats/thread/ThreadPreviews.svelte";
+    import ActiveCallSummary from "@src/desktop/features/calls/ActiveCallSummary.svelte";
+
+    const TO_SHOW = 30;
+    const client = getContext<OpenChat>("client");
+
+    let groupSearchResults: Promise<GroupSearchResponse> | undefined = $state(undefined);
+    let userAndBotSearchResults: Promise<(UserSummary | BotMatch)[]> | undefined =
+        $state(undefined);
+    let searchTerm: string = $state("");
+    let searchResultsAvailable: boolean = $state(false);
+    let previousScope: ChatListScope = $chatListScopeStore;
+    let previousView: "chats" | "threads" = $chatListView;
+    let chatsToShow = $state(TO_SHOW);
+    let rendering = $state(false);
+
+    function insideBottom() {
+        if (rendering) return;
+        rendering = true;
+        chatsToShow = Math.min(allMatchingChats.length, chatsToShow + TO_SHOW / 2);
+        tick().then(() => (rendering = false));
+    }
+
+    $effect(() => {
+        if (!chatListScopesEqual(previousScope, $chatListScopeStore)) {
+            onScopeChanged();
+        } else if (previousView !== $chatListView) {
+            onViewChanged();
+        }
+    });
+
+    function anythingUnread(unread: CombinedUnreadCounts): boolean {
+        return (
+            unread.chats.muted +
+                unread.chats.unmuted +
+                unread.threads.muted +
+                unread.threads.unmuted >
+            0
+        );
+    }
+
+    function cancelPreview() {
+        if ($selectedCommunitySummaryStore) {
+            client.removeCommunity($selectedCommunitySummaryStore.id);
+            navigate(routeForScope(client.getDefaultScope()));
+        }
+    }
+
+    function chatWith(userId: string): void {
+        publish("chatWith", { kind: "direct_chat", userId });
+    }
+
+    /**
+     * All we need to do here is push the route
+     * the routing will take care of the rest
+     */
+    function selectGroup({ chatId }: GroupMatch): void {
+        navigate(routeForChatIdentifier($chatListScopeStore.kind, chatId));
+        searchTerm = "";
+    }
+
+    function chatSelected({ id }: ChatSummaryType): void {
+        const url = routeForChatIdentifier($chatListScopeStore.kind, id);
+        navigate(url);
+        searchTerm = "";
+    }
+
+    function setView(view: "chats" | "threads"): void {
+        chatListView.set(view);
+
+        if (view === "threads") {
+            searchTerm = "";
+        }
+    }
+
+    function onScopeChanged() {
+        previousScope = $chatListScopeStore;
+        chatListView.set("chats");
+        onViewChanged();
+    }
+
+    function onViewChanged() {
+        previousView = $chatListView;
+        chatsToShow = TO_SHOW;
+    }
+
+    function userOrBotKey(match: UserSummary | BotMatch): string {
+        switch (match.kind) {
+            case "bot_match":
+                return match.id;
+            default:
+                return match.userId;
+        }
+    }
+
+    let showPreview = $derived(
+        $mobileWidth &&
+            $selectedCommunitySummaryStore?.membership.role === ROLE_NONE &&
+            $selectedChatIdStore === undefined,
+    );
+    let user = $derived($allUsersStore.get($currentUserIdStore));
+    let lowercaseSearch = $derived(searchTerm.toLowerCase());
+    let showBrowseChannels = $derived($chatListScopeStore.kind === "community");
+    let unreadCounts = $derived.by(() => {
+        switch ($chatListScopeStore.kind) {
+            case "chats": {
+                return $unreadDirectAndGroupCountsStore;
+            }
+            case "favourite": {
+                return $unreadFavouriteCountsStore;
+            }
+            case "community": {
+                return (
+                    $unreadCommunityChannelCountsStore.get($chatListScopeStore.id) ??
+                    emptyCombinedUnreadCounts()
+                );
+            }
+            default:
+                return emptyCombinedUnreadCounts();
+        }
+    });
+    let canMarkAllRead = $derived(anythingUnread(unreadCounts));
+    $effect(() => {
+        if ($numberOfThreadsStore === 0) {
+            chatListView.set("chats");
+        }
+    });
+    $effect(() => {
+        if ($chatListView === "threads" && searchTerm !== "") {
+            chatListView.set("chats");
+        }
+    });
+    let allMatchingChats = $derived(
+        searchTerm !== ""
+            ? $chatSummariesListStore.filter((c) => client.chatMatchesSearch(lowercaseSearch, c))
+            : $chatSummariesListStore,
+    );
+    let chats = $derived(allMatchingChats.slice(0, chatsToShow));
+</script>
+
+<!-- svelte-ignore missing_declaration -->
+{#if user}
+    {#if $chatListScopeStore.kind === "chats"}
+        <DirectAndGroupChatsHeader {canMarkAllRead} />
+    {:else if $chatListScopeStore.kind === "favourite"}
+        <FavouriteChatsHeader {canMarkAllRead} />
+    {:else if $selectedCommunitySummaryStore && $chatListScopeStore.kind === "community"}
+        <SelectedCommunityHeader community={$selectedCommunitySummaryStore} {canMarkAllRead} />
+    {/if}
+
+    <ChatListSearch
+        bind:userAndBotsSearchResults={userAndBotSearchResults}
+        bind:groupSearchResults
+        bind:searchResultsAvailable
+        bind:searchTerm />
+
+    {#if $numberOfThreadsStore > 0}
+        <div class="section-selector">
+            <ChatListSectionButton
+                onClick={() => setView("chats")}
+                unread={unreadCounts.chats}
+                title={i18nKey("chats")}
+                selected={$chatListView === "chats"} />
+            <ChatListSectionButton
+                unread={unreadCounts.threads}
+                onClick={() => setView("threads")}
+                title={i18nKey("thread.previewTitle")}
+                selected={$chatListView === "threads"} />
+        </div>
+    {/if}
+
+    <div class="body">
+        {#if $chatListView === "threads"}
+            <ThreadPreviews />
+        {:else}
+            <div
+                use:scrollLimits={{
+                    threshold: 200,
+                    onEnd: insideBottom,
+                }}
+                use:menuCloser
+                class="chat-summaries">
+                {#if searchResultsAvailable && chats.length > 0}
+                    <h3 class="search-subtitle">
+                        <Translatable resourceKey={i18nKey("yourChats")} />
+                    </h3>
+                {/if}
+
+                {#each chats as chatSummary (chatIdentifierToString(chatSummary.id))}
+                    <ChatSummary
+                        {chatSummary}
+                        selected={chatIdentifiersEqual($selectedChatIdStore, chatSummary.id)}
+                        visible={searchTerm !== "" || !chatSummary.membership.archived}
+                        onChatSelected={chatSelected} />
+                {/each}
+
+                {#if userAndBotSearchResults !== undefined}
+                    <div class="search-matches">
+                        {#await userAndBotSearchResults then resp}
+                            {#if resp.length > 0}
+                                <h3 class="search-subtitle">
+                                    <Translatable resourceKey={i18nKey("usersAndBots")} />
+                                </h3>
+                                {#each resp as match, i (userOrBotKey(match))}
+                                    {#if match.kind === "bot_match"}
+                                        <SearchResult
+                                            index={i}
+                                            avatarUrl={match.avatarUrl ?? "/assets/bot_avatar.svg"}
+                                            onclick={() => chatWith(match.id)}>
+                                            <div class="user-result">
+                                                <h4>
+                                                    <FilteredUsername
+                                                        {searchTerm}
+                                                        username={match.name} />
+                                                </h4>
+                                                <div class="username">
+                                                    {match.definition.description}
+                                                </div>
+                                            </div>
+                                        </SearchResult>
+                                    {:else}
+                                        <SearchResult
+                                            index={i}
+                                            avatarUrl={client.userAvatarUrl(match)}
+                                            onclick={() => chatWith(match.userId)}>
+                                            <div class="user-result">
+                                                <h4>
+                                                    <FilteredUsername
+                                                        {searchTerm}
+                                                        username={match.displayName ??
+                                                            match.username} />
+
+                                                    <Badges
+                                                        uniquePerson={match.isUniquePerson}
+                                                        diamondStatus={match.diamondStatus}
+                                                        streak={match.streak} />
+                                                </h4>
+                                                <div class="username">
+                                                    <FilteredUsername
+                                                        {searchTerm}
+                                                        username={"@" + match.username} />
+                                                </div>
+                                            </div>
+                                        </SearchResult>
+                                    {/if}
+                                {/each}
+                            {/if}
+                        {/await}
+                    </div>
+                {/if}
+                {#if groupSearchResults !== undefined}
+                    <div class="search-matches">
+                        {#await groupSearchResults then resp}
+                            {#if resp.kind === "success" && resp.matches.length > 0}
+                                <h3 class="search-subtitle">
+                                    <Translatable resourceKey={i18nKey("publicGroups")} />
+                                </h3>
+                                {#each resp.matches as group, i (group.chatId.groupId)}
+                                    <SearchResult
+                                        index={i}
+                                        avatarUrl={client.groupAvatarUrl(
+                                            {
+                                                ...group,
+                                                id: group.chatId,
+                                            },
+                                            $selectedCommunitySummaryStore,
+                                        )}
+                                        onclick={() => selectGroup(group)}>
+                                        <h4 class="search-item-title">
+                                            {group.name}
+                                        </h4>
+                                        <p title={group.description} class="search-item-desc">
+                                            {group.description}
+                                        </p>
+                                    </SearchResult>
+                                {/each}
+                            {/if}
+                        {/await}
+                    </div>
+                {/if}
+            </div>
+            {#if showBrowseChannels}
+                <BrowseChannels {searchTerm} />
+            {/if}
+        {/if}
+    </div>
+    <ActiveCallSummary />
+    {#if showPreview}
+        <PreviewWrapper>
+            {#snippet children(joiningCommunity, joinCommunity)}
+                <div class="join">
+                    <ButtonGroup align="center">
+                        <Button secondary small onClick={cancelPreview}>
+                            <Translatable resourceKey={i18nKey("leave")} />
+                        </Button>
+                        <Button
+                            loading={joiningCommunity}
+                            disabled={joiningCommunity}
+                            onClick={joinCommunity}
+                            ><Translatable
+                                resourceKey={i18nKey("communities.joinCommunity")} /></Button>
+                    </ButtonGroup>
+                </div>
+            {/snippet}
+        </PreviewWrapper>
+    {/if}
+{/if}
+
+<style lang="scss">
+    .body {
+        overflow: hidden;
+        flex: auto;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+    }
+    .chat-summaries {
+        @include nice-scrollbar();
+        overflow-x: hidden;
+        flex: 1 1 auto;
+    }
+
+    .join {
+        position: sticky;
+        bottom: 0;
+        padding: $sp3 $sp4;
+        background-color: var(--entry-bg);
+    }
+
+    .section-selector {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        margin: 0 $sp4 $sp4 $sp4;
+        gap: $sp3;
+        @include mobile() {
+            margin: 0 $sp3 $sp3 $sp3;
+        }
+    }
+
+    .search-subtitle {
+        margin-bottom: $sp3;
+        margin-left: 0;
+        padding: 0 $sp4;
+
+        @include mobile() {
+            padding: 0 $sp3;
+        }
+    }
+
+    .search-matches {
+        margin-top: $sp4;
+    }
+    .search-item-title {
+        margin-bottom: $sp3;
+    }
+    .search-item-desc {
+        color: var(--txt-light);
+        @include font(light, normal, fs-80);
+        @include ellipsis();
+    }
+
+    .explore-groups {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: toRem(80);
+        border-top: var(--bw) solid var(--bd);
+        border-bottom: var(--bw) solid var(--bd);
+        padding: $sp4;
+        gap: toRem(12);
+        cursor: pointer;
+
+        @include mobile() {
+            padding: $sp3 toRem(10);
+        }
+
+        .label {
+            flex: auto;
+        }
+
+        .disc {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            align-content: center;
+            text-align: center;
+            height: toRem(48);
+            width: toRem(48);
+            background-color: var(--icon-hv);
+            border-radius: 50%;
+        }
+    }
+
+    .user-result {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+
+        h4 {
+            display: flex;
+            align-items: center;
+            gap: $sp2;
+        }
+
+        .username {
+            font-weight: 200;
+            color: var(--txt-light);
+            @include clamp();
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chatlist/ChatListSearch.svelte b/frontend/app/src/desktop/features/chatlist/ChatListSearch.svelte
new file mode 100644
index 0000000000..e58ea4973a
--- /dev/null
+++ b/frontend/app/src/desktop/features/chatlist/ChatListSearch.svelte
@@ -0,0 +1,141 @@
+<script lang="ts">
+    import {
+        chatListScopeStore,
+        currentUserIdStore,
+        type BotMatch,
+        type ChatListScope,
+        type DirectChatIdentifier,
+        type GroupSearchResponse,
+        type OpenChat,
+        type ResourceKey,
+        type UserSummary,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { trimLeadingAtSymbol } from "@src/utils/user";
+    import Search from "@src/desktop/shared/Search.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        searchTerm: string;
+        searchResultsAvailable: boolean;
+        groupSearchResults?: Promise<GroupSearchResponse> | undefined;
+        userAndBotsSearchResults?: Promise<(UserSummary | BotMatch)[]> | undefined;
+    }
+
+    let {
+        searchTerm = $bindable(""),
+        searchResultsAvailable = $bindable(false),
+        groupSearchResults = $bindable(undefined),
+        userAndBotsSearchResults = $bindable(undefined),
+    }: Props = $props();
+
+    searchResultsAvailable;
+
+    let searching: boolean = $state(false);
+
+    $effect(() => {
+        void $chatListScopeStore.kind;
+        clearSearch();
+    });
+
+    function getPlaceholder(scope: ChatListScope["kind"]): ResourceKey {
+        switch (scope) {
+            case "community":
+                return i18nKey("searchChannelsPlaceholder");
+            case "chats":
+                return i18nKey("search");
+            case "favourite":
+                return i18nKey("searchFavouritesPlaceholder");
+            case "none":
+                return i18nKey("searchPlaceholder");
+        }
+    }
+
+    function clearSearch() {
+        searchTerm = "";
+    }
+
+    async function performSearch(term: string) {
+        searchResultsAvailable = false;
+        searchTerm = term;
+
+        searchTerm = trimLeadingAtSymbol(searchTerm);
+
+        if (searchTerm !== "") {
+            try {
+                searching = true;
+                const term = searchTerm.toLowerCase();
+                switch ($chatListScopeStore.kind) {
+                    case "none":
+                        legacySearch(term);
+                        break;
+                    case "chats":
+                        userAndBotSearch(term);
+                }
+            } catch (err) {
+                console.warn("search failed with: ", err);
+                searching = false;
+            } finally {
+                searching = false;
+            }
+        } else {
+            clearSearch();
+        }
+    }
+
+    function postSearch() {
+        if (searchTerm !== "") {
+            searchResultsAvailable = true;
+        } else {
+            clearSearch();
+        }
+    }
+
+    function sortUsersOrBots(_a: UserSummary | BotMatch, _b: UserSummary | BotMatch): number {
+        return 0;
+    }
+
+    async function userAndBotSearch(term: string) {
+        userAndBotsSearchResults = Promise.all([searchUsers(term), searchBots(term)]).then(
+            ([users, bots]) => [...users, ...bots].sort(sortUsersOrBots),
+        );
+        await userAndBotsSearchResults.then(postSearch);
+    }
+
+    function searchBots(term: string): Promise<BotMatch[]> {
+        // This location is rather hacky because we can't have a direct chat with ourselves
+        // but it signals to the explore_bots endpoint that we want to see bots that are
+        // available for direct chat.
+        const location = {
+            kind: "direct_chat",
+            userId: $currentUserIdStore,
+        } as DirectChatIdentifier;
+
+        return client.exploreBots(term, 0, 10, location, false).then((result) => {
+            return result.kind === "success" ? result.matches : [];
+        });
+    }
+
+    function searchUsers(term: string): Promise<UserSummary[]> {
+        return client.searchUsers(term, 10);
+    }
+
+    async function legacySearch(term: string) {
+        groupSearchResults = client.searchGroups(term, 10);
+        userAndBotsSearchResults = client.searchUsers(term, 10);
+        Promise.all([groupSearchResults, userAndBotsSearchResults]).then(postSearch);
+    }
+    let placeholder = $derived(getPlaceholder($chatListScopeStore.kind));
+    $effect(() => {
+        if (searchTerm === "") {
+            searching = false;
+            searchResultsAvailable = false;
+            groupSearchResults = undefined;
+            userAndBotsSearchResults = undefined;
+        }
+    });
+</script>
+
+<Search {placeholder} {searching} {searchTerm} onPerformSearch={performSearch} />
diff --git a/frontend/app/src/components/home/ChatListSectionButton.svelte b/frontend/app/src/desktop/features/chatlist/ChatListSectionButton.svelte
similarity index 79%
rename from frontend/app/src/components/home/ChatListSectionButton.svelte
rename to frontend/app/src/desktop/features/chatlist/ChatListSectionButton.svelte
index 45ad345994..bb33da1411 100644
--- a/frontend/app/src/components/home/ChatListSectionButton.svelte
+++ b/frontend/app/src/desktop/features/chatlist/ChatListSectionButton.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
     import { emptyUnreadCounts, mobileWidth, type ResourceKey } from "@client";
-    import Button from "../Button.svelte";
-    import Translatable from "../Translatable.svelte";
-    import UnreadCount from "./UnreadCount.svelte";
+    import Button from "@src/ui/Button.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import UnreadCount from "@src/desktop/shared/UnreadCount.svelte";
 
     interface Props {
         selected?: boolean;
diff --git a/frontend/app/src/desktop/features/chatlist/ChatSummary.svelte b/frontend/app/src/desktop/features/chatlist/ChatSummary.svelte
new file mode 100644
index 0000000000..d6ea5f3085
--- /dev/null
+++ b/frontend/app/src/desktop/features/chatlist/ChatSummary.svelte
@@ -0,0 +1,963 @@
+<script lang="ts">
+    import { trackedEffect } from "@src/utils/effects.svelte";
+    import type {
+        ChatSummary,
+        CommunitySummary,
+        DiamondMembershipStatus,
+        MessageContent,
+        TypersByKey,
+        UserLookup,
+    } from "@client";
+    import {
+        allUsersStore,
+        AvatarSize,
+        blockedUsersStore,
+        botState,
+        chatIdentifiersEqual,
+        chatListScopeStore,
+        communitiesStore,
+        currentUserIdStore,
+        favouritesStore,
+        iconSize,
+        messagesRead,
+        mobileWidth,
+        notificationsSupported,
+        OpenChat,
+        pinnedChatsStore,
+        publish,
+        ROLE_NONE,
+        routeForScope,
+        selectedChatIdStore,
+        selectedCommunitySummaryStore,
+        suspendedUserStore,
+        translationsStore,
+        byContext as typersByContext,
+    } from "@client";
+    import { navigate } from "@src/utils/navigation";
+    import { getContext, onMount, untrack } from "svelte";
+    import { _ } from "svelte-i18n";
+    import ArchiveIcon from "svelte-material-icons/Archive.svelte";
+    import BellIcon from "svelte-material-icons/Bell.svelte";
+    import MutedIcon from "svelte-material-icons/BellOff.svelte";
+    import CameraTimer from "svelte-material-icons/CameraTimer.svelte";
+    import CheckboxMultipleMarked from "svelte-material-icons/CheckboxMultipleMarked.svelte";
+    import Delete from "svelte-material-icons/Delete.svelte";
+    import DotsVertical from "svelte-material-icons/DotsVertical.svelte";
+    import Heart from "svelte-material-icons/Heart.svelte";
+    import LocationExit from "svelte-material-icons/LocationExit.svelte";
+    import PinIcon from "svelte-material-icons/Pin.svelte";
+    import PinOffIcon from "svelte-material-icons/PinOff.svelte";
+    import DeleteOutline from "svelte-material-icons/DeleteOutline.svelte";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import { canDeleteDirectChat, publishDeleteDirectChat } from "@src/utils/directChat";
+    import { rtlStore } from "@src/stores/rtl";
+    import { now } from "@src/stores/time";
+    import { toastStore } from "@src/stores/toast";
+    import { pop } from "@src/utils/transition";
+    import { buildDisplayName } from "@src/utils/user";
+    import Avatar from "@src/desktop/shared/Avatar.svelte";
+    import { clamp, swipe } from "@src/ui/chatSwipe";
+    import HeartMinus from "@src/desktop/ui/icons/HeartMinus.svelte";
+    import HeartPlus from "@src/desktop/ui/icons/HeartPlus.svelte";
+    import WithVerifiedBadge from "@src/desktop/ui/icons/WithVerifiedBadge.svelte";
+    import Menu from "@src/desktop/shared/Menu.svelte";
+    import MenuIcon from "@src/desktop/shared/MenuIcon.svelte";
+    import MenuItem from "@src/desktop/shared/MenuItem.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import Typing from "@src/ui/Typing.svelte";
+    import ArchiveOffIcon from "./ArchiveOffIcon.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import Badges from "@src/desktop/features/profile/Badges.svelte";
+    import BotBadge from "@src/desktop/features/bots/exports/BotBadge.svelte";
+    import VideoCallIcon from "@src/desktop/features/calls/VideoCallIcon.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        chatSummary: ChatSummary;
+        selected: boolean;
+        visible: boolean;
+        onChatSelected: (chat: ChatSummary) => void;
+    }
+
+    let { chatSummary, selected, visible, onChatSelected }: Props = $props();
+
+    let externalContent = $derived(
+        chatSummary.kind === "channel" && chatSummary.externalUrl !== undefined,
+    );
+    let verified = $derived(chatSummary.kind === "group_chat" && chatSummary.verified);
+    let hovering = $state(false);
+    let unreadMessages = $state<number>(0);
+    let unreadMentions = $state<number>(0);
+    let chat = $derived(normaliseChatSummary($now, chatSummary, $typersByContext));
+    let lastMessage = $derived(formatLatestMessage(chatSummary, $allUsersStore));
+    let displayDate = $derived(client.getDisplayDate(chatSummary));
+    let community = $derived(
+        chatSummary.kind === "channel"
+            ? $communitiesStore.get({ kind: "community", communityId: chatSummary.id.communityId })
+            : undefined,
+    );
+    let blocked = $derived(
+        chatSummary.kind === "direct_chat" && $blockedUsersStore.has(chatSummary.them.userId),
+    );
+    let readonly = $derived(client.isChatReadOnly(chatSummary.id));
+    let canDelete = $derived(getCanDelete(chatSummary, community));
+    let pinned = $derived(
+        $pinnedChatsStore
+            .get($chatListScopeStore.kind)
+            ?.find((id) => chatIdentifiersEqual(id, chatSummary.id)) !== undefined,
+    );
+    let muted = $derived(chatSummary.membership.notificationsMuted);
+    let atEveryoneMuted = $derived(chatSummary.membership.atEveryoneMuted);
+    const maxDelOffset = -60;
+    let delOffset = $state(maxDelOffset);
+    let swiped = $state(false);
+
+    $effect(() => updateUnreadCounts(chatSummary));
+
+    onMount(() => {
+        return messagesRead.subscribe(() => updateUnreadCounts(chatSummary));
+    });
+
+    /***
+     * This needs to be called both when the chatSummary changes (because that may have changed the latestMessage)
+     * and when the internal state of the MessageReadTracker changes. Both are necessary to get the right value
+     * at all times.
+     */
+    function updateUnreadCounts(chatSummary: ChatSummary) {
+        untrack(() => {
+            unreadMessages = client.unreadMessageCount(
+                chatSummary.id,
+                chatSummary.latestMessage?.event.messageIndex,
+            );
+            unreadMentions = getUnreadMentionCount(chatSummary);
+
+            if (chatSummary.membership.archived && unreadMessages > 0 && !chat.bot) {
+                unarchiveChat();
+            }
+        });
+    }
+
+    function normaliseChatSummary(_now: number, chatSummary: ChatSummary, typing: TypersByKey) {
+        const fav =
+            $chatListScopeStore.kind !== "favourite" && $favouritesStore.has(chatSummary.id);
+        const muted = chatSummary.membership.notificationsMuted;
+        const video = chatSummary.videoCallInProgress
+            ? { muted: muted ? 1 : 0, unmuted: muted ? 0 : 1 }
+            : { muted: 0, unmuted: 0 };
+        switch (chatSummary.kind) {
+            case "direct_chat":
+                const them = $allUsersStore.get(chatSummary.them.userId);
+                return {
+                    name: client.displayName(them),
+                    diamondStatus: them?.diamondStatus ?? "inactive",
+                    streak: them?.streak ?? 0,
+                    chitEarned: them?.totalChitEarned,
+                    hasAchievedMaxStreak: (them?.maxStreak ?? 0) >= 365,
+                    avatarUrl: client.userAvatarUrl(them),
+                    userId: chatSummary.them,
+                    typing: client.getTypingString(
+                        $_,
+                        $allUsersStore,
+                        { chatId: chatSummary.id },
+                        typing,
+                    ),
+                    fav,
+                    eventsTTL: chatSummary.eventsTTL,
+                    video,
+                    private: false,
+                    uniquePerson: them?.isUniquePerson ?? false,
+                    bot: them?.kind === "bot",
+                };
+            default:
+                return {
+                    name: chatSummary.name,
+                    diamondStatus: "inactive" as DiamondMembershipStatus["kind"],
+                    streak: 0,
+                    chitEarned: undefined,
+                    hasAchievedMaxStreak: false,
+                    avatarUrl: client.groupAvatarUrl(chatSummary, $selectedCommunitySummaryStore),
+                    userId: undefined,
+                    typing: client.getTypingString(
+                        $_,
+                        $allUsersStore,
+                        { chatId: chatSummary.id },
+                        typing,
+                    ),
+                    fav,
+                    eventsTTL: chatSummary.eventsTTL,
+                    video,
+                    private: !chatSummary.public,
+                    uniquePerson: false,
+                    bot: false,
+                };
+        }
+    }
+
+    function getUnreadMentionCount(chat: ChatSummary): number {
+        if (chat.kind === "direct_chat") return 0;
+        return chat.membership.mentions.filter(
+            (m) => !client.isMessageRead({ chatId: chat.id }, m.messageIndex, m.messageId),
+        ).length;
+    }
+
+    function translateMessage(messageId: bigint, content: MessageContent): MessageContent {
+        const translation = $translationsStore.get(messageId);
+        return translation ? client.applyTranslation(content, translation) : content;
+    }
+
+    function formatLatestMessage(chatSummary: ChatSummary, users: UserLookup): string {
+        if (chatSummary.latestMessageIndex === undefined || externalContent) {
+            return "";
+        }
+
+        if (
+            (chatSummary.latestMessage !== undefined &&
+                chatSummary.eventsTtlLastUpdated > chatSummary.latestMessage.timestamp) ||
+            (chatSummary.latestMessage === undefined &&
+                chatSummary.eventsTTL !== undefined &&
+                chatSummary.membership.role !== ROLE_NONE)
+        ) {
+            return chatSummary.eventsTTL !== undefined
+                ? $_("disappearingMessages.timeUpdated", {
+                      values: {
+                          duration: client.formatDuration(Number(chatSummary.eventsTTL)),
+                      },
+                  })
+                : $_("disappearingMessages.disabled");
+        }
+
+        if (chatSummary.latestMessage === undefined) {
+            return "";
+        }
+
+        const latestMessageText = client.getContentAsText(
+            $_,
+            translateMessage(
+                chatSummary.latestMessage.event.messageId,
+                chatSummary.latestMessage.event.content,
+            ),
+        );
+
+        if (chatSummary.kind === "direct_chat") {
+            return latestMessageText;
+        }
+
+        let userType: "user" | "me" | "webhook" = "user";
+        if (chatSummary.latestMessage.event.senderContext?.kind === "webhook") {
+            userType = "webhook";
+        } else if (chatSummary.latestMessage.event.sender === $currentUserIdStore) {
+            userType = "me";
+        }
+
+        const user = buildDisplayName(
+            users,
+            chatSummary.latestMessage.event.sender,
+            userType,
+            false,
+        );
+
+        return `${user}: ${latestMessageText}`;
+    }
+
+    trackedEffect("unarchive-chat", () => {
+        if (chatSummary.membership.archived && unreadMessages > 0 && !chat.bot) {
+            unarchiveChat();
+        }
+    });
+
+    function deleteEmptyChat(e: Event) {
+        e.stopPropagation();
+        e.preventDefault();
+        const directBot =
+            chatSummary.kind === "direct_chat"
+                ? botState.externalBots.get(chatSummary.them.userId)
+                : undefined;
+        if (directBot !== undefined) {
+            client.uninstallBot({ kind: "direct_chat", userId: $currentUserIdStore }, directBot.id);
+        } else {
+            client.removePreviewedChat(chatSummary.id);
+        }
+        navigate(routeForScope($chatListScopeStore));
+        delOffset = -60;
+    }
+
+    function leftSwipe() {
+        if (swiped) return;
+        if (delOffset > maxDelOffset / 2) {
+            delOffset = 0;
+            swiped = true;
+        } else {
+            delOffset = maxDelOffset;
+            swiped = false;
+        }
+    }
+
+    function rightSwipe() {
+        if (!swiped) return;
+        if (delOffset < maxDelOffset / 2) {
+            delOffset = maxDelOffset;
+            swiped = false;
+        } else {
+            delOffset = 0;
+            swiped = true;
+        }
+    }
+
+    function swiping({ detail: { diffx } }: CustomEvent<{ diffx: number }>) {
+        if (diffx > 0 && !swiped) {
+            delOffset = clamp(maxDelOffset, 0, maxDelOffset + diffx);
+        }
+
+        if (diffx < 0 && swiped) {
+            delOffset = clamp(maxDelOffset, 0, 0 + diffx);
+        }
+    }
+
+    function pinChat() {
+        client.pinChat(chatSummary.id).then((success) => {
+            if (!success) {
+                toastStore.showFailureToast(i18nKey("pinChat.failed"));
+            }
+        });
+    }
+
+    function unpinChat() {
+        client.unpinChat(chatSummary.id).then((success) => {
+            if (!success) {
+                toastStore.showFailureToast(i18nKey("pinChat.unpinFailed"));
+            }
+        });
+    }
+
+    function toggleMuteNotifications(
+        mute: boolean | undefined,
+        muteAtEveryone: boolean | undefined,
+    ) {
+        publish("toggleMuteNotifications", { chatId: chatSummary.id, mute, muteAtEveryone });
+    }
+
+    function archiveChat() {
+        client.markAllRead(chatSummary);
+        client.archiveChat(chatSummary.id).then((success) => {
+            if (!success) {
+                toastStore.showFailureToast(i18nKey("archiveChatFailed"));
+            }
+        });
+        if (chatSummary.id === $selectedChatIdStore) {
+            navigate(routeForScope($chatListScopeStore));
+        }
+    }
+
+    function selectChat() {
+        onChatSelected(chatSummary);
+    }
+
+    function addToFavourites() {
+        client.addToFavourites(chatSummary.id);
+    }
+
+    function removeFromFavourites() {
+        client.removeFromFavourites(chatSummary.id);
+    }
+
+    function unarchiveChat() {
+        publish("unarchiveChat", chatSummary.id);
+    }
+
+    function leaveGroup() {
+        if (chatSummary.kind === "direct_chat") return;
+        publish("leaveGroup", {
+            kind: "leave",
+            chatId: chatSummary.id,
+            level: chatSummary.level,
+        });
+    }
+
+    function getCanDelete(chat: ChatSummary, community: CommunitySummary | undefined) {
+        switch (chat.kind) {
+            case "direct_chat":
+                return chat.latestMessage === undefined;
+            case "group_chat":
+                return chat.membership.role === ROLE_NONE;
+            case "channel":
+                return (
+                    community !== undefined &&
+                    community.membership.role !== ROLE_NONE &&
+                    chat.membership.role === ROLE_NONE
+                );
+        }
+    }
+
+    let showDeleteDirectChat = $derived(canDeleteDirectChat(chatSummary));
+</script>
+
+{#if visible}
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <div
+        role="button"
+        class="chat-summary"
+        class:selected
+        tabindex="0"
+        use:swipe={{ threshold: 20 }}
+        onswiping={swiping}
+        onleftswipe={leftSwipe}
+        onrightswipe={rightSwipe}
+        class:empty={canDelete}
+        class:rtl={$rtlStore}
+        onmouseenter={() => (hovering = true)}
+        onmouseleave={() => (hovering = false)}
+        onclick={selectChat}>
+        <div class="avatar">
+            <Avatar
+                statusBorder={selected || hovering ? "var(--chatSummary-hv)" : "transparent"}
+                {blocked}
+                url={chat.avatarUrl}
+                showStatus
+                maxStreak={chat.hasAchievedMaxStreak}
+                userId={chat.userId?.userId}
+                size={AvatarSize.Default} />
+            {#if chat.eventsTTL}
+                <div class="expires">
+                    <CameraTimer size={"1em"} color={"var(--txt)"} />
+                </div>
+            {/if}
+            <VideoCallIcon video={chat.video} />
+        </div>
+        <div class="details" class:rtl={$rtlStore}>
+            <div class="name-date">
+                <div class="chat-name">
+                    {#if chat.private}
+                        <div class="private"></div>
+                    {/if}
+                    <WithVerifiedBadge {verified} size={"small"}>
+                        <h4>
+                            {#if community !== undefined && $chatListScopeStore.kind === "favourite"}
+                                <span>{community.name}</span>
+                                <span>{">"}</span>
+                            {/if}
+                            <span>{chat.name}</span>
+                        </h4>
+                        <Badges
+                            uniquePerson={chat.uniquePerson}
+                            diamondStatus={chat.diamondStatus}
+                            streak={chat.streak}
+                            chitEarned={chat.chitEarned} />
+                    </WithVerifiedBadge>
+                    <BotBadge bot={chat.bot} />
+                </div>
+            </div>
+            <div class="chat-msg">
+                {#if chat.typing !== undefined}
+                    {chat.typing} <Typing />
+                {:else}
+                    <Markdown text={lastMessage} oneLine suppressLinks />
+                {/if}
+            </div>
+        </div>
+        {#if !externalContent}
+            <!-- this date formatting is OK for now but we might want to use something like this:
+            https://date-fns.org/v2.22.1/docs/formatDistanceToNow -->
+            <div class:rtl={$rtlStore} class="chat-date">
+                {#if muted && notificationsSupported}
+                    <div class="mute icon" class:rtl={$rtlStore}>
+                        <MutedIcon size={"1em"} color={"var(--icon-txt)"} />
+                    </div>
+                {/if}
+                {#if pinned}
+                    <div class="pin icon">
+                        <PinIcon size={"1em"} color={"var(--icon-txt)"} />
+                    </div>
+                {/if}
+                {#if chat.fav}
+                    <div class="fav icon">
+                        <Heart size={"1em"} color={"var(--icon-txt)"} />
+                    </div>
+                {/if}
+                {client.formatMessageDate(displayDate, $_("today"), $_("yesterday"), true, true)}
+            </div>
+            {#if !readonly}
+                {#if unreadMentions > 0}
+                    <div
+                        in:pop={{ duration: 1500 }}
+                        title={$_("chatSummary.mentions", {
+                            values: { count: unreadMentions.toString() },
+                        })}
+                        class:rtl={$rtlStore}
+                        class="notification mention">
+                        @
+                    </div>
+                {/if}
+                {#if unreadMessages > 0}
+                    <div
+                        in:pop={{ duration: 1500 }}
+                        title={$_("chatSummary.unread", {
+                            values: { count: unreadMessages.toString() },
+                        })}
+                        class:rtl={$rtlStore}
+                        class:muted
+                        class="notification">
+                        {unreadMessages > 999 ? "999+" : unreadMessages}
+                    </div>
+                {/if}
+                {#if !$suspendedUserStore}
+                    <div class="menu">
+                        <MenuIcon position={"bottom"} align={"end"}>
+                            {#snippet menuIcon()}
+                                <div class="menu-icon" class:rtl={$rtlStore}>
+                                    <DotsVertical
+                                        viewBox="0 -3 24 24"
+                                        size="1.6em"
+                                        color={"var(--icon-txt)"} />
+                                </div>
+                            {/snippet}
+                            {#snippet menuItems()}
+                                <Menu>
+                                    {#if !$favouritesStore.has(chatSummary.id)}
+                                        <MenuItem onclick={addToFavourites}>
+                                            {#snippet icon()}
+                                                <HeartPlus
+                                                    size={$iconSize}
+                                                    color={"var(--menu-warn)"} />
+                                            {/snippet}
+                                            {#snippet text()}
+                                                <Translatable
+                                                    resourceKey={i18nKey(
+                                                        "communities.addToFavourites",
+                                                    )} />
+                                            {/snippet}
+                                        </MenuItem>
+                                    {:else}
+                                        <MenuItem onclick={removeFromFavourites}>
+                                            {#snippet icon()}
+                                                <HeartMinus
+                                                    size={$iconSize}
+                                                    color={"var(--menu-warn)"} />
+                                            {/snippet}
+                                            {#snippet text()}
+                                                <Translatable
+                                                    resourceKey={i18nKey(
+                                                        "communities.removeFromFavourites",
+                                                    )} />
+                                            {/snippet}
+                                        </MenuItem>
+                                    {/if}
+                                    {#if !pinned}
+                                        <MenuItem onclick={pinChat}>
+                                            {#snippet icon()}
+                                                <PinIcon
+                                                    size={$iconSize}
+                                                    color={"var(--icon-inverted-txt)"} />
+                                            {/snippet}
+                                            {#snippet text()}
+                                                <Translatable
+                                                    resourceKey={i18nKey("pinChat.menuItem")} />
+                                            {/snippet}
+                                        </MenuItem>
+                                    {:else}
+                                        <MenuItem onclick={unpinChat}>
+                                            {#snippet icon()}
+                                                <PinOffIcon
+                                                    size={$iconSize}
+                                                    color={"var(--icon-inverted-txt)"} />
+                                            {/snippet}
+                                            {#snippet text()}
+                                                <Translatable
+                                                    resourceKey={i18nKey(
+                                                        "pinChat.unpinMenuItem",
+                                                    )} />
+                                            {/snippet}
+                                        </MenuItem>
+                                    {/if}
+                                    {#if notificationsSupported && !externalContent}
+                                        {#if muted}
+                                            <MenuItem
+                                                onclick={() =>
+                                                    toggleMuteNotifications(false, undefined)}>
+                                                {#snippet icon()}
+                                                    <BellIcon
+                                                        size={$iconSize}
+                                                        color={"var(--icon-inverted-txt)"} />
+                                                {/snippet}
+                                                {#snippet text()}
+                                                    <Translatable
+                                                        resourceKey={i18nKey(
+                                                            "unmuteNotifications",
+                                                        )} />
+                                                {/snippet}
+                                            </MenuItem>
+                                        {:else}
+                                            <MenuItem
+                                                onclick={() =>
+                                                    toggleMuteNotifications(true, undefined)}>
+                                                {#snippet icon()}
+                                                    <MutedIcon
+                                                        size={$iconSize}
+                                                        color={"var(--icon-inverted-txt)"} />
+                                                {/snippet}
+                                                {#snippet text()}
+                                                    <Translatable
+                                                        resourceKey={i18nKey(
+                                                            "muteNotifications",
+                                                        )} />
+                                                {/snippet}
+                                            </MenuItem>
+                                        {/if}
+                                        {#if atEveryoneMuted}
+                                            <MenuItem
+                                                onclick={() =>
+                                                    toggleMuteNotifications(undefined, false)}>
+                                                {#snippet icon()}
+                                                    <MutedIcon
+                                                        size={$iconSize}
+                                                        color={"var(--icon-inverted-txt)"} />
+                                                {/snippet}
+                                                {#snippet text()}
+                                                    <Translatable
+                                                        resourceKey={i18nKey("unmuteAtEveryone")} />
+                                                {/snippet}
+                                            </MenuItem>
+                                        {:else}
+                                            <MenuItem
+                                                onclick={() =>
+                                                    toggleMuteNotifications(undefined, true)}>
+                                                {#snippet icon()}
+                                                    <MutedIcon
+                                                        size={$iconSize}
+                                                        color={"var(--icon-inverted-txt)"} />
+                                                {/snippet}
+                                                {#snippet text()}
+                                                    <Translatable
+                                                        resourceKey={i18nKey("muteAtEveryone")} />
+                                                {/snippet}
+                                            </MenuItem>
+                                        {/if}
+                                    {/if}
+                                    {#if !externalContent}
+                                        <MenuItem
+                                            disabled={unreadMessages === 0}
+                                            onclick={() => client.markAllRead(chatSummary)}>
+                                            {#snippet icon()}
+                                                <CheckboxMultipleMarked
+                                                    size={$iconSize}
+                                                    color={"var(--icon-inverted-txt)"} />
+                                            {/snippet}
+                                            {#snippet text()}
+                                                <Translatable
+                                                    resourceKey={i18nKey("markAllRead")} />
+                                            {/snippet}
+                                        </MenuItem>
+                                    {/if}
+                                    {#if !chat.bot}
+                                        {#if chatSummary.membership.archived}
+                                            <MenuItem onclick={selectChat}>
+                                                {#snippet icon()}
+                                                    <ArchiveOffIcon
+                                                        size={$iconSize}
+                                                        color={"var(--icon-inverted-txt)"} />
+                                                {/snippet}
+                                                {#snippet text()}
+                                                    <Translatable
+                                                        resourceKey={i18nKey("unarchiveChat")} />
+                                                {/snippet}
+                                            </MenuItem>
+                                        {:else}
+                                            <MenuItem onclick={archiveChat}>
+                                                {#snippet icon()}
+                                                    <ArchiveIcon
+                                                        size={$iconSize}
+                                                        color={"var(--icon-inverted-txt)"} />
+                                                {/snippet}
+                                                {#snippet text()}
+                                                    <Translatable
+                                                        resourceKey={i18nKey("archiveChat")} />
+                                                {/snippet}
+                                            </MenuItem>
+                                        {/if}
+                                    {/if}
+                                    {#if chatSummary.kind !== "direct_chat" && client.canLeaveGroup(chatSummary.id)}
+                                        <MenuItem warning onclick={leaveGroup}>
+                                            {#snippet icon()}
+                                                <LocationExit
+                                                    size={$iconSize}
+                                                    color={"var(--menu-warn)"} />
+                                            {/snippet}
+                                            {#snippet text()}
+                                                {interpolate(
+                                                    $_,
+                                                    i18nKey(
+                                                        "leaveGroup",
+                                                        undefined,
+                                                        chatSummary.level,
+                                                        true,
+                                                    ),
+                                                )}
+                                            {/snippet}
+                                        </MenuItem>
+                                    {/if}
+                                    {#if showDeleteDirectChat}
+                                        <MenuItem
+                                            warning
+                                            onclick={() => publishDeleteDirectChat(chatSummary)}>
+                                            {#snippet icon()}
+                                                <DeleteOutline
+                                                    size={$iconSize}
+                                                    color={"var(--menu-warn)"} />
+                                            {/snippet}
+                                            {#snippet text()}
+                                                <Translatable resourceKey={i18nKey("deleteChat")} />
+                                            {/snippet}
+                                        </MenuItem>
+                                    {/if}
+                                </Menu>
+                            {/snippet}
+                        </MenuIcon>
+                    </div>
+                {/if}
+            {/if}
+        {/if}
+        {#if canDelete}
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <div
+                title={$_("removeChat")}
+                style={$mobileWidth
+                    ? $rtlStore
+                        ? `left: ${delOffset}px`
+                        : `right: ${delOffset}px`
+                    : ""}
+                onclick={deleteEmptyChat}
+                class:rtl={$rtlStore}
+                class="delete-chat">
+                <Delete size={$iconSize} color={"#fff"} />
+            </div>
+        {/if}
+    </div>
+{/if}
+
+<style lang="scss">
+    :global(.chat-name .with_verified) {
+        gap: $sp2;
+    }
+
+    .delete-chat {
+        background-color: var(--chatSummary-del);
+        padding: $sp3;
+        position: absolute;
+        right: -60px;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 60px;
+        cursor: pointer;
+
+        @include size-above(sm) {
+            transition: right 200ms ease-in-out;
+            transition-delay: 200ms;
+        }
+
+        &.rtl {
+            right: unset;
+            left: -60px;
+        }
+    }
+
+    .chat-summary {
+        position: relative;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: $sp4;
+        margin-bottom: 0;
+        cursor: pointer;
+        transition:
+            background-color ease-in-out 100ms,
+            border-color ease-in-out 100ms;
+        user-select: none;
+
+        @include mobile() {
+            padding: $sp3 toRem(10);
+        }
+
+        @media (hover: hover) {
+            &:hover {
+                background-color: var(--chatSummary-hv);
+
+                @include size-above(sm) {
+                    .delete-chat {
+                        right: 0px;
+                        &.rtl {
+                            right: unset;
+                            left: 0px;
+                        }
+                    }
+                }
+            }
+        }
+
+        &.selected {
+            background-color: var(--chatSummary-bg-selected);
+        }
+
+        .menu {
+            flex: 0;
+        }
+
+        .menu-icon {
+            width: 0;
+            transition:
+                width 200ms ease-in-out,
+                opacity 200ms;
+            height: 0;
+            opacity: 0;
+            position: relative;
+            bottom: 0.4em;
+
+            @include mobile() {
+                width: 18px;
+                opacity: 0.4;
+                margin-left: 6px;
+
+                &.rtl {
+                    margin-left: unset;
+                    margin-right: 6px;
+                }
+            }
+        }
+
+        .icon {
+            height: 0;
+            &.mute {
+                margin-left: 2px;
+                @include font-size(fs-70);
+                &.rtl {
+                    margin-left: 0;
+                    margin-right: 2px;
+                }
+            }
+            &.pin {
+                @include font-size(fs-80);
+            }
+        }
+
+        @media (hover) {
+            &:hover {
+                .menu-icon {
+                    transition-delay: 200ms;
+                    width: $sp4;
+                    opacity: 1;
+                }
+            }
+        }
+    }
+    .avatar {
+        flex: 0 0 40px;
+        position: relative;
+    }
+
+    .expires {
+        @include disappearing();
+    }
+
+    .details {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        height: toRem(48);
+        overflow: hidden;
+
+        &:not(.rtl) {
+            padding: 0 0 0 12px;
+        }
+        &.rtl {
+            padding: 0 12px 0 0;
+        }
+
+        .name-date {
+            display: flex;
+            margin-bottom: $sp1;
+
+            .chat-name {
+                h4 {
+                    @include font(medium, normal, fs-100);
+                    display: flex;
+                    flex-direction: row;
+                    gap: $sp2;
+                }
+
+                display: flex;
+                align-items: center;
+                gap: $sp2;
+
+                @include ellipsis();
+                flex: auto;
+            }
+        }
+
+        .chat-msg {
+            color: var(--txt-light);
+            @include font(book, normal, fs-80);
+        }
+    }
+
+    .chat-date {
+        display: flex;
+        gap: $sp2;
+        position: absolute;
+        color: var(--txt-light);
+        @include font(book, normal, fs-60);
+        top: $sp3;
+        &:not(.rtl) {
+            right: $sp4;
+        }
+        &.rtl {
+            left: $sp4;
+        }
+
+        @include mobile() {
+            &:not(.rtl) {
+                right: $sp3;
+            }
+            &.rtl {
+                left: $sp3;
+            }
+        }
+    }
+
+    .notification {
+        @include unread();
+        margin-top: 18px;
+        margin-left: 2px;
+        &:not(.rtl) {
+            right: $sp3;
+        }
+
+        &.rtl {
+            left: $sp3;
+            margin-right: 2px;
+            margin-left: 0;
+        }
+
+        &.muted {
+            background-color: var(--unread-mute);
+            color: var(--unread-mute-txt);
+            text-shadow: none;
+        }
+    }
+
+    .mention {
+        margin-right: 2px;
+        &.rtl {
+            margin-left: 2px;
+        }
+    }
+    .private {
+        background-repeat: no-repeat;
+        $size: 12px;
+        flex: 0 0 $size;
+        width: $size;
+        height: $size;
+        background-image: url("/assets/locked.svg");
+    }
+</style>
diff --git a/frontend/app/src/components/home/SearchResult.svelte b/frontend/app/src/desktop/features/chatlist/SearchResult.svelte
similarity index 96%
rename from frontend/app/src/components/home/SearchResult.svelte
rename to frontend/app/src/desktop/features/chatlist/SearchResult.svelte
index 37cb09cb81..bb5a232323 100644
--- a/frontend/app/src/components/home/SearchResult.svelte
+++ b/frontend/app/src/desktop/features/chatlist/SearchResult.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { AvatarSize } from "@client";
     import type { Snippet } from "svelte";
-    import Avatar from "../Avatar.svelte";
+    import Avatar from "@src/desktop/shared/Avatar.svelte";
 
     interface Props {
         showSpinner?: boolean | undefined;
diff --git a/frontend/app/src/components/home/ChannelOrCommunityInvite.svelte b/frontend/app/src/desktop/features/chats/community/ChannelOrCommunityInvite.svelte
similarity index 89%
rename from frontend/app/src/components/home/ChannelOrCommunityInvite.svelte
rename to frontend/app/src/desktop/features/chats/community/ChannelOrCommunityInvite.svelte
index f110e4836a..1fbc328255 100644
--- a/frontend/app/src/components/home/ChannelOrCommunityInvite.svelte
+++ b/frontend/app/src/desktop/features/chats/community/ChannelOrCommunityInvite.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
     import { type ChannelSummary, type CommunitySummary, type UserSummary } from "@client";
-    import ScopeToggle from "./communities/ScopeToggle.svelte";
-    import InviteUsersHeader from "./groupdetails/InviteUsersHeader.svelte";
-    import InviteUsersBody from "./groupdetails/InviteUsersBody.svelte";
+    import ScopeToggle from "./ScopeToggle.svelte";
+    import InviteUsersHeader from "@src/desktop/features/chats/group/InviteUsersHeader.svelte";
+    import InviteUsersBody from "@src/desktop/features/chats/group/InviteUsersBody.svelte";
 
     interface Props {
         channel: ChannelSummary;
diff --git a/frontend/app/src/components/home/ChannelOrCommunityMembers.svelte b/frontend/app/src/desktop/features/chats/community/ChannelOrCommunityMembers.svelte
similarity index 94%
rename from frontend/app/src/components/home/ChannelOrCommunityMembers.svelte
rename to frontend/app/src/desktop/features/chats/community/ChannelOrCommunityMembers.svelte
index 4c12ae2d89..191901b6d4 100644
--- a/frontend/app/src/components/home/ChannelOrCommunityMembers.svelte
+++ b/frontend/app/src/desktop/features/chats/community/ChannelOrCommunityMembers.svelte
@@ -17,10 +17,10 @@
         selectedCommunityMembersStore,
     } from "@client";
     import { getContext } from "svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import ScopeToggle from "./communities/ScopeToggle.svelte";
-    import Members from "./groupdetails/Members.svelte";
-    import MembersHeader from "./groupdetails/MembersHeader.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import ScopeToggle from "./ScopeToggle.svelte";
+    import Members from "@src/desktop/features/chats/group/Members.svelte";
+    import MembersHeader from "@src/desktop/features/chats/group/MembersHeader.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/components/home/ChannelOrCommunitySummary.svelte b/frontend/app/src/desktop/features/chats/community/ChannelOrCommunitySummary.svelte
similarity index 84%
rename from frontend/app/src/components/home/ChannelOrCommunitySummary.svelte
rename to frontend/app/src/desktop/features/chats/community/ChannelOrCommunitySummary.svelte
index 36f40c3f4a..8aabd74421 100644
--- a/frontend/app/src/components/home/ChannelOrCommunitySummary.svelte
+++ b/frontend/app/src/desktop/features/chats/community/ChannelOrCommunitySummary.svelte
@@ -10,12 +10,12 @@
         type CommunitySummary,
     } from "@client";
     import { getContext } from "svelte";
-    import CommunityDetails from "./communities/details/CommunityDetails.svelte";
-    import CommunityDetailsHeader from "./communities/details/CommunityDetailsHeader.svelte";
-    import CommunityCard from "./communities/explore/CommunityCard.svelte";
-    import ScopeToggle from "./communities/ScopeToggle.svelte";
-    import GroupDetailsBody from "./groupdetails/GroupDetailsBody.svelte";
-    import GroupDetailsHeader from "./groupdetails/GroupDetailsHeader.svelte";
+    import CommunityDetails from "@src/desktop/features/chats/community/details/CommunityDetails.svelte";
+    import CommunityDetailsHeader from "@src/desktop/features/chats/community/details/CommunityDetailsHeader.svelte";
+    import CommunityCard from "@src/desktop/features/chats/community/explore/CommunityCard.svelte";
+    import ScopeToggle from "./ScopeToggle.svelte";
+    import GroupDetailsBody from "@src/desktop/features/chats/group/GroupDetailsBody.svelte";
+    import GroupDetailsHeader from "@src/desktop/features/chats/group/GroupDetailsHeader.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/desktop/features/chats/community/CommunityMenu.svelte b/frontend/app/src/desktop/features/chats/community/CommunityMenu.svelte
new file mode 100644
index 0000000000..c057af6a88
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/community/CommunityMenu.svelte
@@ -0,0 +1,306 @@
+<script lang="ts">
+    import type { CommunitySummary, OpenChat } from "@client";
+    import {
+        chatSummariesListStore,
+        iconSize,
+        mobileWidth,
+        notificationsSupported,
+        platformModeratorStore,
+        publish,
+        ROLE_NONE,
+        setRightPanelHistory,
+    } from "@client";
+    import { getContext } from "svelte";
+    import AccountMultiple from "svelte-material-icons/AccountMultiple.svelte";
+    import AccountMultiplePlus from "svelte-material-icons/AccountMultiplePlus.svelte";
+    import BellOff from "svelte-material-icons/BellOff.svelte";
+    import CancelIcon from "svelte-material-icons/Cancel.svelte";
+    import TickIcon from "svelte-material-icons/Check.svelte";
+    import CheckboxMultipleMarked from "svelte-material-icons/CheckboxMultipleMarked.svelte";
+    import Contain from "svelte-material-icons/Contain.svelte";
+    import ContentCopy from "svelte-material-icons/ContentCopy.svelte";
+    import DeleteOutline from "svelte-material-icons/DeleteOutline.svelte";
+    import Kebab from "svelte-material-icons/DotsVertical.svelte";
+    import FileDocument from "svelte-material-icons/FileDocument.svelte";
+    import LocationExit from "svelte-material-icons/LocationExit.svelte";
+    import PencilOutline from "svelte-material-icons/PencilOutline.svelte";
+    import PlaylistPlus from "svelte-material-icons/PlaylistPlus.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import Menu from "@src/desktop/shared/Menu.svelte";
+    import MenuIcon from "@src/desktop/shared/MenuIcon.svelte";
+    import MenuItem from "@src/desktop/shared/MenuItem.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        community: CommunitySummary;
+        canMarkAllRead: boolean;
+    }
+
+    let { community, canMarkAllRead }: Props = $props();
+
+    let member = $derived(community.membership.role !== ROLE_NONE);
+    let frozen = $derived(client.isCommunityFrozen(community.id));
+    let canLeave = $derived(member);
+    let canDelete = $derived(member && !frozen && client.canDeleteCommunity(community.id));
+    let canEdit = $derived(member && !frozen && client.canEditCommunity(community.id));
+    let canInvite = $derived(member && !frozen && client.canInviteUsers(community.id));
+    let canCreateChannel = $derived(member && !frozen && client.canCreateChannel(community.id));
+    let isCommunityMuted = $derived(
+        $chatSummariesListStore.every((c) => c.membership.notificationsMuted),
+    );
+    let isAtEveryoneMutedForCommunity = $derived(
+        $chatSummariesListStore.every((c) => c.membership.atEveryoneMuted),
+    );
+
+    function leaveCommunity() {
+        publish("leaveCommunity", {
+            kind: "leave_community",
+            communityId: community.id,
+        });
+    }
+
+    function deleteCommunity() {
+        publish("deleteCommunity", {
+            kind: "delete_community",
+            communityId: community.id,
+            doubleCheck: {
+                challenge: i18nKey("typeGroupName", { name: community.name }),
+                response: i18nKey(community.name),
+            },
+        });
+    }
+
+    function communityDetails() {
+        publish("communityDetails", community);
+    }
+
+    function markAllRead() {
+        client.markAllReadForCurrentScope();
+    }
+
+    function newChannel() {
+        canCreateChannel && publish("newChannel", false);
+    }
+
+    function embedContent() {
+        canCreateChannel && publish("newChannel", true);
+    }
+
+    function copyUrl() {
+        publish("copyUrl");
+    }
+
+    function showMembers() {
+        setRightPanelHistory([{ kind: "show_community_members" }]);
+    }
+
+    function invite() {
+        if (canInvite) {
+            setRightPanelHistory([{ kind: "invite_community_users" }]);
+        }
+    }
+
+    function editCommunity() {
+        canEdit && publish("editCommunity", community);
+    }
+
+    function muteAllChannels(muteAtEveryone: boolean) {
+        client.muteAllChannels(community.id, muteAtEveryone);
+    }
+
+    function freezeCommunity() {
+        client.freezeCommunity(community.id, undefined).then((success) => {
+            if (!success) {
+                toastStore.showFailureToast(i18nKey("failedToFreezeCommunity"));
+            } else {
+                toastStore.showSuccessToast(i18nKey("communityFrozen"));
+            }
+        });
+    }
+
+    function unfreezeCommunity() {
+        client.unfreezeCommunity(community.id).then((success) => {
+            if (!success) {
+                toastStore.showFailureToast(i18nKey("failedToUnfreezeCommunity"));
+            } else {
+                toastStore.showSuccessToast(i18nKey("communityUnfrozen"));
+            }
+        });
+    }
+</script>
+
+<MenuIcon position="bottom" align="end">
+    {#snippet menuIcon()}
+        <HoverIcon>
+            <Kebab size={$iconSize} color={"var(--icon-txt)"} />
+        </HoverIcon>
+    {/snippet}
+    {#snippet menuItems()}
+        <Menu>
+            <MenuItem onclick={communityDetails}>
+                {#snippet icon()}
+                    <FileDocument size={$iconSize} color={"var(--icon-inverted-txt)"} />
+                {/snippet}
+                {#snippet text()}
+                    <div><Translatable resourceKey={i18nKey("communities.details")} /></div>
+                {/snippet}
+            </MenuItem>
+            <MenuItem onclick={showMembers}>
+                {#snippet icon()}
+                    <AccountMultiple size={$iconSize} color={"var(--icon-inverted-txt)"} />
+                {/snippet}
+                {#snippet text()}
+                    <div><Translatable resourceKey={i18nKey("communities.members")} /></div>
+                {/snippet}
+            </MenuItem>
+            {#if canInvite}
+                <MenuItem onclick={invite}>
+                    {#snippet icon()}
+                        <AccountMultiplePlus size={$iconSize} color={"var(--icon-inverted-txt)"} />
+                    {/snippet}
+                    {#snippet text()}
+                        <div>
+                            <Translatable resourceKey={i18nKey("communities.invite")} />
+                        </div>
+                    {/snippet}
+                </MenuItem>
+            {/if}
+            {#if canEdit}
+                <MenuItem onclick={editCommunity}>
+                    {#snippet icon()}
+                        <PencilOutline size={$iconSize} color={"var(--icon-inverted-txt)"} />
+                    {/snippet}
+                    {#snippet text()}
+                        <div>
+                            <Translatable resourceKey={i18nKey("communities.edit")} />
+                        </div>
+                    {/snippet}
+                </MenuItem>
+            {/if}
+            {#if canCreateChannel}
+                <MenuItem onclick={newChannel}>
+                    {#snippet icon()}
+                        <PlaylistPlus size={$iconSize} color={"var(--icon-inverted-txt)"} />
+                    {/snippet}
+                    {#snippet text()}
+                        <span
+                            ><Translatable
+                                resourceKey={i18nKey("communities.createChannel")} /></span>
+                    {/snippet}
+                </MenuItem>
+            {/if}
+            {#if canCreateChannel}
+                <MenuItem onclick={embedContent}>
+                    {#snippet icon()}
+                        <Contain size={$iconSize} color={"var(--icon-inverted-txt)"} />
+                    {/snippet}
+                    {#snippet text()}
+                        <span><Translatable resourceKey={i18nKey("communities.embed")} /></span>
+                    {/snippet}
+                </MenuItem>
+            {/if}
+            {#if $mobileWidth}
+                <MenuItem onclick={copyUrl}>
+                    {#snippet icon()}
+                        <ContentCopy size={$iconSize} color={"var(--icon-txt)"} />
+                    {/snippet}
+                    {#snippet text()}
+                        <Translatable resourceKey={i18nKey("copyUrl")} />
+                    {/snippet}
+                </MenuItem>
+            {/if}
+            <MenuItem disabled={!canMarkAllRead} onclick={markAllRead}>
+                {#snippet icon()}
+                    <CheckboxMultipleMarked size={$iconSize} color={"var(--icon-inverted-txt)"} />
+                {/snippet}
+                {#snippet text()}
+                    <span><Translatable resourceKey={i18nKey("markAllRead")} /></span>
+                {/snippet}
+            </MenuItem>
+            {#if notificationsSupported}
+                {#if !isCommunityMuted}
+                    <MenuItem onclick={() => muteAllChannels(false)}>
+                        {#snippet icon()}
+                            <BellOff size={$iconSize} color={"var(--icon-inverted-txt)"} />
+                        {/snippet}
+                        {#snippet text()}
+                            <span
+                                ><Translatable
+                                    resourceKey={i18nKey("communities.muteAllChannels")} /></span>
+                        {/snippet}
+                    </MenuItem>
+                {/if}
+                {#if !isAtEveryoneMutedForCommunity}
+                    <MenuItem onclick={() => muteAllChannels(true)}>
+                        {#snippet icon()}
+                            <BellOff size={$iconSize} color={"var(--icon-inverted-txt)"} />
+                        {/snippet}
+                        {#snippet text()}
+                            <span
+                                ><Translatable
+                                    resourceKey={i18nKey(
+                                        "communities.muteAllChannelsAtEveryone",
+                                    )} /></span>
+                        {/snippet}
+                    </MenuItem>
+                {/if}
+            {/if}
+            {#if member}
+                <MenuItem separator />
+                {#if canDelete}
+                    <MenuItem warning onclick={deleteCommunity}>
+                        {#snippet icon()}
+                            <DeleteOutline size={$iconSize} color={"var(--menu-warn)"} />
+                        {/snippet}
+                        {#snippet text()}
+                            <div>
+                                <Translatable resourceKey={i18nKey("communities.delete")} />
+                            </div>
+                        {/snippet}
+                    </MenuItem>
+                {/if}
+                {#if canLeave}
+                    <MenuItem warning onclick={leaveCommunity}>
+                        {#snippet icon()}
+                            <LocationExit size={$iconSize} color={"var(--menu-warn)"} />
+                        {/snippet}
+                        {#snippet text()}
+                            <div>
+                                <Translatable resourceKey={i18nKey("communities.leave")} />
+                            </div>
+                        {/snippet}
+                    </MenuItem>
+                {/if}
+            {/if}
+            {#if $platformModeratorStore}
+                {#if client.isCommunityFrozen(community.id)}
+                    <MenuItem warning onclick={unfreezeCommunity}>
+                        {#snippet icon()}
+                            <TickIcon size={$iconSize} color={"var(--menu-warn"} />
+                        {/snippet}
+                        {#snippet text()}
+                            <div>
+                                <Translatable resourceKey={i18nKey("unfreezeCommunity")} />
+                            </div>
+                        {/snippet}
+                    </MenuItem>
+                {:else}
+                    <MenuItem warning onclick={freezeCommunity}>
+                        {#snippet icon()}
+                            <CancelIcon size={$iconSize} color={"var(--menu-warn"} />
+                        {/snippet}
+                        {#snippet text()}
+                            <div>
+                                <Translatable resourceKey={i18nKey("freezeCommunity")} />
+                            </div>
+                        {/snippet}
+                    </MenuItem>
+                {/if}
+            {/if}
+        </Menu>
+    {/snippet}
+</MenuIcon>
diff --git a/frontend/app/src/desktop/features/chats/community/Convert.svelte b/frontend/app/src/desktop/features/chats/community/Convert.svelte
new file mode 100644
index 0000000000..c5041890ce
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/community/Convert.svelte
@@ -0,0 +1,149 @@
+<script lang="ts">
+    import {
+        chatListScopeStore,
+        defaultChatRules,
+        routeForChatIdentifier,
+        type ChannelIdentifier,
+        type ChatListScope,
+        type GroupChatSummary,
+        type OpenChat,
+    } from "@client";
+    import { navigate } from "@src/utils/navigation";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import FancyLoader from "@src/desktop/ui/icons/FancyLoader.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import Congratulations from "@src/desktop/features/upgrade/Congratulations.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        group: GroupChatSummary | undefined;
+    }
+
+    let { group = $bindable() }: Props = $props();
+
+    let scope: ChatListScope["kind"] | undefined;
+
+    let state: "idle" | "converting" | "converted" | "error" = $state("idle");
+    let channelId: ChannelIdentifier | undefined;
+
+    function convert() {
+        if (group === undefined) return;
+
+        scope = $chatListScopeStore.kind;
+        state = "converting";
+        client.convertGroupToCommunity(group, defaultChatRules("community")).then((id) => {
+            state = id ? "converted" : "error";
+            channelId = id;
+        });
+    }
+
+    function go() {
+        if (channelId !== undefined) {
+            close();
+            navigate(routeForChatIdentifier(scope ?? $chatListScopeStore.kind, channelId));
+        }
+    }
+
+    function close() {
+        group = undefined;
+        state = "idle";
+    }
+</script>
+
+{#if group !== undefined}
+    <Overlay dismissible onClose={close}>
+        <ModalContent closeIcon onClose={close}>
+            {#snippet header()}
+                <Translatable resourceKey={i18nKey("communities.convert")} />
+            {/snippet}
+            {#snippet body()}
+                <div
+                    class="body convert-to-community"
+                    class:error={state === "error"}
+                    class:loading={state === "converting" || state === "converted"}>
+                    {#if state === "converting"}
+                        <div class="spinner">
+                            <FancyLoader />
+                        </div>
+                        <p class="para">
+                            <Translatable resourceKey={i18nKey("communities.pleaseWait")} />
+                        </p>
+                    {:else if state === "idle"}
+                        <Markdown inline={false} text={$_("communities.convertInfo")} />
+                    {:else if state === "converted"}
+                        <Congratulations para={i18nKey("communities.converted")} />
+                    {:else if state === "error"}
+                        <div class="error-img"></div>
+                        <p class="para">
+                            <Translatable
+                                resourceKey={i18nKey("communities.errors.convertFailed")} />
+                        </p>
+                    {/if}
+                </div>
+            {/snippet}
+            {#snippet footer()}
+                <ButtonGroup>
+                    {#if state === "converted"}
+                        <Button secondary onClick={close}
+                            ><Translatable resourceKey={i18nKey("close")} /></Button>
+                        <Button onClick={go}
+                            ><Translatable resourceKey={i18nKey("communities.goto")} /></Button>
+                    {:else if state !== "error"}
+                        <Button secondary onClick={close}
+                            ><Translatable resourceKey={i18nKey("cancel")} /></Button>
+                        <Button
+                            disabled={state === "converting"}
+                            loading={state === "converting"}
+                            onClick={convert}
+                            ><Translatable
+                                resourceKey={i18nKey("communities.convertButton")} /></Button>
+                    {/if}
+                </ButtonGroup>
+            {/snippet}
+        </ModalContent>
+    </Overlay>
+{/if}
+
+<style lang="scss">
+    :global(.convert-to-community .markdown-wrapper ul) {
+        @include bullet_list();
+        @include font(book, normal, fs-90);
+        color: var(--txt-light);
+    }
+
+    .body {
+        min-height: 300px;
+
+        &.loading,
+        &.error {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+        }
+    }
+    .spinner {
+        width: 150px;
+        margin: 30px auto;
+    }
+
+    .error-img {
+        background-image: url("/assets/dead-bot.svg");
+        background-repeat: no-repeat;
+        width: 150px;
+        height: 150px;
+        margin: 30px auto;
+    }
+
+    .para {
+        margin-bottom: $sp3;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/community/DirectAndGroupChatsHeader.svelte b/frontend/app/src/desktop/features/chats/community/DirectAndGroupChatsHeader.svelte
new file mode 100644
index 0000000000..d6af02ea96
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/community/DirectAndGroupChatsHeader.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+    import { iconSize } from "@client";
+    import ForumOutline from "svelte-material-icons/ForumOutline.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import SectionHeader from "@src/desktop/shared/SectionHeader.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import GroupChatsMenu from "./GroupChatsMenu.svelte";
+
+    interface Props {
+        canMarkAllRead: boolean;
+    }
+
+    let props: Props = $props();
+</script>
+
+<SectionHeader slim border={false}>
+    <div class="favourites">
+        <div class="icon">
+            <ForumOutline size={$iconSize} color={"var(--icon-txt)"} />
+        </div>
+        <div class="details">
+            <h4 class="name">
+                <Translatable resourceKey={i18nKey("communities.directAndGroupChats")} />
+            </h4>
+        </div>
+        <span class="menu">
+            <GroupChatsMenu {...props} />
+        </span>
+    </div>
+</SectionHeader>
+
+<style lang="scss">
+    .favourites {
+        @include left_panel_header();
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/community/FavouriteChatsHeader.svelte b/frontend/app/src/desktop/features/chats/community/FavouriteChatsHeader.svelte
new file mode 100644
index 0000000000..ac4f9f7ffc
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/community/FavouriteChatsHeader.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+    import { iconSize, OpenChat } from "@client";
+    import { getContext } from "svelte";
+    import CheckboxMultipleMarked from "svelte-material-icons/CheckboxMultipleMarked.svelte";
+    import Kebab from "svelte-material-icons/DotsVertical.svelte";
+    import HeartOutline from "svelte-material-icons/HeartOutline.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import Menu from "@src/desktop/shared/Menu.svelte";
+    import MenuIcon from "@src/desktop/shared/MenuIcon.svelte";
+    import MenuItem from "@src/desktop/shared/MenuItem.svelte";
+    import SectionHeader from "@src/desktop/shared/SectionHeader.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        canMarkAllRead: boolean;
+    }
+
+    let { canMarkAllRead }: Props = $props();
+</script>
+
+<SectionHeader slim border={false}>
+    <div class="favourites">
+        <div class="icon">
+            <HeartOutline size={$iconSize} color={"var(--icon-txt)"} />
+        </div>
+        <div class="details">
+            <h4 class="name"><Translatable resourceKey={i18nKey("communities.favourites")} /></h4>
+        </div>
+        <span class="menu">
+            <MenuIcon position="bottom" align="end">
+                {#snippet menuIcon()}
+                    <HoverIcon>
+                        <Kebab size={$iconSize} color={"var(--icon-txt)"} />
+                    </HoverIcon>
+                {/snippet}
+                {#snippet menuItems()}
+                    <Menu>
+                        <MenuItem
+                            disabled={!canMarkAllRead}
+                            onclick={() => client.markAllReadForCurrentScope()}>
+                            {#snippet icon()}
+                                <CheckboxMultipleMarked
+                                    size={$iconSize}
+                                    color={"var(--icon-inverted-txt)"} />
+                            {/snippet}
+                            {#snippet text()}
+                                <span><Translatable resourceKey={i18nKey("markAllRead")} /></span>
+                            {/snippet}
+                        </MenuItem>
+                    </Menu>
+                {/snippet}
+            </MenuIcon>
+        </span>
+    </div>
+</SectionHeader>
+
+<style lang="scss">
+    .favourites {
+        @include left_panel_header();
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/community/GroupChatsMenu.svelte b/frontend/app/src/desktop/features/chats/community/GroupChatsMenu.svelte
new file mode 100644
index 0000000000..c39a2a43ee
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/community/GroupChatsMenu.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+    import type { OpenChat } from "@client";
+    import { anonUserStore, iconSize, identityStateStore, publish } from "@client";
+    import { getContext, tick } from "svelte";
+    import AccountMultiplePlus from "svelte-material-icons/AccountMultiplePlus.svelte";
+    import CheckboxMultipleMarked from "svelte-material-icons/CheckboxMultipleMarked.svelte";
+    import Kebab from "svelte-material-icons/DotsVertical.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import Menu from "@src/desktop/shared/Menu.svelte";
+    import MenuIcon from "@src/desktop/shared/MenuIcon.svelte";
+    import MenuItem from "@src/desktop/shared/MenuItem.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        canMarkAllRead: boolean;
+    }
+
+    let { canMarkAllRead }: Props = $props();
+
+    function newGroup() {
+        if ($anonUserStore) {
+            client.updateIdentityState({
+                kind: "logging_in",
+                postLogin: { kind: "create_group" },
+            });
+        } else {
+            publish("newGroup");
+        }
+    }
+    $effect(() => {
+        if (
+            $identityStateStore.kind === "logged_in" &&
+            $identityStateStore.postLogin?.kind === "create_group"
+        ) {
+            client.clearPostLoginState();
+            tick().then(() => newGroup());
+        }
+    });
+</script>
+
+<MenuIcon position="bottom" align="end">
+    {#snippet menuIcon()}
+        <HoverIcon>
+            <Kebab size={$iconSize} color={"var(--icon-txt)"} />
+        </HoverIcon>
+    {/snippet}
+    {#snippet menuItems()}
+        <Menu>
+            <MenuItem onclick={newGroup}>
+                {#snippet icon()}
+                    <AccountMultiplePlus size={$iconSize} color={"var(--icon-inverted-txt)"} />
+                {/snippet}
+                {#snippet text()}
+                    <Translatable resourceKey={i18nKey("newGroup")} />
+                {/snippet}
+            </MenuItem>
+            <MenuItem
+                disabled={!canMarkAllRead}
+                onclick={() => client.markAllReadForCurrentScope()}>
+                {#snippet icon()}
+                    <CheckboxMultipleMarked size={$iconSize} color={"var(--icon-inverted-txt)"} />
+                {/snippet}
+                {#snippet text()}
+                    <Translatable resourceKey={i18nKey("markAllRead")} />
+                {/snippet}
+            </MenuItem>
+        </Menu>
+    {/snippet}
+</MenuIcon>
diff --git a/frontend/app/src/desktop/features/chats/community/Import.svelte b/frontend/app/src/desktop/features/chats/community/Import.svelte
new file mode 100644
index 0000000000..1d43fbf754
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/community/Import.svelte
@@ -0,0 +1,131 @@
+<script lang="ts">
+    import {
+        AvatarSize,
+        type ChatIdentifier,
+        type CommunityMap,
+        type CommunitySummary,
+        type OpenChat,
+        publish,
+    } from "@client";
+    import { getContext, onMount } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import Avatar from "@src/desktop/shared/Avatar.svelte";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        ownedCommunities: CommunityMap<CommunitySummary>;
+        groupId: ChatIdentifier;
+        onCancel: () => void;
+    }
+
+    let { ownedCommunities, groupId, onCancel }: Props = $props();
+
+    let communitiesList = $derived([...ownedCommunities.values()]);
+
+    let importing = $state(false);
+    let selected: CommunitySummary | undefined = $state();
+
+    function performImport() {
+        if (selected === undefined || groupId.kind !== "group_chat") return;
+
+        importing = true;
+        client
+            .importToCommunity(groupId, selected.id)
+            .then((channelId) => {
+                if (channelId === undefined) {
+                    toastStore.showFailureToast(i18nKey("communities.errors.importFailed"));
+                } else {
+                    onCancel();
+                    publish("successfulImport", channelId);
+                }
+            })
+            .finally(() => (importing = false));
+    }
+
+    function selectCommunity(community: CommunitySummary) {
+        selected = community;
+    }
+
+    onMount(() => {
+        selected = communitiesList.length > 0 ? communitiesList[0] : undefined;
+    });
+
+    function areEqual(c1?: CommunitySummary, c2?: CommunitySummary): boolean {
+        return c1 !== undefined && c2 !== undefined && c1.id.communityId === c2.id.communityId;
+    }
+</script>
+
+{#if communitiesList.length > 0}
+    <Overlay>
+        <ModalContent>
+            {#snippet header()}
+                <span><Translatable resourceKey={i18nKey("communities.chooseCommunity")} /></span>
+            {/snippet}
+            {#snippet body()}
+                <span>
+                    {#each communitiesList as community}
+                        <div
+                            onclick={() => selectCommunity(community)}
+                            class="card"
+                            class:selected={areEqual(selected, community)}>
+                            <div class="avatar">
+                                <Avatar
+                                    url={client.communityAvatarUrl(
+                                        community.id.communityId,
+                                        community.avatar,
+                                    )}
+                                    userId={undefined}
+                                    size={AvatarSize.Default} />
+                            </div>
+                            <div class="details">
+                                <h4 class="name">{community.name}</h4>
+                            </div>
+                        </div>
+                    {/each}
+                </span>
+            {/snippet}
+            {#snippet footer()}
+                <span>
+                    <ButtonGroup>
+                        <Button secondary onClick={onCancel}
+                            ><Translatable resourceKey={i18nKey("cancel")} /></Button>
+                        <Button loading={importing} disabled={importing} onClick={performImport}
+                            ><Translatable
+                                resourceKey={i18nKey("communities.importBtn")} /></Button>
+                    </ButtonGroup>
+                </span>
+            {/snippet}
+        </ModalContent>
+    </Overlay>
+{/if}
+
+<style lang="scss">
+    .card {
+        display: flex;
+        align-items: center;
+        gap: $sp4;
+        cursor: pointer;
+        padding: $sp4;
+        border-radius: var(--rd);
+        transition: background-color 250ms ease-in-out;
+        border: 1px solid transparent;
+
+        &.selected {
+            background-color: var(--chatSummary-bg-selected);
+            border: 1px solid var(--txt-light);
+        }
+
+        @media (hover: hover) {
+            &:hover {
+                background-color: var(--chatSummary-hv);
+            }
+        }
+    }
+</style>
diff --git a/frontend/app/src/components/home/communities/PermissionsViewer.svelte b/frontend/app/src/desktop/features/chats/community/PermissionsViewer.svelte
similarity index 95%
rename from frontend/app/src/components/home/communities/PermissionsViewer.svelte
rename to frontend/app/src/desktop/features/chats/community/PermissionsViewer.svelte
index 824921f430..b7aad354ee 100644
--- a/frontend/app/src/components/home/communities/PermissionsViewer.svelte
+++ b/frontend/app/src/desktop/features/chats/community/PermissionsViewer.svelte
@@ -9,8 +9,8 @@
         ROLE_MEMBER,
         ROLE_OWNER,
     } from "@client";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Translatable from "../../Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/ui/Translatable.svelte";
 
     interface Props {
         permissions: CommunityPermissions;
diff --git a/frontend/app/src/desktop/features/chats/community/PreviewWrapper.svelte b/frontend/app/src/desktop/features/chats/community/PreviewWrapper.svelte
new file mode 100644
index 0000000000..2d2a43841d
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/community/PreviewWrapper.svelte
@@ -0,0 +1,128 @@
+<script lang="ts">
+    import type { EnhancedAccessGate, GateCheckSucceeded, OpenChat } from "@client";
+    import {
+        anonUserStore,
+        identityStateStore,
+        ROLE_NONE,
+        selectedCommunitySummaryStore,
+        stripSuspendedGate,
+    } from "@client";
+    import { getContext, tick, type Snippet } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import GateCheckFailed from "@src/desktop/features/access/AccessGateCheckFailed.svelte";
+    import AccessGateEvaluator from "@src/desktop/features/access/AccessGateEvaluator.svelte";
+    interface Props {
+        children?: Snippet<[boolean, () => void]>;
+    }
+
+    let { children }: Props = $props();
+
+    const client = getContext<OpenChat>("client");
+
+    let joiningCommunity = $state(false);
+    let gateCheckFailed: EnhancedAccessGate | undefined = $state(undefined);
+    let checkingAccessGate: EnhancedAccessGate | undefined = $state(undefined);
+
+    function joinCommunity() {
+        if ($anonUserStore) {
+            client.updateIdentityState({
+                kind: "logging_in",
+                postLogin: { kind: "join_community" },
+            });
+            return;
+        }
+        doJoinCommunity(undefined);
+    }
+
+    function accessGatesEvaluated(success: GateCheckSucceeded) {
+        doJoinCommunity(success);
+    }
+
+    function doJoinCommunity(gateCheck: GateCheckSucceeded | undefined): Promise<void> {
+        if (previewingCommunity && $selectedCommunitySummaryStore) {
+            const credentials = gateCheck?.credentials ?? [];
+            const paymentApprovals = gateCheck?.paymentApprovals ?? new Map();
+            const compositeGateIndex = gateCheck?.compositeGateIndex;
+            const gateConfigWithLevel: EnhancedAccessGate = {
+                ...$selectedCommunitySummaryStore.gateConfig.gate,
+                level: "community",
+                expiry: $selectedCommunitySummaryStore.gateConfig.expiry,
+                collectionName: $selectedCommunitySummaryStore.name,
+            };
+
+            if (gateCheck === undefined) {
+                if (
+                    stripSuspendedGate($selectedCommunitySummaryStore.gateConfig.gate).kind !==
+                        "no_gate" &&
+                    !$selectedCommunitySummaryStore.isInvited
+                ) {
+                    const gateConfigs = [$selectedCommunitySummaryStore.gateConfig];
+                    const gates = gateConfigs.map((gc) => gc.gate);
+                    const passed = client.doesUserMeetAccessGates(gates);
+                    if (!passed) {
+                        /**
+                         * If we cannot already tell that the user passes the access gate(s), check if there are any gates that require front end
+                         * pre-processing.
+                         */
+                        if (client.gatePreprocessingRequired(gates)) {
+                            checkingAccessGate = gateConfigWithLevel;
+                            return Promise.resolve();
+                        }
+                    }
+                }
+            }
+
+            closeModal();
+            joiningCommunity = true;
+
+            return client
+                .joinCommunity($selectedCommunitySummaryStore, credentials, paymentApprovals, compositeGateIndex)
+                .then((resp) => {
+                    if (resp.kind === "gate_check_failed") {
+                        gateCheckFailed = gateConfigWithLevel;
+                    } else if (resp.kind !== "success") {
+                        toastStore.showFailureToast(i18nKey("communities.errors.joinFailed"));
+                    }
+                })
+                .finally(() => (joiningCommunity = false));
+        }
+        return Promise.resolve();
+    }
+
+    function closeModal() {
+        checkingAccessGate = undefined;
+        gateCheckFailed = undefined;
+    }
+    let previewingCommunity = $derived(
+        $selectedCommunitySummaryStore?.membership.role === ROLE_NONE ||
+            $selectedCommunitySummaryStore?.membership.lapsed,
+    );
+    $effect(() => {
+        if (
+            $identityStateStore.kind === "logged_in" &&
+            $identityStateStore.postLogin?.kind === "join_community"
+        ) {
+            client.clearPostLoginState();
+            tick().then(() => joinCommunity());
+        }
+    });
+</script>
+
+{#if checkingAccessGate}
+    <Overlay dismissible onClose={closeModal}>
+        <AccessGateEvaluator
+            gates={[checkingAccessGate]}
+            onClose={closeModal}
+            onSuccess={accessGatesEvaluated} />
+    </Overlay>
+{/if}
+
+{#if gateCheckFailed}
+    <Overlay dismissible onClose={closeModal}>
+        <GateCheckFailed onClose={closeModal} gates={[gateCheckFailed]} />
+    </Overlay>
+{/if}
+
+{@render children?.(joiningCommunity, joinCommunity)}
diff --git a/frontend/app/src/components/home/RecommendedGroup.svelte b/frontend/app/src/desktop/features/chats/community/RecommendedGroup.svelte
similarity index 90%
rename from frontend/app/src/components/home/RecommendedGroup.svelte
rename to frontend/app/src/desktop/features/chats/community/RecommendedGroup.svelte
index 6c6f0e6fd9..59dd910921 100644
--- a/frontend/app/src/components/home/RecommendedGroup.svelte
+++ b/frontend/app/src/desktop/features/chats/community/RecommendedGroup.svelte
@@ -15,19 +15,19 @@
         selectedCommunitySummaryStore,
         suspendedUserStore,
     } from "@client";
-    import { navigate } from "@utils/navigation";
+    import { navigate } from "@src/utils/navigation";
     import { getContext } from "svelte";
     import { _ } from "svelte-i18n";
     import Close from "svelte-material-icons/Close.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import Avatar from "../Avatar.svelte";
-    import Button from "../Button.svelte";
-    import HoverIcon from "../HoverIcon.svelte";
-    import WithVerifiedBadge from "../icons/WithVerifiedBadge.svelte";
-    import Translatable from "../Translatable.svelte";
-    import AccessGateIcon from "./access/AccessGateIcon.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import Footer from "./upgrade/Footer.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Avatar from "@src/desktop/shared/Avatar.svelte";
+    import Button from "@src/ui/Button.svelte";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import WithVerifiedBadge from "@src/desktop/ui/icons/WithVerifiedBadge.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import AccessGateIcon from "@src/desktop/features/access/AccessGateIcon.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import Footer from "@src/desktop/features/upgrade/Footer.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/components/home/RecommendedGroups.svelte b/frontend/app/src/desktop/features/chats/community/RecommendedGroups.svelte
similarity index 89%
rename from frontend/app/src/components/home/RecommendedGroups.svelte
rename to frontend/app/src/desktop/features/chats/community/RecommendedGroups.svelte
index afdeb69838..711e49363d 100644
--- a/frontend/app/src/components/home/RecommendedGroups.svelte
+++ b/frontend/app/src/desktop/features/chats/community/RecommendedGroups.svelte
@@ -10,19 +10,19 @@
         mobileWidth,
         routeForScope,
     } from "@client";
-    import { navigate } from "@utils/navigation";
+    import { navigate } from "@src/utils/navigation";
     import { getContext, onMount } from "svelte";
     import ArrowLeft from "svelte-material-icons/ArrowLeft.svelte";
     import ArrowRight from "svelte-material-icons/ArrowRight.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { rtlStore } from "../../stores/rtl";
-    import { type RemoteData, mapRemoteData } from "../../utils/remoteData";
-    import Button from "../Button.svelte";
-    import ButtonGroup from "../ButtonGroup.svelte";
-    import HoverIcon from "../HoverIcon.svelte";
-    import Loading from "@shared_components/Loading.svelte";
-    import SectionHeader from "../SectionHeader.svelte";
-    import Translatable from "../Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { rtlStore } from "@src/stores/rtl";
+    import { type RemoteData, mapRemoteData } from "@src/utils/remoteData";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import Loading from "@src/ui/Loading.svelte";
+    import SectionHeader from "@src/desktop/shared/SectionHeader.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
     import RecommendedGroup from "./RecommendedGroup.svelte";
 
     interface Props {
diff --git a/frontend/app/src/components/home/communities/ScopeToggle.svelte b/frontend/app/src/desktop/features/chats/community/ScopeToggle.svelte
similarity index 95%
rename from frontend/app/src/components/home/communities/ScopeToggle.svelte
rename to frontend/app/src/desktop/features/chats/community/ScopeToggle.svelte
index 38cbaf50ce..f39b0b8a92 100644
--- a/frontend/app/src/components/home/communities/ScopeToggle.svelte
+++ b/frontend/app/src/desktop/features/chats/community/ScopeToggle.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Translatable from "../../Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/ui/Translatable.svelte";
 
     interface Props {
         selectedTab?: "community" | "channel";
diff --git a/frontend/app/src/desktop/features/chats/community/SelectedCommunityHeader.svelte b/frontend/app/src/desktop/features/chats/community/SelectedCommunityHeader.svelte
new file mode 100644
index 0000000000..d29d276be4
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/community/SelectedCommunityHeader.svelte
@@ -0,0 +1,93 @@
+<script lang="ts">
+    import {
+        AvatarSize,
+        setRightPanelHistory,
+        type CommunitySummary,
+        type OpenChat,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { rtlStore } from "@src/stores/rtl";
+    import Avatar from "@src/desktop/shared/Avatar.svelte";
+    import WithVerifiedBadge from "@src/desktop/ui/icons/WithVerifiedBadge.svelte";
+    import SectionHeader from "@src/desktop/shared/SectionHeader.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import VisibilityLabel from "@src/desktop/features/chats/core/VisibilityLabel.svelte";
+    import CommunityMenu from "./CommunityMenu.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        community: CommunitySummary;
+        canMarkAllRead: boolean;
+    }
+
+    let { community, canMarkAllRead }: Props = $props();
+
+    function showCommunityMembers() {
+        setRightPanelHistory([{ kind: "show_community_members" }]);
+    }
+</script>
+
+<SectionHeader border={false}>
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <div
+        role="button"
+        tabindex="0"
+        onclick={showCommunityMembers}
+        class="current-selection"
+        class:rtl={$rtlStore}>
+        <div class="avatar">
+            <Avatar
+                url={client.communityAvatarUrl(community.id.communityId, community.avatar)}
+                userId={undefined}
+                size={AvatarSize.Default} />
+        </div>
+        <div class="details">
+            <WithVerifiedBadge verified={community.verified} size={"small"}>
+                <h4 class="name">
+                    {community.name}
+                </h4>
+            </WithVerifiedBadge>
+            <div class="wrapper">
+                <VisibilityLabel isPublic={community.public} />
+                <div class="members">
+                    <span class="num">{community.memberCount.toLocaleString()}</span>
+                    <Translatable resourceKey={i18nKey("members")} />
+                </div>
+            </div>
+        </div>
+    </div>
+    <span class="menu">
+        <CommunityMenu {canMarkAllRead} {community} />
+    </span>
+</SectionHeader>
+
+<style lang="scss">
+    .current-selection {
+        display: flex;
+        flex: 1;
+        align-items: center;
+        gap: $sp3;
+        cursor: pointer;
+    }
+    .wrapper {
+        display: flex;
+        gap: $sp3;
+        align-items: center;
+        @include font(book, normal, fs-70);
+    }
+
+    .name {
+        @include font(book, normal, fs-120);
+        margin-bottom: $sp1;
+    }
+
+    .members {
+        color: var(--txt-light);
+        .num {
+            color: var(--txt);
+            font-weight: 700;
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/community/details/AdvancedSection.svelte b/frontend/app/src/desktop/features/chats/community/details/AdvancedSection.svelte
new file mode 100644
index 0000000000..c5fd297663
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/community/details/AdvancedSection.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import { publish, type CommunitySummary } from "@client";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    interface Props {
+        community: CommunitySummary;
+    }
+
+    let { community }: Props = $props();
+
+    function deleteCommunity() {
+        publish("deleteCommunity", {
+            kind: "delete_community",
+            communityId: community.id,
+            doubleCheck: {
+                challenge: i18nKey("typeGroupName", { name: community.name }),
+                response: i18nKey(community.name),
+            },
+        });
+    }
+</script>
+
+<ButtonGroup align="start">
+    <Button danger onClick={deleteCommunity}
+        ><Translatable resourceKey={i18nKey("communities.delete")} /></Button>
+</ButtonGroup>
diff --git a/frontend/app/src/components/home/communities/details/BrowseChannels.svelte b/frontend/app/src/desktop/features/chats/community/details/BrowseChannels.svelte
similarity index 94%
rename from frontend/app/src/components/home/communities/details/BrowseChannels.svelte
rename to frontend/app/src/desktop/features/chats/community/details/BrowseChannels.svelte
index 5e57cca928..2ecabca750 100644
--- a/frontend/app/src/components/home/communities/details/BrowseChannels.svelte
+++ b/frontend/app/src/desktop/features/chats/community/details/BrowseChannels.svelte
@@ -7,11 +7,11 @@
         type OpenChat,
     } from "@client";
     import { getContext } from "svelte";
-    import { i18nKey } from "../../../../i18n/i18n";
-    import { browseChannels } from "../../../../stores/settings";
-    import Button from "../../../Button.svelte";
-    import CollapsibleCard from "../../../CollapsibleCard.svelte";
-    import Translatable from "../../../Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { browseChannels } from "@src/stores/settings";
+    import Button from "@src/ui/Button.svelte";
+    import CollapsibleCard from "@src/desktop/shared/CollapsibleCard.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
     import ChannelCard from "./ChannelCard.svelte";
 
     const client = getContext<OpenChat>("client");
diff --git a/frontend/app/src/desktop/features/chats/community/details/ChannelCard.svelte b/frontend/app/src/desktop/features/chats/community/details/ChannelCard.svelte
new file mode 100644
index 0000000000..7532488701
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/community/details/ChannelCard.svelte
@@ -0,0 +1,204 @@
+<script lang="ts">
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import Menu from "@src/desktop/shared/Menu.svelte";
+    import MenuIcon from "@src/desktop/shared/MenuIcon.svelte";
+    import MenuItem from "@src/desktop/shared/MenuItem.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import {
+        AvatarSize,
+        type ChannelMatch,
+        chatListScopeStore,
+        iconSize,
+        mobileWidth,
+        type OpenChat,
+        routeForChatIdentifier,
+        selectedCommunitySummaryStore,
+    } from "@client";
+    import { navigate } from "@src/utils/navigation";
+    import { getContext } from "svelte";
+    import AccountMultiple from "svelte-material-icons/AccountMultiple.svelte";
+    import DeleteOutline from "svelte-material-icons/DeleteOutline.svelte";
+    import DotsVertical from "svelte-material-icons/DotsVertical.svelte";
+    import Avatar from "@src/desktop/shared/Avatar.svelte";
+    import AccessGateIcon from "@src/desktop/features/access/AccessGateIcon.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+
+    interface Props {
+        channel: ChannelMatch;
+        onDeleteChannel: () => void;
+    }
+
+    let { channel, onDeleteChannel }: Props = $props();
+
+    const client = getContext<OpenChat>("client");
+
+    let canDeleteChannel = $derived(client.canDeleteChannel(channel.id));
+
+    function selectChannel(match: ChannelMatch) {
+        if ($selectedCommunitySummaryStore === undefined) return;
+        if (!match.public && !match.invited) return;
+        if ($mobileWidth) {
+            client.popRightPanelHistory();
+        }
+        navigate(routeForChatIdentifier($chatListScopeStore.kind, match.id));
+    }
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+    class:clickable={channel.public || channel.invited}
+    class="details"
+    onclick={() => selectChannel(channel)}>
+    <div class="avatar">
+        <Avatar
+            url={client.groupAvatarUrl(
+                { id: channel.id, ...channel.avatar },
+                $selectedCommunitySummaryStore,
+            )}
+            size={AvatarSize.Default} />
+    </div>
+    <div class="channel-text">
+        <div class="channel-name">
+            {#if !channel.public}
+                <div class="private"></div>
+            {/if}
+            <h3>
+                {channel.name}
+            </h3>
+        </div>
+        {#if channel.description !== ""}
+            <div class="desc">
+                <Markdown text={channel.description} oneLine suppressLinks />
+            </div>
+        {/if}
+        <div class="meta">
+            <div class="attributes">
+                <div class="members">
+                    <span class="label"
+                        ><AccountMultiple viewBox="0 -4 24 24" size={"1.2em"} /></span>
+                    <span class="number">{channel.memberCount.toLocaleString()}</span>
+                </div>
+                <div class="gate">
+                    <AccessGateIcon
+                        button
+                        clickable
+                        level={"channel"}
+                        small
+                        position={"bottom"}
+                        align={"middle"}
+                        gateConfig={channel.gateConfig} />
+                </div>
+            </div>
+        </div>
+    </div>
+    {#if canDeleteChannel}
+        <div class="menu">
+            <MenuIcon position={"bottom"} align={"end"}>
+                {#snippet menuIcon()}
+                    <HoverIcon>
+                        <DotsVertical size={$iconSize} color={"var(--icon-inverted-txt)"} />
+                    </HoverIcon>
+                {/snippet}
+                {#snippet menuItems()}
+                    <Menu>
+                        <MenuItem warning onclick={onDeleteChannel}>
+                            {#snippet icon()}
+                                <DeleteOutline size={$iconSize} color={"var(--menu-warn)"} />
+                            {/snippet}
+                            {#snippet text()}
+                                <Translatable
+                                    resourceKey={i18nKey("deleteGroup", undefined, "channel")} />
+                            {/snippet}
+                        </MenuItem>
+                    </Menu>
+                {/snippet}
+            </MenuIcon>
+        </div>
+    {/if}
+</div>
+
+<style lang="scss">
+    .details {
+        display: flex;
+        align-items: center;
+        gap: $sp4;
+        padding: $sp4;
+        transition:
+            background-color ease-in-out 100ms,
+            border-color ease-in-out 100ms;
+
+        &.clickable {
+            cursor: pointer;
+            @media (hover: hover) {
+                &:hover {
+                    background-color: var(--chatSummary-hv);
+                }
+            }
+        }
+
+        @include mobile() {
+            padding: 0 toRem(10);
+        }
+
+        .desc {
+            @include font(light, normal, fs-80);
+            color: var(--txt-light);
+        }
+
+        .meta {
+            display: flex;
+            align-items: flex-end;
+            justify-content: space-between;
+            gap: $sp3;
+
+            .attributes {
+                display: flex;
+                align-items: center;
+                gap: $sp3;
+            }
+
+            .members {
+                background-color: var(--input-bg);
+                padding: $sp1 $sp3;
+                border-radius: var(--rd);
+                .number {
+                    font-weight: 500;
+                }
+                .label {
+                    color: var(--txt-light);
+                }
+            }
+        }
+
+        .channel-text {
+            overflow: hidden;
+            width: 100%;
+        }
+
+        .channel-name {
+            display: flex;
+            align-items: center;
+            gap: $sp2;
+            @include ellipsis();
+            h3 {
+                @include font(bold, normal, fs-100);
+            }
+        }
+
+        .channel-name,
+        .desc {
+            margin-bottom: $sp2;
+        }
+    }
+
+    .private {
+        background-repeat: no-repeat;
+        $size: 12px;
+        flex: 0 0 $size;
+        width: $size;
+        height: $size;
+        background-image: url("/assets/locked.svg");
+    }
+</style>
diff --git a/frontend/app/src/components/home/communities/details/CommunityDetails.svelte b/frontend/app/src/desktop/features/chats/community/details/CommunityDetails.svelte
similarity index 85%
rename from frontend/app/src/components/home/communities/details/CommunityDetails.svelte
rename to frontend/app/src/desktop/features/chats/community/details/CommunityDetails.svelte
index d092148eba..0844628da6 100644
--- a/frontend/app/src/components/home/communities/details/CommunityDetails.svelte
+++ b/frontend/app/src/desktop/features/chats/community/details/CommunityDetails.svelte
@@ -5,7 +5,7 @@
         type ReadonlySet,
         type Rules,
     } from "@client";
-    import { i18nKey } from "../../../../i18n/i18n";
+    import { i18nKey } from "@src/i18n/i18n";
     import {
         communityAdvancedOpen,
         communityInviteUsersOpen,
@@ -13,16 +13,16 @@
         communityRulesOpen,
         communityStatsOpen,
         communityVisibilityOpen,
-    } from "../../../../stores/settings";
-    import CollapsibleCard from "../../../CollapsibleCard.svelte";
-    import Translatable from "../../../Translatable.svelte";
-    import InviteUsersWithLink from "../../InviteUsersWithLink.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import Stats from "../../Stats.svelte";
-    import AccessGateExpiry from "../../access/AccessGateExpiry.svelte";
-    import AccessGateSummary from "../../access/AccessGateSummary.svelte";
-    import ReferredUsersList from "../../profile/ReferredUsersList.svelte";
-    import PermissionsViewer from "../PermissionsViewer.svelte";
+    } from "@src/stores/settings";
+    import CollapsibleCard from "@src/desktop/shared/CollapsibleCard.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import InviteUsersWithLink from "@src/desktop/features/chats/core/InviteUsersWithLink.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import Stats from "@src/desktop/shared/Stats.svelte";
+    import AccessGateExpiry from "@src/desktop/features/access/AccessGateExpiry.svelte";
+    import AccessGateSummary from "@src/desktop/features/access/AccessGateSummary.svelte";
+    import ReferredUsersList from "@src/desktop/features/profile/ReferredUsersList.svelte";
+    import PermissionsViewer from "@src/desktop/features/chats/community/PermissionsViewer.svelte";
     import AdvancedSection from "./AdvancedSection.svelte";
 
     interface Props {
diff --git a/frontend/app/src/components/home/communities/details/CommunityDetailsHeader.svelte b/frontend/app/src/desktop/features/chats/community/details/CommunityDetailsHeader.svelte
similarity index 89%
rename from frontend/app/src/components/home/communities/details/CommunityDetailsHeader.svelte
rename to frontend/app/src/desktop/features/chats/community/details/CommunityDetailsHeader.svelte
index ea3643ee49..d16c60c940 100644
--- a/frontend/app/src/components/home/communities/details/CommunityDetailsHeader.svelte
+++ b/frontend/app/src/desktop/features/chats/community/details/CommunityDetailsHeader.svelte
@@ -13,13 +13,13 @@
     import Close from "svelte-material-icons/Close.svelte";
     import Hamburger from "svelte-material-icons/Menu.svelte";
     import PencilOutline from "svelte-material-icons/PencilOutline.svelte";
-    import { i18nKey } from "../../../../i18n/i18n";
-    import HoverIcon from "../../../HoverIcon.svelte";
-    import Menu from "../../../Menu.svelte";
-    import MenuIcon from "../../../MenuIcon.svelte";
-    import MenuItem from "../../../MenuItem.svelte";
-    import SectionHeader from "../../../SectionHeader.svelte";
-    import Translatable from "../../../Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import Menu from "@src/desktop/shared/Menu.svelte";
+    import MenuIcon from "@src/desktop/shared/MenuIcon.svelte";
+    import MenuItem from "@src/desktop/shared/MenuItem.svelte";
+    import SectionHeader from "@src/desktop/shared/SectionHeader.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/desktop/features/chats/community/details/CommunitySummary.svelte b/frontend/app/src/desktop/features/chats/community/details/CommunitySummary.svelte
new file mode 100644
index 0000000000..0f67d8adb6
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/community/details/CommunitySummary.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+    import {
+        type OpenChat,
+        defaultChatRules,
+        selectedCommunityReferralsStore,
+        selectedCommunityRulesStore,
+        selectedCommunitySummaryStore,
+    } from "@client";
+    import { getContext } from "svelte";
+    import CommunityCard from "@src/desktop/features/chats/community/explore/CommunityCard.svelte";
+    import CommunityDetails from "./CommunityDetails.svelte";
+    import CommunityDetailsHeader from "./CommunityDetailsHeader.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    let frozen = $derived(client.isCommunityFrozen($selectedCommunitySummaryStore?.id));
+    let rules = $derived($selectedCommunityRulesStore ?? defaultChatRules("community"));
+    let canDelete = $derived(
+        $selectedCommunitySummaryStore !== undefined &&
+            !frozen &&
+            client.canDeleteCommunity($selectedCommunitySummaryStore.id),
+    );
+    let canEdit = $derived(
+        $selectedCommunitySummaryStore !== undefined &&
+            !frozen &&
+            client.canEditCommunity($selectedCommunitySummaryStore.id),
+    );
+    let canInvite = $derived(
+        $selectedCommunitySummaryStore !== undefined &&
+            !frozen &&
+            client.canInviteUsers($selectedCommunitySummaryStore.id),
+    );
+</script>
+
+{#if $selectedCommunitySummaryStore}
+    <CommunityDetailsHeader
+        community={$selectedCommunitySummaryStore}
+        {canEdit}
+        level={"community"} />
+    <div class="body">
+        <CommunityCard
+            id={$selectedCommunitySummaryStore.id.communityId}
+            name={$selectedCommunitySummaryStore.name}
+            description={$selectedCommunitySummaryStore.description}
+            banner={$selectedCommunitySummaryStore.banner}
+            avatar={$selectedCommunitySummaryStore.avatar}
+            memberCount={$selectedCommunitySummaryStore.memberCount}
+            gateConfig={$selectedCommunitySummaryStore.gateConfig}
+            language={$selectedCommunitySummaryStore.primaryLanguage}
+            flags={0}
+            channelCount={0}
+            header
+            verified={$selectedCommunitySummaryStore.verified} />
+        <CommunityDetails
+            {canDelete}
+            {canInvite}
+            {rules}
+            metrics={$selectedCommunitySummaryStore.metrics}
+            community={$selectedCommunitySummaryStore}
+            referrals={$selectedCommunityReferralsStore} />
+    </div>
+{/if}
+
+<style lang="scss">
+    .body {
+        @include nice-scrollbar();
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/community/details/UserGroup.svelte b/frontend/app/src/desktop/features/chats/community/details/UserGroup.svelte
new file mode 100644
index 0000000000..9a67cd222c
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/community/details/UserGroup.svelte
@@ -0,0 +1,286 @@
+<script lang="ts">
+    import {
+        iconSize,
+        type CommunitySummary,
+        type OpenChat,
+        type UserGroupDetails,
+        type UserSummary,
+    } from "@client";
+    import { ErrorCode } from "@shared";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import DeleteOutline from "svelte-material-icons/DeleteOutline.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import { trimLeadingAtSymbol } from "@src/utils/user";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import Input from "@src/desktop/shared/Input.svelte";
+    import Legend from "@src/desktop/shared/Legend.svelte";
+    import Search from "@src/desktop/shared/Search.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import VirtualList from "@src/ui/VirtualList.svelte";
+    import User from "@src/desktop/features/chats/group/User.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        community: CommunitySummary;
+        original: UserGroupDetails;
+        canManageUserGroups: boolean;
+        communityUsers?: Record<string, UserSummary>;
+        communityUsersList?: UserSummary[];
+        onCancel: () => void;
+    }
+
+    let {
+        community,
+        original,
+        canManageUserGroups,
+        communityUsers = {},
+        communityUsersList = [],
+        onCancel,
+    }: Props = $props();
+
+    let userGroup = $state({ ...original });
+    let added: Set<string> = new Set();
+    let removed: Set<string> = new Set();
+    let searchVirtualList = $state<VirtualList<UserSummary> | undefined>();
+    let searchTermEntered = $state("");
+    let usersDirty = $state(false);
+    let saving = $state(false);
+
+    const MIN_LENGTH = 3;
+    const MAX_LENGTH = 25;
+
+    // we are going to just wait for the save to succeed here rather than mess about with
+    // local updates since this is probably not a very common operation and it's much simpler this way
+    function save() {
+        saving = true;
+        const creating = userGroup.id === -1;
+        (creating
+            ? client.createUserGroup(community.id, userGroup)
+            : client.updateUserGroup(community.id, userGroup, added, removed)
+        )
+            .then((resp) => {
+                if (resp.kind === "success") {
+                    cancel();
+                } else {
+                    if (resp.kind === "error" && resp.code === ErrorCode.NameTaken) {
+                        toastStore.showFailureToast(
+                            i18nKey("communities.errors.userGroupNameTaken"),
+                        );
+                    } else {
+                        toastStore.showFailureToast(
+                            i18nKey(
+                                `communities.errors.${
+                                    creating ? "createGroupFailed" : "updateGroupFailed"
+                                }`,
+                            ),
+                        );
+                    }
+                }
+            })
+            .finally(() => (saving = false));
+    }
+
+    function autoCorrect() {
+        if (nameDirty) {
+            userGroup.name = userGroup.name.replace(/ /g, "_");
+        }
+    }
+
+    function cancel() {
+        reset();
+        onCancel();
+    }
+
+    function reset() {
+        userGroup = original;
+        added = new Set();
+        removed = new Set();
+    }
+
+    function matchesSearch(searchTerm: string, user: UserSummary): boolean {
+        if (searchTerm === "") return false;
+        return (
+            !userGroup.members.has(user.userId) &&
+            (user.username.toLowerCase().includes(searchTerm) ||
+                (user.displayName !== undefined &&
+                    user.displayName.toLowerCase().includes(searchTerm)))
+        );
+    }
+
+    function addUserToGroup(userId: string) {
+        searchTermEntered = "";
+        added.add(userId);
+        removed.delete(userId);
+        changeUsers(() => userGroup.members.add(userId));
+    }
+
+    function removeUserFromGroup(userId: string) {
+        removed.add(userId);
+        added.delete(userId);
+        changeUsers(() => userGroup.members.delete(userId));
+    }
+
+    function changeUsers(fn: () => void) {
+        fn();
+        usersDirty = true;
+        userGroup = userGroup; //:puke: trigger a reaction
+    }
+    let searchTerm = $derived(trimLeadingAtSymbol(searchTermEntered));
+    let searchTermLower = $derived(searchTerm.toLowerCase());
+    let groupUsers = $derived(
+        [...userGroup.members].map((m) => communityUsers[m]).filter((u) => u !== undefined),
+    );
+    let matchedUsers = $derived(
+        communityUsersList.filter((u) => matchesSearch(searchTermLower, u)),
+    );
+    let nameDirty = $derived(original.name !== userGroup.name);
+    let dirty = $derived(nameDirty || usersDirty);
+    let trimmedName = $derived(userGroup.name.trim());
+    let nameValid = $derived(
+        trimmedName.length >= MIN_LENGTH &&
+            trimmedName.length <= MAX_LENGTH &&
+            trimmedName.indexOf(" ") < 0,
+    );
+    let valid = $derived(nameValid && userGroup.members.size > 0);
+</script>
+
+<div class="user-group">
+    {#if canManageUserGroups}
+        <div class="header">
+            <Legend
+                label={i18nKey("communities.userGroupName")}
+                rules={i18nKey("communities.noSpaces")} />
+            <Input
+                bind:value={userGroup.name}
+                minlength={MIN_LENGTH}
+                maxlength={MAX_LENGTH}
+                disabled={!canManageUserGroups}
+                countdown
+                invalid={nameDirty && !nameValid}
+                onBlur={autoCorrect}
+                placeholder={i18nKey("communities.enterUserGroupName")} />
+        </div>
+        <div class="search">
+            <Search
+                onPerformSearch={() => searchVirtualList?.reset()}
+                fill
+                searching={false}
+                bind:searchTerm={searchTermEntered}
+                placeholder={i18nKey("searchUsersPlaceholder")} />
+        </div>
+        {#if matchedUsers.length > 0}
+            <div style={`height: ${matchedUsers.length * 80}px`} class="searched-users">
+                <VirtualList
+                    bind:this={searchVirtualList}
+                    keyFn={(user) => user.userId}
+                    items={matchedUsers}>
+                    {#snippet children(item)}
+                        <User
+                            onClick={() => addUserToGroup(item.userId)}
+                            user={item}
+                            me={false}
+                            profile={false}
+                            {searchTerm} />
+                    {/snippet}
+                </VirtualList>
+            </div>
+        {/if}
+    {/if}
+
+    <div class="users">
+        <div class="legend" class:readonly={!canManageUserGroups}>
+            {#if canManageUserGroups}
+                <Translatable resourceKey={i18nKey("communities.userGroupMembers")} />
+            {:else}
+                <Markdown
+                    text={$_("communities.namedUserGroupMembers", {
+                        values: { name: userGroup.name },
+                    })} />
+            {/if}
+        </div>
+        {#each groupUsers as user}
+            <div class="user">
+                <User {user} me={false}>
+                    {#if canManageUserGroups}
+                        <div onclick={() => removeUserFromGroup(user.userId)} class="delete">
+                            <DeleteOutline size={$iconSize} color={"var(--icon-txt)"} />
+                        </div>
+                    {/if}
+                </User>
+            </div>
+        {/each}
+    </div>
+
+    <div class="buttons">
+        <ButtonGroup align="fill">
+            <Button onClick={cancel} secondary
+                ><Translatable resourceKey={i18nKey("cancel")} /></Button>
+            {#if canManageUserGroups}
+                <Button onClick={save} disabled={!dirty || !valid || saving} loading={saving}
+                    ><Translatable resourceKey={i18nKey("save")} /></Button>
+            {/if}
+        </ButtonGroup>
+    </div>
+</div>
+
+<style lang="scss">
+    :global(.user-group .header .input-wrapper) {
+        margin-bottom: 0;
+    }
+
+    :global(.user-group .search .wrapper) {
+        padding: 0 $sp3;
+    }
+
+    .header,
+    .search,
+    .buttons {
+        padding: 0 $sp4;
+        @include mobile() {
+            padding: 0 $sp3;
+        }
+    }
+
+    .searched-users {
+        max-height: calc(var(--vh, 1vh) * 50);
+    }
+
+    .user-group {
+        display: flex;
+        flex-direction: column;
+        gap: toRem(12);
+        height: 100%;
+        justify-content: space-between;
+
+        .users {
+            flex: auto;
+
+            .legend {
+                padding: $sp4;
+                border-bottom: 1px solid var(--bd);
+
+                &.readonly {
+                    padding-top: 0;
+                }
+            }
+
+            .user {
+                .delete {
+                    transition: opacity 250ms ease-in-out;
+                    opacity: 0.6;
+                }
+
+                &:hover {
+                    .delete {
+                        opacity: 1;
+                    }
+                }
+            }
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/community/details/UserGroups.svelte b/frontend/app/src/desktop/features/chats/community/details/UserGroups.svelte
new file mode 100644
index 0000000000..c6a7f18cd6
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/community/details/UserGroups.svelte
@@ -0,0 +1,329 @@
+<script lang="ts">
+    import type {
+        CommunitySummary,
+        Member,
+        OpenChat,
+        ReadonlyMap,
+        UserGroupDetails,
+        UserLookup,
+        UserSummary,
+    } from "@client";
+    import {
+        allUsersStore,
+        iconSize,
+        selectedCommunityMembersStore,
+        selectedCommunityUserGroupsStore,
+    } from "@client";
+    import { getContext, onMount } from "svelte";
+    import DeleteOutline from "svelte-material-icons/DeleteOutline.svelte";
+    import PencilOutline from "svelte-material-icons/PencilOutline.svelte";
+    import Plus from "svelte-material-icons/Plus.svelte";
+    import { SvelteSet } from "svelte/reactivity";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import AreYouSure from "@src/desktop/shared/AreYouSure.svelte";
+    import CollapsibleCard from "@src/desktop/shared/CollapsibleCard.svelte";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import Search from "@src/desktop/shared/Search.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import User from "@src/desktop/features/chats/group/User.svelte";
+    import UserGroup from "./UserGroup.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        community: CommunitySummary;
+        openedGroupId?: number | undefined;
+    }
+
+    let { community, openedGroupId = $bindable(undefined) }: Props = $props();
+
+    let searchTerm = $state("");
+    let selectedGroup: UserGroupDetails | undefined = $state(undefined);
+    let confirmingDelete = $state(false);
+    let groupToDelete: UserGroupDetails | undefined = undefined;
+    let communityUsers: Record<string, UserSummary> = $state({});
+    let communityUsersList: UserSummary[] = $state([]);
+
+    onMount(() => {
+        communityUsers = createLookup($selectedCommunityMembersStore, $allUsersStore);
+        communityUsersList = Object.values(communityUsers);
+    });
+
+    function createLookup(
+        members: ReadonlyMap<string, Member>,
+        allUsers: UserLookup,
+    ): Record<string, UserSummary> {
+        return [...members.values()].reduce(
+            (map, m) => {
+                const user = allUsers.get(m.userId);
+                if (user !== undefined) {
+                    map[user.userId] = {
+                        ...user,
+                        displayName: m.displayName ?? user.displayName,
+                        username: user.username,
+                    };
+                }
+                return map;
+            },
+            {} as Record<string, UserSummary>,
+        );
+    }
+
+    function matchesSearch(searchTerm: string, userGroup: UserGroupDetails): boolean {
+        if (searchTerm === "") return true;
+        return userGroup.name.toLowerCase().includes(searchTerm);
+    }
+
+    function createUserGroup() {
+        selectedGroup = {
+            kind: "user_group",
+            id: -1,
+            name: "",
+            members: new SvelteSet<string>(),
+        };
+    }
+
+    function deleteUserGroup(yes: boolean = true): Promise<void> {
+        if (confirmingDelete && !yes) {
+            groupToDelete = undefined;
+            confirmingDelete = false;
+            return Promise.resolve();
+        }
+        if (groupToDelete === undefined) {
+            return Promise.resolve();
+        }
+
+        confirmingDelete = false;
+
+        return client
+            .deleteUserGroup(community.id, groupToDelete)
+            .then((success) => {
+                if (!success) {
+                    toastStore.showFailureToast(
+                        i18nKey("communities.errors.deleteUserGroupFailed"),
+                    );
+                }
+            })
+            .finally(() => (groupToDelete = undefined));
+    }
+
+    function editUserGroup(e: Event, userGroup: UserGroupDetails) {
+        e.stopPropagation();
+        selectedGroup = userGroup;
+    }
+
+    function confirmDeleteUserGroup(e: Event, userGroup: UserGroupDetails) {
+        e.stopPropagation();
+        groupToDelete = userGroup;
+        confirmingDelete = true;
+    }
+
+    export function reset() {
+        selectedGroup = undefined;
+        openedGroupId = undefined;
+    }
+    let searchTermLower = $derived(searchTerm.toLowerCase());
+    let userGroups = $derived([...$selectedCommunityUserGroupsStore.values()]);
+    let canManageUserGroups = $derived(client.canManageUserGroups(community.id));
+    let matchingGroups = $derived(userGroups.filter((ug) => matchesSearch(searchTermLower, ug)));
+</script>
+
+{#if confirmingDelete}
+    <AreYouSure message={i18nKey("communities.confirmDeleteUserGroup")} action={deleteUserGroup} />
+{/if}
+
+{#if selectedGroup !== undefined}
+    <UserGroup
+        {canManageUserGroups}
+        {community}
+        {communityUsers}
+        {communityUsersList}
+        onCancel={reset}
+        original={selectedGroup} />
+{:else}
+    <div class="user-groups">
+        <div class="search-row">
+            <div class="search">
+                <Search
+                    fill
+                    searching={false}
+                    bind:searchTerm
+                    placeholder={i18nKey("communities.searchUserGroups")} />
+            </div>
+            {#if canManageUserGroups}
+                <div class="add">
+                    <HoverIcon onclick={createUserGroup}>
+                        <Plus size={$iconSize} color={"var(--icon-txt)"} />
+                    </HoverIcon>
+                </div>
+            {/if}
+        </div>
+        <div class="groups">
+            {#if matchingGroups.length === 0}
+                <div class="no-groups">
+                    <Translatable resourceKey={i18nKey("communities.noUserGroups")} />
+                </div>
+            {:else}
+                {#each matchingGroups as userGroup}
+                    <div class="user-group-card">
+                        <CollapsibleCard
+                            open={userGroup.id === openedGroupId}
+                            headerText={i18nKey(userGroup.name)}>
+                            {#snippet titleSlot()}
+                                <h4 class="name">
+                                    {#if canManageUserGroups}
+                                        <div
+                                            role="button"
+                                            tabindex="0"
+                                            onclick={(e) => editUserGroup(e, userGroup)}
+                                            class="edit">
+                                            <PencilOutline
+                                                viewBox={"0 -3 24 24"}
+                                                size={"1.2em"}
+                                                color={"var(--icon-txt)"} />
+                                        </div>
+                                        <div
+                                            role="button"
+                                            tabindex="0"
+                                            onclick={(e) => confirmDeleteUserGroup(e, userGroup)}
+                                            class="delete">
+                                            <DeleteOutline
+                                                viewBox={"0 -3 24 24"}
+                                                size={"1.2em"}
+                                                color={"var(--icon-txt)"} />
+                                        </div>
+                                    {/if}
+                                    <span class="name-text">{userGroup.name}</span>
+                                    <span class="members">
+                                        <span class="num"
+                                            >{userGroup.members.size.toLocaleString()}</span>
+                                        <Translatable resourceKey={i18nKey("members")} />
+                                    </span>
+                                </h4>
+                            {/snippet}
+
+                            {#each userGroup.members as member}
+                                {#if communityUsers[member] !== undefined}
+                                    <div class="user">
+                                        <User user={communityUsers[member]} me={false} />
+                                    </div>
+                                {/if}
+                            {/each}
+                        </CollapsibleCard>
+                    </div>
+                {/each}
+            {/if}
+        </div>
+    </div>
+{/if}
+
+<style lang="scss">
+    :global(.user-group-card .body) {
+        padding: 0;
+    }
+
+    :global(.user-group-card .header) {
+        padding: $sp4 !important;
+        @include mobile() {
+            padding: $sp3 !important;
+        }
+    }
+
+    .search-row {
+        display: flex;
+        align-items: center;
+        gap: $sp3;
+        padding: 0 $sp4;
+
+        @include mobile() {
+            padding: 0 $sp3;
+        }
+
+        .search {
+            flex: auto;
+        }
+
+        .add {
+            flex: 0 0 30px;
+        }
+    }
+
+    .user-groups {
+        display: flex;
+        flex-direction: column;
+        gap: toRem(12);
+        height: 100%;
+        justify-content: space-between;
+
+        .no-groups {
+            padding: $sp4;
+            @include font-size(fs-80);
+            color: var(--txt-light);
+        }
+
+        .groups {
+            flex: auto;
+
+            .name {
+                flex: auto;
+                display: flex;
+                gap: $sp2;
+                align-items: center;
+                @include font(medium, normal, fs-100);
+                @include ellipsis();
+
+                .name-text {
+                    display: inline-block;
+                    padding: toRem(6);
+                    background-color: rgba(0, 0, 0, 0.05);
+                    border-radius: $sp3;
+                }
+
+                .members {
+                    @include font(light, normal, fs-70);
+                    margin-left: $sp2;
+                    color: var(--txt-light);
+                    .num {
+                        color: var(--txt);
+                        font-weight: 700;
+                    }
+                }
+            }
+
+            .user-group {
+                cursor: pointer;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                padding: toRem(12) $sp4;
+                transition:
+                    background-color ease-in-out 100ms,
+                    border-color ease-in-out 100ms;
+                gap: 12px;
+
+                @media (hover: hover) {
+                    &:not(.me):hover {
+                        background-color: var(--members-hv);
+                    }
+                }
+
+                @include mobile() {
+                    padding: $sp3 toRem(10);
+                }
+
+                .delete {
+                    flex: 0 0 30px;
+                    transition: opacity 250ms ease-in-out;
+                    opacity: 0.6;
+                }
+
+                &:hover {
+                    .delete {
+                        opacity: 1;
+                    }
+                }
+            }
+        }
+    }
+</style>
diff --git a/frontend/app/src/components/home/communities/edit/ChooseChannels.svelte b/frontend/app/src/desktop/features/chats/community/edit/ChooseChannels.svelte
similarity index 93%
rename from frontend/app/src/components/home/communities/edit/ChooseChannels.svelte
rename to frontend/app/src/desktop/features/chats/community/edit/ChooseChannels.svelte
index cee0ac1e9c..ab085d88c2 100644
--- a/frontend/app/src/components/home/communities/edit/ChooseChannels.svelte
+++ b/frontend/app/src/desktop/features/chats/community/edit/ChooseChannels.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
     import { iconSize, type DefaultChannel } from "@client";
     import PlusCircleOutline from "svelte-material-icons/PlusCircleOutline.svelte";
-    import { i18nKey } from "../../../../i18n/i18n";
-    import ErrorMessage from "../../../ErrorMessage.svelte";
-    import Input from "../../../Input.svelte";
-    import Translatable from "../../../Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import ErrorMessage from "@src/desktop/shared/ErrorMessage.svelte";
+    import Input from "@src/desktop/shared/Input.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
     import EditableChannel from "./EditableChannel.svelte";
 
     const MIN_CHANNEL_LENGTH = 3;
diff --git a/frontend/app/src/desktop/features/chats/community/edit/Details.svelte b/frontend/app/src/desktop/features/chats/community/edit/Details.svelte
new file mode 100644
index 0000000000..ab4dfbc1ba
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/community/edit/Details.svelte
@@ -0,0 +1,118 @@
+<script lang="ts">
+    import EditableAvatar from "@src/ui/EditableAvatar.svelte";
+    import EditableBanner from "@src/ui/EditableBanner.svelte";
+    import type { CommunitySummary } from "@client";
+    import { i18nKey, supportedLanguages } from "@src/i18n/i18n";
+    import Input from "@src/desktop/shared/Input.svelte";
+    import Legend from "@src/desktop/shared/Legend.svelte";
+    import Select from "@src/desktop/shared/Select.svelte";
+    import TextArea from "@src/desktop/shared/TextArea.svelte";
+
+    const MIN_LENGTH = 3;
+    const MAX_LENGTH = 25;
+    const MAX_DESC_LENGTH = 1024;
+
+    interface Props {
+        busy: boolean;
+        candidate: CommunitySummary;
+        valid: boolean;
+    }
+
+    let { busy = $bindable(false), candidate = $bindable(), valid = $bindable() }: Props = $props();
+
+    $effect(() => {
+        const isValid =
+            candidate.name.length >= MIN_LENGTH &&
+            candidate.name.length <= MAX_LENGTH &&
+            candidate.description.length <= MAX_DESC_LENGTH &&
+            candidate.description.length > 0;
+        if (isValid !== valid) {
+            valid = isValid;
+        }
+    });
+
+    function communityAvatarSelected(detail: { url: string; data: Uint8Array }) {
+        candidate.avatar = {
+            blobUrl: detail.url,
+            blobData: detail.data,
+        };
+    }
+
+    function communityBannerSelected(detail: { url: string; data: Uint8Array }) {
+        candidate.banner = {
+            blobUrl: detail.url,
+            blobData: detail.data,
+        };
+    }
+</script>
+
+<section class="images-section">
+    <Legend label={i18nKey("communities.imageLabel")} />
+    <div class="images">
+        <div class="banner">
+            <EditableBanner
+                image={candidate.banner?.blobUrl}
+                onImageSelected={communityBannerSelected} />
+        </div>
+        <div class="avatar">
+            <EditableAvatar
+                overlayIcon
+                size={"medium"}
+                image={candidate.avatar?.blobUrl}
+                onImageSelected={communityAvatarSelected} />
+        </div>
+    </div>
+</section>
+<section>
+    <Legend required label={i18nKey("communities.name")} />
+    <Input
+        autofocus
+        disabled={busy}
+        bind:value={candidate.name}
+        minlength={MIN_LENGTH}
+        maxlength={MAX_LENGTH}
+        countdown
+        placeholder={i18nKey("communities.namePlaceholder")} />
+</section>
+<section>
+    <Legend label={i18nKey("communities.primaryLanguage")} />
+    <Select bind:value={candidate.primaryLanguage}>
+        {#each supportedLanguages as lang}
+            <option value={lang.code}>{lang.name}</option>
+        {/each}
+    </Select>
+</section>
+<section>
+    <Legend
+        required
+        label={i18nKey("communities.description")}
+        rules={i18nKey("supportsMarkdown")} />
+    <TextArea
+        rows={4}
+        disabled={busy}
+        bind:value={candidate.description}
+        maxlength={MAX_DESC_LENGTH}
+        placeholder={i18nKey("communities.descriptionPlaceholder")} />
+</section>
+
+<style lang="scss">
+    .avatar {
+        position: absolute;
+        bottom: toRem(-32);
+        left: toRem(24);
+        border-radius: var(--avatar-rd);
+        border: 2px solid var(--txt-light);
+    }
+
+    section {
+        margin-bottom: $sp4;
+
+        &.images-section {
+            margin-bottom: $sp7;
+        }
+    }
+
+    .images {
+        position: relative;
+    }
+</style>
diff --git a/frontend/app/src/components/home/communities/edit/Edit.svelte b/frontend/app/src/desktop/features/chats/community/edit/Edit.svelte
similarity index 94%
rename from frontend/app/src/components/home/communities/edit/Edit.svelte
rename to frontend/app/src/desktop/features/chats/community/edit/Edit.svelte
index 46b3aeab17..3c10b886ff 100644
--- a/frontend/app/src/components/home/communities/edit/Edit.svelte
+++ b/frontend/app/src/desktop/features/chats/community/edit/Edit.svelte
@@ -9,21 +9,21 @@
         type Rules,
         type UserSummary,
     } from "@client";
-    import { navigate } from "@utils/navigation";
+    import { navigate } from "@src/utils/navigation";
     import { getContext, onMount } from "svelte";
     import { _ } from "svelte-i18n";
-    import { i18nKey } from "../../../../i18n/i18n";
-    import { createCandidateCommunity } from "../../../../stores/community";
-    import { toastStore } from "../../../../stores/toast";
-    import AreYouSure from "../../../AreYouSure.svelte";
-    import Button from "../../../Button.svelte";
-    import ModalContent from "../../../ModalContent.svelte";
-    import Translatable from "../../../Translatable.svelte";
-    import ChooseMembers from "../../ChooseMembers.svelte";
-    import RulesEditor from "../../RulesEditor.svelte";
-    import StageHeader from "../../StageHeader.svelte";
-    import VisibilityControl from "../../VisibilityControl.svelte";
-    import PermissionsViewer from "../PermissionsViewer.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { createCandidateCommunity } from "@src/stores/community";
+    import { toastStore } from "@src/stores/toast";
+    import AreYouSure from "@src/desktop/shared/AreYouSure.svelte";
+    import Button from "@src/ui/Button.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import ChooseMembers from "@src/desktop/features/chats/core/ChooseMembers.svelte";
+    import RulesEditor from "@src/desktop/features/chats/core/RulesEditor.svelte";
+    import StageHeader from "@src/desktop/features/chats/core/StageHeader.svelte";
+    import VisibilityControl from "@src/desktop/features/chats/core/VisibilityControl.svelte";
+    import PermissionsViewer from "@src/desktop/features/chats/community/PermissionsViewer.svelte";
     import ChooseChannels from "./ChooseChannels.svelte";
     import Details from "./Details.svelte";
     import PermissionsEditor from "./PermissionsEditor.svelte";
diff --git a/frontend/app/src/components/home/communities/edit/EditableChannel.svelte b/frontend/app/src/desktop/features/chats/community/edit/EditableChannel.svelte
similarity index 94%
rename from frontend/app/src/components/home/communities/edit/EditableChannel.svelte
rename to frontend/app/src/desktop/features/chats/community/edit/EditableChannel.svelte
index 8a142b1efd..625cf2d58c 100644
--- a/frontend/app/src/components/home/communities/edit/EditableChannel.svelte
+++ b/frontend/app/src/desktop/features/chats/community/edit/EditableChannel.svelte
@@ -2,8 +2,8 @@
     import { iconSize, type DefaultChannel } from "@client";
     import DeleteOutline from "svelte-material-icons/DeleteOutline.svelte";
     import Pound from "svelte-material-icons/Pound.svelte";
-    import { i18nKey } from "../../../../i18n/i18n";
-    import Input from "../../../Input.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Input from "@src/desktop/shared/Input.svelte";
 
     interface Props {
         min: number;
diff --git a/frontend/app/src/components/home/communities/edit/PermissionsEditor.svelte b/frontend/app/src/desktop/features/chats/community/edit/PermissionsEditor.svelte
similarity index 80%
rename from frontend/app/src/components/home/communities/edit/PermissionsEditor.svelte
rename to frontend/app/src/desktop/features/chats/community/edit/PermissionsEditor.svelte
index 5788906fe0..7e820f2fcc 100644
--- a/frontend/app/src/components/home/communities/edit/PermissionsEditor.svelte
+++ b/frontend/app/src/desktop/features/chats/community/edit/PermissionsEditor.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-    import SelectPermissionRole from "../../SelectPermissionRole.svelte";
+    import SelectPermissionRole from "@src/desktop/features/chats/core/SelectPermissionRole.svelte";
     import { type CommunityPermissions, communityRoles } from "@client";
-    import { i18nKey } from "../../../../i18n/i18n";
+    import { i18nKey } from "@src/i18n/i18n";
 
     interface Props {
         permissions: CommunityPermissions;
diff --git a/frontend/app/src/components/home/communities/explore/CommunityBanner.svelte b/frontend/app/src/desktop/features/chats/community/explore/CommunityBanner.svelte
similarity index 100%
rename from frontend/app/src/components/home/communities/explore/CommunityBanner.svelte
rename to frontend/app/src/desktop/features/chats/community/explore/CommunityBanner.svelte
diff --git a/frontend/app/src/desktop/features/chats/community/explore/CommunityCard.svelte b/frontend/app/src/desktop/features/chats/community/explore/CommunityCard.svelte
new file mode 100644
index 0000000000..20adf3cc78
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/community/explore/CommunityCard.svelte
@@ -0,0 +1,219 @@
+<script lang="ts">
+    import AccountMultiple from "svelte-material-icons/AccountMultiple.svelte";
+    import Pound from "svelte-material-icons/Pound.svelte";
+    import type { AccessGateConfig, DataContent, OpenChat } from "@client";
+    import Avatar from "@src/desktop/shared/Avatar.svelte";
+    import IntersectionObserver from "@src/desktop/features/chats/core/IntersectionObserver.svelte";
+    import { _ } from "svelte-i18n";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import { AvatarSize, ModerationFlags } from "@client";
+    import { getContext } from "svelte";
+    import CommunityBanner from "./CommunityBanner.svelte";
+    import AccessGateIcon from "@src/desktop/features/access/AccessGateIcon.svelte";
+    import { i18nKey, supportedLanguagesByCode } from "@src/i18n/i18n";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import WithVerifiedBadge from "@src/desktop/ui/icons/WithVerifiedBadge.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        id: string;
+        name: string;
+        description: string;
+        avatar: DataContent;
+        banner: DataContent;
+        memberCount: number;
+        channelCount: number;
+        header?: boolean;
+        gateConfig: AccessGateConfig;
+        language: string;
+        flags: number;
+        verified: boolean;
+    }
+
+    let {
+        id,
+        name,
+        description,
+        avatar,
+        banner,
+        memberCount,
+        channelCount,
+        header = false,
+        gateConfig,
+        language,
+        flags,
+        verified,
+    }: Props = $props();
+
+    let flagsArray = $derived(serialiseFlags(flags));
+
+    function serialiseFlags(flags: number) {
+        const f: string[] = [supportedLanguagesByCode[language]?.name];
+        if (client.hasModerationFlag(flags, ModerationFlags.Adult)) {
+            f.push("communities.adult");
+        }
+        if (client.hasModerationFlag(flags, ModerationFlags.Offensive)) {
+            f.push("communities.offensive");
+        }
+        if (client.hasModerationFlag(flags, ModerationFlags.UnderReview)) {
+            f.push("communities.underReview");
+        }
+        return f;
+    }
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class:header class="card">
+    <IntersectionObserver>
+        {#snippet children(intersecting)}
+            <CommunityBanner {intersecting} square={header} {banner}>
+                <div class="gate">
+                    <AccessGateIcon
+                        clickable
+                        button
+                        level={"community"}
+                        position={"bottom"}
+                        align={"end"}
+                        {gateConfig} />
+                </div>
+                <div class="avatar">
+                    <Avatar
+                        url={client.communityAvatarUrl(id, avatar)}
+                        userId={undefined}
+                        size={AvatarSize.Default} />
+                </div>
+            </CommunityBanner>
+        {/snippet}
+    </IntersectionObserver>
+    <div class="content">
+        <WithVerifiedBadge
+            {verified}
+            size={"small"}
+            tooltip={i18nKey("verified.verified", undefined, "community")}>
+            <div class="name">
+                {name}
+            </div>
+        </WithVerifiedBadge>
+        <div class="desc" class:fixed={!header}>
+            <Markdown inline={false} text={description} />
+        </div>
+        {#if !header}
+            <div class="footer">
+                <div class="footer-row">
+                    <div class="members" title={$_("members")}>
+                        <span class="label"
+                            ><AccountMultiple viewBox="0 -4 24 24" size={"1.2em"} /></span>
+                        <span class="number">{memberCount.toLocaleString()}</span>
+                    </div>
+                    <div class="channels" title={$_("communities.publicChannels")}>
+                        <span class="label"><Pound viewBox="0 -3 24 24" size={"1.2em"} /></span>
+                        <span class="number">{channelCount.toLocaleString()}</span>
+                    </div>
+                </div>
+                <div class="footer-row flags">
+                    {#each flagsArray as flag}
+                        <div class="flag"><Translatable resourceKey={i18nKey(flag)} /></div>
+                    {/each}
+                </div>
+            </div>
+        {/if}
+    </div>
+</div>
+
+<style lang="scss">
+    .card {
+        cursor: pointer;
+        background-color: var(--recommended-bg);
+        border: var(--bw) solid var(--bd);
+        border-radius: var(--card-rd);
+        box-shadow: var(--card-sh);
+
+        .avatar {
+            width: toRem(48);
+            height: toRem(48);
+            position: absolute;
+            bottom: toRem(-24);
+            left: $sp4;
+        }
+
+        .gate {
+            position: absolute;
+            top: $sp4;
+            right: $sp4;
+        }
+
+        &.header {
+            border-radius: 0;
+            border: none;
+        }
+
+        .content {
+            padding: toRem(16);
+            padding-top: toRem(28);
+
+            .name {
+                @include font(bold, normal, fs-130);
+            }
+
+            .desc {
+                @include font(book, normal, fs-100, 28);
+                color: var(--txt-light);
+                margin-bottom: $sp4;
+                max-height: toRem(130);
+                @include nice-scrollbar();
+                overflow-wrap: anywhere;
+
+                :global(.markdown-wrapper pre) {
+                    text-wrap: auto;
+                }
+
+                &.fixed {
+                    height: toRem(130);
+                }
+            }
+
+            .footer {
+                border-top: 1px solid var(--bd);
+                padding-top: $sp4;
+                margin-top: $sp4;
+
+                .footer-row {
+                    display: flex;
+                    justify-content: space-between;
+                    gap: $sp3;
+                    margin-bottom: 12px;
+                    .members,
+                    .channels {
+                        background-color: var(--input-bg);
+                        padding: $sp1 $sp3;
+                        border-radius: var(--rd);
+                        .number {
+                            font-weight: 500;
+                        }
+                        .label {
+                            color: var(--txt-light);
+                        }
+                    }
+                }
+            }
+
+            .flags {
+                @include font(book, normal, fs-80);
+                justify-content: flex-start !important;
+                margin-bottom: 0 !important;
+                display: flex;
+                gap: $sp2;
+                flex-wrap: wrap;
+
+                .flag {
+                    background: var(--button-bg);
+                    color: var(--button-txt);
+                    padding: $sp1 $sp3;
+                    border-radius: var(--rd);
+                }
+            }
+        }
+    }
+</style>
diff --git a/frontend/app/src/components/home/communities/explore/CommunityCardLink.svelte b/frontend/app/src/desktop/features/chats/community/explore/CommunityCardLink.svelte
similarity index 100%
rename from frontend/app/src/components/home/communities/explore/CommunityCardLink.svelte
rename to frontend/app/src/desktop/features/chats/community/explore/CommunityCardLink.svelte
diff --git a/frontend/app/src/desktop/features/chats/community/explore/Explore.svelte b/frontend/app/src/desktop/features/chats/community/explore/Explore.svelte
new file mode 100644
index 0000000000..48adefb8cb
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/community/explore/Explore.svelte
@@ -0,0 +1,393 @@
+<script lang="ts">
+    import type { OpenChat } from "@client";
+    import {
+        anonUserStore,
+        exploreCommunitiesFiltersStore,
+        iconSize,
+        identityStateStore,
+        ipadWidth,
+        isDiamondStore,
+        mobileWidth,
+        offlineStore,
+        publish,
+        ScreenWidth,
+        screenWidth,
+    } from "@client";
+    import { getContext, onMount, tick } from "svelte";
+    import { _ } from "svelte-i18n";
+    import ArrowUp from "svelte-material-icons/ArrowUp.svelte";
+    import CloudOffOutline from "svelte-material-icons/CloudOffOutline.svelte";
+    import Plus from "svelte-material-icons/Plus.svelte";
+    import Tune from "svelte-material-icons/Tune.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { communitySearchState } from "@src/stores/search.svelte";
+    import Search from "@src/desktop/shared/Search.svelte";
+    import Button from "@src/ui/Button.svelte";
+    import Fab from "@src/desktop/features/chats/core/Fab.svelte";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import FancyLoader from "@src/desktop/ui/icons/FancyLoader.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import CommunityCard from "./CommunityCard.svelte";
+    import CommunityCardLink from "./CommunityCardLink.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    let searching = $state(false);
+    let showFab = $state(false);
+    let scrollableElement: HTMLElement | null;
+    let initialised = $state(false);
+
+    function calculatePageSize(width: ScreenWidth): number {
+        // make sure we get even rows of results
+        switch (width) {
+            case ScreenWidth.Large:
+            case ScreenWidth.ExtraLarge:
+                return 30;
+            default:
+                return 32;
+        }
+    }
+
+    function createCommunity() {
+        if ($anonUserStore) {
+            client.updateIdentityState({
+                kind: "logging_in",
+                postLogin: { kind: "create_community" },
+            });
+            return;
+        }
+        if (!$isDiamondStore) {
+            publish("upgrade");
+        } else {
+            publish("createCommunity");
+        }
+    }
+
+    function search(filters: { languages: string[]; flags: number }, reset = false) {
+        searching = true;
+        if (reset) {
+            communitySearchState.reset();
+        } else {
+            communitySearchState.nextPage();
+        }
+
+        client
+            .exploreCommunities(
+                communitySearchState.term === "" ? undefined : communitySearchState.term,
+                communitySearchState.index,
+                pageSize,
+                filters.flags ?? 0,
+                filters.languages,
+            )
+            .then((results) => {
+                if (results.kind === "success") {
+                    if (reset) {
+                        communitySearchState.results = results.matches;
+                    } else {
+                        communitySearchState.appendResults(results.matches);
+                    }
+                    communitySearchState.total = results.total;
+                }
+            })
+            .finally(() => (searching = false));
+    }
+
+    function showFilters() {
+        client.pushRightPanelHistory({ kind: "community_filters" });
+    }
+
+    onMount(() => {
+        tick().then(() => {
+            scrollableElement = document.getElementById("communities-wrapper");
+            if (scrollableElement) {
+                scrollableElement.scrollTop = communitySearchState.scrollPos;
+            }
+            onScroll();
+        });
+        return exploreCommunitiesFiltersStore.subscribe((filters) => {
+            if (initialised || communitySearchState.results.length === 0) {
+                search(filters, true);
+            }
+            initialised = true;
+        });
+    });
+
+    function scrollToTop() {
+        if (scrollableElement) {
+            scrollableElement.scrollTop = 0;
+        }
+    }
+
+    function onScroll() {
+        if (scrollableElement) {
+            showFab = scrollableElement.scrollTop > 500;
+            communitySearchState.scrollPos = scrollableElement.scrollTop;
+        }
+    }
+    let pageSize = $derived(calculatePageSize($screenWidth));
+    let more = $derived(communitySearchState.total > communitySearchState.results.length);
+    let loading = $derived(searching && communitySearchState.results.length === 0);
+
+    $effect(() => {
+        if (
+            $identityStateStore.kind === "logged_in" &&
+            $identityStateStore.postLogin?.kind === "create_community"
+        ) {
+            client.clearPostLoginState();
+            tick().then(() => createCommunity());
+        }
+    });
+</script>
+
+<div class="explore">
+    <div class="header">
+        <div class="title-row">
+            <div class="title">
+                {#if $mobileWidth}
+                    <h4><Translatable resourceKey={i18nKey("communities.exploreMobile")} /></h4>
+                {:else}
+                    <h4><Translatable resourceKey={i18nKey("communities.explore")} /></h4>
+                {/if}
+            </div>
+            {#if !$ipadWidth}
+                <div class="search">
+                    <Search
+                        fill
+                        bind:searchTerm={communitySearchState.term}
+                        searching={false}
+                        onPerformSearch={() => search($exploreCommunitiesFiltersStore, true)}
+                        placeholder={i18nKey("communities.search")} />
+                </div>
+                <div class="create">
+                    <Button onClick={createCommunity} hollow
+                        ><Translatable resourceKey={i18nKey("communities.create")} /></Button>
+                </div>
+            {/if}
+            <div class="buttons">
+                {#if $ipadWidth}
+                    <HoverIcon onclick={createCommunity}>
+                        <Plus size={$iconSize} color={"var(--icon-txt)"} />
+                    </HoverIcon>
+                {/if}
+
+                <HoverIcon title={$_("showFilters")} onclick={showFilters}>
+                    <Tune size={$iconSize} color={"var(--icon-txt)"} />
+                </HoverIcon>
+            </div>
+        </div>
+        <div class="subtitle-row">
+            {#if $ipadWidth}
+                <div class="search">
+                    <Search
+                        searching={false}
+                        fill
+                        bind:searchTerm={communitySearchState.term}
+                        onPerformSearch={() => search($exploreCommunitiesFiltersStore, true)}
+                        placeholder={i18nKey("communities.search")} />
+                </div>
+            {/if}
+        </div>
+    </div>
+
+    <div onscroll={onScroll} id="communities-wrapper" class="communities-wrapper">
+        <div
+            class="communities"
+            class:loading
+            class:empty={communitySearchState.results.length === 0}>
+            {#if loading}
+                <div class="loading">
+                    <FancyLoader />
+                </div>
+            {:else if communitySearchState.results.length === 0}
+                {#if $offlineStore}
+                    <div class="no-match">
+                        <CloudOffOutline size={"1.8em"} color={"var(--txt-light)"} />
+                        <p class="sub-header">
+                            <Translatable resourceKey={i18nKey("offlineError")} />
+                        </p>
+                    </div>
+                {:else}
+                    <div class="no-match">
+                        <h4 class="header">
+                            <Translatable resourceKey={i18nKey("communities.noMatch")} />
+                        </h4>
+                        <p class="sub-header">
+                            <Translatable resourceKey={i18nKey("communities.refineSearch")} />
+                        </p>
+                    </div>
+                {/if}
+            {:else}
+                {#each communitySearchState.results as community (community.id.communityId)}
+                    <CommunityCardLink url={`/community/${community.id.communityId}`}>
+                        <CommunityCard
+                            id={community.id.communityId}
+                            name={community.name}
+                            description={community.description}
+                            avatar={community.avatar}
+                            banner={community.banner}
+                            memberCount={community.memberCount}
+                            channelCount={community.channelCount}
+                            gateConfig={community.gateConfig}
+                            language={community.primaryLanguage}
+                            flags={community.flags}
+                            verified={community.verified} />
+                    </CommunityCardLink>
+                {/each}
+            {/if}
+        </div>
+        {#if more}
+            <div class="more">
+                <Button
+                    disabled={searching}
+                    loading={searching}
+                    onClick={() => search($exploreCommunitiesFiltersStore, false)}
+                    ><Translatable resourceKey={i18nKey("communities.loadMore")} /></Button>
+            </div>
+        {/if}
+    </div>
+    <div class:show={showFab} class="fab">
+        <Fab on:click={scrollToTop}>
+            <ArrowUp size={$iconSize} color={"#fff"} />
+        </Fab>
+    </div>
+</div>
+
+<style lang="scss">
+    .explore {
+        display: flex;
+        flex-direction: column;
+        gap: $sp4;
+        padding: $sp5;
+        height: 100%;
+        overflow: hidden;
+        position: relative;
+
+        @include mobile() {
+            padding: $sp3;
+            gap: $sp3;
+        }
+    }
+
+    .header {
+        .title-row {
+            display: flex;
+            align-items: center;
+            gap: $sp4;
+            margin-bottom: $sp5;
+
+            @include size-below(lg) {
+                margin-bottom: $sp3;
+                justify-content: space-between;
+            }
+
+            .title {
+                display: flex;
+                gap: $sp3;
+                align-items: center;
+
+                h4 {
+                    @include font(bold, normal, fs-160, 38);
+                    flex: auto;
+
+                    @include mobile() {
+                        @include font(bold, normal, fs-140, 38);
+                    }
+                }
+            }
+
+            .search {
+                flex: auto;
+            }
+
+            .buttons {
+                display: flex;
+                align-items: center;
+                justify-content: flex-end;
+            }
+        }
+
+        .subtitle-row {
+            display: flex;
+            justify-content: space-between;
+            gap: $sp4;
+
+            @include size-below(lg) {
+                flex-direction: column;
+            }
+        }
+    }
+
+    .communities-wrapper {
+        @include nice-scrollbar();
+        flex: auto;
+        height: 3000px;
+    }
+
+    .communities {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        grid-gap: $sp5;
+        margin-bottom: $sp5;
+
+        @include size-below(xxl) {
+            grid-gap: $sp4;
+        }
+
+        @include size-below(xl) {
+            grid-template-columns: repeat(3, 1fr);
+        }
+
+        @include size-below(md) {
+            grid-template-columns: repeat(2, 1fr);
+        }
+
+        @include size-below(sm) {
+            grid-template-columns: repeat(1, 1fr);
+        }
+
+        &.loading,
+        &.empty {
+            height: 100%;
+            grid-template-columns: repeat(1, 1fr);
+            margin-bottom: 0;
+        }
+    }
+
+    .more {
+        text-align: center;
+    }
+
+    $size: 200px;
+
+    .loading {
+        width: $size;
+        margin: auto;
+    }
+
+    .no-match {
+        .header {
+            @include font(bold, normal, fs-160, 38);
+        }
+        .sub-header {
+            @include font(book, normal, fs-100, 38);
+            color: var(--txt-light);
+        }
+        margin: auto;
+        text-align: center;
+    }
+
+    .fab {
+        transition: opacity ease-in-out 300ms;
+        position: absolute;
+        @include z-index("fab");
+        right: 20px;
+        bottom: 20px;
+        opacity: 0;
+        pointer-events: none;
+
+        &.show {
+            opacity: 1;
+            pointer-events: all;
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/community/explore/Filters.svelte b/frontend/app/src/desktop/features/chats/community/explore/Filters.svelte
new file mode 100644
index 0000000000..b69a135533
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/community/explore/Filters.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+    import { communityFiltersStore, iconSize, mobileWidth, OpenChat } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import Close from "svelte-material-icons/Close.svelte";
+    import { i18nKey, supportedLanguages } from "@src/i18n/i18n";
+    import Checkbox from "@src/desktop/shared/Checkbox.svelte";
+    import CollapsibleCard from "@src/desktop/shared/CollapsibleCard.svelte";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import SectionHeader from "@src/desktop/shared/SectionHeader.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        onClose: () => void;
+    }
+
+    let { onClose }: Props = $props();
+</script>
+
+<SectionHeader shadow flush={$mobileWidth}>
+    <h4><Translatable resourceKey={i18nKey("communities.filters")} /></h4>
+    <span title={$_("close")} class="close" on:click={onClose}>
+        <HoverIcon>
+            <Close size={$iconSize} color={"var(--icon-txt)"} />
+        </HoverIcon>
+    </span>
+</SectionHeader>
+
+<div class="community-filters">
+    <CollapsibleCard open headerText={i18nKey("communities.primaryLanguage")}>
+        {#each supportedLanguages as lang}
+            <div class="toggle">
+                <Checkbox
+                    id={`language_${lang.code}`}
+                    onChange={() => client.toggleCommunityFilterLanguage(lang.code)}
+                    label={i18nKey(lang.name)}
+                    checked={$communityFiltersStore.has(lang.code)} />
+            </div>
+        {/each}
+    </CollapsibleCard>
+</div>
+
+<style lang="scss">
+    h4 {
+        flex: 1;
+        margin: 0;
+        @include font-size(fs-120);
+    }
+    .close {
+        flex: 0 0 30px;
+    }
+
+    .toggle {
+        margin-bottom: $sp4;
+    }
+
+    .community-filters {
+        background-color: var(--bg);
+        padding: 0 $sp4;
+        padding-bottom: 0;
+        @include nice-scrollbar();
+
+        @include mobile() {
+            height: 100%;
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/AcceptP2PSwapModal.svelte b/frontend/app/src/desktop/features/chats/core/AcceptP2PSwapModal.svelte
new file mode 100644
index 0000000000..4fd168b8fa
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/AcceptP2PSwapModal.svelte
@@ -0,0 +1,142 @@
+<script lang="ts">
+    import type { OpenChat } from "@client";
+    import {
+        cryptoBalanceStore,
+        enhancedCryptoLookup as cryptoLookup,
+        mobileWidth,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import AccountInfo from "@src/desktop/shared/AccountInfo.svelte";
+    import BalanceWithRefresh from "@src/desktop/shared/BalanceWithRefresh.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        ledger0: string;
+        ledger1: string;
+        amount0: bigint;
+        amount1: bigint;
+        onClose: () => void;
+        onAccept: () => void;
+    }
+
+    let { ledger0, ledger1, amount0, amount1, onClose, onAccept }: Props = $props();
+
+    let refreshing = false;
+    let error: string | undefined = undefined;
+    //@ts-ignore
+    let balanceWithRefresh: BalanceWithRefresh;
+
+    function reset() {
+        balanceWithRefresh.refresh();
+    }
+
+    let cryptoBalance = $derived($cryptoBalanceStore.get(ledger1) ?? 0n);
+    let tokenDetails0 = $derived($cryptoLookup.get(ledger0)!);
+    let tokenDetails1 = $derived($cryptoLookup.get(ledger1)!);
+    let symbol0 = $derived(tokenDetails0.symbol);
+    let symbol1 = $derived(tokenDetails1.symbol);
+    let transferFees = $derived(BigInt(2) * tokenDetails1.transferFee);
+    let insufficient = $derived(cryptoBalance <= amount1 + transferFees);
+    let valid = $derived(error === undefined && !insufficient);
+    let amount0Text = $derived(client.formatTokens(amount0, tokenDetails0.decimals));
+    let amount1Text = $derived(client.formatTokens(amount1 + transferFees, tokenDetails1.decimals));
+</script>
+
+<Overlay dismissible>
+    <ModalContent>
+        {#snippet header()}
+            <span class="header">
+                <div>
+                    <Translatable
+                        resourceKey={i18nKey(
+                            insufficient ? "p2pSwap.insufficientBalance" : "areYouSure",
+                        )} />
+                </div>
+                <BalanceWithRefresh
+                    bind:this={balanceWithRefresh}
+                    ledger={ledger1}
+                    value={cryptoBalance}
+                    label={i18nKey("p2pSwap.tokenBalance", { token: symbol1 })}
+                    bold />
+            </span>
+        {/snippet}
+        {#snippet body()}
+            <form>
+                <div class="body" class:insufficient>
+                    {#if insufficient}
+                        <p class="info">
+                            <Translatable
+                                resourceKey={i18nKey("p2pSwap.insufficientBalanceMessage", {
+                                    amount: amount1Text,
+                                    token: symbol1,
+                                })} />
+                        </p>
+                        <AccountInfo ledger={ledger1} />
+                        <p><Translatable resourceKey={i18nKey("tokenTransfer.makeDeposit")} /></p>
+                    {:else}
+                        <Translatable
+                            resourceKey={i18nKey("p2pSwap.confirmAccept", {
+                                amount: amount1Text,
+                                token: symbol1,
+                                amountOther: amount0Text,
+                                tokenOther: symbol0,
+                            })} />
+                    {/if}
+                </div>
+            </form>
+        {/snippet}
+        {#snippet footer()}
+            <span>
+                <ButtonGroup>
+                    <Button small={!$mobileWidth} tiny={$mobileWidth} secondary onClick={onClose}
+                        ><Translatable resourceKey={i18nKey("cancel")} /></Button>
+                    {#if insufficient}
+                        <Button
+                            small={!$mobileWidth}
+                            disabled={refreshing}
+                            loading={refreshing}
+                            tiny={$mobileWidth}
+                            onClick={reset}
+                            ><Translatable resourceKey={i18nKey("refresh")} /></Button>
+                    {:else}
+                        <Button
+                            small={!$mobileWidth}
+                            disabled={!valid}
+                            tiny={$mobileWidth}
+                            onClick={onAccept}
+                            ><Translatable resourceKey={i18nKey("yes")} /></Button>
+                    {/if}
+                </ButtonGroup>
+            </span>
+        {/snippet}
+    </ModalContent>
+</Overlay>
+
+<style lang="scss">
+    .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: $sp2;
+    }
+
+    .body {
+        transition: background-color 100ms ease-in-out;
+        @include font(book, normal, fs-100, 28);
+    }
+
+    .how-to {
+        margin-top: $sp4;
+    }
+
+    .info {
+        margin-bottom: $sp3;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/AcceptRulesModal.svelte b/frontend/app/src/desktop/features/chats/core/AcceptRulesModal.svelte
new file mode 100644
index 0000000000..c21d450b5e
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/AcceptRulesModal.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+    import {
+        type OpenChat,
+        captureRulesAcceptanceStore as rulesAcceptanceStore,
+        selectedChatRulesStore,
+        selectedCommunityRulesStore,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import AreYouSure from "@src/desktop/shared/AreYouSure.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    function onAction(accepted: boolean): Promise<void> {
+        $rulesAcceptanceStore?.resolve(accepted);
+        return Promise.resolve();
+    }
+</script>
+
+<AreYouSure
+    title={i18nKey("rules.acceptTitle")}
+    message={i18nKey(
+        client.combineRulesText($selectedChatRulesStore, $selectedCommunityRulesStore),
+    )}
+    yesLabel={i18nKey("rules.accept")}
+    noLabel={i18nKey("rules.reject")}
+    action={onAction} />
diff --git a/frontend/app/src/desktop/features/chats/core/AlertBoxModal.svelte b/frontend/app/src/desktop/features/chats/core/AlertBoxModal.svelte
new file mode 100644
index 0000000000..481e1fa715
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/AlertBoxModal.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+    import { i18nKey, mobileWidth, type ResourceKey } from "@client";
+    import { _ } from "svelte-i18n";
+    import { interpolate } from "@src/i18n/i18n";
+    import AlertBox from "@src/desktop/shared/AlertBox.svelte";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    interface Props {
+        title: ResourceKey;
+        warning: ResourceKey;
+        onClose: () => void;
+    }
+
+    let { onClose, title, warning }: Props = $props();
+</script>
+
+<Overlay {onClose} dismissible>
+    <ModalContent closeIcon {onClose}>
+        {#snippet header()}
+            <div class="header">
+                <Translatable resourceKey={title}></Translatable>
+            </div>
+        {/snippet}
+        {#snippet body()}
+            <div class="body">
+                <AlertBox>
+                    <Markdown text={interpolate($_, warning)} />
+                </AlertBox>
+            </div>
+        {/snippet}
+        {#snippet footer()}
+            <div class="footer">
+                <ButtonGroup>
+                    <Button onClick={onClose} small={!$mobileWidth} tiny={$mobileWidth}>
+                        <Translatable resourceKey={i18nKey("close")} />
+                    </Button>
+                </ButtonGroup>
+            </div>
+        {/snippet}
+    </ModalContent>
+</Overlay>
+
+<style lang="scss">
+    .body {
+        display: flex;
+        flex-direction: column;
+        gap: $sp4;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/ChatMessage.svelte b/frontend/app/src/desktop/features/chats/core/ChatMessage.svelte
new file mode 100644
index 0000000000..ddc36cde35
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/ChatMessage.svelte
@@ -0,0 +1,1110 @@
+
+<script lang="ts">
+    import { navigate } from "@src/utils/navigation";
+    import Typing from "@src/ui/Typing.svelte";
+    import { trackedEffect } from "@src/utils/effects.svelte";
+    import type { ProfileLinkClickedEvent } from "@webcomponents/profileLink";
+    import { AvatarSize, type ChatIdentifier, chatListScopeStore, type ChatType, currentUserIdStore, currentUserStore, type EnhancedReplyContext, iconSize, localUpdates, type Message, type MessageReminderCreatedContent, mobileWidth, OpenChat, publish, routeForMessage, routeStore, screenWidth, ScreenWidth, selectedChatBlockedUsersStore, selectedChatWebhooksStore, selectedCommunityMembersStore, type SelectedEmoji, type SenderContext, translationsStore, unconfirmedReadByThem, undeletingMessagesStore, type UserSummary } from "@client";
+    import { getContext, onDestroy, onMount, tick } from "svelte";
+    import { _ } from "svelte-i18n";
+    import Close from "svelte-material-icons/Close.svelte";
+    import EmoticonOutline from "svelte-material-icons/EmoticonOutline.svelte";
+    import ForwardIcon from "svelte-material-icons/Share.svelte";
+    import { fade } from "svelte/transition";
+    import { longpress } from "@src/actions/longpress";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { quickReactions } from "@src/stores/quickReactions";
+    import { rtlStore } from "@src/stores/rtl";
+    import { dclickReply } from "@src/stores/settings";
+    import { now } from "@src/stores/time";
+    import { toastStore } from "@src/stores/toast";
+    import { isTouchOnlyDevice } from "@src/utils/devices";
+    import { reservedMediaWidth } from "@src/utils/media";
+    import { canShareMessage } from "@src/utils/share";
+    import { removeQueryStringParam } from "@src/utils/urls";
+    import Avatar from "@src/desktop/shared/Avatar.svelte";
+    import BotMessageContext from "@src/desktop/features/bots/BotMessageContext.svelte";
+    import BotProfile, { type BotProfileProps } from "@src/desktop/features/bots/BotProfile.svelte";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import Link from "@src/desktop/shared/Link.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import ChatMessageContent from "@src/desktop/features/chats/core/content/ChatMessageContent.svelte";
+    import ChatMessageMenu from "./ChatMessageMenu.svelte";
+    import EmojiPicker from "./EmojiPickerWrapper.svelte";
+    import EphemeralNote from "./EphemeralNote.svelte";
+    import IntersectionObserverComponent from "./IntersectionObserver.svelte";
+    import MessageReaction from "@src/desktop/shared/MessageReaction.svelte";
+    import Badges from "@src/desktop/features/profile/Badges.svelte";
+    import BotBadge from "@src/desktop/features/bots/exports/BotBadge.svelte";
+    import RoleIcon from "@src/desktop/features/profile/RoleIcon.svelte";
+    import WithRole from "@src/desktop/features/profile/WithRole.svelte";
+    import ReminderBuilder from "./ReminderBuilder.svelte";
+    import RepliesTo from "./RepliesTo.svelte";
+    import ReportMessage from "./ReportMessage.svelte";
+    import ThreadSummary from "./ThreadSummary.svelte";
+    import TimeAndTicks from "./TimeAndTicks.svelte";
+    import TipBuilder from "./TipBuilder.svelte";
+    import TipThumbnail from "@src/desktop/shared/TipThumbnail.svelte";
+    import UnresolvedReply from "./UnresolvedReply.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        chatId: ChatIdentifier;
+        chatType: ChatType;
+        sender: UserSummary | undefined;
+        msg: Message;
+        me: boolean;
+        eventIndex: number;
+        timestamp: bigint;
+        expiresAt: number | undefined;
+        first: boolean;
+        last: boolean;
+        accepted: boolean;
+        confirmed: boolean;
+        failed: boolean;
+        readByMe: boolean;
+        observer?: IntersectionObserver;
+        focused: boolean;
+        readonly: boolean;
+        pinned: boolean;
+        canPin: boolean;
+        canBlockUsers: boolean;
+        canDelete: boolean;
+        canQuoteReply: boolean;
+        canReact: boolean;
+        publicGroup: boolean;
+        editing: boolean;
+        canStartThread: boolean;
+        senderTyping: boolean;
+        dateFormatter?: (date: Date) => string;
+        collapsed?: boolean;
+        threadRootMessage: Message | undefined;
+        senderContext: SenderContext | undefined;
+        onExpandMessage?: (() => void) | undefined;
+        // this is not to do with permission - some messages (namely thread root messages) will simply not support replying or editing inside a thread
+        supportsEdit: boolean;
+        supportsReply: boolean;
+        onReplyTo?: (replyContext: EnhancedReplyContext) => void;
+        onEditMessage?: () => void;
+        onCollapseMessage?: () => void;
+        onRetrySend?: () => void;
+        onDeleteFailedMessage?: () => void;
+        onRemovePreview?: (url: string) => void;
+        onGoToMessageIndex?: (args: { index: number }) => void;
+    }
+
+    let {
+        chatId,
+        chatType,
+        sender,
+        msg,
+        me,
+        eventIndex,
+        timestamp,
+        expiresAt,
+        first,
+        last,
+        accepted,
+        confirmed,
+        failed,
+        readByMe,
+        observer,
+        focused,
+        readonly,
+        pinned,
+        canPin,
+        canBlockUsers,
+        canDelete,
+        canQuoteReply,
+        canReact,
+        publicGroup,
+        editing,
+        canStartThread,
+        senderTyping,
+        dateFormatter = (date) => client.toShortTimeString(date),
+        collapsed = false,
+        threadRootMessage,
+        senderContext,
+        onExpandMessage = undefined,
+        supportsEdit,
+        supportsReply,
+        onReplyTo,
+        onEditMessage,
+        onCollapseMessage,
+        onRetrySend,
+        onDeleteFailedMessage,
+        onRemovePreview,
+        onGoToMessageIndex,
+    }: Props = $props();
+
+    let msgElement: HTMLElement | undefined;
+    let messageMenu: ChatMessageMenu | undefined;
+
+    let multiUserChat = chatType === "group_chat" || chatType === "channel";
+    let showEmojiPicker = $state(false);
+    let debug = false;
+    let crypto =
+        msg.content.kind === "crypto_content" ||
+        msg.content.kind === "prize_content" ||
+        msg.content.kind === "p2p_swap_content";
+    let showRemindMe = $state(false);
+    let showReport = $state(false);
+    let tipping: string | undefined = $state(undefined);
+    let percentageExpired = $state(100);
+    let botProfile: BotProfileProps | undefined = $state(undefined);
+    let confirmedReadByThem = $derived(client.messageIsReadByThem(chatId, msg.messageIndex));
+    let readByThem = $derived(confirmedReadByThem || $unconfirmedReadByThem.has(msg.messageId));
+    let streak = $derived(sender?.streak ?? 0);
+    let chitEarned = $derived(sender?.totalChitEarned ?? 0);
+    let hasAchievedMaxStreak = $derived((sender?.maxStreak ?? 0) >= 365);
+
+    trackedEffect("read-by-them", () => {
+        if (confirmedReadByThem && $unconfirmedReadByThem.has(msg.messageId)) {
+            unconfirmedReadByThem.delete(msg.messageId);
+        }
+    });
+
+    onMount(() => {
+        if (!readByMe) {
+            tick().then(() => {
+                if (observer !== undefined && msgElement !== undefined) {
+                    try {
+                        observer.observe(msgElement);
+                    } catch {}
+                }
+            });
+        }
+
+        if (expiresAt !== undefined) {
+            return now.subscribe((t) => {
+                const ttl = expiresAt ? expiresAt - Number(timestamp) : 0;
+                const age = t - Number(timestamp);
+                const expired = age > ttl;
+                percentageExpired = expired ? 100 : (age / ttl) * 100;
+                // if this message is the root of a thread, make sure that we close that thread when the message expires
+                if (percentageExpired >= 100 && msg.thread) {
+                    client.filterRightPanelHistory(
+                        (panel) => panel.kind !== "message_thread_panel",
+                    );
+                    navigate(removeQueryStringParam("open"));
+                }
+            });
+        }
+    });
+
+    onDestroy(() => {
+        if (msgElement) {
+            observer?.unobserve(msgElement);
+        }
+    });
+
+    function createReplyContext(): EnhancedReplyContext {
+        return {
+            kind: "rehydrated_reply_context",
+            senderId: msg.sender,
+            eventIndex: eventIndex,
+            content: msg.content,
+            sender,
+            messageId: msg.messageId,
+            messageIndex: msg.messageIndex,
+            edited: msg.edited,
+            isThreadRoot: msg.thread !== undefined,
+            sourceContext: messageContext,
+        };
+    }
+
+    function reply() {
+        if (canQuoteReply) {
+            onReplyTo?.(createReplyContext());
+        }
+    }
+
+    function replyPrivately() {
+        publish("replyPrivatelyTo", createReplyContext());
+    }
+
+    function cancelReminder(content: MessageReminderCreatedContent) {
+        client
+            .cancelMessageReminder(msg.messageId, { ...content, hidden: true })
+            .then((success) => {
+                if (success) {
+                    toastStore.showSuccessToast(i18nKey("reminders.cancelSuccess"));
+                } else {
+                    toastStore.showFailureToast(i18nKey("reminders.cancelFailure"));
+                }
+            });
+    }
+
+    function editMessage() {
+        if (canEdit) {
+            onEditMessage?.();
+        }
+    }
+
+    function doubleClickMessage() {
+        if (failed || msg.deleted || !$dclickReply) return;
+
+        if (me) {
+            editMessage();
+        } else if (confirmed) {
+            reply();
+        }
+    }
+
+    function tipMessage(ledger: string) {
+        tipping = ledger;
+    }
+
+    function selectReaction(selected: SelectedEmoji) {
+        if (selected.kind === "native") {
+            toggleReaction(false, selected.unicode);
+        } else {
+            toggleReaction(false, `@CE(${selected.code})`);
+        }
+    }
+
+    function selectQuickReaction(unicode: string) {
+        toggleReaction(true, unicode);
+    }
+
+    function toggleReaction(isQuickReaction: boolean, reaction: string) {
+        if (canReact) {
+            const kind = client.containsReaction($currentUserIdStore, reaction, msg.reactions)
+                ? "remove"
+                : "add";
+
+            client
+                .selectReaction(
+                    chatId,
+                    $currentUserIdStore,
+                    threadRootMessageIndex,
+                    msg.messageId,
+                    reaction,
+                    $currentUserStore.username,
+                    $currentUserStore.displayName,
+                    kind,
+                )
+                .then((success) => {
+                    if (success && kind === "add") {
+                        client.trackEvent("reacted_to_message");
+
+                        if (isQuickReaction) {
+                            // Note: Manually selected reactions do not increment
+                            // their fav counter by default, so we do it manually.
+                            // Also refresh loaded reactions.
+                            quickReactions.incrementFavourite(reaction);
+                        }
+
+                        quickReactions.reload();
+                    }
+                });
+        }
+        showEmojiPicker = false;
+    }
+
+    function openUserProfile(ev: Event) {
+        if (sender?.kind === "bot") {
+            botProfile = {
+                botId: sender.userId,
+                chatId,
+                onClose: () => (botProfile = undefined),
+            };
+        } else {
+            ev.target?.dispatchEvent(
+                new CustomEvent<ProfileLinkClickedEvent>("profile-clicked", {
+                    detail: {
+                        userId: msg.sender,
+                        chatButton: multiUserChat,
+                        inGlobalContext: false,
+                    },
+                    bubbles: true,
+                }),
+            );
+        }
+    }
+
+    function onRegisterVote(detail: { answerIndex: number; type: "register" | "delete" }) {
+        if (chatId.kind === "direct_chat") return;
+
+        client
+            .registerPollVote(
+                chatId,
+                threadRootMessageIndex,
+                msg.messageId,
+                msg.messageIndex,
+                detail.answerIndex,
+                detail.type,
+            )
+            .then((success) => {
+                if (!success) {
+                    toastStore.showFailureToast(i18nKey("poll.voteFailed"));
+                }
+            });
+    }
+
+    function reportMessage() {
+        showReport = true;
+    }
+
+    function remindMe() {
+        showRemindMe = true;
+    }
+    let maxWidthFraction = $derived($screenWidth === ScreenWidth.ExtraLarge ? 0.7 : 0.8);
+    let mediaDimensions = $derived(client.extractDimensionsFromMessageContent(msg.content));
+    let mediaWidth = $derived(
+        mediaDimensions !== undefined
+            ? reservedMediaWidth(mediaDimensions.width, mediaDimensions.height)
+            : undefined,
+    );
+    let inert = $derived(
+        msg.content.kind === "deleted_content" ||
+            msg.content.kind === "blocked_content" ||
+            collapsed,
+    );
+    let canTip = $derived(!me && confirmed && !inert && !failed);
+    let inThread = $derived(threadRootMessage !== undefined);
+    let threadRootMessageIndex = $derived(
+        threadRootMessage?.messageId === msg.messageId
+            ? undefined
+            : threadRootMessage?.messageIndex,
+    );
+    let fill = $derived(client.fillMessage(msg));
+    let showAvatar = $derived($screenWidth !== ScreenWidth.ExtraExtraSmall);
+    let translated = $derived($translationsStore.has(msg.messageId));
+    let threadSummary = $derived(msg.thread);
+    let msgUrl = $derived(
+        `${routeForMessage($chatListScopeStore.kind, { chatId }, msg.messageIndex)}?open=true`,
+    );
+    let isProposal = $derived(msg.content.kind === "proposal_content");
+    let isPrize = $derived(msg.content.kind === "prize_content");
+    let isP2PSwap = $derived(msg.content.kind === "p2p_swap_content");
+    let canEdit = $derived(
+        me && supportsEdit && !msg.deleted && client.contentTypeSupportsEdit(msg.content.kind),
+    );
+    let undeleting = $derived($undeletingMessagesStore.has(msg.messageId));
+    let deletedByMe = $derived(
+        msg.content.kind === "deleted_content" && msg.content.deletedBy == $currentUserIdStore,
+    );
+    let permanentlyDeleted = $derived(
+        deletedByMe &&
+            me &&
+            msg.content.kind === "deleted_content" &&
+            Number(msg.content.timestamp) < $now - 5 * 60 * 1000,
+    );
+    let canRevealDeleted = $derived(deletedByMe && !undeleting && !permanentlyDeleted);
+    let canRevealBlocked = $derived(msg.content.kind === "blocked_content");
+    let messageContext = $derived({ chatId, threadRootMessageIndex });
+    let ephemeral = $derived(localUpdates.isEphemeral(messageContext, msg.messageId));
+    let showChatMenu = $derived(
+        (!inert || canRevealDeleted || canRevealBlocked) && !readonly && !ephemeral,
+    );
+    let canUndelete = $derived(msg.deleted && msg.content.kind !== "deleted_content");
+    let senderDisplayName = $derived(
+        client.getDisplayName(
+            msg.sender,
+            $selectedCommunityMembersStore,
+            $selectedChatWebhooksStore,
+        ),
+    );
+    let tips = $derived(msg.tips ? Object.entries(msg.tips) : []);
+    let canBlockUser = $derived(canBlockUsers && !$selectedChatBlockedUsersStore.has(msg.sender));
+    let edited = $derived(
+        msg.edited && (senderContext?.kind !== "bot" || !senderContext.finalised),
+    );
+    let canShare = $derived(canShareMessage(msg.content));
+    let canForward = $derived(client.canForward(msg.content));
+    let canTranslate = $derived((client.getMessageText(msg.content) ?? "").length > 0);
+</script>
+
+
+{#if botProfile !== undefined}
+    <BotProfile {...botProfile} />
+{/if}
+
+{#if tipping !== undefined}
+    <TipBuilder ledger={tipping} onClose={() => (tipping = undefined)} {msg} {messageContext} />
+{/if}
+
+{#if showEmojiPicker && canReact}
+    <Overlay onClose={() => (showEmojiPicker = false)} dismissible>
+        <ModalContent hideFooter hideHeader fill>
+            {#snippet body()}
+                <div class="emoji-header">
+                    <h4><Translatable resourceKey={i18nKey("chooseReaction")} /></h4>
+                    <span
+                        title={$_("close")}
+                        class="close-emoji"
+                        onclick={() => (showEmojiPicker = false)}>
+                        <HoverIcon>
+                            <Close size={$iconSize} color={"var(--icon-txt)"} />
+                        </HoverIcon>
+                    </span>
+                </div>
+                <EmojiPicker
+                    onEmojiSelected={selectReaction}
+                    onSkintoneChanged={(tone) => quickReactions.reload(tone)}
+                    supportCustom={true}
+                    mode={"reaction"} />
+            {/snippet}
+        </ModalContent>
+    </Overlay>
+{/if}
+
+{#if showRemindMe}
+    <ReminderBuilder
+        {chatId}
+        {eventIndex}
+        {threadRootMessageIndex}
+        onClose={() => (showRemindMe = false)} />
+{/if}
+
+{#if showReport}
+    <ReportMessage
+        {threadRootMessageIndex}
+        messageId={msg.messageId}
+        {chatId}
+        {canDelete}
+        onClose={() => (showReport = false)} />
+{/if}
+
+{#if expiresAt === undefined || percentageExpired < 100}
+    <div out:fade|local={{ duration: 1000 }} class="message-wrapper" class:last>
+        {#if senderContext?.kind === "bot" && senderContext.command !== undefined}
+            <div class="bot-context">
+                <BotMessageContext
+                    botName={senderDisplayName}
+                    botCommand={senderContext.command}
+                    finalised={senderContext.finalised} />
+            </div>
+        {/if}
+        <IntersectionObserverComponent>
+            {#snippet children(intersecting)}
+                <div
+                    bind:this={msgElement}
+                    class="message"
+                    class:me
+                    data-index={failed ? "" : msg.messageIndex}
+                    data-id={failed ? "" : msg.messageId}
+                    id={failed ? "" : `event-${eventIndex}`}>
+                    {#if showAvatar}
+                        <div class="avatar-col">
+                            {#if first}
+                                <!-- svelte-ignore a11y_click_events_have_key_events -->
+                                <!-- svelte-ignore a11y_no_static_element_interactions -->
+                                <div class="avatar" onclick={openUserProfile}>
+                                    <Avatar
+                                        maxStreak={hasAchievedMaxStreak}
+                                        url={client.userAvatarUrl(sender)}
+                                        userId={msg.sender}
+                                        size={$mobileWidth
+                                            ? AvatarSize.Small
+                                            : AvatarSize.Default} />
+                                </div>
+                            {/if}
+                        </div>
+                    {/if}
+
+                    <div
+                        class="bubble-wrapper"
+                        style={`--max-width: ${maxWidthFraction * 100}%;` +
+                            (mediaWidth !== undefined ? ` --media-width: ${mediaWidth};` : "")}
+                        class:clamped={mediaWidth !== undefined}
+                        class:p2pSwap={isP2PSwap}
+                        class:proposal={isProposal && !inert}>
+                        <!-- svelte-ignore a11y_no_static_element_interactions -->
+                        <div
+                            ondblclick={doubleClickMessage}
+                            use:longpress={() => messageMenu?.showMenu()}
+                            class="message-bubble"
+                            class:focused
+                            class:editing
+                            class:fill={fill && !inert}
+                            class:me
+                            class:inert
+                            class:collapsed
+                            class:first
+                            class:last
+                            class:readByMe
+                            class:crypto
+                            class:failed
+                            class:bot={senderContext?.kind === "bot"}
+                            class:thread={inThread}
+                            class:rtl={$rtlStore}>
+                            {#if first && !isProposal && !isPrize}
+                                <div class="sender" class:fill class:rtl={$rtlStore}>
+                                    <Link underline={"never"} onClick={openUserProfile}>
+                                        <h4 class="username" class:fill class:crypto>
+                                            {senderDisplayName}
+                                        </h4>
+
+                                        <Badges
+                                            uniquePerson={sender?.isUniquePerson}
+                                            diamondStatus={sender?.diamondStatus}
+                                            {streak}
+                                            {chitEarned} />
+                                        <BotBadge
+                                            bot={senderContext?.kind === "bot"}
+                                            webhook={senderContext?.kind === "webhook"} />
+                                        {#if sender !== undefined && multiUserChat}
+                                            <WithRole
+                                                userId={sender.userId}
+                                                chatMembers={$selectedCommunityMembersStore}
+                                                communityMembers={$selectedCommunityMembersStore}>
+                                                {#snippet children(communityRole, chatRole)}
+                                                    <RoleIcon
+                                                        level="community"
+                                                        popup
+                                                        role={communityRole} />
+                                                    <RoleIcon
+                                                        level={chatType === "channel"
+                                                            ? "channel"
+                                                            : "group"}
+                                                        popup
+                                                        role={chatRole} />
+                                                {/snippet}
+                                            </WithRole>
+                                        {/if}
+                                    </Link>
+                                    {#if senderTyping}
+                                        <span class="typing">
+                                            <Typing />
+                                        </span>
+                                    {/if}
+                                </div>
+                            {/if}
+                            {#if msg.forwarded}
+                                <div class="forwarded">
+                                    <div>
+                                        <ForwardIcon
+                                            size={$iconSize}
+                                            color={me
+                                                ? "var(--currentChat-msg-me-muted)"
+                                                : "var(--currentChat-msg-muted)"} />
+                                    </div>
+                                    <div class="text">{"Forwarded"}</div>
+                                </div>
+                            {/if}
+                            {#if msg.repliesTo !== undefined && !inert}
+                                {#if msg.repliesTo.kind === "rehydrated_reply_context"}
+                                    <RepliesTo
+                                        {readonly}
+                                        {chatId}
+                                        {intersecting}
+                                        {onRemovePreview}
+                                        {onGoToMessageIndex}
+                                        repliesTo={msg.repliesTo} />
+                                {:else}
+                                    <UnresolvedReply />
+                                {/if}
+                            {/if}
+
+                            <ChatMessageContent
+                                senderId={msg.sender}
+                                {readonly}
+                                {fill}
+                                {me}
+                                {messageContext}
+                                {collapsed}
+                                {undeleting}
+                                {intersecting}
+                                {failed}
+                                {timestamp}
+                                messageIndex={msg.messageIndex}
+                                messageId={msg.messageId}
+                                content={msg.content}
+                                {edited}
+                                blockLevelMarkdown={msg.blockLevelMarkdown}
+                                {onRemovePreview}
+                                {onRegisterVote}
+                                {onExpandMessage}
+                                ogPreviews={msg.ogPreviews}
+                                messagePreviews={msg.messagePreviews} />
+
+                            {#if !inert}
+                                <TimeAndTicks
+                                    {pinned}
+                                    prize={isPrize}
+                                    fill={fill && !isPrize}
+                                    {timestamp}
+                                    {expiresAt}
+                                    {percentageExpired}
+                                    {me}
+                                    bot={sender?.kind === "bot"}
+                                    {accepted}
+                                    {failed}
+                                    deleted={msg.deleted}
+                                    {undeleting}
+                                    {readByThem}
+                                    {crypto}
+                                    {chatType}
+                                    {dateFormatter} />
+                            {/if}
+
+                            {#if debug}
+                                <pre>Sender: {msg.sender}</pre>
+                                <pre>EventIdx: {eventIndex}</pre>
+                                <pre>MsgIdx: {msg.messageIndex}</pre>
+                                <pre>MsgId: {msg.messageId}</pre>
+                                <pre>Confirmed: {confirmed}</pre>
+                                <pre>ReadByThem: {readByThem}</pre>
+                                <pre>ReadByUs: {readByMe}</pre>
+                                <pre>Pinned: {pinned}</pre>
+                                <pre>edited: {msg.edited}</pre>
+                                <pre>failed: {failed}</pre>
+                                <pre>timestamp: {timestamp}</pre>
+                                <pre>expiresAt: {expiresAt}</pre>
+                                <pre>thread: {JSON.stringify(msg.thread, null, 4)}</pre>
+                                <pre>senderContext: {JSON.stringify(senderContext, null, 4)}</pre>
+                                <pre>inert: {inert}</pre>
+                                <pre>canRevealDeleted: {canRevealDeleted}</pre>
+                                <pre>canlRevealBlocked: {canRevealBlocked}</pre>
+                                <pre>readonly: {readonly}</pre>
+                                <pre>showChatMenu: {showChatMenu}</pre>
+                                <pre>intersecting: {intersecting}</pre>
+                                <pre>ephemeral: {ephemeral}</pre>
+                            {/if}
+                        </div>
+
+                        {#if showChatMenu && intersecting}
+                            <ChatMessageMenu
+                                bind:this={messageMenu}
+                                {chatId}
+                                {isProposal}
+                                {inert}
+                                {publicGroup}
+                                {confirmed}
+                                {failed}
+                                {canShare}
+                                {me}
+                                {canPin}
+                                {canTip}
+                                {pinned}
+                                {supportsReply}
+                                {canQuoteReply}
+                                {threadRootMessage}
+                                {canStartThread}
+                                {multiUserChat}
+                                {msg}
+                                {canForward}
+                                {canBlockUser}
+                                {canEdit}
+                                {canDelete}
+                                {canUndelete}
+                                {canRevealDeleted}
+                                {canRevealBlocked}
+                                translatable={canTranslate}
+                                {translated}
+                                {selectQuickReaction}
+                                showEmojiPicker={() => {
+                                    showEmojiPicker = true;
+                                }}
+                                {canReact}
+                                {onCollapseMessage}
+                                onReply={reply}
+                                {onRetrySend}
+                                {onDeleteFailedMessage}
+                                onReplyPrivately={replyPrivately}
+                                onEditMessage={editMessage}
+                                onTipMessage={tipMessage}
+                                onReportMessage={reportMessage}
+                                onCancelReminder={cancelReminder}
+                                onRemindMe={remindMe} />
+                        {/if}
+
+                        {#if ephemeral}
+                            <EphemeralNote />
+                        {/if}
+                    </div>
+
+                    {#if !collapsed && !msg.deleted && canReact && !failed}
+                        <div class="actions" class:touch={isTouchOnlyDevice}>
+                            <div class="reaction" onclick={() => (showEmojiPicker = true)}>
+                                <HoverIcon>
+                                    <EmoticonOutline size={$iconSize} color={"var(--icon-txt)"} />
+                                </HoverIcon>
+                            </div>
+                        </div>
+                    {/if}
+                </div>
+
+                {#if threadSummary !== undefined && !inThread}
+                    <ThreadSummary
+                        {chatId}
+                        threadRootMessageIndex={msg.messageIndex}
+                        selected={($routeStore.kind === "global_chat_selected_route" ||
+                            $routeStore.kind === "selected_channel_route") &&
+                            msg.messageIndex === $routeStore.messageIndex &&
+                            $routeStore.open}
+                        {threadSummary}
+                        indent={showAvatar}
+                        {me}
+                        url={msgUrl} />
+                {/if}
+
+                {#if msg.reactions.length > 0 && !inert}
+                    <div class="message-reactions" class:me class:indent={showAvatar}>
+                        {#each msg.reactions as { reaction, userIds } (reaction)}
+                            <MessageReaction
+                                onClick={() => toggleReaction(false, reaction)}
+                                {reaction}
+                                {intersecting}
+                                {userIds} />
+                        {/each}
+                    </div>
+                {/if}
+
+                {#if tips.length > 0 && !inert}
+                    <div class="tips" class:indent={showAvatar}>
+                        {#each tips as [ledger, userTips]}
+                            <TipThumbnail onClick={tipMessage} {canTip} {ledger} {userTips} />
+                        {/each}
+                    </div>
+                {/if}
+            {/snippet}
+        </IntersectionObserverComponent>
+    </div>
+{/if}
+
+<style lang="scss">
+    $size: 10px;
+
+    $avatar-width: toRem(56);
+    $avatar-width-mob: toRem(43);
+
+    @keyframes show-bubble-menu {
+        0% {
+            z-index: -1;
+            opacity: 0;
+        }
+        1% {
+            z-index: 1;
+            opacity: 0;
+        }
+        100% {
+            z-index: 1;
+            opacity: 1;
+        }
+    }
+
+    @include mobile() {
+        :global(.bubble-wrapper .menu) {
+            display: none;
+        }
+    }
+
+    @include not-mobile() {
+        :global(.bubble-wrapper .menu) {
+            display: flex;
+            z-index: -1;
+            opacity: 0;
+        }
+
+        // Keeps hover menu showing if context menu is clicked!
+        :global(.bubble-wrapper .menu:has(.menu-icon.open)) {
+            border-color: var(--primary);
+            z-index: 1;
+            opacity: 1;
+        }
+
+        @media (hover: hover) {
+            :global(.bubble-wrapper:hover .menu:not(:has(.menu-icon.open))) {
+                animation: show-bubble-menu 200ms ease-in-out forwards;
+            }
+        }
+    }
+
+    :global(.message .sender .never) {
+        display: inline-flex;
+        gap: $sp2;
+        align-items: center;
+    }
+
+    :global(.message .avatar .avatar) {
+        margin: 0;
+    }
+
+    :global(.message-bubble .content a) {
+        text-decoration: underline;
+    }
+
+    :global(.message-bubble .content ul) {
+        margin: 0 $sp4;
+    }
+
+    :global(.message-bubble a) {
+        color: inherit;
+    }
+
+    :global(.message-bubble.crypto a) {
+        color: inherit;
+    }
+
+    :global(.message-bubble.first .menu) {
+        top: -24px;
+    }
+
+    :global(.actions .reaction .wrapper) {
+        padding: 6px;
+    }
+
+    .message-wrapper {
+        &.last {
+            margin-bottom: $sp4;
+        }
+    }
+
+    .sender {
+        margin-bottom: $sp1;
+
+        &.fill {
+            position: absolute;
+            background-color: rgba(0, 0, 0, 0.3);
+            color: #fff;
+            padding: $sp4 $sp4;
+            border-radius: 0 0 $sp4 0;
+            z-index: 1;
+
+            &.rtl {
+                right: 0;
+                border-radius: 0 0 0 $sp4;
+            }
+        }
+
+        .typing {
+            color: var(--accent);
+        }
+    }
+
+    .message-reactions,
+    .tips {
+        display: flex;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        gap: 3px;
+
+        &.indent {
+            margin-left: $avatar-width;
+            @include mobile() {
+                margin-left: $avatar-width-mob;
+            }
+        }
+    }
+
+    .bot-context {
+        display: flex;
+        margin-inline-start: $avatar-width;
+        margin-bottom: $sp2;
+        margin-top: $sp2;
+
+        @include mobile() {
+            margin-inline-start: $avatar-width-mob;
+        }
+    }
+
+    .message {
+        display: flex;
+        justify-content: flex-start;
+        margin-bottom: $sp2;
+        position: relative;
+
+        .avatar-col {
+            flex: 0 0 $avatar-width;
+
+            @include mobile() {
+                flex: 0 0 $avatar-width-mob;
+            }
+
+            .avatar {
+                cursor: pointer;
+            }
+        }
+
+        .actions {
+            display: none;
+            opacity: 0.3;
+            padding: 0 $sp3;
+            align-items: center;
+            justify-content: center;
+            transition: opacity 200ms ease-in-out;
+        }
+
+        .actions.touch {
+            display: flex;
+        }
+
+        @include mobile() {
+            .actions:not(.touch) {
+                display: flex;
+            }
+        }
+    }
+
+    .bubble-wrapper {
+        position: relative;
+        max-width: var(--max-width);
+        min-width: 90px;
+
+        // media messages: hug the image (media width + bubble padding) so
+        // captions and reply quotes cannot widen the bubble past it
+        &.clamped {
+            max-width: min(var(--max-width), calc(var(--media-width) + toRem(24)));
+        }
+
+        &.p2pSwap {
+            width: 350px;
+        }
+
+        &.proposal {
+            max-width: 800px;
+        }
+
+        &.proposal,
+        &.p2pSwap {
+            .message-bubble {
+                width: 100%;
+            }
+        }
+    }
+
+    .message-bubble {
+        $radius: var(--currentChat-msg-r1);
+        $inner-radius: var(--currentChat-msg-r2);
+        transition:
+            box-shadow ease-out 500ms,
+            background-color ease-in-out 200ms,
+            border ease-in-out 300ms,
+            transform ease-in-out 200ms;
+        position: relative;
+        padding: toRem(8) toRem(12) toRem(8) toRem(12);
+        background-color: var(--currentChat-msg-bg);
+        color: var(--currentChat-msg-txt);
+        @include font(book, normal, fs-100);
+        border-radius: $radius;
+        border: var(--currentChat-msg-bd);
+        box-shadow: var(--currentChat-msg-sh);
+
+        :global(.markdown-wrapper) {
+            word-break: break-word;
+        }
+
+        .username {
+            color: inherit;
+            color: var(--txt);
+            display: inline;
+
+            &.fill {
+                color: #fff;
+            }
+        }
+
+        &:not(.readByMe) {
+            box-shadow: 0 0 0 5px var(--notificationBar-bg);
+        }
+
+        &.last:not(.first) {
+            border-radius: $inner-radius $radius $radius $radius;
+        }
+        &.first:not(.last) {
+            border-radius: $radius $radius $radius $inner-radius;
+        }
+        &:not(.first):not(.last) {
+            border-radius: $inner-radius $radius $radius $inner-radius;
+        }
+
+        &.me {
+            background-color: var(--currentChat-msg-me-bg);
+            color: var(--currentChat-msg-me-txt);
+
+            .username {
+                color: var(--currentChat-msg-me-txt);
+            }
+
+            &.inert {
+                .username {
+                    color: var(--txt);
+                }
+            }
+        }
+
+        &.rtl {
+            &.last:not(.first) {
+                border-radius: $radius $inner-radius $radius $radius;
+            }
+            &.first:not(.last) {
+                border-radius: $radius $radius $inner-radius $radius;
+            }
+            &:not(.first):not(.last) {
+                border-radius: $radius $inner-radius $inner-radius $radius;
+            }
+        }
+
+        &.fill {
+            padding: 0;
+            border: none;
+            line-height: 0;
+        }
+
+        &.focused {
+            box-shadow: 0 0 0 4px var(--currentChat-msg-focus);
+            transition:
+                background-color ease-in-out 200ms,
+                border ease-in-out 300ms,
+                transform ease-in-out 200ms;
+        }
+
+        &.editing {
+            box-shadow: 0 0 0 4px var(--currentChat-msg-focus);
+        }
+
+        &.inert {
+            opacity: 0.8;
+            color: var(--currentChat-msg-txt);
+            background-color: var(--currentChat-msg-inert);
+        }
+
+        &.collapsed {
+            cursor: pointer;
+        }
+
+        &:after {
+            content: "";
+            display: table;
+            clear: both;
+        }
+
+        .forwarded {
+            color: var(--currentChat-msg-muted);
+            display: flex;
+            gap: $sp1;
+            align-items: center;
+            @include font-size(fs-80);
+            font-style: italic;
+            .text {
+                margin-bottom: $sp2;
+            }
+        }
+
+        &.me .forwarded {
+            color: var(--currentChat-msg-me-muted);
+        }
+
+        &.failed {
+            background-color: var(--error);
+        }
+    }
+
+    .emoji-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: $sp3 $sp4;
+        background-color: var(--section-bg);
+
+        .close-emoji {
+            flex: 0 0 20px;
+        }
+    }
+</style>
diff --git a/frontend/app/src/components/home/ChatMessageMenu.svelte b/frontend/app/src/desktop/features/chats/core/ChatMessageMenu.svelte
similarity index 96%
rename from frontend/app/src/components/home/ChatMessageMenu.svelte
rename to frontend/app/src/desktop/features/chats/core/ChatMessageMenu.svelte
index fb19f90da0..8b829f2e1f 100644
--- a/frontend/app/src/components/home/ChatMessageMenu.svelte
+++ b/frontend/app/src/desktop/features/chats/core/ChatMessageMenu.svelte
@@ -16,7 +16,7 @@
         type MessageReminderCreatedContent,
         type OpenChat,
     } from "@client";
-    import { navigate } from "@utils/navigation";
+    import { navigate } from "@src/utils/navigation";
     import { getContext } from "svelte";
     import { _, locale } from "svelte-i18n";
     import CollapseIcon from "svelte-material-icons/ArrowCollapseUp.svelte";
@@ -43,22 +43,22 @@
     import ShareIcon from "svelte-material-icons/ShareVariant.svelte";
     import TranslateIcon from "svelte-material-icons/Translate.svelte";
     import TranslateOff from "svelte-material-icons/TranslateOff.svelte";
-    import { i18nKey, translationCodes } from "../../i18n/i18n";
-    import { quickReactions } from "../../stores/quickReactions";
-    import { rtlStore } from "../../stores/rtl";
-    import { now } from "../../stores/time";
-    import { toastStore } from "../../stores/toast";
-    import { isTouchOnlyDevice } from "../../utils/devices";
-    import * as shareFunctions from "../../utils/share";
-    import { copyToClipboard } from "../../utils/urls";
-    import AreYouSure from "../AreYouSure.svelte";
-    import Checkbox from "../Checkbox.svelte";
-    import HoverIcon from "../HoverIcon.svelte";
-    import Bitcoin from "../icons/Bitcoin.svelte";
-    import Menu from "../Menu.svelte";
-    import MenuIcon from "../MenuIcon.svelte";
-    import MenuItem from "../MenuItem.svelte";
-    import Translatable from "../Translatable.svelte";
+    import { i18nKey, translationCodes } from "@src/i18n/i18n";
+    import { quickReactions } from "@src/stores/quickReactions";
+    import { rtlStore } from "@src/stores/rtl";
+    import { now } from "@src/stores/time";
+    import { toastStore } from "@src/stores/toast";
+    import { isTouchOnlyDevice } from "@src/utils/devices";
+    import * as shareFunctions from "@src/utils/share";
+    import { copyToClipboard } from "@src/utils/urls";
+    import AreYouSure from "@src/desktop/shared/AreYouSure.svelte";
+    import Checkbox from "@src/desktop/shared/Checkbox.svelte";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import Bitcoin from "@src/desktop/ui/icons/Bitcoin.svelte";
+    import Menu from "@src/desktop/shared/Menu.svelte";
+    import MenuIcon from "@src/desktop/shared/MenuIcon.svelte";
+    import MenuItem from "@src/desktop/shared/MenuItem.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/desktop/features/chats/core/ChatSubtext.svelte b/frontend/app/src/desktop/features/chats/core/ChatSubtext.svelte
new file mode 100644
index 0000000000..463fa34210
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/ChatSubtext.svelte
@@ -0,0 +1,85 @@
+<script lang="ts">
+    import type { ChatSummary, OpenChat } from "@client";
+    import { allUsersStore } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { now } from "@src/stores/time";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import DisappearLabel from "./DisappearLabel.svelte";
+    import VisibilityLabel from "./VisibilityLabel.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        chat: ChatSummary;
+        clickableMembers?: boolean;
+        onMembersClick?: () => void;
+    }
+
+    let { chat, clickableMembers = false, onMembersClick }: Props = $props();
+
+    let userId = $derived(chat.kind === "direct_chat" ? chat.them.userId : "");
+    let isBot = $derived($allUsersStore.get(userId)?.kind === "bot");
+    let isSuspended = $derived($allUsersStore.get(userId)?.suspended ?? false);
+    let subtext = $derived(isSuspended ? $_("accountSuspended") : "");
+    let checkLastOnline = $derived(!isSuspended && !isBot && chat.kind === "direct_chat");
+
+    $effect(() => {
+        if (checkLastOnline && chat.kind === "direct_chat") {
+            client.getLastOnlineDate(chat.them.userId, $now).then((lastOnline) => {
+                if (lastOnline !== undefined && lastOnline !== 0) {
+                    [subtext] = client.formatLastOnlineDate($_, $now, lastOnline);
+                } else {
+                    subtext = "";
+                }
+            });
+        }
+    });
+
+    function click() {
+        if (clickableMembers) {
+            onMembersClick?.();
+        }
+    }
+</script>
+
+{#if chat.kind === "direct_chat"}
+    <div class="wrapper">
+        {#if chat.eventsTTL !== undefined}
+            <DisappearLabel ttl={chat.eventsTTL} />
+        {/if}
+        {subtext}
+    </div>
+{:else if chat.kind === "group_chat" || chat.kind === "channel"}
+    <div class="wrapper">
+        {#if chat.eventsTTL !== undefined}
+            <DisappearLabel ttl={chat.eventsTTL} />
+        {/if}
+        <VisibilityLabel isPublic={chat.public} />
+        <div class="members" class:clickable={clickableMembers} onclick={click}>
+            <span class="num">{chat.memberCount.toLocaleString()}</span>
+            <Translatable resourceKey={i18nKey("members")} />
+        </div>
+    </div>
+{/if}
+
+<style lang="scss">
+    .wrapper {
+        display: flex;
+        gap: $sp3;
+        align-items: center;
+        @include font(book, normal, fs-70);
+    }
+
+    .members {
+        .num {
+            color: var(--txt);
+            font-weight: 700;
+        }
+    }
+
+    .clickable {
+        cursor: pointer;
+    }
+</style>
diff --git a/frontend/app/src/components/home/ChooseMembers.svelte b/frontend/app/src/desktop/features/chats/core/ChooseMembers.svelte
similarity index 100%
rename from frontend/app/src/components/home/ChooseMembers.svelte
rename to frontend/app/src/desktop/features/chats/core/ChooseMembers.svelte
diff --git a/frontend/app/src/desktop/features/chats/core/CryptoTransferBuilder.svelte b/frontend/app/src/desktop/features/chats/core/CryptoTransferBuilder.svelte
new file mode 100644
index 0000000000..6ffffce089
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/CryptoTransferBuilder.svelte
@@ -0,0 +1,336 @@
+<script lang="ts">
+    import type { ChatSummary, OpenChat, UserSummary } from "@client";
+    import {
+        allUsersStore,
+        cryptoBalanceStore,
+        enhancedCryptoLookup as cryptoLookup,
+        currentUserIdStore,
+        iconSize,
+        mobileWidth,
+    } from "@client";
+    import { type CryptocurrencyContent, type MessageContext, nowNanos } from "@shared";
+    import { getContext, onMount } from "svelte";
+    import Alert from "svelte-material-icons/Alert.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { pinNumberErrorMessageStore } from "@src/stores/pinNumber";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import ErrorMessage from "@src/desktop/shared/ErrorMessage.svelte";
+    import Legend from "@src/desktop/shared/Legend.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import TextArea from "@src/desktop/shared/TextArea.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import AccountInfo from "@src/desktop/shared/AccountInfo.svelte";
+    import BalanceWithRefresh from "@src/desktop/shared/BalanceWithRefresh.svelte";
+    import CryptoSelector from "@src/desktop/shared/CryptoSelector.svelte";
+    import SingleUserSelector from "@src/desktop/shared/SingleUserSelector.svelte";
+    import TokenInput from "@src/desktop/shared/TokenInput.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        draftAmount: bigint;
+        ledger: string;
+        chat: ChatSummary;
+        defaultReceiver: string | undefined;
+        messageContext: MessageContext;
+        onClose: () => void;
+    }
+
+    let {
+        draftAmount = $bindable(),
+        ledger = $bindable(),
+        chat,
+        defaultReceiver,
+        messageContext,
+        onClose,
+    }: Props = $props();
+
+    let refreshing = false;
+    let error: string | undefined = $state(undefined);
+    let message = $state("");
+    let confirming = $state(false);
+    let toppingUp = $state(false);
+    let tokenChanging = $state(true);
+    let balanceWithRefresh: BalanceWithRefresh;
+    let receiver: UserSummary | undefined = $state(undefined);
+    let validAmount: boolean = $state(false);
+    let sending = $state(false);
+
+    let cryptoBalance = $derived($cryptoBalanceStore.get(ledger) ?? 0n);
+    let tokenDetails = $derived($cryptoLookup.get(ledger)!);
+    let symbol = $derived(tokenDetails.symbol);
+    let transferFees = $derived(tokenDetails.transferFee);
+    let multiUserChat = $derived(chat.kind === "group_chat" || chat.kind === "channel");
+    let remainingBalance = $state(0n);
+    $effect(() => {
+        remainingBalance =
+            draftAmount > BigInt(0) ? cryptoBalance - draftAmount - transferFees : cryptoBalance;
+    });
+    let valid = $derived(
+        error === undefined && validAmount && receiver !== undefined && !tokenChanging,
+    );
+    let zero = $derived(cryptoBalance <= transferFees && !tokenChanging);
+    let errorMessage = $derived(error !== undefined ? i18nKey(error) : $pinNumberErrorMessageStore);
+
+    onMount(() => {
+        // default the receiver to the other user in a direct chat
+        if (chat.kind === "direct_chat") {
+            receiver = $allUsersStore.get(chat.them.userId);
+        } else if (defaultReceiver !== undefined && defaultReceiver !== $currentUserIdStore) {
+            receiver = $allUsersStore.get(defaultReceiver);
+        }
+    });
+
+    function reset() {
+        confirming = false;
+        balanceWithRefresh.refresh();
+    }
+
+    function maxAmount(balance: bigint): bigint {
+        return balance - transferFees;
+    }
+
+    function send() {
+        if (!confirming) {
+            confirming = true;
+            return;
+        }
+
+        if (receiver === undefined) return;
+
+        const content: CryptocurrencyContent = {
+            kind: "crypto_content",
+            caption: message === "" ? undefined : message,
+            transfer: {
+                kind: "pending",
+                ledger,
+                token: symbol,
+                recipient: receiver.userId,
+                amountE8s: draftAmount,
+                feeE8s: transferFees,
+                createdAtNanos: nowNanos(),
+            },
+        };
+
+        sending = true;
+        error = undefined;
+
+        client
+            .sendMessageWithContent(messageContext, content, false)
+            .then((resp) => {
+                if (resp.kind === "success" || resp.kind === "transfer_success") {
+                    onClose();
+                } else if ($pinNumberErrorMessageStore === undefined) {
+                    error = "errorSendingMessage";
+                }
+            })
+            .finally(() => (sending = false));
+    }
+
+    function cancel() {
+        toppingUp = false;
+        onClose();
+    }
+
+    function onBalanceRefreshed() {
+        onBalanceRefreshFinished();
+        error = undefined;
+    }
+
+    function onBalanceRefreshError(err: string) {
+        onBalanceRefreshFinished();
+        error = err;
+    }
+
+    function onBalanceRefreshFinished() {
+        toppingUp = false;
+        tokenChanging = false;
+        if (remainingBalance < 0) {
+            remainingBalance = BigInt(0);
+            draftAmount = cryptoBalance - transferFees;
+            if (draftAmount < 0) {
+                draftAmount = BigInt(0);
+            }
+        }
+    }
+</script>
+
+<Overlay dismissible>
+    <ModalContent>
+        {#snippet header()}
+            <span class="header">
+                <div class="left">
+                    <div class="main-title">
+                        <div><Translatable resourceKey={i18nKey("tokenTransfer.send")} /></div>
+                        <div>
+                            <CryptoSelector bind:ledger />
+                        </div>
+                    </div>
+                </div>
+                <BalanceWithRefresh
+                    bind:toppingUp
+                    bind:this={balanceWithRefresh}
+                    {ledger}
+                    value={remainingBalance}
+                    label={i18nKey("cryptoAccount.shortBalanceLabel")}
+                    bold
+                    showTopUp
+                    onClick={() => (confirming = false)}
+                    onRefreshed={onBalanceRefreshed}
+                    onError={onBalanceRefreshError} />
+            </span>
+        {/snippet}
+        {#snippet body()}
+            <form>
+                <div class="body" class:zero={zero || toppingUp}>
+                    {#if zero || toppingUp}
+                        <AccountInfo {ledger} />
+                        {#if zero}
+                            <p>
+                                <Translatable
+                                    resourceKey={i18nKey("tokenTransfer.zeroBalance", {
+                                        token: symbol,
+                                    })} />
+                            </p>
+                        {/if}
+                        <p><Translatable resourceKey={i18nKey("tokenTransfer.makeDeposit")} /></p>
+                    {:else}
+                        {#if multiUserChat}
+                            <div class="receiver">
+                                <Legend label={i18nKey("tokenTransfer.receiver")} />
+                                <SingleUserSelector
+                                    bind:selectedReceiver={receiver}
+                                    autofocus={multiUserChat} />
+                            </div>
+                        {/if}
+                        <div class="transfer">
+                            <TokenInput
+                                {ledger}
+                                {transferFees}
+                                autofocus={!multiUserChat}
+                                bind:valid={validAmount}
+                                maxAmount={maxAmount(cryptoBalance)}
+                                bind:amount={draftAmount} />
+                        </div>
+                        <div class="message">
+                            <Legend label={i18nKey("tokenTransfer.message")} />
+                            <TextArea
+                                maxlength={200}
+                                rows={3}
+                                autofocus={false}
+                                placeholder={i18nKey("tokenTransfer.messagePlaceholder")}
+                                bind:value={message} />
+                        </div>
+                        {#if confirming}
+                            <div class="confirming">
+                                <div class="alert">
+                                    <Alert size={$iconSize} color={"var(--warn"} />
+                                </div>
+                                <div class="alert-txt">
+                                    <Translatable
+                                        resourceKey={i18nKey("tokenTransfer.warning", {
+                                            token: symbol,
+                                        })} />
+                                </div>
+                            </div>
+                        {/if}
+                        {#if errorMessage !== undefined}
+                            <div class="error">
+                                <ErrorMessage
+                                    ><Translatable resourceKey={errorMessage} /></ErrorMessage>
+                            </div>
+                        {/if}
+                    {/if}
+                </div>
+            </form>
+        {/snippet}
+        {#snippet footer()}
+            <span>
+                <ButtonGroup>
+                    <Button small={!$mobileWidth} tiny={$mobileWidth} secondary onClick={cancel}
+                        ><Translatable resourceKey={i18nKey("cancel")} /></Button>
+                    {#if toppingUp || zero}
+                        <Button
+                            small={!$mobileWidth}
+                            disabled={refreshing}
+                            loading={refreshing}
+                            tiny={$mobileWidth}
+                            onClick={reset}
+                            ><Translatable resourceKey={i18nKey("refresh")} /></Button>
+                    {:else}
+                        <Button
+                            small={!$mobileWidth}
+                            disabled={!valid || sending}
+                            loading={sending}
+                            tiny={$mobileWidth}
+                            onClick={send}
+                            ><Translatable
+                                resourceKey={i18nKey(
+                                    confirming ? "tokenTransfer.confirm" : "tokenTransfer.send",
+                                )} /></Button>
+                    {/if}
+                </ButtonGroup>
+            </span>
+        {/snippet}
+    </ModalContent>
+</Overlay>
+
+<style lang="scss">
+    .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: $sp2;
+
+        .left {
+            flex: auto;
+            display: flex;
+            align-items: center;
+            gap: $sp4;
+
+            .main-title {
+                flex: auto;
+                display: flex;
+                align-items: baseline;
+                gap: 10px;
+                @include font(bold, normal, fs-120);
+            }
+        }
+    }
+
+    .body {
+        transition: background-color 100ms ease-in-out;
+        @include font(book, normal, fs-100, 28);
+    }
+
+    .confirming {
+        padding: $sp4;
+        border: 1px solid var(--warn);
+        display: flex;
+        align-items: flex-start;
+        gap: $sp3;
+        border-radius: var(--rd);
+
+        .alert {
+            flex: 0 0 25px;
+        }
+
+        .alert-txt {
+            flex: auto;
+        }
+    }
+
+    .transfer {
+        margin-bottom: $sp4;
+    }
+
+    .how-to {
+        margin-top: $sp4;
+    }
+
+    .error {
+        margin-top: $sp4;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/CurrentChat.svelte b/frontend/app/src/desktop/features/chats/core/CurrentChat.svelte
new file mode 100644
index 0000000000..d4fc524c33
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/CurrentChat.svelte
@@ -0,0 +1,515 @@
+<script lang="ts">
+    import { trackedEffect } from "@src/utils/effects.svelte";
+    import {
+        type AttachmentContent,
+        blockedUsersStore,
+        botState,
+        type ChatIdentifier,
+        chatIdentifiersEqual,
+        type ChatSummary,
+        communitiesStore,
+        CommunityMap,
+        type CommunitySummary,
+        currentUserIdStore,
+        currentUserStore,
+        type EnhancedReplyContext,
+        type EventWrapper,
+        type FilteredProposals,
+        lastCryptoSent,
+        LEDGER_CANISTER_ICP,
+        localUpdates,
+        type Mention,
+        type Message,
+        type MessageContent,
+        type MessageContext,
+        messageContextsEqual,
+        messagesRead,
+        type MultiUserChat,
+        type OpenChat,
+        type ReadonlySet,
+        ROLE_OWNER,
+        selectedChatDraftMessageStore,
+        selectedChatPinnedMessagesStore,
+        selectedCommunitySummaryStore,
+        setRightPanelHistory,
+        subscribe,
+        suspendedUserStore,
+        type User,
+    } from "@client";
+    import { getContext, onMount, tick } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { messageToForwardStore } from "@src/stores/messageToForward";
+    import { toastStore } from "@src/stores/toast";
+    import { randomSentence } from "@src/utils/randomMsg";
+    import AreYouSure from "@src/desktop/shared/AreYouSure.svelte";
+    import DirectChatHeader from "@src/desktop/features/bots/DirectChatHeader.svelte";
+    import ImportToCommunity from "@src/desktop/features/chats/community/Import.svelte";
+    import CryptoTransferBuilder from "./CryptoTransferBuilder.svelte";
+    import CurrentChatHeader from "./CurrentChatHeader.svelte";
+    import CurrentChatMessages from "./CurrentChatMessages.svelte";
+    import CurrentChatSearchHeader from "./CurrentChatSearchHeader.svelte";
+    import DropTarget from "./DropTarget.svelte";
+    import ExternalContent from "@src/desktop/features/chats/core/content/ExternalContent.svelte";
+    import Footer from "./Footer.svelte";
+    import GiphySelector from "./GiphySelector.svelte";
+    import MemeBuilder from "./MemeBuilder.svelte";
+    import P2PSwapContentBuilder from "@src/desktop/features/chats/core/content/P2PSwapContentBuilder.svelte";
+    import PollBuilder from "./PollBuilder.svelte";
+    import PrizeContentBuilder from "@src/desktop/features/chats/core/content/PrizeContentBuilder.svelte";
+    import { releaseNotifications } from "tauri-plugin-oc-api";
+
+    interface Props {
+        joining: MultiUserChat | undefined;
+        chat: ChatSummary;
+        filteredProposals: FilteredProposals | undefined;
+    }
+
+    let { joining, chat, filteredProposals }: Props = $props();
+
+    let currentChatMessages = $state<CurrentChatMessages>();
+
+    const client = getContext<OpenChat>("client");
+
+    let previousChatId: ChatIdentifier | undefined = $state(undefined);
+    let unreadMessages = $state<number>(0);
+    let firstUnreadMention = $state<Mention | undefined>();
+    let creatingPoll = $state(false);
+    let creatingCryptoTransfer: { ledger: string; amount: bigint } | undefined = $state(undefined);
+    let creatingPrizeMessage = $state(false);
+    let creatingP2PSwapMessage = $state(false);
+    let selectingGif = $state(false);
+    let buildingMeme = $state(false);
+    //@ts-ignore
+    let pollBuilder: PollBuilder = $state();
+    //@ts-ignore
+    let giphySelector: GiphySelector = $state();
+    //@ts-ignore
+    let memeBuilder: MemeBuilder = $state();
+    let showSearchHeader = $state(false);
+    let searchTerm = $state("");
+    let importToCommunities: CommunityMap<CommunitySummary> | undefined = $state();
+    let removeLinkPreviewDetails: { event: EventWrapper<Message>; url: string } | undefined =
+        $state(undefined);
+
+    onMount(() => {
+        // Release any active notifications for the current chat when the component mounts
+        // TODO include thread index
+        if (client.isNativeAndroid()) {
+            switch (chat.id.kind) {
+                case "direct_chat":
+                    releaseNotifications({
+                        kind: "dms",
+                        senderId: chat.id.userId,
+                    });
+                    break;
+                case "group_chat":
+                    releaseNotifications({
+                        kind: "group",
+                        groupId: chat.id.groupId,
+                    });
+                    break;
+                case "channel":
+                    releaseNotifications({
+                        kind: "channel",
+                        communityId: chat.id.communityId,
+                        channelId: chat.id.channelId,
+                    });
+            }
+        }
+
+        const unsubs = [
+            messagesRead.subscribe(() => {
+                unreadMessages = getUnreadMessageCount(chat);
+                firstUnreadMention = client.getFirstUnreadMention(chat);
+            }),
+            subscribe("createPoll", onCreatePoll),
+            subscribe("attachGif", onAttachGif),
+            subscribe("tokenTransfer", onTokenTransfer),
+            subscribe("createTestMessages", onCreateTestMessages),
+            subscribe("searchChat", onSearchChat),
+        ];
+        return () => {
+            unsubs.forEach((u) => u());
+        };
+    });
+
+    function onCreatePoll(ctx: MessageContext) {
+        if (messageContextsEqual(ctx, messageContext)) {
+            createPoll();
+        }
+    }
+
+    function onAttachGif([evContext, search]: [MessageContext, string]) {
+        if (messageContextsEqual(messageContext, evContext)) {
+            attachGif(search);
+        }
+    }
+
+    function onTokenTransfer(args: { context: MessageContext; ledger?: string; amount?: bigint }) {
+        if (messageContextsEqual(messageContext, args.context)) {
+            tokenTransfer(args);
+        }
+    }
+
+    function onCreateTestMessages([ctx, num]: [MessageContext, number]) {
+        if (messageContextsEqual(ctx, messageContext)) {
+            createTestMessages(num);
+        }
+    }
+
+    function importToCommunity() {
+        importToCommunities = $communitiesStore.filter((c) => c.membership.role === ROLE_OWNER);
+        if (importToCommunities.size === 0) {
+            toastStore.showFailureToast(i18nKey("communities.noOwned"));
+            importToCommunities = undefined;
+        } else {
+            setRightPanelHistory([]);
+        }
+    }
+
+    function getUnreadMessageCount(chat: ChatSummary): number {
+        if (client.isPreviewing(chat.id) || client.isLapsed(chat.id)) return 0;
+
+        return messagesRead.unreadMessageCount(chat.id, chat.latestMessage?.event.messageIndex);
+    }
+
+    function onWindowFocus() {
+        client.closeNotificationsForChat(chat.id);
+    }
+
+    function createPoll() {
+        if (!client.canSendMessage(chat.id, "message", "poll")) return;
+
+        if (pollBuilder !== undefined) {
+            pollBuilder.resetPoll();
+        }
+        creatingPoll = true;
+    }
+
+    function tokenTransfer(detail: { ledger?: string; amount?: bigint }) {
+        creatingCryptoTransfer = {
+            ledger: detail.ledger ?? $lastCryptoSent ?? LEDGER_CANISTER_ICP,
+            amount: detail.amount ?? BigInt(0),
+        };
+    }
+
+    function createPrizeMessage() {
+        creatingPrizeMessage = true;
+    }
+
+    function createP2PSwapMessage() {
+        creatingP2PSwapMessage = true;
+    }
+
+    function onFileSelected(content: AttachmentContent) {
+        localUpdates.draftMessages.setAttachment({ chatId: chat.id }, content);
+    }
+
+    function attachGif(search: string) {
+        selectingGif = true;
+        if (giphySelector !== undefined) {
+            giphySelector.reset(search);
+        }
+    }
+
+    function makeMeme() {
+        buildingMeme = true;
+        if (memeBuilder !== undefined) {
+            memeBuilder.reset();
+        }
+    }
+
+    function replyTo(ctx: EnhancedReplyContext) {
+        showSearchHeader = false;
+        localUpdates.draftMessages.setReplyingTo({ chatId: chat.id }, ctx);
+    }
+
+    function searchChat(search: string) {
+        onSearchChat(search);
+    }
+
+    function onSearchChat(term: string) {
+        showSearchHeader = true;
+        searchTerm = term;
+    }
+
+    function createTestMessages(total: number): void {
+        function send(n: number) {
+            if (n === total) return;
+
+            sendMessageWithAttachment(randomSentence(), false, undefined);
+
+            window.setTimeout(() => send(n + 1), 500);
+        }
+
+        send(0);
+    }
+
+    function onSendMessage(detail: [string | undefined, User[], boolean]) {
+        if (!canSendAny) return;
+        let [text, mentioned, blockLevelMarkdown] = detail;
+        if ($selectedChatDraftMessageStore?.editingEvent !== undefined) {
+            client
+                .editMessageWithAttachment(
+                    messageContext,
+                    text,
+                    blockLevelMarkdown,
+                    $selectedChatDraftMessageStore.attachment,
+                    $selectedChatDraftMessageStore.editingEvent,
+                )
+                .then((success) => {
+                    if (!success) {
+                        toastStore.showFailureToast(i18nKey("errorEditingMessage"));
+                    }
+                });
+        } else {
+            sendMessageWithAttachment(
+                text,
+                blockLevelMarkdown,
+                $selectedChatDraftMessageStore?.attachment,
+                mentioned,
+            );
+        }
+    }
+
+    function sendMessageWithAttachment(
+        textContent: string | undefined,
+        blockLevelMarkdown: boolean,
+        attachment: AttachmentContent | undefined,
+        mentioned: User[] = [],
+    ) {
+        client.sendMessageWithAttachment(
+            messageContext,
+            textContent,
+            blockLevelMarkdown,
+            attachment,
+            mentioned,
+        );
+    }
+
+    function forwardMessage(msg: Message) {
+        client.forwardMessage(messageContext, msg);
+    }
+
+    function onSetTextContent(txt?: string): void {
+        localUpdates.draftMessages.setTextContent({ chatId: chat.id }, txt);
+    }
+
+    function onRemovePreview(event: EventWrapper<Message>, url: string): void {
+        removeLinkPreviewDetails = {
+            event,
+            url,
+        };
+    }
+
+    function removePreview(yes: boolean): Promise<void> {
+        if (removeLinkPreviewDetails !== undefined && yes) {
+            const { event, url } = removeLinkPreviewDetails;
+
+            client.hideLinkPreview(messageContext, event, url).then((success) => {
+                if (!success) {
+                    toastStore.showFailureToast(i18nKey("errorRemovingLinkPreview"));
+                }
+            });
+        }
+
+        removeLinkPreviewDetails = undefined;
+        return Promise.resolve();
+    }
+
+    function isBlocked(chatSummary: ChatSummary, blockedUsers: ReadonlySet<string>): boolean {
+        return chatSummary.kind === "direct_chat" && blockedUsers.has(chatSummary.them.userId);
+    }
+
+    function defaultCryptoTransferReceiver(): string | undefined {
+        return $selectedChatDraftMessageStore?.replyingTo?.sender?.userId;
+    }
+
+    function onSendMessageWithContent(content: MessageContent) {
+        client.sendMessageWithContent(messageContext, content, false);
+    }
+    let messageContext = $derived({ chatId: chat.id });
+
+    trackedEffect("current-chat", () => {
+        if (previousChatId === undefined || !chatIdentifiersEqual(chat.id, previousChatId)) {
+            previousChatId = chat.id;
+            showSearchHeader = false;
+            unreadMessages = getUnreadMessageCount(chat);
+            firstUnreadMention = client.getFirstUnreadMention(chat);
+            tick().then(() => {
+                if ($messageToForwardStore !== undefined) {
+                    forwardMessage($messageToForwardStore);
+                    messageToForwardStore.set(undefined);
+                }
+            });
+        }
+    });
+    let showFooter = $derived(!showSearchHeader && !$suspendedUserStore);
+    let blocked = $derived(isBlocked(chat, $blockedUsersStore));
+    let frozen = $derived(client.isChatOrCommunityFrozen(chat, $selectedCommunitySummaryStore));
+    let canSendAny = $derived(client.canSendMessage(chat.id, "message"));
+    let preview = $derived(client.isPreviewing(chat.id));
+    let lapsed = $derived(client.isLapsed(chat.id));
+    let canPin = $derived(client.canPinMessages(chat.id));
+    let canBlockUsers = $derived(client.canBlockUsers(chat.id));
+    let canDelete = $derived(client.canDeleteOtherUsersMessages(chat.id));
+    let canReplyInThread = $derived(client.canSendMessage(chat.id, "thread"));
+    let canReact = $derived(client.canReactToMessages(chat.id));
+    let canInvite = $derived(client.canInviteUsers(chat.id));
+    let readonly = $derived(client.isChatReadOnly(chat.id));
+    let externalUrl = $derived(chat.kind === "channel" ? chat.externalUrl : undefined);
+    let privateChatPreview = $derived(client.maskChatMessages(chat));
+    let bot = $derived(
+        chat.kind === "direct_chat" ? botState.externalBots.get(chat.them.userId) : undefined,
+    );
+
+    function onGoToMessageIndex(args: { index: number; preserveFocus: boolean }) {
+        currentChatMessages?.scrollToMessageIndex(args.index, args.preserveFocus);
+    }
+
+    function stopTyping() {
+        if (chat !== undefined) {
+            client.stopTyping(chat.id, $currentUserIdStore);
+        }
+    }
+
+    function startTyping() {
+        if (chat !== undefined) {
+            client.startTyping(chat.id, $currentUserIdStore);
+        }
+    }
+</script>
+
+<svelte:window onfocus={onWindowFocus} />
+
+{#if removeLinkPreviewDetails !== undefined}
+    <AreYouSure title={i18nKey("removePreviewQuestion")} action={removePreview} />
+{/if}
+
+{#if importToCommunities !== undefined}
+    <ImportToCommunity
+        groupId={chat.id}
+        onCancel={() => (importToCommunities = undefined)}
+        ownedCommunities={importToCommunities} />
+{/if}
+
+<PollBuilder onSend={onSendMessageWithContent} bind:this={pollBuilder} bind:open={creatingPoll} />
+
+{#if creatingCryptoTransfer !== undefined}
+    <CryptoTransferBuilder
+        {chat}
+        ledger={creatingCryptoTransfer.ledger}
+        draftAmount={creatingCryptoTransfer.amount}
+        defaultReceiver={defaultCryptoTransferReceiver()}
+        {messageContext}
+        onClose={() => (creatingCryptoTransfer = undefined)} />
+{/if}
+
+{#if creatingPrizeMessage}
+    <PrizeContentBuilder
+        context={messageContext}
+        {chat}
+        ledger={$lastCryptoSent ?? LEDGER_CANISTER_ICP}
+        draftAmount={0n}
+        onClose={() => (creatingPrizeMessage = false)} />
+{/if}
+
+{#if creatingP2PSwapMessage}
+    <P2PSwapContentBuilder
+        fromLedger={$lastCryptoSent ?? LEDGER_CANISTER_ICP}
+        {messageContext}
+        onClose={() => (creatingP2PSwapMessage = false)} />
+{/if}
+
+<GiphySelector
+    onSend={onSendMessageWithContent}
+    bind:this={giphySelector}
+    bind:open={selectingGif} />
+
+<MemeBuilder onSend={onSendMessageWithContent} bind:this={memeBuilder} bind:open={buildingMeme} />
+
+<DropTarget {chat} mode={"message"} {onFileSelected}>
+    <div class="wrapper">
+        {#if showSearchHeader}
+            <CurrentChatSearchHeader
+                {chat}
+                bind:searchTerm
+                {onGoToMessageIndex}
+                onClose={() => (showSearchHeader = false)} />
+        {:else if bot !== undefined && chat.kind === "direct_chat"}
+            <DirectChatHeader {bot} {chat} {onSearchChat}></DirectChatHeader>
+        {:else}
+            <CurrentChatHeader
+                onSearchChat={searchChat}
+                onImportToCommunity={importToCommunity}
+                {blocked}
+                {readonly}
+                selectedChatSummary={chat}
+                hasPinned={$selectedChatPinnedMessagesStore.size > 0} />
+        {/if}
+        {#if externalUrl !== undefined}
+            <ExternalContent {privateChatPreview} {frozen} {externalUrl} />
+        {:else}
+            <CurrentChatMessages
+                bind:this={currentChatMessages}
+                onReplyTo={replyTo}
+                {onRemovePreview}
+                {privateChatPreview}
+                {chat}
+                {filteredProposals}
+                {canPin}
+                {canBlockUsers}
+                {canDelete}
+                {canReplyInThread}
+                {canSendAny}
+                {canReact}
+                {canInvite}
+                {readonly}
+                {firstUnreadMention}
+                footer={showFooter}
+                {unreadMessages} />
+        {/if}
+        {#if showFooter}
+            <Footer
+                {chat}
+                attachment={$selectedChatDraftMessageStore?.attachment}
+                editingEvent={$selectedChatDraftMessageStore?.editingEvent}
+                replyingTo={$selectedChatDraftMessageStore?.replyingTo}
+                textContent={$selectedChatDraftMessageStore?.textContent}
+                user={$currentUserStore}
+                mode={"message"}
+                {joining}
+                {preview}
+                {lapsed}
+                {blocked}
+                {messageContext}
+                externalContent={externalUrl !== undefined}
+                onCancelReply={() =>
+                    localUpdates.draftMessages.setReplyingTo({ chatId: chat.id }, undefined)}
+                onClearAttachment={() =>
+                    localUpdates.draftMessages.setAttachment({ chatId: chat.id }, undefined)}
+                onCancelEdit={() => localUpdates.draftMessages.delete({ chatId: chat.id })}
+                {onSetTextContent}
+                onStartTyping={startTyping}
+                onStopTyping={stopTyping}
+                {onFileSelected}
+                {onSendMessage}
+                onAttachGif={attachGif}
+                onMakeMeme={makeMeme}
+                onTokenTransfer={tokenTransfer}
+                onCreatePrizeMessage={createPrizeMessage}
+                onCreateP2PSwapMessage={createP2PSwapMessage}
+                onCreatePoll={createPoll} />
+        {/if}
+    </div>
+</DropTarget>
+
+<style lang="scss">
+    .wrapper {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        height: 100%;
+        position: relative;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/CurrentChatHeader.svelte b/frontend/app/src/desktop/features/chats/core/CurrentChatHeader.svelte
new file mode 100644
index 0000000000..e2589b66ca
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/CurrentChatHeader.svelte
@@ -0,0 +1,311 @@
+<script lang="ts">
+    import type { ChatSummary, DiamondMembershipStatus, GroupChatSummary } from "@client";
+    import {
+        allUsersStore,
+        anonUserStore,
+        AvatarSize,
+        chatListScopeStore,
+        iconSize,
+        mobileWidth,
+        publish,
+        restrictToSelectedChat,
+        routeForChatIdentifier,
+        selectedChatIdStore,
+        selectedCommunitySummaryStore,
+        setRightPanelHistory,
+        byContext as typersByContext,
+        type OpenChat,
+        type TypersByKey,
+    } from "@client";
+    import { navigate } from "@src/utils/navigation";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import ArrowLeft from "svelte-material-icons/ArrowLeft.svelte";
+    import ArrowRight from "svelte-material-icons/ArrowRight.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { rtlStore } from "@src/stores/rtl";
+    import { now } from "@src/stores/time";
+    import Avatar from "@src/desktop/shared/Avatar.svelte";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import WithVerifiedBadge from "@src/desktop/ui/icons/WithVerifiedBadge.svelte";
+    import SectionHeader from "@src/desktop/shared/SectionHeader.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import Typing from "@src/ui/Typing.svelte";
+    import type { ProfileLinkClickedEvent } from "@webcomponents/profileLink";
+    import ChatSubtext from "./ChatSubtext.svelte";
+    import CurrentChatMenu from "./CurrentChatMenu.svelte";
+    import Badges from "@src/desktop/features/profile/Badges.svelte";
+    import ActiveBroadcastSummary from "@src/desktop/features/calls/ActiveBroadcastSummary.svelte";
+    import ActiveVideoCallResume from "@src/desktop/features/calls/ActiveVideoCallResume.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        selectedChatSummary: ChatSummary;
+        blocked: boolean;
+        readonly: boolean;
+        hasPinned: boolean;
+        onSearchChat: (search: string) => void;
+        onImportToCommunity: (group: GroupChatSummary) => void;
+    }
+
+    let {
+        selectedChatSummary,
+        blocked,
+        readonly,
+        hasPinned,
+        onSearchChat,
+        onImportToCommunity,
+    }: Props = $props();
+
+    let userId = $derived(
+        selectedChatSummary.kind === "direct_chat" ? selectedChatSummary.them.userId : "",
+    );
+    let isMultiUser = $derived(
+        selectedChatSummary.kind === "group_chat" || selectedChatSummary.kind === "channel",
+    );
+    let isBot = $derived($allUsersStore.get(userId)?.kind === "bot");
+    let hasUserProfile = $derived(!isMultiUser && !isBot);
+    let verified = $derived(
+        selectedChatSummary.kind === "group_chat" && selectedChatSummary.verified,
+    );
+
+    function clearSelection() {
+        publish("clearSelection");
+    }
+
+    function showGroupDetails() {
+        if ($selectedChatIdStore !== undefined) {
+            setRightPanelHistory([
+                {
+                    kind: "group_details",
+                },
+            ]);
+        }
+    }
+
+    function showGroupMembers() {
+        publish("showGroupMembers");
+    }
+
+    function normaliseChatSummary(_now: number, chatSummary: ChatSummary, typing: TypersByKey) {
+        switch (chatSummary.kind) {
+            case "direct_chat":
+                const them = $allUsersStore.get(chatSummary.them.userId);
+                return {
+                    name: client.displayName(them),
+                    diamondStatus: them?.diamondStatus ?? "inactive",
+                    streak: them?.streak ?? 0,
+                    chitEarned: them?.totalChitEarned,
+                    avatarUrl: client.userAvatarUrl(them),
+                    userId: chatSummary.them.userId,
+                    typing: client.getTypingString(
+                        $_,
+                        $allUsersStore,
+                        { chatId: chatSummary.id },
+                        typing,
+                    ),
+                    username: them ? "@" + them.username : undefined,
+                    eventsTTL: chatSummary.eventsTTL,
+                    uniquePerson: them?.isUniquePerson ?? false,
+                };
+            default:
+                return {
+                    name: chatSummary.name,
+                    diamondStatus: "inactive" as DiamondMembershipStatus["kind"],
+                    streak: 0,
+                    chitEarned: undefined,
+                    avatarUrl: client.groupAvatarUrl(chatSummary, $selectedCommunitySummaryStore),
+                    userId: undefined,
+                    username: undefined,
+                    typing: client.getTypingString(
+                        $_,
+                        $allUsersStore,
+                        { chatId: chatSummary.id },
+                        typing,
+                    ),
+                    eventsTTL: chatSummary.eventsTTL,
+                    uniquePerson: false,
+                };
+        }
+    }
+
+    function openUserProfile(ev: Event) {
+        if (hasUserProfile) {
+            ev.target?.dispatchEvent(
+                new CustomEvent<ProfileLinkClickedEvent>("profile-clicked", {
+                    detail: {
+                        userId,
+                        chatButton: false,
+                        inGlobalContext: false,
+                    },
+                    bubbles: true,
+                }),
+            );
+        }
+    }
+
+    function navigateToCommunity() {
+        if ($selectedCommunitySummaryStore !== undefined) {
+            navigate(`/community/${$selectedCommunitySummaryStore.id.communityId}`);
+        }
+    }
+
+    function navigateToChannel() {
+        if ($selectedCommunitySummaryStore !== undefined) {
+            navigate(routeForChatIdentifier("community", selectedChatSummary.id));
+        }
+    }
+
+    let chat = $derived(normaliseChatSummary($now, selectedChatSummary, $typersByContext));
+</script>
+
+<SectionHeader shadow flush>
+    {#if $mobileWidth && !$restrictToSelectedChat}
+        <div class="back" class:rtl={$rtlStore} onclick={clearSelection}>
+            <HoverIcon>
+                {#if $rtlStore}
+                    <ArrowRight size={$iconSize} color={"var(--icon-txt)"} />
+                {:else}
+                    <ArrowLeft size={$iconSize} color={"var(--icon-txt)"} />
+                {/if}
+            </HoverIcon>
+        </div>
+    {/if}
+
+    <div class="avatar" class:has-user-profile={hasUserProfile} onclick={openUserProfile}>
+        <Avatar
+            statusBorder={"var(--section-bg)"}
+            {blocked}
+            showStatus
+            userId={chat.userId}
+            url={chat.avatarUrl}
+            size={AvatarSize.Default} />
+    </div>
+    <div class="chat-details">
+        <div class="chat-name">
+            {#if isMultiUser && !readonly}
+                <WithVerifiedBadge {verified} size={"small"}>
+                    <div class="title">
+                        {#if $selectedCommunitySummaryStore !== undefined && $chatListScopeStore.kind === "favourite"}
+                            <span onclick={navigateToCommunity} class="pointer">
+                                {$selectedCommunitySummaryStore.name}
+                            </span>
+                            <span>{">"}</span>
+                            <span onclick={navigateToChannel} class="pointer">
+                                {chat.name}
+                            </span>
+                        {:else}
+                            {chat.name}
+                        {/if}
+                    </div>
+                </WithVerifiedBadge>
+            {:else if hasUserProfile}
+                <span onclick={openUserProfile} class="user-link">
+                    {chat.name}
+                </span>
+                <Badges
+                    uniquePerson={chat.uniquePerson}
+                    diamondStatus={chat.diamondStatus}
+                    streak={chat.streak}
+                    chitEarned={chat.chitEarned} />
+                <span class="username">{chat.username}</span>
+            {:else}
+                {chat.name}
+            {/if}
+        </div>
+        <div class="chat-subtext">
+            {#if blocked}
+                <Translatable resourceKey={i18nKey("blocked")} />
+            {:else if readonly}
+                <ChatSubtext chat={selectedChatSummary} />
+            {:else if chat.typing !== undefined}
+                {chat.typing} <Typing />
+            {:else if isMultiUser}
+                <ChatSubtext
+                    chat={selectedChatSummary}
+                    clickableMembers
+                    onMembersClick={showGroupMembers} />
+            {:else}
+                <ChatSubtext chat={selectedChatSummary} />
+            {/if}
+        </div>
+    </div>
+    <ActiveVideoCallResume />
+    {#if !readonly && !$anonUserStore}
+        <CurrentChatMenu
+            {hasPinned}
+            {selectedChatSummary}
+            {blocked}
+            {onImportToCommunity}
+            onShowGroupDetails={showGroupDetails}
+            {onSearchChat} />
+    {/if}
+
+    <ActiveBroadcastSummary />
+</SectionHeader>
+
+<style lang="scss">
+    .chat-name {
+        @include font(book, normal, fs-120);
+        @include ellipsis();
+        margin-bottom: $sp1;
+        display: flex;
+        align-items: center;
+        gap: $sp2;
+    }
+
+    .chat-subtext {
+        @include font(book, normal, fs-80);
+        @include ellipsis();
+        color: var(--txt-light);
+    }
+
+    .avatar {
+        flex: 0 0 55px;
+
+        &.has-user-profile {
+            cursor: pointer;
+        }
+    }
+
+    .pointer {
+        cursor: pointer;
+    }
+
+    .user-link {
+        cursor: pointer;
+        @media (hover: hover) {
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+    }
+
+    .username {
+        font-weight: 200;
+        color: var(--txt-light);
+    }
+
+    .chat-details {
+        flex: 1;
+        overflow: auto;
+        padding: 0 $sp2;
+    }
+
+    .title {
+        display: flex;
+        flex-direction: row;
+        gap: $sp3;
+    }
+
+    .back {
+        flex: 0 0 10px;
+        margin-right: 5px;
+
+        &.rtl {
+            margin-right: 0;
+            margin-left: 5px;
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/CurrentChatMenu.svelte b/frontend/app/src/desktop/features/chats/core/CurrentChatMenu.svelte
new file mode 100644
index 0000000000..69bb24a653
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/CurrentChatMenu.svelte
@@ -0,0 +1,761 @@
+<script lang="ts">
+    import {
+        allUsersStore,
+        chatIdentifiersEqual,
+        type ChatSummary,
+        currentUserIdStore,
+        directChatBotsStore,
+        favouritesStore,
+        type GroupChatSummary,
+        iconSize,
+        isDiamondStore,
+        isProposalGroupStore,
+        lastRightPanelState,
+        messagesRead,
+        mobileWidth,
+        notificationsSupported,
+        type OpenChat,
+        platformModeratorStore,
+        publish,
+        setRightPanelHistory,
+    } from "@client";
+    import { getContext, onMount } from "svelte";
+    import { _ } from "svelte-i18n";
+    import AccountMultiple from "svelte-material-icons/AccountMultiple.svelte";
+    import AccountMultiplePlus from "svelte-material-icons/AccountMultiplePlus.svelte";
+    import Bell from "svelte-material-icons/Bell.svelte";
+    import BellOff from "svelte-material-icons/BellOff.svelte";
+    import CancelIcon from "svelte-material-icons/Cancel.svelte";
+    import ChatQuestionIcon from "svelte-material-icons/ChatQuestion.svelte";
+    import TickIcon from "svelte-material-icons/Check.svelte";
+    import ContentCopy from "svelte-material-icons/ContentCopy.svelte";
+    import DeleteOutline from "svelte-material-icons/DeleteOutline.svelte";
+    import DotsVertical from "svelte-material-icons/DotsVertical.svelte";
+    import FileDocument from "svelte-material-icons/FileDocument.svelte";
+    import Headphones from "svelte-material-icons/Headphones.svelte";
+    import Import from "svelte-material-icons/Import.svelte";
+    import LocationExit from "svelte-material-icons/LocationExit.svelte";
+    import Magnify from "svelte-material-icons/Magnify.svelte";
+    import Pin from "svelte-material-icons/Pin.svelte";
+    import Tune from "svelte-material-icons/Tune.svelte";
+    import Webhook from "svelte-material-icons/Webhook.svelte";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import { canDeleteDirectChat, publishDeleteDirectChat } from "@src/utils/directChat";
+    import { rtlStore } from "@src/stores/rtl";
+    import { toastStore } from "@src/stores/toast";
+    import { activeVideoCall } from "@src/stores/video";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import ConvertToCommunity from "@src/desktop/ui/icons/ConvertToCommunity.svelte";
+    import HeartMinus from "@src/desktop/ui/icons/HeartMinus.svelte";
+    import HeartPlus from "@src/desktop/ui/icons/HeartPlus.svelte";
+    import Menu from "@src/desktop/shared/Menu.svelte";
+    import MenuIcon from "@src/desktop/shared/MenuIcon.svelte";
+    import MenuItem from "@src/desktop/shared/MenuItem.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        selectedChatSummary: ChatSummary;
+        blocked: boolean;
+        hasPinned: boolean;
+        onShowGroupDetails: () => void;
+        onSearchChat: (search: string) => void;
+        onImportToCommunity: (group: GroupChatSummary) => void;
+    }
+
+    let {
+        selectedChatSummary,
+        blocked,
+        hasPinned,
+        onShowGroupDetails,
+        onSearchChat,
+        onImportToCommunity,
+    }: Props = $props();
+
+    let botIdToUninstall = $derived(
+        selectedChatSummary.kind === "direct_chat" &&
+            $directChatBotsStore.has(selectedChatSummary.them.userId)
+            ? selectedChatSummary.them.userId
+            : undefined,
+    );
+    let governanceCanisterId = $derived(
+        selectedChatSummary.kind !== "direct_chat" &&
+            selectedChatSummary.subtype?.kind === "governance_proposals"
+            ? selectedChatSummary.subtype.governanceCanisterId
+            : undefined,
+    );
+    let canMakeProposals = $derived(
+        client.tryGetNervousSystem(governanceCanisterId)?.submittingProposalsEnabled ?? false,
+    );
+    let userId = $derived(
+        selectedChatSummary.kind === "direct_chat" ? selectedChatSummary.them.userId : "",
+    );
+    let themIfDirectChat = $derived(userId ? $allUsersStore.get(userId) : undefined);
+    let isBot = $derived(themIfDirectChat?.kind === "bot");
+    let isSuspended = $derived(themIfDirectChat?.suspended ?? false);
+    let groupDetailsSelected = $derived($lastRightPanelState.kind === "group_details");
+    let pinnedSelected = $derived($lastRightPanelState.kind === "show_pinned");
+    let membersSelected = $derived($lastRightPanelState.kind === "show_group_members");
+    let inviteMembersSelected = $derived($lastRightPanelState.kind === "invite_group_users");
+    let desktop = $derived(!$mobileWidth);
+    let canConvert = $derived(
+        selectedChatSummary.kind === "group_chat" &&
+            client.canConvertGroupToCommunity(selectedChatSummary.id),
+    );
+    let canImportToCommunity = $derived(client.canImportToCommunity(selectedChatSummary.id));
+    let canStartVideoCalls = $derived(
+        !blocked && client.canStartVideoCalls(selectedChatSummary.id),
+    );
+
+    let videoCallInProgress = $derived(selectedChatSummary.videoCallInProgress !== undefined);
+    let isPublic = $derived(!client.isChatPrivate(selectedChatSummary));
+
+    let inCall = $derived(
+        $activeVideoCall !== undefined &&
+            videoCallInProgress &&
+            chatIdentifiersEqual($activeVideoCall.chatId, selectedChatSummary?.id),
+    );
+
+    let videoMenuText = $derived(
+        videoCallInProgress
+            ? i18nKey("videoCall.joinVideo")
+            : isPublic
+              ? i18nKey("videoCall.startBroadcast")
+              : i18nKey("videoCall.startVideo"),
+    );
+
+    let canRegisterWebhook = $derived(client.canRegisterWebhook(selectedChatSummary.id));
+
+    let canStartOrJoinVideoCall = $derived(!inCall && (videoCallInProgress || canStartVideoCalls));
+
+    let showDeleteDirectChat = $derived(canDeleteDirectChat(selectedChatSummary));
+
+    let hasUnreadPinned = $state(false);
+
+    $effect(() => {
+        setUnreadPinned(hasPinned, selectedChatSummary);
+    });
+
+    onMount(() => {
+        return messagesRead.subscribe(() => setUnreadPinned(hasPinned, selectedChatSummary));
+    });
+
+    function setUnreadPinned(hasPinned: boolean, chat: ChatSummary) {
+        hasUnreadPinned =
+            hasPinned &&
+            (chat.kind === "group_chat" || chat.kind === "channel") &&
+            client.unreadPinned(chat.id, chat.dateLastPinned);
+    }
+
+    function toggleMuteNotifications(
+        mute: boolean | undefined,
+        muteAtEveryone: boolean | undefined,
+    ) {
+        publish("toggleMuteNotifications", {
+            chatId: selectedChatSummary.id,
+            mute,
+            muteAtEveryone,
+        });
+    }
+
+    function addToFavourites() {
+        client.addToFavourites(selectedChatSummary.id);
+    }
+
+    function removeFromFavourites() {
+        client.removeFromFavourites(selectedChatSummary.id);
+    }
+
+    function copyUrl() {
+        publish("copyUrl");
+    }
+
+    function showGroupDetails() {
+        onShowGroupDetails();
+    }
+
+    function showPinned() {
+        setRightPanelHistory([
+            {
+                kind: "show_pinned",
+            },
+        ]);
+    }
+
+    function searchChat() {
+        onSearchChat("");
+    }
+
+    function showProposalFilters() {
+        publish("showProposalFilters");
+    }
+
+    function showGroupMembers() {
+        publish("showGroupMembers");
+    }
+
+    function blockUser() {
+        if (selectedChatSummary.kind === "direct_chat") {
+            client.blockUserFromDirectChat(selectedChatSummary.them.userId).then((success) => {
+                if (success) {
+                    toastStore.showSuccessToast(i18nKey("blockUserSucceeded"));
+                } else {
+                    toastStore.showFailureToast(i18nKey("blockUserFailed"));
+                }
+            });
+        }
+    }
+
+    function unblockUser() {
+        if (selectedChatSummary.kind === "direct_chat") {
+            client.unblockUserFromDirectChat(selectedChatSummary.them.userId).then((success) => {
+                if (success) {
+                    toastStore.showSuccessToast(i18nKey("unblockUserSucceeded"));
+                } else {
+                    toastStore.showFailureToast(i18nKey("unblockUserFailed"));
+                }
+            });
+        }
+    }
+
+    function showInviteGroupUsers() {
+        publish("showInviteGroupUsers", true);
+    }
+
+    function leaveGroup() {
+        if (selectedChatSummary.kind === "direct_chat") return;
+        publish("leaveGroup", {
+            kind: "leave",
+            chatId: selectedChatSummary.id,
+            level: selectedChatSummary.level,
+        });
+    }
+
+    function convertToCommunity() {
+        if (!$isDiamondStore) {
+            publish("upgrade");
+        } else {
+            if (selectedChatSummary.kind === "group_chat") {
+                publish("convertGroupToCommunity", selectedChatSummary);
+            }
+        }
+    }
+
+    function importToCommunity() {
+        if (selectedChatSummary.kind === "group_chat") {
+            onImportToCommunity(selectedChatSummary);
+        }
+    }
+
+    function freezeGroup() {
+        if (selectedChatSummary.id.kind === "group_chat") {
+            client.freezeGroup(selectedChatSummary.id, undefined).then((success) => {
+                if (!success) {
+                    toastStore.showFailureToast(i18nKey("failedToFreezeGroup"));
+                }
+            });
+        }
+    }
+
+    function unfreezeGroup() {
+        if (selectedChatSummary.id.kind === "group_chat") {
+            client.unfreezeGroup(selectedChatSummary.id).then((success) => {
+                if (!success) {
+                    toastStore.showFailureToast(i18nKey("failedToUnfreezeGroup"));
+                }
+            });
+        }
+    }
+
+    function onSuspendUser() {
+        publish("suspendUser", userId);
+    }
+
+    function unsuspendUser() {
+        client.unsuspendUser(userId).then((success) => {
+            if (success) {
+                toastStore.showSuccessToast(i18nKey("unsuspendedUser"));
+            } else {
+                toastStore.showFailureToast(i18nKey("failedToUnsuspendUser"));
+            }
+        });
+    }
+
+    function makeProposal() {
+        publish("makeProposal");
+    }
+
+    function registerWebhook() {
+        if (selectedChatSummary.kind !== "direct_chat") {
+            publish("registerWebhook", selectedChatSummary);
+        }
+    }
+
+    function startVideoCall() {
+        publish("startVideoCall", {
+            chatId: selectedChatSummary.id,
+            callType: isPublic ? "broadcast" : "default",
+            join: videoCallInProgress,
+        });
+    }
+
+    function removeBot(botId: string) {
+        client
+            .uninstallBot({ kind: "direct_chat", userId: $currentUserIdStore }, botId)
+            .then((success) => {
+                if (!success) {
+                    toastStore.showFailureToast(i18nKey("bots.manage.removeFailed"));
+                }
+            });
+    }
+
+</script>
+
+{#if desktop}
+    {#if $isProposalGroupStore}
+        <HoverIcon onclick={showProposalFilters} title={$_("showFilters")}>
+            <Tune size={$iconSize} color={"var(--icon-txt)"} />
+        </HoverIcon>
+    {/if}
+    <HoverIcon onclick={searchChat} title={$_("searchChat")}>
+        <Magnify size={$iconSize} color={"var(--icon-txt)"} />
+    </HoverIcon>
+
+    {#if hasPinned}
+        <HoverIcon onclick={showPinned} title={$_("showPinned")}>
+            <div
+                class="pin"
+                class:unread={!pinnedSelected && hasUnreadPinned}
+                class:rtl={$rtlStore}>
+                <Pin
+                    size={$iconSize}
+                    color={pinnedSelected ? "var(--icon-selected)" : "var(--icon-txt)"} />
+            </div>
+        </HoverIcon>
+    {/if}
+
+    {#if selectedChatSummary.kind === "direct_chat"}
+        <HoverIcon onclick={showGroupDetails}>
+            <FileDocument
+                size={$iconSize}
+                color={groupDetailsSelected ? "var(--icon-selected)" : "var(--icon-txt)"} />
+        </HoverIcon>
+    {/if}
+
+    {#if selectedChatSummary.kind === "group_chat" || selectedChatSummary.kind === "channel"}
+        <HoverIcon
+            onclick={showGroupDetails}
+            title={interpolate($_, i18nKey("groupDetails", undefined, selectedChatSummary.level))}>
+            <FileDocument
+                size={$iconSize}
+                color={groupDetailsSelected ? "var(--icon-selected)" : "var(--icon-txt)"} />
+        </HoverIcon>
+        <HoverIcon onclick={showGroupMembers} title={$_("members")}>
+            <AccountMultiple
+                size={$iconSize}
+                color={membersSelected ? "var(--icon-selected)" : "var(--icon-txt)"} />
+        </HoverIcon>
+        {#if selectedChatSummary.public || client.canInviteUsers(selectedChatSummary.id)}
+            <HoverIcon
+                onclick={showInviteGroupUsers}
+                title={interpolate(
+                    $_,
+                    i18nKey("group.inviteUsers", undefined, selectedChatSummary.level, true),
+                )}>
+                <AccountMultiplePlus
+                    size={$iconSize}
+                    color={inviteMembersSelected ? "var(--icon-selected)" : "var(--icon-txt)"} />
+            </HoverIcon>
+        {/if}
+    {/if}
+{/if}
+<div class="menu">
+    <MenuIcon position={"bottom"} align={"end"}>
+        {#snippet menuIcon()}
+            <HoverIcon title={$_("chatMenu")}>
+                <DotsVertical size={$iconSize} color={"var(--icon-txt)"} />
+            </HoverIcon>
+        {/snippet}
+        {#snippet menuItems()}
+            <Menu>
+                {#if canStartOrJoinVideoCall}
+                    <MenuItem onclick={startVideoCall}>
+                        {#snippet icon()}
+                            <Headphones size={$iconSize} color={"var(--icon-inverted-txt)"} />
+                        {/snippet}
+                        {#snippet text()}
+                            <Translatable resourceKey={videoMenuText} />
+                        {/snippet}
+                    </MenuItem>
+                {/if}
+                {#if !$favouritesStore.has(selectedChatSummary.id)}
+                    <MenuItem onclick={addToFavourites}>
+                        {#snippet icon()}
+                            <HeartPlus size={$iconSize} color={"var(--menu-warn)"} />
+                        {/snippet}
+                        {#snippet text()}
+                            <Translatable resourceKey={i18nKey("communities.addToFavourites")} />
+                        {/snippet}
+                    </MenuItem>
+                {:else}
+                    <MenuItem onclick={removeFromFavourites}>
+                        {#snippet icon()}
+                            <HeartMinus size={$iconSize} color={"var(--menu-warn)"} />
+                        {/snippet}
+                        {#snippet text()}
+                            <Translatable
+                                resourceKey={i18nKey("communities.removeFromFavourites")} />
+                        {/snippet}
+                    </MenuItem>
+                {/if}
+                <MenuItem onclick={copyUrl}>
+                    {#snippet icon()}
+                        <ContentCopy size={$iconSize} color={"var(--icon-txt)"} />
+                    {/snippet}
+                    {#snippet text()}
+                        <Translatable resourceKey={i18nKey("copyUrl")} />
+                    {/snippet}
+                </MenuItem>
+                {#if $mobileWidth}
+                    {#if selectedChatSummary.kind === "direct_chat"}
+                        <MenuItem onclick={showGroupDetails}>
+                            {#snippet icon()}
+                                <FileDocument size={$iconSize} color={"var(--icon-inverted-txt)"} />
+                            {/snippet}
+                            {#snippet text()}
+                                <Translatable resourceKey={i18nKey("chatDetails")} />
+                            {/snippet}
+                        </MenuItem>
+                    {/if}
+                    {#if $isProposalGroupStore}
+                        <MenuItem onclick={showProposalFilters}>
+                            {#snippet icon()}
+                                <Tune size={$iconSize} color={"var(--icon-inverted-txt)"} />
+                            {/snippet}
+                            {#snippet text()}
+                                <Translatable resourceKey={i18nKey("proposal.filter")} />
+                            {/snippet}
+                        </MenuItem>
+                    {/if}
+                    <MenuItem onclick={searchChat}>
+                        {#snippet icon()}
+                            <Magnify size={$iconSize} color={"var(--icon-inverted-txt)"} />
+                        {/snippet}
+                        {#snippet text()}
+                            <Translatable resourceKey={i18nKey("searchChat")} />
+                        {/snippet}
+                    </MenuItem>
+                {/if}
+                {#if selectedChatSummary.kind === "group_chat" || selectedChatSummary.kind === "channel"}
+                    {#if $mobileWidth}
+                        {#if hasPinned}
+                            <MenuItem onclick={showPinned}>
+                                {#snippet icon()}
+                                    <Pin
+                                        size={$iconSize}
+                                        color={hasUnreadPinned
+                                            ? "var(--icon-selected)"
+                                            : "var(--icon-inverted-txt)"} />
+                                {/snippet}
+                                {#snippet text()}
+                                    <Translatable resourceKey={i18nKey("showPinned")} />
+                                {/snippet}
+                            </MenuItem>
+                        {/if}
+                        <MenuItem onclick={showGroupDetails}>
+                            {#snippet icon()}
+                                <FileDocument size={$iconSize} color={"var(--icon-inverted-txt)"} />
+                            {/snippet}
+                            {#snippet text()}
+                                <Translatable
+                                    resourceKey={i18nKey(
+                                        "groupDetails",
+                                        undefined,
+                                        selectedChatSummary.level,
+                                    )} />
+                            {/snippet}
+                        </MenuItem>
+                        <MenuItem onclick={showGroupMembers}>
+                            {#snippet icon()}
+                                <AccountMultiple
+                                    size={$iconSize}
+                                    color={"var(--icon-inverted-txt)"} />
+                            {/snippet}
+                            {#snippet text()}
+                                <Translatable resourceKey={i18nKey("members")} />
+                            {/snippet}
+                        </MenuItem>
+                        {#if client.canInviteUsers(selectedChatSummary.id)}
+                            <MenuItem onclick={showInviteGroupUsers}>
+                                {#snippet icon()}
+                                    <AccountMultiplePlus
+                                        size={$iconSize}
+                                        color={"var(--icon-inverted-txt)"} />
+                                {/snippet}
+                                {#snippet text()}
+                                    <Translatable
+                                        resourceKey={i18nKey(
+                                            "group.inviteUsers",
+                                            undefined,
+                                            selectedChatSummary.level,
+                                            true,
+                                        )} />
+                                {/snippet}
+                            </MenuItem>
+                        {/if}
+                    {/if}
+
+                    {#if notificationsSupported}
+                        {#if selectedChatSummary.membership.notificationsMuted === true}
+                            <MenuItem onclick={() => toggleMuteNotifications(false, undefined)}>
+                                {#snippet icon()}
+                                    <Bell size={$iconSize} color={"var(--icon-inverted-txt)"} />
+                                {/snippet}
+                                {#snippet text()}
+                                    <Translatable resourceKey={i18nKey("unmuteNotifications")} />
+                                {/snippet}
+                            </MenuItem>
+                        {:else}
+                            <MenuItem onclick={() => toggleMuteNotifications(true, undefined)}>
+                                {#snippet icon()}
+                                    <BellOff size={$iconSize} color={"var(--icon-inverted-txt)"} />
+                                {/snippet}
+                                {#snippet text()}
+                                    <Translatable resourceKey={i18nKey("muteNotifications")} />
+                                {/snippet}
+                            </MenuItem>
+                        {/if}
+                        {#if selectedChatSummary.membership.atEveryoneMuted === true}
+                            <MenuItem onclick={() => toggleMuteNotifications(undefined, false)}>
+                                {#snippet icon()}
+                                    <Bell size={$iconSize} color={"var(--icon-inverted-txt)"} />
+                                {/snippet}
+                                {#snippet text()}
+                                    <Translatable resourceKey={i18nKey("unmuteAtEveryone")} />
+                                {/snippet}
+                            </MenuItem>
+                        {:else}
+                            <MenuItem onclick={() => toggleMuteNotifications(undefined, true)}>
+                                {#snippet icon()}
+                                    <BellOff size={$iconSize} color={"var(--icon-inverted-txt)"} />
+                                {/snippet}
+                                {#snippet text()}
+                                    <Translatable resourceKey={i18nKey("muteAtEveryone")} />
+                                {/snippet}
+                            </MenuItem>
+                        {/if}
+                    {/if}
+
+                    {#if canMakeProposals}
+                        <MenuItem onclick={makeProposal}>
+                            {#snippet icon()}
+                                <ChatQuestionIcon
+                                    size={$iconSize}
+                                    color={"var(--icon-inverted-txt)"} />
+                            {/snippet}
+                            {#snippet text()}
+                                <Translatable resourceKey={i18nKey("proposal.makeProposal")} />
+                            {/snippet}
+                        </MenuItem>
+                    {/if}
+
+                    {#if canRegisterWebhook}
+                        <MenuItem onclick={registerWebhook}>
+                            {#snippet icon()}
+                                <Webhook size={$iconSize} color={"var(--icon-inverted-txt)"} />
+                            {/snippet}
+                            {#snippet text()}
+                                <Translatable resourceKey={i18nKey("webhook.registerTitle")} />
+                            {/snippet}
+                        </MenuItem>
+                    {/if}
+
+                    {#if $platformModeratorStore && selectedChatSummary.kind === "group_chat"}
+                        {#if client.isChatFrozen(selectedChatSummary.id)}
+                            <MenuItem warning onclick={unfreezeGroup}>
+                                {#snippet icon()}
+                                    <TickIcon size={$iconSize} color={"var(--menu-warn"} />
+                                {/snippet}
+                                {#snippet text()}
+                                    <Translatable resourceKey={i18nKey("unfreezeGroup")} />
+                                {/snippet}
+                            </MenuItem>
+                        {:else}
+                            <MenuItem warning onclick={freezeGroup}>
+                                {#snippet icon()}
+                                    <CancelIcon size={$iconSize} color={"var(--menu-warn"} />
+                                {/snippet}
+                                {#snippet text()}
+                                    <Translatable resourceKey={i18nKey("freezeGroup")} />
+                                {/snippet}
+                            </MenuItem>
+                        {/if}
+                    {/if}
+
+                    {#if client.canLeaveGroup(selectedChatSummary.id)}
+                        <MenuItem warning onclick={leaveGroup}>
+                            {#snippet icon()}
+                                <LocationExit size={$iconSize} color={"var(--menu-warn)"} />
+                            {/snippet}
+                            {#snippet text()}
+                                <Translatable
+                                    resourceKey={i18nKey(
+                                        "leaveGroup",
+                                        undefined,
+                                        selectedChatSummary.level,
+                                        true,
+                                    )} />
+                            {/snippet}
+                        </MenuItem>
+                    {/if}
+                    {#if canConvert}
+                        <MenuItem warning onclick={convertToCommunity}>
+                            {#snippet icon()}
+                                <ConvertToCommunity size={$iconSize} color={"var(--menu-warn)"} />
+                            {/snippet}
+                            {#snippet text()}
+                                <Translatable resourceKey={i18nKey("communities.convert")} />
+                            {/snippet}
+                        </MenuItem>
+                    {/if}
+                    {#if canImportToCommunity}
+                        <MenuItem warning onclick={importToCommunity}>
+                            {#snippet icon()}
+                                <Import size={$iconSize} color={"var(--menu-warn)"} />
+                            {/snippet}
+                            {#snippet text()}
+                                <Translatable resourceKey={i18nKey("communities.import")} />
+                            {/snippet}
+                        </MenuItem>
+                    {/if}
+                {/if}
+                {#if selectedChatSummary.kind === "direct_chat" && !isBot}
+                    {#if hasPinned}
+                        <MenuItem onclick={showPinned}>
+                            {#snippet icon()}
+                                <Pin size={$iconSize} color={"var(--icon-inverted-txt)"} />
+                            {/snippet}
+                            {#snippet text()}
+                                <Translatable resourceKey={i18nKey("showPinned")} />
+                            {/snippet}
+                        </MenuItem>
+                    {/if}
+                    {#if notificationsSupported}
+                        {#if selectedChatSummary.membership.notificationsMuted === true}
+                            <MenuItem onclick={() => toggleMuteNotifications(false, undefined)}>
+                                {#snippet icon()}
+                                    <Bell size={$iconSize} color={"var(--icon-inverted-txt)"} />
+                                {/snippet}
+                                {#snippet text()}
+                                    <Translatable resourceKey={i18nKey("unmuteNotifications")} />
+                                {/snippet}
+                            </MenuItem>
+                        {:else}
+                            <MenuItem onclick={() => toggleMuteNotifications(true, undefined)}>
+                                {#snippet icon()}
+                                    <BellOff size={$iconSize} color={"var(--icon-inverted-txt)"} />
+                                {/snippet}
+                                {#snippet text()}
+                                    <Translatable resourceKey={i18nKey("muteNotifications")} />
+                                {/snippet}
+                            </MenuItem>
+                        {/if}
+                    {/if}
+                    {#if blocked}
+                        <MenuItem onclick={unblockUser}>
+                            {#snippet icon()}
+                                <CancelIcon size={$iconSize} color={"var(--icon-inverted-txt)"} />
+                            {/snippet}
+                            {#snippet text()}
+                                <Translatable resourceKey={i18nKey("unblockUser")} />
+                            {/snippet}
+                        </MenuItem>
+                    {:else}
+                        <MenuItem onclick={blockUser}>
+                            {#snippet icon()}
+                                <CancelIcon size={$iconSize} color={"var(--icon-inverted-txt)"} />
+                            {/snippet}
+                            {#snippet text()}
+                                <Translatable resourceKey={i18nKey("blockUser")} />
+                            {/snippet}
+                        </MenuItem>
+                    {/if}
+                    {#if $platformModeratorStore}
+                        {#if isSuspended}
+                            <MenuItem onclick={unsuspendUser}>
+                                {#snippet icon()}
+                                    <TickIcon size={$iconSize} color={"var(--icon-inverted-txt)"} />
+                                {/snippet}
+                                {#snippet text()}
+                                    <Translatable resourceKey={i18nKey("unsuspendUser")} />
+                                {/snippet}
+                            </MenuItem>
+                        {:else}
+                            <MenuItem onclick={onSuspendUser}>
+                                {#snippet icon()}
+                                    <CancelIcon
+                                        size={$iconSize}
+                                        color={"var(--icon-inverted-txt)"} />
+                                {/snippet}
+                                {#snippet text()}
+                                    <Translatable resourceKey={i18nKey("suspendUser")} />
+                                {/snippet}
+                            </MenuItem>
+                        {/if}
+                    {/if}
+                {/if}
+                {#if botIdToUninstall !== undefined}
+                    <MenuItem onclick={() => removeBot(botIdToUninstall)}>
+                        {#snippet icon()}
+                            <DeleteOutline size={$iconSize} color={"var(--icon-inverted-txt)"} />
+                        {/snippet}
+                        {#snippet text()}
+                            <Translatable resourceKey={i18nKey("bots.manage.remove")} />
+                        {/snippet}
+                    </MenuItem>
+                {/if}
+                {#if showDeleteDirectChat}
+                    <MenuItem warning onclick={() => publishDeleteDirectChat(selectedChatSummary)}>
+                        {#snippet icon()}
+                            <DeleteOutline size={$iconSize} color={"var(--menu-warn)"} />
+                        {/snippet}
+                        {#snippet text()}
+                            <Translatable resourceKey={i18nKey("deleteChat")} />
+                        {/snippet}
+                    </MenuItem>
+                {/if}
+            </Menu>
+        {/snippet}
+    </MenuIcon>
+</div>
+
+<style lang="scss">
+    .menu {
+        flex: 0 0 20px;
+    }
+
+    $dot-size: 9px;
+
+    .pin {
+        position: relative;
+        display: grid;
+        align-content: center;
+
+        &.unread::after {
+            content: "";
+            width: $dot-size;
+            height: $dot-size;
+            background-color: var(--accent);
+            border-radius: 50%;
+            position: absolute;
+            bottom: -$sp2;
+            right: -$sp2;
+        }
+
+        &.unread.rtl::after {
+            left: -$sp2;
+            right: auto;
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/CurrentChatMessages.svelte b/frontend/app/src/desktop/features/chats/core/CurrentChatMessages.svelte
new file mode 100644
index 0000000000..9c168e7e32
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/CurrentChatMessages.svelte
@@ -0,0 +1,361 @@
+<script lang="ts">
+    import { trackedEffect } from "@src/utils/effects.svelte";
+    import {
+        type ChatEvent as ChatEventType,
+        type ChatIdentifier,
+        type ChatSummary,
+        type EnhancedReplyContext,
+        type EventWrapper,
+        type Mention,
+        type Message,
+        type OpenChat,
+        type ReadonlySet,
+        FilteredProposals,
+        allUsersStore,
+        chatIdentifiersEqual,
+        chatListScopeStore,
+        chatsInitialisedStore,
+        currentUserIdStore,
+        eventsStore,
+        failedMessagesStore,
+        localUpdates,
+        messageIndexStore,
+        messagesRead,
+        ROLE_NONE,
+        routeForChatIdentifier,
+        selectedChatDraftMessageStore,
+        selectedChatExpandedDeletedMessageStore,
+        selectedChatIdStore,
+        selectedChatPinnedMessagesStore,
+        selectedCommunitySummaryStore,
+        showMiddle,
+        stripSuspendedGate,
+        threadOpenStore,
+        unconfirmedStore,
+        chatIdentifierToString,
+    } from "@client";
+    import { navigate } from "@src/utils/navigation";
+    import { getContext, untrack } from "svelte";
+    import Witch from "@src/ui/Witch.svelte";
+    import {
+        chatStartItem,
+        flattenTimeline,
+        type FlatChatItem,
+    } from "@src/ui/flatChatItems";
+    import ChatEvent from "@src/desktop/features/chats/core/events/ChatEvent.svelte";
+    import ChatEventList from "@src/desktop/features/chats/core/events/ChatEventList.svelte";
+    import InitialChatMessage from "./InitialChatMessage.svelte";
+    import PrivatePreview from "./PrivatePreview.svelte";
+    import TimelineDate from "./TimelineDate.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        chat: ChatSummary;
+        unreadMessages: number;
+        readonly: boolean;
+        firstUnreadMention: Mention | undefined;
+        canPin: boolean;
+        canBlockUsers: boolean;
+        canDelete: boolean;
+        canSendAny: boolean;
+        canReact: boolean;
+        canInvite: boolean;
+        footer: boolean;
+        canReplyInThread: boolean;
+        filteredProposals: FilteredProposals | undefined;
+        privateChatPreview: boolean;
+        onRemovePreview: (event: EventWrapper<Message>, url: string) => void;
+        onReplyTo: (ctx: EnhancedReplyContext) => void;
+    }
+
+    let {
+        chat,
+        unreadMessages,
+        readonly,
+        firstUnreadMention,
+        canPin,
+        canBlockUsers,
+        canDelete,
+        canSendAny,
+        canReact,
+        canInvite,
+        footer,
+        canReplyInThread,
+        filteredProposals,
+        privateChatPreview,
+        onRemovePreview,
+        onReplyTo,
+    }: Props = $props();
+
+    // treat this as if it might be null so we don't get errors when it's unmounted
+    let chatEventList: ChatEventList | undefined = $state();
+    let messagesDiv: HTMLDivElement | undefined = $state();
+    let messagesDivHeight: number = $state(0);
+    let initialised = $state(false);
+    let currentChatId: ChatIdentifier | undefined = $state();
+
+    function onGoToMessageIndex(detail: { index: number }) {
+        doGoToMessageIndex(detail.index);
+    }
+
+    function doGoToMessageIndex(index: number): void {
+        navigate(routeForChatIdentifier($chatListScopeStore.kind, chat.id));
+        chatEventList?.scrollToMessageIndex(messageContext, index, false);
+    }
+
+    export function scrollToMessageIndex(index: number, preserveFocus: boolean) {
+        chatEventList?.scrollToMessageIndex(messageContext, index, preserveFocus);
+    }
+
+    function replyTo(replyContext: EnhancedReplyContext) {
+        if (!canSendAny) return;
+        onReplyTo(replyContext);
+    }
+
+    function onEditEvent(ev: EventWrapper<Message>) {
+        localUpdates.draftMessages.setEditing({ chatId: chat.id }, ev, $allUsersStore);
+    }
+
+    export function externalGoToMessage(messageIndex: number): void {
+        chatEventList?.onMessageWindowLoaded({
+            context: messageContext,
+            messageIndex,
+            initialLoad: false,
+        });
+    }
+
+    function isMe(evt: EventWrapper<ChatEventType>): boolean {
+        if (evt.event.kind === "message") {
+            return evt.event.sender === $currentUserIdStore;
+        }
+        if (evt.event.kind === "group_chat_created") {
+            return evt.event.created_by === $currentUserIdStore;
+        }
+        return false;
+    }
+
+    function isPinned(store: ReadonlySet<number>, evt: EventWrapper<ChatEventType>): boolean {
+        if (evt.event.kind === "message") {
+            return store.has(evt.event.messageIndex);
+        }
+
+        return false;
+    }
+
+    function isCollapsed(
+        ew: EventWrapper<ChatEventType>,
+        filteredProposals: FilteredProposals | undefined,
+    ): boolean {
+        return ew.event.kind === "message" && isCollpasedProposal(ew.event, filteredProposals);
+    }
+
+    function toggleMessageExpansion(ew: EventWrapper<ChatEventType>, expand: boolean) {
+        if (ew.event.kind === "message" && ew.event.content.kind === "proposal_content") {
+            client.toggleProposalFilterMessageExpansion(ew.event.messageId, expand);
+        }
+    }
+
+    function groupInner(filteredProposals: FilteredProposals | undefined) {
+        return (events: EventWrapper<ChatEventType>[]) => {
+            return client.groupWhile((a, b) => inSameGroup(a, b, filteredProposals), events);
+        };
+    }
+
+    // Each expanded proposal should be in a group by itself
+    // All collapsed proposals should be grouped together
+    // Otherwise group by sender
+    function inSameGroup(
+        a: EventWrapper<ChatEventType>,
+        b: EventWrapper<ChatEventType>,
+        filteredProposals: FilteredProposals | undefined,
+    ): boolean {
+        if (a.event.kind === "message" && b.event.kind === "message") {
+            const aKind = a.event.content.kind;
+            const bKind = b.event.content.kind;
+            if (aKind === "proposal_content" || bKind === "proposal_content") {
+                return (
+                    isCollpasedProposal(a.event, filteredProposals) &&
+                    isCollpasedProposal(b.event, filteredProposals)
+                );
+            } else {
+                return client.sameUser(a, b);
+            }
+        }
+        return false;
+    }
+
+    function isCollpasedProposal(
+        message: Message,
+        filteredProposals: FilteredProposals | undefined,
+    ): boolean {
+        if (message.content.kind !== "proposal_content") return false;
+        return filteredProposals?.isCollapsed(message.messageId, message.content.proposal) ?? false;
+    }
+
+    function shouldShowAvatar(
+        chat: ChatSummary,
+        earliestLoadedEventIndex: number | undefined,
+    ): boolean {
+        // If this is an empty chat, show the avatar
+        if (isEmptyChat) {
+            return true;
+        }
+        // Otherwise, only show the avatar if we have loaded right back to the earliest available events
+        if (earliestLoadedEventIndex === undefined) {
+            return false;
+        }
+        // For new direct chats the first event is the 'DirectChatCreated' event which we only load a short while after
+        // sending the first message, so to prevent a short flicker with no avatar, we still show the avatar if the
+        // earliest loaded event index is 1, even though event 0 is available
+        const indexRequired = Math.max(client.earliestAvailableEventIndex(chat), 1);
+        return earliestLoadedEventIndex <= indexRequired;
+    }
+    let privateCommunityPreview = $derived(
+        $selectedCommunitySummaryStore !== undefined &&
+            ($selectedCommunitySummaryStore.membership.role === ROLE_NONE ||
+                $selectedCommunitySummaryStore.membership.lapsed) &&
+            (!$selectedCommunitySummaryStore.public ||
+                stripSuspendedGate($selectedCommunitySummaryStore.gateConfig.gate).kind !==
+                    "no_gate"),
+    );
+    let privatePreview = $derived(privateCommunityPreview || privateChatPreview);
+    let isEmptyChat = $derived(chat.latestEventIndex <= 0 || privatePreview);
+
+    trackedEffect("current-chat-messages", () => {
+        if (currentChatId === undefined || !chatIdentifiersEqual(chat.id, currentChatId)) {
+            currentChatId = chat.id;
+            initialised = false;
+
+            // If the chat is empty, there is nothing to initialise, so we can set initialised to true
+            if (isEmptyChat) {
+                initialised = true;
+            }
+        }
+    });
+    let showAvatar = $derived(initialised && shouldShowAvatar(chat, $eventsStore[0]?.index));
+    let messageContext = $derived({ chatId: chat?.id, threadRootMessageIndex: undefined });
+    let timeline = $derived(
+        client.groupEvents(
+            [...$eventsStore].reverse(),
+            $currentUserIdStore,
+            chat.kind === "channel" && chat.public,
+            $selectedChatExpandedDeletedMessageStore,
+            groupInner(filteredProposals),
+        ),
+    );
+    let items = $derived.by<FlatChatItem[]>(() => {
+        const flat: FlatChatItem[] = flattenTimeline(timeline);
+        if (showAvatar) {
+            // rendered at the oldest end of the list (the visual top)
+            flat.push(chatStartItem(chatIdentifierToString(chat.id)));
+        }
+        return flat;
+    });
+
+    // Scroll to the route's message index when it changes — and also on the
+    // effect's FIRST run: on single-column layouts the pinned/details panels
+    // unmount the chat view, so a pinned-message tap navigates while the old
+    // instance is being destroyed (where it is silently swallowed) and the
+    // remounted instance must pick the navigation up from the route.
+    let previousChatId: ChatIdentifier | undefined = undefined;
+    let previousMessageIndex: number | undefined = undefined;
+    $effect(() => {
+        void $threadOpenStore;
+        const idx = $messageIndexStore;
+        const sameChat = chatIdentifiersEqual($selectedChatIdStore, previousChatId);
+        if ($chatsInitialisedStore && idx !== undefined && (!sameChat || idx !== previousMessageIndex)) {
+            untrack(() => {
+                scrollToMessageIndex(idx, false);
+            });
+        }
+        previousChatId = $selectedChatIdStore;
+        previousMessageIndex = idx;
+    });
+</script>
+
+<Witch />
+
+{#if privatePreview}
+    <div class="private-preview">
+        <PrivatePreview />
+        {#if showAvatar}
+            <InitialChatMessage {chat} />
+        {/if}
+    </div>
+{:else}
+    <ChatEventList
+        bind:this={chatEventList}
+        rootSelector={"chat-messages"}
+        threadRootEvent={undefined}
+        maintainScroll
+        visible={$showMiddle}
+        {readonly}
+        {unreadMessages}
+        {firstUnreadMention}
+        {footer}
+        {items}
+        {chat}
+        bind:initialised
+        bind:messagesDiv
+        bind:messagesDivHeight>
+        {#snippet row(
+            item,
+            { isAccepted, isConfirmed, isFailed, isReadByMe, messageObserver, focusIndex },
+        )}
+            {#if item.kind === "timeline_date"}
+                <TimelineDate timestamp={item.timestamp} />
+            {:else if item.kind === "chat_start"}
+                <InitialChatMessage {chat} />
+            {:else}
+                {@const evt = item.event}
+                <ChatEvent
+                    observer={messageObserver}
+                    focused={evt.event.kind === "message" &&
+                        evt.event.messageIndex === focusIndex &&
+                        !isFailed($failedMessagesStore, evt)}
+                    accepted={isAccepted($unconfirmedStore, evt)}
+                    confirmed={isConfirmed($unconfirmedStore, evt)}
+                    failed={isFailed($failedMessagesStore, evt)}
+                    readByMe={isReadByMe($messagesRead, evt)}
+                    chatId={chat.id}
+                    chatType={chat.kind}
+                    me={isMe(evt)}
+                    first={item.first}
+                    last={item.last}
+                    {readonly}
+                    {canPin}
+                    {canBlockUsers}
+                    {canDelete}
+                    {canSendAny}
+                    {canReact}
+                    {canInvite}
+                    {canReplyInThread}
+                    collapsed={isCollapsed(evt, filteredProposals)}
+                    supportsEdit
+                    supportsReply
+                    threadRootMessage={undefined}
+                    publicGroup={(chat.kind === "group_chat" || chat.kind === "channel") &&
+                        chat.public}
+                    pinned={isPinned($selectedChatPinnedMessagesStore, evt)}
+                    editing={$selectedChatDraftMessageStore?.editingEvent === evt}
+                    onReplyTo={replyTo}
+                    {onRemovePreview}
+                    {onEditEvent}
+                    {onGoToMessageIndex}
+                    onExpandMessage={() => toggleMessageExpansion(evt, true)}
+                    onCollapseMessage={() => toggleMessageExpansion(evt, false)}
+                    event={evt} />
+            {/if}
+        {/snippet}
+    </ChatEventList>
+{/if}
+
+<style lang="scss">
+    .private-preview {
+        @include message-list();
+        background-color: var(--currentChat-msgs-bg);
+        display: flex;
+        flex-direction: column-reverse;
+    }
+</style>
diff --git a/frontend/app/src/components/home/CurrentChatSearchHeader.svelte b/frontend/app/src/desktop/features/chats/core/CurrentChatSearchHeader.svelte
similarity index 97%
rename from frontend/app/src/components/home/CurrentChatSearchHeader.svelte
rename to frontend/app/src/desktop/features/chats/core/CurrentChatSearchHeader.svelte
index abd7c050cc..be12f07a9f 100644
--- a/frontend/app/src/components/home/CurrentChatSearchHeader.svelte
+++ b/frontend/app/src/desktop/features/chats/core/CurrentChatSearchHeader.svelte
@@ -11,9 +11,9 @@
     import ChevronDown from "svelte-material-icons/ChevronDown.svelte";
     import ChevronUp from "svelte-material-icons/ChevronUp.svelte";
     import Close from "svelte-material-icons/Close.svelte";
-    import HoverIcon from "../HoverIcon.svelte";
-    import SectionHeader from "../SectionHeader.svelte";
-    import MentionPicker from "./MentionPicker.svelte";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import SectionHeader from "@src/desktop/shared/SectionHeader.svelte";
+    import MentionPicker from "@src/desktop/shared/MentionPicker.svelte";
 
     interface Props {
         chat: ChatSummary;
diff --git a/frontend/app/src/desktop/features/chats/core/DisappearLabel.svelte b/frontend/app/src/desktop/features/chats/core/DisappearLabel.svelte
new file mode 100644
index 0000000000..142e6d022b
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/DisappearLabel.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+    import type { OpenChat } from "@client";
+    import { getContext } from "svelte";
+    import CameraTimer from "svelte-material-icons/CameraTimer.svelte";
+    import Tooltip from "@src/desktop/ui/tooltip/Tooltip.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { _ } from "svelte-i18n";
+
+    const client = getContext<OpenChat>("client");
+    interface Props {
+        ttl: bigint;
+    }
+
+    let { ttl }: Props = $props();
+</script>
+
+<Tooltip position={"bottom"} align={"end"}>
+    <div class="disappears">
+        <div class="expires">
+            <CameraTimer size={"1em"} color={"var(--txt-light)"} />
+        </div>
+        <div class="name">{client.formatDisappearingMessageTime(Number(ttl), $_)}</div>
+    </div>
+    {#snippet popupTemplate()}
+        <Translatable
+            resourceKey={i18nKey("disappearingMessages.summary", {
+                duration: client.formatDuration(Number(ttl)),
+            })} />
+    {/snippet}
+</Tooltip>
+
+<style lang="scss">
+    .disappears {
+        display: flex;
+        gap: $sp2;
+        align-items: center;
+        text-transform: uppercase;
+        background-color: var(--chatSummary-bg-selected);
+        padding: $sp2 $sp3;
+        border-radius: $sp3;
+
+        .expires {
+            $size: 12px;
+            flex: 0 0 $size;
+            width: $size;
+            height: $size;
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/DisappearingMessageTimeUpdated.svelte b/frontend/app/src/desktop/features/chats/core/DisappearingMessageTimeUpdated.svelte
new file mode 100644
index 0000000000..4c8828d03d
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/DisappearingMessageTimeUpdated.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+    import type { OpenChat, UserSummary } from "@client";
+    import { allUsersStore } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { buildDisplayName } from "@src/utils/user";
+    import NonMessageEvent from "@src/desktop/features/chats/core/events/NonMessageEvent.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        user: UserSummary | undefined;
+        changedBy: string;
+        newTimeToLive: bigint | undefined;
+        timestamp: bigint;
+    }
+
+    let { user, changedBy, newTimeToLive, timestamp }: Props = $props();
+
+    let me = $derived(changedBy === user?.userId);
+    let changedByStr = $derived(buildDisplayName($allUsersStore, changedBy, me ? "me" : "user"));
+    let text = $derived(
+        newTimeToLive !== undefined
+            ? $_("disappearingMessages.timeUpdatedBy", {
+                  values: {
+                      changedBy: changedByStr,
+                      duration: client.formatDuration(Number(newTimeToLive)),
+                  },
+              })
+            : $_("disappearingMessages.disabledBy", {
+                  values: {
+                      changedBy: changedByStr,
+                  },
+              }),
+    );
+</script>
+
+<NonMessageEvent {text} {timestamp} />
diff --git a/frontend/app/src/components/home/DisappearsAt.svelte b/frontend/app/src/desktop/features/chats/core/DisappearsAt.svelte
similarity index 100%
rename from frontend/app/src/components/home/DisappearsAt.svelte
rename to frontend/app/src/desktop/features/chats/core/DisappearsAt.svelte
diff --git a/frontend/app/src/desktop/features/chats/core/DraftMediaMessage.svelte b/frontend/app/src/desktop/features/chats/core/DraftMediaMessage.svelte
new file mode 100644
index 0000000000..a25d8897a7
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/DraftMediaMessage.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+    import type { AttachmentContent } from "@client";
+    import VideoContent from "@src/desktop/features/chats/core/content/VideoContent.svelte";
+    import ImageContent from "@src/desktop/features/chats/core/content/ImageContent.svelte";
+    import AudioContent from "@src/desktop/features/chats/core/content/AudioContent.svelte";
+    import FileContent from "@src/desktop/features/chats/core/content/FileContent.svelte";
+
+    interface Props {
+        content: AttachmentContent;
+    }
+
+    let { content }: Props = $props();
+</script>
+
+<div class="msg-preview">
+    {#if content.kind === "video_content"}
+        <VideoContent edited={false} fill={false} {content} draft />
+    {:else if content.kind === "audio_content"}
+        <AudioContent me edited={false} {content} />
+    {:else if content.kind === "image_content"}
+        <ImageContent edited={false} fill={false} {content} draft />
+    {:else if content.kind === "file_content"}
+        <div class="file-preview">
+            <FileContent edited={false} me {content} draft />
+        </div>
+    {/if}
+</div>
+
+<style lang="scss">
+    .msg-preview {
+        min-width: 90px;
+        margin-top: $sp4;
+    }
+
+    .file-preview {
+        border-radius: $sp4;
+        padding: $sp3;
+        color: var(--currentChat-msg-me-txt);
+        background-color: var(--currentChat-msg-me-bg);
+    }
+</style>
diff --git a/frontend/app/src/components/home/DropTarget.svelte b/frontend/app/src/desktop/features/chats/core/DropTarget.svelte
similarity index 98%
rename from frontend/app/src/components/home/DropTarget.svelte
rename to frontend/app/src/desktop/features/chats/core/DropTarget.svelte
index 4cfcac0c00..4d3ffa45e0 100644
--- a/frontend/app/src/components/home/DropTarget.svelte
+++ b/frontend/app/src/desktop/features/chats/core/DropTarget.svelte
@@ -7,7 +7,7 @@
     import { _ } from "svelte-i18n";
     import PlusCircle from "svelte-material-icons/PlusCircle.svelte";
     import { fade } from "svelte/transition";
-    import Translatable from "../Translatable.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/desktop/features/chats/core/EmojiAutocompleter.svelte b/frontend/app/src/desktop/features/chats/core/EmojiAutocompleter.svelte
new file mode 100644
index 0000000000..571d4ffa2c
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/EmojiAutocompleter.svelte
@@ -0,0 +1,125 @@
+<script lang="ts">
+    import VirtualList from "@src/ui/VirtualList.svelte";
+    import { mobileWidth, type EmojiSummary, type SelectedEmoji } from "@client";
+    import { untrack } from "svelte";
+    import { searchAllEmojis, summaryToSelectedEmoji } from "@src/utils/emojis";
+    import Menu from "@src/desktop/shared/Menu.svelte";
+    import MenuItem from "@src/desktop/shared/MenuItem.svelte";
+
+    interface Props {
+        query: string | undefined;
+        offset: number;
+        onSelect: (emoji: SelectedEmoji) => void;
+        onClose: () => void;
+    }
+
+    let { query, offset, onSelect, onClose }: Props = $props();
+
+    let index = $state(0);
+    let matches: EmojiSummary[] = $state([]);
+
+    // this is definitely a bit horrible. It seems to be necessary when we use the virtual list.
+    let ITEM_HEIGHT = $derived($mobileWidth ? 43.2 : 49.59);
+    $effect(() => {
+        if (query !== undefined) {
+            search(query);
+        }
+    });
+
+    function search(query: string) {
+        untrack(() => {
+            searchAllEmojis(query).then((m) => {
+                matches = m;
+            });
+        });
+    }
+
+    function select(match: EmojiSummary) {
+        onSelect(summaryToSelectedEmoji(match));
+    }
+
+    function onKeyDown(ev: KeyboardEvent): void {
+        switch (ev.key) {
+            case "ArrowDown":
+                index = (index + 1) % matches.length;
+                ev.preventDefault();
+                ev.stopPropagation();
+                break;
+            case "ArrowUp":
+                index = index === 0 ? matches.length - 1 : index - 1;
+                ev.preventDefault();
+                ev.stopPropagation();
+                break;
+            case "Escape":
+                onClose();
+                ev.preventDefault();
+                ev.stopPropagation();
+                break;
+            case "Enter":
+                const match = matches[index];
+                if (match) {
+                    select(match);
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                }
+                break;
+        }
+    }
+</script>
+
+<div class="picker" style={`bottom: ${offset}px; height: ${matches.length * ITEM_HEIGHT}px`}>
+    <Menu>
+        <VirtualList keyFn={(e) => e.code} items={matches}>
+            {#snippet children(match, itemIndex)}
+                <MenuItem selected={itemIndex === index} onclick={() => select(match)}>
+                    {#snippet icon()}
+                        <div class="emoji">
+                            {#if match.kind === "native"}
+                                {match.unicode}
+                            {:else}
+                                <img class="custom-emoji" src={match.url} alt={match.code} />
+                            {/if}
+                        </div>
+                    {/snippet}
+                    {#snippet text()}
+                        <div>
+                            :{match.code}:
+                        </div>
+                    {/snippet}
+                </MenuItem>
+            {/snippet}
+        </VirtualList>
+    </Menu>
+</div>
+
+<svelte:body onkeydown={onKeyDown} />
+
+<style lang="scss">
+    :global(.picker .menu) {
+        box-shadow: none;
+        position: relative;
+        width: 100%;
+        height: 100%;
+        @include z-index("footer-overlay");
+    }
+
+    .picker {
+        position: absolute;
+        width: 100%;
+        max-height: calc(var(--vh, 1vh) * 50);
+        overflow: auto;
+        box-shadow: var(--menu-inverted-sh);
+        left: 0;
+    }
+    .emoji {
+        @include font(book, normal, fs-160);
+        margin-right: $sp4;
+    }
+
+    .custom-emoji {
+        width: 1em;
+        height: 1em;
+        object-fit: contain;
+        vertical-align: middle;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/EmojiPicker.svelte b/frontend/app/src/desktop/features/chats/core/EmojiPicker.svelte
new file mode 100644
index 0000000000..ab56770aa0
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/EmojiPicker.svelte
@@ -0,0 +1,174 @@
+<script lang="ts">
+    import "emoji-picker-element";
+    import type {
+        EmojiClickEvent,
+        SkinTone,
+        SkinToneChangeEvent,
+    } from "emoji-picker-element/shared";
+    import {
+        emojiGroupNames,
+        PremiumItem,
+        premiumItemsStore,
+        premiumPrices,
+        type CustomEmoji,
+        type SelectedEmoji,
+    } from "@client";
+    import { onMount, tick } from "svelte";
+    import { currentTheme } from "@src/theme/themes";
+    import PremiumItemPayment from "@src/desktop/shared/PremiumItemPayment.svelte";
+
+    interface Props {
+        mode?: "message" | "reaction" | "thread";
+        onEmojiSelected: (emoji: SelectedEmoji) => void;
+        onSkintoneChanged?: (tone: SkinTone) => void;
+        customEmojis?: Map<string, CustomEmoji>;
+    }
+
+    let { mode = "message", onEmojiSelected, onSkintoneChanged, customEmojis }: Props = $props();
+    let showPayGate = $state<CustomEmoji>();
+
+    function lockedCategoryCss(groupId: number, price: number) {
+        return `
+            .category:not(.gone)#menu-label-${groupId} {
+                position: relative;
+            }
+
+            .category:not(.gone)#menu-label-${groupId}::after {
+                content: "(${price.toLocaleString()} CHIT)";
+                font-size: 10px;
+                height: 14px;
+                background-image: url(/assets/locked_solid.svg);
+                background-repeat: no-repeat;
+                position: absolute;
+                margin-left: 5px;
+                padding-left: 18px;
+                padding-top: 2px;
+                color: var(--txt-light);
+                vertical-align: middle;
+                top: 8px;
+            }
+
+            .category:not(.gone)#menu-label-${groupId} + .emoji-menu[aria-labelledby="menu-label-${groupId}"] {
+                opacity: 0.5;
+            }
+        `;
+    }
+
+    function createCustomCss(): string {
+        const rules: string[] = [];
+        if (!$premiumItemsStore.has(PremiumItem.BotEmojis)) {
+            rules.push(lockedCategoryCss(0, premiumPrices[PremiumItem.BotEmojis]));
+        }
+        if (!$premiumItemsStore.has(PremiumItem.PopularEmojis)) {
+            rules.push(lockedCategoryCss(1, premiumPrices[PremiumItem.PopularEmojis]));
+        }
+        rules.push(".indicator { transition: none; }");
+        return rules.join("\n");
+    }
+
+    onMount(() => {
+        const emojiPicker = document.querySelector("emoji-picker");
+
+        if (emojiPicker && customEmojis) {
+            emojiPicker.customEmoji = [...customEmojis.entries()].map(([_, emoji]) => {
+                return {
+                    name: emoji.code,
+                    shortcodes: [emoji.code],
+                    url: emoji.url,
+                    category: emojiGroupNames[emoji.premiumItem],
+                };
+            });
+        }
+        emojiPicker?.addEventListener("emoji-click", onClick);
+        emojiPicker?.addEventListener("skin-tone-change", skinToneChanged);
+
+        const style = document.createElement("style");
+        style.textContent = createCustomCss();
+        emojiPicker?.shadowRoot?.appendChild(style);
+
+        tick().then(() => {
+            emojiPicker?.shadowRoot
+                ?.querySelector<HTMLButtonElement>("button.nav-button[data-group-id='0']")
+                ?.click();
+        });
+
+        return () => {
+            emojiPicker?.removeEventListener("emoji-click", onClick);
+        };
+    });
+
+    function skinToneChanged(ev: SkinToneChangeEvent) {
+        onSkintoneChanged?.(ev.detail.skinTone);
+    }
+
+    function onClick(ev: EmojiClickEvent) {
+        if (ev.detail.unicode) {
+            onEmojiSelected({ kind: "native", unicode: ev.detail.unicode });
+        } else if (ev.detail.name !== undefined) {
+            const custom = customEmojis?.get(ev.detail.name);
+            if (custom !== undefined) {
+                if (!$premiumItemsStore.has(custom.premiumItem)) {
+                    showPayGate = custom;
+                } else {
+                    onEmojiSelected(custom);
+                }
+            }
+        }
+    }
+
+    function paidForItem() {
+        if (showPayGate) {
+            onEmojiSelected(showPayGate);
+            showPayGate = undefined;
+        }
+    }
+</script>
+
+{#if showPayGate}
+    <PremiumItemPayment
+        item={showPayGate.premiumItem}
+        onSuccess={paidForItem}
+        onCancel={() => (showPayGate = undefined)}></PremiumItemPayment>
+{/if}
+
+<emoji-picker
+    class:message={mode === "message"}
+    class:reaction={mode === "reaction"}
+    class:thread={mode === "thread"}
+    class:dark={$currentTheme.mode === "dark"}
+    class:light={$currentTheme.mode === "light"}></emoji-picker>
+
+<style lang="scss">
+    :global(.emoji-overlay .modal-content) {
+        background-color: var(--menu-bg);
+    }
+
+    emoji-picker {
+        width: 100%;
+        --emoji-padding: 0.3rem;
+        --emoji-size: 1.8rem;
+        --background: transparent;
+
+        --border-size: 0;
+        --border-color: var(--bd);
+        --input-font-color: var(--txt);
+        --input-border-color: var(--bd);
+        --input-padding: 8px 16px;
+
+        --num-columns: 12 !important;
+
+        @include size-below(sm) {
+            --num-columns: 11 !important;
+        }
+        @include size-below(xs) {
+            --num-columns: 9 !important;
+        }
+        @include size-below(xxs) {
+            --num-columns: 7 !important;
+        }
+
+        &.thread {
+            --num-columns: 10 !important;
+        }
+    }
+</style>
diff --git a/frontend/app/src/components/home/EmojiPickerWrapper.svelte b/frontend/app/src/desktop/features/chats/core/EmojiPickerWrapper.svelte
similarity index 100%
rename from frontend/app/src/components/home/EmojiPickerWrapper.svelte
rename to frontend/app/src/desktop/features/chats/core/EmojiPickerWrapper.svelte
diff --git a/frontend/app/src/components/home/EphemeralNote.svelte b/frontend/app/src/desktop/features/chats/core/EphemeralNote.svelte
similarity index 82%
rename from frontend/app/src/components/home/EphemeralNote.svelte
rename to frontend/app/src/desktop/features/chats/core/EphemeralNote.svelte
index 8e22b5e519..ba1a71122b 100644
--- a/frontend/app/src/components/home/EphemeralNote.svelte
+++ b/frontend/app/src/desktop/features/chats/core/EphemeralNote.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { i18nKey } from "@src/i18n/i18n";
-    import Translatable from "../Translatable.svelte";
-    import InfoIcon from "../InfoIcon.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import InfoIcon from "@src/desktop/shared/InfoIcon.svelte";
 </script>
 
 <div class="ephemeral">
diff --git a/frontend/app/src/components/Fab.svelte b/frontend/app/src/desktop/features/chats/core/Fab.svelte
similarity index 100%
rename from frontend/app/src/components/Fab.svelte
rename to frontend/app/src/desktop/features/chats/core/Fab.svelte
diff --git a/frontend/app/src/desktop/features/chats/core/Footer.svelte b/frontend/app/src/desktop/features/chats/core/Footer.svelte
new file mode 100644
index 0000000000..2312f8025f
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/Footer.svelte
@@ -0,0 +1,300 @@
+<script lang="ts">
+    import { fileFromDataTransferItems } from "@src/utils/datatransfer";
+    import {
+        iconSize,
+        messageContextsEqual,
+        subscribe,
+        type AttachmentContent,
+        type ChatSummary,
+        type CreatedUser,
+        type EnhancedReplyContext,
+        type EphemeralMessageEvent,
+        type EventWrapper,
+        type Message,
+        type MessageAction,
+        type MessageContext,
+        type MultiUserChat,
+        type OpenChat,
+        type SelectedEmoji,
+        type User,
+    } from "@client";
+    import { getContext, onMount, tick } from "svelte";
+    import { _ } from "svelte-i18n";
+    import Close from "svelte-material-icons/Close.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import EphemeralMessage from "@src/desktop/features/bots/EphemeralMessage.svelte";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import DraftMediaMessage from "./DraftMediaMessage.svelte";
+    import EmojiPicker from "./EmojiPickerWrapper.svelte";
+    import MessageEntry from "./MessageEntry.svelte";
+    import ReplyingTo from "./ReplyingTo.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        blocked: boolean;
+        preview: boolean;
+        lapsed: boolean;
+        joining: MultiUserChat | undefined;
+        chat: ChatSummary;
+        attachment: AttachmentContent | undefined;
+        editingEvent: EventWrapper<Message> | undefined;
+        replyingTo: EnhancedReplyContext | undefined;
+        textContent: string | undefined;
+        user: CreatedUser;
+        mode?: "thread" | "message";
+        externalContent?: boolean;
+        messageContext: MessageContext;
+        onFileSelected: (content: AttachmentContent) => void;
+        onCancelReply: () => void;
+        onSetTextContent: (txt?: string) => void;
+        onStartTyping: () => void;
+        onStopTyping: () => void;
+        onCancelEdit: () => void;
+        onSendMessage: (args: [string | undefined, User[], boolean]) => void;
+        onClearAttachment: () => void;
+        onTokenTransfer: (args: { ledger?: string; amount?: bigint }) => void;
+        onCreatePrizeMessage?: () => void;
+        onCreateP2PSwapMessage: () => void;
+        onCreatePoll: () => void;
+        onAttachGif: (search: string) => void;
+        onMakeMeme: () => void;
+    }
+
+    let {
+        blocked,
+        preview,
+        lapsed,
+        joining,
+        chat,
+        attachment,
+        editingEvent,
+        replyingTo,
+        textContent,
+        user,
+        mode = "message",
+        externalContent = false,
+        messageContext,
+        onFileSelected,
+        onCancelReply,
+        onSetTextContent,
+        onCancelEdit,
+        onStartTyping,
+        onStopTyping,
+        onSendMessage,
+        onClearAttachment,
+        onTokenTransfer,
+        onCreatePrizeMessage,
+        onCreateP2PSwapMessage,
+        onCreatePoll,
+        onAttachGif,
+        onMakeMeme,
+    }: Props = $props();
+
+    let ephemeralMessageEvent = $state<EphemeralMessageEvent>();
+    let messageAction: MessageAction = $state(undefined);
+    //@ts-ignore
+    let messageEntry: MessageEntry;
+
+    onMount(() => {
+        const unsubs = [subscribe("ephemeralMessage", onEphemeralMessage)];
+        return () => {
+            unsubs.forEach((u) => u());
+        };
+    });
+
+    async function onEphemeralMessage(ev: EphemeralMessageEvent) {
+        if (ev.scope.kind !== "chat_scope") return;
+        if (!messageContextsEqual(messageContext, ev.scope)) return;
+        if (ephemeralMessageEvent !== undefined) {
+            ephemeralMessageEvent = undefined;
+            await tick();
+        }
+        ephemeralMessageEvent = ev;
+    }
+
+    function messageContentFromDataTransferItemList(items: DataTransferItem[]) {
+        const file = fileFromDataTransferItems(items);
+        if (file) {
+            client
+                .messageContentFromFile(file)
+                .then((content) => {
+                    let permission = client.contentTypeToPermission(content.kind);
+                    if (client.canSendMessage(chat.id, mode, permission)) {
+                        onFileSelected(content);
+                    } else {
+                        const errorMessage = i18nKey("permissions.notPermitted", {
+                            permission: $_(`permissions.threadPermissions.${permission}`),
+                        });
+                        toastStore.showFailureToast(errorMessage);
+                    }
+                })
+                .catch((err) => toastStore.showFailureToast(i18nKey(err)));
+        }
+    }
+
+    function onDataTransfer(data: DataTransfer): void {
+        messageContentFromDataTransferItemList([...data.items]);
+    }
+
+    function onPaste(e: ClipboardEvent) {
+        if (e.clipboardData) {
+            onDataTransfer(e.clipboardData);
+        }
+    }
+
+    function emojiSelected(selected: SelectedEmoji) {
+        messageEntry?.insertEmoji(selected);
+    }
+
+    $effect(() => {
+        if (
+            ephemeralMessageEvent !== undefined &&
+            ephemeralMessageEvent.scope.kind === "chat_scope" &&
+            !messageContextsEqual(messageContext, ephemeralMessageEvent.scope)
+        ) {
+            ephemeralMessageEvent = undefined;
+        }
+    });
+</script>
+
+{#if messageAction === "emoji"}
+    <div class={`emoji-overlay ${mode}`}>
+        <ModalContent hideFooter hideHeader fill>
+            {#snippet body()}
+                <span>
+                    <div class="emoji-header">
+                        <h4><Translatable resourceKey={i18nKey("pickEmoji")} /></h4>
+                        <span title={$_("close")} class="close-emoji">
+                            <HoverIcon onclick={() => (messageAction = undefined)}>
+                                <Close size={$iconSize} color={"var(--icon-txt)"} />
+                            </HoverIcon>
+                        </span>
+                    </div>
+                    <EmojiPicker onEmojiSelected={emojiSelected} {mode} supportCustom={true} />
+                </span>
+            {/snippet}
+            {#snippet footer()}
+                <span></span>
+            {/snippet}
+        </ModalContent>
+    </div>
+{/if}
+
+<div class="footer">
+    <div class="footer-overlay">
+        {#if ephemeralMessageEvent !== undefined}
+            <EphemeralMessage
+                onClose={() => (ephemeralMessageEvent = undefined)}
+                event={ephemeralMessageEvent} />
+        {/if}
+        {#if editingEvent === undefined && (replyingTo || attachment !== undefined)}
+            <div class="draft-container">
+                {#if replyingTo}
+                    <ReplyingTo readonly {onCancelReply} {user} {replyingTo} />
+                {/if}
+                {#if attachment !== undefined}
+                    <DraftMediaMessage content={attachment} />
+                {/if}
+            </div>
+        {/if}
+    </div>
+    <MessageEntry
+        bind:this={messageEntry}
+        bind:messageAction
+        {onPaste}
+        {externalContent}
+        {mode}
+        {preview}
+        {lapsed}
+        {blocked}
+        {joining}
+        {attachment}
+        {editingEvent}
+        {replyingTo}
+        {textContent}
+        {chat}
+        {messageContext}
+        {onSendMessage}
+        {onCancelEdit}
+        {onSetTextContent}
+        {onStartTyping}
+        {onStopTyping}
+        {onCreatePoll}
+        {onTokenTransfer}
+        {onCreatePrizeMessage}
+        {onCreateP2PSwapMessage}
+        {onAttachGif}
+        {onMakeMeme}
+        {onClearAttachment}
+        {onFileSelected} />
+</div>
+
+<style lang="scss">
+    :global(body.witch .middle .footer) {
+        @include z-index("footer");
+    }
+
+    :global(.emoji-overlay .modal-content) {
+        border: var(--bw) solid var(--bd);
+    }
+
+    :global(.emoji-overlay.thread .modal-content) {
+        width: 100%;
+        border-radius: var(--modal-rd) var(--modal-rd) 0 0;
+    }
+
+    .footer {
+        position: relative;
+        flex: 0 0 toRem(60);
+        padding-bottom: env(safe-area-inset-bottom);
+    }
+
+    .footer-overlay {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-content: center;
+        align-items: flex-start;
+        background-color: var(--entry-bg);
+    }
+
+    .emoji-overlay {
+        position: absolute;
+        bottom: toRem(70);
+        left: toRem(10);
+        width: 100%;
+        @include z-index("footer-overlay");
+
+        @include mobile() {
+            left: 0;
+            bottom: toRem(60);
+        }
+
+        .emoji-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: $sp3 $sp4;
+            background-color: var(--section-bg);
+
+            .close-emoji {
+                flex: 0 0 20px;
+            }
+        }
+
+        &.thread {
+            bottom: toRem(60);
+            left: 0;
+        }
+    }
+
+    .draft-container {
+        max-width: 80%;
+        padding: 0 $sp4 $sp4 $sp4;
+    }
+</style>
diff --git a/frontend/app/src/components/home/GenericPreview.svelte b/frontend/app/src/desktop/features/chats/core/GenericPreview.svelte
similarity index 100%
rename from frontend/app/src/components/home/GenericPreview.svelte
rename to frontend/app/src/desktop/features/chats/core/GenericPreview.svelte
diff --git a/frontend/app/src/components/home/GiphySelector.svelte b/frontend/app/src/desktop/features/chats/core/GiphySelector.svelte
similarity index 96%
rename from frontend/app/src/components/home/GiphySelector.svelte
rename to frontend/app/src/desktop/features/chats/core/GiphySelector.svelte
index ee17cada99..45ffeb6274 100644
--- a/frontend/app/src/components/home/GiphySelector.svelte
+++ b/frontend/app/src/desktop/features/chats/core/GiphySelector.svelte
@@ -5,14 +5,14 @@
         type KlipyObject,
         type KlipySearchResponse,
     } from "@client";
-    import { i18nKey } from "../../i18n/i18n";
-    import Button from "../Button.svelte";
-    import ButtonGroup from "../ButtonGroup.svelte";
-    import Input from "../Input.svelte";
-    import Link from "../Link.svelte";
-    import ModalContent from "../ModalContent.svelte";
-    import Overlay from "../Overlay.svelte";
-    import Translatable from "../Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import Input from "@src/desktop/shared/Input.svelte";
+    import Link from "@src/desktop/shared/Link.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
 
     type KeyedKlipyObject = KlipyObject & { key: string };
 
diff --git a/frontend/app/src/desktop/features/chats/core/InitialChatMessage.svelte b/frontend/app/src/desktop/features/chats/core/InitialChatMessage.svelte
new file mode 100644
index 0000000000..044f215d21
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/InitialChatMessage.svelte
@@ -0,0 +1,136 @@
+<script lang="ts">
+    import {
+        allUsersStore,
+        AvatarSize,
+        botState,
+        type ChatSummary,
+        type CommandDefinition,
+        directChatBotsStore,
+        emptyGrantedBotPermissions,
+        type GrantedBotPermissions,
+        isProposalGroupStore,
+        type OpenChat,
+        type ResourceKey,
+        selectedCommunitySummaryStore,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Avatar from "@src/desktop/shared/Avatar.svelte";
+    import BotCommands from "@src/desktop/features/bots/BotCommands.svelte";
+    import WithVerifiedBadge from "@src/desktop/ui/icons/WithVerifiedBadge.svelte";
+    import ProposalBot from "@src/ui/ProposalBot.svelte";
+    import Robot from "@src/ui/Robot.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    type BotState = {
+        commands: CommandDefinition[];
+        grantedPermissions: GrantedBotPermissions;
+    };
+
+    type State = {
+        title: ResourceKey;
+        verified: boolean;
+        description?: string;
+        avatarUrl: string;
+        subtitle?: ResourceKey;
+        bot?: BotState;
+    };
+
+    interface Props {
+        chat: ChatSummary;
+    }
+
+    let { chat }: Props = $props();
+
+    let state = $derived.by<State>(() => {
+        switch (chat.kind) {
+            case "direct_chat":
+                const them = $allUsersStore.get(chat.them.userId);
+                const s: State = {
+                    title: i18nKey(client.displayName(them)),
+                    verified: false,
+                    avatarUrl: client.userAvatarUrl($allUsersStore.get(chat.them.userId)),
+                };
+                const bot = botState.externalBots.get(chat.them.userId);
+                const perm =
+                    $directChatBotsStore.get(chat.them.userId) ?? emptyGrantedBotPermissions();
+                return bot === undefined
+                    ? s
+                    : {
+                          ...s,
+                          description: bot.definition.description,
+                          bot: {
+                              commands: bot.definition.commands,
+                              grantedPermissions: perm,
+                          },
+                      };
+            default:
+                return {
+                    title: i18nKey("group.welcome", { groupName: chat.name }),
+                    verified: chat.kind === "group_chat" ? chat.verified : false,
+                    description: chat.description,
+                    avatarUrl: client.groupAvatarUrl(chat, $selectedCommunitySummaryStore),
+                    subtitle: i18nKey(
+                        chat.public ? "thisIsPublicGroupWithN" : "thisIsPrivateGroupWithN",
+                        { number: chat.memberCount },
+                        chat.level,
+                        true,
+                    ),
+                    bot: undefined,
+                };
+        }
+    });
+</script>
+
+<div class="container">
+    {#if $isProposalGroupStore}
+        <ProposalBot />
+    {:else if chat.kind === "direct_chat" && client.isOpenChatBot(chat.them.userId)}
+        <Robot />
+    {:else}
+        <WithVerifiedBadge verified={state.verified} size={"small"}>
+            <h4 class="welcome">
+                <Translatable resourceKey={state.title} />
+            </h4>
+        </WithVerifiedBadge>
+        <div class="pop">
+            <Avatar url={state.avatarUrl} size={AvatarSize.Large} />
+        </div>
+        {#if state.description && state.description.length > 0}
+            <Markdown inline={false} text={state.description} />
+        {/if}
+        {#if state.bot !== undefined}
+            <BotCommands centered {...state.bot} />
+        {/if}
+        {#if state.subtitle}
+            <Translatable resourceKey={state.subtitle} />
+        {/if}
+    {/if}
+</div>
+
+<style lang="scss">
+    .container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: $sp4;
+        margin: $sp4 auto;
+        text-align: center;
+        background-color: var(--timeline-bg);
+        color: var(--timeline-txt);
+        @include font(book, normal, fs-70);
+        max-width: toRem(400);
+    }
+
+    .welcome {
+        @include font(bold, normal, fs-120);
+        color: var(--txt);
+    }
+
+    .pop {
+        @include pop(400ms);
+    }
+</style>
diff --git a/frontend/app/src/components/home/IntersectionObserver.svelte b/frontend/app/src/desktop/features/chats/core/IntersectionObserver.svelte
similarity index 100%
rename from frontend/app/src/components/home/IntersectionObserver.svelte
rename to frontend/app/src/desktop/features/chats/core/IntersectionObserver.svelte
diff --git a/frontend/app/src/components/home/InviteUsersWithLink.svelte b/frontend/app/src/desktop/features/chats/core/InviteUsersWithLink.svelte
similarity index 93%
rename from frontend/app/src/components/home/InviteUsersWithLink.svelte
rename to frontend/app/src/desktop/features/chats/core/InviteUsersWithLink.svelte
index 66103db5b9..abe89eb258 100644
--- a/frontend/app/src/components/home/InviteUsersWithLink.svelte
+++ b/frontend/app/src/desktop/features/chats/core/InviteUsersWithLink.svelte
@@ -16,16 +16,16 @@
     import CopyIcon from "svelte-material-icons/ContentCopy.svelte";
     import RefreshIcon from "svelte-material-icons/Refresh.svelte";
     import ShareIcon from "svelte-material-icons/ShareVariant.svelte";
-    import { i18nKey, interpolate } from "../../i18n/i18n";
-    import { toastStore } from "../../stores/toast";
-    import { canShare, shareLink } from "../../utils/share";
-    import AreYouSure from "../AreYouSure.svelte";
-    import ErrorMessage from "../ErrorMessage.svelte";
-    import Link from "../Link.svelte";
-    import QRCode from "../QRCode.svelte";
-    import Toggle from "../Toggle.svelte";
-    import Translatable from "../Translatable.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import { canShare, shareLink } from "@src/utils/share";
+    import AreYouSure from "@src/desktop/shared/AreYouSure.svelte";
+    import ErrorMessage from "@src/desktop/shared/ErrorMessage.svelte";
+    import Link from "@src/desktop/shared/Link.svelte";
+    import QRCode from "@src/desktop/shared/QRCode.svelte";
+    import Toggle from "@src/desktop/shared/Toggle.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
 
     interface Props {
         container: MultiUserChat | CommunitySummary;
diff --git a/frontend/app/src/components/home/LinkPreviews.svelte b/frontend/app/src/desktop/features/chats/core/LinkPreviews.svelte
similarity index 98%
rename from frontend/app/src/components/home/LinkPreviews.svelte
rename to frontend/app/src/desktop/features/chats/core/LinkPreviews.svelte
index c9cb31d8e1..33f205d14c 100644
--- a/frontend/app/src/components/home/LinkPreviews.svelte
+++ b/frontend/app/src/desktop/features/chats/core/LinkPreviews.svelte
@@ -2,7 +2,7 @@
     import { iconSize } from "@client";
     import type { OgPreview, RehydratedMessagePreview } from "@shared";
     import CloseIcon from "svelte-material-icons/Close.svelte";
-    import { rtlStore } from "../../stores/rtl";
+    import { rtlStore } from "@src/stores/rtl";
     import GenericPreviewComponent from "./GenericPreview.svelte";
     import MessagePreviewComponent from "./MessagePreview.svelte";
 
diff --git a/frontend/app/src/desktop/features/chats/core/MemeBuilder.svelte b/frontend/app/src/desktop/features/chats/core/MemeBuilder.svelte
new file mode 100644
index 0000000000..4348295da1
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/MemeBuilder.svelte
@@ -0,0 +1,135 @@
+<script lang="ts">
+    import {
+        iconSize,
+        mobileWidth,
+        type MemeFighterContent as MemeFighterContentType,
+    } from "@client";
+    import { tick } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { currentTheme } from "@src/theme/themes";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import MemeFighter from "@src/desktop/ui/icons/MemeFighter.svelte";
+
+    interface Props {
+        open: boolean;
+        width?: number;
+        height?: number;
+        onSend: (content: MemeFighterContentType) => void;
+    }
+
+    let { open = $bindable(), width = 500, height = 400, onSend }: Props = $props();
+
+    let memeUrl = $state(undefined as string | undefined);
+    let iframe: HTMLIFrameElement;
+    let img: HTMLImageElement | undefined = $state();
+    let placeholder = "/assets/memefighter.svg";
+
+    export function reset() {
+        memeUrl = undefined;
+        tick().then(async () => {
+            if (iframe) {
+                const { start } = await import("@memefighter/maker-core");
+                start({
+                    iframe,
+                    styleVariables,
+                    skipInsertButton: true,
+                }).then(onMemeCreated);
+            }
+        });
+    }
+
+    const styleVariables = {
+        "--background-color": "#1b1c21",
+        "--foreground-color": $currentTheme.txt,
+        "--button-color": $currentTheme.button.bg,
+    };
+
+    function send() {
+        if (memeUrl !== undefined && img !== undefined) {
+            const rect = img.getBoundingClientRect();
+            const content: MemeFighterContentType = {
+                kind: "meme_fighter_content",
+                url: memeUrl,
+                width: rect.width,
+                height: rect.height,
+            };
+            onSend(content);
+            open = false;
+        }
+    }
+
+    function close() {
+        open = false;
+    }
+
+    function onMemeCreated(url: string) {
+        memeUrl = url;
+    }
+
+    function error() {
+        if (img) {
+            img.src = placeholder;
+        }
+    }
+</script>
+
+{#if open}
+    <Overlay dismissible onClose={close}>
+        <ModalContent fill closeIcon onClose={close}>
+            {#snippet header()}
+                <div class="header">
+                    <MemeFighter size={$iconSize} color={"var(--icon-txt)"} />
+                    <div class="title">Meme Fighter</div>
+                </div>
+            {/snippet}
+            {#snippet body()}
+                <div class="meme-body">
+                    {#if memeUrl}
+                        <img bind:this={img} class="meme" src={memeUrl} onerror={error} />
+                    {:else}
+                        <iframe
+                            bind:this={iframe}
+                            {width}
+                            {height}
+                            style="border: none; max-width: 100%;"></iframe>
+                    {/if}
+                </div>
+            {/snippet}
+            {#snippet footer()}
+                <span class="footer">
+                    <ButtonGroup align={$mobileWidth ? "center" : "end"}>
+                        <Button tiny secondary onClick={reset}
+                            ><Translatable resourceKey={i18nKey("reset")} /></Button>
+                        <Button tiny secondary onClick={close}
+                            ><Translatable resourceKey={i18nKey("cancel")} /></Button>
+                        <Button tiny disabled={memeUrl === undefined} onClick={send}
+                            ><Translatable resourceKey={i18nKey("send")} /></Button>
+                    </ButtonGroup>
+                </span>
+            {/snippet}
+        </ModalContent>
+    </Overlay>
+{/if}
+
+<style lang="scss">
+    .header {
+        display: flex;
+        gap: $sp4;
+        align-items: center;
+    }
+
+    .meme {
+        width: 100%;
+    }
+
+    .meme-body {
+        min-height: 400px;
+        background-color: #1b1c21;
+        padding: $sp4 $sp5;
+        text-align: center;
+    }
+</style>
diff --git a/frontend/app/src/components/home/MessageActions.svelte b/frontend/app/src/desktop/features/chats/core/MessageActions.svelte
similarity index 97%
rename from frontend/app/src/components/home/MessageActions.svelte
rename to frontend/app/src/desktop/features/chats/core/MessageActions.svelte
index 48267432a0..b8435f69a4 100644
--- a/frontend/app/src/components/home/MessageActions.svelte
+++ b/frontend/app/src/desktop/features/chats/core/MessageActions.svelte
@@ -13,11 +13,11 @@
     import Poll from "svelte-material-icons/Poll.svelte";
     import StickerEmoji from "svelte-material-icons/StickerEmoji.svelte";
     import SwapIcon from "svelte-material-icons/SwapHorizontal.svelte";
-    import { rtlStore } from "../../stores/rtl";
-    import HoverIcon from "../HoverIcon.svelte";
-    import Bitcoin from "../icons/Bitcoin.svelte";
-    import MemeFighter from "../icons/MemeFighter.svelte";
-    import FileAttacher from "./FileAttacher.svelte";
+    import { rtlStore } from "@src/stores/rtl";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import Bitcoin from "@src/desktop/ui/icons/Bitcoin.svelte";
+    import MemeFighter from "@src/desktop/ui/icons/MemeFighter.svelte";
+    import FileAttacher from "@src/desktop/features/chats/core/content/FileAttacher.svelte";
     import Smiley from "./Smiley.svelte";
 
     interface Props {
diff --git a/frontend/app/src/desktop/features/chats/core/MessageEntry.svelte b/frontend/app/src/desktop/features/chats/core/MessageEntry.svelte
new file mode 100644
index 0000000000..d53b28b69c
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/MessageEntry.svelte
@@ -0,0 +1,673 @@
+<script lang="ts">
+    import RichTextEditor from "@src/ui/RichTextEditor.svelte";
+    import { trackedEffect } from "@src/utils/effects.svelte";
+    import type {
+        AttachmentContent,
+        BotActionScope,
+        ChatSummary,
+        EnhancedReplyContext,
+        EventWrapper,
+        ExternalBot,
+        Message,
+        MessageAction,
+        MessageContext,
+        MultiUserChat,
+        OpenChat,
+        SelectedEmoji,
+        User,
+    } from "@client";
+    import {
+        allUsersStore,
+        anonUserStore,
+        botState,
+        chatIdentifiersEqual,
+        currentUserIdStore,
+        directMessageCommandInstance,
+        iconSize,
+        localUpdates,
+        messageContextsEqual,
+        random64,
+        screenWidth,
+        ScreenWidth,
+        selectedChatMembersStore,
+        selectedCommunitySummaryStore,
+        selectedCommunityUserGroupsStore,
+        throttleDeadline,
+        userGroupMentionRegex,
+        userIdMentionRegex,
+    } from "@client";
+    import { getContext, tick } from "svelte";
+    import { _ } from "svelte-i18n";
+    import Alert from "svelte-material-icons/Alert.svelte";
+    import Close from "svelte-material-icons/Close.svelte";
+    import ContentSaveEditOutline from "svelte-material-icons/ContentSaveMoveOutline.svelte";
+    import Send from "svelte-material-icons/Send.svelte";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import { enterSend } from "@src/stores/settings";
+    import { snowing } from "@src/stores/snow";
+    import AlertBoxModal from "./AlertBoxModal.svelte";
+    import CommandBuilder from "@src/desktop/features/bots/CommandInstanceBuilder.svelte";
+    import CommandSelector from "@src/desktop/features/bots/CommandSelector.svelte";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import Progress from "@src/desktop/shared/Progress.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import AudioAttacher from "@src/desktop/features/chats/core/content/AudioAttacher.svelte";
+    import EmojiAutocompleter from "./EmojiAutocompleter.svelte";
+    import MentionPicker from "@src/desktop/shared/MentionPicker.svelte";
+    import MessageActions from "./MessageActions.svelte";
+    import PreviewFooter from "./PreviewFooter.svelte";
+    import ThrottleCountdown from "./ThrottleCountdown.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        chat: ChatSummary;
+        blocked: boolean;
+        preview: boolean;
+        lapsed: boolean;
+        messageAction?: MessageAction;
+        joining: MultiUserChat | undefined;
+        attachment: AttachmentContent | undefined;
+        editingEvent: EventWrapper<Message> | undefined;
+        replyingTo: EnhancedReplyContext | undefined;
+        textContent: string | undefined;
+        mode?: "thread" | "message";
+        externalContent: boolean;
+        messageContext: MessageContext;
+        onFileSelected: (content: AttachmentContent) => void;
+        onPaste: (e: ClipboardEvent) => void;
+        onSetTextContent: (txt?: string) => void;
+        onStartTyping: () => void;
+        onStopTyping: () => void;
+        onCancelEdit: () => void;
+        onSendMessage: (args: [string | undefined, User[], boolean]) => void;
+        onClearAttachment: () => void;
+        onTokenTransfer: (args: { ledger?: string; amount?: bigint }) => void;
+        onCreatePrizeMessage?: () => void;
+        onCreateP2PSwapMessage: () => void;
+        onCreatePoll: () => void;
+        onAttachGif: (search: string) => void;
+        onMakeMeme: () => void;
+    }
+
+    let {
+        chat,
+        blocked,
+        preview,
+        lapsed,
+        messageAction = $bindable(undefined),
+        joining,
+        attachment,
+        editingEvent,
+        replyingTo,
+        textContent,
+        mode = "message",
+        externalContent,
+        messageContext,
+        onFileSelected,
+        onPaste,
+        onSetTextContent,
+        onStartTyping,
+        onStopTyping,
+        onCancelEdit,
+        onSendMessage,
+        onClearAttachment,
+        onTokenTransfer,
+        onCreatePrizeMessage,
+        onCreateP2PSwapMessage,
+        onCreatePoll,
+        onAttachGif,
+        onMakeMeme,
+    }: Props = $props();
+
+    const USER_TYPING_EVENT_MIN_INTERVAL_MS = 1000; // 1 second
+    const MARK_TYPING_STOPPED_INTERVAL_MS = 5000; // 5 seconds
+
+    let editor = $state<RichTextEditor>();
+    let editorEmpty = $state(true);
+
+    // let inp: HTMLDivElement | undefined = $state();
+    let audioMimeType = client.audioRecordingMimeType();
+    let recording: boolean = $state(false);
+    let percentRecorded: number = $state(0);
+    let previousEditingEvent: EventWrapper<Message> | undefined = $state();
+    let lastTypingUpdate: number = 0;
+    let typingTimer: number | undefined = undefined;
+    let audioSupported: boolean = $state("mediaDevices" in navigator);
+    let showCommandSelector: boolean = $state(false);
+    let messageEntryHeight: number = $state(0);
+    let messageActions: MessageActions | undefined = $state();
+    let previousChatId = $state(chat.id);
+    let containsMarkdown = $state(false);
+    let showDirectBotChatWarning = $state(false);
+    let commandSent = false;
+
+    // Update this to force a new textbox instance to be created
+    let textboxId = $state(Symbol());
+
+    export function insertEmoji(emoji: SelectedEmoji) {
+        editor?.insertEmoji(emoji);
+    }
+
+    function onInput() {
+        const inputContent = editor?.getMarkdown() ?? "";
+        onSetTextContent(inputContent.trim().length === 0 ? undefined : inputContent);
+        triggerCommandSelector(inputContent);
+        triggerTypingTimer();
+        containsMarkdown = detectMarkdown(inputContent);
+    }
+
+    function triggerCommandSelector(inputContent: string | null): void {
+        const commandMatch = inputContent?.match(/^\/.*/);
+        if (commandMatch) {
+            showCommandSelector = true;
+            botState.prefix = commandMatch[0];
+        } else {
+            showCommandSelector = false;
+            botState.cancel();
+        }
+    }
+
+    function cancelCommandSelector(sent: boolean) {
+        commandSent = sent;
+        showCommandSelector = false;
+        botState.cancel();
+        if (sent) {
+            onSetTextContent();
+        }
+    }
+
+    function triggerTypingTimer() {
+        requestAnimationFrame(() => {
+            const now = Date.now();
+            if (now - lastTypingUpdate > USER_TYPING_EVENT_MIN_INTERVAL_MS) {
+                lastTypingUpdate = now;
+                onStartTyping();
+            }
+            if (typingTimer !== undefined) {
+                window.clearTimeout(typingTimer);
+            }
+
+            typingTimer = window.setTimeout(onStopTyping, MARK_TYPING_STOPPED_INTERVAL_MS);
+        });
+    }
+
+    function sendADirectBotMessage(bot: ExternalBot) {
+        const txt = editor?.getMarkdown() ?? "";
+        const userMessageId = random64();
+        const botMessageId = random64();
+
+        const commandInstance = directMessageCommandInstance(bot, txt);
+        if (commandInstance !== undefined) {
+            const scope: BotActionScope = {
+                kind: "chat_scope",
+                chatId: messageContext.chatId,
+                threadRootMessageIndex: messageContext.threadRootMessageIndex,
+                messageId: botMessageId,
+                userMessageId,
+            };
+            client.sendPlaceholderBotMessage(
+                scope,
+                undefined,
+                { kind: "text_content", text: txt },
+                userMessageId,
+                $currentUserIdStore,
+                containsMarkdown,
+            );
+            client.executeBotCommand(scope, commandInstance, true);
+            localUpdates.draftMessages.delete(messageContext);
+            afterSendMessage();
+        } else {
+            showDirectBotChatWarning = true;
+        }
+    }
+
+    function keyDown(e: KeyboardEvent) {
+        if (e.key === "Enter" && !e.shiftKey) {
+            if (directBot) {
+                if (!showCommandSelector && !messageIsEmpty) {
+                    sendADirectBotMessage(directBot);
+                } else if (!commandSent && botState.selectedCommand === undefined) {
+                    showDirectBotChatWarning = true;
+                }
+                e.preventDefault();
+            } else {
+                if (!showCommandSelector && $enterSend) {
+                    e.preventDefault();
+                    sendMessage();
+                }
+            }
+            commandSent = false;
+        }
+    }
+
+    function formatUserMentions(text: string): string {
+        return text.replace(userIdMentionRegex, (match, p1) => {
+            const u = $allUsersStore.get(p1);
+            if (u?.username !== undefined) {
+                const username = u.username;
+                return `@${username}`;
+            }
+            return match;
+        });
+    }
+
+    function formatUserGroupMentions(text: string): string {
+        return text.replace(userGroupMentionRegex, (match, p1) => {
+            const u = $selectedCommunityUserGroupsStore.get(Number(p1));
+            if (u !== undefined) {
+                return `@${u.name}`;
+            }
+            return match;
+        });
+    }
+
+    // replace anything of the form @username with @UserId(xyz) or @UserGroup(abc) where
+    // xyz is the userId or abc is the user group id
+    // if we can't find the user or user group just leave it as is
+    function expandMentions(text: string): [string | undefined, User[], boolean] {
+        let mentionedMap = new Map<string, User>();
+        let expandedText = text.replace(/@(\w+)/g, (match, p1) => {
+            const userOrGroup = client.lookupUserForMention(p1, false);
+            if (userOrGroup !== undefined) {
+                switch (userOrGroup.kind) {
+                    case "user_group":
+                        return `@UserGroup(${userOrGroup.id})`;
+                    case "everyone":
+                        return "@everyone";
+                    default:
+                        mentionedMap.set(userOrGroup.userId, userOrGroup);
+                        return `@UserId(${userOrGroup.userId})`;
+                }
+            } else {
+                return match;
+            }
+        });
+
+        let mentioned = Array.from(mentionedMap, ([_, user]) => user);
+
+        return [expandedText, mentioned, containsMarkdown];
+    }
+
+    function parseCommands(txt: string): boolean {
+        if (/snow|xmas|christmas|noel/.test(txt)) {
+            $snowing = true;
+        }
+        return false;
+    }
+
+    function sendMessage() {
+        if (showCommandSelector || messageIsEmpty) return;
+
+        const txt = editor?.getMarkdown() ?? "";
+
+        if (!parseCommands(txt)) {
+            const [text, mentioned, blockLevelMarkdown] = expandMentions(txt);
+            // Mentions picked from the mention picker are stored as nodes within the editor and
+            // are already in the `@UserId(xyz)` form, so `expandMentions` misses them - collect
+            // them from the editor itself
+            const mentionedUserIds = new Set(mentioned.map((u) => u.userId));
+            for (const user of editor?.getMentionedUsers() ?? []) {
+                if (!mentionedUserIds.has(user.userId)) {
+                    mentioned.push(user);
+                }
+            }
+            onSendMessage([text, mentioned, blockLevelMarkdown]);
+        }
+
+        afterSendMessage();
+    }
+
+    function afterSendMessage() {
+        editor?.clear();
+        onSetTextContent();
+
+        messageActions?.close();
+        onStopTyping();
+
+        // After sending a message we must force a new textbox instance to be created, otherwise on iPhone the
+        // predictive text doesn't notice the text has been cleared so the suggestions don't make sense.
+        textboxId = Symbol();
+        tick().then(() => editor?.focus());
+    }
+
+    function detectMarkdown(text: string | null) {
+        if (!text) return false;
+
+        // a few regexes to detect various block level markdown elements (possibly incomplete)
+        const headerRegex = /^(?:\#{1,6}\s+)/m;
+        const tableRegex = /(?:\|(?:[^\r\n\|\\]|\\.)*\|)+/;
+        const bulletedListRegex = /^(?:\s*[-\*+]\s+)/m;
+        const numberedListRegex = /^(?:\s*\d+\.\s+)/m;
+        const blockquoteRegex = /^(?:\s*>)/m;
+        const codeBlockRegex = /(?:^```[\s\S]*?^```)/m;
+        const regexList = [
+            headerRegex,
+            tableRegex,
+            bulletedListRegex,
+            numberedListRegex,
+            blockquoteRegex,
+            codeBlockRegex,
+        ];
+        const result = regexList.some((regex) => regex.test(text));
+        return result;
+    }
+    let directChatBotId = $derived(client.directChatWithBot(chat));
+    let directBot = $derived(
+        directChatBotId ? botState.externalBots.get(directChatBotId) : undefined,
+    );
+    let messageIsEmpty = $derived(
+        (textContent?.trim() ?? "").length === 0 && attachment === undefined,
+    );
+    let canSendAny = $derived(!$anonUserStore && client.canSendMessage(chat.id, mode));
+    let permittedMessages = $derived(client.permittedMessages(chat.id, mode));
+    let canEnterText = $derived(
+        (permittedMessages.get("text") ?? false) ||
+            editingEvent !== undefined ||
+            attachment !== undefined,
+    );
+
+    let excessiveLinks = $derived(client.extractEnabledLinks(textContent ?? "").length > 5);
+    let frozen = $derived(client.isChatOrCommunityFrozen(chat, $selectedCommunitySummaryStore));
+    $effect(() => {
+        if (editor) {
+            if (editingEvent && editingEvent.index !== previousEditingEvent?.index) {
+                if (editingEvent.event.content.kind === "text_content") {
+                    editor.setContent(
+                        formatUserGroupMentions(
+                            formatUserMentions(
+                                client.stripLinkDisabledMarker(editingEvent.event.content.text),
+                            ),
+                        ),
+                    );
+                } else if ("caption" in editingEvent.event.content) {
+                    editor.setContent(editingEvent.event.content.caption ?? "");
+                }
+                previousEditingEvent = editingEvent;
+                containsMarkdown = detectMarkdown(editor.getMarkdown());
+            } else {
+                const text = textContent ?? "";
+                // Only set the textbox text when required rather than every time, because doing so sets the focus back to
+                // the start of the textbox on some devices.
+                if (editor.getMarkdown() !== text) {
+                    editor.setContent(text);
+                    containsMarkdown = detectMarkdown(text);
+                }
+            }
+        }
+
+        if (editingEvent === undefined) {
+            previousEditingEvent = undefined;
+        }
+    });
+    trackedEffect("clear-message-actions", () => {
+        // If the chat has changed, close the emoji picker or file selector
+        if (!chatIdentifiersEqual(chat.id, previousChatId)) {
+            messageAction = undefined;
+            previousChatId = chat.id;
+        }
+    });
+    trackedEffect("attachment-focus", () => {
+        if (attachment !== undefined || replyingTo !== undefined) {
+            editor?.focus();
+        }
+    });
+    trackedEffect("screen-width-focus", () => {
+        if ($screenWidth === ScreenWidth.Large) {
+            editor?.focus();
+        }
+    });
+    let placeholder = $derived(
+        !canEnterText
+            ? i18nKey("sendTextDisabled")
+            : attachment !== undefined
+              ? i18nKey("enterCaption")
+              : directChatBotId
+                ? i18nKey("bots.direct.placeholder")
+                : i18nKey("enterMessage"),
+    );
+</script>
+
+{#if showDirectBotChatWarning}
+    <AlertBoxModal
+        onClose={() => (showDirectBotChatWarning = false)}
+        title={i18nKey("bots.direct.warningTitle")}
+        warning={i18nKey("bots.direct.warning")} />
+{/if}
+
+{#if botState.selectedCommand && messageContextsEqual(botState.showingBuilder, messageContext)}
+    <CommandBuilder
+        {messageContext}
+        onCommandSent={() => cancelCommandSelector(true)}
+        onCancel={() => cancelCommandSelector(false)}
+        command={botState.selectedCommand} />
+{/if}
+
+{#if showCommandSelector}
+    <CommandSelector
+        selectedBotId={directChatBotId}
+        {messageContext}
+        {mode}
+        onCommandSent={() => cancelCommandSelector(true)}
+        onNoMatches={() => cancelCommandSelector(false)}
+        onCancel={() => cancelCommandSelector(false)} />
+{/if}
+
+<div
+    class="message-entry"
+    class:editing={editingEvent !== undefined}
+    bind:clientHeight={messageEntryHeight}>
+    {#if frozen}
+        <div class="frozen">
+            <Translatable resourceKey={i18nKey("chatFrozen")} />
+        </div>
+    {:else if blocked}
+        <div class="blocked">
+            <Translatable resourceKey={i18nKey("userIsBlocked")} />
+        </div>
+    {:else if (preview || lapsed) && chat.kind !== "direct_chat"}
+        <PreviewFooter {lapsed} {joining} {chat} />
+    {:else if externalContent}
+        <div class="disclaimer">
+            <Alert size={$iconSize} color={"var(--warn"} />
+            <Translatable resourceKey={i18nKey("externalContent.disclaimer")} />
+        </div>
+    {:else if !canSendAny}
+        <div class="disabled">
+            <Translatable
+                resourceKey={i18nKey(
+                    $anonUserStore
+                        ? "sendMessageDisabledAnon"
+                        : mode === "thread"
+                          ? "readOnlyThread"
+                          : "readOnlyChat",
+                )} />
+        </div>
+    {:else if $throttleDeadline > 0}
+        <ThrottleCountdown deadline={$throttleDeadline} />
+    {:else}
+        {#if recording}
+            <div class="recording">
+                <Progress percent={percentRecorded} />
+            </div>
+        {:else if canEnterText}
+            {#key textboxId}
+                <div class="container">
+                    {#if excessiveLinks}
+                        <div class="note">{$_("excessiveLinksNote")}</div>
+                    {/if}
+
+                    <div class="textbox">
+                        <RichTextEditor
+                            bind:this={editor}
+                            bind:empty={editorEmpty}
+                            placeholder={interpolate($_, placeholder)}
+                            members={$selectedChatMembersStore}
+                            {onPaste}
+                            onKeydown={keyDown}
+                            oninput={onInput}>
+                            {#snippet mentionPicker(args)}
+                                <MentionPicker
+                                    supportsUserGroups
+                                    offset={messageEntryHeight}
+                                    onClose={args.onClose}
+                                    onMention={args.onMention}
+                                    prefix={args.query} />
+                            {/snippet}
+                            {#snippet emojiPicker(args)}
+                                <EmojiAutocompleter
+                                    offset={messageEntryHeight}
+                                    onClose={args.onClose}
+                                    onSelect={args.onSelect}
+                                    query={args.query} />
+                            {/snippet}
+                        </RichTextEditor>
+                    </div>
+                </div>
+            {/key}
+        {:else}
+            <div class="textbox light">
+                <Translatable resourceKey={placeholder} />
+            </div>
+        {/if}
+
+        {#if directChatBotId === undefined}
+            <div class="icons">
+                {#if editingEvent === undefined}
+                    {#if permittedMessages.get("audio") && messageIsEmpty && audioMimeType !== undefined && audioSupported}
+                        <div class="record">
+                            <AudioAttacher
+                                mimeType={audioMimeType}
+                                bind:percentRecorded
+                                bind:recording
+                                bind:supported={audioSupported}
+                                onAudioCaptured={onFileSelected} />
+                        </div>
+                    {:else if canEnterText}
+                        <!-- svelte-ignore a11y_no_static_element_interactions, a11y_click_events_have_key_events -->
+                        <div class="send" onclick={sendMessage}>
+                            <HoverIcon title={$_("sendMessage")}>
+                                <Send size={$iconSize} color={"var(--icon-txt)"} />
+                            </HoverIcon>
+                        </div>
+                    {/if}
+                    <!-- we might need this if we are editing too -->
+                    <MessageActions
+                        bind:this={messageActions}
+                        bind:messageAction
+                        {permittedMessages}
+                        {attachment}
+                        {mode}
+                        editing={editingEvent !== undefined}
+                        {onTokenTransfer}
+                        {onCreatePrizeMessage}
+                        {onCreateP2PSwapMessage}
+                        {onAttachGif}
+                        {onMakeMeme}
+                        {onCreatePoll}
+                        {onClearAttachment}
+                        {onFileSelected} />
+                {:else}
+                    <!-- svelte-ignore a11y_no_static_element_interactions, a11y_click_events_have_key_events -->
+                    <div class="send" onclick={sendMessage}>
+                        <HoverIcon>
+                            <ContentSaveEditOutline size={$iconSize} color={"var(--button-txt)"} />
+                        </HoverIcon>
+                    </div>
+                    <!-- svelte-ignore a11y_no_static_element_interactions, a11y_click_events_have_key_events -->
+                    <div class="send" onclick={onCancelEdit}>
+                        <HoverIcon>
+                            <Close size={$iconSize} color={"var(--button-txt)"} />
+                        </HoverIcon>
+                    </div>
+                {/if}
+            </div>
+        {/if}
+    {/if}
+</div>
+
+<style lang="scss">
+    .message-entry {
+        position: relative;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background-color: var(--entry-bg);
+        padding: $sp3;
+        border-top: var(--bw) solid var(--bd);
+        min-height: toRem(60);
+
+        &.editing {
+            background: var(--button-bg);
+        }
+
+        .icons {
+            display: flex;
+            align-self: flex-end;
+        }
+    }
+    .send {
+        flex: 0 0 15px;
+    }
+
+    .container {
+        margin: 0 $sp3;
+        flex: 1;
+        position: relative;
+    }
+
+    .textbox {
+        padding: toRem(12) $sp4 $sp3 $sp4;
+        background-color: var(--entry-input-bg);
+        border-radius: var(--entry-input-rd);
+        outline: none;
+        border: 0;
+        max-height: calc(var(--vh, 1vh) * 50);
+        min-height: toRem(30);
+        overflow-x: hidden;
+        overflow-y: auto;
+        user-select: text;
+        // white-space: pre-wrap;
+        overflow-wrap: anywhere;
+        border: var(--bw) solid var(--entry-input-bd);
+        box-shadow: var(--entry-input-sh);
+
+        &.recording {
+            display: none;
+        }
+
+        &.light {
+            color: var(--txt-light);
+        }
+    }
+
+    .blocked,
+    .frozen,
+    .disabled {
+        height: 42px;
+        color: var(--txt);
+        @include font(book, normal, fs-100);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+    }
+
+    .recording {
+        padding: 0 $sp3;
+        flex: auto;
+    }
+
+    .note {
+        @include font(book, normal, fs-70);
+        margin-bottom: $sp2;
+    }
+
+    .disclaimer {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        gap: $sp4;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/MessagePreview.svelte b/frontend/app/src/desktop/features/chats/core/MessagePreview.svelte
new file mode 100644
index 0000000000..120c602c72
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/MessagePreview.svelte
@@ -0,0 +1,113 @@
+<script lang="ts">
+    import {
+        allUsersStore,
+        AvatarSize,
+        currentUserIdStore,
+        OpenChat,
+        selectedChatWebhooksStore,
+        selectedCommunityMembersStore,
+        type RehydratedMessagePreview,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import Avatar from "@src/desktop/shared/Avatar.svelte";
+    import ChatMessageContent from "@src/desktop/features/chats/core/content/ChatMessageContent.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        preview: RehydratedMessagePreview;
+        intersecting: boolean;
+    }
+
+    const { preview, intersecting }: Props = $props();
+
+    let me = $derived(preview.message.sender === $currentUserIdStore);
+    let displayName = $derived(
+        me
+            ? client.toTitleCase($_("you"))
+            : client.getDisplayName(
+                  preview.message.sender,
+                  $selectedCommunityMembersStore,
+                  $selectedChatWebhooksStore,
+              ),
+    );
+</script>
+
+<a href={preview.url}>
+    <div
+        class="wrapper"
+        class:me
+        class:p2pSwap={preview.message.content.kind === "p2p_swap_content"}>
+        <div class="title">
+            <Avatar
+                url={client.userAvatarUrl($allUsersStore.get(preview.message.sender))}
+                userId={preview.message.sender}
+                size={AvatarSize.Tiny} />
+            <h4
+                class="username"
+                class:text-content={preview.message.content.kind === "text_content"}>
+                {displayName}
+            </h4>
+        </div>
+        <div class="inert">
+            <ChatMessageContent
+                {me}
+                readonly
+                messageContext={{
+                    chatId: preview.chatId,
+                    threadRootMessageIndex: preview.threadRootMessageIndex,
+                }}
+                {intersecting}
+                messageId={preview.message.messageId}
+                messageIndex={preview.message.messageIndex}
+                senderId={preview.message.sender}
+                edited={preview.message.edited}
+                fill={false}
+                failed={false}
+                blockLevelMarkdown
+                truncate
+                reply
+                content={preview.message.content}
+                ogPreviews={preview.message.ogPreviews} />
+        </div>
+    </div>
+</a>
+
+<style lang="scss">
+    .wrapper {
+        padding: $sp3;
+        border-radius: $sp3;
+        background-color: color-mix(in srgb, var(--currentChat-msg-bg), black 15%);
+        overflow: hidden;
+        @include nice-scrollbar();
+        max-height: 300px;
+        margin-bottom: $sp2;
+
+        &.me {
+            background-color: color-mix(in srgb, var(--currentChat-msg-me-bg), black 15%);
+        }
+
+        .inert {
+            pointer-events: none;
+        }
+
+        &:after {
+            content: "";
+            display: table;
+            clear: both;
+        }
+
+        &.p2pSwap {
+            max-width: 350px;
+        }
+    }
+
+    .title {
+        display: flex;
+        gap: $sp3;
+        > * {
+            flex: 1;
+        }
+    }
+</style>
diff --git a/frontend/app/src/components/home/NoChatSelected.svelte b/frontend/app/src/desktop/features/chats/core/NoChatSelected.svelte
similarity index 91%
rename from frontend/app/src/components/home/NoChatSelected.svelte
rename to frontend/app/src/desktop/features/chats/core/NoChatSelected.svelte
index 67bfa2c02c..974d3ad4fa 100644
--- a/frontend/app/src/components/home/NoChatSelected.svelte
+++ b/frontend/app/src/desktop/features/chats/core/NoChatSelected.svelte
@@ -8,13 +8,13 @@
         type ChatListScope,
         type OpenChat,
     } from "@client";
-    import { navigate } from "@utils/navigation";
+    import { navigate } from "@src/utils/navigation";
     import { getContext } from "svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import Button from "../Button.svelte";
-    import Translatable from "../Translatable.svelte";
-    import CommunityCard from "./communities/explore/CommunityCard.svelte";
-    import PreviewWrapper from "./communities/PreviewWrapper.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Button from "@src/ui/Button.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import CommunityCard from "@src/desktop/features/chats/community/explore/CommunityCard.svelte";
+    import PreviewWrapper from "@src/desktop/features/chats/community/PreviewWrapper.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/desktop/features/chats/core/P2PSwapProgress.svelte b/frontend/app/src/desktop/features/chats/core/P2PSwapProgress.svelte
new file mode 100644
index 0000000000..b7d7e130a5
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/P2PSwapProgress.svelte
@@ -0,0 +1,154 @@
+<script lang="ts">
+    import type { OpenChat, P2PSwapContent } from "@client";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import ProgressSteps, { type Result, type Step } from "@src/desktop/shared/ProgressSteps.svelte";
+    import { getContext } from "svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+
+    const client = getContext<OpenChat>("client");
+    const labelPrefix = "p2pSwap.progress.";
+
+    interface Props {
+        senderId: string;
+        content: P2PSwapContent;
+        onClose: () => void;
+    }
+
+    let { senderId, content, onClose }: Props = $props();
+
+    let steps: Step[] = $state([
+        { label: "open", status: "done" },
+        { label: "waiting", status: "todo" },
+    ]);
+    let result = $state<Result>(undefined);
+    let token0TxnOut: string | undefined = $state(undefined);
+    let token1TxnIn: string | undefined = $state(undefined);
+    let token1TxnOut: string | undefined = $state(undefined);
+    let user1: string | undefined = $state(undefined);
+
+    function toUser(userId: string): string {
+        return `@UserId(${userId})`;
+    }
+    $effect(() => {
+        if (content.status.kind === "p2p_swap_cancelled") {
+            if (content.status.token0TxnOut === undefined) {
+                steps = [
+                    { label: "open", status: "done" },
+                    { label: "cancelled_pending", status: "doing" },
+                ];
+            } else {
+                steps = [
+                    { label: "open", status: "done" },
+                    { label: "refunded", status: "done" },
+                ];
+                result = { label: "cancelled", status: "failed" };
+                token0TxnOut = client.buildTransactionUrl(
+                    content.status.token0TxnOut,
+                    content.token0.ledger,
+                );
+            }
+        } else if (content.status.kind === "p2p_swap_expired") {
+            if (content.status.token0TxnOut === undefined) {
+                steps = [
+                    { label: "open", status: "done" },
+                    { label: "expired_pending", status: "doing" },
+                ];
+            } else {
+                steps = [
+                    { label: "open", status: "done" },
+                    { label: "refunded", status: "done" },
+                ];
+                result = { label: "expired", status: "failed" };
+                token0TxnOut = client.buildTransactionUrl(
+                    content.status.token0TxnOut,
+                    content.token0.ledger,
+                );
+            }
+        } else if (content.status.kind === "p2p_swap_reserved") {
+            steps = [
+                { label: "open", status: "done" },
+                { label: "reserved", status: "doing" },
+            ];
+            user1 = toUser(content.status.reservedBy);
+        } else if (content.status.kind === "p2p_swap_accepted") {
+            steps = [
+                { label: "open", status: "done" },
+                { label: "accepting", status: "done" },
+                { label: "accepted", status: "done" },
+                { label: "swapping", status: "doing" },
+            ];
+            user1 = toUser(content.status.acceptedBy);
+            token1TxnIn = client.buildTransactionUrl(
+                content.status.token1TxnIn,
+                content.token1.ledger,
+            );
+        } else if (content.status.kind === "p2p_swap_completed") {
+            steps = [
+                { label: "open", status: "done" },
+                { label: "accepting", status: "done" },
+                { label: "accepted", status: "done" },
+                { label: "swapped", status: "done" },
+            ];
+            result = { label: "completed", status: "done" };
+            user1 = toUser(content.status.acceptedBy);
+            token1TxnIn = client.buildTransactionUrl(
+                content.status.token1TxnIn,
+                content.token1.ledger,
+            );
+            token0TxnOut = client.buildTransactionUrl(
+                content.status.token0TxnOut,
+                content.token0.ledger,
+            );
+            token1TxnOut = client.buildTransactionUrl(
+                content.status.token0TxnOut,
+                content.token0.ledger,
+            );
+        }
+    });
+    let fullSteps = $derived(
+        steps.map((step) => ({ label: labelPrefix + step.label, status: step.status })),
+    );
+    let fullResult = $derived(
+        result !== undefined
+            ? { label: labelPrefix + result.label, status: result.status }
+            : undefined,
+    );
+    let labelValues = $derived({
+        token0: content.token0.symbol,
+        token1: content.token1.symbol,
+        amount0: client.formatTokens(content.token0Amount, content.token0.decimals),
+        amount1: client.formatTokens(content.token1Amount, content.token1.decimals),
+        user0: toUser(senderId),
+        user1,
+        token0TxnIn: client.buildTransactionUrl(content.token0TxnIn, content.token0.ledger),
+        token0TxnOut,
+        token1TxnIn,
+        token1TxnOut,
+    });
+    let title = $derived(i18nKey("p2pSwap.swapTokenTo", labelValues));
+</script>
+
+<Overlay dismissible {onClose}>
+    <ModalContent hideFooter>
+        {#snippet header()}
+            <Translatable resourceKey={title} />
+        {/snippet}
+        {#snippet body()}
+            <div class="p2p-swap-progress">
+                <ProgressSteps steps={fullSteps} {labelValues} result={fullResult} />
+            </div>
+        {/snippet}
+    </ModalContent>
+</Overlay>
+
+<style lang="scss">
+    :global(.p2p-swap-progress .markdown-wrapper a) {
+        color: unset;
+        text-decoration: none;
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+</style>
diff --git a/frontend/app/src/components/home/Paperclip.svelte b/frontend/app/src/desktop/features/chats/core/Paperclip.svelte
similarity index 100%
rename from frontend/app/src/components/home/Paperclip.svelte
rename to frontend/app/src/desktop/features/chats/core/Paperclip.svelte
diff --git a/frontend/app/src/desktop/features/chats/core/PollAnswer.svelte b/frontend/app/src/desktop/features/chats/core/PollAnswer.svelte
new file mode 100644
index 0000000000..f4547a2f96
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/PollAnswer.svelte
@@ -0,0 +1,123 @@
+<script lang="ts">
+    import type { OpenChat, UserLookup } from "@client";
+    import { allUsersStore, currentUserIdStore } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import CheckCircleOutline from "svelte-material-icons/CheckCircleOutline.svelte";
+    import Progress from "@src/desktop/shared/Progress.svelte";
+    import Tooltip from "@src/desktop/ui/tooltip/Tooltip.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        finished: boolean;
+        readonly: boolean;
+        percent: number;
+        answer: string;
+        voted: boolean;
+        txtColor: string;
+        voters: string[] | undefined;
+        numVotes: number;
+        showVotes: boolean;
+        me: boolean;
+        onClick?: () => void;
+    }
+
+    let {
+        finished,
+        readonly,
+        percent,
+        answer,
+        voted,
+        txtColor,
+        voters,
+        numVotes,
+        showVotes,
+        me,
+        onClick,
+    }: Props = $props();
+
+    let longPressed: boolean = $state(false);
+
+    function buildPollUsernames(
+        userStore: UserLookup,
+        voters: string[] | undefined,
+        myUserId: string | undefined,
+    ): string | undefined {
+        if (voters === undefined || voters.length === 0 || !showVotes) return undefined;
+        return client.buildUsernameList($_, new Set(voters), myUserId, userStore);
+    }
+
+    function buildTooltipText(): string {
+        if (usernames === undefined) {
+            if (numVotes === 1) {
+                if (voted) {
+                    return $_("poll.oneVoteBy") + " " + $_("you");
+                } else {
+                    return $_("poll.oneVote");
+                }
+            } else {
+                if (voted) {
+                    return $_("poll.numVotesIncludingYours", { values: { votes: numVotes } });
+                } else {
+                    return $_("poll.numVotes", { values: { votes: numVotes } });
+                }
+            }
+        } else {
+            if (numVotes === 1) {
+                return $_("poll.oneVoteBy") + " " + usernames;
+            } else {
+                return $_("poll.numVotesBy", { values: { votes: numVotes } }) + " " + usernames;
+            }
+        }
+    }
+
+    function click() {
+        if (!longPressed) {
+            onClick?.();
+        }
+    }
+    let usernames = $derived(buildPollUsernames($allUsersStore, voters, $currentUserIdStore));
+</script>
+
+<Tooltip
+    textLength={usernames === undefined ? 10 : usernames.length + 16}
+    longestWord={30}
+    bind:longPressed
+    position={"right"}
+    align={"middle"}
+    enable={showVotes}>
+    <div class:readonly class="answer-text" class:finished onclick={click}>
+        <Progress bg={me ? "accent" : "button"} {percent}>
+            <div class="label">
+                <span>{answer}</span>
+                {#if voted}
+                    <CheckCircleOutline size={"1em"} color={txtColor} />
+                {/if}
+            </div>
+        </Progress>
+    </div>
+    {#snippet popupTemplate()}
+        {buildTooltipText()}
+    {/snippet}
+</Tooltip>
+
+<style lang="scss">
+    .label {
+        display: flex;
+        align-items: center;
+        gap: $sp3;
+    }
+
+    .answer-text {
+        cursor: pointer;
+
+        &.finished {
+            cursor: default;
+        }
+
+        &.readonly {
+            cursor: default;
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/PollBuilder.svelte b/frontend/app/src/desktop/features/chats/core/PollBuilder.svelte
new file mode 100644
index 0000000000..ea69203b4e
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/PollBuilder.svelte
@@ -0,0 +1,355 @@
+<script lang="ts">
+    import {
+        iconSize,
+        mobileWidth,
+        type PollContent,
+        type ResourceKey,
+        type TotalPollVotes,
+    } from "@client";
+    import { _ } from "svelte-i18n";
+    import DeleteOutline from "svelte-material-icons/DeleteOutline.svelte";
+    import PlusCircleOutline from "svelte-material-icons/PlusCircleOutline.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import ErrorMessage from "@src/desktop/shared/ErrorMessage.svelte";
+    import Input from "@src/desktop/shared/Input.svelte";
+    import Legend from "@src/desktop/shared/Legend.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import Radio from "@src/desktop/shared/Radio.svelte";
+    import Toggle from "@src/desktop/shared/Toggle.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    const MAX_QUESTION_LENGTH = 250;
+    const MAX_ANSWER_LENGTH = 50;
+    const MAX_ANSWERS = 10;
+    const durations: Duration[] = ["oneHour", "oneDay", "oneWeek"];
+
+    type Duration = "oneHour" | "oneDay" | "oneWeek";
+
+    type CandidatePoll = {
+        pollQuestion: string;
+        anonymous: boolean;
+        limitedDuration: boolean;
+        showVotesBeforeEndDate: boolean;
+        allowMultipleVotesPerUser: boolean;
+        allowUserToChangeVote: boolean;
+        pollAnswers: Map<string, string>;
+    };
+
+    interface Props {
+        open: boolean;
+        onSend: (content: PollContent) => void;
+    }
+
+    let { open = $bindable(), onSend }: Props = $props();
+
+    let poll: CandidatePoll = $state(emptyPoll());
+    let nextAnswer: string = $state("");
+    let answerError: ResourceKey | undefined = $state(undefined);
+    let selectedDuration: Duration = $state("oneDay");
+    let showSettings = $state(false);
+
+    export function resetPoll() {
+        selectedDuration = "oneDay";
+        answerError = undefined;
+        nextAnswer = "";
+        poll = emptyPoll();
+        showSettings = false;
+    }
+
+    function emptyPoll() {
+        return {
+            pollQuestion: "",
+            anonymous: true,
+            limitedDuration: true,
+            showVotesBeforeEndDate: true,
+            allowMultipleVotesPerUser: false,
+            allowUserToChangeVote: true,
+            pollAnswers: new Map<string, string>(),
+        };
+    }
+
+    function answerIsValid(answer: string): boolean {
+        const trimmed = answer?.trim();
+        return (
+            trimmed !== undefined &&
+            trimmed.length > 0 &&
+            trimmed.length <= MAX_ANSWER_LENGTH &&
+            !poll.pollAnswers.has(trimmed.toUpperCase())
+        );
+    }
+
+    function addAnswer() {
+        const trimmed = nextAnswer?.trim();
+        if (answerIsValid(trimmed)) {
+            answerError = undefined;
+            poll.pollAnswers = new Map(poll.pollAnswers.set(trimmed.toUpperCase(), trimmed));
+            nextAnswer = "";
+            return true;
+        } else {
+            answerError = i18nKey("poll.invalidAnswer");
+            return false;
+        }
+    }
+
+    function deleteAnswer(answer: string) {
+        poll.pollAnswers.delete(answer.toUpperCase());
+        poll.pollAnswers = new Map(poll.pollAnswers);
+    }
+
+    function createPollVotes(): TotalPollVotes {
+        if (poll.anonymous) {
+            return { kind: "anonymous_poll_votes", votes: {} };
+        } else if (poll.showVotesBeforeEndDate) {
+            return { kind: "visible_poll_votes", votes: {} };
+        } else {
+            return { kind: "hidden_poll_votes", votes: 0 };
+        }
+    }
+
+    const ONE_HOUR = 1000 * 60 * 60;
+    const ONE_DAY = ONE_HOUR * 24;
+    const ONE_WEEK = ONE_DAY * 7;
+
+    function createPollEndDate() {
+        if (!poll.limitedDuration) return undefined;
+        const now = Date.now();
+        if (selectedDuration === "oneHour") return BigInt(now + ONE_HOUR);
+        if (selectedDuration === "oneDay") return BigInt(now + ONE_DAY);
+        if (selectedDuration === "oneWeek") return BigInt(now + ONE_WEEK);
+    }
+
+    function createPollContent(): PollContent | undefined {
+        if (nextAnswer !== "") {
+            if (!addAnswer()) {
+                return undefined;
+            }
+        }
+        return {
+            kind: "poll_content",
+            votes: {
+                total: createPollVotes(),
+                user: [],
+            },
+            config: {
+                allowMultipleVotesPerUser: poll.allowMultipleVotesPerUser,
+                allowUserToChangeVote: poll.allowUserToChangeVote,
+                text: poll.pollQuestion === "" ? undefined : poll.pollQuestion,
+                showVotesBeforeEndDate: poll.showVotesBeforeEndDate,
+                endDate: createPollEndDate(),
+                anonymous: poll.anonymous,
+                options: [...poll.pollAnswers.values()],
+            },
+            ended: false,
+        };
+    }
+
+    function start() {
+        const poll = createPollContent();
+        if (poll) {
+            onSend(poll);
+            open = false;
+        }
+    }
+    let valid = $derived(
+        poll.pollAnswers.size >= 2 ||
+            (poll.pollAnswers.size === 1 && nextAnswer.length > 0 && answerIsValid(nextAnswer)),
+    );
+</script>
+
+{#if open}
+    <Overlay>
+        <ModalContent>
+            {#snippet header()}
+                <Translatable resourceKey={i18nKey("poll.create")} />
+            {/snippet}
+            {#snippet body()}
+                <div class="buttons">
+                    <ButtonGroup align={"start"}>
+                        <Button
+                            small={!$mobileWidth}
+                            tiny={$mobileWidth}
+                            secondary={showSettings}
+                            onClick={() => (showSettings = false)}
+                            ><Translatable resourceKey={i18nKey("poll.poll")} /></Button>
+                        <Button
+                            small={!$mobileWidth}
+                            secondary={!showSettings}
+                            tiny={$mobileWidth}
+                            onClick={() => (showSettings = true)}
+                            ><Translatable resourceKey={i18nKey("poll.settings")} /></Button>
+                    </ButtonGroup>
+                </div>
+                {#if !showSettings}
+                    <form>
+                        <div class="section underline">
+                            <Legend label={i18nKey("poll.questionLabel")} />
+                            <Input
+                                bind:value={poll.pollQuestion}
+                                autofocus
+                                minlength={0}
+                                maxlength={MAX_QUESTION_LENGTH}
+                                countdown
+                                placeholder={i18nKey("poll.optionalQuestion")} />
+                        </div>
+
+                        <div class="section">
+                            <Legend
+                                label={i18nKey("poll.answersLabel")}
+                                rules={i18nKey("poll.atLeastTwo")} />
+                            {#each [...poll.pollAnswers.values()] as answer (answer)}
+                                <div class="answer">
+                                    <div class="answer-text">
+                                        {answer}
+                                    </div>
+                                    <div class="delete" onclick={() => deleteAnswer(answer)}>
+                                        <DeleteOutline size={$iconSize} color={"var(--icon-txt)"} />
+                                    </div>
+                                </div>
+                            {/each}
+                            {#if poll.pollAnswers.size < MAX_ANSWERS}
+                                <div class="next">
+                                    <div class="next-txt">
+                                        <Input
+                                            bind:value={nextAnswer}
+                                            disabled={poll.pollAnswers.size >= MAX_ANSWERS}
+                                            minlength={1}
+                                            maxlength={MAX_ANSWER_LENGTH}
+                                            countdown
+                                            onEnter={addAnswer}
+                                            placeholder={i18nKey(
+                                                poll.pollAnswers.size === MAX_ANSWERS
+                                                    ? "poll.maxReached"
+                                                    : "poll.answerText",
+                                            )}>
+                                            {#if answerError !== undefined}
+                                                <ErrorMessage
+                                                    ><Translatable
+                                                        resourceKey={answerError} /></ErrorMessage>
+                                            {/if}
+                                        </Input>
+                                    </div>
+                                    <div class="add-btn" onclick={addAnswer}>
+                                        <PlusCircleOutline
+                                            size={$iconSize}
+                                            color={"var(--icon-txt)"} />
+                                    </div>
+                                </div>
+                            {/if}
+                        </div>
+                    </form>
+                {:else}
+                    <Toggle
+                        small
+                        id={"anonymous"}
+                        onChange={() => (poll.anonymous = !poll.anonymous)}
+                        label={i18nKey("poll.anonymous")}
+                        checked={poll.anonymous} />
+
+                    <Toggle
+                        small
+                        id={"allow-multiple"}
+                        label={i18nKey("poll.allowMultipleVotes")}
+                        onChange={() =>
+                            (poll.allowMultipleVotesPerUser = !poll.allowMultipleVotesPerUser)}
+                        checked={poll.allowMultipleVotesPerUser} />
+
+                    <Toggle
+                        small
+                        id={"allow-change"}
+                        disabled={poll.allowMultipleVotesPerUser}
+                        label={i18nKey("poll.allowChangeVotes")}
+                        onChange={() => (poll.allowUserToChangeVote = !poll.allowUserToChangeVote)}
+                        checked={!poll.allowMultipleVotesPerUser && poll.allowUserToChangeVote} />
+
+                    <Toggle
+                        small
+                        id={"limited-duration"}
+                        label={i18nKey("poll.limitedDuration")}
+                        onChange={() => (poll.limitedDuration = !poll.limitedDuration)}
+                        checked={poll.limitedDuration} />
+
+                    {#if poll.limitedDuration}
+                        <Toggle
+                            small
+                            id={"show-before-end"}
+                            label={i18nKey("poll.showBeforeEnd")}
+                            onChange={() =>
+                                (poll.showVotesBeforeEndDate = !poll.showVotesBeforeEndDate)}
+                            checked={poll.showVotesBeforeEndDate} />
+
+                        <Legend label={i18nKey("poll.pollDuration")} />
+                        {#each durations as d}
+                            <Radio
+                                onChange={() => (selectedDuration = d)}
+                                value={d}
+                                checked={selectedDuration === d}
+                                id={`duration_${d}`}
+                                label={i18nKey(`poll.${d}`)}
+                                group={"poll_duration"} />
+                        {/each}
+                    {/if}
+                {/if}
+            {/snippet}
+            {#snippet footer()}
+                <ButtonGroup>
+                    <Button
+                        small={!$mobileWidth}
+                        tiny={$mobileWidth}
+                        secondary
+                        onClick={() => (open = false)}>{$_("cancel")}</Button>
+                    <Button
+                        small={!$mobileWidth}
+                        disabled={!valid}
+                        tiny={$mobileWidth}
+                        onClick={start}>{$_("poll.start")}</Button>
+                </ButtonGroup>
+            {/snippet}
+        </ModalContent>
+    </Overlay>
+{/if}
+
+<style lang="scss">
+    .section {
+        padding-bottom: $sp4;
+
+        &.underline {
+            margin-bottom: $sp4;
+            border-bottom: 1px solid var(--bd);
+        }
+    }
+
+    .buttons {
+        margin-bottom: $sp4;
+    }
+
+    .answer-text {
+        flex: 1;
+        padding: $sp3 $sp4;
+        border-radius: var(--rd);
+        margin-bottom: $sp3;
+        position: relative;
+        border: 1px solid var(--bd);
+        background-color: var(--input-bg);
+    }
+
+    .next,
+    .answer {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: $sp3;
+    }
+
+    .next-txt {
+        flex: 1;
+    }
+
+    .add-btn,
+    .delete {
+        flex: 0 0 30px;
+        cursor: pointer;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/PreviewFooter.svelte b/frontend/app/src/desktop/features/chats/core/PreviewFooter.svelte
new file mode 100644
index 0000000000..5175f45f45
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/PreviewFooter.svelte
@@ -0,0 +1,187 @@
+
+<script lang="ts">
+    import { navigate } from "@src/utils/navigation";
+    import { chatListScopeStore, isLocked, mobileWidth, type MultiUserChat, type OpenChat, platformModeratorStore, publish, ROLE_NONE, routeForScope, selectedCommunitySummaryStore } from "@client";
+    import { getContext } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import Button from "@src/ui/Button.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import AccessGateIconsForChat from "@src/desktop/features/access/AccessGateIconsForChat.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        chat: MultiUserChat;
+        joining: MultiUserChat | undefined;
+        lapsed: boolean;
+    }
+
+    let { chat, joining, lapsed }: Props = $props();
+
+    let isFrozen = $derived(client.isChatOrCommunityFrozen(chat, $selectedCommunitySummaryStore));
+    let previewingCommunity = $derived(
+        $selectedCommunitySummaryStore?.membership.role === ROLE_NONE ||
+            $selectedCommunitySummaryStore?.membership.lapsed,
+    );
+    let gates = $derived(client.accessGatesForChat(chat));
+    let locked = $derived(gates.some((g) => isLocked(g)));
+
+    let freezingInProgress = $state(false);
+
+    function joinGroup() {
+        publish("joinGroup", {
+            group: chat,
+            select: false,
+        });
+    }
+
+    function cancelPreview() {
+        if (previewingCommunity && $selectedCommunitySummaryStore) {
+            client.removeCommunity($selectedCommunitySummaryStore.id);
+            navigate(routeForScope(client.getDefaultScope()));
+        } else {
+            if (!chat.public) {
+                client.declineInvitation(chat.id);
+            }
+            client.removePreviewedChat(chat.id);
+            if ($mobileWidth || !client.selectDefaultChat(false)) {
+                navigate(routeForScope($chatListScopeStore));
+            }
+        }
+    }
+
+    function freeze() {
+        freezingInProgress = true;
+        switch (chat.kind) {
+            case "group_chat":
+                client
+                    .freezeGroup(chat.id, undefined)
+                    .then((success) => {
+                        if (!success) {
+                            toastStore.showFailureToast(i18nKey("failedToFreezeGroup"));
+                        } else {
+                            toastStore.showSuccessToast(i18nKey("chatFrozen"));
+                        }
+                    })
+                    .finally(() => (freezingInProgress = false));
+                break;
+
+            case "channel":
+                if ($selectedCommunitySummaryStore) {
+                    client
+                        .freezeCommunity($selectedCommunitySummaryStore.id, undefined)
+                        .then((success) => {
+                            if (!success) {
+                                toastStore.showFailureToast(i18nKey("failedToFreezeCommunity"));
+                            } else {
+                                toastStore.showSuccessToast(i18nKey("communityFrozen"));
+                            }
+                        })
+                        .finally(() => (freezingInProgress = false));
+                }
+                break;
+        }
+    }
+
+    function unfreeze() {
+        freezingInProgress = true;
+
+        switch (chat.kind) {
+            case "group_chat":
+                client
+                    .unfreezeGroup(chat.id)
+                    .then((success) => {
+                        if (!success) {
+                            toastStore.showFailureToast(i18nKey("failedToUnfreezeGroup"));
+                        } else {
+                            toastStore.showSuccessToast(i18nKey("Chat unfrozen"));
+                        }
+                    })
+                    .finally(() => (freezingInProgress = false));
+
+            case "channel":
+                if ($selectedCommunitySummaryStore) {
+                    client
+                        .unfreezeCommunity($selectedCommunitySummaryStore.id)
+                        .then((success) => {
+                            if (!success) {
+                                toastStore.showFailureToast(i18nKey("failedToUnfreezeCommunity"));
+                            } else {
+                                toastStore.showSuccessToast(i18nKey("communityUnfrozen"));
+                            }
+                        })
+                        .finally(() => (freezingInProgress = false));
+                }
+        }
+    }
+</script>
+
+<div class="preview">
+    <div class="gate">
+        <AccessGateIconsForChat {gates} />
+    </div>
+    {#if lapsed}
+        <div class="lapsed">
+            <Translatable resourceKey={i18nKey("access.lapsed.label")} />
+        </div>
+    {/if}
+    {#if $platformModeratorStore}
+        {#if isFrozen}
+            <Button loading={freezingInProgress} secondary small onClick={unfreeze}>
+                <Translatable
+                    resourceKey={chat.kind === "group_chat"
+                        ? i18nKey("unfreezeGroup")
+                        : i18nKey("unfreezeCommunity")} />
+            </Button>
+        {:else}
+            <Button loading={freezingInProgress} secondary small onClick={freeze}>
+                <Translatable
+                    resourceKey={chat.kind === "group_chat"
+                        ? i18nKey("freezeGroup")
+                        : i18nKey("freezeCommunity")} />
+            </Button>
+        {/if}
+    {/if}
+    {#if !lapsed}
+        <Button secondary small onClick={cancelPreview}>
+            <Translatable resourceKey={i18nKey("leave")} />
+        </Button>
+    {/if}
+    <Button
+        loading={joining !== undefined}
+        disabled={locked || joining !== undefined}
+        small
+        onClick={joinGroup}>
+        <Translatable
+            resourceKey={locked
+                ? i18nKey("access.lockedGate", undefined, chat.level, true)
+                : lapsed
+                  ? i18nKey("access.lapsed.rejoin", undefined, chat.level, true)
+                  : i18nKey("joinGroup", undefined, chat.level, true)} />
+    </Button>
+</div>
+
+<style lang="scss">
+    .preview {
+        height: 42px;
+        color: var(--txt);
+        @include font(book, normal, fs-100);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        position: relative;
+        justify-content: flex-end;
+        gap: $sp3;
+
+        .gate {
+            position: absolute;
+            left: 0;
+        }
+    }
+
+    .lapsed {
+        @include font(bold, normal, fs-100);
+    }
+</style>
diff --git a/frontend/app/src/components/home/PrivatePreview.svelte b/frontend/app/src/desktop/features/chats/core/PrivatePreview.svelte
similarity index 100%
rename from frontend/app/src/components/home/PrivatePreview.svelte
rename to frontend/app/src/desktop/features/chats/core/PrivatePreview.svelte
diff --git a/frontend/app/src/desktop/features/chats/core/ReminderBuilder.svelte b/frontend/app/src/desktop/features/chats/core/ReminderBuilder.svelte
new file mode 100644
index 0000000000..7c4b84bd34
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/ReminderBuilder.svelte
@@ -0,0 +1,181 @@
+<script lang="ts">
+    import { mobileWidth, type ChatIdentifier, type OpenChat } from "@client";
+    import { getContext } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { now } from "@src/stores/time";
+    import { toastStore } from "@src/stores/toast";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import DateInput from "@src/desktop/shared/DateInput.svelte";
+    import Legend from "@src/desktop/shared/Legend.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import Select from "@src/desktop/shared/Select.svelte";
+    import TextArea from "@src/desktop/shared/TextArea.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    interface Props {
+        chatId: ChatIdentifier;
+        eventIndex: number;
+        threadRootMessageIndex: number | undefined;
+        onClose: () => void;
+    }
+
+    let { chatId, eventIndex, threadRootMessageIndex, onClose }: Props = $props();
+
+    const client = getContext<OpenChat>("client");
+
+    let busy = $state(false);
+    let note: string = $state("");
+    let selectedIntervalIndex = $state(0);
+    let intervals = [
+        {
+            label: i18nKey("reminders.twentyMinutes"),
+            index: 0,
+        },
+        {
+            label: i18nKey("reminders.oneHour"),
+            index: 1,
+        },
+        {
+            label: i18nKey("reminders.threeHours"),
+            index: 2,
+        },
+        {
+            label: i18nKey("reminders.tomorrow"),
+            index: 3,
+        },
+        {
+            label: i18nKey("reminders.nextWeek"),
+            index: 4,
+        },
+        {
+            label: i18nKey("reminders.custom"),
+            index: 5,
+        },
+    ];
+
+    function deriveRemindAt(now: number, interval: number): number {
+        if (interval === 0) {
+            return now + 20 * 60 * 1000;
+        }
+        if (interval === 1) {
+            return now + 60 * 60 * 1000;
+        }
+        if (interval === 2) {
+            return now + 180 * 60 * 1000;
+        }
+        if (interval === 3) {
+            return tomorrow(now);
+        }
+        if (interval === 4) {
+            return nextWeek(now);
+        }
+        if (interval === 5 && customTimestamp != null) {
+            return Number(customTimestamp);
+        }
+        return now;
+    }
+
+    function nextWeek(now: number) {
+        const date = new Date(now);
+        date.setDate(date.getDate() + ((1 + 7 - date.getDay()) % 7));
+        return toNine(date).getTime();
+    }
+
+    function tomorrow(now: number) {
+        const date = new Date(now);
+        date.setDate(date.getDate() + 1);
+        return toNine(date).getTime();
+    }
+
+    function toNine(date: Date): Date {
+        date.setHours(9);
+        date.setMinutes(0);
+        date.setSeconds(0);
+        date.setMilliseconds(0);
+        return date;
+    }
+
+    function createReminder() {
+        busy = true;
+        client
+            .setMessageReminder(chatId, eventIndex, remindAtMs, note, threadRootMessageIndex)
+            .then((success) => {
+                if (success) {
+                    toastStore.showSuccessToast(i18nKey("reminders.success"));
+                } else {
+                    toastStore.showFailureToast(i18nKey("reminders.failure"));
+                }
+            })
+            .finally(() => (busy = false));
+        onClose();
+    }
+    let customTimestamp = $state<bigint | null | undefined>();
+    let remindAtMs = $derived(deriveRemindAt($now, selectedIntervalIndex));
+    let remindAtDate = $derived(new Date(remindAtMs));
+    let valid = $derived(remindAtMs >= $now);
+</script>
+
+<Overlay {onClose} dismissible>
+    <ModalContent overflowVisible {onClose} closeIcon>
+        {#snippet header()}
+            <h1>⏰ <Translatable resourceKey={i18nKey("reminders.title")} /></h1>
+        {/snippet}
+        {#snippet body()}
+            <div class="interval">
+                <Legend label={i18nKey("reminders.menu")} />
+                <Select bind:value={selectedIntervalIndex}>
+                    {#each intervals as interval}
+                        <option value={interval.index}
+                            ><Translatable resourceKey={interval.label} /></option>
+                    {/each}
+                </Select>
+            </div>
+            {#if selectedIntervalIndex === 5}
+                <div class="custom">
+                    <DateInput
+                        futureOnly
+                        placeholder={i18nKey("reminders.customPlaceholder")}
+                        onchange={(t) => (customTimestamp = t)}
+                        value={customTimestamp} />
+                </div>
+            {/if}
+            <div class="note">
+                <Legend label={i18nKey("reminders.note")} rules={i18nKey("reminders.optional")} />
+                <TextArea
+                    maxlength={1000}
+                    rows={4}
+                    placeholder={i18nKey("reminders.notePlaceholder")}
+                    bind:value={note} />
+            </div>
+
+            <div class="remind-at">
+                <Translatable
+                    resourceKey={i18nKey("reminders.remindAt", {
+                        datetime: client.toDatetimeString(remindAtDate),
+                    })} />
+            </div>
+        {/snippet}
+        {#snippet footer()}
+            <ButtonGroup>
+                <Button secondary small={!$mobileWidth} tiny={$mobileWidth} onClick={onClose}
+                    ><Translatable resourceKey={i18nKey("cancel")} /></Button>
+                <Button
+                    disabled={busy || !valid}
+                    loading={busy}
+                    small={!$mobileWidth}
+                    tiny={$mobileWidth}
+                    onClick={createReminder}
+                    ><Translatable resourceKey={i18nKey("reminders.create")} /></Button>
+            </ButtonGroup>
+        {/snippet}
+    </ModalContent>
+</Overlay>
+
+<style lang="scss">
+    .remind-at {
+        color: var(--txt-light);
+        @include font(book, normal, fs-80);
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/ReminderNotes.svelte b/frontend/app/src/desktop/features/chats/core/ReminderNotes.svelte
new file mode 100644
index 0000000000..13da5c5252
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/ReminderNotes.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+    import Markdown from "@src/ui/Markdown.svelte";
+
+    interface Props {
+        notes: string | undefined;
+    }
+
+    let { notes }: Props = $props();
+</script>
+
+{#if notes !== undefined && notes !== ""}
+    <div class="notes">
+        <Markdown inline suppressLinks text={notes} />
+    </div>
+{/if}
+
+<style lang="scss">
+    .notes {
+        margin-top: $sp4;
+        @include font(book, italic, fs-100);
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/RepliesTo.svelte b/frontend/app/src/desktop/features/chats/core/RepliesTo.svelte
new file mode 100644
index 0000000000..f21fbeb65a
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/RepliesTo.svelte
@@ -0,0 +1,159 @@
+<script lang="ts">
+    import {
+        type ChatIdentifier,
+        type RehydratedReplyContext,
+        chatIdentifiersEqual,
+        chatListScopeStore,
+        currentUserIdStore,
+        OpenChat,
+        routeForChatIdentifier,
+        selectedChatWebhooksStore,
+        selectedCommunityMembersStore,
+    } from "@client";
+    import { navigate } from "@src/utils/navigation";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { rtlStore } from "@src/stores/rtl";
+    import Link from "@src/desktop/shared/Link.svelte";
+    import ChatMessageContent from "@src/desktop/features/chats/core/content/ChatMessageContent.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        chatId: ChatIdentifier;
+        repliesTo: RehydratedReplyContext;
+        readonly: boolean;
+        intersecting: boolean;
+        onGoToMessageIndex?: (args: { index: number }) => void;
+        onRemovePreview?: (url: string) => void;
+    }
+
+    let { chatId, repliesTo, readonly, intersecting, onGoToMessageIndex, onRemovePreview }: Props =
+        $props();
+
+    let debug = false;
+
+    let me = $derived(repliesTo.senderId === $currentUserIdStore);
+    let isTextContent = $derived(repliesTo.content?.kind === "text_content");
+    let isP2PSwap = $derived(repliesTo.content.kind === "p2p_swap_content");
+    let displayName = $derived(
+        me
+            ? client.toTitleCase($_("you"))
+            : client.getDisplayName(
+                  repliesTo.senderId,
+                  $selectedCommunityMembersStore,
+                  $selectedChatWebhooksStore,
+              ),
+    );
+
+    function getUrl() {
+        const path = [
+            routeForChatIdentifier($chatListScopeStore.kind, repliesTo.sourceContext.chatId),
+            repliesTo.sourceContext.threadRootMessageIndex ?? repliesTo.messageIndex,
+        ];
+        if (repliesTo.sourceContext.threadRootMessageIndex !== undefined) {
+            path.push(repliesTo.messageIndex);
+        }
+        return path.join("/");
+    }
+
+    function zoomToMessage() {
+        if (chatIdentifiersEqual(repliesTo.sourceContext.chatId, chatId)) {
+            onGoToMessageIndex?.({
+                index: repliesTo.messageIndex,
+            });
+        } else {
+            navigate(getUrl());
+        }
+    }
+</script>
+
+<Link onClick={zoomToMessage}>
+    <div
+        class="reply-wrapper"
+        class:me
+        class:rtl={$rtlStore}
+        class:p2pSwap={isP2PSwap}
+        class:crypto={repliesTo.content.kind === "crypto_content"}>
+        <h4 class="username" class:text-content={isTextContent}>
+            {displayName}
+        </h4>
+        {#if repliesTo.content !== undefined}
+            <div class="inert">
+                <ChatMessageContent
+                    {me}
+                    {readonly}
+                    messageContext={repliesTo.sourceContext}
+                    {intersecting}
+                    messageId={repliesTo.messageId}
+                    messageIndex={repliesTo.messageIndex}
+                    senderId={repliesTo.senderId}
+                    edited={repliesTo.edited}
+                    fill={false}
+                    failed={false}
+                    blockLevelMarkdown={true}
+                    truncate
+                    reply
+                    {onRemovePreview}
+                    content={repliesTo.content}
+                    ogPreviews={[]} />
+            </div>
+            {#if debug}
+                <pre>EventIdx: {repliesTo.eventIndex}</pre>
+                <pre>MsgId: {repliesTo.messageId}</pre>
+                <pre>SenderId: {repliesTo.senderId}</pre>
+            {/if}
+        {:else}
+            {"TODO - we don't have the message content for this"}
+        {/if}
+    </div>
+</Link>
+
+<style lang="scss">
+    :global(.reply-wrapper.me a) {
+        color: inherit;
+    }
+
+    .reply-wrapper {
+        border-radius: $sp3;
+        padding: $sp3;
+        background-color: var(--currentChat-msg-bg);
+        color: var(--currentChat-msg-txt);
+        border: var(--bw) solid var(--replies-bd);
+        cursor: pointer;
+        margin-bottom: $sp3;
+        overflow: hidden;
+        @include nice-scrollbar();
+        max-height: 300px;
+
+        .inert {
+            pointer-events: none;
+        }
+
+        &.me {
+            background-color: var(--currentChat-msg-me-bg);
+            border: var(--bw) solid var(--currentChat-msg-me-bd);
+            color: var(--currentChat-msg-me-txt);
+        }
+
+        &:after {
+            content: "";
+            display: table;
+            clear: both;
+        }
+
+        &.p2pSwap {
+            max-width: 350px;
+        }
+    }
+
+    .username {
+        margin: 0;
+        margin-bottom: $sp1;
+        display: inline;
+
+        &.text-content {
+            display: block;
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/ReplyingTo.svelte b/frontend/app/src/desktop/features/chats/core/ReplyingTo.svelte
new file mode 100644
index 0000000000..9398d9f2cc
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/ReplyingTo.svelte
@@ -0,0 +1,124 @@
+<script lang="ts">
+    import type { CreatedUser, EnhancedReplyContext, OpenChat } from "@client";
+    import {
+        iconSize,
+        selectedChatWebhooksStore,
+        selectedCommunityMembersStore,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import Close from "svelte-material-icons/Close.svelte";
+    import { rtlStore } from "@src/stores/rtl";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import ChatMessageContent from "@src/desktop/features/chats/core/content/ChatMessageContent.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        replyingTo: EnhancedReplyContext;
+        user: CreatedUser;
+        readonly: boolean;
+        timestamp?: bigint | undefined;
+        onCancelReply: () => void;
+    }
+
+    let { replyingTo, user, readonly, timestamp = undefined, onCancelReply }: Props = $props();
+
+    let me = $derived(replyingTo.sender?.userId === user?.userId);
+
+    let displayName = $derived(
+        me
+            ? client.toTitleCase($_("you"))
+            : client.getDisplayName(
+                  replyingTo.sender?.userId,
+                  $selectedCommunityMembersStore,
+                  $selectedChatWebhooksStore,
+              ),
+    );
+</script>
+
+<div
+    class="replying"
+    class:me
+    class:rtl={$rtlStore}
+    class:crypto={replyingTo.content.kind === "crypto_content"}>
+    <div class="close-icon" onclick={onCancelReply}>
+        <HoverIcon compact>
+            <Close size={$iconSize} color={me ? "#fff" : "#aaa"} />
+        </HoverIcon>
+    </div>
+    <h4 class="username">
+        {displayName}
+    </h4>
+    <div class="reply-content">
+        <ChatMessageContent
+            {readonly}
+            {timestamp}
+            messageContext={replyingTo.sourceContext}
+            fill={false}
+            failed={false}
+            blockLevelMarkdown={false}
+            {me}
+            intersecting={true}
+            messageId={replyingTo.messageId}
+            messageIndex={replyingTo.messageIndex}
+            senderId={replyingTo.senderId}
+            truncate
+            edited={replyingTo.edited}
+            content={replyingTo.content}
+            ogPreviews={[]}
+            reply />
+    </div>
+</div>
+
+<style lang="scss">
+    :global(.replying.me a) {
+        color: inherit;
+    }
+
+    .replying {
+        @include font(book, normal, fs-100);
+        margin-top: $sp4;
+        min-width: 120px;
+        border-radius: $sp3;
+        padding: $sp3;
+        background-color: var(--currentChat-msg-bg);
+        color: var(--currentChat-msg-txt);
+        position: relative;
+        @include nice-scrollbar();
+        max-height: 150px;
+
+        .close-icon {
+            position: absolute;
+            top: $sp2;
+            right: $sp2;
+        }
+
+        &.rtl {
+            .close-icon {
+                right: unset;
+                left: $sp2;
+            }
+        }
+
+        &.me {
+            background-color: var(--currentChat-msg-me-bg);
+            color: #ffffff;
+        }
+
+        &:after {
+            content: "";
+            display: table;
+            clear: both;
+        }
+
+        .reply-content {
+            pointer-events: none;
+        }
+    }
+
+    .username {
+        margin: 0;
+        margin-bottom: $sp2;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/ReportMessage.svelte b/frontend/app/src/desktop/features/chats/core/ReportMessage.svelte
new file mode 100644
index 0000000000..c0b79a6ed1
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/ReportMessage.svelte
@@ -0,0 +1,131 @@
+<script lang="ts">
+    import { iconSize, mobileWidth, type ChatIdentifier, type OpenChat } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import Flag from "svelte-material-icons/Flag.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import Checkbox from "@src/desktop/shared/Checkbox.svelte";
+    import Legend from "@src/desktop/shared/Legend.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import Select from "@src/desktop/shared/Select.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+
+    interface Props {
+        chatId: ChatIdentifier;
+        messageId: bigint;
+        threadRootMessageIndex: number | undefined;
+        canDelete: boolean;
+        onClose: () => void;
+    }
+
+    let { chatId, messageId, threadRootMessageIndex, canDelete, onClose }: Props = $props();
+
+    const client = getContext<OpenChat>("client");
+
+    let deleteMessage = $state(false);
+    let busy = false;
+    let selectedReasonIndex = $state(-1);
+    let reasons = [
+        "report.pleaseSelect",
+        "report.threat",
+        "report.child",
+        "report.nonConsensual",
+        "report.selfHarm",
+        "report.violence",
+        "report.scam",
+    ];
+
+    let valid = $derived(selectedReasonIndex > -1);
+
+    function createReport() {
+        report();
+        onClose();
+    }
+
+    function report() {
+        client
+            .reportMessage(chatId, threadRootMessageIndex, messageId, canDelete && deleteMessage)
+            .then((success) => {
+                if (success) {
+                    toastStore.showSuccessToast(i18nKey("report.success"));
+                } else {
+                    toastStore.showFailureToast(i18nKey("report.failure"));
+                }
+            });
+    }
+</script>
+
+<Overlay {onClose} dismissible>
+    <ModalContent {onClose} closeIcon>
+        {#snippet header()}
+            <span class="header">
+                <Flag size={$iconSize} color={"var(--error)"} />
+                <h1><Translatable resourceKey={i18nKey("report.title")} /></h1>
+            </span>
+        {/snippet}
+        {#snippet body()}
+            <span>
+                <div class="reason">
+                    <Legend label={i18nKey("report.reason")} />
+                    <Select bind:value={selectedReasonIndex}>
+                        {#each reasons as reason, i}
+                            <option disabled={i === 0} value={i - 1}
+                                ><Translatable resourceKey={i18nKey(reason)} /></option>
+                        {/each}
+                    </Select>
+                </div>
+                {#if canDelete}
+                    <div class="delete">
+                        <Checkbox
+                            id={"delete_message"}
+                            label={i18nKey("report.deleteMessage")}
+                            bind:checked={deleteMessage} />
+                    </div>
+                {/if}
+                <div class="advice">
+                    <Markdown
+                        text={$_("report.advice", {
+                            values: { rules: "https://oc.app/guidelines?section=3" },
+                        })} />
+                </div>
+            </span>
+        {/snippet}
+        {#snippet footer()}
+            <span>
+                <ButtonGroup>
+                    <Button secondary small={!$mobileWidth} tiny={$mobileWidth} onClick={onClose}
+                        ><Translatable resourceKey={i18nKey("cancel")} /></Button>
+                    <Button
+                        disabled={busy || !valid}
+                        loading={busy}
+                        small={!$mobileWidth}
+                        tiny={$mobileWidth}
+                        onClick={createReport}
+                        ><Translatable resourceKey={i18nKey("report.menu")} /></Button>
+                </ButtonGroup>
+            </span>
+        {/snippet}
+    </ModalContent>
+</Overlay>
+
+<style lang="scss">
+    .header {
+        display: flex;
+        gap: $sp3;
+        align-items: center;
+    }
+
+    .advice {
+        @include font(book, normal, fs-80);
+        color: var(--txt-light);
+    }
+
+    .delete {
+        margin-bottom: $sp4;
+    }
+</style>
diff --git a/frontend/app/src/components/home/RulesEditor.svelte b/frontend/app/src/desktop/features/chats/core/RulesEditor.svelte
similarity index 90%
rename from frontend/app/src/components/home/RulesEditor.svelte
rename to frontend/app/src/desktop/features/chats/core/RulesEditor.svelte
index 7e74036f74..26e90d47c3 100644
--- a/frontend/app/src/components/home/RulesEditor.svelte
+++ b/frontend/app/src/desktop/features/chats/core/RulesEditor.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
     import { _ } from "svelte-i18n";
-    import TextArea from "../TextArea.svelte";
-    import Legend from "../Legend.svelte";
-    import Toggle from "../Toggle.svelte";
+    import TextArea from "@src/desktop/shared/TextArea.svelte";
+    import Legend from "@src/desktop/shared/Legend.svelte";
+    import Toggle from "@src/desktop/shared/Toggle.svelte";
     import type { UpdatedRules, Level, ResourceKey } from "@client";
 
-    import { i18nKey } from "../../i18n/i18n";
-    import Translatable from "../Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/ui/Translatable.svelte";
 
     const MAX_RULES_LENGTH = 1024;
 
diff --git a/frontend/app/src/desktop/features/chats/core/SecureButton.svelte b/frontend/app/src/desktop/features/chats/core/SecureButton.svelte
new file mode 100644
index 0000000000..c842a6a1b8
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/SecureButton.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import type { ButtonProps } from "@src/ui/Button.svelte";
+    import Button from "@src/ui/Button.svelte";
+    import { suspectedAutomationBot } from "@src/stores/automation";
+    import { isTouchDevice } from "@src/utils/devices";
+
+    let {
+        children,
+        onClick,
+        label,
+        ...rest
+    }: ButtonProps & { label: string; onClick: (ev: MouseEvent) => void } = $props();
+
+    // real users move, pause and then click. Bots either don't move at all or move and then click immediately
+    const PAUSE_TRESHOLD = 10;
+
+    let lastMoved = Date.now();
+
+    onMount(() => {
+        document.addEventListener("mousemove", mousemove);
+        return () => {
+            document.removeEventListener("mousemove", mousemove);
+        };
+    });
+
+    function mousemove() {
+        lastMoved = Date.now();
+    }
+
+    function probablyBot(ev: MouseEvent): boolean {
+        const pause = Date.now() - lastMoved;
+        const fakePause = pause < PAUSE_TRESHOLD && !isTouchDevice;
+        return fakePause || !ev.isTrusted || $suspectedAutomationBot;
+    }
+
+    function internalOnclick(ev: MouseEvent) {
+        if (probablyBot(ev)) {
+            console.log("Looks like this button was clicked by a bot");
+        } else {
+            onClick(ev);
+        }
+    }
+</script>
+
+<Button onClick={internalOnclick} {...rest}>
+    {@render children?.()}
+</Button>
diff --git a/frontend/app/src/components/home/SelectPermissionRole.svelte b/frontend/app/src/desktop/features/chats/core/SelectPermissionRole.svelte
similarity index 93%
rename from frontend/app/src/components/home/SelectPermissionRole.svelte
rename to frontend/app/src/desktop/features/chats/core/SelectPermissionRole.svelte
index d7d90d3f5b..96da07b373 100644
--- a/frontend/app/src/components/home/SelectPermissionRole.svelte
+++ b/frontend/app/src/desktop/features/chats/core/SelectPermissionRole.svelte
@@ -10,11 +10,11 @@
     import { _ } from "svelte-i18n";
     import Check from "svelte-material-icons/Check.svelte";
     import ChevronDown from "svelte-material-icons/ChevronDown.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import Menu from "../Menu.svelte";
-    import MenuIcon from "../MenuIcon.svelte";
-    import MenuItem from "../MenuItem.svelte";
-    import Translatable from "../Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Menu from "@src/desktop/shared/Menu.svelte";
+    import MenuIcon from "@src/desktop/shared/MenuIcon.svelte";
+    import MenuItem from "@src/desktop/shared/MenuItem.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
 
     interface Props {
         label: ResourceKey;
diff --git a/frontend/app/src/desktop/features/chats/core/SelectUsers.svelte b/frontend/app/src/desktop/features/chats/core/SelectUsers.svelte
new file mode 100644
index 0000000000..d4d910e7e5
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/SelectUsers.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+    import FindUser from "@src/desktop/shared/FindUser.svelte";
+    import ErrorMessage from "@src/desktop/shared/ErrorMessage.svelte";
+    import UserPill from "@src/desktop/shared/UserPill.svelte";
+    import type { UserOrUserGroup, UserSummary } from "@client";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+
+    interface Props {
+        mode: "add" | "edit";
+        selectedUsers: UserSummary[];
+        enabled?: boolean;
+        userLookup: (searchTerm: string) => Promise<[UserSummary[], UserSummary[]]>;
+        onDeleteUser: (user: UserOrUserGroup) => void;
+        onSelectUser: (user: UserSummary) => void;
+    }
+
+    let {
+        mode,
+        selectedUsers,
+        enabled = true,
+        userLookup,
+        onDeleteUser,
+        onSelectUser,
+    }: Props = $props();
+
+    let error: string | undefined = undefined;
+</script>
+
+{#if selectedUsers.length > 0}
+    <div class="selected">
+        {#each selectedUsers as user (user.userId)}
+            <UserPill {onDeleteUser} userOrGroup={user} />
+        {/each}
+    </div>
+{/if}
+{#if error !== undefined}
+    <ErrorMessage><Translatable resourceKey={i18nKey("errorSearchingForUser")} /></ErrorMessage>
+{/if}
+
+<div class="find-user">
+    <FindUser {userLookup} {enabled} {mode} {onSelectUser} />
+</div>
+
+<style lang="scss">
+    .selected {
+        padding: 0 $sp4 $sp4 $sp4;
+        display: flex;
+        flex-wrap: wrap;
+        gap: $sp3;
+    }
+</style>
diff --git a/frontend/app/src/components/home/Smiley.svelte b/frontend/app/src/desktop/features/chats/core/Smiley.svelte
similarity index 100%
rename from frontend/app/src/components/home/Smiley.svelte
rename to frontend/app/src/desktop/features/chats/core/Smiley.svelte
diff --git a/frontend/app/src/components/home/StageHeader.svelte b/frontend/app/src/desktop/features/chats/core/StageHeader.svelte
similarity index 94%
rename from frontend/app/src/components/home/StageHeader.svelte
rename to frontend/app/src/desktop/features/chats/core/StageHeader.svelte
index 12f4a59626..726c6beb38 100644
--- a/frontend/app/src/components/home/StageHeader.svelte
+++ b/frontend/app/src/desktop/features/chats/core/StageHeader.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-    import Translatable from "../Translatable.svelte";
-    import { i18nKey } from "../../i18n/i18n";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
 
     type Step = {
         key: string;
diff --git a/frontend/app/src/desktop/features/chats/core/ThreadSummary.svelte b/frontend/app/src/desktop/features/chats/core/ThreadSummary.svelte
new file mode 100644
index 0000000000..6d0e7016ee
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/ThreadSummary.svelte
@@ -0,0 +1,179 @@
+<script lang="ts">
+    import type { ChatIdentifier, OpenChat, ThreadSummary } from "@client";
+    import {
+        allUsersStore,
+        AvatarSize,
+        messagesRead,
+        mobileWidth,
+        threadsFollowedByMeStore,
+    } from "@client";
+    import { getContext, onMount } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { pop } from "@src/utils/transition";
+    import Avatar from "@src/desktop/shared/Avatar.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        threadSummary: ThreadSummary;
+        indent: boolean;
+        me: boolean;
+        selected: boolean;
+        url: string;
+        chatId: ChatIdentifier;
+        threadRootMessageIndex: number;
+    }
+
+    let { threadSummary, indent, me, selected, url, chatId, threadRootMessageIndex }: Props =
+        $props();
+
+    let isFollowedByMe = $derived(
+        $threadsFollowedByMeStore.get(chatId)?.has(threadRootMessageIndex) ?? false,
+    );
+    let lastMessageIndex = $derived(threadSummary.numberOfReplies - 1); //using this as a surrogate for message index for now
+    let unreadCount = $derived(
+        client.unreadThreadMessageCount(chatId, threadRootMessageIndex, lastMessageIndex),
+    );
+
+    onMount(() => {
+        return messagesRead.subscribe(() => {
+            unreadCount = client.unreadThreadMessageCount(
+                chatId,
+                threadRootMessageIndex,
+                lastMessageIndex,
+            );
+        });
+    });
+</script>
+
+<div class="thread-summary-wrapper" class:me class:indent>
+    <a href={url} class="thread-summary" class:selected>
+        <div class="thread-avatars">
+            {#each [...threadSummary.participantIds].slice(0, 5) as participantId}
+                <Avatar
+                    url={client.userAvatarUrl($allUsersStore.get(participantId))}
+                    userId={participantId}
+                    size={AvatarSize.Tiny} />
+            {/each}
+            {#if threadSummary.participantIds.size > 5}
+                <div class="thread-extra">
+                    {`+${threadSummary.participantIds.size - 5}`}
+                </div>
+            {/if}
+        </div>
+        <div class="thread-legend">
+            <span
+                >{$_("thread.nreplies", {
+                    values: {
+                        number: threadSummary.numberOfReplies.toString(),
+                        replies:
+                            threadSummary.numberOfReplies === 1
+                                ? $_("thread.reply")
+                                : $_("thread.replies"),
+                        message: $mobileWidth
+                            ? ""
+                            : $_("thread.lastMessage", {
+                                  values: {
+                                      date: client.formatMessageDate(
+                                          threadSummary.latestEventTimestamp,
+                                          $_("today"),
+                                          $_("yesterday"),
+                                          true,
+                                          true,
+                                      ),
+                                  },
+                              }),
+                    },
+                })}
+                <div class:selected class="arrow">&#8595;</div></span>
+        </div>
+    </a>
+    {#if isFollowedByMe && unreadCount > 0}
+        <div
+            in:pop={{ duration: 1500 }}
+            title={$_("chatSummary.unread", { values: { count: unreadCount.toString() } })}
+            class="unread-count">
+            {unreadCount > 999 ? "999+" : unreadCount}
+        </div>
+    {/if}
+</div>
+
+<style lang="scss">
+    $avatar-width: 53px;
+    $avatar-width-mob: 43px;
+
+    .unread-count {
+        @include unread();
+    }
+
+    .thread-summary-wrapper {
+        display: flex;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: $sp3;
+        margin-bottom: $sp2;
+
+        &.indent {
+            margin-left: $avatar-width;
+            @include mobile() {
+                margin-left: $avatar-width-mob;
+            }
+        }
+    }
+
+    .arrow {
+        transition: transform 200ms ease-in-out;
+        display: inline-block;
+        transform-origin: 50% 50%;
+
+        &.selected {
+            transform: rotate(-90deg);
+        }
+    }
+
+    .thread-summary {
+        display: inline-flex;
+        align-items: center;
+        gap: $sp2;
+        padding: $sp2 $sp3;
+        border-radius: $sp3;
+        cursor: pointer;
+        transition: background 200ms ease-in-out;
+        border: 1px solid var(--bd);
+        color: var(--currentChat-msg-txt);
+
+        @media (hover: hover) {
+            &:not(.selected):hover {
+                background: rgba(255, 255, 255, 0.1);
+            }
+        }
+
+        &.selected {
+            background: var(--notificationBar-bg);
+            color: var(--notificationBar-txt);
+            border: 1px solid transparent;
+        }
+
+        .thread-avatars {
+            display: flex;
+            gap: $sp2;
+        }
+
+        .thread-legend {
+            @include font(book, normal, fs-80);
+            margin-left: $sp2;
+        }
+
+        .thread-extra {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-radius: 50%;
+            width: toRem(25);
+            height: toRem(25);
+            @include font-size(fs-60);
+            background-color: rgba(0, 0, 0, 0.15);
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/ThrottleCountdown.svelte b/frontend/app/src/desktop/features/chats/core/ThrottleCountdown.svelte
new file mode 100644
index 0000000000..9587155fe1
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/ThrottleCountdown.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+    import Progress from "@src/desktop/shared/Progress.svelte";
+    import DisappearsAt from "./DisappearsAt.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { now500 } from "@src/stores/time";
+    import { throttleDeadline } from "@client";
+    import { untrack } from "svelte";
+
+    interface Props {
+        deadline: number;
+    }
+
+    let { deadline }: Props = $props();
+
+    let seconds = $state(0);
+    let percent = $state(0);
+
+    $effect(() => {
+        calculate(deadline, $now500);
+    });
+
+    function calculate(deadline: number, now: number) {
+        untrack(() => {
+            seconds = Math.floor((deadline - now) / 1000);
+            percent = Math.floor((seconds / 60) * 100);
+            if (deadline <= $now500) {
+                throttleDeadline.set(0);
+            }
+        });
+    }
+</script>
+
+<div class="throttle">
+    <Progress size={"20px"} {percent}>
+        <div class="msg">
+            <DisappearsAt me={true} percentageExpired={percent} expiresAt={deadline} />
+            <Translatable resourceKey={i18nKey("throttleMessage", { time: seconds })} />
+        </div>
+    </Progress>
+</div>
+
+<style lang="scss">
+    :global(.throttle .bar) {
+        height: 40px;
+    }
+
+    .throttle {
+        padding: 0;
+        width: 100%;
+
+        .msg {
+            display: flex;
+            gap: $sp3;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+        }
+    }
+</style>
diff --git a/frontend/app/src/components/home/TimeAndTicks.svelte b/frontend/app/src/desktop/features/chats/core/TimeAndTicks.svelte
similarity index 97%
rename from frontend/app/src/components/home/TimeAndTicks.svelte
rename to frontend/app/src/desktop/features/chats/core/TimeAndTicks.svelte
index c434cf52bf..477a92bf5e 100644
--- a/frontend/app/src/components/home/TimeAndTicks.svelte
+++ b/frontend/app/src/desktop/features/chats/core/TimeAndTicks.svelte
@@ -6,8 +6,8 @@
     import CheckCircleOutline from "svelte-material-icons/CheckCircleOutline.svelte";
     import DeletedIcon from "svelte-material-icons/DeleteOutline.svelte";
     import Pin from "svelte-material-icons/Pin.svelte";
-    import { rtlStore } from "../../stores/rtl";
-    import { currentTheme } from "../../theme/themes";
+    import { rtlStore } from "@src/stores/rtl";
+    import { currentTheme } from "@src/theme/themes";
     import DisappearsAt from "./DisappearsAt.svelte";
 
     const client = getContext<OpenChat>("client");
diff --git a/frontend/app/src/components/home/TimelineDate.svelte b/frontend/app/src/desktop/features/chats/core/TimelineDate.svelte
similarity index 100%
rename from frontend/app/src/components/home/TimelineDate.svelte
rename to frontend/app/src/desktop/features/chats/core/TimelineDate.svelte
diff --git a/frontend/app/src/desktop/features/chats/core/TipBuilder.svelte b/frontend/app/src/desktop/features/chats/core/TipBuilder.svelte
new file mode 100644
index 0000000000..b155951ad7
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/TipBuilder.svelte
@@ -0,0 +1,453 @@
+<script lang="ts">
+    import type {
+        Message,
+        MessageContext,
+        OpenChat,
+        PendingCryptocurrencyTransfer,
+    } from "@client";
+    import {
+        cryptoBalanceStore,
+        cryptoLookup,
+        currentUserIdStore,
+        exchangeRatesLookupStore as exchangeRatesLookup,
+        lastCryptoSent,
+        mobileWidth,
+    } from "@client";
+    import { getContext, onMount } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { quadOut } from "svelte/easing";
+    import { Tween } from "svelte/motion";
+    import { fade } from "svelte/transition";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { pinNumberErrorMessageStore } from "@src/stores/pinNumber";
+    import { toastStore } from "@src/stores/toast";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import ErrorMessage from "@src/desktop/shared/ErrorMessage.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import AccountInfo from "@src/desktop/shared/AccountInfo.svelte";
+    import BalanceWithRefresh from "@src/desktop/shared/BalanceWithRefresh.svelte";
+    import CryptoSelector from "@src/desktop/shared/CryptoSelector.svelte";
+    import TipButton from "./TipButton.svelte";
+    import TokenInput from "@src/desktop/shared/TokenInput.svelte";
+
+    const client = getContext<OpenChat>("client");
+    const increments: Increment[] = [1, 10, 100];
+    type Increment = 1 | 10 | 100;
+
+    interface Props {
+        ledger: string;
+        msg: Message;
+        messageContext: MessageContext;
+        onClose: () => void;
+    }
+
+    let { ledger = $bindable(), msg, messageContext, onClose }: Props = $props();
+
+    const tweenOptions = {
+        duration: 800,
+        easing: quadOut,
+    };
+
+    let refreshing = $state(false);
+    let error: string | undefined = $state(undefined);
+    let toppingUp = $state(false);
+    let tokenChanging = $state(true);
+    let balanceWithRefresh: BalanceWithRefresh;
+    let dollar = $state<HTMLElement | undefined>();
+    let dollarTop = new Tween(-1000, tweenOptions);
+    let dollarOpacity = new Tween(0, tweenOptions);
+    let dollarScale = new Tween(0, tweenOptions);
+    let centAmount = $state(0);
+    let showCustomTip = $state(false);
+    let validAmount: boolean = $state(false);
+    let draftAmount = $state(0n);
+
+    onMount(() => {
+        let d = document.getElementById("tip-dollar");
+        if (!d) {
+            d = document.createElement("div");
+            d.id = "tip-dollar";
+            d.className = "tip-dollar";
+            const t = document.createTextNode("🤑");
+            d.appendChild(t);
+            document.body.appendChild(d);
+        }
+        dollar = d;
+    });
+
+    function amountLabel(n: Increment): string {
+        return `$${(n / 100).toFixed(2)}`;
+    }
+
+    function calculateCentAmount(e8s: bigint, exchangeRate: number): number {
+        const tokens = Number(e8s) / Math.pow(10, tokenDetails.decimals);
+        const dollar = tokens * exchangeRate;
+        const cents = dollar * 100;
+        return Math.round(cents);
+    }
+
+    function to2SigFigs(num: number): number {
+        return parseFloat(num.toPrecision(2));
+    }
+
+    function calculateAmount(centAmount: number, exchangeRate: number): bigint {
+        const e8s = ((centAmount / 100) * Math.pow(10, tokenDetails.decimals)) / exchangeRate;
+        return BigInt(Math.round(e8s));
+    }
+
+    function reset() {
+        balanceWithRefresh.refresh();
+    }
+
+    function cancel() {
+        toppingUp = false;
+        onClose();
+    }
+
+    function onBalanceRefreshed() {
+        onBalanceRefreshFinished();
+        error = undefined;
+    }
+
+    function onBalanceRefreshError(err: string) {
+        onBalanceRefreshFinished();
+        error = err;
+    }
+
+    function onBalanceRefreshFinished() {
+        toppingUp = false;
+        tokenChanging = false;
+        if (remainingBalance < 0) {
+            remainingBalance = 0n;
+            draftAmount = cryptoBalance - tokenDetails.transferFee;
+            if (draftAmount < 0) {
+                draftAmount = 0n;
+            }
+        }
+    }
+
+    function bounceMoneyMouthFrom(target: HTMLElement) {
+        if (!dollar) return;
+        const buttonRect = target.getBoundingClientRect();
+        const hDiff = buttonRect.height - dollar.clientHeight;
+        const wDiff = buttonRect.width - dollar.clientWidth;
+        const top = buttonRect.top + hDiff / 2;
+        const left = buttonRect.left + wDiff / 2;
+
+        Promise.all([
+            dollarTop.set(top, { duration: 0 }),
+            dollarOpacity.set(1, { duration: 0 }),
+            dollarScale.set(0, { duration: 0 }),
+        ]).then(() => {
+            dollarTop.target = top - 300;
+            dollarOpacity.target = 0;
+            dollarScale.target = 2;
+            dollarOpacity.set(0);
+        });
+        dollar.style.left = `${left}px`;
+    }
+
+    function clickAmount(e: MouseEvent, increment: Increment) {
+        e.preventDefault();
+        bounceMoneyMouthFrom(e.target as HTMLElement);
+        centAmount += increment;
+        draftAmount = calculateAmount(centAmount, exchangeRate);
+    }
+
+    function maxAmount(balance: bigint): bigint {
+        return balance - transferFees;
+    }
+
+    function send(e: Event) {
+        e.preventDefault();
+        const transfer: PendingCryptocurrencyTransfer = {
+            kind: "pending",
+            ledger,
+            token: tokenDetails.symbol,
+            recipient: msg.sender,
+            amountE8s: draftAmount,
+            feeE8s: tokenDetails.transferFee,
+            createdAtNanos: BigInt(Date.now()) * 1_000_000n,
+        };
+        lastCryptoSent.set(ledger);
+
+        const currentTip = (msg.tips[transfer.ledger] ?? {})[$currentUserIdStore] ?? 0n;
+
+        client.tipMessage(messageContext, msg.messageId, transfer, currentTip).then((resp) => {
+            if (resp.kind === "failure") {
+                toastStore.showFailureToast(i18nKey("tip.failure"));
+            } else if (resp.kind !== "success") {
+                toastStore.showFailureToast(pinNumberErrorMessageStore);
+            }
+        });
+
+        onClose();
+    }
+    let tokenDetails = $derived($cryptoLookup.get(ledger)!);
+    let cryptoBalance = $derived($cryptoBalanceStore.get(ledger) ?? 0n);
+    let exchangeRate = $derived(
+        to2SigFigs($exchangeRatesLookup.get(tokenDetails.symbol.toLowerCase())?.toUSD ?? 0),
+    );
+    $effect(() => {
+        if (ledger !== undefined) {
+            // reset when ledger changes
+            centAmount = 0;
+            tokenChanging = true;
+            draftAmount = 0n;
+        }
+    });
+    let displayDraftAmount = $derived(client.formatTokens(draftAmount, tokenDetails.decimals));
+    let displayFee = $derived(client.formatTokens(tokenDetails.transferFee, tokenDetails.decimals));
+    let remainingBalance = $state(0n);
+    $effect(() => {
+        remainingBalance =
+            draftAmount > 0n
+                ? cryptoBalance - draftAmount - tokenDetails.transferFee
+                : cryptoBalance;
+    });
+    let valid = $derived(
+        draftAmount > 0n && remainingBalance >= 0n && error === undefined && !tokenChanging,
+    );
+    let zero = $derived(cryptoBalance <= tokenDetails.transferFee && !tokenChanging);
+    let transferFees = $derived(tokenDetails.transferFee);
+    $effect(() => {
+        centAmount = calculateCentAmount(draftAmount, exchangeRate);
+    });
+    $effect(() => {
+        if (dollar) {
+            dollar.style.setProperty("top", `${dollarTop.current}px`);
+            dollar.style.setProperty("opacity", `${dollarOpacity.current}`);
+            dollar.style.setProperty(
+                "transform",
+                `scale(${dollarScale.current}) rotate(${dollarScale.current}turn)`,
+            );
+        }
+    });
+</script>
+
+<Overlay dismissible>
+    <ModalContent fill>
+        {#snippet header()}
+            <span class="header">
+                <div class="left">
+                    <div class="main-title">
+                        <div><Translatable resourceKey={i18nKey("tip.title")} /></div>
+                        <div>
+                            <CryptoSelector bind:ledger />
+                        </div>
+                    </div>
+                </div>
+                <BalanceWithRefresh
+                    bind:toppingUp
+                    bind:this={balanceWithRefresh}
+                    {ledger}
+                    value={remainingBalance}
+                    label={i18nKey("cryptoAccount.shortBalanceLabel")}
+                    bold
+                    showTopUp
+                    bind:refreshing
+                    onRefreshed={onBalanceRefreshed}
+                    onError={onBalanceRefreshError} />
+            </span>
+        {/snippet}
+        {#snippet body()}
+            <form onsubmit={send}>
+                <div class="body" class:zero={zero || toppingUp}>
+                    {#if zero || toppingUp}
+                        <AccountInfo {ledger} />
+                        {#if zero}
+                            <p>
+                                <Translatable
+                                    resourceKey={i18nKey("tokenTransfer.zeroBalance", {
+                                        token: tokenDetails.symbol,
+                                    })} />
+                            </p>
+                        {/if}
+                        <p><Translatable resourceKey={i18nKey("tokenTransfer.makeDeposit")} /></p>
+                    {:else}
+                        {#if exchangeRate > 0}
+                            <div class="amounts">
+                                {#each increments as increment}
+                                    <TipButton
+                                        label={i18nKey(amountLabel(increment))}
+                                        onClick={(e) => clickAmount(e, increment)}
+                                        disabled={exchangeRate === 0 ||
+                                            calculateAmount(centAmount + increment, exchangeRate) >
+                                                cryptoBalance - tokenDetails.transferFee} />
+                                {/each}
+                            </div>
+                            <div in:fade|local={{ duration: 300 }} class="message">
+                                {#if draftAmount > 0}
+                                    <div class="summary">
+                                        <div class="dollar-amount">
+                                            ${(centAmount / 100).toFixed(2)}
+                                        </div>
+                                        <div class="token-amount">
+                                            {displayDraftAmount}
+                                            {tokenDetails.symbol}
+                                        </div>
+                                        <div class="fee">
+                                            <Translatable
+                                                resourceKey={i18nKey("tip.plusFee", {
+                                                    fee: displayFee,
+                                                    token: tokenDetails.symbol,
+                                                })} />
+                                        </div>
+                                    </div>
+                                {:else}
+                                    <div class="summary">
+                                        <Translatable resourceKey={i18nKey("tip.advice")} />
+                                    </div>
+                                {/if}
+                            </div>
+                        {/if}
+                        <div class="custom-tip">
+                            {#if !showCustomTip && exchangeRate > 0}
+                                <!-- svelte-ignore a11y_click_events_have_key_events -->
+                                <!-- svelte-ignore a11y_missing_attribute -->
+                                <a
+                                    role="button"
+                                    tabindex="0"
+                                    onclick={() => (showCustomTip = true)}
+                                    class="options"
+                                    in:fade|local={{ duration: 500 }}
+                                    class:expanded={showCustomTip}>
+                                    <Translatable resourceKey={i18nKey("tip.showCustom")} />
+                                </a>
+                            {/if}
+
+                            {#if showCustomTip || exchangeRate <= 0}
+                                <div in:fade|local={{ duration: 500 }} class="custom-tip-amount">
+                                    <TokenInput
+                                        {ledger}
+                                        {transferFees}
+                                        bind:valid={validAmount}
+                                        maxAmount={maxAmount(cryptoBalance)}
+                                        bind:amount={draftAmount} />
+                                </div>
+                            {/if}
+                        </div>
+                        {#if error !== undefined}
+                            <div class="error">
+                                <ErrorMessage>{$_(error)}</ErrorMessage>
+                            </div>
+                        {/if}
+                    {/if}
+                </div>
+            </form>
+        {/snippet}
+        {#snippet footer()}
+            <span>
+                <ButtonGroup>
+                    <Button small={!$mobileWidth} tiny={$mobileWidth} secondary onClick={cancel}
+                        ><Translatable resourceKey={i18nKey("cancel")} /></Button>
+                    {#if toppingUp || zero}
+                        <Button
+                            small={!$mobileWidth}
+                            disabled={refreshing}
+                            loading={refreshing}
+                            tiny={$mobileWidth}
+                            onClick={reset}
+                            ><Translatable resourceKey={i18nKey("refresh")} /></Button>
+                    {:else}
+                        <Button
+                            small={!$mobileWidth}
+                            disabled={!valid}
+                            tiny={$mobileWidth}
+                            onClick={send}
+                            ><Translatable resourceKey={i18nKey("tokenTransfer.send")} /></Button>
+                    {/if}
+                </ButtonGroup>
+            </span>
+        {/snippet}
+    </ModalContent>
+</Overlay>
+
+<style lang="scss">
+    .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: $sp2;
+
+        .left {
+            flex: auto;
+            display: flex;
+            align-items: center;
+            gap: $sp4;
+
+            .main-title {
+                flex: auto;
+                display: flex;
+                align-items: baseline;
+                gap: 10px;
+                @include font(bold, normal, fs-120);
+            }
+        }
+    }
+
+    .body {
+        transition: background-color 100ms ease-in-out;
+        @include font(book, normal, fs-100, 28);
+        position: relative;
+
+        &.zero {
+            padding: 0 $sp4;
+        }
+    }
+
+    .message {
+        text-align: center;
+        margin-bottom: $sp4;
+    }
+
+    .error {
+        text-align: center;
+    }
+
+    .summary {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--txt);
+
+        .dollar-amount,
+        .fee,
+        .token-amount {
+            padding: 0 $sp4;
+        }
+
+        .dollar-amount,
+        .token-amount {
+            border-right: 1px solid var(--txt-light);
+        }
+
+        .fee {
+            color: var(--txt-light);
+            @include font(light, normal, fs-70);
+        }
+    }
+
+    .amounts {
+        display: flex;
+        justify-content: space-evenly;
+        gap: $sp2;
+        padding: $sp6 0;
+    }
+
+    .how-to {
+        margin-top: $sp4;
+    }
+
+    .custom-tip {
+        text-align: center;
+        @include font(light, normal, fs-80);
+
+        .custom-tip-amount {
+            padding: $sp4 $sp5;
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/TipButton.svelte b/frontend/app/src/desktop/features/chats/core/TipButton.svelte
new file mode 100644
index 0000000000..bfe5285e52
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/TipButton.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+    import { spring } from "svelte/motion";
+    import type { ResourceKey } from "@client";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    interface Props {
+        disabled?: boolean;
+        label: ResourceKey;
+        onClick: (e: MouseEvent) => void;
+    }
+
+    let { disabled = false, label, onClick }: Props = $props();
+
+    let buttonScale = spring(1);
+
+    function mouseDown() {
+        buttonScale.set(1.1);
+        window.setTimeout(() => buttonScale.set(1), 200);
+    }
+</script>
+
+<button
+    style={`transform: scale(${$buttonScale})`}
+    onmousedown={mouseDown}
+    {disabled}
+    onclick={onClick}
+    class="amount">
+    <Translatable resourceKey={label} />
+</button>
+
+<style lang="scss">
+    .amount {
+        $size: 100px;
+        border-radius: $sp3;
+        padding: $sp4;
+        border: 1px solid var(--bd);
+        transition:
+            background 250ms ease-in-out,
+            color 250ms ease-in-out;
+        text-align: center;
+        cursor: pointer;
+        height: $size;
+        width: $size;
+        border-radius: 50%;
+        display: grid;
+        align-content: center;
+        background: transparent;
+        color: var(--button-txt);
+        background: var(--button-bg);
+        position: relative;
+        &:hover {
+            background: var(--button-hv);
+        }
+
+        @include font(book, normal, fs-120);
+
+        @include mobile() {
+            $size: 100px;
+            height: $size;
+            width: $size;
+        }
+
+        &:disabled {
+            background: transparent;
+            color: var(--txt-light);
+            cursor: not-allowed;
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/UnresolvedReply.svelte b/frontend/app/src/desktop/features/chats/core/UnresolvedReply.svelte
new file mode 100644
index 0000000000..15b672f238
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/UnresolvedReply.svelte
@@ -0,0 +1,28 @@
+<svelte:options immutable />
+
+<script lang="ts">
+    import { i18nKey } from "@src/i18n/i18n";
+    import { rtlStore } from "@src/stores/rtl";
+    import Translatable from "@src/ui/Translatable.svelte";
+</script>
+
+<div class="reply-wrapper" class:rtl={$rtlStore}>
+    <Translatable resourceKey={i18nKey("unresolvedReply")} />
+</div>
+
+<style lang="scss">
+    .reply-wrapper {
+        border-radius: $sp4;
+        padding: $sp4;
+        background-color: var(--currentChat-msg-bg);
+        color: var(--txt);
+        cursor: pointer;
+        box-shadow: -7px 0px 0px 0px var(--currentChat-msg-reply-accent);
+        border: 2px solid var(--currentChat-msg-reply-accent);
+        margin-bottom: $sp3;
+
+        &.rtl {
+            box-shadow: 7px 0px 0px 0px var(--button-bg);
+        }
+    }
+</style>
diff --git a/frontend/app/src/components/home/VisibilityControl.svelte b/frontend/app/src/desktop/features/chats/core/VisibilityControl.svelte
similarity index 94%
rename from frontend/app/src/components/home/VisibilityControl.svelte
rename to frontend/app/src/desktop/features/chats/core/VisibilityControl.svelte
index 8340039dc7..377234fe4f 100644
--- a/frontend/app/src/components/home/VisibilityControl.svelte
+++ b/frontend/app/src/desktop/features/chats/core/VisibilityControl.svelte
@@ -8,13 +8,13 @@
         stripSuspendedGate,
     } from "@client";
     import { getContext } from "svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import Button from "../Button.svelte";
-    import Checkbox from "../Checkbox.svelte";
-    import Radio from "../Radio.svelte";
-    import Translatable from "../Translatable.svelte";
-    import DurationPicker from "./DurationPicker.svelte";
-    import AccessGateControl from "./access/AccessGateControl.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Button from "@src/ui/Button.svelte";
+    import Checkbox from "@src/desktop/shared/Checkbox.svelte";
+    import Radio from "@src/desktop/shared/Radio.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import DurationPicker from "@src/desktop/shared/DurationPicker.svelte";
+    import AccessGateControl from "@src/desktop/features/access/AccessGateControl.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/desktop/features/chats/core/VisibilityLabel.svelte b/frontend/app/src/desktop/features/chats/core/VisibilityLabel.svelte
new file mode 100644
index 0000000000..bebdf41096
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/VisibilityLabel.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+    import Translatable from "@src/ui/Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+
+    interface Props {
+        isPublic: boolean;
+    }
+
+    let { isPublic }: Props = $props();
+</script>
+
+<div class="visibility">
+    <div class={`img ${isPublic ? "public" : "private"}`}></div>
+    <div class="name">
+        <Translatable resourceKey={i18nKey(isPublic ? "access.public" : "access.private")} />
+    </div>
+</div>
+
+<style lang="scss">
+    .visibility {
+        display: flex;
+        gap: $sp2;
+        align-items: center;
+        text-transform: uppercase;
+        background-color: var(--chatSummary-bg-selected);
+        padding: $sp2 $sp3;
+        border-radius: $sp3;
+
+        .img {
+            background-repeat: no-repeat;
+            $size: 12px;
+            flex: 0 0 $size;
+            width: $size;
+            height: $size;
+
+            &.public {
+                background-image: url("/assets/unlocked.svg");
+            }
+
+            &.private {
+                background-image: url("/assets/locked.svg");
+            }
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/content/AudioAttacher.svelte b/frontend/app/src/desktop/features/chats/core/content/AudioAttacher.svelte
new file mode 100644
index 0000000000..9f65b3bb61
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/content/AudioAttacher.svelte
@@ -0,0 +1,129 @@
+<script lang="ts">
+    import { iconSize, quantiseWaveform, type AudioContent, type OpenChat } from "@client";
+    import { getContext, onMount } from "svelte";
+    import { _ } from "svelte-i18n";
+    import Microphone from "svelte-material-icons/Microphone.svelte";
+    import RadioboxMarked from "svelte-material-icons/RadioboxMarked.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        recording?: boolean;
+        percentRecorded?: number;
+        mimeType: string;
+        supported: boolean;
+        onAudioCaptured: (content: AudioContent) => void;
+    }
+
+    let {
+        recording = $bindable(false),
+        percentRecorded = $bindable(0),
+        mimeType,
+        supported = $bindable(),
+        onAudioCaptured,
+    }: Props = $props();
+
+    percentRecorded;
+
+    let mediaRecorder: MediaRecorder | undefined;
+
+    onMount(() => {
+        if (supported) {
+            // TODO - there are problems with this whole thing on safari.
+            // in particular, there is no access to the permissions api
+            if ("permissions" in navigator) {
+                navigator.permissions
+                    //@ts-ignore
+                    .query({ name: "microphone" })
+                    .then(function (result) {
+                        if (result.state === "denied") {
+                            // if they already said no, don't be rude
+                            supported = false;
+                        }
+                    })
+                    .catch((_err) => {
+                        console.log(
+                            "unable to check microphone permissions (probably unsupported)",
+                        );
+                    });
+            }
+        }
+    });
+
+    function stopRecording() {
+        if (mediaRecorder && mediaRecorder.state === "recording") {
+            mediaRecorder.stop();
+        }
+    }
+
+    function toggle() {
+        if (recording) {
+            stopRecording();
+        } else {
+            record();
+        }
+    }
+
+    function record() {
+        if (supported) {
+            navigator.mediaDevices
+                .getUserMedia({ audio: true, video: false })
+                .then((stream) => {
+                    recording = true;
+                    const recordedChunks: Blob[] = [];
+                    const maxSizes = client.maxMediaSizes();
+                    let totalSize = 0;
+                    let truncated = false;
+                    percentRecorded = 0;
+                    mediaRecorder = new MediaRecorder(stream, { mimeType });
+
+                    mediaRecorder.addEventListener("dataavailable", (e) => {
+                        if (e.data.size > 0) recordedChunks.push(e.data);
+                        totalSize += e.data.size;
+                        percentRecorded = (totalSize / maxSizes.audio) * 100;
+                        if (totalSize >= maxSizes.audio) {
+                            truncated = true;
+                            stopRecording();
+                        }
+                    });
+
+                    mediaRecorder.addEventListener("stop", async () => {
+                        const data = await new Blob(recordedChunks).arrayBuffer();
+                        mediaRecorder = undefined;
+                        recording = false;
+                        if (truncated) {
+                            // let the user know if we stopped recording prematurely
+                            toastStore.showFailureToast(i18nKey("maxAudioSize"));
+                        }
+                        const quantised = await quantiseWaveform(data.slice(0));
+                        onAudioCaptured({
+                            kind: "audio_content",
+                            mimeType: mimeType,
+                            blobData: new Uint8Array(data),
+                            blobUrl: client.dataToBlobUrl(data, mimeType),
+                            ...quantised,
+                        });
+                        stream.getTracks().forEach((track) => track.stop());
+                    });
+
+                    mediaRecorder.start(200);
+                })
+                .catch(() => (supported = false)); //catch the case where the user denies access
+        }
+    }
+</script>
+
+{#if supported}
+    <div onclick={toggle}>
+        <HoverIcon title={recording ? $_("stopRecording") : $_("recordAudioMessage")}>
+            {#if recording}
+                <RadioboxMarked size={$iconSize} color={"red"} />
+            {:else}
+                <Microphone size={$iconSize} color={"var(--icon-txt)"} />
+            {/if}
+        </HoverIcon>
+    </div>
+{/if}
diff --git a/frontend/app/src/desktop/features/chats/core/content/AudioContent.svelte b/frontend/app/src/desktop/features/chats/core/content/AudioContent.svelte
new file mode 100644
index 0000000000..fbe8def572
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/content/AudioContent.svelte
@@ -0,0 +1,138 @@
+<script lang="ts">
+    import type { AudioContent } from "@client";
+    import ContentCaption from "./ContentCaption.svelte";
+    import MusicNote from "svelte-material-icons/MusicNote.svelte";
+    import Pause from "svelte-material-icons/Pause.svelte";
+    import { setPlayingMedia } from "@src/utils/media";
+
+    interface Props {
+        content: AudioContent;
+        edited: boolean;
+        blockLevelMarkdown?: boolean;
+        me: boolean;
+    }
+
+    let { content, edited, blockLevelMarkdown = false, me }: Props = $props();
+
+    let inner = $derived(`var(--audio${me ? "-me" : ""}-inner)`);
+    let note = $derived(`var(--audio${me ? "-me" : ""}-note)`);
+
+    let audioPlayer: HTMLAudioElement | undefined = $state();
+    let playing: boolean = $state(false);
+    let percPlayed: number = $state(0);
+    const circum = 471.24;
+
+    function timeupdate() {
+        if (!audioPlayer) return;
+        const fractionPlayed = Math.min(audioPlayer.currentTime / audioPlayer.duration, 1);
+        percPlayed = fractionPlayed * 100;
+    }
+
+    function togglePlay() {
+        if (playing) {
+            audioPlayer?.pause();
+        } else {
+            audioPlayer?.play();
+        }
+    }
+
+    function onPlay() {
+        if (!audioPlayer) return;
+        playing = true;
+        setPlayingMedia(audioPlayer);
+    }
+</script>
+
+<audio
+    ontimeupdate={timeupdate}
+    preload="metadata"
+    onended={() => (playing = false)}
+    onplay={onPlay}
+    onpause={() => (playing = false)}
+    bind:this={audioPlayer}>
+    <track kind="captions" />
+    {#if content.blobUrl}
+        <source src={content.blobUrl} />
+    {/if}
+</audio>
+
+<div class="circular" role="button" onclick={togglePlay}>
+    <div class="circle">
+        <div class="number">
+            {#if playing}
+                <Pause size={"2.5em"} color={note} />
+            {:else}
+                <MusicNote size={"2.5em"} color={note} />
+            {/if}
+        </div>
+        <svg class="pie" viewBox="0 0 320 320">
+            <clipPath id="hollow">
+                <path
+                    d="M 160 160 m -160 0 a 160 160 0 1 0 320 0 a 160 160 0 1 0 -320 0 Z M 160 160 m -100 0 a 100 100 0 0 1 200 0 a 100 100 0 0 1 -200 0 Z"
+                    style={`fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);`} />
+            </clipPath>
+
+            <circle
+                class:me
+                class="background"
+                cx={160}
+                cy={160}
+                r={150}
+                clip-path="url(#hollow)" />
+
+            {#if percPlayed > 0}
+                <circle
+                    class={`slice`}
+                    cx={160}
+                    cy={160}
+                    r={75}
+                    stroke={inner}
+                    clip-path="url(#hollow)"
+                    transform={`rotate(${-90})`}
+                    stroke-dasharray={`${(percPlayed * circum) / 100} ${circum}`} />
+            {/if}
+        </svg>
+    </div>
+</div>
+
+<ContentCaption caption={content.caption} {edited} {blockLevelMarkdown} />
+
+<style lang="scss">
+    $size: 120px;
+
+    .circle {
+        position: relative;
+        height: $size;
+        width: $size;
+        margin: auto;
+        position: relative;
+        background: transparent;
+
+        .number {
+            position: absolute;
+            top: calc(50% - 1.25em);
+            left: calc(50% - 1.25em);
+        }
+
+        .background {
+            fill: var(--audio-outer);
+
+            &.me {
+                fill: var(--audio-me-outer);
+            }
+        }
+    }
+
+    .slice {
+        fill: transparent;
+        transform-origin: 50% 50%;
+        stroke-width: 150px;
+        cursor: pointer;
+        transition: stroke-dasharray 100ms ease-in-out;
+    }
+
+    .pie {
+        width: min(250px, 100%);
+        margin-bottom: $sp5;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/content/BlockedContent.svelte b/frontend/app/src/desktop/features/chats/core/content/BlockedContent.svelte
new file mode 100644
index 0000000000..2caed3ef29
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/content/BlockedContent.svelte
@@ -0,0 +1,16 @@
+<svelte:options immutable />
+
+<script lang="ts">
+    import Translatable from "@src/ui/Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+</script>
+
+<div class="blocked">
+    <Translatable resourceKey={i18nKey("messageBlocked")} />
+</div>
+
+<style lang="scss">
+    .blocked {
+        @include font(light, italic, fs-80);
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/content/BotPlaceholderContent.svelte b/frontend/app/src/desktop/features/chats/core/content/BotPlaceholderContent.svelte
new file mode 100644
index 0000000000..02d7832550
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/content/BotPlaceholderContent.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+    import Typing from "@src/ui/Typing.svelte";
+</script>
+
+<span class="placeholder">
+    <Typing />
+</span>
+
+<style lang="scss">
+    .placeholder {
+        padding: $sp4 0;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/content/ChatMessageContent.svelte b/frontend/app/src/desktop/features/chats/core/content/ChatMessageContent.svelte
new file mode 100644
index 0000000000..57012ad6da
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/content/ChatMessageContent.svelte
@@ -0,0 +1,158 @@
+<script lang="ts">
+    import type { MessageContent, MessageContext, OgPreview, RehydratedMessagePreview } from "@client";
+    import { i18nKey } from "@src/i18n/i18n";
+    import AudioContent from "./AudioContent.svelte";
+    import BlockedContent from "./BlockedContent.svelte";
+    import BotPlaceholderContent from "./BotPlaceholderContent.svelte";
+    import CryptoContent from "./CryptoContent.svelte";
+    import DeletedContent from "./DeletedContent.svelte";
+    import FileContent from "./FileContent.svelte";
+    import GiphyContent from "./GiphyContent.svelte";
+    import ImageContent from "./ImageContent.svelte";
+    import MessageContentInitial from "./MessageContentInitial.svelte";
+    import MessageReminderContent from "./MessageReminderContent.svelte";
+    import MessageReminderCreatedContent from "./MessageReminderCreatedContent.svelte";
+    import P2PSwapContent from "./P2PSwapContent.svelte";
+    import PlaceholderContent from "./PlaceholderContent.svelte";
+    import PollContent from "./PollContent.svelte";
+    import PrizeContent from "./PrizeContent.svelte";
+    import PrizeWinnerContent from "./PrizeWinnerContent.svelte";
+    import ProposalContent from "@src/desktop/features/proposals/ProposalContent.svelte";
+    import ReportedMessageContent from "./ReportedMessageContent.svelte";
+    import TextContent from "./TextContent.svelte";
+    import UserReferralCardContent from "./UserReferralCardContent.svelte";
+    import VideoCallContent from "./VideoCallContent.svelte";
+    import VideoContent from "./VideoContent.svelte";
+
+    interface Props {
+        content: MessageContent;
+        me?: boolean;
+        truncate?: boolean;
+        fill: boolean;
+        reply?: boolean;
+        pinned?: boolean;
+        height?: number | undefined;
+        readonly: boolean;
+        senderId: string;
+        messageId: bigint;
+        edited: boolean;
+        messageContext: MessageContext;
+        messageIndex: number;
+        collapsed?: boolean;
+        undeleting?: boolean;
+        intersecting: boolean;
+        failed: boolean;
+        timestamp?: bigint | undefined;
+        blockLevelMarkdown: boolean;
+        onExpandMessage?: (() => void) | undefined;
+        onRemovePreview?: (url: string) => void;
+        onRegisterVote?: (vote: { type: "delete" | "register"; answerIndex: number }) => void;
+        ogPreviews?: OgPreview[];
+        messagePreviews?: RehydratedMessagePreview[];
+    }
+
+    let {
+        content,
+        me = false,
+        truncate = false,
+        fill,
+        reply = false,
+        pinned = false,
+        height = undefined,
+        readonly,
+        senderId,
+        messageId,
+        edited,
+        messageContext,
+        messageIndex,
+        collapsed = false,
+        undeleting = false,
+        intersecting,
+        failed,
+        timestamp = undefined,
+        blockLevelMarkdown,
+        onExpandMessage = undefined,
+        onRemovePreview,
+        onRegisterVote,
+        ogPreviews = [],
+        messagePreviews = [],
+    }: Props = $props();
+</script>
+
+{#if content.kind === "text_content"}
+    <TextContent
+        {me}
+        {fill}
+        {truncate}
+        {pinned}
+        {content}
+        {edited}
+        {blockLevelMarkdown}
+        {onRemovePreview}
+        {ogPreviews}
+        {messagePreviews} />
+{:else if content.kind === "image_content"}
+    <ImageContent
+        {edited}
+        {intersecting}
+        {fill}
+        {content}
+        {reply}
+        {pinned}
+        {height}
+        {blockLevelMarkdown} />
+{:else if content.kind === "video_content"}
+    <VideoContent {edited} {fill} {content} {reply} {height} {blockLevelMarkdown} />
+{:else if content.kind === "video_call_content"}
+    <VideoCallContent {senderId} {messageIndex} {content} {timestamp} />
+{:else if content.kind === "audio_content"}
+    <AudioContent {me} {edited} {content} {blockLevelMarkdown} />
+{:else if content.kind === "file_content"}
+    <FileContent {edited} {me} {content} {blockLevelMarkdown} />
+{:else if content.kind === "deleted_content"}
+    <DeletedContent {content} {undeleting} />
+{:else if content.kind === "blocked_content"}
+    <BlockedContent />
+{:else if content.kind === "crypto_content"}
+    <CryptoContent {senderId} {content} {me} />
+{:else if content.kind === "placeholder_content"}
+    <PlaceholderContent />
+{:else if content.kind === "bot_placeholder_content"}
+    <BotPlaceholderContent />
+{:else if content.kind === "prize_content_initial"}
+    <MessageContentInitial text={i18nKey("prizes.creatingYourPrizeMessage")} {failed} />
+{:else if content.kind === "p2p_swap_content_initial"}
+    <MessageContentInitial
+        text={i18nKey(failed ? "p2pSwap.failedToCreateMessage" : "p2pSwap.creatingYourMessage")}
+        {failed} />
+{:else if content.kind === "prize_content"}
+    <PrizeContent chatId={messageContext.chatId} {messageId} {content} {me} {intersecting} />
+{:else if content.kind === "p2p_swap_content"}
+    <P2PSwapContent {senderId} {messageContext} {messageId} {content} {me} {reply} {pinned} />
+{:else if content.kind === "prize_winner_content"}
+    <PrizeWinnerContent {content} />
+{:else if content.kind === "poll_content"}
+    <PollContent {readonly} {me} {content} {senderId} {onRegisterVote} />
+{:else if content.kind === "giphy_content"}
+    <GiphyContent {edited} {intersecting} {fill} {content} {reply} {height} {blockLevelMarkdown} />
+{:else if content.kind === "proposal_content"}
+    <ProposalContent
+        {content}
+        chatId={messageContext.chatId}
+        {messageIndex}
+        {messageId}
+        {collapsed}
+        {readonly}
+        {reply}
+        {onExpandMessage} />
+{:else if content.kind === "message_reminder_created_content" && !content.hidden}
+    <MessageReminderCreatedContent {content} />
+{:else if content.kind === "message_reminder_content"}
+    <MessageReminderContent {content} />
+{:else if content.kind === "reported_message_content"}
+    <ReportedMessageContent {content} />
+{:else if content.kind === "meme_fighter_content"}
+    <ImageContent {edited} {intersecting} {fill} {content} {reply} {pinned} {height} />
+{:else if content.kind === "user_referral_card"}
+    <UserReferralCardContent />
+{/if}
diff --git a/frontend/app/src/desktop/features/chats/core/content/ContentCaption.svelte b/frontend/app/src/desktop/features/chats/core/content/ContentCaption.svelte
new file mode 100644
index 0000000000..18faa4748d
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/content/ContentCaption.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+
+    interface Props {
+        edited: boolean;
+        caption: string | undefined;
+        blockLevelMarkdown?: boolean;
+    }
+
+    let { edited, caption, blockLevelMarkdown = false }: Props = $props();
+</script>
+
+{#if caption !== undefined && caption !== ""}
+    <Markdown text={caption} inline={!blockLevelMarkdown} />
+    {#if edited}
+        <span class="edited-msg">(<Translatable resourceKey={i18nKey("edited")} />)</span>
+    {/if}
+{/if}
diff --git a/frontend/app/src/desktop/features/chats/core/content/CryptoContent.svelte b/frontend/app/src/desktop/features/chats/core/content/CryptoContent.svelte
new file mode 100644
index 0000000000..ac64f0db36
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/content/CryptoContent.svelte
@@ -0,0 +1,95 @@
+<script lang="ts">
+    import type { CryptocurrencyContent, OpenChat } from "@client";
+    import { cryptoLookup, currentUserIdStore } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        content: CryptocurrencyContent;
+        me?: boolean;
+        reply?: boolean;
+        senderId: string;
+    }
+
+    let { content, me = false, reply = false, senderId }: Props = $props();
+
+    let logo = $derived($cryptoLookup.get(content.transfer.ledger)?.logo);
+    let transferText = $derived(
+        client.buildCryptoTransferText($_, $currentUserIdStore, senderId, content, me),
+    );
+    let transactionLinkText = $derived(client.buildTransactionLink($_, content.transfer));
+</script>
+
+{#if transferText !== undefined}
+    <div class="message">
+        <div class="logo-wrapper">
+            <img class="logo" src={logo} />
+        </div>
+        <div class="details">
+            <div class="transfer-txt">
+                <Markdown text={transferText} inline={true} />
+            </div>
+            <div class="links">
+                {#if transactionLinkText !== undefined}
+                    <div class="link transaction">
+                        <Markdown text={transactionLinkText} inline={!reply} />
+                    </div>
+                {/if}
+            </div>
+        </div>
+    </div>
+{:else}
+    <div class="unexpected"><Translatable resourceKey={i18nKey("tokenTransfer.unexpected")} /></div>
+{/if}
+
+{#if content.caption !== undefined}
+    <Markdown text={content.caption} inline={!reply} />
+{/if}
+
+<style lang="scss">
+    .unexpected {
+        @include font(light, italic, fs-90);
+    }
+
+    .links {
+        display: flex;
+        align-items: center;
+        gap: $sp3;
+    }
+
+    .link {
+        text-align: center;
+        margin-bottom: $sp3;
+        cursor: pointer;
+        @include font-size(fs-80);
+    }
+
+    .logo {
+        $size: toRem(55);
+        width: $size;
+        height: $size;
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: top;
+        border-radius: 50%;
+
+        -webkit-box-reflect: below 0
+            linear-gradient(hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0) 45%, hsla(0, 0%, 100%, 0.2));
+    }
+
+    .message {
+        display: flex;
+        align-items: center;
+        gap: $sp4;
+        padding: $sp3 0;
+    }
+
+    .transfer-txt {
+        margin-bottom: $sp2;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/content/DeletedContent.svelte b/frontend/app/src/desktop/features/chats/core/content/DeletedContent.svelte
new file mode 100644
index 0000000000..457ca21a80
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/content/DeletedContent.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+    import {
+        OPENCHAT_BOT_USER_ID,
+        selectedChatWebhooksStore,
+        selectedCommunityMembersStore,
+        type DeletedContent,
+        type OpenChat,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        content: DeletedContent;
+        undeleting: boolean;
+    }
+
+    let { content, undeleting }: Props = $props();
+
+    let date = $derived(new Date(Number(content.timestamp)));
+    let timestampStr = $derived(
+        `${client.toLongDateString(date)} @ ${client.toShortTimeString(date)}`,
+    );
+    let username = $derived(
+        client.getDisplayName(content.deletedBy, $selectedCommunityMembersStore, $selectedChatWebhooksStore),
+    );
+</script>
+
+<div class="deleted">
+    {#if undeleting}
+        <Translatable
+            resourceKey={i18nKey("undeletingMessage", {
+                username,
+                timestamp: timestampStr,
+            })} />
+    {:else if content.deletedBy === OPENCHAT_BOT_USER_ID}
+        <Markdown
+            text={$_("messageDeletedByOpenChatBot", {
+                values: {
+                    username,
+                    timestamp: timestampStr,
+                    rules: "/guidelines?section=3",
+                    modclub: "https://modclub.ai/",
+                },
+            })} />
+    {:else}
+        <Translatable
+            resourceKey={i18nKey("messageDeleted", {
+                username,
+                timestamp: timestampStr,
+            })} />
+    {/if}
+</div>
+
+<style lang="scss">
+    .deleted {
+        @include font(light, italic, fs-80);
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/content/ExternalContent.svelte b/frontend/app/src/desktop/features/chats/core/content/ExternalContent.svelte
new file mode 100644
index 0000000000..4c87ad0945
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/content/ExternalContent.svelte
@@ -0,0 +1,136 @@
+<script lang="ts">
+    import { currentUserStore } from "@client";
+    import { onMount } from "svelte";
+    import AlertCircleOutline from "svelte-material-icons/AlertCircleOutline.svelte";
+    import Cancel from "svelte-material-icons/Cancel.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { currentTheme } from "@src/theme/themes";
+    import type { Theme } from "@src/theme/types";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import PrivatePreview from "@src/desktop/features/chats/core/PrivatePreview.svelte";
+
+    interface Props {
+        externalUrl: string;
+        frozen: boolean;
+        privateChatPreview: boolean;
+    }
+
+    let { externalUrl, frozen, privateChatPreview }: Props = $props();
+
+    let iframe: HTMLIFrameElement | undefined = $state();
+    let connected = $state(false);
+    let error = $state(false);
+
+    onMount(() => {
+        window.addEventListener("message", onMessage);
+        return () => {
+            window.removeEventListener("message", onMessage);
+            iframe?.removeEventListener("error", onError);
+        };
+    });
+
+    function onError() {
+        error = true;
+    }
+
+    function updateTheme(theme: Theme) {
+        if (connected && iframe) {
+            sendMessage(iframe, origin, {
+                kind: "set_theme",
+                theme,
+            });
+        }
+    }
+
+    function debug(msg: string, ...params: unknown[]): void {
+        console.debug(`OPENCHAT_EXTERNAL_HOST: ${msg}`, params);
+    }
+
+    function onMessage(ev: MessageEvent<{ kind: "external_content_ready" }>) {
+        if (ev.origin === origin && ev.data.kind === "external_content_ready") {
+            debug("External content signals its readiness");
+            if (iframe) {
+                sendMessage(iframe, origin, {
+                    kind: "initialise_external_content",
+                    theme: $currentTheme,
+                    username: $currentUserStore.username,
+                });
+            }
+            connected = true;
+        }
+    }
+
+    function sendMessage(frame: HTMLIFrameElement, targetOrigin: string, msg: unknown) {
+        if (frame && frame.contentWindow) {
+            try {
+                frame.contentWindow.postMessage(msg, targetOrigin);
+            } catch (err) {
+                console.log("Error sending message to iframe", err);
+            }
+        }
+    }
+    let origin = $derived(new URL(externalUrl).origin);
+    $effect(() => {
+        updateTheme($currentTheme);
+    });
+    $effect(() => {
+        // This is just a bit of a hack to make sure we pick up when the external url changes
+        if (externalUrl !== undefined) {
+            error = false;
+            connected = false;
+        }
+    });
+    $effect(() => {
+        if (iframe && !frozen && !privateChatPreview) {
+            iframe.removeEventListener("error", onError);
+            iframe.addEventListener("error", onError);
+        }
+    });
+</script>
+
+{#if frozen}
+    <div class="error">
+        <Cancel size={"2em"} color={"var(--error)"} />
+        <Translatable resourceKey={i18nKey("externalContent.frozen")} />
+    </div>
+{:else if privateChatPreview}
+    <div class="preview">
+        <PrivatePreview />
+    </div>
+{:else if error}
+    <div class="error">
+        <AlertCircleOutline size={"2em"} color={"var(--error)"} />
+        <Translatable resourceKey={i18nKey("externalContent.error")} />
+    </div>
+{/if}
+
+{#if !frozen && !privateChatPreview}
+    <iframe title="External Content" bind:this={iframe} src={externalUrl}></iframe>
+{/if}
+
+<style lang="scss">
+    iframe {
+        height: 100%;
+        width: 100%;
+    }
+
+    .error {
+        display: flex;
+        flex-direction: column;
+        gap: $sp5;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        text-align: center;
+        padding: 0 toRem(100);
+
+        @include font(bold, normal, fs-140);
+    }
+
+    .preview {
+        display: flex;
+        flex-direction: column-reverse;
+        padding: $sp3 $sp4;
+        flex: auto;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/content/FileAttacher.svelte b/frontend/app/src/desktop/features/chats/core/content/FileAttacher.svelte
new file mode 100644
index 0000000000..9b9f056506
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/content/FileAttacher.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import { _ } from "svelte-i18n";
+    import { toastStore } from "@src/stores/toast";
+    import { getContext } from "svelte";
+    import Paperclip from "@src/desktop/features/chats/core/Paperclip.svelte";
+    import type { AttachmentContent, OpenChat } from "@client";
+    import { i18nKey } from "@src/i18n/i18n";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        onOpen: () => void;
+        onFileSelected: (content: AttachmentContent) => void;
+    }
+
+    let { onOpen, onFileSelected }: Props = $props();
+
+    let fileinput: HTMLInputElement | undefined = $state();
+
+    function click() {
+        onOpen();
+        fileinput?.click();
+    }
+
+    function fileSelected(e: { currentTarget: HTMLInputElement }) {
+        if (e.currentTarget) {
+            const target = e.currentTarget;
+            if (target.files && target.files[0]) {
+                client
+                    .messageContentFromFile(target.files[0])
+                    .then((content) => {
+                        onFileSelected(content);
+                    })
+                    .catch((err) => {
+                        toastStore.showFailureToast(i18nKey(err));
+                    });
+
+                e.currentTarget.value = "";
+            }
+        }
+    }
+</script>
+
+<div onclick={click}>
+    <HoverIcon title={$_("attachFile")}>
+        <Paperclip />
+    </HoverIcon>
+    <input bind:this={fileinput} hidden type="file" onchange={fileSelected} />
+</div>
diff --git a/frontend/app/src/desktop/features/chats/core/content/FileContent.svelte b/frontend/app/src/desktop/features/chats/core/content/FileContent.svelte
new file mode 100644
index 0000000000..4db1bb91c1
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/content/FileContent.svelte
@@ -0,0 +1,105 @@
+<script lang="ts">
+    import { _ } from "svelte-i18n";
+    import { rtlStore } from "@src/stores/rtl";
+    import type { FileContent, OpenChat } from "@client";
+    import ContentCaption from "./ContentCaption.svelte";
+    import FileDownload from "svelte-material-icons/FileDownload.svelte";
+    import { getContext } from "svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        content: FileContent;
+        me?: boolean;
+        draft?: boolean;
+        edited: boolean;
+        blockLevelMarkdown?: boolean;
+    }
+
+    let {
+        content,
+        me = false,
+        draft = false,
+        edited,
+        blockLevelMarkdown = false,
+    }: Props = $props();
+
+    let color = me ? "#ffffff" : "var(--txt)";
+</script>
+
+{#if content.blobUrl}
+    <a
+        href={content.blobUrl}
+        title={$_("downloadFile", { values: { name: content.name } })}
+        download={content.name}
+        role="button"
+        target="_blank"
+        class:rtl={$rtlStore}
+        class:draft
+        class="file-content">
+        <div class="link-contents">
+            <FileDownload size={"1.7em"} {color} />
+            {content.name}
+        </div>
+    </a>
+
+    <div class="meta-wrapper" class:caption={content.caption !== undefined}>
+        {`${content.mimeType}-${client.formatFileSize(content.fileSize)}`}
+    </div>
+{/if}
+
+<ContentCaption caption={content.caption} {edited} {blockLevelMarkdown} />
+
+<style lang="scss">
+    .file-content {
+        height: 30px;
+        display: block;
+        cursor: pointer;
+        @include ellipsis();
+        margin-right: $sp2;
+
+        &.rtl {
+            margin-right: 0;
+            margin-left: $sp2;
+        }
+
+        @media (hover: hover) {
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+    }
+
+    a {
+        color: inherit;
+    }
+
+    .link-contents {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+
+    :global(.link-contents > svg) {
+        margin-right: $sp2;
+    }
+
+    :global(.link-contents.rtl > svg) {
+        margin-right: 0;
+        margin-left: $sp2;
+    }
+
+    .meta-wrapper {
+        &.caption {
+            margin-bottom: 4px;
+        }
+
+        &:not(.caption) {
+            display: inline-block;
+        }
+
+        align-items: center;
+        @include font(light, normal, fs-60);
+        @include ellipsis();
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/content/GiphyContent.svelte b/frontend/app/src/desktop/features/chats/core/content/GiphyContent.svelte
new file mode 100644
index 0000000000..68a3e1d48c
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/content/GiphyContent.svelte
@@ -0,0 +1,194 @@
+<script lang="ts">
+    import { mobileWidth, type GiphyContent } from "@client";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { rtlStore } from "@src/stores/rtl";
+    import { lowBandwidth } from "@src/stores/settings";
+    import { reservedMediaStyle } from "@src/utils/media";
+    import Button from "@src/ui/Button.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import ContentCaption from "./ContentCaption.svelte";
+
+    interface Props {
+        content: GiphyContent;
+        fill: boolean;
+        draft?: boolean;
+        reply?: boolean;
+        height?: number | undefined;
+        intersecting?: boolean;
+        edited: boolean;
+        blockLevelMarkdown?: boolean;
+    }
+
+    let {
+        content,
+        fill,
+        draft = false,
+        reply = false,
+        height = undefined,
+        intersecting = true,
+        edited,
+        blockLevelMarkdown = false,
+    }: Props = $props();
+
+    let withCaption = $derived(content.caption !== undefined && content.caption !== "");
+    let image = $derived($mobileWidth ? content.mobile : content.desktop);
+    let landscape = $derived(image.height < image.width);
+    let style = $derived(
+        height !== undefined
+            ? `height: ${height}px; max-width: ${image.width}px;`
+            : draft || reply
+              ? `max-width: ${image.width}px;`
+              : (reservedMediaStyle(image.width, image.height) ??
+                `max-width: ${image.width}px;`),
+    );
+
+    let hidden = $derived($lowBandwidth);
+</script>
+
+<div class="img-wrapper">
+    {#if !intersecting}
+        <div
+            class="placeholder"
+            class:landscape
+            class:fill
+            class:withCaption
+            {style}
+            class:draft
+            title={content.caption ?? content.title}
+            class:reply
+            class:rtl={$rtlStore}>
+        </div>
+    {:else if $mobileWidth || hidden}
+        {#if hidden && !$mobileWidth}
+            <div class="mask">
+                {#if !reply}
+                    <div class="reveal">
+                        <Button onClick={() => (hidden = false)}
+                            ><Translatable resourceKey={i18nKey("loadGif")} /></Button>
+                    </div>
+                {/if}
+            </div>
+        {/if}
+        <img
+            class="gif"
+            class:landscape
+            class:fill
+            class:withCaption
+            class:draft
+            class:reply
+            class:rtl={$rtlStore}
+            {style}
+            src={content.mobile.url}
+            alt={content.caption ?? content.title} />
+    {:else}
+        <video
+            autoplay
+            muted
+            loop
+            playsinline
+            class:landscape
+            class:fill
+            class:withCaption
+            class:draft
+            class:reply
+            class:rtl={$rtlStore}
+            title={content.caption ?? content.title}
+            {style}>
+            <track kind="captions" />
+            <source src={content.desktop.url} type="video/mp4" />
+        </video>
+    {/if}
+    <div class="attribution">
+        <img src="/assets/klipy_logo.svg" alt="Powered by KLIPY" />
+    </div>
+</div>
+
+<ContentCaption caption={content.caption} {edited} {blockLevelMarkdown} />
+
+<style lang="scss">
+    .img-wrapper {
+        position: relative;
+    }
+
+    .attribution {
+        position: absolute;
+        bottom: $sp3;
+        left: $sp1;
+
+        img {
+            width: 4rem;
+        }
+    }
+
+    .mask {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        backdrop-filter: blur(10px);
+        -webkit-backdrop-filter: blur(10px);
+        background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5));
+    }
+
+    .reveal {
+        position: absolute;
+        top: calc(50% - 20px);
+        width: 100%;
+        text-align: center;
+    }
+
+    .placeholder,
+    img.gif,
+    video {
+        width: 100%;
+        display: block;
+
+        &:not(.landscape) {
+            min-height: 90px;
+            min-width: 0px;
+        }
+
+        &:not(.fill) {
+            border-radius: $sp4;
+        }
+
+        &.withCaption {
+            margin-bottom: $sp2;
+        }
+
+        &.draft {
+            max-width: calc(var(--vh, 1vh) * 50);
+            max-height: none;
+            height: auto;
+        }
+
+        &:not(.landscape).draft {
+            max-width: none;
+            max-height: calc(var(--vh, 1vh) * 50);
+            width: auto;
+            height: 100%;
+        }
+
+        &.reply {
+            max-width: 90px;
+            max-height: none;
+            height: auto;
+            float: right;
+            margin-left: $sp3;
+            margin-right: 0;
+        }
+
+        &.rtl.reply {
+            float: left;
+            margin-left: 0;
+            margin-right: $sp3;
+        }
+
+        &:not(.landscape).reply {
+            max-width: none;
+            max-height: 90px;
+            width: auto;
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/content/ImageContent.svelte b/frontend/app/src/desktop/features/chats/core/content/ImageContent.svelte
new file mode 100644
index 0000000000..cafa11f80c
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/content/ImageContent.svelte
@@ -0,0 +1,315 @@
+<script lang="ts">
+    import type { ImageContent, MemeFighterContent } from "@client";
+    import ArrowCollapse from "svelte-material-icons/ArrowCollapse.svelte";
+    import ArrowExpand from "svelte-material-icons/ArrowExpand.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { rtlStore } from "@src/stores/rtl";
+    import { lowBandwidth } from "@src/stores/settings";
+    import { isTouchDevice } from "@src/utils/devices";
+    import { reservedMediaStyle } from "@src/utils/media";
+    import Button from "@src/ui/Button.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import ContentCaption from "./ContentCaption.svelte";
+
+    interface Props {
+        content: ImageContent | MemeFighterContent;
+        fill: boolean;
+        draft?: boolean;
+        reply?: boolean;
+        pinned?: boolean;
+        height?: number | undefined;
+        intersecting?: boolean;
+        edited: boolean;
+        blockLevelMarkdown?: boolean;
+    }
+
+    let {
+        content,
+        fill,
+        draft = false,
+        reply = false,
+        pinned = false,
+        height = undefined,
+        intersecting = true,
+        edited,
+        blockLevelMarkdown = false,
+    }: Props = $props();
+
+    let imgElement: HTMLImageElement | undefined = $state();
+    let zoom = $state(false);
+    let withCaption = $derived(
+        content.kind === "image_content" && content.caption !== undefined && content.caption !== "",
+    );
+    let landscape = $derived(content.height < content.width);
+    let zoomedWidth: number = $state(0);
+    let zoomedHeight: number = $state(0);
+
+    function normaliseContent(content: ImageContent | MemeFighterContent) {
+        switch (content.kind) {
+            case "image_content":
+                return {
+                    url: content.blobUrl,
+                    caption: content.caption,
+                    fallback: content.thumbnailData,
+                    loadMsg: "loadImage",
+                };
+            case "meme_fighter_content":
+                return {
+                    url: content.url,
+                    caption: undefined,
+                    fallback: "/assets/memefighter.svg",
+                    loadMsg: "loadMeme",
+                };
+        }
+    }
+
+    function onClick() {
+        if (!isTouchDevice) {
+            toggleZoom();
+        }
+    }
+
+    function onDoubleClick(e: Event) {
+        e.stopPropagation();
+        if (isTouchDevice) {
+            toggleZoom();
+        }
+    }
+
+    function toggleZoom() {
+        zoom = !zoom;
+        if (zoom) {
+            recalculateZoomedDimensions();
+        }
+    }
+
+    function recalculateZoomedDimensions() {
+        const contentAspectRatio = content.width / content.height;
+        let imageWidth = Math.max(400, content.width);
+        let imageHeight = Math.max(400, content.height);
+        if (landscape) {
+            imageWidth = Math.min(window.innerWidth, imageWidth);
+            imageHeight = imageWidth / contentAspectRatio;
+            if (imageHeight > window.innerHeight) {
+                imageHeight = window.innerHeight;
+                imageWidth = imageHeight * contentAspectRatio;
+            }
+        } else {
+            imageHeight = Math.min(window.innerHeight, imageHeight);
+            imageWidth = imageHeight * contentAspectRatio;
+            if (imageWidth > window.innerWidth) {
+                imageWidth = window.innerWidth;
+                imageHeight = imageWidth / contentAspectRatio;
+            }
+        }
+        zoomedWidth = imageWidth;
+        zoomedHeight = imageHeight;
+    }
+    let normalised = $derived(normaliseContent(content));
+    let hidden = $state(false);
+    $effect(() => {
+        hidden = $lowBandwidth && !draft;
+    });
+    let zoomable = $derived(!draft && !reply && !pinned);
+
+    function onError() {
+        if (imgElement) {
+            imgElement.src = normalised.fallback;
+        }
+    }
+</script>
+
+<svelte:window
+    onresize={recalculateZoomedDimensions}
+    onorientationchange={recalculateZoomedDimensions} />
+
+{#if normalised.url !== undefined}
+    <div class="img-wrapper">
+        {#if hidden}
+            <div class="mask">
+                {#if !reply && !draft}
+                    <div class="reveal">
+                        <Button onClick={() => (hidden = false)}
+                            ><Translatable resourceKey={i18nKey(normalised.loadMsg)} /></Button>
+                    </div>
+                {/if}
+            </div>
+        {/if}
+        <img
+            bind:this={imgElement}
+            onclick={onClick}
+            ondblclick={onDoubleClick}
+            onerror={onError}
+            class="unzoomed"
+            class:landscape
+            class:fill
+            class:withCaption
+            class:draft
+            class:reply
+            class:zoomable={zoomable && !hidden}
+            class:rtl={$rtlStore}
+            style={height !== undefined
+                ? `height: ${height}px`
+                : draft || reply || pinned
+                  ? undefined
+                  : reservedMediaStyle(content.width, content.height)}
+            src={intersecting && !hidden ? normalised.url : normalised.fallback}
+            alt={normalised.caption} />
+
+        {#if zoomable && !hidden}
+            <div class="expand" class:rtl={$rtlStore} class:zoomed={zoom} onclick={toggleZoom}>
+                <ArrowExpand size={"1em"} color={"#fff"} />
+            </div>
+        {/if}
+    </div>
+{/if}
+
+<ContentCaption caption={normalised.caption} {edited} {blockLevelMarkdown} />
+
+{#if zoomable && zoom}
+    <Overlay onClose={() => (zoom = false)} dismissible alignBottomOnMobile={false}>
+        <ModalContent hideHeader hideFooter fill fitToContent fixedWidth={false}>
+            {#snippet body()}
+                <span class="body">
+                    <img
+                        class="zoomed"
+                        class:landscape
+                        width={zoomedWidth}
+                        height={zoomedHeight}
+                        onclick={onClick}
+                        ondblclick={onDoubleClick}
+                        onerror={onError}
+                        src={normalised.url}
+                        alt={normalised.caption} />
+                    <div
+                        class="expand"
+                        class:rtl={$rtlStore}
+                        class:zoomed={zoom}
+                        onclick={toggleZoom}>
+                        <ArrowCollapse size={"1em"} color={"#fff"} />
+                    </div>
+                </span>
+            {/snippet}
+        </ModalContent>
+    </Overlay>
+{/if}
+
+<style lang="scss">
+    $radius: $sp3;
+
+    .img-wrapper {
+        position: relative;
+    }
+
+    .mask {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        backdrop-filter: blur(10px);
+        -webkit-backdrop-filter: blur(10px);
+        background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5));
+    }
+
+    .reveal {
+        position: absolute;
+        top: calc(50% - 20px);
+        width: 100%;
+        text-align: center;
+    }
+
+    .body {
+        display: flex;
+        position: relative;
+    }
+
+    .expand {
+        border-radius: 0 $radius 0 $radius;
+
+        cursor: zoom-in;
+        &.zoomed {
+            cursor: zoom-out;
+            border-bottom-left-radius: var(--modal-rd);
+        }
+
+        &.rtl {
+            right: 0;
+            left: unset;
+            border-radius: $radius 0 $radius 0;
+            &.zoomed {
+                border-bottom-right-radius: var(--modal-rd);
+            }
+        }
+
+        position: absolute;
+        padding: $sp2 $sp4;
+        bottom: 0;
+        left: 0;
+        background-color: rgba(0, 0, 0, 0.3);
+        color: #fff;
+    }
+
+    img.zoomable.unzoomed {
+        cursor: zoom-in;
+    }
+
+    img.zoomed {
+        border-radius: var(--modal-rd);
+    }
+
+    img.unzoomed {
+        width: 100%;
+        display: block;
+
+        &:not(.landscape) {
+            min-height: 90px;
+            min-width: 0px;
+        }
+
+        &:not(.fill) {
+            border-radius: $radius;
+        }
+
+        &.withCaption {
+            margin-bottom: $sp2;
+        }
+
+        &.draft {
+            max-width: calc(var(--vh, 1vh) * 50);
+            max-height: none;
+            height: auto;
+        }
+
+        &:not(.landscape).draft {
+            max-width: none;
+            max-height: calc(var(--vh, 1vh) * 50);
+            width: auto;
+            width: -webkit-fill-available;
+            height: 100%;
+        }
+
+        &.reply {
+            max-width: 90px;
+            max-height: none;
+            height: auto;
+            float: right;
+            margin-left: $sp3;
+            margin-right: 0;
+        }
+
+        &.rtl.reply {
+            float: left;
+            margin-left: 0;
+            margin-right: $sp3;
+        }
+
+        &:not(.landscape).reply {
+            max-width: none;
+            max-height: 90px;
+            width: auto;
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/content/MessageContentInitial.svelte b/frontend/app/src/desktop/features/chats/core/content/MessageContentInitial.svelte
new file mode 100644
index 0000000000..59f629aa46
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/content/MessageContentInitial.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+    import type { ResourceKey } from "@client";
+    import FancyLoader from "@src/desktop/ui/icons/FancyLoader.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    interface Props {
+        text: ResourceKey;
+        failed: boolean;
+    }
+
+    let { text, failed }: Props = $props();
+</script>
+
+<div class={"prize"}>
+    {#if !failed}
+        <div class="spinner">
+            <FancyLoader />
+        </div>
+    {/if}
+    <p><Translatable resourceKey={text} /></p>
+</div>
+
+<style lang="scss">
+    .prize {
+        padding: $sp5;
+        display: flex;
+        flex-direction: column;
+        gap: $sp6;
+    }
+    .spinner {
+        width: 100px;
+        margin: 0 auto;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/content/MessageReminderContent.svelte b/frontend/app/src/desktop/features/chats/core/content/MessageReminderContent.svelte
new file mode 100644
index 0000000000..c399edbe32
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/content/MessageReminderContent.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+    import type { MessageReminderContent } from "@client";
+    import ReminderNotes from "@src/desktop/features/chats/core/ReminderNotes.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+
+    interface Props {
+        content: MessageReminderContent;
+    }
+
+    let { content }: Props = $props();
+</script>
+
+<div class="msg">
+    ⏰ <Translatable resourceKey={i18nKey("reminders.youAsked")} />
+</div>
+<ReminderNotes notes={content.notes} />
diff --git a/frontend/app/src/desktop/features/chats/core/content/MessageReminderCreatedContent.svelte b/frontend/app/src/desktop/features/chats/core/content/MessageReminderCreatedContent.svelte
new file mode 100644
index 0000000000..c378371567
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/content/MessageReminderCreatedContent.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+    import type { MessageReminderCreatedContent, OpenChat } from "@client";
+    import { getContext } from "svelte";
+    import ReminderNotes from "@src/desktop/features/chats/core/ReminderNotes.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+
+    interface Props {
+        content: MessageReminderCreatedContent;
+    }
+
+    let { content }: Props = $props();
+    const client = getContext<OpenChat>("client");
+</script>
+
+<div class="msg">
+    ⏰ <Translatable resourceKey={i18nKey("reminders.remindAt", { datetime: "" })} />
+    <span class="datetime">{client.toDatetimeString(new Date(content.remindAt))}</span>
+</div>
+<ReminderNotes notes={content.notes} />
+
+<style lang="scss">
+    .datetime {
+        font-weight: 700;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/content/P2PSwapContent.svelte b/frontend/app/src/desktop/features/chats/core/content/P2PSwapContent.svelte
new file mode 100644
index 0000000000..4b5b894448
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/content/P2PSwapContent.svelte
@@ -0,0 +1,419 @@
+<script lang="ts">
+    import type {
+        AcceptP2PSwapResponse,
+        CancelP2PSwapResponse,
+        MessageContext,
+        OpenChat,
+        P2PSwapContent,
+        ResourceKey,
+    } from "@client";
+    import {
+        cryptoLookup,
+        currentUserIdStore,
+        exchangeRatesLookupStore as exchangeRatesLookup,
+        isDiamondStore,
+        publish,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import Clock from "svelte-material-icons/Clock.svelte";
+    import SwapIcon from "svelte-material-icons/SwapHorizontal.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { pinNumberErrorMessageStore } from "@src/stores/pinNumber";
+    import { rtlStore } from "@src/stores/rtl";
+    import { now500 } from "@src/stores/time";
+    import { toastStore } from "@src/stores/toast";
+    import { calculateDollarAmount } from "@src/utils/exchange";
+    import AreYouSure from "@src/desktop/shared/AreYouSure.svelte";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import SpinningToken from "@src/desktop/ui/icons/SpinningToken.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import AcceptP2PSwapModal from "@src/desktop/features/chats/core/AcceptP2PSwapModal.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import P2PSwapProgress from "@src/desktop/features/chats/core/P2PSwapProgress.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        senderId: string;
+        content: P2PSwapContent;
+        messageContext: MessageContext;
+        messageId: bigint;
+        me: boolean;
+        reply: boolean;
+        pinned: boolean;
+    }
+
+    let { senderId, content, messageContext, messageId, me, reply, pinned }: Props = $props();
+
+    let confirming = $state(false);
+    let showDetails = $state(false);
+
+    let fromDetails = $derived($cryptoLookup.get(content.token0.ledger));
+    let toDetails = $derived($cryptoLookup.get(content.token1.ledger));
+    let finished = $derived($now500 >= Number(content.expiresAt));
+    let timeRemaining = $derived(
+        finished
+            ? $_("p2pSwap.expired")
+            : client.formatTimeRemaining($now500, Number(content.expiresAt)),
+    );
+    let acceptedByYou = $derived(
+        (content.status.kind === "p2p_swap_reserved" &&
+            content.status.reservedBy === $currentUserIdStore) ||
+            ((content.status.kind === "p2p_swap_accepted" ||
+                content.status.kind === "p2p_swap_completed") &&
+                content.status.acceptedBy === $currentUserIdStore),
+    );
+
+    let fromAmount = $derived(client.formatTokens(content.token0Amount, content.token0.decimals));
+    let toAmount = $derived(client.formatTokens(content.token1Amount, content.token1.decimals));
+    let buttonDisabled = $derived(content.status.kind !== "p2p_swap_open" || reply || pinned);
+    let fromAmountInUsd = $derived(
+        fromDetails
+            ? calculateDollarAmount(
+                  content.token0Amount,
+                  $exchangeRatesLookup.get(fromDetails.symbol.toLowerCase())?.toUSD,
+                  fromDetails.decimals,
+              )
+            : "0",
+    );
+    let toAmountInUsd = $derived(
+        toDetails
+            ? calculateDollarAmount(
+                  content.token1Amount,
+                  $exchangeRatesLookup.get(toDetails.symbol.toLowerCase())?.toUSD,
+                  toDetails.decimals,
+              )
+            : "0",
+    );
+
+    type Labels = {
+        instructionText?: string;
+        buttonText: ResourceKey;
+        summaryText: ResourceKey;
+    };
+
+    let labels = $derived.by<Labels>(() => {
+        let instructionText: string | undefined = undefined;
+        let buttonText: ResourceKey = i18nKey("");
+
+        if (content.status.kind === "p2p_swap_open") {
+            if (me) {
+                instructionText = undefined;
+                buttonText = i18nKey("p2pSwap.cancel");
+            } else {
+                instructionText = undefined;
+                buttonText = i18nKey("p2pSwap.accept");
+            }
+        } else if (content.status.kind === "p2p_swap_cancelled") {
+            instructionText = undefined;
+            buttonText = i18nKey("p2pSwap.cancelled");
+        } else if (content.status.kind === "p2p_swap_expired") {
+            instructionText = undefined;
+            buttonText = i18nKey("p2pSwap.expired");
+        } else if (content.status.kind === "p2p_swap_reserved") {
+            if (acceptedByYou) {
+                instructionText = $_("p2pSwap.youReserved");
+            } else {
+                instructionText = $_("p2pSwap.reservedBy", {
+                    values: { user: `@UserId(${content.status.reservedBy})` },
+                });
+            }
+            buttonText = i18nKey("p2pSwap.reserved");
+        } else if (content.status.kind === "p2p_swap_accepted") {
+            if (acceptedByYou) {
+                instructionText = $_("p2pSwap.youAccepted");
+            } else {
+                instructionText = $_("p2pSwap.acceptedBy", {
+                    values: { user: `@UserId(${content.status.acceptedBy})` },
+                });
+            }
+            buttonText = i18nKey("p2pSwap.accepted");
+        } else if (content.status.kind === "p2p_swap_completed") {
+            if (acceptedByYou) {
+                instructionText = $_("p2pSwap.youCompleted");
+            } else {
+                instructionText = $_("p2pSwap.completed", {
+                    values: { user: `@UserId(${content.status.acceptedBy})` },
+                });
+            }
+            buttonText = i18nKey("p2pSwap.accepted");
+        }
+
+        return {
+            instructionText,
+            buttonText,
+            summaryText: i18nKey("p2pSwap.summary", {
+                fromAmount,
+                toAmount,
+                fromToken: content.token0.symbol,
+                toToken: content.token1.symbol,
+            }),
+        };
+    });
+
+    function onAcceptOrCancel(e: MouseEvent) {
+        if (e.isTrusted && !buttonDisabled) {
+            if (!me && !$isDiamondStore) {
+                publish("upgrade");
+            } else {
+                confirming = true;
+            }
+        }
+    }
+
+    function cancel(yes: boolean): Promise<void> {
+        confirming = false;
+
+        if (yes && me) {
+            client
+                .cancelP2PSwap(
+                    messageContext.chatId,
+                    messageContext.threadRootMessageIndex,
+                    messageId,
+                )
+                .then((resp) => {
+                    if (resp.kind !== "success") {
+                        showFailureToast(resp, false);
+                    }
+                });
+        }
+
+        return Promise.resolve();
+    }
+
+    function accept() {
+        confirming = false;
+
+        if (!me) {
+            client
+                .acceptP2PSwap(
+                    messageContext.chatId,
+                    messageContext.threadRootMessageIndex,
+                    messageId,
+                )
+                .then((resp) => {
+                    if (resp.kind !== "success") {
+                        showFailureToast(resp, true);
+                    }
+                });
+        }
+    }
+
+    function showFailureToast(
+        response: AcceptP2PSwapResponse | CancelP2PSwapResponse,
+        accepting: boolean,
+    ) {
+        if ($pinNumberErrorMessageStore !== undefined) {
+            toastStore.showFailureToast(pinNumberErrorMessageStore);
+            return;
+        }
+
+        let key: string = response.kind;
+
+        switch (key) {
+            case "already_reserved":
+            case "already_completed":
+                key = "already_accepted";
+                break;
+            case "channel_not_found":
+            case "chat_not_found":
+            case "user_suspended":
+            case "user_not_in_group":
+            case "user_not_in_community":
+            case "user_not_in_channel":
+            case "chat_frozen":
+            case "insufficient_funds":
+            case "internal_error":
+                key = accepting ? "unknown_accept_error" : "unknown_cancel_error";
+                break;
+        }
+
+        toastStore.showFailureToast(i18nKey("p2pSwap." + key));
+    }
+
+    function onSwapClick() {
+        if (!confirming) {
+            showDetails = true;
+        }
+    }
+</script>
+
+{#if confirming}
+    {#if me}
+        <AreYouSure
+            message={i18nKey("p2pSwap.confirmCancel", {
+                amount: fromAmount,
+                token: content.token0.symbol,
+            })}
+            action={cancel} />
+    {:else}
+        <AcceptP2PSwapModal
+            ledger0={content.token0.ledger}
+            ledger1={content.token1.ledger}
+            amount0={content.token0Amount}
+            amount1={content.token1Amount}
+            onAccept={accept}
+            onClose={() => (confirming = false)} />
+    {/if}
+{:else if showDetails}
+    <P2PSwapProgress {senderId} {content} onClose={() => (showDetails = false)} />
+{/if}
+
+<div class="swap">
+    <div class="top">
+        {#if content.status.kind === "p2p_swap_open"}
+            <div class="countdown" class:rtl={$rtlStore}>
+                <Clock size={"1em"} color={"#ffffff"} />
+                <span>{timeRemaining}</span>
+            </div>
+        {/if}
+        <div class="coins" onclick={onSwapClick}>
+            <div class="coin">
+                <SpinningToken
+                    logo={fromDetails?.logo ?? "/assets/not_found.svg"}
+                    spin={false}
+                    size="medium" />
+                <div class="amount">
+                    <div>{fromAmount} {content.token0.symbol}</div>
+                    <div class="dollar">({fromAmountInUsd} USD)</div>
+                </div>
+            </div>
+
+            <div class="swap-icon">
+                <SwapIcon size={"2.5em"} />
+            </div>
+
+            <div class="coin">
+                <SpinningToken
+                    logo={toDetails?.logo ?? "/assets/not_found.svg"}
+                    spin={false}
+                    size="medium" />
+                <div class="amount">
+                    <div>{toAmount} {content.token1.symbol}</div>
+                    <div class="dollar">({toAmountInUsd} USD)</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="bottom">
+        {#if content.caption !== undefined}
+            <div class="caption">
+                {content.caption}
+            </div>
+        {/if}
+        <div class="summary"><Translatable resourceKey={labels.summaryText} /></div>
+        {#if labels.instructionText !== undefined}
+            <div class="instructions">
+                <Markdown text={labels.instructionText} />
+            </div>
+        {/if}
+        <div class="accept">
+            <ButtonGroup align="fill">
+                <Button
+                    loading={content.status.kind === "p2p_swap_reserved" ||
+                        content.status.kind === "p2p_swap_accepted"}
+                    disabled={buttonDisabled}
+                    hollow
+                    onClick={onAcceptOrCancel}>
+                    <Translatable resourceKey={labels.buttonText} />
+                </Button>
+            </ButtonGroup>
+        </div>
+    </div>
+</div>
+
+<style lang="scss">
+    $accent: var(--prize);
+
+    .swap .bottom .accept {
+        :global(button:not(.disabled)) {
+            border: 1px solid $accent !important;
+        }
+
+        :global(button:not(.disabled):hover) {
+            background-color: $accent;
+            color: var(--button-txt);
+        }
+
+        :global(button.loading) {
+            background-color: $accent;
+            color: var(--button-txt);
+        }
+
+        min-height: 45px !important;
+        min-width: unset !important;
+    }
+
+    .swap {
+        max-width: 400px;
+        padding: 0 $sp3 $sp3 $sp3;
+    }
+
+    .top {
+        position: relative;
+        margin-bottom: $sp4;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .countdown {
+        @include font-size(fs-60);
+        font-weight: 700;
+        display: flex;
+        gap: $sp2;
+        align-items: center;
+        border-radius: var(--rd);
+        color: white;
+        background-color: rgba(0, 0, 0, 0.3);
+        padding: $sp2 $sp3;
+        text-transform: lowercase;
+
+        &.rtl {
+            left: unset;
+            right: 10px;
+        }
+    }
+
+    .summary,
+    .instructions,
+    .caption {
+        @include font(book, normal, fs-80);
+        margin-bottom: $sp4;
+    }
+
+    .coins {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        margin-top: $sp3;
+        width: 100%;
+        cursor: pointer;
+    }
+
+    .amount {
+        @include font(bold, normal, fs-80);
+        text-align: center;
+
+        .dollar {
+            @include font(light, normal, fs-60);
+        }
+    }
+
+    .swap-icon {
+        height: 2.5em;
+        position: relative;
+        top: calc(2.5rem - 12px);
+    }
+
+    .coin {
+        display: flex;
+        flex-direction: column;
+        gap: $sp2;
+        align-items: center;
+        flex: 1;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/content/P2PSwapContentBuilder.svelte b/frontend/app/src/desktop/features/chats/core/content/P2PSwapContentBuilder.svelte
new file mode 100644
index 0000000000..93a271a0b1
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/content/P2PSwapContentBuilder.svelte
@@ -0,0 +1,313 @@
+<script lang="ts">
+    import type { MessageContext, OpenChat, P2PSwapContentInitial } from "@client";
+    import {
+        enhancedCryptoLookup as cryptoLookup,
+        isDiamondStore,
+        mobileWidth,
+        publish,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { pinNumberErrorMessageStore } from "@src/stores/pinNumber";
+    import AreYouSure from "@src/desktop/shared/AreYouSure.svelte";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import ErrorMessage from "@src/desktop/shared/ErrorMessage.svelte";
+    import Legend from "@src/desktop/shared/Legend.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import TextArea from "@src/desktop/shared/TextArea.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import BalanceWithRefresh from "@src/desktop/shared/BalanceWithRefresh.svelte";
+    import CryptoSelector from "@src/desktop/shared/CryptoSelector.svelte";
+    import DurationPicker from "@src/desktop/shared/DurationPicker.svelte";
+    import TokenInput from "@src/desktop/shared/TokenInput.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        fromLedger: string;
+        messageContext: MessageContext;
+        onClose: () => void;
+    }
+
+    let { fromLedger = $bindable(), messageContext, onClose }: Props = $props();
+
+    let durationValid = $state(false);
+    let fromAmount: bigint = $state(0n);
+    let fromAmountValid: boolean = $state(false);
+    let toLedger: string = $state("");
+    let toAmount: bigint = $state(0n);
+    let toAmountValid: boolean = $state(false);
+    let expiresIn: bigint = $state(0n);
+    let message = $state("");
+    let error: string | undefined = $state(undefined);
+    let tokenInputState: "ok" | "zero" | "too_low" | "too_high" = $state("ok");
+    let confirming = $state(false);
+    let sending = $state(false);
+
+    let fromDetails = $derived($cryptoLookup.get(fromLedger)!);
+    let toDetails = $derived($cryptoLookup.get(toLedger)!);
+    let totalFees = $derived(fromDetails.transferFee * BigInt(2));
+    let remainingBalance = $state(0n);
+    $effect(() => {
+        remainingBalance =
+            fromAmount > 0n ? fromDetails.balance - fromAmount - totalFees : fromDetails.balance;
+    });
+    let minAmount = $derived(fromDetails.transferFee * BigInt(10));
+    let valid = $derived(error === undefined && fromAmountValid && toAmountValid && durationValid);
+    let errorMessage = $derived(error !== undefined ? i18nKey(error) : $pinNumberErrorMessageStore);
+
+    $effect(() => {
+        if (tokenInputState === "too_low") {
+            error = $_("minimumAmount", {
+                values: {
+                    amount: client.formatTokens(minAmount, fromDetails.decimals),
+                    symbol: fromDetails.symbol,
+                },
+            });
+        } else {
+            error = undefined;
+        }
+    });
+
+    function onSend() {
+        if (!$isDiamondStore) {
+            publish("upgrade");
+            return;
+        }
+
+        if (!valid) {
+            return;
+        }
+
+        confirming = true;
+    }
+
+    function send(yes: boolean): Promise<void> {
+        confirming = false;
+
+        if (!yes) {
+            return Promise.resolve();
+        }
+
+        const content: P2PSwapContentInitial = {
+            kind: "p2p_swap_content_initial",
+            token0: {
+                ledger: fromLedger,
+                symbol: fromDetails.symbol,
+                fee: fromDetails.transferFee,
+                decimals: fromDetails.decimals,
+            },
+            token1: {
+                ledger: toLedger,
+                symbol: toDetails.symbol,
+                fee: toDetails.transferFee,
+                decimals: toDetails.decimals,
+            },
+            token0Amount: fromAmount,
+            token1Amount: toAmount,
+            caption: message === "" ? undefined : message,
+            expiresIn,
+        };
+
+        sending = true;
+        error = undefined;
+
+        return client
+            .sendMessageWithContent(messageContext, content, false)
+            .then((resp) => {
+                if (resp.kind === "success" || resp.kind === "transfer_success") {
+                    onClose();
+                } else if ($pinNumberErrorMessageStore === undefined) {
+                    error = "errorSendingMessage";
+                }
+            })
+            .finally(() => (sending = false));
+    }
+
+    function cancel() {
+        onClose();
+    }
+
+    function onBalanceRefreshed() {
+        onBalanceRefreshFinished();
+        error = undefined;
+    }
+
+    function onBalanceRefreshError(err: string) {
+        onBalanceRefreshFinished();
+        error = err;
+    }
+
+    function onBalanceRefreshFinished() {
+        if (remainingBalance < 0) {
+            remainingBalance = BigInt(0);
+            fromAmount = fromDetails.balance - totalFees;
+        }
+    }
+
+    function onSelectFromToken(ledger: string, _: string) {
+        if (ledger === toLedger) {
+            toLedger =
+                [...$cryptoLookup.values()].map((t) => t.ledger).find((l) => l !== toLedger) ??
+                toLedger;
+        }
+    }
+</script>
+
+{#if confirming}
+    <AreYouSure
+        message={i18nKey("p2pSwap.confirmSend", {
+            amount: client.formatTokens(fromAmount + totalFees, fromDetails.decimals),
+            token: fromDetails.symbol,
+        })}
+        action={send} />
+{/if}
+
+<Overlay dismissible>
+    <ModalContent>
+        {#snippet header()}
+            <span class="header">
+                <div class="main-title">
+                    <Translatable resourceKey={i18nKey("p2pSwap.builderTitle")} />
+                </div>
+                <BalanceWithRefresh
+                    ledger={fromLedger}
+                    value={remainingBalance}
+                    label={i18nKey("cryptoAccount.shortBalanceLabel")}
+                    bold
+                    onRefreshed={onBalanceRefreshed}
+                    onError={onBalanceRefreshError} />
+            </span>
+        {/snippet}
+        {#snippet body()}
+            <form class="body swap-builder">
+                <div class="row">
+                    <div class="select-from">
+                        <Legend label={i18nKey("cryptoAccount.transactionHeaders.from")} />
+                        <div class="inner">
+                            <CryptoSelector
+                                filter={(t) => t.balance > 0}
+                                bind:ledger={fromLedger}
+                                onSelect={onSelectFromToken} />
+                        </div>
+                    </div>
+                    <div class="amount">
+                        <TokenInput
+                            ledger={fromLedger}
+                            {minAmount}
+                            maxAmount={fromDetails.balance - totalFees}
+                            showDollarAmount
+                            bind:status={tokenInputState}
+                            bind:valid={fromAmountValid}
+                            bind:amount={fromAmount} />
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="select-to">
+                        <Legend label={i18nKey("cryptoAccount.transactionHeaders.to")} />
+                        <div class="inner">
+                            <CryptoSelector
+                                filter={(t) => t.ledger !== fromLedger}
+                                bind:ledger={toLedger} />
+                        </div>
+                    </div>
+                    <div class="amount">
+                        <TokenInput
+                            ledger={toLedger}
+                            showDollarAmount
+                            bind:valid={toAmountValid}
+                            bind:amount={toAmount} />
+                    </div>
+                </div>
+                <div class="duration">
+                    <Legend label={i18nKey("p2pSwap.expiryTime")} />
+                    <DurationPicker bind:valid={durationValid} bind:milliseconds={expiresIn} />
+                </div>
+                <div class="message">
+                    <Legend label={i18nKey("tokenTransfer.message")} />
+                    <TextArea
+                        maxlength={200}
+                        rows={3}
+                        autofocus={false}
+                        placeholder={i18nKey("tokenTransfer.messagePlaceholder")}
+                        bind:value={message} />
+                </div>
+                {#if errorMessage !== undefined}
+                    <div class="error">
+                        <ErrorMessage><Translatable resourceKey={errorMessage} /></ErrorMessage>
+                    </div>
+                {/if}
+            </form>
+        {/snippet}
+        {#snippet footer()}
+            <span>
+                <ButtonGroup>
+                    <Button small={!$mobileWidth} tiny={$mobileWidth} secondary onClick={cancel}
+                        ><Translatable resourceKey={i18nKey("cancel")} /></Button>
+                    <Button
+                        small={!$mobileWidth}
+                        disabled={!valid || sending}
+                        loading={sending}
+                        tiny={$mobileWidth}
+                        onClick={onSend}
+                        ><Translatable resourceKey={i18nKey("tokenTransfer.send")} /></Button>
+                </ButtonGroup>
+            </span>
+        {/snippet}
+    </ModalContent>
+</Overlay>
+
+<style lang="scss">
+    :global(.swap-builder .row input.amount-val) {
+        border: var(--bw) solid var(--bd) !important;
+        border-radius: 0 var(--rd) var(--rd) 0 !important;
+        height: 47px;
+    }
+
+    .header {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: $sp2;
+
+        .main-title {
+            flex: auto;
+        }
+    }
+
+    .body {
+        display: flex;
+        flex-direction: column;
+        gap: $sp4;
+    }
+
+    .row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-radius: var(--rd);
+
+        .inner {
+            @include font(book, normal, fs-100);
+            padding: 0 $sp4;
+            background-color: var(--modal-bg);
+            border: var(--bw) solid var(--bd);
+            border-right: 0;
+            border-radius: var(--rd) 0 0 var(--rd);
+            display: flex;
+            height: 47px;
+            align-items: center;
+        }
+
+        .amount {
+            flex-grow: 1;
+        }
+    }
+
+    .error {
+        margin-top: $sp4;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/content/PlaceholderContent.svelte b/frontend/app/src/desktop/features/chats/core/content/PlaceholderContent.svelte
new file mode 100644
index 0000000000..5d1c415b24
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/content/PlaceholderContent.svelte
@@ -0,0 +1,17 @@
+<svelte:options immutable />
+
+<script lang="ts">
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/ui/Translatable.svelte";
+</script>
+
+<span class="placeholder">
+    <Translatable resourceKey={i18nKey("placeholderContent")} />
+</span>
+
+<style lang="scss">
+    .placeholder {
+        padding: $sp4;
+        @include font(light, italic, fs-90);
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/content/PollContent.svelte b/frontend/app/src/desktop/features/chats/core/content/PollContent.svelte
new file mode 100644
index 0000000000..72933fab6d
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/content/PollContent.svelte
@@ -0,0 +1,184 @@
+<script lang="ts">
+    import { currentUserIdStore, iconSize, type OpenChat, type PollContent } from "@client";
+    import { getContext } from "svelte";
+    import Poll from "svelte-material-icons/Poll.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import PollAnswer from "@src/desktop/features/chats/core/PollAnswer.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        content: PollContent;
+        me: boolean;
+        readonly: boolean;
+        senderId: string;
+        onRegisterVote?: (vote: { type: "delete" | "register"; answerIndex: number }) => void;
+    }
+
+    let { content, me, readonly, senderId, onRegisterVote }: Props = $props();
+
+    function vote(idx: number) {
+        if (cannotVote) return;
+
+        onRegisterVote?.({
+            type: votedFor(idx) ? "delete" : "register",
+            answerIndex: idx,
+        });
+    }
+
+    function votedFor(idx: number): boolean {
+        return content.votes.user.includes(idx);
+    }
+
+    function voteCount(idx: number): number {
+        let total = content.votes.total;
+        switch (total.kind) {
+            case "anonymous_poll_votes":
+                return total.votes[idx] ?? 0;
+            case "hidden_poll_votes":
+                return total.votes;
+            case "visible_poll_votes":
+                return total.votes[idx]?.length ?? 0;
+        }
+    }
+
+    function voters(idx: number): string[] | undefined {
+        if (content.votes.total.kind !== "visible_poll_votes") {
+            return undefined;
+        }
+
+        return content.votes.total.votes[idx];
+    }
+
+    function totalVotes(content: PollContent): number {
+        if (content.votes.total.kind === "anonymous_poll_votes") {
+            return Object.values(content.votes.total.votes).reduce((total, n) => total + n, 0);
+        }
+        if (content.votes.total.kind === "hidden_poll_votes") {
+            return content.votes.total.votes;
+        }
+        if (content.votes.total.kind === "visible_poll_votes") {
+            return Object.values(content.votes.total.votes).reduce(
+                (total, n) => total + n.length,
+                0,
+            );
+        }
+        return 0;
+    }
+
+    function votesForAnswer(idx: number): number {
+        if (content.votes.total.kind === "anonymous_poll_votes") {
+            return content.votes.total.votes[idx] ?? 0;
+        }
+        if (content.votes.total.kind === "hidden_poll_votes") {
+            return 0;
+        }
+        if (content.votes.total.kind === "visible_poll_votes") {
+            return content.votes.total.votes[idx]?.length ?? 0;
+        }
+        return 0;
+    }
+
+    function percentageOfVote(idx: number) {
+        return showVotes ? (votesForAnswer(idx) / numberOfVotes) * 100 : 0;
+    }
+    let txtColor = $derived(me ? "#ffffff" : "var(--txt)");
+    let date = $derived(
+        content.config.endDate ? new Date(Number(content.config.endDate)) : undefined,
+    );
+    let haveIVoted = $derived(content.votes.user.length > 0);
+    let numberOfVotes = $derived(totalVotes(content));
+    let cannotVote = $derived(
+        content.ended || readonly || (haveIVoted && !content.config.allowUserToChangeVote),
+    );
+    let showVotes = $derived(
+        content.ended ||
+            ((haveIVoted || senderId === $currentUserIdStore) &&
+                (content.config.showVotesBeforeEndDate || content.config.endDate === undefined)),
+    );
+</script>
+
+<div class="poll">
+    {#if content.config.text !== undefined}
+        <div class="question">
+            <div class="icon">
+                <Poll size={$iconSize} color={txtColor} />
+            </div>
+            <p class="question-txt">{content.config.text}</p>
+        </div>
+    {/if}
+    <div class="answers">
+        {#each [...content.config.options] as answer, i (answer)}
+            <PollAnswer
+                onClick={() => vote(i)}
+                finished={content.ended}
+                {readonly}
+                percent={percentageOfVote(i)}
+                {answer}
+                voted={votedFor(i)}
+                {txtColor}
+                {me}
+                voters={voters(i)}
+                numVotes={voteCount(i)}
+                {showVotes} />
+        {/each}
+    </div>
+    <p class="total-votes">
+        <Translatable
+            resourceKey={i18nKey("poll.totalVotes", { total: numberOfVotes.toString() })} />
+    </p>
+    <p class="timestamp">
+        {#if content.config.anonymous}
+            <Translatable resourceKey={i18nKey("poll.votersPrivate")} />
+        {:else}
+            <Translatable resourceKey={i18nKey("poll.votersPublic")} />
+        {/if}
+    </p>
+    {#if date !== undefined}
+        <p class="timestamp">
+            {#if content.ended}
+                <Translatable resourceKey={i18nKey("poll.finished")} />
+            {:else}
+                <Translatable
+                    resourceKey={i18nKey("poll.pollEnds", {
+                        end: `${client.toLongDateString(date)} @ ${client.toShortTimeString(date)}`,
+                    })} />
+            {/if}
+        </p>
+    {/if}
+</div>
+
+<style lang="scss">
+    .poll {
+        @include size-above(sm) {
+            min-width: 240px;
+        }
+    }
+
+    .question {
+        display: flex;
+        align-items: flex-start;
+        .question-txt {
+            @include font(bold, normal, fs-110);
+        }
+        .icon {
+            flex: 0 0 30px;
+        }
+    }
+
+    .answers {
+        margin: $sp3 0 $sp4 0;
+        display: flex;
+        flex-direction: column;
+        gap: $sp4;
+    }
+
+    .total-votes {
+        @include font(bold, normal, fs-70);
+    }
+
+    .timestamp {
+        @include font(light, normal, fs-70);
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/content/PrizeContent.svelte b/frontend/app/src/desktop/features/chats/core/content/PrizeContent.svelte
new file mode 100644
index 0000000000..0268d9a10c
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/content/PrizeContent.svelte
@@ -0,0 +1,443 @@
+<script lang="ts">
+    import type { DelegationChain, ECDSAKeyIdentity } from "@icp-sdk/core/identity";
+    import {
+        AuthProvider,
+        chitBands,
+        chitStateStore,
+        cryptoLookup,
+        isDiamondStore,
+        isLifetimeDiamondStore,
+        mobileWidth,
+        publish,
+        type ChatIdentifier,
+        type DiamondMembershipStatus,
+        type OpenChat,
+        type PrizeContent,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { Confetti } from "svelte-confetti";
+    import { _ } from "svelte-i18n";
+    import Clock from "svelte-material-icons/Clock.svelte";
+    import Fingerprint from "svelte-material-icons/Fingerprint.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { claimsStore } from "@src/stores/claims";
+    import { rtlStore } from "@src/stores/rtl";
+    import { now500 } from "@src/stores/time";
+    import { toastStore } from "@src/stores/toast";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import Diamond from "@src/desktop/ui/icons/Diamond.svelte";
+    import SpinningToken from "@src/desktop/ui/icons/SpinningToken.svelte";
+    import SecureButton from "@src/desktop/features/chats/core/SecureButton.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import Badges from "@src/desktop/features/profile/Badges.svelte";
+    import ChitEarnedBadge from "@src/desktop/features/profile/ChitEarnedBadge.svelte";
+    import ReAuthenticateModal from "@src/desktop/features/profile/ReAuthenticateModal.svelte";
+    import Streak from "@src/desktop/features/profile/Streak.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        content: PrizeContent;
+        chatId: ChatIdentifier;
+        messageId: bigint;
+        me: boolean;
+        intersecting: boolean;
+    }
+
+    let { content, chatId, messageId, me, intersecting }: Props = $props();
+
+    let progressWidth = $state(0);
+    let mouseEvent = $state<MouseEvent>();
+
+    async function claim(e: MouseEvent, auth: { signInProofJwt: string } | undefined) {
+        const signInProof = auth?.signInProofJwt;
+        if (signInProof === undefined && content.requiresCaptcha) {
+            mouseEvent = e;
+            showAuthentication = true;
+            return;
+        }
+
+        showAuthentication = false;
+        if (e.isTrusted && chatId.kind !== "direct_chat" && !me && userEligible) {
+            claimsStore.add(messageId);
+            client
+                .claimPrize(chatId, messageId, e, signInProof)
+                .then((success) => {
+                    if (!success) {
+                        toastStore.showFailureToast(i18nKey("prizes.claimFailed"));
+                    }
+                })
+                .finally(() => claimsStore.delete(messageId));
+        }
+    }
+
+    function onDiamondClick() {
+        publish("upgrade");
+    }
+
+    function onStreakClick() {
+        publish("claimDailyChit");
+    }
+    let logo = $derived(
+        [...$cryptoLookup.values()].find(
+            (t) => t.symbol.toLowerCase() === content.token.toLowerCase(),
+        )?.logo ?? "",
+    );
+    let total = $derived(content.prizesRemaining + content.prizesPending + content.winnerCount);
+    let percentage = $derived((content.winnerCount / total) * 100);
+    let claimedByYou = $derived(content.userIsWinner);
+    let finished = $derived($now500 >= Number(content.endDate));
+    let allClaimed = $derived(content.prizesRemaining <= 0);
+    let userEligible = $derived(
+        (!content.diamondOnly || $isDiamondStore) &&
+            (!content.lifetimeDiamondOnly || $isLifetimeDiamondStore) &&
+            // Unique person ("verified user") gating is suspended - always eligible
+            content.streakOnly <= $chitStateStore.streak &&
+            content.minChitEarned <= $chitStateStore.totalChitEarned,
+    );
+    let disabled = $derived(finished || claimedByYou || allClaimed || !userEligible);
+    let timeRemaining = $derived(
+        finished
+            ? $_("prizes.finished")
+            : client.formatTimeRemaining($now500, Number(content.endDate)),
+    );
+    let diamondStatus = $derived(
+        (content.lifetimeDiamondOnly
+            ? "lifetime"
+            : content.diamondOnly
+              ? "active"
+              : "inactive") as DiamondMembershipStatus["kind"],
+    );
+    let restrictedPrize = $derived(
+        content.diamondOnly ||
+            content.lifetimeDiamondOnly ||
+            content.streakOnly > 0 ||
+            content.requiresCaptcha ||
+            content.minChitEarned > 0,
+    );
+    let showAuthentication = $state(false);
+    let spin = $derived(intersecting && !finished && !allClaimed);
+    let mirror = $derived(intersecting && !$mobileWidth);
+
+    function reauthenticated(detail: {
+        key: ECDSAKeyIdentity;
+        delegation: DelegationChain;
+        provider: AuthProvider;
+        signInProofJwt: string;
+    }) {
+        if (mouseEvent !== undefined) {
+            claim(mouseEvent, detail);
+        }
+    }
+</script>
+
+{#if showAuthentication}
+    <ReAuthenticateModal
+        onCancel={() => (showAuthentication = false)}
+        onSuccess={reauthenticated}
+        title={i18nKey("prizes.authRequiredTitle")}
+        message={i18nKey("prizes.authRequiredMessage")} />
+{/if}
+
+<div class={`prize ${content.token}`}>
+    <div class="top">
+        <div class="countdown" class:rtl={$rtlStore}>
+            <Clock size={"1em"} color={"#ffffff"} />
+            <span>
+                {#if allClaimed && !finished}
+                    <Translatable resourceKey={i18nKey("prizes.allClaimed")} />
+                {:else}
+                    {timeRemaining}
+                {/if}
+            </span>
+            {#if restrictedPrize}
+                <div class="badges">
+                    <Badges
+                        {diamondStatus}
+                        uniquePerson={false}
+                        chitEarned={content.minChitEarned}
+                        streak={content.streakOnly} />
+                </div>
+            {/if}
+        </div>
+        <div class="prize-coin">
+            <SpinningToken {logo} {spin} {mirror} />
+        </div>
+    </div>
+    <div class="bottom">
+        {#if content.caption !== undefined}
+            <div class="caption">
+                {content.caption}
+            </div>
+        {/if}
+        {#if !me}
+            {#if restrictedPrize}
+                <div class="restricted">
+                    <Translatable resourceKey={i18nKey("prizes.restrictedMessage")} />
+                    {#if content.requiresCaptcha}
+                        <div class="captcha">
+                            <span class="fingerprint-icon">
+                                <Fingerprint
+                                    viewBox={"0 -1 24 24"}
+                                    size={"1.2em"}
+                                    color={"var(--accent)"} />
+                            </span>
+                            <Translatable
+                                resourceKey={i18nKey("prizes.authRequiredLabel", {
+                                    n: content.streakOnly,
+                                })} />
+                        </div>
+                    {/if}
+                    {#if content.minChitEarned > 0}
+                        <div class="chit_earned">
+                            <span class="chit_icon">
+                                <ChitEarnedBadge earned={content.minChitEarned}></ChitEarnedBadge>
+                            </span>
+
+                            <Translatable
+                                resourceKey={i18nKey("prizes.minChitEarnedValue", {
+                                    n: chitBands.get(content.minChitEarned) ?? "0",
+                                })}></Translatable>
+                        </div>
+                    {/if}
+                    {#if content.diamondOnly || content.lifetimeDiamondOnly}
+                        <div onclick={onDiamondClick}>
+                            <div>
+                                <Diamond
+                                    size={"1.1em"}
+                                    status={content.lifetimeDiamondOnly ? "lifetime" : "active"} />
+                            </div>
+                            <Translatable
+                                resourceKey={i18nKey(
+                                    "prizes." +
+                                        (content.lifetimeDiamondOnly
+                                            ? "lifetimeDiamondMembership"
+                                            : "diamondMembership"),
+                                )} />
+                        </div>
+                    {/if}
+                    <!-- Unique person ("verified user") gating is suspended -->
+                    {#if content.streakOnly > 0}
+                        <div onclick={onStreakClick}>
+                            <div><Streak days={content.streakOnly} /></div>
+                            <Translatable
+                                resourceKey={i18nKey("prizes.streakFull", {
+                                    n: content.streakOnly,
+                                })} />
+                        </div>
+                    {/if}
+                </div>
+            {/if}
+
+            {#if userEligible}
+                <div class="click"><Translatable resourceKey={i18nKey("prizes.click")} /></div>
+            {/if}
+        {:else if finished}
+            <div class="click"><Translatable resourceKey={i18nKey("prizes.prizeFinished")} /></div>
+        {:else}
+            <div class="click"><Translatable resourceKey={i18nKey("prizes.live")} /></div>
+        {/if}
+        <div class="progress" bind:clientWidth={progressWidth}>
+            <div
+                class="claimed"
+                class:rtl={$rtlStore}
+                style="background-size: {progressWidth}px 100%; width: {percentage}%">
+            </div>
+        </div>
+        <div class="number-claimed">
+            {content.winnerCount}/{total}
+        </div>
+        <div class="prize-claim">
+            {#if claimedByYou}
+                <div class="tada">
+                    <div class="confetti">
+                        <Confetti size={30} colorArray={[`url(${logo})`]} />
+                    </div>
+                </div>
+            {/if}
+
+            {#if !me}
+                <ButtonGroup align="fill">
+                    <SecureButton
+                        label={"Prize message clicked"}
+                        loading={$claimsStore.has(messageId)}
+                        onClick={(e) => claim(e, undefined)}
+                        {disabled}
+                        hollow
+                        ><Translatable
+                            resourceKey={i18nKey(
+                                claimedByYou
+                                    ? "prizes.claimed"
+                                    : finished
+                                      ? "prizes.finished"
+                                      : allClaimed
+                                        ? "prizes.allClaimed"
+                                        : "prizes.claim",
+                            )} /></SecureButton>
+                </ButtonGroup>
+            {/if}
+        </div>
+    </div>
+</div>
+
+<style lang="scss">
+    $accent: var(--prize);
+
+    :global(.message .prize .restricted .noselect) {
+        margin: auto;
+    }
+
+    .prize-claim :global(button) {
+        min-height: 45px !important;
+        min-width: unset !important;
+    }
+
+    .prize-claim :global(button.loading) {
+        background-color: $accent;
+        color: var(--button-txt);
+    }
+
+    .prize-claim :global(button:not(.disabled):hover) {
+        background-color: $accent;
+        color: var(--button-txt);
+    }
+
+    .prize-claim :global(button:not(.disabled)) {
+        border: 1px solid $accent !important;
+    }
+
+    .prize {
+        max-width: 400px;
+    }
+
+    .top {
+        position: relative;
+        padding: 30px 0 30px 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        background: radial-gradient(circle, rgba(238, 31, 122, 1) 0%, rgba(59, 12, 190, 1) 80%);
+    }
+
+    .countdown {
+        @include font-size(fs-60);
+        font-weight: 700;
+        position: absolute;
+        display: flex;
+        gap: $sp2;
+        align-items: center;
+        border-radius: var(--rd);
+        color: white;
+        top: 10px;
+        left: 10px;
+        background-color: rgba(0, 0, 0, 0.3);
+        padding: $sp2 $sp3;
+        text-transform: lowercase;
+
+        &.rtl {
+            left: unset;
+            right: 10px;
+        }
+
+        .badges {
+            gap: $sp2;
+            display: flex;
+            align-items: center;
+            @include font-size(fs-100);
+        }
+    }
+
+    .tada {
+        position: relative;
+
+        .confetti {
+            position: absolute;
+            pointer-events: none;
+            top: 50%;
+            left: 50%;
+        }
+    }
+
+    .number-claimed {
+        @include font(bold, normal, fs-80);
+        margin-bottom: $sp3;
+    }
+
+    .click,
+    .caption,
+    .restricted {
+        @include font(book, normal, fs-80);
+        margin-bottom: $sp4;
+    }
+
+    .progress {
+        height: toRem(16);
+        position: relative;
+        background: var(--chatSummary-bg-selected);
+        border-radius: $sp3;
+        margin-bottom: $sp2;
+        overflow: hidden;
+        @include mobile() {
+            margin-top: 0;
+        }
+
+        .claimed {
+            $red: rgba(234, 41, 41, 1);
+            $orange: rgba(244, 118, 4, 1);
+            $green: rgba(74, 233, 122, 1);
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            background-image: linear-gradient(90deg, $green 0%, $orange 50%, $red 100%);
+            &.rtl {
+                left: unset;
+                right: 0;
+                background-image: linear-gradient(90deg, $red 0%, $orange 50%, $green 100%);
+            }
+        }
+    }
+
+    .bottom {
+        padding: $sp4;
+        padding-bottom: 0;
+    }
+    .image {
+        height: auto;
+        width: 360px;
+        @include mobile() {
+            width: 100%;
+        }
+    }
+
+    .restricted {
+        display: flex;
+        flex-direction: column;
+        gap: $sp2;
+
+        div {
+            display: flex;
+            flex-direction: row;
+            gap: $sp3;
+            align-items: center;
+            cursor: pointer;
+
+            :first-child {
+                width: $sp5;
+            }
+        }
+    }
+
+    .fingerprint-icon {
+        text-align: center;
+    }
+
+    .chit_icon {
+        $size: 18px;
+        width: $size;
+        height: $size;
+        display: flex;
+        align-items: center;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/content/PrizeContentBuilder.svelte b/frontend/app/src/desktop/features/chats/core/content/PrizeContentBuilder.svelte
new file mode 100644
index 0000000000..9408a371ba
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/content/PrizeContentBuilder.svelte
@@ -0,0 +1,666 @@
+<script lang="ts" module>
+    type Duration = "oneHour" | "oneDay" | "oneWeek";
+    type PrizeConfig = {
+        minChitEarned: number;
+        diamond: "none" | "standard" | "lifetime";
+        uniquePersonOnly: boolean;
+        minStreak: number;
+        requiresAuth: boolean;
+        distribution: "equal" | "random";
+        duration: Duration;
+    };
+    const defaultPrizeRestrictions: PrizeConfig = {
+        minChitEarned: 0,
+        diamond: "none",
+        uniquePersonOnly: false,
+        minStreak: 0,
+        requiresAuth: false,
+        distribution: "random",
+        duration: "oneDay",
+    };
+</script>
+
+<script lang="ts">
+    import type {
+        ChatSummary,
+        MessageContext,
+        OpenChat,
+        PrizeContentInitial,
+    } from "@client";
+    import {
+        bigIntMax,
+        chitBands,
+        cryptoBalanceStore,
+        cryptoLookup,
+        LocalStorageStore,
+        mobileWidth,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { pinNumberErrorMessageStore } from "@src/stores/pinNumber";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import Checkbox from "@src/desktop/shared/Checkbox.svelte";
+    import ErrorMessage from "@src/desktop/shared/ErrorMessage.svelte";
+    import EqualDistribution from "@src/desktop/ui/icons/EqualDistribution.svelte";
+    import RandomDistribution from "@src/desktop/ui/icons/RandomDistribution.svelte";
+    import Legend from "@src/desktop/shared/Legend.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import NumberInput from "@src/desktop/shared/NumberInput.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import Radio from "@src/desktop/shared/Radio.svelte";
+    import Range from "@src/desktop/shared/Range.svelte";
+    import Select from "@src/desktop/shared/Select.svelte";
+    import TextArea from "@src/desktop/shared/TextArea.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import AccountInfo from "@src/desktop/shared/AccountInfo.svelte";
+    import BalanceWithRefresh from "@src/desktop/shared/BalanceWithRefresh.svelte";
+    import CryptoSelector from "@src/desktop/shared/CryptoSelector.svelte";
+    import TokenInput from "@src/desktop/shared/TokenInput.svelte";
+
+    const ONE_HOUR = 1000 * 60 * 60;
+    const ONE_DAY = ONE_HOUR * 24;
+    const ONE_WEEK = ONE_DAY * 7;
+    const OC_FEE_PERCENTAGE = 5n;
+    const client = getContext<OpenChat>("client");
+    const streaks = [3, 7, 14, 30, 100, 365];
+
+    interface Props {
+        draftAmount: bigint;
+        ledger: string;
+        chat: ChatSummary;
+        context: MessageContext;
+        onClose: () => void;
+    }
+
+    let {
+        draftAmount = $bindable(),
+        ledger = $bindable(),
+        chat,
+        context,
+        onClose,
+    }: Props = $props();
+
+    const prizeConfig = new LocalStorageStore(
+        "openchat_prize_config",
+        defaultPrizeRestrictions,
+        JSON.stringify,
+        (s) => JSON.parse(s),
+        (_a, _b) => false,
+    );
+
+    let numberOfWinners = $state(20);
+    let distribution: "equal" | "random" = $state($prizeConfig.distribution);
+    const durations: Duration[] = ["oneHour", "oneDay", "oneWeek"];
+    let selectedDuration: Duration = $state($prizeConfig.duration);
+    let diamondType: "none" | "standard" | "lifetime" = $state($prizeConfig.diamond);
+    let diamondOnly = $derived(diamondType !== "none");
+    // Unique-person ("verified user") gating is suspended - force off so a value persisted from a
+    // previous session can't be silently reapplied (the restriction control is removed).
+    const uniquePersonOnly = false;
+    let minStreak = $state<number>($prizeConfig.minStreak);
+    let minChitEarned = $state<number>($prizeConfig.minChitEarned);
+    let streakOnly = $derived(minStreak > 0);
+    let chitOnly = $derived(minChitEarned > 0);
+    let refreshing = false;
+    let error: string | undefined = $state(undefined);
+    let message = $state("");
+    let toppingUp = $state(false);
+    let tokenChanging = $state(true);
+    let balanceWithRefresh: BalanceWithRefresh;
+    let tokenInputState: "ok" | "zero" | "too_low" | "too_high" = $state("ok");
+    let sending = $state(false);
+    let requiresAuth = $state($prizeConfig.requiresAuth);
+    let anyUser = $derived(!diamondOnly && !uniquePersonOnly && !streakOnly && !chitOnly);
+    let cryptoBalance = $derived($cryptoBalanceStore.get(ledger) ?? 0n);
+    let tokenDetails = $derived($cryptoLookup.get(ledger)!);
+    let symbol = $derived(tokenDetails.symbol);
+    let transferFee = $derived(tokenDetails.transferFee);
+    let transferFees = $derived(transferFee * BigInt(numberOfWinners ?? 0));
+    let prizeFees = $derived(transferFees + (draftAmount * OC_FEE_PERCENTAGE) / 100n);
+    let totalFees = $derived(transferFee + prizeFees);
+    let multiUserChat = $derived(chat.kind === "group_chat" || chat.kind === "channel");
+    let remainingBalance = $state(0n);
+    $effect(() => {
+        remainingBalance =
+            draftAmount > 0n ? cryptoBalance - draftAmount - totalFees : cryptoBalance;
+    });
+    let minAmount = $derived(100n * BigInt(numberOfWinners ?? 0) * transferFee);
+    let maxAmount = $derived(bigIntMax(cryptoBalance - totalFees, BigInt(0)));
+    let valid = $derived(error === undefined && tokenInputState === "ok" && !tokenChanging);
+    let zero = $derived(cryptoBalance <= transferFee && !tokenChanging);
+    let errorMessage = $derived(error !== undefined ? i18nKey(error) : $pinNumberErrorMessageStore);
+
+    $effect(() => {
+        if (tokenInputState === "too_low") {
+            error = $_("minimumAmount", {
+                values: {
+                    amount: client.formatTokens(minAmount, tokenDetails.decimals),
+                    symbol,
+                },
+            });
+        } else {
+            error = undefined;
+        }
+    });
+
+    function reset() {
+        balanceWithRefresh.refresh();
+    }
+
+    function onDiamondChanged() {
+        diamondType = diamondOnly ? "standard" : "none";
+    }
+
+    function recipientFromContext({ chatId }: MessageContext) {
+        switch (chatId.kind) {
+            case "channel":
+                return chatId.communityId;
+            case "group_chat":
+                return chatId.groupId;
+            default:
+                throw new Error("We can't create prizes in direct chats");
+        }
+    }
+
+    function getEndDate() {
+        const now = Date.now();
+        switch (selectedDuration) {
+            case "oneHour":
+                return BigInt(now + ONE_HOUR);
+            case "oneDay":
+                return BigInt(now + ONE_DAY);
+            case "oneWeek":
+                return BigInt(now + ONE_WEEK);
+        }
+    }
+
+    function send() {
+        const prizes = generatePrizes();
+        const amountE8s = prizes.reduce((total, p) => total + p) + prizeFees;
+
+        const content: PrizeContentInitial = {
+            kind: "prize_content_initial",
+            caption: message === "" ? undefined : message,
+            endDate: getEndDate(),
+            diamondOnly: diamondType === "standard",
+            lifetimeDiamondOnly: diamondType === "lifetime",
+            uniquePersonOnly,
+            streakOnly: minStreak,
+            minChitEarned: minChitEarned,
+            transfer: {
+                kind: "pending",
+                ledger,
+                token: symbol,
+                recipient: recipientFromContext(context),
+                amountE8s,
+                feeE8s: transferFee,
+                createdAtNanos: BigInt(Date.now()) * BigInt(1_000_000),
+            },
+            amount: draftAmount,
+            fees: totalFees,
+            prizes,
+            requiresCaptcha: requiresAuth,
+        };
+
+        prizeConfig.set({
+            minChitEarned,
+            diamond: diamondType,
+            uniquePersonOnly,
+            minStreak,
+            requiresAuth,
+            distribution,
+            duration: selectedDuration,
+        });
+
+        sending = true;
+        error = undefined;
+
+        client
+            .sendMessageWithContent(context, content, false)
+            .then((resp) => {
+                if (resp.kind === "success" || resp.kind === "transfer_success") {
+                    onClose();
+                } else if ($pinNumberErrorMessageStore === undefined) {
+                    error = "errorSendingMessage";
+                }
+            })
+            .finally(() => (sending = false));
+    }
+
+    function cancel() {
+        toppingUp = false;
+        onClose();
+    }
+
+    function onBalanceRefreshed() {
+        onBalanceRefreshFinished();
+        error = undefined;
+    }
+
+    function onBalanceRefreshError(err: string) {
+        onBalanceRefreshFinished();
+        error = err;
+    }
+
+    function onBalanceRefreshFinished() {
+        toppingUp = false;
+        tokenChanging = false;
+        if (remainingBalance < 0) {
+            remainingBalance = BigInt(0);
+            draftAmount = cryptoBalance - transferFee;
+            if (draftAmount < 0) {
+                draftAmount = BigInt(0);
+            }
+        }
+    }
+
+    function generatePrizes(): bigint[] {
+        if (!numberOfWinners) return [];
+
+        const share = Math.round(Number(draftAmount) / numberOfWinners);
+        switch (distribution) {
+            case "equal":
+                return generateEquallyDistributedPrizes(draftAmount, share);
+            case "random":
+                return generateRandomlyDistributedPrizes(draftAmount, share);
+        }
+    }
+
+    // make sure that any rounding errors are corrected for
+    function compensateRounding(prizes: bigint[], fund: bigint): bigint[] {
+        const total = prizes.reduce((agg, p) => agg + p, 0n);
+        const diff = fund - total;
+        if (diff !== 0n) {
+            prizes[0] = prizes[0] + diff;
+        }
+        return prizes;
+    }
+
+    function generateEquallyDistributedPrizes(fund: bigint, share: number): bigint[] {
+        const prizes = Array.from({ length: numberOfWinners }).map(() => BigInt(share));
+        return compensateRounding(prizes, fund);
+    }
+
+    function generateRandomlyDistributedPrizes(fund: bigint, share: number): bigint[] {
+        const min = share * 0.1;
+        const max = share * 2;
+
+        const intermediate = Array.from({ length: numberOfWinners }).map(() => random(min, max));
+        const total = intermediate.reduce((agg, p) => agg + p, 0);
+
+        // we might have more prizes than the total so let's scale
+        const scale = total / Number(fund);
+        const scaled = intermediate.map((p) => BigInt(Math.round(p / scale)));
+
+        const prizes = compensateRounding(scaled, fund);
+
+        return ensureMinPrizeAtLeastTransferFee(prizes);
+    }
+
+    function ensureMinPrizeAtLeastTransferFee(prizes: bigint[]): bigint[] {
+        let totalAdded = 0n;
+        let max = 0n;
+        let maxIndex = 0;
+        for (let i = 0; i < prizes.length; i++) {
+            const prize = prizes[i];
+            if (prize < transferFee) {
+                prizes[i] = transferFee;
+                totalAdded += transferFee - prize;
+            } else if (prize > max) {
+                max = prize;
+                maxIndex = i;
+            }
+        }
+
+        if (totalAdded > 0n) {
+            prizes[maxIndex] = max - totalAdded;
+        }
+
+        return prizes;
+    }
+
+    function random(min: number, max: number): number {
+        const range = max - min;
+        return Math.floor(min + Math.random() * range);
+    }
+
+    function onAnyUserChecked() {
+        anyUser = true;
+        diamondType = "none";
+        streakOnly = false;
+        chitOnly = false;
+    }
+
+    function onStreakChanged() {
+        minStreak = streakOnly ? 3 : 0;
+    }
+
+    function onChitChanged() {
+        minChitEarned = chitOnly ? 10_000 : 0;
+    }
+</script>
+
+<Overlay dismissible>
+    <ModalContent>
+        {#snippet header()}
+            <span class="header">
+                <div class="left">
+                    <div class="main-title">
+                        <div><Translatable resourceKey={i18nKey("prizes.title")} /></div>
+                        <div>
+                            <CryptoSelector bind:ledger />
+                        </div>
+                    </div>
+                </div>
+                <BalanceWithRefresh
+                    bind:toppingUp
+                    bind:this={balanceWithRefresh}
+                    {ledger}
+                    value={remainingBalance}
+                    label={i18nKey("cryptoAccount.shortBalanceLabel")}
+                    bold
+                    showTopUp
+                    onRefreshed={onBalanceRefreshed}
+                    onError={onBalanceRefreshError} />
+            </span>
+        {/snippet}
+        {#snippet body()}
+            <form>
+                <div class="body" class:zero={zero || toppingUp}>
+                    {#if zero || toppingUp}
+                        <AccountInfo {ledger} />
+                        {#if zero}
+                            <p>
+                                <Translatable
+                                    resourceKey={i18nKey("tokenTransfer.zeroBalance", {
+                                        token: symbol,
+                                    })} />
+                            </p>
+                        {/if}
+                        <p><Translatable resourceKey={i18nKey("tokenTransfer.makeDeposit")} /></p>
+                    {:else}
+                        <div class="transfer">
+                            <TokenInput
+                                {ledger}
+                                label={"prizes.totalAmount"}
+                                autofocus={!multiUserChat}
+                                bind:status={tokenInputState}
+                                transferFees={totalFees}
+                                {minAmount}
+                                {maxAmount}
+                                bind:amount={draftAmount} />
+                        </div>
+                        <div class="message">
+                            <Legend label={i18nKey("tokenTransfer.message")} />
+                            <TextArea
+                                maxlength={200}
+                                rows={3}
+                                autofocus={false}
+                                placeholder={i18nKey("tokenTransfer.messagePlaceholder")}
+                                bind:value={message} />
+                        </div>
+                        <div class="winners">
+                            <Legend
+                                label={i18nKey("prizes.numberOfWinners")}
+                                rules={i18nKey(numberOfWinners?.toString())} />
+                            <div class="pickers">
+                                <Range fat min={1} max={1000} bind:value={numberOfWinners} />
+                                <div class="num-picker">
+                                    <NumberInput
+                                        align={"right"}
+                                        defaultValue={20}
+                                        min={1}
+                                        max={1000}
+                                        bind:value={numberOfWinners} />
+                                </div>
+                            </div>
+                        </div>
+                        <Legend label={i18nKey("prizes.distribution")} />
+                        <div class="distributions">
+                            <!-- svelte-ignore a11y_click_events_have_key_events -->
+                            <div
+                                role="button"
+                                tabindex="0"
+                                onclick={() => (distribution = "random")}
+                                class="distribution">
+                                <div class:selected={distribution === "random"} class="dist-icon">
+                                    <RandomDistribution size={"100%"} color={"var(--icon-txt)"} />
+                                </div>
+                                <div class="dist-label">
+                                    <Translatable
+                                        resourceKey={i18nKey("prizes.randomDistribution")} />
+                                </div>
+                            </div>
+                            <!-- svelte-ignore a11y_click_events_have_key_events -->
+                            <div
+                                role="button"
+                                tabindex="0"
+                                onclick={() => (distribution = "equal")}
+                                class="distribution">
+                                <div class:selected={distribution === "equal"} class="dist-icon">
+                                    <EqualDistribution size={"100%"} color={"var(--icon-txt)"} />
+                                </div>
+                                <div class="dist-label">
+                                    <Translatable
+                                        resourceKey={i18nKey("prizes.equalDistribution")} />
+                                </div>
+                            </div>
+                        </div>
+                        <div class="config">
+                            <div class="duration">
+                                <Legend label={i18nKey("prizes.duration")} />
+                                {#each durations as d}
+                                    <Radio
+                                        onChange={() => (selectedDuration = d)}
+                                        value={d}
+                                        checked={selectedDuration === d}
+                                        id={`duration_${d}`}
+                                        label={i18nKey(`poll.${d}`)}
+                                        group={"prize_duration"} />
+                                {/each}
+                            </div>
+                            <div class="restrictions">
+                                <Legend label={i18nKey("prizes.restrictions")} />
+                                <Checkbox
+                                    id="captcha"
+                                    label={i18nKey(`prizes.authRequiredLabel`)}
+                                    bind:checked={requiresAuth} />
+                                <Checkbox
+                                    id="any_user"
+                                    label={i18nKey(`prizes.anyone`)}
+                                    bind:checked={anyUser}
+                                    onChange={onAnyUserChecked} />
+                                <Checkbox
+                                    id="diamond_only"
+                                    label={i18nKey(`prizes.onlyDiamond`)}
+                                    onChange={onDiamondChanged}
+                                    bind:checked={diamondOnly} />
+                                {#if diamondOnly}
+                                    <div class="diamond-choice">
+                                        <Radio
+                                            id={"standard-diamond"}
+                                            onChange={() => (diamondType = "standard")}
+                                            checked={diamondType === "standard"}
+                                            label={i18nKey(`prizes.standardDiamond`)}
+                                            group={"diamond"} />
+                                        <Radio
+                                            id={"lifetime-diamond"}
+                                            onChange={() => (diamondType = "lifetime")}
+                                            checked={diamondType === "lifetime"}
+                                            label={i18nKey(`prizes.lifetimeDiamond`)}
+                                            group={"diamond"} />
+                                    </div>
+                                {/if}
+                                <!-- Unique person ("verified user") gating is suspended -->
+                                <Checkbox
+                                    id="streak_only"
+                                    label={i18nKey(`prizes.onlyStreak`)}
+                                    onChange={onStreakChanged}
+                                    bind:checked={streakOnly} />
+                                {#if streakOnly}
+                                    <Select bind:value={minStreak}>
+                                        {#each streaks as streak}
+                                            <option value={streak}>
+                                                <Translatable
+                                                    resourceKey={i18nKey("prizes.streakValue", {
+                                                        n: streak.toString(),
+                                                    })}></Translatable>
+                                            </option>
+                                        {/each}
+                                    </Select>
+                                {/if}
+                                <Checkbox
+                                    id="chit_only"
+                                    label={i18nKey(`prizes.onlyChit`)}
+                                    onChange={onChitChanged}
+                                    bind:checked={chitOnly} />
+                                {#if chitOnly}
+                                    <Select bind:value={minChitEarned}>
+                                        {#each chitBands.entries() as [value, name]}
+                                            <option {value}>
+                                                <Translatable
+                                                    resourceKey={i18nKey(
+                                                        "prizes.minChitEarnedValue",
+                                                        { n: name },
+                                                    )}></Translatable>
+                                            </option>
+                                        {/each}
+                                    </Select>
+                                {/if}
+                            </div>
+                        </div>
+                        {#if errorMessage !== undefined}
+                            <div class="error">
+                                <ErrorMessage
+                                    ><Translatable resourceKey={errorMessage} /></ErrorMessage>
+                            </div>
+                        {/if}
+                    {/if}
+                </div>
+            </form>
+        {/snippet}
+        {#snippet footer()}
+            <span>
+                <ButtonGroup>
+                    <Button small={!$mobileWidth} tiny={$mobileWidth} secondary onClick={cancel}
+                        ><Translatable resourceKey={i18nKey("cancel")} /></Button>
+                    {#if toppingUp || zero}
+                        <Button
+                            small={!$mobileWidth}
+                            disabled={refreshing}
+                            loading={refreshing}
+                            tiny={$mobileWidth}
+                            onClick={reset}
+                            ><Translatable resourceKey={i18nKey("refresh")} /></Button>
+                    {:else}
+                        <Button
+                            small={!$mobileWidth}
+                            disabled={!valid || sending}
+                            loading={sending}
+                            tiny={$mobileWidth}
+                            onClick={send}
+                            ><Translatable resourceKey={i18nKey("tokenTransfer.send")} /></Button>
+                    {/if}
+                </ButtonGroup>
+            </span>
+        {/snippet}
+    </ModalContent>
+</Overlay>
+
+<style lang="scss">
+    :global(.restrictions .diamond-choice .radio) {
+        margin-bottom: 0;
+    }
+
+    .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: $sp2;
+
+        .left {
+            flex: auto;
+            display: flex;
+            align-items: center;
+            gap: $sp4;
+
+            .main-title {
+                flex: auto;
+                display: flex;
+                align-items: baseline;
+                gap: 10px;
+                @include font(bold, normal, fs-120);
+            }
+        }
+    }
+
+    .body {
+        transition: background-color 100ms ease-in-out;
+        @include font(book, normal, fs-100, 28);
+    }
+
+    .transfer {
+        margin-bottom: $sp4;
+    }
+
+    .how-to {
+        margin-top: $sp4;
+    }
+
+    .distributions {
+        display: flex;
+        gap: $sp6;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: $sp3;
+
+        .distribution {
+            cursor: pointer;
+        }
+
+        .dist-icon {
+            margin: $sp3 0;
+            padding: $sp3 $sp5;
+            border-radius: $sp3;
+            transition: background-color 250ms ease-in-out;
+            &.selected {
+                background-color: var(--icon-hv);
+            }
+        }
+
+        .dist-label {
+            text-align: center;
+        }
+    }
+
+    .config {
+        display: flex;
+        gap: $sp5;
+        justify-content: space-between;
+
+        .restrictions,
+        .duration {
+            flex: 1;
+        }
+    }
+
+    .pickers {
+        display: flex;
+        align-items: center;
+        gap: $sp3;
+
+        .num-picker {
+            flex: 0 0 80px;
+        }
+    }
+
+    .error {
+        margin-top: $sp4;
+    }
+
+    .diamond-choice {
+        margin-left: $sp6;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/content/PrizeWinnerContent.svelte b/frontend/app/src/desktop/features/chats/core/content/PrizeWinnerContent.svelte
new file mode 100644
index 0000000000..c2a9db75e7
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/content/PrizeWinnerContent.svelte
@@ -0,0 +1,158 @@
+<script lang="ts">
+    import type { OpenChat, PrizeWinnerContent } from "@client";
+    import { allUsersStore, cryptoLookup, currentUserIdStore } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import SpinningToken from "@src/desktop/ui/icons/SpinningToken.svelte";
+    import type { ProfileLinkClickedEvent } from "@webcomponents/profileLink";
+    import Markdown from "@src/ui/Markdown.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        content: PrizeWinnerContent;
+    }
+
+    let { content }: Props = $props();
+
+    function username(userId: string): string {
+        return userId === $currentUserIdStore
+            ? $_("you")
+            : `${$allUsersStore.get(userId)?.username ?? $_("unknown")}`;
+    }
+
+    function openUserProfile(ev: Event) {
+        ev.target?.dispatchEvent(
+            new CustomEvent<ProfileLinkClickedEvent>("profile-clicked", {
+                detail: {
+                    userId: content.transaction.recipient,
+                    chatButton: false,
+                    inGlobalContext: false,
+                },
+                bubbles: true,
+            }),
+        );
+        ev.stopPropagation();
+    }
+    let logo = $derived($cryptoLookup.get(content.transaction.ledger)?.logo ?? "");
+    let tokenDetails = $derived($cryptoLookup.get(content.transaction.ledger)!);
+    let symbol = $derived(tokenDetails.symbol);
+    let amount = $derived(
+        client.formatTokens(content.transaction.amountE8s, tokenDetails.decimals),
+    );
+    let winner = $derived(`${username(content.transaction.recipient)}`);
+    let me = $derived($currentUserIdStore === content.transaction.recipient);
+    let transactionLinkText = $derived(client.buildTransactionLink($_, content.transaction));
+</script>
+
+<div class="msg">
+    <div class="wrapper" class:other={!me}>
+        <div class="graphic" class:tiny={!me}>
+            {#if me}
+                <img class="lid" src={"/assets/lid.png"} />
+                <div class="winner-coin">
+                    <SpinningToken spin mirror={false} size={"small"} {logo} />
+                </div>
+                <img class="box" src={"/assets/box.png"} />
+            {:else}
+                <SpinningToken spin={false} mirror size={"tiny"} {logo} />
+            {/if}
+        </div>
+        <div class="txt" class:other={!me}>
+            <div class="label" onclick={openUserProfile}>
+                <Markdown
+                    text={$_("prizes.winner", {
+                        values: { recipient: winner, amount, token: symbol },
+                    })} />
+            </div>
+            {#if transactionLinkText !== undefined}
+                <div class="link">
+                    <Markdown text={transactionLinkText} />
+                </div>
+            {/if}
+        </div>
+    </div>
+</div>
+
+<style lang="scss">
+    .msg {
+        text-align: center;
+        padding-top: $sp2;
+    }
+
+    .wrapper.other {
+        display: flex;
+        align-items: center;
+        gap: $sp3;
+    }
+
+    .txt.other {
+        text-align: start;
+    }
+
+    .label {
+        cursor: pointer;
+        @include font(book, normal, fs-100);
+    }
+
+    .link {
+        @include font(book, normal, fs-80, 28);
+        color: var(--txt-light);
+    }
+
+    .graphic {
+        display: flex;
+        flex-direction: column;
+        padding: 10px 60px;
+
+        &.tiny {
+            padding: 0 10px;
+        }
+
+        .winner-coin {
+            margin-top: -45px;
+            margin-bottom: -34px;
+            align-self: center;
+            animation: bob 3s linear infinite;
+        }
+
+        .lid {
+            width: 90px;
+            height: auto;
+            align-self: flex-end;
+            position: relative;
+            animation: weave 3s linear infinite;
+            z-index: 3;
+        }
+
+        .box {
+            width: 130px;
+            height: auto;
+            align-self: center;
+        }
+    }
+
+    @keyframes bob {
+        0% {
+            transform: translateY(0);
+        }
+        50% {
+            transform: translateY(-8px);
+        }
+        100% {
+            transform: translateY(0);
+        }
+    }
+
+    @keyframes weave {
+        0% {
+            transform: translateX(2px) translateY(0);
+        }
+        50% {
+            transform: translateX(8px) translateY(-5px);
+        }
+        100% {
+            transform: translateX(2px) translateY(0);
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/content/ReportedMessageContent.svelte b/frontend/app/src/desktop/features/chats/core/content/ReportedMessageContent.svelte
new file mode 100644
index 0000000000..baf3a3d8dd
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/content/ReportedMessageContent.svelte
@@ -0,0 +1,95 @@
+<script lang="ts">
+    import type { OpenChat, ReportedMessageContent } from "@client";
+    import { allUsersStore } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Legend from "@src/desktop/shared/Legend.svelte";
+    import TextArea from "@src/desktop/shared/TextArea.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+
+    interface Props {
+        content: ReportedMessageContent;
+    }
+
+    let { content }: Props = $props();
+    const client = getContext<OpenChat>("client");
+
+    let index = $state(0);
+
+    let report = $derived(content.reports[index]);
+    let reasons = [
+        $_("report.threat"),
+        $_("report.child"),
+        $_("report.nonConsensual"),
+        $_("report.selfHarm"),
+        $_("report.violence"),
+        $_("report.scam"),
+        $_("report.other"),
+    ];
+    let message = $derived(
+        $_("report.messageReport", {
+            values: {
+                username:
+                    $allUsersStore.get(report.reportedBy)?.username ??
+                    `unknown user (${report.reportedBy}))`,
+                timestamp: client.toDatetimeString(new Date(report.timestamp)),
+                reason: reasons[report.reasonCode],
+            },
+        }),
+    );
+</script>
+
+<div class="report">
+    <p class="msg"><Markdown text={message} /></p>
+    {#if report.notes !== undefined && report.notes.length > 0}
+        <Legend label={i18nKey("Notes")} />
+        <TextArea disabled rows={2} bind:value={report.notes} />
+    {/if}
+</div>
+
+<div class="report-selectors">
+    {#each content.reports as r, i}
+        <div onclick={() => (index = i)} class="selector" class:selected={report === r}>
+            {i + 1}
+        </div>
+    {/each}
+</div>
+
+<div class="smallprint">
+    {$_("report.showing", {
+        values: { count: content.reports.length, total: content.total.toLocaleString() },
+    })}
+</div>
+
+<style lang="scss">
+    .report {
+        @include font(book, normal, fs-100);
+        margin-bottom: $sp4;
+    }
+    .msg {
+        margin-bottom: $sp3;
+    }
+    .smallprint {
+        color: var(--txt-light);
+        @include font-size(fs-80);
+    }
+    .report-selectors {
+        display: flex;
+        gap: $sp3;
+        margin-bottom: $sp3;
+    }
+    .selector {
+        cursor: pointer;
+        width: 26px;
+        border: 1px solid var(--bd);
+        border-radius: 50%;
+        text-align: center;
+
+        &.selected {
+            background-color: var(--accent);
+            text-shadow: 1px 1px 1px var(--accentDarker);
+            color: #ffffff;
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/content/TextContent.svelte b/frontend/app/src/desktop/features/chats/core/content/TextContent.svelte
new file mode 100644
index 0000000000..3691d8bcc4
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/content/TextContent.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+    import Markdown from "@src/ui/Markdown.svelte";
+    import type { OgPreview, RehydratedMessagePreview, TextContent } from "@client";
+    import { _ } from "svelte-i18n";
+    import IntersectionObserver from "@src/desktop/features/chats/core/IntersectionObserver.svelte";
+    import LinkPreviews from "@src/desktop/features/chats/core/LinkPreviews.svelte";
+
+    const SIZE_LIMIT = 1000;
+
+    interface Props {
+        content: TextContent;
+        truncate?: boolean;
+        pinned?: boolean;
+        edited: boolean;
+        fill: boolean;
+        me: boolean;
+        blockLevelMarkdown: boolean;
+        onRemovePreview?: (url: string) => void;
+        ogPreviews?: OgPreview[];
+        messagePreviews?: RehydratedMessagePreview[];
+    }
+
+    let {
+        content,
+        truncate = false,
+        pinned = false,
+        edited,
+        fill,
+        me,
+        blockLevelMarkdown,
+        onRemovePreview,
+        ogPreviews = [],
+        messagePreviews = [],
+    }: Props = $props();
+
+    function truncateText(text: string): string {
+        // todo - we might be able to do something nicer than this with pure css, but we just need to do
+        // *something* to make sure there a limit to the size of this box
+        if (truncate && text.length > SIZE_LIMIT) {
+            text = text.slice(0, SIZE_LIMIT) + "...";
+        }
+        return text;
+    }
+
+    let text = $derived(truncateText(content.text));
+</script>
+
+<IntersectionObserver unobserveOnIntersect={false}>
+    {#snippet children(intersecting)}
+        <LinkPreviews
+            {me}
+            {pinned}
+            {fill}
+            {ogPreviews}
+            {messagePreviews}
+            {intersecting}
+            onRemove={onRemovePreview} />
+    {/snippet}
+</IntersectionObserver>
+
+<Markdown inline={!blockLevelMarkdown} suppressLinks={pinned} {text} />
+{#if edited}
+    <span class="edited-msg">({$_("edited")})</span>
+{/if}
diff --git a/frontend/app/src/desktop/features/chats/core/content/UserReferralCardContent.svelte b/frontend/app/src/desktop/features/chats/core/content/UserReferralCardContent.svelte
new file mode 100644
index 0000000000..90713b75be
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/content/UserReferralCardContent.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+    import { currentUserIdStore } from "@client";
+    import CopyIcon from "svelte-material-icons/ContentCopy.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import QRCode from "@src/desktop/shared/QRCode.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    let link = `${window.location.origin}/?ref=${$currentUserIdStore}`;
+
+    function onCopy() {
+        navigator.clipboard.writeText(link).then(
+            () => toastStore.showSuccessToast(i18nKey("linkCopiedToClipboard")),
+            () => toastStore.showFailureToast(i18nKey("failedToCopyLinkToClipboard")),
+        );
+    }
+</script>
+
+<div class="container">
+    <div on:click={onCopy} class="link">
+        <div><Translatable resourceKey={i18nKey("tapForReferralLink")} /></div>
+        <CopyIcon size={"1em"} color={"var(--icon-txt)"} />
+    </div>
+    <QRCode text={link} size="larger" fullWidthOnMobile />
+</div>
+
+<style lang="scss">
+    .link {
+        display: flex;
+        gap: $sp2;
+        align-items: center;
+        cursor: pointer;
+    }
+
+    .link {
+        color: var(--link-underline);
+    }
+
+    .container {
+        display: flex;
+        flex-direction: column;
+        gap: $sp4;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/content/VideoCallContent.svelte b/frontend/app/src/desktop/features/chats/core/content/VideoCallContent.svelte
new file mode 100644
index 0000000000..e94ca8ac02
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/content/VideoCallContent.svelte
@@ -0,0 +1,172 @@
+<script lang="ts">
+    import {
+        AvatarSize,
+        OpenChat,
+        allUsersStore,
+        chatIdentifiersEqual,
+        currentUserIdStore,
+        publish,
+        selectedChatSummaryStore,
+        selectedChatWebhooksStore,
+        selectedCommunityMembersStore,
+        type VideoCallContent,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { activeVideoCall } from "@src/stores/video";
+    import Avatar from "@src/desktop/shared/Avatar.svelte";
+    import Button from "@src/ui/Button.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        content: VideoCallContent;
+        messageIndex: number;
+        timestamp: bigint | undefined;
+        senderId: string;
+    }
+
+    let { content, messageIndex, timestamp, senderId }: Props = $props();
+
+    let displayName = $derived(client.getDisplayName(senderId, $selectedCommunityMembersStore, $selectedChatWebhooksStore));
+    let inCall = $derived(
+        $activeVideoCall !== undefined &&
+            $selectedChatSummaryStore !== undefined &&
+            $selectedChatSummaryStore.videoCallInProgress?.messageIndex === messageIndex &&
+            chatIdentifiersEqual($activeVideoCall.chatId, $selectedChatSummaryStore?.id),
+    );
+    let endedDate = $derived(content.ended ? new Date(Number(content.ended)) : undefined);
+    let missed = $derived(
+        content.ended &&
+            content.participants.find((p) => p.userId === $currentUserIdStore) === undefined,
+    );
+    let duration = $derived(
+        content.ended !== undefined && timestamp !== undefined
+            ? i18nKey("videoCall.duration", {
+                  duration: client.formatDuration(Number(content.ended - timestamp)),
+              })
+            : undefined,
+    );
+
+    function joinCall() {
+        if (!inCall && $selectedChatSummaryStore?.videoCallInProgress) {
+            publish("startVideoCall", {
+                chatId: $selectedChatSummaryStore.id,
+                callType: $selectedChatSummaryStore.videoCallInProgress.callType,
+                join: true,
+            });
+        }
+    }
+
+    function leaveCall() {
+        if (inCall) {
+            activeVideoCall.endCall();
+        }
+    }
+</script>
+
+<div class="video-call">
+    <p class="initiator" class:missed>
+        {#if content.callType === "broadcast"}
+            <Translatable
+                resourceKey={i18nKey("videoCall.broadcastStartedBy", { username: displayName })} />
+        {:else if missed}
+            <Translatable
+                resourceKey={i18nKey("videoCall.missedCall", { username: displayName })} />
+        {:else}
+            <Translatable resourceKey={i18nKey("videoCall.startedBy", { username: displayName })} />
+        {/if}
+    </p>
+    <div class="avatars">
+        {#each [...content.participants].slice(0, 5) as participantId}
+            <Avatar
+                url={client.userAvatarUrl($allUsersStore.get(participantId.userId))}
+                userId={participantId.userId}
+                size={AvatarSize.Small} />
+        {/each}
+        {#if content.participants.length > 5}
+            <div class="extra">
+                {`+${content.participants.length - 5}`}
+            </div>
+        {/if}
+    </div>
+    <div class="video-call-btn">
+        {#if inCall}
+            <Button fill disabled={content.ended !== undefined} onClick={leaveCall}>
+                <Translatable
+                    resourceKey={i18nKey(content.ended ? "videoCall.ended" : "videoCall.leave")} />
+            </Button>
+        {:else}
+            <Button fill disabled={endedDate !== undefined} onClick={joinCall}>
+                <Translatable
+                    resourceKey={endedDate
+                        ? i18nKey("videoCall.endedAt", {
+                              time: client.toShortTimeString(endedDate),
+                          })
+                        : i18nKey("videoCall.join")} />
+                {#if duration}
+                    <div class="duration">
+                        <Translatable resourceKey={duration} />
+                    </div>
+                {/if}
+            </Button>
+        {/if}
+    </div>
+</div>
+
+<style lang="scss">
+    $accent: var(--prize);
+
+    .video-call-btn :global(button) {
+        min-height: 45px !important;
+        min-width: unset !important;
+    }
+
+    .video-call-btn :global(button.loading) {
+        background-color: $accent;
+        color: var(--button-txt);
+    }
+
+    .video-call-btn :global(button:not(.disabled):hover) {
+        background-color: $accent;
+        color: var(--button-txt);
+    }
+
+    .video-call-btn :global(button:not(.disabled)) {
+        border: 1px solid $accent !important;
+    }
+
+    .video-call {
+        padding: $sp3 0 0 0;
+    }
+
+    .initiator {
+        margin-bottom: $sp3;
+
+        &.missed {
+            color: var(--warn);
+        }
+    }
+
+    .avatars {
+        display: inline-flex;
+        gap: $sp2;
+        margin-bottom: $sp4;
+    }
+
+    .extra {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 50%;
+        width: toRem(25);
+        height: toRem(25);
+        @include font-size(fs-60);
+        background-color: rgba(0, 0, 0, 0.15);
+    }
+
+    .duration {
+        @include font(light, normal, fs-60);
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/content/VideoContent.svelte b/frontend/app/src/desktop/features/chats/core/content/VideoContent.svelte
new file mode 100644
index 0000000000..c68c81e385
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/content/VideoContent.svelte
@@ -0,0 +1,124 @@
+<script lang="ts">
+    import { rtlStore } from "@src/stores/rtl";
+    import type { VideoContent } from "@client";
+    import ContentCaption from "./ContentCaption.svelte";
+    import { reservedMediaStyle, setPlayingMedia } from "@src/utils/media";
+
+    interface Props {
+        content: VideoContent;
+        fill: boolean;
+        draft?: boolean;
+        reply?: boolean;
+        height?: number | undefined;
+        edited: boolean;
+        blockLevelMarkdown?: boolean;
+    }
+
+    let {
+        content,
+        fill,
+        draft = false,
+        reply = false,
+        height = undefined,
+        edited,
+        blockLevelMarkdown = false,
+    }: Props = $props();
+
+    let videoPlayer: HTMLVideoElement | undefined = $state();
+    let withCaption = content.caption !== undefined && content.caption !== "";
+    let landscape = content.height < content.width;
+
+    function onPlay() {
+        if (videoPlayer) {
+            setPlayingMedia(videoPlayer);
+        }
+    }
+</script>
+
+<div class="video" class:reply class:rtl={$rtlStore}>
+    <video
+        preload="none"
+        poster={content.imageData.blobUrl}
+        class:landscape
+        class:fill
+        class:withCaption
+        class:draft
+        class:reply
+        style={height !== undefined
+            ? `height: ${height}px`
+            : draft || reply
+              ? undefined
+              : reservedMediaStyle(content.width, content.height)}
+        controls
+        onplay={onPlay}
+        bind:this={videoPlayer}>
+        <track kind="captions" />
+        {#if content.videoData.blobUrl}
+            <source src={content.videoData.blobUrl} />
+        {/if}
+    </video>
+</div>
+
+<ContentCaption caption={content.caption} {edited} {blockLevelMarkdown} />
+
+<style lang="scss">
+    .video {
+        position: relative;
+        cursor: pointer;
+
+        &.reply {
+            float: right;
+            margin-left: $sp3;
+            margin-right: 0;
+        }
+
+        &.rtl.reply {
+            float: left;
+            margin-left: 0;
+            margin-right: $sp3;
+        }
+
+        video {
+            width: 100%;
+            display: block;
+
+            &:not(.landscape) {
+                min-height: 90px;
+                min-width: 0px;
+            }
+
+            &:not(.fill) {
+                border-radius: $sp4;
+            }
+
+            &.withCaption {
+                margin-bottom: $sp2;
+            }
+
+            &.draft {
+                max-width: calc(var(--vh, 1vh) * 50);
+                max-height: none;
+                height: auto;
+            }
+
+            &:not(.landscape).draft {
+                max-width: none;
+                max-height: calc(var(--vh, 1vh) * 50);
+                width: auto;
+                height: 100%;
+            }
+
+            &.reply {
+                max-width: 90px;
+                max-height: none;
+                height: auto;
+            }
+
+            &:not(.landscape).reply {
+                max-width: none;
+                max-height: 90px;
+                width: auto;
+            }
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/events/AggregateCommonEvents.svelte b/frontend/app/src/desktop/features/chats/core/events/AggregateCommonEvents.svelte
new file mode 100644
index 0000000000..7052bd2378
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/events/AggregateCommonEvents.svelte
@@ -0,0 +1,174 @@
+<script lang="ts">
+    import type { Level, MemberRole, OpenChat, UserLookup, UserSummary } from "@client";
+    import { allUsersStore, roleAsText } from "@client";
+    import { getContext, onDestroy, onMount } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import { buildDisplayName } from "@src/utils/user";
+    import Markdown from "@src/ui/Markdown.svelte";
+
+    interface Props {
+        user: UserSummary | undefined;
+        joined: Set<string>;
+        messagesDeleted: number[];
+        rolesChanged: Map<string, Map<MemberRole, Set<string>>>;
+        observer?: IntersectionObserver;
+        readByMe: boolean;
+        level: Level;
+    }
+
+    let { user, joined, messagesDeleted, rolesChanged, observer, readByMe, level }: Props =
+        $props();
+
+    let deletedMessagesElement: HTMLElement | undefined = $state();
+
+    const client = getContext<OpenChat>("client");
+
+    onMount(() => {
+        if (!readByMe && deletedMessagesElement) {
+            observer?.observe(deletedMessagesElement);
+        }
+    });
+
+    onDestroy(() => {
+        if (deletedMessagesElement) {
+            observer?.unobserve(deletedMessagesElement);
+        }
+    });
+
+    function buildJoinedText(userStore: UserLookup, userIds: Set<string>): string | undefined {
+        return userIds.size > 10
+            ? interpolate(
+                  $_,
+                  i18nKey(
+                      "nUsersJoined",
+                      {
+                          number: userIds.size.toString(),
+                      },
+                      level,
+                      true,
+                  ),
+              )
+            : userIds.size > 0
+              ? interpolate(
+                    $_,
+                    i18nKey(
+                        "userJoined",
+                        {
+                            username: buildUserList(userStore, Array.from(userIds)),
+                        },
+                        level,
+                        true,
+                    ),
+                )
+              : undefined;
+    }
+
+    function buildRoleChangedTextList(
+        userStore: UserLookup,
+        rolesChanged: Map<string, Map<MemberRole, Set<string>>>,
+    ): string[] {
+        return [...rolesChanged.entries()].flatMap(([changedBy, changedByMap]) => {
+            const me = changedBy === user?.userId;
+            const changedByStr = buildDisplayName(userStore, changedBy, me ? "me" : "user");
+
+            return [...changedByMap.entries()].flatMap(([newRole, userIds]) =>
+                buildRoleChangedText(userStore, changedByStr, newRole, Array.from(userIds)),
+            );
+        });
+    }
+
+    function buildRoleChangedText(
+        userStore: UserLookup,
+        changedBy: string,
+        newRole: MemberRole,
+        userIds: string[],
+    ): string {
+        const meChanged = userIds.length == 1 && userIds[0] === user?.userId;
+        const members = buildUserList(userStore, userIds);
+
+        return $_(meChanged ? "yourRoleChanged" : "roleChanged", {
+            values: {
+                changed: members,
+                changedBy,
+                newRole: $_(roleAsText(newRole)),
+            },
+        });
+    }
+
+    function buildUserList(userStore: UserLookup, userIds: string[]): string {
+        return client.getMembersString(
+            user!,
+            userStore,
+            userIds,
+            $_("unknownUser"),
+            $_("you"),
+            user ? client.compareIsNotYouThenUsername(user.userId) : client.compareUsername,
+            false,
+        );
+    }
+
+    function expandDeletedMessages() {
+        client.expandDeletedMessages(new Set(messagesDeleted));
+    }
+    let joinedText = $derived(buildJoinedText($allUsersStore, joined));
+    let deletedText = $derived(
+        messagesDeleted.length > 0
+            ? messagesDeleted.length === 1
+                ? $_("oneMessageDeleted")
+                : $_("nMessagesDeleted", { values: { number: messagesDeleted.length } })
+            : undefined,
+    );
+    let roleChangedTextList = $derived(buildRoleChangedTextList($allUsersStore, rolesChanged));
+</script>
+
+{#if joinedText !== undefined || deletedText !== undefined || roleChangedTextList?.length > 0}
+    <div class="timeline-event">
+        {#if joinedText !== undefined}
+            <p>
+                <Markdown oneLine suppressLinks text={joinedText} />
+            </p>
+        {/if}
+        {#if deletedText !== undefined}
+            <p
+                class="deleted"
+                title={$_("expandDeletedMessages")}
+                bind:this={deletedMessagesElement}
+                data-index={messagesDeleted.join(" ")}
+                onclick={expandDeletedMessages}>
+                {deletedText}
+            </p>
+        {/if}
+        {#each roleChangedTextList as text}
+            <p>
+                <Markdown suppressLinks {text} />
+            </p>
+        {/each}
+    </div>
+{/if}
+
+<style lang="scss">
+    .timeline-event {
+        max-width: 80%;
+        padding: $sp2;
+        background-color: var(--timeline-bg);
+        margin: 0 auto $sp4 auto;
+        text-align: center;
+        color: var(--timeline-txt);
+        @include font(book, normal, fs-70);
+
+        p {
+            margin-bottom: $sp3;
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            @media (hover: hover) {
+                &.deleted:hover {
+                    cursor: pointer;
+                    text-decoration: underline;
+                }
+            }
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/events/BotChangedEvent.svelte b/frontend/app/src/desktop/features/chats/core/events/BotChangedEvent.svelte
new file mode 100644
index 0000000000..05e6c0dcdb
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/events/BotChangedEvent.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+    import { allUsersStore, botState } from "@client";
+    import type { BotAdded, BotRemoved, BotUpdated } from "@shared";
+    import { _ } from "svelte-i18n";
+    import { buildDisplayName } from "@src/utils/user";
+    import NonMessageEvent from "./NonMessageEvent.svelte";
+
+    interface Props {
+        event: BotAdded | BotRemoved | BotUpdated;
+        timestamp: bigint;
+        userId: string;
+        changedBy: string;
+        resourceKey: string;
+    }
+
+    let { event, timestamp, userId, changedBy, resourceKey }: Props = $props();
+    let me = $derived(userId === changedBy);
+    let text = $derived.by(() => {
+        const bot = botState.externalBots.get(event.userId);
+        const username = buildDisplayName($allUsersStore, changedBy, me ? "me" : "user");
+        return $_(resourceKey, { values: { botname: bot?.name, username } });
+    });
+</script>
+
+<NonMessageEvent {text} {timestamp} />
diff --git a/frontend/app/src/desktop/features/chats/core/events/ChatEvent.svelte b/frontend/app/src/desktop/features/chats/core/events/ChatEvent.svelte
new file mode 100644
index 0000000000..5fd8f72127
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/events/ChatEvent.svelte
@@ -0,0 +1,361 @@
+<script lang="ts">
+    import { findUser } from "@src/utils/user";
+    import {
+        allUsersStore,
+        currentUserIdStore,
+        currentUserStore,
+        selectedChatWebhooksStore,
+        typing,
+        type ChatEvent,
+        type ChatIdentifier,
+        type ChatType,
+        type EnhancedReplyContext,
+        type EventWrapper,
+        type Level,
+        type Message,
+        type OpenChat,
+        type UserSummary,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import AggregateCommonEvents from "./AggregateCommonEvents.svelte";
+    import BotChangedEvent from "./BotChangedEvent.svelte";
+    import ChatFrozenEvent from "./ChatFrozenEvent.svelte";
+    import ChatMessage from "@src/desktop/features/chats/core/ChatMessage.svelte";
+    import ChatUnfrozenEvent from "./ChatUnfrozenEvent.svelte";
+    import DirectChatCreatedEvent from "./DirectChatCreatedEvent.svelte";
+    import DisappearingMessageTimeUpdated from "@src/desktop/features/chats/core/DisappearingMessageTimeUpdated.svelte";
+    import GroupChangedEvent from "./GroupChangedEvent.svelte";
+    import GroupChatCreatedEvent from "./GroupChatCreatedEvent.svelte";
+    import GroupInviteCodeChangedEvent from "./GroupInviteCodeChangedEvent.svelte";
+    import GroupRulesChangedEvent from "./GroupRulesChangedEvent.svelte";
+    import GroupVisibilityChangedEvent from "./GroupVisibilityChangedEvent.svelte";
+    import MembersChangedEvent from "./MembersChangedEvent.svelte";
+    import PermissionsChangedEvent from "./PermissionsChangedEvent.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        chatId: ChatIdentifier;
+        chatType: ChatType;
+        event: EventWrapper<ChatEvent>;
+        first: boolean;
+        last: boolean;
+        me: boolean;
+        accepted: boolean;
+        confirmed: boolean;
+        failed: boolean;
+        readByMe: boolean;
+        observer?: IntersectionObserver;
+        focused: boolean;
+        readonly: boolean;
+        pinned: boolean;
+        canPin: boolean;
+        canBlockUsers: boolean;
+        canDelete: boolean;
+        canSendAny: boolean;
+        canReact: boolean;
+        canInvite: boolean;
+        canReplyInThread: boolean;
+        publicGroup: boolean;
+        editing: boolean;
+        supportsEdit: boolean;
+        supportsReply: boolean;
+        collapsed: boolean;
+        threadRootMessage: Message | undefined;
+        onExpandMessage?: (() => void) | undefined;
+        onReplyTo: (replyContext: EnhancedReplyContext) => void;
+        onCollapseMessage: () => void;
+        onGoToMessageIndex: (args: { index: number }) => void;
+        onEditEvent: (ev: EventWrapper<Message>) => void;
+        onRemovePreview: (event: EventWrapper<Message>, url: string) => void;
+    }
+
+    let {
+        chatId,
+        chatType,
+        event,
+        first,
+        last,
+        me,
+        accepted,
+        confirmed,
+        failed,
+        readByMe,
+        observer,
+        focused,
+        readonly,
+        pinned,
+        canPin,
+        canBlockUsers,
+        canDelete,
+        canSendAny,
+        canReact,
+        canInvite,
+        canReplyInThread,
+        publicGroup,
+        editing,
+        supportsEdit,
+        supportsReply,
+        collapsed,
+        threadRootMessage,
+        onExpandMessage = undefined,
+        onReplyTo,
+        onCollapseMessage,
+        onGoToMessageIndex,
+        onEditEvent,
+        onRemovePreview,
+    }: Props = $props();
+
+    let userSummary = $derived<UserSummary>({
+        kind: "user",
+        userId: $currentUserStore.userId,
+        username: $currentUserStore.username,
+        displayName: $currentUserStore.displayName,
+        updated: BigInt(0),
+        suspended: false,
+        diamondStatus: "inactive",
+        chitBalance: 0,
+        streak: 0,
+        maxStreak: 0,
+        isUniquePerson: $currentUserStore.isUniquePerson,
+        totalChitEarned: 0,
+        hideOnlineStatus: false,
+    });
+
+    let levelType = $derived((chatType === "channel" ? "channel" : "group") as Level);
+    let level = $derived($_(`level.${levelType}`).toLowerCase());
+    let messageContext = $derived({
+        chatId,
+        threadRootMessageIndex: threadRootMessage?.messageIndex,
+    });
+    let hidden = $derived(
+        event.event.kind === "message" &&
+            event.event.content.kind === "message_reminder_created_content" &&
+            event.event.content.hidden,
+    );
+
+    function editEvent() {
+        onEditEvent(event as EventWrapper<Message>);
+    }
+
+    function deleteFailedMessage() {
+        if (event.event.kind === "message") {
+            client.deleteFailedMessage(
+                chatId,
+                event.event.messageId,
+                threadRootMessage?.messageIndex,
+            );
+        }
+    }
+
+    function retrySend() {
+        const message = event as EventWrapper<Message>;
+        client.sendMessageWithContent(
+            messageContext,
+            message.event.content,
+            message.event.blockLevelMarkdown,
+            [],
+            message.event.forwarded,
+            message.event.messageId,
+        );
+    }
+
+    let sender = $derived(
+        event.event.kind === "message"
+            ? findUser(event.event.sender, $allUsersStore, $selectedChatWebhooksStore)
+            : undefined,
+    );
+</script>
+
+{#if event.event.kind === "message"}
+    {#if !hidden}
+        <ChatMessage
+            {sender}
+            senderTyping={client.isTyping($typing, event.event.sender, messageContext)}
+            {focused}
+            {observer}
+            {accepted}
+            {confirmed}
+            {failed}
+            {readByMe}
+            {chatId}
+            {chatType}
+            {me}
+            {first}
+            {last}
+            {readonly}
+            {pinned}
+            {canPin}
+            {canBlockUsers}
+            {canDelete}
+            canQuoteReply={canSendAny}
+            {canReact}
+            canStartThread={canReplyInThread}
+            {publicGroup}
+            {editing}
+            {threadRootMessage}
+            {supportsEdit}
+            {supportsReply}
+            {collapsed}
+            senderContext={event.event.senderContext}
+            {onGoToMessageIndex}
+            {onReplyTo}
+            onRetrySend={retrySend}
+            onEditMessage={editEvent}
+            {onExpandMessage}
+            {onCollapseMessage}
+            onRemovePreview={(url) => onRemovePreview(event as EventWrapper<Message>, url)}
+            onDeleteFailedMessage={deleteFailedMessage}
+            eventIndex={event.index}
+            timestamp={event.timestamp}
+            expiresAt={event.expiresAt}
+            msg={event.event} />
+    {/if}
+{:else if event.event.kind === "group_chat_created"}
+    <GroupChatCreatedEvent {chatType} event={event.event} {me} timestamp={event.timestamp} />
+{:else if event.event.kind === "direct_chat_created"}
+    <DirectChatCreatedEvent timestamp={event.timestamp} />
+{:else if event.event.kind === "members_added"}
+    <MembersChangedEvent
+        level={levelType}
+        user={userSummary}
+        changed={event.event.userIds}
+        changedBy={event.event.addedBy}
+        resourceKey={"addedBy"}
+        timestamp={event.timestamp} />
+{:else if event.event.kind === "users_invited"}
+    <MembersChangedEvent
+        level={levelType}
+        user={userSummary}
+        changed={event.event.userIds}
+        changedBy={event.event.invitedBy}
+        resourceKey={"invitedBy"}
+        timestamp={event.timestamp} />
+{:else if event.event.kind === "members_removed"}
+    <MembersChangedEvent
+        level={levelType}
+        user={userSummary}
+        changed={event.event.userIds}
+        changedBy={event.event.removedBy}
+        resourceKey={"removedBy"}
+        timestamp={event.timestamp} />
+{:else if event.event.kind === "aggregate_common_events"}
+    <AggregateCommonEvents
+        level={levelType}
+        {observer}
+        {readByMe}
+        user={userSummary}
+        joined={event.event.usersJoined}
+        messagesDeleted={event.event.messagesDeleted}
+        rolesChanged={event.event.rolesChanged} />
+{:else if event.event.kind === "users_blocked"}
+    <MembersChangedEvent
+        level={levelType}
+        user={userSummary}
+        changed={event.event.userIds}
+        changedBy={event.event.blockedBy}
+        resourceKey={"blockedBy"}
+        timestamp={event.timestamp} />
+{:else if event.event.kind === "users_unblocked"}
+    <MembersChangedEvent
+        level={levelType}
+        user={userSummary}
+        changed={event.event.userIds}
+        changedBy={event.event.unblockedBy}
+        resourceKey={"unblockedBy"}
+        timestamp={event.timestamp} />
+{:else if event.event.kind === "name_changed"}
+    <GroupChangedEvent
+        {level}
+        user={userSummary}
+        changedBy={event.event.changedBy}
+        property={interpolate($_, i18nKey("groupName", undefined, levelType, true))}
+        timestamp={event.timestamp} />
+{:else if event.event.kind === "desc_changed"}
+    <GroupChangedEvent
+        {level}
+        user={userSummary}
+        changedBy={event.event.changedBy}
+        property={interpolate($_, i18nKey("groupDesc", undefined, levelType, true))}
+        timestamp={event.timestamp} />
+{:else if event.event.kind === "rules_changed"}
+    <GroupRulesChangedEvent user={userSummary} event={event.event} timestamp={event.timestamp} />
+{:else if event.event.kind === "avatar_changed"}
+    <GroupChangedEvent
+        {level}
+        user={userSummary}
+        changedBy={event.event.changedBy}
+        property={interpolate($_, i18nKey("groupAvatar", undefined, levelType, true))}
+        timestamp={event.timestamp} />
+{:else if event.event.kind === "gate_updated"}
+    <GroupChangedEvent
+        {level}
+        user={userSummary}
+        changedBy={event.event.updatedBy}
+        property={$_("access.gate").toLowerCase()}
+        timestamp={event.timestamp} />
+{:else if event.event.kind === "external_url_updated"}
+    <GroupChangedEvent
+        {level}
+        user={userSummary}
+        changedBy={event.event.updatedBy}
+        property={$_("externalContent.name").toLowerCase()}
+        timestamp={event.timestamp} />
+{:else if event.event.kind === "group_visibility_changed"}
+    <GroupVisibilityChangedEvent
+        level={levelType}
+        user={userSummary}
+        isPublic={event.event.public}
+        messagesVisibleToNonMembers={event.event.messagesVisibleToNonMembers}
+        changedBy={event.event.changedBy}
+        timestamp={event.timestamp} />
+{:else if event.event.kind === "group_invite_code_changed"}
+    {#if canInvite}
+        <GroupInviteCodeChangedEvent
+            user={userSummary}
+            change={event.event.change}
+            changedBy={event.event.changedBy}
+            timestamp={event.timestamp} />
+    {/if}
+{:else if event.event.kind === "permissions_changed"}
+    <PermissionsChangedEvent
+        level={levelType}
+        user={userSummary}
+        event={event.event}
+        timestamp={event.timestamp} />
+{:else if event.event.kind === "events_ttl_updated"}
+    <DisappearingMessageTimeUpdated
+        user={userSummary}
+        changedBy={event.event.updatedBy}
+        newTimeToLive={event.event.newTimeToLive}
+        timestamp={event.timestamp} />
+{:else if event.event.kind === "chat_frozen"}
+    <ChatFrozenEvent user={userSummary} event={event.event} timestamp={event.timestamp} />
+{:else if event.event.kind === "chat_unfrozen"}
+    <ChatUnfrozenEvent user={userSummary} event={event.event} timestamp={event.timestamp} />
+{:else if event.event.kind === "bot_added"}
+    <BotChangedEvent
+        changedBy={event.event.addedBy}
+        resourceKey={"bots.events.add"}
+        event={event.event}
+        userId={$currentUserIdStore}
+        timestamp={event.timestamp} />
+{:else if event.event.kind === "bot_removed"}
+    <BotChangedEvent
+        changedBy={event.event.removedBy}
+        resourceKey={"bots.events.remove"}
+        event={event.event}
+        userId={$currentUserIdStore}
+        timestamp={event.timestamp} />
+{:else if event.event.kind === "bot_updated"}
+    <BotChangedEvent
+        changedBy={event.event.updatedBy}
+        resourceKey={"bots.events.update"}
+        event={event.event}
+        userId={$currentUserIdStore}
+        timestamp={event.timestamp} />
+{:else if !client.isEventKindHidden(event.event.kind, publicGroup && chatType === "channel")}
+    <div>Unexpected event type: {event.event.kind}</div>
+{/if}
diff --git a/frontend/app/src/desktop/features/chats/core/events/ChatEventList.svelte b/frontend/app/src/desktop/features/chats/core/events/ChatEventList.svelte
new file mode 100644
index 0000000000..e0fa2fe443
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/events/ChatEventList.svelte
@@ -0,0 +1,226 @@
+<script lang="ts">
+    import type {
+        ChatSummary,
+        EventWrapper,
+        Mention,
+        Message,
+        MessageContext,
+    } from "@client";
+    import { iconSize } from "@client";
+    import { type Snippet } from "svelte";
+    import { _ } from "svelte-i18n";
+    import ArrowDown from "svelte-material-icons/ArrowDown.svelte";
+    import ArrowUp from "svelte-material-icons/ArrowUp.svelte";
+    import SharedChatEventList, {
+        type ChatEventListArgs,
+    } from "@src/ui/ChatEventList.svelte";
+    import type { FlatChatItem } from "@src/ui/flatChatItems";
+    import { rtlStore } from "@src/stores/rtl";
+    import { pop } from "@src/utils/transition";
+    import Fab from "@src/desktop/features/chats/core/Fab.svelte";
+    import TimelineDate from "@src/desktop/features/chats/core/TimelineDate.svelte";
+
+    interface Props {
+        rootSelector: string;
+        unreadMessages: number;
+        chat: ChatSummary;
+        messagesDiv: HTMLDivElement | undefined;
+        messagesDivHeight: number;
+        initialised: boolean;
+        items: FlatChatItem[];
+        readonly: boolean;
+        firstUnreadMention: Mention | undefined;
+        footer: boolean;
+        threadRootEvent: EventWrapper<Message> | undefined;
+        maintainScroll: boolean;
+        scrollTopButtonEnabled?: boolean;
+        row: Snippet<[FlatChatItem, ChatEventListArgs]>;
+        visible: boolean;
+    }
+
+    let {
+        rootSelector,
+        unreadMessages,
+        chat,
+        messagesDiv = $bindable(),
+        messagesDivHeight = $bindable(),
+        initialised = $bindable(),
+        items,
+        readonly,
+        firstUnreadMention,
+        footer,
+        threadRootEvent,
+        maintainScroll,
+        scrollTopButtonEnabled = false,
+        row,
+        visible,
+    }: Props = $props();
+
+    let list: SharedChatEventList | undefined = $state();
+    let stickyDateEl: HTMLElement | undefined = $state();
+    let stickyDateElTop = $derived(stickyDateEl?.getBoundingClientRect()?.top);
+    let stickyDateTimestamp = $state<bigint | undefined>(undefined);
+
+    export function scrollToMessageIndex(
+        context: MessageContext,
+        index: number,
+        preserveFocus: boolean,
+    ): Promise<void> {
+        return list?.scrollToMessageIndex(context, index, preserveFocus) ?? Promise.resolve();
+    }
+
+    export function onMessageWindowLoaded(args: {
+        context: MessageContext;
+        messageIndex: number | undefined;
+        initialLoad: boolean;
+    }): Promise<void> {
+        return list?.onMessageWindowLoaded(args) ?? Promise.resolve();
+    }
+</script>
+
+<div class="sticky-date" bind:this={stickyDateEl}>
+    {#if stickyDateTimestamp !== undefined}
+        <TimelineDate timestamp={stickyDateTimestamp} />
+    {/if}
+</div>
+
+<SharedChatEventList
+    bind:this={list}
+    {rootSelector}
+    {chat}
+    {threadRootEvent}
+    {items}
+    {readonly}
+    {maintainScroll}
+    {visible}
+    bind:initialised
+    bind:messagesDiv
+    bind:messagesDivHeight
+    viewportClass={"desktop-event-list"}
+    {stickyDateElTop}
+    bind:stickyDateTimestamp
+    {row}>
+    {#snippet fabs({
+        showGoToTop,
+        showGoToBottom,
+        loadingFromUserScroll,
+        scrollToTop,
+        scrollToLast,
+        scrollToMention,
+    })}
+        {#if scrollTopButtonEnabled}
+            <div
+                title={$_("scrollToTop")}
+                class:show={showGoToTop}
+                class="fab to-top"
+                class:rtl={$rtlStore}>
+                <Fab on:click={scrollToTop}>
+                    <ArrowUp size={$iconSize} color={"#fff"} />
+                </Fab>
+            </div>
+        {/if}
+
+        {#if !readonly}
+            <div
+                title={$_("goToFirstMention")}
+                class:show={firstUnreadMention !== undefined}
+                class="fab mentions"
+                class:rtl={$rtlStore}>
+                <Fab on:click={() => scrollToMention(firstUnreadMention)}>
+                    <div in:pop={{ duration: 1500 }} class="unread">
+                        <div class="mention-count">@</div>
+                    </div>
+                </Fab>
+            </div>
+        {/if}
+        <div
+            title={$_("goToLatestMessage")}
+            class:show={showGoToBottom || unreadMessages > 0}
+            class="fab to-bottom"
+            class:footer
+            class:rtl={$rtlStore}>
+            <Fab on:click={scrollToLast}>
+                {#if loadingFromUserScroll}
+                    <div class="spinner"></div>
+                {:else if unreadMessages > 0}
+                    <div in:pop={{ duration: 1500 }} class="unread">
+                        <div class="unread-count">
+                            {unreadMessages > 999 ? "999+" : unreadMessages}
+                        </div>
+                    </div>
+                {:else}
+                    <ArrowDown size={$iconSize} color={"#fff"} />
+                {/if}
+            </Fab>
+        </div>
+    {/snippet}
+</SharedChatEventList>
+
+<style lang="scss">
+    :global(.vcl-viewport.desktop-event-list) {
+        @include message-list();
+        background-color: var(--currentChat-msgs-bg);
+    }
+
+    .sticky-date {
+        position: absolute;
+        top: 90px;
+        left: 50%;
+        transform: translateX(calc(-50% - 3px));
+        @include z-index("date-label");
+    }
+
+    .spinner {
+        @include loading-spinner(1em, 0.5em, var(--button-spinner), "/assets/plain-spinner.svg");
+    }
+
+    .fab {
+        transition: opacity ease-in-out 300ms;
+        position: absolute;
+        @include z-index("fab");
+        right: 20px;
+        bottom: 0;
+        opacity: 0;
+        pointer-events: none;
+
+        &.show {
+            opacity: 1;
+            pointer-events: all;
+        }
+
+        &.rtl {
+            left: $sp6;
+            right: unset;
+        }
+    }
+
+    .mentions {
+        bottom: 140px;
+
+        .mention-count {
+            @include font(bold, normal, fs-140);
+        }
+    }
+
+    .unread {
+        color: var(--button-txt);
+        text-align: center;
+        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
+
+        .unread-count {
+            line-height: 80%;
+        }
+    }
+
+    .to-bottom {
+        bottom: 24px;
+        &.footer {
+            bottom: 80px;
+        }
+    }
+
+    .to-top {
+        top: 95px;
+        height: $sp7;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/events/ChatFrozenEvent.svelte b/frontend/app/src/desktop/features/chats/core/events/ChatFrozenEvent.svelte
new file mode 100644
index 0000000000..445a7fa658
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/events/ChatFrozenEvent.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+    import type { UserSummary } from "@client";
+    import { allUsersStore } from "@client";
+    import type { ChatFrozenEvent } from "@shared";
+    import { _ } from "svelte-i18n";
+    import { buildDisplayName } from "@src/utils/user";
+    import NonMessageEvent from "./NonMessageEvent.svelte";
+
+    interface Props {
+        event: ChatFrozenEvent;
+        user: UserSummary | undefined;
+        timestamp: bigint;
+    }
+
+    let { event, user, timestamp }: Props = $props();
+
+    let me = $derived(event.frozenBy === user?.userId);
+    let frozenByStr = $derived(
+        buildDisplayName($allUsersStore, event.frozenBy, me ? "me" : "user"),
+    );
+
+    let chatFrozenByText = $derived(
+        $_("chatFrozenBy", {
+            values: {
+                frozenBy: frozenByStr,
+            },
+        }),
+    );
+
+    let text = $derived(
+        event.reason ? `${chatFrozenByText}\n${$_("reason")}: ${event.reason}` : chatFrozenByText,
+    );
+</script>
+
+<NonMessageEvent {text} {timestamp} />
diff --git a/frontend/app/src/desktop/features/chats/core/events/ChatUnfrozenEvent.svelte b/frontend/app/src/desktop/features/chats/core/events/ChatUnfrozenEvent.svelte
new file mode 100644
index 0000000000..e8f785423f
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/events/ChatUnfrozenEvent.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+    import type { UserSummary } from "@client";
+    import { allUsersStore } from "@client";
+    import type { ChatUnfrozenEvent } from "@shared";
+    import { _ } from "svelte-i18n";
+    import { buildDisplayName } from "@src/utils/user";
+    import NonMessageEvent from "./NonMessageEvent.svelte";
+
+    interface Props {
+        event: ChatUnfrozenEvent;
+        user: UserSummary | undefined;
+        timestamp: bigint;
+    }
+
+    let { event, user, timestamp }: Props = $props();
+
+    let me = $derived(event.unfrozenBy === user?.userId);
+    let unfrozenByStr = $derived(
+        buildDisplayName($allUsersStore, event.unfrozenBy, me ? "me" : "user"),
+    );
+
+    let text = $derived(
+        $_("chatUnfrozenBy", {
+            values: {
+                unfrozenBy: unfrozenByStr,
+            },
+        }),
+    );
+</script>
+
+<NonMessageEvent {text} {timestamp} />
diff --git a/frontend/app/src/components/home/DirectChatCreatedEvent.svelte b/frontend/app/src/desktop/features/chats/core/events/DirectChatCreatedEvent.svelte
similarity index 100%
rename from frontend/app/src/components/home/DirectChatCreatedEvent.svelte
rename to frontend/app/src/desktop/features/chats/core/events/DirectChatCreatedEvent.svelte
diff --git a/frontend/app/src/desktop/features/chats/core/events/GroupChangedEvent.svelte b/frontend/app/src/desktop/features/chats/core/events/GroupChangedEvent.svelte
new file mode 100644
index 0000000000..567a8bc4f7
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/events/GroupChangedEvent.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+    import type { UserSummary } from "@client";
+    import { allUsersStore } from "@client";
+    import { _ } from "svelte-i18n";
+    import { buildDisplayName } from "@src/utils/user";
+    import NonMessageEvent from "./NonMessageEvent.svelte";
+
+    interface Props {
+        user: UserSummary | undefined;
+        changedBy: string;
+        property: string;
+        timestamp: bigint;
+        level: string;
+    }
+
+    let { user, changedBy, property, timestamp, level }: Props = $props();
+
+    let me = $derived(changedBy === user?.userId);
+    let changedByStr = $derived(buildDisplayName($allUsersStore, changedBy, me ? "me" : "user"));
+    let text = $derived(
+        $_("groupChangedBy", {
+            values: {
+                changed: property,
+                changedBy: changedByStr,
+                level,
+            },
+        }),
+    );
+</script>
+
+<NonMessageEvent {text} {timestamp} />
diff --git a/frontend/app/src/desktop/features/chats/core/events/GroupChatCreatedEvent.svelte b/frontend/app/src/desktop/features/chats/core/events/GroupChatCreatedEvent.svelte
new file mode 100644
index 0000000000..918d1b9502
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/events/GroupChatCreatedEvent.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+    import type { ChatType, GroupChatCreated } from "@client";
+    import { allUsersStore } from "@client";
+    import { _ } from "svelte-i18n";
+    import { buildDisplayName } from "@src/utils/user";
+    import NonMessageEvent from "./NonMessageEvent.svelte";
+
+    interface Props {
+        me: boolean;
+        event: GroupChatCreated;
+        timestamp: bigint;
+        chatType: ChatType;
+    }
+
+    let { me, event, timestamp, chatType }: Props = $props();
+
+    let level = $derived($_(`level.${chatType === "channel" ? "channel" : "group"}`).toLowerCase());
+    let username = $derived(buildDisplayName($allUsersStore, event.created_by, me ? "me" : "user"));
+    let text = $derived(
+        $_("groupCreatedBy", {
+            values: {
+                username,
+                level,
+            },
+        }),
+    );
+</script>
+
+<NonMessageEvent {text} {timestamp} />
diff --git a/frontend/app/src/desktop/features/chats/core/events/GroupInviteCodeChangedEvent.svelte b/frontend/app/src/desktop/features/chats/core/events/GroupInviteCodeChangedEvent.svelte
new file mode 100644
index 0000000000..6c4b3e0250
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/events/GroupInviteCodeChangedEvent.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+    import type { GroupInviteCodeChange, UserSummary } from "@client";
+    import { allUsersStore } from "@client";
+    import { _ } from "svelte-i18n";
+    import { buildDisplayName } from "@src/utils/user";
+    import NonMessageEvent from "./NonMessageEvent.svelte";
+
+    interface Props {
+        user: UserSummary | undefined;
+        change: GroupInviteCodeChange;
+        changedBy: string;
+        timestamp: bigint;
+    }
+
+    let { user, change, changedBy, timestamp }: Props = $props();
+
+    let me = $derived(changedBy === user?.userId);
+    let changedByStr = $derived(buildDisplayName($allUsersStore, changedBy, me ? "me" : "user"));
+    let changedStr = $derived($_(`invite.${change}`));
+    let text = $derived(
+        $_("groupInviteChangedBy", {
+            values: {
+                changedBy: changedByStr,
+                changed: changedStr,
+            },
+        }),
+    );
+</script>
+
+<NonMessageEvent {text} {timestamp} />
diff --git a/frontend/app/src/desktop/features/chats/core/events/GroupRulesChangedEvent.svelte b/frontend/app/src/desktop/features/chats/core/events/GroupRulesChangedEvent.svelte
new file mode 100644
index 0000000000..2555dbab85
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/events/GroupRulesChangedEvent.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+    import type { GroupRulesChanged, UserSummary } from "@client";
+    import { allUsersStore } from "@client";
+    import { _ } from "svelte-i18n";
+    import { buildDisplayName } from "@src/utils/user";
+    import NonMessageEvent from "./NonMessageEvent.svelte";
+
+    interface Props {
+        user: UserSummary | undefined;
+        event: GroupRulesChanged;
+        timestamp: bigint;
+    }
+
+    let { user, event, timestamp }: Props = $props();
+
+    let me = $derived(event.changedBy === user?.userId);
+    let changedByStr = $derived(
+        buildDisplayName($allUsersStore, event.changedBy, me ? "me" : "user"),
+    );
+    let templateValues = $derived({
+        values: {
+            changed: $_("groupRules"),
+            changedBy: changedByStr,
+        },
+    });
+
+    let text = $derived(
+        event.enabled && event.enabledPrev
+            ? $_("groupChangedBy", templateValues)
+            : event.enabled
+              ? $_("groupRulesEnabled", templateValues)
+              : $_("groupRulesDisabled", templateValues),
+    );
+</script>
+
+{#if event.enabled || event.enabledPrev}
+    <NonMessageEvent {text} {timestamp} />
+{/if}
diff --git a/frontend/app/src/desktop/features/chats/core/events/GroupVisibilityChangedEvent.svelte b/frontend/app/src/desktop/features/chats/core/events/GroupVisibilityChangedEvent.svelte
new file mode 100644
index 0000000000..1d44a65830
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/events/GroupVisibilityChangedEvent.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+    import type { Level, UserSummary } from "@client";
+    import { allUsersStore } from "@client";
+    import { _ } from "svelte-i18n";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import { buildDisplayName } from "@src/utils/user";
+    import NonMessageEvent from "./NonMessageEvent.svelte";
+
+    interface Props {
+        user: UserSummary | undefined;
+        isPublic: boolean | undefined;
+        messagesVisibleToNonMembers: boolean | undefined;
+        changedBy: string;
+        timestamp: bigint;
+        level: Level;
+    }
+
+    let { user, isPublic, messagesVisibleToNonMembers, changedBy, timestamp, level }: Props =
+        $props();
+
+    let showEvent = $derived(messagesVisibleToNonMembers !== undefined || isPublic !== undefined);
+    let me = $derived(changedBy === user?.userId);
+    let changedByStr = $derived(buildDisplayName($allUsersStore, changedBy, me ? "me" : "user"));
+    let text = $derived(
+        interpolate(
+            $_,
+            i18nKey(
+                "groupVisibilityChangedBy",
+                {
+                    changedBy: changedByStr,
+                },
+                level,
+                true,
+            ),
+        ),
+    );
+</script>
+
+{#if showEvent}
+    <NonMessageEvent {text} {timestamp} />
+{/if}
diff --git a/frontend/app/src/desktop/features/chats/core/events/MembersChangedEvent.svelte b/frontend/app/src/desktop/features/chats/core/events/MembersChangedEvent.svelte
new file mode 100644
index 0000000000..be4041c1d4
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/events/MembersChangedEvent.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+    import type { Level, OpenChat, UserSummary } from "@client";
+    import { allUsersStore } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import { buildDisplayName } from "@src/utils/user";
+    import NonMessageEvent from "./NonMessageEvent.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        user: UserSummary | undefined;
+        changedBy: string;
+        changed: string[];
+        timestamp: bigint;
+        resourceKey: string;
+        level: Level;
+    }
+
+    let { user, changedBy, changed, timestamp, resourceKey, level }: Props = $props();
+
+    let me = $derived(changedBy === user?.userId);
+    let changedByStr = $derived(
+        `**${buildDisplayName($allUsersStore, changedBy, me ? "me" : "user")}**`,
+    );
+    let members = $derived(
+        client.getMembersString(
+            user!,
+            $allUsersStore,
+            changed,
+            $_("unknownUser"),
+            $_("you"),
+            user ? client.compareIsNotYouThenUsername(user.userId) : client.compareUsername,
+        ),
+    );
+
+    let text = $derived(
+        interpolate(
+            $_,
+            i18nKey(
+                resourceKey,
+                {
+                    changed: members,
+                    changedBy: changedByStr,
+                },
+                level,
+                true,
+            ),
+        ),
+    );
+</script>
+
+<NonMessageEvent {text} {timestamp} />
diff --git a/frontend/app/src/desktop/features/chats/core/events/NonMessageEvent.svelte b/frontend/app/src/desktop/features/chats/core/events/NonMessageEvent.svelte
new file mode 100644
index 0000000000..40130b4dc4
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/events/NonMessageEvent.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+    import type { OpenChat } from "@client";
+    import { getContext } from "svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        text: string;
+        timestamp: bigint;
+    }
+
+    let { text, timestamp }: Props = $props();
+    let date = $derived(new Date(Number(timestamp)));
+</script>
+
+<div class="timeline-event">
+    <Markdown suppressLinks {text} />
+    <p class="timestamp">
+        {`${client.toLongDateString(date)} @ ${client.toShortTimeString(date)}`}
+    </p>
+</div>
+
+<style lang="scss">
+    .timeline-event {
+        padding: $sp2;
+        background-color: var(--timeline-bg);
+        margin: $sp4 auto;
+        text-align: center;
+        color: var(--timeline-txt);
+        @include font(book, normal, fs-70);
+    }
+    .timestamp {
+        @include font(light, normal, fs-70);
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/core/events/PermissionsChangedEvent.svelte b/frontend/app/src/desktop/features/chats/core/events/PermissionsChangedEvent.svelte
new file mode 100644
index 0000000000..825736c9ae
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/core/events/PermissionsChangedEvent.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+    import type { Level, PermissionsChanged, UserSummary } from "@client";
+    import { allUsersStore } from "@client";
+    import { _ } from "svelte-i18n";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import { buildDisplayName } from "@src/utils/user";
+    import NonMessageEvent from "./NonMessageEvent.svelte";
+
+    interface Props {
+        event: PermissionsChanged;
+        user: UserSummary | undefined;
+        timestamp: bigint;
+        level: Level;
+    }
+
+    let { event, user, timestamp, level }: Props = $props();
+
+    let me = $derived(event.changedBy === user?.userId);
+    let changedByStr = $derived(
+        buildDisplayName($allUsersStore, event.changedBy, me ? "me" : "user"),
+    );
+
+    let text = $derived(
+        interpolate(
+            $_,
+            i18nKey(
+                "permissionsChangedBy",
+                {
+                    changedBy: changedByStr,
+                },
+                level,
+                true,
+            ),
+        ),
+    );
+</script>
+
+<NonMessageEvent {text} {timestamp} />
diff --git a/frontend/app/src/desktop/features/chats/group/AdvancedSection.svelte b/frontend/app/src/desktop/features/chats/group/AdvancedSection.svelte
new file mode 100644
index 0000000000..01ff80e520
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/group/AdvancedSection.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import { publish, type MultiUserChat } from "@client";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    interface Props {
+        group: MultiUserChat;
+    }
+
+    let { group }: Props = $props();
+
+    function deleteGroup() {
+        publish("deleteGroup", {
+            kind: "delete",
+            chatId: group.id,
+            level: group.level,
+            doubleCheck: {
+                challenge: i18nKey("typeGroupName", { name: group.name }),
+                response: i18nKey(group.name),
+            },
+        });
+    }
+</script>
+
+<ButtonGroup align="start">
+    <Button danger onClick={deleteGroup}
+        ><Translatable resourceKey={i18nKey("deleteGroup", undefined, group.level)} /></Button>
+</ButtonGroup>
diff --git a/frontend/app/src/desktop/features/chats/group/BlockedUser.svelte b/frontend/app/src/desktop/features/chats/group/BlockedUser.svelte
new file mode 100644
index 0000000000..e8607cef1a
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/group/BlockedUser.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+    import { iconSize } from "@client";
+    import type { UserSummary } from "@shared";
+    import Cancel from "svelte-material-icons/Cancel.svelte";
+    import ChevronDown from "svelte-material-icons/ChevronDown.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import Menu from "@src/desktop/shared/Menu.svelte";
+    import MenuIcon from "@src/desktop/shared/MenuIcon.svelte";
+    import MenuItem from "@src/desktop/shared/MenuItem.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import User from "./User.svelte";
+
+    interface Props {
+        user: UserSummary;
+        canUnblockUser?: boolean;
+        searchTerm?: string;
+        me?: boolean;
+        onUnblockUser: (userId: string) => void;
+    }
+
+    let {
+        user,
+        canUnblockUser = false,
+        searchTerm = "",
+        me = false,
+        onUnblockUser,
+    }: Props = $props();
+</script>
+
+<User {me} {user} {searchTerm}>
+    {#if canUnblockUser}
+        <span class="menu">
+            <MenuIcon position={"bottom"} align={"end"}>
+                {#snippet menuIcon()}
+                    <HoverIcon>
+                        <ChevronDown size={$iconSize} color={"var(--icon-txt)"} />
+                    </HoverIcon>
+                {/snippet}
+                {#snippet menuItems()}
+                    <Menu>
+                        <MenuItem onclick={() => onUnblockUser(user.userId)}>
+                            {#snippet icon()}
+                                <Cancel size={$iconSize} color={"var(--icon-inverted-txt)"} />
+                            {/snippet}
+                            {#snippet text()}
+                                <div>
+                                    <Translatable resourceKey={i18nKey("unblockUser")} />
+                                </div>
+                            {/snippet}
+                        </MenuItem>
+                    </Menu>
+                {/snippet}
+            </MenuIcon>
+        </span>
+    {/if}
+</User>
diff --git a/frontend/app/src/desktop/features/chats/group/DirectChatDetails.svelte b/frontend/app/src/desktop/features/chats/group/DirectChatDetails.svelte
new file mode 100644
index 0000000000..e84292ec52
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/group/DirectChatDetails.svelte
@@ -0,0 +1,319 @@
+<script lang="ts">
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import Checkbox from "@src/desktop/shared/Checkbox.svelte";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import HeartMinus from "@src/desktop/ui/icons/HeartMinus.svelte";
+    import HeartPlus from "@src/desktop/ui/icons/HeartPlus.svelte";
+    import SectionHeader from "@src/desktop/shared/SectionHeader.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import { activeVideoCall } from "@src/stores/video";
+    import { currentTheme } from "@src/theme/themes";
+    import { darkenHexColour } from "@src/theme/utils";
+    import type { DirectChatSummary, OptionUpdate, PublicProfile } from "@client";
+    import {
+        allUsersStore,
+        blockedUsersStore,
+        chatIdentifiersEqual,
+        favouritesStore,
+        iconSize,
+        mobileWidth,
+        OpenChat,
+        publish,
+    } from "@client";
+    import { getContext, onMount } from "svelte";
+    import { _ } from "svelte-i18n";
+    import CancelIcon from "svelte-material-icons/Cancel.svelte";
+    import Close from "svelte-material-icons/Close.svelte";
+    import Headphones from "svelte-material-icons/Headphones.svelte";
+    import PhoneHangup from "svelte-material-icons/PhoneHangup.svelte";
+    import DurationPicker from "@src/desktop/shared/DurationPicker.svelte";
+    import UserProfileCard from "@src/desktop/features/profile/UserProfileCard.svelte";
+
+    const client = getContext<OpenChat>("client");
+    const ONE_WEEK = 604800000n;
+
+    interface Props {
+        chat: DirectChatSummary;
+        onClose: () => void;
+    }
+
+    let { onClose, chat }: Props = $props();
+
+    let blocked = $derived($blockedUsersStore.has(chat.them.userId));
+    let user = $derived($allUsersStore.get(chat.them.userId));
+    let profile = $state<PublicProfile | undefined>();
+    let disappearingMessages = $state(chat.eventsTTL !== undefined);
+    let eventsTTL = $state(chat.eventsTTL);
+    let originalTTL = $state(chat.eventsTTL);
+    let saving = $state(false);
+    let dirty = $derived(eventsTTL !== chat.eventsTTL);
+    let darkenedCall = $derived(darkenHexColour($currentTheme.vote.yes.color, 20));
+    let videoCallInProgress = $derived(chat.videoCallInProgress !== undefined);
+    let blockLabel = $derived(blocked ? i18nKey("Unblock") : i18nKey("Block"));
+    let inCall = $derived(
+        videoCallInProgress &&
+            $activeVideoCall !== undefined &&
+            chatIdentifiersEqual($activeVideoCall.chatId, chat.id),
+    );
+    let videoMenuText = $derived(
+        videoCallInProgress ? (inCall ? i18nKey("Leave") : i18nKey("Join")) : i18nKey("Start"),
+    );
+
+    onMount(() => {
+        client.getPublicProfile(chat.them.userId).subscribe({
+            onResult: (res) => {
+                profile = res;
+            },
+        });
+    });
+
+    $effect(() => {
+        if (chat.eventsTTL !== originalTTL) {
+            eventsTTL = originalTTL = chat.eventsTTL;
+            disappearingMessages = chat.eventsTTL !== undefined;
+        }
+    });
+
+    $effect(() => {
+        dirty = eventsTTL !== chat.eventsTTL;
+    });
+
+    function toggleDisappearingMessages() {
+        disappearingMessages = !disappearingMessages;
+        if (!disappearingMessages) {
+            eventsTTL = undefined;
+        } else {
+            eventsTTL = ONE_WEEK;
+        }
+    }
+
+    function getUpdate(): OptionUpdate<bigint> {
+        if (eventsTTL !== undefined) {
+            return { value: eventsTTL };
+        } else if (chat.eventsTTL !== undefined) {
+            return "set_to_none";
+        } else {
+            return undefined;
+        }
+    }
+
+    async function updateDirectChatDetails(e: Event) {
+        e.preventDefault();
+        if (!dirty) return;
+
+        saving = true;
+
+        const success = await client
+            .updateDirectChatSettings(chat, getUpdate())
+            .finally(() => (saving = false));
+        if (success) {
+            originalTTL = originalTTL = chat.eventsTTL;
+        }
+    }
+    function addToFavourites() {
+        client.addToFavourites(chat.id);
+    }
+
+    function removeFromFavourites() {
+        client.removeFromFavourites(chat.id);
+    }
+
+    function startVideoCall() {
+        if (inCall) {
+            publish("hangup");
+        } else {
+            publish("startVideoCall", {
+                chatId: chat.id,
+                callType: "default",
+                join: videoCallInProgress,
+            });
+        }
+    }
+
+    function toggleBlocked() {
+        if (blocked) {
+            unblockUser();
+        } else {
+            blockUser();
+        }
+    }
+
+    function blockUser() {
+        client.blockUserFromDirectChat(chat.them.userId).then((success) => {
+            if (success) {
+                toastStore.showSuccessToast(i18nKey("blockUserSucceeded"));
+            } else {
+                toastStore.showFailureToast(i18nKey("blockUserFailed"));
+            }
+        });
+    }
+
+    function unblockUser() {
+        client.unblockUserFromDirectChat(chat.them.userId).then((success) => {
+            if (success) {
+                toastStore.showSuccessToast(i18nKey("unblockUserSucceeded"));
+            } else {
+                toastStore.showFailureToast(i18nKey("unblockUserFailed"));
+            }
+        });
+    }
+</script>
+
+<SectionHeader border={false} flush={!$mobileWidth} shadow>
+    {#if !$favouritesStore.has(chat.id)}
+        <HoverIcon onclick={addToFavourites}>
+            <HeartPlus size={$iconSize} color={"var(--menu-warn)"} />
+        </HoverIcon>
+    {:else}
+        <HoverIcon onclick={removeFromFavourites}>
+            <HeartMinus size={$iconSize} color={"var(--menu-warn)"} />
+        </HoverIcon>
+    {/if}
+    <h4>
+        <Translatable
+            resourceKey={i18nKey(`Direct chat with ${client.getDisplayName(chat.them.userId)}`)} />
+    </h4>
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <span title={$_("close")} class="close" onclick={onClose}>
+        <HoverIcon>
+            <Close size={$iconSize} color={"var(--icon-txt)"} />
+        </HoverIcon>
+    </span>
+</SectionHeader>
+
+{#if user !== undefined}
+    <div class="wrapper">
+        <div class="user-form">
+            {#if profile}
+                <div class="profile-card">
+                    <UserProfileCard {profile} {user} userProfileMode></UserProfileCard>
+                </div>
+            {/if}
+            <div style={`--darkened-call: ${darkenedCall}`} class="controls">
+                <ButtonGroup align={"fill"}>
+                    <Button onClick={startVideoCall} cls="call-user icon-button">
+                        {#if inCall}
+                            <PhoneHangup size={$iconSize} color={"var(--button-txt)"} />
+                        {:else}
+                            <Headphones size={$iconSize} color={"var(--button-txt)"} />
+                        {/if}
+                        <Translatable resourceKey={videoMenuText} />
+                    </Button>
+                    <Button onClick={toggleBlocked} cls="icon-button" danger>
+                        <CancelIcon size={$iconSize} color={"var(--button-txt)"} />
+                        <Translatable resourceKey={blockLabel} />
+                    </Button>
+                </ButtonGroup>
+            </div>
+            <div class="disappearing">
+                <Checkbox
+                    id="disappearing-messages"
+                    onChange={toggleDisappearingMessages}
+                    label={i18nKey("disappearingMessages.label")}
+                    align={"start"}
+                    checked={disappearingMessages}>
+                    <div class="section-title disappear">
+                        <Translatable resourceKey={i18nKey("disappearingMessages.label")} />
+                    </div>
+                </Checkbox>
+                {#if disappearingMessages}
+                    <div class="picker">
+                        <DurationPicker bind:milliseconds={eventsTTL} />
+                    </div>
+                {/if}
+            </div>
+        </div>
+        <div class="full-width-btn">
+            <Button
+                loading={saving}
+                disabled={!dirty || saving}
+                fill
+                onClick={updateDirectChatDetails}
+                ><Translatable resourceKey={i18nKey("update")} /></Button>
+        </div>
+    </div>
+{/if}
+
+<style lang="scss">
+    .wrapper {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        height: 100%;
+    }
+    .user-form {
+        @include nice-scrollbar();
+        padding: $sp3 $sp5 0 $sp5;
+        @include mobile() {
+            padding: $sp3 $sp4 0 $sp4;
+        }
+        display: flex;
+        flex-direction: column;
+        gap: $sp4;
+        align-items: center;
+    }
+
+    h4 {
+        flex: 1;
+        margin: 0;
+        text-align: center;
+        @include font-size(fs-120);
+    }
+    .close {
+        flex: 0 0 30px;
+    }
+
+    .bio {
+        overflow-wrap: anywhere;
+    }
+
+    .disappearing {
+        align-self: flex-start;
+    }
+
+    .full-width-btn {
+        align-self: stretch;
+        margin-top: $sp4;
+        padding: 0 $sp4 $sp4 $sp4;
+        @include mobile() {
+            padding: 0 $sp3 $sp3 $sp3;
+        }
+    }
+
+    .controls {
+        align-self: stretch;
+        margin-bottom: $sp5;
+    }
+
+    .picker {
+        margin-top: $sp3;
+    }
+
+    .user-form {
+        :global(button.icon-button) {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: $sp4;
+        }
+
+        .profile-card {
+            width: 100%;
+            margin-bottom: $sp4;
+        }
+
+        :global(button.call-user) {
+            background: var(--vote-yes-color);
+            color: var(--toast-failure-txt);
+            @media (hover: hover) {
+                &:hover {
+                    background: var(--darkened-call);
+                }
+            }
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/group/DisappearingMessagesSummary.svelte b/frontend/app/src/desktop/features/chats/group/DisappearingMessagesSummary.svelte
new file mode 100644
index 0000000000..c19d7b7c1b
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/group/DisappearingMessagesSummary.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+    import type { OpenChat } from "@client";
+    import { getContext } from "svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        ttl: bigint | undefined;
+    }
+
+    let { ttl }: Props = $props();
+</script>
+
+{#if ttl !== undefined}
+    <div class="disappearing">
+        <h4>
+            <Translatable resourceKey={i18nKey("disappearingMessages.label")} />
+        </h4>
+        <p>
+            <Translatable
+                resourceKey={i18nKey("disappearingMessages.summary", {
+                    duration: client.formatDuration(Number(ttl)),
+                })} />
+        </p>
+    </div>
+{/if}
+
+<style lang="scss">
+    .disappearing {
+        margin-bottom: $sp4;
+        h4 {
+            margin-bottom: $sp3;
+        }
+        p {
+            @include font(light, normal, fs-90);
+        }
+    }
+</style>
diff --git a/frontend/app/src/components/home/groupdetails/GroupDetails.svelte b/frontend/app/src/desktop/features/chats/group/GroupDetails.svelte
similarity index 100%
rename from frontend/app/src/components/home/groupdetails/GroupDetails.svelte
rename to frontend/app/src/desktop/features/chats/group/GroupDetails.svelte
diff --git a/frontend/app/src/components/home/groupdetails/GroupDetailsBody.svelte b/frontend/app/src/desktop/features/chats/group/GroupDetailsBody.svelte
similarity index 90%
rename from frontend/app/src/components/home/groupdetails/GroupDetailsBody.svelte
rename to frontend/app/src/desktop/features/chats/group/GroupDetailsBody.svelte
index 0971a190f7..50481c8311 100644
--- a/frontend/app/src/components/home/groupdetails/GroupDetailsBody.svelte
+++ b/frontend/app/src/desktop/features/chats/group/GroupDetailsBody.svelte
@@ -8,7 +8,7 @@
         selectedCommunitySummaryStore,
     } from "@client";
     import { getContext } from "svelte";
-    import { i18nKey } from "../../../i18n/i18n";
+    import { i18nKey } from "@src/i18n/i18n";
     import {
         groupAdvancedOpen,
         groupInfoOpen,
@@ -17,19 +17,19 @@
         groupRulesOpen,
         groupStatsOpen,
         groupVisibilityOpen,
-    } from "../../../stores/settings";
-    import Avatar from "../../Avatar.svelte";
-    import CollapsibleCard from "../../CollapsibleCard.svelte";
-    import WithVerifiedBadge from "../../icons/WithVerifiedBadge.svelte";
-    import Legend from "../../Legend.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import AccessGateExpiry from "../access/AccessGateExpiry.svelte";
-    import AccessGateSummary from "../access/AccessGateSummary.svelte";
-    import DisappearingMessagesSummary from "../DisappearingMessagesSummary.svelte";
-    import GroupPermissionsViewer from "../GroupPermissionsViewer.svelte";
-    import InviteUsersWithLink from "../InviteUsersWithLink.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import Stats from "../Stats.svelte";
+    } from "@src/stores/settings";
+    import Avatar from "@src/desktop/shared/Avatar.svelte";
+    import CollapsibleCard from "@src/desktop/shared/CollapsibleCard.svelte";
+    import WithVerifiedBadge from "@src/desktop/ui/icons/WithVerifiedBadge.svelte";
+    import Legend from "@src/desktop/shared/Legend.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import AccessGateExpiry from "@src/desktop/features/access/AccessGateExpiry.svelte";
+    import AccessGateSummary from "@src/desktop/features/access/AccessGateSummary.svelte";
+    import DisappearingMessagesSummary from "./DisappearingMessagesSummary.svelte";
+    import GroupPermissionsViewer from "./GroupPermissionsViewer.svelte";
+    import InviteUsersWithLink from "@src/desktop/features/chats/core/InviteUsersWithLink.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import Stats from "@src/desktop/shared/Stats.svelte";
     import AdvancedSection from "./AdvancedSection.svelte";
 
     const client = getContext<OpenChat>("client");
diff --git a/frontend/app/src/components/home/groupdetails/GroupDetailsHeader.svelte b/frontend/app/src/desktop/features/chats/group/GroupDetailsHeader.svelte
similarity index 88%
rename from frontend/app/src/components/home/groupdetails/GroupDetailsHeader.svelte
rename to frontend/app/src/desktop/features/chats/group/GroupDetailsHeader.svelte
index f7b6a56524..e6c385d9a2 100644
--- a/frontend/app/src/components/home/groupdetails/GroupDetailsHeader.svelte
+++ b/frontend/app/src/desktop/features/chats/group/GroupDetailsHeader.svelte
@@ -4,10 +4,10 @@
     import AccountMultiple from "svelte-material-icons/AccountMultiple.svelte";
     import Close from "svelte-material-icons/Close.svelte";
     import PencilOutline from "svelte-material-icons/PencilOutline.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import HoverIcon from "../../HoverIcon.svelte";
-    import SectionHeader from "../../SectionHeader.svelte";
-    import Translatable from "../../Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import SectionHeader from "@src/desktop/shared/SectionHeader.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
 
     interface Props {
         canEdit: boolean;
diff --git a/frontend/app/src/desktop/features/chats/group/GroupPermissionsPartitionViewer.svelte b/frontend/app/src/desktop/features/chats/group/GroupPermissionsPartitionViewer.svelte
new file mode 100644
index 0000000000..778526daf9
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/group/GroupPermissionsPartitionViewer.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+    import Check from "svelte-material-icons/Check.svelte";
+    import {
+        type ChatPermissionRole,
+        chatRoles,
+        type PermissionsByRole,
+        ROLE_ADMIN,
+        ROLE_MEMBER,
+        ROLE_MODERATOR,
+        ROLE_NONE,
+        ROLE_OWNER,
+    } from "@client";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+
+    interface Props {
+        partition: PermissionsByRole;
+    }
+
+    let { partition }: Props = $props();
+
+    const roleLabels: Record<ChatPermissionRole, string> = {
+        [ROLE_NONE]: "permissions.nobody",
+        [ROLE_OWNER]: "permissions.ownerOnly",
+        [ROLE_ADMIN]: "permissions.ownerAndAdmins",
+        [ROLE_MODERATOR]: "permissions.ownerAndAdminsAndModerators",
+        [ROLE_MEMBER]: "permissions.allMembers",
+    };
+</script>
+
+<ul>
+    {#each chatRoles as role}
+        {#if partition[role].size > 0}
+            <li class="section">
+                <div class="who-can"><Translatable resourceKey={i18nKey(roleLabels[role])} /></div>
+                <ul>
+                    {#each [...partition[role]] as perm}
+                        <li class="permission">
+                            <Check size={"1em"} color={"var(--success)"} />
+                            {perm}
+                        </li>
+                    {/each}
+                </ul>
+            </li>
+        {/if}
+    {/each}
+</ul>
+
+<style lang="scss">
+    ul {
+        list-style: none;
+    }
+
+    .section {
+        margin-bottom: $sp4;
+    }
+
+    .who-can {
+        @include font(bold, normal, fs-110);
+    }
+
+    .permission {
+        display: flex;
+        align-items: center;
+        gap: $sp3;
+        @include font(light, normal, fs-90);
+    }
+</style>
diff --git a/frontend/app/src/components/home/GroupPermissionsViewer.svelte b/frontend/app/src/desktop/features/chats/group/GroupPermissionsViewer.svelte
similarity index 97%
rename from frontend/app/src/components/home/GroupPermissionsViewer.svelte
rename to frontend/app/src/desktop/features/chats/group/GroupPermissionsViewer.svelte
index 3677f71d8b..4f0521c655 100644
--- a/frontend/app/src/components/home/GroupPermissionsViewer.svelte
+++ b/frontend/app/src/desktop/features/chats/group/GroupPermissionsViewer.svelte
@@ -12,8 +12,8 @@
         ROLE_NONE,
     } from "@client";
     import GroupPermissionsPartitionViewer from "./GroupPermissionsPartitionViewer.svelte";
-    import TabHeader from "../TabHeader.svelte";
-    import { i18nKey } from "../../i18n/i18n";
+    import TabHeader from "./TabHeader.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
 
     interface Props {
         permissions: ChatPermissions;
diff --git a/frontend/app/src/components/home/groupdetails/InviteUsers.svelte b/frontend/app/src/desktop/features/chats/group/InviteUsers.svelte
similarity index 100%
rename from frontend/app/src/components/home/groupdetails/InviteUsers.svelte
rename to frontend/app/src/desktop/features/chats/group/InviteUsers.svelte
diff --git a/frontend/app/src/components/home/groupdetails/InviteUsersBody.svelte b/frontend/app/src/desktop/features/chats/group/InviteUsersBody.svelte
similarity index 94%
rename from frontend/app/src/components/home/groupdetails/InviteUsersBody.svelte
rename to frontend/app/src/desktop/features/chats/group/InviteUsersBody.svelte
index 33f63a6ef2..eebab52c71 100644
--- a/frontend/app/src/components/home/groupdetails/InviteUsersBody.svelte
+++ b/frontend/app/src/desktop/features/chats/group/InviteUsersBody.svelte
@@ -9,13 +9,13 @@
         type UserSummary,
     } from "@client";
     import { getContext, onMount } from "svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { toastStore } from "../../../stores/toast";
-    import Button from "../../Button.svelte";
-    import Loading from "@shared_components/Loading.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import InviteUsersWithLink from "../InviteUsersWithLink.svelte";
-    import SelectUsers from "../SelectUsers.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import Button from "@src/ui/Button.svelte";
+    import Loading from "@src/ui/Loading.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import InviteUsersWithLink from "@src/desktop/features/chats/core/InviteUsersWithLink.svelte";
+    import SelectUsers from "@src/desktop/features/chats/core/SelectUsers.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/components/home/groupdetails/InviteUsersHeader.svelte b/frontend/app/src/desktop/features/chats/group/InviteUsersHeader.svelte
similarity index 88%
rename from frontend/app/src/components/home/groupdetails/InviteUsersHeader.svelte
rename to frontend/app/src/desktop/features/chats/group/InviteUsersHeader.svelte
index ba70d42de6..cc2eb1b574 100644
--- a/frontend/app/src/components/home/groupdetails/InviteUsersHeader.svelte
+++ b/frontend/app/src/desktop/features/chats/group/InviteUsersHeader.svelte
@@ -10,10 +10,10 @@
     import { _ } from "svelte-i18n";
     import ArrowLeft from "svelte-material-icons/ArrowLeft.svelte";
     import Close from "svelte-material-icons/Close.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import HoverIcon from "../../HoverIcon.svelte";
-    import SectionHeader from "../../SectionHeader.svelte";
-    import Translatable from "../../Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import SectionHeader from "@src/desktop/shared/SectionHeader.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/desktop/features/chats/group/InvitedUser.svelte b/frontend/app/src/desktop/features/chats/group/InvitedUser.svelte
new file mode 100644
index 0000000000..9c82807dca
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/group/InvitedUser.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+    import { iconSize } from "@client";
+    import type { UserSummary } from "@shared";
+    import Cancel from "svelte-material-icons/Cancel.svelte";
+    import ChevronDown from "svelte-material-icons/ChevronDown.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import Menu from "@src/desktop/shared/Menu.svelte";
+    import MenuIcon from "@src/desktop/shared/MenuIcon.svelte";
+    import MenuItem from "@src/desktop/shared/MenuItem.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import User from "./User.svelte";
+
+    interface Props {
+        user: UserSummary;
+        canUninviteUser?: boolean;
+        searchTerm?: string;
+        me?: boolean;
+        onCancelInvite: (userId: string) => void;
+    }
+
+    let {
+        user,
+        canUninviteUser = false,
+        searchTerm = "",
+        me = false,
+        onCancelInvite,
+    }: Props = $props();
+
+    function cancelInvite() {
+        onCancelInvite(user.userId);
+    }
+</script>
+
+<User {me} {user} {searchTerm}>
+    {#if canUninviteUser}
+        <span class="menu">
+            <MenuIcon position={"bottom"} align={"end"}>
+                {#snippet menuIcon()}
+                    <HoverIcon>
+                        <ChevronDown size={$iconSize} color={"var(--icon-txt)"} />
+                    </HoverIcon>
+                {/snippet}
+                {#snippet menuItems()}
+                    <Menu>
+                        <MenuItem onclick={cancelInvite}>
+                            {#snippet icon()}
+                                <Cancel size={$iconSize} color={"var(--icon-inverted-txt)"} />
+                            {/snippet}
+                            {#snippet text()}
+                                <div>
+                                    <Translatable resourceKey={i18nKey("cancelInvite")} />
+                                </div>
+                            {/snippet}
+                        </MenuItem>
+                    </Menu>
+                {/snippet}
+            </MenuIcon>
+        </span>
+    {/if}
+</User>
diff --git a/frontend/app/src/desktop/features/chats/group/LapsedUser.svelte b/frontend/app/src/desktop/features/chats/group/LapsedUser.svelte
new file mode 100644
index 0000000000..c52fb5b1a4
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/group/LapsedUser.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+    import { iconSize } from "@client";
+    import type { UserSummary } from "@shared";
+    import Cancel from "svelte-material-icons/Cancel.svelte";
+    import ChevronDown from "svelte-material-icons/ChevronDown.svelte";
+    import MinusCircleOutline from "svelte-material-icons/MinusCircleOutline.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import Menu from "@src/desktop/shared/Menu.svelte";
+    import MenuIcon from "@src/desktop/shared/MenuIcon.svelte";
+    import MenuItem from "@src/desktop/shared/MenuItem.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import User from "./User.svelte";
+
+    interface Props {
+        user: UserSummary;
+        searchTerm?: string;
+        me?: boolean;
+        onBlockUser?: (userId: string) => void;
+        onRemoveMember?: (userId: string) => void;
+    }
+
+    let { user, searchTerm = "", me = false, onBlockUser, onRemoveMember }: Props = $props();
+</script>
+
+<User {me} {user} {searchTerm}>
+    {#if onBlockUser || onRemoveMember}
+        <span class="menu">
+            <MenuIcon position={"bottom"} align={"end"}>
+                {#snippet menuIcon()}
+                    <HoverIcon>
+                        <ChevronDown size={$iconSize} color={"var(--icon-txt)"} />
+                    </HoverIcon>
+                {/snippet}
+                {#snippet menuItems()}
+                    <Menu>
+                        {#if onBlockUser}
+                            <MenuItem onclick={() => onBlockUser(user.userId)}>
+                                {#snippet icon()}
+                                    <Cancel size={$iconSize} color={"var(--icon-inverted-txt)"} />
+                                {/snippet}
+                                {#snippet text()}
+                                    <div>
+                                        <Translatable resourceKey={i18nKey("blockUser")} />
+                                    </div>
+                                {/snippet}
+                            </MenuItem>
+                        {/if}
+                        {#if onRemoveMember}
+                            <MenuItem onclick={() => onRemoveMember(user.userId)}>
+                                {#snippet icon()}
+                                    <MinusCircleOutline
+                                        size={$iconSize}
+                                        color={"var(--icon-inverted-txt)"} />
+                                {/snippet}
+                                {#snippet text()}
+                                    <div>
+                                        <Translatable resourceKey={i18nKey("remove")} />
+                                    </div>
+                                {/snippet}
+                            </MenuItem>
+                        {/if}
+                    </Menu>
+                {/snippet}
+            </MenuIcon>
+        </span>
+    {/if}
+</User>
diff --git a/frontend/app/src/desktop/features/chats/group/Member.svelte b/frontend/app/src/desktop/features/chats/group/Member.svelte
new file mode 100644
index 0000000000..572eab472b
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/group/Member.svelte
@@ -0,0 +1,245 @@
+<script lang="ts">
+    import {
+        iconSize,
+        type FullMember,
+        type MemberRole,
+        ROLE_ADMIN,
+        ROLE_MEMBER,
+        ROLE_MODERATOR,
+        ROLE_OWNER,
+        roleAsText,
+    } from "@client";
+    import { _ } from "svelte-i18n";
+    import AccountPlusOutline from "svelte-material-icons/AccountPlusOutline.svelte";
+    import AccountRemoveOutline from "svelte-material-icons/AccountRemoveOutline.svelte";
+    import Cancel from "svelte-material-icons/Cancel.svelte";
+    import ChevronDown from "svelte-material-icons/ChevronDown.svelte";
+    import MinusCircleOutline from "svelte-material-icons/MinusCircleOutline.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import Menu from "@src/desktop/shared/Menu.svelte";
+    import MenuIcon from "@src/desktop/shared/MenuIcon.svelte";
+    import MenuItem from "@src/desktop/shared/MenuItem.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import User from "./User.svelte";
+
+    interface Props {
+        me: boolean;
+        member: FullMember;
+        canPromoteToOwner?: boolean;
+        canPromoteToAdmin?: boolean;
+        canDemoteToAdmin?: boolean;
+        canPromoteToModerator?: boolean;
+        canDemoteToModerator?: boolean;
+        canDemoteToMember?: boolean;
+        canRemoveMember?: boolean;
+        canBlockUser?: boolean;
+        searchTerm?: string;
+        onRemoveMember?: (userId: string) => void;
+        onChangeRole?: (args: { userId: string; newRole: MemberRole; oldRole: MemberRole }) => void;
+        onBlockUser?: (userId: string) => void;
+    }
+
+    let {
+        me,
+        member,
+        canPromoteToOwner = false,
+        canPromoteToAdmin = false,
+        canDemoteToAdmin = false,
+        canPromoteToModerator = false,
+        canDemoteToModerator = false,
+        canDemoteToMember = false,
+        canRemoveMember = false,
+        canBlockUser = false,
+        searchTerm = "",
+        onRemoveMember,
+        onChangeRole,
+        onBlockUser,
+    }: Props = $props();
+
+    // if search term is !== "", split the username into three parts [prefix, match, postfix]
+
+    let showMenu = $derived(
+        canPromoteToOwner ||
+            canPromoteToAdmin ||
+            canDemoteToAdmin ||
+            canPromoteToModerator ||
+            canDemoteToModerator ||
+            canDemoteToMember ||
+            canRemoveMember ||
+            canBlockUser,
+    );
+
+    let ownerText = $derived($_(roleAsText(ROLE_OWNER)));
+    let adminText = $derived($_(roleAsText(ROLE_ADMIN)));
+    let moderatorText = $derived($_(roleAsText(ROLE_MODERATOR)));
+    let memberText = $derived($_(roleAsText(ROLE_MEMBER)));
+
+    function removeUser() {
+        onRemoveMember?.(member.userId);
+    }
+
+    function changeRole(role: MemberRole) {
+        onChangeRole?.({
+            userId: member.userId,
+            newRole: role,
+            oldRole: member.role,
+        });
+    }
+
+    function blockUser() {
+        onBlockUser?.(member.userId);
+    }
+</script>
+
+<User
+    user={member}
+    {me}
+    {searchTerm}
+    role={member.role > ROLE_MEMBER
+        ? roleAsText(member.role)
+        : undefined}>
+    {#if showMenu}
+        <span class="menu">
+            <MenuIcon position={"bottom"} align={"end"}>
+                {#snippet menuIcon()}
+                    <HoverIcon>
+                        <ChevronDown size={$iconSize} color={"var(--icon-txt)"} />
+                    </HoverIcon>
+                {/snippet}
+                {#snippet menuItems()}
+                    <Menu>
+                        {#if canPromoteToOwner}
+                            <MenuItem onclick={() => changeRole(ROLE_OWNER)}>
+                                {#snippet icon()}
+                                    <AccountPlusOutline
+                                        size={$iconSize}
+                                        color={"var(--icon-inverted-txt)"} />
+                                {/snippet}
+                                {#snippet text()}
+                                    <div>
+                                        <Translatable
+                                            resourceKey={i18nKey("promoteTo", {
+                                                role: ownerText,
+                                            })} />
+                                    </div>
+                                {/snippet}
+                            </MenuItem>
+                        {/if}
+                        {#if canPromoteToAdmin}
+                            <MenuItem onclick={() => changeRole(ROLE_ADMIN)}>
+                                {#snippet icon()}
+                                    <AccountPlusOutline
+                                        size={$iconSize}
+                                        color={"var(--icon-inverted-txt)"} />
+                                {/snippet}
+                                {#snippet text()}
+                                    <div>
+                                        <Translatable
+                                            resourceKey={i18nKey("promoteTo", {
+                                                role: adminText,
+                                            })} />
+                                    </div>
+                                {/snippet}
+                            </MenuItem>
+                        {/if}
+                        {#if canDemoteToAdmin}
+                            <MenuItem onclick={() => changeRole(ROLE_ADMIN)}>
+                                {#snippet icon()}
+                                    <AccountRemoveOutline
+                                        size={$iconSize}
+                                        color={"var(--icon-inverted-txt)"} />
+                                {/snippet}
+                                {#snippet text()}
+                                    <div>
+                                        <Translatable
+                                            resourceKey={i18nKey("demoteTo", {
+                                                role: adminText,
+                                            })} />
+                                    </div>
+                                {/snippet}
+                            </MenuItem>
+                        {/if}
+                        {#if canPromoteToModerator}
+                            <MenuItem onclick={() => changeRole(ROLE_MODERATOR)}>
+                                {#snippet icon()}
+                                    <AccountPlusOutline
+                                        size={$iconSize}
+                                        color={"var(--icon-inverted-txt)"} />
+                                {/snippet}
+                                {#snippet text()}
+                                    <div>
+                                        <Translatable
+                                            resourceKey={i18nKey("promoteTo", {
+                                                role: moderatorText,
+                                            })} />
+                                    </div>
+                                {/snippet}
+                            </MenuItem>
+                        {/if}
+                        {#if canDemoteToModerator}
+                            <MenuItem onclick={() => changeRole(ROLE_MODERATOR)}>
+                                {#snippet icon()}
+                                    <AccountRemoveOutline
+                                        size={$iconSize}
+                                        color={"var(--icon-inverted-txt)"} />
+                                {/snippet}
+                                {#snippet text()}
+                                    <div>
+                                        <Translatable
+                                            resourceKey={i18nKey("demoteTo", {
+                                                role: moderatorText,
+                                            })} />
+                                    </div>
+                                {/snippet}
+                            </MenuItem>
+                        {/if}
+                        {#if canDemoteToMember}
+                            <MenuItem onclick={() => changeRole(ROLE_MEMBER)}>
+                                {#snippet icon()}
+                                    <AccountRemoveOutline
+                                        size={$iconSize}
+                                        color={"var(--icon-inverted-txt)"} />
+                                {/snippet}
+                                {#snippet text()}
+                                    <div>
+                                        <Translatable
+                                            resourceKey={i18nKey("demoteTo", {
+                                                role: memberText,
+                                            })} />
+                                    </div>
+                                {/snippet}
+                            </MenuItem>
+                        {/if}
+                        {#if canBlockUser}
+                            <MenuItem onclick={blockUser}>
+                                {#snippet icon()}
+                                    <Cancel size={$iconSize} color={"var(--icon-inverted-txt)"} />
+                                {/snippet}
+                                {#snippet text()}
+                                    <div>
+                                        <Translatable resourceKey={i18nKey("blockUser")} />
+                                    </div>
+                                {/snippet}
+                            </MenuItem>
+                        {/if}
+                        {#if canRemoveMember}
+                            <MenuItem onclick={removeUser}>
+                                {#snippet icon()}
+                                    <MinusCircleOutline
+                                        size={$iconSize}
+                                        color={"var(--icon-inverted-txt)"} />
+                                {/snippet}
+                                {#snippet text()}
+                                    <div>
+                                        <Translatable resourceKey={i18nKey("remove")} />
+                                    </div>
+                                {/snippet}
+                            </MenuItem>
+                        {/if}
+                    </Menu>
+                {/snippet}
+            </MenuIcon>
+        </span>
+    {/if}
+</User>
diff --git a/frontend/app/src/components/home/groupdetails/Members.svelte b/frontend/app/src/desktop/features/chats/group/Members.svelte
similarity index 97%
rename from frontend/app/src/components/home/groupdetails/Members.svelte
rename to frontend/app/src/desktop/features/chats/group/Members.svelte
index b7a1c4e881..d918e0b5fa 100644
--- a/frontend/app/src/components/home/groupdetails/Members.svelte
+++ b/frontend/app/src/desktop/features/chats/group/Members.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import BotsTab from "@src/components/bots/BotsTab.svelte";
+    import BotsTab from "@src/desktop/features/bots/BotsTab.svelte";
     import { menuCloser } from "component-lib";
     import {
         type CommunityIdentifier,
@@ -31,12 +31,12 @@
     import AccountPlusOutline from "svelte-material-icons/AccountPlusOutline.svelte";
     import Alarm from "svelte-material-icons/Alarm.svelte";
     import Cancel from "svelte-material-icons/Cancel.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { trimLeadingAtSymbol } from "../../../utils/user";
-    import Search from "../../Search.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import VirtualList from "@shared_components/VirtualList.svelte";
-    import UserGroups from "../communities/details/UserGroups.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { trimLeadingAtSymbol } from "@src/utils/user";
+    import Search from "@src/desktop/shared/Search.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import VirtualList from "@src/ui/VirtualList.svelte";
+    import UserGroups from "@src/desktop/features/chats/community/details/UserGroups.svelte";
     import BlockedUser from "./BlockedUser.svelte";
     import InvitedUser from "./InvitedUser.svelte";
     import LapsedUser from "./LapsedUser.svelte";
diff --git a/frontend/app/src/components/home/groupdetails/MembersHeader.svelte b/frontend/app/src/desktop/features/chats/group/MembersHeader.svelte
similarity index 87%
rename from frontend/app/src/components/home/groupdetails/MembersHeader.svelte
rename to frontend/app/src/desktop/features/chats/group/MembersHeader.svelte
index 8a05d818c1..280df222a5 100644
--- a/frontend/app/src/components/home/groupdetails/MembersHeader.svelte
+++ b/frontend/app/src/desktop/features/chats/group/MembersHeader.svelte
@@ -4,10 +4,10 @@
     import AccountMultiplePlus from "svelte-material-icons/AccountMultiplePlus.svelte";
     import ArrowLeft from "svelte-material-icons/ArrowLeft.svelte";
     import Close from "svelte-material-icons/Close.svelte";
-    import { i18nKey, interpolate } from "../../../i18n/i18n";
-    import HoverIcon from "../../HoverIcon.svelte";
-    import SectionHeader from "../../SectionHeader.svelte";
-    import Translatable from "../../Translatable.svelte";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import SectionHeader from "@src/desktop/shared/SectionHeader.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
 
     interface Props {
         closeIcon: "close" | "back";
diff --git a/frontend/app/src/components/TabHeader.svelte b/frontend/app/src/desktop/features/chats/group/TabHeader.svelte
similarity index 95%
rename from frontend/app/src/components/TabHeader.svelte
rename to frontend/app/src/desktop/features/chats/group/TabHeader.svelte
index c266f6bdfc..ac88338869 100644
--- a/frontend/app/src/components/TabHeader.svelte
+++ b/frontend/app/src/desktop/features/chats/group/TabHeader.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import type { ResourceKey } from "@client";
-    import Translatable from "./Translatable.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
 
     interface Props {
         items: ResourceKey[];
diff --git a/frontend/app/src/desktop/features/chats/group/User.svelte b/frontend/app/src/desktop/features/chats/group/User.svelte
new file mode 100644
index 0000000000..2eb0f3c024
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/group/User.svelte
@@ -0,0 +1,167 @@
+<script lang="ts">
+    import type { OpenChat } from "@client";
+    import {
+        AvatarSize,
+        selectedChatWebhooksStore,
+        selectedCommunityMembersStore,
+    } from "@client";
+    import type { UserSummary } from "@shared";
+    import { getContext, type Snippet } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Avatar from "@src/desktop/shared/Avatar.svelte";
+    import FilteredUsername from "@src/ui/FilteredUsername.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import type { ProfileLinkClickedEvent } from "@webcomponents/profileLink";
+    import Badges from "@src/desktop/features/profile/Badges.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        user: UserSummary;
+        me?: boolean;
+        searchTerm?: string;
+        role?: string | undefined;
+        profile?: boolean;
+        children?: Snippet;
+        onClick?: () => void;
+    }
+
+    let {
+        user,
+        me = false,
+        searchTerm = "",
+        role = undefined,
+        profile = true,
+        children,
+        onClick,
+    }: Props = $props();
+
+    // if search term is !== "", split the username into three parts [prefix, match, postfix]
+
+    let hovering = $state(false);
+
+    let displayName = $derived(
+        client.getDisplayName(
+            user.userId,
+            $selectedCommunityMembersStore,
+            $selectedChatWebhooksStore,
+        ),
+    );
+
+    function click(ev: Event) {
+        if (profile) {
+            ev.target?.dispatchEvent(
+                new CustomEvent<ProfileLinkClickedEvent>("profile-clicked", {
+                    detail: {
+                        userId: user.userId,
+                        chatButton: !me,
+                        inGlobalContext: false,
+                    },
+                    bubbles: true,
+                }),
+            );
+        }
+
+        onClick?.();
+    }
+</script>
+
+<!-- svelte-ignore a11y_interactive_supports_focus -->
+<div
+    class="member"
+    class:me
+    onclick={click}
+    role="button"
+    onmouseenter={() => (hovering = true)}
+    onmouseleave={() => (hovering = false)}>
+    <span class="avatar">
+        <Avatar
+            statusBorder={hovering && !me ? "var(--members-hv)" : "transparent"}
+            userId={user.userId}
+            url={client.userAvatarUrl(user)}
+            maxStreak={user.maxStreak >= 365}
+            size={AvatarSize.Default} />
+    </span>
+    <div class="details">
+        <div class="display-name">
+            <h4>
+                <FilteredUsername {searchTerm} username={displayName} {me} />
+                <Badges
+                    uniquePerson={user.isUniquePerson}
+                    diamondStatus={user.diamondStatus}
+                    streak={user.streak}
+                    chitEarned={user.totalChitEarned} />
+            </h4>
+            {#if role !== undefined}
+                <span class="role">
+                    (<Translatable resourceKey={i18nKey(role)} />)
+                </span>
+            {/if}
+        </div>
+        <div class="username">
+            <FilteredUsername {searchTerm} username={"@" + user.username} />
+        </div>
+    </div>
+    {@render children?.()}
+</div>
+
+<style lang="scss">
+    .member {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: $sp4;
+        transition:
+            background-color ease-in-out 100ms,
+            border-color ease-in-out 100ms;
+        gap: 12px;
+
+        &:not(.me) {
+            cursor: pointer;
+        }
+
+        @media (hover: hover) {
+            &:not(.me):hover {
+                background-color: var(--members-hv);
+            }
+        }
+
+        @include mobile() {
+            padding: $sp3 toRem(10);
+        }
+    }
+    .avatar {
+        flex: 0 0 50px;
+        position: relative;
+    }
+
+    .details {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        @include font(medium, normal, fs-100);
+
+        .display-name {
+            display: flex;
+            flex: 1;
+            align-items: center;
+            @include ellipsis();
+
+            h4 {
+                display: flex;
+                align-items: center;
+                gap: $sp2;
+            }
+        }
+
+        .username {
+            font-weight: 200;
+            color: var(--txt-light);
+        }
+    }
+
+    .role {
+        margin: 0 $sp3;
+        @include font(light, normal, fs-70);
+    }
+</style>
diff --git a/frontend/app/src/components/home/createOrUpdateGroup/CreateOrUpdateGroup.svelte b/frontend/app/src/desktop/features/chats/group/edit/CreateOrUpdateGroup.svelte
similarity index 95%
rename from frontend/app/src/components/home/createOrUpdateGroup/CreateOrUpdateGroup.svelte
rename to frontend/app/src/desktop/features/chats/group/edit/CreateOrUpdateGroup.svelte
index 7b533b34d3..5bf9672dbe 100644
--- a/frontend/app/src/components/home/createOrUpdateGroup/CreateOrUpdateGroup.svelte
+++ b/frontend/app/src/desktop/features/chats/group/edit/CreateOrUpdateGroup.svelte
@@ -17,20 +17,20 @@
         type UpdateGroupResponse,
         type UserSummary,
     } from "@client";
-    import { navigate } from "@utils/navigation";
+    import { navigate } from "@src/utils/navigation";
     import { getContext, tick } from "svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { toastStore } from "../../../stores/toast";
-    import AreYouSure from "../../AreYouSure.svelte";
-    import Button from "../../Button.svelte";
-    import ModalContent from "../../ModalContent.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import ChooseMembers from "../ChooseMembers.svelte";
-    import GroupPermissionsEditor from "../GroupPermissionsEditor.svelte";
-    import GroupPermissionsViewer from "../GroupPermissionsViewer.svelte";
-    import RulesEditor from "../RulesEditor.svelte";
-    import StageHeader from "../StageHeader.svelte";
-    import VisibilityControl from "../VisibilityControl.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import AreYouSure from "@src/desktop/shared/AreYouSure.svelte";
+    import Button from "@src/ui/Button.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import ChooseMembers from "@src/desktop/features/chats/core/ChooseMembers.svelte";
+    import GroupPermissionsEditor from "./GroupPermissionsEditor.svelte";
+    import GroupPermissionsViewer from "@src/desktop/features/chats/group/GroupPermissionsViewer.svelte";
+    import RulesEditor from "@src/desktop/features/chats/core/RulesEditor.svelte";
+    import StageHeader from "@src/desktop/features/chats/core/StageHeader.svelte";
+    import VisibilityControl from "@src/desktop/features/chats/core/VisibilityControl.svelte";
     import GroupDetails from "./GroupDetails.svelte";
 
     const client = getContext<OpenChat>("client");
diff --git a/frontend/app/src/desktop/features/chats/group/edit/GroupDetails.svelte b/frontend/app/src/desktop/features/chats/group/edit/GroupDetails.svelte
new file mode 100644
index 0000000000..624a889860
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/group/edit/GroupDetails.svelte
@@ -0,0 +1,128 @@
+<script lang="ts">
+    import EditableAvatar from "@src/ui/EditableAvatar.svelte";
+    import type { CandidateGroupChat } from "@client";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Input from "@src/desktop/shared/Input.svelte";
+    import Legend from "@src/desktop/shared/Legend.svelte";
+    import TextArea from "@src/desktop/shared/TextArea.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    const MIN_LENGTH = 3;
+    const MAX_LENGTH = 40;
+    const MAX_URL_LENGTH = 500;
+    const MAX_DESC_LENGTH = 1024;
+
+    interface Props {
+        busy: boolean;
+        candidateGroup: CandidateGroupChat;
+        valid: boolean;
+        embeddedContent: boolean;
+    }
+
+    let {
+        busy,
+        candidateGroup = $bindable(),
+        valid = $bindable(),
+        embeddedContent,
+    }: Props = $props();
+
+    $effect(() => {
+        let urlValid = true;
+        if (embeddedContent) {
+            if (candidateGroup.externalUrl === undefined) {
+                urlValid = false;
+            } else {
+                try {
+                    new URL(candidateGroup.externalUrl);
+                } catch (_) {
+                    urlValid = false;
+                }
+            }
+        }
+        const isValid =
+            candidateGroup.name.length >= MIN_LENGTH &&
+            candidateGroup.name.length <= MAX_LENGTH &&
+            urlValid;
+
+        if (isValid !== valid) {
+            valid = isValid;
+        }
+    });
+
+    function groupAvatarSelected(detail: { url: string; data: Uint8Array }) {
+        candidateGroup.avatar = {
+            blobUrl: detail.url,
+            blobData: detail.data,
+        };
+    }
+</script>
+
+<section>
+    <Legend label={i18nKey("group.image", undefined, candidateGroup.level)} />
+    <div class="photo">
+        <EditableAvatar
+            overlayIcon
+            image={candidateGroup.avatar?.blobUrl}
+            onImageSelected={groupAvatarSelected} />
+    </div>
+</section>
+
+<section>
+    <Legend label={i18nKey("group.name", undefined, candidateGroup.level)} required />
+    <Input
+        autofocus
+        disabled={busy}
+        bind:value={candidateGroup.name}
+        minlength={MIN_LENGTH}
+        maxlength={MAX_LENGTH}
+        countdown
+        placeholder={i18nKey("newGroupName", undefined, candidateGroup.level, true)} />
+</section>
+
+{#if embeddedContent}
+    <section>
+        <Legend label={i18nKey("group.externalUrl", undefined, candidateGroup.level)} required />
+        <Input
+            disabled={busy}
+            bind:value={candidateGroup.externalUrl}
+            minlength={MIN_LENGTH}
+            maxlength={MAX_URL_LENGTH}
+            placeholder={i18nKey(
+                "group.externalUrlPlaceholder",
+                undefined,
+                candidateGroup.level,
+                true,
+            )} />
+        <p class="smallprint">
+            <Translatable resourceKey={i18nKey("group.externalUrlWarning")} />
+        </p>
+    </section>
+{/if}
+
+<section>
+    <Legend label={i18nKey("group.description", undefined, candidateGroup.level)} />
+    <TextArea
+        rows={4}
+        disabled={busy}
+        bind:value={candidateGroup.description}
+        maxlength={MAX_DESC_LENGTH}
+        placeholder={i18nKey("newGroupDesc", undefined, candidateGroup.level, true)} />
+</section>
+
+<style lang="scss">
+    .photo {
+        text-align: center;
+        padding: $sp4 0;
+        margin-bottom: $sp3;
+    }
+
+    section {
+        margin-bottom: $sp5;
+    }
+
+    .smallprint {
+        @include font(light, normal, fs-70);
+        color: var(--txt-light);
+        margin-bottom: $sp4;
+    }
+</style>
diff --git a/frontend/app/src/components/home/GroupPermissionsEditor.svelte b/frontend/app/src/desktop/features/chats/group/edit/GroupPermissionsEditor.svelte
similarity index 97%
rename from frontend/app/src/components/home/GroupPermissionsEditor.svelte
rename to frontend/app/src/desktop/features/chats/group/edit/GroupPermissionsEditor.svelte
index b07a119baa..6360cc81b2 100644
--- a/frontend/app/src/components/home/GroupPermissionsEditor.svelte
+++ b/frontend/app/src/desktop/features/chats/group/edit/GroupPermissionsEditor.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-    import SelectPermissionRole from "./SelectPermissionRole.svelte";
+    import SelectPermissionRole from "@src/desktop/features/chats/core/SelectPermissionRole.svelte";
     import { type ChatPermissions, chatRoles, ROLE_ADMIN, ROLE_MEMBER } from "@client";
-    import Toggle from "../Toggle.svelte";
-    import TabHeader from "../TabHeader.svelte";
-    import { i18nKey } from "../../i18n/i18n";
+    import Toggle from "@src/desktop/shared/Toggle.svelte";
+    import TabHeader from "@src/desktop/features/chats/group/TabHeader.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
 
     interface Props {
         editing: boolean;
diff --git a/frontend/app/src/desktop/features/chats/pinned/PinnedMessage.svelte b/frontend/app/src/desktop/features/chats/pinned/PinnedMessage.svelte
new file mode 100644
index 0000000000..019f457305
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/pinned/PinnedMessage.svelte
@@ -0,0 +1,234 @@
+<script lang="ts">
+    import { findUser } from "@src/utils/user";
+    import type { ProfileLinkClickedEvent } from "@webcomponents/profileLink";
+    import type { CreatedUser, Message, MultiUserChatIdentifier, OpenChat } from "@client";
+    import {
+        allUsersStore,
+        AvatarSize,
+        chatListScopeStore,
+        fullWidth,
+        mobileWidth,
+        routeForMessage,
+        selectedChatIdStore,
+        selectedChatWebhooksStore,
+        selectedCommunityMembersStore,
+    } from "@client";
+    import { navigate } from "@src/utils/navigation";
+    import { getContext } from "svelte";
+    import { rtlStore } from "@src/stores/rtl";
+    import Avatar from "@src/desktop/shared/Avatar.svelte";
+    import Link from "@src/desktop/shared/Link.svelte";
+    import ChatMessageContent from "@src/desktop/features/chats/core/content/ChatMessageContent.svelte";
+    import IntersectionObserver from "@src/desktop/features/chats/core/IntersectionObserver.svelte";
+    import RepliesTo from "@src/desktop/features/chats/core/RepliesTo.svelte";
+    import UnresolvedReply from "@src/desktop/features/chats/core/UnresolvedReply.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        chatId: MultiUserChatIdentifier;
+        user: CreatedUser;
+        senderId: string;
+        msg: Message;
+        timestamp: bigint;
+    }
+
+    let { chatId, user, senderId, msg, timestamp }: Props = $props();
+
+    let crypto = msg.content.kind === "crypto_content";
+
+    let sender = $derived(findUser(msg.sender, $allUsersStore, $selectedChatWebhooksStore));
+    let username = $derived(
+        client.getDisplayName(
+            msg.sender,
+            $selectedCommunityMembersStore,
+            $selectedChatWebhooksStore,
+        ),
+    );
+    let deleted = $derived(msg.content.kind === "deleted_content");
+    let fill = $derived(client.fillMessage(msg));
+    let me = $derived(user.userId === senderId);
+    let modal = $derived(!$fullWidth);
+
+    function openUserProfile(e: Event) {
+        if (!sender) return;
+
+        e.preventDefault();
+        e.target?.dispatchEvent(
+            new CustomEvent<ProfileLinkClickedEvent>("profile-clicked", {
+                detail: {
+                    userId: sender.userId,
+                    chatButton: !me,
+                    inGlobalContext: false,
+                },
+                bubbles: true,
+            }),
+        );
+    }
+
+    function goToMessageIndex() {
+        if ($selectedChatIdStore !== undefined) {
+            if (modal) {
+                client.popRightPanelHistory();
+            }
+            navigate(
+                routeForMessage(
+                    $chatListScopeStore.kind,
+                    { chatId: $selectedChatIdStore },
+                    msg.messageIndex,
+                ),
+            );
+        }
+    }
+</script>
+
+<div class="message-row" class:me onclick={goToMessageIndex}>
+    <div class="avatar" onclick={openUserProfile}>
+        <Avatar
+            url={client.userAvatarUrl(sender)}
+            userId={sender?.userId}
+            size={$mobileWidth ? AvatarSize.Small : AvatarSize.Default} />
+    </div>
+    <IntersectionObserver>
+        {#snippet children(intersecting)}
+            <div
+                class="message-bubble"
+                class:fill={fill && !deleted}
+                class:me
+                class:deleted
+                class:crypto
+                class:rtl={$rtlStore}>
+                {#if !deleted}
+                    <div class="sender" class:fill class:rtl={$rtlStore}>
+                        <Link underline={"never"} onClick={openUserProfile}>
+                            <h4 class="username" class:fill class:crypto>{username}</h4>
+                        </Link>
+                    </div>
+                {/if}
+                {#if msg.repliesTo !== undefined && !deleted}
+                    {#if msg.repliesTo.kind === "rehydrated_reply_context"}
+                        <RepliesTo {intersecting} readonly {chatId} repliesTo={msg.repliesTo} />
+                    {:else}
+                        <UnresolvedReply />
+                    {/if}
+                {/if}
+
+                <ChatMessageContent
+                    readonly
+                    pinned
+                    {senderId}
+                    {fill}
+                    {timestamp}
+                    failed={false}
+                    messageContext={{ chatId }}
+                    edited={msg.edited}
+                    messageIndex={msg.messageIndex}
+                    messageId={msg.messageId}
+                    {me}
+                    {intersecting}
+                    content={msg.content}
+                    blockLevelMarkdown={msg.blockLevelMarkdown}
+                    ogPreviews={msg.ogPreviews} />
+            </div>
+        {/snippet}
+    </IntersectionObserver>
+</div>
+
+<style lang="scss">
+    :global(.message-bubble .content a) {
+        text-decoration: underline;
+    }
+
+    :global(.message-bubble .content ul) {
+        margin: 0 $sp4;
+    }
+
+    .sender {
+        margin-bottom: $sp1;
+
+        &.fill {
+            position: absolute;
+            background-color: rgba(0, 0, 0, 0.3);
+            color: #fff;
+            padding: $sp2 $sp4;
+            border-radius: 0 0 $sp4 0;
+            z-index: 1;
+
+            &.rtl {
+                right: 0;
+                border-radius: 0 0 0 $sp4;
+            }
+        }
+    }
+
+    $avatar-width: 56px;
+    $avatar-width-mob: 43px;
+
+    .message-row {
+        display: flex;
+        justify-content: flex-start;
+        cursor: pointer;
+        margin-bottom: $sp4;
+        gap: $sp3;
+
+        .avatar {
+            flex: 0 0 $avatar-width;
+            cursor: pointer;
+
+            @include mobile() {
+                flex: 0 0 $avatar-width-mob;
+            }
+        }
+    }
+
+    .message-bubble {
+        $radius: $sp3;
+        $inner-radius: 4px;
+        transition:
+            box-shadow ease-in-out 200ms,
+            background-color ease-in-out 200ms,
+            border ease-in-out 300ms,
+            transform ease-in-out 200ms;
+        position: relative;
+        padding: 6px $sp3 6px $sp3;
+        background-color: var(--currentChat-msg-bg);
+        color: var(--currentChat-msg-txt);
+        @include font(book, normal, fs-100);
+        border-radius: $radius;
+        overflow: hidden;
+        pointer-events: none;
+
+        .username {
+            color: inherit;
+            display: inline;
+        }
+
+        &.me {
+            background-color: var(--currentChat-msg-me-bg);
+            color: var(--currentChat-msg-me-txt);
+        }
+
+        &.fill {
+            padding: 0;
+            overflow: hidden;
+            border: none;
+            line-height: 0;
+        }
+
+        &.deleted {
+            opacity: 0.8;
+        }
+
+        &:after {
+            content: "";
+            display: table;
+            clear: both;
+        }
+    }
+
+    .username {
+        margin: 0;
+        @include font(bold, normal, fs-100);
+        color: #fff;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/pinned/PinnedMessages.svelte b/frontend/app/src/desktop/features/chats/pinned/PinnedMessages.svelte
new file mode 100644
index 0000000000..e68c85c914
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/pinned/PinnedMessages.svelte
@@ -0,0 +1,192 @@
+<script lang="ts">
+    import type {
+        EventWrapper,
+        Message,
+        MultiUserChatIdentifier,
+        OpenChat,
+        ReadonlySet,
+    } from "@client";
+    import {
+        currentUserStore,
+        iconSize,
+        messagesRead,
+        selectedChatPinnedMessagesStore,
+        selectedServerChatStore,
+        subscribe,
+    } from "@client";
+    import { isSuccessfulEventsResponse } from "@shared";
+    import { getContext, onMount, tick, untrack } from "svelte";
+    import { _ } from "svelte-i18n";
+    import Close from "svelte-material-icons/Close.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import type { RemoteData } from "@src/utils/remoteData";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import Loading from "@src/ui/Loading.svelte";
+    import SectionHeader from "@src/desktop/shared/SectionHeader.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import PinnedMessage from "./PinnedMessage.svelte";
+
+    interface Props {
+        pinned: ReadonlySet<number>;
+        chatId: MultiUserChatIdentifier;
+        dateLastPinned: bigint | undefined;
+        onClose: () => void;
+    }
+
+    let { chatId, dateLastPinned, onClose }: Props = $props();
+
+    const client = getContext<OpenChat>("client");
+    let unread = $state<boolean>(false);
+    // $derived is load-bearing: a plain `let` captures a one-time snapshot,
+    // and if the panel mounts before the chat details (pinned set) arrive
+    // the panel stays empty forever.
+    let pinnedMessages = $derived($selectedChatPinnedMessagesStore);
+
+    onMount(() => {
+        const unsubs = [
+            subscribe("chatWith", onClose),
+            messagesRead.subscribe(() => {
+                unread = client.unreadPinned(chatId, dateLastPinned);
+            }),
+        ];
+        return () => {
+            unsubs.forEach((u) => u());
+        };
+    });
+
+    let messagesDiv: HTMLDivElement | undefined = $state();
+
+    let messages: RemoteData<EventWrapper<Message>[][], string> = $state({ kind: "idle" });
+
+    function close() {
+        onClose();
+        messages = { kind: "idle" };
+    }
+
+    function scrollBottom() {
+        if (messagesDiv !== undefined) {
+            messagesDiv.scrollTo({
+                top: messagesDiv.scrollHeight - messagesDiv.clientHeight,
+                behavior: "auto",
+            });
+        }
+    }
+
+    function reloadPinned(pinned: ReadonlySet<number>): void {
+        untrack(() => {
+            if (pinned.size > 0) {
+                if (messages.kind !== "success") {
+                    messages = { kind: "loading" };
+                }
+                client
+                    .getMessagesByMessageIndex(chatId, undefined, [...pinned])
+                    .then((resp) => {
+                        if (!isSuccessfulEventsResponse(resp)) {
+                            messages = { kind: "error", error: "Unable to load pinned messages" };
+                        } else {
+                            messages = {
+                                kind: "success",
+                                data: client.groupMessagesByDate(
+                                    resp.events.sort((a, b) => a.index - b.index),
+                                ),
+                            };
+
+                            if (unread) {
+                                client.markPinnedMessagesRead(chatId, dateLastPinned!);
+                            }
+
+                            tick().then(scrollBottom);
+                        }
+                    })
+                    .catch((err) => {
+                        client.logError("Unable to load pinned messages: ", err);
+                        messages = { kind: "error", error: err.toString() };
+                    });
+            } else {
+                messages = { kind: "success", data: [] };
+            }
+        });
+    }
+
+    $effect(() => {
+        // Until the chat details arrive the pinned set is UNKNOWN, not empty —
+        // rendering the empty state here made the panel show "no pins" for the
+        // first second on a first open (cold cache / slow connection).
+        if ($selectedServerChatStore === undefined) {
+            messages = { kind: "loading" };
+            return;
+        }
+        reloadPinned(pinnedMessages);
+        unread = client.unreadPinned(chatId, dateLastPinned);
+    });
+
+    function dateGroupKey(group: EventWrapper<Message>[]): string {
+        const first = group[0] && group[0] && group[0].timestamp;
+        return first ? new Date(Number(first)).toDateString() : "unknown";
+    }
+</script>
+
+<SectionHeader gap>
+    <h4><Translatable resourceKey={i18nKey("pinnedMessages")} /></h4>
+    <span title={$_("close")} class="close" onclick={close}>
+        <HoverIcon>
+            <Close size={$iconSize} color={"var(--icon-txt)"} />
+        </HoverIcon>
+    </span>
+</SectionHeader>
+
+<div bind:this={messagesDiv} class="pinned-messages">
+    {#if messages.kind !== "success"}
+        <Loading />
+    {:else}
+        {#each messages.data as dayGroup (dateGroupKey(dayGroup))}
+            <div class="day-group">
+                <div class="date-label">
+                    {client.formatMessageDate(dayGroup[0]?.timestamp, $_("today"), $_("yesterday"))}
+                </div>
+                {#each dayGroup as message (message.event.messageId)}
+                    <PinnedMessage
+                        {chatId}
+                        timestamp={message.timestamp}
+                        user={$currentUserStore}
+                        senderId={message.event.sender}
+                        msg={message.event} />
+                {/each}
+            </div>
+        {/each}
+    {/if}
+</div>
+
+<style lang="scss">
+    h4 {
+        flex: 1;
+        margin: 0 $sp3;
+        @include font-size(fs-120);
+    }
+    .close {
+        flex: 0 0 30px;
+    }
+    .pinned-messages {
+        @include message-list();
+    }
+
+    .day-group {
+        position: relative;
+
+        .date-label {
+            padding: $sp2;
+            background-color: var(--currentChat-date-bg);
+            border: var(--currentChat-date-bd);
+            color: var(--currentChat-date-txt);
+            position: sticky;
+            top: 0;
+            width: 200px;
+            margin: 0 auto;
+            border-radius: $sp4;
+            @include z-index("date-label");
+            @include font(book, normal, fs-70);
+            text-align: center;
+            margin-bottom: $sp4;
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/thread/Thread.svelte b/frontend/app/src/desktop/features/chats/thread/Thread.svelte
new file mode 100644
index 0000000000..6a2bfc9ffd
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/thread/Thread.svelte
@@ -0,0 +1,446 @@
+<script lang="ts">
+    import type {
+        AttachmentContent,
+        ChatEvent as ChatEventType,
+        ChatIdentifier,
+        ChatSummary,
+        EnhancedReplyContext,
+        EventWrapper,
+        Message,
+        MessageContent,
+        MessageContext,
+        OpenChat,
+        TimelineItem,
+        User,
+    } from "@client";
+    import {
+        allUsersStore,
+        currentUserIdStore,
+        currentUserStore,
+        failedMessagesStore,
+        lastCryptoSent,
+        LEDGER_CANISTER_ICP,
+        localUpdates,
+        messageContextsEqual,
+        messagesRead,
+        selectedChatBlockedUsersStore,
+        selectedChatExpandedDeletedMessageStore,
+        selectedThreadDraftMessageStore,
+        subscribe,
+        threadEventsStore,
+        threadsFollowedByMeStore,
+        unconfirmedStore,
+    } from "@client";
+    import { getContext, onMount } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import { randomSentence } from "@src/utils/randomMsg";
+    import AreYouSure from "@src/desktop/shared/AreYouSure.svelte";
+    import Loading from "@src/ui/Loading.svelte";
+    import { flattenTimeline } from "@src/ui/flatChatItems";
+    import ChatEvent from "@src/desktop/features/chats/core/events/ChatEvent.svelte";
+    import ChatEventList from "@src/desktop/features/chats/core/events/ChatEventList.svelte";
+    import CryptoTransferBuilder from "@src/desktop/features/chats/core/CryptoTransferBuilder.svelte";
+    import DropTarget from "@src/desktop/features/chats/core/DropTarget.svelte";
+    import Footer from "@src/desktop/features/chats/core/Footer.svelte";
+    import GiphySelector from "@src/desktop/features/chats/core/GiphySelector.svelte";
+    import MemeBuilder from "@src/desktop/features/chats/core/MemeBuilder.svelte";
+    import P2PSwapContentBuilder from "@src/desktop/features/chats/core/content/P2PSwapContentBuilder.svelte";
+    import PollBuilder from "@src/desktop/features/chats/core/PollBuilder.svelte";
+    import TimelineDate from "@src/desktop/features/chats/core/TimelineDate.svelte";
+    import ThreadHeader from "./ThreadHeader.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        rootEvent: EventWrapper<Message>;
+        chat: ChatSummary;
+        onCloseThread: (id: ChatIdentifier) => void;
+    }
+
+    let { rootEvent, chat, onCloseThread }: Props = $props();
+
+    let chatEventList: ChatEventList | undefined = $state();
+    //@ts-ignore
+    let pollBuilder: PollBuilder = $state();
+    //@ts-ignore
+    let giphySelector: GiphySelector = $state();
+    //@ts-ignore
+    let memeBuilder: MemeBuilder = $state();
+    let creatingPoll = $state(false);
+    let creatingCryptoTransfer: { ledger: string; amount: bigint } | undefined = $state(undefined);
+    let selectingGif = $state(false);
+    let buildingMeme = $state(false);
+    let initialised = $state(false);
+    let messagesDiv: HTMLDivElement | undefined = $state();
+    let messagesDivHeight: number = $state(0);
+    let creatingP2PSwapMessage = $state(false);
+    let removeLinkPreviewDetails: { event: EventWrapper<Message>; url: string } | undefined =
+        $state(undefined);
+
+    let threadRootMessageIndex = $derived(rootEvent?.event?.messageIndex ?? 0);
+    let messageContext = $derived({ chatId: chat.id, threadRootMessageIndex });
+    let threadRootMessage = $derived(rootEvent.event);
+    let blocked = $derived(
+        chat.kind === "direct_chat" && $selectedChatBlockedUsersStore.has(chat.them.userId),
+    );
+    let textContent = $derived($selectedThreadDraftMessageStore?.textContent);
+    let replyingTo = $derived($selectedThreadDraftMessageStore?.replyingTo);
+    let attachment = $derived($selectedThreadDraftMessageStore?.attachment);
+    let editingEvent = $derived($selectedThreadDraftMessageStore?.editingEvent);
+    let canSendAny = $derived(client.canSendMessage(chat.id, "thread"));
+    let canReact = $derived(client.canReactToMessages(chat.id));
+    let atRoot = $derived($threadEventsStore.length === 0 || $threadEventsStore[0]?.index === 0);
+    let events = $derived(atRoot ? [rootEvent, ...$threadEventsStore] : $threadEventsStore);
+    let timeline = $derived(
+        client.groupEvents(
+            [...events].reverse(),
+            $currentUserIdStore,
+            chat.kind === "channel" && chat.public,
+            $selectedChatExpandedDeletedMessageStore,
+        ) as TimelineItem<Message>[],
+    );
+    let items = $derived(flattenTimeline(timeline));
+    let readonly = $derived(client.isChatReadOnly(chat.id));
+    let thread = $derived(rootEvent.event.thread);
+    let loading = $derived(!initialised && $threadEventsStore.length === 0 && thread !== undefined);
+    let isFollowedByMe = $derived(
+        $threadsFollowedByMeStore.get(chat.id)?.has(threadRootMessageIndex) ?? false,
+    );
+
+    onMount(() => {
+        const unsubs = [
+            subscribe("createPoll", onCreatePoll),
+            subscribe("attachGif", onAttachGif),
+            subscribe("tokenTransfer", onTokenTransfer),
+            subscribe("createTestMessages", onCreateTestMessages),
+        ];
+        return () => {
+            unsubs.forEach((u) => u());
+        };
+    });
+
+    function onCreatePoll(ctx: MessageContext) {
+        if (messageContextsEqual(ctx, messageContext)) {
+            createPoll();
+        }
+    }
+
+    function onAttachGif([evContext, search]: [MessageContext, string]) {
+        if (messageContextsEqual(messageContext, evContext)) {
+            attachGif(search);
+        }
+    }
+
+    function onTokenTransfer(args: { context: MessageContext; ledger?: string; amount?: bigint }) {
+        if (messageContextsEqual(messageContext, args.context)) {
+            tokenTransfer(args);
+        }
+    }
+
+    function onCreateTestMessages([ctx, num]: [MessageContext, number]) {
+        if (messageContextsEqual(ctx, messageContext)) {
+            createTestMessages(num);
+        }
+    }
+
+    function createTestMessages(total: number): void {
+        function send(n: number) {
+            if (n === total) return;
+
+            sendMessageWithAttachment(randomSentence(), false, undefined);
+
+            window.setTimeout(() => send(n + 1), 500);
+        }
+
+        send(0);
+    }
+
+    function onSendMessage(detail: [string | undefined, User[], boolean]) {
+        if (!canSendAny) return;
+        let [text, mentioned, blockLevelMarkdown] = detail;
+        if (editingEvent !== undefined) {
+            client
+                .editMessageWithAttachment(
+                    messageContext,
+                    text,
+                    blockLevelMarkdown,
+                    attachment,
+                    editingEvent,
+                )
+                .then((success) => {
+                    if (!success) {
+                        toastStore.showFailureToast(i18nKey("errorEditingMessage"));
+                    }
+                });
+        } else {
+            sendMessageWithAttachment(text, blockLevelMarkdown, attachment, mentioned);
+        }
+    }
+
+    function editEvent(ev: EventWrapper<Message>): void {
+        localUpdates.draftMessages.setEditing(messageContext, ev, $allUsersStore);
+    }
+
+    function sendMessageWithAttachment(
+        textContent: string | undefined,
+        blockLevelMarkdown: boolean,
+        attachment: AttachmentContent | undefined,
+        mentioned: User[] = [],
+    ) {
+        client.sendMessageWithAttachment(
+            messageContext,
+            textContent,
+            blockLevelMarkdown,
+            attachment,
+            mentioned,
+        );
+    }
+
+    function onCancelReply() {
+        localUpdates.draftMessages.setReplyingTo(messageContext, undefined);
+    }
+
+    function clearAttachment() {
+        localUpdates.draftMessages.setAttachment(messageContext, undefined);
+    }
+
+    function cancelEditEvent() {
+        localUpdates.draftMessages.delete(messageContext);
+    }
+
+    function onSetTextContent(txt?: string) {
+        localUpdates.draftMessages.setTextContent(messageContext, txt);
+    }
+
+    function onStartTyping() {
+        if (chat !== undefined) {
+            client.startTyping(chat.id, $currentUserIdStore, threadRootMessageIndex);
+        }
+    }
+
+    function onStopTyping() {
+        if (chat !== undefined) {
+            client.stopTyping(chat.id, $currentUserIdStore, threadRootMessageIndex);
+        }
+    }
+
+    function onFileSelected(content: AttachmentContent) {
+        localUpdates.draftMessages.setAttachment(messageContext, content);
+    }
+
+    function tokenTransfer(detail: { ledger?: string; amount?: bigint }) {
+        creatingCryptoTransfer = {
+            ledger: detail.ledger ?? $lastCryptoSent ?? LEDGER_CANISTER_ICP,
+            amount: detail.amount ?? BigInt(0),
+        };
+    }
+
+    function createPoll() {
+        if (!client.canSendMessage(chat.id, "thread", "poll")) return;
+
+        if (pollBuilder !== undefined) {
+            pollBuilder.resetPoll();
+        }
+        creatingPoll = true;
+    }
+
+    function attachGif(search: string) {
+        selectingGif = true;
+        if (giphySelector !== undefined) {
+            giphySelector.reset(search);
+        }
+    }
+
+    function makeMeme() {
+        buildingMeme = true;
+        if (memeBuilder !== undefined) {
+            memeBuilder.reset();
+        }
+    }
+
+    function replyTo(replyContext: EnhancedReplyContext) {
+        localUpdates.draftMessages.setReplyingTo(messageContext, replyContext);
+    }
+
+    function defaultCryptoTransferReceiver(): string | undefined {
+        return replyingTo?.sender?.userId;
+    }
+
+    function goToMessageIndex(index: number) {
+        chatEventList?.scrollToMessageIndex(messageContext, index, false);
+    }
+
+    function onGoToMessageIndex(detail: { index: number }) {
+        goToMessageIndex(detail.index);
+    }
+
+    function createP2PSwapMessage() {
+        creatingP2PSwapMessage = true;
+    }
+
+    function onRemovePreview(event: EventWrapper<Message>, url: string): void {
+        removeLinkPreviewDetails = {
+            event,
+            url,
+        };
+    }
+
+    function removePreview(yes: boolean): Promise<void> {
+        if (removeLinkPreviewDetails !== undefined && yes) {
+            const { event, url } = removeLinkPreviewDetails;
+
+            client.hideLinkPreview(messageContext, event, url).then((success) => {
+                if (!success) {
+                    toastStore.showFailureToast(i18nKey("errorRemovingLinkPreview"));
+                }
+            });
+        }
+
+        removeLinkPreviewDetails = undefined;
+        return Promise.resolve();
+    }
+
+    function toggleMessageExpansion(ew: EventWrapper<ChatEventType>, expand: boolean) {
+        if (ew.event.kind === "message" && ew.event.content.kind === "proposal_content") {
+            client.toggleProposalFilterMessageExpansion(ew.event.messageId, expand);
+        }
+    }
+
+    function onSendMessageWithContent(content: MessageContent) {
+        client.sendMessageWithContent(messageContext, content, false);
+    }
+</script>
+
+{#if removeLinkPreviewDetails !== undefined}
+    <AreYouSure title={i18nKey("removePreviewQuestion")} action={removePreview} />
+{/if}
+
+<PollBuilder onSend={onSendMessageWithContent} bind:this={pollBuilder} bind:open={creatingPoll} />
+
+{#if creatingP2PSwapMessage}
+    <P2PSwapContentBuilder
+        fromLedger={$lastCryptoSent ?? LEDGER_CANISTER_ICP}
+        {messageContext}
+        onClose={() => (creatingP2PSwapMessage = false)} />
+{/if}
+
+<GiphySelector
+    onSend={onSendMessageWithContent}
+    bind:this={giphySelector}
+    bind:open={selectingGif} />
+
+<MemeBuilder onSend={onSendMessageWithContent} bind:this={memeBuilder} bind:open={buildingMeme} />
+
+{#if creatingCryptoTransfer !== undefined}
+    <CryptoTransferBuilder
+        {chat}
+        ledger={creatingCryptoTransfer.ledger}
+        draftAmount={creatingCryptoTransfer.amount}
+        defaultReceiver={defaultCryptoTransferReceiver()}
+        {messageContext}
+        onClose={() => (creatingCryptoTransfer = undefined)} />
+{/if}
+
+<DropTarget {chat} mode={"thread"} {onFileSelected}>
+    <ThreadHeader {threadRootMessageIndex} {onCloseThread} {rootEvent} chatSummary={chat} />
+
+    {#if loading}
+        <Loading />
+    {:else}
+        <ChatEventList
+            threadRootEvent={rootEvent}
+            rootSelector={"thread-messages"}
+            maintainScroll={false}
+            bind:this={chatEventList}
+            scrollTopButtonEnabled
+            {readonly}
+            unreadMessages={0}
+            firstUnreadMention={undefined}
+            footer
+            visible
+            {items}
+            {chat}
+            bind:initialised
+            bind:messagesDiv
+            bind:messagesDivHeight>
+            {#snippet row(
+                item,
+                { isAccepted, isConfirmed, isFailed, isReadByMe, messageObserver, focusIndex },
+            )}
+                {#if item.kind === "timeline_date"}
+                    <TimelineDate timestamp={item.timestamp} />
+                {:else if item.kind === "event"}
+                    {@const evt = item.event as EventWrapper<Message>}
+                    <ChatEvent
+                        chatId={chat.id}
+                        chatType={chat.kind}
+                        event={evt}
+                        first={item.first}
+                        last={item.last}
+                        me={evt.event.sender === $currentUserIdStore}
+                        accepted={isAccepted($unconfirmedStore, evt)}
+                        confirmed={isConfirmed($unconfirmedStore, evt)}
+                        failed={isFailed($failedMessagesStore, evt)}
+                        readByMe={evt.event.messageId === rootEvent.event.messageId ||
+                            !isFollowedByMe ||
+                            isReadByMe($messagesRead, evt)}
+                        observer={messageObserver}
+                        focused={evt.event.kind === "message" &&
+                            focusIndex === evt.event.messageIndex}
+                        {readonly}
+                        {threadRootMessage}
+                        pinned={false}
+                        supportsEdit={evt.event.messageId !== rootEvent.event.messageId}
+                        supportsReply={evt.event.messageId !== rootEvent.event.messageId}
+                        canPin={client.canPinMessages(chat.id)}
+                        canBlockUsers={client.canBlockUsers(chat.id)}
+                        canDelete={client.canDeleteOtherUsersMessages(chat.id)}
+                        publicGroup={(chat.kind === "group_chat" || chat.kind === "channel") &&
+                            chat.public}
+                        editing={editingEvent === evt}
+                        canSendAny
+                        {canReact}
+                        canInvite={false}
+                        canReplyInThread={false}
+                        collapsed={false}
+                        {onRemovePreview}
+                        {onGoToMessageIndex}
+                        onReplyTo={replyTo}
+                        onEditEvent={() => editEvent(evt)}
+                        onExpandMessage={() => toggleMessageExpansion(evt, true)}
+                        onCollapseMessage={() => toggleMessageExpansion(evt, false)} />
+                {/if}
+            {/snippet}
+        </ChatEventList>
+    {/if}
+
+    {#if !readonly}
+        <Footer
+            {chat}
+            {attachment}
+            {editingEvent}
+            {replyingTo}
+            {textContent}
+            user={$currentUserStore}
+            joining={undefined}
+            preview={false}
+            lapsed={false}
+            mode={"thread"}
+            {blocked}
+            {messageContext}
+            {onCancelReply}
+            onClearAttachment={clearAttachment}
+            onCancelEdit={cancelEditEvent}
+            {onSetTextContent}
+            {onStartTyping}
+            {onStopTyping}
+            {onFileSelected}
+            {onSendMessage}
+            onAttachGif={attachGif}
+            onMakeMeme={makeMeme}
+            onTokenTransfer={tokenTransfer}
+            onCreateP2PSwapMessage={createP2PSwapMessage}
+            onCreatePoll={createPoll} />
+    {/if}
+</DropTarget>
diff --git a/frontend/app/src/desktop/features/chats/thread/ThreadHeader.svelte b/frontend/app/src/desktop/features/chats/thread/ThreadHeader.svelte
new file mode 100644
index 0000000000..01f8966549
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/thread/ThreadHeader.svelte
@@ -0,0 +1,149 @@
+<script lang="ts">
+    import type {
+        ChatIdentifier,
+        ChatSummary,
+        EventWrapper,
+        Message,
+        OpenChat,
+        TypersByKey,
+    } from "@client";
+    import {
+        allUsersStore,
+        AvatarSize,
+        byContext,
+        iconSize,
+        mobileWidth,
+        selectedCommunitySummaryStore,
+        UserStatus,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import ArrowLeft from "svelte-material-icons/ArrowLeft.svelte";
+    import ArrowRight from "svelte-material-icons/ArrowRight.svelte";
+    import Close from "svelte-material-icons/Close.svelte";
+    import { rtlStore } from "@src/stores/rtl";
+    import { now } from "@src/stores/time";
+    import Avatar from "@src/desktop/shared/Avatar.svelte";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import SectionHeader from "@src/desktop/shared/SectionHeader.svelte";
+    import Typing from "@src/ui/Typing.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        chatSummary: ChatSummary;
+        rootEvent: EventWrapper<Message>;
+        threadRootMessageIndex: number;
+        onCloseThread: (id: ChatIdentifier) => void;
+    }
+
+    let { chatSummary, rootEvent, threadRootMessageIndex, onCloseThread }: Props = $props();
+
+    function close() {
+        onCloseThread(chatSummary.id);
+    }
+
+    function normaliseChatSummary(_now: number, chatSummary: ChatSummary, typing: TypersByKey) {
+        const someoneTyping = client.getTypingString(
+            $_,
+            $allUsersStore,
+            { chatId: chatSummary.id, threadRootMessageIndex },
+            typing,
+        );
+
+        const msgTxt = rootEvent ? client.getContentAsText($_, rootEvent.event.content) : "";
+        const subtext =
+            someoneTyping ?? ($mobileWidth ? `${$_("thread.title")}: ${msgTxt}` : msgTxt);
+        if (chatSummary.kind === "direct_chat") {
+            return {
+                title: $mobileWidth
+                    ? $allUsersStore.get(chatSummary.them.userId)?.username
+                    : $_("thread.title"),
+                avatarUrl: client.userAvatarUrl($allUsersStore.get(chatSummary.them.userId)),
+                userId: chatSummary.them.userId,
+                subtext,
+                typing: someoneTyping !== undefined,
+            };
+        }
+        return {
+            title: $mobileWidth ? chatSummary.name : $_("thread.title"),
+            userStatus: UserStatus.None,
+            avatarUrl: client.groupAvatarUrl(chatSummary, $selectedCommunitySummaryStore),
+            userId: undefined,
+            subtext,
+            typing: someoneTyping !== undefined,
+        };
+    }
+
+    function onKeyDown(ev: KeyboardEvent) {
+        if (ev.key === "Escape") {
+            if (!document.getElementById("portal-element")) {
+                close();
+            }
+        }
+    }
+    let chat = $derived(normaliseChatSummary($now, chatSummary, $byContext));
+</script>
+
+<svelte:window onkeydown={onKeyDown} />
+
+<SectionHeader gap flush shadow>
+    <div class="avatar">
+        <Avatar
+            statusBorder={"var(--section-bg)"}
+            showStatus
+            userId={chat.userId}
+            url={chat.avatarUrl}
+            size={AvatarSize.Default} />
+    </div>
+    <div class="chat-details">
+        <div class="chat-name" title={chat.title}>
+            {chat.title}
+        </div>
+        <div class="chat-subtext" title={chat.subtext}>
+            {#if chat.typing}
+                {chat.subtext} <Typing />
+            {:else}
+                <Markdown text={chat.subtext} oneLine suppressLinks />
+            {/if}
+        </div>
+    </div>
+    <div class="close" onclick={close}>
+        <HoverIcon>
+            {#if $mobileWidth}
+                {#if $rtlStore}
+                    <ArrowRight size={$iconSize} color={"var(--icon-txt)"} />
+                {:else}
+                    <ArrowLeft size={$iconSize} color={"var(--icon-txt)"} />
+                {/if}
+            {:else}
+                <Close size={$iconSize} color={"var(--icon-txt)"} />
+            {/if}
+        </HoverIcon>
+    </div>
+</SectionHeader>
+
+<style lang="scss">
+    .chat-name {
+        @include font(book, normal, fs-120);
+        @include ellipsis();
+        margin-bottom: $sp1;
+    }
+
+    .chat-subtext {
+        @include font(book, normal, fs-80);
+        @include ellipsis();
+        color: var(--txt-light);
+    }
+
+    .chat-details {
+        flex: 1;
+        overflow: auto;
+        padding: 0 $sp2;
+    }
+
+    .avatar {
+        flex: 0 0 55px;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/thread/ThreadPreview.svelte b/frontend/app/src/desktop/features/chats/thread/ThreadPreview.svelte
new file mode 100644
index 0000000000..a0350e6a6c
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/thread/ThreadPreview.svelte
@@ -0,0 +1,348 @@
+<script lang="ts">
+    import Spinner from "@src/desktop/ui/icons/Spinner.svelte";
+    import Tooltip from "@src/desktop/ui/tooltip/Tooltip.svelte";
+    import { toastStore } from "@src/stores/toast";
+    import {
+        allUsersStore,
+        AvatarSize,
+        chatListScopeStore,
+        chatSummariesStore,
+        currentUserIdStore,
+        type EventWrapper,
+        type Message,
+        messagesRead,
+        type MultiUserChat,
+        OpenChat,
+        routeForChatIdentifier,
+        selectedCommunitySummaryStore,
+        type ThreadPreview,
+    } from "@client";
+    import { navigate } from "@src/utils/navigation";
+    import { getContext, onMount } from "svelte";
+    import { _ } from "svelte-i18n";
+    import EyeOffIcon from "svelte-material-icons/EyeOffOutline.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { pop } from "@src/utils/transition";
+    import Avatar from "@src/desktop/shared/Avatar.svelte";
+    import CollapsibleCard from "@src/desktop/shared/CollapsibleCard.svelte";
+    import LinkButton from "@src/desktop/shared/LinkButton.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import ChatMessage from "@src/desktop/features/chats/core/ChatMessage.svelte";
+    import IntersectionObserverComponent from "@src/desktop/features/chats/core/IntersectionObserver.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        thread: ThreadPreview;
+        observer: IntersectionObserver;
+    }
+
+    let { thread, observer }: Props = $props();
+
+    let unfollowing = $state(false);
+    let missingMessages = $derived(thread.totalReplies - thread.latestReplies.length);
+    let threadRootMessageIndex = $derived(thread.rootMessage.event.messageIndex);
+    let chat = $derived($chatSummariesStore.get(thread.chatId) as MultiUserChat | undefined);
+    let muted = $derived(chat?.membership?.notificationsMuted || false);
+    let syncDetails = $derived(
+        chat?.membership?.latestThreads?.find(
+            (t) => t.threadRootMessageIndex === threadRootMessageIndex,
+        ),
+    );
+    let unreadCount = $derived(
+        syncDetails
+            ? client.unreadThreadMessageCount(
+                  thread.chatId,
+                  threadRootMessageIndex,
+                  syncDetails.latestMessageIndex,
+              )
+            : 0,
+    );
+    let chatData = $derived({
+        name: chat?.name,
+        avatarUrl: client.groupAvatarUrl(chat, $selectedCommunitySummaryStore),
+    });
+
+    onMount(() => {
+        return messagesRead.subscribe(() => {
+            if (syncDetails !== undefined) {
+                unreadCount = client.unreadThreadMessageCount(
+                    thread.chatId,
+                    threadRootMessageIndex,
+                    syncDetails.latestMessageIndex,
+                );
+            }
+        });
+    });
+
+    let grouped = $derived(client.groupBySender(thread.latestReplies));
+
+    let open = $state(false);
+
+    function lastMessageIndex(events: EventWrapper<Message>[]): number | undefined {
+        for (let i = events.length - 1; i >= 0; i--) {
+            const evt = events[i].event;
+            if (evt.kind === "message") {
+                return evt.messageIndex;
+            }
+        }
+        return undefined;
+    }
+
+    function isIntersecting() {
+        // if we can see *all* of the unread messages in this thread, then mark it as read.
+        if (unreadCount > 0 && unreadCount < thread.latestReplies.length + 1) {
+            const lastMsgIdx = lastMessageIndex(thread.latestReplies);
+            if (lastMsgIdx !== undefined && chat !== undefined) {
+                client.markThreadRead(chat.id, threadRootMessageIndex, lastMsgIdx);
+            }
+        }
+    }
+
+    function selectThread() {
+        navigate(
+            `${routeForChatIdentifier($chatListScopeStore.kind, thread.chatId)}/${
+                thread.rootMessage.event.messageIndex
+            }?open=true`,
+        );
+    }
+
+    function unfollow(e: Event) {
+        e.preventDefault();
+        e.stopPropagation();
+        unfollowing = true;
+        client
+            .followThread(thread.chatId, thread.rootMessage.event, false)
+            .then((success) => {
+                if (!success) {
+                    toastStore.showFailureToast(i18nKey("unfollowThreadFailed"));
+                    unfollowing = false;
+                }
+            })
+            .catch(() => (unfollowing = false));
+    }
+</script>
+
+{#if chat !== undefined}
+    <div class="wrapper">
+        <CollapsibleCard
+            onToggle={() => (open = !open)}
+            {open}
+            headerText={i18nKey("userInfoHeader")}>
+            {#snippet titleSlot()}
+                <div class="header">
+                    <div class="avatar">
+                        <Avatar url={chatData.avatarUrl} size={AvatarSize.Default} />
+                    </div>
+                    <div class="details">
+                        <div class="title-and-link">
+                            <h4 class="title">
+                                {(chat.kind === "group_chat" || chat.kind === "channel") &&
+                                    chat.name}
+                            </h4>
+                            <LinkButton underline="hover" onClick={selectThread}
+                                ><Translatable
+                                    resourceKey={i18nKey("thread.open")} />&#8594;</LinkButton>
+                        </div>
+                        <div class="root-msg">
+                            <Markdown
+                                text={client.getContentAsText($_, thread.rootMessage.event.content)}
+                                oneLine
+                                suppressLinks />
+                        </div>
+                    </div>
+                    <Tooltip position={"bottom"} align={"middle"}>
+                        <!-- svelte-ignore a11y_no_static_element_interactions -->
+                        <!-- svelte-ignore a11y_click_events_have_key_events -->
+                        <div onclick={unfollow} class="unfollow">
+                            {#if !unfollowing}
+                                <EyeOffIcon size={"1.2em"} color={"var(--icon-inverted-txt)"} />
+                            {:else}
+                                <Spinner
+                                    backgroundColour={"rgba(0,0,0,0.3)"}
+                                    foregroundColour={"var(--button-spinner)"} />
+                            {/if}
+                        </div>
+                        {#snippet popupTemplate()}
+                            <Translatable resourceKey={i18nKey("unfollowThread")}></Translatable>
+                        {/snippet}
+                    </Tooltip>
+                    {#if unreadCount > 0}
+                        <div
+                            in:pop={{ duration: 1500 }}
+                            title={$_("chatSummary.unread", {
+                                values: { count: unreadCount.toString() },
+                            })}
+                            class:muted
+                            class="unread">
+                            {unreadCount > 999 ? "999+" : unreadCount}
+                        </div>
+                    {/if}
+                </div>
+            {/snippet}
+            <IntersectionObserverComponent onIntersecting={isIntersecting}>
+                <div class="body">
+                    <div class="root-msg">
+                        <ChatMessage
+                            sender={$allUsersStore.get(thread.rootMessage.event.sender)}
+                            focused={false}
+                            {observer}
+                            accepted
+                            confirmed
+                            failed={false}
+                            senderTyping={false}
+                            readByMe
+                            chatId={thread.chatId}
+                            chatType={chat.kind}
+                            me={thread.rootMessage.event.sender === $currentUserIdStore}
+                            first
+                            last
+                            readonly
+                            threadRootMessage={thread.rootMessage.event}
+                            pinned={false}
+                            supportsEdit={false}
+                            supportsReply={false}
+                            canPin={false}
+                            canBlockUsers={false}
+                            canDelete={false}
+                            canQuoteReply={false}
+                            canReact={false}
+                            canStartThread={false}
+                            publicGroup={chat.kind === "group_chat" && chat.public}
+                            editing={false}
+                            eventIndex={thread.rootMessage.index}
+                            timestamp={thread.rootMessage.timestamp}
+                            expiresAt={thread.rootMessage.expiresAt}
+                            dateFormatter={(date) => client.toDatetimeString(date)}
+                            msg={thread.rootMessage.event}
+                            senderContext={thread.rootMessage.event.senderContext} />
+                    </div>
+                    {#if missingMessages > 0}
+                        <div class="separator">
+                            <Translatable
+                                resourceKey={i18nKey("thread.moreMessages", {
+                                    number: missingMessages.toString(),
+                                })} />
+                        </div>
+                    {/if}
+                    {#each grouped as userGroup}
+                        {#each userGroup as evt, i (evt.event.messageId)}
+                            <ChatMessage
+                                sender={$allUsersStore.get(evt.event.sender)}
+                                focused={false}
+                                {observer}
+                                accepted
+                                confirmed
+                                failed={false}
+                                senderTyping={false}
+                                readByMe
+                                chatId={thread.chatId}
+                                chatType={chat.kind}
+                                me={evt.event.sender === $currentUserIdStore}
+                                first={i === 0}
+                                last={i === userGroup.length - 1}
+                                readonly
+                                threadRootMessage={thread.rootMessage.event}
+                                pinned={false}
+                                supportsEdit={false}
+                                supportsReply={false}
+                                canPin={false}
+                                canBlockUsers={false}
+                                canDelete={false}
+                                canQuoteReply={false}
+                                canReact={false}
+                                canStartThread={false}
+                                publicGroup={chat.kind === "group_chat" && chat.public}
+                                editing={false}
+                                eventIndex={evt.index}
+                                timestamp={evt.timestamp}
+                                expiresAt={evt.expiresAt}
+                                dateFormatter={(date) => client.toDatetimeString(date)}
+                                msg={evt.event}
+                                senderContext={evt.event.senderContext} />
+                        {/each}
+                    {/each}
+                    <LinkButton underline="hover" onClick={selectThread}
+                        ><Translatable
+                            resourceKey={i18nKey("thread.openThread")} />&#8594;</LinkButton>
+                </div>
+            </IntersectionObserverComponent>
+        </CollapsibleCard>
+    </div>
+{/if}
+
+<style lang="scss">
+    :global(.threads .link-button) {
+        color: var(--timeline-txt);
+        @include font(book, normal, fs-90);
+        display: block;
+        text-align: right;
+    }
+
+    :global(.threads .card.bordered) {
+        border: none;
+        border-top: 1px solid var(--bd);
+    }
+
+    .wrapper {
+        background-color: var(--thread-preview-bg);
+    }
+    .separator {
+        padding: $sp2;
+        background-color: var(--timeline-bg);
+        margin: $sp4 auto;
+        text-align: center;
+        color: var(--timeline-txt);
+        @include font(book, normal, fs-90);
+    }
+    .header {
+        position: relative;
+        display: flex;
+        align-items: center;
+        width: calc(100% - 24px);
+        gap: $sp4;
+
+        @include mobile() {
+            gap: $sp3;
+        }
+    }
+    .avatar {
+        flex: 0 0 40px;
+    }
+    .details {
+        flex: 1;
+        overflow: hidden;
+
+        .title-and-link {
+            display: flex;
+            gap: $sp3;
+            align-items: center;
+            margin-bottom: $sp1;
+        }
+
+        .title {
+            @include font(book, normal, fs-100);
+            color: var(--txt);
+            @include ellipsis();
+        }
+
+        .root-msg {
+            color: var(--txt-light);
+            @include font(book, normal, fs-80);
+        }
+    }
+    .unread {
+        @include unread();
+        margin: 0 $sp2;
+
+        &.muted {
+            background-color: var(--unread-mute);
+            text-shadow: none;
+        }
+    }
+
+    .unfollow {
+        padding: 0 $sp2;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chats/thread/ThreadPreviews.svelte b/frontend/app/src/desktop/features/chats/thread/ThreadPreviews.svelte
new file mode 100644
index 0000000000..6405ad69da
--- /dev/null
+++ b/frontend/app/src/desktop/features/chats/thread/ThreadPreviews.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import { debouncedDerived, threadsByChatStore, type OpenChat } from "@client";
+    import { getContext } from "svelte";
+    import Loading from "@src/ui/Loading.svelte";
+    import { default as ThreadPreviewComponent } from "./ThreadPreview.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    let observer: IntersectionObserver = new IntersectionObserver(() => {});
+    let loading = $state(false);
+    let initialised = $state(false);
+
+    let threads = $derived.by(
+        debouncedDerived(() => [$threadsByChatStore], loadThreadPreviews, 300, []),
+    );
+
+    async function loadThreadPreviews() {
+        loading = true;
+        try {
+            return client.threadPreviews($threadsByChatStore);
+        } catch (_) {
+            toastStore.showFailureToast(i18nKey("thread.previewFailure"));
+            return [];
+        } finally {
+            loading = false;
+        }
+    }
+</script>
+
+<div class="threads">
+    {#if loading && !initialised}
+        <Loading />
+    {:else}
+        {#each threads as thread (`${thread.rootMessage.index}_${thread.rootMessage.event.messageId}`)}
+            <ThreadPreviewComponent {observer} {thread} />
+        {/each}
+    {/if}
+</div>
+
+<style lang="scss">
+    .threads {
+        height: 100%;
+        overflow-x: hidden;
+        padding: 0 $sp4;
+        @include nice-scrollbar();
+        @include mobile() {
+            padding: 0 toRem(10);
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/chit/ChitEarned.svelte b/frontend/app/src/desktop/features/chit/ChitEarned.svelte
new file mode 100644
index 0000000000..961be26dd7
--- /dev/null
+++ b/frontend/app/src/desktop/features/chit/ChitEarned.svelte
@@ -0,0 +1,232 @@
+<script lang="ts">
+    import { shakeElements } from "@src/utils/shake";
+    import { subscribe, type ChitEvent, type OpenChat } from "@client";
+    import { getContext, onMount } from "svelte";
+    import { Confetti } from "svelte-confetti";
+    import { _ } from "svelte-i18n";
+    import { Spring, Tween } from "svelte/motion";
+    import SpinningToken from "@src/desktop/ui/icons/SpinningToken.svelte";
+
+    const OFF_SCREEN_OPACITY = 0.0;
+    const SHOW_DURATION = 3000;
+    const SLIDE_IN_DURATION = 400;
+    const TWEEN_DURATION = 300;
+    const LONG_DURATION = 10_000;
+
+    const client = getContext<OpenChat>("client");
+    let confetti = $state(false);
+    let dimensions = getDimension();
+    let ypos = new Spring(dimensions.height + 100, { damping: 0.4, stiffness: 0.2 });
+    let opacity = new Tween(OFF_SCREEN_OPACITY, { duration: TWEEN_DURATION });
+    let msg = new Tween({ scale: 0, opacity: 1 }, { duration: TWEEN_DURATION });
+    let left = $state(dimensions.width / 2);
+    let amount = $state(0);
+    let labels: string[] = $state([]);
+    let active = $state(false);
+    let imageUrl = $state("/assets/chit.svg");
+    let maxStreak = $state(false);
+
+    function trigger(events: ChitEvent[]) {
+        maxStreak = false;
+        amount = events.reduce((total, chit) => total + chit.amount, 0);
+        labels = events.reduce((labels, c) => {
+            if (c.reason.kind === "achievement_unlocked") {
+                if (c.reason.type === "streak_365") {
+                    maxStreak = true;
+                    imageUrl = "/assets/max_streak.svg";
+                }
+                labels.push($_(`learnToEarn.${c.reason.type}`));
+            }
+            if (c.reason.kind === "external_achievement_unlocked") {
+                labels.push(c.reason.name);
+            }
+            return labels;
+        }, [] as string[]);
+        const showDuration = maxStreak ? LONG_DURATION : SHOW_DURATION;
+        ypos.target = dimensions.height / 2;
+        opacity.target = 1;
+        active = true;
+        if (maxStreak) {
+            setTimeout(() => {
+                shakeElements(
+                    [
+                        ".message-wrapper",
+                        ".chat-summary",
+                        ".avatar",
+                        "svg",
+                        ".date-label",
+                        ".icon",
+                        ".section-header",
+                        ".message-entry",
+                        ".section-selector",
+                        ".input-wrapper",
+                        ".legend",
+                        ".chat-list",
+                        ".communities .card",
+                    ],
+                    {
+                        duration: showDuration,
+                        maxIntensity: 50,
+                    },
+                );
+            }, 100);
+        }
+        window.setTimeout(() => {
+            confetti = true;
+            msg.target = { scale: 1, opacity: 1 };
+            window.setTimeout(() => {
+                confetti = false;
+                opacity.target = OFF_SCREEN_OPACITY;
+                msg.target = { scale: 0, opacity: 1 };
+                window.setTimeout(reset, TWEEN_DURATION);
+            }, showDuration);
+        }, SLIDE_IN_DURATION);
+
+        // update the backend so we don't get notified again
+        client.markAchievementsSeen();
+    }
+
+    function reset() {
+        dimensions = getDimension();
+        left = dimensions.width / 2;
+        ypos.set(dimensions.height + 100);
+        opacity.set(OFF_SCREEN_OPACITY, { duration: 0 });
+        msg.set({ scale: 0, opacity: 1 }, { duration: 0 });
+        confetti = false;
+        active = false;
+    }
+
+    function getDimension() {
+        return {
+            height: window.innerHeight,
+            width: window.innerWidth,
+        };
+    }
+
+    onMount(() => {
+        // - Useful for testing
+        // trigger([
+        //     {
+        //         amount: 100_000,
+        //         timestamp: BigInt(Date.now()),
+        //         reason: {
+        //             kind: "achievement_unlocked",
+        //             type: "streak_365",
+        //         },
+        //     },
+        // ]);
+        return subscribe("chitEarned", trigger);
+    });
+</script>
+
+<svelte:window on:resize={reset} />
+
+<div class="overlay" class:active>
+    <div
+        class="wrapper"
+        style={`top: ${ypos.current}px; left: ${left}px; opacity: ${opacity.current}`}>
+        {#if confetti}
+            <div class="confetti">
+                <Confetti
+                    amount={100}
+                    x={[-1.5, 1.5]}
+                    y={[-1.5, 1.5]}
+                    size={20}
+                    colorArray={["url(/assets/chit.svg)"]} />
+            </div>
+        {/if}
+        <div class="coin">
+            <SpinningToken
+                spin
+                mirror={false}
+                size={maxStreak ? "extra-large" : "large"}
+                logo={imageUrl} />
+        </div>
+        <div
+            class="details"
+            style={`transform: scale(${msg.current.scale}); opacity: ${msg.current.opacity}`}>
+            <div class="chit">
+                {`+${amount.toLocaleString()} CHIT`}
+            </div>
+            <div class="msgs">
+                {#each labels as label}
+                    <div class="msg">{label}</div>
+                {/each}
+            </div>
+        </div>
+    </div>
+</div>
+
+<style lang="scss">
+    .wrapper {
+        position: absolute;
+        left: 500px;
+        @include z-index("coin");
+        transform: translate(-50%, -50%);
+        display: flex;
+        flex-direction: column;
+        gap: $sp4;
+        align-items: center;
+        padding: $sp8;
+        backdrop-filter: blur(10px);
+        background: var(--modal-bg);
+        border: var(--modal-bd);
+        border-radius: var(--modal-rd);
+        box-shadow: var(--modal-sh);
+
+        @include mobile() {
+            width: calc(100% - 80px);
+            padding: $sp6;
+        }
+    }
+
+    .confetti {
+        position: absolute;
+        @include z-index("coin");
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    .chit {
+        border-radius: var(--rd);
+        background: var(--button-bg);
+        color: var(--button-txt);
+        width: fit-content;
+        padding: $sp2 $sp3;
+    }
+
+    .details {
+        display: flex;
+        flex-direction: column;
+        gap: $sp3;
+        align-items: center;
+    }
+
+    .msgs,
+    .msg {
+        text-align: center;
+        @include mobile() {
+            @include font(book, normal, fs-90);
+        }
+    }
+
+    .overlay {
+        @include z-index("chit");
+        position: fixed;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        overflow: hidden;
+        pointer-events: none;
+        transition: backdrop-filter 300ms ease-in-out;
+
+        &.active {
+            backdrop-filter: saturate(0.3);
+        }
+    }
+</style>
diff --git a/frontend/app/src/components/home/ChitHallOfFame.svelte b/frontend/app/src/desktop/features/chit/ChitHallOfFame.svelte
similarity index 96%
rename from frontend/app/src/components/home/ChitHallOfFame.svelte
rename to frontend/app/src/desktop/features/chit/ChitHallOfFame.svelte
index 37f82f7f02..f40dd1dbef 100644
--- a/frontend/app/src/components/home/ChitHallOfFame.svelte
+++ b/frontend/app/src/desktop/features/chit/ChitHallOfFame.svelte
@@ -2,13 +2,13 @@
     import { type ChitUserBalance, mobileWidth, type OpenChat } from "@client";
     import { getContext, onMount, tick } from "svelte";
     import { _ } from "svelte-i18n";
-    import { isTouchDevice } from "../../utils/devices";
-    import Button from "../Button.svelte";
-    import ButtonGroup from "../ButtonGroup.svelte";
-    import HoverIcon from "../HoverIcon.svelte";
-    import ModalContent from "../ModalContent.svelte";
+    import { isTouchDevice } from "@src/utils/devices";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
     import Invaders from "./Invaders.svelte";
-    import LighteningBolt from "./nav/LighteningBolt.svelte";
+    import LighteningBolt from "@src/desktop/features/nav/LighteningBolt.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/components/home/DailyChitModal.svelte b/frontend/app/src/desktop/features/chit/DailyChitModal.svelte
similarity index 91%
rename from frontend/app/src/components/home/DailyChitModal.svelte
rename to frontend/app/src/desktop/features/chit/DailyChitModal.svelte
index 72194e73d5..6c5f85dad1 100644
--- a/frontend/app/src/components/home/DailyChitModal.svelte
+++ b/frontend/app/src/desktop/features/chit/DailyChitModal.svelte
@@ -1,26 +1,26 @@
 <script lang="ts">
-    import InfoIcon from "@src/components/InfoIcon.svelte";
+    import InfoIcon from "@src/desktop/shared/InfoIcon.svelte";
     import { chitStateStore, iconSize, type OpenChat } from "@client";
     import { getContext, tick } from "svelte";
     import { Confetti } from "svelte-confetti";
     import ShieldHalfFull from "svelte-material-icons/ShieldHalfFull.svelte";
     import TrophyOutline from "svelte-material-icons/TrophyOutline.svelte";
     import { fade } from "svelte/transition";
-    import { i18nKey } from "../../i18n/i18n";
-    import { now500 } from "../../stores/time";
-    import { toastStore } from "../../stores/toast";
-    import Button from "../Button.svelte";
-    import ButtonGroup from "../ButtonGroup.svelte";
-    import HoverIcon from "../HoverIcon.svelte";
-    import FancyLoader from "../icons/FancyLoader.svelte";
-    import Link from "../Link.svelte";
-    import ModalContent from "../ModalContent.svelte";
-    import Progress from "../Progress.svelte";
-    import Translatable from "../Translatable.svelte";
-    import StreakInsuranceBuy from "./insurance/StreakInsuranceBuy.svelte";
-    import ChitBalance from "./profile/ChitBalance.svelte";
-    import LearnToEarn from "./profile/LearnToEarn.svelte";
-    import Streak from "./profile/Streak.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { now500 } from "@src/stores/time";
+    import { toastStore } from "@src/stores/toast";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import FancyLoader from "@src/desktop/ui/icons/FancyLoader.svelte";
+    import Link from "@src/desktop/shared/Link.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Progress from "@src/desktop/shared/Progress.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import StreakInsuranceBuy from "@src/desktop/features/access/insurance/StreakInsuranceBuy.svelte";
+    import ChitBalance from "@src/desktop/features/profile/ChitBalance.svelte";
+    import LearnToEarn from "@src/desktop/features/profile/LearnToEarn.svelte";
+    import Streak from "@src/desktop/features/profile/Streak.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/components/home/Invaders.svelte b/frontend/app/src/desktop/features/chit/Invaders.svelte
similarity index 99%
rename from frontend/app/src/components/home/Invaders.svelte
rename to frontend/app/src/desktop/features/chit/Invaders.svelte
index b79595c4b3..c200565f8e 100644
--- a/frontend/app/src/components/home/Invaders.svelte
+++ b/frontend/app/src/desktop/features/chit/Invaders.svelte
@@ -2,8 +2,8 @@
     import { mobileWidth } from "@client";
     import { onMount, tick } from "svelte";
     import { _ } from "svelte-i18n";
-    import { isTouchDevice } from "../../utils/devices";
-    import Button from "../Button.svelte";
+    import { isTouchDevice } from "@src/utils/devices";
+    import Button from "@src/ui/Button.svelte";
 
     let canvas: HTMLCanvasElement;
 
diff --git a/frontend/app/src/components/landingpages/ArchitecturePage.svelte b/frontend/app/src/desktop/features/landing/ArchitecturePage.svelte
similarity index 99%
rename from frontend/app/src/components/landingpages/ArchitecturePage.svelte
rename to frontend/app/src/desktop/features/landing/ArchitecturePage.svelte
index de3dc16926..1925062031 100644
--- a/frontend/app/src/components/landingpages/ArchitecturePage.svelte
+++ b/frontend/app/src/desktop/features/landing/ArchitecturePage.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
     import { locationStore, mobileWidth, querystringStore } from "@client";
     import Copy from "svelte-material-icons/ContentCopy.svelte";
-    import { copyToClipboard, scrollToSection } from "../../utils/urls";
-    import ArrowLink from "../ArrowLink.svelte";
-    import CollapsibleCard from "../CollapsibleCard.svelte";
-    import ModalContent from "../ModalContent.svelte";
-    import Overlay from "../Overlay.svelte";
+    import { copyToClipboard, scrollToSection } from "@src/utils/urls";
+    import ArrowLink from "./ArrowLink.svelte";
+    import CollapsibleCard from "@src/desktop/shared/CollapsibleCard.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
     import ExternalLink from "./ExternalLink.svelte";
     import HashLink from "./HashLink.svelte";
     import HashLinkTarget from "./HashLinkTarget.svelte";
diff --git a/frontend/app/src/desktop/features/landing/ArrowLink.svelte b/frontend/app/src/desktop/features/landing/ArrowLink.svelte
new file mode 100644
index 0000000000..bc19bfb297
--- /dev/null
+++ b/frontend/app/src/desktop/features/landing/ArrowLink.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import Arrow from "@src/ui/Arrow.svelte";
+
+    interface Props {
+        url: string;
+        color?: string;
+        target?: string | undefined;
+        children?: Snippet;
+    }
+
+    let { url, color = "#7E52FF", target = undefined, children }: Props = $props();
+</script>
+
+<a class="link" href={url} {target}>
+    {@render children?.()}
+    <div class="arrow">
+        <Arrow {color} />
+    </div>
+</a>
+
+<style lang="scss">
+    a {
+        position: relative;
+        @include font(bold, normal, fs-100);
+        color: inherit;
+        text-decoration: none;
+        display: flex;
+        align-items: center;
+        gap: $sp3;
+        transition: color 250ms ease-in-out;
+        white-space: nowrap;
+
+        .arrow {
+            transition: flex 250ms ease-in-out;
+            flex: 0 0 toRem(16);
+            text-align: end;
+        }
+
+        @media (hover: hover) {
+            &:hover {
+                text-decoration: none;
+                color: var(--landing-txt-light);
+
+                .arrow {
+                    flex: 0 0 toRem(24);
+                }
+            }
+        }
+    }
+</style>
diff --git a/frontend/app/src/components/landingpages/BlogPage.svelte b/frontend/app/src/desktop/features/landing/BlogPage.svelte
similarity index 79%
rename from frontend/app/src/components/landingpages/BlogPage.svelte
rename to frontend/app/src/desktop/features/landing/BlogPage.svelte
index f63a66069e..a7b85aceb8 100644
--- a/frontend/app/src/components/landingpages/BlogPage.svelte
+++ b/frontend/app/src/desktop/features/landing/BlogPage.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import Headline from "./Headline.svelte";
-    import BlogSummary from "./blog/BlogSummary.svelte";
-    import { type BlogPostInfo, postsBySlug } from "./blog/posts";
+    import BlogSummary from "@src/desktop/features/landing/blog/BlogSummary.svelte";
+    import { type BlogPostInfo, postsBySlug } from "@src/desktop/features/landing/blog/posts";
 
     function sortByDate(a: BlogPostInfo, b: BlogPostInfo): number {
         return b.date.getTime() - a.date.getTime();
diff --git a/frontend/app/src/components/landingpages/BlogPostPage.svelte b/frontend/app/src/desktop/features/landing/BlogPostPage.svelte
similarity index 89%
rename from frontend/app/src/components/landingpages/BlogPostPage.svelte
rename to frontend/app/src/desktop/features/landing/BlogPostPage.svelte
index 607a8df5f3..01890d835c 100644
--- a/frontend/app/src/components/landingpages/BlogPostPage.svelte
+++ b/frontend/app/src/desktop/features/landing/BlogPostPage.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-    import BlogPost from "./blog/BlogPost.svelte";
-    import { postsBySlug } from "./blog/posts";
+    import BlogPost from "@src/desktop/features/landing/blog/BlogPost.svelte";
+    import { postsBySlug } from "@src/desktop/features/landing/blog/posts";
 
     interface Props {
         slug: string;
diff --git a/frontend/app/src/components/landingpages/Brag.svelte b/frontend/app/src/desktop/features/landing/Brag.svelte
similarity index 100%
rename from frontend/app/src/components/landingpages/Brag.svelte
rename to frontend/app/src/desktop/features/landing/Brag.svelte
diff --git a/frontend/app/src/components/landingpages/BragBox.svelte b/frontend/app/src/desktop/features/landing/BragBox.svelte
similarity index 98%
rename from frontend/app/src/components/landingpages/BragBox.svelte
rename to frontend/app/src/desktop/features/landing/BragBox.svelte
index 31ebb2bb85..951981749e 100644
--- a/frontend/app/src/components/landingpages/BragBox.svelte
+++ b/frontend/app/src/desktop/features/landing/BragBox.svelte
@@ -2,7 +2,7 @@
     import { onMount } from "svelte";
     import Brag from "./Brag.svelte";
     import Section from "./Section.svelte";
-    import { currentTheme } from "../../theme/themes";
+    import { currentTheme } from "@src/theme/themes";
 
     let isFirefox = navigator.userAgent.indexOf("Firefox") >= 0;
     let bgPath = $derived(
diff --git a/frontend/app/src/components/landingpages/Content.svelte b/frontend/app/src/desktop/features/landing/Content.svelte
similarity index 100%
rename from frontend/app/src/components/landingpages/Content.svelte
rename to frontend/app/src/desktop/features/landing/Content.svelte
diff --git a/frontend/app/src/desktop/features/landing/DiamondContent.svelte b/frontend/app/src/desktop/features/landing/DiamondContent.svelte
new file mode 100644
index 0000000000..595c9e0066
--- /dev/null
+++ b/frontend/app/src/desktop/features/landing/DiamondContent.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+    import Features from "@src/desktop/features/upgrade/Features.svelte";
+</script>
+
+<Features landing isDiamond={false} canExtend={false} />
+
+<style lang="scss">
+</style>
diff --git a/frontend/app/src/components/landingpages/DiamondPage.svelte b/frontend/app/src/desktop/features/landing/DiamondPage.svelte
similarity index 100%
rename from frontend/app/src/components/landingpages/DiamondPage.svelte
rename to frontend/app/src/desktop/features/landing/DiamondPage.svelte
diff --git a/frontend/app/src/components/landingpages/ExternalLink.svelte b/frontend/app/src/desktop/features/landing/ExternalLink.svelte
similarity index 100%
rename from frontend/app/src/components/landingpages/ExternalLink.svelte
rename to frontend/app/src/desktop/features/landing/ExternalLink.svelte
diff --git a/frontend/app/src/components/landingpages/FAQPage.svelte b/frontend/app/src/desktop/features/landing/FAQPage.svelte
similarity index 91%
rename from frontend/app/src/components/landingpages/FAQPage.svelte
rename to frontend/app/src/desktop/features/landing/FAQPage.svelte
index 46826363f4..587a51637d 100644
--- a/frontend/app/src/components/landingpages/FAQPage.svelte
+++ b/frontend/app/src/desktop/features/landing/FAQPage.svelte
@@ -8,11 +8,11 @@
     } from "@client";
     import { _ } from "svelte-i18n";
     import ContentCopy from "svelte-material-icons/ContentCopy.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import { copyToClipboard } from "../../utils/urls";
-    import CollapsibleCard from "../CollapsibleCard.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import Translatable from "../Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { copyToClipboard } from "@src/utils/urls";
+    import CollapsibleCard from "@src/desktop/shared/CollapsibleCard.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
     import Headline from "./Headline.svelte";
 
     let question: Questions | undefined = $state(undefined);
diff --git a/frontend/app/src/components/landingpages/Feature.svelte b/frontend/app/src/desktop/features/landing/Feature.svelte
similarity index 100%
rename from frontend/app/src/components/landingpages/Feature.svelte
rename to frontend/app/src/desktop/features/landing/Feature.svelte
diff --git a/frontend/app/src/components/landingpages/FeaturesPage.svelte b/frontend/app/src/desktop/features/landing/FeaturesPage.svelte
similarity index 98%
rename from frontend/app/src/components/landingpages/FeaturesPage.svelte
rename to frontend/app/src/desktop/features/landing/FeaturesPage.svelte
index 5f62175b2e..b122d99075 100644
--- a/frontend/app/src/components/landingpages/FeaturesPage.svelte
+++ b/frontend/app/src/desktop/features/landing/FeaturesPage.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { communityThemes, currentTheme, themes } from "../../theme/themes";
+    import { communityThemes, currentTheme, themes } from "@src/theme/themes";
     import Feature from "./Feature.svelte";
 
     import { portalState } from "component-lib";
diff --git a/frontend/app/src/components/landingpages/GoogleChart.svelte b/frontend/app/src/desktop/features/landing/GoogleChart.svelte
similarity index 100%
rename from frontend/app/src/components/landingpages/GoogleChart.svelte
rename to frontend/app/src/desktop/features/landing/GoogleChart.svelte
diff --git a/frontend/app/src/components/landingpages/GuidelinesContent.svelte b/frontend/app/src/desktop/features/landing/GuidelinesContent.svelte
similarity index 99%
rename from frontend/app/src/components/landingpages/GuidelinesContent.svelte
rename to frontend/app/src/desktop/features/landing/GuidelinesContent.svelte
index fdc1ecf543..4ed4382797 100644
--- a/frontend/app/src/components/landingpages/GuidelinesContent.svelte
+++ b/frontend/app/src/desktop/features/landing/GuidelinesContent.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
     import { locationStore, mobileWidth } from "@client";
     import Copy from "svelte-material-icons/ContentCopy.svelte";
-    import { copyToClipboard } from "../../utils/urls";
-    import CollapsibleCard from "../CollapsibleCard.svelte";
+    import { copyToClipboard } from "@src/utils/urls";
+    import CollapsibleCard from "@src/desktop/shared/CollapsibleCard.svelte";
 
     interface Props {
         linked?: number | undefined;
diff --git a/frontend/app/src/components/landingpages/GuidelinesPage.svelte b/frontend/app/src/desktop/features/landing/GuidelinesPage.svelte
similarity index 92%
rename from frontend/app/src/components/landingpages/GuidelinesPage.svelte
rename to frontend/app/src/desktop/features/landing/GuidelinesPage.svelte
index c17d9a6585..014faad33e 100644
--- a/frontend/app/src/components/landingpages/GuidelinesPage.svelte
+++ b/frontend/app/src/desktop/features/landing/GuidelinesPage.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { querystringStore } from "@client";
-    import { scrollToSection } from "../../utils/urls";
+    import { scrollToSection } from "@src/utils/urls";
     import GuidelinesContent from "./GuidelinesContent.svelte";
     import Headline from "./Headline.svelte";
 
diff --git a/frontend/app/src/components/landingpages/HashLink.svelte b/frontend/app/src/desktop/features/landing/HashLink.svelte
similarity index 100%
rename from frontend/app/src/components/landingpages/HashLink.svelte
rename to frontend/app/src/desktop/features/landing/HashLink.svelte
diff --git a/frontend/app/src/components/landingpages/HashLinkTarget.svelte b/frontend/app/src/desktop/features/landing/HashLinkTarget.svelte
similarity index 100%
rename from frontend/app/src/components/landingpages/HashLinkTarget.svelte
rename to frontend/app/src/desktop/features/landing/HashLinkTarget.svelte
diff --git a/frontend/app/src/components/landingpages/Header.svelte b/frontend/app/src/desktop/features/landing/Header.svelte
similarity index 90%
rename from frontend/app/src/components/landingpages/Header.svelte
rename to frontend/app/src/desktop/features/landing/Header.svelte
index 01414c9c73..1a1744bd0a 100644
--- a/frontend/app/src/components/landingpages/Header.svelte
+++ b/frontend/app/src/desktop/features/landing/Header.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
     import { iconSize, mobileWidth } from "@client";
-    import { navigate } from "@utils/navigation";
+    import { navigate } from "@src/utils/navigation";
     import Menu from "svelte-material-icons/Menu.svelte";
-    import HoverIcon from "../HoverIcon.svelte";
-    import MenuIcon from "../MenuIcon.svelte";
-    import { postsBySlug } from "./blog/posts";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import MenuIcon from "@src/desktop/shared/MenuIcon.svelte";
+    import { postsBySlug } from "@src/desktop/features/landing/blog/posts";
     import MenuItems from "./MenuItems.svelte";
     import MobileMenuItems from "./MobileMenuItems.svelte";
 
diff --git a/frontend/app/src/components/landingpages/Headline.svelte b/frontend/app/src/desktop/features/landing/Headline.svelte
similarity index 100%
rename from frontend/app/src/components/landingpages/Headline.svelte
rename to frontend/app/src/desktop/features/landing/Headline.svelte
diff --git a/frontend/app/src/components/landingpages/HomePage.svelte b/frontend/app/src/desktop/features/landing/HomePage.svelte
similarity index 94%
rename from frontend/app/src/components/landingpages/HomePage.svelte
rename to frontend/app/src/desktop/features/landing/HomePage.svelte
index 551a498427..2f94c59633 100644
--- a/frontend/app/src/components/landingpages/HomePage.svelte
+++ b/frontend/app/src/desktop/features/landing/HomePage.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { querystringStore } from "@client";
     import { onMount } from "svelte";
-    import ArrowLink from "../ArrowLink.svelte";
-    import Overlay from "../Overlay.svelte";
-    import SignInWithMagicLink from "../SignInWithMagicLink.svelte";
+    import ArrowLink from "./ArrowLink.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import SignInWithMagicLink from "./SignInWithMagicLink.svelte";
     import BragBox from "./BragBox.svelte";
     import Intro from "./Intro.svelte";
     import Roadmap from "./RoadmapOverview.svelte";
diff --git a/frontend/app/src/components/landingpages/HostedLandingPage.svelte b/frontend/app/src/desktop/features/landing/HostedLandingPage.svelte
similarity index 91%
rename from frontend/app/src/components/landingpages/HostedLandingPage.svelte
rename to frontend/app/src/desktop/features/landing/HostedLandingPage.svelte
index 13bc8f4430..8769796bf4 100644
--- a/frontend/app/src/components/landingpages/HostedLandingPage.svelte
+++ b/frontend/app/src/desktop/features/landing/HostedLandingPage.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     // This is meant to be shown when OpenChat is being hosted in an iframe
-    import FancyLoader from "../icons/FancyLoader.svelte";
+    import FancyLoader from "@src/desktop/ui/icons/FancyLoader.svelte";
     import Launch from "./Launch.svelte";
 </script>
 
diff --git a/frontend/app/src/components/landingpages/InternetIdentityLogo.svelte b/frontend/app/src/desktop/features/landing/InternetIdentityLogo.svelte
similarity index 100%
rename from frontend/app/src/components/landingpages/InternetIdentityLogo.svelte
rename to frontend/app/src/desktop/features/landing/InternetIdentityLogo.svelte
diff --git a/frontend/app/src/components/landingpages/Intro.svelte b/frontend/app/src/desktop/features/landing/Intro.svelte
similarity index 97%
rename from frontend/app/src/components/landingpages/Intro.svelte
rename to frontend/app/src/desktop/features/landing/Intro.svelte
index a117593d9a..2f60fab3b4 100644
--- a/frontend/app/src/components/landingpages/Intro.svelte
+++ b/frontend/app/src/desktop/features/landing/Intro.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { availableHeight, mobileWidth } from "@client";
-    import { currentTheme } from "../../theme/themes";
-    import FancyLoader from "../icons/FancyLoader.svelte";
+    import { currentTheme } from "@src/theme/themes";
+    import FancyLoader from "@src/desktop/ui/icons/FancyLoader.svelte";
     import Launch from "./Launch.svelte";
     import OnChain from "./OnChain.svelte";
     import OnChainAlt from "./OnChainAlt.svelte";
diff --git a/frontend/app/src/components/landingpages/LandingPage.svelte b/frontend/app/src/desktop/features/landing/LandingPage.svelte
similarity index 97%
rename from frontend/app/src/components/landingpages/LandingPage.svelte
rename to frontend/app/src/desktop/features/landing/LandingPage.svelte
index 1f09a0b131..85b340fba9 100644
--- a/frontend/app/src/components/landingpages/LandingPage.svelte
+++ b/frontend/app/src/desktop/features/landing/LandingPage.svelte
@@ -3,12 +3,12 @@
 </script>
 
 <script lang="ts">
-    import Loading from "@shared_components/Loading.svelte";
+    import Loading from "@src/ui/Loading.svelte";
     import { flushPendingNavigation } from "@src/utils/navigation";
     import { portalState } from "component-lib";
     import { routeStore, runningInIframe, subscribe, type OpenChat } from "@client";
     import { getContext, onMount, type Component } from "svelte";
-    import { showMenuForLandingRoute } from "../../utils/urls";
+    import { showMenuForLandingRoute } from "@src/utils/urls";
     import BlogPage from "./BlogPage.svelte";
     import Content from "./Content.svelte";
     import FeaturesPage from "./FeaturesPage.svelte";
diff --git a/frontend/app/src/components/landingpages/Launch.svelte b/frontend/app/src/desktop/features/landing/Launch.svelte
similarity index 100%
rename from frontend/app/src/components/landingpages/Launch.svelte
rename to frontend/app/src/desktop/features/landing/Launch.svelte
diff --git a/frontend/app/src/components/landingpages/Link.svelte b/frontend/app/src/desktop/features/landing/Link.svelte
similarity index 100%
rename from frontend/app/src/components/landingpages/Link.svelte
rename to frontend/app/src/desktop/features/landing/Link.svelte
diff --git a/frontend/app/src/components/landingpages/MenuItems.svelte b/frontend/app/src/desktop/features/landing/MenuItems.svelte
similarity index 100%
rename from frontend/app/src/components/landingpages/MenuItems.svelte
rename to frontend/app/src/desktop/features/landing/MenuItems.svelte
diff --git a/frontend/app/src/components/landingpages/MobileMenuItems.svelte b/frontend/app/src/desktop/features/landing/MobileMenuItems.svelte
similarity index 95%
rename from frontend/app/src/components/landingpages/MobileMenuItems.svelte
rename to frontend/app/src/desktop/features/landing/MobileMenuItems.svelte
index 3d5f0ba41f..50bf32e621 100644
--- a/frontend/app/src/components/landingpages/MobileMenuItems.svelte
+++ b/frontend/app/src/desktop/features/landing/MobileMenuItems.svelte
@@ -7,7 +7,7 @@
         OpenChat,
         routeForScope,
     } from "@client";
-    import { navigate } from "@utils/navigation";
+    import { navigate } from "@src/utils/navigation";
     import { getContext } from "svelte";
     import Graph from "svelte-material-icons/GraphOutline.svelte";
     import Help from "svelte-material-icons/HelpCircleOutline.svelte";
@@ -17,8 +17,8 @@
     import Blog from "svelte-material-icons/PostOutline.svelte";
     import Road from "svelte-material-icons/RoadVariant.svelte";
     import Shopping from "svelte-material-icons/ShoppingOutline.svelte";
-    import Menu from "../Menu.svelte";
-    import MenuItem from "../MenuItem.svelte";
+    import Menu from "@src/desktop/shared/Menu.svelte";
+    import MenuItem from "@src/desktop/shared/MenuItem.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/components/landingpages/OnChain.svelte b/frontend/app/src/desktop/features/landing/OnChain.svelte
similarity index 99%
rename from frontend/app/src/components/landingpages/OnChain.svelte
rename to frontend/app/src/desktop/features/landing/OnChain.svelte
index dda17265a1..56eb00f592 100644
--- a/frontend/app/src/components/landingpages/OnChain.svelte
+++ b/frontend/app/src/desktop/features/landing/OnChain.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { currentTheme } from "../../theme/themes";
+    import { currentTheme } from "@src/theme/themes";
     let txtColor = $derived($currentTheme.landing.txt);
 </script>
 
diff --git a/frontend/app/src/components/landingpages/OnChainAlt.svelte b/frontend/app/src/desktop/features/landing/OnChainAlt.svelte
similarity index 99%
rename from frontend/app/src/components/landingpages/OnChainAlt.svelte
rename to frontend/app/src/desktop/features/landing/OnChainAlt.svelte
index f10738048e..2651c206bd 100644
--- a/frontend/app/src/components/landingpages/OnChainAlt.svelte
+++ b/frontend/app/src/desktop/features/landing/OnChainAlt.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { currentTheme } from "../../theme/themes";
+    import { currentTheme } from "@src/theme/themes";
     let txtColor = $derived($currentTheme.landing.txt);
 </script>
 
diff --git a/frontend/app/src/components/landingpages/RoadmapOverview.svelte b/frontend/app/src/desktop/features/landing/RoadmapOverview.svelte
similarity index 98%
rename from frontend/app/src/components/landingpages/RoadmapOverview.svelte
rename to frontend/app/src/desktop/features/landing/RoadmapOverview.svelte
index baceedbc27..1b7ce75ff3 100644
--- a/frontend/app/src/components/landingpages/RoadmapOverview.svelte
+++ b/frontend/app/src/desktop/features/landing/RoadmapOverview.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
     import Section from "./Section.svelte";
     import Link from "./Link.svelte";
-    import ArrowLink from "../ArrowLink.svelte";
-    import { navigate } from "@utils/navigation";
+    import ArrowLink from "./ArrowLink.svelte";
+    import { navigate } from "@src/utils/navigation";
 </script>
 
 <Section id={"roadmap"}>
diff --git a/frontend/app/src/components/landingpages/RoadmapPage.svelte b/frontend/app/src/desktop/features/landing/RoadmapPage.svelte
similarity index 99%
rename from frontend/app/src/components/landingpages/RoadmapPage.svelte
rename to frontend/app/src/desktop/features/landing/RoadmapPage.svelte
index d21d121378..a5839c6646 100644
--- a/frontend/app/src/components/landingpages/RoadmapPage.svelte
+++ b/frontend/app/src/desktop/features/landing/RoadmapPage.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import XL from "./ExternalLink.svelte";
-    import CollapsibleCard from "../CollapsibleCard.svelte";
+    import CollapsibleCard from "@src/desktop/shared/CollapsibleCard.svelte";
     import Headline from "./Headline.svelte";
 
     function x(id: string): string {
diff --git a/frontend/app/src/components/landingpages/Section.svelte b/frontend/app/src/desktop/features/landing/Section.svelte
similarity index 100%
rename from frontend/app/src/components/landingpages/Section.svelte
rename to frontend/app/src/desktop/features/landing/Section.svelte
diff --git a/frontend/app/src/components/landingpages/SellingPoints.svelte b/frontend/app/src/desktop/features/landing/SellingPoints.svelte
similarity index 87%
rename from frontend/app/src/components/landingpages/SellingPoints.svelte
rename to frontend/app/src/desktop/features/landing/SellingPoints.svelte
index 5fb016c678..105132d79a 100644
--- a/frontend/app/src/components/landingpages/SellingPoints.svelte
+++ b/frontend/app/src/desktop/features/landing/SellingPoints.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-    import Dao from "./icons/Dao.svelte";
-    import OnChain from "./icons/OnChain.svelte";
-    import OpenSource from "./icons/OpenSource.svelte";
-    import Reliable from "./icons/Reliable.svelte";
-    import Scalable from "./icons/Scalable.svelte";
-    import Secure from "./icons/Secure.svelte";
+    import Dao from "@src/desktop/features/landing/icons/Dao.svelte";
+    import OnChain from "@src/desktop/features/landing/icons/OnChain.svelte";
+    import OpenSource from "@src/desktop/features/landing/icons/OpenSource.svelte";
+    import Reliable from "@src/desktop/features/landing/icons/Reliable.svelte";
+    import Scalable from "@src/desktop/features/landing/icons/Scalable.svelte";
+    import Secure from "@src/desktop/features/landing/icons/Secure.svelte";
     import Section from "./Section.svelte";
 </script>
 
diff --git a/frontend/app/src/components/SignInWithMagicLink.svelte b/frontend/app/src/desktop/features/landing/SignInWithMagicLink.svelte
similarity index 93%
rename from frontend/app/src/components/SignInWithMagicLink.svelte
rename to frontend/app/src/desktop/features/landing/SignInWithMagicLink.svelte
index eae2b36ba2..09c0e2afef 100644
--- a/frontend/app/src/components/SignInWithMagicLink.svelte
+++ b/frontend/app/src/desktop/features/landing/SignInWithMagicLink.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
     import type { OpenChat } from "@client";
-    import { navigate } from "@utils/navigation";
+    import { navigate } from "@src/utils/navigation";
     import { getContext, onMount, tick } from "svelte";
-    import { i18nKey } from "../i18n/i18n";
-    import FancyLoader from "./icons/FancyLoader.svelte";
-    import ModalContent from "./ModalContent.svelte";
-    import Translatable from "./Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import FancyLoader from "@src/desktop/ui/icons/FancyLoader.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/components/landingpages/TeamCard.svelte b/frontend/app/src/desktop/features/landing/TeamCard.svelte
similarity index 100%
rename from frontend/app/src/components/landingpages/TeamCard.svelte
rename to frontend/app/src/desktop/features/landing/TeamCard.svelte
diff --git a/frontend/app/src/desktop/features/landing/TermsContent.svelte b/frontend/app/src/desktop/features/landing/TermsContent.svelte
new file mode 100644
index 0000000000..eda8ae574a
--- /dev/null
+++ b/frontend/app/src/desktop/features/landing/TermsContent.svelte
@@ -0,0 +1,2124 @@
+<script lang="ts">
+    import { locationStore } from "@client";
+    import { copyToClipboard } from "@src/utils/urls";
+    import HashLinkTarget from "./HashLinkTarget.svelte";
+
+    function onCopyUrl(e: Event, section: string): void {
+        e.stopPropagation();
+        copyToClipboard(`${window.location.origin}${$locationStore}?section=${section}`);
+    }
+</script>
+
+<div class="preamble">
+    <p>
+        IT IS IMPORTANT YOU READ THESE TERMS CAREFULLY BEFORE USING THE OPENCHAT PLATFORM OR
+        OTHERWISE USING OUR SERVICES. BY USING THE OPENCHAT PLATFORM OR OTHERWISE USING OUR
+        SERVICES, YOU INDICATE THAT YOU ACCEPT THESE TERMS AND AGREE TO COMPLY WITH THEM. IF YOU USE
+        THE OPENCHAT PLATFORM OR OTHERWISE USE OUR SERVICES IN THE COURSE OF YOUR BUSINESS OR WORK,
+        YOU ARE ALSO AGREEING TO THESE TERMS ON BEHALF OF THAT BUSINESS. IF YOU DO NOT AGREE TO
+        THESE TERMS, YOU MUST NOT USE THE OPENCHAT PLATFORM OR OTHERWISE USE OUR SERVICES.
+    </p>
+
+    <p>
+        YOU SHOULD CAREFULLY CONSIDER WHETHER USING THE OPENCHAT PLATFORM OR OTHERWISE DEALING IN
+        CRYPTOASSETS IS SUITABLE FOR YOU IN LIGHT OF YOUR OWN SITUATION AND ATTITUDE TO RISK, AS
+        EVALUATED BY YOU CAREFULLY. WE DO NOT MAKE ANY REPRESENTATIONS OR RECOMMENDATIONS REGARDING
+        THE ADVISABILITY OR OTHERWISE OF USING THE OPENCHAT PLATFORM OR OTHERWISE USING OUR SERVICES
+        OR DEALING IN CRYPTOASSETS. IF YOU ARE UNSURE AS TO WHETHER USING THE OPENCHAT PLATFORM,
+        USING OUR SERVICES OR OTHERWISE DEALING IN CRYPTOASSETS IS SUITABLE FOR YOU, YOU SHOULD SEEK
+        INDEPENDENT PROFESSIONAL ADVICE PRIOR TO USING THE OPENCHAT PLATFORM, USING OUR SERVICES OR
+        OTHERWISE DEALING IN CRYPTOASSETS. DEALING IN CRYPTOASSETS MAY NOT BE SUBJECT TO ANY
+        INVESTOR PROTECTION, AND MAY INVOLVE A HIGH DEGREE OF RISK TO YOUR CAPITAL.
+    </p>
+</div>
+
+<div class="section">
+    <HashLinkTarget {onCopyUrl} id="1">
+        <h2>Section A: General terms applicable to all services</h2>
+    </HashLinkTarget>
+
+    <ul class="custom_list bold" style={"--prefix: 'A'; --suffix: ''"}>
+        <li>
+            <h3>Introduction</h3>
+
+            <ul class="custom_list" style={"--prefix: '1.'"}>
+                <li>
+                    We are OpenChat DAO. In these Terms, we refer to ourselves as "<strong
+                        >OpenChat</strong
+                    >", “<strong>we</strong>”, “<strong>us</strong>”, or “<strong>our</strong>”. We
+                    operate the OpenChat Platform which enables users of the OpenChat Platform (“<strong
+                        >you</strong
+                    >”, “<strong>your</strong>”) to access and benefit from our Services.
+                </li>
+                <li>
+                    These terms and conditions and each of the documents we refer to in them (all
+                    together, the “<strong>Terms</strong>”) form the relationship between us and you
+                    in relation to your use of the OpenChat Platform and our Services provided under
+                    these Terms (our “<strong>Services</strong>”). Our Terms apply when using
+                    specific Services as follows:
+
+                    <ul class="custom_list" style={"--prefix: '1.2.'"}>
+                        <li>Section A: General terms applicable to all Services</li>
+                        <li>Section B: Additional terms for messaging on the OpenChat Platform</li>
+                        <li>Section C: Additional terms for using the OpenChat Wallet</li>
+                        <li>Section D: Additional terms applicable to Swaps</li>
+                        <li>Section E: Additional terms for dealing in CHAT</li>
+                        <li>Section F: Additional terms for Diamond Membership holders</li>
+                        <li>Section G: Participating in the OpenChat DAO</li>
+                        <li>Schedule 1: Risks relating to Cryptoassets</li>
+                        <li>Schedule 2: Content Standards</li>
+                        <li>Schedule 3: CHAT Features</li>
+                        <li>Schedule 4: Multiple accounts</li>
+                    </ul>
+                </li>
+                <li>
+                    By using the OpenChat platform, you confirm that you accept these Terms and that
+                    you agree to comply with them. If you do not agree to these Terms, you must not
+                    use the OpenChat Platform or our Services.
+                </li>
+                <li>
+                    <h3>Interpretation</h3>
+                    <p>
+                        In these Terms, the following words and expressions have the following
+                        meanings:
+                    </p>
+                    <div class="interpretation">
+                        <div>"Applicable Law"</div>
+                        <div>
+                            all applicable statutes, laws, enactments, orders, regulations,
+                            regulatory rules, official guidance, standards, regulator expectations
+                            and other similar instruments in any relevant jurisdiction, as in force
+                            and amended from time to time;
+                        </div>
+                        <div>"Channel"</div>
+                        <div>
+                            refers to chats within Communities, to make clear that they are part of
+                            a Community;
+                        </div>
+                        <div>"CHAT"</div>
+                        <div>
+                            refers to the token used to facilitate the governance of OpenChat, with
+                            the features set out at Schedule 3;
+                        </div>
+                        <div>"Community", "Communities"</div>
+                        <div>
+                            refers to a group of Channels users can communicate within. This is
+                            distinct from the concept of a Group, as in a Group involves users
+                            messaging within a single channel (and Communities and Groups are a
+                            distinct forms of communication within the OpenChat Platform);
+                        </div>
+                        <div>"Content Standards"</div>
+                        <div>
+                            means the standards that apply to all Contributions, as set out at
+                            Schedule 2;
+                        </div>
+                        <div>"Contribution"</div>
+                        <div>
+                            refers to any material which you contribute to the OpenChat Platform,
+                            including any communication you make via our Services;
+                        </div>
+                        <div>"Cryptoassets"</div>
+                        <div>
+                            refers to CHAT as well as any and all other cryptoassets that are
+                            supported by the OpenChat Platform, a list of which are available in
+                            your OpenChat Wallet;
+                        </div>
+                        <div>"Diamond Membership"</div>
+                        <div>
+                            refers to our subscription service that gives members access to
+                            exclusive benefits;
+                        </div>
+                        <div>"Exchange Swap"</div>
+                        <div>has the meaning set out at clause D 1.2.1;</div>
+                        <div>"Gated"</div>
+                        <div>
+                            refers to the restrictions or rules that the owner of a Group,
+                            Community, or Channel may impose on users' ability to access or use that
+                            Group, Community, or Channel;
+                        </div>
+                        <div>"Governance Matters"</div>
+                        <div>
+                            refers to matters which relate to the operation or governance of the
+                            OpenChat DAO;
+                        </div>
+                        <div>"Group"</div>
+                        <div>
+                            refers to a channel in which a group of users can communicate. This is
+                            distinct from the concept of a Community, as a Community involves users
+                            messaging within a set of channels (and Communities and Groups are a
+                            distinct forms of communication within the OpenChat Platform);
+                        </div>
+                        <div>"Manifest Error"</div>
+                        <div>
+                            refers to the purported price of a Cryptoasset that differs so
+                            significantly from that reported by exchanges generally that it is
+                            clearly inaccurate due to, for example, a computer error;
+                        </div>
+                        <div>"OpenChat Platform"</div>
+                        <div>
+                            refers to the platform we provide, available at <a
+                                href="https://oc.app/">https://oc.app</a
+                            >;
+                        </div>
+                        <div>"OpenChat Wallet"</div>
+                        <div>
+                            refers to the digital wallet we provide, in which you can store your
+                            Cryptoassets;
+                        </div>
+                        <div>"P2P Swap"</div>
+                        <div>has the meaning set out at clause D 1.2.2;</div>
+                        <div>"Prize Messages"</div>
+                        <div>
+                            refers to messages containing Cryptoassets which are distributed to
+                            OpenChat users, who, upon receipt of the message, can potentially be
+                            gifted Cryptoassets;
+                        </div>
+                        <div>"Source Cryptoasset"</div>
+                        <div>
+                            refers to the Cryptoasset you wish to exchange to obtain the Target
+                            Cryptoasset;
+                        </div>
+                        <div>"Swap(s)"</div>
+                        <div>
+                            refers to either or both an Exchange Swap and / or a P2P Swap (as
+                            relevant);
+                        </div>
+                        <div>"Swap Offer"</div>
+                        <div>has the meaning set out at clause D 1.6;</div>
+                        <div>"Target Cryptoasset"</div>
+                        <div>
+                            refers to the Cryptoasset you wish to acquire in exchange for the Source
+                            Cryptoasset;
+                        </div>
+                        <div>"Virus"</div>
+                        <div>
+                            means any software, thing or device which contains any malicious code,
+                            file, program, or other internal component which may prevent, impair or
+                            otherwise adversely affect the operation of any computer software,
+                            hardware or network; or which may prevent, impair or otherwise adversely
+                            affect access to or the operation of any programme or data, including
+                            the reliability of any programme or data (whether by re-arranging,
+                            altering or erasing the programme or data in whole or part or
+                            otherwise); or adversely affect the user experience, including worms,
+                            trojan horses, viruses, time bombs and other similar things or devices;
+                        </div>
+                        <div>"Voting Platform"</div>
+                        <div>
+                            refers to the mechanism by which CHAT holders may submit votes as
+                            prescribed from time to time; and
+                        </div>
+                        <div>"Vulnerability"</div>
+                        <div>
+                            means a weakness, glitch or bug in the computational logic (for example,
+                            code) found in software and hardware components that, when exploited,
+                            results in a negative impact to confidentiality, integrity, or
+                            availability.
+                        </div>
+                    </div>
+                </li>
+                <li>
+                    Where the words "<strong>includes</strong>", "<strong>including</strong>", "<strong
+                        >for example</strong
+                    >" or "<strong>such as</strong>" are used in these Terms, they are deemed to
+                    have the words "<strong>without limitation</strong>" following them.
+                </li>
+                <li>
+                    A reference to “<strong>writing</strong>” or “<strong>written</strong>” includes
+                    email but not faxes. Any reference to "<strong>written consent</strong>" shall
+                    mean specific explicit consent.
+                </li>
+                <li>
+                    References to “<strong>dealing in</strong>” or “<strong>deal in</strong>” are
+                    references to any participation in Cryptoassets including buying, acquiring,
+                    accepting, holding, selling, staking, disposing of and / or otherwise making use
+                    of Cryptoassets. References to “<strong>transaction”</strong> or “<strong
+                        >transactions</strong
+                    >” are references to any activity involving a person disposing, acquiring, or
+                    otherwise transferring a Cryptoasset to another person (be that by a Swap, a
+                    chat message, or any other means).
+                </li>
+                <li>
+                    The headings of the clauses and schedules of these Terms are for convenience
+                    only and shall not affect its construction or interpretation. The schedules form
+                    part of these Terms and any reference in these Terms to a clause or schedule is
+                    a reference to a clause or schedule of these Terms.
+                </li>
+                <li>
+                    A reference to these Terms or to any other agreement or document referred to in
+                    these Terms is a reference to these Terms or such other document or agreement as
+                    amended or varied in accordance with its terms from time to time.
+                </li>
+                <li>
+                    A reference to a statute, statutory provision or subordinate legislation is a
+                    reference to it as it is in force from time to time, and includes any statute,
+                    statutory provision or subordinate legislation which it amends or re-enacts and
+                    subordinate legislation for the time being in force made under it.
+                </li>
+                <li>
+                    Unless the context otherwise requires, words in the singular shall include the
+                    plural and the plural shall include the singular, and a reference to one gender
+                    shall include a reference to the other genders.
+                </li>
+            </ul>
+        </li>
+        <li>
+            <h3>Contact Details</h3>
+
+            <ul class="custom_list" style={"--prefix: '2.'"}>
+                <li>
+                    If you have any queries, you can contact us via the help channel in the OpenChat
+                    Community, accessible via the OpenChat Platform.
+                </li>
+                <li>
+                    Communications between us shall be in English. Should we receive a communication
+                    which purports to be from you, we are entitled, but are not obliged, to rely on
+                    and conclusively presume that such communication has been given by you. We may
+                    record and monitor conversations we have with you.
+                </li>
+                <li>
+                    You must keep your information with us up to date, as any communication we send
+                    using the details you provide us will be deemed received by you, regardless of
+                    whether or not you actually receive it.
+                </li>
+                <li>
+                    You accept that we are deemed to have received any correspondence only at the
+                    time we actually access it. You accept that there may be a delay in responding
+                    to correspondence received.
+                </li>
+            </ul>
+        </li>
+        <li>
+            <h3>Setting up and securing your OpenChat account</h3>
+
+            <ul class="custom_list" style={"--prefix: '3.'"}>
+                <li>
+                    Before you can use our Services, you need to set up an account and provide
+                    certain information. You can do this via our Platform.
+                </li>
+                <li>
+                    To set up an account, our Platform will ask you to authenticate your identity
+                    via a third party identity provider. By authenticating your identity, you agree
+                    to the terms of the third party identity provider.
+                </li>
+                <li>
+                    As part of setting up your account, you may be provided with or asked to create
+                    security details. You must keep your security details secure and not disclose
+                    them to anyone else. Any action or instruction by anyone using your security
+                    details will be treated as if such action or instruction had been made by you,
+                    and we are not responsible for any loss as a result. You should contact us
+                    immediately upon discovering any unauthorised use of your security details.
+                </li>
+                <li>
+                    <strong
+                        >We strongly recommend logging out of the OpenChat Platform at the end of
+                        every session you have on the OpenChat Platform, as otherwise the OpenChat
+                        Platform may not prompt the next user of the device used to access the
+                        OpenChat Platform to enter credentials in order to use the OpenChat
+                        Platform. If you do not log out of the OpenChat Platform at the end of each
+                        session, there is a risk that another person may impersonate you, for
+                        example to send Contributions or to access your Cryptoassets without your
+                        knowledge or consent. We are not responsible for any losses as a consequence
+                        of your failure to log out at the end of a session or your credentials
+                        otherwise being compromised.
+                    </strong>
+                </li>
+            </ul>
+        </li>
+
+        <li>
+            <h3>Eligibility to use our services</h3>
+
+            <ul class="custom_list" style={"--prefix: '4.'"}>
+                <li>
+                    <p>
+                        By using the OpenChat Platform, you confirm and represent at all times that:
+                    </p>
+
+                    <ul class="custom_list" style={"--prefix: '4.1.'"}>
+                        <li>
+                            (if you are a body corporate) you are duly organised and validly
+                            existing under the laws of the jurisdiction of your domicile, and have
+                            full power, authority and right, and have taken all action required, to
+                            bind yourself to these Terms, including as regards performing all
+                            actions and obligations under these Terms, which therefore constitute
+                            valid and legally binding obligations;
+                        </li>
+                        <li>
+                            (if you are an individual) you are of legal age and competency to agree
+                            to these Terms and all related obligations, including as regards any
+                            age, residency, legal capacity, competency and all other requirements;
+                        </li>
+                        <li>
+                            you are not a citizen or resident of, or a legal entity in any country
+                            or territory which appears on the sanctions lists of the Office of
+                            Foreign Assets Control of the U.S. Department of Treasury (“<strong
+                                >OFAC</strong
+                            >”), United Nations Security Council (“<strong>UNSC</strong>”), Her
+                            Majesty’s Treasury (“<strong>HMT</strong>”) or any other relevant
+                            sanctions list;
+                        </li>
+                        <li>
+                            (if using our Services to deal in Cryptoassets) you are not a citizen or
+                            resident of, or a legal entity in any country that prohibits dealing in
+                            Cryptoassets or which would otherwise require us to have a licence,
+                            permission, registration or authorisation which we do not have;
+                        </li>
+                        <li>
+                            (if using our Services to send Contributions) you shall not make a
+                            Contribution that is prohibited in the country where you are a citizen
+                            or resident, or registered as a legal entity.
+                        </li>
+                        <li>
+                            you will comply with any Applicable Law relevant to you, including not
+                            committing, causing, facilitating or contributing to the commission by
+                            any person of any bribery, corruption or tax evasion offence;
+                        </li>
+                        <li>
+                            you shall not deal in Cryptoassets where this would require you or us to
+                            obtain any registration, approval, authorisation or similar which you /
+                            we do not have, or in any other circumstances in which your dealing in
+                            Cryptoassets is prohibited;
+                        </li>
+                        <li>
+                            in using the OpenChat Platform you do not breach the rights of any third
+                            party, including any intellectual property or data privacy rights of any
+                            third party;
+                        </li>
+                        <li>
+                            you have not received any advice from us in relation to the using the
+                            Openchat Platform or our Services or dealing in CHAT, and you are solely
+                            responsible for any evaluations, decisions and actions taken in
+                            connection with such;
+                        </li>
+                        <li>
+                            you will provide us with whatever information we may request for the
+                            purposes of satisfying our regulatory, compliance and contractual
+                            obligations;
+                        </li>
+                        <li>
+                            you will deal with us in any open and honest way, including as regards
+                            providing us with full, complete and accurate information when
+                            responding to our reasonable requests;
+                        </li>
+                        <li>
+                            you waive any right you may have to participate in a class action
+                            lawsuit or a class-wide arbitration against us and / or any person
+                            involved with us that arises out of or relates to CHAT or these Terms;
+                        </li>
+                        <li>
+                            you will not attempt to circumvent the security of or interfere with the
+                            proper working of the OpenChat Platform, CHAT or any server on which
+                            they are hosted, nor otherwise introduce, nor permit the introduction
+                            of, any Virus or Vulnerability into the OpenChat Platform, CHAT nor any
+                            of our systems; and
+                        </li>
+                        <li>
+                            you will not use (or assist others in using) our Services or CHAT in
+                            ways that are unlawful, misleading, harmful, discriminatory or
+                            fraudulent.
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    In using the OpenChat Platform and our Services you are responsible for all
+                    activity that occurs under your OpenChat account and via any device connected
+                    with/to your OpenChat account.
+                </li>
+                <li>
+                    You shall notify us via the help channel in the OpenChat Community (accessible
+                    via the OpenChat Platform) immediately if you become aware you have breached, or
+                    may have breached, any of your obligations under these Terms.
+                </li>
+                <li>
+                    You may not create multiple accounts on the OpenChat Platform according to
+                    Schedule 4;
+                </li>
+            </ul>
+        </li>
+
+        <li>
+            <h3>Availability</h3>
+
+            <ul class="custom_list" style={"--prefix: '5.'"}>
+                <li>
+                    Whilst we strive to make our Services and the OpenChat Platform available for
+                    all users all the time, we do not guarantee that our Services or the OpenChat
+                    Platform will be available without interruption, and there may be unavailability
+                    for reasons such as maintenance, repairs, upgrades, or failures of network or
+                    equipment.
+                </li>
+                <li>
+                    We shall not be responsible for any loss from or arising out of Service
+                    interruptions, delays in processing transactions or inability to execute
+                    transactions.
+                </li>
+            </ul>
+        </li>
+
+        <li>
+            <h3>General obligations when dealing with cryptoassets</h3>
+
+            <ul class="custom_list" style={"--prefix: '6.'"}>
+                <li>
+                    <p>
+                        When using our Services to deal in Cryptoassets (including CHAT), you
+                        acknowledge and accept that:
+                    </p>
+                    <ul class="custom_list" style={"--prefix: '6.1.'"}>
+                        <li>
+                            you understand that we do not provide, nor do we accept responsibility
+                            for, any investment, legal, tax or accounting advice, and we do not
+                            provide any form of recommendation regarding the
+                            suitability/appropriateness or quality of any Cryptoasset, and the fact
+                            that our Services may be used in relation to any Cryptoasset should not
+                            be taken as an indication of such;
+                        </li>
+                        <li>
+                            your dealing in Cryptoassets is based on your own assessment of the
+                            risks involved, and if you are in any doubt as to what these risks are
+                            you confirm you have taken your own independent advice as appropriate;
+                        </li>
+                        <li>
+                            you are responsible for ensuring that any Cryptoassets and software
+                            (including any external wallet) you use in connection with our Services
+                            is compatible with the OpenChat Platform and CHAT, and we are not liable
+                            in the event of any incompatibility resulting in loss;
+                        </li>
+                        <li>
+                            you are only able to send Cryptoassets using our Services that are
+                            stored in your OpenChat Wallet, and you are not able to send
+                            Cryptoassets stored in any external wallet;
+                        </li>
+                        <li>
+                            the OpenChat Platform will refuse to complete, cancel or reverse any
+                            transaction you have authorised or made using our Services where there
+                            is insufficient Cryptoassets in your OpenChat Wallet to cover the
+                            transaction and our fees incurred;
+                        </li>
+                        <li>
+                            you will be charged a fee for every chat message sent containing
+                            Cryptoassets as determined by the relevant Cryptoasset ledger, and this
+                            fee will be automatically deducted from your OpenChat Wallet (this is
+                            not a fee charged by us);
+                        </li>
+                        <li>
+                            you will provide us with whatever information we request to facilitate
+                            any transaction using our Services;
+                        </li>
+                        <li>
+                            Cryptoasset transfers are irreversible and so accidental or fraudulent
+                            transactions with respect to Cryptoassets may not be recoverable. We are
+                            not responsible for any losses that may arise in connection with
+                            accidental or fraudulent transactions and as such, caution should be
+                            exercised whenever you make a transaction via the OpenChat Platform;
+                        </li>
+                        <li>
+                            whilst we will use reasonable endeavours to ensure that instructions in
+                            relation to Cryptoassets are processed in a timely manner, we make no
+                            representation or warranty regarding the amount of time needed to
+                            complete any instruction, as this is dependent upon many factors outside
+                            of our control, and we shall not be responsible for any loss from or
+                            arising out of delays in processing transactions or any inability to
+                            execute transactions; and
+                        </li>
+                        <li>
+                            you are responsible for complying with any tax obligations applicable to
+                            you in connection with your dealing in Cryptoassets.
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+        <li>
+            <h3>Intellectual property</h3>
+
+            <ul class="custom_list" style={"--prefix: '7.'"}>
+                <li>
+                    OpenChat and their licensors (if any) are at all times the owners of all
+                    intellectual property rights (of whatever nature, anywhere in the world)
+                    associated with our Services, the OpenChat Platform or CHAT, as well as any
+                    related software or information provided in relation to the CHAT (the “<strong>
+                        OpenChat Intellectual Property
+                    </strong>”). The OpenChat Intellectual Property and aforesaid rights are
+                    licensed (not sold) to you under the AGPLv3 licence (at
+                    <a href="https://www.gnu.org/licenses/agpl-3.0.html"
+                        >https://www.gnu.org/licenses/agpl-3.0.html</a
+                    >) and you have the right to use the OpenChat Intellectual Property only for the
+                    purpose of using our Services and as otherwise permitted under the AGPLv3
+                    licence. You have no intellectual property rights in the OpenChat Intellectual
+                    Property other than the right to use them in accordance with these Terms and the
+                    AGPLv3 licence. Any other use is expressly prohibited. We reserve all rights not
+                    expressly granted under these Terms.
+                </li>
+
+                <li>
+                    <p>
+                        The main repository for the OpenChat application used in the OpenChat
+                        Platform is at <a href="https://github.com/open-chat-labs/open-chat/"
+                            >https://github.com/open-chat-labs/open-chat/</a
+                        >. You may use this code solely in accordance with the AGPLv3 licence or as
+                        otherwise expressly agreed by us in these Terms or in writing. Subject to
+                        the foregoing, you shall not, except as may be allowed by Applicable Law
+                        which is incapable of exclusion by agreement between the Parties:
+                    </p>
+                    <ul class="custom_list" style={"--prefix: '7.1.'"}>
+                        <li>
+                            except to the extent expressly permitted under these Terms, attempt to
+                            copy, modify, duplicate, create derivative works from, frame, mirror,
+                            republish, download, display, transmit, or distribute all or any portion
+                            of any OpenChat Intellectual Property;
+                        </li>
+                        <li>
+                            attempt to reverse compile, disassemble, reverse engineer or otherwise
+                            reduce to human-perceivable form all or any part of any OpenChat
+                            Intellectual Property;
+                        </li>
+                        <li>
+                            access all or any part of the OpenChat Intellectual Property in order to
+                            build a product or Service which competes with the CHAT and / or the
+                            activities of OpenChat;
+                        </li>
+                        <li>
+                            license, sell, rent, lease, transfer, assign, distribute, display,
+                            disclose, or otherwise commercially exploit OpenChat Intellectual
+                            Property, and this includes not doing so via any third party; and / or
+                        </li>
+                        <li>
+                            attempt to obtain, or assist third parties in obtaining, access to
+                            OpenChat Intellectual Property other than as expressly permitted by
+                            these Terms.
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    All logos related to us and the OpenChat Intellectual Property are marks of
+                    OpenChat or our licensors. You may not copy, imitate, or use our trading names
+                    or logos without our prior written consent. All rights, title and interests in
+                    and to such is the exclusive property of us and our licensors.
+                </li>
+                <li>
+                    OpenChat Intellectual Property may contain code, commonly referred to as
+                    open-source software, which is distributed under any of the many known
+                    variations of open source licence terms, including terms which allow the free
+                    distribution and modification of the relevant software’s source code and/or
+                    which require all distributors to make such source code freely available upon
+                    request, including any contributions or modifications made by such distributor
+                    (collectively, “<strong>Open Source Software</strong>”). To the extent that our
+                    Services, the OpenChat Platform or CHAT use or contain any Open Source Software,
+                    that element only is licensed to you under the relevant licence terms of the
+                    applicable third party licensor (“<strong>Open Source Licence Terms</strong>”),
+                    and you accept and agree to be bound by such Open Source Licence Terms.
+                </li>
+            </ul>
+        </li>
+        <li>
+            <h3>Our liability</h3>
+
+            <ul class="custom_list" style={"--prefix: '8.'"}>
+                <li>
+                    Notwithstanding any other clause in these Terms, we do not in any way exclude or
+                    limit our liability for death or personal injury caused by our negligence; fraud
+                    or fraudulent misrepresentation; or any other liability which cannot be limited
+                    or excluded by Applicable Law.
+                </li>
+                <li>
+                    Subject to clause A 8.1, we shall be responsible to you only for loss that you
+                    suffer as a direct and foreseeable result of our breach of this Agreement as a
+                    result of our gross negligence, and only insofar that such loss does not arise
+                    as a result of a breach of these Terms and / or Applicable Law by you. In any
+                    event, we shall not be liable to you for any loss: (i) of profits or expected
+                    revenue; (ii) caused by events outside our reasonable control; (iii) resulting
+                    from any attack by a third party on our systems; (iv) as a result of us
+                    exercising any of our rights or any exercise of discretion permitted to us under
+                    these Terms; or (v) anything else which we state we are not responsible for or
+                    which we otherwise exclude our liability for under these Terms.
+                </li>
+                <li>
+                    Subject to clause A 8.1, our total liability under these Terms shall be capped
+                    at the total amount of fees received by us from you in the year proceeding the
+                    breach.
+                </li>
+            </ul>
+        </li>
+        <li>
+            <h3>Your liability</h3>
+
+            <ul class="custom_list" style={"--prefix: '9.'"}>
+                <li>
+                    <p>You agree to indemnify us for any losses that arise from or relate to:</p>
+                    <ul class="custom_list" style={"--prefix: '9.1.'"}>
+                        <li>your breach of any Applicable Law or these Terms;</li>
+                        <li>your breach of the rights of any third party to these Terms;</li>
+                        <li>
+                            any regulatory inquiry, legal action, litigation, dispute or
+                            investigation, whether such situations occur or are anticipated, that
+                            relate to you; and
+                        </li>
+                        <li>
+                            any fees, taxes or costs not imposed by or via us, which we pay on your
+                            behalf.
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    Losses for the purposes of this clause A 9 include direct and indirect losses,
+                    as well as any costs and expenses (including reasonable legal fees).
+                </li>
+            </ul>
+        </li>
+        <li>
+            <h3>Termination</h3>
+            <ul class="custom_list" style={"--prefix: '10.'"}>
+                <li>
+                    <p>
+                        You may terminate your relationship with us immediately at any time for any
+                        reason by ceasing to use our Services. You will not be charged for
+                        terminating your OpenChat account. Once your OpenChat account is closed, you
+                        accept and acknowledge that:
+                    </p>
+                    <ul class="custom_list" style={"--prefix: '10.1.'"}>
+                        <li>you will no longer have access to any Contributions you have made;</li>
+                        <li>
+                            our other users will continue to have access to the Contributions you
+                            have made (as Contributions are not deleted when you terminate); and
+                        </li>
+                        <li>
+                            you will no longer have access to your OpenChat Wallet, and you are
+                            solely responsible for transferring any Cryptoassets stored in your
+                            OpenChat Wallet to an external wallet prior to account deletion
+                            (otherwise you will lose access to those Cryptoassets).
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    We may suspend, restrict or terminate your access to or use of any or all of our
+                    Services or the OpenChat Platform with immediate effect at any time by giving
+                    you notice via the OpenChat Platform where (i) we believe that has been
+                    suspicious or unlawful conduct, including fraud; (ii) if we reasonably believe
+                    you breach these Terms repeatedly or in a serious way; (iii) if we reasonably
+                    believe you create harm, risk, or possible legal exposure for us, our users, or
+                    others; (iv) for security, legal or regulatory reasons; or (v) if you have not
+                    given us information we need, or we believe that the information you have
+                    provided us is incorrect.
+                </li>
+                <li>
+                    On suspension of some or all of our Services, you shall not be able to access
+                    some or all of our Services until the suspension is ended at our discretion. We
+                    shall have no obligation to end any suspension within any particular time period
+                    or at all, and we shall not incur any liability for any loss caused or as a
+                    consequence of us exercising our suspension rights under these Terms.
+                </li>
+                <li>
+                    <p>On termination of all of our Services:</p>
+                    <ul class="custom_list" style={"--prefix: '10.4.'"}>
+                        <li>
+                            you will no longer be permitted or have any right to access or use the
+                            OpenChat Platform or our Services, and we will also cease to support
+                            your use of CHAT in connection with these purposes.
+                        </li>
+                        <li>
+                            you must withdraw all of your Cryptoassets from your OpenChat Wallet
+                            within 1 week of termination, as we will cease to provide support for
+                            your OpenChat Wallet after the expiry of that period, and we are not
+                            responsible for any loss as a consequence.
+                        </li>
+                        <li>
+                            all other rights, obligations and liabilities of the parties accrued up
+                            to and including the date of termination shall not be affected by
+                            termination.
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    Termination shall not affect the continued operation of clauses and provisions
+                    which by their nature clearly reflect the intention of the parties that they
+                    survive termination, including in relation to liability and the protection of
+                    intellectual property.
+                </li>
+            </ul>
+        </li>
+        <li>
+            <h3>Changes to these terms</h3>
+            <ul class="custom_list" style={"--prefix: '11.'"}>
+                <li>
+                    <p>
+                        We may make changes to these Terms and our Services available from time to
+                        time:
+                    </p>
+                    <ul class="custom_list" style={"--prefix: '11.1.'"}>
+                        <li>to reflect changes to Applicable Law;</li>
+                        <li>
+                            to reflect changes required by any court, regulatory or tax authority or
+                            industry guidance or codes of practice;
+                        </li>
+                        <li>to reflect changes in the way cryptoasset markets work;</li>
+                        <li>
+                            to reflect changes to our technology or other systems, including those
+                            required to reflect to our intention to have increasing decentralisation
+                            of the OpenChat Platform;
+                        </li>
+                        <li>
+                            if it becomes impossible or impractical, in our reasonable opinion, to
+                            carry out any aspect of these Terms as a result of circumstances beyond
+                            our reasonable control;
+                        </li>
+                        <li>to make these Terms easier to understand;</li>
+                        <li>
+                            to reflect changes to the nature or scope of the Services we provide
+                            generally;
+                        </li>
+                        <li>where the changes are to your benefit or not detrimental to you; or</li>
+                        <li>for any other valid reason.</li>
+                    </ul>
+                </li>
+                <li>
+                    We will give you reasonable notice of any changes to these Terms, or we may make
+                    changes with immediate effect where they are in your favour or are required by
+                    Applicable Law.
+                </li>
+                <li>
+                    We will notify you of any changes via the OpenChat Platform. You will be treated
+                    as accepting any change that we make to these Terms unless you tell us that you
+                    do not agree to the change, in which case you must discontinue using our
+                    Services. We will treat this as your termination of your agreement to use our
+                    Services, with effect from the date that the change would otherwise come into
+                    effect.
+                </li>
+            </ul>
+        </li>
+        <li>
+            <h3>Novation</h3>
+            <ul class="custom_list" style={"--prefix: '12.'"}>
+                <li>
+                    We may appoint another entity to take over all or some of our rights and
+                    obligations under these Terms (the “<strong>New Entity</strong>”), in which case
+                    you consent to us transferring by way of novation all or some of our rights and
+                    obligations under these Terms to the New Entity. As soon as reasonably
+                    practicable following such novation, we shall notify you in writing of the
+                    effective date of such novation. From such effective date, all references in
+                    these Terms to “OpenChat”, “we”, “us” or “our” shall be deemed to be references
+                    to the New Entity.
+                </li>
+            </ul>
+        </li>
+        <li>
+            <h3>Governing law and jurisdiction</h3>
+            <ul class="custom_list" style={"--prefix: '13.'"}>
+                <li>
+                    If you are a consumer, please note that these Terms and any dispute or claim
+                    arising out of or in connection with them shall be governed by English law. You
+                    and we both agree that the courts of England and Wales will have non-exclusive
+                    jurisdiction to settle any dispute or claim arising out of or in connection with
+                    these Terms or their subject matter. However, nothing in these Terms will
+                    override any mandatory laws of the country in which you have your usual place of
+                    residence.
+                </li>
+                <li>
+                    If you are a business, these Terms and any dispute or claim arising out of or in
+                    connection with them or their subject matter or formation (including
+                    non-contractual disputes or claims) shall be governed by and construed in
+                    accordance with English law. We both agree that the courts of England and Wales
+                    shall have exclusive jurisdiction to settle any such dispute or claim (including
+                    non-contractual disputes or claims).
+                </li>
+            </ul>
+        </li>
+        <li>
+            <h3>Entire agreement</h3>
+            <ul class="custom_list" style={"--prefix: '14.'"}>
+                <li>
+                    These Terms constitute the entire agreement between you and us and supersede any
+                    prior agreement, terms and conditions or arrangement in respect of their subject
+                    matter. There are no promises, representations, warranties, terms, conditions or
+                    obligations between you and us other than those set out in these Terms.
+                </li>
+                <li>
+                    You warrant that you have not entered into these Terms in reliance upon, and
+                    will have no remedy in respect of, any misrepresentation, representation or
+                    statement which is not expressly set out or referred to in these Terms. The only
+                    remedy available for any misrepresentation or breach of any representation or
+                    statement set out or referred to in these Terms shall be for breach of contract.
+                </li>
+            </ul>
+        </li>
+        <li>
+            <h3>Miscellaneous</h3>
+            <ul class="custom_list" style={"--prefix: '15.'"}>
+                <li>
+                    These Terms shall take effect from the earlier of the date on which you (i)
+                    receive CHAT (ii) access the OpenChat Platform or (iii) otherwise use our
+                    Services.
+                </li>
+                <li>
+                    Each of the provisions of these Terms are separate, severable and enforceable
+                    and, accordingly, if at any time any provision or part-provision of these Terms
+                    is or becomes invalid, void, illegal or unenforceable, it shall be deemed
+                    deleted, but that shall not affect the validity and enforceability of the rest
+                    of these Terms. If any provision or part-provision of these Terms is deemed
+                    deleted under this clause A 15.2, these Terms shall be interpreted so as, to the
+                    greatest extent possible, to achieve the intended commercial result of the
+                    deleted provision.
+                </li>
+                <li>
+                    You may not assign, lien, mortgage, transfer, charge or otherwise encumber any
+                    of your rights or obligations in a way which may impede your performance of your
+                    obligations under these Terms. We may assign the benefit of these Terms without
+                    restriction subject to compliance with Applicable Law.
+                </li>
+                <li>
+                    The parties intend that any New Entity shall have the right to enforce any
+                    rights granted to it under clause A 12 pursuant to the Contracts (Rights of
+                    Third Parties) Act 1999 (the "<strong>1999 Act</strong>"). Save as aforesaid,
+                    the participants do not intend that the provisions of these Terms shall be
+                    enforceable by virtue of the 1999 Act or otherwise by any person not a user of
+                    the OpenChat Platform. Notwithstanding this clause A 15.4, the consent any third
+                    party is not required for any variation (including any release or compromise of
+                    any liability) or termination of these Terms.
+                </li>
+                <li>
+                    No variation or waiver of any of the terms of these Terms shall be effective
+                    unless agreed by us explicitly in writing. No failure or delay by us to exercise
+                    any right, power or remedy under these Terms shall operate as a waiver of that
+                    right, or any other right, nor shall any single or partial exercise by us of any
+                    right, power or remedy preclude any other or further exercise of that right or
+                    any other right, power or remedy.
+                </li>
+            </ul>
+        </li>
+    </ul>
+
+    <HashLinkTarget {onCopyUrl} id="2">
+        <h2>Section B: Additional terms for messaging on the OpenChat platform</h2>
+    </HashLinkTarget>
+
+    <ul class="custom_list bold" style={"--prefix: 'B'; --suffix: ''"}>
+        <li>
+            <h3>Introduction</h3>
+            <ul class="custom_list" style={"--prefix: '1.'"}>
+                <li>
+                    This section of these Terms will apply to OpenChat users when using the OpenChat
+                    Platform to send Contributions to each other.
+                </li>
+            </ul>
+        </li>
+
+        <li>
+            <h3>Messaging services</h3>
+            <ul class="custom_list" style={"--prefix: '2.'"}>
+                <li>
+                    <p>The OpenChat Platform enables all its users to, for example:</p>
+                    <ul class="custom_list" style={"--prefix: '2.1.'"}>
+                        <li>send and receive text and multimedia communications;</li>
+                        <li>send messages containing Cryptoassets (including tips);</li>
+                        <li>send Prize Messages;</li>
+                        <li>join video and voice calls;</li>
+                        <li>create private Groups;</li>
+                        <li>join public and / or private and / or Gated Groups; and</li>
+                        <li>join (but not create) public and / or private Communities.</li>
+                    </ul>
+                </li>
+                <li>
+                    <p>Please note:</p>
+                    <ul class="custom_list" style={"--prefix: '2.2.'"}>
+                        <li>
+                            when using our messages or prize messages to send Cryptoassets, this
+                            shall constitute dealing in Cryptoassets and the provisions in clause A
+                            6 shall apply.
+                        </li>
+                        <li>
+                            that we strongly recommend logging out of the OpenChat Platform at the
+                            end of every session you have on the OpenChat Platform, as otherwise the
+                            OpenChat Platform may not prompt the next user of the device used to
+                            access the OpenChat Platform to enter credentials in order to use the
+                            OpenChat Platform. If you do not log out of the OpenChat Platform at the
+                            end of each session, there is a risk that another person may impersonate
+                            you to send Contributions. We are not responsible for any losses as a
+                            consequence of your failure to log out at the end of a session or your
+                            credentials otherwise being compromised.
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+
+        <li>
+            <h3>Conditions for contributions</h3>
+            <ul class="custom_list" style={"--prefix: '3.'"}>
+                <li>
+                    <p>A Contribution must not:</p>
+                    <ul class="custom_list" style={"--prefix: '3.1.'"}>
+                        <li>do anything that is unlawful;</li>
+                        <li>communicate any illegal content or activity;</li>
+                        <li>be defamatory, obscene, offensive, hateful or inflammatory;</li>
+                        <li>bully, harass, insult or intimidate; or</li>
+                        <li>otherwise breach our Content Standards.</li>
+                    </ul>
+                </li>
+                <li>
+                    We shall decide, at our discretion, if a Contribution does not meet these
+                    requirements and if we decide that there has been a breach of clause B 3.1, we
+                    may suspend or terminate your access to or use of our Services immediately and
+                    you will be liable for any loss we incur as a consequence.
+                </li>
+                <li>
+                    If we decide that a Contribution is prohibited in any jurisdiction, we reserve
+                    the right to conceal the Contribution and prevent it from being viewed by users
+                    who are citizens, residents or legal entities in those jurisdictions where such
+                    a Contribution is prohibited.
+                </li>
+                <li>
+                    If we decide that a Contribution is likely to be interpreted by any users as
+                    defamatory, offensive, hateful or inflammatory, we reserve the right to require
+                    users to confirm an appropriate risk warning before permitting them to view such
+                    a Contribution.
+                </li>
+                <li>
+                    If you see any Contribution that you believe is in breach of clause B 3.1, you
+                    should contact us via the help channel in the OpenChat Community (accessible via
+                    the OpenChat Platform) and we will investigate. However, you acknowledge that we
+                    are not responsible if a person breaches clause B 3.1 when using our Services,
+                    whether or not we take any action as a result.
+                </li>
+                <li>
+                    <p>
+                        We will enable you to send Prize Messages. Where you do so, you shall ensure
+                        that the arrangements under which any Cryptoasset prizes are gifted:
+                    </p>
+                    <ul class="custom_list" style={"--prefix: '3.6.'"}>
+                        <li>
+                            are clear, fair, honest, not misleading and in compliance with any
+                            Applicable Law;
+                        </li>
+                        <li>
+                            are not structured in a way that would meet the definition of regulated
+                            gambling under any relevant jurisdiction; and
+                        </li>
+                        <li>
+                            are gifted in accordance on a basis which is clearly communicated with
+                            all participants.
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    All participants in any arrangement for Cryptoasset prizes accept that we do not
+                    control, and are not responsible or liable for, any issue or loss in connection
+                    with any Cryptoassets prizes offered or gifted via our Services.
+                </li>
+                <li>
+                    You understand that messaging services are vulnerable to spoofing and phishing
+                    attacks and so caution should be exercised in reviewing all Contributions, and
+                    we shall not be responsible for any loss caused by phishing, spoofing or any
+                    other malicious attack.
+                </li>
+                <li>
+                    You also accept that we shall also not be responsible for any loss in connection
+                    with any delay or error in the transmission or receipt of any Contribution, so
+                    long as we have acted in good faith. This includes loss caused as a result of a
+                    delay in the transmission or receipt of Cryptoassets sent via our messaging
+                    system, so long as we have acted in good faith.
+                </li>
+            </ul>
+        </li>
+        <li>
+            <h3>Conditions for joining groups and communities</h3>
+
+            <ul class="custom_list" style={"--prefix: '4.'"}>
+                <li>
+                    By joining a public or private Group or Community (including those which are
+                    Gated) on the OpenChat Platform, you understand and accept that you must comply
+                    with all applicable rules of that Group or Community. You also understand that
+                    we do not accept responsibility for the operation of Groups and Communities
+                    available via the OpenChat Platform.
+                </li>
+                <li>
+                    In addition, to join a Gated Group or Community you will need to at all relevant
+                    times satisfy the criteria as determined by the creator of that particular Group
+                    or Community.
+                </li>
+            </ul>
+        </li>
+        <li>
+            <h3>Intellectual property</h3>
+            <ul class="custom_list" style={"--prefix: '5.'"}>
+                <li>
+                    We do not claim any ownership of any intellectual property in the content that
+                    you submit via our messaging Services. However, you represent that any content
+                    you submit does not breach the intellectual property of any person, that you
+                    have the full right to send such information, and there is no other reason why
+                    we would be in breach of any obligation to any person in enabling you to send
+                    such information via our Services.
+                </li>
+            </ul>
+        </li>
+    </ul>
+
+    <HashLinkTarget {onCopyUrl} id="3">
+        <h2>Section C: Additional terms for using the OpenChat wallet</h2>
+    </HashLinkTarget>
+    <ul class="custom_list bold" style={"--prefix: 'C'; --suffix: ''"}>
+        <li>
+            <h3>Introduction</h3>
+            <ul class="custom_list" style={"--prefix: '1.'"}>
+                <li>
+                    This section of these Terms will apply to OpenChat users who use the OpenChat
+                    Wallet.
+                </li>
+            </ul>
+        </li>
+        <li>
+            <h3>Conditions for use</h3>
+            <ul class="custom_list" style={"--prefix: '2.'"}>
+                <li>
+                    <p>By using the OpenChat Wallet, you acknowledge and accept that:</p>
+                    <ul class="custom_list" style={"--prefix: '2.1.'"}>
+                        <li>
+                            you understand that in order to secure your OpenChat Wallet and be able
+                            to store Cryptoassets, you must access your OpenChat account using the
+                            credentials provided when opening your account. You are responsible for
+                            keeping, protecting and safeguarding your credentials. In this respect,
+                            you are aware that if you lose your credentials or access to your
+                            OpenChat account is compromised for any other reason, you may not be
+                            able to access your OpenChat Wallet and someone else may take control of
+                            your Cryptoassets (and may as a consequence be treated by the OpenChat
+                            Platform as if they were owner of those Cryptoassets). We are not
+                            responsible for any losses in relation to your loss of or inability to
+                            access the Cryptoassets stored in your OpenChat Wallet in connection
+                            with you losing your credentials or your credentials otherwise being
+                            compromised;
+                        </li>
+                        <li>
+                            unless you log out of the OpenChat Platform at the end of every session
+                            you have on the OpenChat Platform, the OpenChat Platform may not prompt
+                            the next user of the device used to access the OpenChat Platform to
+                            enter credentials in order to use the OpenChat Platform. If you do not
+                            log out of the OpenChat Platform at the end of each session, there is a
+                            risk that another person may impersonate you to access your Cryptoassets
+                            without your knowledge or consent, and the OpenChat Platform may treat
+                            them as if they are the owner of those Cryptoassets. We are not
+                            responsible for any losses as a consequence of your failure to log out
+                            at the end of a session or your credentials otherwise being compromised;
+                        </li>
+                        <li>
+                            we assume no responsibility in connection with any attempt to use your
+                            OpenChat Wallet for cryptoassets that we do not support or with regard
+                            to Cryptoassets sent from your OpenChat Wallet to an incompatible
+                            external wallet address;
+                        </li>
+                        <li>
+                            you understand that if you authorise or allow any third party to access
+                            your OpenChat Wallet, the third party will know your OpenChat Wallet
+                            information (including without limitation, information relating to your
+                            assets and transactions), and your OpenChat Wallet will be exposed to
+                            certain risks, and you may suffer losses (we are not responsible for any
+                            such losses);
+                        </li>
+                        <li>
+                            the transfer of Cryptoassets into your OpenChat Wallet exposes those
+                            Cryptoassets to the risk of loss from, amongst other things, security
+                            breaches from cyber-attacks, and so long as we have acted in good faith
+                            we are not responsible for any such loss; and
+                        </li>
+                        <li>
+                            you understand that if you hold Cryptoassets in your OpenChat Wallet,
+                            and there has been no activity on your OpenChat account for a prolonged
+                            period of time and we are unable to contact you, Applicable Law may
+                            require us to deliver any such Cryptoassets to the authorities in
+                            certain jurisdictions as unclaimed property. Where this is the case, we
+                            will comply with such requirements to the extent reasonably required by
+                            Applicable Law.
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    <p>By using the OpenChat Wallet, you covenant, represent and warrant that:</p>
+                    <ul class="custom_list" style={"--prefix: '2.2.'"}>
+                        <li>
+                            you shall allow your OpenChat Wallet to be used in connection with any
+                            activities that are prohibited by Applicable Law;
+                        </li>
+                        <li>
+                            you shall not use your OpenChat Wallet to store, send, or receive
+                            cryptoassets that we do not support;
+                        </li>
+                        <li>
+                            you are the legal and rightful owner of all Cryptoassets in your
+                            OpenChat Wallet, and that the sources of such Crptoassets are legal, and
+                            you will not transfer or trade through the OpenChat Platform anything
+                            other than Cryptoassets that have been legally obtained by you and that
+                            belong to you; and
+                        </li>
+                        <li>
+                            you shall notify us without undue delay of any unauthorised use and / or
+                            access of your OpenChat Wallet.
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+    </ul>
+
+    <HashLinkTarget {onCopyUrl} id="4">
+        <h2>Section D: Additional terms applicable to making a swap</h2>
+    </HashLinkTarget>
+    <ul class="custom_list bold" style={"--prefix: 'D'; --suffix: ''"}>
+        <li>
+            <h3>Introduction</h3>
+            <ul class="custom_list" style={"--prefix: '1.'"}>
+                <li>
+                    This section of these Terms will apply to OpenChat users who use the OpenChat
+                    Platform to make a Swap.
+                </li>
+                <li>
+                    <p>A Swap can be either:</p>
+                    <ul class="custom_list" style={"--prefix: '1.2.'"}>
+                        <li>
+                            an Exchange Swap, which is where the OpenChat Platform offers you a
+                            price for the Cryptoasset, and the transaction is completed using the
+                            third party exchange(s) the OpenChat Platform is linked to; or
+                        </li>
+                        <li>
+                            a P2P Swap, which is where you send a message to the users of a chat
+                            with the proposed terms of a transaction, and the OpenChat Platform
+                            facilitates you in completing that transaction with the other user.
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    In order to make an Exchange Swap, you need to choose (i) your Source
+                    Cryptoasset, (ii) your Target Cryptoasset and (ii) the amount of the Source
+                    Cryptoasset you wish to exchange for that Target Cryptoasset. You can then ask
+                    us to provide you with a proposed estimated exchange rate. This exchange rate
+                    reflects the rate(s) provided by the third party exchange(s) we are connected
+                    with.
+                </li>
+                <li>
+                    If you instruct us to proceed with an Exchange Swap, we will transfer the Source
+                    Cryptoasset from your OpenChat Wallet to the relevant third party exchange to
+                    make the conversion. You will then receive the Target Cryptoasset back to your
+                    OpenChat Wallet.
+                </li>
+                <li>
+                    Where we use a third party exchange to complete an Exchange Swap, please note
+                    that the exchange rates provided by us are an estimated rate at the time you
+                    request the rate. The actual rate provided will be determined at the time you
+                    instruct us to make the Exchange Swap. <strong>
+                        As the prices of Cryptoassets can be highly volatile, we do not guarantee
+                        that the amount of Target Cryptoassets you acquire from an Exchange Swap
+                        will be the same as that set out in the proposed exchange rate. Rather, it
+                        will reflect the rate actually obtained when the Exchange Swap is actually
+                        executed by the third party exchange (which may result you in receiving less
+                        of the Target Cryptoasset than that predicted by the estimated exchange rate
+                        you receive
+                    </strong>).
+                </li>
+                <li>
+                    <p>
+                        In order to engage in a P2P Swap (either by making a Swap Offer or accepting
+                        a Swap Offer), you need to have a Diamond Membership. A “Swap Offer”, is a
+                        communication which you, if you hold a Diamond Membership, can make to other
+                        users in chat(s) with the following information:
+                    </p>
+                    <ul class="custom_list" style={"--prefix: '1.6.'"}>
+                        <li>your Source Cryptoasset;</li>
+                        <li>your Target Cryptoasset;</li>
+                        <li>the amount of the Source Cryptoasset you are willing to exchange;</li>
+                        <li>the amount of the Target Cryptoasset you wish to acquire; and</li>
+                        <li>the chat(s) who can accept the Swap Offer.</li>
+                    </ul>
+                </li>
+                <li>
+                    <p>Upon making a Swap Offer:</p>
+                    <ul class="custom_list" style={"--prefix: '1.7.'"}>
+                        <li>
+                            the amount of the Source Cryptoasset you are willing to exchange is sent
+                            from your OpenChat Wallet into escrow.
+                        </li>
+                        <li>
+                            a message containing the details of the Swap Offer is sent to the users
+                            in the relevant chat(s), who have the ability to accept your Swap Offer
+                            at their discretion.
+                        </li>
+                        <li>
+                            you have the ability to cancel the Swap Offer for as long as no other
+                            user has accepted the Swap Offer, in which case the Source Cryptoasset
+                            shall be returned to your OpenChat Wallet.
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    <p>
+                        As soon as another user accepts your Swap Offer, the P2P Swap is processed,
+                        meaning that:
+                    </p>
+                    <ul class="custom_list" style={"--prefix: '1.8.'"}>
+                        <li>
+                            the Target Cryptoassets will be transferred from their wallet to escrow;
+                        </li>
+                        <li>
+                            the Source Cryptoassets will be transferred from escrow to the other
+                            user’s OpenChat Wallet; and
+                        </li>
+                        <li>
+                            the Target Cryptoassets will be transferred from escrow to your OpenChat
+                            Wallet.
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+        <li>
+            <h3>Conditions for making a swap</h3>
+            <ul class="custom_list" style={"--prefix: '2.'"}>
+                <li>
+                    <p>
+                        By using our Services to make a Swap, you are dealing in Cryptoassets and
+                        clause A 6 shall apply. In addition, you acknowledge and accept that:
+                    </p>
+                    <ul class="custom_list" style={"--prefix: '2.1.'"}>
+                        <li>
+                            you will only able to make a Swap if there are sufficient Cryptoassets
+                            stored in your OpenChat Wallet to do so;
+                        </li>
+                        <li>
+                            you understand that once an offer for a Swap has been accepted, you are
+                            not able to cancel that Swap (or otherwise ask for a refund), and as
+                            such before making any Swap or Swap Offer you should make sure that you
+                            are certain you want to proceed;
+                        </li>
+                        <li>
+                            whilst we may cancel an Exchange Swap where there is a Manifest Error in
+                            the price of a Cryptoasset as shown by us (in which case we will give
+                            you the ability as soon as commercially practicable to acquire the
+                            Cryptoasset at the correct price, and we shall notify you of any
+                            cancellation as soon as we reasonably can by email or via the OpenChat
+                            Platform), you do not have the right to cancel an accepted Swap Offer
+                            because of a Manifest Error (and so you should be careful to ensure that
+                            the details of any Swap Offer you make are accurate); and
+                        </li>
+                        <li>
+                            we reserve the right to make changes to these Terms to reflect changes
+                            to the third party exchanges available to us and their offerings.
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    <p>As long as we act in good faith, we do not accept responsibility for:</p>
+                    <ul class="custom_list" style={"--prefix: '2.2.'"}>
+                        <li>our Services being interrupted;</li>
+                        <li>any Swap not being executed or accepted by any counterparty;</li>
+                        <li>any delay in processing a Swap;</li>
+                        <li>any lack of liquidity in any market for a Cryptoasset; or</li>
+                        <li>
+                            our refusal to carry out any Swap for you if we believe it is in breach
+                            of these Terms.
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+    </ul>
+
+    <HashLinkTarget {onCopyUrl} id="5">
+        <h2>Section E: Additional terms for dealing in CHAT</h2>
+    </HashLinkTarget>
+    <ul class="custom_list bold" style={"--prefix: 'E'; --suffix: ''"}>
+        <li>
+            <h3>Introduction</h3>
+            <ul class="custom_list" style={"--prefix: '1.'"}>
+                <li>This section of these Terms will apply whenever you deal in CHAT.</li>
+            </ul>
+        </li>
+        <li>
+            <h3>Conditions for dealing in CHAT</h3>
+            <ul class="custom_list" style={"--prefix: '2.'"}>
+                <li>
+                    <p>
+                        By dealing in CHAT, you are dealing in Cryptoassets and clause A 6 shall
+                        apply. In addition, you acknowledge and accept that:
+                    </p>
+                    <ul class="custom_list" style={"--prefix: '2.1.'"}>
+                        <li>
+                            you have the necessary and relevant experience, knowledge and
+                            understanding to deal in CHAT;
+                        </li>
+                        <li>
+                            other than as set out in these Terms, you are not relying upon any other
+                            representation or warranty by OpenChat or any other person, written or
+                            otherwise, in determining whether to deal in CHAT, and have reached your
+                            independent view regarding that dealing in CHAT is right for you;
+                        </li>
+                        <li>
+                            you accept that CHAT is created and you obtain CHAT on an “as is” basis.
+                            Therefore, provided we act in good faith in accordance with these Terms,
+                            you accept that OpenChat is providing CHAT without being able to provide
+                            any warranties in relation to them, including, but not limited to,
+                            title, merchantability or fitness for a particular purpose;
+                        </li>
+                        <li>
+                            OpenChat has not made, and does not make, any representations that you
+                            will be able to generate a return on your obtaining of CHAT, and you
+                            should not expect a return or any kind of cancellation or refund rights
+                            in relation to the CHAT;
+                        </li>
+                        <li>
+                            whilst OpenChat will use reasonable endeavours to ensure that CHAT will
+                            have the utility reflected in these Terms, the features of the CHAT are
+                            subject to change, modification, amendment, alternation or
+                            supplementation at any time (at OpenChat’s sole discretion);
+                        </li>
+                        <li>
+                            these Terms do not constitute a prospectus, offering memorandum or
+                            private placement memorandum of any sort and does not pertain in any way
+                            to be any kind of regulated offering;
+                        </li>
+                        <li>
+                            you understand that the CHAT is not being offered as securities, e-money
+                            or stablecoins; and
+                        </li>
+                        <li>
+                            you accept that we reserve the right to create new classes of
+                            cryptoassets other than CHAT under separate brands and with features
+                            outside of the scope of these Terms and nothing in these Terms shall
+                            entitle you to have any rights (of whatever nature) in relation to such
+                            cryptoassets.
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    Any sale of CHAT by you to another person is subject to these Terms, and you are
+                    responsible for ensuring that any acquirer of CHAT is aware of the fact that in
+                    doing so they accept, and are subject to, these Terms.
+                </li>
+            </ul>
+        </li>
+    </ul>
+
+    <HashLinkTarget {onCopyUrl} id="6">
+        <h2>Section F: Additional terms for Diamnond membership holders</h2>
+    </HashLinkTarget>
+    <ul class="custom_list bold" style={"--prefix: 'F'; --suffix: ''"}>
+        <li>
+            <h3>Introduction</h3>
+            <ul class="custom_list" style={"--prefix: '1.'"}>
+                <li>This section of these Terms will apply if you hold a Diamond Membership.</li>
+                <li>
+                    <p>As a Diamond Membership holder, you are eligible to:</p>
+
+                    <ul class="custom_list" style={"--prefix: '1.2.'"}>
+                        <li>
+                            earn rewards in return for referring other users to become Diamond
+                            Membership holders. Rewards are 50% of the referred member’s total
+                            Diamond Membership payments for the first year after the referral is
+                            completed. Rewards are paid out in either CHAT or ICP, depending on
+                            whether the referred member uses CHAT or ICP to purchase the Diamond
+                            Membership;
+                        </li>
+                        <li>
+                            create public Groups (in addition to the general ability to create
+                            private Groups);
+                        </li>
+                        <li>create public and / or private Communities;</li>
+                        <li>create Gated Groups and Gated Communities;</li>
+                        <li>make video and voice calls;</li>
+                        <li>
+                            make or accept Swap Offers in relation to a P2P Swaps (see section D for
+                            further information); and
+                        </li>
+                        <li>
+                            access any other features that we make available from time to time at
+                            our discretion to holders of a Diamond Membership (subject to your
+                            acceptance of any additional terms which may apply to such).
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+        <li>
+            <h3>Conditions for becoming a Diamond membership holder</h3>
+            <ul class="custom_list" style={"--prefix: '2.'"}>
+                <li>
+                    We will charge you in advance for your Diamond Membership and we will
+                    automatically deduct the fee (as specified on the fees page on the OpenChat
+                    Platform and payable in either CHAT or ICP) directly from your OpenChat Wallet
+                    at the start of your membership. This fee shall cover your Diamond Membership
+                    for the membership period specified when you sign up for Diamond Membership.
+                </li>
+                <li>
+                    <p>In the event that we suspend the provision of Diamond Membership to you:</p>
+                    <ul class="custom_list" style={"--prefix: '2.2.'"}>
+                        <li>
+                            because you breach the terms of this Agreement, you will forfeit your
+                            Diamond Membership (and shall not be entitled to any refund in respect
+                            of such).
+                        </li>
+                        <li>
+                            for any other reason, the membership period shall be extended
+                            accordingly so that you do not pay any fee in respect of a time period
+                            during which the Diamond Membership is suspended.
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    Your Diamond Membership cannot be transferred or assigned. To the extent
+                    permitted by Applicable Law, we do not provide any refund rights in relation to
+                    your purchase of a Diamond Membership, and we note that the Diamond Membership
+                    is contingent on the operation and value of CHAT and ICP which is dependent on
+                    fluctuations in the financial market which cannot be controlled by us.
+                </li>
+            </ul>
+        </li>
+        <li>
+            <h3>Conditions for creating groups and communities</h3>
+            <ul class="custom_list" style={"--prefix: '3.'"}>
+                <li>
+                    <p>As the creator of a Group, Community or Channel, you may:</p>
+                    <ul class="custom_list" style={"--prefix: '3.1.'"}>
+                        <li>
+                            determine the rules that users must comply with in order to send
+                            messages in the Group, Community or Channel;
+                        </li>
+                        <li>
+                            manage and control the operation of the Group, Community or Channel; and
+                        </li>
+                        <li>
+                            assign functions to admins and moderators at their discretion to assist
+                            with the management of the Group, Community or Channel,
+                        </li>
+                        <li>and in doing so you accept that you are responsible for:</li>
+                        <li>the Groups, Communities, and Channels you administer;</li>
+                        <li>
+                            ensuring that the rules of the Groups, Communities and Channels you
+                            administer are appropriately enforced; and
+                        </li>
+                        <li>
+                            dealing with any complaints or queries received from participants in
+                            relation to the Groups, Communities, and Channels you administer.
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    Notwithstanding the rest of this clause F 3, we may require you to change the
+                    rules of any Group, Community or Channel, or we may require that certain
+                    jurisdictions be geo-blocked from a Group, Community or Channel, if we in good
+                    faith believe that this is required to comply with Applicable Law. We also have
+                    the right to require you to resolve any complaint or query in a particular way,
+                    if we in good faith believe that this is required to protect the rights of any
+                    person. You shall comply with any such requirement we impose promptly, and
+                    ensure that we are provided with full, complete, accurate and up to date
+                    responses to any queries we make in deciding whether to place such a requirement
+                    on you or any Group or Community. We do not accept any liability for our
+                    exercise of our rights under this clause F 3.
+                </li>
+            </ul>
+        </li>
+    </ul>
+
+    <HashLinkTarget {onCopyUrl} id="7">
+        <h2>Section G: Participating in the OpenChat DAO</h2>
+    </HashLinkTarget>
+    <ul class="custom_list bold" style={"--prefix: 'G'; --suffix: ''"}>
+        <li>
+            <h3>Introduction</h3>
+            <ul class="custom_list" style={"--prefix: '1.'"}>
+                <li>
+                    This section of these Terms will apply if you participate in the governance of
+                    the OpenChat DAO.
+                </li>
+            </ul>
+        </li>
+        <li>
+            <h3>Location of information regarding the DAO</h3>
+            <ul class="custom_list" style={"--prefix: '2.'"}>
+                <li>
+                    <p>For information regarding:</p>
+                    <ul class="custom_list" style={"--prefix: '2.1.'"}>
+                        <li>
+                            the rules setting out the operation and governance of the OpenChat DAO,
+                            please see: <a href="https://oc.app/blog/governance"
+                                >https://oc.app/blog/governance</a
+                            >; and
+                        </li>
+                        <li>
+                            how holders of CHAT may vote on Governance Matters, please see:
+                            <a href="https://oc.app/blog/governance"
+                                >https://oc.app/blog/governance</a
+                            >,
+                        </li>
+                    </ul>
+                    <p>
+                        and in participating in the OpenChat DAO you agree to and are bound by these
+                        rules as amended from time to time, which shall be considered as part of
+                        these Terms.
+                    </p>
+                </li>
+            </ul>
+        </li>
+        <li>
+            <h3>Conditions for using the voting platform</h3>
+            <ul class="custom_list" style={"--prefix: '3.'"}>
+                <li>
+                    You understand that the Voting Platform you use to vote may be operated by a
+                    third party. As such, you may be subject to the additional terms of the third
+                    party operating the Voting Platform. Where this is the case, and you confirm
+                    that (i) you accept and will comply with these additional terms as applicable to
+                    you and (ii) you understand that we are not responsible for them.
+                </li>
+            </ul>
+        </li>
+    </ul>
+
+    <HashLinkTarget {onCopyUrl} id="8">
+        <h2>Schedule 1: Risks relating to cryptoassets</h2>
+    </HashLinkTarget>
+    <p>
+        <strong>
+            DEALING IN CRYPTOASSETS INVOLVES A HIGH DEGREE OF RISK, AND, THEREFORE, SHOULD BE
+            UNDERTAKEN ONLY IF YOU ARE CAPABLE OF EVALUATING THE RISKS INVOLVED AND ABLE TO BEAR THE
+            RISK OF A COMPLETE LOSS OF ALL CAPITAL USED TO PARTICIPATE IN CRYPTOASSETS.
+        </strong>
+    </p>
+    <p>
+        <strong>
+            YOU SHOULD CAREFULLY CONSIDER THE RISKS DESCRIBED BELOW BEFORE DEALING IN CRYPTOASSETS.
+            IT SHOULD BE NOTED THAT THE LIST OF RISK FACTORS DESCRIBED HEREUNDER IS NOT INTENDED TO
+            BE EXHAUSTIVE AND DOES NOT NECESSARILY INCLUDE ALL THE RISKS TO WHICH YOU MAY BE EXPOSED
+            WHEN DEALING IN CRYPTOASSETS.
+        </strong>
+    </p>
+    <p>
+        We expressly disclaim all responsibility for any loss or damage of any kind whatsoever
+        arising directly or indirectly from: (i) reliance on any information contained in this
+        Schedule 1, (ii) any error, omission or inaccuracy in any such information or (iii) any
+        action resulting from such information.
+    </p>
+    <p>
+        Please note that in addition to the risks below, there may be other risks associated with
+        your dealing in Cryptoassets and using our Services generally, including those that we
+        cannot reasonably foresee. Additional risks may also materialise as unanticipated variations
+        or combinations of the risks discussed below.
+    </p>
+    <p>
+        By participating in these Terms, or by otherwise dealing in Cryptoassets, including CHAT,
+        you expressly acknowledge and assume the following risks, which we shall not be liable
+        should they materialise:
+    </p>
+    <p>
+        <strong> Risks applicable to all Cryptoassets (including CHAT) </strong>
+    </p>
+
+    <ul class="custom_list" style={"--prefix: ''"}>
+        <li>
+            <h3>General risks</h3>
+            <p>
+                The value of the Cryptoassets can fall as well as rise. If you buy Cryptoassets, you
+                may not get back the full amount you spent on them, or anything at all. The value of
+                Cryptoassets may depend on fluctuations in the financial markets, or other economic
+                factors, which are outside our control. The past performance of a Cryptoassets is
+                not a guide to the future performance of Cryptoassets.
+            </p>
+        </li>
+        <li>
+            <h3>The prices of Cryptoassets are extremely volatile</h3>
+            <p>
+                Fluctuations in the price of Cryptoassets are subject to significant price
+                volatility. The prices of Cryptoassets have historically been subject to dramatic
+                fluctuations and are highly volatile. A range of factors may influence the market
+                price, if any, of Cryptoassets , including, but not limited to: (i) the ability (if
+                any) of Cryptoassets to trade on a secondary market; (ii) global supply and demand
+                (iii) general expectations with respect to the rate of inflation, interest rates and
+                exchange rates; (iv) changes in the software, software requirements or hardware
+                requirements underlying Cryptoassets; (v) changes in the rights, obligations,
+                incentives, or rewards for holders of Cryptoassets;(vii) interruptions in service
+                from or failures of exchanges on which Cryptoassets are traded; (viii) investment
+                and trading activities of large purchasers, including private and registered funds,
+                that may directly or indirectly invest in Cryptoassets; (ix) monetary policies of
+                governments, trade restrictions, currency devaluations and revaluations; (x)
+                regulatory measures, if any, that affect the use of Cryptoassets and changes in
+                Applicable Law; (xi) global or regional political, economic or financial events and
+                situations; and (x) expectations among participants that the value of a particular
+                Cryptoasset or Cryptoassets generally will soon change. A decrease in the price of a
+                single cryptoasset may cause volatility in the entire cryptoasset industry and may
+                affect the Cryptoassets available via our Services. Volatility in the price of
+                Cryptoassets may result in significant loss over a short period of time.
+            </p>
+        </li>
+        <li>
+            <h3>
+                Risk of losing access to Cryptoassets due to loss of private key(s) and wallet(s)
+            </h3>
+            <p>
+                A private key, or a combination of private keys, is necessary to deal in
+                Cryptoassets. Accordingly, loss of requisite private key(s) associated with your
+                digital wallet or vault storing Cryptoassets will result in loss of such
+                Cryptoassets. Moreover, any third party that gains access to such private key(s),
+                including by gaining access to login credentials of a hosted wallet service you use
+                (including the OpenChat Wallet), may be able to misappropriate your Cryptoassets.
+            </p>
+            <p>
+                Any errors or malfunctions caused by or otherwise related to the wallet you use to
+                receive and store Cryptoassets, including your own failure to properly maintain or
+                use such wallet, may also result in the loss of your Cryptoassets. Failure to
+                precisely follow any procedures set forth by us for dealing in Cryptoassets,
+                including, for instance, providing an incorrect wallet address, or using
+                incompatible wallet(s), may result in the loss of Cryptoassets you hold.
+            </p>
+        </li>
+        <li>
+            <h3>Regulatory risks</h3>
+            <p>
+                Regulation of Cryptoassets and the offering thereof, as well as blockchain
+                technologies, and cryptoasset exchanges is currently underdeveloped and likely to
+                rapidly evolve. Regulation varies significantly between different jurisdictions and
+                is subject to significant uncertainty. Regulators may in the future adopt laws,
+                regulations, guidance or other actions that may severely impact the development,
+                operations and growth of the OpenChat Platform and the adoption and utility of
+                Cryptoassets.
+            </p>
+        </li>
+        <li>
+            <h3>Risks associated with the blockchain protocol</h3>
+            <p>
+                Because Cryptoassets are based on blockchain protocols, any malfunction, breakdown
+                or abandonment of a blockchain protocol may have a material adverse effect on
+                Cryptoassets. Moreover, advances in cryptography, or technical advances such as the
+                development of quantum computing, could present risks to Cryptoassets by rendering
+                ineffective the cryptographic consensus mechanism that underpins the blockchain
+                protocol.
+            </p>
+        </li>
+        <li>
+            <h3>Risk of hacking and software and security weaknesses</h3>
+            <p>
+                Hackers or other malicious groups or organizations may attempt to interfere with
+                Cryptoassets in a variety of ways, including malware attacks, denial of service
+                attacks, consensus-based attacks, Sybil attacks, smurfing and spoofing, as well as
+                attacks which overpower the consensus-based mechanism on which the blockchain in
+                built and attacks which interfere with or otherwise cause nodes to malfunction
+                (nodes are computers / hardware devices that help maintain the blockchain).
+            </p>
+            <p>
+                There is also an inherent risk that the software and related technologies and
+                theories we use could contain Viruses or Vulnerabilities. Viruses or Vulnerabilities
+                could cause, inter alia, complete loss of Cryptoassets, or could negatively affect
+                the OpenChat Platform.
+            </p>
+        </li>
+        <li>
+            <h3>Other potential risks applicable to Cryptoassets</h3>
+            <p>
+                In addition to the risks included in this Schedule 1, there are other risks
+                associated with dealing in Cryptoassets (including CHAT), including those that we
+                cannot reasonably foresee. Additional risks may also materialize as unanticipated
+                variations or combinations of the risks discussed above in this Schedule 1.
+            </p>
+            <p>
+                Where you deal in any Cryptoasset you should take care to understand the risks
+                involved. In this respect, we note some of the additional specific risks relevant to
+                CHAT. In relation to Cryptoassets other than CHAT, it is usual for the issuer of the
+                Cryptoasset to provide an explanation of the risks involved (or if they have not,
+                this can be an indicator that a Cryptoasset is particularly risky as there has been
+                a lack of consideration of the risks relevant to that Cryptoasset). By dealing in
+                any Cryptoasset, you confirm to us that you have taken to time to understand, and
+                accept, the risks involved (including in respect of the risks as explained by the
+                issuer of the Cryptoasset).
+            </p>
+        </li>
+        <li>
+            <h3>Forks and Airdrops</h3>
+            <p>
+                The underlying protocols of Cryptoassets may be subject to substantial changes in
+                their operating rules (called a “forks”), and these may alter the value or function
+                of a Cryptoasset. A fork may result in multiple versions of a Cryptoasset, leading
+                to volatility as one version becomes dominant over another, which may lose its
+                value.
+            </p>
+            <p>
+                There may be additional distributions (called an “airdrop”) made to holders of a
+                particular Cryptoasset, which may be a new variant of a Cryptoasset or a further
+                quantity of the same Cryptoasset. The (anticipated) occurrence of an airdrop may
+                impact the value of the Cryptoasset(s) affected by that airdrop.
+            </p>
+        </li>
+    </ul>
+
+    <p>
+        <strong>CHAT specific risks</strong>
+    </p>
+    <p>
+        As noted elsewhere in these Terms, CHAT is not being structured or sold as securities nor
+        any other form of regulated investment product. Accordingly, there has not been any
+        consideration as to whether the CHAT is a suitable or an appropriate thing for you to deal
+        in. In addition to the General Cryptoasset risks, you should be aware of the following risks
+        in relation to CHAT specifically:
+    </p>
+    <ul class="custom_list" style={"--prefix: ''"}>
+        <li>
+            <h3>Lack of operating history</h3>
+            <p>
+                Purchases of CHAT involve a high degree of risk. The value of CHAT is reliant on the
+                success of us developing our business. As such, CHAT has all of the risks and
+                uncertainties normally associated with a developing business, including in respect
+                of potential difficulties operating the OpenChat Platform, lack of name recognition,
+                lack of adequate capital to progress the business, and difficulties in complying
+                with all Applicable Law. Financial and operational risks confronting start-ups are
+                significant and we are not immune to these. The market in which we compete is highly
+                competitive, and the percentage of companies that survive and prosper is small.
+            </p>
+            <p>
+                Our lack of an operating history may make it difficult for you to evaluate our
+                business and long-term operating prospects and the prospects of the OpenChat
+                Platform in connection with acquiring CHAT. These risks include, but are not limited
+                to, our ability to: (i) increase revenues and manage costs relating to the operation
+                of the OpenChat Platform; (ii) increase awareness of the OpenChat Platform and CHAT;
+                (iii) offer compelling content on the OpenChat Platform; (iv) maintain current and
+                develop new strategic relationships; (v) respond effectively to competitive
+                pressures; (vi) continue to develop and upgrade technology; and (vii) raise any
+                additional capital as potentially required. There are no assurances that our
+                business strategy will be successful, nor that we will address these risks
+                successfully during the operation of the OpenChat Platform and CHAT.
+            </p>
+        </li>
+        <li>
+            <h3>Risks associated with uncertain regulation</h3>
+            <p>
+                The regulatory status of the CHAT may be unclear or unsettled in certain
+                jurisdictions. It is difficult to predict how or whether regulatory agencies may
+                apply existing regulation with respect to CHAT and its applications, including the
+                OpenChat Platform. It is likewise difficult to predict how or whether legislatures
+                or regulatory agencies may implement changes to law and regulation affecting
+                distributed ledger technology and its applications. Regulatory actions could
+                negatively impact CHAT in various ways, including, for purposes of illustration
+                only, through a determination that CHAT are a regulated financial instrument that
+                require registration or licensing. We may cease operations in a jurisdiction in the
+                event that regulatory actions, or changes to Applicable Law, make it illegal to
+                operate in such jurisdiction, or commercially undesirable to obtain the necessary
+                regulatory approval(s) to operate in such jurisdiction.
+            </p>
+            <p>
+                More generally, the OpenChat Platform is pioneered on new and evolving technology,
+                which increases legal complexity, particularly as the Applicable Law is subject to
+                interpretation and change. This could result in a variety of adverse consequences,
+                including civil penalties and fines as well as the requirement that some or all of
+                our Services by restricted or prohibited in certain jurisdictions. These
+                developments could have an adverse effect on the operations of the OpenChat Platform
+                and the value of CHAT.
+            </p>
+        </li>
+        <li>
+            <h3>Legal proceedings and litigation</h3>
+            <p>
+                From time to time, we may be involved in legal proceedings or litigation. The
+                results of such legal proceedings and claims cannot be predicted with certainty and,
+                regardless of the outcome, legal proceedings could have an adverse impact on our
+                business, because of defence and settlement costs, diversion of resources, and other
+                factors. Generally, if third parties are successful in their claims, we may have to
+                pay substantial damages, account for profits derived from the alleged infringing
+                acts, and cease to use certain technologies or take other actions that could be
+                detrimental to our business. If there is an intellectual property infringement
+                claim, or to avoid such claims, we may be prohibited from selling or licensing to
+                others some or all Services we develop, unless the patent or copyright holder grants
+                a license of the relevant intellectual property to us, which the patent or copyright
+                holder is not obligated to do. There also may be adverse publicity associated with
+                litigation that could negatively affect people’s perception of us, the OpenChat
+                Platform and/or CHAT, regardless of whether the allegations are valid or we are
+                ultimately found liable. Accordingly, litigation may adversely affect our business
+                and financial condition.
+            </p>
+        </li>
+        <li>
+            <h3>Intellectual property</h3>
+            <p>
+                Companies, organisations, or individuals, including competitors, may hold or obtain
+                patents, trademarks, or other proprietary rights that would prevent, limit, or
+                interfere with our ability to make, use, develop, sell, and / or market CHAT and /
+                or the OpenChat Platform, which could make it more difficult for us to operate our
+                business. These third parties may have applied for, been granted, or obtained,
+                patents that relate to intellectual property, and which compete with our
+                intellectual property or technology. This may require us to develop or obtain
+                alternative technology, or obtain appropriate licenses under these patents, which
+                may not be available on acceptable terms or at all. Such a circumstance may result
+                in us having to significantly increase development efforts and resources to redesign
+                the technology in order for us to safeguard our competitive edge against competitors
+                in the same industry. There is a risk that our means of protecting intellectual
+                property rights may not be adequate, and weaknesses or failures in this area could
+                adversely affect our business or reputation, financial condition, the operations of
+                the OpenChat Platform and the development of CHAT.
+            </p>
+            <p>
+                From time to time, we may receive communications from holders of patents or
+                trademarks regarding their proprietary rights. Companies holding patents or other
+                intellectual property rights may bring suits alleging infringement of such rights or
+                otherwise assert their rights and urge us to take licenses. In addition, if we are
+                determined to have infringed upon a third party's intellectual property rights, we
+                may be required to cease operating the OpenChat Platform or certain Services, pay
+                substantial damages, seek a license from the holder of the infringed intellectual
+                property right (which license may not be available on reasonable terms or at all),
+                and/or establish and maintain alternative branding for items relating to the
+                OpenChat Platform and our Services. We may need to file lawsuits to protect our
+                intellectual property rights from infringement from third parties, which could be
+                expensive, time consuming, and distract management's attention from our core
+                operations.
+            </p>
+            <p>
+                Our ability to serve our customers and the OpenChat Platform’s participants will
+                depend upon our intellectual property. The steps we take to protect our intellectual
+                property rights may be inadequate. In order to protect our intellectual property
+                rights, we may be required to spend significant resources to monitor and protect
+                these rights. Litigation brought to protect and enforce our intellectual property
+                rights could be costly, time-consuming and distracting to management and could
+                result in the impairment or loss of portions of our intellectual property.
+                Furthermore, our efforts to enforce our intellectual property rights may be met with
+                defences, counterclaims, and countersuits attacking the validity and enforceability
+                of our intellectual property rights. Our failure to secure, protect, and enforce our
+                intellectual property rights could seriously harm the CHAT brand and adversely
+                affect the development of the CHAT.
+            </p>
+        </li>
+        <li>
+            <h3>
+                CHAT will have no refund rights or similar features and may have limited liquidity
+            </h3>
+            <p>
+                After issuance, to the extent permitted by Applicable Law you will have no right to
+                return your CHAT to us or to receive a refund or otherwise require us to exchange
+                CHAT for a certain value. As a result, if there is not sufficient demand or interest
+                in the OpenChat Platform and CHAT, or if there are limits on the transferability of,
+                or limited liquidity for, CHAT, then you may lose all or a portion of your
+                investment.
+            </p>
+        </li>
+        <li>
+            <h3>Future distribution of CHAT and other types of token</h3>
+            <p>
+                The distribution by us of a substantial number of CHAT or additional types of token
+                could have an adverse effect on the value of CHAT. Any distribution of CHAT could
+                dilute your percentage interest in then-outstanding CHAT, if any, and have an
+                adverse effect on the market value of the CHAT. Additional new types of cryptoasset
+                may also impact the value of CHAT, and you have no rights in relation to such new
+                types of cryptoasset as a result of entering into these Terms.
+            </p>
+        </li>
+        <li>
+            <h3>Funding</h3>
+            <p>
+                We intend to use the amounts received from CHAT holders to fund the development of
+                our business and the OpenChat Platform. Amounts received from CHAT holders may be
+                converted into other cryptoassets or fiat currencies. If the value of cryptoassets
+                or fiat currencies fluctuate unfavourably this may mean that we may not be able to
+                fund business development and deployment as expected or may not be able to develop
+                the OpenChat Platform in the manner it intended, which may consequently impact the
+                value of CHAT.
+            </p>
+        </li>
+        <li>
+            <h3>Lack information for monitoring their CHAT</h3>
+            <p>
+                You may not be able to obtain all information you want from time to time regarding
+                the OpenChat Platform and / or CHAT. Even if you do receive such information, you
+                may not receive it on a timely basis. It is possible that you may not be aware of
+                materially adverse changes that have occurred with respect to the OpenChat Platform
+                and/or CHAT in a timely manner. As a result of these difficulties, as well as other
+                uncertainties, you may not have accurate or accessible information relating to your
+                purchase, which could prevent you from taking actions with the potential to prevent
+                adverse consequences relating to your holding of CHAT.
+            </p>
+        </li>
+        <li>
+            <h3>CHAT may not be classified as unregulated</h3>
+            <p>
+                Although we intend for CHAT to be classified as unregulated, the regulatory position
+                of cryptoassets can be uncertain and subject to change. This may, at a later date,
+                cause us to reclassify CHAT as a security, in which case CHAT may be subject to
+                restrictions on resale and transfer.
+            </p>
+        </li>
+        <li>
+            <h3>Voting power</h3>
+            <p>
+                Whilst CHAT allows CHAT holders to participate in the governance of the OpenChat DAO
+                by voting on proposals, each CHAT holder’s voting power is proportional to the
+                amount of CHAT they have deposited and locked. As such, there is a risk that a small
+                number of CHAT holders may be able to exercise the majority of the voting power from
+                time to time, meaning that other holders of CHAT cannot effectively influence the
+                governance of the OpenChat DAO, and devaluing the CHAT they hold.
+            </p>
+        </li>
+    </ul>
+
+    <HashLinkTarget {onCopyUrl} id="9">
+        <h2>Schedule 2: Content Standards</h2>
+    </HashLinkTarget>
+
+    <p>
+        A Contribution must comply with Applicable Law. In addition, the Content Standards below
+        must be complied with in spirit as well as to the letter. The Content Standards apply to
+        each part of any Contribution as well as to its whole. We will determine, at our discretion,
+        whether a Contribution breaches the Content Standards.
+    </p>
+    <p>A Contribution must not:</p>
+    <ul class="custom_list" style={"--prefix: ''"}>
+        <li>
+            threaten to harm another individual or group of people. This includes direct, indirect,
+            and suggestive threats.
+        </li>
+        <li>
+            solicit, share, or make attempts to distribute content that depicts, promotes, or
+            attempts to normalise child sexual abuse.
+        </li>
+        <li>post content that in any way sexualises children.</li>
+        <li>
+            share sexually explicit or sexually suggestive content without the subject’s knowledge
+            and consent, otherwise known as “revenge porn”. This includes the non-consensual
+            distribution of intimate media that was created either with or without an individual’s
+            consent.
+        </li>
+        <li>
+            share content that glorifies, promotes, or normalises suicide or other acts of physical
+            self-harm. This includes content that encourages others to cut, burn, or starve
+            themselves, as well as content that normalizes eating disorders, such as anorexia and
+            bulimia. Self-harm acts or threats used as a form of emotional manipulation or coercion
+            are also prohibited.
+        </li>
+        <li>
+            share real media depicting gore, excessive violence, or animal harm, especially with the
+            intention to harass or shock others.
+        </li>
+        <li>
+            promote, coordinate, or execute financial scams. Promoting a particular crypto token or
+            NFT does not break this rule in general.
+        </li>
+        <li>
+            be sent persistently as a spam message. This includes repeatedly sending the same or
+            meaningless messages, either in the same chat or across multiple chats.
+        </li>
+    </ul>
+
+    <HashLinkTarget {onCopyUrl} id="10">
+        <h2>Schedule 3: Chat features</h2>
+    </HashLinkTarget>
+    <p>
+        <strong
+            >PLEASE NOTE THAT THE BELOW REPRESENTS FEATURES OF CHAT AS AT THE CURRENT DATE OF THESE
+            TERMS. HOWEVER, THERE MAY BE LEGAL, REGULATORY OR COMMERCIAL REASONS WHY CHAT FEATURE
+            MAY IN THE FUTURE CHANGE FROM THE BELOW.</strong>
+    </p>
+    <p>CHAT gives CHAT holders the following rights:</p>
+    <p>CHAT may be:</p>
+    <ul class="custom_list" style={"--prefix: ''"}>
+        <li>
+            deposited and locked as neurons to participate in the OpenChat DAO governance by voting
+            on proposals;
+        </li>
+        <li>
+            distributed as a voting reward in accordance with the DAO governance rules as set out at
+            https://oc.app/blog/governance.
+        </li>
+        <li>used to purchase a Diamond Membership; and</li>
+        <li>
+            used to gain access to additional features that we may, at our discretion, make
+            available from time to time.
+        </li>
+    </ul>
+    <p>
+        Please see Section G: Participating in OpenChat DAO to find out where you can obtain
+        information on the OpenChat DAO.
+    </p>
+    <p>
+        <strong>
+            Please note that we have <em>no</em> obligation to give CHAT any rights or attributes other
+            than those outlined above, and CHAT shall not give you any rights in relation to any aspect
+            of any business conducted at any time by us other than as explicitly stated above.
+        </strong>
+    </p>
+
+    <HashLinkTarget {onCopyUrl} id="11">
+        <h2>Schedule 4: Multiple accounts</h2>
+    </HashLinkTarget>
+
+    <p>
+        You may not buy or sell OpenChat accounts, nor may you create multiple accounts on the
+        OpenChat Platform:
+    </p>
+    <ul class="custom_list" style={"--prefix: ''"}>
+        <li>that you aren't actively using</li>
+        <li>to squat on usernames with the intention of selling them</li>
+        <li>to farm tokens</li>
+        <li>to give the appearance of activity in a group/community</li>
+        <li>to DoS the platform or otherwise drain platform resources</li>
+        <li>any other nefarious purpose</li>
+    </ul>
+</div>
+
+<style lang="scss">
+    .preamble p {
+        margin-bottom: toRem(24);
+    }
+
+    .section {
+        h2,
+        h3 {
+            margin-bottom: $sp4;
+            display: inline-block;
+        }
+        p {
+            margin-bottom: $sp4;
+        }
+        h2 {
+            @include font(bold, normal, fs-120);
+        }
+
+        h3 {
+            @include font(bold, normal, fs-110);
+        }
+
+        .custom_list.bold > li > h3 {
+            padding-left: 60px;
+        }
+
+        .custom_list {
+            --suffix: ")";
+            list-style-type: none;
+            counter-reset: item;
+            @include font(book, normal, fs-100);
+            margin-bottom: $sp5;
+        }
+
+        .custom_list > li {
+            padding-left: 60px;
+            position: relative;
+            margin-bottom: $sp3;
+        }
+
+        .custom_list.bold > li {
+            padding-left: 0;
+        }
+
+        .custom_list > li::before {
+            content: var(--prefix) counter(item) var(--suffix);
+            counter-increment: item;
+            font-weight: normal;
+            position: absolute;
+            left: 0;
+        }
+
+        .custom_list.bold > li::before {
+            font-weight: bold;
+        }
+    }
+
+    .interpretation {
+        display: grid;
+        grid-template-columns: 1fr 2fr;
+        gap: $sp4;
+        margin-bottom: $sp4;
+
+        @include mobile() {
+            grid-template-columns: 1fr;
+            gap: $sp3;
+        }
+
+        :nth-child(2n-1) {
+            font-weight: bold;
+        }
+    }
+</style>
diff --git a/frontend/app/src/components/landingpages/TermsPage.svelte b/frontend/app/src/desktop/features/landing/TermsPage.svelte
similarity index 92%
rename from frontend/app/src/components/landingpages/TermsPage.svelte
rename to frontend/app/src/desktop/features/landing/TermsPage.svelte
index aa335ef114..835e0eb426 100644
--- a/frontend/app/src/components/landingpages/TermsPage.svelte
+++ b/frontend/app/src/desktop/features/landing/TermsPage.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { querystringStore } from "@client";
-    import { scrollToSection } from "../../utils/urls";
+    import { scrollToSection } from "@src/utils/urls";
     import Headline from "./Headline.svelte";
     import TermsContent from "./TermsContent.svelte";
 
diff --git a/frontend/app/src/components/landingpages/WhitepaperPage.svelte b/frontend/app/src/desktop/features/landing/WhitepaperPage.svelte
similarity index 99%
rename from frontend/app/src/components/landingpages/WhitepaperPage.svelte
rename to frontend/app/src/desktop/features/landing/WhitepaperPage.svelte
index 7a6c05ef45..bf33bb099b 100644
--- a/frontend/app/src/components/landingpages/WhitepaperPage.svelte
+++ b/frontend/app/src/desktop/features/landing/WhitepaperPage.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
     import { locationStore, mobileWidth, querystringStore, toPixel } from "@client";
     import Copy from "svelte-material-icons/ContentCopy.svelte";
-    import { copyToClipboard, scrollToSection } from "../../utils/urls";
-    import CollapsibleCard from "../CollapsibleCard.svelte";
+    import { copyToClipboard, scrollToSection } from "@src/utils/urls";
+    import CollapsibleCard from "@src/desktop/shared/CollapsibleCard.svelte";
     import ExternalLink from "./ExternalLink.svelte";
     import GoogleChart from "./GoogleChart.svelte";
     import HashLink from "./HashLink.svelte";
diff --git a/frontend/app/src/components/landingpages/ZoomableImage.svelte b/frontend/app/src/desktop/features/landing/ZoomableImage.svelte
similarity index 100%
rename from frontend/app/src/components/landingpages/ZoomableImage.svelte
rename to frontend/app/src/desktop/features/landing/ZoomableImage.svelte
diff --git a/frontend/app/src/components/landingpages/blog/AccessGateExpiry.svelte b/frontend/app/src/desktop/features/landing/blog/AccessGateExpiry.svelte
similarity index 100%
rename from frontend/app/src/components/landingpages/blog/AccessGateExpiry.svelte
rename to frontend/app/src/desktop/features/landing/blog/AccessGateExpiry.svelte
diff --git a/frontend/app/src/components/landingpages/blog/BlogPost.svelte b/frontend/app/src/desktop/features/landing/blog/BlogPost.svelte
similarity index 100%
rename from frontend/app/src/components/landingpages/blog/BlogPost.svelte
rename to frontend/app/src/desktop/features/landing/blog/BlogPost.svelte
diff --git a/frontend/app/src/components/landingpages/blog/BlogScreenshot.svelte b/frontend/app/src/desktop/features/landing/blog/BlogScreenshot.svelte
similarity index 100%
rename from frontend/app/src/components/landingpages/blog/BlogScreenshot.svelte
rename to frontend/app/src/desktop/features/landing/blog/BlogScreenshot.svelte
diff --git a/frontend/app/src/components/landingpages/blog/BlogSummary.svelte b/frontend/app/src/desktop/features/landing/blog/BlogSummary.svelte
similarity index 92%
rename from frontend/app/src/components/landingpages/blog/BlogSummary.svelte
rename to frontend/app/src/desktop/features/landing/blog/BlogSummary.svelte
index 9162f019c0..b0fd198233 100644
--- a/frontend/app/src/components/landingpages/blog/BlogSummary.svelte
+++ b/frontend/app/src/desktop/features/landing/blog/BlogSummary.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
     import { mobileWidth } from "@client";
     import Copy from "svelte-material-icons/ContentCopy.svelte";
-    import { copyToClipboard } from "../../../utils/urls";
-    import Link from "../Link.svelte";
+    import { copyToClipboard } from "@src/utils/urls";
+    import Link from "@src/desktop/features/landing/Link.svelte";
 
     interface Props {
         title: string;
diff --git a/frontend/app/src/components/landingpages/blog/Chit.svelte b/frontend/app/src/desktop/features/landing/blog/Chit.svelte
similarity index 98%
rename from frontend/app/src/components/landingpages/blog/Chit.svelte
rename to frontend/app/src/desktop/features/landing/blog/Chit.svelte
index 0fc6b993ce..b1a049ab53 100644
--- a/frontend/app/src/components/landingpages/blog/Chit.svelte
+++ b/frontend/app/src/desktop/features/landing/blog/Chit.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import ExternalLink from "../ExternalLink.svelte";
+    import ExternalLink from "@src/desktop/features/landing/ExternalLink.svelte";
 </script>
 
 <section>
diff --git a/frontend/app/src/components/landingpages/blog/Communities.svelte b/frontend/app/src/desktop/features/landing/blog/Communities.svelte
similarity index 98%
rename from frontend/app/src/components/landingpages/blog/Communities.svelte
rename to frontend/app/src/desktop/features/landing/blog/Communities.svelte
index 58637d993e..4b11bb295c 100644
--- a/frontend/app/src/components/landingpages/blog/Communities.svelte
+++ b/frontend/app/src/desktop/features/landing/blog/Communities.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import Link from "../Link.svelte";
+    import Link from "@src/desktop/features/landing/Link.svelte";
     import BlogScreenshot from "./BlogScreenshot.svelte";
 </script>
 
diff --git a/frontend/app/src/components/landingpages/blog/CommunitiesReleased.svelte b/frontend/app/src/desktop/features/landing/blog/CommunitiesReleased.svelte
similarity index 99%
rename from frontend/app/src/components/landingpages/blog/CommunitiesReleased.svelte
rename to frontend/app/src/desktop/features/landing/blog/CommunitiesReleased.svelte
index 34f6596401..8a71496a0c 100644
--- a/frontend/app/src/components/landingpages/blog/CommunitiesReleased.svelte
+++ b/frontend/app/src/desktop/features/landing/blog/CommunitiesReleased.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import Link from "../Link.svelte";
+    import Link from "@src/desktop/features/landing/Link.svelte";
     import BlogScreenshot from "./BlogScreenshot.svelte";
 </script>
 
diff --git a/frontend/app/src/components/landingpages/blog/Governance.svelte b/frontend/app/src/desktop/features/landing/blog/Governance.svelte
similarity index 98%
rename from frontend/app/src/components/landingpages/blog/Governance.svelte
rename to frontend/app/src/desktop/features/landing/blog/Governance.svelte
index dd498a7e43..d4b7c98d01 100644
--- a/frontend/app/src/components/landingpages/blog/Governance.svelte
+++ b/frontend/app/src/desktop/features/landing/blog/Governance.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-    import ExternalLink from "../ExternalLink.svelte";
-    import Link from "../Link.svelte";
+    import ExternalLink from "@src/desktop/features/landing/ExternalLink.svelte";
+    import Link from "@src/desktop/features/landing/Link.svelte";
     import BlogScreenshot from "./BlogScreenshot.svelte";
 </script>
 
diff --git a/frontend/app/src/components/landingpages/blog/ICFootprint.svelte b/frontend/app/src/desktop/features/landing/blog/ICFootprint.svelte
similarity index 96%
rename from frontend/app/src/components/landingpages/blog/ICFootprint.svelte
rename to frontend/app/src/desktop/features/landing/blog/ICFootprint.svelte
index b64ad7c9df..d5c4f7d7af 100644
--- a/frontend/app/src/components/landingpages/blog/ICFootprint.svelte
+++ b/frontend/app/src/desktop/features/landing/blog/ICFootprint.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import ExternalLink from "../ExternalLink.svelte";
+    import ExternalLink from "@src/desktop/features/landing/ExternalLink.svelte";
 </script>
 
 <section>
diff --git a/frontend/app/src/desktop/features/landing/blog/SignIn.svelte b/frontend/app/src/desktop/features/landing/blog/SignIn.svelte
new file mode 100644
index 0000000000..f74951134b
--- /dev/null
+++ b/frontend/app/src/desktop/features/landing/blog/SignIn.svelte
@@ -0,0 +1,163 @@
+<script lang="ts">
+    import ExternalLink from "@src/desktop/features/landing/ExternalLink.svelte";
+    import BlogScreenshot from "./BlogScreenshot.svelte";
+</script>
+
+<section>
+    <p>
+        In addition to Internet Identity, OpenChat users can now sign-in or sign-up using email, an
+        Ethereum wallet or a Solana wallet. Coming soon are, email recovery, sign-in with a simple
+        PassKey, flexible sessions and two-factor authentication (2FA).
+    </p>
+    <BlogScreenshot
+        caption="Sign in to OpenChat"
+        desktopUrl={"/assets/blog/signin/signin_desktop.png"}
+        mobileUrl={"/assets/blog/signin/signin_mobile.png"} />
+</section>
+<section>
+    <h2>Sign in with email</h2>
+    <p>
+        The default option for new sign-ups is email. Your email is not stored but is used to
+        generate a unique (and deterministic) identifier. A secure <ExternalLink
+            href="https://auth0.com/docs/authenticate/passwordless/authentication-methods/email-magic-link"
+            >magic link</ExternalLink>
+        including this identifier is sent to your email and is used to prove ownership of the email.
+        Having clicked the email link, enter a username to create your OpenChat account. No password
+        is required. To sign in at a later date, simply repeat the process by entering your email and
+        you will be sent a sign-in link.
+    </p>
+    <BlogScreenshot
+        caption="Sign in with email"
+        desktopUrl={"/assets/blog/signin/email_desktop.png"}
+        mobileUrl={"/assets/blog/signin/email_mobile.png"} />
+</section>
+<section>
+    <h2>Sign-in with II</h2>
+    <p>
+        <ExternalLink href="https://internetcomputer.org/internet-identity"
+            >Internet Identity</ExternalLink>
+        is the gold standard for signing in to apps on the Internet Computer. It is super secure and
+        soon will support
+        <ExternalLink href="https://en.wikipedia.org/wiki/Verifiable_credentials"
+            >verifiable credentials</ExternalLink> (VCs) This will allow users to acquire credentials/attributes
+        from a 3rd party "issuer" and share these securely with OpenChat or other “relying parties”.
+        Owners of OpenChat communities, channels and groups will be able to gate access using VCs. Some
+        examples:
+    </p>
+    <ul>
+        <li>Is the user over 18?</li>
+        <li>Are they a unique person?</li>
+        <li>Did they attend conference XYZ?</li>
+        <li>Are they an employee of ABC?</li>
+    </ul>
+    <p>
+        Going forwards the primary way to be eligible for airdrops on OpenChat will be to prove
+        unique personhood using a verified credential.
+    </p>
+</section>
+<section>
+    <h2>Sign-in with Ethereum wallet</h2>
+    <p>
+        For users coming from the Ethereum ecosystem, OpenChat now offers sign-in by Ethereum wallet
+        such as MetaMask, increasing the potential pool of OpenChat users. In the future, we
+        anticipate signing in with your Ethereum wallet will enable you to send/swap/tip/gift ETH
+        ecosystem tokens as you currently can with ICP tokens, albeit not so quickly or cheaply!
+    </p>
+    <BlogScreenshot
+        caption="Sign in with Ethereum wallet"
+        desktopUrl={"/assets/blog/signin/ethereum_desktop.png"}
+        mobileUrl={"/assets/blog/signin/ethereum_mobile.png"} />
+</section>
+<section>
+    <h2>Sign-in with Solana wallet</h2>
+    <p>See the Ethereum wallet above. The same goes for the Solana wallet and ecosystem!</p>
+    <BlogScreenshot
+        caption="Sign in with Solana wallet"
+        desktopUrl={"/assets/blog/signin/solana_desktop.png"}
+        mobileUrl={"/assets/blog/signin/solana_mobile.png"} />
+</section>
+<section>
+    <h2>What has changed?</h2>
+    <p>
+        Up until recently, to sign in to OpenChat, users would authenticate with II then use the
+        returned key to sign requests to OpenChat canisters. This worked fine, and was simple to
+        implement, but it prevented OpenChat from supporting things such as email account recovery,
+        or having multiple sign in options per account.
+    </p>
+    <p>
+        To solve this, we have introduced the <ExternalLink
+            href="https://github.com/open-chat-labs/open-chat/tree/master/backend/canisters/identity"
+            >Identity canister</ExternalLink> which can link multiple authentication identities to a
+        single OpenChat account, allowing users to sign in using any of them.
+    </p>
+    <p>
+        Now, when a user signs in to OpenChat, they first authenticate via their chosen provider,
+        then use the returned signing key to authenticate with the Identity canister. The Identity
+        canister checks which OpenChat account the key is linked to (or creates a new one) and
+        returns a new key which is used to sign requests to OpenChat canisters on behalf of the
+        user.
+    </p>
+    <p>
+        To generate email magic links, two private keys are used, one in the canister and one in
+        AWS. Using this mechanism, even someone with physical access to the nodes is unable to
+        generate valid links since they would not know the key in AWS. However, the emails
+        themselves are sent from AWS servers and as a result email sign-in is only as secure as
+        other web2 services. For the security paranoid it is recommended to use II.
+    </p>
+</section>
+<section>
+    <h2>Multiple sign-in providers</h2>
+    <p>
+        Now that multiple sign-in providers can be linked to the same OpenChat account the following
+        use cases will be supported.
+    </p>
+    <p>
+        Firstly, as a backup, in case you lose access to your account. Whilst II does allow you to
+        recover your account by seed phrase and to set up multiple devices, it isn't foolproof and
+        many users lost access when they changed mobile phone or laptop. Users will be able to
+        associate an email with their account for simple recovery. Even if your primary sign-in is
+        by email, you will be able to add an additional recovery email.
+    </p>
+    <p>
+        Secondly, to gain access to the specific features offered by a particular provider while
+        keeping the same OpenChat account. So for example, by signing in with II, users will be able
+        to provide Verifiable Credentials.
+    </p>
+</section>
+<section>
+    <h2>Simple Passkey</h2>
+    <p>
+        A <ExternalLink href="https://webauthn.me/passkeys">PassKey</ExternalLink> is a password replacement
+        typically using a biometric device for a faster, easier, and more secure user sign-in experience.
+        This is the same technology used by II but without the complication of "II anchors". Using a
+        PassKey won't be possible for sign-up but only as an additional provider. This is because if
+        you were to lose access to your PassKey device (say your phone or laptop) then you would lose
+        access to your OpenChat account. A good combination will be to sign up with an email and then
+        add a PassKey. The PassKey (e.g. a fingerprint scan) can be used day to day to provide quick
+        and secure access to your account, and if you ever lose access you can recover by email.
+    </p>
+</section>
+<section>
+    <h2>Enhanced session management</h2>
+    <p>
+        A "session" is the period you have been signed in for. This was limited by II to 30 days but
+        with the introduction of the Identity canister this can now be any duration. Some likely
+        options are:
+    </p>
+    <ul>
+        <li>
+            indefinite sessions which lasts until you manually sign out (default for mobile devices)
+        </li>
+        <li>30 day sessions (default for non-mobile devices)</li>
+        <li>secure mode which requires sign-in whenever you open OpenChat</li>
+    </ul>
+    <p>Also coming is the option to sign out of your account across all devices simultaneously.</p>
+</section>
+<section>
+    <h2>2FA</h2>
+    <p>
+        The new system will also support Two-factor authentication (2FA). Users will be able to
+        configure their accounts to require sign-in by 2 providers, say Metamask and a Passkey, or a
+        PassKey and an authenticator app.
+    </p>
+</section>
diff --git a/frontend/app/src/components/landingpages/blog/Translation.svelte b/frontend/app/src/desktop/features/landing/blog/Translation.svelte
similarity index 98%
rename from frontend/app/src/components/landingpages/blog/Translation.svelte
rename to frontend/app/src/desktop/features/landing/blog/Translation.svelte
index 379102541c..d922f5516d 100644
--- a/frontend/app/src/components/landingpages/blog/Translation.svelte
+++ b/frontend/app/src/desktop/features/landing/blog/Translation.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import ExternalLink from "../ExternalLink.svelte";
+    import ExternalLink from "@src/desktop/features/landing/ExternalLink.svelte";
     import BlogScreenshot from "./BlogScreenshot.svelte";
 </script>
 
diff --git a/frontend/app/src/components/landingpages/blog/VideoCallsReleased.svelte b/frontend/app/src/desktop/features/landing/blog/VideoCallsReleased.svelte
similarity index 98%
rename from frontend/app/src/components/landingpages/blog/VideoCallsReleased.svelte
rename to frontend/app/src/desktop/features/landing/blog/VideoCallsReleased.svelte
index 5d3cc14066..15b3f7fb94 100644
--- a/frontend/app/src/components/landingpages/blog/VideoCallsReleased.svelte
+++ b/frontend/app/src/desktop/features/landing/blog/VideoCallsReleased.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-    import Markdown from "@shared_components/Markdown.svelte";
-    import ExternalLink from "../ExternalLink.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import ExternalLink from "@src/desktop/features/landing/ExternalLink.svelte";
 </script>
 
 <section>
diff --git a/frontend/app/src/components/landingpages/blog/WebsiteReleases.svelte b/frontend/app/src/desktop/features/landing/blog/WebsiteReleases.svelte
similarity index 97%
rename from frontend/app/src/components/landingpages/blog/WebsiteReleases.svelte
rename to frontend/app/src/desktop/features/landing/blog/WebsiteReleases.svelte
index 5d030e3d1d..1af13f367e 100644
--- a/frontend/app/src/components/landingpages/blog/WebsiteReleases.svelte
+++ b/frontend/app/src/desktop/features/landing/blog/WebsiteReleases.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import ExternalLink from "../ExternalLink.svelte";
+    import ExternalLink from "@src/desktop/features/landing/ExternalLink.svelte";
 </script>
 
 <section>
diff --git a/frontend/app/src/components/landingpages/blog/posts.ts b/frontend/app/src/desktop/features/landing/blog/posts.ts
similarity index 100%
rename from frontend/app/src/components/landingpages/blog/posts.ts
rename to frontend/app/src/desktop/features/landing/blog/posts.ts
diff --git a/frontend/app/src/components/landingpages/icons/Dao.svelte b/frontend/app/src/desktop/features/landing/icons/Dao.svelte
similarity index 100%
rename from frontend/app/src/components/landingpages/icons/Dao.svelte
rename to frontend/app/src/desktop/features/landing/icons/Dao.svelte
diff --git a/frontend/app/src/components/landingpages/icons/OnChain.svelte b/frontend/app/src/desktop/features/landing/icons/OnChain.svelte
similarity index 100%
rename from frontend/app/src/components/landingpages/icons/OnChain.svelte
rename to frontend/app/src/desktop/features/landing/icons/OnChain.svelte
diff --git a/frontend/app/src/components/landingpages/icons/OpenSource.svelte b/frontend/app/src/desktop/features/landing/icons/OpenSource.svelte
similarity index 100%
rename from frontend/app/src/components/landingpages/icons/OpenSource.svelte
rename to frontend/app/src/desktop/features/landing/icons/OpenSource.svelte
diff --git a/frontend/app/src/components/landingpages/icons/Reliable.svelte b/frontend/app/src/desktop/features/landing/icons/Reliable.svelte
similarity index 100%
rename from frontend/app/src/components/landingpages/icons/Reliable.svelte
rename to frontend/app/src/desktop/features/landing/icons/Reliable.svelte
diff --git a/frontend/app/src/components/landingpages/icons/Scalable.svelte b/frontend/app/src/desktop/features/landing/icons/Scalable.svelte
similarity index 100%
rename from frontend/app/src/components/landingpages/icons/Scalable.svelte
rename to frontend/app/src/desktop/features/landing/icons/Scalable.svelte
diff --git a/frontend/app/src/components/landingpages/icons/Secure.svelte b/frontend/app/src/desktop/features/landing/icons/Secure.svelte
similarity index 100%
rename from frontend/app/src/components/landingpages/icons/Secure.svelte
rename to frontend/app/src/desktop/features/landing/icons/Secure.svelte
diff --git a/frontend/app/src/components/home/nav/LeftNav.svelte b/frontend/app/src/desktop/features/nav/LeftNav.svelte
similarity index 96%
rename from frontend/app/src/components/home/nav/LeftNav.svelte
rename to frontend/app/src/desktop/features/nav/LeftNav.svelte
index eb922e9082..5b5170f416 100644
--- a/frontend/app/src/components/home/nav/LeftNav.svelte
+++ b/frontend/app/src/desktop/features/nav/LeftNav.svelte
@@ -29,7 +29,7 @@
         unreadDirectAndGroupCountsStore,
         unreadFavouriteCountsStore,
     } from "@client";
-    import { navigate } from "@utils/navigation";
+    import { navigate } from "@src/utils/navigation";
     import { getContext, onMount, tick } from "svelte";
     import { type DndEvent, dndzone } from "svelte-dnd-action";
     import ArrowRight from "svelte-material-icons/ArrowExpandRight.svelte";
@@ -39,14 +39,14 @@
     import HeartOutline from "svelte-material-icons/HeartOutline.svelte";
     import Hamburger from "svelte-material-icons/Menu.svelte";
     import { flip } from "svelte/animate";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { rtlStore } from "../../../stores/rtl";
-    import { disableChit, hideChitIcon } from "../../../stores/settings";
-    import { now } from "../../../stores/time";
-    import { isTouchDevice } from "../../../utils/devices";
-    import Avatar from "../../Avatar.svelte";
-    import HoverIcon from "../../HoverIcon.svelte";
-    import MenuIcon from "../../MenuIcon.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { rtlStore } from "@src/stores/rtl";
+    import { disableChit, hideChitIcon } from "@src/stores/settings";
+    import { now } from "@src/stores/time";
+    import { isTouchDevice } from "@src/utils/devices";
+    import Avatar from "@src/desktop/shared/Avatar.svelte";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import MenuIcon from "@src/desktop/shared/MenuIcon.svelte";
     import LeftNavItem from "./LeftNavItem.svelte";
     import LighteningBolt from "./LighteningBolt.svelte";
     import MainMenu from "./MainMenu.svelte";
diff --git a/frontend/app/src/components/home/nav/LeftNavItem.svelte b/frontend/app/src/desktop/features/nav/LeftNavItem.svelte
similarity index 89%
rename from frontend/app/src/components/home/nav/LeftNavItem.svelte
rename to frontend/app/src/desktop/features/nav/LeftNavItem.svelte
index a558bdec34..33b3e5577e 100644
--- a/frontend/app/src/components/home/nav/LeftNavItem.svelte
+++ b/frontend/app/src/desktop/features/nav/LeftNavItem.svelte
@@ -2,10 +2,10 @@
     import type { ResourceKey, UnreadCounts, VideoCallCounts } from "@client";
     import { emptyUnreadCounts, navOpen } from "@client";
     import { _ } from "svelte-i18n";
-    import WithVerifiedBadge from "../../icons/WithVerifiedBadge.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import UnreadCount from "../UnreadCount.svelte";
-    import VideoCallIcon from "../video/VideoCallIcon.svelte";
+    import WithVerifiedBadge from "@src/desktop/ui/icons/WithVerifiedBadge.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import UnreadCount from "@src/desktop/shared/UnreadCount.svelte";
+    import VideoCallIcon from "@src/desktop/features/calls/VideoCallIcon.svelte";
 
     interface Props {
         label: ResourceKey;
diff --git a/frontend/app/src/components/home/nav/LighteningBolt.svelte b/frontend/app/src/desktop/features/nav/LighteningBolt.svelte
similarity index 100%
rename from frontend/app/src/components/home/nav/LighteningBolt.svelte
rename to frontend/app/src/desktop/features/nav/LighteningBolt.svelte
diff --git a/frontend/app/src/components/home/nav/MainMenu.svelte b/frontend/app/src/desktop/features/nav/MainMenu.svelte
similarity index 95%
rename from frontend/app/src/components/home/nav/MainMenu.svelte
rename to frontend/app/src/desktop/features/nav/MainMenu.svelte
index dc114004d2..831b758274 100644
--- a/frontend/app/src/components/home/nav/MainMenu.svelte
+++ b/frontend/app/src/desktop/features/nav/MainMenu.svelte
@@ -7,7 +7,7 @@
         platformOperatorStore,
         publish,
     } from "@client";
-    import { navigate } from "@utils/navigation";
+    import { navigate } from "@src/utils/navigation";
     import { getContext } from "svelte";
     import AccountSettings from "svelte-material-icons/AccountSettingsOutline.svelte";
     import ChartLine from "svelte-material-icons/ChartLine.svelte";
@@ -23,10 +23,10 @@
     import Road from "svelte-material-icons/RoadVariant.svelte";
     import Security from "svelte-material-icons/Security.svelte";
     import Wallet from "svelte-material-icons/WalletOutline.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Menu from "../../Menu.svelte";
-    import MenuItem from "../../MenuItem.svelte";
-    import Translatable from "../../Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Menu from "@src/desktop/shared/Menu.svelte";
+    import MenuItem from "@src/desktop/shared/MenuItem.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
 
     const client = getContext<OpenChat>("client");
 </script>
diff --git a/frontend/app/src/desktop/features/onboard/AnonFooter.svelte b/frontend/app/src/desktop/features/onboard/AnonFooter.svelte
new file mode 100644
index 0000000000..7fdb4c3a65
--- /dev/null
+++ b/frontend/app/src/desktop/features/onboard/AnonFooter.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+    import type { OpenChat } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import Markdown from "@src/ui/Markdown.svelte";
+
+    const client = getContext<OpenChat>("client");
+</script>
+
+<div
+    role="button"
+    tabindex="0"
+    on:click={() => client.updateIdentityState({ kind: "logging_in" })}
+    class="anon-footer">
+    <Markdown text={$_("createAccountOrSignIn")} />
+</div>
+
+<style lang="scss">
+    .anon-footer {
+        position: absolute;
+        height: toRem(50);
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        bottom: 0;
+        bottom: var(--safe-inset);
+        cursor: pointer;
+        @include z-index("anon-banner");
+        background-color: var(--notificationBar-bg);
+        color: var(--notificationBar-txt);
+        padding: $sp4 $sp3;
+        font-size: 1.2rem;
+    }
+</style>
diff --git a/frontend/app/src/components/onboard/ModeSelection.svelte b/frontend/app/src/desktop/features/onboard/ModeSelection.svelte
similarity index 87%
rename from frontend/app/src/components/onboard/ModeSelection.svelte
rename to frontend/app/src/desktop/features/onboard/ModeSelection.svelte
index 73a819452c..8e8c7151e9 100644
--- a/frontend/app/src/components/onboard/ModeSelection.svelte
+++ b/frontend/app/src/desktop/features/onboard/ModeSelection.svelte
@@ -2,10 +2,10 @@
     import { userCreatedStore } from "@client";
     import AccountPlus from "svelte-material-icons/AccountPlus.svelte";
     import Login from "svelte-material-icons/Login.svelte";
-    import { i18nKey } from "../../i18n/i18n";
-    import Button from "../Button.svelte";
-    import OnBoardOptionLogo from "../home/profile/OnBoardOptionLogo.svelte";
-    import Translatable from "../Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Button from "@src/ui/Button.svelte";
+    import OnBoardOptionLogo from "@src/desktop/features/profile/OnBoardOptionLogo.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
 
     interface Props {
         onSignIn: () => void;
diff --git a/frontend/app/src/desktop/features/onboard/OnboardModal.svelte b/frontend/app/src/desktop/features/onboard/OnboardModal.svelte
new file mode 100644
index 0000000000..f7dc230378
--- /dev/null
+++ b/frontend/app/src/desktop/features/onboard/OnboardModal.svelte
@@ -0,0 +1,182 @@
+<script lang="ts">
+    import { i18nKey, setLocale, supportedLanguages } from "@src/i18n/i18n";
+    import { anonUserStore, identityStateStore, OpenChat, type CreatedUser } from "@client";
+    import { getContext } from "svelte";
+    import { locale } from "svelte-i18n";
+    import FancyLoader from "@src/desktop/ui/icons/FancyLoader.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Select from "@src/desktop/shared/Select.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import ModeSelection from "./ModeSelection.svelte";
+    import SignIn from "./SignIn.svelte";
+    import SignUp from "./SignUp.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    type Step = "select_mode" | "sign_up" | "sign_in";
+
+    interface Props {
+        step?: Step;
+        onClose: () => void;
+    }
+
+    let { onClose, step = $bindable("select_mode") }: Props = $props();
+    let error: string | undefined = $state(undefined);
+    let selectedLocale = $state(($locale as string).substring(0, 2));
+    $effect(() => {
+        setLocale(selectedLocale);
+    });
+
+    function cancel() {
+        if ($anonUserStore && $identityStateStore.kind === "logging_in") {
+            client.updateIdentityState({ kind: "anon" });
+        }
+        onClose();
+    }
+
+    let spinning = $state(false);
+
+    let title = $derived.by(() => {
+        switch (step) {
+            case "select_mode":
+                return i18nKey("register.welcome");
+            case "sign_in":
+                return i18nKey("loginDialog.title");
+            case "sign_up":
+                return i18nKey("loginDialog.signupTitle");
+        }
+    });
+
+    function onCreatedUser(user: CreatedUser) {
+        client.onRegisteredUser(user);
+        onClose();
+    }
+
+    function logout(e: Event) {
+        e.preventDefault();
+        e.stopPropagation();
+        client.logout();
+    }
+</script>
+
+<ModalContent fill hideFooter onClose={cancel} closeIcon={step === "select_mode"} onBack={() => (step = "select_mode")} backIcon={step !== "select_mode"}>
+    {#snippet header()}
+        <div class="header">
+            <div class="logo-img">
+                <FancyLoader loop={spinning} />
+            </div>
+            <div class="title">
+                <Translatable resourceKey={title} />
+                <div class="strapline">
+                    <Translatable resourceKey={i18nKey("loginDialog.strapline")} />
+                </div>
+            </div>
+        </div>
+    {/snippet}
+    {#snippet body()}
+        <div class="body">
+            {#if step === "select_mode"}
+                <ModeSelection
+                    onSignIn={() => (step = "sign_in")}
+                    onSignUp={() => (step = "sign_up")} />
+            {:else if step === "sign_in"}
+                <SignIn bind:spinning bind:error {onClose} />
+            {:else if step === "sign_up"}
+                <SignUp {onCreatedUser} bind:error />
+            {/if}
+        </div>
+    {/snippet}
+</ModalContent>
+
+<div class="lang">
+    <Select bind:value={selectedLocale}>
+        {#each supportedLanguages as lang}
+            <option value={lang.code}>{lang.name}</option>
+        {/each}
+    </Select>
+</div>
+
+<a class="logout" role="button" href="/" onclick={logout}>
+    <Translatable resourceKey={i18nKey("logout")} />
+</a>
+
+<style lang="scss">
+    :global(.lang .wrapper .icon) {
+        right: -1px;
+        top: 1px;
+    }
+
+    :global(.lang select.select) {
+        @include font(light, normal, fs-90);
+        background-color: transparent;
+        min-width: 80px;
+        height: auto;
+        color: #fff;
+        padding: $sp2 $sp5 $sp2 $sp4;
+        border: 1px solid var(--bd);
+
+        option {
+            @include font(light, normal, fs-90);
+        }
+    }
+
+    .body {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: $sp4;
+    }
+    .header {
+        display: flex;
+        gap: $sp3;
+        @include font(bold, normal, fs-130, 29);
+        @include mobile() {
+            @include font(bold, normal, fs-120, 29);
+        }
+        align-items: center;
+
+        .logo-img {
+            height: 56px;
+            width: 56px;
+
+            @include mobile() {
+                height: 40px;
+                width: 40px;
+            }
+        }
+
+        .strapline {
+            @include font(light, normal, fs-80);
+            color: var(--txt-light);
+        }
+
+        .title {
+            display: flex;
+            flex-direction: column;
+            gap: $sp2;
+        }
+    }
+
+    .lang {
+        position: absolute;
+        left: $sp3;
+        top: $sp3;
+    }
+
+    .logout {
+        @include font(light, normal, fs-90);
+        cursor: pointer;
+        position: absolute;
+        top: $sp3;
+        right: $sp3;
+        color: #fff;
+        text-decoration: underline;
+        text-decoration-color: var(--accent);
+        text-underline-offset: $sp1;
+        @media (hover: hover) {
+            &:hover {
+                text-decoration-thickness: 2px;
+            }
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/onboard/SignIn.svelte b/frontend/app/src/desktop/features/onboard/SignIn.svelte
new file mode 100644
index 0000000000..2fe4d4e98b
--- /dev/null
+++ b/frontend/app/src/desktop/features/onboard/SignIn.svelte
@@ -0,0 +1,152 @@
+<script lang="ts">
+    import { i18nKey } from "@src/i18n/i18n";
+    import { configKeys } from "@src/utils/config";
+    import { EmailSigninHandler } from "@src/utils/signin";
+    import {
+        AuthProvider,
+        identityStateStore,
+        OpenChat,
+        querystringStore,
+        selectedAuthProviderStore,
+    } from "@client";
+    import { getContext } from "svelte";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import ErrorMessage from "@src/desktop/shared/ErrorMessage.svelte";
+    import EmailSigninFeedback from "@src/desktop/shared/EmailSigninFeedback.svelte";
+    import ChooseSignInOption from "@src/desktop/features/profile/ChooseSignInOption.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        onClose: () => void;
+        error: string | undefined;
+        spinning: boolean;
+    }
+
+    let { error = $bindable(), onClose, spinning = $bindable() }: Props = $props();
+    void spinning;
+
+    let loginState = $state<"options" | "logging-in">("options");
+    let emailInvalid = $state(false);
+    let email = $state(localStorage.getItem(configKeys.selectedAuthEmail) ?? "");
+    let verificationCode: string | undefined = $state(undefined);
+    let emailSigninHandler = new EmailSigninHandler(client, "registration", true);
+    let restrictTo = $derived(new Set($querystringStore.getAll("auth")));
+    let loggingInWithEmail = $derived(
+        loginState === "logging-in" && $selectedAuthProviderStore === AuthProvider.EMAIL,
+    );
+    let loggingInWithEth = $derived(
+        loginState === "logging-in" && $selectedAuthProviderStore === AuthProvider.ETH,
+    );
+    let loggingInWithSol = $derived(
+        loginState === "logging-in" && $selectedAuthProviderStore === AuthProvider.SOL,
+    );
+
+    $effect(() => {
+        spinning =
+            loginState === "logging-in" &&
+            error === undefined &&
+            $selectedAuthProviderStore !== AuthProvider.ETH &&
+            $selectedAuthProviderStore !== AuthProvider.SOL;
+    });
+
+    $effect(() => {
+        if ($identityStateStore.kind === "anon" && loginState === "logging-in") {
+            onClose();
+        }
+        if ($identityStateStore.kind === "logged_in") {
+            onClose();
+        }
+    });
+
+    function login(provider: AuthProvider) {
+        if (emailInvalid && provider === AuthProvider.EMAIL) {
+            return;
+        }
+
+        client.gaTrack("initiated_signin", "registration", provider);
+
+        localStorage.setItem(configKeys.selectedAuthEmail, email);
+        selectedAuthProviderStore.set(provider);
+        loginState = "logging-in";
+        error = undefined;
+
+        if (provider === AuthProvider.EMAIL) {
+            verificationCode = undefined;
+            emailSigninHandler.generateMagicLink(email).then((resp) => {
+                if (resp.kind === "success") {
+                    verificationCode = resp.code;
+                } else if (resp.kind === "email_invalid") {
+                    error = "loginDialog.invalidEmail";
+                } else if (resp.kind === "failed_to_send_email") {
+                    console.debug("generateMagicLink failed_to_send_email", resp.error);
+                    error = "loginDialog.failedToSendEmail";
+                } else {
+                    error = "loginDialog.unexpectedError";
+                }
+            });
+        } else if (provider === AuthProvider.PASSKEY) {
+            if (client.isNativeAndroid()) {
+                client.signInWithAndroidWebAuthn();
+            } else {
+                client.signInWithWebAuthn();
+            }
+        } else if (provider === AuthProvider.ETH) {
+            console.log("Logging in with ETH");
+        } else if (provider === AuthProvider.SOL) {
+            console.log("Logging in with SOL");
+        } else {
+            client.login();
+        }
+    }
+
+    function cancelLink() {
+        client.gaTrack("email_signin_cancelled", "registration");
+        emailSigninHandler.stopPolling();
+        loginState = "options";
+    }
+</script>
+
+{#if loginState === "options"}
+    <ChooseSignInOption onLogin={login} mode={"signin"} {restrictTo} bind:emailInvalid bind:email />
+{:else if loggingInWithEmail}
+    <EmailSigninFeedback
+        code={verificationCode}
+        polling={$emailSigninHandler}
+        onCopy={(code) => emailSigninHandler.copyCode(code)} />
+    {#if error !== undefined}
+        <ErrorMessage><Translatable resourceKey={i18nKey(error)} /></ErrorMessage>
+    {/if}
+{:else if loggingInWithEth}
+    {#await import("@src/desktop/shared/SigninWithEth.svelte")}
+        <div class="loading">...</div>
+    {:then { default: SigninWithEth }}
+        <SigninWithEth />
+    {/await}
+{:else if loggingInWithSol}
+    {#await import("@src/desktop/shared/SigninWithSol.svelte")}
+        <div class="loading">...</div>
+    {:then { default: SigninWithSol }}
+        <SigninWithSol />
+    {/await}
+{/if}
+
+{#if loggingInWithEmail}
+    <div class="footer">
+        <ButtonGroup>
+            <Button onClick={cancelLink}
+                ><Translatable
+                    resourceKey={i18nKey(
+                        error === undefined ? "cancel" : "loginDialog.back",
+                    )} /></Button>
+        </ButtonGroup>
+    </div>
+{/if}
+
+<style lang="scss">
+    .footer {
+        align-self: flex-end;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/onboard/SignUp.svelte b/frontend/app/src/desktop/features/onboard/SignUp.svelte
new file mode 100644
index 0000000000..638621738c
--- /dev/null
+++ b/frontend/app/src/desktop/features/onboard/SignUp.svelte
@@ -0,0 +1,318 @@
+<script lang="ts">
+    import { i18nKey } from "@src/i18n/i18n";
+    import { createLocalStorageStore } from "@src/utils/store";
+    import EmailValidator from "email-validator";
+    import type { CreatedUser, OpenChat, UserOrUserGroup, UserSummary } from "@client";
+    import {
+        AuthProvider,
+        identityStateStore,
+        mobileWidth,
+        selectedAuthProviderStore,
+    } from "@client";
+    import { getContext, onMount } from "svelte";
+    import AlertBox from "@src/desktop/shared/AlertBox.svelte";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import ErrorMessage from "@src/desktop/shared/ErrorMessage.svelte";
+    import FindUser from "@src/desktop/shared/FindUser.svelte";
+    import Input from "@src/desktop/shared/Input.svelte";
+    import TermsContent from "@src/desktop/features/landing/TermsContent.svelte";
+    import Legend from "@src/desktop/shared/Legend.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import UsernameInput from "@src/desktop/shared/UsernameInput.svelte";
+    import UserPill from "@src/desktop/shared/UserPill.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        onCreatedUser: (user: CreatedUser) => void;
+        error: string | undefined;
+    }
+
+    let { error = $bindable(), onCreatedUser }: Props = $props();
+
+    let showGuidelines = $state(false);
+    let username = $state("");
+    let usernameValid = $state(false);
+    let usernameStore = createLocalStorageStore("openchat_candidate_username", "");
+    let checkingUsername: boolean = $state(false);
+    let email = $state("");
+    let emailValid = $derived(email.length === 0 || EmailValidator.validate(email));
+    let busy = $state(false);
+    let badCode = $state(false);
+    let referringUser: UserSummary | undefined = $state(undefined);
+    let createdUser: CreatedUser | undefined = undefined;
+    let passkeyCreated = $state(false);
+
+    function onShowGuidelines() {
+        showGuidelines = true;
+        client.gaTrack("show_guidelines_clicked", "registration");
+    }
+    function onCloseGuidelines() {
+        showGuidelines = false;
+    }
+
+    async function register(e: Event) {
+        e.preventDefault();
+        if (usernameValid && emailValid) {
+            usernameStore.set(username);
+            try {
+                busy = true;
+                selectedAuthProviderStore.set(AuthProvider.PASSKEY);
+
+                // if we are already in the registering state it means that we are somehow
+                // already signed in, but there is no user. In that case, skip the webauthn
+                // and just call registerUser
+                if ($identityStateStore.kind !== "registering") {
+                    if (!passkeyCreated) {
+                        if (client.isNativeAndroid()) {
+                            await client.signUpWithAndroidWebAuthn(true, username);
+                        } else {
+                            await client.signUpWithWebAuthn(true, username);
+                        }
+                    }
+                }
+                passkeyCreated = true;
+                await registerUser(username, email.length > 0 ? email : undefined);
+            } catch (err) {
+                error = `Error registering user: ${err}`;
+            } finally {
+                busy = false;
+            }
+        }
+    }
+
+    async function registerUser(username: string, email: string | undefined) {
+        await client.registerUser(username, email).then((resp) => {
+            badCode = false;
+            if (resp.kind === "username_taken") {
+                error = "register.usernameTaken";
+            } else if (resp.kind === "username_too_short") {
+                error = "register.usernameTooShort";
+            } else if (resp.kind === "username_too_long") {
+                error = "register.usernameTooLong";
+            } else if (resp.kind === "username_invalid") {
+                error = "register.usernameInvalid";
+            } else if (resp.kind === "email_invalid") {
+                error = "register.emailInvalid";
+            } else if (resp.kind === "user_limit_reached") {
+                error = "register.userLimitReached";
+            } else if (resp.kind === "internal_error") {
+                error = "unexpectedError";
+            } else if (resp.kind === "referral_code_invalid") {
+                error = "register.referralCodeInvalid";
+                badCode = true;
+            } else if (resp.kind === "referral_code_already_claimed") {
+                error = "register.referralCodeAlreadyClaimed";
+                badCode = true;
+            } else if (resp.kind === "referral_code_expired") {
+                error = "register.referralCodeExpired";
+                badCode = true;
+            } else if (resp.kind === "success") {
+                error = undefined;
+                createdUser = {
+                    kind: "created_user",
+                    username,
+                    dateCreated: BigInt(Date.now()),
+                    displayName: undefined,
+                    cryptoAccount: resp.icpAccount,
+                    userId: resp.userId,
+                    isPlatformModerator: false,
+                    isPlatformOperator: false,
+                    suspensionDetails: undefined,
+                    isSuspectedBot: false,
+                    diamondStatus: { kind: "inactive" },
+                    moderationFlagsEnabled: 0,
+                    updated: 0n,
+                    isBot: false,
+                    isUniquePerson: false,
+                    totalChitEarned: 0,
+                    chitBalance: 0,
+                    streak: 0,
+                    maxStreak: 0,
+                    hideOnlineStatus: false,
+                };
+                onCreatedUser(createdUser);
+                busy = false;
+                usernameStore.set("");
+            } else {
+                error = `Unexpected register user response: ${resp.kind}`;
+            }
+        });
+    }
+
+    function deleteUser(_: UserOrUserGroup) {
+        referringUser = undefined;
+        client.clearReferralCode();
+    }
+
+    function selectUser(user: UserSummary) {
+        referringUser = user;
+        client.setReferralCode(user.userId);
+    }
+
+    function userLookup(searchTerm: string): Promise<[UserSummary[], UserSummary[]]> {
+        return client.searchUsers(searchTerm, 20).then((res) => [[], res]);
+    }
+
+    function clearCodeAndLogout() {
+        client.clearReferralCode();
+        client.logout();
+    }
+
+    onMount(async () => {
+        referringUser = await client.getReferringUser();
+    });
+</script>
+
+{#if showGuidelines}
+    <Overlay onClose={onCloseGuidelines} dismissible={false}>
+        <ModalContent large onClose={onCloseGuidelines}>
+            {#snippet header()}
+                <span class="header">
+                    <h1>OpenChat Terms</h1>
+                </span>
+            {/snippet}
+            {#snippet body()}
+                <span class="guidelines-modal">
+                    <TermsContent />
+                </span>
+            {/snippet}
+            {#snippet footer(onClose)}
+                <span>
+                    <Button onClick={() => onClose?.()} small={!$mobileWidth} tiny={$mobileWidth}>
+                        <Translatable resourceKey={i18nKey("register.agree")} />
+                    </Button>
+                </span>
+            {/snippet}
+        </ModalContent>
+    </Overlay>
+{/if}
+
+{#if badCode}
+    <AlertBox>
+        <h4 class="main">
+            <Translatable resourceKey={i18nKey("register.referralCodeInvalid")} />
+        </h4>
+        <p class="sub">
+            <Translatable resourceKey={i18nKey("register.doYouWantToProceed")} />
+        </p>
+    </AlertBox>
+{:else}
+    <form class="username-wrapper" onsubmit={register}>
+        <div class="form-element">
+            <Legend label={i18nKey("username")} rules={i18nKey("usernameRules")} />
+            <UsernameInput
+                {client}
+                disabled={busy}
+                originalUsername={$usernameStore ?? ""}
+                autofocus
+                bind:username
+                bind:usernameValid
+                bind:checking={checkingUsername}
+                bind:error />
+        </div>
+
+        <div class="form-element">
+            <Legend label={i18nKey("register.email")} rules={i18nKey("register.emailRules")} />
+
+            <Input
+                invalid={!emailValid}
+                disabled={busy}
+                placeholder={i18nKey("register.emailPlaceholder")}
+                bind:value={email}
+                minlength={0}
+                maxlength={254} />
+        </div>
+
+        <div class="form-element">
+            {#if referringUser !== undefined}
+                <Legend label={i18nKey("register.referredBy")} />
+                <UserPill onDeleteUser={deleteUser} userOrGroup={referringUser} />
+            {:else}
+                <Legend label={i18nKey("register.findReferrer")} />
+                <FindUser
+                    placeholderKey={"register.searchForReferrer"}
+                    {userLookup}
+                    enabled
+                    compact
+                    mode={"add"}
+                    autofocus={false}
+                    onSelectUser={selectUser} />
+            {/if}
+        </div>
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div onclick={onShowGuidelines} class="smallprint">
+            <Translatable resourceKey={i18nKey("register.disclaimer")} />
+        </div>
+        {#if error !== undefined}
+            <div class="error">
+                <ErrorMessage><Translatable resourceKey={i18nKey(error)} /></ErrorMessage>
+            </div>
+        {/if}
+    </form>
+{/if}
+
+<div class="footer">
+    <ButtonGroup>
+        {#if badCode}
+            <Button secondary onClick={clearCodeAndLogout}
+                ><Translatable resourceKey={i18nKey("cancel")} /></Button>
+        {/if}
+        <Button
+            loading={checkingUsername || busy}
+            disabled={!usernameValid || !emailValid || busy}
+            onClick={register}>
+            <Translatable resourceKey={i18nKey("register.proceed")} />
+        </Button>
+    </ButtonGroup>
+</div>
+
+<style lang="scss">
+    :global(.guidelines-modal .card .header:not(.open) .arrow path) {
+        fill: var(--txt);
+    }
+    :global(.username-wrapper .results) {
+        max-height: 250px;
+        @include nice-scrollbar();
+    }
+
+    .username-wrapper {
+        margin-bottom: $sp4;
+        width: 100%;
+    }
+
+    .smallprint {
+        margin-top: $sp4;
+        align-self: flex-start;
+        @include font(light, normal, fs-60);
+        color: var(--primary);
+        cursor: pointer;
+        text-decoration: none;
+
+        @media (hover: hover) {
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+    }
+
+    .footer {
+        align-self: flex-end;
+    }
+
+    .error {
+        margin-top: $sp4;
+    }
+
+    .main {
+        margin-bottom: $sp3;
+    }
+
+    .sub {
+        color: var(--txt-light);
+    }
+</style>
diff --git a/frontend/app/src/components/pincode/Pincode.svelte b/frontend/app/src/desktop/features/pincode/Pincode.svelte
similarity index 100%
rename from frontend/app/src/components/pincode/Pincode.svelte
rename to frontend/app/src/desktop/features/pincode/Pincode.svelte
diff --git a/frontend/app/src/components/pincode/PincodeInput.svelte b/frontend/app/src/desktop/features/pincode/PincodeInput.svelte
similarity index 100%
rename from frontend/app/src/components/pincode/PincodeInput.svelte
rename to frontend/app/src/desktop/features/pincode/PincodeInput.svelte
diff --git a/frontend/app/src/components/home/profile/AccountLinkingCode.svelte b/frontend/app/src/desktop/features/profile/AccountLinkingCode.svelte
similarity index 96%
rename from frontend/app/src/components/home/profile/AccountLinkingCode.svelte
rename to frontend/app/src/desktop/features/profile/AccountLinkingCode.svelte
index fec1c526fc..aa61332818 100644
--- a/frontend/app/src/components/home/profile/AccountLinkingCode.svelte
+++ b/frontend/app/src/desktop/features/profile/AccountLinkingCode.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
     import { type OpenChat } from "@client";
     import { getContext } from "svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Translatable from "../../Translatable.svelte";
-    import Button from "../../Button.svelte";
-    import Overlay from "../../Overlay.svelte";
-    import ModalContent from "../../ModalContent.svelte";
-    import { now500 } from "../../../stores/time";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import Button from "@src/ui/Button.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import { now500 } from "@src/stores/time";
     import { type AccountLinkingCode } from "@shared";
 
     const client = getContext<OpenChat>("client");
diff --git a/frontend/app/src/desktop/features/profile/AccountSelector.svelte b/frontend/app/src/desktop/features/profile/AccountSelector.svelte
new file mode 100644
index 0000000000..fa9ad1b969
--- /dev/null
+++ b/frontend/app/src/desktop/features/profile/AccountSelector.svelte
@@ -0,0 +1,108 @@
+<script lang="ts">
+    import { iconSize, mobileWidth, type NamedAccount } from "@client";
+    import ChevronDown from "svelte-material-icons/ChevronDown.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Menu from "@src/desktop/shared/Menu.svelte";
+    import MenuIcon from "@src/desktop/shared/MenuIcon.svelte";
+    import MenuItem from "@src/desktop/shared/MenuItem.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    interface Props {
+        accounts: NamedAccount[];
+        targetAccount: string;
+    }
+
+    let { accounts, targetAccount = $bindable() }: Props = $props();
+
+    let selectedName: string | undefined = $state(undefined);
+    let menuIconEl: MenuIcon | undefined = $state();
+
+    $effect(() => {
+        selectedName = accounts.find((a) => {
+            return a.account.toLowerCase() === targetAccount.toLowerCase();
+        })?.name;
+    });
+
+    function collapseAccount(account: string) {
+        if (account.length > 23) {
+            return account.slice(0, 10) + "..." + account.slice(account.length - 10);
+        }
+        return account;
+    }
+
+    function selectAccount(namedAccount: NamedAccount) {
+        targetAccount = namedAccount.account;
+    }
+
+    function showMenu(e: Event) {
+        e.stopPropagation();
+        menuIconEl?.showMenu();
+    }
+</script>
+
+<div role="combobox" tabindex="0" class="selected" onclick={showMenu}>
+    <div class="name">
+        <Translatable resourceKey={i18nKey(selectedName ?? "tokenTransfer.chooseAddress")} />
+    </div>
+    <div class="icon">
+        <MenuIcon bind:this={menuIconEl} position={$mobileWidth ? "top" : "bottom"} align={"end"}>
+            {#snippet menuIcon()}
+                <ChevronDown viewBox={"0 -3 24 24"} size={$iconSize} color={"var(--icon-txt)"} />
+            {/snippet}
+            {#snippet menuItems()}
+                <Menu>
+                    {#each accounts as namedAccount}
+                        <MenuItem unpadded onclick={() => selectAccount(namedAccount)}>
+                            {#snippet text()}
+                                <div class="named-account">
+                                    <div class="name">
+                                        {namedAccount.name}
+                                    </div>
+                                    <div class="account">
+                                        {collapseAccount(namedAccount.account)}
+                                    </div>
+                                </div>
+                            {/snippet}
+                        </MenuItem>
+                    {/each}
+                </Menu>
+            {/snippet}
+        </MenuIcon>
+    </div>
+</div>
+
+<style lang="scss">
+    .selected {
+        display: flex;
+        align-items: center;
+        gap: $sp3;
+        cursor: pointer;
+        @include font(book, normal, fs-80);
+
+        .name {
+            color: var(--primary);
+        }
+
+        .icon {
+            transition: transform 250ms ease-in-out;
+            transform-origin: 50%;
+        }
+    }
+
+    .named-account {
+        padding: $sp3;
+        display: flex;
+        flex-direction: column;
+        @include font(book, normal, fs-80);
+        font-family: var(--font);
+
+        .name {
+            color: var(--primary);
+        }
+
+        .account {
+            @include font(light, normal, fs-70);
+            color: var(--menu-disabled-txt);
+        }
+    }
+</style>
diff --git a/frontend/app/src/components/home/profile/AccountTransactions.svelte b/frontend/app/src/desktop/features/profile/AccountTransactions.svelte
similarity index 95%
rename from frontend/app/src/components/home/profile/AccountTransactions.svelte
rename to frontend/app/src/desktop/features/profile/AccountTransactions.svelte
index cd91da2da5..927ba171e7 100644
--- a/frontend/app/src/components/home/profile/AccountTransactions.svelte
+++ b/frontend/app/src/desktop/features/profile/AccountTransactions.svelte
@@ -11,15 +11,15 @@
         toRecord,
     } from "@client";
     import { getContext, onMount } from "svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { toastStore } from "../../../stores/toast";
-    import type { RemoteData as RD } from "../../../utils/remoteData";
-    import Button from "../../Button.svelte";
-    import ButtonGroup from "../../ButtonGroup.svelte";
-    import FancyLoader from "../../icons/FancyLoader.svelte";
-    import ModalContent from "../../ModalContent.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import CryptoSelector from "../CryptoSelector.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import type { RemoteData as RD } from "@src/utils/remoteData";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import FancyLoader from "@src/desktop/ui/icons/FancyLoader.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import CryptoSelector from "@src/desktop/shared/CryptoSelector.svelte";
     import TransactionEndpoint from "./TransactionEndpoint.svelte";
 
     const client = getContext<OpenChat>("client");
diff --git a/frontend/app/src/desktop/features/profile/Accounts.svelte b/frontend/app/src/desktop/features/profile/Accounts.svelte
new file mode 100644
index 0000000000..c18c8391d8
--- /dev/null
+++ b/frontend/app/src/desktop/features/profile/Accounts.svelte
@@ -0,0 +1,385 @@
+<script lang="ts">
+    import {
+        walletTokensSorted as accountsSorted,
+        type EnhancedTokenDetails,
+        iconSize,
+        ICP_SYMBOL,
+        nervousSystemLookup,
+        type OpenChat,
+        swappableTokensStore,
+        walletConfigStore,
+    } from "@client";
+    import { getContext, onMount } from "svelte";
+    import ArrowLeftBoldCircle from "svelte-material-icons/ArrowLeftBoldCircle.svelte";
+    import ArrowRightBoldCircle from "svelte-material-icons/ArrowRightBoldCircle.svelte";
+    import ChevronDown from "svelte-material-icons/ChevronDown.svelte";
+    import HeartRemoveOutline from "svelte-material-icons/HeartRemoveOutline.svelte";
+    import SwapIcon from "svelte-material-icons/SwapHorizontal.svelte";
+    import ViewList from "svelte-material-icons/ViewList.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { sum } from "@src/utils/math";
+    import ErrorMessage from "@src/desktop/shared/ErrorMessage.svelte";
+    import Menu from "@src/desktop/shared/Menu.svelte";
+    import MenuIcon from "@src/desktop/shared/MenuIcon.svelte";
+    import MenuItem from "@src/desktop/shared/MenuItem.svelte";
+    import MultiToggle, { type Option } from "@src/desktop/shared/MultiToggle.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import BalanceWithRefresh from "@src/desktop/shared/BalanceWithRefresh.svelte";
+    import AccountTransactions from "./AccountTransactions.svelte";
+    import ReceiveCrypto from "./ReceiveCrypto.svelte";
+    import RestrictedFeature from "./RestrictedFeature.svelte";
+    import SendCrypto from "./SendCrypto.svelte";
+    import SwapCrypto from "./SwapCrypto.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        conversionOptions: Option[];
+        selectedConversion?: "none" | "usd" | "icp" | "btc" | "eth";
+        hideTokenBalances?: boolean;
+    }
+
+    let {
+        conversionOptions,
+        selectedConversion = $bindable("none"),
+        hideTokenBalances = false,
+    }: Props = $props();
+
+    let balanceError: string | undefined = $state();
+    let actionMode: "none" | "send" | "receive" | "swap" | "transactions" | "restricted" =
+        $state("none");
+    let selectedLedger: string | undefined = $state(undefined);
+    let transactionsFormat: string = $state("");
+
+    onMount(() => client.refreshSwappableTokens());
+
+    function calculateTotal(
+        accounts: EnhancedTokenDetails[],
+        conversion: "usd" | "icp" | "btc" | "eth",
+    ): string {
+        switch (conversion) {
+            case "usd":
+                return sum(accounts.map((c) => c.dollarBalance ?? 0)).toFixed(2);
+            case "icp":
+                return sum(accounts.map((c) => c.icpBalance ?? 0)).toFixed(3);
+            case "btc":
+                return sum(accounts.map((c) => c.btcBalance ?? 0)).toFixed(6);
+            case "eth":
+                return sum(accounts.map((c) => c.ethBalance ?? 0)).toFixed(6);
+        }
+    }
+
+    function onBalanceRefreshed() {
+        balanceError = undefined;
+    }
+
+    function onBalanceRefreshError(err: string) {
+        balanceError = err;
+    }
+
+    function hideManageModal() {
+        actionMode = "none";
+    }
+
+    function showReceive(ledger: string) {
+        selectedLedger = ledger;
+        actionMode = "receive";
+    }
+
+    function showSend(ledger: string) {
+        selectedLedger = ledger;
+        actionMode = "send";
+    }
+
+    function showSwap(ledger: string) {
+        selectedLedger = ledger;
+        client.swapRestricted().then((restricted) => {
+            if (restricted) {
+                actionMode = "restricted";
+            } else {
+                actionMode = "swap";
+            }
+        });
+    }
+
+    function showTransactions(token: { ledger: string; urlFormat: string }) {
+        selectedLedger = token.ledger;
+        transactionsFormat = token.urlFormat;
+        actionMode = "transactions";
+    }
+
+    function removeFromWallet(ledger: string) {
+        client.removeTokenFromWallet(ledger);
+    }
+    let manualWalletConfig = $derived($walletConfigStore.kind === "manual_wallet");
+    let snsLedgers = $derived(
+        new Set<string>(
+            [...$nervousSystemLookup.values()]
+                .filter((ns) => !ns.isNns)
+                .map((ns) => ns.ledgerCanisterId),
+        ),
+    );
+    let total = $derived(
+        selectedConversion === "none" ? "" : calculateTotal($accountsSorted, selectedConversion),
+    );
+</script>
+
+{#if actionMode !== "none" && selectedLedger !== undefined}
+    <Overlay
+        dismissible={actionMode === "receive" || actionMode === "transactions"}
+        onClose={hideManageModal}>
+        {#if actionMode === "receive"}
+            <ReceiveCrypto ledger={selectedLedger} onClose={hideManageModal} />
+        {:else if actionMode === "send"}
+            <SendCrypto ledger={selectedLedger} onClose={hideManageModal} />
+        {:else if actionMode === "swap"}
+            <SwapCrypto bind:ledgerIn={selectedLedger} onClose={hideManageModal} />
+        {:else if actionMode === "transactions"}
+            <AccountTransactions
+                ledger={selectedLedger}
+                onClose={hideManageModal}
+                urlFormat={transactionsFormat} />
+        {:else if actionMode === "restricted"}
+            <RestrictedFeature onClose={hideManageModal} feature="swap" />
+        {/if}
+    </Overlay>
+{/if}
+
+<table>
+    <thead>
+        <tr>
+            <th class="token-header"
+                ><Translatable resourceKey={i18nKey("cryptoAccount.token")} /></th>
+            <th class="balance-header" colspan="2" class:hideTokenBalances>
+                <MultiToggle options={conversionOptions} bind:selected={selectedConversion} />
+            </th>
+        </tr>
+    </thead>
+    {#each $accountsSorted as token (token.ledger)}
+        <tr>
+            <td width="99%">
+                <div class="token">
+                    <img
+                        alt={token.name}
+                        class:disabled={!token.enabled}
+                        class="icon"
+                        src={token.logo} />
+                    <div>
+                        {token.symbol}
+                    </div>
+                </div>
+            </td>
+            <td>
+                <BalanceWithRefresh
+                    ledger={token.ledger}
+                    value={token.balance}
+                    conversion={selectedConversion}
+                    hideBalance={hideTokenBalances}
+                    allowCached={true}
+                    onRefreshed={onBalanceRefreshed}
+                    onError={onBalanceRefreshError} />
+            </td>
+            <td class="manage-col">
+                <div class="manage">
+                    <MenuIcon position="bottom" align="end">
+                        {#snippet menuIcon()}
+                            <span class="wallet-menu">
+                                <ChevronDown
+                                    viewBox={"0 -3 24 24"}
+                                    size={$iconSize}
+                                    color={"var(--txt)"} />
+                            </span>
+                        {/snippet}
+                        {#snippet menuItems()}
+                            <Menu>
+                                <MenuItem onclick={() => showSend(token.ledger)}>
+                                    {#snippet icon()}
+                                        <ArrowRightBoldCircle
+                                            size={$iconSize}
+                                            color={"var(--icon-inverted-txt)"} />
+                                    {/snippet}
+                                    {#snippet text()}
+                                        <div>
+                                            <Translatable
+                                                resourceKey={i18nKey("cryptoAccount.send")} />
+                                        </div>
+                                    {/snippet}
+                                </MenuItem>
+                                {#if token.enabled}
+                                    <MenuItem onclick={() => showReceive(token.ledger)}>
+                                        {#snippet icon()}
+                                            <ArrowLeftBoldCircle
+                                                size={$iconSize}
+                                                color={"var(--icon-inverted-txt)"} />
+                                        {/snippet}
+                                        {#snippet text()}
+                                            <div>
+                                                <Translatable
+                                                    resourceKey={i18nKey(
+                                                        "cryptoAccount.receive",
+                                                    )} />
+                                            </div>
+                                        {/snippet}
+                                    </MenuItem>
+                                    {#if $swappableTokensStore.has(token.ledger)}
+                                        <MenuItem onclick={() => showSwap(token.ledger)}>
+                                            {#snippet icon()}
+                                                <SwapIcon
+                                                    size={$iconSize}
+                                                    color={"var(--icon-inverted-txt)"} />
+                                            {/snippet}
+                                            {#snippet text()}
+                                                <div>
+                                                    <Translatable
+                                                        resourceKey={i18nKey(
+                                                            "cryptoAccount.swap",
+                                                        )} />
+                                                </div>
+                                            {/snippet}
+                                        </MenuItem>
+                                    {/if}
+                                {/if}
+                                {#if token.symbol === ICP_SYMBOL || snsLedgers.has(token.ledger)}
+                                    <MenuItem onclick={() => showTransactions(token)}>
+                                        {#snippet icon()}
+                                            <ViewList
+                                                size={$iconSize}
+                                                color={"var(--icon-inverted-txt)"} />
+                                        {/snippet}
+                                        {#snippet text()}
+                                            <div>
+                                                <Translatable
+                                                    resourceKey={i18nKey(
+                                                        "cryptoAccount.transactions",
+                                                    )} />
+                                            </div>
+                                        {/snippet}
+                                    </MenuItem>
+                                {/if}
+                                {#if manualWalletConfig}
+                                    <MenuItem onclick={() => removeFromWallet(token.ledger)}>
+                                        {#snippet icon()}
+                                            <HeartRemoveOutline
+                                                size={$iconSize}
+                                                color={"var(--icon-inverted-txt)"} />
+                                        {/snippet}
+                                        {#snippet text()}
+                                            <div>
+                                                <Translatable
+                                                    resourceKey={i18nKey("cryptoAccount.remove")} />
+                                            </div>
+                                        {/snippet}
+                                    </MenuItem>
+                                {/if}
+                            </Menu>
+                        {/snippet}
+                    </MenuIcon>
+                </div>
+            </td>
+        </tr>
+    {/each}
+    {#if selectedConversion !== "none" && !hideTokenBalances}
+        <tr class="total">
+            <td>
+                <div class="token">
+                    <div class="icon"></div>
+                    <Translatable resourceKey={i18nKey("cryptoAccount.total")} />
+                </div>
+            </td>
+            <td class="total">{total}</td>
+            <td></td>
+        </tr>
+    {/if}
+</table>
+
+{#if balanceError !== undefined}
+    <ErrorMessage>{balanceError}</ErrorMessage>
+{/if}
+
+<style lang="scss">
+    :global(.manage .link-button) {
+        padding: 0 0 0 $sp3;
+        &:first-child {
+            border-right: 1px solid var(--txt-light);
+            padding: 0 $sp3 0 0;
+        }
+    }
+
+    .wallet-menu {
+        cursor: pointer;
+    }
+
+    table {
+        width: 100%;
+
+        th {
+            @include font(book, normal, fs-70);
+            padding-bottom: $sp4;
+
+            &.token-header {
+                font-weight: 700;
+                text-align: left;
+            }
+
+            &.balance-header {
+                @include font-size(fs-60);
+                text-transform: uppercase;
+            }
+        }
+
+        td {
+            vertical-align: middle;
+            padding-bottom: $sp3;
+
+            &.manage-col {
+                width: 0;
+            }
+
+            &.total {
+                @include font(bold, normal, fs-100, 22);
+                padding-right: 30px;
+                text-align: right;
+            }
+        }
+
+        tr.total {
+            color: var(--txt-light);
+
+            td {
+                padding-top: $sp3;
+                border-top: solid 1px var(--bd);
+            }
+        }
+
+        .token {
+            display: flex;
+            flex-direction: row;
+            gap: toRem(10);
+        }
+
+        .manage {
+            @include font(light, normal, fs-70);
+            display: flex;
+            padding-left: $sp3;
+            text-wrap: nowrap;
+        }
+
+        .icon {
+            background-size: contain;
+            height: 24px;
+            width: 24px;
+            border-radius: 50%;
+            background-repeat: no-repeat;
+            background-position: top;
+
+            &.disabled {
+                filter: grayscale(1);
+            }
+        }
+
+        .hideTokenBalances {
+            visibility: hidden;
+        }
+    }
+</style>
diff --git a/frontend/app/src/components/home/profile/AccountsModal.svelte b/frontend/app/src/desktop/features/profile/AccountsModal.svelte
similarity index 91%
rename from frontend/app/src/components/home/profile/AccountsModal.svelte
rename to frontend/app/src/desktop/features/profile/AccountsModal.svelte
index 2621b718ec..f048556443 100644
--- a/frontend/app/src/components/home/profile/AccountsModal.svelte
+++ b/frontend/app/src/desktop/features/profile/AccountsModal.svelte
@@ -9,18 +9,18 @@
     import ShieldRemoveIcon from "svelte-material-icons/ShieldRemove.svelte";
     import TuneVertical from "svelte-material-icons/TuneVertical.svelte";
     import WalletIcon from "svelte-material-icons/WalletOutline.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { type PinOperation } from "../../../stores/pinNumber";
-    import { hideTokenBalances } from "../../../stores/settings";
-    import Button from "../../Button.svelte";
-    import ButtonGroup from "../../ButtonGroup.svelte";
-    import HoverIcon from "../../HoverIcon.svelte";
-    import Menu from "../../Menu.svelte";
-    import MenuIcon from "../../MenuIcon.svelte";
-    import MenuItem from "../../MenuItem.svelte";
-    import ModalContent from "../../ModalContent.svelte";
-    import Overlay from "../../Overlay.svelte";
-    import Translatable from "../../Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { type PinOperation } from "@src/stores/pinNumber";
+    import { hideTokenBalances } from "@src/stores/settings";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import Menu from "@src/desktop/shared/Menu.svelte";
+    import MenuIcon from "@src/desktop/shared/MenuIcon.svelte";
+    import MenuItem from "@src/desktop/shared/MenuItem.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
     import Accounts from "./Accounts.svelte";
     import ManageAccounts from "./ManageAccounts.svelte";
     import SetPinNumberModal from "./SetPinNumberModal.svelte";
diff --git a/frontend/app/src/components/home/profile/AuthProviderLogo.svelte b/frontend/app/src/desktop/features/profile/AuthProviderLogo.svelte
similarity index 92%
rename from frontend/app/src/components/home/profile/AuthProviderLogo.svelte
rename to frontend/app/src/desktop/features/profile/AuthProviderLogo.svelte
index dd98795023..93de4b7c23 100644
--- a/frontend/app/src/components/home/profile/AuthProviderLogo.svelte
+++ b/frontend/app/src/desktop/features/profile/AuthProviderLogo.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import EmailIcon from "svelte-material-icons/EmailOutline.svelte";
     import { AuthProvider } from "@client";
-    import InternetIdentityLogo from "../../landingpages/InternetIdentityLogo.svelte";
+    import InternetIdentityLogo from "@src/desktop/features/landing/InternetIdentityLogo.svelte";
     import OnBoardOptionLogo from "./OnBoardOptionLogo.svelte";
 
     interface Props {
diff --git a/frontend/app/src/desktop/features/profile/Badges.svelte b/frontend/app/src/desktop/features/profile/Badges.svelte
new file mode 100644
index 0000000000..9aab73c3ba
--- /dev/null
+++ b/frontend/app/src/desktop/features/profile/Badges.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+    import { disableChit } from "@src/stores/settings";
+    import type { DiamondMembershipStatus } from "@client";
+    import Diamond from "@src/desktop/ui/icons/Diamond.svelte";
+    import ChitEarnedBadge from "./ChitEarnedBadge.svelte";
+    import Streak from "./Streak.svelte";
+
+    interface Props {
+        diamondStatus?: DiamondMembershipStatus["kind"] | undefined;
+        streak?: number;
+        uniquePerson?: boolean;
+        chitEarned?: number;
+    }
+
+    // uniquePerson prop retained on Props for callers, but unused - the verified badge is suspended.
+    let { diamondStatus = undefined, streak = 0, chitEarned = 0 }: Props = $props();
+</script>
+
+<Diamond status={diamondStatus} />
+<!-- Verified user (DecideAI) badge is suspended - not rendered. -->
+{#if !$disableChit}
+    <Streak days={streak} />
+    <ChitEarnedBadge earned={chitEarned} />
+{/if}
diff --git a/frontend/app/src/components/home/profile/BotConfigData.svelte b/frontend/app/src/desktop/features/profile/BotConfigData.svelte
similarity index 85%
rename from frontend/app/src/components/home/profile/BotConfigData.svelte
rename to frontend/app/src/desktop/features/profile/BotConfigData.svelte
index ba14fc5073..0bb89149ee 100644
--- a/frontend/app/src/components/home/profile/BotConfigData.svelte
+++ b/frontend/app/src/desktop/features/profile/BotConfigData.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
     import CopyIcon from "svelte-material-icons/ContentCopy.svelte";
-    import ModalContent from "../../ModalContent.svelte";
-    import Button from "../../Button.svelte";
-    import ButtonGroup from "../../ButtonGroup.svelte";
-    import Overlay from "../../Overlay.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
     import { _ } from "svelte-i18n";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Translatable from "../../Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/ui/Translatable.svelte";
     import type { BotClientConfigData } from "@client";
-    import Legend from "../../Legend.svelte";
+    import Legend from "@src/desktop/shared/Legend.svelte";
 
     interface Props {
         data: BotClientConfigData;
diff --git a/frontend/app/src/components/home/profile/ChitBalance.svelte b/frontend/app/src/desktop/features/profile/ChitBalance.svelte
similarity index 94%
rename from frontend/app/src/components/home/profile/ChitBalance.svelte
rename to frontend/app/src/desktop/features/profile/ChitBalance.svelte
index 979213bf38..f551c8aa0d 100644
--- a/frontend/app/src/components/home/profile/ChitBalance.svelte
+++ b/frontend/app/src/desktop/features/profile/ChitBalance.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-    import Tooltip from "../../../components/tooltip/Tooltip.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Translatable from "../../Translatable.svelte";
+    import Tooltip from "@src/desktop/ui/tooltip/Tooltip.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/ui/Translatable.svelte";
     import LearnToEarn from "./LearnToEarn.svelte";
 
     interface Props {
diff --git a/frontend/app/src/desktop/features/profile/ChitEarnedBadge.svelte b/frontend/app/src/desktop/features/profile/ChitEarnedBadge.svelte
new file mode 100644
index 0000000000..e6482bda1c
--- /dev/null
+++ b/frontend/app/src/desktop/features/profile/ChitEarnedBadge.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+    import Translatable from "@src/ui/Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { chitBands, findClosestChitBand } from "@client";
+    import Tooltip from "@src/desktop/ui/tooltip/Tooltip.svelte";
+
+    interface Props {
+        earned: number;
+        showTooltip?: boolean;
+    }
+
+    let { earned, showTooltip = true }: Props = $props();
+
+    let closest = $derived(findClosestChitBand(earned));
+
+    let chitIconText = $derived(
+        closest === 1_000_000 ? "1 m" : Math.floor(closest / 1_000).toString(),
+    );
+    let show = $derived(closest > 0);
+</script>
+
+{#if show}
+    {#if showTooltip}
+        <Tooltip position="top" align="middle">
+            <div class={`icon`}>
+                {chitIconText}
+            </div>
+            {#snippet popupTemplate()}
+                <Translatable
+                    resourceKey={i18nKey("prizes.minChitEarnedValue", {
+                        n: chitBands.get(closest) ?? "0",
+                    })}></Translatable>
+            {/snippet}
+        </Tooltip>
+    {:else}
+        <div class="wrapper">
+            <div>
+                <Translatable
+                    resourceKey={i18nKey("prizes.minChitEarnedValue", {
+                        n: chitBands.get(closest) ?? "0",
+                    })}></Translatable>
+            </div>
+            <div class={`icon`}>
+                {chitIconText}
+            </div>
+        </div>
+    {/if}
+{/if}
+
+<style lang="scss">
+    .icon {
+        $size: 17px;
+        background-repeat: no-repeat;
+        width: $size;
+        height: $size;
+        background-position: 50%;
+        background-image: url("/assets/chit.svg");
+        filter: saturate(0.8);
+        text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
+        display: flex;
+        align-items: center;
+        color: #fff;
+        justify-content: center;
+        @include font(bold, normal, fs-50);
+        font-size: 8px;
+    }
+
+    .wrapper {
+        display: flex;
+        align-items: center;
+        gap: $sp2;
+    }
+</style>
diff --git a/frontend/app/src/components/home/profile/ChitEvents.svelte b/frontend/app/src/desktop/features/profile/ChitEvents.svelte
similarity index 90%
rename from frontend/app/src/components/home/profile/ChitEvents.svelte
rename to frontend/app/src/desktop/features/profile/ChitEvents.svelte
index 362920a539..4d5a8b74c3 100644
--- a/frontend/app/src/components/home/profile/ChitEvents.svelte
+++ b/frontend/app/src/desktop/features/profile/ChitEvents.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
-    import CollapsibleCard from "@src/components/CollapsibleCard.svelte";
+    import CollapsibleCard from "@src/desktop/shared/CollapsibleCard.svelte";
     import { menuCloser } from "component-lib";
     import { chitStateStore, OpenChat, type ChitEvent } from "@client";
     import { getContext } from "svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { chitPopup, disableChit, hideChitIcon, utcMode } from "../../../stores/settings";
-    import { now500 } from "../../../stores/time";
-    import Calendar from "../../calendar/Calendar.svelte";
-    import { calendarState, type DateRange } from "../../calendar/calendarState.svelte";
-    import { isSameDay } from "../../calendar/utils";
-    import Toggle from "../../Toggle.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import StreakInsuranceSummary from "../insurance/StreakInsuranceSummary.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { chitPopup, disableChit, hideChitIcon, utcMode } from "@src/stores/settings";
+    import { now500 } from "@src/stores/time";
+    import Calendar from "@src/desktop/features/calendar/Calendar.svelte";
+    import { calendarState, type DateRange } from "@src/desktop/features/calendar/calendarState.svelte";
+    import { isSameDay } from "@src/ui/calendarUtils";
+    import Toggle from "@src/desktop/shared/Toggle.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import StreakInsuranceSummary from "@src/desktop/features/access/insurance/StreakInsuranceSummary.svelte";
     import ChitBalance from "./ChitBalance.svelte";
     import ChitEventsForDay from "./ChitEventsForDay.svelte";
 
diff --git a/frontend/app/src/desktop/features/profile/ChitEventsForDay.svelte b/frontend/app/src/desktop/features/profile/ChitEventsForDay.svelte
new file mode 100644
index 0000000000..c36409ec4a
--- /dev/null
+++ b/frontend/app/src/desktop/features/profile/ChitEventsForDay.svelte
@@ -0,0 +1,118 @@
+<script lang="ts">
+    import { mobileWidth, type ChitEvent } from "@client";
+    import Tooltip from "@src/desktop/ui/tooltip/Tooltip.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    interface Props {
+        events: ChitEvent[];
+        day: Date;
+        selectedMonth: number;
+        utcMode: boolean;
+    }
+
+    let { events, day, selectedMonth, utcMode }: Props = $props();
+
+    let otherMonth = $derived(day.getMonth() !== selectedMonth);
+</script>
+
+{#snippet eventtime(t: string)}
+    <span class="time">({t})</span>
+{/snippet}
+
+{#if events.length === 0}
+    <div class="day">{day.getDate()}</div>
+{:else}
+    <div class="day has-events" class:otherMonth>
+        <Tooltip autoWidth fill position="top" align={$mobileWidth ? "middle" : "end"}>
+            {day.getDate()}
+            {#snippet popupTemplate()}
+                <div class="tt">
+                    {#each events as event}
+                        {@const time = new Date(Number(event.timestamp))}
+                        {@const timeStr = utcMode
+                            ? time.toLocaleTimeString("en-GB", { timeZone: "UTC" })
+                            : time.toLocaleTimeString()}
+                        {#if event.reason.kind === "daily_claim" || event.reason.kind === "daily_claim_reinstated" || event.reason.kind === "streak_insurance_claim"}
+                            <p>
+                                {`🚀 Daily claim: ${event.amount.toLocaleString()}`}
+                                {@render eventtime(timeStr)}
+                            </p>
+                        {:else if event.reason.kind === "achievement_unlocked"}
+                            <p>
+                                🥳 <Translatable
+                                    resourceKey={i18nKey(`learnToEarn.${event.reason.type}`)} />: {event.amount.toLocaleString()}
+                                {@render eventtime(timeStr)}
+                            </p>
+                        {:else if event.reason.kind === "purchased_premium_item"}
+                            <p>
+                                🤑 <Translatable resourceKey={i18nKey("premiumItem.purchased")} />: {event.amount.toLocaleString()}
+                                {@render eventtime(timeStr)}
+                            </p>
+                        {:else if event.reason.kind === "referral"}
+                            <p>
+                                🤝 <Translatable
+                                    resourceKey={i18nKey(
+                                        `chitReferralRewardReason.${event.reason.type}`,
+                                    )} />: {event.amount.toLocaleString()}
+                                {@render eventtime(timeStr)}
+                            </p>
+                        {:else if event.reason.kind === "meme_contest_winner"}
+                            <p>
+                                {`🏆️ Meme contest win: ${event.amount.toLocaleString()}`}
+                                {@render eventtime(timeStr)}
+                            </p>
+                        {:else if event.reason.kind === "external_achievement_unlocked"}
+                            <p>
+                                🔓 <Translatable resourceKey={i18nKey(event.reason.name)} />: {event.amount.toLocaleString()}
+                                {@render eventtime(timeStr)}
+                            </p>
+                        {/if}
+                    {/each}
+                </div>
+            {/snippet}
+        </Tooltip>
+    </div>
+{/if}
+
+<style lang="scss">
+    :global(.day.has-events .tooltip-popup) {
+        word-wrap: unset;
+    }
+
+    .day {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &.has-events {
+            background: var(--button-bg);
+            color: var(--button-txt);
+            transition: background-color 300ms ease-in-out;
+
+            &:hover {
+                background: var(--button-hv);
+            }
+        }
+
+        &.otherMonth {
+            background: var(--button-disabled);
+            color: var(--button-disabled-txt);
+            &:hover {
+                background: var(--button-disabled);
+            }
+        }
+    }
+
+    .tt {
+        text-align: start;
+        @include font(book, normal, fs-100);
+        padding: $sp3;
+    }
+
+    .time {
+        @include font(book, normal, fs-60);
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/profile/ChooseSignInOption.svelte b/frontend/app/src/desktop/features/profile/ChooseSignInOption.svelte
new file mode 100644
index 0000000000..874e2c0403
--- /dev/null
+++ b/frontend/app/src/desktop/features/profile/ChooseSignInOption.svelte
@@ -0,0 +1,253 @@
+<script lang="ts">
+    import { AuthProvider, selectedAuthProviderStore, type OpenChat } from "@client";
+    import { getContext } from "svelte";
+    import EmailIcon from "svelte-material-icons/EmailOutline.svelte";
+    import SendIcon from "svelte-material-icons/Send.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Button from "@src/ui/Button.svelte";
+    import Input from "@src/desktop/shared/Input.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import SignInOption from "./SignInOption.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        mode?: "signin" | "signup";
+        restrictTo?: Set<string>;
+        emailInvalid: boolean;
+        email: string;
+        currentProvider?: AuthProvider | undefined;
+        showMore?: boolean;
+        onLogin: (provider: AuthProvider) => void;
+    }
+
+    let {
+        mode = "signin",
+        restrictTo = new Set(),
+        emailInvalid = $bindable(),
+        email = $bindable(),
+        currentProvider = undefined,
+        showMore = $bindable(false),
+        onLogin,
+    }: Props = $props();
+
+    function buildOptions(
+        selected: AuthProvider | undefined,
+        mode: "signin" | "signup",
+        restrictTo: Set<string>,
+    ): AuthProvider[] {
+        let options = [];
+        const supportsII = "PublicKeyCredential" in window;
+
+        options.push(AuthProvider.EMAIL);
+        options.push(AuthProvider.PASSKEY);
+
+        if (supportsII) {
+            options.push(AuthProvider.II);
+            options.push(AuthProvider.ETH);
+            options.push(AuthProvider.SOL);
+
+            if (mode === "signin") {
+                options.push(AuthProvider.NFID);
+            }
+        } else if (client.isNativeAndroid()) {
+            options.push(AuthProvider.II);
+        }
+
+        if (restrictTo.size > 0) {
+            options = options.filter((o) => {
+                return (
+                    restrictTo.has(o) ||
+                    (o === AuthProvider.II && restrictTo.has("II")) ||
+                    (o === AuthProvider.EMAIL && restrictTo.has("EMAIL")) ||
+                    (o === AuthProvider.PASSKEY && restrictTo.has("PASSKEY")) ||
+                    (o === AuthProvider.ETH && restrictTo.has("ETH")) ||
+                    (o === AuthProvider.SOL && restrictTo.has("SOL")) ||
+                    (o === AuthProvider.NFID && restrictTo.has("NFID"))
+                );
+            });
+        }
+
+        if (selected !== undefined) {
+            let i = options.findIndex((p) => p === selected);
+
+            if (i >= 0) {
+                options.splice(i, 1);
+                options.splice(0, 0, selected);
+            }
+        }
+        return options;
+    }
+
+    function providerName(provider: AuthProvider): string {
+        return provider === AuthProvider.NFID ? "NFID (Legacy)" : provider;
+    }
+
+    function isEmailValid(email: string): boolean {
+        return email.length > 0;
+    }
+
+    let options = $derived(
+        buildOptions(currentProvider ?? $selectedAuthProviderStore, mode, restrictTo),
+    );
+    let showAllOptions = $derived(
+        (currentProvider ?? $selectedAuthProviderStore) === undefined ||
+            showMore ||
+            mode === "signup",
+    );
+    $effect(() => {
+        const invalid = !isEmailValid(email);
+        if (emailInvalid !== invalid) {
+            emailInvalid = invalid;
+        }
+    });
+</script>
+
+<div class="sign-in-options">
+    {#each options as provider, i}
+        {#if showAllOptions || i === 0}
+            <div
+                class={`option ${
+                    showAllOptions && options.length > 1 && i === 0 ? "separate" : ""
+                }`}>
+                {#if provider === AuthProvider.EMAIL}
+                    <div class="email">
+                        <div class="email-icon icon">
+                            <EmailIcon size={"1.5em"} color={"var(--txt-light)"} />
+                        </div>
+                        <div class="email-txt">
+                            <Input
+                                bind:value={email}
+                                minlength={10}
+                                maxlength={200}
+                                onEnter={() => onLogin(provider)}
+                                placeholder={i18nKey(
+                                    mode === "signin"
+                                        ? "loginDialog.signinEmailPlaceholder"
+                                        : "loginDialog.signupEmailPlaceholder",
+                                )} />
+                        </div>
+                        <Button disabled={emailInvalid} tiny onClick={() => onLogin(provider)}>
+                            <div class="center">
+                                <SendIcon size={"1.5em"} />
+                            </div>
+                        </Button>
+                    </div>
+                {:else}
+                    <SignInOption
+                        {provider}
+                        name={i18nKey(
+                            mode === "signin" ? "loginDialog.signinWith" : "loginDialog.signupWith",
+                            { provider: providerName(provider) },
+                        )}
+                        onClick={() => onLogin(provider)} />
+                {/if}
+            </div>
+        {/if}
+    {/each}
+
+    {#if !showAllOptions && options.length > 1}
+        <div class="more">
+            <a role="button" tabindex="0" onclick={() => (showMore = true)}>
+                <Translatable resourceKey={i18nKey("loginDialog.showMore")} />
+            </a>
+        </div>
+    {/if}
+</div>
+
+<style lang="scss">
+    $height: 45px;
+
+    :global(.sign-in-options .email .input-wrapper) {
+        margin-bottom: 0;
+    }
+
+    :global(.sign-in-options .email button) {
+        height: $height;
+        width: 50px;
+        padding: 0 $sp3 !important;
+        border-radius: 0 $sp2 $sp2 0;
+    }
+
+    :global(.sign-in-options .email .input-wrapper input) {
+        border-radius: 0;
+        box-shadow: none;
+        border-right: 1px solid var(--bd);
+        height: $height;
+    }
+
+    :global(.sign-in-options .email [data-lastpass-icon-root]) {
+        display: none;
+    }
+
+    :global(.sign-in-options button.tiny) {
+        padding: $sp2 $sp4;
+        min-height: 45px;
+        min-width: auto;
+    }
+
+    .center {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    a:hover {
+        text-decoration: underline;
+    }
+
+    .sign-in-options {
+        display: flex;
+        gap: 12px;
+        flex-direction: column;
+        align-items: center;
+        margin-bottom: $sp3;
+        width: 100%;
+
+        .option {
+            width: 100%;
+            max-width: 440px;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+
+            .email {
+                flex: 1;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+
+                .email-txt {
+                    flex: auto;
+                }
+            }
+
+            &.separate {
+                margin-bottom: $sp2;
+                border-bottom: 1px solid var(--bd);
+                padding-bottom: $sp4;
+            }
+        }
+
+        .icon {
+            flex: 0 0 60px;
+            width: 60px;
+            height: $height;
+            border-radius: $sp2 0 0 $sp2;
+            border-right: 1px solid var(--bd);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: var(--input-bg);
+
+            .nfid-img {
+                width: 40px;
+            }
+
+            .eth-img,
+            .sol-img {
+                width: 30px;
+            }
+        }
+    }
+</style>
diff --git a/frontend/app/src/components/home/profile/CommunityProfile.svelte b/frontend/app/src/desktop/features/profile/CommunityProfile.svelte
similarity index 88%
rename from frontend/app/src/components/home/profile/CommunityProfile.svelte
rename to frontend/app/src/desktop/features/profile/CommunityProfile.svelte
index 95f5078ae2..698e7fe908 100644
--- a/frontend/app/src/components/home/profile/CommunityProfile.svelte
+++ b/frontend/app/src/desktop/features/profile/CommunityProfile.svelte
@@ -2,13 +2,13 @@
     import type { CommunitySummary, OpenChat } from "@client";
     import { ErrorCode } from "@shared";
     import { getContext } from "svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { toastStore } from "../../../stores/toast";
-    import Button from "../../Button.svelte";
-    import DisplayNameInput from "../../DisplayNameInput.svelte";
-    import ErrorMessage from "../../ErrorMessage.svelte";
-    import Legend from "../../Legend.svelte";
-    import Translatable from "../../Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import Button from "@src/ui/Button.svelte";
+    import DisplayNameInput from "./DisplayNameInput.svelte";
+    import ErrorMessage from "@src/desktop/shared/ErrorMessage.svelte";
+    import Legend from "@src/desktop/shared/Legend.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/desktop/features/profile/ConfirmDeleteAccount.svelte b/frontend/app/src/desktop/features/profile/ConfirmDeleteAccount.svelte
new file mode 100644
index 0000000000..32644a99d7
--- /dev/null
+++ b/frontend/app/src/desktop/features/profile/ConfirmDeleteAccount.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+    import { AuthProvider, i18nKey, OpenChat } from "@client";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import { interpolate } from "@src/i18n/i18n";
+    import { _ } from "svelte-i18n";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import Button from "@src/ui/Button.svelte";
+    import { getContext } from "svelte";
+    import { toastStore } from "@src/stores/toast";
+    import ReAuthenticate from "./ReAuthenticate.svelte";
+    import type { DelegationChain, ECDSAKeyIdentity } from "@icp-sdk/core/identity";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        deleting: boolean;
+        onClose: () => void;
+    }
+
+    let { deleting = $bindable(), onClose }: Props = $props();
+
+    let authenticating = $state(false);
+
+    function deleteAccount(detail: {
+        key: ECDSAKeyIdentity;
+        delegation: DelegationChain;
+        provider: AuthProvider;
+    }) {
+        deleting = true;
+        authenticating = false;
+        return client
+            .deleteCurrentUser(detail.key.getKeyPair(), detail.delegation.toJSON())
+            .then((success) => {
+                if (!success) {
+                    toastStore.showFailureToast(i18nKey("danger.deleteAccountFailed"));
+                } else {
+                    onClose();
+                }
+            })
+            .finally(() => (deleting = false));
+    }
+</script>
+
+<Overlay>
+    <ModalContent>
+        {#snippet header()}
+            <Translatable resourceKey={i18nKey("danger.deleteAccount")} />
+        {/snippet}
+        {#snippet body()}
+            {#if authenticating}
+                <ReAuthenticate onSuccess={deleteAccount} message={i18nKey("danger.reauth")} />
+            {:else}
+                <Markdown
+                    inline={false}
+                    text={interpolate($_, i18nKey("danger.deleteAccountConfirm"))} />
+            {/if}
+        {/snippet}
+        {#snippet footer()}
+            <ButtonGroup>
+                <Button small onClick={onClose} secondary>
+                    <Translatable resourceKey={i18nKey("cancel")} />
+                </Button>
+                {#if !authenticating}
+                    <Button
+                        danger
+                        disabled={deleting}
+                        loading={deleting}
+                        small
+                        onClick={() => (authenticating = true)}>
+                        <Translatable
+                            resourceKey={i18nKey(
+                                deleting ? "danger.deleting" : "danger.deleteAccount",
+                            )} />
+                    </Button>
+                {/if}
+            </ButtonGroup>
+        {/snippet}
+    </ModalContent>
+</Overlay>
diff --git a/frontend/app/src/components/home/profile/CustomBackgroundOverlay.svelte b/frontend/app/src/desktop/features/profile/CustomBackgroundOverlay.svelte
similarity index 100%
rename from frontend/app/src/components/home/profile/CustomBackgroundOverlay.svelte
rename to frontend/app/src/desktop/features/profile/CustomBackgroundOverlay.svelte
diff --git a/frontend/app/src/desktop/features/profile/DisplayNameInput.svelte b/frontend/app/src/desktop/features/profile/DisplayNameInput.svelte
new file mode 100644
index 0000000000..5834414ee5
--- /dev/null
+++ b/frontend/app/src/desktop/features/profile/DisplayNameInput.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+    import type { OpenChat } from "@client";
+    import { onMount } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Input from "@src/desktop/shared/Input.svelte";
+
+    const MIN_DISPLAY_NAME_LENGTH = 3;
+    const MAX_DISPLAY_NAME_LENGTH = 25;
+
+    interface Props {
+        client: OpenChat;
+        originalDisplayName: string | undefined;
+        displayName: string | undefined;
+        displayNameValid: boolean;
+        disabled: boolean;
+        children?: import("svelte").Snippet;
+    }
+
+    let {
+        client,
+        originalDisplayName,
+        displayName = $bindable(),
+        displayNameValid = $bindable(),
+        disabled,
+        children,
+    }: Props = $props();
+
+    let invalid = $derived(originalDisplayName !== displayName && !displayNameValid);
+
+    onMount(() => {
+        displayName = originalDisplayName;
+        displayNameValid = true;
+    });
+
+    function onChange(val: string | number | bigint) {
+        if (typeof val !== "string") return;
+
+        displayName = val;
+
+        if (displayName.length === 0) {
+            displayName = undefined;
+            displayNameValid = true;
+            return;
+        }
+
+        displayNameValid = client.isDisplayNameValid(displayName);
+    }
+</script>
+
+<Input
+    {onChange}
+    value={originalDisplayName ?? ""}
+    {disabled}
+    {invalid}
+    minlength={MIN_DISPLAY_NAME_LENGTH}
+    maxlength={MAX_DISPLAY_NAME_LENGTH}
+    countdown
+    placeholder={i18nKey("register.enterDisplayName")}>
+    {@render children?.()}
+</Input>
diff --git a/frontend/app/src/desktop/features/profile/FontSize.svelte b/frontend/app/src/desktop/features/profile/FontSize.svelte
new file mode 100644
index 0000000000..459f2cf70d
--- /dev/null
+++ b/frontend/app/src/desktop/features/profile/FontSize.svelte
@@ -0,0 +1,124 @@
+<script lang="ts">
+    import { fontScaleStore } from "@client";
+    import Range from "@src/desktop/shared/Range.svelte";
+    // onChange={() => (ui.fontScale = $fontScaleStore)} />
+</script>
+
+<div class="grid">
+    <div class="letter zero" onclick={() => fontScaleStore.set(0)}>A</div>
+    <div class="letter one" onclick={() => fontScaleStore.set(1)}>A</div>
+    <div class="letter two" onclick={() => fontScaleStore.set(2)}>A</div>
+    <div class="letter three" onclick={() => fontScaleStore.set(3)}>A</div>
+    <div class="letter four" onclick={() => fontScaleStore.set(4)}>A</div>
+    <div class="slider">
+        <Range min={0} max={4} bind:value={$fontScaleStore} />
+    </div>
+</div>
+
+<style lang="scss">
+    $trackHeight: 6px;
+    $thumbSize: 16px;
+    $trackColor: var(--button-bg);
+
+    input[type="range"] {
+        -webkit-appearance: none;
+        margin: 18px 0;
+        width: 100%;
+    }
+    input[type="range"]:focus {
+        outline: none;
+    }
+    input[type="range"]::-webkit-slider-runnable-track {
+        width: 100%;
+        height: $trackHeight;
+        cursor: pointer;
+        background: $trackColor;
+    }
+    input[type="range"]::-webkit-slider-thumb {
+        height: $thumbSize;
+        width: $thumbSize;
+        border-radius: 50%;
+        background: #ffffff;
+        cursor: pointer;
+        -webkit-appearance: none;
+        margin-top: -6px;
+    }
+    input[type="range"]:focus::-webkit-slider-runnable-track {
+        background: $trackColor;
+    }
+    input[type="range"]::-moz-range-track {
+        width: 100%;
+        height: $trackHeight;
+        cursor: pointer;
+        background: $trackColor;
+    }
+    input[type="range"]::-moz-range-thumb {
+        height: $thumbSize;
+        width: $thumbSize;
+        border-radius: 50%;
+        background: #ffffff;
+        cursor: pointer;
+    }
+    input[type="range"]::-ms-track {
+        width: 100%;
+        height: $trackHeight;
+        cursor: pointer;
+        background: transparent;
+        border-color: transparent;
+        border-width: 16px 0;
+        color: transparent;
+    }
+    input[type="range"]::-ms-thumb {
+        height: $thumbSize;
+        width: $thumbSize;
+        border-radius: 50%;
+        background: #ffffff;
+        cursor: pointer;
+    }
+
+    .grid {
+        display: grid;
+        grid-template-columns: 1fr repeat(3, 2fr) 1fr;
+        align-items: flex-end;
+    }
+
+    .slider {
+        grid-column: 1 / span 8;
+        .range-input {
+            width: 100%;
+        }
+    }
+
+    .letter {
+        cursor: pointer;
+        text-align: center;
+        padding: 0 $sp2;
+    }
+
+    .zero {
+        font-size: 12px;
+        font-weight: 100;
+        text-align: left;
+    }
+
+    .one {
+        font-size: 14px;
+        font-weight: 200;
+    }
+
+    .two {
+        font-size: 16px;
+        font-weight: 300;
+    }
+
+    .three {
+        font-size: 18px;
+        font-weight: 400;
+    }
+
+    .four {
+        font-size: 20px;
+        font-weight: 500;
+        text-align: right;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/profile/LearnToEarn.svelte b/frontend/app/src/desktop/features/profile/LearnToEarn.svelte
new file mode 100644
index 0000000000..737e48d430
--- /dev/null
+++ b/frontend/app/src/desktop/features/profile/LearnToEarn.svelte
@@ -0,0 +1,373 @@
+<script lang="ts">
+    import {
+        OpenChat,
+        achievements,
+        achievementsStore,
+        currentUserIdStore,
+        currentUserStore,
+        iconSize,
+        type Achievement,
+        type ExternalAchievement,
+    } from "@client";
+    import { getContext, onMount } from "svelte";
+    import CheckCircle from "svelte-material-icons/CheckCircle.svelte";
+    import CheckCircleOutline from "svelte-material-icons/CheckCircleOutline.svelte";
+    import InformationOutline from "svelte-material-icons/InformationOutline.svelte";
+    import Tooltip from "@src/desktop/ui/tooltip/Tooltip.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { now } from "@src/stores/time";
+    import Button from "@src/ui/Button.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import Progress from "@src/desktop/shared/Progress.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import ExternalLink from "@src/desktop/features/landing/ExternalLink.svelte";
+
+    const client = getContext<OpenChat>("client");
+    const enabled = new Set<string>([
+        "streak_3",
+        "streak_7",
+        "streak_14",
+        "streak_30",
+        "streak_100",
+        "streak_365",
+        "set_bio",
+        "set_avatar",
+        "joined_group",
+        "joined_community",
+        "sent_direct_message",
+        "received_direct_message",
+        "upgraded_to_diamond",
+        "set_display_name",
+        "sent_text",
+        "reacted_to_message",
+        "sent_file",
+        "sent_image",
+        "sent_poll",
+        "sent_crypto",
+        "sent_video",
+        "sent_audio",
+        "sent_giphy",
+        "sent_prize",
+        "sent_meme",
+        "sent_swap_offer",
+        "quote_replied",
+        "replied_in_thread",
+        "edited_message",
+        "deleted_message",
+        "tipped_message",
+        "forwarded_message",
+        "received_crypto",
+        "received_reaction",
+        "had_message_tipped",
+        "voted_on_poll",
+        "sent_reminder",
+        "set_community_display_name",
+        "joined_call",
+        "set_pin",
+        "favourited_chat",
+        "pinned_chat",
+        "followed_thread",
+        "swapped_from_wallet",
+        "accepted_swap_offer",
+        "referred_1st_user",
+        "referred_3rd_user",
+        "referred_10th_user",
+        "referred_20th_user",
+        "referred_50th_user",
+        "upgrade_to_gold_diamond",
+    ]);
+
+    interface Props {
+        onClose: () => void;
+    }
+    let { onClose }: Props = $props();
+
+    let selectedTab: "todo" | "done" | "external" = $state("todo");
+
+    function filter(achievement: Achievement): boolean {
+        return enabled.has(achievement) || $achievementsStore.has(achievement);
+    }
+
+    function selectTab(tab: "todo" | "done" | "external") {
+        selectedTab = tab;
+    }
+
+    onMount(() => {
+        client.getExternalAchievements().then((achievements) => {
+            externalAchievements = achievements.sort((a, b) => b.chitReward - a.chitReward);
+        });
+    });
+    let filtered = $derived([...achievements].filter(filter));
+    let [internalAchieved, internalNotAchieved] = $derived(
+        client.partition(filtered, (a) => $achievementsStore.has(a)),
+    );
+    let externalAchievements: ExternalAchievement[] = $state([]);
+    let totalAchievements = $derived(filtered.length + externalAchievements.length);
+    let [externalAchieved, externalNotAchieved] = $derived(
+        client.partition(externalAchievements, (a) => {
+            return $achievementsStore.has(a.name);
+        }),
+    );
+    let achieved = $derived([
+        ...internalAchieved.map((a) => `learnToEarn.${a}`),
+        ...externalAchieved.map((a) => a.name),
+    ]);
+    let percComplete = $derived(Math.round((achieved.length / totalAchievements) * 100));
+    let validExternalNotAchieved = $derived(
+        externalNotAchieved.filter((a) => !a.budgetExhausted && BigInt($now) < a.expires),
+    );
+</script>
+
+<Overlay {onClose} dismissible>
+    <ModalContent closeIcon {onClose}>
+        {#snippet header()}
+            <span class="header"><Translatable resourceKey={i18nKey("learnToEarn.title")} /></span>
+        {/snippet}
+
+        {#snippet body()}
+            <div class="body">
+                <div class="tabs">
+                    <!-- svelte-ignore a11y_click_events_have_key_events -->
+                    <div
+                        tabindex="0"
+                        role="button"
+                        onclick={() => selectTab("todo")}
+                        class:selected={selectedTab === "todo"}
+                        class="tab">
+                        <Translatable resourceKey={i18nKey("learnToEarn.todo")} />
+                    </div>
+                    {#if externalAchievements.length > 0}
+                        <!-- svelte-ignore a11y_click_events_have_key_events -->
+                        <div
+                            tabindex="0"
+                            role="button"
+                            onclick={() => selectTab("external")}
+                            class:selected={selectedTab === "external"}
+                            class="tab">
+                            <Translatable resourceKey={i18nKey("learnToEarn.external")} />
+                            <div class="icon">
+                                <Tooltip position={"bottom"} align={"end"}>
+                                    <InformationOutline
+                                        size={"1.2em"}
+                                        color={selectedTab === "external"
+                                            ? "var(--txt)"
+                                            : "var(--txt-light)"} />
+                                    {#snippet popupTemplate()}
+                                        <Translatable
+                                            resourceKey={i18nKey("learnToEarn.externalInfo")} />
+                                    {/snippet}
+                                </Tooltip>
+                            </div>
+                        </div>
+                    {/if}
+                    <!-- svelte-ignore a11y_click_events_have_key_events -->
+                    <div
+                        tabindex="0"
+                        role="button"
+                        onclick={() => selectTab("done")}
+                        class:selected={selectedTab === "done"}
+                        class="tab">
+                        <Translatable resourceKey={i18nKey("learnToEarn.done")} />
+                    </div>
+                </div>
+                {#if selectedTab === "todo"}
+                    <div class="list">
+                        {#if internalNotAchieved.length === 0}
+                            <div class="empty">
+                                <div class="emoji">😎</div>
+                                <div class="msg">
+                                    <Translatable
+                                        resourceKey={i18nKey("learnToEarn.nothingLeftToDo")} />
+                                </div>
+                            </div>
+                        {:else}
+                            {#each internalNotAchieved as achievement}
+                                <div class="achievement">
+                                    <div class="no icon">
+                                        <CheckCircleOutline size={$iconSize} color={"#ccc"} />
+                                    </div>
+                                    <Translatable
+                                        resourceKey={i18nKey(`learnToEarn.${achievement}`)} />
+                                </div>
+                            {/each}
+                        {/if}
+                    </div>
+                {/if}
+                {#if selectedTab === "done"}
+                    <div class="list">
+                        {#if achieved.length === 0}
+                            <div class="empty">
+                                <div class="emoji">😢</div>
+                                <div class="msg">
+                                    <Translatable
+                                        resourceKey={i18nKey("learnToEarn.nothingDone")} />
+                                </div>
+                            </div>
+                        {:else}
+                            {#each achieved as achievement}
+                                <div class="achievement">
+                                    <div class="yes icon">
+                                        <CheckCircle
+                                            size={$iconSize}
+                                            color={"var(--toast-success-bg)"} />
+                                    </div>
+                                    <Translatable resourceKey={i18nKey(achievement)} />
+                                </div>
+                            {/each}
+                        {/if}
+                    </div>
+                {/if}
+                {#if selectedTab === "external"}
+                    <div class="list">
+                        {#if validExternalNotAchieved.length === 0}
+                            <div class="empty">
+                                <div class="emoji">😎</div>
+                                <div class="msg">
+                                    <Translatable
+                                        resourceKey={i18nKey("learnToEarn.nothingLeftToDo")} />
+                                </div>
+                            </div>
+                        {:else}
+                            {#each validExternalNotAchieved as achievement}
+                                <div class="achievement external">
+                                    <div class="external icon">
+                                        <img
+                                            class="logo"
+                                            src={client.achievementLogo(achievement.id)}
+                                            alt={achievement.name} />
+                                        <ExternalLink
+                                            iconColor={"var(--txt)"}
+                                            href={`${achievement.url}?oc_userid=${$currentUserIdStore}&oc_username=${$currentUserStore.username}`}>
+                                            {achievement.name}
+                                        </ExternalLink>
+                                        <div class="reward">
+                                            {achievement.chitReward.toLocaleString()}
+                                        </div>
+                                    </div>
+                                </div>
+                            {/each}
+                        {/if}
+                    </div>
+                {/if}
+            </div>
+        {/snippet}
+
+        {#snippet footer()}
+            <span class="footer">
+                <div class="perc">
+                    <Progress size={"45px"} percent={percComplete}>
+                        <Translatable
+                            resourceKey={i18nKey("learnToEarn.percentageComplete", {
+                                perc: percComplete,
+                            })} />
+                    </Progress>
+                </div>
+                <Button small onClick={onClose}>
+                    <Translatable resourceKey={i18nKey("close")} />
+                </Button>
+            </span>
+        {/snippet}
+    </ModalContent>
+</Overlay>
+
+<style lang="scss">
+    :global(.tab .icon .noselect) {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .achievement {
+        display: flex;
+        gap: $sp3;
+
+        &.external {
+            margin-bottom: $sp2;
+        }
+    }
+
+    .perc {
+        flex: auto;
+        color: var(--txt);
+    }
+
+    .footer {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: $sp4;
+    }
+
+    .tabs {
+        display: flex;
+        align-items: center;
+        @include font(medium, normal, fs-90);
+        color: var(--txt-light);
+        gap: $sp5;
+        border-bottom: 1px solid var(--bd);
+        cursor: pointer;
+        margin-bottom: $sp5;
+
+        @include mobile() {
+            gap: $sp4;
+        }
+
+        .tab {
+            padding-bottom: 10px;
+            margin-bottom: -2px;
+            border-bottom: 3px solid transparent;
+            white-space: nowrap;
+            display: flex;
+            align-items: center;
+            gap: $sp2;
+
+            &.selected {
+                color: var(--txt);
+                border-bottom: 3px solid var(--txt);
+            }
+        }
+    }
+
+    .list {
+        height: 400px;
+        @include nice-scrollbar();
+    }
+
+    .empty {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        padding: 0 25%;
+        gap: $sp4;
+        text-align: center;
+
+        .emoji {
+            @include font(book, normal, fs-260);
+        }
+        .msg {
+            @include font(bold, normal, fs-140);
+        }
+    }
+
+    .logo {
+        width: toRem(20);
+        height: toRem(20);
+    }
+
+    .external {
+        display: flex;
+        align-items: center;
+        gap: $sp3;
+    }
+
+    .reward {
+        background: var(--button-bg);
+        color: var(--button-txt);
+        padding: $sp1 $sp2;
+        border-radius: $sp2;
+        @include font(light, normal, fs-70);
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/profile/LinkAccounts.svelte b/frontend/app/src/desktop/features/profile/LinkAccounts.svelte
new file mode 100644
index 0000000000..b3657703c7
--- /dev/null
+++ b/frontend/app/src/desktop/features/profile/LinkAccounts.svelte
@@ -0,0 +1,501 @@
+<script lang="ts">
+    import { AuthClient } from "@icp-sdk/auth/client";
+    import { DelegationChain, ECDSAKeyIdentity } from "@icp-sdk/core/identity";
+    import { Principal } from "@icp-sdk/core/principal";
+    import {
+        AuthProvider,
+        InMemoryAuthClientStorage,
+        iconSize,
+        selectedAuthProviderStore,
+        type AuthenticationPrincipal,
+        type OpenChat,
+        type ResourceKey,
+        type WebAuthnKey,
+    } from "@client";
+    import { ErrorCode } from "@shared";
+    import { getContext, onMount } from "svelte";
+    import ArrowRightBoldOutline from "svelte-material-icons/ArrowRightBoldOutline.svelte";
+    import LinkVariantPlus from "svelte-material-icons/LinkVariantPlus.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { configKeys } from "@src/utils/config";
+    import {
+        EmailPollerError,
+        EmailPollerSuccess,
+        EmailSigninHandler,
+    } from "@src/utils/signin";
+    import AlertBox from "@src/desktop/shared/AlertBox.svelte";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import ErrorMessage from "@src/desktop/shared/ErrorMessage.svelte";
+    import InternetIdentityLogo from "@src/desktop/features/landing/InternetIdentityLogo.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import EmailSigninFeedback from "@src/desktop/shared/EmailSigninFeedback.svelte";
+    import ChooseSignInOption from "./ChooseSignInOption.svelte";
+    import SignInOption from "./SignInOption.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        explanations: ResourceKey[];
+        iiPrincipal: string | undefined;
+        linkInternetIdentity?: boolean;
+        onProceed?: () => void;
+        onClose?: () => void;
+    }
+
+    let {
+        explanations,
+        iiPrincipal = $bindable(),
+        linkInternetIdentity = true,
+        onProceed,
+        onClose,
+    }: Props = $props();
+
+    iiPrincipal;
+
+    type IdentityDetail = {
+        key: ECDSAKeyIdentity;
+        delegation: DelegationChain;
+        provider: AuthProvider;
+        webAuthnKey?: WebAuthnKey;
+    };
+
+    type ApproverIdentity = { kind: "approver"; initiator: IdentityDetail };
+    type InitiatorIdentity = { kind: "initiator" };
+    type ReadyToLink = {
+        kind: "ready_to_link";
+        approver: IdentityDetail;
+        initiator: IdentityDetail;
+    };
+    type LinkStage = ApproverIdentity | InitiatorIdentity | ReadyToLink;
+
+    type ProviderStep =
+        | "choose_provider"
+        | "choose_eth_wallet"
+        | "choose_sol_wallet"
+        | "signing_in_with_email";
+
+    let error: string | undefined = $state();
+    let emailSigninHandler = new EmailSigninHandler(client, "account_linking", false);
+    let step: "explain" | "linking" = $state("explain");
+    let substep = $state<LinkStage>({ kind: "initiator" });
+    let emailInvalid = $state(false);
+    let email = $state("");
+    let providerStep: ProviderStep = $state("choose_provider");
+    let linking = $state(false);
+    let loggingInInitiator = false;
+    let verificationCode: string | undefined = $state(undefined);
+    let accounts: (AuthenticationPrincipal & { provider: AuthProvider })[] = $state([]);
+
+    let currentIdentity = $derived(accounts.find((a) => a.isCurrentIdentity));
+    let currentProvider = $derived(currentIdentity?.provider ?? $selectedAuthProviderStore);
+    let restrictTo = $derived(
+        substep.kind === "approver" && currentProvider !== undefined
+            ? new Set<string>([currentProvider])
+            : new Set<string>([AuthProvider.PASSKEY, AuthProvider.II, AuthProvider.EMAIL]),
+    );
+
+    onMount(() => {
+        client.getAuthenticationPrincipals().then((a) => (accounts = a));
+        emailSigninHandler.addEventListener("email_signin_event", emailEvent);
+        return () => {
+            emailSigninHandler.removeEventListener("email_signin_event", emailEvent);
+            emailSigninHandler.destroy();
+        };
+    });
+
+    function emailEvent(ev: Event): void {
+        if (ev instanceof EmailPollerError) {
+            error = "identity.failure.pollingError";
+        }
+
+        if (ev instanceof EmailPollerSuccess) {
+            authComplete(AuthProvider.EMAIL, ev.detail);
+        }
+    }
+
+    function initiateLinking() {
+        step = "linking";
+    }
+
+    // This is called both for the initiator and the approver
+    async function loginProvider(provider: AuthProvider) {
+        if (substep.kind === "ready_to_link") return;
+
+        const generalError = `identity.failure.login_${substep.kind}`;
+
+        if (emailInvalid && provider === AuthProvider.EMAIL) {
+            return;
+        }
+
+        localStorage.setItem(configKeys.selectedAuthEmail, email);
+        error = undefined;
+
+        if (provider === AuthProvider.PASSKEY) {
+            if (substep.kind === "initiator") {
+                const [identity, delegation, webAuthnKey] = await client.signUpWithWebAuthn(false);
+                substep = {
+                    kind: "approver",
+                    initiator: {
+                        key: identity,
+                        delegation,
+                        webAuthnKey,
+                        provider: AuthProvider.PASSKEY,
+                    },
+                };
+            } else {
+                const initiator = substep.initiator;
+                const [identity, delegation, webAuthnKey] =
+                    await client.reSignInWithCurrentWebAuthnIdentity();
+                substep = {
+                    kind: "ready_to_link",
+                    initiator,
+                    approver: {
+                        key: identity,
+                        delegation,
+                        webAuthnKey,
+                        provider: AuthProvider.PASSKEY,
+                    },
+                };
+            }
+        } else if (provider === AuthProvider.EMAIL) {
+            providerStep = "signing_in_with_email";
+            emailSigninHandler.generateMagicLink(email).then((resp) => {
+                if (resp.kind === "success") {
+                    verificationCode = resp.code;
+                } else if (resp.kind === "email_invalid") {
+                    error = "loginDialog.invalidEmail";
+                } else if (resp.kind === "failed_to_send_email") {
+                    console.debug("generateMagicLink failed_to_send_email", resp.error);
+                    error = "loginDialog.failedToSendEmail";
+                } else {
+                    error = generalError;
+                }
+            });
+        } else if (provider === AuthProvider.ETH) {
+            providerStep = "choose_eth_wallet";
+        } else if (provider === AuthProvider.SOL) {
+            providerStep = "choose_sol_wallet";
+        } else {
+            // This is the II / NFID case
+            const identity = await ECDSAKeyIdentity.generate();
+            const storage = new InMemoryAuthClientStorage();
+            const authClient = AuthClient.create({
+                storage,
+                identity: identity,
+            });
+            authClient
+                .then((c) => {
+                    c.login({
+                        ...client.getAuthClientOptions(provider),
+                        onSuccess: async () => {
+                            const delegation = await storage.get("delegation");
+                            if (delegation) {
+                                const principal = c.getIdentity().getPrincipal().toString();
+                                if (
+                                    substep.kind === "approver" &&
+                                    principal !== client.AuthPrincipal
+                                ) {
+                                    error = "identity.failure.principalMismatch";
+                                } else {
+                                    if (substep.kind === "initiator") {
+                                        iiPrincipal = principal;
+                                        substep = {
+                                            kind: "approver",
+                                            initiator: {
+                                                key: identity,
+                                                delegation: DelegationChain.fromJSON(delegation),
+                                                provider: AuthProvider.II,
+                                            },
+                                        };
+                                    } else if (substep.kind === "approver") {
+                                        substep = {
+                                            kind: "ready_to_link",
+                                            initiator: substep.initiator,
+                                            approver: {
+                                                key: identity,
+                                                delegation: DelegationChain.fromJSON(delegation),
+                                                provider,
+                                            },
+                                        };
+                                    }
+                                }
+                            }
+                        },
+                        onError: (err) => {
+                            console.log(`Failed to log into ${substep.kind}: `, err);
+                            error = generalError;
+                        },
+                    });
+                })
+                .catch((err) => {
+                    console.log(`Failed to log into ${substep.kind}: `, err);
+                    error = generalError;
+                });
+        }
+    }
+
+    // This is where we login in with the Internet Identity that we want to link to our existing OC account aka the Initiator
+    async function loginInternetIdentity() {
+        return loginProvider(AuthProvider.II);
+    }
+
+    function authComplete(
+        provider: AuthProvider.ETH | AuthProvider.SOL | AuthProvider.EMAIL,
+        detail: { kind: "success"; key: ECDSAKeyIdentity; delegation: DelegationChain },
+    ) {
+        providerStep = "choose_provider";
+        if (substep.kind === "approver") {
+            substep = {
+                kind: "ready_to_link",
+                initiator: substep.initiator,
+                approver: {
+                    key: detail.key,
+                    delegation: detail.delegation,
+                    provider,
+                },
+            };
+        } else if (substep.kind === "initiator") {
+            substep = {
+                kind: "approver",
+                initiator: {
+                    key: detail.key,
+                    delegation: detail.delegation,
+                    provider,
+                },
+            };
+        }
+    }
+
+    // Link the two identities that we have built together
+    function linkIdentities() {
+        if (substep.kind !== "ready_to_link" || currentIdentity === undefined) return;
+
+        const { initiator, approver } = substep;
+
+        const approverPrincipal = Principal.selfAuthenticating(
+            new Uint8Array(approver.delegation.publicKey),
+        ).toString();
+
+        if (currentIdentity.principal !== approverPrincipal) {
+            console.log("Principal mismatch: ", currentIdentity.principal, approverPrincipal);
+            error = "identity.failure.principalMismatch";
+            substep = { kind: "initiator" };
+            return;
+        }
+
+        error = undefined;
+        linking = true;
+        client
+            .linkIdentities(
+                initiator.key,
+                initiator.delegation,
+                initiator.provider === AuthProvider.II,
+                initiator.webAuthnKey,
+                approver.key,
+                approver.delegation,
+            )
+            .then((resp) => {
+                if (typeof resp === "object") {
+                    if (resp.kind === "success") {
+                        onProceed?.();
+                    } else if (resp.code === ErrorCode.PrincipalAlreadyUsed) {
+                        console.log("Identity already linked to another OpenChat account: ", resp);
+                        error = "identity.failure.alreadyLinked";
+                        substep = { kind: "initiator" };
+                    } else {
+                        console.log("Failed to link identities: ", resp);
+                        error = "identity.failure.link";
+                        substep = { kind: "initiator" };
+                    }
+                } else {
+                    // This branch will be removed once the Identity canister is fully
+                    // migrated over to returning the standardised error codes
+                    if (resp === "success") {
+                        onProceed?.();
+                    } else if (resp === "already_linked_to_principal") {
+                        console.log("Identity already linked by you: ", resp);
+                        error = "identity.failure.alreadyLinked";
+                    } else if (resp === "already_registered") {
+                        console.log("Identity already linked by someone else: ", resp);
+                        error = "identity.failure.alreadyLinked";
+                        substep = { kind: "initiator" };
+                    } else {
+                        console.log("Failed to link identities: ", resp);
+                        error = "identity.failure.link";
+                        substep = { kind: "initiator" };
+                    }
+                }
+            })
+            .finally(() => (linking = false));
+    }
+
+    function reset() {
+        emailSigninHandler.stopPolling();
+        providerStep = "choose_provider";
+        error = undefined;
+        step = "explain";
+        substep = { kind: "initiator" };
+    }
+</script>
+
+<div class="header">
+    <LinkVariantPlus size={$iconSize} color={"var(--txt)"} />
+    <div class="title">
+        <Translatable resourceKey={i18nKey("identity.linkIdentity")} />
+    </div>
+</div>
+
+<div class="body">
+    {#if error !== undefined}
+        <p class="info">
+            <ErrorMessage>
+                <Translatable resourceKey={i18nKey(error)} />
+            </ErrorMessage>
+        </p>
+    {:else if step === "explain"}
+        <AlertBox>
+            {#each explanations as explanation}
+                <p class="info">
+                    <Translatable resourceKey={explanation} />
+                </p>
+            {/each}
+        </AlertBox>
+    {:else if step === "linking"}
+        {#if substep.kind === "ready_to_link"}
+            <div class="info">
+                <Translatable resourceKey={i18nKey("identity.linkTwoIdentities")} />
+            </div>
+            <div class="identities">
+                <SignInOption
+                    hollow
+                    provider={substep.initiator.provider}
+                    name={i18nKey(substep.initiator.provider)} />
+                <ArrowRightBoldOutline size={$iconSize} color={"var(--icon-txt)"} />
+                <SignInOption
+                    hollow
+                    provider={substep.approver.provider}
+                    name={i18nKey(substep.approver.provider)} />
+            </div>
+        {:else if substep.kind === "initiator" && linkInternetIdentity}
+            <div class="info">
+                <Translatable resourceKey={i18nKey("identity.signInNext")} />
+            </div>
+            <Button
+                loading={loggingInInitiator}
+                disabled={loggingInInitiator}
+                onClick={loginInternetIdentity}>
+                <span class="link-ii-logo">
+                    <InternetIdentityLogo />
+                </span>
+                <Translatable resourceKey={i18nKey("loginDialog.signin")} /></Button>
+        {:else if providerStep === "choose_provider"}
+            <div class="info center">
+                <Translatable resourceKey={i18nKey(`identity.signIn_${substep.kind}`)} />
+            </div>
+            <ChooseSignInOption
+                mode={"signin"}
+                {restrictTo}
+                {currentProvider}
+                showMore={substep.kind === "initiator"}
+                bind:emailInvalid
+                bind:email
+                onLogin={loginProvider} />
+        {:else if providerStep === "choose_eth_wallet"}
+            <div class="eth-options">
+                {#await import("@src/desktop/shared/SigninWithEth.svelte")}
+                    <div class="loading">...</div>
+                {:then { default: SigninWithEth }}
+                    <SigninWithEth
+                        assumeIdentity={false}
+                        onConnected={(ev) => authComplete(AuthProvider.ETH, ev)} />
+                {/await}
+            </div>
+        {:else if providerStep === "choose_sol_wallet"}
+            <div class="sol-options">
+                {#await import("@src/desktop/shared/SigninWithSol.svelte")}
+                    <div class="loading">...</div>
+                {:then { default: SigninWithSol }}
+                    <SigninWithSol
+                        assumeIdentity={false}
+                        onConnected={(ev) => authComplete(AuthProvider.SOL, ev)} />
+                {/await}
+            </div>
+        {:else if providerStep === "signing_in_with_email"}
+            <EmailSigninFeedback
+                code={verificationCode}
+                polling={$emailSigninHandler}
+                onCopy={(code) => emailSigninHandler.copyCode(code)} />
+            {#if error !== undefined}
+                <ErrorMessage><Translatable resourceKey={i18nKey(error)} /></ErrorMessage>
+            {/if}
+        {/if}
+    {/if}
+</div>
+
+<div class="footer">
+    <ButtonGroup>
+        <Button secondary onClick={onClose}
+            ><Translatable resourceKey={i18nKey("cancel")} /></Button>
+        {#if error !== undefined}
+            <Button secondary onClick={reset}
+                ><Translatable resourceKey={i18nKey("identity.tryAgain")} /></Button>
+        {:else if step === "explain"}
+            {#if linkInternetIdentity}
+                <Button onClick={initiateLinking}>
+                    <span class="link-ii-logo">
+                        <InternetIdentityLogo />
+                    </span>
+                    <Translatable resourceKey={i18nKey("identity.link")} /></Button>
+            {:else}
+                <Button onClick={initiateLinking}>
+                    <Translatable resourceKey={i18nKey("identity.linkedAccounts.start")} /></Button>
+            {/if}
+        {:else if step === "linking"}
+            <Button secondary onClick={reset}
+                ><Translatable resourceKey={i18nKey("identity.back")} /></Button>
+            {#if substep.kind === "ready_to_link"}
+                <Button loading={linking} disabled={linking} onClick={linkIdentities}>
+                    <Translatable resourceKey={i18nKey("identity.link")} /></Button>
+            {/if}
+        {/if}
+    </ButtonGroup>
+</div>
+
+<style lang="scss">
+    .header {
+        @include font(bold, normal, fs-130, 29);
+        margin-bottom: $sp4;
+        display: flex;
+        align-items: center;
+        gap: $sp3;
+    }
+
+    .body,
+    .header {
+        margin-bottom: $sp5;
+    }
+
+    .info {
+        margin-bottom: $sp4;
+
+        &.center {
+            text-align: center;
+        }
+    }
+
+    .eth-options,
+    .sol-options {
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        gap: $sp4;
+    }
+
+    .identities {
+        display: flex;
+        gap: $sp3;
+        justify-content: space-between;
+        align-items: center;
+    }
+</style>
diff --git a/frontend/app/src/components/home/profile/LinkAccountsModal.svelte b/frontend/app/src/desktop/features/profile/LinkAccountsModal.svelte
similarity index 87%
rename from frontend/app/src/components/home/profile/LinkAccountsModal.svelte
rename to frontend/app/src/desktop/features/profile/LinkAccountsModal.svelte
index 665ae588a7..bf9fd89ff7 100644
--- a/frontend/app/src/components/home/profile/LinkAccountsModal.svelte
+++ b/frontend/app/src/desktop/features/profile/LinkAccountsModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
-    import ModalContent from "../../ModalContent.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
     interface Props {
         children?: Snippet;
         onClose?: () => void;
diff --git a/frontend/app/src/components/home/profile/LinkedAuthAccounts.svelte b/frontend/app/src/desktop/features/profile/LinkedAuthAccounts.svelte
similarity index 88%
rename from frontend/app/src/components/home/profile/LinkedAuthAccounts.svelte
rename to frontend/app/src/desktop/features/profile/LinkedAuthAccounts.svelte
index 677b60d52e..b470d6d05f 100644
--- a/frontend/app/src/components/home/profile/LinkedAuthAccounts.svelte
+++ b/frontend/app/src/desktop/features/profile/LinkedAuthAccounts.svelte
@@ -8,13 +8,13 @@
     import { getContext, onMount } from "svelte";
     import Account from "svelte-material-icons/Account.svelte";
     import LinkOff from "svelte-material-icons/LinkOff.svelte";
-    import Tooltip from "../../../components/tooltip/Tooltip.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Button from "../../Button.svelte";
-    import HoverIcon from "../../HoverIcon.svelte";
-    import Overlay from "../../Overlay.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import TruncatedAccount from "../TruncatedAccount.svelte";
+    import Tooltip from "@src/desktop/ui/tooltip/Tooltip.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Button from "@src/ui/Button.svelte";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import TruncatedAccount from "@src/desktop/shared/TruncatedAccount.svelte";
     import AuthProviderLogo from "./AuthProviderLogo.svelte";
     import LinkAccounts from "./LinkAccounts.svelte";
     import LinkAccountsModal from "./LinkAccountsModal.svelte";
diff --git a/frontend/app/src/components/home/profile/ManageAccounts.svelte b/frontend/app/src/desktop/features/profile/ManageAccounts.svelte
similarity index 93%
rename from frontend/app/src/components/home/profile/ManageAccounts.svelte
rename to frontend/app/src/desktop/features/profile/ManageAccounts.svelte
index 2e03bdc873..4012e5739c 100644
--- a/frontend/app/src/components/home/profile/ManageAccounts.svelte
+++ b/frontend/app/src/desktop/features/profile/ManageAccounts.svelte
@@ -10,17 +10,17 @@
         type WalletConfig,
     } from "@client";
     import { getContext, onMount } from "svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { toastStore } from "../../../stores/toast";
-    import Input from "../../Input.svelte";
-    import Legend from "../../Legend.svelte";
-    import ModalContent from "../../ModalContent.svelte";
-    import MultiToggle, { type Option } from "../../MultiToggle.svelte";
-    import Overlay from "../../Overlay.svelte";
-    import Search from "../../Search.svelte";
-    import Toggle from "../../Toggle.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import BalanceWithRefresh from "../BalanceWithRefresh.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import Input from "@src/desktop/shared/Input.svelte";
+    import Legend from "@src/desktop/shared/Legend.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import MultiToggle, { type Option } from "@src/desktop/shared/MultiToggle.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import Search from "@src/desktop/shared/Search.svelte";
+    import Toggle from "@src/desktop/shared/Toggle.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import BalanceWithRefresh from "@src/desktop/shared/BalanceWithRefresh.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/components/home/profile/OnBoardOptionLogo.svelte b/frontend/app/src/desktop/features/profile/OnBoardOptionLogo.svelte
similarity index 100%
rename from frontend/app/src/components/home/profile/OnBoardOptionLogo.svelte
rename to frontend/app/src/desktop/features/profile/OnBoardOptionLogo.svelte
diff --git a/frontend/app/src/desktop/features/profile/PremiumItem.svelte b/frontend/app/src/desktop/features/profile/PremiumItem.svelte
new file mode 100644
index 0000000000..1764503fca
--- /dev/null
+++ b/frontend/app/src/desktop/features/profile/PremiumItem.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+    import { i18nKey } from "@src/i18n/i18n";
+    import { PremiumItem, premiumItemsStore, premiumPrices } from "@client";
+    import { type Snippet } from "svelte";
+    import Lock from "svelte-material-icons/Lock.svelte";
+    import PremiumItemPayment from "@src/desktop/shared/PremiumItemPayment.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import Tooltip from "@src/desktop/ui/tooltip/Tooltip.svelte";
+
+    type OnClick = () => void;
+
+    interface Props {
+        onClick: OnClick;
+        children: Snippet<[OnClick]>;
+        item: PremiumItem;
+    }
+
+    let { onClick, children, item }: Props = $props();
+    let showPayGate = $state(false);
+    let hasFeature = $derived($premiumItemsStore.has(item));
+
+    let wrappedClick = $derived.by(() => {
+        return () => {
+            if (hasFeature) {
+                showPayGate = false;
+                return onClick();
+            } else {
+                showPayGate = true;
+            }
+        };
+    });
+</script>
+
+{#if showPayGate}
+    <PremiumItemPayment {item} onSuccess={wrappedClick} onCancel={() => (showPayGate = false)} />
+{/if}
+
+<Tooltip enable={!hasFeature} position="top" align="middle">
+    <div class="premium" class:locked={!hasFeature}>
+        {@render children(wrappedClick)}
+
+        {#if !hasFeature}
+            <div class="locked">
+                <Lock size={"1.3em"} color={"var(--accent)"} />
+            </div>
+        {/if}
+    </div>
+    {#snippet popupTemplate()}
+        <Translatable
+            resourceKey={i18nKey("premiumItem.priceTooltip", {
+                price: premiumPrices[item].toLocaleString(),
+            })}></Translatable>
+    {/snippet}
+</Tooltip>
+
+<style lang="scss">
+    .premium {
+        position: relative;
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        .locked {
+            transition: opacity 200ms ease-in-out;
+            position: absolute;
+            pointer-events: none;
+        }
+
+        &:hover {
+            .locked {
+                opacity: 0.8;
+            }
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/profile/ReAuthenticate.svelte b/frontend/app/src/desktop/features/profile/ReAuthenticate.svelte
new file mode 100644
index 0000000000..0149cdc0cc
--- /dev/null
+++ b/frontend/app/src/desktop/features/profile/ReAuthenticate.svelte
@@ -0,0 +1,243 @@
+<script lang="ts">
+    import { AuthClient } from "@icp-sdk/auth/client";
+    import { DelegationChain, DelegationIdentity, ECDSAKeyIdentity } from "@icp-sdk/core/identity";
+    import {
+        AuthProvider,
+        InMemoryAuthClientStorage,
+        selectedAuthProviderStore,
+        type OpenChat,
+        type ResourceKey,
+    } from "@client";
+    import { getContext, onMount } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { configKeys } from "@src/utils/config";
+    import {
+        EmailPollerError,
+        EmailPollerSuccess,
+        EmailSigninHandler,
+    } from "@src/utils/signin";
+    import ErrorMessage from "@src/desktop/shared/ErrorMessage.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import EmailSigninFeedback from "@src/desktop/shared/EmailSigninFeedback.svelte";
+    import ChooseSignInOption from "./ChooseSignInOption.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        autoSelect?: boolean;
+        message: ResourceKey;
+        onSuccess: (args: {
+            key: ECDSAKeyIdentity;
+            delegation: DelegationChain;
+            provider: AuthProvider;
+            signInProofJwt: string;
+        }) => void;
+    }
+
+    let { message, onSuccess, autoSelect = false }: Props = $props();
+
+    let error: string | undefined = $state();
+    let emailSigninHandler = new EmailSigninHandler(client, "account_linking", false);
+    let emailInvalid = $state(false);
+    let email = $state("");
+    let authStep:
+        | "choose_provider"
+        | "choose_eth_wallet"
+        | "choose_sol_wallet"
+        | "signing_in_with_email" = $state("choose_provider");
+    let verificationCode: string | undefined = $state(undefined);
+
+    onMount(() => {
+        emailSigninHandler.addEventListener("email_signin_event", emailEvent);
+        if (autoSelect) {
+            login($selectedAuthProviderStore);
+        }
+        return () => {
+            emailSigninHandler.removeEventListener("email_signin_event", emailEvent);
+            emailSigninHandler.destroy();
+        };
+    });
+
+    function emailEvent(ev: Event): void {
+        if (ev instanceof EmailPollerError) {
+            error = "identity.failure.pollingError";
+        }
+
+        if (ev instanceof EmailPollerSuccess) {
+            authComplete(ev.detail.key, ev.detail.delegation, AuthProvider.EMAIL);
+        }
+    }
+
+    // This is where we login in with the provider that we are currently signed in with (which can be any provider type)
+    async function login(provider: AuthProvider) {
+        if (emailInvalid && provider === AuthProvider.EMAIL) {
+            return;
+        }
+
+        localStorage.setItem(configKeys.selectedAuthEmail, email);
+        selectedAuthProviderStore.set(provider);
+        error = undefined;
+
+        if (provider === AuthProvider.PASSKEY) {
+            try {
+                const [key, delegation] = await client.reSignInWithCurrentWebAuthnIdentity();
+                await authComplete(
+                    key,
+                    delegation,
+                    provider,
+                );
+            } catch (err) {
+                console.error("An error occurred doing passkey auth: ", err);
+                error = "identity.failure.loginApprover";
+            }
+        } else if (provider === AuthProvider.EMAIL) {
+            authStep = "signing_in_with_email";
+            emailSigninHandler.generateMagicLink(email).then((resp) => {
+                if (resp.kind === "success") {
+                    verificationCode = resp.code;
+                } else if (resp.kind === "email_invalid") {
+                    error = "loginDialog.invalidEmail";
+                } else if (resp.kind === "failed_to_send_email") {
+                    console.debug("generateMagicLink failed_to_send_email", resp.error);
+                    error = "loginDialog.failedToSendEmail";
+                } else {
+                    error = "identity.failure.loginApprover";
+                }
+            });
+        } else if (provider === AuthProvider.ETH) {
+            authStep = "choose_eth_wallet";
+        } else if (provider === AuthProvider.SOL) {
+            authStep = "choose_sol_wallet";
+        } else {
+            // This is the II / NFID case
+            const identity = await ECDSAKeyIdentity.generate();
+            const storage = new InMemoryAuthClientStorage();
+            const authClient = AuthClient.create({
+                storage,
+                identity: identity,
+            });
+            authClient
+                .then((c) => {
+                    c.login({
+                        ...client.getAuthClientOptions(provider),
+                        onSuccess: async () => {
+                            const delegation = await storage.get("delegation");
+                            if (delegation) {
+                                const principal = c.getIdentity().getPrincipal().toString();
+                                if (principal !== client.AuthPrincipal) {
+                                    error = "identity.failure.principalMismatch";
+                                } else {
+                                    await authComplete(
+                                        identity,
+                                        DelegationChain.fromJSON(delegation),
+                                        provider,
+                                    );
+                                }
+                            }
+                        },
+                        onError: (err) => {
+                            console.log("Failed to log into approver: ", err);
+                            error = "identity.failure.loginApprover";
+                        },
+                    });
+                })
+                .catch((err) => {
+                    console.log("Failed to log into approver: ", err);
+                    error = "identity.failure.loginApprover";
+                });
+        }
+    }
+
+    async function authComplete(
+        key: ECDSAKeyIdentity,
+        delegation: DelegationChain,
+        provider: AuthProvider,
+    ) {
+        const identity = DelegationIdentity.fromDelegation(key, delegation);
+        const principal = identity.getPrincipal().toString();
+        if (principal !== client.AuthPrincipal) {
+            const authPrincipals = await client.getAuthenticationPrincipals();
+            const isPrincipalValid = authPrincipals.some((p) => p.principal === principal);
+            if (!isPrincipalValid) {
+                authStep = "choose_provider";
+                error = "identity.failure.principalMismatch";
+                return;
+            }
+        }
+
+        const signInProofJwt = await client.getSignInProof(key, delegation);
+        onSuccess({
+            key,
+            delegation,
+            provider,
+            signInProofJwt,
+        });
+    }
+</script>
+
+<div class="body">
+    {#if authStep === "choose_provider"}
+        <div class="info center">
+            <Translatable resourceKey={message} />
+        </div>
+        <ChooseSignInOption mode={"signin"} bind:emailInvalid bind:email onLogin={login} />
+    {:else if authStep === "choose_eth_wallet"}
+        <div class="eth-options">
+            {#await import("@src/desktop/shared/SigninWithEth.svelte")}
+                <div class="loading">...</div>
+            {:then { default: SigninWithEth }}
+                <SigninWithEth
+                    assumeIdentity={false}
+                    onConnected={(ev) => authComplete(ev.key, ev.delegation, AuthProvider.ETH)} />
+            {/await}
+        </div>
+    {:else if authStep === "choose_sol_wallet"}
+        <div class="sol-options">
+            {#await import("@src/desktop/shared/SigninWithSol.svelte")}
+                <div class="loading">...</div>
+            {:then { default: SigninWithSol }}
+                <SigninWithSol
+                    assumeIdentity={false}
+                    onConnected={(ev) => authComplete(ev.key, ev.delegation, AuthProvider.SOL)} />
+            {/await}
+        </div>
+    {:else if authStep === "signing_in_with_email"}
+        <EmailSigninFeedback
+            code={verificationCode}
+            polling={$emailSigninHandler}
+            onCopy={(code) => emailSigninHandler.copyCode(code)} />
+    {/if}
+    {#if error !== undefined}
+        <p class="info">
+            <ErrorMessage>
+                <Translatable resourceKey={i18nKey(error)} />
+            </ErrorMessage>
+        </p>
+    {/if}
+</div>
+
+<style lang="scss">
+    .body {
+        width: 100%;
+
+        @include not-mobile() {
+            min-width: 350px;
+        }
+    }
+
+    .info {
+        margin-bottom: $sp4;
+
+        &.center {
+            text-align: center;
+        }
+    }
+
+    .eth-options,
+    .sol-options {
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        gap: $sp4;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/profile/ReAuthenticateModal.svelte b/frontend/app/src/desktop/features/profile/ReAuthenticateModal.svelte
new file mode 100644
index 0000000000..d3dfdc751c
--- /dev/null
+++ b/frontend/app/src/desktop/features/profile/ReAuthenticateModal.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+    import type { DelegationChain, ECDSAKeyIdentity } from "@icp-sdk/core/identity";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import type { AuthProvider, ResourceKey } from "@client";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import ReAuthenticate from "./ReAuthenticate.svelte";
+    interface Props {
+        message: ResourceKey;
+        title: ResourceKey;
+        onSuccess: (args: {
+            key: ECDSAKeyIdentity;
+            delegation: DelegationChain;
+            provider: AuthProvider;
+            signInProofJwt: string;
+        }) => void;
+        onCancel: () => void;
+    }
+
+    let { onSuccess, message, onCancel, title }: Props = $props();
+</script>
+
+<Overlay dismissible onClose={onCancel}>
+    <ModalContent hideFooter closeIcon onClose={onCancel}>
+        {#snippet header()}
+            <Translatable resourceKey={title}></Translatable>
+        {/snippet}
+        {#snippet body()}
+            <ReAuthenticate autoSelect {onSuccess} {message} />
+        {/snippet}
+    </ModalContent>
+</Overlay>
diff --git a/frontend/app/src/desktop/features/profile/ReceiveCrypto.svelte b/frontend/app/src/desktop/features/profile/ReceiveCrypto.svelte
new file mode 100644
index 0000000000..9d28bf59b1
--- /dev/null
+++ b/frontend/app/src/desktop/features/profile/ReceiveCrypto.svelte
@@ -0,0 +1,98 @@
+<script lang="ts">
+    import {
+        cryptoBalanceStore,
+        cryptoLookup,
+        mobileWidth,
+        Poller,
+    } from "@client";
+    import { _ } from "svelte-i18n";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import ErrorMessage from "@src/desktop/shared/ErrorMessage.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import AccountInfo from "@src/desktop/shared/AccountInfo.svelte";
+    import BalanceWithRefresh from "@src/desktop/shared/BalanceWithRefresh.svelte";
+    import { onDestroy } from "svelte";
+
+    interface Props {
+        ledger: string;
+        onClose: () => void;
+    }
+
+    let { ledger, onClose }: Props = $props();
+
+    let error: string | undefined = $state(undefined);
+
+    let tokenDetails = $derived($cryptoLookup.get(ledger)!);
+    let symbol = $derived(tokenDetails.symbol);
+    let title = $derived(i18nKey(`cryptoAccount.receiveToken`, { symbol }));
+    let balanceWithRefresh: BalanceWithRefresh;
+
+    const refreshBalancePoller = new Poller(() => balanceWithRefresh?.refresh(), 10_000);
+
+    onDestroy(() => refreshBalancePoller.stop());
+
+    function onBalanceRefreshed() {
+        error = undefined;
+    }
+
+    function onBalanceRefreshError(err: string) {
+        error = $_(err);
+    }
+</script>
+
+<ModalContent>
+    {#snippet header()}
+        <span class="header">
+            <div class="main-title"><Translatable resourceKey={title} /></div>
+            <BalanceWithRefresh
+                bind:this={balanceWithRefresh}
+                {ledger}
+                value={$cryptoBalanceStore.get(ledger) ?? 0n}
+                label={i18nKey("cryptoAccount.shortBalanceLabel")}
+                bold
+                onRefreshed={onBalanceRefreshed}
+                onError={onBalanceRefreshError} />
+        </span>
+    {/snippet}
+    {#snippet body()}
+        <form class="body">
+            <AccountInfo qrSize={"larger"} centered {ledger} />
+            {#if error}
+                <ErrorMessage>{error}</ErrorMessage>
+            {/if}
+        </form>
+    {/snippet}
+    {#snippet footer()}
+        <span>
+            <ButtonGroup>
+                <Button tiny={$mobileWidth} onClick={onClose}
+                    ><Translatable resourceKey={i18nKey("close")} /></Button>
+            </ButtonGroup>
+        </span>
+    {/snippet}
+</ModalContent>
+
+<style lang="scss">
+    .header {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: $sp2;
+
+        .main-title {
+            flex: auto;
+        }
+    }
+    .how-to {
+        margin-top: $sp3;
+    }
+
+    .body {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+</style>
diff --git a/frontend/app/src/components/home/profile/ReferUsers.svelte b/frontend/app/src/desktop/features/profile/ReferUsers.svelte
similarity index 84%
rename from frontend/app/src/components/home/profile/ReferUsers.svelte
rename to frontend/app/src/desktop/features/profile/ReferUsers.svelte
index 786cab0be9..ae13046111 100644
--- a/frontend/app/src/components/home/profile/ReferUsers.svelte
+++ b/frontend/app/src/desktop/features/profile/ReferUsers.svelte
@@ -2,12 +2,12 @@
     import { currentUserIdStore, iconSize } from "@client";
     import CopyIcon from "svelte-material-icons/ContentCopy.svelte";
     import ShareIcon from "svelte-material-icons/ShareVariant.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { toastStore } from "../../../stores/toast";
-    import { canShare, shareLink } from "../../../utils/share";
-    import Link from "../../Link.svelte";
-    import QRCode from "../../QRCode.svelte";
-    import Translatable from "../../Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import { canShare, shareLink } from "@src/utils/share";
+    import Link from "@src/desktop/shared/Link.svelte";
+    import QRCode from "@src/desktop/shared/QRCode.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
 
     let link = $derived(`${window.location.origin}/?ref=${$currentUserIdStore}`);
 
diff --git a/frontend/app/src/components/home/profile/ReferredUsersList.svelte b/frontend/app/src/desktop/features/profile/ReferredUsersList.svelte
similarity index 87%
rename from frontend/app/src/components/home/profile/ReferredUsersList.svelte
rename to frontend/app/src/desktop/features/profile/ReferredUsersList.svelte
index 9d3a04ba64..a99df779eb 100644
--- a/frontend/app/src/components/home/profile/ReferredUsersList.svelte
+++ b/frontend/app/src/desktop/features/profile/ReferredUsersList.svelte
@@ -2,11 +2,11 @@
     import type { OpenChat, ReadonlySet } from "@client";
     import { AvatarSize, allUsersStore } from "@client";
     import { getContext } from "svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { referredUsersOpen } from "../../../stores/settings";
-    import Avatar from "../../Avatar.svelte";
-    import CollapsibleCard from "../../CollapsibleCard.svelte";
-    import LinkButton from "../../LinkButton.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { referredUsersOpen } from "@src/stores/settings";
+    import Avatar from "@src/desktop/shared/Avatar.svelte";
+    import CollapsibleCard from "@src/desktop/shared/CollapsibleCard.svelte";
+    import LinkButton from "@src/desktop/shared/LinkButton.svelte";
     import type { ProfileLinkClickedEvent } from "@webcomponents/profileLink";
     import Badges from "./Badges.svelte";
 
diff --git a/frontend/app/src/desktop/features/profile/RestrictedFeature.svelte b/frontend/app/src/desktop/features/profile/RestrictedFeature.svelte
new file mode 100644
index 0000000000..63c5050982
--- /dev/null
+++ b/frontend/app/src/desktop/features/profile/RestrictedFeature.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+    import type { Feature } from "@client";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import Button from "@src/ui/Button.svelte";
+
+    interface Props {
+        feature: Feature;
+        onClose: () => void;
+    }
+
+    let { feature, onClose }: Props = $props();
+</script>
+
+<ModalContent>
+    {#snippet header()}
+        <Translatable resourceKey={i18nKey("restricted.title")} />
+    {/snippet}
+    {#snippet body()}
+        <form class="body">
+            {#if feature === "swap"}
+                <Translatable resourceKey={i18nKey("restricted.swap")} />
+            {:else}
+                <Translatable resourceKey={i18nKey("restricted.generic")} />
+            {/if}
+        </form>
+    {/snippet}
+    {#snippet footer()}
+        <ButtonGroup>
+            <Button onClick={onClose}><Translatable resourceKey={i18nKey("close")} /></Button>
+        </ButtonGroup>
+    {/snippet}
+</ModalContent>
diff --git a/frontend/app/src/components/home/profile/RoleIcon.svelte b/frontend/app/src/desktop/features/profile/RoleIcon.svelte
similarity index 95%
rename from frontend/app/src/components/home/profile/RoleIcon.svelte
rename to frontend/app/src/desktop/features/profile/RoleIcon.svelte
index 97a2ea0658..7a9541b70b 100644
--- a/frontend/app/src/components/home/profile/RoleIcon.svelte
+++ b/frontend/app/src/desktop/features/profile/RoleIcon.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { type Level, type MemberRole, ROLE_MEMBER, roleAsText } from "@client";
-    import Tooltip from "../../../components/tooltip/Tooltip.svelte";
+    import Tooltip from "@src/desktop/ui/tooltip/Tooltip.svelte";
 
     interface Props {
         level: Level;
diff --git a/frontend/app/src/components/home/profile/SaveAccount.svelte b/frontend/app/src/desktop/features/profile/SaveAccount.svelte
similarity index 88%
rename from frontend/app/src/components/home/profile/SaveAccount.svelte
rename to frontend/app/src/desktop/features/profile/SaveAccount.svelte
index 297d7cc43c..69d4b0b46f 100644
--- a/frontend/app/src/components/home/profile/SaveAccount.svelte
+++ b/frontend/app/src/desktop/features/profile/SaveAccount.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
     import type { NamedAccount, OpenChat } from "@client";
-    import Input from "../../Input.svelte";
+    import Input from "@src/desktop/shared/Input.svelte";
     import { getContext } from "svelte";
     import { _ } from "svelte-i18n";
-    import Legend from "../../Legend.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
+    import Legend from "@src/desktop/shared/Legend.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/components/home/profile/Scanner.svelte b/frontend/app/src/desktop/features/profile/Scanner.svelte
similarity index 100%
rename from frontend/app/src/components/home/profile/Scanner.svelte
rename to frontend/app/src/desktop/features/profile/Scanner.svelte
diff --git a/frontend/app/src/desktop/features/profile/SendCrypto.svelte b/frontend/app/src/desktop/features/profile/SendCrypto.svelte
new file mode 100644
index 0000000000..01a8dc1635
--- /dev/null
+++ b/frontend/app/src/desktop/features/profile/SendCrypto.svelte
@@ -0,0 +1,425 @@
+<script lang="ts">
+    import {
+        BTC_SYMBOL,
+        CKBTC_SYMBOL,
+        type CkbtcMinterWithdrawalInfo,
+        cryptoBalanceStore,
+        cryptoLookup,
+        currentUserIdStore,
+        currentUserStore,
+        type EvmChain,
+        iconSize,
+        ICP_SYMBOL,
+        Lazy,
+        mobileWidth,
+        type NamedAccount,
+        type OneSecTransferFees,
+        type OpenChat,
+        type ResourceKey,
+    } from "@client";
+    import { ErrorCode, isAccountIdentifierValid, isICRCAddressValid } from "@shared";
+    import { getContext, onMount } from "svelte";
+    import QrcodeScan from "svelte-material-icons/QrcodeScan.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { pinNumberErrorMessageStore } from "@src/stores/pinNumber";
+    import { toastStore } from "@src/stores/toast";
+    import { Debouncer } from "@src/utils/debouncer";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import ErrorMessage from "@src/desktop/shared/ErrorMessage.svelte";
+    import Input from "@src/desktop/shared/Input.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import BalanceWithRefresh from "@src/desktop/shared/BalanceWithRefresh.svelte";
+    import NetworkSelector from "@src/desktop/shared/NetworkSelector.svelte";
+    import TokenInput from "@src/desktop/shared/TokenInput.svelte";
+    import AccountSelector from "./AccountSelector.svelte";
+    import SaveAccount from "./SaveAccount.svelte";
+    import Scanner from "./Scanner.svelte";
+
+    interface Props {
+        ledger: string;
+        onClose: () => void;
+    }
+
+    let { ledger, onClose }: Props = $props();
+
+    const client = getContext<OpenChat>("client");
+
+    let error: ResourceKey | undefined = $state();
+    let amountToSend: bigint = $state(0n);
+    let ckbtcMinterWithdrawalInfo = $state<CkbtcMinterWithdrawalInfo>();
+    let busy = $state(false);
+    let valid = $state(false);
+    let validAccountName = $state(false);
+    let capturingAccount = $state(false);
+    let validAmount = $state(false);
+    let targetAccount: string = $state("");
+
+    let scanner: Scanner;
+    let accounts: NamedAccount[] = $state([]);
+    let saveAccountElement: SaveAccount;
+    let balanceWithRefresh: BalanceWithRefresh;
+    const ckbtcMinterInfoDebouncer = new Debouncer(getCkbtcMinterWithdrawalInfo, 500);
+
+    let cryptoBalance = $derived($cryptoBalanceStore.get(ledger) ?? 0n);
+    let tokenDetails = $derived($cryptoLookup.get(ledger)!);
+    let account = $derived(
+        tokenDetails?.symbol === ICP_SYMBOL ? $currentUserStore.cryptoAccount : $currentUserIdStore,
+    );
+    let symbol = $derived(tokenDetails.symbol);
+    let selectedNetwork = $state<string>();
+    let isBtc = $derived(symbol === BTC_SYMBOL);
+    let isBtcNetwork = $derived(selectedNetwork === BTC_SYMBOL);
+    let oneSecEnabled = $derived(
+        tokenDetails.oneSecEnabled && tokenDetails.evmContractAddresses.length > 0,
+    );
+    let isOneSecNetwork = $derived(oneSecEnabled && selectedNetwork !== ICP_SYMBOL);
+    let networks = $derived.by(() => {
+        if (isBtc) {
+            return [BTC_SYMBOL, CKBTC_SYMBOL];
+        } else if (oneSecEnabled) {
+            return client.oneSecGetNetworks(tokenDetails.symbol);
+        } else {
+            return [];
+        }
+    });
+    let transferFees = $derived(tokenDetails?.transferFee ?? 0n);
+    let targetAccountValid = $derived.by(() => {
+        if (targetAccount.length === 0 || targetAccount === account) return false;
+        if (isBtc) return targetAccount.length >= 14;
+        if (isOneSecNetwork) return targetAccount.length === 42;
+        if (isICRCAddressValid(targetAccount)) return true;
+        if (symbol === ICP_SYMBOL && isAccountIdentifierValid(targetAccount)) return true;
+        return false;
+    });
+
+    let oneSecFees = $state<OneSecTransferFees[]>();
+    let oneSecFeesForToken = $derived.by(() => {
+        if (!isOneSecNetwork || oneSecFees === undefined) return undefined;
+        return oneSecFees.find(
+            (f) => f.sourceToken === tokenDetails.symbol && f.destinationChain === selectedNetwork,
+        );
+    });
+
+    let minAmount = $derived.by(() => {
+        if (isBtcNetwork && ckbtcMinterWithdrawalInfo !== undefined) {
+            return ckbtcMinterWithdrawalInfo.minWithdrawalAmount;
+        }
+        if (isOneSecNetwork && oneSecFeesForToken !== undefined) {
+            return oneSecFeesForToken.minAmount;
+        }
+        return BigInt(0);
+    });
+    let validSend = $derived(validAmount && targetAccountValid);
+    $effect(() => {
+        // If sending via the BTC network we must wait until the ckbtc minter info is loaded to correctly apply the min amount
+        valid =
+            (capturingAccount ? validAccountName : validSend) &&
+            (!isBtcNetwork || ckbtcMinterWithdrawalInfo !== undefined);
+    });
+    let title = $derived(i18nKey("cryptoAccount.sendToken", { symbol }));
+
+    let remainingBalance = $derived(
+        amountToSend > BigInt(0) ? cryptoBalance - amountToSend - transferFees : cryptoBalance,
+    );
+
+    let errorMessage = $derived(error !== undefined ? error : $pinNumberErrorMessageStore);
+    let networkFee = $derived.by(() => {
+        if (isBtcNetwork && ckbtcMinterWithdrawalInfo !== undefined) {
+            return ckbtcMinterWithdrawalInfo.feeEstimate;
+        } else if (isOneSecNetwork && oneSecFeesForToken !== undefined) {
+            return (
+                oneSecFeesForToken.latestTransferFee +
+                (amountToSend * BigInt(100 * oneSecFeesForToken.protocolFeePercent)) / BigInt(10000)
+            );
+        } else {
+            return undefined;
+        }
+    });
+    let networkFeeFormatted = $derived(
+        networkFee === undefined
+            ? undefined
+            : `~${client.formatTokens(networkFee, tokenDetails.decimals)}`,
+    );
+
+    onMount(async () => {
+        accounts = await client.loadSavedCryptoAccounts();
+
+        if (isBtc) {
+            getCkbtcMinterWithdrawalInfo(BigInt(0));
+        }
+    });
+
+    // Whenever the networks list changes, autoselect the first one
+    $effect(() => {
+        selectedNetwork = networks[0];
+    });
+
+    const oneSecFeesPromise = new Lazy(() => client.oneSecGetTransferFees());
+    $effect(() => {
+        if (isBtcNetwork) {
+            ckbtcMinterInfoDebouncer.execute(amountToSend);
+        } else if (isOneSecNetwork) {
+            // Filter to where source token equals destination token since we're dealing with cross-chain withdrawals
+            oneSecFeesPromise
+                .get()
+                .then(
+                    (fees) =>
+                        (oneSecFees = fees.filter(
+                            (f) =>
+                                f.sourceToken === f.destinationToken &&
+                                f.sourceChain === ICP_SYMBOL,
+                        )),
+                );
+        }
+    });
+
+    function getCkbtcMinterWithdrawalInfo(amountToSend: bigint) {
+        client
+            .getCkbtcMinterWithdrawalInfo(amountToSend)
+            .then((i) => (ckbtcMinterWithdrawalInfo = i));
+    }
+
+    function saveAccount() {
+        if (saveAccountElement !== undefined) {
+            saveAccountElement
+                .saveAccount()
+                .then((resp) => {
+                    if (resp.kind === "success") {
+                        onClose();
+                    } else if (resp.kind === "error" && resp.code === ErrorCode.NameTaken) {
+                        error = i18nKey("tokenTransfer.accountNameTaken");
+                    } else {
+                        error = i18nKey("tokenTransfer.failedToSaveAccount");
+                    }
+                })
+                .finally(() => (busy = false));
+        }
+    }
+
+    function scan() {
+        scanner?.scan();
+    }
+
+    function unknownAccount(account: string): boolean {
+        return accounts.find((a) => a.account === account) === undefined;
+    }
+
+    function send() {
+        if (!valid) return;
+
+        busy = true;
+        error = undefined;
+
+        const withdrawTokensPromise = isBtcNetwork
+            ? client.withdrawBtc(targetAccount, amountToSend)
+            : isOneSecNetwork
+              ? client.withdrawViaOneSec(
+                    ledger,
+                    symbol,
+                    selectedNetwork as EvmChain,
+                    targetAccount,
+                    amountToSend,
+                )
+              : client.withdrawCryptocurrency({
+                    kind: "pending",
+                    ledger,
+                    token: symbol,
+                    to: targetAccount,
+                    amountE8s: amountToSend,
+                    feeE8s: transferFees,
+                    createdAtNanos: BigInt(Date.now()) * BigInt(1_000_000),
+                });
+
+        withdrawTokensPromise
+            .then((resp) => {
+                if (resp.kind === "completed" || resp.kind === "success") {
+                    amountToSend = BigInt(0);
+                    balanceWithRefresh.refresh();
+                    toastStore.showSuccessToast(
+                        i18nKey("cryptoAccount.sendSucceeded", {
+                            symbol,
+                        }),
+                    );
+                    if (unknownAccount(targetAccount)) {
+                        capturingAccount = true;
+                    } else {
+                        onClose();
+                        targetAccount = "";
+                    }
+                } else if (resp.kind === "failed" || resp.kind === "error") {
+                    error = i18nKey("cryptoAccount.sendFailed", { symbol });
+                    client.logMessage(`Unable to withdraw ${symbol}`, resp);
+                }
+            })
+            .catch((err) => {
+                if (err !== "cancelled") {
+                    error = i18nKey("cryptoAccount.sendFailed", { symbol });
+                    client.logError(`Unable to withdraw ${symbol}`, err);
+                }
+            })
+            .finally(() => (busy = false));
+    }
+
+    function onBalanceRefreshed() {
+        error = undefined;
+    }
+
+    function onBalanceRefreshError(err: string) {
+        error = i18nKey(err);
+    }
+
+    function onPrimaryClick() {
+        busy = true;
+        if (capturingAccount) {
+            saveAccount();
+        } else {
+            send();
+        }
+    }
+</script>
+
+<ModalContent>
+    {#snippet header()}
+        <span class="header">
+            <div class="main-title"><Translatable resourceKey={title} /></div>
+            <BalanceWithRefresh
+                bind:this={balanceWithRefresh}
+                {ledger}
+                value={remainingBalance}
+                label={i18nKey("cryptoAccount.shortBalanceLabel")}
+                bold
+                onRefreshed={onBalanceRefreshed}
+                onError={onBalanceRefreshError} />
+        </span>
+    {/snippet}
+    {#snippet body()}
+        <form class="body">
+            {#if capturingAccount}
+                <SaveAccount
+                    bind:this={saveAccountElement}
+                    bind:valid={validAccountName}
+                    account={targetAccount}
+                    {accounts} />
+            {:else}
+                <Scanner onData={(data) => (targetAccount = data)} bind:this={scanner} />
+
+                {#if networks.length > 0 && selectedNetwork !== undefined}
+                    <NetworkSelector {networks} bind:selectedNetwork />
+                {/if}
+
+                <div class="token-input">
+                    <TokenInput
+                        {ledger}
+                        {transferFees}
+                        {minAmount}
+                        maxAmount={BigInt(Math.max(0, Number(cryptoBalance - transferFees)))}
+                        bind:valid={validAmount}
+                        bind:amount={amountToSend} />
+                </div>
+                <div class="target">
+                    <Input
+                        bind:value={targetAccount}
+                        countdown={false}
+                        maxlength={100}
+                        invalid={targetAccount.length > 0 && !targetAccountValid}
+                        placeholder={i18nKey("cryptoAccount.sendTarget")} />
+
+                    <div class="qr" onclick={scan}>
+                        <QrcodeScan size={$iconSize} color={"var(--icon-selected)"} />
+                    </div>
+                </div>
+
+                {#if accounts.length > 0 || networkFee !== undefined}
+                    <div class="lower-container">
+                        {#if accounts.length > 0}
+                            <div class="accounts">
+                                <AccountSelector bind:targetAccount {accounts} />
+                            </div>
+                        {/if}
+
+                        {#if networkFeeFormatted !== undefined}
+                            <div class="network-fee">
+                                <Translatable
+                                    resourceKey={i18nKey("cryptoAccount.networkFee", {
+                                        amount: networkFeeFormatted,
+                                        token: symbol,
+                                    })} />
+                            </div>
+                        {/if}
+                    </div>
+                {/if}
+            {/if}
+
+            {#if errorMessage !== undefined}
+                <ErrorMessage><Translatable resourceKey={errorMessage} /></ErrorMessage>
+            {/if}
+        </form>
+    {/snippet}
+    {#snippet footer()}
+        <span>
+            <ButtonGroup>
+                <Button secondary tiny={$mobileWidth} onClick={onClose}
+                    ><Translatable
+                        resourceKey={i18nKey(capturingAccount ? "noThanks" : "cancel")} /></Button>
+                <Button
+                    disabled={busy || !valid}
+                    loading={busy}
+                    tiny={$mobileWidth}
+                    onClick={onPrimaryClick}
+                    ><Translatable
+                        resourceKey={i18nKey(
+                            capturingAccount ? "tokenTransfer.saveAccount" : "tokenTransfer.send",
+                        )} /></Button>
+            </ButtonGroup>
+        </span>
+    {/snippet}
+</ModalContent>
+
+<style lang="scss">
+    :global(.target .input-wrapper input) {
+        padding-right: 40px;
+    }
+
+    .header {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: $sp2;
+
+        .main-title {
+            flex: auto;
+        }
+    }
+
+    .body {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .token-input {
+        margin-bottom: $sp3;
+    }
+
+    .target {
+        position: relative;
+
+        .qr {
+            position: absolute !important;
+            top: 10px;
+            right: $sp3;
+            cursor: pointer;
+        }
+    }
+
+    .lower-container {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .network-fee {
+        @include font(book, normal, fs-60);
+        margin-left: auto;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/profile/SetPinNumberModal.svelte b/frontend/app/src/desktop/features/profile/SetPinNumberModal.svelte
new file mode 100644
index 0000000000..3aa8ae54be
--- /dev/null
+++ b/frontend/app/src/desktop/features/profile/SetPinNumberModal.svelte
@@ -0,0 +1,216 @@
+<script lang="ts">
+    import type { DelegationChain, ECDSAKeyIdentity } from "@icp-sdk/core/identity";
+    import {
+        AuthProvider,
+        mobileWidth,
+        pinNumberFailureStore,
+        type OpenChat,
+        type Verification,
+    } from "@client";
+    import { getContext, onMount } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import {
+        pinNumberErrorMessageStore,
+        supportsForgot,
+        type PinOperation,
+    } from "@src/stores/pinNumber";
+    import { toastStore } from "@src/stores/toast";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import ErrorMessage from "@src/desktop/shared/ErrorMessage.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Pincode from "@src/desktop/features/pincode/Pincode.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import ForgotPinLabel from "@src/desktop/shared/ForgotPinLabel.svelte";
+    import ReAuthenticate from "./ReAuthenticate.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        type: PinOperation;
+        onPinSet?: (pin: string | undefined) => void;
+        onClose: () => void;
+    }
+
+    let { type = $bindable(), onClose, onPinSet }: Props = $props();
+
+    let busy = $state(false);
+    let currPinArray: string[] = $state([]);
+    let newPinArray: string[] = $state([]);
+    let signInProofJwt: string | undefined = $state(undefined);
+
+    onMount(() => {
+        pinNumberFailureStore.set(undefined);
+    });
+
+    function isPinValid(pin: string[]): boolean {
+        return pin.filter((c) => /^[0-9]$/.test(c)).length === 6;
+    }
+
+    function getVerification(): Verification {
+        if (signInProofJwt !== undefined) {
+            return {
+                kind: "reauthenticated",
+                signInProofJwt,
+            };
+        }
+
+        if (type.kind === "clear" || type.kind === "change") {
+            return {
+                kind: "pin_verification",
+                pin: currPinArray.join(""),
+            };
+        }
+
+        return { kind: "no_verification" };
+    }
+
+    function changePin(): Promise<void> {
+        const newPin = type.kind === "clear" ? undefined : newPinArray.join("");
+
+        busy = true;
+
+        return client
+            .setPinNumber(getVerification(), newPin)
+            .then((resp) => {
+                if (resp.kind === "success") {
+                    toastStore.showSuccessToast(i18nKey(`pinNumber.${type.kind}PinSuccess`));
+                    onPinSet?.(newPin);
+                    onClose();
+                } else {
+                    console.log("SetPinNumber failed", resp);
+                }
+            })
+            .finally(() => {
+                busy = false;
+            });
+    }
+
+    function reauthenticated(detail: {
+        key: ECDSAKeyIdentity;
+        delegation: DelegationChain;
+        provider: AuthProvider;
+        signInProofJwt: string;
+    }) {
+        if (type.kind !== "forgot") return;
+
+        signInProofJwt = detail.signInProofJwt;
+
+        switch (type.while.kind) {
+            case "clear":
+                type = { kind: "clear" };
+                changePin(); // no further input is required so just do it
+                break;
+            default:
+                type = { kind: "change" };
+        }
+    }
+
+    function onForgot() {
+        if (supportsForgot(type)) {
+            type = {
+                kind: "forgot",
+                while: type,
+            };
+        }
+    }
+
+    let title = $derived(i18nKey(`pinNumber.${type.kind}PinTitle`));
+    let message = $derived(
+        type.kind === "change" ? undefined : i18nKey(`pinNumber.${type.kind}PinMessage`),
+    );
+    let action = $derived(i18nKey(`pinNumber.${type.kind}Pin`));
+    let verificationValid = $derived(isPinValid(currPinArray) || signInProofJwt !== undefined);
+    let changeValid = $derived(
+        type.kind === "change" && isPinValid(newPinArray) && verificationValid,
+    );
+    let setValid = $derived(type.kind === "set" && isPinValid(newPinArray));
+    let clearValid = $derived(type.kind === "clear" && verificationValid);
+    let isValid = $derived(type.kind === "forgot" || changeValid || setValid || clearValid);
+    let showCurrentPin = $derived(type.kind !== "set" && signInProofJwt === undefined);
+    let errorMessage = $derived($pinNumberErrorMessageStore);
+</script>
+
+<ModalContent closeIcon fitToContent={!$mobileWidth} fixedWidth={false} {onClose}>
+    {#snippet header()}
+        <div class="header">
+            <Translatable resourceKey={title} />
+        </div>
+    {/snippet}
+    {#snippet body()}
+        <div class="body">
+            {#if type.kind === "forgot"}
+                {#if message !== undefined}
+                    <ReAuthenticate onSuccess={reauthenticated} {message} />
+                {/if}
+            {:else}
+                {#if message !== undefined}
+                    <p>
+                        <Translatable resourceKey={message} />
+                    </p>
+                {/if}
+                {#if showCurrentPin}
+                    <div class="code">
+                        {#if type.kind === "change"}
+                            <div>
+                                <Translatable resourceKey={i18nKey("pinNumber.currentPin")} />
+                            </div>
+                        {/if}
+                        <Pincode type="numeric" length={6} bind:code={currPinArray} />
+                        <ForgotPinLabel {onForgot} />
+                    </div>
+                {/if}
+                {#if type.kind !== "clear"}
+                    <div class="code">
+                        {#if type.kind === "change"}
+                            <div><Translatable resourceKey={i18nKey("pinNumber.newPin")} /></div>
+                        {/if}
+                        <Pincode type="numeric" length={6} bind:code={newPinArray} />
+                    </div>
+                {/if}
+                {#if errorMessage !== undefined}
+                    <ErrorMessage>
+                        <Translatable resourceKey={errorMessage} />
+                    </ErrorMessage>
+                {/if}
+            {/if}
+        </div>
+    {/snippet}
+    {#snippet footer()}
+        <div class="footer">
+            {#if type.kind === "forgot"}
+                <ButtonGroup align="center">
+                    <Button disabled={busy} secondary onClick={onClose}
+                        ><Translatable resourceKey={i18nKey("cancel")} /></Button>
+                </ButtonGroup>
+            {:else}
+                <ButtonGroup align="center">
+                    <Button disabled={busy} secondary onClick={onClose}
+                        ><Translatable resourceKey={i18nKey("cancel")} /></Button>
+                    <Button loading={busy} disabled={busy || !isValid} onClick={changePin}
+                        ><Translatable resourceKey={action} /></Button>
+                </ButtonGroup>
+            {/if}
+        </div>
+    {/snippet}
+</ModalContent>
+
+<style lang="scss">
+    .header {
+        text-align: center;
+    }
+
+    .body {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: $sp4;
+        max-width: 500px;
+    }
+
+    .code {
+        display: flex;
+        flex-direction: column;
+        gap: $sp3;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/profile/SignInOption.svelte b/frontend/app/src/desktop/features/profile/SignInOption.svelte
new file mode 100644
index 0000000000..58d28f1355
--- /dev/null
+++ b/frontend/app/src/desktop/features/profile/SignInOption.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+    import { AuthProvider, type ResourceKey } from "@client";
+    import Button from "@src/ui/Button.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import AuthProviderLogo from "./AuthProviderLogo.svelte";
+
+    interface Props {
+        provider: AuthProvider;
+        name: ResourceKey;
+        hollow?: boolean;
+        onClick?: (e: MouseEvent) => void;
+    }
+
+    let { provider, name, hollow = false, onClick }: Props = $props();
+</script>
+
+<div class="auth-option">
+    <AuthProviderLogo {provider} />
+    <Button fill {hollow} {onClick}>
+        <Translatable resourceKey={name} />
+    </Button>
+</div>
+
+<style lang="scss">
+    :global(.auth-option button) {
+        border-radius: 0 $sp2 $sp2 0;
+    }
+
+    .auth-option {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex: auto;
+    }
+</style>
diff --git a/frontend/app/src/components/StorageUsage.svelte b/frontend/app/src/desktop/features/profile/StorageUsage.svelte
similarity index 89%
rename from frontend/app/src/components/StorageUsage.svelte
rename to frontend/app/src/desktop/features/profile/StorageUsage.svelte
index 3c328ddc12..f929319550 100644
--- a/frontend/app/src/components/StorageUsage.svelte
+++ b/frontend/app/src/desktop/features/profile/StorageUsage.svelte
@@ -5,9 +5,9 @@
         storageInGBStore,
         storageStore,
     } from "@client";
-    import { i18nKey } from "../i18n/i18n";
-    import Progress from "./Progress.svelte";
-    import Translatable from "./Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Progress from "@src/desktop/shared/Progress.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
 </script>
 
 <!-- don't display anything if the user hasn't got any storage -->
diff --git a/frontend/app/src/components/home/profile/Streak.svelte b/frontend/app/src/desktop/features/profile/Streak.svelte
similarity index 98%
rename from frontend/app/src/components/home/profile/Streak.svelte
rename to frontend/app/src/desktop/features/profile/Streak.svelte
index e9ce97ea35..dc4226a767 100644
--- a/frontend/app/src/components/home/profile/Streak.svelte
+++ b/frontend/app/src/desktop/features/profile/Streak.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import Tooltip from "../../tooltip/Tooltip.svelte";
+    import Tooltip from "@src/desktop/ui/tooltip/Tooltip.svelte";
 
     type Streak =
         | "none"
diff --git a/frontend/app/src/desktop/features/profile/SuspendModal.svelte b/frontend/app/src/desktop/features/profile/SuspendModal.svelte
new file mode 100644
index 0000000000..ab8da0b492
--- /dev/null
+++ b/frontend/app/src/desktop/features/profile/SuspendModal.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+    import type { OpenChat } from "@client";
+    import { getContext } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import ErrorMessage from "@src/desktop/shared/ErrorMessage.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import TextArea from "@src/desktop/shared/TextArea.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    interface Props {
+        userId: string;
+        onClose: () => void;
+    }
+
+    let { userId, onClose }: Props = $props();
+
+    const client = getContext<OpenChat>("client");
+
+    let reason: string = $state("");
+    let suspending = $state(false);
+    let showError = $state(false);
+
+    function onSuspend() {
+        suspending = true;
+        showError = false;
+        client.suspendUser(userId, reason).then((success) => {
+            if (success) {
+                onClose();
+            } else {
+                showError = true;
+            }
+            suspending = false;
+        });
+    }
+</script>
+
+<Overlay dismissible {onClose}>
+    <ModalContent {onClose}>
+        {#snippet header()}
+            <div><Translatable resourceKey={i18nKey("suspendedUser")} /></div>
+        {/snippet}
+        {#snippet body()}
+            <div>
+                <TextArea
+                    bind:value={reason}
+                    autofocus
+                    minlength={3}
+                    maxlength={512}
+                    placeholder={i18nKey("reasonForSuspension")}>
+                    {#if showError}
+                        <ErrorMessage
+                            ><Translatable
+                                resourceKey={i18nKey("failedToSuspendUser")} /></ErrorMessage>
+                    {/if}
+                </TextArea>
+            </div>
+        {/snippet}
+        {#snippet footer()}
+            <div>
+                <ButtonGroup>
+                    <Button onClick={onSuspend} loading={suspending} small>
+                        <Translatable resourceKey={i18nKey("suspend")} />
+                    </Button>
+                    <Button onClick={onClose} disabled={suspending} small secondary>
+                        <Translatable resourceKey={i18nKey("cancel")} />
+                    </Button>
+                </ButtonGroup>
+            </div>
+        {/snippet}
+    </ModalContent>
+</Overlay>
diff --git a/frontend/app/src/desktop/features/profile/SwapCrypto.svelte b/frontend/app/src/desktop/features/profile/SwapCrypto.svelte
new file mode 100644
index 0000000000..a1eb9b2944
--- /dev/null
+++ b/frontend/app/src/desktop/features/profile/SwapCrypto.svelte
@@ -0,0 +1,451 @@
+<script lang="ts">
+    import type { DexId, InterpolationValues, OpenChat, ResourceKey } from "@client";
+    import {
+        cryptoBalanceStore,
+        enhancedCryptoLookup as cryptoLookup,
+        exchangeRatesLookupStore as exchangeRatesLookup,
+        mobileWidth,
+        swappableTokensStore,
+    } from "@client";
+    import { random128 } from "@shared";
+    import { getContext, onMount } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { pinNumberErrorMessageStore } from "@src/stores/pinNumber";
+    import { calculateDollarAmount } from "@src/utils/exchange";
+    import AlertBox from "@src/desktop/shared/AlertBox.svelte";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import Checkbox from "@src/desktop/shared/Checkbox.svelte";
+    import ErrorMessage from "@src/desktop/shared/ErrorMessage.svelte";
+    import Legend from "@src/desktop/shared/Legend.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import BalanceWithRefresh from "@src/desktop/shared/BalanceWithRefresh.svelte";
+    import CryptoSelector from "@src/desktop/shared/CryptoSelector.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import TokenInput from "@src/desktop/shared/TokenInput.svelte";
+    import SwapProgress, { type SwapOutcome } from "./SwapProgress.svelte";
+
+    interface Props {
+        ledgerIn: string;
+        onClose: () => void;
+    }
+
+    let { ledgerIn = $bindable(), onClose }: Props = $props();
+
+    const client = getContext<OpenChat>("client");
+
+    type SwapState = "quote" | "swap" | "finished";
+    type Result = "success" | "rateChanged" | "insufficientFunds" | "error" | undefined;
+
+    let error: string | undefined = $state(undefined);
+    let amountIn: bigint = $state(BigInt(0));
+    let busy = $state(false);
+    let valid = $state(false);
+    let swapState = $state<SwapState>("quote");
+    let result: Result = $state(undefined);
+    let validAmount = $state(false);
+    let ledgerOut: string | undefined = $state();
+    let swaps = $state({} as Record<string, DexId[]>);
+    let swapMessageValues: InterpolationValues | undefined = $state(undefined);
+    let bestQuote: [DexId, bigint] | undefined = $state(undefined);
+    let swapId: bigint | undefined = $state();
+    let userAcceptedWarning = $state(false);
+    let warnValueUnknown = $state(false);
+    let warnValueDropped = $state(false);
+
+    onMount(() => loadSwaps(ledgerIn));
+
+    function getPrimaryButtonText(state: SwapState, result: Result): ResourceKey {
+        let label;
+
+        if (state === "finished") {
+            label = result === "insufficientFunds" ? "back" : "requote";
+        } else {
+            label = state;
+        }
+
+        return i18nKey(`tokenSwap.${label}`);
+    }
+
+    function quote() {
+        if (!valid) return;
+
+        busy = true;
+        error = undefined;
+        result = undefined;
+        swapId = undefined;
+
+        client
+            .getTokenSwapQuotes(ledgerIn, ledgerOut!, amountIn - BigInt(2) * detailsIn.transferFee)
+            .then((response) => {
+                if (response.length === 0) {
+                    error = $_("tokenSwap.noQuotes", { values: { tokenIn: detailsIn.symbol } });
+                } else {
+                    bestQuote = response[0];
+
+                    const [dexId, quote] = bestQuote!;
+
+                    const amountOutText = client.formatTokens(quote, detailsOut!.decimals);
+                    const rate = (Number(amountOutText) / Number(amountInText)).toPrecision(3);
+                    const dex = dexName(dexId);
+                    const minAmountOut = BigInt(10) * detailsOut!.transferFee;
+                    const minAmountOutText = client.formatTokens(
+                        minAmountOut,
+                        detailsOut!.decimals,
+                    );
+
+                    const usdInText = calculateDollarAmount(
+                        amountIn,
+                        $exchangeRatesLookup.get(detailsIn.symbol.toLowerCase())?.toUSD,
+                        detailsIn.decimals,
+                    );
+                    const usdOutText = calculateDollarAmount(
+                        bestQuote[1],
+                        $exchangeRatesLookup.get(detailsOut!.symbol.toLowerCase())?.toUSD,
+                        detailsOut!.decimals,
+                    );
+
+                    warnValueUnknown = usdInText === "???" || usdOutText === "???";
+                    warnValueDropped =
+                        !warnValueUnknown && Number(usdOutText) < 0.9 * Number(usdInText);
+
+                    swapMessageValues = {
+                        amountIn: amountInText,
+                        tokenIn: detailsIn.symbol,
+                        rate,
+                        amountOut: amountOutText,
+                        tokenOut: detailsOut!.symbol,
+                        dex,
+                        minAmountOut: minAmountOutText,
+                        usdOut: usdOutText,
+                        usdIn: usdInText,
+                    };
+
+                    if (quote > minAmountOut) {
+                        swapState = "swap";
+                    } else {
+                        error = $_("tokenSwap.quoteTooLow", { values: swapMessageValues });
+                    }
+                }
+            })
+            .catch((err) => {
+                client.logError(`Error getting swap quotes for token: ${detailsIn.symbol}`, err);
+                error = $_("tokenSwap.quoteError", { values: { tokenIn: detailsIn.symbol } });
+            })
+            .finally(() => (busy = false));
+    }
+
+    function swap() {
+        if (!valid || bestQuote === undefined) return;
+
+        busy = true;
+        error = undefined;
+        result = undefined;
+
+        const ledgerInLocal = ledgerIn;
+        const ledgerOutLocal = ledgerOut!;
+        const bestQuoteLocal = bestQuote;
+
+        let minAmountOut = (bestQuoteLocal[1] * BigInt(98)) / BigInt(100);
+
+        client
+            .refreshAccountBalance(ledgerIn)
+            .then((balance) => {
+                if (balance < amountIn) {
+                    error = $_("tokenSwap.progress.insufficientFunds");
+                    result = "insufficientFunds";
+                    return false;
+                } else {
+                    return true;
+                }
+            })
+            .then((balanceCheckSuccess) => {
+                if (balanceCheckSuccess) {
+                    swapId = random128();
+                    return client.swapTokens(
+                        swapId,
+                        ledgerInLocal,
+                        ledgerOutLocal,
+                        amountIn,
+                        minAmountOut,
+                        bestQuoteLocal[0],
+                    );
+                }
+            })
+            .catch(() => {
+                swapId = undefined;
+                busy = false;
+            });
+    }
+
+    function dexName(dex: DexId): string {
+        switch (dex) {
+            case "icpswap":
+                return "ICPSwap";
+            case "taco":
+                return "TACO";
+        }
+        return dex;
+    }
+
+    function loadSwaps(ledger: string) {
+        client.getTokenSwaps(ledger).then((results) => {
+            ledgerOut = undefined;
+            swaps = results;
+            client.refreshSwappableTokens();
+            initialized = true;
+        });
+    }
+
+    function onLedgerInSelected(ledger: string, _: string): void {
+        loadSwaps(ledger);
+    }
+
+    function onSwapFinished(outcome: SwapOutcome, ledgerIn: string, ledgerOut: string) {
+        busy = false;
+        swapState = "finished";
+        result = outcome;
+
+        client.refreshAccountBalance(ledgerIn);
+        client.refreshAccountBalance(ledgerOut);
+    }
+
+    function onPrimaryClick() {
+        if (swapState === "finished" && result === "insufficientFunds") {
+            amountIn = BigInt(0);
+            swapState = "quote";
+        } else if (swapState === "quote" || result === "rateChanged") {
+            quote();
+        } else if (swapState === "swap") {
+            swap();
+        }
+    }
+
+    function onBalanceRefreshed() {
+        error = undefined;
+    }
+
+    function onBalanceRefreshError(err: string) {
+        error = $_(err);
+    }
+    let initialized = $state(false);
+
+    let detailsIn = $derived($cryptoLookup.get(ledgerIn)!);
+    let detailsOut = $derived(ledgerOut !== undefined ? $cryptoLookup.get(ledgerOut) : undefined);
+    let anySwapsAvailable = $derived(Object.keys(swaps).length > 0 && detailsOut !== undefined);
+    let swapping = $derived(swapState === "swap" && busy);
+    let amountInText = $derived(client.formatTokens(amountIn, detailsIn.decimals));
+    $effect(() => {
+        valid =
+            anySwapsAvailable &&
+            validAmount &&
+            (swapState === "swap"
+                ? (bestQuote !== undefined && userAcceptedWarning) ||
+                  (!warnValueUnknown && !warnValueDropped)
+                : true);
+    });
+    let title = $derived(
+        swapState === "quote"
+            ? i18nKey("tokenSwap.swapToken", { tokenIn: detailsIn.symbol })
+            : i18nKey("tokenSwap.swapTokenTo", {
+                  tokenIn: detailsIn.symbol,
+                  tokenOut: detailsOut!.symbol,
+              }),
+    );
+    let balanceIn = $derived($cryptoBalanceStore.get(ledgerIn) ?? 0n);
+    let remainingBalance = $derived(
+        amountIn > BigInt(0) ? balanceIn - amountIn - detailsIn.transferFee : balanceIn,
+    );
+    let primaryButtonText = $derived(getPrimaryButtonText(swapState, result));
+    let pinNumberError = $derived($pinNumberErrorMessageStore);
+</script>
+
+<ModalContent>
+    {#snippet header()}
+        <span class="header">
+            <div class="main-title"><Translatable resourceKey={title} /></div>
+            {#if swapState === "quote"}
+                <BalanceWithRefresh
+                    ledger={ledgerIn}
+                    value={remainingBalance}
+                    label={i18nKey("cryptoAccount.shortBalanceLabel")}
+                    bold
+                    onRefreshed={onBalanceRefreshed}
+                    onError={onBalanceRefreshError} />
+            {/if}
+        </span>
+    {/snippet}
+    {#snippet body()}
+        <form class="body">
+            {#if initialized}
+                {#if swapState === "quote"}
+                    <div class="swap">
+                        <div class="select-from">
+                            <Legend label={i18nKey("cryptoAccount.transactionHeaders.from")} />
+                            <div class="inner">
+                                <CryptoSelector
+                                    filter={(t) =>
+                                        t.balance > 0 && $swappableTokensStore.has(t.ledger)}
+                                    bind:ledger={ledgerIn}
+                                    onSelect={onLedgerInSelected} />
+                            </div>
+                        </div>
+                        <div class="amount">
+                            <TokenInput
+                                ledger={ledgerIn}
+                                minAmount={detailsIn.transferFee * BigInt(10)}
+                                maxAmount={detailsIn.balance}
+                                bind:valid={validAmount}
+                                bind:amount={amountIn} />
+                        </div>
+                        <div class="select-to">
+                            <Legend label={i18nKey("cryptoAccount.transactionHeaders.to")} />
+                            <div class="inner">
+                                <CryptoSelector
+                                    filter={(t) => Object.keys(swaps).includes(t.ledger)}
+                                    bind:ledger={ledgerOut} />
+                            </div>
+                        </div>
+                    </div>
+                {/if}
+
+                {#if (swapping || swapState === "finished") && swapId !== undefined && detailsOut !== undefined && bestQuote !== undefined}
+                    <div>
+                        <SwapProgress
+                            {swapId}
+                            tokenIn={detailsIn.symbol}
+                            tokenOut={detailsOut.symbol}
+                            ledgerIn={detailsIn.ledger}
+                            ledgerOut={detailsOut.ledger}
+                            amountIn={amountInText}
+                            decimalsOut={detailsOut.decimals}
+                            dex={dexName(bestQuote[0])}
+                            onFinished={onSwapFinished} />
+                    </div>
+                {/if}
+
+                {#if swapState === "swap" && !swapping}
+                    <div>{$_("tokenSwap.bestQuote", { values: swapMessageValues })}</div>
+                    <Markdown
+                        text={$_("tokenSwap.youWillReceive", { values: swapMessageValues })} />
+
+                    {#if warnValueDropped || warnValueUnknown}
+                        <AlertBox>
+                            <div class="warning">
+                                {#if warnValueDropped}
+                                    <Translatable
+                                        resourceKey={i18nKey(
+                                            "tokenSwap.warningValueDropped",
+                                            swapMessageValues,
+                                        )} />
+                                {:else}
+                                    <Translatable
+                                        resourceKey={i18nKey(
+                                            "tokenSwap.warningValueUnknown",
+                                            swapMessageValues,
+                                        )} />
+                                {/if}
+                            </div>
+                            <Checkbox
+                                id="confirm-understanding"
+                                small
+                                label={i18nKey("tokenSwap.confirmUnderstanding")}
+                                bind:checked={userAcceptedWarning} />
+                        </AlertBox>
+                    {/if}
+
+                    <div>{$_("tokenSwap.proceedWithSwap", { values: swapMessageValues })}</div>
+                {/if}
+
+                {#if error !== undefined || pinNumberError !== undefined}
+                    <ErrorMessage>
+                        {#if pinNumberError !== undefined}
+                            <Translatable resourceKey={pinNumberError} />
+                        {:else}
+                            {error}
+                        {/if}
+                    </ErrorMessage>
+                {/if}
+            {/if}
+        </form>
+    {/snippet}
+    {#snippet footer()}
+        <span>
+            <ButtonGroup>
+                {#if !swapping}
+                    <Button secondary tiny={$mobileWidth} onClick={onClose}
+                        ><Translatable resourceKey={i18nKey("close")} /></Button>
+                {/if}
+                {#if result !== "success" && result !== "error"}
+                    <Button
+                        disabled={busy || !valid}
+                        loading={busy}
+                        tiny={$mobileWidth}
+                        onClick={onPrimaryClick}
+                        ><Translatable resourceKey={primaryButtonText} /></Button>
+                {/if}
+            </ButtonGroup>
+        </span>
+    {/snippet}
+</ModalContent>
+
+<style lang="scss">
+    :global(.swap input.amount-val) {
+        border-radius: 0 !important;
+        border: var(--bw) solid var(--bd) !important;
+        border-left: none !important;
+        border-right: none !important;
+        height: 47px;
+    }
+
+    .header {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: $sp2;
+
+        .main-title {
+            flex: auto;
+        }
+    }
+
+    .body {
+        display: flex;
+        flex-direction: column;
+        gap: $sp4;
+    }
+
+    .swap {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .inner {
+            @include font(book, normal, fs-100);
+            padding: 0 $sp4;
+            border: var(--bw) solid var(--bd);
+            background-color: var(--modal-bg);
+            display: flex;
+            height: 47px;
+            align-items: center;
+        }
+
+        .select-from .inner {
+            border-radius: var(--rd) 0 0 var(--rd);
+        }
+
+        .select-to .inner {
+            border-radius: 0 var(--rd) var(--rd) 0;
+        }
+
+        .amount {
+            flex-grow: 1;
+        }
+    }
+
+    .warning {
+        margin-bottom: $sp4;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/profile/SwapProgress.svelte b/frontend/app/src/desktop/features/profile/SwapProgress.svelte
new file mode 100644
index 0000000000..7a95539f97
--- /dev/null
+++ b/frontend/app/src/desktop/features/profile/SwapProgress.svelte
@@ -0,0 +1,170 @@
+<script lang="ts" module>
+    export type SwapOutcome = "success" | "rateChanged" | "insufficientFunds" | "error";
+</script>
+
+<script lang="ts">
+    import type { OpenChat } from "@client";
+    import { Poller } from "@client";
+    import { getContext, onMount } from "svelte";
+    import ProgressSteps, { type Result, type Step } from "@src/desktop/shared/ProgressSteps.svelte";
+
+    interface Props {
+        swapId: bigint;
+        tokenIn: string;
+        tokenOut: string;
+        ledgerIn: string;
+        ledgerOut: string;
+        amountIn: string;
+        decimalsOut: number;
+        dex: string;
+        onFinished: (outcome: SwapOutcome, ledgerIn: string, ledgerOut: string) => void;
+    }
+
+    let {
+        swapId,
+        tokenIn,
+        tokenOut,
+        ledgerIn,
+        ledgerOut,
+        amountIn,
+        decimalsOut,
+        dex,
+        onFinished,
+    }: Props = $props();
+
+    ledgerOut;
+
+    const client = getContext<OpenChat>("client");
+    const POLL_INTERVAL = 1000;
+    const labelPrefix = "tokenSwap.progress.";
+
+    let percent: number | undefined = $state(0);
+    let amountOut = $state("");
+    let steps = $state<Step[]>([{ label: "get", status: "doing" }]);
+    let result = $state<Result>(undefined);
+    let poller: Poller | undefined = undefined;
+
+    let fullSteps = $derived(
+        steps.map((step) => ({ label: labelPrefix + step.label, status: step.status })),
+    );
+
+    let fullResult = $derived(
+        result !== undefined
+            ? { label: labelPrefix + result.label, status: result.status }
+            : undefined,
+    );
+
+    let labelValues = $derived({
+        tokenIn,
+        tokenOut,
+        amountIn,
+        amountOut,
+        dex,
+    });
+
+    onMount(() => {
+        poller = new Poller(querySwapProgress, POLL_INTERVAL, POLL_INTERVAL, true);
+
+        return () => poller?.stop();
+    });
+
+    function notifyFinished(outcome: "success" | "rateChanged" | "insufficientFunds" | "error") {
+        onFinished(outcome, ledgerIn, ledgerIn);
+        poller?.stop();
+    }
+
+    function updateSteps(newSteps: Step[]) {
+        if (newSteps.length >= steps.length) {
+            steps = newSteps;
+        }
+    }
+
+    function updatePercent(newPercent: number) {
+        if (newPercent >= (percent ?? 0)) {
+            percent = newPercent;
+        }
+    }
+
+    async function querySwapProgress() {
+        let response = await client.tokenSwapStatus(swapId);
+
+        if (response.kind === "success") {
+            if (
+                response.amountSwapped?.kind === "ok" &&
+                response.amountSwapped?.value.kind === "ok"
+            ) {
+                amountOut = client.formatTokens(response.amountSwapped.value.value, decimalsOut);
+            }
+
+            if (response.withdrawnFromDex?.kind === "ok") {
+                const success =
+                    response.amountSwapped?.kind === "ok" &&
+                    response.amountSwapped.value.kind === "ok";
+
+                updateSteps([
+                    { label: "get", status: "done" },
+                    { label: "deposit", status: "done" },
+                    { label: "notify", status: "done" },
+                    { label: "swap", status: "done" },
+                    { label: success ? "withdraw" : "refund", status: "done" },
+                ]);
+                result = { label: success ? "done" : "failed", status: "done" };
+                notifyFinished(success ? "success" : "rateChanged");
+            } else if (response.amountSwapped?.kind === "ok") {
+                if (response.amountSwapped.value.kind === "ok") {
+                    updateSteps([
+                        { label: "get", status: "done" },
+                        { label: "deposit", status: "done" },
+                        { label: "notify", status: "done" },
+                        { label: "swap", status: "done" },
+                        { label: "withdraw", status: "doing" },
+                    ]);
+                    updatePercent(80);
+                } else {
+                    updateSteps([
+                        { label: "get", status: "done" },
+                        { label: "deposit", status: "done" },
+                        { label: "notify", status: "done" },
+                        { label: "swap", status: "failed" },
+                        { label: "refund", status: "doing" },
+                    ]);
+                    percent = undefined;
+                }
+            } else if (response.notifyDex?.kind == "ok") {
+                updateSteps([
+                    { label: "get", status: "done" },
+                    { label: "deposit", status: "done" },
+                    { label: "notify", status: "done" },
+                    { label: "swap", status: "doing" },
+                ]);
+                updatePercent(60);
+            } else if (response.transfer?.kind == "ok") {
+                updateSteps([
+                    { label: "get", status: "done" },
+                    { label: "deposit", status: "done" },
+                    { label: "notify", status: "doing" },
+                ]);
+                updatePercent(40);
+            } else if (response.transfer?.kind == "error") {
+                updateSteps([
+                    { label: "get", status: "done" },
+                    { label: "deposit", status: "failed" },
+                ]);
+                result = { label: "insufficientFunds", status: "failed" };
+                notifyFinished("insufficientFunds");
+            } else if (response.depositAccount?.kind == "ok") {
+                updateSteps([
+                    { label: "get", status: "done" },
+                    { label: "deposit", status: "doing" },
+                ]);
+                updatePercent(20);
+            } else if (response.depositAccount?.kind == "error") {
+                updateSteps([{ label: "get", status: "failed" }]);
+                result = { label: "error", status: "failed" };
+                notifyFinished("error");
+            }
+        }
+    }
+</script>
+
+<ProgressSteps steps={fullSteps} {labelValues} result={fullResult} {percent} />
diff --git a/frontend/app/src/components/home/profile/ThemeButton.svelte b/frontend/app/src/desktop/features/profile/ThemeButton.svelte
similarity index 90%
rename from frontend/app/src/components/home/profile/ThemeButton.svelte
rename to frontend/app/src/desktop/features/profile/ThemeButton.svelte
index 84f9490e0b..90e9f2e040 100644
--- a/frontend/app/src/components/home/profile/ThemeButton.svelte
+++ b/frontend/app/src/desktop/features/profile/ThemeButton.svelte
@@ -4,12 +4,12 @@
     import { allUsersStore, AvatarSize, iconSize, OpenChat } from "@client";
     import { getContext } from "svelte";
     import ChevronDown from "svelte-material-icons/ChevronDown.svelte";
-    import type { Theme } from "../../../theme/types";
-    import Avatar from "../../Avatar.svelte";
-    import Legend from "../../Legend.svelte";
-    import Menu from "../../Menu.svelte";
-    import MenuIcon from "../../MenuIcon.svelte";
-    import MenuItem from "../../MenuItem.svelte";
+    import type { Theme } from "@src/theme/types";
+    import Avatar from "@src/desktop/shared/Avatar.svelte";
+    import Legend from "@src/desktop/shared/Legend.svelte";
+    import Menu from "@src/desktop/shared/Menu.svelte";
+    import MenuIcon from "@src/desktop/shared/MenuIcon.svelte";
+    import MenuItem from "@src/desktop/shared/MenuItem.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/components/home/profile/ThemeSelector.svelte b/frontend/app/src/desktop/features/profile/ThemeSelector.svelte
similarity index 89%
rename from frontend/app/src/components/home/profile/ThemeSelector.svelte
rename to frontend/app/src/desktop/features/profile/ThemeSelector.svelte
index b5b23b8c28..1ee80f26be 100644
--- a/frontend/app/src/components/home/profile/ThemeSelector.svelte
+++ b/frontend/app/src/desktop/features/profile/ThemeSelector.svelte
@@ -6,13 +6,13 @@
         preferredLightTheme,
         themes,
         themeType,
-    } from "../../../theme/themes";
-    import type { Theme } from "../../../theme/types";
-    import ButtonGroup from "../../ButtonGroup.svelte";
-    import Button from "../../Button.svelte";
+    } from "@src/theme/themes";
+    import type { Theme } from "@src/theme/types";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import Button from "@src/ui/Button.svelte";
     import ThemeButton from "./ThemeButton.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Translatable from "../../Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/ui/Translatable.svelte";
 
     type PartitionedThemes = {
         light: Theme[];
diff --git a/frontend/app/src/components/home/profile/TransactionEndpoint.svelte b/frontend/app/src/desktop/features/profile/TransactionEndpoint.svelte
similarity index 96%
rename from frontend/app/src/components/home/profile/TransactionEndpoint.svelte
rename to frontend/app/src/desktop/features/profile/TransactionEndpoint.svelte
index 398c449953..e0fa2b6a85 100644
--- a/frontend/app/src/components/home/profile/TransactionEndpoint.svelte
+++ b/frontend/app/src/desktop/features/profile/TransactionEndpoint.svelte
@@ -7,7 +7,7 @@
         type NamedAccount,
     } from "@client";
     import { getContext } from "svelte";
-    import Avatar from "../../Avatar.svelte";
+    import Avatar from "@src/desktop/shared/Avatar.svelte";
 
     const client = getContext<OpenChat>("client");
     interface Props {
diff --git a/frontend/app/src/components/home/profile/UnlinkAccounts.svelte b/frontend/app/src/desktop/features/profile/UnlinkAccounts.svelte
similarity index 92%
rename from frontend/app/src/components/home/profile/UnlinkAccounts.svelte
rename to frontend/app/src/desktop/features/profile/UnlinkAccounts.svelte
index b8c53f8d2d..91c359e400 100644
--- a/frontend/app/src/components/home/profile/UnlinkAccounts.svelte
+++ b/frontend/app/src/desktop/features/profile/UnlinkAccounts.svelte
@@ -7,12 +7,12 @@
     } from "@client";
     import { getContext } from "svelte";
     import LinkVariantOff from "svelte-material-icons/LinkVariantOff.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import AlertBox from "../../AlertBox.svelte";
-    import Button from "../../Button.svelte";
-    import ButtonGroup from "../../ButtonGroup.svelte";
-    import ErrorMessage from "../../ErrorMessage.svelte";
-    import Translatable from "../../Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import AlertBox from "@src/desktop/shared/AlertBox.svelte";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import ErrorMessage from "@src/desktop/shared/ErrorMessage.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/components/home/profile/UserProfile.svelte b/frontend/app/src/desktop/features/profile/UserProfile.svelte
similarity index 95%
rename from frontend/app/src/components/home/profile/UserProfile.svelte
rename to frontend/app/src/desktop/features/profile/UserProfile.svelte
index b4d6fc0e2b..077681c474 100644
--- a/frontend/app/src/components/home/profile/UserProfile.svelte
+++ b/frontend/app/src/desktop/features/profile/UserProfile.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import Markdown from "@shared_components/Markdown.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
     import { menuCloser } from "component-lib";
     import {
         type BotClientConfigData,
@@ -38,7 +38,7 @@
         interpolate,
         setLocale,
         supportedLanguages,
-    } from "../../../i18n/i18n";
+    } from "@src/i18n/i18n";
     import {
         accountsSectionOpen,
         advancedSectionOpen,
@@ -56,27 +56,27 @@
         userInfoOpen,
         verificationSectionOpen,
         videoSectionOpen,
-    } from "../../../stores/settings";
-    import { toastStore } from "../../../stores/toast";
-    import { uniquePersonGate } from "../../../utils/access";
-    import { isTouchDevice } from "../../../utils/devices";
-    import Button from "../../Button.svelte";
-    import ButtonGroup from "../../ButtonGroup.svelte";
-    import CollapsibleCard from "../../CollapsibleCard.svelte";
-    import DisplayNameInput from "../../DisplayNameInput.svelte";
-    import ErrorMessage from "../../ErrorMessage.svelte";
-    import HoverIcon from "../../HoverIcon.svelte";
-    import Verified from "../../icons/Verified.svelte";
-    import Legend from "../../Legend.svelte";
-    import SectionHeader from "../../SectionHeader.svelte";
-    import Select from "../../Select.svelte";
-    import StorageUsage from "../../StorageUsage.svelte";
-    import TextArea from "../../TextArea.svelte";
-    import Toggle from "../../Toggle.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import UsernameInput from "../../UsernameInput.svelte";
-    import Stats from "../Stats.svelte";
-    import Expiry from "../upgrade/Expiry.svelte";
+    } from "@src/stores/settings";
+    import { toastStore } from "@src/stores/toast";
+    import { uniquePersonGate } from "@src/utils/access";
+    import { isTouchDevice } from "@src/utils/devices";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import CollapsibleCard from "@src/desktop/shared/CollapsibleCard.svelte";
+    import DisplayNameInput from "./DisplayNameInput.svelte";
+    import ErrorMessage from "@src/desktop/shared/ErrorMessage.svelte";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import Verified from "@src/desktop/ui/icons/Verified.svelte";
+    import Legend from "@src/desktop/shared/Legend.svelte";
+    import SectionHeader from "@src/desktop/shared/SectionHeader.svelte";
+    import Select from "@src/desktop/shared/Select.svelte";
+    import StorageUsage from "./StorageUsage.svelte";
+    import TextArea from "@src/desktop/shared/TextArea.svelte";
+    import Toggle from "@src/desktop/shared/Toggle.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import UsernameInput from "@src/desktop/shared/UsernameInput.svelte";
+    import Stats from "@src/desktop/shared/Stats.svelte";
+    import Expiry from "@src/desktop/features/upgrade/Expiry.svelte";
     import AccountLinkingCode from "./AccountLinkingCode.svelte";
     import BotConfigData from "./BotConfigData.svelte";
     import ChitEvents from "./ChitEvents.svelte";
diff --git a/frontend/app/src/components/home/profile/UserProfileCard.svelte b/frontend/app/src/desktop/features/profile/UserProfileCard.svelte
similarity index 95%
rename from frontend/app/src/components/home/profile/UserProfileCard.svelte
rename to frontend/app/src/desktop/features/profile/UserProfileCard.svelte
index d38274e2cc..ebe4d5357b 100644
--- a/frontend/app/src/components/home/profile/UserProfileCard.svelte
+++ b/frontend/app/src/desktop/features/profile/UserProfileCard.svelte
@@ -14,20 +14,20 @@
         selectedCommunityMembersStore,
     } from "@client";
 
-    import EditableAvatar from "@src/components/EditableAvatar.svelte";
-    import EditableImageWrapper from "@src/components/EditableImageWrapper.svelte";
-    import HoverIcon from "@src/components/HoverIcon.svelte";
-    import ChooseImage from "@src/components/icons/ChooseImage.svelte";
-    import PremiumItemComponent from "@src/components/PremiumItem.svelte";
+    import EditableAvatar from "@src/ui/EditableAvatar.svelte";
+    import EditableImageWrapper from "@src/ui/EditableImageWrapper.svelte";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import ChooseImage from "@src/desktop/ui/icons/ChooseImage.svelte";
+    import PremiumItemComponent from "./PremiumItem.svelte";
     import { getContext, onMount } from "svelte";
     import { _ } from "svelte-i18n";
     import ClockOutline from "svelte-material-icons/ClockOutline.svelte";
     import Close from "svelte-material-icons/Close.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import { toastStore } from "../../../stores/toast";
-    import Avatar from "../../Avatar.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import Avatar from "@src/desktop/shared/Avatar.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
     import Badges from "./Badges.svelte";
     import ChitBalance from "./ChitBalance.svelte";
     import CustomBackgroundOverlay from "./CustomBackgroundOverlay.svelte";
diff --git a/frontend/app/src/desktop/features/profile/VerifyHumanity.svelte b/frontend/app/src/desktop/features/profile/VerifyHumanity.svelte
new file mode 100644
index 0000000000..5c01b2884b
--- /dev/null
+++ b/frontend/app/src/desktop/features/profile/VerifyHumanity.svelte
@@ -0,0 +1,181 @@
+<script lang="ts">
+    import { iconSize, type OpenChat } from "@client";
+    import { getContext, onMount } from "svelte";
+    import { _ } from "svelte-i18n";
+    import AccountCheck from "svelte-material-icons/AccountCheck.svelte";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import { uniquePersonCredentialGate } from "@src/utils/access";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import ErrorMessage from "@src/desktop/shared/ErrorMessage.svelte";
+    import FancyLoader from "@src/desktop/ui/icons/FancyLoader.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import HumanityConfirmation from "@src/desktop/shared/HumanityConfirmation.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import LinkAccounts from "./LinkAccounts.svelte";
+    import LinkAccountsModal from "./LinkAccountsModal.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        onClose: () => void;
+        onSuccess: () => void;
+    }
+
+    let { onClose, onSuccess }: Props = $props();
+
+    let failed = $state(false);
+    let verifying = $state(false);
+    let step: "linking" | "verification" = $state("linking");
+    let confirmed = $state(false);
+    let iiPrincipal: string | undefined = $state(undefined);
+    let checkingPrincipal = $state(true);
+
+    onMount(() => {
+        client
+            .getLinkedIIPrincipal()
+            .then((p) => {
+                iiPrincipal = p;
+                if (iiPrincipal !== undefined) {
+                    step = "verification";
+                }
+            })
+            .finally(() => (checkingPrincipal = false));
+    });
+
+    function verify() {
+        if (iiPrincipal === undefined) return;
+        const iiPrincipalCopy = iiPrincipal;
+
+        verifying = true;
+        failed = false;
+        client
+            .verifyAccessGate(uniquePersonCredentialGate, iiPrincipalCopy)
+            .then((credential) => {
+                if (credential === undefined) {
+                    failed = true;
+                } else {
+                    return client
+                        .submitProofOfUniquePersonhood(credential, iiPrincipalCopy)
+                        .then((resp) => {
+                            if (resp.kind !== "success") {
+                                failed = true;
+                            } else {
+                                onSuccess();
+                            }
+                        });
+                }
+            })
+            .catch(() => (failed = true))
+            .finally(() => (verifying = false));
+    }
+</script>
+
+{#if checkingPrincipal}
+    <ModalContent hideFooter hideHeader fadeDelay={0} fadeDuration={0}>
+        {#snippet body()}
+            <div>
+                <div class="loader">
+                    <FancyLoader />
+                </div>
+            </div>
+        {/snippet}
+    </ModalContent>
+{:else if step === "linking"}
+    <LinkAccountsModal>
+        <LinkAccounts
+            bind:iiPrincipal
+            {onClose}
+            onProceed={() => (step = "verification")}
+            explanations={[i18nKey("identity.humanityWarning")]} />
+    </LinkAccountsModal>
+{:else}
+    <ModalContent fadeDelay={0} fadeDuration={0}>
+        {#snippet header()}
+            <div class="header">
+                <AccountCheck size={$iconSize} color={"var(--txt)"} />
+                <div class="title">
+                    <Translatable resourceKey={i18nKey("access.uniquePerson")} />
+                </div>
+            </div>
+        {/snippet}
+        {#snippet body()}
+            <div>
+                {#if failed}
+                    <p class="info">
+                        <ErrorMessage>
+                            <Translatable resourceKey={i18nKey("human.failed")} />
+                        </ErrorMessage>
+                    </p>
+                    <p class="question">
+                        <Translatable resourceKey={i18nKey("access.uniquePersonInfo1")} />
+                    </p>
+
+                    <p class="answer">
+                        <Markdown text={interpolate($_, i18nKey("access.uniquePersonInfo2"))} />
+                    </p>
+
+                    <p class="answer">
+                        <Translatable resourceKey={i18nKey("access.uniquePersonInfo3")} />
+                    </p>
+                {:else}
+                    <p class="info">
+                        <Translatable resourceKey={i18nKey("human.instruction")} />
+                    </p>
+                    <HumanityConfirmation bind:confirmed />
+                {/if}
+            </div>
+        {/snippet}
+
+        {#snippet footer()}
+            <div>
+                <ButtonGroup>
+                    <Button secondary onClick={onClose}
+                        ><Translatable resourceKey={i18nKey("cancel")} /></Button>
+                    <!-- <Button secondary on:click={() => (step = "linking")}
+                        ><Translatable resourceKey={i18nKey("identity.back")} /></Button> -->
+                    <Button
+                        loading={verifying}
+                        disabled={verifying || !confirmed || iiPrincipal === undefined}
+                        onClick={verify}
+                        ><Translatable resourceKey={i18nKey("access.verify")} /></Button>
+                </ButtonGroup>
+            </div>
+        {/snippet}
+    </ModalContent>
+{/if}
+
+<style lang="scss">
+    :global(.link-ii-logo img) {
+        width: 24px;
+    }
+
+    .header {
+        @include font(bold, normal, fs-130, 29);
+        margin-bottom: $sp4;
+        display: flex;
+        align-items: center;
+        gap: $sp3;
+    }
+
+    .info,
+    .question,
+    .answer {
+        margin-bottom: $sp4;
+    }
+
+    .question {
+        @include font(book, normal, fs-90);
+    }
+
+    .answer {
+        color: var(--txt-light);
+        @include font(book, normal, fs-90);
+    }
+
+    .loader {
+        width: 100px;
+        margin: 100px auto;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/profile/VideoCallRingtone.svelte b/frontend/app/src/desktop/features/profile/VideoCallRingtone.svelte
new file mode 100644
index 0000000000..ff90cffb8e
--- /dev/null
+++ b/frontend/app/src/desktop/features/profile/VideoCallRingtone.svelte
@@ -0,0 +1,88 @@
+<script lang="ts">
+    import { iconSize } from "@client";
+    import { onMount } from "svelte";
+    import PauseCircleOutline from "svelte-material-icons/PauseCircleOutline.svelte";
+    import PlayCircleOutline from "svelte-material-icons/PlayCircleOutline.svelte";
+    import WaveSurfer from "wavesurfer.js";
+    import { Ringtone, selectedRingtone } from "@src/stores/video";
+    import { currentTheme } from "@src/theme/themes";
+    import Radio from "@src/desktop/shared/Radio.svelte";
+
+    interface Props {
+        ringtone: Ringtone;
+        onTogglePlay: (ringtone: Ringtone) => void;
+    }
+
+    let { ringtone, onTogglePlay }: Props = $props();
+
+    let waveform: HTMLDivElement | undefined = $state();
+
+    let checked = $derived($selectedRingtone === ringtone.key);
+
+    onMount(() => {
+        if (!waveform) return;
+
+        const wavesurfer = WaveSurfer.create({
+            height: 30,
+            cursorWidth: 0,
+            barWidth: 2,
+            barRadius: 4,
+            barGap: 2,
+            container: waveform,
+            waveColor: $currentTheme["txt-light"],
+            progressColor: $currentTheme.accent,
+            media: ringtone.audio,
+        });
+
+        wavesurfer.on("click", () => {
+            if (!ringtone.playing) {
+                togglePlay();
+            }
+        });
+    });
+
+    function togglePlay(e?: Event) {
+        e?.preventDefault();
+        onTogglePlay(ringtone);
+    }
+
+    function selectRingtone() {
+        selectedRingtone.set(ringtone.key);
+    }
+</script>
+
+<div class="wrapper">
+    <Radio onChange={selectRingtone} {checked} id={ringtone.name} group="video-ringtone">
+        <div class="ringtone">
+            <div class="name">{ringtone.name}</div>
+            <div onclick={togglePlay} class="play">
+                {#if ringtone.playing}
+                    <PauseCircleOutline size={$iconSize} color={"var(--icon-selected)"} />
+                {:else}
+                    <PlayCircleOutline size={$iconSize} color={"var(--icon-txt)"} />
+                {/if}
+            </div>
+        </div>
+    </Radio>
+    <div bind:this={waveform} class="waveform"></div>
+</div>
+
+<style lang="scss">
+    .wrapper {
+        border: var(--bw) solid var(--bd);
+        border-radius: var(--rd);
+        padding: $sp3;
+        margin-bottom: $sp3;
+    }
+
+    .ringtone {
+        display: flex;
+        gap: $sp4;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .play {
+        cursor: pointer;
+    }
+</style>
diff --git a/frontend/app/src/components/home/profile/VideoCallSettings.svelte b/frontend/app/src/desktop/features/profile/VideoCallSettings.svelte
similarity index 85%
rename from frontend/app/src/components/home/profile/VideoCallSettings.svelte
rename to frontend/app/src/desktop/features/profile/VideoCallSettings.svelte
index 24cc863d00..3c05175bb6 100644
--- a/frontend/app/src/components/home/profile/VideoCallSettings.svelte
+++ b/frontend/app/src/desktop/features/profile/VideoCallSettings.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-    import { i18nKey } from "../../../i18n/i18n";
-    import { videoCameraOn, videoMicOn, videoSpeakerView } from "../../../stores/settings";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { videoCameraOn, videoMicOn, videoSpeakerView } from "@src/stores/settings";
     import VideoCallRingtone from "./VideoCallRingtone.svelte";
-    import Toggle from "../../Toggle.svelte";
-    import Legend from "../../Legend.svelte";
-    import { Ringtone } from "../../../stores/video";
+    import Toggle from "@src/desktop/shared/Toggle.svelte";
+    import Legend from "@src/desktop/shared/Legend.svelte";
+    import { Ringtone } from "@src/stores/video";
     import { onDestroy } from "svelte";
 
     let ringtones: Ringtone[] = [
diff --git a/frontend/app/src/desktop/features/profile/ViewUserProfileModal.svelte b/frontend/app/src/desktop/features/profile/ViewUserProfileModal.svelte
new file mode 100644
index 0000000000..cb97b2e3bc
--- /dev/null
+++ b/frontend/app/src/desktop/features/profile/ViewUserProfileModal.svelte
@@ -0,0 +1,330 @@
+<script lang="ts">
+    import {
+        type ChatSummary,
+        type CommunitySummary,
+        type OpenChat,
+        type PublicProfile,
+        type ReadonlySet,
+        type ResourceKey,
+        type UserSummary,
+        blockedUsersStore,
+        currentUserIdStore,
+        mobileWidth,
+        platformModeratorStore,
+        publish,
+        selectedChatBlockedUsersStore,
+        selectedChatSummaryStore,
+        selectedCommunityBlockedUsersStore,
+        selectedCommunitySummaryStore,
+        setRightPanelHistory,
+    } from "@client";
+
+    import { getContext, onMount } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import UserProfileCard from "./UserProfileCard.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        userId: string;
+        alignTo?: HTMLElement | undefined;
+        chatButton?: boolean;
+        inGlobalContext?: boolean;
+        onOpenDirectChat: () => void;
+        onClose: () => void;
+    }
+
+    let {
+        userId,
+        alignTo = undefined,
+        chatButton = true,
+        inGlobalContext = false,
+        onOpenDirectChat,
+        onClose,
+    }: Props = $props();
+
+    let profile: PublicProfile | undefined = $state();
+    let user: UserSummary | undefined = $state();
+    let backgroundUrl = $derived(
+        profile !== undefined
+            ? client.buildUserBackgroundUrl(
+                  import.meta.env.OC_BLOB_URL_PATTERN!,
+                  userId,
+                  profile.backgroundId,
+              )
+            : undefined,
+    );
+    let hasCustomBackground = $derived(backgroundUrl !== undefined);
+
+    let rendering = $state<Promise<void>>();
+
+    onMount(async () => {
+        try {
+            rendering = new Promise(async (resolve) => {
+                user = await client.getUser(userId);
+                client.getPublicProfile(userId).subscribe({
+                    onResult: (result) => {
+                        profile = result;
+                        if (profile === undefined) {
+                            onClose();
+                        } else {
+                            resolve();
+                        }
+                    },
+                });
+            });
+        } catch (e: any) {
+            client.logError("Failed to load user profile", e);
+            onClose();
+        }
+    });
+
+    function afterBlock(result: boolean, success: ResourceKey, failure: ResourceKey) {
+        if (!result) {
+            toastStore.showFailureToast(failure);
+        } else {
+            toastStore.showSuccessToast(success);
+        }
+    }
+
+    function blockUser() {
+        if ($selectedChatSummaryStore !== undefined) {
+            if ($selectedChatSummaryStore.kind === "direct_chat") {
+                client.blockUserFromDirectChat(userId).then((success) => {
+                    afterBlock(success, i18nKey("blockUserSucceeded"), i18nKey("blockUserFailed"));
+                });
+                onClose();
+                return;
+            }
+            if ($selectedChatSummaryStore.kind === "group_chat") {
+                client.blockUser($selectedChatSummaryStore.id, userId).then((success) => {
+                    afterBlock(success, i18nKey("blockUserSucceeded"), i18nKey("blockUserFailed"));
+                });
+                onClose();
+                return;
+            }
+        }
+        if ($selectedCommunitySummaryStore !== undefined) {
+            client
+                .blockCommunityUser($selectedCommunitySummaryStore.id, userId)
+                .then((success) =>
+                    afterBlock(success, i18nKey("blockUserSucceeded"), i18nKey("blockUserFailed")),
+                );
+            onClose();
+            return;
+        }
+    }
+
+    function unblockUser() {
+        if ($selectedChatSummaryStore !== undefined) {
+            if ($selectedChatSummaryStore.kind === "direct_chat") {
+                client.unblockUserFromDirectChat(userId).then((success) => {
+                    afterBlock(
+                        success,
+                        i18nKey("unblockUserSucceeded"),
+                        i18nKey("unblockUserFailed"),
+                    );
+                });
+                onClose();
+                return;
+            }
+            if ($selectedChatSummaryStore.kind === "group_chat") {
+                client.unblockUser($selectedChatSummaryStore.id, userId).then((success) => {
+                    afterBlock(
+                        success,
+                        i18nKey("unblockUserSucceeded"),
+                        i18nKey("unblockUserFailed"),
+                    );
+                });
+                onClose();
+                return;
+            }
+        }
+        if ($selectedCommunitySummaryStore !== undefined) {
+            client
+                .unblockCommunityUser($selectedCommunitySummaryStore.id, userId)
+                .then((success) =>
+                    afterBlock(
+                        success,
+                        i18nKey("unblockUserSucceeded"),
+                        i18nKey("unblockUserFailed"),
+                    ),
+                );
+            onClose();
+            return;
+        }
+    }
+
+    function canBlockUser(
+        chat: ChatSummary | undefined,
+        community: CommunitySummary | undefined,
+        blockedUsers: ReadonlySet<string>,
+        blockedChatUsers: ReadonlySet<string>,
+        blockedCommunityUsers: ReadonlySet<string>,
+    ) {
+        if (me || inGlobalContext) return false;
+
+        if (chat !== undefined) {
+            if (chat.kind === "direct_chat") return !blockedUsers.has(userId);
+            if (chat.kind === "group_chat")
+                return !blockedChatUsers.has(userId) && client.canBlockUsers(chat.id);
+        }
+        if (community !== undefined) {
+            return !blockedCommunityUsers.has(userId) && client.canBlockUsers(community.id);
+        }
+        return false;
+    }
+
+    function canUnblockUser(
+        chat: ChatSummary | undefined,
+        community: CommunitySummary | undefined,
+        blockedUsers: ReadonlySet<string>,
+        blockedChatUsers: ReadonlySet<string>,
+        blockedCommunityUsers: ReadonlySet<string>,
+    ) {
+        if (me || inGlobalContext) return false;
+        if (chat !== undefined) {
+            if (chat.kind === "direct_chat") return blockedUsers.has(userId);
+            if (chat.kind === "group_chat")
+                return blockedChatUsers.has(userId) && client.canBlockUsers(chat.id);
+        }
+        if (community !== undefined) {
+            return blockedCommunityUsers.has(userId) && client.canBlockUsers(community.id);
+        }
+        return false;
+    }
+
+    function handleOpenDirectChat() {
+        onOpenDirectChat();
+    }
+
+    function showUserProfile() {
+        setRightPanelHistory([{ kind: "user_profile" }]);
+        onClose();
+    }
+
+    function onWindowResize() {
+        if (!modal) {
+            onClose();
+        }
+    }
+
+    function unsuspendUser() {
+        client.unsuspendUser(userId).then((success) => {
+            if (success) {
+                toastStore.showSuccessToast(i18nKey("unsuspendedUser"));
+                onClose();
+            } else {
+                toastStore.showFailureToast(i18nKey("failedToUnsuspendUser"));
+            }
+        });
+    }
+
+    function suspendUser() {
+        publish("suspendUser", userId);
+        onClose();
+    }
+    let me = $derived(userId === $currentUserIdStore);
+    let isSuspended = $derived(user?.suspended ?? false);
+    let modal = $derived($mobileWidth);
+    let canBlock = $derived(
+        canBlockUser(
+            $selectedChatSummaryStore,
+            $selectedCommunitySummaryStore,
+            $blockedUsersStore,
+            $selectedChatBlockedUsersStore,
+            $selectedCommunityBlockedUsersStore,
+        ),
+    );
+    let canUnblock = $derived(
+        canUnblockUser(
+            $selectedChatSummaryStore,
+            $selectedCommunitySummaryStore,
+            $blockedUsersStore,
+            $selectedChatBlockedUsersStore,
+            $selectedCommunityBlockedUsersStore,
+        ),
+    );
+</script>
+
+<svelte:window onresize={onWindowResize} />
+
+{#if profile !== undefined}
+    <Overlay dismissible {onClose}>
+        <ModalContent
+            fill
+            {rendering}
+            compactFooter
+            backgroundImage={backgroundUrl}
+            hideFooter={!me && !chatButton && !canBlock && !canUnblock}
+            hideHeader
+            fixedWidth={false}
+            large={modal}
+            footerClass={hasCustomBackground ? "mask-footer" : ""}
+            {alignTo}
+            {onClose}>
+            {#snippet body()}
+                {#if profile !== undefined && user !== undefined}
+                    <UserProfileCard {user} {profile} {inGlobalContext} {onClose}></UserProfileCard>
+                {/if}
+            {/snippet}
+            {#snippet footer()}
+                <div class="footer" class:hasCustomBackground>
+                    <ButtonGroup align={"fill"}>
+                        {#if chatButton && !me}
+                            <Button onClick={handleOpenDirectChat} small
+                                ><Translatable resourceKey={i18nKey("profile.chat")} /></Button>
+                        {/if}
+                        {#if me}
+                            <Button onClick={showUserProfile} small
+                                ><Translatable resourceKey={i18nKey("profile.settings")} /></Button>
+                        {/if}
+                        {#if canBlock}
+                            <Button onClick={blockUser} small
+                                ><Translatable resourceKey={i18nKey("profile.block")} /></Button>
+                        {/if}
+                        {#if canUnblock}
+                            <Button onClick={unblockUser} small
+                                ><Translatable resourceKey={i18nKey("profile.unblock")} /></Button>
+                        {/if}
+                    </ButtonGroup>
+                    {#if $platformModeratorStore}
+                        <div class="suspend">
+                            <ButtonGroup align={"fill"}>
+                                {#if isSuspended}
+                                    <Button onClick={unsuspendUser} small
+                                        ><Translatable
+                                            resourceKey={i18nKey("unsuspendUser")} /></Button>
+                                {:else}
+                                    <Button onClick={suspendUser} small
+                                        ><Translatable
+                                            resourceKey={i18nKey("suspendUser")} /></Button>
+                                {/if}
+                            </ButtonGroup>
+                        </div>
+                    {/if}
+                </div>
+            {/snippet}
+        </ModalContent>
+    </Overlay>
+{/if}
+
+<style lang="scss">
+    .suspend {
+        margin-top: $sp3;
+    }
+
+    :global(.modal-content .footer.mask-footer) {
+        background-color: rgba(0, 0, 0, 0.45);
+
+        @include not-mobile() {
+            border-radius: 0 0 var(--modal-rd) var(--modal-rd);
+        }
+    }
+</style>
diff --git a/frontend/app/src/components/home/profile/WithRole.svelte b/frontend/app/src/desktop/features/profile/WithRole.svelte
similarity index 100%
rename from frontend/app/src/components/home/profile/WithRole.svelte
rename to frontend/app/src/desktop/features/profile/WithRole.svelte
diff --git a/frontend/app/src/desktop/features/proposals/CommunityFinder.svelte b/frontend/app/src/desktop/features/proposals/CommunityFinder.svelte
new file mode 100644
index 0000000000..c9d83c263f
--- /dev/null
+++ b/frontend/app/src/desktop/features/proposals/CommunityFinder.svelte
@@ -0,0 +1,108 @@
+<script lang="ts">
+    import { _ } from "svelte-i18n";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Search from "@src/desktop/shared/Search.svelte";
+    import { communitySearchState } from "@src/stores/search.svelte";
+    import { getContext } from "svelte";
+    import { AvatarSize, OpenChat, type CommunityMatch } from "@client";
+    import SelectedMatch from "./SelectedMatch.svelte";
+    import Avatar from "@src/desktop/shared/Avatar.svelte";
+    import Menu from "@src/desktop/shared/Menu.svelte";
+    import MenuItem from "@src/desktop/shared/MenuItem.svelte";
+
+    const client = getContext<OpenChat>("client");
+    const PAGE_SIZE = 15;
+
+    interface Props {
+        onSelect: (community: CommunityMatch | undefined) => void;
+        selected?: CommunityMatch;
+    }
+
+    let { onSelect, selected }: Props = $props();
+
+    function search(term: string) {
+        if (term === "") {
+            reset(true);
+            return;
+        }
+        communitySearchState.term = term;
+        communitySearchState.reset();
+
+        client
+            .exploreCommunities(
+                communitySearchState.term === "" ? undefined : communitySearchState.term,
+                communitySearchState.index,
+                PAGE_SIZE,
+                0,
+                [],
+            )
+            .then((results) => {
+                if (results.kind === "success") {
+                    communitySearchState.results = results.matches;
+                    communitySearchState.total = results.total;
+                }
+            });
+    }
+
+    function reset(clearSelected: boolean) {
+        communitySearchState.results = [];
+        communitySearchState.term = "";
+        if (clearSelected) {
+            select(undefined);
+        }
+    }
+
+    function select(match: CommunityMatch | undefined) {
+        selected = match;
+        communitySearchState.results = [];
+        onSelect(match);
+    }
+</script>
+
+<div class="finder">
+    {#if selected !== undefined}
+        <SelectedMatch onRemove={() => reset(true)} match={selected}></SelectedMatch>
+    {:else}
+        <Search
+            fill
+            bind:searchTerm={communitySearchState.term}
+            searching={false}
+            onPerformSearch={search}
+            placeholder={i18nKey("communities.search")} />
+    {/if}
+
+    {#if communitySearchState.results.length > 0}
+        <div class="menu">
+            <Menu fit>
+                {#each communitySearchState.results as community (community.id.communityId)}
+                    <MenuItem onclick={() => select(community)}>
+                        {#snippet icon()}
+                            <Avatar
+                                url={client.communityAvatarUrl(
+                                    community.id.communityId,
+                                    community.avatar,
+                                )}
+                                size={AvatarSize.Small} />
+                        {/snippet}
+                        {#snippet text()}
+                            {community.name}
+                        {/snippet}
+                    </MenuItem>
+                {/each}
+            </Menu>
+        </div>
+    {/if}
+</div>
+
+<style lang="scss">
+    .finder {
+        margin-bottom: $sp3;
+    }
+
+    .menu {
+        max-height: 250px;
+        overflow: auto;
+        width: fit-content;
+        margin-top: $sp3;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/proposals/GroupFinder.svelte b/frontend/app/src/desktop/features/proposals/GroupFinder.svelte
new file mode 100644
index 0000000000..d7c765b072
--- /dev/null
+++ b/frontend/app/src/desktop/features/proposals/GroupFinder.svelte
@@ -0,0 +1,100 @@
+<script lang="ts">
+    import { _ } from "svelte-i18n";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Search from "@src/desktop/shared/Search.svelte";
+    import { groupSearchState } from "@src/stores/search.svelte";
+    import { getContext } from "svelte";
+    import { AvatarSize, OpenChat, type GroupMatch } from "@client";
+    import SelectedMatch from "./SelectedMatch.svelte";
+    import Avatar from "@src/desktop/shared/Avatar.svelte";
+    import Menu from "@src/desktop/shared/Menu.svelte";
+    import MenuItem from "@src/desktop/shared/MenuItem.svelte";
+
+    const client = getContext<OpenChat>("client");
+    const PAGE_SIZE = 15;
+
+    interface Props {
+        onSelect: (group: GroupMatch | undefined) => void;
+        selected?: GroupMatch;
+    }
+
+    let { onSelect, selected }: Props = $props();
+
+    function search(term: string) {
+        if (term === "") {
+            reset(true);
+            return;
+        }
+        groupSearchState.term = term;
+        groupSearchState.reset();
+
+        client.searchGroups(groupSearchState.term, PAGE_SIZE).then((results) => {
+            if (results.kind === "success") {
+                groupSearchState.results = results.matches;
+                groupSearchState.total = results.total;
+            }
+        });
+    }
+
+    function reset(clearSelected: boolean) {
+        groupSearchState.results = [];
+        groupSearchState.term = "";
+        if (clearSelected) {
+            select(undefined);
+        }
+    }
+
+    function select(match: GroupMatch | undefined) {
+        selected = match;
+        groupSearchState.results = [];
+        onSelect(match);
+    }
+</script>
+
+<div class="finder">
+    {#if selected !== undefined}
+        <SelectedMatch onRemove={() => reset(true)} match={selected}></SelectedMatch>
+    {:else}
+        <Search
+            fill
+            bind:searchTerm={groupSearchState.term}
+            searching={false}
+            onPerformSearch={search}
+            placeholder={i18nKey("searchGroupsPlaceholder")} />
+    {/if}
+
+    {#if groupSearchState.results.length > 0}
+        <div class="menu">
+            <Menu fit>
+                {#each groupSearchState.results as group (group.chatId.groupId)}
+                    <MenuItem onclick={() => select(group)}>
+                        {#snippet icon()}
+                            <Avatar
+                                url={client.groupAvatarUrl({
+                                    ...group,
+                                    id: group.chatId,
+                                })}
+                                size={AvatarSize.Small} />
+                        {/snippet}
+                        {#snippet text()}
+                            {group.name}
+                        {/snippet}
+                    </MenuItem>
+                {/each}
+            </Menu>
+        </div>
+    {/if}
+</div>
+
+<style lang="scss">
+    .finder {
+        margin-bottom: $sp3;
+    }
+
+    .menu {
+        max-height: 250px;
+        overflow: auto;
+        width: fit-content;
+        margin-top: $sp3;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/proposals/MakeProposalModal.svelte b/frontend/app/src/desktop/features/proposals/MakeProposalModal.svelte
new file mode 100644
index 0000000000..db3ecadee8
--- /dev/null
+++ b/frontend/app/src/desktop/features/proposals/MakeProposalModal.svelte
@@ -0,0 +1,935 @@
+<script lang="ts">
+    import BotPublisher from "@src/desktop/features/bots/BotPublisher.svelte";
+    import {
+        cryptoBalanceStore,
+        currentUserIdStore,
+        currentUserStore,
+        iconSize,
+        mobileWidth,
+        routeForChatIdentifier,
+        type CandidateProposalAction,
+        type MultiUserChat,
+        type NervousSystemDetails,
+        type OpenChat,
+        type ResourceKey,
+    } from "@client";
+    import { isPrincipalValid, isUrl, random32, type ExternalBot } from "@shared";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import EyeIcon from "svelte-material-icons/EyeOutline.svelte";
+    import PencilIcon from "svelte-material-icons/PencilOutline.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { pinNumberErrorMessageStore } from "@src/stores/pinNumber";
+    import {
+        createAddTokenPayload,
+        createPublishExternalBotPayload,
+        createRegisterExternalAchievementPayload,
+        createUpdateTokenPayload,
+    } from "@src/utils/sns";
+    import Button from "@src/ui/Button.svelte";
+    import ErrorMessage from "@src/desktop/shared/ErrorMessage.svelte";
+    import Input from "@src/desktop/shared/Input.svelte";
+    import Legend from "@src/desktop/shared/Legend.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Select from "@src/desktop/shared/Select.svelte";
+    import TextArea from "@src/desktop/shared/TextArea.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import AccountInfo from "@src/desktop/shared/AccountInfo.svelte";
+    import BalanceWithRefresh from "@src/desktop/shared/BalanceWithRefresh.svelte";
+    import DurationPicker from "@src/desktop/shared/DurationPicker.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import RemoveBot from "./RemoveBot.svelte";
+    import TransferSnsFunds from "./TransferSNSFunds.svelte";
+    import VerificationProposal from "./VerificationProposal.svelte";
+
+    const MIN_TITLE_LENGTH = 3;
+    const MAX_TITLE_LENGTH = 120;
+    const MAX_URL_LENGTH = 2000;
+    const MIN_SUMMARY_LENGTH = 3;
+    const MAX_SUMMARY_LENGTH = 10000;
+    const CANISTER_ID_LENGTH = 27;
+    const MIN_ACHIEVEMENT_NAME_LENGTH = 3;
+    const MAX_ACHIEVEMENT_NAME_LENGTH = 45;
+    const MIN_CHIT_REWARD = 5000;
+    const MIN_AWARDS = 200;
+    const CHAT_FEE_PER_CHIT_AWARD: bigint = 20_000n; // 1/5000th of a CHAT
+    const ONE_MONTH = 1000 * 60 * 60 * 24 * 7 * 4;
+    const TOKEN_LISTING_FEE: bigint = 50_000_100_000n; // 500 CHAT + transfer fee
+
+    const PROPOSALS_BOT_CANISTER = import.meta.env.OC_PROPOSALS_BOT_CANISTER!;
+    const REGISTRY_CANISTER = import.meta.env.OC_REGISTRY_CANISTER!;
+    const USER_INDEX_CANISTER = import.meta.env.OC_USER_INDEX_CANISTER!;
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        selectedMultiUserChat: MultiUserChat;
+        nervousSystem: NervousSystemDetails;
+        onClose: () => void;
+    }
+
+    let { selectedMultiUserChat, nervousSystem, onClose }: Props = $props();
+
+    let title = $state("");
+    let url = $state("");
+    let summary = $state("");
+    let achievementExpiry: bigint = $state(BigInt(ONE_MONTH));
+    let achievementExpiryValid = $state(true);
+    let chitRewardText = $state("5000");
+    let maxAwardsText = $state("200");
+    let step = $state(-1);
+    let actualWidth = $state(0);
+    let summaryPreview = $state(false);
+    let busy = $state(true);
+    let selectedProposalType:
+        | "motion"
+        | "publish_bot"
+        | "remove_bot"
+        | "transfer_sns_funds"
+        | "register_external_achievement"
+        | "advance_sns_target_version"
+        | "add_token"
+        | "update_token"
+        | "set_community_verification"
+        | "set_group_verification"
+        | "revoke_community_verification"
+        | "revoke_group_verification"
+        | undefined = $state(undefined);
+    let error: string | undefined = $state(undefined);
+    let depositMessage: ResourceKey | undefined = $state(undefined);
+    let depositError = $state(true);
+    let summaryContainerHeight = $state(0);
+    let summaryHeight = $state(0);
+    let refreshingBalance = $state(false);
+    let balanceWithRefresh: BalanceWithRefresh;
+    let achivementName = $state("");
+    let selectedBot: ExternalBot | undefined = $state(undefined);
+    //@ts-ignore
+    let transferSnsFunds: TransferSnsFunds | undefined = $state();
+    //@ts-ignore
+    let verificationComponent: VerificationProposal | undefined = $state();
+    //@ts-ignore
+    let removeBotComponent: RemoveBot | undefined;
+    let transferSnsFundsValid: boolean = $state(false);
+    let removeBotValid: boolean = $state(false);
+    let verificationValid: boolean = $state(false);
+
+    function summaryDescription(type: typeof selectedProposalType): [ResourceKey, ResourceKey] {
+        switch (type) {
+            case "set_community_verification":
+            case "set_group_verification":
+            case "revoke_community_verification":
+            case "revoke_group_verification":
+                return [i18nKey("verified.evidenceLabel"), i18nKey("verified.evidencePlaceholder")];
+            case "remove_bot":
+                return [
+                    i18nKey("bots.manage.removeReason"),
+                    i18nKey("bots.manage.removeReasonPlaceholder"),
+                ];
+            default:
+                return [i18nKey("proposal.maker.summary"), i18nKey("proposal.maker.enterSummary")];
+        }
+    }
+
+    function defaultMessage(): ResourceKey {
+        const cost = client.formatTokens(requiredFunds, tokenDetails.decimals);
+        return i18nKey("proposal.maker.message", { cost, token: symbol });
+    }
+
+    async function onClickPrimary(): Promise<void> {
+        if (step === 0) {
+            balanceWithRefresh.refresh();
+        } else if (canSubmit) {
+            onSubmit();
+        } else if (step === 1) {
+            step = 2;
+        }
+    }
+
+    async function onSubmit(): Promise<void> {
+        if (!valid) return;
+
+        busy = true;
+
+        const pin = await client.promptForPinIfRequired();
+
+        if (
+            !(await approvePayment(
+                PROPOSALS_BOT_CANISTER,
+                proposalCost + BigInt(2) * transferFee,
+                pin,
+            ))
+        ) {
+            busy = false;
+            return;
+        }
+
+        if (
+            selectedProposalType === "register_external_achievement" ||
+            selectedProposalType === "add_token"
+        ) {
+            const addToken = selectedProposalType === "add_token";
+            let spender = addToken ? REGISTRY_CANISTER : USER_INDEX_CANISTER;
+            let amount = addToken ? TOKEN_LISTING_FEE : achievementChatCost;
+
+            if (!(await approvePayment(spender, amount, pin))) {
+                busy = false;
+                return;
+            }
+        }
+
+        const action = convertAction();
+
+        if (action === undefined) {
+            busy = false;
+            return;
+        }
+
+        client
+            .submitProposal(nervousSystem.governanceCanisterId, {
+                title,
+                url: url === "" ? undefined : url,
+                summary,
+                action,
+            })
+            .then((success) => {
+                busy = false;
+                if (success) {
+                    onClose();
+                } else {
+                    error = "unexpectedError";
+                }
+            });
+    }
+
+    function convertAction(): CandidateProposalAction | undefined {
+        switch (selectedProposalType) {
+            case "motion":
+            case "advance_sns_target_version":
+                return { kind: selectedProposalType };
+            case "transfer_sns_funds": {
+                return transferSnsFunds?.convertAction();
+            }
+            case "remove_bot": {
+                return removeBotComponent?.convertAction();
+            }
+            case "set_community_verification":
+            case "revoke_community_verification":
+            case "set_group_verification":
+            case "revoke_group_verification": {
+                return verificationComponent?.convertAction();
+            }
+            case "add_token": {
+                return {
+                    kind: "execute_generic_nervous_system_function",
+                    functionId: BigInt(7000),
+                    payload: createAddTokenPayload(
+                        addOrUpdateTokenLedgerCanisterId,
+                        $currentUserIdStore,
+                        addOrUpdateTokenInfoUrl,
+                        addOrUpdateTokenTransactionUrlFormat,
+                        undefined,
+                    ),
+                };
+            }
+            case "update_token": {
+                return {
+                    kind: "execute_generic_nervous_system_function",
+                    functionId: BigInt(7001),
+                    payload: createUpdateTokenPayload(
+                        addOrUpdateTokenLedgerCanisterId,
+                        undefined,
+                        undefined,
+                        addOrUpdateTokenInfoUrl,
+                        addOrUpdateTokenTransactionUrlFormat,
+                        undefined,
+                    ),
+                };
+            }
+            case "register_external_achievement": {
+                return {
+                    kind: "execute_generic_nervous_system_function",
+                    functionId: BigInt(1012),
+                    payload: createRegisterExternalAchievementPayload(
+                        random32(),
+                        $currentUserIdStore,
+                        achivementName,
+                        achievementUrl,
+                        logo,
+                        awardingAchievementCanisterId,
+                        chitReward,
+                        BigInt(Date.now()) + achievementExpiry,
+                        maxAwards,
+                    ),
+                };
+            }
+            case "publish_bot": {
+                if (selectedBot === undefined) {
+                    throw new Error("No bot has been selected - this should not happen");
+                }
+                return {
+                    kind: "execute_generic_nervous_system_function",
+                    functionId: BigInt(1015),
+                    payload: createPublishExternalBotPayload(selectedBot),
+                };
+            }
+        }
+    }
+
+    async function approvePayment(
+        spender_canister_id: string,
+        amount: bigint,
+        pin: string | undefined,
+    ): Promise<boolean> {
+        return client
+            .approveTransfer(
+                spender_canister_id,
+                tokenDetails.ledger,
+                amount,
+                BigInt(Date.now() + 1000 * 60 * 60 * 24 * 5), // allow 5 days for proposal
+                pin,
+            )
+            .then((resp) => {
+                if (resp.kind === "success") {
+                    return true;
+                } else if ($pinNumberErrorMessageStore === undefined) {
+                    error = "approvalError";
+                }
+
+                return false;
+            })
+            .catch(() => {
+                return false;
+            });
+    }
+
+    function onStartRefreshingBalance() {
+        refreshingBalance = true;
+    }
+
+    function onRefreshingBalanceSuccess() {
+        if (step === -1) {
+            step = insufficientFunds ? 0 : 1;
+            busy = false;
+            if (!insufficientFunds) {
+                depositError = false;
+            }
+        } else if (step === 0 && !insufficientFunds) {
+            step = 1;
+            depositError = false;
+        }
+
+        refreshingBalance = false;
+    }
+
+    function onRefreshingBalanceFailed() {
+        depositMessage = i18nKey("Failed to refresh balance");
+        depositError = true;
+        refreshingBalance = false;
+    }
+
+    function wrappedSummary(summary: string) {
+        const groupPath = routeForChatIdentifier(
+            selectedMultiUserChat.kind === "group_chat" ? "chats" : "community",
+            selectedMultiUserChat.id,
+        );
+
+        return `${summary}
+
+> Submitted by [@${$currentUserStore.username}](https://oc.app/user/${$currentUserIdStore}) on [OpenChat](https://oc.app${groupPath})`;
+    }
+
+    function isLogoValid(logo: string): boolean {
+        return logo.length === 0 || isUrl(logo);
+    }
+    let errorMessage = $derived(
+        error !== undefined ? i18nKey("proposal.maker." + error) : $pinNumberErrorMessageStore,
+    );
+    let tokenDetails = $derived(nervousSystem.token);
+    let ledger = $derived(tokenDetails.ledger);
+    let cryptoBalance = $derived($cryptoBalanceStore.get(ledger) ?? BigInt(0));
+    let symbol = $derived(tokenDetails.symbol);
+    let transferFee = $derived(tokenDetails.transferFee);
+    let proposalCost = $derived(nervousSystem.proposalRejectionFee);
+    let requiredFunds = $derived(proposalCost + BigInt(3) * transferFee);
+    let chitReward = $derived(Number(chitRewardText));
+    let chitRewardValid = $derived(chitReward >= MIN_CHIT_REWARD);
+    let maxAwards = $derived(Number(maxAwardsText));
+    let achievementChatCost = $derived(
+        BigInt(chitReward * maxAwards) * CHAT_FEE_PER_CHIT_AWARD + tokenDetails.transferFee,
+    );
+    let insufficientFunds = $derived(cryptoBalance < requiredFunds);
+    let insufficientFundsForPayment = $derived(
+        cryptoBalance <
+            requiredFunds +
+                (selectedProposalType === "register_external_achievement"
+                    ? achievementChatCost
+                    : selectedProposalType === "add_token"
+                      ? TOKEN_LISTING_FEE
+                      : BigInt(0)),
+    );
+    let titleValid = $derived(title.length >= MIN_TITLE_LENGTH && title.length <= MAX_TITLE_LENGTH);
+    let urlValid = $derived(url.length <= MAX_URL_LENGTH);
+    let summaryValid = $derived(
+        summary.length >= MIN_SUMMARY_LENGTH && summary.length <= MAX_SUMMARY_LENGTH,
+    );
+    let maxAwardsValid = $derived(maxAwards >= MIN_AWARDS);
+    let achievementNameValid = $derived(
+        achivementName.length >= MIN_ACHIEVEMENT_NAME_LENGTH &&
+            achivementName.length <= MAX_ACHIEVEMENT_NAME_LENGTH,
+    );
+    let addOrUpdateTokenLedgerCanisterId = $state("");
+
+    let addOrUpdateTokenInfoUrl = $state("");
+
+    let addOrUpdateTokenTransactionUrlFormat = $state("");
+
+    let logo = $state("");
+
+    let achievementUrl = $state("");
+
+    let awardingAchievementCanisterId = $state("");
+
+    let valid = $derived(
+        selectedProposalType !== undefined &&
+            !insufficientFunds &&
+            !insufficientFundsForPayment &&
+            titleValid &&
+            urlValid &&
+            summaryValid &&
+            (selectedProposalType === "motion" ||
+                selectedProposalType === "advance_sns_target_version" ||
+                (selectedProposalType === "publish_bot" && selectedBot !== undefined) ||
+                (selectedProposalType === "remove_bot" && removeBotValid) ||
+                (selectedProposalType === "transfer_sns_funds" && transferSnsFundsValid) ||
+                (selectedProposalType === "set_community_verification" && verificationValid) ||
+                (selectedProposalType === "set_group_verification" && verificationValid) ||
+                (selectedProposalType === "register_external_achievement" &&
+                    achievementNameValid &&
+                    chitRewardValid &&
+                    maxAwardsValid &&
+                    achievementExpiryValid &&
+                    isLogoValid(logo) &&
+                    achievementUrl.length > 0 &&
+                    awardingAchievementCanisterId.length > 0 &&
+                    isPrincipalValid(awardingAchievementCanisterId)) ||
+                (selectedProposalType === "add_token" &&
+                    isPrincipalValid(addOrUpdateTokenLedgerCanisterId) &&
+                    addOrUpdateTokenTransactionUrlFormat.length > 0) ||
+                (selectedProposalType === "update_token" &&
+                    isPrincipalValid(addOrUpdateTokenLedgerCanisterId) &&
+                    addOrUpdateTokenTransactionUrlFormat.length > 0)),
+    );
+    let canSubmit = $derived(
+        step === 2 ||
+            (step === 1 &&
+                (selectedProposalType === "motion" ||
+                    selectedProposalType === "advance_sns_target_version")),
+    );
+    $effect(() => {
+        if (tokenDetails !== undefined) {
+            depositMessage = defaultMessage();
+        }
+    });
+    let [summaryLabel, summaryPlaceholder] = $derived(summaryDescription(selectedProposalType));
+</script>
+
+<ModalContent bind:actualWidth fill>
+    {#snippet header()}
+        <div class="header">
+            {$_("proposal.maker.header")}
+            <BalanceWithRefresh
+                bind:this={balanceWithRefresh}
+                {ledger}
+                value={cryptoBalance}
+                label={i18nKey("cryptoAccount.shortBalanceLabel")}
+                bold
+                onClick={onStartRefreshingBalance}
+                onRefreshed={onRefreshingBalanceSuccess}
+                onError={onRefreshingBalanceFailed} />
+        </div>
+    {/snippet}
+    {#snippet body()}
+        <div class="body">
+            <div class="sections">
+                <div class="topup hidden" class:visible={step === 0}>
+                    <AccountInfo {ledger} />
+                    <p><Translatable resourceKey={i18nKey("tokenTransfer.makeDeposit")} /></p>
+                </div>
+                <div class="common hidden" class:visible={step === 1}>
+                    <section class="type">
+                        <Legend label={i18nKey("proposal.maker.type")} required />
+                        <Select bind:value={selectedProposalType} margin={false}>
+                            <option value={undefined} disabled selected
+                                ><Translatable
+                                    resourceKey={i18nKey("proposal.maker.selectType")} /></option>
+                            <option value={"motion"}>Motion</option>
+                            <option value={"transfer_sns_funds"}>Transfer SNS funds</option>
+                            <option value={"advance_sns_target_version"}
+                                >Advance SNS target version</option>
+                            {#if symbol === "CHAT"}
+                                <option value={"register_external_achievement"}
+                                    >Register external achievement</option>
+                                <option value={"add_token"}>Add token</option>
+                                <option value={"update_token"}>Update token</option>
+                                <option value={"publish_bot"}>Publish a bot</option>
+                                <option value={"remove_bot"}>
+                                    <Translatable resourceKey={i18nKey("bots.manage.remove")}
+                                    ></Translatable>
+                                </option>
+                                <option value={"set_community_verification"}>
+                                    <Translatable
+                                        resourceKey={i18nKey(
+                                            "verified.verify",
+                                            undefined,
+                                            "community",
+                                            true,
+                                        )}></Translatable>
+                                </option>
+                                <option value={"set_group_verification"}>
+                                    <Translatable
+                                        resourceKey={i18nKey(
+                                            "verified.verify",
+                                            undefined,
+                                            "group",
+                                            true,
+                                        )}></Translatable>
+                                </option>
+                                <option value={"revoke_community_verification"}>
+                                    <Translatable
+                                        resourceKey={i18nKey(
+                                            "verified.revoke",
+                                            undefined,
+                                            "community",
+                                            true,
+                                        )}></Translatable>
+                                </option>
+                                <option value={"revoke_group_verification"}>
+                                    <Translatable
+                                        resourceKey={i18nKey(
+                                            "verified.revoke",
+                                            undefined,
+                                            "group",
+                                            true,
+                                        )}></Translatable>
+                                </option>
+                            {/if}
+                        </Select>
+                    </section>
+                    <section>
+                        <Legend label={i18nKey("proposal.maker.title")} required />
+                        <Input
+                            autofocus
+                            disabled={busy}
+                            invalid={title.length > 0 && !titleValid}
+                            bind:value={title}
+                            minlength={MIN_TITLE_LENGTH}
+                            maxlength={MAX_TITLE_LENGTH}
+                            countdown
+                            placeholder={i18nKey("proposal.maker.enterTitle")} />
+                    </section>
+                    <section>
+                        <Legend
+                            label={i18nKey("proposal.maker.url")}
+                            rules={i18nKey("proposal.maker.urlRules")} />
+                        <Input
+                            disabled={busy}
+                            invalid={!urlValid}
+                            bind:value={url}
+                            maxlength={MAX_URL_LENGTH}
+                            countdown
+                            placeholder={i18nKey("proposal.maker.enterUrl")} />
+                    </section>
+                    <section>
+                        <div class="summary-heading">
+                            <Legend
+                                required
+                                label={summaryLabel}
+                                rules={i18nKey("proposal.maker.summaryRules")} />
+                            <div
+                                role="switch"
+                                tabindex="1"
+                                class="preview"
+                                onclick={() => (summaryPreview = !summaryPreview)}>
+                                <span class="text"
+                                    ><Translatable
+                                        resourceKey={i18nKey(
+                                            summaryPreview ? "edit" : "preview",
+                                        )} /></span>
+                                <span class="icon">
+                                    {#if summaryPreview}
+                                        <PencilIcon size={$iconSize} viewBox="0 -3 24 24" />
+                                    {:else}
+                                        <EyeIcon size={$iconSize} viewBox="0 -3 24 24" />
+                                    {/if}
+                                </span>
+                            </div>
+                        </div>
+                        <div style={`height: ${summaryContainerHeight}px`}>
+                            {#if summaryPreview}
+                                <div class="markdown" style={`height: ${summaryHeight}px`}>
+                                    <Markdown inline={false} text={wrappedSummary(summary)} />
+                                </div>
+                            {:else}
+                                <TextArea
+                                    rows={8}
+                                    bind:outerHeight={summaryContainerHeight}
+                                    bind:innerHeight={summaryHeight}
+                                    disabled={busy}
+                                    invalid={summary.length > 0 && !summaryValid}
+                                    bind:value={summary}
+                                    margin={false}
+                                    scroll
+                                    minlength={MIN_SUMMARY_LENGTH}
+                                    maxlength={MAX_SUMMARY_LENGTH}
+                                    placeholder={summaryPlaceholder} />
+                            {/if}
+                        </div>
+                    </section>
+                </div>
+                <div class="action hidden" class:visible={step === 2}>
+                    {#if selectedProposalType === "set_community_verification" || selectedProposalType === "revoke_community_verification" || selectedProposalType === "set_group_verification" || selectedProposalType === "revoke_group_verification"}
+                        <VerificationProposal
+                            bind:this={verificationComponent}
+                            bind:valid={verificationValid}
+                            type={selectedProposalType} />
+                    {:else if selectedProposalType === "publish_bot"}
+                        <BotPublisher bind:selected={selectedBot}></BotPublisher>
+                    {:else if selectedProposalType === "remove_bot"}
+                        <RemoveBot bind:valid={removeBotValid}></RemoveBot>
+                    {:else if selectedProposalType === "transfer_sns_funds"}
+                        <TransferSnsFunds
+                            bind:valid={transferSnsFundsValid}
+                            bind:this={transferSnsFunds}
+                            {nervousSystem} />
+                    {:else if selectedProposalType === "register_external_achievement"}
+                        <div>
+                            <section>
+                                <Legend
+                                    label={i18nKey("proposal.maker.achievementName")}
+                                    required />
+                                <Input
+                                    autofocus
+                                    disabled={busy}
+                                    invalid={achivementName.length > 0 && !achievementNameValid}
+                                    bind:value={achivementName}
+                                    minlength={MIN_ACHIEVEMENT_NAME_LENGTH}
+                                    maxlength={MAX_ACHIEVEMENT_NAME_LENGTH}
+                                    countdown
+                                    placeholder={i18nKey("proposal.maker.enterAchievementName")} />
+                            </section>
+                            <section>
+                                <Legend label={i18nKey("proposal.maker.achievementUrl")} required />
+                                <Input
+                                    disabled={busy}
+                                    minlength={1}
+                                    maxlength={100}
+                                    bind:value={achievementUrl}
+                                    countdown
+                                    placeholder={i18nKey("https://myapp.xyz/register")} />
+                            </section>
+                            <section>
+                                <Legend label={i18nKey("proposal.maker.achievementLogo")} />
+                                <Input
+                                    disabled={busy}
+                                    invalid={!isLogoValid(logo)}
+                                    minlength={0}
+                                    maxlength={50000}
+                                    bind:value={logo}
+                                    countdown
+                                    placeholder={i18nKey(
+                                        "data:image/svg+xml;base64,PHN2ZyB3aW...",
+                                    )} />
+                            </section>
+                            <section>
+                                <Legend
+                                    label={i18nKey("proposal.maker.awardingAchievementCanisterId")}
+                                    rules={i18nKey(
+                                        "proposal.maker.awardingAchievementCanisterIdRules",
+                                    )}
+                                    required />
+                                <Input
+                                    autofocus
+                                    disabled={busy}
+                                    invalid={awardingAchievementCanisterId.length > 0 &&
+                                        !isPrincipalValid(awardingAchievementCanisterId)}
+                                    bind:value={awardingAchievementCanisterId}
+                                    minlength={CANISTER_ID_LENGTH}
+                                    maxlength={CANISTER_ID_LENGTH}
+                                    countdown
+                                    placeholder={i18nKey("2ouva-viaaa-aaaaq-aaamq-cai")} />
+                            </section>
+                            <section>
+                                <Legend
+                                    label={i18nKey("proposal.maker.chitReward")}
+                                    rules={i18nKey("proposal.maker.chitRewardRules", {
+                                        value: MIN_CHIT_REWARD,
+                                    })}
+                                    required />
+                                <Input
+                                    disabled={busy}
+                                    invalid={chitRewardText.length > 0 && !chitRewardValid}
+                                    minlength={4}
+                                    maxlength={5}
+                                    bind:value={chitRewardText}
+                                    placeholder={i18nKey("proposal.maker.enterChitReward")} />
+                            </section>
+                            <section>
+                                <Legend
+                                    label={i18nKey("proposal.maker.maxAwards")}
+                                    rules={i18nKey("proposal.maker.maxAwardsRules", {
+                                        value: MIN_AWARDS,
+                                    })}
+                                    required />
+                                <Input
+                                    disabled={busy}
+                                    invalid={maxAwardsText.length > 0 && !maxAwardsValid}
+                                    minlength={3}
+                                    maxlength={8}
+                                    bind:value={maxAwardsText}
+                                    placeholder={i18nKey("proposal.maker.enterMaxAwards")} />
+                            </section>
+                            <section>
+                                <Legend
+                                    label={i18nKey("proposal.maker.achievementExpiry")}
+                                    required />
+
+                                <DurationPicker
+                                    bind:valid={achievementExpiryValid}
+                                    bind:milliseconds={achievementExpiry}
+                                    unitFilter={(u) => !["minutes", "hours"].includes(u)} />
+                            </section>
+                        </div>
+                    {:else if selectedProposalType === "add_token" || selectedProposalType === "update_token"}
+                        <div>
+                            <section>
+                                <Legend
+                                    label={i18nKey("proposal.maker.ledgerCanisterId")}
+                                    required />
+                                <Input
+                                    autofocus
+                                    disabled={busy}
+                                    invalid={addOrUpdateTokenLedgerCanisterId.length > 0 &&
+                                        !isPrincipalValid(addOrUpdateTokenLedgerCanisterId)}
+                                    bind:value={addOrUpdateTokenLedgerCanisterId}
+                                    minlength={CANISTER_ID_LENGTH}
+                                    maxlength={CANISTER_ID_LENGTH}
+                                    countdown
+                                    placeholder={i18nKey("2ouva-viaaa-aaaaq-aaamq-cai")} />
+                            </section>
+                            <section>
+                                <Legend
+                                    label={i18nKey("proposal.maker.tokenInfoUrl")}
+                                    required={selectedProposalType === "add_token"} />
+                                <Input
+                                    disabled={busy}
+                                    minlength={1}
+                                    maxlength={100}
+                                    bind:value={addOrUpdateTokenInfoUrl}
+                                    countdown
+                                    placeholder={i18nKey("https://token.com/info")} />
+                            </section>
+                            <section>
+                                <Legend
+                                    label={i18nKey("proposal.maker.transactionUrlFormat")}
+                                    required={selectedProposalType === "add_token"} />
+                                <Input
+                                    disabled={busy}
+                                    minlength={1}
+                                    maxlength={200}
+                                    bind:value={addOrUpdateTokenTransactionUrlFormat}
+                                    countdown
+                                    placeholder={i18nKey(
+                                        `https://token.com/transactions/{transaction_index}`,
+                                    )} />
+                            </section>
+                        </div>
+                    {/if}
+                </div>
+            </div>
+        </div>
+    {/snippet}
+    {#snippet footer()}
+        <span class="footer">
+            {#if (selectedProposalType === "register_external_achievement" || selectedProposalType === "add_token") && step === 2}
+                <p class="message" class:error={insufficientFundsForPayment}>
+                    <Translatable
+                        resourceKey={i18nKey(
+                            "proposal.maker." +
+                                (selectedProposalType === "add_token"
+                                    ? "addTokenChatCost"
+                                    : "achievementChatCost"),
+                            {
+                                cost: client.formatTokens(
+                                    selectedProposalType === "add_token"
+                                        ? TOKEN_LISTING_FEE
+                                        : achievementChatCost,
+                                    8,
+                                ),
+                                chat: "CHAT",
+                            },
+                        )} />
+                </p>
+            {/if}
+            {#if depositMessage !== undefined}
+                <p class="message" class:error={depositError}>
+                    <Translatable resourceKey={depositMessage} />
+                </p>
+            {/if}
+            {#if errorMessage !== undefined}
+                <div class="error">
+                    <ErrorMessage><Translatable resourceKey={errorMessage} /></ErrorMessage>
+                </div>
+            {/if}
+            <div class="group-buttons">
+                <div class="back">
+                    {#if step > 1 || (step == 1 && insufficientFunds)}
+                        <Button
+                            disabled={busy}
+                            small={!$mobileWidth}
+                            tiny={$mobileWidth}
+                            onClick={() => (step = step - 1)}
+                            ><Translatable resourceKey={i18nKey("group.back")} /></Button>
+                    {/if}
+                </div>
+                <div class="actions">
+                    <Button
+                        disabled={busy}
+                        small={!$mobileWidth}
+                        tiny={$mobileWidth}
+                        onClick={onClose}
+                        secondary>{$_("cancel")}</Button>
+
+                    <Button
+                        disabled={busy ||
+                            (canSubmit && !valid) ||
+                            selectedProposalType === undefined}
+                        loading={busy || refreshingBalance}
+                        small={!$mobileWidth}
+                        tiny={$mobileWidth}
+                        onClick={onClickPrimary}
+                        ><Translatable
+                            resourceKey={i18nKey(
+                                step === 0 ? "refresh" : canSubmit ? "submit" : "group.next",
+                            )} /></Button>
+                </div>
+            </div>
+        </span>
+    {/snippet}
+</ModalContent>
+
+<style lang="scss">
+    :global(.group-buttons button:not(.loading)) {
+        @include mobile() {
+            min-width: 0 !important;
+        }
+    }
+
+    :global(.group-buttons .actions button) {
+        height: auto;
+    }
+
+    .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: $sp2;
+    }
+
+    .footer {
+        text-align: left;
+    }
+
+    .group-buttons {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        gap: $sp3;
+
+        .back {
+            display: flex;
+        }
+
+        .actions {
+            display: flex;
+            justify-content: flex-end;
+            gap: $sp3;
+        }
+    }
+
+    .body {
+        width: 100%;
+        padding: $sp3 $sp5 $sp2 $sp5;
+
+        @include mobile() {
+            padding: $sp3 $sp4 $sp2 $sp4;
+        }
+
+        overflow: hidden;
+        position: relative;
+    }
+
+    .sections {
+        display: flex;
+        position: relative;
+        gap: $sp5;
+        @include mobile() {
+            gap: $sp4;
+        }
+    }
+
+    section.type {
+        margin-bottom: $sp3;
+    }
+
+    .topup,
+    .common,
+    .action {
+        flex: 0 0 100%;
+        gap: $sp2;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .hidden {
+        display: none;
+        &.visible {
+            display: flex;
+        }
+    }
+
+    .summary-heading {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .preview {
+        cursor: pointer;
+        color: var(--txt-light);
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 6px;
+
+        .text {
+            text-transform: lowercase;
+            text-decoration: underline;
+            @include font(light, normal, fs-60);
+        }
+    }
+
+    .markdown {
+        margin-bottom: $sp2;
+        @include input(normal);
+        @include nice-scrollbar();
+    }
+
+    .message {
+        margin-bottom: $sp4;
+        color: var(--txt-light);
+        &.error {
+            color: var(--error);
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/proposals/ProposalContent.svelte b/frontend/app/src/desktop/features/proposals/ProposalContent.svelte
new file mode 100644
index 0000000000..d967d8b018
--- /dev/null
+++ b/frontend/app/src/desktop/features/proposals/ProposalContent.svelte
@@ -0,0 +1,446 @@
+<script lang="ts">
+    import {
+        type ChatIdentifier,
+        type OpenChat,
+        type ProposalContent,
+        ProposalDecisionStatus,
+        type RegisterProposalVoteResponse,
+        currentUserIdStore,
+        proposalTopicsStore,
+    } from "@client";
+    import { ErrorCode, type ReadonlyMap } from "@shared";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import ExpandIcon from "svelte-material-icons/ArrowExpandDown.svelte";
+    import ChevronDown from "svelte-material-icons/ChevronDown.svelte";
+    import Launch from "svelte-material-icons/Launch.svelte";
+    import OpenInNew from "svelte-material-icons/OpenInNew.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { NamedNeurons } from "@src/stores/namedNeurons";
+    import { proposalVotes } from "@src/stores/proposalVotes";
+    import { rtlStore } from "@src/stores/rtl";
+    import { now } from "@src/stores/time";
+    import { toastStore } from "@src/stores/toast";
+    import { round2 } from "@src/utils/math";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import ProposalProgressLayout from "./ProposalProgressLayout.svelte";
+    import ProposalVoteButton from "./ProposalVoteButton.svelte";
+    import ProposalVotingProgress from "./ProposalVotingProgress.svelte";
+
+    interface Props {
+        content: ProposalContent;
+        chatId: ChatIdentifier;
+        messageIndex: number;
+        messageId: bigint;
+        collapsed: boolean;
+        readonly: boolean;
+        reply: boolean;
+        onExpandMessage?: () => void;
+    }
+
+    let {
+        content,
+        chatId,
+        messageIndex,
+        messageId,
+        collapsed,
+        readonly,
+        reply,
+        onExpandMessage,
+    }: Props = $props();
+
+    const client = getContext<OpenChat>("client");
+    const EMPTY_MOTION_PAYLOAD = "# Motion Proposal:\n## Motion Text:\n\n";
+
+    const dashboardUrl = "https://dashboard.internetcomputer.org";
+
+    let summaryExpanded = $state(false);
+    let showNeuronInfo = $state(false);
+    let showPayload = $state(false);
+
+    function toggleSummary() {
+        if (!showFullSummary) {
+            summaryExpanded = !summaryExpanded;
+        }
+    }
+
+    function onVote(adopt: boolean) {
+        if (votingDisabled || (chatId.kind !== "group_chat" && chatId.kind !== "channel")) {
+            return;
+        }
+
+        const mId = messageId;
+        proposalVotes.insert(mId, adopt ? "adopting" : "rejecting");
+
+        let success = false;
+        client
+            .registerProposalVote(chatId, messageIndex, adopt)
+            .then((resp) => {
+                if (resp.kind === "success") {
+                    success = true;
+                    proposalVotes.insert(mId, adopt ? "adopted" : "rejected");
+                    client.getProposalVoteDetails(messageId, content.governanceCanisterId, proposal.id, isNns);
+                } else if (resp.kind === "error" && resp.code === ErrorCode.NoEligibleNeurons) {
+                    showNeuronInfo = true;
+                } else {
+                    const err = registerProposalVoteErrorMessage(resp);
+                    if (err) toastStore.showFailureToast(i18nKey("proposal." + err));
+                }
+            })
+            .catch((err) => {
+                client.logError("Unable to vote on proposal", err);
+                toastStore.showFailureToast(i18nKey("proposal.voteFailed"));
+            })
+            .finally(() => {
+                if (!success) {
+                    proposalVotes.delete(mId);
+                }
+            });
+    }
+
+    function registerProposalVoteErrorMessage(
+        resp: RegisterProposalVoteResponse,
+    ): string | undefined {
+        if (resp.kind === "error" && resp.code === ErrorCode.NoChange) return "alreadyVoted";
+        if (resp.kind === "error" && resp.code === ErrorCode.ProposalNotAcceptingVotes)
+            return "proposalNotAcceptingVotes";
+        return "voteFailed";
+    }
+
+    function onClick() {
+        if (collapsed) {
+            onExpandMessage?.();
+        }
+    }
+
+    function renderNeuronId(neuronId: string): string {
+        const name = NamedNeurons[neuronId];
+        if (name !== undefined) {
+            return name;
+        }
+
+        const length = neuronId.length;
+        if (length < 12) {
+            return neuronId;
+        }
+
+        return `${neuronId.slice(0, 4)}..${neuronId.slice(length - 4, length)}`;
+    }
+
+    export function getProposalTopicLabel(
+        content: ProposalContent,
+        proposalTopics: ReadonlyMap<number, string>,
+    ): string {
+        return (
+            proposalTopics.get(
+                content.proposal.kind === "nns" ? content.proposal.topic : content.proposal.action,
+            ) ?? "unknown"
+        );
+    }
+    let rootCanister = $derived(
+        client.tryGetNervousSystem(content.governanceCanisterId)?.rootCanisterId ?? "",
+    );
+    let isNns = $derived(content.proposal.kind === "nns");
+    let voteStatus = $derived(
+        $proposalVotes.get(messageId) ??
+            (content.myVote !== undefined ? (content.myVote ? "adopted" : "rejected") : undefined),
+    );
+    let proposal = $derived(content.proposal);
+    let positive = $derived(
+        proposal.status == ProposalDecisionStatus.Adopted ||
+            proposal.status == ProposalDecisionStatus.Executed,
+    );
+    let negative = $derived(
+        proposal.status == ProposalDecisionStatus.Failed ||
+            proposal.status == ProposalDecisionStatus.Rejected ||
+            proposal.status == ProposalDecisionStatus.Unspecified,
+    );
+    let proposalUrl = $derived(
+        isNns
+            ? `${dashboardUrl}/proposal/${proposal.id}`
+            : `${dashboardUrl}/sns/${rootCanister}/proposal/${proposal.id}`,
+    );
+    let proposerUrl = $derived(
+        isNns
+            ? `${dashboardUrl}/neuron/${proposal.proposer}`
+            : `${dashboardUrl}/sns/${rootCanister}/neuron/${proposal.proposer}`,
+    );
+    let adoptPercent = $derived(round2((100 * proposal.tally.yes) / proposal.tally.total));
+    let rejectPercent = $derived(round2((100 * proposal.tally.no) / proposal.tally.total));
+    let votingEnded = $derived(proposal.deadline <= $now);
+    let disable = $derived(readonly || reply || votingEnded);
+    let votingDisabled = $derived(voteStatus !== undefined || disable);
+    let typeValue = $derived(getProposalTopicLabel(content, $proposalTopicsStore));
+    let showFullSummary = $derived(proposal.summary.length < 400);
+    let payload = $derived(content.proposal.payloadTextRendering);
+    let payloadEmpty = $derived(
+        payload === undefined || payload === EMPTY_MOTION_PAYLOAD || payload.length === 0,
+    );
+    $effect(() => {
+        if (collapsed) {
+            summaryExpanded = false;
+        }
+    });
+</script>
+
+{#if collapsed}
+    <div onclick={onClick}>
+        <em>{proposal.title}</em>
+        <ExpandIcon viewBox="0 -3 24 24" />
+    </div>
+{:else}
+    <div class="wrapper">
+        <div class="header">
+            <div class="title-block">
+                <div class="title">
+                    {#if proposal.url.length > 0}
+                        <a href={proposal.url} rel="noreferrer" target="_blank"
+                            >{proposal.title} <Launch viewBox="0 -1 24 24" /></a>
+                    {:else}
+                        {proposal.title}
+                    {/if}
+                </div>
+                <div class="status" class:positive class:negative>
+                    {ProposalDecisionStatus[proposal.status]}
+                </div>
+            </div>
+        </div>
+
+        {#if proposal.summary.length > 0}
+            <div class="summary" class:expanded={summaryExpanded} class:full={showFullSummary}>
+                <Markdown text={proposal.summary} inline={false} />
+            </div>
+        {/if}
+        <div class="actions">
+            {#if !showFullSummary}
+                <div class="expand" onclick={toggleSummary}>
+                    <div class="label">
+                        <Translatable
+                            resourceKey={summaryExpanded
+                                ? i18nKey("proposal.readless")
+                                : i18nKey("proposal.readmore")} />
+                    </div>
+                    <div class="icon" class:open={summaryExpanded}>
+                        <ChevronDown viewBox="0 -3 24 24" size="1.6em" color="var(--icon-txt)" />
+                    </div>
+                </div>
+            {/if}
+            {#if !payloadEmpty}
+                <div onclick={() => (showPayload = true)} class="payload">
+                    <span><Translatable resourceKey={i18nKey("proposal.details")} /></span>
+                    <OpenInNew color="var(--icon-txt)" />
+                </div>
+            {/if}
+        </div>
+
+        <ProposalProgressLayout>
+            {#snippet adopt()}
+                <div class="adopt">
+                    <ProposalVoteButton
+                        voting={voteStatus === "adopting"}
+                        voted={voteStatus === "adopted"}
+                        disabled={votingDisabled}
+                        mode={"yes"}
+                        onClick={() => onVote(true)}
+                        percentage={adoptPercent} />
+                </div>
+            {/snippet}
+
+            {#snippet progress()}
+                <div class="progress">
+                    <ProposalVotingProgress
+                        deadline={proposal.deadline}
+                        {votingEnded}
+                        {adoptPercent}
+                        {rejectPercent}
+                        minYesPercentageOfTotal={proposal.minYesPercentageOfTotal}
+                        minYesPercentageOfExercised={proposal.minYesPercentageOfExercised} />
+                </div>
+            {/snippet}
+
+            {#snippet reject()}
+                <div class="reject">
+                    <ProposalVoteButton
+                        voting={voteStatus === "rejecting"}
+                        voted={voteStatus === "rejected"}
+                        disabled={votingDisabled}
+                        mode={"no"}
+                        onClick={() => onVote(false)}
+                        percentage={rejectPercent} />
+                </div>
+            {/snippet}
+        </ProposalProgressLayout>
+    </div>
+    <div class="more" class:rtl={$rtlStore}>
+        <a href={proposalUrl} rel="noreferrer" target="_blank">{proposal.id}</a>
+        <div class="subtitle">
+            {typeValue} |
+            <Translatable resourceKey={i18nKey("proposal.proposedBy")} />
+            <a target="_blank" rel="noreferrer" href={proposerUrl}
+                >{renderNeuronId(proposal.proposer)}</a>
+        </div>
+    </div>
+{/if}
+
+{#if showNeuronInfo}
+    <Overlay dismissible onClose={() => (showNeuronInfo = false)}>
+        <ModalContent compactFooter onClose={() => (showNeuronInfo = false)}>
+            {#snippet header()}
+                <Translatable resourceKey={i18nKey("proposal.noEligibleNeurons")} />
+            {/snippet}
+            {#snippet body()}
+                <Markdown
+                    text={$_("proposal.noEligibleNeuronsMessage", {
+                        values: { userId: $currentUserIdStore },
+                    })} />
+            {/snippet}
+        </ModalContent>
+    </Overlay>
+{/if}
+
+{#if showPayload && !payloadEmpty}
+    <Overlay dismissible onClose={() => (showPayload = false)}>
+        <ModalContent compactFooter onClose={() => (showPayload = false)}>
+            {#snippet header()}
+                <div><Translatable resourceKey={i18nKey("proposal.details")} /></div>
+            {/snippet}
+            {#snippet body()}
+                <div class="payload-body">
+                    <Markdown text={payload ?? ""} inline={false} />
+                </div>
+            {/snippet}
+        </ModalContent>
+    </Overlay>
+{/if}
+
+<style lang="scss">
+    .header {
+        margin-bottom: toRem(4);
+
+        .title-block {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            margin-bottom: $sp4;
+            gap: $sp3;
+            .title {
+                @include font(bold, normal, fs-120, 22);
+                word-break: break-all;
+
+                a {
+                    display: flex;
+                    gap: $sp2;
+                    align-items: center;
+                    width: fit-content;
+                }
+            }
+            .status {
+                border-radius: var(--rd);
+                padding: toRem(1) toRem(6);
+                height: fit-content;
+                color: white;
+                background-color: var(--vote-maybe-color);
+
+                &.positive {
+                    background-color: var(--vote-yes-color);
+                }
+
+                &.negative {
+                    background-color: var(--vote-no-color);
+                }
+            }
+        }
+    }
+
+    .summary {
+        transition: none;
+        max-height: toRem(72);
+        @include nice-scrollbar();
+        overflow-y: auto;
+        cursor: pointer;
+        position: relative;
+        overflow-x: hidden;
+        color: "inherit";
+        background-color: rgba(0, 0, 0, 0.05);
+        padding: $sp3;
+
+        &.expanded {
+            transition: max-height ease-in 200ms;
+            max-height: toRem(360);
+        }
+
+        &.full {
+            max-height: none;
+            cursor: default;
+        }
+    }
+
+    .value {
+        @include font-size(fs-120);
+        font-feature-settings: "tnum";
+        font-variant-numeric: tabular-nums;
+    }
+
+    .progress {
+        flex: auto;
+        width: 100%;
+    }
+
+    .more {
+        margin-top: $sp2;
+        @include font-size(fs-70);
+        float: left;
+        display: flex;
+        gap: $sp3;
+        &.rtl {
+            float: right;
+        }
+
+        .subtitle {
+            @include font(book, normal, fs-70);
+            font-weight: 700;
+            @include font-size(fs-70);
+        }
+    }
+
+    .expand {
+        font-weight: 700;
+        display: flex;
+        align-items: center;
+
+        .label {
+            min-width: 70px;
+        }
+
+        .icon {
+            transition: transform 200ms ease-in-out;
+            transform-origin: 50%;
+            &.open {
+                transform: rotate(180deg);
+            }
+        }
+    }
+
+    .actions {
+        margin-top: $sp3;
+        cursor: pointer;
+        @include font(book, normal, fs-80);
+        display: flex;
+        align-items: center;
+        gap: $sp4;
+    }
+
+    .payload {
+        display: flex;
+        align-items: center;
+        gap: $sp2;
+    }
+
+    .payload-body {
+        word-wrap: break-word;
+        max-height: 65vh;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/proposals/ProposalGroupFilters.svelte b/frontend/app/src/desktop/features/proposals/ProposalGroupFilters.svelte
new file mode 100644
index 0000000000..2ddc3c60c7
--- /dev/null
+++ b/frontend/app/src/desktop/features/proposals/ProposalGroupFilters.svelte
@@ -0,0 +1,170 @@
+<script lang="ts">
+    import type { ChatSummary, OpenChat } from "@client";
+    import {
+        filteredProposalsStore,
+        iconSize,
+        mobileWidth,
+        proposalTopicsStore,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import Close from "svelte-material-icons/Close.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import {
+        proposalActionCategories,
+        type ProposalActionCategory,
+    } from "@src/stores/proposalSections";
+    import { OC_GOVERNANCE_CANISTER_ID } from "@src/utils/sns";
+    import Checkbox from "@src/desktop/shared/Checkbox.svelte";
+    import CollapsibleCard from "@src/desktop/shared/CollapsibleCard.svelte";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import LinkButton from "@src/desktop/shared/LinkButton.svelte";
+    import SectionHeader from "@src/desktop/shared/SectionHeader.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    interface Props {
+        selectedChat: ChatSummary;
+        onClose: () => void;
+    }
+
+    let { selectedChat, onClose }: Props = $props();
+
+    type SectionLabels = Record<ProposalActionCategory, string>;
+
+    const sectionLabels: SectionLabels = {
+        all: "",
+        unknown: "proposal.unknownActionCategory",
+        builtIn: "proposal.builtInAction",
+        userIndex: "proposal.userIndexAction",
+        groupIndex: "proposal.groupIndexAction",
+        notifications: "proposal.notificationsAction",
+        proposalsBot: "proposal.proposalsBotAction",
+        storageIndex: "proposal.storageIndexAction",
+        cyclesDispenser: "proposal.cyclesDispenserAction",
+        registry: "proposal.registryAction",
+        neuronController: "proposal.neuronControllerAction",
+        openchatInstaller: "proposal.openchatInstallerAction",
+    };
+
+    const client = getContext<OpenChat>("client");
+    let topics = $derived([...$proposalTopicsStore]);
+    let groupTopics = $derived(
+        selectedChat.kind !== "direct_chat" &&
+            selectedChat.subtype?.governanceCanisterId === OC_GOVERNANCE_CANISTER_ID,
+    );
+
+    let grouped = $derived([
+        ...client.groupBy(topics, ([id, _]) => {
+            if (!groupTopics) return "all";
+
+            if (id < 1000) {
+                return "builtIn";
+            } else if (id < 2000) {
+                return "userIndex";
+            } else if (id < 3000) {
+                return "groupIndex";
+            } else if (id < 4000) {
+                return "notifications";
+            } else if (id < 5000) {
+                return "proposalsBot";
+            } else if (id < 6000) {
+                return "storageIndex";
+            } else if (id < 7000) {
+                return "cyclesDispenser";
+            } else if (id < 8000) {
+                return "registry";
+            } else if (id < 9000) {
+                return "neuronController";
+            } else if (id < 10000) {
+                return "openchatInstaller";
+            } else {
+                return "unknown";
+            }
+        }),
+    ]);
+
+    function kebab(name: string): string {
+        return `topic_${name.toLowerCase().split(" ").join("_")}`;
+    }
+</script>
+
+<SectionHeader shadow flush={$mobileWidth}>
+    <h4><Translatable resourceKey={i18nKey("proposal.filter")} /></h4>
+    <span title={$_("close")} class="close" onclick={onClose}>
+        <HoverIcon>
+            <Close size={$iconSize} color={"var(--icon-txt)"} />
+        </HoverIcon>
+    </span>
+</SectionHeader>
+
+<div class="proposal-filters">
+    <div class="controls">
+        <LinkButton onClick={() => client.enableAllProposalFilters()} underline={"hover"}
+            ><Translatable resourceKey={i18nKey("proposal.enableAll")} /></LinkButton>
+        <LinkButton
+            onClick={() => client.disableAllProposalFilters(topics.map(([id]) => id))}
+            underline={"hover"}
+            ><Translatable resourceKey={i18nKey("proposal.disableAll")} /></LinkButton>
+    </div>
+    {#each grouped as [category, topicsInCategory]}
+        {#if groupTopics}
+            <CollapsibleCard
+                onToggle={() => proposalActionCategories.toggle(category)}
+                open={$proposalActionCategories[category]}
+                headerText={i18nKey(sectionLabels[category])}>
+                {#each topicsInCategory as [id, label]}
+                    <div class="toggle">
+                        <Checkbox
+                            id={kebab(label)}
+                            onChange={() => client.toggleProposalFilter(id)}
+                            label={i18nKey(label)}
+                            checked={!$filteredProposalsStore?.hasFilter(id)} />
+                    </div>
+                {/each}
+            </CollapsibleCard>
+        {:else}
+            {#each topicsInCategory as [id, label]}
+                <div class="toggle">
+                    <Checkbox
+                        id={kebab(label)}
+                        onChange={() => client.toggleProposalFilter(id)}
+                        label={i18nKey(label)}
+                        checked={!$filteredProposalsStore?.hasFilter(id)} />
+                </div>
+            {/each}
+        {/if}
+    {/each}
+</div>
+
+<style lang="scss">
+    h4 {
+        flex: 1;
+        margin: 0;
+        @include font-size(fs-120);
+    }
+    .close {
+        flex: 0 0 30px;
+    }
+
+    .toggle {
+        margin-bottom: $sp4;
+    }
+
+    .proposal-filters {
+        background-color: var(--bg);
+        padding: $sp4;
+        padding-bottom: 0;
+        @include nice-scrollbar();
+
+        @include mobile() {
+            height: 100%;
+        }
+    }
+
+    .controls {
+        display: flex;
+        gap: $sp4;
+        align-items: center;
+        margin-bottom: $sp4;
+    }
+</style>
diff --git a/frontend/app/src/components/home/proposals/ProposalProgressLayout.svelte b/frontend/app/src/desktop/features/proposals/ProposalProgressLayout.svelte
similarity index 100%
rename from frontend/app/src/components/home/proposals/ProposalProgressLayout.svelte
rename to frontend/app/src/desktop/features/proposals/ProposalProgressLayout.svelte
diff --git a/frontend/app/src/desktop/features/proposals/ProposalVoteButton.svelte b/frontend/app/src/desktop/features/proposals/ProposalVoteButton.svelte
new file mode 100644
index 0000000000..1ff064cff4
--- /dev/null
+++ b/frontend/app/src/desktop/features/proposals/ProposalVoteButton.svelte
@@ -0,0 +1,112 @@
+<script lang="ts">
+    import { iconSize } from "@client";
+    import { _ } from "svelte-i18n";
+    import ThumbDown from "svelte-material-icons/ThumbDown.svelte";
+    import ThumbUp from "svelte-material-icons/ThumbUp.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    interface Props {
+        mode: "yes" | "no";
+        percentage: number;
+        disabled: boolean;
+        voting: boolean;
+        voted: boolean;
+        onClick: () => void;
+    }
+
+    let { mode, percentage, disabled, voting, voted, onClick }: Props = $props();
+
+    let label = $derived(mode === "yes" ? i18nKey("proposal.adopt") : i18nKey("proposal.reject"));
+    let iconColor = $derived(disabled && !voted ? "var(--vote-maybe-color)" : "var(--txt)");
+    let title = $derived(
+        voted
+            ? mode === "yes"
+                ? $_("proposal.youVotedAdopt")
+                : $_("proposal.youVotedReject")
+            : "",
+    );
+</script>
+
+<div class="vote-button" {title}>
+    <div class="label"><Translatable resourceKey={label} /></div>
+    <div onclick={onClick} class:voting class:voted class:disabled class={`icon ${mode}`}>
+        {#if !voting}
+            {#if mode === "yes"}
+                <ThumbUp size={$iconSize} color={iconColor} />
+            {:else}
+                <ThumbDown size={$iconSize} color={iconColor} />
+            {/if}
+        {/if}
+    </div>
+    <div class={`percentage ${mode}`}>{percentage}%</div>
+</div>
+
+<style lang="scss">
+    .vote-button {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 6px;
+    }
+
+    .icon {
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 45px;
+        height: 45px;
+        cursor: pointer;
+        border: solid 1px transparent;
+        background-color: var(--vote-maybe-color);
+        transition: background-color 250ms ease-in-out;
+
+        &.voted.yes,
+        &.voting.yes {
+            background-color: var(--vote-yes-color);
+        }
+
+        &.voted.no,
+        &.voting.no {
+            background-color: var(--vote-no-color);
+        }
+
+        @media (hover: hover) {
+            &.yes:not(.voted):not(.voting):not(.disabled):hover {
+                background-color: var(--vote-yes-color);
+            }
+
+            &.no:not(.voted):not(.voting):not(.disabled):hover {
+                background-color: var(--vote-no-color);
+            }
+        }
+
+        &.disabled {
+            background-color: transparent;
+            cursor: not-allowed;
+
+            &:not(.voted):not(.voting) {
+                border: 1px solid var(--vote-maybe-color);
+            }
+        }
+
+        &.voting {
+            @include loading-spinner(
+                1.2em,
+                0.6em,
+                var(--button-spinner),
+                "/assets/plain-spinner.svg"
+            );
+        }
+    }
+
+    .percentage {
+        &.yes {
+            color: var(--vote-yes-color);
+        }
+        &.no {
+            color: var(--vote-no-color);
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/proposals/ProposalVotingProgress.svelte b/frontend/app/src/desktop/features/proposals/ProposalVotingProgress.svelte
new file mode 100644
index 0000000000..9b62c5ec8a
--- /dev/null
+++ b/frontend/app/src/desktop/features/proposals/ProposalVotingProgress.svelte
@@ -0,0 +1,135 @@
+<script lang="ts">
+    import { rtlStore } from "@src/stores/rtl";
+    import ChevronDown from "svelte-material-icons/ChevronDown.svelte";
+    import { getContext } from "svelte";
+    import type { OpenChat } from "@client";
+    import { now500 } from "@src/stores/time";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+
+    interface Props {
+        adoptPercent: number;
+        rejectPercent: number;
+        votingEnded: boolean;
+        deadline: number;
+        minYesPercentageOfTotal: number;
+        minYesPercentageOfExercised: number;
+    }
+
+    let {
+        adoptPercent,
+        rejectPercent,
+        votingEnded,
+        deadline,
+        minYesPercentageOfTotal,
+        minYesPercentageOfExercised,
+    }: Props = $props();
+
+    const client = getContext<OpenChat>("client");
+
+    let deadlineDate = $derived(new Date(Number(deadline)));
+    let rtl = $derived($rtlStore ? "right" : "left");
+</script>
+
+<div class="wrapper">
+    <div class="icon" style="{rtl}: calc({minYesPercentageOfTotal}% - 0.5em)">
+        <ChevronDown viewBox="-1 0 24 24" />
+    </div>
+    <div class="icon solid" style="{rtl}: calc({minYesPercentageOfExercised}% - 0.5em)">
+        <svg viewBox="-1 0 24 24">
+            <path d="M6,10 L12,16 L18,10 H7Z" fill="currentColor" />
+        </svg>
+    </div>
+    <div class="progress">
+        <div class="adopt" style="transform: scaleX({adoptPercent}%)"></div>
+        <div class="reject" style="transform: scaleX({rejectPercent}%)"></div>
+        <div class="vertical-line" style="{rtl}: {minYesPercentageOfTotal}%"></div>
+        <div class="vertical-line" style="{rtl}: {minYesPercentageOfExercised}%"></div>
+    </div>
+
+    <div class="remaining">
+        {#if !votingEnded}
+            <span class="label"
+                ><Translatable resourceKey={i18nKey("proposal.votingPeriodRemaining")} /></span>
+            <span class="value">{client.formatTimeRemaining($now500, deadline)}</span>
+        {:else}
+            <span class="label"
+                ><Translatable resourceKey={i18nKey("proposal.votingPeriodEnded")} /></span>
+            <span class="value"
+                >{client.toDateString(deadlineDate)}
+                {client.toShortTimeString(deadlineDate)}</span>
+        {/if}
+    </div>
+</div>
+
+<style lang="scss">
+    .wrapper {
+        flex: auto;
+        position: relative;
+    }
+
+    .icon {
+        position: absolute;
+        top: toRem(-16);
+        color: var(--txt);
+
+        &.solid {
+            width: 1em;
+            height: 1em;
+        }
+    }
+
+    .progress {
+        height: toRem(16);
+        position: relative;
+        background: var(--chatSummary-bg-selected);
+        border-radius: $sp3;
+        margin-top: 24px;
+        overflow: hidden;
+        @include mobile() {
+            margin-top: 0;
+        }
+
+        .adopt, .reject {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            transition-duration: 1s;
+        }
+
+        .adopt {
+            background: var(--vote-yes-color);
+            border-radius: $sp3 0 0 $sp3;
+            transform-origin: left;
+        }
+
+        .reject {
+            background: var(--vote-no-color);
+            border-radius: 0 $sp3 $sp3 0;
+            transform-origin: right;
+        }
+
+        .vertical-line {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            width: 1px;
+            background-color: var(--txt);
+        }
+    }
+    .remaining {
+        margin: 0 auto;
+        margin-top: 10px;
+        text-align: center;
+        @include font(book, normal, fs-80);
+        color: var(--txt-light);
+        .label {
+            font-weight: 700;
+        }
+        @include mobile() {
+            margin-top: $sp4;
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/proposals/RemoveBot.svelte b/frontend/app/src/desktop/features/proposals/RemoveBot.svelte
new file mode 100644
index 0000000000..bb231c53d9
--- /dev/null
+++ b/frontend/app/src/desktop/features/proposals/RemoveBot.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+    import { IDL } from "@icp-sdk/core/candid";
+    import { _ } from "svelte-i18n";
+    import Legend from "@src/desktop/shared/Legend.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import {
+        type ExecuteGenericNervousSystemFunction,
+        type ExternalBotLike,
+    } from "@client";
+    import { Principal } from "@icp-sdk/core/principal";
+    import BotExplorer from "@src/desktop/features/bots/BotExplorer.svelte";
+    import SelectedMatch from "./SelectedMatch.svelte";
+
+    interface Props {
+        valid: boolean;
+    }
+
+    let { valid = $bindable() }: Props = $props();
+
+    let selected = $state<ExternalBotLike | undefined>(undefined);
+    let isValid = $derived(selected !== undefined);
+
+    function selectMatch(match: ExternalBotLike | undefined) {
+        selected = match;
+    }
+
+    $effect(() => {
+        if (valid !== isValid) {
+            valid = isValid;
+        }
+    });
+
+    function removeBotPayload(bot: ExternalBotLike): Uint8Array {
+        return new Uint8Array(
+            IDL.encode(
+                [
+                    IDL.Record({
+                        bot_id: IDL.Principal,
+                    }),
+                ],
+                [
+                    {
+                        bot_id: Principal.fromText(bot.id),
+                    },
+                ],
+            ),
+        );
+    }
+
+    export function convertAction(): ExecuteGenericNervousSystemFunction | undefined {
+        if (selected === undefined || !isValid) return undefined;
+
+        return {
+            kind: "execute_generic_nervous_system_function",
+            functionId: BigInt(1014),
+            payload: removeBotPayload(selected),
+        };
+    }
+</script>
+
+<section>
+    <Legend label={i18nKey("bots.manage.removeSearch")} />
+    {#if selected !== undefined}
+        <SelectedMatch onRemove={() => (selected = undefined)} match={selected}></SelectedMatch>
+    {:else}
+        <BotExplorer maxHeight={"450px"} fill onSelect={selectMatch}></BotExplorer>
+    {/if}
+</section>
diff --git a/frontend/app/src/components/home/proposal/SelectedMatch.svelte b/frontend/app/src/desktop/features/proposals/SelectedMatch.svelte
similarity index 100%
rename from frontend/app/src/components/home/proposal/SelectedMatch.svelte
rename to frontend/app/src/desktop/features/proposals/SelectedMatch.svelte
diff --git a/frontend/app/src/desktop/features/proposals/TransferSNSFunds.svelte b/frontend/app/src/desktop/features/proposals/TransferSNSFunds.svelte
new file mode 100644
index 0000000000..9c2291a84c
--- /dev/null
+++ b/frontend/app/src/desktop/features/proposals/TransferSNSFunds.svelte
@@ -0,0 +1,115 @@
+<script lang="ts">
+    import {
+        isPrincipalValid,
+        isSubAccountValid,
+        type NervousSystemDetails,
+        type Treasury,
+        type TransferSnsFunds,
+    } from "@client";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Legend from "@src/desktop/shared/Legend.svelte";
+    import Radio from "@src/desktop/shared/Radio.svelte";
+    import Input from "@src/desktop/shared/Input.svelte";
+
+    interface Props {
+        nervousSystem: NervousSystemDetails;
+        valid: boolean;
+    }
+
+    let { nervousSystem, valid = $bindable() }: Props = $props();
+
+    let treasury: Treasury = $state("SNS");
+    let busy = $state(false);
+    let recipientOwner = $state("");
+    let recipientSubaccount = $state("");
+    let amountText = $state("");
+    let tokenDetails = $derived(nervousSystem.token);
+    let transferFee = $derived(tokenDetails.transferFee);
+    let amount = $derived(Number(amountText) * Number(Math.pow(10, tokenDetails.decimals)));
+    let amountValid = $derived(amount >= transferFee);
+    let symbol = $derived(tokenDetails.symbol);
+    let recipientOwnerValid = $derived(isPrincipalValid(recipientOwner));
+    let recipientSubaccountValid = $derived(
+        recipientSubaccount.length === 0 || isSubAccountValid(recipientSubaccount),
+    );
+    let token = $derived(treasury === "SNS" ? symbol : "ICP");
+    let isValid = $derived(amountValid && recipientOwnerValid && recipientSubaccountValid);
+
+    $effect(() => {
+        if (valid !== isValid) {
+            valid = isValid;
+        }
+    });
+
+    export function convertAction(): TransferSnsFunds {
+        return {
+            kind: "transfer_sns_funds",
+            recipient: {
+                owner: recipientOwner,
+                subaccount:
+                    recipientSubaccount.length > 0
+                        ? recipientSubaccount.padStart(64, "0")
+                        : undefined,
+            },
+            amount: BigInt(Math.floor(amount)),
+            treasury,
+        };
+    }
+</script>
+
+<div>
+    <section>
+        <Legend label={i18nKey("proposal.maker.treasury")} required />
+        <Radio
+            id="chat_treasury"
+            group="treasury"
+            value={symbol}
+            label={i18nKey(symbol)}
+            disabled={busy}
+            checked={treasury === "SNS"}
+            onChange={() => (treasury = "SNS")} />
+        <Radio
+            id="icp_treasury"
+            group="treasury"
+            value="ICP"
+            label={i18nKey("ICP")}
+            disabled={busy}
+            checked={treasury === "ICP"}
+            onChange={() => (treasury = "ICP")} />
+    </section>
+    <section>
+        <Legend label={i18nKey("proposal.maker.recipientOwner")} required />
+        <Input
+            disabled={busy}
+            invalid={recipientOwner.length > 0 && !recipientOwnerValid}
+            maxlength={63}
+            bind:value={recipientOwner}
+            placeholder={i18nKey("proposal.maker.enterRecipientOwner")} />
+    </section>
+    <section>
+        <Legend
+            label={i18nKey("proposal.maker.recipientSubaccount")}
+            rules={i18nKey("proposal.maker.recipientSubaccountRules")} />
+        <Input
+            disabled={busy}
+            invalid={!recipientSubaccountValid}
+            maxlength={64}
+            bind:value={recipientSubaccount}
+            placeholder={i18nKey("proposal.maker.enterRecipientSubaccount")} />
+    </section>
+    <section>
+        <Legend
+            label={i18nKey("proposal.maker.amount")}
+            rules={i18nKey("proposal.maker.amountRules", { token })}
+            required />
+        <Input
+            disabled={busy}
+            invalid={amountText.length > 0 && !amountValid}
+            minlength={1}
+            maxlength={20}
+            bind:value={amountText}
+            placeholder={i18nKey("proposal.maker.enterAmount", {
+                token,
+            })} />
+    </section>
+</div>
diff --git a/frontend/app/src/desktop/features/proposals/VerificationProposal.svelte b/frontend/app/src/desktop/features/proposals/VerificationProposal.svelte
new file mode 100644
index 0000000000..bee943f43c
--- /dev/null
+++ b/frontend/app/src/desktop/features/proposals/VerificationProposal.svelte
@@ -0,0 +1,186 @@
+<script lang="ts">
+    import { IDL } from "@icp-sdk/core/candid";
+    import { _ } from "svelte-i18n";
+    import Legend from "@src/desktop/shared/Legend.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Input from "@src/desktop/shared/Input.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import {
+        type CommunityMatch,
+        type ExecuteGenericNervousSystemFunction,
+        type GroupMatch,
+        type Level,
+    } from "@client";
+    import CommunityFinder from "./CommunityFinder.svelte";
+    import GroupFinder from "./GroupFinder.svelte";
+    import { fade } from "svelte/transition";
+    import { Principal } from "@icp-sdk/core/principal";
+
+    const MIN_LENGTH = 3;
+    const MAX_LENGTH = 25;
+    type Operation = "set" | "revoke";
+
+    interface Props {
+        type:
+            | "set_community_verification"
+            | "revoke_community_verification"
+            | "set_group_verification"
+            | "revoke_group_verification";
+        valid: boolean;
+    }
+
+    let { type, valid = $bindable() }: Props = $props();
+
+    let selected = $state<GroupMatch | CommunityMatch | undefined>();
+    let name = $state("");
+    let nameValid = $derived(name.length >= MIN_LENGTH && name.length <= MAX_LENGTH);
+    let level = $derived<Level>(
+        type === "set_community_verification" || type === "revoke_community_verification"
+            ? "community"
+            : "group",
+    );
+    let operation = $derived<Operation>(
+        type === "set_community_verification" || type === "set_group_verification"
+            ? "set"
+            : "revoke",
+    );
+    let isValid = $derived(selected !== undefined && (operation === "revoke" || nameValid));
+
+    function selectMatch(match: GroupMatch | CommunityMatch | undefined) {
+        selected = match;
+        name = match?.name ?? "";
+    }
+
+    $effect(() => {
+        if (valid !== isValid) {
+            valid = isValid;
+        }
+    });
+
+    function setCommunityValidityPayload(communityId: string, name: string): Uint8Array {
+        return new Uint8Array(
+            IDL.encode(
+                [
+                    IDL.Record({
+                        community_id: IDL.Principal,
+                        name: IDL.Text,
+                    }),
+                ],
+                [
+                    {
+                        community_id: Principal.fromText(communityId),
+                        name,
+                    },
+                ],
+            ),
+        );
+    }
+
+    function revokeCommunityValidityPayload(communityId: string): Uint8Array {
+        return new Uint8Array(
+            IDL.encode(
+                [IDL.Record({ community_id: IDL.Principal })],
+                [{ community_id: Principal.fromText(communityId) }],
+            ),
+        );
+    }
+
+    function setGroupValidityPayload(groupId: string, name: string): Uint8Array {
+        return new Uint8Array(
+            IDL.encode(
+                [
+                    IDL.Record({
+                        group_id: IDL.Principal,
+                        name: IDL.Text,
+                    }),
+                ],
+                [
+                    {
+                        group_id: Principal.fromText(groupId),
+                        name,
+                    },
+                ],
+            ),
+        );
+    }
+
+    function revokeGroupValidityPayload(groupId: string): Uint8Array {
+        return new Uint8Array(
+            IDL.encode(
+                [IDL.Record({ group_id: IDL.Principal })],
+                [{ group_id: Principal.fromText(groupId) }],
+            ),
+        );
+    }
+
+    export function convertAction(): ExecuteGenericNervousSystemFunction | undefined {
+        if (selected === undefined || !isValid) return undefined;
+
+        if (type === "set_community_verification" && selected.kind === "community_match") {
+            return {
+                kind: "execute_generic_nervous_system_function",
+                functionId: BigInt(2006),
+                payload: setCommunityValidityPayload(selected.id.communityId, name),
+            };
+        } else if (type === "set_group_verification" && selected.kind === "group_match") {
+            return {
+                kind: "execute_generic_nervous_system_function",
+                functionId: BigInt(2007),
+                payload: setGroupValidityPayload(selected.chatId.groupId, name),
+            };
+        } else if (
+            type === "revoke_community_verification" &&
+            selected.kind === "community_match"
+        ) {
+            return {
+                kind: "execute_generic_nervous_system_function",
+                functionId: BigInt(2008),
+                payload: revokeCommunityValidityPayload(selected.id.communityId),
+            };
+        } else if (type === "revoke_group_verification" && selected.kind === "group_match") {
+            return {
+                kind: "execute_generic_nervous_system_function",
+                functionId: BigInt(2009),
+                payload: revokeGroupValidityPayload(selected.chatId.groupId),
+            };
+        }
+
+        return undefined;
+    }
+</script>
+
+<section>
+    <Legend label={i18nKey("verified.choose", undefined, level, true)} />
+    {#if type === "set_community_verification" || type === "revoke_community_verification"}
+        <CommunityFinder onSelect={selectMatch}></CommunityFinder>
+    {/if}
+    {#if type === "set_group_verification" || type === "revoke_group_verification"}
+        <GroupFinder onSelect={selectMatch}></GroupFinder>
+    {/if}
+
+    {#if selected !== undefined && operation === "set"}
+        <section in:fade class="name">
+            <Legend label={i18nKey("verified.preferredName")} />
+            <Input
+                autofocus
+                disabled={selected === undefined}
+                invalid={!nameValid}
+                bind:value={name}
+                minlength={MIN_LENGTH}
+                maxlength={MAX_LENGTH}
+                countdown
+                placeholder={i18nKey("verified.preferredName")} />
+            <p class="info">
+                <Translatable resourceKey={i18nKey("verified.rename", undefined, level, true)}
+                ></Translatable>
+            </p>
+        </section>
+    {/if}
+</section>
+
+<style lang="scss">
+    .info {
+        color: var(--txt-light);
+        @include font(light, normal, fs-80);
+    }
+</style>
diff --git a/frontend/app/src/components/home/upgrade/Congratulations.svelte b/frontend/app/src/desktop/features/upgrade/Congratulations.svelte
similarity index 91%
rename from frontend/app/src/components/home/upgrade/Congratulations.svelte
rename to frontend/app/src/desktop/features/upgrade/Congratulations.svelte
index 2abee05252..a324de6e5a 100644
--- a/frontend/app/src/components/home/upgrade/Congratulations.svelte
+++ b/frontend/app/src/desktop/features/upgrade/Congratulations.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Confetti } from "svelte-confetti";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Translatable from "../../Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/ui/Translatable.svelte";
 
     let { para = i18nKey("upgrade.congratulations") } = $props();
 </script>
diff --git a/frontend/app/src/desktop/features/upgrade/Expiry.svelte b/frontend/app/src/desktop/features/upgrade/Expiry.svelte
new file mode 100644
index 0000000000..4e873d365e
--- /dev/null
+++ b/frontend/app/src/desktop/features/upgrade/Expiry.svelte
@@ -0,0 +1,89 @@
+<script lang="ts">
+    import {
+        diamondStatusStore,
+        type DiamondMembershipDuration,
+        type DiamondMembershipStatus,
+        type OpenChat,
+    } from "@client";
+    import { getContext, untrack } from "svelte";
+    import { _, locale } from "svelte-i18n";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { now500 } from "@src/stores/time";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        extendBy?: DiamondMembershipDuration | undefined;
+    }
+
+    let { extendBy = undefined }: Props = $props();
+
+    let expiresIn: string | undefined = $state(undefined);
+    let expiresAt: string | undefined = $state(undefined);
+    let extendTo: string | undefined = $state(undefined);
+
+    function durationToMs(duration: DiamondMembershipDuration | undefined): number | undefined {
+        if (duration !== undefined && duration !== "lifetime") {
+            return client.diamondDurationToMs(duration);
+        }
+        return undefined;
+    }
+    let extendByMs = $derived(durationToMs(extendBy));
+    $effect(() => {
+        refresh($diamondStatusStore, $now500, $locale);
+    });
+
+    function refresh(
+        status: DiamondMembershipStatus,
+        now: number,
+        locale: string | null | undefined,
+    ) {
+        untrack(() => {
+            if (status.kind === "active") {
+                expiresIn = client.diamondExpiresIn(now, locale);
+
+                if (extendBy !== "lifetime") {
+                    const expiresAtMs = Number(status.expiresAt);
+                    expiresAt = client.toDateString(new Date(expiresAtMs));
+                    if (extendByMs !== undefined) {
+                        extendTo = client.toDateString(new Date(expiresAtMs + extendByMs));
+                    }
+                } else {
+                    extendTo = $_("upgrade.lifetime");
+                }
+            }
+        });
+    }
+</script>
+
+{#if $diamondStatusStore.kind !== "inactive"}
+    <p class="expiry">
+        <span class="msg">
+            <Translatable resourceKey={i18nKey("upgrade.expiryMessage", { relative: expiresIn })} />
+        </span>
+        <span class="date">
+            ({expiresAt}).
+        </span>
+
+        {#if extendTo !== undefined}
+            <span class="msg">
+                {$_("upgrade.extendTo")}
+            </span>
+            <span class="date">
+                {extendTo}.
+            </span>
+        {/if}
+    </p>
+{/if}
+
+<style lang="scss">
+    .expiry {
+        @include font(book, normal, fs-90);
+        margin-bottom: $sp4;
+
+        .date {
+            color: var(--primary);
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/upgrade/Feature.svelte b/frontend/app/src/desktop/features/upgrade/Feature.svelte
new file mode 100644
index 0000000000..1c70a6222d
--- /dev/null
+++ b/frontend/app/src/desktop/features/upgrade/Feature.svelte
@@ -0,0 +1,85 @@
+<script lang="ts">
+    import type { ResourceKey } from "@client";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    import MoreInfo from "@src/desktop/shared/InfoIcon.svelte";
+    import type { Snippet } from "svelte";
+
+    interface Props {
+        comingSoon?: boolean;
+        freeInfo?: ResourceKey | undefined;
+        diamondInfo?: ResourceKey | undefined;
+        landing?: boolean;
+        title?: Snippet;
+        free?: Snippet;
+        diamond?: Snippet;
+    }
+
+    let {
+        comingSoon = false,
+        freeInfo = undefined,
+        diamondInfo = undefined,
+        landing = false,
+        title,
+        free,
+        diamond,
+    }: Props = $props();
+</script>
+
+<div class:landing class="title">
+    {@render title?.()}
+    {#if comingSoon}
+        <span class="soon">(<Translatable resourceKey={i18nKey("upgrade.comingSoon")} />)</span>
+    {/if}
+</div>
+<div class:landing class="feature free">
+    {@render free?.()}
+
+    {#if freeInfo !== undefined}
+        <MoreInfo><Translatable resourceKey={freeInfo} /></MoreInfo>
+    {/if}
+</div>
+<div class:landing class="feature diamond">
+    {@render diamond?.()}
+
+    {#if diamondInfo !== undefined}
+        <MoreInfo><Translatable resourceKey={diamondInfo} /></MoreInfo>
+    {/if}
+</div>
+
+<style lang="scss">
+    .diamond {
+        background-color: rgba(255, 255, 255, 0.05);
+    }
+
+    .title {
+        display: flex;
+        align-items: center;
+    }
+
+    .feature,
+    .title {
+        @include font-size(fs-80);
+        color: var(--txt-light);
+        padding: 6px;
+        border-bottom: 1px solid var(--bd);
+    }
+
+    .feature {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+    }
+
+    .soon {
+        @include font(light, normal, fs-50);
+        margin-left: $sp2;
+    }
+
+    .landing {
+        @include font-size(fs-120);
+        color: var(--landing-txt-light);
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/upgrade/Features.svelte b/frontend/app/src/desktop/features/upgrade/Features.svelte
new file mode 100644
index 0000000000..da0a287185
--- /dev/null
+++ b/frontend/app/src/desktop/features/upgrade/Features.svelte
@@ -0,0 +1,327 @@
+<script lang="ts">
+    import { mobileWidth } from "@client";
+    import Check from "svelte-material-icons/Check.svelte";
+    import Minus from "svelte-material-icons/Minus.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Button from "@src/ui/Button.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import Feature from "./Feature.svelte";
+    import Footer from "./Footer.svelte";
+
+    interface Props {
+        isDiamond: boolean;
+        canExtend: boolean;
+        landing?: boolean;
+        onUpgrade?: () => void;
+        onCancel?: () => void;
+    }
+
+    let { isDiamond, canExtend, landing = false, onUpgrade, onCancel }: Props = $props();
+</script>
+
+<div class:landing class="grid header">
+    <div class="header-col"><Translatable resourceKey={i18nKey("upgrade.feature")} /></div>
+    <div class="header-col free"><Translatable resourceKey={i18nKey("upgrade.free")} /></div>
+    <div class="header-col diamond"><Translatable resourceKey={i18nKey("upgrade.diamond")} /></div>
+</div>
+
+<div class:landing class="grid body">
+    <Feature {landing}>
+        {#snippet title()}
+            <Translatable resourceKey={i18nKey("upgrade.textMessages")} />
+        {/snippet}
+        {#snippet free()}
+            <Check size={"1em"} color={"var(--success)"} />
+        {/snippet}
+        {#snippet diamond()}
+            <Check size={"1em"} color={"var(--success)"} />
+        {/snippet}
+    </Feature>
+
+    <Feature {landing}>
+        {#snippet title()}
+            <Translatable resourceKey={i18nKey("upgrade.giphys")} />
+        {/snippet}
+        {#snippet free()}
+            <Check size={"1em"} color={"var(--success)"} />
+        {/snippet}
+        {#snippet diamond()}
+            <Check size={"1em"} color={"var(--success)"} />
+        {/snippet}
+    </Feature>
+
+    <Feature {landing}>
+        {#snippet title()}
+            <Translatable resourceKey={i18nKey("upgrade.reactions")} />
+        {/snippet}
+        {#snippet free()}
+            <Check size={"1em"} color={"var(--success)"} />
+        {/snippet}
+        {#snippet diamond()}
+            <Check size={"1em"} color={"var(--success)"} />
+        {/snippet}
+    </Feature>
+
+    <Feature {landing}>
+        {#snippet title()}
+            <Translatable resourceKey={i18nKey("upgrade.polls")} />
+        {/snippet}
+        {#snippet free()}
+            <Check size={"1em"} color={"var(--success)"} />
+        {/snippet}
+        {#snippet diamond()}
+            <Check size={"1em"} color={"var(--success)"} />
+        {/snippet}
+    </Feature>
+
+    <Feature {landing}>
+        {#snippet title()}
+            <Translatable resourceKey={i18nKey("upgrade.reminders")} />
+        {/snippet}
+        {#snippet free()}
+            <Check size={"1em"} color={"var(--success)"} />
+        {/snippet}
+        {#snippet diamond()}
+            <Check size={"1em"} color={"var(--success)"} />
+        {/snippet}
+    </Feature>
+
+    <Feature {landing}>
+        {#snippet title()}
+            <Translatable resourceKey={i18nKey("upgrade.crypto")} />
+        {/snippet}
+        {#snippet free()}
+            <Check size={"1em"} color={"var(--success)"} />
+        {/snippet}
+        {#snippet diamond()}
+            <Check size={"1em"} color={"var(--success)"} />
+        {/snippet}
+    </Feature>
+
+    <Feature {landing}>
+        {#snippet title()}
+            <Translatable resourceKey={i18nKey("upgrade.videoCalls")} />
+        {/snippet}
+        {#snippet free()}
+            <Minus size={"1em"} color={"var(--menu-warn)"} />
+        {/snippet}
+        {#snippet diamond()}
+            <Check size={"1em"} color={"var(--success)"} />
+        {/snippet}
+    </Feature>
+
+    <Feature {landing}>
+        {#snippet title()}
+            <Translatable resourceKey={i18nKey("upgrade.notifications")} />
+        {/snippet}
+        {#snippet free()}
+            <Translatable resourceKey={i18nKey("upgrade.freeNotifications")} />
+        {/snippet}
+        {#snippet diamond()}
+            <Translatable resourceKey={i18nKey("upgrade.diamondNotifications")} />
+        {/snippet}
+    </Feature>
+
+    <Feature
+        {landing}
+        diamondInfo={i18nKey("upgrade.mediaLimits", { image: "5mb", video: "50mb" })}
+        freeInfo={i18nKey("upgrade.mediaLimits", { image: "1mb", video: "5mb" })}>
+        {#snippet title()}
+            <Translatable resourceKey={i18nKey("upgrade.mediaMessages")} />
+        {/snippet}
+        {#snippet free()}
+            <Translatable resourceKey={i18nKey("upgrade.freeMediaMessages")} />
+        {/snippet}
+        {#snippet diamond()}
+            <Translatable resourceKey={i18nKey("upgrade.diamondMediaMessages")} />
+        {/snippet}
+    </Feature>
+
+    <Feature
+        {landing}
+        diamondInfo={i18nKey("upgrade.diamondStorageLimit")}
+        freeInfo={i18nKey("upgrade.freeStorageLimit")}>
+        {#snippet title()}
+            <Translatable resourceKey={i18nKey("upgrade.storage")} />
+        {/snippet}
+        {#snippet free()}
+            <Translatable resourceKey={i18nKey("upgrade.freeStorage")} />
+        {/snippet}
+        {#snippet diamond()}
+            <Translatable resourceKey={i18nKey("upgrade.diamondStorage")} />
+        {/snippet}
+    </Feature>
+
+    <Feature {landing}>
+        {#snippet title()}
+            <Translatable resourceKey={i18nKey("upgrade.createCommunities")} />
+        {/snippet}
+        {#snippet free()}
+            <Minus size={"1em"} color={"var(--menu-warn)"} />
+        {/snippet}
+        {#snippet diamond()}
+            <Check size={"1em"} color={"var(--success)"} />
+        {/snippet}
+    </Feature>
+
+    <Feature {landing}>
+        {#snippet title()}
+            <Translatable resourceKey={i18nKey("upgrade.directChats")} />
+        {/snippet}
+        {#snippet free()}
+            <Check size={"1em"} color={"var(--success)"} />
+        {/snippet}
+        {#snippet diamond()}
+            <Check size={"1em"} color={"var(--success)"} />
+        {/snippet}
+    </Feature>
+
+    <Feature {landing}>
+        {#snippet title()}
+            <Translatable resourceKey={i18nKey("upgrade.privateGroups")} />
+        {/snippet}
+        {#snippet free()}
+            <Translatable resourceKey={i18nKey("upgrade.freePrivateGroups")} />
+        {/snippet}
+        {#snippet diamond()}
+            <Translatable resourceKey={i18nKey("upgrade.diamondPrivateGroups")} />
+        {/snippet}
+    </Feature>
+
+    <Feature {landing}>
+        {#snippet title()}
+            <Translatable resourceKey={i18nKey("upgrade.publicGroups")} />
+        {/snippet}
+        {#snippet free()}
+            <Minus size={"1em"} color={"var(--menu-warn)"} />
+        {/snippet}
+        {#snippet diamond()}
+            <Translatable resourceKey={i18nKey("upgrade.diamondPublicGroups")} />
+        {/snippet}
+    </Feature>
+
+    <Feature {landing}>
+        {#snippet title()}
+            <Translatable resourceKey={i18nKey("upgrade.gatedGroups")} />
+        {/snippet}
+        {#snippet free()}
+            <Minus size={"1em"} color={"var(--menu-warn)"} />
+        {/snippet}
+        {#snippet diamond()}
+            <Check size={"1em"} color={"var(--success)"} />
+        {/snippet}
+    </Feature>
+
+    <Feature {landing}>
+        {#snippet title()}
+            <Translatable resourceKey={i18nKey("upgrade.translations")} />
+        {/snippet}
+        {#snippet free()}
+            <Minus size={"1em"} color={"var(--menu-warn)"} />
+        {/snippet}
+        {#snippet diamond()}
+            <Check size={"1em"} color={"var(--success)"} />
+        {/snippet}
+    </Feature>
+
+    <Feature {landing}>
+        {#snippet title()}
+            <Translatable resourceKey={i18nKey("upgrade.p2pSwap")} />
+        {/snippet}
+        {#snippet free()}
+            <Minus size={"1em"} color={"var(--menu-warn)"} />
+        {/snippet}
+        {#snippet diamond()}
+            <Check size={"1em"} color={"var(--success)"} />
+        {/snippet}
+    </Feature>
+
+    <Feature {landing}>
+        {#snippet title()}
+            <Translatable resourceKey={i18nKey("upgrade.diamondBadge")} />
+        {/snippet}
+        {#snippet free()}
+            <Minus size={"1em"} color={"var(--menu-warn)"} />
+        {/snippet}
+        {#snippet diamond()}
+            <Check size={"1em"} color={"var(--success)"} />
+        {/snippet}
+    </Feature>
+
+    <Feature {landing} diamondInfo={i18nKey("upgrade.airdropsInfo")}>
+        {#snippet title()}
+            <Translatable resourceKey={i18nKey("upgrade.airdrops")} />
+        {/snippet}
+        {#snippet free()}
+            <Minus size={"1em"} color={"var(--menu-warn)"} />
+        {/snippet}
+        {#snippet diamond()}
+            <Translatable resourceKey={i18nKey("upgrade.eligible")} />
+        {/snippet}
+    </Feature>
+</div>
+
+{#if !landing}
+    <div class="footer">
+        <Footer>
+            <Button tiny={$mobileWidth} small={!$mobileWidth} secondary onClick={onCancel}
+                ><Translatable resourceKey={i18nKey(isDiamond ? "close" : "cancel")} /></Button>
+            {#if !isDiamond}
+                <Button onClick={() => onUpgrade?.()} tiny={$mobileWidth} small={!$mobileWidth}
+                    ><Translatable resourceKey={i18nKey("upgrade.button")} /></Button>
+            {:else if canExtend}
+                <Button onClick={() => onUpgrade?.()} tiny={$mobileWidth} small={!$mobileWidth}
+                    ><Translatable resourceKey={i18nKey("upgrade.extendShort")} /></Button>
+            {/if}
+        </Footer>
+    </div>
+{/if}
+
+<style lang="scss">
+    .grid {
+        @include font(book, normal, fs-90);
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+    }
+
+    .body {
+        padding: 0 $sp5 $sp5 $sp5;
+        flex: 1;
+        overflow-y: scroll;
+
+        @include mobile() {
+            padding: 0 $sp3 $sp3 $sp3;
+        }
+
+        &.landing {
+            padding: 0;
+        }
+    }
+
+    .header {
+        padding: $sp5 $sp5 0 $sp5;
+
+        @include mobile() {
+            padding: $sp3 $sp3 0 $sp3;
+        }
+
+        &.landing {
+            padding: 0;
+            @include font-size(fs-120);
+        }
+    }
+    .header-col {
+        font-weight: 700;
+        padding: $sp3 $sp2;
+
+        &.free,
+        &.diamond {
+            text-align: center;
+        }
+
+        &.diamond {
+            background-color: var(--primary);
+            color: #ffffff;
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/upgrade/Footer.svelte b/frontend/app/src/desktop/features/upgrade/Footer.svelte
new file mode 100644
index 0000000000..d98ea37075
--- /dev/null
+++ b/frontend/app/src/desktop/features/upgrade/Footer.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+
+    interface Props {
+        align?: "end" | "fill" | "center";
+        children?: import("svelte").Snippet;
+    }
+
+    let { align = "end", children }: Props = $props();
+</script>
+
+<div class="footer">
+    <ButtonGroup {align}>
+        {@render children?.()}
+    </ButtonGroup>
+</div>
+
+<style lang="scss">
+    .footer {
+        padding: $sp4 $sp5;
+        position: relative;
+
+        @include mobile() {
+            padding: $sp3 $sp4;
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/upgrade/Payment.svelte b/frontend/app/src/desktop/features/upgrade/Payment.svelte
new file mode 100644
index 0000000000..bef7429672
--- /dev/null
+++ b/frontend/app/src/desktop/features/upgrade/Payment.svelte
@@ -0,0 +1,357 @@
+<script lang="ts">
+    import {
+        type DiamondMembershipDuration,
+        type DiamondMembershipFees,
+        type OpenChat,
+        type ResourceKey,
+        cryptoLookup,
+        E8S_PER_TOKEN,
+        mobileWidth,
+    } from "@client";
+    import { getContext, onMount } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import type { RemoteData } from "@src/utils/remoteData";
+    import Button from "@src/ui/Button.svelte";
+    import Checkbox from "@src/desktop/shared/Checkbox.svelte";
+    import ErrorMessage from "@src/desktop/shared/ErrorMessage.svelte";
+    import Diamond from "@src/desktop/ui/icons/Diamond.svelte";
+    import Loading from "@src/ui/Loading.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import AccountInfo from "@src/desktop/shared/AccountInfo.svelte";
+    import Congratulations from "./Congratulations.svelte";
+    import Expiry from "./Expiry.svelte";
+    import Footer from "./Footer.svelte";
+
+    interface Props {
+        accountBalance?: number;
+        error: string | undefined;
+        confirming?: boolean;
+        confirmed?: boolean;
+        refreshingBalance?: boolean;
+        ledger: string;
+        allowBack?: boolean;
+        lifetime?: boolean;
+        showExpiry?: boolean;
+        padded?: boolean;
+        onCancel: () => void;
+        onFeatures?: () => void;
+        onSuccess?: (proof: string) => void;
+    }
+
+    let {
+        accountBalance = 0,
+        error = $bindable(),
+        confirming = $bindable(false),
+        confirmed = $bindable(false),
+        refreshingBalance = $bindable(false),
+        ledger,
+        allowBack = true,
+        lifetime = false,
+        showExpiry = true,
+        padded = true,
+        onCancel,
+        onFeatures,
+        onSuccess,
+    }: Props = $props();
+
+    type FeeKey = keyof Omit<DiamondMembershipFees, "token">;
+    type FeeData = RemoteData<Record<"ICP" | "CHAT", DiamondMembershipFees>, string>;
+
+    const client = getContext<OpenChat>("client");
+
+    const options: Option[] = [
+        {
+            index: 0,
+            duration: i18nKey("upgrade.oneMonth"),
+            fee: "oneMonth",
+            enabled: !lifetime,
+        },
+        {
+            index: 1,
+            duration: i18nKey("upgrade.threeMonths"),
+            fee: "threeMonths",
+            enabled: !lifetime,
+        },
+        {
+            index: 2,
+            duration: i18nKey("upgrade.oneYear"),
+            fee: "oneYear",
+            enabled: !lifetime,
+        },
+        {
+            index: 3,
+            duration: i18nKey("upgrade.lifetime"),
+            fee: "lifetime",
+            enabled: true,
+        },
+    ];
+
+    let autoRenew = $state(true);
+    let selectedOption: Option | undefined = $state(options[lifetime ? 3 : 0]);
+
+    type Option = {
+        index: number;
+        duration: ResourceKey;
+        fee: FeeKey;
+        enabled: boolean;
+    };
+
+    let diamondFees: FeeData = $state({
+        kind: "idle",
+    });
+
+    const indexToDuration: Record<number, DiamondMembershipDuration> = {
+        0: "one_month",
+        1: "three_months",
+        2: "one_year",
+        3: "lifetime",
+    };
+
+    function amount(e8s: bigint): number {
+        return Number(e8s) / E8S_PER_TOKEN;
+    }
+
+    function amountInE8s(symbol: string, fees: FeeData, option: Option | undefined): bigint {
+        if (fees.kind !== "success" || option === undefined) {
+            return 0n;
+        }
+        return fees.data[symbol as "ICP" | "CHAT"][option.fee] ?? 0n;
+    }
+
+    function confirm() {
+        confirming = true;
+        client
+            .payForDiamondMembership(
+                tokenDetails.ledger,
+                selectedDuration,
+                autoRenew && selectedDuration !== "lifetime",
+                toPayE8s,
+            )
+            .then((resp) => {
+                if (resp.kind === "success") {
+                    confirmed = true;
+                    onSuccess?.(resp.proof);
+                } else {
+                    const errorKey = "upgrade.paymentFailed";
+                    error = errorKey;
+                    toastStore.showFailureToast(i18nKey(errorKey));
+                }
+            })
+            .finally(() => (confirming = false));
+    }
+
+    onMount(() => {
+        diamondFees = { kind: "loading" };
+        client
+            .diamondMembershipFees()
+            .then((fees) => {
+                diamondFees = {
+                    kind: "success",
+                    data: client.toRecord(fees, (f) => f.token),
+                };
+            })
+            .catch((err) => {
+                diamondFees = { kind: "error", error: err };
+            });
+    });
+    let icpBalance = $derived(accountBalance / E8S_PER_TOKEN); //balance in the user's account expressed as ICP
+    let tokenDetails = $derived($cryptoLookup.get(ledger)!);
+    let toPayE8s = $derived(amountInE8s(tokenDetails.symbol, diamondFees, selectedOption));
+    let toPay = $derived(amount(toPayE8s));
+    let insufficientFunds = $derived(toPay - icpBalance > 0.0001); //we need to account for the fact that js cannot do maths
+    let selectedDuration = $derived(indexToDuration[selectedOption?.index ?? 0] ?? "one_month");
+</script>
+
+<div class="body" class:padded class:confirming class:is-confirmed={confirmed}>
+    {#if confirming}
+        <Loading size={"large"} />
+    {:else if confirmed}
+        <Congratulations />
+    {:else}
+        {#if showExpiry}
+            <Expiry extendBy={selectedDuration} />
+        {/if}
+        <div class="cols">
+            <div class="left">
+                {#each options as option}
+                    <div
+                        role="button"
+                        tabindex="0"
+                        class="option"
+                        class:disabled={!option.enabled}
+                        class:insufficientFunds={insufficientFunds && !refreshingBalance}
+                        class:selected={selectedOption?.index === option.index}
+                        onclick={() => {
+                            if (option.enabled) {
+                                selectedOption = option;
+                            }
+                        }}>
+                        <div class="option-details">
+                            <p class="duration"><Translatable resourceKey={option.duration} /></p>
+                            <p class="price">
+                                {`${amount(
+                                    amountInE8s(tokenDetails.symbol, diamondFees, option),
+                                )} ${tokenDetails.symbol}`}
+                            </p>
+                        </div>
+                        {#if option.index === 3}
+                            <Diamond size={"1.2em"} show={"gold"} />
+                        {/if}
+                    </div>
+                {/each}
+            </div>
+            <div class="right">
+                <AccountInfo fullWidthOnMobile border={false} centered {ledger} />
+            </div>
+        </div>
+
+        {#if !lifetime}
+            <div class="autorenew">
+                <Checkbox
+                    id="auto-renew"
+                    onChange={() => (autoRenew = !autoRenew)}
+                    label={i18nKey("upgrade.autorenew")}
+                    align={"start"}
+                    disabled={selectedDuration === "lifetime"}
+                    checked={autoRenew && selectedDuration !== "lifetime"}>
+                    <div class="section-title">
+                        <Translatable resourceKey={i18nKey("upgrade.autorenew")} />
+                    </div>
+                    <div class="smallprint">
+                        <Translatable resourceKey={i18nKey("upgrade.paymentSmallprint")} />
+                    </div>
+                </Checkbox>
+            </div>
+        {/if}
+
+        <div class="autorenew">
+            {#if insufficientFunds}
+                <ErrorMessage
+                    ><Translatable
+                        resourceKey={i18nKey("upgrade.insufficientFunds", {
+                            token: tokenDetails.symbol,
+                            amount: `${toPay} ${tokenDetails.symbol}`,
+                        })} /></ErrorMessage>
+            {/if}
+
+            {#if error}
+                <ErrorMessage>
+                    <Translatable resourceKey={i18nKey(error)} />
+                </ErrorMessage>
+            {/if}
+        </div>
+    {/if}
+</div>
+<Footer align={$mobileWidth ? "center" : "end"}>
+    {#if confirmed}
+        <Button small={!$mobileWidth} tiny={$mobileWidth} onClick={onCancel}
+            ><Translatable resourceKey={i18nKey("close")} /></Button>
+    {:else}
+        <Button
+            disabled={confirming}
+            tiny={$mobileWidth}
+            small={!$mobileWidth}
+            secondary
+            onClick={onCancel}><Translatable resourceKey={i18nKey("cancel")} /></Button>
+        {#if allowBack}
+            <Button
+                disabled={confirming}
+                tiny={$mobileWidth}
+                small={!$mobileWidth}
+                secondary
+                onClick={onFeatures}
+                ><Translatable resourceKey={i18nKey("upgrade.features")} /></Button>
+        {/if}
+        <Button
+            small={!$mobileWidth}
+            disabled={confirming || insufficientFunds}
+            loading={confirming || refreshingBalance}
+            onClick={confirm}
+            tiny={$mobileWidth}><Translatable resourceKey={i18nKey("upgrade.confirm")} /></Button>
+    {/if}
+</Footer>
+
+<style lang="scss">
+    .body {
+        min-height: 390px;
+        transition: height 200ms ease-in-out;
+
+        &.padded {
+            padding: $sp4 $sp5;
+            @include mobile() {
+                padding: $sp3 $sp4;
+            }
+        }
+
+        &.is-confirmed {
+            height: 240px;
+        }
+
+        &.confirming {
+            height: 390px;
+        }
+    }
+
+    .option {
+        border: 1px solid var(--bd);
+        padding: $sp3 $sp4;
+        border-radius: $sp3;
+        margin-bottom: $sp4;
+        cursor: pointer;
+        transition: background-color 250ms ease-in-out;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        &.selected {
+            background-color: var(--primary);
+            color: #ffffff;
+
+            &.insufficientFunds {
+                background-color: var(--txt-light);
+            }
+        }
+
+        &.disabled {
+            color: var(--txt-light);
+            cursor: default;
+        }
+
+        @include mobile() {
+            text-align: center;
+            padding: 10px $sp4;
+            margin-bottom: $sp3;
+        }
+    }
+
+    .cols {
+        display: flex;
+        gap: $sp4;
+
+        .left,
+        .right {
+            flex: 1;
+        }
+    }
+
+    .duration {
+        @include font-size(fs-70);
+        text-transform: uppercase;
+        margin-bottom: $sp2;
+    }
+
+    .price {
+        @include font(bold, normal, fs-120);
+    }
+
+    .autorenew {
+        margin-bottom: $sp4;
+    }
+
+    .smallprint {
+        @include font(light, normal, fs-60);
+        color: var(--txt-light);
+        margin-bottom: $sp3;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/upgrade/Upgrade.svelte b/frontend/app/src/desktop/features/upgrade/Upgrade.svelte
new file mode 100644
index 0000000000..3b94cef171
--- /dev/null
+++ b/frontend/app/src/desktop/features/upgrade/Upgrade.svelte
@@ -0,0 +1,137 @@
+<script lang="ts">
+    import {
+        LEDGER_CANISTER_CHAT,
+        LEDGER_CANISTER_ICP,
+        canExtendDiamondStore,
+        cryptoBalanceStore,
+        cryptoLookup,
+        isDiamondStore,
+    } from "@client";
+    import { onMount } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Diamond from "@src/desktop/ui/icons/Diamond.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import BalanceWithRefresh from "@src/desktop/shared/BalanceWithRefresh.svelte";
+    import CryptoSelector from "@src/desktop/shared/CryptoSelector.svelte";
+    import Features from "./Features.svelte";
+    import Payment from "./Payment.svelte";
+
+    interface Props {
+        onCancel: () => void;
+    }
+
+    let { onCancel }: Props = $props();
+
+    let ledger: string = $state(
+        import.meta.env.OC_NODE_ENV === "production" ? LEDGER_CANISTER_CHAT : LEDGER_CANISTER_ICP,
+    );
+
+    let step: "features" | "payment" = $state("features");
+    let error: string | undefined = $state();
+    let confirming = $state(false);
+    let confirmed = $state(false);
+    let refreshingBalance = $state(false);
+
+    let tokenDetails = $derived({
+        symbol: $cryptoLookup.get(ledger),
+        balance: $cryptoBalanceStore.get(ledger) ?? BigInt(0),
+    });
+
+    function onBalanceRefreshed() {
+        error = undefined;
+    }
+
+    function onBalanceRefreshError(err: string) {
+        error = err;
+    }
+
+    onMount(() => {
+        if ($canExtendDiamondStore) {
+            step = "payment";
+        }
+    });
+</script>
+
+<Overlay>
+    <ModalContent overflows={step === "features"} hideFooter fill>
+        {#snippet header()}
+            <div class="header">
+                {#if !confirming && !confirmed}
+                    <div class="title">
+                        <Diamond size={"1em"} show={"blue"} />
+                        {#if step === "features"}
+                            {#if $canExtendDiamondStore}
+                                <Translatable resourceKey={i18nKey("upgrade.extend")} />
+                            {:else if $isDiamondStore}
+                                <Translatable resourceKey={i18nKey("upgrade.benefits")} />
+                            {:else}
+                                <Translatable resourceKey={i18nKey("upgrade.featuresTitle")} />
+                            {/if}
+                        {:else if step === "payment"}
+                            <div>
+                                <CryptoSelector
+                                    bind:ledger
+                                    filter={(t) =>
+                                        ["chat", "icp"].includes(t.symbol.toLowerCase())} />
+                            </div>
+                        {/if}
+                    </div>
+                    {#if step === "payment"}
+                        <div class="balance">
+                            <BalanceWithRefresh
+                                {ledger}
+                                value={tokenDetails.balance}
+                                bind:refreshing={refreshingBalance}
+                                onRefreshed={onBalanceRefreshed}
+                                onError={onBalanceRefreshError} />
+                        </div>
+                    {/if}
+                {/if}
+            </div>
+        {/snippet}
+        {#snippet body()}
+            <div class="body">
+                {#if step === "features"}
+                    <Features
+                        canExtend={$canExtendDiamondStore}
+                        isDiamond={$isDiamondStore}
+                        {onCancel}
+                        onUpgrade={() => (step = "payment")} />
+                {/if}
+                {#if step === "payment"}
+                    <Payment
+                        bind:confirmed
+                        bind:confirming
+                        bind:refreshingBalance
+                        {ledger}
+                        {error}
+                        accountBalance={Number(tokenDetails.balance)}
+                        {onCancel}
+                        onFeatures={() => (step = "features")} />
+                {/if}
+            </div>
+        {/snippet}
+    </ModalContent>
+</Overlay>
+
+<style lang="scss">
+    .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .body {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
+
+    .title {
+        display: flex;
+        align-items: center;
+        gap: $sp3;
+    }
+</style>
diff --git a/frontend/app/src/desktop/features/wallet/PinNumberModal.svelte b/frontend/app/src/desktop/features/wallet/PinNumberModal.svelte
new file mode 100644
index 0000000000..b8acd98cdd
--- /dev/null
+++ b/frontend/app/src/desktop/features/wallet/PinNumberModal.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+    import { mobileWidth } from "@client";
+    import { i18nKey } from "@src/i18n/i18n";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Pincode from "@src/desktop/features/pincode/Pincode.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import ForgotPinLabel from "@src/desktop/shared/ForgotPinLabel.svelte";
+
+    interface Props {
+        onComplete: (pin: string) => void;
+        onClose: () => void;
+        onForgot: () => void;
+    }
+
+    let { onComplete, onClose, onForgot }: Props = $props();
+
+    function onPinComplete(_: string[], value: string) {
+        onComplete(value);
+    }
+</script>
+
+<ModalContent closeIcon hideFooter fitToContent={!$mobileWidth} fixedWidth={false} {onClose}>
+    {#snippet header()}
+        <Translatable resourceKey={i18nKey("pinNumber.enterPin")} />
+    {/snippet}
+    {#snippet body()}
+        <div class="body">
+            <Pincode type="numeric" length={6} onComplete={onPinComplete} />
+            <ForgotPinLabel {onForgot} />
+        </div>
+    {/snippet}
+</ModalContent>
+
+<style lang="scss">
+    .body {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: $sp4;
+        max-width: 500px;
+    }
+</style>
diff --git a/frontend/app/src/desktop/shared/AccountInfo.svelte b/frontend/app/src/desktop/shared/AccountInfo.svelte
new file mode 100644
index 0000000000..4cfff6946e
--- /dev/null
+++ b/frontend/app/src/desktop/shared/AccountInfo.svelte
@@ -0,0 +1,217 @@
+<script lang="ts">
+    import {
+        BTC_SYMBOL,
+        CKBTC_SYMBOL,
+        cryptoLookup,
+        currentUserIdStore,
+        currentUserStore,
+        ICP_SYMBOL,
+        Lazy,
+        type OneSecTransferFees,
+        OpenChat,
+    } from "@client";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { _ } from "svelte-i18n";
+    import { getContext } from "svelte";
+    import QRCode from "./QRCode.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import TruncatedAccount from "./TruncatedAccount.svelte";
+    import NetworkSelector from "./NetworkSelector.svelte";
+    import { rtlStore } from "@src/stores/rtl";
+
+    interface Props {
+        qrSize?: "default" | "smaller" | "larger";
+        ledger: string;
+        centered?: boolean;
+        border?: boolean;
+        fullWidthOnMobile?: boolean;
+    }
+
+    let {
+        qrSize = "default",
+        ledger,
+        centered = false,
+        border = true,
+        fullWidthOnMobile = false,
+    }: Props = $props();
+
+    const client = getContext<OpenChat>("client");
+
+    let tokenDetails = $derived($cryptoLookup.get(ledger)!);
+    let selectedNetwork = $state<string>();
+    let isBtc = $derived(tokenDetails.symbol === BTC_SYMBOL);
+    let isBtcNetwork = $derived(selectedNetwork === BTC_SYMBOL);
+    let oneSecEnabled = $derived(tokenDetails.oneSecEnabled && tokenDetails.evmContractAddresses.length > 0);
+    let isOneSecNetwork = $derived(oneSecEnabled && selectedNetwork !== ICP_SYMBOL);
+    let networks = $derived.by(() => {
+        if (isBtc) {
+            return [BTC_SYMBOL, CKBTC_SYMBOL];
+        } else if (oneSecEnabled) {
+            return client.oneSecGetNetworks(tokenDetails.symbol);
+        } else {
+            return [];
+        }
+    });
+    let btcAddress = $state<string>();
+    let oneSecAddress = $state<string>();
+
+    // Whenever the networks list changes, autoselect the first one
+    $effect(() => {
+        selectedNetwork = networks[0];
+    });
+
+    let account = $derived.by(() => {
+        if (tokenDetails.symbol === ICP_SYMBOL) {
+            return $currentUserStore.cryptoAccount;
+        } else if (isBtcNetwork) {
+            return btcAddress;
+        } else if (isOneSecNetwork) {
+            return oneSecAddress;
+        } else {
+            return $currentUserIdStore;
+        }
+    });
+
+    let error = $state();
+    $effect(() => {
+        if (account === undefined) {
+            if (isBtcNetwork) {
+                client.getBtcAddress().then((addr) => btcAddress = addr).catch((e) => error = e);
+            } else if (isOneSecNetwork) {
+                client.getOneSecAddress().then((addr) => oneSecAddress = addr).catch(e => error = e);
+            }
+        }
+    });
+
+    let tokenName = $derived.by(() => {
+        if (isBtc) return selectedNetwork;
+        if (selectedNetwork !== undefined) {
+            return $rtlStore
+                ? `(${selectedNetwork}) ${tokenDetails.symbol}`
+                : `${tokenDetails.symbol} (${selectedNetwork})`;
+        }
+        return tokenDetails.symbol;
+    });
+
+    const btcDepositFeePromise = new Lazy(() => client.getCkbtcMinterDepositInfo()
+        .then((depositInfo) => `~${client.formatTokens(depositInfo.depositFee, 8)}`));
+
+    const oneSecFeesPromise = new Lazy(() => client.oneSecGetTransferFees()
+        // Filter to where source token equals destination token since we're dealing with cross-chain deposits
+        .then((fees) => oneSecFees = fees.filter((f) => f.sourceToken === f.destinationToken)));
+
+    let oneSecFees = $state<OneSecTransferFees[]>();
+    let oneSecFeesForToken = $derived.by(() => {
+        if (!isOneSecNetwork || oneSecFees === undefined) return undefined;
+        return oneSecFees.filter((f) => f.sourceToken === tokenDetails.symbol);
+    });
+    let oneSecProtocolFee = $derived.by(() => {
+        if (oneSecFeesForToken === undefined) return undefined;
+        return oneSecFeesForToken.find((f) => f.sourceChain === selectedNetwork && f.destinationChain === ICP_SYMBOL)?.protocolFeePercent;
+    });
+    let oneSecTransferFee = $derived.by(() => {
+        if (oneSecFeesForToken === undefined) return undefined;
+        return oneSecFeesForToken.find((f) => f.sourceChain === ICP_SYMBOL && f.destinationChain === selectedNetwork)?.latestTransferFee;
+    });
+    let oneSecTotalFee = $derived.by(() => {
+        if (oneSecProtocolFee === undefined || oneSecTransferFee === undefined) return undefined;
+        return `${oneSecProtocolFee}% + ~${client.formatTokens(oneSecTransferFee, tokenDetails.decimals)}`;
+    });
+</script>
+
+<div class="account-info">
+    {#if networks.length > 0 && selectedNetwork !== undefined}
+        <NetworkSelector {networks} bind:selectedNetwork={selectedNetwork} />
+    {/if}
+
+    {#if account === undefined}
+        <div class="generating">
+            {#if error !== undefined}
+                <div class="error-icon"></div>
+            {:else}
+                <div class="spinner"></div>
+            {/if}
+        </div>
+    {:else}
+        <QRCode {fullWidthOnMobile} text={account} size={qrSize} logo={tokenDetails.logo} {border} />
+    {/if}
+    <p class="your-account" class:centered>
+        <Translatable resourceKey={i18nKey("tokenTransfer.yourAccount", { token: tokenName })} />
+    </p>
+    {#if account === undefined}
+        {#if error !== undefined}
+            <span class="error-label">{$_("cryptoAccount.failedToGenerateAddress")}</span>
+        {:else}
+            <span class="label">{$_("generating")}</span>
+        {/if}
+    {:else}
+        <TruncatedAccount {centered} {account} />
+    {/if}
+
+    {#if isBtcNetwork}
+        {#await btcDepositFeePromise.get()}
+            <span class="label">{$_("cryptoAccount.fetchingDepositFee")}</span>
+        {:then amount}
+            <span class="label">{$_("cryptoAccount.networkFee", { values: { amount, token: tokenDetails.symbol }})}</span>
+        {:catch}
+            <span class="error-label">{$_("cryptoAccount.failedToFetchDepositFee")}</span>
+        {/await}
+    {:else if isOneSecNetwork}
+        {#await oneSecFeesPromise.get()}
+            <span class="label">{$_("cryptoAccount.fetchingDepositFee")}</span>
+        {:then}
+            {#if oneSecTotalFee !== undefined}
+                <span class="label">{$_("cryptoAccount.networkFee", { values: { amount: oneSecTotalFee, token: tokenDetails.symbol }})}</span>
+            {:else}
+                <span class="error-label">{$_("cryptoAccount.failedToFetchDepositFee")}</span>
+            {/if}
+        {:catch}
+            <span class="error-label">{$_("cryptoAccount.failedToFetchDepositFee")}</span>
+        {/await}
+    {/if}
+</div>
+
+<style lang="scss">
+    .centered {
+        text-align: center;
+    }
+
+    .account-info {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: $sp4;
+        align-items: center;
+    }
+
+    .your-account {
+        margin-top: $sp4;
+    }
+
+    .generating {
+        height: 298px;
+        width: 298px;
+        border: 1px solid var(--bd);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .spinner {
+        @include loading-spinner(4rem, 2rem, var(--button-spinner), "/assets/spinner.svg");
+        flex: 0 0 toRem(24);
+    }
+
+    .label {
+        color: var(--unread-mute-txt);
+    }
+
+    .error-icon {
+        background-image: url("/assets/dead-bot.svg");
+        height: 4rem;
+        width: 4rem;
+    }
+
+    .error-label {
+        color: var(--error);
+    }
+</style>
diff --git a/frontend/app/src/components/AlertBox.svelte b/frontend/app/src/desktop/shared/AlertBox.svelte
similarity index 100%
rename from frontend/app/src/components/AlertBox.svelte
rename to frontend/app/src/desktop/shared/AlertBox.svelte
diff --git a/frontend/app/src/desktop/shared/AreYouSure.svelte b/frontend/app/src/desktop/shared/AreYouSure.svelte
new file mode 100644
index 0000000000..d6bfa0f26a
--- /dev/null
+++ b/frontend/app/src/desktop/shared/AreYouSure.svelte
@@ -0,0 +1,105 @@
+<script lang="ts">
+    import type { ResourceKey } from "@client";
+    import type { Snippet } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import Input from "./Input.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    interface Props {
+        message?: ResourceKey | undefined;
+        action: (yes: boolean) => Promise<void>;
+        doubleCheck?: { challenge: ResourceKey; response: ResourceKey } | undefined;
+        title?: ResourceKey | undefined;
+        yesLabel?: ResourceKey | undefined;
+        noLabel?: ResourceKey | undefined;
+        children?: Snippet;
+    }
+
+    let {
+        message,
+        action,
+        doubleCheck,
+        title = i18nKey("areYouSure"),
+        yesLabel = i18nKey("yesPlease"),
+        noLabel = i18nKey("noThanks"),
+        children,
+    }: Props = $props();
+
+    let inProgress = $state(false);
+    let response = $state("");
+
+    let canConfirm = $derived(
+        !inProgress &&
+            (doubleCheck === undefined || response === interpolate($_, doubleCheck.response)),
+    );
+
+    function onClick(yes: boolean) {
+        if (yes) {
+            inProgress = true;
+        }
+
+        action(yes).finally(() => {
+            inProgress = false;
+        });
+    }
+</script>
+
+<Overlay>
+    <ModalContent hideBody={message === undefined && children === undefined}>
+        {#snippet header()}
+            {#if title !== undefined}
+                <Translatable resourceKey={title} />
+            {/if}
+        {/snippet}
+        {#snippet body()}
+            {@render children?.()}
+            {#if message !== undefined}
+                <Markdown inline={false} text={interpolate($_, message)} />
+
+                {#if doubleCheck !== undefined}
+                    <p class="challenge">
+                        <Markdown text={interpolate($_, doubleCheck.challenge)} />
+                    </p>
+                    <Input
+                        invalid={false}
+                        disabled={inProgress}
+                        autofocus
+                        bind:value={response}
+                        minlength={0}
+                        maxlength={200}
+                        countdown={false} />
+                {/if}
+            {/if}
+        {/snippet}
+        {#snippet footer()}
+            <ButtonGroup>
+                <Button disabled={inProgress} small onClick={() => onClick(false)} secondary>
+                    {#if noLabel !== undefined}
+                        <Translatable resourceKey={noLabel} />
+                    {/if}
+                </Button>
+                <Button
+                    loading={inProgress}
+                    disabled={!canConfirm}
+                    small
+                    onClick={() => onClick(true)}>
+                    {#if yesLabel !== undefined}
+                        <Translatable resourceKey={yesLabel} />
+                    {/if}
+                </Button>
+            </ButtonGroup>
+        {/snippet}
+    </ModalContent>
+</Overlay>
+
+<style lang="scss">
+    .challenge {
+        margin: $sp3 0;
+    }
+</style>
diff --git a/frontend/app/src/components/Avatar.svelte b/frontend/app/src/desktop/shared/Avatar.svelte
similarity index 96%
rename from frontend/app/src/components/Avatar.svelte
rename to frontend/app/src/desktop/shared/Avatar.svelte
index adc7d9a72f..aba7894e00 100644
--- a/frontend/app/src/components/Avatar.svelte
+++ b/frontend/app/src/desktop/shared/Avatar.svelte
@@ -2,9 +2,9 @@
     import { trackedEffect } from "@src/utils/effects.svelte";
     import { AvatarSize, OpenChat, UserStatus } from "@client";
     import { getContext } from "svelte";
-    import { rtlStore } from "../stores/rtl";
-    import { now } from "../stores/time";
-    import LighteningBolt from "./home/nav/LighteningBolt.svelte";
+    import { rtlStore } from "@src/stores/rtl";
+    import { now } from "@src/stores/time";
+    import LighteningBolt from "@src/desktop/features/nav/LighteningBolt.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/components/home/BalanceWithRefresh.svelte b/frontend/app/src/desktop/shared/BalanceWithRefresh.svelte
similarity index 98%
rename from frontend/app/src/components/home/BalanceWithRefresh.svelte
rename to frontend/app/src/desktop/shared/BalanceWithRefresh.svelte
index 5703816d6c..3ff7447881 100644
--- a/frontend/app/src/components/home/BalanceWithRefresh.svelte
+++ b/frontend/app/src/desktop/shared/BalanceWithRefresh.svelte
@@ -5,7 +5,7 @@
     import { _ } from "svelte-i18n";
     import Plus from "svelte-material-icons/Plus.svelte";
     import Refresh from "svelte-material-icons/Refresh.svelte";
-    import Translatable from "../Translatable.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/desktop/shared/Checkbox.svelte b/frontend/app/src/desktop/shared/Checkbox.svelte
new file mode 100644
index 0000000000..c723e4baa3
--- /dev/null
+++ b/frontend/app/src/desktop/shared/Checkbox.svelte
@@ -0,0 +1,193 @@
+<script lang="ts">
+    import type { ResourceKey } from "@client";
+    import { rtlStore } from "@src/stores/rtl";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import type { Snippet } from "svelte";
+
+    interface Props {
+        checked?: boolean;
+        disabled?: boolean;
+        waiting?: boolean;
+        id: string;
+        label: ResourceKey | undefined;
+        toggle?: boolean;
+        small?: boolean; // only applies to toggles
+        align?: "center" | "start";
+        children?: Snippet;
+        onChange?: () => void;
+    }
+
+    let {
+        checked = $bindable(false),
+        disabled = false,
+        waiting = false,
+        id,
+        label,
+        toggle = false,
+        small = false,
+        align = "center",
+        children,
+        onChange,
+    }: Props = $props();
+</script>
+
+<div
+    class="checkbox"
+    class:toggle
+    class:waiting
+    class:disabled
+    class:rtl={$rtlStore}
+    class:align-start={align === "start"}>
+    <input {id} type="checkbox" bind:checked {disabled} onchange={onChange} />
+    <label class:small for={id}>
+        {#if children}{@render children()}{:else if label !== undefined}
+            <Translatable resourceKey={label} />
+        {/if}
+    </label>
+</div>
+
+<style lang="scss">
+    $size: 32px;
+    $size-small: 21px;
+
+    :root {
+        --color: var(--input-accent);
+    }
+
+    // todo - this will have rtl issues at the moment
+
+    input {
+        margin: 0;
+        margin-right: toRem(12);
+        width: 1.5em;
+        height: 1.5rem;
+        accent-color: var(--color);
+        appearance: none;
+        background-color: transparent;
+        margin: 0;
+        cursor: pointer;
+
+        font: inherit;
+        color: currentColor;
+        width: 1.15em;
+        height: 1.15em;
+        border: 1px solid currentColor;
+        transform: translateY(-0.075em);
+
+        display: grid;
+        place-content: center;
+    }
+
+    input[type="checkbox"]::before {
+        content: "";
+        width: 0.65em;
+        height: 0.65em;
+        transform: scale(0);
+        transition: 120ms transform ease-in-out;
+        box-shadow: inset 1em 1em var(--color);
+        transform-origin: bottom left;
+        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+    }
+
+    input[type="checkbox"]:checked::before {
+        transform: scale(1);
+    }
+
+    input[type="checkbox"]:disabled {
+        --color: var(--txt-light);
+        color: var(--txt-light);
+        cursor: not-allowed;
+    }
+
+    .checkbox {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        gap: $sp4;
+
+        &.align-start {
+            align-items: flex-start;
+
+            input {
+                margin-top: 3px;
+            }
+        }
+
+        &.rtl input {
+            margin-left: toRem(12);
+            margin-right: unset;
+        }
+    }
+
+    label {
+        flex: 1;
+        user-select: none;
+        cursor: pointer;
+    }
+
+    .toggle {
+        input {
+            display: none;
+        }
+
+        label {
+            transition: background-color 200ms ease-in-out;
+            cursor: pointer;
+            text-indent: -9999px;
+            width: 80px;
+            height: 36px;
+            background: var(--toggle-bg);
+            display: block;
+            border-radius: var(--toggle-rd-track);
+            position: relative;
+
+            &.small {
+                width: 50px;
+                height: 25px;
+            }
+        }
+
+        label:after {
+            content: "";
+            position: absolute;
+            top: 2px;
+            left: 2px;
+            width: $size !important;
+            height: $size;
+            background: #fff;
+            border-radius: var(--toggle-rd-thumb);
+            transition: 150ms ease-in-out;
+        }
+
+        label.small:after {
+            width: $size-small !important;
+            height: $size-small;
+        }
+
+        input:checked + label {
+            background-color: var(--input-accent);
+        }
+
+        input:checked + label:after {
+            left: calc(100% - 2px);
+            transform: translateX(-100%);
+        }
+
+        label:active:after {
+            width: 60px;
+        }
+    }
+
+    .toggle {
+        &.disabled {
+            label {
+                cursor: default;
+            }
+        }
+        &.waiting {
+            label {
+                cursor: wait;
+            }
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/shared/CollapsibleCard.svelte b/frontend/app/src/desktop/shared/CollapsibleCard.svelte
new file mode 100644
index 0000000000..23f3d3b2a0
--- /dev/null
+++ b/frontend/app/src/desktop/shared/CollapsibleCard.svelte
@@ -0,0 +1,135 @@
+<script lang="ts">
+    import { rtlStore } from "@src/stores/rtl";
+    import { slide } from "svelte/transition";
+    import { expoInOut } from "svelte/easing";
+
+    import { type Snippet } from "svelte";
+    import Arrow from "@src/ui/Arrow.svelte";
+    import type { ResourceKey } from "@client";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    interface Props {
+        headerText?: ResourceKey | undefined;
+        open?: boolean;
+        first?: boolean;
+        transition?: boolean;
+        fill?: boolean;
+        titleSlot?: Snippet;
+        children?: Snippet;
+        onOpened?: () => void;
+        onClosed?: () => void;
+        onToggle?: () => void;
+    }
+
+    let {
+        headerText = undefined,
+        open = $bindable(true),
+        first = false,
+        transition = true,
+        fill = false,
+        titleSlot,
+        children,
+        onClosed,
+        onOpened,
+        onToggle,
+    }: Props = $props();
+
+    function toggle() {
+        open = !open;
+        onToggle?.();
+        if (open) {
+            onOpened?.();
+        } else {
+            onClosed?.();
+        }
+    }
+</script>
+
+<div class="card" class:first class:open>
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="header" class:open onclick={toggle} class:fill>
+        {#if titleSlot}{@render titleSlot()}{:else if headerText !== undefined}
+            <Translatable resourceKey={headerText} />
+        {/if}
+
+        <div class="arrow" class:rtl={$rtlStore}>
+            <Arrow
+                size={16}
+                rotate={open ? -45 : 45}
+                color={open
+                    ? "var(--collapsible-open-header-arrow)"
+                    : "var(--collapsible-closed-header-txt)"} />
+        </div>
+    </div>
+    {#if transition}
+        {#if open}
+            <div
+                transition:slide|local={{ duration: 200, easing: expoInOut }}
+                class="body"
+                class:open>
+                {@render children?.()}
+            </div>
+        {/if}
+    {:else}
+        <div class="body static" class:open>
+            {@render children?.()}
+        </div>
+    {/if}
+</div>
+
+<style lang="scss">
+    .card {
+        border-bottom: var(--bw) solid var(--bd);
+
+        &.first {
+            border-top: var(--bw) solid var(--bd);
+        }
+    }
+
+    .header {
+        padding: toRem(20) 0;
+        display: flex;
+        cursor: pointer;
+        justify-content: space-between;
+        align-items: center;
+        @include font(bold, normal, fs-100);
+        color: var(--collapsible-closed-header-txt);
+
+        @include mobile() {
+            padding: toRem(18) 0;
+        }
+
+        &.open {
+            color: var(--txt);
+        }
+
+        &.fill {
+            padding-left: $sp4;
+            padding-right: $sp4;
+        }
+    }
+
+    .arrow {
+        flex: 0 0 20px;
+        justify-self: flex-end;
+        text-align: right;
+    }
+
+    .body {
+        padding-bottom: $sp4;
+
+        @include mobile() {
+            padding-bottom: $sp3;
+        }
+
+        &.static {
+            display: none;
+            pointer-events: none;
+            &.open {
+                pointer-events: all;
+                display: block;
+            }
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/shared/CryptoSelector.svelte b/frontend/app/src/desktop/shared/CryptoSelector.svelte
new file mode 100644
index 0000000000..b2019e6bce
--- /dev/null
+++ b/frontend/app/src/desktop/shared/CryptoSelector.svelte
@@ -0,0 +1,181 @@
+<script lang="ts">
+    import { i18nKey } from "@src/i18n/i18n";
+    import type { EnhancedTokenDetails } from "@client";
+    import { cryptoLookup, cryptoTokensSorted, iconSize } from "@client";
+    import ChevronDown from "svelte-material-icons/ChevronDown.svelte";
+    import Menu from "./Menu.svelte";
+    import MenuIcon from "./MenuIcon.svelte";
+    import MenuItem from "./MenuItem.svelte";
+    import Search from "./Search.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    interface Props {
+        ledger: string | undefined;
+        filter?: (details: EnhancedTokenDetails) => boolean;
+        onSelect?: (ledger: string, urlFormat: string) => void;
+    }
+
+    let { ledger = $bindable(), filter = (_) => true, onSelect }: Props = $props();
+
+    let selecting = false;
+    let ignoreClick = false;
+
+    let allAvailableTokens = $derived($cryptoTokensSorted.filter((t) => t.enabled && filter(t)));
+    let filteredTokens = $derived(allAvailableTokens.filter(matchesSearch));
+
+    $effect(() => {
+        if (ledger === undefined && allAvailableTokens.length > 0) {
+            ledger = allAvailableTokens[0].ledger;
+        }
+    });
+
+    function matchesSearch(details: EnhancedTokenDetails): boolean {
+        return (
+            searchTerm === "" ||
+            details.name.toLowerCase().includes(searchTermLower) ||
+            details.symbol.toLowerCase().includes(searchTermLower)
+        );
+    }
+
+    function selectToken(selectedLedger: string, urlFormat: string) {
+        selecting = false;
+        ledger = selectedLedger;
+        onSelect?.(ledger, urlFormat);
+    }
+
+    function onKeyDown(ev: KeyboardEvent) {
+        if (ev.key === "Escape") {
+            selecting = false;
+        }
+    }
+
+    function windowClick() {
+        if (selecting && !ignoreClick) {
+            selecting = false;
+        }
+        ignoreClick = false;
+    }
+
+    let searching = $state(false);
+    let searchTerm = $state("");
+    let searchTermLower = $derived(searchTerm.toLowerCase());
+    function searchClicked(e?: Event) {
+        e?.preventDefault();
+        e?.stopPropagation();
+    }
+</script>
+
+{#if allAvailableTokens.length > 0 && ledger !== undefined}
+    <MenuIcon centered position={"bottom"} align={"start"}>
+        {#snippet menuIcon()}
+            <div class="token-selector-trigger">
+                <div class="symbol">
+                    {$cryptoLookup.get(ledger ?? "")?.symbol}
+                </div>
+                <ChevronDown viewBox={"0 0 24 24"} size={$iconSize} color={"var(--icon-txt)"} />
+            </div>
+        {/snippet}
+
+        {#snippet menuItems()}
+            <div>
+                <!-- svelte-ignore a11y_click_events_have_key_events -->
+                <!-- svelte-ignore a11y_no_static_element_interactions -->
+                <div onclick={searchClicked} class="search">
+                    <Search
+                        placeholder={i18nKey("search")}
+                        fill
+                        bind:searching
+                        bind:searchTerm></Search>
+                </div>
+                <Menu cls="crypto_selector" centered>
+                    {#if filteredTokens.length === 0}
+                        <div class="no_match">
+                            <Translatable resourceKey={i18nKey("noMatchingTokens")}></Translatable>
+                        </div>
+                    {:else}
+                        {#each filteredTokens as token}
+                            <MenuItem onclick={() => selectToken(token.ledger, token.urlFormat)}>
+                                {#snippet icon()}
+                                    <img alt={token.symbol} class="token-icon" src={token.logo} />
+                                {/snippet}
+                                {#snippet text()}
+                                    <div class="token-text">
+                                        <div class="name">
+                                            {token.name}
+                                        </div>
+                                        <div class="symbol">
+                                            {token.symbol}
+                                        </div>
+                                    </div>
+                                {/snippet}
+                            </MenuItem>
+                        {/each}
+                    {/if}
+                </Menu>
+            </div>
+        {/snippet}
+    </MenuIcon>
+{/if}
+
+<svelte:window onclick={windowClick} onkeydown={onKeyDown} />
+
+<style lang="scss">
+    :global(.token-selector-trigger .menu-icon.open) {
+        transform: rotate(180deg);
+    }
+
+    :global(.token-selector-trigger .menu-icon) {
+        transition: transform 250ms ease-in-out;
+        transform-origin: 50%;
+    }
+
+    :global(.crypto_selector.menu) {
+        border-top: none;
+        border-radius: 0 0 var(--menu-rd) var(--menu-rd);
+        max-height: calc(var(--override-height, 80vh) - 67px);
+    }
+
+    .token-selector-trigger {
+        display: flex;
+        cursor: pointer;
+        align-items: center;
+        gap: $sp1;
+    }
+
+    .token-icon {
+        background-size: contain;
+        height: $sp5;
+        width: $sp5;
+        border-radius: 50%;
+        background-repeat: no-repeat;
+        background-position: top;
+    }
+
+    .token-text {
+        display: flex;
+        align-items: center;
+        gap: $sp3;
+    }
+
+    .symbol {
+        color: var(--primary);
+    }
+
+    .no_match {
+        padding: $sp3 $sp4;
+        color: var(--txt-light);
+    }
+
+    .search {
+        background-color: var(--menu-bg);
+        border: var(--bw) solid var(--menu-bd);
+        border-radius: var(--menu-rd) var(--menu-rd) 0 0;
+        border-bottom: none;
+        padding: $sp3;
+        width: toRem(250);
+
+        @include mobile() {
+            width: 70vw;
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/shared/DateInput.svelte b/frontend/app/src/desktop/shared/DateInput.svelte
new file mode 100644
index 0000000000..1129af91a4
--- /dev/null
+++ b/frontend/app/src/desktop/shared/DateInput.svelte
@@ -0,0 +1,186 @@
+<script module lang="ts">
+    export interface Props {
+        align?: string;
+        disabled?: boolean;
+        endDate?: string | Date;
+        format?: string;
+        futureOnly?: boolean;
+        inputId?: string;
+        inputClasses?: string;
+        mode?: "date" | "time" | "datetime";
+        pickerOnly?: boolean;
+        placeholder?: ResourceKey | undefined;
+        required?: boolean;
+        startDate?: string | Date;
+        value?: bigint | null | undefined;
+        onchange?: (val: bigint | null) => void;
+    }
+</script>
+
+<script lang="ts">
+    // TODO i18n localisation for the date picker!
+
+    import type { ResourceKey } from "@client";
+    import { onMount } from "svelte";
+    import { _ } from "svelte-i18n";
+    import Information from "svelte-material-icons/Information.svelte";
+    import SveltyPicker from "svelty-picker";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import Tooltip from "@src/desktop/ui/tooltip/Tooltip.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    let {
+        align = "left",
+        disabled = false,
+        endDate = undefined,
+        format = "dd M yyyy, hh:ii",
+        futureOnly = false,
+        inputId = undefined,
+        inputClasses = "",
+        mode = "datetime",
+        pickerOnly = false,
+        placeholder = undefined,
+        required = false,
+        startDate = undefined,
+        value = undefined,
+        onchange = undefined,
+    }: Props = $props();
+
+    let dateIsValid = $state(true);
+
+    // Initialise local date from the provided value on component mount
+    let localDate: string | undefined = $state(undefined);
+    onMount(() => {
+        if (typeof value === "number") {
+            localDate = new Date(Number(value)).toISOString();
+        }
+    });
+</script>
+
+<div class={`input-wrapper date-time ${align} ${!dateIsValid ? "error" : ""}`}>
+    <SveltyPicker
+        value={localDate}
+        {disabled}
+        {endDate}
+        {format}
+        {inputId}
+        inputClasses={`date-time ${inputClasses}`}
+        {mode}
+        {pickerOnly}
+        placeholder={placeholder !== undefined ? interpolate($_, placeholder) : ""}
+        {required}
+        {startDate}
+        onDateChange={({ dateValue }) => {
+            if (futureOnly && dateValue instanceof Date && dateValue < new Date()) {
+                dateIsValid = false;
+            } else {
+                dateIsValid = true;
+            }
+            dateValue instanceof Date ? onchange?.(BigInt(dateValue.getTime())) : onchange?.(null);
+        }} />
+    {#if !dateIsValid}
+        <div class="error-icon">
+            <Tooltip position={"top"} align={"middle"}>
+                <div class="param" class:required>
+                    <Information width="1.25rem" height="1.25rem" />
+                </div>
+                {#snippet popupTemplate()}
+                    <Translatable resourceKey={i18nKey("mustBeFutureDateError")} />
+                {/snippet}
+            </Tooltip>
+        </div>
+    {/if}
+</div>
+
+<style lang="scss">
+    .input-wrapper {
+        position: relative;
+        margin-bottom: $sp3;
+
+        @include mobile() {
+            margin-bottom: $sp3;
+        }
+
+        :global(.sdt-component-wrap),
+        :global(.sdt-input-wrap) {
+            width: 100%;
+        }
+
+        :global(.sdt-tick) {
+            background-color: transparent;
+        }
+
+        :global(input[name="date_input"]) {
+            @include input();
+            width: 100%;
+
+            &::placeholder {
+                color: var(--placeholder);
+            }
+        }
+
+        &.error {
+            :global(input[name="date_input"]) {
+                box-shadow: 0 0 0 1px var(--error);
+            }
+        }
+
+        .error-icon {
+            position: absolute;
+            right: $sp3;
+            width: 1.25rem;
+            height: 1.25rem;
+            top: 50%;
+            transform: translateY(-50%);
+
+            :global(svg > path) {
+                fill: var(--error);
+            }
+        }
+    }
+
+    :global(body) {
+        /* general */
+        --sdt-bg-main: var(--bd);
+        --sdt-shadow-color: var(--bg);
+        --sdt-wrap-shadow: 0 1px 6px var(--sdt-shadow-color); /** wrap shadow settings */
+        --sdt-radius: 4px; /** wrap radius */
+        --sdt-color: var(--txt);
+        --sdt-color-selected: var(--txt); /** selected data(e.g date/time) text color */
+        --sdt-header-color: var(--txt); /** header items color (e.g. text & buttons) */
+        --sdt-header-btn-bg-hover: transparent; /** header items hover background color */
+        --sdt-bg-selected: var(--primary);
+
+        /* date picker */
+        --sdt-table-selected-bg: var(--sdt-bg-selected); /** selected date background color */
+        --sdt-table-disabled-date: var(--unread-mute-txt); /** disabled dates text color */
+        --sdt-table-disabled-date-bg: transparent; /** disabled dates background color */
+        --sdt-table-bg: transparent; /** date picker inner table background color */
+        --sdt-table-data-bg-hover: var(
+            --primary
+        ); /** table selection data hover background color */
+        --sdt-table-today-indicator: var(--primary); /** date picker current day marker color */
+
+        /* action buttons */
+        --sdt-today-bg: var(--reaction-me); /** date picker today button hover background color */
+        --sdt-today-color: var(--txt); /** date picker today button text & border color */
+        --sdt-clear-color: var(--txt-light); /** clear button text & border color */
+        --sdt-clear-bg: transparent; /** clear button background color */
+        --sdt-clear-hover-color: var(--txt); /** clear button hover text color */
+        --sdt-clear-hover-bg: transparent; /** clear button hover background color */
+
+        /* time picker */
+        --sdt-clock-selected-bg: var(--sdt-bg-selected); /** selected time background color */
+        --sdt-clock-bg: var(--input-bg); /** time picker inner circle background color */
+        --sdt-clock-color: var(--txt); /** time picker text color (watch "--sdt-color") */
+        --sdt-clock-color-hover: var(
+            --txt
+        ); /** time picker hover text color (watch "--sdt-color") */
+        --sdt-clock-time-bg: transparent; /** time picker time background color */
+        --sdt-clock-time-bg-hover: var(
+            --primary
+        ); /** time picker time selection hover background color */
+        --sdt-clock-disabled: var(--unread-mute); /** disabled time picker time text color */
+        --sdt-clock-disabled-bg: transparent; /** disabled time picker time background color */
+    }
+</style>
diff --git a/frontend/app/src/components/home/DurationPicker.svelte b/frontend/app/src/desktop/shared/DurationPicker.svelte
similarity index 95%
rename from frontend/app/src/components/home/DurationPicker.svelte
rename to frontend/app/src/desktop/shared/DurationPicker.svelte
index d3e1f2cbbb..17a4325a2a 100644
--- a/frontend/app/src/components/home/DurationPicker.svelte
+++ b/frontend/app/src/desktop/shared/DurationPicker.svelte
@@ -2,9 +2,9 @@
     import type { OpenChat } from "@client";
     import { getContext } from "svelte";
     import { _ } from "svelte-i18n";
-    import { msToDays, msToHours, msToMinutes } from "../../utils/time";
-    import Input from "../Input.svelte";
-    import Select from "../Select.svelte";
+    import { msToDays, msToHours, msToMinutes } from "@src/utils/time";
+    import Input from "./Input.svelte";
+    import Select from "./Select.svelte";
 
     const ONE_MINUTE = 1000 * 60;
     const ONE_HOUR = ONE_MINUTE * 60;
diff --git a/frontend/app/src/desktop/shared/EmailSigninFeedback.svelte b/frontend/app/src/desktop/shared/EmailSigninFeedback.svelte
new file mode 100644
index 0000000000..b5e581efc6
--- /dev/null
+++ b/frontend/app/src/desktop/shared/EmailSigninFeedback.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+    import { iconSize } from "@client";
+    import CopyIcon from "svelte-material-icons/ContentCopy.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    interface Props {
+        polling: boolean;
+        code: string | undefined;
+        onCopy?: (code?: string) => void;
+    }
+
+    let { polling, code, onCopy }: Props = $props();
+</script>
+
+<p>
+    <Translatable
+        resourceKey={i18nKey(!polling ? "loginDialog.generatingLink" : "loginDialog.checkEmail")} />
+
+    {#if polling && code !== undefined}
+        <div class="code-wrapper">
+            <div class="code">
+                {code}
+            </div>
+            <div class="copy" onclick={() => onCopy?.(code)}>
+                <CopyIcon size={$iconSize} color={"var(--icon-txt)"} />
+            </div>
+        </div>
+    {/if}
+</p>
+
+<style lang="scss">
+    .code-wrapper {
+        margin-top: $sp4;
+        display: flex;
+        gap: $sp3;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .code {
+        font-family: Menlo, Monaco, "Courier New", monospace;
+        @include font-size(fs-160);
+    }
+
+    .copy {
+        cursor: pointer;
+        position: relative;
+        top: 2px;
+    }
+</style>
diff --git a/frontend/app/src/components/ErrorMessage.svelte b/frontend/app/src/desktop/shared/ErrorMessage.svelte
similarity index 100%
rename from frontend/app/src/components/ErrorMessage.svelte
rename to frontend/app/src/desktop/shared/ErrorMessage.svelte
diff --git a/frontend/app/src/desktop/shared/FindUser.svelte b/frontend/app/src/desktop/shared/FindUser.svelte
new file mode 100644
index 0000000000..5087646b2a
--- /dev/null
+++ b/frontend/app/src/desktop/shared/FindUser.svelte
@@ -0,0 +1,177 @@
+<script lang="ts">
+    import { iconSize, type UserSummary } from "@client";
+    import { onMount } from "svelte";
+    import { _ } from "svelte-i18n";
+    import Close from "svelte-material-icons/Close.svelte";
+    import Magnify from "svelte-material-icons/Magnify.svelte";
+    import { translatable } from "@src/actions/translatable";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import { Debouncer } from "@src/utils/debouncer";
+    import { trimLeadingAtSymbol } from "@src/utils/user";
+    import Loading from "@src/ui/Loading.svelte";
+    import MatchingUser from "./MatchingUser.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    interface Props {
+        mode: "add" | "edit";
+        enabled?: boolean;
+        userLookup: (searchTerm: string) => Promise<[UserSummary[], UserSummary[]]>;
+        placeholderKey?: string;
+        compact?: boolean;
+        autofocus?: boolean;
+        onSelectUser?: (user: UserSummary) => void;
+    }
+
+    let {
+        mode,
+        enabled = true,
+        userLookup,
+        placeholderKey = "searchForUsername",
+        compact = false,
+        autofocus = true,
+        onSelectUser,
+    }: Props = $props();
+
+    let inp: HTMLInputElement | undefined;
+    let searchTerm: string = $state("");
+    let communityMembers: UserSummary[] = $state([]);
+    let users: UserSummary[] = $state([]);
+    let searching: boolean = $state(false);
+    let hovering = $state(false);
+    const debouncer = new Debouncer(searchUsers, 350);
+
+    onMount(() => {
+        // this focus seems to cause a problem with the animation of the right panel without
+        // this setTimeout. Pretty horrible and who knows if 300 ms will be enough on other machines?
+        if (autofocus) {
+            window.setTimeout(() => inp?.focus(), 300);
+        }
+    });
+
+    /**
+     * This is used both for starting a new direct chat and also for adding a member to a group chat
+     */
+
+    function onSelect(user: UserSummary) {
+        onSelectUser?.(user);
+        searchTerm = "";
+        users = [];
+        inp?.focus();
+    }
+
+    function searchUsers(value: string) {
+        if (value === "") {
+            users = [];
+            return;
+        }
+        searching = true;
+        userLookup(value)
+            .then((p) => {
+                communityMembers = p[0];
+                users = p[1];
+            })
+            .catch((_err) => toastStore.showFailureToast(i18nKey("userSearchFailed")))
+            .finally(() => (searching = false));
+    }
+
+    function onInput() {
+        if (inp) {
+            debouncer.execute(trimLeadingAtSymbol(inp.value));
+        }
+    }
+
+    function clearFilter() {
+        users = [];
+        searchTerm = "";
+    }
+</script>
+
+<div class="search-form" class:add={mode === "add"} class:edit={mode === "edit"}>
+    <span class="icon"><Magnify size={$iconSize} color={"#ccc"} viewBox="-5 -3 24 24" /></span>
+    <input
+        bind:this={inp}
+        bind:value={searchTerm}
+        disabled={!enabled}
+        type="text"
+        oninput={onInput}
+        use:translatable={{ key: i18nKey(placeholderKey) }}
+        placeholder={$_(placeholderKey)} />
+    {#if searching}
+        <span class="loading"></span>
+    {:else if searchTerm !== ""}
+        <span onclick={clearFilter} class="icon close"><Close color={"#ccc"} /></span>
+    {/if}
+</div>
+<div class="results">
+    {#if searching}
+        <Loading />
+    {:else}
+        {#if communityMembers?.length > 0}
+            <div class="sub-heading">
+                <Translatable resourceKey={i18nKey("communityMembers")} />
+            </div>
+            {#each communityMembers as user (user.userId)}
+                <MatchingUser {searchTerm} {user} bind:hovering {onSelect} />
+            {/each}
+        {/if}
+        {#if communityMembers?.length > 0 && users?.length > 0}
+            <div class="sub-heading"><Translatable resourceKey={i18nKey("otherUsers")} /></div>
+        {/if}
+        {#each users as user (user.userId)}
+            <MatchingUser {compact} {searchTerm} {user} bind:hovering {onSelect} />
+        {/each}
+    {/if}
+</div>
+
+<style lang="scss">
+    .search-form {
+        margin: 0 $sp4 $sp4 $sp4;
+        background-color: var(--chatSearch-bg);
+        display: flex;
+        align-items: center;
+        position: relative;
+        padding: $sp2 $sp4;
+        border-radius: var(--rd);
+
+        &.add {
+            margin: 0;
+        }
+
+        // &.edit {
+        //     margin: 0 0 $sp3 0;
+        // }
+
+        @include mobile() {
+            margin: 0 $sp3;
+            margin-bottom: $sp3;
+        }
+    }
+    .icon {
+        flex: 0 0 25px;
+    }
+    .close {
+        cursor: pointer;
+    }
+    input {
+        background-color: transparent;
+        color: var(--txt);
+        outline: none;
+        flex: 1;
+        padding: $sp3;
+        margin: 0;
+        border: none;
+        width: 100%;
+        @include font(book, normal, fs-100);
+
+        &::placeholder {
+            color: var(--placeholder);
+        }
+    }
+
+    .results {
+        position: relative;
+        overflow: auto;
+        flex: 1;
+    }
+</style>
diff --git a/frontend/app/src/desktop/shared/ForgotPinLabel.svelte b/frontend/app/src/desktop/shared/ForgotPinLabel.svelte
new file mode 100644
index 0000000000..a3391bd3a5
--- /dev/null
+++ b/frontend/app/src/desktop/shared/ForgotPinLabel.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+    import Translatable from "@src/ui/Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+
+    interface Props {
+        onForgot: () => void;
+    }
+    let { onForgot }: Props = $props();
+</script>
+
+<div class="forgot">
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_missing_attribute -->
+    <a role="button" tabindex="0" onclick={onForgot}>
+        <Translatable resourceKey={i18nKey("pinNumber.forgotLabel")} />
+    </a>
+</div>
+
+<style lang="scss">
+    .forgot {
+        text-align: center;
+        @include font(light, normal, fs-80);
+        margin: $sp3 0;
+    }
+</style>
diff --git a/frontend/app/src/desktop/shared/HumanityConfirmation.svelte b/frontend/app/src/desktop/shared/HumanityConfirmation.svelte
new file mode 100644
index 0000000000..cc57835502
--- /dev/null
+++ b/frontend/app/src/desktop/shared/HumanityConfirmation.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import { _ } from "svelte-i18n";
+    import Checkbox from "./Checkbox.svelte";
+    import AlertBox from "./AlertBox.svelte";
+
+    interface Props {
+        confirmed: boolean;
+    }
+
+    let { confirmed = $bindable() }: Props = $props();
+</script>
+
+<AlertBox icon={false}>
+    <Checkbox
+        id="history-visible"
+        label={i18nKey("access.doYouHaveUniquePersonCredential")}
+        align={"start"}
+        bind:checked={confirmed}>
+        <p class="question">
+            <Markdown text={interpolate($_, i18nKey("access.doYouHaveUniquePersonCredential"))} />
+        </p>
+        <p class="answer">
+            <Markdown text={interpolate($_, i18nKey("access.uniquePersonInfo2"))} />
+        </p>
+
+        <p class="answer">
+            <Translatable resourceKey={i18nKey("access.uniquePersonInfo3")} />
+        </p>
+    </Checkbox>
+</AlertBox>
+
+<style lang="scss">
+    .question,
+    .answer {
+        margin-bottom: $sp4;
+    }
+
+    .question {
+        @include font(book, normal, fs-90);
+    }
+
+    .answer {
+        color: var(--txt-light);
+        @include font(book, normal, fs-90);
+    }
+</style>
diff --git a/frontend/app/src/components/InfoIcon.svelte b/frontend/app/src/desktop/shared/InfoIcon.svelte
similarity index 92%
rename from frontend/app/src/components/InfoIcon.svelte
rename to frontend/app/src/desktop/shared/InfoIcon.svelte
index 59782b9388..e3ea614f96 100644
--- a/frontend/app/src/components/InfoIcon.svelte
+++ b/frontend/app/src/desktop/shared/InfoIcon.svelte
@@ -2,7 +2,7 @@
     import type { Alignment, Position } from "component-lib";
     import { type Snippet } from "svelte";
     import Help from "svelte-material-icons/HelpCircleOutline.svelte";
-    import Tooltip from "./tooltip/Tooltip.svelte";
+    import Tooltip from "@src/desktop/ui/tooltip/Tooltip.svelte";
 
     interface Props {
         position?: Position;
diff --git a/frontend/app/src/components/Input.svelte b/frontend/app/src/desktop/shared/Input.svelte
similarity index 97%
rename from frontend/app/src/components/Input.svelte
rename to frontend/app/src/desktop/shared/Input.svelte
index a57bdfec1b..8e320f48cb 100644
--- a/frontend/app/src/components/Input.svelte
+++ b/frontend/app/src/desktop/shared/Input.svelte
@@ -24,8 +24,8 @@
 <script lang="ts">
     import { _ } from "svelte-i18n";
     import { onMount, tick, type Snippet } from "svelte";
-    import { translatable } from "../actions/translatable";
-    import { interpolate } from "../i18n/i18n";
+    import { translatable } from "@src/actions/translatable";
+    import { interpolate } from "@src/i18n/i18n";
     import { type ResourceKey, parseBigInt } from "@client";
 
     let {
diff --git a/frontend/app/src/components/Legend.svelte b/frontend/app/src/desktop/shared/Legend.svelte
similarity index 94%
rename from frontend/app/src/components/Legend.svelte
rename to frontend/app/src/desktop/shared/Legend.svelte
index 3c5ca3c502..84d649f07a 100644
--- a/frontend/app/src/components/Legend.svelte
+++ b/frontend/app/src/desktop/shared/Legend.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import Translatable from "./Translatable.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
     import type { ResourceKey } from "@client";
 
     interface Props {
diff --git a/frontend/app/src/components/Link.svelte b/frontend/app/src/desktop/shared/Link.svelte
similarity index 100%
rename from frontend/app/src/components/Link.svelte
rename to frontend/app/src/desktop/shared/Link.svelte
diff --git a/frontend/app/src/components/LinkButton.svelte b/frontend/app/src/desktop/shared/LinkButton.svelte
similarity index 100%
rename from frontend/app/src/components/LinkButton.svelte
rename to frontend/app/src/desktop/shared/LinkButton.svelte
diff --git a/frontend/app/src/desktop/shared/MatchingUser.svelte b/frontend/app/src/desktop/shared/MatchingUser.svelte
new file mode 100644
index 0000000000..2d071c6085
--- /dev/null
+++ b/frontend/app/src/desktop/shared/MatchingUser.svelte
@@ -0,0 +1,110 @@
+<script lang="ts">
+    import type { OpenChat, UserSummary } from "@client";
+    import { AvatarSize, currentUserIdStore } from "@client";
+    import { getContext } from "svelte";
+    import Avatar from "./Avatar.svelte";
+    import FilteredUsername from "@src/ui/FilteredUsername.svelte";
+    import Badges from "@src/desktop/features/profile/Badges.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        searchTerm: string;
+        user: UserSummary;
+        hovering?: boolean;
+        compact?: boolean;
+        onSelect: (user: UserSummary) => void;
+    }
+
+    let {
+        searchTerm,
+        user,
+        hovering = $bindable(false),
+        compact = false,
+        onSelect,
+    }: Props = $props();
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+    class="user"
+    class:compact
+    onclick={() => onSelect(user)}
+    onmouseenter={() => (hovering = true)}
+    onmouseleave={() => (hovering = false)}>
+    <span class="avatar">
+        <Avatar
+            statusBorder={hovering ? "var(--members-hv)" : "transparent"}
+            showStatus
+            userId={user.userId}
+            url={client.userAvatarUrl(user)}
+            size={AvatarSize.Default} />
+    </span>
+    <div class="details">
+        <h4>
+            <FilteredUsername
+                {searchTerm}
+                me={user.userId === $currentUserIdStore}
+                username={user.displayName ?? user.username} />
+            <Badges
+                uniquePerson={user.isUniquePerson}
+                diamondStatus={user.diamondStatus}
+                streak={user.streak} />
+        </h4>
+        <div class="username">
+            <FilteredUsername {searchTerm} username={"@" + user.username} />
+        </div>
+    </div>
+</div>
+
+<style lang="scss">
+    .user {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: var(--txt);
+        padding: $sp4;
+        margin: 0 0 $sp3 0;
+        transition:
+            background-color ease-in-out 100ms,
+            border-color ease-in-out 100ms;
+        cursor: pointer;
+        gap: 12px;
+
+        @include mobile() {
+            padding: $sp3 toRem(10);
+        }
+
+        &.compact {
+            margin: 0;
+            padding: $sp3;
+        }
+
+        @media (hover: hover) {
+            &:hover {
+                background-color: var(--members-hv);
+            }
+        }
+    }
+    .avatar {
+        flex: 0 0 50px;
+    }
+    .details {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        padding: 0 5px;
+
+        .username {
+            font-weight: 200;
+            color: var(--txt-light);
+        }
+
+        h4 {
+            display: flex;
+            gap: $sp2;
+            align-items: center;
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/shared/MentionPicker.svelte b/frontend/app/src/desktop/shared/MentionPicker.svelte
new file mode 100644
index 0000000000..597ef63cee
--- /dev/null
+++ b/frontend/app/src/desktop/shared/MentionPicker.svelte
@@ -0,0 +1,282 @@
+<script lang="ts">
+    import VirtualList from "@src/ui/VirtualList.svelte";
+    import type { OpenChat, UserOrUserGroup } from "@client";
+    import {
+        allUsersStore,
+        AvatarSize,
+        currentUserIdStore,
+        iconSize,
+        mobileWidth,
+        selectedCommunityMembersStore,
+    } from "@client";
+    import { getContext, onMount } from "svelte";
+    import AccountMultiple from "svelte-material-icons/AccountMultiple.svelte";
+    import Avatar from "./Avatar.svelte";
+    import Menu from "./Menu.svelte";
+    import MenuItem from "./MenuItem.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        prefix: string | undefined;
+        offset: number;
+        direction?: "up" | "down";
+        border?: boolean;
+        mentionSelf?: boolean;
+        supportsUserGroups?: boolean;
+        usersOnly?: boolean;
+        inline?: boolean;
+        onMention: (user: UserOrUserGroup) => void;
+        onClose: () => void;
+    }
+
+    let {
+        prefix,
+        offset,
+        direction = "up",
+        border = false,
+        mentionSelf = false,
+        supportsUserGroups = false,
+        usersOnly = false,
+        inline = false,
+        onClose,
+        onMention,
+    }: Props = $props();
+
+    let index = $state(0);
+    let usersAndGroups: UserOrUserGroup[] = $state([]);
+
+    onMount(() => {
+        usersAndGroups = Object.values(client.getUserLookupForMentions()).sort(
+            (a: UserOrUserGroup, b: UserOrUserGroup) => {
+                const order = { everyone: 1, user_group: 2, user: 3, bot: 4 };
+                return order[a.kind] - order[b.kind];
+            },
+        );
+    });
+
+    function mention(userOrGroup: UserOrUserGroup) {
+        onMention($state.snapshot(userOrGroup));
+    }
+
+    function onKeyDown(ev: KeyboardEvent): void {
+        switch (ev.key) {
+            case "ArrowDown":
+                index = (index + 1) % filtered.length;
+                ev.preventDefault();
+                ev.stopPropagation();
+                break;
+            case "ArrowUp":
+                index = index === 0 ? filtered.length - 1 : index - 1;
+                ev.preventDefault();
+                ev.stopPropagation();
+                break;
+            case "Escape":
+                onClose();
+                ev.preventDefault();
+                ev.stopPropagation();
+                break;
+            case "Enter":
+                const userOrGroup = filtered[index];
+                if (userOrGroup) {
+                    mention(userOrGroup);
+                }
+                ev.preventDefault();
+                ev.stopPropagation();
+                break;
+        }
+    }
+
+    function compareMatchNames(a: string, b: string): number {
+        // Order by length, then alphabetically
+        if (a === b) return 0;
+        if (a.length === b.length) {
+            return a < b ? -1 : 1;
+        }
+        return a.length < b.length ? -1 : 1;
+    }
+    let itemHeight = $derived($mobileWidth ? 53 : 55);
+    let borderWidth = $derived(direction === "up" ? 2 : 3);
+    let maxHeight = $derived(
+        direction === "down" ? `${3.2 * itemHeight + borderWidth}px` : "calc(var(--vh, 1vh) * 50)",
+    );
+    let prefixLower = $derived(prefix?.toLowerCase());
+    let filtered = $derived(
+        usersAndGroups
+            .filter((userOrGroup) => {
+                switch (userOrGroup.kind) {
+                    case "user_group":
+                        return (
+                            !usersOnly &&
+                            (prefixLower === undefined ||
+                                (supportsUserGroups &&
+                                    userOrGroup.name.toLowerCase().startsWith(prefixLower)))
+                        );
+                    case "everyone": {
+                        return (
+                            !usersOnly &&
+                            (prefixLower === undefined || userOrGroup.kind.startsWith(prefixLower))
+                        );
+                    }
+                    default:
+                        return (
+                            (mentionSelf || userOrGroup.userId !== $currentUserIdStore) &&
+                            (prefixLower === undefined ||
+                                userOrGroup.username.toLowerCase().startsWith(prefixLower) ||
+                                userOrGroup.displayName?.toLowerCase().startsWith(prefixLower))
+                        );
+                }
+            })
+            .sort((a, b) => {
+                // 'everyone' first, then user groups, then users
+                if (a.kind === "everyone") return -1;
+                if (b.kind === "everyone") return 1;
+
+                if (a.kind === "user_group" && b.kind === "user_group") {
+                    return compareMatchNames(a.name, b.name);
+                }
+                if (a.kind === "user" && b.kind === "user") {
+                    return compareMatchNames(a.username, b.username);
+                }
+                return a.kind === "user_group" ? -1 : 1;
+            }),
+    );
+    let style = $derived(
+        direction === "up"
+            ? `bottom: ${offset}px; height: ${
+                  filtered.length * itemHeight + borderWidth
+              }px; max-height: ${maxHeight}`
+            : `top: ${offset}px; height: ${
+                  filtered.length * itemHeight + borderWidth
+              }px; max-height: ${maxHeight}`,
+    );
+
+    function userOrGroupKey(u: UserOrUserGroup): string {
+        switch (u.kind) {
+            case "user_group":
+                return u.id.toString();
+            case "everyone":
+                return "everyone";
+            default:
+                return u.userId;
+        }
+    }
+</script>
+
+{#if filtered.length > 0}
+    <div
+        class="mention-picker"
+        class:up={direction === "up"}
+        class:down={direction === "down"}
+        class:inline
+        class:border
+        {style}>
+        <Menu fit>
+            <VirtualList keyFn={userOrGroupKey} items={filtered}>
+                {#snippet children(item, itemIndex)}
+                    <MenuItem selected={itemIndex === index} onclick={() => mention(item)}>
+                        {#snippet icon()}
+                            <div class="avatar">
+                                {#if item.kind === "user_group" || item.kind === "everyone"}
+                                    <div class="group-icon">
+                                        <AccountMultiple
+                                            color={"var(--menu-disabled-txt)"}
+                                            size={$iconSize} />
+                                    </div>
+                                {:else}
+                                    <Avatar
+                                        url={client.userAvatarUrl($allUsersStore.get(item.userId))}
+                                        userId={item.userId}
+                                        size={AvatarSize.Small} />
+                                {/if}
+                            </div>
+                        {/snippet}
+                        {#snippet text()}
+                            <div>
+                                {#if item.kind === "user_group"}
+                                    <span class="display-name">
+                                        {item.name}
+                                    </span>
+                                {:else if item.kind === "everyone"}
+                                    <span class="display-name">
+                                        {"everyone"}
+                                    </span>
+                                {:else}
+                                    <span class="display-name">
+                                        {client.getDisplayName(
+                                            item.userId,
+                                            $selectedCommunityMembersStore,
+                                        )}
+                                    </span>
+                                    <span class="username">
+                                        @{item.username}
+                                    </span>
+                                {/if}
+                            </div>
+                        {/snippet}
+                    </MenuItem>
+                {/snippet}
+            </VirtualList>
+        </Menu>
+    </div>
+{/if}
+
+<svelte:body onkeydown={onKeyDown} />
+
+<style lang="scss">
+    :global(.mention-picker .menu) {
+        box-shadow: none;
+        position: relative;
+        width: 100%;
+        height: 100%;
+        @include z-index("footer-overlay");
+    }
+
+    .mention-picker {
+        position: absolute;
+        max-height: calc(var(--vh, 1vh) * 50);
+        overflow: auto;
+        z-index: 10000;
+        left: 0;
+
+        &.up {
+            box-shadow: var(--menu-inverted-sh);
+        }
+
+        &.down {
+            box-shadow: var(--menu-sh);
+        }
+
+        &.inline {
+            position: relative;
+            box-shadow: none;
+        }
+
+        &.border {
+            border: 1px solid var(--bd);
+            border-top: none;
+        }
+
+        .display-name {
+            font-weight: 500;
+        }
+
+        .username {
+            font-weight: 200;
+            color: var(--menu-disabled-txt);
+        }
+    }
+    .avatar {
+        margin-right: $sp3;
+    }
+
+    .group-icon {
+        width: toRem(35);
+        height: toRem(35);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: var(--menu-bg);
+        border-radius: 50%;
+    }
+</style>
diff --git a/frontend/app/src/components/Menu.svelte b/frontend/app/src/desktop/shared/Menu.svelte
similarity index 100%
rename from frontend/app/src/components/Menu.svelte
rename to frontend/app/src/desktop/shared/Menu.svelte
diff --git a/frontend/app/src/components/MenuIcon.svelte b/frontend/app/src/desktop/shared/MenuIcon.svelte
similarity index 95%
rename from frontend/app/src/components/MenuIcon.svelte
rename to frontend/app/src/desktop/shared/MenuIcon.svelte
index ea12173999..f5fd441dd0 100644
--- a/frontend/app/src/components/MenuIcon.svelte
+++ b/frontend/app/src/desktop/shared/MenuIcon.svelte
@@ -2,7 +2,7 @@
     import type { Alignment, Position } from "component-lib";
     import { portalState } from "component-lib";
     import { getAllContexts, mount, onDestroy, type Snippet } from "svelte";
-    import MenuWrapper from "./portal/MenuWrapper.svelte";
+    import MenuWrapper from "@src/desktop/ui/portal/MenuWrapper.svelte";
 
     interface Props {
         centered?: boolean;
diff --git a/frontend/app/src/components/MenuItem.svelte b/frontend/app/src/desktop/shared/MenuItem.svelte
similarity index 100%
rename from frontend/app/src/components/MenuItem.svelte
rename to frontend/app/src/desktop/shared/MenuItem.svelte
diff --git a/frontend/app/src/components/home/MessageReaction.svelte b/frontend/app/src/desktop/shared/MessageReaction.svelte
similarity index 95%
rename from frontend/app/src/components/home/MessageReaction.svelte
rename to frontend/app/src/desktop/shared/MessageReaction.svelte
index 1029d20245..5e2924fb7d 100644
--- a/frontend/app/src/components/home/MessageReaction.svelte
+++ b/frontend/app/src/desktop/shared/MessageReaction.svelte
@@ -4,10 +4,10 @@
     import { allUsersStore, currentUserIdStore, customEmojis } from "@client";
     import { getContext, onMount } from "svelte";
     import { _ } from "svelte-i18n";
-    import { i18nKey } from "../../i18n/i18n";
-    import { emojiDatabase } from "../../utils/emojis";
-    import Tooltip from "../tooltip/Tooltip.svelte";
-    import Translatable from "../Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { emojiDatabase } from "@src/utils/emojis";
+    import Tooltip from "@src/desktop/ui/tooltip/Tooltip.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/components/MultiToggle.svelte b/frontend/app/src/desktop/shared/MultiToggle.svelte
similarity index 100%
rename from frontend/app/src/components/MultiToggle.svelte
rename to frontend/app/src/desktop/shared/MultiToggle.svelte
diff --git a/frontend/app/src/desktop/shared/NetworkSelector.svelte b/frontend/app/src/desktop/shared/NetworkSelector.svelte
new file mode 100644
index 0000000000..ce3862601b
--- /dev/null
+++ b/frontend/app/src/desktop/shared/NetworkSelector.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+    import { i18nKey } from "@src/i18n/i18n";
+    import MultiToggle from "./MultiToggle.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    type Props = {
+        networks: string[];
+        selectedNetwork: string;
+    };
+
+    let { networks, selectedNetwork = $bindable() }: Props = $props();
+
+    const networkOptions = networks.map((n) => ({ id: n, label: n }));
+</script>
+
+<div class="network-selector">
+    <Translatable resourceKey={i18nKey("cryptoAccount.network")} />
+    <MultiToggle options={networkOptions} bind:selected={selectedNetwork} />
+</div>
+
+<style lang="scss">
+    .network-selector {
+        display: flex;
+        gap: $sp3;
+        margin-bottom: $sp4;
+        align-items: center;
+    }
+</style>
diff --git a/frontend/app/src/desktop/shared/NumberInput.svelte b/frontend/app/src/desktop/shared/NumberInput.svelte
new file mode 100644
index 0000000000..dd539f3213
--- /dev/null
+++ b/frontend/app/src/desktop/shared/NumberInput.svelte
@@ -0,0 +1,132 @@
+<script lang="ts">
+    import type { ResourceKey } from "@client";
+    import { onMount } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { interpolate } from "@src/i18n/i18n";
+
+    interface Props {
+        disabled?: boolean;
+        autofocus?: boolean;
+        placeholder?: ResourceKey | undefined;
+        min?: number;
+        max?: number;
+        defaultValue?: any;
+        value?: number | null;
+        align?: "left" | "right" | "center";
+        shouldClamp?: boolean;
+        onChange?: () => void;
+        onEnter?: () => void;
+    }
+
+    let {
+        disabled = false,
+        autofocus = false,
+        placeholder = undefined,
+        min = 0,
+        max = Number.MAX_VALUE,
+        defaultValue = Math.round(max - min / 2),
+        value = $bindable(min),
+        align = "left",
+        shouldClamp = true,
+        onChange,
+        onEnter,
+    }: Props = $props();
+
+    let inp: HTMLInputElement | undefined = $state();
+
+    onMount(() => {
+        if (autofocus) {
+            inp?.focus();
+        }
+    });
+
+    function clamp(val: number): number {
+        if (isNaN(val)) return defaultValue;
+        if (val > max) return max;
+        if (val < min) return min;
+        return val;
+    }
+
+    function handleInput(e: { currentTarget: { value: string } }) {
+        if (inp) {
+            if (shouldClamp) {
+                value = clamp(parseInt(e.currentTarget.value, 10));
+                if (value != null) {
+                    inp.value = value.toString();
+                }
+            }
+            onChange?.();
+        }
+    }
+
+    function keyDown(e: KeyboardEvent) {
+        if (e.key === "Enter") {
+            onEnter?.();
+        }
+    }
+</script>
+
+<div class="input-wrapper">
+    <input
+        data-gram="false"
+        data-gramm_editor="false"
+        data-enable-grammarly="false"
+        spellcheck="false"
+        {disabled}
+        type="number"
+        {min}
+        {max}
+        placeholder={placeholder !== undefined ? interpolate($_, placeholder) : ""}
+        onkeydown={keyDown}
+        oninput={handleInput}
+        bind:this={inp}
+        bind:value
+        class={`textbox ${align}`} />
+</div>
+
+<style lang="scss">
+    .input-wrapper {
+        position: relative;
+        margin-bottom: $sp3;
+
+        @include mobile() {
+            margin-bottom: $sp3;
+        }
+    }
+
+    input[type="number"] {
+        -moz-appearance: textfield;
+        appearance: textfield;
+        margin: 0;
+    }
+
+    input[type="number"]::-webkit-inner-spin-button,
+    input[type="number"]::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+
+    .textbox {
+        transition: border ease-in-out 300ms;
+        display: block;
+        width: 100%;
+
+        @include input();
+
+        &.left {
+            text-align: left;
+        }
+
+        &.right {
+            text-align: right;
+        }
+
+        &.center {
+            text-align: center;
+        }
+
+        &::placeholder {
+            color: var(--placeholder);
+        }
+    }
+</style>
diff --git a/frontend/app/src/components/Pill.svelte b/frontend/app/src/desktop/shared/Pill.svelte
similarity index 100%
rename from frontend/app/src/components/Pill.svelte
rename to frontend/app/src/desktop/shared/Pill.svelte
diff --git a/frontend/app/src/components/PremiumItemPayment.svelte b/frontend/app/src/desktop/shared/PremiumItemPayment.svelte
similarity index 92%
rename from frontend/app/src/components/PremiumItemPayment.svelte
rename to frontend/app/src/desktop/shared/PremiumItemPayment.svelte
index dba35275cc..1bee2ed3de 100644
--- a/frontend/app/src/components/PremiumItemPayment.svelte
+++ b/frontend/app/src/desktop/shared/PremiumItemPayment.svelte
@@ -10,11 +10,11 @@
     } from "@client";
     import { getContext } from "svelte";
     import AlertBox from "./AlertBox.svelte";
-    import Button from "./Button.svelte";
-    import ButtonGroup from "./ButtonGroup.svelte";
-    import ModalContent from "./ModalContent.svelte";
-    import Overlay from "./Overlay.svelte";
-    import Translatable from "./Translatable.svelte";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/desktop/shared/Progress.svelte b/frontend/app/src/desktop/shared/Progress.svelte
new file mode 100644
index 0000000000..d9c785bf06
--- /dev/null
+++ b/frontend/app/src/desktop/shared/Progress.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import { rtlStore } from "@src/stores/rtl";
+
+    interface Props {
+        percent: number;
+        bg?: "button" | "accent";
+        size?: string;
+        children?: Snippet;
+    }
+
+    let { percent, bg = "button", size = "40px", children }: Props = $props();
+</script>
+
+<div class="bar" style={`--size: ${size}`}>
+    <span
+        class="meter"
+        class:rtl={$rtlStore}
+        style={`width: ${percent}%; background-color: ${
+            bg === "button" ? "var(--primary)" : "var(--progress-fill)"
+        }`}></span>
+    <div class="label">
+        {@render children?.()}
+    </div>
+</div>
+
+<style lang="scss">
+    $radius: calc(var(--size) / 2);
+
+    .bar {
+        border: 1px solid var(--progress-bd);
+        width: 100%;
+        height: var(--size);
+        position: relative;
+        border-radius: $radius;
+        overflow: hidden;
+    }
+
+    .meter {
+        width: 0;
+        transition: width 300ms;
+        display: block;
+        height: 100%;
+
+        position: absolute;
+        left: 0;
+        top: 0;
+
+        &.rtl {
+            left: unset;
+            right: 0;
+        }
+    }
+
+    .label {
+        display: flex;
+        align-items: center;
+        height: 100%;
+        padding: 0 $sp4;
+        position: relative;
+        @include ellipsis();
+    }
+</style>
diff --git a/frontend/app/src/desktop/shared/ProgressStep.svelte b/frontend/app/src/desktop/shared/ProgressStep.svelte
new file mode 100644
index 0000000000..ae067ad8fe
--- /dev/null
+++ b/frontend/app/src/desktop/shared/ProgressStep.svelte
@@ -0,0 +1,93 @@
+<script lang="ts">
+    import Spinner from "@src/desktop/ui/icons/Spinner.svelte";
+    import { _ } from "svelte-i18n";
+    import DoneIcon from "svelte-material-icons/CheckCircle.svelte";
+    import FailedIcon from "svelte-material-icons/CloseCircle.svelte";
+    import { currentTheme } from "@src/theme/themes";
+    import { interpolate } from "@src/i18n/i18n";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import type { ResourceKey } from "@client";
+
+    interface Props {
+        label: ResourceKey;
+        status: string;
+        step?: number;
+    }
+
+    let { label, status, step = 0 }: Props = $props();
+</script>
+
+<div class={`step ${status}`}>
+    {#if status === "doing"}
+        <div class="spinner">
+            <Spinner
+                size="25px"
+                foregroundColour={$currentTheme.toast.success.bg}
+                backgroundColour={"rgba(255,255,255,0.5)"}></Spinner>
+            <div class="number">{step + 1}</div>
+        </div>
+    {:else if status === "overall-done"}
+        <div class="icon">
+            <DoneIcon size="30px" viewBox="2 2 24 24" color={$currentTheme.toast.success.bg} />
+        </div>
+    {:else if status === "overall-failed"}
+        <div class="icon">
+            <FailedIcon size="30px" viewBox="2 2 24 24" color={$currentTheme.error} />
+        </div>
+    {:else}
+        <div class={`index ${status}`}>
+            {step + 1}
+        </div>
+    {/if}
+    <div class={`label ${status}`}>
+        <Markdown text={interpolate($_, label)} />
+    </div>
+</div>
+
+<style lang="scss">
+    .step {
+        display: flex;
+        gap: $sp3;
+        align-items: center;
+        margin-bottom: $sp4;
+        &.todo {
+            color: var(--txt-light);
+            @include font(book, normal, fs-80);
+        }
+        .index {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            @include font(book, normal, fs-80);
+            border: 3px solid red;
+            width: 25px;
+            height: 25px;
+            border-radius: 50%;
+            &.todo {
+                border-color: var(--txt-light);
+            }
+            &.done {
+                border-color: var(--toast-success-bg);
+            }
+            &.failed {
+                border-color: var(--error);
+            }
+        }
+    }
+    .spinner {
+        position: relative;
+        height: 25px;
+        .number {
+            @include font(book, normal, fs-80);
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+    }
+
+    .icon {
+        width: 25px;
+        height: 25px;
+    }
+</style>
diff --git a/frontend/app/src/desktop/shared/ProgressSteps.svelte b/frontend/app/src/desktop/shared/ProgressSteps.svelte
new file mode 100644
index 0000000000..c56befafc1
--- /dev/null
+++ b/frontend/app/src/desktop/shared/ProgressSteps.svelte
@@ -0,0 +1,58 @@
+<script module lang="ts">
+    export type Status = "done" | "doing" | "todo" | "failed";
+    export type OverallStatus = "done" | "failed";
+
+    export type Step = {
+        status: Status;
+        label: string;
+    };
+
+    export type Result =
+        | {
+              status: OverallStatus;
+              label: string;
+          }
+        | undefined;
+</script>
+
+<script lang="ts">
+    import { fade } from "svelte/transition";
+    import { flip } from "svelte/animate";
+    import Progress from "./Progress.svelte";
+    import ProgressStep from "./ProgressStep.svelte";
+    import type { InterpolationValues } from "@client";
+    import { i18nKey } from "@src/i18n/i18n";
+
+    interface Props {
+        steps: Step[];
+        result: Result;
+        labelValues?: InterpolationValues | undefined;
+        percent?: number | undefined;
+    }
+
+    let { steps, result, labelValues = undefined, percent = undefined }: Props = $props();
+</script>
+
+<div>
+    {#each steps as step, i ("step" + i)}
+        <div in:fade={{ duration: 500 }} animate:flip={{ duration: 500 }}>
+            <ProgressStep
+                label={i18nKey(steps[i].label, labelValues)}
+                step={i}
+                status={step.status} />
+        </div>
+    {/each}
+    {#if result !== undefined}
+        <div>
+            <ProgressStep
+                label={i18nKey(result.label, labelValues)}
+                status={"overall-" + result.status} />
+        </div>
+    {/if}
+</div>
+
+{#if result === undefined && percent !== undefined}
+    <div class="progress">
+        <Progress size={"30px"} {percent} />
+    </div>
+{/if}
diff --git a/frontend/app/src/components/QRCode.svelte b/frontend/app/src/desktop/shared/QRCode.svelte
similarity index 100%
rename from frontend/app/src/components/QRCode.svelte
rename to frontend/app/src/desktop/shared/QRCode.svelte
diff --git a/frontend/app/src/components/Radio.svelte b/frontend/app/src/desktop/shared/Radio.svelte
similarity index 97%
rename from frontend/app/src/components/Radio.svelte
rename to frontend/app/src/desktop/shared/Radio.svelte
index 910b6c0801..7a5d595094 100644
--- a/frontend/app/src/components/Radio.svelte
+++ b/frontend/app/src/desktop/shared/Radio.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import type { ResourceKey } from "@client";
-    import Translatable from "./Translatable.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
     import type { Snippet } from "svelte";
 
     interface Props {
diff --git a/frontend/app/src/components/Range.svelte b/frontend/app/src/desktop/shared/Range.svelte
similarity index 100%
rename from frontend/app/src/components/Range.svelte
rename to frontend/app/src/desktop/shared/Range.svelte
diff --git a/frontend/app/src/desktop/shared/Search.svelte b/frontend/app/src/desktop/shared/Search.svelte
new file mode 100644
index 0000000000..17ebc4fde4
--- /dev/null
+++ b/frontend/app/src/desktop/shared/Search.svelte
@@ -0,0 +1,162 @@
+<script lang="ts">
+    import { iconSize, type ResourceKey } from "@client";
+    import { onMount } from "svelte";
+    import { _ } from "svelte-i18n";
+    import Close from "svelte-material-icons/Close.svelte";
+    import Magnify from "svelte-material-icons/Magnify.svelte";
+    import { translatable } from "@src/actions/translatable";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+
+    interface Props {
+        searchTerm?: string;
+        searching: boolean;
+        placeholder?: ResourceKey;
+        fill?: boolean;
+        inputStyle?: boolean;
+        autofocus?: boolean;
+        onPerformSearch?: (term: string) => void;
+        onFocus?: () => void;
+        onBlur?: () => void;
+    }
+
+    let {
+        searchTerm = $bindable(""),
+        searching = $bindable(false),
+        placeholder = i18nKey("searchPlaceholder"),
+        fill = false,
+        inputStyle = false,
+        onPerformSearch,
+        onFocus,
+        onBlur,
+        autofocus = false,
+    }: Props = $props();
+
+    let timer: number | undefined;
+    let inp: HTMLInputElement;
+
+    function performSearch(e: Event) {
+        e.preventDefault();
+        window.clearTimeout(timer);
+        onPerformSearch?.(searchTerm);
+    }
+    function clearSearch() {
+        searchTerm = "";
+        onPerformSearch?.(searchTerm);
+    }
+    function keydown(ev: KeyboardEvent) {
+        if (["Up", "Down", "Left", "Right", "Tab"].includes(ev.key)) {
+            return;
+        }
+        if (ev.key === "Escape") {
+            searchTerm = "";
+        }
+        if (timer !== undefined) {
+            window.clearTimeout(timer);
+        }
+        timer = window.setTimeout(() => {
+            if (searchTerm.length != 1) {
+                onPerformSearch?.(searchTerm);
+            }
+        }, 300);
+    }
+
+    onMount(() => {
+        if (autofocus) {
+            inp.focus();
+        }
+    });
+</script>
+
+<form onsubmit={performSearch} class="wrapper" class:fill class:input-style={inputStyle}>
+    <input
+        bind:this={inp}
+        onkeydown={keydown}
+        spellcheck="false"
+        bind:value={searchTerm}
+        type="text"
+        class:input-style={inputStyle}
+        use:translatable={{ key: placeholder }}
+        placeholder={interpolate($_, placeholder)}
+        onfocus={onFocus}
+        onblur={onBlur} />
+    {#if searchTerm !== ""}
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <span onclick={clearSearch} class="icon close" class:input-style={inputStyle}
+            ><Close
+                viewBox={inputStyle ? "0 -3 24 24" : "0 0 24 24"}
+                size={$iconSize}
+                color={"var(--icon-txt)"} /></span>
+    {:else}
+        <span class="icon" class:searching class:input-style={inputStyle}>
+            {#if !searching}
+                <Magnify
+                    viewBox={inputStyle ? "0 -3 24 24" : "0 0 24 24"}
+                    size={$iconSize}
+                    color={"var(--icon-txt)"} />
+            {/if}
+        </span>
+    {/if}
+</form>
+
+<style lang="scss">
+    .wrapper {
+        margin: 0 $sp4 $sp4 $sp4;
+        background-color: var(--chatSearch-bg);
+        display: flex;
+        align-items: center;
+        position: relative;
+        padding: $sp2 $sp4;
+        border-radius: var(--rd);
+        box-shadow: var(--chatSearch-sh);
+        border: var(--bw) solid var(--chatSearch-bd);
+        border-radius: var(--chatSearch-rd);
+
+        @include mobile() {
+            margin: 0 $sp3;
+            margin-bottom: $sp3;
+        }
+
+        &.fill {
+            margin: 0;
+        }
+
+        &.input-style {
+            padding: $sp3 $sp4;
+            border-radius: var(--rd);
+        }
+    }
+    .icon {
+        margin-top: $sp3;
+        flex: 0 0 25px;
+
+        &.input-style {
+            margin-top: 0;
+        }
+    }
+    .close {
+        cursor: pointer;
+    }
+    .searching {
+        @include loading-spinner(1em, 0.5em, var(--button-spinner));
+    }
+    input {
+        background-color: transparent;
+        color: var(--txt);
+        outline: none;
+        flex: 1;
+        padding: $sp3;
+        margin: 0;
+        border: none;
+        width: 100%;
+        @include font(book, normal, fs-100);
+
+        &.input-style {
+            padding: 0;
+        }
+
+        &::placeholder {
+            color: var(--placeholder);
+        }
+    }
+</style>
diff --git a/frontend/app/src/components/SectionHeader.svelte b/frontend/app/src/desktop/shared/SectionHeader.svelte
similarity index 95%
rename from frontend/app/src/components/SectionHeader.svelte
rename to frontend/app/src/desktop/shared/SectionHeader.svelte
index b23045753a..da06b0310c 100644
--- a/frontend/app/src/components/SectionHeader.svelte
+++ b/frontend/app/src/desktop/shared/SectionHeader.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-    import { rtlStore } from "../stores/rtl";
-    import { currentTheme } from "../theme/themes";
+    import { rtlStore } from "@src/stores/rtl";
+    import { currentTheme } from "@src/theme/themes";
 
     interface Props {
         flush?: boolean;
diff --git a/frontend/app/src/components/Select.svelte b/frontend/app/src/desktop/shared/Select.svelte
similarity index 97%
rename from frontend/app/src/components/Select.svelte
rename to frontend/app/src/desktop/shared/Select.svelte
index a9e72da750..3999d1a597 100644
--- a/frontend/app/src/components/Select.svelte
+++ b/frontend/app/src/desktop/shared/Select.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { rtlStore } from "../stores/rtl";
+    import { rtlStore } from "@src/stores/rtl";
     import MenuDown from "svelte-material-icons/MenuDown.svelte";
 
     interface Props {
diff --git a/frontend/app/src/components/home/SigninWithEth.svelte b/frontend/app/src/desktop/shared/SigninWithEth.svelte
similarity index 98%
rename from frontend/app/src/components/home/SigninWithEth.svelte
rename to frontend/app/src/desktop/shared/SigninWithEth.svelte
index 3093411758..28e89b6da9 100644
--- a/frontend/app/src/components/home/SigninWithEth.svelte
+++ b/frontend/app/src/desktop/shared/SigninWithEth.svelte
@@ -4,7 +4,7 @@
     import { mainnet } from "@wagmi/chains";
     import { OpenChat } from "@client";
     import { getContext } from "svelte";
-    import Button from "../Button.svelte";
+    import Button from "@src/ui/Button.svelte";
     import type { DelegationChain, ECDSAKeyIdentity } from "@icp-sdk/core/identity";
 
     const client = getContext<OpenChat>("client");
diff --git a/frontend/app/src/components/home/SigninWithSol.svelte b/frontend/app/src/desktop/shared/SigninWithSol.svelte
similarity index 97%
rename from frontend/app/src/components/home/SigninWithSol.svelte
rename to frontend/app/src/desktop/shared/SigninWithSol.svelte
index 6243320588..dd920c2cfc 100644
--- a/frontend/app/src/components/home/SigninWithSol.svelte
+++ b/frontend/app/src/desktop/shared/SigninWithSol.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { initialize, walletStore } from "../../stores/solana/walletStore";
+    import { initialize, walletStore } from "@src/stores/solana/walletStore";
     import {
         type WalletError,
         type WalletName,
@@ -10,7 +10,7 @@
     import { CoinbaseWalletAdapter } from "@solana/wallet-adapter-coinbase";
     import { PhantomWalletAdapter } from "@solana/wallet-adapter-phantom";
     import { WalletConnectWalletAdapter } from "@solana/wallet-adapter-walletconnect";
-    import Button from "../Button.svelte";
+    import Button from "@src/ui/Button.svelte";
     import type { OpenChat, SiwsMessage } from "@client";
     import base58 from "bs58";
     import type { DelegationChain, ECDSAKeyIdentity } from "@icp-sdk/core/identity";
diff --git a/frontend/app/src/desktop/shared/SingleUserSelector.svelte b/frontend/app/src/desktop/shared/SingleUserSelector.svelte
new file mode 100644
index 0000000000..51758899d9
--- /dev/null
+++ b/frontend/app/src/desktop/shared/SingleUserSelector.svelte
@@ -0,0 +1,109 @@
+<script lang="ts">
+    import MentionPicker from "./MentionPicker.svelte";
+    import { _ } from "svelte-i18n";
+    import {
+        i18nKey,
+        type OpenChat,
+        type ResourceKey,
+        type UserOrUserGroup,
+        type UserSummary,
+    } from "@client";
+    import { getContext } from "svelte";
+    import UserPill from "./UserPill.svelte";
+    import ValidatingInput from "@src/desktop/features/bots/ValidatingInput.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        autofocus: boolean;
+        selectedReceiver?: UserOrUserGroup | undefined;
+        direction?: "up" | "down";
+        placeholder?: string;
+        border?: boolean;
+        mentionSelf?: boolean;
+        error?: ResourceKey[];
+        invalid?: boolean;
+        onUserSelected?: (user: UserSummary) => void;
+        onUserRemoved?: () => void;
+    }
+
+    let {
+        autofocus,
+        selectedReceiver = $bindable(undefined),
+        direction = "down",
+        placeholder = "tokenTransfer.chooseReceiver",
+        border = true,
+        mentionSelf = false,
+        error = [],
+        invalid = false,
+        onUserSelected,
+        onUserRemoved,
+    }: Props = $props();
+
+    let showMentionPicker = $state(false);
+    let textValue: string = $state("");
+    let inputHeight: number = $state(0);
+
+    function selectReceiver(userOrGroup: UserOrUserGroup) {
+        selectedReceiver = userOrGroup;
+        showMentionPicker = false;
+        textValue = "";
+        if (userOrGroup.kind === "user") {
+            onUserSelected?.(userOrGroup);
+        }
+    }
+
+    function removeReceiver(_: UserOrUserGroup) {
+        selectedReceiver = undefined;
+        showMentionPicker = true;
+        textValue = "";
+        onUserRemoved?.();
+    }
+
+    function blur() {
+        // we need a short timeout here so that any click event is handled before the blur
+        window.setTimeout(() => {
+            if (selectedReceiver === undefined) {
+                selectedReceiver = client.lookupUserForMention(textValue, false);
+            }
+            showMentionPicker = false;
+        }, 200);
+    }
+</script>
+
+<div class="selector">
+    {#if showMentionPicker}
+        <MentionPicker
+            offset={inputHeight}
+            {direction}
+            {mentionSelf}
+            onMention={selectReceiver}
+            onClose={() => (showMentionPicker = false)}
+            {border}
+            usersOnly
+            prefix={textValue.startsWith("@") ? textValue.substring(1) : textValue} />
+    {/if}
+    {#if selectedReceiver !== undefined}
+        <UserPill onDeleteUser={removeReceiver} userOrGroup={selectedReceiver} />
+    {:else}
+        <div class="wrapper" bind:clientHeight={inputHeight}>
+            <ValidatingInput
+                onFocus={() => (showMentionPicker = true)}
+                onBlur={blur}
+                {invalid}
+                {error}
+                {autofocus}
+                bind:value={textValue}
+                maxlength={100}
+                placeholder={i18nKey(placeholder)}>
+            </ValidatingInput>
+        </div>
+    {/if}
+</div>
+
+<style lang="scss">
+    .selector {
+        position: relative;
+        margin-bottom: $sp4;
+    }
+</style>
diff --git a/frontend/app/src/desktop/shared/Stats.svelte b/frontend/app/src/desktop/shared/Stats.svelte
new file mode 100644
index 0000000000..534ad52bf0
--- /dev/null
+++ b/frontend/app/src/desktop/shared/Stats.svelte
@@ -0,0 +1,432 @@
+<script lang="ts">
+    import type { Metrics, OpenChat } from "@client";
+    import { iconSize, minutesOnlineStore } from "@client";
+    import { getContext, onMount } from "svelte";
+    import Flag from "svelte-material-icons/Flag.svelte";
+    import { cubicOut } from "svelte/easing";
+    import { Tween } from "svelte/motion";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Tooltip from "@src/desktop/ui/tooltip/Tooltip.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    const client = getContext<OpenChat>("client");
+    interface Props {
+        stats: Metrics;
+        showReported?: boolean;
+    }
+
+    let { stats, showReported = false }: Props = $props();
+
+    const tweenOptions = {
+        duration: 600,
+        easing: cubicOut,
+    };
+    let hoveredIndex: number | undefined = $state();
+    let rendered = $state(false);
+    let previousStats: Metrics | undefined = $state(undefined);
+    let totalMessages = $state(0);
+    let textPerc = new Tween(12.5, tweenOptions);
+    let imagePerc = new Tween(12.5, tweenOptions);
+    let videoPerc = new Tween(12.5, tweenOptions);
+    let audioPerc = new Tween(12.5, tweenOptions);
+    let filePerc = new Tween(12.5, tweenOptions);
+    let pollPerc = new Tween(12.5, tweenOptions);
+    let cryptoPerc = new Tween(12.5, tweenOptions);
+    let giphyPerc = new Tween(12.5, tweenOptions);
+
+    function percToDegree(perc: number): number {
+        return (perc / 100) * 360;
+    }
+
+    onMount(() => {
+        window.setTimeout(() => (rendered = true), 600);
+    });
+
+    function slice(val: number, tween: Tween<number>) {
+        const perc = totalMessages > 0 ? (val / totalMessages) * 100 : 12.5;
+        tween.set(0, { duration: 0 });
+        tween.target = perc;
+    }
+
+    const circum = 471.24;
+
+    function sumSlice(from: number, to: number): number {
+        return percentages.slice(from, to).reduce((total, n) => total + percToDegree(n), 0);
+    }
+
+    $effect(() => {
+        if (previousStats === undefined || !client.metricsEqual(stats, previousStats)) {
+            totalMessages =
+                stats.textMessages +
+                stats.imageMessages +
+                stats.videoMessages +
+                stats.audioMessages +
+                stats.fileMessages +
+                stats.polls +
+                stats.cryptoMessages +
+                stats.giphyMessages;
+
+            slice(stats.textMessages, textPerc);
+            slice(stats.imageMessages, imagePerc);
+            slice(stats.videoMessages, videoPerc);
+            slice(stats.audioMessages, audioPerc);
+            slice(stats.fileMessages, filePerc);
+            slice(stats.polls, pollPerc);
+            slice(stats.cryptoMessages, cryptoPerc);
+            slice(stats.giphyMessages, giphyPerc);
+            previousStats = stats;
+        }
+    });
+    let percentages = $derived([
+        textPerc.current,
+        imagePerc.current,
+        videoPerc.current,
+        audioPerc.current,
+        filePerc.current,
+        pollPerc.current,
+        cryptoPerc.current,
+        giphyPerc.current,
+    ]);
+    let data = $derived([
+        {
+            cls: "text",
+            perc: textPerc.current,
+            rotate: 0,
+        },
+        {
+            cls: "image",
+            perc: imagePerc.current,
+            rotate: sumSlice(0, 1),
+        },
+        {
+            cls: "video",
+            perc: videoPerc.current,
+            rotate: sumSlice(0, 2),
+        },
+        {
+            cls: "audio",
+            perc: audioPerc.current,
+            rotate: sumSlice(0, 3),
+        },
+        {
+            cls: "file",
+            perc: filePerc.current,
+            rotate: sumSlice(0, 4),
+        },
+        {
+            cls: "poll",
+            perc: pollPerc.current,
+            rotate: sumSlice(0, 5),
+        },
+        {
+            cls: "crypto",
+            perc: cryptoPerc.current,
+            rotate: sumSlice(0, 6),
+        },
+        {
+            cls: "giphy",
+            perc: giphyPerc.current,
+            rotate: sumSlice(0, 7),
+        },
+    ]);
+</script>
+
+<div class="message-stats">
+    <svg class:rendered class="pie" viewBox="0 0 320 320">
+        <clipPath id="hollow">
+            <path
+                d="M 160 160 m -160 0 a 160 160 0 1 0 320 0 a 160 160 0 1 0 -320 0 Z M 160 160 m -100 0 a 100 100 0 0 1 200 0 a 100 100 0 0 1 -200 0 Z"
+                style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);" />
+        </clipPath>
+
+        <circle class="background" cx={160} cy={160} r={150} clip-path="url(#hollow)" />
+
+        {#each data as slice, i}
+            <circle
+                onmouseenter={(_) => (hoveredIndex = i)}
+                onmouseleave={(_) => (hoveredIndex = undefined)}
+                class={`slice ${slice.cls}`}
+                cx={160}
+                cy={160}
+                r={75}
+                clip-path="url(#hollow)"
+                stroke-dasharray={`${(slice.perc * circum) / 100} ${circum}`}
+                transform={`rotate(${-90 + slice.rotate}) ${
+                    i === hoveredIndex ? "scale(1.05)" : ""
+                }`}>
+                <title>{`${slice.perc.toFixed(2)}%`}</title>
+            </circle>
+        {/each}
+    </svg>
+    <div class="numbers">
+        <div class="text legend">
+            <div class="key"></div>
+            <div class="label">
+                <span class="stat">{stats.textMessages.toLocaleString()}</span><Translatable
+                    resourceKey={i18nKey("stats.textMessages")} />
+            </div>
+        </div>
+        <div class="image legend">
+            <div class="key"></div>
+            <div class="label">
+                <span class="stat">{stats.imageMessages.toLocaleString()}</span><Translatable
+                    resourceKey={i18nKey("stats.imageMessages")} />
+            </div>
+        </div>
+        <div class="video legend">
+            <div class="key"></div>
+            <div class="label">
+                <span class="stat">{stats.videoMessages.toLocaleString()}</span><Translatable
+                    resourceKey={i18nKey("stats.videoMessages")} />
+            </div>
+        </div>
+        <div class="audio legend">
+            <div class="key"></div>
+            <div class="label">
+                <span class="stat">{stats.audioMessages.toLocaleString()}</span><Translatable
+                    resourceKey={i18nKey("stats.audioMessages")} />
+            </div>
+        </div>
+        <div class="file legend">
+            <div class="key"></div>
+            <div class="label">
+                <span class="stat">{stats.fileMessages.toLocaleString()}</span><Translatable
+                    resourceKey={i18nKey("stats.fileMessages")} />
+            </div>
+        </div>
+        <div class="poll legend">
+            <div class="key"></div>
+            <div class="label">
+                <span class="stat">{stats.polls.toLocaleString()}</span><Translatable
+                    resourceKey={i18nKey("stats.pollMessages")} />
+            </div>
+        </div>
+        <div class="crypto legend">
+            <div class="key"></div>
+            <div class="label">
+                <span class="stat">{stats.cryptoMessages.toLocaleString()}</span><Translatable
+                    resourceKey={i18nKey("stats.cryptoTransfers")} />
+            </div>
+        </div>
+        <div class="giphy legend">
+            <div class="key"></div>
+            <div class="label">
+                <span class="stat">{stats.giphyMessages.toLocaleString()}</span><Translatable
+                    resourceKey={i18nKey("stats.giphyMessages")} />
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="other-stats">
+    <div class="poll-votes">
+        <span class="stat">{stats.pollVotes.toLocaleString()}</span>
+        <Translatable resourceKey={i18nKey("stats.pollVotes")} />
+    </div>
+    <div class="replies">
+        <span class="stat">{stats.replies.toLocaleString()}</span>
+        <Translatable resourceKey={i18nKey("stats.replies")} />
+    </div>
+    <div class="reactions">
+        <span class="stat">{stats.reactions.toLocaleString()}</span>
+        <Translatable resourceKey={i18nKey("stats.reactions")} />
+    </div>
+    <div class="deleted-messages">
+        <span class="stat">{stats.deletedMessages.toLocaleString()}</span>
+        <Translatable resourceKey={i18nKey("stats.deletedMessages")} />
+    </div>
+    <div class="minutes-online">
+        <span class="stat">{$minutesOnlineStore.minutesOnlineThisMonth.toLocaleString()}</span>
+        <Translatable resourceKey={i18nKey("stats.minutesOnlineThisMonth")} />
+    </div>
+    <div class="minutes-online">
+        <span class="stat">{$minutesOnlineStore.minutesOnlineLastMonth.toLocaleString()}</span>
+        <Translatable resourceKey={i18nKey("stats.minutesOnlineLastMonth")} />
+    </div>
+    {#if showReported}
+        <Tooltip longestWord={20} position={"top"} align="middle">
+            <div class="reported-messages">
+                <span>
+                    <span class="stat">{stats.reportedMessages.toLocaleString()}</span>
+                    <Translatable resourceKey={i18nKey("stats.reportedMessages")} />
+                </span>
+                <span class="icon">
+                    <Flag size={$iconSize} color={"var(--accent)"} />
+                </span>
+            </div>
+            {#snippet popupTemplate()}
+                <Translatable resourceKey={i18nKey("stats.reportedMessagesInfo")} />
+            {/snippet}
+        </Tooltip>
+    {/if}
+</div>
+
+<style lang="scss">
+    $saturation: 80%;
+    $lightness: 65%;
+
+    $video-colour: #ed5ec9;
+    $audio-colour: #a65eed;
+    $image-colour: #5eeded;
+    $file-colour: #edc95e;
+    $text-colour: #5e82ed;
+    $poll-colour: #5eed82;
+    $crypto-colour: #a6ed5e;
+    $giphy-colour: #ed5e5e;
+
+    .stat {
+        color: var(--txt);
+        @include font-size(fs-110);
+
+        @include mobile() {
+            @include font-size(fs-90);
+        }
+    }
+
+    .other-stats {
+        display: flex;
+        gap: $sp4;
+        margin-bottom: $sp4;
+        flex-wrap: wrap;
+        justify-content: space-between;
+
+        color: var(--txt-light);
+        @include font(book, normal, fs-80);
+
+        @include mobile() {
+            gap: 6px;
+        }
+
+        .reported-messages {
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: $sp3;
+            color: var(--accent);
+
+            .icon {
+                position: relative;
+                top: $sp2;
+            }
+        }
+    }
+
+    .message-stats {
+        text-align: center;
+    }
+
+    .slice {
+        fill: transparent;
+        transform-origin: 50% 50%;
+        stroke-width: 150px;
+        cursor: pointer;
+    }
+    .pie {
+        width: min(250px, 100%);
+        margin-bottom: $sp5;
+        &.rendered circle {
+            transition: transform 200ms ease-in-out;
+        }
+    }
+
+    .numbers {
+        text-align: left;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        margin-bottom: $sp5;
+        row-gap: $sp3;
+    }
+
+    .background {
+        fill: transparent;
+    }
+
+    .legend {
+        color: var(--txt-light);
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        gap: $sp3;
+
+        .stat {
+            margin-right: $sp3;
+        }
+        .key {
+            width: $sp5;
+            height: $sp5;
+            flex: 0 0 $sp5;
+
+            @include mobile() {
+                width: $sp6;
+                height: $sp6;
+                flex: 0 0 $sp6;
+            }
+        }
+        .label {
+            flex: auto;
+
+            @include mobile() {
+                @include font-size(fs-90);
+
+                display: flex;
+                flex-direction: column;
+            }
+        }
+    }
+
+    .text {
+        stroke: $text-colour;
+        .key {
+            background-color: $text-colour;
+        }
+    }
+
+    .image {
+        stroke: $image-colour;
+        .key {
+            background-color: $image-colour;
+        }
+    }
+
+    .video {
+        stroke: $video-colour;
+        .key {
+            background-color: $video-colour;
+        }
+    }
+
+    .audio {
+        stroke: $audio-colour;
+        .key {
+            background-color: $audio-colour;
+        }
+    }
+
+    .file {
+        stroke: $file-colour;
+        .key {
+            background-color: $file-colour;
+        }
+    }
+
+    .poll {
+        stroke: $poll-colour;
+        .key {
+            background-color: $poll-colour;
+        }
+    }
+
+    .crypto {
+        stroke: $crypto-colour;
+        .key {
+            background-color: $crypto-colour;
+        }
+    }
+
+    .giphy {
+        stroke: $giphy-colour;
+        .key {
+            background-color: $giphy-colour;
+        }
+    }
+</style>
diff --git a/frontend/app/src/components/TextArea.svelte b/frontend/app/src/desktop/shared/TextArea.svelte
similarity index 96%
rename from frontend/app/src/components/TextArea.svelte
rename to frontend/app/src/desktop/shared/TextArea.svelte
index 282e97bbd7..11d45d7e92 100644
--- a/frontend/app/src/components/TextArea.svelte
+++ b/frontend/app/src/desktop/shared/TextArea.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
     import { onMount, type Snippet } from "svelte";
     import { _ } from "svelte-i18n";
-    import { interpolate } from "../i18n/i18n";
-    import { translatable } from "../actions/translatable";
+    import { interpolate } from "@src/i18n/i18n";
+    import { translatable } from "@src/actions/translatable";
     import type { ResourceKey } from "@client";
 
     let inp: HTMLTextAreaElement;
diff --git a/frontend/app/src/components/home/TipThumbnail.svelte b/frontend/app/src/desktop/shared/TipThumbnail.svelte
similarity index 96%
rename from frontend/app/src/components/home/TipThumbnail.svelte
rename to frontend/app/src/desktop/shared/TipThumbnail.svelte
index 000b970ed4..8f6f2b390e 100644
--- a/frontend/app/src/components/home/TipThumbnail.svelte
+++ b/frontend/app/src/desktop/shared/TipThumbnail.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
     import { allUsersStore, AvatarSize, cryptoLookup, type OpenChat } from "@client";
     import { getContext } from "svelte";
-    import Avatar from "../Avatar.svelte";
-    import Tooltip from "../tooltip/Tooltip.svelte";
+    import Avatar from "./Avatar.svelte";
+    import Tooltip from "@src/desktop/ui/tooltip/Tooltip.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/components/Toggle.svelte b/frontend/app/src/desktop/shared/Toggle.svelte
similarity index 96%
rename from frontend/app/src/components/Toggle.svelte
rename to frontend/app/src/desktop/shared/Toggle.svelte
index d0234f1826..cf241babd3 100644
--- a/frontend/app/src/components/Toggle.svelte
+++ b/frontend/app/src/desktop/shared/Toggle.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import type { ResourceKey } from "@client";
     import Checkbox from "./Checkbox.svelte";
-    import Translatable from "./Translatable.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
 
     interface Props {
         checked?: boolean;
diff --git a/frontend/app/src/desktop/shared/TokenInput.svelte b/frontend/app/src/desktop/shared/TokenInput.svelte
new file mode 100644
index 0000000000..df90c33e96
--- /dev/null
+++ b/frontend/app/src/desktop/shared/TokenInput.svelte
@@ -0,0 +1,243 @@
+<script lang="ts">
+    import {
+        cryptoLookup,
+        exchangeRatesLookupStore as exchangeRatesLookup,
+        iconSize,
+        type OpenChat,
+    } from "@client";
+    import { getContext, onMount, untrack } from "svelte";
+    import Alert from "svelte-material-icons/Alert.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { calculateDollarAmount } from "@src/utils/exchange";
+    import Legend from "./Legend.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        amount?: bigint;
+        autofocus?: boolean;
+        minAmount?: bigint;
+        maxAmount?: bigint | undefined;
+        ledger: string;
+        valid?: boolean;
+        status?: "ok" | "zero" | "too_low" | "too_high";
+        label?: string;
+        transferFees?: bigint | undefined;
+        showDollarAmount?: boolean;
+    }
+
+    let {
+        amount = $bindable(BigInt(0)),
+        autofocus = false,
+        minAmount = BigInt(0),
+        maxAmount = undefined,
+        ledger,
+        valid = $bindable(false),
+        status = $bindable("zero"),
+        label = "tokenTransfer.amount",
+        transferFees = undefined,
+        showDollarAmount = false,
+    }: Props = $props();
+
+    valid;
+
+    let inputElement: HTMLInputElement | undefined = $state();
+
+    onMount(() => {
+        if (amount > BigInt(0) && inputElement) {
+            inputElement.value = client.formatTokens(amount, tokenDecimals, ".", true);
+        }
+    });
+
+    function onKeyup() {
+        trimDecimals();
+        const value = inputElement?.value ?? "";
+        const inputAmount = Math.round(Number(value) * Math.pow(10, tokenDecimals));
+        if (!isNaN(inputAmount)) {
+            const [integral, fractional] = value.split(".");
+            let units = BigInt(integral) * BigInt(10) ** BigInt(tokenDecimals);
+
+            if (fractional !== undefined) {
+                units += BigInt(fractional.padEnd(tokenDecimals, "0"));
+            }
+
+            amount = units;
+        }
+    }
+
+    function max() {
+        if (maxAmount !== undefined) {
+            amount = maxAmount;
+        }
+        validate();
+    }
+
+    function validate() {
+        untrack(() => {
+            if (amount === BigInt(0)) {
+                status = "zero";
+            } else if (amount < minAmount) {
+                status = "too_low";
+            } else if (maxAmount !== undefined && amount > maxAmount) {
+                status = "too_high";
+            } else {
+                status = "ok";
+            }
+            valid = status === "ok";
+        });
+    }
+
+    function trimDecimals() {
+        const value = inputElement?.value ?? "";
+        const fractional = value.split(".")[1];
+        if (fractional !== undefined) {
+            const toTrim = fractional.length - tokenDecimals;
+            if (toTrim > 0 && inputElement) {
+                inputElement.value = value.substring(0, value.length - toTrim);
+            }
+        }
+    }
+    let tokenDetails = $derived($cryptoLookup.get(ledger)!);
+    let symbol = $derived(tokenDetails?.symbol);
+    let tokenDecimals = $derived(tokenDetails?.decimals ?? 0);
+    let amountInUsd = $derived(
+        tokenDetails !== undefined && showDollarAmount
+            ? calculateDollarAmount(
+                  amount,
+                  $exchangeRatesLookup.get(tokenDetails.symbol.toLowerCase())?.toUSD,
+                  tokenDetails.decimals,
+              )
+            : "???",
+    );
+    let minAmountFormatted = $derived(`${client.formatTokens(minAmount, tokenDecimals)} ${symbol}`);
+    $effect(() => {
+        // TODO - worry about this
+        if (inputElement !== undefined) {
+            trimDecimals();
+            const validateResult = client.validateTokenInput(inputElement.value, tokenDecimals);
+            if (validateResult.amount !== amount) {
+                inputElement.value = client.formatTokens(amount, tokenDecimals, ".", true);
+            }
+            validate();
+        }
+    });
+    $effect(() => {
+        // Re-validate whenever minAmount or maxAmount changes
+        if (minAmount || maxAmount) {
+            validate();
+        }
+    });
+</script>
+
+<div class="label">
+    <Legend label={i18nKey(label)} rules={i18nKey(symbol)} />
+    {#if maxAmount !== undefined}
+        <div onclick={max} class="max">
+            <Translatable resourceKey={i18nKey("tokenTransfer.max")} />
+        </div>
+    {/if}
+    {#if showDollarAmount && amount > 0}
+        <div class="usd">({amountInUsd} USD)</div>
+    {:else if minAmount > BigInt(0)}
+        <div class="min">
+            <Translatable
+                resourceKey={i18nKey("tokenTransfer.min", { amount: minAmountFormatted })} />
+        </div>
+    {/if}
+</div>
+<div class="wrapper">
+    {#if transferFees !== undefined && transferFees > 0n}
+        <div class="fee">
+            <Alert size={$iconSize} color={"var(--warn)"} />
+            <span>
+                <Translatable
+                    resourceKey={i18nKey("tokenTransfer.fee", {
+                        fee: client.formatTokens(transferFees, tokenDecimals),
+                        token: symbol,
+                    })} />
+            </span>
+        </div>
+    {/if}
+    <input
+        {autofocus}
+        class="amount-val"
+        min={Number(minAmount) / Math.pow(10, tokenDecimals)}
+        max={maxAmount !== undefined ? Number(maxAmount) / Math.pow(10, tokenDecimals) : undefined}
+        type="number"
+        step="0.00000001"
+        bind:this={inputElement}
+        onkeyup={onKeyup}
+        placeholder="0" />
+</div>
+
+<style lang="scss">
+    .wrapper {
+        position: relative;
+    }
+
+    .label {
+        display: flex;
+        align-items: center;
+        gap: $sp3;
+
+        .max {
+            transition: background ease-in-out 200ms;
+            background: var(--button-bg);
+            color: var(--button-txt);
+            padding: 0 $sp3;
+            border-radius: var(--rd);
+            cursor: pointer;
+            border: none;
+            @include font(book, normal, fs-50, 20);
+
+            @media (hover: hover) {
+                &:hover {
+                    background: var(--button-hv);
+                }
+            }
+        }
+
+        .usd,
+        .min {
+            @include font(light, normal, fs-60);
+            color: var(--txt-light);
+            flex: 1;
+            text-align: right;
+        }
+    }
+
+    .amount-val {
+        width: 100%;
+        display: block;
+        text-align: start;
+
+        @include input();
+
+        &::placeholder {
+            color: var(--placeholder);
+        }
+    }
+
+    .fee {
+        position: absolute;
+        right: $sp3;
+        top: 12px;
+        display: flex;
+        gap: $sp3;
+        align-items: center;
+        @include font(book, normal, fs-60);
+    }
+
+    /* Chrome, Safari, Edge, Opera */
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+
+    /* Firefox */
+    input[type="number"] {
+        -moz-appearance: textfield;
+    }
+</style>
diff --git a/frontend/app/src/desktop/shared/TruncatedAccount.svelte b/frontend/app/src/desktop/shared/TruncatedAccount.svelte
new file mode 100644
index 0000000000..605202d555
--- /dev/null
+++ b/frontend/app/src/desktop/shared/TruncatedAccount.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+    import { iconSize } from "@client";
+    import type { Snippet } from "svelte";
+    import { _ } from "svelte-i18n";
+    import ContentCopy from "svelte-material-icons/ContentCopy.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import { copyToClipboard } from "@src/utils/urls";
+
+    interface Props {
+        account: string;
+        centered?: boolean;
+        disableCopy?: boolean;
+        children?: Snippet;
+    }
+
+    let { account, centered = false, disableCopy = false, children }: Props = $props();
+
+    function collapseAccount(account: string) {
+        if (account.length > 23) {
+            return account.slice(0, 10) + "..." + account.slice(account.length - 10);
+        }
+        return account;
+    }
+
+    function copy() {
+        copyToClipboard(account).then((success) => {
+            if (success) {
+                toastStore.showSuccessToast(i18nKey("accountCopiedToClipboard"));
+            } else {
+                toastStore.showFailureToast(
+                    i18nKey("failedToCopyToClipboard", {
+                        account,
+                    }),
+                );
+            }
+        });
+    }
+</script>
+
+<div class="wrapper" class:centered>
+    {@render children?.()}
+    <div class="principal">
+        {collapseAccount(account)}
+    </div>
+    {#if !disableCopy}
+        <div class="copy" title={$_("copyToClipboard")} onclick={copy}>
+            <ContentCopy size={$iconSize} color={"var(--icon-txt)"} />
+        </div>
+    {/if}
+</div>
+
+<style lang="scss">
+    .centered {
+        text-align: center;
+    }
+
+    .wrapper {
+        display: flex;
+        align-items: center;
+        gap: $sp3;
+        .principal {
+            @include ellipsis();
+            @include font(book, normal, fs-80);
+            color: var(--primary);
+        }
+
+        &.centered {
+            justify-content: center;
+        }
+
+        .copy {
+            display: flex;
+            cursor: pointer;
+        }
+    }
+</style>
diff --git a/frontend/app/src/components/home/UnreadCount.svelte b/frontend/app/src/desktop/shared/UnreadCount.svelte
similarity index 96%
rename from frontend/app/src/components/home/UnreadCount.svelte
rename to frontend/app/src/desktop/shared/UnreadCount.svelte
index 68b9e0244b..b790e8fee1 100644
--- a/frontend/app/src/components/home/UnreadCount.svelte
+++ b/frontend/app/src/desktop/shared/UnreadCount.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { _ } from "svelte-i18n";
-    import { pop } from "../../utils/transition";
+    import { pop } from "@src/utils/transition";
     import { emptyUnreadCounts } from "@client";
 
     interface Props {
diff --git a/frontend/app/src/components/UserPill.svelte b/frontend/app/src/desktop/shared/UserPill.svelte
similarity index 100%
rename from frontend/app/src/components/UserPill.svelte
rename to frontend/app/src/desktop/shared/UserPill.svelte
diff --git a/frontend/app/src/desktop/shared/UsernameInput.svelte b/frontend/app/src/desktop/shared/UsernameInput.svelte
new file mode 100644
index 0000000000..463aedf155
--- /dev/null
+++ b/frontend/app/src/desktop/shared/UsernameInput.svelte
@@ -0,0 +1,106 @@
+<script lang="ts">
+    import type { OpenChat } from "@client";
+    import { onMount } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Input from "./Input.svelte";
+
+    const MIN_EXTANT_USERNAME_LENGTH = 3;
+    const MAX_USERNAME_LENGTH = 20;
+
+    interface Props {
+        client: OpenChat;
+        originalUsername: string;
+        username: string;
+        usernameValid: boolean;
+        error?: string | undefined;
+        checking?: boolean;
+        disabled?: boolean;
+        autofocus?: boolean;
+        children?: import("svelte").Snippet;
+    }
+
+    let {
+        client,
+        originalUsername,
+        username = $bindable(),
+        usernameValid = $bindable(),
+        error = $bindable(undefined),
+        checking = $bindable(false),
+        disabled = false,
+        autofocus = false,
+        children,
+    }: Props = $props();
+
+    error;
+
+    let timer: number | undefined = undefined;
+    let currentPromise: Promise<unknown> | undefined;
+
+    let invalid = $derived(originalUsername !== username && !usernameValid && !checking);
+
+    onMount(() => {
+        username = originalUsername;
+        usernameValid = originalUsername?.length > 0;
+    });
+
+    function checkUsername(value: string) {
+        const promise = client
+            .checkUsername(value, false)
+            .then((resp) => {
+                if (promise !== currentPromise) {
+                    return;
+                }
+
+                checking = false;
+
+                if (value.toLowerCase() === originalUsername.toLowerCase() || resp === "success") {
+                    usernameValid = true;
+                    error = undefined;
+                    return;
+                }
+
+                if (resp === "username_taken") {
+                    error = "register.usernameTaken";
+                }
+            })
+            .catch((err) => {
+                error = "register.errorCheckingUsername";
+                client.logError("Unable to check username: ", err);
+                checking = false;
+            });
+
+        currentPromise = promise;
+    }
+
+    function onChange(val: string | number | bigint) {
+        if (typeof val !== "string") return;
+
+        username = val;
+        usernameValid = false;
+        error = undefined;
+
+        window.clearTimeout(timer);
+        checking = false;
+
+        if (
+            client.isUsernameValid(username) ||
+            username.toLowerCase() === originalUsername.toLowerCase()
+        ) {
+            checking = true;
+            timer = window.setTimeout(() => checkUsername(username), 350);
+        }
+    }
+</script>
+
+<Input
+    {onChange}
+    value={originalUsername}
+    {disabled}
+    {invalid}
+    {autofocus}
+    minlength={MIN_EXTANT_USERNAME_LENGTH}
+    maxlength={MAX_USERNAME_LENGTH}
+    countdown
+    placeholder={i18nKey("register.enterUsername")}>
+    {@render children?.()}
+</Input>
diff --git a/frontend/app/src/desktop/shell/App.svelte b/frontend/app/src/desktop/shell/App.svelte
new file mode 100644
index 0000000000..ff78513e6f
--- /dev/null
+++ b/frontend/app/src/desktop/shell/App.svelte
@@ -0,0 +1,721 @@
+<script lang="ts">
+    import "@styles/global.scss";
+
+    import "@src/i18n/i18n";
+    import { reviewingTranslations } from "@src/i18n/i18n";
+    import { trackedEffect } from "@src/utils/effects.svelte";
+    import { detectNeedsSafeInset, setupKeyboardTracking } from "@src/utils/safe_area";
+    import { rtlStore } from "@src/stores/rtl";
+    import { snowing } from "@src/stores/snow";
+    import { incomingVideoCall } from "@src/stores/video";
+    import { broadcastLoggedInUser } from "@src/stores/xframe";
+    import { currentTheme } from "@src/theme/themes";
+    import "@src/utils/markdown";
+    import {
+        expectNewFcmToken,
+        expectNotificationTap,
+        expectPushNotifications,
+    } from "@src/utils/native/notification_channels";
+    import "@src/utils/scream";
+    import {
+        isLandingPageRoute,
+        isScrollingRoute,
+        redirectLandingPageLinksIfNecessary,
+    } from "@src/utils/urls";
+    import { portalState } from "component-lib";
+    import {
+        type ChatIdentifier,
+        type DexId,
+        type DiamondMembershipFees,
+        OpenChat,
+        PremiumItem,
+        type UpdateMarketMakerConfigArgs,
+        type VideoCallType,
+        anonUserStore,
+        botState,
+        chatListScopeStore,
+        fontSize,
+        identityStateStore,
+        inititaliseLogger,
+        notFoundStore,
+        routeForChatIdentifier,
+        routeForScope,
+        routeStore,
+        subscribe,
+    } from "@client";
+    import { navigate } from "@src/utils/navigation";
+    import { onMount, setContext } from "svelte";
+    import { overrideItemIdKeyNameBeforeInitialisingDndZones } from "svelte-dnd-action";
+    import { _, isLoading } from "svelte-i18n";
+    import {
+        clearAllNotifications,
+        deleteFcmToken,
+        getFcmToken,
+        svelteReady,
+    } from "tauri-plugin-oc-api";
+    import Head from "./Head.svelte";
+    import Profiler from "./Profiler.svelte";
+    import Router from "./Router.svelte";
+    import Snow from "@src/ui/Snow.svelte";
+    import UpgradeBanner from "./UpgradeBanner.svelte";
+    import Witch from "@src/ui/Witch.svelte";
+    import InstallPrompt from "./InstallPrompt.svelte";
+    import NotificationsBar from "./NotificationsBar.svelte";
+    import ActiveCall from "@src/desktop/features/calls/ActiveCall.svelte";
+    import IncomingCall from "@src/desktop/features/calls/IncomingCall.svelte";
+    import VideoCallAccessRequests from "@src/desktop/features/calls/VideoCallAccessRequests.svelte";
+
+    overrideItemIdKeyNameBeforeInitialisingDndZones("_id");
+
+    const logger = inititaliseLogger(
+        import.meta.env.OC_ROLLBAR_ACCESS_TOKEN!,
+        import.meta.env.OC_WEBSITE_VERSION!,
+        import.meta.env.OC_BUILD_ENV!,
+    );
+
+    function createOpenChatClient(): OpenChat {
+        const client = new OpenChat({
+            mobileLayout: import.meta.env.OC_MOBILE_LAYOUT,
+            icUrl: import.meta.env.OC_IC_URL,
+            webAuthnOrigin: import.meta.env.OC_WEBAUTHN_ORIGIN,
+            iiDerivationOrigin: import.meta.env.OC_II_DERIVATION_ORIGIN,
+            openStorageIndexCanister: import.meta.env.OC_STORAGE_INDEX_CANISTER!,
+            groupIndexCanister: import.meta.env.OC_GROUP_INDEX_CANISTER!,
+            notificationsCanister: import.meta.env.OC_NOTIFICATIONS_CANISTER!,
+            identityCanister: import.meta.env.OC_IDENTITY_CANISTER!,
+            onlineCanister: import.meta.env.OC_ONLINE_CANISTER!,
+            userIndexCanister: import.meta.env.OC_USER_INDEX_CANISTER!,
+            translationsCanister: import.meta.env.OC_TRANSLATIONS_CANISTER!,
+            registryCanister: import.meta.env.OC_REGISTRY_CANISTER!,
+            internetIdentityUrl: import.meta.env.OC_INTERNET_IDENTITY_URL!,
+            nfidUrl: import.meta.env.OC_NFID_URL!,
+            userGeekApiKey: import.meta.env.OC_USERGEEK_APIKEY!,
+            videoBridgeUrl: import.meta.env.OC_VIDEO_BRIDGE_URL!,
+            meteredApiKey: import.meta.env.OC_METERED_APIKEY!,
+            blobUrlPattern: import.meta.env.OC_BLOB_URL_PATTERN!,
+            canisterUrlPath: import.meta.env.OC_CANISTER_URL_PATH!,
+            proposalBotCanister: import.meta.env.OC_PROPOSALS_BOT_CANISTER!,
+            marketMakerCanister: import.meta.env.OC_MARKET_MAKER_CANISTER!,
+            signInWithEmailCanister: import.meta.env.OC_SIGN_IN_WITH_EMAIL_CANISTER!,
+            signInWithEthereumCanister: import.meta.env.OC_SIGN_IN_WITH_ETHEREUM_CANISTER!,
+            signInWithSolanaCanister: import.meta.env.OC_SIGN_IN_WITH_SOLANA_CANISTER!,
+            oneSecForwarderCanister: import.meta.env.OC_ONESEC_FORWARDER_CANISTER!,
+            oneSecMinterCanister: import.meta.env.OC_ONESEC_MINTER_CANISTER!,
+            i18nFormatter: $_,
+            logger,
+            websiteVersion: import.meta.env.OC_WEBSITE_VERSION!,
+            rollbarApiKey: import.meta.env.OC_ROLLBAR_ACCESS_TOKEN!,
+            env: import.meta.env.OC_BUILD_ENV!,
+            bitcoinMainnetEnabled: import.meta.env.OC_BITCOIN_MAINNET_ENABLED! === "true",
+            vapidPublicKey: import.meta.env.OC_VAPID_PUBLIC_KEY!,
+            accountLinkingCodesEnabled:
+                import.meta.env.OC_ACCOUNT_LINKING_CODES_ENABLED! === "true",
+            baseOrigin: import.meta.env.OC_BASE_ORIGIN!,
+        });
+
+        return client;
+    }
+
+    let client: OpenChat = createOpenChatClient();
+    setContext<OpenChat>("client", client);
+
+    let profileTrace = client.showTrace();
+    // I can't (yet) find a way to avoid using "any" here. Will try to improve but need to commit this crime for the time being
+    let videoCallElement: any;
+    let landingPageRoute = $derived(isLandingPageRoute($routeStore));
+    let homeRoute = $derived($routeStore.kind === "home_route");
+    let showLandingPage = $derived(
+        landingPageRoute || (homeRoute && $identityStateStore.kind === "anon" && $anonUserStore),
+    );
+    let isFirefox = navigator.userAgent.indexOf("Firefox") >= 0;
+    let burstPath = $derived(
+        $currentTheme.mode === "dark" ? "/assets/burst_dark" : "/assets/burst_light",
+    );
+    let burstUrl = $derived(isFirefox ? `${burstPath}.png` : `${burstPath}.svg`);
+    let burstFixed = $derived(isScrollingRoute($routeStore));
+
+    trackedEffect("rtl", () => {
+        // subscribe to the rtl store so that we can set the overall page direction at the right time
+        document.dir = $rtlStore ? "rtl" : "ltr";
+    });
+
+    trackedEffect("landing-page", () => {
+        if (!$notFoundStore && showLandingPage) {
+            document.body.classList.add("landing-page");
+        } else {
+            document.body.classList.remove("landing-page");
+        }
+    });
+
+    trackedEffect("font-size", () => {
+        console.log("Setting font size to: ", $fontSize);
+        document.documentElement.style.setProperty("--font-size", `${$fontSize}px`);
+    });
+
+    trackedEffect("calculate-height", calculateHeight);
+
+    onMount(() => {
+        const unsubs = [
+            subscribe("startVideoCall", startVideoCall),
+            subscribe("hangup", hangup),
+            subscribe("askToSpeak", askToSpeak),
+            subscribe("userLoggedIn", onUserLoggedIn),
+        ];
+        window.addEventListener("orientationchange", calculateHeight);
+        window.addEventListener("unhandledrejection", unhandledError);
+        if (!client.isNativeApp()) {
+            window.visualViewport?.addEventListener("resize", calculateHeight);
+        }
+
+        redirectLandingPageLinksIfNecessary();
+
+        //@ts-ignore
+        window.platformModerator = {
+            addHotGroupExclusion,
+            deleteFrozenGroup,
+            deleteMessage,
+            deleteChannelMessage,
+            freezeGroup,
+            removeHotGroupExclusion,
+            setCommunityModerationFlags,
+            unfreezeGroup,
+            addMessageFilter,
+            removeMessageFilter,
+            reportedMessages,
+        };
+
+        //@ts-ignore
+        window.platformOperator = {
+            addRemoveSwapProvider,
+            setGroupUpgradeConcurrency,
+            setCommunityUpgradeConcurrency,
+            setUserUpgradeConcurrency,
+            markLocalGroupIndexFull,
+            reinstateMissedDailyClaims,
+            setAirdropConfig,
+            setDiamondMembershipFees,
+            setTokenEnabled,
+            stakeNeuronForSubmittingProposals,
+            topUpNeuronForSubmittingProposals,
+            updateMarketMakerConfig,
+            withdrawFromIcpSwap,
+            setPremiumItemCost,
+            updateBlockedUsernamePatterns,
+            pauseEventLoop: () => client.pauseEventLoop(),
+            resumeEventLoop: () => client.resumeEventLoop(),
+        };
+
+        const unsub = _.subscribe((formatter) => {
+            botState.messageFormatter = formatter;
+        });
+
+        if (client.isNativeAndroid()) {
+            // Inform the native android app that svelte code is ready! SetTimeout
+            // delays the fn execution until the call stack is empty, just to
+            // make sure anything else non-async that needs to run is done.
+            //
+            // Once Svelte app is ready, native code can start pushing events.
+            setTimeout(svelteReady);
+        }
+
+        const unsubKeyboard = setupKeyboardTracking();
+
+        return () => {
+            window.removeEventListener("orientationchange", calculateHeight);
+            window.removeEventListener("unhandledrejection", unhandledError);
+            if (!client.isNativeApp()) {
+                window.visualViewport?.removeEventListener("resize", calculateHeight);
+            }
+            unsubs.forEach((u) => u());
+            unsub();
+            unsubKeyboard();
+        };
+    });
+
+    // Guards the one-time native setup (listeners + logout hook) so it runs once
+    // per page session. setupNativeApp() itself runs again on every userLoggedIn
+    // (account switch), but only the FCM token registration should repeat —
+    // re-registering listeners or the logout hook would stack duplicate handlers.
+    let nativeSetupDone = false;
+
+    // Sets up push notifications and FCM token management for native apps
+    function setupNativeApp() {
+        const addFcmToken = (token: string) => {
+            client
+                .addFcmToken(token)
+                .then(() => console.info("FCM token updated successfully"))
+                .catch(console.error);
+        };
+
+        if (!client.isNativeApp()) {
+            return;
+        }
+
+        // Ask for the current FCM token and register it unconditionally on every
+        // login. Registration is last-login-wins on the backend, so this also
+        // reclaims a token still bound to a previous account on this device (a
+        // fcm_token_exists pre-check would wrongly skip that).
+        getFcmToken().then((token) => {
+            if (!token) {
+                // TODO do we handle this somehow? Debounce, try again?
+                console.error("No FCM token received");
+                return;
+            }
+
+            addFcmToken(token);
+        });
+
+        // Everything below registers session-scoped handlers and must run once.
+        if (nativeSetupDone) {
+            return;
+        }
+        nativeSetupDone = true;
+
+        // Listen for incoming push notifications from Firebase; also asks
+        // for permission to show notifications if not already granted.
+        expectPushNotifications().catch(console.error);
+
+        // Listen for notifications user has tapped on
+        expectNotificationTap().catch(console.error);
+
+        // Expect FCM token refreshes
+        expectNewFcmToken(addFcmToken);
+
+        // Best-effort push hygiene on sign-out, while the identity is
+        // still valid: unbind this device's token from the account,
+        // delete the device token (pushes to it then dead-end at FCM,
+        // and the next login mints + registers a fresh one), and empty
+        // the tray so nothing from this account lingers.
+        client.onLogout(async () => {
+            const token = await getFcmToken().catch(() => null);
+            if (token) {
+                await client.removeFcmToken(token).catch(console.error);
+            }
+            await deleteFcmToken().catch(console.error);
+            await clearAllNotifications().catch(console.error);
+        });
+    }
+
+    if ($identityStateStore.kind === "logged_in") {
+        setupNativeApp();
+    }
+
+    function onUserLoggedIn(userId: string) {
+        setupNativeApp();
+        broadcastLoggedInUser(userId);
+    }
+
+    function addHotGroupExclusion(chatId: string): void {
+        client.addHotGroupExclusion({ kind: "group_chat", groupId: chatId }).then((success) => {
+            if (success) {
+                console.log("Hot group exclusion added", chatId);
+            } else {
+                console.log("Failed to add hot group exclusion", chatId);
+            }
+        });
+    }
+
+    function deleteFrozenGroup(chatId: string): void {
+        client.deleteFrozenGroup({ kind: "group_chat", groupId: chatId }).then((success) => {
+            if (success) {
+                console.log("Group deleted", chatId);
+            } else {
+                console.log("Failed to delete frozen group", chatId);
+            }
+        });
+    }
+
+    function freezeGroup(chatId: string, reason: string | undefined): void {
+        client.freezeGroup({ kind: "group_chat", groupId: chatId }, reason).then((success) => {
+            if (success) {
+                console.log("Group frozen", chatId);
+            } else {
+                console.log("Failed to freeze group", chatId);
+            }
+        });
+    }
+
+    function removeHotGroupExclusion(chatId: string): void {
+        client.removeHotGroupExclusion({ kind: "group_chat", groupId: chatId }).then((success) => {
+            if (success) {
+                console.log("Hot group exclusion removed", chatId);
+            } else {
+                console.log("Failed to remove hot group exclusion", chatId);
+            }
+        });
+    }
+
+    function setCommunityModerationFlags(communityId: string, flags: number): void {
+        client.setCommunityModerationFlags(communityId, flags).then((success) => {
+            if (success) {
+                console.log("Community moderation flags updated", communityId);
+            } else {
+                console.log("Failed to set community moderation flags", communityId);
+            }
+        });
+    }
+
+    function unfreezeGroup(chatId: string): void {
+        client.unfreezeGroup({ kind: "group_chat", groupId: chatId }).then((success) => {
+            if (success) {
+                console.log("Group unfrozen", chatId);
+            } else {
+                console.log("Failed to unfreeze group", chatId);
+            }
+        });
+    }
+
+    function addMessageFilter(regex: string): void {
+        client.addMessageFilter(regex);
+    }
+
+    function removeMessageFilter(id: bigint): void {
+        client.removeMessageFilter(id);
+    }
+
+    function reportedMessages(userId?: string): void {
+        console.log(client.reportedMessages(userId));
+    }
+
+    function deleteChannelMessage(
+        communityId: string,
+        channelId: number,
+        messageId: bigint,
+        threadRootMessageIndex?: number | undefined,
+    ): void {
+        client
+            .deleteMessage(
+                { kind: "channel", communityId, channelId },
+                threadRootMessageIndex,
+                messageId,
+                true,
+            )
+            .then((success) => {
+                if (success) {
+                    console.log(
+                        "Message deleted",
+                        communityId,
+                        channelId,
+                        messageId,
+                        threadRootMessageIndex,
+                    );
+                } else {
+                    console.log(
+                        "Failed to delete message",
+                        communityId,
+                        channelId,
+                        messageId,
+                        threadRootMessageIndex,
+                    );
+                }
+            });
+    }
+
+    function deleteMessage(
+        chatId: string,
+        messageId: bigint,
+        threadRootMessageIndex?: number | undefined,
+    ): void {
+        client
+            .deleteMessage(
+                { kind: "group_chat", groupId: chatId },
+                threadRootMessageIndex,
+                messageId,
+                true,
+            )
+            .then((success) => {
+                if (success) {
+                    console.log("Message deleted", chatId, messageId, threadRootMessageIndex);
+                } else {
+                    console.log(
+                        "Failed to delete message",
+                        chatId,
+                        messageId,
+                        threadRootMessageIndex,
+                    );
+                }
+            });
+    }
+
+    function addRemoveSwapProvider(swapProvider: DexId, add: boolean): void {
+        client.addRemoveSwapProvider(swapProvider, add).then((success) => {
+            if (success) {
+                const action = add ? "Added" : "Removed";
+                console.log(`${action} swap provider`, swapProvider);
+            } else {
+                console.error("Failed to add/remove swap provider");
+            }
+        });
+    }
+
+    function setGroupUpgradeConcurrency(value: number): void {
+        client.setGroupUpgradeConcurrency(value).then((success) => {
+            if (success) {
+                console.log("Group upgrade concurrency set", value);
+            } else {
+                console.error("Failed to set group upgrade concurrency", value);
+            }
+        });
+    }
+
+    function setCommunityUpgradeConcurrency(value: number): void {
+        client.setCommunityUpgradeConcurrency(value).then((success) => {
+            if (success) {
+                console.log("Community upgrade concurrency set", value);
+            } else {
+                console.error("Failed to set community upgrade concurrency", value);
+            }
+        });
+    }
+
+    function setUserUpgradeConcurrency(value: number): void {
+        client.setUserUpgradeConcurrency(value).then((success) => {
+            if (success) {
+                console.log("User upgrade concurrency set", value);
+            } else {
+                console.error("Failed to set user upgrade concurrency", value);
+            }
+        });
+    }
+
+    function markLocalGroupIndexFull(canisterId: string, full: boolean): void {
+        client.markLocalGroupIndexFull(canisterId, full).then((success) => {
+            if (success) {
+                console.log("LocalGroupIndex marked as full", full);
+            } else {
+                console.error("Failed to mark LocalGroupIndex as full", full);
+            }
+        });
+    }
+
+    function reinstateMissedDailyClaims(userId: string, days: number[]): void {
+        client.reinstateMissedDailyClaims(userId, days).then((success) => {
+            if (success) {
+                console.log("Reinstated missed daily claims");
+            } else {
+                console.error("Failed to reinstate missed daily claims");
+            }
+        });
+    }
+
+    function setAirdropConfig(
+        channelId: number,
+        channelName: string,
+        communityId?: string,
+        communityName?: string,
+    ): void {
+        client
+            .setAirdropConfig(channelId, channelName, communityId, communityName)
+            .then((success) => {
+                if (success) {
+                    console.log("Airdrop config set");
+                } else {
+                    console.error("Failed to set airdrop config");
+                }
+            });
+    }
+
+    function setDiamondMembershipFees(fees: DiamondMembershipFees[]): void {
+        client.setDiamondMembershipFees(fees).then((success) => {
+            if (success) {
+                console.log("Diamond membership fees set", fees);
+            } else {
+                console.error("Failed to set diamond membership fees", fees);
+            }
+        });
+    }
+
+    function setTokenEnabled(ledger: string, enabled: boolean): void {
+        client.setTokenEnabled(ledger, enabled).then((success) => {
+            const status = enabled ? "enabled" : "disabled";
+            if (success) {
+                console.log(`Token ${status}`);
+            } else {
+                console.error(`Failed to set token ${status}`);
+            }
+        });
+    }
+
+    function stakeNeuronForSubmittingProposals(governanceCanisterId: string, stake: bigint): void {
+        client.stakeNeuronForSubmittingProposals(governanceCanisterId, stake).then((success) => {
+            if (success) {
+                console.log("Neuron staked successfully");
+            } else {
+                console.error("Failed to stake neuron");
+            }
+        });
+    }
+
+    function topUpNeuronForSubmittingProposals(governanceCanisterId: string, amount: bigint): void {
+        client.topUpNeuronForSubmittingProposals(governanceCanisterId, amount).then((success) => {
+            if (success) {
+                console.log("Neuron topped up successfully");
+            } else {
+                console.error("Failed to top up neuron");
+            }
+        });
+    }
+
+    function updateMarketMakerConfig(config: UpdateMarketMakerConfigArgs): void {
+        client.updateMarketMakerConfig(config).then((resp) => {
+            if (resp === "success") {
+                console.log("Market maker config updated");
+            } else {
+                console.error("Failed to update market maker config", resp);
+            }
+        });
+    }
+
+    function withdrawFromIcpSwap(
+        userId: string,
+        swapId: bigint,
+        inputToken: boolean,
+        amount: bigint | undefined,
+        fee: bigint | undefined,
+    ): void {
+        client.withdrawFromIcpSwap(userId, swapId, inputToken, amount, fee);
+    }
+
+    function setPremiumItemCost(item: PremiumItem, chitCost: number): void {
+        client.setPremiumItemCost(item, chitCost);
+    }
+
+    function updateBlockedUsernamePatterns(pattern: string, add: boolean) {
+        client.updateBlockedUsernamePatterns(pattern, add);
+    }
+
+    function calculateHeight() {
+        // fix the issue with 100vh layouts in various mobile browsers.
+        // In PWA (home-screen) mode on iOS, window.innerHeight does NOT shrink
+        // when the virtual keyboard appears, but visualViewport.height does.
+        // The native Tauri app has its own keyboard handling via expectWindowInsetChange,
+        // so we only use visualViewport.height for non-native builds.
+        const viewportHeight =
+            !client.isNativeApp() && window.visualViewport
+                ? window.visualViewport.height
+                : window.innerHeight;
+        document.documentElement.style.setProperty("--vh", `${viewportHeight * 0.01}px`);
+    }
+
+    function unhandledError(ev: Event) {
+        if (
+            ev instanceof ErrorEvent &&
+            (ev.message.includes("ResizeObserver loop completed with undelivered notifications") ||
+                ev.message.includes("ResizeObserver loop limit exceeded"))
+        ) {
+            return;
+        }
+
+        logger?.error("Unhandled error: ", ev);
+        if (
+            ev instanceof PromiseRejectionEvent &&
+            (ev.reason?.name === "SessionExpiryError" ||
+                ev.reason?.name === "InvalidDelegationError")
+        ) {
+            client.logout();
+            ev.preventDefault();
+        }
+    }
+
+    function resize() {
+        portalState.close();
+        calculateHeight();
+    }
+
+    function startVideoCall(payload: {
+        chatId: ChatIdentifier;
+        callType: VideoCallType;
+        join: boolean;
+    }) {
+        videoCallElement?.startOrJoinVideoCall(payload.chatId, payload.callType, payload.join);
+    }
+
+    function askToSpeak() {
+        videoCallElement?.askToSpeak();
+    }
+
+    function hangup() {
+        videoCallElement?.hangup();
+    }
+
+    function joinVideoCall(chatId: ChatIdentifier, callType: VideoCallType) {
+        incomingVideoCall.set(undefined);
+        navigate(routeForChatIdentifier("none", chatId));
+        videoCallElement?.startOrJoinVideoCall(chatId, callType, true);
+    }
+
+    if (client.isNativeAndroid()) {
+        document.body.classList.add("native-android");
+    }
+    detectNeedsSafeInset();
+</script>
+
+{#if $currentTheme.burst}
+    <div
+        class:fixed={burstFixed}
+        class="burst-wrapper"
+        style={`background-image: url(${burstUrl})`}>
+    </div>
+{/if}
+
+<Head />
+
+<ActiveCall
+    {showLandingPage}
+    onClearSelection={() => navigate(routeForScope($chatListScopeStore))}
+    bind:this={videoCallElement} />
+
+<VideoCallAccessRequests />
+
+<IncomingCall onJoinVideoCall={joinVideoCall} />
+
+<Witch background />
+
+{#if !client.isNativeApp()}
+    <InstallPrompt />
+{/if}
+
+<NotificationsBar />
+
+{#if $identityStateStore.kind === "anon" || $identityStateStore.kind === "logging_in" || $identityStateStore.kind === "registering" || $identityStateStore.kind === "logged_in" || $identityStateStore.kind === "loading_user"}
+    {#if !$isLoading || $reviewingTranslations}
+        <Router {showLandingPage} />
+    {/if}
+{/if}
+
+{#if profileTrace}
+    <Profiler />
+{/if}
+
+<UpgradeBanner />
+
+{#if $snowing}
+    <Snow />
+{/if}
+
+<svelte:window onresize={resize} onerror={unhandledError} onorientationchange={resize} />
+
+<style lang="scss">
+    .burst-wrapper {
+        overflow: hidden;
+        max-width: 100%;
+        width: 100%;
+        position: absolute;
+        height: 100vh;
+        min-height: 100%;
+        pointer-events: none;
+        background-repeat: no-repeat;
+        background-size: 1400px;
+        background-origin: 50% 50%;
+        background-position: right 20% top toRem(150);
+
+        &.fixed {
+            position: fixed;
+        }
+
+        @include mobile() {
+            background-size: 800px;
+            background-position: left 0 top toRem(150);
+        }
+    }
+</style>
diff --git a/frontend/app/src/components/BackgroundLogo.svelte b/frontend/app/src/desktop/shell/BackgroundLogo.svelte
similarity index 100%
rename from frontend/app/src/components/BackgroundLogo.svelte
rename to frontend/app/src/desktop/shell/BackgroundLogo.svelte
diff --git a/frontend/app/src/components/EditLabel.svelte b/frontend/app/src/desktop/shell/EditLabel.svelte
similarity index 91%
rename from frontend/app/src/components/EditLabel.svelte
rename to frontend/app/src/desktop/shell/EditLabel.svelte
index 83f846fc5e..8ff16b9b77 100644
--- a/frontend/app/src/components/EditLabel.svelte
+++ b/frontend/app/src/desktop/shell/EditLabel.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
     import { locale, _ } from "svelte-i18n";
-    import { editingLabel, i18nKey, supportedLanguages } from "../i18n/i18n";
+    import { editingLabel, i18nKey, supportedLanguages } from "@src/i18n/i18n";
     import Translate from "svelte-material-icons/Translate.svelte";
-    import Button from "./Button.svelte";
-    import ButtonGroup from "./ButtonGroup.svelte";
-    import ModalContent from "./ModalContent.svelte";
-    import Overlay from "./Overlay.svelte";
-    import Legend from "./Legend.svelte";
-    import TextArea from "./TextArea.svelte";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import Legend from "@src/desktop/shared/Legend.svelte";
+    import TextArea from "@src/desktop/shared/TextArea.svelte";
     import { getContext } from "svelte";
     import { OpenChat } from "@client";
-    import ErrorMessage from "./ErrorMessage.svelte";
-    import { toastStore } from "../stores/toast";
+    import ErrorMessage from "@src/desktop/shared/ErrorMessage.svelte";
+    import { toastStore } from "@src/stores/toast";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/desktop/shell/Head.svelte b/frontend/app/src/desktop/shell/Head.svelte
new file mode 100644
index 0000000000..5652d04551
--- /dev/null
+++ b/frontend/app/src/desktop/shell/Head.svelte
@@ -0,0 +1,108 @@
+<script lang="ts">
+    import {
+        type ChatListScope,
+        type ChatSummary,
+        type CombinedUnreadCounts,
+        type CommunitySummary,
+        type OpenChat,
+        type UserLookup,
+        allUsersStore,
+        chatListScopeStore,
+        globalUnreadCountStore,
+        locationStore,
+        routeForChatIdentifier,
+        selectedChatSummaryStore,
+        selectedCommunitySummaryStore,
+    } from "@client";
+    import { getContext, onMount } from "svelte";
+    import { mobileOperatingSystem } from "@src/utils/devices";
+
+    const client = getContext<OpenChat>("client");
+
+    let viewPortContent = $state("width=device-width, initial-scale=1");
+
+    type Details = {
+        title: string;
+        icon: string;
+        description: string;
+        canonicalUrl: URL;
+    };
+
+    function getDetails(
+        scope: ChatListScope,
+        location: string,
+        users: UserLookup,
+        unread: CombinedUnreadCounts,
+        chat: ChatSummary | undefined,
+        community: CommunitySummary | undefined,
+    ): Details {
+        let canonicalUrl = new URL("/", window.location.origin);
+        let title = "OpenChat";
+        let description =
+            "OpenChat is a fully featured chat application running end-to-end on the Internet Computer blockchain.";
+
+        if (location === "/communities") {
+            canonicalUrl = new URL("/communities", window.location.origin);
+        }
+
+        if (community !== undefined) {
+            title = `${title} - ${community.name}`;
+            description = community.description;
+            canonicalUrl = new URL(
+                `/community/${community.id.communityId}`,
+                window.location.origin,
+            );
+        }
+        if (chat !== undefined) {
+            if (chat.kind === "direct_chat") {
+                title = `${title} - 
+                    ${
+                        users.get(chat.them.userId)?.displayName ??
+                        users.get(chat.them.userId)?.username ??
+                        "Direct chat"
+                    }`;
+            } else {
+                title = `${title} - ${chat.name}`;
+                description = chat.description;
+                canonicalUrl = new URL(
+                    routeForChatIdentifier(scope.kind, chat.id),
+                    window.location.origin,
+                );
+            }
+        }
+        const merged = client.mergeCombinedUnreadCounts(unread);
+        return {
+            title: merged.unmuted > 0 ? `(${merged.unmuted}) ${title}` : title,
+            description,
+            icon: merged.unmuted > 0 ? "/icon-unread.png" : "/icon.png",
+            canonicalUrl,
+        };
+    }
+
+    onMount(() => {
+        if (mobileOperatingSystem === "iOS") {
+            viewPortContent += ", maximum-scale=1";
+        }
+    });
+
+    let details = $derived(
+        getDetails(
+            $chatListScopeStore,
+            $locationStore,
+            $allUsersStore,
+            $globalUnreadCountStore,
+            $selectedChatSummaryStore,
+            $selectedCommunitySummaryStore,
+        ),
+    );
+</script>
+
+<svelte:head>
+    <title>{details.title}</title>
+    <meta name="viewport" content={viewPortContent} />
+    <link rel="icon" type="image/png" href={details.icon} />
+    <link rel="canonical" href={details.canonicalUrl.toString()} />
+    <meta name="description" content={details.description} />
+    <meta property="og:title" content={details.title} />
+    <meta property="og:description" content={details.description} />
+</svelte:head>
diff --git a/frontend/app/src/desktop/shell/Home.svelte b/frontend/app/src/desktop/shell/Home.svelte
new file mode 100644
index 0000000000..5137d7961c
--- /dev/null
+++ b/frontend/app/src/desktop/shell/Home.svelte
@@ -0,0 +1,1182 @@
+<script lang="ts">
+    import { trackedEffect } from "@src/utils/effects.svelte";
+    import { flushPendingNavigation } from "@src/utils/navigation";
+    import type { ProfileLinkClickedEvent } from "@webcomponents/profileLink";
+    import { portalState } from "component-lib";
+    import type {
+        CandidateGroupChat,
+        ChannelIdentifier,
+        ChatIdentifier,
+        CommunityIdentifier,
+        CommunitySummary,
+        DirectChatIdentifier,
+        EnhancedAccessGate,
+        EnhancedReplyContext,
+        FullWebhookDetails,
+        GateCheckSucceeded,
+        GroupChatSummary,
+        Level,
+        Message,
+        MultiUserChat,
+        MultiUserChatIdentifier,
+        NervousSystemDetails,
+        OpenChat,
+        PubSubEvents,
+        ResourceKey,
+        RouteParams,
+        Rules,
+        UpdatedRules,
+    } from "@client";
+    import {
+        allUsersStore,
+        anonUserStore,
+        chatIdentifiersEqual,
+        chatListScopeStore,
+        chatsInitialisedStore,
+        chatSummariesListStore,
+        chatSummariesStore,
+        communitiesStore,
+        currentUserStore,
+        defaultChatRules,
+        dimensionsHeight,
+        fullWidth,
+        identityStateStore,
+        localUpdates,
+        offlineStore,
+        pinNumberResolverStore,
+        querystringStore,
+        ROLE_NONE,
+        routeForChatIdentifier,
+        routeForScope,
+        routeStore,
+        captureRulesAcceptanceStore as rulesAcceptanceStore,
+        selectedChatIdStore,
+        selectedChatSummaryStore,
+        selectedCommunityRulesStore,
+        setRightPanelHistory,
+        subscribe,
+        suspendedUserStore,
+    } from "@client";
+    import { navigate } from "@src/utils/navigation";
+    import { getContext, onMount, tick, untrack } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { createCandidateCommunity } from "@src/stores/community";
+    import { messageToForwardStore } from "@src/stores/messageToForward";
+    import { chitPopup, disableChit } from "@src/stores/settings";
+    import { toastStore } from "@src/stores/toast";
+    import { activeVideoCall, incomingVideoCall } from "@src/stores/video";
+    import {
+        currentTheme,
+        currentThemeName,
+        preferredDarkThemeName,
+        themeType,
+    } from "@src/theme/themes";
+    import { scream } from "@src/utils/scream";
+    import type { Share } from "@src/utils/share";
+    import { removeQueryStringParam } from "@src/utils/urls";
+    import AreYouSure from "@src/desktop/shared/AreYouSure.svelte";
+    import BackgroundLogo from "./BackgroundLogo.svelte";
+    import BotBuilderModal from "@src/desktop/features/bots/BotBuilderModal.svelte";
+    import WebhookModal from "@src/desktop/features/bots/WebhookModal.svelte";
+    import EditLabel from "./EditLabel.svelte";
+    import NotFound from "./NotFound.svelte";
+    import OfflineFooter from "./OfflineFooter.svelte";
+    import OnboardModal from "@src/desktop/features/onboard/OnboardModal.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import SelectChatModal from "./SelectChatModal.svelte";
+    import SuspendedModal from "./SuspendedModal.svelte";
+    import Toast from "./Toast.svelte";
+    import AcceptRulesModal from "@src/desktop/features/chats/core/AcceptRulesModal.svelte";
+    import GateCheckFailed from "@src/desktop/features/access/AccessGateCheckFailed.svelte";
+    import AccessGateEvaluator from "@src/desktop/features/access/AccessGateEvaluator.svelte";
+    import AnonFooter from "@src/desktop/features/onboard/AnonFooter.svelte";
+    import ChitEarned from "@src/desktop/features/chit/ChitEarned.svelte";
+    import HallOfFame from "@src/desktop/features/chit/ChitHallOfFame.svelte";
+    import Convert from "@src/desktop/features/chats/community/Convert.svelte";
+    import EditCommunity from "@src/desktop/features/chats/community/edit/Edit.svelte";
+    import CreateOrUpdateGroup from "@src/desktop/features/chats/group/edit/CreateOrUpdateGroup.svelte";
+    import DailyChitModal from "@src/desktop/features/chit/DailyChitModal.svelte";
+    import LeftPanel from "./LeftPanel.svelte";
+    import MiddlePanel from "./MiddlePanel.svelte";
+    import LeftNav from "@src/desktop/features/nav/LeftNav.svelte";
+    import NoAccess from "@src/desktop/features/access/NoAccess.svelte";
+    import PinNumberModal from "@src/desktop/features/wallet/PinNumberModal.svelte";
+    import AccountsModal from "@src/desktop/features/profile/AccountsModal.svelte";
+    import SetPinNumberModal from "@src/desktop/features/profile/SetPinNumberModal.svelte";
+    import VerifyHumanity from "@src/desktop/features/profile/VerifyHumanity.svelte";
+    import ViewUserProfile from "@src/desktop/features/profile/ViewUserProfileModal.svelte";
+    import MakeProposalModal from "@src/desktop/features/proposals/MakeProposalModal.svelte";
+    import RightPanel from "./RightPanelWrapper.svelte";
+    import SuspendModal from "@src/desktop/features/profile/SuspendModal.svelte";
+    import Upgrade from "@src/desktop/features/upgrade/Upgrade.svelte";
+
+    type ViewProfileConfig = {
+        userId: string;
+        chatButton: boolean;
+        alignTo?: HTMLElement;
+        inGlobalContext: boolean;
+    };
+
+    const client = getContext<OpenChat>("client");
+
+    let convertGroup: GroupChatSummary | undefined = $state(undefined);
+    let showProfileCard: ViewProfileConfig | undefined = $state(undefined);
+
+    type ConfirmActionEvent =
+        | ConfirmLeaveEvent
+        | ConfirmDeleteDirectChatEvent
+        | ConfirmDeleteEvent
+        | ConfirmLeaveCommunityEvent
+        | ConfirmDeleteCommunityEvent;
+
+    type ConfirmLeaveCommunityEvent = {
+        kind: "leave_community";
+        communityId: CommunityIdentifier;
+    };
+
+    type ConfirmLeaveEvent = {
+        kind: "leave";
+        chatId: MultiUserChatIdentifier;
+        level: Level;
+    };
+
+    type ConfirmDeleteDirectChatEvent = {
+        kind: "delete_direct_chat";
+        chatId: DirectChatIdentifier;
+        blockUser: boolean;
+    };
+
+    type ConfirmDeleteEvent = {
+        kind: "delete";
+        chatId: MultiUserChatIdentifier;
+        level: Level;
+        doubleCheck: { challenge: ResourceKey; response: ResourceKey };
+        after?: () => void;
+    };
+
+    type ConfirmDeleteCommunityEvent = {
+        kind: "delete_community";
+        communityId: CommunityIdentifier;
+        doubleCheck: { challenge: ResourceKey; response: ResourceKey };
+    };
+
+    type ModalType =
+        | { kind: "none" }
+        | { kind: "verify_humanity" }
+        | { kind: "select_chat" }
+        | { kind: "register_bot" }
+        | { kind: "update_bot" }
+        | { kind: "remove_bot" }
+        | { kind: "register_webhook" }
+        | { kind: "update_webhook"; webhook: FullWebhookDetails }
+        | { kind: "suspended" }
+        | { kind: "suspending"; userId: string }
+        | { kind: "no_access" }
+        | { kind: "new_group"; embeddedContent: boolean; candidate: CandidateGroupChat }
+        | { kind: "wallet" }
+        | { kind: "gate_check_failed"; gates: EnhancedAccessGate[] }
+        | { kind: "hall_of_fame" }
+        | { kind: "edit_community"; community: CommunitySummary; communityRules: Rules }
+        | { kind: "make_proposal"; chat: MultiUserChat; nervousSystem: NervousSystemDetails }
+        | { kind: "registering" }
+        | { kind: "logging_in" }
+        | { kind: "not_found" }
+        | { kind: "claim_daily_chit" }
+        | { kind: "challenge" }
+        | {
+              kind: "evaluating_access_gates";
+              group: MultiUserChat;
+              select: boolean;
+              gates: EnhancedAccessGate[];
+              level: Level;
+          };
+
+    let modal: ModalType = $state({ kind: "none" });
+    let confirmActionEvent: ConfirmActionEvent | undefined = $state();
+    let joining: MultiUserChat | undefined = $state(undefined);
+    let showUpgrade: boolean = $state(false);
+    let share: Share = { title: "", text: "", url: "", files: [] };
+    let messageToForward: Message | undefined = undefined;
+
+    onMount(() => {
+        const unsubEvents = [
+            subscribe("chatWith", chatWith),
+            subscribe("showInviteGroupUsers", showInviteGroupUsers),
+            subscribe("replyPrivatelyTo", replyPrivatelyTo),
+            subscribe("showGroupMembers", showGroupMembers),
+            subscribe("upgrade", upgrade),
+            subscribe("verifyHumanity", verifyHumanity),
+            subscribe("deleteDirectChat", onTriggerConfirm),
+            subscribe("deleteGroup", onTriggerConfirm),
+            subscribe("deleteCommunity", onTriggerConfirm),
+            subscribe("communityDetails", communityDetails),
+            subscribe("editCommunity", editCommunity),
+            subscribe("leaveCommunity", onTriggerConfirm),
+            subscribe("makeProposal", showMakeProposalModal),
+            subscribe("leaveGroup", onTriggerConfirm),
+            subscribe("newGroup", () => newGroup("group")),
+            subscribe("wallet", showWallet),
+            subscribe("profile", showProfile),
+            subscribe("claimDailyChit", claimDailyChit),
+            subscribe("joinGroup", joinGroup),
+            subscribe("createCommunity", createCommunity),
+            subscribe("unarchiveChat", unarchiveChat),
+            subscribe("forward", forwardMessage),
+            subscribe("toggleMuteNotifications", toggleMuteNotifications),
+            subscribe("newChannel", newChannel),
+            subscribe("successfulImport", successfulImport),
+            subscribe("showProposalFilters", showProposalFilters),
+            subscribe("convertGroupToCommunity", convertGroupToCommunity),
+            subscribe("clearSelection", () => navigate(routeForScope($chatListScopeStore))),
+            subscribe("editGroup", editGroup),
+            subscribe("userSuspensionChanged", () => window.location.reload()),
+            subscribe("selectedChatInvalid", selectedChatInvalid),
+            subscribe("sendMessageFailed", sendMessageFailed),
+            subscribe("summonWitch", summonWitch),
+            subscribe("registerBot", registerBot),
+            subscribe("updateBot", updateBot),
+            subscribe("removeBot", removeBot),
+            subscribe("registerWebhook", registerWebhook),
+            subscribe("updateWebhook", updateWebhook),
+            subscribe("remoteVideoCallStarted", remoteVideoCallStarted),
+            subscribe("remoteVideoCallEnded", remoteVideoCallEnded),
+            subscribe("notification", (n) => client.notificationReceived(n)),
+            subscribe("noAccess", () => (modal = { kind: "no_access" })),
+            subscribe("notFound", () => (modal = { kind: "not_found" })),
+            subscribe("copyUrl", copyUrl),
+            subscribe("suspendUser", suspendUser),
+            subscribe("closeModalStack", () => {
+                // TODO - not 100% sure that this is all we need to do here
+                portalState.close();
+                flushPendingNavigation();
+            }),
+        ];
+        client.initialiseNotifications();
+        document.body.addEventListener("profile-clicked", profileClicked);
+
+        if ($suspendedUserStore) {
+            modal = { kind: "suspended" };
+        }
+
+        return () => {
+            unsubEvents.forEach((u) => u());
+            document.body.removeEventListener("profile-clicked", profileClicked);
+        };
+    });
+
+    function suspendUser(userId: string) {
+        modal = { kind: "suspending", userId };
+    }
+
+    function profileClicked(event: Event) {
+        profileLinkClicked(event as CustomEvent<ProfileLinkClickedEvent>);
+    }
+
+    function selectedChatInvalid() {
+        navigate(routeForScope(client.getDefaultScope()));
+    }
+
+    function sendMessageFailed(alert: boolean) {
+        if (alert) {
+            toastStore.showFailureToast(i18nKey("errorSendingMessage"));
+        }
+    }
+
+    function registerBot() {
+        modal = { kind: "register_bot" };
+    }
+
+    function registerWebhook() {
+        modal = { kind: "register_webhook" };
+    }
+
+    function updateWebhook({ hook }: { hook: FullWebhookDetails; chat: MultiUserChat }) {
+        modal = { kind: "update_webhook", webhook: hook };
+    }
+
+    function updateBot() {
+        modal = { kind: "update_bot" };
+    }
+
+    function removeBot() {
+        modal = { kind: "remove_bot" };
+    }
+
+    function summonWitch() {
+        const isHalloweenTheme = $currentThemeName === "halloween";
+        if (!isHalloweenTheme) {
+            themeType.set("dark");
+            preferredDarkThemeName.set("halloween");
+        }
+        document.body.classList.add("witch");
+        scream.currentTime = 0;
+        scream.play();
+        window.setTimeout(() => {
+            document.body.classList.remove("witch");
+        }, 2000);
+    }
+
+    function remoteVideoCallEnded(messageId: bigint) {
+        if ($incomingVideoCall?.messageId === messageId) {
+            incomingVideoCall.set(undefined);
+        }
+    }
+
+    function remoteVideoCallStarted(ev: PubSubEvents["remoteVideoCallStarted"]) {
+        // If current user is already in the call, or has previously been in the call, or the call started more than 2 hours ago, exit
+        if (
+            chatIdentifiersEqual($activeVideoCall?.chatId, ev.chatId) ||
+            ev.currentUserIsParticipant ||
+            Number(ev.timestamp) < Date.now() - 2 * 60 * 60 * 1000
+        ) {
+            return;
+        }
+
+        incomingVideoCall.set(ev);
+    }
+
+    async function routeChange(initialised: boolean, route: RouteParams): Promise<void> {
+        // wrap the whole thing in untrack because we don't want it to react to everything it reads in here
+        untrack(async () => {
+            // wait until we have loaded the chats
+            if (initialised) {
+                client.filterRightPanelHistory((state) => state.kind !== "community_filters");
+                if (
+                    $anonUserStore &&
+                    client.isChatListRoute(route) &&
+                    route.scope.kind === "favourite"
+                ) {
+                    client.updateIdentityState({ kind: "logging_in" });
+                    navigate("/chats");
+                    return;
+                }
+
+                if (client.setChatListScopeAndRedirect(route)) {
+                    return;
+                }
+
+                if (client.isHomeRoute(route)) {
+                    filterChatSpecificRightPanelStates();
+                } else if (client.isCommunitiesRoute(route)) {
+                    setRightPanelHistory($fullWidth ? [{ kind: "community_filters" }] : []);
+                } else {
+                    // any other route with no associated chat therefore we must clear any selected chat and potentially close the right panel
+                    if (client.isShareRoute(route)) {
+                        share = {
+                            title: route.title,
+                            text: route.text,
+                            url: route.url,
+                            files: [],
+                        };
+                        navigate(routeForScope(client.getDefaultScope()));
+                        modal = { kind: "select_chat" };
+                    }
+                }
+
+                if (modal?.kind === "claim_daily_chit") {
+                    modal = { kind: "none" };
+                }
+            }
+        });
+    }
+
+    // Note: very important (and hacky) that this is hidden in a function rather than inline in the top level reactive
+    // statement because we don't want that reactive statement to execute in reponse to changes in rightPanelHistory :puke:
+    function filterChatSpecificRightPanelStates() {
+        client.filterRightPanelHistory((panel) => panel.kind === "user_profile");
+    }
+
+    function leaderboard() {
+        modal = { kind: "hall_of_fame" };
+    }
+
+    function closeModal() {
+        modal = { kind: "none" };
+        joining = undefined;
+    }
+
+    function closeNoAccess() {
+        closeModal();
+        navigate(routeForScope(client.getDefaultScope()));
+    }
+
+    function unarchiveChat(chatId: ChatIdentifier) {
+        client.unarchiveChat(chatId).then((success) => {
+            if (!success) {
+                toastStore.showFailureToast(i18nKey("unarchiveChatFailed"));
+            }
+        });
+    }
+
+    function getConfirmMessage(
+        confirmActionEvent: ConfirmActionEvent | undefined,
+    ): ResourceKey | undefined {
+        if (confirmActionEvent === undefined) return undefined;
+
+        switch (confirmActionEvent.kind) {
+            case "leave":
+                return i18nKey("confirmLeaveGroup", undefined, confirmActionEvent.level, true);
+            case "leave_community":
+                return i18nKey("communities.leaveMessage");
+            case "delete_direct_chat":
+                return i18nKey("confirmDeleteDirectChat", undefined, undefined, true);
+            case "delete_community":
+                return i18nKey("communities.deleteMessage");
+            case "delete":
+                return i18nKey("irreversible", undefined, confirmActionEvent.level, true);
+        }
+    }
+
+    function onTriggerConfirm(detail: ConfirmActionEvent) {
+        confirmActionEvent = detail;
+    }
+
+    function onConfirmAction(yes: boolean): Promise<void> {
+        const result = yes ? doConfirmAction(confirmActionEvent!) : Promise.resolve();
+
+        return result.finally(() => {
+            confirmActionEvent = undefined;
+        });
+    }
+
+    function doConfirmAction(confirmActionEvent: ConfirmActionEvent): Promise<void> {
+        switch (confirmActionEvent.kind) {
+            case "leave":
+                return leaveGroup(confirmActionEvent.chatId, confirmActionEvent.level);
+            case "leave_community":
+                return leaveCommunity(confirmActionEvent.communityId);
+            case "delete_direct_chat":
+            case "delete_direct_chat": {
+                const viewingThisChat = chatIdentifiersEqual(
+                    $selectedChatIdStore,
+                    confirmActionEvent.chatId,
+                );
+                return deleteDirectChat(
+                    confirmActionEvent.chatId,
+                    confirmActionEvent.blockUser,
+                ).then(() => {
+                    if (viewingThisChat) setRightPanelHistory([]);
+                });
+            }
+            case "delete_community":
+                return deleteCommunity(confirmActionEvent.communityId).then((_) => {
+                    setRightPanelHistory([]);
+                });
+            case "delete":
+                return deleteGroup(confirmActionEvent.chatId, confirmActionEvent.level).then(
+                    (_) => {
+                        setRightPanelHistory([]);
+                        confirmActionEvent.after?.();
+                    },
+                );
+            default:
+                return Promise.reject();
+        }
+    }
+
+    function deleteDirectChat(chatId: DirectChatIdentifier, blockUser: boolean): Promise<void> {
+        // Only redirect when deleting the chat we're currently viewing. The
+        // delete can now be triggered from the chat list for a non-selected
+        // chat, in which case we must leave the current route untouched.
+        const viewingThisChat = chatIdentifiersEqual($selectedChatIdStore, chatId);
+        if (viewingThisChat) {
+            navigate(routeForScope($chatListScopeStore));
+        }
+        return client.deleteDirectChat(chatId, blockUser).then((success) => {
+            if (!success) {
+                toastStore.showFailureToast(i18nKey("deleteDirectChatFailure"));
+                if (viewingThisChat) {
+                    navigate(routeForChatIdentifier($chatListScopeStore.kind, chatId));
+                }
+            }
+        });
+    }
+
+    function deleteGroup(chatId: MultiUserChatIdentifier, level: Level): Promise<void> {
+        if (chatId.kind === "channel") {
+            navigate(`/community/${chatId.communityId}`);
+        } else {
+            navigate(routeForScope($chatListScopeStore));
+        }
+        return client.deleteGroup(chatId).then((success) => {
+            if (success) {
+                toastStore.showSuccessToast(i18nKey("deleteGroupSuccess", undefined, level));
+            } else {
+                toastStore.showFailureToast(i18nKey("deleteGroupFailure", undefined, level, true));
+                navigate(routeForChatIdentifier($chatListScopeStore.kind, chatId));
+            }
+        });
+    }
+
+    function deleteCommunity(id: CommunityIdentifier): Promise<void> {
+        navigate(routeForScope(client.getDefaultScope()));
+
+        client.deleteCommunity(id).then((success) => {
+            if (!success) {
+                toastStore.showFailureToast(i18nKey("communities.errors.deleteFailed"));
+                navigate(`/community/${id.communityId}`);
+            }
+        });
+
+        return Promise.resolve();
+    }
+
+    function leaveCommunity(id: CommunityIdentifier): Promise<void> {
+        navigate(routeForScope(client.getDefaultScope()));
+
+        client.leaveCommunity(id).then((success) => {
+            if (!success) {
+                toastStore.showFailureToast(i18nKey("communities.errors.leaveFailed"));
+                navigate(`/community/${id.communityId}`);
+            }
+        });
+
+        return Promise.resolve();
+    }
+
+    function leaveGroup(chatId: MultiUserChatIdentifier, level: Level): Promise<void> {
+        navigate(routeForScope($chatListScopeStore));
+
+        client.leaveGroup(chatId).then((resp) => {
+            if (resp !== "success") {
+                if (resp === "owner_cannot_leave") {
+                    toastStore.showFailureToast(i18nKey("ownerCantLeave", undefined, level, true));
+                } else {
+                    toastStore.showFailureToast(
+                        i18nKey("failedToLeaveGroup", undefined, level, true),
+                    );
+                }
+                navigate(routeForChatIdentifier($chatListScopeStore.kind, chatId));
+            }
+        });
+
+        return Promise.resolve();
+    }
+
+    function chatWith(chatId: DirectChatIdentifier) {
+        const chat = $chatSummariesListStore.find((c) => {
+            return c.kind === "direct_chat" && c.them === chatId;
+        });
+
+        navigate(routeForChatIdentifier(chat ? $chatListScopeStore.kind : "chats", chatId));
+    }
+
+    function showInviteGroupUsers(show: boolean) {
+        if ($selectedChatIdStore !== undefined) {
+            if (show) {
+                setRightPanelHistory([{ kind: "invite_group_users" }]);
+            } else {
+                client.pushRightPanelHistory({ kind: "invite_group_users" });
+            }
+        }
+    }
+
+    function replyPrivatelyTo(context: EnhancedReplyContext) {
+        if (context.sender === undefined) return;
+
+        const chat = $chatSummariesListStore.find((c) => {
+            return (
+                c.kind === "direct_chat" &&
+                chatIdentifiersEqual(c.them, {
+                    kind: "direct_chat",
+                    userId: context.sender!.userId,
+                })
+            );
+        });
+
+        const chatId = chat?.id ?? { kind: "direct_chat", userId: context.sender.userId };
+        localUpdates.draftMessages.setTextContent({ chatId }, "");
+        localUpdates.draftMessages.setReplyingTo({ chatId }, context);
+        if (chat) {
+            navigate(routeForChatIdentifier($chatListScopeStore.kind, chatId));
+        } else {
+            createDirectChat(chatId as DirectChatIdentifier);
+        }
+    }
+
+    function forwardMessage(message: Message) {
+        messageToForward = message;
+        modal = { kind: "select_chat" };
+    }
+
+    function showGroupMembers() {
+        if ($selectedChatIdStore !== undefined) {
+            setRightPanelHistory([{ kind: "show_group_members" }]);
+        }
+    }
+
+    function showProfile() {
+        setRightPanelHistory([{ kind: "user_profile" }]);
+    }
+
+    function communityDetails(_: CommunitySummary) {
+        // what do we do here if the community is not selected
+        // do we select it?
+        if ($chatListScopeStore.kind === "community") {
+            setRightPanelHistory([{ kind: "community_details" }]);
+        }
+    }
+
+    function showProposalFilters() {
+        if ($selectedChatIdStore !== undefined) {
+            setRightPanelHistory([
+                {
+                    kind: "proposal_filters",
+                },
+            ]);
+        }
+    }
+
+    function showMakeProposalModal() {
+        if (nervousSystem !== undefined && selectedMultiUserChat !== undefined) {
+            modal = { kind: "make_proposal", chat: selectedMultiUserChat, nervousSystem };
+        }
+    }
+
+    async function joinGroup(detail: { group: MultiUserChat; select: boolean }): Promise<void> {
+        if ($anonUserStore) {
+            client.updateIdentityState({
+                kind: "logging_in",
+                postLogin: { kind: "join_group", ...detail },
+            });
+            return;
+        }
+        const { group, select } = detail;
+
+        // it's possible that we got here via a postLogin capture in which case it's possible
+        // that we are actually already a member of this group, so we should double check here
+        // that we actually *need* to join the group
+        let chat = $chatSummariesStore.get(group.id);
+        if (chat === undefined || chat.membership.role === ROLE_NONE || client.isLapsed(chat.id)) {
+            doJoinGroup(group, select, undefined);
+        }
+    }
+
+    function accessGatesEvaluated(success: GateCheckSucceeded) {
+        if (modal.kind === "evaluating_access_gates") {
+            const { group, select } = modal;
+            closeModal();
+            doJoinGroup(group, select, success);
+        }
+    }
+
+    /**
+     * When we try to join a group we need to first scrutinise the access gates and
+     * see whether any of them require client side action before we can proceed with the
+     * call to the back end. If there are gates which require action, we need to perform
+     * those actions one by one until they are all done and then feed their results
+     * back into this function.
+     */
+
+    async function doJoinGroup(
+        group: MultiUserChat,
+        select: boolean,
+        gateCheck: GateCheckSucceeded | undefined,
+    ): Promise<void> {
+        joining = group;
+        if (gateCheck === undefined) {
+            const gates = client.accessGatesForChat(group, true);
+            const passed = client.doesUserMeetAccessGates(gates);
+
+            if (!passed) {
+                /**
+                 * If we cannot already tell that the user passes the access gate(s), check if there are any gates that require front end
+                 * pre-processing.
+                 */
+                if (client.gatePreprocessingRequired(gates)) {
+                    modal = {
+                        kind: "evaluating_access_gates",
+                        group,
+                        select,
+                        gates,
+                        level: group.level,
+                    };
+                    return Promise.resolve();
+                }
+            }
+        }
+
+        const credentials = gateCheck?.credentials ?? [];
+        const paymentApprovals = gateCheck?.paymentApprovals ?? new Map();
+        const compositeGateIndex = gateCheck?.compositeGateIndex;
+
+        return client
+            .joinGroup(group, credentials, paymentApprovals, compositeGateIndex)
+            .then((resp) => {
+                if (resp.kind === "blocked") {
+                    toastStore.showFailureToast(i18nKey("youreBlocked"));
+                    joining = undefined;
+                } else if (resp.kind === "gate_check_failed") {
+                    const gates = client.accessGatesForChat(group);
+                    modal = { kind: "gate_check_failed", gates };
+                } else if (resp.kind !== "success") {
+                    toastStore.showFailureToast(
+                        i18nKey("joinGroupFailed", undefined, group.level, true),
+                    );
+                    joining = undefined;
+                } else if (select) {
+                    joining = undefined;
+                    navigate(routeForChatIdentifier($chatListScopeStore.kind, group.id));
+                } else {
+                    joining = undefined;
+                }
+            })
+            .catch(() => (joining = undefined));
+    }
+
+    function upgrade() {
+        showUpgrade = true;
+    }
+
+    function onSelectChat(chatId: ChatIdentifier) {
+        closeModal();
+        if (messageToForward !== undefined) {
+            forwardToChat(chatId);
+            messageToForward = undefined;
+        } else {
+            shareWithChat(chatId);
+        }
+    }
+
+    function onCloseSelectChat() {
+        closeModal();
+        messageToForward = undefined;
+    }
+
+    function forwardToChat(chatId: ChatIdentifier) {
+        navigate(routeForChatIdentifier($chatListScopeStore.kind, chatId));
+        messageToForwardStore.set(messageToForward);
+    }
+
+    function shareWithChat(chatId: ChatIdentifier) {
+        navigate(routeForChatIdentifier($chatListScopeStore.kind, chatId));
+
+        const shareText = share.text ?? "";
+        const shareTitle = share.title ?? "";
+        const shareUrl = share.url ?? "";
+
+        let text = shareText.length > 0 ? shareText : shareTitle;
+
+        if (shareUrl.length > 0) {
+            if (text.length > 0) {
+                text += "\n";
+            }
+            text += shareUrl;
+        }
+
+        localUpdates.draftMessages.setTextContent({ chatId }, text);
+    }
+
+    function showWallet() {
+        modal = { kind: "wallet" };
+    }
+
+    function newChannel(embeddedContent: boolean) {
+        newGroup("channel", embeddedContent);
+    }
+
+    function newGroup(level: Level = "group", embeddedContent: boolean = false) {
+        const candidate = client.createCandidateGroup(level, embeddedContent);
+        if (candidate === undefined) return;
+
+        modal = {
+            kind: "new_group",
+            embeddedContent,
+            candidate,
+        };
+    }
+
+    function editGroup(detail: { chat: MultiUserChat; rules: UpdatedRules | undefined }) {
+        const chat = detail.chat;
+        let level: Level = chat.id.kind === "group_chat" ? "group" : "channel";
+        let rules = detail.rules ?? { ...defaultChatRules(level), newVersion: false };
+        modal = {
+            kind: "new_group",
+            embeddedContent: chat.kind === "channel" && chat.externalUrl !== undefined,
+            candidate: {
+                id: chat.id,
+                kind: "candidate_group_chat",
+                name: chat.name,
+                description: chat.description,
+                historyVisible: chat.historyVisible,
+                public: chat.public,
+                frozen: chat.frozen,
+                members: [],
+                permissions: { ...chat.permissions },
+                rules,
+                avatar: {
+                    blobUrl: chat.blobUrl,
+                    blobData: chat.blobData,
+                },
+                gateConfig: { ...chat.gateConfig },
+                level,
+                membership: chat.membership,
+                eventsTTL: chat.eventsTTL,
+                messagesVisibleToNonMembers: chat.messagesVisibleToNonMembers,
+                externalUrl: chat.kind === "channel" ? chat.externalUrl : undefined,
+                verified: chat.kind === "group_chat" ? chat.verified : false,
+            },
+        };
+    }
+
+    function toggleMuteNotifications(detail: {
+        chatId: ChatIdentifier;
+        mute: boolean | undefined;
+        muteAtEveryone: boolean | undefined;
+    }) {
+        const op = detail.mute ? "muted" : "unmuted";
+        client
+            .toggleMuteNotifications(detail.chatId, detail.mute, detail.muteAtEveryone)
+            .then((success) => {
+                if (!success) {
+                    toastStore.showFailureToast(
+                        i18nKey("toggleMuteNotificationsFailed", {
+                            operation: $_(op),
+                        }),
+                    );
+                }
+            });
+    }
+
+    function copyUrl() {
+        const url = window.location.href;
+
+        navigator.clipboard.writeText(url).then(
+            () => {
+                toastStore.showSuccessToast(i18nKey("urlCopiedToClipboard"));
+            },
+            () => {
+                toastStore.showFailureToast(i18nKey("failedToCopyUrlToClipboard", { url }));
+            },
+        );
+    }
+
+    async function createDirectChat(chatId: DirectChatIdentifier): Promise<boolean> {
+        if (!(await client.createDirectChat(chatId))) {
+            modal = { kind: "not_found" };
+            return false;
+        }
+
+        navigate(routeForChatIdentifier("chats", chatId));
+        return true;
+    }
+
+    function createCommunity() {
+        const maxIndex = $communitiesStore.reduce(
+            (m, [_, c]) => (c.membership.index > m ? c.membership.index : m),
+            0,
+        );
+        modal = {
+            kind: "edit_community",
+            community: createCandidateCommunity("", maxIndex + 1),
+            communityRules: defaultChatRules("community"),
+        };
+    }
+
+    function editCommunity(community: CommunitySummary) {
+        modal = {
+            kind: "edit_community",
+            community,
+            communityRules: $selectedCommunityRulesStore ?? defaultChatRules("community"),
+        };
+    }
+
+    function convertGroupToCommunity(group: GroupChatSummary) {
+        setRightPanelHistory([]);
+        convertGroup = group;
+    }
+
+    function successfulImport(id: ChannelIdentifier) {
+        navigate(`/community/${id.communityId}`);
+    }
+
+    function profileLinkClicked(ev: CustomEvent<ProfileLinkClickedEvent>) {
+        showProfileCard = {
+            userId: ev.detail.userId,
+            chatButton: ev.detail.chatButton,
+            inGlobalContext: ev.detail.inGlobalContext,
+            alignTo: ev.target ? (ev.target as HTMLElement) : undefined,
+        };
+    }
+
+    function chatWithFromProfileCard() {
+        if (showProfileCard === undefined) return;
+        chatWith({ kind: "direct_chat", userId: showProfileCard.userId });
+        showProfileCard = undefined;
+    }
+
+    let forgotPin = $state(false);
+
+    function onForgotPin() {
+        forgotPin = true;
+    }
+
+    function onPinNumberComplete(pin: string | undefined) {
+        if (pin) {
+            $pinNumberResolverStore?.resolve(pin);
+        }
+    }
+
+    function onPinNumberClose() {
+        $pinNumberResolverStore?.reject();
+    }
+
+    function verifyHumanity() {
+        modal = { kind: "verify_humanity" };
+    }
+
+    function claimDailyChit() {
+        modal = { kind: "claim_daily_chit" };
+    }
+
+    let confirmMessage = $derived(getConfirmMessage(confirmActionEvent));
+    let selectedMultiUserChat = $derived(
+        $selectedChatSummaryStore?.kind === "group_chat" ||
+            $selectedChatSummaryStore?.kind === "channel"
+            ? $selectedChatSummaryStore
+            : undefined,
+    );
+    let governanceCanisterId = $derived(
+        selectedMultiUserChat !== undefined
+            ? selectedMultiUserChat.subtype?.governanceCanisterId
+            : undefined,
+    );
+    let nervousSystem = $derived(client.tryGetNervousSystem(governanceCanisterId));
+    // $: nervousSystem = client.tryGetNervousSystem("rrkah-fqaaa-aaaaa-aaaaq-cai");
+
+    trackedEffect("identity-state", () => {
+        if ($identityStateStore.kind === "registering") {
+            modal = { kind: "registering" };
+        } else if ($identityStateStore.kind === "logging_in") {
+            modal = { kind: "logging_in" };
+        } else if ($identityStateStore.kind === "logged_in" && modal.kind === "registering") {
+            console.log("We are now logged in so we are closing the register modal");
+            closeModal();
+        }
+        if (
+            $identityStateStore.kind === "logged_in" &&
+            $identityStateStore.postLogin?.kind === "join_group" &&
+            $chatsInitialisedStore
+        ) {
+            const join = { ...$identityStateStore.postLogin };
+            client.clearPostLoginState();
+            tick().then(() => joinGroup(join));
+        }
+    });
+
+    trackedEffect("route-change", () => {
+        routeChange($chatsInitialisedStore, $routeStore);
+    });
+
+    $effect(() => {
+        if ($chatsInitialisedStore) {
+            if ($querystringStore.get("diamond") !== null) {
+                showUpgrade = true;
+                navigate(removeQueryStringParam("diamond"));
+            }
+            const faq = $querystringStore.get("faq");
+            if (faq !== null) {
+                navigate(`/faq?q=${faq}`);
+            }
+            if ($querystringStore.get("wallet") !== null) {
+                showWallet();
+                navigate(removeQueryStringParam("wallet"));
+            }
+            if ($querystringStore.get("hof") !== null) {
+                modal = { kind: "hall_of_fame" };
+                navigate(removeQueryStringParam("hof"));
+            }
+            if ($querystringStore.get("everyone") !== null) {
+                setRightPanelHistory([{ kind: "show_group_members" }]);
+                navigate(removeQueryStringParam("everyone"));
+            }
+            const usergroup = $querystringStore.get("usergroup");
+            if (usergroup !== null) {
+                const userGroupId = Number(usergroup);
+                setRightPanelHistory([{ kind: "show_community_members", userGroupId }]);
+                navigate(removeQueryStringParam("usergroup"));
+            }
+        }
+    });
+
+    let bgHeight = $derived($dimensionsHeight * 0.9);
+    let bgClip = $derived((($dimensionsHeight - 32) / bgHeight) * 361);
+</script>
+
+{#if showProfileCard !== undefined}
+    {@const profileUser = $allUsersStore.get(showProfileCard.userId)}
+    {#if profileUser?.kind !== "bot"}
+        <ViewUserProfile
+            userId={showProfileCard.userId}
+            inGlobalContext={showProfileCard.inGlobalContext}
+            chatButton={showProfileCard.chatButton}
+            alignTo={showProfileCard.alignTo}
+            onOpenDirectChat={chatWithFromProfileCard}
+            onClose={() => (showProfileCard = undefined)} />
+    {/if}
+{/if}
+
+<main class:anon={$anonUserStore} class:offline={$offlineStore}>
+    <LeftNav />
+    <LeftPanel />
+    <MiddlePanel {joining} />
+    <RightPanel />
+</main>
+
+{#if $anonUserStore}
+    <AnonFooter />
+{/if}
+
+{#if $offlineStore}
+    <OfflineFooter />
+{/if}
+
+{#if confirmActionEvent !== undefined}
+    <AreYouSure
+        doubleCheck={confirmActionEvent.kind === "delete" ||
+        confirmActionEvent.kind === "delete_community"
+            ? confirmActionEvent.doubleCheck
+            : undefined}
+        message={confirmMessage}
+        action={onConfirmAction} />
+{/if}
+
+<Toast />
+
+{#if showUpgrade && $currentUserStore}
+    <Upgrade onCancel={() => (showUpgrade = false)} />
+{/if}
+
+{#if modal.kind !== "none"}
+    <Overlay
+        dismissible={modal.kind !== "select_chat" &&
+            modal.kind !== "not_found" &&
+            modal.kind !== "registering" &&
+            modal.kind !== "make_proposal"}
+        alignLeft={modal.kind === "select_chat"}
+        onClose={closeModal}>
+        {#if modal.kind === "select_chat"}
+            <SelectChatModal onClose={onCloseSelectChat} onSelect={onSelectChat} />
+        {:else if modal.kind === "suspended"}
+            <SuspendedModal onClose={closeModal} />
+        {:else if modal.kind === "register_bot"}
+            <BotBuilderModal mode={"register"} onClose={closeModal} />
+        {:else if modal.kind === "update_bot"}
+            <BotBuilderModal mode={"update"} onClose={closeModal} />
+        {:else if modal.kind === "remove_bot"}
+            <BotBuilderModal mode={"remove"} onClose={closeModal} />
+        {:else if modal.kind === "register_webhook" && ($selectedChatIdStore?.kind === "group_chat" || $selectedChatIdStore?.kind === "channel")}
+            <WebhookModal
+                chatId={$selectedChatIdStore}
+                mode={{ kind: "register" }}
+                onClose={closeModal} />
+        {:else if modal.kind === "update_webhook" && ($selectedChatIdStore?.kind === "group_chat" || $selectedChatIdStore?.kind === "channel")}
+            <WebhookModal
+                chatId={$selectedChatIdStore}
+                mode={{ kind: "update", webhook: modal.webhook }}
+                onClose={closeModal} />
+        {:else if modal.kind === "no_access"}
+            <NoAccess onClose={closeNoAccess} />
+        {:else if modal.kind === "not_found"}
+            <NotFound onClose={closeNoAccess} />
+        {:else if modal.kind === "gate_check_failed"}
+            <GateCheckFailed onClose={closeModal} gates={modal.gates} />
+        {:else if modal.kind === "evaluating_access_gates"}
+            <AccessGateEvaluator
+                gates={modal.gates}
+                onClose={closeModal}
+                onSuccess={accessGatesEvaluated} />
+        {:else if modal.kind === "new_group"}
+            <CreateOrUpdateGroup
+                embeddedContent={modal.embeddedContent}
+                bind:candidateGroup={modal.candidate}
+                onClose={closeModal} />
+        {:else if modal.kind === "edit_community"}
+            <EditCommunity
+                originalRules={modal.communityRules}
+                original={modal.community}
+                onClose={closeModal} />
+        {:else if modal.kind === "wallet"}
+            <AccountsModal onClose={closeModal} />
+        {:else if modal.kind === "hall_of_fame"}
+            <HallOfFame
+                onStreak={() => (modal = { kind: "claim_daily_chit" })}
+                onClose={closeModal} />
+        {:else if modal.kind === "make_proposal"}
+            <MakeProposalModal
+                selectedMultiUserChat={modal.chat}
+                nervousSystem={modal.nervousSystem}
+                onClose={closeModal} />
+        {:else if modal.kind === "logging_in" || modal.kind === "registering"}
+            <OnboardModal
+                step={modal.kind === "registering" ? "sign_up" : "select_mode"}
+                onClose={closeModal} />
+        {:else if modal.kind === "claim_daily_chit"}
+            <DailyChitModal onLeaderboard={leaderboard} onClose={closeModal} />
+        {:else if modal.kind === "verify_humanity"}
+            <VerifyHumanity onClose={closeModal} onSuccess={closeModal} />
+        {:else if modal.kind === "suspending"}
+            <SuspendModal userId={modal.userId} onClose={closeModal} />
+        {/if}
+    </Overlay>
+{/if}
+
+{#if $currentTheme.logo}
+    <BackgroundLogo
+        width={`${bgHeight}px`}
+        bottom={"unset"}
+        left={"0"}
+        opacity={"0.05"}
+        skew={"5deg"}
+        viewBox={`0 0 361 ${bgClip}`} />
+{/if}
+
+<Convert bind:group={convertGroup} />
+
+<EditLabel />
+
+{#if $rulesAcceptanceStore !== undefined}
+    <AcceptRulesModal />
+{:else if forgotPin}
+    <Overlay>
+        <SetPinNumberModal
+            onPinSet={onPinNumberComplete}
+            onClose={() => (forgotPin = false)}
+            type={{ kind: "forgot", while: { kind: "enter" } }} />
+    </Overlay>
+{:else if $pinNumberResolverStore !== undefined}
+    <Overlay>
+        <PinNumberModal
+            onClose={onPinNumberClose}
+            onComplete={onPinNumberComplete}
+            onForgot={onForgotPin} />
+    </Overlay>
+{/if}
+
+<!-- <svelte:body onprofile-clicked={profileLinkClicked} /> -->
+
+{#if $chitPopup && !$disableChit}
+    <ChitEarned />
+{/if}
+
+<style lang="scss">
+    :global(.edited-msg) {
+        @include font(light, normal, fs-70);
+    }
+
+    main {
+        transition: max-width ease-in-out 150ms;
+        position: relative;
+        width: 100%;
+        display: flex;
+        margin: 0 auto;
+
+        &.anon {
+            margin-bottom: toRem(50);
+        }
+        &.offline {
+            margin-bottom: toRem(40);
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/shell/HomeRoute.svelte b/frontend/app/src/desktop/shell/HomeRoute.svelte
new file mode 100644
index 0000000000..67238dc601
--- /dev/null
+++ b/frontend/app/src/desktop/shell/HomeRoute.svelte
@@ -0,0 +1,54 @@
+<script module lang="ts">
+    export interface HomeProps {
+        showLandingPage: boolean;
+    }
+
+    export type HomeType = Component<HomeProps>;
+</script>
+
+<script lang="ts">
+    import { chatsInitialisedStore, identityStateStore } from "@client";
+    import { type Component } from "svelte";
+    import FancyLoader from "@src/desktop/ui/icons/FancyLoader.svelte";
+    import LandingPage from "@src/desktop/features/landing/LandingPage.svelte";
+    import Home from "./Home.svelte";
+
+    let { showLandingPage }: HomeProps = $props();
+
+    let registering = $derived(
+        $identityStateStore.kind === "registering" ||
+            ($identityStateStore.kind === "loading_user" && $identityStateStore.registering),
+    );
+
+    let showLoader = $derived(
+        !registering && (!$chatsInitialisedStore || $identityStateStore.kind === "loading_user"),
+    );
+</script>
+
+{#if showLandingPage}
+    <LandingPage />
+{:else if showLoader}
+    <div class="loading">
+        <div class="inner-loader">
+            <FancyLoader />
+        </div>
+    </div>
+{:else}
+    <Home />
+{/if}
+
+<style lang="scss">
+    .loading {
+        width: 100vw;
+        height: 100vh;
+        height: calc(var(--vh, 1vh) * 100);
+        height: 100dvh; // firefox will ignore this
+        display: grid;
+    }
+
+    .inner-loader {
+        width: toRem(48);
+        height: toRem(48);
+        margin: auto;
+    }
+</style>
diff --git a/frontend/app/src/components/home/InstallPrompt.svelte b/frontend/app/src/desktop/shell/InstallPrompt.svelte
similarity index 83%
rename from frontend/app/src/components/home/InstallPrompt.svelte
rename to frontend/app/src/desktop/shell/InstallPrompt.svelte
index 9e56112ff1..a715df47d0 100644
--- a/frontend/app/src/components/home/InstallPrompt.svelte
+++ b/frontend/app/src/desktop/shell/InstallPrompt.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
     import { onMount } from "svelte";
     import { isLoading } from "svelte-i18n";
-    import { i18nKey } from "../../i18n/i18n";
-    import { showHomeScreenPrompt } from "../../stores/settings";
-    import Checkbox from "../Checkbox.svelte";
-    import ModalContent from "../ModalContent.svelte";
-    import Overlay from "../Overlay.svelte";
-    import Translatable from "../Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { showHomeScreenPrompt } from "@src/stores/settings";
+    import Checkbox from "@src/desktop/shared/Checkbox.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
 
     let installed = window.matchMedia("(display-mode: standalone)").matches;
     let dismissed = $state(false);
diff --git a/frontend/app/src/desktop/shell/LeftPanel.svelte b/frontend/app/src/desktop/shell/LeftPanel.svelte
new file mode 100644
index 0000000000..b5fe62a1d1
--- /dev/null
+++ b/frontend/app/src/desktop/shell/LeftPanel.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+    import { activityFeedShowing, showLeft, showNav } from "@client";
+    import { rtlStore } from "@src/stores/rtl";
+    import { currentTheme } from "@src/theme/themes";
+    import ActivityFeed from "@src/desktop/features/activity/ActivityFeed.svelte";
+    import ChatList from "@src/desktop/features/chatlist/ChatList.svelte";
+</script>
+
+<section
+    class:visible={$showLeft}
+    class:offset={$showNav}
+    class:rtl={$rtlStore}
+    class:halloween={$currentTheme.name === "halloween"}>
+    <div class="chat-list">
+        {#if $activityFeedShowing}
+            <ActivityFeed />
+        {:else}
+            <ChatList />
+        {/if}
+    </div>
+</section>
+
+<style lang="scss">
+    .chat-list {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
+
+    section {
+        overflow: auto;
+        overflow-x: hidden;
+        max-width: 500px;
+        min-width: 300px;
+        flex: 7;
+        position: relative;
+        border-right: var(--bw) solid var(--bd);
+        background: var(--panel-left-bg);
+
+        &.offset {
+            margin-inline-start: toRem(80);
+            @include mobile() {
+                margin-inline-start: toRem(60);
+            }
+        }
+
+        &.rtl {
+            border-right: none;
+            border-left: var(--bw) solid var(--bd);
+        }
+
+        @include mobile() {
+            width: 100%;
+            max-width: unset;
+            min-width: unset;
+            padding: 0;
+            flex: auto;
+            border-right: none;
+        }
+
+        &.halloween::after {
+            @include cobweb();
+            bottom: 0;
+            right: 0;
+            transform: scaleY(-1);
+        }
+
+        &:not(.visible) {
+            display: none;
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/shell/MiddlePanel.svelte b/frontend/app/src/desktop/shell/MiddlePanel.svelte
new file mode 100644
index 0000000000..92f912f840
--- /dev/null
+++ b/frontend/app/src/desktop/shell/MiddlePanel.svelte
@@ -0,0 +1,178 @@
+<script lang="ts">
+    import { trackedEffect } from "@src/utils/effects.svelte";
+    import {
+        botState,
+        chatIdentifiersEqual,
+        directChatBotsStore,
+        filteredProposalsStore,
+        rightPanelMode,
+        rightPanelWidth,
+        routeStore,
+        selectedChatIdStore,
+        selectedChatSummaryStore,
+        showLeft,
+        showMiddle,
+        showNav,
+        type ChatIdentifier,
+        type MultiUserChat,
+    } from "@client";
+    import { tick } from "svelte";
+    import { fade } from "svelte/transition";
+    import { activeVideoCall, type ActiveVideoCall } from "@src/stores/video";
+    import { currentTheme } from "@src/theme/themes";
+    import UninstalledDirectBot from "@src/desktop/features/bots/UninstalledDirectBot.svelte";
+    import Loading from "@src/ui/Loading.svelte";
+    import ExploreCommunities from "@src/desktop/features/chats/community/explore/Explore.svelte";
+    import CurrentChat from "@src/desktop/features/chats/core/CurrentChat.svelte";
+    import NoChatSelected from "@src/desktop/features/chats/core/NoChatSelected.svelte";
+    import RecommendedGroups from "@src/desktop/features/chats/community/RecommendedGroups.svelte";
+
+    interface Props {
+        joining: MultiUserChat | undefined;
+    }
+
+    let { joining }: Props = $props();
+
+    let middlePanel: HTMLElement | undefined;
+
+    let botId = $derived.by(() => {
+        if ($selectedChatSummaryStore === undefined) return undefined;
+        if ($selectedChatSummaryStore.kind !== "direct_chat") return undefined;
+        return botState.externalBots.get($selectedChatSummaryStore.them.userId)?.id;
+    });
+
+    let uninstalledBotId = $derived.by(() => {
+        return botId !== undefined && $directChatBotsStore.get(botId) === undefined
+            ? botId
+            : undefined;
+    });
+
+    let installingBot = $state(false);
+    trackedEffect("installing-bot", () => {
+        if (uninstalledBotId !== undefined) {
+            installingBot = true;
+        }
+    });
+
+    function alignVideoCall(
+        call: ActiveVideoCall | undefined,
+        chatId: ChatIdentifier | undefined,
+        rightPanelWidth: number | undefined,
+        attempts: number = 0,
+    ) {
+        if (call && chatIdentifiersEqual(call.chatId, chatId) && middlePanel) {
+            const callContainer = document.getElementById("video-call-container");
+            const rect = middlePanel.getBoundingClientRect();
+            if (callContainer) {
+                if (call.view === "fullscreen") {
+                    let width = window.innerWidth;
+                    if (
+                        $rightPanelMode !== "floating" &&
+                        (call.threadOpen || call.participantsOpen)
+                    ) {
+                        width = width - (rightPanelWidth ?? 500);
+                    }
+                    callContainer.style.setProperty("left", `0px`);
+                    callContainer.style.setProperty("width", `${width}px`);
+                    callContainer.style.setProperty("top", `0px`);
+                    callContainer.style.setProperty("height", `${window.innerHeight}px`);
+                } else {
+                    callContainer.style.setProperty("left", `${rect.left}px`);
+                    callContainer.style.setProperty("width", `${rect.width}px`);
+                    callContainer.style.setProperty("top", `${rect.top}px`);
+                    callContainer.style.setProperty("height", `${rect.height}px`);
+                }
+            } else {
+                // hack: there is a race condition here and it's possible we don't find the container on the first try
+                if (attempts === 0) {
+                    tick().then(() => alignVideoCall(call, chatId, attempts + 1));
+                }
+            }
+        }
+    }
+
+    function resize() {
+        alignVideoCall($activeVideoCall, $selectedChatIdStore, $rightPanelWidth);
+    }
+    let noChat = $derived($routeStore.kind !== "global_chat_selected_route");
+    $effect(() => {
+        if (middlePanel) {
+            resize();
+        }
+    });
+</script>
+
+<svelte:window onresize={resize} onorientationchange={resize} />
+
+<section
+    bind:this={middlePanel}
+    class:visible={$showMiddle}
+    class:offset={$showNav && !$showLeft}
+    class:halloween={$currentTheme.name === "halloween"}>
+    {#if $routeStore.kind === "explore_groups_route"}
+        <RecommendedGroups {joining} />
+    {:else if $routeStore.kind === "communities_route"}
+        <ExploreCommunities />
+    {:else if $routeStore.kind === "admin_route"}
+        {#await import("@src/desktop/features/admin/Admin.svelte")}
+            <div class="loading">
+                <Loading />
+            </div>
+        {:then { default: Admin }}
+            <Admin />
+        {/await}
+    {:else if $selectedChatIdStore === undefined}
+        {#if noChat}
+            <div class="no-chat" in:fade>
+                <NoChatSelected />
+            </div>
+        {/if}
+    {:else if installingBot && botId && $selectedChatIdStore.kind === "direct_chat"}
+        <UninstalledDirectBot
+            onClose={() => (installingBot = false)}
+            chatId={$selectedChatIdStore}
+            {botId} />
+    {:else if $selectedChatSummaryStore !== undefined}
+        <CurrentChat
+            {joining}
+            chat={$selectedChatSummaryStore}
+            filteredProposals={$filteredProposalsStore} />
+    {/if}
+</section>
+
+<style lang="scss">
+    .no-chat {
+        height: 100%;
+    }
+
+    section {
+        min-width: 390px;
+        overflow: auto;
+        overflow-x: hidden;
+        flex: 13;
+        background: none;
+        padding: 0;
+
+        @include mobile() {
+            min-width: unset;
+        }
+
+        &.offset {
+            margin-inline-start: toRem(80);
+            @include mobile() {
+                margin-inline-start: toRem(60);
+            }
+        }
+
+        &.halloween::after {
+            @include cobweb();
+            bottom: 0;
+            right: 0;
+            transform: scaleY(-1);
+        }
+
+        &:not(.visible) {
+            display: none;
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/shell/NotFound.svelte b/frontend/app/src/desktop/shell/NotFound.svelte
new file mode 100644
index 0000000000..b761fb6bbd
--- /dev/null
+++ b/frontend/app/src/desktop/shell/NotFound.svelte
@@ -0,0 +1,61 @@
+<script module lang="ts">
+    export type NotFoundType = Component;
+</script>
+
+<script lang="ts">
+    import { mobileWidth } from "@client";
+    import type { Component } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    interface Props {
+        onClose?: () => void;
+    }
+    let { onClose }: Props = $props();
+</script>
+
+<ModalContent backgroundImage={"/assets/landscape.png"} {onClose}>
+    {#snippet body()}
+        <div class="body">
+            <h1 class="msg">page not found</h1>
+            <div class="not-found"></div>
+        </div>
+    {/snippet}
+    {#snippet footer()}
+        <div>
+            <ButtonGroup align={$mobileWidth ? "fill" : "center"}>
+                <Button onClick={onClose}>
+                    <Translatable resourceKey={i18nKey("goHome")} />
+                </Button>
+            </ButtonGroup>
+        </div>
+    {/snippet}
+</ModalContent>
+
+<style lang="scss">
+    .body {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: $sp5;
+    }
+    .msg {
+        @include font(bold, normal, fs-200);
+        text-shadow: 2px 2px #000;
+        text-transform: uppercase;
+    }
+
+    .not-found {
+        background-image: url("/assets/not_found.svg");
+        width: 250px;
+        height: 250px;
+
+        @include mobile() {
+            width: 150px;
+            height: 150px;
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/shell/NotificationsBar.svelte b/frontend/app/src/desktop/shell/NotificationsBar.svelte
new file mode 100644
index 0000000000..fb29af598c
--- /dev/null
+++ b/frontend/app/src/desktop/shell/NotificationsBar.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+    import type { OpenChat } from "@client";
+    import { anonUserStore, notificationStatus } from "@client";
+    import { getContext } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Button from "@src/ui/Button.svelte";
+    import ButtonGroup from "@src/ui/ButtonGroup.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Overlay from "@src/ui/Overlay.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    $inspect(`PUSH STATUS: ${$notificationStatus}`);
+</script>
+
+{#if !$anonUserStore && $notificationStatus === "prompt"}
+    <Overlay dismissible>
+        <ModalContent>
+            {#snippet header()}
+                <Translatable resourceKey={i18nKey("Notifications")} />
+            {/snippet}
+            {#snippet body()}
+                <Translatable resourceKey={i18nKey("enableNotifications")} />
+            {/snippet}
+            {#snippet footer()}
+                <ButtonGroup>
+                    <Button onClick={() => client.askForNotificationPermission()}
+                        ><Translatable resourceKey={i18nKey("yesPlease")} /></Button>
+                    <Button secondary onClick={() => client.setSoftDisabled(true)}
+                        ><Translatable resourceKey={i18nKey("noThanks")} /></Button>
+                </ButtonGroup>
+            {/snippet}
+        </ModalContent>
+    </Overlay>
+{/if}
diff --git a/frontend/app/src/desktop/shell/OfflineFooter.svelte b/frontend/app/src/desktop/shell/OfflineFooter.svelte
new file mode 100644
index 0000000000..bfebe49e4c
--- /dev/null
+++ b/frontend/app/src/desktop/shell/OfflineFooter.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+    import { fade } from "svelte/transition";
+    import CloudOffOutline from "svelte-material-icons/CloudOffOutline.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+</script>
+
+<div transition:fade={{ duration: 250 }} role="button" tabindex="0" class="offline">
+    <div class="icon">
+        <CloudOffOutline size={"1.5em"} color={"currentColor"} />
+    </div>
+    <Translatable resourceKey={i18nKey("offlineMessage")} />
+</div>
+
+<style lang="scss">
+    .offline {
+        position: absolute;
+        height: toRem(40);
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: $sp4;
+        bottom: 0;
+        cursor: pointer;
+        @include z-index("anon-banner");
+        background-color: var(--notificationBar-bg);
+        color: var(--notificationBar-txt);
+        padding: $sp4 $sp3;
+        text-transform: uppercase;
+
+        .icon {
+            flex: 0 0 toRem(24);
+        }
+    }
+</style>
diff --git a/frontend/app/src/components/Profiler.svelte b/frontend/app/src/desktop/shell/Profiler.svelte
similarity index 98%
rename from frontend/app/src/components/Profiler.svelte
rename to frontend/app/src/desktop/shell/Profiler.svelte
index c9ae2d22e2..7f1ba20b89 100644
--- a/frontend/app/src/components/Profiler.svelte
+++ b/frontend/app/src/desktop/shell/Profiler.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { profileStore } from "@client";
-    import Select from "./Select.svelte";
+    import Select from "@src/desktop/shared/Select.svelte";
 
     let selectedMethod: string = $state("");
     let dragging = false;
diff --git a/frontend/app/src/components/Resizable.svelte b/frontend/app/src/desktop/shell/Resizable.svelte
similarity index 100%
rename from frontend/app/src/components/Resizable.svelte
rename to frontend/app/src/desktop/shell/Resizable.svelte
diff --git a/frontend/app/src/components/home/RightPanel.svelte b/frontend/app/src/desktop/shell/RightPanel.svelte
similarity index 93%
rename from frontend/app/src/components/home/RightPanel.svelte
rename to frontend/app/src/desktop/shell/RightPanel.svelte
index d8451b7bf6..3d9a53da4c 100644
--- a/frontend/app/src/components/home/RightPanel.svelte
+++ b/frontend/app/src/desktop/shell/RightPanel.svelte
@@ -1,6 +1,6 @@
 
 <script lang="ts">
-    import { navigate } from "@utils/navigation";
+    import { navigate } from "@src/utils/navigation";
     import type {
         ChatEvent,
         ChatIdentifier,
@@ -17,26 +17,26 @@
     import { allUsersStore, compareRoles, currentUserIdStore, eventsStore, fullWidth, lastRightPanelState, publish, rightPanelHistory, roleAsText, routeStore, selectedChatBlockedUsersStore, selectedChatBotsStore, selectedChatIdStore, selectedChatInvitedUsersStore, selectedChatLapsedMembersStore, selectedChatMembersStore, selectedChatPinnedMessagesStore, selectedChatSummaryStore, selectedChatWebhooksStore, selectedCommunityBlockedUsersStore, selectedCommunityBotsStore, selectedCommunityInvitedUsersStore, selectedCommunityLapsedMembersStore, selectedCommunityMembersStore, selectedCommunitySummaryStore, setRightPanelHistory } from "@client";
     import { getContext } from "svelte";
     import { _ } from "svelte-i18n";
-    import { i18nKey } from "../../i18n/i18n";
-    import { toastStore } from "../../stores/toast";
-    import { activeVideoCall } from "../../stores/video";
-    import { currentTheme } from "../../theme/themes";
-    import { removeQueryStringParam, removeThreadMessageIndex } from "../../utils/urls";
-    import Resizable from "../Resizable.svelte";
-    import ChannelOrCommunityInvite from "./ChannelOrCommunityInvite.svelte";
-    import ChannelOrCommunityMembers from "./ChannelOrCommunityMembers.svelte";
-    import ChannelOrCommunitySummary from "./ChannelOrCommunitySummary.svelte";
-    import CommunityDetails from "./communities/details/CommunitySummary.svelte";
-    import CommunityFilters from "./communities/explore/Filters.svelte";
-    import DirectChatDetails from "./groupdetails/DirectChatDetails.svelte";
-    import GroupDetails from "./groupdetails/GroupDetails.svelte";
-    import InviteUsers from "./groupdetails/InviteUsers.svelte";
-    import Members from "./groupdetails/Members.svelte";
-    import PinnedMessages from "./pinned/PinnedMessages.svelte";
-    import UserProfile from "./profile/UserProfile.svelte";
-    import ProposalGroupFilters from "./ProposalGroupFilters.svelte";
-    import Thread from "./thread/Thread.svelte";
-    import ActiveCallParticipants from "./video/ActiveCallParticipants.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import { activeVideoCall } from "@src/stores/video";
+    import { currentTheme } from "@src/theme/themes";
+    import { removeQueryStringParam, removeThreadMessageIndex } from "@src/utils/urls";
+    import Resizable from "./Resizable.svelte";
+    import ChannelOrCommunityInvite from "@src/desktop/features/chats/community/ChannelOrCommunityInvite.svelte";
+    import ChannelOrCommunityMembers from "@src/desktop/features/chats/community/ChannelOrCommunityMembers.svelte";
+    import ChannelOrCommunitySummary from "@src/desktop/features/chats/community/ChannelOrCommunitySummary.svelte";
+    import CommunityDetails from "@src/desktop/features/chats/community/details/CommunitySummary.svelte";
+    import CommunityFilters from "@src/desktop/features/chats/community/explore/Filters.svelte";
+    import DirectChatDetails from "@src/desktop/features/chats/group/DirectChatDetails.svelte";
+    import GroupDetails from "@src/desktop/features/chats/group/GroupDetails.svelte";
+    import InviteUsers from "@src/desktop/features/chats/group/InviteUsers.svelte";
+    import Members from "@src/desktop/features/chats/group/Members.svelte";
+    import PinnedMessages from "@src/desktop/features/chats/pinned/PinnedMessages.svelte";
+    import UserProfile from "@src/desktop/features/profile/UserProfile.svelte";
+    import ProposalGroupFilters from "@src/desktop/features/proposals/ProposalGroupFilters.svelte";
+    import Thread from "@src/desktop/features/chats/thread/Thread.svelte";
+    import ActiveCallParticipants from "@src/desktop/features/calls/ActiveCallParticipants.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/components/home/RightPanelWrapper.svelte b/frontend/app/src/desktop/shell/RightPanelWrapper.svelte
similarity index 91%
rename from frontend/app/src/components/home/RightPanelWrapper.svelte
rename to frontend/app/src/desktop/shell/RightPanelWrapper.svelte
index 40ea5b4ca4..7165e3c459 100644
--- a/frontend/app/src/components/home/RightPanelWrapper.svelte
+++ b/frontend/app/src/desktop/shell/RightPanelWrapper.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { rightPanelMode, setRightPanelHistory } from "@client";
-    import { rtlStore } from "../../stores/rtl";
-    import Overlay from "../Overlay.svelte";
+    import { rtlStore } from "@src/stores/rtl";
+    import Overlay from "@src/ui/Overlay.svelte";
     import RightPanel from "./RightPanel.svelte";
 
     function closeRightPanel() {
diff --git a/frontend/app/src/desktop/shell/Router.svelte b/frontend/app/src/desktop/shell/Router.svelte
new file mode 100644
index 0000000000..1c6a6e4e0b
--- /dev/null
+++ b/frontend/app/src/desktop/shell/Router.svelte
@@ -0,0 +1,315 @@
+
+<script lang="ts">
+    import { initNavigationHistoryTracking, navigate } from "@src/utils/navigation";
+    import { handleLinkClick, removeQueryStringParam } from "@src/utils/urls";
+    import { type ChatIdentifier, OpenChat, type RouteParams, adminRoute, blogRoute, chatIdentifiersEqual, chatListRoute, chatListScopeStore, chatsInitialisedStore, communitesRoute, exploringStore, globalDirectChatSelectedRoute, globalGroupChatSelectedRoute, messageIndexStore, notFoundStore, routeKindStore, routeStore, routerReadyStore, selectedChannelRoute, selectedChatIdStore, selectedCommunityIdStore, selectedCommunityRoute, selectedServerChatStore, shareRoute, threadMessageIndexStore, threadOpenStore } from "@client";
+    import page from "page";
+    import { getContext, onMount, untrack } from "svelte";
+    import Home, { type HomeType } from "./HomeRoute.svelte";
+    import LandingPage, { type LandingPageType } from "@src/desktop/features/landing/LandingPage.svelte";
+    import NotFound, { type NotFoundType } from "./NotFound.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        showLandingPage: boolean;
+    }
+
+    let { showLandingPage }: Props = $props();
+
+    let route: HomeType | LandingPageType | NotFoundType | undefined = $state(undefined);
+
+    function parsePathParams(fn: (ctx: PageJS.Context) => RouteParams) {
+        return (ctx: PageJS.Context, next: () => any) => {
+            client.setRouteParams(ctx, fn(ctx));
+            scrollToTop();
+            next();
+        };
+    }
+
+    onMount(() => {
+        const onLinkClick = handleLinkClick(client, navigate);
+        document.addEventListener("click", onLinkClick, { capture: true });
+
+        page(
+            "/home",
+            parsePathParams(() => ({ kind: "home_landing_route", scope: { kind: "none" } })),
+            track,
+            () => (route = LandingPage),
+        );
+        page(
+            "/features",
+            parsePathParams(() => ({ kind: "features_route", scope: { kind: "none" } })),
+            track,
+            () => (route = LandingPage),
+        );
+        page(
+            "/roadmap",
+            parsePathParams(() => ({ kind: "roadmap_route", scope: { kind: "none" } })),
+            track,
+            () => (route = LandingPage),
+        );
+        page("/blog/:slug?", parsePathParams(blogRoute), track, () => (route = LandingPage));
+        page(
+            "/whitepaper",
+            parsePathParams(() => ({ kind: "whitepaper_route", scope: { kind: "none" } })),
+            track,
+            () => (route = LandingPage),
+        );
+        page(
+            "/guidelines",
+            parsePathParams(() => ({ kind: "guidelines_route", scope: { kind: "none" } })),
+            track,
+            () => (route = LandingPage),
+        );
+        page(
+            "/terms",
+            parsePathParams(() => ({ kind: "terms_route", scope: { kind: "none" } })),
+            track,
+            () => (route = LandingPage),
+        );
+        page(
+            "/faq",
+            parsePathParams(() => ({ kind: "faq_route", scope: { kind: "none" } })),
+            track,
+            () => (route = LandingPage),
+        );
+        page(
+            "/diamond",
+            parsePathParams(() => ({ kind: "diamond_route", scope: { kind: "none" } })),
+            track,
+            () => (route = LandingPage),
+        );
+        page(
+            "/architecture",
+            parsePathParams(() => ({ kind: "architecture_route", scope: { kind: "none" } })),
+            track,
+            () => (route = LandingPage),
+        );
+        // this is for explore mode
+        page("/communities", parsePathParams(communitesRoute), track, () => (route = Home));
+        // global direct chat selected
+        page(
+            "/user/:chatId/:messageIndex?/:threadMessageIndex?",
+            parsePathParams(globalDirectChatSelectedRoute({ kind: "chats" })),
+            track,
+            () => (route = Home),
+        );
+        // global group chat selected
+        page(
+            "/group/:chatId/:messageIndex?/:threadMessageIndex?",
+            parsePathParams(globalGroupChatSelectedRoute({ kind: "chats" })),
+            track,
+            () => (route = Home),
+        );
+        // selected community group
+        page(
+            "/community/:communityId",
+            parsePathParams(selectedCommunityRoute),
+            track,
+            () => (route = Home),
+        );
+        // selected community channel
+        page(
+            "/community/:communityId/channel/:channelId/:messageIndex?/:threadMessageIndex?",
+            parsePathParams(selectedChannelRoute(false)),
+            track,
+            () => (route = Home),
+        );
+        // global direct and group chats
+        page(
+            "/chats",
+            parsePathParams(chatListRoute({ kind: "chats" })),
+            track,
+            () => (route = Home),
+        );
+        page(
+            "/chats/user/:chatId/:messageIndex?/:threadMessageIndex?",
+            parsePathParams(globalDirectChatSelectedRoute({ kind: "chats" })),
+            track,
+            () => (route = Home),
+        );
+        page(
+            "/chats/group/:chatId/:messageIndex?/:threadMessageIndex?",
+            parsePathParams(globalGroupChatSelectedRoute({ kind: "chats" })),
+            track,
+            () => (route = Home),
+        );
+        // favourites
+        page(
+            "/favourite",
+            parsePathParams(chatListRoute({ kind: "favourite" })),
+            track,
+            () => (route = Home),
+        );
+        // selected global group favourite
+        page(
+            "/favourite/group/:chatId/:messageIndex?/:threadMessageIndex?",
+            parsePathParams(globalGroupChatSelectedRoute({ kind: "favourite" })),
+            track,
+            () => (route = Home),
+        );
+        // selected global direct favourite
+        page(
+            "/favourite/user/:chatId/:messageIndex?/:threadMessageIndex?",
+            parsePathParams(globalDirectChatSelectedRoute({ kind: "favourite" })),
+            track,
+            () => (route = Home),
+        );
+        // selected favourite channel
+        page(
+            "/favourite/community/:communityId/channel/:channelId/:messageIndex?/:threadMessageIndex?",
+            parsePathParams(selectedChannelRoute(true)),
+            track,
+            () => (route = Home),
+        );
+        page("/share", parsePathParams(shareRoute), track, () => (route = Home));
+        page("/admin", parsePathParams(adminRoute), track, () => (route = Home));
+        page(
+            "/",
+            parsePathParams(() => ({ kind: "home_route", scope: { kind: "none" } })),
+            track,
+            () => (route = Home),
+        );
+        // legacy route
+        page(
+            "/:chatId/:messageIndex?/:threadMessageIndex?",
+            parsePathParams(globalGroupChatSelectedRoute({ kind: "chats" })),
+            track,
+            () => (route = Home),
+        );
+        page(
+            "*",
+            parsePathParams(() => ({ kind: "not_found_route", scope: { kind: "none" } })),
+            () => {
+                notFoundStore.set(true);
+                route = NotFound;
+            },
+        );
+        page.start({ click: false });
+        const cleanupNavigationHistoryTracking = initNavigationHistoryTracking();
+
+        routerReadyStore.set(true);
+
+        return () => {
+            cleanupNavigationHistoryTracking();
+            document.removeEventListener("click", onLinkClick, { capture: true });
+            page.stop();
+        };
+    });
+
+    function scrollToTop() {
+        window.scrollTo({
+            behavior: "auto",
+            top: 0,
+        });
+    }
+
+    function track(ctx: PageJS.Context, next: () => any) {
+        console.debug("GA: page_view", ctx.pathname);
+        gtag("event", "page_view", {
+            page_location: ctx.pathname,
+        });
+        next();
+    }
+
+    // This is where our general effects are going to go. They don't *really* belong in a component at all
+    // but unfortunately unowned effects do not respond to store value changes
+
+    // Set selected community
+    $effect(() => {
+        if ($chatsInitialisedStore && $selectedCommunityIdStore !== undefined) {
+            const id = $selectedCommunityIdStore;
+
+            // this untrack is not really necessary in this case but it's probably a good pattern to follow to
+            // make double sure we are only reacting to the things we want to react to
+            untrack(() => {
+                client.setSelectedCommunity(id).then((preview) => {
+                    if (preview && $selectedChatIdStore === undefined) {
+                        // if we are previewing the community we need to select the first chat manually
+                        client.selectDefaultChat();
+                    }
+                });
+            });
+        }
+    });
+
+    $effect(() => {
+        if (client.captureReferralCode()) {
+            navigate(removeQueryStringParam("ref"));
+        }
+    });
+
+    let previousChatId: ChatIdentifier | undefined = undefined;
+    $effect(() => {
+        if (
+            $threadOpenStore &&
+            $messageIndexStore !== undefined &&
+            $selectedChatIdStore !== undefined &&
+            chatIdentifiersEqual(previousChatId, $selectedChatIdStore)
+        ) {
+            const chatId = $selectedChatIdStore;
+            const idx = $messageIndexStore;
+            const threadIdx = $threadMessageIndexStore;
+            untrack(() => {
+                client.openThreadFromMessageIndex(chatId, idx, threadIdx);
+            });
+        }
+        previousChatId = $selectedChatIdStore;
+    });
+
+    $effect(() => {
+        if (!$threadOpenStore) {
+            untrack(() => {
+                client.filterRightPanelHistory((panel) => panel.kind !== "message_thread_panel");
+            });
+        }
+    });
+
+    $effect(() => {
+        if (
+            $selectedChatIdStore === undefined &&
+            $chatListScopeStore.kind !== "none" &&
+            !$exploringStore
+        ) {
+            client.selectDefaultChat();
+        }
+    });
+
+    // Set selected chat
+    $effect(() => {
+        // we have to be *so* careful with the reactivity here. Is this actually better?
+        if (
+            $chatsInitialisedStore &&
+            $selectedChatIdStore !== undefined &&
+            ($routeKindStore === "selected_channel_route" ||
+                $routeKindStore === "global_chat_selected_route")
+        ) {
+            untrack(() => {
+                if (
+                    $routeStore.kind === "selected_channel_route" ||
+                    $routeStore.kind === "global_chat_selected_route"
+                ) {
+                    const id = $selectedChatIdStore;
+                    const messageIndex = $routeStore.messageIndex;
+                    const threadMessageIndex = $routeStore.threadMessageIndex;
+                    if (id !== undefined) {
+                        client.setSelectedChat(id, messageIndex, threadMessageIndex);
+                    }
+                }
+            });
+        }
+    });
+
+    // clear selected chat
+    $effect(() => {
+        if ($selectedChatIdStore === undefined) {
+            selectedServerChatStore.set(undefined);
+        }
+    });
+</script>
+
+{#if route !== undefined}
+    {@const RouteComponent = route}
+    <RouteComponent {showLandingPage} />
+{/if}
diff --git a/frontend/app/src/desktop/shell/SelectChatModal.svelte b/frontend/app/src/desktop/shell/SelectChatModal.svelte
new file mode 100644
index 0000000000..4f4af43241
--- /dev/null
+++ b/frontend/app/src/desktop/shell/SelectChatModal.svelte
@@ -0,0 +1,573 @@
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<script lang="ts">
+    import { trackedEffect } from "@src/utils/effects.svelte";
+    import type {
+        ChatIdentifier,
+        ChatSummary,
+        CommunityIdentifier,
+        CommunitySummary,
+        DiamondMembershipStatus,
+        DirectChatSummary,
+        MultiUserChat,
+        OpenChat,
+    } from "@client";
+    import {
+        allUsersStore,
+        AvatarSize,
+        chatIdentifiersEqual,
+        communitiesStore,
+        favouritesStore,
+        iconSize,
+        selectedChatIdStore,
+        serverDirectChatsStore,
+        serverGroupChatsStore,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import AccountMultiple from "svelte-material-icons/AccountMultiple.svelte";
+    import Close from "svelte-material-icons/Close.svelte";
+    import ForumOutline from "svelte-material-icons/ForumOutline.svelte";
+    import HeartOutline from "svelte-material-icons/HeartOutline.svelte";
+    import MessageOutline from "svelte-material-icons/MessageOutline.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { rtlStore } from "@src/stores/rtl";
+    import { now } from "@src/stores/time";
+    import { buildDisplayName } from "@src/utils/user";
+    import Avatar from "@src/desktop/shared/Avatar.svelte";
+    import CollapsibleCard from "@src/desktop/shared/CollapsibleCard.svelte";
+    import HoverIcon from "@src/ui/HoverIcon.svelte";
+    import Search from "@src/desktop/shared/Search.svelte";
+    import SectionHeader from "@src/desktop/shared/SectionHeader.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import Badges from "@src/desktop/features/profile/Badges.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        onSelect: (chatId: ChatIdentifier) => void;
+        onClose: () => void;
+    }
+
+    type ShareTo = {
+        directChats: ShareChat[];
+        groupChats: ShareChat[];
+        favourites: ShareChat[];
+        communities: ShareCommunity[];
+    };
+    type ShareChat = {
+        kind: "chat";
+        id: ChatIdentifier;
+        userId: string | undefined;
+        name: string;
+        diamondStatus: DiamondMembershipStatus["kind"];
+        streak: number;
+        avatarUrl: string;
+        description: string;
+        username: string | undefined;
+        lastUpdated: bigint;
+        uniquePerson: boolean;
+    };
+    type ShareCommunity = {
+        kind: "community";
+        id: CommunityIdentifier;
+        name: string;
+        avatarUrl: string;
+        description: string;
+        lastUpdated: bigint;
+        channels: ShareChat[];
+    };
+
+    let { onClose, onSelect }: Props = $props();
+    let searchTerm = $state("");
+    let searchTermLower = $derived(searchTerm.toLowerCase());
+    let targets = $state<ShareTo>({
+        directChats: [],
+        groupChats: [],
+        favourites: [],
+        communities: [],
+    });
+
+    trackedEffect("select-chat-modal", () => {
+        buildListOfTargets($now, $selectedChatIdStore, searchTermLower).then((t) => (targets = t));
+    });
+    let noTargets = $derived(getNumberOfTargets(targets) === 0);
+
+    function getNumberOfTargets(targets: ShareTo): number {
+        return (
+            targets.directChats.length +
+            targets.groupChats.length +
+            targets.communities.flatMap((c) => c.channels).length
+        );
+    }
+
+    async function targetsFromChatList(
+        now: number,
+        chats: ChatSummary[],
+        selectedChatId: ChatIdentifier | undefined,
+    ): Promise<ShareChat[]> {
+        return Promise.all(
+            filterChatSelection(chats, selectedChatId).map((c) => normaliseChatSummary(now, c)),
+        );
+    }
+
+    function matchesSearch(thing: ShareChat | ShareCommunity, searchTerm: string): boolean {
+        return (
+            (searchTerm === "" ||
+                thing.name.toLocaleLowerCase().includes(searchTerm) ||
+                (thing.kind === "chat" &&
+                    thing.username?.toLocaleLowerCase()?.includes(searchTerm))) ??
+            false
+        );
+    }
+
+    function chatMatchesSearch(chats: ShareChat[], searchTerm: string): ShareChat[] {
+        return chats.filter((c) => matchesSearch(c, searchTerm)).sort(compare);
+    }
+
+    function communityMatchesSearch(communities: ShareCommunity[], searchTerm: string) {
+        return communities
+            .reduce((agg, c) => {
+                if (matchesSearch(c, searchTerm)) {
+                    agg.push(c);
+                } else {
+                    const filtered = chatMatchesSearch(c.channels, searchTerm);
+                    if (filtered.length > 0) {
+                        agg.push({
+                            ...c,
+                            channels: filtered,
+                        });
+                    }
+                }
+                return agg;
+            }, [] as ShareCommunity[])
+            .sort(compare);
+    }
+
+    async function buildListOfTargets(
+        now: number,
+        selectedChatId: ChatIdentifier | undefined,
+        searchTerm: string,
+    ): Promise<ShareTo> {
+        let targets: ShareTo = {
+            directChats: [],
+            groupChats: [],
+            favourites: [],
+            communities: [],
+        };
+        const direct = [...$serverDirectChatsStore.values()].map((d) => ({
+            ...d,
+            name: buildDisplayName($allUsersStore, d.them.userId, "user"),
+        }));
+
+        const group = [...$serverGroupChatsStore.values()];
+        const channels = [...$communitiesStore.values()].flatMap((c) => c.channels);
+        const all = [...group, ...direct, ...channels];
+        const favs = all.filter((c) => $favouritesStore.has(c.id));
+        try {
+            const directChats = await targetsFromChatList(now, direct, selectedChatId);
+            const groupChats = await targetsFromChatList(now, group, selectedChatId);
+            const favourites = await targetsFromChatList(now, favs, selectedChatId);
+            const communities = await Promise.all(
+                [...$communitiesStore.values()].map((c) =>
+                    normaliseCommunity(now, selectedChatId, c),
+                ),
+            );
+            return {
+                directChats: chatMatchesSearch(directChats, searchTerm),
+                groupChats: chatMatchesSearch(groupChats, searchTerm),
+                favourites: chatMatchesSearch(favourites, searchTerm),
+                communities: communityMatchesSearch(communities, searchTerm),
+            };
+        } catch (err) {}
+        return targets;
+    }
+
+    async function normaliseCommunity(
+        now: number,
+        selectedChatId: ChatIdentifier | undefined,
+        { id, name, avatar, description, channels, lastUpdated }: CommunitySummary,
+    ): Promise<ShareCommunity> {
+        const normalisedChannels = await Promise.all(
+            filterChatSelection(channels, selectedChatId).map((c) => normaliseChatSummary(now, c)),
+        );
+        return {
+            kind: "community",
+            id,
+            name,
+            avatarUrl: client.communityAvatarUrl(id.communityId, avatar),
+            description,
+            lastUpdated,
+            channels: normalisedChannels,
+        };
+    }
+
+    async function normaliseChatSummary(now: number, chatSummary: ChatSummary): Promise<ShareChat> {
+        switch (chatSummary.kind) {
+            case "direct_chat":
+                const description = await buildDirectChatDescription(chatSummary, now);
+                const them = $allUsersStore.get(chatSummary.them.userId);
+                return {
+                    kind: "chat",
+                    id: chatSummary.id,
+                    userId: chatSummary.them.userId,
+                    name: client.displayName(them),
+                    diamondStatus: them?.diamondStatus ?? "inactive",
+                    streak: client.getStreak(chatSummary.them.userId),
+                    avatarUrl: client.userAvatarUrl(them),
+                    description,
+                    username: them ? "@" + them.username : undefined,
+                    lastUpdated: chatSummary.lastUpdated,
+                    uniquePerson: them?.isUniquePerson ?? false,
+                };
+
+            default:
+                return {
+                    kind: "chat",
+                    id: chatSummary.id,
+                    userId: undefined,
+                    name: chatSummary.name,
+                    diamondStatus: "inactive" as DiamondMembershipStatus["kind"],
+                    streak: 0,
+                    avatarUrl: client.groupAvatarUrl(chatSummary),
+                    description: buildGroupChatDescription(chatSummary),
+                    username: undefined,
+                    lastUpdated: chatSummary.lastUpdated,
+                    uniquePerson: false,
+                };
+        }
+    }
+
+    async function buildDirectChatDescription(
+        chat: DirectChatSummary,
+        now: number,
+    ): Promise<string> {
+        return client.getLastOnlineDate(chat.them.userId, now).then((lastOnline) => {
+            if (lastOnline !== undefined && lastOnline !== 0) {
+                return client.formatLastOnlineDate($_, now, lastOnline)[0];
+            } else {
+                return $_("offline");
+            }
+        });
+    }
+
+    function buildGroupChatDescription(group: MultiUserChat): string {
+        if (group.description.length > 0) {
+            return group.description;
+        } else {
+            const level = $_(`level.${group.level}`).toLowerCase();
+            const number = group.memberCount;
+            return group.public
+                ? $_("publicGroupWithN", { values: { number, level } })
+                : $_("privateGroupWithN", { values: { number, level } });
+        }
+    }
+
+    function filterChatSelection(
+        chats: ChatSummary[],
+        selectedChatId: ChatIdentifier | undefined,
+    ): ChatSummary[] {
+        return chats.filter(
+            (c) =>
+                !chatIdentifiersEqual(selectedChatId, c.id) &&
+                client.canSendMessage(c.id, "message", "text"),
+        );
+    }
+
+    function compare(a: { name: string }, b: { name: string }): number {
+        return a.name.localeCompare(b.name);
+    }
+</script>
+
+<section>
+    <SectionHeader border={false} gap>
+        <HoverIcon>
+            <AccountMultiple size={$iconSize} color={"var(--icon-txt)"} />
+        </HoverIcon>
+        <h4><Translatable resourceKey={i18nKey("sendTo")} /></h4>
+        <span role="button" tabindex="0" title={$_("close")} class="close" onclick={onClose}>
+            <HoverIcon>
+                <Close size={$iconSize} color={"var(--icon-txt)"} />
+            </HoverIcon>
+        </span>
+    </SectionHeader>
+    <div class="search">
+        <Search searching={false} bind:searchTerm placeholder={i18nKey("search")} />
+    </div>
+    {#if noTargets}
+        <div class="no-chats"><Translatable resourceKey={i18nKey("noChatsAvailable")} /></div>
+    {:else}
+        <div class="selectable-chats">
+            {#if targets.directChats.length > 0}
+                <CollapsibleCard
+                    open={searchTerm !== ""}
+                    first
+                    transition={false}
+                    headerText={i18nKey("communities.directChats")}>
+                    {#snippet titleSlot()}
+                        <div class="card-header">
+                            <div class="avatar">
+                                <MessageOutline size={$iconSize} color={"var(--icon-txt)"} />
+                            </div>
+                            <div class="details">
+                                <h4 class="title">
+                                    <Translatable
+                                        resourceKey={i18nKey("communities.directChats")} />
+                                </h4>
+                            </div>
+                        </div>
+                    {/snippet}
+                    {#each targets.directChats as target}
+                        <div
+                            role="button"
+                            tabindex="0"
+                            class="row"
+                            class:rtl={$rtlStore}
+                            onclick={() => onSelect(target.id)}>
+                            <div class="avatar">
+                                <Avatar url={target.avatarUrl} size={AvatarSize.Default} />
+                            </div>
+                            <div class="details">
+                                <div class="name">
+                                    <span class="display-name">
+                                        {target.name}
+                                    </span>
+                                    <Badges
+                                        uniquePerson={target.uniquePerson}
+                                        diamondStatus={target.diamondStatus}
+                                        streak={target.streak} />
+                                    {#if target.username !== undefined}
+                                        <span class="username">{target.username}</span>
+                                    {/if}
+                                </div>
+                                <div class="description">{target.description}</div>
+                            </div>
+                        </div>
+                    {/each}
+                </CollapsibleCard>
+            {/if}
+            {#if targets.groupChats.length > 0}
+                <CollapsibleCard
+                    transition={false}
+                    open={searchTerm !== ""}
+                    headerText={i18nKey("communities.groupChats")}>
+                    {#snippet titleSlot()}
+                        <div class="card-header">
+                            <div class="avatar">
+                                <ForumOutline size={$iconSize} color={"var(--icon-txt)"} />
+                            </div>
+                            <div class="details">
+                                <h4 class="title">
+                                    <Translatable resourceKey={i18nKey("communities.groupChats")} />
+                                </h4>
+                            </div>
+                        </div>
+                    {/snippet}
+                    {#each targets.groupChats as target}
+                        <div
+                            role="button"
+                            tabindex="0"
+                            class="row"
+                            class:rtl={$rtlStore}
+                            onclick={() => onSelect(target.id)}>
+                            <div class="avatar">
+                                <Avatar url={target.avatarUrl} size={AvatarSize.Default} />
+                            </div>
+                            <div class="details">
+                                <div class="name">{target.name}</div>
+                                <div class="description">{target.description}</div>
+                            </div>
+                        </div>
+                    {/each}
+                </CollapsibleCard>
+            {/if}
+            {#if targets.favourites.length > 0}
+                <CollapsibleCard
+                    transition={false}
+                    open={searchTerm !== ""}
+                    headerText={i18nKey("communities.favourites")}>
+                    {#snippet titleSlot()}
+                        <div class="card-header">
+                            <div class="avatar">
+                                <HeartOutline size={$iconSize} color={"var(--icon-txt)"} />
+                            </div>
+                            <div class="details">
+                                <h4 class="title">
+                                    <Translatable resourceKey={i18nKey("communities.favourites")} />
+                                </h4>
+                            </div>
+                        </div>
+                    {/snippet}
+                    {#each targets.favourites as target}
+                        <div
+                            role="button"
+                            tabindex="0"
+                            class="row"
+                            class:rtl={$rtlStore}
+                            onclick={() => onSelect(target.id)}>
+                            <div class="avatar">
+                                <Avatar url={target.avatarUrl} size={AvatarSize.Default} />
+                            </div>
+                            <div class="details">
+                                <div class="name">{target.name}</div>
+                                <div class="description">{target.description}</div>
+                            </div>
+                        </div>
+                    {/each}
+                </CollapsibleCard>
+            {/if}
+            {#each targets.communities as community}
+                {#if community.channels.length > 0}
+                    <CollapsibleCard
+                        transition={false}
+                        open={searchTerm !== ""}
+                        headerText={i18nKey(community.name)}>
+                        {#snippet titleSlot()}
+                            <div class="card-header">
+                                <div class="avatar">
+                                    <Avatar url={community.avatarUrl} size={AvatarSize.Default} />
+                                </div>
+                                <div class="details">
+                                    <h4 class="title">
+                                        {community.name}
+                                    </h4>
+                                </div>
+                            </div>
+                        {/snippet}
+                        {#each community.channels as target}
+                            <div
+                                role="button"
+                                tabindex="0"
+                                class="row"
+                                class:rtl={$rtlStore}
+                                onclick={() => onSelect(target.id)}>
+                                <div class="avatar">
+                                    <Avatar url={target.avatarUrl} size={AvatarSize.Default} />
+                                </div>
+                                <div class="details">
+                                    <div class="name">{target.name}</div>
+                                    <div class="description">{target.description}</div>
+                                </div>
+                            </div>
+                        {/each}
+                    </CollapsibleCard>
+                {/if}
+            {/each}
+        </div>
+    {/if}
+</section>
+
+<style lang="scss">
+    :global(.selectable-chats .body) {
+        padding: 0;
+    }
+
+    :global(.selectable-chats .header) {
+        padding: $sp3;
+    }
+
+    h4 {
+        flex: 1;
+        margin: 0;
+        margin-top: 2px;
+    }
+
+    section {
+        background: var(--panel-right-modal);
+        height: calc(var(--vh, 1vh) * 100);
+        position: relative;
+        width: 500px;
+        overflow: auto;
+        overflow-x: hidden;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+
+        @include mobile() {
+            width: 100%;
+        }
+    }
+
+    .no-chats {
+        margin: $sp3;
+        padding: $sp3 $sp4;
+        background-color: var(--chatSummary-bg);
+        @include font(bold, normal, fs-100);
+        color: var(--error);
+    }
+
+    .close {
+        flex: 0 0 30px;
+    }
+
+    .selectable-chats {
+        overflow: auto;
+        @include nice-scrollbar();
+        @include mobile() {
+            width: 100%;
+        }
+    }
+
+    .card-header {
+        position: relative;
+        display: flex;
+        align-items: center;
+        width: calc(100% - 24px);
+        gap: toRem(12);
+
+        .avatar {
+            flex: 0 0 48px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 48px;
+            border-radius: 50%;
+            background-color: var(--chatSummary-bg-selected);
+
+            @include mobile() {
+                flex: 0 0 42px;
+                height: 42px;
+            }
+        }
+    }
+
+    .row {
+        position: relative;
+        display: flex;
+        gap: toRem(12);
+        justify-content: space-between;
+        align-items: center;
+        background-color: var(--chatSummary-bg);
+        cursor: pointer;
+        padding: $sp3;
+
+        @media (hover: hover) {
+            &:hover {
+                background-color: var(--chatSummary-hv);
+            }
+        }
+    }
+
+    .details {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        overflow: hidden;
+        .name {
+            @include font(book, normal, fs-100);
+
+            display: flex;
+            align-items: center;
+            gap: $sp2;
+
+            .username {
+                color: var(--txt-light);
+            }
+        }
+        .description {
+            @include ellipsis();
+            @include font(book, normal, fs-80);
+            color: var(--txt-light);
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/shell/SuspendedModal.svelte b/frontend/app/src/desktop/shell/SuspendedModal.svelte
new file mode 100644
index 0000000000..99c9c2f1d8
--- /dev/null
+++ b/frontend/app/src/desktop/shell/SuspendedModal.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+    import { currentUserStore } from "@client";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import ModalContent from "@src/ui/ModalContent.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    interface Props {
+        onClose: () => void;
+    }
+
+    let { onClose }: Props = $props();
+
+    function buildNoticeText(): string {
+        const suspensionDetails = $currentUserStore.suspensionDetails!;
+        const actionDate = new Date(Number(suspensionDetails.action.timestamp));
+        const actionText =
+            suspensionDetails.action.kind === "delete_action" ? "deleted" : "unsuspended";
+
+        return `Your account has been suspended.
+
+Reason:
+"${suspensionDetails.reason}"
+
+You can appeal this suspension by sending a direct message to the @OpenChat Twitter account otherwise your account will be ${actionText} on ${actionDate.toLocaleString()}.`;
+    }
+</script>
+
+<ModalContent {onClose}>
+    {#snippet header()}
+        <Translatable resourceKey={i18nKey("accountSuspended")} />
+    {/snippet}
+    {#snippet body()}
+        <Markdown text={buildNoticeText()} />
+    {/snippet}
+</ModalContent>
diff --git a/frontend/app/src/desktop/shell/Toast.svelte b/frontend/app/src/desktop/shell/Toast.svelte
new file mode 100644
index 0000000000..f74ddfd32b
--- /dev/null
+++ b/frontend/app/src/desktop/shell/Toast.svelte
@@ -0,0 +1,138 @@
+<script lang="ts">
+    import {
+        type ChatIdentifier,
+        iconSize,
+        localUpdates,
+        routeForChatIdentifier,
+        subscribe,
+    } from "@client";
+    import { navigate } from "@src/utils/navigation";
+    import { onMount } from "svelte";
+    import { _ } from "svelte-i18n";
+    import Bug from "svelte-material-icons/Bug.svelte";
+    import Close from "svelte-material-icons/Close.svelte";
+    import { sineIn } from "svelte/easing";
+    import { fly } from "svelte/transition";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import Tooltip from "@src/desktop/ui/tooltip/Tooltip.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    let reactiveResourceKey = $derived($toastStore?.resourceKey);
+
+    function report() {
+        if (
+            $toastStore &&
+            $toastStore.kind === "failure" &&
+            $toastStore.err !== undefined &&
+            $reactiveResourceKey !== undefined
+        ) {
+            const msg = interpolate($_, $reactiveResourceKey);
+            const withDetail = `${msg} (${$toastStore.err})`;
+            const chatId = {
+                kind: "channel",
+                communityId: "dgegb-daaaa-aaaar-arlhq-cai",
+                channelId: 2235218862,
+            } as ChatIdentifier;
+            navigate(routeForChatIdentifier("community", chatId));
+            localUpdates.draftMessages.setTextContent({ chatId }, withDetail);
+            toastStore.hideToast();
+        }
+    }
+
+    onMount(() => {
+        const unsubs = [
+            subscribe("showFailureToast", ({ resourceKey, err }) =>
+                toastStore.showFailureToast(resourceKey, err),
+            ),
+            subscribe("showSuccessToast", (resourceKey) =>
+                toastStore.showSuccessToast(resourceKey),
+            ),
+        ];
+        return () => {
+            unsubs.forEach((u) => u());
+        };
+    });
+</script>
+
+{#if $toastStore && $reactiveResourceKey}
+    <div class="toast" transition:fly={{ y: 200, duration: 200, easing: sineIn }}>
+        <div
+            class="message"
+            class:failure={$toastStore.kind === "failure"}
+            class:success={$toastStore.kind === "success"}>
+            <div class="text"><Translatable resourceKey={$reactiveResourceKey} /></div>
+            {#if $toastStore.kind === "failure"}
+                {#if $toastStore.err !== undefined}
+                    <Tooltip position="top" align="middle">
+                        <div class="report" onclick={report}>
+                            <Bug size={$iconSize} color={"var(--button-txt)"} />
+                        </div>
+                        {#snippet popupTemplate()}
+                            <Translatable resourceKey={i18nKey("reportBug")} />
+                        {/snippet}
+                    </Tooltip>
+                {/if}
+                <div class="close" onclick={toastStore.hideToast}>
+                    <Close size={$iconSize} color={"var(--button-txt)"} />
+                </div>
+            {/if}
+        </div>
+    </div>
+{/if}
+
+<style lang="scss">
+    .toast {
+        position: fixed;
+        bottom: $sp7;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        @include z-index("toast");
+    }
+
+    .message {
+        transition: background 200ms ease-in-out;
+        background: var(--button-bg);
+        padding: $sp4;
+        width: 75%;
+        max-width: 800px;
+        margin: 0 $sp4;
+        display: flex;
+        gap: $sp4;
+        justify-content: center;
+        align-items: center;
+        color: var(--button-txt);
+        @include mobile() {
+            width: 100%;
+        }
+
+        @media (hover: hover) {
+            &:hover {
+                background: var(--button-hv);
+            }
+        }
+
+        &.failure {
+            background: var(--toast-failure-bg);
+            color: var(--toast-failure-txt);
+        }
+
+        .text {
+            text-align: center;
+            flex: auto;
+        }
+
+        &.success {
+            background: var(--toast-success-bg);
+            color: var(--toast-success-txt);
+        }
+
+        .close,
+        .report {
+            flex: 0 0 30px;
+            cursor: pointer;
+        }
+    }
+</style>
diff --git a/frontend/app/src/desktop/shell/UpgradeBanner.svelte b/frontend/app/src/desktop/shell/UpgradeBanner.svelte
new file mode 100644
index 0000000000..384c45bace
--- /dev/null
+++ b/frontend/app/src/desktop/shell/UpgradeBanner.svelte
@@ -0,0 +1,115 @@
+<script lang="ts">
+    import { OpenChat, Poller, Version } from "@client";
+    import { getContext, onDestroy } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { activeVideoCall } from "@src/stores/video";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    const VERSION_INTERVAL = 60 * 1000;
+    const client = getContext<OpenChat>("client");
+
+    let poller = new Poller(checkVersion, VERSION_INTERVAL);
+    // @ts-ignore
+    let clientVersion = Version.parse(window.OC_WEBSITE_VERSION);
+    let serverVersion = $state(clientVersion);
+    let countdown = $state(30);
+    let showBanner = $state(false);
+    let errorCount = 0;
+
+    onDestroy(() => poller.stop());
+
+    function checkVersion(): Promise<void> {
+        if (import.meta.env.OC_NODE_ENV !== "production" || $activeVideoCall !== undefined)
+            return Promise.resolve();
+        return getServerVersion().then((sv) => {
+            serverVersion = sv;
+            if (serverVersion.isGreaterThan(clientVersion)) {
+                poller.stop();
+                countdown = 30;
+                showBanner = true;
+                const interval = window.setInterval(() => {
+                    countdown = countdown - 1;
+                    if (countdown === 0) {
+                        window.clearInterval(interval);
+                        window.location.reload();
+                    }
+                }, 1000);
+            }
+        });
+    }
+
+    function getServerVersion(): Promise<Version> {
+        return fetch("/version", {
+            method: "get",
+            headers: {
+                "Content-Type": "application/json",
+            },
+        })
+            .then((res) => res.json())
+            .then((res) => {
+                client.logMessage("Server version: ", res);
+                errorCount = 0;
+                return Version.parse(res.version);
+            })
+            .catch((err) => {
+                errorCount += 1;
+                client.logError(`Unable to load server version ${errorCount} times`, err);
+                return clientVersion;
+            });
+    }
+
+    function reload(ev: Event) {
+        window.location.reload();
+        ev.preventDefault();
+    }
+</script>
+
+{#if showBanner}
+    <div class="upgrade-banner">
+        <div class="inner">
+            <span class="message"
+                ><Translatable resourceKey={i18nKey("updateRequired", { countdown })} /></span>
+            <span class="update-now">
+                <a href="/" onclick={reload}><Translatable resourceKey={i18nKey("updateNow")} /></a>
+            </span>
+        </div>
+        <div class="versions">
+            {clientVersion.toText()} -> {serverVersion.toText()}
+        </div>
+    </div>
+{/if}
+
+<style lang="scss">
+    .upgrade-banner {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        @include z-index("upgrade-banner");
+        background-color: var(--notificationBar-bg);
+        color: var(--notificationBar-txt);
+        padding: $sp3;
+        text-align: center;
+        @include box-shadow(2);
+    }
+
+    .inner {
+        max-width: 1200px;
+        margin: 0 auto;
+    }
+
+    .update-now {
+        margin-left: $sp4;
+    }
+
+    a {
+        text-decoration: underline;
+        text-underline-offset: $sp1;
+        cursor: pointer;
+        color: inherit;
+    }
+
+    .versions {
+        @include font(light, normal, fs-70);
+    }
+</style>
diff --git a/frontend/app/src/components/icons/Bitcoin.svelte b/frontend/app/src/desktop/ui/icons/Bitcoin.svelte
similarity index 100%
rename from frontend/app/src/components/icons/Bitcoin.svelte
rename to frontend/app/src/desktop/ui/icons/Bitcoin.svelte
diff --git a/frontend/app/src/components/icons/BlueDiamond.svelte b/frontend/app/src/desktop/ui/icons/BlueDiamond.svelte
similarity index 100%
rename from frontend/app/src/components/icons/BlueDiamond.svelte
rename to frontend/app/src/desktop/ui/icons/BlueDiamond.svelte
diff --git a/frontend/app/src/components/icons/ChooseImage.svelte b/frontend/app/src/desktop/ui/icons/ChooseImage.svelte
similarity index 100%
rename from frontend/app/src/components/icons/ChooseImage.svelte
rename to frontend/app/src/desktop/ui/icons/ChooseImage.svelte
diff --git a/frontend/app/src/components/icons/ConvertToCommunity.svelte b/frontend/app/src/desktop/ui/icons/ConvertToCommunity.svelte
similarity index 100%
rename from frontend/app/src/components/icons/ConvertToCommunity.svelte
rename to frontend/app/src/desktop/ui/icons/ConvertToCommunity.svelte
diff --git a/frontend/app/src/desktop/ui/icons/Diamond.svelte b/frontend/app/src/desktop/ui/icons/Diamond.svelte
new file mode 100644
index 0000000000..138bd46f89
--- /dev/null
+++ b/frontend/app/src/desktop/ui/icons/Diamond.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+    import type { DiamondMembershipStatus, ResourceKey } from "@client";
+    import Tooltip from "@src/desktop/ui/tooltip/Tooltip.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import DiamondBase from "./DiamondBase.svelte";
+    import { blueDiamondHue, deriveColours, goldDiamondHue } from "./diamond";
+
+    interface Props {
+        size?: string;
+        show?: "blue" | "gold" | undefined;
+        status?: DiamondMembershipStatus["kind"] | undefined;
+        y?: any;
+    }
+
+    let { size = "0.9em", show = undefined, status = undefined, y = -40 }: Props = $props();
+
+    function getStatusName(
+        status: DiamondMembershipStatus["kind"] | undefined,
+    ): ResourceKey | undefined {
+        if (status === undefined) return undefined;
+
+        switch (status) {
+            case "lifetime":
+                return i18nKey("upgrade.lifetime");
+            case "active":
+                return i18nKey("upgrade.diamond");
+            default:
+                return i18nKey(status);
+        }
+    }
+    let colour = $derived(
+        status === "lifetime" || show === "gold" ? goldDiamondHue : blueDiamondHue,
+    );
+    let colours = $derived(deriveColours(colour));
+    let statusName = $derived(getStatusName(status));
+</script>
+
+{#if status !== "inactive" || show}
+    <Tooltip uppercase position="top" align="middle">
+        <DiamondBase {size} dark={colours.dark} medium={colours.medium} light={colours.light} {y} />
+        {#snippet popupTemplate()}
+            {#if statusName !== undefined}
+                <Translatable resourceKey={statusName} />
+            {/if}
+        {/snippet}
+    </Tooltip>
+{/if}
diff --git a/frontend/app/src/components/icons/DiamondBase.svelte b/frontend/app/src/desktop/ui/icons/DiamondBase.svelte
similarity index 100%
rename from frontend/app/src/components/icons/DiamondBase.svelte
rename to frontend/app/src/desktop/ui/icons/DiamondBase.svelte
diff --git a/frontend/app/src/components/icons/EqualDistribution.svelte b/frontend/app/src/desktop/ui/icons/EqualDistribution.svelte
similarity index 100%
rename from frontend/app/src/components/icons/EqualDistribution.svelte
rename to frontend/app/src/desktop/ui/icons/EqualDistribution.svelte
diff --git a/frontend/app/src/components/icons/FancyLoader.svelte b/frontend/app/src/desktop/ui/icons/FancyLoader.svelte
similarity index 100%
rename from frontend/app/src/components/icons/FancyLoader.svelte
rename to frontend/app/src/desktop/ui/icons/FancyLoader.svelte
diff --git a/frontend/app/src/components/icons/GoldDiamond.svelte b/frontend/app/src/desktop/ui/icons/GoldDiamond.svelte
similarity index 100%
rename from frontend/app/src/components/icons/GoldDiamond.svelte
rename to frontend/app/src/desktop/ui/icons/GoldDiamond.svelte
diff --git a/frontend/app/src/components/icons/HeartMinus.svelte b/frontend/app/src/desktop/ui/icons/HeartMinus.svelte
similarity index 100%
rename from frontend/app/src/components/icons/HeartMinus.svelte
rename to frontend/app/src/desktop/ui/icons/HeartMinus.svelte
diff --git a/frontend/app/src/components/icons/HeartPlus.svelte b/frontend/app/src/desktop/ui/icons/HeartPlus.svelte
similarity index 100%
rename from frontend/app/src/components/icons/HeartPlus.svelte
rename to frontend/app/src/desktop/ui/icons/HeartPlus.svelte
diff --git a/frontend/app/src/components/icons/MemeFighter.svelte b/frontend/app/src/desktop/ui/icons/MemeFighter.svelte
similarity index 100%
rename from frontend/app/src/components/icons/MemeFighter.svelte
rename to frontend/app/src/desktop/ui/icons/MemeFighter.svelte
diff --git a/frontend/app/src/components/icons/RandomDistribution.svelte b/frontend/app/src/desktop/ui/icons/RandomDistribution.svelte
similarity index 100%
rename from frontend/app/src/components/icons/RandomDistribution.svelte
rename to frontend/app/src/desktop/ui/icons/RandomDistribution.svelte
diff --git a/frontend/app/src/components/icons/Spinner.svelte b/frontend/app/src/desktop/ui/icons/Spinner.svelte
similarity index 100%
rename from frontend/app/src/components/icons/Spinner.svelte
rename to frontend/app/src/desktop/ui/icons/Spinner.svelte
diff --git a/frontend/app/src/components/icons/SpinningToken.svelte b/frontend/app/src/desktop/ui/icons/SpinningToken.svelte
similarity index 100%
rename from frontend/app/src/components/icons/SpinningToken.svelte
rename to frontend/app/src/desktop/ui/icons/SpinningToken.svelte
diff --git a/frontend/app/src/desktop/ui/icons/Verified.svelte b/frontend/app/src/desktop/ui/icons/Verified.svelte
new file mode 100644
index 0000000000..61b0a4f33c
--- /dev/null
+++ b/frontend/app/src/desktop/ui/icons/Verified.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+    import type { ResourceKey } from "@client";
+    import Tooltip from "@src/desktop/ui/tooltip/Tooltip.svelte";
+    import Translatable from "@src/ui/Translatable.svelte";
+
+    interface Props {
+        verified: boolean;
+        size: "small" | "default" | "large";
+        tooltip?: ResourceKey;
+    }
+
+    let { size, tooltip }: Props = $props();
+
+    // Verified user (DecideAI) concept is suspended - never render the badge.
+    const verified = false;
+</script>
+
+{#if verified}
+    {#if tooltip !== undefined}
+        <Tooltip uppercase position="top" align="middle">
+            <div class={`verified ${size}`}></div>
+            {#snippet popupTemplate()}
+                <Translatable resourceKey={tooltip} />
+            {/snippet}
+        </Tooltip>
+    {:else}
+        <div class={`verified ${size}`}></div>
+    {/if}
+{/if}
+
+<style lang="scss">
+    .verified {
+        $size: $avatar-mod;
+        width: $size;
+        height: $size;
+        background-image: url("/assets/verified.svg");
+        background-size: cover;
+        background-repeat: no-repeat;
+
+        @include mobile() {
+            $size: $avatar-mod-small;
+            width: $size;
+            height: $size;
+        }
+
+        &.small {
+            width: toRem(16);
+            height: toRem(16);
+        }
+
+        &.large {
+            width: toRem(26);
+            height: toRem(26);
+        }
+    }
+</style>
diff --git a/frontend/app/src/components/icons/WithVerifiedBadge.svelte b/frontend/app/src/desktop/ui/icons/WithVerifiedBadge.svelte
similarity index 100%
rename from frontend/app/src/components/icons/WithVerifiedBadge.svelte
rename to frontend/app/src/desktop/ui/icons/WithVerifiedBadge.svelte
diff --git a/frontend/app/src/components/icons/diamond.ts b/frontend/app/src/desktop/ui/icons/diamond.ts
similarity index 100%
rename from frontend/app/src/components/icons/diamond.ts
rename to frontend/app/src/desktop/ui/icons/diamond.ts
diff --git a/frontend/app/src/components/portal/MenuWrapper.svelte b/frontend/app/src/desktop/ui/portal/MenuWrapper.svelte
similarity index 100%
rename from frontend/app/src/components/portal/MenuWrapper.svelte
rename to frontend/app/src/desktop/ui/portal/MenuWrapper.svelte
diff --git a/frontend/app/src/components/portal/OverlayWrapper.svelte b/frontend/app/src/desktop/ui/portal/OverlayWrapper.svelte
similarity index 100%
rename from frontend/app/src/components/portal/OverlayWrapper.svelte
rename to frontend/app/src/desktop/ui/portal/OverlayWrapper.svelte
diff --git a/frontend/app/src/components/portal/TooltipPopup.svelte b/frontend/app/src/desktop/ui/portal/TooltipPopup.svelte
similarity index 99%
rename from frontend/app/src/components/portal/TooltipPopup.svelte
rename to frontend/app/src/desktop/ui/portal/TooltipPopup.svelte
index 778a6a82fb..d5ff887641 100644
--- a/frontend/app/src/components/portal/TooltipPopup.svelte
+++ b/frontend/app/src/desktop/ui/portal/TooltipPopup.svelte
@@ -9,7 +9,7 @@
     import { mobileWidth } from "@client";
     import { onMount, type Snippet } from "svelte";
     import { fade } from "svelte/transition";
-    import { rtlStore } from "../../stores/rtl";
+    import { rtlStore } from "@src/stores/rtl";
 
     interface Props {
         children?: Snippet;
diff --git a/frontend/app/src/components/Hoverable.svelte b/frontend/app/src/desktop/ui/tooltip/Hoverable.svelte
similarity index 98%
rename from frontend/app/src/components/Hoverable.svelte
rename to frontend/app/src/desktop/ui/tooltip/Hoverable.svelte
index 612eba7401..7e846fac4c 100644
--- a/frontend/app/src/components/Hoverable.svelte
+++ b/frontend/app/src/desktop/ui/tooltip/Hoverable.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from "svelte";
-    import { isTouchDevice } from "../utils/devices";
+    import { isTouchDevice } from "@src/utils/devices";
 
     const HOVER_DELAY = 250;
     const LONGPRESS_DELAY = 500;
diff --git a/frontend/app/src/components/tooltip/Tooltip.svelte b/frontend/app/src/desktop/ui/tooltip/Tooltip.svelte
similarity index 93%
rename from frontend/app/src/components/tooltip/Tooltip.svelte
rename to frontend/app/src/desktop/ui/tooltip/Tooltip.svelte
index ccdad4bc2d..2f8d70e823 100644
--- a/frontend/app/src/components/tooltip/Tooltip.svelte
+++ b/frontend/app/src/desktop/ui/tooltip/Tooltip.svelte
@@ -3,8 +3,8 @@
     import type { Alignment, Position } from "component-lib";
     import { portalState } from "component-lib";
     import { getAllContexts, mount, onDestroy, type Snippet } from "svelte";
-    import Hoverable from "../Hoverable.svelte";
-    import TooltipPopup from "../portal/TooltipPopup.svelte";
+    import Hoverable from "./Hoverable.svelte";
+    import TooltipPopup from "@src/desktop/ui/portal/TooltipPopup.svelte";
 
     interface Props {
         enable?: boolean;
diff --git a/frontend/app/src/main.ts b/frontend/app/src/main.ts
index 136b4e97f0..e2266cffbc 100644
--- a/frontend/app/src/main.ts
+++ b/frontend/app/src/main.ts
@@ -11,16 +11,16 @@ import "./web-components/spoiler";
 import { mobileWidth } from "@client";
 import "svelte";
 import { mount } from "svelte";
-import App from "./components/App.svelte";
-import AppV2 from "./components_mobile/App.svelte";
+import App from "@src/desktop/shell/App.svelte";
+import AppV2 from "@src/mobile/shell/App.svelte";
 import { setNativeTheme, writeNativeCssVariables } from "./theme/themes";
 
 // Picks the app variant once at startup. The native Android build ships
 // OC_MOBILE_LAYOUT=v2, so phones (viewport < 768px) always mount AppV2
-// (components_mobile). AppV2 is where the native cold-start machinery lives —
+// (src/mobile). AppV2 is where the native cold-start machinery lives —
 // reliable notification-tap routing, pending deep-link/tap consumption in
 // Router.svelte, and the listeners-before-svelteReady sequencing. The v1 App
-// (components) only renders on >=768px viewports (desktop web, large tablets)
+// (src/desktop) only renders on >=768px viewports (desktop web, large tablets)
 // and intentionally does not implement that native cold-start routing.
 const v2 = import.meta.env.OC_MOBILE_LAYOUT === "v2" && mobileWidth.value;
 
diff --git a/frontend/app/src/components_mobile/home/access_gates/AboutAccessGate.svelte b/frontend/app/src/mobile/features/access/AboutAccessGate.svelte
similarity index 93%
rename from frontend/app/src/components_mobile/home/access_gates/AboutAccessGate.svelte
rename to frontend/app/src/mobile/features/access/AboutAccessGate.svelte
index 5ed86de0cf..92f156edae 100644
--- a/frontend/app/src/components_mobile/home/access_gates/AboutAccessGate.svelte
+++ b/frontend/app/src/mobile/features/access/AboutAccessGate.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { i18nKey } from "@src/i18n/i18n";
     import { Body, BodySmall, Container, type Padding } from "component-lib";
-    import Translatable from "../../Translatable.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
 
     interface Props {
         icon: string;
diff --git a/frontend/app/src/components_mobile/home/access_gates/AboutAccessGates.svelte b/frontend/app/src/mobile/features/access/AboutAccessGates.svelte
similarity index 96%
rename from frontend/app/src/components_mobile/home/access_gates/AboutAccessGates.svelte
rename to frontend/app/src/mobile/features/access/AboutAccessGates.svelte
index a00338540a..bb3ba58b68 100644
--- a/frontend/app/src/components_mobile/home/access_gates/AboutAccessGates.svelte
+++ b/frontend/app/src/mobile/features/access/AboutAccessGates.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { i18nKey } from "@src/i18n/i18n";
     import { Container } from "component-lib";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
     import AboutAccessGate from "./AboutAccessGate.svelte";
     import AboutBalanceGate from "./AboutBalanceGate.svelte";
     import AboutChitGate from "./AboutChitGate.svelte";
diff --git a/frontend/app/src/components_mobile/home/access_gates/AboutBalanceGate.svelte b/frontend/app/src/mobile/features/access/AboutBalanceGate.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/access_gates/AboutBalanceGate.svelte
rename to frontend/app/src/mobile/features/access/AboutBalanceGate.svelte
diff --git a/frontend/app/src/components_mobile/home/access_gates/AboutChitGate.svelte b/frontend/app/src/mobile/features/access/AboutChitGate.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/access_gates/AboutChitGate.svelte
rename to frontend/app/src/mobile/features/access/AboutChitGate.svelte
diff --git a/frontend/app/src/components_mobile/home/access_gates/AboutNeuronGate.svelte b/frontend/app/src/mobile/features/access/AboutNeuronGate.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/access_gates/AboutNeuronGate.svelte
rename to frontend/app/src/mobile/features/access/AboutNeuronGate.svelte
diff --git a/frontend/app/src/components_mobile/home/access_gates/AboutPaymentGate.svelte b/frontend/app/src/mobile/features/access/AboutPaymentGate.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/access_gates/AboutPaymentGate.svelte
rename to frontend/app/src/mobile/features/access/AboutPaymentGate.svelte
diff --git a/frontend/app/src/components_mobile/home/access/AccessGateBox.svelte b/frontend/app/src/mobile/features/access/AccessGateBox.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/access/AccessGateBox.svelte
rename to frontend/app/src/mobile/features/access/AccessGateBox.svelte
diff --git a/frontend/app/src/mobile/features/access/AccessGateCheckFailed.svelte b/frontend/app/src/mobile/features/access/AccessGateCheckFailed.svelte
new file mode 100644
index 0000000000..65df649b49
--- /dev/null
+++ b/frontend/app/src/mobile/features/access/AccessGateCheckFailed.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+    import { ColourVars, Column, CommonButton, Row, StatusCard } from "component-lib";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    interface Props {
+        onClose: () => void;
+    }
+
+    let { onClose }: Props = $props();
+
+    /**
+     * TODO - ideally we would tell them which access gate was failed. And the response from the back end *does*
+     * tell us the gate check fail reason, but it seems to be giving us the wrong reason at the moment. e.g.
+     * When I select a token balance gate from an "any" composite gate, it reports back that it failed because
+     * I'm not diamond.
+     */
+</script>
+
+<Column gap={"xl"} padding={"xl"}>
+    <StatusCard
+        mode={"warning"}
+        background={ColourVars.background2}
+        title={"Access gate check failed"}>
+        {#snippet body()}
+            <Translatable
+                resourceKey={i18nKey(
+                    "We have been unable to verify that you meet the required access gates to join this chat. Please double check and try again.",
+                )} />
+        {/snippet}
+    </StatusCard>
+
+    <Row mainAxisAlignment={"end"}>
+        <CommonButton width={"hug"} mode={"active"} onClick={onClose} size={"small_text"}>
+            <Translatable resourceKey={i18nKey("close")} />
+        </CommonButton>
+    </Row>
+</Column>
diff --git a/frontend/app/src/components_mobile/home/access_gates/AccessGateChip.svelte b/frontend/app/src/mobile/features/access/AccessGateChip.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/access_gates/AccessGateChip.svelte
rename to frontend/app/src/mobile/features/access/AccessGateChip.svelte
diff --git a/frontend/app/src/mobile/features/access/AccessGateEvaluator.svelte b/frontend/app/src/mobile/features/access/AccessGateEvaluator.svelte
new file mode 100644
index 0000000000..331f2ca6df
--- /dev/null
+++ b/frontend/app/src/mobile/features/access/AccessGateEvaluator.svelte
@@ -0,0 +1,344 @@
+<script lang="ts">
+    import {
+        cryptoBalanceStore,
+        currentUserStore,
+        isBalanceGate,
+        isCompositeGate,
+        isDiamondGate,
+        isLeafGate,
+        isLifetimeDiamondGate,
+        isNeuronGate,
+        isPaymentGate,
+        isUniquePersonGate,
+        publish,
+        type EnhancedAccessGate,
+        type EnhancedLeafGate,
+        type LeafGate,
+        type TokenBalanceGate,
+    } from "@client";
+    import { i18nKey } from "@src/i18n/i18n";
+
+    import MulticolourText from "@src/mobile/shared/MulticolourText.svelte";
+    import { accessApprovalState } from "@src/utils/preview.svelte";
+    import {
+        Body,
+        BodySmall,
+        Button,
+        ColourVars,
+        Column,
+        CommonButton,
+        H2,
+        Row,
+        transition,
+    } from "component-lib";
+    import { onMount } from "svelte";
+    import ShieldStar from "svelte-material-icons/ShieldStarOutline.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
+    import AccessGateExpiry from "./AccessGateExpiry.svelte";
+    import AccessGateSummary from "./AccessGateSummary.svelte";
+    import BalanceGateEvaluator from "./BalanceGateEvaluator.svelte";
+    import DiamondGateEvaluator from "./DiamondGateEvaluator.svelte";
+    import NeuronGateEvaluator from "./NeuronGateEvaluator.svelte";
+    import PaymentGateEvaluator from "./PaymentGateEvaluator.svelte";
+    import UniqueHumanGateEvaluator from "./UniqueHumanGateEvaluator.svelte";
+
+    type SatisfiedLeafGate = EnhancedLeafGate & {
+        satisfied: boolean;
+        satisfiable: boolean;
+        originalIndex: number;
+    };
+
+    interface Props {
+        gate: EnhancedAccessGate;
+        onClose: () => void;
+        onComplete: () => void;
+    }
+
+    let { gate, onClose, onComplete }: Props = $props();
+
+    onMount(() => {
+        return cryptoBalanceStore.subscribe((_) => {
+            refreshBalanceGates();
+        });
+    });
+
+    let flattenedGates = $state<SatisfiedLeafGate[]>(normaliseGates(gate));
+
+    let sortedGates = $derived(flattenedGates.toSorted(orderBySatisfied));
+
+    function orderBySatisfied(a: SatisfiedLeafGate, b: SatisfiedLeafGate): number {
+        if (a.satisfied && b.satisfied) return 0;
+        return a.satisfied ? -1 : 1;
+    }
+
+    let currentGateIndex = $state(-1);
+    let satisfiedGates = $derived(sortedGates.filter((g) => g.satisfied).length);
+    let compositeOr = $derived(isCompositeGate(gate) && gate.operator === "or");
+    let complete = $derived(
+        compositeOr ? satisfiedGates >= 1 : satisfiedGates === sortedGates.length,
+    );
+    let evaluatingGate = $derived<SatisfiedLeafGate>(sortedGates[currentGateIndex]);
+
+    function normaliseGates(gate: EnhancedAccessGate): SatisfiedLeafGate[] {
+        if (isCompositeGate(gate)) {
+            // Keep originalIndex before filtering so compositeGateIndex still maps to the real gate.
+            // Unique person (DecideAI) verification is suspended - hide it from the join flow.
+            return gate.gates
+                .map((l, i) => ({
+                    ...l,
+                    level: gate.level,
+                    collectionName: gate.collectionName,
+                    expiry: gate.expiry,
+                    satisfied: doesUserMeetLeafGate(l),
+                    satisfiable: false,
+                    originalIndex: i,
+                }))
+                .filter((g) => !isUniquePersonGate(g));
+        }
+        if (isLeafGate(gate)) {
+            if (isUniquePersonGate(gate)) return [];
+            return [
+                {
+                    ...gate,
+                    satisfied: doesUserMeetLeafGate(gate),
+                    satisfiable: false,
+                    originalIndex: 0,
+                },
+            ];
+        }
+        return [];
+    }
+
+    function doesUserMeetLeafGate(gate: LeafGate): boolean {
+        if (gate.kind === "diamond_gate") {
+            return $currentUserStore.diamondStatus.kind !== "inactive";
+        } else if (gate.kind === "lifetime_diamond_gate") {
+            return $currentUserStore.diamondStatus.kind === "lifetime";
+        } else if (gate.kind === "unique_person_gate") {
+            return $currentUserStore.isUniquePerson;
+        } else if (gate.kind === "chit_earned_gate") {
+            return $currentUserStore.totalChitEarned >= gate.minEarned;
+        } else if (gate.kind === "token_balance_gate") {
+            return doesUserMeetBalanceGate(gate);
+        } else {
+            return false;
+        }
+    }
+
+    function doesUserMeetBalanceGate(gate: TokenBalanceGate): boolean {
+        const balance = $cryptoBalanceStore.get(gate.ledgerCanister) ?? 0n;
+        const liveBalance = accessApprovalState.balanceAfterCurrentCommitments(
+            gate.ledgerCanister,
+            balance,
+        );
+        return liveBalance >= gate.minBalance;
+    }
+
+    function selectGate(idx: number) {
+        transition(["fade"], () => {
+            currentGateIndex = idx;
+        });
+    }
+
+    function cancelGate() {
+        transition(["fade"], () => {
+            currentGateIndex = -1;
+        });
+    }
+
+    function refreshBalanceGates() {
+        flattenedGates = flattenedGates.map((g) => {
+            if (g.kind === "token_balance_gate") {
+                g.satisfied = doesUserMeetBalanceGate(g);
+            }
+            return g;
+        });
+    }
+
+    function confirmNeuronGate() {
+        if (evaluatingGate !== undefined) {
+            evaluatingGate.satisfied = true;
+            onBack();
+        }
+    }
+
+    function onApprovePayment({
+        ledger,
+        amount,
+        approvalFee,
+    }: {
+        ledger: string;
+        amount: bigint;
+        approvalFee: bigint;
+    }) {
+        // TODO problem is that topping up a token can cause gates to be spontaneously satisfied
+        // This is not accounted for an it's difficult to account for.
+        if (evaluatingGate !== undefined) {
+            accessApprovalState.addPaymentApproval({ ledger, amount, approvalFee });
+            evaluatingGate.satisfied = true;
+            refreshBalanceGates();
+            onBack();
+        }
+    }
+
+    function credentialReceived(cred: string) {
+        if (evaluatingGate !== undefined) {
+            evaluatingGate.satisfied = true;
+            accessApprovalState.addCredential(cred);
+            refreshBalanceGates();
+            onBack();
+        }
+    }
+
+    function onBack() {
+        if (evaluatingGate !== undefined) {
+            selectGate(-1);
+        } else {
+            publish("closeModalPage");
+        }
+    }
+
+    function handleComplete() {
+        if (compositeOr) {
+            // Use originalIndex so the backend still maps to the real gate after filtering.
+            const satisfied = flattenedGates.find((g) => g.satisfied);
+            if (satisfied !== undefined) {
+                accessApprovalState.setCompositeGateIndex(satisfied.originalIndex);
+            }
+        }
+        onComplete();
+    }
+</script>
+
+<SlidingPageContent
+    {onBack}
+    title={i18nKey("joinGroup", undefined, gate.level)}
+    subtitle={i18nKey(gate.collectionName)}>
+    <Column gap={"xl"} padding={"xl"}>
+        {#if evaluatingGate !== undefined}
+            {#if isUniquePersonGate(evaluatingGate)}
+                <UniqueHumanGateEvaluator
+                    onCredentialReceived={credentialReceived}
+                    {onClose}
+                    expiry={evaluatingGate.expiry}
+                    level={evaluatingGate.level} />
+            {:else if isPaymentGate(evaluatingGate)}
+                <PaymentGateEvaluator
+                    gate={evaluatingGate}
+                    level={evaluatingGate.level}
+                    {onApprovePayment}
+                    onClose={cancelGate} />
+            {:else if isNeuronGate(evaluatingGate)}
+                <NeuronGateEvaluator
+                    gate={evaluatingGate}
+                    onClose={cancelGate}
+                    onApprove={confirmNeuronGate} />
+            {:else if isBalanceGate(evaluatingGate)}
+                <BalanceGateEvaluator gate={evaluatingGate} onClose={cancelGate} />
+            {:else if isLifetimeDiamondGate(evaluatingGate)}
+                <DiamondGateEvaluator
+                    onCancel={cancelGate}
+                    lifetime
+                    onCredentialReceived={credentialReceived} />
+            {:else if isDiamondGate(evaluatingGate)}
+                <DiamondGateEvaluator
+                    onCancel={cancelGate}
+                    lifetime={false}
+                    onCredentialReceived={credentialReceived} />
+            {/if}
+        {:else}
+            <Column gap={"lg"}>
+                <ShieldStar size={"4.5rem"} color={ColourVars.primary} />
+                <H2 fontWeight={"bold"}>
+                    <MulticolourText
+                        parts={[
+                            {
+                                text: i18nKey("Join the "),
+                                colour: "textPrimary",
+                            },
+                            {
+                                text: i18nKey(gate.collectionName + " "),
+                                colour: "primary",
+                            },
+                            {
+                                text: i18nKey(gate.level),
+                                colour: "textPrimary",
+                            },
+                        ]} />
+                </H2>
+                <Row wrap>
+                    {#if isCompositeGate(gate)}
+                        {@const or = gate.operator === "or"}
+                        <Body width={"hug"}>
+                            {#if or}
+                                <MulticolourText
+                                    parts={[
+                                        {
+                                            text: i18nKey("To join you will need to satisfy "),
+                                            colour: "textSecondary",
+                                        },
+                                        {
+                                            text: i18nKey("at least one access gate."),
+                                            colour: "secondary",
+                                        },
+                                    ]} />
+                            {:else}
+                                <MulticolourText
+                                    parts={[
+                                        {
+                                            text: i18nKey("To join you will need to satisfy "),
+                                            colour: "textSecondary",
+                                        },
+                                        {
+                                            text: i18nKey("ALL access gates."),
+                                            colour: "warning",
+                                        },
+                                    ]} />
+                            {/if}
+                        </Body>
+                    {/if}
+                    <Body width={"hug"} colour={"textSecondary"}>
+                        <AccessGateExpiry expiry={gate.expiry} />
+                    </Body>
+                </Row>
+            </Column>
+            <Column gap={"md"}>
+                {#each sortedGates as subgate, i}
+                    <AccessGateSummary
+                        satisfied={subgate.satisfied}
+                        onClick={() => selectGate(i)}
+                        gate={subgate} />
+                {/each}
+            </Column>
+
+            {#if isCompositeGate(gate)}
+                <BodySmall align={"center"} fontWeight={"bold"}>
+                    <MulticolourText
+                        parts={[
+                            {
+                                text: i18nKey("You current satisfy "),
+                                colour: "textSecondary",
+                            },
+                            {
+                                text: i18nKey(`${satisfiedGates} out of ${sortedGates.length}`),
+                                colour: "primary",
+                            },
+                            {
+                                text: i18nKey(" gates."),
+                                colour: "textSecondary",
+                            },
+                        ]} />
+                </BodySmall>
+            {/if}
+            <Column crossAxisAlignment={"center"} gap={"md"}>
+                <Button disabled={!complete} onClick={handleComplete}>
+                    <Translatable resourceKey={i18nKey("Join")} />
+                </Button>
+                <CommonButton onClick={onClose} width={"hug"} mode={"active"} size={"small_text"}>
+                    <Translatable resourceKey={i18nKey("cancel")} />
+                </CommonButton>
+            </Column>
+        {/if}
+    </Column>
+</SlidingPageContent>
diff --git a/frontend/app/src/mobile/features/access/AccessGateExpiry.svelte b/frontend/app/src/mobile/features/access/AccessGateExpiry.svelte
new file mode 100644
index 0000000000..f261639d00
--- /dev/null
+++ b/frontend/app/src/mobile/features/access/AccessGateExpiry.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+    import { type OpenChat } from "@client";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import { getContext } from "svelte";
+    import { msToDays, msToHours, msToMinutes } from "@src/utils/time";
+
+    type DurationData = {
+        total: number;
+        days: number;
+        hours: number;
+        minutes: number;
+        seconds: number;
+    };
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        expiry: bigint | undefined;
+    }
+
+    let { expiry }: Props = $props();
+
+    function formatDuration(duration: DurationData | undefined): string | undefined {
+        if (duration === undefined) return undefined;
+
+        // TODO - pluralisation & i18n
+        if (duration.days > 0) {
+            return `${msToDays(duration.total)} days`;
+        }
+
+        if (duration.hours > 0) {
+            return `${msToHours(duration.total)} hours`;
+        }
+
+        // TODO - pluralisation & i18n
+        if (duration.minutes > 0) {
+            return `${msToMinutes(duration.total)} minutes`;
+        }
+    }
+    let duration = $derived(expiry ? client.durationFromMilliseconds(Number(expiry)) : undefined);
+    let durationString = $derived(formatDuration(duration));
+</script>
+
+{#if durationString !== undefined}
+    <Translatable
+        resourceKey={i18nKey("access.evaluationIntervalSummary", {
+            interval: durationString,
+        })} />
+{/if}
diff --git a/frontend/app/src/components_mobile/home/access_gates/AccessGateList.svelte b/frontend/app/src/mobile/features/access/AccessGateList.svelte
similarity index 95%
rename from frontend/app/src/components_mobile/home/access_gates/AccessGateList.svelte
rename to frontend/app/src/mobile/features/access/AccessGateList.svelte
index 5ecaec0a38..b873b2913a 100644
--- a/frontend/app/src/components_mobile/home/access_gates/AccessGateList.svelte
+++ b/frontend/app/src/mobile/features/access/AccessGateList.svelte
@@ -19,9 +19,9 @@
     import DotsVertical from "svelte-material-icons/DotsVertical.svelte";
     import Plus from "svelte-material-icons/Plus.svelte";
     import Edit from "svelte-material-icons/TextBoxEditOutline.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
-    import type { UpdateGroupOrCommunityState } from "../groupOrCommunity.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
+    import type { UpdateGroupOrCommunityState } from "@src/mobile/shared/groupOrCommunity.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/mobile/features/access/AccessGateSummary.svelte b/frontend/app/src/mobile/features/access/AccessGateSummary.svelte
new file mode 100644
index 0000000000..7ff70e40db
--- /dev/null
+++ b/frontend/app/src/mobile/features/access/AccessGateSummary.svelte
@@ -0,0 +1,250 @@
+<script lang="ts">
+    import { i18nKey } from "@src/i18n/i18n";
+    import { disableCryptoPaymentsFeature } from "@src/utils/features";
+    import { accessApprovalState } from "@src/utils/preview.svelte";
+    import {
+        Avatar,
+        Body,
+        BodySmall,
+        Caption,
+        ColourVars,
+        Column,
+        MenuItem,
+        MenuTrigger,
+        Row,
+    } from "component-lib";
+    import {
+        type CryptocurrencyDetails,
+        currentUserStore,
+        enhancedCryptoLookup,
+        type LeafGate,
+        type NeuronGate,
+        OpenChat,
+    } from "@client";
+    import { getContext } from "svelte";
+    import AccountCheck from "svelte-material-icons/AccountCheckOutline.svelte";
+    import Diamond from "svelte-material-icons/DiamondOutline.svelte";
+    import Lifetime from "svelte-material-icons/DiamondStone.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import AccessGateText from "./AccessGateText.svelte";
+    import { TokenState } from "@src/mobile/features/wallet/walletState.svelte";
+    import AccessGateBox from "./AccessGateBox.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        gate: LeafGate;
+        satisfied: boolean;
+        onClick: (g: LeafGate) => void;
+    }
+
+    const restrictedMsg = i18nKey(
+        "Unfortunately access gates of this type cannot be met from the native app",
+    );
+    let { gate, onClick, satisfied }: Props = $props();
+    let token = $derived(client.getTokenDetailsForAccessGate(gate));
+    let tokenState = $derived.by(() => {
+        switch (gate.kind) {
+            case "token_balance_gate":
+            case "payment_gate":
+                return new TokenState($enhancedCryptoLookup.get(gate.ledgerCanister)!, "usd");
+            default:
+                return undefined;
+        }
+    });
+
+    function neuronGateSubtext(gate: NeuronGate): string | undefined {
+        const dissolveDelayDays = client.getMinDissolveDelayDays(gate);
+        const minStake = client.getMinStakeInTokens(gate);
+        const parts: string[] = [];
+        if (dissolveDelayDays !== undefined) {
+            parts.push(`${dissolveDelayDays}d dissolve delay`);
+        }
+        if (minStake !== undefined) {
+            parts.push(`${minStake} token stake`);
+        }
+        return parts.join(" / ");
+    }
+</script>
+
+{#snippet booleanGate(restricted: boolean, Icon: any, title: string, subtitle?: string)}
+    <AccessGateBox {satisfied} satisfiable onClick={restricted ? undefined : () => onClick(gate)}>
+        <Row mainAxisAlignment={"center"} width={{ size: "2.5rem" }}>
+            <Icon color={ColourVars.warning} size={"1.5rem"} />
+        </Row>
+        <Column>
+            <Body fontWeight="bold" colour={"textPrimary"}>
+                <Translatable resourceKey={i18nKey(title)} />
+            </Body>
+            {#if subtitle !== undefined}
+                <Caption colour={restricted ? "error" : "textSecondary"}>
+                    {#if restricted}
+                        <Translatable resourceKey={restrictedMsg} />
+                    {:else}
+                        <Translatable resourceKey={i18nKey(subtitle)} />
+                    {/if}
+                </Caption>
+            {/if}
+        </Column>
+    </AccessGateBox>
+{/snippet}
+
+{#snippet neuronGate(gate: NeuronGate, token: CryptocurrencyDetails)}
+    {@const subtext = neuronGateSubtext(gate)}
+    <AccessGateBox {satisfied} satisfiable onClick={() => onClick(gate)}>
+        <Avatar url={token.logo} />
+
+        <Column width={"fill"}>
+            <Body fontWeight={"bold"} colour={"textPrimary"} width={"hug"}>{token.name}</Body>
+            {#if subtext !== undefined}
+                <Caption colour={"textSecondary"}>
+                    {subtext}
+                </Caption>
+            {/if}
+        </Column>
+    </AccessGateBox>
+{/snippet}
+
+{#snippet tokenGate(
+    logo: string,
+    symbol: string,
+    insufficient: boolean,
+    label: string,
+    required: string,
+    balance: string,
+    onClick?: () => void,
+    refresh?: () => void,
+)}
+    {#if disableCryptoPaymentsFeature}
+        <AccessGateBox {satisfied} satisfiable={false}>
+            <Avatar url={logo} />
+
+            <Column width={"fill"}>
+                <Row crossAxisAlignment={"center"} gap={"xs"}>
+                    <Body
+                        fontWeight={"bold"}
+                        colour={insufficient ? "textSecondary" : "primary"}
+                        width={"hug"}>{symbol}</Body>
+                    <Body
+                        fontWeight={"bold"}
+                        colour={insufficient ? "textSecondary" : "textPrimary"}
+                        width={"hug"}>{label}</Body>
+                </Row>
+                <Caption colour={insufficient ? "error" : "textSecondary"}>
+                    <Translatable resourceKey={restrictedMsg} />
+                </Caption>
+            </Column>
+        </AccessGateBox>
+    {:else}
+        <MenuTrigger maskUI align={"end"} position={"bottom"} fill mobileMode={"longpress"}>
+            {#snippet menuItems()}
+                <MenuItem onclick={refresh}>
+                    <Translatable resourceKey={i18nKey("Refresh balance")} />
+                </MenuItem>
+            {/snippet}
+            <AccessGateBox {satisfied} satisfiable={!insufficient} {onClick}>
+                <Avatar url={logo} />
+
+                <Column width={"fill"}>
+                    <Row crossAxisAlignment={"center"} gap={"xs"}>
+                        <Body
+                            fontWeight={"bold"}
+                            colour={insufficient ? "textSecondary" : "primary"}
+                            width={"hug"}>{symbol}</Body>
+                        <Body
+                            fontWeight={"bold"}
+                            colour={insufficient ? "textSecondary" : "textPrimary"}
+                            width={"hug"}>{label}</Body>
+                    </Row>
+                    <Caption colour={insufficient ? "error" : "textSecondary"}>
+                        {balance}
+                        {#if insufficient}
+                            {`/ Insufficient ${symbol}`}
+                        {/if}
+                    </Caption>
+                </Column>
+
+                <Row width={"hug"}>
+                    <BodySmall colour={"textSecondary"}>
+                        {required}
+                    </BodySmall>
+                </Row>
+            </AccessGateBox>
+        </MenuTrigger>
+    {/if}
+{/snippet}
+
+{#if gate.kind !== "no_gate"}
+    {#if gate.kind === "payment_gate" && tokenState}
+        {@const balance = accessApprovalState.balanceAfterCurrentCommitments(
+            tokenState.ledger,
+            tokenState.cryptoBalance,
+        )}
+        {@const insufficient = balance < gate.amount && !satisfied}
+        {@render tokenGate(
+            tokenState.logo,
+            tokenState.symbol,
+            insufficient,
+            "payment gate",
+            tokenState.formatTokens(gate.amount),
+            tokenState.formatTokens(balance),
+            () => onClick(gate),
+            () => tokenState.refreshBalance(client),
+        )}
+    {:else if gate.kind === "token_balance_gate" && tokenState}
+        {@const balance = accessApprovalState.balanceAfterCurrentCommitments(
+            tokenState.ledger,
+            tokenState.cryptoBalance,
+        )}
+        {@const insufficient = balance < gate.minBalance}
+        {@render tokenGate(
+            tokenState.logo,
+            tokenState.symbol,
+            insufficient,
+            "minimum balance gate",
+            tokenState.formatTokens(gate.minBalance),
+            tokenState.formatTokens(balance),
+            () => onClick(gate),
+            () => tokenState.refreshBalance(client),
+        )}
+    {:else if gate.kind === "neuron_gate" && token}
+        {@render neuronGate(gate, token)}
+    {:else if gate.kind === "chit_earned_gate"}
+        {@const insufficient = $currentUserStore.totalChitEarned < gate.minEarned}
+        {@render tokenGate(
+            "/assets/chit.svg",
+            "CHIT",
+            insufficient,
+            "earned gate",
+            gate.minEarned.toLocaleString(),
+            $currentUserStore.totalChitEarned.toLocaleString(),
+        )}
+    {:else if gate.kind === "lifetime_diamond_gate"}
+        {@render booleanGate(
+            disableCryptoPaymentsFeature,
+            Lifetime,
+            satisfied || disableCryptoPaymentsFeature
+                ? "Lifetime diamond membership"
+                : "Get lifetime membership",
+            satisfied ? undefined : "You are currently not a member",
+        )}
+    {:else if gate.kind === "diamond_gate"}
+        {@render booleanGate(
+            disableCryptoPaymentsFeature,
+            Diamond,
+            satisfied || disableCryptoPaymentsFeature
+                ? "Diamond membership"
+                : "Get diamond membership",
+            satisfied ? undefined : "You are currently not a member",
+        )}
+    {:else if gate.kind === "unique_person_gate"}
+        {@render booleanGate(
+            false,
+            AccountCheck,
+            satisfied ? "Unique personhood verified" : "Verify unique personhood",
+            satisfied ? undefined : "You have not yet been verified",
+        )}
+    {:else}
+        <AccessGateText {gate} />
+    {/if}
+{/if}
diff --git a/frontend/app/src/components_mobile/home/access_gates/AccessGateText.svelte b/frontend/app/src/mobile/features/access/AccessGateText.svelte
similarity index 95%
rename from frontend/app/src/components_mobile/home/access_gates/AccessGateText.svelte
rename to frontend/app/src/mobile/features/access/AccessGateText.svelte
index b36586989a..987ccd56de 100644
--- a/frontend/app/src/components_mobile/home/access_gates/AccessGateText.svelte
+++ b/frontend/app/src/mobile/features/access/AccessGateText.svelte
@@ -4,7 +4,7 @@
     import { Body, type SizeMode } from "component-lib";
     import type { LeafGate, OpenChat } from "@client";
     import { getContext } from "svelte";
-    import Translatable from "../../Translatable.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/components_mobile/home/access_gates/AccessGates.svelte b/frontend/app/src/mobile/features/access/AccessGates.svelte
similarity index 93%
rename from frontend/app/src/components_mobile/home/access_gates/AccessGates.svelte
rename to frontend/app/src/mobile/features/access/AccessGates.svelte
index 8cdd25a2e4..31b6723c4e 100644
--- a/frontend/app/src/components_mobile/home/access_gates/AccessGates.svelte
+++ b/frontend/app/src/mobile/features/access/AccessGates.svelte
@@ -14,14 +14,14 @@
     import Check from "svelte-material-icons/Check.svelte";
     import DiamondOutline from "svelte-material-icons/DiamondOutline.svelte";
     import Plus from "svelte-material-icons/Plus.svelte";
-    import MulticolourText from "../../MulticolourText.svelte";
-    import Setting from "../../Setting.svelte";
-    import SparkleBox from "../../SparkleBox.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import { UpdateGroupState } from "../createOrUpdateGroup/group.svelte";
-    import GroupCard from "../createOrUpdateGroup/GroupCard.svelte";
-    import type { UpdateGroupOrCommunityState } from "../groupOrCommunity.svelte";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
+    import MulticolourText from "@src/mobile/shared/MulticolourText.svelte";
+    import Setting from "@src/mobile/shared/Setting.svelte";
+    import SparkleBox from "@src/mobile/shared/SparkleBox.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import { UpdateGroupState } from "@src/mobile/features/chats/group/edit/group.svelte";
+    import GroupCard from "@src/mobile/features/chats/group/edit/GroupCard.svelte";
+    import type { UpdateGroupOrCommunityState } from "@src/mobile/shared/groupOrCommunity.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
 
     interface Props {
         data: UpdateGroupOrCommunityState;
diff --git a/frontend/app/src/components_mobile/home/access/AccessGatesEvaluator.svelte b/frontend/app/src/mobile/features/access/AccessGatesEvaluator.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/access/AccessGatesEvaluator.svelte
rename to frontend/app/src/mobile/features/access/AccessGatesEvaluator.svelte
diff --git a/frontend/app/src/components_mobile/home/access/BalanceGateEvaluator.svelte b/frontend/app/src/mobile/features/access/BalanceGateEvaluator.svelte
similarity index 93%
rename from frontend/app/src/components_mobile/home/access/BalanceGateEvaluator.svelte
rename to frontend/app/src/mobile/features/access/BalanceGateEvaluator.svelte
index e8f160adee..b15b513e9c 100644
--- a/frontend/app/src/components_mobile/home/access/BalanceGateEvaluator.svelte
+++ b/frontend/app/src/mobile/features/access/BalanceGateEvaluator.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import MulticolourText from "@src/components_mobile/MulticolourText.svelte";
+    import MulticolourText from "@src/mobile/shared/MulticolourText.svelte";
     import { accessApprovalState } from "@src/utils/preview.svelte";
     import {
         Avatar,
@@ -17,9 +17,9 @@
     import { _ } from "svelte-i18n";
     import Chart from "svelte-material-icons/ChartBoxOutline.svelte";
     import QrCode from "svelte-material-icons/Qrcode.svelte";
-    import { i18nKey, interpolate } from "../../../i18n/i18n";
-    import Translatable from "../../Translatable.svelte";
-    import { TokenState } from "../wallet/walletState.svelte";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import { TokenState } from "@src/mobile/features/wallet/walletState.svelte";
     import AccessGateExpiry from "./AccessGateExpiry.svelte";
 
     interface Props {
diff --git a/frontend/app/src/components_mobile/home/access_gates/BalanceGates.svelte b/frontend/app/src/mobile/features/access/BalanceGates.svelte
similarity index 94%
rename from frontend/app/src/components_mobile/home/access_gates/BalanceGates.svelte
rename to frontend/app/src/mobile/features/access/BalanceGates.svelte
index 15463094c1..33d6f9b04d 100644
--- a/frontend/app/src/components_mobile/home/access_gates/BalanceGates.svelte
+++ b/frontend/app/src/mobile/features/access/BalanceGates.svelte
@@ -2,7 +2,7 @@
     import { ColourVars } from "component-lib";
     import { OpenChat, publish, type TokenBalanceGate } from "@client";
     import { getContext } from "svelte";
-    import type { UpdateGroupOrCommunityState } from "../groupOrCommunity.svelte";
+    import type { UpdateGroupOrCommunityState } from "@src/mobile/shared/groupOrCommunity.svelte";
     import AboutBalanceGate from "./AboutBalanceGate.svelte";
     import AccessGateList from "./AccessGateList.svelte";
 
diff --git a/frontend/app/src/mobile/features/access/DiamondGateEvaluator.svelte b/frontend/app/src/mobile/features/access/DiamondGateEvaluator.svelte
new file mode 100644
index 0000000000..4b47283df0
--- /dev/null
+++ b/frontend/app/src/mobile/features/access/DiamondGateEvaluator.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+    import Payment from "@src/mobile/features/upgrade/Payment.svelte";
+
+    interface Props {
+        lifetime: boolean;
+        onCredentialReceived: (cred: string) => void;
+        onCancel?: () => void;
+    }
+
+    let { lifetime, onCredentialReceived, onCancel }: Props = $props();
+</script>
+
+<Payment height={"hug"} {onCancel} padding={"zero"} {lifetime} onSuccess={onCredentialReceived} />
diff --git a/frontend/app/src/components_mobile/home/access_gates/EditBalanceGate.svelte b/frontend/app/src/mobile/features/access/EditBalanceGate.svelte
similarity index 95%
rename from frontend/app/src/components_mobile/home/access_gates/EditBalanceGate.svelte
rename to frontend/app/src/mobile/features/access/EditBalanceGate.svelte
index 3a42903439..b82ef8a873 100644
--- a/frontend/app/src/components_mobile/home/access_gates/EditBalanceGate.svelte
+++ b/frontend/app/src/mobile/features/access/EditBalanceGate.svelte
@@ -22,9 +22,9 @@
     import { getContext } from "svelte";
     import { _ } from "svelte-i18n";
     import Save from "svelte-material-icons/ContentSaveOutline.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import type { UpdateGroupOrCommunityState } from "../groupOrCommunity.svelte";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import type { UpdateGroupOrCommunityState } from "@src/mobile/shared/groupOrCommunity.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
     import AboutPaymentGate from "./AboutPaymentGate.svelte";
     import SelectBinding from "./SelectBinding.svelte";
 
diff --git a/frontend/app/src/components_mobile/home/access_gates/EditChitGate.svelte b/frontend/app/src/mobile/features/access/EditChitGate.svelte
similarity index 94%
rename from frontend/app/src/components_mobile/home/access_gates/EditChitGate.svelte
rename to frontend/app/src/mobile/features/access/EditChitGate.svelte
index 9697b1d1d2..2a43612be2 100644
--- a/frontend/app/src/components_mobile/home/access_gates/EditChitGate.svelte
+++ b/frontend/app/src/mobile/features/access/EditChitGate.svelte
@@ -17,9 +17,9 @@
     } from "@client";
     import { _ } from "svelte-i18n";
     import Save from "svelte-material-icons/ContentSaveOutline.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import type { UpdateGroupOrCommunityState } from "../groupOrCommunity.svelte";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import type { UpdateGroupOrCommunityState } from "@src/mobile/shared/groupOrCommunity.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
     import AboutChitGate from "./AboutChitGate.svelte";
 
     interface Props {
diff --git a/frontend/app/src/components_mobile/home/access_gates/EditNeuronGate.svelte b/frontend/app/src/mobile/features/access/EditNeuronGate.svelte
similarity index 95%
rename from frontend/app/src/components_mobile/home/access_gates/EditNeuronGate.svelte
rename to frontend/app/src/mobile/features/access/EditNeuronGate.svelte
index 30ec1ea367..72ef74d1d5 100644
--- a/frontend/app/src/components_mobile/home/access_gates/EditNeuronGate.svelte
+++ b/frontend/app/src/mobile/features/access/EditNeuronGate.svelte
@@ -20,9 +20,9 @@
     import { getContext } from "svelte";
     import { _ } from "svelte-i18n";
     import Save from "svelte-material-icons/ContentSaveOutline.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import type { UpdateGroupOrCommunityState } from "../groupOrCommunity.svelte";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import type { UpdateGroupOrCommunityState } from "@src/mobile/shared/groupOrCommunity.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
     import AboutNeuronGate from "./AboutNeuronGate.svelte";
     import SelectBinding from "./SelectBinding.svelte";
 
diff --git a/frontend/app/src/components_mobile/home/access_gates/EditPaymentGate.svelte b/frontend/app/src/mobile/features/access/EditPaymentGate.svelte
similarity index 95%
rename from frontend/app/src/components_mobile/home/access_gates/EditPaymentGate.svelte
rename to frontend/app/src/mobile/features/access/EditPaymentGate.svelte
index 5da731999f..ead14b9f82 100644
--- a/frontend/app/src/components_mobile/home/access_gates/EditPaymentGate.svelte
+++ b/frontend/app/src/mobile/features/access/EditPaymentGate.svelte
@@ -23,9 +23,9 @@
     import { getContext } from "svelte";
     import { _ } from "svelte-i18n";
     import Save from "svelte-material-icons/ContentSaveOutline.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import type { UpdateGroupOrCommunityState } from "../groupOrCommunity.svelte";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import type { UpdateGroupOrCommunityState } from "@src/mobile/shared/groupOrCommunity.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
     import AboutPaymentGate from "./AboutPaymentGate.svelte";
     import SelectBinding from "./SelectBinding.svelte";
 
diff --git a/frontend/app/src/components_mobile/home/access/NeuronGateEvaluator.svelte b/frontend/app/src/mobile/features/access/NeuronGateEvaluator.svelte
similarity index 96%
rename from frontend/app/src/components_mobile/home/access/NeuronGateEvaluator.svelte
rename to frontend/app/src/mobile/features/access/NeuronGateEvaluator.svelte
index da446f3c34..0e6e3d65e7 100644
--- a/frontend/app/src/components_mobile/home/access/NeuronGateEvaluator.svelte
+++ b/frontend/app/src/mobile/features/access/NeuronGateEvaluator.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import MulticolourText from "@src/components_mobile/MulticolourText.svelte";
+    import MulticolourText from "@src/mobile/shared/MulticolourText.svelte";
     import {
         Avatar,
         Body,
@@ -18,8 +18,8 @@
     import { getContext } from "svelte";
     import { _ } from "svelte-i18n";
     import Wallet from "svelte-material-icons/WalletOutline.svelte";
-    import { i18nKey, interpolate } from "../../../i18n/i18n";
-    import Translatable from "../../Translatable.svelte";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
     import AccessGateExpiry from "./AccessGateExpiry.svelte";
 
     const client = getContext<OpenChat>("client");
diff --git a/frontend/app/src/components_mobile/home/access_gates/NeuronGates.svelte b/frontend/app/src/mobile/features/access/NeuronGates.svelte
similarity index 94%
rename from frontend/app/src/components_mobile/home/access_gates/NeuronGates.svelte
rename to frontend/app/src/mobile/features/access/NeuronGates.svelte
index 666f86bfc4..d33b924b10 100644
--- a/frontend/app/src/components_mobile/home/access_gates/NeuronGates.svelte
+++ b/frontend/app/src/mobile/features/access/NeuronGates.svelte
@@ -2,7 +2,7 @@
     import { ColourVars } from "component-lib";
     import { OpenChat, publish, type NeuronGate } from "@client";
     import { getContext } from "svelte";
-    import type { UpdateGroupOrCommunityState } from "../groupOrCommunity.svelte";
+    import type { UpdateGroupOrCommunityState } from "@src/mobile/shared/groupOrCommunity.svelte";
     import AboutNeuronGate from "./AboutNeuronGate.svelte";
     import AccessGateList from "./AccessGateList.svelte";
 
diff --git a/frontend/app/src/mobile/features/access/NoAccess.svelte b/frontend/app/src/mobile/features/access/NoAccess.svelte
new file mode 100644
index 0000000000..8864c86626
--- /dev/null
+++ b/frontend/app/src/mobile/features/access/NoAccess.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+    import { Body, Column, CommonButton, H2, Row, Sheet } from "component-lib";
+    import { _ } from "svelte-i18n";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+
+    interface Props {
+        onClose: () => void;
+    }
+
+    let { onClose }: Props = $props();
+</script>
+
+<Sheet onDismiss={onClose}>
+    <Column gap={"xl"} padding={"xl"}>
+        <H2 colour={"primary"}>
+            <Translatable resourceKey={i18nKey("noAccess")} />
+        </H2>
+
+        <Body colour={"textSecondary"}>
+            <Markdown text={$_("noAccessText")} />
+        </Body>
+
+        <Row mainAxisAlignment={"end"}>
+            <CommonButton mode={"active"} size={"medium"} onClick={onClose}>
+                <Translatable resourceKey={i18nKey("close")} />
+            </CommonButton>
+        </Row>
+    </Column>
+</Sheet>
diff --git a/frontend/app/src/mobile/features/access/PaymentGateEvaluator.svelte b/frontend/app/src/mobile/features/access/PaymentGateEvaluator.svelte
new file mode 100644
index 0000000000..a6619d5292
--- /dev/null
+++ b/frontend/app/src/mobile/features/access/PaymentGateEvaluator.svelte
@@ -0,0 +1,223 @@
+<script lang="ts">
+    import MulticolourText from "@src/mobile/shared/MulticolourText.svelte";
+    import { accessApprovalState } from "@src/utils/preview.svelte";
+    import {
+        Avatar,
+        Body,
+        BodySmall,
+        Button,
+        Caption,
+        ColourVars,
+        Column,
+        CommonButton,
+        H2,
+        Row,
+        StatusCard,
+    } from "component-lib";
+    import {
+        type Level,
+        type OpenChat,
+        type PaymentGate,
+        enhancedCryptoLookup,
+        publish,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import QrCode from "svelte-material-icons/Qrcode.svelte";
+    import Refresh from "svelte-material-icons/Refresh.svelte";
+    import Wallet from "svelte-material-icons/WalletOutline.svelte";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import { TokenState } from "@src/mobile/features/wallet/walletState.svelte";
+    import AccessGateExpiry from "./AccessGateExpiry.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        gate: PaymentGate & { expiry: bigint | undefined };
+        level: Level;
+        onApprovePayment: (args: { ledger: string; amount: bigint; approvalFee: bigint }) => void;
+        onClose: () => void;
+    }
+
+    let { gate, level, onApprovePayment, onClose }: Props = $props();
+
+    let token = $derived($enhancedCryptoLookup.get(gate.ledgerCanister)!);
+    let tokenState = $derived(new TokenState(token));
+    let refreshingBalance = $state(false);
+    let totalAmount = $derived(tokenState.formatTokens(gate.amount));
+    let toOwner = $derived(tokenState.formatTokens(BigInt(Number(gate.amount) * 0.98)));
+    let toOC = $derived(tokenState.formatTokens(BigInt(Number(gate.amount) * 0.02)));
+
+    let cryptoBalance = $derived(
+        accessApprovalState.balanceAfterCurrentCommitments(
+            tokenState.ledger,
+            tokenState.cryptoBalance,
+        ),
+    );
+
+    let insufficientFunds = $derived(cryptoBalance < gate.amount);
+    let approvalMessage = $derived(
+        interpolate(
+            $_,
+            i18nKey(
+                "access.paymentApprovalMessage",
+                {
+                    amount: tokenState.formatTokens(gate.amount),
+                    token: token.symbol,
+                },
+                level,
+                true,
+            ),
+        ),
+    );
+</script>
+
+{#snippet tokenBalance()}
+    <Row gap={"sm"}>
+        <Row
+            mainAxisAlignment={"spaceBetween"}
+            crossAxisAlignment={"center"}
+            borderRadius={"md"}
+            minHeight={"4rem"}
+            gap={"md"}
+            background={ColourVars.background2}
+            padding={["md", "lg"]}>
+            <Avatar url={tokenState.logo} />
+            <Column width={"fill"}>
+                <Body fontWeight={"bold"} colour={"textPrimary"} width={"hug"}
+                    >{tokenState.symbol}</Body>
+                <Caption colour={"textSecondary"} fontWeight={"bold"}>
+                    {tokenState.formatTokens(cryptoBalance)}
+                </Caption>
+            </Column>
+        </Row>
+        {#if insufficientFunds}
+            <Column
+                onClick={() => publish("receiveToken", tokenState)}
+                mainAxisAlignment={"center"}
+                crossAxisAlignment={"center"}
+                width={{ size: "4rem" }}
+                height={"fill"}
+                borderRadius={"lg"}
+                background={ColourVars.background2}
+                padding={["sm", "md"]}>
+                <QrCode size={"2rem"} color={ColourVars.textSecondary} />
+            </Column>
+        {/if}
+    </Row>
+{/snippet}
+
+<Column gap={"lg"}>
+    <Wallet size={"4.5rem"} color={ColourVars.primary} />
+    <H2 fontWeight={"bold"}>
+        <MulticolourText
+            parts={[
+                {
+                    text: i18nKey(tokenState.symbol),
+                    colour: "primary",
+                },
+                {
+                    text: i18nKey(" payment gate"),
+                    colour: "textPrimary",
+                },
+            ]} />
+    </H2>
+    <Body colour={"textSecondary"}>
+        <Markdown text={approvalMessage} />
+    </Body>
+
+    <Column gap={"sm"}>
+        {@render tokenBalance()}
+        {#if insufficientFunds}
+            <StatusCard
+                borderColour={ColourVars.background2}
+                background={ColourVars.background0}
+                mode={"warning"}
+                body={interpolate(
+                    $_,
+                    i18nKey(
+                        `Top up your ${tokenState.symbol} token account. Tap the QR code button to get your receiving address.`,
+                    ),
+                )}
+                title={interpolate($_, i18nKey("Insufficient funds"))}>
+            </StatusCard>
+        {/if}
+        {#if gate.expiry !== undefined}
+            <StatusCard
+                background={ColourVars.background2}
+                mode={"information"}
+                title={interpolate($_, i18nKey("This is a recurring payment"))}>
+                {#snippet body()}
+                    <AccessGateExpiry expiry={gate.expiry} />
+                {/snippet}
+            </StatusCard>
+        {/if}
+
+        <Column borderRadius={"lg"} gap={"lg"} padding={"lg"} background={ColourVars.background2}>
+            <Row mainAxisAlignment={"spaceBetween"}>
+                <BodySmall colour={"textSecondary"}>
+                    <Translatable resourceKey={i18nKey("Payment amount")} />
+                </BodySmall>
+                <Body width={"hug"} colour={"primary"} fontWeight={"bold"}>
+                    {totalAmount}
+                    {tokenState.symbol}
+                </Body>
+            </Row>
+            <Row mainAxisAlignment={"spaceBetween"}>
+                <BodySmall colour={"textSecondary"}>
+                    <Translatable resourceKey={i18nKey("Owner receives (98%)")} />
+                </BodySmall>
+                <Body width={"hug"} colour={"textPrimary"} fontWeight={"bold"}>
+                    {toOwner}
+                    {tokenState.symbol}
+                </Body>
+            </Row>
+            <Row mainAxisAlignment={"spaceBetween"}>
+                <BodySmall colour={"textSecondary"}>
+                    <Translatable resourceKey={i18nKey("OpenChat treasury receives (2%)")} />
+                </BodySmall>
+                <Body width={"hug"} colour={"textPrimary"} fontWeight={"bold"}>
+                    {toOC}
+                    {tokenState.symbol}
+                </Body>
+            </Row>
+        </Column>
+    </Column>
+</Column>
+
+{#if insufficientFunds}
+    {@render refreshBalance()}
+{:else}
+    <Button
+        width={"fill"}
+        onClick={() =>
+            onApprovePayment({
+                ledger: token.ledger,
+                amount: gate.amount,
+                approvalFee: token.transferFee,
+            })}>
+        {#snippet icon(color)}
+            <Wallet {color} />
+        {/snippet}
+        <Translatable resourceKey={i18nKey("Approve payment")} />
+    </Button>
+    <CommonButton width={"fill"} size={"small_text"} onClick={onClose}>
+        <Translatable resourceKey={i18nKey("cancel")} />
+    </CommonButton>
+{/if}
+
+{#snippet refreshBalance()}
+    <CommonButton
+        loading={refreshingBalance}
+        width={"fill"}
+        mode={"active"}
+        size={"small_text"}
+        onClick={() => tokenState.refreshBalance(client)}>
+        {#snippet icon(color, size)}
+            <Refresh {color} {size} />
+        {/snippet}
+        <Translatable resourceKey={i18nKey(`Refresh ${tokenState.symbol} balance`)} />
+    </CommonButton>
+{/snippet}
diff --git a/frontend/app/src/components_mobile/home/access_gates/PaymentGates.svelte b/frontend/app/src/mobile/features/access/PaymentGates.svelte
similarity index 93%
rename from frontend/app/src/components_mobile/home/access_gates/PaymentGates.svelte
rename to frontend/app/src/mobile/features/access/PaymentGates.svelte
index 0240bde58b..bad4573d15 100644
--- a/frontend/app/src/components_mobile/home/access_gates/PaymentGates.svelte
+++ b/frontend/app/src/mobile/features/access/PaymentGates.svelte
@@ -2,7 +2,7 @@
     import { ColourVars } from "component-lib";
     import { OpenChat, publish, type PaymentGate } from "@client";
     import { getContext } from "svelte";
-    import type { UpdateGroupOrCommunityState } from "../groupOrCommunity.svelte";
+    import type { UpdateGroupOrCommunityState } from "@src/mobile/shared/groupOrCommunity.svelte";
     import AboutPaymentGate from "./AboutPaymentGate.svelte";
     import AccessGateList from "./AccessGateList.svelte";
 
diff --git a/frontend/app/src/components_mobile/home/access_gates/SelectBinding.svelte b/frontend/app/src/mobile/features/access/SelectBinding.svelte
similarity index 97%
rename from frontend/app/src/components_mobile/home/access_gates/SelectBinding.svelte
rename to frontend/app/src/mobile/features/access/SelectBinding.svelte
index 7dc85f955e..36474e129c 100644
--- a/frontend/app/src/components_mobile/home/access_gates/SelectBinding.svelte
+++ b/frontend/app/src/mobile/features/access/SelectBinding.svelte
@@ -3,7 +3,7 @@
     import type { GateBinding } from "@src/utils/access";
     import { Container, Option, Search, Select, Subtitle } from "component-lib";
     import { _ } from "svelte-i18n";
-    import Translatable from "../../Translatable.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
 
     interface Props {
         bindings: GateBinding[];
diff --git a/frontend/app/src/mobile/features/access/UniqueHumanGateEvaluator.svelte b/frontend/app/src/mobile/features/access/UniqueHumanGateEvaluator.svelte
new file mode 100644
index 0000000000..2ca8f09cf6
--- /dev/null
+++ b/frontend/app/src/mobile/features/access/UniqueHumanGateEvaluator.svelte
@@ -0,0 +1,178 @@
+<script lang="ts">
+    import {
+        Body,
+        BodySmall,
+        Button,
+        ColourVars,
+        Column,
+        CommonButton,
+        H2,
+        Row,
+        StatusCard,
+    } from "component-lib";
+    import { iconSize, type Level, type OpenChat } from "@client";
+    import { getContext, onMount } from "svelte";
+    import { _ } from "svelte-i18n";
+    import AccountCheck from "svelte-material-icons/AccountCheck.svelte";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import { uniquePersonCredentialGate } from "@src/utils/access";
+    import ErrorMessage from "@src/mobile/shared/ErrorMessage.svelte";
+    import FancyLoader from "@src/mobile/ui/icons/FancyLoader.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import HumanityConfirmation from "@src/mobile/shared/HumanityConfirmation.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import LinkAccounts from "@src/mobile/features/profile/LinkAccounts.svelte";
+    import AccessGateExpiry from "./AccessGateExpiry.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        level: Level;
+        expiry: bigint | undefined;
+        onCredentialReceived: (cred: string) => void;
+        onClose: () => void;
+    }
+
+    let { level, expiry, onClose, onCredentialReceived }: Props = $props();
+
+    let failed = $state(false);
+    let verifying = $state(false);
+    let confirmed = $state(false);
+    let step: "linking" | "verification" = $state("linking");
+    let iiPrincipal: string | undefined = $state(undefined);
+    let checkingPrincipal = $state(true);
+
+    onMount(() => {
+        client
+            .getLinkedIIPrincipal()
+            .then((p) => {
+                iiPrincipal = p;
+                if (iiPrincipal !== undefined) {
+                    step = "verification";
+                }
+            })
+            .finally(() => (checkingPrincipal = false));
+    });
+
+    function verify() {
+        verifying = true;
+        failed = false;
+        if (iiPrincipal === undefined) return;
+        client
+            .verifyAccessGate(uniquePersonCredentialGate, iiPrincipal)
+            .then((credential) => {
+                if (credential === undefined) {
+                    failed = true;
+                } else {
+                    onCredentialReceived(credential);
+                }
+            })
+            .catch(() => (failed = true))
+            .finally(() => (verifying = false));
+    }
+</script>
+
+{#if checkingPrincipal}
+    <div class="loader">
+        <FancyLoader />
+    </div>
+{:else if step === "linking"}
+    <LinkAccounts
+        bind:iiPrincipal
+        {onClose}
+        onProceed={() => (step = "verification")}
+        explanations={[i18nKey("identity.humanityWarning")]} />
+{:else}
+    <Row gap={"md"} crossAxisAlignment={"center"}>
+        <AccountCheck size={$iconSize} color={"var(--txt)"} />
+        <H2 fontWeight={"bold"}>
+            <Translatable resourceKey={i18nKey("access.uniquePerson")} />
+        </H2>
+    </Row>
+    <div>
+        {#if failed}
+            <Column gap={"lg"}>
+                <ErrorMessage>
+                    <Translatable
+                        resourceKey={i18nKey(
+                            "access.credential.credentialCheckFailed",
+                            {
+                                credential: "Unique person",
+                            },
+                            level,
+                            true,
+                        )} />
+                </ErrorMessage>
+
+                <Body>
+                    <Translatable resourceKey={i18nKey("access.uniquePersonInfo1")} />
+                </Body>
+
+                <BodySmall colour={"textSecondary"}>
+                    <Markdown text={interpolate($_, i18nKey("access.uniquePersonInfo2"))} />
+                </BodySmall>
+
+                <BodySmall colour={"textSecondary"}>
+                    <Translatable resourceKey={i18nKey("access.uniquePersonInfo3")} />
+                </BodySmall>
+            </Column>
+        {:else}
+            <Column gap={"lg"}>
+                <BodySmall>
+                    <Translatable
+                        resourceKey={i18nKey(
+                            "access.credential.credentialCheckMessage",
+                            {
+                                credential: "Unique person",
+                            },
+                            level,
+                            true,
+                        )} />
+                </BodySmall>
+
+                <HumanityConfirmation bind:confirmed />
+
+                {#if expiry !== undefined}
+                    <StatusCard
+                        background={ColourVars.background2}
+                        mode={"warning"}
+                        title={interpolate($_, i18nKey("Recurring access gate"))}>
+                        {#snippet body()}
+                            <AccessGateExpiry {expiry} />
+                        {/snippet}
+                    </StatusCard>
+                {/if}
+            </Column>
+        {/if}
+    </div>
+    <Column gap={"md"} crossAxisAlignment={"center"}>
+        <Button
+            loading={verifying}
+            disabled={verifying || !confirmed || iiPrincipal === undefined}
+            onClick={verify}><Translatable resourceKey={i18nKey("access.verify")} /></Button>
+        <CommonButton width={"hug"} size={"small_text"} onClick={onClose}
+            ><Translatable resourceKey={i18nKey("cancel")} /></CommonButton>
+    </Column>
+{/if}
+
+<style lang="scss">
+    .info,
+    .question,
+    .answer {
+        margin-bottom: $sp4;
+    }
+
+    .question {
+        @include font(book, normal, fs-90);
+    }
+
+    .answer {
+        color: var(--txt-light);
+        @include font(book, normal, fs-90);
+    }
+
+    .loader {
+        width: 100px;
+        margin: 100px auto;
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/access/insurance/StreakInsuranceBuy.svelte b/frontend/app/src/mobile/features/access/insurance/StreakInsuranceBuy.svelte
new file mode 100644
index 0000000000..08eca453b5
--- /dev/null
+++ b/frontend/app/src/mobile/features/access/insurance/StreakInsuranceBuy.svelte
@@ -0,0 +1,204 @@
+<script lang="ts">
+    import MulticolourText from "@src/mobile/shared/MulticolourText.svelte";
+    import { toastStore } from "@src/stores/toast";
+    import {
+        Avatar,
+        Body,
+        BodySmall,
+        Caption,
+        type ColourVarKeys,
+        ColourVars,
+        Column,
+        CommonButton,
+        Container,
+        H2,
+        Row,
+        Subtitle,
+    } from "component-lib";
+    import {
+        LEDGER_CANISTER_CHAT,
+        OpenChat,
+        enhancedCryptoLookup,
+        publish,
+        streakInsuranceStore,
+    } from "@client";
+    import { getContext } from "svelte";
+    import Plus from "svelte-material-icons/Plus.svelte";
+    import QrCode from "svelte-material-icons/Qrcode.svelte";
+    import Wallet from "svelte-material-icons/WalletOutline.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
+    import StreakHeadline from "@src/mobile/features/profile/view/StreakHeadline.svelte";
+    import { TokenState } from "@src/mobile/features/wallet/walletState.svelte";
+
+    const client = getContext<OpenChat>("client");
+    interface Props {
+        onClose: () => void;
+    }
+
+    const MAX_DAYS = 30;
+    const ledger = LEDGER_CANISTER_CHAT;
+    const token = $derived($enhancedCryptoLookup.get(ledger));
+    const tokenState = $derived(new TokenState(token!));
+    const currentDaysInsured = $streakInsuranceStore.daysInsured;
+    const currentDaysMissed = $streakInsuranceStore.daysMissed;
+    let { onClose }: Props = $props();
+    let additionalDays = $state(0);
+    let insufficientBalance = $derived(tokenState.remainingBalance < 0);
+    let paying = $state(false);
+    let remaining = $derived(currentDaysInsured + additionalDays - currentDaysMissed);
+    let totalDays = $derived(currentDaysInsured + additionalDays);
+    let maxReached = $derived(totalDays >= MAX_DAYS);
+
+    $effect(() => {
+        tokenState.draftAmount = client.streakInsurancePrice(currentDaysInsured, additionalDays);
+    });
+
+    function pay() {
+        paying = true;
+        client
+            .payForStreakInsurance(additionalDays, tokenState.draftAmount)
+            .then((resp) => {
+                if (resp.kind !== "success") {
+                    toastStore.showFailureToast(i18nKey("streakInsurance.failure"));
+                } else {
+                    onClose();
+                }
+            })
+            .finally(() => (paying = false));
+    }
+</script>
+
+{#snippet metric(word: string, subtext: string, accent: ColourVarKeys, val: number)}
+    <Row
+        mainAxisAlignment={"spaceBetween"}
+        crossAxisAlignment={"center"}
+        borderRadius={"md"}
+        minHeight={"4rem"}
+        gap={"md"}
+        background={ColourVars.background2}
+        padding={["md", "lg"]}>
+        <Column width={"fill"}>
+            <Subtitle fontWeight={"bold"}>
+                <MulticolourText
+                    parts={[
+                        { text: i18nKey("Days "), colour: "textPrimary" },
+                        { text: i18nKey(word), colour: accent },
+                    ]} />
+            </Subtitle>
+            <BodySmall colour={"textSecondary"}>
+                <Translatable resourceKey={i18nKey(subtext)} />
+            </BodySmall>
+        </Column>
+        <H2 colour={accent} width={"hug"} fontWeight={"bold"}>{val}</H2>
+    </Row>
+{/snippet}
+
+{#snippet tokenBalance()}
+    <Row gap={"sm"}>
+        <Row
+            mainAxisAlignment={"spaceBetween"}
+            crossAxisAlignment={"center"}
+            borderRadius={"md"}
+            minHeight={"4rem"}
+            gap={"md"}
+            background={ColourVars.background2}
+            padding={["md", "lg"]}>
+            <Avatar url={tokenState.logo} />
+            <Column width={"fill"}>
+                <Body fontWeight={"bold"} colour={"textPrimary"} width={"hug"}
+                    >{tokenState.symbol}</Body>
+                <Caption colour={"textSecondary"} fontWeight={"bold"}>
+                    {tokenState.formattedTokenBalance}
+                </Caption>
+            </Column>
+        </Row>
+        {#if insufficientBalance}
+            <Column
+                onClick={() => publish("receiveToken", tokenState)}
+                mainAxisAlignment={"center"}
+                crossAxisAlignment={"center"}
+                width={{ size: "4rem" }}
+                height={"fill"}
+                borderRadius={"lg"}
+                background={ColourVars.background2}
+                padding={["sm", "md"]}>
+                <QrCode size={"2rem"} color={ColourVars.textSecondary} />
+            </Column>
+        {/if}
+    </Row>
+{/snippet}
+
+<SlidingPageContent
+    title={i18nKey("Streak insurance")}
+    subtitle={i18nKey("Make sure your streak stays intact")}>
+    <Container height={"fill"} padding={["xl", "xl", "huge"]} gap={"xl"} direction={"vertical"}>
+        <StreakHeadline />
+
+        <Body>
+            <MulticolourText
+                parts={[
+                    {
+                        text: i18nKey("Use our "),
+                        colour: "textSecondary",
+                    },
+                    {
+                        text: i18nKey("streak insurance "),
+                        colour: "primary",
+                    },
+                    {
+                        text: i18nKey(
+                            "feature to prevent your streak from reseting to zero if you miss a day or two for any reason.",
+                        ),
+                        colour: "textSecondary",
+                    },
+                ]} />
+        </Body>
+
+        {@render tokenBalance()}
+
+        <Column gap={"sm"}>
+            {@render metric(
+                "insured",
+                "Number of streak days you've insured",
+                "primary",
+                totalDays,
+            )}
+            {@render metric(
+                "missed",
+                "Number of used streak insurance days",
+                "secondary",
+                currentDaysMissed,
+            )}
+            {@render metric("remaining", "Remaining insured streak days", "warning", remaining)}
+        </Column>
+
+        <Row crossAxisAlignment={"center"} mainAxisAlignment={"spaceBetween"}>
+            <CommonButton
+                mode={"active"}
+                size={"small_text"}
+                disabled={paying || maxReached}
+                onClick={() => (additionalDays += 1)}>
+                {#snippet icon(color)}
+                    <Plus {color} />
+                {/snippet}
+                <Translatable resourceKey={i18nKey("streakInsurance.addDay")}></Translatable>
+            </CommonButton>
+            <CommonButton
+                mode={"active"}
+                size={"medium"}
+                loading={paying}
+                disabled={paying || additionalDays === 0 || insufficientBalance}
+                onClick={pay}>
+                {#snippet icon(color, size)}
+                    <Wallet {color} {size} />
+                {/snippet}
+                <Translatable
+                    resourceKey={i18nKey("streakInsurance.pay", {
+                        price: tokenState.formatTokens(tokenState.draftAmount),
+                    })}></Translatable>
+            </CommonButton>
+        </Row>
+    </Container>
+</SlidingPageContent>
diff --git a/frontend/app/src/mobile/features/activity/ActivityEvent.svelte b/frontend/app/src/mobile/features/activity/ActivityEvent.svelte
new file mode 100644
index 0000000000..1a062ab0c2
--- /dev/null
+++ b/frontend/app/src/mobile/features/activity/ActivityEvent.svelte
@@ -0,0 +1,280 @@
+<script lang="ts">
+    import { Avatar, Body, BodySmall, Container, CountBadge, Subtitle } from "component-lib";
+    import type { Message, MessageActivityEvent, ResourceKey } from "@client";
+    import {
+        allUsersStore,
+        communitiesStore,
+        currentUserIdStore,
+        OpenChat,
+        type MessageContext,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import { buildDisplayName } from "@src/utils/user";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import Reaction from "@src/mobile/features/chats/core/Reaction.svelte";
+    import Tip from "@src/mobile/features/chats/core/Tip.svelte";
+
+    const MAX_REACTIONS = 4;
+    const client = getContext<OpenChat>("client");
+
+    type Event = Omit<MessageActivityEvent, "message">;
+
+    interface Props {
+        event: Event;
+        message?: Message;
+        onClick: () => void;
+    }
+
+    let { event, onClick, message }: Props = $props();
+
+    function getChatName(ctx: MessageContext): string | undefined {
+        const chat = client.lookupChatSummary(ctx.chatId);
+        const parts = [];
+        if (chat !== undefined) {
+            switch (chat.kind) {
+                case "direct_chat":
+                    parts.push(client.getDisplayName(chat.them.userId));
+                    break;
+                case "group_chat":
+                    parts.push(chat.name);
+                    break;
+                case "channel":
+                    const community = $communitiesStore.get({
+                        kind: "community",
+                        communityId: chat.id.communityId,
+                    });
+                    if (community) {
+                        parts.push(community.name);
+                    }
+                    parts.push(chat.name);
+                    break;
+            }
+            if (ctx.threadRootMessageIndex !== undefined) {
+                parts.push("Thread");
+            }
+            return parts.join(" > ");
+        }
+        return undefined;
+    }
+
+    function otherReactors(ev: Event): Set<string> {
+        if (message === undefined) return new Set();
+        return new Set(
+            message.reactions.flatMap((r) =>
+                [...r.userIds].filter((u) => u !== ev.userId && u !== $currentUserIdStore),
+            ),
+        );
+    }
+
+    function otherTippers(ev: Event): Set<string> {
+        if (message === undefined) return new Set();
+        return new Set(
+            Object.values(message.tips).flatMap((tips) => {
+                return Object.keys(tips).filter((u) => u !== ev.userId);
+            }),
+        );
+    }
+
+    function numberOfPeopleVoting(msg: Message | undefined): number {
+        if (msg === undefined || msg.content.kind !== "poll_content") return 1;
+        const content = msg.content;
+        if (content.votes.total.kind === "anonymous_poll_votes") {
+            return Object.values(content.votes.total.votes).reduce((total, n) => total + n, 0);
+        } else if (content.votes.total.kind === "hidden_poll_votes") {
+            return content.votes.total.votes;
+        } else if (content.votes.total.kind === "visible_poll_votes") {
+            return Object.values(content.votes.total.votes).reduce(
+                (total, n) => total + n.length,
+                0,
+            );
+        }
+        return 1;
+    }
+
+    function pluraliseMessage(
+        root: "tip" | "reaction",
+        username: string,
+        others: Set<string>,
+    ): ResourceKey {
+        switch (others.size) {
+            case 0:
+                return i18nKey(`activity.${root}One`, { username });
+            case 1:
+                const u = [...others][0];
+                return i18nKey(`activity.${root}Two`, {
+                    username,
+                    other: buildDisplayName(
+                        $allUsersStore,
+                        u,
+                        u === $currentUserIdStore ? "me" : "user",
+                    ),
+                });
+            default:
+                return i18nKey(`activity.${root}N`, { username, n: others.size });
+        }
+    }
+
+    function buildEventSummary(event: Event, username: string) {
+        switch (event.activity) {
+            case "reaction":
+                return pluraliseMessage("reaction", username, otherReactors(event));
+            case "mention":
+                return i18nKey("activity.mention", { username });
+            case "quote_reply":
+                return i18nKey("activity.quoteReply", { username });
+            case "tip":
+                return pluraliseMessage("tip", username, otherTippers(event));
+            case "crypto":
+                return i18nKey("activity.crypto", { username });
+            case "poll_vote":
+                const numVoters = numberOfPeopleVoting(message);
+                if (numVoters > 1) {
+                    return i18nKey("activity.pollVoteN", { username, number: numVoters - 1 });
+                } else {
+                    return i18nKey("activity.pollVote", { username });
+                }
+            case "p2p_swap_accepted":
+                return i18nKey("activity.p2pSwapAccepted", { username });
+        }
+    }
+
+    function formatLatestMessage(username: string): string {
+        // TODO - not sure what this means
+        if (message === undefined) return "...";
+
+        const latestMessageText = client.getContentAsText($_, message.content);
+        return `${username} / ${latestMessageText}`;
+    }
+
+    let sender = $derived(event.userId ? $allUsersStore.get(event.userId) : undefined);
+    let eventUsername = $derived(
+        event.userId
+            ? buildDisplayName(
+                  $allUsersStore,
+                  event.userId,
+                  event.userId === $currentUserIdStore ? "me" : "user",
+              )
+            : $_("activity.anon"),
+    );
+    let messageUsername = $derived(
+        message
+            ? buildDisplayName(
+                  $allUsersStore,
+                  message.sender,
+                  message.sender === $currentUserIdStore ? "me" : "user",
+              )
+            : $_("activity.anon"),
+    );
+    let lastMessage = $derived(formatLatestMessage(messageUsername));
+    let eventSummary = $derived(buildEventSummary(event, eventUsername));
+    let chatName = $derived(getChatName(event.messageContext));
+    let tips = $derived(message?.tips ? Object.entries(message.tips) : []);
+</script>
+
+<Container padding={["md", "lg"]} gap={"md"} supplementalClass={"activity-event"} {onClick}>
+    <Avatar size={"lg"} url={client.userAvatarUrl(sender)}></Avatar>
+    <Container direction={"vertical"}>
+        <!-- Title, time, chat path & activity indicator -->
+        <Container direction={"vertical"}>
+            <!-- Title and time -->
+            <Container direction={"horizontal"} gap={"lg"}>
+                <Container width={"fill"}>
+                    <Subtitle fontWeight={"bold"}>
+                        <Markdown text={interpolate($_, eventSummary)} />
+                    </Subtitle>
+                </Container>
+                <Container width={"hug"} padding={["xs", "zero"]}>
+                    <Body colour={"textSecondary"} width={"hug"}>
+                        {client.toRelativeTime(event.timestamp)}
+                    </Body>
+                </Container>
+            </Container>
+            <!-- Chat breadcrumb & indicator-->
+            <Container direction={"horizontal"} gap={"lg"}>
+                <BodySmall width={"fill"} colour={"primary"}>{chatName}</BodySmall>
+                <!-- TODO investigate if possible to show  indicators next to new notifications -->
+                <!-- <NotificationIndicator></NotificationIndicator> -->
+            </Container>
+        </Container>
+        <!-- Message and reactions -->
+        <Container gap={"xs"} direction={"vertical"}>
+            <Body colour={"textSecondary"}>
+                {#if message !== undefined}
+                    <Markdown text={lastMessage} oneLine twoLine suppressLinks />
+                {:else}
+                    <Translatable resourceKey={i18nKey("activity.missingMessage")} />
+                {/if}
+            </Body>
+
+            {#if event.activity === "reaction" && message !== undefined && message.reactions.length > 0}
+                <Container supplementalClass="reactions" width={"hug"}>
+                    {@const more = message.reactions.length - MAX_REACTIONS}
+                    {#each message.reactions.slice(0, MAX_REACTIONS) as reaction (reaction.reaction)}
+                        <Reaction alignTooltip={"end"} {reaction} intersecting size="large" />
+                    {/each}
+                    {#if more > 0}
+                        <div class="plus-badge">
+                            <Body width="hug" fontWeight="bold">+{Math.abs(more)}</Body>
+                        </div>
+                    {/if}
+                </Container>
+            {/if}
+
+            {#if event.activity === "tip" && tips.length > 0}
+                <Container gap={"xs"} crossAxisAlignment={"center"} width={"hug"}>
+                    {@const more = tips.length - MAX_REACTIONS}
+                    {#each tips.slice(0, MAX_REACTIONS) as tip}
+                        <Tip alignTooltip={"end"} {tip} />
+                    {/each}
+                    {#if more > 0}
+                        <CountBadge mode="additive" size="large">+{more}</CountBadge>
+                    {/if}
+                </Container>
+            {/if}
+        </Container>
+    </Container>
+</Container>
+
+<style lang="scss">
+    :global(.activity-event a) {
+        color: inherit;
+    }
+
+    :global(.activity-event .tip-wrapper) {
+        margin-bottom: 0;
+        padding: 0;
+    }
+
+    :global(.activity-event .message-reaction) {
+        margin-bottom: 0;
+        padding: 0;
+    }
+
+    :global {
+        .reactions {
+            margin-left: -0.125rem;
+
+            > .tooltip_wrapper:not(:first-child),
+            > .plus-badge,
+            > .badge {
+                margin-left: -0.35rem;
+            }
+
+            > .plus-badge {
+                z-index: 1;
+                display: flex;
+                min-width: 2.75rem;
+                height: 2.25rem;
+                align-items: center;
+                justify-content: center;
+                background-color: var(--background-2);
+
+                border-radius: var(--rad-circle);
+                border: var(--bw-thick) solid var(--background-0);
+            }
+        }
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/activity/ActivityFeed.svelte b/frontend/app/src/mobile/features/activity/ActivityFeed.svelte
new file mode 100644
index 0000000000..5fbdb76697
--- /dev/null
+++ b/frontend/app/src/mobile/features/activity/ActivityFeed.svelte
@@ -0,0 +1,149 @@
+<script lang="ts">
+    import { activityFeedState } from "@src/runes/activity.svelte";
+    import { trackedEffect } from "@src/utils/effects.svelte";
+    import { Body, Container, Logo, SectionHeader } from "component-lib";
+    import {
+        messageActivitySummaryStore,
+        messageContextToChatListScope,
+        messageContextToString,
+        OpenChat,
+        routeForMessage,
+        type MessageActivityEvent,
+    } from "@client";
+    import { navigate } from "@src/utils/navigation";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import VirtualList from "@src/ui/VirtualList.svelte";
+    import FancyLoader from "@src/mobile/ui/icons/FancyLoader.svelte";
+    import NothingToSee from "@src/mobile/shared/NothingToSee.svelte";
+    import ActivityEvent from "./ActivityEvent.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    let uptodate = $derived.by(() => {
+        return $messageActivitySummaryStore.latestTimestamp <= activityFeedState.latestTimestamp;
+    });
+
+    type ActivityItem =
+        | { kind: "event"; formattedTime: string; event: MessageActivityEvent }
+        | { kind: "header"; formattedTime: string; timestamp: bigint };
+
+    let formatHeaderTime = (timestamp: bigint): string =>
+        client.getSmartDateHeader(timestamp, $_("today"), $_("yesterday"));
+
+    let activityItems: ActivityItem[] = $derived(
+        activityFeedState.activityEvents.reduce((acc, curItem, idx) => {
+            const curTimeFmt = formatHeaderTime(curItem.timestamp);
+            const prev = activityFeedState.activityEvents[idx - 1];
+            const prevTimeFmt = prev ? formatHeaderTime(prev.timestamp) : undefined;
+            if (curTimeFmt !== prevTimeFmt) {
+                acc.push({
+                    kind: "header",
+                    formattedTime: curTimeFmt,
+                    timestamp: curItem.timestamp,
+                });
+            }
+
+            acc.push({
+                kind: "event",
+                formattedTime: curTimeFmt,
+                event: curItem,
+            });
+
+            return acc;
+        }, [] as ActivityItem[]),
+    );
+
+    function loadActivity() {
+        let firstResponse = true;
+        client.subscribeToMessageActivityFeed((resp, final) => {
+            if (firstResponse) {
+                activityFeedState.activityEvents = resp.events;
+                firstResponse = false;
+            }
+            activityFeedState.populateMessages(resp.events);
+            if (activityFeedState.activityEvents.length > 0 && final) {
+                client.markActivityFeedRead(activityFeedState.latestTimestamp);
+            }
+        });
+    }
+
+    function selectEvent(ev: MessageActivityEvent) {
+        navigate(
+            routeForMessage(
+                messageContextToChatListScope(ev.messageContext).kind,
+                ev.messageContext,
+                ev.messageIndex,
+            ),
+        );
+    }
+
+    function eventKey(item: ActivityItem): string {
+        switch (item.kind) {
+            case "event": {
+                const { messageContext, eventIndex, activity } = item.event;
+                return `${messageContextToString(messageContext)}_${eventIndex}_${activity}`;
+            }
+
+            case "header": {
+                return `events_header_${item.timestamp}`;
+            }
+        }
+    }
+
+    trackedEffect("activityFeed", () => {
+        if (!uptodate || !activityFeedState.initialised) {
+            loadActivity();
+        }
+    });
+</script>
+
+<SectionHeader>
+    {#snippet avatar()}
+        <Logo />
+    {/snippet}
+    {#snippet title()}
+        <Translatable resourceKey={i18nKey("activity.title")} />
+    {/snippet}
+</SectionHeader>
+
+<Container
+    mainAxisAlignment={activityFeedState.initialised ? undefined : "center"}
+    crossAxisAlignment={activityFeedState.initialised ? undefined : "center"}
+    height={"fill"}
+    closeMenuOnScroll
+    direction={"vertical"}>
+    {#if !activityFeedState.initialised}
+        <FancyLoader size={"3rem"} />
+    {:else if activityFeedState.activityEvents.length === 0 && activityFeedState.initialised}
+        <NothingToSee title={"No activity yet"} subtitle={"Check back later for new activity"} />
+    {:else}
+        <VirtualList keyFn={eventKey} items={activityItems}>
+            {#snippet children(item)}
+                {#if item.kind === "header"}
+                    <!-- TODO make the time header stick to top-->
+                    <Container
+                        supplementalClass="activity_time_header"
+                        padding={["xl", "zero", "zero"]}>
+                        <Body colour={"textSecondary"} fontWeight={"semi-bold"}>
+                            {item.formattedTime}
+                        </Body>
+                    </Container>
+                {:else}
+                    <ActivityEvent
+                        message={activityFeedState.getMessage(item.event.messageId)}
+                        event={item.event}
+                        onClick={() => selectEvent(item.event)} />
+                {/if}
+            {/snippet}
+        </VirtualList>
+    {/if}
+</Container>
+
+<style lang="scss">
+    :global(.activity_time_header) {
+        padding-left: 4.75rem !important;
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/bots/AutoBotBuilder.svelte b/frontend/app/src/mobile/features/bots/AutoBotBuilder.svelte
new file mode 100644
index 0000000000..273e2483ea
--- /dev/null
+++ b/frontend/app/src/mobile/features/bots/AutoBotBuilder.svelte
@@ -0,0 +1,328 @@
+<script lang="ts">
+    import { Body, BodySmall, Column, Form, Input, InputIconButton, Row } from "component-lib";
+    import {
+        allUsersStore,
+        debouncedDerived,
+        OpenChat,
+        publish,
+        validateBot,
+        ValidationErrors,
+        validEndpoint,
+        type BotDefinition,
+        type CommandDefinition,
+        type ExternalBot,
+        type ValidationErrorMessages,
+    } from "@client";
+    import { getContext, untrack } from "svelte";
+    import { _ } from "svelte-i18n";
+    import Reload from "svelte-material-icons/Reload.svelte";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import EditableAvatar from "@src/mobile/shared/EditableAvatar.svelte";
+    import ErrorMessage from "@src/mobile/shared/ErrorMessage.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import SingleUserSelector from "@src/mobile/shared/SingleUserSelector.svelte";
+    import Tabs, { type Tab } from "./Tabs.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import BotCommands from "./BotCommands.svelte";
+    import BotPermissionViewer from "./BotPermissionViewer.svelte";
+    import InstallationLocationSelector from "./InstallationLocationSelector.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        valid: boolean;
+        schemaLoaded: boolean;
+        candidate: ExternalBot;
+        nameDirty: boolean;
+        principal: string;
+        mode: "register" | "update";
+    }
+
+    let {
+        valid = $bindable(),
+        schemaLoaded = $bindable(),
+        principal = $bindable(),
+        candidate = $bindable(),
+        nameDirty,
+        mode,
+    }: Props = $props();
+    let debug = $state(false);
+    let schemaLoading = $state(false);
+
+    let errors = $derived.by(
+        debouncedDerived(
+            () => [$state.snapshot(candidate), principal],
+            async () => {
+                const errors = validateBot(principal, candidate, mode);
+                if (errors.get("bot_name").length == 0 && nameDirty) {
+                    errors.addErrors("bot_name", await checkUsername(candidate.name));
+                }
+                return errors;
+            },
+            300,
+            new ValidationErrors(),
+        ),
+    );
+
+    function checkUsername(value: string): Promise<ValidationErrorMessages> {
+        return client
+            .checkUsername(value, true)
+            .then((resp) => {
+                if (resp === "success") {
+                    return [];
+                }
+
+                if (resp === "username_taken") {
+                    return [i18nKey("bots.builder.errors.duplicateName")];
+                }
+
+                return [i18nKey("bots.builder.errors.botNameInvalid")];
+            })
+            .catch((_) => {
+                return [i18nKey("bots.builder.errors.nameCheckError")];
+            });
+    }
+
+    // TODO we will probably need to come back to this to flesh out edit mode (is the bot dirty etc)
+    // let editing = $derived(bot !== undefined);
+
+    $effect(() => {
+        const isValid = errors.size === 0 && schemaLoaded;
+        if (isValid !== valid) {
+            valid = isValid;
+        }
+    });
+
+    function botAvatarSelected(detail: { url: string; data: Uint8Array }) {
+        candidate.avatarUrl = detail.url;
+    }
+
+    function onSubmit(e: Event) {
+        e.preventDefault();
+    }
+
+    function onSelectCommand(cmd: CommandDefinition) {
+        publish("viewBotCommand", cmd);
+    }
+
+    $effect(() => {
+        void candidate.endpoint;
+        untrack(endpointChanged);
+    });
+
+    function endpointChanged() {
+        schemaLoaded = false;
+        candidate.definition = {
+            kind: "bot_definition",
+            description: "",
+            commands: [],
+            autonomousConfig: undefined,
+            defaultSubscriptions: undefined,
+            dataEncoding: undefined,
+            restrictedLocations: undefined,
+        };
+    }
+
+    function loadDefinition() {
+        if (!schemaLoading && validEndpoint(candidate.endpoint)) {
+            schemaLoading = true;
+            schemaLoaded = false;
+            client
+                .getBotDefinition(candidate.endpoint)
+                .then((resp) => {
+                    if (resp.kind === "bot_definition") {
+                        candidate.definition = resp;
+                        schemaLoaded = true;
+                    } else {
+                        toastStore.showFailureToast(i18nKey("Failed to load bot definition"));
+                    }
+                })
+                .finally(() => (schemaLoading = false));
+        }
+    }
+
+    function getTabs(definition: BotDefinition): Tab[] {
+        const tabs: Tab[] = [];
+        if (definition.commands.length > 0) {
+            tabs.push({ title: i18nKey("bots.builder.commandsLabel"), snippet: commands });
+        }
+        if (definition.autonomousConfig !== undefined) {
+            tabs.push({
+                title: i18nKey("bots.builder.autonomousPermissionsLabel"),
+                snippet: autonomousPermissions,
+            });
+        }
+        return tabs;
+    }
+</script>
+
+{#snippet configtabs()}
+    {@const tabs = getTabs(candidate.definition)}
+    {#if tabs.length === 1}
+        <Body fontWeight={"bold"}>
+            <Translatable resourceKey={tabs[0].title} />
+        </Body>
+        {@render tabs[0].snippet()}
+    {:else}
+        <Tabs {tabs}></Tabs>
+    {/if}
+{/snippet}
+
+{#snippet commands()}
+    {#if candidate.definition.commands.length > 0}
+        <BotCommands commands={candidate.definition.commands} onClick={onSelectCommand} />
+    {:else}
+        <BodySmall colour={"textSecondary"}>
+            <Translatable resourceKey={i18nKey("bots.builder.noCommands")}></Translatable>
+        </BodySmall>
+    {/if}
+{/snippet}
+
+{#snippet autonomousPermissions()}
+    {#if candidate.definition.autonomousConfig !== undefined}
+        <BotPermissionViewer
+            nested
+            permissions={candidate.definition.autonomousConfig.permissions} />
+    {:else}
+        <BodySmall colour={"textSecondary"}>
+            <Translatable resourceKey={i18nKey("bots.builder.noAutonomousConfig")}></Translatable>
+        </BodySmall>
+    {/if}
+{/snippet}
+
+<Form {onSubmit}>
+    <Column gap={"xl"}>
+        <Row mainAxisAlignment={"center"} crossAxisAlignment={"center"}>
+            <EditableAvatar
+                highlightBorder
+                size={"headline"}
+                image={candidate.avatarUrl}
+                onImageSelected={botAvatarSelected} />
+        </Row>
+
+        {#if candidate.registrationStatus.kind === "private" && mode === "register"}
+            <InstallationLocationSelector bind:location={candidate.registrationStatus.location} />
+        {/if}
+
+        <Input
+            autofocus
+            minlength={3}
+            maxlength={100}
+            placeholder={interpolate(
+                $_,
+                mode === "update"
+                    ? i18nKey("bots.builder.editPrincipalPlaceholder")
+                    : i18nKey("bots.builder.principalPlaceholder"),
+            )}
+            error={errors.has("bot_principal")}
+            bind:value={principal}>
+            {#snippet subtext()}
+                <Row gap={"xs"}>
+                    <Translatable resourceKey={i18nKey("bots.builder.principalLabel")} />
+                    <span>
+                        (<Translatable resourceKey={i18nKey("bots.builder.principalRules")} />)
+                    </span>
+                </Row>
+            {/snippet}
+        </Input>
+
+        {#if mode === "update"}
+            <SingleUserSelector
+                mentionSelf
+                onUserSelected={(user) => (candidate.ownerId = user.userId)}
+                selectedReceiver={$allUsersStore.get(candidate.ownerId)}
+                placeholder={"bots.builder.ownerLabel"}>
+                {#snippet subtext()}
+                    <Translatable resourceKey={i18nKey("bots.builder.ownerRules")} />
+                {/snippet}
+            </SingleUserSelector>
+        {/if}
+
+        {#if mode === "register"}
+            <Input
+                minlength={3}
+                maxlength={25}
+                placeholder={interpolate($_, i18nKey("bots.builder.namePlaceholder"))}
+                error={errors.has("bot_name")}
+                bind:value={candidate.name}>
+                {#snippet subtext()}
+                    <Translatable resourceKey={i18nKey("bots.builder.nameRules")} />
+                {/snippet}
+            </Input>
+        {/if}
+
+        <Input
+            autofocus
+            minlength={3}
+            maxlength={200}
+            placeholder={interpolate($_, i18nKey("https://my_openchat_bot"))}
+            error={errors.has("bot_endpoint")}
+            bind:value={candidate.endpoint}>
+            {#snippet subtext()}
+                <Row gap={"xs"}>
+                    <Translatable resourceKey={i18nKey("bots.builder.endpointLabel")} />
+                    <span>
+                        (<Translatable resourceKey={i18nKey("bots.builder.endpointRules")} />)
+                    </span>
+                </Row>
+            {/snippet}
+
+            {#snippet iconButtons()}
+                <InputIconButton disabled={errors.has("bot_endpoint")} onClick={loadDefinition}>
+                    {#snippet children(color)}
+                        <Reload {color}></Reload>
+                    {/snippet}
+                </InputIconButton>
+            {/snippet}
+        </Input>
+
+        {#if schemaLoaded}
+            <Column gap={"xl"} padding={["zero", "md"]}>
+                <Column>
+                    <Body fontWeight={"bold"}>
+                        <Translatable resourceKey={i18nKey("bots.builder.descLabel")} />
+                    </Body>
+                    <BodySmall colour={"textSecondary"}>
+                        <Markdown inline={false} text={candidate.definition.description} />
+                    </BodySmall>
+                </Column>
+
+                {@render configtabs()}
+            </Column>
+
+            <div class="error">
+                {#if errors.has("duplicate_commands")}
+                    <ErrorMessage>
+                        <Translatable resourceKey={errors.get("duplicate_commands")[0]}
+                        ></Translatable
+                        ></ErrorMessage>
+                {/if}
+                {#if errors.has("no_commands")}
+                    <ErrorMessage>
+                        <Translatable resourceKey={errors.get("no_commands")[0]}></Translatable
+                        ></ErrorMessage>
+                {/if}
+            </div>
+        {/if}
+
+        {#if debug}
+            <pre class="debug">
+            {JSON.stringify(candidate, null, 4)}
+        </pre>
+            <pre>{valid}</pre>
+        {/if}
+    </Column>
+</Form>
+
+<style lang="scss">
+    .debug {
+        @include font(book, normal, fs-80);
+    }
+
+    .error {
+        :global(.error) {
+            margin-top: $sp3;
+        }
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/bots/BotAvatar.svelte b/frontend/app/src/mobile/features/bots/BotAvatar.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/bots/BotAvatar.svelte
rename to frontend/app/src/mobile/features/bots/BotAvatar.svelte
diff --git a/frontend/app/src/mobile/features/bots/BotBuilderModal.svelte b/frontend/app/src/mobile/features/bots/BotBuilderModal.svelte
new file mode 100644
index 0000000000..399503ea9a
--- /dev/null
+++ b/frontend/app/src/mobile/features/bots/BotBuilderModal.svelte
@@ -0,0 +1,181 @@
+<script lang="ts">
+    import { Column, CommonButton, Row } from "component-lib";
+    import {
+        currentUserIdStore,
+        emptyBotInstance,
+        OpenChat,
+        type ExternalBot,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
+    import FancyLoader from "@src/mobile/ui/icons/FancyLoader.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import BotBuilder from "./AutoBotBuilder.svelte";
+    import ChooseBot from "./ChooseBot.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        onClose: () => void;
+        mode: "register" | "update" | "remove";
+    }
+
+    let { onClose, mode = "register" }: Props = $props();
+
+    let principal = $state("");
+    let valid = $state(false);
+    let schemaLoaded = $state(false);
+    let busy = $state(false);
+    let step: "choose" | "edit" = $state(
+        mode === "update" || mode === "remove" ? "choose" : "edit",
+    );
+
+    let botState = $state({
+        original: emptyBotInstance($currentUserIdStore),
+        current: emptyBotInstance($currentUserIdStore),
+    });
+
+    let ownerDirty = $derived(botState.original.ownerId !== botState.current.ownerId);
+    let nameDirty = $derived(botState.original.name !== botState.current.name);
+    let avatarDirty = $derived(botState.original.avatarUrl !== botState.current.avatarUrl);
+    let endpointDirty = $derived(botState.original.endpoint !== botState.current.endpoint);
+    // let dirty = $derived(ownerDirty || nameDirty || avatarDirty || endpointDirty);
+
+    function register() {
+        if (botState.current !== undefined && valid) {
+            busy = true;
+            client
+                .registerBot(principal, botState.current)
+                .then((success) => {
+                    if (!success) {
+                        toastStore.showFailureToast(i18nKey("Unable to register bot"));
+                    } else {
+                        console.log("Bot registered");
+                        onClose();
+                    }
+                })
+                .finally(() => (busy = false));
+        }
+    }
+
+    function update() {
+        if (botState.current !== undefined && valid) {
+            busy = true;
+            const { id, ownerId, avatarUrl, endpoint, definition } = $state.snapshot(
+                botState.current,
+            );
+            client
+                .updateRegisteredBot(
+                    id,
+                    principal !== "" ? principal : undefined,
+                    ownerDirty ? ownerId : undefined,
+                    avatarDirty ? avatarUrl : undefined,
+                    endpointDirty ? endpoint : undefined,
+                    definition,
+                )
+                .then((success) => {
+                    if (!success) {
+                        toastStore.showFailureToast(i18nKey("Unable to register test bot"));
+                    } else {
+                        console.log("Bot registered");
+                        onClose();
+                    }
+                })
+                .finally(() => (busy = false));
+        }
+    }
+
+    function remove(id: string) {
+        busy = true;
+        client
+            .removeBot(id)
+            .then((success) => {
+                if (!success) {
+                    toastStore.showFailureToast(i18nKey("Unable to remove bot"));
+                } else {
+                    console.log("Bot removed");
+                    onClose();
+                }
+            })
+            .finally(() => (busy = false));
+    }
+
+    function selectBot(bot: ExternalBot) {
+        if (bot.ownerId === $currentUserIdStore) {
+            botState.original = bot;
+            botState.current = structuredClone(bot);
+            if (mode === "update") {
+                step = "edit";
+            } else if (mode === "remove") {
+                remove(bot.id);
+            }
+        }
+    }
+
+    let titleKey = $derived.by(() => {
+        switch (mode) {
+            case "register":
+                return i18nKey("bots.builder.title");
+            case "update":
+                return step === "choose"
+                    ? i18nKey("bots.update_bot.select")
+                    : i18nKey("bots.update_bot.title", { name: botState.current.name });
+            case "remove":
+                return i18nKey("bots.update_bot.remove");
+        }
+    });
+</script>
+
+<SlidingPageContent onBack={onClose} title={titleKey}>
+    <Column height={"fill"} gap={"xl"} padding={"xl"}>
+        {#if step === "choose"}
+            {#if !busy && (mode === "update" || mode === "remove")}
+                <ChooseBot ownedOnly onSelect={selectBot} />
+            {/if}
+            {#if mode === "remove" && busy}
+                <div class="loader">
+                    <FancyLoader />
+                </div>
+            {/if}
+        {:else if step === "edit" && botState.current !== undefined && mode !== "remove"}
+            <BotBuilder
+                {nameDirty}
+                {mode}
+                bind:candidate={botState.current}
+                bind:schemaLoaded
+                bind:valid
+                bind:principal />
+        {/if}
+
+        {#if step !== "choose"}
+            <Row crossAxisAlignment={"center"} mainAxisAlignment={"end"} gap={"md"}>
+                <CommonButton onClick={onClose} size={"small_text"}>
+                    <Translatable resourceKey={i18nKey("cancel")} />
+                </CommonButton>
+                {#if mode !== "remove"}
+                    <CommonButton
+                        mode={"active"}
+                        size={"medium"}
+                        onClick={mode === "update" ? update : register}
+                        disabled={!valid || busy}
+                        loading={busy}>
+                        <Translatable
+                            resourceKey={mode === "update"
+                                ? i18nKey("bots.update_bot.action")
+                                : i18nKey("bots.add.action")} />
+                    </CommonButton>
+                {/if}
+            </Row>
+        {/if}
+    </Column>
+</SlidingPageContent>
+
+<style lang="scss">
+    .loader {
+        width: toRem(50);
+        height: toRem(50);
+        margin: auto;
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/bots/BotCommands.svelte b/frontend/app/src/mobile/features/bots/BotCommands.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/bots/BotCommands.svelte
rename to frontend/app/src/mobile/features/bots/BotCommands.svelte
diff --git a/frontend/app/src/components_mobile/bots/BotDetailsPage.svelte b/frontend/app/src/mobile/features/bots/BotDetailsPage.svelte
similarity index 98%
rename from frontend/app/src/components_mobile/bots/BotDetailsPage.svelte
rename to frontend/app/src/mobile/features/bots/BotDetailsPage.svelte
index 5da190b605..b6bba3c119 100644
--- a/frontend/app/src/components_mobile/bots/BotDetailsPage.svelte
+++ b/frontend/app/src/mobile/features/bots/BotDetailsPage.svelte
@@ -44,10 +44,10 @@
     import DeleteOutline from "svelte-material-icons/DeleteOutline.svelte";
     import ForumOutline from "svelte-material-icons/ForumOutline.svelte";
     import ThumbUp from "svelte-material-icons/ThumbUpOutline.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import Bitcoin from "../icons/Bitcoin.svelte";
-    import MulticolourText from "../MulticolourText.svelte";
-    import Translatable from "../Translatable.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import Bitcoin from "@src/mobile/ui/icons/Bitcoin.svelte";
+    import MulticolourText from "@src/mobile/shared/MulticolourText.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
     import BotCommands from "./BotCommands.svelte";
     import BotsPermissionInfo from "./BotsPermissionInfo.svelte";
     import OwnedLocationSelector from "./OwnedLocationSelector.svelte";
diff --git a/frontend/app/src/mobile/features/bots/BotExplorer.svelte b/frontend/app/src/mobile/features/bots/BotExplorer.svelte
new file mode 100644
index 0000000000..20190bd656
--- /dev/null
+++ b/frontend/app/src/mobile/features/bots/BotExplorer.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+    import { interpolate } from "@src/i18n/i18n";
+    import { Search } from "component-lib";
+    import {
+        i18nKey,
+        type BotInstallationLocation,
+        type ExternalBotLike,
+        type OpenChat,
+    } from "@client";
+    import { getContext, onMount } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { botSearchState } from "@src/stores/search.svelte";
+    import BotCard from "@src/mobile/features/bots/exports/BotCard.svelte";
+
+    const client = getContext<OpenChat>("client");
+    const PAGE_SIZE = 50;
+
+    interface Props {
+        location?: BotInstallationLocation;
+        onSelect: (match: ExternalBotLike | undefined) => void;
+        fill?: boolean;
+        maxHeight?: string;
+        excludeInstalled?: boolean;
+    }
+
+    let { location, onSelect, maxHeight, excludeInstalled }: Props = $props();
+
+    function onSearchEntered(reset = false) {
+        if (reset) {
+            botSearchState.reset();
+        } else {
+            botSearchState.nextPage();
+        }
+        console.log("Search entered: ", botSearchState.term);
+        client
+            .exploreBots(
+                botSearchState.term === "" ? undefined : botSearchState.term,
+                botSearchState.index,
+                PAGE_SIZE,
+                location,
+                excludeInstalled ?? false,
+            )
+            .then((results) => {
+                console.log("Results: ", results);
+                if (results.kind === "success") {
+                    if (reset) {
+                        botSearchState.results = results.matches;
+                    } else {
+                        botSearchState.appendResults(results.matches);
+                    }
+                    botSearchState.total = results.total;
+                }
+            });
+    }
+
+    onMount(() => onSearchEntered(true));
+</script>
+
+<Search
+    onSearch={() => onSearchEntered(true)}
+    onClear={() => (botSearchState.term = "")}
+    searching={false}
+    bind:value={botSearchState.term}
+    placeholder={interpolate($_, i18nKey("search"))} />
+
+<div class="matches" style={maxHeight ? `max-height: ${maxHeight}` : ""}>
+    {#each botSearchState.results as match}
+        <BotCard onSelect={() => onSelect(match)} bot={match} />
+    {/each}
+</div>
+
+<style lang="scss">
+    .matches {
+        @include nice-scrollbar();
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/bots/BotMatch.svelte b/frontend/app/src/mobile/features/bots/BotMatch.svelte
similarity index 85%
rename from frontend/app/src/components_mobile/bots/BotMatch.svelte
rename to frontend/app/src/mobile/features/bots/BotMatch.svelte
index 3bb77fdca7..bac0e031d6 100644
--- a/frontend/app/src/components_mobile/bots/BotMatch.svelte
+++ b/frontend/app/src/mobile/features/bots/BotMatch.svelte
@@ -2,9 +2,9 @@
     import { BodySmall, Container, IconButton } from "component-lib";
     import { type ExternalBot } from "@shared";
     import ChevronRight from "svelte-material-icons/ChevronRight.svelte";
-    import FilteredUsername from "@shared_components/FilteredUsername.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import BotBadge from "../home/profile/BotBadge.svelte";
+    import FilteredUsername from "@src/ui/FilteredUsername.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import BotBadge from "@src/mobile/features/bots/exports/BotBadge.svelte";
     import BotAvatar from "./BotAvatar.svelte";
 
     interface Props {
diff --git a/frontend/app/src/mobile/features/bots/BotMember.svelte b/frontend/app/src/mobile/features/bots/BotMember.svelte
new file mode 100644
index 0000000000..f906cfabd4
--- /dev/null
+++ b/frontend/app/src/mobile/features/bots/BotMember.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+    import { toastStore } from "@src/stores/toast";
+    import { BodySmall, Container, IconButton, MenuItem, MenuTrigger } from "component-lib";
+    import { installationLocationFrom, OpenChat, type CommunitySummary } from "@client";
+    import {
+        publish,
+        type ChatSummary,
+        type ExternalBot,
+        type GrantedBotPermissions,
+    } from "@shared";
+    import { getContext } from "svelte";
+    import DeleteOutline from "svelte-material-icons/DeleteOutline.svelte";
+    import DotsVertical from "svelte-material-icons/DotsVertical.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import FilteredUsername from "@src/ui/FilteredUsername.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import BotBadge from "@src/mobile/features/bots/exports/BotBadge.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import BotAvatar from "./BotAvatar.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        collection: CommunitySummary | ChatSummary;
+        bot: ExternalBot;
+        canManage: boolean;
+        searchTerm?: string;
+        grantedPermissions: GrantedBotPermissions;
+    }
+
+    let { collection, bot, canManage, searchTerm, grantedPermissions }: Props = $props();
+
+    function removeBot() {
+        client.uninstallBot(installationLocationFrom(collection), bot.id).then((success) => {
+            if (!success) {
+                toastStore.showFailureToast(i18nKey("bots.manage.removeFailed"));
+            }
+        });
+    }
+</script>
+
+<Container
+    onClick={() => publish("showBot", { bot, collection, grantedPermissions })}
+    crossAxisAlignment={"start"}
+    gap={"md"}>
+    <BotAvatar size={"md"} {bot} />
+    <Container overflow={"hidden"} gap={"xxs"} direction={"vertical"} width={"fill"}>
+        <Container crossAxisAlignment={"center"} gap={"xs"}>
+            <FilteredUsername {searchTerm} username={bot.name} />
+            <BotBadge bot />
+        </Container>
+        <BodySmall width={"hug"} colour={"textSecondary"}>
+            <Markdown twoLine inline={false} suppressLinks text={bot.definition.description} />
+        </BodySmall>
+    </Container>
+    {#if canManage}
+        <MenuTrigger position={"bottom"} align={"end"}>
+            <IconButton padding={["sm", "xs", "sm", "zero"]} size={"md"}>
+                {#snippet icon(color)}
+                    <DotsVertical {color} />
+                {/snippet}
+            </IconButton>
+            {#snippet menuItems()}
+                <MenuItem onclick={() => removeBot()}>
+                    {#snippet icon(color, size)}
+                        <DeleteOutline {size} {color} />
+                    {/snippet}
+                    <Translatable resourceKey={i18nKey("bots.manage.remove")} />
+                </MenuItem>
+            {/snippet}
+        </MenuTrigger>
+    {/if}
+</Container>
diff --git a/frontend/app/src/mobile/features/bots/BotMessageContext.svelte b/frontend/app/src/mobile/features/bots/BotMessageContext.svelte
new file mode 100644
index 0000000000..a564ebc887
--- /dev/null
+++ b/frontend/app/src/mobile/features/bots/BotMessageContext.svelte
@@ -0,0 +1,129 @@
+<script lang="ts">
+    import { Avatar, Caption, ColourVars, Container, Tooltip } from "component-lib";
+    import { allUsersStore, OpenChat, type CommandArg } from "@client";
+    import type { BotContextCommand } from "@shared";
+    import { getContext } from "svelte";
+    import CogOutline from "svelte-material-icons/CogOutline.svelte";
+    import Typing from "@src/ui/Typing.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        botCommand: BotContextCommand;
+        botName: string;
+        finalised: boolean;
+    }
+
+    let { botCommand, finalised }: Props = $props();
+    const MAX_COMMAND_LENGTH = 30;
+    let paramValues = $derived(botCommand.args.map(paramValue));
+    let paramsLength = $derived(paramValues.reduce((total, p) => total + p.length, 0));
+    let paramMode: "truncated" | "full" = $derived(
+        paramsLength > MAX_COMMAND_LENGTH ? "truncated" : "full",
+    );
+    let text = $derived.by(() => {
+        if (paramMode === "truncated") {
+            return `@UserId(${botCommand.initiator}) used **/${botCommand.name}**${
+                botCommand.args.length > 0 ? " with " : ""
+            }`;
+        } else {
+            return `@UserId(${botCommand.initiator}) used **/${botCommand.name}**`;
+        }
+    });
+    let user = $derived($allUsersStore.get(botCommand.initiator));
+
+    function paramValue(param: CommandArg): string {
+        switch (param.kind) {
+            case "boolean":
+                return param.value?.toString() ?? "false";
+            case "integer":
+            case "decimal":
+                return param.value?.toString() ?? "null";
+            case "string":
+                return param.value ?? "null";
+            case "user":
+                return param.userId ? $allUsersStore.get(param.userId)?.username ?? "null" : "null";
+            case "dateTime":
+                return param.value
+                    ? client.toDatetimeString(new Date(Number(param.value)))
+                    : "null";
+        }
+    }
+</script>
+
+<Container crossAxisAlignment={"center"} gap={"xs"} supplementalClass={"bot-context"}>
+    {#if user}
+        <Avatar url={client.userAvatarUrl(user)} size={"xs"} />
+    {/if}
+    <Caption colour={"textSecondary"}>
+        <Markdown {text} />
+    </Caption>
+    {#if botCommand.args.length > 0}
+        {#if paramMode === "truncated"}
+            <Tooltip position="right" align="middle">
+                <div class="cog">
+                    <CogOutline color={ColourVars.textSecondary} />
+                </div>
+                {#snippet popup()}
+                    <div class="command-params">
+                        {#each botCommand.args as param}
+                            <div class="param">
+                                <div class="name">{param.name}:</div>
+                                <div class="value">{paramValue(param)}</div>
+                            </div>
+                        {/each}
+                    </div>
+                {/snippet}
+            </Tooltip>
+        {:else}
+            {#each paramValues as param}
+                <div class="inline-param">{param}</div>
+            {/each}
+        {/if}
+    {/if}
+    {#if !finalised}
+        <Typing />
+    {/if}
+</Container>
+
+<style lang="scss">
+    :global(.bot-context) {
+        :global(.markdown-wrapper) {
+            @include ellipsis();
+            flex-shrink: 0;
+        }
+
+        :global(.avatar.tiny) {
+            flex: 0 0 toRem(20);
+        }
+
+        .cog {
+            display: flex;
+        }
+    }
+
+    .inline-param {
+        padding: 0 $sp2;
+        border-radius: $sp2;
+        border: 1px solid var(--bd);
+        @include font(light, normal, fs-60);
+    }
+
+    :global(.command-params) {
+        word-wrap: unset;
+
+        .param {
+            display: flex;
+            align-items: start;
+            text-align: left;
+            gap: $sp2;
+            flex-wrap: nowrap;
+            flex-direction: column;
+
+            .value {
+                @include font(bold, normal, fs-50);
+            }
+        }
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/bots/BotPermissionViewer.svelte b/frontend/app/src/mobile/features/bots/BotPermissionViewer.svelte
new file mode 100644
index 0000000000..ad0aad47e1
--- /dev/null
+++ b/frontend/app/src/mobile/features/bots/BotPermissionViewer.svelte
@@ -0,0 +1,90 @@
+<script lang="ts">
+    import { Body, Column, Row } from "component-lib";
+    import {
+        botChatPermissionList,
+        botCommunityPermissionList,
+        type ExternalBotPermissions,
+        messagePermissionsList,
+        type ResourceKey,
+    } from "@client";
+    import Check from "svelte-material-icons/Check.svelte";
+    import Minus from "svelte-material-icons/Minus.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Tabs from "./Tabs.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    interface Props {
+        permissions: ExternalBotPermissions;
+        title?: ResourceKey;
+        nested?: boolean;
+    }
+
+    let { permissions, title, nested = false }: Props = $props();
+</script>
+
+{#snippet check(label: ResourceKey, requested: boolean)}
+    <Row crossAxisAlignment={"center"} gap={"sm"}>
+        {#if requested}
+            <Check size={"1em"} color={"var(--success)"} />
+        {:else}
+            <Minus size={"1em"} color={"var(--txt-light)"} />
+        {/if}
+        <Body colour={requested ? "textPrimary" : "textSecondary"}>
+            <Translatable resourceKey={label}></Translatable>
+        </Body>
+    </Row>
+{/snippet}
+
+{#snippet chatTab()}
+    <Column gap={"sm"}>
+        {#each botChatPermissionList as perm}
+            {@render check(
+                i18nKey(`permissions.${perm}`),
+                permissions.chatPermissions.includes(perm),
+            )}
+        {/each}
+    </Column>
+{/snippet}
+{#snippet communityTab()}
+    <Column gap={"sm"}>
+        {#each botCommunityPermissionList as perm}
+            {@render check(
+                i18nKey(`permissions.${perm}`),
+                permissions.communityPermissions.includes(perm),
+            )}
+        {/each}
+    </Column>
+{/snippet}
+{#snippet messageTab()}
+    <Column gap={"sm"}>
+        {#each messagePermissionsList as perm}
+            {@render check(
+                i18nKey(`permissions.messagePermissions.${perm}`),
+                permissions.messagePermissions.includes(perm),
+            )}
+        {/each}
+    </Column>
+{/snippet}
+
+{#if title !== undefined}
+    <Body fontWeight={"bold"}>
+        <Translatable resourceKey={title} />
+    </Body>
+{/if}
+<Tabs
+    {nested}
+    initialIndex={2}
+    tabs={[
+        {
+            title: i18nKey("bots.builder.permScopeCommunity"),
+            snippet: communityTab,
+        },
+        {
+            title: i18nKey("bots.builder.permScopeChat"),
+            snippet: chatTab,
+        },
+        {
+            title: i18nKey("bots.builder.permScopeMessage"),
+            snippet: messageTab,
+        },
+    ]}></Tabs>
diff --git a/frontend/app/src/components_mobile/bots/BotProfile.svelte b/frontend/app/src/mobile/features/bots/BotProfile.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/bots/BotProfile.svelte
rename to frontend/app/src/mobile/features/bots/BotProfile.svelte
diff --git a/frontend/app/src/mobile/features/bots/BotPublisher.svelte b/frontend/app/src/mobile/features/bots/BotPublisher.svelte
new file mode 100644
index 0000000000..ed490524e7
--- /dev/null
+++ b/frontend/app/src/mobile/features/bots/BotPublisher.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+    import { Body, Column } from "component-lib";
+    import { i18nKey, type ExternalBot } from "@client";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import ChooseBot from "./ChooseBot.svelte";
+    import BotProperties from "@src/mobile/features/bots/install/BotProperties.svelte";
+
+    interface Props {
+        selected: ExternalBot | undefined;
+    }
+
+    let { selected = $bindable() }: Props = $props();
+
+    function select(bot: ExternalBot) {
+        selected = bot;
+    }
+</script>
+
+{#if selected === undefined}
+    <Column padding={["zero", "md"]} gap={"lg"}>
+        <Body>
+            <Translatable resourceKey={i18nKey("proposal.maker.chooseBot")} />
+        </Body>
+        <ChooseBot ownedOnly onSelect={select} />
+    </Column>
+{:else}
+    <BotProperties padded bot={selected} installing={false}></BotProperties>
+{/if}
diff --git a/frontend/app/src/components_mobile/bots/BotsPermissionInfo.svelte b/frontend/app/src/mobile/features/bots/BotsPermissionInfo.svelte
similarity index 93%
rename from frontend/app/src/components_mobile/bots/BotsPermissionInfo.svelte
rename to frontend/app/src/mobile/features/bots/BotsPermissionInfo.svelte
index 2d35d12d67..8ea44f8ddf 100644
--- a/frontend/app/src/components_mobile/bots/BotsPermissionInfo.svelte
+++ b/frontend/app/src/mobile/features/bots/BotsPermissionInfo.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { i18nKey } from "@src/i18n/i18n";
     import { Body, CommonButton, Container } from "component-lib";
-    import Translatable from "../Translatable.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
 </script>
 
 <Container padding={["zero", "md"]} direction={"vertical"} gap={"sm"}>
diff --git a/frontend/app/src/mobile/features/bots/ChooseBot.svelte b/frontend/app/src/mobile/features/bots/ChooseBot.svelte
new file mode 100644
index 0000000000..454326ed5a
--- /dev/null
+++ b/frontend/app/src/mobile/features/bots/ChooseBot.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+    import { ColourVars, Column, StatusCard } from "component-lib";
+    import { botState, currentUserIdStore, type ExternalBot } from "@client";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import BotMatch from "./BotMatch.svelte";
+
+    interface Props {
+        onSelect: (bot: ExternalBot) => void;
+        ownedOnly: boolean;
+    }
+
+    let { onSelect, ownedOnly }: Props = $props();
+
+    let bots = $derived(
+        ownedOnly
+            ? [...botState.externalBots.values()].filter((b) => b.ownerId === $currentUserIdStore)
+            : [...botState.externalBots.values()],
+    );
+</script>
+
+{#if bots.length === 0}
+    <StatusCard borderColour={ColourVars.warning} mode={"warning"} title={"No bots available"}>
+        {#snippet body()}
+            <Translatable resourceKey={i18nKey("bots.update_bot.nobots")}></Translatable>
+        {/snippet}
+    </StatusCard>
+{:else}
+    <Column maxHeight={"30rem"} gap={"md"}>
+        {#each bots as bot}
+            <BotMatch {bot} {onSelect} />
+        {/each}
+    </Column>
+{/if}
diff --git a/frontend/app/src/mobile/features/bots/CommandArg.svelte b/frontend/app/src/mobile/features/bots/CommandArg.svelte
new file mode 100644
index 0000000000..182077da10
--- /dev/null
+++ b/frontend/app/src/mobile/features/bots/CommandArg.svelte
@@ -0,0 +1,182 @@
+<script lang="ts">
+    import { Column, Input, Option, Select, TextArea } from "component-lib";
+    import type { CommandArg, CommandParam } from "@client";
+    import { _ } from "svelte-i18n";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import DateInput from "./DateInput.svelte";
+    import SingleUserSelector from "@src/mobile/shared/SingleUserSelector.svelte";
+    import IntegerInput from "./IntegerInput.svelte";
+    import Legend from "@src/mobile/shared/Legend.svelte";
+    import NumberInput from "./NumberInput.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    interface Props {
+        param: CommandParam;
+        arg: CommandArg;
+    }
+
+    let { param, arg = $bindable() }: Props = $props();
+</script>
+
+<div class="param">
+    {#snippet subtext()}
+        <Translatable resourceKey={i18nKey(param.name)} />
+        {#if param.required}
+            <Translatable resourceKey={i18nKey("(required)")} />
+        {/if}
+    {/snippet}
+
+    {#if arg.kind === "user" && param.kind === "user"}
+        <SingleUserSelector
+            onUserSelected={(user) => {
+                arg.userId = user.userId;
+            }}
+            placeholder={$_(param.placeholder ?? "")} />
+    {:else if arg.kind === "string" && param.kind === "string"}
+        {#if param.choices?.length ?? 0 > 0}
+            <Select
+                {subtext}
+                value={arg.value}
+                placeholder={interpolate(
+                    $_,
+                    i18nKey("bots.builder.chooseOption", {
+                        option: interpolate($_, i18nKey(param.name)),
+                    }),
+                )}
+                onSelect={(val) => (arg.value = val)}>
+                {#snippet selectedValue(val)}
+                    {#if val === ""}
+                        <Translatable
+                            resourceKey={i18nKey("bots.builder.chooseOption", {
+                                option: interpolate($_, i18nKey(param.name)),
+                            })} />
+                    {:else}
+                        {val}
+                    {/if}
+                {/snippet}
+                {#snippet selectOptions(onSelect)}
+                    <Column padding={"lg"}>
+                        {#each param.choices as choice}
+                            <Option
+                                value={choice.value}
+                                onClick={onSelect}
+                                selected={choice.value === arg.value}>
+                                <Translatable resourceKey={i18nKey(choice.name)} />
+                            </Option>
+                        {/each}
+                    </Column>
+                {/snippet}
+            </Select>
+        {:else if param.multi_line}
+            <TextArea
+                {subtext}
+                rows={2}
+                placeholder={interpolate($_, i18nKey(param.placeholder ?? ""))}
+                minlength={param.minLength}
+                maxlength={param.maxLength}
+                bind:value={arg.value}>
+            </TextArea>
+        {:else}
+            <Input
+                {subtext}
+                minlength={param.minLength}
+                maxlength={param.maxLength}
+                placeholder={interpolate($_, i18nKey(param.placeholder ?? ""))}
+                countdown
+                bind:value={arg.value}>
+            </Input>
+        {/if}
+    {:else if arg.kind === "boolean" && param.kind === "boolean"}
+        <Select
+            {subtext}
+            value={arg.value}
+            placeholder={`Choose ${$_(param.name)}`}
+            onSelect={(val) => (arg.value = val)}>
+            {#snippet selectedValue(val)}
+                {#if val}
+                    True
+                {:else}
+                    False
+                {/if}
+            {/snippet}
+            {#snippet selectOptions(onSelect)}
+                <Column padding={"lg"}>
+                    <Option value={true} onClick={onSelect} selected={true === arg.value}>
+                        <Translatable resourceKey={i18nKey("true")} />
+                    </Option>
+                    <Option value={false} onClick={onSelect} selected={false === arg.value}>
+                        <Translatable resourceKey={i18nKey("false")} />
+                    </Option>
+                </Column>
+            {/snippet}
+        </Select>
+    {:else if (arg.kind === "integer" && param.kind === "integer") || (arg.kind === "decimal" && param.kind === "decimal")}
+        {#if param.choices?.length ?? 0 > 0}
+            <Select
+                {subtext}
+                value={arg.value}
+                placeholder={`Choose ${$_(param.name)}`}
+                onSelect={(val) => (arg.value = val)}>
+                {#snippet selectedValue(val)}
+                    {#if val == null}
+                        <Translatable
+                            resourceKey={i18nKey("bots.builder.chooseOption", {
+                                option: interpolate($_, i18nKey(param.name)),
+                            })} />
+                    {:else}
+                        {val}
+                    {/if}
+                {/snippet}
+                {#snippet selectOptions(onSelect)}
+                    <Column padding={"lg"}>
+                        {#each param.choices as choice}
+                            <Option
+                                value={choice.value}
+                                onClick={onSelect}
+                                selected={choice.value === arg.value}>
+                                <Translatable resourceKey={i18nKey(choice.name)} />
+                            </Option>
+                        {/each}
+                    </Column>
+                {/snippet}
+            </Select>
+        {:else if arg.kind === "integer" && param.kind === "integer"}
+            <IntegerInput
+                {subtext}
+                min={param.minValue}
+                max={param.maxValue}
+                shouldClamp={false}
+                placeholder={i18nKey(param.placeholder ?? "")}
+                bind:value={arg.value} />
+        {:else if arg.kind === "decimal" && param.kind === "decimal"}
+            <NumberInput
+                {subtext}
+                min={param.minValue}
+                max={param.maxValue}
+                shouldClamp={false}
+                placeholder={i18nKey(param.placeholder ?? "")}
+                bind:value={arg.value}>
+            </NumberInput>
+        {/if}
+    {:else if arg.kind === "dateTime" && param.kind === "dateTime"}
+        <Legend label={i18nKey(param.name)} required={param.required} />
+        <DateInput
+            value={arg.value}
+            futureOnly={param.future_only}
+            placeholder={i18nKey(param.placeholder ?? "")}
+            onchange={(value) => {
+                arg.value = value;
+            }} />
+    {/if}
+</div>
+
+<style lang="scss">
+    .param {
+        margin-top: $sp3;
+    }
+
+    .param:not(:last-child) {
+        /* Gives a bit more spacing between param inputs */
+        margin-bottom: $sp4;
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/bots/CommandInstanceBuilder.svelte b/frontend/app/src/mobile/features/bots/CommandInstanceBuilder.svelte
new file mode 100644
index 0000000000..1b06ba482d
--- /dev/null
+++ b/frontend/app/src/mobile/features/bots/CommandInstanceBuilder.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+    import { BodySmall, Button, Column, Form, Sheet, Subtitle } from "component-lib";
+    import { botState, OpenChat } from "@client";
+    import { random64, type FlattenedCommand, type MessageContext } from "@shared";
+    import { getContext } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import CommandArg from "./CommandArg.svelte";
+
+    interface Props {
+        command: FlattenedCommand;
+        onCancel: () => void;
+        onCommandSent: () => void;
+        messageContext: MessageContext;
+    }
+
+    const client = getContext<OpenChat>("client");
+    let { command, onCancel, onCommandSent, messageContext }: Props = $props();
+    let commandName = $derived(`/${command.name}`);
+    let busy = $state(false);
+
+    function onSubmit(e: Event) {
+        e.preventDefault();
+
+        if (!botState.instanceValid) return;
+        busy = true;
+        client
+            .executeBotCommand(
+                {
+                    kind: "chat_scope",
+                    chatId: messageContext.chatId,
+                    threadRootMessageIndex: messageContext.threadRootMessageIndex,
+                    messageId: random64(),
+                },
+                botState.createBotInstance(command),
+            )
+            .then((result) => {
+                if (result === "failure") {
+                    toastStore.showFailureToast(i18nKey("bots.failed"));
+                } else if (result === "too_many_requests") {
+                    toastStore.showFailureToast(i18nKey("bots.tooManyRequests"));
+                }
+            });
+        onCommandSent();
+    }
+</script>
+
+<Sheet onDismiss={onCancel}>
+    <Column overflow={"visible"} gap={"lg"} padding={"lg"}>
+        <Subtitle fontWeight={"bold"}>
+            {commandName}
+        </Subtitle>
+        <Form {onSubmit}>
+            {#if command.description}
+                <BodySmall>
+                    <Translatable resourceKey={i18nKey(command.description)} />
+                </BodySmall>
+            {/if}
+            {#if botState.selectedCommandArgs.length === command?.params?.length}
+                {#each command?.params ?? [] as param, i}
+                    <CommandArg arg={botState.selectedCommandArgs[i]} {param} />
+                {/each}
+            {/if}
+        </Form>
+        <Button disabled={!botState.instanceValid || busy} loading={busy} onClick={onSubmit}>
+            <Translatable resourceKey={i18nKey("Submit")} />
+        </Button>
+    </Column>
+</Sheet>
diff --git a/frontend/app/src/mobile/features/bots/CommandParameterViewer.svelte b/frontend/app/src/mobile/features/bots/CommandParameterViewer.svelte
new file mode 100644
index 0000000000..13f7fc721d
--- /dev/null
+++ b/frontend/app/src/mobile/features/bots/CommandParameterViewer.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+    import { Body, BodySmall, Column, Row, Sheet } from "component-lib";
+    import { type CommandParam } from "@client";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    interface Props {
+        param: CommandParam;
+        onClose: () => void;
+    }
+
+    let { param, onClose }: Props = $props();
+</script>
+
+{#snippet field(title: string, value: string)}
+    <Column>
+        <Body fontWeight={"bold"}>
+            <Translatable resourceKey={i18nKey(title)} />
+        </Body>
+
+        <BodySmall colour={"textSecondary"}>
+            <Translatable resourceKey={i18nKey(value)} />
+        </BodySmall>
+    </Column>
+{/snippet}
+
+<Sheet onDismiss={onClose}>
+    <Column gap={"xl"} padding={"xl"}>
+        {@render field("bots.builder.paramNameLabel", param.name)}
+        {#if param.description}
+            {@render field("bots.builder.paramDescLabel", param.description)}
+        {/if}
+        {@render field("bots.builder.paramTypeLabel", param.kind)}
+        {@render field("bots.builder.required", param.required.toString())}
+        {#if param.placeholder}
+            {@render field("bots.builder.paramDescLabel", param.placeholder)}
+        {/if}
+        {#if param.kind === "string"}
+            <Row>
+                {@render field("bots.builder.minLengthLabel", param.minLength.toString())}
+                {@render field("bots.builder.maxLengthLabel", param.maxLength.toString())}
+            </Row>
+        {:else if param.kind === "integer" || param.kind === "decimal"}
+            <Row>
+                {@render field("bots.builder.minValueLabel", param.minValue.toString())}
+                {@render field("bots.builder.maxValueLabel", param.maxValue.toString())}
+            </Row>
+        {:else if param.kind === "dateTime"}
+            {@render field("bots.builder.dateTimeFutureOnly", param.future_only.toString())}
+        {/if}
+
+        {#if (param.kind === "string" || param.kind === "integer" || param.kind === "decimal") && param.choices.length > 0}
+            {@render field("bots.builder.choices", "bots.builder.choicesInfo")}
+            <Column>
+                <Body fontWeight={"bold"}>
+                    <Translatable resourceKey={i18nKey("Possible values")} />
+                </Body>
+
+                {#each param.choices as choice}
+                    <BodySmall colour={"textSecondary"}>
+                        <Translatable resourceKey={i18nKey(choice.name)} />
+                    </BodySmall>
+                {/each}
+            </Column>
+        {/if}
+    </Column>
+</Sheet>
diff --git a/frontend/app/src/mobile/features/bots/CommandSelector.svelte b/frontend/app/src/mobile/features/bots/CommandSelector.svelte
new file mode 100644
index 0000000000..14726b9aac
--- /dev/null
+++ b/frontend/app/src/mobile/features/bots/CommandSelector.svelte
@@ -0,0 +1,304 @@
+<script lang="ts">
+    import {
+        Body,
+        BodySmall,
+        ColourVars,
+        Container,
+        IconButton,
+        Subtitle,
+        Tooltip,
+    } from "component-lib";
+    import type {
+        ChatPermissions,
+        ChatSummary,
+        GrantedBotPermissions,
+        MessageContext,
+        OpenChat,
+        PermissionRole,
+        ReadonlyMap,
+    } from "@client";
+    import {
+        botState,
+        directChatBotsStore,
+        isPermitted,
+        messagePermissionsForSelectedChatStore,
+        selectedChatBotsStore,
+        selectedChatSummaryStore,
+        selectedCommunityBotsStore,
+        threadPermissionsForSelectedChatStore,
+    } from "@client";
+    import { hasEveryRequiredPermission, random64, type FlattenedCommand } from "@shared";
+    import { getContext, onMount } from "svelte";
+    import Close from "svelte-material-icons/Close.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import ErrorMessage from "@src/mobile/shared/ErrorMessage.svelte";
+    import Logo from "@src/ui/Logo.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import BotAvatar from "./BotAvatar.svelte";
+
+    interface Props {
+        selectedBotId?: string; // this will be the botId if we are in a direct chat with a bot
+        onCancel: () => void;
+        onNoMatches: () => void;
+        onCommandSent: () => void;
+        mode: "thread" | "message";
+        messageContext: MessageContext;
+    }
+
+    const client = getContext<OpenChat>("client");
+
+    let { onCancel, onNoMatches, onCommandSent, mode, messageContext, selectedBotId }: Props =
+        $props();
+
+    let installedBots = $derived.by(() => {
+        switch (messageContext.chatId.kind) {
+            case "channel":
+                return $selectedCommunityBotsStore;
+            case "direct_chat":
+                return $directChatBotsStore;
+            default:
+                return $selectedChatBotsStore;
+        }
+    });
+
+    let commands = $derived.by(() => {
+        return botState.commands.filter((c) => {
+            return (
+                restrictByBotIfNecessary(c) &&
+                restrictByChatIfNecessary(c) &&
+                hasPermissionForCommand(c, installedBots, $selectedChatSummaryStore)
+            );
+        });
+    });
+
+    function restrictByBotIfNecessary(command: FlattenedCommand): boolean {
+        return (
+            selectedBotId === undefined ||
+            (command.kind === "external_bot" && command.botId === selectedBotId) ||
+            (command.kind === "internal_bot" && command.directBotDisabled === false)
+        );
+    }
+
+    function restrictByChatIfNecessary(command: FlattenedCommand): boolean {
+        return !(
+            messageContext.chatId.kind === "direct_chat" && command.directChatsDisabled === true
+        );
+    }
+
+    function userHasPermissionForCommand(
+        command: FlattenedCommand,
+        chat: ChatSummary | undefined,
+    ): boolean {
+        const chatRolePermitted =
+            chat !== undefined && chat.kind !== "direct_chat"
+                ? isPermitted(chat.membership.role, command.defaultRole)
+                : true;
+
+        const chatPermitted =
+            chat !== undefined && chat.kind !== "direct_chat"
+                ? [...command.permissions.chatPermissions].every(
+                      (p) =>
+                          ["readMessages", "readMembership", "readChatSummary"].includes(p) ||
+                          isPermitted(
+                              chat.membership.role,
+                              chat.permissions[p as keyof ChatPermissions] as PermissionRole,
+                          ),
+                  )
+                : true;
+
+        switch (mode) {
+            case "message":
+                return (
+                    chatRolePermitted &&
+                    chatPermitted &&
+                    [...command.permissions.messagePermissions].every((p) =>
+                        $messagePermissionsForSelectedChatStore.has(p),
+                    )
+                );
+            case "thread":
+                return (
+                    chatRolePermitted &&
+                    chatPermitted &&
+                    [...command.permissions.messagePermissions].every((p) =>
+                        $threadPermissionsForSelectedChatStore.has(p),
+                    )
+                );
+        }
+    }
+
+    function hasPermissionForCommand(
+        command: FlattenedCommand,
+        installedBots: ReadonlyMap<string, GrantedBotPermissions>,
+        chat: ChatSummary | undefined,
+    ): boolean {
+        const userPermission = userHasPermissionForCommand(command, chat);
+        if (command.kind === "external_bot") {
+            // for an external bot we also need to know that the bot has been granted all the permissions it requires
+            const granted = installedBots.get(command.botId);
+            const required = command.permissions;
+            return (
+                userPermission &&
+                granted !== undefined &&
+                hasEveryRequiredPermission(required, granted.command)
+            );
+        } else {
+            return userPermission;
+        }
+    }
+
+    function selectCommand(command: FlattenedCommand) {
+        botState.setSelectedCommand(messageContext, commands, command);
+        sendCommandIfValid();
+    }
+
+    function sendCommandIfValid() {
+        if (botState.selectedCommand && botState.instanceValid && $selectedChatSummaryStore) {
+            client
+                .executeBotCommand(
+                    {
+                        kind: "chat_scope",
+                        chatId: messageContext.chatId,
+                        threadRootMessageIndex: messageContext.threadRootMessageIndex,
+                        messageId: random64(),
+                    },
+                    botState.createBotInstance(botState.selectedCommand),
+                )
+                .then((result) => {
+                    if (result === "failure") {
+                        toastStore.showFailureToast(i18nKey("bots.failed"));
+                    } else if (result === "too_many_requests") {
+                        toastStore.showFailureToast(i18nKey("bots.tooManyRequests"));
+                    }
+                });
+            onCommandSent();
+        }
+    }
+
+    onMount(() => {
+        botState.error = undefined;
+        document.addEventListener("keydown", onkeydown);
+        return () => {
+            document.removeEventListener("keydown", onkeydown);
+        };
+    });
+
+    $effect(() => {
+        if (commands.length === 0) {
+            onNoMatches();
+        }
+    });
+
+    function onkeydown(ev: KeyboardEvent): void {
+        switch (ev.key) {
+            case "ArrowDown":
+                botState.focusPreviousCommand();
+                break;
+            case "ArrowUp":
+                botState.focusNextCommand();
+                break;
+            case "Enter":
+                if (!botState.showingBuilder) {
+                    botState.setSelectedCommand(messageContext, commands);
+                    sendCommandIfValid();
+                    ev.preventDefault();
+                }
+                break;
+            case "Escape":
+                onCancel();
+                break;
+        }
+    }
+</script>
+
+<Container
+    background={ColourVars.background1}
+    padding={["sm", "lg"]}
+    mainAxisAlignment={"spaceBetween"}
+    crossAxisAlignment={"center"}>
+    <Subtitle>
+        <Translatable resourceKey={i18nKey("bots.matchingCommands")} />
+    </Subtitle>
+    <IconButton onclick={onCancel} size={"sm"}>
+        {#snippet icon(color)}
+            <Close {color} />
+        {/snippet}
+    </IconButton>
+</Container>
+<Container maxHeight={"calc(var(--vh, 1vh) * 50)"} direction={"vertical"}>
+    {#each commands as command}
+        <Container
+            padding={"sm"}
+            crossAxisAlignment={"center"}
+            mainAxisAlignment={"spaceBetween"}
+            gap={"sm"}
+            onClick={() => selectCommand(command)}>
+            <Container maxWidth={"3rem"} maxHeight={"3rem"} width={"hug"}>
+                {#if command.kind === "external_bot"}
+                    <BotAvatar bot={command} />
+                {:else}
+                    <Logo />
+                {/if}
+            </Container>
+            <Container direction={"vertical"}>
+                <Container crossAxisAlignment={"center"} gap={"sm"}>
+                    <Body fontWeight={"bold"} width={"hug"}>
+                        /{command.name}
+                    </Body>
+                    {#each command?.params ?? [] as param}
+                        <Tooltip position={"top"} align={"middle"}>
+                            <div class="param" class:required={param.required}>
+                                <BodySmall>
+                                    <Translatable resourceKey={i18nKey(param.name)} />
+                                </BodySmall>
+                            </div>
+                            {#snippet popup()}
+                                <Translatable resourceKey={i18nKey(param.description ?? "")} />
+                            {/snippet}
+                        </Tooltip>
+                    {/each}
+                </Container>
+                <Container>
+                    <div class="interface"></div>
+                    {#if command.description}
+                        <Body ellipsisTruncate width={"hug"} colour={"textSecondary"}>
+                            <Translatable resourceKey={i18nKey(command.description)} />
+                        </Body>
+                    {/if}
+                </Container>
+            </Container>
+            <BodySmall width={"hug"} colour={"textSecondary"}>
+                <Translatable resourceKey={i18nKey(command.botName)} />
+            </BodySmall>
+        </Container>
+    {/each}
+</Container>
+
+{#if botState.error !== undefined}
+    <div class="command-error">
+        <ErrorMessage>
+            {botState.error}
+        </ErrorMessage>
+    </div>
+{/if}
+
+<style lang="scss">
+    .command-error {
+        :global(h4) {
+            margin-bottom: 0;
+        }
+    }
+
+    .param {
+        border: 1px solid var(--primary);
+        padding: var(--sp-xxs) var(--sp-sm);
+        border-radius: var(--rad-sm);
+        line-height: 18px;
+
+        &.required {
+            background: var(--gradient-inverted);
+            color: var(--text-on-primary);
+            border: none;
+        }
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/bots/CommandViewer.svelte b/frontend/app/src/mobile/features/bots/CommandViewer.svelte
new file mode 100644
index 0000000000..07f2904348
--- /dev/null
+++ b/frontend/app/src/mobile/features/bots/CommandViewer.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+    import { Body, BodySmall, Chip, Column, Row } from "component-lib";
+    import { type CommandDefinition, type CommandParam } from "@client";
+    import { i18nKey } from "@src/i18n/i18n";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import BotPermissionViewer from "./BotPermissionViewer.svelte";
+    import CommandParameterViewer from "./CommandParameterViewer.svelte";
+
+    interface Props {
+        command: CommandDefinition;
+        onClose: () => void;
+    }
+
+    let { command, onClose }: Props = $props();
+
+    let selectedParam = $state<CommandParam | undefined>(undefined);
+
+    function onSelectParam(param: CommandParam) {
+        selectedParam = param;
+    }
+</script>
+
+{#if selectedParam !== undefined}
+    <CommandParameterViewer onClose={() => (selectedParam = undefined)} param={selectedParam}
+    ></CommandParameterViewer>
+{/if}
+
+{#snippet field(title: string, value: string)}
+    <Column>
+        <Body fontWeight={"bold"}>
+            <Translatable resourceKey={i18nKey(title)} />
+        </Body>
+
+        <BodySmall colour={"textSecondary"}>
+            {value}
+        </BodySmall>
+    </Column>
+{/snippet}
+
+<SlidingPageContent
+    title={i18nKey("Command details")}
+    subtitle={i18nKey(`/${command.name}`)}
+    onBack={onClose}>
+    <Column gap={"xl"} padding={"xl"}>
+        {#if command.description}
+            {@render field("bots.builder.commandDescLabel", command.description ?? "")}
+        {/if}
+
+        {#if command.placeholder}
+            {@render field("bots.builder.commandPlaceholderLabel", command.placeholder ?? "")}
+        {/if}
+
+        <Column gap={"sm"}>
+            <BotPermissionViewer
+                title={i18nKey("bots.builder.commandPermissionsLabel")}
+                permissions={command.permissions} />
+        </Column>
+
+        {#if command.params.length > 0}
+            <Column gap={"sm"}>
+                <Body fontWeight={"bold"}>
+                    <Translatable resourceKey={i18nKey("bots.builder.paramsLabel")} />
+                </Body>
+                <Row crossAxisAlignment={"center"} wrap gap={"sm"}>
+                    {#each command.params as param}
+                        <Chip mode={"filter"} onClick={() => onSelectParam(param)}>
+                            <Translatable resourceKey={i18nKey(param.name)}></Translatable>
+                        </Chip>
+                    {/each}
+                </Row>
+            </Column>
+        {/if}
+    </Column>
+</SlidingPageContent>
diff --git a/frontend/app/src/mobile/features/bots/DateInput.svelte b/frontend/app/src/mobile/features/bots/DateInput.svelte
new file mode 100644
index 0000000000..b1871f7e31
--- /dev/null
+++ b/frontend/app/src/mobile/features/bots/DateInput.svelte
@@ -0,0 +1,182 @@
+<script module lang="ts">
+    export interface Props {
+        align?: string;
+        disabled?: boolean;
+        endDate?: string | Date;
+        format?: string;
+        futureOnly?: boolean;
+        inputId?: string;
+        inputClasses?: string;
+        mode?: "date" | "time" | "datetime";
+        pickerOnly?: boolean;
+        placeholder?: ResourceKey | undefined;
+        required?: boolean;
+        startDate?: string | Date;
+        value?: bigint | null | undefined;
+        onchange?: (val: bigint | null) => void;
+    }
+</script>
+
+<script lang="ts">
+    // TODO i18n localisation for the date picker!
+
+    import { Tooltip } from "component-lib";
+    import type { ResourceKey } from "@client";
+    import { onMount } from "svelte";
+    import { _ } from "svelte-i18n";
+    import Information from "svelte-material-icons/Information.svelte";
+    import SveltyPicker from "svelty-picker";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    let {
+        align = "left",
+        disabled = false,
+        endDate = undefined,
+        format = "dd M yyyy, hh:ii",
+        futureOnly = false,
+        inputId = undefined,
+        inputClasses = "",
+        mode = "datetime",
+        pickerOnly = false,
+        placeholder = undefined,
+        required = false,
+        startDate = undefined,
+        value = undefined,
+        onchange = undefined,
+    }: Props = $props();
+
+    let dateIsValid = $state(true);
+
+    // Initialise local date from the provided value on component mount
+    let localDate: string | undefined = $state(undefined);
+    onMount(() => {
+        if (typeof value === "number") {
+            localDate = new Date(Number(value)).toISOString();
+        }
+    });
+</script>
+
+<div class={`input-wrapper date-time ${align} ${!dateIsValid ? "error" : ""}`}>
+    <SveltyPicker
+        value={localDate}
+        {disabled}
+        {endDate}
+        {format}
+        {inputId}
+        inputClasses={`date-time ${inputClasses}`}
+        {mode}
+        {pickerOnly}
+        placeholder={placeholder !== undefined ? interpolate($_, placeholder) : ""}
+        {required}
+        {startDate}
+        onDateChange={({ dateValue }) => {
+            if (futureOnly && dateValue instanceof Date && dateValue < new Date()) {
+                dateIsValid = false;
+            } else {
+                dateIsValid = true;
+            }
+            dateValue instanceof Date ? onchange?.(BigInt(dateValue.getTime())) : onchange?.(null);
+        }} />
+    {#if !dateIsValid}
+        <div class="error-icon">
+            <Tooltip position={"top"} align={"middle"}>
+                <div class="param" class:required>
+                    <Information width="1.25rem" height="1.25rem" />
+                </div>
+                {#snippet popup()}
+                    <Translatable resourceKey={i18nKey("mustBeFutureDateError")} />
+                {/snippet}
+            </Tooltip>
+        </div>
+    {/if}
+</div>
+
+<style lang="scss">
+    .input-wrapper {
+        position: relative;
+        margin-bottom: $sp3;
+
+        :global(.sdt-component-wrap),
+        :global(.sdt-input-wrap) {
+            width: 100%;
+        }
+
+        :global(.sdt-tick) {
+            background-color: transparent;
+        }
+
+        :global(input[name="date_input"]) {
+            @include input();
+            width: 100%;
+
+            &::placeholder {
+                color: var(--placeholder);
+            }
+        }
+
+        &.error {
+            :global(input[name="date_input"]) {
+                box-shadow: 0 0 0 1px var(--error);
+            }
+        }
+
+        .error-icon {
+            position: absolute;
+            right: $sp3;
+            width: 1.25rem;
+            height: 1.25rem;
+            top: 50%;
+            transform: translateY(-50%);
+
+            :global(svg > path) {
+                fill: var(--error);
+            }
+        }
+    }
+
+    :global(body) {
+        /* general */
+        --sdt-bg-main: var(--bd);
+        --sdt-shadow-color: var(--bg);
+        --sdt-wrap-shadow: 0 1px 6px var(--sdt-shadow-color); /** wrap shadow settings */
+        --sdt-radius: 4px; /** wrap radius */
+        --sdt-color: var(--txt);
+        --sdt-color-selected: var(--txt); /** selected data(e.g date/time) text color */
+        --sdt-header-color: var(--txt); /** header items color (e.g. text & buttons) */
+        --sdt-header-btn-bg-hover: transparent; /** header items hover background color */
+        --sdt-bg-selected: var(--primary);
+
+        /* date picker */
+        --sdt-table-selected-bg: var(--sdt-bg-selected); /** selected date background color */
+        --sdt-table-disabled-date: var(--unread-mute-txt); /** disabled dates text color */
+        --sdt-table-disabled-date-bg: transparent; /** disabled dates background color */
+        --sdt-table-bg: transparent; /** date picker inner table background color */
+        --sdt-table-data-bg-hover: var(
+            --primary
+        ); /** table selection data hover background color */
+        --sdt-table-today-indicator: var(--primary); /** date picker current day marker color */
+
+        /* action buttons */
+        --sdt-today-bg: var(--reaction-me); /** date picker today button hover background color */
+        --sdt-today-color: var(--txt); /** date picker today button text & border color */
+        --sdt-clear-color: var(--txt-light); /** clear button text & border color */
+        --sdt-clear-bg: transparent; /** clear button background color */
+        --sdt-clear-hover-color: var(--txt); /** clear button hover text color */
+        --sdt-clear-hover-bg: transparent; /** clear button hover background color */
+
+        /* time picker */
+        --sdt-clock-selected-bg: var(--sdt-bg-selected); /** selected time background color */
+        --sdt-clock-bg: var(--input-bg); /** time picker inner circle background color */
+        --sdt-clock-color: var(--txt); /** time picker text color (watch "--sdt-color") */
+        --sdt-clock-color-hover: var(
+            --txt
+        ); /** time picker hover text color (watch "--sdt-color") */
+        --sdt-clock-time-bg: transparent; /** time picker time background color */
+        --sdt-clock-time-bg-hover: var(
+            --primary
+        ); /** time picker time selection hover background color */
+        --sdt-clock-disabled: var(--unread-mute); /** disabled time picker time text color */
+        --sdt-clock-disabled-bg: transparent; /** disabled time picker time background color */
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/bots/DirectChatHeader.svelte b/frontend/app/src/mobile/features/bots/DirectChatHeader.svelte
new file mode 100644
index 0000000000..82903a2feb
--- /dev/null
+++ b/frontend/app/src/mobile/features/bots/DirectChatHeader.svelte
@@ -0,0 +1,120 @@
+<script lang="ts">
+    import { toastStore } from "@src/stores/toast";
+    import { Avatar, MenuItem, SectionHeader } from "component-lib";
+    import type { DirectChatSummary, ExternalBot, OpenChat } from "@client";
+    import {
+        allUsersStore,
+        chatListScopeStore,
+        currentUserIdStore,
+        definitionToPermissions,
+        directChatBotsStore,
+        favouritesStore,
+        publish,
+        routeForScope,
+    } from "@client";
+    import { navigate } from "@src/utils/navigation";
+    import { getContext } from "svelte";
+    import DeleteOutline from "svelte-material-icons/DeleteOutline.svelte";
+    import HeartMinus from "svelte-material-icons/HeartMinus.svelte";
+    import HeartPlus from "svelte-material-icons/HeartPlus.svelte";
+    import Magnify from "svelte-material-icons/Magnify.svelte";
+    import TextBoxOutline from "svelte-material-icons/TextBoxOutline.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        chat: DirectChatSummary;
+        bot: ExternalBot;
+        onSearchChat: (term: string) => void;
+    }
+
+    let { chat, bot, onSearchChat }: Props = $props();
+    let botUser = $derived($allUsersStore.get(chat.them.userId));
+    let grantedPermissions = $derived(
+        $directChatBotsStore.get(bot.id) ?? definitionToPermissions(bot.definition),
+    );
+
+    function addToFavourites() {
+        client.addToFavourites(chat.id);
+    }
+
+    function removeFromFavourites() {
+        client.removeFromFavourites(chat.id);
+    }
+
+    function searchChat() {
+        onSearchChat("");
+    }
+
+    function removeBot() {
+        navigate(routeForScope($chatListScopeStore));
+        client
+            .uninstallBot({ kind: "direct_chat", userId: $currentUserIdStore }, bot.id)
+            .then((success) => {
+                if (!success) {
+                    toastStore.showFailureToast(i18nKey("bots.manage.removeFailed"));
+                }
+            });
+    }
+
+    function viewBotDetails() {
+        publish("showBot", { bot, collection: chat, grantedPermissions });
+    }
+</script>
+
+<SectionHeader onBack={() => publish("clearSelection")}>
+    {#snippet avatar()}
+        <Avatar
+            url={client.userAvatarUrl(botUser)}
+            size={"lg"}
+            name={client.displayName(botUser)} />
+    {/snippet}
+
+    {#snippet title()}
+        {client.displayName(botUser)}
+    {/snippet}
+
+    {#snippet subtitle()}
+        <Translatable resourceKey={i18nKey("Use bot commands below")} />
+    {/snippet}
+
+    {#snippet menu()}
+        {#if !$favouritesStore.has(chat.id)}
+            <MenuItem danger onclick={addToFavourites}>
+                {#snippet icon(color, size)}
+                    <HeartPlus {size} {color} />
+                {/snippet}
+                <Translatable resourceKey={i18nKey("communities.addToFavourites")} />
+            </MenuItem>
+        {:else}
+            <MenuItem danger onclick={removeFromFavourites}>
+                {#snippet icon(color, size)}
+                    <HeartMinus {color} {size} />
+                {/snippet}
+                <Translatable resourceKey={i18nKey("communities.removeFromFavourites")} />
+            </MenuItem>
+        {/if}
+        <MenuItem onclick={searchChat}>
+            {#snippet icon(color, size)}
+                <Magnify {color} {size} />
+            {/snippet}
+            <Translatable resourceKey={i18nKey("searchChat")} />
+        </MenuItem>
+
+        <MenuItem onclick={() => removeBot()}>
+            {#snippet icon(color, size)}
+                <DeleteOutline {color} {size} />
+            {/snippet}
+            <Translatable resourceKey={i18nKey("bots.manage.remove")} />
+        </MenuItem>
+
+        <MenuItem onclick={() => viewBotDetails()}>
+            {#snippet icon(color, size)}
+                <TextBoxOutline {color} {size} />
+            {/snippet}
+            <Translatable resourceKey={i18nKey("bots.manage.view")} />
+        </MenuItem>
+    {/snippet}
+</SectionHeader>
diff --git a/frontend/app/src/mobile/features/bots/EphemeralMessage.svelte b/frontend/app/src/mobile/features/bots/EphemeralMessage.svelte
new file mode 100644
index 0000000000..020999e013
--- /dev/null
+++ b/frontend/app/src/mobile/features/bots/EphemeralMessage.svelte
@@ -0,0 +1,96 @@
+<script lang="ts">
+    import { i18nKey } from "@src/i18n/i18n";
+    import { Column, IconButton, Row, Subtitle } from "component-lib";
+    import { botState, type EphemeralMessageEvent } from "@client";
+    import { onMount } from "svelte";
+    import Close from "svelte-material-icons/Close.svelte";
+    import { Tween } from "svelte/motion";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import ChatMessageContent from "@src/mobile/features/chats/core/content/ChatMessageContent.svelte";
+    import BotAvatar from "./BotAvatar.svelte";
+
+    const duration = 10_000;
+
+    interface Props {
+        event: EphemeralMessageEvent;
+        onClose: () => void;
+    }
+
+    let perc = new Tween(100, { duration });
+    let { event, onClose }: Props = $props();
+    let bot = $derived(botState.externalBots.get(event.botId));
+    let timer = $state<number>();
+
+    onMount(() => {
+        perc.target = 0;
+        timer = window.setTimeout(onClose, duration);
+        return clearTimer;
+    });
+
+    function clearTimer() {
+        window.clearTimeout(timer);
+        timer = undefined;
+    }
+
+    function pause() {
+        perc.target = perc.current;
+        clearTimer();
+    }
+
+    function resume() {
+        const remainingTime = (perc.current / 100) * duration;
+        perc.set(0, { duration: remainingTime });
+        timer = window.setTimeout(onClose, remainingTime);
+    }
+
+    function closeClicked() {
+        clearTimer();
+        onClose();
+    }
+</script>
+
+{#if bot}
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <Column>
+        <div onmousedown={pause} onmouseup={resume} class="content">
+            <Row padding={["md", "zero"]} gap={"sm"} crossAxisAlignment={"center"}>
+                <BotAvatar size={"xs"} {bot} />
+                <Subtitle fontWeight={"bold"}>
+                    <Translatable resourceKey={i18nKey(`${bot.name} /${event.commandName}`)} />
+                </Subtitle>
+                <IconButton size={"sm"} onclick={closeClicked}>
+                    {#snippet icon(color)}
+                        <Close size={"1em"} {color} />
+                    {/snippet}
+                </IconButton>
+            </Row>
+            <ChatMessageContent
+                failed={false}
+                messageId={event.message.messageId}
+                messageIndex={0}
+                messageContext={{ chatId: { kind: "direct_chat", userId: "" } }}
+                intersecting={false}
+                blockLevelMarkdown={event.message.blockLevelMarkdown}
+                edited={false}
+                senderId={bot.id}
+                fill={false}
+                readonly={true}
+                ogPreviews={[]}
+                content={event.message.messageContent} />
+        </div>
+        <Row height={{ size: "0.75rem" }}>
+            <div style={`width: ${perc.current}%`} class="bar"></div>
+        </Row>
+    </Column>
+{/if}
+
+<style lang="scss">
+    .content {
+        padding: $sp4;
+    }
+
+    .bar {
+        height: toRem(10);
+        background-color: var(--warn);
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/bots/InstallationLocationSelector.svelte b/frontend/app/src/mobile/features/bots/InstallationLocationSelector.svelte
new file mode 100644
index 0000000000..95cf07514a
--- /dev/null
+++ b/frontend/app/src/mobile/features/bots/InstallationLocationSelector.svelte
@@ -0,0 +1,142 @@
+<script lang="ts">
+    import { interpolate } from "@src/i18n/i18n";
+    import { Avatar, Body, BodySmall, Column, Option, Row, Search, Select } from "component-lib";
+    import {
+        communitiesStore,
+        i18nKey,
+        OpenChat,
+        serverGroupChatsStore,
+        type BotInstallationLocation,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import NothingToSee from "@src/mobile/shared/NothingToSee.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    type Match = {
+        avatarUrl: string;
+        name: string;
+        id: string;
+        isCommunity: boolean;
+    };
+
+    interface Props {
+        location?: BotInstallationLocation;
+    }
+
+    let { location = $bindable() }: Props = $props();
+    let searchTerm: string = $state("");
+    let placeholder = i18nKey("Search for a community or group");
+    let selected = $state<Match>();
+    let searchTermLower = $derived(searchTerm.toLocaleLowerCase());
+    location; // usual hack
+
+    let options = $derived.by(() => {
+        const communities: Match[] = [...$communitiesStore.values()].map((c) => ({
+            avatarUrl: client.communityAvatarUrl(c.id.communityId, c.avatar),
+            name: c.name,
+            id: c.id.communityId,
+            isCommunity: true,
+        }));
+
+        const groups: Match[] = [...$serverGroupChatsStore.values()].map((g) => ({
+            avatarUrl: client.groupAvatarUrl(g),
+            name: g.name,
+            id: g.id.groupId,
+            isCommunity: false,
+        }));
+
+        communities.sort((a: Match, b: Match) => a.name.localeCompare(b.name));
+        groups.sort((a: Match, b: Match) => a.name.localeCompare(b.name));
+        return [...communities, ...groups];
+    });
+
+    let matches = $derived(
+        options.filter(
+            (o) => searchTermLower === "" || o.name.toLocaleLowerCase().includes(searchTermLower),
+        ),
+    );
+
+    function reset() {
+        selected = undefined;
+        searchTerm = "";
+    }
+
+    function select(match: Match | undefined) {
+        selected = match;
+        if (match !== undefined) {
+            if (match.isCommunity) {
+                location = { kind: "community", communityId: match.id };
+            } else {
+                location = { kind: "group_chat", groupId: match.id };
+            }
+        }
+    }
+</script>
+
+<Select
+    placeholder={interpolate($_, i18nKey("bots.builder.testContext"))}
+    onSelect={select}
+    value={selected}>
+    {#snippet selectedValue(match)}
+        {match.name}
+    {/snippet}
+    {#snippet selectOptions(onSelect)}
+        <Column gap={"xl"} padding={"xl"}>
+            <Column padding={["zero", "sm"]} gap={"md"} crossAxisAlignment={"center"}>
+                <Body fontWeight={"bold"}>
+                    <Translatable resourceKey={i18nKey("bots.builder.testContext")}></Translatable>
+                </Body>
+                <BodySmall colour={"textSecondary"}>
+                    <Translatable resourceKey={i18nKey("bots.builder.testContextExplanation")}
+                    ></Translatable>
+                </BodySmall>
+            </Column>
+
+            <Search
+                placeholder={interpolate($_, placeholder)}
+                searching={false}
+                bind:value={searchTerm}
+                onClear={reset} />
+
+            <Column padding={["zero", "md"]} gap={"lg"}>
+                {#if matches.length === 0}
+                    <NothingToSee
+                        height={{ size: "6" }}
+                        padding={"zero"}
+                        title={"No matching locations"}
+                        subtitle={searchTerm !== ""
+                            ? "Try relaxing your search criteria"
+                            : "You may not be a member of any groups or communities"} />
+                {:else}
+                    {#each matches as match (match.id)}
+                        <Option
+                            onClick={() => onSelect(match)}
+                            padding={["zero", "md", "zero", "zero"]}
+                            value={match}
+                            selected={false}>
+                            <Row gap={"md"}>
+                                <Avatar url={match.avatarUrl} size={"md"}></Avatar>
+                                <Column>
+                                    <Body>{match.name}</Body>
+                                    <BodySmall colour={"textSecondary"}>
+                                        {#if match.isCommunity}
+                                            Test in community
+                                        {:else}
+                                            Test in chat
+                                        {/if}
+                                    </BodySmall>
+                                </Column>
+                            </Row>
+                        </Option>
+                    {/each}
+                {/if}
+            </Column>
+        </Column>
+    {/snippet}
+    {#snippet subtext()}
+        <Translatable resourceKey={i18nKey("bots.builder.testContextInfo")} />
+    {/snippet}
+</Select>
diff --git a/frontend/app/src/components_mobile/IntegerInput.svelte b/frontend/app/src/mobile/features/bots/IntegerInput.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/IntegerInput.svelte
rename to frontend/app/src/mobile/features/bots/IntegerInput.svelte
diff --git a/frontend/app/src/mobile/features/bots/NumberInput.svelte b/frontend/app/src/mobile/features/bots/NumberInput.svelte
new file mode 100644
index 0000000000..ac2b96d09f
--- /dev/null
+++ b/frontend/app/src/mobile/features/bots/NumberInput.svelte
@@ -0,0 +1,149 @@
+<script lang="ts">
+    import { Caption, ColourVars, Container } from "component-lib";
+    import type { ResourceKey } from "@client";
+    import { onMount, type Snippet } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { interpolate } from "@src/i18n/i18n";
+
+    interface Props {
+        disabled?: boolean;
+        autofocus?: boolean;
+        placeholder?: ResourceKey | undefined;
+        min?: number;
+        max?: number;
+        defaultValue?: any;
+        value?: number | null;
+        align?: "left" | "right" | "center";
+        shouldClamp?: boolean;
+        onChange?: () => void;
+        onEnter?: () => void;
+        subtext?: Snippet;
+        error?: boolean;
+    }
+
+    let {
+        disabled = false,
+        autofocus = false,
+        placeholder = undefined,
+        min = 0,
+        max = Number.MAX_VALUE,
+        defaultValue = Math.round(max - min / 2),
+        value = $bindable(min),
+        align = "left",
+        shouldClamp = true,
+        onChange,
+        onEnter,
+        subtext,
+        error,
+    }: Props = $props();
+
+    let inp: HTMLInputElement | undefined = $state();
+
+    onMount(() => {
+        if (autofocus) {
+            inp?.focus();
+        }
+    });
+
+    function clamp(val: number): number {
+        if (isNaN(val)) return defaultValue;
+        if (val > max) return max;
+        if (val < min) return min;
+        return val;
+    }
+
+    function handleInput(e: { currentTarget: { value: string } }) {
+        if (inp) {
+            if (shouldClamp) {
+                value = clamp(parseInt(e.currentTarget.value, 10));
+                if (value != null) {
+                    inp.value = value.toString();
+                }
+            }
+            onChange?.();
+        }
+    }
+
+    function keyDown(e: KeyboardEvent) {
+        if (e.key === "Enter") {
+            onEnter?.();
+        }
+    }
+</script>
+
+<Container direction={"vertical"} gap={"xs"}>
+    <Container
+        background={ColourVars.textTertiary}
+        height={{ size: "3rem" }}
+        padding={["xs", "xl"]}
+        borderRadius={"circle"}
+        gap={"sm"}
+        crossAxisAlignment={"center"}>
+        <input
+            data-gram="false"
+            data-gramm_editor="false"
+            data-enable-grammarly="false"
+            spellcheck="false"
+            {disabled}
+            type="number"
+            {min}
+            {max}
+            placeholder={placeholder !== undefined ? interpolate($_, placeholder) : ""}
+            onkeydown={keyDown}
+            oninput={handleInput}
+            bind:this={inp}
+            bind:value
+            class={`textbox ${align}`} />
+    </Container>
+    {#if subtext}
+        <div class="subtext">
+            <Caption colour={error ? "error" : "textSecondary"}>
+                {@render subtext()}
+            </Caption>
+        </div>
+    {/if}
+</Container>
+
+<style lang="scss">
+    .subtext {
+        padding-inline-start: var(--sp-xl);
+        padding-inline-end: var(--sp-xl);
+    }
+
+    input[type="number"] {
+        -moz-appearance: textfield;
+        appearance: textfield;
+        margin: 0;
+    }
+
+    input[type="number"]::-webkit-inner-spin-button,
+    input[type="number"]::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+
+    .textbox {
+        transition: border ease-in-out 300ms;
+        display: block;
+        width: 100%;
+
+        @include input();
+        padding: 0;
+
+        &.left {
+            text-align: left;
+        }
+
+        &.right {
+            text-align: right;
+        }
+
+        &.center {
+            text-align: center;
+        }
+
+        &::placeholder {
+            color: var(--placeholder);
+        }
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/bots/OwnedLocationSelector.svelte b/frontend/app/src/mobile/features/bots/OwnedLocationSelector.svelte
similarity index 97%
rename from frontend/app/src/components_mobile/bots/OwnedLocationSelector.svelte
rename to frontend/app/src/mobile/features/bots/OwnedLocationSelector.svelte
index 3c51ca6447..3e47e9c73e 100644
--- a/frontend/app/src/components_mobile/bots/OwnedLocationSelector.svelte
+++ b/frontend/app/src/mobile/features/bots/OwnedLocationSelector.svelte
@@ -29,8 +29,8 @@
     } from "@client";
     import { getContext, onMount } from "svelte";
     import { _ } from "svelte-i18n";
-    import Translatable from "../Translatable.svelte";
-    import NothingToSee from "../home/NothingToSee.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import NothingToSee from "@src/mobile/shared/NothingToSee.svelte";
 
     /**
      * There is a problem with this. We might get her by clicking a bot in the Explorer.
diff --git a/frontend/app/src/mobile/features/bots/Tabs.svelte b/frontend/app/src/mobile/features/bots/Tabs.svelte
new file mode 100644
index 0000000000..2a33e79a87
--- /dev/null
+++ b/frontend/app/src/mobile/features/bots/Tabs.svelte
@@ -0,0 +1,79 @@
+<script module>
+    export type Tab = {
+        title: ResourceKey;
+        snippet: Snippet;
+    };
+</script>
+
+<script lang="ts">
+    import { Body, BodySmall, Row, transition } from "component-lib";
+    import type { ResourceKey } from "@client";
+    import type { Snippet } from "svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    interface Props {
+        tabs: Tab[];
+        initialIndex?: number;
+        nested?: boolean;
+        selectedIndex?: number;
+        onTabSelected?: (index: number) => void;
+    }
+
+    let {
+        tabs,
+        initialIndex = 0,
+        nested = false,
+        selectedIndex = $bindable(initialIndex),
+        onTabSelected,
+    }: Props = $props();
+
+    function selectTab(idx: number) {
+        transition(["fade"], () => {
+            selectedIndex = idx;
+            onTabSelected?.(idx);
+        });
+    }
+</script>
+
+<Row overflow={"visible"} gap={"md"} crossAxisAlignment={"center"}>
+    {#each tabs as tab, i}
+        {@const selected = selectedIndex === i}
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <div
+            tabindex="0"
+            role="button"
+            class="tab"
+            class:nested
+            onclick={() => selectTab(i)}
+            class:selected>
+            {#if nested}
+                <BodySmall colour={selected ? "textPrimary" : "textSecondary"} fontWeight={"bold"}>
+                    <Translatable resourceKey={tab.title}></Translatable>
+                </BodySmall>
+            {:else}
+                <Body colour={selected ? "textPrimary" : "textSecondary"} fontWeight={"bold"}>
+                    <Translatable resourceKey={tab.title}></Translatable>
+                </Body>
+            {/if}
+        </div>
+    {/each}
+</Row>
+{#if selectedIndex !== undefined}
+    {@render tabs[selectedIndex]?.snippet()}
+{/if}
+
+<style lang="scss">
+    .tab {
+        padding-bottom: toRem(8);
+        margin-bottom: -2px;
+        border-bottom: var(--bw-thick) solid transparent;
+        white-space: nowrap;
+        &.selected {
+            border-bottom: var(--bw-thick) solid var(--text-primary);
+
+            &.nested {
+                border-bottom-color: var(--primary);
+            }
+        }
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/bots/WebhookMember.svelte b/frontend/app/src/mobile/features/bots/WebhookMember.svelte
new file mode 100644
index 0000000000..c8d037d608
--- /dev/null
+++ b/frontend/app/src/mobile/features/bots/WebhookMember.svelte
@@ -0,0 +1,95 @@
+<script lang="ts">
+    import { toastStore } from "@src/stores/toast";
+    import { copyToClipboard } from "@src/utils/urls";
+    import { Container, IconButton, MenuItem, MenuTrigger } from "component-lib";
+    import { OpenChat, type MultiUserChat } from "@client";
+    import { publish, type FullWebhookDetails, type WebhookDetails } from "@shared";
+    import { getContext } from "svelte";
+    import DotsVertical from "svelte-material-icons/DotsVertical.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import FilteredUsername from "@src/ui/FilteredUsername.svelte";
+    import BotBadge from "@src/mobile/features/bots/exports/BotBadge.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import BotAvatar from "./BotAvatar.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        chat: MultiUserChat;
+        webhook: WebhookDetails;
+        searchTerm?: string;
+        canManage?: boolean;
+        showMenu?: boolean;
+    }
+
+    let { chat, webhook, searchTerm = "", canManage = false, showMenu = true }: Props = $props();
+
+    function deleteWebhook() {
+        client.deleteWebhook(chat.id, webhook.id).then((success) => {
+            if (!success) {
+                toastStore.showFailureToast(i18nKey("webhook.removeFailed"));
+            }
+        });
+    }
+
+    function getWebhookAndThen(fn: (hook: FullWebhookDetails) => void) {
+        client.getWebhook(chat.id, webhook.id).then((secret) => {
+            if (secret !== undefined) {
+                fn({
+                    ...webhook,
+                    secret,
+                });
+            }
+        });
+    }
+
+    function copy() {
+        getWebhookAndThen((hook) => {
+            const url = client.webhookUrl(hook, chat.id);
+            if (url) {
+                copyToClipboard(url);
+            }
+        });
+    }
+
+    function regenerate() {
+        getWebhookAndThen((hook) => publish("regenerateWebhook", { chat, hook }));
+    }
+
+    function edit() {
+        getWebhookAndThen((hook) => publish("updateWebhook", { chat, hook }));
+    }
+</script>
+
+<Container onClick={edit} crossAxisAlignment={"center"} gap={"md"}>
+    <BotAvatar size={"md"} bot={webhook} />
+    <Container crossAxisAlignment={"center"} gap={"sm"}>
+        <BotBadge webhook />
+        <FilteredUsername {searchTerm} username={webhook.name} />
+    </Container>
+    {#if showMenu}
+        <MenuTrigger position={"bottom"} align={"end"}>
+            <IconButton padding={["sm", "xs", "sm", "zero"]} size={"md"}>
+                {#snippet icon(color)}
+                    <DotsVertical {color} />
+                {/snippet}
+            </IconButton>
+            {#snippet menuItems()}
+                <MenuItem onclick={() => copy()}>
+                    <Translatable resourceKey={i18nKey("Copy URL")} />
+                </MenuItem>
+                {#if canManage}
+                    <MenuItem onclick={() => edit()}>
+                        <Translatable resourceKey={i18nKey("Edit")} />
+                    </MenuItem>
+                    <MenuItem onclick={() => regenerate()}>
+                        <Translatable resourceKey={i18nKey("Regenerate")} />
+                    </MenuItem>
+                    <MenuItem danger onclick={() => deleteWebhook()}>
+                        <Translatable resourceKey={i18nKey("Remove")} />
+                    </MenuItem>
+                {/if}
+            {/snippet}
+        </MenuTrigger>
+    {/if}
+</Container>
diff --git a/frontend/app/src/mobile/features/bots/WebhookModal.svelte b/frontend/app/src/mobile/features/bots/WebhookModal.svelte
new file mode 100644
index 0000000000..f06fb1a229
--- /dev/null
+++ b/frontend/app/src/mobile/features/bots/WebhookModal.svelte
@@ -0,0 +1,250 @@
+<script lang="ts">
+    import { toastStore } from "@src/stores/toast";
+    import {
+        BodySmall,
+        Button,
+        ColourVars,
+        Container,
+        CopyCard,
+        Form,
+        Input,
+        Subtitle,
+    } from "component-lib";
+    import {
+        emptyWebhookInstance,
+        OpenChat,
+        publish,
+        validBotComponentName,
+        type FullWebhookDetails,
+        type MultiUserChat,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import Close from "svelte-material-icons/Close.svelte";
+    import Webhook from "svelte-material-icons/Webhook.svelte";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import EditableAvatar from "@src/mobile/shared/EditableAvatar.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import WebhookMember from "./WebhookMember.svelte";
+
+    type Mode = "register" | "update" | "regenerate";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        chat: MultiUserChat;
+        webhook?: FullWebhookDetails;
+        mode?: Mode;
+    }
+
+    let { mode = "register", chat, webhook = $bindable(emptyWebhookInstance()) }: Props = $props();
+
+    let busy = $state(false);
+    let original = { ...webhook };
+    let nameDirty = $derived(original.name !== webhook.name);
+    let avatarDirty = $derived(original.avatarUrl !== webhook.avatarUrl);
+    let dirty = $derived(nameDirty || avatarDirty);
+    let name_errors = $derived(validBotComponentName(webhook.name, 3));
+    let valid = $derived(name_errors.length === 0);
+    let url = $derived(client.webhookUrl(webhook, chat.id));
+    let ctaText = $derived.by(() => {
+        switch (mode) {
+            case "update":
+                return i18nKey("Update webhook");
+            case "regenerate":
+                return i18nKey("Regenerate webhook");
+            case "register":
+                return i18nKey("Register webhook");
+        }
+    });
+
+    let titleKey = $derived.by(() => {
+        switch (mode) {
+            case "update":
+                return i18nKey("webhook.updateTitle", { name: webhook.name });
+            case "regenerate":
+                return i18nKey("Regenerate webhook");
+            case "register":
+                return i18nKey("webhook.registerTitle");
+        }
+    });
+
+    function register() {
+        if (valid && dirty) {
+            busy = true;
+            client
+                .registerWebhook(chat.id, webhook.name, webhook.avatarUrl)
+                .then((success) => {
+                    if (success === undefined) {
+                        toastStore.showFailureToast(i18nKey("Unable to register webhook"));
+                    } else {
+                        publish("closeModalPage");
+                    }
+                })
+                .finally(() => (busy = false));
+        }
+    }
+
+    function update() {
+        busy = true;
+        if (valid && dirty) {
+            client
+                .updateWebhook(
+                    chat.id,
+                    webhook,
+                    nameDirty ? webhook.name : undefined,
+                    avatarDirty
+                        ? webhook.avatarUrl !== undefined
+                            ? { value: webhook.avatarUrl }
+                            : "set_to_none"
+                        : undefined,
+                )
+                .then((success) => {
+                    if (!success) {
+                        toastStore.showFailureToast(i18nKey("Unable to update webhook details"));
+                    } else {
+                        publish("closeModalPage");
+                    }
+                })
+                .finally(() => (busy = false));
+        }
+    }
+
+    function regenerate() {
+        busy = true;
+        client
+            .regenerateWebhook(chat.id, original.id)
+            .then((success) => {
+                if (success === undefined) {
+                    toastStore.showFailureToast(i18nKey("Unable to regenerate webhook"));
+                } else {
+                    webhook.secret = success;
+                    original.secret = success;
+                }
+            })
+            .finally(() => (busy = false));
+    }
+
+    function onSubmit(e: Event) {
+        e.preventDefault();
+    }
+
+    function mainAction() {
+        switch (mode) {
+            case "regenerate":
+                return regenerate();
+            case "register":
+                return register();
+            case "update":
+                return update();
+        }
+    }
+
+    function avatarSelected(detail: { url: string; data: Uint8Array }) {
+        webhook.avatarUrl = detail.url;
+    }
+</script>
+
+<SlidingPageContent title={titleKey} subtitle={i18nKey(chat.name)}>
+    <Container gap={"xxxl"} direction={"vertical"} padding={["xxl", "lg"]}>
+        {#if mode === "register"}
+            <Container
+                crossAxisAlignment={"center"}
+                borderRadius={"lg"}
+                padding={"lg"}
+                background={ColourVars.background1}
+                gap={"lg"}>
+                <Webhook color={ColourVars.textSecondary} size={"4rem"} />
+                <Container direction={"vertical"}>
+                    <Subtitle fontWeight={"bold"}>
+                        <Translatable resourceKey={i18nKey("Webhooks")} />
+                    </Subtitle>
+                    <BodySmall colour={"textSecondary"}>
+                        <Markdown
+                            text={interpolate(
+                                $_,
+                                i18nKey(
+                                    "Webhooks let you send external events to this group programmatically. Once registered, your group gets a URL you can use to forward events. Learn more in the [bots developer guide](https://github.com/open-chat-labs/open-chat-bots).",
+                                ),
+                            )}></Markdown>
+                    </BodySmall>
+                </Container>
+            </Container>
+        {:else if mode === "regenerate" && url !== undefined}
+            <Container gap={"lg"} direction={"vertical"}>
+                <Container
+                    padding={["md", "lg"]}
+                    borderRadius={"lg"}
+                    background={ColourVars.background1}>
+                    <WebhookMember showMenu={false} {chat} {webhook} />
+                </Container>
+                <Container
+                    padding={["md", "lg"]}
+                    borderRadius={"lg"}
+                    background={ColourVars.background1}>
+                    <BodySmall>
+                        <Translatable
+                            resourceKey={i18nKey(
+                                "If for any reason you may need to update your webhook URL, regenerating the webhook will update the “secret” part of the URL  and therefore effectively change it.",
+                            )} />
+                    </BodySmall>
+                </Container>
+                <CopyCard title={"Webhook URL"} body={url}></CopyCard>
+            </Container>
+        {:else if mode === "update" && url !== undefined}
+            <CopyCard title={"Webhook URL"} body={url}></CopyCard>
+        {/if}
+        <Form {onSubmit}>
+            <Container crossAxisAlignment={"center"} direction={"vertical"} gap={"xl"}>
+                {#if mode !== "regenerate"}
+                    <EditableAvatar
+                        highlightBorder
+                        size={"headline"}
+                        image={webhook.avatarUrl}
+                        onImageSelected={avatarSelected} />
+
+                    <Input
+                        minlength={3}
+                        maxlength={15}
+                        disabled={busy}
+                        error={name_errors.length > 0}
+                        bind:value={webhook.name}
+                        autofocus
+                        placeholder={interpolate($_, i18nKey("Webhook name"))}>
+                        {#snippet subtext()}
+                            <Translatable
+                                resourceKey={i18nKey(
+                                    "Must be unique in this chat and contain alphanumeric characters and underscores only (required)",
+                                )} />
+                        {/snippet}
+                    </Input>
+                {/if}
+
+                {#if mode === "register" || mode === "update"}
+                    <Button loading={busy} disabled={busy || !valid || !dirty} onClick={mainAction}>
+                        {#snippet icon(color)}
+                            <Webhook {color} />
+                        {/snippet}
+                        <Translatable resourceKey={ctaText} />
+                    </Button>
+
+                    <Button onClick={() => publish("closeModalPage")} secondary>
+                        {#snippet icon(color)}
+                            <Close {color} />
+                        {/snippet}
+                        <Translatable resourceKey={i18nKey("cancel")} />
+                    </Button>
+                {:else if mode === "regenerate"}
+                    <Button loading={busy} disabled={busy} onClick={mainAction}>
+                        {#snippet icon(color)}
+                            <Webhook {color} />
+                        {/snippet}
+                        <Translatable resourceKey={ctaText} />
+                    </Button>
+                {/if}
+            </Container>
+        </Form>
+    </Container>
+</SlidingPageContent>
diff --git a/frontend/app/src/components_mobile/home/profile/BotBadge.svelte b/frontend/app/src/mobile/features/bots/exports/BotBadge.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/profile/BotBadge.svelte
rename to frontend/app/src/mobile/features/bots/exports/BotBadge.svelte
diff --git a/frontend/app/src/components_mobile/home/communities/explore/BotCard.svelte b/frontend/app/src/mobile/features/bots/exports/BotCard.svelte
similarity index 93%
rename from frontend/app/src/components_mobile/home/communities/explore/BotCard.svelte
rename to frontend/app/src/mobile/features/bots/exports/BotCard.svelte
index d58992624e..c717b64c22 100644
--- a/frontend/app/src/components_mobile/home/communities/explore/BotCard.svelte
+++ b/frontend/app/src/mobile/features/bots/exports/BotCard.svelte
@@ -2,8 +2,8 @@
     import { BodySmall, ColourVars, Container, Subtitle } from "component-lib";
     import { allUsersStore, botState, type ExternalBotLike } from "@client";
     import RobotSolid from "svelte-material-icons/Robot.svelte";
-    import BotAvatar from "../../../bots/BotAvatar.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
+    import BotAvatar from "@src/mobile/features/bots/BotAvatar.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
 
     interface Props {
         bot: ExternalBotLike;
diff --git a/frontend/app/src/mobile/features/bots/install/BotInstaller.svelte b/frontend/app/src/mobile/features/bots/install/BotInstaller.svelte
new file mode 100644
index 0000000000..b7904760b0
--- /dev/null
+++ b/frontend/app/src/mobile/features/bots/install/BotInstaller.svelte
@@ -0,0 +1,306 @@
+<script lang="ts">
+    import {
+        Avatar,
+        Body,
+        BodySmall,
+        Button,
+        ColourVars,
+        Container,
+        defaultBackgroundGradient,
+        FloatingButton,
+        ReadMore,
+        StatusCard,
+        Subtitle,
+    } from "component-lib";
+    import {
+        allUsersStore,
+        botContainerFrom,
+        type ChatSummary,
+        type CommunitySummary,
+        definitionToPermissions,
+        type ExternalBotLike,
+        type GrantedBotPermissions,
+        installationLocationFrom,
+        OpenChat,
+        publish,
+    } from "@client";
+    import { getContext, tick } from "svelte";
+    import ArrowDown from "svelte-material-icons/ArrowDown.svelte";
+    import Cloud from "svelte-material-icons/CloudDownloadOutline.svelte";
+    import Save from "svelte-material-icons/ContentSaveOutline.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
+    import MulticolourText from "@src/mobile/shared/MulticolourText.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import BotAvatar from "@src/mobile/features/bots/BotAvatar.svelte";
+    import BotCommands from "@src/mobile/features/bots/BotCommands.svelte";
+    import BotsPermissionInfo from "@src/mobile/features/bots/BotsPermissionInfo.svelte";
+    import ChoosePermissions from "./ChoosePermissions.svelte";
+
+    /**
+     * This component is used for both installing a new bot and reviewing the permissions of a bot that is already installed
+     */
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        collection: CommunitySummary | ChatSummary;
+        bot: ExternalBotLike;
+        installedWithPermissions?: GrantedBotPermissions;
+    }
+
+    let { bot, collection, installedWithPermissions }: Props = $props();
+    let requestedPermissions = $derived(definitionToPermissions(bot.definition));
+    let grantedPermissions = $state(
+        installedWithPermissions ?? filterByLocation(definitionToPermissions(bot.definition)),
+    );
+    let installing = $state(installedWithPermissions === undefined);
+    let location = $derived(installationLocationFrom(collection));
+    let level = $derived(collection.kind === "direct_chat" ? "group" : collection.level); // TODO suspect
+    let container = $derived(botContainerFrom(collection));
+    let containerAvatarUrl = $derived.by(() => {
+        if (container === undefined) return undefined;
+        switch (container.kind) {
+            case "community":
+                return client.communityAvatarUrl(container.id.communityId, container.avatar);
+            case "group_chat":
+                return client.groupAvatarUrl(container);
+            case "direct_chat":
+                return client.userAvatarUrl($allUsersStore.get(container.id.userId));
+        }
+    });
+    let containerName = $derived.by(() => {
+        if (container === undefined) return undefined;
+        switch (container.kind) {
+            case "direct_chat":
+                return $allUsersStore.get(container.id.userId)?.username ?? "Unknown user";
+            default:
+                return container.name;
+        }
+    });
+
+    let busy = $state(false);
+
+    function filterByLocation(perm: GrantedBotPermissions): GrantedBotPermissions {
+        if (collection.kind === "group_chat") {
+            perm.command.communityPermissions = [];
+            if (perm.autonomous !== undefined) {
+                perm.autonomous.communityPermissions = [];
+            }
+        }
+        return perm;
+    }
+
+    function update() {
+        busy = true;
+        client
+            .updateInstalledBot(location, bot.id, grantedPermissions)
+            .then((success) => {
+                if (!success) {
+                    toastStore.showFailureToast(i18nKey("bots.edit.failure"));
+                } else {
+                    publish("closeModalPage");
+                }
+            })
+            .finally(() => (busy = false));
+    }
+
+    function install() {
+        busy = true;
+        client
+            .installBot(location, bot.id, {
+                command: grantedPermissions.command,
+                autonomous: grantedPermissions.autonomous,
+            })
+            .then((success) => {
+                if (!success) {
+                    toastStore.showFailureToast(i18nKey("bots.add.failure"));
+                } else {
+                    publish("closeModalPage");
+                }
+            })
+            .finally(() => (busy = false));
+    }
+
+    function cancel() {
+        if (collection.kind === "direct_chat") {
+            client.removeChat(collection.id);
+            publish("clearSelection");
+        }
+        tick().then(() => publish("closeModalPage"));
+    }
+</script>
+
+<SlidingPageContent
+    onBack={cancel}
+    title={i18nKey(
+        installing ? "bots.add.title" : "Review bot permissions",
+        undefined,
+        level,
+        true,
+    )}>
+    <Container height={"fill"} gap={"xl"} direction={"vertical"} padding={["xl", "lg"]}>
+        <Container gap={"sm"} direction={"vertical"}>
+            <Container
+                overflow={"visible"}
+                borderRadius={"md"}
+                padding={"md"}
+                background={defaultBackgroundGradient}
+                crossAxisAlignment={"start"}
+                gap={"md"}>
+                <BotAvatar size={"xl"} {bot} />
+                <Container
+                    overflow={"hidden"}
+                    gap={"xxs"}
+                    direction={"vertical"}
+                    width={"fill"}>
+                    <Body colour={"textPrimary"} fontWeight={"bold"}>
+                        <Translatable
+                            resourceKey={i18nKey(installing ? "Installing" : "Reviewing")} />
+                    </Body>
+                    <Subtitle colour={"textOnPrimary"} fontWeight={"bold"}>
+                        {bot.name}
+                    </Subtitle>
+                </Container>
+            </Container>
+
+            <Container
+                overflow={"visible"}
+                borderRadius={"md"}
+                padding={"md"}
+                background={defaultBackgroundGradient}
+                crossAxisAlignment={"start"}
+                gap={"md"}>
+                <Avatar url={containerAvatarUrl!} size={"xl"} />
+                <Container
+                    overflow={"hidden"}
+                    gap={"xxs"}
+                    direction={"vertical"}
+                    width={"fill"}>
+                    <Body colour={"textPrimary"} fontWeight={"bold"}>
+                        {#if collection.kind === "direct_chat"}
+                            <Translatable resourceKey={i18nKey("As a direct chat with")} />
+                        {:else}
+                            <Translatable
+                                resourceKey={i18nKey(installing ? "Into" : "Installed in")} />
+                        {/if}
+                    </Body>
+                    <Subtitle colour={"textOnPrimary"} fontWeight={"bold"}>
+                        {containerName}
+                    </Subtitle>
+                </Container>
+                <Container
+                    supplementalClass={"connecting_arrow"}
+                    padding={"sm"}
+                    width={"hug"}
+                    background={ColourVars.background1}
+                    borderRadius={"circle"}>
+                    <ArrowDown size={"1.2rem"} color={ColourVars.primary} />
+                </Container>
+            </Container>
+        </Container>
+
+        <Container padding={["zero", "md"]} direction={"vertical"}>
+            <Body>
+                <Translatable resourceKey={i18nKey("About")} />
+            </Body>
+            <ReadMore>
+                <Body colour={"textSecondary"}>
+                    <Markdown inline={false} text={bot.definition.description} />
+                </Body>
+            </ReadMore>
+        </Container>
+
+        <BotsPermissionInfo />
+
+        {#if bot.definition.commands.length > 0}
+            <Container gap={"lg"} padding={["zero", "md"]} direction={"vertical"}>
+                <Body>
+                    <Translatable resourceKey={i18nKey("Command permissions")} />
+                </Body>
+                <ChoosePermissions
+                    {level}
+                    bind:granted={grantedPermissions.command}
+                    requested={requestedPermissions.command} />
+            </Container>
+        {/if}
+
+        {#if bot.definition.autonomousConfig !== undefined}
+            <Container gap={"lg"} padding={["zero", "md"]} direction={"vertical"}>
+                <Body>
+                    <Translatable resourceKey={i18nKey("Autonomous permissions")} />
+                </Body>
+                <ChoosePermissions
+                    {level}
+                    bind:granted={grantedPermissions.autonomous!}
+                    requested={requestedPermissions.autonomous!} />
+            </Container>
+        {/if}
+
+        <Container padding={["zero", "md"]} direction={"vertical"} gap={"sm"}>
+            <BodySmall fontWeight={"bold"} colour={"textSecondary"}>
+                <Translatable resourceKey={i18nKey("Commands")} />
+            </BodySmall>
+            <BotCommands {grantedPermissions} commands={bot.definition.commands} />
+        </Container>
+
+        <Container padding={["zero", "md"]} direction={"vertical"} gap={"sm"}>
+            <StatusCard
+                mode={"warning"}
+                title={"Granting limited permissions"}
+                body={"Granting limited permissions will limit bot's supported commands. Unavailable commands are greyed out."} />
+        </Container>
+
+        {#if installing}
+            <Container padding={["zero", "md"]} direction={"vertical"} gap={"lg"}>
+                <BodySmall align={"center"} colour={"textSecondary"}>
+                    <MulticolourText
+                        parts={[
+                            {
+                                text: i18nKey(
+                                    "By pressing the button below, you will install this bot int the ",
+                                ),
+                                colour: "textSecondary",
+                            },
+                            {
+                                text: i18nKey(containerName!),
+                                colour: "primary",
+                            },
+                            {
+                                text: i18nKey(" location."),
+                                colour: "textSecondary",
+                            },
+                        ]}>
+                    </MulticolourText>
+                </BodySmall>
+                <Button disabled={busy} loading={busy} onClick={install}>
+                    {#snippet icon(color)}
+                        <Cloud {color} />
+                    {/snippet}
+                    <Translatable resourceKey={i18nKey("bots.add.install")} />
+                </Button>
+                <Button secondary disabled={busy} onClick={cancel}>
+                    <Translatable resourceKey={i18nKey("cancel")} />
+                </Button>
+            </Container>
+        {/if}
+    </Container>
+    {#if !installing}
+        <FloatingButton loading={busy} pos={{ bottom: "lg", right: "lg" }} onClick={update}>
+            {#snippet icon(color)}
+                <Save {color} />
+            {/snippet}
+        </FloatingButton>
+    {/if}
+</SlidingPageContent>
+
+<style lang="scss">
+    :global(.container.connecting_arrow) {
+        position: absolute !important;
+        top: 0;
+        left: 50%;
+        transform: translateY(calc(-50% - 4px)) translateX(-50%);
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/bots/install/BotProperties.svelte b/frontend/app/src/mobile/features/bots/install/BotProperties.svelte
new file mode 100644
index 0000000000..b198e9c774
--- /dev/null
+++ b/frontend/app/src/mobile/features/bots/install/BotProperties.svelte
@@ -0,0 +1,184 @@
+<script lang="ts">
+    import Markdown from "@src/ui/Markdown.svelte";
+    import { Avatar } from "component-lib";
+    import type { ExternalBotLike, GrantedBotPermissions, OpenChat } from "@client";
+    import { allUsersStore, currentUserIdStore } from "@client";
+    import { getContext, type Snippet } from "svelte";
+    import BotAvatar from "@src/mobile/features/bots/BotAvatar.svelte";
+    import BotCommands from "@src/mobile/features/bots/BotCommands.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        bot: ExternalBotLike;
+        grantedPermissions?: GrantedBotPermissions;
+        installing: boolean;
+        padded?: boolean;
+        onClick?: (match: ExternalBotLike) => void;
+        children?: Snippet;
+        showAvatar?: boolean;
+        showCommands?: boolean;
+    }
+
+    let {
+        bot,
+        grantedPermissions,
+        installing,
+        padded = false,
+        onClick,
+        children,
+        showAvatar = false,
+        showCommands = true,
+    }: Props = $props();
+    let owner = $derived($allUsersStore.get(bot.ownerId));
+    let isPublic = $derived(
+        bot.kind === "external_bot" && bot.registrationStatus.kind === "public",
+    );
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+    class="props"
+    class:clickable={onClick !== undefined}
+    class:padded
+    onclick={() => onClick?.(bot)}>
+    {#if showAvatar}
+        <span class="avatar">
+            <BotAvatar {bot} />
+        </span>
+    {/if}
+    <div class="details">
+        <div class="bot-name">
+            <h4>
+                <div class={`img ${isPublic ? "public" : "private"}`}></div>
+                {bot.name}
+            </h4>
+            {#if owner}
+                <div class="owner">
+                    <Avatar url={client.userAvatarUrl(owner)} size={"xs"} />
+                    <span class="username">{owner.username}</span>
+                </div>
+            {/if}
+            {#if installing}
+                <div class="installing"></div>
+            {/if}
+        </div>
+        <div class="bot-desc">
+            <Markdown inline={false} text={bot.definition.description} />
+        </div>
+        {#if bot.ownerId === $currentUserIdStore}
+            <div class="bot-id">
+                bot id: {bot.id}
+            </div>
+        {/if}
+        {#if showCommands}
+            <BotCommands {grantedPermissions} commands={bot.definition.commands} />
+        {/if}
+
+        {@render children?.()}
+    </div>
+</div>
+
+<style lang="scss">
+    .props {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 12px;
+
+        &.clickable {
+            cursor: pointer;
+        }
+
+        &.padded {
+            padding: $sp3 toRem(10);
+            transition:
+                background-color ease-in-out 100ms,
+                border-color ease-in-out 100ms;
+            /* @media (hover: hover) {
+                &:hover {
+                    background-color: var(--members-hv);
+                }
+            } */
+        }
+    }
+
+    .avatar {
+        flex: 0 0 50px;
+        position: relative;
+        align-self: start;
+    }
+
+    .installing {
+        margin-left: $sp3;
+        @include loading-spinner(1em, 0.5em, var(--button-spinner), "/assets/plain-spinner.svg");
+    }
+
+    .details {
+        display: flex;
+        gap: $sp2;
+        flex: 1;
+        flex-direction: column;
+        @include font(book, normal, fs-100);
+
+        .bot-name {
+            @include ellipsis();
+            display: flex;
+            gap: $sp3;
+            @include font(book, normal, fs-110);
+
+            h4 {
+                display: flex;
+                gap: $sp2;
+                align-items: center;
+            }
+        }
+
+        .bot-desc {
+            @include font(light, normal, fs-100);
+            color: var(--txt-light);
+            margin-bottom: $sp3;
+            max-height: 300px;
+            overflow: auto;
+        }
+    }
+
+    .owner {
+        padding: $sp1 $sp3;
+        border: var(--bw) solid var(--bd);
+        border-radius: $sp2;
+        display: flex;
+        gap: $sp2;
+        align-items: center;
+        color: var(--txt-light);
+        @include font(light, normal, fs-90);
+
+        .username {
+            flex: auto;
+        }
+    }
+
+    .img {
+        background-repeat: no-repeat;
+        $size: 12px;
+        flex: 0 0 $size;
+        width: $size;
+        height: $size;
+
+        &.public {
+            background-image: url("/assets/unlocked.svg");
+        }
+
+        &.private {
+            background-image: url("/assets/locked.svg");
+        }
+    }
+
+    .bot-id {
+        @include font(light, normal, fs-70);
+        color: var(--txt-light);
+        font: courier;
+        margin-bottom: $sp3;
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/bots/install/ChoosePermissions.svelte b/frontend/app/src/mobile/features/bots/install/ChoosePermissions.svelte
new file mode 100644
index 0000000000..4372c5ff04
--- /dev/null
+++ b/frontend/app/src/mobile/features/bots/install/ChoosePermissions.svelte
@@ -0,0 +1,108 @@
+<script lang="ts">
+    import { Body, ColourVars, Container, Switch } from "component-lib";
+    import { i18nKey, type ExternalBotPermissions, type Level } from "@client";
+    import AccountGroup from "svelte-material-icons/AccountGroup.svelte";
+    import ChatOutline from "svelte-material-icons/ChatOutline.svelte";
+    import ForumOutline from "svelte-material-icons/ForumOutline.svelte";
+    import { togglePermission } from "@src/utils/bots";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    interface Props {
+        level: Level;
+        granted: ExternalBotPermissions;
+        requested: ExternalBotPermissions;
+    }
+
+    let { granted = $bindable(), requested, level }: Props = $props();
+</script>
+
+{#snippet permHeader(title: string, Icon: any)}
+    <Container gap={"sm"} crossAxisAlignment={"center"}>
+        <Icon color={ColourVars.textSecondary} />
+        <Body fontWeight={"bold"} colour={"textSecondary"}>
+            <Translatable resourceKey={i18nKey(title)}></Translatable>
+        </Body>
+    </Container>
+{/snippet}
+
+{#snippet noperm()}
+    <Body>
+        <Translatable resourceKey={i18nKey("bots.add.noPermissions")}></Translatable>
+    </Body>
+{/snippet}
+
+{#snippet chatTab()}
+    <Container
+        direction={"vertical"}
+        borderRadius={"md"}
+        padding={"lg"}
+        gap={"lg"}
+        background={ColourVars.background1}>
+        {@render permHeader("Chat permissions", ForumOutline)}
+        {#if requested.chatPermissions.length === 0}
+            {@render noperm()}
+        {:else}
+            {#each requested.chatPermissions as perm}
+                <Switch
+                    reverse
+                    width={"fill"}
+                    onChange={() => togglePermission(granted, "chatPermissions", perm)}
+                    checked={granted.chatPermissions.includes(perm)}>
+                    <Translatable resourceKey={i18nKey(`permissions.${perm}`)} />
+                </Switch>
+            {/each}
+        {/if}
+    </Container>
+{/snippet}
+{#snippet communityTab()}
+    <Container
+        direction={"vertical"}
+        borderRadius={"md"}
+        padding={"lg"}
+        gap={"lg"}
+        background={ColourVars.background1}>
+        {@render permHeader("Community permissions", AccountGroup)}
+        {#if requested.communityPermissions.length === 0}
+            {@render noperm()}
+        {:else}
+            {#each requested.communityPermissions as perm}
+                <Switch
+                    reverse
+                    width={"fill"}
+                    onChange={() => togglePermission(granted, "communityPermissions", perm)}
+                    checked={granted.communityPermissions.includes(perm)}>
+                    <Translatable resourceKey={i18nKey(`permissions.${perm}`)} />
+                </Switch>
+            {/each}
+        {/if}
+    </Container>
+{/snippet}
+{#snippet messageTab()}
+    <Container
+        direction={"vertical"}
+        borderRadius={"md"}
+        padding={"lg"}
+        gap={"lg"}
+        background={ColourVars.background1}>
+        {@render permHeader("Message permissions", ChatOutline)}
+        {#if requested.messagePermissions.length === 0}
+            {@render noperm()}
+        {:else}
+            {#each requested.messagePermissions as perm}
+                <Switch
+                    reverse
+                    width={"fill"}
+                    onChange={() => togglePermission(granted, "messagePermissions", perm)}
+                    checked={granted.messagePermissions.includes(perm)}>
+                    <Translatable resourceKey={i18nKey(`permissions.messagePermissions.${perm}`)} />
+                </Switch>
+            {/each}
+        {/if}
+    </Container>
+{/snippet}
+
+{#if level !== "group"}
+    {@render communityTab()}
+{/if}
+{@render chatTab()}
+{@render messageTab()}
diff --git a/frontend/app/src/mobile/features/calendar/Calendar.svelte b/frontend/app/src/mobile/features/calendar/Calendar.svelte
new file mode 100644
index 0000000000..a7a9db26e0
--- /dev/null
+++ b/frontend/app/src/mobile/features/calendar/Calendar.svelte
@@ -0,0 +1,168 @@
+<script lang="ts">
+    import { ColourVars, Container, IconButton, Subtitle } from "component-lib";
+    import { type Snippet } from "svelte";
+    import { locale } from "svelte-i18n";
+    import PrevIcon from "svelte-material-icons/ChevronLeft.svelte";
+    import NextIcon from "svelte-material-icons/ChevronRight.svelte";
+    import { translationCodes } from "@src/i18n/i18n";
+    import { calendarState, type DateRange } from "./calendarState.svelte";
+    import { getMonthCalendar, getTitleText, isSameDay } from "./utils";
+    import { weekDays } from "./weekdays";
+
+    interface Props {
+        monthTitleTemplate?: Snippet;
+        dayTemplate?: Snippet<[Date]>;
+        dateSelected?: (range: DateRange) => void;
+    }
+
+    let { monthTitleTemplate, dayTemplate, dateSelected }: Props = $props();
+
+    let today = $state(new Date());
+    let showDate = $state(new Date());
+    let dates = $state<Date[][]>([]);
+    let translatedLocale = $derived(translationCodes[$locale || "en"] || "en");
+
+    $effect(() => getDates(showDate));
+
+    function endOfDay(date: Date): Date {
+        return new Date(date.getTime() + 24 * 60 * 60 * 1000 - 1);
+    }
+
+    function getDates(start: Date) {
+        console.log("Getting dates for start date: ", start);
+        const resp = getMonthCalendar(start);
+        calendarState.monthTitle = getTitleText(resp.year, resp.month, translatedLocale);
+        dates = resp.dates;
+        calendarState.selectedMonth = resp.month;
+        const allDates = resp.dates.flatMap((d) => d);
+        const finalDay = allDates[allDates.length - 1];
+        const range: DateRange = {
+            date: start,
+            range: [allDates[0], endOfDay(finalDay)],
+        };
+        calendarState.selectedRange = range;
+        dateSelected?.(range);
+    }
+
+    function previousMonth() {
+        const year = showDate.getFullYear();
+        const month = showDate.getMonth();
+        if (month - 1 < 0) {
+            showDate = new Date(year - 1, 11, 1);
+        } else {
+            showDate = new Date(year, month - 1, 1);
+        }
+    }
+    function nextMonth() {
+        const year = showDate.getFullYear();
+        const month = showDate.getMonth();
+        if (month + 1 > 11) {
+            showDate = new Date(year + 1, 0, 1);
+        } else {
+            showDate = new Date(year, month + 1, 1);
+        }
+    }
+</script>
+
+<div class={"calendar-wrapper"}>
+    <Container crossAxisAlignment={"center"} mainAxisAlignment={"spaceBetween"}>
+        <IconButton size={"lg"} onclick={previousMonth}>
+            {#snippet icon()}
+                <PrevIcon color={ColourVars.primary} />
+            {/snippet}
+        </IconButton>
+        {#if monthTitleTemplate}
+            {@render monthTitleTemplate()}
+        {:else}
+            <Subtitle width={"hug"} fontWeight={"bold"}>
+                {calendarState.monthTitle}
+            </Subtitle>
+        {/if}
+        <IconButton size={"lg"} onclick={nextMonth}>
+            {#snippet icon()}
+                <NextIcon color={ColourVars.primary} />
+            {/snippet}
+        </IconButton>
+    </Container>
+    <div class="week-days-row">
+        {#each $weekDays as [day, d]}
+            <div title={day} class="block weekday-name-block">
+                {d}
+            </div>
+        {/each}
+    </div>
+    <div class="daily-date-container">
+        {#each dates as week}
+            <div class="week-row">
+                {#each week as day}
+                    <div
+                        class:disabled={day.getMonth() !== calendarState.selectedMonth}
+                        class:today={typeof day === "string" ? false : isSameDay(today, day)}
+                        class="block daily-date-block pointer">
+                        {#if dayTemplate}
+                            {@render dayTemplate(day)}
+                        {:else}
+                            {day.getDate()}
+                        {/if}
+                    </div>
+                {/each}
+            </div>
+        {/each}
+    </div>
+</div>
+
+<style lang="scss">
+    .calendar-wrapper {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        margin-bottom: $sp4;
+    }
+
+    .block {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-height: 2.5rem;
+        @include font(medium, normal, fs-100);
+        flex-grow: 0;
+        flex-shrink: 0;
+    }
+
+    .week-days-row,
+    .week-row {
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    .weekday-name-block,
+    .daily-date-block {
+        width: calc(100% / 7);
+        font-variant-numeric: tabular-nums;
+    }
+
+    .daily-date-block {
+        transition: background 0.25s ease-in-out;
+        &:hover:not(.disabled) {
+            background: rgba(255, 255, 255, 0.1);
+        }
+    }
+
+    .today {
+        font-weight: 700;
+    }
+
+    .disabled {
+        color: var(--text-secondary);
+    }
+
+    .weekday-name-block {
+        font-weight: bold;
+    }
+
+    .pointer {
+        cursor: pointer;
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/calendar/calendarState.svelte.ts b/frontend/app/src/mobile/features/calendar/calendarState.svelte.ts
similarity index 100%
rename from frontend/app/src/components_mobile/calendar/calendarState.svelte.ts
rename to frontend/app/src/mobile/features/calendar/calendarState.svelte.ts
diff --git a/frontend/app/src/components/calendar/utils.ts b/frontend/app/src/mobile/features/calendar/utils.ts
similarity index 100%
rename from frontend/app/src/components/calendar/utils.ts
rename to frontend/app/src/mobile/features/calendar/utils.ts
diff --git a/frontend/app/src/mobile/features/calendar/weekdays.ts b/frontend/app/src/mobile/features/calendar/weekdays.ts
new file mode 100644
index 0000000000..3043d41f50
--- /dev/null
+++ b/frontend/app/src/mobile/features/calendar/weekdays.ts
@@ -0,0 +1,122 @@
+import { locale } from "svelte-i18n";
+import { derived } from "svelte/store";
+import { translationCodes } from "@src/i18n/i18n";
+
+type WeekDay = [string, string];
+type WeekDayMap = Record<string, WeekDay[]>;
+
+const map: WeekDayMap = {
+    "zh-cn": [
+        ["星期日", "日"],
+        ["星期一", "一"],
+        ["星期二", "二"],
+        ["星期三", "三"],
+        ["星期四", "四"],
+        ["星期五", "五"],
+        ["星期六", "六"],
+    ],
+    de: [
+        ["Sonntag", "So"],
+        ["Montag", "Mo"],
+        ["Dienstag", "Di"],
+        ["Mittwoch", "Mi"],
+        ["Donnerstag", "Do"],
+        ["Freitag", "Fr"],
+        ["Samstag", "Sa"],
+    ],
+    en: [
+        ["Sunday", "Su"],
+        ["Monday", "Mo"],
+        ["Tuesday", "Tu"],
+        ["Wednesday", "We"],
+        ["Thursday", "Th"],
+        ["Friday", "Fr"],
+        ["Saturday", "Sa"],
+    ],
+    es: [
+        ["Domingo", "Do"],
+        ["Lunes", "Lu"],
+        ["Martes", "Ma"],
+        ["Miércoles", "Mi"],
+        ["Jueves", "Ju"],
+        ["Viernes", "Vi"],
+        ["Sábado", "Sa"],
+    ],
+    fr: [
+        ["Dimanche", "Di"],
+        ["Lundi", "Lu"],
+        ["Mardi", "Ma"],
+        ["Mercredi", "Me"],
+        ["Jeudi", "Je"],
+        ["Vendredi", "Ve"],
+        ["Samedi", "Sa"],
+    ],
+    hi: [
+        ["रविवार", "र"],
+        ["सोमवार", "सो"],
+        ["मंगलवार", "मं"],
+        ["बुधवार", "बु"],
+        ["गुरुवार", "गु"],
+        ["शुक्रवार", "शु"],
+        ["शनिवार", "श"],
+    ],
+    it: [
+        ["Domenica", "Do"],
+        ["Lunedì", "Lu"],
+        ["Martedì", "Ma"],
+        ["Mercoledì", "Me"],
+        ["Giovedì", "Gi"],
+        ["Venerdì", "Ve"],
+        ["Sabato", "Sa"],
+    ],
+    iw: [
+        ["יום ראשון", "א"],
+        ["יום שני", "ב"],
+        ["יום שלישי", "ג"],
+        ["יום רביעי", "ד"],
+        ["יום חמישי", "ה"],
+        ["יום שישי", "ו"],
+        ["שבת", "ש"],
+    ],
+    ja: [
+        ["日曜日", "日"],
+        ["月曜日", "月"],
+        ["火曜日", "火"],
+        ["水曜日", "水"],
+        ["木曜日", "木"],
+        ["金曜日", "金"],
+        ["土曜日", "土"],
+    ],
+    ru: [
+        ["Воскресенье", "Вс"],
+        ["Понедельник", "Пн"],
+        ["Вторник", "Вт"],
+        ["Среда", "Ср"],
+        ["Четверг", "Чт"],
+        ["Пятница", "Пт"],
+        ["Суббота", "Сб"],
+    ],
+    uk: [
+        ["Неділя", "Нд"],
+        ["Понеділок", "Пн"],
+        ["Вівторок", "Вт"],
+        ["Середа", "Ср"],
+        ["Четвер", "Чт"],
+        ["П’ятниця", "Пт"],
+        ["Субота", "Сб"],
+    ],
+    vi: [
+        ["Chủ Nhật", "CN"],
+        ["Thứ Hai", "T2"],
+        ["Thứ Ba", "T3"],
+        ["Thứ Tư", "T4"],
+        ["Thứ Năm", "T5"],
+        ["Thứ Sáu", "T6"],
+        ["Thứ Bảy", "T7"],
+    ],
+};
+
+export const weekDays = derived(locale, (locale) => {
+    const translated = translationCodes[locale || "en"] || "en";
+    return map[translated] ?? map["en"];
+});
diff --git a/frontend/app/src/mobile/features/calls/ActiveCall.svelte b/frontend/app/src/mobile/features/calls/ActiveCall.svelte
new file mode 100644
index 0000000000..7a36ea10c9
--- /dev/null
+++ b/frontend/app/src/mobile/features/calls/ActiveCall.svelte
@@ -0,0 +1,373 @@
+<script lang="ts">
+    import type { DailyThemeConfig } from "@daily-co/daily-js";
+    import daily, { type DailyCall } from "@daily-co/daily-js";
+    import { Column, Sheet, Title } from "component-lib";
+    import {
+        allUsersStore,
+        chatIdentifiersEqual,
+        communitiesStore,
+        currentUserIdStore,
+        currentUserStore,
+        NoMeetingToJoin,
+        OpenChat,
+        selectedChatSummaryStore,
+        selectedCommunitySummaryStore,
+        type AccessTokenType,
+        type ChatIdentifier,
+        type VideoCallType,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { videoCameraOn, videoMicOn, videoSpeakerView } from "@src/stores/settings";
+    import { toastStore } from "@src/stores/toast";
+    import {
+        activeVideoCall,
+        camera,
+        hasPresence,
+        microphone,
+        sharing,
+        type InterCallMessage,
+    } from "@src/stores/video";
+    import { currentTheme } from "@src/theme/themes";
+    import type { Theme } from "@src/theme/types";
+    import { removeQueryStringParam } from "@src/utils/urls";
+    import AreYouSure from "@src/mobile/shared/AreYouSure.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import ActiveCallHeader from "./ActiveCallHeader.svelte";
+
+    interface Props {
+        onClearSelection: () => void;
+    }
+
+    let { onClearSelection }: Props = $props();
+
+    const client = getContext<OpenChat>("client");
+
+    let iframeContainer: HTMLDivElement | undefined = $state();
+    let confirmSwitchTo:
+        | { chatId: ChatIdentifier; callType: VideoCallType; join: boolean }
+        | undefined = $state(undefined);
+    let hostEnded = $state(false);
+    let denied = $state(false);
+    let askedToSpeak = $state(false);
+    let call: DailyCall | undefined = $state();
+    let chat = $derived(normaliseChatSummary($activeVideoCall?.chatId));
+    let threadOpen = $derived($activeVideoCall?.threadOpen ?? false);
+    let participantsOpen = $derived($activeVideoCall?.participantsOpen ?? false);
+
+    $effect(() => {
+        activeVideoCall.changeTheme(getThemeConfig($currentTheme));
+    });
+
+    function normaliseChatSummary(chatId: ChatIdentifier | undefined) {
+        if (chatId) {
+            const chat = client.lookupChatSummary(chatId);
+            if (chat) {
+                switch (chat.kind) {
+                    case "direct_chat":
+                        const them = $allUsersStore.get(chat.them.userId);
+                        return {
+                            chatId,
+                            name: client.displayName(them),
+                            avatarUrl: client.userAvatarUrl(them),
+                            userId: chat.them,
+                            videoCallInProgress: chat.videoCallInProgress,
+                        };
+                    case "group_chat":
+                        return {
+                            chatId,
+                            name: chat.name,
+                            avatarUrl: client.groupAvatarUrl(chat),
+                            userId: undefined,
+                            videoCallInProgress: chat.videoCallInProgress,
+                        };
+                    case "channel":
+                        return {
+                            chatId,
+                            name: `${
+                                $communitiesStore.get({
+                                    kind: "community",
+                                    communityId: chat.id.communityId,
+                                })?.name
+                            } > ${chat.name}`,
+                            avatarUrl: client.groupAvatarUrl(chat, $selectedCommunitySummaryStore),
+                            userId: undefined,
+                            videoCallInProgress: chat.videoCallInProgress,
+                        };
+                }
+            }
+        }
+    }
+
+    export async function startOrJoinVideoCall(
+        chatId: ChatIdentifier,
+        callType: VideoCallType,
+        join: boolean,
+    ) {
+        if (iframeContainer === undefined) return;
+
+        try {
+            if ($activeVideoCall !== undefined) {
+                confirmSwitchTo = { chatId, callType, join };
+                return;
+            }
+
+            // close and threads we have open in the right panel
+            client.filterRightPanelHistory((panel) => panel.kind !== "message_thread_panel");
+            removeQueryStringParam("open");
+
+            activeVideoCall.joining(chatId, callType);
+
+            const accessType: AccessTokenType = join
+                ? { kind: "join_video_call", chatId }
+                : { kind: "start_video_call", callType, chatId };
+
+            // first we need to get access jwt from the oc backend
+            const { token, roomName, messageId, joining } = await client.getVideoChatAccessToken(
+                chatId,
+                accessType,
+            );
+
+            if (call !== undefined) {
+                await call.destroy();
+                call = undefined;
+            }
+
+            call = daily.createFrame(iframeContainer, {
+                token,
+                activeSpeakerMode: callType === "broadcast" ? true : $videoSpeakerView,
+                showLeaveButton: false,
+                showFullscreenButton: false,
+                startVideoOff: !$videoCameraOn,
+                startAudioOff: !$videoMicOn,
+                iframeStyle: {
+                    width: "100%",
+                    height: "100%",
+                },
+                url: `https://openchat.daily.co/${roomName}`,
+                userName: $currentUserStore.username,
+                theme: getThemeConfig($currentTheme),
+            });
+
+            call.on("app-message", (ev: InterCallMessage | undefined) => {
+                if (chatId.kind === "direct_chat") return;
+
+                if (ev && ev.action === "app-message") {
+                    if (ev.data.kind === "ask_to_speak") {
+                        activeVideoCall.captureAccessRequest(ev.data);
+                    }
+                    if (ev.data.kind === "demote_participant") {
+                        const me = call?.participants().local.session_id;
+                        if (
+                            ev.data.participantId === me &&
+                            $currentUserIdStore === ev.data.userId
+                        ) {
+                            askedToSpeak = false;
+                            client.setVideoCallPresence(chatId, BigInt(messageId), "hidden");
+                        }
+                    }
+                    if (ev.data.kind === "ask_to_speak_response") {
+                        const me = call?.participants().local.session_id;
+                        if (
+                            ev.data.participantId === me &&
+                            $currentUserIdStore === ev.data.userId
+                        ) {
+                            askedToSpeak = false;
+                            denied = !ev.data.approved;
+                            if (ev.data.approved) {
+                                client.setVideoCallPresence(chatId, BigInt(messageId), "default");
+                            }
+                        }
+                    }
+                }
+            });
+
+            // this only fires when *I* leave the meeting
+            call.on("left-meeting", () => {
+                // at this point I have already left the meeting and so participantCount will always report 0
+                // so we can't use it.
+                activeVideoCall.endCall();
+            });
+
+            // this fires when a remote participant leaves the meeting
+            call.on("participant-left", (ev) => {
+                // if the owner leaves, end the call
+                if (ev?.participant.owner && !ev.participant.local && callType === "broadcast") {
+                    hangup();
+                    hostEnded = true;
+                }
+            });
+
+            call.on("joined-meeting", (ev) => {
+                const me = ev?.participants?.local;
+                if (!me) return;
+                if (me.owner) {
+                    activeVideoCall.isOwner(true);
+                }
+            });
+
+            call.on("participant-updated", (ev) => {
+                if (ev?.participant.local) {
+                    microphone.set(ev?.participant.tracks.audio.state !== "off");
+                    camera.set(ev?.participant.tracks.video.state !== "off");
+                    sharing.set(ev?.participant.tracks.screenVideo.state !== "off");
+                    hasPresence.set(ev?.participant.permissions.hasPresence);
+                } else {
+                    if (ev?.participant.user_name === $currentUserStore.username) {
+                        // this means that I have joined the call from somewhere else e.g. another device
+                        hangup();
+                    }
+                }
+            });
+
+            // if we are not joining aka starting we need to tell the other users
+            if (!joining) {
+                client.ringOtherUsers(chatId, messageId, callType);
+            }
+
+            await call.join();
+
+            activeVideoCall.setCall(chatId, BigInt(messageId), call);
+
+            if (joining) {
+                switch (chatId.kind) {
+                    case "direct_chat":
+                        await client.joinVideoCall(chatId, BigInt(messageId));
+                        break;
+                    default:
+                        await client.setVideoCallPresence(
+                            chatId,
+                            BigInt(messageId),
+                            callType === "broadcast" ? "hidden" : "default",
+                        );
+                }
+            }
+        } catch (err) {
+            if (err instanceof NoMeetingToJoin) {
+                toastStore.showSuccessToast(i18nKey("videoCall.noMeetingToJoin"));
+            } else {
+                toastStore.showFailureToast(i18nKey("videoCall.callFailed"), err);
+            }
+            activeVideoCall.endCall();
+            console.error("Unable to start video call: ", err);
+        }
+    }
+
+    function getThemeConfig(theme: Theme): DailyThemeConfig {
+        const dailyTheme = {
+            colors: {
+                accent: `${theme.daily.accent}`,
+                accentText: `${theme.daily.accentText}`,
+                background: `${theme.daily.background}`,
+                backgroundAccent: `${theme.daily.backgroundAccent}`,
+                baseText: `${theme.daily.baseText}`,
+                border: `${theme.daily.border}`,
+                mainAreaBg: `${theme.daily.mainAreaBg}`,
+                mainAreaBgAccent: `${theme.daily.mainAreaBgAccent}`,
+                mainAreaText: `${theme.daily.mainAreaText}`,
+                supportiveText: `${theme.daily.supportiveText}`,
+            },
+        };
+        return dailyTheme;
+    }
+
+    function switchCall(confirmed: boolean): Promise<void> {
+        if (confirmed && confirmSwitchTo) {
+            activeVideoCall.endCall();
+            const { chatId, callType, join } = confirmSwitchTo;
+            window.setTimeout(() => startOrJoinVideoCall(chatId, callType, join), 100);
+        }
+        confirmSwitchTo = undefined;
+        return Promise.resolve();
+    }
+
+    export function askToSpeak() {
+        activeVideoCall.askToSpeak($currentUserIdStore);
+        askedToSpeak = true;
+    }
+
+    export function hangup() {
+        if ($activeVideoCall?.call) {
+            if ($hasPresence) {
+                const present = $activeVideoCall.call.participantCounts().present;
+                if (present === 1) {
+                    // I must be the last person left in the call
+                    client.endVideoCall($activeVideoCall.chatId, $activeVideoCall.messageId);
+                }
+            }
+
+            // this will trigger the left-meeting event which will in turn end the call
+            $activeVideoCall.call.leave();
+            client.popRightPanelHistory();
+        }
+    }
+
+    export function closeThread() {
+        activeVideoCall.threadOpen(false);
+    }
+</script>
+
+{#if confirmSwitchTo}
+    <AreYouSure message={i18nKey("videoCall.switchCall")} action={switchCall} />
+{/if}
+
+{#if hostEnded}
+    <Sheet onDismiss={() => (hostEnded = false)}>
+        <Column mainAxisAlignment={"center"} crossAxisAlignment={"center"} padding={"xxxl"}>
+            <Title width={"hug"} fontWeight={"bold"}>
+                <Translatable resourceKey={i18nKey("videoCall.hostEnded")} />
+            </Title>
+        </Column>
+    </Sheet>
+{/if}
+
+{#if denied}
+    <Sheet onDismiss={() => (denied = false)}>
+        <Column mainAxisAlignment={"center"} crossAxisAlignment={"center"} padding={"xxxl"}>
+            <Title width={"hug"} fontWeight={"bold"}>
+                <Translatable resourceKey={i18nKey("videoCall.denied")} />
+            </Title>
+        </Column>
+    </Sheet>
+{/if}
+
+<div
+    id="video-call-container"
+    class="video-call-container"
+    class:visible={$activeVideoCall &&
+        $activeVideoCall.view !== "minimised" &&
+        !threadOpen &&
+        !participantsOpen &&
+        chatIdentifiersEqual($activeVideoCall.chatId, $selectedChatSummaryStore?.id)}>
+    {#if chat !== undefined}
+        <ActiveCallHeader {onClearSelection} onAskToSpeak={askToSpeak} {chat} {askedToSpeak} />
+    {/if}
+    <div class="iframe-container" bind:this={iframeContainer}></div>
+</div>
+
+<style lang="scss">
+    :global(.video-call-container .section-header) {
+        background-color: var(--daily-header);
+    }
+
+    .host-ended,
+    .denied {
+        @include font(bold, normal, fs-130);
+        text-align: center;
+    }
+
+    .video-call-container {
+        position: absolute;
+        display: none;
+        flex-direction: column;
+        @include z-index("video-call");
+
+        &.visible {
+            display: flex;
+        }
+    }
+
+    .iframe-container {
+        height: 100%;
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/calls/ActiveCallActions.svelte b/frontend/app/src/mobile/features/calls/ActiveCallActions.svelte
new file mode 100644
index 0000000000..f98e6320d3
--- /dev/null
+++ b/frontend/app/src/mobile/features/calls/ActiveCallActions.svelte
@@ -0,0 +1,106 @@
+<script lang="ts">
+    import { MenuItem } from "component-lib";
+    import { chatListScopeStore, OpenChat, publish, routeForMessage } from "@client";
+    import { navigate } from "@src/utils/navigation";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import AccountMultiple from "svelte-material-icons/AccountMultiple.svelte";
+    import HandFrontLeft from "svelte-material-icons/HandFrontLeft.svelte";
+    import MessageOutline from "svelte-material-icons/MessageOutline.svelte";
+    import PhoneHangup from "svelte-material-icons/PhoneHangup.svelte";
+    import WindowMinimize from "svelte-material-icons/WindowMinimize.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { activeVideoCall, hasPresence } from "@src/stores/video";
+    import { removeQueryStringParam } from "@src/utils/urls";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import type { VideoCallChat } from "./callChat";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        chat: VideoCallChat;
+        onAskToSpeak: () => void;
+        onMinimise: () => void;
+    }
+
+    let { chat, onAskToSpeak, onMinimise }: Props = $props();
+
+    let threadOpen = $derived($activeVideoCall?.threadOpen ?? false);
+    let participantsOpen = $derived($activeVideoCall?.participantsOpen ?? false);
+    let isOwner = $derived($activeVideoCall?.isOwner ?? false);
+
+    function toggleThread() {
+        if (chat.chatId !== undefined && chat.videoCallInProgress?.messageIndex !== undefined) {
+            if (threadOpen) {
+                client.popRightPanelHistory();
+                navigate(removeQueryStringParam("open"));
+            } else {
+                navigate(
+                    `${routeForMessage(
+                        $chatListScopeStore.kind,
+                        { chatId: chat.chatId },
+                        chat.videoCallInProgress?.messageIndex,
+                    )}?open=true`,
+                );
+            }
+            activeVideoCall.threadOpen(!threadOpen);
+        }
+    }
+
+    function toggleParticipants() {
+        if (participantsOpen) {
+            publish("closeModalPage");
+        } else {
+            if (
+                $activeVideoCall?.messageId !== undefined &&
+                $activeVideoCall.chatId.kind !== "direct_chat"
+            ) {
+                publish("showVideoCallParticipants", {
+                    chatId: $activeVideoCall.chatId,
+                    messageId: $activeVideoCall.messageId,
+                    isOwner,
+                });
+            }
+        }
+        activeVideoCall.participantsOpen(!participantsOpen);
+    }
+</script>
+
+{#if $activeVideoCall?.status === "joined"}
+    {#if !$hasPresence}
+        <MenuItem onclick={onAskToSpeak}>
+            {#snippet icon(color, size)}
+                <HandFrontLeft title={$_("videoCall.askToSpeak")} {size} {color} />
+            {/snippet}
+            <Translatable resourceKey={i18nKey("videoCall.askToSpeak")} />
+        </MenuItem>
+    {/if}
+    {#if $activeVideoCall?.messageId !== undefined && $activeVideoCall.chatId.kind !== "direct_chat"}
+        <MenuItem onclick={toggleParticipants}>
+            {#snippet icon(color, size)}
+                <AccountMultiple {size} {color} />
+            {/snippet}
+            <Translatable resourceKey={i18nKey("videoCall.showParticipants")} />
+        </MenuItem>
+    {/if}
+    {#if chat.chatId && chat.videoCallInProgress?.messageIndex !== undefined}
+        <MenuItem onclick={toggleThread}>
+            {#snippet icon(color, size)}
+                <MessageOutline {size} {color} />
+            {/snippet}
+            <Translatable resourceKey={i18nKey("videoCall.chat")} />
+        </MenuItem>
+    {/if}
+    <MenuItem onclick={onMinimise}>
+        {#snippet icon(color, size)}
+            <WindowMinimize {size} {color} />
+        {/snippet}
+        <Translatable resourceKey={i18nKey("videoCall.minimise")} />
+    </MenuItem>
+    <MenuItem onclick={() => publish("hangup")}>
+        {#snippet icon(color, size)}
+            <PhoneHangup {size} {color} />
+        {/snippet}
+        <Translatable resourceKey={i18nKey("videoCall.leave")} />
+    </MenuItem>
+{/if}
diff --git a/frontend/app/src/mobile/features/calls/ActiveCallHeader.svelte b/frontend/app/src/mobile/features/calls/ActiveCallHeader.svelte
new file mode 100644
index 0000000000..eccd60e213
--- /dev/null
+++ b/frontend/app/src/mobile/features/calls/ActiveCallHeader.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+    import { Avatar, SectionHeader } from "component-lib";
+    import { activeVideoCall } from "@src/stores/video";
+    import FancyLoader from "@src/mobile/ui/icons/FancyLoader.svelte";
+    import Typing from "@src/ui/Typing.svelte";
+    import ActiveCallActions from "./ActiveCallActions.svelte";
+    import type { VideoCallChat } from "./callChat";
+
+    interface Props {
+        askedToSpeak: boolean;
+        chat: VideoCallChat;
+        onClearSelection: () => void;
+        onAskToSpeak: () => void;
+    }
+
+    let { chat, onClearSelection, onAskToSpeak }: Props = $props();
+
+    function minimise() {
+        activeVideoCall.setView("minimised");
+    }
+</script>
+
+{#snippet menu()}
+    <ActiveCallActions {chat} {onAskToSpeak} onMinimise={minimise} />
+{/snippet}
+
+<SectionHeader
+    menu={$activeVideoCall?.status === "joined" ? menu : undefined}
+    onBack={onClearSelection}>
+    {#snippet title()}
+        {chat.name}
+        {#if $activeVideoCall?.status === "joining"}
+            <Typing />
+        {/if}
+    {/snippet}
+    {#snippet avatar()}
+        {#if $activeVideoCall?.status === "joining"}
+            <FancyLoader size={"3rem"} loop />
+        {:else}
+            <Avatar url={chat.avatarUrl} name={chat.name} />
+        {/if}
+    {/snippet}
+</SectionHeader>
diff --git a/frontend/app/src/mobile/features/calls/ActiveCallParticipant.svelte b/frontend/app/src/mobile/features/calls/ActiveCallParticipant.svelte
new file mode 100644
index 0000000000..ef50b51ee5
--- /dev/null
+++ b/frontend/app/src/mobile/features/calls/ActiveCallParticipant.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+    import { IconButton } from "component-lib";
+    import type { UserSummary, VideoCallPresence, VideoCallType } from "@shared";
+    import AccountCancel from "svelte-material-icons/AccountCancel.svelte";
+    import User from "@src/mobile/shared/User.svelte";
+
+    interface Props {
+        participant: UserSummary;
+        presence: VideoCallPresence;
+        isOwner: boolean;
+        callType: VideoCallType;
+        onDemote?: (userId: string) => void;
+    }
+
+    let { participant, presence, isOwner, callType, onDemote }: Props = $props();
+
+    let showMenu = $derived(isOwner && presence === "default" && callType === "broadcast");
+
+    function demote(e?: Event) {
+        e?.stopPropagation();
+        onDemote?.(participant.userId);
+    }
+</script>
+
+{#snippet action()}
+    <IconButton onclick={demote}>
+        {#snippet icon(color)}
+            <AccountCancel {color} />
+        {/snippet}
+    </IconButton>
+{/snippet}
+
+<User action={showMenu ? action : undefined} user={participant}></User>
diff --git a/frontend/app/src/mobile/features/calls/ActiveCallParticipants.svelte b/frontend/app/src/mobile/features/calls/ActiveCallParticipants.svelte
new file mode 100644
index 0000000000..f028b9395d
--- /dev/null
+++ b/frontend/app/src/mobile/features/calls/ActiveCallParticipants.svelte
@@ -0,0 +1,158 @@
+<script lang="ts">
+    import { Chip, Container } from "component-lib";
+    import {
+        type ChatIdentifier,
+        type MultiUserChatIdentifier,
+        type OpenChat,
+        type UserSummary,
+        chatIdentifiersEqual,
+        currentUserIdStore,
+        publish,
+        subscribe,
+    } from "@client";
+    import { getContext, onMount } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { activeVideoCall } from "@src/stores/video";
+    import FancyLoader from "@src/mobile/ui/icons/FancyLoader.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import VirtualList from "@src/ui/VirtualList.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
+    import ActiveCallParticipant from "./ActiveCallParticipant.svelte";
+
+    type MappedParticipants = {
+        participants: Record<string, UserSummary>;
+        hidden: Record<string, UserSummary>;
+        lastUpdated: bigint;
+    };
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        chatId: MultiUserChatIdentifier;
+        messageId: bigint;
+        isOwner: boolean;
+    }
+
+    let { chatId, messageId, isOwner }: Props = $props();
+
+    let demoted = $state(new Set<string>());
+    let loading = $state(false);
+
+    let selectedTab: "presenters" | "viewers" = $state("presenters");
+    let videoParticipants: MappedParticipants = $state({
+        participants: {},
+        hidden: {},
+        lastUpdated: 0n,
+    });
+
+    let participants = $derived(
+        Object.values(videoParticipants.participants).filter((u) => !demoted.has(u.userId)),
+    );
+    let hidden = $derived([
+        ...Object.values(videoParticipants.hidden),
+        ...Object.values(videoParticipants.participants).filter((u) => demoted.has(u.userId)),
+    ]);
+
+    onMount(() => {
+        const unsub = subscribe("videoCallMessageUpdated", videoCallMessageUpdated);
+        refresh(true);
+        return unsub;
+    });
+
+    function videoCallMessageUpdated(payload: { chatId: ChatIdentifier; messageId: bigint }) {
+        if (chatIdentifiersEqual(chatId, payload.chatId) && messageId === payload.messageId) {
+            refresh();
+        }
+    }
+
+    function refresh(initialising: boolean = false) {
+        loading = initialising;
+        client
+            .videoCallParticipants(chatId, messageId, 0n)
+            .then((res) => {
+                videoParticipants = res;
+                Object.values(videoParticipants.hidden).forEach((h) => demoted.delete(h.userId));
+                demoted = demoted;
+            })
+            .finally(() => (loading = false));
+    }
+
+    function close() {
+        publish("closeModalPage");
+        activeVideoCall.participantsOpen(false);
+        client.popRightPanelHistory();
+    }
+
+    function selectTab(tab: "presenters" | "viewers") {
+        selectedTab = tab;
+    }
+
+    function demote(userId: string) {
+        demoted.add(userId);
+        demoted = demoted;
+        activeVideoCall.demote(userId);
+    }
+</script>
+
+<SlidingPageContent onBack={close} title={i18nKey("videoCall.participants")}>
+    <Container height={"fill"} gap={"lg"} direction={"vertical"} padding={"lg"}>
+        {#if $activeVideoCall !== undefined}
+            {#if loading}
+                <Container
+                    height={"fill"}
+                    mainAxisAlignment={"center"}
+                    crossAxisAlignment={"center"}>
+                    <FancyLoader size={"5rem"} loop />
+                </Container>
+            {:else}
+                {#if $activeVideoCall?.callType === "broadcast"}
+                    <Container gap={"sm"}>
+                        <Chip
+                            mode={selectedTab === "presenters" ? "rounded" : "unselected"}
+                            onClick={() => selectTab("presenters")}>
+                            <Translatable
+                                resourceKey={i18nKey("videoCall.presenters", {
+                                    count: participants.length,
+                                })} />
+                        </Chip>
+                        <Chip
+                            mode={selectedTab === "viewers" ? "rounded" : "unselected"}
+                            onClick={() => selectTab("viewers")}>
+                            <Translatable
+                                resourceKey={i18nKey("videoCall.viewers", {
+                                    count: hidden.length,
+                                })} />
+                        </Chip>
+                    </Container>
+                {/if}
+
+                <Container direction={"vertical"} height={"fill"}>
+                    {#if selectedTab === "presenters"}
+                        {#each participants as participant}
+                            <ActiveCallParticipant
+                                {isOwner}
+                                callType={$activeVideoCall.callType}
+                                onDemote={demote}
+                                presence={isOwner && participant.userId === $currentUserIdStore
+                                    ? "owner"
+                                    : "default"}
+                                {participant} />
+                        {/each}
+                    {/if}
+
+                    {#if selectedTab === "viewers"}
+                        <VirtualList keyFn={(user) => user.userId} items={hidden}>
+                            {#snippet children(item)}
+                                <ActiveCallParticipant
+                                    callType={$activeVideoCall.callType}
+                                    {isOwner}
+                                    presence={"hidden"}
+                                    participant={item} />
+                            {/snippet}
+                        </VirtualList>
+                    {/if}
+                </Container>
+            {/if}
+        {/if}
+    </Container>
+</SlidingPageContent>
diff --git a/frontend/app/src/mobile/features/calls/ActiveCallSummary.svelte b/frontend/app/src/mobile/features/calls/ActiveCallSummary.svelte
new file mode 100644
index 0000000000..99cae8a0c8
--- /dev/null
+++ b/frontend/app/src/mobile/features/calls/ActiveCallSummary.svelte
@@ -0,0 +1,211 @@
+<script lang="ts">
+    import { Avatar, ColourVars, Container, IconButton, Subtitle } from "component-lib";
+    import {
+        allUsersStore,
+        chatIdentifiersEqual,
+        communitiesStore,
+        OpenChat,
+        publish,
+        routeForChatIdentifier,
+        selectedChatIdStore,
+        selectedCommunitySummaryStore,
+        type ChatIdentifier,
+    } from "@client";
+    import { navigate } from "@src/utils/navigation";
+    import { getContext } from "svelte";
+    import HandFrontLeft from "svelte-material-icons/HandFrontLeft.svelte";
+    import Microphone from "svelte-material-icons/Microphone.svelte";
+    import MicrophoneOff from "svelte-material-icons/MicrophoneOff.svelte";
+    import MonitorOff from "svelte-material-icons/MonitorOff.svelte";
+    import MonitorShare from "svelte-material-icons/MonitorShare.svelte";
+    import PhoneHangup from "svelte-material-icons/PhoneHangup.svelte";
+    import Video from "svelte-material-icons/Video.svelte";
+    import VideoOff from "svelte-material-icons/VideoOff.svelte";
+    import Tooltip from "@src/desktop/ui/tooltip/Tooltip.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import {
+        activeVideoCall,
+        camera,
+        hasPresence,
+        microphone,
+        sharing,
+    } from "@src/stores/video";
+    import FancyLoader from "@src/mobile/ui/icons/FancyLoader.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    let show = $derived(
+        $activeVideoCall?.chatId !== undefined &&
+            (!chatIdentifiersEqual($activeVideoCall.chatId, $selectedChatIdStore) ||
+                (chatIdentifiersEqual($activeVideoCall.chatId, $selectedChatIdStore) &&
+                    $activeVideoCall.view === "minimised")),
+    );
+
+    let chat = $derived(normaliseChatSummary($activeVideoCall?.chatId));
+
+    function goToCall() {
+        if ($activeVideoCall) {
+            if (!chatIdentifiersEqual($activeVideoCall.chatId, $selectedChatIdStore)) {
+                navigate(routeForChatIdentifier("none", $activeVideoCall.chatId));
+            }
+            activeVideoCall.setView("default");
+        }
+    }
+
+    function askToSpeak(e?: Event) {
+        e?.stopPropagation();
+        publish("askToSpeak");
+    }
+
+    function normaliseChatSummary(chatId: ChatIdentifier | undefined) {
+        if (chatId) {
+            const chat = client.lookupChatSummary(chatId);
+            if (chat) {
+                switch (chat.kind) {
+                    case "direct_chat":
+                        const them = $allUsersStore.get(chat.them.userId);
+                        return {
+                            name: client.displayName(them),
+                            avatarUrl: client.userAvatarUrl(them),
+                            userId: chat.them,
+                        };
+                    case "group_chat":
+                        return {
+                            name: chat.name,
+                            avatarUrl: client.groupAvatarUrl(chat),
+                            userId: undefined,
+                        };
+                    case "channel":
+                        return {
+                            name: `${
+                                $communitiesStore.get({
+                                    kind: "community",
+                                    communityId: chat.id.communityId,
+                                })?.name
+                            } > ${chat.name}`,
+                            avatarUrl: client.groupAvatarUrl(chat, $selectedCommunitySummaryStore),
+                            userId: undefined,
+                        };
+                }
+            }
+        }
+    }
+
+    function toggleShare(e?: Event) {
+        e?.stopPropagation();
+        if ($activeVideoCall?.call) {
+            if ($sharing) {
+                $activeVideoCall.call.stopScreenShare();
+            } else {
+                $activeVideoCall.call.startScreenShare();
+            }
+        }
+    }
+
+    function toggleMic(e?: Event) {
+        e?.stopPropagation();
+        if ($activeVideoCall?.call) {
+            $activeVideoCall.call.setLocalAudio(!$activeVideoCall.call.localAudio());
+        }
+    }
+
+    function toggleCamera(e?: Event) {
+        e?.stopPropagation();
+        if ($activeVideoCall?.call) {
+            $activeVideoCall.call.setLocalVideo(!$activeVideoCall.call.localVideo());
+        }
+    }
+
+    function hangup(e?: Event) {
+        e?.stopPropagation();
+        publish("hangup");
+    }
+</script>
+
+{#if show && $activeVideoCall !== undefined && chat !== undefined}
+    <Container
+        crossAxisAlignment={"center"}
+        gap={"lg"}
+        padding={"lg"}
+        onClick={goToCall}
+        background={ColourVars.success}>
+        {#if $activeVideoCall.status === "joining"}
+            <FancyLoader size={"3rem"} loop />
+        {:else}
+            <Avatar size={"lg"} url={chat.avatarUrl} />
+        {/if}
+        <Container direction={"vertical"}>
+            <Container gap={"md"}>
+                {#if !$hasPresence && $activeVideoCall?.status !== "joining"}
+                    <Tooltip position={"top"} align={"middle"}>
+                        <IconButton padding={"zero"} onclick={askToSpeak}>
+                            {#snippet icon(color)}
+                                <HandFrontLeft {color} />
+                            {/snippet}
+                        </IconButton>
+                        {#snippet popupTemplate()}
+                            <Translatable resourceKey={i18nKey("videoCall.askToSpeak")} />
+                        {/snippet}
+                    </Tooltip>
+                {:else}
+                    <Tooltip position={"top"} align={"middle"}>
+                        <IconButton padding={"zero"} onclick={toggleCamera}>
+                            {#snippet icon(color)}
+                                {#if $camera}
+                                    <Video {color} />
+                                {:else}
+                                    <VideoOff {color} />
+                                {/if}
+                            {/snippet}
+                        </IconButton>
+                        {#snippet popupTemplate()}
+                            <Translatable resourceKey={i18nKey("videoCall.toggleCam")} />
+                        {/snippet}
+                    </Tooltip>
+                    <Tooltip position={"top"} align={"middle"}>
+                        <IconButton padding={"zero"} onclick={toggleMic}>
+                            {#snippet icon(color)}
+                                {#if $microphone}
+                                    <Microphone {color} />
+                                {:else}
+                                    <MicrophoneOff {color} />
+                                {/if}
+                            {/snippet}
+                        </IconButton>
+                        {#snippet popupTemplate()}
+                            <Translatable resourceKey={i18nKey("videoCall.toggleMic")} />
+                        {/snippet}
+                    </Tooltip>
+                    <Tooltip position={"top"} align={"middle"}>
+                        <IconButton padding={"zero"} onclick={toggleShare}>
+                            {#snippet icon(color)}
+                                {#if $sharing}
+                                    <MonitorOff {color} />
+                                {:else}
+                                    <MonitorShare {color} />
+                                {/if}
+                            {/snippet}
+                        </IconButton>
+                        {#snippet popupTemplate()}
+                            <Translatable resourceKey={i18nKey("videoCall.toggleShare")} />
+                        {/snippet}
+                    </Tooltip>
+                {/if}
+                <Tooltip position={"top"} align={"middle"}>
+                    <IconButton padding={"zero"} onclick={hangup}>
+                        {#snippet icon(color)}
+                            <PhoneHangup {color} />
+                        {/snippet}
+                    </IconButton>
+                    {#snippet popupTemplate()}
+                        <Translatable resourceKey={i18nKey("videoCall.leave")} />
+                    {/snippet}
+                </Tooltip>
+            </Container>
+            <Subtitle fontWeight={"bold"}>
+                {chat.name}
+            </Subtitle>
+        </Container>
+    </Container>
+{/if}
diff --git a/frontend/app/src/mobile/features/calls/IncomingCall.svelte b/frontend/app/src/mobile/features/calls/IncomingCall.svelte
new file mode 100644
index 0000000000..f69ef24e2b
--- /dev/null
+++ b/frontend/app/src/mobile/features/calls/IncomingCall.svelte
@@ -0,0 +1,128 @@
+<script lang="ts">
+    import { Avatar, Body, ColourVars, Column, Row, Sheet, Subtitle } from "component-lib";
+    import {
+        allUsersStore,
+        communitiesStore,
+        selectedCommunitySummaryStore,
+        type ChatIdentifier,
+        type OpenChat,
+        type VideoCallType,
+    } from "@client";
+    import { getContext } from "svelte";
+    import Phone from "svelte-material-icons/Phone.svelte";
+    import PhoneHangup from "svelte-material-icons/PhoneHangup.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import {
+        activeVideoCall,
+        incomingVideoCall,
+        ringtoneUrls,
+        selectedRingtone,
+        type IncomingVideoCall,
+        type RingtoneKey,
+    } from "@src/stores/video";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    interface Props {
+        onJoinVideoCall: (chatId: ChatIdentifier, callType: VideoCallType) => void;
+    }
+
+    let { onJoinVideoCall }: Props = $props();
+
+    const client = getContext<OpenChat>("client");
+
+    const chat = $derived(normaliseChatSummary($incomingVideoCall));
+    const ringtoneUrl = $derived(ringtoneUrls[$selectedRingtone as RingtoneKey]);
+    const isOnAnotherCall = $derived($activeVideoCall !== undefined);
+
+    function normaliseChatSummary(call: IncomingVideoCall | undefined) {
+        if (call) {
+            const chat = client.lookupChatSummary(call.chatId);
+            const initiator = $allUsersStore.get(call.userId);
+            if (chat && initiator) {
+                switch (chat.kind) {
+                    case "direct_chat":
+                        const them = $allUsersStore.get(chat.them.userId);
+                        return {
+                            chatId: chat.id,
+                            name: client.displayName(them),
+                            avatarUrl: client.userAvatarUrl(them),
+                            initiator: initiator.username,
+                        };
+                    case "group_chat":
+                        return {
+                            chatId: chat.id,
+                            name: chat.name,
+                            avatarUrl: client.groupAvatarUrl(chat),
+                            initiator: initiator.username,
+                        };
+                    case "channel":
+                        return {
+                            chatId: chat.id,
+                            name: `${
+                                $communitiesStore.get({
+                                    kind: "community",
+                                    communityId: chat.id.communityId,
+                                })?.name
+                            } > ${chat.name}`,
+                            avatarUrl: client.groupAvatarUrl(chat, $selectedCommunitySummaryStore),
+                            initiator: initiator.username,
+                        };
+                }
+            }
+        }
+    }
+
+    function join() {
+        if ($incomingVideoCall !== undefined) {
+            onJoinVideoCall($incomingVideoCall.chatId, $incomingVideoCall.callType);
+        }
+    }
+
+    function cancel() {
+        incomingVideoCall.set(undefined);
+    }
+</script>
+
+{#if chat !== undefined}
+    {#if !isOnAnotherCall}
+        <audio playsinline={true} autoplay={true} src={ringtoneUrl} muted={false} preload="auto">
+        </audio>
+    {/if}
+    <Sheet onDismiss={cancel}>
+        <Column gap={"xxl"} padding={"xxxl"}>
+            <Row gap={"lg"}>
+                <Avatar url={chat.avatarUrl} size={"lg"} />
+                <Column>
+                    <Subtitle fontWeight={"bold"}>{chat.name}</Subtitle>
+                    <Body colour={"textSecondary"}>
+                        <Translatable
+                            resourceKey={i18nKey("videoCall.remoteStart", {
+                                name: chat.initiator,
+                            })} />
+                    </Body>
+                </Column>
+            </Row>
+            <Row
+                padding={["zero", "xl"]}
+                gap={"lg"}
+                crossAxisAlignment={"center"}
+                mainAxisAlignment={"spaceAround"}>
+                {@render button(PhoneHangup, ColourVars.error, cancel)}
+                {@render button(Phone, ColourVars.success, join)}
+            </Row>
+        </Column>
+    </Sheet>
+{/if}
+
+{#snippet button(Icon: any, colour: string, onClick: () => void)}
+    <Column
+        mainAxisAlignment={"center"}
+        crossAxisAlignment={"center"}
+        borderRadius={"circle"}
+        {onClick}
+        backgroundColor={colour}
+        width={{ size: "5rem" }}
+        height={{ size: "5rem" }}>
+        <Icon size={"2.5rem"} color={ColourVars.textPrimary} />
+    </Column>
+{/snippet}
diff --git a/frontend/app/src/mobile/features/calls/VideoCallAccessRequests.svelte b/frontend/app/src/mobile/features/calls/VideoCallAccessRequests.svelte
new file mode 100644
index 0000000000..6fac36aefd
--- /dev/null
+++ b/frontend/app/src/mobile/features/calls/VideoCallAccessRequests.svelte
@@ -0,0 +1,83 @@
+<script lang="ts">
+    import { Avatar } from "component-lib";
+    import { allUsersStore, iconSize, type OpenChat } from "@client";
+    import { getContext } from "svelte";
+    import ThumbDown from "svelte-material-icons/ThumbDown.svelte";
+    import ThumbUp from "svelte-material-icons/ThumbUp.svelte";
+    import { cubicInOut } from "svelte/easing";
+    import { fly } from "svelte/transition";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { activeVideoCall, type RequestToSpeak } from "@src/stores/video";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    let requests = $derived($activeVideoCall?.accessRequests ?? []);
+
+    function approve(request: RequestToSpeak) {
+        activeVideoCall.approveAccessRequest(request);
+    }
+
+    function reject(request: RequestToSpeak) {
+        activeVideoCall.rejectAccessRequest(request);
+    }
+</script>
+
+{#each requests as request, i}
+    <div
+        style={`top: ${50 + i * 8}px; right: ${50 + i * 8}px;`}
+        in:fly={{
+            duration: 300,
+            y: -500,
+            opacity: 0,
+            easing: cubicInOut,
+        }}
+        out:fly={{
+            duration: 300,
+            x: 500,
+            opacity: 0,
+            easing: cubicInOut,
+        }}
+        class="message">
+        <div class="avatar">
+            <Avatar url={client.userAvatarUrl($allUsersStore.get(request.userId))} size={"sm"} />
+        </div>
+        <Translatable
+            resourceKey={i18nKey("videoCall.accessRequest", {
+                username: $allUsersStore.get(request.userId)?.username,
+            })} />
+        <!-- svelte-ignore a11y_interactive_supports_focus -->
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <div role="button" onclick={() => approve(request)} class="btn">
+            <ThumbUp size={$iconSize} color={"var(--vote-yes-color)"} />
+        </div>
+        <!-- svelte-ignore a11y_interactive_supports_focus -->
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <div role="button" onclick={() => reject(request)} class="btn">
+            <ThumbDown size={$iconSize} color={"var(--vote-no-color)"} />
+        </div>
+    </div>
+{/each}
+
+<style lang="scss">
+    .message {
+        position: absolute;
+        @include z-index("toast");
+        padding: $sp4;
+        width: 100%;
+        max-width: 800px;
+        margin: 0 $sp4;
+        display: flex;
+        gap: $sp4;
+        justify-content: center;
+        align-items: center;
+        border: 1px solid var(--bd);
+        background-color: var(--modal-bg);
+        box-shadow: var(--modal-sh);
+        color: var(--txt);
+
+        .btn {
+            cursor: pointer;
+        }
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/home/video/callChat.ts b/frontend/app/src/mobile/features/calls/callChat.ts
similarity index 100%
rename from frontend/app/src/components_mobile/home/video/callChat.ts
rename to frontend/app/src/mobile/features/calls/callChat.ts
diff --git a/frontend/app/src/components_mobile/home/ArchiveOffIcon.svelte b/frontend/app/src/mobile/features/chatlist/ArchiveOffIcon.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/ArchiveOffIcon.svelte
rename to frontend/app/src/mobile/features/chatlist/ArchiveOffIcon.svelte
diff --git a/frontend/app/src/mobile/features/chatlist/ChatList.svelte b/frontend/app/src/mobile/features/chatlist/ChatList.svelte
new file mode 100644
index 0000000000..c8a6774d5e
--- /dev/null
+++ b/frontend/app/src/mobile/features/chatlist/ChatList.svelte
@@ -0,0 +1,184 @@
+<script lang="ts">
+    import { chatListFilterStore } from "@src/stores/settings";
+    import { Container, FloatingButton } from "component-lib";
+    import {
+        allUsersStore,
+        chatIdentifiersEqual,
+        chatIdentifierToString,
+        type ChatListScope,
+        chatListScopesEqual,
+        chatListScopeStore,
+        chatsInitialisedStore,
+        chatSummariesListStore,
+        type ChatSummary as ChatSummaryType,
+        type CombinedUnreadCounts,
+        currentUserIdStore,
+        emptyCombinedUnreadCounts,
+        numberOfThreadsStore,
+        OpenChat,
+        publish,
+        routeForChatIdentifier,
+        selectedChatIdStore,
+        selectedCommunitySummaryStore,
+        unreadCommunityChannelCountsStore,
+        unreadDirectAndGroupCountsStore,
+        unreadFavouriteCountsStore,
+    } from "@client";
+    import { navigate } from "@src/utils/navigation";
+    import { getContext, tick } from "svelte";
+    import Pencil from "svelte-material-icons/LeadPencil.svelte";
+    import ChatListFilters, { type ChatListFilter } from "./ChatListFilters.svelte";
+    import ChatSummary from "./ChatSummary.svelte";
+    import DirectAndGroupChatsHeader from "@src/mobile/features/chats/community/DirectAndGroupChatsHeader.svelte";
+    import FavouriteChatsHeader from "@src/mobile/features/chats/community/FavouriteChatsHeader.svelte";
+    import SelectedCommunityHeader from "@src/mobile/features/chats/community/SelectedCommunityHeader.svelte";
+    import NoMatchingChats from "./NoMatchingChats.svelte";
+    import ThreadIndicator from "./ThreadIndicator.svelte";
+
+    const client = getContext<OpenChat>("client");
+    const TO_SHOW = 30;
+
+    let previousScope: ChatListScope = $chatListScopeStore;
+    let chatsToShow = $state(TO_SHOW);
+    let rendering = $state(false);
+    function insideBottom() {
+        if (rendering || chatsToShow >= filteredChats.length) return;
+        rendering = true;
+        chatsToShow = Math.min(filteredChats.length, chatsToShow + TO_SHOW / 2);
+        tick().then(() => (rendering = false));
+    }
+
+    $effect(() => {
+        if (!chatListScopesEqual(previousScope, $chatListScopeStore)) {
+            onScopeChanged();
+        }
+    });
+
+    function anythingUnread(unread: CombinedUnreadCounts): boolean {
+        return (
+            unread.chats.muted +
+                unread.chats.unmuted +
+                unread.threads.muted +
+                unread.threads.unmuted >
+            0
+        );
+    }
+
+    function chatSelected({ id }: ChatSummaryType): void {
+        const url = routeForChatIdentifier($chatListScopeStore.kind, id);
+        navigate(url);
+    }
+
+    function onScopeChanged() {
+        previousScope = $chatListScopeStore;
+    }
+
+    let user = $derived($allUsersStore.get($currentUserIdStore));
+    let unreadCounts = $derived.by(() => {
+        switch ($chatListScopeStore.kind) {
+            case "chats": {
+                return $unreadDirectAndGroupCountsStore;
+            }
+            case "favourite": {
+                return $unreadFavouriteCountsStore;
+            }
+            case "community": {
+                return (
+                    $unreadCommunityChannelCountsStore.get($chatListScopeStore.id) ??
+                    emptyCombinedUnreadCounts()
+                );
+            }
+            default:
+                return emptyCombinedUnreadCounts();
+        }
+    });
+    let canMarkAllRead = $derived(anythingUnread(unreadCounts));
+    let allChats = $derived($chatSummariesListStore);
+    let filteredChats = $derived.by(() => {
+        if ($chatListScopeStore.kind !== "chats") return allChats;
+        return allChats.filter((c) => {
+            return (
+                $chatListFilterStore === "all" ||
+                ($chatListFilterStore === "unread" &&
+                    client.unreadMessageCount(c.id, c.latestMessage?.event.messageIndex) > 0) ||
+                ($chatListFilterStore === "direct" && c.kind === "direct_chat") ||
+                ($chatListFilterStore === "groups" && c.kind === "group_chat")
+            );
+        });
+    });
+
+    let chats = $derived(filteredChats.slice(0, chatsToShow));
+
+    function newMessage() {
+        publish("newMessage");
+    }
+</script>
+
+{#if user}
+    {#if $chatListScopeStore.kind === "chats"}
+        <DirectAndGroupChatsHeader {canMarkAllRead} />
+    {:else if $chatListScopeStore.kind === "favourite"}
+        <FavouriteChatsHeader {canMarkAllRead} />
+    {:else if $selectedCommunitySummaryStore && $chatListScopeStore.kind === "community"}
+        <SelectedCommunityHeader community={$selectedCommunitySummaryStore} {canMarkAllRead} />
+    {/if}
+
+    <Container
+        closeMenuOnScroll
+        direction={"vertical"}
+        gap={"sm"}
+        width={"fill"}
+        onInsideEnd={insideBottom}
+        height={"fill"}
+        padding={["lg", "zero", "xxxl"]}>
+        <!-- chat filters -->
+        {#if $chatListScopeStore.kind === "chats"}
+            <ChatListFilters bind:filter={$chatListFilterStore as ChatListFilter} />
+        {/if}
+
+        {#if chats.length === 0 && $chatsInitialisedStore}
+            <NoMatchingChats onReset={() => chatListFilterStore.set("all")} />
+        {:else}
+            <!-- threads -->
+            {#if $numberOfThreadsStore > 0}
+                <ThreadIndicator
+                    onClick={() => publish("showThreads")}
+                    unread={unreadCounts.threads} />
+            {/if}
+
+            <!-- chat list -->
+            <Container
+                supplementalClass={"chat_summary_list"}
+                direction={"vertical"}
+                width={"fill"}
+                height={"hug"}
+                padding={["sm", "zero", "zero"]}>
+                {#each chats as chatSummary (chatIdentifierToString(chatSummary.id))}
+                    <ChatSummary
+                        {chatSummary}
+                        selected={chatIdentifiersEqual($selectedChatIdStore, chatSummary.id)}
+                        visible={!chatSummary.membership.archived}
+                        onChatSelected={chatSelected} />
+                {/each}
+            </Container>
+        {/if}
+    </Container>
+{/if}
+
+{#if $chatListScopeStore.kind === "chats"}
+    <div class="floating">
+        <FloatingButton onClick={newMessage}>
+            {#snippet icon(color)}
+                <Pencil {color}></Pencil>
+            {/snippet}
+        </FloatingButton>
+    </div>
+{/if}
+
+<style lang="scss">
+    .floating {
+        position: absolute;
+        bottom: var(--sp-md);
+        right: var(--sp-md);
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/home/ChatListFilters.svelte b/frontend/app/src/mobile/features/chatlist/ChatListFilters.svelte
similarity index 93%
rename from frontend/app/src/components_mobile/home/ChatListFilters.svelte
rename to frontend/app/src/mobile/features/chatlist/ChatListFilters.svelte
index 571bbe9774..bc012db135 100644
--- a/frontend/app/src/components_mobile/home/ChatListFilters.svelte
+++ b/frontend/app/src/mobile/features/chatlist/ChatListFilters.svelte
@@ -5,7 +5,7 @@
 <script lang="ts">
     import { i18nKey } from "@src/i18n/i18n";
     import { Container, transition, Chip } from "component-lib";
-    import Translatable from "../Translatable.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
 
     interface Props {
         filter: ChatListFilter;
diff --git a/frontend/app/src/mobile/features/chatlist/ChatSummary.svelte b/frontend/app/src/mobile/features/chatlist/ChatSummary.svelte
new file mode 100644
index 0000000000..38ab9a7deb
--- /dev/null
+++ b/frontend/app/src/mobile/features/chatlist/ChatSummary.svelte
@@ -0,0 +1,622 @@
+<script lang="ts">
+    import { trackedEffect } from "@src/utils/effects.svelte";
+    import {
+        Avatar,
+        Body,
+        BodySmall,
+        ColourVars,
+        Container,
+        CountBadge,
+        MenuItem,
+        MenuTrigger,
+        Row,
+        Subtitle,
+    } from "component-lib";
+    import type {
+        ChatSummary,
+        DiamondMembershipStatus,
+        MessageContent,
+        TypersByKey,
+        UserLookup,
+    } from "@client";
+    import {
+        allUsersStore,
+        chatIdentifiersEqual,
+        chatListScopeStore,
+        communitiesStore,
+        currentUserIdStore,
+        favouritesStore,
+        messagesRead,
+        notificationsSupported,
+        OpenChat,
+        pinnedChatsStore,
+        publish,
+        ROLE_NONE,
+        routeForScope,
+        selectedChatIdStore,
+        selectedCommunitySummaryStore,
+        suspendedUserStore,
+        translationsStore,
+        byContext as typersByContext,
+    } from "@client";
+    import { navigate } from "@src/utils/navigation";
+    import { getContext, onMount, untrack } from "svelte";
+    import { _ } from "svelte-i18n";
+    import ArchiveIcon from "svelte-material-icons/Archive.svelte";
+    import BellIcon from "svelte-material-icons/Bell.svelte";
+    import MutedIcon from "svelte-material-icons/BellOff.svelte";
+    import CameraTimer from "svelte-material-icons/CameraTimer.svelte";
+    import CheckboxMultipleMarked from "svelte-material-icons/CheckboxMultipleMarked.svelte";
+    import Heart from "svelte-material-icons/Heart.svelte";
+    import Image from "svelte-material-icons/ImageOutline.svelte";
+    import LocationExit from "svelte-material-icons/LocationExit.svelte";
+    import LockOutline from "svelte-material-icons/LockOutline.svelte";
+    import Phone from "svelte-material-icons/Phone.svelte";
+    import PinIcon from "svelte-material-icons/Pin.svelte";
+    import PinOffIcon from "svelte-material-icons/PinOff.svelte";
+    import Sticker from "svelte-material-icons/StickerEmoji.svelte";
+    import Swap from "svelte-material-icons/SwapHorizontal.svelte";
+    import Video from "svelte-material-icons/VideoOutline.svelte";
+    import Waveform from "svelte-material-icons/Waveform.svelte";
+    import DeleteOutline from "svelte-material-icons/DeleteOutline.svelte";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import { canDeleteDirectChat, publishDeleteDirectChat } from "@src/utils/directChat";
+    import { rtlStore } from "@src/stores/rtl";
+    import { now } from "@src/stores/time";
+    import { toastStore } from "@src/stores/toast";
+    import { buildDisplayName } from "@src/utils/user";
+    import Bitcoin from "@src/mobile/ui/icons/Bitcoin.svelte";
+    import HeartMinus from "@src/mobile/ui/icons/HeartMinus.svelte";
+    import HeartPlus from "@src/mobile/ui/icons/HeartPlus.svelte";
+    import MemeFighter from "@src/mobile/ui/icons/MemeFighter.svelte";
+    import WithVerifiedBadge from "@src/mobile/ui/icons/WithVerifiedBadge.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import Typing from "@src/ui/Typing.svelte";
+    import ArchiveOffIcon from "./ArchiveOffIcon.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import BotBadge from "@src/mobile/features/bots/exports/BotBadge.svelte";
+    import { scrollStatus } from "@src/stores/scroll.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        chatSummary: ChatSummary;
+        selected: boolean;
+        visible: boolean;
+        onChatSelected: (chat: ChatSummary) => void;
+    }
+
+    let { chatSummary, visible, onChatSelected }: Props = $props();
+
+    let externalContent = $derived(
+        chatSummary.kind === "channel" && chatSummary.externalUrl !== undefined,
+    );
+    let verified = $derived(chatSummary.kind === "group_chat" && chatSummary.verified);
+    let unreadMessages = $state<number>(0);
+    let unreadMentions = $state<number>(0);
+    let chat = $derived(normaliseChatSummary($now, chatSummary, $typersByContext));
+    let lastMessage = $derived(formatLatestMessage(chatSummary, $allUsersStore));
+    let displayDate = $derived(client.getDisplayDate(chatSummary));
+    let community = $derived(
+        chatSummary.kind === "channel"
+            ? $communitiesStore.get({ kind: "community", communityId: chatSummary.id.communityId })
+            : undefined,
+    );
+    let readonly = $derived(client.isChatReadOnly(chatSummary.id));
+    let pinned = $derived(
+        $pinnedChatsStore
+            .get($chatListScopeStore.kind)
+            ?.find((id) => chatIdentifiersEqual(id, chatSummary.id)) !== undefined,
+    );
+    let muted = $derived(chatSummary.membership.notificationsMuted);
+    let atEveryoneMuted = $derived(chatSummary.membership.atEveryoneMuted);
+    let LastMessageIcon = $derived(getLastMessageIcon());
+
+    let longpressCooldown = $derived(scrollStatus.isCooldown);
+
+    $effect(() => updateUnreadCounts(chatSummary));
+
+    onMount(() => {
+        return messagesRead.subscribe(() => updateUnreadCounts(chatSummary));
+    });
+
+    trackedEffect("unarchive-chat", () => {
+        if (chatSummary.membership.archived && unreadMessages > 0 && !chat.bot) {
+            unarchiveChat();
+        }
+    });
+
+    /***
+     * This needs to be called both when the chatSummary changes (because that may have changed the latestMessage)
+     * and when the internal state of the MessageReadTracker changes. Both are necessary to get the right value
+     * at all times.
+     */
+    function updateUnreadCounts(chatSummary: ChatSummary) {
+        untrack(() => {
+            unreadMessages = client.unreadMessageCount(
+                chatSummary.id,
+                chatSummary.latestMessage?.event.messageIndex,
+            );
+
+            unreadMentions = getUnreadMentionCount(chatSummary);
+
+            if (chatSummary.membership.archived && unreadMessages > 0 && !chat.bot) {
+                unarchiveChat();
+            }
+        });
+    }
+
+    function getUnreadMentionCount(chat: ChatSummary): number {
+        if (chat.kind === "direct_chat") return 0;
+        return chat.membership.mentions.filter(
+            (m) => !client.isMessageRead({ chatId: chat.id }, m.messageIndex, m.messageId),
+        ).length;
+    }
+
+    function getLastMessageIcon() {
+        switch (chatSummary.latestMessage?.event?.content?.kind) {
+            case "audio_content":
+                return Waveform;
+            case "giphy_content":
+                return Sticker;
+            case "p2p_swap_content":
+            case "p2p_swap_content_initial":
+                return Swap;
+            case "crypto_content":
+                return Bitcoin;
+            case "image_content":
+                return Image;
+            case "meme_fighter_content":
+                return MemeFighter;
+            case "video_call_content":
+                return Phone;
+            case "video_content":
+                return Video;
+            default:
+                return undefined;
+        }
+    }
+
+    function normaliseChatSummary(_now: number, chatSummary: ChatSummary, typing: TypersByKey) {
+        const fav =
+            $chatListScopeStore.kind !== "favourite" && $favouritesStore.has(chatSummary.id);
+        const muted = chatSummary.membership.notificationsMuted;
+        const video = chatSummary.videoCallInProgress
+            ? { muted: muted ? 1 : 0, unmuted: muted ? 0 : 1 }
+            : { muted: 0, unmuted: 0 };
+        switch (chatSummary.kind) {
+            case "direct_chat":
+                const them = $allUsersStore.get(chatSummary.them.userId);
+                return {
+                    name: client.displayName(them),
+                    diamondStatus: them?.diamondStatus ?? "inactive",
+                    streak: them?.streak ?? 0,
+                    chitEarned: them?.totalChitEarned,
+                    hasAchievedMaxStreak: (them?.maxStreak ?? 0) >= 365,
+                    avatarUrl: client.userAvatarUrl(them),
+                    userId: chatSummary.them,
+                    typing: client.getTypingString(
+                        $_,
+                        $allUsersStore,
+                        { chatId: chatSummary.id },
+                        typing,
+                    ),
+                    fav,
+                    eventsTTL: chatSummary.eventsTTL,
+                    video,
+                    private: false,
+                    uniquePerson: them?.isUniquePerson ?? false,
+                    bot: them?.kind === "bot",
+                };
+            default:
+                return {
+                    name: chatSummary.name,
+                    diamondStatus: "inactive" as DiamondMembershipStatus["kind"],
+                    streak: 0,
+                    chitEarned: undefined,
+                    hasAchievedMaxStreak: false,
+                    avatarUrl: client.groupAvatarUrl(chatSummary, $selectedCommunitySummaryStore),
+                    userId: undefined,
+                    typing: client.getTypingString(
+                        $_,
+                        $allUsersStore,
+                        { chatId: chatSummary.id },
+                        typing,
+                    ),
+                    fav,
+                    eventsTTL: chatSummary.eventsTTL,
+                    video,
+                    private: !chatSummary.public,
+                    uniquePerson: false,
+                    bot: false,
+                };
+        }
+    }
+
+    function translateMessage(messageId: bigint, content: MessageContent): MessageContent {
+        const translation = $translationsStore.get(messageId);
+        return translation ? client.applyTranslation(content, translation) : content;
+    }
+
+    function formatLatestMessage(chatSummary: ChatSummary, users: UserLookup): string {
+        if (chatSummary.latestMessageIndex === undefined || externalContent) {
+            return "";
+        }
+
+        if (
+            (chatSummary.latestMessage !== undefined &&
+                chatSummary.eventsTtlLastUpdated > chatSummary.latestMessage.timestamp) ||
+            (chatSummary.latestMessage === undefined &&
+                chatSummary.eventsTTL !== undefined &&
+                chatSummary.membership.role !== ROLE_NONE)
+        ) {
+            return chatSummary.eventsTTL !== undefined
+                ? $_("disappearingMessages.timeUpdated", {
+                      values: {
+                          duration: client.formatDuration(Number(chatSummary.eventsTTL)),
+                      },
+                  })
+                : $_("disappearingMessages.disabled");
+        }
+
+        if (chatSummary.latestMessage === undefined) {
+            return "";
+        }
+
+        const latestMessageText = client.getContentAsText(
+            $_,
+            translateMessage(
+                chatSummary.latestMessage.event.messageId,
+                chatSummary.latestMessage.event.content,
+            ),
+        );
+
+        if (chatSummary.kind === "direct_chat") {
+            return latestMessageText;
+        }
+
+        let userType: "user" | "me" | "webhook" = "user";
+        if (chatSummary.latestMessage.event.senderContext?.kind === "webhook") {
+            userType = "webhook";
+        } else if (chatSummary.latestMessage.event.sender === $currentUserIdStore) {
+            userType = "me";
+        }
+
+        const user = buildDisplayName(
+            users,
+            chatSummary.latestMessage.event.sender,
+            userType,
+            false,
+        );
+
+        return `${user}: ${latestMessageText}`;
+    }
+
+    function pinChat() {
+        client.pinChat(chatSummary.id).then((success) => {
+            if (!success) {
+                toastStore.showFailureToast(i18nKey("pinChat.failed"));
+            }
+        });
+    }
+
+    function unpinChat() {
+        client.unpinChat(chatSummary.id).then((success) => {
+            if (!success) {
+                toastStore.showFailureToast(i18nKey("pinChat.unpinFailed"));
+            }
+        });
+    }
+
+    function toggleMuteNotifications(
+        mute: boolean | undefined,
+        muteAtEveryone: boolean | undefined,
+    ) {
+        publish("toggleMuteNotifications", { chatId: chatSummary.id, mute, muteAtEveryone });
+    }
+
+    function archiveChat() {
+        client.markAllRead(chatSummary);
+        client.archiveChat(chatSummary.id).then((success) => {
+            if (!success) {
+                toastStore.showFailureToast(i18nKey("archiveChatFailed"));
+            }
+        });
+        if (chatSummary.id === $selectedChatIdStore) {
+            navigate(routeForScope($chatListScopeStore));
+        }
+    }
+
+    function selectChat() {
+        onChatSelected(chatSummary);
+    }
+
+    function addToFavourites() {
+        client.addToFavourites(chatSummary.id);
+    }
+
+    function removeFromFavourites() {
+        client.removeFromFavourites(chatSummary.id);
+    }
+
+    function unarchiveChat() {
+        publish("unarchiveChat", chatSummary.id);
+    }
+
+    function leaveGroup() {
+        if (chatSummary.kind === "direct_chat") return;
+        publish("leaveGroup", {
+            kind: "leave",
+            chatId: chatSummary.id,
+            level: chatSummary.level,
+        });
+    }
+
+    let showDeleteDirectChat = $derived(canDeleteDirectChat(chatSummary));
+</script>
+
+{#snippet menuItems()}
+    {#if !$favouritesStore.has(chatSummary.id)}
+        <MenuItem onclick={addToFavourites}>
+            {#snippet icon(_, size)}
+                <HeartPlus color={"var(--error)"} {size} />
+            {/snippet}
+            <Translatable resourceKey={i18nKey("communities.addToFavourites")} />
+        </MenuItem>
+    {:else}
+        <MenuItem onclick={removeFromFavourites}>
+            {#snippet icon(_, size)}
+                <HeartMinus color={"var(--error)"} {size} />
+            {/snippet}
+            <Translatable resourceKey={i18nKey("communities.removeFromFavourites")} />
+        </MenuItem>
+    {/if}
+    {#if !pinned}
+        <MenuItem onclick={pinChat}>
+            {#snippet icon(color, size)}
+                <PinIcon {color} {size} />
+            {/snippet}
+            <Translatable resourceKey={i18nKey("pinChat.menuItem")} />
+        </MenuItem>
+    {:else}
+        <MenuItem onclick={unpinChat}>
+            {#snippet icon(color, size)}
+                <PinOffIcon {color} {size} />
+            {/snippet}
+            <Translatable resourceKey={i18nKey("pinChat.unpinMenuItem")} />
+        </MenuItem>
+    {/if}
+    {#if notificationsSupported && !externalContent}
+        {#if muted}
+            <MenuItem onclick={() => toggleMuteNotifications(false, undefined)}>
+                {#snippet icon(color, size)}
+                    <BellIcon {color} {size} />
+                {/snippet}
+                <Translatable resourceKey={i18nKey("unmuteNotifications")} />
+            </MenuItem>
+        {:else}
+            <MenuItem onclick={() => toggleMuteNotifications(true, undefined)}>
+                {#snippet icon(color, size)}
+                    <MutedIcon {color} {size} />
+                {/snippet}
+                <Translatable resourceKey={i18nKey("muteNotifications")} />
+            </MenuItem>
+        {/if}
+        {#if atEveryoneMuted}
+            <MenuItem onclick={() => toggleMuteNotifications(undefined, false)}>
+                {#snippet icon(color, size)}
+                    <MutedIcon {color} {size} />
+                {/snippet}
+                <Translatable resourceKey={i18nKey("unmuteAtEveryone")} />
+            </MenuItem>
+        {:else}
+            <MenuItem onclick={() => toggleMuteNotifications(undefined, true)}>
+                {#snippet icon(color, size)}
+                    <MutedIcon {color} {size} />
+                {/snippet}
+                <Translatable resourceKey={i18nKey("muteAtEveryone")} />
+            </MenuItem>
+        {/if}
+    {/if}
+    {#if !externalContent}
+        <MenuItem disabled={unreadMessages === 0} onclick={() => client.markAllRead(chatSummary)}>
+            {#snippet icon(color, size)}
+                <CheckboxMultipleMarked {size} {color} />
+            {/snippet}
+            <Translatable resourceKey={i18nKey("markAllRead")} />
+        </MenuItem>
+    {/if}
+    {#if !chat.bot}
+        {#if chatSummary.membership.archived}
+            <MenuItem onclick={selectChat}>
+                {#snippet icon(color, size)}
+                    <ArchiveOffIcon {color} {size} />
+                {/snippet}
+                <Translatable resourceKey={i18nKey("unarchiveChat")} />
+            </MenuItem>
+        {:else}
+            <MenuItem onclick={archiveChat}>
+                {#snippet icon(color, size)}
+                    <ArchiveIcon {color} {size} />
+                {/snippet}
+                <Translatable resourceKey={i18nKey("archiveChat")} />
+            </MenuItem>
+        {/if}
+    {/if}
+    {#if chatSummary.kind !== "direct_chat" && client.canLeaveGroup(chatSummary.id)}
+        <MenuItem danger onclick={leaveGroup}>
+            {#snippet icon(color, size)}
+                <LocationExit {color} {size} />
+            {/snippet}
+            {interpolate($_, i18nKey("leaveGroup", undefined, chatSummary.level, true))}
+        </MenuItem>
+    {/if}
+    {#if showDeleteDirectChat}
+        <MenuItem danger onclick={() => publishDeleteDirectChat(chatSummary)}>
+            {#snippet icon(color, size)}
+                <DeleteOutline {color} {size} />
+            {/snippet}
+            <Translatable resourceKey={i18nKey("deleteChat")} />
+        </MenuItem>
+    {/if}
+{/snippet}
+
+{#if visible}
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <Container supplementalClass="chat_summary_wrapper" padding={["zero", "sm"]}>
+        <MenuTrigger
+            fill
+            maskUI
+            classString={"chat_summary_menu_trigger"}
+            disabled={$suspendedUserStore || readonly}
+            position={"bottom"}
+            align={"end"}
+            mobileMode={"longpress"}
+            withBgEffect={true}
+            {longpressCooldown}
+            {menuItems}>
+            <Container
+                onClick={selectChat}
+                supplementalClass={"chat_summary"}
+                padding={["lg", "sm"]}
+                mainAxisAlignment={"spaceBetween"}
+                crossAxisAlignment={"center"}
+                gap={"lg"}
+                borderRadius={"md"}>
+                <div class="avatar">
+                    <Avatar size={"lg"} url={chat.avatarUrl} name={chat.name} />
+                    {#if chat.eventsTTL}
+                        <div class="expires">
+                            <CameraTimer size={"1em"} color={"var(--txt)"} />
+                        </div>
+                    {/if}
+                    <!-- TODO video call info should be the displayed instead of the last message if tehre are active calls  -->
+                    <!-- <VideoCallIcon video={chat.video} /> -->
+                    {#if chat.private}
+                        <div class="private">
+                            <LockOutline size="0.85rem" color={ColourVars.error} />
+                        </div>
+                    {/if}
+                </div>
+                <Container width={"fill"} direction={"vertical"}>
+                    <Container
+                        gap={"lg"}
+                        width={"fill"}
+                        mainAxisAlignment={"spaceBetween"}
+                        crossAxisAlignment={"center"}>
+                        <Container crossAxisAlignment={"center"} gap={"sm"} width={"fill"}>
+                            <WithVerifiedBadge {verified}>
+                                <Subtitle ellipsisTruncate fontWeight={"semi-bold"}>
+                                    {#if community !== undefined && $chatListScopeStore.kind === "favourite"}
+                                        <span>{community.name}</span>
+                                        <span>{">"}</span>
+                                    {/if}
+                                    <span>{chat.name}</span>
+                                </Subtitle>
+                            </WithVerifiedBadge>
+                            <BotBadge bot={chat.bot} />
+                        </Container>
+                        <Container
+                            supplementalClass={"chat-date"}
+                            width={"hug"}
+                            gap={"xs"}
+                            crossAxisAlignment={"center"}
+                            mainAxisAlignment={"end"}>
+                            {#if muted && notificationsSupported}
+                                <div class="icon" class:rtl={$rtlStore}>
+                                    <MutedIcon size={"1em"} color={"var(--icon-txt)"} />
+                                </div>
+                            {/if}
+                            {#if pinned}
+                                <div class="icon">
+                                    <PinIcon size={"1em"} color={"var(--icon-txt)"} />
+                                </div>
+                            {/if}
+                            {#if chat.fav}
+                                <div class="icon">
+                                    <Heart size={"1em"} color={"var(--primary)"} />
+                                </div>
+                            {/if}
+                            <BodySmall colour={"textSecondary"} fontWeight={"semi-bold"}>
+                                {client.formatMessageDate(
+                                    displayDate,
+                                    $_("today"),
+                                    $_("yesterday"),
+                                    true,
+                                    true,
+                                )}
+                            </BodySmall>
+                        </Container>
+                    </Container>
+                    <Container
+                        gap={"xs"}
+                        mainAxisAlignment={"spaceBetween"}
+                        crossAxisAlignment={"end"}>
+                        <Row gap={"xs"} crossAxisAlignment={"center"}>
+                            {#if LastMessageIcon}
+                                <LastMessageIcon color={ColourVars.textSecondary} />
+                            {/if}
+                            <Body ellipsisTruncate colour={"textSecondary"}>
+                                {#if chat.typing !== undefined}
+                                    {chat.typing} <Typing />
+                                {:else}
+                                    <Markdown text={lastMessage} oneLine suppressLinks />
+                                {/if}
+                            </Body>
+                        </Row>
+                        {#if unreadMentions > 0}
+                            <CountBadge>@</CountBadge>
+                        {/if}
+                        {#if unreadMessages > 0}
+                            <CountBadge {muted}
+                                >{unreadMessages > 999 ? "999+" : unreadMessages}
+                            </CountBadge>
+                        {/if}
+                        <!-- TODO add read/received receipt -->
+                    </Container>
+                </Container>
+            </Container>
+        </MenuTrigger>
+    </Container>
+{/if}
+
+<style lang="scss">
+    :global(.chat-name .with_verified) {
+        gap: $sp2;
+    }
+
+    :global(.chat_summary .chat-date) {
+        color: var(--txt-light);
+        @include font(book, normal, fs-60);
+        .icon {
+            display: flex;
+        }
+    }
+
+    .avatar {
+        display: flex;
+        position: relative;
+    }
+
+    .expires {
+        @include disappearing();
+        bottom: 0;
+        right: 0;
+    }
+
+    .private {
+        $size: 1.35rem;
+        position: absolute;
+        right: -0.5rem;
+        bottom: -0.05rem;
+        display: flex;
+        flex: 0 0 $size;
+        align-items: center;
+        justify-content: center;
+        align-content: center;
+        width: $size;
+        height: $size;
+        background-color: var(--background-0);
+        border-radius: var(--rad-circle);
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/home/NoMatchingChats.svelte b/frontend/app/src/mobile/features/chatlist/NoMatchingChats.svelte
similarity index 86%
rename from frontend/app/src/components_mobile/home/NoMatchingChats.svelte
rename to frontend/app/src/mobile/features/chatlist/NoMatchingChats.svelte
index 834fb903cf..fb0b2752cb 100644
--- a/frontend/app/src/components_mobile/home/NoMatchingChats.svelte
+++ b/frontend/app/src/mobile/features/chatlist/NoMatchingChats.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import Chat from "svelte-material-icons/ChatOutline.svelte";
-    import NothingToSee from "./NothingToSee.svelte";
+    import NothingToSee from "@src/mobile/shared/NothingToSee.svelte";
 
     interface Props {
         onReset: () => void;
diff --git a/frontend/app/src/components_mobile/home/ThreadIndicator.svelte b/frontend/app/src/mobile/features/chatlist/ThreadIndicator.svelte
similarity index 95%
rename from frontend/app/src/components_mobile/home/ThreadIndicator.svelte
rename to frontend/app/src/mobile/features/chatlist/ThreadIndicator.svelte
index 6578f724a8..188e7e68d5 100644
--- a/frontend/app/src/components_mobile/home/ThreadIndicator.svelte
+++ b/frontend/app/src/mobile/features/chatlist/ThreadIndicator.svelte
@@ -4,7 +4,7 @@
     import { numberOfThreadsStore, type UnreadCounts } from "@client";
     import ChevronRight from "svelte-material-icons/ChevronRight.svelte";
     import MessageText from "svelte-material-icons/MessageTextOutline.svelte";
-    import Translatable from "../Translatable.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
 
     interface Props {
         unread: UnreadCounts;
diff --git a/frontend/app/src/mobile/features/chats/community/ChannelCard.svelte b/frontend/app/src/mobile/features/chats/community/ChannelCard.svelte
new file mode 100644
index 0000000000..d90a8400ce
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/community/ChannelCard.svelte
@@ -0,0 +1,92 @@
+<script lang="ts">
+    import Translatable from "@src/ui/Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import {
+        Avatar,
+        BodySmall,
+        Container,
+        IconButton,
+        MenuItem,
+        MenuTrigger,
+        Title,
+    } from "component-lib";
+    import {
+        type ChannelMatch,
+        iconSize,
+        type OpenChat,
+        selectedCommunitySummaryStore,
+    } from "@client";
+    import { getContext } from "svelte";
+    import AccountMultiple from "svelte-material-icons/AccountMultiple.svelte";
+    import DeleteOutline from "svelte-material-icons/DeleteOutline.svelte";
+    import DotsVertical from "svelte-material-icons/DotsVertical.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+
+    interface Props {
+        channel: ChannelMatch;
+        onDeleteChannel: () => void;
+        onSelectChannel: () => void;
+    }
+
+    let { channel, onDeleteChannel, onSelectChannel }: Props = $props();
+
+    const client = getContext<OpenChat>("client");
+
+    let canDeleteChannel = $derived(client.canDeleteChannel(channel.id));
+</script>
+
+<Container onClick={onSelectChannel} crossAxisAlignment={"center"} gap={"sm"}>
+    <Avatar
+        size={"md"}
+        url={client.groupAvatarUrl(
+            { id: channel.id, ...channel.avatar },
+            $selectedCommunitySummaryStore,
+        )} />
+    <Container direction={"vertical"}>
+        <Container crossAxisAlignment={"center"} gap={"sm"}>
+            {#if !channel.public}
+                <div class="private"></div>
+            {/if}
+            <Container width={"hug"} crossAxisAlignment={"center"} gap={"xxs"}>
+                <AccountMultiple size={"1.2em"} />
+                <BodySmall>{channel.memberCount.toLocaleString()}</BodySmall>
+            </Container>
+            <Title ellipsisTruncate fontWeight={"semi-bold"}>
+                {channel.name}
+            </Title>
+        </Container>
+        {#if channel.description !== ""}
+            <BodySmall ellipsisTruncate colour={"textSecondary"}>
+                <Markdown text={channel.description} oneLine suppressLinks />
+            </BodySmall>
+        {/if}
+    </Container>
+    {#if canDeleteChannel}
+        <MenuTrigger position={"top"} align={"end"}>
+            <IconButton padding={["sm", "xs", "sm", "zero"]} size={"md"}>
+                {#snippet icon(color)}
+                    <DotsVertical {color} />
+                {/snippet}
+            </IconButton>
+            {#snippet menuItems()}
+                <MenuItem danger onclick={onDeleteChannel}>
+                    {#snippet icon()}
+                        <DeleteOutline size={$iconSize} color={"var(--menu-warn)"} />
+                    {/snippet}
+                    <Translatable resourceKey={i18nKey("deleteGroup", undefined, "channel")} />
+                </MenuItem>
+            {/snippet}
+        </MenuTrigger>
+    {/if}
+</Container>
+
+<style lang="scss">
+    .private {
+        background-repeat: no-repeat;
+        $size: 12px;
+        flex: 0 0 $size;
+        width: $size;
+        height: $size;
+        background-image: url("/assets/locked.svg");
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/home/communities_sheet/CommunitiesList.svelte b/frontend/app/src/mobile/features/chats/community/CommunitiesList.svelte
similarity index 98%
rename from frontend/app/src/components_mobile/home/communities_sheet/CommunitiesList.svelte
rename to frontend/app/src/mobile/features/chats/community/CommunitiesList.svelte
index b095caf1cf..8714c30793 100644
--- a/frontend/app/src/components_mobile/home/communities_sheet/CommunitiesList.svelte
+++ b/frontend/app/src/mobile/features/chats/community/CommunitiesList.svelte
@@ -25,7 +25,7 @@
     import Compass from "svelte-material-icons/CompassOutline.svelte";
     import Swap from "svelte-material-icons/MenuSwapOutline.svelte";
     import { flip } from "svelte/animate";
-    import DiamondUpgradeBox from "../DiamondUpgradeBox.svelte";
+    import DiamondUpgradeBox from "@src/mobile/shared/DiamondUpgradeBox.svelte";
 
     type CommunityItem = CommunitySummary & { _id: string };
 
diff --git a/frontend/app/src/components_mobile/home/communities_sheet/CommunitiesScroller.svelte b/frontend/app/src/mobile/features/chats/community/CommunitiesScroller.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/communities_sheet/CommunitiesScroller.svelte
rename to frontend/app/src/mobile/features/chats/community/CommunitiesScroller.svelte
diff --git a/frontend/app/src/components_mobile/home/communities_sheet/CommunitiesSheet.svelte b/frontend/app/src/mobile/features/chats/community/CommunitiesSheet.svelte
similarity index 97%
rename from frontend/app/src/components_mobile/home/communities_sheet/CommunitiesSheet.svelte
rename to frontend/app/src/mobile/features/chats/community/CommunitiesSheet.svelte
index babef7ee32..37541234e0 100644
--- a/frontend/app/src/components_mobile/home/communities_sheet/CommunitiesSheet.svelte
+++ b/frontend/app/src/mobile/features/chats/community/CommunitiesSheet.svelte
@@ -8,12 +8,12 @@
         type CommunitySummary,
         type UnreadCounts,
     } from "@client";
-    import { navigate } from "@utils/navigation";
+    import { navigate } from "@src/utils/navigation";
     import { getContext } from "svelte";
     import ChevronLeft from "svelte-material-icons/ChevronLeft.svelte";
     import ChevronRight from "svelte-material-icons/ChevronRight.svelte";
     import { fade } from "svelte/transition";
-    import { updateCommunityState } from "../communities/createOrUpdate/community.svelte";
+    import { updateCommunityState } from "@src/mobile/features/chats/community/createOrUpdate/community.svelte";
     import CommunitiesList from "./CommunitiesList.svelte";
     import CommunitiesScroller from "./CommunitiesScroller.svelte";
 
diff --git a/frontend/app/src/mobile/features/chats/community/CommunityMenu.svelte b/frontend/app/src/mobile/features/chats/community/CommunityMenu.svelte
new file mode 100644
index 0000000000..f708735685
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/community/CommunityMenu.svelte
@@ -0,0 +1,158 @@
+<script lang="ts">
+    import { MenuItem } from "component-lib";
+    import type { CommunitySummary, OpenChat } from "@client";
+    import {
+        chatSummariesListStore,
+        notificationsSupported,
+        platformModeratorStore,
+        publish,
+        ROLE_NONE,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import { updateGroupState } from "@src/mobile/features/chats/group/edit/group.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        community: CommunitySummary;
+        canMarkAllRead: boolean;
+        onOtherChannels?: () => void;
+    }
+
+    let { community, canMarkAllRead, onOtherChannels }: Props = $props();
+
+    let member = $derived(community.membership.role !== ROLE_NONE);
+    let frozen = $derived(client.isCommunityFrozen(community.id));
+    let canLeave = $derived(member);
+    let canDelete = $derived(member && !frozen && client.canDeleteCommunity(community.id));
+    let canCreateChannel = $derived(member && !frozen && client.canCreateChannel(community.id));
+    let isCommunityMuted = $derived(
+        $chatSummariesListStore.every((c) => c.membership.notificationsMuted),
+    );
+    let isAtEveryoneMutedForCommunity = $derived(
+        $chatSummariesListStore.every((c) => c.membership.atEveryoneMuted),
+    );
+
+    function leaveCommunity() {
+        publish("leaveCommunity", {
+            kind: "leave_community",
+            communityId: community.id,
+        });
+    }
+
+    function deleteCommunity() {
+        publish("deleteCommunity", {
+            kind: "delete_community",
+            communityId: community.id,
+            doubleCheck: {
+                challenge: i18nKey("typeGroupName", { name: community.name }),
+                response: i18nKey(community.name),
+            },
+        });
+    }
+
+    function communityDetails() {
+        publish("communityDetails", community);
+    }
+
+    function markAllRead() {
+        client.markAllReadForCurrentScope();
+    }
+
+    function newChannel() {
+        if (canCreateChannel) {
+            updateGroupState.initialise(client.createCandidateGroup("channel", false));
+            publish("newChannel", false);
+        }
+    }
+
+    function embedContent() {
+        if (canCreateChannel) {
+            updateGroupState.initialise(client.createCandidateGroup("channel", true));
+            publish("newChannel", true);
+        }
+    }
+
+    function muteAllChannels(muteAtEveryone: boolean) {
+        client.muteAllChannels(community.id, muteAtEveryone);
+    }
+
+    function freezeCommunity() {
+        client.freezeCommunity(community.id, undefined).then((success) => {
+            if (!success) {
+                toastStore.showFailureToast(i18nKey("failedToFreezeCommunity"));
+            } else {
+                toastStore.showSuccessToast(i18nKey("communityFrozen"));
+            }
+        });
+    }
+
+    function unfreezeCommunity() {
+        client.unfreezeCommunity(community.id).then((success) => {
+            if (!success) {
+                toastStore.showFailureToast(i18nKey("failedToUnfreezeCommunity"));
+            } else {
+                toastStore.showSuccessToast(i18nKey("communityUnfrozen"));
+            }
+        });
+    }
+</script>
+
+<MenuItem onclick={communityDetails}>
+    <Translatable resourceKey={i18nKey("communities.details")} />
+</MenuItem>
+{#if canCreateChannel}
+    <MenuItem onclick={newChannel}>
+        <Translatable resourceKey={i18nKey("communities.createChannel")} />
+    </MenuItem>
+{/if}
+{#if canCreateChannel}
+    <MenuItem onclick={embedContent}>
+        <Translatable resourceKey={i18nKey("communities.embed")} />
+    </MenuItem>
+{/if}
+<MenuItem disabled={!canMarkAllRead} onclick={markAllRead}>
+    <Translatable resourceKey={i18nKey("markAllRead")} />
+</MenuItem>
+{#if notificationsSupported}
+    {#if !isCommunityMuted}
+        <MenuItem onclick={() => muteAllChannels(false)}>
+            <Translatable resourceKey={i18nKey("communities.muteAllChannels")} />
+        </MenuItem>
+    {/if}
+    {#if !isAtEveryoneMutedForCommunity}
+        <MenuItem onclick={() => muteAllChannels(true)}>
+            <Translatable resourceKey={i18nKey("communities.muteAllChannelsAtEveryone")} />
+        </MenuItem>
+    {/if}
+{/if}
+<MenuItem onclick={onOtherChannels}>
+    <Translatable resourceKey={i18nKey("communities.otherChannels")} />
+</MenuItem>
+{#if member}
+    <MenuItem separator />
+    {#if canDelete}
+        <MenuItem danger onclick={deleteCommunity}>
+            <Translatable resourceKey={i18nKey("communities.delete")} />
+        </MenuItem>
+    {/if}
+    {#if canLeave}
+        <MenuItem danger onclick={leaveCommunity}>
+            <Translatable resourceKey={i18nKey("communities.leave")} />
+        </MenuItem>
+    {/if}
+{/if}
+{#if $platformModeratorStore}
+    {#if client.isCommunityFrozen(community.id)}
+        <MenuItem danger onclick={unfreezeCommunity}>
+            <Translatable resourceKey={i18nKey("unfreezeCommunity")} />
+        </MenuItem>
+    {:else}
+        <MenuItem danger onclick={freezeCommunity}>
+            <Translatable resourceKey={i18nKey("freezeCommunity")} />
+        </MenuItem>
+    {/if}
+{/if}
diff --git a/frontend/app/src/mobile/features/chats/community/DirectAndGroupChatsHeader.svelte b/frontend/app/src/mobile/features/chats/community/DirectAndGroupChatsHeader.svelte
new file mode 100644
index 0000000000..ce0ce8b59c
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/community/DirectAndGroupChatsHeader.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+    import { Logo, SectionHeader } from "component-lib";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import GroupChatsMenu from "./GroupChatsMenu.svelte";
+
+    interface Props {
+        canMarkAllRead: boolean;
+    }
+
+    let props: Props = $props();
+</script>
+
+<SectionHeader>
+    {#snippet avatar()}
+        <Logo />
+    {/snippet}
+    {#snippet title()}
+        <Translatable resourceKey={i18nKey("communities.directAndGroupChats")} />
+    {/snippet}
+    {#snippet menu()}
+        <GroupChatsMenu {...props} />
+    {/snippet}
+</SectionHeader>
diff --git a/frontend/app/src/mobile/features/chats/community/FavouriteChatsHeader.svelte b/frontend/app/src/mobile/features/chats/community/FavouriteChatsHeader.svelte
new file mode 100644
index 0000000000..ab76c1efab
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/community/FavouriteChatsHeader.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { Logo, MenuItem, SectionHeader } from "component-lib";
+    import { OpenChat } from "@client";
+    import { getContext } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        canMarkAllRead: boolean;
+    }
+
+    let { canMarkAllRead }: Props = $props();
+</script>
+
+<SectionHeader>
+    {#snippet avatar()}
+        <Logo />
+    {/snippet}
+    {#snippet title()}
+        <Translatable resourceKey={i18nKey("communities.favourites")} />
+    {/snippet}
+    {#snippet menu()}
+        <MenuItem disabled={!canMarkAllRead} onclick={() => client.markAllReadForCurrentScope()}>
+            <Translatable resourceKey={i18nKey("markAllRead")} />
+        </MenuItem>
+    {/snippet}
+</SectionHeader>
diff --git a/frontend/app/src/mobile/features/chats/community/GroupChatsMenu.svelte b/frontend/app/src/mobile/features/chats/community/GroupChatsMenu.svelte
new file mode 100644
index 0000000000..7ad2338c8b
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/community/GroupChatsMenu.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+    import type { OpenChat } from "@client";
+    import { anonUserStore, identityStateStore, publish } from "@client";
+    import { getContext, tick } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    import { MenuItem } from "component-lib";
+    import { updateGroupState } from "@src/mobile/features/chats/group/edit/group.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        canMarkAllRead: boolean;
+    }
+
+    let { canMarkAllRead }: Props = $props();
+
+    function newGroup() {
+        if ($anonUserStore) {
+            client.updateIdentityState({
+                kind: "logging_in",
+                postLogin: { kind: "create_group" },
+            });
+        } else {
+            updateGroupState.initialise(client.createCandidateGroup("group", false));
+            publish("newGroup");
+        }
+    }
+    $effect(() => {
+        if (
+            $identityStateStore.kind === "logged_in" &&
+            $identityStateStore.postLogin?.kind === "create_group"
+        ) {
+            client.clearPostLoginState();
+            tick().then(() => newGroup());
+        }
+    });
+</script>
+
+<MenuItem onclick={newGroup}>
+    <Translatable resourceKey={i18nKey("newGroup")} />
+</MenuItem>
+<MenuItem disabled={!canMarkAllRead} onclick={() => client.markAllReadForCurrentScope()}>
+    <Translatable resourceKey={i18nKey("markAllRead")} />
+</MenuItem>
diff --git a/frontend/app/src/mobile/features/chats/community/Import.svelte b/frontend/app/src/mobile/features/chats/community/Import.svelte
new file mode 100644
index 0000000000..67a797058e
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/community/Import.svelte
@@ -0,0 +1,97 @@
+<script lang="ts">
+    import { Avatar, Body, Button, Container, Option, Sheet, Subtitle } from "component-lib";
+    import {
+        type ChatIdentifier,
+        type CommunityMap,
+        type CommunitySummary,
+        type OpenChat,
+        publish,
+    } from "@client";
+    import { getContext, onMount } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        ownedCommunities: CommunityMap<CommunitySummary>;
+        groupId: ChatIdentifier;
+        onCancel: () => void;
+    }
+
+    let { ownedCommunities, groupId, onCancel }: Props = $props();
+
+    let communitiesList = $derived([...ownedCommunities.values()]);
+
+    let importing = $state(false);
+    let selected: CommunitySummary | undefined = $state();
+
+    function performImport() {
+        if (selected === undefined || groupId.kind !== "group_chat") return;
+
+        importing = true;
+        client
+            .importToCommunity(groupId, selected.id)
+            .then((channelId) => {
+                if (channelId === undefined) {
+                    toastStore.showFailureToast(i18nKey("communities.errors.importFailed"));
+                } else {
+                    onCancel();
+                    publish("successfulImport", channelId);
+                }
+            })
+            .finally(() => (importing = false));
+    }
+
+    function selectCommunity(community: CommunitySummary) {
+        selected = community;
+    }
+
+    onMount(() => {
+        selected = communitiesList.length > 0 ? communitiesList[0] : undefined;
+    });
+
+    function areEqual(c1?: CommunitySummary, c2?: CommunitySummary): boolean {
+        return c1 !== undefined && c2 !== undefined && c1.id.communityId === c2.id.communityId;
+    }
+</script>
+
+<Sheet onDismiss={onCancel}>
+    <Container
+        height={{ size: "100%" }}
+        supplementalClass={"token_selector"}
+        padding={"lg"}
+        gap={"xl"}
+        direction={"vertical"}>
+        <Subtitle fontWeight={"bold"}>
+            <Translatable resourceKey={i18nKey("communities.chooseCommunity")}></Translatable>
+        </Subtitle>
+
+        <Container gap={"sm"} supplementalClass={"token_selector"} direction={"vertical"}>
+            {#each communitiesList as community}
+                <Option
+                    onClick={() => selectCommunity(community)}
+                    padding={["sm", "md", "sm", "sm"]}
+                    value={community}
+                    selected={areEqual(selected, community)}>
+                    <Container crossAxisAlignment={"center"} gap={"sm"}>
+                        <Avatar
+                            url={client.communityAvatarUrl(
+                                community.id.communityId,
+                                community.avatar,
+                            )} />
+                        <Body fontWeight={"bold"}>{community.name}</Body>
+                    </Container>
+                </Option>
+            {/each}
+        </Container>
+        <Container>
+            <Button
+                loading={importing}
+                disabled={importing || selected === undefined}
+                onClick={performImport}
+                ><Translatable resourceKey={i18nKey("communities.importBtn")} /></Button>
+        </Container>
+    </Container>
+</Sheet>
diff --git a/frontend/app/src/components_mobile/home/communities/OtherChannels.svelte b/frontend/app/src/mobile/features/chats/community/OtherChannels.svelte
similarity index 96%
rename from frontend/app/src/components_mobile/home/communities/OtherChannels.svelte
rename to frontend/app/src/mobile/features/chats/community/OtherChannels.svelte
index ff0f62c3c6..15c2cf2304 100644
--- a/frontend/app/src/components_mobile/home/communities/OtherChannels.svelte
+++ b/frontend/app/src/mobile/features/chats/community/OtherChannels.svelte
@@ -12,10 +12,10 @@
         type CommunitySummary,
         type OpenChat,
     } from "@client";
-    import { navigate } from "@utils/navigation";
+    import { navigate } from "@src/utils/navigation";
     import { getContext, onMount } from "svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Translatable from "../../Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
     import ChannelCard from "./ChannelCard.svelte";
 
     const client = getContext<OpenChat>("client");
diff --git a/frontend/app/src/mobile/features/chats/community/PreviewWrapper.svelte b/frontend/app/src/mobile/features/chats/community/PreviewWrapper.svelte
new file mode 100644
index 0000000000..1c09c1d74d
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/community/PreviewWrapper.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+    import { communityPreviewState } from "@src/utils/preview.svelte";
+    import { Sheet } from "component-lib";
+    import type { OpenChat } from "@client";
+    import { identityStateStore } from "@client";
+    import { getContext, tick, type Snippet } from "svelte";
+    import GateCheckFailed from "@src/mobile/features/access/AccessGateCheckFailed.svelte";
+
+    type ChildProps = [boolean, () => void, () => void, boolean];
+
+    interface Props {
+        children?: Snippet<ChildProps>;
+    }
+
+    let { children }: Props = $props();
+
+    const client = getContext<OpenChat>("client");
+
+    $effect(() => {
+        if (
+            $identityStateStore.kind === "logged_in" &&
+            $identityStateStore.postLogin?.kind === "join_community"
+        ) {
+            client.clearPostLoginState();
+            tick().then(() => communityPreviewState.joinCommunity(client));
+        }
+    });
+</script>
+
+{#if communityPreviewState.gateCheckFailed}
+    <Sheet onDismiss={() => communityPreviewState.reset()}>
+        <GateCheckFailed onClose={() => communityPreviewState.reset()} />
+    </Sheet>
+{/if}
+
+{@render children?.(
+    communityPreviewState.joining,
+    () => communityPreviewState.joinCommunity(client),
+    () => communityPreviewState.cancelPreview(client),
+    communityPreviewState.gatesInEffect,
+)}
diff --git a/frontend/app/src/mobile/features/chats/community/SelectedCommunityHeader.svelte b/frontend/app/src/mobile/features/chats/community/SelectedCommunityHeader.svelte
new file mode 100644
index 0000000000..06f6520900
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/community/SelectedCommunityHeader.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+    import { Avatar, Body, Container, SectionHeader } from "component-lib";
+    import {
+        anonUserStore,
+        publish,
+        setRightPanelHistory,
+        type CommunitySummary,
+        type OpenChat,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import WithVerifiedBadge from "@src/mobile/ui/icons/WithVerifiedBadge.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import VisibilityLabel from "@src/mobile/features/chats/core/VisibilityLabel.svelte";
+    import CommunityMenu from "./CommunityMenu.svelte";
+    import OtherChannels from "./OtherChannels.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        community: CommunitySummary;
+        canMarkAllRead: boolean;
+    }
+
+    let { community, canMarkAllRead }: Props = $props();
+
+    let showOtherChannels = $state(false);
+
+    function showCommunityMembers() {
+        setRightPanelHistory([{ kind: "show_community_members" }]);
+    }
+</script>
+
+{#if showOtherChannels}
+    <OtherChannels {community} onClose={() => (showOtherChannels = false)} />
+{/if}
+
+{#snippet menu()}
+    <CommunityMenu
+        onOtherChannels={() => (showOtherChannels = true)}
+        {canMarkAllRead}
+        {community} />
+{/snippet}
+
+<SectionHeader
+    onClick={() => publish("communityDetails", community)}
+    menu={$anonUserStore ? undefined : menu}>
+    {#snippet avatar()}
+        <Avatar
+            radius={"md"}
+            url={client.communityAvatarUrl(community.id.communityId, community.avatar)}
+            size={"lg"} />
+    {/snippet}
+    {#snippet title()}
+        <WithVerifiedBadge verified={community.verified}>
+            <h4 class="name">
+                {community.name}
+            </h4>
+        </WithVerifiedBadge>
+    {/snippet}
+    {#snippet subtitle()}
+        <Container gap={"sm"} onClick={showCommunityMembers} crossAxisAlignment={"center"}>
+            <VisibilityLabel isPublic={community.public} />
+            <Body>
+                <div class="members">
+                    <span class="num">{community.memberCount.toLocaleString()}</span>
+                    <Translatable resourceKey={i18nKey("members")} />
+                </div>
+            </Body>
+        </Container>
+    {/snippet}
+</SectionHeader>
+
+<style lang="scss">
+    .members {
+        color: var(--txt-light);
+        .num {
+            color: var(--txt);
+            font-weight: 700;
+        }
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/home/communities/createOrUpdate/AddCommunityMembers.svelte b/frontend/app/src/mobile/features/chats/community/createOrUpdate/AddCommunityMembers.svelte
similarity index 89%
rename from frontend/app/src/components_mobile/home/communities/createOrUpdate/AddCommunityMembers.svelte
rename to frontend/app/src/mobile/features/chats/community/createOrUpdate/AddCommunityMembers.svelte
index 9cdbbc8a23..ee30e05b2e 100644
--- a/frontend/app/src/components_mobile/home/communities/createOrUpdate/AddCommunityMembers.svelte
+++ b/frontend/app/src/mobile/features/chats/community/createOrUpdate/AddCommunityMembers.svelte
@@ -4,8 +4,8 @@
     import { OpenChat, publish, type UserSummary } from "@client";
     import { getContext } from "svelte";
     import Check from "svelte-material-icons/Check.svelte";
-    import SelectUsers from "../../SelectUsers.svelte";
-    import SlidingPageContent from "../../SlidingPageContent.svelte";
+    import SelectUsers from "@src/mobile/features/chats/core/SelectUsers.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
     import { updateCommunityState } from "./community.svelte";
 
     const client = getContext<OpenChat>("client");
diff --git a/frontend/app/src/components_mobile/home/communities/createOrUpdate/Channels.svelte b/frontend/app/src/mobile/features/chats/community/createOrUpdate/Channels.svelte
similarity index 97%
rename from frontend/app/src/components_mobile/home/communities/createOrUpdate/Channels.svelte
rename to frontend/app/src/mobile/features/chats/community/createOrUpdate/Channels.svelte
index 61206080aa..383bfcf662 100644
--- a/frontend/app/src/components_mobile/home/communities/createOrUpdate/Channels.svelte
+++ b/frontend/app/src/mobile/features/chats/community/createOrUpdate/Channels.svelte
@@ -16,8 +16,8 @@
     import Plus from "svelte-material-icons/Plus.svelte";
     import Pound from "svelte-material-icons/Pound.svelte";
     import Edit from "svelte-material-icons/TextBoxEditOutline.svelte";
-    import Translatable from "../../../Translatable.svelte";
-    import SlidingPageContent from "../../SlidingPageContent.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
     import { updateCommunityState } from "./community.svelte";
     import EditChannel from "./EditChannel.svelte";
 
diff --git a/frontend/app/src/components_mobile/home/communities/createOrUpdate/CommunityInfo.svelte b/frontend/app/src/mobile/features/chats/community/createOrUpdate/CommunityInfo.svelte
similarity index 95%
rename from frontend/app/src/components_mobile/home/communities/createOrUpdate/CommunityInfo.svelte
rename to frontend/app/src/mobile/features/chats/community/createOrUpdate/CommunityInfo.svelte
index 3db7f9bafd..7178102480 100644
--- a/frontend/app/src/components_mobile/home/communities/createOrUpdate/CommunityInfo.svelte
+++ b/frontend/app/src/mobile/features/chats/community/createOrUpdate/CommunityInfo.svelte
@@ -28,15 +28,15 @@
     import FormatList from "svelte-material-icons/FormatListBulletedType.svelte";
     import ImageEditOutline from "svelte-material-icons/ImageEditOutline.svelte";
     import Pound from "svelte-material-icons/Pound.svelte";
-    import AreYouSure from "../../../AreYouSure.svelte";
-    import EditableAvatar from "../../../EditableAvatar.svelte";
-    import EditableImageWrapper from "../../../EditableImageWrapper.svelte";
-    import LinkedCard from "../../../LinkedCard.svelte";
-    import Setting from "../../../Setting.svelte";
-    import Translatable from "../../../Translatable.svelte";
-    import AccessGateChip from "../../access_gates/AccessGateChip.svelte";
-    import LanguageSelector from "../../LanguageSelector.svelte";
-    import SlidingPageContent from "../../SlidingPageContent.svelte";
+    import AreYouSure from "@src/mobile/shared/AreYouSure.svelte";
+    import EditableAvatar from "@src/mobile/shared/EditableAvatar.svelte";
+    import EditableImageWrapper from "@src/mobile/shared/EditableImageWrapper.svelte";
+    import LinkedCard from "@src/mobile/shared/LinkedCard.svelte";
+    import Setting from "@src/mobile/shared/Setting.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import AccessGateChip from "@src/mobile/features/access/AccessGateChip.svelte";
+    import LanguageSelector from "@src/mobile/shared/LanguageSelector.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
     import {
         MAX_DESC_LENGTH,
         MAX_NAME_LENGTH,
diff --git a/frontend/app/src/components_mobile/home/communities/createOrUpdate/EditChannel.svelte b/frontend/app/src/mobile/features/chats/community/createOrUpdate/EditChannel.svelte
similarity index 97%
rename from frontend/app/src/components_mobile/home/communities/createOrUpdate/EditChannel.svelte
rename to frontend/app/src/mobile/features/chats/community/createOrUpdate/EditChannel.svelte
index 7fafcec6ee..6a3c325065 100644
--- a/frontend/app/src/components_mobile/home/communities/createOrUpdate/EditChannel.svelte
+++ b/frontend/app/src/mobile/features/chats/community/createOrUpdate/EditChannel.svelte
@@ -2,7 +2,7 @@
     import { i18nKey } from "@src/i18n/i18n";
     import { BodySmall, CommonButton, Container, Form, Input, Sheet, Title } from "component-lib";
     import Save from "svelte-material-icons/ContentSaveOutline.svelte";
-    import Translatable from "../../../Translatable.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
     import { updateCommunityState } from "./community.svelte";
 
     const MAX_LENGTH = 40;
diff --git a/frontend/app/src/mobile/features/chats/community/createOrUpdate/Permissions.svelte b/frontend/app/src/mobile/features/chats/community/createOrUpdate/Permissions.svelte
new file mode 100644
index 0000000000..abb2ac9493
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/community/createOrUpdate/Permissions.svelte
@@ -0,0 +1,91 @@
+<script lang="ts">
+    import { i18nKey } from "@src/i18n/i18n";
+    import { Body, BodySmall, CommonButton, Container, Sheet } from "component-lib";
+    import {
+        communityRoles,
+        publish,
+        roleAsText,
+        type CommunityPermissions,
+    } from "@client";
+    import { _ } from "svelte-i18n";
+    import ArrowLeft from "svelte-material-icons/ArrowLeft.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import PermissionsRoleSlider from "@src/mobile/features/chats/core/PermissionsRoleSlider.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
+    import { updateCommunityState } from "./community.svelte";
+
+    const ucs = updateCommunityState;
+
+    const selectors = $derived(
+        Object.keys(ucs.permissions).map<[keyof CommunityPermissions, string]>((p) => [
+            p as keyof CommunityPermissions,
+            `permissions.${p}`,
+        ]),
+    );
+
+    let selected = $state<[keyof CommunityPermissions, string]>();
+</script>
+
+{#if selected !== undefined}
+    {@const [key, resourceKey] = selected}
+    <Sheet onDismiss={() => (selected = undefined)}>
+        <PermissionsRoleSlider
+            height={{ size: "150px" }}
+            roles={communityRoles}
+            label={i18nKey(resourceKey)}
+            onClose={() => (selected = undefined)}
+            bind:rolePermission={ucs.permissions[key]} />
+    </Sheet>
+{/if}
+
+<SlidingPageContent title={i18nKey("Community permissions")}>
+    <Container
+        height={"fill"}
+        gap={"xl"}
+        direction={"vertical"}
+        padding={["xxl", "xl", "lg", "xl"]}>
+        <Container gap={"sm"} direction={"vertical"}>
+            <Body fontWeight={"bold"}>
+                <Translatable resourceKey={i18nKey("Manage community permissions")}></Translatable>
+            </Body>
+
+            <BodySmall colour={"textSecondary"}>
+                <Translatable
+                    resourceKey={i18nKey(
+                        "You can assign permissions to different roles, from members to owners. Roles are built in a hierarchy, meaning that anyone above another role automatically gets everything that role can do.",
+                    )}></Translatable>
+            </BodySmall>
+        </Container>
+        <Container gap={"xxl"} direction={"vertical"}>
+            {#each selectors as [key, resourceKey]}
+                <Container
+                    onClick={() => (selected = [key, resourceKey])}
+                    mainAxisAlignment={"spaceBetween"}
+                    crossAxisAlignment={"end"}>
+                    <div class="label">
+                        <Body>
+                            <Translatable resourceKey={i18nKey(resourceKey)}></Translatable>
+                        </Body>
+                    </div>
+                    <BodySmall colour={"primary"} fontWeight={"bold"} width={"hug"}
+                        >{$_(`role.${roleAsText(ucs.permissions[key])}`)}</BodySmall>
+                </Container>
+            {/each}
+        </Container>
+
+        <Container padding={["xl", "zero", "zero", "zero"]} mainAxisAlignment={"end"}>
+            <CommonButton onClick={() => publish("closeModalPage")} mode="active" size={"medium"}>
+                {#snippet icon(color, size)}
+                    <ArrowLeft {color} {size} />
+                {/snippet}
+                <Translatable resourceKey={i18nKey("Done, go back")}></Translatable>
+            </CommonButton>
+        </Container>
+    </Container>
+</SlidingPageContent>
+
+<style lang="scss">
+    .label {
+        text-transform: capitalize;
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/home/communities/createOrUpdate/community.svelte.ts b/frontend/app/src/mobile/features/chats/community/createOrUpdate/community.svelte.ts
similarity index 98%
rename from frontend/app/src/components_mobile/home/communities/createOrUpdate/community.svelte.ts
rename to frontend/app/src/mobile/features/chats/community/createOrUpdate/community.svelte.ts
index 76587c3770..e5f9b3164a 100644
--- a/frontend/app/src/components_mobile/home/communities/createOrUpdate/community.svelte.ts
+++ b/frontend/app/src/mobile/features/chats/community/createOrUpdate/community.svelte.ts
@@ -13,8 +13,8 @@ import {
     type UpdatedRules,
     type VersionedRules,
 } from "@client";
-import { navigate } from "@utils/navigation";
-import { UpdateGroupOrCommunityState } from "../../groupOrCommunity.svelte";
+import { navigate } from "@src/utils/navigation";
+import { UpdateGroupOrCommunityState } from "@src/mobile/shared/groupOrCommunity.svelte";
 
 export const MAX_RULES_LENGTH = 1024;
 export const MIN_NAME_LENGTH = 3;
diff --git a/frontend/app/src/mobile/features/chats/community/details/CommunitySummary.svelte b/frontend/app/src/mobile/features/chats/community/details/CommunitySummary.svelte
new file mode 100644
index 0000000000..6cb9a36882
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/community/details/CommunitySummary.svelte
@@ -0,0 +1,357 @@
+<script lang="ts">
+    import { i18nKey } from "@src/i18n/i18n";
+    import {
+        Avatar,
+        BigButton,
+        Body,
+        BodySmall,
+        Button,
+        ColourVars,
+        Container,
+        defaultBackgroundGradient,
+        H2,
+        IconButton,
+        StatusCard,
+    } from "component-lib";
+    import type { CommunitySummary, OpenChat } from "@client";
+    import {
+        allUsersStore,
+        anonUserStore,
+        chatSummariesListStore,
+        defaultChatRules,
+        publish,
+        ROLE_NONE,
+        ROLE_OWNER,
+        selectedCommunityMembersStore,
+        selectedCommunityRulesStore,
+    } from "@client";
+    import { getContext } from "svelte";
+    import AccountGroup from "svelte-material-icons/AccountGroup.svelte";
+    import ArrowLeft from "svelte-material-icons/ArrowLeft.svelte";
+    import At from "svelte-material-icons/At.svelte";
+    import BellOff from "svelte-material-icons/BellOff.svelte";
+    import Delete from "svelte-material-icons/DeleteForeverOutline.svelte";
+    import NewChannel from "svelte-material-icons/FormatListGroupPlus.svelte";
+    import Exit from "svelte-material-icons/Logout.svelte";
+    import Pound from "svelte-material-icons/Pound.svelte";
+    import Share from "svelte-material-icons/ShareVariantOutline.svelte";
+    import Edit from "svelte-material-icons/SquareEditOutline.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import AccessGateSummary from "@src/mobile/features/chats/core/AccessGateSummary.svelte";
+    import { updateGroupState } from "@src/mobile/features/chats/group/edit/group.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import BotsSummary from "@src/mobile/features/chats/members/BotsSummary.svelte";
+    import MembersSummary from "@src/mobile/features/chats/members/MembersSummary.svelte";
+    import Separator from "@src/mobile/features/chats/core/Separator.svelte";
+    import Stats from "@src/mobile/shared/Stats.svelte";
+    import { updateCommunityState } from "@src/mobile/features/chats/community/createOrUpdate/community.svelte";
+    import { CommunityState } from "./communityState.svelte";
+    import PermissionsSummary from "./PermissionsSummary.svelte";
+    import UserGroupSummary from "./UserGroupSummary.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        community: CommunitySummary;
+    }
+
+    let { community }: Props = $props();
+
+    let communityState = new CommunityState(client, community);
+    let busy = $state(false);
+    let ownerMember = $derived(
+        [...$selectedCommunityMembersStore.values()].find((m) => m.role === ROLE_OWNER),
+    );
+    let owner = $derived(ownerMember ? $allUsersStore.get(ownerMember.userId) : undefined);
+    let canCreateChannel = $derived(communityState.canCreateChannel());
+    let accessibilityTitle = $derived(community.public ? "Public community" : "Private community");
+    let accessibilityInfo = $derived(
+        community.public
+            ? "This is a public community. Anyone will be able to discover and join this community."
+            : "This is a private community. Only people who are invited will be able to join this community.",
+    );
+    let canEdit = $derived(communityState.canEditCommunity());
+    let rules = $derived($selectedCommunityRulesStore ?? defaultChatRules("community"));
+
+    let isCommunityMuted = $derived(
+        $chatSummariesListStore.every((c) => c.membership.notificationsMuted),
+    );
+    let isAtEveryoneMutedForCommunity = $derived(
+        $chatSummariesListStore.every((c) => c.membership.atEveryoneMuted),
+    );
+
+    function newChannel(embedded: boolean) {
+        if (canCreateChannel) {
+            updateGroupState.initialise(client.createCandidateGroup("channel", embedded));
+            publish("newChannel", embedded);
+        }
+    }
+
+    function editCommunity() {
+        if (canEdit) {
+            updateCommunityState.initialise(community, rules);
+            publish("updateCommunity");
+        }
+    }
+
+    function leaveCommunity() {
+        publish("leaveCommunity", {
+            kind: "leave_community",
+            communityId: community.id,
+        });
+    }
+
+    function muteAllChannels(muteAtEveryone: boolean) {
+        communityState.muteAllChannels(muteAtEveryone);
+    }
+</script>
+
+<Container
+    closeMenuOnScroll
+    background={ColourVars.background0}
+    height={"fill"}
+    direction={"vertical"}>
+    <Container gap={"xl"} direction={"vertical"} padding={["lg", "md", "md", "md"]}>
+        <!-- this is the group card -->
+        <Container gap={"lg"} direction={"vertical"}>
+            <Container
+                supplementalClass={"group_details_header"}
+                borderRadius={"md"}
+                minHeight={"11rem"}
+                mainAxisAlignment={"end"}
+                padding={"sm"}
+                gap={"sm"}
+                background={communityState.bannerUrl() ?? defaultBackgroundGradient}>
+                <IconButton onclick={() => publish("closeModalPage")} size={"md"} mode={"dark"}>
+                    {#snippet icon(color)}
+                        <ArrowLeft {color} />
+                    {/snippet}
+                </IconButton>
+                {#if canCreateChannel}
+                    <IconButton onclick={() => newChannel(false)} size={"md"} mode={"dark"}>
+                        {#snippet icon(color)}
+                            <NewChannel {color} />
+                        {/snippet}
+                    </IconButton>
+                {/if}
+                {#if canEdit}
+                    <IconButton onclick={editCommunity} size={"md"} mode={"dark"}>
+                        {#snippet icon(color)}
+                            <Edit {color} />
+                        {/snippet}
+                    </IconButton>
+                {/if}
+            </Container>
+            <Container
+                supplementalClass={"name_and_description"}
+                gap={"xl"}
+                padding={["zero", "lg"]}
+                direction="vertical">
+                <Container crossAxisAlignment={"end"} gap={"md"}>
+                    <Avatar
+                        radius={"lg"}
+                        borderWidth={"thick"}
+                        size={"xxl"}
+                        url={communityState.avatarUrl()}></Avatar>
+                    <Container
+                        direction={"vertical"}
+                        mainAxisAlignment={"center"}
+                        supplementalClass={"group_name"}>
+                        <H2 fontWeight={"bold"} width={"hug"}>{community.name}</H2>
+                        <Container gap={"xs"}>
+                            <BodySmall colour={"textSecondary"} width={"hug"}>
+                                <Translatable resourceKey={i18nKey("owned by")} />
+                            </BodySmall>
+                            <BodySmall colour={"primary"}>
+                                @{owner?.username}
+                            </BodySmall>
+                        </Container>
+                    </Container>
+                </Container>
+
+                {#if !$anonUserStore}
+                    <Container gap={"sm"}>
+                        <BigButton
+                            disabled={isCommunityMuted}
+                            onClick={() => muteAllChannels(false)}>
+                            {#snippet icon(color, size)}
+                                <BellOff {color} {size} />
+                            {/snippet}
+                            <Translatable resourceKey={i18nKey("Mute all")} />
+                        </BigButton>
+                        <BigButton
+                            disabled={isAtEveryoneMutedForCommunity}
+                            onClick={() => muteAllChannels(true)}>
+                            {#snippet icon(color, size)}
+                                <At {color} {size} />
+                            {/snippet}
+                            <Translatable resourceKey={i18nKey("Mute @everyone")} />
+                        </BigButton>
+                        <BigButton onClick={() => communityState.share()}>
+                            {#snippet icon(color, size)}
+                                <Share {color} {size} />
+                            {/snippet}
+                            <Translatable resourceKey={i18nKey("Share")} />
+                        </BigButton>
+                    </Container>
+                {/if}
+            </Container>
+
+            <StatusCard mode="information" title={accessibilityTitle} body={accessibilityInfo}>
+                {#snippet icon(color, size)}
+                    <AccountGroup {color} {size} />
+                {/snippet}
+            </StatusCard>
+
+            <Container padding={["zero", "lg"]} direction="vertical">
+                <Body fontWeight={"light"}>
+                    <Markdown inline={false} text={community.description} />
+                </Body>
+            </Container>
+        </Container>
+
+        <MembersSummary collection={community} />
+
+        <BotsSummary collection={community} />
+
+        <UserGroupSummary {communityState} />
+
+        <PermissionsSummary permissions={community.permissions} isPublic={community.public} />
+
+        <AccessGateSummary gateConfig={community.gateConfig} />
+
+        {#if rules.enabled}
+            <Separator />
+
+            <Container gap={"lg"} direction={"vertical"} padding={["zero", "md"]}>
+                <Body colour={"textSecondary"} fontWeight={"bold"}>
+                    <Translatable resourceKey={i18nKey("Community rules")}></Translatable>
+                </Body>
+
+                <Body><Markdown inline={false} text={rules.text} /></Body>
+            </Container>
+        {/if}
+
+        <Separator />
+
+        <Container gap={"lg"} direction={"vertical"} padding={["zero", "md"]}>
+            <BodySmall colour={"textSecondary"} fontWeight={"bold"}>
+                <Translatable resourceKey={i18nKey("Community stats")}></Translatable>
+            </BodySmall>
+            <Stats showReported={false} stats={community.metrics} />
+        </Container>
+
+        {#if canCreateChannel}
+            <Separator />
+
+            <Container gap={"lg"} direction={"vertical"} padding={["zero", "md"]}>
+                <Container direction={"vertical"} gap={"sm"}>
+                    <Body fontWeight={"bold"}>
+                        <Translatable resourceKey={i18nKey("Add new channel")}></Translatable>
+                    </Body>
+                    <Body colour={"textSecondary"}>
+                        <Translatable resourceKey={i18nKey("Add a new channel to this community")}
+                        ></Translatable>
+                    </Body>
+                </Container>
+
+                <Button onClick={() => newChannel(false)}>
+                    {#snippet icon(color)}
+                        <NewChannel {color} />
+                    {/snippet}
+                    <Translatable resourceKey={i18nKey("Add channel")}></Translatable>
+                </Button>
+            </Container>
+
+            <Separator />
+
+            <Container gap={"lg"} direction={"vertical"} padding={["zero", "md"]}>
+                <Container direction={"vertical"} gap={"sm"}>
+                    <Body fontWeight={"bold"}>
+                        <Translatable resourceKey={i18nKey("Add embedded channel")}></Translatable>
+                    </Body>
+                    <Body colour={"textSecondary"}>
+                        <Translatable
+                            resourceKey={i18nKey(
+                                "Add an embedded channel to display third party content to this community.",
+                            )}></Translatable>
+                    </Body>
+                </Container>
+
+                <Button onClick={() => newChannel(true)}>
+                    {#snippet icon(color)}
+                        <Pound {color} />
+                    {/snippet}
+                    <Translatable resourceKey={i18nKey("Add embedded channel")}></Translatable>
+                </Button>
+            </Container>
+
+            {#if client.canDeleteCommunity(community.id)}
+                <Separator />
+
+                <Container gap={"lg"} direction={"vertical"} padding={["zero", "md"]}>
+                    <Container direction={"vertical"} gap={"sm"}>
+                        <Body fontWeight={"bold"}>
+                            <Translatable resourceKey={i18nKey("Delete community")}></Translatable>
+                        </Body>
+                        <Body colour={"textSecondary"}>
+                            <Translatable
+                                resourceKey={i18nKey(
+                                    "Keep in mind that by deleting a community all of its data is also removed, and this operation cannot be undone.",
+                                )}></Translatable>
+                        </Body>
+                    </Container>
+
+                    <Button
+                        danger
+                        loading={busy}
+                        onClick={() => publish("deleteCommunityMobile", community)}>
+                        {#snippet icon(color)}
+                            <Delete {color} />
+                        {/snippet}
+                        <Translatable resourceKey={i18nKey("Delete community")}></Translatable>
+                    </Button>
+                </Container>
+            {:else if community.membership.role !== ROLE_NONE}
+                <Separator />
+
+                <Container gap={"lg"} direction={"vertical"} padding={["zero", "md"]}>
+                    <Container direction={"vertical"} gap={"sm"}>
+                        <Body fontWeight={"bold"}>
+                            <Translatable resourceKey={i18nKey("Leave community")}></Translatable>
+                        </Body>
+                        <Body colour={"textSecondary"}>
+                            <Translatable
+                                resourceKey={i18nKey(
+                                    "Keep in mind that you may have to pass access gates to re-join later. A community must have at least one owner.",
+                                )}></Translatable>
+                        </Body>
+                    </Container>
+
+                    <Button loading={busy} onClick={leaveCommunity}>
+                        {#snippet icon(color)}
+                            <Exit {color} />
+                        {/snippet}
+                        <Translatable resourceKey={i18nKey("Leave community")}></Translatable>
+                    </Button>
+                </Container>
+            {/if}
+        {/if}
+    </Container>
+</Container>
+
+<style lang="scss">
+    :global(.container.name_and_description) {
+        margin-top: -1.75rem;
+    }
+
+    :global(.container.group_details_header) {
+        background-size: cover !important;
+        background-position: center !important;
+        background-repeat: no-repeat !important;
+    }
+
+    :global(.container.group_details_header > .icon_button:first-child) {
+        margin-inline-end: auto;
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/chats/community/details/ConfirmDelete.svelte b/frontend/app/src/mobile/features/chats/community/details/ConfirmDelete.svelte
new file mode 100644
index 0000000000..13ac03273b
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/community/details/ConfirmDelete.svelte
@@ -0,0 +1,112 @@
+<script lang="ts">
+    import { toastStore } from "@src/stores/toast";
+    import { Body, Button, ColourVars, Container, H2, Input } from "component-lib";
+    import {
+        i18nKey,
+        OpenChat,
+        publish,
+        routeForScope,
+        type CommunitySummary,
+    } from "@client";
+    import { navigate } from "@src/utils/navigation";
+    import { getContext } from "svelte";
+    import ChevronRight from "svelte-material-icons/ChevronRight.svelte";
+    import Delete from "svelte-material-icons/DeleteForeverOutline.svelte";
+    import MulticolourText from "@src/mobile/shared/MulticolourText.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        community: CommunitySummary;
+    }
+
+    let { community }: Props = $props();
+
+    let communityName = $state<string>();
+    let deleting = $state(false);
+
+    function deleteCommunity() {
+        deleting = true;
+        navigate(routeForScope(client.getDefaultScope()));
+        client
+            .deleteCommunity(community.id)
+            .then((success) => {
+                if (!success) {
+                    toastStore.showFailureToast(i18nKey("communities.errors.deleteFailed"));
+                    navigate(`/community/${community.id.communityId}`);
+                } else {
+                    publish("closeModalStack");
+                }
+            })
+            .finally(() => (deleting = false));
+    }
+</script>
+
+<SlidingPageContent title={i18nKey("Delete a chat")} subtitle={i18nKey(community.name)}>
+    <Container direction={"vertical"} gap={"xxl"} padding={["xxl", "lg"]}>
+        <Container padding={["zero", "lg"]} gap={"sm"} direction={"vertical"}>
+            <Delete color={ColourVars.primary} size={"7rem"} />
+            <H2>
+                <MulticolourText
+                    parts={[
+                        {
+                            text: i18nKey("Delete the "),
+                            colour: "textPrimary",
+                        },
+                        {
+                            text: i18nKey(community.name),
+                            colour: "primary",
+                        },
+                        {
+                            text: i18nKey(" community"),
+                            colour: "textPrimary",
+                        },
+                    ]}></MulticolourText>
+            </H2>
+            <Body colour={"textSecondary"}>
+                <Translatable
+                    resourceKey={i18nKey(
+                        "Do you definitely want to delete this community? All of your history will be lost, and this cannot be undone.",
+                    )} />
+            </Body>
+        </Container>
+
+        <Container>
+            <Input
+                error={communityName !== community.name}
+                bind:value={communityName}
+                placeholder={"Type in community name..."}
+                minlength={0}
+                maxlength={200}
+                countdown={false}>
+                {#snippet subtext()}
+                    <Translatable
+                        resourceKey={i18nKey(
+                            "Type in the exact name of the chat to confirm deletion",
+                        )} />
+                {/snippet}
+            </Input>
+        </Container>
+
+        <Container direction={"vertical"} gap={"lg"}>
+            <Button
+                loading={deleting}
+                disabled={communityName !== community.name}
+                danger
+                onClick={deleteCommunity}>
+                <Translatable resourceKey={i18nKey("Delete")} />
+                {#snippet icon(color)}
+                    <Delete {color} />
+                {/snippet}
+            </Button>
+            <Button secondary onClick={() => publish("closeModalPage")}>
+                <Translatable resourceKey={i18nKey("No, back to safety")} />
+                {#snippet icon(color)}
+                    <ChevronRight {color} />
+                {/snippet}
+            </Button>
+        </Container>
+    </Container>
+</SlidingPageContent>
diff --git a/frontend/app/src/components_mobile/home/communities/details/EditUserGroup.svelte b/frontend/app/src/mobile/features/chats/community/details/EditUserGroup.svelte
similarity index 96%
rename from frontend/app/src/components_mobile/home/communities/details/EditUserGroup.svelte
rename to frontend/app/src/mobile/features/chats/community/details/EditUserGroup.svelte
index 716bf05258..9f2accaab0 100644
--- a/frontend/app/src/components_mobile/home/communities/details/EditUserGroup.svelte
+++ b/frontend/app/src/mobile/features/chats/community/details/EditUserGroup.svelte
@@ -28,11 +28,11 @@
     import Check from "svelte-material-icons/Check.svelte";
     import Save from "svelte-material-icons/ContentSaveOutline.svelte";
     import { SvelteSet } from "svelte/reactivity";
-    import { i18nKey, interpolate } from "../../../../i18n/i18n";
-    import { trimLeadingAtSymbol } from "../../../../utils/user";
-    import Translatable from "../../../Translatable.svelte";
-    import SlidingPageContent from "../../SlidingPageContent.svelte";
-    import User from "../../User.svelte";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import { trimLeadingAtSymbol } from "@src/utils/user";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
+    import User from "@src/mobile/shared/User.svelte";
     import { CommunityState } from "./communityState.svelte";
 
     const MIN_LENGTH = 3;
diff --git a/frontend/app/src/mobile/features/chats/community/details/PermissionsSummary.svelte b/frontend/app/src/mobile/features/chats/community/details/PermissionsSummary.svelte
new file mode 100644
index 0000000000..d0801cadb9
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/community/details/PermissionsSummary.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+    import { i18nKey } from "@src/i18n/i18n";
+    import { Body, Container, type SizeMode } from "component-lib";
+    import {
+        communityRoles,
+        ROLE_ADMIN,
+        ROLE_MEMBER,
+        ROLE_OWNER,
+        type CommunityPermissionRole,
+        type CommunityPermissions,
+        type ResourceKey,
+    } from "@client";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import Separator from "@src/mobile/features/chats/core/Separator.svelte";
+
+    interface Props {
+        permissions: CommunityPermissions;
+        isPublic: boolean;
+    }
+
+    let { permissions, isPublic }: Props = $props();
+
+    type PermissionsByRole = Record<CommunityPermissionRole, Set<string>>;
+    type PermissionsEntry = [keyof CommunityPermissions, CommunityPermissionRole];
+
+    const roleLabels: Record<CommunityPermissionRole, ResourceKey> = {
+        [ROLE_OWNER]: i18nKey("permissions.ownerOnly"),
+        [ROLE_ADMIN]: i18nKey("permissions.ownerAndAdmins"),
+        [ROLE_MEMBER]: i18nKey("permissions.allMembers"),
+    };
+
+    function partitionPermissions(permissions: CommunityPermissions): PermissionsByRole {
+        return (Object.entries(permissions) as PermissionsEntry[]).reduce(
+            (dict: PermissionsByRole, [key, val]) => {
+                if (key !== "inviteUsers" || !isPublic) {
+                    dict[val].add(`permissions.${key}`);
+                }
+                return dict;
+            },
+            {
+                [ROLE_OWNER]: new Set(),
+                [ROLE_ADMIN]: new Set(),
+                [ROLE_MEMBER]: new Set(),
+            } as PermissionsByRole,
+        );
+    }
+    let partitioned = $derived(partitionPermissions(permissions));
+    const width: SizeMode = "hug";
+</script>
+
+<Separator />
+
+<Container padding={["zero", "md"]} gap={"xl"} direction={"vertical"}>
+    <Body colour={"textSecondary"} fontWeight={"bold"}>
+        <Translatable resourceKey={i18nKey("Permissions")}></Translatable>
+    </Body>
+
+    {#each communityRoles as role}
+        {#if partitioned[role].size > 0}
+            {@const perms = [...partitioned[role]]}
+            <Container {width} wrap gap={"sm"}>
+                <Body {width} colour={"textSecondary"}>
+                    <Translatable resourceKey={roleLabels[role]} />
+                </Body>
+                <Body {width} colour={"textSecondary"}>//</Body>
+                {#each perms as perm, i}
+                    {@const last = i === perms.length - 1}
+                    <Body {width}>
+                        <Translatable resourceKey={i18nKey(perm)} />
+                    </Body>
+                    {#if !last}
+                        <Body colour={"primary"} {width}>/</Body>
+                    {/if}
+                {/each}
+            </Container>
+        {/if}
+    {/each}
+</Container>
diff --git a/frontend/app/src/mobile/features/chats/community/details/UserGroup.svelte b/frontend/app/src/mobile/features/chats/community/details/UserGroup.svelte
new file mode 100644
index 0000000000..c3be87df1c
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/community/details/UserGroup.svelte
@@ -0,0 +1,107 @@
+<script lang="ts">
+    import { Body, BodySmall, Container, FloatingButton, Search } from "component-lib";
+    import {
+        allUsersStore,
+        publish,
+        selectedCommunityUserGroupsStore,
+        type CommunitySummary,
+        type OpenChat,
+        type UserGroupDetails,
+        type UserSummary,
+    } from "@client";
+    import { getContext, onMount } from "svelte";
+    import { _ } from "svelte-i18n";
+    import Edit from "svelte-material-icons/SquareEditOutline.svelte";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import { trimLeadingAtSymbol } from "@src/utils/user";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
+    import User from "@src/mobile/shared/User.svelte";
+    import { CommunityState } from "./communityState.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        community: CommunitySummary;
+        userGroup: UserGroupDetails;
+    }
+
+    onMount(() => {
+        return selectedCommunityUserGroupsStore.subscribe((groups) => {
+            const ug = groups.get(userGroup.id);
+            if (ug !== undefined) {
+                userGroup = ug;
+            }
+        });
+    });
+
+    let { community, userGroup }: Props = $props();
+
+    let communityState = new CommunityState(client, community);
+    let searchTermEntered = $state("");
+
+    function matchesSearch(searchTerm: string, user: UserSummary): boolean {
+        if (searchTerm === "") return true;
+        return (
+            user.username.toLowerCase().includes(searchTerm) ||
+            (user.displayName !== undefined && user.displayName.toLowerCase().includes(searchTerm))
+        );
+    }
+
+    let searchTerm = $derived(trimLeadingAtSymbol(searchTermEntered));
+    let searchTermLower = $derived(searchTerm.toLowerCase());
+    let groupUsers = $derived(
+        [...userGroup.members]
+            .map((m) => $allUsersStore.get(m))
+            .filter((u) => u !== undefined) as UserSummary[],
+    );
+    let matchedUsers = $derived(groupUsers.filter((u) => matchesSearch(searchTermLower, u)));
+
+    function editUserGroup() {
+        publish("editUserGroup", userGroup);
+    }
+</script>
+
+<SlidingPageContent
+    subtitle={i18nKey(`User group in ${community.name}`)}
+    title={i18nKey(userGroup.name)}>
+    <Container height={"fill"} mainAxisAlignment={"spaceBetween"} direction={"vertical"}>
+        <Container
+            height={"fill"}
+            gap={"xl"}
+            padding={["xxl", "lg", "lg", "lg"]}
+            direction={"vertical"}>
+            <Search
+                searching={false}
+                bind:value={searchTermEntered}
+                placeholder={interpolate($_, i18nKey("Search user group members..."))} />
+
+            <Container padding={["zero", "md"]} direction={"vertical"}>
+                <Body fontWeight={"bold"}>
+                    <Translatable
+                        resourceKey={i18nKey(`${userGroup.name} (${userGroup.members.size})`)} />
+                </Body>
+
+                <BodySmall colour={"textSecondary"}>
+                    <Translatable
+                        resourceKey={i18nKey(
+                            "Manage members of this group or update group data.",
+                        )} />
+                </BodySmall>
+            </Container>
+
+            <Container padding={["zero", "md"]} gap={"xl"} direction={"vertical"}>
+                {#each matchedUsers as user}
+                    <User {searchTerm} {user} />
+                {/each}
+            </Container>
+        </Container>
+    </Container>
+    {#if communityState.canManageUserGroups}
+        <FloatingButton pos={{ bottom: "lg", right: "lg" }} onClick={editUserGroup}>
+            {#snippet icon(color)}
+                <Edit {color} />
+            {/snippet}
+        </FloatingButton>
+    {/if}
+</SlidingPageContent>
diff --git a/frontend/app/src/components_mobile/home/communities/details/UserGroupRow.svelte b/frontend/app/src/mobile/features/chats/community/details/UserGroupRow.svelte
similarity index 97%
rename from frontend/app/src/components_mobile/home/communities/details/UserGroupRow.svelte
rename to frontend/app/src/mobile/features/chats/community/details/UserGroupRow.svelte
index d64aefdcdc..12f14f2dd4 100644
--- a/frontend/app/src/components_mobile/home/communities/details/UserGroupRow.svelte
+++ b/frontend/app/src/mobile/features/chats/community/details/UserGroupRow.svelte
@@ -20,7 +20,7 @@
     import Delete from "svelte-material-icons/DeleteForeverOutline.svelte";
     import DotsVertical from "svelte-material-icons/DotsVertical.svelte";
     import Edit from "svelte-material-icons/TextBoxEditOutline.svelte";
-    import AreYouSure from "../../../AreYouSure.svelte";
+    import AreYouSure from "@src/mobile/shared/AreYouSure.svelte";
     import type { CommunityState } from "./communityState.svelte";
 
     const client = getContext<OpenChat>("client");
diff --git a/frontend/app/src/components_mobile/home/communities/details/UserGroupSummary.svelte b/frontend/app/src/mobile/features/chats/community/details/UserGroupSummary.svelte
similarity index 94%
rename from frontend/app/src/components_mobile/home/communities/details/UserGroupSummary.svelte
rename to frontend/app/src/mobile/features/chats/community/details/UserGroupSummary.svelte
index af45547fc5..daee1144f8 100644
--- a/frontend/app/src/components_mobile/home/communities/details/UserGroupSummary.svelte
+++ b/frontend/app/src/mobile/features/chats/community/details/UserGroupSummary.svelte
@@ -4,8 +4,8 @@
     import { publish, selectedCommunityUserGroupsStore } from "@client";
     import AccountGroup from "svelte-material-icons/AccountGroupOutline.svelte";
     import { SvelteSet } from "svelte/reactivity";
-    import Translatable from "../../../Translatable.svelte";
-    import Separator from "../../Separator.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import Separator from "@src/mobile/features/chats/core/Separator.svelte";
     import type { CommunityState } from "./communityState.svelte";
     import UserGroupRow from "./UserGroupRow.svelte";
 
diff --git a/frontend/app/src/mobile/features/chats/community/details/UserGroups.svelte b/frontend/app/src/mobile/features/chats/community/details/UserGroups.svelte
new file mode 100644
index 0000000000..82f720461a
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/community/details/UserGroups.svelte
@@ -0,0 +1,88 @@
+<script lang="ts">
+    import { Body, BodySmall, Container, FloatingButton, Search } from "component-lib";
+    import type { CommunitySummary, OpenChat, UserGroupDetails } from "@client";
+    import { publish, selectedCommunityUserGroupsStore } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import Plus from "svelte-material-icons/Plus.svelte";
+    import { SvelteSet } from "svelte/reactivity";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
+    import UserGroupRow from "./UserGroupRow.svelte";
+    import { CommunityState } from "./communityState.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        community: CommunitySummary;
+    }
+
+    let { community }: Props = $props();
+    let communityState = new CommunityState(client, community);
+
+    let searchTerm = $state("");
+
+    function matchesSearch(searchTerm: string, userGroup: UserGroupDetails): boolean {
+        if (searchTerm === "") return true;
+        return userGroup.name.toLowerCase().includes(searchTerm);
+    }
+
+    function createUserGroup() {
+        publish("editUserGroup", {
+            kind: "user_group",
+            id: -1,
+            name: "",
+            members: new SvelteSet<string>(),
+        });
+    }
+
+    let searchTermLower = $derived(searchTerm.toLowerCase());
+    let userGroups = $derived([...$selectedCommunityUserGroupsStore.values()]);
+    let canManageUserGroups = $derived(client.canManageUserGroups(community.id));
+    let matchingGroups = $derived(userGroups.filter((ug) => matchesSearch(searchTermLower, ug)));
+</script>
+
+<SlidingPageContent title={i18nKey("User groups")} subtitle={i18nKey(community.name)}>
+    <Container height={"fill"} mainAxisAlignment={"spaceBetween"} direction={"vertical"}>
+        <Container
+            height={"fill"}
+            gap={"xl"}
+            padding={["xxl", "lg", "lg", "lg"]}
+            direction={"vertical"}>
+            <Search
+                searching={false}
+                bind:value={searchTerm}
+                onClear={() => (searchTerm = "")}
+                placeholder={interpolate($_, i18nKey("communities.searchUserGroups"))} />
+
+            <Container padding={["zero", "md"]} direction={"vertical"}>
+                <Body fontWeight={"bold"}>
+                    {#if userGroups.length === 0}
+                        <Translatable resourceKey={i18nKey("communities.noUserGroups")} />
+                    {:else}
+                        <Translatable resourceKey={i18nKey(`User groups (${userGroups.length})`)} />
+                    {/if}
+                </Body>
+
+                <BodySmall colour={"textSecondary"}>
+                    <Translatable
+                        resourceKey={i18nKey(
+                            "User groups allow you to tag / @mention all users assigned to a particular group in a chat message.",
+                        )} />
+                </BodySmall>
+            </Container>
+
+            <Container padding={["zero", "md"]} gap={"xl"} direction={"vertical"}>
+                {#each matchingGroups as userGroup}
+                    <UserGroupRow {userGroup} {canManageUserGroups} {communityState} />
+                {/each}
+            </Container>
+        </Container>
+    </Container>
+    <FloatingButton pos={{ bottom: "lg", right: "lg" }} onClick={createUserGroup}>
+        {#snippet icon(color)}
+            <Plus {color} />
+        {/snippet}
+    </FloatingButton>
+</SlidingPageContent>
diff --git a/frontend/app/src/components_mobile/home/communities/details/communityState.svelte.ts b/frontend/app/src/mobile/features/chats/community/details/communityState.svelte.ts
similarity index 100%
rename from frontend/app/src/components_mobile/home/communities/details/communityState.svelte.ts
rename to frontend/app/src/mobile/features/chats/community/details/communityState.svelte.ts
diff --git a/frontend/app/src/components_mobile/home/communities/explore/BotFilters.svelte b/frontend/app/src/mobile/features/chats/community/explore/BotFilters.svelte
similarity index 88%
rename from frontend/app/src/components_mobile/home/communities/explore/BotFilters.svelte
rename to frontend/app/src/mobile/features/chats/community/explore/BotFilters.svelte
index 5d245de1de..d20065f344 100644
--- a/frontend/app/src/components_mobile/home/communities/explore/BotFilters.svelte
+++ b/frontend/app/src/mobile/features/chats/community/explore/BotFilters.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
     import { BodySmall, Container, Subtitle, Switch, Title } from "component-lib";
     import { showUnpublishedBots } from "@client";
-    import { i18nKey } from "../../../../i18n/i18n";
-    import Translatable from "../../../Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
 </script>
 
 <Container padding={"lg"} gap={"lg"} direction={"vertical"}>
diff --git a/frontend/app/src/components_mobile/home/communities/explore/CommunityBanner.svelte b/frontend/app/src/mobile/features/chats/community/explore/CommunityBanner.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/communities/explore/CommunityBanner.svelte
rename to frontend/app/src/mobile/features/chats/community/explore/CommunityBanner.svelte
diff --git a/frontend/app/src/mobile/features/chats/community/explore/CommunityCard.svelte b/frontend/app/src/mobile/features/chats/community/explore/CommunityCard.svelte
new file mode 100644
index 0000000000..41b417b01c
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/community/explore/CommunityCard.svelte
@@ -0,0 +1,152 @@
+<script lang="ts">
+    import { flattenGateConfig } from "@src/utils/access";
+    import {
+        Avatar,
+        Body,
+        BodySmall,
+        Chip,
+        ColourVars,
+        Container,
+        ReadMore,
+        Title,
+    } from "component-lib";
+    import type { AccessGateConfig, DataContent, OpenChat } from "@client";
+    import { ModerationFlags } from "@client";
+    import { getContext } from "svelte";
+    import Translate from "svelte-material-icons/Translate.svelte";
+    import { i18nKey, supportedLanguagesByCode } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import WithVerifiedBadge from "@src/mobile/ui/icons/WithVerifiedBadge.svelte";
+    import IntersectionObserver from "@src/mobile/features/chats/core/IntersectionObserver.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import AccessGateChip from "@src/mobile/features/access/AccessGateChip.svelte";
+    import CommunityBanner from "./CommunityBanner.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        id: string;
+        name: string;
+        description: string;
+        avatar: DataContent;
+        banner: DataContent;
+        memberCount: number;
+        channelCount: number;
+        header?: boolean;
+        gateConfig: AccessGateConfig;
+        language: string;
+        flags: number;
+        verified: boolean;
+    }
+
+    let {
+        id,
+        name,
+        description,
+        avatar,
+        banner,
+        memberCount,
+        channelCount,
+        header = false,
+        gateConfig,
+        language,
+        flags,
+        verified,
+    }: Props = $props();
+
+    let gates = flattenGateConfig(gateConfig);
+
+    let flagsArray = $derived(serialiseFlags(flags));
+    function serialiseFlags(flags: number) {
+        const f: string[] = [];
+        if (client.hasModerationFlag(flags, ModerationFlags.Adult)) {
+            f.push("communities.adult");
+        }
+        if (client.hasModerationFlag(flags, ModerationFlags.Offensive)) {
+            f.push("communities.offensive");
+        }
+        if (client.hasModerationFlag(flags, ModerationFlags.UnderReview)) {
+            f.push("communities.underReview");
+        }
+        return f;
+    }
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<Container
+    padding={["zero", "zero", "lg", "zero"]}
+    borderRadius={"md"}
+    background={ColourVars.background1}
+    direction={"vertical"}>
+    <IntersectionObserver>
+        {#snippet children(intersecting)}
+            <CommunityBanner {intersecting} square={header} {banner}>
+                <Container
+                    pos={{ bottom: "sm", right: "sm" }}
+                    width={"hug"}
+                    crossAxisAlignment={"center"}
+                    gap={"xs"}
+                    borderRadius={"md"}
+                    padding={["xs", "md"]}
+                    background={ColourVars.background0}>
+                    <Translate color={ColourVars.primaryLight} />
+                    <BodySmall colour={"primaryLight"}>
+                        {supportedLanguagesByCode[language]?.name}
+                    </BodySmall>
+                </Container>
+            </CommunityBanner>
+        {/snippet}
+    </IntersectionObserver>
+    <Container
+        supplementalClass={"community_details"}
+        gap={"md"}
+        padding={["zero", "lg"]}
+        direction="vertical">
+        <Container gap={"sm"}>
+            <Avatar borderWidth={"thick"} size={"xxl"} url={client.communityAvatarUrl(id, avatar)}
+            ></Avatar>
+            <Container height={"fill"} mainAxisAlignment={"end"} direction={"vertical"}>
+                <Container gap={"sm"} crossAxisAlignment={"center"}>
+                    <WithVerifiedBadge
+                        {verified}
+                        tooltip={i18nKey("verified.verified", undefined, "community")}>
+                        <Title fontWeight={"bold"}>
+                            {name}
+                        </Title>
+                    </WithVerifiedBadge>
+                </Container>
+                <BodySmall colour={"textSecondary"}>
+                    <Container gap={"xs"}>
+                        {memberCount.toLocaleString()} members
+                        <span>//</span>
+                        {channelCount} channels
+                    </Container>
+                </BodySmall>
+            </Container>
+        </Container>
+        <ReadMore>
+            <Body fontWeight={"light"}>
+                <Markdown inline={false} text={description} />
+            </Body>
+        </ReadMore>
+        <Container gap={"sm"} wrap>
+            {#each flagsArray as flag}
+                <Chip mode={"default"}>
+                    <div class="flag"><Translatable resourceKey={i18nKey(flag)} /></div>
+                </Chip>
+            {/each}
+        </Container>
+        <Container gap={"sm"} wrap>
+            {#each gates as gate}
+                <AccessGateChip {gate} />
+            {/each}
+        </Container>
+    </Container>
+</Container>
+
+<style lang="scss">
+    :global(.container.community_details) {
+        margin-top: -2rem;
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/home/communities/explore/CommunityMatch.svelte b/frontend/app/src/mobile/features/chats/community/explore/CommunityMatch.svelte
similarity index 92%
rename from frontend/app/src/components_mobile/home/communities/explore/CommunityMatch.svelte
rename to frontend/app/src/mobile/features/chats/community/explore/CommunityMatch.svelte
index eeaa7bf06c..e568d5561e 100644
--- a/frontend/app/src/components_mobile/home/communities/explore/CommunityMatch.svelte
+++ b/frontend/app/src/mobile/features/chats/community/explore/CommunityMatch.svelte
@@ -8,9 +8,9 @@
         type OpenChat,
     } from "@client";
     import { getContext } from "svelte";
-    import WithVerifiedBadge from "../../../icons/WithVerifiedBadge.svelte";
-    import Translatable from "../../../Translatable.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
+    import WithVerifiedBadge from "@src/mobile/ui/icons/WithVerifiedBadge.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/mobile/features/chats/community/explore/Explore.svelte b/frontend/app/src/mobile/features/chats/community/explore/Explore.svelte
new file mode 100644
index 0000000000..400d42f32c
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/community/explore/Explore.svelte
@@ -0,0 +1,480 @@
+<script lang="ts">
+    import { disableRestrictedContent } from "@src/utils/features";
+    import {
+        Body,
+        Button,
+        Chip,
+        ColourVars,
+        CommonButton,
+        Container,
+        FloatingButton,
+        MenuItem,
+        Overview,
+        Search,
+        SectionHeader,
+        Sheet,
+        Subtitle,
+        transition,
+    } from "component-lib";
+    import {
+        anonUserStore,
+        botState,
+        exploreCommunitiesFiltersStore,
+        identityStateStore,
+        offlineStore,
+        publish,
+        showUnpublishedBots,
+        type BotMatch,
+        type CommunityMatch,
+        type OpenChat,
+    } from "@client";
+    import { navigate } from "@src/utils/navigation";
+    import { getContext, onMount, tick } from "svelte";
+    import { _ } from "svelte-i18n";
+    import Account from "svelte-material-icons/AccountGroupOutline.svelte";
+    import ArrowUp from "svelte-material-icons/ArrowUp.svelte";
+    import LoadMore from "svelte-material-icons/CloudDownloadOutline.svelte";
+    import CloudOffOutline from "svelte-material-icons/CloudOffOutline.svelte";
+    import EyeOutline from "svelte-material-icons/EyeOutline.svelte";
+    import Filter from "svelte-material-icons/FilterVariant.svelte";
+    import Robot from "svelte-material-icons/RobotOutline.svelte";
+    import { fade } from "svelte/transition";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import {
+        botSearchState,
+        communitySearchState,
+        SearchState,
+    } from "@src/stores/search.svelte";
+    import FancyLoader from "@src/mobile/ui/icons/FancyLoader.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import AnonFooter from "@src/mobile/features/onboard/AnonFooter.svelte";
+    import NothingToSee from "@src/mobile/shared/NothingToSee.svelte";
+    import { updateCommunityState } from "@src/mobile/features/chats/community/createOrUpdate/community.svelte";
+    import BotCard from "@src/mobile/features/bots/exports/BotCard.svelte";
+    import BotFilters from "./BotFilters.svelte";
+    import CommunityCard from "./CommunityCard.svelte";
+    import CommunityMatchComponent from "./CommunityMatch.svelte";
+    import CommunityFilters from "./Filters.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    type View = "communities" | "bots";
+    let searching = $state(false);
+    let showFab = $state(false);
+    let scrollableElement: HTMLElement | undefined;
+    let initialised = $state(false);
+    let view = $state<View>("communities");
+    let showingFilters = $state(false);
+    let selectedCommunity = $state<CommunityMatch>();
+
+    let searchState = $derived<SearchState<CommunityMatch | BotMatch>>(
+        view === "communities" ? communitySearchState : botSearchState,
+    );
+
+    function clear() {
+        searchState.term = "";
+        communitySearchState.term = "";
+        botSearchState.term = "";
+        search(true);
+    }
+
+    function createCommunity() {
+        updateCommunityState.createCommunity(client);
+    }
+
+    function registerBot() {
+        if (anonUserStore.value) {
+            client.updateIdentityState({
+                kind: "logging_in",
+                postLogin: { kind: "register_bot" },
+            });
+            return;
+        } else {
+            publish("registerBot");
+        }
+    }
+
+    function searchCommunities(
+        filters: {
+            languages: string[];
+            flags: number;
+        },
+        reset = false,
+    ) {
+        if (reset) {
+            communitySearchState.reset();
+        } else {
+            communitySearchState.nextPage();
+        }
+        client
+            .exploreCommunities(
+                communitySearchState.term === "" ? undefined : communitySearchState.term,
+                communitySearchState.index,
+                32,
+                disableRestrictedContent ? 0 : filters.flags ?? 0,
+                filters.languages,
+            )
+            .then((results) => {
+                if (results.kind === "success") {
+                    if (reset) {
+                        communitySearchState.results = results.matches;
+                    } else {
+                        communitySearchState.appendResults(results.matches);
+                    }
+                    communitySearchState.total = results.total;
+                }
+            })
+            .finally(() => (searching = false));
+    }
+
+    function searchBots(showUnpublished: boolean) {
+        botSearchState.results = [...botState.externalBots.values()]
+            .filter(
+                (b) =>
+                    (b.registrationStatus.kind === "public" || showUnpublished) &&
+                    (b.name.toLocaleLowerCase().includes(botSearchState.term.toLocaleLowerCase()) ||
+                        b.definition.description
+                            .toLocaleLowerCase()
+                            .includes(botSearchState.term.toLocaleLowerCase())),
+            )
+            .map((b) => ({
+                ...b,
+                kind: "bot_match",
+            }));
+        searching = false;
+    }
+
+    function search(reset = false) {
+        searching = true;
+        if (view === "communities") {
+            searchCommunities($exploreCommunitiesFiltersStore, reset);
+        } else {
+            searchBots($showUnpublishedBots);
+        }
+    }
+
+    onMount(() => {
+        tick().then(() => {
+            if (scrollableElement) {
+                scrollableElement.scrollTop = searchState.scrollPos;
+                scrollableElement.addEventListener("scroll", onScroll);
+            }
+            onScroll();
+        });
+
+        const unsub = exploreCommunitiesFiltersStore.subscribe((filters) => {
+            if (initialised || communitySearchState.results.length === 0) {
+                searchCommunities(filters, true);
+            }
+            initialised = true;
+        });
+
+        const unsubBot = showUnpublishedBots.subscribe((show) => {
+            if (initialised || botSearchState.results.length === 0) {
+                searchBots(show);
+            }
+            initialised = true;
+        }, undefined);
+
+        return () => {
+            scrollableElement?.removeEventListener("scroll", onScroll);
+            unsub();
+            unsubBot();
+        };
+    });
+
+    function setView(v: View) {
+        transition(["fade"], () => {
+            view = v;
+        });
+        search(true);
+    }
+
+    function scrollToTop() {
+        if (scrollableElement) {
+            scrollableElement.scrollTop = 0;
+        }
+    }
+
+    function onScroll() {
+        if (scrollableElement) {
+            showFab = scrollableElement.scrollTop > 500;
+            searchState.scrollPos = scrollableElement.scrollTop;
+        }
+    }
+    let more = $derived(searchState.total > searchState.results.length);
+    let loading = $derived(searching && searchState.results.length === 0);
+
+    function goToCommunity(community: CommunityMatch) {
+        navigate(`/community/${community.id.communityId}`);
+    }
+
+    function showCommunity(community: CommunityMatch) {
+        selectedCommunity = community;
+    }
+
+    function scrolledToBottom(fromEnd: number) {
+        if (fromEnd < 100 && more && !searching) {
+            search(false);
+        }
+    }
+</script>
+
+{#if selectedCommunity !== undefined}
+    <Sheet onDismiss={() => (selectedCommunity = undefined)}>
+        <Container padding={"lg"} direction={"vertical"} gap={"md"}>
+            {@const community = selectedCommunity}
+            <CommunityCard
+                id={community.id.communityId}
+                name={community.name}
+                description={community.description}
+                avatar={community.avatar}
+                banner={community.banner}
+                memberCount={community.memberCount}
+                channelCount={community.channelCount}
+                header={false}
+                gateConfig={community.gateConfig}
+                language={community.primaryLanguage}
+                flags={community.flags}
+                verified={community.verified} />
+            <Button onClick={() => goToCommunity(community)}>
+                {#snippet icon(color)}
+                    <EyeOutline {color} />
+                {/snippet}
+                View community</Button>
+        </Container>
+    </Sheet>
+{/if}
+
+{#if showingFilters}
+    <Sheet onDismiss={() => (showingFilters = false)}>
+        {#if view === "communities"}
+            <CommunityFilters />
+        {:else}
+            <BotFilters />
+        {/if}
+    </Sheet>
+{/if}
+
+{#snippet communityCard(community: CommunityMatch)}
+    <CommunityMatchComponent onClick={() => showCommunity(community)} {community} />
+{/snippet}
+
+<Container
+    bind:ref={scrollableElement}
+    onInsideEnd={scrolledToBottom}
+    height={"fill"}
+    parentDirection={"vertical"}
+    gap={"xl"}
+    direction={"vertical"}
+    padding={["zero", "zero", "huge"]}>
+    <!-- TODO Explore does not have a hedear -->
+    <SectionHeader onAction={createCommunity} onBack={() => history.back()}>
+        {#snippet title()}
+            <Translatable resourceKey={i18nKey("communities.exploreMobile")} />
+        {/snippet}
+        {#snippet menu()}
+            <MenuItem onclick={createCommunity}>
+                <Translatable resourceKey={i18nKey("communities.create")} />
+            </MenuItem>
+            <MenuItem onclick={registerBot}>
+                <Translatable resourceKey={i18nKey("Register a bot")} />
+            </MenuItem>
+        {/snippet}
+    </SectionHeader>
+
+    <Container direction={"vertical"} gap={"md"} padding={["zero", "xxl"]}>
+        <Overview>
+            <Translatable resourceKey={i18nKey("Explore Communities & Bots")} />
+        </Overview>
+        <Body colour={"textSecondary"}>
+            <Translatable
+                resourceKey={i18nKey(
+                    "Find communities that resonate with you or maybe start a community of your own. Whether it's crypto, gaming or your favourite sport - this is the place to find your people.",
+                )} />
+        </Body>
+    </Container>
+
+    <Container
+        supplementalClass={"explore_search_and_chips"}
+        direction={"vertical"}
+        padding={["zero", "zero", "lg", "zero"]}
+        gap={"lg"}
+        background={ColourVars.background0}>
+        <Container padding={["zero", "lg"]}>
+            <Search
+                bind:value={searchState.term}
+                onClear={clear}
+                {searching}
+                onSearch={() => search(true)}
+                placeholder={interpolate(
+                    $_,
+                    i18nKey(view === "communities" ? "communities.search" : "Search bots"),
+                )} />
+        </Container>
+
+        <Container padding={["zero", "xl"]} gap={"sm"}>
+            <Chip
+                onClick={() => setView("communities")}
+                mode={view === "communities" ? "rounded" : "unselected"}>
+                {#snippet icon(color)}
+                    <Account {color} />
+                {/snippet}
+                <Translatable resourceKey={i18nKey("Communities")} />
+            </Chip>
+            <Chip onClick={() => setView("bots")} mode={view === "bots" ? "rounded" : "unselected"}>
+                {#snippet icon(color)}
+                    <Robot {color} />
+                {/snippet}
+                <Translatable resourceKey={i18nKey("Bots")} />
+            </Chip>
+        </Container>
+    </Container>
+
+    <Container
+        height={loading || searchState.results.length === 0 ? "fill" : "hug"}
+        crossAxisAlignment={loading ? "center" : "start"}
+        mainAxisAlignment={loading ? "center" : "start"}
+        gap={"md"}
+        direction={"vertical"}
+        padding={["zero", "lg", "md", "lg"]}>
+        {#if loading}
+            <FancyLoader size={"4rem"} />
+        {:else if searchState.results.length === 0}
+            <Container
+                mainAxisAlignment={"center"}
+                crossAxisAlignment={"center"}
+                gap={"sm"}
+                height={"fill"}
+                direction={"vertical"}>
+                {#if $offlineStore}
+                    <CloudOffOutline size={"1.8em"} />
+                    <Subtitle colour={"textSecondary"} align={"center"}>
+                        <Translatable resourceKey={i18nKey("offlineError")} />
+                    </Subtitle>
+                {:else}
+                    <NothingToSee
+                        reset={{
+                            onClick: view === "communities" ? createCommunity : registerBot,
+                            text: view === "communities" ? "Create a community" : "Register a bot",
+                        }}
+                        subtitle={interpolate($_, i18nKey("communities.refineSearch"))}
+                        title={interpolate(
+                            $_,
+                            i18nKey(
+                                view === "communities" ? "communities.noMatch" : "No matching bots",
+                            ),
+                        )}>
+                    </NothingToSee>
+                {/if}
+            </Container>
+        {:else}
+            {#if view === "communities"}
+                <Container
+                    padding={$anonUserStore ? ["zero", "lg", "huge", "lg"] : ["zero", "lg"]}
+                    direction={"vertical"}
+                    gap={"lg"}>
+                    {#each communitySearchState.results as community (community.id.communityId)}
+                        {@render communityCard(community)}
+                    {/each}
+                </Container>
+            {:else}
+                <Container
+                    padding={$anonUserStore ? ["zero", "lg", "huge", "lg"] : ["zero", "lg"]}
+                    direction={"vertical"}
+                    gap={"lg"}>
+                    {#each botSearchState.results as bot (bot.id)}
+                        <BotCard
+                            onSelect={(id) =>
+                                publish("showBot", { bot: botState.externalBots.get(id)! })}
+                            {bot} />
+                    {/each}
+                </Container>
+            {/if}
+            {#if more}
+                <Container mainAxisAlignment={"center"}>
+                    <CommonButton
+                        size={"small_text"}
+                        onClick={() => search(false)}
+                        disabled={searching}
+                        loading={searching}>
+                        {#snippet icon(color, size)}
+                            <LoadMore {color} {size} />
+                        {/snippet}
+                        <Translatable resourceKey={i18nKey("communities.loadMore")} />
+                    </CommonButton>
+                </Container>
+            {/if}
+        {/if}
+    </Container>
+</Container>
+
+{#if $anonUserStore && $identityStateStore.kind !== "logging_in" && $identityStateStore.kind !== "registering"}
+    <AnonFooter>
+        <FloatingButton onClick={() => (showingFilters = true)}>
+            {#snippet icon(color)}
+                <Filter {color} />
+            {/snippet}
+        </FloatingButton>
+    </AnonFooter>
+{:else}
+    <FloatingButton onClick={() => (showingFilters = true)} pos={{ bottom: "lg", right: "lg" }}>
+        {#snippet icon(color)}
+            <Filter {color} />
+        {/snippet}
+    </FloatingButton>
+{/if}
+
+{#if showFab}
+    <div transition:fade class="fab">
+        <FloatingButton onClick={scrollToTop}>
+            {#snippet icon(color)}
+                <ArrowUp {color} />
+            {/snippet}
+        </FloatingButton>
+    </div>
+{/if}
+
+<style lang="scss">
+    :global(.container.explore_search_and_chips) {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+    }
+
+    $size: 150px;
+
+    .fab {
+        position: absolute;
+        bottom: 5.5rem;
+        right: var(--sp-lg);
+    }
+
+    .img {
+        background-repeat: no-repeat;
+        width: 1rem;
+        height: 1rem;
+
+        &.public {
+            background-image: url("/assets/unlocked.svg");
+        }
+
+        &.private {
+            background-image: url("/assets/locked.svg");
+        }
+    }
+
+    .robot {
+        border: 4px solid var(--background-0);
+        background-color: var(--primary);
+        border-radius: var(--rad-circle);
+        width: 2rem;
+        height: 2rem;
+        position: absolute;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        bottom: -2px;
+        right: -2px;
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/chats/community/explore/Filters.svelte b/frontend/app/src/mobile/features/chats/community/explore/Filters.svelte
new file mode 100644
index 0000000000..5c8d8b8285
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/community/explore/Filters.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+    import { Container, Subtitle, Switch, Title } from "component-lib";
+    import { communityFiltersStore, OpenChat } from "@client";
+    import { getContext } from "svelte";
+    import { i18nKey, supportedLanguages } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    const client = getContext<OpenChat>("client");
+</script>
+
+<Container height={{ size: "55vh" }} padding={"xl"} gap={"lg"} direction={"vertical"}>
+    <Title fontWeight={"bold"}>
+        <Translatable resourceKey={i18nKey("communities.primaryLanguage")} />
+    </Title>
+    <Container height={"fill"} direction={"vertical"} gap={"md"}>
+        {#each supportedLanguages as lang}
+            <Switch
+                onChange={() => client.toggleCommunityFilterLanguage(lang.code)}
+                checked={$communityFiltersStore.has(lang.code)}>
+                <Subtitle>
+                    <Translatable resourceKey={i18nKey(lang.name)} />
+                </Subtitle>
+            </Switch>
+        {/each}
+    </Container>
+</Container>
diff --git a/frontend/app/src/mobile/features/chats/core/AcceptP2PSwapModal.svelte b/frontend/app/src/mobile/features/chats/core/AcceptP2PSwapModal.svelte
new file mode 100644
index 0000000000..f943dc73ec
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/AcceptP2PSwapModal.svelte
@@ -0,0 +1,102 @@
+<script lang="ts">
+    import { Body, Column, CommonButton, Row, Sheet, Subtitle } from "component-lib";
+    import type { OpenChat } from "@client";
+    import { cryptoBalanceStore, enhancedCryptoLookup as cryptoLookup } from "@client";
+    import { getContext } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import AccountInfo from "@src/mobile/shared/AccountInfo.svelte";
+    import BalanceWithRefresh from "@src/mobile/shared/BalanceWithRefresh.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        ledger0: string;
+        ledger1: string;
+        amount0: bigint;
+        amount1: bigint;
+        onClose: () => void;
+        onAccept: () => void;
+    }
+
+    let { ledger0, ledger1, amount0, amount1, onClose, onAccept }: Props = $props();
+
+    let refreshing = false;
+    let error: string | undefined = undefined;
+    //@ts-ignore
+    let balanceWithRefresh: BalanceWithRefresh;
+
+    function reset() {
+        balanceWithRefresh.refresh();
+    }
+
+    let cryptoBalance = $derived($cryptoBalanceStore.get(ledger1) ?? 0n);
+    let tokenDetails0 = $derived($cryptoLookup.get(ledger0)!);
+    let tokenDetails1 = $derived($cryptoLookup.get(ledger1)!);
+    let symbol0 = $derived(tokenDetails0.symbol);
+    let symbol1 = $derived(tokenDetails1.symbol);
+    let transferFees = $derived(BigInt(2) * tokenDetails1.transferFee);
+    let insufficient = $derived(cryptoBalance <= amount1 + transferFees);
+    let valid = $derived(error === undefined && !insufficient);
+    let amount0Text = $derived(client.formatTokens(amount0, tokenDetails0.decimals));
+    let amount1Text = $derived(client.formatTokens(amount1 + transferFees, tokenDetails1.decimals));
+</script>
+
+<Sheet onDismiss={onClose}>
+    <Column gap={"lg"} padding={"lg"}>
+        <Row mainAxisAlignment={"spaceBetween"} crossAxisAlignment={"center"}>
+            <Subtitle width={"hug"} fontWeight={"bold"}>
+                <Translatable
+                    resourceKey={i18nKey(
+                        insufficient ? "p2pSwap.insufficientBalance" : "areYouSure",
+                    )} />
+            </Subtitle>
+            <BalanceWithRefresh
+                bind:this={balanceWithRefresh}
+                ledger={ledger1}
+                value={cryptoBalance} />
+        </Row>
+        <div class="body" class:insufficient>
+            {#if insufficient}
+                <Body colour={"textSecondary"}>
+                    <Translatable
+                        resourceKey={i18nKey("p2pSwap.insufficientBalanceMessage", {
+                            amount: amount1Text,
+                            token: symbol1,
+                        })} />
+                </Body>
+                <AccountInfo ledger={ledger1} />
+            {:else}
+                <Body colour={"textSecondary"}>
+                    <Translatable
+                        resourceKey={i18nKey("p2pSwap.confirmAccept", {
+                            amount: amount1Text,
+                            token: symbol1,
+                            amountOther: amount0Text,
+                            tokenOther: symbol0,
+                        })} />
+                </Body>
+            {/if}
+        </div>
+        <Row gap={"md"} mainAxisAlignment={"end"} crossAxisAlignment={"center"}>
+            <CommonButton size={"small_text"} onClick={onClose}
+                ><Translatable resourceKey={i18nKey("cancel")} /></CommonButton>
+            {#if insufficient}
+                <CommonButton
+                    mode={"active"}
+                    size={"medium"}
+                    width={{ size: "4rem" }}
+                    disabled={refreshing}
+                    loading={refreshing}
+                    onClick={reset}><Translatable resourceKey={i18nKey("refresh")} /></CommonButton>
+            {:else}
+                <CommonButton
+                    width={{ size: "4rem" }}
+                    mode={"active"}
+                    size={"medium"}
+                    disabled={!valid}
+                    onClick={onAccept}><Translatable resourceKey={i18nKey("yes")} /></CommonButton>
+            {/if}
+        </Row>
+    </Column>
+</Sheet>
diff --git a/frontend/app/src/mobile/features/chats/core/AcceptRulesModal.svelte b/frontend/app/src/mobile/features/chats/core/AcceptRulesModal.svelte
new file mode 100644
index 0000000000..dbe44c7ac7
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/AcceptRulesModal.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+    import {
+        type OpenChat,
+        captureRulesAcceptanceStore as rulesAcceptanceStore,
+        selectedChatRulesStore,
+        selectedCommunityRulesStore,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import AreYouSure from "@src/mobile/shared/AreYouSure.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    function onAction(accepted: boolean): Promise<void> {
+        $rulesAcceptanceStore?.resolve(accepted);
+        return Promise.resolve();
+    }
+</script>
+
+<AreYouSure
+    title={i18nKey("rules.acceptTitle")}
+    message={i18nKey(
+        client.combineRulesText($selectedChatRulesStore, $selectedCommunityRulesStore),
+    )}
+    yesLabel={i18nKey("rules.accept")}
+    noLabel={i18nKey("rules.reject")}
+    action={onAction} />
diff --git a/frontend/app/src/mobile/features/chats/core/AccessGateSummary.svelte b/frontend/app/src/mobile/features/chats/core/AccessGateSummary.svelte
new file mode 100644
index 0000000000..83db5ade88
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/AccessGateSummary.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+    import { i18nKey } from "@src/i18n/i18n";
+    import { flattenGateConfig } from "@src/utils/access";
+    import { Body, Container, type SizeMode } from "component-lib";
+    import { type AccessGateConfig } from "@client";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import Separator from "./Separator.svelte";
+    import AccessGateText from "@src/mobile/features/access/AccessGateText.svelte";
+
+    interface Props {
+        gateConfig: AccessGateConfig;
+    }
+
+    let { gateConfig }: Props = $props();
+
+    let gates = $derived(flattenGateConfig(gateConfig));
+    const width: SizeMode = "hug";
+    let evaluationDays = $derived(initialEvaluationDays());
+    function initialEvaluationDays() {
+        if (gateConfig.expiry === undefined) return undefined;
+        return Math.floor(Number(gateConfig.expiry) / 1000 / 60 / 60 / 24).toString();
+    }
+</script>
+
+<Separator />
+
+<Container padding={["zero", "md"]} gap={"xl"} direction={"vertical"}>
+    <Container direction={"vertical"} gap={"md"}>
+        <Body colour={"textSecondary"} fontWeight={"bold"}>
+            <Translatable resourceKey={i18nKey("Access gates")}></Translatable>
+        </Body>
+
+        {#if gates.length > 0}
+            <Container {width} wrap gap={"sm"}>
+                {#each gates as gate, i}
+                    {@const last = i === gates.length - 1}
+                    <AccessGateText {gate} />
+                    {#if !last}
+                        <Body colour={"primary"} {width}>/</Body>
+                    {/if}
+                {/each}
+            </Container>
+        {:else}
+            <Body {width}>
+                <Translatable
+                    resourceKey={i18nKey(
+                        "There are no access gates defined for the community. You may still define access gates for individual channels within the community.",
+                    )}></Translatable>
+            </Body>
+        {/if}
+    </Container>
+    {#if evaluationDays !== undefined}
+        <Container direction={"vertical"} gap={"md"}>
+            <Container crossAxisAlignment={"center"} mainAxisAlignment={"spaceBetween"}>
+                <Body colour={"textSecondary"} fontWeight={"bold"}>
+                    <Translatable resourceKey={i18nKey("Gate evaluation interval")}></Translatable>
+                </Body>
+                <Body {width} colour={"secondary"} fontWeight={"bold"}>
+                    <Translatable resourceKey={i18nKey(`${evaluationDays} days`)}></Translatable>
+                </Body>
+            </Container>
+            <Body>
+                <Translatable
+                    resourceKey={i18nKey(
+                        `After ${evaluationDays} days, your members will be evaluated against your group’s access gates. Any members that do not satisfy the access gates will be demoted to lapsed members and will have to re-join.`,
+                    )}></Translatable>
+            </Body>
+        </Container>
+    {/if}
+</Container>
diff --git a/frontend/app/src/mobile/features/chats/core/AlertBoxModal.svelte b/frontend/app/src/mobile/features/chats/core/AlertBoxModal.svelte
new file mode 100644
index 0000000000..fcc6d0504d
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/AlertBoxModal.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+    import { ColourVars, Column, Sheet, StatusCard } from "component-lib";
+    import { type ResourceKey } from "@client";
+    import { _ } from "svelte-i18n";
+    import { interpolate } from "@src/i18n/i18n";
+    import Markdown from "@src/ui/Markdown.svelte";
+
+    interface Props {
+        title: ResourceKey;
+        warning: ResourceKey;
+        onClose: () => void;
+    }
+
+    let { onClose, title, warning }: Props = $props();
+</script>
+
+<Sheet onDismiss={onClose}>
+    <Column gap={"xl"} padding={"xl"}>
+        <StatusCard
+            background={ColourVars.background0}
+            mode="warning"
+            title={interpolate($_, title)}>
+            {#snippet body()}
+                <Markdown text={interpolate($_, warning)} />
+            {/snippet}
+        </StatusCard>
+    </Column>
+</Sheet>
diff --git a/frontend/app/src/mobile/features/chats/core/ChatMessage.svelte b/frontend/app/src/mobile/features/chats/core/ChatMessage.svelte
new file mode 100644
index 0000000000..dfb2b8f88e
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/ChatMessage.svelte
@@ -0,0 +1,872 @@
+<script lang="ts">
+    import { navigate } from "@src/utils/navigation";
+    import { confirmMessageDeletion } from "@src/stores/settings";
+    import { trackedEffect } from "@src/utils/effects.svelte";
+    import { keyboard } from "@src/stores/keyboard.svelte";
+    import { popHistoryStateWithAction, pushDummyHistoryState } from "@src/utils/history";
+    import type { ProfileLinkClickedEvent } from "@webcomponents/profileLink";
+    import {
+        Avatar,
+        Column,
+        Container,
+        MenuTrigger,
+        type PanDirection,
+        Sheet,
+    } from "component-lib";
+    import {
+        type ChatIdentifier,
+        chatListScopeStore,
+        type ChatType,
+        currentUserIdStore,
+        currentUserStore,
+        type EnhancedReplyContext,
+        localUpdates,
+        type Message,
+        type MessageReminderCreatedContent,
+        OpenChat,
+        publish,
+        routeForMessage,
+        screenWidth,
+        ScreenWidth,
+        selectedChatBlockedUsersStore,
+        type SelectedEmoji,
+        type SenderContext,
+        translationsStore,
+        unconfirmedReadByThem,
+        undeletingMessagesStore,
+        type UserSummary,
+    } from "@client";
+    import { getContext, onDestroy, onMount, tick } from "svelte";
+    import Reply from "svelte-material-icons/Reply.svelte";
+    import ShareOutline from "svelte-material-icons/ShareOutline.svelte";
+    import SquareEditOutline from "svelte-material-icons/SquareEditOutline.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { quickReactions } from "@src/stores/quickReactions";
+    import { scrollStatus } from "@src/stores/scroll.svelte";
+    import { now } from "@src/stores/time";
+    import { toastStore } from "@src/stores/toast";
+    import { canShareMessage } from "@src/utils/share";
+    import { removeQueryStringParam } from "@src/utils/urls";
+    import AreYouSure from "@src/mobile/shared/AreYouSure.svelte";
+    import BotMessageContext from "@src/mobile/features/bots/BotMessageContext.svelte";
+    import BotProfile, { type BotProfileProps } from "@src/mobile/features/bots/BotProfile.svelte";
+    import Checkbox from "./Checkbox.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import ChatMessageContent from "@src/mobile/features/chats/core/content/ChatMessageContent.svelte";
+    import ChatMessageMenu from "./ChatMessageMenu.svelte";
+    import ChatMessageOptions from "./ChatMessageOptions.svelte";
+    import EmojiPicker from "./EmojiPickerWrapper.svelte";
+    import IntersectionObserverComponent from "./IntersectionObserver.svelte";
+    import MessageBubble from "./MessageBubble.svelte";
+    import Reactions from "./Reactions.svelte";
+    import ThreadSummary from "./ThreadSummary.svelte";
+    import Tips from "./Tips.svelte";
+    import ReminderBuilder from "./ReminderBuilder.svelte";
+    import RepliesTo from "./RepliesTo.svelte";
+    import ReportMessage from "./ReportMessage.svelte";
+    import TipBuilder from "./TipBuilder.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        chatId: ChatIdentifier;
+        chatType: ChatType;
+        sender: UserSummary | undefined;
+        msg: Message;
+        me: boolean;
+        eventIndex: number;
+        timestamp: bigint;
+        expiresAt: number | undefined;
+        first: boolean;
+        last: boolean;
+        accepted: boolean;
+        confirmed: boolean;
+        failed: boolean;
+        readByMe: boolean;
+        observer?: IntersectionObserver;
+        focused: boolean;
+        readonly: boolean;
+        pinned: boolean;
+        canPin: boolean;
+        canBlockUsers: boolean;
+        canDelete: boolean;
+        canQuoteReply: boolean;
+        canReact: boolean;
+        publicGroup: boolean;
+        canStartThread: boolean;
+        senderTyping: boolean;
+        dateFormatter?: (date: Date) => string;
+        collapsed?: boolean;
+        threadRootMessage: Message | undefined;
+        senderContext: SenderContext | undefined;
+        onExpandMessage?: (() => void) | undefined;
+        // this is not to do with permission - some messages (namely thread root messages) will simply not support replying or editing inside a thread
+        supportsEdit: boolean;
+        supportsReply: boolean;
+        disablePan?: boolean;
+        onReplyTo?: (replyContext: EnhancedReplyContext) => void;
+        onEditMessage?: () => void;
+        onCollapseMessage?: () => void;
+        onRetrySend?: () => void;
+        onDeleteFailedMessage?: () => void;
+        onRemovePreview?: (url: string) => void;
+        onGoToMessageIndex?: (args: { index: number }) => void;
+    }
+
+    let {
+        chatId,
+        chatType,
+        sender,
+        msg,
+        me,
+        eventIndex,
+        timestamp,
+        expiresAt,
+        first,
+        last,
+        accepted,
+        confirmed,
+        failed,
+        readByMe,
+        observer,
+        focused,
+        readonly,
+        pinned,
+        canPin,
+        canBlockUsers,
+        canDelete,
+        canQuoteReply,
+        canReact,
+        publicGroup,
+        canStartThread,
+        senderTyping,
+        collapsed = false,
+        threadRootMessage,
+        senderContext,
+        onExpandMessage = undefined,
+        supportsEdit,
+        supportsReply,
+        disablePan = false,
+        onReplyTo,
+        onEditMessage,
+        onCollapseMessage,
+        onRetrySend,
+        onDeleteFailedMessage,
+        onRemovePreview,
+        onGoToMessageIndex,
+    }: Props = $props();
+
+    let msgElement: HTMLElement | undefined;
+    let msgBubbleElement: HTMLElement | undefined;
+
+    let multiUserChat = chatType === "group_chat" || chatType === "channel";
+    let showEmojiPicker = $state(false);
+    let debug = false;
+    let showRemindMe = $state(false);
+    let showReport = $state(false);
+    let tipping: string | undefined = $state(undefined);
+    let percentageExpired = $state(100);
+    let botProfile: BotProfileProps | undefined = $state(undefined);
+    let confirmedReadByThem = $derived(client.messageIsReadByThem(chatId, msg.messageIndex));
+    let readByThem = $derived(confirmedReadByThem || $unconfirmedReadByThem.has(msg.messageId));
+    let contentWidth = $state<number>();
+
+    trackedEffect("read-by-them", () => {
+        if (confirmedReadByThem && $unconfirmedReadByThem.has(msg.messageId)) {
+            unconfirmedReadByThem.delete(msg.messageId);
+        }
+    });
+
+    onMount(() => {
+        if (!readByMe) {
+            tick().then(() => {
+                if (observer !== undefined && msgElement !== undefined) {
+                    try {
+                        observer.observe(msgElement);
+                    } catch {}
+                }
+            });
+        }
+
+        if (expiresAt !== undefined) {
+            return now.subscribe((t) => {
+                const ttl = expiresAt ? expiresAt - Number(timestamp) : 0;
+                const age = t - Number(timestamp);
+                const expired = age > ttl;
+                percentageExpired = expired ? 100 : (age / ttl) * 100;
+                // if this message is the root of a thread, make sure that we close that thread when the message expires
+                if (percentageExpired >= 100 && msg.thread) {
+                    client.filterRightPanelHistory(
+                        (panel) => panel.kind !== "message_thread_panel",
+                    );
+                    navigate(removeQueryStringParam("open"));
+                }
+            });
+        }
+    });
+
+    onDestroy(() => {
+        if (msgElement) {
+            observer?.unobserve(msgElement);
+        }
+    });
+
+    function createReplyContext(): EnhancedReplyContext {
+        return {
+            kind: "rehydrated_reply_context",
+            senderId: msg.sender,
+            eventIndex: eventIndex,
+            content: msg.content,
+            sender,
+            messageId: msg.messageId,
+            messageIndex: msg.messageIndex,
+            edited: msg.edited,
+            isThreadRoot: msg.thread !== undefined,
+            sourceContext: messageContext,
+        };
+    }
+
+    function reply() {
+        if (canQuoteReply) {
+            onReplyTo?.(createReplyContext());
+        }
+    }
+
+    function replyPrivately() {
+        publish("replyPrivatelyTo", createReplyContext());
+    }
+
+    function cancelReminder(content: MessageReminderCreatedContent) {
+        client
+            .cancelMessageReminder(msg.messageId, { ...content, hidden: true })
+            .then((success) => {
+                if (success) {
+                    toastStore.showSuccessToast(i18nKey("reminders.cancelSuccess"));
+                } else {
+                    toastStore.showFailureToast(i18nKey("reminders.cancelFailure"));
+                }
+            });
+    }
+
+    function editMessage() {
+        if (canEdit) {
+            onEditMessage?.();
+        }
+    }
+
+    function tipMessage(ledger: string) {
+        tipping = ledger;
+    }
+
+    function selectReaction(selected: SelectedEmoji) {
+        if (selected.kind === "native") {
+            toggleReaction(false, selected.unicode);
+        } else {
+            toggleReaction(false, `@CE(${selected.code})`);
+        }
+    }
+
+    function selectQuickReaction(unicode: string) {
+        toggleReaction(true, unicode);
+    }
+
+    function toggleReaction(isQuickReaction: boolean, reaction: string) {
+        if (canReact) {
+            const kind = client.containsReaction($currentUserIdStore, reaction, msg.reactions)
+                ? "remove"
+                : "add";
+
+            client
+                .selectReaction(
+                    chatId,
+                    $currentUserIdStore,
+                    threadRootMessageIndex,
+                    msg.messageId,
+                    reaction,
+                    $currentUserStore.username,
+                    $currentUserStore.displayName,
+                    kind,
+                )
+                .then((success) => {
+                    if (success && kind === "add") {
+                        client.trackEvent("reacted_to_message");
+
+                        if (isQuickReaction) {
+                            // Note: Manually selected reactions do not increment
+                            // their fav counter by default, so we do it manually.
+                            // Also refresh loaded reactions.
+                            quickReactions.incrementFavourite(reaction);
+                        }
+
+                        quickReactions.reload();
+                    }
+                });
+        }
+        showEmojiPicker = false;
+        popHistoryStateWithAction("emoji_picker_action");
+    }
+
+
+    function openUserProfile(ev?: Event) {
+        if (sender?.kind === "bot") {
+            botProfile = {
+                botId: sender.userId,
+                chatId,
+                onClose: () => (botProfile = undefined),
+            };
+        } else {
+            ev?.target?.dispatchEvent(
+                new CustomEvent<ProfileLinkClickedEvent>("profile-clicked", {
+                    detail: {
+                        userId: msg.sender,
+                        chatButton: multiUserChat,
+                        inGlobalContext: false,
+                    },
+                    bubbles: true,
+                }),
+            );
+        }
+    }
+
+    function onRegisterVote(detail: { answerIndex: number; type: "register" | "delete" }) {
+        if (chatId.kind === "direct_chat") return;
+
+        client
+            .registerPollVote(
+                chatId,
+                threadRootMessageIndex,
+                msg.messageId,
+                msg.messageIndex,
+                detail.answerIndex,
+                detail.type,
+            )
+            .then((success) => {
+                if (!success) {
+                    toastStore.showFailureToast(i18nKey("poll.voteFailed"));
+                }
+            });
+    }
+
+    function reportMessage() {
+        showReport = true;
+    }
+
+    function remindMe() {
+        showRemindMe = true;
+    }
+
+    let inert = $derived(
+        msg.content.kind === "deleted_content" ||
+            msg.content.kind === "blocked_content" ||
+            collapsed,
+    );
+    let canTip = $derived(!me && confirmed && !inert && !failed);
+    let inThread = $derived(threadRootMessage !== undefined);
+    let scrollingId = $derived(
+        inThread ? "scrollable-list-thread-messages" : "scrollable-list-chat-messages",
+    );
+    let threadRootMessageIndex = $derived(
+        threadRootMessage?.messageId === msg.messageId
+            ? undefined
+            : threadRootMessage?.messageIndex,
+    );
+    let fill = $derived(client.fillMessage(msg));
+    let showAvatar = $derived(
+        chatType !== "direct_chat" && !me && $screenWidth !== ScreenWidth.ExtraExtraSmall,
+    );
+    let translated = $derived($translationsStore.has(msg.messageId));
+    let threadSummary = $derived(msg.thread);
+    let msgUrl = $derived(
+        `${routeForMessage($chatListScopeStore.kind, { chatId }, msg.messageIndex)}?open=true`,
+    );
+    let isProposal = $derived(msg.content.kind === "proposal_content");
+    let canEdit = $derived(
+        me && supportsEdit && !msg.deleted && client.contentTypeSupportsEdit(msg.content.kind),
+    );
+    let undeleting = $derived($undeletingMessagesStore.has(msg.messageId));
+    let deletedByMe = $derived(
+        msg.content.kind === "deleted_content" && msg.content.deletedBy == $currentUserIdStore,
+    );
+    let permanentlyDeleted = $derived(
+        deletedByMe &&
+            me &&
+            msg.content.kind === "deleted_content" &&
+            Number(msg.content.timestamp) < $now - 5 * 60 * 1000,
+    );
+    let canRevealDeleted = $derived(deletedByMe && !undeleting && !permanentlyDeleted);
+    let canRevealBlocked = $derived(msg.content.kind === "blocked_content");
+    let messageContext = $derived({ chatId, threadRootMessageIndex });
+    let ephemeral = $derived(localUpdates.isEphemeral(messageContext, msg.messageId));
+    let showChatMenu = $derived(
+        (!inert || canRevealDeleted || canRevealBlocked) && !readonly && !ephemeral,
+    );
+    let canUndelete = $derived(msg.deleted && msg.content.kind !== "deleted_content");
+    let tips = $derived(msg.tips ? Object.entries(msg.tips) : []);
+    let canBlockUser = $derived(canBlockUsers && !$selectedChatBlockedUsersStore.has(msg.sender));
+    let edited = $derived(
+        msg.edited && (senderContext?.kind !== "bot" || !senderContext.finalised),
+    );
+    let canShare = $derived(canShareMessage(msg.content));
+    let canForward = $derived(client.canForward(msg.content));
+    let canTranslate = $derived((client.getMessageText(msg.content) ?? "").length > 0);
+    let canDeleteMessage = $derived(
+        (canDelete || me) &&
+            !inert &&
+            !(msg.content.kind === "video_call_content" && msg.content.ended === undefined),
+    );
+    let showConfirmDelete = $state(false);
+
+    let longpressCooldown = $derived(scrollStatus.isCooldown);
+
+    async function deleteMessage(deletionConfirmed: boolean) {
+        if (failed) {
+            onDeleteFailedMessage?.();
+            return;
+        }
+        if (!canDeleteMessage) return;
+
+        if (!deletionConfirmed) {
+            showConfirmDelete = !showConfirmDelete;
+            return;
+        }
+
+        showConfirmDelete = false;
+        await client.deleteMessage(chatId, threadRootMessageIndex, msg.messageId);
+    }
+
+    let isSheetMenuOpen = $state(false);
+
+    function openSheetMenu() {
+        isSheetMenuOpen = true;
+    }
+
+    let panDirection = $state();
+    let panFactor = $state(0);
+
+    function forward() {
+        window.setTimeout(() => publish("forward", msg), 250);
+    }
+
+    function onPanCommit(direction: PanDirection) {
+        if (me && direction === "left") editMessage();
+        if (!me && direction === "left") forward();
+        else reply();
+    }
+
+    function onPanMove(direction: PanDirection, factor: number) {
+        panDirection = direction;
+        panFactor = factor;
+    }
+</script>
+
+{#if botProfile !== undefined}
+    <BotProfile {...botProfile} />
+{/if}
+
+{#if tipping !== undefined}
+    <TipBuilder ledger={tipping} onClose={() => (tipping = undefined)} {msg} {messageContext} />
+{/if}
+
+{#if showConfirmDelete}
+    <AreYouSure action={deleteMessage} dismiss={() => (showConfirmDelete = false)}>
+        <Container gap={"lg"} direction={"vertical"}>
+            <Translatable resourceKey={i18nKey("deleteMessageConfirm")}></Translatable>
+            <Checkbox
+                id="dont_show"
+                label={i18nKey("install.dontShow")}
+                checked={!$confirmMessageDeletion}
+                onChange={confirmMessageDeletion.toggle}>
+            </Checkbox>
+        </Container>
+    </AreYouSure>
+{/if}
+
+{#if showEmojiPicker && canReact}
+    <Sheet
+        onDismiss={() => {
+            showEmojiPicker = false;
+            popHistoryStateWithAction("emoji_picker_action");
+        }}>
+        <div
+            class="emoji_picker_wrapper"
+            style:padding-bottom={keyboard.visible ? `${keyboard.currentHeight - 64}px` : "0"}>
+            <Column height="fill" overflow="auto" minHeight={keyboard.visible ? "35vh" : "50vh"}>
+                <EmojiPicker
+                    onEmojiSelected={selectReaction}
+                    onSkintoneChanged={(tone) => quickReactions.reload(tone)}
+                    supportCustom={true}
+                    mode={"reaction"} />
+            </Column>
+        </div>
+    </Sheet>
+{/if}
+
+{#if isSheetMenuOpen}
+    <Sheet onDismiss={() => (isSheetMenuOpen = false)}>
+        <Column gap="sm" padding={["lg", "lg", "xxl", "lg"]} maxHeight="70vh">
+            <ChatMessageOptions
+                menuType="menu_items"
+                {chatId}
+                {isProposal}
+                {inert}
+                {publicGroup}
+                {confirmed}
+                {failed}
+                {canShare}
+                {me}
+                {canPin}
+                {canTip}
+                {pinned}
+                {supportsReply}
+                {canQuoteReply}
+                {canStartThread}
+                {multiUserChat}
+                {threadRootMessage}
+                {msg}
+                {canForward}
+                {canBlockUser}
+                {canEdit}
+                {canDelete}
+                {canUndelete}
+                {canRevealDeleted}
+                {canRevealBlocked}
+                translatable={canTranslate}
+                {translated}
+                {onCollapseMessage}
+                onReply={reply}
+                {onRetrySend}
+                onReplyPrivately={replyPrivately}
+                onEditMessage={editMessage}
+                onTipMessage={tipMessage}
+                onReportMessage={reportMessage}
+                onCancelReminder={cancelReminder}
+                onDeleteMessage={deleteMessage}
+                onRemindMe={remindMe}
+                {onDeleteFailedMessage}
+                onOptionSelected={() => (isSheetMenuOpen = false)} />
+        </Column>
+    </Sheet>
+{/if}
+
+{#if showRemindMe}
+    <ReminderBuilder
+        {chatId}
+        {eventIndex}
+        {threadRootMessageIndex}
+        onClose={() => (showRemindMe = false)} />
+{/if}
+
+{#if showReport}
+    <ReportMessage
+        {threadRootMessageIndex}
+        messageId={msg.messageId}
+        {chatId}
+        {canDelete}
+        onClose={() => (showReport = false)} />
+{/if}
+
+{#if debug}
+    <pre>Sender: {msg.sender}</pre>
+    <pre>EventIdx: {eventIndex}</pre>
+    <pre>MsgIdx: {msg.messageIndex}</pre>
+    <pre>MsgId: {msg.messageId}</pre>
+    <pre>Confirmed: {confirmed}</pre>
+    <pre>ReadByThem: {readByThem}</pre>
+    <pre>ReadByUs: {readByMe}</pre>
+    <pre>Pinned: {pinned}</pre>
+    <pre>edited: {msg.edited}</pre>
+    <pre>failed: {failed}</pre>
+    <pre>timestamp: {timestamp}</pre>
+    <pre>expiresAt: {expiresAt}</pre>
+    <pre>thread: {JSON.stringify(msg.thread, null, 4)}</pre>
+    <pre>senderContext: {JSON.stringify(senderContext, null, 4)}</pre>
+    <pre>inert: {inert}</pre>
+    <pre>canRevealDeleted: {canRevealDeleted}</pre>
+    <pre>canlRevealBlocked: {canRevealBlocked}</pre>
+    <pre>readonly: {readonly}</pre>
+    <pre>showChatMenu: {showChatMenu}</pre>
+    <pre>ephemeral: {ephemeral}</pre>
+{/if}
+
+{#if expiresAt === undefined || percentageExpired < 100}
+    <IntersectionObserverComponent>
+        {#snippet children(intersecting)}
+            <Container
+                data_index={failed ? "" : `${msg.messageIndex}`}
+                data_id={failed ? "" : `${msg.messageId}`}
+                id={failed ? "" : `event-${eventIndex}`}
+                bind:ref={msgElement}
+                padding={last ? ["zero", "zero", "sm", "zero"] : "zero"}
+                gap={"sm"}
+                overflow={"visible"}
+                mainAxisAlignment={me ? "end" : "start"}
+                pan={msg.deleted || disablePan || msg.content.kind === "proposal_content"
+                    ? undefined
+                    : {
+                          oncommit: onPanCommit,
+                          onmove: onPanMove,
+                          isScrolling: scrollStatus.isScrolling || scrollStatus.isCooldown,
+                      }}>
+                {#if showAvatar}
+                    <div class:first class="avatar">
+                        <Avatar
+                            onClick={openUserProfile}
+                            url={client.userAvatarUrl(sender)}
+                            size={"sm"}></Avatar>
+                    </div>
+                {/if}
+                {@const hasThread = threadSummary !== undefined && !inThread}
+                {@const hasReactions = msg.reactions.length > 0}
+                {@const hasTips = tips.length > 0}
+                <Container
+                    supplementalClass={"message_bubble_wrapper"}
+                    overflow={"visible"}
+                    crossAxisAlignment={me ? "end" : "start"}
+                    width={"hug"}
+                    maxWidth={chatId.kind === "direct_chat" ? "78vw" : "75vw"}
+                    gap={"xxs"}
+                    minWidth={"6rem"}
+                    direction={"vertical"}>
+                    {#if panDirection}
+                        <div
+                            class={`pan-action ${panDirection}`}
+                            class:active={panFactor >= 1}
+                            style:opacity={panFactor}>
+                            {#if me && canEdit && panDirection === "left"}
+                                <SquareEditOutline size="1.5rem" />
+                            {:else if !me && canShare && panDirection === "left"}
+                                <ShareOutline size="1.5rem" />
+                            {:else}
+                                <Reply size="1.5rem" />
+                            {/if}
+                        </div>
+                    {/if}
+                    <MenuTrigger
+                        constrainMask={scrollingId}
+                        maskUI
+                        disabled={!showChatMenu || !intersecting}
+                        mobileMode="longpress"
+                        longpressAnimation="scale"
+                        position="bottom"
+                        customContent={true}
+                        {longpressCooldown}>
+                        {#snippet menuItems()}
+                            {#if showChatMenu && intersecting}
+                                <ChatMessageMenu
+                                    menuType="icon_buttons"
+                                    {chatId}
+                                    {isProposal}
+                                    {inert}
+                                    {publicGroup}
+                                    {confirmed}
+                                    {failed}
+                                    {canShare}
+                                    deleted={msg.deleted}
+                                    {me}
+                                    {canReact}
+                                    {canPin}
+                                    {canTip}
+                                    {pinned}
+                                    {supportsReply}
+                                    {canQuoteReply}
+                                    {canStartThread}
+                                    {multiUserChat}
+                                    {threadRootMessage}
+                                    {msg}
+                                    {canForward}
+                                    {canBlockUser}
+                                    {canEdit}
+                                    {selectQuickReaction}
+                                    {canDelete}
+                                    {canUndelete}
+                                    {canRevealDeleted}
+                                    {canRevealBlocked}
+                                    translatable={canTranslate}
+                                    {translated}
+                                    {onCollapseMessage}
+                                    showEmojiPicker={() => {
+                                        showEmojiPicker = true;
+                                        pushDummyHistoryState("emoji_picker_action");
+                                    }}
+                                    onReply={reply}
+                                    {onRetrySend}
+                                    onReplyPrivately={replyPrivately}
+                                    onEditMessage={editMessage}
+                                    onTipMessage={tipMessage}
+                                    onReportMessage={reportMessage}
+                                    onCancelReminder={cancelReminder}
+                                    onDeleteMessage={deleteMessage}
+                                    onRemindMe={remindMe}
+                                    onOpenSheetMenu={openSheetMenu}
+                                    {onDeleteFailedMessage} />
+                            {/if}
+                        {/snippet}
+                        <MessageBubble
+                            {chatId}
+                            {focused}
+                            {senderTyping}
+                            {senderContext}
+                            {sender}
+                            bind:ref={msgBubbleElement}
+                            onOpenUserProfile={openUserProfile}
+                            {msg}
+                            {fill}
+                            {first}
+                            {last}
+                            {hasThread}
+                            time={Number(timestamp)}
+                            {pinned}
+                            {expiresAt}
+                            {percentageExpired}
+                            bot={sender?.kind === "bot"}
+                            {accepted}
+                            {failed}
+                            {undeleting}
+                            {readByThem}
+                            {readByMe}
+                            {onGoToMessageIndex}
+                            {chatType}>
+                            {#snippet repliesTo(reply)}
+                                <RepliesTo
+                                    {contentWidth}
+                                    {readonly}
+                                    {chatId}
+                                    {intersecting}
+                                    repliesTo={reply} />
+                            {/snippet}
+
+                            {#snippet messageContent(me)}
+                                <ChatMessageContent
+                                    bind:contentWidth
+                                    senderId={msg.sender}
+                                    {readonly}
+                                    {fill}
+                                    {me}
+                                    {messageContext}
+                                    {collapsed}
+                                    {undeleting}
+                                    {intersecting}
+                                    {failed}
+                                    {timestamp}
+                                    messageIndex={msg.messageIndex}
+                                    messageId={msg.messageId}
+                                    content={msg.content}
+                                    {edited}
+                                    blockLevelMarkdown={msg.blockLevelMarkdown}
+                                    {onRemovePreview}
+                                    {onRegisterVote}
+                                    {onExpandMessage}
+                                    ogPreviews={msg.ogPreviews}
+                                    messagePreviews={msg.messagePreviews} />
+                            {/snippet}
+                        </MessageBubble>
+                    </MenuTrigger>
+                    {#if hasThread}
+                        <ThreadSummary
+                            url={msgUrl}
+                            {threadSummary}
+                            {chatId}
+                            threadRootMessageIndex={msg.messageIndex}
+                            {me} />
+                    {/if}
+                    {#if hasReactions}
+                        <Reactions
+                            {me}
+                            onClick={({ reaction }) => toggleReaction(false, reaction)}
+                            {intersecting}
+                            reactions={msg.reactions}
+                            offset={!hasThread}></Reactions>
+                    {/if}
+                    {#if hasTips && !inert}
+                        <Tips
+                            {me}
+                            tips={msg.tips}
+                            onClick={tipMessage}
+                            {canTip}
+                            offset={!hasThread} />
+                    {/if}
+                </Container>
+            </Container>
+        {/snippet}
+    </IntersectionObserverComponent>
+    {#if senderContext?.kind === "bot" && senderContext.command !== undefined}
+        <div class="bot-context">
+            <BotMessageContext
+                botName={"cockpiss"}
+                botCommand={senderContext.command}
+                finalised={senderContext.finalised} />
+        </div>
+    {/if}
+{/if}
+
+<style lang="scss">
+    $avatar-width-mob: 2.5rem;
+
+    :global(.container.message_bubble_wrapper .menu-trigger) {
+        width: 100%;
+    }
+
+    .avatar:not(.first) {
+        visibility: hidden;
+    }
+
+    // TODO is this used at all?
+    .emoji-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: $sp3 $sp4;
+        background-color: var(--section-bg);
+    }
+
+    .bot-context {
+        display: flex;
+        margin-inline-start: $avatar-width-mob;
+        margin-bottom: $sp2;
+        margin-top: $sp2;
+    }
+
+    :global(.pan-action svg) {
+        transition: scale 200ms ease-out;
+    }
+
+    :global(.pan-action.active svg) {
+        scale: 1.25;
+    }
+
+    :global(.pan-action path) {
+        fill: var(--text-secondary);
+        transition: fill 200ms ease-out;
+    }
+
+    :global(.pan-action.active path) {
+        fill: var(--primary-light);
+    }
+
+    .pan-action {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 3rem;
+        height: 3rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &.right {
+            left: -4rem;
+        }
+
+        &.left {
+            right: -4rem;
+        }
+    }
+
+    .emoji_picker_wrapper {
+        flex: 1;
+        width: 100%;
+        display: flex;
+        overflow: hidden;
+        flex-direction: column;
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/home/ChatMessageMenu.svelte b/frontend/app/src/mobile/features/chats/core/ChatMessageMenu.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/ChatMessageMenu.svelte
rename to frontend/app/src/mobile/features/chats/core/ChatMessageMenu.svelte
diff --git a/frontend/app/src/components_mobile/home/ChatMessageOptions.svelte b/frontend/app/src/mobile/features/chats/core/ChatMessageOptions.svelte
similarity index 98%
rename from frontend/app/src/components_mobile/home/ChatMessageOptions.svelte
rename to frontend/app/src/mobile/features/chats/core/ChatMessageOptions.svelte
index 36a193c7b7..89a6091ce9 100644
--- a/frontend/app/src/components_mobile/home/ChatMessageOptions.svelte
+++ b/frontend/app/src/mobile/features/chats/core/ChatMessageOptions.svelte
@@ -19,7 +19,7 @@
         type MessageReminderCreatedContent,
         type OpenChat,
     } from "@client";
-    import { navigate } from "@utils/navigation";
+    import { navigate } from "@src/utils/navigation";
     import { getContext } from "svelte";
     import { _, locale } from "svelte-i18n";
     import CollapseIcon from "svelte-material-icons/ArrowCollapseUp.svelte";
@@ -46,15 +46,15 @@
     import TranslateIcon from "svelte-material-icons/Translate.svelte";
     import TranslateOff from "svelte-material-icons/TranslateOff.svelte";
     import VectorLink from "svelte-material-icons/VectorLink.svelte";
-    import { i18nKey, translationCodes } from "../../i18n/i18n";
-    import { now } from "../../stores/time";
-    import { toastStore } from "../../stores/toast";
-    import * as shareFunctions from "../../utils/share";
-    import { copyToClipboard } from "../../utils/urls";
-    import Bitcoin from "../icons/Bitcoin.svelte";
-    import Translatable from "../Translatable.svelte";
+    import { i18nKey, translationCodes } from "@src/i18n/i18n";
+    import { now } from "@src/stores/time";
+    import { toastStore } from "@src/stores/toast";
+    import * as shareFunctions from "@src/utils/share";
+    import { copyToClipboard } from "@src/utils/urls";
+    import Bitcoin from "@src/mobile/ui/icons/Bitcoin.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
     import { saveMediaToDevice } from "tauri-plugin-oc-api";
-    import { getProxyAdjustedBlobUrl } from "../../utils/media";
+    import { getProxyAdjustedBlobUrl } from "@src/utils/media";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/mobile/features/chats/core/ChatSubtext.svelte b/frontend/app/src/mobile/features/chats/core/ChatSubtext.svelte
new file mode 100644
index 0000000000..a20c0c5af3
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/ChatSubtext.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+    import { BodySmall, Container } from "component-lib";
+    import type { ChatSummary, OpenChat } from "@client";
+    import { allUsersStore } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { now } from "@src/stores/time";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import DisappearLabel from "./DisappearLabel.svelte";
+    import VisibilityLabel from "./VisibilityLabel.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        chat: ChatSummary;
+    }
+
+    let { chat }: Props = $props();
+
+    let userId = $derived(chat.kind === "direct_chat" ? chat.them.userId : "");
+    let isBot = $derived($allUsersStore.get(userId)?.kind === "bot");
+    let isSuspended = $derived($allUsersStore.get(userId)?.suspended ?? false);
+    let subtext = $derived(isSuspended ? $_("accountSuspended") : "");
+    let checkLastOnline = $derived(!isSuspended && !isBot && chat.kind === "direct_chat");
+
+    $effect(() => {
+        if (checkLastOnline && chat.kind === "direct_chat") {
+            client.getLastOnlineDate(chat.them.userId, $now).then((lastOnline) => {
+                if (lastOnline !== undefined && lastOnline !== 0) {
+                    [subtext] = client.formatLastOnlineDate($_, $now, lastOnline);
+                } else {
+                    subtext = "";
+                }
+            });
+        }
+    });
+</script>
+
+{#if chat.kind === "direct_chat"}
+    <Container gap={"sm"} crossAxisAlignment={"center"}>
+        {#if chat.eventsTTL !== undefined}
+            <DisappearLabel ttl={chat.eventsTTL} />
+        {/if}
+        {subtext}
+    </Container>
+{:else if chat.kind === "group_chat" || chat.kind === "channel"}
+    <Container gap={"xs"} crossAxisAlignment={"center"}>
+        <BodySmall width={"hug"} colour={"textSecondary"}>
+            <VisibilityLabel isPublic={chat.public} />
+        </BodySmall>
+        {#if chat.eventsTTL !== undefined}
+            <DisappearLabel ttl={chat.eventsTTL} />
+        {/if}
+        <BodySmall colour={"textSecondary"}>
+            <span class="num">{chat.memberCount.toLocaleString()}</span>
+            <span class="subject"><Translatable resourceKey={i18nKey("members")} /></span>
+        </BodySmall>
+    </Container>
+{/if}
+
+<style lang="scss">
+    .subject {
+        text-transform: lowercase;
+    }
+    .clickable {
+        cursor: pointer;
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/chats/core/Checkbox.svelte b/frontend/app/src/mobile/features/chats/core/Checkbox.svelte
new file mode 100644
index 0000000000..4bd53fb231
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/Checkbox.svelte
@@ -0,0 +1,196 @@
+<script lang="ts">
+    import { Body } from "component-lib";
+    import type { ResourceKey } from "@client";
+    import type { Snippet } from "svelte";
+    import { rtlStore } from "@src/stores/rtl";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    interface Props {
+        checked?: boolean;
+        disabled?: boolean;
+        waiting?: boolean;
+        id: string;
+        label: ResourceKey | undefined;
+        toggle?: boolean;
+        small?: boolean; // only applies to toggles
+        align?: "center" | "start";
+        children?: Snippet;
+        onChange?: () => void;
+    }
+
+    let {
+        checked = $bindable(false),
+        disabled = false,
+        waiting = false,
+        id,
+        label,
+        toggle = false,
+        small = false,
+        align = "center",
+        children,
+        onChange,
+    }: Props = $props();
+</script>
+
+<div
+    class="checkbox"
+    class:toggle
+    class:waiting
+    class:disabled
+    class:rtl={$rtlStore}
+    class:align-start={align === "start"}>
+    <input {id} type="checkbox" bind:checked {disabled} onchange={onChange} />
+    <label class:small for={id}>
+        {#if children}{@render children()}{:else if label !== undefined}
+            <Body ellipsisTruncate>
+                <Translatable resourceKey={label} />
+            </Body>
+        {/if}
+    </label>
+</div>
+
+<style lang="scss">
+    $size: 32px;
+    $size-small: 21px;
+
+    :root {
+        --color: var(--input-accent);
+    }
+
+    // todo - this will have rtl issues at the moment
+
+    input {
+        margin: 0;
+        margin-right: toRem(12);
+        width: 1.5em;
+        height: 1.5rem;
+        accent-color: var(--color);
+        appearance: none;
+        background-color: transparent;
+        margin: 0;
+        cursor: pointer;
+
+        font: inherit;
+        color: currentColor;
+        width: 1.15em;
+        height: 1.15em;
+        border: 1px solid currentColor;
+        transform: translateY(-0.075em);
+
+        display: grid;
+        place-content: center;
+    }
+
+    input[type="checkbox"]::before {
+        content: "";
+        width: 0.65em;
+        height: 0.65em;
+        transform: scale(0);
+        transition: 120ms transform ease-in-out;
+        box-shadow: inset 1em 1em var(--color);
+        transform-origin: bottom left;
+        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+    }
+
+    input[type="checkbox"]:checked::before {
+        transform: scale(1);
+    }
+
+    input[type="checkbox"]:disabled {
+        --color: var(--txt-light);
+        color: var(--txt-light);
+        cursor: not-allowed;
+    }
+
+    .checkbox {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        gap: $sp4;
+
+        &.align-start {
+            align-items: flex-start;
+
+            input {
+                margin-top: 3px;
+            }
+        }
+
+        &.rtl input {
+            margin-left: toRem(12);
+            margin-right: unset;
+        }
+    }
+
+    label {
+        flex: 1;
+        user-select: none;
+        cursor: pointer;
+    }
+
+    .toggle {
+        input {
+            display: none;
+        }
+
+        label {
+            transition: background-color 200ms ease-in-out;
+            cursor: pointer;
+            text-indent: -9999px;
+            width: 80px;
+            height: 36px;
+            background: var(--toggle-bg);
+            display: block;
+            border-radius: var(--toggle-rd-track);
+            position: relative;
+
+            &.small {
+                width: 50px;
+                height: 25px;
+            }
+        }
+
+        label:after {
+            content: "";
+            position: absolute;
+            top: 2px;
+            left: 2px;
+            width: $size !important;
+            height: $size;
+            background: #fff;
+            border-radius: var(--toggle-rd-thumb);
+            transition: 150ms ease-in-out;
+        }
+
+        label.small:after {
+            width: $size-small !important;
+            height: $size-small;
+        }
+
+        input:checked + label {
+            background-color: var(--input-accent);
+        }
+
+        input:checked + label:after {
+            left: calc(100% - 2px);
+            transform: translateX(-100%);
+        }
+
+        label:active:after {
+            width: 60px;
+        }
+    }
+
+    .toggle {
+        &.disabled {
+            label {
+                cursor: default;
+            }
+        }
+        &.waiting {
+            label {
+                cursor: wait;
+            }
+        }
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/chats/core/CryptoTransferBuilder.svelte b/frontend/app/src/mobile/features/chats/core/CryptoTransferBuilder.svelte
new file mode 100644
index 0000000000..2e15b4244b
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/CryptoTransferBuilder.svelte
@@ -0,0 +1,144 @@
+<script lang="ts">
+    import { Body, Column, CommonButton, Container, IconButton, Row, Sheet } from "component-lib";
+    import type { ChatSummary, UserSummary } from "@client";
+    import {
+        allUsersStore,
+        enhancedCryptoLookup as cryptoLookup,
+        currentUserIdStore,
+        localUpdates,
+    } from "@client";
+    import { type CryptocurrencyContent, type MessageContext, nowNanos } from "@shared";
+    import { onMount } from "svelte";
+    import Chat from "svelte-material-icons/ChatPlusOutline.svelte";
+    import Close from "svelte-material-icons/Close.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { pinNumberErrorMessageStore } from "@src/stores/pinNumber";
+    import ErrorMessage from "@src/mobile/shared/ErrorMessage.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import CryptoSelector from "@src/mobile/shared/CryptoSelector.svelte";
+    import SingleUserSelector from "@src/mobile/shared/SingleUserSelector.svelte";
+    import TokenInput from "@src/mobile/shared/TokenInput.svelte";
+    import TransferFeesMessage from "@src/mobile/shared/TransferFeesMessage.svelte";
+    import { TokenState } from "@src/mobile/features/wallet/walletState.svelte";
+
+    interface Props {
+        ledger: string;
+        chat: ChatSummary;
+        defaultReceiver: string | undefined;
+        messageContext: MessageContext;
+        onClose: () => void;
+    }
+
+    let { ledger = $bindable(), chat, defaultReceiver, messageContext, onClose }: Props = $props();
+
+    let error: string | undefined = $state(undefined);
+    let receiver: UserSummary | undefined = $state(undefined);
+    let validAmount: boolean = $state(false);
+    let tokenDetails = $derived($cryptoLookup.get(ledger)!);
+    let tokenState = $derived(new TokenState(tokenDetails, "usd"));
+    let multiUserChat = $derived(chat.kind === "group_chat" || chat.kind === "channel");
+    let valid = $derived(error === undefined && validAmount && receiver !== undefined);
+    let errorMessage = $derived(error !== undefined ? i18nKey(error) : $pinNumberErrorMessageStore);
+
+    onMount(() => {
+        // default the receiver to the other user in a direct chat
+        if (chat.kind === "direct_chat") {
+            receiver = $allUsersStore.get(chat.them.userId);
+        } else if (defaultReceiver !== undefined && defaultReceiver !== $currentUserIdStore) {
+            receiver = $allUsersStore.get(defaultReceiver);
+        }
+    });
+
+    function send() {
+        if (receiver === undefined) return;
+
+        const content: CryptocurrencyContent = {
+            kind: "crypto_content",
+            transfer: {
+                kind: "pending",
+                ledger,
+                token: tokenState.symbol,
+                recipient: receiver.userId,
+                amountE8s: tokenState.draftAmount,
+                feeE8s: tokenState.transferFees,
+                createdAtNanos: nowNanos(),
+            },
+        };
+
+        localUpdates.draftMessages.setAttachment(messageContext, content);
+
+        onClose();
+    }
+</script>
+
+<Sheet onDismiss={onClose}>
+    <Container gap={"xl"} padding={["sm", "xl", "huge"]} direction={"vertical"}>
+        <Row crossAxisAlignment="center" padding={["zero", "zero", "zero", "sm"]}>
+            <Body fontWeight={"bold"}>
+                <Translatable resourceKey={i18nKey("Send crypto")} />
+            </Body>
+            <IconButton onclick={onClose}>
+                {#snippet icon(color)}
+                    <Close {color} />
+                {/snippet}
+            </IconButton>
+        </Row>
+
+        <!-- TODO "fix" the double sheet! -->
+        <!-- Perhaps we just get the content of the crypto selector and replace current sheet (?) -->
+        <CryptoSelector
+            showRefresh
+            draftAmount={tokenState.draftAmount}
+            filter={(t) => t.balance > 0}
+            bind:ledger />
+
+        <Column gap={"md"}>
+            {#if multiUserChat}
+                <SingleUserSelector bind:selectedReceiver={receiver}>
+                    {#snippet subtext()}
+                        <Translatable resourceKey={i18nKey("Choose a token recipient")} />
+                    {/snippet}
+                </SingleUserSelector>
+            {/if}
+
+            <TokenInput
+                {ledger}
+                error={!validAmount}
+                balance={tokenState.cryptoBalance}
+                minAmount={tokenState.minAmount}
+                maxAmount={tokenState.maxAmount}
+                bind:valid={validAmount}
+                bind:amount={tokenState.draftAmount}>
+                {#snippet subtext()}
+                    {`Minimum amount ${tokenState.minAmountLabel} ${tokenState.symbol}`}
+                {/snippet}
+            </TokenInput>
+        </Column>
+
+        {#if errorMessage !== undefined}
+            <div class="error">
+                <ErrorMessage><Translatable resourceKey={errorMessage} /></ErrorMessage>
+            </div>
+        {/if}
+
+        <Container
+            mainAxisAlignment={"spaceBetween"}
+            crossAxisAlignment={"center"}
+            padding={["zero", "sm"]}>
+            <TransferFeesMessage
+                symbol={tokenState.symbol}
+                tokenDecimals={tokenState.decimals}
+                transferFees={tokenState.transferFees} />
+
+            <CommonButton
+                onClick={send}
+                disabled={!valid || !tokenState.draftAmount}
+                mode={"active"}>
+                {#snippet icon(color, size)}
+                    <Chat {color} {size} />
+                {/snippet}
+                <Translatable resourceKey={i18nKey("tokenTransfer.send")} />
+            </CommonButton>
+        </Container>
+    </Container>
+</Sheet>
diff --git a/frontend/app/src/mobile/features/chats/core/CurrentChat.svelte b/frontend/app/src/mobile/features/chats/core/CurrentChat.svelte
new file mode 100644
index 0000000000..72a17e3930
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/CurrentChat.svelte
@@ -0,0 +1,417 @@
+<script lang="ts">
+    import { trackedEffect } from "@src/utils/effects.svelte";
+    import { ColourVars, Container } from "component-lib";
+    import {
+        type AttachmentContent,
+        blockedUsersStore,
+        botState,
+        type ChatIdentifier,
+        chatIdentifiersEqual,
+        type ChatSummary,
+        currentUserIdStore,
+        currentUserStore,
+        type EnhancedReplyContext,
+        type EventWrapper,
+        type FilteredProposals,
+        lastCryptoSent,
+        LEDGER_CANISTER_ICP,
+        localUpdates,
+        type Mention,
+        type Message,
+        type MessageContent,
+        type MessageContext,
+        messageContextsEqual,
+        messagesRead,
+        type OpenChat,
+        publish,
+        type ReadonlySet,
+        selectedChatDraftMessageStore,
+        selectedChatPinnedMessagesStore,
+        selectedCommunitySummaryStore,
+        subscribe,
+        suspendedUserStore,
+        type User,
+    } from "@client";
+    import { getContext, onMount, tick } from "svelte";
+    import { releaseNotifications } from "tauri-plugin-oc-api";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { messageToForwardStore } from "@src/stores/messageToForward";
+    import { toastStore } from "@src/stores/toast";
+    import { randomSentence } from "@src/utils/randomMsg";
+    import AreYouSure from "@src/mobile/shared/AreYouSure.svelte";
+    import DirectChatHeader from "@src/mobile/features/bots/DirectChatHeader.svelte";
+    import CryptoTransferBuilder from "./CryptoTransferBuilder.svelte";
+    import CurrentChatHeader from "./CurrentChatHeader.svelte";
+    import CurrentChatMessages from "./CurrentChatMessages.svelte";
+    import CurrentChatSearchHeader from "./CurrentChatSearchHeader.svelte";
+    import ExternalContent from "@src/mobile/features/chats/core/content/ExternalContent.svelte";
+    import Footer from "./Footer.svelte";
+    import MemeBuilder from "./MemeBuilder.svelte";
+    import { keyboard } from "@src/stores/keyboard.svelte";
+
+    interface Props {
+        chat: ChatSummary;
+        filteredProposals: FilteredProposals | undefined;
+    }
+
+    let { chat, filteredProposals }: Props = $props();
+
+    let currentChatMessages = $state<CurrentChatMessages>();
+
+    const client = getContext<OpenChat>("client");
+
+    let previousChatId: ChatIdentifier | undefined = $state(undefined);
+    let unreadMessages = $state<number>(0);
+    let firstUnreadMention = $state<Mention | undefined>();
+    let creatingCryptoTransfer: { ledger: string; amount: bigint } | undefined = $state(undefined);
+    let buildingMeme = $state(false);
+    //@ts-ignore
+    let memeBuilder: MemeBuilder = $state();
+    let showSearchHeader = $state(false);
+    let searchTerm = $state("");
+    let removeLinkPreviewDetails: { event: EventWrapper<Message>; url: string } | undefined =
+        $state(undefined);
+
+    onMount(() => {
+        // Release any active notifications for the current chat when the component mounts
+        // TODO include thread index
+        if (client.isNativeAndroid()) {
+            switch (chat.id.kind) {
+                case "direct_chat":
+                    releaseNotifications({
+                        kind: "dms",
+                        senderId: chat.id.userId,
+                    });
+                    break;
+                case "group_chat":
+                    releaseNotifications({
+                        kind: "group",
+                        groupId: chat.id.groupId,
+                    });
+                    break;
+                case "channel":
+                    releaseNotifications({
+                        kind: "channel",
+                        communityId: chat.id.communityId,
+                        channelId: chat.id.channelId,
+                    });
+            }
+        }
+
+        const unsubs = [
+            messagesRead.subscribe(() => {
+                unreadMessages = getUnreadMessageCount(chat);
+                firstUnreadMention = client.getFirstUnreadMention(chat);
+            }),
+            subscribe("tokenTransfer", onTokenTransfer),
+            subscribe("createTestMessages", onCreateTestMessages),
+            subscribe("searchChat", onSearchChat),
+        ];
+        return () => {
+            unsubs.forEach((u) => u());
+        };
+    });
+
+    function onTokenTransfer(args: { context: MessageContext; ledger?: string; amount?: bigint }) {
+        if (messageContextsEqual(messageContext, args.context)) {
+            tokenTransfer(args);
+        }
+    }
+
+    function onCreateTestMessages([ctx, num]: [MessageContext, number]) {
+        if (messageContextsEqual(ctx, messageContext)) {
+            createTestMessages(num);
+        }
+    }
+
+    function getUnreadMessageCount(chat: ChatSummary): number {
+        if (client.isPreviewing(chat.id) || client.isLapsed(chat.id)) return 0;
+
+        return messagesRead.unreadMessageCount(chat.id, chat.latestMessage?.event.messageIndex);
+    }
+
+    function onWindowFocus() {
+        client.closeNotificationsForChat(chat.id);
+    }
+
+    function tokenTransfer(detail: { ledger?: string; amount?: bigint }) {
+        keyboard.enableViewportResize();
+        creatingCryptoTransfer = {
+            ledger: detail.ledger ?? $lastCryptoSent ?? LEDGER_CANISTER_ICP,
+            amount: detail.amount ?? BigInt(0),
+        };
+    }
+
+    function createPrizeMessage() {
+        publish("createPrize", messageContext);
+    }
+
+    function createP2PSwapMessage() {
+        publish("createSwap", {
+            fromLedger: $lastCryptoSent ?? LEDGER_CANISTER_ICP,
+            ctx: messageContext,
+        });
+    }
+
+    function onFileSelected(content: AttachmentContent) {
+        localUpdates.draftMessages.setAttachment({ chatId: chat.id }, content);
+    }
+
+    function makeMeme() {
+        keyboard.enableViewportResize();
+        buildingMeme = true;
+        if (memeBuilder !== undefined) {
+            memeBuilder.reset();
+        }
+    }
+
+    function replyTo(ctx: EnhancedReplyContext) {
+        showSearchHeader = false;
+        localUpdates.draftMessages.setReplyingTo({ chatId: chat.id }, ctx);
+    }
+
+    function searchChat(search: string) {
+        onSearchChat(search);
+    }
+
+    function onSearchChat(term: string) {
+        showSearchHeader = true;
+        searchTerm = term;
+    }
+
+    function createTestMessages(total: number): void {
+        function send(n: number) {
+            if (n === total) return;
+
+            sendMessageWithAttachment(randomSentence(), false, undefined);
+
+            window.setTimeout(() => send(n + 1), 500);
+        }
+
+        send(0);
+    }
+
+    function onSendMessage(detail: [string | undefined, User[], boolean]) {
+        if (!canSendAny) return;
+        let [text, mentioned, blockLevelMarkdown] = detail;
+        if ($selectedChatDraftMessageStore?.editingEvent !== undefined) {
+            client
+                .editMessageWithAttachment(
+                    messageContext,
+                    text,
+                    blockLevelMarkdown,
+                    $selectedChatDraftMessageStore.attachment,
+                    $selectedChatDraftMessageStore.editingEvent,
+                )
+                .then((success) => {
+                    if (!success) {
+                        toastStore.showFailureToast(i18nKey("errorEditingMessage"));
+                    }
+                });
+        } else {
+            sendMessageWithAttachment(
+                text,
+                blockLevelMarkdown,
+                $selectedChatDraftMessageStore?.attachment,
+                mentioned,
+            );
+        }
+    }
+
+    function sendMessageWithAttachment(
+        textContent: string | undefined,
+        blockLevelMarkdown: boolean,
+        attachment: AttachmentContent | undefined,
+        mentioned: User[] = [],
+    ) {
+        client.sendMessageWithAttachment(
+            messageContext,
+            textContent,
+            blockLevelMarkdown,
+            attachment,
+            mentioned,
+        );
+    }
+
+    function forwardMessage(msg: Message) {
+        client.forwardMessage(messageContext, msg);
+    }
+
+    function onSetTextContent(txt?: string): void {
+        localUpdates.draftMessages.setTextContent({ chatId: chat.id }, txt);
+    }
+
+    function onRemovePreview(event: EventWrapper<Message>, url: string): void {
+        removeLinkPreviewDetails = {
+            event,
+            url,
+        };
+    }
+
+    function removePreview(yes: boolean): Promise<void> {
+        if (removeLinkPreviewDetails !== undefined && yes) {
+            const { event, url } = removeLinkPreviewDetails;
+
+            client.hideLinkPreview(messageContext, event, url).then((success) => {
+                if (!success) {
+                    toastStore.showFailureToast(i18nKey("errorRemovingLinkPreview"));
+                }
+            });
+        }
+
+        removeLinkPreviewDetails = undefined;
+        return Promise.resolve();
+    }
+
+    function isBlocked(chatSummary: ChatSummary, blockedUsers: ReadonlySet<string>): boolean {
+        return chatSummary.kind === "direct_chat" && blockedUsers.has(chatSummary.them.userId);
+    }
+
+    function defaultCryptoTransferReceiver(): string | undefined {
+        return $selectedChatDraftMessageStore?.replyingTo?.sender?.userId;
+    }
+
+    function onSendMessageWithContent(content: MessageContent) {
+        client.sendMessageWithContent(messageContext, content, false);
+    }
+    let messageContext = $derived({ chatId: chat.id });
+
+    trackedEffect("current-chat", () => {
+        if (previousChatId === undefined || !chatIdentifiersEqual(chat.id, previousChatId)) {
+            previousChatId = chat.id;
+            showSearchHeader = false;
+            unreadMessages = getUnreadMessageCount(chat);
+            firstUnreadMention = client.getFirstUnreadMention(chat);
+            tick().then(() => {
+                if ($messageToForwardStore !== undefined) {
+                    forwardMessage($messageToForwardStore);
+                    messageToForwardStore.set(undefined);
+                }
+            });
+        }
+    });
+    let showFooter = $derived(!showSearchHeader && !$suspendedUserStore);
+    let blocked = $derived(isBlocked(chat, $blockedUsersStore));
+    let frozen = $derived(client.isChatOrCommunityFrozen(chat, $selectedCommunitySummaryStore));
+    let canSendAny = $derived(client.canSendMessage(chat.id, "message"));
+    let preview = $derived(client.isPreviewing(chat.id));
+    let lapsed = $derived(client.isLapsed(chat.id));
+    let canPin = $derived(client.canPinMessages(chat.id));
+    let canBlockUsers = $derived(client.canBlockUsers(chat.id));
+    let canDelete = $derived(client.canDeleteOtherUsersMessages(chat.id));
+    let canReplyInThread = $derived(client.canSendMessage(chat.id, "thread"));
+    let canReact = $derived(client.canReactToMessages(chat.id));
+    let canInvite = $derived(client.canInviteUsers(chat.id));
+    let readonly = $derived(client.isChatReadOnly(chat.id));
+    let externalUrl = $derived(chat.kind === "channel" ? chat.externalUrl : undefined);
+    let privateChatPreview = $derived(client.maskChatMessages(chat));
+    let bot = $derived(
+        chat.kind === "direct_chat" ? botState.externalBots.get(chat.them.userId) : undefined,
+    );
+
+    function onGoToMessageIndex(args: { index: number; preserveFocus: boolean }) {
+        currentChatMessages?.scrollToMessageIndex(args.index, args.preserveFocus);
+    }
+
+    function stopTyping() {
+        if (chat !== undefined) {
+            client.stopTyping(chat.id, $currentUserIdStore);
+        }
+    }
+
+    function startTyping() {
+        if (chat !== undefined) {
+            client.startTyping(chat.id, $currentUserIdStore);
+        }
+    }
+</script>
+
+<svelte:window onfocus={onWindowFocus} />
+
+{#if removeLinkPreviewDetails !== undefined}
+    <AreYouSure title={i18nKey("removePreviewQuestion")} action={removePreview} />
+{/if}
+
+{#if creatingCryptoTransfer !== undefined}
+    <CryptoTransferBuilder
+        {chat}
+        ledger={creatingCryptoTransfer.ledger}
+        defaultReceiver={defaultCryptoTransferReceiver()}
+        {messageContext}
+        onClose={() => {
+            keyboard.disableViewportResize();
+            creatingCryptoTransfer = undefined;
+        }} />
+{/if}
+
+<MemeBuilder onSend={onSendMessageWithContent} bind:this={memeBuilder} bind:open={buildingMeme} />
+
+<Container background={ColourVars.background0} height={"fill"} direction={"vertical"}>
+    {#if showSearchHeader}
+        <CurrentChatSearchHeader
+            {chat}
+            bind:searchTerm
+            {onGoToMessageIndex}
+            onClose={() => (showSearchHeader = false)} />
+    {:else if bot !== undefined && chat.kind === "direct_chat"}
+        <DirectChatHeader {bot} {chat} {onSearchChat}></DirectChatHeader>
+    {:else}
+        <CurrentChatHeader
+            onSearchChat={searchChat}
+            {blocked}
+            {readonly}
+            selectedChatSummary={chat}
+            hasPinned={$selectedChatPinnedMessagesStore.size > 0} />
+    {/if}
+    {#if externalUrl !== undefined}
+        <ExternalContent {privateChatPreview} {frozen} {externalUrl} />
+    {:else}
+        <CurrentChatMessages
+            bind:this={currentChatMessages}
+            onReplyTo={replyTo}
+            {onRemovePreview}
+            {privateChatPreview}
+            {chat}
+            {filteredProposals}
+            {canPin}
+            {canBlockUsers}
+            {canDelete}
+            {canReplyInThread}
+            {canSendAny}
+            {canReact}
+            {canInvite}
+            {readonly}
+            {firstUnreadMention}
+            footer={showFooter}
+            {unreadMessages} />
+    {/if}
+    {#if showFooter}
+        <Footer
+            {chat}
+            attachment={$selectedChatDraftMessageStore?.attachment}
+            editingEvent={$selectedChatDraftMessageStore?.editingEvent}
+            replyingTo={$selectedChatDraftMessageStore?.replyingTo}
+            textContent={$selectedChatDraftMessageStore?.textContent}
+            user={$currentUserStore}
+            mode={"message"}
+            {preview}
+            {lapsed}
+            {blocked}
+            {messageContext}
+            externalContent={externalUrl !== undefined}
+            onCancelReply={() =>
+                localUpdates.draftMessages.setReplyingTo({ chatId: chat.id }, undefined)}
+            onClearAttachment={() =>
+                localUpdates.draftMessages.setAttachment({ chatId: chat.id }, undefined)}
+            onCancelEdit={() => localUpdates.draftMessages.delete({ chatId: chat.id })}
+            {onSetTextContent}
+            onStartTyping={startTyping}
+            onStopTyping={stopTyping}
+            {onFileSelected}
+            {onSendMessage}
+            onMakeMeme={makeMeme}
+            onTokenTransfer={tokenTransfer}
+            onCreatePrizeMessage={createPrizeMessage}
+            onCreateP2PSwapMessage={createP2PSwapMessage} />
+    {/if}
+</Container>
diff --git a/frontend/app/src/mobile/features/chats/core/CurrentChatHeader.svelte b/frontend/app/src/mobile/features/chats/core/CurrentChatHeader.svelte
new file mode 100644
index 0000000000..40b8f8f505
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/CurrentChatHeader.svelte
@@ -0,0 +1,245 @@
+<script lang="ts">
+    import Typing from "@src/ui/Typing.svelte";
+    import { activeVideoCall } from "@src/stores/video";
+    import { navigate } from "@src/utils/navigation";
+    import type { ProfileLinkClickedEvent } from "@webcomponents/profileLink";
+    import { Avatar, Container, SectionHeader } from "component-lib";
+    import type { ChatSummary, DiamondMembershipStatus } from "@client";
+    import {
+        allUsersStore,
+        anonUserStore,
+        chatIdentifiersEqual,
+        chatListScopeStore,
+        publish,
+        restrictToSelectedChat,
+        routeForChatIdentifier,
+        selectedChatIdStore,
+        selectedCommunitySummaryStore,
+        byContext as typersByContext,
+        type OpenChat,
+        type TypersByKey,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import Video from "svelte-material-icons/VideoOutline.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { now } from "@src/stores/time";
+    import WithVerifiedBadge from "@src/mobile/ui/icons/WithVerifiedBadge.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import ChatSubtext from "./ChatSubtext.svelte";
+    import CurrentChatMenu from "./CurrentChatMenu.svelte";
+    import Badges from "@src/mobile/features/profile/Badges.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        selectedChatSummary: ChatSummary;
+        blocked: boolean;
+        readonly: boolean;
+        hasPinned: boolean;
+        onSearchChat: (search: string) => void;
+    }
+
+    let { selectedChatSummary, blocked, readonly, hasPinned, onSearchChat }: Props = $props();
+
+    let userId = $derived(
+        selectedChatSummary.kind === "direct_chat" ? selectedChatSummary.them.userId : "",
+    );
+    let isMultiUser = $derived(
+        selectedChatSummary.kind === "group_chat" || selectedChatSummary.kind === "channel",
+    );
+    let isBot = $derived($allUsersStore.get(userId)?.kind === "bot");
+    let hasUserProfile = $derived(!isMultiUser && !isBot);
+    let verified = $derived(
+        selectedChatSummary.kind === "group_chat" && selectedChatSummary.verified,
+    );
+    let canStartVideoCalls = $derived(
+        !blocked && client.canStartVideoCalls(selectedChatSummary.id),
+    );
+    let videoCallInProgress = $derived(selectedChatSummary.videoCallInProgress !== undefined);
+    let inCall = $derived(
+        $activeVideoCall !== undefined &&
+            videoCallInProgress &&
+            chatIdentifiersEqual($activeVideoCall.chatId, selectedChatSummary?.id),
+    );
+    let canStartOrJoinVideoCall = $derived(!inCall && (videoCallInProgress || canStartVideoCalls));
+    let isPublic = $derived(!client.isChatPrivate(selectedChatSummary));
+
+    function clearSelection() {
+        publish("clearSelection");
+    }
+
+    function showGroupDetails() {
+        if ($selectedChatIdStore !== undefined) {
+            if (selectedChatSummary.kind === "direct_chat") {
+                publish("directChatDetails", selectedChatSummary);
+                return;
+            } else {
+                publish("groupChatDetails", selectedChatSummary);
+                return;
+            }
+        }
+    }
+
+    function normaliseChatSummary(_now: number, chatSummary: ChatSummary, typing: TypersByKey) {
+        switch (chatSummary.kind) {
+            case "direct_chat":
+                const them = $allUsersStore.get(chatSummary.them.userId);
+                return {
+                    name: client.displayName(them),
+                    diamondStatus: them?.diamondStatus ?? "inactive",
+                    streak: them?.streak ?? 0,
+                    chitEarned: them?.totalChitEarned,
+                    avatarUrl: client.userAvatarUrl(them),
+                    userId: chatSummary.them.userId,
+                    typing: client.getTypingString(
+                        $_,
+                        $allUsersStore,
+                        { chatId: chatSummary.id },
+                        typing,
+                    ),
+                    username: them ? "@" + them.username : undefined,
+                    eventsTTL: chatSummary.eventsTTL,
+                    uniquePerson: them?.isUniquePerson ?? false,
+                };
+            default:
+                return {
+                    name: chatSummary.name,
+                    diamondStatus: "inactive" as DiamondMembershipStatus["kind"],
+                    streak: 0,
+                    chitEarned: undefined,
+                    avatarUrl: client.groupAvatarUrl(chatSummary, $selectedCommunitySummaryStore),
+                    userId: undefined,
+                    username: undefined,
+                    typing: client.getTypingString(
+                        $_,
+                        $allUsersStore,
+                        { chatId: chatSummary.id },
+                        typing,
+                    ),
+                    eventsTTL: chatSummary.eventsTTL,
+                    uniquePerson: false,
+                };
+        }
+    }
+
+    function openUserProfile(ev?: Event) {
+        if (hasUserProfile) {
+            ev?.target?.dispatchEvent(
+                new CustomEvent<ProfileLinkClickedEvent>("profile-clicked", {
+                    detail: {
+                        userId,
+                        chatButton: false,
+                        inGlobalContext: false,
+                    },
+                    bubbles: true,
+                }),
+            );
+        }
+    }
+
+    function startVideoCall() {
+        publish("startVideoCall", {
+            chatId: selectedChatSummary.id,
+            callType: isPublic ? "broadcast" : "default",
+            join: videoCallInProgress,
+        });
+    }
+
+    function navigateToCommunity(e: Event) {
+        if ($selectedCommunitySummaryStore !== undefined) {
+            navigate(`/community/${$selectedCommunitySummaryStore.id.communityId}`);
+            e.stopPropagation();
+        }
+    }
+
+    function navigateToChannel(e: Event) {
+        if ($selectedCommunitySummaryStore !== undefined) {
+            navigate(routeForChatIdentifier("community", selectedChatSummary.id));
+            e.stopPropagation();
+        }
+    }
+
+    let chat = $derived(normaliseChatSummary($now, selectedChatSummary, $typersByContext));
+</script>
+
+{#snippet menu()}
+    {#if !readonly && !$anonUserStore}
+        <CurrentChatMenu
+            {hasPinned}
+            {selectedChatSummary}
+            {blocked}
+            onShowGroupDetails={showGroupDetails}
+            {onSearchChat} />
+    {/if}
+{/snippet}
+
+{#snippet action(color: string)}
+    <Video {color} />
+{/snippet}
+
+<SectionHeader
+    onAction={canStartOrJoinVideoCall ? startVideoCall : undefined}
+    action={canStartOrJoinVideoCall ? action : undefined}
+    menu={!readonly && !$anonUserStore ? menu : undefined}
+    onBack={$restrictToSelectedChat ? undefined : clearSelection}>
+    {#snippet avatar()}
+        <Avatar onClick={openUserProfile} url={chat.avatarUrl} size={"lg"} name={chat.name} />
+    {/snippet}
+
+    {#snippet title()}
+        <Container onClick={showGroupDetails}>
+            {#if isMultiUser && !readonly}
+                <WithVerifiedBadge {verified}>
+                    <Container gap={"xs"}>
+                        {#if $selectedCommunitySummaryStore !== undefined && $chatListScopeStore.kind === "favourite"}
+                            <span onclick={navigateToCommunity} class="pointer">
+                                {$selectedCommunitySummaryStore.name}
+                            </span>
+                            <span>{">"}</span>
+                            <span onclick={navigateToChannel} class="pointer">
+                                {chat.name}
+                            </span>
+                        {:else}
+                            {chat.name}
+                        {/if}
+                    </Container>
+                </WithVerifiedBadge>
+            {:else if hasUserProfile}
+                <Container crossAxisAlignment={"center"} gap={"xxs"}>
+                    {chat.name ?? chat.username}
+                    <Badges
+                        uniquePerson={chat.uniquePerson}
+                        diamondStatus={chat.diamondStatus}
+                        streak={chat.streak}
+                        chitEarned={chat.chitEarned} />
+                </Container>
+            {:else}
+                {chat.name}
+            {/if}
+        </Container>
+    {/snippet}
+
+    {#snippet subtitle()}
+        <Container onClick={showGroupDetails}>
+            {#if blocked}
+                <Translatable resourceKey={i18nKey("blocked")} />
+            {:else if chat.typing !== undefined}
+                {chat.typing} <Typing />
+            {:else}
+                <ChatSubtext chat={selectedChatSummary} />
+            {/if}
+        </Container>
+    {/snippet}
+</SectionHeader>
+
+<style lang="scss">
+    .pointer {
+        cursor: pointer;
+    }
+
+    .username {
+        font-weight: 200;
+        color: var(--txt-light);
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/chats/core/CurrentChatMenu.svelte b/frontend/app/src/mobile/features/chats/core/CurrentChatMenu.svelte
new file mode 100644
index 0000000000..624efb9063
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/CurrentChatMenu.svelte
@@ -0,0 +1,285 @@
+<script lang="ts">
+    import { disableMakeProposalFeature } from "@src/utils/features";
+    import { MenuItem } from "component-lib";
+    import {
+        allUsersStore,
+        type ChatSummary,
+        currentUserIdStore,
+        directChatBotsStore,
+        favouritesStore,
+        isProposalGroupStore,
+        type MultiUserChat,
+        notificationsSupported,
+        type OpenChat,
+        platformModeratorStore,
+        publish,
+        selectedChatPinnedMessagesStore,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { canDeleteDirectChat, publishDeleteDirectChat } from "@src/utils/directChat";
+    import { toastStore } from "@src/stores/toast";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        selectedChatSummary: ChatSummary;
+        blocked: boolean;
+        hasPinned: boolean;
+        onShowGroupDetails: () => void;
+        onSearchChat: (search: string) => void;
+    }
+
+    let { selectedChatSummary, blocked, hasPinned, onShowGroupDetails, onSearchChat }: Props =
+        $props();
+
+    let botIdToUninstall = $derived(
+        selectedChatSummary.kind === "direct_chat" &&
+            $directChatBotsStore.has(selectedChatSummary.them.userId)
+            ? selectedChatSummary.them.userId
+            : undefined,
+    );
+    let governanceCanisterId = $derived(
+        selectedChatSummary.kind !== "direct_chat" &&
+            selectedChatSummary.subtype?.kind === "governance_proposals"
+            ? selectedChatSummary.subtype.governanceCanisterId
+            : undefined,
+    );
+    let canMakeProposals = $derived(
+        !disableMakeProposalFeature &&
+            (client.tryGetNervousSystem(governanceCanisterId)?.submittingProposalsEnabled ?? false),
+    );
+    // let canMakeProposals = $derived(true);
+    let userId = $derived(
+        selectedChatSummary.kind === "direct_chat" ? selectedChatSummary.them.userId : "",
+    );
+    let isBot = $derived($allUsersStore.get(userId)?.kind === "bot");
+    let isSuspended = $derived($allUsersStore.get(userId)?.suspended ?? false);
+    let showDeleteDirectChat = $derived(canDeleteDirectChat(selectedChatSummary));
+
+    function toggleMuteNotifications(
+        mute: boolean | undefined,
+        muteAtEveryone: boolean | undefined,
+    ) {
+        publish("toggleMuteNotifications", {
+            chatId: selectedChatSummary.id,
+            mute,
+            muteAtEveryone,
+        });
+    }
+
+    function addToFavourites() {
+        client.addToFavourites(selectedChatSummary.id);
+    }
+
+    function removeFromFavourites() {
+        client.removeFromFavourites(selectedChatSummary.id);
+    }
+
+    function copyUrl() {
+        publish("copyUrl");
+    }
+
+    function showGroupDetails() {
+        onShowGroupDetails();
+    }
+
+    function showPinned(chat: MultiUserChat) {
+        publish("showPinned", { chat, pinned: $selectedChatPinnedMessagesStore });
+    }
+
+    function searchChat() {
+        onSearchChat("");
+    }
+
+    function showProposalFilters() {
+        publish("showProposalFilters");
+    }
+
+    function blockUser() {
+        if (selectedChatSummary.kind === "direct_chat") {
+            client.blockUserFromDirectChat(selectedChatSummary.them.userId).then((success) => {
+                if (success) {
+                    toastStore.showSuccessToast(i18nKey("blockUserSucceeded"));
+                } else {
+                    toastStore.showFailureToast(i18nKey("blockUserFailed"));
+                }
+            });
+        }
+    }
+
+    function unblockUser() {
+        if (selectedChatSummary.kind === "direct_chat") {
+            client.unblockUserFromDirectChat(selectedChatSummary.them.userId).then((success) => {
+                if (success) {
+                    toastStore.showSuccessToast(i18nKey("unblockUserSucceeded"));
+                } else {
+                    toastStore.showFailureToast(i18nKey("unblockUserFailed"));
+                }
+            });
+        }
+    }
+
+    function leaveGroup() {
+        if (selectedChatSummary.kind === "direct_chat") return;
+        publish("leaveGroup", {
+            kind: "leave",
+            chatId: selectedChatSummary.id,
+            level: selectedChatSummary.level,
+        });
+    }
+
+    function freezeGroup() {
+        if (selectedChatSummary.id.kind === "group_chat") {
+            client.freezeGroup(selectedChatSummary.id, undefined).then((success) => {
+                if (!success) {
+                    toastStore.showFailureToast(i18nKey("failedToFreezeGroup"));
+                }
+            });
+        }
+    }
+
+    function unfreezeGroup() {
+        if (selectedChatSummary.id.kind === "group_chat") {
+            client.unfreezeGroup(selectedChatSummary.id).then((success) => {
+                if (!success) {
+                    toastStore.showFailureToast(i18nKey("failedToUnfreezeGroup"));
+                }
+            });
+        }
+    }
+
+    function onSuspendUser() {
+        publish("suspendUser", userId);
+    }
+
+    function unsuspendUser() {
+        client.unsuspendUser(userId).then((success) => {
+            if (success) {
+                toastStore.showSuccessToast(i18nKey("unsuspendedUser"));
+            } else {
+                toastStore.showFailureToast(i18nKey("failedToUnsuspendUser"));
+            }
+        });
+    }
+
+    function makeProposal() {
+        publish("makeProposal");
+    }
+
+    function removeBot(botId: string) {
+        client
+            .uninstallBot({ kind: "direct_chat", userId: $currentUserIdStore }, botId)
+            .then((success) => {
+                if (!success) {
+                    toastStore.showFailureToast(i18nKey("bots.manage.removeFailed"));
+                }
+            });
+    }
+
+</script>
+
+<MenuItem onclick={searchChat}>
+    <Translatable resourceKey={i18nKey("searchChat")} />
+</MenuItem>
+{#if !$favouritesStore.has(selectedChatSummary.id)}
+    <MenuItem onclick={addToFavourites}>
+        <Translatable resourceKey={i18nKey("communities.addToFavourites")} />
+    </MenuItem>
+{:else}
+    <MenuItem onclick={removeFromFavourites}>
+        <Translatable resourceKey={i18nKey("communities.removeFromFavourites")} />
+    </MenuItem>
+{/if}
+<MenuItem onclick={copyUrl}>
+    <Translatable resourceKey={i18nKey("copyUrl")} />
+</MenuItem>
+{#if selectedChatSummary.kind === "direct_chat"}
+    <MenuItem onclick={showGroupDetails}>
+        <Translatable resourceKey={i18nKey("chatDetails")} />
+    </MenuItem>
+{/if}
+{#if $isProposalGroupStore}
+    <MenuItem onclick={showProposalFilters}>
+        <Translatable resourceKey={i18nKey("proposal.filter")} />
+    </MenuItem>
+{/if}
+{#if selectedChatSummary.kind === "group_chat" || selectedChatSummary.kind === "channel"}
+    {#if hasPinned}
+        <MenuItem onclick={() => showPinned(selectedChatSummary)}>
+            <Translatable resourceKey={i18nKey("showPinned")} />
+        </MenuItem>
+    {/if}
+    <MenuItem onclick={showGroupDetails}>
+        <Translatable resourceKey={i18nKey("groupDetails", undefined, selectedChatSummary.level)} />
+    </MenuItem>
+
+    {#if canMakeProposals}
+        <MenuItem onclick={makeProposal}>
+            <Translatable resourceKey={i18nKey("proposal.makeProposal")} />
+        </MenuItem>
+    {/if}
+
+    {#if $platformModeratorStore && selectedChatSummary.kind === "group_chat"}
+        {#if client.isChatFrozen(selectedChatSummary.id)}
+            <MenuItem danger onclick={unfreezeGroup}>
+                <Translatable resourceKey={i18nKey("unfreezeGroup")} />
+            </MenuItem>
+        {:else}
+            <MenuItem danger onclick={freezeGroup}>
+                <Translatable resourceKey={i18nKey("freezeGroup")} />
+            </MenuItem>
+        {/if}
+    {/if}
+
+    {#if client.canLeaveGroup(selectedChatSummary.id)}
+        <MenuItem danger onclick={leaveGroup}>
+            <Translatable
+                resourceKey={i18nKey("leaveGroup", undefined, selectedChatSummary.level, true)} />
+        </MenuItem>
+    {/if}
+{/if}
+{#if selectedChatSummary.kind === "direct_chat" && !isBot}
+    {#if notificationsSupported}
+        {#if selectedChatSummary.membership.notificationsMuted === true}
+            <MenuItem onclick={() => toggleMuteNotifications(false, undefined)}>
+                <Translatable resourceKey={i18nKey("unmuteNotifications")} />
+            </MenuItem>
+        {:else}
+            <MenuItem onclick={() => toggleMuteNotifications(true, undefined)}>
+                <Translatable resourceKey={i18nKey("muteNotifications")} />
+            </MenuItem>
+        {/if}
+    {/if}
+    {#if blocked}
+        <MenuItem onclick={unblockUser}>
+            <Translatable resourceKey={i18nKey("unblockUser")} />
+        </MenuItem>
+    {:else}
+        <MenuItem onclick={blockUser}>
+            <Translatable resourceKey={i18nKey("blockUser")} />
+        </MenuItem>
+    {/if}
+    {#if $platformModeratorStore}
+        {#if isSuspended}
+            <MenuItem onclick={unsuspendUser}>
+                <Translatable resourceKey={i18nKey("unsuspendUser")} />
+            </MenuItem>
+        {:else}
+            <MenuItem onclick={onSuspendUser}>
+                <Translatable resourceKey={i18nKey("suspendUser")} />
+            </MenuItem>
+        {/if}
+    {/if}
+{/if}
+{#if botIdToUninstall !== undefined}
+    <MenuItem onclick={() => removeBot(botIdToUninstall)}>
+        <Translatable resourceKey={i18nKey("bots.manage.remove")} />
+    </MenuItem>
+{/if}
+{#if showDeleteDirectChat}
+    <MenuItem danger onclick={() => publishDeleteDirectChat(selectedChatSummary)}>
+        <Translatable resourceKey={i18nKey("deleteChat")} />
+    </MenuItem>
+{/if}
diff --git a/frontend/app/src/mobile/features/chats/core/CurrentChatMessages.svelte b/frontend/app/src/mobile/features/chats/core/CurrentChatMessages.svelte
new file mode 100644
index 0000000000..892b23cf71
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/CurrentChatMessages.svelte
@@ -0,0 +1,421 @@
+<script lang="ts">
+    import { trackedEffect } from "@src/utils/effects.svelte";
+    import {
+        type ChatEvent as ChatEventType,
+        type ChatIdentifier,
+        type ChatSummary,
+        type EnhancedReplyContext,
+        type EventWrapper,
+        type Mention,
+        type Message,
+        type OpenChat,
+        type ReadonlySet,
+        allUsersStore,
+        chatIdentifiersEqual,
+        chatListScopeStore,
+        chatsInitialisedStore,
+        currentUserIdStore,
+        eventsStore,
+        failedMessagesStore,
+        FilteredProposals,
+        localUpdates,
+        messageIndexStore,
+        messagesRead,
+        ROLE_NONE,
+        routeForChatIdentifier,
+        selectedChatDraftMessageStore,
+        selectedChatExpandedDeletedMessageStore,
+        selectedChatIdStore,
+        selectedChatPinnedMessagesStore,
+        selectedCommunitySummaryStore,
+        showMiddle,
+        stripSuspendedGate,
+        subscribe,
+        threadOpenStore,
+        unconfirmedStore,
+        type ImageContent,
+        type MemeFighterContent,
+        type VideoContent,
+        chatIdentifierToString,
+    } from "@client";
+    import { navigate } from "@src/utils/navigation";
+    import { getContext, untrack, setContext, onMount } from "svelte";
+    import Witch from "@src/ui/Witch.svelte";
+    import {
+        chatStartItem,
+        flattenTimeline,
+        type FlatChatItem,
+    } from "@src/ui/flatChatItems";
+    import ChatEvent from "@src/mobile/features/chats/core/events/ChatEvent.svelte";
+    import ChatEventList from "@src/mobile/features/chats/core/events/ChatEventList.svelte";
+    import InitialChatMessage from "./InitialChatMessage.svelte";
+    import PrivatePreview from "./PrivatePreview.svelte";
+    import TimelineDate from "./TimelineDate.svelte";
+    import ZoomedImage from "./ZoomedImage.svelte";
+    import ZoomedVideo from "./ZoomedVideo.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        chat: ChatSummary;
+        unreadMessages: number;
+        readonly: boolean;
+        firstUnreadMention: Mention | undefined;
+        canPin: boolean;
+        canBlockUsers: boolean;
+        canDelete: boolean;
+        canSendAny: boolean;
+        canReact: boolean;
+        canInvite: boolean;
+        footer: boolean;
+        canReplyInThread: boolean;
+        filteredProposals: FilteredProposals | undefined;
+        privateChatPreview: boolean;
+        onRemovePreview: (event: EventWrapper<Message>, url: string) => void;
+        onReplyTo: (ctx: EnhancedReplyContext) => void;
+    }
+
+    let {
+        chat,
+        unreadMessages,
+        readonly,
+        firstUnreadMention,
+        canPin,
+        canBlockUsers,
+        canDelete,
+        canSendAny,
+        canReact,
+        canInvite,
+        footer,
+        canReplyInThread,
+        filteredProposals,
+        privateChatPreview,
+        onRemovePreview,
+        onReplyTo,
+    }: Props = $props();
+
+    // treat this as if it might be null so we don't get errors when it's unmounted
+    let chatEventList: ChatEventList | undefined = $state();
+    let messagesDiv: HTMLDivElement | undefined = $state();
+    let messagesDivHeight: number = $state(0);
+    let initialised = $state(false);
+    let currentChatId: ChatIdentifier | undefined = $state();
+    let imageContent: ImageContent | MemeFighterContent | undefined = $state();
+    let videoContent: VideoContent | undefined = $state();
+
+    onMount(() => {
+        const unsubs = [
+            subscribe("focusImage", (data) => {
+                if (data !== imageContent) {
+                    imageContent = data;
+                    videoContent = undefined;
+                }
+            }),
+            subscribe("playVideo", (data) => {
+                if (data !== videoContent) {
+                    imageContent = undefined;
+                    videoContent = data;
+                }
+            }),
+        ];
+
+        return () => {
+            unsubs.forEach((u) => u());
+        };
+    });
+
+    // Allows child nodes, like IntersectionObserver to access the root scrollable node to allow rootMargin to be used.
+    let scrollState = $state<{ node: HTMLElement | undefined }>({ node: undefined });
+    setContext("scrollable-messages-div", scrollState);
+    $effect(() => {
+        if (messagesDiv) {
+            scrollState.node = messagesDiv;
+        }
+    });
+
+    function onGoToMessageIndex(detail: { index: number }) {
+        doGoToMessageIndex(detail.index);
+    }
+
+    function doGoToMessageIndex(index: number): void {
+        navigate(routeForChatIdentifier($chatListScopeStore.kind, chat.id));
+        chatEventList?.scrollToMessageIndex(messageContext, index, false);
+    }
+
+    export function scrollToMessageIndex(index: number, preserveFocus: boolean) {
+        chatEventList?.scrollToMessageIndex(messageContext, index, preserveFocus);
+    }
+
+    function replyTo(replyContext: EnhancedReplyContext) {
+        if (!canSendAny) return;
+        onReplyTo(replyContext);
+    }
+
+    function onEditEvent(ev: EventWrapper<Message>) {
+        localUpdates.draftMessages.setEditing({ chatId: chat.id }, ev, $allUsersStore);
+    }
+
+    export function externalGoToMessage(messageIndex: number): void {
+        chatEventList?.onMessageWindowLoaded({
+            context: messageContext,
+            messageIndex,
+            initialLoad: false,
+        });
+    }
+
+    function isMe(evt: EventWrapper<ChatEventType>): boolean {
+        if (evt.event.kind === "message") {
+            return evt.event.sender === $currentUserIdStore;
+        }
+        if (evt.event.kind === "group_chat_created") {
+            return evt.event.created_by === $currentUserIdStore;
+        }
+        return false;
+    }
+
+    function isPinned(store: ReadonlySet<number>, evt: EventWrapper<ChatEventType>): boolean {
+        if (evt.event.kind === "message") {
+            return store.has(evt.event.messageIndex);
+        }
+
+        return false;
+    }
+
+    function isCollapsed(
+        ew: EventWrapper<ChatEventType>,
+        filteredProposals: FilteredProposals | undefined,
+    ): boolean {
+        return ew.event.kind === "message" && isCollpasedProposal(ew.event, filteredProposals);
+    }
+
+    function toggleMessageExpansion(ew: EventWrapper<ChatEventType>, expand: boolean) {
+        if (ew.event.kind === "message" && ew.event.content.kind === "proposal_content") {
+            client.toggleProposalFilterMessageExpansion(ew.event.messageId, expand);
+        }
+    }
+
+    function groupInner(filteredProposals: FilteredProposals | undefined) {
+        return (events: EventWrapper<ChatEventType>[]) => {
+            return client.groupWhile((a, b) => inSameGroup(a, b, filteredProposals), events);
+        };
+    }
+
+    // Each expanded proposal should be in a group by itself
+    // All collapsed proposals should be grouped together
+    // Otherwise group by sender
+    function inSameGroup(
+        a: EventWrapper<ChatEventType>,
+        b: EventWrapper<ChatEventType>,
+        filteredProposals: FilteredProposals | undefined,
+    ): boolean {
+        if (a.event.kind === "message" && b.event.kind === "message") {
+            const aKind = a.event.content.kind;
+            const bKind = b.event.content.kind;
+            if (aKind === "proposal_content" || bKind === "proposal_content") {
+                return (
+                    isCollpasedProposal(a.event, filteredProposals) &&
+                    isCollpasedProposal(b.event, filteredProposals)
+                );
+            } else {
+                return client.sameUser(a, b);
+            }
+        }
+        return false;
+    }
+
+    function isCollpasedProposal(
+        message: Message,
+        filteredProposals: FilteredProposals | undefined,
+    ): boolean {
+        if (message.content.kind !== "proposal_content") return false;
+        return filteredProposals?.isCollapsed(message.messageId, message.content.proposal) ?? false;
+    }
+
+    function shouldShowAvatar(
+        chat: ChatSummary,
+        earliestLoadedEventIndex: number | undefined,
+    ): boolean {
+        // If this is an empty chat, show the avatar
+        if (isEmptyChat) {
+            return true;
+        }
+        // Otherwise, only show the avatar if we have loaded right back to the earliest available events
+        if (earliestLoadedEventIndex === undefined) {
+            return false;
+        }
+        // For new direct chats the first event is the 'DirectChatCreated' event which we only load a short while after
+        // sending the first message, so to prevent a short flicker with no avatar, we still show the avatar if the
+        // earliest loaded event index is 1, even though event 0 is available
+        const indexRequired = Math.max(client.earliestAvailableEventIndex(chat), 1);
+        return earliestLoadedEventIndex <= indexRequired;
+    }
+    let privateCommunityPreview = $derived(
+        $selectedCommunitySummaryStore !== undefined &&
+            ($selectedCommunitySummaryStore.membership.role === ROLE_NONE ||
+                $selectedCommunitySummaryStore.membership.lapsed) &&
+            (!$selectedCommunitySummaryStore.public ||
+                stripSuspendedGate($selectedCommunitySummaryStore.gateConfig.gate).kind !==
+                    "no_gate"),
+    );
+    let privatePreview = $derived(privateCommunityPreview || privateChatPreview);
+    let isEmptyChat = $derived(chat.latestEventIndex <= 0 || privatePreview);
+
+    trackedEffect("current-chat-messages", () => {
+        if (currentChatId === undefined || !chatIdentifiersEqual(chat.id, currentChatId)) {
+            currentChatId = chat.id;
+            initialised = false;
+
+            // If the chat is empty, there is nothing to initialise, so we can set initialised to true
+            if (isEmptyChat) {
+                initialised = true;
+            }
+        }
+    });
+    let showAvatar = $derived(initialised && shouldShowAvatar(chat, $eventsStore[0]?.index));
+    let messageContext = $derived({ chatId: chat?.id, threadRootMessageIndex: undefined });
+    let timeline = $derived(
+        client.groupEvents(
+            [...$eventsStore].reverse(),
+            $currentUserIdStore,
+            chat.kind === "channel" && chat.public,
+            $selectedChatExpandedDeletedMessageStore,
+            groupInner(filteredProposals),
+        ),
+    );
+    let items = $derived.by<FlatChatItem[]>(() => {
+        const flat: FlatChatItem[] = flattenTimeline(timeline);
+        if (showAvatar) {
+            // rendered at the oldest end of the list (the visual top)
+            flat.push(chatStartItem(chatIdentifierToString(chat.id)));
+        }
+        return flat;
+    });
+
+    // Scroll to the route's message index when it changes — and also on the
+    // effect's FIRST run: panels/modal pages can unmount the chat view, so a
+    // pinned-message tap navigates while the old instance is being destroyed
+    // (where it is silently swallowed) and the remounted instance must pick
+    // the navigation up from the route. Only when the thread is not open.
+    let previousChatId: ChatIdentifier | undefined = undefined;
+    let previousMessageIndex: number | undefined = undefined;
+    $effect(() => {
+        const idx = $messageIndexStore;
+        const sameChat = chatIdentifiersEqual($selectedChatIdStore, previousChatId);
+        if (
+            !$threadOpenStore &&
+            $chatsInitialisedStore &&
+            idx !== undefined &&
+            (!sameChat || idx !== previousMessageIndex)
+        ) {
+            untrack(() => {
+                scrollToMessageIndex(idx, false);
+            });
+        }
+        previousChatId = $selectedChatIdStore;
+        previousMessageIndex = idx;
+    });
+</script>
+
+<Witch />
+
+<div class="chat_messages_wrapper">
+    {#if privatePreview}
+        <div class="private-preview">
+            <PrivatePreview />
+            {#if showAvatar}
+                <InitialChatMessage {chat} />
+            {/if}
+        </div>
+    {:else}
+        <ChatEventList
+            bind:this={chatEventList}
+            rootSelector={"chat-messages"}
+            threadRootEvent={undefined}
+            maintainScroll
+            visible={$showMiddle}
+            {readonly}
+            {unreadMessages}
+            {firstUnreadMention}
+            {footer}
+            {items}
+            {chat}
+            bind:initialised
+            bind:messagesDiv
+            bind:messagesDivHeight>
+            {#snippet row(
+                item,
+                { isAccepted, isConfirmed, isFailed, isReadByMe, messageObserver, focusIndex },
+            )}
+                {#if item.kind === "timeline_date"}
+                    <TimelineDate timestamp={item.timestamp} />
+                {:else if item.kind === "chat_start"}
+                    <InitialChatMessage {chat} />
+                {:else}
+                    {@const evt = item.event}
+                    <ChatEvent
+                        observer={messageObserver}
+                        focused={evt.event.kind === "message" &&
+                            evt.event.messageIndex === focusIndex &&
+                            !isFailed($failedMessagesStore, evt)}
+                        accepted={isAccepted($unconfirmedStore, evt)}
+                        confirmed={isConfirmed($unconfirmedStore, evt)}
+                        failed={isFailed($failedMessagesStore, evt)}
+                        readByMe={isReadByMe($messagesRead, evt)}
+                        chatId={chat.id}
+                        chatType={chat.kind}
+                        me={isMe(evt)}
+                        first={item.first}
+                        last={item.last}
+                        {readonly}
+                        {canPin}
+                        {canBlockUsers}
+                        {canDelete}
+                        {canSendAny}
+                        {canReact}
+                        {canInvite}
+                        {canReplyInThread}
+                        collapsed={isCollapsed(evt, filteredProposals)}
+                        supportsEdit
+                        supportsReply
+                        threadRootMessage={undefined}
+                        publicGroup={(chat.kind === "group_chat" || chat.kind === "channel") &&
+                            chat.public}
+                        pinned={isPinned($selectedChatPinnedMessagesStore, evt)}
+                        editing={$selectedChatDraftMessageStore?.editingEvent === evt}
+                        onReplyTo={replyTo}
+                        {onRemovePreview}
+                        {onEditEvent}
+                        {onGoToMessageIndex}
+                        onExpandMessage={() => toggleMessageExpansion(evt, true)}
+                        onCollapseMessage={() => toggleMessageExpansion(evt, false)}
+                        event={evt} />
+                {/if}
+            {/snippet}
+        </ChatEventList>
+    {/if}
+    {#if imageContent}
+        <ZoomedImage onClose={() => (imageContent = undefined)} {imageContent} />
+    {/if}
+    {#if videoContent}
+        <ZoomedVideo onClose={() => (videoContent = undefined)} {videoContent} />
+    {/if}
+</div>
+
+<style lang="scss">
+    .chat_messages_wrapper {
+        position: relative;
+        display: flex;
+        flex: 1;
+        width: 100%;
+        overflow: auto;
+    }
+
+    .private-preview {
+        flex: 1 1 0;
+        display: flex;
+        flex-direction: column-reverse;
+        overflow-y: auto;
+        padding: var(--sp-md) var(--sp-lg) 0 var(--sp-lg);
+        gap: var(--sp-xs);
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/home/CurrentChatSearchHeader.svelte b/frontend/app/src/mobile/features/chats/core/CurrentChatSearchHeader.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/CurrentChatSearchHeader.svelte
rename to frontend/app/src/mobile/features/chats/core/CurrentChatSearchHeader.svelte
diff --git a/frontend/app/src/components_mobile/home/CustomMessageTrigger.svelte b/frontend/app/src/mobile/features/chats/core/CustomMessageTrigger.svelte
similarity index 96%
rename from frontend/app/src/components_mobile/home/CustomMessageTrigger.svelte
rename to frontend/app/src/mobile/features/chats/core/CustomMessageTrigger.svelte
index 8d1652f484..a344ed2488 100644
--- a/frontend/app/src/components_mobile/home/CustomMessageTrigger.svelte
+++ b/frontend/app/src/mobile/features/chats/core/CustomMessageTrigger.svelte
@@ -28,13 +28,13 @@
     import SwapHorizontal from "svelte-material-icons/SwapHorizontal.svelte";
     import FileImageOutline from "svelte-material-icons/FileImageOutline.svelte";
     import VideoBox from "svelte-material-icons/VideoBox.svelte";
-    import Bitcoin from "../icons/Bitcoin.svelte";
-    import MemeFighter from "../icons/MemeFighter.svelte";
-    import FileAttacher from "./FileAttacher.svelte";
-    import Translatable from "../Translatable.svelte";
+    import Bitcoin from "@src/mobile/ui/icons/Bitcoin.svelte";
+    import MemeFighter from "@src/mobile/ui/icons/MemeFighter.svelte";
+    import FileAttacher from "@src/mobile/features/chats/core/content/FileAttacher.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
     import ShieldAlertOutline from "svelte-material-icons/ShieldAlertOutline.svelte";
     import ChevronRight from "svelte-material-icons/ChevronRight.svelte";
-    import { toastStore } from "../../stores/toast";
+    import { toastStore } from "@src/stores/toast";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/mobile/features/chats/core/DisappearLabel.svelte b/frontend/app/src/mobile/features/chats/core/DisappearLabel.svelte
new file mode 100644
index 0000000000..8e1c1b5e1c
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/DisappearLabel.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+    import { Tooltip } from "component-lib";
+    import type { OpenChat } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import CameraTimer from "svelte-material-icons/CameraTimer.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    const client = getContext<OpenChat>("client");
+    interface Props {
+        ttl: bigint;
+    }
+
+    let { ttl }: Props = $props();
+</script>
+
+<Tooltip position={"bottom"} align={"end"}>
+    <div class="disappears">
+        <div class="expires">
+            <CameraTimer size={"1em"} color={"var(--txt-light)"} />
+        </div>
+        <div class="name">{client.formatDisappearingMessageTime(Number(ttl), $_)}</div>
+    </div>
+    {#snippet popup()}
+        <Translatable
+            resourceKey={i18nKey("disappearingMessages.summary", {
+                duration: client.formatDuration(Number(ttl)),
+            })} />
+    {/snippet}
+</Tooltip>
+
+<style lang="scss">
+    .disappears {
+        display: flex;
+        gap: $sp2;
+        align-items: center;
+        text-transform: uppercase;
+        background-color: var(--chatSummary-bg-selected);
+        padding: $sp2 $sp3;
+        border-radius: $sp3;
+
+        .expires {
+            $size: 12px;
+            flex: 0 0 $size;
+            width: $size;
+            height: $size;
+        }
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/chats/core/DisappearingMessageTimeUpdated.svelte b/frontend/app/src/mobile/features/chats/core/DisappearingMessageTimeUpdated.svelte
new file mode 100644
index 0000000000..77be42138e
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/DisappearingMessageTimeUpdated.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+    import type { OpenChat, UserSummary } from "@client";
+    import { allUsersStore } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { buildDisplayName } from "@src/utils/user";
+    import NonMessageEvent from "@src/mobile/features/chats/core/events/NonMessageEvent.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        user: UserSummary | undefined;
+        changedBy: string;
+        newTimeToLive: bigint | undefined;
+        timestamp: bigint;
+    }
+
+    let { user, changedBy, newTimeToLive, timestamp }: Props = $props();
+
+    let me = $derived(changedBy === user?.userId);
+    let changedByStr = $derived(buildDisplayName($allUsersStore, changedBy, me ? "me" : "user"));
+    let text = $derived(
+        newTimeToLive !== undefined
+            ? $_("disappearingMessages.timeUpdatedBy", {
+                  values: {
+                      changedBy: changedByStr,
+                      duration: client.formatDuration(Number(newTimeToLive)),
+                  },
+              })
+            : $_("disappearingMessages.disabledBy", {
+                  values: {
+                      changedBy: changedByStr,
+                  },
+              }),
+    );
+</script>
+
+<NonMessageEvent {text} {timestamp} />
diff --git a/frontend/app/src/components_mobile/home/DisappearsAt.svelte b/frontend/app/src/mobile/features/chats/core/DisappearsAt.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/DisappearsAt.svelte
rename to frontend/app/src/mobile/features/chats/core/DisappearsAt.svelte
diff --git a/frontend/app/src/mobile/features/chats/core/DraftMediaMessage.svelte b/frontend/app/src/mobile/features/chats/core/DraftMediaMessage.svelte
new file mode 100644
index 0000000000..c4a2986467
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/DraftMediaMessage.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+    import { Row } from "component-lib";
+    import type { AttachmentContent } from "@client";
+    import { currentUserIdStore } from "@client";
+    import AudioContent from "@src/mobile/features/chats/core/content/AudioContent.svelte";
+    import CryptoContent from "@src/mobile/features/chats/core/content/CryptoContent.svelte";
+    import FileContent from "@src/mobile/features/chats/core/content/FileContent.svelte";
+    import GiphyAttached from "./GiphyAttached.svelte";
+    import ImageContent from "@src/mobile/features/chats/core/content/ImageContent.svelte";
+    import P2PSwapContent from "@src/mobile/features/chats/core/content/P2PSwapContent.svelte";
+    import PrizeContent from "@src/mobile/features/chats/core/content/PrizeContent.svelte";
+    import VideoContent from "@src/mobile/features/chats/core/content/VideoContent.svelte";
+
+    interface Props {
+        content: AttachmentContent;
+        onRemoveAttachment?: () => void;
+    }
+
+    let { content, onRemoveAttachment }: Props = $props();
+</script>
+
+<Row>
+    {#if content.kind === "video_content"}
+        <VideoContent
+            onRemove={onRemoveAttachment}
+            {content}
+            me
+            draft
+            edited={false}
+            fill={false} />
+    {:else if content.kind === "audio_content"}
+        <AudioContent onRemove={onRemoveAttachment} {content} me draft edited={false} />
+    {:else if content.kind === "image_content"}
+        <ImageContent
+            onRemove={onRemoveAttachment}
+            {content}
+            me
+            draft
+            edited={false}
+            fill={false} />
+    {:else if content.kind === "giphy_content"}
+        <GiphyAttached onRemove={onRemoveAttachment} {content} />
+    {:else if content.kind === "crypto_content"}
+        <CryptoContent
+            onRemove={onRemoveAttachment}
+            {content}
+            me
+            draft
+            senderId={$currentUserIdStore} />
+    {:else if content.kind === "p2p_swap_content_initial"}
+        <P2PSwapContent draft me onRemove={onRemoveAttachment} {content} />
+    {:else if content.kind === "prize_content_initial"}
+        <PrizeContent me draft onRemove={onRemoveAttachment} {content} />
+    {:else if content.kind === "file_content"}
+        <FileContent onRemove={onRemoveAttachment} edited={false} me {content} draft />
+    {/if}
+</Row>
diff --git a/frontend/app/src/mobile/features/chats/core/EmojiAutocompleter.svelte b/frontend/app/src/mobile/features/chats/core/EmojiAutocompleter.svelte
new file mode 100644
index 0000000000..02b1c65e76
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/EmojiAutocompleter.svelte
@@ -0,0 +1,117 @@
+<script lang="ts">
+    import { ColourVars, Column, MenuItem } from "component-lib";
+    import { type EmojiSummary, type SelectedEmoji } from "@client";
+    import { untrack } from "svelte";
+    import { searchAllEmojis, summaryToSelectedEmoji } from "@src/utils/emojis";
+
+    interface Props {
+        query: string | undefined;
+        offset: number;
+        onSelect: (emoji: SelectedEmoji) => void;
+        onClose: () => void;
+    }
+
+    let { query, offset, onSelect, onClose }: Props = $props();
+
+    let index = $state(0);
+    let matches: EmojiSummary[] = $state([]);
+
+    // this is definitely a bit horrible. It seems to be necessary when we use the virtual list.
+    const ITEM_HEIGHT = 43.2;
+    $effect(() => {
+        if (query !== undefined) {
+            search(query);
+        }
+    });
+
+    function search(query: string) {
+        untrack(() => {
+            searchAllEmojis(query).then((m) => {
+                matches = m;
+            });
+        });
+    }
+
+    function select(match: EmojiSummary) {
+        onSelect(summaryToSelectedEmoji(match));
+    }
+
+    function onKeyDown(ev: KeyboardEvent): void {
+        switch (ev.key) {
+            case "ArrowDown":
+                index = (index + 1) % matches.length;
+                ev.preventDefault();
+                ev.stopPropagation();
+                break;
+            case "ArrowUp":
+                index = index === 0 ? matches.length - 1 : index - 1;
+                ev.preventDefault();
+                ev.stopPropagation();
+                break;
+            case "Escape":
+                onClose();
+                ev.preventDefault();
+                ev.stopPropagation();
+                break;
+            case "Enter":
+                const match = matches[index];
+                if (match) {
+                    select(match);
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                }
+                break;
+        }
+    }
+</script>
+
+<div class="picker" style={`bottom: ${offset}px; height: ${matches.length * ITEM_HEIGHT}px`}>
+    <Column backgroundColor={ColourVars.background1}>
+        {#each matches as match, i}
+            <MenuItem selected={i === index} onclick={() => select(match)}>
+                {#snippet icon()}
+                    <div class="emoji">
+                        {#if match.kind === "native"}
+                            {match.unicode}
+                        {:else}
+                            <img class="custom-emoji" src={match.url} alt={match.code} />
+                        {/if}
+                    </div>
+                {/snippet}
+                :{match.code}:
+            </MenuItem>
+        {/each}
+    </Column>
+</div>
+
+<svelte:body onkeydown={onKeyDown} />
+
+<style lang="scss">
+    :global(.picker .menu) {
+        box-shadow: none;
+        position: relative;
+        width: 100%;
+        height: 100%;
+        @include z-index("footer-overlay");
+    }
+
+    .picker {
+        position: absolute;
+        z-index: 10;
+        width: 100%;
+        max-height: calc(var(--vh, 1vh) * 50);
+        overflow: auto;
+        left: 0;
+    }
+    .emoji {
+        @include font(book, normal, fs-160);
+        margin-right: $sp4;
+    }
+
+    .custom-emoji {
+        width: 1em;
+        height: 1em;
+        object-fit: contain;
+        vertical-align: middle;
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/home/EmojiOrGif.svelte b/frontend/app/src/mobile/features/chats/core/EmojiOrGif.svelte
similarity index 98%
rename from frontend/app/src/components_mobile/home/EmojiOrGif.svelte
rename to frontend/app/src/mobile/features/chats/core/EmojiOrGif.svelte
index 238eabd025..6a4560d382 100644
--- a/frontend/app/src/components_mobile/home/EmojiOrGif.svelte
+++ b/frontend/app/src/mobile/features/chats/core/EmojiOrGif.svelte
@@ -9,7 +9,7 @@
     } from "@client";
     // import Backspace from "svelte-material-icons/BackspaceOutline.svelte";
     import Sticker from "svelte-material-icons/StickerEmoji.svelte";
-    import Gif from "../icons/Gif.svelte";
+    import Gif from "@src/mobile/ui/icons/Gif.svelte";
     import EmojiPicker from "./EmojiPickerWrapper.svelte";
     import GiphySelector from "./GiphySelector.svelte";
     import { keyboard } from "@src/stores/keyboard.svelte";
diff --git a/frontend/app/src/mobile/features/chats/core/EmojiPicker.svelte b/frontend/app/src/mobile/features/chats/core/EmojiPicker.svelte
new file mode 100644
index 0000000000..1059b0e1b8
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/EmojiPicker.svelte
@@ -0,0 +1,195 @@
+<script lang="ts">
+    import "emoji-picker-element";
+    import type {
+        EmojiClickEvent,
+        SkinTone,
+        SkinToneChangeEvent,
+    } from "emoji-picker-element/shared";
+    import {
+        emojiGroupNames,
+        PremiumItem,
+        premiumItemsStore,
+        premiumPrices,
+        type CustomEmoji,
+        type SelectedEmoji,
+    } from "@client";
+    import { onMount, tick } from "svelte";
+    import { currentTheme } from "@src/theme/themes";
+    import PremiumItemPayment from "@src/mobile/shared/PremiumItemPayment.svelte";
+
+    interface Props {
+        mode?: "message" | "reaction" | "thread";
+        searchInputPadding?: boolean;
+        onEmojiSelected: (emoji: SelectedEmoji) => void;
+        onSkintoneChanged?: (tone: SkinTone) => void;
+        customEmojis?: Map<string, CustomEmoji>;
+    }
+
+    let {
+        mode = "message",
+        searchInputPadding = false,
+        onEmojiSelected,
+        onSkintoneChanged,
+        customEmojis,
+    }: Props = $props();
+    let showPayGate = $state<CustomEmoji>();
+
+    function lockedCategoryCss(groupId: number, price: number) {
+        return `
+            .category:not(.gone)#menu-label-${groupId} {
+                position: relative;
+            }
+
+            .category:not(.gone)#menu-label-${groupId}::after {
+                content: "(${price.toLocaleString()} CHIT)";
+                font-size: 10px;
+                height: 14px;
+                background-image: url(/assets/locked_solid.svg);
+                background-repeat: no-repeat;
+                position: absolute;
+                margin-left: 5px;
+                padding-left: 18px;
+                padding-top: 2px;
+                color: var(--txt-light);
+                vertical-align: middle;
+                top: 8px;
+            }
+
+            .category:not(.gone)#menu-label-${groupId} + .emoji-menu[aria-labelledby="menu-label-${groupId}"] {
+                opacity: 0.5;
+            }
+        `;
+    }
+
+    function createCustomCss(): string {
+        const rules: string[] = [];
+
+        if (!$premiumItemsStore.has(PremiumItem.BotEmojis)) {
+            rules.push(lockedCategoryCss(0, premiumPrices[PremiumItem.BotEmojis]));
+        }
+
+        if (!$premiumItemsStore.has(PremiumItem.PopularEmojis)) {
+            rules.push(lockedCategoryCss(1, premiumPrices[PremiumItem.PopularEmojis]));
+        }
+
+        // Custom CSS rules...
+        rules.push(".indicator { transition: none; }");
+        if (searchInputPadding) {
+            rules.push(".search-row { padding-left: 6rem; }");
+        }
+        rules.push(
+            "#skintone-list { background-color: var(--background-2); border-radius: var(--rad-circle); box-shadow: var(--menu-sh); }",
+        );
+
+        return rules.join("\n");
+    }
+
+    onMount(() => {
+        const emojiPicker = document.querySelector("emoji-picker");
+
+        if (emojiPicker && customEmojis) {
+            emojiPicker.customEmoji = [...customEmojis.entries()].map(([_, emoji]) => {
+                return {
+                    name: emoji.code,
+                    shortcodes: [emoji.code],
+                    url: emoji.url,
+                    category: emojiGroupNames[emoji.premiumItem],
+                };
+            });
+        }
+        emojiPicker?.addEventListener("emoji-click", onClick);
+        emojiPicker?.addEventListener("skin-tone-change", skinToneChanged);
+
+        const style = document.createElement("style");
+        style.textContent = createCustomCss();
+        emojiPicker?.shadowRoot?.appendChild(style);
+
+        tick().then(() => {
+            emojiPicker?.shadowRoot
+                ?.querySelector<HTMLButtonElement>("button.nav-button[data-group-id='0']")
+                ?.click();
+        });
+
+        return () => {
+            emojiPicker?.removeEventListener("emoji-click", onClick);
+        };
+    });
+
+    function skinToneChanged(ev: SkinToneChangeEvent) {
+        onSkintoneChanged?.(ev.detail.skinTone);
+    }
+
+    function onClick(ev: EmojiClickEvent) {
+        if (ev.detail.unicode) {
+            onEmojiSelected({ kind: "native", unicode: ev.detail.unicode });
+        } else if (ev.detail.name !== undefined) {
+            const custom = customEmojis?.get(ev.detail.name);
+            if (custom !== undefined) {
+                if (!$premiumItemsStore.has(custom.premiumItem)) {
+                    showPayGate = custom;
+                } else {
+                    onEmojiSelected(custom);
+                }
+            }
+        }
+    }
+
+    function paidForItem() {
+        if (showPayGate) {
+            onEmojiSelected(showPayGate);
+            showPayGate = undefined;
+        }
+    }
+</script>
+
+{#if showPayGate}
+    <PremiumItemPayment
+        item={showPayGate.premiumItem}
+        onSuccess={paidForItem}
+        onCancel={() => (showPayGate = undefined)}></PremiumItemPayment>
+{/if}
+
+<emoji-picker
+    class:message={mode === "message"}
+    class:reaction={mode === "reaction"}
+    class:thread={mode === "thread"}
+    class:dark={$currentTheme.mode === "dark"}
+    class:light={$currentTheme.mode === "light"}></emoji-picker>
+
+<style lang="scss">
+    :global {
+        .emoji-overlay .modal-content {
+            background-color: var(--menu-bg);
+        }
+    }
+
+    emoji-picker {
+        width: 100%;
+        height: 100%;
+        // flex: 1;
+        display: flex;
+
+        // --emoji-padding: 0.3rem;
+        --emoji-size: 1.75rem;
+        // --emoji-padding: 0.25rem;
+        --background: transparent;
+        --border-size: 0;
+        --border-color: var(--bd);
+        --input-font-color: var(--text-primary);
+        --input-font-size: var(--typo-body-sz);
+        --input-line-height: var(--typo-body-lh);
+        --input-border-color: var(--text-tertiary);
+        --input-border-radius: var(--rad-circle);
+        --input-padding: var(--sp-sm) var(--sp-lg);
+        --indicator-color: var(--primary);
+        --num-columns: 9 !important;
+
+        @media (max-width: 390px) {
+            --num-columns: 7 !important;
+        }
+
+        @media (max-width: 340px) {
+            --num-columns: 6 !important;
+        }
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/home/EmojiPickerWrapper.svelte b/frontend/app/src/mobile/features/chats/core/EmojiPickerWrapper.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/EmojiPickerWrapper.svelte
rename to frontend/app/src/mobile/features/chats/core/EmojiPickerWrapper.svelte
diff --git a/frontend/app/src/mobile/features/chats/core/Footer.svelte b/frontend/app/src/mobile/features/chats/core/Footer.svelte
new file mode 100644
index 0000000000..8ecb622822
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/Footer.svelte
@@ -0,0 +1,217 @@
+<script lang="ts">
+    import { fileFromDataTransferItems } from "@src/utils/datatransfer";
+    import {
+        messageContextsEqual,
+        subscribe,
+        type AttachmentContent,
+        type ChatSummary,
+        type CreatedUser,
+        type EnhancedReplyContext,
+        type EphemeralMessageEvent,
+        type EventWrapper,
+        type Message,
+        type MessageContext,
+        type OpenChat,
+        type User,
+    } from "@client";
+    import { getContext, onMount, tick } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import EphemeralMessage from "@src/mobile/features/bots/EphemeralMessage.svelte";
+    // import DraftMediaMessage from "./DraftMediaMessage.svelte";
+    import MessageEntry from "./MessageEntry.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        blocked: boolean;
+        preview: boolean;
+        lapsed: boolean;
+        chat: ChatSummary;
+        attachment: AttachmentContent | undefined;
+        editingEvent: EventWrapper<Message> | undefined;
+        replyingTo: EnhancedReplyContext | undefined;
+        textContent: string | undefined;
+        user: CreatedUser;
+        mode?: "thread" | "message";
+        externalContent?: boolean;
+        messageContext: MessageContext;
+        onFileSelected: (content: AttachmentContent) => void;
+        onCancelReply: () => void;
+        onSetTextContent: (txt?: string) => void;
+        onStartTyping: () => void;
+        onStopTyping: () => void;
+        onCancelEdit: () => void;
+        onSendMessage: (args: [string | undefined, User[], boolean]) => void;
+        onClearAttachment: () => void;
+        onTokenTransfer: (args: { ledger?: string; amount?: bigint }) => void;
+        onCreatePrizeMessage?: () => void;
+        onCreateP2PSwapMessage: () => void;
+        onMakeMeme: () => void;
+    }
+
+    let {
+        blocked,
+        preview,
+        lapsed,
+        chat,
+        attachment,
+        editingEvent,
+        replyingTo,
+        textContent,
+        user,
+        mode = "message",
+        externalContent = false,
+        messageContext,
+        onFileSelected,
+        onCancelReply,
+        onSetTextContent,
+        onCancelEdit,
+        onStartTyping,
+        onStopTyping,
+        onSendMessage,
+        onClearAttachment,
+        onTokenTransfer,
+        onCreatePrizeMessage,
+        onCreateP2PSwapMessage,
+        onMakeMeme,
+    }: Props = $props();
+
+    let ephemeralMessageEvent = $state<EphemeralMessageEvent>();
+    //@ts-ignore
+    let messageEntry: MessageEntry;
+
+    let inputTrayVisible = $state(false);
+
+    onMount(() => {
+        const unsubs = [subscribe("ephemeralMessage", onEphemeralMessage)];
+        return () => {
+            unsubs.forEach((u) => u());
+        };
+    });
+
+    async function onEphemeralMessage(ev: EphemeralMessageEvent) {
+        if (ev.scope.kind !== "chat_scope") return;
+        if (!messageContextsEqual(messageContext, ev.scope)) return;
+        if (ephemeralMessageEvent !== undefined) {
+            ephemeralMessageEvent = undefined;
+            await tick();
+        }
+        ephemeralMessageEvent = ev;
+    }
+
+    function messageContentFromDataTransferItemList(items: DataTransferItem[]) {
+        const file = fileFromDataTransferItems(items);
+        if (file) {
+            client
+                .messageContentFromFile(file)
+                .then((content) => {
+                    let permission = client.contentTypeToPermission(content.kind);
+                    if (client.canSendMessage(chat.id, mode, permission)) {
+                        onFileSelected(content);
+                    } else {
+                        const errorMessage = i18nKey("permissions.notPermitted", {
+                            permission: $_(`permissions.threadPermissions.${permission}`),
+                        });
+                        toastStore.showFailureToast(errorMessage);
+                    }
+                })
+                .catch((err) => toastStore.showFailureToast(i18nKey(err)));
+        }
+    }
+
+    function onDataTransfer(data: DataTransfer): void {
+        messageContentFromDataTransferItemList([...data.items]);
+    }
+
+    function onPaste(e: ClipboardEvent) {
+        if (e.clipboardData) {
+            onDataTransfer(e.clipboardData);
+        }
+    }
+
+    $effect(() => {
+        if (
+            ephemeralMessageEvent !== undefined &&
+            ephemeralMessageEvent.scope.kind === "chat_scope" &&
+            !messageContextsEqual(messageContext, ephemeralMessageEvent.scope)
+        ) {
+            ephemeralMessageEvent = undefined;
+        }
+    });
+</script>
+
+<div class={`footer ${mode} ${inputTrayVisible ? "tray_visible" : ""}`}>
+    <div class="footer-overlay">
+        {#if ephemeralMessageEvent !== undefined}
+            <EphemeralMessage
+                onClose={() => (ephemeralMessageEvent = undefined)}
+                event={ephemeralMessageEvent} />
+        {/if}
+        <!-- {#if editingEvent === undefined && (replyingTo || attachment !== undefined)}
+            {#if attachment !== undefined}
+                <DraftMediaMessage ctx={messageContext} content={attachment} />
+            {/if}
+        {/if} -->
+    </div>
+    <MessageEntry
+        bind:this={messageEntry}
+        bind:inputTrayVisible
+        {onPaste}
+        {externalContent}
+        {mode}
+        {preview}
+        {lapsed}
+        {blocked}
+        {attachment}
+        {editingEvent}
+        replyingTo={editingEvent === undefined && replyingTo !== undefined ? replyingTo : undefined}
+        {textContent}
+        {chat}
+        {messageContext}
+        {user}
+        {onSendMessage}
+        {onCancelReply}
+        {onCancelEdit}
+        {onSetTextContent}
+        {onStartTyping}
+        {onStopTyping}
+        {onTokenTransfer}
+        {onCreatePrizeMessage}
+        {onCreateP2PSwapMessage}
+        {onMakeMeme}
+        {onClearAttachment}
+        {onFileSelected} />
+</div>
+
+<style lang="scss">
+    :global(body.witch .middle .footer) {
+        @include z-index("footer");
+    }
+
+    .footer {
+        width: 100%;
+        position: relative;
+        padding: var(--sp-xs) var(--sp-zero) var(--sp-zero);
+        transition: padding-bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+
+        &:not(.tray_visible) {
+            padding-bottom: var(--device-nav-height);
+        }
+
+        &.tray_visible {
+            padding-bottom: 0;
+        }
+    }
+
+    .footer-overlay {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-content: center;
+        align-items: flex-start;
+        background-color: var(--entry-bg);
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/home/GenericPreview.svelte b/frontend/app/src/mobile/features/chats/core/GenericPreview.svelte
similarity index 97%
rename from frontend/app/src/components_mobile/home/GenericPreview.svelte
rename to frontend/app/src/mobile/features/chats/core/GenericPreview.svelte
index d4c3138c51..b4ab963d7d 100644
--- a/frontend/app/src/components_mobile/home/GenericPreview.svelte
+++ b/frontend/app/src/mobile/features/chats/core/GenericPreview.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { ChatCaption, Column, Label } from "component-lib";
     import { type OgPreview } from "@client";
-    // import PreviewPlaceholder from "../PreviewPlaceholder.svelte";
+    // import PreviewPlaceholder from "./PreviewPlaceholder.svelte";
 
     interface Props {
         me: boolean;
diff --git a/frontend/app/src/components_mobile/home/GiphyAttached.svelte b/frontend/app/src/mobile/features/chats/core/GiphyAttached.svelte
similarity index 96%
rename from frontend/app/src/components_mobile/home/GiphyAttached.svelte
rename to frontend/app/src/mobile/features/chats/core/GiphyAttached.svelte
index 85e8d783ee..20f3ef3253 100644
--- a/frontend/app/src/components_mobile/home/GiphyAttached.svelte
+++ b/frontend/app/src/mobile/features/chats/core/GiphyAttached.svelte
@@ -2,8 +2,8 @@
     import { ColourVars, Column, IconButton, Row } from "component-lib";
     import { type GiphyContent } from "@client";
     import Close from "svelte-material-icons/Close.svelte";
-    import { rtlStore } from "../../stores/rtl";
-    // import { lowBandwidth } from "../../stores/settings";
+    import { rtlStore } from "@src/stores/rtl";
+    // import { lowBandwidth } from "@src/stores/settings";
 
     interface Props {
         content: GiphyContent;
diff --git a/frontend/app/src/components_mobile/home/GiphySelector.svelte b/frontend/app/src/mobile/features/chats/core/GiphySelector.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/GiphySelector.svelte
rename to frontend/app/src/mobile/features/chats/core/GiphySelector.svelte
diff --git a/frontend/app/src/mobile/features/chats/core/InitialChatMessage.svelte b/frontend/app/src/mobile/features/chats/core/InitialChatMessage.svelte
new file mode 100644
index 0000000000..a8b8df69bc
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/InitialChatMessage.svelte
@@ -0,0 +1,135 @@
+<script lang="ts">
+    import { Avatar } from "component-lib";
+    import {
+        allUsersStore,
+        botState,
+        type ChatSummary,
+        type CommandDefinition,
+        directChatBotsStore,
+        emptyGrantedBotPermissions,
+        type GrantedBotPermissions,
+        isProposalGroupStore,
+        type OpenChat,
+        type ResourceKey,
+        selectedCommunitySummaryStore,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import BotCommands from "@src/mobile/features/bots/BotCommands.svelte";
+    import WithVerifiedBadge from "@src/mobile/ui/icons/WithVerifiedBadge.svelte";
+    import ProposalBot from "@src/ui/ProposalBot.svelte";
+    import Robot from "@src/ui/Robot.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    type BotState = {
+        commands: CommandDefinition[];
+        grantedPermissions: GrantedBotPermissions;
+    };
+
+    type State = {
+        title: ResourceKey;
+        verified: boolean;
+        description?: string;
+        avatarUrl: string;
+        subtitle?: ResourceKey;
+        bot?: BotState;
+    };
+
+    interface Props {
+        chat: ChatSummary;
+    }
+
+    let { chat }: Props = $props();
+
+    let state = $derived.by<State>(() => {
+        switch (chat.kind) {
+            case "direct_chat":
+                const them = $allUsersStore.get(chat.them.userId);
+                const s: State = {
+                    title: i18nKey(client.displayName(them)),
+                    verified: false,
+                    avatarUrl: client.userAvatarUrl($allUsersStore.get(chat.them.userId)),
+                };
+                const bot = botState.externalBots.get(chat.them.userId);
+                const perm =
+                    $directChatBotsStore.get(chat.them.userId) ?? emptyGrantedBotPermissions();
+                return bot === undefined
+                    ? s
+                    : {
+                          ...s,
+                          description: bot.definition.description,
+                          bot: {
+                              commands: bot.definition.commands,
+                              grantedPermissions: perm,
+                          },
+                      };
+            default:
+                return {
+                    title: i18nKey("group.welcome", { groupName: chat.name }),
+                    verified: chat.kind === "group_chat" ? chat.verified : false,
+                    description: chat.description,
+                    avatarUrl: client.groupAvatarUrl(chat, $selectedCommunitySummaryStore),
+                    subtitle: i18nKey(
+                        chat.public ? "thisIsPublicGroupWithN" : "thisIsPrivateGroupWithN",
+                        { number: chat.memberCount },
+                        chat.level,
+                        true,
+                    ),
+                    bot: undefined,
+                };
+        }
+    });
+</script>
+
+<div class="container">
+    {#if $isProposalGroupStore}
+        <ProposalBot />
+    {:else if chat.kind === "direct_chat" && client.isOpenChatBot(chat.them.userId)}
+        <Robot />
+    {:else}
+        <WithVerifiedBadge verified={state.verified}>
+            <h4 class="welcome">
+                <Translatable resourceKey={state.title} />
+            </h4>
+        </WithVerifiedBadge>
+        <div class="pop">
+            <Avatar url={state.avatarUrl} size={"huge"} name={(chat as any).name} />
+        </div>
+        {#if state.description && state.description.length > 0}
+            <Markdown inline={false} text={state.description} />
+        {/if}
+        {#if state.bot !== undefined}
+            <BotCommands centered {...state.bot} />
+        {/if}
+        {#if state.subtitle}
+            <Translatable resourceKey={state.subtitle} />
+        {/if}
+    {/if}
+</div>
+
+<style lang="scss">
+    .container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: $sp4;
+        margin: $sp4 auto;
+        text-align: center;
+        background-color: var(--timeline-bg);
+        color: var(--timeline-txt);
+        @include font(book, normal, fs-70);
+        max-width: toRem(400);
+    }
+
+    .welcome {
+        @include font(bold, normal, fs-120);
+        color: var(--txt);
+    }
+
+    .pop {
+        @include pop(400ms);
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/home/IntersectionObserver.svelte b/frontend/app/src/mobile/features/chats/core/IntersectionObserver.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/IntersectionObserver.svelte
rename to frontend/app/src/mobile/features/chats/core/IntersectionObserver.svelte
diff --git a/frontend/app/src/components_mobile/home/LinkPreviews.svelte b/frontend/app/src/mobile/features/chats/core/LinkPreviews.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/LinkPreviews.svelte
rename to frontend/app/src/mobile/features/chats/core/LinkPreviews.svelte
diff --git a/frontend/app/src/mobile/features/chats/core/MemeBuilder.svelte b/frontend/app/src/mobile/features/chats/core/MemeBuilder.svelte
new file mode 100644
index 0000000000..3c6801ef4b
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/MemeBuilder.svelte
@@ -0,0 +1,108 @@
+<script lang="ts">
+    import { Column, CommonButton, Row, Sheet, Subtitle } from "component-lib";
+    import { iconSize, type MemeFighterContent as MemeFighterContentType } from "@client";
+    import { tick } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { currentTheme } from "@src/theme/themes";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import MemeFighter from "@src/mobile/ui/icons/MemeFighter.svelte";
+    import { keyboard } from "@src/stores/keyboard.svelte";
+
+    interface Props {
+        open: boolean;
+        width?: number;
+        height?: number;
+        onSend: (content: MemeFighterContentType) => void;
+    }
+
+    let { open = $bindable(), width = 500, height = 400, onSend }: Props = $props();
+
+    let memeUrl = $state(undefined as string | undefined);
+    let iframe: HTMLIFrameElement;
+    let img: HTMLImageElement | undefined = $state();
+    let placeholder = "/assets/memefighter.svg";
+
+    export function reset() {
+        memeUrl = undefined;
+        tick().then(async () => {
+            if (iframe) {
+                const { start } = await import("@memefighter/maker-core");
+                start({
+                    iframe,
+                    styleVariables,
+                    skipInsertButton: true,
+                }).then(onMemeCreated);
+            }
+        });
+    }
+
+    const styleVariables = {
+        "--background-color": "#1b1c21",
+        "--foreground-color": $currentTheme.txt,
+        "--button-color": $currentTheme.button.bg,
+    };
+
+    function send() {
+        if (memeUrl !== undefined && img !== undefined) {
+            const rect = img.getBoundingClientRect();
+            const content: MemeFighterContentType = {
+                kind: "meme_fighter_content",
+                url: memeUrl,
+                width: rect.width,
+                height: rect.height,
+            };
+            onSend(content);
+            open = false;
+        }
+    }
+
+    function close() {
+        keyboard.disableViewportResize();
+        open = false;
+    }
+
+    function onMemeCreated(url: string) {
+        memeUrl = url;
+    }
+
+    function error() {
+        if (img) {
+            img.src = placeholder;
+        }
+    }
+</script>
+
+{#if open}
+    <Sheet onDismiss={close}>
+        <Column gap={"lg"} padding={"lg"}>
+            <Row crossAxisAlignment={"center"} gap={"sm"}>
+                <MemeFighter size={$iconSize} color={"var(--icon-txt)"} />
+                <Subtitle fontWeight={"bold"}>Meme Fighter</Subtitle>
+            </Row>
+            <Column minHeight={"25rem"} crossAxisAlignment={"center"} mainAxisAlignment={"center"}>
+                {#if memeUrl}
+                    <img bind:this={img} class="meme" src={memeUrl} onerror={error} />
+                {:else}
+                    <iframe
+                        bind:this={iframe}
+                        {width}
+                        {height}
+                        style="border: none; max-width: 100%;"></iframe>
+                {/if}
+            </Column>
+            <Row mainAxisAlignment={"end"} gap={"md"} crossAxisAlignment={"center"}>
+                <CommonButton size={"small_text"} onClick={reset}
+                    ><Translatable resourceKey={i18nKey("reset")} /></CommonButton>
+                <CommonButton size={"small_text"} onClick={close}
+                    ><Translatable resourceKey={i18nKey("cancel")} /></CommonButton>
+                <CommonButton
+                    mode={"active"}
+                    size={"medium"}
+                    disabled={memeUrl === undefined}
+                    onClick={send}>
+                    <Translatable resourceKey={i18nKey("send")} />
+                </CommonButton>
+            </Row>
+        </Column>
+    </Sheet>
+{/if}
diff --git a/frontend/app/src/mobile/features/chats/core/MentionPicker.svelte b/frontend/app/src/mobile/features/chats/core/MentionPicker.svelte
new file mode 100644
index 0000000000..9e9d016ff1
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/MentionPicker.svelte
@@ -0,0 +1,145 @@
+<script lang="ts">
+    import VirtualList from "@src/ui/VirtualList.svelte";
+    import { Avatar, Body, ColourVars, Column, MenuItem, Row } from "component-lib";
+    import type { OpenChat, UserOrUserGroup } from "@client";
+    import { allUsersStore, iconSize, selectedCommunityMembersStore } from "@client";
+    import { getContext } from "svelte";
+    import AccountMultiple from "svelte-material-icons/AccountMultiple.svelte";
+    import MentionPickerLogic from "@src/mobile/shared/MentionPickerLogic.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        prefix: string | undefined;
+        offset: number;
+        direction?: "up" | "down";
+        border?: boolean;
+        mentionSelf?: boolean;
+        supportsUserGroups?: boolean;
+        usersOnly?: boolean;
+        inline?: boolean;
+        onMention: (user: UserOrUserGroup) => void;
+    }
+
+    let {
+        prefix,
+        offset,
+        direction = "up",
+        border = false,
+        mentionSelf = false,
+        supportsUserGroups = false,
+        usersOnly = false,
+        inline = false,
+        onMention,
+    }: Props = $props();
+</script>
+
+<MentionPickerLogic
+    {prefix}
+    {offset}
+    {direction}
+    {border}
+    {mentionSelf}
+    {supportsUserGroups}
+    {usersOnly}
+    {inline}
+    {onMention}>
+    {#snippet children(
+        userOrGroupKey,
+        mention,
+        filtered,
+        direction,
+        inline,
+        border,
+        style,
+        index,
+        height,
+    )}
+        {#if filtered.length > 0}
+            <div
+                class="mention-picker"
+                class:up={direction === "up"}
+                class:down={direction === "down"}
+                class:inline
+                class:border
+                {style}>
+                <Column
+                    parentDirection={"horizontal"}
+                    borderRadius={"md"}
+                    backgroundColor={ColourVars.background1}
+                    width={"fill"}
+                    height={{ size: `${height}px` }}>
+                    <VirtualList keyFn={userOrGroupKey} items={filtered}>
+                        {#snippet children(item, itemIndex)}
+                            <MenuItem selected={itemIndex === index} onclick={() => mention(item)}>
+                                {#snippet icon()}
+                                    {#if item.kind === "user_group" || item.kind === "everyone"}
+                                        <div class="group-icon">
+                                            <AccountMultiple
+                                                color={"var(--menu-disabled-txt)"}
+                                                size={$iconSize} />
+                                        </div>
+                                    {:else}
+                                        <Avatar
+                                            url={client.userAvatarUrl(
+                                                $allUsersStore.get(item.userId),
+                                            )}
+                                            size={"sm"} />
+                                    {/if}
+                                {/snippet}
+                                <Row gap={"xs"} crossAxisAlignment={"center"}>
+                                    {#if item.kind === "user_group"}
+                                        <Body width={"hug"}>
+                                            {item.name}
+                                        </Body>
+                                    {:else if item.kind === "everyone"}
+                                        <Body width={"hug"}>
+                                            {"everyone"}
+                                        </Body>
+                                    {:else}
+                                        <Body width={"hug"}>
+                                            {client.getDisplayName(
+                                                item.userId,
+                                                $selectedCommunityMembersStore,
+                                            )}
+                                        </Body>
+                                        <Body colour={"textSecondary"} width={"hug"}>
+                                            @{item.username}
+                                        </Body>
+                                    {/if}
+                                </Row>
+                            </MenuItem>
+                        {/snippet}
+                    </VirtualList>
+                </Column>
+            </div>
+        {/if}
+    {/snippet}
+</MentionPickerLogic>
+
+<style lang="scss">
+    .mention-picker {
+        @include z-index("footer-overlay");
+        position: absolute;
+        max-height: calc(var(--vh, 1vh) * 50);
+        overflow: auto;
+        z-index: 10000;
+        width: toRem(250);
+        left: 0;
+
+        &.inline {
+            position: relative;
+            box-shadow: none;
+        }
+    }
+
+    .group-icon {
+        width: toRem(35);
+        height: toRem(35);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: var(--menu-bg);
+        border-radius: 50%;
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/home/message/MessageBubble.svelte b/frontend/app/src/mobile/features/chats/core/MessageBubble.svelte
similarity index 95%
rename from frontend/app/src/components_mobile/home/message/MessageBubble.svelte
rename to frontend/app/src/mobile/features/chats/core/MessageBubble.svelte
index 84ec01ccf9..bedee8c3c2 100644
--- a/frontend/app/src/components_mobile/home/message/MessageBubble.svelte
+++ b/frontend/app/src/mobile/features/chats/core/MessageBubble.svelte
@@ -22,14 +22,14 @@
         type SenderContext,
         type UserSummary,
     } from "@client";
-    import { navigate } from "@utils/navigation";
+    import { navigate } from "@src/utils/navigation";
     import { getContext, type Snippet } from "svelte";
-    import Typing from "@shared_components/Typing.svelte";
-    import Badges from "../profile/Badges.svelte";
-    import BotBadge from "../profile/BotBadge.svelte";
-    import RoleIcon from "../profile/RoleIcon.svelte";
-    import WithRole from "../profile/WithRole.svelte";
-    import UnresolvedReply from "../UnresolvedReply.svelte";
+    import Typing from "@src/ui/Typing.svelte";
+    import Badges from "@src/mobile/features/profile/Badges.svelte";
+    import BotBadge from "@src/mobile/features/bots/exports/BotBadge.svelte";
+    import RoleIcon from "@src/mobile/features/profile/RoleIcon.svelte";
+    import WithRole from "@src/mobile/features/profile/WithRole.svelte";
+    import UnresolvedReply from "./UnresolvedReply.svelte";
     import MessageMetadata from "./MessageMetadata.svelte";
 
     const client = getContext<OpenChat>("client");
diff --git a/frontend/app/src/mobile/features/chats/core/MessageEntry.svelte b/frontend/app/src/mobile/features/chats/core/MessageEntry.svelte
new file mode 100644
index 0000000000..ab8e9e74f2
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/MessageEntry.svelte
@@ -0,0 +1,960 @@
+<script lang="ts">
+    import RichTextEditor from "@src/ui/RichTextEditor.svelte";
+    import { keyboard } from "@src/stores/keyboard.svelte";
+    import { trackedEffect } from "@src/utils/effects.svelte";
+    import {
+        popHistoryStateWithAction,
+        pushDummyHistoryState,
+        type CustomHistoryAction,
+    } from "@src/utils/history";
+    import { BodySmall, ColourVars, Container, IconButton, Row } from "component-lib";
+    import type {
+        AttachmentContent,
+        BotActionScope,
+        ChatSummary,
+        EnhancedReplyContext,
+        EventWrapper,
+        ExternalBot,
+        Message,
+        MessageContext,
+        OpenChat,
+        SelectedEmoji,
+        User,
+    } from "@client";
+    import {
+        allUsersStore,
+        anonUserStore,
+        botState,
+        currentUserIdStore,
+        directMessageCommandInstance,
+        localUpdates,
+        messageContextsEqual,
+        random64,
+        screenWidth,
+        ScreenWidth,
+        selectedChatMembersStore,
+        selectedCommunitySummaryStore,
+        selectedCommunityUserGroupsStore,
+        throttleDeadline,
+        userGroupMentionRegex,
+        userIdMentionRegex,
+        type CreatedUser,
+    } from "@client";
+    import { getContext, onMount, tick } from "svelte";
+    import { _ } from "svelte-i18n";
+    import Alert from "svelte-material-icons/Alert.svelte";
+    import Camera from "svelte-material-icons/CameraOutline.svelte";
+    import Check from "svelte-material-icons/Check.svelte";
+    import Close from "svelte-material-icons/Close.svelte";
+    import Keyboard from "svelte-material-icons/KeyboardOutline.svelte";
+    import PlusCircle from "svelte-material-icons/PlusCircleOutline.svelte";
+    import StickerEmoji from "svelte-material-icons/StickerEmoji.svelte";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import { enterSend } from "@src/stores/settings";
+    import { snowing } from "@src/stores/snow";
+    import AlertBoxModal from "./AlertBoxModal.svelte";
+    import CommandBuilder from "@src/mobile/features/bots/CommandInstanceBuilder.svelte";
+    import CommandSelector from "@src/mobile/features/bots/CommandSelector.svelte";
+    import Send from "@src/mobile/ui/icons/Send.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import AudioAttacher from "@src/mobile/features/chats/core/content/AudioAttacher.svelte";
+    import CustomMessageTrigger from "./CustomMessageTrigger.svelte";
+    import DraftMediaMessage from "./DraftMediaMessage.svelte";
+    import EmojiAutocompleter from "./EmojiAutocompleter.svelte";
+    import EmojiOrGif from "./EmojiOrGif.svelte";
+    import FileAttacher from "@src/mobile/features/chats/core/content/FileAttacher.svelte";
+    import MentionPicker from "./MentionPicker.svelte";
+    import PreviewFooter from "./PreviewFooter.svelte";
+    import RecordingWaveform from "./RecordingWaveform.svelte";
+    import ReplyingTo from "./ReplyingTo.svelte";
+    import ThrottleCountdown from "./ThrottleCountdown.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        chat: ChatSummary;
+        blocked: boolean;
+        preview: boolean;
+        lapsed: boolean;
+        attachment: AttachmentContent | undefined;
+        editingEvent: EventWrapper<Message> | undefined;
+        replyingTo: EnhancedReplyContext | undefined;
+        textContent: string | undefined;
+        mode?: "thread" | "message";
+        externalContent: boolean;
+        messageContext: MessageContext;
+        user: CreatedUser;
+        inputTrayVisible: boolean;
+        onFileSelected: (content: AttachmentContent) => void;
+        onPaste: (e: ClipboardEvent) => void;
+        onSetTextContent: (txt?: string) => void;
+        onStartTyping: () => void;
+        onStopTyping: () => void;
+        onCancelEdit: () => void;
+        onSendMessage: (args: [string | undefined, User[], boolean]) => void;
+        onClearAttachment: () => void;
+        onTokenTransfer: (args: { ledger?: string; amount?: bigint }) => void;
+        onCreatePrizeMessage?: () => void;
+        onCreateP2PSwapMessage: () => void;
+        onMakeMeme: () => void;
+        onCancelReply: () => void;
+    }
+
+    let {
+        chat,
+        blocked,
+        preview,
+        lapsed,
+        attachment,
+        editingEvent,
+        replyingTo,
+        textContent,
+        mode = "message",
+        externalContent,
+        messageContext,
+        user,
+        inputTrayVisible = $bindable(),
+        onFileSelected,
+        onPaste,
+        onSetTextContent,
+        onStartTyping,
+        onStopTyping,
+        onCancelEdit,
+        onSendMessage,
+        onClearAttachment,
+        onTokenTransfer,
+        onCreatePrizeMessage,
+        onCreateP2PSwapMessage,
+        onMakeMeme,
+        onCancelReply,
+    }: Props = $props();
+
+    const USER_TYPING_EVENT_MIN_INTERVAL_MS = 1000; // 1 second
+    const MARK_TYPING_STOPPED_INTERVAL_MS = 5000; // 5 seconds
+
+    let editor = $state<RichTextEditor>();
+    let editorEmpty = $state(true);
+
+    let messageEntryElement = $state<HTMLElement>();
+    let messageEntryHeight = $state<number>(0);
+
+    $effect(() => {
+        if (messageEntryElement === undefined) return;
+        const el = messageEntryElement;
+        const observer = new ResizeObserver(() => {
+            messageEntryHeight = el.clientHeight;
+        });
+        observer.observe(el);
+        return () => observer.disconnect();
+    });
+    let activeStream: MediaStream | undefined = $state(undefined);
+    let audioMimeType = client.audioRecordingMimeType();
+    let previousEditingEvent: EventWrapper<Message> | undefined = $state();
+    let lastTypingUpdate: number = 0;
+    let typingTimer: number | undefined = undefined;
+    let audioSupported: boolean = $state("mediaDevices" in navigator);
+    let showCommandSelector: boolean = $state(false);
+    let containsMarkdown = $state(false);
+    let showDirectBotChatWarning = $state(false);
+    let commandSent = false;
+
+    // Update this to force a new textbox instance to be created
+    let textboxId = $state(Symbol());
+
+    type InputTrayMode =
+        | "closed"
+        | "keyboard_only"
+        | "emoji_gif_selection"
+        | "emoji_gif_search"
+        | "attachments";
+
+    // Control variable to indicate that focus out happened, which changed the
+    // keyboard visibility, and we can take it into account to prevent extended
+    // section hiding prematurely.
+    let emojiSearchFocusedOut = $state(false);
+
+    // Prevents pop handler from running if not necessary!
+    let returnFromPopHandler = $state(false);
+
+    // Track changes in kb visibility to prevent the effect running twice for
+    // same value.
+    let previousKbVisibleValue = $state(keyboard.visible);
+
+    // Current mode for the input tray, section that opens up below the input
+    // and which provides additional message options.
+    let inputTrayMode = $state<InputTrayMode>("closed");
+
+    // Cases in which we show extended options, even when keyboard is visible,
+    // since the extened options provide bottom padding for the input to rise
+    // above the keyboard.
+    $effect(() => {
+        inputTrayVisible = keyboard.visible || inputTrayMode !== "closed";
+    });
+
+    $effect(() => {
+        if (previousKbVisibleValue === keyboard.visible) return;
+
+        // This is a new change, make sure to remember the new state...
+        previousKbVisibleValue = keyboard.visible;
+
+        if (!keyboard.visible) {
+            // In case we we're showing emoji search, or we focused out of emoji
+            // search, move to emoji selection.
+            if (inputTrayMode === "emoji_gif_search" || emojiSearchFocusedOut) {
+                inputTrayMode = "emoji_gif_selection";
+            }
+
+            // If we were only showing keyboard before...
+            if (inputTrayMode === "keyboard_only") {
+                inputTrayMode = "closed";
+            }
+
+            emojiSearchFocusedOut = false;
+        } else {
+            if (inputTrayMode === "closed") {
+                inputTrayMode = "keyboard_only";
+            }
+        }
+    });
+
+    // Show emoji!
+    function toggleEmojiPicker() {
+        inputTrayMode = "emoji_gif_selection";
+        pushExpandedHistoryState();
+    }
+
+    // Show extened options!
+    function toggleAttachments() {
+        inputTrayMode = inputTrayMode === "attachments" ? "closed" : "attachments";
+
+        // Only push history state if attachment options are showing, or pop state
+        // if the options are not showing.
+        inputTrayMode === "attachments" ? pushExpandedHistoryState() : popExpandedHistoryState();
+    }
+
+    function showKeyboard() {
+        editor?.focus();
+    }
+
+    // Should handle cases where usual user interactions are skipped, and
+    // input is focused directly, i.e. user clicking directly into input,
+    // or replying/editing to/a message.
+    function keyboardFocus() {
+        inputTrayMode = "keyboard_only";
+
+        // Reset indicator var...
+        emojiSearchFocusedOut = false;
+
+        // When keyboard shows, we pop any history state that may have been
+        // added due to opening emoji or extended options selectors.
+        popExpandedHistoryState();
+    }
+
+    function getHistoryStateAction(): CustomHistoryAction {
+        return `input-tray-${mode}`;
+    }
+
+    // State added to indicate expanded section is open. Devices back gesture
+    // can then pop the state from history, and the expanded section will close.
+    function pushExpandedHistoryState() {
+        pushDummyHistoryState(getHistoryStateAction());
+    }
+
+    // Pops expanded history state only if it's set.
+    function popExpandedHistoryState() {
+        if (popHistoryStateWithAction(getHistoryStateAction())) {
+            returnFromPopHandler = true;
+        }
+    }
+
+    // Runs on BACK gesture/button!
+    function popStateHandler(_e: PopStateEvent) {
+        if (returnFromPopHandler) {
+            // We manually ran pop state, so no need to handle pop any further...
+            returnFromPopHandler = false;
+            return;
+        }
+
+        if (inputTrayMode === "emoji_gif_search") {
+            inputTrayMode = "emoji_gif_selection";
+            return;
+        }
+
+        inputTrayMode = "closed";
+    }
+
+    function inputTrayFocusIn(e: FocusEvent) {
+        // Only handle focus if the originating element is input!
+        const eventOrigin = e.composedPath()[0] as HTMLElement;
+        const isInputOrigin = eventOrigin.tagName === "INPUT";
+
+        inputTrayMode = isInputOrigin ? "emoji_gif_search" : inputTrayMode;
+    }
+
+    function inputTrayFocusOut(e: FocusEvent) {
+        // Do not handle blur event for non input elements
+        const eventOrigin = e.composedPath()[0] as HTMLElement;
+        if (eventOrigin.tagName !== "INPUT") return;
+
+        inputTrayMode = "emoji_gif_selection";
+
+        // Indicate that we just focused out of an input field within the input
+        // tray, i.e. emoji search input, helps us to switch to emoji selection view.
+        emojiSearchFocusedOut = true;
+    }
+
+    // Switch back to attachments view after attachment is cleared, if the view
+    // is on keyboard!
+    function onRemoveAttachment() {
+        if (inputTrayMode === "keyboard_only") {
+            inputTrayMode = "attachments";
+        }
+
+        onClearAttachment();
+    }
+
+    onMount(() => {
+        // This component is also used for threads, so we need to remember the
+        // state of this when the component mounts.
+        const wasViewportResizeEnabled = keyboard.viewportResizeEnabled;
+
+        // When mesasge entry is on screen, the viewport should not just resize
+        // by default, since we want to support the input tray UI where soft
+        // keyboard overlaps some of the UI content.
+        keyboard.disableViewportResize();
+        return () => {
+            // Enable kb resizing again if it was enabled.
+            if (wasViewportResizeEnabled) keyboard.enableViewportResize();
+        };
+    });
+
+    function insertEmoji(emoji: SelectedEmoji) {
+        editor?.insertEmoji(emoji);
+    }
+
+    function backspace() {
+        document.execCommand("delete");
+    }
+
+    function onInput() {
+        const inputContent = editor?.getMarkdown() ?? "";
+        onSetTextContent(inputContent.trim().length === 0 ? undefined : inputContent);
+        triggerCommandSelector(inputContent);
+        triggerTypingTimer();
+        containsMarkdown = detectMarkdown(inputContent);
+    }
+
+    function triggerCommandSelector(inputContent: string | null): void {
+        const commandMatch = inputContent?.match(/^\/.*/);
+        if (commandMatch) {
+            showCommandSelector = true;
+            botState.prefix = commandMatch[0];
+        } else {
+            showCommandSelector = false;
+            botState.cancel();
+        }
+    }
+
+    function cancelCommandSelector(sent: boolean) {
+        commandSent = sent;
+        showCommandSelector = false;
+        botState.cancel();
+        if (sent) {
+            onSetTextContent();
+        }
+    }
+
+    function triggerTypingTimer() {
+        requestAnimationFrame(() => {
+            const now = Date.now();
+            if (now - lastTypingUpdate > USER_TYPING_EVENT_MIN_INTERVAL_MS) {
+                lastTypingUpdate = now;
+                onStartTyping();
+            }
+            if (typingTimer !== undefined) {
+                window.clearTimeout(typingTimer);
+            }
+
+            typingTimer = window.setTimeout(onStopTyping, MARK_TYPING_STOPPED_INTERVAL_MS);
+        });
+    }
+
+    function sendADirectBotMessage(bot: ExternalBot) {
+        const txt = editor?.getMarkdown() ?? "";
+        const userMessageId = random64();
+        const botMessageId = random64();
+
+        const commandInstance = directMessageCommandInstance(bot, txt);
+        if (commandInstance !== undefined) {
+            const scope: BotActionScope = {
+                kind: "chat_scope",
+                chatId: messageContext.chatId,
+                threadRootMessageIndex: messageContext.threadRootMessageIndex,
+                messageId: botMessageId,
+                userMessageId,
+            };
+            client.sendPlaceholderBotMessage(
+                scope,
+                undefined,
+                { kind: "text_content", text: txt },
+                userMessageId,
+                $currentUserIdStore,
+                containsMarkdown,
+            );
+            client.executeBotCommand(scope, commandInstance, true);
+            localUpdates.draftMessages.delete(messageContext);
+            afterSendMessage();
+        } else {
+            showDirectBotChatWarning = true;
+        }
+    }
+
+    function keyDown(e: KeyboardEvent) {
+        if (e.key === "Enter" && !e.shiftKey) {
+            if (directBot) {
+                if (!showCommandSelector && !messageIsEmpty) {
+                    sendADirectBotMessage(directBot);
+                } else if (!commandSent && botState.selectedCommand === undefined) {
+                    showDirectBotChatWarning = true;
+                }
+                e.preventDefault();
+            } else {
+                if (!showCommandSelector && $enterSend) {
+                    e.preventDefault();
+                    sendMessage();
+                }
+            }
+            commandSent = false;
+        }
+    }
+
+    function formatUserMentions(text: string): string {
+        return text.replace(userIdMentionRegex, (match, p1) => {
+            const u = $allUsersStore.get(p1);
+            if (u?.username !== undefined) {
+                const username = u.username;
+                return `@${username}`;
+            }
+            return match;
+        });
+    }
+
+    function formatUserGroupMentions(text: string): string {
+        return text.replace(userGroupMentionRegex, (match, p1) => {
+            const u = $selectedCommunityUserGroupsStore.get(Number(p1));
+            if (u !== undefined) {
+                return `@${u.name}`;
+            }
+            return match;
+        });
+    }
+
+    // replace anything of the form @username with @UserId(xyz) or @UserGroup(abc) where
+    // xyz is the userId or abc is the user group id
+    // if we can't find the user or user group just leave it as is
+    function expandMentions(text: string): [string | undefined, User[], boolean] {
+        let mentionedMap = new Map<string, User>();
+        let expandedText = text.replace(/@(\w+)/g, (match, p1) => {
+            const userOrGroup = client.lookupUserForMention(p1, false);
+            if (userOrGroup !== undefined) {
+                switch (userOrGroup.kind) {
+                    case "user_group":
+                        return `@UserGroup(${userOrGroup.id})`;
+                    case "everyone":
+                        return "@everyone";
+                    default:
+                        mentionedMap.set(userOrGroup.userId, userOrGroup);
+                        return `@UserId(${userOrGroup.userId})`;
+                }
+            } else {
+                return match;
+            }
+        });
+
+        let mentioned = Array.from(mentionedMap, ([_, user]) => user);
+
+        return [expandedText, mentioned, containsMarkdown];
+    }
+
+    function parseCommands(txt: string): boolean {
+        if (/snow|xmas|christmas|noel/.test(txt)) {
+            $snowing = true;
+        }
+        return false;
+    }
+
+    function sendMessage() {
+        if (showCommandSelector || messageIsEmpty) return;
+
+        const txt = editor?.getMarkdown() ?? "";
+
+        if (!parseCommands(txt)) {
+            const [text, mentioned, blockLevelMarkdown] = expandMentions(txt);
+            // Mentions picked from the mention picker are stored as nodes within the editor and
+            // are already in the `@UserId(xyz)` form, so `expandMentions` misses them - collect
+            // them from the editor itself
+            const mentionedUserIds = new Set(mentioned.map((u) => u.userId));
+            for (const user of editor?.getMentionedUsers() ?? []) {
+                if (!mentionedUserIds.has(user.userId)) {
+                    mentioned.push(user);
+                }
+            }
+            onSendMessage([text, mentioned, blockLevelMarkdown]);
+        }
+
+        afterSendMessage();
+    }
+
+    function afterSendMessage() {
+        editor?.clear();
+        onSetTextContent();
+
+        onStopTyping();
+
+        // After sending a message we must force a new textbox instance to be created, otherwise on iPhone the
+        // predictive text doesn't notice the text has been cleared so the suggestions don't make sense.
+        textboxId = Symbol();
+        tick().then(() => editor?.focus());
+    }
+
+    function detectMarkdown(text: string | null) {
+        if (!text) return false;
+
+        // a few regexes to detect various block level markdown elements (possibly incomplete)
+        const headerRegex = /^(?:\#{1,6}\s+)/m;
+        const tableRegex = /(?:\|(?:[^\r\n\|\\]|\\.)*\|)+/;
+        const bulletedListRegex = /^(?:\s*[-\*+]\s+)/m;
+        const numberedListRegex = /^(?:\s*\d+\.\s+)/m;
+        const blockquoteRegex = /^(?:\s*>)/m;
+        const codeBlockRegex = /(?:^```[\s\S]*?^```)/m;
+        const regexList = [
+            headerRegex,
+            tableRegex,
+            bulletedListRegex,
+            numberedListRegex,
+            blockquoteRegex,
+            codeBlockRegex,
+        ];
+        const result = regexList.some((regex) => regex.test(text));
+        return result;
+    }
+
+    let directChatBotId = $derived(client.directChatWithBot(chat));
+    let directBot = $derived(
+        directChatBotId ? botState.externalBots.get(directChatBotId) : undefined,
+    );
+    let textboxEmpty = $derived((textContent?.trim() ?? "").length === 0);
+    let messageIsEmpty = $derived(textboxEmpty && attachment === undefined);
+    let canSendAny = $derived(!$anonUserStore && client.canSendMessage(chat.id, mode));
+    let permittedMessages = $derived(client.permittedMessages(chat.id, mode));
+    let canEnterText = $derived(
+        (permittedMessages.get("text") ?? false) ||
+            editingEvent !== undefined ||
+            attachment !== undefined,
+    );
+    let canAddImageOrVideo = $derived(
+        permittedMessages.get("image") || permittedMessages.get("video"),
+    );
+    let frozen = $derived(client.isChatOrCommunityFrozen(chat, $selectedCommunitySummaryStore));
+
+    $effect(() => {
+        if (editor) {
+            if (editingEvent && editingEvent.index !== previousEditingEvent?.index) {
+                if (editingEvent.event.content.kind === "text_content") {
+                    editor.setContent(
+                        formatUserGroupMentions(
+                            formatUserMentions(
+                                client.stripLinkDisabledMarker(editingEvent.event.content.text),
+                            ),
+                        ),
+                    );
+                } else if ("caption" in editingEvent.event.content) {
+                    editor.setContent(editingEvent.event.content.caption ?? "");
+                }
+                previousEditingEvent = editingEvent;
+                containsMarkdown = detectMarkdown(editor.getMarkdown());
+            } else {
+                const text = textContent ?? "";
+                // Only set the textbox text when required rather than every time, because doing so sets the focus back to
+                // the start of the textbox on some devices.
+                if (editor.getMarkdown() !== text) {
+                    editor.setContent(text);
+                    containsMarkdown = detectMarkdown(text);
+                }
+            }
+        }
+
+        if (editingEvent === undefined) {
+            previousEditingEvent = undefined;
+        }
+    });
+
+    trackedEffect("attachment-focus", () => {
+        if (attachment !== undefined || replyingTo !== undefined) {
+            editor?.focus();
+        }
+    });
+
+    trackedEffect("screen-width-focus", () => {
+        if ($screenWidth === ScreenWidth.Large) {
+            editor?.focus();
+        }
+    });
+
+    let placeholder = $derived(
+        !canEnterText
+            ? i18nKey("sendTextDisabled")
+            : attachment !== undefined
+              ? i18nKey("enterCaption")
+              : directChatBotId
+                ? i18nKey("bots.direct.placeholder")
+                : i18nKey("enterMessage"),
+    );
+</script>
+
+<svelte:window onpopstate={popStateHandler} />
+
+{#if showDirectBotChatWarning}
+    <AlertBoxModal
+        onClose={() => (showDirectBotChatWarning = false)}
+        title={i18nKey("bots.direct.warningTitle")}
+        warning={i18nKey("bots.direct.warning")} />
+{/if}
+
+{#if botState.selectedCommand && messageContextsEqual(botState.showingBuilder, messageContext)}
+    <CommandBuilder
+        {messageContext}
+        onCommandSent={() => cancelCommandSelector(true)}
+        onCancel={() => cancelCommandSelector(false)}
+        command={botState.selectedCommand} />
+{/if}
+
+{#if showCommandSelector}
+    <CommandSelector
+        selectedBotId={directChatBotId}
+        {messageContext}
+        {mode}
+        onCommandSent={() => cancelCommandSelector(true)}
+        onNoMatches={() => cancelCommandSelector(false)}
+        onCancel={() => cancelCommandSelector(false)} />
+{/if}
+
+{#if !$anonUserStore}
+    <Container
+        overflow={"visible"}
+        gap={"sm"}
+        mainAxisAlignment={"spaceBetween"}
+        crossAxisAlignment={activeStream !== undefined ? "center" : "end"}
+        background={ColourVars.background0}
+        padding={["zero", "md", inputTrayMode !== "closed" ? "sm" : "zero"]}>
+        {#if frozen}
+            <div class="frozen">
+                <Translatable resourceKey={i18nKey("chatFrozen")} />
+            </div>
+        {:else if blocked}
+            <div class="blocked">
+                <Translatable resourceKey={i18nKey("userIsBlocked")} />
+            </div>
+        {:else if (preview || lapsed) && chat.kind !== "direct_chat"}
+            <PreviewFooter {lapsed} {chat} />
+        {:else if externalContent}
+            <Row crossAxisAlignment={"center"} gap={"md"}>
+                <Alert size={"1.5rem"} color={"var(--warning)"} />
+                <BodySmall colour={"textSecondary"}>
+                    <Translatable resourceKey={i18nKey("externalContent.disclaimer")} />
+                </BodySmall>
+            </Row>
+        {:else if !canSendAny}
+            <div class="disabled">
+                <Translatable
+                    resourceKey={i18nKey(mode === "thread" ? "readOnlyThread" : "readOnlyChat")} />
+            </div>
+        {:else if $throttleDeadline > 0}
+            <ThrottleCountdown deadline={$throttleDeadline} />
+        {:else}
+            {#if activeStream !== undefined}
+                <RecordingWaveform stream={activeStream} />
+            {:else if canEnterText}
+                {#key textboxId}
+                    <div
+                        class="message_entry_wrapper"
+                        class:has_reply={!!replyingTo}
+                        class:has_attachment={!!attachment}
+                        class:is_editing={editingEvent !== undefined}>
+                        {#if replyingTo}
+                            <ReplyingTo readonly {replyingTo} {user} {onCancelReply} />
+                        {/if}
+                        {#if !editingEvent && attachment !== undefined}
+                            <DraftMediaMessage {onRemoveAttachment} content={attachment} />
+                        {/if}
+                        {#if editingEvent !== undefined}
+                            <Row
+                                height={{ size: "1rem" }}
+                                crossAxisAlignment="center"
+                                supplementalClass="editing-title">
+                                <BodySmall colour="textSecondary">
+                                    <Translatable resourceKey={i18nKey("Editing...")} />
+                                </BodySmall>
+                                <IconButton size={"sm"} padding={"md"} onclick={onCancelEdit}>
+                                    {#snippet icon()}
+                                        <Close color={ColourVars.textSecondary} />
+                                    {/snippet}
+                                </IconButton>
+                            </Row>
+                        {/if}
+                        <Container
+                            bind:ref={messageEntryElement}
+                            gap="sm"
+                            minHeight="3.5rem"
+                            maxHeight="calc(var(--vh, 1vh) * 50)"
+                            padding="xs"
+                            overflow="visible"
+                            crossAxisAlignment="center"
+                            mainAxisAlignment="spaceBetween"
+                            supplementalClass="message_entry_text_box">
+                            {#if inputTrayMode !== "emoji_gif_selection"}
+                                <IconButton
+                                    onclick={toggleEmojiPicker}
+                                    padding={["sm", "zero", "md", "sm"]}
+                                    size={"md"}>
+                                    {#snippet icon()}
+                                        <StickerEmoji color={ColourVars.textPlaceholder} />
+                                    {/snippet}
+                                </IconButton>
+                            {:else}
+                                <IconButton
+                                    onclick={showKeyboard}
+                                    padding={["sm", "zero", "md", "sm"]}
+                                    size={"md"}>
+                                    {#snippet icon()}
+                                        <Keyboard color={ColourVars.textPlaceholder} />
+                                    {/snippet}
+                                </IconButton>
+                            {/if}
+
+                            <div class="textbox">
+                                <RichTextEditor
+                                    bind:this={editor}
+                                    bind:empty={editorEmpty}
+                                    placeholder={interpolate($_, placeholder)}
+                                    members={$selectedChatMembersStore}
+                                    {onPaste}
+                                    onfocus={keyboardFocus}
+                                    onKeydown={keyDown}
+                                    oninput={onInput}>
+                                    {#snippet mentionPicker(args)}
+                                        <MentionPicker
+                                            supportsUserGroups
+                                            offset={messageEntryHeight}
+                                            onMention={args.onMention}
+                                            prefix={args.query} />
+                                    {/snippet}
+                                    {#snippet emojiPicker(args)}
+                                        <EmojiAutocompleter
+                                            offset={messageEntryHeight}
+                                            onClose={args.onClose}
+                                            onSelect={args.onSelect}
+                                            query={args.query} />
+                                    {/snippet}
+                                </RichTextEditor>
+                            </div>
+
+                            {#if editingEvent === undefined}
+                                <Container
+                                    padding={["zero", "sm", "zero", "zero"]}
+                                    width={"hug"}
+                                    gap={"md"}>
+                                    <IconButton
+                                        onclick={toggleAttachments}
+                                        padding={["sm", "zero", "md", "zero"]}
+                                        size={"md"}>
+                                        {#snippet icon()}
+                                            <div
+                                                class:open={inputTrayMode === "attachments" &&
+                                                    !keyboard.visible}
+                                                class="drawer_trigger">
+                                                <PlusCircle color={ColourVars.textPlaceholder} />
+                                            </div>
+                                        {/snippet}
+                                    </IconButton>
+
+                                    {#if messageIsEmpty && canAddImageOrVideo}
+                                        <FileAttacher {onFileSelected}>
+                                            {#snippet children(onClick)}
+                                                <IconButton
+                                                    onclick={onClick}
+                                                    padding={["sm", "zero", "md", "zero"]}
+                                                    size={"md"}>
+                                                    {#snippet icon()}
+                                                        <Camera
+                                                            color={ColourVars.textPlaceholder} />
+                                                    {/snippet}
+                                                </IconButton>
+                                            {/snippet}
+                                        </FileAttacher>
+                                    {/if}
+                                </Container>
+                            {/if}
+                        </Container>
+                    </div>
+                {/key}
+            {:else}
+                <div class="textbox">
+                    <Translatable resourceKey={placeholder} />
+                </div>
+            {/if}
+
+            {#if directChatBotId === undefined}
+                <Container crossAxisAlignment={"center"} gap={"xs"} width={"hug"}>
+                    {#if editingEvent === undefined}
+                        {#if permittedMessages.get("audio") && messageIsEmpty && audioMimeType !== undefined && audioSupported && (activeStream !== undefined || editorEmpty)}
+                            <AudioAttacher
+                                mimeType={audioMimeType}
+                                bind:activeStream
+                                bind:supported={audioSupported}
+                                onAudioCaptured={onFileSelected} />
+                        {:else if canEnterText}
+                            <IconButton
+                                padding={"md"}
+                                mode={"primary"}
+                                size={"lg"}
+                                onclick={sendMessage}>
+                                {#snippet icon(color)}
+                                    <Send {color} />
+                                {/snippet}
+                            </IconButton>
+                        {/if}
+                    {:else}
+                        <IconButton
+                            padding={"md"}
+                            mode={"primary"}
+                            size={"lg"}
+                            onclick={sendMessage}>
+                            {#snippet icon(color)}
+                                <Check {color} />
+                            {/snippet}
+                        </IconButton>
+                    {/if}
+                </Container>
+            {/if}
+        {/if}
+    </Container>
+
+    <!-- svelte-ignore a11y_interactive_supports_focus -->
+    <div
+        role="dialog"
+        class={`input_tray ${inputTrayVisible ? "visible" : ""}`}
+        onmousedown={inputTrayFocusIn}
+        onfocusout={inputTrayFocusOut}
+        style:height={`${
+            inputTrayMode !== "closed"
+                ? keyboard.height + (inputTrayMode === "emoji_gif_search" ? 200 : 0)
+                : 0
+        }px`}
+        style:visibility={inputTrayMode !== "closed" ? "visible" : "hidden"}>
+        {#if inputTrayMode === "emoji_gif_selection" || inputTrayMode === "emoji_gif_search"}
+            <EmojiOrGif
+                empty={textboxEmpty}
+                ctx={messageContext}
+                onEmojiSelected={insertEmoji}
+                onBackspace={backspace}
+                onClose={toggleEmojiPicker} />
+        {/if}
+
+        {#if inputTrayMode === "attachments"}
+            <CustomMessageTrigger
+                {permittedMessages}
+                {onTokenTransfer}
+                {onCreatePrizeMessage}
+                {onCreateP2PSwapMessage}
+                {onMakeMeme}
+                {onFileSelected}
+                {messageContext}
+                open={true} />
+        {/if}
+    </div>
+{/if}
+
+<style lang="scss">
+    .message_entry_wrapper {
+        width: 100%;
+        // overflow: auto;
+        border-radius: var(--rad-huge);
+        background-color: var(--text-tertiary);
+        transition: border-radius 200ms ease-out;
+
+        &.has_reply,
+        &.has_attachment {
+            border-radius: var(--rad-xl) var(--rad-xl) var(--rad-xxl) var(--rad-xxl);
+        }
+
+        &.is_editing {
+            border-radius: var(--rad-xl);
+        }
+    }
+
+    .drawer_trigger {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        transition: transform 200ms ease-in-out;
+        transform-origin: 50%;
+        &.open {
+            transform: rotate(135deg);
+        }
+    }
+    .textbox {
+        outline: none;
+        border: 0;
+        overflow-x: hidden;
+        padding: var(--sp-md) 0 var(--sp-md) 0;
+        // overflow-y: visible;
+        user-select: text;
+        overflow-wrap: anywhere;
+        flex: auto;
+        min-width: 0;
+        font-size: var(--typo-chatText-sz);
+        line-height: var(--typo-chatText-lh);
+        color: var(--text-primary);
+
+        &.recording {
+            display: none;
+        }
+    }
+
+    .blocked,
+    .frozen,
+    .disabled {
+        height: 42px;
+        color: var(--text-secondary);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+    }
+
+    .input_tray {
+        height: 0;
+        width: 100%;
+        padding-bottom: 0;
+        overflow: hidden;
+        background: var(--background-1);
+        border-radius: var(--rad-lg) var(--rad-lg) 0 0;
+        transition:
+            height 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+            padding-bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+
+        &.visible {
+            padding-bottom: var(--device-nav-height);
+        }
+    }
+
+    :global {
+        .editing-title {
+            position: relative;
+            z-index: 1;
+            top: 0.65rem;
+            padding-left: 2.75rem !important;
+        }
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/home/message/MessageMetadata.svelte b/frontend/app/src/mobile/features/chats/core/MessageMetadata.svelte
similarity index 97%
rename from frontend/app/src/components_mobile/home/message/MessageMetadata.svelte
rename to frontend/app/src/mobile/features/chats/core/MessageMetadata.svelte
index a90a3de6d3..14b60f7f68 100644
--- a/frontend/app/src/components_mobile/home/message/MessageMetadata.svelte
+++ b/frontend/app/src/mobile/features/chats/core/MessageMetadata.svelte
@@ -14,8 +14,8 @@
     import AlertCircleOutline from "svelte-material-icons/AlertCircleOutline.svelte";
     import DeletedIcon from "svelte-material-icons/DeleteOutline.svelte";
     import Pin from "svelte-material-icons/Pin.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import DisappearsAt from "../DisappearsAt.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import DisappearsAt from "./DisappearsAt.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/mobile/features/chats/core/MessagePreview.svelte b/frontend/app/src/mobile/features/chats/core/MessagePreview.svelte
new file mode 100644
index 0000000000..8b5403a4f6
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/MessagePreview.svelte
@@ -0,0 +1,121 @@
+<script lang="ts">
+    import { Avatar, Body } from "component-lib";
+    import {
+        allUsersStore,
+        currentUserIdStore,
+        OpenChat,
+        selectedChatWebhooksStore,
+        selectedCommunityMembersStore,
+        type RehydratedMessagePreview,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import ChatMessageContent from "@src/mobile/features/chats/core/content/ChatMessageContent.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        preview: RehydratedMessagePreview;
+        me: boolean;
+        intersecting: boolean;
+    }
+
+    const { preview, me, intersecting }: Props = $props();
+
+    let senderIsMe = $derived(preview.message.sender === $currentUserIdStore);
+    let displayName = $derived(
+        senderIsMe
+            ? client.toTitleCase($_("you"))
+            : client.getDisplayName(
+                  preview.message.sender,
+                  $selectedCommunityMembersStore,
+                  $selectedChatWebhooksStore,
+              ),
+    );
+</script>
+
+<a class="preview_link" href={preview.url}>
+    <div
+        class="wrapper"
+        class:me
+        class:sender_is_me={senderIsMe}
+        class:p2pSwap={preview.message.content.kind === "p2p_swap_content"}>
+        <div class="title">
+            <Avatar
+                url={client.userAvatarUrl($allUsersStore.get(preview.message.sender))}
+                size={"xs"} />
+            <Body fontWeight="bold" colour={me ? "textPrimary" : "textSecondary"}>
+                {displayName}
+            </Body>
+        </div>
+        <div class="inert">
+            <ChatMessageContent
+                me={senderIsMe}
+                readonly
+                messageContext={{
+                    chatId: preview.chatId,
+                    threadRootMessageIndex: preview.threadRootMessageIndex,
+                }}
+                {intersecting}
+                messageId={preview.message.messageId}
+                messageIndex={preview.message.messageIndex}
+                senderId={preview.message.sender}
+                edited={preview.message.edited}
+                fill={false}
+                failed={false}
+                blockLevelMarkdown
+                truncate={true}
+                reply={false}
+                isPreview={true}
+                content={preview.message.content}
+                ogPreviews={preview.message.ogPreviews} />
+        </div>
+    </div>
+</a>
+
+<style lang="scss">
+    .preview_link {
+        width: 100%;
+    }
+    .wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: var(--sp-xs);
+        width: 100%;
+        overflow: hidden;
+        padding: var(--sp-sm) var(--sp-xs) var(--sp-xs);
+
+        &.me {
+            &.sender_is_me {
+                // TODO bgs are same as for replies, reduce duplication
+                background-color: var(--background-2);
+            }
+
+            &:not(.sender_is_me) {
+                background-color: var(--primary-muted);
+            }
+        }
+
+        &:not(.me) {
+            background-color: var(--background-1);
+        }
+
+        .inert {
+            pointer-events: none;
+        }
+
+        &.p2pSwap {
+            max-width: 350px;
+        }
+    }
+
+    .title {
+        gap: $sp3;
+        display: flex;
+        padding: 0 var(--sp-sm);
+
+        > * {
+            flex: 1;
+        }
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/home/MessageRenderer.svelte b/frontend/app/src/mobile/features/chats/core/MessageRenderer.svelte
similarity index 95%
rename from frontend/app/src/components_mobile/home/MessageRenderer.svelte
rename to frontend/app/src/mobile/features/chats/core/MessageRenderer.svelte
index e926eb8bd5..2c71387255 100644
--- a/frontend/app/src/components_mobile/home/MessageRenderer.svelte
+++ b/frontend/app/src/mobile/features/chats/core/MessageRenderer.svelte
@@ -3,8 +3,8 @@
     import type { TextContent as TextContentType } from "@client";
     import { type Snippet } from "svelte";
     import Close from "svelte-material-icons/Close.svelte";
-    import { rtlStore } from "../../stores/rtl";
-    import TextContent from "./TextContent.svelte";
+    import { rtlStore } from "@src/stores/rtl";
+    import TextContent from "@src/mobile/features/chats/core/content/TextContent.svelte";
 
     interface Props {
         replyView: Snippet<[Snippet?]>;
diff --git a/frontend/app/src/mobile/features/chats/core/P2PSwapProgress.svelte b/frontend/app/src/mobile/features/chats/core/P2PSwapProgress.svelte
new file mode 100644
index 0000000000..7ea9ed71a3
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/P2PSwapProgress.svelte
@@ -0,0 +1,139 @@
+<script lang="ts">
+    import { Column, Sheet, Subtitle } from "component-lib";
+    import type { OpenChat, P2PSwapContent } from "@client";
+    import { getContext } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import ProgressSteps, { type Result, type Step } from "./ProgressSteps.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    const client = getContext<OpenChat>("client");
+    const labelPrefix = "p2pSwap.progress.";
+
+    interface Props {
+        senderId: string;
+        content: P2PSwapContent;
+        onClose: () => void;
+    }
+
+    let { senderId, content, onClose }: Props = $props();
+
+    let steps: Step[] = $state([
+        { label: "open", status: "done" },
+        { label: "waiting", status: "todo" },
+    ]);
+    let result = $state<Result>(undefined);
+    let token0TxnOut: string | undefined = $state(undefined);
+    let token1TxnIn: string | undefined = $state(undefined);
+    let token1TxnOut: string | undefined = $state(undefined);
+    let user1: string | undefined = $state(undefined);
+
+    function toUser(userId: string): string {
+        return `@UserId(${userId})`;
+    }
+    $effect(() => {
+        if (content.status.kind === "p2p_swap_cancelled") {
+            if (content.status.token0TxnOut === undefined) {
+                steps = [
+                    { label: "open", status: "done" },
+                    { label: "cancelled_pending", status: "doing" },
+                ];
+            } else {
+                steps = [
+                    { label: "open", status: "done" },
+                    { label: "refunded", status: "done" },
+                ];
+                result = { label: "cancelled", status: "failed" };
+                token0TxnOut = client.buildTransactionUrl(
+                    content.status.token0TxnOut,
+                    content.token0.ledger,
+                );
+            }
+        } else if (content.status.kind === "p2p_swap_expired") {
+            if (content.status.token0TxnOut === undefined) {
+                steps = [
+                    { label: "open", status: "done" },
+                    { label: "expired_pending", status: "doing" },
+                ];
+            } else {
+                steps = [
+                    { label: "open", status: "done" },
+                    { label: "refunded", status: "done" },
+                ];
+                result = { label: "expired", status: "failed" };
+                token0TxnOut = client.buildTransactionUrl(
+                    content.status.token0TxnOut,
+                    content.token0.ledger,
+                );
+            }
+        } else if (content.status.kind === "p2p_swap_reserved") {
+            steps = [
+                { label: "open", status: "done" },
+                { label: "reserved", status: "doing" },
+            ];
+            user1 = toUser(content.status.reservedBy);
+        } else if (content.status.kind === "p2p_swap_accepted") {
+            steps = [
+                { label: "open", status: "done" },
+                { label: "accepting", status: "done" },
+                { label: "accepted", status: "done" },
+                { label: "swapping", status: "doing" },
+            ];
+            user1 = toUser(content.status.acceptedBy);
+            token1TxnIn = client.buildTransactionUrl(
+                content.status.token1TxnIn,
+                content.token1.ledger,
+            );
+        } else if (content.status.kind === "p2p_swap_completed") {
+            steps = [
+                { label: "open", status: "done" },
+                { label: "accepting", status: "done" },
+                { label: "accepted", status: "done" },
+                { label: "swapped", status: "done" },
+            ];
+            result = { label: "completed", status: "done" };
+            user1 = toUser(content.status.acceptedBy);
+            token1TxnIn = client.buildTransactionUrl(
+                content.status.token1TxnIn,
+                content.token1.ledger,
+            );
+            token0TxnOut = client.buildTransactionUrl(
+                content.status.token0TxnOut,
+                content.token0.ledger,
+            );
+            token1TxnOut = client.buildTransactionUrl(
+                content.status.token0TxnOut,
+                content.token0.ledger,
+            );
+        }
+    });
+    let fullSteps = $derived(
+        steps.map((step) => ({ label: labelPrefix + step.label, status: step.status })),
+    );
+    let fullResult = $derived(
+        result !== undefined
+            ? { label: labelPrefix + result.label, status: result.status }
+            : undefined,
+    );
+    let labelValues = $derived({
+        token0: content.token0.symbol,
+        token1: content.token1.symbol,
+        amount0: client.formatTokens(content.token0Amount, content.token0.decimals),
+        amount1: client.formatTokens(content.token1Amount, content.token1.decimals),
+        user0: toUser(senderId),
+        user1,
+        token0TxnIn: client.buildTransactionUrl(content.token0TxnIn, content.token0.ledger),
+        token0TxnOut,
+        token1TxnIn,
+        token1TxnOut,
+    });
+    let title = $derived(i18nKey("p2pSwap.swapTokenTo", labelValues));
+</script>
+
+<Sheet onDismiss={onClose}>
+    <Column gap={"lg"} padding={"lg"}>
+        <Subtitle fontWeight={"bold"}>
+            <Translatable resourceKey={title} />
+        </Subtitle>
+        <ProgressSteps steps={fullSteps} {labelValues} result={fullResult} />
+    </Column>
+</Sheet>
diff --git a/frontend/app/src/components_mobile/home/PermissionsRoleSlider.svelte b/frontend/app/src/mobile/features/chats/core/PermissionsRoleSlider.svelte
similarity index 98%
rename from frontend/app/src/components_mobile/home/PermissionsRoleSlider.svelte
rename to frontend/app/src/mobile/features/chats/core/PermissionsRoleSlider.svelte
index 4fbc6b470c..1dc7c2ca2e 100644
--- a/frontend/app/src/components_mobile/home/PermissionsRoleSlider.svelte
+++ b/frontend/app/src/mobile/features/chats/core/PermissionsRoleSlider.svelte
@@ -10,7 +10,7 @@
     } from "@client";
     import { _ } from "svelte-i18n";
     import Save from "svelte-material-icons/ContentSaveOutline.svelte";
-    import Translatable from "../Translatable.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
 
     interface Props {
         height: SizeMode;
diff --git a/frontend/app/src/mobile/features/chats/core/PreviewFooter.svelte b/frontend/app/src/mobile/features/chats/core/PreviewFooter.svelte
new file mode 100644
index 0000000000..b73c7837ce
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/PreviewFooter.svelte
@@ -0,0 +1,100 @@
+<script lang="ts">
+    import { groupPreviewState } from "@src/utils/preview.svelte";
+    import { Caption, ColourVars, CommonButton, Container, Sheet } from "component-lib";
+    import {
+        type EnhancedAccessGate,
+        isCompositeGate,
+        isLeafGate,
+        isLocked,
+        isUniquePersonGate,
+        type MultiUserChat,
+        type OpenChat,
+    } from "@client";
+    import { getContext } from "svelte";
+    import ArrowLeft from "svelte-material-icons/ArrowLeft.svelte";
+    import Enter from "svelte-material-icons/LocationEnter.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import GateCheckFailed from "@src/mobile/features/access/AccessGateCheckFailed.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        chat: MultiUserChat;
+        lapsed: boolean;
+    }
+
+    let { chat, lapsed }: Props = $props();
+
+    let gates = $derived(client.accessGatesForChat(chat));
+    let flattenedGates = $derived.by<EnhancedAccessGate[]>(() => {
+        return gates.flatMap((g) => {
+            if (isCompositeGate(g)) {
+                // Unique person (DecideAI) verification is suspended - drop it from the join flow.
+                return g.gates
+                    .filter((l) => !isUniquePersonGate(l))
+                    .map((l) => ({
+                        ...l,
+                        level: g.level,
+                        expiry: g.expiry,
+                        collectionName: g.collectionName,
+                    }));
+            }
+            if (isLeafGate(g)) {
+                return isUniquePersonGate(g) ? [] : [g];
+            }
+            return [];
+        });
+    });
+    let hasGates = $derived(flattenedGates.length > 0);
+    let locked = $derived(gates.some((g) => isLocked(g)));
+</script>
+
+<!-- TODO check this section, in designs it was from edge to edge, but it's not rendered as such -->
+<Container
+    gap={"sm"}
+    direction={"vertical"}
+    padding={"lg"}
+    borderRadius="md"
+    background={ColourVars.background1}>
+    <Container crossAxisAlignment={"center"}>
+        <Container>
+            <CommonButton
+                onClick={() => groupPreviewState.cancelPreview(client)}
+                size={"small_text"}>
+                {#snippet icon(color, size)}
+                    <ArrowLeft {color} {size} />
+                {/snippet}
+                <Translatable resourceKey={i18nKey("back")} />
+            </CommonButton>
+        </Container>
+        <CommonButton
+            mode={"active"}
+            loading={groupPreviewState.joining !== undefined}
+            disabled={locked || groupPreviewState.joining !== undefined}
+            onClick={() => groupPreviewState.joinGroup(client)}>
+            {#snippet icon(color, size)}
+                <Enter {color} {size} />
+            {/snippet}
+            <Translatable
+                resourceKey={locked
+                    ? i18nKey("access.lockedGate", undefined, chat.level, true)
+                    : lapsed
+                      ? i18nKey("access.lapsed.rejoin", undefined, chat.level, true)
+                      : i18nKey("joinGroup", undefined, chat.level, true)} />
+        </CommonButton>
+    </Container>
+    {#if hasGates}
+        <Container padding={["zero", "sm"]} mainAxisAlignment={"end"}>
+            <Caption width={"hug"} fontWeight={"bold"} colour={"textSecondary"}>
+                <Translatable resourceKey={i18nKey("Access gates enabled")} />
+            </Caption>
+        </Container>
+    {/if}
+</Container>
+
+{#if groupPreviewState.gateCheckFailed.length > 0}
+    <Sheet onDismiss={() => groupPreviewState.reset()}>
+        <GateCheckFailed onClose={() => groupPreviewState.reset()} />
+    </Sheet>
+{/if}
diff --git a/frontend/app/src/components_mobile/PreviewPlaceholder.svelte b/frontend/app/src/mobile/features/chats/core/PreviewPlaceholder.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/PreviewPlaceholder.svelte
rename to frontend/app/src/mobile/features/chats/core/PreviewPlaceholder.svelte
diff --git a/frontend/app/src/components_mobile/home/PrivatePreview.svelte b/frontend/app/src/mobile/features/chats/core/PrivatePreview.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/PrivatePreview.svelte
rename to frontend/app/src/mobile/features/chats/core/PrivatePreview.svelte
diff --git a/frontend/app/src/mobile/features/chats/core/ProgressStep.svelte b/frontend/app/src/mobile/features/chats/core/ProgressStep.svelte
new file mode 100644
index 0000000000..de34466d60
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/ProgressStep.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+    import { Body, BodySmall, ColourVars, Container, Row } from "component-lib";
+    import type { ResourceKey } from "@client";
+    import { _ } from "svelte-i18n";
+    import DoneIcon from "svelte-material-icons/CheckCircle.svelte";
+    import FailedIcon from "svelte-material-icons/CloseCircle.svelte";
+    import { interpolate } from "@src/i18n/i18n";
+    import { currentTheme } from "@src/theme/themes";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import Spinner from "@src/mobile/ui/icons/Spinner.svelte";
+
+    interface Props {
+        label: ResourceKey;
+        status: string;
+        step?: number;
+    }
+
+    let { label, status, step = 0 }: Props = $props();
+
+    const colours: Record<string, string> = {
+        todo: ColourVars.textPrimary,
+        done: ColourVars.success,
+        failed: ColourVars.error,
+    };
+</script>
+
+<Row padding={["sm", "zero"]} gap={"md"} crossAxisAlignment={"center"}>
+    {#if status === "doing"}
+        <div class="spinner">
+            <Spinner
+                size="1.6rem"
+                strokeWidth={"2px"}
+                foregroundColour={$currentTheme.toast.success.bg}
+                backgroundColour={"rgba(255,255,255,0.5)"}></Spinner>
+            <div class="number">
+                <BodySmall align={"center"} width={"hug"}>
+                    {step + 1}
+                </BodySmall>
+            </div>
+        </div>
+    {:else if status === "overall-done"}
+        <DoneIcon size="1.6rem" color={ColourVars.success} />
+    {:else if status === "overall-failed"}
+        <FailedIcon size="1.6rem" color={ColourVars.error} />
+    {:else}
+        <Container
+            borderColour={colours[status] ?? ColourVars.textPrimary}
+            borderWidth={"thick"}
+            borderRadius={"circle"}
+            mainAxisAlignment={"center"}
+            crossAxisAlignment={"center"}
+            width={{ size: "1.5rem" }}
+            height={{ size: "1.5rem" }}>
+            <BodySmall width={"hug"}>
+                {step + 1}
+            </BodySmall>
+        </Container>
+    {/if}
+    <Body>
+        <Markdown text={interpolate($_, label)} />
+    </Body>
+</Row>
+
+<style lang="scss">
+    .spinner {
+        position: relative;
+        height: 24px;
+        width: 24px;
+        .number {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/chats/core/ProgressSteps.svelte b/frontend/app/src/mobile/features/chats/core/ProgressSteps.svelte
new file mode 100644
index 0000000000..5248bb0307
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/ProgressSteps.svelte
@@ -0,0 +1,57 @@
+<script module lang="ts">
+    export type Status = "done" | "doing" | "todo" | "failed";
+    export type OverallStatus = "done" | "failed";
+
+    export type Step = {
+        status: Status;
+        label: string;
+    };
+
+    export type Result =
+        | {
+              status: OverallStatus;
+              label: string;
+          }
+        | undefined;
+</script>
+
+<script lang="ts">
+    import { Column } from "component-lib";
+    import type { InterpolationValues } from "@client";
+    import { flip } from "svelte/animate";
+    import { fade } from "svelte/transition";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Progress from "@src/mobile/shared/Progress.svelte";
+    import ProgressStep from "./ProgressStep.svelte";
+
+    interface Props {
+        steps: Step[];
+        result: Result;
+        labelValues?: InterpolationValues | undefined;
+        percent?: number | undefined;
+    }
+
+    let { steps, result, labelValues = undefined, percent = undefined }: Props = $props();
+</script>
+
+<Column>
+    {#each steps as step, i ("step" + i)}
+        <div in:fade={{ duration: 500 }} animate:flip={{ duration: 500 }}>
+            <ProgressStep
+                label={i18nKey(steps[i].label, labelValues)}
+                step={i}
+                status={step.status} />
+        </div>
+    {/each}
+    {#if result !== undefined}
+        <div>
+            <ProgressStep
+                label={i18nKey(result.label, labelValues)}
+                status={"overall-" + result.status} />
+        </div>
+    {/if}
+</Column>
+
+{#if result === undefined && percent !== undefined}
+    <Progress size={"8px"} {percent} />
+{/if}
diff --git a/frontend/app/src/components_mobile/home/message/Reaction.svelte b/frontend/app/src/mobile/features/chats/core/Reaction.svelte
similarity index 98%
rename from frontend/app/src/components_mobile/home/message/Reaction.svelte
rename to frontend/app/src/mobile/features/chats/core/Reaction.svelte
index 9bcf419a0f..8224cdc2d4 100644
--- a/frontend/app/src/components_mobile/home/message/Reaction.svelte
+++ b/frontend/app/src/mobile/features/chats/core/Reaction.svelte
@@ -7,7 +7,7 @@
     import { allUsersStore, currentUserIdStore, customEmojis, OpenChat } from "@client";
     import { getContext, onMount } from "svelte";
     import { _ } from "svelte-i18n";
-    import Translatable from "../../Translatable.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/components_mobile/home/message/Reactions.svelte b/frontend/app/src/mobile/features/chats/core/Reactions.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/message/Reactions.svelte
rename to frontend/app/src/mobile/features/chats/core/Reactions.svelte
diff --git a/frontend/app/src/components_mobile/home/RecordingWaveform.svelte b/frontend/app/src/mobile/features/chats/core/RecordingWaveform.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/RecordingWaveform.svelte
rename to frontend/app/src/mobile/features/chats/core/RecordingWaveform.svelte
diff --git a/frontend/app/src/mobile/features/chats/core/ReminderBuilder.svelte b/frontend/app/src/mobile/features/chats/core/ReminderBuilder.svelte
new file mode 100644
index 0000000000..f05ac52eb4
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/ReminderBuilder.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+    import { BodySmall, Button, Column, Sheet, TextArea, Title } from "component-lib";
+    import { ONE_DAY, type ChatIdentifier, type OpenChat } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import Alarm from "svelte-material-icons/Alarm.svelte";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import { now } from "@src/stores/time";
+    import { toastStore } from "@src/stores/toast";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import DurationSelector from "@src/mobile/shared/DurationSelector.svelte";
+
+    interface Props {
+        chatId: ChatIdentifier;
+        eventIndex: number;
+        threadRootMessageIndex: number | undefined;
+        onClose: () => void;
+    }
+
+    let { chatId, eventIndex, threadRootMessageIndex, onClose }: Props = $props();
+
+    const client = getContext<OpenChat>("client");
+
+    let busy = $state(false);
+    let note: string = $state("");
+
+    function createReminder() {
+        busy = true;
+        client
+            .setMessageReminder(chatId, eventIndex, remindAtMs, note, threadRootMessageIndex)
+            .then((success) => {
+                if (success) {
+                    toastStore.showSuccessToast(i18nKey("reminders.success"));
+                } else {
+                    toastStore.showFailureToast(i18nKey("reminders.failure"));
+                }
+            })
+            .finally(() => (busy = false));
+        onClose();
+    }
+    let duration = $state(BigInt(ONE_DAY));
+    let remindAtMs = $derived($now + Number(duration));
+    let remindAtDate = $derived(new Date(remindAtMs));
+</script>
+
+<Sheet onDismiss={onClose}>
+    <Column gap={"xl"} padding={"xl"}>
+        <Title fontWeight={"bold"}>
+            <Translatable resourceKey={i18nKey("reminders.title")} />
+        </Title>
+        <DurationSelector bind:duration></DurationSelector>
+        <TextArea
+            maxlength={1000}
+            rows={4}
+            placeholder={interpolate($_, i18nKey("reminders.notePlaceholder"))}
+            bind:value={note}>
+            {#snippet subtext()}
+                <Translatable resourceKey={i18nKey("Optionally add a note to your reminder")} />
+            {/snippet}
+        </TextArea>
+        <Column gap={"md"}>
+            <Button disabled={busy} loading={busy} onClick={createReminder}>
+                {#snippet icon(color)}
+                    <Alarm {color} />
+                {/snippet}
+
+                <Translatable resourceKey={i18nKey("reminders.create")} /></Button>
+            <BodySmall align={"center"} colour={"textSecondary"}>
+                <Translatable
+                    resourceKey={i18nKey("reminders.remindAt", {
+                        datetime: client.toDatetimeString(remindAtDate),
+                    })} />
+            </BodySmall>
+        </Column>
+    </Column>
+</Sheet>
diff --git a/frontend/app/src/mobile/features/chats/core/ReminderNotes.svelte b/frontend/app/src/mobile/features/chats/core/ReminderNotes.svelte
new file mode 100644
index 0000000000..caf6a194ca
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/ReminderNotes.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+    import { ChatText } from "component-lib";
+    import Markdown from "@src/ui/Markdown.svelte";
+
+    interface Props {
+        notes: string | undefined;
+    }
+
+    let { notes }: Props = $props();
+</script>
+
+{#if notes !== undefined && notes !== ""}
+    <ChatText fontWeight={"bold"}>
+        <Markdown inline suppressLinks text={notes} />
+    </ChatText>
+{/if}
diff --git a/frontend/app/src/mobile/features/chats/core/RepliesTo.svelte b/frontend/app/src/mobile/features/chats/core/RepliesTo.svelte
new file mode 100644
index 0000000000..9f695d53e3
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/RepliesTo.svelte
@@ -0,0 +1,116 @@
+<script lang="ts">
+    import { Column } from "component-lib";
+    import {
+        currentUserIdStore,
+        OpenChat,
+        selectedChatWebhooksStore,
+        selectedCommunityMembersStore,
+        type ChatIdentifier,
+        type RehydratedReplyContext,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import ChatMessageReplyContent from "@src/mobile/features/chats/core/content/ChatMessageReplyContent.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        chatId: ChatIdentifier;
+        repliesTo: RehydratedReplyContext;
+        readonly: boolean;
+        intersecting: boolean;
+        contentWidth?: number;
+    }
+
+    let { repliesTo, readonly, intersecting, contentWidth }: Props = $props();
+
+    let debug = false;
+
+    let me = $derived(repliesTo.senderId === $currentUserIdStore);
+    let displayName = $derived(
+        me
+            ? client.toTitleCase($_("you"))
+            : client.getDisplayName(
+                  repliesTo.senderId,
+                  $selectedCommunityMembersStore,
+                  $selectedChatWebhooksStore,
+              ),
+    );
+</script>
+
+<Column
+    width={contentWidth ? { size: `${contentWidth}px` } : undefined}
+    supplementalClass={`replies_to ${me ? "me" : ""}`}
+    padding="sm"
+    borderRadius="md">
+    {#if repliesTo.content !== undefined}
+        <ChatMessageReplyContent
+            {me}
+            {displayName}
+            {readonly}
+            messageContext={repliesTo.sourceContext}
+            {intersecting}
+            messageId={repliesTo.messageId}
+            messageIndex={repliesTo.messageIndex}
+            senderId={repliesTo.senderId}
+            edited={false}
+            fill={false}
+            failed={false}
+            blockLevelMarkdown={true}
+            truncate
+            reply
+            content={repliesTo.content} />
+        {#if debug}
+            <pre>EventIdx: {repliesTo.eventIndex}</pre>
+            <pre>MsgId: {repliesTo.messageId}</pre>
+            <pre>SenderId: {repliesTo.senderId}</pre>
+        {/if}
+    {:else}
+        {"TODO - we don't have the message content for this"}
+    {/if}
+</Column>
+
+<style lang="scss">
+    :global {
+        .container.replies_to {
+            position: relative;
+            pointer-events: none;
+            padding-left: 1.25rem !important;
+
+            // Same CSS is defined in ReplyingTo.svelte
+            &:before {
+                content: "";
+                display: block;
+                position: absolute;
+                left: var(--sp-sm);
+                top: var(--sp-sm);
+                bottom: var(--sp-sm);
+                width: 0.25rem;
+                background-color: var(--primary-light);
+                border-radius: var(--rad-circle);
+            }
+
+            &.me:before {
+                background-color: var(--secondary-light);
+            }
+        }
+
+        // Rules for a reply on my message.
+        .reply_wrapper.me > .replies_to {
+            border-top-left-radius: var(--rad-lg) !important;
+
+            &.me {
+                background-color: var(--background-2);
+            }
+
+            &:not(.me) {
+                background-color: var(--primary-muted);
+            }
+        }
+
+        .reply_wrapper:not(.me) > .replies_to {
+            border-top-right-radius: var(--rad-lg) !important;
+            background-color: var(--background-0);
+        }
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/chats/core/ReplyingTo.svelte b/frontend/app/src/mobile/features/chats/core/ReplyingTo.svelte
new file mode 100644
index 0000000000..24178a7b49
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/ReplyingTo.svelte
@@ -0,0 +1,187 @@
+<script lang="ts">
+    import { ChatCaption, ColourVars, Column, IconButton, Row } from "component-lib";
+    import type { CreatedUser, EnhancedReplyContext, OpenChat } from "@client";
+    import { selectedChatWebhooksStore, selectedCommunityMembersStore } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import Close from "svelte-material-icons/Close.svelte";
+    import ChatMessageContent from "@src/mobile/features/chats/core/content/ChatMessageContent.svelte";
+    import ChatMessageReplyContent from "@src/mobile/features/chats/core/content/ChatMessageReplyContent.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        replyingTo: EnhancedReplyContext;
+        user: CreatedUser;
+        readonly: boolean;
+        timestamp?: bigint | undefined;
+        onCancelReply: () => void;
+    }
+
+    let { replyingTo, user, readonly, timestamp = undefined, onCancelReply }: Props = $props();
+
+    let me = $derived(replyingTo.sender?.userId === user?.userId);
+
+    let displayName = $derived(
+        me
+            ? client.toTitleCase($_("you"))
+            : client.getDisplayName(
+                  replyingTo.sender?.userId,
+                  $selectedCommunityMembersStore,
+                  $selectedChatWebhooksStore,
+              ),
+    );
+
+    let fillReplyCancel = $derived(
+        ["image_content", "video_content"].indexOf(replyingTo.content.kind) > -1,
+    );
+
+    // This is transitional, until we adjust replies for different content types.
+    // TODO this should be the primary way to render replying to content!
+    let hasDedicatedReplyContent = $derived(
+        [
+            "text_content",
+            "image_content",
+            "file_content",
+            "audio_content",
+            "video_content",
+            "p2p_swap_content",
+            "poll_content",
+            "video_call_content",
+            "prize_content",
+            "prize_content_initial",
+        ].indexOf(replyingTo.content.kind) > -1,
+    );
+</script>
+
+<Column
+    borderRadius={"md"}
+    padding={["xs", "xs", "zero"]}
+    minWidth={"120px"}
+    maxHeight={"10rem"}
+    width="fill"
+    gap={"zero"}>
+    <div class="replying_wrapper" class:me class:with_padding={!hasDedicatedReplyContent}>
+        <div class="cancel_reply" class:filled={fillReplyCancel}>
+            <IconButton onclick={onCancelReply} size="sm">
+                {#snippet icon(_color)}
+                    <Close color={ColourVars.textSecondary} />
+                {/snippet}
+            </IconButton>
+        </div>
+        {#if hasDedicatedReplyContent}
+            <div class="replying_content" class:me>
+                <ChatMessageReplyContent
+                    {displayName}
+                    {readonly}
+                    {timestamp}
+                    messageContext={replyingTo.sourceContext}
+                    fill={false}
+                    failed={false}
+                    blockLevelMarkdown={false}
+                    {me}
+                    intersecting={true}
+                    messageId={replyingTo.messageId}
+                    messageIndex={replyingTo.messageIndex}
+                    senderId={replyingTo.senderId}
+                    truncate
+                    edited={replyingTo.edited}
+                    content={replyingTo.content}
+                    reply
+                    draft />
+            </div>
+        {:else}
+            <Row crossAxisAlignment={"center"}>
+                <ChatCaption fontWeight={"bold"}>
+                    {displayName}
+                </ChatCaption>
+            </Row>
+            <div class="replying_content no_padding" class:me>
+                <ChatMessageContent
+                    {readonly}
+                    {timestamp}
+                    messageContext={replyingTo.sourceContext}
+                    fill={false}
+                    failed={false}
+                    blockLevelMarkdown={false}
+                    {me}
+                    intersecting={true}
+                    messageId={replyingTo.messageId}
+                    messageIndex={replyingTo.messageIndex}
+                    senderId={replyingTo.senderId}
+                    truncate
+                    edited={replyingTo.edited}
+                    content={replyingTo.content}
+                    ogPreviews={[]}
+                    reply />
+            </div>
+        {/if}
+    </div>
+</Column>
+
+<style lang="scss">
+    :global(.replying.me a) {
+        color: inherit;
+    }
+
+    :global {
+        .replying_wrapper {
+            width: 100%;
+            position: relative;
+            padding-left: var(--sp-xl);
+            background-color: var(--background-2);
+            border-radius: var(--rad-lg) var(--rad-lg) var(--rad-md) var(--rad-md);
+
+            &:before {
+                content: "";
+                display: block;
+                position: absolute;
+                width: 0.25rem;
+                left: 0.5rem;
+                top: 0.5rem;
+                bottom: 0.5rem;
+                background-color: var(--primary-light);
+                border-radius: var(--rad-circle);
+            }
+
+            &.me:before {
+                background-color: var(--secondary-light);
+            }
+
+            &.with_padding {
+                padding-top: var(--sp-sm);
+                padding-bottom: var(--sp-sm);
+            }
+        }
+
+        .cancel_reply {
+            position: absolute;
+            right: 0;
+            top: 0;
+            z-index: 1;
+
+            &.filled {
+                background-color: var(--background-2);
+                border-radius: var(--rad-circle);
+            }
+
+            &.filled > .icon_button {
+                padding: var(--sp-xxs) !important;
+            }
+        }
+
+        .replying_content {
+            pointer-events: none;
+            padding: var(--sp-sm) var(--sp-xs);
+            padding-left: 0;
+
+            &.no_padding {
+                padding: 0;
+            }
+
+            a {
+                color: inherit;
+            }
+        }
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/chats/core/ReportMessage.svelte b/frontend/app/src/mobile/features/chats/core/ReportMessage.svelte
new file mode 100644
index 0000000000..98fe5e823b
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/ReportMessage.svelte
@@ -0,0 +1,134 @@
+<script lang="ts">
+    import {
+        BodySmall,
+        Button,
+        Column,
+        Option,
+        Row,
+        Select,
+        Sheet,
+        Subtitle,
+        Switch,
+    } from "component-lib";
+    import { iconSize, type ChatIdentifier, type OpenChat } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import Flag from "svelte-material-icons/Flag.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import Setting from "@src/mobile/shared/Setting.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+
+    interface Props {
+        chatId: ChatIdentifier;
+        messageId: bigint;
+        threadRootMessageIndex: number | undefined;
+        canDelete: boolean;
+        onClose: () => void;
+    }
+
+    let { chatId, messageId, threadRootMessageIndex, canDelete, onClose }: Props = $props();
+
+    const client = getContext<OpenChat>("client");
+
+    let deleteMessage = $state(false);
+    let busy = $state(false);
+    let selectedReason = $state<string>();
+    let reasons = [
+        "report.pleaseSelect",
+        "report.threat",
+        "report.child",
+        "report.nonConsensual",
+        "report.selfHarm",
+        "report.violence",
+        "report.scam",
+    ];
+
+    let valid = $derived(selectedReason !== undefined);
+
+    function createReport() {
+        report();
+        onClose();
+    }
+
+    function report() {
+        client
+            .reportMessage(chatId, threadRootMessageIndex, messageId, canDelete && deleteMessage)
+            .then((success) => {
+                if (success) {
+                    toastStore.showSuccessToast(i18nKey("report.success"));
+                } else {
+                    toastStore.showFailureToast(i18nKey("report.failure"));
+                }
+            });
+    }
+</script>
+
+<Sheet>
+    <Column gap={"xl"} padding={"xl"}>
+        <Row crossAxisAlignment={"center"} gap={"sm"}>
+            <Flag size={$iconSize} color={"var(--error)"} />
+            <Subtitle fontWeight={"bold"}
+                ><Translatable resourceKey={i18nKey("report.title")} /></Subtitle>
+        </Row>
+        <Column gap={"lg"}>
+            <Select
+                error={selectedReason === undefined}
+                placeholder={"Select a reason for your report"}
+                onSelect={(reason) => (selectedReason = reason)}
+                value={selectedReason}>
+                {#snippet subtext()}
+                    <Translatable resourceKey={i18nKey("Select a reason for your report")} />
+                {/snippet}
+                {#snippet selectedValue(reason)}
+                    <Translatable resourceKey={i18nKey(reason)} />
+                {/snippet}
+                {#snippet selectOptions(onSelect)}
+                    <Column
+                        onClick={(e) => e?.stopPropagation()}
+                        height={{ size: "100%" }}
+                        supplementalClass={"reason_options"}
+                        padding={"lg"}
+                        gap={"lg"}>
+                        {#each reasons as reason}
+                            <Option
+                                padding={"xs"}
+                                selected={false}
+                                value={reason}
+                                onClick={onSelect}>
+                                <Translatable resourceKey={i18nKey(reason)} />
+                            </Option>
+                        {/each}
+                    </Column>
+                {/snippet}
+            </Select>
+            {#if canDelete}
+                <Setting
+                    toggle={() => (deleteMessage = !deleteMessage)}
+                    info={"As well as reporting this message, you can also choose whether or not to delete it by toggling this setting."}>
+                    <Switch
+                        onChange={() => (deleteMessage = !deleteMessage)}
+                        width={"fill"}
+                        reverse
+                        checked={deleteMessage}>
+                        <Translatable resourceKey={i18nKey("Delete message")} />
+                    </Switch>
+                </Setting>
+            {/if}
+
+            <BodySmall colour={"textSecondary"}>
+                <Markdown
+                    text={$_("report.advice", {
+                        values: { rules: "https://oc.app/guidelines?section=3" },
+                    })} />
+            </BodySmall>
+        </Column>
+        <Column gap={"md"}>
+            <Button disabled={!valid} loading={busy} onClick={createReport}
+                ><Translatable resourceKey={i18nKey("report.menu")} /></Button>
+            <Button secondary onClick={onClose}
+                ><Translatable resourceKey={i18nKey("cancel")} /></Button>
+        </Column>
+    </Column>
+</Sheet>
diff --git a/frontend/app/src/mobile/features/chats/core/SecureButton.svelte b/frontend/app/src/mobile/features/chats/core/SecureButton.svelte
new file mode 100644
index 0000000000..ed8fbca14b
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/SecureButton.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+    import { CommonButton2, type ButtonProps } from "component-lib";
+    import { onMount } from "svelte";
+    import { suspectedAutomationBot } from "@src/stores/automation";
+    import { isTouchDevice } from "@src/utils/devices";
+
+    let {
+        children,
+        onClick,
+        label,
+        ...rest
+    }: ButtonProps & { label: string; onClick: (ev: MouseEvent) => void } = $props();
+
+    // real users move, pause and then click. Bots either don't move at all or move and then click immediately
+    const PAUSE_TRESHOLD = 10;
+
+    let lastMoved = Date.now();
+
+    onMount(() => {
+        document.addEventListener("mousemove", mousemove);
+        return () => {
+            document.removeEventListener("mousemove", mousemove);
+        };
+    });
+
+    function mousemove() {
+        lastMoved = Date.now();
+    }
+
+    function probablyBot(ev: MouseEvent): boolean {
+        const pause = Date.now() - lastMoved;
+        const fakePause = pause < PAUSE_TRESHOLD && !isTouchDevice;
+        return fakePause || !ev.isTrusted || $suspectedAutomationBot;
+    }
+
+    function internalOnclick(ev: MouseEvent) {
+        if (probablyBot(ev)) {
+            console.log("Looks like this button was clicked by a bot");
+        } else {
+            onClick(ev);
+        }
+    }
+</script>
+
+<CommonButton2 variant="primary" mode="regular" onClick={internalOnclick} {...rest}>
+    {@render children?.()}
+</CommonButton2>
diff --git a/frontend/app/src/mobile/features/chats/core/SelectUsers.svelte b/frontend/app/src/mobile/features/chats/core/SelectUsers.svelte
new file mode 100644
index 0000000000..effacd17aa
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/SelectUsers.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+    import { i18nKey } from "@src/i18n/i18n";
+    import { Container, UserChip } from "component-lib";
+    import type { OpenChat, UserOrUserGroup, UserSummary } from "@client";
+    import { getContext, type Snippet } from "svelte";
+    import ErrorMessage from "@src/mobile/shared/ErrorMessage.svelte";
+    import FindUser from "@src/mobile/shared/FindUser.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    type OnSelectUser = (user: UserSummary) => void;
+    type OnDeleteUser = (user: UserOrUserGroup) => void;
+
+    interface Props {
+        mode: "add" | "edit";
+        selectedUsers: UserSummary[];
+        enabled?: boolean;
+        userLookup: (searchTerm: string) => Promise<[UserSummary[], UserSummary[]]>;
+        onDeleteUser: OnDeleteUser;
+        onSelectUser: OnSelectUser;
+        matchingUser?: Snippet<[UserSummary, OnSelectUser]>;
+        placeholderKey?: string;
+        dmFilter?: (user: UserSummary) => boolean;
+        onClear?: () => void;
+    }
+
+    let {
+        selectedUsers,
+        userLookup,
+        onDeleteUser,
+        onSelectUser,
+        matchingUser,
+        placeholderKey,
+        dmFilter,
+    }: Props = $props();
+
+    let error: string | undefined = undefined;
+</script>
+
+{#if error !== undefined}
+    <ErrorMessage><Translatable resourceKey={i18nKey("errorSearchingForUser")} /></ErrorMessage>
+{/if}
+
+<Container direction={"vertical"} gap={"lg"}>
+    <FindUser
+        {dmFilter}
+        {matchingUser}
+        {selectedUsers}
+        {userLookup}
+        {onSelectUser}
+        {placeholderKey}>
+        {#snippet selected()}
+            {#if selectedUsers.length > 0}
+                <Container padding={["zero", "sm"]} wrap gap={"sm"} crossAxisAlignment={"center"}>
+                    {#each selectedUsers as user (user.userId)}
+                        <UserChip
+                            avatarUrl={client.userAvatarUrl(user)}
+                            onRemove={() => onDeleteUser(user)}>@{user.username}</UserChip>
+                    {/each}
+                </Container>
+            {/if}
+        {/snippet}
+    </FindUser>
+</Container>
diff --git a/frontend/app/src/components_mobile/home/Separator.svelte b/frontend/app/src/mobile/features/chats/core/Separator.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/Separator.svelte
rename to frontend/app/src/mobile/features/chats/core/Separator.svelte
diff --git a/frontend/app/src/mobile/features/chats/core/ThreadSummary.svelte b/frontend/app/src/mobile/features/chats/core/ThreadSummary.svelte
new file mode 100644
index 0000000000..b30e40fb17
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/ThreadSummary.svelte
@@ -0,0 +1,152 @@
+<script lang="ts">
+    import {
+        Avatar,
+        ChatFootnote,
+        ColourVars,
+        Container,
+        CountBadge,
+        NotificationIndicator,
+        type Padding,
+        type Radius,
+    } from "component-lib";
+    import {
+        allUsersStore,
+        messagesRead,
+        OpenChat,
+        threadsFollowedByMeStore,
+        type ChatIdentifier,
+        type ThreadSummary,
+    } from "@client";
+    import { navigate } from "@src/utils/navigation";
+    import { getContext, onMount } from "svelte";
+    import { _ } from "svelte-i18n";
+    import ChevronRight from "svelte-material-icons/ChevronRight.svelte";
+
+    const client = getContext<OpenChat>("client");
+    const MAX_AVATARS = 3;
+
+    interface Props {
+        chatId: ChatIdentifier;
+        threadSummary: ThreadSummary;
+        threadRootMessageIndex: number;
+        me?: boolean;
+        url: string;
+    }
+
+    let { chatId, url, threadRootMessageIndex, threadSummary, me = false }: Props = $props();
+
+    let lastMessageIndex = $derived(threadSummary.numberOfReplies - 1); //using this as a surrogate for message index for now
+    let unreadCount = $derived(
+        client.unreadThreadMessageCount(chatId, threadRootMessageIndex, lastMessageIndex),
+    );
+    let hasUnread = $derived(unreadCount > 0);
+    let isFollowedByMe = $derived(
+        $threadsFollowedByMeStore.get(chatId)?.has(threadRootMessageIndex) ?? false,
+    );
+    let borderColour = $derived(
+        hasUnread && isFollowedByMe ? ColourVars.primary : ColourVars.disabledButton,
+    );
+    let borderRadius = $derived<Radius>(me ? ["xl", "sm", "xl", "xl"] : ["sm", "xl", "xl", "xl"]); // this will need more logic
+    let padding = $derived<Padding>(me ? ["xs", "md", "xs", "xs"] : ["xs", "xs", "xs", "md"]);
+    let participantAvatarUrls = $derived(
+        [...threadSummary.participantIds].map((p) => client.userAvatarUrl($allUsersStore.get(p))),
+    );
+    let additional = $derived(participantAvatarUrls.length - MAX_AVATARS);
+    let text = $derived(
+        $_("thread.nreplies", {
+            values: {
+                number: threadSummary.numberOfReplies.toString(),
+                replies:
+                    threadSummary.numberOfReplies === 1 ? $_("thread.reply") : $_("thread.replies"),
+                message: $_("thread.lastMessage", {
+                    values: {
+                        date: client.formatMessageDate(
+                            threadSummary.latestEventTimestamp,
+                            $_("today"),
+                            $_("yesterday"),
+                            true,
+                            true,
+                        ),
+                    },
+                }),
+            },
+        }),
+    );
+
+    onMount(() => {
+        return messagesRead.subscribe(() => {
+            unreadCount = client.unreadThreadMessageCount(
+                chatId,
+                threadRootMessageIndex,
+                lastMessageIndex,
+            );
+        });
+    });
+</script>
+
+<Container
+    onClick={() => navigate(url)}
+    overflow={"visible"}
+    {borderColour}
+    borderWidth={"thick"}
+    crossAxisAlignment={"center"}
+    {borderRadius}
+    {padding}
+    gap={"md"}
+    height={"hug"}
+    width={"hug"}>
+    <Container supplementalClass={"thread-summary-avatars"} width={"hug"}>
+        {#each participantAvatarUrls.slice(0, MAX_AVATARS) as url}
+            <Avatar {url} size={"xs"}></Avatar>
+        {/each}
+        {#if additional > 0}
+            <CountBadge mode="additive">+{additional}</CountBadge>
+        {/if}
+    </Container>
+    <ChatFootnote width={"hug"} colour={"textSecondary"}>{text}</ChatFootnote>
+    <Container width={"hug"}>
+        <div class={`arrow`} class:hasUnread>
+            <ChevronRight color={ColourVars.background0} />
+        </div>
+    </Container>
+    {#if hasUnread}
+        <div class:me class="notification">
+            <NotificationIndicator muted={!isFollowedByMe}></NotificationIndicator>
+        </div>
+    {/if}
+</Container>
+
+<style lang="scss">
+    :global(.thread-summary-avatars img) {
+        margin-inline-start: -0.4rem;
+    }
+
+    :global(.thread-summary-avatars .badge) {
+        margin-inline-start: -0.4rem;
+    }
+
+    :global(.thread-summary-avatars .border:first-child img) {
+        margin-inline-start: 0;
+    }
+
+    .arrow {
+        background-color: var(--secondary-light);
+        border-radius: var(--rad-circle);
+        height: 16px;
+        display: flex;
+        &.hasUnread {
+            background-color: var(--primary-light);
+        }
+    }
+
+    .notification {
+        position: absolute;
+        top: -17px;
+        left: -15px;
+
+        &.me {
+            left: unset;
+            right: -15px;
+        }
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/chats/core/ThrottleCountdown.svelte b/frontend/app/src/mobile/features/chats/core/ThrottleCountdown.svelte
new file mode 100644
index 0000000000..9bea3ceb3e
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/ThrottleCountdown.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+    import Progress from "@src/mobile/shared/Progress.svelte";
+    import DisappearsAt from "./DisappearsAt.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { now500 } from "@src/stores/time";
+    import { throttleDeadline } from "@client";
+    import { untrack } from "svelte";
+
+    interface Props {
+        deadline: number;
+    }
+
+    let { deadline }: Props = $props();
+
+    let seconds = $state(0);
+    let percent = $state(0);
+
+    $effect(() => {
+        calculate(deadline, $now500);
+    });
+
+    function calculate(deadline: number, now: number) {
+        untrack(() => {
+            seconds = Math.floor((deadline - now) / 1000);
+            percent = Math.floor((seconds / 60) * 100);
+            if (deadline <= $now500) {
+                throttleDeadline.set(0);
+            }
+        });
+    }
+</script>
+
+<div class="throttle">
+    <Progress size={"20px"} {percent}>
+        <div class="msg">
+            <DisappearsAt me={true} percentageExpired={percent} expiresAt={deadline} />
+            <Translatable resourceKey={i18nKey("throttleMessage", { time: seconds })} />
+        </div>
+    </Progress>
+</div>
+
+<style lang="scss">
+    :global(.throttle .bar) {
+        height: 40px;
+    }
+
+    .throttle {
+        padding: 0;
+        width: 100%;
+
+        .msg {
+            display: flex;
+            gap: $sp3;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+        }
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/home/TimelineDate.svelte b/frontend/app/src/mobile/features/chats/core/TimelineDate.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/TimelineDate.svelte
rename to frontend/app/src/mobile/features/chats/core/TimelineDate.svelte
diff --git a/frontend/app/src/components_mobile/home/message/Tip.svelte b/frontend/app/src/mobile/features/chats/core/Tip.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/message/Tip.svelte
rename to frontend/app/src/mobile/features/chats/core/Tip.svelte
diff --git a/frontend/app/src/mobile/features/chats/core/TipBuilder.svelte b/frontend/app/src/mobile/features/chats/core/TipBuilder.svelte
new file mode 100644
index 0000000000..b1d304521b
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/TipBuilder.svelte
@@ -0,0 +1,316 @@
+<script lang="ts">
+    import {
+        Body,
+        BodySmall,
+        Button,
+        ColourVars,
+        Column,
+        Row,
+        Sheet,
+        StatusCard,
+    } from "component-lib";
+    import type {
+        Message,
+        MessageContext,
+        OpenChat,
+        PendingCryptocurrencyTransfer,
+    } from "@client";
+    import {
+        enhancedCryptoLookup as cryptoLookup,
+        currentUserIdStore,
+        exchangeRatesLookupStore as exchangeRatesLookup,
+        lastCryptoSent,
+    } from "@client";
+    import { getContext, onMount } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { quadOut } from "svelte/easing";
+    import { Tween } from "svelte/motion";
+    import { fade } from "svelte/transition";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { pinNumberErrorMessageStore } from "@src/stores/pinNumber";
+    import { toastStore } from "@src/stores/toast";
+    import ErrorMessage from "@src/mobile/shared/ErrorMessage.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import AccountInfo from "@src/mobile/shared/AccountInfo.svelte";
+    import CryptoSelector from "@src/mobile/shared/CryptoSelector.svelte";
+    import TipButton from "./TipButton.svelte";
+    import TokenInput from "@src/mobile/shared/TokenInput.svelte";
+    import { TokenState } from "@src/mobile/features/wallet/walletState.svelte";
+
+    const client = getContext<OpenChat>("client");
+    const increments: Increment[] = [1, 10, 100];
+    type Increment = 1 | 10 | 100;
+
+    interface Props {
+        ledger: string;
+        msg: Message;
+        messageContext: MessageContext;
+        onClose: () => void;
+    }
+
+    let { ledger = $bindable(), msg, messageContext, onClose }: Props = $props();
+
+    const tweenOptions = {
+        duration: 800,
+        easing: quadOut,
+    };
+
+    let error: string | undefined = $state(undefined);
+    let toppingUp = $state(false);
+    let tokenChanging = $state(true);
+    let dollar = $state<HTMLElement | undefined>();
+    let dollarTop = new Tween(-1000, tweenOptions);
+    let dollarOpacity = new Tween(0, tweenOptions);
+    let dollarScale = new Tween(0, tweenOptions);
+    let centAmount = $state(0);
+    let showCustomTip = $state(false);
+    let validAmount: boolean = $state(false);
+
+    onMount(() => {
+        let d = document.getElementById("tip-dollar");
+        if (!d) {
+            d = document.createElement("div");
+            d.id = "tip-dollar";
+            d.className = "tip-dollar";
+            const t = document.createTextNode("🤑");
+            d.appendChild(t);
+            document.body.appendChild(d);
+        }
+        dollar = d;
+    });
+
+    function amountLabel(n: Increment): string {
+        return `$${(n / 100).toFixed(2)}`;
+    }
+
+    function calculateCentAmount(e8s: bigint, exchangeRate: number): number {
+        const tokens = Number(e8s) / Math.pow(10, tokenDetails.decimals);
+        const dollar = tokens * exchangeRate;
+        const cents = dollar * 100;
+        return Math.round(cents);
+    }
+
+    function to2SigFigs(num: number): number {
+        return parseFloat(num.toPrecision(2));
+    }
+
+    function calculateAmount(centAmount: number, exchangeRate: number): bigint {
+        const e8s = ((centAmount / 100) * Math.pow(10, tokenDetails.decimals)) / exchangeRate;
+        return BigInt(Math.round(e8s));
+    }
+
+    function cancel() {
+        toppingUp = false;
+        onClose();
+    }
+
+    function onBalanceRefreshFinished() {
+        toppingUp = false;
+        tokenChanging = false;
+    }
+
+    function bounceMoneyMouthFrom(target: HTMLElement) {
+        if (!dollar) return;
+        const buttonRect = target.getBoundingClientRect();
+        const hDiff = buttonRect.height - dollar.clientHeight;
+        const wDiff = buttonRect.width - dollar.clientWidth;
+        const top = buttonRect.top + hDiff / 2;
+        const left = buttonRect.left + wDiff / 2;
+
+        Promise.all([
+            dollarTop.set(top, { duration: 0 }),
+            dollarOpacity.set(1, { duration: 0 }),
+            dollarScale.set(0, { duration: 0 }),
+        ]).then(() => {
+            dollarTop.target = top - 300;
+            dollarOpacity.target = 0;
+            dollarScale.target = 2;
+            dollarOpacity.set(0);
+        });
+        dollar.style.left = `${left}px`;
+    }
+
+    function clickAmount(e: MouseEvent, increment: Increment) {
+        e.preventDefault();
+        bounceMoneyMouthFrom(e.target as HTMLElement);
+        centAmount += increment;
+        tokenState.draftAmount = calculateAmount(centAmount, exchangeRate);
+    }
+
+    function send(e: Event) {
+        e.preventDefault();
+        const transfer: PendingCryptocurrencyTransfer = {
+            kind: "pending",
+            ledger,
+            token: tokenDetails.symbol,
+            recipient: msg.sender,
+            amountE8s: tokenState.draftAmount,
+            feeE8s: tokenDetails.transferFee,
+            createdAtNanos: BigInt(Date.now()) * 1_000_000n,
+        };
+        lastCryptoSent.set(ledger);
+
+        const currentTip = (msg.tips[transfer.ledger] ?? {})[$currentUserIdStore] ?? 0n;
+
+        client.tipMessage(messageContext, msg.messageId, transfer, currentTip).then((resp) => {
+            if (resp.kind === "failure") {
+                toastStore.showFailureToast(i18nKey("tip.failure"));
+            } else if (resp.kind !== "success") {
+                toastStore.showFailureToast(pinNumberErrorMessageStore);
+            } else if (resp.kind === "success") {
+                client.refreshAccountBalance(ledger, false);
+            }
+        });
+
+        onClose();
+    }
+    let tokenDetails = $derived($cryptoLookup.get(ledger)!);
+    let tokenState = $derived.by(() => {
+        const s = new TokenState(tokenDetails);
+        s.refreshBalance(client).then(onBalanceRefreshFinished);
+        return s;
+    });
+    let exchangeRate = $derived(
+        to2SigFigs($exchangeRatesLookup.get(tokenDetails.symbol.toLowerCase())?.toUSD ?? 0),
+    );
+    $effect(() => {
+        if (ledger !== undefined) {
+            // reset when ledger changes
+            centAmount = 0;
+            tokenChanging = true;
+            tokenState.draftAmount = 0n;
+        }
+    });
+    let displayDraftAmount = $derived(
+        client.formatTokens(tokenState.draftAmount, tokenDetails.decimals),
+    );
+    let displayFee = $derived(client.formatTokens(tokenDetails.transferFee, tokenDetails.decimals));
+    let valid = $derived(
+        tokenState.draftAmount > 0n &&
+            tokenState.remainingBalance >= 0n &&
+            error === undefined &&
+            !tokenChanging,
+    );
+    let zero = $derived(tokenState.cryptoBalance <= tokenDetails.transferFee && !tokenChanging);
+    $effect(() => {
+        centAmount = calculateCentAmount(tokenState.draftAmount, exchangeRate);
+    });
+    $effect(() => {
+        if (dollar) {
+            dollar.style.setProperty("top", `${dollarTop.current}px`);
+            dollar.style.setProperty("opacity", `${dollarOpacity.current}`);
+            dollar.style.setProperty(
+                "transform",
+                `scale(${dollarScale.current}) rotate(${dollarScale.current}turn)`,
+            );
+        }
+    });
+</script>
+
+<Sheet onDismiss={onClose}>
+    <Column gap={"xl"} padding={["xl", "lg"]}>
+        <CryptoSelector showRefresh draftAmount={tokenState.draftAmount} bind:ledger />
+        {#if zero || toppingUp}
+            <AccountInfo background={ColourVars.background0} {ledger} />
+            {#if zero}
+                <StatusCard
+                    background={ColourVars.background0}
+                    mode={"warning"}
+                    title={"Insufficient funds"}>
+                    {#snippet body()}
+                        <Column gap={"sm"}>
+                            <Translatable
+                                resourceKey={i18nKey("tokenTransfer.zeroBalance", {
+                                    token: tokenDetails.symbol,
+                                })} />
+                            <Translatable resourceKey={i18nKey("tokenTransfer.makeDeposit")} />
+                        </Column>
+                    {/snippet}
+                </StatusCard>
+            {/if}
+        {:else}
+            {#if exchangeRate > 0}
+                <Row overflow={"visible"} mainAxisAlignment={"spaceAround"}>
+                    {#each increments as increment}
+                        <TipButton
+                            label={i18nKey(amountLabel(increment))}
+                            onClick={(e) => clickAmount(e, increment)}
+                            disabled={exchangeRate === 0 ||
+                                calculateAmount(centAmount + increment, exchangeRate) >
+                                    tokenState.cryptoBalance - tokenDetails.transferFee} />
+                    {/each}
+                </Row>
+                {#if tokenState.draftAmount > 0}
+                    <Row crossAxisAlignment={"center"} mainAxisAlignment={"center"} gap={"md"}>
+                        <Body fontWeight={"bold"} width={"hug"}>
+                            ${(centAmount / 100).toFixed(2)}
+                        </Body>
+                        <div class="separator"></div>
+                        <Body fontWeight={"bold"} width={"hug"}>
+                            {displayDraftAmount}
+                            {tokenDetails.symbol}
+                        </Body>
+                        <div class="separator"></div>
+                        <BodySmall colour={"textSecondary"} fontWeight={"bold"} width={"hug"}>
+                            <Translatable
+                                resourceKey={i18nKey("tip.plusFee", {
+                                    fee: displayFee,
+                                    token: tokenDetails.symbol,
+                                })} />
+                        </BodySmall>
+                    </Row>
+                {:else}
+                    <BodySmall align={"center"} colour={"textSecondary"}>
+                        <Translatable resourceKey={i18nKey("tip.advice")} />
+                    </BodySmall>
+                {/if}
+            {/if}
+
+            {#if !showCustomTip && exchangeRate > 0}
+                <Row
+                    mainAxisAlignment={"center"}
+                    crossAxisAlignment={"center"}
+                    onClick={() => (showCustomTip = true)}>
+                    <Body width={"hug"} colour={"secondary"}>
+                        <Translatable resourceKey={i18nKey("tip.showCustom")} />
+                    </Body>
+                </Row>
+            {/if}
+
+            {#if showCustomTip || exchangeRate <= 0}
+                <div in:fade|local={{ duration: 500 }} class="custom-tip-amount">
+                    <TokenInput
+                        balance={tokenState.cryptoBalance}
+                        {ledger}
+                        bind:valid={validAmount}
+                        maxAmount={tokenState.maxAmount}
+                        bind:amount={tokenState.draftAmount} />
+                </div>
+            {/if}
+            {#if error !== undefined}
+                <div class="error">
+                    <ErrorMessage>{$_(error)}</ErrorMessage>
+                </div>
+            {/if}
+        {/if}
+        <Column gap={"md"}>
+            <Button disabled={!valid} onClick={send}
+                ><Translatable resourceKey={i18nKey("tokenTransfer.send")} /></Button>
+            <Button secondary onClick={cancel}
+                ><Translatable resourceKey={i18nKey("cancel")} /></Button>
+        </Column>
+    </Column>
+</Sheet>
+
+<style lang="scss">
+    .custom-tip-amount {
+        width: 100%;
+    }
+
+    .separator {
+        width: 2px;
+        height: 100%;
+        border-radius: var(--rad-circle);
+        background-color: var(--text-secondary);
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/chats/core/TipButton.svelte b/frontend/app/src/mobile/features/chats/core/TipButton.svelte
new file mode 100644
index 0000000000..e3923f0d60
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/TipButton.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+    import type { ResourceKey } from "@client";
+    import { spring } from "svelte/motion";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    interface Props {
+        disabled?: boolean;
+        label: ResourceKey;
+        onClick: (e: MouseEvent) => void;
+    }
+
+    let { disabled = false, label, onClick }: Props = $props();
+
+    let buttonScale = spring(1);
+
+    function mouseDown() {
+        buttonScale.set(1.1);
+        window.setTimeout(() => buttonScale.set(1), 200);
+    }
+</script>
+
+<button
+    style={`transform: scale(${$buttonScale})`}
+    onmousedown={mouseDown}
+    {disabled}
+    onclick={onClick}
+    class="amount">
+    <Translatable resourceKey={label} />
+</button>
+
+<style lang="scss">
+    .amount {
+        $size: 100px;
+        border-radius: $sp3;
+        padding: $sp4;
+        border: 1px solid var(--bd);
+        transition:
+            background 250ms ease-in-out,
+            color 250ms ease-in-out;
+        text-align: center;
+        cursor: pointer;
+        height: $size;
+        width: $size;
+        border-radius: 50%;
+        display: grid;
+        align-content: center;
+        background: transparent;
+        color: var(--button-txt);
+        background: var(--button-bg);
+        position: relative;
+        &:hover {
+            background: var(--button-hv);
+        }
+
+        @include font(book, normal, fs-120);
+
+        &:disabled {
+            background: transparent;
+            color: var(--txt-light);
+            cursor: not-allowed;
+        }
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/home/message/Tips.svelte b/frontend/app/src/mobile/features/chats/core/Tips.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/message/Tips.svelte
rename to frontend/app/src/mobile/features/chats/core/Tips.svelte
diff --git a/frontend/app/src/mobile/features/chats/core/UnresolvedReply.svelte b/frontend/app/src/mobile/features/chats/core/UnresolvedReply.svelte
new file mode 100644
index 0000000000..e3cf670cba
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/UnresolvedReply.svelte
@@ -0,0 +1,22 @@
+<svelte:options immutable />
+
+<script lang="ts">
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import { BodySmall, ColourVars, Row } from "component-lib";
+    import AlertCircleOutline from "svelte-material-icons/AlertCircleOutline.svelte";
+</script>
+
+<!-- TODO RTL layout -->
+<Row
+    supplementalClass="reply_wrapper"
+    gap="sm"
+    padding="sm"
+    crossAxisAlignment="center"
+    mainAxisAlignment="center"
+    borderColour={ColourVars.primaryMuted}>
+    <BodySmall italic={true} colour={"primaryLight"} width="hug">
+        <Translatable resourceKey={i18nKey("unresolvedReply")} />
+    </BodySmall>
+    <AlertCircleOutline size="1rem" color={ColourVars.primaryLight} />
+</Row>
diff --git a/frontend/app/src/mobile/features/chats/core/VisibilityLabel.svelte b/frontend/app/src/mobile/features/chats/core/VisibilityLabel.svelte
new file mode 100644
index 0000000000..cfba1de453
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/VisibilityLabel.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+    import { ColourVars, Container } from "component-lib";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import LockOutline from "svelte-material-icons/LockOutline.svelte";
+
+    interface Props {
+        isPublic: boolean;
+    }
+
+    let { isPublic }: Props = $props();
+</script>
+
+{#if !isPublic}
+    <Container gap={"xs"} width={"hug"} supplementalClass="visibility-indicator">
+        <Container gap={"xs"} crossAxisAlignment={"center"}>
+            <LockOutline color={ColourVars.error} />
+            <Translatable resourceKey={i18nKey(isPublic ? "access.public" : "access.private")} />
+        </Container>
+        //
+    </Container>
+{/if}
+
+<style lang="scss">
+    :global {
+        .visibility-indicator {
+            text-transform: lowercase;
+        }
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/home/ZoomedImage.svelte b/frontend/app/src/mobile/features/chats/core/ZoomedImage.svelte
similarity index 98%
rename from frontend/app/src/components_mobile/home/ZoomedImage.svelte
rename to frontend/app/src/mobile/features/chats/core/ZoomedImage.svelte
index 9cca1c7e5f..5303596ffa 100644
--- a/frontend/app/src/components_mobile/home/ZoomedImage.svelte
+++ b/frontend/app/src/mobile/features/chats/core/ZoomedImage.svelte
@@ -4,8 +4,8 @@
     import type { ImageContent, MemeFighterContent } from "@client";
     import { onMount } from "svelte";
     import Close from "svelte-material-icons/Close.svelte";
-    import { popHistoryStateWithAction, pushDummyHistoryState } from "../../utils/history";
-    import { getProxyAdjustedBlobUrl } from "../../utils/media";
+    import { popHistoryStateWithAction, pushDummyHistoryState } from "@src/utils/history";
+    import { getProxyAdjustedBlobUrl } from "@src/utils/media";
 
     // TODO add reactions, forward, reply and other menu and conversation options to this screen!
 
diff --git a/frontend/app/src/components_mobile/home/ZoomedVideo.svelte b/frontend/app/src/mobile/features/chats/core/ZoomedVideo.svelte
similarity index 96%
rename from frontend/app/src/components_mobile/home/ZoomedVideo.svelte
rename to frontend/app/src/mobile/features/chats/core/ZoomedVideo.svelte
index d7bc4b26d4..a4a4c5ebb0 100644
--- a/frontend/app/src/components_mobile/home/ZoomedVideo.svelte
+++ b/frontend/app/src/mobile/features/chats/core/ZoomedVideo.svelte
@@ -3,8 +3,8 @@
     import type { VideoContent } from "@client";
     import { onMount } from "svelte";
     import Close from "svelte-material-icons/Close.svelte";
-    import { popHistoryStateWithAction, pushDummyHistoryState } from "../../utils/history";
-    import { getProxyAdjustedBlobUrl, setPlayingMedia } from "../../utils/media";
+    import { popHistoryStateWithAction, pushDummyHistoryState } from "@src/utils/history";
+    import { getProxyAdjustedBlobUrl, setPlayingMedia } from "@src/utils/media";
 
     interface Props {
         videoContent: VideoContent;
diff --git a/frontend/app/src/mobile/features/chats/core/content/AudioAttacher.svelte b/frontend/app/src/mobile/features/chats/core/content/AudioAttacher.svelte
new file mode 100644
index 0000000000..b2c611c853
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/content/AudioAttacher.svelte
@@ -0,0 +1,134 @@
+<script lang="ts">
+    import { IconButton } from "component-lib";
+    import { quantiseWaveform, type AudioContent, type OpenChat } from "@client";
+    import { getContext, onDestroy, onMount } from "svelte";
+    import Microphone from "svelte-material-icons/MicrophoneOutline.svelte";
+    import RadioboxMarked from "svelte-material-icons/RadioboxMarked.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        activeStream?: MediaStream;
+        mimeType: string;
+        supported: boolean;
+        onAudioCaptured: (content: AudioContent) => void;
+    }
+
+    let {
+        activeStream = $bindable(undefined),
+        mimeType,
+        supported = $bindable(),
+        onAudioCaptured,
+    }: Props = $props();
+
+    let mediaRecorder: MediaRecorder | undefined;
+
+    onMount(() => {
+        if (supported) {
+            // TODO - there are problems with this whole thing on safari.
+            // in particular, there is no access to the permissions api
+            if ("permissions" in navigator) {
+                navigator.permissions
+                    //@ts-ignore
+                    .query({ name: "microphone" })
+                    .then(function (result) {
+                        if (result.state === "denied") {
+                            // if they already said no, don't be rude
+                            supported = false;
+                        }
+                    })
+                    .catch((_err) => {
+                        console.log(
+                            "unable to check microphone permissions (probably unsupported)",
+                        );
+                    });
+            }
+        }
+    });
+
+    onDestroy(() => {
+        if (mediaRecorder && mediaRecorder.state === "recording") {
+            mediaRecorder.stop();
+        }
+        activeStream?.getTracks().forEach((track) => track.stop());
+        activeStream = undefined;
+        mediaRecorder = undefined;
+    });
+
+    function stopRecording() {
+        if (mediaRecorder && mediaRecorder.state === "recording") {
+            mediaRecorder.stop();
+        }
+    }
+
+    function toggle() {
+        if (activeStream !== undefined) {
+            stopRecording();
+        } else {
+            record();
+        }
+    }
+
+    function record() {
+        if (supported) {
+            navigator.mediaDevices
+                .getUserMedia({ audio: true, video: false })
+                .then((stream) => {
+                    activeStream = stream;
+                    const recordedChunks: Blob[] = [];
+                    const maxSizes = client.maxMediaSizes();
+                    let totalSize = 0;
+                    let truncated = false;
+                    mediaRecorder = new MediaRecorder(stream, { mimeType });
+
+                    mediaRecorder.addEventListener("dataavailable", (e) => {
+                        if (e.data.size > 0) recordedChunks.push(e.data);
+                        totalSize += e.data.size;
+                        if (totalSize >= maxSizes.audio) {
+                            truncated = true;
+                            stopRecording();
+                        }
+                    });
+
+                    mediaRecorder.addEventListener("stop", async () => {
+                        try {
+                            const data = await new Blob(recordedChunks).arrayBuffer();
+                            if (truncated) {
+                                // let the user know if we stopped recording prematurely
+                                toastStore.showFailureToast(i18nKey("maxAudioSize"));
+                            }
+                            const quantised = await quantiseWaveform(data.slice(0));
+                            onAudioCaptured({
+                                kind: "audio_content",
+                                mimeType: mimeType,
+                                blobData: new Uint8Array(data),
+                                blobUrl: client.dataToBlobUrl(data, mimeType),
+                                ...quantised,
+                            });
+                        } finally {
+                            mediaRecorder = undefined;
+                            stream.getTracks().forEach((track) => track.stop());
+                            activeStream = undefined;
+                        }
+                    });
+
+                    mediaRecorder.start(200);
+                })
+                .catch(() => (supported = false)); //catch the case where the user denies access
+        }
+    }
+</script>
+
+{#if supported}
+    <IconButton padding={"md"} size={"lg"} mode={"primary"} onclick={toggle}>
+        {#snippet icon(color)}
+            {#if activeStream !== undefined}
+                <RadioboxMarked {color} />
+            {:else}
+                <Microphone {color} />
+            {/if}
+        {/snippet}
+    </IconButton>
+{/if}
diff --git a/frontend/app/src/mobile/features/chats/core/content/AudioContent.svelte b/frontend/app/src/mobile/features/chats/core/content/AudioContent.svelte
new file mode 100644
index 0000000000..0730af3d31
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/content/AudioContent.svelte
@@ -0,0 +1,366 @@
+<script module lang="ts">
+    let current: WaveSurfer | undefined = undefined;
+    let registry: WaveSurfer[] = [];
+    function register(w: WaveSurfer) {
+        registry.push(w);
+    }
+
+    function playNext(w: WaveSurfer) {
+        for (let i = registry.length - 1; i > 0; i--) {
+            if (registry[i] === w) {
+                registry[i - 1]?.play();
+            }
+        }
+    }
+</script>
+
+<script lang="ts">
+    import { i18nKey } from "@src/i18n/i18n";
+    import { rtlStore } from "@src/stores/rtl";
+    import {
+        Body,
+        BodySmall,
+        ChatFootnote,
+        ColourVars,
+        Column,
+        Container,
+        IconButton,
+        Row,
+        type ColourVarKeys,
+    } from "component-lib";
+    import type { AudioContent, TextContent as TextContentType } from "@client";
+    import { onMount, type Snippet } from "svelte";
+    import Close from "svelte-material-icons/Close.svelte";
+    import MicrophoneOutline from "svelte-material-icons/MicrophoneOutline.svelte";
+    import Pause from "svelte-material-icons/PauseCircleOutline.svelte";
+    import Play from "svelte-material-icons/PlayCircleOutline.svelte";
+    import WaveSurfer from "wavesurfer.js";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import TextContent from "./TextContent.svelte";
+
+    interface Props {
+        content: AudioContent;
+        edited: boolean;
+        blockLevelMarkdown?: boolean;
+        onRemove?: () => void;
+        draft?: boolean;
+        me: boolean;
+        reply?: boolean;
+        title?: Snippet;
+    }
+
+    let {
+        content,
+        edited,
+        blockLevelMarkdown = false,
+        onRemove,
+        draft = false,
+        me,
+        reply = false,
+        title,
+    }: Props = $props();
+
+    // TODO this pattern seems to repeat itself for various components, we should find a better way to handle this.
+    let textContent = $derived<TextContentType | undefined>(
+        content.caption ? { kind: "text_content", text: content.caption ?? "" } : undefined,
+    );
+    let hasContent = $derived(!!textContent?.text);
+    let textHighlightColour = $derived<ColourVarKeys>(me ? "secondaryLight" : "primaryLight");
+
+    let currentTime = $state<string>();
+    let waveformDiv: HTMLDivElement | undefined;
+    let playing = $state(false);
+    let duration = $derived(Number(content.durationMs) / 1000);
+    let speed = $state(1);
+
+    function togglePlay() {
+        wavesurfer?.playPause();
+        playing = wavesurfer?.isPlaying() ?? false;
+    }
+
+    const precomputed = $derived(Array.from(content.samples, (s: number) => s / 255));
+
+    let wavesurfer = $state<WaveSurfer>();
+
+    function formatTime(seconds: number) {
+        const minutes = Math.floor(seconds / 60);
+        const secondsRemainder = Math.round(seconds) % 60;
+        const paddedSeconds = `0${secondsRemainder}`.slice(-2);
+        return `${minutes}:${paddedSeconds}`;
+    }
+
+    $effect(() => {
+        wavesurfer?.setPlaybackRate(speed, true);
+    });
+
+    function cycleSpeed() {
+        switch (speed) {
+            case 1:
+                speed = 1.5;
+                break;
+            case 1.5:
+                speed = 2;
+                break;
+            case 2:
+                speed = 1;
+                break;
+            default:
+                speed = 1;
+                break;
+        }
+    }
+
+    function getColor(varName: string): string {
+        const root = document.documentElement;
+        return getComputedStyle(root).getPropertyValue(varName).trim();
+    }
+
+    const textPrimaryColor = getColor("--text-primary");
+    const primaryLightColor = getColor("--primary-light");
+    const secondaryColor = getColor("--secondary");
+
+    onMount(() => {
+        if (waveformDiv !== undefined) {
+            wavesurfer = WaveSurfer.create({
+                height: 42,
+                barHeight: 0.65,
+                width: "100%",
+                container: waveformDiv,
+                waveColor: draft || !me ? textPrimaryColor : primaryLightColor,
+                progressColor: draft || !me ? secondaryColor : textPrimaryColor,
+                barWidth: 3,
+                barRadius: 6,
+                dragToSeek: true,
+                barGap: 4,
+                url: content.blobUrl,
+                peaks: precomputed.length > 0 ? [precomputed] : undefined,
+                duration,
+            });
+
+            wavesurfer.on("interaction", () => {
+                wavesurfer?.play();
+            });
+
+            wavesurfer.on("finish", () => {
+                wavesurfer?.setTime(0);
+                if (wavesurfer) {
+                    playNext(wavesurfer);
+                }
+            });
+
+            wavesurfer.on("timeupdate", (t) => (currentTime = formatTime(t)));
+
+            wavesurfer.on("play", () => {
+                if (wavesurfer !== current) {
+                    current?.pause();
+                    current = wavesurfer;
+                }
+                playing = true;
+            });
+
+            wavesurfer.on("pause", () => (playing = false));
+
+            register(wavesurfer);
+        }
+    });
+</script>
+
+{#snippet togglePlayButton()}
+    {@const color = me && !draft ? ColourVars.textPrimary : ColourVars.textSecondary}
+    <IconButton padding="xs" size={"lg"} onclick={togglePlay} mode={"transparent"}>
+        {#snippet icon()}
+            {#if playing}
+                <Pause {color} />
+            {:else}
+                <Play {color} />
+            {/if}
+        {/snippet}
+    </IconButton>
+{/snippet}
+
+{#snippet remainingTime()}
+    {@const currentColor = me && !draft ? "textPrimary" : "secondary"}
+    {@const durationColor = me && !draft ? "primaryLight" : "textSecondary"}
+    <Container gap={"xxs"} padding={["zero", "sm"]}>
+        <ChatFootnote colour={currentColor} width={"hug"}>
+            {currentTime ?? "0:00"}
+        </ChatFootnote>
+        <ChatFootnote colour={durationColor} width={"hug"}>/</ChatFootnote>
+        <ChatFootnote colour={durationColor} width={"hug"}>
+            {formatTime(duration)}
+        </ChatFootnote>
+    </Container>
+{/snippet}
+
+{#snippet messageTextContent()}
+    {#if textContent?.text}
+        <TextContent
+            content={textContent}
+            {me}
+            {reply}
+            {blockLevelMarkdown}
+            {edited}
+            showPreviews={false}
+            isPreview={draft || reply} />
+    {/if}
+{/snippet}
+
+{#snippet waveformView()}
+    {@const bgColor = hasContent
+        ? me
+            ? ColourVars.primaryMuted
+            : ColourVars.background1
+        : "transparent"}
+    <Row
+        minWidth={"18rem"}
+        width={"fill"}
+        padding={["sm", "xs", hasContent ? "sm" : "xxs", "zero"]}
+        borderRadius={hasContent ? [me ? "lg" : "md", !me ? "lg" : "md", "md", "md"] : "zero"}
+        backgroundColor={bgColor}>
+        <Row width="hug" mainAxisAlignment={"center"}>
+            {@render togglePlayButton()}
+        </Row>
+        <Row width="fill">
+            <Column>
+                <div
+                    bind:this={waveformDiv}
+                    class="waveform"
+                    class:has_content={hasContent}
+                    class:me
+                    class:draft>
+                </div>
+                {@render remainingTime()}
+            </Column>
+        </Row>
+        <Row width="hug" padding={["xs", "zero"]}>
+            <Container
+                backgroundColor={me && !draft ? ColourVars.primaryLight : ColourVars.textTertiary}
+                borderRadius={"xl"}
+                mainAxisAlignment={"center"}
+                onClick={cycleSpeed}
+                gap={"xs"}
+                height="hug"
+                width={{ size: "3rem" }}
+                padding={["xs", "md"]}
+                crossAxisAlignment={"center"}>
+                <Body
+                    width={"hug"}
+                    fontWeight={"bold"}
+                    colour={me && !draft ? "myChatBubble" : "textPrimary"}>
+                    x{speed}
+                </Body>
+            </Container>
+        </Row>
+    </Row>
+{/snippet}
+
+{#if reply}
+    <!-- User is replying to an audio attached message, and this is how reply is rendered -->
+    <Column gap="xxs">
+        {@render title?.()}
+        <Row gap="xs" crossAxisAlignment="center">
+            <MicrophoneOutline
+                size="1rem"
+                color={me ? ColourVars.secondaryLight : ColourVars.primaryLight} />
+            <BodySmall colour={textHighlightColour}>
+                <!-- TODO i18n -->
+                <Translatable resourceKey={i18nKey("Audio message")} /> ({formatTime(duration)})
+            </BodySmall>
+        </Row>
+    </Column>
+{:else if draft}
+    <!-- User is drafting a new message with audio attached, so we render it here -->
+    <Column padding="xs">
+        <Row
+            supplementalClass="audio_draft_contents"
+            padding={["md", "sm", "sm", "sm"]}
+            borderRadius="lg"
+            background={ColourVars.background1}>
+            {@render waveformView()}
+            <div class="close" class:rtl={$rtlStore}>
+                <IconButton size="sm" onclick={onRemove}>
+                    {#snippet icon()}
+                        <Close color={ColourVars.textPrimary} />
+                    {/snippet}
+                </IconButton>
+            </div>
+        </Row>
+    </Column>
+{:else}
+    <!-- Render a message with audio attached -->
+    {@render waveformView()}
+    {@render messageTextContent()}
+{/if}
+
+<style lang="scss">
+    :global {
+        .audio_draft_contents {
+            // TODO apply this to all attachment variants
+            animation: grow-height 300ms ease-out forwards;
+            will-change: max-height, opacity;
+        }
+        .waveform {
+            width: 100%;
+            padding: 0 0.5rem;
+
+            ::part(scroll),
+            ::part(wrapper) {
+                overflow: visible;
+            }
+
+            ::part(cursor) {
+                height: 100%;
+                width: 1rem;
+                background-color: transparent;
+            }
+
+            ::part(cursor):before {
+                content: "";
+                width: 0.75rem;
+                height: 0.75rem;
+                display: block;
+                position: relative;
+                top: 50%;
+                left: -0.5rem;
+                transform: translateY(-50%);
+                border-radius: var(--rad-circle);
+                background-color: var(--secondary);
+                border-width: var(--bw-thick);
+                border-style: solid;
+                border-color: var(--background-1);
+            }
+
+            ::part(region) {
+                width: 0.125rem;
+                background-color: var(--primary);
+            }
+
+            &.me:not(.draft) {
+                ::part(cursor):before {
+                    background-color: var(--text-primary);
+                }
+
+                &.has_content ::part(cursor):before {
+                    border-color: var(--primary-muted);
+                }
+
+                &:not(.has_content) ::part(cursor):before {
+                    border-color: var(--my-chat-bubble);
+                }
+            }
+        }
+    }
+
+    .close {
+        position: absolute;
+        top: -0.25rem;
+
+        &:not(.rtl) {
+            right: -0.25rem;
+        }
+
+        &.rtl {
+            left: -0.25rem;
+        }
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/chats/core/content/BlockedContent.svelte b/frontend/app/src/mobile/features/chats/core/content/BlockedContent.svelte
new file mode 100644
index 0000000000..4be680d7d9
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/content/BlockedContent.svelte
@@ -0,0 +1,16 @@
+<svelte:options immutable />
+
+<script lang="ts">
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+</script>
+
+<div class="blocked">
+    <Translatable resourceKey={i18nKey("messageBlocked")} />
+</div>
+
+<style lang="scss">
+    .blocked {
+        @include font(light, italic, fs-80);
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/chats/core/content/BotPlaceholderContent.svelte b/frontend/app/src/mobile/features/chats/core/content/BotPlaceholderContent.svelte
new file mode 100644
index 0000000000..02d7832550
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/content/BotPlaceholderContent.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+    import Typing from "@src/ui/Typing.svelte";
+</script>
+
+<span class="placeholder">
+    <Typing />
+</span>
+
+<style lang="scss">
+    .placeholder {
+        padding: $sp4 0;
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/chats/core/content/ChatMessageContent.svelte b/frontend/app/src/mobile/features/chats/core/content/ChatMessageContent.svelte
new file mode 100644
index 0000000000..46c3f8352e
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/content/ChatMessageContent.svelte
@@ -0,0 +1,196 @@
+<script lang="ts">
+    import type { MessageContent, MessageContext, OgPreview, RehydratedMessagePreview } from "@client";
+    import { i18nKey } from "@src/i18n/i18n";
+    import AudioContent from "./AudioContent.svelte";
+    import BlockedContent from "./BlockedContent.svelte";
+    import BotPlaceholderContent from "./BotPlaceholderContent.svelte";
+    import CryptoContent from "./CryptoContent.svelte";
+    import DeletedContent from "./DeletedContent.svelte";
+    import FileContent from "./FileContent.svelte";
+    import GiphyContent from "./GiphyContent.svelte";
+    import ImageContent from "./ImageContent.svelte";
+    import MessageContentInitial from "./MessageContentInitial.svelte";
+    import MessageReminderContent from "./MessageReminderContent.svelte";
+    import MessageReminderCreatedContent from "./MessageReminderCreatedContent.svelte";
+    import P2PSwapContent from "./P2PSwapContent.svelte";
+    import PlaceholderContent from "./PlaceholderContent.svelte";
+    import PollContent from "./PollContent.svelte";
+    import PrizeContent from "./PrizeContent.svelte";
+    import PrizeWinnerContent from "./PrizeWinnerContent.svelte";
+    import ProposalContent from "@src/mobile/features/proposals/ProposalContent.svelte";
+    import ReportedMessageContent from "./ReportedMessageContent.svelte";
+    import TextContent from "./TextContent.svelte";
+    import UserReferralCardContent from "./UserReferralCardContent.svelte";
+    import VideoCallContent from "./VideoCallContent.svelte";
+    import VideoContent from "./VideoContent.svelte";
+
+    interface Props {
+        content: MessageContent;
+        contentWidth?: number;
+        me?: boolean;
+        truncate?: boolean;
+        fill: boolean;
+        reply?: boolean;
+        pinned?: boolean;
+        height?: number | undefined;
+        readonly: boolean;
+        senderId: string;
+        messageId: bigint;
+        edited: boolean;
+        messageContext: MessageContext;
+        messageIndex: number;
+        collapsed?: boolean;
+        undeleting?: boolean;
+        intersecting: boolean;
+        failed: boolean;
+        timestamp?: bigint | undefined;
+        blockLevelMarkdown: boolean;
+        isPreview?: boolean;
+        hasReplySibling?: boolean;
+        onExpandMessage?: (() => void) | undefined;
+        onRemovePreview?: (url: string) => void;
+        onRegisterVote?: (vote: { type: "delete" | "register"; answerIndex: number }) => void;
+        ogPreviews?: OgPreview[];
+        messagePreviews?: RehydratedMessagePreview[];
+    }
+
+    let {
+        content,
+        contentWidth = $bindable(),
+        me = false,
+        truncate = false,
+        fill,
+        reply = false,
+        pinned = false,
+        height = undefined,
+        readonly,
+        senderId,
+        messageId,
+        edited,
+        messageContext,
+        messageIndex,
+        collapsed = false,
+        undeleting = false,
+        intersecting,
+        failed,
+        timestamp = undefined,
+        blockLevelMarkdown,
+        isPreview = false,
+        onExpandMessage = undefined,
+        onRemovePreview,
+        onRegisterVote,
+        ogPreviews = [],
+        messagePreviews = [],
+    }: Props = $props();
+</script>
+
+{#if content.kind === "text_content"}
+    <TextContent
+        {me}
+        {edited}
+        {truncate}
+        {content}
+        {blockLevelMarkdown}
+        {isPreview}
+        {onRemovePreview}
+        {ogPreviews}
+        {messagePreviews} />
+{:else if content.kind === "image_content"}
+    <ImageContent
+        bind:contentWidth
+        {me}
+        {edited}
+        {intersecting}
+        {fill}
+        {content}
+        {reply}
+        {pinned}
+        {height}
+        {blockLevelMarkdown}
+        {isPreview}
+        {onRemovePreview} />
+{:else if content.kind === "video_content"}
+    <VideoContent
+        bind:contentWidth
+        {me}
+        {fill}
+        {edited}
+        {content}
+        {reply}
+        {height}
+        {blockLevelMarkdown}
+        {isPreview} />
+{:else if content.kind === "video_call_content"}
+    <VideoCallContent {me} {senderId} {messageIndex} {content} {timestamp} />
+{:else if content.kind === "audio_content"}
+    <AudioContent {me} {edited} {content} {blockLevelMarkdown} />
+{:else if content.kind === "file_content"}
+    <FileContent {edited} {me} {content} {blockLevelMarkdown} />
+{:else if content.kind === "deleted_content"}
+    <DeletedContent {me} {content} {undeleting} />
+{:else if content.kind === "blocked_content"}
+    <BlockedContent />
+{:else if content.kind === "crypto_content"}
+    <CryptoContent {senderId} {content} {me} {reply} {edited} {blockLevelMarkdown} />
+{:else if content.kind === "placeholder_content"}
+    <PlaceholderContent />
+{:else if content.kind === "bot_placeholder_content"}
+    <BotPlaceholderContent />
+{:else if content.kind === "prize_content_initial"}
+    <MessageContentInitial
+        text={i18nKey(
+            failed ? "prizes.creatingPrizeMessageFailed" : "prizes.creatingYourPrizeMessage",
+        )}
+        {failed} />
+{:else if content.kind === "p2p_swap_content_initial"}
+    <MessageContentInitial
+        text={i18nKey(failed ? "p2pSwap.failedToCreateMessage" : "p2pSwap.creatingYourMessage")}
+        {failed} />
+{:else if content.kind === "prize_content"}
+    <PrizeContent chatId={messageContext.chatId} {messageId} {content} {me} {intersecting} />
+{:else if content.kind === "p2p_swap_content"}
+    <P2PSwapContent
+        {senderId}
+        {messageContext}
+        {messageId}
+        {content}
+        {me}
+        {reply}
+        {pinned}
+        {isPreview} />
+{:else if content.kind === "prize_winner_content"}
+    <PrizeWinnerContent {content} />
+{:else if content.kind === "poll_content"}
+    <PollContent {readonly} {me} {content} {senderId} {reply} {edited} {onRegisterVote} />
+{:else if content.kind === "giphy_content"}
+    <GiphyContent
+        {me}
+        {edited}
+        {intersecting}
+        {fill}
+        {content}
+        {reply}
+        {height}
+        {blockLevelMarkdown}
+        {isPreview} />
+{:else if content.kind === "proposal_content"}
+    <ProposalContent
+        {content}
+        chatId={messageContext.chatId}
+        {messageIndex}
+        {messageId}
+        {collapsed}
+        {readonly}
+        {reply}
+        {onExpandMessage} />
+{:else if content.kind === "message_reminder_created_content" && !content.hidden}
+    <MessageReminderCreatedContent {content} />
+{:else if content.kind === "message_reminder_content"}
+    <MessageReminderContent {content} />
+{:else if content.kind === "reported_message_content"}
+    <ReportedMessageContent {content} />
+{:else if content.kind === "meme_fighter_content"}
+    <ImageContent {me} {edited} {intersecting} {fill} {content} {reply} {pinned} {height} />
+{:else if content.kind === "user_referral_card"}
+    <UserReferralCardContent />
+{/if}
diff --git a/frontend/app/src/components_mobile/home/ChatMessageReplyContent.svelte b/frontend/app/src/mobile/features/chats/core/content/ChatMessageReplyContent.svelte
similarity index 97%
rename from frontend/app/src/components_mobile/home/ChatMessageReplyContent.svelte
rename to frontend/app/src/mobile/features/chats/core/content/ChatMessageReplyContent.svelte
index 21c99d4e2e..8d5f3a7ed1 100644
--- a/frontend/app/src/components_mobile/home/ChatMessageReplyContent.svelte
+++ b/frontend/app/src/mobile/features/chats/core/content/ChatMessageReplyContent.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Row, ChatCaption } from "component-lib";
     import type { MessageContent, MessageContext } from "@client";
-    import { i18nKey } from "../../i18n/i18n";
+    import { i18nKey } from "@src/i18n/i18n";
     import AudioContent from "./AudioContent.svelte";
     import BlockedContent from "./BlockedContent.svelte";
     import BotPlaceholderContent from "./BotPlaceholderContent.svelte";
@@ -18,7 +18,7 @@
     import PollContent from "./PollContent.svelte";
     import PrizeContent from "./PrizeContent.svelte";
     import PrizeWinnerContent from "./PrizeWinnerContent.svelte";
-    import ProposalContent from "./proposals/ProposalContent.svelte";
+    import ProposalContent from "@src/mobile/features/proposals/ProposalContent.svelte";
     import ReportedMessageContent from "./ReportedMessageContent.svelte";
     import UserReferralCardContent from "./UserReferralCardContent.svelte";
     import VideoCallContent from "./VideoCallContent.svelte";
diff --git a/frontend/app/src/mobile/features/chats/core/content/CryptoContent.svelte b/frontend/app/src/mobile/features/chats/core/content/CryptoContent.svelte
new file mode 100644
index 0000000000..82387a632c
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/content/CryptoContent.svelte
@@ -0,0 +1,201 @@
+<script lang="ts">
+    import { Avatar, Body, BodySmall, ColourVars, Column, Row, Subtitle } from "component-lib";
+    import { getContext, type Snippet } from "svelte";
+    import type { CryptocurrencyContent, OpenChat } from "@client";
+    import { currentUserIdStore, enhancedCryptoLookup } from "@client";
+    import { _ } from "svelte-i18n";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import { TokenState } from "@src/mobile/features/wallet/walletState.svelte";
+    import MessageRenderer from "@src/mobile/features/chats/core/MessageRenderer.svelte";
+    import Alert from "svelte-material-icons/AlertRhombusOutline.svelte";
+    import ChevronRight from "svelte-material-icons/ChevronRight.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        content: CryptocurrencyContent;
+        title?: Snippet;
+        me?: boolean;
+        reply?: boolean;
+        senderId: string;
+        draft?: boolean;
+        edited?: boolean;
+        blockLevelMarkdown?: boolean;
+        onRemove?: () => void;
+    }
+
+    let {
+        content,
+        title,
+        me = false,
+        reply = false,
+        senderId,
+        draft = false,
+        edited = false,
+        blockLevelMarkdown = false,
+        onRemove,
+    }: Props = $props();
+
+    let participantUserId = $derived(
+        $currentUserIdStore === senderId ? content.transfer.recipient : senderId,
+    );
+
+    let tokenState = $derived(new TokenState($enhancedCryptoLookup.get(content.transfer.ledger)!));
+    let transactionUrl = $derived(
+        content.transfer.kind === "completed"
+            ? client.buildTransactionUrl(content.transfer.blockIndex, content.transfer.ledger)
+            : undefined,
+    );
+
+    function username(userId: string): string {
+        return userId === currentUserIdStore.value ? $_("you") : `@UserId(${userId})`;
+    }
+</script>
+
+{#snippet transactionDetails()}
+    <a class="transaction_link" href={transactionUrl ?? "_blank"} target="_blank">
+        <Row
+            width="fill"
+            padding="md"
+            borderRadius="md"
+            crossAxisAlignment="center"
+            background={ColourVars.background0}>
+            <Column>
+                <Subtitle fontWeight="bold">
+                    {#if me}
+                        <Markdown text={`@UserId(${participantUserId})`} inline={true} />
+                    {:else}
+                        You
+                    {/if}
+                </Subtitle>
+                <Body colour="textSecondary">
+                    Received {tokenState.formatTokens(content.transfer.amountE8s)}
+                    {tokenState.symbol}
+                </Body>
+            </Column>
+            <ChevronRight size="1.5rem" color={ColourVars.textSecondary} />
+        </Row>
+    </a>
+{/snippet}
+
+{#snippet tokenDetailsView()}
+    <Row
+        width="fill"
+        gap="lg"
+        borderRadius="md"
+        padding="md"
+        background={ColourVars.background0}
+        crossAxisAlignment="center">
+        <Avatar size={"md"} url={tokenState.logo} />
+        <Column width="fill">
+            <Subtitle fontWeight="bold">{tokenState.symbol}</Subtitle>
+            <Body colour="textSecondary" fontWeight="bold" maxLines={1}>
+                {tokenState.token.name}
+            </Body>
+        </Column>
+        <Column width="hug">
+            <Subtitle fontWeight="bold" align="end">
+                {tokenState.formatTokens(content.transfer.amountE8s)}
+            </Subtitle>
+            <Body colour="primary" fontWeight="bold" align="end">
+                ≈ {tokenState.formatConvertedTokens(content.transfer.amountE8s)}
+            </Body>
+        </Column>
+    </Row>
+{/snippet}
+
+{#snippet replyView(textContent?: Snippet)}
+    {@const iamSender = $currentUserIdStore === senderId}
+    {@const textColor = me ? "secondary" : "primary"}
+    {@render title?.()}
+    <Row padding={["xs", "zero", "zero"]}>
+        <Body fontWeight="semi-bold" colour={textColor}>
+            <Translatable resourceKey={i18nKey(iamSender ? "You sent" : "You received")} />
+            {tokenState.formatTokens(content.transfer.amountE8s)}
+            {tokenState.symbol}
+        </Body>
+    </Row>
+    {@render textContent?.()}
+{/snippet}
+
+{#snippet draftView()}
+    <Column supplementalClass="send_tx_draft" padding="xs">
+        <Column padding="xs" gap="xs" borderRadius="lg" background={ColourVars.background2}>
+            <Row
+                supplementalClass="tx_header"
+                gap={"xs"}
+                padding={["xs", "lg", "xs", "md"]}
+                crossAxisAlignment={"center"}
+                borderRadius={["lg", "lg", "md", "md"]}>
+                <Body width="hug" colour="textSecondary" fontWeight="semi-bold">Sending to</Body>
+                <Body width="hug" colour="primary" maxLines={1}>
+                    <Markdown text={username(content.transfer.recipient)} inline={true} />
+                </Body>
+            </Row>
+            {@render tokenDetailsView()}
+            <Row
+                gap="md"
+                borderRadius={["md", "md", "lg", "lg"]}
+                crossAxisAlignment={"center"}
+                padding={["sm", "lg", "sm", "sm"]}
+                background={ColourVars.background0}>
+                <Alert size={"1.5rem"} color={ColourVars.warning} />
+                <BodySmall colour={"warning"}>
+                    <Translatable
+                        resourceKey={i18nKey("tokenTransfer.warning", {
+                            token: tokenState.symbol,
+                        })} />
+                </BodySmall>
+            </Row>
+        </Column>
+    </Column>
+{/snippet}
+
+{#snippet regularView(textContent?: Snippet)}
+    <Column padding={["zero", "zero", textContent ? "zero" : me ? "xl" : "lg"]}>
+        <Column
+            gap={"xs"}
+            padding={me ? "xs" : "zero"}
+            borderRadius={me ? ["lg", "md", "md", "md"] : "zero"}
+            background={me ? ColourVars.background2 : undefined}>
+            <Row width="fill" mainAxisAlignment="end" padding={["xs", "xs", "xxs"]}>
+                <BodySmall colour="primary" fontWeight="bold" align="end">
+                    <Translatable
+                        resourceKey={i18nKey(me ? "Transaction sent" : "Transaction received")} />
+                </BodySmall>
+            </Row>
+            {@render transactionDetails()}
+            {@render tokenDetailsView()}
+        </Column>
+    </Column>
+    {@render textContent?.()}
+{/snippet}
+
+<MessageRenderer
+    {replyView}
+    {draftView}
+    {regularView}
+    caption={content.caption}
+    {me}
+    {reply}
+    {draft}
+    {edited}
+    {blockLevelMarkdown}
+    {onRemove} />
+
+<style lang="scss">
+    .transaction_link {
+        display: block;
+        width: 100%;
+    }
+
+    :global {
+        .send_tx_draft {
+            .tx_header profile-link {
+                text-decoration: none !important;
+            }
+        }
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/chats/core/content/DeletedContent.svelte b/frontend/app/src/mobile/features/chats/core/content/DeletedContent.svelte
new file mode 100644
index 0000000000..ac6656c951
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/content/DeletedContent.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+    import { BodySmall, Column } from "component-lib";
+    import {
+        OPENCHAT_BOT_USER_ID,
+        selectedChatWebhooksStore,
+        selectedCommunityMembersStore,
+        type DeletedContent,
+        type OpenChat,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        content: DeletedContent;
+        undeleting: boolean;
+        me: boolean;
+    }
+
+    let { content, undeleting }: Props = $props();
+
+    let date = $derived(new Date(Number(content.timestamp)));
+    let timestampStr = $derived(
+        `${client.toLongDateString(date)} @ ${client.toShortTimeString(date)}`,
+    );
+    let username = $derived(
+        client.getDisplayName(
+            content.deletedBy,
+            $selectedCommunityMembersStore,
+            $selectedChatWebhooksStore,
+        ),
+    );
+</script>
+
+<Column padding={["xs", "sm"]}>
+    <BodySmall fontWeight={"light"} colour={"textTertiary"} italic={true}>
+        {#if undeleting}
+            <Translatable
+                resourceKey={i18nKey("undeletingMessage", {
+                    username,
+                    timestamp: timestampStr,
+                })} />
+        {:else if content.deletedBy === OPENCHAT_BOT_USER_ID}
+            <Markdown
+                text={$_("messageDeletedByOpenChatBot", {
+                    values: {
+                        username,
+                        timestamp: timestampStr,
+                        rules: "/guidelines?section=3",
+                        modclub: "https://modclub.ai/",
+                    },
+                })} />
+        {:else}
+            <Translatable
+                resourceKey={i18nKey("messageDeleted", {
+                    username,
+                    timestamp: timestampStr,
+                })} />
+        {/if}
+    </BodySmall>
+</Column>
diff --git a/frontend/app/src/mobile/features/chats/core/content/ExternalContent.svelte b/frontend/app/src/mobile/features/chats/core/content/ExternalContent.svelte
new file mode 100644
index 0000000000..0885f9c3f9
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/content/ExternalContent.svelte
@@ -0,0 +1,136 @@
+<script lang="ts">
+    import { currentUserStore } from "@client";
+    import { onMount } from "svelte";
+    import AlertCircleOutline from "svelte-material-icons/AlertCircleOutline.svelte";
+    import Cancel from "svelte-material-icons/Cancel.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { currentTheme } from "@src/theme/themes";
+    import type { Theme } from "@src/theme/types";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import PrivatePreview from "@src/mobile/features/chats/core/PrivatePreview.svelte";
+
+    interface Props {
+        externalUrl: string;
+        frozen: boolean;
+        privateChatPreview: boolean;
+    }
+
+    let { externalUrl, frozen, privateChatPreview }: Props = $props();
+
+    let iframe: HTMLIFrameElement | undefined = $state();
+    let connected = $state(false);
+    let error = $state(false);
+
+    onMount(() => {
+        window.addEventListener("message", onMessage);
+        return () => {
+            window.removeEventListener("message", onMessage);
+            iframe?.removeEventListener("error", onError);
+        };
+    });
+
+    function onError() {
+        error = true;
+    }
+
+    function updateTheme(theme: Theme) {
+        if (connected && iframe) {
+            sendMessage(iframe, origin, {
+                kind: "set_theme",
+                theme,
+            });
+        }
+    }
+
+    function debug(msg: string, ...params: unknown[]): void {
+        console.debug(`OPENCHAT_EXTERNAL_HOST: ${msg}`, params);
+    }
+
+    function onMessage(ev: MessageEvent<{ kind: "external_content_ready" }>) {
+        if (ev.origin === origin && ev.data.kind === "external_content_ready") {
+            debug("External content signals its readiness");
+            if (iframe) {
+                sendMessage(iframe, origin, {
+                    kind: "initialise_external_content",
+                    theme: $currentTheme,
+                    username: $currentUserStore.username,
+                });
+            }
+            connected = true;
+        }
+    }
+
+    function sendMessage(frame: HTMLIFrameElement, targetOrigin: string, msg: unknown) {
+        if (frame && frame.contentWindow) {
+            try {
+                frame.contentWindow.postMessage(msg, targetOrigin);
+            } catch (err) {
+                console.log("Error sending message to iframe", err);
+            }
+        }
+    }
+    let origin = $derived(new URL(externalUrl).origin);
+    $effect(() => {
+        updateTheme($currentTheme);
+    });
+    $effect(() => {
+        // This is just a bit of a hack to make sure we pick up when the external url changes
+        if (externalUrl !== undefined) {
+            error = false;
+            connected = false;
+        }
+    });
+    $effect(() => {
+        if (iframe && !frozen && !privateChatPreview) {
+            iframe.removeEventListener("error", onError);
+            iframe.addEventListener("error", onError);
+        }
+    });
+</script>
+
+{#if frozen}
+    <div class="error">
+        <Cancel size={"2em"} color={"var(--error)"} />
+        <Translatable resourceKey={i18nKey("externalContent.frozen")} />
+    </div>
+{:else if privateChatPreview}
+    <div class="preview">
+        <PrivatePreview />
+    </div>
+{:else if error}
+    <div class="error">
+        <AlertCircleOutline size={"2em"} color={"var(--error)"} />
+        <Translatable resourceKey={i18nKey("externalContent.error")} />
+    </div>
+{/if}
+
+{#if !frozen && !privateChatPreview}
+    <iframe title="External Content" bind:this={iframe} src={externalUrl}></iframe>
+{/if}
+
+<style lang="scss">
+    iframe {
+        height: 100%;
+        width: 100%;
+    }
+
+    .error {
+        display: flex;
+        flex-direction: column;
+        gap: $sp5;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        text-align: center;
+        padding: 0 toRem(100);
+
+        @include font(bold, normal, fs-140);
+    }
+
+    .preview {
+        display: flex;
+        flex-direction: column-reverse;
+        padding: $sp3 $sp4;
+        flex: auto;
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/chats/core/content/FileAttacher.svelte b/frontend/app/src/mobile/features/chats/core/content/FileAttacher.svelte
new file mode 100644
index 0000000000..124ca00c72
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/content/FileAttacher.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+    import type { AttachmentContent, OpenChat } from "@client";
+    import { getContext, type Snippet } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        accept?: string;
+        onFileSelected: (content: AttachmentContent) => void;
+        children: Snippet<[() => void]>;
+    }
+
+    let { accept, onFileSelected, children }: Props = $props();
+
+    let fileinput: HTMLInputElement | undefined = $state();
+
+    function click() {
+        fileinput?.click();
+    }
+
+    function fileSelected(e: { currentTarget: HTMLInputElement }) {
+        if (e.currentTarget) {
+            const target = e.currentTarget;
+            if (target.files && target.files[0]) {
+                client
+                    .messageContentFromFile(target.files[0])
+                    .then((content) => {
+                        onFileSelected(content);
+                    })
+                    .catch((err) => {
+                        toastStore.showFailureToast(i18nKey(err));
+                    });
+
+                e.currentTarget.value = "";
+            }
+        }
+    }
+</script>
+
+{@render children(click)}
+<input bind:this={fileinput} hidden type="file" {accept} onchange={fileSelected} />
diff --git a/frontend/app/src/mobile/features/chats/core/content/FileContent.svelte b/frontend/app/src/mobile/features/chats/core/content/FileContent.svelte
new file mode 100644
index 0000000000..7b14db2f79
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/content/FileContent.svelte
@@ -0,0 +1,169 @@
+<script lang="ts">
+    import { _ } from "svelte-i18n";
+    import { rtlStore } from "@src/stores/rtl";
+    import { getContext, type Snippet } from "svelte";
+    import {
+        Body,
+        BodySmall,
+        ColourVars,
+        Column,
+        IconButton,
+        Row,
+        type Padding,
+        type Radius,
+    } from "component-lib";
+    import type { FileContent, OpenChat, TextContent as TextContentType } from "@client";
+    import { mimeTypeToHumanReadable } from "@client";
+    import { getProxyAdjustedBlobUrl } from "@src/utils/media";
+    import MessageRenderer from "@src/mobile/features/chats/core/MessageRenderer.svelte";
+    import Close from "svelte-material-icons/Close.svelte";
+    import FileUploadOutline from "svelte-material-icons/FileUploadOutline.svelte";
+
+    const client = getContext<OpenChat>("client");
+    const BULL = "\u2022";
+
+    interface Props {
+        content: FileContent;
+        title?: Snippet;
+        me?: boolean;
+        draft?: boolean;
+        edited: boolean;
+        reply?: boolean;
+        onRemove?: () => void;
+        blockLevelMarkdown?: boolean;
+    }
+
+    let {
+        content,
+        title,
+        me = false,
+        draft = false,
+        edited,
+        reply = false,
+        blockLevelMarkdown = false,
+        onRemove,
+    }: Props = $props();
+
+    let normalisedContent = $derived<TextContentType | undefined>(
+        content.caption ? { kind: "text_content", text: content.caption ?? "" } : undefined,
+    );
+</script>
+
+{#snippet fileContent(borderRadius: Radius, backgroundColor: string, padding?: Padding)}
+    {@const subtextColour = me && reply ? "secondaryLight" : "primaryLight"}
+    <Column
+        supplementalClass="link_contents"
+        padding={padding ?? "sm"}
+        gap="xs"
+        {borderRadius}
+        {backgroundColor}>
+        <Row>
+            <Body fontWeight="semi-bold">{content.name}</Body>
+        </Row>
+        <Row crossAxisAlignment="center" gap="xs">
+            <FileUploadOutline size="1rem" color={ColourVars[subtextColour]} />
+            <BodySmall width="hug" colour={subtextColour}>
+                {mimeTypeToHumanReadable(content.mimeType)}
+                {BULL}
+                {client.formatFileSize(content.fileSize)}
+            </BodySmall>
+        </Row>
+    </Column>
+{/snippet}
+
+{#snippet replyView(textContent?: Snippet)}
+    <Column>
+        {@render title?.()}
+        <Row gap="xs" crossAxisAlignment="center" padding={["xs", "xxs", "xxs", "zero"]}>
+            {@const textColor = me ? "secondary" : "primary"}
+            <FileUploadOutline size="1rem" color={ColourVars[textColor]} />
+            <Body fontWeight="semi-bold" colour={textColor}>
+                {content.name}
+            </Body>
+        </Row>
+        {@render textContent?.()}
+    </Column>
+{/snippet}
+
+{#snippet draftView(textContent?: Snippet)}
+    <!-- User is sending a new file, and it's still in draft -->
+    <Column padding="xs">
+        <Column
+            supplementalClass="file_draft_contents"
+            backgroundColor={ColourVars.background0}
+            borderRadius="lg">
+            {@render fileContent("zero", "background1")}
+            {@render textContent?.()}
+        </Column>
+    </Column>
+    <div class="close" class:rtl={$rtlStore}>
+        <IconButton size="sm" mode={"dark"} onclick={onRemove}>
+            {#snippet icon()}
+                <Close color={ColourVars.textPrimary} />
+            {/snippet}
+        </IconButton>
+    </div>
+{/snippet}
+
+{#snippet regularView(textContent?: Snippet)}
+    <!-- User has sent a message with file attached, and we're rendering the message -->
+    {@const borderRadius: Radius = [me ? "lg" : "md", me ? "md" : "lg", "md", "md"]}
+    {@const backgroundColor = me ? ColourVars.primaryMuted : ColourVars.background1}
+    {#if content.blobUrl}
+        <a
+            href={getProxyAdjustedBlobUrl(content.blobUrl)}
+            title={$_("downloadFile", { values: { name: content.name } })}
+            download={content.name}
+            role="button"
+            target="_blank"
+            class:rtl={$rtlStore}
+            class:draft
+            class:no_content={!reply && !textContent}
+            class="file_content">
+            {@render fileContent(borderRadius, backgroundColor, ["sm", "md"])}
+        </a>
+        {@render textContent?.()}
+    {/if}
+{/snippet}
+
+<MessageRenderer
+    {replyView}
+    {draftView}
+    {regularView}
+    caption={normalisedContent?.text}
+    {me}
+    {reply}
+    {draft}
+    {edited}
+    {blockLevelMarkdown}
+    {onRemove} />
+
+<style lang="scss">
+    :global(.file_draft_contents) {
+        // TODO apply this to all attachment variants
+        animation: grow-height 300ms ease-out forwards;
+        will-change: max-height, opacity;
+    }
+
+    .file_content {
+        display: block;
+        width: 100%;
+
+        &.no_content {
+            padding-bottom: 1.125rem;
+        }
+    }
+
+    .close {
+        position: absolute;
+        top: var(--sp-xs);
+
+        &:not(.rtl) {
+            right: var(--sp-xs);
+        }
+
+        &.rtl {
+            left: var(--sp-xs);
+        }
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/chats/core/content/GiphyContent.svelte b/frontend/app/src/mobile/features/chats/core/content/GiphyContent.svelte
new file mode 100644
index 0000000000..e365b793bc
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/content/GiphyContent.svelte
@@ -0,0 +1,171 @@
+<script lang="ts">
+    import { type GiphyContent, type TextContent as TextContentType } from "@client";
+    import { rtlStore } from "@src/stores/rtl";
+    import { reservedMediaStyle } from "@src/utils/media";
+    import TextContent from "./TextContent.svelte";
+
+    interface Props {
+        content: GiphyContent;
+        me: boolean;
+        fill: boolean;
+        reply?: boolean;
+        height?: number | undefined;
+        intersecting?: boolean;
+        edited: boolean;
+        blockLevelMarkdown?: boolean;
+        isPreview?: boolean;
+    }
+
+    let {
+        content,
+        me,
+        fill,
+        reply = false,
+        height = undefined,
+        intersecting = true,
+        edited,
+        blockLevelMarkdown = false,
+        isPreview = false,
+    }: Props = $props();
+
+    const MIN_GIF_WIDTH = 250;
+
+    let withCaption = $derived(!!content.caption);
+    let image = $derived(content.mobile);
+    let landscape = $derived(image.height < image.width);
+    let videoWidth = $derived(image.width < MIN_GIF_WIDTH ? MIN_GIF_WIDTH : image.width);
+    let textContent = $derived<TextContentType | undefined>(
+        withCaption ? { kind: "text_content", text: content.caption ?? "" } : undefined,
+    );
+    let style = $derived(
+        height !== undefined
+            ? `height: ${height}px; max-width: ${videoWidth}px;`
+            : reply || isPreview
+              ? `max-width: ${videoWidth}px;`
+              : (reservedMediaStyle(image.width, image.height) ?? `max-width: ${videoWidth}px;`),
+    );
+</script>
+
+<div class="gif_content_wrapper" class:me class:fill class:rtl={$rtlStore}>
+    {#if !intersecting}
+        <div
+            class="placeholder"
+            class:landscape
+            class:fill
+            {style}
+            class:withCaption
+            title={content.caption ?? content.title}
+            class:reply
+            class:rtl={$rtlStore}>
+        </div>
+    {:else}
+        <video
+            autoplay
+            muted
+            loop
+            playsinline
+            bind:clientWidth={videoWidth}
+            class:landscape
+            class:fill
+            class:withCaption
+            class:reply
+            class:rtl={$rtlStore}
+            {style}
+            title={content.caption ?? content.title}>
+            <track kind="captions" />
+            <source src={content.desktop.url} type="video/mp4" />
+        </video>
+    {/if}
+    <div class="attribution">
+        <img src="/assets/klipy_logo.svg" alt="Powered by KLIPY" />
+    </div>
+</div>
+
+{#if textContent?.text}
+    <TextContent
+        content={textContent}
+        {me}
+        {blockLevelMarkdown}
+        {edited}
+        maxWidth={videoWidth}
+        showPreviews={false}
+        {isPreview} />
+{/if}
+
+<style lang="scss">
+    :global {
+        .gif_content_wrapper svg {
+            opacity: 0.75;
+            position: absolute;
+            bottom: var(--sp-xxs);
+            filter: drop-shadow(0 0 0.125rem var(--backdrop));
+        }
+
+        .gif_content_wrapper:not(.rtl) svg {
+            left: var(--sp-xs);
+        }
+
+        .gif_content_wrapper.rtl svg {
+            right: var(--sp-xs);
+        }
+    }
+
+    .gif_content_wrapper {
+        position: relative;
+        overflow: hidden;
+
+        // Border radiuses logic is same for image, gif, video and other media content!
+        // TODO reuse the border radius logic, maybe a mixin?
+        border-radius: var(--rad-lg) var(--rad-lg) var(--rad-md) var(--rad-md);
+
+        &.me {
+            border-top-right-radius: var(--rad-sm);
+        }
+
+        &:not(.me) {
+            border-top-left-radius: var(--rad-sm);
+        }
+
+        &.fill {
+            border-bottom-left-radius: var(--rad-lg);
+            border-bottom-right-radius: var(--rad-lg);
+        }
+
+        .attribution {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+
+            img {
+                width: 4rem;
+            }
+        }
+    }
+
+    .placeholder,
+    video {
+        width: 100%;
+        display: block;
+
+        &.reply {
+            max-width: 90px;
+            max-height: none;
+            height: auto;
+            float: right;
+            margin-left: $sp3;
+            margin-right: 0;
+        }
+
+        &.rtl.reply {
+            float: left;
+            margin-left: 0;
+            margin-right: $sp3;
+        }
+
+        &:not(.landscape).reply {
+            max-width: none;
+            max-height: 90px;
+            width: auto;
+        }
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/chats/core/content/ImageContent.svelte b/frontend/app/src/mobile/features/chats/core/content/ImageContent.svelte
new file mode 100644
index 0000000000..9a24f4f825
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/content/ImageContent.svelte
@@ -0,0 +1,409 @@
+<script lang="ts">
+    import { scrollStatus } from "@src/stores/scroll.svelte";
+    import { Button, ChatCaption, ColourVars, Column, CommonButton2, Row } from "component-lib";
+    import {
+        publish,
+        type ImageContent,
+        type MemeFighterContent,
+        type TextContent as TextContentType,
+    } from "@client";
+    import { type Snippet } from "svelte";
+    import EyeOffOutline from "svelte-material-icons/EyeOffOutline.svelte";
+    import EyeOutline from "svelte-material-icons/EyeOutline.svelte";
+    import ImageOutline from "svelte-material-icons/ImageOutline.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { rtlStore } from "@src/stores/rtl";
+    import { lowBandwidth } from "@src/stores/settings";
+    import { getProxyAdjustedBlobUrl, reservedMediaStyle } from "@src/utils/media";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import MessageRenderer from "@src/mobile/features/chats/core/MessageRenderer.svelte";
+
+    interface Props {
+        content: ImageContent | MemeFighterContent;
+        contentWidth?: number;
+        title?: Snippet;
+        me: boolean;
+        fill: boolean;
+        draft?: boolean;
+        reply?: boolean;
+        pinned?: boolean;
+        height?: number | undefined;
+        intersecting?: boolean;
+        edited: boolean;
+        blockLevelMarkdown?: boolean;
+        showPreviews?: boolean;
+        isPreview?: boolean;
+        onRemove?: () => void;
+        onRemovePreview?: (url: string) => void;
+    }
+
+    let {
+        content,
+        contentWidth = $bindable(),
+        title,
+        me,
+        fill,
+        draft = false,
+        reply = false,
+        pinned = false,
+        height = undefined,
+        intersecting = true,
+        edited,
+        blockLevelMarkdown = false,
+        // TODO Fix show previews! Currently if a preview is removed, it also removes the attached image!!!
+        // showPreviews = true,
+        // onRemovePreview,
+        isPreview = false,
+        onRemove,
+    }: Props = $props();
+
+    const MIN_IMG_WIDTH = 150;
+
+    let imgElement: HTMLImageElement | undefined = $state();
+    let imageWidth = $state(0);
+    let landscape = $derived(content.height < content.width);
+    let normalised = $derived(normaliseContent(content));
+    let hidden = $state(false);
+    let zoomable = $derived(!draft && !reply && !pinned);
+    let textContent = $derived<TextContentType | undefined>(
+        normalised ? { kind: "text_content", text: normalised.caption ?? "" } : undefined,
+    );
+    let hasContent = $derived(!!textContent?.text);
+
+    let narrow = $derived(imageWidth > 0 && imageWidth < MIN_IMG_WIDTH && hasContent);
+    let maxTextContentWidth = $derived(narrow ? 200 : imageWidth);
+
+    $effect(() => {
+        contentWidth = maxTextContentWidth;
+    });
+    $effect(() => {
+        hidden = $lowBandwidth && !draft;
+    });
+
+    function normaliseContent(content: ImageContent | MemeFighterContent) {
+        switch (content.kind) {
+            case "image_content":
+                return {
+                    url: getProxyAdjustedBlobUrl(content.blobUrl),
+                    caption: content.caption,
+                    fallback: content.thumbnailData,
+                    loadMsg: "loadImage",
+                };
+            case "meme_fighter_content":
+                return {
+                    url: content.url,
+                    caption: undefined,
+                    fallback: "/assets/memefighter.svg",
+                    loadMsg: "loadMeme",
+                };
+        }
+    }
+
+    function focusImage() {
+        if (!scrollStatus.isCooldown) {
+            publish("focusImage", content);
+        }
+    }
+
+    function onError() {
+        if (imgElement) {
+            imgElement.src = normalised.fallback;
+        }
+    }
+</script>
+
+{#snippet replyView(textContent?: Snippet)}
+    <Row gap="sm" minWidth="12rem">
+        <Column width="fill" gap="xxs" padding={["xs", "zero"]}>
+            {@render title?.()}
+            {#if textContent}
+                {@render textContent()}
+            {:else}
+                <Row gap="xs" crossAxisAlignment="center">
+                    <ImageOutline
+                        color={me ? ColourVars.secondaryLight : ColourVars.primaryLight}
+                        size="1.25rem" />
+                    <ChatCaption colour={me ? "secondaryLight" : "primaryLight"}>
+                        <Translatable resourceKey={i18nKey("Photo")} />
+                    </ChatCaption>
+                </Row>
+            {/if}
+        </Column>
+        <div
+            class="reply_image_preview"
+            style="background-image:url({intersecting && !hidden
+                ? normalised.url
+                : normalised.fallback});">
+        </div>
+    </Row>
+{/snippet}
+
+{#snippet draftView()}
+    <Column width={"fill"}>
+        {#if hidden}
+            <Column
+                height={"fill"}
+                padding={"xl"}
+                supplementalClass={"image_content_mask"}
+                mainAxisAlignment={"center"}
+                crossAxisAlignment={"center"}>
+                {#if !reply && !draft}
+                    <Button height={"hug"} width={"fill"} onClick={() => (hidden = false)}
+                        ><Translatable resourceKey={i18nKey(normalised.loadMsg)} /></Button>
+                {/if}
+            </Column>
+        {/if}
+
+        <div class="draft_image_preview">
+            <!-- svelte-ignore a11y_click_events_have_key_events -->
+            <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+            <div class="image_wrapper">
+                <img
+                    class="img"
+                    class:landscape
+                    class:fill
+                    class:draft
+                    class:reply
+                    class:zoomable={zoomable && !hidden}
+                    class:rtl={$rtlStore}
+                    style={height === undefined ? undefined : `height: ${height}px`}
+                    src={intersecting && !hidden ? normalised.url : normalised.fallback}
+                    alt={normalised.caption} />
+            </div>
+        </div>
+    </Column>
+{/snippet}
+
+{#snippet regularView(textContent?: Snippet)}
+    <Column
+        supplementalClass={`regular_image_content ${me ? "me" : ""} ${fill ? "fill" : ""}`}
+        maxWidth={"100%"}
+        width={narrow ? "fill" : "hug"}>
+        {#if hidden}
+            <Column
+                height={"fill"}
+                supplementalClass={"image_content_mask"}
+                mainAxisAlignment={"center"}
+                crossAxisAlignment={"center"}>
+                {#if !reply && !draft}
+                    <CommonButton2 onClick={() => (hidden = false)} variant="secondary" mode="text">
+                        <EyeOutline size="2rem" color={ColourVars.textPrimary} />
+                    </CommonButton2>
+                {/if}
+            </Column>
+        {/if}
+        <!-- svelte-ignore a11y_interactive_supports_focus -->
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div class="image_wrapper" class:narrow onclick={focusImage}>
+            {#if normalised.url !== undefined}
+                <img
+                    bind:this={imgElement}
+                    bind:clientWidth={imageWidth}
+                    draggable="false"
+                    onerror={onError}
+                    class="image"
+                    class:me
+                    class:landscape
+                    class:fill
+                    class:draft
+                    class:reply
+                    class:zoomable={zoomable && !hidden}
+                    class:rtl={$rtlStore}
+                    style={height !== undefined
+                        ? `height: ${height}px`
+                        : draft || reply || pinned
+                          ? undefined
+                          : reservedMediaStyle(content.width, content.height)}
+                    src={intersecting && !hidden ? normalised.url : normalised.fallback}
+                    alt={normalised.caption} />
+            {:else}
+                <!-- TODO generic image preview -->
+                <div></div>
+            {/if}
+        </div>
+        {#if !zoomable}
+            <div class="status_icon" class:rtl={$rtlStore}>
+                <EyeOffOutline size={"1.25em"} color={ColourVars.textPrimary} />
+            </div>
+        {/if}
+    </Column>
+    {@render textContent?.()}
+{/snippet}
+
+<MessageRenderer
+    {replyView}
+    {draftView}
+    {regularView}
+    caption={textContent?.text}
+    maxCaptionWidth={!reply && !draft ? maxTextContentWidth : undefined}
+    {me}
+    {reply}
+    {draft}
+    {edited}
+    {blockLevelMarkdown}
+    {isPreview}
+    {onRemove} />
+
+<style lang="scss">
+    :global {
+        .image_content_mask {
+            position: absolute !important;
+            top: 0;
+            left: 0;
+            height: 100%;
+            width: 100%;
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5));
+        }
+
+        .regular_image_content {
+            .image_wrapper,
+            .image_content_mask {
+                border-radius: var(--rad-lg) var(--rad-lg) var(--rad-md) var(--rad-md) !important;
+            }
+
+            &.me {
+                .image_wrapper,
+                .image_content_mask {
+                    border-top-right-radius: var(--rad-sm) !important;
+                }
+
+                .image_wrapper.narrow {
+                    background-color: var(--primary-muted);
+                }
+            }
+
+            &:not(.me) {
+                .image_wrapper,
+                .image_content_mask {
+                    border-top-left-radius: var(--rad-sm) !important;
+                }
+
+                .image_wrapper.narrow {
+                    background-color: var(--background-1);
+                }
+            }
+
+            &.fill {
+                .image_wrapper,
+                .image_content_mask {
+                    border-bottom-left-radius: var(--rad-lg) !important;
+                    border-bottom-right-radius: var(--rad-lg) !important;
+                }
+            }
+
+            .image_wrapper {
+                overflow: hidden;
+
+                &.narrow {
+                    width: 100%;
+                    display: flex;
+                    justify-content: center;
+                    padding: var(--sp-xs);
+
+                    .image {
+                        border-radius: var(--rad-md);
+                    }
+                }
+            }
+
+            .image {
+                width: 100%;
+                display: block;
+
+                &:not(.landscape) {
+                    min-height: 6rem;
+                    min-width: 0;
+                }
+
+                &.draft {
+                    max-width: calc(var(--vh, 1vh) * 50);
+                    max-height: none;
+                    height: auto;
+                }
+
+                &:not(.landscape).draft {
+                    max-width: none;
+                    max-height: calc(var(--vh, 1vh) * 50);
+                    width: auto;
+                    width: -webkit-fill-available;
+                    height: 100%;
+                }
+
+                &.reply {
+                    max-width: 6rem;
+                    max-height: none;
+                    height: auto;
+                    float: right;
+                    margin-left: $sp3;
+                    margin-right: 0;
+                }
+
+                &.rtl.reply {
+                    float: left;
+                    margin-left: 0;
+                    margin-right: $sp3;
+                }
+
+                &:not(.landscape).reply {
+                    max-width: none;
+                    max-height: 6rem;
+                    width: auto;
+                }
+            }
+
+            .status_icon {
+                position: absolute;
+                bottom: var(--sp-xs);
+                right: var(--sp-sm);
+
+                &.rtl {
+                    left: 0;
+                    right: unset;
+                }
+            }
+        }
+    }
+
+    .reply_image_preview {
+        width: 4rem;
+        min-height: 3rem;
+        height: -webkit-fill-available;
+        background-size: cover;
+        background-position: center;
+        border-radius: var(--rad-sm);
+    }
+
+    .draft_image_preview {
+        width: 100%;
+        padding: var(--sp-xs);
+        animation: grow-height 300ms ease-out forwards;
+        will-change: max-height, opacity;
+
+        .image_wrapper {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: var(--sp-xs);
+            background-color: var(--background-0);
+            border-radius: var(--rad-lg) var(--rad-lg) var(--rad-lg) var(--rad-lg);
+        }
+
+        .img {
+            display: flex;
+            max-width: 14rem;
+            max-height: 14rem;
+            overflow: hidden;
+            border-radius: var(--rad-md);
+        }
+
+        .img-bg {
+            width: 10rem;
+            height: 10rem;
+            background-size: contain;
+            background-repeat: no-repeat;
+        }
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/chats/core/content/MessageContentInitial.svelte b/frontend/app/src/mobile/features/chats/core/content/MessageContentInitial.svelte
new file mode 100644
index 0000000000..03fd9bf1fb
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/content/MessageContentInitial.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+    import { ChatCaption, Column, ColourVars, Row, Spinner } from "component-lib";
+    import { type ResourceKey } from "@client";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import TextContent from "./TextContent.svelte";
+
+    interface Props {
+        text: ResourceKey;
+        failed: boolean;
+    }
+
+    let { text, failed }: Props = $props();
+</script>
+
+<Column padding={"zero"} maxWidth="70vw" mainAxisAlignment={"center"}>
+    <Row>
+        {#if !failed}
+            <Row width="hug" height="fill" padding={["xs", "md"]} crossAxisAlignment="center">
+                <Spinner
+                    size="1.5rem"
+                    backgroundColour={ColourVars.primaryLight}
+                    foregroundColour={ColourVars.primaryMuted} />
+            </Row>
+        {/if}
+        <TextContent me>
+            {#snippet content()}
+                <ChatCaption colour={failed ? "error" : "primaryLight"}>
+                    <Translatable resourceKey={text} />
+                </ChatCaption>
+            {/snippet}
+        </TextContent>
+    </Row>
+</Column>
+
+<style lang="scss">
+    .spinner {
+        width: 4rem;
+        margin: 0 auto;
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/chats/core/content/MessageReminderContent.svelte b/frontend/app/src/mobile/features/chats/core/content/MessageReminderContent.svelte
new file mode 100644
index 0000000000..a3625ecc77
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/content/MessageReminderContent.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+    import { ChatText, Column } from "component-lib";
+    import type { MessageReminderContent } from "@client";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import ReminderNotes from "@src/mobile/features/chats/core/ReminderNotes.svelte";
+
+    interface Props {
+        content: MessageReminderContent;
+    }
+
+    let { content }: Props = $props();
+</script>
+
+<Column gap={"lg"}>
+    <ChatText width={"hug"}>
+        <Translatable resourceKey={i18nKey("reminders.youAsked")} />
+    </ChatText>
+    <ReminderNotes notes={content.notes} />
+</Column>
diff --git a/frontend/app/src/mobile/features/chats/core/content/MessageReminderCreatedContent.svelte b/frontend/app/src/mobile/features/chats/core/content/MessageReminderCreatedContent.svelte
new file mode 100644
index 0000000000..aba0ca14c1
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/content/MessageReminderCreatedContent.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { ChatText, ColourVars, Column, Row } from "component-lib";
+    import type { MessageReminderCreatedContent, OpenChat } from "@client";
+    import { getContext } from "svelte";
+    import Alarm from "svelte-material-icons/Alarm.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import ReminderNotes from "@src/mobile/features/chats/core/ReminderNotes.svelte";
+
+    interface Props {
+        content: MessageReminderCreatedContent;
+    }
+
+    let { content }: Props = $props();
+    const client = getContext<OpenChat>("client");
+</script>
+
+<Column gap={"lg"}>
+    <Row crossAxisAlignment={"center"} gap={"xs"} wrap>
+        <ChatText width={"hug"}>
+            <Translatable resourceKey={i18nKey("reminders.remindAt", { datetime: "" })} />
+        </ChatText>
+        <ChatText width={"hug"} fontWeight={"bold"} colour={"primary"}>
+            {client.toDatetimeString(new Date(content.remindAt))}
+        </ChatText>
+        <Alarm color={ColourVars.textPrimary} />
+    </Row>
+    <ReminderNotes notes={content.notes} />
+</Column>
diff --git a/frontend/app/src/mobile/features/chats/core/content/P2PSwapContent.svelte b/frontend/app/src/mobile/features/chats/core/content/P2PSwapContent.svelte
new file mode 100644
index 0000000000..e920d80de9
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/content/P2PSwapContent.svelte
@@ -0,0 +1,450 @@
+<script lang="ts">
+    import Markdown from "@src/ui/Markdown.svelte";
+    import {
+        Avatar,
+        Body,
+        Button,
+        ChatCaption,
+        ColourVars,
+        Column,
+        Row,
+        Subtitle,
+    } from "component-lib";
+    import type {
+        AcceptP2PSwapResponse,
+        CancelP2PSwapResponse,
+        MessageContext,
+        OpenChat,
+        P2PSwapContent,
+        P2PSwapContentInitial,
+    } from "@client";
+    import {
+        enhancedCryptoLookup as cryptoLookup,
+        currentUserIdStore,
+        isDiamondStore,
+        publish,
+    } from "@client";
+    import { type Snippet, getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import ArrowDown from "svelte-material-icons/ArrowDown.svelte";
+    import Cached from "svelte-material-icons/Cached.svelte";
+    import Check from "svelte-material-icons/Check.svelte";
+    import Close from "svelte-material-icons/Close.svelte";
+    import CloseCircleOutline from "svelte-material-icons/CloseCircleOutline.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { pinNumberErrorMessageStore } from "@src/stores/pinNumber";
+    import { now500 } from "@src/stores/time";
+    import { toastStore } from "@src/stores/toast";
+    import { getProxyAdjustedBlobUrl } from "@src/utils/media";
+    import AreYouSure from "@src/mobile/shared/AreYouSure.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import AcceptP2PSwapModal from "@src/mobile/features/chats/core/AcceptP2PSwapModal.svelte";
+    import MessageRenderer from "@src/mobile/features/chats/core/MessageRenderer.svelte";
+    import P2PSwapProgress from "@src/mobile/features/chats/core/P2PSwapProgress.svelte";
+    import { TokenState } from "@src/mobile/features/wallet/walletState.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        content: P2PSwapContentInitial | P2PSwapContent;
+        messageContext?: MessageContext;
+        senderId?: string;
+        messageId?: bigint;
+        title?: Snippet;
+        me?: boolean;
+        reply?: boolean;
+        draft?: boolean;
+        edited?: boolean;
+        pinned?: boolean;
+        isPreview?: boolean;
+        blockLevelMarkdown?: boolean;
+        onRemove?: () => void;
+    }
+
+    let {
+        content,
+        messageContext,
+        senderId,
+        messageId,
+        title,
+        me = false,
+        reply = false,
+        draft = false,
+        edited = false,
+        pinned = false,
+        isPreview = false,
+        blockLevelMarkdown = false,
+        onRemove,
+    }: Props = $props();
+
+    let fromState = $derived(new TokenState($cryptoLookup.get(content.token0.ledger)!));
+    let toState = $derived(new TokenState($cryptoLookup.get(content.token1.ledger)!));
+    let confirming = $state(false);
+    let showDetails = $state(false);
+    let finished = $derived(
+        content.kind === "p2p_swap_content" ? $now500 >= Number(content.expiresAt) : undefined,
+    );
+    let timeRemaining = $derived(
+        !finished && content.kind === "p2p_swap_content"
+            ? client.formatTimeRemaining($now500, Number(content.expiresAt))
+            : $_("p2pSwap.expired"),
+    );
+    let recipientId = $derived(
+        content.kind === "p2p_swap_content"
+            ? content.status.kind === "p2p_swap_reserved"
+                ? content.status.reservedBy
+                : content.status.kind === "p2p_swap_accepted" ||
+                    content.status.kind === "p2p_swap_completed"
+                  ? content.status.acceptedBy
+                  : undefined
+            : undefined,
+    );
+    let acceptedByYou = $derived(recipientId === $currentUserIdStore);
+    let fromAmount = $derived(client.formatTokens(content.token0Amount, content.token0.decimals));
+    let toAmount = $derived(client.formatTokens(content.token1Amount, content.token1.decimals));
+    let buttonDisabled = $derived(
+        (content.kind === "p2p_swap_content" && content.status.kind !== "p2p_swap_open") ||
+            reply ||
+            pinned,
+    );
+
+    let buttonLabelKey = $derived.by<string | undefined>(() => {
+        if (content.kind !== "p2p_swap_content") return;
+        const ifAcceptedByYou = (labelKey: string) =>
+            acceptedByYou || me ? labelKey : "p2pSwap.notAvailable";
+
+        switch (content.status.kind) {
+            case "p2p_swap_open":
+                return me ? "p2pSwap.cancel" : "p2pSwap.accept";
+
+            case "p2p_swap_cancelled":
+                return "p2pSwap.cancelled";
+
+            case "p2p_swap_expired":
+                return "p2pSwap.expired";
+
+            case "p2p_swap_reserved":
+            case "p2p_swap_accepted":
+                return ifAcceptedByYou("p2pSwap.progress.pendingCompletion");
+
+            case "p2p_swap_completed":
+                return ifAcceptedByYou("p2pSwap.progress.success");
+        }
+    });
+
+    let headerLabelKey = $derived.by<string | undefined>(() => {
+        if (content.kind !== "p2p_swap_content") return;
+
+        switch (content.status.kind) {
+            case "p2p_swap_open":
+                return timeRemaining;
+
+            case "p2p_swap_cancelled":
+                return "p2pSwap.cancelled";
+
+            case "p2p_swap_expired":
+                return "p2pSwap.expired";
+
+            case "p2p_swap_reserved":
+                return acceptedByYou ? "p2pSwap.reserved" : "p2pSwap.progress.acceptedBy";
+
+            case "p2p_swap_accepted":
+                return acceptedByYou ? "p2pSwap.accepted" : "p2pSwap.progress.acceptedBy";
+
+            case "p2p_swap_completed":
+                return acceptedByYou
+                    ? "p2pSwap.progress.completed"
+                    : recipientId
+                      ? "p2pSwap.progress.acceptedBy"
+                      : "p2pSwap.accepted";
+        }
+    });
+
+    function onAcceptOrCancel(e: MouseEvent) {
+        if (e.isTrusted && !buttonDisabled) {
+            if (!me && !$isDiamondStore) {
+                publish("upgrade");
+            } else {
+                confirming = true;
+            }
+        }
+    }
+
+    function cancel(yes: boolean): Promise<void> {
+        if (messageContext && messageId) {
+            confirming = false;
+
+            if (yes && me) {
+                client
+                    .cancelP2PSwap(
+                        messageContext.chatId,
+                        messageContext.threadRootMessageIndex,
+                        messageId,
+                    )
+                    .then((resp) => {
+                        if (resp.kind !== "success") {
+                            showFailureToast(resp, false);
+                        } else {
+                            client.refreshAccountBalance(content.token1.ledger);
+                        }
+                    });
+            }
+        }
+
+        return Promise.resolve();
+    }
+
+    function accept() {
+        if (!messageContext || !messageId) return;
+        confirming = false;
+
+        if (!me) {
+            client
+                .acceptP2PSwap(
+                    messageContext.chatId,
+                    messageContext.threadRootMessageIndex,
+                    messageId,
+                )
+                .then((resp) => {
+                    if (resp.kind !== "success") {
+                        showFailureToast(resp, true);
+                    } else {
+                        client.refreshAccountBalance(content.token1.ledger);
+                    }
+                });
+        }
+    }
+
+    function showFailureToast(
+        response: AcceptP2PSwapResponse | CancelP2PSwapResponse,
+        accepting: boolean,
+    ) {
+        if ($pinNumberErrorMessageStore !== undefined) {
+            toastStore.showFailureToast(pinNumberErrorMessageStore);
+            return;
+        }
+
+        let key: string = response.kind;
+
+        switch (key) {
+            case "already_reserved":
+            case "already_completed":
+                key = "already_accepted";
+                break;
+            case "channel_not_found":
+            case "chat_not_found":
+            case "user_suspended":
+            case "user_not_in_group":
+            case "user_not_in_community":
+            case "user_not_in_channel":
+            case "chat_frozen":
+            case "insufficient_funds":
+            case "internal_error":
+                key = accepting ? "unknown_accept_error" : "unknown_cancel_error";
+                break;
+        }
+
+        toastStore.showFailureToast(i18nKey("p2pSwap." + key));
+    }
+
+    function onSwapClick() {
+        if (!confirming) {
+            showDetails = true;
+        }
+    }
+</script>
+
+{#if confirming}
+    {#if me}
+        <AreYouSure
+            message={i18nKey("p2pSwap.confirmCancel", {
+                amount: fromAmount,
+                token: content.token0.symbol,
+            })}
+            action={cancel} />
+    {:else}
+        <AcceptP2PSwapModal
+            ledger0={content.token0.ledger}
+            ledger1={content.token1.ledger}
+            amount0={content.token0Amount}
+            amount1={content.token1Amount}
+            onAccept={accept}
+            onClose={() => (confirming = false)} />
+    {/if}
+{:else if showDetails && senderId && content.kind === "p2p_swap_content"}
+    <P2PSwapProgress {senderId} {content} onClose={() => (showDetails = false)} />
+{/if}
+
+{#snippet replyView(textContent?: Snippet)}
+    <Row gap="sm" minWidth="12rem">
+        <Column width="fill" gap="xs" padding={["xs", "zero"]}>
+            {@render title?.()}
+            {#if textContent}
+                {@render textContent()}
+            {/if}
+            <Row gap="xs" crossAxisAlignment="center">
+                <Cached
+                    color={me ? ColourVars.secondaryLight : ColourVars.primaryLight}
+                    size="1.25rem" />
+                <ChatCaption colour={me ? "secondaryLight" : "primaryLight"}>
+                    <Translatable
+                        resourceKey={i18nKey("p2pSwap.summaryShort", {
+                            fromAmount,
+                            toAmount,
+                            fromToken: content.token0.symbol,
+                            toToken: content.token1.symbol,
+                        })} />
+                </ChatCaption>
+            </Row>
+        </Column>
+    </Row>
+{/snippet}
+
+{#snippet draftView()}
+    <Column padding="xs">
+        <Column padding="xs" borderRadius="lg" background={ColourVars.background2}>
+            <Row
+                gap={"xs"}
+                padding={["xs", "lg", "xs", "md"]}
+                crossAxisAlignment={"center"}
+                borderRadius={["lg", "lg", "md", "md"]}>
+                <Body width="hug" colour="textSecondary" fontWeight="semi-bold">
+                    <Translatable resourceKey={i18nKey("p2pSwap.builderTitle")} />
+                </Body>
+            </Row>
+            {@render swapView()}
+        </Column>
+    </Column>
+{/snippet}
+
+{#snippet regularView(textContent?: Snippet)}
+    {@const statusKind = content.kind === "p2p_swap_content" ? content.status.kind : undefined}
+    <Column padding={["zero", "zero", textContent ? "zero" : "xl"]}>
+        <Column
+            gap="xs"
+            padding={me ? "xs" : "zero"}
+            backgroundColor={ColourVars.background2}
+            borderRadius={[me ? "lg" : "md", !me ? "lg" : "md", "lg", "lg"]}>
+            <Row supplementalClass="swap_header_title" padding={["sm", "sm", "zero"]}>
+                <Body
+                    align="end"
+                    fontWeight="bold"
+                    colour={statusKind === "p2p_swap_completed" && acceptedByYou
+                        ? "primary"
+                        : "textSecondary"}>
+                    <Translatable resourceKey={i18nKey(headerLabelKey ?? "")} />
+                    {#if recipientId && recipientId !== $currentUserIdStore}
+                        <Markdown text={`@UserId(${recipientId})`} inline />
+                    {/if}
+                </Body>
+            </Row>
+            {@render swapView(onSwapClick)}
+            <Row width="fill">
+                <!-- In DMs Swaps should have a decline option -->
+                <Button
+                    loading={(me || acceptedByYou) &&
+                        (statusKind === "p2p_swap_reserved" || statusKind === "p2p_swap_accepted")}
+                    disabled={buttonDisabled}
+                    onClick={onAcceptOrCancel}>
+                    <Translatable
+                        resourceKey={i18nKey(
+                            buttonLabelKey ?? (me ? "p2pSwap.cancel" : "p2pSwap.accept"),
+                        )} />
+                    {#snippet icon(color: string)}
+                        {@const size = "1rem"}
+                        <!-- for reserved and accepted statuses we don't show an icon, since a loader is showing -->
+                        {#if statusKind === "p2p_swap_open"}
+                            {#if me}
+                                <CloseCircleOutline {size} {color} />
+                            {:else}
+                                <Cached {size} {color} />
+                            {/if}
+                        {:else if acceptedByYou || me}
+                            {#if statusKind === "p2p_swap_completed"}
+                                <Check {size} {color} />
+                            {:else if statusKind === "p2p_swap_cancelled" || statusKind === "p2p_swap_expired"}
+                                <Close {size} {color} />
+                            {/if}
+                        {/if}
+                    {/snippet}
+                </Button>
+            </Row>
+        </Column>
+    </Column>
+    {@render textContent?.()}
+{/snippet}
+
+<MessageRenderer
+    {replyView}
+    {draftView}
+    {regularView}
+    caption={content.caption}
+    {me}
+    {reply}
+    {draft}
+    {edited}
+    {blockLevelMarkdown}
+    {isPreview}
+    {onRemove} />
+
+{#snippet tokenDetailsView(tokenState: TokenState, amount: bigint, isTopSection: boolean = false)}
+    <Row
+        width="fill"
+        gap="lg"
+        borderRadius="md"
+        padding={[!isTopSection ? "lg" : "md", "md", isTopSection ? "lg" : "md", "md"]}
+        background={ColourVars.background0}
+        crossAxisAlignment="center">
+        <Avatar size={"md"} url={getProxyAdjustedBlobUrl(tokenState.logo) ?? tokenState.logo} />
+        <Column width="fill">
+            <Subtitle fontWeight="bold">{tokenState.symbol}</Subtitle>
+            <Body colour="textSecondary" fontWeight="bold" maxLines={1}>
+                {tokenState.token.name}
+            </Body>
+        </Column>
+        <Column width="hug">
+            <Subtitle fontWeight="bold" align="end">
+                {tokenState.formatTokens(amount)}
+            </Subtitle>
+            <Body colour="primary" fontWeight="bold" align="end">
+                ≈ {tokenState.formatConvertedTokens(amount)}
+            </Body>
+        </Column>
+    </Row>
+{/snippet}
+
+{#snippet swapView(onClick?: () => void)}
+    <Column gap="xs" crossAxisAlignment={"center"} {onClick}>
+        {@render tokenDetailsView(fromState, content.token0Amount, true)}
+        <Row
+            supplementalClass={"swap_initial_down_arrow"}
+            width={{ size: "2rem" }}
+            height={{ size: "2rem" }}
+            borderRadius={"circle"}
+            borderWidth={"extraThick"}
+            borderColour={ColourVars.background2}
+            background={ColourVars.background0}
+            mainAxisAlignment={"center"}
+            crossAxisAlignment={"center"}>
+            <ArrowDown size={"1rem"} />
+        </Row>
+        {@render tokenDetailsView(toState, content.token1Amount)}
+    </Column>
+{/snippet}
+
+<style lang="scss">
+    :global {
+        .container.swap_initial_down_arrow {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-1rem);
+            width: 2rem;
+            height: 2rem;
+            z-index: 1;
+        }
+
+        .swap_header_title profile-link {
+            text-decoration: none !important;
+        }
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/chats/core/content/PlaceholderContent.svelte b/frontend/app/src/mobile/features/chats/core/content/PlaceholderContent.svelte
new file mode 100644
index 0000000000..91dd9e39f7
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/content/PlaceholderContent.svelte
@@ -0,0 +1,17 @@
+<svelte:options immutable />
+
+<script lang="ts">
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+</script>
+
+<span class="placeholder">
+    <Translatable resourceKey={i18nKey("placeholderContent")} />
+</span>
+
+<style lang="scss">
+    .placeholder {
+        padding: $sp4;
+        @include font(light, italic, fs-90);
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/chats/core/content/PollContent.svelte b/frontend/app/src/mobile/features/chats/core/content/PollContent.svelte
new file mode 100644
index 0000000000..0161b4e3ff
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/content/PollContent.svelte
@@ -0,0 +1,279 @@
+<script lang="ts">
+    import {
+        BodySmall,
+        Caption,
+        ChatText,
+        ChatCaption,
+        ColourVars,
+        Column,
+        Row,
+    } from "component-lib";
+    import { currentUserIdStore, publish, type OpenChat, type PollContent } from "@client";
+    import { getContext, type Snippet } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import MessageRenderer from "@src/mobile/features/chats/core/MessageRenderer.svelte";
+    import Poll from "svelte-material-icons/Poll.svelte";
+    import ChartBoxOutline from "svelte-material-icons/ChartBoxOutline.svelte";
+    import CheckCircleOutline from "svelte-material-icons/CheckCircle.svelte";
+    import CheckboxBlankCircleOutline from "svelte-material-icons/CheckboxBlankCircleOutline.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        content: PollContent;
+        me: boolean;
+        readonly: boolean;
+        senderId: string;
+        reply?: boolean;
+        edited?: boolean;
+        blockLevelMarkdown?: boolean;
+        title?: Snippet;
+        onRemove?: () => void;
+        onRegisterVote?: (vote: { type: "delete" | "register"; answerIndex: number }) => void;
+    }
+
+    let {
+        content,
+        me,
+        readonly,
+        senderId,
+        reply = false,
+        edited = false,
+        blockLevelMarkdown = false,
+        title,
+        onRemove,
+        onRegisterVote,
+    }: Props = $props();
+
+    function vote(idx: number) {
+        if (cannotVote) return;
+
+        onRegisterVote?.({
+            type: votedFor(idx) ? "delete" : "register",
+            answerIndex: idx,
+        });
+    }
+
+    function votedFor(idx: number): boolean {
+        return content.votes.user.includes(idx);
+    }
+
+    function viewPublicVotes() {
+        publish("pollPublicVotes", { content, senderId });
+    }
+
+    function totalVotes(content: PollContent): number {
+        if (content.votes.total.kind === "anonymous_poll_votes") {
+            return Object.values(content.votes.total.votes).reduce((total, n) => total + n, 0);
+        }
+        if (content.votes.total.kind === "hidden_poll_votes") {
+            return content.votes.total.votes;
+        }
+        if (content.votes.total.kind === "visible_poll_votes") {
+            return Object.values(content.votes.total.votes).reduce(
+                (total, n) => total + n.length,
+                0,
+            );
+        }
+        return 0;
+    }
+
+    function votesForAnswer(idx: number): number {
+        if (content.votes.total.kind === "anonymous_poll_votes") {
+            return content.votes.total.votes[idx] ?? 0;
+        }
+        if (content.votes.total.kind === "hidden_poll_votes") {
+            return 0;
+        }
+        if (content.votes.total.kind === "visible_poll_votes") {
+            return content.votes.total.votes[idx]?.length ?? 0;
+        }
+        return 0;
+    }
+
+    function percentageOfVote(idx: number) {
+        const answerVotes = votesForAnswer(idx);
+        return showVotes && answerVotes > 0 ? (votesForAnswer(idx) / numberOfVotes) * 100 : 0;
+    }
+
+    let date = $derived(
+        content.config.endDate ? new Date(Number(content.config.endDate)) : undefined,
+    );
+    let haveIVoted = $derived(content.votes.user.length > 0);
+    let numberOfVotes = $derived(totalVotes(content));
+    let cannotVote = $derived(
+        content.ended || readonly || (haveIVoted && !content.config.allowUserToChangeVote),
+    );
+    let showVotes = $derived(
+        content.ended ||
+            ((haveIVoted || senderId === $currentUserIdStore) &&
+                (content.config.showVotesBeforeEndDate || content.config.endDate === undefined)),
+    );
+
+    type ShortStatusKeys = {
+        visibility: string;
+        voteType: string;
+        voteEdit: string;
+        viewResults: string | undefined;
+    };
+
+    // Internationalisation required here, and in the component layout.
+    let shortStatus = $derived.by<ShortStatusKeys>(() => {
+        return {
+            visibility: content.config.anonymous
+                ? "poll.app.votesAreAnon"
+                : "poll.app.votesArePublic",
+            voteType: content.config.allowMultipleVotesPerUser
+                ? "poll.app.multiVote"
+                : "poll.app.singleVote",
+            voteEdit: content.config.allowUserToChangeVote
+                ? "poll.app.canChangeVote"
+                : "poll.app.cantChangeVote",
+            viewResults: content.config.showVotesBeforeEndDate
+                ? undefined
+                : "poll.app.resultsWillShow",
+        };
+    });
+</script>
+
+{#snippet replyView(textContent?: Snippet)}
+    <Column gap="xxs">
+        <Row>{@render title?.()}</Row>
+        <Row gap="xs" crossAxisAlignment="center">
+            <ChartBoxOutline
+                size="1rem"
+                color={me ? ColourVars.secondaryLight : ColourVars.primaryLight} />
+            {@render textContent?.()}
+        </Row>
+    </Column>
+{/snippet}
+
+{#snippet regularView()}
+    <Column padding={["zero", "zero", "lg"]} gap="sm">
+        <!-- Poll question and setup -->
+        <Row
+            gap="sm"
+            padding="md"
+            overflow="hidden"
+            background={me ? ColourVars.primaryMuted : ColourVars.background0}
+            borderRadius={[me ? "lg" : "md", me ? "md" : "lg", "lg", "lg"]}>
+            <Poll size="2rem" color={me ? ColourVars.primaryLight : ColourVars.textSecondary} />
+            <Column gap="sm">
+                <ChatText fontWeight="bold">{content.config?.text ?? "..."}</ChatText>
+                <ChatCaption colour="primaryLight">
+                    <Translatable resourceKey={i18nKey(shortStatus.visibility)} /> •
+                    <Translatable resourceKey={i18nKey(shortStatus.voteType)} /> •
+                    <Translatable resourceKey={i18nKey(shortStatus.voteEdit)} />
+                    {#if shortStatus.viewResults}
+                        • <Translatable resourceKey={i18nKey(shortStatus.viewResults)} />
+                    {/if}
+                </ChatCaption>
+            </Column>
+        </Row>
+
+        <!-- Answers list -->
+        <Column padding={["sm", "md"]} gap="xl">
+            {#each [...content.config.options] as answer, i (answer)}
+                {@const voted = votedFor(i)}
+                {@const pct = percentageOfVote(i)}
+                {@const pctSingleDec = Math.round(pct * 10) / 10}
+                <Column gap="sm" onClick={() => vote(i)}>
+                    <Row gap="sm" padding={["zero", "xs"]} crossAxisAlignment="center">
+                        <BodySmall width={{ size: "2.1rem" }} colour="primaryLight">
+                            {#if showVotes}
+                                {`${pctSingleDec}%`}
+                            {:else}
+                                %
+                            {/if}
+                        </BodySmall>
+                        <ChatText>{answer}</ChatText>
+                        {#if voted}
+                            <CheckCircleOutline size="1.25rem" color={ColourVars.textPrimary} />
+                        {:else}
+                            <CheckboxBlankCircleOutline
+                                size="1.25rem"
+                                color={me ? ColourVars.primaryLight : ColourVars.textSecondary} />
+                        {/if}
+                    </Row>
+                    <div class="progress" class:me>
+                        <div class="pct" style:width={showVotes ? `${pct}%` : "0%"}></div>
+                    </div>
+                </Column>
+            {/each}
+        </Column>
+
+        <!-- Info & Poll Options -->
+        <Column gap="xs" padding={["xs", "lg", "zero"]} crossAxisAlignment="start">
+            <Row height={{ size: "1rem" }} crossAxisAlignment="center" overflow="hidden">
+                <ChatCaption>
+                    <Translatable
+                        resourceKey={i18nKey("poll.totalVotes", {
+                            total: numberOfVotes.toString(),
+                        })} />
+                </ChatCaption>
+
+                {#if !content.config.anonymous && showVotes}
+                    <button class="view_votes" onclick={viewPublicVotes}>
+                        <ChatCaption colour="textPrimary" fontWeight="bold">View votes</ChatCaption>
+                    </button>
+                {/if}
+            </Row>
+
+            <Caption colour={me ? "primaryLight" : "textSecondary"}>
+                {#if content.ended}
+                    <Translatable resourceKey={i18nKey("poll.finished")} />
+                {:else if date}
+                    <Translatable
+                        resourceKey={i18nKey("poll.pollEnds", {
+                            end: `${client.toLongDateString(date)} @ ${client.toShortTimeString(
+                                date,
+                            )}`,
+                        })} />
+                {/if}
+            </Caption>
+        </Column>
+    </Column>
+{/snippet}
+
+<MessageRenderer
+    caption={content.config.text}
+    {replyView}
+    {regularView}
+    {me}
+    {reply}
+    {edited}
+    {blockLevelMarkdown}
+    {onRemove} />
+
+<style lang="scss">
+    .progress,
+    .pct {
+        border-radius: var(--rad-lg);
+    }
+
+    .progress.me {
+        background-color: var(--primary-muted);
+    }
+
+    .progress:not(.me) {
+        background-color: var(--background-0);
+    }
+
+    .progress {
+        height: 0.5rem;
+        width: 100%;
+    }
+
+    .pct {
+        height: 100%;
+        background-color: var(--text-primary);
+        transition: width 200ms ease-out;
+    }
+
+    .view_votes {
+        background: transparent;
+        border: none;
+        padding: var(--sp-sm) var(--sp-zero) var(--sp-sm);
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/chats/core/content/PrizeContent.svelte b/frontend/app/src/mobile/features/chats/core/content/PrizeContent.svelte
new file mode 100644
index 0000000000..1c08c7e338
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/content/PrizeContent.svelte
@@ -0,0 +1,556 @@
+<script lang="ts">
+    import type { DelegationChain, ECDSAKeyIdentity } from "@icp-sdk/core/identity";
+    import { disableClaimPrizeFeature } from "@src/utils/features";
+
+    import type { TextContent as TextContentType } from "@client";
+    import {
+        Body,
+        BodySmall,
+        ChatCaption,
+        Column,
+        ColourVars,
+        defaultBackgroundGradient,
+        Row,
+        Sheet,
+        Subtitle,
+    } from "component-lib";
+    import {
+        AuthProvider,
+        chitBands,
+        chitStateStore,
+        cryptoLookup,
+        enhancedCryptoLookup,
+        isDiamondStore,
+        isLifetimeDiamondStore,
+        type ChatIdentifier,
+        type DiamondMembershipStatus,
+        type OpenChat,
+        type PrizeContent,
+        type PrizeContentInitial,
+    } from "@client";
+    import { getContext, type Snippet } from "svelte";
+    import { Confetti } from "svelte-confetti";
+    import { _ } from "svelte-i18n";
+    import Clock from "svelte-material-icons/ClockOutline.svelte";
+    import Fingerprint from "svelte-material-icons/Fingerprint.svelte";
+    import Gift from "svelte-material-icons/GiftOutline.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { claimsStore } from "@src/stores/claims";
+    import { rtlStore } from "@src/stores/rtl";
+    import { now500 } from "@src/stores/time";
+    import { toastStore } from "@src/stores/toast";
+    import Diamond from "@src/mobile/ui/icons/Diamond.svelte";
+    import SpinningToken from "@src/mobile/ui/icons/SpinningToken.svelte";
+    import SecureButton from "@src/mobile/features/chats/core/SecureButton.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import Badges from "@src/mobile/features/profile/Badges.svelte";
+    import ChitEarnedBadge from "@src/mobile/features/profile/ChitEarnedBadge.svelte";
+    import ReAuthenticateModal from "@src/mobile/features/profile/ReAuthenticateModal.svelte";
+    import Streak from "@src/mobile/features/profile/Streak.svelte";
+    import MessageRenderer from "@src/mobile/features/chats/core/MessageRenderer.svelte";
+    import { TokenState } from "@src/mobile/features/wallet/walletState.svelte";
+    import TransferFeesMessage from "@src/mobile/shared/TransferFeesMessage.svelte";
+    import TextContent from "./TextContent.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        content: PrizeContent | PrizeContentInitial;
+        me: boolean;
+        intersecting?: boolean;
+        chatId?: ChatIdentifier;
+        messageId?: bigint;
+        title?: Snippet;
+        draft?: boolean;
+        reply?: boolean;
+        edited?: boolean;
+        isPreview?: boolean;
+        blockLevelMarkdown?: boolean;
+        onRemove?: () => void;
+    }
+
+    let {
+        content,
+        me,
+        intersecting = false,
+        chatId,
+        messageId,
+        title,
+        draft = false,
+        reply = false,
+        edited = false,
+        isPreview = false,
+        blockLevelMarkdown = false,
+        onRemove,
+    }: Props = $props();
+
+    let progressWidth = $state(0);
+    let showRestrictionDetails = $state(false);
+    let mouseEvent = $state<MouseEvent>();
+    let normalisedTextContent = $derived.by<TextContentType | undefined>(() => {
+        if (content.caption && content.caption.length > 0) {
+            return {
+                kind: "text_content",
+                text: content.caption,
+            };
+        }
+    });
+    let hasTextContent = $derived(normalisedTextContent !== undefined);
+
+    async function claim(
+        e: MouseEvent,
+        auth: { key: ECDSAKeyIdentity; delegation: DelegationChain } | undefined,
+    ) {
+        if (!chatId || !messageId) return;
+
+        let signInProof: string | undefined = undefined;
+        if (content.requiresCaptcha) {
+            if (auth) {
+                signInProof = await client.getSignInProof(auth.key, auth.delegation);
+            } else {
+                mouseEvent = e;
+                showAuthentication = true;
+                return;
+            }
+        }
+
+        showAuthentication = false;
+        if (e.isTrusted && chatId.kind !== "direct_chat" && !me && userEligible) {
+            claimsStore.add(messageId);
+            client
+                .claimPrize(chatId, messageId, e, signInProof)
+                .then((success) => {
+                    if (!success) {
+                        toastStore.showFailureToast(i18nKey("prizes.claimFailed"));
+                    }
+                })
+                .finally(() => claimsStore.delete(messageId));
+        }
+    }
+
+    let logo = $derived(
+        [...$cryptoLookup.values()].find((t) =>
+            content.kind === "prize_content"
+                ? t.symbol.toLowerCase() === content.token.toLowerCase()
+                : false,
+        )?.logo ?? "",
+    );
+    let total = $derived(
+        content.kind === "prize_content"
+            ? content.prizesRemaining + content.prizesPending + content.winnerCount
+            : 0,
+    );
+    let percentage = $derived(
+        content.kind === "prize_content" && total > 0 ? (content.winnerCount / total) * 100 : 0,
+    );
+    let claimedByYou = $derived(content.kind === "prize_content" ? content.userIsWinner : false);
+    let finished = $derived($now500 >= Number(content.endDate));
+    let allClaimed = $derived(
+        content.kind === "prize_content" ? content.prizesRemaining <= 0 : false,
+    );
+    let userEligible = $derived(
+        (!content.diamondOnly || $isDiamondStore) &&
+            (!content.lifetimeDiamondOnly || $isLifetimeDiamondStore) &&
+            // Unique person ("verified user") gating is suspended - always eligible
+            content.streakOnly <= $chitStateStore.streak &&
+            content.minChitEarned <= $chitStateStore.totalChitEarned,
+    );
+    let disabled = $derived(finished || claimedByYou || allClaimed || !userEligible);
+    let timeRemaining = $derived(
+        finished
+            ? $_("prizes.finished")
+            : client.formatTimeRemaining($now500, Number(content.endDate)),
+    );
+    let diamondStatus = $derived(
+        (content.lifetimeDiamondOnly
+            ? "lifetime"
+            : content.diamondOnly
+              ? "active"
+              : "inactive") as DiamondMembershipStatus["kind"],
+    );
+    let restrictedPrize = $derived(
+        content.diamondOnly ||
+            content.lifetimeDiamondOnly ||
+            content.streakOnly > 0 ||
+            content.requiresCaptcha ||
+            content.minChitEarned > 0,
+    );
+    let showAuthentication = $state(false);
+    let spin = $derived(intersecting && !finished && !allClaimed);
+
+    let initialTokenState = $derived(
+        content.kind === "prize_content_initial"
+            ? new TokenState($enhancedCryptoLookup.get(content.transfer.ledger)!)
+            : undefined,
+    );
+
+    function reauthenticated(detail: {
+        key: ECDSAKeyIdentity;
+        delegation: DelegationChain;
+        provider: AuthProvider;
+    }) {
+        if (mouseEvent !== undefined) {
+            claim(mouseEvent, detail);
+        }
+    }
+</script>
+
+{#snippet replyView(textContent?: Snippet)}
+    {#if content.kind === "prize_content"}
+        <Row gap="sm" minWidth="12rem">
+            <Column width="fill" gap="xxs" padding={["xxs", "zero"]}>
+                {@render title?.()}
+                {#if textContent}
+                    {@render textContent()}
+                {:else}
+                    <Row gap="xs" crossAxisAlignment="center">
+                        <Gift
+                            color={me ? ColourVars.secondaryLight : ColourVars.primaryLight}
+                            size="1.15rem" />
+                        <ChatCaption colour={me ? "secondaryLight" : "primaryLight"}>
+                            <Translatable resourceKey={i18nKey("Prize")} />
+                        </ChatCaption>
+                    </Row>
+                {/if}
+            </Column>
+        </Row>
+    {/if}
+{/snippet}
+
+{#snippet draftView()}
+    {#if content.kind === "prize_content_initial" && initialTokenState}
+        <Column padding="xxs">
+            <Column
+                padding={["xs", "sm"]}
+                borderRadius={["xl", "xl", "md", "md"]}
+                backgroundColor={ColourVars.background0}>
+                <Row padding="sm" width="fill" gap="sm" crossAxisAlignment="center">
+                    <Gift size="1rem" color={ColourVars.primary} />
+                    <Body width="hug" fontWeight="semi-bold">
+                        <Translatable
+                            resourceKey={i18nKey(
+                                `${initialTokenState.formatTokens(content.amount)} ${initialTokenState.symbol}`,
+                            )} />
+                    </Body>
+                    <Body width="fill" colour="primary">
+                        <!-- TODO i18n -->
+                        <Translatable resourceKey={i18nKey("prize draw")} />
+                    </Body>
+                </Row>
+                <Row
+                    width="fill"
+                    height={{ size: "0.25rem" }}
+                    background={ColourVars.background1}
+                    borderRadius="circle">.</Row>
+                <Row padding="sm">
+                    <TransferFeesMessage
+                        symbol={initialTokenState.symbol}
+                        tokenDecimals={initialTokenState.decimals}
+                        transferFees={content.fees} />
+                </Row>
+            </Column>
+        </Column>
+    {/if}
+{/snippet}
+
+<!-- TODO allow prize message to be edited - to update their text caption -->
+{#snippet regularView()}
+    {#if content.kind === "prize_content"}
+        {#if showAuthentication}
+            <ReAuthenticateModal
+                onCancel={() => (showAuthentication = false)}
+                onSuccess={reauthenticated}
+                title={i18nKey("prizes.authRequiredTitle")}
+                message={i18nKey("prizes.authRequiredMessage")} />
+        {/if}
+        <Column
+            gap="xxs"
+            minWidth="62vw"
+            padding={["zero", "zero", hasTextContent ? "zero" : "xl"]}>
+            <!-- Spinning Token & Countdown -->
+            <Column>
+                <Column
+                    padding="xl"
+                    mainAxisAlignment="center"
+                    crossAxisAlignment="center"
+                    background={defaultBackgroundGradient}
+                    borderRadius={[me ? "lg" : "md", !me ? "lg" : "md", "zero", "zero"]}>
+                    <div class="prize-coin">
+                        <SpinningToken {logo} {spin} mirror={true} size="small" />
+                    </div>
+                </Column>
+                <Column
+                    gap="xs"
+                    padding="md"
+                    crossAxisAlignment="center"
+                    backgroundColor={me ? ColourVars.primaryMuted : ColourVars.background1}>
+                    <!-- Time remaining -->
+                    <Row gap="xs" mainAxisAlignment="center" crossAxisAlignment="center">
+                        {#if allClaimed}
+                            <BodySmall width="hug" fontWeight="semi-bold">
+                                <Translatable resourceKey={i18nKey("prizes.allClaimed")} />
+                            </BodySmall>
+                        {:else if finished}
+                            <BodySmall width="hug" fontWeight="semi-bold">
+                                <Translatable resourceKey={i18nKey("prizes.finished")} />
+                            </BodySmall>
+                        {:else}
+                            <Clock size="1em" color={ColourVars.textPrimary} />
+                            <BodySmall width={{ size: "4.75rem" }} fontWeight="semi-bold">
+                                {timeRemaining}
+                            </BodySmall>
+                        {/if}
+                    </Row>
+
+                    <!-- Badges -->
+                    {#if restrictedPrize}
+                        <Row
+                            mainAxisAlignment="center"
+                            onClick={() => (showRestrictionDetails = true)}>
+                            <!-- If chit features are turned off minChitEarned is zero, and chit badge cannot be rendered. -->
+                            <!-- Streak badge can still be forced to show, since that prize restriction is returned. -->
+                            <Badges
+                                size="large"
+                                forceStreakBadge
+                                withFingerprint={content.requiresCaptcha}
+                                {diamondStatus}
+                                uniquePerson={false}
+                                chitEarned={content.minChitEarned}
+                                streak={content.streakOnly}
+                                borderColor={me
+                                    ? ColourVars.primaryMuted
+                                    : ColourVars.background1} />
+                        </Row>
+                    {/if}
+                </Column>
+            </Column>
+
+            <!-- Claimed, Confetti & Button -->
+            <Column
+                gap="md"
+                padding={["sm", me ? "sm" : "xs", me ? "lg" : "xs"]}
+                borderRadius={["zero", "zero", "lg", "lg"]}
+                backgroundColor={me ? ColourVars.primaryMuted : ColourVars.background1}>
+                <Column gap="xxs">
+                    <!-- Claimed count -->
+                    <Row mainAxisAlignment="center">
+                        <BodySmall width="hug">
+                            {content.winnerCount}/{total}
+                            <Translatable resourceKey={i18nKey("claimed")} />
+                        </BodySmall>
+                    </Row>
+
+                    <!-- Claimed Progress -->
+                    <Row padding={["zero", "sm"]}>
+                        <div class="progress" class:me bind:clientWidth={progressWidth}>
+                            <div
+                                class="claimed"
+                                class:rtl={$rtlStore}
+                                style="background-size: {progressWidth}px 100%; width: {percentage}%">
+                            </div>
+                        </div>
+                    </Row>
+                </Column>
+
+                {#if !me && !disableClaimPrizeFeature && messageId}
+                    <SecureButton
+                        width="fill"
+                        label={"Prize message clicked"}
+                        loading={$claimsStore.has(messageId)}
+                        onClick={(e) => claim(e, undefined)}
+                        {disabled}>
+                        <Body>
+                            <Translatable
+                                resourceKey={i18nKey(
+                                    claimedByYou
+                                        ? "prizes.claimed"
+                                        : finished
+                                          ? "prizes.finished"
+                                          : allClaimed
+                                            ? "prizes.allClaimed"
+                                            : "prizes.claim",
+                                )} />
+                        </Body>
+                    </SecureButton>
+                {/if}
+            </Column>
+        </Column>
+        {#if claimedByYou}
+            <div class="tada">
+                <div class="confetti">
+                    <Confetti size={30} colorArray={[`url(${logo})`]} />
+                </div>
+            </div>
+        {/if}
+        {#if normalisedTextContent}
+            <TextContent {me} content={normalisedTextContent} />
+        {/if}
+    {/if}
+{/snippet}
+
+<MessageRenderer
+    {replyView}
+    {draftView}
+    {regularView}
+    caption={content.caption}
+    {me}
+    {reply}
+    {draft}
+    {edited}
+    {blockLevelMarkdown}
+    {isPreview}
+    {onRemove} />
+
+{#snippet restrictionsBanner(key: string)}
+    <Column padding="md" borderRadius="md" backgroundColor={ColourVars.secondaryMuted}>
+        <BodySmall>
+            <Translatable resourceKey={i18nKey(key)} />
+        </BodySmall>
+    </Column>
+{/snippet}
+
+{#if showRestrictionDetails}
+    <Sheet onDismiss={() => (showRestrictionDetails = false)}>
+        <!-- Prize participation gates -->
+        <Column
+            gap="md"
+            borderRadius="md"
+            padding={["md", "xl", "xxl"]}
+            backgroundColor={ColourVars.background1}>
+            {#if restrictedPrize}
+                <Column>
+                    <Subtitle fontWeight="semi-bold">
+                        <Translatable resourceKey={i18nKey("prizes.restrictions")} />
+                    </Subtitle>
+                    <Body colour="textSecondary">
+                        <Translatable resourceKey={i18nKey("prizes.restrictedMessage")} />
+                    </Body>
+                </Column>
+
+                <Column gap="sm" padding={["zero", "xs", "md"]}>
+                    {#if content.requiresCaptcha}
+                        <Row gap="md">
+                            <Column
+                                borderRadius="circle"
+                                width={{ size: "1.375rem" }}
+                                height={{ size: "1.375rem" }}
+                                mainAxisAlignment="center"
+                                crossAxisAlignment="center"
+                                backgroundColor={ColourVars.background2}>
+                                <Fingerprint
+                                    viewBox={"0 -1 24 24"}
+                                    size={"1rem"}
+                                    color={"var(--text-primary)"} />
+                            </Column>
+                            <Body>
+                                <Translatable
+                                    resourceKey={i18nKey("prizes.authRequiredLabel", {
+                                        n: content.streakOnly,
+                                    })} />
+                            </Body>
+                        </Row>
+                    {/if}
+                    {#if content.diamondOnly || content.lifetimeDiamondOnly}
+                        <Row gap="md">
+                            <Diamond
+                                borderColor={ColourVars.background1}
+                                size={"default"}
+                                status={content.lifetimeDiamondOnly ? "lifetime" : "active"} />
+
+                            <Body>
+                                <Translatable
+                                    resourceKey={i18nKey(
+                                        "prizes." +
+                                            (content.lifetimeDiamondOnly
+                                                ? "lifetimeDiamondMembership"
+                                                : "diamondMembership"),
+                                    )} />
+                            </Body>
+                        </Row>
+                    {/if}
+                    <!-- Unique person ("verified user") gating is suspended -->
+                    {#if content.streakOnly > 0}
+                        <Row gap="md">
+                            <Streak
+                                borderColor={ColourVars.background1}
+                                days={content.streakOnly} />
+                            <Body>
+                                <Translatable
+                                    resourceKey={i18nKey("prizes.streakFull", {
+                                        n: content.streakOnly,
+                                    })} />
+                            </Body>
+                        </Row>
+                    {/if}
+
+                    {#if content.minChitEarned > 0}
+                        <Row gap="md">
+                            <ChitEarnedBadge
+                                borderColor={ColourVars.background1}
+                                earned={content.minChitEarned} />
+
+                            <Body>
+                                <Translatable
+                                    resourceKey={i18nKey("prizes.minChitEarnedValue", {
+                                        n: chitBands.get(content.minChitEarned) ?? "0",
+                                    })} />
+                            </Body>
+                        </Row>
+                    {/if}
+                </Column>
+            {/if}
+            {#if me}
+                {#if allClaimed || finished}
+                    {@render restrictionsBanner("prizes.prizeFinished")}
+                {:else}
+                    {@render restrictionsBanner("prizes.live")}
+                {/if}
+            {/if}
+        </Column>
+    </Sheet>
+{/if}
+
+<style lang="scss">
+    .progress {
+        height: 0.35rem;
+        width: 100%;
+        overflow: hidden;
+        position: relative;
+        border-radius: var(--rad-lg);
+
+        &:not(.me) {
+            background: var(--background-0);
+        }
+
+        &.me {
+            background: var(--backdrop);
+        }
+
+        .claimed {
+            $red: rgba(234, 41, 41, 1);
+            $orange: rgba(244, 118, 4, 1);
+            $green: rgba(74, 233, 122, 1);
+            position: absolute;
+            left: 0;
+            top: 0;
+            bottom: 0;
+            background-image: linear-gradient(90deg, $green 0%, $orange 50%, $red 100%);
+            &.rtl {
+                left: unset;
+                right: 0;
+                background-image: linear-gradient(90deg, $red 0%, $orange 50%, $green 100%);
+            }
+        }
+    }
+
+    .tada {
+        position: relative;
+
+        .confetti {
+            position: absolute;
+            pointer-events: none;
+            top: 50%;
+            left: 50%;
+        }
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/chats/core/content/PrizeWinnerContent.svelte b/frontend/app/src/mobile/features/chats/core/content/PrizeWinnerContent.svelte
new file mode 100644
index 0000000000..e95b2a67cd
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/content/PrizeWinnerContent.svelte
@@ -0,0 +1,158 @@
+<script lang="ts">
+    import type { OpenChat, PrizeWinnerContent } from "@client";
+    import { allUsersStore, cryptoLookup, currentUserIdStore } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import SpinningToken from "@src/mobile/ui/icons/SpinningToken.svelte";
+    import type { ProfileLinkClickedEvent } from "@webcomponents/profileLink";
+    import Markdown from "@src/ui/Markdown.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        content: PrizeWinnerContent;
+    }
+
+    let { content }: Props = $props();
+
+    function username(userId: string): string {
+        return userId === $currentUserIdStore
+            ? $_("you")
+            : `${$allUsersStore.get(userId)?.username ?? $_("unknown")}`;
+    }
+
+    function openUserProfile(ev: Event) {
+        ev.target?.dispatchEvent(
+            new CustomEvent<ProfileLinkClickedEvent>("profile-clicked", {
+                detail: {
+                    userId: content.transaction.recipient,
+                    chatButton: false,
+                    inGlobalContext: false,
+                },
+                bubbles: true,
+            }),
+        );
+        ev.stopPropagation();
+    }
+    let logo = $derived($cryptoLookup.get(content.transaction.ledger)?.logo ?? "");
+    let tokenDetails = $derived($cryptoLookup.get(content.transaction.ledger)!);
+    let symbol = $derived(tokenDetails.symbol);
+    let amount = $derived(
+        client.formatTokens(content.transaction.amountE8s, tokenDetails.decimals),
+    );
+    let winner = $derived(`${username(content.transaction.recipient)}`);
+    let me = $derived($currentUserIdStore === content.transaction.recipient);
+    let transactionLinkText = $derived(client.buildTransactionLink($_, content.transaction));
+</script>
+
+<div class="msg">
+    <div class="wrapper" class:other={!me}>
+        <div class="graphic" class:tiny={!me}>
+            {#if me}
+                <img class="lid" src={"/assets/lid.png"} />
+                <div class="winner-coin">
+                    <SpinningToken spin mirror={false} size={"small"} {logo} />
+                </div>
+                <img class="box" src={"/assets/box.png"} />
+            {:else}
+                <SpinningToken spin={false} mirror size={"tiny"} {logo} />
+            {/if}
+        </div>
+        <div class="txt" class:other={!me}>
+            <div class="label" onclick={openUserProfile}>
+                <Markdown
+                    text={$_("prizes.winner", {
+                        values: { recipient: winner, amount, token: symbol },
+                    })} />
+            </div>
+            {#if transactionLinkText !== undefined}
+                <div class="link">
+                    <Markdown text={transactionLinkText} />
+                </div>
+            {/if}
+        </div>
+    </div>
+</div>
+
+<style lang="scss">
+    .msg {
+        text-align: center;
+        padding-top: $sp2;
+    }
+
+    .wrapper.other {
+        display: flex;
+        align-items: center;
+        gap: $sp3;
+    }
+
+    .txt.other {
+        text-align: start;
+    }
+
+    .label {
+        cursor: pointer;
+        @include font(book, normal, fs-100);
+    }
+
+    .link {
+        @include font(book, normal, fs-80, 28);
+        color: var(--txt-light);
+    }
+
+    .graphic {
+        display: flex;
+        flex-direction: column;
+        padding: 10px 60px;
+
+        &.tiny {
+            padding: 0 10px;
+        }
+
+        .winner-coin {
+            margin-top: -45px;
+            margin-bottom: -34px;
+            align-self: center;
+            animation: bob 3s linear infinite;
+        }
+
+        .lid {
+            width: 90px;
+            height: auto;
+            align-self: flex-end;
+            position: relative;
+            animation: weave 3s linear infinite;
+            z-index: 3;
+        }
+
+        .box {
+            width: 130px;
+            height: auto;
+            align-self: center;
+        }
+    }
+
+    @keyframes bob {
+        0% {
+            transform: translateY(0);
+        }
+        50% {
+            transform: translateY(-8px);
+        }
+        100% {
+            transform: translateY(0);
+        }
+    }
+
+    @keyframes weave {
+        0% {
+            transform: translateX(2px) translateY(0);
+        }
+        50% {
+            transform: translateX(8px) translateY(-5px);
+        }
+        100% {
+            transform: translateX(2px) translateY(0);
+        }
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/chats/core/content/ReportedMessageContent.svelte b/frontend/app/src/mobile/features/chats/core/content/ReportedMessageContent.svelte
new file mode 100644
index 0000000000..0bd9b3893e
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/content/ReportedMessageContent.svelte
@@ -0,0 +1,95 @@
+<script lang="ts">
+    import { TextArea } from "component-lib";
+    import type { OpenChat, ReportedMessageContent } from "@client";
+    import { allUsersStore } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Legend from "@src/mobile/shared/Legend.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+
+    interface Props {
+        content: ReportedMessageContent;
+    }
+
+    let { content }: Props = $props();
+    const client = getContext<OpenChat>("client");
+
+    let index = $state(0);
+
+    let report = $derived(content.reports[index]);
+    let reasons = [
+        $_("report.threat"),
+        $_("report.child"),
+        $_("report.nonConsensual"),
+        $_("report.selfHarm"),
+        $_("report.violence"),
+        $_("report.scam"),
+        $_("report.other"),
+    ];
+    let message = $derived(
+        $_("report.messageReport", {
+            values: {
+                username:
+                    $allUsersStore.get(report.reportedBy)?.username ??
+                    `unknown user (${report.reportedBy}))`,
+                timestamp: client.toDatetimeString(new Date(report.timestamp)),
+                reason: reasons[report.reasonCode],
+            },
+        }),
+    );
+</script>
+
+<div class="report">
+    <p class="msg"><Markdown text={message} /></p>
+    {#if report.notes !== undefined && report.notes.length > 0}
+        <Legend label={i18nKey("Notes")} />
+        <TextArea disabled rows={2} bind:value={report.notes} />
+    {/if}
+</div>
+
+<div class="report-selectors">
+    {#each content.reports as r, i}
+        <div onclick={() => (index = i)} class="selector" class:selected={report === r}>
+            {i + 1}
+        </div>
+    {/each}
+</div>
+
+<div class="smallprint">
+    {$_("report.showing", {
+        values: { count: content.reports.length, total: content.total.toLocaleString() },
+    })}
+</div>
+
+<style lang="scss">
+    .report {
+        @include font(book, normal, fs-100);
+        margin-bottom: $sp4;
+    }
+    .msg {
+        margin-bottom: $sp3;
+    }
+    .smallprint {
+        color: var(--txt-light);
+        @include font-size(fs-80);
+    }
+    .report-selectors {
+        display: flex;
+        gap: $sp3;
+        margin-bottom: $sp3;
+    }
+    .selector {
+        cursor: pointer;
+        width: 26px;
+        border: 1px solid var(--bd);
+        border-radius: 50%;
+        text-align: center;
+
+        &.selected {
+            background-color: var(--accent);
+            text-shadow: 1px 1px 1px var(--accentDarker);
+            color: #ffffff;
+        }
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/chats/core/content/TextContent.svelte b/frontend/app/src/mobile/features/chats/core/content/TextContent.svelte
new file mode 100644
index 0000000000..3dc4b88c44
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/content/TextContent.svelte
@@ -0,0 +1,122 @@
+<script lang="ts">
+    import Markdown from "@src/ui/Markdown.svelte";
+    import { ChatCaption, ChatText, Column } from "component-lib";
+    import type { OgPreview, RehydratedMessagePreview, TextContent } from "@client";
+    import { type Snippet } from "svelte";
+    import { lowBandwidth } from "@src/stores/settings";
+    import IntersectionObserver from "@src/mobile/features/chats/core/IntersectionObserver.svelte";
+    import LinkPreviews from "@src/mobile/features/chats/core/LinkPreviews.svelte";
+
+    interface Props {
+        content: TextContent | Snippet;
+        me: boolean;
+        reply?: boolean;
+        blockLevelMarkdown?: boolean;
+        showPreviews?: boolean;
+        edited?: boolean;
+        truncate?: boolean;
+        maxWidth?: number;
+        // Indicates if the text content is rendered in context of a preview
+        isPreview?: boolean;
+        suppressLinks?: boolean;
+        onRemovePreview?: (url: string) => void;
+        ogPreviews?: OgPreview[];
+        messagePreviews?: RehydratedMessagePreview[];
+    }
+
+    let {
+        content,
+        me,
+        reply = false,
+        blockLevelMarkdown = false,
+        edited = false,
+        truncate = false,
+        maxWidth,
+        isPreview = false,
+        suppressLinks = false,
+        onRemovePreview,
+        ogPreviews = [],
+        messagePreviews = [],
+    }: Props = $props();
+
+    let textContent = $derived<TextContent | undefined>("kind" in content ? content : undefined);
+    let snippetContent = $derived<Snippet | undefined>("kind" in content ? undefined : content);
+
+    let text = $derived(textContent?.text);
+</script>
+
+<IntersectionObserver
+    unobserveOnIntersect={false}
+    rootMarginTop={$lowBandwidth ? 0 : 1000}
+    rootMarginBottom={$lowBandwidth ? 0 : 1000}
+    contextId="scrollable-messages-div">
+    {#snippet children(intersecting)}
+        <LinkPreviews
+            {me}
+            {ogPreviews}
+            {messagePreviews}
+            {intersecting}
+            onRemove={onRemovePreview} />
+    {/snippet}
+</IntersectionObserver>
+
+<Column
+    supplementalClass={`text_content ${truncate ? "truncated" : ""}`}
+    padding={["xs", reply ? "zero" : "sm"]}
+    overflow={"hidden"}
+    maxWidth={maxWidth ? `${maxWidth}px` : "auto"}>
+    <div class="message_text" class:me class:reply>
+        {#if text}
+            {#if isPreview}
+                <ChatCaption
+                    width={"hug"}
+                    maxLines={truncate ? 3 : undefined}
+                    colour={me ? "secondaryLight" : "primaryLight"}>
+                    <Markdown inline={!blockLevelMarkdown} {suppressLinks} {text} />
+                </ChatCaption>
+            {:else}
+                <ChatText width={"hug"} maxLines={truncate ? 3 : undefined}>
+                    <Markdown inline={!blockLevelMarkdown} {suppressLinks} {text} />
+                </ChatText>
+                <span class="metadata_spacer" class:me class:edited></span>
+            {/if}
+        {:else if snippetContent}
+            {@render snippetContent?.()}
+            <span class="metadata_spacer" class:me class:edited></span>
+        {/if}
+    </div>
+</Column>
+
+<style lang="scss">
+    .message_text {
+        line-height: 0;
+    }
+
+    .expand {
+        cursor: pointer;
+        padding: 0 $sp3;
+        border-radius: var(--rd);
+        background-color: rgba(226, 226, 226, 0.2);
+    }
+
+    .metadata_spacer {
+        display: inline-block;
+        height: 1rem;
+
+        &.me {
+            width: 3.25rem;
+
+            &.edited {
+                width: 6.5rem;
+            }
+        }
+
+        &:not(.me) {
+            width: 2.25rem;
+
+            &.edited {
+                width: 5.5rem;
+            }
+        }
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/home/TextContentReply.svelte b/frontend/app/src/mobile/features/chats/core/content/TextContentReply.svelte
similarity index 95%
rename from frontend/app/src/components_mobile/home/TextContentReply.svelte
rename to frontend/app/src/mobile/features/chats/core/content/TextContentReply.svelte
index ad4d637e81..6f6872c535 100644
--- a/frontend/app/src/components_mobile/home/TextContentReply.svelte
+++ b/frontend/app/src/mobile/features/chats/core/content/TextContentReply.svelte
@@ -3,7 +3,7 @@
     import type { TextContent } from "@client";
     import { type Snippet } from "svelte";
     import { _ } from "svelte-i18n";
-    import Markdown from "@shared_components/Markdown.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
 
     const SIZE_LIMIT = 200;
 
diff --git a/frontend/app/src/mobile/features/chats/core/content/UserReferralCardContent.svelte b/frontend/app/src/mobile/features/chats/core/content/UserReferralCardContent.svelte
new file mode 100644
index 0000000000..a2c9985891
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/content/UserReferralCardContent.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+    import { currentUserIdStore, OpenChat } from "@client";
+    import { getContext } from "svelte";
+    import CopyIcon from "svelte-material-icons/ContentCopy.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import QRCode from "@src/mobile/shared/QRCode.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    const client = getContext<OpenChat>("client");
+    let link = `${client.canonicalOrigin()}/?ref=${$currentUserIdStore}`;
+
+    function onCopy() {
+        navigator.clipboard.writeText(link).then(
+            () => toastStore.showSuccessToast(i18nKey("linkCopiedToClipboard")),
+            () => toastStore.showFailureToast(i18nKey("failedToCopyLinkToClipboard")),
+        );
+    }
+</script>
+
+<div class="container">
+    <div on:click={onCopy} class="link">
+        <div><Translatable resourceKey={i18nKey("tapForReferralLink")} /></div>
+        <CopyIcon size={"1em"} color={"var(--icon-txt)"} />
+    </div>
+    <QRCode text={link} size="larger" fullWidthOnMobile />
+</div>
+
+<style lang="scss">
+    .link {
+        display: flex;
+        gap: $sp2;
+        align-items: center;
+        cursor: pointer;
+    }
+
+    .link {
+        color: var(--link-underline);
+    }
+
+    .container {
+        display: flex;
+        flex-direction: column;
+        gap: $sp4;
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/chats/core/content/VideoCallContent.svelte b/frontend/app/src/mobile/features/chats/core/content/VideoCallContent.svelte
new file mode 100644
index 0000000000..d73d4760a8
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/content/VideoCallContent.svelte
@@ -0,0 +1,242 @@
+<script lang="ts">
+    import {
+        Avatar,
+        Column,
+        Body,
+        BodySmall,
+        Button,
+        ChatCaption,
+        Row,
+        ColourVars,
+    } from "component-lib";
+    import {
+        OpenChat,
+        allUsersStore,
+        chatIdentifiersEqual,
+        currentUserIdStore,
+        publish,
+        selectedChatSummaryStore,
+        type VideoCallContent,
+    } from "@client";
+    import { getContext, type Snippet } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { activeVideoCall } from "@src/stores/video";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import Video from "svelte-material-icons/VideoOutline.svelte";
+    import PhoneJoin from "svelte-material-icons/PhoneInTalkOutline.svelte";
+    import PhoneRemove from "svelte-material-icons/PhoneRemoveOutline.svelte";
+    import Clock from "svelte-material-icons/ClockOutline.svelte";
+    import Participants from "svelte-material-icons/AccountMultipleOutline.svelte";
+    import { now500 } from "@src/stores/time";
+    import MessageRenderer from "@src/mobile/features/chats/core/MessageRenderer.svelte";
+
+    const client = getContext<OpenChat>("client");
+    const DISPLAYED_PARTICIPANTS = 4;
+
+    interface Props {
+        content: VideoCallContent;
+        messageIndex: number;
+        timestamp: bigint | undefined;
+        senderId: string;
+        me: boolean;
+        title?: Snippet;
+        reply?: boolean;
+    }
+
+    let { content, messageIndex, timestamp, me, title, reply = false }: Props = $props();
+
+    let inCall = $derived(
+        $activeVideoCall !== undefined &&
+            $selectedChatSummaryStore !== undefined &&
+            $selectedChatSummaryStore.videoCallInProgress?.messageIndex === messageIndex &&
+            chatIdentifiersEqual($activeVideoCall.chatId, $selectedChatSummaryStore?.id),
+    );
+    let endedDate = $derived(content.ended ? new Date(Number(content.ended)) : undefined);
+    let finished = $derived(endedDate !== undefined);
+    let missed = $derived(
+        content.ended &&
+            content.participants.find((p) => p.userId === $currentUserIdStore) === undefined,
+    );
+
+    let duration = $derived.by(() => {
+        if (timestamp === undefined) return;
+
+        const elapsed = content.ended
+            ? Number(content.ended - timestamp)
+            : Number(BigInt($now500) - timestamp);
+
+        return client.formatDuration(elapsed);
+    });
+
+    let callTitle = $derived.by(() => {
+        if (!finished) {
+            if (content.callType === "broadcast") {
+                return "videoCall.startedBroadcast";
+            }
+
+            return "videoCall.started";
+        } else {
+            if (missed) {
+                return "videoCall.missedCall";
+            }
+
+            if (content.callType === "broadcast") {
+                return "videoCall.broadcastEnded";
+            }
+
+            return "videoCall.ended";
+        }
+    });
+
+    function joinCall() {
+        if (!inCall && $selectedChatSummaryStore?.videoCallInProgress) {
+            publish("startVideoCall", {
+                chatId: $selectedChatSummaryStore.id,
+                callType: $selectedChatSummaryStore.videoCallInProgress.callType,
+                join: true,
+            });
+        }
+    }
+
+    function leaveCall() {
+        if (inCall) {
+            activeVideoCall.endCall();
+        }
+    }
+</script>
+
+{#snippet replyView()}
+    <Row gap="sm" minWidth="12rem">
+        <Column width="fill" gap="xxs" padding={["xs", "zero"]}>
+            {@render title?.()}
+            <Row gap="xs" crossAxisAlignment="center">
+                <Video
+                    color={me ? ColourVars.secondaryLight : ColourVars.primaryLight}
+                    size="1.25rem" />
+                <ChatCaption colour={me ? "secondaryLight" : "primaryLight"}>
+                    <Translatable
+                        resourceKey={i18nKey(
+                            `videoCall.${content.callType === "broadcast" ? "broadcastType" : "defaultType"}`,
+                        )} />
+                </ChatCaption>
+            </Row>
+        </Column>
+    </Row>
+{/snippet}
+
+{#snippet regularView()}
+    <Column gap={"sm"} padding={["zero", "zero", "xl"]} minWidth="60vw">
+        <Column
+            padding={me ? "xs" : "zero"}
+            borderRadius={["lg", "lg", "md", "md"]}
+            backgroundColor={ColourVars.background2}>
+            <!-- Details -->
+            <Column gap="xs">
+                <!-- Title -->
+                <Column gap="xxs" padding={["xxs", "sm"]}>
+                    <Row gap="xs" crossAxisAlignment="center">
+                        <Video size="1.5rem" />
+                        <ChatCaption fontWeight="semi-bold" width="hug">
+                            <!-- TODO i18n -->
+                            <Translatable resourceKey={i18nKey(callTitle)} />
+                        </ChatCaption>
+                    </Row>
+                    <Row gap="sm" padding="xxs">
+                        <Row width="hug" gap="xs" crossAxisAlignment="center">
+                            <Participants size="1rem" color={ColourVars.textSecondary} />
+                            <BodySmall colour="textSecondary">
+                                {content.participants.length}
+                            </BodySmall>
+                        </Row>
+                        {#if duration !== undefined}
+                            <Row width="hug" gap="xs" crossAxisAlignment="center">
+                                <Clock size="1rem" color={ColourVars.textSecondary} />
+                                <BodySmall colour="textSecondary">
+                                    {duration}
+                                </BodySmall>
+                            </Row>
+                        {/if}
+                    </Row>
+                </Column>
+
+                <!-- Participants -->
+                <Row
+                    supplementalClass="vc_participants"
+                    gap="xs"
+                    padding={["sm", "md"]}
+                    borderRadius="md"
+                    crossAxisAlignment="center"
+                    backgroundColor={ColourVars.background0}>
+                    {#each [...content.participants].slice(0, DISPLAYED_PARTICIPANTS) as participantId}
+                        <Avatar
+                            url={client.userAvatarUrl($allUsersStore.get(participantId.userId))}
+                            size={"md"} />
+                    {/each}
+                    {#if content.participants.length > DISPLAYED_PARTICIPANTS}
+                        <div class="extra">
+                            <Body align="center">
+                                {`+${content.participants.length - DISPLAYED_PARTICIPANTS}`}
+                            </Body>
+                        </div>
+                    {/if}
+                </Row>
+
+                <!-- Buttons! -->
+                {#if inCall}
+                    <Button disabled={finished} onClick={leaveCall}>
+                        {#snippet icon(color)}
+                            <PhoneRemove {color} />
+                        {/snippet}
+                        <Translatable
+                            resourceKey={i18nKey(
+                                content.ended ? "videoCall.ended" : "videoCall.leave",
+                            )} />
+                    </Button>
+                {:else}
+                    <Button disabled={finished} onClick={joinCall}>
+                        {#snippet icon(color)}
+                            {#if !finished}
+                                <PhoneJoin {color} />
+                            {/if}
+                        {/snippet}
+                        <Column mainAxisAlignment={"center"} crossAxisAlignment={"center"}>
+                            <Body width={"hug"} fontWeight={"bold"} colour={"textOnPrimary"}>
+                                <Translatable
+                                    resourceKey={endedDate
+                                        ? i18nKey("videoCall.endedAt", {
+                                              time: client.toShortTimeString(endedDate),
+                                          })
+                                        : i18nKey("videoCall.join")} />
+                            </Body>
+                        </Column>
+                    </Button>
+                {/if}
+            </Column>
+        </Column>
+    </Column>
+{/snippet}
+
+<MessageRenderer {replyView} {regularView} {me} {reply} />
+
+<style lang="scss">
+    :global {
+        .vc_participants > * {
+            border: var(--bw-thick) solid var(--background-0);
+
+            &:not(:first-child) {
+                margin-left: -1rem;
+            }
+        }
+
+        .extra {
+            z-index: 1;
+            width: 2.5rem;
+            height: 2.5rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: var(--rad-circle);
+            background-color: var(--background-2);
+        }
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/chats/core/content/VideoContent.svelte b/frontend/app/src/mobile/features/chats/core/content/VideoContent.svelte
new file mode 100644
index 0000000000..9047939665
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/content/VideoContent.svelte
@@ -0,0 +1,310 @@
+<script lang="ts">
+    import { i18nKey } from "@src/i18n/i18n";
+    import { ChatCaption, ChatFootnote, ColourVars, Column, Row } from "component-lib";
+    import type { VideoContent } from "@client";
+    import { publish } from "@client";
+    import { type Snippet } from "svelte";
+    import PlayCircleOutline from "svelte-material-icons/PlayCircleOutline.svelte";
+    import VideoOutline from "svelte-material-icons/VideoOutline.svelte";
+    import { rtlStore } from "@src/stores/rtl";
+    import {
+        getProxyAdjustedBlobUrl,
+        getVideoDuration,
+        reservedMediaStyle,
+        setPlayingMedia,
+    } from "@src/utils/media";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import MessageRenderer from "@src/mobile/features/chats/core/MessageRenderer.svelte";
+
+    const MIN_VIDEO_WIDTH = 180;
+
+    interface Props {
+        content: VideoContent;
+        contentWidth?: number;
+        title?: Snippet;
+        fill: boolean;
+        me: boolean;
+        reply?: boolean;
+        draft?: boolean;
+        height?: number | undefined;
+        edited: boolean;
+        blockLevelMarkdown?: boolean;
+        isPreview?: boolean;
+        onRemove?: () => void;
+    }
+
+    let {
+        content,
+        contentWidth = $bindable(),
+        title,
+        fill,
+        me,
+        reply = false,
+        draft = false,
+        height = undefined,
+        edited,
+        blockLevelMarkdown = false,
+        isPreview = false,
+        onRemove,
+    }: Props = $props();
+
+    let videoPlayer: HTMLVideoElement | undefined = $state();
+    let landscape = $derived(content.height < content.width);
+    let imageUrl = $derived(getProxyAdjustedBlobUrl(content.imageData.blobUrl));
+    let videoUrl = $derived(getProxyAdjustedBlobUrl(content.videoData.blobUrl));
+    let videoDuration = $state<string>();
+    let ratio = $derived(content.width / content.height);
+    let posterHeight = $derived(draft || reply ? 70 : (height ?? 400));
+    // mirrors reservedMediaStyle's width formula (used for the caption cap;
+    // the container clamp is applied by CSS)
+    let posterWidth = $derived(
+        draft || reply
+            ? posterHeight * ratio
+            : Math.min(Math.max(200, content.width), 400 * ratio),
+    );
+
+    $effect(() => {
+        contentWidth = posterWidth;
+    });
+    $effect(() => {
+        if (videoUrl && videoDuration === undefined) {
+            getVideoDuration(videoUrl).then((duration) => {
+                videoDuration = formatDuration(Math.round(duration));
+            });
+        }
+    });
+
+    function formatDuration(duration: number): string {
+        if (duration === undefined) return "--:--";
+
+        const pad = (val: number) => `${val < 10 ? "0" : ""}${val}`;
+        const mins = Math.floor(duration / 60);
+        const secs = duration % 60;
+        return `${pad(mins)}:${pad(secs)}`;
+    }
+
+    function onPlayDraftPreview() {
+        if (videoPlayer) {
+            setPlayingMedia(videoPlayer);
+        }
+    }
+
+    function playVideo() {
+        publish("playVideo", content);
+    }
+</script>
+
+<!-- Reply to a video-->
+{#snippet replyView(textContent?: Snippet)}
+    <Row gap="sm">
+        <Column width="fill" gap="xxs" padding={textContent ? "zero" : ["xs", "zero"]}>
+            {@render title?.()}
+            {#if textContent}
+                {@render textContent()}
+            {:else}
+                <Row gap="xs" crossAxisAlignment="center">
+                    <VideoOutline
+                        color={me ? ColourVars.secondaryLight : ColourVars.primaryLight}
+                        size="1.25rem" />
+                    <ChatCaption colour={me ? "secondaryLight" : "primaryLight"}>
+                        <Translatable resourceKey={i18nKey("Video")} />
+                    </ChatCaption>
+                </Row>
+            {/if}
+        </Column>
+
+        <Column supplementalClass="reply_image_preview" width="hug" height="fill">
+            <div class="img" style="background-image:url({imageUrl});"></div>
+            <div class="play_icon">
+                <PlayCircleOutline class="play" size="1.25rem" color={ColourVars.textPrimary} />
+            </div>
+        </Column>
+    </Row>
+{/snippet}
+
+<!-- Message draft of a video -->
+{#snippet draftView()}
+    <Column width={"fill"}>
+        <div class="video_draft">
+            <div class="video_wrapper" class:rtl={$rtlStore}>
+                <video
+                    preload="none"
+                    poster={content.imageData.blobUrl}
+                    class:landscape
+                    class="video"
+                    style={height === undefined ? undefined : `height: ${height}px`}
+                    controls
+                    onplay={onPlayDraftPreview}
+                    bind:this={videoPlayer}>
+                    <track kind="captions" />
+                    {#if content.videoData.blobUrl}
+                        <source src={content.videoData.blobUrl} />
+                    {/if}
+                </video>
+            </div>
+        </div>
+    </Column>
+{/snippet}
+
+<!-- Rendered video message -->
+{#snippet regularView(textContent?: Snippet)}
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_interactive_supports_focus -->
+    <div role="button" class="video_regular" class:reply class:rtl={$rtlStore} onclick={playVideo}>
+        <img
+            alt="..."
+            class="preview_img"
+            class:landscape
+            class:fill
+            class:me
+            src={imageUrl}
+            style={height !== undefined
+                ? `height: ${height}px`
+                : (reservedMediaStyle(content.width, content.height) ??
+                  `height: ${posterHeight}px; width: ${MIN_VIDEO_WIDTH}px`)} />
+
+        <div class="play_icon">
+            <PlayCircleOutline class="play" size="3rem" color={ColourVars.textPrimary} />
+        </div>
+
+        <div class="duration">
+            <VideoOutline size="1rem" color={ColourVars.textPrimary} />
+            <ChatFootnote>{videoDuration ?? "--:--"}</ChatFootnote>
+        </div>
+    </div>
+    {@render textContent?.()}
+{/snippet}
+
+<MessageRenderer
+    {replyView}
+    {draftView}
+    {regularView}
+    caption={content.caption}
+    maxCaptionWidth={!reply && !draft ? posterWidth : undefined}
+    {me}
+    {reply}
+    {draft}
+    {edited}
+    {blockLevelMarkdown}
+    {isPreview}
+    {onRemove} />
+
+<style lang="scss">
+    .video_regular {
+        display: flex;
+        position: relative;
+
+        .preview_img {
+            width: 100%;
+            background-color: black;
+            border-radius: var(--rad-lg) var(--rad-lg) var(--rad-md) var(--rad-md);
+
+            &.me {
+                border-top-right-radius: var(--rad-sm);
+
+                &.fill {
+                    border-bottom-left-radius: var(--rad-lg);
+                    border-bottom-right-radius: var(--rad-lg);
+                }
+            }
+
+            &:not(.me) {
+                border-top-left-radius: var(--rad-sm);
+
+                &:not(.fill) {
+                    border-bottom-right-radius: var(--rad-md);
+                    border-bottom-left-radius: var(--rad-md);
+                }
+            }
+
+            &:not(.landscape) {
+                min-height: 6rem;
+                min-width: 0;
+            }
+        }
+
+        .play_icon {
+            padding: var(--sp-md);
+        }
+
+        .duration {
+            position: absolute;
+            bottom: var(--sp-xxs);
+            left: var(--sp-sm);
+            display: flex;
+            gap: var(--sp-xs);
+            align-items: center;
+            height: 0.75rem;
+        }
+    }
+
+    .video_draft {
+        width: 100%;
+        padding: var(--sp-xs);
+        animation: grow-height 300ms ease-out forwards;
+        will-change: max-height, opacity;
+
+        .video_wrapper {
+            min-height: 4rem;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: var(--sp-xs);
+            background-color: var(--background-0);
+            border-radius: var(--rad-lg) var(--rad-lg) var(--rad-lg) var(--rad-lg);
+        }
+
+        .video {
+            display: flex;
+            width: 100%;
+            max-height: 14rem;
+            overflow: hidden;
+            border-radius: var(--rad-md);
+        }
+    }
+
+    :global {
+        .video_regular .play_icon,
+        .reply_image_preview .play_icon {
+            position: absolute;
+            display: flex;
+            top: 50%;
+            left: 50%;
+            border-radius: var(--rad-circle);
+            transform: translate(-50%, -50%);
+            // background: rgba(50, 50, 50, 0.5);
+            background: radial-gradient(
+                circle,
+                rgba(50, 50, 50, 0.75) 0%,
+                rgba(50, 50, 50, 0.5) 50%,
+                rgba(50, 50, 50, 0) 75%
+            );
+        }
+
+        .video_regular {
+            // Same CSS is set for message metadata
+            .duration {
+                text-shadow: 0 0 0.125rem var(--backdrop);
+
+                path {
+                    filter: drop-shadow(0 0 0.125rem var(--background-0));
+                }
+            }
+        }
+
+        .reply_image_preview {
+            position: relative;
+            height: -webkit-fill-available;
+
+            .img {
+                width: 4rem;
+                min-height: 3rem;
+                height: 100%;
+                background-size: cover;
+                background-position: top;
+                border-radius: var(--rad-sm);
+                filter: contrast(1.1) brightness(1.05) saturate(1.1);
+            }
+        }
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/chats/core/events/AggregateCommonEvents.svelte b/frontend/app/src/mobile/features/chats/core/events/AggregateCommonEvents.svelte
new file mode 100644
index 0000000000..997aa11908
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/events/AggregateCommonEvents.svelte
@@ -0,0 +1,151 @@
+<script lang="ts">
+    import { Caption, Container } from "component-lib";
+    import type { Level, MemberRole, OpenChat, UserLookup, UserSummary } from "@client";
+    import { allUsersStore, roleAsText } from "@client";
+    import { getContext, onDestroy, onMount } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import { buildDisplayName } from "@src/utils/user";
+    import Markdown from "@src/ui/Markdown.svelte";
+
+    interface Props {
+        user: UserSummary | undefined;
+        joined: Set<string>;
+        messagesDeleted: number[];
+        rolesChanged: Map<string, Map<MemberRole, Set<string>>>;
+        observer?: IntersectionObserver;
+        readByMe: boolean;
+        level: Level;
+    }
+
+    let { user, joined, messagesDeleted, rolesChanged, observer, readByMe, level }: Props =
+        $props();
+
+    let deletedMessagesElement: HTMLElement | undefined = $state();
+
+    const client = getContext<OpenChat>("client");
+
+    onMount(() => {
+        if (!readByMe && deletedMessagesElement) {
+            observer?.observe(deletedMessagesElement);
+        }
+    });
+
+    onDestroy(() => {
+        if (deletedMessagesElement) {
+            observer?.unobserve(deletedMessagesElement);
+        }
+    });
+
+    function buildJoinedText(userStore: UserLookup, userIds: Set<string>): string | undefined {
+        return userIds.size > 10
+            ? interpolate(
+                  $_,
+                  i18nKey(
+                      "nUsersJoined",
+                      {
+                          number: userIds.size.toString(),
+                      },
+                      level,
+                      true,
+                  ),
+              )
+            : userIds.size > 0
+              ? interpolate(
+                    $_,
+                    i18nKey(
+                        "userJoined",
+                        {
+                            username: buildUserList(userStore, Array.from(userIds)),
+                        },
+                        level,
+                        true,
+                    ),
+                )
+              : undefined;
+    }
+
+    function buildRoleChangedTextList(
+        userStore: UserLookup,
+        rolesChanged: Map<string, Map<MemberRole, Set<string>>>,
+    ): string[] {
+        return [...rolesChanged.entries()].flatMap(([changedBy, changedByMap]) => {
+            const me = changedBy === user?.userId;
+            const changedByStr = buildDisplayName(userStore, changedBy, me ? "me" : "user");
+
+            return [...changedByMap.entries()].flatMap(([newRole, userIds]) =>
+                buildRoleChangedText(userStore, changedByStr, newRole, Array.from(userIds)),
+            );
+        });
+    }
+
+    function buildRoleChangedText(
+        userStore: UserLookup,
+        changedBy: string,
+        newRole: MemberRole,
+        userIds: string[],
+    ): string {
+        const meChanged = userIds.length == 1 && userIds[0] === user?.userId;
+        const members = buildUserList(userStore, userIds);
+
+        return $_(meChanged ? "yourRoleChanged" : "roleChanged", {
+            values: {
+                changed: members,
+                changedBy,
+                newRole: $_(roleAsText(newRole)),
+            },
+        });
+    }
+
+    function buildUserList(userStore: UserLookup, userIds: string[]): string {
+        return client.getMembersString(
+            user!,
+            userStore,
+            userIds,
+            $_("unknownUser"),
+            $_("you"),
+            user ? client.compareIsNotYouThenUsername(user.userId) : client.compareUsername,
+            false,
+        );
+    }
+
+    function expandDeletedMessages() {
+        client.expandDeletedMessages(new Set(messagesDeleted));
+    }
+    let joinedText = $derived(buildJoinedText($allUsersStore, joined));
+    let deletedText = $derived(
+        messagesDeleted.length > 0
+            ? messagesDeleted.length === 1
+                ? $_("oneMessageDeleted")
+                : $_("nMessagesDeleted", { values: { number: messagesDeleted.length } })
+            : undefined,
+    );
+    let roleChangedTextList = $derived(buildRoleChangedTextList($allUsersStore, rolesChanged));
+</script>
+
+{#if joinedText !== undefined || deletedText !== undefined || roleChangedTextList?.length > 0}
+    <Container padding={"sm"} crossAxisAlignment={"center"} direction={"vertical"}>
+        {#if joinedText !== undefined}
+            <Caption width={"hug"} colour={"textSecondary"}>
+                <Markdown oneLine suppressLinks text={joinedText} />
+            </Caption>
+        {/if}
+        {#if deletedText !== undefined}
+            <div
+                bind:this={deletedMessagesElement}
+                data-index={messagesDeleted.join(" ")}
+                class="deleted">
+                <Container onClick={expandDeletedMessages}>
+                    <Caption width={"hug"} colour={"textSecondary"}>
+                        {deletedText}
+                    </Caption>
+                </Container>
+            </div>
+        {/if}
+        {#each roleChangedTextList as text}
+            <Caption width={"hug"} colour={"textSecondary"}>
+                <Markdown suppressLinks {text} />
+            </Caption>
+        {/each}
+    </Container>
+{/if}
diff --git a/frontend/app/src/mobile/features/chats/core/events/BotChangedEvent.svelte b/frontend/app/src/mobile/features/chats/core/events/BotChangedEvent.svelte
new file mode 100644
index 0000000000..05e6c0dcdb
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/events/BotChangedEvent.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+    import { allUsersStore, botState } from "@client";
+    import type { BotAdded, BotRemoved, BotUpdated } from "@shared";
+    import { _ } from "svelte-i18n";
+    import { buildDisplayName } from "@src/utils/user";
+    import NonMessageEvent from "./NonMessageEvent.svelte";
+
+    interface Props {
+        event: BotAdded | BotRemoved | BotUpdated;
+        timestamp: bigint;
+        userId: string;
+        changedBy: string;
+        resourceKey: string;
+    }
+
+    let { event, timestamp, userId, changedBy, resourceKey }: Props = $props();
+    let me = $derived(userId === changedBy);
+    let text = $derived.by(() => {
+        const bot = botState.externalBots.get(event.userId);
+        const username = buildDisplayName($allUsersStore, changedBy, me ? "me" : "user");
+        return $_(resourceKey, { values: { botname: bot?.name, username } });
+    });
+</script>
+
+<NonMessageEvent {text} {timestamp} />
diff --git a/frontend/app/src/mobile/features/chats/core/events/ChatEvent.svelte b/frontend/app/src/mobile/features/chats/core/events/ChatEvent.svelte
new file mode 100644
index 0000000000..b25355b6b3
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/events/ChatEvent.svelte
@@ -0,0 +1,359 @@
+<script lang="ts">
+    import { findUser } from "@src/utils/user";
+    import {
+        allUsersStore,
+        currentUserIdStore,
+        currentUserStore,
+        selectedChatWebhooksStore,
+        typing,
+        type ChatEvent,
+        type ChatIdentifier,
+        type ChatType,
+        type EnhancedReplyContext,
+        type EventWrapper,
+        type Level,
+        type Message,
+        type OpenChat,
+        type UserSummary,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import AggregateCommonEvents from "./AggregateCommonEvents.svelte";
+    import BotChangedEvent from "./BotChangedEvent.svelte";
+    import ChatFrozenEvent from "./ChatFrozenEvent.svelte";
+    import ChatMessage from "@src/mobile/features/chats/core/ChatMessage.svelte";
+    import ChatUnfrozenEvent from "./ChatUnfrozenEvent.svelte";
+    import DirectChatCreatedEvent from "./DirectChatCreatedEvent.svelte";
+    import DisappearingMessageTimeUpdated from "@src/mobile/features/chats/core/DisappearingMessageTimeUpdated.svelte";
+    import GroupChangedEvent from "./GroupChangedEvent.svelte";
+    import GroupChatCreatedEvent from "./GroupChatCreatedEvent.svelte";
+    import GroupInviteCodeChangedEvent from "./GroupInviteCodeChangedEvent.svelte";
+    import GroupRulesChangedEvent from "./GroupRulesChangedEvent.svelte";
+    import GroupVisibilityChangedEvent from "./GroupVisibilityChangedEvent.svelte";
+    import MembersChangedEvent from "./MembersChangedEvent.svelte";
+    import PermissionsChangedEvent from "./PermissionsChangedEvent.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        chatId: ChatIdentifier;
+        chatType: ChatType;
+        event: EventWrapper<ChatEvent>;
+        first: boolean;
+        last: boolean;
+        me: boolean;
+        accepted: boolean;
+        confirmed: boolean;
+        failed: boolean;
+        readByMe: boolean;
+        observer?: IntersectionObserver;
+        focused: boolean;
+        readonly: boolean;
+        pinned: boolean;
+        canPin: boolean;
+        canBlockUsers: boolean;
+        canDelete: boolean;
+        canSendAny: boolean;
+        canReact: boolean;
+        canInvite: boolean;
+        canReplyInThread: boolean;
+        publicGroup: boolean;
+        editing: boolean;
+        supportsEdit: boolean;
+        supportsReply: boolean;
+        collapsed: boolean;
+        threadRootMessage: Message | undefined;
+        onExpandMessage?: (() => void) | undefined;
+        onReplyTo: (replyContext: EnhancedReplyContext) => void;
+        onCollapseMessage: () => void;
+        onGoToMessageIndex: (args: { index: number }) => void;
+        onEditEvent: (ev: EventWrapper<Message>) => void;
+        onRemovePreview: (event: EventWrapper<Message>, url: string) => void;
+    }
+
+    let {
+        chatId,
+        chatType,
+        event,
+        first,
+        last,
+        me,
+        accepted,
+        confirmed,
+        failed,
+        readByMe,
+        observer,
+        focused,
+        readonly,
+        pinned,
+        canPin,
+        canBlockUsers,
+        canDelete,
+        canSendAny,
+        canReact,
+        canInvite,
+        canReplyInThread,
+        publicGroup,
+        supportsEdit,
+        supportsReply,
+        collapsed,
+        threadRootMessage,
+        onExpandMessage = undefined,
+        onReplyTo,
+        onCollapseMessage,
+        onGoToMessageIndex,
+        onEditEvent,
+        onRemovePreview,
+    }: Props = $props();
+
+    let userSummary = $derived<UserSummary>({
+        kind: "user",
+        userId: $currentUserStore.userId,
+        username: $currentUserStore.username,
+        displayName: $currentUserStore.displayName,
+        updated: BigInt(0),
+        suspended: false,
+        diamondStatus: "inactive",
+        chitBalance: 0,
+        streak: 0,
+        maxStreak: 0,
+        isUniquePerson: $currentUserStore.isUniquePerson,
+        totalChitEarned: 0,
+        hideOnlineStatus: false,
+    });
+
+    let levelType = $derived((chatType === "channel" ? "channel" : "group") as Level);
+    let level = $derived($_(`level.${levelType}`).toLowerCase());
+    let messageContext = $derived({
+        chatId,
+        threadRootMessageIndex: threadRootMessage?.messageIndex,
+    });
+    let hidden = $derived(
+        event.event.kind === "message" &&
+            event.event.content.kind === "message_reminder_created_content" &&
+            event.event.content.hidden,
+    );
+
+    function editEvent() {
+        onEditEvent(event as EventWrapper<Message>);
+    }
+
+    function deleteFailedMessage() {
+        if (event.event.kind === "message") {
+            client.deleteFailedMessage(
+                chatId,
+                event.event.messageId,
+                threadRootMessage?.messageIndex,
+            );
+        }
+    }
+
+    function retrySend() {
+        const message = event as EventWrapper<Message>;
+        client.sendMessageWithContent(
+            messageContext,
+            message.event.content,
+            message.event.blockLevelMarkdown,
+            [],
+            message.event.forwarded,
+            message.event.messageId,
+        );
+    }
+
+    let sender = $derived(
+        event.event.kind === "message"
+            ? findUser(event.event.sender, $allUsersStore, $selectedChatWebhooksStore)
+            : undefined,
+    );
+</script>
+
+{#if event.event.kind === "message"}
+    {#if !hidden}
+        <ChatMessage
+            {sender}
+            senderTyping={client.isTyping($typing, event.event.sender, messageContext)}
+            {focused}
+            {observer}
+            {accepted}
+            {confirmed}
+            {failed}
+            {readByMe}
+            {chatId}
+            {chatType}
+            {me}
+            {first}
+            {last}
+            {readonly}
+            {pinned}
+            {canPin}
+            {canBlockUsers}
+            {canDelete}
+            canQuoteReply={canSendAny}
+            {canReact}
+            canStartThread={canReplyInThread}
+            {publicGroup}
+            {threadRootMessage}
+            {supportsEdit}
+            {supportsReply}
+            {collapsed}
+            senderContext={event.event.senderContext}
+            {onGoToMessageIndex}
+            {onReplyTo}
+            onRetrySend={retrySend}
+            onEditMessage={editEvent}
+            {onExpandMessage}
+            {onCollapseMessage}
+            onRemovePreview={(url) => onRemovePreview(event as EventWrapper<Message>, url)}
+            onDeleteFailedMessage={deleteFailedMessage}
+            eventIndex={event.index}
+            timestamp={event.timestamp}
+            expiresAt={event.expiresAt}
+            msg={event.event} />
+    {/if}
+{:else if event.event.kind === "group_chat_created"}
+    <GroupChatCreatedEvent {chatType} event={event.event} {me} timestamp={event.timestamp} />
+{:else if event.event.kind === "direct_chat_created"}
+    <DirectChatCreatedEvent timestamp={event.timestamp} />
+{:else if event.event.kind === "members_added"}
+    <MembersChangedEvent
+        level={levelType}
+        user={userSummary}
+        changed={event.event.userIds}
+        changedBy={event.event.addedBy}
+        resourceKey={"addedBy"}
+        timestamp={event.timestamp} />
+{:else if event.event.kind === "users_invited"}
+    <MembersChangedEvent
+        level={levelType}
+        user={userSummary}
+        changed={event.event.userIds}
+        changedBy={event.event.invitedBy}
+        resourceKey={"invitedBy"}
+        timestamp={event.timestamp} />
+{:else if event.event.kind === "members_removed"}
+    <MembersChangedEvent
+        level={levelType}
+        user={userSummary}
+        changed={event.event.userIds}
+        changedBy={event.event.removedBy}
+        resourceKey={"removedBy"}
+        timestamp={event.timestamp} />
+{:else if event.event.kind === "aggregate_common_events"}
+    <AggregateCommonEvents
+        level={levelType}
+        {observer}
+        {readByMe}
+        user={userSummary}
+        joined={event.event.usersJoined}
+        messagesDeleted={event.event.messagesDeleted}
+        rolesChanged={event.event.rolesChanged} />
+{:else if event.event.kind === "users_blocked"}
+    <MembersChangedEvent
+        level={levelType}
+        user={userSummary}
+        changed={event.event.userIds}
+        changedBy={event.event.blockedBy}
+        resourceKey={"blockedBy"}
+        timestamp={event.timestamp} />
+{:else if event.event.kind === "users_unblocked"}
+    <MembersChangedEvent
+        level={levelType}
+        user={userSummary}
+        changed={event.event.userIds}
+        changedBy={event.event.unblockedBy}
+        resourceKey={"unblockedBy"}
+        timestamp={event.timestamp} />
+{:else if event.event.kind === "name_changed"}
+    <GroupChangedEvent
+        {level}
+        user={userSummary}
+        changedBy={event.event.changedBy}
+        property={interpolate($_, i18nKey("groupName", undefined, levelType, true))}
+        timestamp={event.timestamp} />
+{:else if event.event.kind === "desc_changed"}
+    <GroupChangedEvent
+        {level}
+        user={userSummary}
+        changedBy={event.event.changedBy}
+        property={interpolate($_, i18nKey("groupDesc", undefined, levelType, true))}
+        timestamp={event.timestamp} />
+{:else if event.event.kind === "rules_changed"}
+    <GroupRulesChangedEvent user={userSummary} event={event.event} timestamp={event.timestamp} />
+{:else if event.event.kind === "avatar_changed"}
+    <GroupChangedEvent
+        {level}
+        user={userSummary}
+        changedBy={event.event.changedBy}
+        property={interpolate($_, i18nKey("groupAvatar", undefined, levelType, true))}
+        timestamp={event.timestamp} />
+{:else if event.event.kind === "gate_updated"}
+    <GroupChangedEvent
+        {level}
+        user={userSummary}
+        changedBy={event.event.updatedBy}
+        property={$_("access.gate").toLowerCase()}
+        timestamp={event.timestamp} />
+{:else if event.event.kind === "external_url_updated"}
+    <GroupChangedEvent
+        {level}
+        user={userSummary}
+        changedBy={event.event.updatedBy}
+        property={$_("externalContent.name").toLowerCase()}
+        timestamp={event.timestamp} />
+{:else if event.event.kind === "group_visibility_changed"}
+    <GroupVisibilityChangedEvent
+        level={levelType}
+        user={userSummary}
+        isPublic={event.event.public}
+        messagesVisibleToNonMembers={event.event.messagesVisibleToNonMembers}
+        changedBy={event.event.changedBy}
+        timestamp={event.timestamp} />
+{:else if event.event.kind === "group_invite_code_changed"}
+    {#if canInvite}
+        <GroupInviteCodeChangedEvent
+            user={userSummary}
+            change={event.event.change}
+            changedBy={event.event.changedBy}
+            timestamp={event.timestamp} />
+    {/if}
+{:else if event.event.kind === "permissions_changed"}
+    <PermissionsChangedEvent
+        level={levelType}
+        user={userSummary}
+        event={event.event}
+        timestamp={event.timestamp} />
+{:else if event.event.kind === "events_ttl_updated"}
+    <DisappearingMessageTimeUpdated
+        user={userSummary}
+        changedBy={event.event.updatedBy}
+        newTimeToLive={event.event.newTimeToLive}
+        timestamp={event.timestamp} />
+{:else if event.event.kind === "chat_frozen"}
+    <ChatFrozenEvent user={userSummary} event={event.event} timestamp={event.timestamp} />
+{:else if event.event.kind === "chat_unfrozen"}
+    <ChatUnfrozenEvent user={userSummary} event={event.event} timestamp={event.timestamp} />
+{:else if event.event.kind === "bot_added"}
+    <BotChangedEvent
+        changedBy={event.event.addedBy}
+        resourceKey={"bots.events.add"}
+        event={event.event}
+        userId={$currentUserIdStore}
+        timestamp={event.timestamp} />
+{:else if event.event.kind === "bot_removed"}
+    <BotChangedEvent
+        changedBy={event.event.removedBy}
+        resourceKey={"bots.events.remove"}
+        event={event.event}
+        userId={$currentUserIdStore}
+        timestamp={event.timestamp} />
+{:else if event.event.kind === "bot_updated"}
+    <BotChangedEvent
+        changedBy={event.event.updatedBy}
+        resourceKey={"bots.events.update"}
+        event={event.event}
+        userId={$currentUserIdStore}
+        timestamp={event.timestamp} />
+{:else if !client.isEventKindHidden(event.event.kind, publicGroup && chatType === "channel")}
+    <div>Unexpected event type: {event.event.kind}</div>
+{/if}
diff --git a/frontend/app/src/mobile/features/chats/core/events/ChatEventList.svelte b/frontend/app/src/mobile/features/chats/core/events/ChatEventList.svelte
new file mode 100644
index 0000000000..fa5f66a742
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/events/ChatEventList.svelte
@@ -0,0 +1,217 @@
+<script lang="ts">
+    import { FloatingButton } from "component-lib";
+    import type {
+        ChatSummary,
+        EventWrapper,
+        Mention,
+        Message,
+        MessageContext,
+    } from "@client";
+    import { type Snippet } from "svelte";
+    import { _ } from "svelte-i18n";
+    import ArrowDown from "svelte-material-icons/ArrowDown.svelte";
+    import ArrowUp from "svelte-material-icons/ArrowUp.svelte";
+    import SharedChatEventList, {
+        type ChatEventListArgs,
+    } from "@src/ui/ChatEventList.svelte";
+    import type { FlatChatItem } from "@src/ui/flatChatItems";
+    import { rtlStore } from "@src/stores/rtl";
+    import { pop } from "@src/utils/transition";
+    import TimelineDate from "@src/mobile/features/chats/core/TimelineDate.svelte";
+
+    interface Props {
+        rootSelector: string;
+        unreadMessages: number;
+        chat: ChatSummary;
+        messagesDiv: HTMLDivElement | undefined;
+        messagesDivHeight: number;
+        initialised: boolean;
+        items: FlatChatItem[];
+        readonly: boolean;
+        firstUnreadMention: Mention | undefined;
+        footer: boolean;
+        threadRootEvent: EventWrapper<Message> | undefined;
+        maintainScroll: boolean;
+        scrollTopButtonEnabled?: boolean;
+        row: Snippet<[FlatChatItem, ChatEventListArgs]>;
+        visible: boolean;
+    }
+
+    let {
+        rootSelector,
+        unreadMessages,
+        chat,
+        messagesDiv = $bindable(),
+        messagesDivHeight = $bindable(),
+        initialised = $bindable(),
+        items,
+        readonly,
+        firstUnreadMention,
+        // footer,
+        threadRootEvent,
+        maintainScroll,
+        scrollTopButtonEnabled = false,
+        row,
+        visible,
+    }: Props = $props();
+
+    let list: SharedChatEventList | undefined = $state();
+    let stickyDateEl: HTMLElement | undefined = $state();
+    let stickyDateElTop = $derived(stickyDateEl?.getBoundingClientRect()?.top);
+    let stickyDateTimestamp = $state<bigint | undefined>(undefined);
+
+    export function scrollToMessageIndex(
+        context: MessageContext,
+        index: number,
+        preserveFocus: boolean,
+    ): Promise<void> {
+        return list?.scrollToMessageIndex(context, index, preserveFocus) ?? Promise.resolve();
+    }
+
+    export function onMessageWindowLoaded(args: {
+        context: MessageContext;
+        messageIndex: number | undefined;
+        initialLoad: boolean;
+    }): Promise<void> {
+        return list?.onMessageWindowLoaded(args) ?? Promise.resolve();
+    }
+</script>
+
+<div class="sticky-date" bind:this={stickyDateEl}>
+    {#if stickyDateTimestamp !== undefined}
+        <TimelineDate timestamp={stickyDateTimestamp} />
+    {/if}
+</div>
+
+<SharedChatEventList
+    bind:this={list}
+    {rootSelector}
+    {chat}
+    {threadRootEvent}
+    {items}
+    {readonly}
+    {maintainScroll}
+    {visible}
+    bind:initialised
+    bind:messagesDiv
+    bind:messagesDivHeight
+    viewportClass={"mobile-event-list"}
+    {stickyDateElTop}
+    bind:stickyDateTimestamp
+    {row}>
+    {#snippet fabs({
+        showGoToTop,
+        showGoToBottom,
+        loadingFromUserScroll,
+        scrollToTop,
+        scrollToLast,
+        scrollToMention,
+    })}
+        <div class="fab_wrapper" class:rtl={$rtlStore}>
+            {#if scrollTopButtonEnabled}
+                <div title={$_("scrollToTop")} class:show={showGoToTop} class="fab to-top">
+                    <FloatingButton variant="secondary" onClick={scrollToTop}>
+                        {#snippet icon(color)}
+                            <ArrowUp {color} />
+                        {/snippet}
+                    </FloatingButton>
+                </div>
+            {/if}
+
+            {#if !readonly}
+                <div
+                    title={$_("goToFirstMention")}
+                    class:show={firstUnreadMention !== undefined}
+                    class="fab mentions">
+                    <FloatingButton
+                        variant="secondary"
+                        onClick={() => scrollToMention(firstUnreadMention)}>
+                        {#snippet icon()}
+                            <div in:pop={{ duration: 1500 }} class="unread">
+                                <div class="mention-count">@</div>
+                            </div>
+                        {/snippet}
+                    </FloatingButton>
+                </div>
+            {/if}
+            <div
+                title={$_("goToLatestMessage")}
+                class:show={showGoToBottom || unreadMessages > 0}
+                class="fab to-bottom">
+                <FloatingButton variant="secondary" onClick={scrollToLast}>
+                    {#snippet icon(color)}
+                        {#if loadingFromUserScroll}
+                            <div class="spinner"></div>
+                        {:else if unreadMessages > 0}
+                            <div in:pop={{ duration: 1500 }} class="unread">
+                                <div class="unread-count">
+                                    {unreadMessages > 999 ? "999+" : unreadMessages}
+                                </div>
+                            </div>
+                        {:else}
+                            <ArrowDown {color} />
+                        {/if}
+                    {/snippet}
+                </FloatingButton>
+            </div>
+        </div>
+    {/snippet}
+</SharedChatEventList>
+
+<style lang="scss">
+    :global(.vcl-viewport.mobile-event-list) {
+        flex: 1 1 0;
+        position: relative;
+        padding: var(--sp-md) var(--sp-lg) 0 var(--sp-lg);
+        gap: var(--sp-xs);
+    }
+
+    .sticky-date {
+        position: absolute;
+        top: 0.375rem;
+        left: 50%;
+        transform: translateX(-50%);
+        @include z-index("date-label");
+    }
+
+    .spinner {
+        @include loading-spinner(1em, 0.5em, var(--button-spinner), "/assets/plain-spinner.svg");
+    }
+
+    .fab_wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: var(--sp-md);
+        position: absolute;
+        bottom: var(--sp-sm);
+        pointer-events: none;
+
+        &:not(.rtl) {
+            right: var(--sp-xl);
+        }
+
+        &.rtl {
+            left: var(--sp-md);
+        }
+    }
+
+    .fab {
+        opacity: 0;
+        transition: opacity ease-in-out 300ms;
+        pointer-events: none;
+        @include z-index("fab");
+
+        &.show {
+            opacity: 1;
+            pointer-events: all;
+        }
+    }
+
+    .mentions .mention-count {
+        @include font(bold, normal, fs-140);
+    }
+
+    .unread {
+        color: var(--primary);
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/chats/core/events/ChatFrozenEvent.svelte b/frontend/app/src/mobile/features/chats/core/events/ChatFrozenEvent.svelte
new file mode 100644
index 0000000000..445a7fa658
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/events/ChatFrozenEvent.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+    import type { UserSummary } from "@client";
+    import { allUsersStore } from "@client";
+    import type { ChatFrozenEvent } from "@shared";
+    import { _ } from "svelte-i18n";
+    import { buildDisplayName } from "@src/utils/user";
+    import NonMessageEvent from "./NonMessageEvent.svelte";
+
+    interface Props {
+        event: ChatFrozenEvent;
+        user: UserSummary | undefined;
+        timestamp: bigint;
+    }
+
+    let { event, user, timestamp }: Props = $props();
+
+    let me = $derived(event.frozenBy === user?.userId);
+    let frozenByStr = $derived(
+        buildDisplayName($allUsersStore, event.frozenBy, me ? "me" : "user"),
+    );
+
+    let chatFrozenByText = $derived(
+        $_("chatFrozenBy", {
+            values: {
+                frozenBy: frozenByStr,
+            },
+        }),
+    );
+
+    let text = $derived(
+        event.reason ? `${chatFrozenByText}\n${$_("reason")}: ${event.reason}` : chatFrozenByText,
+    );
+</script>
+
+<NonMessageEvent {text} {timestamp} />
diff --git a/frontend/app/src/mobile/features/chats/core/events/ChatUnfrozenEvent.svelte b/frontend/app/src/mobile/features/chats/core/events/ChatUnfrozenEvent.svelte
new file mode 100644
index 0000000000..e8f785423f
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/events/ChatUnfrozenEvent.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+    import type { UserSummary } from "@client";
+    import { allUsersStore } from "@client";
+    import type { ChatUnfrozenEvent } from "@shared";
+    import { _ } from "svelte-i18n";
+    import { buildDisplayName } from "@src/utils/user";
+    import NonMessageEvent from "./NonMessageEvent.svelte";
+
+    interface Props {
+        event: ChatUnfrozenEvent;
+        user: UserSummary | undefined;
+        timestamp: bigint;
+    }
+
+    let { event, user, timestamp }: Props = $props();
+
+    let me = $derived(event.unfrozenBy === user?.userId);
+    let unfrozenByStr = $derived(
+        buildDisplayName($allUsersStore, event.unfrozenBy, me ? "me" : "user"),
+    );
+
+    let text = $derived(
+        $_("chatUnfrozenBy", {
+            values: {
+                unfrozenBy: unfrozenByStr,
+            },
+        }),
+    );
+</script>
+
+<NonMessageEvent {text} {timestamp} />
diff --git a/frontend/app/src/components_mobile/home/DirectChatCreatedEvent.svelte b/frontend/app/src/mobile/features/chats/core/events/DirectChatCreatedEvent.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/DirectChatCreatedEvent.svelte
rename to frontend/app/src/mobile/features/chats/core/events/DirectChatCreatedEvent.svelte
diff --git a/frontend/app/src/mobile/features/chats/core/events/GroupChangedEvent.svelte b/frontend/app/src/mobile/features/chats/core/events/GroupChangedEvent.svelte
new file mode 100644
index 0000000000..567a8bc4f7
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/events/GroupChangedEvent.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+    import type { UserSummary } from "@client";
+    import { allUsersStore } from "@client";
+    import { _ } from "svelte-i18n";
+    import { buildDisplayName } from "@src/utils/user";
+    import NonMessageEvent from "./NonMessageEvent.svelte";
+
+    interface Props {
+        user: UserSummary | undefined;
+        changedBy: string;
+        property: string;
+        timestamp: bigint;
+        level: string;
+    }
+
+    let { user, changedBy, property, timestamp, level }: Props = $props();
+
+    let me = $derived(changedBy === user?.userId);
+    let changedByStr = $derived(buildDisplayName($allUsersStore, changedBy, me ? "me" : "user"));
+    let text = $derived(
+        $_("groupChangedBy", {
+            values: {
+                changed: property,
+                changedBy: changedByStr,
+                level,
+            },
+        }),
+    );
+</script>
+
+<NonMessageEvent {text} {timestamp} />
diff --git a/frontend/app/src/mobile/features/chats/core/events/GroupChatCreatedEvent.svelte b/frontend/app/src/mobile/features/chats/core/events/GroupChatCreatedEvent.svelte
new file mode 100644
index 0000000000..918d1b9502
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/events/GroupChatCreatedEvent.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+    import type { ChatType, GroupChatCreated } from "@client";
+    import { allUsersStore } from "@client";
+    import { _ } from "svelte-i18n";
+    import { buildDisplayName } from "@src/utils/user";
+    import NonMessageEvent from "./NonMessageEvent.svelte";
+
+    interface Props {
+        me: boolean;
+        event: GroupChatCreated;
+        timestamp: bigint;
+        chatType: ChatType;
+    }
+
+    let { me, event, timestamp, chatType }: Props = $props();
+
+    let level = $derived($_(`level.${chatType === "channel" ? "channel" : "group"}`).toLowerCase());
+    let username = $derived(buildDisplayName($allUsersStore, event.created_by, me ? "me" : "user"));
+    let text = $derived(
+        $_("groupCreatedBy", {
+            values: {
+                username,
+                level,
+            },
+        }),
+    );
+</script>
+
+<NonMessageEvent {text} {timestamp} />
diff --git a/frontend/app/src/mobile/features/chats/core/events/GroupInviteCodeChangedEvent.svelte b/frontend/app/src/mobile/features/chats/core/events/GroupInviteCodeChangedEvent.svelte
new file mode 100644
index 0000000000..6c4b3e0250
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/events/GroupInviteCodeChangedEvent.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+    import type { GroupInviteCodeChange, UserSummary } from "@client";
+    import { allUsersStore } from "@client";
+    import { _ } from "svelte-i18n";
+    import { buildDisplayName } from "@src/utils/user";
+    import NonMessageEvent from "./NonMessageEvent.svelte";
+
+    interface Props {
+        user: UserSummary | undefined;
+        change: GroupInviteCodeChange;
+        changedBy: string;
+        timestamp: bigint;
+    }
+
+    let { user, change, changedBy, timestamp }: Props = $props();
+
+    let me = $derived(changedBy === user?.userId);
+    let changedByStr = $derived(buildDisplayName($allUsersStore, changedBy, me ? "me" : "user"));
+    let changedStr = $derived($_(`invite.${change}`));
+    let text = $derived(
+        $_("groupInviteChangedBy", {
+            values: {
+                changedBy: changedByStr,
+                changed: changedStr,
+            },
+        }),
+    );
+</script>
+
+<NonMessageEvent {text} {timestamp} />
diff --git a/frontend/app/src/mobile/features/chats/core/events/GroupRulesChangedEvent.svelte b/frontend/app/src/mobile/features/chats/core/events/GroupRulesChangedEvent.svelte
new file mode 100644
index 0000000000..2555dbab85
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/events/GroupRulesChangedEvent.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+    import type { GroupRulesChanged, UserSummary } from "@client";
+    import { allUsersStore } from "@client";
+    import { _ } from "svelte-i18n";
+    import { buildDisplayName } from "@src/utils/user";
+    import NonMessageEvent from "./NonMessageEvent.svelte";
+
+    interface Props {
+        user: UserSummary | undefined;
+        event: GroupRulesChanged;
+        timestamp: bigint;
+    }
+
+    let { user, event, timestamp }: Props = $props();
+
+    let me = $derived(event.changedBy === user?.userId);
+    let changedByStr = $derived(
+        buildDisplayName($allUsersStore, event.changedBy, me ? "me" : "user"),
+    );
+    let templateValues = $derived({
+        values: {
+            changed: $_("groupRules"),
+            changedBy: changedByStr,
+        },
+    });
+
+    let text = $derived(
+        event.enabled && event.enabledPrev
+            ? $_("groupChangedBy", templateValues)
+            : event.enabled
+              ? $_("groupRulesEnabled", templateValues)
+              : $_("groupRulesDisabled", templateValues),
+    );
+</script>
+
+{#if event.enabled || event.enabledPrev}
+    <NonMessageEvent {text} {timestamp} />
+{/if}
diff --git a/frontend/app/src/mobile/features/chats/core/events/GroupVisibilityChangedEvent.svelte b/frontend/app/src/mobile/features/chats/core/events/GroupVisibilityChangedEvent.svelte
new file mode 100644
index 0000000000..1d44a65830
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/events/GroupVisibilityChangedEvent.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+    import type { Level, UserSummary } from "@client";
+    import { allUsersStore } from "@client";
+    import { _ } from "svelte-i18n";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import { buildDisplayName } from "@src/utils/user";
+    import NonMessageEvent from "./NonMessageEvent.svelte";
+
+    interface Props {
+        user: UserSummary | undefined;
+        isPublic: boolean | undefined;
+        messagesVisibleToNonMembers: boolean | undefined;
+        changedBy: string;
+        timestamp: bigint;
+        level: Level;
+    }
+
+    let { user, isPublic, messagesVisibleToNonMembers, changedBy, timestamp, level }: Props =
+        $props();
+
+    let showEvent = $derived(messagesVisibleToNonMembers !== undefined || isPublic !== undefined);
+    let me = $derived(changedBy === user?.userId);
+    let changedByStr = $derived(buildDisplayName($allUsersStore, changedBy, me ? "me" : "user"));
+    let text = $derived(
+        interpolate(
+            $_,
+            i18nKey(
+                "groupVisibilityChangedBy",
+                {
+                    changedBy: changedByStr,
+                },
+                level,
+                true,
+            ),
+        ),
+    );
+</script>
+
+{#if showEvent}
+    <NonMessageEvent {text} {timestamp} />
+{/if}
diff --git a/frontend/app/src/mobile/features/chats/core/events/MembersChangedEvent.svelte b/frontend/app/src/mobile/features/chats/core/events/MembersChangedEvent.svelte
new file mode 100644
index 0000000000..be4041c1d4
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/events/MembersChangedEvent.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+    import type { Level, OpenChat, UserSummary } from "@client";
+    import { allUsersStore } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import { buildDisplayName } from "@src/utils/user";
+    import NonMessageEvent from "./NonMessageEvent.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        user: UserSummary | undefined;
+        changedBy: string;
+        changed: string[];
+        timestamp: bigint;
+        resourceKey: string;
+        level: Level;
+    }
+
+    let { user, changedBy, changed, timestamp, resourceKey, level }: Props = $props();
+
+    let me = $derived(changedBy === user?.userId);
+    let changedByStr = $derived(
+        `**${buildDisplayName($allUsersStore, changedBy, me ? "me" : "user")}**`,
+    );
+    let members = $derived(
+        client.getMembersString(
+            user!,
+            $allUsersStore,
+            changed,
+            $_("unknownUser"),
+            $_("you"),
+            user ? client.compareIsNotYouThenUsername(user.userId) : client.compareUsername,
+        ),
+    );
+
+    let text = $derived(
+        interpolate(
+            $_,
+            i18nKey(
+                resourceKey,
+                {
+                    changed: members,
+                    changedBy: changedByStr,
+                },
+                level,
+                true,
+            ),
+        ),
+    );
+</script>
+
+<NonMessageEvent {text} {timestamp} />
diff --git a/frontend/app/src/mobile/features/chats/core/events/NonMessageEvent.svelte b/frontend/app/src/mobile/features/chats/core/events/NonMessageEvent.svelte
new file mode 100644
index 0000000000..db2e46e241
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/events/NonMessageEvent.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+    import { Caption, Container } from "component-lib";
+    import type { OpenChat } from "@client";
+    import { getContext } from "svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        text: string;
+        timestamp: bigint;
+    }
+
+    let { text, timestamp }: Props = $props();
+    let date = $derived(new Date(Number(timestamp)));
+</script>
+
+<Container padding={"sm"} crossAxisAlignment={"center"} direction={"vertical"}>
+    <Caption width={"hug"} colour={"textSecondary"}>
+        <Markdown suppressLinks {text} />
+    </Caption>
+    <Caption width={"hug"} colour={"textSecondary"}>
+        {`${client.toLongDateString(date)} @ ${client.toShortTimeString(date)}`}
+    </Caption>
+</Container>
diff --git a/frontend/app/src/mobile/features/chats/core/events/PermissionsChangedEvent.svelte b/frontend/app/src/mobile/features/chats/core/events/PermissionsChangedEvent.svelte
new file mode 100644
index 0000000000..825736c9ae
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/core/events/PermissionsChangedEvent.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+    import type { Level, PermissionsChanged, UserSummary } from "@client";
+    import { allUsersStore } from "@client";
+    import { _ } from "svelte-i18n";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import { buildDisplayName } from "@src/utils/user";
+    import NonMessageEvent from "./NonMessageEvent.svelte";
+
+    interface Props {
+        event: PermissionsChanged;
+        user: UserSummary | undefined;
+        timestamp: bigint;
+        level: Level;
+    }
+
+    let { event, user, timestamp, level }: Props = $props();
+
+    let me = $derived(event.changedBy === user?.userId);
+    let changedByStr = $derived(
+        buildDisplayName($allUsersStore, event.changedBy, me ? "me" : "user"),
+    );
+
+    let text = $derived(
+        interpolate(
+            $_,
+            i18nKey(
+                "permissionsChangedBy",
+                {
+                    changedBy: changedByStr,
+                },
+                level,
+                true,
+            ),
+        ),
+    );
+</script>
+
+<NonMessageEvent {text} {timestamp} />
diff --git a/frontend/app/src/mobile/features/chats/group/ConfirmDelete.svelte b/frontend/app/src/mobile/features/chats/group/ConfirmDelete.svelte
new file mode 100644
index 0000000000..45f1c407a3
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/group/ConfirmDelete.svelte
@@ -0,0 +1,123 @@
+<script lang="ts">
+    import { toastStore } from "@src/stores/toast";
+    import { Body, Button, ColourVars, Container, H2, Input } from "component-lib";
+    import {
+        chatListScopeStore,
+        OpenChat,
+        publish,
+        routeForChatIdentifier,
+        routeForScope,
+        type MultiUserChat,
+    } from "@client";
+    import { navigate } from "@src/utils/navigation";
+    import { getContext } from "svelte";
+    import ChevronRight from "svelte-material-icons/ChevronRight.svelte";
+    import Delete from "svelte-material-icons/DeleteForeverOutline.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import MulticolourText from "@src/mobile/shared/MulticolourText.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        chat: MultiUserChat;
+    }
+
+    let { chat }: Props = $props();
+
+    let chatName = $state<string>();
+    let deleting = $state(false);
+
+    function deleteChat() {
+        deleting = true;
+        if (chat.id.kind === "channel") {
+            navigate(`/community/${chat.id.communityId}`);
+        } else {
+            navigate(routeForScope($chatListScopeStore));
+        }
+        client
+            .deleteGroup(chat.id)
+            .then((success) => {
+                if (success) {
+                    toastStore.showSuccessToast(
+                        i18nKey("deleteGroupSuccess", undefined, chat.level),
+                    );
+                    publish("closeModalStack");
+                } else {
+                    toastStore.showFailureToast(
+                        i18nKey("deleteGroupFailure", undefined, chat.level, true),
+                    );
+                    navigate(routeForChatIdentifier($chatListScopeStore.kind, chat.id));
+                }
+            })
+            .finally(() => (deleting = false));
+    }
+</script>
+
+<SlidingPageContent title={i18nKey("Delete a chat")} subtitle={i18nKey(chat.name)}>
+    <Container direction={"vertical"} gap={"xxl"} padding={["xxl", "lg"]}>
+        <Container padding={["zero", "lg"]} gap={"sm"} direction={"vertical"}>
+            <Delete color={ColourVars.primary} size={"7rem"} />
+            <H2>
+                <MulticolourText
+                    parts={[
+                        {
+                            text: i18nKey("Delete the "),
+                            colour: "textPrimary",
+                        },
+                        {
+                            text: i18nKey(chat.name),
+                            colour: "primary",
+                        },
+                        {
+                            text: i18nKey(" chat"),
+                            colour: "textPrimary",
+                        },
+                    ]}></MulticolourText>
+            </H2>
+            <Body colour={"textSecondary"}>
+                <Translatable
+                    resourceKey={i18nKey(
+                        "Do you definitely want to delete this chat? All of your chat history will be lost, and this cannot be undone.",
+                    )} />
+            </Body>
+        </Container>
+
+        <Container>
+            <Input
+                error={chatName !== chat.name}
+                bind:value={chatName}
+                placeholder={"Type in chat name..."}
+                minlength={0}
+                maxlength={200}
+                countdown={false}>
+                {#snippet subtext()}
+                    <Translatable
+                        resourceKey={i18nKey(
+                            "Type in the exact name of the chat to confirm deletion",
+                        )} />
+                {/snippet}
+            </Input>
+        </Container>
+
+        <Container direction={"vertical"} gap={"lg"}>
+            <Button
+                loading={deleting}
+                disabled={chatName !== chat.name}
+                danger
+                onClick={deleteChat}>
+                <Translatable resourceKey={i18nKey("Delete")} />
+                {#snippet icon(color)}
+                    <Delete {color} />
+                {/snippet}
+            </Button>
+            <Button secondary onClick={() => publish("closeModalPage")}>
+                <Translatable resourceKey={i18nKey("No, back to safety")} />
+                {#snippet icon(color)}
+                    <ChevronRight {color} />
+                {/snippet}
+            </Button>
+        </Container>
+    </Container>
+</SlidingPageContent>
diff --git a/frontend/app/src/mobile/features/chats/group/Convert.svelte b/frontend/app/src/mobile/features/chats/group/Convert.svelte
new file mode 100644
index 0000000000..ca0472034c
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/group/Convert.svelte
@@ -0,0 +1,175 @@
+<script lang="ts">
+    import { Body, BodySmall, Button, ColourVars, Container, H2, StatusCard } from "component-lib";
+    import {
+        defaultChatRules,
+        publish,
+        type GroupChatSummary,
+        type OpenChat,
+    } from "@client";
+    import { getContext } from "svelte";
+    import AccountGroup from "svelte-material-icons/AccountGroup.svelte";
+    import Check from "svelte-material-icons/Check.svelte";
+    import Close from "svelte-material-icons/Close.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import FancyLoader from "@src/mobile/ui/icons/FancyLoader.svelte";
+    import MulticolourText from "@src/mobile/shared/MulticolourText.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        chat: GroupChatSummary;
+    }
+
+    let { chat = $bindable() }: Props = $props();
+
+    let state: "idle" | "converting" | "error" = $state("idle");
+
+    let steps: string[] = [
+        "freeze the existing group",
+        "create a new community with the same name as the group",
+        "add a public channel to the community with the same name as the group",
+        "add all members of the group as members of the community",
+        "copy the full message history from the group into the channel",
+        "delete the existing group",
+        "inform all members of the group that it has been converted to a community",
+    ];
+
+    function convert() {
+        state = "converting";
+        client.convertGroupToCommunity(chat, defaultChatRules("community")).then((id) => {
+            if (id !== undefined) {
+                publish("convertedGroupToCommunity", { name: chat.name, channelId: id });
+            } else {
+                state = "error";
+            }
+        });
+    }
+
+    function close() {
+        state = "idle";
+        publish("closeModalStack");
+    }
+</script>
+
+<SlidingPageContent title={i18nKey("Convert to community")} subtitle={i18nKey(chat.name)}>
+    <Container direction={"vertical"} gap={"xxl"} padding={["xxl", "lg"]}>
+        <Container padding={["zero", "lg"]} gap={"sm"} direction={"vertical"}>
+            <AccountGroup color={ColourVars.primary} size={"7rem"} />
+            <H2>
+                <MulticolourText
+                    parts={[
+                        {
+                            text: i18nKey("Convert "),
+                            colour: "textPrimary",
+                        },
+                        {
+                            text: i18nKey(chat.name),
+                            colour: "primary",
+                        },
+                        {
+                            text: i18nKey(" into a community"),
+                            colour: "textPrimary",
+                        },
+                    ]}></MulticolourText>
+            </H2>
+            <Body colour={"textSecondary"}>
+                <Translatable
+                    resourceKey={i18nKey(
+                        "We can take care of converting your group into a community.",
+                    )} />
+            </Body>
+        </Container>
+
+        <Container direction={"vertical"} gap={"lg"}>
+            <StatusCard
+                mode={"warning"}
+                title={"This is irreversible"}
+                body={"Converting a group into a community is an irreversible process. Make sure you are okay with this before proceeding."}
+            ></StatusCard>
+            <Container
+                borderRadius={"lg"}
+                gap={"md"}
+                direction={"vertical"}
+                padding={"lg"}
+                background={ColourVars.background1}>
+                {#if state === "converting"}
+                    <Container
+                        minHeight={"24rem"}
+                        direction={"vertical"}
+                        mainAxisAlignment={"center"}
+                        padding={["zero", "xxl"]}
+                        gap={"lg"}
+                        crossAxisAlignment={"center"}>
+                        <div class="spinner">
+                            <FancyLoader />
+                        </div>
+                        <Body align={"center"} colour={"textSecondary"}>
+                            <Translatable resourceKey={i18nKey("communities.pleaseWait")} />
+                        </Body>
+                    </Container>
+                {:else if state === "idle"}
+                    <Container gap={"md"} direction={"vertical"}>
+                        {#each steps as step}
+                            <Container gap={"md"}>
+                                <Check color={ColourVars.primary} size={"1.5rem"} />
+                                <Body>{step}</Body>
+                            </Container>
+                        {/each}
+                    </Container>
+                {:else if state === "error"}
+                    <Container
+                        minHeight={"24rem"}
+                        direction={"vertical"}
+                        mainAxisAlignment={"center"}
+                        padding={["zero", "xxl"]}
+                        gap={"lg"}
+                        crossAxisAlignment={"center"}>
+                        <div class="error-img"></div>
+                        <Body align={"center"} colour={"textSecondary"}>
+                            <Translatable
+                                resourceKey={i18nKey("communities.errors.convertFailed")} />
+                        </Body>
+                    </Container>
+                {/if}
+            </Container>
+
+            <BodySmall align={"center"} colour={"textSecondary"}>
+                {"This process might take a few minutes depending on the size of the group so please be patient"}
+            </BodySmall>
+
+            {#if state !== "error"}
+                <Button
+                    disabled={state === "converting"}
+                    loading={state === "converting"}
+                    onClick={convert}>
+                    <Translatable resourceKey={i18nKey("Convert to community")} />
+                    {#snippet icon(color)}
+                        <AccountGroup {color} />
+                    {/snippet}
+                </Button>
+                <Button secondary onClick={close}>
+                    <Translatable resourceKey={i18nKey("Cancel")} />
+                    {#snippet icon(color)}
+                        <Close {color} />
+                    {/snippet}
+                </Button>
+            {/if}
+        </Container>
+    </Container>
+</SlidingPageContent>
+
+<style lang="scss">
+    .spinner {
+        width: 4rem;
+        height: 4rem;
+    }
+    .error-img {
+        background-image: url("/assets/dead-bot.svg");
+        background-repeat: no-repeat;
+        width: 150px;
+        height: 150px;
+        margin: 30px auto;
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/home/groupdetails/Converted.svelte b/frontend/app/src/mobile/features/chats/group/Converted.svelte
similarity index 89%
rename from frontend/app/src/components_mobile/home/groupdetails/Converted.svelte
rename to frontend/app/src/mobile/features/chats/group/Converted.svelte
index 36c946b1fe..25adf40d3f 100644
--- a/frontend/app/src/components_mobile/home/groupdetails/Converted.svelte
+++ b/frontend/app/src/mobile/features/chats/group/Converted.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
     import { Body, Button, ColourVars, Container, H2 } from "component-lib";
     import { publish, routeForChatIdentifier, type ChannelIdentifier } from "@client";
-    import { navigate } from "@utils/navigation";
+    import { navigate } from "@src/utils/navigation";
     import AccountGroup from "svelte-material-icons/AccountGroup.svelte";
     import ChevronRight from "svelte-material-icons/ChevronRight.svelte";
     import PartyPopper from "svelte-material-icons/PartyPopper.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import MulticolourText from "../../MulticolourText.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import MulticolourText from "@src/mobile/shared/MulticolourText.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
 
     interface Props {
         name: string;
diff --git a/frontend/app/src/mobile/features/chats/group/DirectChatDetails.svelte b/frontend/app/src/mobile/features/chats/group/DirectChatDetails.svelte
new file mode 100644
index 0000000000..69c52a60c0
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/group/DirectChatDetails.svelte
@@ -0,0 +1,211 @@
+<script lang="ts">
+    import Translatable from "@src/ui/Translatable.svelte";
+    import Setting from "@src/mobile/shared/Setting.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import { activeVideoCall } from "@src/stores/video";
+    import { Body, Button, ColourVars, Container, IconButton, Switch } from "component-lib";
+    import type { DirectChatSummary, OptionUpdate, PublicProfile } from "@client";
+    import {
+        allUsersStore,
+        blockedUsersStore,
+        chatIdentifiersEqual,
+        favouritesStore,
+        OpenChat,
+        publish,
+    } from "@client";
+    import { getContext, onDestroy, onMount } from "svelte";
+    import ArrowLeft from "svelte-material-icons/ArrowLeft.svelte";
+    import CancelIcon from "svelte-material-icons/Cancel.svelte";
+    import HeartMinus from "svelte-material-icons/HeartMinusOutline.svelte";
+    import HeartPlus from "svelte-material-icons/HeartPlusOutline.svelte";
+    import Video from "svelte-material-icons/VideoOutline.svelte";
+    import DisappearingDuration from "./DisappearingDuration.svelte";
+    import UserProfileSummaryCard from "@src/mobile/features/profile/view/UserProfileSummaryCard.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        chat: DirectChatSummary;
+    }
+
+    let { chat }: Props = $props();
+
+    let blocked = $derived($blockedUsersStore.has(chat.them.userId));
+    let user = $derived($allUsersStore.get(chat.them.userId));
+    let profile = $state<PublicProfile | undefined>();
+    let eventsTTL = $state(chat.eventsTTL);
+    let videoCallInProgress = $derived(chat.videoCallInProgress !== undefined);
+    let blockLabel = $derived(blocked ? i18nKey("Unblock") : i18nKey("Block"));
+    let blockTitle = $derived(blocked ? i18nKey("Unblock this user") : i18nKey("Block this user"));
+    let blockInfo = $derived(
+        blocked
+            ? i18nKey(
+                  "If you would like to allow this user to send you messages or viewing your profile or activity.",
+              )
+            : i18nKey(
+                  "If you would like to prevent this user from sending you messages or viewing your profile or activity.",
+              ),
+    );
+    let inCall = $derived(
+        videoCallInProgress &&
+            $activeVideoCall !== undefined &&
+            chatIdentifiersEqual($activeVideoCall.chatId, chat.id),
+    );
+
+    onMount(() => {
+        client.getPublicProfile(chat.them.userId).subscribe({
+            onResult: (res) => {
+                profile = res;
+            },
+        });
+    });
+
+    function getUpdate(): OptionUpdate<bigint> {
+        if (eventsTTL !== undefined) {
+            return { value: eventsTTL };
+        } else if (chat.eventsTTL !== undefined) {
+            return "set_to_none";
+        } else {
+            return undefined;
+        }
+    }
+
+    onDestroy(async () => {
+        if (eventsTTL !== chat.eventsTTL) {
+            await client.updateDirectChatSettings(chat, getUpdate());
+        }
+    });
+
+    function toggleFavourites() {
+        if ($favouritesStore.has(chat.id)) {
+            client.removeFromFavourites(chat.id);
+        } else {
+            client.addToFavourites(chat.id);
+        }
+    }
+
+    function startVideoCall() {
+        if (inCall) {
+            publish("hangup");
+        } else {
+            publish("startVideoCall", {
+                chatId: chat.id,
+                callType: "default",
+                join: videoCallInProgress,
+            });
+        }
+    }
+
+    function toggleBlocked() {
+        if (blocked) {
+            unblockUser();
+        } else {
+            blockUser();
+        }
+    }
+
+    function blockUser() {
+        client.blockUserFromDirectChat(chat.them.userId).then((success) => {
+            if (success) {
+                toastStore.showSuccessToast(i18nKey("blockUserSucceeded"));
+            } else {
+                toastStore.showFailureToast(i18nKey("blockUserFailed"));
+            }
+        });
+    }
+
+    function unblockUser() {
+        client.unblockUserFromDirectChat(chat.them.userId).then((success) => {
+            if (success) {
+                toastStore.showSuccessToast(i18nKey("unblockUserSucceeded"));
+            } else {
+                toastStore.showFailureToast(i18nKey("unblockUserFailed"));
+            }
+        });
+    }
+</script>
+
+<Container background={ColourVars.background0} height={"fill"} direction={"vertical"}>
+    {#if user !== undefined}
+        <Container
+            supplementalClass={"direct_chat_details"}
+            gap={"xl"}
+            direction={"vertical"}
+            padding={["lg", "md", "md", "md"]}>
+            {#if profile}
+                <UserProfileSummaryCard showChit={false} mode={"view"} {user} {profile}>
+                    {#snippet buttons()}
+                        <IconButton
+                            onclick={() => publish("closeModalPage")}
+                            size={"md"}
+                            mode={"dark"}>
+                            {#snippet icon(color)}
+                                <ArrowLeft {color} />
+                            {/snippet}
+                        </IconButton>
+                        <IconButton onclick={toggleFavourites} size={"md"} mode={"dark"}>
+                            {#snippet icon(color)}
+                                {#if !$favouritesStore.has(chat.id)}
+                                    <HeartPlus {color} />
+                                {:else}
+                                    <HeartMinus {color} />
+                                {/if}
+                            {/snippet}
+                        </IconButton>
+                        <IconButton onclick={startVideoCall} size={"md"} mode={"dark"}>
+                            {#snippet icon(color)}
+                                <Video {color} />
+                            {/snippet}
+                        </IconButton>
+                    {/snippet}
+                </UserProfileSummaryCard>
+            {/if}
+
+            <div class="separator"></div>
+
+            <Container gap={"md"} padding={["zero", "lg"]} direction={"vertical"}>
+                <DisappearingDuration bind:eventsTTL>
+                    {#snippet toggle(onToggle, enabled)}
+                        <Setting
+                            toggle={onToggle}
+                            info={"A feature that automatically deletes messages after a set period, helping keep chats private and temporary."}>
+                            <Switch onChange={onToggle} width={"fill"} reverse checked={enabled}>
+                                <Translatable resourceKey={i18nKey("disappearingMessages.label")} />
+                            </Switch>
+                        </Setting>
+                    {/snippet}
+                </DisappearingDuration>
+            </Container>
+
+            <Container gap={"md"} padding={["zero", "lg"]} direction={"vertical"}>
+                <Body fontWeight={"bold"}>
+                    <Translatable resourceKey={blockTitle} />
+                </Body>
+                <Body colour={"textSecondary"}>
+                    <Translatable resourceKey={blockInfo} />
+                </Body>
+                <Button secondary={blocked} width={"fill"} onClick={toggleBlocked}>
+                    {#snippet icon(color)}
+                        <CancelIcon {color} />
+                    {/snippet}
+                    <Translatable resourceKey={blockLabel} />
+                </Button>
+            </Container>
+        </Container>
+    {/if}
+</Container>
+
+<style lang="scss">
+    .separator {
+        height: 6px;
+        align-self: stretch;
+        background-color: var(--background-1);
+        border-radius: var(--rad-circle);
+        margin: 0 var(--sp-md);
+    }
+
+    :global(.container.direct_chat_details .icon_button:first-child) {
+        margin-inline-end: auto;
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/home/DisappearingDuration.svelte b/frontend/app/src/mobile/features/chats/group/DisappearingDuration.svelte
similarity index 98%
rename from frontend/app/src/components_mobile/home/DisappearingDuration.svelte
rename to frontend/app/src/mobile/features/chats/group/DisappearingDuration.svelte
index 84b49fa145..0393e04f79 100644
--- a/frontend/app/src/components_mobile/home/DisappearingDuration.svelte
+++ b/frontend/app/src/mobile/features/chats/group/DisappearingDuration.svelte
@@ -4,7 +4,7 @@
     import { Body, Chip, Container } from "component-lib";
     import type { OpenChat } from "@client";
     import { getContext, onMount, untrack, type Snippet } from "svelte";
-    import Translatable from "../Translatable.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
 
     const ONE_MINUTE = 1000 * 60;
     const ONE_HOUR = ONE_MINUTE * 60;
diff --git a/frontend/app/src/mobile/features/chats/group/DisappearingMessagesSummary.svelte b/frontend/app/src/mobile/features/chats/group/DisappearingMessagesSummary.svelte
new file mode 100644
index 0000000000..69632cdd75
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/group/DisappearingMessagesSummary.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+    import { i18nKey } from "@src/i18n/i18n";
+    import { msToDays, msToHours, msToMinutes } from "@src/utils/time";
+    import { Body, Container } from "component-lib";
+    import { OpenChat } from "@client";
+    import { getContext } from "svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import Separator from "@src/mobile/features/chats/core/Separator.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        eventsTTL?: bigint;
+    }
+
+    let { eventsTTL }: Props = $props();
+    let disappearsIn = $derived.by(() => {
+        if (eventsTTL === undefined) {
+            return undefined;
+        }
+        const duration = client.durationFromMilliseconds(Number(eventsTTL));
+        const { days, hours, minutes, total } = duration;
+        if (days > 0) {
+            return `${msToDays(total)} days`;
+        } else if (hours > 0) {
+            return `${msToHours(total)} hours`;
+        } else if (minutes > 0) {
+            return `${msToMinutes(total)} minutes`;
+        }
+    });
+</script>
+
+{#if disappearsIn !== undefined}
+    <Separator />
+    <Container padding={["zero", "md"]} direction={"vertical"} gap={"md"}>
+        <Container crossAxisAlignment={"center"} mainAxisAlignment={"spaceBetween"}>
+            <Body colour={"textSecondary"} fontWeight={"bold"}>
+                <Translatable resourceKey={i18nKey("Disappearing messages")}></Translatable>
+            </Body>
+            <Body width={"hug"} colour={"secondary"} fontWeight={"bold"}>
+                <Translatable resourceKey={i18nKey(`${disappearsIn}`)}></Translatable>
+            </Body>
+        </Container>
+        <Body>
+            <Translatable
+                resourceKey={i18nKey(
+                    `After ${disappearsIn}, any message sent in this group will be deleted.`,
+                )}></Translatable>
+        </Body>
+    </Container>
+{/if}
diff --git a/frontend/app/src/mobile/features/chats/group/GroupDetails.svelte b/frontend/app/src/mobile/features/chats/group/GroupDetails.svelte
new file mode 100644
index 0000000000..27a415d396
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/group/GroupDetails.svelte
@@ -0,0 +1,472 @@
+<script lang="ts">
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import { activeVideoCall } from "@src/stores/video";
+    import {
+        Avatar,
+        BigButton,
+        Body,
+        BodySmall,
+        Button,
+        ColourVars,
+        Container,
+        defaultBackgroundGradient,
+        H2,
+        IconButton,
+        ReadMore,
+        Row,
+    } from "component-lib";
+    import type { CommunityMap, CommunitySummary, MultiUserChat, OpenChat } from "@client";
+    import {
+        allUsersStore,
+        anonUserStore,
+        chatIdentifiersEqual,
+        communitiesStore,
+        defaultChatRules,
+        favouritesStore,
+        isDiamondStore,
+        publish,
+        ROLE_OWNER,
+        selectedChatMembersStore,
+        selectedChatRulesStore,
+        selectedChatSummaryStore,
+        selectedCommunityRulesStore,
+        selectedCommunitySummaryStore,
+    } from "@client";
+    import { getContext } from "svelte";
+    import AccountGroup from "svelte-material-icons/AccountGroup.svelte";
+    import ArrowLeft from "svelte-material-icons/ArrowLeft.svelte";
+    import At from "svelte-material-icons/At.svelte";
+    import BellOff from "svelte-material-icons/BellOffOutline.svelte";
+    import Bell from "svelte-material-icons/BellOutline.svelte";
+    import Delete from "svelte-material-icons/DeleteForeverOutline.svelte";
+    import HeartMinus from "svelte-material-icons/HeartMinusOutline.svelte";
+    import HeartPlus from "svelte-material-icons/HeartPlusOutline.svelte";
+    import Exit from "svelte-material-icons/Logout.svelte";
+    import Share from "svelte-material-icons/ShareVariantOutline.svelte";
+    import Edit from "svelte-material-icons/SquareEditOutline.svelte";
+    import Video from "svelte-material-icons/VideoOutline.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import AccessGateSummary from "@src/mobile/features/chats/core/AccessGateSummary.svelte";
+    import ImportToCommunity from "@src/mobile/features/chats/community/Import.svelte";
+    import { updateGroupState } from "@src/mobile/features/chats/group/edit/group.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import BotsSummary from "@src/mobile/features/chats/members/BotsSummary.svelte";
+    import MembersSummary from "@src/mobile/features/chats/members/MembersSummary.svelte";
+    import Separator from "@src/mobile/features/chats/core/Separator.svelte";
+    import Stats from "@src/mobile/shared/Stats.svelte";
+    import DisappearingMessagesSummary from "./DisappearingMessagesSummary.svelte";
+    import PermissionsSummary from "./PermissionsSummary.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        chat: MultiUserChat; // this is NOT reactive - why
+        memberCount: number;
+    }
+
+    let { chat }: Props = $props();
+
+    let muted = $derived($selectedChatSummaryStore?.membership.notificationsMuted);
+    let atEveryoneMuted = $derived($selectedChatSummaryStore?.membership.atEveryoneMuted);
+    let importToCommunities: CommunityMap<CommunitySummary> | undefined = $state();
+    let canImportToCommunity = $derived(!$anonUserStore && client.canImportToCommunity(chat.id));
+    let canConvert = $derived(
+        !$anonUserStore && chat.kind === "group_chat" && client.canConvertGroupToCommunity(chat.id),
+    );
+    let ownerMember = $derived(
+        [...$selectedChatMembersStore.values()].find((m) => m.role === ROLE_OWNER),
+    );
+    let owner = $derived(ownerMember ? $allUsersStore.get(ownerMember.userId) : undefined);
+    let videoCallInProgress = $derived(chat.videoCallInProgress !== undefined);
+    let inCall = $derived(
+        videoCallInProgress &&
+            $activeVideoCall !== undefined &&
+            chatIdentifiersEqual($activeVideoCall.chatId, chat.id),
+    );
+    let canEdit = $derived(!$anonUserStore && client.canEditGroupDetails(chat.id));
+    let canStartVideoCalls = $derived(!$anonUserStore && client.canStartVideoCalls(chat.id));
+    let rules = $derived($selectedChatRulesStore ?? defaultChatRules(chat.level));
+    let avatarUrl = $derived(client.groupAvatarUrl(chat, $selectedCommunitySummaryStore));
+    let busy = $state(false);
+    let canSend = $derived(client.canSendMessage(chat.id, "any"));
+    let combinedRulesText = $derived(
+        canSend
+            ? client.combineRulesText($selectedChatRulesStore, $selectedCommunityRulesStore)
+            : "",
+    );
+
+    function toggleFavourites() {
+        if ($favouritesStore.has(chat.id)) {
+            client.removeFromFavourites(chat.id);
+        } else {
+            client.addToFavourites(chat.id);
+        }
+    }
+
+    function convertToCommunity() {
+        if (!$isDiamondStore) {
+            publish("upgrade");
+        } else {
+            if (chat.kind === "group_chat") {
+                publish("convertGroupToCommunity", chat);
+            }
+        }
+    }
+
+    function importToCommunity() {
+        if (chat.kind === "group_chat") {
+            importToCommunities = $communitiesStore.filter((c) => c.membership.role === ROLE_OWNER);
+            if (importToCommunities.size === 0) {
+                toastStore.showFailureToast(i18nKey("communities.noOwned"));
+                importToCommunities = undefined;
+            }
+        }
+    }
+
+    function toggleMuteNotifications(
+        mute: boolean | undefined,
+        muteAtEveryone: boolean | undefined,
+    ) {
+        publish("toggleMuteNotifications", {
+            chatId: chat.id,
+            mute,
+            muteAtEveryone,
+            // mute: !$selectedChatSummaryStore?.membership.notificationsMuted,
+            // muteAtEveryone: undefined,
+        });
+    }
+
+    function editGroup() {
+        if (canEdit) {
+            updateGroupState.initialise({
+                id: chat.id,
+                kind: "candidate_group_chat",
+                name: chat.name,
+                description: chat.description,
+                historyVisible: chat.historyVisible,
+                public: chat.public,
+                frozen: chat.frozen,
+                members: [],
+                permissions: { ...chat.permissions },
+                rules: { ...rules, newVersion: false },
+                avatar: {
+                    blobReference: chat.blobReference,
+                    blobUrl: chat.blobUrl,
+                    blobData: chat.blobData,
+                },
+                gateConfig: { ...chat.gateConfig },
+                level: chat.level,
+                membership: chat.membership,
+                eventsTTL: chat.eventsTTL,
+                messagesVisibleToNonMembers: chat.messagesVisibleToNonMembers,
+                externalUrl: chat.kind === "channel" ? chat.externalUrl : undefined,
+                verified: chat.kind === "group_chat" ? chat.verified : false,
+            });
+            publish("updateGroup");
+        }
+    }
+
+    function shareGroup() {
+        publish("inviteAndShare", { collection: chat, view: "share" });
+    }
+
+    function leaveGroup() {
+        busy = true;
+        publish("leaveGroup", {
+            kind: "leave",
+            chatId: chat.id,
+            level: chat.level,
+        });
+    }
+
+    function startVideoCall() {
+        if (inCall) {
+            publish("hangup");
+        } else {
+            publish("startVideoCall", {
+                chatId: chat.id,
+                callType: "default",
+                join: videoCallInProgress,
+            });
+        }
+    }
+</script>
+
+{#if importToCommunities !== undefined}
+    <ImportToCommunity
+        groupId={chat.id}
+        onCancel={() => (importToCommunities = undefined)}
+        ownedCommunities={importToCommunities} />
+{/if}
+
+<Container
+    closeMenuOnScroll
+    background={ColourVars.background0}
+    height={"fill"}
+    direction={"vertical"}>
+    <Container gap={"xl"} direction={"vertical"} padding={["lg", "md", "md", "md"]}>
+        <!-- this is the group card -->
+        <Container direction={"vertical"}>
+            <Container
+                supplementalClass={"group_details_header"}
+                borderRadius={"md"}
+                minHeight={"7rem"}
+                mainAxisAlignment={"end"}
+                padding={"sm"}
+                gap={"sm"}
+                background={defaultBackgroundGradient}>
+                <IconButton onclick={() => publish("closeModalPage")} size={"md"} mode={"dark"}>
+                    {#snippet icon(color)}
+                        <ArrowLeft {color} />
+                    {/snippet}
+                </IconButton>
+                {#if canStartVideoCalls}
+                    <IconButton onclick={startVideoCall} size={"md"} mode={"dark"}>
+                        {#snippet icon(color)}
+                            <Video {color} />
+                        {/snippet}
+                    </IconButton>
+                {/if}
+                {#if canEdit}
+                    <IconButton onclick={editGroup} size={"md"} mode={"dark"}>
+                        {#snippet icon(color)}
+                            <Edit {color} />
+                        {/snippet}
+                    </IconButton>
+                {/if}
+            </Container>
+            <Container
+                supplementalClass={"name_and_description"}
+                gap={"xl"}
+                padding={["zero", "lg"]}
+                direction="vertical">
+                <Container crossAxisAlignment={"end"} gap={"md"}>
+                    <Avatar borderWidth={"thick"} size={"xxl"} url={avatarUrl}></Avatar>
+                    <Container
+                        direction={"vertical"}
+                        mainAxisAlignment={"center"}
+                        supplementalClass={"group_name"}>
+                        <H2 fontWeight={"bold"} width={"hug"}>{chat.name}</H2>
+                        <Container gap={"xs"}>
+                            <BodySmall colour={"textSecondary"} width={"hug"}>
+                                <Translatable resourceKey={i18nKey("owned by")} />
+                            </BodySmall>
+                            <BodySmall colour={"primary"}>
+                                @{owner?.username}
+                            </BodySmall>
+                        </Container>
+                    </Container>
+                </Container>
+
+                {#if !$anonUserStore}
+                    <Row gap={"sm"}>
+                        {@const width = { size: "6rem" }}
+                        <BigButton {width} onClick={toggleFavourites}>
+                            {#snippet icon(color, size)}
+                                {#if !$favouritesStore.has(chat.id)}
+                                    <HeartPlus {color} {size} />
+                                {:else}
+                                    <HeartMinus {color} {size} />
+                                {/if}
+                            {/snippet}
+                            {#if $favouritesStore.has(chat.id)}
+                                <Translatable resourceKey={i18nKey("Remove favourite")} />
+                            {:else}
+                                <Translatable resourceKey={i18nKey("Add favourite")} />
+                            {/if}
+                        </BigButton>
+                        <BigButton
+                            {width}
+                            onClick={() =>
+                                toggleMuteNotifications(
+                                    !$selectedChatSummaryStore?.membership.notificationsMuted,
+                                    undefined,
+                                )}>
+                            {#snippet icon(color, size)}
+                                {#if muted}
+                                    <Bell {color} {size} />
+                                {:else}
+                                    <BellOff {color} {size} />
+                                {/if}
+                            {/snippet}
+                            <Translatable
+                                resourceKey={i18nKey(muted ? "Unmute chat" : "Mute chat")} />
+                        </BigButton>
+                        <BigButton
+                            {width}
+                            onClick={() =>
+                                toggleMuteNotifications(
+                                    undefined,
+                                    !$selectedChatSummaryStore?.membership.atEveryoneMuted,
+                                )}>
+                            {#snippet icon(color, size)}
+                                <At {color} {size} />
+                            {/snippet}
+                            <Translatable
+                                resourceKey={i18nKey(
+                                    atEveryoneMuted ? "Unmute @everyone" : "Mute @everyone",
+                                )} />
+                        </BigButton>
+                        <BigButton {width} onClick={shareGroup}>
+                            {#snippet icon(color, size)}
+                                <Share {color} {size} />
+                            {/snippet}
+                            <Translatable resourceKey={i18nKey("Share chat")} />
+                        </BigButton>
+                    </Row>
+                {/if}
+
+                <ReadMore>
+                    <Body fontWeight={"light"}>
+                        <Markdown inline={false} text={chat.description} />
+                    </Body>
+                </ReadMore>
+            </Container>
+        </Container>
+
+        <MembersSummary collection={chat} />
+
+        <BotsSummary collection={chat} />
+
+        <PermissionsSummary
+            permissions={chat.permissions}
+            isPublic={chat.public}
+            isCommunityPublic={$selectedCommunitySummaryStore?.public ?? true}
+            isChannel={chat.kind === "channel"}
+            embeddedContent={chat.kind === "channel" && chat.externalUrl !== undefined} />
+
+        <AccessGateSummary gateConfig={chat.gateConfig} />
+
+        <DisappearingMessagesSummary eventsTTL={chat.eventsTTL} />
+
+        {#if combinedRulesText.length > 0}
+            <Separator />
+
+            <Container gap={"lg"} direction={"vertical"} padding={["zero", "md"]}>
+                <Body colour={"textSecondary"} fontWeight={"bold"}>
+                    <Translatable resourceKey={i18nKey("Group rules")}></Translatable>
+                </Body>
+
+                <Body><Markdown inline={false} text={combinedRulesText} /></Body>
+            </Container>
+        {/if}
+
+        <Separator />
+
+        <Container gap={"lg"} direction={"vertical"} padding={["zero", "md"]}>
+            <BodySmall colour={"textSecondary"} fontWeight={"bold"}>
+                <Translatable resourceKey={i18nKey("Group stats")}></Translatable>
+            </BodySmall>
+            <Stats showReported={false} stats={chat.metrics} />
+        </Container>
+
+        {#if canConvert}
+            <Separator />
+
+            <Container gap={"lg"} direction={"vertical"} padding={["zero", "md"]}>
+                <Container direction={"vertical"} gap={"sm"}>
+                    <Body fontWeight={"bold"}>
+                        <Translatable resourceKey={i18nKey("Convert to community")}></Translatable>
+                    </Body>
+                    <Body colour={"textSecondary"}>
+                        <Translatable
+                            resourceKey={i18nKey(
+                                "If your group is growing, and you would like to support multiple conversation streams, it might be time to convert to a community.",
+                            )}></Translatable>
+                    </Body>
+                </Container>
+
+                <Button loading={busy} onClick={convertToCommunity}>
+                    {#snippet icon(color)}
+                        <AccountGroup {color} />
+                    {/snippet}
+                    <Translatable resourceKey={i18nKey("Convert to community")}></Translatable>
+                </Button>
+            </Container>
+        {/if}
+
+        {#if canImportToCommunity}
+            <Separator />
+
+            <Container gap={"lg"} direction={"vertical"} padding={["zero", "md"]}>
+                <Container direction={"vertical"} gap={"sm"}>
+                    <Body fontWeight={"bold"}>
+                        <Translatable resourceKey={i18nKey("Import to community")}></Translatable>
+                    </Body>
+                    <Body colour={"textSecondary"}>
+                        <Translatable
+                            resourceKey={i18nKey(
+                                "Convert this group into a channel and import it into an existing community.",
+                            )}></Translatable>
+                    </Body>
+                </Container>
+
+                <Button loading={busy} onClick={importToCommunity}>
+                    {#snippet icon(color)}
+                        <AccountGroup {color} />
+                    {/snippet}
+                    <Translatable resourceKey={i18nKey("Import to community")}></Translatable>
+                </Button>
+            </Container>
+        {/if}
+
+        {#if !$anonUserStore && client.canDeleteGroup(chat.id)}
+            <Separator />
+
+            <Container gap={"lg"} direction={"vertical"} padding={["zero", "md"]}>
+                <Container direction={"vertical"} gap={"sm"}>
+                    <Body fontWeight={"bold"}>
+                        <Translatable resourceKey={i18nKey("Delete group")}></Translatable>
+                    </Body>
+                    <Body colour={"textSecondary"}>
+                        <Translatable
+                            resourceKey={i18nKey(
+                                "Keep in mind that by deleting a group all of its data is also removed, and this operation cannot be undone.",
+                            )}></Translatable>
+                    </Body>
+                </Container>
+
+                <Button danger loading={busy} onClick={() => publish("deleteChat", chat)}>
+                    {#snippet icon(color)}
+                        <Delete {color} />
+                    {/snippet}
+                    <Translatable resourceKey={i18nKey("Delete group")}></Translatable>
+                </Button>
+            </Container>
+        {:else if !$anonUserStore && client.canLeaveGroup(chat.id)}
+            <Separator />
+
+            <Container gap={"lg"} direction={"vertical"} padding={["zero", "md"]}>
+                <Container direction={"vertical"} gap={"sm"}>
+                    <Body fontWeight={"bold"}>
+                        <Translatable resourceKey={i18nKey("Leave group")}></Translatable>
+                    </Body>
+                    <Body colour={"textSecondary"}>
+                        <Translatable
+                            resourceKey={i18nKey(
+                                "Keep in mind that you may have to pass access gates to re-join later. A group must have at least one owner.",
+                            )}></Translatable>
+                    </Body>
+                </Container>
+
+                <Button loading={busy} onClick={leaveGroup}>
+                    {#snippet icon(color)}
+                        <Exit {color} />
+                    {/snippet}
+                    <Translatable resourceKey={i18nKey("Leave group")}></Translatable>
+                </Button>
+            </Container>
+        {/if}
+    </Container>
+</Container>
+
+<style lang="scss">
+    :global(.container.name_and_description) {
+        margin-top: -1.75rem;
+    }
+
+    :global(.container.group_details_header > .icon_button:first-child) {
+        margin-inline-end: auto;
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/chats/group/GroupPermissionsPartitionViewer.svelte b/frontend/app/src/mobile/features/chats/group/GroupPermissionsPartitionViewer.svelte
new file mode 100644
index 0000000000..70f7d3989d
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/group/GroupPermissionsPartitionViewer.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+    import { Body, Container, type SizeMode } from "component-lib";
+    import {
+        type ChatPermissionRole,
+        chatRoles,
+        type PermissionsByRole,
+        ROLE_ADMIN,
+        ROLE_MEMBER,
+        ROLE_MODERATOR,
+        ROLE_NONE,
+        ROLE_OWNER,
+    } from "@client";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    interface Props {
+        partition: PermissionsByRole;
+    }
+
+    let { partition }: Props = $props();
+
+    const roleLabels: Record<ChatPermissionRole, string> = {
+        [ROLE_NONE]: "permissions.nobody",
+        [ROLE_OWNER]: "permissions.ownerOnly",
+        [ROLE_ADMIN]: "permissions.ownerAndAdmins",
+        [ROLE_MODERATOR]: "permissions.ownerAndAdminsAndModerators",
+        [ROLE_MEMBER]: "permissions.allMembers",
+    };
+
+    const width: SizeMode = "hug";
+</script>
+
+{#each chatRoles as role}
+    {#if partition[role].size > 0}
+        {@const perms = [...partition[role]]}
+        <Container {width} wrap gap={"sm"}>
+            <Body {width} colour={"textSecondary"}>
+                <Translatable resourceKey={i18nKey(roleLabels[role])} />
+            </Body>
+            <Body {width} colour={"textSecondary"}>//</Body>
+            {#each perms as perm, i}
+                {@const last = i === perms.length - 1}
+                <Body {width}>
+                    {perm}
+                </Body>
+                {#if !last}
+                    <Body colour={"primary"} {width}>/</Body>
+                {/if}
+            {/each}
+        </Container>
+    {/if}
+{/each}
diff --git a/frontend/app/src/mobile/features/chats/group/PermissionsSummary.svelte b/frontend/app/src/mobile/features/chats/group/PermissionsSummary.svelte
new file mode 100644
index 0000000000..e10e9d881b
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/group/PermissionsSummary.svelte
@@ -0,0 +1,161 @@
+<script lang="ts">
+    import { i18nKey } from "@src/i18n/i18n";
+    import { Body, Chip, Container, transition } from "component-lib";
+    import {
+        ROLE_ADMIN,
+        ROLE_MEMBER,
+        ROLE_MODERATOR,
+        ROLE_NONE,
+        ROLE_OWNER,
+        type ChatPermissionRole,
+        type ChatPermissions,
+        type MessagePermissions,
+        type PermissionsByRole,
+    } from "@client";
+    import { _ } from "svelte-i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import GroupPermissionsPartitionViewer from "./GroupPermissionsPartitionViewer.svelte";
+    import Separator from "@src/mobile/features/chats/core/Separator.svelte";
+
+    interface Props {
+        permissions: ChatPermissions;
+        isPublic: boolean;
+        isCommunityPublic: boolean;
+        isChannel: boolean;
+        embeddedContent: boolean;
+    }
+
+    let { permissions, isPublic, isCommunityPublic, isChannel, embeddedContent }: Props = $props();
+
+    let items = embeddedContent
+        ? [i18nKey("permissions.general")]
+        : [
+              i18nKey("permissions.general"),
+              i18nKey("permissions.message"),
+              i18nKey("permissions.thread"),
+          ];
+    let selectedTab = $state(items[0].key);
+    let threadPartition = $derived(
+        partitionMessagePermissions(
+            permissions.threadPermissions ?? permissions.messagePermissions,
+            true,
+        ),
+    );
+    let messagePartition = $derived(
+        partitionMessagePermissions(permissions.messagePermissions, false),
+    );
+    let generalPartition = $derived(
+        partitionPermissions(
+            {
+                changeRoles: permissions.changeRoles,
+                updateGroup: permissions.updateGroup,
+                inviteUsers: permissions.inviteUsers,
+                addMembers: permissions.addMembers,
+                removeMembers: permissions.removeMembers,
+                deleteMessages: permissions.deleteMessages,
+                startVideoCall: permissions.startVideoCall,
+                pinMessages: permissions.pinMessages,
+                reactToMessages: permissions.reactToMessages,
+                mentionAllMembers: permissions.mentionAllMembers,
+            },
+            "",
+        ),
+    );
+
+    type PermissionsEntry = [keyof ChatPermissions, ChatPermissionRole];
+
+    function partitionMessagePermissions(
+        mps: MessagePermissions,
+        thread: boolean,
+    ): PermissionsByRole {
+        let permissions: Record<string, ChatPermissionRole> = {
+            text: mps.text ?? mps.default,
+            image: mps.image ?? mps.default,
+            video: mps.video ?? mps.default,
+            audio: mps.audio ?? mps.default,
+            file: mps.file ?? mps.default,
+            poll: mps.poll ?? mps.default,
+            crypto: mps.crypto ?? mps.default,
+            giphy: mps.giphy ?? mps.default,
+            memeFighter: mps.memeFighter ?? mps.default,
+            p2pSwap: mps.p2pSwap ?? mps.default,
+        };
+
+        if (!thread) {
+            permissions = { ...permissions, prize: mps.prize ?? mps.default };
+        }
+
+        return partitionPermissions(
+            permissions,
+            thread ? "threadPermissions." : "messagePermissions.",
+        );
+    }
+
+    function filterPermissions([key, _]: PermissionsEntry): boolean {
+        if (isPublic && key === "inviteUsers") {
+            return false;
+        }
+        if (key === "addMembers" && (!isChannel || isCommunityPublic)) {
+            return false;
+        }
+        return true;
+    }
+
+    function partitionPermissions(
+        permissions: Record<string, ChatPermissionRole>,
+        translationExt: string,
+    ): PermissionsByRole {
+        return (Object.entries(permissions) as PermissionsEntry[]).filter(filterPermissions).reduce(
+            (dict: PermissionsByRole, [key, val]) => {
+                const text = $_(
+                    `permissions.${translationExt}${key}`,
+                    key === "mentionAllMembers" ? { values: { mention: "@everyone" } } : {},
+                );
+
+                dict[val].add(text);
+                return dict;
+            },
+            {
+                [ROLE_OWNER]: new Set(),
+                [ROLE_ADMIN]: new Set(),
+                [ROLE_MODERATOR]: new Set(),
+                [ROLE_MEMBER]: new Set(),
+                [ROLE_NONE]: new Set(),
+            } as PermissionsByRole,
+        );
+    }
+
+    function switchTab(tab: string) {
+        transition(["fade"], () => {
+            selectedTab = tab;
+        });
+    }
+</script>
+
+{#snippet viewChip(tab: string)}
+    <Chip fill onClick={() => switchTab(tab)} mode={selectedTab === tab ? "rounded" : "unselected"}>
+        <Translatable resourceKey={i18nKey(tab)}></Translatable>
+    </Chip>
+{/snippet}
+
+<Separator />
+
+<Container padding={["zero", "md"]} gap={"xl"} direction={"vertical"}>
+    <Body colour={"textSecondary"} fontWeight={"bold"}>
+        <Translatable resourceKey={i18nKey("Permissions")}></Translatable>
+    </Body>
+
+    <Container gap={"sm"}>
+        {@render viewChip("permissions.general")}
+        {@render viewChip("permissions.message")}
+        {@render viewChip("permissions.thread")}
+    </Container>
+
+    {#if selectedTab === "permissions.general"}
+        <GroupPermissionsPartitionViewer partition={generalPartition} />
+    {:else if selectedTab === "permissions.message"}
+        <GroupPermissionsPartitionViewer partition={messagePartition} />
+    {:else if selectedTab === "permissions.thread"}
+        <GroupPermissionsPartitionViewer partition={threadPartition} />
+    {/if}
+</Container>
diff --git a/frontend/app/src/components_mobile/home/createOrUpdateGroup/AddGroupMembers.svelte b/frontend/app/src/mobile/features/chats/group/edit/AddGroupMembers.svelte
similarity index 89%
rename from frontend/app/src/components_mobile/home/createOrUpdateGroup/AddGroupMembers.svelte
rename to frontend/app/src/mobile/features/chats/group/edit/AddGroupMembers.svelte
index 3c6ec82d01..f48969cf8f 100644
--- a/frontend/app/src/components_mobile/home/createOrUpdateGroup/AddGroupMembers.svelte
+++ b/frontend/app/src/mobile/features/chats/group/edit/AddGroupMembers.svelte
@@ -4,8 +4,8 @@
     import { OpenChat, publish, type UserSummary } from "@client";
     import { getContext } from "svelte";
     import Save from "svelte-material-icons/ContentSaveOutline.svelte";
-    import SelectUsers from "../SelectUsers.svelte";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
+    import SelectUsers from "@src/mobile/features/chats/core/SelectUsers.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
     import { updateGroupState } from "./group.svelte";
 
     const client = getContext<OpenChat>("client");
diff --git a/frontend/app/src/components_mobile/home/createOrUpdateGroup/DisappearingMessages.svelte b/frontend/app/src/mobile/features/chats/group/edit/DisappearingMessages.svelte
similarity index 77%
rename from frontend/app/src/components_mobile/home/createOrUpdateGroup/DisappearingMessages.svelte
rename to frontend/app/src/mobile/features/chats/group/edit/DisappearingMessages.svelte
index ab41ac79ed..9ab34ceb9f 100644
--- a/frontend/app/src/components_mobile/home/createOrUpdateGroup/DisappearingMessages.svelte
+++ b/frontend/app/src/mobile/features/chats/group/edit/DisappearingMessages.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { i18nKey } from "@src/i18n/i18n";
     import { Switch } from "component-lib";
-    import Setting from "../../Setting.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import DisappearingDuration from "../DisappearingDuration.svelte";
+    import Setting from "@src/mobile/shared/Setting.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import DisappearingDuration from "@src/mobile/features/chats/group/DisappearingDuration.svelte";
     import { updateGroupState } from "./group.svelte";
 
     let ugs = updateGroupState;
diff --git a/frontend/app/src/components_mobile/home/createOrUpdateGroup/GroupCard.svelte b/frontend/app/src/mobile/features/chats/group/edit/GroupCard.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/createOrUpdateGroup/GroupCard.svelte
rename to frontend/app/src/mobile/features/chats/group/edit/GroupCard.svelte
diff --git a/frontend/app/src/components_mobile/home/createOrUpdateGroup/GroupInfo.svelte b/frontend/app/src/mobile/features/chats/group/edit/GroupInfo.svelte
similarity index 96%
rename from frontend/app/src/components_mobile/home/createOrUpdateGroup/GroupInfo.svelte
rename to frontend/app/src/mobile/features/chats/group/edit/GroupInfo.svelte
index 4cb77dfd3f..aeddafa9b6 100644
--- a/frontend/app/src/components_mobile/home/createOrUpdateGroup/GroupInfo.svelte
+++ b/frontend/app/src/mobile/features/chats/group/edit/GroupInfo.svelte
@@ -26,14 +26,14 @@
     import ClockOutline from "svelte-material-icons/ClockOutline.svelte";
     import Save from "svelte-material-icons/ContentSaveOutline.svelte";
     import FormatList from "svelte-material-icons/FormatListBulletedType.svelte";
-    import { i18nKey, interpolate } from "../../../i18n/i18n";
-    import AreYouSure from "../../AreYouSure.svelte";
-    import EditableAvatar from "../../EditableAvatar.svelte";
-    import LinkedCard from "../../LinkedCard.svelte";
-    import Setting from "../../Setting.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import DiamondUpgradeBox from "../DiamondUpgradeBox.svelte";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import AreYouSure from "@src/mobile/shared/AreYouSure.svelte";
+    import EditableAvatar from "@src/mobile/shared/EditableAvatar.svelte";
+    import LinkedCard from "@src/mobile/shared/LinkedCard.svelte";
+    import Setting from "@src/mobile/shared/Setting.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import DiamondUpgradeBox from "@src/mobile/shared/DiamondUpgradeBox.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
     import DisappearingMessages from "./DisappearingMessages.svelte";
     import {
         MAX_DESC_LENGTH,
diff --git a/frontend/app/src/mobile/features/chats/group/edit/Permissions.svelte b/frontend/app/src/mobile/features/chats/group/edit/Permissions.svelte
new file mode 100644
index 0000000000..8cbb68ffcb
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/group/edit/Permissions.svelte
@@ -0,0 +1,287 @@
+<script lang="ts">
+    import { i18nKey } from "@src/i18n/i18n";
+    import { BodySmall, CommonButton, Container, Sheet, Switch } from "component-lib";
+    import {
+        type ChatPermissionRole,
+        chatRoles,
+        type MessagePermissions,
+        publish,
+        type ResourceKey,
+        roleAsText,
+        selectedCommunitySummaryStore,
+    } from "@client";
+    import { _ } from "svelte-i18n";
+    import ArrowLeft from "svelte-material-icons/ArrowLeft.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import GroupCard from "./GroupCard.svelte";
+    import PermissionsRoleSlider from "@src/mobile/features/chats/core/PermissionsRoleSlider.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
+    import { updateGroupState } from "./group.svelte";
+
+    type Selected = {
+        role?: ChatPermissionRole;
+        defaultRole?: ChatPermissionRole;
+        label: ResourceKey;
+        sync: (r?: ChatPermissionRole) => void;
+    };
+
+    const data = updateGroupState;
+    let defaultText = $derived($_("role.default"));
+    let roles = [...chatRoles];
+    let isCommunityPublic = $derived($selectedCommunitySummaryStore?.public ?? true);
+    let isChannel = $derived(data.candidate.id.kind === "channel");
+    let selectedTab = $state("permissions.general");
+    let overrideChatMessages = $state(data.permissions.threadPermissions !== undefined);
+
+    let selected = $state<Selected>();
+
+    // This is because I simply cannot get the data binding to work as I *think* it should
+    function syncPermission() {
+        if (selected !== undefined) {
+            selected.sync?.(selected.role);
+            selected = undefined;
+        }
+    }
+
+    function onOverrideChatMessagesChanged() {
+        data.permissions.threadPermissions = overrideChatMessages
+            ? structuredClone($state.snapshot(data.permissions.messagePermissions))
+            : undefined;
+    }
+</script>
+
+{#if selected !== undefined}
+    {@const { label } = selected}
+    <Sheet onDismiss={syncPermission}>
+        <PermissionsRoleSlider
+            height={{ size: "250px" }}
+            {roles}
+            {label}
+            onClose={syncPermission}
+            defaultRole={selected.defaultRole}
+            bind:rolePermission={selected.role} />
+    </Sheet>
+{/if}
+
+{#snippet permissionSummary(
+    label: ResourceKey,
+    sync: (r?: ChatPermissionRole) => void,
+    role?: ChatPermissionRole,
+    defaultRole?: ChatPermissionRole,
+)}
+    <Container
+        onClick={() => (selected = { role, defaultRole, label, sync })}
+        mainAxisAlignment={"spaceBetween"}
+        crossAxisAlignment={"end"}>
+        <div class="label">
+            <BodySmall>
+                <Translatable resourceKey={label}></Translatable>
+            </BodySmall>
+        </div>
+        {#if role !== undefined}
+            <BodySmall colour={"primary"} fontWeight={"bold"} width={"hug"}
+                >{$_(`role.${roleAsText(role)}`)}</BodySmall>
+        {:else if defaultRole !== undefined}
+            <BodySmall colour={"primary"} fontWeight={"bold"} width={"hug"}
+                >{defaultText} ({$_(`role.${roleAsText(defaultRole)}`)})</BodySmall>
+        {/if}
+    </Container>
+{/snippet}
+
+{#snippet button(name: ResourceKey)}
+    <CommonButton
+        height={"fill"}
+        width={"fill"}
+        onClick={() => (selectedTab = name.key)}
+        mode={selectedTab === name.key ? "active" : "default"}
+        size={"small"}>
+        <Translatable resourceKey={name}></Translatable>
+    </CommonButton>
+{/snippet}
+
+{#snippet messageLevelPermissions(p: MessagePermissions, label: string)}
+    {@render permissionSummary(
+        i18nKey(`permissions.${label}.default`),
+        (r) => (p.default = r ?? p.default),
+        p.default,
+    )}
+    {@render permissionSummary(
+        i18nKey(`permissions.${label}.text`),
+        (r) => (p.text = r),
+        p.text,
+        p.default,
+    )}
+    {@render permissionSummary(
+        i18nKey(`permissions.${label}.image`),
+        (r) => (p.image = r),
+        p.image,
+        p.default,
+    )}
+    {@render permissionSummary(
+        i18nKey(`permissions.${label}.video`),
+        (r) => (p.video = r),
+        p.video,
+        p.default,
+    )}
+    {@render permissionSummary(
+        i18nKey(`permissions.${label}.audio`),
+        (r) => (p.audio = r),
+        p.audio,
+        p.default,
+    )}
+    {@render permissionSummary(
+        i18nKey(`permissions.${label}.file`),
+        (r) => (p.file = r),
+        p.file,
+        p.default,
+    )}
+    {@render permissionSummary(
+        i18nKey(`permissions.${label}.poll`),
+        (r) => (p.poll = r),
+        p.poll,
+        p.default,
+    )}
+    {@render permissionSummary(
+        i18nKey(`permissions.${label}.crypto`),
+        (r) => (p.crypto = r),
+        p.crypto,
+        p.default,
+    )}
+    {@render permissionSummary(
+        i18nKey(`permissions.${label}.giphy`),
+        (r) => (p.giphy = r),
+        p.giphy,
+        p.default,
+    )}
+    {@render permissionSummary(
+        i18nKey(`permissions.${label}.prize`),
+        (r) => (p.prize = r),
+        p.prize,
+        p.default,
+    )}
+    {@render permissionSummary(
+        i18nKey(`permissions.${label}.memeFighter`),
+        (r) => (p.memeFighter = r),
+        p.memeFighter,
+        p.default,
+    )}
+    {@render permissionSummary(
+        i18nKey(`permissions.${label}.p2pSwap`),
+        (r) => (p.p2pSwap = r),
+        p.p2pSwap,
+        p.default,
+    )}
+{/snippet}
+
+<SlidingPageContent title={i18nKey("Permission")}>
+    <Container
+        height={"fill"}
+        gap={"xxl"}
+        direction={"vertical"}
+        padding={["xxl", "xl", "lg", "xl"]}>
+        <GroupCard candidateGroup={data.candidateGroup} />
+
+        <Container
+            height={{ size: "3rem" }}
+            mainAxisAlignment={"spaceBetween"}
+            padding={["zero", "zero", "sm", "zero"]}
+            gap={"sm"}>
+            {@render button(i18nKey("permissions.general"))}
+            {@render button(i18nKey("permissions.message"))}
+            {@render button(i18nKey("permissions.thread"))}
+        </Container>
+
+        <Container gap={"xxl"} direction={"vertical"}>
+            {#if selectedTab === "permissions.general"}
+                {@const p = data.permissions}
+                {@render permissionSummary(
+                    i18nKey("permissions.changeRoles"),
+                    (r) => (p.changeRoles = r ?? p.changeRoles),
+                    p.changeRoles,
+                )}
+                {@render permissionSummary(
+                    i18nKey("permissions.updateGroup"),
+                    (r) => (p.updateGroup = r ?? p.updateGroup),
+                    p.updateGroup,
+                )}
+
+                {#if isChannel && !isCommunityPublic}
+                    {@render permissionSummary(
+                        i18nKey("permissions.addMembers"),
+                        (r) => (p.addMembers = r ?? p.addMembers),
+                        p.addMembers,
+                    )}
+                {/if}
+                {@render permissionSummary(
+                    i18nKey("permissions.inviteUsers"),
+                    (r) => (p.inviteUsers = r ?? p.inviteUsers),
+                    p.inviteUsers,
+                )}
+                {@render permissionSummary(
+                    i18nKey("permissions.removeMembers"),
+                    (r) => (p.removeMembers = r ?? p.removeMembers),
+                    p.removeMembers,
+                )}
+                {@render permissionSummary(
+                    i18nKey("permissions.deleteMessages"),
+                    (r) => (p.deleteMessages = r ?? p.deleteMessages),
+                    p.deleteMessages,
+                )}
+                {@render permissionSummary(
+                    i18nKey("permissions.startVideoCall"),
+                    (r) => (p.startVideoCall = r ?? p.startVideoCall),
+                    p.startVideoCall,
+                )}
+                {@render permissionSummary(
+                    i18nKey("permissions.pinMessages"),
+                    (r) => (p.pinMessages = r ?? p.pinMessages),
+                    p.pinMessages,
+                )}
+                {@render permissionSummary(
+                    i18nKey("permissions.reactToMessages"),
+                    (r) => (p.reactToMessages = r ?? p.reactToMessages),
+                    p.reactToMessages,
+                )}
+                {@render permissionSummary(
+                    i18nKey("permissions.mentionAllMembers", { mention: "@everyone" }),
+                    (r) => (p.mentionAllMembers = r ?? p.mentionAllMembers),
+                    p.mentionAllMembers,
+                )}
+            {:else if selectedTab === "permissions.message"}
+                {@render messageLevelPermissions(
+                    data.permissions.messagePermissions,
+                    "messagePermissions",
+                )}
+            {:else if selectedTab === "permissions.thread"}
+                <Switch
+                    bind:checked={overrideChatMessages}
+                    onChange={onOverrideChatMessagesChanged}>
+                    <BodySmall>
+                        <Translatable resourceKey={i18nKey("permissions.overrideChatMessages")} />
+                    </BodySmall>
+                </Switch>
+                {#if data.permissions.threadPermissions !== undefined}
+                    {@render messageLevelPermissions(
+                        data.permissions.threadPermissions,
+                        "threadPermissions",
+                    )}
+                {/if}
+            {/if}
+        </Container>
+
+        <Container padding={["xl", "zero", "zero", "zero"]} mainAxisAlignment={"end"}>
+            <CommonButton onClick={() => publish("closeModalPage")} mode="active" size={"medium"}>
+                {#snippet icon(color, size)}
+                    <ArrowLeft {color} {size} />
+                {/snippet}
+                <Translatable resourceKey={i18nKey("Done, go back")}></Translatable>
+            </CommonButton>
+        </Container>
+    </Container>
+</SlidingPageContent>
+
+<style lang="scss">
+    .label {
+        text-transform: capitalize;
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/home/createOrUpdateGroup/group.svelte.ts b/frontend/app/src/mobile/features/chats/group/edit/group.svelte.ts
similarity index 98%
rename from frontend/app/src/components_mobile/home/createOrUpdateGroup/group.svelte.ts
rename to frontend/app/src/mobile/features/chats/group/edit/group.svelte.ts
index 037083c491..28bbdcebf4 100644
--- a/frontend/app/src/components_mobile/home/createOrUpdateGroup/group.svelte.ts
+++ b/frontend/app/src/mobile/features/chats/group/edit/group.svelte.ts
@@ -18,9 +18,9 @@ import {
     type ResourceKey,
     type UpdateGroupResponse,
 } from "@client";
-import { navigate } from "@utils/navigation";
+import { navigate } from "@src/utils/navigation";
 import { tick } from "svelte";
-import { UpdateGroupOrCommunityState } from "../groupOrCommunity.svelte";
+import { UpdateGroupOrCommunityState } from "@src/mobile/shared/groupOrCommunity.svelte";
 
 export const MIN_NAME_LENGTH = 3;
 export const MAX_NAME_LENGTH = 40;
diff --git a/frontend/app/src/components_mobile/home/membership/AddList.svelte b/frontend/app/src/mobile/features/chats/members/AddList.svelte
similarity index 96%
rename from frontend/app/src/components_mobile/home/membership/AddList.svelte
rename to frontend/app/src/mobile/features/chats/members/AddList.svelte
index c58ba98007..54b071438a 100644
--- a/frontend/app/src/components_mobile/home/membership/AddList.svelte
+++ b/frontend/app/src/mobile/features/chats/members/AddList.svelte
@@ -10,7 +10,7 @@
     } from "@client";
     import { getContext } from "svelte";
     import ShareIcon from "svelte-material-icons/ShareOutline.svelte";
-    import SelectUsers from "../SelectUsers.svelte";
+    import SelectUsers from "@src/mobile/features/chats/core/SelectUsers.svelte";
     import AddUser from "./AddUser.svelte";
     import type { MemberManagement } from "./membersState.svelte";
 
diff --git a/frontend/app/src/components_mobile/home/membership/AddUser.svelte b/frontend/app/src/mobile/features/chats/members/AddUser.svelte
similarity index 88%
rename from frontend/app/src/components_mobile/home/membership/AddUser.svelte
rename to frontend/app/src/mobile/features/chats/members/AddUser.svelte
index 2532d1ddfc..bf484b1575 100644
--- a/frontend/app/src/components_mobile/home/membership/AddUser.svelte
+++ b/frontend/app/src/mobile/features/chats/members/AddUser.svelte
@@ -3,8 +3,8 @@
     import { CommonButton } from "component-lib";
     import type { UserSummary } from "@shared";
     import AccountPlus from "svelte-material-icons/AccountPlusOutline.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import User from "../User.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import User from "@src/mobile/shared/User.svelte";
 
     interface Props {
         user: UserSummary;
diff --git a/frontend/app/src/components_mobile/home/membership/BlockedList.svelte b/frontend/app/src/mobile/features/chats/members/BlockedList.svelte
similarity index 93%
rename from frontend/app/src/components_mobile/home/membership/BlockedList.svelte
rename to frontend/app/src/mobile/features/chats/members/BlockedList.svelte
index f8de7239c8..10d2057ba6 100644
--- a/frontend/app/src/components_mobile/home/membership/BlockedList.svelte
+++ b/frontend/app/src/mobile/features/chats/members/BlockedList.svelte
@@ -5,9 +5,9 @@
     import { _ } from "svelte-i18n";
     import AccountCancel from "svelte-material-icons/AccountCancelOutline.svelte";
     import Account from "svelte-material-icons/AccountGroupOutline.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import VirtualList from "@shared_components/VirtualList.svelte";
-    import NothingToSee from "../NothingToSee.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import VirtualList from "@src/ui/VirtualList.svelte";
+    import NothingToSee from "@src/mobile/shared/NothingToSee.svelte";
     import BlockedUser from "./BlockedUser.svelte";
     import type { MemberManagement } from "./membersState.svelte";
 
diff --git a/frontend/app/src/mobile/features/chats/members/BlockedUser.svelte b/frontend/app/src/mobile/features/chats/members/BlockedUser.svelte
new file mode 100644
index 0000000000..9a4e04a6ff
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/members/BlockedUser.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+    import { MenuItem } from "component-lib";
+    import type { UserSummary } from "@shared";
+    import Cancel from "svelte-material-icons/Cancel.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import User from "@src/mobile/shared/User.svelte";
+
+    interface Props {
+        user: UserSummary;
+        searchTerm?: string;
+        me?: boolean;
+        onUnblockUser?: (userId: string) => void;
+    }
+
+    let { user, searchTerm = "", me = false, onUnblockUser }: Props = $props();
+</script>
+
+<User {me} {user} {searchTerm}>
+    {#if onUnblockUser !== undefined}
+        <MenuItem onclick={() => onUnblockUser(user.userId)}>
+            {#snippet icon(color, size)}
+                <Cancel {size} {color} />
+            {/snippet}
+            <Translatable resourceKey={i18nKey("unblockUser")} />
+        </MenuItem>
+    {/if}
+</User>
diff --git a/frontend/app/src/components_mobile/home/membership/BotsList.svelte b/frontend/app/src/mobile/features/chats/members/BotsList.svelte
similarity index 94%
rename from frontend/app/src/components_mobile/home/membership/BotsList.svelte
rename to frontend/app/src/mobile/features/chats/members/BotsList.svelte
index e693c3a834..f11f9e24af 100644
--- a/frontend/app/src/components_mobile/home/membership/BotsList.svelte
+++ b/frontend/app/src/mobile/features/chats/members/BotsList.svelte
@@ -20,11 +20,11 @@
     } from "@client";
     import { getContext } from "svelte";
     import Webhook from "svelte-material-icons/Webhook.svelte";
-    import BotMatch from "../../bots/BotMatch.svelte";
-    import BotMember from "../../bots/BotMember.svelte";
-    import WebhookMember from "../../bots/WebhookMember.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
+    import BotMatch from "@src/mobile/features/bots/BotMatch.svelte";
+    import BotMember from "@src/mobile/features/bots/BotMember.svelte";
+    import WebhookMember from "@src/mobile/features/bots/WebhookMember.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/components_mobile/home/membership/BotsSummary.svelte b/frontend/app/src/mobile/features/chats/members/BotsSummary.svelte
similarity index 92%
rename from frontend/app/src/components_mobile/home/membership/BotsSummary.svelte
rename to frontend/app/src/mobile/features/chats/members/BotsSummary.svelte
index d19e15d8ff..5d3a7dfa25 100644
--- a/frontend/app/src/components_mobile/home/membership/BotsSummary.svelte
+++ b/frontend/app/src/mobile/features/chats/members/BotsSummary.svelte
@@ -11,10 +11,10 @@
     import { getContext } from "svelte";
     import Robot from "svelte-material-icons/RobotOutline.svelte";
     import Webhook from "svelte-material-icons/Webhook.svelte";
-    import BotMember from "../../bots/BotMember.svelte";
-    import WebhookMember from "../../bots/WebhookMember.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import Separator from "../Separator.svelte";
+    import BotMember from "@src/mobile/features/bots/BotMember.svelte";
+    import WebhookMember from "@src/mobile/features/bots/WebhookMember.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import Separator from "@src/mobile/features/chats/core/Separator.svelte";
     import { MemberManagement } from "./membersState.svelte";
 
     interface Props {
diff --git a/frontend/app/src/components_mobile/home/membership/InviteAndShare.svelte b/frontend/app/src/mobile/features/chats/members/InviteAndShare.svelte
similarity index 95%
rename from frontend/app/src/components_mobile/home/membership/InviteAndShare.svelte
rename to frontend/app/src/mobile/features/chats/members/InviteAndShare.svelte
index 8a97750499..b23b698c62 100644
--- a/frontend/app/src/components_mobile/home/membership/InviteAndShare.svelte
+++ b/frontend/app/src/mobile/features/chats/members/InviteAndShare.svelte
@@ -5,8 +5,8 @@
     import { getContext } from "svelte";
     import AccountPlus from "svelte-material-icons/AccountPlusOutline.svelte";
     import ShareIcon from "svelte-material-icons/ShareVariantOutline.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
     import InviteList from "./InviteList.svelte";
     import { MemberManagement } from "./membersState.svelte";
     import Share from "./Share.svelte";
diff --git a/frontend/app/src/components_mobile/home/membership/InviteList.svelte b/frontend/app/src/mobile/features/chats/members/InviteList.svelte
similarity index 95%
rename from frontend/app/src/components_mobile/home/membership/InviteList.svelte
rename to frontend/app/src/mobile/features/chats/members/InviteList.svelte
index 97dc825316..f52bfe5878 100644
--- a/frontend/app/src/components_mobile/home/membership/InviteList.svelte
+++ b/frontend/app/src/mobile/features/chats/members/InviteList.svelte
@@ -13,9 +13,9 @@
     import Account from "svelte-material-icons/AccountGroupOutline.svelte";
     import AccountPlus from "svelte-material-icons/AccountPlusOutline.svelte";
     import ShareIcon from "svelte-material-icons/ShareOutline.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import NothingToSee from "../NothingToSee.svelte";
-    import SelectUsers from "../SelectUsers.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import NothingToSee from "@src/mobile/shared/NothingToSee.svelte";
+    import SelectUsers from "@src/mobile/features/chats/core/SelectUsers.svelte";
     import InvitedUser from "./InvitedUser.svelte";
     import InviteUser from "./InviteUser.svelte";
     import type { MemberManagement } from "./membersState.svelte";
diff --git a/frontend/app/src/components_mobile/home/membership/InviteUser.svelte b/frontend/app/src/mobile/features/chats/members/InviteUser.svelte
similarity index 88%
rename from frontend/app/src/components_mobile/home/membership/InviteUser.svelte
rename to frontend/app/src/mobile/features/chats/members/InviteUser.svelte
index 9c9b3dacf7..ece6728aac 100644
--- a/frontend/app/src/components_mobile/home/membership/InviteUser.svelte
+++ b/frontend/app/src/mobile/features/chats/members/InviteUser.svelte
@@ -3,8 +3,8 @@
     import { CommonButton } from "component-lib";
     import type { UserSummary } from "@shared";
     import Share from "svelte-material-icons/Share.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import User from "../User.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import User from "@src/mobile/shared/User.svelte";
 
     interface Props {
         user: UserSummary;
diff --git a/frontend/app/src/mobile/features/chats/members/InvitedUser.svelte b/frontend/app/src/mobile/features/chats/members/InvitedUser.svelte
new file mode 100644
index 0000000000..593c58ae1c
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/members/InvitedUser.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { MenuItem } from "component-lib";
+    import type { UserSummary } from "@shared";
+    import Cancel from "svelte-material-icons/Cancel.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import User from "@src/mobile/shared/User.svelte";
+
+    interface Props {
+        user: UserSummary;
+        me?: boolean;
+        onCancelInvite?: (userId: string) => void;
+    }
+
+    let { user, me = false, onCancelInvite }: Props = $props();
+</script>
+
+<User {me} {user}>
+    {#if onCancelInvite !== undefined}
+        <MenuItem onclick={() => onCancelInvite(user.userId)}>
+            {#snippet icon(color, size)}
+                <Cancel {size} {color} />
+            {/snippet}
+            <Translatable resourceKey={i18nKey("cancelInvite")} />
+        </MenuItem>
+    {/if}
+</User>
diff --git a/frontend/app/src/components_mobile/home/membership/LapsedList.svelte b/frontend/app/src/mobile/features/chats/members/LapsedList.svelte
similarity index 93%
rename from frontend/app/src/components_mobile/home/membership/LapsedList.svelte
rename to frontend/app/src/mobile/features/chats/members/LapsedList.svelte
index 5cf5098b9e..5fdd42ab39 100644
--- a/frontend/app/src/components_mobile/home/membership/LapsedList.svelte
+++ b/frontend/app/src/mobile/features/chats/members/LapsedList.svelte
@@ -5,9 +5,9 @@
     import { _ } from "svelte-i18n";
     import AccountAlert from "svelte-material-icons/AccountAlertOutline.svelte";
     import Account from "svelte-material-icons/AccountGroupOutline.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import VirtualList from "@shared_components/VirtualList.svelte";
-    import NothingToSee from "../NothingToSee.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import VirtualList from "@src/ui/VirtualList.svelte";
+    import NothingToSee from "@src/mobile/shared/NothingToSee.svelte";
     import LapsedUser from "./LapsedUser.svelte";
     import type { MemberManagement } from "./membersState.svelte";
 
diff --git a/frontend/app/src/mobile/features/chats/members/LapsedUser.svelte b/frontend/app/src/mobile/features/chats/members/LapsedUser.svelte
new file mode 100644
index 0000000000..e7259d072d
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/members/LapsedUser.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+    import { MenuItem } from "component-lib";
+    import type { UserSummary } from "@shared";
+    import Cancel from "svelte-material-icons/Cancel.svelte";
+    import MinusCircleOutline from "svelte-material-icons/MinusCircleOutline.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import User from "@src/mobile/shared/User.svelte";
+
+    interface Props {
+        user: UserSummary;
+        searchTerm?: string;
+        me?: boolean;
+        onBlockUser?: (userId: string) => void;
+        onRemoveMember?: (userId: string) => void;
+    }
+
+    let { user, searchTerm = "", me = false, onBlockUser, onRemoveMember }: Props = $props();
+</script>
+
+<User {me} {user} {searchTerm}>
+    {#if onBlockUser || onRemoveMember}
+        {#if onBlockUser}
+            <MenuItem onclick={() => onBlockUser(user.userId)}>
+                {#snippet icon(color, size)}
+                    <Cancel {size} {color} />
+                {/snippet}
+                <Translatable resourceKey={i18nKey("blockUser")} />
+            </MenuItem>
+        {/if}
+        {#if onRemoveMember}
+            <MenuItem onclick={() => onRemoveMember(user.userId)}>
+                {#snippet icon(color, size)}
+                    <MinusCircleOutline {size} {color} />
+                {/snippet}
+                <Translatable resourceKey={i18nKey("remove")} />
+            </MenuItem>
+        {/if}
+    {/if}
+</User>
diff --git a/frontend/app/src/mobile/features/chats/members/Member.svelte b/frontend/app/src/mobile/features/chats/members/Member.svelte
new file mode 100644
index 0000000000..0ec5d72154
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/members/Member.svelte
@@ -0,0 +1,152 @@
+<script lang="ts">
+    import { MenuItem } from "component-lib";
+    import {
+        ROLE_ADMIN,
+        ROLE_MEMBER,
+        ROLE_MODERATOR,
+        ROLE_OWNER,
+        roleAsText,
+        type FullMember,
+        type MemberRole,
+    } from "@client";
+    import { _ } from "svelte-i18n";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import User from "@src/mobile/shared/User.svelte";
+
+    interface Props {
+        me: boolean;
+        member: FullMember;
+        canPromoteToOwner?: boolean;
+        canPromoteToAdmin?: boolean;
+        canDemoteToAdmin?: boolean;
+        canPromoteToModerator?: boolean;
+        canDemoteToModerator?: boolean;
+        canDemoteToMember?: boolean;
+        canRemoveMember?: boolean;
+        canBlockUser?: boolean;
+        searchTerm?: string;
+        onRemoveMember?: (userId: string) => void;
+        onChangeRole?: (args: { userId: string; newRole: MemberRole; oldRole: MemberRole }) => void;
+        onBlockUser?: (userId: string) => void;
+    }
+
+    let {
+        me,
+        member,
+        canPromoteToOwner = false,
+        canPromoteToAdmin = false,
+        canDemoteToAdmin = false,
+        canPromoteToModerator = false,
+        canDemoteToModerator = false,
+        canDemoteToMember = false,
+        canRemoveMember = false,
+        canBlockUser = false,
+        searchTerm = "",
+        onRemoveMember,
+        onChangeRole,
+        onBlockUser,
+    }: Props = $props();
+
+    // if search term is !== "", split the username into three parts [prefix, match, postfix]
+
+    let showMenu = $derived(
+        canPromoteToOwner ||
+            canPromoteToAdmin ||
+            canDemoteToAdmin ||
+            canPromoteToModerator ||
+            canDemoteToModerator ||
+            canDemoteToMember ||
+            canRemoveMember ||
+            canBlockUser,
+    );
+
+    let ownerText = $derived($_(roleAsText(ROLE_OWNER)));
+    let adminText = $derived($_(roleAsText(ROLE_ADMIN)));
+    let moderatorText = $derived($_(roleAsText(ROLE_MODERATOR)));
+    let memberText = $derived($_(roleAsText(ROLE_MEMBER)));
+
+    function removeUser() {
+        onRemoveMember?.(member.userId);
+    }
+
+    function changeRole(role: MemberRole) {
+        onChangeRole?.({
+            userId: member.userId,
+            newRole: role,
+            oldRole: member.role,
+        });
+    }
+
+    function blockUser() {
+        onBlockUser?.(member.userId);
+    }
+</script>
+
+{#snippet children()}
+    {#if canPromoteToOwner}
+        <MenuItem onclick={() => changeRole(ROLE_OWNER)}>
+            <Translatable
+                resourceKey={i18nKey("promoteTo", {
+                    role: ownerText,
+                })} />
+        </MenuItem>
+    {/if}
+    {#if canPromoteToAdmin}
+        <MenuItem onclick={() => changeRole(ROLE_ADMIN)}>
+            <Translatable
+                resourceKey={i18nKey("promoteTo", {
+                    role: adminText,
+                })} />
+        </MenuItem>
+    {/if}
+    {#if canDemoteToAdmin}
+        <MenuItem onclick={() => changeRole(ROLE_ADMIN)}>
+            <Translatable
+                resourceKey={i18nKey("demoteTo", {
+                    role: adminText,
+                })} />
+        </MenuItem>
+    {/if}
+    {#if canPromoteToModerator}
+        <MenuItem onclick={() => changeRole(ROLE_MODERATOR)}>
+            <Translatable
+                resourceKey={i18nKey("promoteTo", {
+                    role: moderatorText,
+                })} />
+        </MenuItem>
+    {/if}
+    {#if canDemoteToModerator}
+        <MenuItem onclick={() => changeRole(ROLE_MODERATOR)}>
+            <Translatable
+                resourceKey={i18nKey("demoteTo", {
+                    role: moderatorText,
+                })} />
+        </MenuItem>
+    {/if}
+    {#if canDemoteToMember}
+        <MenuItem onclick={() => changeRole(ROLE_MEMBER)}>
+            <Translatable
+                resourceKey={i18nKey("demoteTo", {
+                    role: memberText,
+                })} />
+        </MenuItem>
+    {/if}
+    {#if canBlockUser}
+        <MenuItem onclick={blockUser}>
+            <Translatable resourceKey={i18nKey("blockUser")} />
+        </MenuItem>
+    {/if}
+    {#if canRemoveMember}
+        <MenuItem onclick={removeUser}>
+            <Translatable resourceKey={i18nKey("remove")} />
+        </MenuItem>
+    {/if}
+{/snippet}
+
+<User
+    children={showMenu ? children : undefined}
+    user={member}
+    {me}
+    {searchTerm}
+    role={member.role > ROLE_MEMBER ? member.role : undefined} />
diff --git a/frontend/app/src/components_mobile/home/membership/MemberList.svelte b/frontend/app/src/mobile/features/chats/members/MemberList.svelte
similarity index 96%
rename from frontend/app/src/components_mobile/home/membership/MemberList.svelte
rename to frontend/app/src/mobile/features/chats/members/MemberList.svelte
index cbe15086ed..e8ec75ff46 100644
--- a/frontend/app/src/components_mobile/home/membership/MemberList.svelte
+++ b/frontend/app/src/mobile/features/chats/members/MemberList.svelte
@@ -8,7 +8,7 @@
         ROLE_OWNER,
         type FullMember,
     } from "@client";
-    import VirtualList from "@shared_components/VirtualList.svelte";
+    import VirtualList from "@src/ui/VirtualList.svelte";
     import Member from "./Member.svelte";
     import type { MemberManagement } from "./membersState.svelte";
 
diff --git a/frontend/app/src/components_mobile/home/membership/MemberManagement.svelte b/frontend/app/src/mobile/features/chats/members/MemberManagement.svelte
similarity index 97%
rename from frontend/app/src/components_mobile/home/membership/MemberManagement.svelte
rename to frontend/app/src/mobile/features/chats/members/MemberManagement.svelte
index 433cdc4c08..3632010db3 100644
--- a/frontend/app/src/components_mobile/home/membership/MemberManagement.svelte
+++ b/frontend/app/src/mobile/features/chats/members/MemberManagement.svelte
@@ -15,8 +15,8 @@
     import AccountCancel from "svelte-material-icons/AccountCancelOutline.svelte";
     import Account from "svelte-material-icons/AccountGroupOutline.svelte";
     import AccountPlus from "svelte-material-icons/AccountPlusOutline.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
     import AddList from "./AddList.svelte";
     import BlockedList from "./BlockedList.svelte";
     import LapsedList from "./LapsedList.svelte";
diff --git a/frontend/app/src/components_mobile/home/membership/MembersSummary.svelte b/frontend/app/src/mobile/features/chats/members/MembersSummary.svelte
similarity index 93%
rename from frontend/app/src/components_mobile/home/membership/MembersSummary.svelte
rename to frontend/app/src/mobile/features/chats/members/MembersSummary.svelte
index 506fc3bc37..7f6eb00e49 100644
--- a/frontend/app/src/components_mobile/home/membership/MembersSummary.svelte
+++ b/frontend/app/src/mobile/features/chats/members/MembersSummary.svelte
@@ -10,8 +10,8 @@
     } from "@client";
     import { getContext, onDestroy } from "svelte";
     import AccountPlus from "svelte-material-icons/AccountPlusOutline.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import Separator from "../Separator.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import Separator from "@src/mobile/features/chats/core/Separator.svelte";
     import MemberList from "./MemberList.svelte";
     import { MemberManagement } from "./membersState.svelte";
 
diff --git a/frontend/app/src/mobile/features/chats/members/Share.svelte b/frontend/app/src/mobile/features/chats/members/Share.svelte
new file mode 100644
index 0000000000..8513a689d9
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/members/Share.svelte
@@ -0,0 +1,121 @@
+<script lang="ts">
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import {
+        ColourVars,
+        CommonButton,
+        Container,
+        CopyCard,
+        FloatingButton,
+        StatusCard,
+        Switch,
+    } from "component-lib";
+    import Reload from "svelte-material-icons/Reload.svelte";
+    import ShareIcon from "svelte-material-icons/ShareOutline.svelte";
+    import AreYouSure from "@src/mobile/shared/AreYouSure.svelte";
+    import QRCode from "@src/mobile/shared/QRCode.svelte";
+    import Setting from "@src/mobile/shared/Setting.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    import { canShare } from "@src/utils/share";
+    import { OpenChat, type Level } from "@client";
+    import { getContext, onMount } from "svelte";
+    import { _ } from "svelte-i18n";
+    import type { MemberManagement } from "./membersState.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        membersState: MemberManagement;
+        level: Level;
+    }
+    let { membersState, level }: Props = $props();
+
+    onMount(() => membersState.initialiseSharing());
+
+    let link = $derived(membersState.getSharingLink(client));
+
+    function onShare() {
+        membersState.shareLink(link);
+    }
+
+    let showLink = $derived(
+        membersState.isPublic ||
+            (membersState.sharingLinkCode !== undefined && membersState.sharingLinkEnabled),
+    );
+</script>
+
+{#if membersState.confirmingResetLink}
+    <AreYouSure
+        message={i18nKey("invite.confirmReset", undefined, membersState.level, true)}
+        action={(answer) => membersState.confirmResetLinkResponse(answer)} />
+{/if}
+
+{#snippet action()}
+    <Container mainAxisAlignment={"end"}>
+        <CommonButton
+            loading={membersState.confirmingResetLink}
+            onClick={() => membersState.confirmResetLink()}
+            mode={"active"}
+            size={"small_text"}>
+            {#snippet icon(color, size)}
+                <Reload {color} {size} />
+            {/snippet}
+            <Translatable resourceKey={i18nKey("invite.resetLink")}></Translatable>
+        </CommonButton>
+    </Container>
+{/snippet}
+
+<Container gap={"xl"} direction={"vertical"} height={"fill"}>
+    {#if !membersState.isPublic}
+        <Container padding={["zero", "md"]} gap={"xl"} direction={"vertical"}>
+            <Setting
+                toggle={() => membersState.toggleInviteLink()}
+                info={"When enabled, a link and a QR code will be available to share with any user you would like to invite to become a member of this group."}>
+                <Switch
+                    loading={membersState.togglingSharingLink}
+                    onChange={() => membersState.toggleInviteLink()}
+                    width={"fill"}
+                    reverse
+                    checked={membersState.sharingLinkEnabled}>
+                    <Translatable resourceKey={i18nKey("Enable sharing via link")}></Translatable>
+                </Switch>
+            </Setting>
+        </Container>
+    {/if}
+    {#if showLink}
+        <StatusCard
+            mode={"warning"}
+            title={interpolate(
+                $_,
+                i18nKey("Anyone with this link can join the {level}", undefined, level, true),
+            )}
+            body={interpolate(
+                $_,
+                i18nKey(
+                    "Anyone with this link can preview and join the {level}. This means that access gates are ignored. As a Diamond member you can also earn referral rewards.",
+                    undefined,
+                    level,
+                    true,
+                ),
+            )}>
+        </StatusCard>
+        <Container gap={"xs"} direction={"vertical"}>
+            <CopyCard
+                action={membersState.sharingLinkCode !== undefined ? action : undefined}
+                title={"Share using this link"}
+                body={link}>
+            </CopyCard>
+            <Container padding={"md"} background={ColourVars.background1}>
+                <QRCode text={link} fullWidthOnMobile />
+            </Container>
+        </Container>
+    {/if}
+</Container>
+
+{#if showLink && canShare()}
+    <FloatingButton onClick={onShare} pos={{ bottom: "lg", right: "lg" }}>
+        {#snippet icon(color)}
+            <ShareIcon {color} />
+        {/snippet}
+    </FloatingButton>
+{/if}
diff --git a/frontend/app/src/components_mobile/home/membership/membersState.svelte.ts b/frontend/app/src/mobile/features/chats/members/membersState.svelte.ts
similarity index 100%
rename from frontend/app/src/components_mobile/home/membership/membersState.svelte.ts
rename to frontend/app/src/mobile/features/chats/members/membersState.svelte.ts
diff --git a/frontend/app/src/mobile/features/chats/pinned/PinnedMessage.svelte b/frontend/app/src/mobile/features/chats/pinned/PinnedMessage.svelte
new file mode 100644
index 0000000000..1fe409e56f
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/pinned/PinnedMessage.svelte
@@ -0,0 +1,113 @@
+<script lang="ts">
+    import { findUser } from "@src/utils/user";
+    import type { ProfileLinkClickedEvent } from "@webcomponents/profileLink";
+    import { Avatar, Container } from "component-lib";
+    import type { CreatedUser, Message, MultiUserChatIdentifier, OpenChat } from "@client";
+    import {
+        allUsersStore,
+        chatListScopeStore,
+        fullWidth,
+        routeForMessage,
+        selectedChatIdStore,
+        selectedChatWebhooksStore,
+    } from "@client";
+    import { navigate } from "@src/utils/navigation";
+    import { getContext } from "svelte";
+    import ChatMessageContent from "@src/mobile/features/chats/core/content/ChatMessageContent.svelte";
+    import IntersectionObserver from "@src/mobile/features/chats/core/IntersectionObserver.svelte";
+    import RepliesTo from "@src/mobile/features/chats/core/RepliesTo.svelte";
+    import MessageBubble from "@src/mobile/features/chats/core/MessageBubble.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        chatId: MultiUserChatIdentifier;
+        user: CreatedUser;
+        senderId: string;
+        msg: Message;
+        timestamp: bigint;
+    }
+
+    let { chatId, user, senderId, msg, timestamp }: Props = $props();
+
+    let sender = $derived(findUser(msg.sender, $allUsersStore, $selectedChatWebhooksStore));
+    let fill = $derived(client.fillMessage(msg));
+    let me = $derived(user.userId === senderId);
+    let modal = $derived(!$fullWidth);
+
+    function openUserProfile(e?: Event) {
+        if (!sender) return;
+
+        e?.preventDefault();
+        e?.target?.dispatchEvent(
+            new CustomEvent<ProfileLinkClickedEvent>("profile-clicked", {
+                detail: {
+                    userId: sender.userId,
+                    chatButton: !me,
+                    inGlobalContext: false,
+                },
+                bubbles: true,
+            }),
+        );
+    }
+
+    function goToMessageIndex() {
+        if ($selectedChatIdStore !== undefined) {
+            if (modal) {
+                client.popRightPanelHistory();
+            }
+            navigate(
+                routeForMessage(
+                    $chatListScopeStore.kind,
+                    { chatId: $selectedChatIdStore },
+                    msg.messageIndex,
+                ),
+            );
+        }
+    }
+</script>
+
+<Container gap={"sm"} onClick={goToMessageIndex}>
+    <div class="avatar">
+        <Avatar onClick={openUserProfile} url={client.userAvatarUrl(sender)} size={"md"} />
+    </div>
+    <IntersectionObserver>
+        {#snippet children(intersecting)}
+            <MessageBubble
+                {chatId}
+                {sender}
+                {msg}
+                {fill}
+                first
+                time={Number(timestamp)}
+                pinned
+                expiresAt={undefined}
+                bot={sender?.kind === "bot"}
+                onGoToMessageIndex={goToMessageIndex}
+                onOpenUserProfile={openUserProfile}
+                chatType={chatId.kind}>
+                {#snippet repliesTo(reply)}
+                    <RepliesTo {intersecting} readonly {chatId} repliesTo={reply} />
+                {/snippet}
+                {#snippet messageContent(me)}
+                    <ChatMessageContent
+                        readonly
+                        pinned
+                        {senderId}
+                        {fill}
+                        {timestamp}
+                        failed={false}
+                        messageContext={{ chatId }}
+                        edited={msg.edited}
+                        messageIndex={msg.messageIndex}
+                        messageId={msg.messageId}
+                        {me}
+                        {intersecting}
+                        content={msg.content}
+                        blockLevelMarkdown={msg.blockLevelMarkdown}
+                        ogPreviews={msg.ogPreviews} />
+                {/snippet}
+            </MessageBubble>
+        {/snippet}
+    </IntersectionObserver>
+</Container>
diff --git a/frontend/app/src/mobile/features/chats/pinned/PinnedMessages.svelte b/frontend/app/src/mobile/features/chats/pinned/PinnedMessages.svelte
new file mode 100644
index 0000000000..20b27837f1
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/pinned/PinnedMessages.svelte
@@ -0,0 +1,164 @@
+<script lang="ts">
+    import { Container } from "component-lib";
+    import type {
+        EventWrapper,
+        Message,
+        MultiUserChat,
+        OpenChat,
+        ReadonlySet,
+    } from "@client";
+    import {
+        currentUserStore,
+        messagesRead,
+        selectedChatPinnedMessagesStore,
+        selectedServerChatStore,
+        subscribe,
+    } from "@client";
+    import { isSuccessfulEventsResponse, publish } from "@shared";
+    import { getContext, onMount, tick, untrack } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { i18nKey } from "@src/i18n/i18n";
+    import type { RemoteData } from "@src/utils/remoteData";
+    import Loading from "@src/ui/Loading.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
+    import PinnedMessage from "./PinnedMessage.svelte";
+
+    interface Props {
+        pinned: ReadonlySet<number>;
+        chat: MultiUserChat;
+    }
+
+    let { pinned, chat }: Props = $props();
+    void pinned;
+
+    const client = getContext<OpenChat>("client");
+    let unread = $state<boolean>(false);
+    // $derived is load-bearing: a plain `let` captures a one-time snapshot,
+    // and if the panel mounts before the chat details (pinned set) arrive
+    // the panel stays empty forever.
+    let pinnedMessages = $derived($selectedChatPinnedMessagesStore);
+
+    onMount(() => {
+        const unsubs = [
+            subscribe("chatWith", () => publish("closeModalPage")),
+            messagesRead.subscribe(() => {
+                unread = client.unreadPinned(chat.id, chat.dateLastPinned);
+            }),
+        ];
+        return () => {
+            unsubs.forEach((u) => u());
+        };
+    });
+
+    let messagesDiv: HTMLDivElement | undefined = $state();
+
+    let messages: RemoteData<EventWrapper<Message>[][], string> = $state({ kind: "idle" });
+
+    function scrollBottom() {
+        if (messagesDiv !== undefined) {
+            messagesDiv.scrollTo({
+                top: messagesDiv.scrollHeight - messagesDiv.clientHeight,
+                behavior: "auto",
+            });
+        }
+    }
+
+    function reloadPinned(pinned: ReadonlySet<number>): void {
+        untrack(() => {
+            if (pinned.size > 0) {
+                if (messages.kind !== "success") {
+                    messages = { kind: "loading" };
+                }
+                client
+                    .getMessagesByMessageIndex(chat.id, undefined, [...pinned])
+                    .then((resp) => {
+                        if (!isSuccessfulEventsResponse(resp)) {
+                            messages = { kind: "error", error: "Unable to load pinned messages" };
+                        } else {
+                            messages = {
+                                kind: "success",
+                                data: client.groupMessagesByDate(
+                                    resp.events.sort((a, b) => a.index - b.index),
+                                ),
+                            };
+
+                            if (unread) {
+                                client.markPinnedMessagesRead(chat.id, chat.dateLastPinned!);
+                            }
+
+                            tick().then(scrollBottom);
+                        }
+                    })
+                    .catch((err) => {
+                        client.logError("Unable to load pinned messages: ", err);
+                        messages = { kind: "error", error: err.toString() };
+                    });
+            } else {
+                messages = { kind: "success", data: [] };
+            }
+        });
+    }
+
+    $effect(() => {
+        // Until the chat details arrive the pinned set is UNKNOWN, not empty —
+        // rendering the empty state here made the panel show "no pins" for the
+        // first second on a first open (cold cache / slow connection).
+        if ($selectedServerChatStore === undefined) {
+            messages = { kind: "loading" };
+            return;
+        }
+        reloadPinned(pinnedMessages);
+        unread = client.unreadPinned(chat.id, chat.dateLastPinned);
+    });
+
+    function dateGroupKey(group: EventWrapper<Message>[]): string {
+        const first = group[0] && group[0] && group[0].timestamp;
+        return first ? new Date(Number(first)).toDateString() : "unknown";
+    }
+</script>
+
+<SlidingPageContent title={i18nKey("pinnedMessages")}>
+    <Container gap={"sm"} padding={"lg"} height={"fill"} direction={"vertical"} bind:ref={messagesDiv}>
+        {#if messages.kind !== "success"}
+            <Loading />
+        {:else}
+            {#each messages.data as dayGroup (dateGroupKey(dayGroup))}
+                <Container gap={"sm"} direction={"vertical"}>
+                    <div class="date-label">
+                        {client.formatMessageDate(
+                            dayGroup[0]?.timestamp,
+                            $_("today"),
+                            $_("yesterday"),
+                        )}
+                    </div>
+                    {#each dayGroup as message (message.event.messageId)}
+                        <PinnedMessage
+                            chatId={chat.id}
+                            timestamp={message.timestamp}
+                            user={$currentUserStore}
+                            senderId={message.event.sender}
+                            msg={message.event} />
+                    {/each}
+                </Container>
+            {/each}
+        {/if}
+    </Container>
+</SlidingPageContent>
+
+<style lang="scss">
+    .date-label {
+        padding: $sp2;
+        background-color: var(--currentChat-date-bg);
+        border: var(--currentChat-date-bd);
+        color: var(--currentChat-date-txt);
+        position: sticky;
+        top: 0;
+        width: 200px;
+        margin: 0 auto;
+        border-radius: $sp4;
+        @include z-index("date-label");
+        @include font(book, normal, fs-70);
+        text-align: center;
+        margin-bottom: $sp4;
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/chats/thread/Thread.svelte b/frontend/app/src/mobile/features/chats/thread/Thread.svelte
new file mode 100644
index 0000000000..f23595f006
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/thread/Thread.svelte
@@ -0,0 +1,400 @@
+<script lang="ts">
+    import { ColourVars, Container } from "component-lib";
+    import type {
+        AttachmentContent,
+        ChatEvent as ChatEventType,
+        ChatSummary,
+        EnhancedReplyContext,
+        EventWrapper,
+        Message,
+        MessageContent,
+        MessageContext,
+        OpenChat,
+        TimelineItem,
+        User,
+    } from "@client";
+    import {
+        allUsersStore,
+        currentUserIdStore,
+        currentUserStore,
+        failedMessagesStore,
+        lastCryptoSent,
+        LEDGER_CANISTER_ICP,
+        localUpdates,
+        messageContextsEqual,
+        messagesRead,
+        publish,
+        selectedChatBlockedUsersStore,
+        selectedChatExpandedDeletedMessageStore,
+        selectedThreadDraftMessageStore,
+        subscribe,
+        threadEventsStore,
+        threadsFollowedByMeStore,
+        unconfirmedStore,
+    } from "@client";
+    import { getContext, onMount } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import { randomSentence } from "@src/utils/randomMsg";
+    import AreYouSure from "@src/mobile/shared/AreYouSure.svelte";
+    import Loading from "@src/ui/Loading.svelte";
+    import { flattenTimeline } from "@src/ui/flatChatItems";
+    import ChatEvent from "@src/mobile/features/chats/core/events/ChatEvent.svelte";
+    import ChatEventList from "@src/mobile/features/chats/core/events/ChatEventList.svelte";
+    import CryptoTransferBuilder from "@src/mobile/features/chats/core/CryptoTransferBuilder.svelte";
+    import Footer from "@src/mobile/features/chats/core/Footer.svelte";
+    import MemeBuilder from "@src/mobile/features/chats/core/MemeBuilder.svelte";
+    import TimelineDate from "@src/mobile/features/chats/core/TimelineDate.svelte";
+    import ThreadHeader from "./ThreadHeader.svelte";
+    import { keyboard } from "@src/stores/keyboard.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        rootEvent: EventWrapper<Message>;
+        chat: ChatSummary;
+    }
+
+    let { rootEvent, chat }: Props = $props();
+
+    let chatEventList: ChatEventList | undefined = $state();
+    //@ts-ignore
+    let memeBuilder: MemeBuilder = $state();
+    let creatingCryptoTransfer: { ledger: string; amount: bigint } | undefined = $state(undefined);
+    let buildingMeme = $state(false);
+    let initialised = $state(false);
+    let messagesDiv: HTMLDivElement | undefined = $state();
+    let messagesDivHeight: number = $state(0);
+    let removeLinkPreviewDetails: { event: EventWrapper<Message>; url: string } | undefined =
+        $state(undefined);
+
+    let threadRootMessageIndex = $derived(rootEvent?.event?.messageIndex ?? 0);
+    let messageContext = $derived({ chatId: chat.id, threadRootMessageIndex });
+    let threadRootMessage = $derived(rootEvent.event);
+    let blocked = $derived(
+        chat.kind === "direct_chat" && $selectedChatBlockedUsersStore.has(chat.them.userId),
+    );
+    let textContent = $derived($selectedThreadDraftMessageStore?.textContent);
+    let replyingTo = $derived($selectedThreadDraftMessageStore?.replyingTo);
+    let attachment = $derived($selectedThreadDraftMessageStore?.attachment);
+    let editingEvent = $derived($selectedThreadDraftMessageStore?.editingEvent);
+    let canSendAny = $derived(client.canSendMessage(chat.id, "thread"));
+    let canReact = $derived(client.canReactToMessages(chat.id));
+    let atRoot = $derived($threadEventsStore.length === 0 || $threadEventsStore[0]?.index === 0);
+    let events = $derived(atRoot ? [rootEvent, ...$threadEventsStore] : $threadEventsStore);
+    let timeline = $derived(
+        client.groupEvents(
+            [...events].reverse(),
+            $currentUserIdStore,
+            chat.kind === "channel" && chat.public,
+            $selectedChatExpandedDeletedMessageStore,
+        ) as TimelineItem<Message>[],
+    );
+    let items = $derived(flattenTimeline(timeline));
+    let readonly = $derived(client.isChatReadOnly(chat.id));
+    let thread = $derived(rootEvent.event.thread);
+    let loading = $derived(!initialised && $threadEventsStore.length === 0 && thread !== undefined);
+    let isFollowedByMe = $derived(
+        $threadsFollowedByMeStore.get(chat.id)?.has(threadRootMessageIndex) ?? false,
+    );
+
+    function onCloseThread() {
+        publish("closeThread");
+    }
+
+    onMount(() => {
+        const unsubs = [
+            subscribe("tokenTransfer", onTokenTransfer),
+            subscribe("createTestMessages", onCreateTestMessages),
+        ];
+        return () => {
+            unsubs.forEach((u) => u());
+        };
+    });
+
+    function onTokenTransfer(args: { context: MessageContext; ledger?: string; amount?: bigint }) {
+        if (messageContextsEqual(messageContext, args.context)) {
+            tokenTransfer(args);
+        }
+    }
+
+    function onCreateTestMessages([ctx, num]: [MessageContext, number]) {
+        if (messageContextsEqual(ctx, messageContext)) {
+            createTestMessages(num);
+        }
+    }
+
+    function createTestMessages(total: number): void {
+        function send(n: number) {
+            if (n === total) return;
+
+            sendMessageWithAttachment(randomSentence(), false, undefined);
+
+            window.setTimeout(() => send(n + 1), 500);
+        }
+
+        send(0);
+    }
+
+    function onSendMessage(detail: [string | undefined, User[], boolean]) {
+        if (!canSendAny) return;
+        let [text, mentioned, blockLevelMarkdown] = detail;
+        if (editingEvent !== undefined) {
+            client
+                .editMessageWithAttachment(
+                    messageContext,
+                    text,
+                    blockLevelMarkdown,
+                    attachment,
+                    editingEvent,
+                )
+                .then((success) => {
+                    if (!success) {
+                        toastStore.showFailureToast(i18nKey("errorEditingMessage"));
+                    }
+                });
+        } else {
+            sendMessageWithAttachment(text, blockLevelMarkdown, attachment, mentioned);
+        }
+    }
+
+    function editEvent(ev: EventWrapper<Message>): void {
+        localUpdates.draftMessages.setEditing(messageContext, ev, $allUsersStore);
+    }
+
+    function sendMessageWithAttachment(
+        textContent: string | undefined,
+        blockLevelMarkdown: boolean,
+        attachment: AttachmentContent | undefined,
+        mentioned: User[] = [],
+    ) {
+        client.sendMessageWithAttachment(
+            messageContext,
+            textContent,
+            blockLevelMarkdown,
+            attachment,
+            mentioned,
+        );
+    }
+
+    function onCancelReply() {
+        localUpdates.draftMessages.setReplyingTo(messageContext, undefined);
+    }
+
+    function clearAttachment() {
+        localUpdates.draftMessages.setAttachment(messageContext, undefined);
+    }
+
+    function cancelEditEvent() {
+        localUpdates.draftMessages.delete(messageContext);
+    }
+
+    function onSetTextContent(txt?: string) {
+        localUpdates.draftMessages.setTextContent(messageContext, txt);
+    }
+
+    function onStartTyping() {
+        if (chat !== undefined) {
+            client.startTyping(chat.id, $currentUserIdStore, threadRootMessageIndex);
+        }
+    }
+
+    function onStopTyping() {
+        if (chat !== undefined) {
+            client.stopTyping(chat.id, $currentUserIdStore, threadRootMessageIndex);
+        }
+    }
+
+    function onFileSelected(content: AttachmentContent) {
+        localUpdates.draftMessages.setAttachment(messageContext, content);
+    }
+
+    function tokenTransfer(detail: { ledger?: string; amount?: bigint }) {
+        keyboard.enableViewportResize();
+        creatingCryptoTransfer = {
+            ledger: detail.ledger ?? $lastCryptoSent ?? LEDGER_CANISTER_ICP,
+            amount: detail.amount ?? BigInt(0),
+        };
+    }
+
+    function makeMeme() {
+        keyboard.enableViewportResize();
+        buildingMeme = true;
+        if (memeBuilder !== undefined) {
+            memeBuilder.reset();
+        }
+    }
+
+    function replyTo(replyContext: EnhancedReplyContext) {
+        localUpdates.draftMessages.setReplyingTo(messageContext, replyContext);
+    }
+
+    function defaultCryptoTransferReceiver(): string | undefined {
+        return replyingTo?.sender?.userId;
+    }
+
+    function goToMessageIndex(index: number) {
+        chatEventList?.scrollToMessageIndex(messageContext, index, false);
+    }
+
+    function onGoToMessageIndex(detail: { index: number }) {
+        goToMessageIndex(detail.index);
+    }
+
+    function createP2PSwapMessage() {
+        publish("createSwap", {
+            fromLedger: $lastCryptoSent ?? LEDGER_CANISTER_ICP,
+            ctx: messageContext,
+        });
+    }
+
+    function onRemovePreview(event: EventWrapper<Message>, url: string): void {
+        removeLinkPreviewDetails = {
+            event,
+            url,
+        };
+    }
+
+    function removePreview(yes: boolean): Promise<void> {
+        if (removeLinkPreviewDetails !== undefined && yes) {
+            const { event, url } = removeLinkPreviewDetails;
+
+            client.hideLinkPreview(messageContext, event, url).then((success) => {
+                if (!success) {
+                    toastStore.showFailureToast(i18nKey("errorRemovingLinkPreview"));
+                }
+            });
+        }
+
+        removeLinkPreviewDetails = undefined;
+        return Promise.resolve();
+    }
+
+    function toggleMessageExpansion(ew: EventWrapper<ChatEventType>, expand: boolean) {
+        if (ew.event.kind === "message" && ew.event.content.kind === "proposal_content") {
+            client.toggleProposalFilterMessageExpansion(ew.event.messageId, expand);
+        }
+    }
+
+    function onSendMessageWithContent(content: MessageContent) {
+        client.sendMessageWithContent(messageContext, content, false);
+    }
+</script>
+
+{#if removeLinkPreviewDetails !== undefined}
+    <AreYouSure title={i18nKey("removePreviewQuestion")} action={removePreview} />
+{/if}
+
+<MemeBuilder onSend={onSendMessageWithContent} bind:this={memeBuilder} bind:open={buildingMeme} />
+
+{#if creatingCryptoTransfer !== undefined}
+    <CryptoTransferBuilder
+        {chat}
+        ledger={creatingCryptoTransfer.ledger}
+        defaultReceiver={defaultCryptoTransferReceiver()}
+        {messageContext}
+        onClose={() => {
+            // TODO rethink, same as in CurrentChat.svelte
+            keyboard.disableViewportResize();
+            creatingCryptoTransfer = undefined;
+        }} />
+{/if}
+
+<Container background={ColourVars.background0} height={"fill"} direction={"vertical"}>
+    <ThreadHeader {threadRootMessageIndex} {onCloseThread} {rootEvent} chatSummary={chat} />
+    {#if loading}
+        <Loading />
+    {:else}
+        <ChatEventList
+            threadRootEvent={rootEvent}
+            rootSelector={"thread-messages"}
+            maintainScroll={false}
+            bind:this={chatEventList}
+            scrollTopButtonEnabled
+            {readonly}
+            unreadMessages={0}
+            firstUnreadMention={undefined}
+            footer
+            visible
+            {items}
+            {chat}
+            bind:initialised
+            bind:messagesDiv
+            bind:messagesDivHeight>
+            {#snippet row(
+                item,
+                { isAccepted, isConfirmed, isFailed, isReadByMe, messageObserver, focusIndex },
+            )}
+                {#if item.kind === "timeline_date"}
+                    <TimelineDate timestamp={item.timestamp} />
+                {:else if item.kind === "event"}
+                    {@const evt = item.event as EventWrapper<Message>}
+                    <ChatEvent
+                        chatId={chat.id}
+                        chatType={chat.kind}
+                        event={evt}
+                        first={item.first}
+                        last={item.last}
+                        me={evt.event.sender === $currentUserIdStore}
+                        accepted={isAccepted($unconfirmedStore, evt)}
+                        confirmed={isConfirmed($unconfirmedStore, evt)}
+                        failed={isFailed($failedMessagesStore, evt)}
+                        readByMe={evt.event.messageId === rootEvent.event.messageId ||
+                            !isFollowedByMe ||
+                            isReadByMe($messagesRead, evt)}
+                        observer={messageObserver}
+                        focused={evt.event.kind === "message" &&
+                            focusIndex === evt.event.messageIndex}
+                        {readonly}
+                        {threadRootMessage}
+                        pinned={false}
+                        supportsEdit={evt.event.messageId !== rootEvent.event.messageId}
+                        supportsReply={evt.event.messageId !== rootEvent.event.messageId}
+                        canPin={client.canPinMessages(chat.id)}
+                        canBlockUsers={client.canBlockUsers(chat.id)}
+                        canDelete={client.canDeleteOtherUsersMessages(chat.id)}
+                        publicGroup={(chat.kind === "group_chat" || chat.kind === "channel") &&
+                            chat.public}
+                        editing={editingEvent === evt}
+                        canSendAny
+                        {canReact}
+                        canInvite={false}
+                        canReplyInThread={false}
+                        collapsed={false}
+                        {onRemovePreview}
+                        {onGoToMessageIndex}
+                        onReplyTo={replyTo}
+                        onEditEvent={() => editEvent(evt)}
+                        onExpandMessage={() => toggleMessageExpansion(evt, true)}
+                        onCollapseMessage={() => toggleMessageExpansion(evt, false)} />
+                {/if}
+            {/snippet}
+        </ChatEventList>
+    {/if}
+
+    {#if !readonly}
+        <Footer
+            {chat}
+            {attachment}
+            {editingEvent}
+            {replyingTo}
+            {textContent}
+            user={$currentUserStore}
+            preview={false}
+            lapsed={false}
+            mode={"thread"}
+            {blocked}
+            {messageContext}
+            {onCancelReply}
+            onClearAttachment={clearAttachment}
+            onCancelEdit={cancelEditEvent}
+            {onSetTextContent}
+            {onStartTyping}
+            {onStopTyping}
+            {onFileSelected}
+            {onSendMessage}
+            onMakeMeme={makeMeme}
+            onTokenTransfer={tokenTransfer}
+            onCreateP2PSwapMessage={createP2PSwapMessage} />
+    {/if}
+</Container>
diff --git a/frontend/app/src/mobile/features/chats/thread/ThreadHeader.svelte b/frontend/app/src/mobile/features/chats/thread/ThreadHeader.svelte
new file mode 100644
index 0000000000..2dffe3251c
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/thread/ThreadHeader.svelte
@@ -0,0 +1,93 @@
+<script lang="ts">
+    import { Avatar, SectionHeader } from "component-lib";
+    import type {
+        ChatIdentifier,
+        ChatSummary,
+        EventWrapper,
+        Message,
+        OpenChat,
+        TypersByKey,
+    } from "@client";
+    import {
+        allUsersStore,
+        byContext,
+        selectedCommunitySummaryStore,
+        UserStatus,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { now } from "@src/stores/time";
+    import Typing from "@src/ui/Typing.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        chatSummary: ChatSummary;
+        rootEvent: EventWrapper<Message>;
+        threadRootMessageIndex: number;
+        onCloseThread: (id: ChatIdentifier) => void;
+    }
+
+    let { chatSummary, rootEvent, threadRootMessageIndex, onCloseThread }: Props = $props();
+
+    function close() {
+        onCloseThread(chatSummary.id);
+    }
+
+    function normaliseChatSummary(_now: number, chatSummary: ChatSummary, typing: TypersByKey) {
+        const someoneTyping = client.getTypingString(
+            $_,
+            $allUsersStore,
+            { chatId: chatSummary.id, threadRootMessageIndex },
+            typing,
+        );
+
+        const msgTxt = rootEvent ? client.getContentAsText($_, rootEvent.event.content) : "";
+        const subtext = someoneTyping ?? `${$_("thread.title")}: ${msgTxt}`;
+        if (chatSummary.kind === "direct_chat") {
+            return {
+                title: $allUsersStore.get(chatSummary.them.userId)?.username,
+                avatarUrl: client.userAvatarUrl($allUsersStore.get(chatSummary.them.userId)),
+                userId: chatSummary.them.userId,
+                subtext,
+                typing: someoneTyping !== undefined,
+            };
+        }
+        return {
+            title: chatSummary.name,
+            userStatus: UserStatus.None,
+            avatarUrl: client.groupAvatarUrl(chatSummary, $selectedCommunitySummaryStore),
+            userId: undefined,
+            subtext,
+            typing: someoneTyping !== undefined,
+        };
+    }
+
+    function onKeyDown(ev: KeyboardEvent) {
+        if (ev.key === "Escape") {
+            if (!document.getElementById("portal-element")) {
+                close();
+            }
+        }
+    }
+    let chat = $derived(normaliseChatSummary($now, chatSummary, $byContext));
+</script>
+
+<svelte:window onkeydown={onKeyDown} />
+
+<SectionHeader onBack={close}>
+    {#snippet avatar()}
+        <Avatar url={chat.avatarUrl} size={"lg"} name={chat.title} />
+    {/snippet}
+    {#snippet title()}
+        {chat.title}
+    {/snippet}
+    {#snippet subtitle()}
+        {#if chat.typing}
+            {chat.subtext} <Typing />
+        {:else}
+            <Markdown text={chat.subtext} oneLine suppressLinks />
+        {/if}
+    {/snippet}
+</SectionHeader>
diff --git a/frontend/app/src/mobile/features/chats/thread/ThreadPreview.svelte b/frontend/app/src/mobile/features/chats/thread/ThreadPreview.svelte
new file mode 100644
index 0000000000..d23f27e769
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/thread/ThreadPreview.svelte
@@ -0,0 +1,307 @@
+<script lang="ts">
+    import { toastStore } from "@src/stores/toast";
+    import {
+        Avatar,
+        BodySmall,
+        ColourVars,
+        CommonButton,
+        Container,
+        CountBadge,
+        IconButton,
+        MenuItem,
+        MenuTrigger,
+        Title,
+    } from "component-lib";
+    import {
+        allUsersStore,
+        chatSummariesStore,
+        currentUserIdStore,
+        type EventWrapper,
+        type Message,
+        messagesRead,
+        type MultiUserChat,
+        OpenChat,
+        selectedCommunitySummaryStore,
+        type ThreadPreview,
+    } from "@client";
+    import { getContext, onMount } from "svelte";
+    import { _ } from "svelte-i18n";
+    import DotsVertical from "svelte-material-icons/DotsVertical.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import ChatMessage from "@src/mobile/features/chats/core/ChatMessage.svelte";
+    import IntersectionObserverComponent from "@src/mobile/features/chats/core/IntersectionObserver.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        thread: ThreadPreview;
+        observer: IntersectionObserver;
+    }
+
+    let { thread, observer }: Props = $props();
+
+    let expanded = $state(false);
+    let missingMessages = $derived(thread.totalReplies - thread.latestReplies.length);
+    let threadRootMessageIndex = $derived(thread.rootMessage.event.messageIndex);
+    let chat = $derived($chatSummariesStore.get(thread.chatId) as MultiUserChat | undefined);
+    let syncDetails = $derived(
+        chat?.membership?.latestThreads?.find(
+            (t) => t.threadRootMessageIndex === threadRootMessageIndex,
+        ),
+    );
+    let unreadCount = $derived(
+        syncDetails
+            ? client.unreadThreadMessageCount(
+                  thread.chatId,
+                  threadRootMessageIndex,
+                  syncDetails.latestMessageIndex,
+              )
+            : 0,
+    );
+    let chatData = $derived({
+        name: chat?.name,
+        avatarUrl: client.groupAvatarUrl(chat, $selectedCommunitySummaryStore),
+    });
+
+    function markAllRead() {
+        if (chat !== undefined && syncDetails !== undefined) {
+            const context = {
+                chatId: chat.id,
+                threadRootMessageIndex,
+            };
+            messagesRead.markReadUpTo(context, syncDetails?.latestMessageIndex);
+        }
+    }
+
+    onMount(() => {
+        return messagesRead.subscribe(() => {
+            if (syncDetails !== undefined) {
+                unreadCount = client.unreadThreadMessageCount(
+                    thread.chatId,
+                    threadRootMessageIndex,
+                    syncDetails.latestMessageIndex,
+                );
+            }
+        });
+    });
+
+    let grouped = $derived(client.groupBySender(thread.latestReplies));
+
+    function lastMessageIndex(events: EventWrapper<Message>[]): number | undefined {
+        for (let i = events.length - 1; i >= 0; i--) {
+            const evt = events[i].event;
+            if (evt.kind === "message") {
+                return evt.messageIndex;
+            }
+        }
+        return undefined;
+    }
+
+    function isIntersecting() {
+        // if we can see *all* of the unread messages in this thread, then mark it as read.
+        if (unreadCount > 0 && unreadCount < thread.latestReplies.length + 1) {
+            const lastMsgIdx = lastMessageIndex(thread.latestReplies);
+            if (lastMsgIdx !== undefined && chat !== undefined) {
+                client.markThreadRead(chat.id, threadRootMessageIndex, lastMsgIdx);
+            }
+        }
+    }
+
+    function clickedThread() {
+        if (expanded) {
+            selectThread();
+        } else {
+            expanded = true;
+        }
+    }
+
+    function selectThread() {
+        /**
+         * Note that we are deliberately not changing the route here. This is kind of
+         * peaking a thread, rather than loading it.
+         * This *should* make loading the thread faster because we don't load the chat and its
+         * messages *as well*.
+         */
+        client.openThread(thread.chatId, thread.rootMessage, false);
+    }
+
+    function unfollow() {
+        client.followThread(thread.chatId, thread.rootMessage.event, false).then((success) => {
+            if (!success) {
+                toastStore.showFailureToast(i18nKey("unfollowThreadFailed"));
+            }
+        });
+    }
+</script>
+
+{#if chat !== undefined}
+    <Container direction={"vertical"}>
+        <Container
+            background={ColourVars.background1}
+            padding={["lg", "md"]}
+            onClick={clickedThread}
+            mainAxisAlignment={"spaceBetween"}
+            crossAxisAlignment={"center"}
+            gap={"md"}>
+            <div class="avatar">
+                <Avatar url={chatData.avatarUrl} size={"lg"} />
+            </div>
+            <Container width={"fill"} gap={"xxs"} direction={"vertical"}>
+                <Container width={"hug"} gap={"sm"}>
+                    <Title ellipsisTruncate fontWeight={"semi-bold"}>
+                        {(chat.kind === "group_chat" || chat.kind === "channel") && chat.name}
+                    </Title>
+                </Container>
+                <Container gap={"xs"} mainAxisAlignment={"spaceBetween"} crossAxisAlignment={"end"}>
+                    <BodySmall ellipsisTruncate colour={"textSecondary"}>
+                        <Markdown
+                            text={client.getContentAsText($_, thread.rootMessage.event.content)}
+                            oneLine
+                            suppressLinks />
+                    </BodySmall>
+                </Container>
+            </Container>
+            {#if unreadCount > 0}
+                <CountBadge>{unreadCount > 999 ? "999+" : unreadCount}</CountBadge>
+            {/if}
+            <MenuTrigger position={"bottom"} align={"end"}>
+                <IconButton padding={["sm", "xs", "sm", "zero"]} size={"md"}>
+                    {#snippet icon(color)}
+                        <DotsVertical {color} />
+                    {/snippet}
+                </IconButton>
+                {#snippet menuItems()}
+                    <MenuItem onclick={unfollow}>
+                        <Translatable resourceKey={i18nKey("unfollowThread")} />
+                    </MenuItem>
+                    <MenuItem onclick={markAllRead}>
+                        <Translatable resourceKey={i18nKey("Mark all as read")} />
+                    </MenuItem>
+                {/snippet}
+            </MenuTrigger>
+        </Container>
+        {#if expanded}
+            <IntersectionObserverComponent onIntersecting={isIntersecting}>
+                <Container gap={"sm"} padding={"md"} direction={"vertical"}>
+                    <ChatMessage
+                        sender={$allUsersStore.get(thread.rootMessage.event.sender)}
+                        focused={false}
+                        {observer}
+                        accepted
+                        confirmed
+                        failed={false}
+                        senderTyping={false}
+                        readByMe
+                        chatId={thread.chatId}
+                        chatType={chat.kind}
+                        me={thread.rootMessage.event.sender === $currentUserIdStore}
+                        first
+                        last
+                        readonly
+                        threadRootMessage={thread.rootMessage.event}
+                        pinned={false}
+                        supportsEdit={false}
+                        supportsReply={false}
+                        canPin={false}
+                        canBlockUsers={false}
+                        canDelete={false}
+                        canQuoteReply={false}
+                        canReact={false}
+                        canStartThread={false}
+                        publicGroup={chat.kind === "group_chat" && chat.public}
+                        eventIndex={thread.rootMessage.index}
+                        timestamp={thread.rootMessage.timestamp}
+                        expiresAt={thread.rootMessage.expiresAt}
+                        dateFormatter={(date) => client.toDatetimeString(date)}
+                        msg={thread.rootMessage.event}
+                        senderContext={thread.rootMessage.event.senderContext}
+                        disablePan={true} />
+                    {#if missingMessages > 0}
+                        <BodySmall
+                            height={{ size: "2rem" }}
+                            colour={"textSecondary"}
+                            align={"center"}
+                            fontWeight={"bold"}>
+                            <Translatable
+                                resourceKey={i18nKey("thread.moreMessages", {
+                                    number: missingMessages.toString(),
+                                })} />
+                        </BodySmall>
+                    {/if}
+                    {#each grouped as userGroup}
+                        {#each userGroup as evt, i (evt.event.messageId)}
+                            <ChatMessage
+                                sender={$allUsersStore.get(evt.event.sender)}
+                                focused={false}
+                                {observer}
+                                accepted
+                                confirmed
+                                failed={false}
+                                senderTyping={false}
+                                readByMe
+                                chatId={thread.chatId}
+                                chatType={chat.kind}
+                                me={evt.event.sender === $currentUserIdStore}
+                                first={i === 0}
+                                last={i === userGroup.length - 1}
+                                readonly
+                                threadRootMessage={thread.rootMessage.event}
+                                pinned={false}
+                                supportsEdit={false}
+                                supportsReply={false}
+                                canPin={false}
+                                canBlockUsers={false}
+                                canDelete={false}
+                                canQuoteReply={false}
+                                canReact={false}
+                                canStartThread={false}
+                                publicGroup={chat.kind === "group_chat" && chat.public}
+                                eventIndex={evt.index}
+                                timestamp={evt.timestamp}
+                                expiresAt={evt.expiresAt}
+                                dateFormatter={(date) => client.toDatetimeString(date)}
+                                msg={evt.event}
+                                senderContext={evt.event.senderContext}
+                                disablePan={true} />
+                        {/each}
+                    {/each}
+
+                    <Container mainAxisAlignment={"end"}>
+                        <CommonButton mode={"active"} size={"medium"} onClick={selectThread}>
+                            <Translatable resourceKey={i18nKey("View thread")} />
+                        </CommonButton>
+                    </Container>
+                </Container>
+            </IntersectionObserverComponent>
+        {/if}
+    </Container>
+{/if}
+
+<style lang="scss">
+    :global(.threads .link-button) {
+        color: var(--timeline-txt);
+        @include font(book, normal, fs-90);
+        display: block;
+        text-align: right;
+    }
+
+    :global(.threads .card.bordered) {
+        border: none;
+        border-top: 1px solid var(--bd);
+    }
+
+    .separator {
+        padding: $sp2;
+        background-color: var(--timeline-bg);
+        margin: $sp4 auto;
+        text-align: center;
+        color: var(--timeline-txt);
+        @include font(book, normal, fs-90);
+    }
+
+    .unfollow {
+        padding: 0 $sp2;
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/chats/thread/ThreadPreviews.svelte b/frontend/app/src/mobile/features/chats/thread/ThreadPreviews.svelte
new file mode 100644
index 0000000000..7aeb95dcd2
--- /dev/null
+++ b/frontend/app/src/mobile/features/chats/thread/ThreadPreviews.svelte
@@ -0,0 +1,93 @@
+<script lang="ts">
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import { Container } from "component-lib";
+    import {
+        chatListScopeStore,
+        debouncedDerived,
+        emptyCombinedUnreadCounts,
+        numberOfThreadsStore,
+        threadsByChatStore,
+        unreadCommunityChannelCountsStore,
+        unreadDirectAndGroupCountsStore,
+        unreadFavouriteCountsStore,
+        type OpenChat,
+    } from "@client";
+    import { getContext } from "svelte";
+    import FancyLoader from "@src/mobile/ui/icons/FancyLoader.svelte";
+    import VirtualList from "@src/ui/VirtualList.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
+    import ThreadPreviewComponent from "./ThreadPreview.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    let observer: IntersectionObserver = new IntersectionObserver(() => {});
+    let loading = $state(true);
+    let initialised = $state(false);
+    let spinner = $derived(loading && !initialised);
+
+    let threads = $derived.by(
+        debouncedDerived(() => [$threadsByChatStore], loadThreadPreviews, 300, []),
+    );
+
+    let unread = $derived.by(() => {
+        switch ($chatListScopeStore.kind) {
+            case "chats": {
+                return $unreadDirectAndGroupCountsStore.threads;
+            }
+            case "favourite": {
+                return $unreadFavouriteCountsStore.threads;
+            }
+            case "community": {
+                return (
+                    $unreadCommunityChannelCountsStore.get($chatListScopeStore.id) ??
+                    emptyCombinedUnreadCounts()
+                ).threads;
+            }
+            default:
+                return emptyCombinedUnreadCounts().threads;
+        }
+    });
+    let muted = $derived(!unread.mentions && unread.unmuted <= 0);
+    let count = $derived(muted ? unread.muted : unread.unmuted);
+
+    let subtitle = $derived(
+        count > 0
+            ? i18nKey(`Unread messages in ${count} thread(s)`)
+            : i18nKey(`Messages in ${$numberOfThreadsStore} thread(s)`),
+    );
+
+    async function loadThreadPreviews() {
+        loading = true;
+        try {
+            return client.threadPreviews($threadsByChatStore);
+        } catch (_) {
+            toastStore.showFailureToast(i18nKey("thread.previewFailure"));
+            return [];
+        } finally {
+            loading = false;
+        }
+    }
+</script>
+
+<SlidingPageContent title={i18nKey("Threads")} {subtitle}>
+    <Container
+        mainAxisAlignment={spinner ? "center" : undefined}
+        crossAxisAlignment={spinner ? "center" : undefined}
+        supplementalClass={"threads"}
+        width={"fill"}
+        height={"fill"}
+        direction={"vertical"}>
+        {#if loading && !initialised}
+            <FancyLoader size={"3rem"} />
+        {:else}
+            <VirtualList
+                keyFn={(e) => `${e.rootMessage.index}_${e.rootMessage.event.messageId}`}
+                items={threads}>
+                {#snippet children(thread)}
+                    <ThreadPreviewComponent {observer} {thread} />
+                {/snippet}
+            </VirtualList>
+        {/if}
+    </Container>
+</SlidingPageContent>
diff --git a/frontend/app/src/mobile/features/chit/ChitEarned.svelte b/frontend/app/src/mobile/features/chit/ChitEarned.svelte
new file mode 100644
index 0000000000..21ec12cfcc
--- /dev/null
+++ b/frontend/app/src/mobile/features/chit/ChitEarned.svelte
@@ -0,0 +1,221 @@
+<script lang="ts">
+    import { shakeElements } from "@src/utils/shake";
+    import { BodySmall, Column } from "component-lib";
+    import { subscribe, type ChitEvent, type OpenChat } from "@client";
+    import { getContext, onMount } from "svelte";
+    import { Confetti } from "svelte-confetti";
+    import { _ } from "svelte-i18n";
+    import { Spring, Tween } from "svelte/motion";
+    import SpinningToken from "@src/mobile/ui/icons/SpinningToken.svelte";
+
+    const OFF_SCREEN_OPACITY = 0.0;
+    const SHOW_DURATION = 3000;
+    const SLIDE_IN_DURATION = 400;
+    const TWEEN_DURATION = 300;
+    const LONG_DURATION = 10_000;
+
+    const client = getContext<OpenChat>("client");
+    let confetti = $state(false);
+    let dimensions = getDimension();
+    let ypos = new Spring(dimensions.height + 100, { damping: 0.4, stiffness: 0.2 });
+    let opacity = new Tween(OFF_SCREEN_OPACITY, { duration: TWEEN_DURATION });
+    let msg = new Tween({ scale: 0, opacity: 1 }, { duration: TWEEN_DURATION });
+    let left = $state(dimensions.width / 2);
+    let amount = $state(0);
+    let labels: string[] = $state([]);
+    let active = $state(false);
+    let imageUrl = $state("/assets/chit.svg");
+    let maxStreak = $state(false);
+
+    function trigger(events: ChitEvent[]) {
+        maxStreak = false;
+        amount = events.reduce((total, chit) => total + chit.amount, 0);
+        labels = events.reduce((labels, c) => {
+            if (c.reason.kind === "achievement_unlocked") {
+                if (c.reason.type === "streak_365") {
+                    maxStreak = true;
+                    imageUrl = "/assets/max_streak.svg";
+                }
+                labels.push($_(`learnToEarn.${c.reason.type}`));
+            }
+            if (c.reason.kind === "external_achievement_unlocked") {
+                labels.push(c.reason.name);
+            }
+            return labels;
+        }, [] as string[]);
+        const showDuration = maxStreak ? LONG_DURATION : SHOW_DURATION;
+        ypos.target = dimensions.height / 2;
+        opacity.target = 1;
+        active = true;
+        if (maxStreak) {
+            setTimeout(() => {
+                shakeElements(
+                    [
+                        ".message-wrapper",
+                        ".chat-summary",
+                        ".avatar",
+                        "svg",
+                        ".date-label",
+                        ".icon",
+                        ".section-header",
+                        ".message-entry",
+                        ".section-selector",
+                        ".input-wrapper",
+                        ".legend",
+                        ".chat-list",
+                        ".communities .card",
+                    ],
+                    {
+                        duration: showDuration,
+                        maxIntensity: 50,
+                    },
+                );
+            }, 100);
+        }
+        window.setTimeout(() => {
+            confetti = true;
+            msg.target = { scale: 1, opacity: 1 };
+            window.setTimeout(() => {
+                confetti = false;
+                opacity.target = OFF_SCREEN_OPACITY;
+                msg.target = { scale: 0, opacity: 1 };
+                window.setTimeout(reset, TWEEN_DURATION);
+            }, showDuration);
+        }, SLIDE_IN_DURATION);
+
+        // update the backend so we don't get notified again
+        client.markAchievementsSeen();
+    }
+
+    function reset() {
+        dimensions = getDimension();
+        left = dimensions.width / 2;
+        ypos.set(dimensions.height + 100);
+        opacity.set(OFF_SCREEN_OPACITY, { duration: 0 });
+        msg.set({ scale: 0, opacity: 1 }, { duration: 0 });
+        confetti = false;
+        active = false;
+    }
+
+    function getDimension() {
+        return {
+            height: window.innerHeight,
+            width: window.innerWidth,
+        };
+    }
+
+    onMount(() => {
+        // - Useful for testing
+        // trigger([
+        //     {
+        //         amount: 100_000,
+        //         timestamp: BigInt(Date.now()),
+        //         reason: {
+        //             kind: "achievement_unlocked",
+        //             type: "edited_message",
+        //         },
+        //     },
+        // ]);
+        return subscribe("chitEarned", trigger);
+    });
+</script>
+
+<svelte:window on:resize={reset} />
+
+<div class="overlay" class:active>
+    <div
+        class="wrapper"
+        style={`top: ${ypos.current}px; left: ${left}px; opacity: ${opacity.current}`}>
+        {#if confetti}
+            <div class="confetti">
+                <Confetti
+                    amount={100}
+                    x={[-1.5, 1.5]}
+                    y={[-1.5, 1.5]}
+                    size={20}
+                    colorArray={["url(/assets/chit.svg)"]} />
+            </div>
+        {/if}
+        <div class="coin">
+            <SpinningToken
+                spin
+                mirror={false}
+                size={maxStreak ? "extra-large" : "large"}
+                logo={imageUrl} />
+        </div>
+        <div
+            class="details"
+            style={`transform: scale(${msg.current.scale}); opacity: ${msg.current.opacity}`}>
+            <div class="chit">
+                {`+${amount.toLocaleString()} CHIT`}
+            </div>
+            <Column crossAxisAlignment={"center"}>
+                {#each labels as label}
+                    <BodySmall width={"hug"}>{label}</BodySmall>
+                {/each}
+            </Column>
+        </div>
+    </div>
+</div>
+
+<style lang="scss">
+    .wrapper {
+        position: absolute;
+        left: 500px;
+        @include z-index("coin");
+        transform: translate(-50%, -50%);
+        display: flex;
+        flex-direction: column;
+        gap: $sp4;
+        align-items: center;
+        backdrop-filter: blur(10px);
+        background: var(--modal-bg);
+        border: var(--modal-bd);
+        border-radius: var(--modal-rd);
+        box-shadow: var(--modal-sh);
+        width: calc(100% - 80px);
+        padding: $sp6;
+    }
+
+    .confetti {
+        position: absolute;
+        @include z-index("coin");
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    .chit {
+        border-radius: var(--rad-md);
+        background: var(--gradient);
+        color: var(--text-on-primary);
+        width: fit-content;
+        padding: $sp2 $sp3;
+    }
+
+    .details {
+        display: flex;
+        flex-direction: column;
+        gap: $sp3;
+        align-items: center;
+    }
+
+    .overlay {
+        @include z-index("chit");
+        position: fixed;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        overflow: hidden;
+        pointer-events: none;
+        transition: backdrop-filter 300ms ease-in-out;
+
+        &.active {
+            backdrop-filter: saturate(0.3);
+        }
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/home/landing/Architecture.svelte b/frontend/app/src/mobile/features/landing/Architecture.svelte
similarity index 99%
rename from frontend/app/src/components_mobile/home/landing/Architecture.svelte
rename to frontend/app/src/mobile/features/landing/Architecture.svelte
index daeebec28e..4461451270 100644
--- a/frontend/app/src/components_mobile/home/landing/Architecture.svelte
+++ b/frontend/app/src/mobile/features/landing/Architecture.svelte
@@ -10,8 +10,8 @@
         Subtitle,
         Title,
     } from "component-lib";
-    import CollapsibleCard from "../../CollapsibleCard.svelte";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
+    import CollapsibleCard from "./CollapsibleCard.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
     import ArrowLink from "./ArrowLink.svelte";
     import ExternalLink from "./ExternalLink.svelte";
 </script>
diff --git a/frontend/app/src/mobile/features/landing/ArrowLink.svelte b/frontend/app/src/mobile/features/landing/ArrowLink.svelte
new file mode 100644
index 0000000000..bc19bfb297
--- /dev/null
+++ b/frontend/app/src/mobile/features/landing/ArrowLink.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import Arrow from "@src/ui/Arrow.svelte";
+
+    interface Props {
+        url: string;
+        color?: string;
+        target?: string | undefined;
+        children?: Snippet;
+    }
+
+    let { url, color = "#7E52FF", target = undefined, children }: Props = $props();
+</script>
+
+<a class="link" href={url} {target}>
+    {@render children?.()}
+    <div class="arrow">
+        <Arrow {color} />
+    </div>
+</a>
+
+<style lang="scss">
+    a {
+        position: relative;
+        @include font(bold, normal, fs-100);
+        color: inherit;
+        text-decoration: none;
+        display: flex;
+        align-items: center;
+        gap: $sp3;
+        transition: color 250ms ease-in-out;
+        white-space: nowrap;
+
+        .arrow {
+            transition: flex 250ms ease-in-out;
+            flex: 0 0 toRem(16);
+            text-align: end;
+        }
+
+        @media (hover: hover) {
+            &:hover {
+                text-decoration: none;
+                color: var(--landing-txt-light);
+
+                .arrow {
+                    flex: 0 0 toRem(24);
+                }
+            }
+        }
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/landing/CollapsibleCard.svelte b/frontend/app/src/mobile/features/landing/CollapsibleCard.svelte
new file mode 100644
index 0000000000..d94204cf23
--- /dev/null
+++ b/frontend/app/src/mobile/features/landing/CollapsibleCard.svelte
@@ -0,0 +1,128 @@
+<script lang="ts">
+    import { expoInOut } from "svelte/easing";
+    import { slide } from "svelte/transition";
+    import { rtlStore } from "@src/stores/rtl";
+
+    import type { ResourceKey } from "@client";
+    import { type Snippet } from "svelte";
+    import Arrow from "@src/ui/Arrow.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    interface Props {
+        headerText?: ResourceKey | undefined;
+        open?: boolean;
+        first?: boolean;
+        transition?: boolean;
+        fill?: boolean;
+        titleSlot?: Snippet;
+        children?: Snippet;
+        onOpened?: () => void;
+        onClosed?: () => void;
+        onToggle?: () => void;
+    }
+
+    let {
+        headerText = undefined,
+        open = $bindable(true),
+        first = false,
+        transition = true,
+        fill = false,
+        titleSlot,
+        children,
+        onClosed,
+        onOpened,
+        onToggle,
+    }: Props = $props();
+
+    function toggle() {
+        open = !open;
+        onToggle?.();
+        if (open) {
+            onOpened?.();
+        } else {
+            onClosed?.();
+        }
+    }
+</script>
+
+<div class="card" class:first class:open>
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="header" class:open onclick={toggle} class:fill>
+        {#if titleSlot}{@render titleSlot()}{:else if headerText !== undefined}
+            <Translatable resourceKey={headerText} />
+        {/if}
+
+        <div class="arrow" class:rtl={$rtlStore}>
+            <Arrow
+                size={16}
+                rotate={open ? -45 : 45}
+                color={open
+                    ? "var(--collapsible-open-header-arrow)"
+                    : "var(--collapsible-closed-header-txt)"} />
+        </div>
+    </div>
+    {#if transition}
+        {#if open}
+            <div
+                transition:slide|local={{ duration: 200, easing: expoInOut }}
+                class="body"
+                class:open>
+                {@render children?.()}
+            </div>
+        {/if}
+    {:else}
+        <div class="body static" class:open>
+            {@render children?.()}
+        </div>
+    {/if}
+</div>
+
+<style lang="scss">
+    .card {
+        width: 100%;
+        border-bottom: var(--bw) solid var(--bd);
+
+        &.first {
+            border-top: var(--bw) solid var(--bd);
+        }
+    }
+
+    .header {
+        padding: toRem(18) 0;
+        display: flex;
+        cursor: pointer;
+        justify-content: space-between;
+        align-items: center;
+        @include font(bold, normal, fs-100);
+        color: var(--collapsible-closed-header-txt);
+
+        &.open {
+            color: var(--txt);
+        }
+
+        &.fill {
+            padding-left: $sp4;
+            padding-right: $sp4;
+        }
+    }
+
+    .arrow {
+        flex: 0 0 20px;
+        justify-self: flex-end;
+        text-align: right;
+    }
+
+    .body {
+        padding-bottom: $sp3;
+
+        &.static {
+            display: none;
+            pointer-events: none;
+            &.open {
+                pointer-events: all;
+                display: block;
+            }
+        }
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/home/landing/ExternalLink.svelte b/frontend/app/src/mobile/features/landing/ExternalLink.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/landing/ExternalLink.svelte
rename to frontend/app/src/mobile/features/landing/ExternalLink.svelte
diff --git a/frontend/app/src/components_mobile/home/bottom_bar/BottomBar.svelte b/frontend/app/src/mobile/features/nav/BottomBar.svelte
similarity index 99%
rename from frontend/app/src/components_mobile/home/bottom_bar/BottomBar.svelte
rename to frontend/app/src/mobile/features/nav/BottomBar.svelte
index c2daf58561..4213cac0d3 100644
--- a/frontend/app/src/components_mobile/home/bottom_bar/BottomBar.svelte
+++ b/frontend/app/src/mobile/features/nav/BottomBar.svelte
@@ -26,7 +26,7 @@
         unreadFavouriteCountsStore,
         type UnreadCounts,
     } from "@client";
-    import { navigate } from "@utils/navigation";
+    import { navigate } from "@src/utils/navigation";
     import { getContext } from "svelte";
     import AccountGroup from "svelte-material-icons/AccountGroup.svelte";
     import BellOutline from "svelte-material-icons/BellOutline.svelte";
diff --git a/frontend/app/src/components_mobile/home/bottom_bar/BottomBarItem.svelte b/frontend/app/src/mobile/features/nav/BottomBarItem.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/bottom_bar/BottomBarItem.svelte
rename to frontend/app/src/mobile/features/nav/BottomBarItem.svelte
diff --git a/frontend/app/src/mobile/features/onboard/AnonFooter.svelte b/frontend/app/src/mobile/features/onboard/AnonFooter.svelte
new file mode 100644
index 0000000000..6c40554121
--- /dev/null
+++ b/frontend/app/src/mobile/features/onboard/AnonFooter.svelte
@@ -0,0 +1,102 @@
+<script lang="ts">
+    import { i18nKey } from "@src/i18n/i18n";
+    import { Body, ColourVars, Container, transition } from "component-lib";
+    import { publish, routeStore } from "@client";
+    import { navigate } from "@src/utils/navigation";
+    import { type Snippet } from "svelte";
+    import ChevronLeft from "svelte-material-icons/ChevronLeft.svelte";
+    import MulticolourText, { type TextPart } from "@src/mobile/shared/MulticolourText.svelte";
+
+    interface Props {
+        children?: Snippet;
+    }
+
+    let { children }: Props = $props();
+
+    const signInMsg = [
+        {
+            text: i18nKey("Back to "),
+            colour: "textSecondary",
+        },
+        {
+            text: i18nKey("create account "),
+            colour: "primary",
+        },
+        {
+            text: i18nKey("& "),
+            colour: "textSecondary",
+        },
+        {
+            text: i18nKey("sign in"),
+            colour: "primary",
+        },
+    ];
+    const backToExploreMsg = [
+        {
+            text: i18nKey("Back to "),
+            colour: "textSecondary",
+        },
+        {
+            text: i18nKey("Communities explorer"),
+            colour: "primary",
+        },
+    ];
+
+    let msg = $derived.by<TextPart[]>(() => {
+        switch ($routeStore.kind) {
+            case "communities_route":
+                return signInMsg as TextPart[];
+            default:
+                return backToExploreMsg as TextPart[];
+        }
+    });
+
+    function back() {
+        transition(["fade"], () => {
+            publish("closeModalStack");
+            if ($routeStore.kind === "communities_route") {
+                navigate("/");
+            } else {
+                navigate("/communities");
+            }
+        });
+    }
+</script>
+
+<Container
+    gap={"sm"}
+    overflow={"visible"}
+    mainAxisAlignment={children ? "spaceBetween" : "center"}
+    supplementalClass={"anon-footer"}
+    padding={["lg", "lg", "zero", "lg"]}>
+    <Container
+        width={children ? "fill" : "hug"}
+        height={{ size: "3.5rem" }}
+        padding={["md", "xl", "md", "sm"]}
+        gap={"sm"}
+        shadow={"var(--shadow-menu)"}
+        borderRadius={"circle"}
+        mainAxisAlignment={"center"}
+        crossAxisAlignment={"center"}
+        background={ColourVars.background2}
+        onClick={back}>
+        <ChevronLeft size={"1.6rem"} color={ColourVars.textSecondary} />
+        <Body width={"hug"}>
+            <MulticolourText parts={msg}></MulticolourText>
+        </Body>
+    </Container>
+    {@render children?.()}
+</Container>
+
+<style lang="scss">
+    :global {
+        .anon-footer {
+            @include z-index("anon-banner");
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            position: fixed !important;
+            cursor: pointer;
+        }
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/HashLinkTarget.svelte b/frontend/app/src/mobile/features/onboard/HashLinkTarget.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/HashLinkTarget.svelte
rename to frontend/app/src/mobile/features/onboard/HashLinkTarget.svelte
diff --git a/frontend/app/src/mobile/features/onboard/OnboardModal.svelte b/frontend/app/src/mobile/features/onboard/OnboardModal.svelte
new file mode 100644
index 0000000000..5896c22b92
--- /dev/null
+++ b/frontend/app/src/mobile/features/onboard/OnboardModal.svelte
@@ -0,0 +1,374 @@
+<script lang="ts">
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import { VersionChecker } from "@src/utils/version.svelte";
+    import {
+        Body,
+        BodySmall,
+        Button,
+        ColourVars,
+        Column,
+        CommonButton,
+        Container,
+        H1,
+        Overview,
+        Sheet,
+        Subtitle,
+        Title,
+    } from "component-lib";
+    import { OpenChat, type CreatedUser } from "@client";
+    import { ErrorCode } from "@shared";
+    import { navigate } from "@src/utils/navigation";
+    import { getContext, onMount } from "svelte";
+    import { _ } from "svelte-i18n";
+    import ChevronLeft from "svelte-material-icons/ChevronLeft.svelte";
+    import ErrorMessage from "@src/mobile/shared/ErrorMessage.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import Progress from "@src/mobile/shared/Progress.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import SignUp from "./SignUp.svelte";
+
+    const ALC_LENGTH = 6;
+
+    const client = getContext<OpenChat>("client");
+
+    type Step = "choose-auth" | "new-user" | "one-time-password";
+    let step: Step = $state("choose-auth");
+    let accountLinkingCode = $state("");
+    let alcInput: HTMLInputElement | undefined = $state(undefined);
+    let alcValid = $derived(accountLinkingCode.length === 6);
+    let linkingInProgress = $state(false);
+    let error: string | undefined = $state(undefined);
+    let signUpError: string | undefined = $state(undefined);
+    let checker = new VersionChecker();
+
+    let outdated = $derived(checker.versionState.kind !== "up_to_date");
+
+    onMount(() => {
+        document.body.classList.add("onboarding");
+        return () => {
+            document.body.classList.remove("onboarding");
+            checker.stop();
+        };
+    });
+
+    function signIn() {
+        (client.isNativeAndroid()
+            ? client.signInWithAndroidWebAuthn()
+            : client.signInWithWebAuthn()
+        ).catch(async (e) => {
+            if ("AUTH_FAILED" === e) {
+                error = "native.auth.error";
+                console.error("Auth error: ", e);
+            } else {
+                // Passkey either not found, or user cancelled auth request
+                step = "one-time-password";
+            }
+        });
+    }
+
+    function signUp() {
+        step = "new-user";
+    }
+
+    function errorCodeToi18nKey(code: number | string): string {
+        switch (code) {
+            case ErrorCode.AlreadyRegistered:
+                return "alreadyRegistered";
+            case ErrorCode.LinkingCodeNotFound:
+                return "linkingCodeNotFound";
+            case ErrorCode.MaxLinkedIdentitiesLimitReached:
+                return "maxLinkedIdentitiesLimitReached";
+            default:
+                // TODO add error strings for the codes returned by the android code
+                return "string" === typeof code ? code : "default";
+        }
+    }
+
+    function linkAccount() {
+        if (!linkingInProgress && accountLinkingCode.length === ALC_LENGTH) {
+            linkingInProgress = true;
+            error = undefined;
+            client.linkAccountsWithAndroidWebAuthn(accountLinkingCode).catch((err) => {
+                console.error(err);
+                linkingInProgress = false;
+                if (err && "object" === typeof err && "code" in err) {
+                    error = errorCodeToi18nKey(err.code);
+                } else {
+                    error = "default";
+                }
+            });
+        } else {
+            error = "codeInvalid";
+        }
+    }
+
+    function onCreatedUser(user: CreatedUser) {
+        client.onRegisteredUser(user);
+        navigate("/welcome");
+    }
+
+    function explore() {
+        navigate("/communities");
+    }
+</script>
+
+{#snippet backButton()}
+    <Container padding={["zero", "lg"]} direction={"vertical"}>
+        <CommonButton onClick={() => (step = "choose-auth")} mode={"active"} size={"small_text"}>
+            {#snippet icon(color, size)}
+                <ChevronLeft {color} {size} />
+            {/snippet}
+            <Translatable resourceKey={i18nKey("back")} />
+        </CommonButton>
+    </Container>
+{/snippet}
+
+{#if checker.versionState.kind === "out_of_date"}
+    <Sheet>
+        <Column gap={"xl"} padding={"xxl"}>
+            <Overview colour={"primary"}>One second! Updating ...</Overview>
+            <BodySmall width={"hug"} fontWeight={"bold"}>
+                <Translatable
+                    resourceKey={i18nKey(
+                        `We are just downloading a quick update and then we will have you on your way ...`,
+                    )} />
+            </BodySmall>
+
+            <Progress
+                colour={ColourVars.primary}
+                size={"1rem"}
+                percent={checker.versionState.downloadProgress} />
+
+            <Button
+                disabled={checker.versionState.downloadProgress < 100}
+                onClick={() => checker.reload()}
+                secondary>
+                <Translatable resourceKey={i18nKey("Reload and continue")} />
+            </Button>
+        </Column>
+    </Sheet>
+{/if}
+
+{#snippet choosePath()}
+    <Container padding={["zero", "xxl"]} direction={"vertical"}>
+        <H1><Translatable resourceKey={i18nKey("Fully featured.")} /></H1>
+        <H1><Translatable resourceKey={i18nKey("Fully yours.")} /></H1>
+    </Container>
+    <Container gap={"md"} padding={["zero", "xxl"]} direction={"vertical"}>
+        <Button disabled={outdated} onClick={explore} secondary>
+            <Translatable resourceKey={i18nKey("Explore communities")} />
+        </Button>
+        <BodySmall colour={"textSecondary"} align={"center"} width={"hug"} fontWeight={"bold"}>
+            <Translatable
+                resourceKey={i18nKey(
+                    "Preview OpenChat communities without joining. You will need an account to gain access.",
+                )} />
+        </BodySmall>
+    </Container>
+
+    <Container
+        crossAxisAlignment={"center"}
+        mainAxisAlignment={"center"}
+        gap={"md"}
+        padding={["zero", "xxl"]}>
+        <div class="line"></div>
+        <Body colour={"textSecondary"} align={"center"} width={"hug"} fontWeight={"bold"}>
+            <Translatable resourceKey={i18nKey("or join")} />
+        </Body>
+        <div class="line"></div>
+    </Container>
+    <Container
+        crossAxisAlignment={"center"}
+        gap={"md"}
+        padding={["zero", "xxl"]}
+        direction={"vertical"}>
+        <Button disabled={outdated} onClick={signIn}>
+            <Translatable resourceKey={i18nKey("I'm an existing user")} />
+        </Button>
+        <Button disabled={outdated} onClick={signUp} secondary>
+            <Translatable resourceKey={i18nKey("Create new account")} />
+        </Button>
+        <BodySmall colour={"textSecondary"} align={"center"} width={"hug"} fontWeight={"bold"}>
+            <Markdown
+                text={interpolate(
+                    $_,
+                    i18nKey(
+                        "OpenChat uses *Passkeys* to secure accounts.\n Visit [oc.app web](https://oc.app) to found out more.",
+                    ),
+                )}></Markdown>
+        </BodySmall>
+    </Container>
+{/snippet}
+
+{#snippet newUserView()}
+    {@render backButton()}
+
+    <Container padding={["zero", "xxl"]} direction={"vertical"}>
+        <H1><Translatable resourceKey={i18nKey("Create new account")} /></H1>
+        <Title fontWeight={"bold"} colour={"primary"}
+            ><Translatable resourceKey={i18nKey("Welcome aboard!")} /></Title>
+    </Container>
+
+    <Container padding={["zero", "xxl"]} direction={"vertical"}>
+        <Subtitle fontWeight={"bold"} colour={"textSecondary"}>
+            <Translatable
+                resourceKey={i18nKey(
+                    "We're really glad you're here. You're joining a safe, private space built and shaped by its community.",
+                )} />
+        </Subtitle>
+    </Container>
+
+    <Container padding={["zero", "lg"]} direction={"vertical"}>
+        <SignUp {onCreatedUser} bind:error={signUpError} />
+    </Container>
+{/snippet}
+
+{#snippet existingUserView()}
+    {@render backButton()}
+
+    <Container padding={["zero", "xxl"]} direction={"vertical"}>
+        <H1><Translatable resourceKey={i18nKey("Existing user")} /></H1>
+        <Title fontWeight={"bold"} colour={"primary"}
+            ><Translatable resourceKey={i18nKey("Welcome back!")} /></Title>
+    </Container>
+
+    <Container gap={"sm"} padding={["zero", "xxl"]} direction={"vertical"}>
+        <Subtitle fontWeight={"bold"} colour={"textSecondary"}>
+            <Translatable
+                resourceKey={i18nKey(
+                    "Let's reconnect your account so you can continue exactly where you left off.",
+                )} />
+        </Subtitle>
+        <BodySmall colour={"textTertiary"}>
+            <Translatable
+                resourceKey={i18nKey(
+                    "If you expected to use an existing passkey, it may not be available on this device at the moment.",
+                )} />
+        </BodySmall>
+    </Container>
+
+    <Container padding={["zero", "xxl"]} direction={"vertical"}>
+        <div class="alc-container">
+            <input
+                class="alc-input"
+                bind:value={accountLinkingCode}
+                bind:this={alcInput}
+                type="text"
+                maxlength="6"
+                pattern="[a-zA-Z0-9]{6}" />
+            <!-- svelte-ignore a11y_click_events_have_key_events -->
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <div class="alc" onclick={() => alcInput?.focus()}>
+                {#each [...Array(6).keys()] as key}
+                    <div class="char {key === accountLinkingCode.length ? 'current' : ''}">
+                        <span class="value">{accountLinkingCode[key] || ""}</span>
+                    </div>
+                {/each}
+            </div>
+        </div>
+        <Container direction={"vertical"} gap={"xxl"}>
+            <BodySmall width={"hug"} align={"center"} colour={"textSecondary"}>
+                <Translatable resourceKey={i18nKey("native.auth.linkAccount.note")} />
+            </BodySmall>
+            <Button
+                loading={linkingInProgress}
+                disabled={linkingInProgress || !alcValid}
+                onClick={linkAccount}>
+                <Translatable resourceKey={i18nKey("Link with existing account")} />
+            </Button>
+        </Container>
+    </Container>
+{/snippet}
+
+<Container supplementalClass="login_screen" gap={"xl"} direction={"vertical"}>
+    <Container
+        supplementalClass={"login_mockup"}
+        height={{ size: step === "choose-auth" ? "23rem" : "11rem" }}
+        backgroundImage={"/assets/login_mockup.svg"}>
+        <span></span>
+    </Container>
+    {#if step === "choose-auth"}
+        {@render choosePath()}
+    {:else if step === "new-user"}
+        {@render newUserView()}
+    {:else if step === "one-time-password"}
+        {@render existingUserView()}
+    {/if}
+    {#if error !== undefined}
+        <Container gap={"md"} padding={["zero", "xxl"]} direction={"vertical"}>
+            <ErrorMessage>
+                <Translatable resourceKey={i18nKey(error)} />
+            </ErrorMessage>
+        </Container>
+    {/if}
+</Container>
+
+<style lang="scss">
+    :global(.container.login_mockup) {
+        background-position: bottom !important;
+    }
+
+    :global(.login_screen) {
+        // Allows the login screen buttons to appear above the phone's nav
+        padding-bottom: 6rem !important;
+    }
+
+    .line {
+        height: 6px;
+        width: 100%;
+        border-radius: var(--rad-xl);
+        background-color: var(--background-2);
+    }
+
+    .alc-container {
+        width: 100%;
+        .alc {
+            display: flex;
+            padding: var(--sp-xxl) 0 var(--sp-sm) 0;
+            gap: $sp4;
+            justify-content: center;
+
+            .char {
+                display: flex;
+                flex: 1;
+                height: 7rem;
+                justify-content: end;
+                flex-direction: column;
+                align-items: center;
+                @include font(light, normal, fs-220);
+                position: relative;
+                overflow: hidden;
+
+                &:after {
+                    content: "";
+                    display: block;
+                    width: 100%;
+                    height: 0.25rem;
+                    border-radius: $sp2;
+                    background-color: var(--primary);
+                }
+            }
+        }
+
+        .alc-input {
+            height: 0;
+            padding: 0;
+            border: none;
+            position: absolute;
+            left: -2000px;
+            &:focus + .alc > .char.current {
+                &:before {
+                    content: "";
+                    display: block;
+                    width: 1rem;
+                    height: 1rem;
+                    background-color: var(--primary);
+                    position: absolute;
+                    top: -0.75rem;
+                    left: 50%;
+                    transform: translateX(-50%) rotate(45deg);
+                }
+            }
+        }
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/onboard/SignUp.svelte b/frontend/app/src/mobile/features/onboard/SignUp.svelte
new file mode 100644
index 0000000000..78a80e35f5
--- /dev/null
+++ b/frontend/app/src/mobile/features/onboard/SignUp.svelte
@@ -0,0 +1,250 @@
+<script lang="ts">
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import { createLocalStorageStore } from "@src/utils/store";
+    import {
+        BodySmall,
+        Button,
+        Column,
+        Container,
+        Form,
+        Input,
+        Sheet,
+        StatusCard,
+        Subtitle,
+        Switch,
+    } from "component-lib";
+    import EmailValidator from "email-validator";
+    import type { CreatedUser, OpenChat, UserOrUserGroup, UserSummary } from "@client";
+    import { AuthProvider, identityStateStore, selectedAuthProviderStore } from "@client";
+    import { getContext, onMount } from "svelte";
+    import { _ } from "svelte-i18n";
+    import ErrorMessage from "@src/mobile/shared/ErrorMessage.svelte";
+    import FindUser from "@src/mobile/shared/FindUser.svelte";
+    import TermsContent from "./TermsContent.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import UsernameInput from "@src/mobile/shared/UsernameInput.svelte";
+    import UserPill from "./UserPill.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        onCreatedUser: (user: CreatedUser) => void;
+        error: string | undefined;
+    }
+
+    let { error = $bindable(), onCreatedUser }: Props = $props();
+
+    let showGuidelines = $state(false);
+    let username = $state("");
+    let usernameValid = $state(false);
+    let usernameStore = createLocalStorageStore("openchat_candidate_username", "");
+    let checkingUsername: boolean = $state(false);
+    let email = $state("");
+    let emailValid = $derived(email.length === 0 || EmailValidator.validate(email));
+    let busy = $state(false);
+    let badCode = $state(false);
+    let referringUser: UserSummary | undefined = $state(undefined);
+    let createdUser: CreatedUser | undefined = undefined;
+    let passkeyCreated = $state(false);
+    let termsAccepted = $state(false);
+
+    function onShowGuidelines() {
+        showGuidelines = true;
+        client.gaTrack("show_guidelines_clicked", "registration");
+    }
+    function onCloseGuidelines() {
+        showGuidelines = false;
+    }
+
+    async function register(e: Event) {
+        e.preventDefault();
+        if (usernameValid && emailValid) {
+            usernameStore.set(username);
+            try {
+                busy = true;
+                selectedAuthProviderStore.set(AuthProvider.PASSKEY);
+
+                // if we are already in the registering state it means that we are somehow
+                // already signed in, but there is no user. In that case, skip the webauthn
+                // and just call registerUser
+                if ($identityStateStore.kind !== "registering") {
+                    if (!passkeyCreated) {
+                        if (client.isNativeAndroid()) {
+                            await client.signUpWithAndroidWebAuthn(true, username);
+                        } else {
+                            await client.signUpWithWebAuthn(true, username);
+                        }
+                    }
+                }
+                passkeyCreated = true;
+                await registerUser(username, email.length > 0 ? email : undefined);
+            } catch (err) {
+                error = `Error registering user: ${JSON.stringify(err)}`;
+            } finally {
+                busy = false;
+            }
+        }
+    }
+
+    async function registerUser(username: string, email: string | undefined) {
+        await client.registerUser(username, email).then((resp) => {
+            badCode = false;
+            if (resp.kind === "username_taken") {
+                error = "register.usernameTaken";
+            } else if (resp.kind === "username_too_short") {
+                error = "register.usernameTooShort";
+            } else if (resp.kind === "username_too_long") {
+                error = "register.usernameTooLong";
+            } else if (resp.kind === "username_invalid") {
+                error = "register.usernameInvalid";
+            } else if (resp.kind === "email_invalid") {
+                error = "register.emailInvalid";
+            } else if (resp.kind === "user_limit_reached") {
+                error = "register.userLimitReached";
+            } else if (resp.kind === "internal_error") {
+                error = "unexpectedError";
+            } else if (resp.kind === "referral_code_invalid") {
+                error = "register.referralCodeInvalid";
+                badCode = true;
+            } else if (resp.kind === "referral_code_already_claimed") {
+                error = "register.referralCodeAlreadyClaimed";
+                badCode = true;
+            } else if (resp.kind === "referral_code_expired") {
+                error = "register.referralCodeExpired";
+                badCode = true;
+            } else if (resp.kind === "success") {
+                // error = undefined;
+                createdUser = {
+                    kind: "created_user",
+                    username,
+                    dateCreated: BigInt(Date.now()),
+                    displayName: undefined,
+                    cryptoAccount: resp.icpAccount,
+                    userId: resp.userId,
+                    isPlatformModerator: false,
+                    isPlatformOperator: false,
+                    suspensionDetails: undefined,
+                    isSuspectedBot: false,
+                    diamondStatus: { kind: "inactive" },
+                    moderationFlagsEnabled: 0,
+                    updated: 0n,
+                    isBot: false,
+                    isUniquePerson: false,
+                    totalChitEarned: 0,
+                    chitBalance: 0,
+                    streak: 0,
+                    maxStreak: 0,
+                    hideOnlineStatus: false,
+                };
+                onCreatedUser(createdUser);
+                busy = false;
+                usernameStore.set("");
+            } else {
+                error = `Unexpected register user response: ${resp.kind}`;
+            }
+        });
+    }
+
+    function deleteUser(_: UserOrUserGroup) {
+        referringUser = undefined;
+        client.clearReferralCode();
+    }
+
+    function selectUser(user: UserSummary) {
+        referringUser = user;
+        client.setReferralCode(user.userId);
+    }
+
+    function userLookup(searchTerm: string): Promise<[UserSummary[], UserSummary[]]> {
+        return client.searchUsers(searchTerm, 20).then((res) => [[], res]);
+    }
+
+    // function clearCodeAndLogout() {
+    //     client.clearReferralCode();
+    //     client.logout();
+    // }
+
+    onMount(async () => {
+        referringUser = await client.getReferringUser();
+    });
+</script>
+
+{#if showGuidelines}
+    <Sheet onDismiss={onCloseGuidelines}>
+        <Container gap={"lg"} direction={"vertical"} padding={"xl"}>
+            <Subtitle>OpenChat Terms</Subtitle>
+            <TermsContent />
+            <Button onClick={onCloseGuidelines}>
+                <Translatable resourceKey={i18nKey("register.agree")} />
+            </Button>
+        </Container>
+    </Sheet>
+{/if}
+
+<Container padding={["md", "zero", "xxl", "zero"]}>
+    {#if badCode}
+        <StatusCard
+            mode={"warning"}
+            title={interpolate($_, i18nKey("register.doYouWantToProceed"))}>
+            {#snippet body()}
+                <Translatable resourceKey={i18nKey("register.doYouWantToProceed")} />
+            {/snippet}
+        </StatusCard>
+    {:else}
+        <Form onSubmit={register}>
+            <Container gap={"xl"} direction={"vertical"}>
+                <UsernameInput
+                    {client}
+                    disabled={busy}
+                    originalUsername={$usernameStore ?? ""}
+                    bind:username
+                    bind:usernameValid
+                    bind:errorMsg={error} />
+
+                <Input
+                    error={!emailValid}
+                    disabled={busy}
+                    placeholder={interpolate($_, i18nKey("register.emailPlaceholder"))}
+                    bind:value={email}
+                    minlength={0}
+                    maxlength={254}>
+                    {#snippet subtext()}
+                        <Translatable resourceKey={i18nKey("register.emailRules")} />
+                    {/snippet}
+                </Input>
+
+                {#if referringUser !== undefined}
+                    <Column padding={["zero", "md"]}>
+                        <UserPill onDeleteUser={deleteUser} userOrGroup={referringUser} />
+                    </Column>
+                {:else}
+                    <FindUser
+                        placeholderKey={"register.findReferrer"}
+                        {userLookup}
+                        onSelectUser={selectUser} />
+                {/if}
+
+                {#if error !== undefined}
+                    <ErrorMessage><Translatable resourceKey={i18nKey(error)} /></ErrorMessage>
+                {/if}
+            </Container>
+        </Form>
+    {/if}
+</Container>
+
+<Container direction={"vertical"} gap={"lg"} padding={["zero", "md"]}>
+    <Container onClick={onShowGuidelines}>
+        <Switch reverse bind:checked={termsAccepted}>
+            <BodySmall onClick={onShowGuidelines}>
+                <Translatable resourceKey={i18nKey("I agree to the OpenChat terms & conditions")} />
+            </BodySmall>
+        </Switch>
+    </Container>
+    <Button
+        width={"fill"}
+        disabled={!termsAccepted || !usernameValid || !emailValid || busy}
+        loading={checkingUsername || busy}
+        onClick={register}>
+        <Translatable resourceKey={i18nKey("Start my journey")} />
+    </Button>
+</Container>
diff --git a/frontend/app/src/mobile/features/onboard/TermsContent.svelte b/frontend/app/src/mobile/features/onboard/TermsContent.svelte
new file mode 100644
index 0000000000..087b28b700
--- /dev/null
+++ b/frontend/app/src/mobile/features/onboard/TermsContent.svelte
@@ -0,0 +1,2122 @@
+<script lang="ts">
+    import { locationStore, OpenChat } from "@client";
+    import { getContext } from "svelte";
+    import { copyToClipboard } from "@src/utils/urls";
+    import HashLinkTarget from "./HashLinkTarget.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    function onCopyUrl(e: Event, section: string): void {
+        e.stopPropagation();
+        copyToClipboard(`${client.canonicalOrigin()}${$locationStore}?section=${section}`);
+    }
+</script>
+
+<div class="preamble">
+    <p>
+        IT IS IMPORTANT YOU READ THESE TERMS CAREFULLY BEFORE USING THE OPENCHAT PLATFORM OR
+        OTHERWISE USING OUR SERVICES. BY USING THE OPENCHAT PLATFORM OR OTHERWISE USING OUR
+        SERVICES, YOU INDICATE THAT YOU ACCEPT THESE TERMS AND AGREE TO COMPLY WITH THEM. IF YOU USE
+        THE OPENCHAT PLATFORM OR OTHERWISE USE OUR SERVICES IN THE COURSE OF YOUR BUSINESS OR WORK,
+        YOU ARE ALSO AGREEING TO THESE TERMS ON BEHALF OF THAT BUSINESS. IF YOU DO NOT AGREE TO
+        THESE TERMS, YOU MUST NOT USE THE OPENCHAT PLATFORM OR OTHERWISE USE OUR SERVICES.
+    </p>
+
+    <p>
+        YOU SHOULD CAREFULLY CONSIDER WHETHER USING THE OPENCHAT PLATFORM OR OTHERWISE DEALING IN
+        CRYPTOASSETS IS SUITABLE FOR YOU IN LIGHT OF YOUR OWN SITUATION AND ATTITUDE TO RISK, AS
+        EVALUATED BY YOU CAREFULLY. WE DO NOT MAKE ANY REPRESENTATIONS OR RECOMMENDATIONS REGARDING
+        THE ADVISABILITY OR OTHERWISE OF USING THE OPENCHAT PLATFORM OR OTHERWISE USING OUR SERVICES
+        OR DEALING IN CRYPTOASSETS. IF YOU ARE UNSURE AS TO WHETHER USING THE OPENCHAT PLATFORM,
+        USING OUR SERVICES OR OTHERWISE DEALING IN CRYPTOASSETS IS SUITABLE FOR YOU, YOU SHOULD SEEK
+        INDEPENDENT PROFESSIONAL ADVICE PRIOR TO USING THE OPENCHAT PLATFORM, USING OUR SERVICES OR
+        OTHERWISE DEALING IN CRYPTOASSETS. DEALING IN CRYPTOASSETS MAY NOT BE SUBJECT TO ANY
+        INVESTOR PROTECTION, AND MAY INVOLVE A HIGH DEGREE OF RISK TO YOUR CAPITAL.
+    </p>
+</div>
+
+<div class="section">
+    <HashLinkTarget {onCopyUrl} id="1">
+        <h2>Section A: General terms applicable to all services</h2>
+    </HashLinkTarget>
+
+    <ul class="custom_list bold" style={"--prefix: 'A'; --suffix: ''"}>
+        <li>
+            <h3>Introduction</h3>
+
+            <ul class="custom_list" style={"--prefix: '1.'"}>
+                <li>
+                    We are OpenChat DAO. In these Terms, we refer to ourselves as "<strong
+                        >OpenChat</strong
+                    >", “<strong>we</strong>”, “<strong>us</strong>”, or “<strong>our</strong>”. We
+                    operate the OpenChat Platform which enables users of the OpenChat Platform (“<strong
+                        >you</strong
+                    >”, “<strong>your</strong>”) to access and benefit from our Services.
+                </li>
+                <li>
+                    These terms and conditions and each of the documents we refer to in them (all
+                    together, the “<strong>Terms</strong>”) form the relationship between us and you
+                    in relation to your use of the OpenChat Platform and our Services provided under
+                    these Terms (our “<strong>Services</strong>”). Our Terms apply when using
+                    specific Services as follows:
+
+                    <ul class="custom_list" style={"--prefix: '1.2.'"}>
+                        <li>Section A: General terms applicable to all Services</li>
+                        <li>Section B: Additional terms for messaging on the OpenChat Platform</li>
+                        <li>Section C: Additional terms for using the OpenChat Wallet</li>
+                        <li>Section D: Additional terms applicable to Swaps</li>
+                        <li>Section E: Additional terms for dealing in CHAT</li>
+                        <li>Section F: Additional terms for Diamond Membership holders</li>
+                        <li>Section G: Participating in the OpenChat DAO</li>
+                        <li>Schedule 1: Risks relating to Cryptoassets</li>
+                        <li>Schedule 2: Content Standards</li>
+                        <li>Schedule 3: CHAT Features</li>
+                        <li>Schedule 4: Multiple accounts</li>
+                    </ul>
+                </li>
+                <li>
+                    By using the OpenChat platform, you confirm that you accept these Terms and that
+                    you agree to comply with them. If you do not agree to these Terms, you must not
+                    use the OpenChat Platform or our Services.
+                </li>
+                <li>
+                    <h3>Interpretation</h3>
+                    <p>
+                        In these Terms, the following words and expressions have the following
+                        meanings:
+                    </p>
+                    <div class="interpretation">
+                        <div>"Applicable Law"</div>
+                        <div>
+                            all applicable statutes, laws, enactments, orders, regulations,
+                            regulatory rules, official guidance, standards, regulator expectations
+                            and other similar instruments in any relevant jurisdiction, as in force
+                            and amended from time to time;
+                        </div>
+                        <div>"Channel"</div>
+                        <div>
+                            refers to chats within Communities, to make clear that they are part of
+                            a Community;
+                        </div>
+                        <div>"CHAT"</div>
+                        <div>
+                            refers to the token used to facilitate the governance of OpenChat, with
+                            the features set out at Schedule 3;
+                        </div>
+                        <div>"Community", "Communities"</div>
+                        <div>
+                            refers to a group of Channels users can communicate within. This is
+                            distinct from the concept of a Group, as in a Group involves users
+                            messaging within a single channel (and Communities and Groups are a
+                            distinct forms of communication within the OpenChat Platform);
+                        </div>
+                        <div>"Content Standards"</div>
+                        <div>
+                            means the standards that apply to all Contributions, as set out at
+                            Schedule 2;
+                        </div>
+                        <div>"Contribution"</div>
+                        <div>
+                            refers to any material which you contribute to the OpenChat Platform,
+                            including any communication you make via our Services;
+                        </div>
+                        <div>"Cryptoassets"</div>
+                        <div>
+                            refers to CHAT as well as any and all other cryptoassets that are
+                            supported by the OpenChat Platform, a list of which are available in
+                            your OpenChat Wallet;
+                        </div>
+                        <div>"Diamond Membership"</div>
+                        <div>
+                            refers to our subscription service that gives members access to
+                            exclusive benefits;
+                        </div>
+                        <div>"Exchange Swap"</div>
+                        <div>has the meaning set out at clause D 1.2.1;</div>
+                        <div>"Gated"</div>
+                        <div>
+                            refers to the restrictions or rules that the owner of a Group,
+                            Community, or Channel may impose on users' ability to access or use that
+                            Group, Community, or Channel;
+                        </div>
+                        <div>"Governance Matters"</div>
+                        <div>
+                            refers to matters which relate to the operation or governance of the
+                            OpenChat DAO;
+                        </div>
+                        <div>"Group"</div>
+                        <div>
+                            refers to a channel in which a group of users can communicate. This is
+                            distinct from the concept of a Community, as a Community involves users
+                            messaging within a set of channels (and Communities and Groups are a
+                            distinct forms of communication within the OpenChat Platform);
+                        </div>
+                        <div>"Manifest Error"</div>
+                        <div>
+                            refers to the purported price of a Cryptoasset that differs so
+                            significantly from that reported by exchanges generally that it is
+                            clearly inaccurate due to, for example, a computer error;
+                        </div>
+                        <div>"OpenChat Platform"</div>
+                        <div>
+                            refers to the platform we provide, available at <a
+                                href="https://oc.app/">https://oc.app</a
+                            >;
+                        </div>
+                        <div>"OpenChat Wallet"</div>
+                        <div>
+                            refers to the digital wallet we provide, in which you can store your
+                            Cryptoassets;
+                        </div>
+                        <div>"P2P Swap"</div>
+                        <div>has the meaning set out at clause D 1.2.2;</div>
+                        <div>"Prize Messages"</div>
+                        <div>
+                            refers to messages containing Cryptoassets which are distributed to
+                            OpenChat users, who, upon receipt of the message, can potentially be
+                            gifted Cryptoassets;
+                        </div>
+                        <div>"Source Cryptoasset"</div>
+                        <div>
+                            refers to the Cryptoasset you wish to exchange to obtain the Target
+                            Cryptoasset;
+                        </div>
+                        <div>"Swap(s)"</div>
+                        <div>
+                            refers to either or both an Exchange Swap and / or a P2P Swap (as
+                            relevant);
+                        </div>
+                        <div>"Swap Offer"</div>
+                        <div>has the meaning set out at clause D 1.6;</div>
+                        <div>"Target Cryptoasset"</div>
+                        <div>
+                            refers to the Cryptoasset you wish to acquire in exchange for the Source
+                            Cryptoasset;
+                        </div>
+                        <div>"Virus"</div>
+                        <div>
+                            means any software, thing or device which contains any malicious code,
+                            file, program, or other internal component which may prevent, impair or
+                            otherwise adversely affect the operation of any computer software,
+                            hardware or network; or which may prevent, impair or otherwise adversely
+                            affect access to or the operation of any programme or data, including
+                            the reliability of any programme or data (whether by re-arranging,
+                            altering or erasing the programme or data in whole or part or
+                            otherwise); or adversely affect the user experience, including worms,
+                            trojan horses, viruses, time bombs and other similar things or devices;
+                        </div>
+                        <div>"Voting Platform"</div>
+                        <div>
+                            refers to the mechanism by which CHAT holders may submit votes as
+                            prescribed from time to time; and
+                        </div>
+                        <div>"Vulnerability"</div>
+                        <div>
+                            means a weakness, glitch or bug in the computational logic (for example,
+                            code) found in software and hardware components that, when exploited,
+                            results in a negative impact to confidentiality, integrity, or
+                            availability.
+                        </div>
+                    </div>
+                </li>
+                <li>
+                    Where the words "<strong>includes</strong>", "<strong>including</strong>", "<strong
+                        >for example</strong
+                    >" or "<strong>such as</strong>" are used in these Terms, they are deemed to
+                    have the words "<strong>without limitation</strong>" following them.
+                </li>
+                <li>
+                    A reference to “<strong>writing</strong>” or “<strong>written</strong>” includes
+                    email but not faxes. Any reference to "<strong>written consent</strong>" shall
+                    mean specific explicit consent.
+                </li>
+                <li>
+                    References to “<strong>dealing in</strong>” or “<strong>deal in</strong>” are
+                    references to any participation in Cryptoassets including buying, acquiring,
+                    accepting, holding, selling, staking, disposing of and / or otherwise making use
+                    of Cryptoassets. References to “<strong>transaction”</strong> or “<strong
+                        >transactions</strong
+                    >” are references to any activity involving a person disposing, acquiring, or
+                    otherwise transferring a Cryptoasset to another person (be that by a Swap, a
+                    chat message, or any other means).
+                </li>
+                <li>
+                    The headings of the clauses and schedules of these Terms are for convenience
+                    only and shall not affect its construction or interpretation. The schedules form
+                    part of these Terms and any reference in these Terms to a clause or schedule is
+                    a reference to a clause or schedule of these Terms.
+                </li>
+                <li>
+                    A reference to these Terms or to any other agreement or document referred to in
+                    these Terms is a reference to these Terms or such other document or agreement as
+                    amended or varied in accordance with its terms from time to time.
+                </li>
+                <li>
+                    A reference to a statute, statutory provision or subordinate legislation is a
+                    reference to it as it is in force from time to time, and includes any statute,
+                    statutory provision or subordinate legislation which it amends or re-enacts and
+                    subordinate legislation for the time being in force made under it.
+                </li>
+                <li>
+                    Unless the context otherwise requires, words in the singular shall include the
+                    plural and the plural shall include the singular, and a reference to one gender
+                    shall include a reference to the other genders.
+                </li>
+            </ul>
+        </li>
+        <li>
+            <h3>Contact Details</h3>
+
+            <ul class="custom_list" style={"--prefix: '2.'"}>
+                <li>
+                    If you have any queries, you can contact us via the help channel in the OpenChat
+                    Community, accessible via the OpenChat Platform.
+                </li>
+                <li>
+                    Communications between us shall be in English. Should we receive a communication
+                    which purports to be from you, we are entitled, but are not obliged, to rely on
+                    and conclusively presume that such communication has been given by you. We may
+                    record and monitor conversations we have with you.
+                </li>
+                <li>
+                    You must keep your information with us up to date, as any communication we send
+                    using the details you provide us will be deemed received by you, regardless of
+                    whether or not you actually receive it.
+                </li>
+                <li>
+                    You accept that we are deemed to have received any correspondence only at the
+                    time we actually access it. You accept that there may be a delay in responding
+                    to correspondence received.
+                </li>
+            </ul>
+        </li>
+        <li>
+            <h3>Setting up and securing your OpenChat account</h3>
+
+            <ul class="custom_list" style={"--prefix: '3.'"}>
+                <li>
+                    Before you can use our Services, you need to set up an account and provide
+                    certain information. You can do this via our Platform.
+                </li>
+                <li>
+                    To set up an account, our Platform will ask you to authenticate your identity
+                    via a third party identity provider. By authenticating your identity, you agree
+                    to the terms of the third party identity provider.
+                </li>
+                <li>
+                    As part of setting up your account, you may be provided with or asked to create
+                    security details. You must keep your security details secure and not disclose
+                    them to anyone else. Any action or instruction by anyone using your security
+                    details will be treated as if such action or instruction had been made by you,
+                    and we are not responsible for any loss as a result. You should contact us
+                    immediately upon discovering any unauthorised use of your security details.
+                </li>
+                <li>
+                    <strong
+                        >We strongly recommend logging out of the OpenChat Platform at the end of
+                        every session you have on the OpenChat Platform, as otherwise the OpenChat
+                        Platform may not prompt the next user of the device used to access the
+                        OpenChat Platform to enter credentials in order to use the OpenChat
+                        Platform. If you do not log out of the OpenChat Platform at the end of each
+                        session, there is a risk that another person may impersonate you, for
+                        example to send Contributions or to access your Cryptoassets without your
+                        knowledge or consent. We are not responsible for any losses as a consequence
+                        of your failure to log out at the end of a session or your credentials
+                        otherwise being compromised.
+                    </strong>
+                </li>
+            </ul>
+        </li>
+
+        <li>
+            <h3>Eligibility to use our services</h3>
+
+            <ul class="custom_list" style={"--prefix: '4.'"}>
+                <li>
+                    <p>
+                        By using the OpenChat Platform, you confirm and represent at all times that:
+                    </p>
+
+                    <ul class="custom_list" style={"--prefix: '4.1.'"}>
+                        <li>
+                            (if you are a body corporate) you are duly organised and validly
+                            existing under the laws of the jurisdiction of your domicile, and have
+                            full power, authority and right, and have taken all action required, to
+                            bind yourself to these Terms, including as regards performing all
+                            actions and obligations under these Terms, which therefore constitute
+                            valid and legally binding obligations;
+                        </li>
+                        <li>
+                            (if you are an individual) you are of legal age and competency to agree
+                            to these Terms and all related obligations, including as regards any
+                            age, residency, legal capacity, competency and all other requirements;
+                        </li>
+                        <li>
+                            you are not a citizen or resident of, or a legal entity in any country
+                            or territory which appears on the sanctions lists of the Office of
+                            Foreign Assets Control of the U.S. Department of Treasury (“<strong
+                                >OFAC</strong
+                            >”), United Nations Security Council (“<strong>UNSC</strong>”), Her
+                            Majesty’s Treasury (“<strong>HMT</strong>”) or any other relevant
+                            sanctions list;
+                        </li>
+                        <li>
+                            (if using our Services to deal in Cryptoassets) you are not a citizen or
+                            resident of, or a legal entity in any country that prohibits dealing in
+                            Cryptoassets or which would otherwise require us to have a licence,
+                            permission, registration or authorisation which we do not have;
+                        </li>
+                        <li>
+                            (if using our Services to send Contributions) you shall not make a
+                            Contribution that is prohibited in the country where you are a citizen
+                            or resident, or registered as a legal entity.
+                        </li>
+                        <li>
+                            you will comply with any Applicable Law relevant to you, including not
+                            committing, causing, facilitating or contributing to the commission by
+                            any person of any bribery, corruption or tax evasion offence;
+                        </li>
+                        <li>
+                            you shall not deal in Cryptoassets where this would require you or us to
+                            obtain any registration, approval, authorisation or similar which you /
+                            we do not have, or in any other circumstances in which your dealing in
+                            Cryptoassets is prohibited;
+                        </li>
+                        <li>
+                            in using the OpenChat Platform you do not breach the rights of any third
+                            party, including any intellectual property or data privacy rights of any
+                            third party;
+                        </li>
+                        <li>
+                            you have not received any advice from us in relation to the using the
+                            Openchat Platform or our Services or dealing in CHAT, and you are solely
+                            responsible for any evaluations, decisions and actions taken in
+                            connection with such;
+                        </li>
+                        <li>
+                            you will provide us with whatever information we may request for the
+                            purposes of satisfying our regulatory, compliance and contractual
+                            obligations;
+                        </li>
+                        <li>
+                            you will deal with us in any open and honest way, including as regards
+                            providing us with full, complete and accurate information when
+                            responding to our reasonable requests;
+                        </li>
+                        <li>
+                            you waive any right you may have to participate in a class action
+                            lawsuit or a class-wide arbitration against us and / or any person
+                            involved with us that arises out of or relates to CHAT or these Terms;
+                        </li>
+                        <li>
+                            you will not attempt to circumvent the security of or interfere with the
+                            proper working of the OpenChat Platform, CHAT or any server on which
+                            they are hosted, nor otherwise introduce, nor permit the introduction
+                            of, any Virus or Vulnerability into the OpenChat Platform, CHAT nor any
+                            of our systems; and
+                        </li>
+                        <li>
+                            you will not use (or assist others in using) our Services or CHAT in
+                            ways that are unlawful, misleading, harmful, discriminatory or
+                            fraudulent.
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    In using the OpenChat Platform and our Services you are responsible for all
+                    activity that occurs under your OpenChat account and via any device connected
+                    with/to your OpenChat account.
+                </li>
+                <li>
+                    You shall notify us via the help channel in the OpenChat Community (accessible
+                    via the OpenChat Platform) immediately if you become aware you have breached, or
+                    may have breached, any of your obligations under these Terms.
+                </li>
+                <li>
+                    You may not create multiple accounts on the OpenChat Platform according to
+                    Schedule 4;
+                </li>
+            </ul>
+        </li>
+
+        <li>
+            <h3>Availability</h3>
+
+            <ul class="custom_list" style={"--prefix: '5.'"}>
+                <li>
+                    Whilst we strive to make our Services and the OpenChat Platform available for
+                    all users all the time, we do not guarantee that our Services or the OpenChat
+                    Platform will be available without interruption, and there may be unavailability
+                    for reasons such as maintenance, repairs, upgrades, or failures of network or
+                    equipment.
+                </li>
+                <li>
+                    We shall not be responsible for any loss from or arising out of Service
+                    interruptions, delays in processing transactions or inability to execute
+                    transactions.
+                </li>
+            </ul>
+        </li>
+
+        <li>
+            <h3>General obligations when dealing with cryptoassets</h3>
+
+            <ul class="custom_list" style={"--prefix: '6.'"}>
+                <li>
+                    <p>
+                        When using our Services to deal in Cryptoassets (including CHAT), you
+                        acknowledge and accept that:
+                    </p>
+                    <ul class="custom_list" style={"--prefix: '6.1.'"}>
+                        <li>
+                            you understand that we do not provide, nor do we accept responsibility
+                            for, any investment, legal, tax or accounting advice, and we do not
+                            provide any form of recommendation regarding the
+                            suitability/appropriateness or quality of any Cryptoasset, and the fact
+                            that our Services may be used in relation to any Cryptoasset should not
+                            be taken as an indication of such;
+                        </li>
+                        <li>
+                            your dealing in Cryptoassets is based on your own assessment of the
+                            risks involved, and if you are in any doubt as to what these risks are
+                            you confirm you have taken your own independent advice as appropriate;
+                        </li>
+                        <li>
+                            you are responsible for ensuring that any Cryptoassets and software
+                            (including any external wallet) you use in connection with our Services
+                            is compatible with the OpenChat Platform and CHAT, and we are not liable
+                            in the event of any incompatibility resulting in loss;
+                        </li>
+                        <li>
+                            you are only able to send Cryptoassets using our Services that are
+                            stored in your OpenChat Wallet, and you are not able to send
+                            Cryptoassets stored in any external wallet;
+                        </li>
+                        <li>
+                            the OpenChat Platform will refuse to complete, cancel or reverse any
+                            transaction you have authorised or made using our Services where there
+                            is insufficient Cryptoassets in your OpenChat Wallet to cover the
+                            transaction and our fees incurred;
+                        </li>
+                        <li>
+                            you will be charged a fee for every chat message sent containing
+                            Cryptoassets as determined by the relevant Cryptoasset ledger, and this
+                            fee will be automatically deducted from your OpenChat Wallet (this is
+                            not a fee charged by us);
+                        </li>
+                        <li>
+                            you will provide us with whatever information we request to facilitate
+                            any transaction using our Services;
+                        </li>
+                        <li>
+                            Cryptoasset transfers are irreversible and so accidental or fraudulent
+                            transactions with respect to Cryptoassets may not be recoverable. We are
+                            not responsible for any losses that may arise in connection with
+                            accidental or fraudulent transactions and as such, caution should be
+                            exercised whenever you make a transaction via the OpenChat Platform;
+                        </li>
+                        <li>
+                            whilst we will use reasonable endeavours to ensure that instructions in
+                            relation to Cryptoassets are processed in a timely manner, we make no
+                            representation or warranty regarding the amount of time needed to
+                            complete any instruction, as this is dependent upon many factors outside
+                            of our control, and we shall not be responsible for any loss from or
+                            arising out of delays in processing transactions or any inability to
+                            execute transactions; and
+                        </li>
+                        <li>
+                            you are responsible for complying with any tax obligations applicable to
+                            you in connection with your dealing in Cryptoassets.
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+        <li>
+            <h3>Intellectual property</h3>
+
+            <ul class="custom_list" style={"--prefix: '7.'"}>
+                <li>
+                    OpenChat and their licensors (if any) are at all times the owners of all
+                    intellectual property rights (of whatever nature, anywhere in the world)
+                    associated with our Services, the OpenChat Platform or CHAT, as well as any
+                    related software or information provided in relation to the CHAT (the “<strong>
+                        OpenChat Intellectual Property
+                    </strong>”). The OpenChat Intellectual Property and aforesaid rights are
+                    licensed (not sold) to you under the AGPLv3 licence (at
+                    <a href="https://www.gnu.org/licenses/agpl-3.0.html"
+                        >https://www.gnu.org/licenses/agpl-3.0.html</a
+                    >) and you have the right to use the OpenChat Intellectual Property only for the
+                    purpose of using our Services and as otherwise permitted under the AGPLv3
+                    licence. You have no intellectual property rights in the OpenChat Intellectual
+                    Property other than the right to use them in accordance with these Terms and the
+                    AGPLv3 licence. Any other use is expressly prohibited. We reserve all rights not
+                    expressly granted under these Terms.
+                </li>
+
+                <li>
+                    <p>
+                        The main repository for the OpenChat application used in the OpenChat
+                        Platform is at <a href="https://github.com/open-chat-labs/open-chat/"
+                            >https://github.com/open-chat-labs/open-chat/</a
+                        >. You may use this code solely in accordance with the AGPLv3 licence or as
+                        otherwise expressly agreed by us in these Terms or in writing. Subject to
+                        the foregoing, you shall not, except as may be allowed by Applicable Law
+                        which is incapable of exclusion by agreement between the Parties:
+                    </p>
+                    <ul class="custom_list" style={"--prefix: '7.1.'"}>
+                        <li>
+                            except to the extent expressly permitted under these Terms, attempt to
+                            copy, modify, duplicate, create derivative works from, frame, mirror,
+                            republish, download, display, transmit, or distribute all or any portion
+                            of any OpenChat Intellectual Property;
+                        </li>
+                        <li>
+                            attempt to reverse compile, disassemble, reverse engineer or otherwise
+                            reduce to human-perceivable form all or any part of any OpenChat
+                            Intellectual Property;
+                        </li>
+                        <li>
+                            access all or any part of the OpenChat Intellectual Property in order to
+                            build a product or Service which competes with the CHAT and / or the
+                            activities of OpenChat;
+                        </li>
+                        <li>
+                            license, sell, rent, lease, transfer, assign, distribute, display,
+                            disclose, or otherwise commercially exploit OpenChat Intellectual
+                            Property, and this includes not doing so via any third party; and / or
+                        </li>
+                        <li>
+                            attempt to obtain, or assist third parties in obtaining, access to
+                            OpenChat Intellectual Property other than as expressly permitted by
+                            these Terms.
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    All logos related to us and the OpenChat Intellectual Property are marks of
+                    OpenChat or our licensors. You may not copy, imitate, or use our trading names
+                    or logos without our prior written consent. All rights, title and interests in
+                    and to such is the exclusive property of us and our licensors.
+                </li>
+                <li>
+                    OpenChat Intellectual Property may contain code, commonly referred to as
+                    open-source software, which is distributed under any of the many known
+                    variations of open source licence terms, including terms which allow the free
+                    distribution and modification of the relevant software’s source code and/or
+                    which require all distributors to make such source code freely available upon
+                    request, including any contributions or modifications made by such distributor
+                    (collectively, “<strong>Open Source Software</strong>”). To the extent that our
+                    Services, the OpenChat Platform or CHAT use or contain any Open Source Software,
+                    that element only is licensed to you under the relevant licence terms of the
+                    applicable third party licensor (“<strong>Open Source Licence Terms</strong>”),
+                    and you accept and agree to be bound by such Open Source Licence Terms.
+                </li>
+            </ul>
+        </li>
+        <li>
+            <h3>Our liability</h3>
+
+            <ul class="custom_list" style={"--prefix: '8.'"}>
+                <li>
+                    Notwithstanding any other clause in these Terms, we do not in any way exclude or
+                    limit our liability for death or personal injury caused by our negligence; fraud
+                    or fraudulent misrepresentation; or any other liability which cannot be limited
+                    or excluded by Applicable Law.
+                </li>
+                <li>
+                    Subject to clause A 8.1, we shall be responsible to you only for loss that you
+                    suffer as a direct and foreseeable result of our breach of this Agreement as a
+                    result of our gross negligence, and only insofar that such loss does not arise
+                    as a result of a breach of these Terms and / or Applicable Law by you. In any
+                    event, we shall not be liable to you for any loss: (i) of profits or expected
+                    revenue; (ii) caused by events outside our reasonable control; (iii) resulting
+                    from any attack by a third party on our systems; (iv) as a result of us
+                    exercising any of our rights or any exercise of discretion permitted to us under
+                    these Terms; or (v) anything else which we state we are not responsible for or
+                    which we otherwise exclude our liability for under these Terms.
+                </li>
+                <li>
+                    Subject to clause A 8.1, our total liability under these Terms shall be capped
+                    at the total amount of fees received by us from you in the year proceeding the
+                    breach.
+                </li>
+            </ul>
+        </li>
+        <li>
+            <h3>Your liability</h3>
+
+            <ul class="custom_list" style={"--prefix: '9.'"}>
+                <li>
+                    <p>You agree to indemnify us for any losses that arise from or relate to:</p>
+                    <ul class="custom_list" style={"--prefix: '9.1.'"}>
+                        <li>your breach of any Applicable Law or these Terms;</li>
+                        <li>your breach of the rights of any third party to these Terms;</li>
+                        <li>
+                            any regulatory inquiry, legal action, litigation, dispute or
+                            investigation, whether such situations occur or are anticipated, that
+                            relate to you; and
+                        </li>
+                        <li>
+                            any fees, taxes or costs not imposed by or via us, which we pay on your
+                            behalf.
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    Losses for the purposes of this clause A 9 include direct and indirect losses,
+                    as well as any costs and expenses (including reasonable legal fees).
+                </li>
+            </ul>
+        </li>
+        <li>
+            <h3>Termination</h3>
+            <ul class="custom_list" style={"--prefix: '10.'"}>
+                <li>
+                    <p>
+                        You may terminate your relationship with us immediately at any time for any
+                        reason by ceasing to use our Services. You will not be charged for
+                        terminating your OpenChat account. Once your OpenChat account is closed, you
+                        accept and acknowledge that:
+                    </p>
+                    <ul class="custom_list" style={"--prefix: '10.1.'"}>
+                        <li>you will no longer have access to any Contributions you have made;</li>
+                        <li>
+                            our other users will continue to have access to the Contributions you
+                            have made (as Contributions are not deleted when you terminate); and
+                        </li>
+                        <li>
+                            you will no longer have access to your OpenChat Wallet, and you are
+                            solely responsible for transferring any Cryptoassets stored in your
+                            OpenChat Wallet to an external wallet prior to account deletion
+                            (otherwise you will lose access to those Cryptoassets).
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    We may suspend, restrict or terminate your access to or use of any or all of our
+                    Services or the OpenChat Platform with immediate effect at any time by giving
+                    you notice via the OpenChat Platform where (i) we believe that has been
+                    suspicious or unlawful conduct, including fraud; (ii) if we reasonably believe
+                    you breach these Terms repeatedly or in a serious way; (iii) if we reasonably
+                    believe you create harm, risk, or possible legal exposure for us, our users, or
+                    others; (iv) for security, legal or regulatory reasons; or (v) if you have not
+                    given us information we need, or we believe that the information you have
+                    provided us is incorrect.
+                </li>
+                <li>
+                    On suspension of some or all of our Services, you shall not be able to access
+                    some or all of our Services until the suspension is ended at our discretion. We
+                    shall have no obligation to end any suspension within any particular time period
+                    or at all, and we shall not incur any liability for any loss caused or as a
+                    consequence of us exercising our suspension rights under these Terms.
+                </li>
+                <li>
+                    <p>On termination of all of our Services:</p>
+                    <ul class="custom_list" style={"--prefix: '10.4.'"}>
+                        <li>
+                            you will no longer be permitted or have any right to access or use the
+                            OpenChat Platform or our Services, and we will also cease to support
+                            your use of CHAT in connection with these purposes.
+                        </li>
+                        <li>
+                            you must withdraw all of your Cryptoassets from your OpenChat Wallet
+                            within 1 week of termination, as we will cease to provide support for
+                            your OpenChat Wallet after the expiry of that period, and we are not
+                            responsible for any loss as a consequence.
+                        </li>
+                        <li>
+                            all other rights, obligations and liabilities of the parties accrued up
+                            to and including the date of termination shall not be affected by
+                            termination.
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    Termination shall not affect the continued operation of clauses and provisions
+                    which by their nature clearly reflect the intention of the parties that they
+                    survive termination, including in relation to liability and the protection of
+                    intellectual property.
+                </li>
+            </ul>
+        </li>
+        <li>
+            <h3>Changes to these terms</h3>
+            <ul class="custom_list" style={"--prefix: '11.'"}>
+                <li>
+                    <p>
+                        We may make changes to these Terms and our Services available from time to
+                        time:
+                    </p>
+                    <ul class="custom_list" style={"--prefix: '11.1.'"}>
+                        <li>to reflect changes to Applicable Law;</li>
+                        <li>
+                            to reflect changes required by any court, regulatory or tax authority or
+                            industry guidance or codes of practice;
+                        </li>
+                        <li>to reflect changes in the way cryptoasset markets work;</li>
+                        <li>
+                            to reflect changes to our technology or other systems, including those
+                            required to reflect to our intention to have increasing decentralisation
+                            of the OpenChat Platform;
+                        </li>
+                        <li>
+                            if it becomes impossible or impractical, in our reasonable opinion, to
+                            carry out any aspect of these Terms as a result of circumstances beyond
+                            our reasonable control;
+                        </li>
+                        <li>to make these Terms easier to understand;</li>
+                        <li>
+                            to reflect changes to the nature or scope of the Services we provide
+                            generally;
+                        </li>
+                        <li>where the changes are to your benefit or not detrimental to you; or</li>
+                        <li>for any other valid reason.</li>
+                    </ul>
+                </li>
+                <li>
+                    We will give you reasonable notice of any changes to these Terms, or we may make
+                    changes with immediate effect where they are in your favour or are required by
+                    Applicable Law.
+                </li>
+                <li>
+                    We will notify you of any changes via the OpenChat Platform. You will be treated
+                    as accepting any change that we make to these Terms unless you tell us that you
+                    do not agree to the change, in which case you must discontinue using our
+                    Services. We will treat this as your termination of your agreement to use our
+                    Services, with effect from the date that the change would otherwise come into
+                    effect.
+                </li>
+            </ul>
+        </li>
+        <li>
+            <h3>Novation</h3>
+            <ul class="custom_list" style={"--prefix: '12.'"}>
+                <li>
+                    We may appoint another entity to take over all or some of our rights and
+                    obligations under these Terms (the “<strong>New Entity</strong>”), in which case
+                    you consent to us transferring by way of novation all or some of our rights and
+                    obligations under these Terms to the New Entity. As soon as reasonably
+                    practicable following such novation, we shall notify you in writing of the
+                    effective date of such novation. From such effective date, all references in
+                    these Terms to “OpenChat”, “we”, “us” or “our” shall be deemed to be references
+                    to the New Entity.
+                </li>
+            </ul>
+        </li>
+        <li>
+            <h3>Governing law and jurisdiction</h3>
+            <ul class="custom_list" style={"--prefix: '13.'"}>
+                <li>
+                    If you are a consumer, please note that these Terms and any dispute or claim
+                    arising out of or in connection with them shall be governed by English law. You
+                    and we both agree that the courts of England and Wales will have non-exclusive
+                    jurisdiction to settle any dispute or claim arising out of or in connection with
+                    these Terms or their subject matter. However, nothing in these Terms will
+                    override any mandatory laws of the country in which you have your usual place of
+                    residence.
+                </li>
+                <li>
+                    If you are a business, these Terms and any dispute or claim arising out of or in
+                    connection with them or their subject matter or formation (including
+                    non-contractual disputes or claims) shall be governed by and construed in
+                    accordance with English law. We both agree that the courts of England and Wales
+                    shall have exclusive jurisdiction to settle any such dispute or claim (including
+                    non-contractual disputes or claims).
+                </li>
+            </ul>
+        </li>
+        <li>
+            <h3>Entire agreement</h3>
+            <ul class="custom_list" style={"--prefix: '14.'"}>
+                <li>
+                    These Terms constitute the entire agreement between you and us and supersede any
+                    prior agreement, terms and conditions or arrangement in respect of their subject
+                    matter. There are no promises, representations, warranties, terms, conditions or
+                    obligations between you and us other than those set out in these Terms.
+                </li>
+                <li>
+                    You warrant that you have not entered into these Terms in reliance upon, and
+                    will have no remedy in respect of, any misrepresentation, representation or
+                    statement which is not expressly set out or referred to in these Terms. The only
+                    remedy available for any misrepresentation or breach of any representation or
+                    statement set out or referred to in these Terms shall be for breach of contract.
+                </li>
+            </ul>
+        </li>
+        <li>
+            <h3>Miscellaneous</h3>
+            <ul class="custom_list" style={"--prefix: '15.'"}>
+                <li>
+                    These Terms shall take effect from the earlier of the date on which you (i)
+                    receive CHAT (ii) access the OpenChat Platform or (iii) otherwise use our
+                    Services.
+                </li>
+                <li>
+                    Each of the provisions of these Terms are separate, severable and enforceable
+                    and, accordingly, if at any time any provision or part-provision of these Terms
+                    is or becomes invalid, void, illegal or unenforceable, it shall be deemed
+                    deleted, but that shall not affect the validity and enforceability of the rest
+                    of these Terms. If any provision or part-provision of these Terms is deemed
+                    deleted under this clause A 15.2, these Terms shall be interpreted so as, to the
+                    greatest extent possible, to achieve the intended commercial result of the
+                    deleted provision.
+                </li>
+                <li>
+                    You may not assign, lien, mortgage, transfer, charge or otherwise encumber any
+                    of your rights or obligations in a way which may impede your performance of your
+                    obligations under these Terms. We may assign the benefit of these Terms without
+                    restriction subject to compliance with Applicable Law.
+                </li>
+                <li>
+                    The parties intend that any New Entity shall have the right to enforce any
+                    rights granted to it under clause A 12 pursuant to the Contracts (Rights of
+                    Third Parties) Act 1999 (the "<strong>1999 Act</strong>"). Save as aforesaid,
+                    the participants do not intend that the provisions of these Terms shall be
+                    enforceable by virtue of the 1999 Act or otherwise by any person not a user of
+                    the OpenChat Platform. Notwithstanding this clause A 15.4, the consent any third
+                    party is not required for any variation (including any release or compromise of
+                    any liability) or termination of these Terms.
+                </li>
+                <li>
+                    No variation or waiver of any of the terms of these Terms shall be effective
+                    unless agreed by us explicitly in writing. No failure or delay by us to exercise
+                    any right, power or remedy under these Terms shall operate as a waiver of that
+                    right, or any other right, nor shall any single or partial exercise by us of any
+                    right, power or remedy preclude any other or further exercise of that right or
+                    any other right, power or remedy.
+                </li>
+            </ul>
+        </li>
+    </ul>
+
+    <HashLinkTarget {onCopyUrl} id="2">
+        <h2>Section B: Additional terms for messaging on the OpenChat platform</h2>
+    </HashLinkTarget>
+
+    <ul class="custom_list bold" style={"--prefix: 'B'; --suffix: ''"}>
+        <li>
+            <h3>Introduction</h3>
+            <ul class="custom_list" style={"--prefix: '1.'"}>
+                <li>
+                    This section of these Terms will apply to OpenChat users when using the OpenChat
+                    Platform to send Contributions to each other.
+                </li>
+            </ul>
+        </li>
+
+        <li>
+            <h3>Messaging services</h3>
+            <ul class="custom_list" style={"--prefix: '2.'"}>
+                <li>
+                    <p>The OpenChat Platform enables all its users to, for example:</p>
+                    <ul class="custom_list" style={"--prefix: '2.1.'"}>
+                        <li>send and receive text and multimedia communications;</li>
+                        <li>send messages containing Cryptoassets (including tips);</li>
+                        <li>send Prize Messages;</li>
+                        <li>join video and voice calls;</li>
+                        <li>create private Groups;</li>
+                        <li>join public and / or private and / or Gated Groups; and</li>
+                        <li>join (but not create) public and / or private Communities.</li>
+                    </ul>
+                </li>
+                <li>
+                    <p>Please note:</p>
+                    <ul class="custom_list" style={"--prefix: '2.2.'"}>
+                        <li>
+                            when using our messages or prize messages to send Cryptoassets, this
+                            shall constitute dealing in Cryptoassets and the provisions in clause A
+                            6 shall apply.
+                        </li>
+                        <li>
+                            that we strongly recommend logging out of the OpenChat Platform at the
+                            end of every session you have on the OpenChat Platform, as otherwise the
+                            OpenChat Platform may not prompt the next user of the device used to
+                            access the OpenChat Platform to enter credentials in order to use the
+                            OpenChat Platform. If you do not log out of the OpenChat Platform at the
+                            end of each session, there is a risk that another person may impersonate
+                            you to send Contributions. We are not responsible for any losses as a
+                            consequence of your failure to log out at the end of a session or your
+                            credentials otherwise being compromised.
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+
+        <li>
+            <h3>Conditions for contributions</h3>
+            <ul class="custom_list" style={"--prefix: '3.'"}>
+                <li>
+                    <p>A Contribution must not:</p>
+                    <ul class="custom_list" style={"--prefix: '3.1.'"}>
+                        <li>do anything that is unlawful;</li>
+                        <li>communicate any illegal content or activity;</li>
+                        <li>be defamatory, obscene, offensive, hateful or inflammatory;</li>
+                        <li>bully, harass, insult or intimidate; or</li>
+                        <li>otherwise breach our Content Standards.</li>
+                    </ul>
+                </li>
+                <li>
+                    We shall decide, at our discretion, if a Contribution does not meet these
+                    requirements and if we decide that there has been a breach of clause B 3.1, we
+                    may suspend or terminate your access to or use of our Services immediately and
+                    you will be liable for any loss we incur as a consequence.
+                </li>
+                <li>
+                    If we decide that a Contribution is prohibited in any jurisdiction, we reserve
+                    the right to conceal the Contribution and prevent it from being viewed by users
+                    who are citizens, residents or legal entities in those jurisdictions where such
+                    a Contribution is prohibited.
+                </li>
+                <li>
+                    If we decide that a Contribution is likely to be interpreted by any users as
+                    defamatory, offensive, hateful or inflammatory, we reserve the right to require
+                    users to confirm an appropriate risk warning before permitting them to view such
+                    a Contribution.
+                </li>
+                <li>
+                    If you see any Contribution that you believe is in breach of clause B 3.1, you
+                    should contact us via the help channel in the OpenChat Community (accessible via
+                    the OpenChat Platform) and we will investigate. However, you acknowledge that we
+                    are not responsible if a person breaches clause B 3.1 when using our Services,
+                    whether or not we take any action as a result.
+                </li>
+                <li>
+                    <p>
+                        We will enable you to send Prize Messages. Where you do so, you shall ensure
+                        that the arrangements under which any Cryptoasset prizes are gifted:
+                    </p>
+                    <ul class="custom_list" style={"--prefix: '3.6.'"}>
+                        <li>
+                            are clear, fair, honest, not misleading and in compliance with any
+                            Applicable Law;
+                        </li>
+                        <li>
+                            are not structured in a way that would meet the definition of regulated
+                            gambling under any relevant jurisdiction; and
+                        </li>
+                        <li>
+                            are gifted in accordance on a basis which is clearly communicated with
+                            all participants.
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    All participants in any arrangement for Cryptoasset prizes accept that we do not
+                    control, and are not responsible or liable for, any issue or loss in connection
+                    with any Cryptoassets prizes offered or gifted via our Services.
+                </li>
+                <li>
+                    You understand that messaging services are vulnerable to spoofing and phishing
+                    attacks and so caution should be exercised in reviewing all Contributions, and
+                    we shall not be responsible for any loss caused by phishing, spoofing or any
+                    other malicious attack.
+                </li>
+                <li>
+                    You also accept that we shall also not be responsible for any loss in connection
+                    with any delay or error in the transmission or receipt of any Contribution, so
+                    long as we have acted in good faith. This includes loss caused as a result of a
+                    delay in the transmission or receipt of Cryptoassets sent via our messaging
+                    system, so long as we have acted in good faith.
+                </li>
+            </ul>
+        </li>
+        <li>
+            <h3>Conditions for joining groups and communities</h3>
+
+            <ul class="custom_list" style={"--prefix: '4.'"}>
+                <li>
+                    By joining a public or private Group or Community (including those which are
+                    Gated) on the OpenChat Platform, you understand and accept that you must comply
+                    with all applicable rules of that Group or Community. You also understand that
+                    we do not accept responsibility for the operation of Groups and Communities
+                    available via the OpenChat Platform.
+                </li>
+                <li>
+                    In addition, to join a Gated Group or Community you will need to at all relevant
+                    times satisfy the criteria as determined by the creator of that particular Group
+                    or Community.
+                </li>
+            </ul>
+        </li>
+        <li>
+            <h3>Intellectual property</h3>
+            <ul class="custom_list" style={"--prefix: '5.'"}>
+                <li>
+                    We do not claim any ownership of any intellectual property in the content that
+                    you submit via our messaging Services. However, you represent that any content
+                    you submit does not breach the intellectual property of any person, that you
+                    have the full right to send such information, and there is no other reason why
+                    we would be in breach of any obligation to any person in enabling you to send
+                    such information via our Services.
+                </li>
+            </ul>
+        </li>
+    </ul>
+
+    <HashLinkTarget {onCopyUrl} id="3">
+        <h2>Section C: Additional terms for using the OpenChat wallet</h2>
+    </HashLinkTarget>
+    <ul class="custom_list bold" style={"--prefix: 'C'; --suffix: ''"}>
+        <li>
+            <h3>Introduction</h3>
+            <ul class="custom_list" style={"--prefix: '1.'"}>
+                <li>
+                    This section of these Terms will apply to OpenChat users who use the OpenChat
+                    Wallet.
+                </li>
+            </ul>
+        </li>
+        <li>
+            <h3>Conditions for use</h3>
+            <ul class="custom_list" style={"--prefix: '2.'"}>
+                <li>
+                    <p>By using the OpenChat Wallet, you acknowledge and accept that:</p>
+                    <ul class="custom_list" style={"--prefix: '2.1.'"}>
+                        <li>
+                            you understand that in order to secure your OpenChat Wallet and be able
+                            to store Cryptoassets, you must access your OpenChat account using the
+                            credentials provided when opening your account. You are responsible for
+                            keeping, protecting and safeguarding your credentials. In this respect,
+                            you are aware that if you lose your credentials or access to your
+                            OpenChat account is compromised for any other reason, you may not be
+                            able to access your OpenChat Wallet and someone else may take control of
+                            your Cryptoassets (and may as a consequence be treated by the OpenChat
+                            Platform as if they were owner of those Cryptoassets). We are not
+                            responsible for any losses in relation to your loss of or inability to
+                            access the Cryptoassets stored in your OpenChat Wallet in connection
+                            with you losing your credentials or your credentials otherwise being
+                            compromised;
+                        </li>
+                        <li>
+                            unless you log out of the OpenChat Platform at the end of every session
+                            you have on the OpenChat Platform, the OpenChat Platform may not prompt
+                            the next user of the device used to access the OpenChat Platform to
+                            enter credentials in order to use the OpenChat Platform. If you do not
+                            log out of the OpenChat Platform at the end of each session, there is a
+                            risk that another person may impersonate you to access your Cryptoassets
+                            without your knowledge or consent, and the OpenChat Platform may treat
+                            them as if they are the owner of those Cryptoassets. We are not
+                            responsible for any losses as a consequence of your failure to log out
+                            at the end of a session or your credentials otherwise being compromised;
+                        </li>
+                        <li>
+                            we assume no responsibility in connection with any attempt to use your
+                            OpenChat Wallet for cryptoassets that we do not support or with regard
+                            to Cryptoassets sent from your OpenChat Wallet to an incompatible
+                            external wallet address;
+                        </li>
+                        <li>
+                            you understand that if you authorise or allow any third party to access
+                            your OpenChat Wallet, the third party will know your OpenChat Wallet
+                            information (including without limitation, information relating to your
+                            assets and transactions), and your OpenChat Wallet will be exposed to
+                            certain risks, and you may suffer losses (we are not responsible for any
+                            such losses);
+                        </li>
+                        <li>
+                            the transfer of Cryptoassets into your OpenChat Wallet exposes those
+                            Cryptoassets to the risk of loss from, amongst other things, security
+                            breaches from cyber-attacks, and so long as we have acted in good faith
+                            we are not responsible for any such loss; and
+                        </li>
+                        <li>
+                            you understand that if you hold Cryptoassets in your OpenChat Wallet,
+                            and there has been no activity on your OpenChat account for a prolonged
+                            period of time and we are unable to contact you, Applicable Law may
+                            require us to deliver any such Cryptoassets to the authorities in
+                            certain jurisdictions as unclaimed property. Where this is the case, we
+                            will comply with such requirements to the extent reasonably required by
+                            Applicable Law.
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    <p>By using the OpenChat Wallet, you covenant, represent and warrant that:</p>
+                    <ul class="custom_list" style={"--prefix: '2.2.'"}>
+                        <li>
+                            you shall allow your OpenChat Wallet to be used in connection with any
+                            activities that are prohibited by Applicable Law;
+                        </li>
+                        <li>
+                            you shall not use your OpenChat Wallet to store, send, or receive
+                            cryptoassets that we do not support;
+                        </li>
+                        <li>
+                            you are the legal and rightful owner of all Cryptoassets in your
+                            OpenChat Wallet, and that the sources of such Crptoassets are legal, and
+                            you will not transfer or trade through the OpenChat Platform anything
+                            other than Cryptoassets that have been legally obtained by you and that
+                            belong to you; and
+                        </li>
+                        <li>
+                            you shall notify us without undue delay of any unauthorised use and / or
+                            access of your OpenChat Wallet.
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+    </ul>
+
+    <HashLinkTarget {onCopyUrl} id="4">
+        <h2>Section D: Additional terms applicable to making a swap</h2>
+    </HashLinkTarget>
+    <ul class="custom_list bold" style={"--prefix: 'D'; --suffix: ''"}>
+        <li>
+            <h3>Introduction</h3>
+            <ul class="custom_list" style={"--prefix: '1.'"}>
+                <li>
+                    This section of these Terms will apply to OpenChat users who use the OpenChat
+                    Platform to make a Swap.
+                </li>
+                <li>
+                    <p>A Swap can be either:</p>
+                    <ul class="custom_list" style={"--prefix: '1.2.'"}>
+                        <li>
+                            an Exchange Swap, which is where the OpenChat Platform offers you a
+                            price for the Cryptoasset, and the transaction is completed using the
+                            third party exchange(s) the OpenChat Platform is linked to; or
+                        </li>
+                        <li>
+                            a P2P Swap, which is where you send a message to the users of a chat
+                            with the proposed terms of a transaction, and the OpenChat Platform
+                            facilitates you in completing that transaction with the other user.
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    In order to make an Exchange Swap, you need to choose (i) your Source
+                    Cryptoasset, (ii) your Target Cryptoasset and (ii) the amount of the Source
+                    Cryptoasset you wish to exchange for that Target Cryptoasset. You can then ask
+                    us to provide you with a proposed estimated exchange rate. This exchange rate
+                    reflects the rate(s) provided by the third party exchange(s) we are connected
+                    with.
+                </li>
+                <li>
+                    If you instruct us to proceed with an Exchange Swap, we will transfer the Source
+                    Cryptoasset from your OpenChat Wallet to the relevant third party exchange to
+                    make the conversion. You will then receive the Target Cryptoasset back to your
+                    OpenChat Wallet.
+                </li>
+                <li>
+                    Where we use a third party exchange to complete an Exchange Swap, please note
+                    that the exchange rates provided by us are an estimated rate at the time you
+                    request the rate. The actual rate provided will be determined at the time you
+                    instruct us to make the Exchange Swap. <strong>
+                        As the prices of Cryptoassets can be highly volatile, we do not guarantee
+                        that the amount of Target Cryptoassets you acquire from an Exchange Swap
+                        will be the same as that set out in the proposed exchange rate. Rather, it
+                        will reflect the rate actually obtained when the Exchange Swap is actually
+                        executed by the third party exchange (which may result you in receiving less
+                        of the Target Cryptoasset than that predicted by the estimated exchange rate
+                        you receive
+                    </strong>).
+                </li>
+                <li>
+                    <p>
+                        In order to engage in a P2P Swap (either by making a Swap Offer or accepting
+                        a Swap Offer), you need to have a Diamond Membership. A “Swap Offer”, is a
+                        communication which you, if you hold a Diamond Membership, can make to other
+                        users in chat(s) with the following information:
+                    </p>
+                    <ul class="custom_list" style={"--prefix: '1.6.'"}>
+                        <li>your Source Cryptoasset;</li>
+                        <li>your Target Cryptoasset;</li>
+                        <li>the amount of the Source Cryptoasset you are willing to exchange;</li>
+                        <li>the amount of the Target Cryptoasset you wish to acquire; and</li>
+                        <li>the chat(s) who can accept the Swap Offer.</li>
+                    </ul>
+                </li>
+                <li>
+                    <p>Upon making a Swap Offer:</p>
+                    <ul class="custom_list" style={"--prefix: '1.7.'"}>
+                        <li>
+                            the amount of the Source Cryptoasset you are willing to exchange is sent
+                            from your OpenChat Wallet into escrow.
+                        </li>
+                        <li>
+                            a message containing the details of the Swap Offer is sent to the users
+                            in the relevant chat(s), who have the ability to accept your Swap Offer
+                            at their discretion.
+                        </li>
+                        <li>
+                            you have the ability to cancel the Swap Offer for as long as no other
+                            user has accepted the Swap Offer, in which case the Source Cryptoasset
+                            shall be returned to your OpenChat Wallet.
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    <p>
+                        As soon as another user accepts your Swap Offer, the P2P Swap is processed,
+                        meaning that:
+                    </p>
+                    <ul class="custom_list" style={"--prefix: '1.8.'"}>
+                        <li>
+                            the Target Cryptoassets will be transferred from their wallet to escrow;
+                        </li>
+                        <li>
+                            the Source Cryptoassets will be transferred from escrow to the other
+                            user’s OpenChat Wallet; and
+                        </li>
+                        <li>
+                            the Target Cryptoassets will be transferred from escrow to your OpenChat
+                            Wallet.
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+        <li>
+            <h3>Conditions for making a swap</h3>
+            <ul class="custom_list" style={"--prefix: '2.'"}>
+                <li>
+                    <p>
+                        By using our Services to make a Swap, you are dealing in Cryptoassets and
+                        clause A 6 shall apply. In addition, you acknowledge and accept that:
+                    </p>
+                    <ul class="custom_list" style={"--prefix: '2.1.'"}>
+                        <li>
+                            you will only able to make a Swap if there are sufficient Cryptoassets
+                            stored in your OpenChat Wallet to do so;
+                        </li>
+                        <li>
+                            you understand that once an offer for a Swap has been accepted, you are
+                            not able to cancel that Swap (or otherwise ask for a refund), and as
+                            such before making any Swap or Swap Offer you should make sure that you
+                            are certain you want to proceed;
+                        </li>
+                        <li>
+                            whilst we may cancel an Exchange Swap where there is a Manifest Error in
+                            the price of a Cryptoasset as shown by us (in which case we will give
+                            you the ability as soon as commercially practicable to acquire the
+                            Cryptoasset at the correct price, and we shall notify you of any
+                            cancellation as soon as we reasonably can by email or via the OpenChat
+                            Platform), you do not have the right to cancel an accepted Swap Offer
+                            because of a Manifest Error (and so you should be careful to ensure that
+                            the details of any Swap Offer you make are accurate); and
+                        </li>
+                        <li>
+                            we reserve the right to make changes to these Terms to reflect changes
+                            to the third party exchanges available to us and their offerings.
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    <p>As long as we act in good faith, we do not accept responsibility for:</p>
+                    <ul class="custom_list" style={"--prefix: '2.2.'"}>
+                        <li>our Services being interrupted;</li>
+                        <li>any Swap not being executed or accepted by any counterparty;</li>
+                        <li>any delay in processing a Swap;</li>
+                        <li>any lack of liquidity in any market for a Cryptoasset; or</li>
+                        <li>
+                            our refusal to carry out any Swap for you if we believe it is in breach
+                            of these Terms.
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+    </ul>
+
+    <HashLinkTarget {onCopyUrl} id="5">
+        <h2>Section E: Additional terms for dealing in CHAT</h2>
+    </HashLinkTarget>
+    <ul class="custom_list bold" style={"--prefix: 'E'; --suffix: ''"}>
+        <li>
+            <h3>Introduction</h3>
+            <ul class="custom_list" style={"--prefix: '1.'"}>
+                <li>This section of these Terms will apply whenever you deal in CHAT.</li>
+            </ul>
+        </li>
+        <li>
+            <h3>Conditions for dealing in CHAT</h3>
+            <ul class="custom_list" style={"--prefix: '2.'"}>
+                <li>
+                    <p>
+                        By dealing in CHAT, you are dealing in Cryptoassets and clause A 6 shall
+                        apply. In addition, you acknowledge and accept that:
+                    </p>
+                    <ul class="custom_list" style={"--prefix: '2.1.'"}>
+                        <li>
+                            you have the necessary and relevant experience, knowledge and
+                            understanding to deal in CHAT;
+                        </li>
+                        <li>
+                            other than as set out in these Terms, you are not relying upon any other
+                            representation or warranty by OpenChat or any other person, written or
+                            otherwise, in determining whether to deal in CHAT, and have reached your
+                            independent view regarding that dealing in CHAT is right for you;
+                        </li>
+                        <li>
+                            you accept that CHAT is created and you obtain CHAT on an “as is” basis.
+                            Therefore, provided we act in good faith in accordance with these Terms,
+                            you accept that OpenChat is providing CHAT without being able to provide
+                            any warranties in relation to them, including, but not limited to,
+                            title, merchantability or fitness for a particular purpose;
+                        </li>
+                        <li>
+                            OpenChat has not made, and does not make, any representations that you
+                            will be able to generate a return on your obtaining of CHAT, and you
+                            should not expect a return or any kind of cancellation or refund rights
+                            in relation to the CHAT;
+                        </li>
+                        <li>
+                            whilst OpenChat will use reasonable endeavours to ensure that CHAT will
+                            have the utility reflected in these Terms, the features of the CHAT are
+                            subject to change, modification, amendment, alternation or
+                            supplementation at any time (at OpenChat’s sole discretion);
+                        </li>
+                        <li>
+                            these Terms do not constitute a prospectus, offering memorandum or
+                            private placement memorandum of any sort and does not pertain in any way
+                            to be any kind of regulated offering;
+                        </li>
+                        <li>
+                            you understand that the CHAT is not being offered as securities, e-money
+                            or stablecoins; and
+                        </li>
+                        <li>
+                            you accept that we reserve the right to create new classes of
+                            cryptoassets other than CHAT under separate brands and with features
+                            outside of the scope of these Terms and nothing in these Terms shall
+                            entitle you to have any rights (of whatever nature) in relation to such
+                            cryptoassets.
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    Any sale of CHAT by you to another person is subject to these Terms, and you are
+                    responsible for ensuring that any acquirer of CHAT is aware of the fact that in
+                    doing so they accept, and are subject to, these Terms.
+                </li>
+            </ul>
+        </li>
+    </ul>
+
+    <HashLinkTarget {onCopyUrl} id="6">
+        <h2>Section F: Additional terms for Diamnond membership holders</h2>
+    </HashLinkTarget>
+    <ul class="custom_list bold" style={"--prefix: 'F'; --suffix: ''"}>
+        <li>
+            <h3>Introduction</h3>
+            <ul class="custom_list" style={"--prefix: '1.'"}>
+                <li>This section of these Terms will apply if you hold a Diamond Membership.</li>
+                <li>
+                    <p>As a Diamond Membership holder, you are eligible to:</p>
+
+                    <ul class="custom_list" style={"--prefix: '1.2.'"}>
+                        <li>
+                            earn rewards in return for referring other users to become Diamond
+                            Membership holders. Rewards are 50% of the referred member’s total
+                            Diamond Membership payments for the first year after the referral is
+                            completed. Rewards are paid out in either CHAT or ICP, depending on
+                            whether the referred member uses CHAT or ICP to purchase the Diamond
+                            Membership;
+                        </li>
+                        <li>
+                            create public Groups (in addition to the general ability to create
+                            private Groups);
+                        </li>
+                        <li>create public and / or private Communities;</li>
+                        <li>create Gated Groups and Gated Communities;</li>
+                        <li>make video and voice calls;</li>
+                        <li>
+                            make or accept Swap Offers in relation to a P2P Swaps (see section D for
+                            further information); and
+                        </li>
+                        <li>
+                            access any other features that we make available from time to time at
+                            our discretion to holders of a Diamond Membership (subject to your
+                            acceptance of any additional terms which may apply to such).
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+        <li>
+            <h3>Conditions for becoming a Diamond membership holder</h3>
+            <ul class="custom_list" style={"--prefix: '2.'"}>
+                <li>
+                    We will charge you in advance for your Diamond Membership and we will
+                    automatically deduct the fee (as specified on the fees page on the OpenChat
+                    Platform and payable in either CHAT or ICP) directly from your OpenChat Wallet
+                    at the start of your membership. This fee shall cover your Diamond Membership
+                    for the membership period specified when you sign up for Diamond Membership.
+                </li>
+                <li>
+                    <p>In the event that we suspend the provision of Diamond Membership to you:</p>
+                    <ul class="custom_list" style={"--prefix: '2.2.'"}>
+                        <li>
+                            because you breach the terms of this Agreement, you will forfeit your
+                            Diamond Membership (and shall not be entitled to any refund in respect
+                            of such).
+                        </li>
+                        <li>
+                            for any other reason, the membership period shall be extended
+                            accordingly so that you do not pay any fee in respect of a time period
+                            during which the Diamond Membership is suspended.
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    Your Diamond Membership cannot be transferred or assigned. To the extent
+                    permitted by Applicable Law, we do not provide any refund rights in relation to
+                    your purchase of a Diamond Membership, and we note that the Diamond Membership
+                    is contingent on the operation and value of CHAT and ICP which is dependent on
+                    fluctuations in the financial market which cannot be controlled by us.
+                </li>
+            </ul>
+        </li>
+        <li>
+            <h3>Conditions for creating groups and communities</h3>
+            <ul class="custom_list" style={"--prefix: '3.'"}>
+                <li>
+                    <p>As the creator of a Group, Community or Channel, you may:</p>
+                    <ul class="custom_list" style={"--prefix: '3.1.'"}>
+                        <li>
+                            determine the rules that users must comply with in order to send
+                            messages in the Group, Community or Channel;
+                        </li>
+                        <li>
+                            manage and control the operation of the Group, Community or Channel; and
+                        </li>
+                        <li>
+                            assign functions to admins and moderators at their discretion to assist
+                            with the management of the Group, Community or Channel,
+                        </li>
+                        <li>and in doing so you accept that you are responsible for:</li>
+                        <li>the Groups, Communities, and Channels you administer;</li>
+                        <li>
+                            ensuring that the rules of the Groups, Communities and Channels you
+                            administer are appropriately enforced; and
+                        </li>
+                        <li>
+                            dealing with any complaints or queries received from participants in
+                            relation to the Groups, Communities, and Channels you administer.
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    Notwithstanding the rest of this clause F 3, we may require you to change the
+                    rules of any Group, Community or Channel, or we may require that certain
+                    jurisdictions be geo-blocked from a Group, Community or Channel, if we in good
+                    faith believe that this is required to comply with Applicable Law. We also have
+                    the right to require you to resolve any complaint or query in a particular way,
+                    if we in good faith believe that this is required to protect the rights of any
+                    person. You shall comply with any such requirement we impose promptly, and
+                    ensure that we are provided with full, complete, accurate and up to date
+                    responses to any queries we make in deciding whether to place such a requirement
+                    on you or any Group or Community. We do not accept any liability for our
+                    exercise of our rights under this clause F 3.
+                </li>
+            </ul>
+        </li>
+    </ul>
+
+    <HashLinkTarget {onCopyUrl} id="7">
+        <h2>Section G: Participating in the OpenChat DAO</h2>
+    </HashLinkTarget>
+    <ul class="custom_list bold" style={"--prefix: 'G'; --suffix: ''"}>
+        <li>
+            <h3>Introduction</h3>
+            <ul class="custom_list" style={"--prefix: '1.'"}>
+                <li>
+                    This section of these Terms will apply if you participate in the governance of
+                    the OpenChat DAO.
+                </li>
+            </ul>
+        </li>
+        <li>
+            <h3>Location of information regarding the DAO</h3>
+            <ul class="custom_list" style={"--prefix: '2.'"}>
+                <li>
+                    <p>For information regarding:</p>
+                    <ul class="custom_list" style={"--prefix: '2.1.'"}>
+                        <li>
+                            the rules setting out the operation and governance of the OpenChat DAO,
+                            please see: <a href="https://oc.app/blog/governance"
+                                >https://oc.app/blog/governance</a
+                            >; and
+                        </li>
+                        <li>
+                            how holders of CHAT may vote on Governance Matters, please see:
+                            <a href="https://oc.app/blog/governance"
+                                >https://oc.app/blog/governance</a
+                            >,
+                        </li>
+                    </ul>
+                    <p>
+                        and in participating in the OpenChat DAO you agree to and are bound by these
+                        rules as amended from time to time, which shall be considered as part of
+                        these Terms.
+                    </p>
+                </li>
+            </ul>
+        </li>
+        <li>
+            <h3>Conditions for using the voting platform</h3>
+            <ul class="custom_list" style={"--prefix: '3.'"}>
+                <li>
+                    You understand that the Voting Platform you use to vote may be operated by a
+                    third party. As such, you may be subject to the additional terms of the third
+                    party operating the Voting Platform. Where this is the case, and you confirm
+                    that (i) you accept and will comply with these additional terms as applicable to
+                    you and (ii) you understand that we are not responsible for them.
+                </li>
+            </ul>
+        </li>
+    </ul>
+
+    <HashLinkTarget {onCopyUrl} id="8">
+        <h2>Schedule 1: Risks relating to cryptoassets</h2>
+    </HashLinkTarget>
+    <p>
+        <strong>
+            DEALING IN CRYPTOASSETS INVOLVES A HIGH DEGREE OF RISK, AND, THEREFORE, SHOULD BE
+            UNDERTAKEN ONLY IF YOU ARE CAPABLE OF EVALUATING THE RISKS INVOLVED AND ABLE TO BEAR THE
+            RISK OF A COMPLETE LOSS OF ALL CAPITAL USED TO PARTICIPATE IN CRYPTOASSETS.
+        </strong>
+    </p>
+    <p>
+        <strong>
+            YOU SHOULD CAREFULLY CONSIDER THE RISKS DESCRIBED BELOW BEFORE DEALING IN CRYPTOASSETS.
+            IT SHOULD BE NOTED THAT THE LIST OF RISK FACTORS DESCRIBED HEREUNDER IS NOT INTENDED TO
+            BE EXHAUSTIVE AND DOES NOT NECESSARILY INCLUDE ALL THE RISKS TO WHICH YOU MAY BE EXPOSED
+            WHEN DEALING IN CRYPTOASSETS.
+        </strong>
+    </p>
+    <p>
+        We expressly disclaim all responsibility for any loss or damage of any kind whatsoever
+        arising directly or indirectly from: (i) reliance on any information contained in this
+        Schedule 1, (ii) any error, omission or inaccuracy in any such information or (iii) any
+        action resulting from such information.
+    </p>
+    <p>
+        Please note that in addition to the risks below, there may be other risks associated with
+        your dealing in Cryptoassets and using our Services generally, including those that we
+        cannot reasonably foresee. Additional risks may also materialise as unanticipated variations
+        or combinations of the risks discussed below.
+    </p>
+    <p>
+        By participating in these Terms, or by otherwise dealing in Cryptoassets, including CHAT,
+        you expressly acknowledge and assume the following risks, which we shall not be liable
+        should they materialise:
+    </p>
+    <p>
+        <strong> Risks applicable to all Cryptoassets (including CHAT) </strong>
+    </p>
+
+    <ul class="custom_list" style={"--prefix: ''"}>
+        <li>
+            <h3>General risks</h3>
+            <p>
+                The value of the Cryptoassets can fall as well as rise. If you buy Cryptoassets, you
+                may not get back the full amount you spent on them, or anything at all. The value of
+                Cryptoassets may depend on fluctuations in the financial markets, or other economic
+                factors, which are outside our control. The past performance of a Cryptoassets is
+                not a guide to the future performance of Cryptoassets.
+            </p>
+        </li>
+        <li>
+            <h3>The prices of Cryptoassets are extremely volatile</h3>
+            <p>
+                Fluctuations in the price of Cryptoassets are subject to significant price
+                volatility. The prices of Cryptoassets have historically been subject to dramatic
+                fluctuations and are highly volatile. A range of factors may influence the market
+                price, if any, of Cryptoassets , including, but not limited to: (i) the ability (if
+                any) of Cryptoassets to trade on a secondary market; (ii) global supply and demand
+                (iii) general expectations with respect to the rate of inflation, interest rates and
+                exchange rates; (iv) changes in the software, software requirements or hardware
+                requirements underlying Cryptoassets; (v) changes in the rights, obligations,
+                incentives, or rewards for holders of Cryptoassets;(vii) interruptions in service
+                from or failures of exchanges on which Cryptoassets are traded; (viii) investment
+                and trading activities of large purchasers, including private and registered funds,
+                that may directly or indirectly invest in Cryptoassets; (ix) monetary policies of
+                governments, trade restrictions, currency devaluations and revaluations; (x)
+                regulatory measures, if any, that affect the use of Cryptoassets and changes in
+                Applicable Law; (xi) global or regional political, economic or financial events and
+                situations; and (x) expectations among participants that the value of a particular
+                Cryptoasset or Cryptoassets generally will soon change. A decrease in the price of a
+                single cryptoasset may cause volatility in the entire cryptoasset industry and may
+                affect the Cryptoassets available via our Services. Volatility in the price of
+                Cryptoassets may result in significant loss over a short period of time.
+            </p>
+        </li>
+        <li>
+            <h3>
+                Risk of losing access to Cryptoassets due to loss of private key(s) and wallet(s)
+            </h3>
+            <p>
+                A private key, or a combination of private keys, is necessary to deal in
+                Cryptoassets. Accordingly, loss of requisite private key(s) associated with your
+                digital wallet or vault storing Cryptoassets will result in loss of such
+                Cryptoassets. Moreover, any third party that gains access to such private key(s),
+                including by gaining access to login credentials of a hosted wallet service you use
+                (including the OpenChat Wallet), may be able to misappropriate your Cryptoassets.
+            </p>
+            <p>
+                Any errors or malfunctions caused by or otherwise related to the wallet you use to
+                receive and store Cryptoassets, including your own failure to properly maintain or
+                use such wallet, may also result in the loss of your Cryptoassets. Failure to
+                precisely follow any procedures set forth by us for dealing in Cryptoassets,
+                including, for instance, providing an incorrect wallet address, or using
+                incompatible wallet(s), may result in the loss of Cryptoassets you hold.
+            </p>
+        </li>
+        <li>
+            <h3>Regulatory risks</h3>
+            <p>
+                Regulation of Cryptoassets and the offering thereof, as well as blockchain
+                technologies, and cryptoasset exchanges is currently underdeveloped and likely to
+                rapidly evolve. Regulation varies significantly between different jurisdictions and
+                is subject to significant uncertainty. Regulators may in the future adopt laws,
+                regulations, guidance or other actions that may severely impact the development,
+                operations and growth of the OpenChat Platform and the adoption and utility of
+                Cryptoassets.
+            </p>
+        </li>
+        <li>
+            <h3>Risks associated with the blockchain protocol</h3>
+            <p>
+                Because Cryptoassets are based on blockchain protocols, any malfunction, breakdown
+                or abandonment of a blockchain protocol may have a material adverse effect on
+                Cryptoassets. Moreover, advances in cryptography, or technical advances such as the
+                development of quantum computing, could present risks to Cryptoassets by rendering
+                ineffective the cryptographic consensus mechanism that underpins the blockchain
+                protocol.
+            </p>
+        </li>
+        <li>
+            <h3>Risk of hacking and software and security weaknesses</h3>
+            <p>
+                Hackers or other malicious groups or organizations may attempt to interfere with
+                Cryptoassets in a variety of ways, including malware attacks, denial of service
+                attacks, consensus-based attacks, Sybil attacks, smurfing and spoofing, as well as
+                attacks which overpower the consensus-based mechanism on which the blockchain in
+                built and attacks which interfere with or otherwise cause nodes to malfunction
+                (nodes are computers / hardware devices that help maintain the blockchain).
+            </p>
+            <p>
+                There is also an inherent risk that the software and related technologies and
+                theories we use could contain Viruses or Vulnerabilities. Viruses or Vulnerabilities
+                could cause, inter alia, complete loss of Cryptoassets, or could negatively affect
+                the OpenChat Platform.
+            </p>
+        </li>
+        <li>
+            <h3>Other potential risks applicable to Cryptoassets</h3>
+            <p>
+                In addition to the risks included in this Schedule 1, there are other risks
+                associated with dealing in Cryptoassets (including CHAT), including those that we
+                cannot reasonably foresee. Additional risks may also materialize as unanticipated
+                variations or combinations of the risks discussed above in this Schedule 1.
+            </p>
+            <p>
+                Where you deal in any Cryptoasset you should take care to understand the risks
+                involved. In this respect, we note some of the additional specific risks relevant to
+                CHAT. In relation to Cryptoassets other than CHAT, it is usual for the issuer of the
+                Cryptoasset to provide an explanation of the risks involved (or if they have not,
+                this can be an indicator that a Cryptoasset is particularly risky as there has been
+                a lack of consideration of the risks relevant to that Cryptoasset). By dealing in
+                any Cryptoasset, you confirm to us that you have taken to time to understand, and
+                accept, the risks involved (including in respect of the risks as explained by the
+                issuer of the Cryptoasset).
+            </p>
+        </li>
+        <li>
+            <h3>Forks and Airdrops</h3>
+            <p>
+                The underlying protocols of Cryptoassets may be subject to substantial changes in
+                their operating rules (called a “forks”), and these may alter the value or function
+                of a Cryptoasset. A fork may result in multiple versions of a Cryptoasset, leading
+                to volatility as one version becomes dominant over another, which may lose its
+                value.
+            </p>
+            <p>
+                There may be additional distributions (called an “airdrop”) made to holders of a
+                particular Cryptoasset, which may be a new variant of a Cryptoasset or a further
+                quantity of the same Cryptoasset. The (anticipated) occurrence of an airdrop may
+                impact the value of the Cryptoasset(s) affected by that airdrop.
+            </p>
+        </li>
+    </ul>
+
+    <p>
+        <strong>CHAT specific risks</strong>
+    </p>
+    <p>
+        As noted elsewhere in these Terms, CHAT is not being structured or sold as securities nor
+        any other form of regulated investment product. Accordingly, there has not been any
+        consideration as to whether the CHAT is a suitable or an appropriate thing for you to deal
+        in. In addition to the General Cryptoasset risks, you should be aware of the following risks
+        in relation to CHAT specifically:
+    </p>
+    <ul class="custom_list" style={"--prefix: ''"}>
+        <li>
+            <h3>Lack of operating history</h3>
+            <p>
+                Purchases of CHAT involve a high degree of risk. The value of CHAT is reliant on the
+                success of us developing our business. As such, CHAT has all of the risks and
+                uncertainties normally associated with a developing business, including in respect
+                of potential difficulties operating the OpenChat Platform, lack of name recognition,
+                lack of adequate capital to progress the business, and difficulties in complying
+                with all Applicable Law. Financial and operational risks confronting start-ups are
+                significant and we are not immune to these. The market in which we compete is highly
+                competitive, and the percentage of companies that survive and prosper is small.
+            </p>
+            <p>
+                Our lack of an operating history may make it difficult for you to evaluate our
+                business and long-term operating prospects and the prospects of the OpenChat
+                Platform in connection with acquiring CHAT. These risks include, but are not limited
+                to, our ability to: (i) increase revenues and manage costs relating to the operation
+                of the OpenChat Platform; (ii) increase awareness of the OpenChat Platform and CHAT;
+                (iii) offer compelling content on the OpenChat Platform; (iv) maintain current and
+                develop new strategic relationships; (v) respond effectively to competitive
+                pressures; (vi) continue to develop and upgrade technology; and (vii) raise any
+                additional capital as potentially required. There are no assurances that our
+                business strategy will be successful, nor that we will address these risks
+                successfully during the operation of the OpenChat Platform and CHAT.
+            </p>
+        </li>
+        <li>
+            <h3>Risks associated with uncertain regulation</h3>
+            <p>
+                The regulatory status of the CHAT may be unclear or unsettled in certain
+                jurisdictions. It is difficult to predict how or whether regulatory agencies may
+                apply existing regulation with respect to CHAT and its applications, including the
+                OpenChat Platform. It is likewise difficult to predict how or whether legislatures
+                or regulatory agencies may implement changes to law and regulation affecting
+                distributed ledger technology and its applications. Regulatory actions could
+                negatively impact CHAT in various ways, including, for purposes of illustration
+                only, through a determination that CHAT are a regulated financial instrument that
+                require registration or licensing. We may cease operations in a jurisdiction in the
+                event that regulatory actions, or changes to Applicable Law, make it illegal to
+                operate in such jurisdiction, or commercially undesirable to obtain the necessary
+                regulatory approval(s) to operate in such jurisdiction.
+            </p>
+            <p>
+                More generally, the OpenChat Platform is pioneered on new and evolving technology,
+                which increases legal complexity, particularly as the Applicable Law is subject to
+                interpretation and change. This could result in a variety of adverse consequences,
+                including civil penalties and fines as well as the requirement that some or all of
+                our Services by restricted or prohibited in certain jurisdictions. These
+                developments could have an adverse effect on the operations of the OpenChat Platform
+                and the value of CHAT.
+            </p>
+        </li>
+        <li>
+            <h3>Legal proceedings and litigation</h3>
+            <p>
+                From time to time, we may be involved in legal proceedings or litigation. The
+                results of such legal proceedings and claims cannot be predicted with certainty and,
+                regardless of the outcome, legal proceedings could have an adverse impact on our
+                business, because of defence and settlement costs, diversion of resources, and other
+                factors. Generally, if third parties are successful in their claims, we may have to
+                pay substantial damages, account for profits derived from the alleged infringing
+                acts, and cease to use certain technologies or take other actions that could be
+                detrimental to our business. If there is an intellectual property infringement
+                claim, or to avoid such claims, we may be prohibited from selling or licensing to
+                others some or all Services we develop, unless the patent or copyright holder grants
+                a license of the relevant intellectual property to us, which the patent or copyright
+                holder is not obligated to do. There also may be adverse publicity associated with
+                litigation that could negatively affect people’s perception of us, the OpenChat
+                Platform and/or CHAT, regardless of whether the allegations are valid or we are
+                ultimately found liable. Accordingly, litigation may adversely affect our business
+                and financial condition.
+            </p>
+        </li>
+        <li>
+            <h3>Intellectual property</h3>
+            <p>
+                Companies, organisations, or individuals, including competitors, may hold or obtain
+                patents, trademarks, or other proprietary rights that would prevent, limit, or
+                interfere with our ability to make, use, develop, sell, and / or market CHAT and /
+                or the OpenChat Platform, which could make it more difficult for us to operate our
+                business. These third parties may have applied for, been granted, or obtained,
+                patents that relate to intellectual property, and which compete with our
+                intellectual property or technology. This may require us to develop or obtain
+                alternative technology, or obtain appropriate licenses under these patents, which
+                may not be available on acceptable terms or at all. Such a circumstance may result
+                in us having to significantly increase development efforts and resources to redesign
+                the technology in order for us to safeguard our competitive edge against competitors
+                in the same industry. There is a risk that our means of protecting intellectual
+                property rights may not be adequate, and weaknesses or failures in this area could
+                adversely affect our business or reputation, financial condition, the operations of
+                the OpenChat Platform and the development of CHAT.
+            </p>
+            <p>
+                From time to time, we may receive communications from holders of patents or
+                trademarks regarding their proprietary rights. Companies holding patents or other
+                intellectual property rights may bring suits alleging infringement of such rights or
+                otherwise assert their rights and urge us to take licenses. In addition, if we are
+                determined to have infringed upon a third party's intellectual property rights, we
+                may be required to cease operating the OpenChat Platform or certain Services, pay
+                substantial damages, seek a license from the holder of the infringed intellectual
+                property right (which license may not be available on reasonable terms or at all),
+                and/or establish and maintain alternative branding for items relating to the
+                OpenChat Platform and our Services. We may need to file lawsuits to protect our
+                intellectual property rights from infringement from third parties, which could be
+                expensive, time consuming, and distract management's attention from our core
+                operations.
+            </p>
+            <p>
+                Our ability to serve our customers and the OpenChat Platform’s participants will
+                depend upon our intellectual property. The steps we take to protect our intellectual
+                property rights may be inadequate. In order to protect our intellectual property
+                rights, we may be required to spend significant resources to monitor and protect
+                these rights. Litigation brought to protect and enforce our intellectual property
+                rights could be costly, time-consuming and distracting to management and could
+                result in the impairment or loss of portions of our intellectual property.
+                Furthermore, our efforts to enforce our intellectual property rights may be met with
+                defences, counterclaims, and countersuits attacking the validity and enforceability
+                of our intellectual property rights. Our failure to secure, protect, and enforce our
+                intellectual property rights could seriously harm the CHAT brand and adversely
+                affect the development of the CHAT.
+            </p>
+        </li>
+        <li>
+            <h3>
+                CHAT will have no refund rights or similar features and may have limited liquidity
+            </h3>
+            <p>
+                After issuance, to the extent permitted by Applicable Law you will have no right to
+                return your CHAT to us or to receive a refund or otherwise require us to exchange
+                CHAT for a certain value. As a result, if there is not sufficient demand or interest
+                in the OpenChat Platform and CHAT, or if there are limits on the transferability of,
+                or limited liquidity for, CHAT, then you may lose all or a portion of your
+                investment.
+            </p>
+        </li>
+        <li>
+            <h3>Future distribution of CHAT and other types of token</h3>
+            <p>
+                The distribution by us of a substantial number of CHAT or additional types of token
+                could have an adverse effect on the value of CHAT. Any distribution of CHAT could
+                dilute your percentage interest in then-outstanding CHAT, if any, and have an
+                adverse effect on the market value of the CHAT. Additional new types of cryptoasset
+                may also impact the value of CHAT, and you have no rights in relation to such new
+                types of cryptoasset as a result of entering into these Terms.
+            </p>
+        </li>
+        <li>
+            <h3>Funding</h3>
+            <p>
+                We intend to use the amounts received from CHAT holders to fund the development of
+                our business and the OpenChat Platform. Amounts received from CHAT holders may be
+                converted into other cryptoassets or fiat currencies. If the value of cryptoassets
+                or fiat currencies fluctuate unfavourably this may mean that we may not be able to
+                fund business development and deployment as expected or may not be able to develop
+                the OpenChat Platform in the manner it intended, which may consequently impact the
+                value of CHAT.
+            </p>
+        </li>
+        <li>
+            <h3>Lack information for monitoring their CHAT</h3>
+            <p>
+                You may not be able to obtain all information you want from time to time regarding
+                the OpenChat Platform and / or CHAT. Even if you do receive such information, you
+                may not receive it on a timely basis. It is possible that you may not be aware of
+                materially adverse changes that have occurred with respect to the OpenChat Platform
+                and/or CHAT in a timely manner. As a result of these difficulties, as well as other
+                uncertainties, you may not have accurate or accessible information relating to your
+                purchase, which could prevent you from taking actions with the potential to prevent
+                adverse consequences relating to your holding of CHAT.
+            </p>
+        </li>
+        <li>
+            <h3>CHAT may not be classified as unregulated</h3>
+            <p>
+                Although we intend for CHAT to be classified as unregulated, the regulatory position
+                of cryptoassets can be uncertain and subject to change. This may, at a later date,
+                cause us to reclassify CHAT as a security, in which case CHAT may be subject to
+                restrictions on resale and transfer.
+            </p>
+        </li>
+        <li>
+            <h3>Voting power</h3>
+            <p>
+                Whilst CHAT allows CHAT holders to participate in the governance of the OpenChat DAO
+                by voting on proposals, each CHAT holder’s voting power is proportional to the
+                amount of CHAT they have deposited and locked. As such, there is a risk that a small
+                number of CHAT holders may be able to exercise the majority of the voting power from
+                time to time, meaning that other holders of CHAT cannot effectively influence the
+                governance of the OpenChat DAO, and devaluing the CHAT they hold.
+            </p>
+        </li>
+    </ul>
+
+    <HashLinkTarget {onCopyUrl} id="9">
+        <h2>Schedule 2: Content Standards</h2>
+    </HashLinkTarget>
+
+    <p>
+        A Contribution must comply with Applicable Law. In addition, the Content Standards below
+        must be complied with in spirit as well as to the letter. The Content Standards apply to
+        each part of any Contribution as well as to its whole. We will determine, at our discretion,
+        whether a Contribution breaches the Content Standards.
+    </p>
+    <p>A Contribution must not:</p>
+    <ul class="custom_list" style={"--prefix: ''"}>
+        <li>
+            threaten to harm another individual or group of people. This includes direct, indirect,
+            and suggestive threats.
+        </li>
+        <li>
+            solicit, share, or make attempts to distribute content that depicts, promotes, or
+            attempts to normalise child sexual abuse.
+        </li>
+        <li>post content that in any way sexualises children.</li>
+        <li>
+            share sexually explicit or sexually suggestive content without the subject’s knowledge
+            and consent, otherwise known as “revenge porn”. This includes the non-consensual
+            distribution of intimate media that was created either with or without an individual’s
+            consent.
+        </li>
+        <li>
+            share content that glorifies, promotes, or normalises suicide or other acts of physical
+            self-harm. This includes content that encourages others to cut, burn, or starve
+            themselves, as well as content that normalizes eating disorders, such as anorexia and
+            bulimia. Self-harm acts or threats used as a form of emotional manipulation or coercion
+            are also prohibited.
+        </li>
+        <li>
+            share real media depicting gore, excessive violence, or animal harm, especially with the
+            intention to harass or shock others.
+        </li>
+        <li>
+            promote, coordinate, or execute financial scams. Promoting a particular crypto token or
+            NFT does not break this rule in general.
+        </li>
+        <li>
+            be sent persistently as a spam message. This includes repeatedly sending the same or
+            meaningless messages, either in the same chat or across multiple chats.
+        </li>
+    </ul>
+
+    <HashLinkTarget {onCopyUrl} id="10">
+        <h2>Schedule 3: Chat features</h2>
+    </HashLinkTarget>
+    <p>
+        <strong
+            >PLEASE NOTE THAT THE BELOW REPRESENTS FEATURES OF CHAT AS AT THE CURRENT DATE OF THESE
+            TERMS. HOWEVER, THERE MAY BE LEGAL, REGULATORY OR COMMERCIAL REASONS WHY CHAT FEATURE
+            MAY IN THE FUTURE CHANGE FROM THE BELOW.</strong>
+    </p>
+    <p>CHAT gives CHAT holders the following rights:</p>
+    <p>CHAT may be:</p>
+    <ul class="custom_list" style={"--prefix: ''"}>
+        <li>
+            deposited and locked as neurons to participate in the OpenChat DAO governance by voting
+            on proposals;
+        </li>
+        <li>
+            distributed as a voting reward in accordance with the DAO governance rules as set out at
+            https://oc.app/blog/governance.
+        </li>
+        <li>used to purchase a Diamond Membership; and</li>
+        <li>
+            used to gain access to additional features that we may, at our discretion, make
+            available from time to time.
+        </li>
+    </ul>
+    <p>
+        Please see Section G: Participating in OpenChat DAO to find out where you can obtain
+        information on the OpenChat DAO.
+    </p>
+    <p>
+        <strong>
+            Please note that we have <em>no</em> obligation to give CHAT any rights or attributes other
+            than those outlined above, and CHAT shall not give you any rights in relation to any aspect
+            of any business conducted at any time by us other than as explicitly stated above.
+        </strong>
+    </p>
+
+    <HashLinkTarget {onCopyUrl} id="11">
+        <h2>Schedule 4: Multiple accounts</h2>
+    </HashLinkTarget>
+
+    <p>
+        You may not buy or sell OpenChat accounts, nor may you create multiple accounts on the
+        OpenChat Platform:
+    </p>
+    <ul class="custom_list" style={"--prefix: ''"}>
+        <li>that you aren't actively using</li>
+        <li>to squat on usernames with the intention of selling them</li>
+        <li>to farm tokens</li>
+        <li>to give the appearance of activity in a group/community</li>
+        <li>to DoS the platform or otherwise drain platform resources</li>
+        <li>any other nefarious purpose</li>
+    </ul>
+</div>
+
+<style lang="scss">
+    .preamble p {
+        margin-bottom: toRem(24);
+    }
+
+    .section {
+        h2,
+        h3 {
+            margin-bottom: $sp4;
+            display: inline-block;
+        }
+        p {
+            margin-bottom: $sp4;
+        }
+        h2 {
+            @include font(bold, normal, fs-120);
+        }
+
+        h3 {
+            @include font(bold, normal, fs-110);
+        }
+
+        .custom_list.bold > li > h3 {
+            padding-left: 60px;
+        }
+
+        .custom_list {
+            --suffix: ")";
+            list-style-type: none;
+            counter-reset: item;
+            @include font(book, normal, fs-100);
+            margin-bottom: $sp5;
+        }
+
+        .custom_list > li {
+            padding-left: 60px;
+            position: relative;
+            margin-bottom: $sp3;
+        }
+
+        .custom_list.bold > li {
+            padding-left: 0;
+        }
+
+        .custom_list > li::before {
+            content: var(--prefix) counter(item) var(--suffix);
+            counter-increment: item;
+            font-weight: normal;
+            position: absolute;
+            left: 0;
+        }
+
+        .custom_list.bold > li::before {
+            font-weight: bold;
+        }
+    }
+
+    .interpretation {
+        display: grid;
+        margin-bottom: $sp4;
+        grid-template-columns: 1fr;
+        gap: $sp3;
+
+        :nth-child(2n-1) {
+            font-weight: bold;
+        }
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/UserPill.svelte b/frontend/app/src/mobile/features/onboard/UserPill.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/UserPill.svelte
rename to frontend/app/src/mobile/features/onboard/UserPill.svelte
diff --git a/frontend/app/src/components_mobile/pincode/Pincode.svelte b/frontend/app/src/mobile/features/pincode/Pincode.svelte
similarity index 98%
rename from frontend/app/src/components_mobile/pincode/Pincode.svelte
rename to frontend/app/src/mobile/features/pincode/Pincode.svelte
index f1e15bf8fa..eb5ea21ffe 100644
--- a/frontend/app/src/components_mobile/pincode/Pincode.svelte
+++ b/frontend/app/src/mobile/features/pincode/Pincode.svelte
@@ -11,7 +11,7 @@
 
     import { i18nKey } from "@src/i18n/i18n";
     import type { ResourceKey } from "@client";
-    import Translatable from "../Translatable.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
     import PincodeInput from "./PincodeInput.svelte";
 
     interface Props {
diff --git a/frontend/app/src/components_mobile/pincode/PincodeInput.svelte b/frontend/app/src/mobile/features/pincode/PincodeInput.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/pincode/PincodeInput.svelte
rename to frontend/app/src/mobile/features/pincode/PincodeInput.svelte
diff --git a/frontend/app/src/components_mobile/home/profile/BadgeContainer.svelte b/frontend/app/src/mobile/features/profile/BadgeContainer.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/profile/BadgeContainer.svelte
rename to frontend/app/src/mobile/features/profile/BadgeContainer.svelte
diff --git a/frontend/app/src/mobile/features/profile/Badges.svelte b/frontend/app/src/mobile/features/profile/Badges.svelte
new file mode 100644
index 0000000000..eb2645d533
--- /dev/null
+++ b/frontend/app/src/mobile/features/profile/Badges.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+    import { disableChit } from "@src/stores/settings";
+    import { ColourVars, Container } from "component-lib";
+    import type { DiamondMembershipStatus } from "@client";
+    import Diamond from "@src/mobile/ui/icons/Diamond.svelte";
+    import ChitEarnedBadge from "./ChitEarnedBadge.svelte";
+    import Streak from "./Streak.svelte";
+    import BadgeContainer, { type BadgeSize } from "./BadgeContainer.svelte";
+    import Fingerprint from "svelte-material-icons/Fingerprint.svelte";
+
+    interface Props {
+        diamondStatus?: DiamondMembershipStatus["kind"] | undefined;
+        streak?: number;
+        uniquePerson?: boolean;
+        chitEarned?: number;
+        withFingerprint?: boolean;
+        size?: BadgeSize;
+        borderColor?: string;
+        forceStreakBadge?: boolean;
+    }
+
+    // uniquePerson prop retained on Props for callers, but unused - the verified badge is suspended.
+    let {
+        diamondStatus = undefined,
+        streak = 0,
+        chitEarned = 0,
+        withFingerprint = false,
+        size = "default",
+        borderColor,
+        forceStreakBadge = false,
+    }: Props = $props();
+</script>
+
+{#snippet fingerprint()}
+    <BadgeContainer {borderColor} {size} backgroundColor={ColourVars.background2}>
+        <Fingerprint size={size === "large" ? "1.25rem" : "0.85rem"} />
+    </BadgeContainer>
+{/snippet}
+
+<Container
+    supplementalClass={`badges ${size === "large" ? "large" : ""}`}
+    crossAxisAlignment={"center"}
+    gap={"xs"}
+    width={"hug"}
+    padding={["xxs", "zero"]}>
+    {#if withFingerprint}
+        {@render fingerprint()}
+    {/if}
+    <Diamond {size} {borderColor} status={diamondStatus} />
+    <!-- Verified user (DecideAI) badge is suspended - not rendered. -->
+    {#if !$disableChit || forceStreakBadge}
+        <Streak {size} {borderColor} days={streak} />
+        <ChitEarnedBadge {size} {borderColor} earned={chitEarned} />
+    {/if}
+</Container>
+
+<style lang="scss">
+    :global {
+        .badges {
+            overflow: visible;
+
+            > *:not(:first-child) {
+                z-index: 1;
+                margin-left: -0.5rem;
+            }
+
+            &.large > *:not(:first-child) {
+                margin-left: -0.65rem;
+            }
+        }
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/profile/ChitEarnedBadge.svelte b/frontend/app/src/mobile/features/profile/ChitEarnedBadge.svelte
new file mode 100644
index 0000000000..d2d421abe3
--- /dev/null
+++ b/frontend/app/src/mobile/features/profile/ChitEarnedBadge.svelte
@@ -0,0 +1,102 @@
+<script lang="ts">
+    import { Body, Caption, ColourVars, Tooltip } from "component-lib";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { chitBands, findClosestChitBand } from "@client";
+    import BadgeContainer, { type BadgeSize } from "./BadgeContainer.svelte";
+
+    interface Props {
+        earned: number;
+        showTooltip?: boolean;
+        size?: BadgeSize;
+        borderColor?: string;
+    }
+
+    let { earned, showTooltip = true, size = "default", borderColor }: Props = $props();
+
+    let closest = $derived(findClosestChitBand(earned));
+
+    let chitIconText = $derived(
+        closest === 1_000_000 ? "1 m" : Math.floor(closest / 1_000).toString(),
+    );
+    let show = $derived(closest > 0);
+</script>
+
+{#snippet renderChit()}
+    <BadgeContainer
+        {size}
+        {borderColor}
+        supplementalClass="chit-badge"
+        backgroundColor={ColourVars.tertiaryMuted}
+        backgroundImage={"/assets/oc_logo_no_bg.svg"}>
+        {#if size === "default"}
+            <Caption align="center" fontWeight="bold">{chitIconText}</Caption>
+        {:else}
+            <Body align="center" fontWeight="bold">{chitIconText}</Body>
+        {/if}
+    </BadgeContainer>
+{/snippet}
+
+{#if show}
+    {#if showTooltip}
+        <Tooltip position="top" align="middle">
+            {@render renderChit()}
+            {#snippet popup()}
+                <Translatable
+                    resourceKey={i18nKey("prizes.minChitEarnedValue", {
+                        n: chitBands.get(closest) ?? "0",
+                    })}></Translatable>
+            {/snippet}
+        </Tooltip>
+    {:else}
+        <div class="wrapper">
+            <div>
+                <Translatable
+                    resourceKey={i18nKey("prizes.minChitEarnedValue", {
+                        n: chitBands.get(closest) ?? "0",
+                    })}></Translatable>
+            </div>
+            {@render renderChit()}
+        </div>
+    {/if}
+{/if}
+
+<style lang="scss">
+    :global {
+        .chit-badge {
+            .caption {
+                z-index: 1;
+                scale: 0.8;
+                width: 100%;
+                text-shadow:
+                    -1px -1px 0 var(--tertiary-muted),
+                    1px -1px 0 var(--tertiary-muted),
+                    -1px 1px 0 var(--tertiary-muted),
+                    1px 1px 0 var(--tertiary-muted);
+            }
+        }
+    }
+
+    .icon {
+        $size: 17px;
+        background-repeat: no-repeat;
+        width: $size;
+        height: $size;
+        background-position: 50%;
+        background-image: url("/assets/chit.svg");
+        filter: saturate(0.8);
+        text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
+        display: flex;
+        align-items: center;
+        color: #fff;
+        justify-content: center;
+        @include font(bold, normal, fs-50);
+        font-size: 8px;
+    }
+
+    .wrapper {
+        display: flex;
+        align-items: center;
+        gap: $sp2;
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/profile/ChitEventsForDay.svelte b/frontend/app/src/mobile/features/profile/ChitEventsForDay.svelte
new file mode 100644
index 0000000000..03b4cf6cde
--- /dev/null
+++ b/frontend/app/src/mobile/features/profile/ChitEventsForDay.svelte
@@ -0,0 +1,113 @@
+<script lang="ts">
+    import { type ChitEvent } from "@client";
+    import Tooltip from "@src/desktop/ui/tooltip/Tooltip.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    interface Props {
+        events: ChitEvent[];
+        day: Date;
+        selectedMonth: number;
+        utcMode: boolean;
+    }
+
+    let { events, day, selectedMonth, utcMode }: Props = $props();
+
+    let otherMonth = $derived(day.getMonth() !== selectedMonth);
+</script>
+
+{#snippet eventtime(t: string)}
+    <span class="time">({t})</span>
+{/snippet}
+
+{#if events.length === 0}
+    <div class="day">{day.getDate()}</div>
+{:else}
+    <div class="day has-events" class:otherMonth>
+        <Tooltip autoWidth fill position="top" align={"middle"}>
+            {day.getDate()}
+            {#snippet popupTemplate()}
+                <div class="tt">
+                    {#each events as event}
+                        {@const time = new Date(Number(event.timestamp))}
+                        {@const timeStr = utcMode
+                            ? time.toLocaleTimeString("en-GB", { timeZone: "UTC" })
+                            : time.toLocaleTimeString()}
+                        {#if event.reason.kind === "daily_claim" || event.reason.kind === "daily_claim_reinstated" || event.reason.kind === "streak_insurance_claim"}
+                            <p>
+                                {`🚀 Daily claim: ${event.amount.toLocaleString()}`}
+                                {@render eventtime(timeStr)}
+                            </p>
+                        {:else if event.reason.kind === "achievement_unlocked"}
+                            <p>
+                                🥳 <Translatable
+                                    resourceKey={i18nKey(`learnToEarn.${event.reason.type}`)} />: {event.amount.toLocaleString()}
+                                {@render eventtime(timeStr)}
+                            </p>
+                        {:else if event.reason.kind === "purchased_premium_item"}
+                            <p>
+                                🤑 <Translatable resourceKey={i18nKey("premiumItem.purchased")} />: {event.amount.toLocaleString()}
+                                {@render eventtime(timeStr)}
+                            </p>
+                        {:else if event.reason.kind === "referral"}
+                            <p>
+                                🤝 <Translatable
+                                    resourceKey={i18nKey(
+                                        `chitReferralRewardReason.${event.reason.type}`,
+                                    )} />: {event.amount.toLocaleString()}
+                                {@render eventtime(timeStr)}
+                            </p>
+                        {:else if event.reason.kind === "meme_contest_winner"}
+                            <p>
+                                {`🏆️ Meme contest win: ${event.amount.toLocaleString()}`}
+                                {@render eventtime(timeStr)}
+                            </p>
+                        {:else if event.reason.kind === "external_achievement_unlocked"}
+                            <p>
+                                🔓 <Translatable resourceKey={i18nKey(event.reason.name)} />: {event.amount.toLocaleString()}
+                                {@render eventtime(timeStr)}
+                            </p>
+                        {/if}
+                    {/each}
+                </div>
+            {/snippet}
+        </Tooltip>
+    </div>
+{/if}
+
+<style lang="scss">
+    :global(.day.has-events .tooltip-popup) {
+        word-wrap: unset;
+    }
+
+    .day {
+        width: toRem(36);
+        height: toRem(36);
+        margin: var(--sp-xs);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--rad-circle);
+
+        &.has-events {
+            background: var(--primary);
+            color: var(--text-on-primary);
+            transition: background-color 300ms ease-in-out;
+        }
+
+        &.otherMonth {
+            background: none;
+            color: var(--text-secondary);
+        }
+    }
+
+    .tt {
+        text-align: start;
+        @include font(book, normal, fs-100);
+        padding: $sp3;
+    }
+
+    .time {
+        @include font(book, normal, fs-60);
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/profile/ChooseSignInOption.svelte b/frontend/app/src/mobile/features/profile/ChooseSignInOption.svelte
new file mode 100644
index 0000000000..57a7bdfc50
--- /dev/null
+++ b/frontend/app/src/mobile/features/profile/ChooseSignInOption.svelte
@@ -0,0 +1,156 @@
+<script lang="ts">
+    import { Body, Container, Form, Input } from "component-lib";
+    import { AuthProvider, selectedAuthProviderStore, type OpenChat } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import SendIcon from "svelte-material-icons/Send.svelte";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import SignInOption from "./SignInOption.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        mode?: "signin" | "signup";
+        restrictTo?: Set<string>;
+        emailInvalid: boolean;
+        email: string;
+        currentProvider?: AuthProvider | undefined;
+        showMore?: boolean;
+        onLogin: (provider: AuthProvider) => void;
+    }
+
+    let {
+        mode = "signin",
+        restrictTo = new Set(),
+        emailInvalid = $bindable(),
+        email = $bindable(),
+        currentProvider = undefined,
+        showMore = $bindable(false),
+        onLogin,
+    }: Props = $props();
+
+    function buildOptions(
+        selected: AuthProvider | undefined,
+        mode: "signin" | "signup",
+        restrictTo: Set<string>,
+    ): AuthProvider[] {
+        let options = [];
+        const supportsII = "PublicKeyCredential" in window;
+
+        options.push(AuthProvider.EMAIL);
+        options.push(AuthProvider.PASSKEY);
+
+        if (supportsII) {
+            options.push(AuthProvider.II);
+            options.push(AuthProvider.ETH);
+            options.push(AuthProvider.SOL);
+
+            if (mode === "signin") {
+                options.push(AuthProvider.NFID);
+            }
+        } else if (client.isNativeAndroid()) {
+            options.push(AuthProvider.II);
+        }
+
+        if (restrictTo.size > 0) {
+            options = options.filter((o) => {
+                return (
+                    restrictTo.has(o) ||
+                    (o === AuthProvider.II && restrictTo.has("II")) ||
+                    (o === AuthProvider.EMAIL && restrictTo.has("EMAIL")) ||
+                    (o === AuthProvider.PASSKEY && restrictTo.has("PASSKEY")) ||
+                    (o === AuthProvider.ETH && restrictTo.has("ETH")) ||
+                    (o === AuthProvider.SOL && restrictTo.has("SOL")) ||
+                    (o === AuthProvider.NFID && restrictTo.has("NFID"))
+                );
+            });
+        }
+
+        if (selected !== undefined) {
+            let i = options.findIndex((p) => p === selected);
+
+            if (i >= 0) {
+                options.splice(i, 1);
+                options.splice(0, 0, selected);
+            }
+        }
+        return options;
+    }
+
+    function providerName(provider: AuthProvider): string {
+        return provider === AuthProvider.NFID ? "NFID (Legacy)" : provider;
+    }
+
+    function isEmailValid(email: string): boolean {
+        return email.length > 0;
+    }
+
+    let options = $derived(
+        buildOptions(currentProvider ?? $selectedAuthProviderStore, mode, restrictTo),
+    );
+    let showAllOptions = $derived(
+        (currentProvider ?? $selectedAuthProviderStore) === undefined ||
+            showMore ||
+            mode === "signup",
+    );
+    $effect(() => {
+        const invalid = !isEmailValid(email);
+        if (emailInvalid !== invalid) {
+            emailInvalid = invalid;
+        }
+    });
+</script>
+
+<Container gap={"lg"} direction={"vertical"}>
+    {#each options as provider, i}
+        {#if showAllOptions || i === 0}
+            <Container
+                supplementalClass={`option ${
+                    showAllOptions && options.length > 1 && i === 0 ? "separate" : ""
+                }`}>
+                {#if provider === AuthProvider.EMAIL}
+                    <Form onSubmit={() => onLogin(provider)}>
+                        <Container gap={"lg"} crossAxisAlignment={"center"}>
+                            <Container width={"fill"}>
+                                <Input
+                                    bind:value={email}
+                                    minlength={10}
+                                    maxlength={200}
+                                    placeholder={interpolate(
+                                        $_,
+                                        i18nKey(
+                                            mode === "signin"
+                                                ? "loginDialog.signinEmailPlaceholder"
+                                                : "loginDialog.signupEmailPlaceholder",
+                                        ),
+                                    )} />
+                            </Container>
+                            <Container
+                                width={"hug"}
+                                onClick={emailInvalid ? undefined : () => onLogin(provider)}>
+                                <SendIcon size={"1.5em"} />
+                            </Container>
+                        </Container>
+                    </Form>
+                {:else}
+                    <SignInOption
+                        hollow={provider !== AuthProvider.PASSKEY}
+                        name={i18nKey(
+                            mode === "signin" ? "loginDialog.signinWith" : "loginDialog.signupWith",
+                            { provider: providerName(provider) },
+                        )}
+                        onClick={() => onLogin(provider)} />
+                {/if}
+            </Container>
+        {/if}
+    {/each}
+
+    {#if !showAllOptions && options.length > 1}
+        <Container mainAxisAlignment={"center"} onClick={() => (showMore = true)}>
+            <Body width={"hug"} colour={"secondary"}>
+                <Translatable resourceKey={i18nKey("loginDialog.showMore")} />
+            </Body>
+        </Container>
+    {/if}
+</Container>
diff --git a/frontend/app/src/mobile/features/profile/ConfirmDeleteAccount.svelte b/frontend/app/src/mobile/features/profile/ConfirmDeleteAccount.svelte
new file mode 100644
index 0000000000..fd525cc10c
--- /dev/null
+++ b/frontend/app/src/mobile/features/profile/ConfirmDeleteAccount.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+    import type { DelegationChain, ECDSAKeyIdentity } from "@icp-sdk/core/identity";
+    import { Column, CommonButton, Container, Sheet, Title } from "component-lib";
+    import { AuthProvider, i18nKey, OpenChat } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import Delete from "svelte-material-icons/DeleteForeverOutline.svelte";
+    import { interpolate } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import ReAuthenticate from "./ReAuthenticate.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        deleting: boolean;
+        onClose: () => void;
+        authenticating?: boolean;
+    }
+
+    let { deleting = $bindable(), onClose, authenticating = $bindable(false) }: Props = $props();
+
+    function deleteAccount(detail: {
+        key: ECDSAKeyIdentity;
+        delegation: DelegationChain;
+        provider: AuthProvider;
+    }) {
+        deleting = true;
+        authenticating = false;
+        return client
+            .deleteCurrentUser(detail.key.getKeyPair(), detail.delegation.toJSON())
+            .then((success) => {
+                if (!success) {
+                    toastStore.showFailureToast(i18nKey("danger.deleteAccountFailed"));
+                } else {
+                    onClose();
+                }
+            })
+            .finally(() => (deleting = false));
+    }
+</script>
+
+<Sheet>
+    <Column gap={"xl"} padding={"xl"}>
+        <Title fontWeight={"bold"}>
+            <Translatable resourceKey={i18nKey("danger.deleteAccount")} />
+        </Title>
+        {#if authenticating}
+            <ReAuthenticate onSuccess={deleteAccount} message={i18nKey("danger.reauth")} />
+        {:else}
+            <Markdown
+                inline={false}
+                text={interpolate($_, i18nKey("danger.deleteAccountConfirm"))} />
+        {/if}
+        <Container gap={"md"} mainAxisAlignment={"end"} crossAxisAlignment={"end"}>
+            <CommonButton mode={"default"} onClick={onClose} size={"small_text"}>
+                <Translatable resourceKey={i18nKey("cancel")}></Translatable>
+            </CommonButton>
+            {#if !authenticating}
+                <CommonButton
+                    mode={"active"}
+                    disabled={deleting}
+                    loading={deleting}
+                    onClick={() => (authenticating = true)}
+                    size={"medium"}>
+                    {#snippet icon(color, size)}
+                        <Delete {color} {size}></Delete>
+                    {/snippet}
+                    <Translatable
+                        resourceKey={i18nKey(
+                            deleting ? "danger.deleting" : "danger.deleteAccount",
+                        )} />
+                </CommonButton>
+            {/if}
+        </Container>
+    </Column>
+</Sheet>
diff --git a/frontend/app/src/mobile/features/profile/EmailSigninFeedback.svelte b/frontend/app/src/mobile/features/profile/EmailSigninFeedback.svelte
new file mode 100644
index 0000000000..743f73f349
--- /dev/null
+++ b/frontend/app/src/mobile/features/profile/EmailSigninFeedback.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+    import { iconSize } from "@client";
+    import CopyIcon from "svelte-material-icons/ContentCopy.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    interface Props {
+        polling: boolean;
+        code: string | undefined;
+        onCopy?: (code?: string) => void;
+    }
+
+    let { polling, code, onCopy }: Props = $props();
+</script>
+
+<p>
+    <Translatable
+        resourceKey={i18nKey(!polling ? "loginDialog.generatingLink" : "loginDialog.checkEmail")} />
+
+    {#if polling && code !== undefined}
+        <div class="code-wrapper">
+            <div class="code">
+                {code}
+            </div>
+            <div class="copy" onclick={() => onCopy?.(code)}>
+                <CopyIcon size={$iconSize} color={"var(--icon-txt)"} />
+            </div>
+        </div>
+    {/if}
+</p>
+
+<style lang="scss">
+    .code-wrapper {
+        margin-top: $sp4;
+        display: flex;
+        gap: $sp3;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .code {
+        font-family: Menlo, Monaco, "Courier New", monospace;
+        @include font-size(fs-160);
+    }
+
+    .copy {
+        cursor: pointer;
+        position: relative;
+        top: 2px;
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/profile/LearnToEarn.svelte b/frontend/app/src/mobile/features/profile/LearnToEarn.svelte
new file mode 100644
index 0000000000..ebba7eac47
--- /dev/null
+++ b/frontend/app/src/mobile/features/profile/LearnToEarn.svelte
@@ -0,0 +1,276 @@
+<script lang="ts">
+    import {
+        Body,
+        BodySmall,
+        Chip,
+        ColourVars,
+        Column,
+        Row,
+        Sheet,
+        Title,
+        transition,
+    } from "component-lib";
+    import {
+        OpenChat,
+        achievements,
+        achievementsStore,
+        currentUserIdStore,
+        currentUserStore,
+        type Achievement,
+        type ExternalAchievement,
+    } from "@client";
+    import { getContext, onMount } from "svelte";
+    import { _ } from "svelte-i18n";
+    import CheckCircle from "svelte-material-icons/CheckCircle.svelte";
+    import CheckCircleOutline from "svelte-material-icons/CheckCircleOutline.svelte";
+    import InformationOutline from "svelte-material-icons/InformationOutline.svelte";
+    import RobotHappy from "svelte-material-icons/RobotHappyOutline.svelte";
+    import RobotLove from "svelte-material-icons/RobotLoveOutline.svelte";
+    import Tooltip from "@src/desktop/ui/tooltip/Tooltip.svelte";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import { now } from "@src/stores/time";
+    import Progress from "@src/mobile/shared/Progress.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import NothingToSee from "@src/mobile/shared/NothingToSee.svelte";
+
+    const client = getContext<OpenChat>("client");
+    const enabled = new Set<string>([
+        "streak_3",
+        "streak_7",
+        "streak_14",
+        "streak_30",
+        "streak_100",
+        "streak_365",
+        "set_bio",
+        "set_avatar",
+        "joined_group",
+        "joined_community",
+        "sent_direct_message",
+        "received_direct_message",
+        "upgraded_to_diamond",
+        "set_display_name",
+        "sent_text",
+        "reacted_to_message",
+        "sent_file",
+        "sent_image",
+        "sent_poll",
+        "sent_crypto",
+        "sent_video",
+        "sent_audio",
+        "sent_giphy",
+        "sent_prize",
+        "sent_meme",
+        "sent_swap_offer",
+        "quote_replied",
+        "replied_in_thread",
+        "edited_message",
+        "deleted_message",
+        "tipped_message",
+        "forwarded_message",
+        "received_crypto",
+        "received_reaction",
+        "had_message_tipped",
+        "voted_on_poll",
+        "sent_reminder",
+        "set_community_display_name",
+        "joined_call",
+        "set_pin",
+        "favourited_chat",
+        "pinned_chat",
+        "followed_thread",
+        "swapped_from_wallet",
+        "accepted_swap_offer",
+        "referred_1st_user",
+        "referred_3rd_user",
+        "referred_10th_user",
+        "referred_20th_user",
+        "referred_50th_user",
+        "upgrade_to_gold_diamond",
+    ]);
+
+    interface Props {
+        onClose: () => void;
+    }
+    let { onClose }: Props = $props();
+
+    let selectedTab: "todo" | "done" | "external" = $state("todo");
+
+    function filter(achievement: Achievement): boolean {
+        return enabled.has(achievement) || $achievementsStore.has(achievement);
+    }
+
+    function selectTab(tab: "todo" | "done" | "external") {
+        transition(["fade"], () => {
+            selectedTab = tab;
+        });
+    }
+
+    onMount(() => {
+        client.getExternalAchievements().then((achievements) => {
+            externalAchievements = achievements.sort((a, b) => b.chitReward - a.chitReward);
+        });
+    });
+    let filtered = $derived([...achievements].filter(filter));
+    let [internalAchieved, internalNotAchieved] = $derived(
+        client.partition(filtered, (a) => $achievementsStore.has(a)),
+    );
+    let externalAchievements: ExternalAchievement[] = $state([]);
+    let totalAchievements = $derived(filtered.length + externalAchievements.length);
+    let [externalAchieved, externalNotAchieved] = $derived(
+        client.partition(externalAchievements, (a) => {
+            return $achievementsStore.has(a.name);
+        }),
+    );
+    let achieved = $derived([
+        ...internalAchieved.map((a) => `learnToEarn.${a}`),
+        ...externalAchieved.map((a) => a.name),
+    ]);
+    let percComplete = $derived(Math.round((achieved.length / totalAchievements) * 100));
+    let validExternalNotAchieved = $derived(
+        externalNotAchieved.filter((a) => !a.budgetExhausted && BigInt($now) < a.expires),
+    );
+</script>
+
+<Sheet onDismiss={onClose}>
+    <Column gap={"lg"} padding={"xl"}>
+        <Title fontWeight={"bold"}>
+            <Translatable resourceKey={i18nKey("learnToEarn.title")} />
+        </Title>
+
+        <Row mainAxisAlignment={"spaceAround"} gap={"lg"}>
+            <Chip
+                width={{ share: 1 }}
+                onClick={() => selectTab("todo")}
+                mode={"todo" === selectedTab ? "rounded" : "unselected"}>
+                <Translatable resourceKey={i18nKey("learnToEarn.todo")} />
+            </Chip>
+            {#if externalAchievements.length > 0}
+                <Chip
+                    width={{ share: 2 }}
+                    onClick={() => selectTab("external")}
+                    mode={"external" === selectedTab ? "rounded" : "unselected"}>
+                    <Row
+                        mainAxisAlignment={"center"}
+                        width={"hug"}
+                        crossAxisAlignment={"center"}
+                        gap={"xs"}>
+                        <Translatable resourceKey={i18nKey("learnToEarn.external")} />
+                        <Tooltip position={"bottom"} align={"end"}>
+                            <InformationOutline
+                                size={"1.2em"}
+                                color={selectedTab === "external"
+                                    ? ColourVars.primary
+                                    : ColourVars.textSecondary} />
+                            {#snippet popupTemplate()}
+                                <Translatable resourceKey={i18nKey("learnToEarn.externalInfo")} />
+                            {/snippet}
+                        </Tooltip>
+                    </Row>
+                </Chip>
+            {/if}
+            <Chip
+                width={{ share: 1 }}
+                onClick={() => selectTab("done")}
+                mode={"done" === selectedTab ? "rounded" : "unselected"}>
+                <Translatable resourceKey={i18nKey("learnToEarn.done")} />
+            </Chip>
+        </Row>
+
+        {#if selectedTab === "todo"}
+            {#if internalNotAchieved.length === 0}
+                <NothingToSee
+                    padding={["xl", "zero"]}
+                    height={{ size: "12rem" }}
+                    title={"Good job!"}
+                    subtitle={interpolate($_, i18nKey("learnToEarn.nothingLeftToDo"))}>
+                    {#snippet icon(color, size)}
+                        <RobotHappy {color} {size} />
+                    {/snippet}
+                </NothingToSee>
+            {:else}
+                <Column gap={"sm"} maxHeight={"25rem"}>
+                    {#each internalNotAchieved as achievement}
+                        <Row crossAxisAlignment={"center"} gap={"sm"}>
+                            <CheckCircleOutline size={"1.3rem"} color={ColourVars.textPrimary} />
+                            <Body>
+                                <Translatable resourceKey={i18nKey(`learnToEarn.${achievement}`)} />
+                            </Body>
+                        </Row>
+                    {/each}
+                </Column>
+            {/if}
+        {/if}
+        {#if selectedTab === "done"}
+            {#if achieved.length === 0}
+                <NothingToSee
+                    padding={["xl", "zero"]}
+                    height={{ size: "12rem" }}
+                    title={"Keep trying!"}
+                    subtitle={interpolate($_, i18nKey("learnToEarn.nothingDone"))}>
+                    {#snippet icon(color, size)}
+                        <RobotLove {color} {size} />
+                    {/snippet}
+                </NothingToSee>
+            {:else}
+                <Column gap={"sm"} maxHeight={"25rem"}>
+                    {#each achieved as achievement}
+                        <Row crossAxisAlignment={"center"} gap={"sm"}>
+                            <CheckCircle size={"1.3rem"} color={ColourVars.success} />
+                            <Body>
+                                <Translatable resourceKey={i18nKey(achievement)} />
+                            </Body>
+                        </Row>
+                    {/each}
+                </Column>
+            {/if}
+        {/if}
+        {#if selectedTab === "external"}
+            {#if validExternalNotAchieved.length === 0}
+                <NothingToSee
+                    padding={["xl", "zero"]}
+                    height={{ size: "12rem" }}
+                    title={"Good job!"}
+                    subtitle={interpolate($_, i18nKey("learnToEarn.nothingLeftToDo"))}>
+                    {#snippet icon(color, size)}
+                        <RobotHappy {color} {size} />
+                    {/snippet}
+                </NothingToSee>
+            {:else}
+                <Column gap={"sm"} maxHeight={"25rem"}>
+                    {#each validExternalNotAchieved as achievement}
+                        <Row crossAxisAlignment={"center"} gap={"sm"}>
+                            <img
+                                class="logo"
+                                src={client.achievementLogo(achievement.id)}
+                                alt={achievement.name} />
+                            <a
+                                target={"_blank"}
+                                href={`${achievement.url}?oc_userid=${$currentUserIdStore}&oc_username=${$currentUserStore.username}`}>
+                                {achievement.name}
+                            </a>
+                            <Body>
+                                {achievement.chitReward.toLocaleString()}
+                            </Body>
+                        </Row>
+                    {/each}
+                </Column>
+            {/if}
+        {/if}
+        <Column padding={["md", "zero"]} gap={"sm"}>
+            <Progress size={"0.5rem"} percent={percComplete}></Progress>
+            <BodySmall align={"center"} colour={"textSecondary"}>
+                <Translatable
+                    resourceKey={i18nKey("learnToEarn.percentageComplete", {
+                        perc: percComplete,
+                    })} />
+            </BodySmall>
+        </Column>
+    </Column>
+</Sheet>
+
+<style lang="scss">
+    .logo {
+        width: toRem(20);
+        height: toRem(20);
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/profile/LinkAccounts.svelte b/frontend/app/src/mobile/features/profile/LinkAccounts.svelte
new file mode 100644
index 0000000000..d765bec82f
--- /dev/null
+++ b/frontend/app/src/mobile/features/profile/LinkAccounts.svelte
@@ -0,0 +1,497 @@
+<script lang="ts">
+    import { AuthClient } from "@icp-sdk/auth/client";
+    import { DelegationChain, ECDSAKeyIdentity } from "@icp-sdk/core/identity";
+    import { Principal } from "@icp-sdk/core/principal";
+    import {
+        Body,
+        Button,
+        ColourVars,
+        Column,
+        CommonButton,
+        Container,
+        Row,
+        StatusCard,
+        Subtitle,
+    } from "component-lib";
+    import {
+        AuthProvider,
+        InMemoryAuthClientStorage,
+        iconSize,
+        selectedAuthProviderStore,
+        type AuthenticationPrincipal,
+        type OpenChat,
+        type ResourceKey,
+        type WebAuthnKey,
+    } from "@client";
+    import { ErrorCode } from "@shared";
+    import { getContext, onMount } from "svelte";
+    import ArrowRightBoldOutline from "svelte-material-icons/ArrowRightBoldOutline.svelte";
+    import LinkVariantPlus from "svelte-material-icons/LinkVariantPlus.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { configKeys } from "@src/utils/config";
+    import {
+        EmailPollerError,
+        EmailPollerSuccess,
+        EmailSigninHandler,
+    } from "@src/utils/signin";
+    import ErrorMessage from "@src/mobile/shared/ErrorMessage.svelte";
+    import InternetIdentityLogo from "@src/mobile/ui/icons/InternetIdentityLogo.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import EmailSigninFeedback from "./EmailSigninFeedback.svelte";
+    import ChooseSignInOption from "./ChooseSignInOption.svelte";
+    import SignInOption from "./SignInOption.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        explanations: ResourceKey[];
+        iiPrincipal: string | undefined;
+        linkInternetIdentity?: boolean;
+        onProceed?: () => void;
+        onClose?: () => void;
+    }
+
+    let {
+        explanations,
+        iiPrincipal = $bindable(),
+        linkInternetIdentity = true,
+        onProceed,
+        onClose,
+    }: Props = $props();
+
+    iiPrincipal;
+
+    type IdentityDetail = {
+        key: ECDSAKeyIdentity;
+        delegation: DelegationChain;
+        provider: AuthProvider;
+        webAuthnKey?: WebAuthnKey;
+    };
+
+    type ApproverIdentity = { kind: "approver"; initiator: IdentityDetail };
+    type InitiatorIdentity = { kind: "initiator" };
+    type ReadyToLink = {
+        kind: "ready_to_link";
+        approver: IdentityDetail;
+        initiator: IdentityDetail;
+    };
+    type LinkStage = ApproverIdentity | InitiatorIdentity | ReadyToLink;
+
+    type ProviderStep =
+        | "choose_provider"
+        | "choose_eth_wallet"
+        | "choose_sol_wallet"
+        | "signing_in_with_email";
+
+    let error: string | undefined = $state();
+    let emailSigninHandler = new EmailSigninHandler(client, "account_linking", false);
+    let step: "explain" | "linking" = $state("explain");
+    let substep = $state<LinkStage>({ kind: "initiator" });
+    let emailInvalid = $state(false);
+    let email = $state("");
+    let providerStep: ProviderStep = $state("choose_provider");
+    let linking = $state(false);
+    let loggingInInitiator = false;
+    let verificationCode: string | undefined = $state(undefined);
+    let accounts: (AuthenticationPrincipal & { provider: AuthProvider })[] = $state([]);
+
+    let currentIdentity = $derived(accounts.find((a) => a.isCurrentIdentity));
+    let currentProvider = $derived(currentIdentity?.provider ?? $selectedAuthProviderStore);
+    let restrictTo = $derived(
+        substep.kind === "approver" && currentProvider !== undefined
+            ? new Set<string>([currentProvider])
+            : new Set<string>([AuthProvider.PASSKEY, AuthProvider.II, AuthProvider.EMAIL]),
+    );
+
+    onMount(() => {
+        client.getAuthenticationPrincipals().then((a) => (accounts = a));
+        emailSigninHandler.addEventListener("email_signin_event", emailEvent);
+        return () => {
+            emailSigninHandler.removeEventListener("email_signin_event", emailEvent);
+            emailSigninHandler.destroy();
+        };
+    });
+
+    function emailEvent(ev: Event): void {
+        if (ev instanceof EmailPollerError) {
+            error = "identity.failure.pollingError";
+        }
+
+        if (ev instanceof EmailPollerSuccess) {
+            authComplete(AuthProvider.EMAIL, ev.detail);
+        }
+    }
+
+    function initiateLinking() {
+        step = "linking";
+    }
+
+    // This is called both for the initiator and the approver
+    async function loginProvider(provider: AuthProvider) {
+        if (substep.kind === "ready_to_link") return;
+
+        const generalError = `identity.failure.login_${substep.kind}`;
+
+        if (emailInvalid && provider === AuthProvider.EMAIL) {
+            return;
+        }
+
+        localStorage.setItem(configKeys.selectedAuthEmail, email);
+        error = undefined;
+
+        if (provider === AuthProvider.PASSKEY) {
+            if (substep.kind === "initiator") {
+                const [identity, delegation, webAuthnKey] = await client.signUpWithWebAuthn(false);
+                substep = {
+                    kind: "approver",
+                    initiator: {
+                        key: identity,
+                        delegation,
+                        webAuthnKey,
+                        provider: AuthProvider.PASSKEY,
+                    },
+                };
+            } else {
+                const initiator = substep.initiator;
+                const [identity, delegation, webAuthnKey] =
+                    await client.reSignInWithCurrentWebAuthnIdentity();
+                substep = {
+                    kind: "ready_to_link",
+                    initiator,
+                    approver: {
+                        key: identity,
+                        delegation,
+                        webAuthnKey,
+                        provider: AuthProvider.PASSKEY,
+                    },
+                };
+            }
+        } else if (provider === AuthProvider.EMAIL) {
+            providerStep = "signing_in_with_email";
+            emailSigninHandler.generateMagicLink(email).then((resp) => {
+                if (resp.kind === "success") {
+                    verificationCode = resp.code;
+                } else if (resp.kind === "email_invalid") {
+                    error = "loginDialog.invalidEmail";
+                } else if (resp.kind === "failed_to_send_email") {
+                    console.debug("generateMagicLink failed_to_send_email", resp.error);
+                    error = "loginDialog.failedToSendEmail";
+                } else {
+                    error = generalError;
+                }
+            });
+        } else if (provider === AuthProvider.ETH) {
+            providerStep = "choose_eth_wallet";
+        } else if (provider === AuthProvider.SOL) {
+            providerStep = "choose_sol_wallet";
+        } else {
+            // This is the II / NFID case
+            const identity = await ECDSAKeyIdentity.generate();
+            const storage = new InMemoryAuthClientStorage();
+            const authClient = AuthClient.create({
+                storage,
+                identity: identity,
+            });
+            authClient
+                .then((c) => {
+                    c.login({
+                        ...client.getAuthClientOptions(provider),
+                        onSuccess: async () => {
+                            const delegation = await storage.get("delegation");
+                            if (delegation) {
+                                const principal = c.getIdentity().getPrincipal().toString();
+                                if (
+                                    substep.kind === "approver" &&
+                                    principal !== client.AuthPrincipal
+                                ) {
+                                    error = "identity.failure.principalMismatch";
+                                } else {
+                                    if (substep.kind === "initiator") {
+                                        iiPrincipal = principal;
+                                        substep = {
+                                            kind: "approver",
+                                            initiator: {
+                                                key: identity,
+                                                delegation: DelegationChain.fromJSON(delegation),
+                                                provider: AuthProvider.II,
+                                            },
+                                        };
+                                    } else if (substep.kind === "approver") {
+                                        substep = {
+                                            kind: "ready_to_link",
+                                            initiator: substep.initiator,
+                                            approver: {
+                                                key: identity,
+                                                delegation: DelegationChain.fromJSON(delegation),
+                                                provider,
+                                            },
+                                        };
+                                    }
+                                }
+                            }
+                        },
+                        onError: (err) => {
+                            console.log(`Failed to log into ${substep.kind}: `, err);
+                            error = generalError;
+                        },
+                    });
+                })
+                .catch((err) => {
+                    console.log(`Failed to log into ${substep.kind}: `, err);
+                    error = generalError;
+                });
+        }
+    }
+
+    // This is where we login in with the Internet Identity that we want to link to our existing OC account aka the Initiator
+    async function loginInternetIdentity() {
+        return loginProvider(AuthProvider.II);
+    }
+
+    function authComplete(
+        provider: AuthProvider.ETH | AuthProvider.SOL | AuthProvider.EMAIL,
+        detail: { kind: "success"; key: ECDSAKeyIdentity; delegation: DelegationChain },
+    ) {
+        providerStep = "choose_provider";
+        if (substep.kind === "approver") {
+            substep = {
+                kind: "ready_to_link",
+                initiator: substep.initiator,
+                approver: {
+                    key: detail.key,
+                    delegation: detail.delegation,
+                    provider,
+                },
+            };
+        } else if (substep.kind === "initiator") {
+            substep = {
+                kind: "approver",
+                initiator: {
+                    key: detail.key,
+                    delegation: detail.delegation,
+                    provider,
+                },
+            };
+        }
+    }
+
+    // Link the two identities that we have built together
+    function linkIdentities() {
+        if (substep.kind !== "ready_to_link" || currentIdentity === undefined) return;
+
+        const { initiator, approver } = substep;
+
+        const approverPrincipal = Principal.selfAuthenticating(
+            new Uint8Array(approver.delegation.publicKey),
+        ).toString();
+
+        if (currentIdentity.principal !== approverPrincipal) {
+            console.log("Principal mismatch: ", currentIdentity.principal, approverPrincipal);
+            error = "identity.failure.principalMismatch";
+            substep = { kind: "initiator" };
+            return;
+        }
+
+        error = undefined;
+        linking = true;
+        client
+            .linkIdentities(
+                initiator.key,
+                initiator.delegation,
+                initiator.provider === AuthProvider.II,
+                initiator.webAuthnKey,
+                approver.key,
+                approver.delegation,
+            )
+            .then((resp) => {
+                if (typeof resp === "object") {
+                    if (resp.kind === "success") {
+                        onProceed?.();
+                    } else if (resp.code === ErrorCode.PrincipalAlreadyUsed) {
+                        console.log("Identity already linked to another OpenChat account: ", resp);
+                        error = "identity.failure.alreadyLinked";
+                        substep = { kind: "initiator" };
+                    } else {
+                        console.log("Failed to link identities: ", resp);
+                        error = "identity.failure.link";
+                        substep = { kind: "initiator" };
+                    }
+                } else {
+                    // This branch will be removed once the Identity canister is fully
+                    // migrated over to returning the standardised error codes
+                    if (resp === "success") {
+                        onProceed?.();
+                    } else if (resp === "already_linked_to_principal") {
+                        console.log("Identity already linked by you: ", resp);
+                        error = "identity.failure.alreadyLinked";
+                    } else if (resp === "already_registered") {
+                        console.log("Identity already linked by someone else: ", resp);
+                        error = "identity.failure.alreadyLinked";
+                        substep = { kind: "initiator" };
+                    } else {
+                        console.log("Failed to link identities: ", resp);
+                        error = "identity.failure.link";
+                        substep = { kind: "initiator" };
+                    }
+                }
+            })
+            .finally(() => (linking = false));
+    }
+
+    function reset() {
+        emailSigninHandler.stopPolling();
+        providerStep = "choose_provider";
+        error = undefined;
+        step = "explain";
+        substep = { kind: "initiator" };
+    }
+</script>
+
+<Row crossAxisAlignment={"center"} gap={"md"}>
+    <LinkVariantPlus size={$iconSize} color={ColourVars.textPrimary} />
+
+    <Subtitle fontWeight={"bold"}>
+        <Translatable resourceKey={i18nKey("identity.linkIdentity")} />
+    </Subtitle>
+</Row>
+
+<Column padding={["lg", "zero"]}>
+    {#if error !== undefined}
+        <ErrorMessage>
+            <Translatable resourceKey={i18nKey(error)} />
+        </ErrorMessage>
+    {:else if step === "explain"}
+        <StatusCard background={ColourVars.background2} title={"Link identity"} mode={"warning"}>
+            {#snippet body()}
+                {#each explanations as explanation}
+                    <Translatable resourceKey={explanation} />
+                {/each}
+            {/snippet}
+        </StatusCard>
+    {:else if step === "linking"}
+        {#if substep.kind === "ready_to_link"}
+            <Column gap={"lg"}>
+                <Body colour={"textSecondary"}>
+                    <Translatable resourceKey={i18nKey("identity.linkTwoIdentities")} />
+                </Body>
+                <Row mainAxisAlignment={"spaceBetween"} gap={"sm"} crossAxisAlignment={"center"}>
+                    <SignInOption hollow name={i18nKey(substep.initiator.provider)} />
+                    <ArrowRightBoldOutline size={$iconSize} color={ColourVars.textSecondary} />
+                    <SignInOption hollow name={i18nKey(substep.approver.provider)} />
+                </Row>
+            </Column>
+        {:else if substep.kind === "initiator" && linkInternetIdentity}
+            <Column gap={"lg"}>
+                <Body colour={"textSecondary"}>
+                    <Translatable resourceKey={i18nKey("identity.signInNext")} />
+                </Body>
+                <Button
+                    loading={loggingInInitiator}
+                    disabled={loggingInInitiator}
+                    onClick={loginInternetIdentity}>
+                    {#snippet icon()}
+                        <span class="link-ii-logo">
+                            <InternetIdentityLogo />
+                        </span>
+                    {/snippet}
+                    <Translatable resourceKey={i18nKey("loginDialog.signin")} />
+                </Button>
+            </Column>
+        {:else if providerStep === "choose_provider"}
+            <Column gap={"lg"}>
+                <Body colour={"textSecondary"}>
+                    <Translatable resourceKey={i18nKey(`identity.signIn_${substep.kind}`)} />
+                </Body>
+                <ChooseSignInOption
+                    mode={"signin"}
+                    {restrictTo}
+                    {currentProvider}
+                    showMore={substep.kind === "initiator"}
+                    bind:emailInvalid
+                    bind:email
+                    onLogin={loginProvider} />
+            </Column>
+        {:else if providerStep === "choose_eth_wallet"}
+            <div class="eth-options">
+                {#await import("./SignInWithEth.svelte")}
+                    <div class="loading">...</div>
+                {:then { default: SignInWithEth }}
+                    <SignInWithEth
+                        assumeIdentity={false}
+                        onConnected={(ev) => authComplete(AuthProvider.ETH, ev)} />
+                {/await}
+            </div>
+        {:else if providerStep === "choose_sol_wallet"}
+            <div class="sol-options">
+                {#await import("./SignInWithSol.svelte")}
+                    <div class="loading">...</div>
+                {:then { default: SignInWithSol }}
+                    <SignInWithSol
+                        assumeIdentity={false}
+                        onConnected={(ev) => authComplete(AuthProvider.SOL, ev)} />
+                {/await}
+            </div>
+        {:else if providerStep === "signing_in_with_email"}
+            <EmailSigninFeedback
+                code={verificationCode}
+                polling={$emailSigninHandler}
+                onCopy={(code) => emailSigninHandler.copyCode(code)} />
+            {#if error !== undefined}
+                <ErrorMessage><Translatable resourceKey={i18nKey(error)} /></ErrorMessage>
+            {/if}
+        {/if}
+    {/if}
+</Column>
+
+<Container mainAxisAlignment={"end"} gap={"sm"} crossAxisAlignment={"end"}>
+    <CommonButton onClick={onClose} size={"small_text"}>
+        <Translatable resourceKey={i18nKey("cancel")}></Translatable>
+    </CommonButton>
+    {#if error !== undefined}
+        <CommonButton mode={"active"} onClick={reset} size={"small_text"}>
+            <Translatable resourceKey={i18nKey("identity.tryAgain")}></Translatable>
+        </CommonButton>
+    {:else if step === "explain"}
+        {#if linkInternetIdentity}
+            <CommonButton mode={"active"} onClick={initiateLinking} size={"small_text"}>
+                {#snippet icon()}
+                    <span class="link-ii-logo">
+                        <InternetIdentityLogo />
+                    </span>
+                {/snippet}
+                <Translatable resourceKey={i18nKey("identity.link")}></Translatable>
+            </CommonButton>
+        {:else}
+            <CommonButton mode={"active"} onClick={initiateLinking} size={"small_text"}>
+                <Translatable resourceKey={i18nKey("identity.linkedAccounts.start")}></Translatable>
+            </CommonButton>
+        {/if}
+    {:else if step === "linking"}
+        <CommonButton onClick={reset} size={"small_text"}>
+            <Translatable resourceKey={i18nKey("identity.back")}></Translatable>
+        </CommonButton>
+        {#if substep.kind === "ready_to_link"}
+            <CommonButton
+                mode={"active"}
+                disabled={linking}
+                loading={linking}
+                onClick={linkIdentities}
+                size={"small"}>
+                {#snippet icon(color)}
+                    <LinkVariantPlus {color} />
+                {/snippet}
+                <Translatable resourceKey={i18nKey("identity.link")}></Translatable>
+            </CommonButton>
+        {/if}
+    {/if}
+</Container>
+
+<style lang="scss">
+    .eth-options,
+    .sol-options {
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        gap: $sp4;
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/home/profile/LinkAccountsModal.svelte b/frontend/app/src/mobile/features/profile/LinkAccountsModal.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/profile/LinkAccountsModal.svelte
rename to frontend/app/src/mobile/features/profile/LinkAccountsModal.svelte
diff --git a/frontend/app/src/mobile/features/profile/ReAuthenticate.svelte b/frontend/app/src/mobile/features/profile/ReAuthenticate.svelte
new file mode 100644
index 0000000000..bda1e14f18
--- /dev/null
+++ b/frontend/app/src/mobile/features/profile/ReAuthenticate.svelte
@@ -0,0 +1,229 @@
+<script lang="ts">
+    import { AuthClient } from "@icp-sdk/auth/client";
+    import { DelegationChain, DelegationIdentity, ECDSAKeyIdentity } from "@icp-sdk/core/identity";
+    import { Body } from "component-lib";
+    import {
+        AuthProvider,
+        InMemoryAuthClientStorage,
+        selectedAuthProviderStore,
+        type OpenChat,
+        type ResourceKey,
+    } from "@client";
+    import { getContext, onMount } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { configKeys } from "@src/utils/config";
+    import {
+        EmailPollerError,
+        EmailPollerSuccess,
+        EmailSigninHandler,
+    } from "@src/utils/signin";
+    import ErrorMessage from "@src/mobile/shared/ErrorMessage.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import EmailSigninFeedback from "./EmailSigninFeedback.svelte";
+    import ChooseSignInOption from "./ChooseSignInOption.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        autoSelect?: boolean;
+        message: ResourceKey;
+        onSuccess: (args: {
+            key: ECDSAKeyIdentity;
+            delegation: DelegationChain;
+            provider: AuthProvider;
+            signInProofJwt: string;
+        }) => void;
+    }
+
+    let { message, onSuccess, autoSelect = false }: Props = $props();
+
+    let error: string | undefined = $state();
+    let emailSigninHandler = new EmailSigninHandler(client, "account_linking", false);
+    let emailInvalid = $state(false);
+    let email = $state("");
+    let authStep:
+        | "choose_provider"
+        | "choose_eth_wallet"
+        | "choose_sol_wallet"
+        | "signing_in_with_email" = $state("choose_provider");
+    let verificationCode: string | undefined = $state(undefined);
+
+    onMount(() => {
+        emailSigninHandler.addEventListener("email_signin_event", emailEvent);
+        if (autoSelect) {
+            login($selectedAuthProviderStore);
+        }
+        return () => {
+            emailSigninHandler.removeEventListener("email_signin_event", emailEvent);
+            emailSigninHandler.destroy();
+        };
+    });
+
+    function emailEvent(ev: Event): void {
+        if (ev instanceof EmailPollerError) {
+            error = "identity.failure.pollingError";
+        }
+
+        if (ev instanceof EmailPollerSuccess) {
+            authComplete(ev.detail.key, ev.detail.delegation, AuthProvider.EMAIL);
+        }
+    }
+
+    // This is where we login in with the provider that we are currently signed in with (which can be any provider type)
+    async function login(provider: AuthProvider) {
+        if (emailInvalid && provider === AuthProvider.EMAIL) {
+            return;
+        }
+
+        localStorage.setItem(configKeys.selectedAuthEmail, email);
+        selectedAuthProviderStore.set(provider);
+        error = undefined;
+
+        if (provider === AuthProvider.PASSKEY) {
+            try {
+                const [key, delegation] = await client.reSignInWithCurrentWebAuthnIdentity();
+                await authComplete(key, delegation, provider);
+            } catch (err) {
+                console.error("An error occurred doing passkey auth: ", err);
+                error = "identity.failure.loginApprover";
+            }
+        } else if (provider === AuthProvider.EMAIL) {
+            authStep = "signing_in_with_email";
+            emailSigninHandler.generateMagicLink(email).then((resp) => {
+                if (resp.kind === "success") {
+                    verificationCode = resp.code;
+                } else if (resp.kind === "email_invalid") {
+                    error = "loginDialog.invalidEmail";
+                } else if (resp.kind === "failed_to_send_email") {
+                    console.debug("generateMagicLink failed_to_send_email", resp.error);
+                    error = "loginDialog.failedToSendEmail";
+                } else {
+                    error = "identity.failure.loginApprover";
+                }
+            });
+        } else if (provider === AuthProvider.ETH) {
+            authStep = "choose_eth_wallet";
+        } else if (provider === AuthProvider.SOL) {
+            authStep = "choose_sol_wallet";
+        } else {
+            // This is the II / NFID case
+            const identity = await ECDSAKeyIdentity.generate();
+            const storage = new InMemoryAuthClientStorage();
+            const authClient = AuthClient.create({
+                storage,
+                identity: identity,
+            });
+            authClient
+                .then((c) => {
+                    c.login({
+                        ...client.getAuthClientOptions(provider),
+                        onSuccess: async () => {
+                            const delegation = await storage.get("delegation");
+                            if (delegation) {
+                                const principal = c.getIdentity().getPrincipal().toString();
+                                if (principal !== client.AuthPrincipal) {
+                                    error = "identity.failure.principalMismatch";
+                                } else {
+                                    await authComplete(
+                                        identity,
+                                        DelegationChain.fromJSON(delegation),
+                                        provider,
+                                    );
+                                }
+                            }
+                        },
+                        onError: (err) => {
+                            console.log("Failed to log into approver: ", err);
+                            error = "identity.failure.loginApprover";
+                        },
+                    });
+                })
+                .catch((err) => {
+                    console.log("Failed to log into approver: ", err);
+                    error = "identity.failure.loginApprover";
+                });
+        }
+    }
+
+    async function authComplete(
+        key: ECDSAKeyIdentity,
+        delegation: DelegationChain,
+        provider: AuthProvider,
+    ) {
+        const identity = DelegationIdentity.fromDelegation(key, delegation);
+        const principal = identity.getPrincipal().toString();
+        if (principal !== client.AuthPrincipal) {
+            authStep = "choose_provider";
+            error = "identity.failure.principalMismatch";
+        } else {
+            const signInProofJwt = await client.getSignInProof(key, delegation);
+            onSuccess({
+                key,
+                delegation,
+                provider,
+                signInProofJwt,
+            });
+        }
+    }
+</script>
+
+<div class="body">
+    {#if authStep === "choose_provider"}
+        <div class="info">
+            <Body colour={"error"}>
+                <Translatable resourceKey={message} />
+            </Body>
+        </div>
+        <ChooseSignInOption mode={"signin"} bind:emailInvalid bind:email onLogin={login} />
+    {:else if authStep === "choose_eth_wallet"}
+        <div class="eth-options">
+            {#await import("./SignInWithEth.svelte")}
+                <div class="loading">...</div>
+            {:then { default: SignInWithEth }}
+                <SignInWithEth
+                    assumeIdentity={false}
+                    onConnected={(ev) => authComplete(ev.key, ev.delegation, AuthProvider.ETH)} />
+            {/await}
+        </div>
+    {:else if authStep === "choose_sol_wallet"}
+        <div class="sol-options">
+            {#await import("./SignInWithSol.svelte")}
+                <div class="loading">...</div>
+            {:then { default: SignInWithSol }}
+                <SignInWithSol
+                    assumeIdentity={false}
+                    onConnected={(ev) => authComplete(ev.key, ev.delegation, AuthProvider.SOL)} />
+            {/await}
+        </div>
+    {:else if authStep === "signing_in_with_email"}
+        <EmailSigninFeedback
+            code={verificationCode}
+            polling={$emailSigninHandler}
+            onCopy={(code) => emailSigninHandler.copyCode(code)} />
+    {/if}
+    {#if error !== undefined}
+        <p class="info">
+            <ErrorMessage>
+                <Translatable resourceKey={i18nKey(error)} />
+            </ErrorMessage>
+        </p>
+    {/if}
+</div>
+
+<style lang="scss">
+    .body {
+        width: 100%;
+    }
+
+    .info {
+        margin-bottom: $sp4;
+    }
+
+    .eth-options,
+    .sol-options {
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        gap: $sp4;
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/profile/ReAuthenticateModal.svelte b/frontend/app/src/mobile/features/profile/ReAuthenticateModal.svelte
new file mode 100644
index 0000000000..5d1313d04f
--- /dev/null
+++ b/frontend/app/src/mobile/features/profile/ReAuthenticateModal.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+    import type { DelegationChain, ECDSAKeyIdentity } from "@icp-sdk/core/identity";
+    import Translatable from "@src/ui/Translatable.svelte";
+    import { Column, Sheet, Subtitle } from "component-lib";
+    import type { AuthProvider, ResourceKey } from "@client";
+    import ReAuthenticate from "./ReAuthenticate.svelte";
+    interface Props {
+        message: ResourceKey;
+        title: ResourceKey;
+        onSuccess: (args: {
+            key: ECDSAKeyIdentity;
+            delegation: DelegationChain;
+            provider: AuthProvider;
+        }) => void;
+        onCancel: () => void;
+    }
+
+    let { onSuccess, message, onCancel, title }: Props = $props();
+</script>
+
+<Sheet onDismiss={onCancel}>
+    <Column gap={"xl"} padding={"xl"}>
+        <Subtitle fontWeight={"bold"}>
+            <Translatable resourceKey={title}></Translatable>
+        </Subtitle>
+        <ReAuthenticate autoSelect {onSuccess} {message} />
+    </Column>
+</Sheet>
diff --git a/frontend/app/src/mobile/features/profile/RestrictedFeature.svelte b/frontend/app/src/mobile/features/profile/RestrictedFeature.svelte
new file mode 100644
index 0000000000..76fc120995
--- /dev/null
+++ b/frontend/app/src/mobile/features/profile/RestrictedFeature.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+    import { Column, Sheet, Title } from "component-lib";
+    import type { Feature } from "@client";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    interface Props {
+        feature: Feature;
+        onClose: () => void;
+    }
+
+    let { feature, onClose }: Props = $props();
+</script>
+
+<Sheet onDismiss={onClose}>
+    <Column mainAxisAlignment={"center"} crossAxisAlignment={"center"} padding={"xxxl"}>
+        <Title width={"hug"} fontWeight={"bold"}>
+            {#if feature === "swap"}
+                <Translatable resourceKey={i18nKey("restricted.swap")} />
+            {:else}
+                <Translatable resourceKey={i18nKey("restricted.generic")} />
+            {/if}
+        </Title>
+    </Column>
+</Sheet>
diff --git a/frontend/app/src/components_mobile/home/profile/RoleIcon.svelte b/frontend/app/src/mobile/features/profile/RoleIcon.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/profile/RoleIcon.svelte
rename to frontend/app/src/mobile/features/profile/RoleIcon.svelte
diff --git a/frontend/app/src/mobile/features/profile/SignInOption.svelte b/frontend/app/src/mobile/features/profile/SignInOption.svelte
new file mode 100644
index 0000000000..e1008fe0af
--- /dev/null
+++ b/frontend/app/src/mobile/features/profile/SignInOption.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+    import { Button } from "component-lib";
+    import { type ResourceKey } from "@client";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    interface Props {
+        name: ResourceKey;
+        hollow?: boolean;
+        onClick?: (e: MouseEvent) => void;
+    }
+
+    let { name, hollow = false, onClick }: Props = $props();
+</script>
+
+<Button width={"fill"} secondary={hollow} {onClick}>
+    <Translatable resourceKey={name} />
+</Button>
diff --git a/frontend/app/src/components_mobile/home/SignInWithEth.svelte b/frontend/app/src/mobile/features/profile/SignInWithEth.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/SignInWithEth.svelte
rename to frontend/app/src/mobile/features/profile/SignInWithEth.svelte
diff --git a/frontend/app/src/components_mobile/home/SignInWithSol.svelte b/frontend/app/src/mobile/features/profile/SignInWithSol.svelte
similarity index 98%
rename from frontend/app/src/components_mobile/home/SignInWithSol.svelte
rename to frontend/app/src/mobile/features/profile/SignInWithSol.svelte
index 01d78c43a7..ef6bee6fde 100644
--- a/frontend/app/src/components_mobile/home/SignInWithSol.svelte
+++ b/frontend/app/src/mobile/features/profile/SignInWithSol.svelte
@@ -13,7 +13,7 @@
     import { Button } from "component-lib";
     import type { OpenChat, SiwsMessage } from "@client";
     import { getContext, onMount } from "svelte";
-    import { initialize, walletStore } from "../../stores/solana/walletStore";
+    import { initialize, walletStore } from "@src/stores/solana/walletStore";
 
     const client = getContext<OpenChat>("client");
     const localStorageKey = "walletAdapter";
diff --git a/frontend/app/src/components_mobile/home/profile/Streak.svelte b/frontend/app/src/mobile/features/profile/Streak.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/profile/Streak.svelte
rename to frontend/app/src/mobile/features/profile/Streak.svelte
diff --git a/frontend/app/src/mobile/features/profile/SuspendModal.svelte b/frontend/app/src/mobile/features/profile/SuspendModal.svelte
new file mode 100644
index 0000000000..feb77ae0c5
--- /dev/null
+++ b/frontend/app/src/mobile/features/profile/SuspendModal.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+    import { Button, Container, Sheet, Subtitle, TextArea } from "component-lib";
+    import type { OpenChat } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import ErrorMessage from "@src/mobile/shared/ErrorMessage.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    interface Props {
+        userId: string;
+        onClose: () => void;
+    }
+
+    let { userId, onClose }: Props = $props();
+
+    const client = getContext<OpenChat>("client");
+
+    let reason: string = $state("");
+    let suspending = $state(false);
+    let showError = $state(false);
+
+    function onSuspend() {
+        suspending = true;
+        showError = false;
+        client.suspendUser(userId, reason).then((success) => {
+            if (success) {
+                onClose();
+            } else {
+                showError = true;
+            }
+            suspending = false;
+        });
+    }
+</script>
+
+<Sheet onDismiss={onClose}>
+    <Container gap={"xl"} padding={"xl"} direction={"vertical"}>
+        <Subtitle fontWeight={"bold"}>
+            <Translatable resourceKey={i18nKey("suspendedUser")} />
+        </Subtitle>
+
+        <TextArea
+            bind:value={reason}
+            minlength={3}
+            maxlength={512}
+            placeholder={interpolate($_, i18nKey("reasonForSuspension"))}>
+        </TextArea>
+
+        {#if showError}
+            <ErrorMessage
+                ><Translatable resourceKey={i18nKey("failedToSuspendUser")} /></ErrorMessage>
+        {/if}
+
+        <Container gap={"md"} direction={"vertical"}>
+            <Button onClick={onSuspend} loading={suspending}>
+                <Translatable resourceKey={i18nKey("suspend")} />
+            </Button>
+            <Button onClick={onClose} disabled={suspending} secondary>
+                <Translatable resourceKey={i18nKey("cancel")} />
+            </Button>
+        </Container>
+    </Container>
+</Sheet>
diff --git a/frontend/app/src/mobile/features/profile/VerifyHumanity.svelte b/frontend/app/src/mobile/features/profile/VerifyHumanity.svelte
new file mode 100644
index 0000000000..9a7004c317
--- /dev/null
+++ b/frontend/app/src/mobile/features/profile/VerifyHumanity.svelte
@@ -0,0 +1,161 @@
+<script lang="ts">
+    import {
+        Body,
+        ColourVars,
+        Column,
+        CommonButton,
+        Container,
+        Row,
+        Sheet,
+        Subtitle,
+    } from "component-lib";
+    import { type OpenChat } from "@client";
+    import { getContext, onMount } from "svelte";
+    import { _ } from "svelte-i18n";
+    import AccountCheck from "svelte-material-icons/AccountCheck.svelte";
+    import AccountStar from "svelte-material-icons/AccountStarOutline.svelte";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import { uniquePersonCredentialGate } from "@src/utils/access";
+    import ErrorMessage from "@src/mobile/shared/ErrorMessage.svelte";
+    import FancyLoader from "@src/mobile/ui/icons/FancyLoader.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import LinkAccounts from "./LinkAccounts.svelte";
+    import LinkAccountsModal from "./LinkAccountsModal.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        onClose: () => void;
+        onSuccess: () => void;
+    }
+
+    let { onClose, onSuccess }: Props = $props();
+
+    let failed = $state(false);
+    let verifying = $state(false);
+    let step: "linking" | "verification" = $state("linking");
+    let iiPrincipal: string | undefined = $state(undefined);
+    let checkingPrincipal = $state(true);
+
+    onMount(() => {
+        client
+            .getLinkedIIPrincipal()
+            .then((p) => {
+                iiPrincipal = p;
+                if (iiPrincipal !== undefined) {
+                    verify();
+                }
+            })
+            .finally(() => (checkingPrincipal = false));
+    });
+
+    function verify() {
+        if (iiPrincipal === undefined) return;
+        const iiPrincipalCopy = iiPrincipal;
+
+        verifying = true;
+        failed = false;
+        client
+            .verifyAccessGate(uniquePersonCredentialGate, iiPrincipalCopy)
+            .then((credential) => {
+                if (credential === undefined) {
+                    failed = true;
+                } else {
+                    return client
+                        .submitProofOfUniquePersonhood(credential, iiPrincipalCopy)
+                        .then((resp) => {
+                            if (resp.kind !== "success") {
+                                failed = true;
+                            } else {
+                                onSuccess();
+                            }
+                        });
+                }
+            })
+            .catch(() => (failed = true))
+            .finally(() => (verifying = false));
+    }
+</script>
+
+{#if checkingPrincipal}
+    <Sheet>
+        <Column crossAxisAlignment={"center"} mainAxisAlignment={"center"} padding={"xl"}>
+            <div class="loader">
+                <FancyLoader />
+            </div>
+        </Column>
+    </Sheet>
+{:else if step === "linking"}
+    <LinkAccountsModal>
+        <LinkAccounts
+            bind:iiPrincipal
+            {onClose}
+            onProceed={() => (step = "verification")}
+            explanations={[i18nKey("identity.humanityWarning")]} />
+    </LinkAccountsModal>
+{:else}
+    <Sheet>
+        <Column gap={"xl"} padding={"xl"}>
+            <Row crossAxisAlignment={"center"} gap={"sm"}>
+                <AccountCheck size={"1.5rem"} color={ColourVars.textPrimary} />
+                <Subtitle fontWeight={"bold"}>
+                    <Translatable resourceKey={i18nKey("access.uniquePerson")} />
+                </Subtitle>
+            </Row>
+            <Column gap={"md"}>
+                {#if failed}
+                    <Body>
+                        <ErrorMessage>
+                            <Translatable resourceKey={i18nKey("human.failed")} />
+                        </ErrorMessage>
+                    </Body>
+
+                    <Body>
+                        <Translatable resourceKey={i18nKey("access.uniquePersonInfo1")} />
+                    </Body>
+
+                    <Body>
+                        <Markdown text={interpolate($_, i18nKey("access.uniquePersonInfo2"))} />
+                    </Body>
+
+                    <Body>
+                        <Translatable resourceKey={i18nKey("access.uniquePersonInfo3")} />
+                    </Body>
+                {:else}
+                    <Body>
+                        <Translatable resourceKey={i18nKey("human.instruction")} />
+                    </Body>
+                {/if}
+            </Column>
+
+            <Container mainAxisAlignment={"end"} gap={"sm"} crossAxisAlignment={"end"}>
+                <CommonButton onClick={onClose} size={"small_text"}>
+                    <Translatable resourceKey={i18nKey("cancel")}></Translatable>
+                </CommonButton>
+                <CommonButton
+                    loading={verifying}
+                    disabled={verifying || iiPrincipal === undefined}
+                    onClick={verify}
+                    size={"medium"}
+                    mode={"active"}>
+                    {#snippet icon(color, size)}
+                        <AccountStar {color} {size}></AccountStar>
+                    {/snippet}
+                    <Translatable resourceKey={i18nKey("access.verify")}></Translatable>
+                </CommonButton>
+            </Container>
+        </Column>
+    </Sheet>
+{/if}
+
+<style lang="scss">
+    :global(.link-ii-logo img) {
+        width: 24px;
+    }
+
+    .loader {
+        width: 100px;
+        margin: 100px auto;
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/profile/VideoCallRingtone.svelte b/frontend/app/src/mobile/features/profile/VideoCallRingtone.svelte
new file mode 100644
index 0000000000..f014713246
--- /dev/null
+++ b/frontend/app/src/mobile/features/profile/VideoCallRingtone.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+    import { BodySmall, ColourVars, Column, IconButton, Radio, Row } from "component-lib";
+    import { onMount } from "svelte";
+    import PauseCircleOutline from "svelte-material-icons/PauseCircleOutline.svelte";
+    import PlayCircleOutline from "svelte-material-icons/PlayCircleOutline.svelte";
+    import WaveSurfer from "wavesurfer.js";
+    import { Ringtone, selectedRingtone } from "@src/stores/video";
+    import { currentTheme } from "@src/theme/themes";
+
+    interface Props {
+        ringtone: Ringtone;
+        onTogglePlay: (ringtone: Ringtone) => void;
+    }
+
+    let { ringtone, onTogglePlay }: Props = $props();
+
+    let waveform: HTMLDivElement | undefined = $state();
+
+    let checked = $derived($selectedRingtone === ringtone.key);
+
+    onMount(() => {
+        if (!waveform) return;
+
+        const wavesurfer = WaveSurfer.create({
+            height: 30,
+            cursorWidth: 0,
+            barWidth: 2,
+            barRadius: 4,
+            barGap: 2,
+            container: waveform,
+            waveColor: $currentTheme["txt-light"],
+            progressColor: $currentTheme.primary,
+            media: ringtone.audio,
+        });
+
+        wavesurfer.on("click", () => {
+            if (!ringtone.playing) {
+                togglePlay();
+            }
+        });
+    });
+
+    function togglePlay(e?: Event) {
+        e?.preventDefault();
+        onTogglePlay(ringtone);
+    }
+
+    function selectRingtone() {
+        selectedRingtone.set(ringtone.key);
+    }
+</script>
+
+<Column>
+    <Row crossAxisAlignment={"center"} mainAxisAlignment={"spaceBetween"}>
+        <Radio
+            value={$selectedRingtone}
+            onChange={selectRingtone}
+            {checked}
+            id={ringtone.name}
+            group="video-ringtone">
+            <BodySmall>{ringtone.name}</BodySmall>
+        </Radio>
+        <IconButton size={"sm"} onclick={togglePlay}>
+            {#snippet icon()}
+                {#if ringtone.playing}
+                    <PauseCircleOutline color={ColourVars.primary} />
+                {:else}
+                    <PlayCircleOutline color={ColourVars.textPrimary} />
+                {/if}
+            {/snippet}
+        </IconButton>
+    </Row>
+    <div bind:this={waveform} class="waveform"></div>
+</Column>
+
+<style lang="scss">
+    .waveform {
+        width: 100%;
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/profile/ViewUserProfileModal.svelte b/frontend/app/src/mobile/features/profile/ViewUserProfileModal.svelte
new file mode 100644
index 0000000000..2a88056a20
--- /dev/null
+++ b/frontend/app/src/mobile/features/profile/ViewUserProfileModal.svelte
@@ -0,0 +1,290 @@
+<script lang="ts">
+    import {
+        type ChatSummary,
+        type CommunitySummary,
+        type OpenChat,
+        type PublicProfile,
+        type ReadonlySet,
+        type ResourceKey,
+        type UserSummary,
+        blockedUsersStore,
+        currentUserIdStore,
+        platformModeratorStore,
+        publish,
+        selectedChatBlockedUsersStore,
+        selectedChatSummaryStore,
+        selectedCommunityBlockedUsersStore,
+        selectedCommunitySummaryStore,
+    } from "@client";
+
+    import { CommonButton, Container, Sheet } from "component-lib";
+    import { navigate } from "@src/utils/navigation";
+    import { getContext, onMount } from "svelte";
+    import AccountCancel from "svelte-material-icons/AccountCancelOutline.svelte";
+    import Cancel from "svelte-material-icons/Cancel.svelte";
+    import ChatOutline from "svelte-material-icons/ChatOutline.svelte";
+    import Cog from "svelte-material-icons/Cog.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import UserProfileSummaryCard from "@src/mobile/features/profile/view/UserProfileSummaryCard.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        userId: string;
+        chatButton?: boolean;
+        inGlobalContext?: boolean;
+        onOpenDirectChat: () => void;
+        onClose: () => void;
+    }
+
+    let {
+        userId,
+        chatButton = true,
+        inGlobalContext = false,
+        onOpenDirectChat,
+        onClose,
+    }: Props = $props();
+
+    let profile: PublicProfile | undefined = $state();
+    let user: UserSummary | undefined = $state();
+    onMount(async () => {
+        try {
+            user = await client.getUser(userId);
+            client.getPublicProfile(userId).subscribe({
+                onResult: (result) => {
+                    profile = result;
+                    if (profile === undefined) {
+                        onClose();
+                    }
+                },
+            });
+        } catch (e: any) {
+            client.logError("Failed to load user profile", e);
+            onClose();
+        }
+    });
+
+    function afterBlock(result: boolean, success: ResourceKey, failure: ResourceKey) {
+        if (!result) {
+            toastStore.showFailureToast(failure);
+        } else {
+            toastStore.showSuccessToast(success);
+        }
+    }
+
+    function blockUser() {
+        if ($selectedChatSummaryStore !== undefined) {
+            if ($selectedChatSummaryStore.kind === "direct_chat") {
+                client.blockUserFromDirectChat(userId).then((success) => {
+                    afterBlock(success, i18nKey("blockUserSucceeded"), i18nKey("blockUserFailed"));
+                });
+                onClose();
+                return;
+            }
+            if ($selectedChatSummaryStore.kind === "group_chat") {
+                client.blockUser($selectedChatSummaryStore.id, userId).then((success) => {
+                    afterBlock(success, i18nKey("blockUserSucceeded"), i18nKey("blockUserFailed"));
+                });
+                onClose();
+                return;
+            }
+        }
+        if ($selectedCommunitySummaryStore !== undefined) {
+            client
+                .blockCommunityUser($selectedCommunitySummaryStore.id, userId)
+                .then((success) =>
+                    afterBlock(success, i18nKey("blockUserSucceeded"), i18nKey("blockUserFailed")),
+                );
+            onClose();
+            return;
+        }
+    }
+
+    function unblockUser() {
+        if ($selectedChatSummaryStore !== undefined) {
+            if ($selectedChatSummaryStore.kind === "direct_chat") {
+                client.unblockUserFromDirectChat(userId).then((success) => {
+                    afterBlock(
+                        success,
+                        i18nKey("unblockUserSucceeded"),
+                        i18nKey("unblockUserFailed"),
+                    );
+                });
+                onClose();
+                return;
+            }
+            if ($selectedChatSummaryStore.kind === "group_chat") {
+                client.unblockUser($selectedChatSummaryStore.id, userId).then((success) => {
+                    afterBlock(
+                        success,
+                        i18nKey("unblockUserSucceeded"),
+                        i18nKey("unblockUserFailed"),
+                    );
+                });
+                onClose();
+                return;
+            }
+        }
+        if ($selectedCommunitySummaryStore !== undefined) {
+            client
+                .unblockCommunityUser($selectedCommunitySummaryStore.id, userId)
+                .then((success) =>
+                    afterBlock(
+                        success,
+                        i18nKey("unblockUserSucceeded"),
+                        i18nKey("unblockUserFailed"),
+                    ),
+                );
+            onClose();
+            return;
+        }
+    }
+
+    function canBlockUser(
+        chat: ChatSummary | undefined,
+        community: CommunitySummary | undefined,
+        blockedUsers: ReadonlySet<string>,
+        blockedChatUsers: ReadonlySet<string>,
+        blockedCommunityUsers: ReadonlySet<string>,
+    ) {
+        if (me || inGlobalContext) return false;
+
+        if (chat !== undefined) {
+            if (chat.kind === "direct_chat") return !blockedUsers.has(userId);
+            if (chat.kind === "group_chat")
+                return !blockedChatUsers.has(userId) && client.canBlockUsers(chat.id);
+        }
+        if (community !== undefined) {
+            return !blockedCommunityUsers.has(userId) && client.canBlockUsers(community.id);
+        }
+        return false;
+    }
+
+    function canUnblockUser(
+        chat: ChatSummary | undefined,
+        community: CommunitySummary | undefined,
+        blockedUsers: ReadonlySet<string>,
+        blockedChatUsers: ReadonlySet<string>,
+        blockedCommunityUsers: ReadonlySet<string>,
+    ) {
+        if (me || inGlobalContext) return false;
+        if (chat !== undefined) {
+            if (chat.kind === "direct_chat") return blockedUsers.has(userId);
+            if (chat.kind === "group_chat")
+                return blockedChatUsers.has(userId) && client.canBlockUsers(chat.id);
+        }
+        if (community !== undefined) {
+            return blockedCommunityUsers.has(userId) && client.canBlockUsers(community.id);
+        }
+        return false;
+    }
+
+    function handleOpenDirectChat() {
+        onOpenDirectChat();
+    }
+
+    function showUserProfile() {
+        navigate("/profile_summary");
+        onClose();
+    }
+
+    function unsuspendUser() {
+        client.unsuspendUser(userId).then((success) => {
+            if (success) {
+                toastStore.showSuccessToast(i18nKey("unsuspendedUser"));
+                onClose();
+            } else {
+                toastStore.showFailureToast(i18nKey("failedToUnsuspendUser"));
+            }
+        });
+    }
+
+    function suspendUser() {
+        publish("suspendUser", userId);
+        onClose();
+    }
+    let me = $derived(userId === $currentUserIdStore);
+    let isSuspended = $derived(user?.suspended ?? false);
+    let canBlock = $derived(
+        canBlockUser(
+            $selectedChatSummaryStore,
+            $selectedCommunitySummaryStore,
+            $blockedUsersStore,
+            $selectedChatBlockedUsersStore,
+            $selectedCommunityBlockedUsersStore,
+        ),
+    );
+    let canUnblock = $derived(
+        canUnblockUser(
+            $selectedChatSummaryStore,
+            $selectedCommunitySummaryStore,
+            $blockedUsersStore,
+            $selectedChatBlockedUsersStore,
+            $selectedCommunityBlockedUsersStore,
+        ),
+    );
+</script>
+
+{#if profile !== undefined}
+    <Sheet onDismiss={onClose}>
+        {#if profile !== undefined && user !== undefined}
+            <!-- <UserProfileCard {user} {profile} {inGlobalContext} {onClose}></UserProfileCard> -->
+            <Container direction={"vertical"} padding={["md", "md", "lg", "md"]}>
+                <UserProfileSummaryCard mode={"view"} {user} {profile}></UserProfileSummaryCard>
+                <Container mainAxisAlignment={"center"} gap={"xs"}>
+                    {#if chatButton && !me}
+                        <CommonButton onClick={handleOpenDirectChat} mode={"active"}>
+                            {#snippet icon(color, size)}
+                                <ChatOutline {color} {size} />
+                            {/snippet}
+                            <Translatable resourceKey={i18nKey("profile.chat")} />
+                        </CommonButton>
+                    {/if}
+                    {#if me}
+                        <CommonButton onClick={showUserProfile} mode={"active"}>
+                            {#snippet icon(color, size)}
+                                <Cog {color} {size} />
+                            {/snippet}
+                            <Translatable resourceKey={i18nKey("profile.label")} />
+                        </CommonButton>
+                    {/if}
+                    {#if canBlock}
+                        <CommonButton onClick={blockUser} mode={"active"}>
+                            {#snippet icon(color, size)}
+                                <Cancel {color} {size} />
+                            {/snippet}
+                            <Translatable resourceKey={i18nKey("profile.block")} />
+                        </CommonButton>
+                    {/if}
+                    {#if canUnblock}
+                        <CommonButton onClick={unblockUser} mode={"active"}>
+                            {#snippet icon(color, size)}
+                                <Cancel {color} {size} />
+                            {/snippet}
+                            <Translatable resourceKey={i18nKey("profile.unblock")} />
+                        </CommonButton>
+                    {/if}
+                    {#if $platformModeratorStore}
+                        {#if isSuspended}
+                            <CommonButton onClick={unsuspendUser} mode={"active"}>
+                                {#snippet icon(color, size)}
+                                    <AccountCancel {color} {size} />
+                                {/snippet}
+                                <Translatable resourceKey={i18nKey("unsuspendUser")} />
+                            </CommonButton>
+                        {:else}
+                            <CommonButton onClick={suspendUser} mode={"active"}>
+                                {#snippet icon(color, size)}
+                                    <AccountCancel {color} {size} />
+                                {/snippet}
+                                <Translatable resourceKey={i18nKey("suspendUser")} />
+                            </CommonButton>
+                        {/if}
+                    {/if}
+                </Container>
+            </Container>
+        {/if}
+    </Sheet>
+{/if}
diff --git a/frontend/app/src/components_mobile/home/profile/WithRole.svelte b/frontend/app/src/mobile/features/profile/WithRole.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/profile/WithRole.svelte
rename to frontend/app/src/mobile/features/profile/WithRole.svelte
diff --git a/frontend/app/src/components_mobile/home/user_profile/About.svelte b/frontend/app/src/mobile/features/profile/view/About.svelte
similarity index 95%
rename from frontend/app/src/components_mobile/home/user_profile/About.svelte
rename to frontend/app/src/mobile/features/profile/view/About.svelte
index 48cbb69471..031a33eac6 100644
--- a/frontend/app/src/components_mobile/home/user_profile/About.svelte
+++ b/frontend/app/src/mobile/features/profile/view/About.svelte
@@ -2,11 +2,11 @@
     import { i18nKey } from "@src/i18n/i18n";
     import { Body, BodySmall, ColourVars, Container, Logo, Overview } from "component-lib";
     import { publish, type OpenChat } from "@client";
-    import { navigate } from "@utils/navigation";
+    import { navigate } from "@src/utils/navigation";
     import { getContext } from "svelte";
     import ChevronRight from "svelte-material-icons/ChevronRight.svelte";
     import { openUrl } from "tauri-plugin-oc-api";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
 
     type OnClick = { kind: "route"; url: string } | { kind: "action"; action: () => void };
 
diff --git a/frontend/app/src/components_mobile/home/user_profile/AppSettings.svelte b/frontend/app/src/mobile/features/profile/view/AppSettings.svelte
similarity index 94%
rename from frontend/app/src/components_mobile/home/user_profile/AppSettings.svelte
rename to frontend/app/src/mobile/features/profile/view/AppSettings.svelte
index b12c4efac6..a9aac5fc50 100644
--- a/frontend/app/src/components_mobile/home/user_profile/AppSettings.svelte
+++ b/frontend/app/src/mobile/features/profile/view/AppSettings.svelte
@@ -2,7 +2,7 @@
     import { i18nKey } from "@src/i18n/i18n";
     import { BodySmall, Container, MenuItem } from "component-lib";
     import { publish } from "@client";
-    import { navigate } from "@utils/navigation";
+    import { navigate } from "@src/utils/navigation";
     import AccountMultiple from "svelte-material-icons/AccountMultiple.svelte";
     import Cog from "svelte-material-icons/Cog.svelte";
     import Delete from "svelte-material-icons/DeleteForeverOutline.svelte";
@@ -10,9 +10,9 @@
     import FlashOutline from "svelte-material-icons/FlashOutline.svelte";
     import RobotOutline from "svelte-material-icons/RobotOutline.svelte";
     import Sync from "svelte-material-icons/Sync.svelte";
-    import LinkedCard from "../../LinkedCard.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
+    import LinkedCard from "@src/mobile/shared/LinkedCard.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
 
     function help() {
         publish("closeModalStack");
diff --git a/frontend/app/src/components_mobile/home/user_profile/Appearance.svelte b/frontend/app/src/mobile/features/profile/view/Appearance.svelte
similarity index 92%
rename from frontend/app/src/components_mobile/home/user_profile/Appearance.svelte
rename to frontend/app/src/mobile/features/profile/view/Appearance.svelte
index fd232768c5..73e88c3331 100644
--- a/frontend/app/src/components_mobile/home/user_profile/Appearance.svelte
+++ b/frontend/app/src/mobile/features/profile/view/Appearance.svelte
@@ -2,9 +2,9 @@
     import { i18nKey, setLocale, supportedLanguages } from "@src/i18n/i18n";
     import { Body, BodySmall, Container } from "component-lib";
     import { locale } from "svelte-i18n";
-    import Translatable from "../../Translatable.svelte";
-    import LanguageSelector from "../LanguageSelector.svelte";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import LanguageSelector from "@src/mobile/shared/LanguageSelector.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
     import FontSize from "./FontSize.svelte";
 
     let selectedLocale = $state(($locale as string).substring(0, 2));
diff --git a/frontend/app/src/components_mobile/home/user_profile/BotConfig.svelte b/frontend/app/src/mobile/features/profile/view/BotConfig.svelte
similarity index 91%
rename from frontend/app/src/components_mobile/home/user_profile/BotConfig.svelte
rename to frontend/app/src/mobile/features/profile/view/BotConfig.svelte
index f96d87f7ae..ad3a6411ae 100644
--- a/frontend/app/src/components_mobile/home/user_profile/BotConfig.svelte
+++ b/frontend/app/src/mobile/features/profile/view/BotConfig.svelte
@@ -4,9 +4,9 @@
     import { BodySmall, Container, CopyCard, H2 } from "component-lib";
     import { OpenChat, type BotClientConfigData } from "@client";
     import { getContext, onMount } from "svelte";
-    import Translatable from "../../Translatable.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
 
     const client = getContext<OpenChat>("client");
     let botConfigData = $state<BotClientConfigData>();
diff --git a/frontend/app/src/components_mobile/home/user_profile/ChatsAndVideo.svelte b/frontend/app/src/mobile/features/profile/view/ChatsAndVideo.svelte
similarity index 95%
rename from frontend/app/src/components_mobile/home/user_profile/ChatsAndVideo.svelte
rename to frontend/app/src/mobile/features/profile/view/ChatsAndVideo.svelte
index 2cb1e114b0..724d5f87bc 100644
--- a/frontend/app/src/components_mobile/home/user_profile/ChatsAndVideo.svelte
+++ b/frontend/app/src/mobile/features/profile/view/ChatsAndVideo.svelte
@@ -19,11 +19,11 @@
         type ModerationFlag,
     } from "@client";
     import { getContext, onDestroy } from "svelte";
-    import { Ringtone } from "../../../stores/video";
-    import Setting from "../../Setting.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
-    import VideoCallRingtone from "../profile/VideoCallRingtone.svelte";
+    import { Ringtone } from "@src/stores/video";
+    import Setting from "@src/mobile/shared/Setting.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
+    import VideoCallRingtone from "@src/mobile/features/profile/VideoCallRingtone.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/components_mobile/home/user_profile/ChitRewards.svelte b/frontend/app/src/mobile/features/profile/view/ChitRewards.svelte
similarity index 92%
rename from frontend/app/src/components_mobile/home/user_profile/ChitRewards.svelte
rename to frontend/app/src/mobile/features/profile/view/ChitRewards.svelte
index a905e19f78..6246a14af8 100644
--- a/frontend/app/src/components_mobile/home/user_profile/ChitRewards.svelte
+++ b/frontend/app/src/mobile/features/profile/view/ChitRewards.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
-    import { isSameDay } from "@src/components/calendar/utils";
+    import { isSameDay } from "@src/ui/calendarUtils";
     import { i18nKey } from "@src/i18n/i18n";
     import { chitPopup, disableChit, utcMode } from "@src/stores/settings";
     import { Body, BodySmall, Button, Container, Subtitle, Switch } from "component-lib";
     import { chitStateStore, OpenChat, publish, type ChitEvent } from "@client";
     import { getContext } from "svelte";
     import FlashOutline from "svelte-material-icons/FlashOutline.svelte";
-    import Calendar from "../../calendar/Calendar.svelte";
-    import { calendarState, type DateRange } from "../../calendar/calendarState.svelte";
-    import Setting from "../../Setting.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import ChitEventsForDay from "../profile/ChitEventsForDay.svelte";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
+    import Calendar from "@src/mobile/features/calendar/Calendar.svelte";
+    import { calendarState, type DateRange } from "@src/mobile/features/calendar/calendarState.svelte";
+    import Setting from "@src/mobile/shared/Setting.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import ChitEventsForDay from "@src/mobile/features/profile/ChitEventsForDay.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
     import ChitSummary from "./ChitSummary.svelte";
     import StreakHeadline from "./StreakHeadline.svelte";
 
diff --git a/frontend/app/src/components_mobile/home/user_profile/ChitSummary.svelte b/frontend/app/src/mobile/features/profile/view/ChitSummary.svelte
similarity index 96%
rename from frontend/app/src/components_mobile/home/user_profile/ChitSummary.svelte
rename to frontend/app/src/mobile/features/profile/view/ChitSummary.svelte
index cc5a3c251e..23742ccd5c 100644
--- a/frontend/app/src/components_mobile/home/user_profile/ChitSummary.svelte
+++ b/frontend/app/src/mobile/features/profile/view/ChitSummary.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import SparkleBoxOutline from "@src/components_mobile/SparkleBoxOutline.svelte";
+    import SparkleBoxOutline from "@src/mobile/shared/SparkleBoxOutline.svelte";
     import { now500 } from "@src/stores/time";
     import { toastStore } from "@src/stores/toast";
     import {
@@ -17,9 +17,9 @@
     import PartyPopper from "svelte-material-icons/PartyPopper.svelte";
     import Rocket from "svelte-material-icons/RocketLaunchOutline.svelte";
     import ShieldStarOutline from "svelte-material-icons/ShieldStarOutline.svelte";
-    import Progress from "../../Progress.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import LearnToEarn from "../profile/LearnToEarn.svelte";
+    import Progress from "@src/mobile/shared/Progress.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import LearnToEarn from "@src/mobile/features/profile/LearnToEarn.svelte";
     import Streak from "./Streak.svelte";
 
     const client = getContext<OpenChat>("client");
diff --git a/frontend/app/src/components_mobile/home/user_profile/ClearCache.svelte b/frontend/app/src/mobile/features/profile/view/ClearCache.svelte
similarity index 93%
rename from frontend/app/src/components_mobile/home/user_profile/ClearCache.svelte
rename to frontend/app/src/mobile/features/profile/view/ClearCache.svelte
index 1d99bca014..47410861b2 100644
--- a/frontend/app/src/components_mobile/home/user_profile/ClearCache.svelte
+++ b/frontend/app/src/mobile/features/profile/view/ClearCache.svelte
@@ -5,8 +5,8 @@
     import { OpenChat } from "@client";
     import { getContext } from "svelte";
     import Sync from "svelte-material-icons/Sync.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/components_mobile/home/user_profile/CommunitySettings.svelte b/frontend/app/src/mobile/features/profile/view/CommunitySettings.svelte
similarity index 97%
rename from frontend/app/src/components_mobile/home/user_profile/CommunitySettings.svelte
rename to frontend/app/src/mobile/features/profile/view/CommunitySettings.svelte
index abfefb0fe9..07e50d9c20 100644
--- a/frontend/app/src/components_mobile/home/user_profile/CommunitySettings.svelte
+++ b/frontend/app/src/mobile/features/profile/view/CommunitySettings.svelte
@@ -20,9 +20,9 @@
     } from "@client";
     import { getContext } from "svelte";
     import Plus from "svelte-material-icons/Plus.svelte";
-    import DisplayNameInput from "../../DisplayNameInput.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
+    import DisplayNameInput from "./DisplayNameInput.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/components_mobile/home/user_profile/DeleteAccount.svelte b/frontend/app/src/mobile/features/profile/view/DeleteAccount.svelte
similarity index 92%
rename from frontend/app/src/components_mobile/home/user_profile/DeleteAccount.svelte
rename to frontend/app/src/mobile/features/profile/view/DeleteAccount.svelte
index 99d76142c3..01054f30c6 100644
--- a/frontend/app/src/components_mobile/home/user_profile/DeleteAccount.svelte
+++ b/frontend/app/src/mobile/features/profile/view/DeleteAccount.svelte
@@ -2,9 +2,9 @@
     import { i18nKey } from "@src/i18n/i18n";
     import { Body, BodySmall, Button, Container, H2 } from "component-lib";
     import Delete from "svelte-material-icons/DeleteForeverOutline.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import ConfirmDeleteAccount from "../profile/ConfirmDeleteAccount.svelte";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import ConfirmDeleteAccount from "@src/mobile/features/profile/ConfirmDeleteAccount.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
 
     let deleting = $state(false);
     let authenticating = $state(false);
diff --git a/frontend/app/src/mobile/features/profile/view/DisplayNameInput.svelte b/frontend/app/src/mobile/features/profile/view/DisplayNameInput.svelte
new file mode 100644
index 0000000000..8d57551c8d
--- /dev/null
+++ b/frontend/app/src/mobile/features/profile/view/DisplayNameInput.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+    import { Input } from "component-lib";
+    import type { OpenChat } from "@client";
+    import { onMount, untrack } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    const MIN_DISPLAY_NAME_LENGTH = 3;
+    const MAX_DISPLAY_NAME_LENGTH = 25;
+
+    interface Props {
+        client: OpenChat;
+        originalDisplayName: string | undefined;
+        displayName: string | undefined;
+        displayNameValid: boolean;
+        disabled?: boolean;
+        errorMsg?: string;
+    }
+
+    let {
+        client,
+        originalDisplayName,
+        displayName = $bindable(),
+        displayNameValid = $bindable(),
+        disabled = false,
+        errorMsg = $bindable(),
+    }: Props = $props();
+
+    void displayNameValid;
+
+    onMount(() => {
+        displayName = originalDisplayName;
+        displayNameValid = true;
+    });
+
+    $effect(() => {
+        if (typeof displayName !== "string") return;
+
+        let d = displayName;
+
+        untrack(() => {
+            if (d.length === 0) {
+                displayName = undefined;
+                displayNameValid = true;
+                return;
+            }
+
+            displayNameValid = client.isDisplayNameValid(d);
+        });
+    });
+</script>
+
+<Input
+    bind:value={displayName}
+    {disabled}
+    minlength={MIN_DISPLAY_NAME_LENGTH}
+    maxlength={MAX_DISPLAY_NAME_LENGTH}
+    countdown
+    placeholder={interpolate($_, i18nKey("register.enterDisplayName"))}>
+    {#snippet subtext()}
+        <Translatable resourceKey={i18nKey(errorMsg ?? "Optionally enter your display name")}
+        ></Translatable>
+    {/snippet}
+</Input>
diff --git a/frontend/app/src/mobile/features/profile/view/FontSize.svelte b/frontend/app/src/mobile/features/profile/view/FontSize.svelte
new file mode 100644
index 0000000000..482fa618e6
--- /dev/null
+++ b/frontend/app/src/mobile/features/profile/view/FontSize.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+    import { Container } from "component-lib";
+    import { fontScaleStore } from "@client";
+    import Range from "./Range.svelte";
+</script>
+
+<Container overflow={"visible"} direction={"vertical"}>
+    <Container overflow={"visible"} minHeight={"1rem"} mainAxisAlignment={"spaceBetween"}>
+        <div
+            class:selected={$fontScaleStore === 0}
+            class="letter zero"
+            onclick={() => fontScaleStore.set(0)}>
+            50%
+        </div>
+        <div
+            class:selected={$fontScaleStore === 1}
+            class="letter one"
+            onclick={() => fontScaleStore.set(1)}>
+            75%
+        </div>
+        <div
+            class:selected={$fontScaleStore === 2}
+            class="letter two"
+            onclick={() => fontScaleStore.set(2)}>
+            100%
+        </div>
+        <div
+            class:selected={$fontScaleStore === 3}
+            class="letter three"
+            onclick={() => fontScaleStore.set(3)}>
+            125%
+        </div>
+        <div
+            class:selected={$fontScaleStore === 4}
+            class="letter four"
+            onclick={() => fontScaleStore.set(4)}>
+            150%
+        </div>
+    </Container>
+    <Container>
+        <Range min={0} max={4} bind:value={$fontScaleStore} />
+    </Container>
+</Container>
+
+<style lang="scss">
+    .letter {
+        position: absolute;
+        transform: translateX(-50%);
+        cursor: pointer;
+        text-align: center;
+        font-size: 12px;
+        font-weight: 100;
+    }
+
+    .selected {
+        color: var(--primary);
+        font-weight: 700;
+    }
+
+    .zero {
+        left: 0;
+        transform: translateX(0);
+    }
+
+    .one {
+        left: 25%;
+    }
+
+    .two {
+        left: 50%;
+    }
+
+    .three {
+        left: 75%;
+    }
+
+    .four {
+        transform: translateX(-100%);
+        left: 100%;
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/profile/view/PremiumItem.svelte b/frontend/app/src/mobile/features/profile/view/PremiumItem.svelte
new file mode 100644
index 0000000000..4497b773f2
--- /dev/null
+++ b/frontend/app/src/mobile/features/profile/view/PremiumItem.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+    import { i18nKey } from "@src/i18n/i18n";
+    import { ColourVars, Tooltip } from "component-lib";
+    import { PremiumItem, premiumItemsStore, premiumPrices } from "@client";
+    import { type Snippet } from "svelte";
+    import Lock from "svelte-material-icons/Lock.svelte";
+    import PremiumItemPayment from "@src/mobile/shared/PremiumItemPayment.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    type OnClick = () => void;
+
+    interface Props {
+        onClick: OnClick;
+        children: Snippet<[OnClick]>;
+        item: PremiumItem;
+    }
+
+    let { onClick, children, item }: Props = $props();
+    let showPayGate = $state(false);
+    let hasFeature = $derived($premiumItemsStore.has(item));
+
+    let wrappedClick = $derived.by(() => {
+        return () => {
+            if (hasFeature) {
+                showPayGate = false;
+                return onClick();
+            } else {
+                showPayGate = true;
+            }
+        };
+    });
+</script>
+
+{#if showPayGate}
+    <PremiumItemPayment {item} onSuccess={wrappedClick} onCancel={() => (showPayGate = false)} />
+{/if}
+
+<Tooltip enable={!hasFeature} position="top" align="middle">
+    <div class="premium" class:locked={!hasFeature}>
+        {@render children(wrappedClick)}
+
+        {#if !hasFeature}
+            <div class="locked">
+                <Lock size={"1.3em"} color={ColourVars.secondary} />
+            </div>
+        {/if}
+    </div>
+    {#snippet popup()}
+        <Translatable
+            resourceKey={i18nKey("premiumItem.priceTooltip", {
+                price: premiumPrices[item].toLocaleString(),
+            })}></Translatable>
+    {/snippet}
+</Tooltip>
+
+<style lang="scss">
+    .premium {
+        position: relative;
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        .locked {
+            top: -0.3rem;
+            left: -0.3rem;
+            transition: opacity 200ms ease-in-out;
+            position: absolute;
+            pointer-events: none;
+        }
+
+        &:hover {
+            .locked {
+                opacity: 0.8;
+            }
+        }
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/Range.svelte b/frontend/app/src/mobile/features/profile/view/Range.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/Range.svelte
rename to frontend/app/src/mobile/features/profile/view/Range.svelte
diff --git a/frontend/app/src/mobile/features/profile/view/Share.svelte b/frontend/app/src/mobile/features/profile/view/Share.svelte
new file mode 100644
index 0000000000..c09be8db22
--- /dev/null
+++ b/frontend/app/src/mobile/features/profile/view/Share.svelte
@@ -0,0 +1,90 @@
+<script lang="ts">
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import { shareLink } from "@src/utils/share";
+    import { BodySmall, Caption, ColourVars, CommonButton, Container, H2 } from "component-lib";
+    import { allUsersStore, currentUserIdStore, OpenChat } from "@client";
+    import { getContext } from "svelte";
+    import ContentCopy from "svelte-material-icons/ContentCopy.svelte";
+    import ShareIcon from "svelte-material-icons/ShareVariant.svelte";
+    import QRCode from "@src/mobile/shared/QRCode.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    let user = $derived($allUsersStore.get($currentUserIdStore) ?? client.nullUser("unknown"));
+    let link = $derived(`${client.canonicalOrigin()}/?ref=${$currentUserIdStore}`);
+
+    function onCopy() {
+        navigator.clipboard.writeText(user.userId).then(() => {
+            toastStore.showSuccessToast(i18nKey("linkCopiedToClipboard"));
+        });
+    }
+</script>
+
+<SlidingPageContent title={i18nKey("Share")}>
+    <Container
+        padding={"xxl"}
+        gap={"lg"}
+        height={"fill"}
+        crossAxisAlignment={"center"}
+        direction={"vertical"}>
+        <Container gap={"xl"} direction={"vertical"}>
+            <Container gap={"lg"} direction={"vertical"}>
+                <H2 width={{ size: "70%" }} fontWeight={"bold"} colour={"primary"}>
+                    <Translatable resourceKey={i18nKey("Share with family & friends")}
+                    ></Translatable>
+                </H2>
+
+                <BodySmall>
+                    <Translatable
+                        resourceKey={i18nKey(
+                            "Share your OpenChat link to earn CHIT rewards. You get CHIT when referred users verify unique personhood or become Diamond members. Referring a Diamond member earns 5,000 CHIT, proving unique personhood earns 10,000 CHIT, and a lifetime Diamond membership yields 15,000 CHIT.  ",
+                        )}>
+                    </Translatable>
+                </BodySmall>
+
+                <BodySmall>
+                    <Translatable
+                        resourceKey={i18nKey(
+                            "Your friends can scan the QR code below, or you may copy the link and send it yourself, or share via available mediums.",
+                        )}>
+                    </Translatable>
+                </BodySmall>
+            </Container>
+
+            <Container
+                padding={["lg", "lg", "xl", "lg"]}
+                direction={"vertical"}
+                mainAxisAlignment={"center"}
+                crossAxisAlignment={"center"}
+                background={ColourVars.background1}>
+                <Container
+                    padding={["lg", "lg", "zero", "lg"]}
+                    mainAxisAlignment={"center"}
+                    crossAxisAlignment={"center"}>
+                    <QRCode text={link} fullWidthOnMobile />
+                </Container>
+                <Caption align={"center"} colour={"primary"}>
+                    {link}
+                </Caption>
+            </Container>
+
+            <Container mainAxisAlignment={"end"} gap={"sm"} crossAxisAlignment={"end"}>
+                <CommonButton onClick={onCopy} size={"small_text"}>
+                    {#snippet icon(color)}
+                        <ContentCopy {color}></ContentCopy>
+                    {/snippet}
+                    <Translatable resourceKey={i18nKey("Copy link")}></Translatable>
+                </CommonButton>
+                <CommonButton onClick={() => shareLink(link)} size={"medium"} mode={"active"}>
+                    {#snippet icon(color, size)}
+                        <ShareIcon {color} {size}></ShareIcon>
+                    {/snippet}
+                    <Translatable resourceKey={i18nKey("share")}></Translatable>
+                </CommonButton>
+            </Container>
+        </Container>
+    </Container>
+</SlidingPageContent>
diff --git a/frontend/app/src/components_mobile/home/user_profile/Streak.svelte b/frontend/app/src/mobile/features/profile/view/Streak.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/user_profile/Streak.svelte
rename to frontend/app/src/mobile/features/profile/view/Streak.svelte
diff --git a/frontend/app/src/components_mobile/home/user_profile/StreakHeadline.svelte b/frontend/app/src/mobile/features/profile/view/StreakHeadline.svelte
similarity index 91%
rename from frontend/app/src/components_mobile/home/user_profile/StreakHeadline.svelte
rename to frontend/app/src/mobile/features/profile/view/StreakHeadline.svelte
index ad646125af..560b2f5337 100644
--- a/frontend/app/src/components_mobile/home/user_profile/StreakHeadline.svelte
+++ b/frontend/app/src/mobile/features/profile/view/StreakHeadline.svelte
@@ -2,7 +2,7 @@
     import { i18nKey } from "@src/i18n/i18n";
     import { Container, H1 } from "component-lib";
     import { chitStateStore } from "@client";
-    import Translatable from "../../Translatable.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
 </script>
 
 <Container supplementalClass={"streak_title"} gap={"xl"} direction={"vertical"}>
diff --git a/frontend/app/src/components_mobile/home/user_profile/UserInformation.svelte b/frontend/app/src/mobile/features/profile/view/UserInformation.svelte
similarity index 95%
rename from frontend/app/src/components_mobile/home/user_profile/UserInformation.svelte
rename to frontend/app/src/mobile/features/profile/view/UserInformation.svelte
index 9706b7886c..5214720569 100644
--- a/frontend/app/src/components_mobile/home/user_profile/UserInformation.svelte
+++ b/frontend/app/src/mobile/features/profile/view/UserInformation.svelte
@@ -13,11 +13,11 @@
     } from "@client";
     import { getContext } from "svelte";
     import Save from "svelte-material-icons/ContentSaveOutline.svelte";
-    import DisplayNameInput from "../../DisplayNameInput.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import UsernameInput from "../../UsernameInput.svelte";
-    import DiamondUpgradeBox from "../DiamondUpgradeBox.svelte";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
+    import DisplayNameInput from "./DisplayNameInput.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import UsernameInput from "@src/mobile/shared/UsernameInput.svelte";
+    import DiamondUpgradeBox from "@src/mobile/shared/DiamondUpgradeBox.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
     import UserProfileImageEditor from "./UserProfileImageEditor.svelte";
 
     const MAX_DESC_LENGTH = 1024;
diff --git a/frontend/app/src/components_mobile/home/user_profile/UserProfileImageEditor.svelte b/frontend/app/src/mobile/features/profile/view/UserProfileImageEditor.svelte
similarity index 94%
rename from frontend/app/src/components_mobile/home/user_profile/UserProfileImageEditor.svelte
rename to frontend/app/src/mobile/features/profile/view/UserProfileImageEditor.svelte
index d1d020ed03..18c56d9a95 100644
--- a/frontend/app/src/components_mobile/home/user_profile/UserProfileImageEditor.svelte
+++ b/frontend/app/src/mobile/features/profile/view/UserProfileImageEditor.svelte
@@ -11,9 +11,9 @@
     } from "@client";
     import { getContext } from "svelte";
     import ImageEditOutline from "svelte-material-icons/ImageEditOutline.svelte";
-    import EditableAvatar from "../../EditableAvatar.svelte";
-    import EditableImageWrapper from "../../EditableImageWrapper.svelte";
-    import PremiumItemComponent from "../../PremiumItem.svelte";
+    import EditableAvatar from "@src/mobile/shared/EditableAvatar.svelte";
+    import EditableImageWrapper from "@src/mobile/shared/EditableImageWrapper.svelte";
+    import PremiumItemComponent from "./PremiumItem.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/components_mobile/home/user_profile/UserProfileSummary.svelte b/frontend/app/src/mobile/features/profile/view/UserProfileSummary.svelte
similarity index 95%
rename from frontend/app/src/components_mobile/home/user_profile/UserProfileSummary.svelte
rename to frontend/app/src/mobile/features/profile/view/UserProfileSummary.svelte
index 797898e15b..73868d9dd4 100644
--- a/frontend/app/src/components_mobile/home/user_profile/UserProfileSummary.svelte
+++ b/frontend/app/src/mobile/features/profile/view/UserProfileSummary.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { i18nKey } from "@src/i18n/i18n";
-    import { clearChatShortcuts } from "@stores/chatShortcuts";
+    import { clearChatShortcuts } from "@src/stores/chatShortcuts";
     import { Body, Container, IconButton, MenuItem, MenuTrigger } from "component-lib";
     import {
         allUsersStore,
@@ -14,8 +14,8 @@
     import { getContext, onMount } from "svelte";
     import DotsVertical from "svelte-material-icons/DotsVertical.svelte";
     import Share from "svelte-material-icons/ShareVariantOutline.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import Stats from "../Stats.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import Stats from "@src/mobile/shared/Stats.svelte";
     import UserProfileSummaryCard from "./UserProfileSummaryCard.svelte";
 
     const client = getContext<OpenChat>("client");
diff --git a/frontend/app/src/components_mobile/home/user_profile/UserProfileSummaryCard.svelte b/frontend/app/src/mobile/features/profile/view/UserProfileSummaryCard.svelte
similarity index 97%
rename from frontend/app/src/components_mobile/home/user_profile/UserProfileSummaryCard.svelte
rename to frontend/app/src/mobile/features/profile/view/UserProfileSummaryCard.svelte
index 63a85f3dc4..ed7462bceb 100644
--- a/frontend/app/src/components_mobile/home/user_profile/UserProfileSummaryCard.svelte
+++ b/frontend/app/src/mobile/features/profile/view/UserProfileSummaryCard.svelte
@@ -27,11 +27,11 @@
     import { getContext, onMount, type Snippet } from "svelte";
     import { _ } from "svelte-i18n";
     import { toastStore } from "@src/stores/toast";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import Badges from "../profile/Badges.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import Badges from "@src/mobile/features/profile/Badges.svelte";
     import ChitSummary from "./ChitSummary.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import Progress from "../../Progress.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import Progress from "@src/mobile/shared/Progress.svelte";
     import DiamondOutline from "svelte-material-icons/DiamondOutline.svelte";
     import Lifetime from "svelte-material-icons/DiamondStone.svelte";
     import CopyIcon from "svelte-material-icons/ContentCopy.svelte";
diff --git a/frontend/app/src/components_mobile/home/user_profile/Verify.svelte b/frontend/app/src/mobile/features/profile/view/Verify.svelte
similarity index 89%
rename from frontend/app/src/components_mobile/home/user_profile/Verify.svelte
rename to frontend/app/src/mobile/features/profile/view/Verify.svelte
index 4019d095d8..55d617d027 100644
--- a/frontend/app/src/components_mobile/home/user_profile/Verify.svelte
+++ b/frontend/app/src/mobile/features/profile/view/Verify.svelte
@@ -3,9 +3,9 @@
     import { BodySmall, CommonButton, Container, H2 } from "component-lib";
     import { publish } from "@client";
     import AccountStar from "svelte-material-icons/AccountStarOutline.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import HumanityConfirmation from "../HumanityConfirmation.svelte";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import HumanityConfirmation from "@src/mobile/shared/HumanityConfirmation.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
 
     let confirmed = $state(false);
     function verify() {
diff --git a/frontend/app/src/mobile/features/proposals/CommunityFinder.svelte b/frontend/app/src/mobile/features/proposals/CommunityFinder.svelte
new file mode 100644
index 0000000000..7752532a0e
--- /dev/null
+++ b/frontend/app/src/mobile/features/proposals/CommunityFinder.svelte
@@ -0,0 +1,120 @@
+<script lang="ts">
+    import { Avatar, Column, Option, Row, Search, Select, Subtitle } from "component-lib";
+    import { OpenChat, type CommunityMatch } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import { communitySearchState } from "@src/stores/search.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    const client = getContext<OpenChat>("client");
+    const PAGE_SIZE = 15;
+
+    interface Props {
+        onSelect: (community: CommunityMatch | undefined) => void;
+        selected?: CommunityMatch;
+    }
+
+    let { onSelect, selected }: Props = $props();
+
+    function search(term?: string) {
+        if (term === undefined || term === "") {
+            reset(true);
+            return;
+        }
+        communitySearchState.term = term;
+        communitySearchState.reset();
+
+        client
+            .exploreCommunities(
+                communitySearchState.term === "" ? undefined : communitySearchState.term,
+                communitySearchState.index,
+                PAGE_SIZE,
+                0,
+                [],
+            )
+            .then((results) => {
+                console.log("results", results);
+                if (results.kind === "success") {
+                    communitySearchState.results = results.matches;
+                    communitySearchState.total = results.total;
+                }
+            });
+    }
+
+    function reset(clearSelected: boolean) {
+        communitySearchState.results = [];
+        communitySearchState.term = "";
+        if (clearSelected) {
+            select(undefined);
+        }
+    }
+
+    function select(match: CommunityMatch | undefined) {
+        selected = match;
+        communitySearchState.results = [];
+        onSelect(match);
+    }
+</script>
+
+<Select
+    onSelect={select}
+    onOpen={() => search(communitySearchState.term)}
+    placeholder={interpolate($_, i18nKey("verified.choose", undefined, "community", true))}
+    value={selected}>
+    {#snippet subtext()}
+        <Translatable resourceKey={i18nKey("verified.choose", undefined, "community", true)}
+        ></Translatable>
+    {/snippet}
+    {#snippet selectedValue(val)}
+        {val.name}
+    {/snippet}
+    {#snippet selectOptions(onSelect)}
+        <Column
+            onClick={(e) => e?.stopPropagation()}
+            height={{ size: "100%" }}
+            supplementalClass={"community_options"}
+            padding={"lg"}
+            gap={"lg"}>
+            <Subtitle fontWeight={"bold"}>
+                <Translatable resourceKey={i18nKey("verified.choose", undefined, "community", true)}
+                ></Translatable>
+            </Subtitle>
+
+            <Search
+                onSearch={search}
+                onClear={() => (communitySearchState.term = "")}
+                searching={false}
+                placeholder={interpolate($_, i18nKey("communities.search"))}
+                value={communitySearchState.term} />
+
+            <Column supplementalClass={"binding_options"}>
+                {#each communitySearchState.results as community (community.id.communityId)}
+                    <Option
+                        padding={["xs", "lg", "xs", "xs"]}
+                        value={community}
+                        onClick={onSelect}
+                        selected={selected?.id.communityId === community.id.communityId}>
+                        <Row padding={["zero", "zero"]} gap={"md"} crossAxisAlignment={"center"}>
+                            <Avatar
+                                url={client.communityAvatarUrl(
+                                    community.id.communityId,
+                                    community.avatar,
+                                )}
+                                size={"lg"} />
+                            <Subtitle fontWeight={"bold"}>
+                                {community.name}
+                            </Subtitle>
+                        </Row>
+                    </Option>
+                {/each}
+            </Column>
+        </Column>
+    {/snippet}
+</Select>
+
+<style lang="scss">
+    :global(.container.community_options) {
+        flex: auto !important;
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/proposals/GroupFinder.svelte b/frontend/app/src/mobile/features/proposals/GroupFinder.svelte
new file mode 100644
index 0000000000..f51225c3d6
--- /dev/null
+++ b/frontend/app/src/mobile/features/proposals/GroupFinder.svelte
@@ -0,0 +1,111 @@
+<script lang="ts">
+    import { Avatar, Column, Option, Row, Search, Select, Subtitle } from "component-lib";
+    import { chatIdentifiersEqual, OpenChat, type GroupMatch } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import { groupSearchState } from "@src/stores/search.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    const client = getContext<OpenChat>("client");
+    const PAGE_SIZE = 15;
+
+    interface Props {
+        onSelect: (group: GroupMatch | undefined) => void;
+        selected?: GroupMatch;
+    }
+
+    let { onSelect, selected }: Props = $props();
+
+    function search(term?: string) {
+        if (term === undefined || term === "") {
+            reset(true);
+            return;
+        }
+        groupSearchState.term = term;
+        groupSearchState.reset();
+
+        client.searchGroups(groupSearchState.term, PAGE_SIZE).then((results) => {
+            if (results.kind === "success") {
+                groupSearchState.results = results.matches;
+                groupSearchState.total = results.total;
+            }
+        });
+    }
+
+    function reset(clearSelected: boolean) {
+        groupSearchState.results = [];
+        groupSearchState.term = "";
+        if (clearSelected) {
+            select(undefined);
+        }
+    }
+
+    function select(match: GroupMatch | undefined) {
+        selected = match;
+        groupSearchState.results = [];
+        onSelect(match);
+    }
+</script>
+
+<Select
+    onSelect={select}
+    onOpen={() => search(groupSearchState.term)}
+    placeholder={interpolate($_, i18nKey("verified.choose", undefined, "group", true))}
+    value={selected}>
+    {#snippet subtext()}
+        <Translatable resourceKey={i18nKey("verified.choose", undefined, "group", true)}
+        ></Translatable>
+    {/snippet}
+    {#snippet selectedValue(val)}
+        {val.name}
+    {/snippet}
+    {#snippet selectOptions(onSelect)}
+        <Column
+            onClick={(e) => e?.stopPropagation()}
+            height={{ size: "100%" }}
+            supplementalClass={"group_options"}
+            padding={"lg"}
+            gap={"lg"}>
+            <Subtitle fontWeight={"bold"}>
+                <Translatable resourceKey={i18nKey("verified.choose", undefined, "group", true)}
+                ></Translatable>
+            </Subtitle>
+
+            <Search
+                onSearch={search}
+                onClear={() => (groupSearchState.term = "")}
+                searching={false}
+                placeholder={interpolate($_, i18nKey("search"))}
+                value={groupSearchState.term} />
+
+            <Column supplementalClass={"binding_options"}>
+                {#each groupSearchState.results as group (group.chatId.groupId)}
+                    <Option
+                        padding={["xs", "lg", "xs", "xs"]}
+                        value={group}
+                        onClick={onSelect}
+                        selected={chatIdentifiersEqual(selected?.chatId, group.chatId)}>
+                        <Row padding={["zero", "zero"]} gap={"md"} crossAxisAlignment={"center"}>
+                            <Avatar
+                                url={client.groupAvatarUrl({
+                                    ...group,
+                                    id: group.chatId,
+                                })}
+                                size={"lg"} />
+                            <Subtitle fontWeight={"bold"}>
+                                {group.name}
+                            </Subtitle>
+                        </Row>
+                    </Option>
+                {/each}
+            </Column>
+        </Column>
+    {/snippet}
+</Select>
+
+<style lang="scss">
+    :global(.container.group_options) {
+        flex: auto !important;
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/proposals/MakeProposalModal.svelte b/frontend/app/src/mobile/features/proposals/MakeProposalModal.svelte
new file mode 100644
index 0000000000..21d9816cd5
--- /dev/null
+++ b/frontend/app/src/mobile/features/proposals/MakeProposalModal.svelte
@@ -0,0 +1,841 @@
+<script lang="ts">
+    import {
+        Body,
+        BodySmall,
+        Caption,
+        ColourVars,
+        Column,
+        CommonButton,
+        Input,
+        Option,
+        Row,
+        Select,
+        Sheet,
+        Subtitle,
+        TextArea,
+    } from "component-lib";
+    import {
+        cryptoBalanceStore,
+        currentUserIdStore,
+        currentUserStore,
+        routeForChatIdentifier,
+        type CandidateProposalAction,
+        type MultiUserChat,
+        type NervousSystemDetails,
+        type OpenChat,
+        type ResourceKey,
+    } from "@client";
+    import { isPrincipalValid, isUrl, random32, type ExternalBot } from "@shared";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import EyeIcon from "svelte-material-icons/EyeOutline.svelte";
+    import PencilIcon from "svelte-material-icons/PencilOutline.svelte";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import { pinNumberErrorMessageStore } from "@src/stores/pinNumber";
+    import {
+        createAddTokenPayload,
+        createPublishExternalBotPayload,
+        createRegisterExternalAchievementPayload,
+        createUpdateTokenPayload,
+    } from "@src/utils/sns";
+    import BotPublisher from "@src/mobile/features/bots/BotPublisher.svelte";
+    import ErrorMessage from "@src/mobile/shared/ErrorMessage.svelte";
+    import Legend from "@src/mobile/shared/Legend.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import AccountInfo from "@src/mobile/shared/AccountInfo.svelte";
+    import BalanceWithRefresh from "@src/mobile/shared/BalanceWithRefresh.svelte";
+    import DurationSelector from "@src/mobile/shared/DurationSelector.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import RemoveBot from "./RemoveBot.svelte";
+    import TransferSnsFunds from "./TransferSNSFunds.svelte";
+    import VerificationProposal from "./VerificationProposal.svelte";
+
+    const MIN_TITLE_LENGTH = 3;
+    const MAX_TITLE_LENGTH = 120;
+    const MAX_URL_LENGTH = 2000;
+    const MIN_SUMMARY_LENGTH = 3;
+    const MAX_SUMMARY_LENGTH = 10000;
+    const CANISTER_ID_LENGTH = 27;
+    const MIN_ACHIEVEMENT_NAME_LENGTH = 3;
+    const MAX_ACHIEVEMENT_NAME_LENGTH = 45;
+    const MIN_CHIT_REWARD = 5000;
+    const MIN_AWARDS = 200;
+    const CHAT_FEE_PER_CHIT_AWARD: bigint = 20_000n; // 1/5000th of a CHAT
+    const ONE_MONTH = 1000 * 60 * 60 * 24 * 30;
+    const TOKEN_LISTING_FEE: bigint = 50_000_100_000n; // 500 CHAT + transfer fee
+
+    const PROPOSALS_BOT_CANISTER = import.meta.env.OC_PROPOSALS_BOT_CANISTER!;
+    const REGISTRY_CANISTER = import.meta.env.OC_REGISTRY_CANISTER!;
+    const USER_INDEX_CANISTER = import.meta.env.OC_USER_INDEX_CANISTER!;
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        selectedMultiUserChat: MultiUserChat;
+        nervousSystem: NervousSystemDetails;
+        onClose: () => void;
+    }
+
+    let { selectedMultiUserChat, nervousSystem, onClose }: Props = $props();
+
+    type ProposalType =
+        | "motion"
+        | "publish_bot"
+        | "remove_bot"
+        | "transfer_sns_funds"
+        | "register_external_achievement"
+        | "advance_sns_target_version"
+        | "add_token"
+        | "update_token"
+        | "set_community_verification"
+        | "set_group_verification"
+        | "revoke_community_verification"
+        | "revoke_group_verification";
+
+    let title = $state("");
+    let url = $state("");
+    let summary = $state("");
+    let achievementExpiry: bigint = $state(BigInt(ONE_MONTH));
+    let achievementExpiryValid = $state(true);
+    let chitRewardText = $state("5000");
+    let maxAwardsText = $state("200");
+    let step = $state(-1);
+    let summaryPreview = $state(false);
+    let busy = $state(true);
+    let selectedProposalType: ProposalType | undefined = $state(undefined);
+    let error: string | undefined = $state(undefined);
+    let depositMessage: ResourceKey | undefined = $state(undefined);
+    let depositError = $state(true);
+    let refreshingBalance = $state(false);
+    let balanceWithRefresh: BalanceWithRefresh;
+    let achivementName = $state("");
+    let selectedBot: ExternalBot | undefined = $state(undefined);
+    //@ts-ignore
+    let transferSnsFunds: TransferSnsFunds | undefined = $state();
+    //@ts-ignore
+    let verificationComponent: VerificationProposal | undefined = $state();
+    //@ts-ignore
+    let removeBotComponent: RemoveBot | undefined;
+    let transferSnsFundsValid: boolean = $state(false);
+    let removeBotValid: boolean = $state(false);
+    let verificationValid: boolean = $state(false);
+
+    function summaryDescription(type: typeof selectedProposalType): [ResourceKey, ResourceKey] {
+        switch (type) {
+            case "set_community_verification":
+            case "set_group_verification":
+            case "revoke_community_verification":
+            case "revoke_group_verification":
+                return [i18nKey("verified.evidenceLabel"), i18nKey("verified.evidencePlaceholder")];
+            case "remove_bot":
+                return [
+                    i18nKey("bots.manage.removeReason"),
+                    i18nKey("bots.manage.removeReasonPlaceholder"),
+                ];
+            default:
+                return [i18nKey("proposal.maker.summary"), i18nKey("proposal.maker.enterSummary")];
+        }
+    }
+
+    function defaultMessage(): ResourceKey {
+        const cost = client.formatTokens(requiredFunds, tokenDetails.decimals);
+        return i18nKey("proposal.maker.message", { cost, token: symbol });
+    }
+
+    async function onClickPrimary(): Promise<void> {
+        if (step === 0) {
+            balanceWithRefresh.refresh();
+        } else if (canSubmit) {
+            onSubmit();
+        } else if (step === 1) {
+            step = 2;
+        }
+    }
+
+    async function onSubmit(): Promise<void> {
+        if (!valid) return;
+
+        busy = true;
+
+        const pin = await client.promptForPinIfRequired();
+
+        if (
+            !(await approvePayment(
+                PROPOSALS_BOT_CANISTER,
+                proposalCost + BigInt(2) * transferFee,
+                pin,
+            ))
+        ) {
+            busy = false;
+            return;
+        }
+
+        if (
+            selectedProposalType === "register_external_achievement" ||
+            selectedProposalType === "add_token"
+        ) {
+            const addToken = selectedProposalType === "add_token";
+            let spender = addToken ? REGISTRY_CANISTER : USER_INDEX_CANISTER;
+            let amount = addToken ? TOKEN_LISTING_FEE : achievementChatCost;
+
+            if (!(await approvePayment(spender, amount, pin))) {
+                busy = false;
+                return;
+            }
+        }
+
+        const action = convertAction();
+
+        if (action === undefined) {
+            busy = false;
+            return;
+        }
+
+        client
+            .submitProposal(nervousSystem.governanceCanisterId, {
+                title,
+                url: url === "" ? undefined : url,
+                summary,
+                action,
+            })
+            .then((success) => {
+                busy = false;
+                if (success) {
+                    onClose();
+                } else {
+                    error = "unexpectedError";
+                }
+            });
+    }
+
+    function convertAction(): CandidateProposalAction | undefined {
+        switch (selectedProposalType) {
+            case "motion":
+            case "advance_sns_target_version":
+                return { kind: selectedProposalType };
+            case "transfer_sns_funds": {
+                return transferSnsFunds?.convertAction();
+            }
+            case "remove_bot": {
+                return removeBotComponent?.convertAction();
+            }
+            case "set_community_verification":
+            case "revoke_community_verification":
+            case "set_group_verification":
+            case "revoke_group_verification": {
+                return verificationComponent?.convertAction();
+            }
+            case "add_token": {
+                return {
+                    kind: "execute_generic_nervous_system_function",
+                    functionId: BigInt(7000),
+                    payload: createAddTokenPayload(
+                        addOrUpdateTokenLedgerCanisterId,
+                        $currentUserIdStore,
+                        addOrUpdateTokenInfoUrl,
+                        addOrUpdateTokenTransactionUrlFormat,
+                        undefined,
+                    ),
+                };
+            }
+            case "update_token": {
+                return {
+                    kind: "execute_generic_nervous_system_function",
+                    functionId: BigInt(7001),
+                    payload: createUpdateTokenPayload(
+                        addOrUpdateTokenLedgerCanisterId,
+                        undefined,
+                        undefined,
+                        addOrUpdateTokenInfoUrl,
+                        addOrUpdateTokenTransactionUrlFormat,
+                        undefined,
+                    ),
+                };
+            }
+            case "register_external_achievement": {
+                return {
+                    kind: "execute_generic_nervous_system_function",
+                    functionId: BigInt(1012),
+                    payload: createRegisterExternalAchievementPayload(
+                        random32(),
+                        $currentUserIdStore,
+                        achivementName,
+                        achievementUrl,
+                        logo,
+                        awardingAchievementCanisterId,
+                        chitReward,
+                        BigInt(Date.now()) + achievementExpiry,
+                        maxAwards,
+                    ),
+                };
+            }
+            case "publish_bot": {
+                if (selectedBot === undefined) {
+                    throw new Error("No bot has been selected - this should not happen");
+                }
+                return {
+                    kind: "execute_generic_nervous_system_function",
+                    functionId: BigInt(1015),
+                    payload: createPublishExternalBotPayload(selectedBot),
+                };
+            }
+        }
+    }
+
+    async function approvePayment(
+        spender_canister_id: string,
+        amount: bigint,
+        pin: string | undefined,
+    ): Promise<boolean> {
+        return client
+            .approveTransfer(
+                spender_canister_id,
+                tokenDetails.ledger,
+                amount,
+                BigInt(Date.now() + 1000 * 60 * 60 * 24 * 5), // allow 5 days for proposal
+                pin,
+            )
+            .then((resp) => {
+                if (resp.kind === "success") {
+                    return true;
+                } else if ($pinNumberErrorMessageStore === undefined) {
+                    error = "approvalError";
+                }
+
+                return false;
+            })
+            .catch(() => {
+                return false;
+            });
+    }
+
+    function onStartRefreshingBalance() {
+        refreshingBalance = true;
+    }
+
+    function onRefreshingBalanceSuccess() {
+        if (step === -1) {
+            step = insufficientFunds ? 0 : 1;
+            busy = false;
+            if (!insufficientFunds) {
+                depositError = false;
+            }
+        } else if (step === 0 && !insufficientFunds) {
+            step = 1;
+            depositError = false;
+        }
+
+        refreshingBalance = false;
+    }
+
+    function onRefreshingBalanceFailed() {
+        depositMessage = i18nKey("Failed to refresh balance");
+        depositError = true;
+        refreshingBalance = false;
+    }
+
+    function wrappedSummary(summary: string) {
+        const groupPath = routeForChatIdentifier(
+            selectedMultiUserChat.kind === "group_chat" ? "chats" : "community",
+            selectedMultiUserChat.id,
+        );
+
+        return `${summary}
+
+> Submitted by [@${$currentUserStore.username}](https://oc.app/user/${$currentUserIdStore}) on [OpenChat](https://oc.app${groupPath})`;
+    }
+
+    function isLogoValid(logo: string): boolean {
+        return logo.length === 0 || isUrl(logo);
+    }
+    let errorMessage = $derived(
+        error !== undefined ? i18nKey("proposal.maker." + error) : $pinNumberErrorMessageStore,
+    );
+    let tokenDetails = $derived(nervousSystem.token);
+    let ledger = $derived(tokenDetails.ledger);
+    let cryptoBalance = $derived($cryptoBalanceStore.get(ledger) ?? BigInt(0));
+    let symbol = $derived(tokenDetails.symbol);
+    let transferFee = $derived(tokenDetails.transferFee);
+    let proposalCost = $derived(nervousSystem.proposalRejectionFee);
+    let requiredFunds = $derived(proposalCost + BigInt(3) * transferFee);
+    let chitReward = $derived(Number(chitRewardText));
+    let chitRewardValid = $derived(chitReward >= MIN_CHIT_REWARD);
+    let maxAwards = $derived(Number(maxAwardsText));
+    let achievementChatCost = $derived(
+        BigInt(chitReward * maxAwards) * CHAT_FEE_PER_CHIT_AWARD + tokenDetails.transferFee,
+    );
+    let insufficientFunds = $derived(cryptoBalance < requiredFunds);
+    let insufficientFundsForPayment = $derived(
+        cryptoBalance <
+            requiredFunds +
+                (selectedProposalType === "register_external_achievement"
+                    ? achievementChatCost
+                    : selectedProposalType === "add_token"
+                      ? TOKEN_LISTING_FEE
+                      : BigInt(0)),
+    );
+    let titleValid = $derived(title.length >= MIN_TITLE_LENGTH && title.length <= MAX_TITLE_LENGTH);
+    let urlValid = $derived(url.length <= MAX_URL_LENGTH);
+    let summaryValid = $derived(
+        summary.length >= MIN_SUMMARY_LENGTH && summary.length <= MAX_SUMMARY_LENGTH,
+    );
+    let maxAwardsValid = $derived(maxAwards >= MIN_AWARDS);
+    let achievementNameValid = $derived(
+        achivementName.length >= MIN_ACHIEVEMENT_NAME_LENGTH &&
+            achivementName.length <= MAX_ACHIEVEMENT_NAME_LENGTH,
+    );
+    let addOrUpdateTokenLedgerCanisterId = $state("");
+
+    let addOrUpdateTokenInfoUrl = $state("");
+
+    let addOrUpdateTokenTransactionUrlFormat = $state("");
+
+    let logo = $state("");
+
+    let achievementUrl = $state("");
+
+    let awardingAchievementCanisterId = $state("");
+
+    let valid = $derived(
+        selectedProposalType !== undefined &&
+            !insufficientFunds &&
+            !insufficientFundsForPayment &&
+            titleValid &&
+            urlValid &&
+            summaryValid &&
+            (selectedProposalType === "motion" ||
+                selectedProposalType === "advance_sns_target_version" ||
+                (selectedProposalType === "publish_bot" && selectedBot !== undefined) ||
+                (selectedProposalType === "remove_bot" && removeBotValid) ||
+                (selectedProposalType === "transfer_sns_funds" && transferSnsFundsValid) ||
+                (selectedProposalType === "set_community_verification" && verificationValid) ||
+                (selectedProposalType === "set_group_verification" && verificationValid) ||
+                (selectedProposalType === "register_external_achievement" &&
+                    achievementNameValid &&
+                    chitRewardValid &&
+                    maxAwardsValid &&
+                    achievementExpiryValid &&
+                    isLogoValid(logo) &&
+                    achievementUrl.length > 0 &&
+                    awardingAchievementCanisterId.length > 0 &&
+                    isPrincipalValid(awardingAchievementCanisterId)) ||
+                (selectedProposalType === "add_token" &&
+                    isPrincipalValid(addOrUpdateTokenLedgerCanisterId) &&
+                    addOrUpdateTokenTransactionUrlFormat.length > 0) ||
+                (selectedProposalType === "update_token" &&
+                    isPrincipalValid(addOrUpdateTokenLedgerCanisterId) &&
+                    addOrUpdateTokenTransactionUrlFormat.length > 0)),
+    );
+    let canSubmit = $derived(
+        step === 2 ||
+            (step === 1 &&
+                (selectedProposalType === "motion" ||
+                    selectedProposalType === "advance_sns_target_version")),
+    );
+    $effect(() => {
+        if (tokenDetails !== undefined) {
+            depositMessage = defaultMessage();
+        }
+    });
+    let [summaryLabel, summaryPlaceholder] = $derived(summaryDescription(selectedProposalType));
+
+    let proposalOptions = $derived.by<{ name: string; value: ProposalType }[]>(() => {
+        const options: { name: string; value: ProposalType }[] = [
+            { name: "Motion", value: "motion" },
+            { name: "Transfer SNS funds", value: "transfer_sns_funds" },
+            { name: "Advance SNS target version", value: "advance_sns_target_version" },
+        ];
+
+        if (symbol === "CHAT" || true) {
+            options.push(
+                { name: "Register external achievement", value: "register_external_achievement" },
+                { name: "Add token", value: "add_token" },
+                { name: "Update token", value: "update_token" },
+                { name: "Publish a bot", value: "publish_bot" },
+                { name: interpolate($_, i18nKey("bots.manage.remove")), value: "remove_bot" },
+                {
+                    name: interpolate($_, i18nKey("verified.verify", undefined, "community", true)),
+                    value: "set_community_verification",
+                },
+                {
+                    name: interpolate($_, i18nKey("verified.verify", undefined, "group", true)),
+                    value: "set_group_verification",
+                },
+                {
+                    name: interpolate($_, i18nKey("verified.revoke", undefined, "community", true)),
+                    value: "revoke_community_verification",
+                },
+                {
+                    name: interpolate($_, i18nKey("verified.revoke", undefined, "group", true)),
+                    value: "revoke_group_verification",
+                },
+            );
+        }
+
+        return options;
+    });
+</script>
+
+<Sheet onDismiss={onClose}>
+    <Column gap={"xl"} padding={"xl"}>
+        <Row crossAxisAlignment={"center"} mainAxisAlignment={"spaceBetween"}>
+            <Subtitle fontWeight={"bold"}>
+                <Translatable resourceKey={i18nKey("proposal.maker.header")} />
+            </Subtitle>
+            <BalanceWithRefresh
+                bind:this={balanceWithRefresh}
+                {ledger}
+                value={cryptoBalance}
+                onClick={onStartRefreshingBalance}
+                onRefreshed={onRefreshingBalanceSuccess}
+                onError={onRefreshingBalanceFailed} />
+        </Row>
+        <Column gap={"lg"}>
+            {#if step === 0}
+                <AccountInfo {ledger} />
+                <Body colour={"textSecondary"}>
+                    <Translatable resourceKey={i18nKey("tokenTransfer.makeDeposit")} />
+                </Body>
+            {:else if step === 1}
+                <Select
+                    onSelect={(val) => (selectedProposalType = val)}
+                    placeholder={interpolate($_, i18nKey("proposal.maker.selectType"))}
+                    value={selectedProposalType}>
+                    {#snippet selectedValue(val)}
+                        {val}
+                    {/snippet}
+                    {#snippet selectOptions(onSelect)}
+                        <Column padding={"lg"}>
+                            {#each proposalOptions as { name, value }}
+                                <Option
+                                    {value}
+                                    onClick={onSelect}
+                                    selected={selectedProposalType === value}>
+                                    {name}
+                                </Option>
+                            {/each}
+                        </Column>
+                    {/snippet}
+                    {#snippet subtext()}
+                        <Translatable resourceKey={i18nKey("proposal.maker.selectType")} />
+                    {/snippet}
+                </Select>
+
+                <Input
+                    autofocus
+                    disabled={busy}
+                    error={title.length > 0 && !titleValid}
+                    bind:value={title}
+                    minlength={MIN_TITLE_LENGTH}
+                    maxlength={MAX_TITLE_LENGTH}
+                    countdown
+                    required
+                    placeholder={interpolate($_, i18nKey("proposal.maker.enterTitle"))}>
+                    {#snippet subtext()}
+                        <Translatable resourceKey={i18nKey("proposal.maker.enterTitle")} />
+                    {/snippet}
+                </Input>
+
+                <Input
+                    disabled={busy}
+                    error={!urlValid}
+                    bind:value={url}
+                    maxlength={MAX_URL_LENGTH}
+                    countdown
+                    placeholder={interpolate($_, i18nKey("proposal.maker.enterUrl"))}>
+                    {#snippet subtext()}
+                        <Translatable resourceKey={i18nKey("proposal.maker.urlRules")} />
+                    {/snippet}
+                </Input>
+
+                <Column gap={"xs"}>
+                    <Column>
+                        {#if summaryPreview}
+                            <Row
+                                background={ColourVars.textTertiary}
+                                padding={["md", "xl", "xs", "xl"]}
+                                borderRadius={"xxl"}
+                                height={{ size: "12rem" }}
+                                gap={"sm"}
+                                crossAxisAlignment={"start"}>
+                                <Body>
+                                    <Markdown inline={false} text={wrappedSummary(summary)} />
+                                </Body>
+                            </Row>
+                        {:else}
+                            <TextArea
+                                rows={8}
+                                disabled={busy}
+                                error={summary.length > 0 && !summaryValid}
+                                bind:value={summary}
+                                minlength={MIN_SUMMARY_LENGTH}
+                                maxlength={MAX_SUMMARY_LENGTH}
+                                placeholder={interpolate($_, summaryPlaceholder)}></TextArea>
+                        {/if}
+                    </Column>
+                    <Row mainAxisAlignment={"spaceBetween"} crossAxisAlignment={"center"}>
+                        <Legend
+                            required
+                            label={summaryLabel}
+                            rules={i18nKey("proposal.maker.summaryRules")} />
+                        <Row
+                            onClick={() => (summaryPreview = !summaryPreview)}
+                            width={"hug"}
+                            padding={["zero", "xl", "zero", "zero"]}
+                            gap={"xs"}
+                            crossAxisAlignment={"center"}>
+                            <Caption colour={"textSecondary"}>
+                                <Translatable
+                                    resourceKey={i18nKey(summaryPreview ? "edit" : "preview")} />
+                            </Caption>
+                            {#if summaryPreview}
+                                <PencilIcon color={ColourVars.textSecondary} />
+                            {:else}
+                                <EyeIcon color={ColourVars.textSecondary} />
+                            {/if}
+                        </Row>
+                    </Row>
+                </Column>
+            {:else if step === 2}
+                {#if selectedProposalType === "set_community_verification" || selectedProposalType === "revoke_community_verification" || selectedProposalType === "set_group_verification" || selectedProposalType === "revoke_group_verification"}
+                    <VerificationProposal
+                        bind:this={verificationComponent}
+                        bind:valid={verificationValid}
+                        type={selectedProposalType} />
+                {:else if selectedProposalType === "publish_bot"}
+                    <BotPublisher bind:selected={selectedBot}></BotPublisher>
+                {:else if selectedProposalType === "remove_bot"}
+                    <RemoveBot bind:valid={removeBotValid}></RemoveBot>
+                {:else if selectedProposalType === "transfer_sns_funds"}
+                    <TransferSnsFunds
+                        bind:valid={transferSnsFundsValid}
+                        bind:this={transferSnsFunds}
+                        {nervousSystem} />
+                {:else if selectedProposalType === "register_external_achievement"}
+                    <Input
+                        autofocus
+                        disabled={busy}
+                        error={achivementName.length > 0 && !achievementNameValid}
+                        bind:value={achivementName}
+                        required
+                        minlength={MIN_ACHIEVEMENT_NAME_LENGTH}
+                        maxlength={MAX_ACHIEVEMENT_NAME_LENGTH}
+                        countdown
+                        placeholder={interpolate(
+                            $_,
+                            i18nKey("proposal.maker.enterAchievementName"),
+                        )}>
+                        {#snippet subtext()}
+                            <Translatable
+                                resourceKey={i18nKey("proposal.maker.enterAchievementName")} />
+                        {/snippet}
+                    </Input>
+                    <Input
+                        disabled={busy}
+                        minlength={1}
+                        maxlength={100}
+                        bind:value={achievementUrl}
+                        countdown
+                        required
+                        placeholder={interpolate($_, i18nKey("https://myapp.xyz/register"))}>
+                        {#snippet subtext()}
+                            <Translatable resourceKey={i18nKey("proposal.maker.achievementUrl")} />
+                        {/snippet}
+                    </Input>
+                    <Input
+                        disabled={busy}
+                        error={!isLogoValid(logo)}
+                        minlength={0}
+                        maxlength={50000}
+                        bind:value={logo}
+                        countdown
+                        placeholder={interpolate(
+                            $_,
+                            i18nKey("data:image/svg+xml;base64,PHN2ZyB3aW..."),
+                        )}>
+                        {#snippet subtext()}
+                            <Translatable resourceKey={i18nKey("proposal.maker.achievementLogo")} />
+                        {/snippet}
+                    </Input>
+                    <Input
+                        autofocus
+                        disabled={busy}
+                        error={awardingAchievementCanisterId.length > 0 &&
+                            !isPrincipalValid(awardingAchievementCanisterId)}
+                        bind:value={awardingAchievementCanisterId}
+                        minlength={CANISTER_ID_LENGTH}
+                        maxlength={CANISTER_ID_LENGTH}
+                        required
+                        countdown
+                        placeholder={interpolate(
+                            $_,
+                            i18nKey("proposal.maker.awardingAchievementCanisterId"),
+                        )}>
+                        {#snippet subtext()}
+                            <Translatable
+                                resourceKey={i18nKey(
+                                    "proposal.maker.awardingAchievementCanisterIdRules",
+                                )} />
+                        {/snippet}
+                    </Input>
+                    <Input
+                        disabled={busy}
+                        error={chitRewardText.length > 0 && !chitRewardValid}
+                        minlength={4}
+                        maxlength={5}
+                        required
+                        bind:value={chitRewardText}
+                        placeholder={interpolate($_, i18nKey("proposal.maker.enterChitReward"))}>
+                        {#snippet subtext()}
+                            <Row gap={"xs"}>
+                                <Translatable resourceKey={i18nKey("proposal.maker.chitReward")} />
+                                (<Translatable
+                                    resourceKey={i18nKey("proposal.maker.chitRewardRules", {
+                                        value: MIN_CHIT_REWARD,
+                                    })} />)
+                            </Row>
+                        {/snippet}
+                    </Input>
+                    <Input
+                        disabled={busy}
+                        error={maxAwardsText.length > 0 && !maxAwardsValid}
+                        minlength={3}
+                        maxlength={8}
+                        required
+                        bind:value={maxAwardsText}
+                        placeholder={interpolate($_, i18nKey("proposal.maker.enterMaxAwards"))}>
+                        {#snippet subtext()}
+                            <Row gap={"xs"}>
+                                <Translatable resourceKey={i18nKey("proposal.maker.maxAwards")} />
+                                (<Translatable
+                                    resourceKey={i18nKey("proposal.maker.maxAwardsRules", {
+                                        value: MIN_AWARDS,
+                                    })} />)
+                            </Row>
+                        {/snippet}
+                    </Input>
+                    <Column padding={["zero", "md"]}>
+                        <DurationSelector bind:duration={achievementExpiry}>
+                            {#snippet title()}
+                                <Column>
+                                    <Body>
+                                        <Translatable
+                                            resourceKey={i18nKey(
+                                                "proposal.maker.achievementExpiry",
+                                            )} />
+                                    </Body>
+                                    <BodySmall colour={"textSecondary"}>
+                                        <Translatable
+                                            resourceKey={i18nKey(
+                                                "Specify how long you would like your promotion to run for",
+                                            )} />
+                                    </BodySmall>
+                                </Column>
+                            {/snippet}
+                        </DurationSelector>
+                    </Column>
+                {:else if selectedProposalType === "add_token" || selectedProposalType === "update_token"}
+                    <Input
+                        autofocus
+                        disabled={busy}
+                        error={addOrUpdateTokenLedgerCanisterId.length > 0 &&
+                            !isPrincipalValid(addOrUpdateTokenLedgerCanisterId)}
+                        bind:value={addOrUpdateTokenLedgerCanisterId}
+                        minlength={CANISTER_ID_LENGTH}
+                        maxlength={CANISTER_ID_LENGTH}
+                        countdown
+                        required
+                        placeholder={interpolate($_, i18nKey("2ouva-viaaa-aaaaq-aaamq-cai"))}>
+                        {#snippet subtext()}
+                            <Translatable
+                                resourceKey={i18nKey("proposal.maker.ledgerCanisterId")} />
+                        {/snippet}
+                    </Input>
+                    <Input
+                        disabled={busy}
+                        minlength={1}
+                        maxlength={100}
+                        bind:value={addOrUpdateTokenInfoUrl}
+                        countdown
+                        required={selectedProposalType === "add_token"}
+                        placeholder={interpolate($_, i18nKey("https://token.com/info"))}>
+                        {#snippet subtext()}
+                            <Translatable resourceKey={i18nKey("proposal.maker.tokenInfoUrl")} />
+                        {/snippet}
+                    </Input>
+                    <Input
+                        disabled={busy}
+                        minlength={1}
+                        maxlength={200}
+                        bind:value={addOrUpdateTokenTransactionUrlFormat}
+                        countdown
+                        required={selectedProposalType === "add_token"}
+                        placeholder={interpolate(
+                            $_,
+                            i18nKey(`https://token.com/transactions/{transaction_index}`),
+                        )}>
+                        {#snippet subtext()}
+                            <Translatable
+                                resourceKey={i18nKey("proposal.maker.transactionUrlFormat")} />
+                        {/snippet}
+                    </Input>
+                {/if}
+            {/if}
+        </Column>
+
+        <!-- Footer -->
+        <Column gap={"lg"} padding={["zero", "md"]}>
+            {#if (selectedProposalType === "register_external_achievement" || selectedProposalType === "add_token") && step === 2}
+                <Body colour={insufficientFundsForPayment ? "error" : "textSecondary"}>
+                    <Translatable
+                        resourceKey={i18nKey(
+                            "proposal.maker." +
+                                (selectedProposalType === "add_token"
+                                    ? "addTokenChatCost"
+                                    : "achievementChatCost"),
+                            {
+                                cost: client.formatTokens(
+                                    selectedProposalType === "add_token"
+                                        ? TOKEN_LISTING_FEE
+                                        : achievementChatCost,
+                                    8,
+                                ),
+                                chat: "CHAT",
+                            },
+                        )} />
+                </Body>
+            {/if}
+            {#if depositMessage !== undefined}
+                <Body colour={depositError ? "error" : "textSecondary"}>
+                    <Translatable resourceKey={depositMessage} />
+                </Body>
+            {/if}
+            {#if errorMessage !== undefined}
+                <ErrorMessage><Translatable resourceKey={errorMessage} /></ErrorMessage>
+            {/if}
+
+            <Row crossAxisAlignment={"center"} gap={"md"} mainAxisAlignment={"end"}>
+                {#if step > 1 || (step == 1 && insufficientFunds)}
+                    <CommonButton
+                        size={"small_text"}
+                        disabled={busy}
+                        onClick={() => (step = step - 1)}
+                        ><Translatable resourceKey={i18nKey("group.back")} /></CommonButton>
+                {/if}
+                <CommonButton size={"small_text"} disabled={busy} onClick={onClose}
+                    >{$_("cancel")}</CommonButton>
+
+                <CommonButton
+                    mode={"active"}
+                    size={"medium"}
+                    disabled={busy || (canSubmit && !valid) || selectedProposalType === undefined}
+                    loading={busy || refreshingBalance}
+                    onClick={onClickPrimary}
+                    ><Translatable
+                        resourceKey={i18nKey(
+                            step === 0 ? "refresh" : canSubmit ? "submit" : "group.next",
+                        )} /></CommonButton>
+            </Row>
+        </Column>
+    </Column>
+</Sheet>
diff --git a/frontend/app/src/mobile/features/proposals/ProposalContent.svelte b/frontend/app/src/mobile/features/proposals/ProposalContent.svelte
new file mode 100644
index 0000000000..64c2475b7b
--- /dev/null
+++ b/frontend/app/src/mobile/features/proposals/ProposalContent.svelte
@@ -0,0 +1,525 @@
+<script lang="ts">
+    import {
+        Body,
+        BodySmall,
+        ChatLabel,
+        Caption,
+        ChatText,
+        ColourVars,
+        Column,
+        CommonButton2,
+        Row,
+        Sheet,
+        Subtitle,
+        Title,
+    } from "component-lib";
+    import {
+        type ChatIdentifier,
+        type OpenChat,
+        type ProposalContent,
+        ProposalDecisionStatus,
+        type RegisterProposalVoteResponse,
+        currentUserIdStore,
+        proposalTopicsStore,
+    } from "@client";
+    import { ErrorCode, type ReadonlyMap } from "@shared";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import ChevronRight from "svelte-material-icons/ChevronRight.svelte";
+    import Alert from "svelte-material-icons/ShieldAlert.svelte";
+    import InfoSlabBoxOut from "svelte-material-icons/InformationOutline.svelte";
+    import AccountMultiple from "svelte-material-icons/AccountMultipleOutline.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { NamedNeurons } from "@src/stores/namedNeurons";
+    import { proposalVotes } from "@src/stores/proposalVotes";
+    import { now } from "@src/stores/time";
+    import { toastStore } from "@src/stores/toast";
+    import { round2 } from "@src/utils/math";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import ProposalVoteButton from "./ProposalVoteButton.svelte";
+    import ProposalVotingProgress from "./ProposalVotingProgress.svelte";
+    import ProposalStatusLabel from "./ProposalStatusLabel.svelte";
+
+    interface Props {
+        content: ProposalContent;
+        chatId: ChatIdentifier;
+        messageIndex: number;
+        messageId: bigint;
+        collapsed: boolean;
+        readonly: boolean;
+        reply: boolean;
+        onExpandMessage?: () => void;
+    }
+
+    let {
+        content,
+        chatId,
+        messageIndex,
+        messageId,
+        collapsed,
+        readonly,
+        reply,
+        onExpandMessage,
+    }: Props = $props();
+
+    const client = getContext<OpenChat>("client");
+    const EMPTY_MOTION_PAYLOAD = "# Motion Proposal:\n## Motion Text:\n\n";
+
+    const dashboardUrl = "https://dashboard.internetcomputer.org";
+    let showNeuronInfo = $state(false);
+    let rootCanister = $derived(
+        client.tryGetNervousSystem(content.governanceCanisterId)?.rootCanisterId ?? "",
+    );
+    let isNns = $derived(content.proposal.kind === "nns");
+    let voteStatus = $derived(
+        $proposalVotes.get(messageId) ??
+            (content.myVote !== undefined ? (content.myVote ? "adopted" : "rejected") : undefined),
+    );
+    let proposal = $derived(content.proposal);
+    let statusColour: Record<ProposalDecisionStatus, string> = {
+        0: ColourVars.disabledButton, // unspecified
+        1: ColourVars.error, // failed
+        2: ColourVars.warning, // open
+        3: ColourVars.error, // rejected
+        4: ColourVars.success, // executed
+        5: ColourVars.success, // adopted
+    };
+    let proposalUrl = $derived(
+        isNns
+            ? `${dashboardUrl}/proposal/${proposal.id}`
+            : `${dashboardUrl}/sns/${rootCanister}/proposal/${proposal.id}`,
+    );
+    let proposerUrl = $derived(
+        isNns
+            ? `${dashboardUrl}/neuron/${proposal.proposer}`
+            : `${dashboardUrl}/sns/${rootCanister}/neuron/${proposal.proposer}`,
+    );
+    let adoptPercent = $derived(round2((100 * proposal.tally.yes) / proposal.tally.total));
+    let rejectPercent = $derived(round2((100 * proposal.tally.no) / proposal.tally.total));
+    let votingEnded = $derived(proposal.deadline <= $now);
+    let disable = $derived(readonly || reply || votingEnded);
+    let votingDisabled = $derived(voteStatus !== undefined || disable);
+    let typeValue = $derived(getProposalTopicLabel(content, $proposalTopicsStore));
+    let payload = $derived(content.proposal.payloadTextRendering);
+    let payloadEmpty = $derived(
+        payload === undefined || payload === EMPTY_MOTION_PAYLOAD || payload.length === 0,
+    );
+
+    // Certain SNS proposal actions are considered "critical" and use higher
+    // voting thresholds. Keep this list in sync with the SNS governance
+    // specification / action-id mapping used by the client. (If the upstream
+    // action ids change, this classification must be updated accordingly.)
+    const criticalSnsProposals = [
+        9, // transfer treasury funds
+        11, // deregister dapp canisters
+        12, // mint sns tokens
+    ];
+    let isCritical = $derived(
+        content.proposal.kind === "sns"
+            ? criticalSnsProposals.indexOf(content.proposal.action) > -1
+            : false,
+    );
+
+    let showDetails = $state(false);
+
+    function onVote(adopt: boolean) {
+        if (votingDisabled || (chatId.kind !== "group_chat" && chatId.kind !== "channel")) {
+            return;
+        }
+
+        const mId = messageId;
+        proposalVotes.insert(mId, adopt ? "adopting" : "rejecting");
+
+        let success = false;
+        client
+            .registerProposalVote(chatId, messageIndex, adopt)
+            .then((resp) => {
+                if (resp.kind === "success") {
+                    success = true;
+                    proposalVotes.insert(mId, adopt ? "adopted" : "rejected");
+                    client.getProposalVoteDetails(
+                        messageId,
+                        content.governanceCanisterId,
+                        proposal.id,
+                        isNns,
+                    );
+                } else if (resp.kind === "error" && resp.code === ErrorCode.NoEligibleNeurons) {
+                    showNeuronInfo = true;
+                } else {
+                    const err = registerProposalVoteErrorMessage(resp);
+                    if (err) toastStore.showFailureToast(i18nKey("proposal." + err));
+                }
+            })
+            .catch((err) => {
+                client.logError("Unable to vote on proposal", err);
+                toastStore.showFailureToast(i18nKey("proposal.voteFailed"));
+            })
+            .finally(() => {
+                if (!success) {
+                    proposalVotes.delete(mId);
+                }
+            });
+    }
+
+    function registerProposalVoteErrorMessage(
+        resp: RegisterProposalVoteResponse,
+    ): string | undefined {
+        if (resp.kind === "error" && resp.code === ErrorCode.NoChange) return "alreadyVoted";
+        if (resp.kind === "error" && resp.code === ErrorCode.ProposalNotAcceptingVotes)
+            return "proposalNotAcceptingVotes";
+        return "voteFailed";
+    }
+
+    function expand() {
+        if (collapsed) {
+            onExpandMessage?.();
+        }
+    }
+
+    function renderNeuronId(neuronId: string): string {
+        const name = NamedNeurons[neuronId];
+        if (name !== undefined) {
+            return name;
+        }
+
+        const length = neuronId.length;
+        if (length < 12) {
+            return neuronId;
+        }
+
+        return `${neuronId.slice(0, 4)}..${neuronId.slice(length - 4, length)}`;
+    }
+
+    export function getProposalTopicLabel(
+        content: ProposalContent,
+        proposalTopics: ReadonlyMap<number, string>,
+    ): string {
+        return (
+            proposalTopics.get(
+                content.proposal.kind === "nns" ? content.proposal.topic : content.proposal.action,
+            ) ?? "unknown"
+        );
+    }
+</script>
+
+{#snippet header()}
+    <Column gap={"md"} width="fill">
+        <!-- Title -->
+        <Column>
+            <Title fontWeight="semi-bold" width="fill">
+                {#if proposal.url.length > 0}
+                    <a class="title_link" href={proposal.url} rel="noreferrer" target="_blank">
+                        {proposal.title}
+                        <BodySmall colour="textSecondary" fontWeight="semi-bold"
+                            >[<Translatable resourceKey={i18nKey("proposal.link")} />]</BodySmall>
+                    </a>
+                {:else}
+                    {proposal.title}
+                {/if}
+            </Title>
+        </Column>
+
+        <!-- Status & Details -->
+        <Row crossAxisAlignment="center" gap="xs">
+            <ProposalStatusLabel
+                content={{ kind: "value", value: ProposalDecisionStatus[proposal.status] }}
+                bgColor={statusColour[proposal.status]} />
+        </Row>
+    </Column>
+{/snippet}
+
+{#snippet metadata()}
+    <Column gap="sm" width="fill">
+        <!-- Proposal type -->
+        <Row gap="sm">
+            {#if isCritical}
+                <Alert color={ColourVars.error} size="1.25rem" />
+            {:else}
+                <InfoSlabBoxOut color={ColourVars.textPrimary} size="1.25rem" />
+            {/if}
+            <Column>
+                <ChatText width="hug" fontWeight="semi-bold" colour="textPrimary">
+                    {typeValue}
+                </ChatText>
+                {#if isCritical}
+                    <BodySmall colour="error">
+                        <Translatable resourceKey={i18nKey("proposal.criticalProposal")} />
+                    </BodySmall>
+                {/if}
+            </Column>
+        </Row>
+
+        <!-- Who proposed the proposal -->
+        <Row gap="sm">
+            <AccountMultiple color={ColourVars.textSecondary} size="1.25rem" />
+            <Row gap="xs">
+                <ChatText width="fill" colour="textSecondary">
+                    <Translatable resourceKey={i18nKey("proposal.proposedBy")} />
+                    <a class="sender_link" target="_blank" rel="noreferrer" href={proposerUrl}>
+                        {renderNeuronId(proposal.proposer)}
+                    </a>
+                </ChatText>
+            </Row>
+        </Row>
+    </Column>
+{/snippet}
+
+{#snippet progress()}
+    <ProposalVotingProgress
+        deadline={proposal.deadline}
+        {votingEnded}
+        {adoptPercent}
+        {rejectPercent}
+        minYesPercentageOfTotal={proposal.minYesPercentageOfTotal}
+        minYesPercentageOfExercised={proposal.minYesPercentageOfExercised} />
+{/snippet}
+
+{#if collapsed}
+    <Column onClick={expand}>
+        <Row
+            gap="sm"
+            padding="md"
+            borderRadius={["lg", "lg", "md", "md"]}
+            crossAxisAlignment="center"
+            backgroundColor={ColourVars.background1}>
+            <Subtitle fontWeight="semi-bold" colour="primary">
+                {proposal.title}
+            </Subtitle>
+            <ChevronRight size="1.25rem" color={ColourVars.primary} />
+        </Row>
+        <Row gap="xs" padding="sm" crossAxisAlignment="center">
+            <ChatLabel width="hug" colour="textSecondary">
+                <Translatable resourceKey={i18nKey("proposal.tapToExpand")} />
+            </ChatLabel>
+        </Row>
+    </Column>
+{:else}
+    <Column
+        gap="lg"
+        padding={["md", "md"]}
+        width={{ size: "72vw" }}
+        borderRadius={["lg", "lg", "md", "md"]}
+        backgroundColor={ColourVars.background0}>
+        {@render header()}
+        {@render metadata()}
+        <div class="separator"></div>
+        {@render progress()}
+        <div class="separator"></div>
+        <Row mainAxisAlignment="center">
+            <CommonButton2 onClick={() => (showDetails = true)} variant="primary" mode="text">
+                <Translatable resourceKey={i18nKey("proposal.viewDetails")} />
+            </CommonButton2>
+        </Row>
+    </Column>
+    <Row gap="sm" padding={["sm", "xxs", "xl"]}>
+        <ProposalVoteButton
+            mode="yes"
+            voting={voteStatus === "adopting"}
+            voted={voteStatus === "adopted"}
+            disabled={votingDisabled}
+            onClick={() => onVote(true)}
+            percentage={adoptPercent} />
+        <ProposalVoteButton
+            mode="no"
+            voting={voteStatus === "rejecting"}
+            voted={voteStatus === "rejected"}
+            disabled={votingDisabled}
+            onClick={() => onVote(false)}
+            percentage={rejectPercent} />
+    </Row>
+{/if}
+
+<!-- Proposal details -->
+
+{#if showDetails}
+    <Sheet onDismiss={() => (showDetails = false)}>
+        <Column gap="lg" maxHeight="70vh" overflow="auto" padding={["md", "xl", "huge"]}>
+            <Column gap="md">
+                <!-- Header labels -->
+                <Row gap="sm" crossAxisAlignment="end" mainAxisAlignment="start">
+                    <ProposalStatusLabel
+                        content={{ kind: "value", value: ProposalDecisionStatus[proposal.status] }}
+                        bgColor={statusColour[proposal.status]} />
+
+                    {#if isCritical}
+                        <Row
+                            width="hug"
+                            borderColour={ColourVars.error}
+                            borderWidth="thick"
+                            borderRadius="md"
+                            padding={["xs", "sm"]}>
+                            <Body colour="error">
+                                <Translatable resourceKey={i18nKey("proposal.criticalProposal")} />
+                            </Body>
+                        </Row>
+                    {/if}
+                </Row>
+
+                <!-- Title -->
+                <Title fontWeight="semi-bold" width="fill">
+                    {#if proposal.url.length > 0}
+                        <a
+                            class="title_link"
+                            href={proposal.url}
+                            rel="noreferrer"
+                            target="_blank"
+                            style:color={ColourVars.textPrimary}>
+                            {proposal.title}
+                            <BodySmall colour="primary" fontWeight="semi-bold"
+                                >[<Translatable
+                                    resourceKey={i18nKey("proposal.link")} />]</BodySmall>
+                        </a>
+                    {:else}
+                        {proposal.title}
+                    {/if}
+                </Title>
+
+                <Row wrap gap="sm" crossAxisAlignment="center">
+                    <!-- ID link -->
+                    <a href={proposalUrl} rel="noreferrer" target="_blank">
+                        <Row gap="xs" width="hug" crossAxisAlignment="center">
+                            <BodySmall fontWeight="semi-bold" colour="primary">
+                                ID {proposal.id}
+                            </BodySmall>
+                        </Row>
+                    </a>
+                    <Caption colour="textSecondary" width={"hug"}>|</Caption>
+
+                    <!-- Type of proposal -->
+                    <BodySmall width="hug" fontWeight="semi-bold" colour="textPrimary">
+                        {typeValue}
+                    </BodySmall>
+                </Row>
+
+                <!-- Proposal origin -->
+                <Row wrap gap="xs" crossAxisAlignment="center">
+                    <BodySmall width="hug" colour="textSecondary">
+                        <Translatable resourceKey={i18nKey("proposal.proposedBy")} />
+                    </BodySmall>
+                    <BodySmall fontWeight="semi-bold" colour="primary">
+                        <a
+                            target="_blank"
+                            rel="noreferrer"
+                            href={proposerUrl}
+                            style:color={ColourVars.primary}>
+                            {renderNeuronId(proposal.proposer)}
+                        </a>
+                    </BodySmall>
+                </Row>
+            </Column>
+
+            <!-- Summary -->
+            <Body fontWeight="light" colour="textPrimary">
+                <Markdown text={proposal.summary} inline={false} />
+            </Body>
+
+            <!-- Additional details -->
+            {#if !payloadEmpty}
+                <Row padding={["sm", "zero"]}>
+                    <div class="separator thick"></div>
+                </Row>
+                <Column gap="lg">
+                    <Subtitle fontWeight={"bold"}>
+                        <Translatable resourceKey={i18nKey("proposal.details")} />
+                    </Subtitle>
+                    <Body colour="textSecondary">
+                        <Markdown text={payload ?? ""} inline={false} />
+                    </Body>
+                </Column>
+            {/if}
+
+            <!-- Passing a proposal -->
+            <Row padding={["sm", "zero"]}>
+                <div class="separator thick"></div>
+            </Row>
+            <Column gap="lg">
+                <Body fontWeight="semi-bold" colour="textPrimary">
+                    <Translatable
+                        resourceKey={i18nKey(
+                            `proposal.passing.title.${isCritical ? "critical" : "regular"}`,
+                        )} />
+                </Body>
+                <Row gap="lg">
+                    <Row width={{ size: "0.75rem" }}>
+                        <Body width="hug" colour="textSecondary">1.</Body>
+                    </Row>
+                    <Column gap="sm">
+                        <Body colour="textPrimary">
+                            <Translatable
+                                resourceKey={i18nKey("proposal.passing.participation.fst", {
+                                    pct: `${proposal.minYesPercentageOfTotal}%`,
+                                })} />
+                        </Body>
+                        <Body colour="textSecondary">
+                            <Translatable
+                                resourceKey={i18nKey("proposal.passing.participation.snd")} />
+                        </Body>
+                    </Column>
+                </Row>
+                <Row gap="lg">
+                    <Row width={{ size: "0.75rem" }}>
+                        <Body width="hug" colour="textSecondary">2.</Body>
+                    </Row>
+                    <Column gap="sm">
+                        <Body colour="textPrimary">
+                            <Translatable
+                                resourceKey={i18nKey(
+                                    `proposal.passing.majority.${isCritical ? "critical" : "regular"}.fst`,
+                                    {
+                                        pct: `${proposal.minYesPercentageOfExercised}%`,
+                                    },
+                                )} />
+                        </Body>
+                        <Body colour="textSecondary">
+                            <Translatable
+                                resourceKey={i18nKey(
+                                    `proposal.passing.majority.${isCritical ? "critical" : "regular"}.snd`,
+                                )} />
+                        </Body>
+                        <Body colour="textSecondary">
+                            <Translatable resourceKey={i18nKey(`proposal.passing.majority.thrd`)} />
+                        </Body>
+                    </Column>
+                </Row>
+            </Column>
+        </Column>
+    </Sheet>
+{/if}
+
+{#if showNeuronInfo}
+    <Sheet onDismiss={() => (showNeuronInfo = false)}>
+        <Column gap="xl" padding={["md", "xl", "huge"]}>
+            <Title fontWeight={"bold"}>
+                <Translatable resourceKey={i18nKey("proposal.noEligibleNeurons")} />
+            </Title>
+            <Body colour="textSecondary">
+                <Markdown
+                    inline={true}
+                    text={$_("proposal.noEligibleNeuronsMessage", {
+                        values: { userId: $currentUserIdStore },
+                    })} />
+            </Body>
+        </Column>
+    </Sheet>
+{/if}
+
+<style lang="scss">
+    .title_link {
+        width: 100%;
+    }
+    .sender_link {
+        color: var(--primary) !important;
+        font-weight: var(--font-weight-semi-bold);
+    }
+    .separator {
+        width: 100%;
+        height: 0.125rem;
+        border-radius: var(--rad-md);
+        background-color: var(--background-2);
+
+        &.thick {
+            height: 0.25rem;
+        }
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/home/proposals/ProposalStatusLabel.svelte b/frontend/app/src/mobile/features/proposals/ProposalStatusLabel.svelte
similarity index 90%
rename from frontend/app/src/components_mobile/home/proposals/ProposalStatusLabel.svelte
rename to frontend/app/src/mobile/features/proposals/ProposalStatusLabel.svelte
index bf5004d518..98408885c7 100644
--- a/frontend/app/src/components_mobile/home/proposals/ProposalStatusLabel.svelte
+++ b/frontend/app/src/mobile/features/proposals/ProposalStatusLabel.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
     import { Body, Row, type ColourVarKeys } from "component-lib";
     import { type Snippet } from "svelte";
-    import Translatable from "../../Translatable.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
 
     type Content =
         | {
diff --git a/frontend/app/src/mobile/features/proposals/ProposalVoteButton.svelte b/frontend/app/src/mobile/features/proposals/ProposalVoteButton.svelte
new file mode 100644
index 0000000000..e930ec1e93
--- /dev/null
+++ b/frontend/app/src/mobile/features/proposals/ProposalVoteButton.svelte
@@ -0,0 +1,113 @@
+<script lang="ts">
+    import {
+        Body,
+        BodySmall,
+        Column,
+        ColourVars,
+        Row,
+        Spinner,
+        type ColourVarKeys,
+    } from "component-lib";
+    import { iconSize } from "@client";
+    import ThumbDown from "svelte-material-icons/ThumbDown.svelte";
+    import ThumbUp from "svelte-material-icons/ThumbUp.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    interface Props {
+        mode: "yes" | "no";
+        percentage: number;
+        disabled: boolean;
+        voting: boolean;
+        voted: boolean;
+        onClick: () => void;
+    }
+
+    let { mode, percentage, disabled, voting, voted, onClick }: Props = $props();
+
+    let labelKey = $derived(
+        mode === "yes"
+            ? `proposal.adopt${voted ? "ed" : ""}`
+            : `proposal.reject${voted ? "ed" : ""}`,
+    );
+
+    let voteActive = $derived(!disabled && !voted);
+
+    let textColour = $derived<ColourVarKeys>(
+        voteActive
+            ? mode === "yes"
+                ? "success"
+                : "error"
+            : voted
+              ? "textPrimary"
+              : "textSecondary",
+    );
+
+    let buttonBg = $derived(
+        voted ? (mode === "yes" ? ColourVars.success : ColourVars.error) : undefined,
+    );
+</script>
+
+<Row
+    onClick={() => {
+        if (!disabled && !voting && !voted) {
+            onClick();
+        }
+    }}
+    gap="xs"
+    padding={["sm", "md"]}
+    width="fill"
+    borderRadius="md"
+    mainAxisAlignment="spaceBetween"
+    crossAxisAlignment="center"
+    backgroundColor={buttonBg}
+    borderStyle="solid"
+    borderWidth="thick"
+    borderColour={disabled && !voted
+        ? ColourVars.disabledButton
+        : mode === "yes"
+          ? ColourVars.success
+          : ColourVars.error}>
+    <!-- Label & Pct -->
+    <Column width="hug" gap="zero">
+        <Body fontWeight="bold" width="hug" colour={textColour}>
+            <Translatable resourceKey={i18nKey(labelKey)} />
+        </Body>
+        <BodySmall width="hug" colour={textColour}>
+            {percentage}%
+        </BodySmall>
+    </Column>
+
+    <!-- Icon -->
+    <div class={`icon ${mode}`} class:voted>
+        {#if voting}
+            <Spinner
+                size="1.25rem"
+                backgroundColour={ColourVars.textPrimary}
+                foregroundColour={ColourVars.background2} />
+        {:else if mode === "yes"}
+            <ThumbUp size={$iconSize} />
+        {:else}
+            <ThumbDown size={$iconSize} />
+        {/if}
+    </div>
+</Row>
+
+<style lang="scss">
+    .icon {
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 2.25rem;
+        height: 2.25rem;
+        cursor: pointer;
+        padding: var(--sp-sm);
+        background-color: var(--background-0);
+
+        &.voted.yes,
+        &.voted.no {
+            background-color: var(--background-2);
+        }
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/proposals/ProposalVotingProgress.svelte b/frontend/app/src/mobile/features/proposals/ProposalVotingProgress.svelte
new file mode 100644
index 0000000000..a324078b66
--- /dev/null
+++ b/frontend/app/src/mobile/features/proposals/ProposalVotingProgress.svelte
@@ -0,0 +1,143 @@
+<script lang="ts">
+    import type { OpenChat } from "@client";
+    import { getContext } from "svelte";
+    import ChevronDown from "svelte-material-icons/ChevronDown.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { rtlStore } from "@src/stores/rtl";
+    import { now500 } from "@src/stores/time";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import { Body, ColourVars, Column, Row } from "component-lib";
+
+    interface Props {
+        adoptPercent: number;
+        rejectPercent: number;
+        votingEnded: boolean;
+        deadline: number;
+        minYesPercentageOfTotal: number;
+        minYesPercentageOfExercised: number;
+    }
+
+    let {
+        adoptPercent,
+        rejectPercent,
+        votingEnded,
+        deadline,
+        minYesPercentageOfTotal,
+        minYesPercentageOfExercised,
+    }: Props = $props();
+
+    const client = getContext<OpenChat>("client");
+
+    let deadlineDate = $derived(new Date(Number(deadline)));
+    let rtl = $derived($rtlStore ? "right" : "left");
+    let rtlOpposite = $derived($rtlStore ? "left" : "right");
+</script>
+
+<Column>
+    <!-- Progress -->
+    <Column overflow="visible">
+        <div class="chevrons">
+            <div class="icon" style="{rtl}: calc({minYesPercentageOfTotal}% - 0.5em)">
+                <ChevronDown viewBox="-1 0 24 24" color={ColourVars.textPrimary} />
+            </div>
+            <div class="icon solid" style="{rtl}: calc({minYesPercentageOfExercised}% - 0.5em)">
+                <svg viewBox="-1 0 24 24">
+                    <path d="M6,10 L12,16 L18,10 H7Z" fill={ColourVars.textPrimary} />
+                </svg>
+            </div>
+        </div>
+        <div class="progress">
+            <div class="adopt" style="width: {adoptPercent}%; {rtl}: 0;"></div>
+            <div class="reject" style="width: {rejectPercent}%; {rtlOpposite}: 0;"></div>
+            <div class="vertical-line" style="{rtl}: {minYesPercentageOfTotal}%"></div>
+            <div class="vertical-line" style="{rtl}: {minYesPercentageOfExercised}%"></div>
+        </div>
+    </Column>
+
+    <!-- Percentages -->
+    <Row width="fill" mainAxisAlignment="spaceBetween">
+        <Column width="hug" padding="sm">
+            <Body width="hug" fontWeight="semi-bold" colour="success">{adoptPercent}%</Body>
+        </Column>
+        <Column width="hug" padding="sm">
+            <Body width="hug" fontWeight="semi-bold" colour="error">{rejectPercent}%</Body>
+        </Column>
+    </Row>
+
+    <!-- Remaining -->
+    <Column padding={["sm", "zero", "zero"]} crossAxisAlignment="center">
+        <Body colour="textSecondary" width="hug">
+            <Translatable
+                resourceKey={i18nKey(
+                    votingEnded ? "proposal.votingPeriodEnded" : "proposal.votingPeriodRemaining",
+                )} />
+        </Body>
+        <Body fontWeight="semi-bold" width="hug">
+            {#if votingEnded}
+                {client.toDateString(deadlineDate)} {client.toShortTimeString(deadlineDate)}
+            {:else}
+                {client.formatTimeRemaining($now500, deadline)}
+            {/if}
+        </Body>
+    </Column>
+</Column>
+
+<style lang="scss">
+    .wrapper {
+        flex: auto;
+        position: relative;
+    }
+
+    .chevrons {
+        width: 100%;
+        height: 1rem;
+        position: relative;
+        overflow: hidden;
+
+        .icon {
+            position: absolute;
+            top: 0;
+            width: 1rem;
+            color: var(--txt);
+            margin-left: 0px;
+
+            &.solid {
+                transform: scale(1.25);
+            }
+        }
+    }
+
+    .progress {
+        width: 100%;
+        height: 0.3rem;
+        position: relative;
+        border-radius: var(--rad-md);
+        background: var(--background-2);
+
+        .adopt,
+        .reject {
+            top: 0;
+            bottom: 0;
+            position: absolute;
+            transition-duration: 1s;
+            border-radius: var(--rad-md);
+        }
+
+        .adopt {
+            background: var(--vote-yes-color);
+        }
+
+        .reject {
+            background: var(--vote-no-color);
+        }
+
+        .vertical-line {
+            position: absolute;
+            top: -0.15rem;
+            bottom: -0.25rem;
+            width: 2px;
+            background-color: var(--txt);
+            border-radius: 2px;
+        }
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/proposals/RemoveBot.svelte b/frontend/app/src/mobile/features/proposals/RemoveBot.svelte
new file mode 100644
index 0000000000..20b9b399b5
--- /dev/null
+++ b/frontend/app/src/mobile/features/proposals/RemoveBot.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+    import { IDL } from "@icp-sdk/core/candid";
+    import { Principal } from "@icp-sdk/core/principal";
+    import { Column } from "component-lib";
+    import {
+        type ExecuteGenericNervousSystemFunction,
+        type ExternalBotLike,
+    } from "@client";
+    import { i18nKey } from "@src/i18n/i18n";
+    import BotExplorer from "@src/mobile/features/bots/BotExplorer.svelte";
+    import Legend from "@src/mobile/shared/Legend.svelte";
+    import SelectedMatch from "./SelectedMatch.svelte";
+
+    interface Props {
+        valid: boolean;
+    }
+
+    let { valid = $bindable() }: Props = $props();
+
+    let selected = $state<ExternalBotLike | undefined>(undefined);
+    let isValid = $derived(selected !== undefined);
+
+    function selectMatch(match: ExternalBotLike | undefined) {
+        selected = match;
+    }
+
+    $effect(() => {
+        if (valid !== isValid) {
+            valid = isValid;
+        }
+    });
+
+    function removeBotPayload(bot: ExternalBotLike): Uint8Array {
+        return new Uint8Array(
+            IDL.encode(
+                [
+                    IDL.Record({
+                        bot_id: IDL.Principal,
+                    }),
+                ],
+                [
+                    {
+                        bot_id: Principal.fromText(bot.id),
+                    },
+                ],
+            ),
+        );
+    }
+
+    export function convertAction(): ExecuteGenericNervousSystemFunction | undefined {
+        if (selected === undefined || !isValid) return undefined;
+
+        return {
+            kind: "execute_generic_nervous_system_function",
+            functionId: BigInt(1014),
+            payload: removeBotPayload(selected),
+        };
+    }
+</script>
+
+<Column>
+    <Legend label={i18nKey("bots.manage.removeSearch")} />
+    {#if selected !== undefined}
+        <SelectedMatch onRemove={() => (selected = undefined)} match={selected}></SelectedMatch>
+    {:else}
+        <BotExplorer maxHeight={"450px"} fill onSelect={selectMatch}></BotExplorer>
+    {/if}
+</Column>
diff --git a/frontend/app/src/components_mobile/home/proposal/SelectedMatch.svelte b/frontend/app/src/mobile/features/proposals/SelectedMatch.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/proposal/SelectedMatch.svelte
rename to frontend/app/src/mobile/features/proposals/SelectedMatch.svelte
diff --git a/frontend/app/src/mobile/features/proposals/TransferSNSFunds.svelte b/frontend/app/src/mobile/features/proposals/TransferSNSFunds.svelte
new file mode 100644
index 0000000000..277fa07f89
--- /dev/null
+++ b/frontend/app/src/mobile/features/proposals/TransferSNSFunds.svelte
@@ -0,0 +1,126 @@
+<script lang="ts">
+    import { Column, Input, Radio } from "component-lib";
+    import {
+        isPrincipalValid,
+        isSubAccountValid,
+        type NervousSystemDetails,
+        type TransferSnsFunds,
+        type Treasury,
+    } from "@client";
+    import { _ } from "svelte-i18n";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import Legend from "@src/mobile/shared/Legend.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    interface Props {
+        nervousSystem: NervousSystemDetails;
+        valid: boolean;
+    }
+
+    let { nervousSystem, valid = $bindable() }: Props = $props();
+
+    let treasury: Treasury = $state("SNS");
+    let busy = $state(false);
+    let recipientOwner = $state("");
+    let recipientSubaccount = $state("");
+    let amountText = $state("");
+    let tokenDetails = $derived(nervousSystem.token);
+    let transferFee = $derived(tokenDetails.transferFee);
+    let amount = $derived(Number(amountText) * Number(Math.pow(10, tokenDetails.decimals)));
+    let amountValid = $derived(amount >= transferFee);
+    let symbol = $derived(tokenDetails.symbol);
+    let recipientOwnerValid = $derived(isPrincipalValid(recipientOwner));
+    let recipientSubaccountValid = $derived(
+        recipientSubaccount.length === 0 || isSubAccountValid(recipientSubaccount),
+    );
+    let token = $derived(treasury === "SNS" ? symbol : "ICP");
+    let isValid = $derived(amountValid && recipientOwnerValid && recipientSubaccountValid);
+
+    $effect(() => {
+        if (valid !== isValid) {
+            valid = isValid;
+        }
+    });
+
+    export function convertAction(): TransferSnsFunds {
+        return {
+            kind: "transfer_sns_funds",
+            recipient: {
+                owner: recipientOwner,
+                subaccount:
+                    recipientSubaccount.length > 0
+                        ? recipientSubaccount.padStart(64, "0")
+                        : undefined,
+            },
+            amount: BigInt(Math.floor(amount)),
+            treasury,
+        };
+    }
+</script>
+
+<Column gap={"xl"}>
+    <Column>
+        <Legend
+            padding={["zero", "zero", "xs", "zero"]}
+            label={i18nKey("proposal.maker.treasury")}
+            required />
+        <Column gap={"sm"}>
+            <Radio
+                id="chat_treasury"
+                group="treasury"
+                value={symbol}
+                disabled={busy}
+                checked={treasury === "SNS"}
+                onChange={() => (treasury = "SNS")}>
+                <Translatable resourceKey={i18nKey(symbol)} />
+            </Radio>
+            <Radio
+                id="icp_treasury"
+                group="treasury"
+                value="ICP"
+                disabled={busy}
+                checked={treasury === "ICP"}
+                onChange={() => (treasury = "ICP")}>
+                <Translatable resourceKey={i18nKey("ICP")} />
+            </Radio>
+        </Column>
+    </Column>
+    <Column>
+        <Legend label={i18nKey("proposal.maker.recipientOwner")} required />
+        <Input
+            disabled={busy}
+            error={recipientOwner.length > 0 && !recipientOwnerValid}
+            maxlength={63}
+            bind:value={recipientOwner}
+            placeholder={interpolate($_, i18nKey("proposal.maker.enterRecipientOwner"))} />
+    </Column>
+    <Column>
+        <Legend
+            label={i18nKey("proposal.maker.recipientSubaccount")}
+            rules={i18nKey("proposal.maker.recipientSubaccountRules")} />
+        <Input
+            disabled={busy}
+            error={!recipientSubaccountValid}
+            maxlength={64}
+            bind:value={recipientSubaccount}
+            placeholder={interpolate($_, i18nKey("proposal.maker.enterRecipientSubaccount"))} />
+    </Column>
+    <Column>
+        <Legend
+            label={i18nKey("proposal.maker.amount")}
+            rules={i18nKey("proposal.maker.amountRules", { token })}
+            required />
+        <Input
+            disabled={busy}
+            error={amountText.length > 0 && !amountValid}
+            minlength={1}
+            maxlength={20}
+            bind:value={amountText}
+            placeholder={interpolate(
+                $_,
+                i18nKey("proposal.maker.enterAmount", {
+                    token,
+                }),
+            )} />
+    </Column>
+</Column>
diff --git a/frontend/app/src/mobile/features/proposals/VerificationProposal.svelte b/frontend/app/src/mobile/features/proposals/VerificationProposal.svelte
new file mode 100644
index 0000000000..c4fb9fe8b6
--- /dev/null
+++ b/frontend/app/src/mobile/features/proposals/VerificationProposal.svelte
@@ -0,0 +1,186 @@
+<script lang="ts">
+    import { IDL } from "@icp-sdk/core/candid";
+    import { Principal } from "@icp-sdk/core/principal";
+    import { Body, Column, Input } from "component-lib";
+    import {
+        type CommunityMatch,
+        type ExecuteGenericNervousSystemFunction,
+        type GroupMatch,
+        type Level,
+    } from "@client";
+    import { _ } from "svelte-i18n";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import CommunityFinder from "./CommunityFinder.svelte";
+    import GroupFinder from "./GroupFinder.svelte";
+
+    const MIN_LENGTH = 3;
+    const MAX_LENGTH = 25;
+    type Operation = "set" | "revoke";
+
+    interface Props {
+        type:
+            | "set_community_verification"
+            | "revoke_community_verification"
+            | "set_group_verification"
+            | "revoke_group_verification";
+        valid: boolean;
+    }
+
+    let { type, valid = $bindable() }: Props = $props();
+
+    let selected = $state<GroupMatch | CommunityMatch | undefined>();
+    let name = $state("");
+    let nameValid = $derived(name.length >= MIN_LENGTH && name.length <= MAX_LENGTH);
+    let level = $derived<Level>(
+        type === "set_community_verification" || type === "revoke_community_verification"
+            ? "community"
+            : "group",
+    );
+    let operation = $derived<Operation>(
+        type === "set_community_verification" || type === "set_group_verification"
+            ? "set"
+            : "revoke",
+    );
+    let isValid = $derived(selected !== undefined && (operation === "revoke" || nameValid));
+
+    function selectMatch(match: GroupMatch | CommunityMatch | undefined) {
+        selected = match;
+        name = match?.name ?? "";
+    }
+
+    $effect(() => {
+        if (valid !== isValid) {
+            valid = isValid;
+        }
+    });
+
+    function setCommunityValidityPayload(communityId: string, name: string): Uint8Array {
+        return new Uint8Array(
+            IDL.encode(
+                [
+                    IDL.Record({
+                        community_id: IDL.Principal,
+                        name: IDL.Text,
+                    }),
+                ],
+                [
+                    {
+                        community_id: Principal.fromText(communityId),
+                        name,
+                    },
+                ],
+            ),
+        );
+    }
+
+    function revokeCommunityValidityPayload(communityId: string): Uint8Array {
+        return new Uint8Array(
+            IDL.encode(
+                [IDL.Record({ community_id: IDL.Principal })],
+                [{ community_id: Principal.fromText(communityId) }],
+            ),
+        );
+    }
+
+    function setGroupValidityPayload(groupId: string, name: string): Uint8Array {
+        return new Uint8Array(
+            IDL.encode(
+                [
+                    IDL.Record({
+                        group_id: IDL.Principal,
+                        name: IDL.Text,
+                    }),
+                ],
+                [
+                    {
+                        group_id: Principal.fromText(groupId),
+                        name,
+                    },
+                ],
+            ),
+        );
+    }
+
+    function revokeGroupValidityPayload(groupId: string): Uint8Array {
+        return new Uint8Array(
+            IDL.encode(
+                [IDL.Record({ group_id: IDL.Principal })],
+                [{ group_id: Principal.fromText(groupId) }],
+            ),
+        );
+    }
+
+    export function convertAction(): ExecuteGenericNervousSystemFunction | undefined {
+        if (selected === undefined || !isValid) return undefined;
+
+        if (type === "set_community_verification" && selected.kind === "community_match") {
+            return {
+                kind: "execute_generic_nervous_system_function",
+                functionId: BigInt(2006),
+                payload: setCommunityValidityPayload(selected.id.communityId, name),
+            };
+        } else if (type === "set_group_verification" && selected.kind === "group_match") {
+            return {
+                kind: "execute_generic_nervous_system_function",
+                functionId: BigInt(2007),
+                payload: setGroupValidityPayload(selected.chatId.groupId, name),
+            };
+        } else if (
+            type === "revoke_community_verification" &&
+            selected.kind === "community_match"
+        ) {
+            return {
+                kind: "execute_generic_nervous_system_function",
+                functionId: BigInt(2008),
+                payload: revokeCommunityValidityPayload(selected.id.communityId),
+            };
+        } else if (type === "revoke_group_verification" && selected.kind === "group_match") {
+            return {
+                kind: "execute_generic_nervous_system_function",
+                functionId: BigInt(2009),
+                payload: revokeGroupValidityPayload(selected.chatId.groupId),
+            };
+        }
+
+        return undefined;
+    }
+</script>
+
+<Column gap={"lg"}>
+    {#if type === "set_community_verification" || type === "revoke_community_verification"}
+        <CommunityFinder onSelect={selectMatch}></CommunityFinder>
+    {/if}
+    {#if type === "set_group_verification" || type === "revoke_group_verification"}
+        <GroupFinder onSelect={selectMatch}></GroupFinder>
+    {/if}
+
+    {#if selected !== undefined && operation === "set"}
+        <Input
+            autofocus
+            disabled={selected === undefined}
+            error={!nameValid}
+            bind:value={name}
+            minlength={MIN_LENGTH}
+            maxlength={MAX_LENGTH}
+            countdown
+            placeholder={interpolate($_, i18nKey("verified.preferredName"))}>
+            {#snippet subtext()}
+                <Translatable resourceKey={i18nKey("verified.preferredName")} />
+            {/snippet}
+        </Input>
+        <Column padding={["zero", "md"]}>
+            <Body colour={"textSecondary"}>
+                <Translatable resourceKey={i18nKey("verified.rename", undefined, level, true)}
+                ></Translatable>
+            </Body>
+        </Column>
+    {/if}
+</Column>
+
+<style lang="scss">
+    .info {
+        color: var(--txt-light);
+        @include font(light, normal, fs-80);
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/upgrade/Feature.svelte b/frontend/app/src/mobile/features/upgrade/Feature.svelte
new file mode 100644
index 0000000000..eb0260126d
--- /dev/null
+++ b/frontend/app/src/mobile/features/upgrade/Feature.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+    import type { ResourceKey } from "@client";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    import { BodySmall, Caption, ColourVars, Container } from "component-lib";
+    import type { Snippet } from "svelte";
+    import MoreInfo from "./InfoIcon.svelte";
+
+    interface Props {
+        comingSoon?: boolean;
+        freeInfo?: ResourceKey | undefined;
+        diamondInfo?: ResourceKey | undefined;
+        title?: Snippet;
+        free?: Snippet<[string]>;
+        diamond?: Snippet<[string]>;
+        Icon?: any;
+        last?: boolean;
+    }
+
+    let {
+        comingSoon = false,
+        freeInfo = undefined,
+        diamondInfo = undefined,
+        title,
+        free,
+        diamond,
+        Icon,
+        last = false,
+    }: Props = $props();
+</script>
+
+<Container height={{ size: "2.5rem" }} supplementalClass={"diamond_feature"}>
+    <Container
+        crossAxisAlignment={"center"}
+        gap={"sm"}
+        padding={["sm", "zero", "sm", "zero"]}
+        mainAxisAlignment={"center"}
+        width={{ share: 1 }}>
+        {#if Icon}
+            <Icon color={ColourVars.textSecondary} />
+        {/if}
+        <BodySmall ellipsisTruncate>
+            {@render title?.()}
+            {#if comingSoon}
+                <span class="soon"
+                    >(<Translatable resourceKey={i18nKey("upgrade.comingSoon")} />)</span>
+            {/if}
+        </BodySmall>
+    </Container>
+    <Container
+        padding={["sm", "zero", "sm", "zero"]}
+        crossAxisAlignment={"center"}
+        mainAxisAlignment={"center"}
+        height={"fill"}
+        width={{ share: 1 }}>
+        <Caption width={"hug"} align={"center"} colour={"textSecondary"}>
+            {@render free?.(ColourVars.textSecondary)}
+        </Caption>
+        {#if freeInfo !== undefined}
+            <MoreInfo color={ColourVars.textSecondary}
+                ><Translatable resourceKey={freeInfo} /></MoreInfo>
+        {/if}
+    </Container>
+    <Container
+        borderRadius={last ? ["zero", "zero", "md", "md"] : undefined}
+        padding={["sm", "zero", "sm", "zero"]}
+        mainAxisAlignment={"center"}
+        crossAxisAlignment={"center"}
+        height={"fill"}
+        background={ColourVars.background2}
+        width={{ share: 1 }}>
+        <Caption colour={"primary"} width={"hug"} align={"center"}>
+            {@render diamond?.(ColourVars.primary)}
+        </Caption>
+        {#if diamondInfo !== undefined}
+            <MoreInfo color={ColourVars.primary}
+                ><Translatable resourceKey={diamondInfo} /></MoreInfo>
+        {/if}
+    </Container>
+</Container>
diff --git a/frontend/app/src/mobile/features/upgrade/Features.svelte b/frontend/app/src/mobile/features/upgrade/Features.svelte
new file mode 100644
index 0000000000..a2ada4e1ac
--- /dev/null
+++ b/frontend/app/src/mobile/features/upgrade/Features.svelte
@@ -0,0 +1,259 @@
+<script lang="ts">
+    import { Body, ColourVars, Container } from "component-lib";
+    import Gifs from "svelte-material-icons/AccountBoxOutline.svelte";
+    import CreateCommunities from "svelte-material-icons/AccountGroupOutline.svelte";
+    import Groups from "svelte-material-icons/AccountMultiple.svelte";
+    import Notifications from "svelte-material-icons/BellOutline.svelte";
+    import Bitcoin from "svelte-material-icons/Bitcoin.svelte";
+    import Polls from "svelte-material-icons/ChartBoxOutline.svelte";
+    import DirectChats from "svelte-material-icons/ChatOutline.svelte";
+    import Check from "svelte-material-icons/CheckBold.svelte";
+    import Reminders from "svelte-material-icons/ClockPlusOutline.svelte";
+    import Storage from "svelte-material-icons/ContentSaveOutline.svelte";
+    import Diamond from "svelte-material-icons/DiamondOutline.svelte";
+    import MediaMessage from "svelte-material-icons/ImageMultipleOutline.svelte";
+    import TextMessage from "svelte-material-icons/MessageTextOutline.svelte";
+    import Airdrops from "svelte-material-icons/PartyPopper.svelte";
+    import Gated from "svelte-material-icons/ShieldLockOutline.svelte";
+    import Swap from "svelte-material-icons/SwapVerticalVariant.svelte";
+    import Reactions from "svelte-material-icons/ThumbUpOutline.svelte";
+    import Translate from "svelte-material-icons/Translate.svelte";
+    import Video from "svelte-material-icons/VideoOutline.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import Feature from "./Feature.svelte";
+
+    let iconSize = "1rem";
+</script>
+
+<Container padding={["xl", "md", "zero", "md"]}>
+    <Container height={"fill"} padding={"md"} mainAxisAlignment={"center"} width={{ share: 1 }}>
+        <span></span>
+    </Container>
+    <Container height={"fill"} padding={"md"} mainAxisAlignment={"center"} width={{ share: 1 }}>
+        <Body fontWeight={"bold"} width={"hug"}>
+            <Translatable resourceKey={i18nKey("upgrade.free")} />
+        </Body>
+    </Container>
+    <Container
+        height={"fill"}
+        padding={"md"}
+        background={ColourVars.background2}
+        borderRadius={["md", "md", "zero", "zero"]}
+        mainAxisAlignment={"center"}
+        width={{ share: 1 }}>
+        <Diamond size={"1.5rem"} color={ColourVars.primary} />
+    </Container>
+</Container>
+
+<Container direction={"vertical"} padding={["zero", "md"]}>
+    <Feature Icon={TextMessage}>
+        {#snippet title()}
+            <Translatable resourceKey={i18nKey("upgrade.textMessages")} />
+        {/snippet}
+        {#snippet free(color)}
+            <Check size={iconSize} {color} />
+        {/snippet}
+        {#snippet diamond(color)}
+            <Check size={iconSize} {color} />
+        {/snippet}
+    </Feature>
+
+    <Feature Icon={Gifs}>
+        {#snippet title()}
+            <Translatable resourceKey={i18nKey("upgrade.giphys")} />
+        {/snippet}
+        {#snippet free(color)}
+            <Check size={iconSize} {color} />
+        {/snippet}
+        {#snippet diamond(color)}
+            <Check size={iconSize} {color} />
+        {/snippet}
+    </Feature>
+
+    <Feature Icon={Reactions}>
+        {#snippet title()}
+            <Translatable resourceKey={i18nKey("upgrade.reactions")} />
+        {/snippet}
+        {#snippet free(color)}
+            <Check size={iconSize} {color} />
+        {/snippet}
+        {#snippet diamond(color)}
+            <Check size={iconSize} {color} />
+        {/snippet}
+    </Feature>
+
+    <Feature Icon={Polls}>
+        {#snippet title()}
+            <Translatable resourceKey={i18nKey("upgrade.polls")} />
+        {/snippet}
+        {#snippet free(color)}
+            <Check size={iconSize} {color} />
+        {/snippet}
+        {#snippet diamond(color)}
+            <Check size={iconSize} {color} />
+        {/snippet}
+    </Feature>
+
+    <Feature Icon={Reminders}>
+        {#snippet title()}
+            <Translatable resourceKey={i18nKey("upgrade.reminders")} />
+        {/snippet}
+        {#snippet free(color)}
+            <Check size={iconSize} {color} />
+        {/snippet}
+        {#snippet diamond(color)}
+            <Check size={iconSize} {color} />
+        {/snippet}
+    </Feature>
+
+    <Feature Icon={Bitcoin}>
+        {#snippet title()}
+            <Translatable resourceKey={i18nKey("upgrade.crypto")} />
+        {/snippet}
+        {#snippet free(color)}
+            <Check size={iconSize} {color} />
+        {/snippet}
+        {#snippet diamond(color)}
+            <Check size={iconSize} {color} />
+        {/snippet}
+    </Feature>
+
+    <Feature Icon={Video}>
+        {#snippet title()}
+            <Translatable resourceKey={i18nKey("upgrade.videoCalls")} />
+        {/snippet}
+        {#snippet diamond(color)}
+            <Check size={iconSize} {color} />
+        {/snippet}
+    </Feature>
+
+    <Feature Icon={Notifications}>
+        {#snippet title()}
+            <Translatable resourceKey={i18nKey("upgrade.notifications")} />
+        {/snippet}
+        {#snippet free()}
+            <Translatable resourceKey={i18nKey("Mobile & Desktop")} />
+        {/snippet}
+        {#snippet diamond()}
+            <Translatable resourceKey={i18nKey("Mobile & Desktop")} />
+        {/snippet}
+    </Feature>
+
+    <Feature
+        Icon={MediaMessage}
+        diamondInfo={i18nKey("upgrade.mediaLimits", { image: "5mb", video: "50mb" })}
+        freeInfo={i18nKey("upgrade.mediaLimits", { image: "1mb", video: "5mb" })}>
+        {#snippet title()}
+            <Translatable resourceKey={i18nKey("upgrade.mediaMessages")} />
+        {/snippet}
+        {#snippet free()}
+            <Translatable resourceKey={i18nKey("upgrade.freeMediaMessages")} />
+        {/snippet}
+        {#snippet diamond()}
+            <Translatable resourceKey={i18nKey("upgrade.diamondMediaMessages")} />
+        {/snippet}
+    </Feature>
+
+    <Feature
+        Icon={Storage}
+        diamondInfo={i18nKey("upgrade.diamondStorageLimit")}
+        freeInfo={i18nKey("upgrade.freeStorageLimit")}>
+        {#snippet title()}
+            <Translatable resourceKey={i18nKey("upgrade.storage")} />
+        {/snippet}
+        {#snippet free()}
+            <Translatable resourceKey={i18nKey("upgrade.freeStorage")} />
+        {/snippet}
+        {#snippet diamond()}
+            <Translatable resourceKey={i18nKey("upgrade.diamondStorage")} />
+        {/snippet}
+    </Feature>
+
+    <Feature Icon={CreateCommunities}>
+        {#snippet title()}
+            <Translatable resourceKey={i18nKey("upgrade.createCommunities")} />
+        {/snippet}
+        {#snippet diamond(color)}
+            <Check size={iconSize} {color} />
+        {/snippet}
+    </Feature>
+
+    <Feature Icon={DirectChats}>
+        {#snippet title()}
+            <Translatable resourceKey={i18nKey("upgrade.directChats")} />
+        {/snippet}
+        {#snippet free(color)}
+            <Check size={iconSize} {color} />
+        {/snippet}
+        {#snippet diamond(color)}
+            <Check size={iconSize} {color} />
+        {/snippet}
+    </Feature>
+
+    <Feature Icon={Groups}>
+        {#snippet title()}
+            <Translatable resourceKey={i18nKey("upgrade.privateGroups")} />
+        {/snippet}
+        {#snippet free()}
+            <Translatable resourceKey={i18nKey("upgrade.freePrivateGroups")} />
+        {/snippet}
+        {#snippet diamond()}
+            <Translatable resourceKey={i18nKey("upgrade.diamondPrivateGroups")} />
+        {/snippet}
+    </Feature>
+
+    <Feature Icon={Groups}>
+        {#snippet title()}
+            <Translatable resourceKey={i18nKey("upgrade.publicGroups")} />
+        {/snippet}
+        {#snippet diamond()}
+            <Translatable resourceKey={i18nKey("upgrade.diamondPublicGroups")} />
+        {/snippet}
+    </Feature>
+
+    <Feature Icon={Gated}>
+        {#snippet title()}
+            <Translatable resourceKey={i18nKey("upgrade.gatedGroups")} />
+        {/snippet}
+        {#snippet diamond(color)}
+            <Check size={iconSize} {color} />
+        {/snippet}
+    </Feature>
+
+    <Feature Icon={Translate}>
+        {#snippet title()}
+            <Translatable resourceKey={i18nKey("upgrade.translations")} />
+        {/snippet}
+        {#snippet diamond(color)}
+            <Check size={iconSize} {color} />
+        {/snippet}
+    </Feature>
+
+    <Feature Icon={Swap}>
+        {#snippet title()}
+            <Translatable resourceKey={i18nKey("upgrade.p2pSwap")} />
+        {/snippet}
+        {#snippet diamond(color)}
+            <Check size={iconSize} {color} />
+        {/snippet}
+    </Feature>
+
+    <Feature Icon={Diamond}>
+        {#snippet title()}
+            <Translatable resourceKey={i18nKey("upgrade.diamondBadge")} />
+        {/snippet}
+        {#snippet diamond(color)}
+            <Check size={iconSize} {color} />
+        {/snippet}
+    </Feature>
+
+    <Feature Icon={Airdrops} last diamondInfo={i18nKey("upgrade.airdropsInfo")}>
+        {#snippet title()}
+            <Translatable resourceKey={i18nKey("upgrade.airdrops")} />
+        {/snippet}
+        {#snippet diamond()}
+            <Translatable resourceKey={i18nKey("upgrade.eligible")} />
+        {/snippet}
+    </Feature>
+</Container>
diff --git a/frontend/app/src/components_mobile/InfoIcon.svelte b/frontend/app/src/mobile/features/upgrade/InfoIcon.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/InfoIcon.svelte
rename to frontend/app/src/mobile/features/upgrade/InfoIcon.svelte
diff --git a/frontend/app/src/mobile/features/upgrade/Payment.svelte b/frontend/app/src/mobile/features/upgrade/Payment.svelte
new file mode 100644
index 0000000000..209f759b95
--- /dev/null
+++ b/frontend/app/src/mobile/features/upgrade/Payment.svelte
@@ -0,0 +1,500 @@
+<script lang="ts">
+    import MulticolourText from "@src/mobile/shared/MulticolourText.svelte";
+    import { now500 } from "@src/stores/time";
+    import {
+        Body,
+        BodySmall,
+        Button,
+        ColourVars,
+        Column,
+        CommonButton,
+        defaultBackgroundGradient,
+        Row,
+        Sheet,
+        StatusCard,
+        Switch,
+        transition,
+        type ColourVarKeys,
+        type Padding,
+        type SizeMode,
+    } from "component-lib";
+    import {
+        diamondStatusStore,
+        E8S_PER_TOKEN,
+        enhancedCryptoLookup,
+        LEDGER_CANISTER_CHAT,
+        LEDGER_CANISTER_ICP,
+        type DiamondMembershipDuration,
+        type DiamondMembershipFees,
+        type Level,
+        type OpenChat,
+        type ResourceKey,
+    } from "@client";
+    import { getContext, onMount } from "svelte";
+    import { _, locale } from "svelte-i18n";
+    import Warning from "svelte-material-icons/AlertRhombusOutline.svelte";
+    import Right from "svelte-material-icons/ChevronRight.svelte";
+    import Diamond from "svelte-material-icons/DiamondOutline.svelte";
+    import Lifetime from "svelte-material-icons/DiamondStone.svelte";
+    import QrCode from "svelte-material-icons/Qrcode.svelte";
+    import Refresh from "svelte-material-icons/Refresh.svelte";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import type { RemoteData } from "@src/utils/remoteData";
+    import Setting from "@src/mobile/shared/Setting.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import AccountInfo from "@src/mobile/shared/AccountInfo.svelte";
+    import CryptoSelector from "@src/mobile/shared/CryptoSelector.svelte";
+    import { TokenState } from "@src/mobile/features/wallet/walletState.svelte";
+    import SelectMembershipHeader from "./SelectMembershipHeader.svelte";
+
+    type Step = "choose" | "confirm";
+
+    interface Props {
+        lifetime?: boolean;
+        onSuccess?: (proof: string) => void;
+        padding?: Padding;
+        height?: SizeMode;
+        joining?: Level;
+        onCancel?: () => void;
+    }
+
+    let {
+        lifetime = false,
+        onSuccess,
+        padding = ["xxl", "xl"],
+        onCancel,
+        height = { size: "100%" },
+    }: Props = $props();
+
+    let confirming = $state(false);
+
+    type FeeKey = keyof Omit<DiamondMembershipFees, "token">;
+    type FeeData = RemoteData<Record<"ICP" | "CHAT", DiamondMembershipFees>, string>;
+
+    const client = getContext<OpenChat>("client");
+
+    const options: Option[] = [
+        {
+            index: 0,
+            duration: i18nKey("upgrade.oneMonth"),
+            fee: "oneMonth",
+            enabled: !lifetime,
+        },
+        {
+            index: 1,
+            duration: i18nKey("upgrade.threeMonths"),
+            fee: "threeMonths",
+            enabled: !lifetime,
+        },
+        {
+            index: 2,
+            duration: i18nKey("upgrade.oneYear"),
+            fee: "oneYear",
+            enabled: !lifetime,
+        },
+        {
+            index: 3,
+            duration: i18nKey("upgrade.lifetime"),
+            fee: "lifetime",
+            enabled: true,
+        },
+    ];
+
+    let enabledOptions = $derived(options.filter((o) => o.enabled));
+    // svelte-ignore state_referenced_locally
+    let step = $state<Step>(enabledOptions.length === 1 ? "confirm" : "choose");
+
+    let autoRenew = $state(true);
+    let selectedOption: Option | undefined = $state(options[lifetime ? 3 : 0]);
+    let topup = $state(false);
+
+    let ledger: string = $state(
+        import.meta.env.OC_NODE_ENV === "production" ? LEDGER_CANISTER_CHAT : LEDGER_CANISTER_ICP,
+    );
+
+    type Option = {
+        index: number;
+        duration: ResourceKey;
+        fee: FeeKey;
+        enabled: boolean;
+    };
+
+    let diamondFees: FeeData = $state({
+        kind: "idle",
+    });
+
+    const indexToDuration: Record<number, DiamondMembershipDuration> = {
+        0: "one_month",
+        1: "three_months",
+        2: "one_year",
+        3: "lifetime",
+    };
+
+    function amount(e8s: bigint): number {
+        return Number(e8s) / E8S_PER_TOKEN;
+    }
+
+    function amountInE8s(symbol: string, fees: FeeData, option: Option | undefined): bigint {
+        if (fees.kind !== "success" || option === undefined) {
+            return 0n;
+        }
+        return fees.data[symbol as "ICP" | "CHAT"][option.fee] ?? 0n;
+    }
+
+    function confirm() {
+        confirming = true;
+        client
+            .payForDiamondMembership(
+                tokenDetails.ledger,
+                selectedDuration,
+                autoRenew && selectedDuration !== "lifetime",
+                toPayE8s,
+            )
+            .then((resp) => {
+                if (resp.kind === "success") {
+                    tokenState.refreshBalance(client);
+                    onSuccess?.(resp.proof);
+                } else {
+                    const errorKey = "upgrade.paymentFailed";
+                    toastStore.showFailureToast(i18nKey(errorKey));
+                }
+            })
+            .finally(() => (confirming = false));
+    }
+
+    onMount(() => {
+        diamondFees = { kind: "loading" };
+        client
+            .diamondMembershipFees()
+            .then((fees) => {
+                diamondFees = {
+                    kind: "success",
+                    data: client.toRecord(fees, (f) => f.token),
+                };
+            })
+            .catch((err) => {
+                diamondFees = { kind: "error", error: err };
+            });
+    });
+    let tokenDetails = $derived($enhancedCryptoLookup.get(ledger)!);
+    let tokenState = $derived(new TokenState(tokenDetails, "usd"));
+    let toPayE8s = $derived(amountInE8s(tokenDetails.symbol, diamondFees, selectedOption));
+    let toPay = $derived(amount(toPayE8s));
+    let insufficientFundsForSelectedSub = $derived(insufficientFundsForSub(selectedOption.index)); //we need to account for the fact that js cannot do maths
+    let insufficientFundsForAnySub = $derived(insufficientFundsForSub(0));
+    let insufficientFundsForAllSubs = $derived(insufficientFundsForSub(3));
+
+    let selectedDuration = $derived(indexToDuration[selectedOption?.index ?? 0] ?? "one_month");
+    let headerProps = $derived(
+        step === "choose" ? undefined : { key: i18nKey(selectedDuration), kind: selectedDuration },
+    );
+
+    function insufficientFundsForSub(index: number): boolean {
+        const toPayE8s = amountInE8s(tokenDetails.symbol, diamondFees, options[index]);
+        return toPayE8s - tokenState.remainingBalance > 0.0001;
+    }
+
+    let expiry = $derived.by(() => {
+        if ($diamondStatusStore.kind !== "active") return undefined;
+        const expiresIn = client.diamondExpiresIn($now500, $locale);
+        const expiresAtMs = Number($diamondStatusStore.expiresAt);
+        const expiresAt = client.toDateString(new Date(expiresAtMs));
+        return { expiresIn, expiresAt, expiresAtMs };
+    });
+
+    function getExtendTo({ index }: Option) {
+        if (expiry === undefined) return undefined;
+        const duration = indexToDuration[index] ?? 0;
+        if (duration === "lifetime") return `Upgrade to lifetime`;
+        const extendByMs = client.diamondDurationToMs(duration);
+        return `Extend to ${client.toDateString(new Date(expiry.expiresAtMs + extendByMs))}`;
+    }
+</script>
+
+{#snippet membershipTier(option: Option)}
+    {@const lifetime = option.index === 3}
+    {@const extendTo = getExtendTo(option)}
+    {@const insufficient = insufficientFundsForSub(option.index)}
+    {@const bg = lifetime
+        ? insufficient
+            ? ColourVars.disabledButton
+            : defaultBackgroundGradient
+        : undefined}
+    {@const txt: ColourVarKeys = lifetime ? "textOnPrimary" : (insufficient ? "disabledButton" : "textPrimary")}
+    {@const extendTxt: ColourVarKeys = lifetime ? "textOnPrimary" :(insufficient ? "disabledButton" : "textSecondary")}
+    {@const icon = lifetime
+        ? ColourVars.textOnPrimary
+        : insufficient
+          ? ColourVars.disabledButton
+          : ColourVars.textPrimary}
+    <Row
+        onClick={() => {
+            if (option.enabled) {
+                selectedOption = option;
+                if (!insufficient) {
+                    transition(["slide_left"], () => {
+                        step = "confirm";
+                    });
+                }
+            }
+        }}
+        mainAxisAlignment={"spaceBetween"}
+        crossAxisAlignment={"center"}
+        background={bg}
+        borderRadius={"md"}
+        borderWidth={lifetime ? "zero" : "thick"}
+        borderColour={insufficient ? ColourVars.disabledButton : ColourVars.primary}
+        padding={["md", "lg"]}>
+        <Column>
+            <Body fontWeight={"bold"} colour={txt} width={"hug"}>
+                <Translatable resourceKey={option.duration} />
+            </Body>
+            {#if extendTo}
+                <BodySmall fontWeight={"light"} colour={extendTxt} width={"hug"}>
+                    {extendTo}
+                </BodySmall>
+            {/if}
+        </Column>
+        <Row width={"hug"} gap={"sm"}>
+            <Body fontWeight={"bold"} colour={txt} width={"hug"}>
+                {`${amount(amountInE8s(tokenDetails.symbol, diamondFees, option))} ${
+                    tokenDetails.symbol
+                }`}
+            </Body>
+            <Right size={"1.5rem"} color={icon} />
+        </Row>
+    </Row>
+{/snippet}
+
+{#snippet selectMembershipTier()}
+    <Column gap={"sm"}>
+        <BodySmall colour={"textSecondary"}>
+            {#if expiry !== undefined}
+                <Translatable
+                    resourceKey={i18nKey("upgrade.expiryMessage", {
+                        relative: expiry.expiresIn,
+                    })} />
+            {:else}
+                <Translatable resourceKey={i18nKey("Select a membership duration")} />
+            {/if}
+        </BodySmall>
+        {#each enabledOptions as option}
+            {@render membershipTier(option)}
+        {/each}
+    </Column>
+{/snippet}
+
+<Column {height} gap={"lg"} {padding}>
+    <Column gap={"xl"}>
+        <SelectMembershipHeader extend={expiry !== undefined} duration={headerProps} />
+
+        {#if step === "confirm"}
+            {#if selectedDuration !== "lifetime"}
+                <Setting
+                    toggle={() => (autoRenew = !autoRenew)}
+                    info={"If you choose not to auto-renew, or payment cannot be taken, your account will revert to free plan. Otherwise, you will be reminded about renewal by @OpenChatBot, please make sure you have sufficient funds in your wallet."}>
+                    <Switch width={"fill"} reverse checked={autoRenew}>
+                        <Translatable resourceKey={i18nKey("upgrade.autorenew")} />
+                    </Switch>
+                </Setting>
+
+                <StatusCard
+                    background={ColourVars.background2}
+                    mode={"warning"}
+                    title={interpolate($_, i18nKey("Posted files and media"))}
+                    body={interpolate(
+                        $_,
+                        i18nKey(
+                            "If you decide not to renew your membership, files and media that you have posted may be lost.",
+                        ),
+                    )}>
+                </StatusCard>
+            {:else}
+                <Body colour={"textSecondary"}>
+                    <Translatable
+                        resourceKey={i18nKey(
+                            "Lifetime membership is our top-tier membership level that grants you access to all our features, now and in the future.",
+                        )} />
+                </Body>
+            {/if}
+
+            {#if insufficientFundsForAnySub}
+                {@render insufficientWarning()}
+            {/if}
+            {@render cryptoSelector()}
+
+            <Column
+                borderRadius={"lg"}
+                gap={"lg"}
+                padding={"lg"}
+                background={ColourVars.background2}>
+                <Row mainAxisAlignment={"spaceBetween"}>
+                    <BodySmall colour={"textSecondary"}>
+                        <Translatable resourceKey={i18nKey("Payment amount")} />
+                    </BodySmall>
+                    <Body width={"hug"} colour={"primary"} fontWeight={"bold"}>
+                        {toPay}
+                        {tokenState.symbol}
+                    </Body>
+                </Row>
+                <Row mainAxisAlignment={"spaceBetween"}>
+                    <BodySmall colour={"textSecondary"}>
+                        <Translatable resourceKey={i18nKey("OC treasury receives (100%)")} />
+                    </BodySmall>
+                    <Body width={"hug"} colour={"textPrimary"} fontWeight={"bold"}>
+                        {toPay}
+                        {tokenState.symbol}
+                    </Body>
+                </Row>
+            </Column>
+
+            <Button
+                onClick={confirm}
+                disabled={confirming || insufficientFundsForSelectedSub}
+                loading={confirming}>
+                {#snippet icon(color)}
+                    {#if selectedDuration === "lifetime"}
+                        <Lifetime {color} />
+                    {:else}
+                        <Diamond {color} />
+                    {/if}
+                {/snippet}
+                <Translatable resourceKey={i18nKey(`Confirm payment`)} />
+            </Button>
+
+            {#if step === "confirm"}
+                {#if insufficientFundsForSelectedSub}
+                    {@render refreshBalance()}
+                {:else}
+                    <CommonButton
+                        width={"fill"}
+                        size={"small_text"}
+                        onClick={() => {
+                            if (enabledOptions.length === 1) {
+                                onCancel?.();
+                            } else {
+                                transition(["fade"], () => {
+                                    step = "choose";
+                                });
+                            }
+                        }}>
+                        <Translatable resourceKey={i18nKey("back")} />
+                    </CommonButton>
+                {/if}
+            {/if}
+        {:else}
+            {#if insufficientFundsForAnySub}
+                {@render insufficientWarning()}
+            {/if}
+
+            {#if expiry !== undefined}
+                <Body colour={"textSecondary"}>
+                    <MulticolourText
+                        parts={[
+                            {
+                                text: i18nKey("Your current membership is due to expire in "),
+                                colour: "textSecondary",
+                            },
+                            {
+                                text: i18nKey(expiry.expiresIn!),
+                                colour: "primary",
+                            },
+                            {
+                                text: i18nKey(" on "),
+                                colour: "textSecondary",
+                            },
+                            {
+                                text: i18nKey(expiry.expiresAt),
+                                colour: "primary",
+                            },
+                            {
+                                text: i18nKey(
+                                    ". Any extended membership would start from that date.",
+                                ),
+                                colour: "textSecondary",
+                            },
+                        ]} />
+                </Body>
+            {/if}
+
+            {@render cryptoSelector()}
+            {@render selectMembershipTier()}
+            {#if insufficientFundsForAllSubs}
+                {@render refreshBalance()}
+            {/if}
+        {/if}
+    </Column>
+</Column>
+
+{#snippet refreshBalance()}
+    <CommonButton
+        width={"fill"}
+        mode={"active"}
+        size={"small_text"}
+        onClick={() => tokenState.refreshBalance(client)}>
+        {#snippet icon(color, size)}
+            <Refresh {color} {size} />
+        {/snippet}
+
+        <Translatable resourceKey={i18nKey(`Refresh ${tokenState.symbol} balance`)} />
+    </CommonButton>
+{/snippet}
+
+{#snippet insufficientWarning()}
+    <Row crossAxisAlignment={"center"} gap={"md"}>
+        <Warning size={"1.5rem"} color={ColourVars.warning} />
+        <BodySmall fontWeight={"bold"} colour={"warning"}>
+            <Translatable
+                resourceKey={i18nKey(
+                    `Insufficient funds! Top up your ${
+                        tokenState.symbol
+                    } account with at least ${`${toPay} ${tokenState.symbol}`} or choose a different token as payment.`,
+                )} />
+        </BodySmall>
+    </Row>
+{/snippet}
+
+{#snippet cryptoSelector()}
+    <Column gap={"sm"}>
+        <BodySmall colour={"textSecondary"}>
+            <Translatable resourceKey={i18nKey("Select token to pay with")} />
+        </BodySmall>
+
+        <Row gap={"sm"}>
+            <CryptoSelector
+                bind:ledger
+                filter={(t) => ["chat", "icp"].includes(t.symbol.toLowerCase())} />
+
+            {#if insufficientFundsForAllSubs}
+                <Column
+                    onClick={() => (topup = true)}
+                    mainAxisAlignment={"center"}
+                    crossAxisAlignment={"center"}
+                    width={{ size: "3.5rem" }}
+                    height={"fill"}
+                    borderRadius={"lg"}
+                    background={ColourVars.background2}
+                    padding={["sm", "md"]}>
+                    <QrCode size={"2rem"} color={ColourVars.textSecondary} />
+                </Column>
+            {/if}
+        </Row>
+    </Column>
+{/snippet}
+
+{#if topup}
+    <Sheet
+        onDismiss={() => {
+            tokenState.refreshBalance(client);
+            topup = false;
+        }}>
+        <Column gap={"xs"} padding={"xl"}>
+            <AccountInfo
+                background={ColourVars.background2}
+                padding={"zero"}
+                ledger={tokenState.ledger} />
+            {@render refreshBalance()}
+        </Column>
+    </Sheet>
+{/if}
diff --git a/frontend/app/src/components_mobile/home/upgrade/SelectMembershipHeader.svelte b/frontend/app/src/mobile/features/upgrade/SelectMembershipHeader.svelte
similarity index 95%
rename from frontend/app/src/components_mobile/home/upgrade/SelectMembershipHeader.svelte
rename to frontend/app/src/mobile/features/upgrade/SelectMembershipHeader.svelte
index cc813d124d..c251a2f093 100644
--- a/frontend/app/src/components_mobile/home/upgrade/SelectMembershipHeader.svelte
+++ b/frontend/app/src/mobile/features/upgrade/SelectMembershipHeader.svelte
@@ -4,7 +4,7 @@
     import type { DiamondMembershipDuration, ResourceKey } from "@client";
     import Diamond from "svelte-material-icons/DiamondOutline.svelte";
     import Lifetime from "svelte-material-icons/DiamondStone.svelte";
-    import MulticolourText, { type TextPart } from "../..//MulticolourText.svelte";
+    import MulticolourText, { type TextPart } from "@src/mobile/shared/MulticolourText.svelte";
 
     type Duration = {
         key: ResourceKey;
diff --git a/frontend/app/src/mobile/features/upgrade/Upgrade.svelte b/frontend/app/src/mobile/features/upgrade/Upgrade.svelte
new file mode 100644
index 0000000000..43db4adf79
--- /dev/null
+++ b/frontend/app/src/mobile/features/upgrade/Upgrade.svelte
@@ -0,0 +1,139 @@
+<script lang="ts">
+    import { disableDiamondPaymentFeature } from "@src/utils/features";
+    import {
+        Body,
+        Button,
+        ColourVars,
+        Column,
+        CommonButton,
+        Container,
+        H2,
+        Row,
+        Sheet,
+        type SwipeDirection,
+    } from "component-lib";
+    import { canExtendDiamondStore, isDiamondStore, publish } from "@client";
+    import { onMount } from "svelte";
+    import Diamond from "svelte-material-icons/DiamondOutline.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import MulticolourText from "@src/mobile/shared/MulticolourText.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import Features from "./Features.svelte";
+    import Payment from "./Payment.svelte";
+
+    let showPayment = $state(false);
+
+    onMount(() => {
+        if ($canExtendDiamondStore && !disableDiamondPaymentFeature) {
+            showPayment = true;
+        }
+    });
+
+    function onCancel() {
+        publish("closeModalPage");
+    }
+
+    let onSwipe = $derived((dir: SwipeDirection) => {
+        if (dir === "right") {
+            onCancel();
+        }
+    });
+</script>
+
+<Container {onSwipe} background={ColourVars.background0} height={"fill"} direction={"vertical"}>
+    <Container direction={"vertical"} closeMenuOnScroll height={"fill"}>
+        <Column gap={"xl"} padding={["xxl", "xxl", "xxxl", "xxl"]} supplementalClass={"starfield"}>
+            <Column width={{ size: "80%" }} gap={"sm"}>
+                <Diamond color={ColourVars.primary} size={"4.5rem"} />
+                <H2 fontWeight={"bold"}>
+                    <MulticolourText
+                        parts={[
+                            {
+                                text: i18nKey("Explore "),
+                                colour: "textPrimary",
+                            },
+                            {
+                                text: i18nKey("OpenChat Diamond"),
+                                colour: "primary",
+                            },
+                            {
+                                text: i18nKey(" Membership"),
+                                colour: "textPrimary",
+                            },
+                        ]} />
+                </H2>
+            </Column>
+            <Body>
+                <MulticolourText
+                    parts={[
+                        {
+                            text: i18nKey("Diamond gives you "),
+                            colour: "textPrimary",
+                        },
+                        {
+                            text: i18nKey("enhanced features "),
+                            colour: "primary",
+                        },
+                        {
+                            text: i18nKey(" and valuable "),
+                            colour: "textPrimary",
+                        },
+                        {
+                            text: i18nKey("extra perks, "),
+                            colour: "primary",
+                        },
+                        {
+                            text: i18nKey(
+                                "offering a smoother, more powerful chat experience than the standard tier.",
+                            ),
+                            colour: "textPrimary",
+                        },
+                    ]} />
+            </Body>
+        </Column>
+        <Row
+            height={{ size: "4px" }}
+            background={"linear-gradient(90deg, var(--primary), var(--secondary))"}>
+            <span></span>
+        </Row>
+        <Features />
+        <div class="fade"></div>
+    </Container>
+    <Column gap={"lg"} crossAxisAlignment={"center"} padding={["lg", "xl"]}>
+        {#if !$isDiamondStore && !disableDiamondPaymentFeature}
+            <Button onClick={() => (showPayment = true)}>
+                {#snippet icon(color)}
+                    <Diamond {color} />
+                {/snippet}
+
+                <Translatable resourceKey={i18nKey("upgrade.button")} /></Button>
+        {:else if $canExtendDiamondStore && !disableDiamondPaymentFeature}
+            <Button onClick={() => (showPayment = true)}>
+                {#snippet icon(color)}
+                    <Diamond {color} />
+                {/snippet}
+                <Translatable resourceKey={i18nKey("upgrade.extendShort")} /></Button>
+        {/if}
+        <CommonButton onClick={onCancel} size={"small_text"} mode={"active"}>
+            <Translatable resourceKey={i18nKey("Go back")} />
+        </CommonButton>
+    </Column>
+</Container>
+
+{#if showPayment}
+    <Sheet onDismiss={() => (showPayment = false)}>
+        <Payment onSuccess={() => publish("closeModalStack")} />
+    </Sheet>
+{/if}
+
+<style lang="scss">
+    .fade {
+        position: sticky;
+        bottom: 0;
+        inset: auto 0 0 0;
+        flex: 0 0 3rem;
+        width: 100%;
+        pointer-events: none;
+        background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--background-1));
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/wallet/AccountSelector.svelte b/frontend/app/src/mobile/features/wallet/AccountSelector.svelte
new file mode 100644
index 0000000000..874157bff0
--- /dev/null
+++ b/frontend/app/src/mobile/features/wallet/AccountSelector.svelte
@@ -0,0 +1,98 @@
+<script lang="ts">
+    import {
+        Body,
+        Column,
+        Container,
+        DefaultAvatar,
+        Option,
+        Search,
+        Sheet,
+        Subtitle,
+    } from "component-lib";
+    import { namedAccountsStore, type NamedAccount } from "@client";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    interface Props {
+        targetAccount: string;
+        onDismiss: () => void;
+    }
+
+    let { targetAccount = $bindable(), onDismiss }: Props = $props();
+    let searching = $state(false);
+    let searchTerm = $state<string>("");
+    let searchTermLower = $derived(searchTerm?.toLowerCase());
+    let filteredAccounts = $derived(
+        $namedAccountsStore.filter(
+            ({ account, name }) =>
+                searchTermLower === "" ||
+                name.toLowerCase().includes(searchTermLower) ||
+                account.toLowerCase().includes(searchTermLower),
+        ),
+    );
+
+    function collapseAccount(account: string) {
+        if (account.length > 23) {
+            return account.slice(0, 10) + "..." + account.slice(account.length - 10);
+        }
+        return account;
+    }
+
+    function selectAccount(namedAccount: NamedAccount) {
+        targetAccount = namedAccount.account;
+        onDismiss();
+    }
+</script>
+
+<Sheet {onDismiss}>
+    <Container
+        supplementalClass={"account_selector"}
+        padding={["lg", "zero", "zero"]}
+        gap={"xxl"}
+        direction={"vertical"}>
+        <Container padding={["zero", "xxl"]} crossAxisAlignment={"center"}>
+            <Subtitle fontWeight={"bold"}>
+                <Translatable resourceKey={i18nKey("Select saved address")}></Translatable>
+            </Subtitle>
+        </Container>
+
+        <Column gap="xs">
+            <Container padding={["zero", "lg"]}>
+                <Search
+                    {searching}
+                    id={"search_component"}
+                    placeholder={"Find address..."}
+                    bind:value={searchTerm} />
+            </Container>
+
+            <Container
+                supplementalClass={"token_selector"}
+                direction={"vertical"}
+                padding={["xxl", "lg", "huge"]}
+                overflow="auto"
+                maxHeight="60vh"
+                gap="md">
+                {#each filteredAccounts as account}
+                    <Option
+                        padding={["sm", "lg", "sm", "sm"]}
+                        selected={account.account === targetAccount}
+                        value={account}
+                        onClick={() => selectAccount(account)}>
+                        <Container gap="md" overflow="hidden" crossAxisAlignment="center">
+                            <DefaultAvatar
+                                icon="recipient"
+                                size="md"
+                                name={account.name}
+                                variant="filled" />
+                            <Column>
+                                <Subtitle fontWeight={"bold"}>{account.name}</Subtitle>
+                                <Body ellipsisTruncate colour={"textSecondary"}
+                                    >{collapseAccount(account.account)}</Body>
+                            </Column>
+                        </Container>
+                    </Option>
+                {/each}
+            </Container>
+        </Column>
+    </Container>
+</Sheet>
diff --git a/frontend/app/src/mobile/features/wallet/Accounts.svelte b/frontend/app/src/mobile/features/wallet/Accounts.svelte
new file mode 100644
index 0000000000..062779cd13
--- /dev/null
+++ b/frontend/app/src/mobile/features/wallet/Accounts.svelte
@@ -0,0 +1,103 @@
+<script lang="ts">
+    import { BodySmall, Container, Sheet } from "component-lib";
+    import {
+        walletTokensSorted as accountsSorted,
+        i18nKey,
+        publish,
+        type OpenChat,
+    } from "@client";
+    import { getContext, onMount } from "svelte";
+    import ErrorMessage from "@src/mobile/shared/ErrorMessage.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import RestrictedFeature from "@src/mobile/features/profile/RestrictedFeature.svelte";
+    import WalletToken from "./WalletToken.svelte";
+    import type { ConversionToken } from "./walletState.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        selectedConversion?: ConversionToken;
+    }
+
+    let { selectedConversion = $bindable("usd") }: Props = $props();
+
+    let balanceError: string | undefined = $state();
+    let actionMode: "none" | "swap" | "restricted" = $state("none");
+    let selectedLedger: string | undefined = $state(undefined);
+
+    onMount(() => client.refreshSwappableTokens());
+
+    function hideManageModal() {
+        actionMode = "none";
+    }
+
+    function removeFromWallet(ledger: string) {
+        client.removeTokenFromWallet(ledger);
+    }
+</script>
+
+{#if actionMode !== "none" && selectedLedger !== undefined}
+    <Sheet onDismiss={hideManageModal}>
+        {#if actionMode === "swap"}
+            <ErrorMessage>TODO - get rid of this</ErrorMessage>
+        {:else if actionMode === "restricted"}
+            <RestrictedFeature onClose={hideManageModal} feature="swap" />
+        {/if}
+    </Sheet>
+{/if}
+
+{#snippet header_item(key: string)}
+    <BodySmall colour="textTertiary" fontWeight="bold" width="hug">
+        <Translatable resourceKey={i18nKey(`appWallet.header.${key}`)} />
+    </BodySmall>
+{/snippet}
+
+<Container
+    closeMenuOnScroll
+    height={"fill"}
+    direction={"vertical"}
+    padding={["zero", "sm", "huge"]}
+    overflow="initial">
+    <!-- Tokens header -->
+    <!-- TODO stick headers to top when scrolling -->
+    <Container supplementalClass="wallet_tokens_header" gap="md">
+        <Container crossAxisAlignment="start" width="fill">
+            {@render header_item("asset")}
+        </Container>
+        <Container mainAxisAlignment="end" width={{ size: "6rem" }}>
+            {@render header_item("holdings")}
+        </Container>
+        <!-- TODO enable asc desc sorting by total! -->
+        <Container mainAxisAlignment="end" width={{ size: "6rem" }}>
+            {@render header_item("total")}
+        </Container>
+    </Container>
+    <!-- Tokens list -->
+    {#each $accountsSorted as token (token.ledger)}
+        <WalletToken
+            withMenu
+            onClick={(tokenState) => publish("tokenPage", tokenState)}
+            {selectedConversion}
+            {token}
+            onRemoveFromWallet={removeFromWallet} />
+    {/each}
+    {#if balanceError !== undefined}
+        <ErrorMessage>{balanceError}</ErrorMessage>
+    {/if}
+</Container>
+
+<style lang="scss">
+    :global(.manage .link-button) {
+        padding: 0 0 0 $sp3;
+        &:first-child {
+            border-right: 1px solid var(--txt-light);
+            padding: 0 $sp3 0 0;
+        }
+    }
+
+    :global(.wallet_tokens_header) {
+        padding-left: 4.25rem !important;
+        padding-right: 2.5rem !important;
+        padding-bottom: var(--sp-sm) !important;
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/home/wallet/BalanceActions.svelte b/frontend/app/src/mobile/features/wallet/BalanceActions.svelte
similarity index 98%
rename from frontend/app/src/components_mobile/home/wallet/BalanceActions.svelte
rename to frontend/app/src/mobile/features/wallet/BalanceActions.svelte
index d770a1fae2..427bde7ac0 100644
--- a/frontend/app/src/components_mobile/home/wallet/BalanceActions.svelte
+++ b/frontend/app/src/mobile/features/wallet/BalanceActions.svelte
@@ -17,7 +17,7 @@
     import SwapVertical from "svelte-material-icons/SwapVertical.svelte";
     import TrayArrowDown from "svelte-material-icons/TrayArrowDown.svelte";
     import TrayArrowUp from "svelte-material-icons/TrayArrowUp.svelte";
-    import Translatable from "../../Translatable.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
     import TokenSelector from "./TokenSelector.svelte";
     import { TokenState, type ConversionToken } from "./walletState.svelte";
 
diff --git a/frontend/app/src/components_mobile/home/wallet/EditRecipient.svelte b/frontend/app/src/mobile/features/wallet/EditRecipient.svelte
similarity index 97%
rename from frontend/app/src/components_mobile/home/wallet/EditRecipient.svelte
rename to frontend/app/src/mobile/features/wallet/EditRecipient.svelte
index 93149d5072..53e6171e01 100644
--- a/frontend/app/src/components_mobile/home/wallet/EditRecipient.svelte
+++ b/frontend/app/src/mobile/features/wallet/EditRecipient.svelte
@@ -5,8 +5,8 @@
     import { getContext } from "svelte";
     import { _ } from "svelte-i18n";
     import Save from "svelte-material-icons/ContentSaveOutline.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
     import { toastStore } from "@src/stores/toast";
 
     const client = getContext<OpenChat>("client");
diff --git a/frontend/app/src/mobile/features/wallet/ForgotPinLabel.svelte b/frontend/app/src/mobile/features/wallet/ForgotPinLabel.svelte
new file mode 100644
index 0000000000..7d9f62a775
--- /dev/null
+++ b/frontend/app/src/mobile/features/wallet/ForgotPinLabel.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    interface Props {
+        onForgot: () => void;
+    }
+    let { onForgot }: Props = $props();
+</script>
+
+<div class="forgot">
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_missing_attribute -->
+    <a role="button" tabindex="0" onclick={onForgot}>
+        <Translatable resourceKey={i18nKey("pinNumber.forgotLabel")} />
+    </a>
+</div>
+
+<style lang="scss">
+    .forgot {
+        width: 100%;
+        text-align: center;
+        @include font(light, normal, fs-80);
+        margin: $sp3 0;
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/home/wallet/ManageRecipients.svelte b/frontend/app/src/mobile/features/wallet/ManageRecipients.svelte
similarity index 97%
rename from frontend/app/src/components_mobile/home/wallet/ManageRecipients.svelte
rename to frontend/app/src/mobile/features/wallet/ManageRecipients.svelte
index 8ce3115c89..40442d061b 100644
--- a/frontend/app/src/components_mobile/home/wallet/ManageRecipients.svelte
+++ b/frontend/app/src/mobile/features/wallet/ManageRecipients.svelte
@@ -19,8 +19,8 @@
     import DotsVertical from "svelte-material-icons/DotsVertical.svelte";
     import Plus from "svelte-material-icons/Plus.svelte";
     import Edit from "svelte-material-icons/TextBoxEditOutline.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/components_mobile/home/wallet/OverallBalance.svelte b/frontend/app/src/mobile/features/wallet/OverallBalance.svelte
similarity index 98%
rename from frontend/app/src/components_mobile/home/wallet/OverallBalance.svelte
rename to frontend/app/src/mobile/features/wallet/OverallBalance.svelte
index 405db07700..8e2d49eb57 100644
--- a/frontend/app/src/components_mobile/home/wallet/OverallBalance.svelte
+++ b/frontend/app/src/mobile/features/wallet/OverallBalance.svelte
@@ -10,7 +10,7 @@
     import EyeOff from "svelte-material-icons/EyeOffOutline.svelte";
     import Eye from "svelte-material-icons/EyeOutline.svelte";
     import Reload from "svelte-material-icons/Reload.svelte";
-    import Translatable from "../../Translatable.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
     import type { ConversionToken } from "./walletState.svelte";
     import BalanceActions from "./BalanceActions.svelte";
 
diff --git a/frontend/app/src/mobile/features/wallet/PinNumberModal.svelte b/frontend/app/src/mobile/features/wallet/PinNumberModal.svelte
new file mode 100644
index 0000000000..9602a75caf
--- /dev/null
+++ b/frontend/app/src/mobile/features/wallet/PinNumberModal.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+    import { Column, Sheet, Subtitle } from "component-lib";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Pincode from "@src/mobile/features/pincode/Pincode.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import ForgotPinLabel from "./ForgotPinLabel.svelte";
+
+    interface Props {
+        onComplete: (pin: string) => void;
+        onClose: () => void;
+        onForgot: () => void;
+    }
+
+    let { onComplete, onClose, onForgot }: Props = $props();
+
+    function onPinComplete(_: string[], value: string) {
+        onComplete(value);
+    }
+</script>
+
+<Sheet onDismiss={onClose}>
+    <Column gap={"xl"} padding={"xl"}>
+        <Subtitle fontWeight={"bold"}>
+            <Translatable resourceKey={i18nKey("pinNumber.enterPin")} />
+        </Subtitle>
+        <Column gap={"lg"}>
+            <Pincode length={6} onComplete={onPinComplete} />
+            <ForgotPinLabel {onForgot} />
+        </Column>
+    </Column>
+</Sheet>
diff --git a/frontend/app/src/mobile/features/wallet/ReceiveCrypto.svelte b/frontend/app/src/mobile/features/wallet/ReceiveCrypto.svelte
new file mode 100644
index 0000000000..6dfd1d7b85
--- /dev/null
+++ b/frontend/app/src/mobile/features/wallet/ReceiveCrypto.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+    import MulticolourText from "@src/mobile/shared/MulticolourText.svelte";
+    import { Avatar, Body, Column, Row } from "component-lib";
+    import { publish, type OpenChat } from "@client";
+    import { getContext } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import ErrorMessage from "@src/mobile/shared/ErrorMessage.svelte";
+    import AccountInfo from "@src/mobile/shared/AccountInfo.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
+    import type { TokenState } from "./walletState.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        tokenState: TokenState;
+    }
+
+    let { tokenState }: Props = $props();
+
+    let error: string | undefined = $state(undefined);
+
+    let title = $derived(i18nKey(`cryptoAccount.receiveToken`, { symbol: tokenState.symbol }));
+
+    function onBack() {
+        tokenState.refreshBalance(client);
+        publish("closeModalPage");
+    }
+</script>
+
+<SlidingPageContent {onBack} {title}>
+    <Column gap={"lg"} padding={"lg"}>
+        <Row gap={"lg"} padding={["lg", "md"]}>
+            <Avatar size={"lg"} url={tokenState.logo} />
+            <Body>
+                <MulticolourText
+                    parts={[
+                        {
+                            text: i18nKey("Have your "),
+                            colour: "textPrimary",
+                        },
+                        {
+                            text: i18nKey(tokenState.symbol),
+                            colour: "primary",
+                        },
+                        {
+                            text: i18nKey(
+                                " address QR code scanned by the sender, or copy / paste it in a message!",
+                            ),
+                            colour: "textPrimary",
+                        },
+                    ]} />
+            </Body>
+        </Row>
+        <Column mainAxisAlignment={"center"}>
+            <AccountInfo ledger={tokenState.ledger} />
+            {#if error}
+                <ErrorMessage>{error}</ErrorMessage>
+            {/if}
+        </Column>
+    </Column>
+</SlidingPageContent>
diff --git a/frontend/app/src/components_mobile/home/wallet/Scanner.svelte b/frontend/app/src/mobile/features/wallet/Scanner.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/wallet/Scanner.svelte
rename to frontend/app/src/mobile/features/wallet/Scanner.svelte
diff --git a/frontend/app/src/components_mobile/SelectDirectUser.svelte b/frontend/app/src/mobile/features/wallet/SelectDirectUser.svelte
similarity index 96%
rename from frontend/app/src/components_mobile/SelectDirectUser.svelte
rename to frontend/app/src/mobile/features/wallet/SelectDirectUser.svelte
index c5a7af8572..b58f32d534 100644
--- a/frontend/app/src/components_mobile/SelectDirectUser.svelte
+++ b/frontend/app/src/mobile/features/wallet/SelectDirectUser.svelte
@@ -9,8 +9,8 @@
     } from "@client";
     import { type Snippet } from "svelte";
     import { _ } from "svelte-i18n";
-    import Translatable from "./Translatable.svelte";
-    import User from "./home/User.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import User from "@src/mobile/shared/User.svelte";
 
     interface Props {
         disabled?: boolean;
diff --git a/frontend/app/src/components_mobile/home/wallet/SelectTokenItem.svelte b/frontend/app/src/mobile/features/wallet/SelectTokenItem.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/wallet/SelectTokenItem.svelte
rename to frontend/app/src/mobile/features/wallet/SelectTokenItem.svelte
diff --git a/frontend/app/src/mobile/features/wallet/SendCrypto.svelte b/frontend/app/src/mobile/features/wallet/SendCrypto.svelte
new file mode 100644
index 0000000000..56fb36f003
--- /dev/null
+++ b/frontend/app/src/mobile/features/wallet/SendCrypto.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+    import { BigButton, Container } from "component-lib";
+    import ChatPlus from "svelte-material-icons/ChatPlusOutline.svelte";
+    import Wallet from "svelte-material-icons/WalletOutline.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
+    import SendToAddress from "./SendToAddress.svelte";
+    import SendToUser from "./SendToUser.svelte";
+    import TokenCard from "./TokenCard.svelte";
+    import { TokenState } from "./walletState.svelte";
+
+    interface Props {
+        tokenState: TokenState;
+        onClose: () => void;
+    }
+
+    let { tokenState, onClose }: Props = $props();
+
+    let mode = $state<"user" | "address">("user");
+    let title = $derived(i18nKey("cryptoAccount.sendToken", { symbol: tokenState.symbol }));
+</script>
+
+<SlidingPageContent {title}>
+    <Container
+        mainAxisAlignment={"spaceBetween"}
+        height={"fill"}
+        gap={"xl"}
+        padding={"xl"}
+        direction={"vertical"}>
+        <TokenCard {tokenState} />
+
+        <Container gap={"xl"} height={"fill"} direction={"vertical"}>
+            {#if mode === "user"}
+                <SendToUser onComplete={onClose} {tokenState} />
+            {:else if mode === "address"}
+                <SendToAddress onComplete={onClose} {tokenState} />
+            {/if}
+        </Container>
+
+        <Container gap={"sm"}>
+            <BigButton
+                onClick={() => (mode = "user")}
+                mode={mode === "user" ? "active" : "default"}>
+                {#snippet icon(color)}
+                    <ChatPlus {color} />
+                {/snippet}
+                <Translatable resourceKey={i18nKey("Send to user")} />
+            </BigButton>
+            <BigButton
+                onClick={() => (mode = "address")}
+                mode={mode === "address" ? "active" : "default"}>
+                {#snippet icon(color)}
+                    <Wallet {color} />
+                {/snippet}
+                <Translatable resourceKey={i18nKey("Send to address")} />
+            </BigButton>
+        </Container>
+    </Container>
+</SlidingPageContent>
diff --git a/frontend/app/src/components_mobile/home/wallet/SendToAddress.svelte b/frontend/app/src/mobile/features/wallet/SendToAddress.svelte
similarity index 96%
rename from frontend/app/src/components_mobile/home/wallet/SendToAddress.svelte
rename to frontend/app/src/mobile/features/wallet/SendToAddress.svelte
index 51d4b63cef..ff1d1a4722 100644
--- a/frontend/app/src/components_mobile/home/wallet/SendToAddress.svelte
+++ b/frontend/app/src/mobile/features/wallet/SendToAddress.svelte
@@ -32,14 +32,14 @@
     import ChevronRight from "svelte-material-icons/ChevronRight.svelte";
     import QrcodeScan from "svelte-material-icons/QrcodeScan.svelte";
     import SendOutline from "svelte-material-icons/SendOutline.svelte";
-    import { i18nKey, interpolate } from "../../../i18n/i18n";
-    import { pinNumberErrorMessageStore } from "../../../stores/pinNumber";
-    import { Debouncer } from "../../../utils/debouncer";
-    import ErrorMessage from "../../ErrorMessage.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import NetworkSelector from "../NetworkSelector.svelte";
-    import TokenInput from "../TokenInput.svelte";
-    import TransferFeesMessage from "../TransferFeesMessage.svelte";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import { pinNumberErrorMessageStore } from "@src/stores/pinNumber";
+    import { Debouncer } from "@src/utils/debouncer";
+    import ErrorMessage from "@src/mobile/shared/ErrorMessage.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import NetworkSelector from "@src/mobile/shared/NetworkSelector.svelte";
+    import TokenInput from "@src/mobile/shared/TokenInput.svelte";
+    import TransferFeesMessage from "@src/mobile/shared/TransferFeesMessage.svelte";
     import AccountSelector from "./AccountSelector.svelte";
     import Scanner from "./Scanner.svelte";
     import SuccessIcon from "./SuccessIcon.svelte";
diff --git a/frontend/app/src/components_mobile/home/wallet/SendToUser.svelte b/frontend/app/src/mobile/features/wallet/SendToUser.svelte
similarity index 96%
rename from frontend/app/src/components_mobile/home/wallet/SendToUser.svelte
rename to frontend/app/src/mobile/features/wallet/SendToUser.svelte
index 23499402e6..a96a5c8e47 100644
--- a/frontend/app/src/components_mobile/home/wallet/SendToUser.svelte
+++ b/frontend/app/src/mobile/features/wallet/SendToUser.svelte
@@ -24,10 +24,10 @@
     import { _ } from "svelte-i18n";
     import SendOutline from "svelte-material-icons/SendOutline.svelte";
     import ChevronRight from "svelte-material-icons/ChevronRight.svelte";
-    import SelectUser from "../../SelectDirectUser.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import TokenInput from "../TokenInput.svelte";
-    import TransferFeesMessage from "../TransferFeesMessage.svelte";
+    import SelectUser from "./SelectDirectUser.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import TokenInput from "@src/mobile/shared/TokenInput.svelte";
+    import TransferFeesMessage from "@src/mobile/shared/TransferFeesMessage.svelte";
     import SuccessIcon from "./SuccessIcon.svelte";
     import type { TokenState } from "./walletState.svelte";
 
diff --git a/frontend/app/src/mobile/features/wallet/SetPinNumberModal.svelte b/frontend/app/src/mobile/features/wallet/SetPinNumberModal.svelte
new file mode 100644
index 0000000000..a1c22f2058
--- /dev/null
+++ b/frontend/app/src/mobile/features/wallet/SetPinNumberModal.svelte
@@ -0,0 +1,224 @@
+<script lang="ts">
+    import type { DelegationChain, ECDSAKeyIdentity } from "@icp-sdk/core/identity";
+    import { Body, Button, Container, Subtitle } from "component-lib";
+    import {
+        AuthProvider,
+        pinNumberFailureStore,
+        type OpenChat,
+        type Verification,
+    } from "@client";
+    import { getContext, onMount } from "svelte";
+    import Lock from "svelte-material-icons/Lock.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import {
+        pinNumberErrorMessageStore,
+        supportsForgot,
+        type PinOperation,
+    } from "@src/stores/pinNumber";
+    import { toastStore } from "@src/stores/toast";
+    import ErrorMessage from "@src/mobile/shared/ErrorMessage.svelte";
+    import Pincode from "@src/mobile/features/pincode/Pincode.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import ForgotPinLabel from "./ForgotPinLabel.svelte";
+    import ReAuthenticate from "@src/mobile/features/profile/ReAuthenticate.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        type: PinOperation;
+        onPinSet?: (pin: string | undefined) => void;
+        onClose: () => void;
+    }
+
+    let { type = $bindable(), onClose, onPinSet }: Props = $props();
+
+    let busy = $state(false);
+    let currPinArray: string[] = $state([]);
+    let newPinArray: string[] = $state([]);
+    let signInProofJwt: string | undefined = $state(undefined);
+
+    onMount(() => {
+        pinNumberFailureStore.set(undefined);
+    });
+
+    function isPinValid(pin: string[]): boolean {
+        return pin.filter((c) => /^[0-9]$/.test(c)).length === 6;
+    }
+
+    function getVerification(): Verification {
+        if (signInProofJwt !== undefined) {
+            return {
+                kind: "reauthenticated",
+                signInProofJwt,
+            };
+        }
+
+        if (type.kind === "clear" || type.kind === "change") {
+            return {
+                kind: "pin_verification",
+                pin: currPinArray.join(""),
+            };
+        }
+
+        return { kind: "no_verification" };
+    }
+
+    function changePin(): Promise<void> {
+        const newPin = type.kind === "clear" ? undefined : newPinArray.join("");
+
+        busy = true;
+
+        return client
+            .setPinNumber(getVerification(), newPin)
+            .then((resp) => {
+                if (resp.kind === "success") {
+                    toastStore.showSuccessToast(i18nKey(`pinNumber.${type.kind}PinSuccess`));
+                    onPinSet?.(newPin);
+                    onClose();
+                } else {
+                    console.log("SetPinNumber failed", resp);
+                }
+            })
+            .finally(() => {
+                busy = false;
+            });
+    }
+
+    function reauthenticated(detail: {
+        key: ECDSAKeyIdentity;
+        delegation: DelegationChain;
+        provider: AuthProvider;
+        signInProofJwt: string;
+    }) {
+        if (type.kind !== "forgot") return;
+
+        signInProofJwt = detail.signInProofJwt;
+
+        switch (type.while.kind) {
+            case "clear":
+                type = { kind: "clear" };
+                changePin(); // no further input is required so just do it
+                break;
+            default:
+                type = { kind: "change" };
+        }
+    }
+
+    function onForgot() {
+        if (supportsForgot(type)) {
+            type = {
+                kind: "forgot",
+                while: type,
+            };
+        }
+    }
+
+    let title = $derived(i18nKey(`pinNumber.${type.kind}PinTitle`));
+    let message = $derived(
+        type.kind === "change" ? undefined : i18nKey(`pinNumber.${type.kind}PinMessage`),
+    );
+    let action = $derived(i18nKey(`pinNumber.${type.kind}Pin`));
+    let verificationValid = $derived(isPinValid(currPinArray) || signInProofJwt !== undefined);
+    let changeValid = $derived(
+        type.kind === "change" && isPinValid(newPinArray) && verificationValid,
+    );
+    let setValid = $derived(type.kind === "set" && isPinValid(newPinArray));
+    let clearValid = $derived(type.kind === "clear" && verificationValid);
+    let isValid = $derived(type.kind === "forgot" || changeValid || setValid || clearValid);
+    let showCurrentPin = $derived(type.kind !== "set" && signInProofJwt === undefined);
+    let errorMessage = $derived($pinNumberErrorMessageStore);
+</script>
+
+<Container height={"hug"} padding={"xl"} gap={"xl"} direction={"vertical"}>
+    <Subtitle fontWeight={"bold"}>
+        <Translatable resourceKey={title} />
+    </Subtitle>
+
+    <Container direction={"vertical"} gap={"lg"}>
+        {#if type.kind === "forgot"}
+            {#if message !== undefined}
+                <ReAuthenticate onSuccess={reauthenticated} {message} />
+            {/if}
+        {:else}
+            {#if message !== undefined}
+                <Body colour={"textSecondary"}>
+                    <Translatable resourceKey={message} />
+                </Body>
+            {/if}
+            {#if showCurrentPin}
+                <Container
+                    overflow={"visible"}
+                    crossAxisAlignment={"center"}
+                    direction={"vertical"}>
+                    <Pincode
+                        subtext={type.kind === "change"
+                            ? i18nKey("pinNumber.currentPin")
+                            : undefined}
+                        length={6}
+                        bind:code={currPinArray} />
+                </Container>
+            {/if}
+            {#if type.kind !== "clear"}
+                <Pincode
+                    subtext={type.kind === "change" ? i18nKey("pinNumber.newPin") : undefined}
+                    length={6}
+                    bind:code={newPinArray} />
+            {/if}
+        {/if}
+    </Container>
+
+    {#if type.kind !== "forgot"}
+        <Container
+            padding={["xl", "zero", "zero", "zero"]}
+            direction={"vertical"}
+            gap={"xs"}
+            crossAxisAlignment={"center"}>
+            <Button loading={busy} disabled={busy || !isValid} onClick={changePin}>
+                {#snippet icon(color)}
+                    <Lock {color} />
+                {/snippet}
+                <Translatable resourceKey={action} />
+            </Button>
+            {#if type.kind !== "set"}
+                <ForgotPinLabel {onForgot} />
+            {/if}
+        </Container>
+    {/if}
+
+    {#if errorMessage !== undefined}
+        <ErrorMessage>
+            <Translatable resourceKey={errorMessage} />
+        </ErrorMessage>
+    {/if}
+
+    <!-- <Container gap={"md"} crossAxisAlignment={"end"} mainAxisAlignment={"end"}>
+        {#if type.kind === "forgot"}
+            <CommonButton disabled={busy} onClick={onClose} size={"medium"}>
+                <Translatable resourceKey={i18nKey("cancel")} />
+            </CommonButton>
+        {:else}
+            <CommonButton disabled={busy} onClick={onClose} size={"small_text"}>
+                <Translatable resourceKey={i18nKey("cancel")} />
+            </CommonButton>
+            <CommonButton
+                loading={busy}
+                disabled={busy || !isValid}
+                onClick={changePin}
+                mode={"active"}
+                size={"medium"}>
+                {#snippet icon(color)}
+                    <ShieldPlusOutline {color} />
+                {/snippet}
+                <Translatable resourceKey={action} />
+            </CommonButton>
+        {/if}
+    </Container> -->
+</Container>
+
+<style lang="scss">
+    .code {
+        display: flex;
+        flex-direction: column;
+        gap: $sp3;
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/home/wallet/SuccessIcon.svelte b/frontend/app/src/mobile/features/wallet/SuccessIcon.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/wallet/SuccessIcon.svelte
rename to frontend/app/src/mobile/features/wallet/SuccessIcon.svelte
diff --git a/frontend/app/src/mobile/features/wallet/SwapCrypto.svelte b/frontend/app/src/mobile/features/wallet/SwapCrypto.svelte
new file mode 100644
index 0000000000..c430bedf44
--- /dev/null
+++ b/frontend/app/src/mobile/features/wallet/SwapCrypto.svelte
@@ -0,0 +1,547 @@
+<script lang="ts">
+    import {
+        Avatar,
+        Body,
+        BodySmall,
+        ColourVars,
+        Column,
+        CommonButton2,
+        Container,
+        Switch,
+    } from "component-lib";
+    import {
+        exchangeRatesLookupStore as exchangeRatesLookup,
+        formatTokens,
+        swappableTokensStore,
+        type DexId,
+        type EnhancedTokenDetails,
+        type InterpolationValues,
+        type OpenChat,
+        type ResourceKey,
+    } from "@client";
+    import { random128 } from "@shared";
+    import { getContext, onMount } from "svelte";
+    import { _ } from "svelte-i18n";
+    import Alert from "svelte-material-icons/AlertOutline.svelte";
+    import ArrowDown from "svelte-material-icons/ArrowDown.svelte";
+    import Check from "svelte-material-icons/Check.svelte";
+    import ChevronDown from "svelte-material-icons/ChevronDown.svelte";
+    import Info from "svelte-material-icons/InformationOutline.svelte";
+    import ShareOutline from "svelte-material-icons/ShareOutline.svelte";
+    import SwapVertical from "svelte-material-icons/SwapVertical.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { pinNumberErrorMessageStore } from "@src/stores/pinNumber";
+    import { calculateDollarAmount } from "@src/utils/exchange";
+    import ErrorMessage from "@src/mobile/shared/ErrorMessage.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
+    import TokenInput from "@src/mobile/shared/TokenInput.svelte";
+    import SwapProgress from "./SwapProgress.svelte";
+    import TokenCard from "./TokenCard.svelte";
+    import TokenSelector from "./TokenSelector.svelte";
+    import { TokenState } from "./walletState.svelte";
+
+    interface Props {
+        inToken: TokenState;
+        onClose: () => void;
+    }
+
+    let { inToken = $bindable() }: Props = $props();
+
+    const client = getContext<OpenChat>("client");
+
+    type TokenSelectorParams = {
+        title: ResourceKey;
+        onSelect: (token: EnhancedTokenDetails) => void;
+        extraFilter?: (token: EnhancedTokenDetails) => boolean;
+    };
+    type SwapState = "quote" | "swap";
+
+    let outToken = $state<TokenState>();
+    let ledgerIn = $derived(inToken.ledger);
+    let tokenSelector = $state<TokenSelectorParams>();
+    let error: string | undefined = $state(undefined);
+    let busy = $state(false);
+    let valid = $state(false);
+    let swapState = $state<SwapState>("quote");
+    let validAmount = $state(false);
+    let ledgerOut = $derived(outToken?.ledger);
+    let swaps = $state({} as Record<string, DexId[]>);
+    let swapMessageValues: InterpolationValues | undefined = $state(undefined);
+    let bestQuote: [DexId, bigint] | undefined = $state(undefined);
+    let swapId: bigint | undefined = $state();
+    let userAcceptedWarning = $state(false);
+    let warnValueUnknown = $state(false);
+    let warnValueDropped = $state(false);
+    let initialized = $state(false);
+    let detailsIn = $derived(inToken.token);
+    let detailsOut = $derived(outToken?.token);
+    let anySwapsAvailable = $derived(Object.keys(swaps).length > 0 && detailsOut !== undefined);
+    let swapping = $derived(swapState === "swap" && busy);
+    let amountInText = $derived(formatTokens(inToken.draftAmount, detailsIn.decimals));
+
+    onMount(() => loadSwaps(inToken.ledger));
+
+    function quote() {
+        if (!valid) return;
+
+        busy = true;
+        error = undefined;
+        swapId = undefined;
+
+        client
+            .getTokenSwapQuotes(
+                ledgerIn,
+                ledgerOut!,
+                inToken.draftAmount - BigInt(2) * detailsIn.transferFee,
+            )
+            .then((response) => {
+                if (response.length === 0) {
+                    error = $_("tokenSwap.noQuotes", { values: { tokenIn: detailsIn.symbol } });
+                } else {
+                    bestQuote = response[0];
+
+                    const [dexId, quote] = bestQuote!;
+
+                    const amountOutText = formatTokens(quote, detailsOut!.decimals);
+                    const rate = (Number(amountOutText) / Number(amountInText)).toPrecision(3);
+                    const dex = dexName(dexId);
+                    const minAmountOut = BigInt(10) * detailsOut!.transferFee;
+                    const minAmountOutText = formatTokens(minAmountOut, detailsOut!.decimals);
+
+                    const usdInText = calculateDollarAmount(
+                        inToken.draftAmount,
+                        $exchangeRatesLookup.get(detailsIn.symbol.toLowerCase())?.toUSD,
+                        detailsIn.decimals,
+                    );
+                    const usdOutText = calculateDollarAmount(
+                        bestQuote[1],
+                        $exchangeRatesLookup.get(detailsOut!.symbol.toLowerCase())?.toUSD,
+                        detailsOut!.decimals,
+                    );
+
+                    warnValueUnknown = usdInText === "???" || usdOutText === "???";
+                    warnValueDropped =
+                        !warnValueUnknown && Number(usdOutText) < 0.9 * Number(usdInText);
+
+                    swapMessageValues = {
+                        amountIn: amountInText,
+                        tokenIn: detailsIn.symbol,
+                        rate,
+                        amountOut: amountOutText,
+                        tokenOut: detailsOut!.symbol,
+                        dex,
+                        minAmountOut: minAmountOutText,
+                        usdOut: usdOutText,
+                        usdIn: usdInText,
+                    };
+
+                    if (quote > minAmountOut) {
+                        swapState = "swap";
+                    } else {
+                        error = $_("tokenSwap.quoteTooLow", { values: swapMessageValues });
+                    }
+                }
+            })
+            .catch((err) => {
+                client.logError(`Error getting swap quotes for token: ${detailsIn.symbol}`, err);
+                error = $_("tokenSwap.quoteError", { values: { tokenIn: detailsIn.symbol } });
+            })
+            .finally(() => (busy = false));
+    }
+
+    function swap() {
+        if (!valid || bestQuote === undefined) return;
+
+        busy = true;
+        error = undefined;
+
+        const ledgerInLocal = ledgerIn;
+        const ledgerOutLocal = ledgerOut!;
+        const bestQuoteLocal = bestQuote;
+
+        let minAmountOut = (bestQuoteLocal[1] * BigInt(98)) / BigInt(100);
+
+        client
+            .refreshAccountBalance(ledgerIn)
+            .then((balance) => {
+                if (balance < inToken.draftAmount) {
+                    error = $_("tokenSwap.progress.insufficientFunds");
+                    return false;
+                } else {
+                    return true;
+                }
+            })
+            .then((balanceCheckSuccess) => {
+                if (balanceCheckSuccess) {
+                    swapId = random128();
+                    return client.swapTokens(
+                        swapId,
+                        ledgerInLocal,
+                        ledgerOutLocal,
+                        inToken.draftAmount,
+                        minAmountOut,
+                        bestQuoteLocal[0],
+                    );
+                }
+            })
+            .catch(() => {
+                swapId = undefined;
+                busy = false;
+            });
+    }
+
+    function dexName(dex: DexId): string {
+        switch (dex) {
+            case "icpswap":
+                return "ICPSwap";
+            case "taco":
+                return "TACO";
+        }
+        return dex;
+    }
+
+    function loadSwaps(ledger: string) {
+        client.getTokenSwaps(ledger).then((results) => {
+            outToken = undefined;
+            swaps = results;
+            client.refreshSwappableTokens();
+            initialized = true;
+        });
+    }
+
+    function onPrimaryClick() {
+        switch (swapState) {
+            case "quote":
+                quote();
+                break;
+            case "swap":
+                swap();
+                break;
+        }
+    }
+
+    $effect(() => {
+        valid =
+            anySwapsAvailable &&
+            validAmount &&
+            (swapState === "swap"
+                ? (bestQuote !== undefined && userAcceptedWarning) ||
+                  (!warnValueUnknown && !warnValueDropped)
+                : true);
+    });
+
+    let pinNumberError = $derived($pinNumberErrorMessageStore);
+
+    function selectFrom() {
+        tokenSelector = {
+            title: i18nKey("Select token to swap from"),
+            onSelect: (token: EnhancedTokenDetails) => {
+                inToken = new TokenState(token, "usd");
+                tokenSelector = undefined;
+                loadSwaps(inToken.ledger);
+            },
+            extraFilter: (token: EnhancedTokenDetails) =>
+                $swappableTokensStore.has(token.ledger) &&
+                token.symbol !== outToken?.symbol &&
+                token.balance > 0n,
+        };
+    }
+
+    function selectTo() {
+        tokenSelector = {
+            title: i18nKey("Select token to swap to"),
+            onSelect: (token: EnhancedTokenDetails) => {
+                outToken = new TokenState(token, "usd");
+                tokenSelector = undefined;
+            },
+            extraFilter: (token: EnhancedTokenDetails) =>
+                $swappableTokensStore.has(token.ledger) && token.symbol !== inToken?.symbol,
+        };
+    }
+</script>
+
+{#snippet swapIcon(color: string, size: string)}
+    <SwapVertical {color} {size} />
+{/snippet}
+
+{#if tokenSelector !== undefined}
+    <TokenSelector
+        icon={swapIcon}
+        onSelect={tokenSelector.onSelect}
+        placeholder={i18nKey("Find token...")}
+        extraFilter={tokenSelector.extraFilter}
+        onDismiss={() => (tokenSelector = undefined)}
+        title={tokenSelector.title} />
+{/if}
+
+{#snippet selectedToken(onClick: () => void, token?: EnhancedTokenDetails)}
+    <Container
+        {onClick}
+        background={ColourVars.textTertiary}
+        height={{ size: "3.5rem" }}
+        padding={["xs", "md"]}
+        borderRadius={"circle"}
+        gap={"sm"}
+        mainAxisAlignment={"spaceBetween"}
+        crossAxisAlignment={"center"}>
+        {#if token !== undefined}
+            <Container crossAxisAlignment={"center"} gap={"sm"}>
+                <Avatar url={token.logo} customSize={"1.5rem"}></Avatar>
+                <Body fontWeight={"bold"}>
+                    {token.symbol}
+                </Body>
+            </Container>
+        {:else}
+            <Container padding={["zero", "zero", "zero", "sm"]}>
+                <Body colour="textPlaceholder">
+                    <Translatable resourceKey={i18nKey("Choose token...")} />
+                </Body>
+            </Container>
+        {/if}
+        <ChevronDown color={"var(--text-placeholder)"} size="1.5rem" />
+    </Container>
+{/snippet}
+
+{#snippet quoteView()}
+    <Container
+        background={ColourVars.background1}
+        gap={"xl"}
+        direction={"vertical"}
+        borderRadius={"lg"}
+        padding={["xl", "lg"]}>
+        <Container direction={"vertical"} gap={"md"} crossAxisAlignment={"center"}>
+            {@render selectedToken(selectFrom, inToken.token)}
+            <Container
+                supplementalClass={"swap_down_arrow"}
+                width={{ size: "2.5rem" }}
+                borderRadius={"circle"}
+                background={ColourVars.background1}
+                mainAxisAlignment={"center"}
+                crossAxisAlignment={"center"}>
+                <ArrowDown size={"1.5rem"} />
+            </Container>
+            {@render selectedToken(selectTo, outToken?.token)}
+        </Container>
+
+        <TokenInput
+            balance={inToken.cryptoBalance}
+            ledger={inToken.ledger}
+            minAmount={inToken.minAmount}
+            disabled={busy}
+            error={!validAmount}
+            bind:valid={validAmount}
+            bind:amount={inToken.draftAmount}>
+            {#snippet subtext()}
+                {`Minimum amount ${inToken.minAmountLabel} ${inToken.symbol}`}
+            {/snippet}
+        </TokenInput>
+    </Container>
+{/snippet}
+
+{#snippet swapView()}
+    {#if outToken !== undefined && swapMessageValues !== undefined}
+        <TokenCard tokenState={outToken} />
+        <Container
+            gap={"lg"}
+            background={ColourVars.background1}
+            padding={"lg"}
+            borderRadius={"lg"}
+            direction={"vertical"}>
+            <Container mainAxisAlignment={"spaceBetween"}>
+                <BodySmall colour={"textSecondary"}>
+                    <Translatable resourceKey={i18nKey("You swap")} />
+                </BodySmall>
+                <Container crossAxisAlignment={"end"} width={"hug"} direction={"vertical"}>
+                    <Body align={"end"} width={"hug"} fontWeight={"bold"}>
+                        {`${swapMessageValues.amountIn} ${swapMessageValues.tokenIn}`}
+                    </Body>
+                    <BodySmall
+                        align={"end"}
+                        width={"hug"}
+                        fontWeight={"bold"}
+                        colour={"textSecondary"}>
+                        ≈ ${swapMessageValues.usdIn}
+                    </BodySmall>
+                </Container>
+            </Container>
+            <Container mainAxisAlignment={"spaceBetween"}>
+                <BodySmall colour={"textSecondary"}>
+                    <Translatable resourceKey={i18nKey("You receive (approx.)")} />
+                </BodySmall>
+                <Container crossAxisAlignment={"end"} width={"hug"} direction={"vertical"}>
+                    <Body align={"end"} width={"hug"} colour={"primary"} fontWeight={"bold"}>
+                        {`${swapMessageValues.amountOut} ${swapMessageValues.tokenOut}`}
+                    </Body>
+                    <BodySmall
+                        align={"end"}
+                        width={"hug"}
+                        fontWeight={"bold"}
+                        colour={"textSecondary"}>
+                        ≈ ${swapMessageValues.usdOut}
+                    </BodySmall>
+                </Container>
+            </Container>
+            <Container mainAxisAlignment={"spaceBetween"}>
+                <BodySmall colour={"textSecondary"}>
+                    <Translatable resourceKey={i18nKey("Exchange rate")} />
+                </BodySmall>
+                <Body width={"hug"} fontWeight={"bold"}>
+                    {`${swapMessageValues.rate} ${swapMessageValues.tokenOut} ~ 1 ${swapMessageValues.tokenIn}`}
+                </Body>
+            </Container>
+            <Container mainAxisAlignment={"spaceBetween"}>
+                <BodySmall colour={"textSecondary"}>
+                    <Translatable resourceKey={i18nKey("Quote provider")} />
+                </BodySmall>
+                <Body width={"hug"} fontWeight={"bold"}>
+                    {`${swapMessageValues.dex}`}
+                </Body>
+            </Container>
+        </Container>
+
+        {#if warnValueDropped || warnValueUnknown}
+            <Container
+                gap={"md"}
+                background={ColourVars.background1}
+                padding={"lg"}
+                borderRadius={"lg"}
+                direction={"vertical"}>
+                <Container crossAxisAlignment={"center"} gap={"sm"}>
+                    <Alert color={ColourVars.warning} />
+                    <Body fontWeight={"bold"} colour={"warning"}>
+                        <Translatable resourceKey={i18nKey("Low value warning")} />
+                    </Body>
+                </Container>
+                <Body colour={"textSecondary"}>
+                    {#if warnValueDropped}
+                        <Translatable
+                            resourceKey={i18nKey(
+                                "tokenSwap.warningValueDropped",
+                                swapMessageValues,
+                            )} />
+                    {:else}
+                        <Translatable
+                            resourceKey={i18nKey(
+                                "tokenSwap.warningValueUnknown",
+                                swapMessageValues,
+                            )} />
+                    {/if}
+                </Body>
+                <Switch reverse bind:checked={userAcceptedWarning}>
+                    <Translatable resourceKey={i18nKey("tokenSwap.confirmUnderstanding")} />
+                </Switch>
+            </Container>
+        {/if}
+
+        <Container
+            gap={"md"}
+            background={ColourVars.background1}
+            padding={"lg"}
+            borderRadius={"lg"}
+            direction={"vertical"}>
+            <Container crossAxisAlignment={"center"} gap={"sm"}>
+                <Info color={ColourVars.secondary} />
+                <Body fontWeight={"bold"} colour={"secondary"}>
+                    <Translatable resourceKey={i18nKey("Swap success limit")} />
+                </Body>
+            </Container>
+            <Body colour={"textSecondary"}>
+                <Translatable
+                    resourceKey={i18nKey("tokenSwap.proceedWithSwap", swapMessageValues)} />
+            </Body>
+        </Container>
+    {/if}
+{/snippet}
+
+<SlidingPageContent title={i18nKey("Swap tokens")}>
+    <Container height={"fill"} gap={"xl"} padding={["xl", "lg", "huge"]} direction={"vertical"}>
+        <!-- Title and description -->
+        <Container gap={"md"} direction={"vertical"} padding={["zero", "sm"]}>
+            <Body fontWeight={"bold"}>
+                <Translatable resourceKey={i18nKey(`Swap ${inToken.symbol}`)} />
+            </Body>
+            <Body colour={"textSecondary"}>
+                <Translatable
+                    resourceKey={i18nKey(
+                        "Provide values first to obtain our best quote from DEX partners. If you accept the quote your tokens are securely sent, exchanged for the selected token, and the swapped tokens are automatically returned to your wallet.",
+                    )} />
+            </Body>
+        </Container>
+
+        <!-- Content -->
+        <Column gap="sm">
+            <TokenCard tokenState={inToken} />
+
+            {#if initialized}
+                {#if swapState === "quote"}
+                    {@render quoteView()}
+                {/if}
+
+                {#if swapState === "swap"}
+                    {@render swapView()}
+                {/if}
+            {/if}
+            {#if error !== undefined || pinNumberError !== undefined}
+                <ErrorMessage>
+                    {#if pinNumberError !== undefined}
+                        <Translatable resourceKey={pinNumberError} />
+                    {:else}
+                        {error}
+                    {/if}
+                </ErrorMessage>
+            {/if}
+        </Column>
+
+        <!-- Buttons -->
+        <Container
+            crossAxisAlignment="center"
+            mainAxisAlignment={swapState === "quote" ? "end" : "spaceBetween"}>
+            {#if swapState === "swap"}
+                <CommonButton2
+                    onClick={() => (swapState = "quote")}
+                    variant="primary"
+                    mode="text"
+                    disabled={swapping}>
+                    <Translatable resourceKey={i18nKey("cancel")} />
+                </CommonButton2>
+            {/if}
+            <CommonButton2 loading={busy} onClick={onPrimaryClick} variant="primary" mode="small">
+                {#snippet icon(color, size)}
+                    {#if swapState === "swap"}
+                        <Check {color} {size} />
+                    {:else}
+                        <ShareOutline {color} {size} />
+                    {/if}
+                {/snippet}
+                {#if swapState === "swap"}
+                    <Translatable resourceKey={i18nKey("Accept quote & proceed")} />
+                {:else}
+                    <Translatable resourceKey={i18nKey("Get swap quote")} />
+                {/if}
+            </CommonButton2>
+        </Container>
+    </Container>
+</SlidingPageContent>
+
+{#if swapping && swapId !== undefined && detailsOut !== undefined && bestQuote !== undefined}
+    <SwapProgress
+        {swapId}
+        tokenIn={detailsIn.symbol}
+        tokenOut={detailsOut.symbol}
+        ledgerIn={detailsIn.ledger}
+        ledgerOut={detailsOut.ledger}
+        amountIn={amountInText}
+        decimalsOut={detailsOut.decimals}
+        dex={dexName(bestQuote[0])} />
+{/if}
+
+<style lang="scss">
+    :global(.container.swap_down_arrow) {
+        position: absolute;
+        width: 2.5rem;
+        height: 2.5rem;
+        transform: translateY(calc(50% + 1.25rem));
+        z-index: 1;
+    }
+</style>
diff --git a/frontend/app/src/mobile/features/wallet/SwapProgress.svelte b/frontend/app/src/mobile/features/wallet/SwapProgress.svelte
new file mode 100644
index 0000000000..8df04d0580
--- /dev/null
+++ b/frontend/app/src/mobile/features/wallet/SwapProgress.svelte
@@ -0,0 +1,298 @@
+<script lang="ts" module>
+    export type SwapOutcome = "success" | "rateChanged" | "insufficientFunds" | "error";
+</script>
+
+<script lang="ts">
+    import { i18nKey } from "@src/i18n/i18n";
+    import {
+        Body,
+        Button,
+        ColourVars,
+        Container,
+        Sheet,
+        Subtitle,
+        type SizeMode,
+    } from "component-lib";
+    import type { OpenChat } from "@client";
+    import { Poller, publish } from "@client";
+    import { getContext, onMount } from "svelte";
+    import Check from "svelte-material-icons/Check.svelte";
+    import Close from "svelte-material-icons/Close.svelte";
+    import Robot from "svelte-material-icons/RobotOutline.svelte";
+    import ErrorMessage from "@src/mobile/shared/ErrorMessage.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    interface Props {
+        swapId: bigint;
+        tokenIn: string;
+        tokenOut: string;
+        ledgerIn: string;
+        ledgerOut: string;
+        amountIn: string;
+        decimalsOut: number;
+        dex: string;
+    }
+
+    let { swapId, tokenIn, tokenOut, ledgerIn, ledgerOut, amountIn, decimalsOut, dex }: Props =
+        $props();
+
+    ledgerOut;
+
+    const height: SizeMode = { size: "16rem" };
+    const client = getContext<OpenChat>("client");
+    const POLL_INTERVAL = 1000;
+    const labelPrefix = "tokenSwap.progress.";
+
+    let amountOut = $state("");
+    let poller: Poller | undefined = undefined;
+    let outcome = $state<SwapOutcome>();
+
+    let labelValues = $derived({
+        tokenIn,
+        tokenOut,
+        amountIn,
+        amountOut,
+        dex,
+    });
+
+    let stages = $state<Stage["kind"][]>(["get", "deposit", "notify", "swap", "withdraw", "done"]);
+
+    type Stage =
+        | { kind: "get" }
+        | { kind: "deposit" }
+        | { kind: "notify" }
+        | { kind: "swap" }
+        | { kind: "withdraw" }
+        | { kind: "refund" }
+        | { kind: "done" };
+
+    let currentStage = $state<Stage["kind"]>("get");
+    let currentStageIndex = $derived(stages.findIndex((s) => s === currentStage));
+    let error = $state(false);
+
+    onMount(() => {
+        poller = new Poller(querySwapProgress, POLL_INTERVAL, POLL_INTERVAL, true);
+        return () => poller?.stop();
+    });
+
+    function notifyFinished(o: "success" | "rateChanged" | "insufficientFunds" | "error") {
+        outcome = o;
+        poller?.stop();
+    }
+
+    async function querySwapProgress() {
+        let response = await client.tokenSwapStatus(swapId);
+
+        if (response.kind === "success") {
+            if (
+                response.amountSwapped?.kind === "ok" &&
+                response.amountSwapped?.value.kind === "ok"
+            ) {
+                amountOut = client.formatTokens(response.amountSwapped.value.value, decimalsOut);
+            }
+
+            if (response.withdrawnFromDex?.kind === "ok") {
+                const success =
+                    response.amountSwapped?.kind === "ok" &&
+                    response.amountSwapped.value.kind === "ok";
+
+                currentStage = "done";
+                notifyFinished(success ? "success" : "rateChanged");
+            } else if (response.amountSwapped?.kind === "ok") {
+                if (response.amountSwapped.value.kind === "ok") {
+                    currentStage = "withdraw";
+                } else {
+                    currentStage = "refund";
+                    stages = stages.filter((s) => (s === "withdraw" ? "refund" : s));
+                }
+            } else if (response.notifyDex?.kind == "ok") {
+                currentStage = "swap";
+            } else if (response.transfer?.kind == "ok") {
+                currentStage = "notify";
+            } else if (response.transfer?.kind == "error") {
+                error = true;
+                notifyFinished("insufficientFunds");
+            } else if (response.depositAccount?.kind == "ok") {
+                currentStage = "deposit";
+            } else if (response.depositAccount?.kind == "error") {
+                error = true;
+                notifyFinished("error");
+            }
+        }
+    }
+
+    function percentFromIndex(idx: number) {
+        return (idx / (stages.length - 1)) * 100;
+    }
+
+    function onFinished() {
+        client.refreshAccountBalance(ledgerIn);
+        client.refreshAccountBalance(ledgerOut);
+        closeModalStack();
+    }
+
+    function closeModalStack() {
+        publish("closeModalStack");
+    }
+</script>
+
+<Sheet onDismiss={closeModalStack}>
+    <Container direction={"vertical"} gap={"xxl"} padding={["lg", "xxl", "huge"]}>
+        <Subtitle fontWeight={"bold"}>
+            <Translatable resourceKey={i18nKey("Swap in progress")} />
+        </Subtitle>
+
+        <Container
+            supplementalClass={`permission_slider`}
+            mainAxisAlignment={"start"}
+            padding={["zero", "sm"]}>
+            <Container
+                width={"hug"}
+                {height}
+                direction={"vertical"}
+                overflow={"visible"}
+                padding={["md", "xxl", "md", "zero"]}>
+                <div class="track">
+                    <div class="progress" style={`height: ${percentFromIndex(currentStageIndex)}%`}>
+                    </div>
+                    {#each stages as _, i}
+                        {@const active = i <= currentStageIndex}
+                        {@const current = i === currentStageIndex}
+                        {@const inerror = current && error}
+                        <div style={`top: ${percentFromIndex(i)}%;`} class="marker-target">
+                            <div
+                                class:active
+                                class:current
+                                class:inerror
+                                class="marker"
+                                class:end={i === 0 || i === stages.length - 1}>
+                            </div>
+                        </div>
+                    {/each}
+                </div>
+            </Container>
+            <Container
+                width={"hug"}
+                {height}
+                direction={"vertical"}
+                padding={"zero"}
+                mainAxisAlignment={"spaceBetween"}>
+                {#each stages as stage, i}
+                    {@const active = i <= currentStageIndex}
+                    {@const current = i === currentStageIndex}
+                    {@const inerror = current && error}
+                    <div class="role_label" style={`top: ${percentFromIndex(i)}%;`}>
+                        <Container crossAxisAlignment={"center"} gap={"md"}>
+                            <Body
+                                align={"center"}
+                                colour={inerror
+                                    ? "error"
+                                    : active
+                                      ? "textPrimary"
+                                      : "textSecondary"}
+                                width={"hug"}>
+                                <Translatable
+                                    resourceKey={i18nKey(`${labelPrefix}${stage}`, labelValues)} />
+                            </Body>
+                            {#if inerror}
+                                <Close color={ColourVars.error} />
+                            {:else if active}
+                                <Check color={ColourVars.primary} />
+                            {/if}
+                        </Container>
+                    </div>
+                {/each}
+            </Container>
+        </Container>
+
+        {#if outcome && outcome !== "success"}
+            <ErrorMessage>
+                {#if outcome === "error"}
+                    <Translatable resourceKey={i18nKey("Failed to get deposit account")} />
+                {:else if outcome === "insufficientFunds"}
+                    <Translatable resourceKey={i18nKey("Insufficient funds")} />
+                {:else if outcome === "rateChanged"}
+                    <Translatable resourceKey={i18nKey("Rate changed")} />
+                {/if}
+            </ErrorMessage>
+        {/if}
+
+        <Container mainAxisAlignment={"end"}>
+            <Button
+                secondary={outcome !== undefined && outcome !== "success"}
+                onClick={outcome ? onFinished : undefined}
+                loading={outcome === undefined}>
+                {#if outcome === undefined}
+                    <Translatable resourceKey={i18nKey("In progress")} />
+                {:else if outcome === "success"}
+                    <Translatable resourceKey={i18nKey("Swap complete")} />
+                {:else}
+                    <Translatable resourceKey={i18nKey("Unable to complete swap")} />
+                {/if}
+                {#snippet icon(color)}
+                    <Robot {color} />
+                {/snippet}
+            </Button>
+        </Container>
+    </Container>
+</Sheet>
+
+<style lang="scss">
+    $speed: 200ms;
+
+    .role_label {
+        position: absolute;
+        all: unset;
+    }
+
+    .track,
+    .progress {
+        position: relative;
+        width: 2px;
+        height: 100%;
+        background-color: var(--button-disabled);
+        border-radius: var(--rad-circle);
+    }
+
+    .progress {
+        transition: width ease-in $speed;
+        background-color: var(--primary);
+    }
+
+    .marker-target {
+        position: absolute;
+        left: 1px; // half track height
+        width: 1.5rem;
+        height: 1.5rem;
+        border-radius: var(--rad-circle);
+        transform: translateX(-50%) translateY(-50%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .marker {
+            border: 1px solid transparent;
+            border-radius: var(--rad-circle);
+            background-color: var(--button-disabled);
+            transition:
+                background-color ease-in $speed,
+                width ease-in $speed,
+                height ease-in $speed;
+            width: 0.8rem;
+            height: 0.8rem;
+
+            &.active {
+                background-color: var(--primary);
+            }
+
+            &.current {
+                @include pulse();
+
+                &.inerror {
+                    background-color: var(--background-1);
+                    border-color: var(--error);
+                }
+            }
+        }
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/home/wallet/TokenCard.svelte b/frontend/app/src/mobile/features/wallet/TokenCard.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/wallet/TokenCard.svelte
rename to frontend/app/src/mobile/features/wallet/TokenCard.svelte
diff --git a/frontend/app/src/components_mobile/home/wallet/TokenPage.svelte b/frontend/app/src/mobile/features/wallet/TokenPage.svelte
similarity index 96%
rename from frontend/app/src/components_mobile/home/wallet/TokenPage.svelte
rename to frontend/app/src/mobile/features/wallet/TokenPage.svelte
index 6a2e5e2cc3..d86cb8e009 100644
--- a/frontend/app/src/components_mobile/home/wallet/TokenPage.svelte
+++ b/frontend/app/src/mobile/features/wallet/TokenPage.svelte
@@ -13,8 +13,8 @@
     import SwapVertical from "svelte-material-icons/SwapVertical.svelte";
     import TrayArrowDown from "svelte-material-icons/TrayArrowDown.svelte";
     import TrayArrowUp from "svelte-material-icons/TrayArrowUp.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
     import TokenCard from "./TokenCard.svelte";
     import Transactions from "./Transactions.svelte";
     import { TokenState } from "./walletState.svelte";
diff --git a/frontend/app/src/components_mobile/home/wallet/TokenSelector.svelte b/frontend/app/src/mobile/features/wallet/TokenSelector.svelte
similarity index 96%
rename from frontend/app/src/components_mobile/home/wallet/TokenSelector.svelte
rename to frontend/app/src/mobile/features/wallet/TokenSelector.svelte
index 77e44f084a..97246689e9 100644
--- a/frontend/app/src/components_mobile/home/wallet/TokenSelector.svelte
+++ b/frontend/app/src/mobile/features/wallet/TokenSelector.svelte
@@ -5,8 +5,8 @@
     import { cryptoTokensSorted } from "@client";
     import type { Snippet } from "svelte";
     import { _ } from "svelte-i18n";
-    import Translatable from "../../Translatable.svelte";
-    import NothingToSee from "../NothingToSee.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import NothingToSee from "@src/mobile/shared/NothingToSee.svelte";
     import SelectTokenItem from "./SelectTokenItem.svelte";
 
     interface Props {
diff --git a/frontend/app/src/components_mobile/home/wallet/TokenToggle.svelte b/frontend/app/src/mobile/features/wallet/TokenToggle.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/wallet/TokenToggle.svelte
rename to frontend/app/src/mobile/features/wallet/TokenToggle.svelte
diff --git a/frontend/app/src/components_mobile/home/wallet/Transactions.svelte b/frontend/app/src/mobile/features/wallet/Transactions.svelte
similarity index 97%
rename from frontend/app/src/components_mobile/home/wallet/Transactions.svelte
rename to frontend/app/src/mobile/features/wallet/Transactions.svelte
index 1e1e9b1246..265ad02a7c 100644
--- a/frontend/app/src/components_mobile/home/wallet/Transactions.svelte
+++ b/frontend/app/src/mobile/features/wallet/Transactions.svelte
@@ -20,10 +20,10 @@
     import Unknown from "svelte-material-icons/HelpCircleOutline.svelte";
     import Robot from "svelte-material-icons/RobotConfusedOutline.svelte";
     import TrayArrowUp from "svelte-material-icons/TrayArrowUp.svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import type { RemoteData as RD } from "../../../utils/remoteData";
-    import FancyLoader from "../../icons/FancyLoader.svelte";
-    import Translatable from "../../Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import type { RemoteData as RD } from "@src/utils/remoteData";
+    import FancyLoader from "@src/mobile/ui/icons/FancyLoader.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/components_mobile/home/wallet/Wallet.svelte b/frontend/app/src/mobile/features/wallet/Wallet.svelte
similarity index 94%
rename from frontend/app/src/components_mobile/home/wallet/Wallet.svelte
rename to frontend/app/src/mobile/features/wallet/Wallet.svelte
index 561e0cf112..a753bc92da 100644
--- a/frontend/app/src/components_mobile/home/wallet/Wallet.svelte
+++ b/frontend/app/src/mobile/features/wallet/Wallet.svelte
@@ -2,8 +2,8 @@
     import { Container, Logo, MenuItem, SectionHeader } from "component-lib";
     import { namedAccountsStore, OpenChat, publish } from "@client";
     import { getContext, onMount } from "svelte";
-    import { i18nKey } from "../../../i18n/i18n";
-    import Translatable from "../../Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
     import Accounts from "./Accounts.svelte";
     import OverallBalance from "./OverallBalance.svelte";
     import TokenToggle from "./TokenToggle.svelte";
diff --git a/frontend/app/src/components_mobile/home/wallet/WalletSettings.svelte b/frontend/app/src/mobile/features/wallet/WalletSettings.svelte
similarity index 97%
rename from frontend/app/src/components_mobile/home/wallet/WalletSettings.svelte
rename to frontend/app/src/mobile/features/wallet/WalletSettings.svelte
index 453176acfc..85b2d186fc 100644
--- a/frontend/app/src/components_mobile/home/wallet/WalletSettings.svelte
+++ b/frontend/app/src/mobile/features/wallet/WalletSettings.svelte
@@ -30,9 +30,9 @@
     import { _ } from "svelte-i18n";
     import Close from "svelte-material-icons/Close.svelte";
     import Lock from "svelte-material-icons/Lock.svelte";
-    import Setting from "../../Setting.svelte";
-    import Translatable from "../../Translatable.svelte";
-    import SlidingPageContent from "../SlidingPageContent.svelte";
+    import Setting from "@src/mobile/shared/Setting.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
     import SetPinNumberModal from "./SetPinNumberModal.svelte";
     import TokenSelector from "./TokenSelector.svelte";
 
diff --git a/frontend/app/src/components_mobile/home/wallet/WalletToken.svelte b/frontend/app/src/mobile/features/wallet/WalletToken.svelte
similarity index 98%
rename from frontend/app/src/components_mobile/home/wallet/WalletToken.svelte
rename to frontend/app/src/mobile/features/wallet/WalletToken.svelte
index cb45669de8..1ae5b5535b 100644
--- a/frontend/app/src/components_mobile/home/wallet/WalletToken.svelte
+++ b/frontend/app/src/mobile/features/wallet/WalletToken.svelte
@@ -15,7 +15,7 @@
     import HeartRemoveOutline from "svelte-material-icons/HeartRemoveOutline.svelte";
     import MenuRight from "svelte-material-icons/MenuRight.svelte";
     import Reload from "svelte-material-icons/Reload.svelte";
-    import Translatable from "../../Translatable.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
     import { TokenState, type ConversionToken } from "./walletState.svelte";
 
     const client = getContext<OpenChat>("client");
diff --git a/frontend/app/src/components_mobile/home/wallet/walletState.svelte.ts b/frontend/app/src/mobile/features/wallet/walletState.svelte.ts
similarity index 100%
rename from frontend/app/src/components_mobile/home/wallet/walletState.svelte.ts
rename to frontend/app/src/mobile/features/wallet/walletState.svelte.ts
diff --git a/frontend/app/src/mobile/shared/AccountInfo.svelte b/frontend/app/src/mobile/shared/AccountInfo.svelte
new file mode 100644
index 0000000000..4a0253e8b0
--- /dev/null
+++ b/frontend/app/src/mobile/shared/AccountInfo.svelte
@@ -0,0 +1,265 @@
+<script lang="ts">
+    import { BodySmall, ColourVars, Container, Row, type Padding } from "component-lib";
+    import {
+        BTC_SYMBOL,
+        CKBTC_SYMBOL,
+        cryptoLookup,
+        currentUserIdStore,
+        currentUserStore,
+        ICP_SYMBOL,
+        Lazy,
+        OpenChat,
+        type OneSecTransferFees,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { rtlStore } from "@src/stores/rtl";
+    import QRCode from "./QRCode.svelte";
+    import Translatable from "./Translatable.svelte";
+    import NetworkSelector from "./NetworkSelector.svelte";
+    import TruncatedAccount from "./TruncatedAccount.svelte";
+    import AlertCircleOutline from "svelte-material-icons/AlertCircleOutline.svelte";
+    import RobotConfusedOutline from "svelte-material-icons/RobotConfusedOutline.svelte";
+    import { Subtitle } from "component-lib";
+
+    interface Props {
+        ledger: string;
+        padding?: Padding;
+        background?: string;
+    }
+
+    let { ledger, padding = ["lg", "xl"], background = ColourVars.background1 }: Props = $props();
+
+    const client = getContext<OpenChat>("client");
+
+    let tokenDetails = $derived($cryptoLookup.get(ledger)!);
+    let selectedNetwork = $state<string>();
+    let isBtc = $derived(tokenDetails.symbol === BTC_SYMBOL);
+    let isBtcNetwork = $derived(selectedNetwork === BTC_SYMBOL);
+    let oneSecEnabled = $derived(
+        tokenDetails.oneSecEnabled && tokenDetails.evmContractAddresses.length > 0,
+    );
+    let isOneSecNetwork = $derived(oneSecEnabled && selectedNetwork !== ICP_SYMBOL);
+    let networks = $derived.by(() => {
+        if (isBtc) {
+            return [BTC_SYMBOL, CKBTC_SYMBOL];
+        } else if (oneSecEnabled) {
+            return client.oneSecGetNetworks(tokenDetails.symbol);
+        } else {
+            return [];
+        }
+    });
+    let btcAddress = $state<string>();
+    let oneSecAddress = $state<string>();
+
+    // Whenever the networks list changes, autoselect the first one
+    $effect(() => {
+        selectedNetwork = networks[0];
+    });
+
+    let account = $derived.by(() => {
+        if (tokenDetails.symbol === ICP_SYMBOL) {
+            return $currentUserStore.cryptoAccount;
+        } else if (isBtcNetwork) {
+            return btcAddress;
+        } else if (isOneSecNetwork) {
+            return oneSecAddress;
+        } else {
+            return $currentUserIdStore;
+        }
+    });
+
+    let error = $state();
+    $effect(() => {
+        if (account === undefined) {
+            if (isBtcNetwork) {
+                client
+                    .getBtcAddress()
+                    .then((addr) => (btcAddress = addr))
+                    .catch((e) => (error = e));
+            } else if (isOneSecNetwork) {
+                client
+                    .getOneSecAddress()
+                    .then((addr) => (oneSecAddress = addr))
+                    .catch((e) => (error = e));
+            }
+        }
+    });
+
+    let tokenName = $derived.by(() => {
+        if (isBtc) return selectedNetwork;
+        if (selectedNetwork !== undefined) {
+            return $rtlStore
+                ? `(${selectedNetwork}) ${tokenDetails.symbol}`
+                : `${tokenDetails.symbol} (${selectedNetwork})`;
+        }
+        return tokenDetails.symbol;
+    });
+
+    const btcDepositFeePromise = new Lazy(() =>
+        client
+            .getCkbtcMinterDepositInfo()
+            .then((depositInfo) => `~${client.formatTokens(depositInfo.depositFee, 8)}`),
+    );
+
+    const oneSecFeesPromise = new Lazy(() =>
+        client
+            .oneSecGetTransferFees()
+            // Filter to where source token equals destination token since we're dealing with cross-chain deposits
+            .then(
+                (fees) => (oneSecFees = fees.filter((f) => f.sourceToken === f.destinationToken)),
+            ),
+    );
+
+    let oneSecFees = $state<OneSecTransferFees[]>();
+    let oneSecFeesForToken = $derived.by(() => {
+        if (!isOneSecNetwork || oneSecFees === undefined) return undefined;
+        return oneSecFees.filter((f) => f.sourceToken === tokenDetails.symbol);
+    });
+    let oneSecProtocolFee = $derived.by(() => {
+        if (oneSecFeesForToken === undefined) return undefined;
+        return oneSecFeesForToken.find(
+            (f) => f.sourceChain === selectedNetwork && f.destinationChain === ICP_SYMBOL,
+        )?.protocolFeePercent;
+    });
+    let oneSecTransferFee = $derived.by(() => {
+        if (oneSecFeesForToken === undefined) return undefined;
+        return oneSecFeesForToken.find(
+            (f) => f.sourceChain === ICP_SYMBOL && f.destinationChain === selectedNetwork,
+        )?.latestTransferFee;
+    });
+    let oneSecTotalFee = $derived.by(() => {
+        if (oneSecProtocolFee === undefined || oneSecTransferFee === undefined) return undefined;
+        return `${oneSecProtocolFee}% + ~${client.formatTokens(
+            oneSecTransferFee,
+            tokenDetails.decimals,
+        )}`;
+    });
+</script>
+
+{#snippet fetchingDepositFee()}
+    <!-- TODO add loading spinner ? -->
+    <Subtitle colour={"textSecondary"}>
+        {$_("cryptoAccount.fetchingDepositFee")}
+    </Subtitle>
+{/snippet}
+
+{#snippet fetchingFeeError()}
+    <Subtitle colour={"error"}>
+        {$_("cryptoAccount.failedToFetchDepositFee")}
+    </Subtitle>
+    <RobotConfusedOutline color={ColourVars.error} size="1.25rem" />
+{/snippet}
+
+<!-- TODO open fee breakdown modal -->
+{#snippet displayFee(values: { amount: string; token: string })}
+    <Subtitle colour={"warning"}>
+        {$_("cryptoAccount.networkFee", { values })}
+    </Subtitle>
+    <AlertCircleOutline color={ColourVars.warning} size="1.25rem" />
+{/snippet}
+
+<Container gap={"xxs"} direction={"vertical"}>
+    <Container
+        borderRadius={["lg", "lg", "zero", "zero"]}
+        {background}
+        direction={"vertical"}
+        {padding}>
+        {#if account === undefined}
+            <div class="generating">
+                {#if error !== undefined}
+                    <div class="error-icon"></div>
+                {:else}
+                    <div class="spinner"></div>
+                {/if}
+            </div>
+        {:else}
+            <QRCode
+                fullWidthOnMobile
+                text={account}
+                size={"larger"}
+                logo={tokenDetails.logo}
+                border={false} />
+        {/if}
+    </Container>
+
+    {#if networks.length > 0 && selectedNetwork !== undefined}
+        <NetworkSelector {background} {networks} flatSelect={true} bind:selectedNetwork />
+    {/if}
+
+    {#if isBtcNetwork}
+        <Row {background} padding={["lg", "xl"]} crossAxisAlignment="center">
+            {#await btcDepositFeePromise.get()}
+                {@render fetchingDepositFee()}
+            {:then amount}
+                {@render displayFee({ amount, token: tokenDetails.symbol })}
+            {:catch}
+                {@render fetchingFeeError()}
+            {/await}
+        </Row>
+    {:else if isOneSecNetwork}
+        <Row {background} padding={["lg", "xl"]} crossAxisAlignment="center">
+            {#await oneSecFeesPromise.get()}
+                {@render fetchingDepositFee()}
+            {:then}
+                {#if oneSecTotalFee !== undefined}
+                    {@render displayFee({ amount: oneSecTotalFee, token: tokenDetails.symbol })}
+                {:else}
+                    {@render fetchingFeeError()}
+                {/if}
+            {:catch}
+                {@render fetchingFeeError()}
+            {/await}
+        </Row>
+    {/if}
+
+    <Container
+        {background}
+        direction={"vertical"}
+        padding={["lg", "xl"]}
+        crossAxisAlignment="center"
+        borderRadius={["zero", "zero", "lg", "lg"]}>
+        {#if account === undefined}
+            {#if error !== undefined}
+                <Subtitle colour={"error"}>
+                    {$_("cryptoAccount.failedToGenera4teAddress")}
+                </Subtitle>
+                <RobotConfusedOutline color={ColourVars.error} size="1.25rem" />
+            {:else}
+                <!-- TODO add spinner? -->
+                <Subtitle colour={"textSecondary"}>
+                    {$_("generating")}
+                </Subtitle>
+            {/if}
+        {:else}
+            <TruncatedAccount {account}>
+                <BodySmall colour={"textSecondary"} fontWeight={"bold"}>
+                    <Translatable
+                        resourceKey={i18nKey("tokenTransfer.yourAccount", { token: tokenName })} />
+                </BodySmall>
+            </TruncatedAccount>
+        {/if}
+    </Container>
+</Container>
+
+<style lang="scss">
+    .generating {
+        height: 298px;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .spinner {
+        @include loading-spinner(4rem, 2rem, var(--button-spinner), "/assets/spinner.svg");
+        flex: 0 0 toRem(24);
+    }
+
+    .error-icon {
+        background-image: url("/assets/dead-bot.svg");
+        height: 4rem;
+        width: 4rem;
+    }
+</style>
diff --git a/frontend/app/src/mobile/shared/AreYouSure.svelte b/frontend/app/src/mobile/shared/AreYouSure.svelte
new file mode 100644
index 0000000000..6d3424bf50
--- /dev/null
+++ b/frontend/app/src/mobile/shared/AreYouSure.svelte
@@ -0,0 +1,107 @@
+<script lang="ts">
+    import { Body, CommonButton, Container, Input, Sheet, Title } from "component-lib";
+    import type { ResourceKey } from "@client";
+    import { type Snippet } from "svelte";
+    import { _ } from "svelte-i18n";
+    import Check from "svelte-material-icons/Check.svelte";
+    import Close from "svelte-material-icons/Close.svelte";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import Translatable from "./Translatable.svelte";
+
+    interface Props {
+        message?: ResourceKey | undefined;
+        action: (yes: boolean) => Promise<void>;
+        dismiss?: () => void;
+        doubleCheck?: { challenge: ResourceKey; response: ResourceKey } | undefined;
+        title?: ResourceKey | undefined;
+        yesLabel?: ResourceKey | undefined;
+        noLabel?: ResourceKey | undefined;
+        children?: Snippet;
+    }
+
+    let {
+        message,
+        action,
+        dismiss,
+        doubleCheck,
+        title = i18nKey("areYouSure"),
+        yesLabel = i18nKey("yesPlease"),
+        noLabel = i18nKey("noThanks"),
+        children,
+    }: Props = $props();
+
+    let inProgress = $state(false);
+    let response = $state("");
+
+    let canConfirm = $derived(
+        !inProgress &&
+            (doubleCheck === undefined || response === interpolate($_, doubleCheck.response)),
+    );
+
+    function onClick(yes: boolean) {
+        if (yes) {
+            inProgress = true;
+        }
+
+        action(yes).finally(() => {
+            inProgress = false;
+        });
+    }
+</script>
+
+<!-- TODO look into logic for this component, how to distinguish most effectively
+ between dismissing, pressing no, and pressing yes? -->
+<Sheet onDismiss={dismiss}>
+    <Container height={"hug"} padding={"xl"} gap={"xl"} direction={"vertical"}>
+        {#if title !== undefined}
+            <Title fontWeight={"bold"}>
+                <Translatable resourceKey={title} />
+            </Title>
+        {/if}
+
+        {@render children?.()}
+
+        {#if message !== undefined}
+            <Body>
+                <Markdown inline={false} text={interpolate($_, message)} />
+            </Body>
+
+            {#if doubleCheck !== undefined}
+                <p class="challenge">
+                    <Markdown text={interpolate($_, doubleCheck.challenge)} />
+                </p>
+                <Input
+                    disabled={inProgress}
+                    bind:value={response}
+                    minlength={0}
+                    maxlength={200}
+                    countdown={false} />
+            {/if}
+        {/if}
+
+        <Container gap={"md"} crossAxisAlignment={"end"} mainAxisAlignment={"end"}>
+            <CommonButton disabled={inProgress} onClick={() => onClick(false)} size={"medium"}>
+                {#snippet icon(color, size)}
+                    <Close {color} {size} />
+                {/snippet}
+                {#if noLabel !== undefined}
+                    <Translatable resourceKey={noLabel} />
+                {/if}
+            </CommonButton>
+            <CommonButton
+                loading={inProgress}
+                disabled={!canConfirm}
+                mode={"active"}
+                onClick={() => onClick(true)}
+                size={"medium"}>
+                {#snippet icon(color, size)}
+                    <Check {color} {size} />
+                {/snippet}
+                {#if yesLabel !== undefined}
+                    <Translatable resourceKey={yesLabel} />
+                {/if}
+            </CommonButton>
+        </Container>
+    </Container>
+</Sheet>
diff --git a/frontend/app/src/components_mobile/home/BalanceWithRefresh.svelte b/frontend/app/src/mobile/shared/BalanceWithRefresh.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/BalanceWithRefresh.svelte
rename to frontend/app/src/mobile/shared/BalanceWithRefresh.svelte
diff --git a/frontend/app/src/mobile/shared/CryptoSelector.svelte b/frontend/app/src/mobile/shared/CryptoSelector.svelte
new file mode 100644
index 0000000000..f965ac8465
--- /dev/null
+++ b/frontend/app/src/mobile/shared/CryptoSelector.svelte
@@ -0,0 +1,111 @@
+<script lang="ts">
+    import { i18nKey } from "@src/i18n/i18n";
+    import { hideTokenBalances } from "@src/stores/settings";
+    import { Avatar, Body, BodySmall, ColourVars, Column, Row, type SizeMode } from "component-lib";
+    import type { EnhancedTokenDetails, OpenChat } from "@client";
+    import { enhancedCryptoLookup } from "@client";
+    import { getContext } from "svelte";
+    import ChevronDown from "svelte-material-icons/ChevronDown.svelte";
+    import Refresh from "svelte-material-icons/Refresh.svelte";
+    import TokenSelector from "@src/mobile/features/wallet/TokenSelector.svelte";
+    import { TokenState } from "@src/mobile/features/wallet/walletState.svelte";
+    import { getProxyAdjustedBlobUrl } from "@src/utils/media";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        width?: SizeMode;
+        ledger: string;
+        filter?: (details: EnhancedTokenDetails) => boolean;
+        onSelect?: (ledger: string, urlFormat: string) => void;
+        draftAmount?: bigint;
+        showRefresh?: boolean;
+    }
+
+    let {
+        ledger = $bindable(),
+        filter,
+        onSelect,
+        width = "fill",
+        draftAmount,
+        showRefresh = false,
+    }: Props = $props();
+    let token = $derived($enhancedCryptoLookup.get(ledger)!);
+    let showTokenSelector = $state(false);
+    let tokenState = $derived.by(() => {
+        const ts = new TokenState(token);
+        client.refreshAccountBalance(ledger);
+        return ts;
+    });
+
+    $effect(() => {
+        if (draftAmount !== undefined && tokenState !== undefined) {
+            tokenState.draftAmount = draftAmount;
+        }
+    });
+</script>
+
+{#if tokenState}
+    <Row crossAxisAlignment={"center"} gap={"sm"}>
+        <Row
+            {width}
+            background={ColourVars.textTertiary}
+            gap={"md"}
+            borderRadius={"circle"}
+            onClick={() => (showTokenSelector = true)}
+            mainAxisAlignment={"spaceBetween"}
+            crossAxisAlignment={"center"}
+            padding={["sm", "md"]}>
+            <Avatar url={getProxyAdjustedBlobUrl(tokenState.logo) ?? tokenState.logo}></Avatar>
+            <Column>
+                <Body width={"hug"} fontWeight={"bold"}>{tokenState.symbol}</Body>
+                <BodySmall
+                    colour={"textSecondary"}
+                    blur={$hideTokenBalances}
+                    align={"end"}
+                    width={"hug"}
+                    fontWeight={"bold"}>{tokenState.formattedTokenBalance}</BodySmall>
+            </Column>
+            <ChevronDown size={"1.5rem"} color={ColourVars.textSecondary} />
+        </Row>
+        {#if showRefresh}
+            <button
+                onclick={() => tokenState.refreshBalance(client)}
+                class="refresh"
+                class:refreshing={tokenState.refreshingBalance}>
+                <Refresh size={"1.5rem"} color={ColourVars.textPrimary} />
+            </button>
+        {/if}
+    </Row>
+{/if}
+
+{#if showTokenSelector}
+    <TokenSelector
+        selected={new Set(ledger)}
+        onSelect={(t) => {
+            ledger = t.ledger;
+            showTokenSelector = false;
+            onSelect?.(t.ledger, t.urlFormat);
+        }}
+        extraFilter={filter}
+        placeholder={i18nKey("Filter tokens...")}
+        onDismiss={() => (showTokenSelector = false)}
+        title={i18nKey("Select token")} />
+{/if}
+
+<style lang="scss">
+    .refresh {
+        all: unset;
+        border-radius: var(--rad-circle);
+        background-color: var(--background-2);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 3.625rem;
+        height: 3.625rem;
+
+        &.refreshing {
+            @include spin();
+        }
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/home/DiamondUpgradeBox.svelte b/frontend/app/src/mobile/shared/DiamondUpgradeBox.svelte
similarity index 93%
rename from frontend/app/src/components_mobile/home/DiamondUpgradeBox.svelte
rename to frontend/app/src/mobile/shared/DiamondUpgradeBox.svelte
index 06b4172309..60a8ae1640 100644
--- a/frontend/app/src/components_mobile/home/DiamondUpgradeBox.svelte
+++ b/frontend/app/src/mobile/shared/DiamondUpgradeBox.svelte
@@ -3,8 +3,8 @@
     import { disableDiamondPaymentFeature } from "@src/utils/features";
     import { publish, type ResourceKey } from "@client";
     import DiamondOutline from "svelte-material-icons/DiamondOutline.svelte";
-    import MulticolourText from "../MulticolourText.svelte";
-    import SparkleBox from "../SparkleBox.svelte";
+    import MulticolourText from "./MulticolourText.svelte";
+    import SparkleBox from "./SparkleBox.svelte";
 
     interface Props {
         message?: ResourceKey;
diff --git a/frontend/app/src/components_mobile/home/DurationSelector.svelte b/frontend/app/src/mobile/shared/DurationSelector.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/DurationSelector.svelte
rename to frontend/app/src/mobile/shared/DurationSelector.svelte
diff --git a/frontend/app/src/components_mobile/EditableAvatar.svelte b/frontend/app/src/mobile/shared/EditableAvatar.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/EditableAvatar.svelte
rename to frontend/app/src/mobile/shared/EditableAvatar.svelte
diff --git a/frontend/app/src/mobile/shared/EditableImageWrapper.svelte b/frontend/app/src/mobile/shared/EditableImageWrapper.svelte
new file mode 100644
index 0000000000..0aff73f163
--- /dev/null
+++ b/frontend/app/src/mobile/shared/EditableImageWrapper.svelte
@@ -0,0 +1,151 @@
+<script lang="ts">
+    import { Button, ColourVars, Column, Sheet, Subtitle } from "component-lib";
+    import type { Snippet } from "svelte";
+    import type { OnCropCompleteEvent } from "svelte-easy-crop";
+    import Cropper from "svelte-easy-crop";
+    import Crop from "svelte-material-icons/Crop.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "./Translatable.svelte";
+
+    type OnChoosePhoto = () => void;
+
+    interface Props {
+        image: string | null | undefined;
+        disabled?: boolean;
+        mode?: Mode;
+        onImageSelected: (args: { url: string; data: Uint8Array }) => void;
+        children: Snippet<[OnChoosePhoto, number, number]>;
+        classString?: string;
+    }
+
+    let {
+        image = $bindable(),
+        disabled = false,
+        mode = "avatar",
+        onImageSelected,
+        children,
+        classString,
+    }: Props = $props();
+
+    type Dimensions = { width: number; height: number };
+    type Mode = "banner" | "avatar" | "profile";
+    type CropShape = "round" | "rect";
+
+    let fileinput: HTMLInputElement;
+    let selectedImage: string | undefined = $state();
+    let originalImage = new Image();
+    let showModal = $state(false);
+    let cropData: OnCropCompleteEvent | undefined = undefined;
+
+    function getSaveDimensions(mode: Mode): Dimensions {
+        switch (mode) {
+            case "avatar":
+                return { width: 150, height: 150 };
+            case "banner":
+                return { width: 600, height: 300 };
+            case "profile":
+                return { width: 600, height: 300 };
+        }
+    }
+
+    export function addPhoto() {
+        if (!disabled) {
+            fileinput.click();
+        }
+    }
+
+    function onFileSelected(e: { currentTarget: HTMLInputElement }) {
+        if (e.currentTarget) {
+            const target = e.currentTarget as HTMLInputElement;
+            if (target.files) {
+                const image = target.files[0];
+                let reader = new FileReader();
+                reader.readAsDataURL(image);
+                reader.onload = (e) => {
+                    selectedImage = e?.target?.result as string;
+                    originalImage.src = selectedImage;
+                    showModal = true;
+                    fileinput.value = "";
+                };
+            }
+        }
+    }
+
+    function cropImage() {
+        if (!cropData || !originalImage) return;
+
+        const {
+            pixels: { x, y, width, height },
+        } = cropData;
+
+        const canvas: HTMLCanvasElement = document.createElement("canvas");
+        canvas.width = SAVE_DIMS.width;
+        canvas.height = SAVE_DIMS.height;
+        canvas
+            .getContext("2d")
+            ?.drawImage(
+                originalImage,
+                x,
+                y,
+                width,
+                height,
+                0,
+                0,
+                SAVE_DIMS.width,
+                SAVE_DIMS.height,
+            );
+
+        canvas.toBlob(async (blob: Blob | null) => {
+            if (blob) {
+                const array = await blob.arrayBuffer();
+                const data = new Uint8Array(array);
+                image = canvas.toDataURL("image/jpg");
+                showModal = false;
+                console.log("image size: ", data.length);
+                onImageSelected({ url: image, data });
+            }
+        }, "image/jpg");
+    }
+
+    function onCrop(ev: OnCropCompleteEvent): void {
+        cropData = ev;
+    }
+    let SAVE_DIMS = $derived(getSaveDimensions(mode));
+    let CROP_SHAPE = $derived(mode === "avatar" ? "round" : ("rect" as CropShape));
+    let elementWidth = $state(0);
+    let elementHeight = $derived(elementWidth / (SAVE_DIMS.width / SAVE_DIMS.height));
+    let aspect = $derived(mode === "avatar" ? 1 : SAVE_DIMS.width / SAVE_DIMS.height);
+</script>
+
+{#if showModal}
+    <Sheet onDismiss={() => (showModal = false)}>
+        <Column gap={"lg"} padding={"lg"}>
+            <Subtitle fontWeight={"bold"}>Crop image</Subtitle>
+            <Column backgroundColor={ColourVars.background1} height={{ size: "25rem" }}>
+                <Cropper
+                    image={selectedImage}
+                    oncropcomplete={onCrop}
+                    crop={{ x: 0, y: 0 }}
+                    {aspect}
+                    cropShape={CROP_SHAPE} />
+            </Column>
+            <Button onClick={cropImage}>
+                {#snippet icon(color)}
+                    <Crop {color}></Crop>
+                {/snippet}
+                <Translatable resourceKey={i18nKey("apply")} />
+            </Button>
+        </Column>
+    </Sheet>
+{/if}
+
+<input
+    hidden
+    type="file"
+    accept=".jpg, .jpeg, .png, .gif, .svg"
+    onchange={onFileSelected}
+    bind:this={fileinput} />
+
+<div class={`editable-image ${classString}`} bind:clientWidth={elementWidth}>
+    {@render children(addPhoto, elementWidth, elementHeight)}
+</div>
diff --git a/frontend/app/src/components_mobile/ErrorMessage.svelte b/frontend/app/src/mobile/shared/ErrorMessage.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/ErrorMessage.svelte
rename to frontend/app/src/mobile/shared/ErrorMessage.svelte
diff --git a/frontend/app/src/mobile/shared/FindUser.svelte b/frontend/app/src/mobile/shared/FindUser.svelte
new file mode 100644
index 0000000000..b6c510e4d2
--- /dev/null
+++ b/frontend/app/src/mobile/shared/FindUser.svelte
@@ -0,0 +1,155 @@
+<script lang="ts">
+    import { Body, Container, Label, Search } from "component-lib";
+    import {
+        allUsersStore,
+        compareChats,
+        serverDirectChatsStore,
+        type BotMatch,
+        type UserSummary,
+    } from "@client";
+    import type { Snippet } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import MatchingUser from "./MatchingUser.svelte";
+    import Translatable from "./Translatable.svelte";
+
+    type OnSelectUser = (user: UserSummary) => void;
+
+    interface Props {
+        userLookup: (searchTerm: string) => Promise<[UserSummary[], UserSummary[]]>;
+        placeholderKey?: string;
+        onSelectUser: OnSelectUser;
+        selected?: Snippet;
+        selectedUsers?: UserSummary[];
+        matchingUser?: Snippet<[UserSummary, OnSelectUser]>;
+        dmFilter?: (user: UserSummary) => boolean;
+    }
+
+    let {
+        userLookup,
+        placeholderKey = "searchForUsername",
+        onSelectUser,
+        selected,
+        selectedUsers = [],
+        matchingUser,
+        dmFilter,
+    }: Props = $props();
+
+    let searchTerm: string = $state("");
+    let communityMembers: UserSummary[] = $state([]);
+    let users: UserSummary[] = $state([]);
+    let searching: boolean = $state(false);
+    let selectedSet = $derived(new Set(selectedUsers.map((u) => u.userId)));
+
+    function onSelect(user: UserSummary | BotMatch) {
+        if (user.kind !== "bot_match") {
+            onSelectUser?.(user);
+        }
+    }
+
+    function searchUsers(value?: string) {
+        if (value === "" || value === undefined) {
+            users = [];
+            return;
+        }
+        searching = true;
+        userLookup(value)
+            .then((p) => {
+                communityMembers = p[0];
+                users = p[1];
+            })
+            .catch((_err) => toastStore.showFailureToast(i18nKey("userSearchFailed")))
+            .finally(() => (searching = false));
+    }
+
+    function clearFilter() {
+        users = [];
+        communityMembers = [];
+        searchTerm = "";
+    }
+
+    let dms = $derived(
+        [...$serverDirectChatsStore.values()]
+            .sort(compareChats)
+            .map((c) => $allUsersStore.get(c.them.userId))
+            .filter(
+                (u) =>
+                    u !== undefined && u.kind !== "bot" && (dmFilter === undefined || dmFilter(u)),
+            )
+            .slice(0, 30),
+    );
+</script>
+
+<Container gap={"lg"} direction={"vertical"}>
+    <Search
+        {searching}
+        id={"search_component"}
+        onSearch={(v) => searchUsers(v)}
+        onClear={clearFilter}
+        placeholder={$_(placeholderKey)}
+        bind:value={searchTerm} />
+
+    {@render selected?.()}
+</Container>
+
+{#snippet match(user: UserSummary)}
+    <MatchingUser checked={selectedSet.has(user.userId)} {searchTerm} {user} {onSelect} />
+{/snippet}
+
+{#if communityMembers?.length > 0 || users?.length > 0}
+    <Container gap={"md"} padding={["zero", "md"]} direction={"vertical"}>
+        <Body fontWeight={"bold"}>
+            <Translatable resourceKey={i18nKey("Search results")}></Translatable>
+        </Body>
+
+        {#if communityMembers?.length > 0}
+            <Label colour={"textSecondary"}>
+                <Translatable resourceKey={i18nKey("communityMembers")} />
+            </Label>
+            <Container direction={"vertical"}>
+                {#each communityMembers as user (user.userId)}
+                    {#if matchingUser !== undefined}
+                        {@render matchingUser(user, onSelectUser)}
+                    {:else}
+                        {@render match(user)}
+                    {/if}
+                {/each}
+            </Container>
+        {/if}
+        {#if communityMembers?.length > 0 && users?.length > 0}
+            <Label colour={"textSecondary"}>
+                <Translatable resourceKey={i18nKey("otherUsers")} />
+            </Label>
+        {/if}
+        <Container direction={"vertical"}>
+            {#each users as user (user.userId)}
+                {#if matchingUser !== undefined}
+                    {@render matchingUser(user, onSelectUser)}
+                {:else}
+                    {@render match(user)}
+                {/if}
+            {/each}
+        </Container>
+    </Container>
+{/if}
+
+{#if dms.length > 0}
+    <Container gap={"md"} padding={["zero", "md"]} direction={"vertical"}>
+        <Body fontWeight={"bold"}>
+            <Translatable resourceKey={i18nKey("Frequently contacted on OpenChat")}></Translatable>
+        </Body>
+
+        <Container direction={"vertical"}>
+            {#each dms as user (user?.userId)}
+                {#if user}
+                    {#if matchingUser !== undefined}
+                        {@render matchingUser(user, onSelectUser)}
+                    {:else}
+                        {@render match(user)}
+                    {/if}
+                {/if}
+            {/each}
+        </Container>
+    </Container>
+{/if}
diff --git a/frontend/app/src/mobile/shared/HumanityConfirmation.svelte b/frontend/app/src/mobile/shared/HumanityConfirmation.svelte
new file mode 100644
index 0000000000..b926490dd8
--- /dev/null
+++ b/frontend/app/src/mobile/shared/HumanityConfirmation.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+    import { Body, BodySmall, ColourVars, Container, Subtitle, Switch } from "component-lib";
+    import { _ } from "svelte-i18n";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import Translatable from "./Translatable.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+
+    interface Props {
+        confirmed: boolean;
+    }
+
+    let { confirmed = $bindable() }: Props = $props();
+</script>
+
+<Container gap={"lg"} direction={"vertical"}>
+    <Subtitle fontWeight={"bold"} colour={"primary"}>
+        <Translatable resourceKey={i18nKey("IMPORTANT! Before you proceed")}></Translatable>
+    </Subtitle>
+    <Body fontWeight={"bold"}>
+        <Markdown text={interpolate($_, i18nKey("access.doYouHaveUniquePersonCredential"))} />
+    </Body>
+
+    <BodySmall>
+        <Markdown text={interpolate($_, i18nKey("access.uniquePersonInfo2"))} />
+    </BodySmall>
+
+    <BodySmall>
+        <Translatable resourceKey={i18nKey("access.uniquePersonInfo3")}></Translatable>
+    </BodySmall>
+
+    <Container
+        onClick={() => (confirmed = !confirmed)}
+        background={ColourVars.background2}
+        crossAxisAlignment={"center"}
+        borderRadius={"md"}
+        gap={"lg"}
+        padding={"lg"}>
+        <BodySmall>
+            <Translatable
+                resourceKey={i18nKey("I have verified my unique personhood with DecideAI")}>
+            </Translatable>
+        </BodySmall>
+        <Switch bind:checked={confirmed}></Switch>
+    </Container>
+</Container>
diff --git a/frontend/app/src/components_mobile/home/LanguageSelector.svelte b/frontend/app/src/mobile/shared/LanguageSelector.svelte
similarity index 97%
rename from frontend/app/src/components_mobile/home/LanguageSelector.svelte
rename to frontend/app/src/mobile/shared/LanguageSelector.svelte
index a790770e82..3403786411 100644
--- a/frontend/app/src/components_mobile/home/LanguageSelector.svelte
+++ b/frontend/app/src/mobile/shared/LanguageSelector.svelte
@@ -3,7 +3,7 @@
     import { Container, Option, Search, Select, Subtitle } from "component-lib";
     import type { Snippet } from "svelte";
     import { _ } from "svelte-i18n";
-    import Translatable from "../Translatable.svelte";
+    import Translatable from "./Translatable.svelte";
 
     interface Props {
         selected?: { name: string; code: string };
diff --git a/frontend/app/src/components_mobile/Legend.svelte b/frontend/app/src/mobile/shared/Legend.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/Legend.svelte
rename to frontend/app/src/mobile/shared/Legend.svelte
diff --git a/frontend/app/src/components_mobile/LinkedCard.svelte b/frontend/app/src/mobile/shared/LinkedCard.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/LinkedCard.svelte
rename to frontend/app/src/mobile/shared/LinkedCard.svelte
diff --git a/frontend/app/src/mobile/shared/MatchingUser.svelte b/frontend/app/src/mobile/shared/MatchingUser.svelte
new file mode 100644
index 0000000000..5abcad8296
--- /dev/null
+++ b/frontend/app/src/mobile/shared/MatchingUser.svelte
@@ -0,0 +1,84 @@
+<script lang="ts">
+    import { Avatar, BodySmall, ColourVars, Container } from "component-lib";
+    import type { BotMatch, DiamondMembershipStatus, OpenChat, UserSummary } from "@client";
+    import { currentUserIdStore } from "@client";
+    import { getContext } from "svelte";
+    import Check from "svelte-material-icons/Check.svelte";
+    import FilteredUsername from "@src/ui/FilteredUsername.svelte";
+    import Badges from "@src/mobile/features/profile/Badges.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    type Match = {
+        avatarUrl: string;
+        name: string;
+        unique: boolean;
+        diamond: DiamondMembershipStatus["kind"];
+        streak: number;
+        username: string;
+        chitEarned: number;
+    };
+
+    interface Props {
+        searchTerm?: string;
+        user: UserSummary | BotMatch;
+        onSelect: (user: UserSummary | BotMatch) => void;
+        checked?: boolean;
+    }
+
+    let { searchTerm, user, onSelect, checked = false }: Props = $props();
+
+    let match = $derived(normalise());
+
+    function normalise(): Match {
+        switch (user.kind) {
+            case "bot_match":
+                return {
+                    avatarUrl: user.avatarUrl ?? "/assets/bot_avatar.svg",
+                    name: user.name,
+                    unique: false,
+                    diamond: "inactive",
+                    streak: 0,
+                    username: user.name,
+                    chitEarned: 0,
+                };
+            default:
+                return {
+                    avatarUrl: client.userAvatarUrl(user),
+                    name: user.displayName ?? user.username,
+                    unique: user.isUniquePerson,
+                    diamond: user.diamondStatus,
+                    streak: user.streak,
+                    username: `@${user.username}`,
+                    chitEarned: user.totalChitEarned,
+                };
+        }
+    }
+</script>
+
+<Container
+    padding={["sm", "zero"]}
+    crossAxisAlignment={"center"}
+    gap={"lg"}
+    onClick={() => onSelect(user)}>
+    <Avatar size={"md"} url={match.avatarUrl}></Avatar>
+    <Container direction={"vertical"}>
+        <Container crossAxisAlignment={"center"} gap={"xs"}>
+            <FilteredUsername
+                {searchTerm}
+                me={user.kind === "user" && user.userId === $currentUserIdStore}
+                username={match.name} />
+            <Badges
+                uniquePerson={match.unique}
+                diamondStatus={match.diamond}
+                chitEarned={match.chitEarned}
+                streak={match.streak} />
+        </Container>
+        <BodySmall colour={"textSecondary"}>
+            <FilteredUsername {searchTerm} username={match.username} />
+        </BodySmall>
+    </Container>
+    {#if checked}
+        <Check size={"1.4rem"} color={ColourVars.primary} />
+    {/if}
+</Container>
diff --git a/frontend/app/src/components_mobile/home/MentionPickerLogic.svelte b/frontend/app/src/mobile/shared/MentionPickerLogic.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/MentionPickerLogic.svelte
rename to frontend/app/src/mobile/shared/MentionPickerLogic.svelte
diff --git a/frontend/app/src/components_mobile/MulticolourText.svelte b/frontend/app/src/mobile/shared/MulticolourText.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/MulticolourText.svelte
rename to frontend/app/src/mobile/shared/MulticolourText.svelte
diff --git a/frontend/app/src/mobile/shared/NetworkSelector.svelte b/frontend/app/src/mobile/shared/NetworkSelector.svelte
new file mode 100644
index 0000000000..b57623a2b1
--- /dev/null
+++ b/frontend/app/src/mobile/shared/NetworkSelector.svelte
@@ -0,0 +1,138 @@
+<script lang="ts">
+    import { i18nKey } from "@src/i18n/i18n";
+    import { Body, BodySmall, ColourVars, Container, Sheet, Subtitle, Select } from "component-lib";
+    import ChevronRight from "svelte-material-icons/ChevronRight.svelte";
+    import ChevronDown from "svelte-material-icons/ChevronDown.svelte";
+    import Translatable from "./Translatable.svelte";
+
+    type Props = {
+        networks: string[];
+        selectedNetwork?: string;
+        background?: string;
+        flatSelect?: boolean;
+    };
+
+    type NetworkInfo = {
+        name: string;
+        info: string;
+    };
+
+    const networkInfo: Record<string, NetworkInfo> = {
+        arbitrum: {
+            name: "Arbitrum network",
+            info: "This is some information about what the Arbitrum network is all about and what it means. Blah blah blah and there we are.",
+        },
+        base: {
+            name: "Base network",
+            info: "This is some information about what the Base network is all about and what it means. Blah blah blah and there we are.",
+        },
+        btc: {
+            name: "BTC network",
+            info: "This is some information about what the BTC network is all about and what it means. Blah blah blah and there we are.",
+        },
+        ckbtc: {
+            name: "ckBTC network",
+            info: "This is some information about what the ckBTC network is all about and what it means. Blah blah blah and there we are.",
+        },
+        icp: {
+            name: "ICP network",
+            info: "Transfers USDT as a native token on the Internet Computer, enabling fast, low-cost transactions directly on-chain without gas fees from external networks.",
+        },
+        ethereum: {
+            name: "Ethereum network",
+            info: "Transfers USDT as an ERC-20 token on Ethereum, offering wide compatibility with wallets and exchanges but typically higher gas fees and slower confirmations.",
+        },
+    };
+
+    let {
+        networks,
+        selectedNetwork = $bindable(),
+        background,
+        flatSelect = false,
+    }: Props = $props();
+
+    let showSheet = $state(false);
+</script>
+
+{#snippet selectOptions(onSelect: (val: string) => void)}
+    <Container
+        onClick={(e) => e?.stopPropagation()}
+        height={{ size: "100%" }}
+        supplementalClass={"language_options"}
+        padding={["lg", "xl", "huge"]}
+        gap={"xxl"}
+        direction={"vertical"}>
+        <Subtitle fontWeight={"bold"}>
+            <Translatable resourceKey={i18nKey("Select token network")}></Translatable>
+        </Subtitle>
+
+        <Container gap={"xxl"} supplementalClass={"binding_options"} direction={"vertical"}>
+            {#each networks as network}
+                {@const { info, name } = networkInfo[network.toLowerCase()]}
+                <Container
+                    onClick={() => onSelect(network)}
+                    gap={"sm"}
+                    crossAxisAlignment={"center"}
+                    direction={"vertical"}>
+                    <Container>
+                        <Body fontWeight={"bold"} colour={"primary"}>{name}</Body>
+                        <ChevronRight color={ColourVars.primary} />
+                    </Container>
+                    <Body colour={"textSecondary"}>
+                        {info}
+                    </Body>
+                </Container>
+            {/each}
+        </Container>
+    </Container>
+{/snippet}
+
+{#if flatSelect}
+    <Container
+        {background}
+        padding={["lg", "xl"]}
+        direction="horizontal"
+        crossAxisAlignment="center">
+        <Container
+            direction="vertical"
+            width="fill"
+            gap="xs"
+            onClick={() => {
+                showSheet = true;
+            }}>
+            <BodySmall colour={"textSecondary"} fontWeight={"bold"}>
+                <Translatable resourceKey={i18nKey("tokenTransfer.selectTransferNetwork")} />
+            </BodySmall>
+            <Container crossAxisAlignment="end" gap="sm">
+                <Subtitle width="hug" fontWeight="bold">{selectedNetwork}</Subtitle>
+            </Container>
+        </Container>
+        <ChevronDown size="1.25rem" color={ColourVars.primary} />
+    </Container>
+
+    {#if showSheet}
+        <Sheet
+            onDismiss={() => {
+                showSheet = false;
+            }}>
+            {@render selectOptions((val) => {
+                selectedNetwork = val;
+                showSheet = false;
+            })}
+        </Sheet>
+    {/if}
+{:else}
+    <Select
+        onSelect={(val) => (selectedNetwork = val)}
+        placeholder={"Token networks"}
+        value={selectedNetwork}
+        {selectOptions}>
+        {#snippet subtext()}
+            <Translatable resourceKey={i18nKey("Select your token transfer network")}
+            ></Translatable>
+        {/snippet}
+        {#snippet selectedValue(val)}
+            {val}
+        {/snippet}
+    </Select>
+{/if}
diff --git a/frontend/app/src/components_mobile/home/NothingToSee.svelte b/frontend/app/src/mobile/shared/NothingToSee.svelte
similarity index 97%
rename from frontend/app/src/components_mobile/home/NothingToSee.svelte
rename to frontend/app/src/mobile/shared/NothingToSee.svelte
index 5816fece51..a3b965fbcb 100644
--- a/frontend/app/src/components_mobile/home/NothingToSee.svelte
+++ b/frontend/app/src/mobile/shared/NothingToSee.svelte
@@ -11,7 +11,7 @@
     } from "component-lib";
     import type { Snippet } from "svelte";
     import Robot from "svelte-material-icons/RobotExcitedOutline.svelte";
-    import Translatable from "../Translatable.svelte";
+    import Translatable from "./Translatable.svelte";
 
     interface ButtonProps {
         onClick: () => void;
diff --git a/frontend/app/src/components_mobile/PremiumItemPayment.svelte b/frontend/app/src/mobile/shared/PremiumItemPayment.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/PremiumItemPayment.svelte
rename to frontend/app/src/mobile/shared/PremiumItemPayment.svelte
diff --git a/frontend/app/src/mobile/shared/Progress.svelte b/frontend/app/src/mobile/shared/Progress.svelte
new file mode 100644
index 0000000000..0655706d3d
--- /dev/null
+++ b/frontend/app/src/mobile/shared/Progress.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+    import { ColourVars } from "component-lib";
+    import type { Snippet } from "svelte";
+    import { rtlStore } from "@src/stores/rtl";
+
+    interface Props {
+        percent: number;
+        size?: string;
+        children?: Snippet;
+        colour?: string;
+    }
+
+    let { percent, size = "40px", children, colour = ColourVars.primary }: Props = $props();
+</script>
+
+<div class="bar" style={`--size: ${size}`}>
+    <span
+        class="meter"
+        class:rtl={$rtlStore}
+        style={`width: ${percent}%; background-color: ${colour};}`}></span>
+    <div class="label">
+        {@render children?.()}
+    </div>
+</div>
+
+<style lang="scss">
+    .bar {
+        width: 100%;
+        height: var(--size);
+        position: relative;
+        background-color: var(--text-tertiary);
+        border-radius: var(--rad-circle);
+        overflow: hidden;
+    }
+
+    .meter {
+        background-color: var(--primary);
+        border-radius: var(--rad-circle);
+        width: 0;
+        transition: width 300ms;
+        display: block;
+        height: 100%;
+
+        position: absolute;
+        left: 0;
+        top: 0;
+
+        &.rtl {
+            left: unset;
+            right: 0;
+        }
+    }
+
+    .label {
+        display: flex;
+        align-items: center;
+        height: 100%;
+        padding: 0 $sp4;
+        position: relative;
+        @include ellipsis();
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/QRCode.svelte b/frontend/app/src/mobile/shared/QRCode.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/QRCode.svelte
rename to frontend/app/src/mobile/shared/QRCode.svelte
diff --git a/frontend/app/src/components_mobile/Setting.svelte b/frontend/app/src/mobile/shared/Setting.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/Setting.svelte
rename to frontend/app/src/mobile/shared/Setting.svelte
diff --git a/frontend/app/src/mobile/shared/SingleUserSelector.svelte b/frontend/app/src/mobile/shared/SingleUserSelector.svelte
new file mode 100644
index 0000000000..46739f2650
--- /dev/null
+++ b/frontend/app/src/mobile/shared/SingleUserSelector.svelte
@@ -0,0 +1,88 @@
+<script lang="ts">
+    import { interpolate } from "@src/i18n/i18n";
+    import { Container, Option, Search, Select, Subtitle } from "component-lib";
+    import { i18nKey, type UserOrUserGroup, type UserSummary } from "@client";
+    import { type Snippet } from "svelte";
+    import { _ } from "svelte-i18n";
+    import Translatable from "./Translatable.svelte";
+    import MentionPickerLogic from "./MentionPickerLogic.svelte";
+    import User from "./User.svelte";
+
+    interface Props {
+        selectedReceiver?: UserOrUserGroup | undefined;
+        placeholder?: string;
+        mentionSelf?: boolean;
+        onUserSelected?: (user: UserSummary) => void;
+        subtext?: Snippet;
+    }
+
+    let {
+        selectedReceiver = $bindable(undefined),
+        placeholder = interpolate($_, i18nKey("tokenTransfer.chooseReceiver")),
+        mentionSelf = false,
+        onUserSelected,
+        subtext,
+    }: Props = $props();
+
+    let searching = $state(false);
+    let searchTerm = $state<string>();
+
+    function selectReceiver(userOrGroup: UserOrUserGroup) {
+        selectedReceiver = userOrGroup;
+        searchTerm = undefined;
+        if (userOrGroup.kind === "user") {
+            onUserSelected?.(userOrGroup);
+        }
+    }
+</script>
+
+{#snippet match(user: UserOrUserGroup)}
+    {#if user.kind === "user"}
+        <User profile={false} {searchTerm} onClick={() => selectReceiver(user)} {user} />
+    {/if}
+{/snippet}
+
+<Select {subtext} onSelect={selectReceiver} {placeholder} value={selectedReceiver}>
+    {#snippet selectedValue(val)}
+        {#if val.kind === "user"}
+            @{val.username}
+        {/if}
+    {/snippet}
+    {#snippet selectOptions(onSelect)}
+        <MentionPickerLogic prefix={searchTerm} {mentionSelf} onMention={onSelect}>
+            {#snippet children(userOrGroupKey, mention, filtered)}
+                <Container
+                    onClick={(e) => e?.stopPropagation()}
+                    height={{ size: "100%" }}
+                    supplementalClass={"language_options"}
+                    padding={"lg"}
+                    gap={"lg"}
+                    direction={"vertical"}>
+                    <Subtitle fontWeight={"bold"}>
+                        <Translatable resourceKey={i18nKey("Select user")}></Translatable>
+                    </Subtitle>
+
+                    <Search
+                        {searching}
+                        id={"search_component"}
+                        placeholder={$_("search")}
+                        bind:value={searchTerm} />
+
+                    <Container direction={"vertical"}>
+                        {#each filtered as user (userOrGroupKey(user))}
+                            {#if user}
+                                <Option
+                                    padding={["sm", "md", "sm", "sm"]}
+                                    value={user}
+                                    onClick={mention}
+                                    selected={false}>
+                                    {@render match(user)}
+                                </Option>
+                            {/if}
+                        {/each}
+                    </Container>
+                </Container>
+            {/snippet}
+        </MentionPickerLogic>
+    {/snippet}
+</Select>
diff --git a/frontend/app/src/components_mobile/home/SlidingPageContent.svelte b/frontend/app/src/mobile/shared/SlidingPageContent.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/SlidingPageContent.svelte
rename to frontend/app/src/mobile/shared/SlidingPageContent.svelte
diff --git a/frontend/app/src/components_mobile/home/SlidingPageHeader.svelte b/frontend/app/src/mobile/shared/SlidingPageHeader.svelte
similarity index 93%
rename from frontend/app/src/components_mobile/home/SlidingPageHeader.svelte
rename to frontend/app/src/mobile/shared/SlidingPageHeader.svelte
index 2bc5085371..dbae42e403 100644
--- a/frontend/app/src/components_mobile/home/SlidingPageHeader.svelte
+++ b/frontend/app/src/mobile/shared/SlidingPageHeader.svelte
@@ -2,7 +2,7 @@
     import { SectionHeader } from "component-lib";
     import { publish, type ResourceKey } from "@client";
     import type { Snippet } from "svelte";
-    import Translatable from "../Translatable.svelte";
+    import Translatable from "./Translatable.svelte";
 
     interface Props {
         titleKey: ResourceKey;
diff --git a/frontend/app/src/components_mobile/SparkleBox.svelte b/frontend/app/src/mobile/shared/SparkleBox.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/SparkleBox.svelte
rename to frontend/app/src/mobile/shared/SparkleBox.svelte
diff --git a/frontend/app/src/components_mobile/SparkleBoxOutline.svelte b/frontend/app/src/mobile/shared/SparkleBoxOutline.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/SparkleBoxOutline.svelte
rename to frontend/app/src/mobile/shared/SparkleBoxOutline.svelte
diff --git a/frontend/app/src/mobile/shared/Stats.svelte b/frontend/app/src/mobile/shared/Stats.svelte
new file mode 100644
index 0000000000..c0287fa059
--- /dev/null
+++ b/frontend/app/src/mobile/shared/Stats.svelte
@@ -0,0 +1,351 @@
+<script lang="ts">
+    import { Body, BodySmall, ColourVars, Container, Subtitle } from "component-lib";
+    import type { Metrics, OpenChat } from "@client";
+    import { minutesOnlineStore } from "@client";
+    import { getContext, onMount } from "svelte";
+    import Flag from "svelte-material-icons/Flag.svelte";
+    import { cubicOut } from "svelte/easing";
+    import { Tween } from "svelte/motion";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "./Translatable.svelte";
+
+    const client = getContext<OpenChat>("client");
+    interface Props {
+        stats: Metrics;
+        showReported?: boolean;
+    }
+
+    let { stats, showReported = false }: Props = $props();
+
+    const tweenOptions = {
+        duration: 600,
+        easing: cubicOut,
+    };
+    let hoveredIndex: number | undefined = $state();
+    let rendered = $state(false);
+    let previousStats: Metrics | undefined = $state(undefined);
+    let totalMessages = $state(0);
+    let textPerc = new Tween(12.5, tweenOptions);
+    let imagePerc = new Tween(12.5, tweenOptions);
+    let videoPerc = new Tween(12.5, tweenOptions);
+    let audioPerc = new Tween(12.5, tweenOptions);
+    let filePerc = new Tween(12.5, tweenOptions);
+    let pollPerc = new Tween(12.5, tweenOptions);
+    let cryptoPerc = new Tween(12.5, tweenOptions);
+    let giphyPerc = new Tween(12.5, tweenOptions);
+
+    function percToDegree(perc: number): number {
+        return (perc / 100) * 360;
+    }
+
+    onMount(() => {
+        window.setTimeout(() => (rendered = true), 600);
+    });
+
+    function slice(val: number, tween: Tween<number>) {
+        const perc = totalMessages > 0 ? (val / totalMessages) * 100 : 12.5;
+        tween.set(0, { duration: 0 });
+        tween.target = perc;
+    }
+
+    const circum = 471.24;
+
+    function sumSlice(from: number, to: number): number {
+        return percentages.slice(from, to).reduce((total, n) => total + percToDegree(n), 0);
+    }
+
+    $effect(() => {
+        if (previousStats === undefined || !client.metricsEqual(stats, previousStats)) {
+            totalMessages =
+                stats.textMessages +
+                stats.imageMessages +
+                stats.videoMessages +
+                stats.audioMessages +
+                stats.fileMessages +
+                stats.polls +
+                stats.cryptoMessages +
+                stats.giphyMessages;
+
+            slice(stats.textMessages, textPerc);
+            slice(stats.imageMessages, imagePerc);
+            slice(stats.videoMessages, videoPerc);
+            slice(stats.audioMessages, audioPerc);
+            slice(stats.fileMessages, filePerc);
+            slice(stats.polls, pollPerc);
+            slice(stats.cryptoMessages, cryptoPerc);
+            slice(stats.giphyMessages, giphyPerc);
+            previousStats = stats;
+        }
+    });
+    let percentages = $derived([
+        textPerc.current,
+        imagePerc.current,
+        videoPerc.current,
+        audioPerc.current,
+        filePerc.current,
+        pollPerc.current,
+        cryptoPerc.current,
+        giphyPerc.current,
+    ]);
+    let data = $derived([
+        {
+            cls: "text",
+            perc: textPerc.current,
+            rotate: 0,
+        },
+        {
+            cls: "image",
+            perc: imagePerc.current,
+            rotate: sumSlice(0, 1),
+        },
+        {
+            cls: "video",
+            perc: videoPerc.current,
+            rotate: sumSlice(0, 2),
+        },
+        {
+            cls: "audio",
+            perc: audioPerc.current,
+            rotate: sumSlice(0, 3),
+        },
+        {
+            cls: "file",
+            perc: filePerc.current,
+            rotate: sumSlice(0, 4),
+        },
+        {
+            cls: "poll",
+            perc: pollPerc.current,
+            rotate: sumSlice(0, 5),
+        },
+        {
+            cls: "crypto",
+            perc: cryptoPerc.current,
+            rotate: sumSlice(0, 6),
+        },
+        {
+            cls: "giphy",
+            perc: giphyPerc.current,
+            rotate: sumSlice(0, 7),
+        },
+    ]);
+</script>
+
+{#snippet mediaStat(n: number, resourceKey: string, cls?: string)}
+    <Container crossAxisAlignment={"center"} gap={"sm"}>
+        <div class={`legend ${cls} key`}></div>
+        <div class={`legend ${cls}`}>{n.toLocaleString()}</div>
+        <Body width={"hug"}>
+            <Translatable resourceKey={i18nKey(resourceKey)} />
+        </Body>
+    </Container>
+{/snippet}
+
+<Container direction={"vertical"} gap={"xxl"} crossAxisAlignment={"center"}>
+    <svg class:rendered class="pie" viewBox="0 0 320 320">
+        <clipPath id="hollow">
+            <path
+                d="M 160 160 m -160 0 a 160 160 0 1 0 320 0 a 160 160 0 1 0 -320 0 Z M 160 160 m -100 0 a 100 100 0 0 1 200 0 a 100 100 0 0 1 -200 0 Z"
+                style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);" />
+        </clipPath>
+
+        <circle class="background" cx={160} cy={160} r={150} clip-path="url(#hollow)" />
+
+        {#each data as slice, i}
+            <circle
+                role="presentation"
+                onmouseenter={(_) => (hoveredIndex = i)}
+                onmouseleave={(_) => (hoveredIndex = undefined)}
+                class={`slice ${slice.cls}`}
+                cx={160}
+                cy={160}
+                r={75}
+                clip-path="url(#hollow)"
+                stroke-dasharray={`${(slice.perc * circum) / 100} ${circum}`}
+                transform={`rotate(${-90 + slice.rotate}) ${
+                    i === hoveredIndex ? "scale(1.05)" : ""
+                }`}>
+                <title>{`${slice.perc.toFixed(2)}%`}</title>
+            </circle>
+        {/each}
+    </svg>
+
+    <Container
+        supplementalClass={"stats_online_summary"}
+        crossAxisAlignment={"center"}
+        direction={"vertical"}>
+        <Container mainAxisAlignment={"center"} gap={"xs"}>
+            <Body colour={"primary"} width={"hug"} fontWeight={"bold"}
+                >{$minutesOnlineStore.minutesOnlineThisMonth.toLocaleString()}</Body>
+            <Body width={"hug"} fontWeight={"bold"}>min</Body>
+        </Container>
+        <Body align={"center"}>
+            <Translatable resourceKey={i18nKey("online this month")}></Translatable>
+        </Body>
+        <Container mainAxisAlignment={"center"} gap={"xs"}>
+            <BodySmall colour={"textSecondary"} width={"hug"} fontWeight={"bold"}
+                >{$minutesOnlineStore.minutesOnlineLastMonth.toLocaleString()}</BodySmall>
+            <BodySmall colour={"textSecondary"} width={"hug"} fontWeight={"bold"}
+                >previous month</BodySmall>
+        </Container>
+    </Container>
+
+    <Container gap={"lg"}>
+        <Container gap={"md"} direction={"vertical"}>
+            {@render mediaStat(stats.textMessages, "stats.textMessages", "text")}
+            {@render mediaStat(stats.videoMessages, "stats.videoMessages", "video")}
+            {@render mediaStat(stats.fileMessages, "stats.fileMessages", "file")}
+            {@render mediaStat(stats.cryptoMessages, "stats.cryptoTransfers", "crypto")}
+            {@render mediaStat(stats.pollVotes, "stats.pollVotes")}
+            {@render mediaStat(stats.reactions, "stats.reactions")}
+        </Container>
+        <Container gap={"md"} direction={"vertical"}>
+            {@render mediaStat(stats.imageMessages, "stats.imageMessages", "image")}
+            {@render mediaStat(stats.audioMessages, "stats.audioMessages", "audio")}
+            {@render mediaStat(stats.polls, "stats.pollMessages", "poll")}
+            {@render mediaStat(stats.giphyMessages, "stats.giphyMessages", "giphy")}
+            {@render mediaStat(stats.replies, "stats.replies")}
+            {@render mediaStat(stats.deletedMessages, "stats.deletedMessages")}
+        </Container>
+    </Container>
+
+    {#if showReported}
+        <Container gap={"md"} direction={"vertical"}>
+            <Container crossAxisAlignment={"center"} gap={"xs"}>
+                <Flag color={ColourVars.error} />
+                <Subtitle width={"hug"} colour={"error"} fontWeight={"bold"}>
+                    <Translatable resourceKey={i18nKey("stats.reportedMessages")} />
+                </Subtitle>
+                <Subtitle width={"hug"} colour={"error"} fontWeight={"bold"}>
+                    / {stats.reportedMessages.toLocaleString()}
+                </Subtitle>
+            </Container>
+            <Body colour={"textSecondary"} align={"start"}>
+                <Translatable resourceKey={i18nKey("stats.reportedMessagesInfo")} />
+            </Body>
+        </Container>
+    {/if}
+</Container>
+
+<style lang="scss">
+    :global(.container.stats_online_summary) {
+        top: 90px; // might need to do better than this but it'll do for now
+        left: 50%;
+        transform: translateX(-50%);
+        position: absolute;
+    }
+
+    $saturation: 80%;
+    $lightness: 65%;
+
+    $video-colour: #ed5ec9;
+    $audio-colour: #a65eed;
+    $image-colour: #5eeded;
+    $file-colour: #edc95e;
+    $text-colour: #5e82ed;
+    $poll-colour: #5eed82;
+    $crypto-colour: #a6ed5e;
+    $giphy-colour: #ed5e5e;
+
+    .legend {
+        font-size: var(--typo-body-sz);
+        line-height: var(--typo-body-lh);
+    }
+
+    .slice {
+        fill: transparent;
+        transform-origin: 50% 50%;
+        stroke-width: 150px;
+        cursor: pointer;
+    }
+    .pie {
+        width: min(250px, 100%);
+        margin-bottom: $sp5;
+        &.rendered circle {
+            transition: transform 200ms ease-in-out;
+        }
+    }
+
+    .numbers {
+        text-align: left;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        margin-bottom: $sp5;
+        row-gap: $sp3;
+    }
+
+    .background {
+        fill: transparent;
+    }
+
+    .key {
+        width: toRem(12);
+        height: toRem(12);
+        flex: 0 0 toRem(12);
+        border-radius: var(--rad-circle);
+    }
+
+    .text {
+        stroke: $text-colour;
+        color: $text-colour;
+        &.key {
+            background-color: $text-colour;
+        }
+    }
+
+    .image {
+        stroke: $image-colour;
+        color: $image-colour;
+        &.key {
+            background-color: $image-colour;
+        }
+    }
+
+    .video {
+        stroke: $video-colour;
+        color: $video-colour;
+        &.key {
+            background-color: $video-colour;
+        }
+    }
+
+    .audio {
+        stroke: $audio-colour;
+        color: $audio-colour;
+        &.key {
+            background-color: $audio-colour;
+        }
+    }
+
+    .file {
+        stroke: $file-colour;
+        color: $file-colour;
+        &.key {
+            background-color: $file-colour;
+        }
+    }
+
+    .poll {
+        stroke: $poll-colour;
+        color: $poll-colour;
+        &.key {
+            background-color: $poll-colour;
+        }
+    }
+
+    .crypto {
+        stroke: $crypto-colour;
+        color: $crypto-colour;
+        &.key {
+            background-color: $crypto-colour;
+        }
+    }
+
+    .giphy {
+        stroke: $giphy-colour;
+        color: $giphy-colour;
+        &.key {
+            background-color: $giphy-colour;
+        }
+    }
+</style>
diff --git a/frontend/app/src/mobile/shared/TokenInput.svelte b/frontend/app/src/mobile/shared/TokenInput.svelte
new file mode 100644
index 0000000000..02b4838d88
--- /dev/null
+++ b/frontend/app/src/mobile/shared/TokenInput.svelte
@@ -0,0 +1,142 @@
+<script lang="ts">
+    import { BodySmall, Chip, Container, NumberInput, Row } from "component-lib";
+    import { enhancedCryptoLookup as cryptoLookup, type OpenChat } from "@client";
+    import { getContext, untrack, type Snippet } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "./Translatable.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        balance?: bigint;
+        amount?: bigint;
+        minAmount?: bigint;
+        maxAmount?: bigint | undefined;
+        ledger: string;
+        valid?: boolean;
+        status?: "ok" | "zero" | "too_low" | "too_high";
+        subtext?: Snippet;
+        error?: boolean;
+        disabled?: boolean;
+        icon?: Snippet;
+        converted?: string;
+        placeholder?: string;
+        descriptionKey?: string;
+    }
+
+    let {
+        balance,
+        amount = $bindable(BigInt(0)),
+        minAmount = BigInt(0),
+        maxAmount = undefined,
+        ledger,
+        subtext,
+        valid = $bindable(false),
+        status = $bindable("zero"),
+        error = false,
+        converted,
+        icon,
+        disabled = false,
+        placeholder = "Withdrawal amount",
+        descriptionKey,
+    }: Props = $props();
+
+    let tokenDetails = $derived($cryptoLookup.get(ledger)!);
+    let tokenDecimals = $derived(tokenDetails?.decimals ?? 0);
+    let displayValue = $state(toDisplayValue(amount));
+
+    $effect(() => {
+        const validateResult = client.validateTokenInput(displayValue, tokenDecimals);
+        // Avoid unnecessary updates!
+        if (validateResult.amount !== amount) {
+            amount = validateResult.amount;
+        }
+
+        validate();
+    });
+
+    // Re-validate whenever minAmount, maxAmount, or balance changes
+    // TODO shouldn't maxAmount and balance be the same ??
+    $effect(() => {
+        if (minAmount || maxAmount || balance) {
+            validate();
+        }
+    });
+
+    function validate() {
+        untrack(() => {
+            if (amount === BigInt(0)) {
+                status = "zero";
+            } else if (amount < minAmount) {
+                status = "too_low";
+            } else if (maxAmount !== undefined && amount > maxAmount) {
+                status = "too_high";
+            } else {
+                status = "ok";
+            }
+            valid = status === "ok";
+        });
+    }
+
+    function setAmountPct(percentage: number) {
+        const pctValue = BigInt(Math.floor(Number(balance) * (percentage / 100)));
+        const pctValueWithFee = pctValue + tokenDetails.transferFee;
+
+        // Update display value, this will run $effect which will set the amount!
+        // We either set an actual percentage value if the value with fee is less
+        // than balance, or we reduce the pct for the fee amount.
+        displayValue = toDisplayValue(
+            balance && pctValueWithFee <= balance ? pctValue : pctValue - tokenDetails.transferFee,
+        );
+
+        validate();
+    }
+
+    function toDisplayValue(val: bigint): string {
+        if (val <= BigInt(0)) return "";
+        return (Number(val) / 10 ** tokenDecimals).toString();
+    }
+</script>
+
+{#snippet percentage(perc: number)}
+    <Chip fill mode={"rounded"} onClick={() => setAmountPct(perc)}>
+        {`${perc}%`}
+    </Chip>
+{/snippet}
+
+<!-- TODO i18n -->
+<Container direction="vertical" width="fill" gap="xs">
+    <NumberInput
+        bind:value={displayValue}
+        {disabled}
+        {icon}
+        {subtext}
+        {placeholder}
+        error={error && amount > 0}
+        unitText={tokenDetails.symbol + (converted ? ` // ${converted}` : ``)}
+        maxDecimals={tokenDecimals}
+        min={Number(minAmount) / Math.pow(10, tokenDecimals)}
+        max={maxAmount !== undefined
+            ? Number(maxAmount) / Math.pow(10, tokenDecimals)
+            : undefined} />
+
+    {#if balance}
+        <Container direction="vertical" padding={["zero", "sm"]}>
+            <Row mainAxisAlignment={"spaceBetween"} gap={"sm"}>
+                {@render percentage(25)}
+                {@render percentage(50)}
+                {@render percentage(75)}
+                {@render percentage(100)}
+            </Row>
+            {#if descriptionKey !== undefined}
+                <Row padding={["zero", "xs"]} gap="md">
+                    <BodySmall colour="textSecondary">
+                        <Translatable resourceKey={i18nKey(descriptionKey)} />
+                    </BodySmall>
+                    <!-- TODO converted should be a part of the input? -->
+                    <!-- {@render converted?.()} -->
+                </Row>
+            {/if}
+        </Container>
+    {/if}
+</Container>
diff --git a/frontend/app/src/components_mobile/home/TransferFeesMessage.svelte b/frontend/app/src/mobile/shared/TransferFeesMessage.svelte
similarity index 96%
rename from frontend/app/src/components_mobile/home/TransferFeesMessage.svelte
rename to frontend/app/src/mobile/shared/TransferFeesMessage.svelte
index d75162cba4..b71bb8faaf 100644
--- a/frontend/app/src/components_mobile/home/TransferFeesMessage.svelte
+++ b/frontend/app/src/mobile/shared/TransferFeesMessage.svelte
@@ -3,7 +3,7 @@
     import { i18nKey, OpenChat } from "@client";
     import { getContext } from "svelte";
     import Info from "svelte-material-icons/InformationOutline.svelte";
-    import Translatable from "../Translatable.svelte";
+    import Translatable from "./Translatable.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/mobile/shared/Translatable.svelte b/frontend/app/src/mobile/shared/Translatable.svelte
new file mode 100644
index 0000000000..681c14de59
--- /dev/null
+++ b/frontend/app/src/mobile/shared/Translatable.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+    import type { ResourceKey } from "@client";
+    import { _ } from "svelte-i18n";
+    import { translatable } from "@src/actions/translatable";
+    import { interpolate } from "@src/i18n/i18n";
+
+    interface Props {
+        resourceKey: ResourceKey;
+        inline?: boolean;
+    }
+
+    let { resourceKey, inline = false }: Props = $props();
+</script>
+
+<span use:translatable={{ key: resourceKey }} style={inline ? "display:inline;" : ""}>
+    {interpolate($_, resourceKey)}
+</span>
diff --git a/frontend/app/src/mobile/shared/TruncatedAccount.svelte b/frontend/app/src/mobile/shared/TruncatedAccount.svelte
new file mode 100644
index 0000000000..98dfe1e00a
--- /dev/null
+++ b/frontend/app/src/mobile/shared/TruncatedAccount.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+    import { Subtitle, ColourVars, Container, IconButton } from "component-lib";
+    import type { Snippet } from "svelte";
+    import ContentCopy from "svelte-material-icons/ContentCopy.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import { copyToClipboard } from "@src/utils/urls";
+
+    interface Props {
+        account: string;
+        disableCopy?: boolean;
+        children?: Snippet;
+    }
+
+    let { account, disableCopy = false, children }: Props = $props();
+
+    function collapseAccount(account: string) {
+        if (account.length > 23) {
+            return account.slice(0, 10) + "..." + account.slice(account.length - 10);
+        }
+        return account;
+    }
+
+    function copy() {
+        copyToClipboard(account).then((success) => {
+            if (success) {
+                toastStore.showSuccessToast(i18nKey("accountCopiedToClipboard"));
+            } else {
+                toastStore.showFailureToast(
+                    i18nKey("failedToCopyToClipboard", {
+                        account,
+                    }),
+                );
+            }
+        });
+    }
+</script>
+
+<Container crossAxisAlignment={"center"} gap={"md"}>
+    <Container direction="vertical" gap="xs">
+        {@render children?.()}
+        <Subtitle colour={"textPrimary"} fontWeight={"bold"}>
+            {collapseAccount(account)}
+        </Subtitle>
+    </Container>
+    {#if !disableCopy}
+        <IconButton padding={"zero"} onclick={copy}>
+            {#snippet icon()}
+                <ContentCopy color={ColourVars.primary} />
+            {/snippet}
+        </IconButton>
+    {/if}
+</Container>
diff --git a/frontend/app/src/mobile/shared/User.svelte b/frontend/app/src/mobile/shared/User.svelte
new file mode 100644
index 0000000000..992bfb8e76
--- /dev/null
+++ b/frontend/app/src/mobile/shared/User.svelte
@@ -0,0 +1,139 @@
+<script lang="ts">
+    import type { ProfileLinkClickedEvent } from "@webcomponents/profileLink";
+    import {
+        Avatar,
+        BodySmall,
+        Caption,
+        ColourVars,
+        Container,
+        IconButton,
+        MenuTrigger,
+    } from "component-lib";
+    import type { OpenChat } from "@client";
+    import {
+        ROLE_ADMIN,
+        ROLE_MEMBER,
+        ROLE_MODERATOR,
+        ROLE_NONE,
+        ROLE_OWNER,
+        roleAsText,
+        selectedChatWebhooksStore,
+        selectedCommunityMembersStore,
+    } from "@client";
+    import type { MemberRole, UserSummary } from "@shared";
+    import { getContext, type Snippet } from "svelte";
+    import DotsVertical from "svelte-material-icons/DotsVertical.svelte";
+    import FilteredUsername from "@src/ui/FilteredUsername.svelte";
+    import Badges from "@src/mobile/features/profile/Badges.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        user: UserSummary;
+        me?: boolean;
+        searchTerm?: string;
+        role?: MemberRole;
+        profile?: boolean;
+        children?: Snippet;
+        onClick?: () => void;
+        action?: Snippet;
+    }
+
+    let {
+        user,
+        me = false,
+        searchTerm = "",
+        role = ROLE_NONE,
+        profile = true,
+        children,
+        onClick,
+        action,
+    }: Props = $props();
+
+    // if search term is !== "", split the username into three parts [prefix, match, postfix]
+
+    let displayName = $derived(
+        client.getDisplayName(
+            user.userId,
+            $selectedCommunityMembersStore,
+            $selectedChatWebhooksStore,
+        ),
+    );
+
+    function click(ev?: MouseEvent) {
+        if (profile) {
+            ev?.target?.dispatchEvent(
+                new CustomEvent<ProfileLinkClickedEvent>("profile-clicked", {
+                    detail: {
+                        userId: user.userId,
+                        chatButton: !me,
+                        inGlobalContext: false,
+                    },
+                    bubbles: true,
+                }),
+            );
+        }
+
+        onClick?.();
+    }
+
+    function getRoleColour() {
+        switch (role) {
+            case ROLE_OWNER:
+                return ColourVars.primary;
+            case ROLE_ADMIN:
+                return ColourVars.secondary;
+            case ROLE_MODERATOR:
+                return ColourVars.warning;
+            default:
+                return ColourVars.primary;
+        }
+    }
+</script>
+
+{#snippet role_label()}
+    {#if role > ROLE_MEMBER}
+        <Container
+            width={"hug"}
+            borderRadius={"sm"}
+            padding={["zero", "xs"]}
+            background={getRoleColour()}>
+            <Caption colour={"textOnPrimary"} fontWeight={"bold"}>{roleAsText(role)}</Caption>
+        </Container>
+    {/if}
+{/snippet}
+
+<Container onClick={click} crossAxisAlignment={"center"} gap={"md"}>
+    <Avatar url={client.userAvatarUrl(user)} size={"md"} />
+    <Container gap={"xxs"} direction={"vertical"} width={"fill"}>
+        <Container crossAxisAlignment={"center"} gap={"xs"}>
+            <FilteredUsername {searchTerm} username={displayName} {me} />
+            <Badges
+                uniquePerson={user.isUniquePerson}
+                diamondStatus={user.diamondStatus}
+                streak={user.streak}
+                chitEarned={user.totalChitEarned} />
+        </Container>
+        <Container crossAxisAlignment={"center"} gap={"sm"}>
+            <BodySmall width={"hug"} colour={"textSecondary"}>
+                @{user.username}
+            </BodySmall>
+            {@render role_label()}
+        </Container>
+    </Container>
+    {#if action}
+        {@render action()}
+    {/if}
+    {#if children}
+        <MenuTrigger position={"bottom"} align={"end"}>
+            <IconButton padding={["sm", "xs", "sm", "zero"]} size={"md"}>
+                {#snippet icon(color)}
+                    <DotsVertical {color} />
+                {/snippet}
+            </IconButton>
+            {#snippet menuItems()}
+                {@render children()}
+            {/snippet}
+        </MenuTrigger>
+    {/if}
+</Container>
diff --git a/frontend/app/src/mobile/shared/UsernameInput.svelte b/frontend/app/src/mobile/shared/UsernameInput.svelte
new file mode 100644
index 0000000000..f9ac5db275
--- /dev/null
+++ b/frontend/app/src/mobile/shared/UsernameInput.svelte
@@ -0,0 +1,112 @@
+<script lang="ts">
+    import { Input, Spinner } from "component-lib";
+    import type { OpenChat } from "@client";
+    import { onMount, untrack } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import Translatable from "./Translatable.svelte";
+
+    const MIN_EXTANT_USERNAME_LENGTH = 3;
+    const MAX_USERNAME_LENGTH = 20;
+
+    interface Props {
+        client: OpenChat;
+        originalUsername: string;
+        username: string;
+        usernameValid: boolean;
+        disabled?: boolean;
+        errorMsg?: string;
+    }
+
+    let {
+        client,
+        originalUsername,
+        username = $bindable(),
+        usernameValid = $bindable(),
+        disabled = false,
+        errorMsg = $bindable(),
+    }: Props = $props();
+
+    let timer: number | undefined = undefined;
+    let currentPromise: Promise<unknown> | undefined;
+    let checking = $state(false);
+
+    onMount(() => {
+        username = originalUsername;
+        usernameValid = originalUsername?.length > 0;
+    });
+
+    function checkUsername(value: string) {
+        const promise = client
+            .checkUsername(value, false)
+            .then((resp) => {
+                if (promise !== currentPromise) {
+                    return;
+                }
+
+                checking = false;
+
+                if (value.toLowerCase() === originalUsername.toLowerCase() || resp === "success") {
+                    usernameValid = true;
+                    errorMsg = undefined;
+                    return;
+                } else {
+                    usernameValid = false;
+                }
+
+                if (resp === "username_taken") {
+                    errorMsg = "register.usernameTaken";
+                }
+            })
+            .catch((err) => {
+                errorMsg = "register.errorCheckingUsername";
+                client.logError("Unable to check username: ", err);
+                checking = false;
+                usernameValid = false;
+            });
+
+        currentPromise = promise;
+    }
+
+    $effect(() => {
+        if (typeof username !== "string") return;
+
+        let u = username;
+
+        untrack(() => {
+            usernameValid = client.isUsernameValid(u);
+            errorMsg = undefined;
+
+            window.clearTimeout(timer);
+            checking = false;
+
+            if (usernameValid || u.toLowerCase() === originalUsername.toLowerCase()) {
+                checking = true;
+                timer = window.setTimeout(() => checkUsername(u), 350);
+            }
+        });
+    });
+</script>
+
+<Input
+    bind:value={username}
+    {disabled}
+    error={errorMsg !== undefined || !usernameValid}
+    minlength={MIN_EXTANT_USERNAME_LENGTH}
+    maxlength={MAX_USERNAME_LENGTH}
+    placeholder={interpolate($_, i18nKey("register.enterUsername"))}>
+    {#snippet icon(color)}
+        {#if checking}
+            <Spinner
+                size={"1.4rem"}
+                backgroundColour={"var(--text-tertiary)"}
+                foregroundColour={color} />
+        {/if}
+    {/snippet}
+    {#snippet subtext()}
+        <Translatable
+            resourceKey={i18nKey(
+                errorMsg ?? "Username, alphanumeric characters & underscrores only",
+            )}></Translatable>
+    {/snippet}
+</Input>
diff --git a/frontend/app/src/components_mobile/home/groupOrCommunity.svelte.ts b/frontend/app/src/mobile/shared/groupOrCommunity.svelte.ts
similarity index 100%
rename from frontend/app/src/components_mobile/home/groupOrCommunity.svelte.ts
rename to frontend/app/src/mobile/shared/groupOrCommunity.svelte.ts
diff --git a/frontend/app/src/mobile/shell/App.svelte b/frontend/app/src/mobile/shell/App.svelte
new file mode 100644
index 0000000000..c9875b387c
--- /dev/null
+++ b/frontend/app/src/mobile/shell/App.svelte
@@ -0,0 +1,382 @@
+<script lang="ts">
+    import "@styles/global.scss";
+
+    import "@src/i18n/i18n";
+    import { trackedEffect } from "@src/utils/effects.svelte";
+    import { detectNeedsSafeInset, setupKeyboardTracking } from "@src/utils/safe_area";
+    import {
+        setStatusAndNavBarSizesForNativeApp,
+        updateAndroidInterfaceSizes,
+    } from "@src/stores/androidInterfaceSizes";
+    import { rtlStore } from "@src/stores/rtl";
+    import { snowing } from "@src/stores/snow";
+    import { incomingVideoCall } from "@src/stores/video";
+    import { broadcastLoggedInUser } from "@src/stores/xframe";
+    import "@src/utils/markdown";
+    import {
+        expectDeepLinks,
+        expectNewFcmToken,
+        expectNotificationTap,
+        expectPushNotifications,
+        expectWindowInsetChange,
+    } from "@src/utils/native/notification_channels";
+    import { expectShareTarget, handleShareTarget } from "@src/utils/native/share_target";
+    import "@src/utils/scream";
+    import { portalState } from "component-lib";
+    import {
+        type ChatIdentifier,
+        OpenChat,
+        type VideoCallType,
+        botState,
+        chatListScopeStore,
+        fontSize,
+        identityStateStore,
+        inititaliseLogger,
+        routeForChatIdentifier,
+        routeForScope,
+        subscribe,
+    } from "@client";
+    import { navigate } from "@src/utils/navigation";
+    import { onMount, setContext } from "svelte";
+    import { overrideItemIdKeyNameBeforeInitialisingDndZones } from "svelte-dnd-action";
+    import { _, isLoading } from "svelte-i18n";
+    import {
+        clearAllNotifications,
+        deleteFcmToken,
+        getFcmToken,
+        svelteReady,
+    } from "tauri-plugin-oc-api";
+    import { clearChatShortcuts, startChatShortcutPusher } from "@src/stores/chatShortcuts";
+    import Head from "./Head.svelte";
+    import NotificationsBar from "./NotificationsBar.svelte";
+    import ActiveCall from "@src/mobile/features/calls/ActiveCall.svelte";
+    import IncomingCall from "@src/mobile/features/calls/IncomingCall.svelte";
+    import VideoCallAccessRequests from "@src/mobile/features/calls/VideoCallAccessRequests.svelte";
+    import Router from "./Router.svelte";
+    import Snow from "@src/ui/Snow.svelte";
+    import UpgradeBanner from "./UpgradeBanner.svelte";
+    import { keyboard } from "@src/stores/keyboard.svelte";
+
+    overrideItemIdKeyNameBeforeInitialisingDndZones("_id");
+
+    const logger = inititaliseLogger(
+        import.meta.env.OC_ROLLBAR_ACCESS_TOKEN!,
+        import.meta.env.OC_WEBSITE_VERSION!,
+        import.meta.env.OC_BUILD_ENV!,
+    );
+
+    function createOpenChatClient(): OpenChat {
+        const client = new OpenChat({
+            mobileLayout: import.meta.env.OC_MOBILE_LAYOUT,
+            icUrl: import.meta.env.OC_IC_URL,
+            webAuthnOrigin: import.meta.env.OC_WEBAUTHN_ORIGIN,
+            iiDerivationOrigin: import.meta.env.OC_II_DERIVATION_ORIGIN,
+            openStorageIndexCanister: import.meta.env.OC_STORAGE_INDEX_CANISTER!,
+            groupIndexCanister: import.meta.env.OC_GROUP_INDEX_CANISTER!,
+            notificationsCanister: import.meta.env.OC_NOTIFICATIONS_CANISTER!,
+            identityCanister: import.meta.env.OC_IDENTITY_CANISTER!,
+            onlineCanister: import.meta.env.OC_ONLINE_CANISTER!,
+            userIndexCanister: import.meta.env.OC_USER_INDEX_CANISTER!,
+            translationsCanister: import.meta.env.OC_TRANSLATIONS_CANISTER!,
+            registryCanister: import.meta.env.OC_REGISTRY_CANISTER!,
+            internetIdentityUrl: import.meta.env.OC_INTERNET_IDENTITY_URL!,
+            nfidUrl: import.meta.env.OC_NFID_URL!,
+            userGeekApiKey: import.meta.env.OC_USERGEEK_APIKEY!,
+            videoBridgeUrl: import.meta.env.OC_VIDEO_BRIDGE_URL!,
+            meteredApiKey: import.meta.env.OC_METERED_APIKEY!,
+            blobUrlPattern: import.meta.env.OC_BLOB_URL_PATTERN!,
+            canisterUrlPath: import.meta.env.OC_CANISTER_URL_PATH!,
+            proposalBotCanister: import.meta.env.OC_PROPOSALS_BOT_CANISTER!,
+            marketMakerCanister: import.meta.env.OC_MARKET_MAKER_CANISTER!,
+            signInWithEmailCanister: import.meta.env.OC_SIGN_IN_WITH_EMAIL_CANISTER!,
+            signInWithEthereumCanister: import.meta.env.OC_SIGN_IN_WITH_ETHEREUM_CANISTER!,
+            signInWithSolanaCanister: import.meta.env.OC_SIGN_IN_WITH_SOLANA_CANISTER!,
+            oneSecForwarderCanister: import.meta.env.OC_ONESEC_FORWARDER_CANISTER!,
+            oneSecMinterCanister: import.meta.env.OC_ONESEC_MINTER_CANISTER!,
+            i18nFormatter: $_,
+            logger,
+            websiteVersion: import.meta.env.OC_WEBSITE_VERSION!,
+            rollbarApiKey: import.meta.env.OC_ROLLBAR_ACCESS_TOKEN!,
+            env: import.meta.env.OC_BUILD_ENV!,
+            bitcoinMainnetEnabled: import.meta.env.OC_BITCOIN_MAINNET_ENABLED! === "true",
+            vapidPublicKey: import.meta.env.OC_VAPID_PUBLIC_KEY!,
+            accountLinkingCodesEnabled:
+                import.meta.env.OC_ACCOUNT_LINKING_CODES_ENABLED! === "true",
+            baseOrigin: import.meta.env.OC_BASE_ORIGIN!,
+        });
+
+        return client;
+    }
+
+    let client: OpenChat = createOpenChatClient();
+    setContext<OpenChat>("client", client);
+
+    // I can't (yet) find a way to avoid using "any" here. Will try to improve but need to commit this crime for the time being
+    let videoCallElement: any;
+
+    trackedEffect("rtl", () => {
+        // subscribe to the rtl store so that we can set the overall page direction at the right time
+        document.dir = $rtlStore ? "rtl" : "ltr";
+    });
+
+    trackedEffect("font-size", () => {
+        console.log("Setting font size to: ", $fontSize);
+        document.documentElement.style.setProperty("--font-size", `${$fontSize}px`);
+    });
+
+    trackedEffect("calculate-height", calculateHeight);
+
+    onMount(() => {
+        const unsubs = [
+            subscribe("startVideoCall", startVideoCall),
+            subscribe("hangup", hangup),
+            subscribe("askToSpeak", askToSpeak),
+            subscribe("userLoggedIn", onUserLoggedIn),
+        ];
+        window.addEventListener("orientationchange", calculateHeight);
+        window.addEventListener("unhandledrejection", unhandledError);
+        // visualViewport.resize fires when the iOS virtual keyboard appears/disappears
+        // in PWA (home-screen) mode, where window.resize does not.
+        // Guarded to non-native apps only to avoid conflicting with the native
+        // keyboard handling system (expectWindowInsetChange) in the Tauri app.
+        if (!client.isNativeApp()) {
+            window.visualViewport?.addEventListener("resize", calculateHeight);
+        }
+
+        const unsub = _.subscribe((formatter) => {
+            botState.messageFormatter = formatter;
+        });
+
+        const unsubKeyboard = setupKeyboardTracking();
+        return () => {
+            window.removeEventListener("orientationchange", calculateHeight);
+            window.removeEventListener("unhandledrejection", unhandledError);
+            if (!client.isNativeApp()) {
+                window.visualViewport?.removeEventListener("resize", calculateHeight);
+            }
+            unsubs.forEach((u) => u());
+            unsub();
+            unsubKeyboard();
+        };
+    });
+
+    if (client.isNativeApp()) {
+        expectWindowInsetChange((data) => {
+            // Setting these values in store should also set the CSS vars!
+            // Gated so identical status/nav sizes don't re-write localStorage and
+            // CSS vars on every keyboard-animation frame.
+            updateAndroidInterfaceSizes(data.statusBarHeightDp, data.navHeightDp);
+
+            keyboard.visible = data.isKeyboardOpen;
+            keyboard.currentHeight = data.keyboardHeightDp;
+            data.isKeyboardOpen
+                ? document.body.classList.add("keyboard-visible")
+                : document.body.classList.remove("keyboard-visible");
+
+            data.isGestureNavigation
+                ? document.body.classList.add("has-gesture-nav")
+                : document.body.classList.remove("has-gesture-nav");
+        }).catch(console.error);
+
+        // We need to set the status bar height from the store, in case that
+        // the webview was refreshed, but inset change didn't happen.
+        setStatusAndNavBarSizesForNativeApp();
+    }
+
+    // Guards the one-time native setup (listeners, logout hook, svelteReady)
+    // so it runs once per page session. setupNativeApp() itself runs again on
+    // every userLoggedIn (account switch), but only the FCM token registration
+    // should repeat — re-registering listeners or the logout hook would stack
+    // duplicate handlers (e.g. a single warm tap firing multiple times).
+    let nativeSetupDone = false;
+
+    // Sets up push notifications and FCM token management for native apps
+    function setupNativeApp() {
+        const addFcmToken = (token: string) => {
+            client
+                .addFcmToken(token)
+                .then(() => console.info("FCM token updated successfully"))
+                .catch(console.error);
+        };
+
+        if (!client.isNativeApp()) {
+            return;
+        }
+
+        // Ask for the current FCM token and register it unconditionally on every
+        // login. Registration is last-login-wins on the backend, so this also
+        // reclaims a token still bound to a previous account on this device (a
+        // fcm_token_exists pre-check would wrongly skip that).
+        getFcmToken().then((token) => {
+            if (!token) {
+                // TODO do we handle this somehow? Debounce, try again?
+                console.error("No FCM token received");
+                return;
+            }
+
+            addFcmToken(token);
+        });
+
+        // Everything below registers session-scoped handlers and must run once.
+        if (nativeSetupDone) {
+            return;
+        }
+        nativeSetupDone = true;
+
+        // Register every native event listener BEFORE signalling svelteReady:
+        // the native side flushes its queued events the moment svelteReady
+        // fires, and a flush that beats an in-flight listener registration
+        // silently drops the event (e.g. a cold-start notification tap).
+        const listenersRegistered = Promise.allSettled([
+            // Listen for incoming push notifications from Firebase; also asks
+            // for permission to show notifications if not already granted.
+            expectPushNotifications(),
+
+            // Listen for notifications user has tapped on
+            expectNotificationTap(),
+
+            // Listen for content shared into OpenChat from the system share sheet
+            // (or via a Direct Share chat shortcut). Cold-start shares are queued
+            // by the native side and delivered once svelteReady fires below.
+            expectShareTarget((share) => handleShareTarget(client, share)),
+
+            // Listen for deep links (e.g. https://oc.app/group/xyz tapped from another app).
+            // Cold-start deep links are queued by MainActivity and delivered once svelteReady fires.
+            expectDeepLinks(),
+
+            // Expect FCM token refreshes
+            expectNewFcmToken(addFcmToken),
+        ]);
+        listenersRegistered.then((results) => {
+            results
+                .filter((r): r is PromiseRejectedResult => r.status === "rejected")
+                .forEach((r) => console.error("Native listener setup failed", r.reason));
+        });
+
+        // Best-effort push hygiene on sign-out, while the identity is
+        // still valid: unbind this device's token from the account,
+        // delete the device token (pushes to it then dead-end at FCM,
+        // and the next login mints + registers a fresh one), and empty
+        // the tray so nothing from this account lingers.
+        client.onLogout(async () => {
+            const token = await getFcmToken().catch(() => null);
+            if (token) {
+                await client.removeFcmToken(token).catch(console.error);
+            }
+            await deleteFcmToken().catch(console.error);
+            await clearAllNotifications().catch(console.error);
+        });
+
+        // Push the top recent chats to the Android Sharing Shortcuts API
+        // so they appear directly in the system share sheet (like
+        // WhatsApp's per-chat tiles).
+        startChatShortcutPusher(client);
+
+        // Inform the native android app that svelte code is ready — but only
+        // once all the listeners above are registered, so the native event
+        // queue flushes into handlers that actually exist.
+        listenersRegistered.then(() => svelteReady());
+    }
+
+    if ($identityStateStore.kind === "logged_in") {
+        setupNativeApp();
+    }
+
+    function onUserLoggedIn(userId: string) {
+        setupNativeApp();
+        broadcastLoggedInUser(userId);
+    }
+
+    function calculateHeight() {
+        // fix the issue with 100vh layouts in various mobile browsers.
+        // In PWA (home-screen) mode on iOS, window.innerHeight does NOT shrink
+        // when the virtual keyboard appears, but visualViewport.height does.
+        // The native Tauri app has its own keyboard handling via expectWindowInsetChange,
+        // so we only use visualViewport.height for non-native builds.
+        const viewportHeight =
+            !client.isNativeApp() && window.visualViewport
+                ? window.visualViewport.height
+                : window.innerHeight;
+        document.documentElement.style.setProperty("--vh", `${viewportHeight * 0.01}px`);
+    }
+
+    function unhandledError(ev: Event) {
+        if (
+            ev instanceof ErrorEvent &&
+            (ev.message.includes("ResizeObserver loop completed with undelivered notifications") ||
+                ev.message.includes("ResizeObserver loop limit exceeded"))
+        ) {
+            return;
+        }
+
+        logger?.error("Unhandled error: ", ev);
+        if (
+            ev instanceof PromiseRejectionEvent &&
+            (ev.reason?.name === "SessionExpiryError" ||
+                ev.reason?.name === "InvalidDelegationError")
+        ) {
+            if (client.isNativeApp()) clearChatShortcuts();
+            client.logout();
+            ev.preventDefault();
+        }
+    }
+
+    function resize() {
+        portalState.close();
+        calculateHeight();
+    }
+
+    function startVideoCall(payload: {
+        chatId: ChatIdentifier;
+        callType: VideoCallType;
+        join: boolean;
+    }) {
+        videoCallElement?.startOrJoinVideoCall(payload.chatId, payload.callType, payload.join);
+    }
+
+    function askToSpeak() {
+        videoCallElement?.askToSpeak();
+    }
+
+    function hangup() {
+        videoCallElement?.hangup();
+    }
+
+    function joinVideoCall(chatId: ChatIdentifier, callType: VideoCallType) {
+        incomingVideoCall.set(undefined);
+        navigate(routeForChatIdentifier("none", chatId));
+        videoCallElement?.startOrJoinVideoCall(chatId, callType, true);
+    }
+
+    document.body.classList.add("native-android");
+    detectNeedsSafeInset();
+</script>
+
+<Head />
+
+<ActiveCall
+    onClearSelection={() => navigate(routeForScope($chatListScopeStore))}
+    bind:this={videoCallElement} />
+
+<VideoCallAccessRequests />
+
+<IncomingCall onJoinVideoCall={joinVideoCall} />
+
+<NotificationsBar />
+
+<!-- should we perhaps just _always_ render the router -->
+{#if $identityStateStore.kind === "anon" || $identityStateStore.kind === "logging_in" || $identityStateStore.kind === "registering" || $identityStateStore.kind === "logged_in" || $identityStateStore.kind === "loading_user"}
+    {#if !$isLoading}
+        <Router />
+    {/if}
+{/if}
+
+{#if !client.isNativeApp()}
+    <UpgradeBanner />
+{/if}
+
+{#if $snowing}
+    <Snow />
+{/if}
+
+<svelte:window onresize={resize} onerror={unhandledError} onorientationchange={resize} />
diff --git a/frontend/app/src/mobile/shell/ChatListSearch.svelte b/frontend/app/src/mobile/shell/ChatListSearch.svelte
new file mode 100644
index 0000000000..f00f0b32ca
--- /dev/null
+++ b/frontend/app/src/mobile/shell/ChatListSearch.svelte
@@ -0,0 +1,140 @@
+<script lang="ts">
+    import { Search } from "component-lib";
+    import {
+        chatListScopeStore,
+        currentUserIdStore,
+        type BotMatch,
+        type ChatListScope,
+        type DirectChatIdentifier,
+        type GroupSearchResponse,
+        type OpenChat,
+        type UserSummary,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import { trimLeadingAtSymbol } from "@src/utils/user";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        searchTerm?: string;
+        searchResultsAvailable: boolean;
+        groupSearchResults?: Promise<GroupSearchResponse> | undefined;
+        userAndBotsSearchResults?: Promise<(UserSummary | BotMatch)[]> | undefined;
+    }
+
+    let {
+        searchTerm = $bindable(""),
+        searchResultsAvailable = $bindable(false),
+        groupSearchResults = $bindable(undefined),
+        userAndBotsSearchResults = $bindable(undefined),
+    }: Props = $props();
+
+    searchResultsAvailable;
+
+    let searching: boolean = $state(false);
+
+    $effect(() => {
+        void $chatListScopeStore.kind;
+        clearSearch();
+    });
+
+    function getPlaceholder(scope: ChatListScope["kind"]): string {
+        switch (scope) {
+            case "community":
+                return interpolate($_, i18nKey("searchChannelsPlaceholder"));
+            case "chats":
+                return interpolate($_, i18nKey("search"));
+            case "favourite":
+                return interpolate($_, i18nKey("searchFavouritesPlaceholder"));
+            case "none":
+                return interpolate($_, i18nKey("searchPlaceholder"));
+        }
+    }
+
+    function clearSearch() {
+        searchTerm = "";
+    }
+
+    async function performSearch(term?: string) {
+        if (term === undefined || term === "") return;
+        searchResultsAvailable = false;
+        searchTerm = term;
+
+        searchTerm = trimLeadingAtSymbol(searchTerm);
+
+        if (searchTerm !== "") {
+            try {
+                searching = true;
+                const term = searchTerm.toLowerCase();
+                searchQuery(term);
+            } catch (err) {
+                console.warn("search failed with: ", err);
+                searching = false;
+            } finally {
+                searching = false;
+            }
+        } else {
+            clearSearch();
+        }
+    }
+
+    function postSearch() {
+        if (searchTerm !== "") {
+            searchResultsAvailable = true;
+        } else {
+            clearSearch();
+        }
+    }
+
+    function sortUsersOrBots(_a: UserSummary | BotMatch, _b: UserSummary | BotMatch): number {
+        return 0;
+    }
+
+    function searchBots(term: string): Promise<BotMatch[]> {
+        // This location is rather hacky because we can't have a direct chat with ourselves
+        // but it signals to the explore_bots endpoint that we want to see bots that are
+        // available for direct chat.
+        const location = {
+            kind: "direct_chat",
+            userId: $currentUserIdStore,
+        } as DirectChatIdentifier;
+
+        return client.exploreBots(term, 0, 10, location, false).then((result) => {
+            return result.kind === "success" ? result.matches : [];
+        });
+    }
+
+    function searchUsers(term: string): Promise<UserSummary[]> {
+        return client.searchUsers(term, 10);
+    }
+
+    async function searchQuery(term: string) {
+        groupSearchResults = client.searchGroups(term, 10).then((res) => {
+            console.log(res);
+            return res;
+        });
+        userAndBotsSearchResults = Promise.all([searchUsers(term), searchBots(term)]).then(
+            ([users, bots]) => [...users, ...bots].sort(sortUsersOrBots),
+        );
+        Promise.all([groupSearchResults, userAndBotsSearchResults]).then(postSearch);
+    }
+    let placeholder = $derived(getPlaceholder($chatListScopeStore.kind));
+
+    $effect(() => {
+        if (searchTerm === "") {
+            searching = false;
+            searchResultsAvailable = false;
+            groupSearchResults = undefined;
+            userAndBotsSearchResults = undefined;
+        }
+    });
+</script>
+
+<Search
+    onClear={() => (searchTerm = "")}
+    {placeholder}
+    {searching}
+    value={searchTerm}
+    onSearch={performSearch} />
diff --git a/frontend/app/src/components_mobile/ForwardMessageModal.svelte b/frontend/app/src/mobile/shell/ForwardMessageModal.svelte
similarity index 92%
rename from frontend/app/src/components_mobile/ForwardMessageModal.svelte
rename to frontend/app/src/mobile/shell/ForwardMessageModal.svelte
index d93c37687d..f074fa331b 100644
--- a/frontend/app/src/components_mobile/ForwardMessageModal.svelte
+++ b/frontend/app/src/mobile/shell/ForwardMessageModal.svelte
@@ -2,7 +2,7 @@
     import { messageToForwardStore } from "@src/stores/messageToForward";
     import type { ChatIdentifier, Message } from "@client";
     import { chatListScopeStore, routeForChatIdentifier } from "@client";
-    import { navigate } from "@utils/navigation";
+    import { navigate } from "@src/utils/navigation";
     import SelectChatModal from "./SelectChatModal.svelte";
 
     interface Props {
diff --git a/frontend/app/src/mobile/shell/Head.svelte b/frontend/app/src/mobile/shell/Head.svelte
new file mode 100644
index 0000000000..7c75565fc0
--- /dev/null
+++ b/frontend/app/src/mobile/shell/Head.svelte
@@ -0,0 +1,104 @@
+<script lang="ts">
+    import {
+        type ChatListScope,
+        type ChatSummary,
+        type CombinedUnreadCounts,
+        type CommunitySummary,
+        type OpenChat,
+        type UserLookup,
+        allUsersStore,
+        chatListScopeStore,
+        globalUnreadCountStore,
+        locationStore,
+        routeForChatIdentifier,
+        selectedChatSummaryStore,
+        selectedCommunitySummaryStore,
+    } from "@client";
+    import { getContext, onMount } from "svelte";
+    import { mobileOperatingSystem } from "@src/utils/devices";
+
+    const client = getContext<OpenChat>("client");
+
+    let origin = $derived(client.canonicalOrigin());
+
+    let viewPortContent = $state("width=device-width, initial-scale=1");
+
+    type Details = {
+        title: string;
+        icon: string;
+        description: string;
+        canonicalUrl: URL;
+    };
+
+    function getDetails(
+        scope: ChatListScope,
+        location: string,
+        users: UserLookup,
+        unread: CombinedUnreadCounts,
+        chat: ChatSummary | undefined,
+        community: CommunitySummary | undefined,
+    ): Details {
+        let canonicalUrl = new URL("/", origin);
+        let title = "OpenChat";
+        let description =
+            "OpenChat is a fully featured chat application running end-to-end on the Internet Computer blockchain.";
+
+        if (location === "/communities") {
+            canonicalUrl = new URL("/communities", origin);
+        }
+
+        if (community !== undefined) {
+            title = `${title} - ${community.name}`;
+            description = community.description;
+            canonicalUrl = new URL(`/community/${community.id.communityId}`, origin);
+        }
+        if (chat !== undefined) {
+            if (chat.kind === "direct_chat") {
+                title = `${title} -
+                    ${
+                        users.get(chat.them.userId)?.displayName ??
+                        users.get(chat.them.userId)?.username ??
+                        "Direct chat"
+                    }`;
+            } else {
+                title = `${title} - ${chat.name}`;
+                description = chat.description;
+                canonicalUrl = new URL(routeForChatIdentifier(scope.kind, chat.id), origin);
+            }
+        }
+        const merged = client.mergeCombinedUnreadCounts(unread);
+        return {
+            title: merged.unmuted > 0 ? `(${merged.unmuted}) ${title}` : title,
+            description,
+            icon: merged.unmuted > 0 ? "/icon-unread.png" : "/icon.png",
+            canonicalUrl,
+        };
+    }
+
+    onMount(() => {
+        if (mobileOperatingSystem === "iOS") {
+            viewPortContent += ", maximum-scale=1";
+        }
+    });
+
+    let details = $derived(
+        getDetails(
+            $chatListScopeStore,
+            $locationStore,
+            $allUsersStore,
+            $globalUnreadCountStore,
+            $selectedChatSummaryStore,
+            $selectedCommunitySummaryStore,
+        ),
+    );
+</script>
+
+<svelte:head>
+    <title>{details.title}</title>
+    <meta name="viewport" content={viewPortContent} />
+    <link rel="icon" type="image/png" href={details.icon} />
+    <link rel="canonical" href={details.canonicalUrl.toString()} />
+    <meta name="description" content={details.description} />
+    <meta property="og:title" content={details.title} />
+    <meta property="og:description" content={details.description} />
+</svelte:head>
diff --git a/frontend/app/src/mobile/shell/Home.svelte b/frontend/app/src/mobile/shell/Home.svelte
new file mode 100644
index 0000000000..f4f877c2d5
--- /dev/null
+++ b/frontend/app/src/mobile/shell/Home.svelte
@@ -0,0 +1,635 @@
+<script lang="ts">
+    import { trackedEffect } from "@src/utils/effects.svelte";
+    import { invoke } from "@tauri-apps/api/core";
+    import type { ProfileLinkClickedEvent } from "@webcomponents/profileLink";
+    import { Container, Sheet } from "component-lib";
+    import type {
+        ChannelIdentifier,
+        ChatIdentifier,
+        CommunityIdentifier,
+        DirectChatIdentifier,
+        EnhancedReplyContext,
+        Level,
+        MultiUserChat,
+        MultiUserChatIdentifier,
+        NervousSystemDetails,
+        OpenChat,
+        PubSubEvents,
+        ResourceKey,
+        RouteParams,
+    } from "@client";
+    import { navigate } from "@src/utils/navigation";
+    import {
+        allUsersStore,
+        anonUserStore,
+        chatIdentifiersEqual,
+        chatListScopeStore,
+        chatsInitialisedStore,
+        chatSummariesListStore,
+        identityStateStore,
+        localUpdates,
+        offlineStore,
+        pinNumberResolverStore,
+        publish,
+        querystringStore,
+        routeForChatIdentifier,
+        routeForScope,
+        routeStore,
+        captureRulesAcceptanceStore as rulesAcceptanceStore,
+        selectedChatIdStore,
+        selectedChatSummaryStore,
+        subscribe,
+        suspendedUserStore,
+    } from "@client";
+    import { getContext, onMount, untrack } from "svelte";
+    import { _ } from "svelte-i18n";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { chitPopup, disableChit } from "@src/stores/settings";
+    import { toastStore } from "@src/stores/toast";
+    import { activeVideoCall, incomingVideoCall } from "@src/stores/video";
+    import { removeQueryStringParam } from "@src/utils/urls";
+    import AreYouSure from "@src/mobile/shared/AreYouSure.svelte";
+    import NativeUpgradeBanner from "./NativeUpgradeBanner.svelte";
+    import NotFound from "./NotFound.svelte";
+    import OfflineFooter from "./OfflineFooter.svelte";
+    import OnboardModal from "@src/mobile/features/onboard/OnboardModal.svelte";
+    import SuspendedModal from "./SuspendedModal.svelte";
+    import Toast from "./Toast.svelte";
+    import AcceptRulesModal from "@src/mobile/features/chats/core/AcceptRulesModal.svelte";
+    import AnonFooter from "@src/mobile/features/onboard/AnonFooter.svelte";
+    import ChitEarned from "@src/mobile/features/chit/ChitEarned.svelte";
+    import LeftPanel from "./LeftPanel.svelte";
+    import MiddlePanel from "./MiddlePanel.svelte";
+    import NoAccess from "@src/mobile/features/access/NoAccess.svelte";
+    import PinNumberModal from "@src/mobile/features/wallet/PinNumberModal.svelte";
+    import VerifyHumanity from "@src/mobile/features/profile/VerifyHumanity.svelte";
+    import ViewUserProfile from "@src/mobile/features/profile/ViewUserProfileModal.svelte";
+    import MakeProposalModal from "@src/mobile/features/proposals/MakeProposalModal.svelte";
+    import SuspendModal from "@src/mobile/features/profile/SuspendModal.svelte";
+    import SetPinNumberModal from "@src/mobile/features/wallet/SetPinNumberModal.svelte";
+
+    type ViewProfileConfig = {
+        userId: string;
+        chatButton: boolean;
+        alignTo?: HTMLElement;
+        inGlobalContext: boolean;
+    };
+
+    const client = getContext<OpenChat>("client");
+
+    let showProfileCard = $state<ViewProfileConfig>();
+
+    type ConfirmActionEvent =
+        | ConfirmLeaveEvent
+        | ConfirmLeaveCommunityEvent
+        | ConfirmDeleteDirectChatEvent
+        | ConfirmDeleteCommunityEvent;
+
+    type ConfirmLeaveCommunityEvent = {
+        kind: "leave_community";
+        communityId: CommunityIdentifier;
+    };
+
+    type ConfirmDeleteDirectChatEvent = {
+        kind: "delete_direct_chat";
+        chatId: DirectChatIdentifier;
+        blockUser: boolean;
+    };
+
+    type ConfirmLeaveEvent = {
+        kind: "leave";
+        chatId: MultiUserChatIdentifier;
+        level: Level;
+    };
+
+    type ConfirmDeleteCommunityEvent = {
+        kind: "delete_community";
+        communityId: CommunityIdentifier;
+        doubleCheck: { challenge: ResourceKey; response: ResourceKey };
+    };
+
+    type ModalType =
+        | { kind: "none" }
+        | { kind: "verify_humanity" }
+        | { kind: "suspended" }
+        | { kind: "suspending"; userId: string }
+        | { kind: "no_access" }
+        | { kind: "hall_of_fame" }
+        | { kind: "make_proposal"; chat: MultiUserChat; nervousSystem: NervousSystemDetails }
+        | { kind: "not_found" };
+
+    let modal: ModalType = $state({ kind: "none" });
+    let confirmActionEvent: ConfirmActionEvent | undefined = $state();
+
+    onMount(() => {
+        const unsubEvents = [
+            subscribe("chatWith", chatWith),
+            subscribe("replyPrivatelyTo", replyPrivatelyTo),
+            subscribe("verifyHumanity", verifyHumanity),
+            subscribe("deleteDirectChat", onTriggerConfirm),
+            subscribe("deleteCommunity", onTriggerConfirm),
+            subscribe("leaveCommunity", onTriggerConfirm),
+            subscribe("makeProposal", showMakeProposalModal),
+            subscribe("leaveGroup", onTriggerConfirm),
+            subscribe("unarchiveChat", unarchiveChat),
+            subscribe("toggleMuteNotifications", toggleMuteNotifications),
+            subscribe("successfulImport", successfulImport),
+            subscribe("clearSelection", () => navigate(routeForScope($chatListScopeStore))),
+            subscribe("userSuspensionChanged", reload),
+            subscribe("selectedChatInvalid", selectedChatInvalid),
+            subscribe("sendMessageFailed", sendMessageFailed),
+            subscribe("remoteVideoCallStarted", remoteVideoCallStarted),
+            subscribe("remoteVideoCallEnded", remoteVideoCallEnded),
+            subscribe("notification", (n) => client.notificationReceived(n)),
+            subscribe("noAccess", () => (modal = { kind: "no_access" })),
+            subscribe("notFound", () => (modal = { kind: "not_found" })),
+            subscribe("copyUrl", copyUrl),
+            subscribe("suspendUser", suspendUser),
+        ];
+        client.initialiseNotifications();
+        document.body.addEventListener("profile-clicked", profileClicked);
+
+        if ($suspendedUserStore) {
+            modal = { kind: "suspended" };
+        }
+
+        return () => {
+            unsubEvents.forEach((u) => u());
+            document.body.removeEventListener("profile-clicked", profileClicked);
+        };
+    });
+
+    function reload() {
+        if (client.isNativeApp()) {
+            invoke("plugin:oc|restart_app");
+        } else {
+            window.location.reload();
+        }
+    }
+
+    function suspendUser(userId: string) {
+        modal = { kind: "suspending", userId };
+    }
+
+    function profileClicked(event: Event) {
+        profileLinkClicked(event as CustomEvent<ProfileLinkClickedEvent>);
+    }
+
+    function selectedChatInvalid() {
+        navigate(routeForScope(client.getDefaultScope()));
+    }
+
+    function sendMessageFailed(alert: boolean) {
+        if (alert) {
+            toastStore.showFailureToast(i18nKey("errorSendingMessage"));
+        }
+    }
+
+    function remoteVideoCallEnded(messageId: bigint) {
+        if ($incomingVideoCall?.messageId === messageId) {
+            incomingVideoCall.set(undefined);
+        }
+    }
+
+    function remoteVideoCallStarted(ev: PubSubEvents["remoteVideoCallStarted"]) {
+        // If current user is already in the call, or has previously been in the call, or the call started more than 2 hours ago, exit
+        if (
+            chatIdentifiersEqual($activeVideoCall?.chatId, ev.chatId) ||
+            ev.currentUserIsParticipant ||
+            Number(ev.timestamp) < Date.now() - 2 * 60 * 60 * 1000
+        ) {
+            return;
+        }
+
+        incomingVideoCall.set(ev);
+    }
+
+    async function routeChange(initialised: boolean, route: RouteParams): Promise<void> {
+        // wrap the whole thing in untrack because we don't want it to react to everything it reads in here
+        untrack(async () => {
+            // wait until we have loaded the chats
+            if (initialised) {
+                if (
+                    $anonUserStore &&
+                    client.isChatListRoute(route) &&
+                    route.scope.kind === "favourite"
+                ) {
+                    client.updateIdentityState({ kind: "logging_in" });
+                    navigate("/chats");
+                    return;
+                }
+
+                if (client.isHomeRoute(route) && $anonUserStore) {
+                    showOnboarding = true;
+                    return;
+                }
+
+                if (client.setChatListScopeAndRedirect(route)) {
+                    return;
+                }
+
+                if (client.isShareRoute(route)) {
+                    publish("shareMessage", {
+                        title: route.title,
+                        text: route.text,
+                        url: route.url,
+                        files: [],
+                    });
+                    navigate(routeForScope(client.getDefaultScope()));
+                }
+            }
+        });
+    }
+
+    function closeModal() {
+        modal = { kind: "none" };
+    }
+
+    function closeNoAccess() {
+        closeModal();
+        navigate(routeForScope(client.getDefaultScope()));
+    }
+
+    function unarchiveChat(chatId: ChatIdentifier) {
+        client.unarchiveChat(chatId).then((success) => {
+            if (!success) {
+                toastStore.showFailureToast(i18nKey("unarchiveChatFailed"));
+            }
+        });
+    }
+
+    function getConfirmMessage(
+        confirmActionEvent: ConfirmActionEvent | undefined,
+    ): ResourceKey | undefined {
+        if (confirmActionEvent === undefined) return undefined;
+
+        switch (confirmActionEvent.kind) {
+            case "leave":
+                return i18nKey("confirmLeaveGroup", undefined, confirmActionEvent.level, true);
+            case "delete_direct_chat":
+                return i18nKey("confirmDeleteDirectChat", undefined, undefined, true);
+            case "leave_community":
+                return i18nKey("communities.leaveMessage");
+            case "delete_community":
+                return i18nKey("communities.deleteMessage");
+        }
+    }
+
+    function onTriggerConfirm(detail: ConfirmActionEvent) {
+        confirmActionEvent = detail;
+    }
+
+    function onConfirmAction(yes: boolean): Promise<void> {
+        const result = yes ? doConfirmAction(confirmActionEvent!) : Promise.resolve();
+
+        return result.finally(() => {
+            confirmActionEvent = undefined;
+        });
+    }
+
+    function doConfirmAction(confirmActionEvent: ConfirmActionEvent): Promise<void> {
+        switch (confirmActionEvent.kind) {
+            case "leave":
+                return leaveGroup(confirmActionEvent.chatId, confirmActionEvent.level);
+            case "delete_direct_chat":
+                return deleteDirectChat(confirmActionEvent.chatId, confirmActionEvent.blockUser);
+            case "leave_community":
+                return leaveCommunity(confirmActionEvent.communityId);
+            case "delete_community":
+                return deleteCommunity(confirmActionEvent.communityId);
+            default:
+                return Promise.reject();
+        }
+    }
+
+    function deleteDirectChat(chatId: DirectChatIdentifier, blockUser: boolean): Promise<void> {
+        // Only redirect when deleting the chat we're currently viewing. The
+        // delete can now be triggered from the chat list for a non-selected
+        // chat, in which case we must leave the current route untouched.
+        const viewingThisChat = chatIdentifiersEqual($selectedChatIdStore, chatId);
+        if (viewingThisChat) {
+            navigate(routeForScope($chatListScopeStore));
+        }
+        return client.deleteDirectChat(chatId, blockUser).then((success) => {
+            if (!success) {
+                toastStore.showFailureToast(i18nKey("deleteDirectChatFailure"));
+                if (viewingThisChat) {
+                    navigate(routeForChatIdentifier($chatListScopeStore.kind, chatId));
+                }
+            }
+        });
+    }
+
+    function deleteCommunity(id: CommunityIdentifier): Promise<void> {
+        navigate(routeForScope(client.getDefaultScope()));
+
+        client.deleteCommunity(id).then((success) => {
+            if (!success) {
+                toastStore.showFailureToast(i18nKey("communities.errors.deleteFailed"));
+                navigate(`/community/${id.communityId}`);
+            }
+        });
+
+        return Promise.resolve();
+    }
+
+    function leaveCommunity(id: CommunityIdentifier): Promise<void> {
+        navigate(routeForScope(client.getDefaultScope()));
+
+        client.leaveCommunity(id).then((success) => {
+            if (!success) {
+                toastStore.showFailureToast(i18nKey("communities.errors.leaveFailed"));
+                navigate(`/community/${id.communityId}`);
+            }
+        });
+
+        return Promise.resolve();
+    }
+
+    function leaveGroup(chatId: MultiUserChatIdentifier, level: Level): Promise<void> {
+        navigate(routeForScope($chatListScopeStore));
+
+        client.leaveGroup(chatId).then((resp) => {
+            if (resp !== "success") {
+                if (resp === "owner_cannot_leave") {
+                    toastStore.showFailureToast(i18nKey("ownerCantLeave", undefined, level, true));
+                } else {
+                    toastStore.showFailureToast(
+                        i18nKey("failedToLeaveGroup", undefined, level, true),
+                    );
+                }
+                navigate(routeForChatIdentifier($chatListScopeStore.kind, chatId));
+            } else {
+                publish("closeModalStack");
+            }
+        });
+
+        return Promise.resolve();
+    }
+
+    function chatWith(chatId: DirectChatIdentifier) {
+        publish("closeModalStack");
+        const chat = $chatSummariesListStore.find((c) => {
+            return c.kind === "direct_chat" && c.them === chatId;
+        });
+
+        navigate(routeForChatIdentifier(chat ? $chatListScopeStore.kind : "chats", chatId));
+    }
+
+    function replyPrivatelyTo(context: EnhancedReplyContext) {
+        if (context.sender === undefined) return;
+
+        const chat = $chatSummariesListStore.find((c) => {
+            return (
+                c.kind === "direct_chat" &&
+                chatIdentifiersEqual(c.them, {
+                    kind: "direct_chat",
+                    userId: context.sender!.userId,
+                })
+            );
+        });
+
+        const chatId = chat?.id ?? { kind: "direct_chat", userId: context.sender.userId };
+        localUpdates.draftMessages.setTextContent({ chatId }, "");
+        localUpdates.draftMessages.setReplyingTo({ chatId }, context);
+        if (chat) {
+            navigate(routeForChatIdentifier($chatListScopeStore.kind, chatId));
+        } else {
+            createDirectChat(chatId as DirectChatIdentifier);
+        }
+    }
+
+    function showMakeProposalModal() {
+        if (nervousSystem !== undefined && selectedMultiUserChat !== undefined) {
+            modal = { kind: "make_proposal", chat: selectedMultiUserChat, nervousSystem };
+        }
+    }
+
+    function toggleMuteNotifications(detail: {
+        chatId: ChatIdentifier;
+        mute: boolean | undefined;
+        muteAtEveryone: boolean | undefined;
+    }) {
+        const op = detail.mute ? "muted" : "unmuted";
+        client
+            .toggleMuteNotifications(detail.chatId, detail.mute, detail.muteAtEveryone)
+            .then((success) => {
+                if (!success) {
+                    toastStore.showFailureToast(
+                        i18nKey("toggleMuteNotificationsFailed", {
+                            operation: $_(op),
+                        }),
+                    );
+                }
+            });
+    }
+
+    async function copyUrl() {
+        try {
+            const url = new URL(
+                `${window.location.pathname}${window.location.search}${window.location.hash}`,
+                client.canonicalOrigin(),
+            );
+            await navigator.clipboard.writeText(url.toString());
+            toastStore.showSuccessToast(i18nKey("urlCopiedToClipboard"));
+        } catch (err) {
+            console.error("Failed to copy url to clipboard", err);
+            toastStore.showFailureToast(i18nKey("failedToCopyUrlToClipboard"));
+        }
+    }
+
+    async function createDirectChat(chatId: DirectChatIdentifier): Promise<boolean> {
+        if (!(await client.createDirectChat(chatId))) {
+            modal = { kind: "not_found" };
+            return false;
+        }
+
+        navigate(routeForChatIdentifier("chats", chatId));
+        return true;
+    }
+
+    function successfulImport(id: ChannelIdentifier) {
+        navigate(`/community/${id.communityId}`);
+    }
+
+    function profileLinkClicked(ev: CustomEvent<ProfileLinkClickedEvent>) {
+        showProfileCard = {
+            userId: ev.detail.userId,
+            chatButton: ev.detail.chatButton,
+            inGlobalContext: ev.detail.inGlobalContext,
+            alignTo: ev.target ? (ev.target as HTMLElement) : undefined,
+        };
+    }
+
+    function chatWithFromProfileCard() {
+        if (showProfileCard === undefined) return;
+        chatWith({ kind: "direct_chat", userId: showProfileCard.userId });
+        showProfileCard = undefined;
+    }
+
+    let forgotPin = $state(false);
+
+    function onForgotPin() {
+        forgotPin = true;
+    }
+
+    function onPinNumberComplete(pin: string | undefined) {
+        if (pin) {
+            $pinNumberResolverStore?.resolve(pin);
+        }
+    }
+
+    function onPinNumberClose() {
+        $pinNumberResolverStore?.reject();
+    }
+
+    function verifyHumanity() {
+        modal = { kind: "verify_humanity" };
+    }
+
+    let confirmMessage = $derived(getConfirmMessage(confirmActionEvent));
+    let selectedMultiUserChat = $derived(
+        $selectedChatSummaryStore?.kind === "group_chat" ||
+            $selectedChatSummaryStore?.kind === "channel"
+            ? $selectedChatSummaryStore
+            : undefined,
+    );
+    let governanceCanisterId = $derived(
+        selectedMultiUserChat !== undefined
+            ? selectedMultiUserChat.subtype?.governanceCanisterId
+            : undefined,
+    );
+    let nervousSystem = $derived(client.tryGetNervousSystem(governanceCanisterId));
+    // let nervousSystem = $derived(client.tryGetNervousSystem("rrkah-fqaaa-aaaaa-aaaaq-cai"));
+
+    let showOnboarding = $derived(client.isHomeRoute($routeStore) && $anonUserStore);
+
+    trackedEffect("identity-state", () => {
+        if (
+            $identityStateStore.kind === "logged_in" &&
+            $identityStateStore.postLogin?.kind === "join_group" &&
+            $chatsInitialisedStore
+        ) {
+            // const join = { ...$identityStateStore.postLogin };
+            client.clearPostLoginState();
+            // tick().then(() => joinGroup(join));
+        }
+    });
+
+    trackedEffect("route-change", () => {
+        routeChange($chatsInitialisedStore, $routeStore);
+    });
+
+    $effect(() => {
+        if ($chatsInitialisedStore) {
+            const faq = $querystringStore.get("faq");
+            if (faq !== null) {
+                navigate(`/faq?q=${faq}`);
+            }
+            if ($querystringStore.get("hof") !== null) {
+                modal = { kind: "hall_of_fame" };
+                navigate(removeQueryStringParam("hof"));
+            }
+        }
+    });
+
+    let mainClass = $derived.by(() => {
+        const cls = [];
+        if ($offlineStore) {
+            cls.push("offline");
+        }
+        return cls.join(" ");
+    });
+</script>
+
+{#if showProfileCard !== undefined}
+    {@const profileUser = $allUsersStore.get(showProfileCard.userId)}
+    {#if profileUser?.kind !== "bot"}
+        <ViewUserProfile
+            userId={showProfileCard.userId}
+            inGlobalContext={showProfileCard.inGlobalContext}
+            chatButton={showProfileCard.chatButton}
+            onOpenDirectChat={chatWithFromProfileCard}
+            onClose={() => (showProfileCard = undefined)} />
+    {/if}
+{/if}
+
+<Container height={"fill"} width={"fill"} supplementalClass={mainClass} tag="main">
+    {#if showOnboarding}
+        <OnboardModal />
+    {:else}
+        {#if client.isNativeApp()}
+            <NativeUpgradeBanner />
+        {/if}
+        <LeftPanel />
+        <MiddlePanel />
+    {/if}
+</Container>
+
+{#if $anonUserStore && !showOnboarding && $routeStore.kind !== "communities_route"}
+    <AnonFooter />
+{/if}
+
+{#if $offlineStore}
+    <OfflineFooter />
+{/if}
+
+{#if confirmActionEvent !== undefined}
+    <AreYouSure
+        doubleCheck={confirmActionEvent.kind === "delete_community"
+            ? confirmActionEvent.doubleCheck
+            : undefined}
+        message={confirmMessage}
+        action={onConfirmAction} />
+{/if}
+
+<Toast />
+
+{#if modal.kind !== "none"}
+    {#if modal.kind === "not_found"}
+        <NotFound onClose={closeNoAccess} />
+    {:else if modal.kind === "suspended"}
+        <SuspendedModal onClose={closeModal} />
+    {:else if modal.kind === "suspending"}
+        <SuspendModal userId={modal.userId} onClose={closeModal} />
+    {:else if modal.kind === "verify_humanity"}
+        <VerifyHumanity onClose={closeModal} onSuccess={closeModal} />
+    {:else if modal.kind === "no_access"}
+        <NoAccess onClose={closeNoAccess} />
+    {:else if modal.kind === "make_proposal"}
+        <MakeProposalModal
+            selectedMultiUserChat={modal.chat}
+            nervousSystem={modal.nervousSystem}
+            onClose={closeModal} />
+    {/if}
+{/if}
+
+{#if $rulesAcceptanceStore !== undefined}
+    <AcceptRulesModal />
+{:else if forgotPin}
+    <Sheet onDismiss={() => (forgotPin = false)}>
+        <SetPinNumberModal
+            onPinSet={onPinNumberComplete}
+            onClose={() => (forgotPin = false)}
+            type={{ kind: "forgot", while: { kind: "enter" } }} />
+    </Sheet>
+{:else if $pinNumberResolverStore !== undefined}
+    <PinNumberModal
+        onClose={onPinNumberClose}
+        onComplete={onPinNumberComplete}
+        onForgot={onForgotPin} />
+{/if}
+
+{#if $chitPopup && !$disableChit}
+    <ChitEarned />
+{/if}
+
+<style lang="scss">
+    :global(.edited-msg) {
+        @include font(light, normal, fs-70);
+    }
+
+    :global(main.offline) {
+        margin-bottom: toRem(50);
+    }
+</style>
diff --git a/frontend/app/src/mobile/shell/HomeRoute.svelte b/frontend/app/src/mobile/shell/HomeRoute.svelte
new file mode 100644
index 0000000000..46f7ccd82c
--- /dev/null
+++ b/frontend/app/src/mobile/shell/HomeRoute.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+    import { chatsInitialisedStore, identityStateStore } from "@client";
+    import FancyLoader from "@src/mobile/ui/icons/FancyLoader.svelte";
+    import Home from "./Home.svelte";
+
+    let registering = $derived(
+        $identityStateStore.kind === "registering" ||
+            ($identityStateStore.kind === "loading_user" && $identityStateStore.registering),
+    );
+
+    let showLoader = $derived(
+        !registering && (!$chatsInitialisedStore || $identityStateStore.kind === "loading_user"),
+    );
+</script>
+
+{#if showLoader}
+    <div class="loading">
+        <div class="inner-loader">
+            <FancyLoader />
+        </div>
+    </div>
+{:else}
+    <Home />
+{/if}
+
+<style lang="scss">
+    .loading {
+        width: 100vw;
+        height: 100vh;
+        height: calc(var(--vh, 1vh) * 100);
+        height: 100dvh; // firefox will ignore this
+        display: grid;
+    }
+
+    .inner-loader {
+        width: toRem(48);
+        height: toRem(48);
+        margin: auto;
+    }
+</style>
diff --git a/frontend/app/src/mobile/shell/LeftPanel.svelte b/frontend/app/src/mobile/shell/LeftPanel.svelte
new file mode 100644
index 0000000000..c69ab39997
--- /dev/null
+++ b/frontend/app/src/mobile/shell/LeftPanel.svelte
@@ -0,0 +1,175 @@
+<script lang="ts">
+    import { i18nKey } from "@src/i18n/i18n";
+    import { Caption, ColourVars, CommonButton, Container } from "component-lib";
+    import {
+        activityFeedShowing,
+        anonUserStore,
+        chatListScopeStore,
+        ROLE_NONE,
+        routeStore,
+        selectedChatIdStore,
+        selectedCommunitySummaryStore,
+        showLeft,
+    } from "@client";
+    import ArrowLeft from "svelte-material-icons/ArrowLeft.svelte";
+    import Enter from "svelte-material-icons/LocationEnter.svelte";
+    import { rtlStore } from "@src/stores/rtl";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import ActivityFeed from "@src/mobile/features/activity/ActivityFeed.svelte";
+    import BottomBar, { type Selection } from "@src/mobile/features/nav/BottomBar.svelte";
+    import ChatList from "@src/mobile/features/chatlist/ChatList.svelte";
+    import PreviewWrapper from "@src/mobile/features/chats/community/PreviewWrapper.svelte";
+    import CommunitiesSheet from "@src/mobile/features/chats/community/CommunitiesSheet.svelte";
+    import SlidingModals from "./SlidingModals.svelte";
+    import UserProfileSummary from "@src/mobile/features/profile/view/UserProfileSummary.svelte";
+    import ActiveCallSummary from "@src/mobile/features/calls/ActiveCallSummary.svelte";
+    import Wallet from "@src/mobile/features/wallet/Wallet.svelte";
+    import WelcomePage from "./WelcomePage.svelte";
+
+    let showPreview = $derived(
+        !$anonUserStore &&
+            $selectedCommunitySummaryStore?.membership.role === ROLE_NONE &&
+            $selectedChatIdStore === undefined,
+    );
+    let showProfileSummary = $derived($routeStore.kind === "profile_summary_route");
+    let showWelcome = $derived($routeStore.kind === "welcome_route");
+    let showWallet = $derived($routeStore.kind === "wallet_route");
+    let showNotifications = $derived($routeStore.kind === "notifications_route");
+    let selection = $derived<Selection>(bottomBarSelection());
+    let sectionClass = $derived.by(() => {
+        const c = ["left_panel"];
+        if ($showLeft) {
+            c.push("visible");
+        }
+        if ($rtlStore) {
+            c.push("rtl");
+        }
+        return c.join(" ");
+    });
+    let communitiesExpanded = $state(false);
+    let dimmed = $derived(communitiesExpanded && selection === "communities");
+
+    $effect(() => {
+        if (selection !== "communities") {
+            communitiesExpanded = false;
+        }
+    });
+
+    function bottomBarSelection() {
+        if (showNotifications) {
+            return "notification";
+        } else if (showProfileSummary) {
+            return "profile";
+        } else if (showWallet) {
+            return "wallet";
+        } else if (showWelcome) {
+            return "communities";
+        } else {
+            switch ($chatListScopeStore.kind) {
+                case "community":
+                    return "communities";
+                case "favourite":
+                    return "favourites";
+                default:
+                    return "chats";
+            }
+        }
+    }
+</script>
+
+<SlidingModals />
+
+<Container
+    mainAxisAlignment={"spaceBetween"}
+    supplementalClass={sectionClass}
+    background={ColourVars.background0}
+    tag={"section"}
+    height={"fill"}
+    direction={"vertical"}>
+    <Container
+        supplementalClass={`left_panel_inner ${dimmed ? "dimmed" : ""}`}
+        height={"fill"}
+        width={"fill"}
+        direction={"vertical"}>
+        {#if showNotifications}
+            <ActivityFeed />
+        {:else if showWallet}
+            <Wallet />
+        {:else if showProfileSummary}
+            <UserProfileSummary />
+        {:else if showWelcome}
+            <WelcomePage />
+        {:else}
+            <ChatList />
+        {/if}
+        <ActiveCallSummary />
+    </Container>
+
+    {#if !$anonUserStore}
+        {#if !showPreview && $chatListScopeStore.kind === "community" && !$activityFeedShowing}
+            <CommunitiesSheet bind:expanded={communitiesExpanded} />
+        {/if}
+        {#if showPreview}
+            <PreviewWrapper>
+                {#snippet children(joiningCommunity, joinCommunity, cancelPreview, gatesInEffect)}
+                    <Container
+                        gap={"sm"}
+                        direction={"vertical"}
+                        padding={"lg"}
+                        background={ColourVars.background1}>
+                        <Container crossAxisAlignment={"center"}>
+                            <Container>
+                                <CommonButton onClick={cancelPreview} size={"small_text"}>
+                                    {#snippet icon(color, size)}
+                                        <ArrowLeft {color} {size} />
+                                    {/snippet}
+                                    <Translatable resourceKey={i18nKey("back")} />
+                                </CommonButton>
+                            </Container>
+                            <CommonButton
+                                mode={"active"}
+                                loading={joiningCommunity}
+                                disabled={joiningCommunity}
+                                onClick={joinCommunity}>
+                                {#snippet icon(color, size)}
+                                    <Enter {color} {size} />
+                                {/snippet}
+                                <Translatable resourceKey={i18nKey("communities.joinCommunity")} />
+                            </CommonButton>
+                        </Container>
+                        {#if gatesInEffect}
+                            <Container padding={["zero", "sm"]} mainAxisAlignment={"end"}>
+                                <Caption width={"hug"} fontWeight={"bold"} colour={"textSecondary"}>
+                                    <Translatable resourceKey={i18nKey("Access gates enabled")} />
+                                </Caption>
+                            </Container>
+                        {/if}
+                    </Container>
+                {/snippet}
+            </PreviewWrapper>
+        {/if}
+        <BottomBar {selection} />
+    {/if}
+</Container>
+
+<style lang="scss">
+    :global(.container.left_panel:not(.visible)) {
+        display: none !important;
+    }
+
+    :global(.container.left_panel_inner) {
+        transition: opacity 200ms ease-in-out;
+    }
+
+    :global(.container.left_panel_inner.dimmed) {
+        opacity: 0.5;
+    }
+
+    /* .join {
+        position: sticky;
+        bottom: 0;
+        padding: $sp3 $sp4;
+        background-color: var(--entry-bg);
+        width: 100%;
+    } */
+</style>
diff --git a/frontend/app/src/mobile/shell/MiddlePanel.svelte b/frontend/app/src/mobile/shell/MiddlePanel.svelte
new file mode 100644
index 0000000000..6ff8f292f5
--- /dev/null
+++ b/frontend/app/src/mobile/shell/MiddlePanel.svelte
@@ -0,0 +1,125 @@
+<script lang="ts">
+    import { trackedEffect } from "@src/utils/effects.svelte";
+    import {
+        botState,
+        chatIdentifiersEqual,
+        directChatBotsStore,
+        filteredProposalsStore,
+        publish,
+        rightPanelMode,
+        rightPanelWidth,
+        routeStore,
+        selectedChatIdStore,
+        selectedChatSummaryStore,
+        showMiddle,
+        type ChatIdentifier,
+    } from "@client";
+    import { tick } from "svelte";
+    import { activeVideoCall, type ActiveVideoCall } from "@src/stores/video";
+    import { currentTheme } from "@src/theme/themes";
+    import ExploreCommunities from "@src/mobile/features/chats/community/explore/Explore.svelte";
+    import CurrentChat from "@src/mobile/features/chats/core/CurrentChat.svelte";
+
+    let middlePanel: HTMLElement | undefined;
+
+    let bot = $derived.by(() => {
+        if ($selectedChatSummaryStore === undefined) return undefined;
+        if ($selectedChatSummaryStore.kind !== "direct_chat") return undefined;
+        return botState.externalBots.get($selectedChatSummaryStore.them.userId);
+    });
+    let uninstalledBot = $derived.by(() => {
+        return bot !== undefined && $directChatBotsStore.get(bot.id) === undefined
+            ? bot
+            : undefined;
+    });
+
+    trackedEffect("installing-bot", () => {
+        if (uninstalledBot !== undefined && $selectedChatSummaryStore !== undefined) {
+            publish("installBot", { bot: uninstalledBot, collection: $selectedChatSummaryStore });
+        }
+    });
+
+    function alignVideoCall(
+        call: ActiveVideoCall | undefined,
+        chatId: ChatIdentifier | undefined,
+        rightPanelWidth: number | undefined,
+        attempts: number = 0,
+    ) {
+        if (call && chatIdentifiersEqual(call.chatId, chatId) && middlePanel) {
+            const callContainer = document.getElementById("video-call-container");
+            const rect = middlePanel.getBoundingClientRect();
+            if (callContainer) {
+                if (call.view === "fullscreen") {
+                    let width = window.innerWidth;
+                    if (
+                        $rightPanelMode !== "floating" &&
+                        (call.threadOpen || call.participantsOpen)
+                    ) {
+                        width = width - (rightPanelWidth ?? 500);
+                    }
+                    callContainer.style.setProperty("left", `0px`);
+                    callContainer.style.setProperty("width", `${width}px`);
+                    callContainer.style.setProperty("top", `0px`);
+                    callContainer.style.setProperty("height", `${window.innerHeight}px`);
+                } else {
+                    callContainer.style.setProperty("left", `${rect.left}px`);
+                    callContainer.style.setProperty("width", `${rect.width}px`);
+                    callContainer.style.setProperty("top", `${rect.top}px`);
+                    callContainer.style.setProperty("height", `${rect.height}px`);
+                }
+            } else {
+                // hack: there is a race condition here and it's possible we don't find the container on the first try
+                if (attempts === 0) {
+                    tick().then(() => alignVideoCall(call, chatId, attempts + 1));
+                }
+            }
+        }
+    }
+
+    function resize() {
+        alignVideoCall($activeVideoCall, $selectedChatIdStore, $rightPanelWidth);
+    }
+    $effect(() => {
+        if (middlePanel) {
+            resize();
+        }
+    });
+</script>
+
+<svelte:window onresize={resize} onorientationchange={resize} />
+
+<section
+    bind:this={middlePanel}
+    class:visible={$showMiddle}
+    class:halloween={$currentTheme.name === "halloween"}>
+    {#if $routeStore.kind === "communities_route"}
+        <ExploreCommunities />
+    {:else if $selectedChatSummaryStore !== undefined}
+        <CurrentChat chat={$selectedChatSummaryStore} filteredProposals={$filteredProposalsStore} />
+    {/if}
+</section>
+
+<style lang="scss">
+    section {
+        min-width: unset;
+        overflow: auto;
+        overflow-x: hidden;
+        flex: 13;
+        background: none;
+        padding: 0;
+        height: 100%;
+        flex-direction: column;
+        display: flex;
+
+        &.halloween::after {
+            @include cobweb();
+            bottom: 0;
+            right: 0;
+            transform: scaleY(-1);
+        }
+
+        &:not(.visible) {
+            display: none;
+        }
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/NativeUpgradeBanner.svelte b/frontend/app/src/mobile/shell/NativeUpgradeBanner.svelte
similarity index 87%
rename from frontend/app/src/components_mobile/NativeUpgradeBanner.svelte
rename to frontend/app/src/mobile/shell/NativeUpgradeBanner.svelte
index a32694e14d..5906cca208 100644
--- a/frontend/app/src/components_mobile/NativeUpgradeBanner.svelte
+++ b/frontend/app/src/mobile/shell/NativeUpgradeBanner.svelte
@@ -2,9 +2,9 @@
     import { VersionChecker } from "@src/utils/version.svelte";
     import { BodySmall, Button, ColourVars, Column, Overview, Sheet } from "component-lib";
     import { onDestroy } from "svelte";
-    import { i18nKey } from "../i18n/i18n";
-    import Progress from "./Progress.svelte";
-    import Translatable from "./Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Progress from "@src/mobile/shared/Progress.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
 
     let checker = new VersionChecker();
 
diff --git a/frontend/app/src/components_mobile/home/NewMessage.svelte b/frontend/app/src/mobile/shell/NewMessage.svelte
similarity index 94%
rename from frontend/app/src/components_mobile/home/NewMessage.svelte
rename to frontend/app/src/mobile/shell/NewMessage.svelte
index 8b364afc08..36ceea5b1b 100644
--- a/frontend/app/src/components_mobile/home/NewMessage.svelte
+++ b/frontend/app/src/mobile/shell/NewMessage.svelte
@@ -17,15 +17,15 @@
         type GroupSearchResponse,
         type UserSummary,
     } from "@client";
-    import { navigate } from "@utils/navigation";
+    import { navigate } from "@src/utils/navigation";
     import { getContext } from "svelte";
     import AccountMultiplePlusOutline from "svelte-material-icons/AccountMultiplePlusOutline.svelte";
-    import FilteredUsername from "@shared_components/FilteredUsername.svelte";
-    import MatchingUser from "../MatchingUser.svelte";
-    import Translatable from "../Translatable.svelte";
+    import FilteredUsername from "@src/ui/FilteredUsername.svelte";
+    import MatchingUser from "@src/mobile/shared/MatchingUser.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
     import ChatListSearch from "./ChatListSearch.svelte";
-    import { updateGroupState } from "./createOrUpdateGroup/group.svelte";
-    import SlidingPageContent from "./SlidingPageContent.svelte";
+    import { updateGroupState } from "@src/mobile/features/chats/group/edit/group.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/mobile/shell/NotFound.svelte b/frontend/app/src/mobile/shell/NotFound.svelte
new file mode 100644
index 0000000000..30877fac0d
--- /dev/null
+++ b/frontend/app/src/mobile/shell/NotFound.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { Sheet } from "component-lib";
+    import Home from "svelte-material-icons/HomeCircleOutline.svelte";
+    import RobotDead from "svelte-material-icons/RobotDeadOutline.svelte";
+    import NothingToSee from "@src/mobile/shared/NothingToSee.svelte";
+
+    interface Props {
+        onClose?: () => void;
+    }
+    let { onClose }: Props = $props();
+</script>
+
+<Sheet onDismiss={onClose}>
+    <NothingToSee
+        title={"Page not found"}
+        subtitle={"We can't find the page you're looking for"}
+        reset={onClose ? { text: "Go home", onClick: onClose, icon: home } : undefined}
+        height={{ size: "20rem" }}>
+        {#snippet icon(color, size)}
+            <RobotDead {color} {size} />
+        {/snippet}
+    </NothingToSee>
+</Sheet>
+
+{#snippet home(color: string, size: string)}
+    <Home {color} {size} />
+{/snippet}
diff --git a/frontend/app/src/mobile/shell/NotificationsBar.svelte b/frontend/app/src/mobile/shell/NotificationsBar.svelte
new file mode 100644
index 0000000000..812c69042d
--- /dev/null
+++ b/frontend/app/src/mobile/shell/NotificationsBar.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+    import { BodySmall, CommonButton, Container, Sheet, Title } from "component-lib";
+    import type { OpenChat } from "@client";
+    import { anonUserStore, notificationStatus } from "@client";
+    import { getContext } from "svelte";
+    import Bell from "svelte-material-icons/BellOutline.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    $inspect(`PUSH STATUS: ${$notificationStatus}`);
+</script>
+
+{#if !$anonUserStore && $notificationStatus === "prompt"}
+    <Sheet onDismiss={() => client.setSoftDisabled(true)}>
+        <Container height={"hug"} padding={"xl"} gap={"xl"} direction={"vertical"}>
+            <Container gap={"lg"} padding={"md"} direction={"vertical"}>
+                <Title fontWeight={"bold"}>
+                    <Translatable resourceKey={i18nKey("Notifications")} />
+                </Title>
+
+                <BodySmall colour={"textSecondary"}>
+                    <Translatable resourceKey={i18nKey("enableNotifications")} />
+                </BodySmall>
+            </Container>
+
+            <Container gap={"md"} crossAxisAlignment={"end"} mainAxisAlignment={"end"}>
+                <CommonButton onClick={() => client.setSoftDisabled(true)} size={"medium"}>
+                    <Translatable resourceKey={i18nKey("noThanks")} />
+                </CommonButton>
+                <CommonButton
+                    mode={"active"}
+                    onClick={() => client.askForNotificationPermission()}
+                    size={"medium"}>
+                    {#snippet icon(color, size)}
+                        <Bell {color} {size} />
+                    {/snippet}
+                    <Translatable resourceKey={i18nKey("yesPlease")} />
+                </CommonButton>
+            </Container>
+        </Container>
+    </Sheet>
+{/if}
diff --git a/frontend/app/src/mobile/shell/OfflineFooter.svelte b/frontend/app/src/mobile/shell/OfflineFooter.svelte
new file mode 100644
index 0000000000..2a6ae4e5b7
--- /dev/null
+++ b/frontend/app/src/mobile/shell/OfflineFooter.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { ColourVars, Row, Title } from "component-lib";
+    import CloudOffOutline from "svelte-material-icons/CloudOffOutline.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+</script>
+
+<Row
+    padding={["md", "lg"]}
+    mainAxisAlignment={"spaceBetween"}
+    crossAxisAlignment={"center"}
+    supplementalClass={"offline_footer"}
+    backgroundColor={ColourVars.warning}>
+    <CloudOffOutline size={"1.5em"} color={"currentColor"} />
+    <Title width={"hug"} uppercase>
+        <Translatable resourceKey={i18nKey("offlineMessage")} />
+    </Title>
+</Row>
+
+<style lang="scss">
+    :global(.container.offline_footer) {
+        position: absolute;
+        bottom: 0;
+        cursor: pointer;
+        @include z-index("anon-banner");
+    }
+</style>
diff --git a/frontend/app/src/mobile/shell/P2PSwapContentBuilder.svelte b/frontend/app/src/mobile/shell/P2PSwapContentBuilder.svelte
new file mode 100644
index 0000000000..0d4fbddb17
--- /dev/null
+++ b/frontend/app/src/mobile/shell/P2PSwapContentBuilder.svelte
@@ -0,0 +1,260 @@
+<script lang="ts">
+    import { Body, Subtitle, Column, CommonButton2, Row, ColourVars } from "component-lib";
+    import type { MessageContext, OpenChat, P2PSwapContentInitial } from "@client";
+    import {
+        enhancedCryptoLookup as cryptoLookup,
+        isDiamondStore,
+        localUpdates,
+        ONE_DAY,
+        publish,
+    } from "@client";
+    import { getContext, onMount } from "svelte";
+    import { _ } from "svelte-i18n";
+    import Paperclip from "svelte-material-icons/Paperclip.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import AreYouSure from "@src/mobile/shared/AreYouSure.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import CryptoSelector from "@src/mobile/shared/CryptoSelector.svelte";
+    import DurationSelector from "@src/mobile/shared/DurationSelector.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
+    import TokenInput from "@src/mobile/shared/TokenInput.svelte";
+    import TransferFeesMessage from "@src/mobile/shared/TransferFeesMessage.svelte";
+    import { TokenState } from "@src/mobile/features/wallet/walletState.svelte";
+    import { keyboard } from "@src/stores/keyboard.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        fromLedger: string;
+        messageContext: MessageContext;
+        onClose: () => void;
+    }
+
+    let { fromLedger = $bindable(), messageContext, onClose }: Props = $props();
+
+    let toLedger: string = $state(initialToLedger());
+    let fromDetails = $derived($cryptoLookup.get(fromLedger)!);
+    let toDetails = $derived($cryptoLookup.get(toLedger)!);
+    let fromState = $derived(new TokenState(fromDetails));
+    let toState = $derived(new TokenState(toDetails));
+    let fromAmount: bigint = $state(0n);
+    let fromAmountValid: boolean = $state(false);
+    let toAmount: bigint = $state(0n);
+    let toAmountValid: boolean = $state(false);
+    let expiresIn: bigint = $state(BigInt(ONE_DAY));
+    let error: string | undefined = $state(undefined);
+    let tokenInputState: "ok" | "zero" | "too_low" | "too_high" = $state("ok");
+    let confirming = $state(false);
+
+    let totalFees = $derived(fromDetails.transferFee * BigInt(2));
+    let minAmount = $derived(fromDetails.transferFee * BigInt(10));
+    let valid = $derived(error === undefined && fromAmountValid && toAmountValid);
+
+    let wasViewportResizeEnabled = $state(false);
+
+    function initialToLedger() {
+        // just grab any old ledger for starters
+        return [...$cryptoLookup.keys()].find((l) => l !== fromLedger) ?? "";
+    }
+
+    function reinstateViewportResize() {
+        if (!wasViewportResizeEnabled) keyboard.disableViewportResize();
+
+        // This will prevent disableViewportResize call in case when this
+        // function was called before component un-mount.
+        wasViewportResizeEnabled = true;
+    }
+
+    onMount(() => {
+        wasViewportResizeEnabled = keyboard.viewportResizeEnabled;
+
+        // If resize is currently not enabled, enable it!
+        if (!keyboard.viewportResizeEnabled) keyboard.enableViewportResize();
+
+        return () => {
+            // If resize was not enabled enabled when the component was mounted,
+            // disable it again.
+            reinstateViewportResize();
+        };
+    });
+
+    $effect(() => {
+        if (tokenInputState === "too_low") {
+            error = $_("minimumAmount", {
+                values: {
+                    amount: client.formatTokens(minAmount, fromDetails.decimals),
+                    symbol: fromDetails.symbol,
+                },
+            });
+        } else {
+            error = undefined;
+        }
+    });
+
+    function onSend() {
+        if (!$isDiamondStore) {
+            publish("upgrade");
+            return;
+        }
+
+        if (!valid) {
+            return;
+        }
+
+        confirming = true;
+    }
+
+    function send(yes: boolean): Promise<void> {
+        confirming = false;
+
+        if (!yes) {
+            return Promise.resolve();
+        }
+
+        const content: P2PSwapContentInitial = {
+            kind: "p2p_swap_content_initial",
+            token0: {
+                ledger: fromLedger,
+                symbol: fromDetails.symbol,
+                fee: fromDetails.transferFee,
+                decimals: fromDetails.decimals,
+            },
+            token1: {
+                ledger: toLedger,
+                symbol: toDetails.symbol,
+                fee: toDetails.transferFee,
+                decimals: toDetails.decimals,
+            },
+            token0Amount: fromAmount,
+            token1Amount: toAmount,
+            caption: undefined,
+            expiresIn,
+        };
+
+        localUpdates.draftMessages.setAttachment(messageContext, content);
+        onClose();
+
+        // Component unload does not happen fast enough for the viewport resize
+        // to reinstate to it's original value if we're immediately focusing
+        // message entry.
+        reinstateViewportResize();
+
+        // Resolve on next animation frame to allow viewport resize to reinstate
+        // Note: this may work without rAF, but to be on the safe side.
+        return new Promise((resolve) => requestAnimationFrame(() => resolve()));
+    }
+
+    function onSelectFromToken(ledger: string, _: string) {
+        if (ledger === toLedger) {
+            toLedger =
+                [...$cryptoLookup.values()].map((t) => t.ledger).find((l) => l !== toLedger) ??
+                toLedger;
+        }
+    }
+</script>
+
+{#if confirming}
+    <AreYouSure
+        message={i18nKey("p2pSwap.confirmSend", {
+            amount: client.formatTokens(fromAmount + totalFees, fromDetails.decimals),
+            token: fromDetails.symbol,
+        })}
+        action={send} />
+{/if}
+
+<SlidingPageContent title={i18nKey("Create swap offer")}>
+    <Column gap={"xl"} padding={["lg", "lg", "huge"]} overflow="auto" height="fill">
+        <!-- Container for swap info -->
+        <Column
+            backgroundColor={ColourVars.background1}
+            padding={["xl", "lg"]}
+            borderRadius="lg"
+            gap="xxl">
+            <!-- Send token -->
+            <Column gap={"xl"}>
+                <Column gap="md">
+                    <Subtitle fontWeight={"bold"}>
+                        <Translatable resourceKey={i18nKey("Token to swap")} />
+                    </Subtitle>
+                    <Body colour={"textSecondary"}>
+                        <Translatable
+                            resourceKey={i18nKey(
+                                "This is the token that you are offering for exchange. You can only swap tokens for which you hold a non-zero balance. Top up via your wallet if necessary.",
+                            )} />
+                    </Body>
+                </Column>
+                <CryptoSelector
+                    filter={(t) => t.balance > 0}
+                    bind:ledger={fromLedger}
+                    draftAmount={fromAmount}
+                    showRefresh
+                    onSelect={onSelectFromToken} />
+                <TokenInput
+                    placeholder="Swap amount"
+                    balance={fromState.cryptoBalance}
+                    ledger={fromLedger}
+                    {minAmount}
+                    converted={fromState.formatConvertedTokens(fromAmount)}
+                    bind:status={tokenInputState}
+                    bind:valid={fromAmountValid}
+                    bind:amount={fromAmount}
+                    descriptionKey="Use the options above to select a specific percentage of your total token amount you would like to swap.">
+                    {#snippet subtext()}
+                        {`Minimum amount ${fromState.formatTokens(minAmount)} ${fromState.symbol}`}
+                    {/snippet}
+                </TokenInput>
+            </Column>
+
+            <!-- Receive token -->
+            <Column gap={"xl"}>
+                <Column gap="md">
+                    <Subtitle fontWeight={"bold"}>
+                        <Translatable resourceKey={i18nKey("Token to receive")} />
+                    </Subtitle>
+                    <Body colour={"textSecondary"}>
+                        <Translatable
+                            resourceKey={i18nKey(
+                                "This is the token that you would like to receive in return. You decide how many tokens you would like to receive in the exchange.",
+                            )} />
+                    </Body>
+                </Column>
+                <CryptoSelector filter={(t) => t.ledger !== fromLedger} bind:ledger={toLedger} />
+                <TokenInput
+                    placeholder="Receive amount"
+                    ledger={toLedger}
+                    converted={toState.formatConvertedTokens(toAmount)}
+                    bind:valid={toAmountValid}
+                    bind:amount={toAmount} />
+            </Column>
+        </Column>
+
+        <!-- Duration selection -->
+        <Column padding={["zero", "lg"]}>
+            <DurationSelector bind:duration={expiresIn}>
+                {#snippet title()}
+                    <Subtitle fontWeight={"bold"}>
+                        <Translatable resourceKey={i18nKey("Swap expiry time")} />
+                    </Subtitle>
+                {/snippet}
+            </DurationSelector>
+        </Column>
+
+        <!-- Fees and button -->
+        <Row
+            mainAxisAlignment="spaceBetween"
+            crossAxisAlignment="center"
+            padding={["lg", "md"]}
+            gap="xl">
+            <TransferFeesMessage
+                symbol={fromDetails.symbol}
+                tokenDecimals={fromDetails.decimals}
+                transferFees={totalFees} />
+            <CommonButton2 onClick={onSend} variant="primary" mode={"regular"} disabled={!valid}>
+                {#snippet icon(color, size)}
+                    <Paperclip {color} {size} />
+                {/snippet}
+                <Translatable resourceKey={i18nKey("Confirm")} />
+            </CommonButton2>
+        </Row>
+    </Column>
+</SlidingPageContent>
diff --git a/frontend/app/src/mobile/shell/PollBuilder.svelte b/frontend/app/src/mobile/shell/PollBuilder.svelte
new file mode 100644
index 0000000000..3bdecf87ac
--- /dev/null
+++ b/frontend/app/src/mobile/shell/PollBuilder.svelte
@@ -0,0 +1,490 @@
+<script lang="ts">
+    import {
+        AnchoredSheet,
+        Body,
+        BodySmall,
+        ColourVars,
+        Column,
+        CommonButton2,
+        Row,
+        Switch,
+        transition,
+        ExpandingTextArea,
+    } from "component-lib";
+    import {
+        ONE_DAY,
+        OpenChat,
+        publish,
+        type MessageContext,
+        type PollContent,
+        type TotalPollVotes,
+    } from "@client";
+    import { dragHandle, dragHandleZone, type DndEvent } from "svelte-dnd-action";
+    import { getContext, onMount } from "svelte";
+    import { _ } from "svelte-i18n";
+    import Cog from "svelte-material-icons/Cog.svelte";
+    import Check from "svelte-material-icons/Check.svelte";
+    import Chart from "svelte-material-icons/ChartBoxOutline.svelte";
+    import UnfoldMoreHorizontal from "svelte-material-icons/UnfoldMoreHorizontal.svelte";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import Setting from "@src/mobile/shared/Setting.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import DurationSelector from "@src/mobile/shared/DurationSelector.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
+    import { keyboard } from "@src/stores/keyboard.svelte";
+    import { flip } from "svelte/animate";
+
+    const MAX_QUESTION_LENGTH = 250;
+    const MAX_ANSWER_LENGTH = 75;
+    const MAX_ANSWERS = 10;
+
+    const client = getContext<OpenChat>("client");
+    const flipDurationMs = 100;
+
+    type Answer = {
+        _id: number;
+        value: string;
+    };
+
+    let answerId = 0;
+    const emptyAnswer = () => ({ _id: answerId++, value: "" });
+    const isAnswerEmpty = ({ value }: Answer): boolean => value.length === 0;
+
+    type CandidatePoll = {
+        pollQuestion: string;
+        anonymous: boolean;
+        showVotesBeforeEndDate: boolean;
+        allowMultipleVotesPerUser: boolean;
+        allowUserToChangeVote: boolean;
+        pollAnswers: Answer[];
+        duration: bigint;
+    };
+
+    interface Props {
+        messageContext: MessageContext;
+        onClose: () => void;
+    }
+
+    let { messageContext, onClose }: Props = $props();
+
+    let anchoredSheet: AnchoredSheet;
+    let poll: CandidatePoll = $state(emptyPoll());
+    let enoughAnswers = $derived(poll.pollAnswers.filter((a) => !isAnswerEmpty(a)).length >= 2);
+    let uniqueAnswers = $derived.by(() => {
+        const a = poll.pollAnswers.map((a) => a.value.toUpperCase());
+        return a.length === new Set(a).size;
+    });
+    let validQuestion = $derived(poll.pollQuestion.length > 0);
+    let validAnswers = $derived(enoughAnswers && uniqueAnswers);
+    let valid = $derived(validQuestion && validAnswers);
+
+    type ShortStatusKeys = {
+        visibility: string;
+        voteType: string;
+        voteEdit: string;
+        viewResults: string | undefined;
+    };
+
+    // Internationalisation required here, and in the component layout.
+    let shortStatus = $derived.by<ShortStatusKeys>(() => {
+        return {
+            visibility: poll.anonymous ? "poll.anonymous" : "poll.app.public",
+            voteType: poll.allowMultipleVotesPerUser ? "poll.app.multiVote" : "poll.app.singleVote",
+            voteEdit: poll.allowUserToChangeVote
+                ? "poll.app.canChangeVote"
+                : "poll.app.cantChangeVote",
+            viewResults: poll.showVotesBeforeEndDate ? undefined : "poll.app.resultsWillShow",
+        };
+    });
+
+    onMount(() => {
+        const wasViewportResizeEnabled = keyboard.viewportResizeEnabled;
+        // If resize is currently not enabled, enable it!
+        if (!wasViewportResizeEnabled) keyboard.enableViewportResize();
+
+        return () => {
+            // If resize was not enabled enabled when the component was mounted,
+            // disable it again.
+            if (!wasViewportResizeEnabled) keyboard.disableViewportResize();
+        };
+    });
+
+    export function resetPoll() {
+        poll = emptyPoll();
+    }
+
+    function emptyPoll() {
+        return {
+            pollQuestion: "",
+            anonymous: true,
+            showVotesBeforeEndDate: true,
+            allowMultipleVotesPerUser: false,
+            allowUserToChangeVote: true,
+            pollAnswers: [emptyAnswer(), emptyAnswer()],
+            duration: BigInt(ONE_DAY),
+        };
+    }
+
+    let addingAnswer = $state(false);
+    function addAnswer() {
+        if (addingAnswer) return;
+
+        addingAnswer = true;
+        const emptyCount = poll.pollAnswers.filter(isAnswerEmpty).length;
+
+        // Only add a new field if there are NO empty slots left
+        if (emptyCount === 0 && poll.pollAnswers.length < MAX_ANSWERS) {
+            transition(["fade"], () => {
+                poll.pollAnswers = [...poll.pollAnswers, emptyAnswer()];
+            });
+        }
+
+        setTimeout(() => (addingAnswer = false), 100);
+    }
+
+    function checkInputIfEmpty(idx: number) {
+        const emptyCount = poll.pollAnswers.filter(isAnswerEmpty).length;
+
+        // Remove if input is empty, and there's at least one more empty answer
+        if (idx > 1 && emptyCount > 1 && isAnswerEmpty(poll.pollAnswers[idx])) {
+            deleteAnswer(idx);
+        }
+    }
+
+    // TODO fix an (android) issue where an answer input loses the focus, after
+    // a previously focused input value was fully removed, and the input deleted.
+    function deleteAnswer(idx: number) {
+        transition(["fade"], () => {
+            poll.pollAnswers.splice(idx, 1);
+            normalizeTrailingEmpty();
+        });
+    }
+
+    // Helper to keep the "one trailing empty" rule
+    function normalizeTrailingEmpty() {
+        const nonEmpty = poll.pollAnswers.filter((a) => !isAnswerEmpty(a));
+
+        if (nonEmpty.length === 0) {
+            poll.pollAnswers = [emptyAnswer(), emptyAnswer()];
+        } else {
+            // Keep non-empty + one empty at the end
+            poll.pollAnswers = [...nonEmpty, emptyAnswer()];
+        }
+    }
+
+    function handleDndConsider(e: CustomEvent<DndEvent<Answer>>) {
+        poll.pollAnswers = e.detail.items;
+    }
+
+    function handleDndFinalize(e: CustomEvent<DndEvent<Answer>>) {
+        poll.pollAnswers = e.detail.items;
+    }
+
+    function createPollVotes(): TotalPollVotes {
+        if (poll.anonymous) {
+            return { kind: "anonymous_poll_votes", votes: {} };
+        } else if (poll.showVotesBeforeEndDate) {
+            return { kind: "visible_poll_votes", votes: {} };
+        } else {
+            return { kind: "hidden_poll_votes", votes: 0 };
+        }
+    }
+
+    function createPollContent(): PollContent | undefined {
+        return {
+            kind: "poll_content",
+            votes: {
+                total: createPollVotes(),
+                user: [],
+            },
+            config: {
+                allowMultipleVotesPerUser: poll.allowMultipleVotesPerUser,
+                allowUserToChangeVote: poll.allowUserToChangeVote,
+                text: poll.pollQuestion === "" ? undefined : poll.pollQuestion,
+                showVotesBeforeEndDate: poll.showVotesBeforeEndDate,
+                endDate: BigInt(+new Date()) + poll.duration,
+                anonymous: poll.anonymous,
+                options: [
+                    ...poll.pollAnswers
+                        .filter(({ value }) => value.length > 0)
+                        .map((a) => a.value)
+                        .values(),
+                ],
+            },
+            ended: false,
+        };
+    }
+
+    function start() {
+        const poll = createPollContent();
+        if (poll) {
+            client.sendMessageWithContent(messageContext, poll, false);
+            onClose();
+        }
+    }
+
+    function back() {
+        publish("closeModalPage");
+    }
+
+    // Used to preemptively hide the anchored sheet when input is focused, and
+    // we expect the keyboard to show, but it has not shown yet.
+    let preemptiveHideOptions = $state(false);
+    function inputFocused() {
+        if (client.isNativeApp() && !keyboard.visible) {
+            preemptiveHideOptions = true;
+        }
+    }
+
+    $effect(() => {
+        if (keyboard.visible) {
+            // Resets the value once the keyboard is visible.
+            preemptiveHideOptions = false;
+        }
+    });
+</script>
+
+<SlidingPageContent onBack={back} title={i18nKey("poll.create")}>
+    <Column height={"fill"} gap={"xxl"} padding={["xxl", "lg", "huge"]}>
+        <Column gap="sm" padding={["zero", "lg"]}>
+            <DurationSelector bind:duration={poll.duration}>
+                {#snippet title()}
+                    <Body fontWeight={"bold"}>
+                        <Translatable resourceKey={i18nKey("poll.pollDuration")} />
+                    </Body>
+                {/snippet}
+            </DurationSelector>
+        </Column>
+        <Column gap={"md"}>
+            <Column gap="sm" padding={["zero", "lg"]}>
+                <Body fontWeight={"bold"}>
+                    <Translatable resourceKey={i18nKey("poll.app.questionLabel")} />
+                </Body>
+            </Column>
+            <ExpandingTextArea
+                maxlength={MAX_QUESTION_LENGTH}
+                countdown
+                bind:value={poll.pollQuestion}
+                placeholder={interpolate($_, i18nKey("poll.app.questionInputPlaceholder"))}
+                onfocus={inputFocused}>
+                {#snippet subtext()}
+                    <Translatable resourceKey={i18nKey("poll.app.questionInputSubtext")} />
+                {/snippet}
+            </ExpandingTextArea>
+        </Column>
+
+        <Column gap={"lg"}>
+            <Column gap="sm" padding={["zero", "lg"]}>
+                <Body fontWeight={"bold"}>
+                    <Translatable resourceKey={i18nKey("poll.app.answerLabel")} />
+                </Body>
+                <Body colour="textSecondary">
+                    <Translatable resourceKey={i18nKey("poll.app.answerRequirements")} />
+                </Body>
+            </Column>
+            <Column gap="sm">
+                <div
+                    class={"dropzone"}
+                    use:dragHandleZone={{
+                        items: poll.pollAnswers,
+                        flipDurationMs,
+                        dropTargetStyle: {},
+                    }}
+                    onconsider={handleDndConsider}
+                    onfinalize={handleDndFinalize}>
+                    {#each poll.pollAnswers as ans, i (ans._id)}
+                        <div animate:flip={{ duration: flipDurationMs }}>
+                            <Row gap="sm" overflow="visible">
+                                <ExpandingTextArea
+                                    placeholder={interpolate(
+                                        $_,
+                                        i18nKey("poll.app.answerPlaceholder"),
+                                    )}
+                                    maxlength={MAX_ANSWER_LENGTH}
+                                    countdown
+                                    bind:value={poll.pollAnswers[i].value}
+                                    oninput={addAnswer}
+                                    onfocus={inputFocused}
+                                    onblur={() => checkInputIfEmpty(i)} />
+                                <div
+                                    use:dragHandle
+                                    aria-label="drag-handle for answer {i}"
+                                    class="handle">
+                                    <UnfoldMoreHorizontal
+                                        size="1.5rem"
+                                        color={ColourVars.textSecondary} />
+                                </div>
+                            </Row>
+                        </div>
+                    {/each}
+                </div>
+            </Column>
+        </Column>
+    </Column>
+
+    <div class="opts_sheet" class:hidden={keyboard.visible || preemptiveHideOptions}>
+        <AnchoredSheet bind:this={anchoredSheet}>
+            {#snippet collapsedContent()}
+                <Row
+                    gap="xl"
+                    mainAxisAlignment="spaceBetween"
+                    crossAxisAlignment={"center"}
+                    padding={["sm", "lg", "xl"]}>
+                    <Row
+                        gap="sm"
+                        width="fill"
+                        crossAxisAlignment="center"
+                        onClick={() => anchoredSheet.expand()}>
+                        <Column width="fill">
+                            <Row width="hug" gap="xs" crossAxisAlignment="end">
+                                <Body fontWeight="bold" colour="primary">
+                                    <Translatable
+                                        resourceKey={i18nKey("poll.app.additionalSettings")} />
+                                </Body>
+                                <Column padding={["zero", "zero", "xxs"]} width="hug">
+                                    <Cog size="1rem" color={ColourVars.primary} />
+                                </Column>
+                            </Row>
+                            <BodySmall colour="textSecondary" maxLines={3}>
+                                <Translatable resourceKey={i18nKey(shortStatus.visibility)} /> •
+                                <Translatable resourceKey={i18nKey(shortStatus.voteType)} /> •
+                                <Translatable resourceKey={i18nKey(shortStatus.voteEdit)} />
+                                {#if shortStatus.viewResults}
+                                    • <Translatable
+                                        resourceKey={i18nKey(shortStatus.viewResults)} />
+                                {/if}
+                            </BodySmall>
+                        </Column>
+                    </Row>
+                    <CommonButton2
+                        disabled={!valid}
+                        onClick={start}
+                        variant="primary"
+                        mode="regular">
+                        {#snippet icon(color, size)}
+                            <Chart {color} {size} />
+                        {/snippet}
+                        <Translatable resourceKey={i18nKey("poll.app.publish")} />
+                    </CommonButton2>
+                </Row>
+            {/snippet}
+            {#snippet expandedContent()}
+                <Column gap="xxl" padding={["xl", "xl", "huge"]}>
+                    <Setting
+                        toggle={() => (poll.anonymous = !poll.anonymous)}
+                        info={"poll.app.settings.publicSwitchInfo"}>
+                        <Switch
+                            onChange={() => (poll.anonymous = !poll.anonymous)}
+                            width={"fill"}
+                            reverse
+                            checked={!poll.anonymous}>
+                            <Translatable
+                                resourceKey={i18nKey("poll.app.settings.publicSwitchLabel")} />
+                        </Switch>
+                    </Setting>
+
+                    <Setting
+                        toggle={() =>
+                            (poll.allowMultipleVotesPerUser = !poll.allowMultipleVotesPerUser)}
+                        info={"poll.app.settings.multipleVotesInfo"}>
+                        <Switch
+                            onChange={() =>
+                                (poll.allowMultipleVotesPerUser = !poll.allowMultipleVotesPerUser)}
+                            width={"fill"}
+                            reverse
+                            checked={poll.allowMultipleVotesPerUser}>
+                            <Translatable
+                                resourceKey={i18nKey("poll.app.settings.multipleVotesLabel")} />
+                        </Switch>
+                    </Setting>
+
+                    <Setting
+                        toggle={() => (poll.allowUserToChangeVote = !poll.allowUserToChangeVote)}
+                        info={"poll.app.settings.changeVoteInfo"}>
+                        <Switch
+                            onChange={() =>
+                                (poll.allowUserToChangeVote = !poll.allowUserToChangeVote)}
+                            width={"fill"}
+                            reverse
+                            checked={!poll.allowUserToChangeVote}>
+                            <Translatable
+                                resourceKey={i18nKey("poll.app.settings.changeVoteLabel")} />
+                        </Switch>
+                    </Setting>
+
+                    <Setting
+                        toggle={() => (poll.showVotesBeforeEndDate = !poll.showVotesBeforeEndDate)}
+                        info={"poll.app.settings.hideVotesInfo"}>
+                        <Switch
+                            onChange={() =>
+                                (poll.showVotesBeforeEndDate = !poll.showVotesBeforeEndDate)}
+                            width={"fill"}
+                            reverse
+                            checked={!poll.showVotesBeforeEndDate}>
+                            <Translatable
+                                resourceKey={i18nKey("poll.app.settings.hideVotesLabel")} />
+                        </Switch>
+                    </Setting>
+
+                    <Row mainAxisAlignment={"end"} crossAxisAlignment={"center"}>
+                        <CommonButton2
+                            onClick={() => anchoredSheet.collapse()}
+                            variant="primary"
+                            mode="text">
+                            {#snippet icon(color, size)}
+                                <Check {color} {size} />
+                            {/snippet}
+                            <Translatable
+                                resourceKey={i18nKey("poll.app.settings.closeSettings")} />
+                        </CommonButton2>
+                    </Row>
+                </Column>
+            {/snippet}
+        </AnchoredSheet>
+    </div>
+</SlidingPageContent>
+
+<style lang="scss">
+    .handle {
+        display: flex;
+        flex-direction: column;
+        height: 3.5rem;
+        justify-content: center;
+        padding: var(--sp-xs);
+    }
+
+    .dropzone {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: var(--sp-md);
+    }
+
+    @keyframes slide-down-and-fade {
+        from {
+            opacity: 1;
+            bottom: 0;
+            transform: translateY(0);
+        }
+        to {
+            opacity: 0;
+            bottom: 0;
+            transform: translateY(100%);
+        }
+    }
+
+    .opts_sheet.hidden {
+        position: absolute;
+        bottom: 0;
+        opacity: 0;
+        transform: translateY(100%);
+    }
+
+    :global {
+        #dnd-action-dragged-el {
+            .dl_expanding_textarea {
+                box-shadow: 0 0 0.5rem var(--primary) !important;
+            }
+        }
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/home/PollPublicVotes.svelte b/frontend/app/src/mobile/shell/PollPublicVotes.svelte
similarity index 95%
rename from frontend/app/src/components_mobile/home/PollPublicVotes.svelte
rename to frontend/app/src/mobile/shell/PollPublicVotes.svelte
index 9202c6d764..853d99e1b2 100644
--- a/frontend/app/src/components_mobile/home/PollPublicVotes.svelte
+++ b/frontend/app/src/mobile/shell/PollPublicVotes.svelte
@@ -9,11 +9,11 @@
         type PollContent,
         type ReducedPublicProfile,
     } from "@client";
-    import SlidingPageContent from "./SlidingPageContent.svelte";
-    import { i18nKey } from "../../i18n/i18n";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
     import { _ } from "svelte-i18n";
-    import Translatable from "../Translatable.svelte";
-    import { voteCount, getVotersForAnswer, percentageOfVote } from "@utils/polls";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import { voteCount, getVotersForAnswer, percentageOfVote } from "@src/utils/polls";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/mobile/shell/PrizeContentBuilder.svelte b/frontend/app/src/mobile/shell/PrizeContentBuilder.svelte
new file mode 100644
index 0000000000..8605924422
--- /dev/null
+++ b/frontend/app/src/mobile/shell/PrizeContentBuilder.svelte
@@ -0,0 +1,483 @@
+<script lang="ts" module>
+    type PrizeConfig = {
+        minChitEarned: number;
+        diamond: "none" | "standard" | "lifetime";
+        uniquePersonOnly: boolean;
+        minStreak: number;
+        requiresAuth: boolean;
+        distribution: "equal" | "random";
+        duration: bigint;
+    };
+    const defaultPrizeRestrictions: PrizeConfig = {
+        minChitEarned: 0,
+        diamond: "none",
+        uniquePersonOnly: false,
+        minStreak: 0,
+        requiresAuth: false,
+        distribution: "random",
+        duration: BigInt(ONE_DAY),
+    };
+</script>
+
+<script lang="ts">
+    import {
+        Body,
+        Chip,
+        Column,
+        CommonButton2,
+        InputTextButton,
+        NumberInput,
+        Row,
+        Switch,
+    } from "component-lib";
+    import type { MessageContext, PrizeContentInitial } from "@client";
+    import {
+        bigIntMax,
+        chitBands,
+        cryptoBalanceStore,
+        enhancedCryptoLookup as cryptoLookup,
+        lastCryptoSent,
+        LEDGER_CANISTER_ICP,
+        LocalStorageStore,
+        localUpdates,
+        ONE_DAY,
+    } from "@client";
+    import { onMount } from "svelte";
+    import Diamond from "svelte-material-icons/DiamondOutline.svelte";
+    import Lifetime from "svelte-material-icons/DiamondStone.svelte";
+    import Fingerprint from "svelte-material-icons/Fingerprint.svelte";
+    import Flash from "svelte-material-icons/FlashOutline.svelte";
+    import Gift from "svelte-material-icons/GiftOutline.svelte";
+    import LightningBolt from "svelte-material-icons/LightningBoltCircle.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Setting from "@src/mobile/shared/Setting.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import CryptoSelector from "@src/mobile/shared/CryptoSelector.svelte";
+    import DurationSelector from "@src/mobile/shared/DurationSelector.svelte";
+    import SelectChitEarned from "./SelectChitEarned.svelte";
+    import SelectMinStreak from "./SelectMinStreak.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
+    import TokenInput from "@src/mobile/shared/TokenInput.svelte";
+    import TransferFeesMessage from "@src/mobile/shared/TransferFeesMessage.svelte";
+    import { TokenState } from "@src/mobile/features/wallet/walletState.svelte";
+    import { keyboard } from "@src/stores/keyboard.svelte";
+
+    const OC_FEE_PERCENTAGE = 5n;
+    const streaks = [3, 7, 14, 30, 100, 365];
+
+    interface Props {
+        context: MessageContext;
+        onClose: () => void;
+    }
+
+    let { context, onClose }: Props = $props();
+
+    let draftAmount = $state(0n);
+    let ledger = $state($lastCryptoSent ?? LEDGER_CANISTER_ICP);
+
+    const prizeConfig = new LocalStorageStore(
+        "openchat_prize_config",
+        defaultPrizeRestrictions,
+        JSON.stringify,
+        (s) => JSON.parse(s),
+        (_a, _b) => false,
+    );
+
+    let numberOfWinners = $state<number | undefined>(20);
+    let numberOfWinnersValid = $derived(
+        numberOfWinners !== undefined && numberOfWinners >= 1 && numberOfWinners <= 1000,
+    );
+    let distribution: "equal" | "random" = $state($prizeConfig.distribution);
+    let selectedDuration = $state($prizeConfig.duration);
+    let diamondType: "none" | "standard" | "lifetime" = $state($prizeConfig.diamond);
+    // Unique-person ("verified user") gating is suspended - force off so a value persisted from a
+    // previous session can't be silently reapplied (there is no UI to clear it).
+    const uniquePersonOnly = false;
+    let minStreak = $state<number>($prizeConfig.minStreak);
+    let minChitEarned = $state<number>($prizeConfig.minChitEarned);
+    let tokenInputState: "ok" | "zero" | "too_low" | "too_high" = $state("ok");
+    let requiresAuth = $state($prizeConfig.requiresAuth);
+    let cryptoBalance = $derived($cryptoBalanceStore.get(ledger) ?? 0n);
+    let tokenDetails = $derived($cryptoLookup.get(ledger)!);
+    let tokenState = $derived(new TokenState(tokenDetails));
+    let transferFee = $derived(tokenDetails.transferFee);
+    let transferFees = $derived(transferFee * BigInt(numberOfWinners ?? 0));
+    let prizeFees = $derived(transferFees + (draftAmount * OC_FEE_PERCENTAGE) / 100n);
+    let totalFees = $derived(transferFee + prizeFees);
+    let minAmount = $derived(100n * BigInt(numberOfWinners ?? 0) * transferFee);
+    let maxAmount = $derived(bigIntMax(cryptoBalance - totalFees, BigInt(0)));
+    let valid = $derived(numberOfWinnersValid && tokenInputState === "ok");
+    let selectMinChitEarned = $state(false);
+    let selectMinStreak = $state(false);
+
+    onMount(() => {
+        const wasViewportResizeEnabled = keyboard.viewportResizeEnabled;
+        // If resize is currently not enabled, enable it!
+        if (!wasViewportResizeEnabled) keyboard.enableViewportResize();
+
+        return () => {
+            // If resize was not enabled enabled when the component was mounted,
+            // disable it again.
+            if (!wasViewportResizeEnabled) keyboard.disableViewportResize();
+        };
+    });
+
+    function onDiamondChanged(t: "standard" | "lifetime") {
+        switch (t) {
+            case "standard":
+                switch (diamondType) {
+                    case "lifetime":
+                    case "none":
+                        diamondType = "standard";
+                        break;
+                    case "standard":
+                        diamondType = "none";
+                        break;
+                }
+                break;
+            case "lifetime":
+                switch (diamondType) {
+                    case "standard":
+                    case "none":
+                        diamondType = "lifetime";
+                        break;
+                    case "lifetime":
+                        diamondType = "none";
+                        break;
+                }
+                break;
+        }
+    }
+
+    function recipientFromContext({ chatId }: MessageContext) {
+        switch (chatId.kind) {
+            case "channel":
+                return chatId.communityId;
+            case "group_chat":
+                return chatId.groupId;
+            default:
+                throw new Error("We can't create prizes in direct chats");
+        }
+    }
+
+    function getEndDate() {
+        return BigInt(BigInt(Date.now()) + selectedDuration);
+    }
+
+    function send() {
+        const prizes = generatePrizes();
+        const amountE8s = prizes.reduce((total, p) => total + p) + prizeFees;
+
+        const content: PrizeContentInitial = {
+            kind: "prize_content_initial",
+            caption: undefined,
+            endDate: getEndDate(),
+            diamondOnly: diamondType === "standard",
+            lifetimeDiamondOnly: diamondType === "lifetime",
+            uniquePersonOnly,
+            streakOnly: minStreak,
+            minChitEarned: minChitEarned,
+            transfer: {
+                kind: "pending",
+                ledger,
+                token: tokenState.symbol,
+                recipient: recipientFromContext(context),
+                amountE8s,
+                feeE8s: transferFee,
+                createdAtNanos: BigInt(Date.now()) * BigInt(1_000_000),
+            },
+            amount: draftAmount,
+            fees: totalFees,
+            prizes,
+            requiresCaptcha: requiresAuth,
+        };
+
+        prizeConfig.set({
+            minChitEarned,
+            diamond: diamondType,
+            uniquePersonOnly,
+            minStreak,
+            requiresAuth,
+            distribution,
+            duration: selectedDuration,
+        });
+
+        localUpdates.draftMessages.setAttachment(context, content);
+
+        onClose();
+    }
+
+    function generatePrizes(): bigint[] {
+        if (!numberOfWinners) return [];
+
+        const share = Math.round(Number(draftAmount) / numberOfWinners);
+        switch (distribution) {
+            case "equal":
+                return generateEquallyDistributedPrizes(draftAmount, share);
+            case "random":
+                return generateRandomlyDistributedPrizes(draftAmount, share);
+        }
+    }
+
+    // make sure that any rounding errors are corrected for
+    function compensateRounding(prizes: bigint[], fund: bigint): bigint[] {
+        const total = prizes.reduce((agg, p) => agg + p, 0n);
+        const diff = fund - total;
+        if (diff !== 0n) {
+            prizes[0] = prizes[0] + diff;
+        }
+        return prizes;
+    }
+
+    function generateEquallyDistributedPrizes(fund: bigint, share: number): bigint[] {
+        const prizes = Array.from({ length: numberOfWinners ?? 0 }).map(() => BigInt(share));
+        return compensateRounding(prizes, fund);
+    }
+
+    function generateRandomlyDistributedPrizes(fund: bigint, share: number): bigint[] {
+        const min = share * 0.1;
+        const max = share * 2;
+
+        const intermediate = Array.from({ length: numberOfWinners ?? 0 }).map(() =>
+            random(min, max),
+        );
+        const total = intermediate.reduce((agg, p) => agg + p, 0);
+
+        // we might have more prizes than the total so let's scale
+        const scale = total / Number(fund);
+        const scaled = intermediate.map((p) => BigInt(Math.round(p / scale)));
+
+        const prizes = compensateRounding(scaled, fund);
+
+        return ensureMinPrizeAtLeastTransferFee(prizes);
+    }
+
+    function ensureMinPrizeAtLeastTransferFee(prizes: bigint[]): bigint[] {
+        let totalAdded = 0n;
+        let max = 0n;
+        let maxIndex = 0;
+        for (let i = 0; i < prizes.length; i++) {
+            const prize = prizes[i];
+            if (prize < transferFee) {
+                prizes[i] = transferFee;
+                totalAdded += transferFee - prize;
+            } else if (prize > max) {
+                max = prize;
+                maxIndex = i;
+            }
+        }
+
+        if (totalAdded > 0n) {
+            prizes[maxIndex] = max - totalAdded;
+        }
+
+        return prizes;
+    }
+
+    function random(min: number, max: number): number {
+        const range = max - min;
+        return Math.floor(min + Math.random() * range);
+    }
+
+    function toggleDistribution() {
+        switch (distribution) {
+            case "equal":
+                distribution = "random";
+                break;
+            case "random":
+                distribution = "equal";
+                break;
+        }
+    }
+</script>
+
+{#if selectMinChitEarned}
+    <SelectChitEarned
+        min={minChitEarned}
+        onClose={() => (selectMinChitEarned = false)}
+        onSelect={(min: number) => {
+            minChitEarned = min;
+            selectMinChitEarned = false;
+        }} />
+{/if}
+
+{#if selectMinStreak}
+    <SelectMinStreak
+        {streaks}
+        min={minStreak}
+        onClose={() => (selectMinStreak = false)}
+        onSelect={(min: number) => {
+            minStreak = min;
+            selectMinStreak = false;
+        }} />
+{/if}
+
+{#snippet sectionTitle(key: string, padding: boolean = true)}
+    <Row padding={["zero", padding ? "xs" : "zero"]}>
+        <Body fontWeight="semi-bold">
+            <Translatable resourceKey={i18nKey(key)} />
+        </Body>
+    </Row>
+{/snippet}
+
+<SlidingPageContent title={i18nKey("Create a prize")}>
+    <Column height={"fill"} gap={"xxl"} padding={["xxl", "lg", "huge"]}>
+        <!-- -->
+        <!-- Token select -->
+        <Column gap={"md"}>
+            {@render sectionTitle("Select the prize token")}
+            <CryptoSelector {draftAmount} showRefresh bind:ledger />
+        </Column>
+
+        <!-- Withdrawal amount -->
+        <Column gap="md">
+            {@render sectionTitle("Total prize amount")}
+            <TokenInput
+                balance={tokenState.cryptoBalance}
+                {ledger}
+                bind:status={tokenInputState}
+                {minAmount}
+                {maxAmount}
+                bind:amount={draftAmount}>
+                {#snippet subtext()}
+                    <Translatable
+                        resourceKey={i18nKey(
+                            `Minimum amount ${tokenState.formatTokens(minAmount)} ${
+                                tokenState.symbol
+                            }`,
+                        )} />
+                {/snippet}
+            </TokenInput>
+            <Row padding={["zero", "sm"]}>
+                <TransferFeesMessage
+                    symbol={tokenState.symbol}
+                    tokenDecimals={tokenState.decimals}
+                    transferFees={totalFees} />
+            </Row>
+        </Column>
+
+        <!-- Number of winners -->
+        <Column gap="md">
+            {@render sectionTitle("Number of winners")}
+            <NumberInput
+                error={!numberOfWinnersValid}
+                min={1}
+                max={1000}
+                bind:value={numberOfWinners}>
+                {#snippet subtext()}
+                    <Translatable
+                        resourceKey={i18nKey("Please enter a number between 1 and 1000")} />
+                {/snippet}
+                {#snippet textButtons()}
+                    <InputTextButton onClick={() => (numberOfWinners = 1000)}>
+                        <Translatable resourceKey={i18nKey("tokenTransfer.max")} />
+                    </InputTextButton>
+                {/snippet}
+            </NumberInput>
+        </Column>
+
+        <!-- Prize expiry -->
+        <Column gap="md">
+            {@render sectionTitle("Prize expiry time")}
+            <DurationSelector bind:duration={selectedDuration} />
+        </Column>
+
+        <!-- Distribution -->
+        <Column padding={["zero", "xs"]}>
+            <Setting
+                toggle={toggleDistribution}
+                info={"By default, prize amounts per winner are randomised, meaning that winnings between users will be different. If you'd like each of the winners to get equal amounts of the prize, turn this option on."}>
+                <Switch
+                    onChange={toggleDistribution}
+                    width={"fill"}
+                    reverse
+                    checked={distribution === "equal"}>
+                    <Translatable resourceKey={i18nKey("Distribute evenly")} />
+                </Switch>
+            </Setting>
+        </Column>
+
+        <!-- Distribution -->
+        <Column gap={"lg"} padding={["zero", "xs"]}>
+            <Column gap={"sm"}>
+                {@render sectionTitle("Claim restrictions", false)}
+                <Body colour={"textSecondary"}>
+                    <Translatable
+                        resourceKey={i18nKey(
+                            "Set limitations on who can claim prizes. By default any user can claim a prize. Select which restrictions should apply below. ",
+                        )} />
+                </Body>
+            </Column>
+            <Row wrap gap={"sm"}>
+                <Chip
+                    onClick={() => (requiresAuth = !requiresAuth)}
+                    onRemove={requiresAuth ? () => (requiresAuth = false) : undefined}
+                    mode={requiresAuth ? "filter" : "default"}>
+                    {#snippet icon(color)}
+                        <Fingerprint {color} />
+                    {/snippet}
+                    <Translatable resourceKey={i18nKey("Requires authentication")} />
+                </Chip>
+                <Chip
+                    onClick={() => onDiamondChanged("standard")}
+                    onRemove={diamondType === "standard" ? () => (diamondType = "none") : undefined}
+                    mode={diamondType === "standard" ? "filter" : "default"}>
+                    {#snippet icon(color)}
+                        <Diamond {color} />
+                    {/snippet}
+                    <Translatable resourceKey={i18nKey("Diamond membership")} />
+                </Chip>
+                <Chip
+                    onClick={() => onDiamondChanged("lifetime")}
+                    onRemove={diamondType === "lifetime" ? () => (diamondType = "none") : undefined}
+                    mode={diamondType === "lifetime" ? "filter" : "default"}>
+                    {#snippet icon(color)}
+                        <Lifetime {color} />
+                    {/snippet}
+                    <Translatable resourceKey={i18nKey("Lifetime diamond membership")} />
+                </Chip>
+                <!-- Unique person ("verified user") gating is suspended -->
+                <Chip
+                    onClick={() => (selectMinChitEarned = true)}
+                    onRemove={minChitEarned > 0 ? () => (minChitEarned = 0) : undefined}
+                    mode={minChitEarned > 0 ? "filter" : "default"}>
+                    {#snippet icon(color)}
+                        <Flash {color} />
+                    {/snippet}
+                    {#if minChitEarned > 0}
+                        <Translatable
+                            resourceKey={i18nKey(`CHIT earned: ${chitBands.get(minChitEarned)}`)} />
+                    {:else}
+                        <Translatable resourceKey={i18nKey(`CHIT earned`)} />
+                    {/if}
+                </Chip>
+                <Chip
+                    onClick={() => (selectMinStreak = true)}
+                    onRemove={minStreak > 0 ? () => (minStreak = 0) : undefined}
+                    mode={minStreak > 0 ? "filter" : "default"}>
+                    {#snippet icon(color)}
+                        <LightningBolt {color} />
+                    {/snippet}
+                    {#if minStreak > 0}
+                        <Translatable resourceKey={i18nKey(`Users with streak: ${minStreak}d`)} />
+                    {:else}
+                        <Translatable resourceKey={i18nKey(`Users with streak`)} />
+                    {/if}
+                </Chip>
+            </Row>
+        </Column>
+
+        <!-- Buttons -->
+        <Row mainAxisAlignment={"spaceBetween"} crossAxisAlignment={"center"}>
+            <CommonButton2 variant="primary" mode="text" onClick={onClose}>
+                <Translatable resourceKey={i18nKey("cancel")} />
+            </CommonButton2>
+            <CommonButton2 variant="primary" mode="regular" disabled={!valid} onClick={send}>
+                {#snippet icon(color, size)}
+                    <Gift {color} {size} />
+                {/snippet}
+                <Translatable resourceKey={i18nKey("Attach prize")} />
+            </CommonButton2>
+        </Row>
+    </Column>
+</SlidingPageContent>
diff --git a/frontend/app/src/mobile/shell/ProposalGroupFilters.svelte b/frontend/app/src/mobile/shell/ProposalGroupFilters.svelte
new file mode 100644
index 0000000000..8936d6e626
--- /dev/null
+++ b/frontend/app/src/mobile/shell/ProposalGroupFilters.svelte
@@ -0,0 +1,129 @@
+<script lang="ts">
+    import { CommonButton, Container, Switch } from "component-lib";
+    import type { ChatSummary, OpenChat } from "@client";
+    import { filteredProposalsStore, proposalTopicsStore } from "@client";
+    import { getContext } from "svelte";
+    import Check from "svelte-material-icons/CheckCircleOutline.svelte";
+    import Minus from "svelte-material-icons/MinusCircleOutline.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import {
+        proposalActionCategories,
+        type ProposalActionCategory,
+    } from "@src/stores/proposalSections";
+    import { OC_GOVERNANCE_CANISTER_ID } from "@src/utils/sns";
+    import CollapsibleCard from "@src/mobile/features/landing/CollapsibleCard.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
+
+    interface Props {
+        selectedChat: ChatSummary;
+    }
+
+    let { selectedChat }: Props = $props();
+
+    type SectionLabels = Record<ProposalActionCategory, string>;
+
+    const sectionLabels: SectionLabels = {
+        all: "",
+        unknown: "proposal.unknownActionCategory",
+        builtIn: "proposal.builtInAction",
+        userIndex: "proposal.userIndexAction",
+        groupIndex: "proposal.groupIndexAction",
+        notifications: "proposal.notificationsAction",
+        proposalsBot: "proposal.proposalsBotAction",
+        storageIndex: "proposal.storageIndexAction",
+        cyclesDispenser: "proposal.cyclesDispenserAction",
+        registry: "proposal.registryAction",
+        neuronController: "proposal.neuronControllerAction",
+        openchatInstaller: "proposal.openchatInstallerAction",
+    };
+
+    const client = getContext<OpenChat>("client");
+    let topics = $derived([...$proposalTopicsStore]);
+    let groupTopics = $derived(
+        selectedChat.kind !== "direct_chat" &&
+            selectedChat.subtype?.governanceCanisterId === OC_GOVERNANCE_CANISTER_ID,
+    );
+
+    let grouped = $derived([
+        ...client.groupBy(topics, ([id, _]) => {
+            if (!groupTopics) return "all";
+
+            if (id < 1000) {
+                return "builtIn";
+            } else if (id < 2000) {
+                return "userIndex";
+            } else if (id < 3000) {
+                return "groupIndex";
+            } else if (id < 4000) {
+                return "notifications";
+            } else if (id < 5000) {
+                return "proposalsBot";
+            } else if (id < 6000) {
+                return "storageIndex";
+            } else if (id < 7000) {
+                return "cyclesDispenser";
+            } else if (id < 8000) {
+                return "registry";
+            } else if (id < 9000) {
+                return "neuronController";
+            } else if (id < 10000) {
+                return "openchatInstaller";
+            } else {
+                return "unknown";
+            }
+        }),
+    ]);
+</script>
+
+<SlidingPageContent title={i18nKey("proposal.filter")}>
+    <Container gap={"lg"} padding={"lg"} direction={"vertical"}>
+        <Container gap={"md"}>
+            <CommonButton onClick={() => client.enableAllProposalFilters()}>
+                {#snippet icon(color, size)}
+                    <Check {color} {size} />
+                {/snippet}
+                <Translatable resourceKey={i18nKey("proposal.enableAll")} />
+            </CommonButton>
+            <CommonButton
+                onClick={() => client.disableAllProposalFilters(topics.map(([id]) => id))}>
+                {#snippet icon(color, size)}
+                    <Minus {color} {size} />
+                {/snippet}
+                <Translatable resourceKey={i18nKey("proposal.disableAll")} />
+            </CommonButton>
+        </Container>
+        {#each grouped as [category, topicsInCategory]}
+            {#if groupTopics}
+                <CollapsibleCard
+                    onToggle={() => proposalActionCategories.toggle(category)}
+                    open={$proposalActionCategories[category]}
+                    headerText={i18nKey(sectionLabels[category])}>
+                    <Container gap={"lg"} direction={"vertical"}>
+                        {#each topicsInCategory as [id, label]}
+                            <Switch
+                                width={"fill"}
+                                reverse
+                                onChange={() => client.toggleProposalFilter(id)}
+                                checked={!$filteredProposalsStore?.hasFilter(id)}>
+                                <Translatable resourceKey={i18nKey(label)}></Translatable>
+                            </Switch>
+                        {/each}
+                    </Container>
+                </CollapsibleCard>
+            {:else}
+                <Container gap={"lg"} direction={"vertical"}>
+                    {#each topicsInCategory as [id, label]}
+                        <Switch
+                            width={"fill"}
+                            reverse
+                            onChange={() => client.toggleProposalFilter(id)}
+                            checked={!$filteredProposalsStore?.hasFilter(id)}>
+                            <Translatable resourceKey={i18nKey(label)}></Translatable>
+                        </Switch>
+                    {/each}
+                </Container>
+            {/if}
+        {/each}
+    </Container>
+</SlidingPageContent>
diff --git a/frontend/app/src/mobile/shell/Router.svelte b/frontend/app/src/mobile/shell/Router.svelte
new file mode 100644
index 0000000000..8440e9e7e3
--- /dev/null
+++ b/frontend/app/src/mobile/shell/Router.svelte
@@ -0,0 +1,375 @@
+
+<script lang="ts">
+    import { initNavigationHistoryTracking, navigate } from "@src/utils/navigation";
+    import {
+        consumePendingDeepLink,
+        consumePendingNotificationTap,
+    } from "@src/utils/native/notification_channels";
+    import { handleLinkClick, removeQueryStringParam } from "@src/utils/urls";
+    import type { TransitionType } from "component-lib";
+    import { type ChatIdentifier, OpenChat, type RouteParams, adminRoute, chatIdentifiersEqual, chatListRoute, chatListScopeStore, chatsInitialisedStore, communitesRoute, communitiesStore, communityIdentifiersEqual, exploringStore, globalDirectChatSelectedRoute, globalGroupChatSelectedRoute, isMessageIndexRoute, messageIndexStore, notFoundStore, notificationsRoute, profileSummaryRoute, publish, routeKindStore, routeStore, routerReadyStore, selectedChannelRoute, selectedChatIdStore, selectedCommunityIdStore, selectedCommunityRoute, selectedServerChatStore, shareRoute, threadMessageIndexStore, threadOpenStore, walletRoute, welcomeRoute } from "@client";
+    import page from "page";
+    import { type Component, getContext, onMount, tick, untrack } from "svelte";
+    import Home from "./HomeRoute.svelte";
+    import NotFound from "./NotFound.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    const bottomBarRoutes: RouteParams["kind"][] = [
+        "chat_list_route",
+        "selected_community_route",
+        "welcome_route",
+        "favourites_route",
+        "notifications_route",
+        "wallet_route",
+        "profile_summary_route",
+        "global_chat_selected_route",
+        "selected_channel_route",
+    ];
+
+    function disambiguateRouteKind(route: RouteParams): RouteParams["kind"] {
+        if (route.kind === "chat_list_route" && route.scope.kind === "favourite") {
+            return "favourites_route";
+        }
+        return route.kind;
+    }
+
+    function routeToTransitionType(next: RouteParams, current: RouteParams): TransitionType {
+        if (
+            isMessageIndexRoute(next) &&
+            isMessageIndexRoute(current) &&
+            chatIdentifiersEqual(next.chatId, current.chatId)
+        ) {
+            // we don't want to slide when opening and closing threads because
+            // threads are implemented as sliding modals
+            // we have opened a thread
+            if (next.open && !current.open) {
+                return "fade";
+            }
+            // we have closed a thread
+            if (!next.open && current.open) {
+                return "fade";
+            }
+        }
+
+        if (
+            next.kind === "selected_community_route" &&
+            current.kind === "selected_community_route"
+        ) {
+            if (communityIdentifiersEqual(next.communityId, current.communityId)) {
+                return "fade";
+            }
+            const nextCommunity = $communitiesStore.get(next.communityId);
+            const currentCommunity = $communitiesStore.get(current.communityId);
+            if (nextCommunity !== undefined && currentCommunity !== undefined) {
+                return nextCommunity.membership.index > currentCommunity.membership.index
+                    ? "slide_right"
+                    : "slide_left";
+            }
+            return "fade";
+        }
+        const nextIdx = bottomBarRoutes.indexOf(disambiguateRouteKind(next));
+        const currIdx = bottomBarRoutes.indexOf(disambiguateRouteKind(current));
+        if (nextIdx === currIdx) return "fade";
+        if (nextIdx === -1 || currIdx === -1) return "fade";
+        return nextIdx > currIdx ? "slide_left" : "slide_right";
+    }
+
+    let route: Component | undefined = $state(undefined);
+
+    const svt = (document as any).startViewTransition;
+    const supportsObjectForm = (() => {
+        try {
+            (document as any).startViewTransition({ update: () => {} });
+            return true;
+        } catch {
+            return false;
+        }
+    })();
+
+    function parsePathParams(fn: (ctx: PageJS.Context) => RouteParams) {
+        return (ctx: PageJS.Context, next: () => any) => {
+            const params = fn(ctx);
+
+            if (ctx.init || !svt || !supportsObjectForm) {
+                client.setRouteParams(ctx, params);
+                scrollToTop();
+                next();
+                return;
+            }
+
+            // Finally - we are in a position to specify the *type* of transition
+            const transitionType = routeToTransitionType(params, routeStore.value);
+            const trans = (document as any).startViewTransition({
+                update: () => {
+                    client.setRouteParams(ctx, params);
+                    scrollToTop();
+                    next();
+                    return tick();
+                },
+                types: [transitionType],
+            });
+            trans.ready.catch(() => {});
+            trans.finished.catch(() => {
+                console.debug("Transition was skipped or interrupted");
+            });
+        };
+    }
+
+    onMount(() => {
+        const onLinkClick = handleLinkClick(client, navigate);
+        document.addEventListener("click", onLinkClick, { capture: true });
+
+        // this is for explore mode
+        page("/communities", parsePathParams(communitesRoute), track, () => (route = Home));
+        // global direct chat selected
+        page(
+            "/user/:chatId/:messageIndex?/:threadMessageIndex?",
+            parsePathParams(globalDirectChatSelectedRoute({ kind: "chats" })),
+            track,
+            () => (route = Home),
+        );
+        // global group chat selected
+        page(
+            "/group/:chatId/:messageIndex?/:threadMessageIndex?",
+            parsePathParams(globalGroupChatSelectedRoute({ kind: "chats" })),
+            track,
+            () => (route = Home),
+        );
+        // selected community group
+        page(
+            "/community/:communityId",
+            parsePathParams(selectedCommunityRoute),
+            track,
+            () => (route = Home),
+        );
+        // selected community channel
+        page(
+            "/community/:communityId/channel/:channelId/:messageIndex?/:threadMessageIndex?",
+            parsePathParams(selectedChannelRoute(false)),
+            track,
+            () => (route = Home),
+        );
+        // global direct and group chats
+        page(
+            "/chats",
+            parsePathParams(chatListRoute({ kind: "chats" })),
+            track,
+            () => (route = Home),
+        );
+        page(
+            "/chats/user/:chatId/:messageIndex?/:threadMessageIndex?",
+            parsePathParams(globalDirectChatSelectedRoute({ kind: "chats" })),
+            track,
+            () => (route = Home),
+        );
+        page(
+            "/chats/group/:chatId/:messageIndex?/:threadMessageIndex?",
+            parsePathParams(globalGroupChatSelectedRoute({ kind: "chats" })),
+            track,
+            () => (route = Home),
+        );
+        // favourites
+        page(
+            "/favourite",
+            parsePathParams(chatListRoute({ kind: "favourite" })),
+            track,
+            () => (route = Home),
+        );
+        // selected global group favourite
+        page(
+            "/favourite/group/:chatId/:messageIndex?/:threadMessageIndex?",
+            parsePathParams(globalGroupChatSelectedRoute({ kind: "favourite" })),
+            track,
+            () => (route = Home),
+        );
+        // selected global direct favourite
+        page(
+            "/favourite/user/:chatId/:messageIndex?/:threadMessageIndex?",
+            parsePathParams(globalDirectChatSelectedRoute({ kind: "favourite" })),
+            track,
+            () => (route = Home),
+        );
+        // selected favourite channel
+        page(
+            "/favourite/community/:communityId/channel/:channelId/:messageIndex?/:threadMessageIndex?",
+            parsePathParams(selectedChannelRoute(true)),
+            track,
+            () => (route = Home),
+        );
+        page("/share", parsePathParams(shareRoute), track, () => (route = Home));
+        page("/admin", parsePathParams(adminRoute), track, () => (route = Home));
+        page("/profile_summary", parsePathParams(profileSummaryRoute), track, () => (route = Home));
+        page("/welcome", parsePathParams(welcomeRoute), track, () => (route = Home));
+        page("/wallet", parsePathParams(walletRoute), track, () => (route = Home));
+        page("/notifications", parsePathParams(notificationsRoute), track, () => (route = Home));
+        page(
+            "/",
+            parsePathParams(() => ({ kind: "home_route", scope: { kind: "none" } })),
+            track,
+            () => (route = Home),
+        );
+        // legacy route
+        page(
+            "/:chatId/:messageIndex?/:threadMessageIndex?",
+            parsePathParams(globalGroupChatSelectedRoute({ kind: "chats" })),
+            track,
+            () => (route = Home),
+        );
+        page(
+            "*",
+            parsePathParams(() => ({ kind: "not_found_route", scope: { kind: "none" } })),
+            () => {
+                notFoundStore.set(true);
+                route = NotFound;
+            },
+        );
+
+        page.start({ click: false });
+        const cleanupNavigationHistoryTracking = initNavigationHistoryTracking();
+
+        routerReadyStore.set(true);
+
+        return () => {
+            cleanupNavigationHistoryTracking();
+            document.removeEventListener("click", onLinkClick, { capture: true });
+            page.stop();
+        };
+    });
+
+    function scrollToTop() {
+        window.scrollTo({
+            behavior: "auto",
+            top: 0,
+        });
+    }
+
+    function track(ctx: PageJS.Context, next: () => any) {
+        console.debug("GA: page_view", ctx.pathname);
+        gtag("event", "page_view", {
+            page_location: ctx.pathname,
+        });
+        next();
+    }
+
+    // This is where our general effects are going to go. They don't *really* belong in a component at all
+    // but unfortunately unowned effects do not respond to store value changes
+
+    // Set selected community
+    $effect(() => {
+        if ($chatsInitialisedStore && $selectedCommunityIdStore !== undefined) {
+            const id = $selectedCommunityIdStore;
+
+            // this untrack is not really necessary in this case but it's probably a good pattern to follow to
+            // make double sure we are only reacting to the things we want to react to
+            untrack(() => {
+                client.setSelectedCommunity(id).then((preview) => {
+                    if (preview && $selectedChatIdStore === undefined) {
+                        // if we are previewing the community we need to select the first chat manually
+                        client.selectDefaultChat();
+                    }
+                });
+            });
+        }
+    });
+
+    $effect(() => {
+        if (client.captureReferralCode()) {
+            navigate(removeQueryStringParam("ref"));
+        }
+    });
+
+    let previousChatId: ChatIdentifier | undefined = undefined;
+    $effect(() => {
+        /**
+         * The purpose of this effect is to capture the thread open when we click a thread when we already have a chat open
+         * Therefore this will not run when we click on a thread preview (because at that point both previousChatId will be undefined)
+         */
+        if (
+            $threadOpenStore &&
+            $messageIndexStore !== undefined &&
+            $selectedChatIdStore !== undefined &&
+            chatIdentifiersEqual(previousChatId, $selectedChatIdStore)
+        ) {
+            const chatId = $selectedChatIdStore;
+            const idx = $messageIndexStore;
+            const threadIdx = $threadMessageIndexStore;
+            untrack(() => {
+                client.openThreadFromMessageIndex(chatId, idx, threadIdx);
+            });
+        }
+        previousChatId = $selectedChatIdStore;
+    });
+
+    $effect(() => {
+        if (!$threadOpenStore) {
+            untrack(() => {
+                publish("closeThread");
+            });
+        }
+    });
+
+    $effect(() => {
+        if (
+            $selectedChatIdStore === undefined &&
+            $chatListScopeStore.kind !== "none" &&
+            !$exploringStore
+        ) {
+            const deepLink = consumePendingDeepLink();
+            const tapPath = deepLink === null ? consumePendingNotificationTap() : null;
+            if (deepLink) {
+                untrack(() => {
+                    try {
+                        const { pathname, search } = new URL(deepLink);
+                        navigate(pathname + search, "notification");
+                    } catch {
+                        console.error("Deep link: failed to parse cold-start URL", deepLink);
+                        client.selectDefaultChat();
+                    }
+                });
+            } else if (tapPath) {
+                untrack(() => navigate(tapPath, "notification"));
+            } else {
+                client.selectDefaultChat();
+            }
+        }
+    });
+
+    // Set selected chat
+    $effect(() => {
+        // we have to be *so* careful with the reactivity here. Is this actually better?
+        if (
+            $chatsInitialisedStore &&
+            $selectedChatIdStore !== undefined &&
+            ($routeKindStore === "selected_channel_route" ||
+                $routeKindStore === "global_chat_selected_route")
+        ) {
+            untrack(() => {
+                if (
+                    $routeStore.kind === "selected_channel_route" ||
+                    $routeStore.kind === "global_chat_selected_route"
+                ) {
+                    const id = $selectedChatIdStore;
+                    const messageIndex = $routeStore.messageIndex;
+                    const threadMessageIndex = $routeStore.threadMessageIndex;
+                    if (id !== undefined) {
+                        client.setSelectedChat(id, messageIndex, threadMessageIndex);
+                    }
+                }
+            });
+        }
+    });
+
+    // clear selected chat
+    $effect(() => {
+        if ($selectedChatIdStore === undefined) {
+            selectedServerChatStore.set(undefined);
+            previousChatId = undefined;
+        }
+    });
+</script>
+
+{#if route !== undefined}
+    {@const RouteComponent = route}
+    <RouteComponent />
+{/if}
diff --git a/frontend/app/src/components_mobile/home/Rules.svelte b/frontend/app/src/mobile/shell/Rules.svelte
similarity index 91%
rename from frontend/app/src/components_mobile/home/Rules.svelte
rename to frontend/app/src/mobile/shell/Rules.svelte
index 1cd2682307..ab0e431c7d 100644
--- a/frontend/app/src/components_mobile/home/Rules.svelte
+++ b/frontend/app/src/mobile/shell/Rules.svelte
@@ -15,13 +15,13 @@
     import ArrowLeft from "svelte-material-icons/ArrowLeft.svelte";
     import ContentCopy from "svelte-material-icons/ContentCopy.svelte";
     import Eye from "svelte-material-icons/EyeOutline.svelte";
-    import Setting from "../Setting.svelte";
-    import Translatable from "../Translatable.svelte";
-    import { UpdateGroupState } from "./createOrUpdateGroup/group.svelte";
-    import GroupCard from "./createOrUpdateGroup/GroupCard.svelte";
-    import { MAX_RULES_LENGTH, type UpdateGroupOrCommunityState } from "./groupOrCommunity.svelte";
-    import Markdown from "@shared_components/Markdown.svelte";
-    import SlidingPageContent from "./SlidingPageContent.svelte";
+    import Setting from "@src/mobile/shared/Setting.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import { UpdateGroupState } from "@src/mobile/features/chats/group/edit/group.svelte";
+    import GroupCard from "@src/mobile/features/chats/group/edit/GroupCard.svelte";
+    import { MAX_RULES_LENGTH, type UpdateGroupOrCommunityState } from "@src/mobile/shared/groupOrCommunity.svelte";
+    import Markdown from "@src/ui/Markdown.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
 
     interface Props {
         data: UpdateGroupOrCommunityState;
diff --git a/frontend/app/src/mobile/shell/SelectChatModal.svelte b/frontend/app/src/mobile/shell/SelectChatModal.svelte
new file mode 100644
index 0000000000..d749cc0f22
--- /dev/null
+++ b/frontend/app/src/mobile/shell/SelectChatModal.svelte
@@ -0,0 +1,411 @@
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<script lang="ts">
+    import { trackedEffect } from "@src/utils/effects.svelte";
+    import {
+        Avatar,
+        Body,
+        BodySmall,
+        ColourVars,
+        Column,
+        Row,
+        Search,
+        Subtitle,
+    } from "component-lib";
+    import type {
+        ChatIdentifier,
+        ChatSummary,
+        CommunityIdentifier,
+        CommunitySummary,
+        DiamondMembershipStatus,
+        DirectChatSummary,
+        MultiUserChat,
+        OpenChat,
+    } from "@client";
+    import {
+        allUsersStore,
+        chatIdentifiersEqual,
+        communitiesStore,
+        favouritesStore,
+        selectedChatIdStore,
+        serverDirectChatsStore,
+        serverGroupChatsStore,
+    } from "@client";
+    import { getContext } from "svelte";
+    import { _ } from "svelte-i18n";
+    import ForumOutline from "svelte-material-icons/ForumOutline.svelte";
+    import HeartOutline from "svelte-material-icons/HeartOutline.svelte";
+    import MessageOutline from "svelte-material-icons/MessageOutline.svelte";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import { now } from "@src/stores/time";
+    import { buildDisplayName } from "@src/utils/user";
+    import CollapsibleCard from "@src/mobile/features/landing/CollapsibleCard.svelte";
+    import NothingToSee from "@src/mobile/shared/NothingToSee.svelte";
+    import Badges from "@src/mobile/features/profile/Badges.svelte";
+    import SlidingPageContent from "@src/mobile/shared/SlidingPageContent.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        onSelect: (chatId: ChatIdentifier) => void;
+        onClose: () => void;
+    }
+
+    type ShareTo = {
+        directChats: ShareChat[];
+        groupChats: ShareChat[];
+        favourites: ShareChat[];
+        communities: ShareCommunity[];
+    };
+    type ShareChat = {
+        kind: "chat";
+        id: ChatIdentifier;
+        userId: string | undefined;
+        name: string;
+        diamondStatus: DiamondMembershipStatus["kind"];
+        streak: number;
+        avatarUrl: string;
+        description: string;
+        username: string | undefined;
+        lastUpdated: bigint;
+        uniquePerson: boolean;
+    };
+    type ShareCommunity = {
+        kind: "community";
+        id: CommunityIdentifier;
+        name: string;
+        avatarUrl: string;
+        description: string;
+        lastUpdated: bigint;
+        channels: ShareChat[];
+    };
+
+    let { onClose, onSelect }: Props = $props();
+    let searchTerm = $state("");
+    let searchTermLower = $derived(searchTerm.toLowerCase());
+    let targets = $state<ShareTo>();
+
+    trackedEffect("select-chat-modal", () => {
+        buildListOfTargets($now, $selectedChatIdStore, searchTermLower).then((t) => (targets = t));
+    });
+
+    let noTargets = $derived(targets !== undefined ? getNumberOfTargets(targets) === 0 : false);
+
+    function getNumberOfTargets(targets: ShareTo): number {
+        return (
+            targets.directChats.length +
+            targets.groupChats.length +
+            targets.communities.flatMap((c) => c.channels).length
+        );
+    }
+
+    async function targetsFromChatList(
+        now: number,
+        chats: ChatSummary[],
+        selectedChatId: ChatIdentifier | undefined,
+    ): Promise<ShareChat[]> {
+        return Promise.all(
+            filterChatSelection(chats, selectedChatId).map((c) => normaliseChatSummary(now, c)),
+        );
+    }
+
+    function matchesSearch(thing: ShareChat | ShareCommunity, searchTerm: string): boolean {
+        return (
+            (searchTerm === "" ||
+                thing.name.toLocaleLowerCase().includes(searchTerm) ||
+                (thing.kind === "chat" &&
+                    thing.username?.toLocaleLowerCase()?.includes(searchTerm))) ??
+            false
+        );
+    }
+
+    function chatMatchesSearch(chats: ShareChat[], searchTerm: string): ShareChat[] {
+        return chats.filter((c) => matchesSearch(c, searchTerm)).sort(compare);
+    }
+
+    function communityMatchesSearch(communities: ShareCommunity[], searchTerm: string) {
+        return communities
+            .reduce((agg, c) => {
+                if (matchesSearch(c, searchTerm)) {
+                    agg.push(c);
+                } else {
+                    const filtered = chatMatchesSearch(c.channels, searchTerm);
+                    if (filtered.length > 0) {
+                        agg.push({
+                            ...c,
+                            channels: filtered,
+                        });
+                    }
+                }
+                return agg;
+            }, [] as ShareCommunity[])
+            .sort(compare);
+    }
+
+    async function buildListOfTargets(
+        now: number,
+        selectedChatId: ChatIdentifier | undefined,
+        searchTerm: string,
+    ): Promise<ShareTo> {
+        let targets: ShareTo = {
+            directChats: [],
+            groupChats: [],
+            favourites: [],
+            communities: [],
+        };
+        const direct = [...$serverDirectChatsStore.values()].map((d) => ({
+            ...d,
+            name: buildDisplayName($allUsersStore, d.them.userId, "user"),
+        }));
+
+        const group = [...$serverGroupChatsStore.values()];
+        const channels = [...$communitiesStore.values()].flatMap((c) => c.channels);
+        const all = [...group, ...direct, ...channels];
+        const favs = all.filter((c) => $favouritesStore.has(c.id));
+        try {
+            const directChats = await targetsFromChatList(now, direct, selectedChatId);
+            const groupChats = await targetsFromChatList(now, group, selectedChatId);
+            const favourites = await targetsFromChatList(now, favs, selectedChatId);
+            const communities = await Promise.all(
+                [...$communitiesStore.values()].map((c) =>
+                    normaliseCommunity(now, selectedChatId, c),
+                ),
+            );
+            return {
+                directChats: chatMatchesSearch(directChats, searchTerm),
+                groupChats: chatMatchesSearch(groupChats, searchTerm),
+                favourites: chatMatchesSearch(favourites, searchTerm),
+                communities: communityMatchesSearch(communities, searchTerm),
+            };
+        } catch (err) {}
+        return targets;
+    }
+
+    async function normaliseCommunity(
+        now: number,
+        selectedChatId: ChatIdentifier | undefined,
+        { id, name, avatar, description, channels, lastUpdated }: CommunitySummary,
+    ): Promise<ShareCommunity> {
+        const normalisedChannels = await Promise.all(
+            filterChatSelection(channels, selectedChatId).map((c) => normaliseChatSummary(now, c)),
+        );
+        return {
+            kind: "community",
+            id,
+            name,
+            avatarUrl: client.communityAvatarUrl(id.communityId, avatar),
+            description,
+            lastUpdated,
+            channels: normalisedChannels,
+        };
+    }
+
+    async function normaliseChatSummary(now: number, chatSummary: ChatSummary): Promise<ShareChat> {
+        switch (chatSummary.kind) {
+            case "direct_chat":
+                const description = await buildDirectChatDescription(chatSummary, now);
+                const them = $allUsersStore.get(chatSummary.them.userId);
+                return {
+                    kind: "chat",
+                    id: chatSummary.id,
+                    userId: chatSummary.them.userId,
+                    name: client.displayName(them),
+                    diamondStatus: them?.diamondStatus ?? "inactive",
+                    streak: client.getStreak(chatSummary.them.userId),
+                    avatarUrl: client.userAvatarUrl(them),
+                    description,
+                    username: them ? "@" + them.username : undefined,
+                    lastUpdated: chatSummary.lastUpdated,
+                    uniquePerson: them?.isUniquePerson ?? false,
+                };
+
+            default:
+                return {
+                    kind: "chat",
+                    id: chatSummary.id,
+                    userId: undefined,
+                    name: chatSummary.name,
+                    diamondStatus: "inactive" as DiamondMembershipStatus["kind"],
+                    streak: 0,
+                    avatarUrl: client.groupAvatarUrl(chatSummary),
+                    description: buildGroupChatDescription(chatSummary),
+                    username: undefined,
+                    lastUpdated: chatSummary.lastUpdated,
+                    uniquePerson: false,
+                };
+        }
+    }
+
+    async function buildDirectChatDescription(
+        chat: DirectChatSummary,
+        now: number,
+    ): Promise<string> {
+        return client.getLastOnlineDate(chat.them.userId, now).then((lastOnline) => {
+            if (lastOnline !== undefined && lastOnline !== 0) {
+                return client.formatLastOnlineDate($_, now, lastOnline)[0];
+            } else {
+                return $_("offline");
+            }
+        });
+    }
+
+    function buildGroupChatDescription(group: MultiUserChat): string {
+        if (group.description.length > 0) {
+            return group.description;
+        } else {
+            const level = $_(`level.${group.level}`).toLowerCase();
+            const number = group.memberCount;
+            return group.public
+                ? $_("publicGroupWithN", { values: { number, level } })
+                : $_("privateGroupWithN", { values: { number, level } });
+        }
+    }
+
+    function filterChatSelection(
+        chats: ChatSummary[],
+        selectedChatId: ChatIdentifier | undefined,
+    ): ChatSummary[] {
+        return chats.filter(
+            (c) =>
+                !chatIdentifiersEqual(selectedChatId, c.id) &&
+                client.canSendMessage(c.id, "message", "text"),
+        );
+    }
+
+    function compare(a: { name: string }, b: { name: string }): number {
+        return a.name.localeCompare(b.name);
+    }
+</script>
+
+{#snippet generalHeader(Icon: any, title: string)}
+    <Row padding={["sm", "zero"]} gap={"md"} crossAxisAlignment={"center"}>
+        <Icon size={"1.5rem"} color={ColourVars.textPrimary} />
+        <Subtitle fontWeight={"bold"}>
+            <Translatable resourceKey={i18nKey(title)} />
+        </Subtitle>
+    </Row>
+{/snippet}
+
+{#snippet nonDirect(target: ShareChat)}
+    <Row
+        onClick={() => onSelect(target.id)}
+        padding={["sm", "md"]}
+        gap={"md"}
+        crossAxisAlignment={"center"}>
+        <Avatar url={target.avatarUrl} size={"lg"} />
+        <Column>
+            <Body width={"hug"}>{target.name}</Body>
+            <Body ellipsisTruncate colour={"textSecondary"}>
+                {target.description}
+            </Body>
+        </Column>
+    </Row>
+{/snippet}
+
+<SlidingPageContent title={i18nKey("sendTo")} onBack={onClose}>
+    <Column gap={"xl"} padding={"lg"}>
+        <Search
+            onClear={() => (searchTerm = "")}
+            searching={false}
+            bind:value={searchTerm}
+            placeholder={interpolate($_, i18nKey("search"))} />
+    </Column>
+    {#if noTargets}
+        <NothingToSee
+            title={interpolate($_, i18nKey("noChatsAvailable"))}
+            subtitle={"Looks like you aren't a member of any other chats"} />
+    {:else if targets !== undefined}
+        <Column>
+            {#if targets.directChats.length > 0}
+                <CollapsibleCard
+                    open={searchTerm !== ""}
+                    first
+                    fill
+                    transition={false}
+                    headerText={i18nKey("communities.directChats")}>
+                    {#snippet titleSlot()}
+                        {@render generalHeader(MessageOutline, "communities.directChats")}
+                    {/snippet}
+                    {#each targets.directChats as target}
+                        <Row
+                            onClick={() => onSelect(target.id)}
+                            padding={["sm", "md"]}
+                            gap={"md"}
+                            crossAxisAlignment={"center"}>
+                            <Avatar url={target.avatarUrl} size={"lg"} />
+                            <Column>
+                                <Row width={"hug"} crossAxisAlignment={"center"} gap={"xs"}>
+                                    <Body width={"hug"}>{target.name}</Body>
+                                    <Badges
+                                        uniquePerson={target.uniquePerson}
+                                        diamondStatus={target.diamondStatus}
+                                        streak={target.streak} />
+                                    {#if target.username !== undefined}
+                                        <BodySmall colour={"textSecondary"}>
+                                            {target.username}
+                                        </BodySmall>
+                                    {/if}
+                                </Row>
+                                <Body colour={"textSecondary"}>
+                                    {target.description}
+                                </Body>
+                            </Column>
+                        </Row>
+                    {/each}
+                </CollapsibleCard>
+            {/if}
+            {#if targets.groupChats.length > 0}
+                <CollapsibleCard
+                    transition={false}
+                    fill
+                    open={searchTerm !== ""}
+                    headerText={i18nKey("communities.groupChats")}>
+                    {#snippet titleSlot()}
+                        {@render generalHeader(ForumOutline, "communities.groupChats")}
+                    {/snippet}
+                    {#each targets.groupChats as target}
+                        {@render nonDirect(target)}
+                    {/each}
+                </CollapsibleCard>
+            {/if}
+            {#if targets.favourites.length > 0}
+                <CollapsibleCard
+                    transition={false}
+                    fill
+                    open={searchTerm !== ""}
+                    headerText={i18nKey("communities.favourites")}>
+                    {#snippet titleSlot()}
+                        {@render generalHeader(HeartOutline, "communities.favourites")}
+                    {/snippet}
+                    {#each targets.favourites as target}
+                        {@render nonDirect(target)}
+                    {/each}
+                </CollapsibleCard>
+            {/if}
+            {#each targets.communities as community}
+                {#if community.channels.length > 0}
+                    <CollapsibleCard
+                        fill
+                        transition={false}
+                        open={searchTerm !== ""}
+                        headerText={i18nKey(community.name)}>
+                        {#snippet titleSlot()}
+                            <Row
+                                padding={["zero", "zero"]}
+                                gap={"md"}
+                                crossAxisAlignment={"center"}>
+                                <Avatar url={community.avatarUrl} size={"lg"} />
+                                <Subtitle fontWeight={"bold"}>
+                                    {community.name}
+                                </Subtitle>
+                            </Row>
+                        {/snippet}
+                        {#each community.channels as target}
+                            {@render nonDirect(target)}
+                        {/each}
+                    </CollapsibleCard>
+                {/if}
+            {/each}
+        </Column>
+    {/if}
+</SlidingPageContent>
diff --git a/frontend/app/src/components_mobile/home/SelectChitEarned.svelte b/frontend/app/src/mobile/shell/SelectChitEarned.svelte
similarity index 96%
rename from frontend/app/src/components_mobile/home/SelectChitEarned.svelte
rename to frontend/app/src/mobile/shell/SelectChitEarned.svelte
index 7c80956449..feed11318b 100644
--- a/frontend/app/src/components_mobile/home/SelectChitEarned.svelte
+++ b/frontend/app/src/mobile/shell/SelectChitEarned.svelte
@@ -4,7 +4,7 @@
     import { chitBands } from "@client";
     import Right from "svelte-material-icons/ChevronRight.svelte";
     import Lightning from "svelte-material-icons/FlashOutline.svelte";
-    import Translatable from "../Translatable.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
 
     interface Props {
         min: number;
diff --git a/frontend/app/src/components_mobile/home/SelectMinStreak.svelte b/frontend/app/src/mobile/shell/SelectMinStreak.svelte
similarity index 96%
rename from frontend/app/src/components_mobile/home/SelectMinStreak.svelte
rename to frontend/app/src/mobile/shell/SelectMinStreak.svelte
index bf7288b05c..d70605a859 100644
--- a/frontend/app/src/components_mobile/home/SelectMinStreak.svelte
+++ b/frontend/app/src/mobile/shell/SelectMinStreak.svelte
@@ -3,7 +3,7 @@
     import { Body, ColourVars, Column, H2, Row, Sheet } from "component-lib";
     import Right from "svelte-material-icons/ChevronRight.svelte";
     import LightningBolt from "svelte-material-icons/LightningBoltCircle.svelte";
-    import Translatable from "../Translatable.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
 
     interface Props {
         streaks: number[];
diff --git a/frontend/app/src/components_mobile/ShareMessageModal.svelte b/frontend/app/src/mobile/shell/ShareMessageModal.svelte
similarity index 93%
rename from frontend/app/src/components_mobile/ShareMessageModal.svelte
rename to frontend/app/src/mobile/shell/ShareMessageModal.svelte
index 466133e9a5..7666b401e2 100644
--- a/frontend/app/src/components_mobile/ShareMessageModal.svelte
+++ b/frontend/app/src/mobile/shell/ShareMessageModal.svelte
@@ -2,9 +2,9 @@
     import type { ChatIdentifier, OpenChat } from "@client";
     import { localUpdates } from "@client";
     import { getContext } from "svelte";
-    import { i18nKey } from "../i18n/i18n";
-    import type { Share } from "../utils/share";
-    import { toastStore } from "../stores/toast";
+    import { i18nKey } from "@src/i18n/i18n";
+    import type { Share } from "@src/utils/share";
+    import { toastStore } from "@src/stores/toast";
     import SelectChatModal from "./SelectChatModal.svelte";
 
     interface Props {
diff --git a/frontend/app/src/components_mobile/home/SlidingModals.svelte b/frontend/app/src/mobile/shell/SlidingModals.svelte
similarity index 85%
rename from frontend/app/src/components_mobile/home/SlidingModals.svelte
rename to frontend/app/src/mobile/shell/SlidingModals.svelte
index 645951b448..a8be70f4a5 100644
--- a/frontend/app/src/components_mobile/home/SlidingModals.svelte
+++ b/frontend/app/src/mobile/shell/SlidingModals.svelte
@@ -3,8 +3,8 @@
     import { onPopstate, pushDummyHistoryState } from "@src/utils/history";
     import { communityPreviewState, groupPreviewState } from "@src/utils/preview.svelte";
     import { removeQueryStringParam, stripThreadFromUrl } from "@src/utils/urls";
-    import { pendingShareStore } from "@stores/pendingShare";
-    import { navigate, parentRoute } from "@utils/navigation";
+    import { pendingShareStore } from "@src/stores/pendingShare";
+    import { navigate, parentRoute } from "@src/utils/navigation";
     import { portalState } from "component-lib";
     import {
         chatListScopeStore,
@@ -43,82 +43,82 @@
     import page from "page";
     import { getContext, onMount } from "svelte";
     import { minimizeApp } from "tauri-plugin-oc-api";
-    import { expectBackPress } from "../../utils/native/notification_channels";
-    import { flushPendingNavigation, hasPendingNavigation } from "../../utils/navigation";
-    import type { Share as ShareType } from "../../utils/share";
-    import BotBuilderModal from "../bots/BotBuilderModal.svelte";
-    import BotDetailsPage from "../bots/BotDetailsPage.svelte";
-    import CommandViewer from "../bots/CommandViewer.svelte";
-    import BotInstaller from "../bots/install/BotInstaller.svelte";
-    import WebhookModal from "../bots/WebhookModal.svelte";
-    import ForwardMessageModal from "../ForwardMessageModal.svelte";
-    import ShareMessageModal from "../ShareMessageModal.svelte";
-    import AccessGatesEvaluator from "./access/AccessGatesEvaluator.svelte";
-    import AboutAccessGates from "./access_gates/AboutAccessGates.svelte";
-    import AccessGates from "./access_gates/AccessGates.svelte";
-    import BalanceGates from "./access_gates/BalanceGates.svelte";
-    import EditBalanceGate from "./access_gates/EditBalanceGate.svelte";
-    import EditChitGate from "./access_gates/EditChitGate.svelte";
-    import EditNeuronGate from "./access_gates/EditNeuronGate.svelte";
-    import EditPaymentGate from "./access_gates/EditPaymentGate.svelte";
-    import NeuronGates from "./access_gates/NeuronGates.svelte";
-    import PaymentGates from "./access_gates/PaymentGates.svelte";
-    import AddCommunityMembers from "./communities/createOrUpdate/AddCommunityMembers.svelte";
-    import Channels from "./communities/createOrUpdate/Channels.svelte";
-    import CommunityInfo from "./communities/createOrUpdate/CommunityInfo.svelte";
-    import CommunityPermissions from "./communities/createOrUpdate/Permissions.svelte";
-    import CommunitySummaryComponent from "./communities/details/CommunitySummary.svelte";
-    import ConfirmDeleteCommunity from "./communities/details/ConfirmDelete.svelte";
-    import EditUserGroup from "./communities/details/EditUserGroup.svelte";
-    import UserGroup from "./communities/details/UserGroup.svelte";
-    import UserGroups from "./communities/details/UserGroups.svelte";
-    import AddGroupMembers from "./createOrUpdateGroup/AddGroupMembers.svelte";
-    import GroupInfo from "./createOrUpdateGroup/GroupInfo.svelte";
-    import GroupPermissions from "./createOrUpdateGroup/Permissions.svelte";
-    import ConfirmDeleteChat from "./groupdetails/ConfirmDelete.svelte";
-    import Convert from "./groupdetails/Convert.svelte";
-    import Converted from "./groupdetails/Converted.svelte";
-    import DirectChatDetails from "./groupdetails/DirectChatDetails.svelte";
-    import GroupDetails from "./groupdetails/GroupDetails.svelte";
-    import { UpdateGroupOrCommunityState } from "./groupOrCommunity.svelte";
-    import StreakInsuranceBuy from "./insurance/StreakInsuranceBuy.svelte";
-    import Architecture from "./landing/Architecture.svelte";
-    import BotsList from "./membership/BotsList.svelte";
-    import InviteAndShare from "./membership/InviteAndShare.svelte";
-    import MemberManagement from "./membership/MemberManagement.svelte";
+    import { expectBackPress } from "@src/utils/native/notification_channels";
+    import { flushPendingNavigation, hasPendingNavigation } from "@src/utils/navigation";
+    import type { Share as ShareType } from "@src/utils/share";
+    import BotBuilderModal from "@src/mobile/features/bots/BotBuilderModal.svelte";
+    import BotDetailsPage from "@src/mobile/features/bots/BotDetailsPage.svelte";
+    import CommandViewer from "@src/mobile/features/bots/CommandViewer.svelte";
+    import BotInstaller from "@src/mobile/features/bots/install/BotInstaller.svelte";
+    import WebhookModal from "@src/mobile/features/bots/WebhookModal.svelte";
+    import ForwardMessageModal from "./ForwardMessageModal.svelte";
+    import ShareMessageModal from "./ShareMessageModal.svelte";
+    import AccessGatesEvaluator from "@src/mobile/features/access/AccessGatesEvaluator.svelte";
+    import AboutAccessGates from "@src/mobile/features/access/AboutAccessGates.svelte";
+    import AccessGates from "@src/mobile/features/access/AccessGates.svelte";
+    import BalanceGates from "@src/mobile/features/access/BalanceGates.svelte";
+    import EditBalanceGate from "@src/mobile/features/access/EditBalanceGate.svelte";
+    import EditChitGate from "@src/mobile/features/access/EditChitGate.svelte";
+    import EditNeuronGate from "@src/mobile/features/access/EditNeuronGate.svelte";
+    import EditPaymentGate from "@src/mobile/features/access/EditPaymentGate.svelte";
+    import NeuronGates from "@src/mobile/features/access/NeuronGates.svelte";
+    import PaymentGates from "@src/mobile/features/access/PaymentGates.svelte";
+    import AddCommunityMembers from "@src/mobile/features/chats/community/createOrUpdate/AddCommunityMembers.svelte";
+    import Channels from "@src/mobile/features/chats/community/createOrUpdate/Channels.svelte";
+    import CommunityInfo from "@src/mobile/features/chats/community/createOrUpdate/CommunityInfo.svelte";
+    import CommunityPermissions from "@src/mobile/features/chats/community/createOrUpdate/Permissions.svelte";
+    import CommunitySummaryComponent from "@src/mobile/features/chats/community/details/CommunitySummary.svelte";
+    import ConfirmDeleteCommunity from "@src/mobile/features/chats/community/details/ConfirmDelete.svelte";
+    import EditUserGroup from "@src/mobile/features/chats/community/details/EditUserGroup.svelte";
+    import UserGroup from "@src/mobile/features/chats/community/details/UserGroup.svelte";
+    import UserGroups from "@src/mobile/features/chats/community/details/UserGroups.svelte";
+    import AddGroupMembers from "@src/mobile/features/chats/group/edit/AddGroupMembers.svelte";
+    import GroupInfo from "@src/mobile/features/chats/group/edit/GroupInfo.svelte";
+    import GroupPermissions from "@src/mobile/features/chats/group/edit/Permissions.svelte";
+    import ConfirmDeleteChat from "@src/mobile/features/chats/group/ConfirmDelete.svelte";
+    import Convert from "@src/mobile/features/chats/group/Convert.svelte";
+    import Converted from "@src/mobile/features/chats/group/Converted.svelte";
+    import DirectChatDetails from "@src/mobile/features/chats/group/DirectChatDetails.svelte";
+    import GroupDetails from "@src/mobile/features/chats/group/GroupDetails.svelte";
+    import { UpdateGroupOrCommunityState } from "@src/mobile/shared/groupOrCommunity.svelte";
+    import StreakInsuranceBuy from "@src/mobile/features/access/insurance/StreakInsuranceBuy.svelte";
+    import Architecture from "@src/mobile/features/landing/Architecture.svelte";
+    import BotsList from "@src/mobile/features/chats/members/BotsList.svelte";
+    import InviteAndShare from "@src/mobile/features/chats/members/InviteAndShare.svelte";
+    import MemberManagement from "@src/mobile/features/chats/members/MemberManagement.svelte";
     import NewMessage from "./NewMessage.svelte";
     import P2PSwapContentBuilder from "./P2PSwapContentBuilder.svelte";
-    import PinnedMessages from "./pinned/PinnedMessages.svelte";
+    import PinnedMessages from "@src/mobile/features/chats/pinned/PinnedMessages.svelte";
     import PollBuilder from "./PollBuilder.svelte";
     import PollPublicVotes from "./PollPublicVotes.svelte";
     import PrizeContentBuilder from "./PrizeContentBuilder.svelte";
     import ProposalGroupFilters from "./ProposalGroupFilters.svelte";
     import Rules from "./Rules.svelte";
     import SlidingPage from "./SlidingPage.svelte";
-    import Thread from "./thread/Thread.svelte";
-    import ThreadPreviews from "./thread/ThreadPreviews.svelte";
-    import Upgrade from "./upgrade/Upgrade.svelte";
-    import About from "./user_profile/About.svelte";
-    import Appearance from "./user_profile/Appearance.svelte";
-    import AppSettings from "./user_profile/AppSettings.svelte";
-    import BotConfig from "./user_profile/BotConfig.svelte";
-    import ChatsAndVideo from "./user_profile/ChatsAndVideo.svelte";
-    import ChitRewards from "./user_profile/ChitRewards.svelte";
-    import ClearCache from "./user_profile/ClearCache.svelte";
-    import CommunitySettings from "./user_profile/CommunitySettings.svelte";
-    import DeleteAccount from "./user_profile/DeleteAccount.svelte";
-    import Share from "./user_profile/Share.svelte";
-    import UserInformation from "./user_profile/UserInformation.svelte";
-    import Verify from "./user_profile/Verify.svelte";
-    import ActiveCallParticipants from "./video/ActiveCallParticipants.svelte";
-    import EditRecipient from "./wallet/EditRecipient.svelte";
-    import ManageRecipients from "./wallet/ManageRecipients.svelte";
-    import ReceiveCrypto from "./wallet/ReceiveCrypto.svelte";
-    import SendCrypto from "./wallet/SendCrypto.svelte";
-    import SwapToken from "./wallet/SwapCrypto.svelte";
-    import TokenPage from "./wallet/TokenPage.svelte";
-    import WalletSettings from "./wallet/WalletSettings.svelte";
-    import type { TokenState } from "./wallet/walletState.svelte";
+    import Thread from "@src/mobile/features/chats/thread/Thread.svelte";
+    import ThreadPreviews from "@src/mobile/features/chats/thread/ThreadPreviews.svelte";
+    import Upgrade from "@src/mobile/features/upgrade/Upgrade.svelte";
+    import About from "@src/mobile/features/profile/view/About.svelte";
+    import Appearance from "@src/mobile/features/profile/view/Appearance.svelte";
+    import AppSettings from "@src/mobile/features/profile/view/AppSettings.svelte";
+    import BotConfig from "@src/mobile/features/profile/view/BotConfig.svelte";
+    import ChatsAndVideo from "@src/mobile/features/profile/view/ChatsAndVideo.svelte";
+    import ChitRewards from "@src/mobile/features/profile/view/ChitRewards.svelte";
+    import ClearCache from "@src/mobile/features/profile/view/ClearCache.svelte";
+    import CommunitySettings from "@src/mobile/features/profile/view/CommunitySettings.svelte";
+    import DeleteAccount from "@src/mobile/features/profile/view/DeleteAccount.svelte";
+    import Share from "@src/mobile/features/profile/view/Share.svelte";
+    import UserInformation from "@src/mobile/features/profile/view/UserInformation.svelte";
+    import Verify from "@src/mobile/features/profile/view/Verify.svelte";
+    import ActiveCallParticipants from "@src/mobile/features/calls/ActiveCallParticipants.svelte";
+    import EditRecipient from "@src/mobile/features/wallet/EditRecipient.svelte";
+    import ManageRecipients from "@src/mobile/features/wallet/ManageRecipients.svelte";
+    import ReceiveCrypto from "@src/mobile/features/wallet/ReceiveCrypto.svelte";
+    import SendCrypto from "@src/mobile/features/wallet/SendCrypto.svelte";
+    import SwapToken from "@src/mobile/features/wallet/SwapCrypto.svelte";
+    import TokenPage from "@src/mobile/features/wallet/TokenPage.svelte";
+    import WalletSettings from "@src/mobile/features/wallet/WalletSettings.svelte";
+    import type { TokenState } from "@src/mobile/features/wallet/walletState.svelte";
     /**
      * It is tempting to think that this can completely replace the right panel on mobile but it's not quite so simple.
      * It can replace everything _that is not represented by it's own route_. That is because at the moment
diff --git a/frontend/app/src/components_mobile/home/SlidingPage.svelte b/frontend/app/src/mobile/shell/SlidingPage.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/home/SlidingPage.svelte
rename to frontend/app/src/mobile/shell/SlidingPage.svelte
diff --git a/frontend/app/src/mobile/shell/SuspendedModal.svelte b/frontend/app/src/mobile/shell/SuspendedModal.svelte
new file mode 100644
index 0000000000..d8719ad8ff
--- /dev/null
+++ b/frontend/app/src/mobile/shell/SuspendedModal.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+    import { Body, ColourVars, Column, H2, Row, Sheet } from "component-lib";
+    import { currentUserStore } from "@client";
+    import RobotDead from "svelte-material-icons/RobotDeadOutline.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    interface Props {
+        onClose: () => void;
+    }
+
+    let { onClose }: Props = $props();
+
+    let suspensionDetails = $derived($currentUserStore.suspensionDetails);
+    let actionDate = $derived(new Date(Number(suspensionDetails?.action?.timestamp)));
+    const actionText = $derived(
+        suspensionDetails?.action?.kind === "delete_action" ? "deleted" : "unsuspended",
+    );
+    let notice = $derived(
+        `You can appeal this suspension by sending a direct message to the @OpenChat Twitter account otherwise your account will be ${actionText} on ${actionDate?.toLocaleString()}.`,
+    );
+</script>
+
+<Sheet onDismiss={onClose}>
+    <Column crossAxisAlignment={"center"} gap={"xl"} padding={"xl"}>
+        <H2 width={"hug"} fontWeight={"bold"} colour={"primary"}>
+            <Translatable resourceKey={i18nKey("accountSuspended")} />
+        </H2>
+        <Row padding={["lg", "zero"]} mainAxisAlignment={"center"}>
+            <RobotDead color={ColourVars.primary} size={"6rem"} />
+        </Row>
+        <Column>
+            {#if $currentUserStore.suspensionDetails?.reason !== undefined}
+                <Row gap={"sm"}>
+                    <Body width={"hug"} colour={"primary"}>Reason:</Body>
+                    <Body width={"hug"}>{$currentUserStore.suspensionDetails?.reason}</Body>
+                </Row>
+            {/if}
+        </Column>
+        <Body colour={"textSecondary"}>{notice}</Body>
+    </Column>
+</Sheet>
diff --git a/frontend/app/src/mobile/shell/Toast.svelte b/frontend/app/src/mobile/shell/Toast.svelte
new file mode 100644
index 0000000000..51e847900f
--- /dev/null
+++ b/frontend/app/src/mobile/shell/Toast.svelte
@@ -0,0 +1,125 @@
+<script lang="ts">
+    import { Body, Tooltip } from "component-lib";
+    import {
+        type ChatIdentifier,
+        iconSize,
+        localUpdates,
+        routeForChatIdentifier,
+        subscribe,
+    } from "@client";
+    import { navigate } from "@src/utils/navigation";
+    import { onMount } from "svelte";
+    import { _ } from "svelte-i18n";
+    import Bug from "svelte-material-icons/Bug.svelte";
+    import Close from "svelte-material-icons/Close.svelte";
+    import { sineIn } from "svelte/easing";
+    import { fly } from "svelte/transition";
+    import { i18nKey, interpolate } from "@src/i18n/i18n";
+    import { toastStore } from "@src/stores/toast";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    let reactiveResourceKey = $derived($toastStore?.resourceKey);
+
+    function report() {
+        if (
+            $toastStore &&
+            $toastStore.kind === "failure" &&
+            $toastStore.err !== undefined &&
+            $reactiveResourceKey !== undefined
+        ) {
+            const msg = interpolate($_, $reactiveResourceKey);
+            const withDetail = `${msg} (${$toastStore.err})`;
+            const chatId = {
+                kind: "channel",
+                communityId: "dgegb-daaaa-aaaar-arlhq-cai",
+                channelId: 2235218862,
+            } as ChatIdentifier;
+            navigate(routeForChatIdentifier("community", chatId));
+            localUpdates.draftMessages.setTextContent({ chatId }, withDetail);
+            toastStore.hideToast();
+        }
+    }
+
+    onMount(() => {
+        const unsubs = [
+            subscribe("showFailureToast", ({ resourceKey, err }) =>
+                toastStore.showFailureToast(resourceKey, err),
+            ),
+            subscribe("showSuccessToast", (resourceKey) =>
+                toastStore.showSuccessToast(resourceKey),
+            ),
+        ];
+        return () => {
+            unsubs.forEach((u) => u());
+        };
+    });
+</script>
+
+{#if $toastStore && $reactiveResourceKey}
+    <div class="toast" transition:fly={{ y: 200, duration: 200, easing: sineIn }}>
+        <div
+            class="message"
+            class:failure={$toastStore.kind === "failure"}
+            class:success={$toastStore.kind === "success"}>
+            <Body align={"center"}>
+                <Translatable resourceKey={$reactiveResourceKey} />
+            </Body>
+            {#if $toastStore.kind === "failure"}
+                {#if $toastStore.err !== undefined}
+                    <Tooltip position="top" align="middle">
+                        <div class="report" onclick={report}>
+                            <Bug size={$iconSize} color={"var(--text-primary)"} />
+                        </div>
+                        {#snippet popup()}
+                            <Translatable resourceKey={i18nKey("reportBug")} />
+                        {/snippet}
+                    </Tooltip>
+                {/if}
+                <div class="close" onclick={toastStore.hideToast}>
+                    <Close size={$iconSize} color={"var(--text-primary)"} />
+                </div>
+            {/if}
+        </div>
+    </div>
+{/if}
+
+<style lang="scss">
+    .toast {
+        position: fixed;
+        bottom: $sp7;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        @include z-index("toast");
+    }
+
+    .message {
+        transition: background 200ms ease-in-out;
+        background: var(--success);
+        border-radius: var(--rad-md);
+        padding: $sp4;
+        max-width: 800px;
+        margin: 0 $sp4;
+        display: flex;
+        gap: $sp4;
+        justify-content: center;
+        align-items: center;
+        color: var(--text-primary);
+        width: 100%;
+
+        &.failure {
+            background: var(--error);
+        }
+
+        &.success {
+            background: var(--success);
+        }
+
+        .close,
+        .report {
+            flex: 0 0 30px;
+            cursor: pointer;
+        }
+    }
+</style>
diff --git a/frontend/app/src/mobile/shell/UpgradeBanner.svelte b/frontend/app/src/mobile/shell/UpgradeBanner.svelte
new file mode 100644
index 0000000000..59352ab190
--- /dev/null
+++ b/frontend/app/src/mobile/shell/UpgradeBanner.svelte
@@ -0,0 +1,101 @@
+<script lang="ts">
+    import { Body, BodySmall, ColourVars, Column, Row } from "component-lib";
+    import { OpenChat, Poller, Version } from "@client";
+    import { getContext, onDestroy } from "svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { activeVideoCall } from "@src/stores/video";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+
+    const VERSION_INTERVAL = 60 * 1000;
+    const client = getContext<OpenChat>("client");
+
+    let poller = new Poller(checkVersion, VERSION_INTERVAL);
+    // @ts-ignore
+    let clientVersion = Version.parse(window.OC_WEBSITE_VERSION);
+    let serverVersion = $state(clientVersion);
+    let countdown = $state(30);
+    let showBanner = $state(false);
+    let errorCount = 0;
+
+    onDestroy(() => poller.stop());
+
+    function checkVersion(): Promise<void> {
+        if (import.meta.env.OC_NODE_ENV !== "production" || $activeVideoCall !== undefined)
+            return Promise.resolve();
+        return getServerVersion().then((sv) => {
+            serverVersion = sv;
+            if (serverVersion.isGreaterThan(clientVersion)) {
+                poller.stop();
+                countdown = 30;
+                showBanner = true;
+                const interval = window.setInterval(() => {
+                    countdown = countdown - 1;
+                    if (countdown === 0) {
+                        window.clearInterval(interval);
+                        window.location.reload();
+                    }
+                }, 1000);
+            }
+        });
+    }
+
+    function getServerVersion(): Promise<Version> {
+        return fetch("/version", {
+            method: "get",
+            headers: {
+                "Content-Type": "application/json",
+            },
+        })
+            .then((res) => res.json())
+            .then((res) => {
+                client.logMessage("Server version: ", res);
+                errorCount = 0;
+                return Version.parse(res.version);
+            })
+            .catch((err) => {
+                errorCount += 1;
+                client.logError(`Unable to load server version ${errorCount} times`, err);
+                return clientVersion;
+            });
+    }
+
+    function reload(ev: Event) {
+        window.location.reload();
+        ev.preventDefault();
+    }
+</script>
+
+{#if showBanner}
+    <Column
+        mainAxisAlignment={"center"}
+        crossAxisAlignment={"center"}
+        backgroundColor={ColourVars.warning}
+        padding={"lg"}
+        supplementalClass={"upgrade_banner"}>
+        <Row wrap>
+            <Body width={"hug"} fontWeight={"bold"}>
+                <Translatable resourceKey={i18nKey("updateRequired", { countdown })} />
+            </Body>
+        </Row>
+        <BodySmall width={"hug"} fontWeight={"light"}>
+            <a href="/" onclick={reload}><Translatable resourceKey={i18nKey("updateNow")} /></a>
+        </BodySmall>
+    </Column>
+{/if}
+
+<style lang="scss">
+    :global(.container.upgrade_banner) {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        @include z-index("upgrade-banner");
+    }
+
+    a {
+        text-decoration: underline;
+        text-underline-offset: $sp1;
+        cursor: pointer;
+        color: inherit;
+    }
+</style>
diff --git a/frontend/app/src/components_mobile/home/WelcomePage.svelte b/frontend/app/src/mobile/shell/WelcomePage.svelte
similarity index 94%
rename from frontend/app/src/components_mobile/home/WelcomePage.svelte
rename to frontend/app/src/mobile/shell/WelcomePage.svelte
index 1e1900fabb..fbfa1755be 100644
--- a/frontend/app/src/components_mobile/home/WelcomePage.svelte
+++ b/frontend/app/src/mobile/shell/WelcomePage.svelte
@@ -20,18 +20,18 @@
         type CommunitySummary,
         type OpenChat,
     } from "@client";
-    import { navigate } from "@utils/navigation";
+    import { navigate } from "@src/utils/navigation";
     import { getContext, onMount } from "svelte";
     import { _ } from "svelte-i18n";
     import RightChevron from "svelte-material-icons/ChevronRight.svelte";
     import Diamond from "svelte-material-icons/DiamondOutline.svelte";
     import Translate from "svelte-material-icons/Translate.svelte";
-    import MulticolourText from "../MulticolourText.svelte";
-    import SparkleBoxOutline from "../SparkleBoxOutline.svelte";
-    import Translatable from "../Translatable.svelte";
-    import { updateCommunityState } from "./communities/createOrUpdate/community.svelte";
-    import CommunityBanner from "./communities/explore/CommunityBanner.svelte";
-    import CommunityMatchComponent from "./communities/explore/CommunityMatch.svelte";
+    import MulticolourText from "@src/mobile/shared/MulticolourText.svelte";
+    import SparkleBoxOutline from "@src/mobile/shared/SparkleBoxOutline.svelte";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import { updateCommunityState } from "@src/mobile/features/chats/community/createOrUpdate/community.svelte";
+    import CommunityBanner from "@src/mobile/features/chats/community/explore/CommunityBanner.svelte";
+    import CommunityMatchComponent from "@src/mobile/features/chats/community/explore/CommunityMatch.svelte";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/components_mobile/icons/Bitcoin.svelte b/frontend/app/src/mobile/ui/icons/Bitcoin.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/icons/Bitcoin.svelte
rename to frontend/app/src/mobile/ui/icons/Bitcoin.svelte
diff --git a/frontend/app/src/components_mobile/icons/ChooseImage.svelte b/frontend/app/src/mobile/ui/icons/ChooseImage.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/icons/ChooseImage.svelte
rename to frontend/app/src/mobile/ui/icons/ChooseImage.svelte
diff --git a/frontend/app/src/mobile/ui/icons/Diamond.svelte b/frontend/app/src/mobile/ui/icons/Diamond.svelte
new file mode 100644
index 0000000000..315ab9e05c
--- /dev/null
+++ b/frontend/app/src/mobile/ui/icons/Diamond.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+    import { Tooltip } from "component-lib";
+    import type { DiamondMembershipStatus, ResourceKey } from "@client";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import Diamond from "svelte-material-icons/Diamond.svelte";
+    import DiamondOutline from "svelte-material-icons/DiamondOutline.svelte";
+    import BadgeContainer, { type BadgeSize } from "@src/mobile/features/profile/BadgeContainer.svelte";
+
+    interface Props {
+        size?: BadgeSize;
+        show?: "blue" | "gold" | undefined;
+        status?: DiamondMembershipStatus["kind"] | undefined;
+        borderColor?: string;
+    }
+
+    let { size = "default", show = undefined, status = undefined, borderColor }: Props = $props();
+
+    function getStatusName(
+        status: DiamondMembershipStatus["kind"] | undefined,
+    ): ResourceKey | undefined {
+        if (status === undefined) return undefined;
+
+        switch (status) {
+            case "lifetime":
+                return i18nKey("upgrade.lifetime");
+            case "active":
+                return i18nKey("upgrade.diamond");
+            default:
+                return i18nKey(status);
+        }
+    }
+    let statusName = $derived(getStatusName(status));
+    let iconSize = size == "large" ? "1rem" : "0.625rem";
+</script>
+
+{#if status !== "inactive" || show}
+    <Tooltip uppercase position="top" align="middle">
+        <BadgeContainer {size} {borderColor}>
+            {#if status == "lifetime"}
+                <Diamond size={iconSize} />
+            {:else}
+                <DiamondOutline size={iconSize} />
+            {/if}
+        </BadgeContainer>
+        {#snippet popup()}
+            {#if statusName !== undefined}
+                <Translatable resourceKey={statusName} />
+            {/if}
+        {/snippet}
+    </Tooltip>
+{/if}
diff --git a/frontend/app/src/components_mobile/icons/FancyLoader.svelte b/frontend/app/src/mobile/ui/icons/FancyLoader.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/icons/FancyLoader.svelte
rename to frontend/app/src/mobile/ui/icons/FancyLoader.svelte
diff --git a/frontend/app/src/components_mobile/icons/Gif.svelte b/frontend/app/src/mobile/ui/icons/Gif.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/icons/Gif.svelte
rename to frontend/app/src/mobile/ui/icons/Gif.svelte
diff --git a/frontend/app/src/components_mobile/icons/HeartMinus.svelte b/frontend/app/src/mobile/ui/icons/HeartMinus.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/icons/HeartMinus.svelte
rename to frontend/app/src/mobile/ui/icons/HeartMinus.svelte
diff --git a/frontend/app/src/components_mobile/icons/HeartPlus.svelte b/frontend/app/src/mobile/ui/icons/HeartPlus.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/icons/HeartPlus.svelte
rename to frontend/app/src/mobile/ui/icons/HeartPlus.svelte
diff --git a/frontend/app/src/components_mobile/icons/InternetIdentityLogo.svelte b/frontend/app/src/mobile/ui/icons/InternetIdentityLogo.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/icons/InternetIdentityLogo.svelte
rename to frontend/app/src/mobile/ui/icons/InternetIdentityLogo.svelte
diff --git a/frontend/app/src/components_mobile/icons/MemeFighter.svelte b/frontend/app/src/mobile/ui/icons/MemeFighter.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/icons/MemeFighter.svelte
rename to frontend/app/src/mobile/ui/icons/MemeFighter.svelte
diff --git a/frontend/app/src/components_mobile/icons/Send.svelte b/frontend/app/src/mobile/ui/icons/Send.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/icons/Send.svelte
rename to frontend/app/src/mobile/ui/icons/Send.svelte
diff --git a/frontend/app/src/components_mobile/icons/Spinner.svelte b/frontend/app/src/mobile/ui/icons/Spinner.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/icons/Spinner.svelte
rename to frontend/app/src/mobile/ui/icons/Spinner.svelte
diff --git a/frontend/app/src/components_mobile/icons/SpinningToken.svelte b/frontend/app/src/mobile/ui/icons/SpinningToken.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/icons/SpinningToken.svelte
rename to frontend/app/src/mobile/ui/icons/SpinningToken.svelte
diff --git a/frontend/app/src/mobile/ui/icons/Verified.svelte b/frontend/app/src/mobile/ui/icons/Verified.svelte
new file mode 100644
index 0000000000..7f1d6f7e76
--- /dev/null
+++ b/frontend/app/src/mobile/ui/icons/Verified.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+    import { Tooltip, ColourVars } from "component-lib";
+    import type { ResourceKey } from "@client";
+    import Translatable from "@src/mobile/shared/Translatable.svelte";
+    import Check from "svelte-material-icons/Check.svelte";
+    import BadgeContainer, { type BadgeSize } from "@src/mobile/features/profile/BadgeContainer.svelte";
+
+    interface Props {
+        verified: boolean;
+        size?: BadgeSize;
+        tooltip?: ResourceKey;
+        borderColor?: string;
+    }
+
+    let { size = "default", tooltip, borderColor }: Props = $props();
+
+    // Verified user (DecideAI) concept is suspended - never render the badge.
+    const verified = false;
+</script>
+
+{#snippet renderCheck()}
+    <BadgeContainer {size} {borderColor} backgroundColor={ColourVars.secondary}>
+        <Check size={size === "large" ? "1rem" : "0.625rem"} />
+    </BadgeContainer>
+{/snippet}
+
+{#if verified}
+    {#if tooltip !== undefined}
+        <Tooltip uppercase position="top" align="middle">
+            {@render renderCheck()}
+            {#snippet popup()}
+                <Translatable resourceKey={tooltip} />
+            {/snippet}
+        </Tooltip>
+    {:else}
+        {@render renderCheck()}
+    {/if}
+{/if}
diff --git a/frontend/app/src/components_mobile/icons/WithVerifiedBadge.svelte b/frontend/app/src/mobile/ui/icons/WithVerifiedBadge.svelte
similarity index 100%
rename from frontend/app/src/components_mobile/icons/WithVerifiedBadge.svelte
rename to frontend/app/src/mobile/ui/icons/WithVerifiedBadge.svelte
diff --git a/frontend/app/src/components_shared/Arrow.svelte b/frontend/app/src/ui/Arrow.svelte
similarity index 100%
rename from frontend/app/src/components_shared/Arrow.svelte
rename to frontend/app/src/ui/Arrow.svelte
diff --git a/frontend/app/src/components/Button.svelte b/frontend/app/src/ui/Button.svelte
similarity index 94%
rename from frontend/app/src/components/Button.svelte
rename to frontend/app/src/ui/Button.svelte
index 2ce464ba7d..3d21d1420f 100644
--- a/frontend/app/src/components/Button.svelte
+++ b/frontend/app/src/ui/Button.svelte
@@ -18,7 +18,7 @@
 
 <script lang="ts">
     import type { Snippet } from "svelte";
-    import { currentTheme } from "../theme/themes";
+    import { currentTheme } from "@src/theme/themes";
     import SignalsButton from "./SignalsButton.svelte";
     import StandardButton from "./StandardButton.svelte";
 
diff --git a/frontend/app/src/components/ButtonGroup.svelte b/frontend/app/src/ui/ButtonGroup.svelte
similarity index 100%
rename from frontend/app/src/components/ButtonGroup.svelte
rename to frontend/app/src/ui/ButtonGroup.svelte
diff --git a/frontend/app/src/ui/ChatEventList.svelte b/frontend/app/src/ui/ChatEventList.svelte
new file mode 100644
index 0000000000..10d7bad064
--- /dev/null
+++ b/frontend/app/src/ui/ChatEventList.svelte
@@ -0,0 +1,1212 @@
+<script lang="ts" module>
+    import type { ChatEvent as ChatEventType, EventWrapper, Mention } from "@client";
+
+    export type ChatEventListArgs = {
+        isAccepted: (_unconf: unknown, evt: EventWrapper<ChatEventType>) => boolean;
+        isConfirmed: (_unconf: unknown, evt: EventWrapper<ChatEventType>) => boolean;
+        isFailed: (_failed: unknown, evt: EventWrapper<ChatEventType>) => boolean;
+        isReadByMe: (_store: unknown, evt: EventWrapper<ChatEventType>) => boolean;
+        messageObserver: IntersectionObserver | undefined;
+        focusIndex: number | undefined;
+    };
+
+    // state + actions handed to the platform-specific FAB snippet
+    export type ChatEventListFabArgs = {
+        showGoToTop: boolean;
+        showGoToBottom: boolean;
+        loadingFromUserScroll: boolean;
+        scrollToTop: () => void;
+        scrollToLast: () => void;
+        scrollToMention: (mention: Mention | undefined) => void;
+    };
+</script>
+
+<script lang="ts">
+    import { portalState } from "component-lib";
+    import {
+        currentUserIdStore,
+        eventIndexesLoadedStore,
+        eventListLastScrolled,
+        eventListScrollTop,
+        eventListScrolling,
+        localUpdates,
+        messageContextsEqual,
+        routeStore,
+        subscribe,
+        withEqCheck,
+        type ChatSummary,
+        type Message,
+        type MessageContext,
+        type OpenChat,
+    } from "@client";
+    import { getContext, onMount, tick, untrack, type Snippet } from "svelte";
+    import { isSafari, mobileOperatingSystem } from "@src/utils/devices";
+    import type { FlatChatItem } from "./flatChatItems";
+    import { vclDebug } from "./vclDebug";
+    import VirtualChatList from "./VirtualChatList.svelte";
+
+    // todo - these thresholds need to be relative to screen height otherwise things get screwed up on (relatively) tall screens
+    const MESSAGE_READ_THRESHOLD = 500;
+    const FROM_END_THRESHOLD = 600;
+    const LOADING_THRESHOLD = 400;
+    // Loading newer messages gets a bigger head start: scrolling forwards runs
+    // into the hard scrollTop=0 wall when the load hasn't landed yet, which
+    // feels far worse than the equivalent at the top of the list.
+    const LOAD_NEW_THRESHOLD = 800;
+    const SCROLL_THRESHOLD = 500;
+    const client = getContext<OpenChat>("client");
+
+    interface Props {
+        rootSelector: string;
+        chat: ChatSummary;
+        threadRootEvent: EventWrapper<Message> | undefined;
+        items: FlatChatItem[];
+        readonly: boolean;
+        maintainScroll: boolean;
+        visible: boolean;
+        initialised: boolean;
+        messagesDiv?: HTMLDivElement;
+        messagesDivHeight?: number;
+        // platform-specific class applied to the scroll viewport — must size it
+        // (e.g. flex: auto) and may set padding/gap/background
+        viewportClass?: string;
+        // y-position of the floating date element (from the platform wrapper)
+        stickyDateElTop?: number;
+        stickyDateTimestamp?: bigint;
+        row: Snippet<[FlatChatItem, ChatEventListArgs]>;
+        fabs?: Snippet<[ChatEventListFabArgs]>;
+    }
+
+    let {
+        rootSelector,
+        chat,
+        threadRootEvent,
+        items: allItems,
+        readonly,
+        maintainScroll,
+        visible,
+        initialised = $bindable(),
+        messagesDiv = $bindable(undefined),
+        messagesDivHeight = $bindable(0),
+        viewportClass,
+        stickyDateElTop,
+        stickyDateTimestamp = $bindable(undefined),
+        row,
+        fabs,
+    }: Props = $props();
+
+    let virtualList: VirtualChatList<FlatChatItem> | undefined = $state();
+    let focusIndex = $state<number | undefined>();
+    let interrupt = $state(false);
+    let fromBottom = $state(0);
+    let loadingFromUserScroll = $state(false);
+    let showGoToBottom = $state(false);
+    let showGoToTop = $state(false);
+    let messageObserver: IntersectionObserver | undefined = $state();
+    let scrollingToMessage = false;
+    let scrollToBottomOnSend = false;
+    // Set when the user asks for the latest messages (go-to-bottom FAB). While
+    // set, incoming loads of newer messages snap to the bottom instead of
+    // preserving the reading position — otherwise the catch-up cascade drifts
+    // the viewport away from the bottom the user just asked for. Cleared by a
+    // genuine user scroll or a context change.
+    let pinToBottom = false;
+    let destroyed = false;
+    let loadingNewMessages = false;
+    let loadingPrevMessages = false;
+    // After a scroll-triggered load, block further scroll-triggered loads until
+    // the gesture fully stops (see trackScrollStop) — prevents runaway loading
+    // while momentum keeps the viewport inside a loading threshold.
+    let requireScrollStop = false;
+    // Circuit breaker: if a load completes without changing the items at all
+    // (e.g. every returned event is filtered out of the timeline), the loading
+    // thresholds remain satisfied and the load loop would spin forever —
+    // load → scrollTop restore → scroll event → threshold check → load…
+    // burning CPU and memory until the tab dies. Cool the loader down when a
+    // load makes no progress — per direction, so a fruitless backward load
+    // doesn't also suppress new-message loading (or vice versa).
+    let loadPrevCooldownUntil = 0;
+    let loadNewCooldownUntil = 0;
+    let messageReadTimers: Record<number, number> = {};
+
+    let threadSummary = $derived(threadRootEvent?.event.thread);
+    let messageContext = $derived.by(
+        withEqCheck(
+            () => ({
+                chatId: chat?.id,
+                threadRootMessageIndex: threadRootEvent?.event.messageIndex,
+            }),
+            messageContextsEqual,
+        ),
+    );
+
+    // The event store can hold disjoint ranges: the window loaded around a
+    // navigation target, an island of the very latest messages (merged from
+    // chat summary updates), and scattered strays in between. The timeline
+    // flattens everything into one list, so the estimates spanning the gaps
+    // are fiction — scrolling forward from an old message crosses the gap in
+    // a screenful, hits a false bottom at the island tip, then grinds
+    // backfill loads whose progress lands invisibly above the viewport.
+    // Render only the contiguous segment containing the anchor: the last
+    // navigation target, or the newest segment when reading the live edge.
+    // Threads are always contiguous — no filtering.
+    let anchorMessageIndex = $state<number | undefined>(undefined);
+
+    let items = $derived.by<FlatChatItem[]>(() => {
+        if (threadRootEvent !== undefined || allItems.length === 0) return allItems;
+        const loaded = $eventIndexesLoadedStore;
+        // Segment boundaries: a split between adjacent event items whose gap
+        // is not fully covered by the loaded ranges (expired/disappeared
+        // events count as loaded). allItems is newest-first, so event
+        // indexes descend as the flat index ascends.
+        const bounds = [0];
+        let prev: number | undefined;
+        for (let i = 0; i < allItems.length; i++) {
+            const item = allItems[i];
+            if (item.kind !== "event") continue;
+            const idx = item.event.index;
+            if (prev !== undefined && prev - idx > 1) {
+                const gap = prev - idx - 1;
+                if (loaded.clone().intersect(idx + 1, prev - 1).length !== gap) {
+                    bounds.push(i);
+                }
+            }
+            prev = idx;
+        }
+        if (bounds.length === 1) return allItems;
+        bounds.push(allItems.length);
+        let chosen = 0;
+        if (anchorMessageIndex !== undefined) {
+            for (let s = 0; s < bounds.length - 1; s++) {
+                let newest: number | undefined;
+                let oldest: number | undefined;
+                for (let i = bounds[s]; i < bounds[s + 1]; i++) {
+                    const item = allItems[i];
+                    if (item.kind === "event" && item.event.event.kind === "message") {
+                        newest ??= item.event.event.messageIndex;
+                        oldest = item.event.event.messageIndex;
+                    }
+                }
+                if (
+                    newest !== undefined &&
+                    anchorMessageIndex <= newest &&
+                    anchorMessageIndex >= (oldest ?? newest)
+                ) {
+                    chosen = s;
+                    break;
+                }
+            }
+        }
+        const seg = allItems.slice(bounds[chosen], bounds[chosen + 1]);
+        vclDebug.log("segment", {
+            segs: bounds.length - 1,
+            chosen,
+            anchor: anchorMessageIndex,
+            len: seg.length,
+            of: allItems.length,
+        });
+        return seg;
+    });
+
+    // messageIndex -> flat item index, for programmatic scrolling.
+    // Failed messages are excluded (mirrors findMessageEvent).
+    let messageIndexToFlat = $derived.by(() => {
+        const map = new Map<number, number>();
+        for (let i = 0; i < items.length; i++) {
+            const item = items[i];
+            if (
+                item.kind === "event" &&
+                item.event.event.kind === "message" &&
+                !localUpdates.isFailed(messageContext, item.event.event.messageId)
+            ) {
+                map.set(item.event.event.messageIndex, i);
+            }
+        }
+        return map;
+    });
+
+    const fromTop = () => {
+        if (messagesDiv) {
+            return messagesDiv.scrollHeight - messagesDiv.clientHeight - fromBottom;
+        }
+        return 0;
+    };
+
+    const insideBottomThreshold = () => fromBottom < LOADING_THRESHOLD;
+
+    // A navigation abandoned by a chat switch exits through the context
+    // mismatch guard without clearing scrollingToMessage — which would leave
+    // background loading gated off in the newly selected chat.
+    $effect(() => {
+        void messageContext;
+        scrollingToMessage = false;
+        navToken++;
+        // a hidden-time navigation belongs to the chat it was issued in
+        pendingHiddenNav = undefined;
+        anchorMessageIndex = undefined;
+    });
+    const insideTopThreshold = () => fromTop() < LOADING_THRESHOLD;
+
+    $effect(() => {
+        void fromBottom;
+        updateShowGoToBottom();
+        updateShowGoToTop();
+    });
+
+    $effect(() => {
+        // previously the component would have been destroyed when not showing the middle panel meaning all of
+        // these variables would have been re-initialised
+        if (!visible) {
+            initialised = false;
+            destroyed = true;
+            loadingFromUserScroll = false;
+            scrollingToMessage = false;
+            scrollToBottomOnSend = false;
+            loadingNewMessages = false;
+            loadingPrevMessages = false;
+            requireScrollStop = false;
+            pinToBottom = false;
+        }
+    });
+
+    // A navigation that arrived while the list was hidden (covering panel);
+    // executed as soon as the list is visible again, with a real viewport to
+    // position against. $state is load-bearing: the revive effect must fire
+    // when the navigation is stashed, not only when `visible` next changes —
+    // depending on layout the visibility flip can precede the stash.
+    let pendingHiddenNav = $state<
+        { context: MessageContext; index: number; preserveFocus: boolean } | undefined
+    >(undefined);
+
+    $effect(() => {
+        if (visible && pendingHiddenNav !== undefined) {
+            const nav = pendingHiddenNav;
+            untrack(() => {
+                pendingHiddenNav = undefined;
+                destroyed = false;
+                vclDebug.log("scroll-to-msg-revive", { index: nav.index });
+                scrollToMessageIndex(nav.context, nav.index, nav.preserveFocus);
+            });
+        }
+    });
+
+    // Restore the persisted scroll position (stored as fromBottom, not
+    // scrollTop — it is stable across height re-estimation) when the list
+    // becomes visible again.
+    $effect(() => {
+        if (visible && maintainScroll) {
+            untrack(() => {
+                const fb = $eventListScrollTop;
+                if (fb !== undefined) {
+                    vclDebug.log("restore", { fb: Math.round(fb) });
+                    initialised = true;
+                    destroyed = false;
+                    fromBottom = fb;
+                    // restore the browser scroll position under interrupt; when the
+                    // interrupt ends VirtualChatList resyncs its window from it
+                    interruptScroll(-fb);
+                }
+            });
+        }
+    });
+
+    function updateShowGoToBottom() {
+        showGoToBottom = fromBottom > FROM_END_THRESHOLD;
+    }
+
+    function updateShowGoToTop() {
+        showGoToTop = fromTop() > FROM_END_THRESHOLD;
+    }
+
+    function isDateMarker(item: FlatChatItem): boolean {
+        return item.kind === "timeline_date";
+    }
+
+    // Height classes for the virtual list's unmeasured-item estimates. Date
+    // markers are effectively constant-height and media is several times
+    // taller than text — a single global average is systematically wrong for
+    // everything (trace: 39px markers against a 261px average). Bucket by
+    // content kind, with link-preview texts split out: a text message with an
+    // OG preview measures ~400px against ~80px for plain text, and lumping
+    // them together poisons the shared average from both ends (device trace:
+    // debt railing +892 through a preview cluster and -1183 through plain
+    // text estimated at the inflated shared average).
+    function estimateClass(item: FlatChatItem): string {
+        switch (item.kind) {
+            case "timeline_date":
+                return "date";
+            case "chat_start":
+                return "chat_start";
+            case "event": {
+                const evt = item.event.event;
+                if (evt.kind !== "message") return "event";
+                if (
+                    evt.content.kind === "text_content" &&
+                    ((evt.ogPreviews?.length ?? 0) > 0 ||
+                        (evt.messagePreviews?.length ?? 0) > 0)
+                ) {
+                    return "text_preview";
+                }
+                return evt.content.kind;
+            }
+        }
+    }
+
+    function timestampFor(item: FlatChatItem): bigint | undefined {
+        switch (item.kind) {
+            case "timeline_date":
+                return item.timestamp;
+            case "event":
+                return item.event.timestamp;
+            default:
+                return undefined;
+        }
+    }
+
+    onMount(() => {
+        const messageObserverOptions = {
+            root: messagesDiv as Element,
+            rootMargin: "0px",
+            threshold: [0.1, 0.2, 0.3, 0.4, 0.5],
+        };
+
+        messageObserver = new IntersectionObserver((entries: IntersectionObserverEntry[]) => {
+            entries.forEach((entry) => {
+                const idxAttrs = entry.target.attributes.getNamedItem("data-index");
+                const idAttr = entry.target.attributes.getNamedItem("data-id");
+                const idx = idxAttrs
+                    ? Math.max(...idxAttrs.value.split(" ").map((v) => parseInt(v, 10)))
+                    : undefined;
+                const id = idAttr ? BigInt(idAttr.value) : undefined;
+                if (idx !== undefined) {
+                    const intersectionRatioRequired =
+                        0 < messagesDivHeight && messagesDivHeight < entry.boundingClientRect.height
+                            ? (messagesDivHeight * 0.5) / entry.boundingClientRect.height
+                            : 0.5;
+
+                    const isIntersecting = entry.intersectionRatio >= intersectionRatioRequired;
+                    if (isIntersecting && messageReadTimers[idx] === undefined) {
+                        const context = messageContext;
+                        const timer = window.setTimeout(() => {
+                            // With virtualization a fast fling can destroy the row
+                            // before the observer reports it leaving — the cancel
+                            // branch below never runs, and a message that was only
+                            // glimpsed would be marked read. A destroyed row is
+                            // detached from the document; skip it.
+                            if (
+                                entry.target.isConnected &&
+                                messageContextsEqual(context, messageContext)
+                            ) {
+                                client.markMessageRead(messageContext, idx, id);
+                                messageObserver?.unobserve(entry.target);
+                            }
+                            delete messageReadTimers[idx];
+                        }, MESSAGE_READ_THRESHOLD);
+                        messageReadTimers[idx] = timer;
+                    }
+                    if (!isIntersecting && messageReadTimers[idx] !== undefined) {
+                        window.clearTimeout(messageReadTimers[idx]);
+                        delete messageReadTimers[idx];
+                    }
+                }
+            });
+        }, messageObserverOptions);
+
+        const unsubs = [
+            subscribe("chatUpdated", chatsUpdated),
+            subscribe("reactionSelected", afterReaction),
+            subscribe("sendingMessage", sendingMessage),
+            subscribe("sentMessage", sentMessage),
+            subscribe("loadedMessageWindow", onMessageWindowLoaded),
+            subscribe(
+                "loadedNewMessages",
+                (args) => !scrollingToMessage && onLoadedNewMessages(args),
+            ),
+            subscribe(
+                "loadedPreviousMessages",
+                (args) => !scrollingToMessage && onLoadedPreviousMessages(args),
+            ),
+        ];
+        return () => {
+            unsubs.forEach((u) => u());
+            destroyed = true;
+            messageObserver?.disconnect();
+            messageObserver = undefined;
+            for (const timer of Object.values(messageReadTimers)) {
+                window.clearTimeout(timer);
+            }
+            messageReadTimers = {};
+            clearTimeout(scrollTimeout);
+        };
+    });
+
+    function chatsUpdated(ctx: MessageContext) {
+        // Never start a background new-message load while a message navigation
+        // is in flight: loadEventWindow clears the event store before its
+        // window arrives, and a concurrent load merging the latest messages
+        // into the empty store makes the window fail the contiguity check and
+        // get dropped — the navigation then lands nowhere (observed as pinned
+        // message navigation failing on busy channels most of the time).
+        if (messageContextsEqual(ctx, messageContext) && !scrollingToMessage) {
+            // I *think* chatsUpdated is only going to be because there are new messages to load
+            // so there is no need to load more previous messages. It's better that we don't even check
+            // here because in certain race conditions we might ending up loading the previous messages twice.
+            loadNewMessagesIfRequired();
+        }
+    }
+
+    function sendingMessage(ctx: MessageContext) {
+        if (messageContextsEqual(ctx, messageContext)) {
+            scrollToBottomOnSend = insideBottomThreshold();
+        }
+    }
+
+    function sentMessage(payload: { context: MessageContext; event: EventWrapper<Message> }) {
+        tick().then(() => {
+            if (messageContextsEqual(payload.context, messageContext)) {
+                afterSendMessage(payload.context, payload.event);
+            }
+        });
+    }
+
+    async function afterReaction({
+        messageId,
+        kind,
+    }: {
+        messageId: bigint;
+        kind: "add" | "remove";
+    }) {
+        if (
+            !client.moreNewMessagesAvailable(chat.id, threadRootEvent) &&
+            kind === "add" &&
+            insideBottomThreshold() &&
+            findLastMessage()?.messageId === messageId
+        ) {
+            await scrollBottom("smooth");
+        }
+    }
+
+    function findLastMessage(): Message | undefined {
+        // items[0] is the newest
+        for (const item of items) {
+            if (item.kind === "event" && item.event.event.kind === "message") {
+                return item.event.event;
+            }
+        }
+    }
+
+    async function afterSendMessage(context: MessageContext, event: EventWrapper<Message>) {
+        if (context.threadRootMessageIndex !== undefined && threadRootEvent !== undefined) {
+            const summary = {
+                participantIds: new Set<string>([$currentUserIdStore]),
+                numberOfReplies: event.event.messageIndex + 1,
+                latestEventIndex: event.index,
+                latestEventTimestamp: event.timestamp,
+            };
+            client.markThreadSummaryUpdated(threadRootEvent.event.messageId, summary);
+        }
+
+        if (!client.moreNewMessagesAvailable(chat.id, threadRootEvent) && scrollToBottomOnSend) {
+            scrollBottom("smooth");
+            scrollToBottomOnSend = false;
+        }
+    }
+
+    async function scrollBottom(behavior: ScrollBehavior = "auto"): Promise<void> {
+        vclDebug.log("scroll-bottom", { behavior });
+        // going to the bottom means reading the live edge — re-anchor the
+        // rendered segment to the newest range
+        anchorMessageIndex = undefined;
+        virtualList?.scrollToBottom(behavior);
+        // Protect the jump-to-bottom from iOS momentum: a frame of overflow-y:hidden
+        // halts native momentum scrolling and gates onScroll, so stale in-flight
+        // scroll events can't desync the virtual window from `fromBottom`.
+        // Smooth scrolls are the gentle new-message auto-follow (already near the
+        // bottom, no momentum race), so leave those animating uninterrupted.
+        if (behavior !== "smooth") {
+            await interruptScroll(0);
+        }
+    }
+
+    function shouldLoadPreviousMessages() {
+        if (!chat || Date.now() < loadPrevCooldownUntil) return false;
+        return (
+            visible &&
+            insideTopThreshold() &&
+            client.morePreviousMessagesAvailable(chat.id, threadRootEvent)
+        );
+    }
+
+    function shouldLoadNewMessages() {
+        if (!chat || Date.now() < loadNewCooldownUntil) return false;
+        return (
+            visible &&
+            fromBottom < LOAD_NEW_THRESHOLD &&
+            client.moreNewMessagesAvailable(chat.id, threadRootEvent)
+        );
+    }
+
+    async function loadNew(): Promise<void> {
+        const el = messagesDiv;
+        const preLoadScrollHeight = el?.scrollHeight;
+        // At the bottom the view must FOLLOW new content, not preserve the
+        // reading position: scrollTop=0 is the column-reverse scroll origin
+        // (the old list stayed pinned there for free), so an anchor restore
+        // would push the view away from the bottom by the height of every
+        // arriving batch — in a busy channel that reads as the list
+        // repeatedly jumping ~a viewport up from the bottom.
+        const preAtBottom = fromBottom < 10;
+
+        await client.loadNewMessages(chat.id, threadRootEvent);
+
+        // In column-reverse, new messages are inserted at the visual bottom (scroll
+        // origin), shifting existing content upward. Move the browser scroll
+        // position to match. VirtualChatList's prepend handling has already
+        // moved fromBottom to the equivalent position in the new coordinate
+        // space using its height estimates, and its window/spacers are computed
+        // from those same estimates — so restore scrollTop to -fromBottom. Do
+        // NOT use the scrollHeight delta: it mixes real heights (rendered rows)
+        // with estimates (spacer), and on a large prepend the two coordinate
+        // systems disagree by more than the overscan — observed as a visible
+        // jump plus a flash of the wrong window at the first forward load.
+        if (pinToBottom) {
+            // the user asked for the latest messages; follow the new content
+            // instead of preserving the reading position
+            await tick();
+            await scrollBottom();
+            // The pin has served its purpose once we're caught up — without
+            // this release a user later reading just under the bottom
+            // (fromBottom below the genuine-scroll release threshold) would
+            // be yanked to the latest by the next new-message load.
+            if (!client.moreNewMessagesAvailable(chat.id, threadRootEvent)) {
+                pinToBottom = false;
+            }
+            return;
+        }
+
+        if (el && preLoadScrollHeight !== undefined) {
+            await tick();
+            const delta = el.scrollHeight - preLoadScrollHeight;
+            // The virtual list pinned the prepend to the user's live position
+            // in the same flush that rendered it (anchor-exact, paint-atomic).
+            // That pin is the restore target. Do NOT recompute from an anchor
+            // rect captured before the load await: the user keeps scrolling
+            // while the load is in flight, and restoring a pre-load position
+            // rewinds them by exactly the distance scrolled during the load —
+            // ~the full load latency's worth of scroll on a cold cache, which
+            // is why boundary feel varied so wildly between sessions.
+            const pinned = virtualList?.lastPrependPin();
+            let target = pinned ?? -fromBottom;
+            // Follow-to-bottom applies ONLY at the live bottom of the chat:
+            // preAtBottom re-checked against the current position (the user
+            // may have scrolled away mid-load), AND the load must have caught
+            // us up. At the catch-up WALL (scrollTop=0 mid-history because
+            // the newer content is not loaded yet) preAtBottom is also true,
+            // but forcing the bottom there teleports the user ~a batch of
+            // messages forward on every load — position preservation is what
+            // riding the wall needs.
+            const caughtUp = !client.moreNewMessagesAvailable(chat.id, threadRootEvent);
+            if (preAtBottom && caughtUp && -el.scrollTop < 200) {
+                target = 0;
+            }
+            vclDebug.log("load-new", {
+                preH: Math.round(preLoadScrollHeight),
+                postH: Math.round(el.scrollHeight),
+                delta: Math.round(delta),
+                st: Math.round(el.scrollTop),
+                fb: Math.round(fromBottom),
+                target: Math.round(target),
+                pinned: pinned !== undefined ? Math.round(pinned) : undefined,
+                atBottom: preAtBottom,
+            });
+            if (delta > 0) {
+                if (mobileOperatingSystem === "iOS" || isSafari) {
+                    // ALWAYS interrupt here, even when scrollTop already sits
+                    // at the target (the virtual list's same-flush pin usually
+                    // puts it there): the interrupt's overflow-y:hidden frame
+                    // is what holds the position across WebKit's own
+                    // post-growth scroll anchoring — without it the browser
+                    // snaps scrollTop back toward the pre-load value a moment
+                    // later, teleporting the user into the new batch and
+                    // re-triggering the load threshold (observed as a huge
+                    // forward leap at the boundary even at slow speeds). It
+                    // also stops native physics from swallowing the write.
+                    await interruptScroll(target);
+                } else if (Math.abs(el.scrollTop - target) > 1) {
+                    // on Chrome desktop the freeze itself is a visible hitch
+                    // mid-glide; a plain write is safe (it cancels the wheel
+                    // animation) and onScroll resyncs the window. Skip it when
+                    // the pin already landed us on target.
+                    virtualList?.markProgrammaticScroll();
+                    el.scrollTop = target;
+                }
+            }
+        }
+    }
+
+    async function loadPrev(initialLoad: boolean): Promise<void> {
+        const el = messagesDiv;
+        const preLoadScrollTop = el?.scrollTop;
+
+        await client.loadPreviousMessages(chat.id, threadRootEvent, initialLoad);
+
+        vclDebug.log("load-prev", {
+            preTop: preLoadScrollTop !== undefined ? Math.round(preLoadScrollTop) : undefined,
+            postTop: el ? Math.round(el.scrollTop) : undefined,
+            fb: Math.round(fromBottom),
+            initialLoad,
+        });
+        // Restore against the browser's async post-growth scroll adjustment
+        // (column-reverse quirk after the topSpacer grows), but to where the
+        // user actually IS — not to the position captured at load start. On
+        // iOS the user keeps scrolling while the load is in flight, and
+        // restoring the stale scrollTop yanked the view forward by exactly
+        // the distance scrolled during the load (the top message ducked off
+        // the top of the screen). fromBottom tracks the last scroll event and
+        // is frozen while the interrupt gates the handler, so it is the
+        // pre-quirk, post-user-scroll position.
+        await interruptScroll(-fromBottom);
+    }
+
+    async function loadNewMessagesIfRequired(fromScroll = false): Promise<boolean> {
+        if (loadingNewMessages || loadingPrevMessages) return true;
+        loadingNewMessages = shouldLoadNewMessages();
+        loadingFromUserScroll = loadingNewMessages && fromScroll;
+        if (loadingNewMessages) {
+            await loadNew();
+            loadingNewMessages = false;
+            loadingFromUserScroll = false;
+            return true;
+        }
+        return false;
+    }
+
+    async function loadMoreIfRequired(fromScroll = false, initialLoad = false): Promise<boolean> {
+        if (loadingPrevMessages || loadingNewMessages) return true;
+
+        // After a scroll-triggered load of OLDER messages, block further such
+        // loads until the gesture fully stops (trackScrollStop clears the flag)
+        // — this is what prevents runaway loading during momentum overshoot.
+        // Loads of NEWER messages are exempt: the user is heading for the
+        // bottom, consecutive loads are exactly what they want, and gating them
+        // turns a fast forward scroll into a stop-start crawl against the
+        // scrollTop=0 wall. A forward cascade terminates naturally at the
+        // latest message.
+        const shouldLoadPrev = shouldLoadPreviousMessages() && !(fromScroll && requireScrollStop);
+        const shouldLoadNew = shouldLoadNewMessages();
+
+        if (!shouldLoadPrev && !shouldLoadNew) return false;
+
+        loadingPrevMessages = shouldLoadPrev;
+        loadingNewMessages = shouldLoadNew;
+        loadingFromUserScroll = fromScroll;
+        if (fromScroll && shouldLoadPrev) requireScrollStop = true;
+
+        vclDebug.log("load-check", {
+            prev: shouldLoadPrev,
+            new: shouldLoadNew,
+            fromScroll,
+            fb: Math.round(fromBottom),
+            ft: Math.round(fromTop()),
+        });
+
+        const preLen = items.length;
+        const preFirst = items[0]?.key;
+        const preLast = items[items.length - 1]?.key;
+
+        const loadPromises = [];
+        if (shouldLoadNew) {
+            loadPromises.push(loadNew());
+        }
+        if (shouldLoadPrev) {
+            loadPromises.push(loadPrev(initialLoad));
+        }
+        await Promise.all(loadPromises);
+        loadingPrevMessages = false;
+        loadingNewMessages = false;
+        loadingFromUserScroll = false;
+
+        if (
+            items.length === preLen &&
+            items[0]?.key === preFirst &&
+            items[items.length - 1]?.key === preLast
+        ) {
+            vclDebug.log("!load-noprogress", { len: preLen, prev: shouldLoadPrev, new: shouldLoadNew });
+            const until = Date.now() + 5000;
+            if (shouldLoadPrev) loadPrevCooldownUntil = until;
+            if (shouldLoadNew) loadNewCooldownUntil = until;
+        }
+        return true;
+    }
+
+    async function resetScroll(initialLoad: boolean) {
+        if (initialLoad) {
+            await scrollBottom("auto");
+        }
+        if (!initialised) {
+            initialised = true;
+        }
+    }
+
+    function scrollToMention(mention: Mention | undefined) {
+        if (mention !== undefined) {
+            scrollToMessageIndex(messageContext, mention.messageIndex, false);
+        }
+    }
+
+    function findMessageEvent(index: number): EventWrapper<Message> | undefined {
+        for (const item of items) {
+            if (
+                item.kind === "event" &&
+                item.event.event.kind === "message" &&
+                item.event.event.messageIndex === index &&
+                (messageContext === undefined ||
+                    !localUpdates.isFailed(messageContext, item.event.event.messageId))
+            ) {
+                return item.event as EventWrapper<Message>;
+            }
+        }
+    }
+
+    function isAccepted(_: unknown, evt: EventWrapper<ChatEventType>): boolean {
+        if (evt.event.kind === "message" && messageContext) {
+            return !localUpdates.isPendingAcceptance(messageContext, evt.event.messageId);
+        }
+        return true;
+    }
+
+    function isConfirmed(_: unknown, evt: EventWrapper<ChatEventType>): boolean {
+        if (evt.event.kind === "message" && messageContext) {
+            return !localUpdates.isUnconfirmed(messageContext, evt.event.messageId);
+        }
+        return true;
+    }
+
+    function isFailed(_: unknown, evt: EventWrapper<ChatEventType>): boolean {
+        if (evt.event.kind === "message" && messageContext) {
+            return localUpdates.isFailed(messageContext, evt.event.messageId);
+        }
+        return false;
+    }
+
+    function isReadByMe(_: unknown, evt: EventWrapper<ChatEventType>): boolean {
+        if (readonly || (evt.event.kind === "message" && evt.event.sender === $currentUserIdStore))
+            return true;
+
+        if (evt.event.kind === "message" || evt.event.kind === "aggregate_common_events") {
+            let messageIndex =
+                evt.event.kind === "message"
+                    ? evt.event.messageIndex
+                    : Math.max(...evt.event.messagesDeleted);
+            let messageId = evt.event.kind === "message" ? evt.event.messageId : undefined;
+            return client.isMessageRead(messageContext, messageIndex, messageId);
+        }
+        return true;
+    }
+
+    function checkIfTargetMessageHasAThread(index: number) {
+        const msgEvent = findMessageEvent(index);
+        if (msgEvent && threadRootEvent === undefined) {
+            if (
+                msgEvent.event.thread !== undefined &&
+                // deliberately excludes favourites_route — matches the
+                // pre-virtualisation behaviour
+                ($routeStore.kind === "global_chat_selected_route" ||
+                    $routeStore.kind === "selected_channel_route") &&
+                ($routeStore.open || $routeStore.threadMessageIndex !== undefined)
+            ) {
+                client.openThread(chat.id, msgEvent, false, $routeStore.threadMessageIndex);
+            }
+        }
+    }
+
+    // Incremented for every externally-initiated navigation; the recursive
+    // load-and-refine loop checks it so that a newer navigation (or a rapid
+    // second click) cancels an older in-flight one instead of the two loops
+    // fighting each other with loads and scrolls.
+    let navToken = 0;
+
+    export function scrollToMessageIndex(
+        context: MessageContext,
+        index: number,
+        preserveFocus: boolean,
+        filling: boolean = false,
+        hasLookedUpEvent: boolean = false,
+    ): Promise<void> {
+        const token = ++navToken;
+        return scrollToMessageIndexInternal(
+            token,
+            context,
+            index,
+            preserveFocus,
+            filling,
+            hasLookedUpEvent,
+        ).finally(() => {
+            // The recursion clears the flag on its normal exit paths, but a
+            // rejection anywhere (e.g. loadEventWindow failing on a network
+            // blip) would otherwise leave it stuck true — permanently gating
+            // scroll-triggered and background loading. Only the navigation
+            // that currently owns the flag may clear it.
+            if (token === navToken) {
+                scrollingToMessage = false;
+                // Schedule the focus-highlight clear here, not on the happy
+                // path: an early exit (context switch, superseded navigation,
+                // rejection) used to skip the timer and leave the target
+                // highlighted forever.
+                if (!preserveFocus) {
+                    window.setTimeout(() => {
+                        if (token === navToken && messageContextsEqual(context, messageContext)) {
+                            focusIndex = undefined;
+                        }
+                    }, 500);
+                }
+            }
+        });
+    }
+
+    async function scrollToMessageIndexInternal(
+        token: number,
+        context: MessageContext,
+        index: number,
+        preserveFocus: boolean,
+        filling: boolean = false,
+        hasLookedUpEvent: boolean = false,
+    ): Promise<void> {
+        // it is possible for the chat to change while this function is recursing so double check.
+        // Every early exit logs: three separate debugging sessions were burned
+        // on navigations that died silently between two log lines.
+        if (token !== navToken) {
+            vclDebug.log("scroll-to-msg-exit", { index, why: "superseded", token, navToken });
+            return Promise.resolve();
+        }
+        if (!messageContextsEqual(context, messageContext)) {
+            vclDebug.log("scroll-to-msg-exit", { index, why: "context-changed" });
+            return Promise.resolve();
+        }
+
+        if (index < 0) {
+            focusIndex = undefined;
+            return Promise.resolve();
+        }
+
+        scrollingToMessage = true;
+        // Anchor the rendered segment to the navigation target: if the store
+        // holds the target in a range disjoint from the current one, the
+        // filtered timeline must switch segments for the lookup below to see
+        // it. Only anchor once the target is actually loaded — re-anchoring
+        // to an unloaded index would flip the timeline to the newest segment
+        // and flash unrelated content for the duration of the window load.
+        // (After the window load, the recursive call lands here again with
+        // the target present.)
+        if (
+            allItems.some(
+                (it) =>
+                    it.kind === "event" &&
+                    it.event.event.kind === "message" &&
+                    it.event.event.messageIndex === index,
+            )
+        ) {
+            anchorMessageIndex = index;
+        }
+
+        let flatIndex = messageIndexToFlat.get(index);
+        vclDebug.log("scroll-to-msg", {
+            index,
+            flatIndex,
+            filling,
+            hasLookedUpEvent,
+        });
+        if (flatIndex !== undefined) {
+            focusIndex = index;
+            // Delegate positioning to the virtual list: it positions on estimated
+            // heights immediately and fires debounced corrective re-scrolls as
+            // real measurements arrive.
+            if (virtualList === undefined) {
+                vclDebug.log("scroll-to-msg-exit", { index, why: "no-virtual-list" });
+            }
+            virtualList?.scrollToIndex(flatIndex, "instant");
+            await tick();
+            if (!messageContextsEqual(context, messageContext)) {
+                vclDebug.log("scroll-to-msg-exit", { index, why: "context-changed-post-tick" });
+                return Promise.resolve();
+            }
+            if (!filling) {
+                // if we are not filling in extra events around the target then check if we need to open a thread
+                checkIfTargetMessageHasAThread(index);
+            }
+            if (await loadMoreIfRequired(false, true)) {
+                return scrollToMessageIndexInternal(
+                    token,
+                    context,
+                    index,
+                    preserveFocus,
+                    true,
+                    hasLookedUpEvent,
+                );
+            } else {
+                scrollingToMessage = false;
+                return Promise.resolve();
+            }
+        } else if (destroyed) {
+            // The chat is hidden behind a covering panel (which marks the
+            // list destroyed to emulate the old unmount semantics). A
+            // navigation arriving in this state is usually the very act of
+            // returning to the chat — on single-column layouts the pinned
+            // panel's tap updates the route several ms before the panel
+            // finishes closing — so defer it until the list is visible again
+            // instead of swallowing it.
+            vclDebug.log("scroll-to-msg-deferred", { index });
+            pendingHiddenNav = { context, index, preserveFocus };
+        } else if (!destroyed) {
+            // check whether we have already loaded the event we are looking
+            // for (only the anchored segment counts — a hit in a disjoint
+            // island is filtered out above, so we want the window load)
+            const loaded = findMessageEvent(index);
+            if (loaded === undefined) {
+                if (!hasLookedUpEvent) {
+                    // we must only recurse if we have not already loaded the event, otherwise we will enter an infinite loop.
+                    // Suppress scroll handling across the store swap: the content
+                    // momentarily shrinks while the old events are cleared, and the
+                    // browser clamps scrollTop towards zero — without the interrupt
+                    // that stray scroll event slides the virtual window to the
+                    // bottom and queues a pile of bogus corrections before the
+                    // navigation has even positioned itself.
+                    interrupt = true;
+                    try {
+                        const loadedIdx = await client.loadEventWindow(
+                            context.chatId,
+                            index,
+                            threadRootEvent,
+                        );
+                        vclDebug.log("scroll-to-msg-window", { index, loadedIdx });
+                        await tick();
+                    } finally {
+                        await interruptScroll();
+                    }
+                    return scrollToMessageIndexInternal(
+                        token,
+                        context,
+                        index,
+                        preserveFocus,
+                        filling,
+                        true,
+                    );
+                }
+                vclDebug.log("scroll-to-msg-exit", { index, why: "not-found-after-window-load" });
+                scrollingToMessage = false;
+                // A failed event-window load clears the event store before it
+                // fails, which would otherwise leave the user staring at an
+                // empty list. Fall back to an initial load of the latest
+                // messages so there is always something on screen.
+                if (items.length === 0 && messageContextsEqual(context, messageContext)) {
+                    vclDebug.log("!blank-recovery", { index });
+                    await client.loadPreviousMessages(chat.id, threadRootEvent, true);
+                }
+            } else {
+                // the event is loaded but does not appear in the flat items (e.g. it
+                // is hidden or filtered out) so we cannot scroll to it. Try the next
+                // message, or failing that, the bottom.
+                const next = messageIndexToFlat.get(index + 1);
+                if (next !== undefined) {
+                    return scrollToMessageIndexInternal(
+                        token,
+                        context,
+                        index + 1,
+                        preserveFocus,
+                        filling,
+                    );
+                }
+                scrollingToMessage = false;
+                return scrollBottom();
+            }
+        }
+    }
+
+    export async function onMessageWindowLoaded({
+        context,
+        messageIndex,
+        initialLoad,
+    }: {
+        context: MessageContext;
+        messageIndex: number | undefined;
+        initialLoad: boolean;
+    }) {
+        if (messageIndex === undefined || initialLoad === false) return;
+        await tick();
+        if (!messageContextsEqual(context, messageContext)) return;
+        initialised = true;
+        await scrollToMessageIndex(context, messageIndex, false);
+    }
+
+    async function onLoadedPreviousMessages({
+        context,
+        initialLoad,
+    }: {
+        context: MessageContext;
+        initialLoad: boolean;
+    }) {
+        if (!messageContextsEqual(context, messageContext)) return;
+        await resetScroll(initialLoad);
+        if (!messageContextsEqual(context, messageContext)) return;
+
+        // It is possible the when we load previous messages, because of the filtering applied, we might not
+        // have enough events. To cover that case we will check if we need to load some more.
+        loadMoreIfRequired();
+    }
+
+    async function onLoadedNewMessages(context: MessageContext) {
+        if (!messageContextsEqual(context, messageContext)) return;
+
+        if (
+            !loadingFromUserScroll &&
+            !client.moreNewMessagesAvailable(chat.id, threadRootEvent) &&
+            insideBottomThreshold()
+        ) {
+            // only scroll if we are now within threshold from the bottom
+            scrollBottom("smooth");
+        }
+    }
+
+    // Set overflow-y: hidden on the viewport for one frame. This immediately
+    // halts any momentum scrolling on iOS (preventing the screen going black)
+    // and gates the scroll handler while we programmatically write scrollTop.
+    // If restoreScrollTop is given, it is applied inside the rAF — after any
+    // async browser scroll adjustment has fired — before revealing the viewport.
+    function interruptScroll(restoreScrollTop?: number): Promise<void> {
+        interrupt = true;
+        return new Promise((resolve) => {
+            window.requestAnimationFrame(() => {
+                const el = messagesDiv;
+                if (el && restoreScrollTop !== undefined && el.scrollTop !== restoreScrollTop) {
+                    vclDebug.log("interrupt-restore", {
+                        from: Math.round(el.scrollTop),
+                        to: Math.round(restoreScrollTop),
+                    });
+                    virtualList?.markProgrammaticScroll();
+                    el.scrollTop = restoreScrollTop;
+                }
+                interrupt = false;
+                resolve();
+            });
+        });
+    }
+
+    function onUserScroll(genuine: boolean) {
+        // Only release the bottom pin when the user genuinely scrolls away from
+        // the bottom — scroll events from our own smooth scrollBottom animation
+        // arrive later than the programmatic-write detection window and must
+        // not cancel the user's go-to-latest intent.
+        if (genuine && pinToBottom && fromBottom > 200) {
+            pinToBottom = false;
+        }
+        trackScrollStop(SCROLL_THRESHOLD);
+        if (maintainScroll) {
+            eventListScrollTop.set(fromBottom);
+        }
+        updateShowGoToBottom();
+        updateShowGoToTop();
+        portalState.close();
+        eventListLastScrolled.set(Date.now());
+
+        if (
+            !initialised ||
+            interrupt ||
+            loadingFromUserScroll ||
+            scrollingToMessage ||
+            !visible
+        )
+            return;
+
+        loadMoreIfRequired(true);
+    }
+
+    // A touchstart is an unambiguous user gesture (scroll events may be our
+    // own writes) — release the go-to-latest pin immediately. Without this,
+    // on iOS in a busy chat the pin's catch-up loads keep snapping the
+    // viewport to the bottom faster than the genuine-scroll release (200px of
+    // drag) can trigger, trapping the user at the latest message.
+    function onUserTouch() {
+        pinToBottom = false;
+    }
+
+    async function loadIndexThenScrollToBottom(context: MessageContext, messageIndex: number) {
+        await scrollToMessageIndex(context, messageIndex, false);
+        if (messageContextsEqual(context, messageContext)) {
+            await scrollBottom();
+            // Release the go-to-latest pin once it has completed with nothing
+            // left to catch up on; it must not linger and snap a later load.
+            if (!client.moreNewMessagesAvailable(chat.id, threadRootEvent)) {
+                pinToBottom = false;
+            }
+        }
+    }
+
+    function scrollToTop() {
+        scrollToMessageIndex(messageContext, 0, false);
+    }
+
+    function scrollToLast() {
+        pinToBottom = true;
+        if (threadSummary !== undefined) {
+            loadIndexThenScrollToBottom(messageContext, threadSummary.numberOfReplies - 1);
+        } else {
+            loadIndexThenScrollToBottom(
+                messageContext,
+                chat.latestMessage?.event.messageIndex ?? -1,
+            );
+        }
+    }
+
+    let scrollTimeout: number | undefined = undefined;
+    function trackScrollStop(delay: number) {
+        eventListScrolling.set(true);
+        clearTimeout(scrollTimeout);
+        scrollTimeout = window.setTimeout(() => {
+            eventListScrolling.set(false);
+            requireScrollStop = false;
+            // After scroll stops, re-check thresholds in case we're still inside one.
+            // This handles the case where a load completed but momentum kept scrolling
+            // (blocking further loads), and the user is now stationary near a threshold.
+            loadMoreIfRequired(false);
+        }, delay);
+    }
+</script>
+
+<VirtualChatList
+    bind:this={virtualList}
+    {items}
+    {interrupt}
+    bind:fromBottom
+    bind:viewport={messagesDiv}
+    bind:viewportHeight={messagesDivHeight}
+    id={`scrollable-list-${rootSelector}`}
+    viewportClass={`scrollable-list ${rootSelector} ${viewportClass ?? ""}`}
+    {onUserScroll}
+    {onUserTouch}
+    {estimateClass}
+    caughtUp={() => !client.moreNewMessagesAvailable(chat.id, threadRootEvent)}
+    {isDateMarker}
+    {timestampFor}
+    {stickyDateElTop}
+    bind:stickyDateTimestamp
+    row={renderRow} />
+
+{#snippet renderRow(item: FlatChatItem, _absIdx: number)}
+    {@render row(item, {
+        isAccepted,
+        isConfirmed,
+        isFailed,
+        isReadByMe,
+        messageObserver,
+        focusIndex,
+    })}
+{/snippet}
+
+{@render fabs?.({
+    showGoToTop,
+    showGoToBottom,
+    loadingFromUserScroll,
+    scrollToTop,
+    scrollToLast,
+    scrollToMention,
+})}
diff --git a/frontend/app/src/components/EditableAvatar.svelte b/frontend/app/src/ui/EditableAvatar.svelte
similarity index 97%
rename from frontend/app/src/components/EditableAvatar.svelte
rename to frontend/app/src/ui/EditableAvatar.svelte
index bba908a103..10f6ed0a65 100644
--- a/frontend/app/src/components/EditableAvatar.svelte
+++ b/frontend/app/src/ui/EditableAvatar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import EditableImageWrapper from "./EditableImageWrapper.svelte";
-    import ChooseImage from "./icons/ChooseImage.svelte";
+    import ChooseImage from "@src/desktop/ui/icons/ChooseImage.svelte";
 
     interface Props {
         image: string | null | undefined;
diff --git a/frontend/app/src/ui/EditableBanner.svelte b/frontend/app/src/ui/EditableBanner.svelte
new file mode 100644
index 0000000000..9b39b24617
--- /dev/null
+++ b/frontend/app/src/ui/EditableBanner.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+    import EditableImageWrapper from "./EditableImageWrapper.svelte";
+    import ChooseImage from "@src/desktop/ui/icons/ChooseImage.svelte";
+
+    interface Props {
+        image: string | null | undefined;
+        onImageSelected: (args: { url: string; data: Uint8Array }) => void;
+    }
+
+    let { image = $bindable(), onImageSelected }: Props = $props();
+</script>
+
+<EditableImageWrapper mode={"banner"} {image} {onImageSelected}>
+    {#snippet children(choosePhoto: () => void, _elementWidth: number, elementHeight: number)}
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div
+            class={`photo-section`}
+            onclick={choosePhoto}
+            style={image
+                ? `height: ${elementHeight}px; background-image: url(${image})`
+                : `height: ${elementHeight}px`}>
+            <div class={`photo-icon`}>
+                <ChooseImage size={"3em"} color={image ? "#fff" : "var(--icon-txt)"} />
+            </div>
+        </div>
+    {/snippet}
+</EditableImageWrapper>
+
+<style lang="scss">
+    .photo-section {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        background-color: var(--input-bg);
+        background-size: cover;
+        height: 200px;
+    }
+
+    .overlay {
+        position: absolute;
+    }
+
+    .photo-icon {
+        border-radius: var(--avatar-rd);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+
+        width: toRem(150);
+        height: toRem(150);
+    }
+</style>
diff --git a/frontend/app/src/ui/EditableImageWrapper.svelte b/frontend/app/src/ui/EditableImageWrapper.svelte
new file mode 100644
index 0000000000..3661aa55b2
--- /dev/null
+++ b/frontend/app/src/ui/EditableImageWrapper.svelte
@@ -0,0 +1,165 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import type { OnCropCompleteEvent } from "svelte-easy-crop";
+    import Cropper from "svelte-easy-crop";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Button from "./Button.svelte";
+    import ButtonGroup from "./ButtonGroup.svelte";
+    import ModalContent from "./ModalContent.svelte";
+    import Overlay from "./Overlay.svelte";
+    import Translatable from "./Translatable.svelte";
+
+    type OnChoosePhoto = () => void;
+
+    interface Props {
+        image: string | null | undefined;
+        disabled?: boolean;
+        mode?: Mode;
+        onImageSelected: (args: { url: string; data: Uint8Array }) => void;
+        children: Snippet<[OnChoosePhoto, number, number]>;
+    }
+
+    let {
+        image = $bindable(),
+        disabled = false,
+        mode = "avatar",
+        onImageSelected,
+        children,
+    }: Props = $props();
+
+    type Dimensions = { width: number; height: number };
+    type Mode = "banner" | "avatar" | "profile";
+    type CropShape = "round" | "rect";
+
+    let fileinput: HTMLInputElement;
+    let selectedImage: string | undefined = $state();
+    let originalImage = new Image();
+    let showModal = $state(false);
+    let cropData: OnCropCompleteEvent | undefined = undefined;
+
+    function getSaveDimensions(mode: Mode): Dimensions {
+        switch (mode) {
+            case "avatar":
+                return { width: 150, height: 150 };
+            case "banner":
+                return { width: 600, height: 300 };
+            case "profile":
+                return { width: 600, height: 800 };
+        }
+    }
+
+    export function addPhoto() {
+        if (!disabled) {
+            fileinput.click();
+        }
+    }
+
+    function onFileSelected(e: { currentTarget: HTMLInputElement }) {
+        if (e.currentTarget) {
+            const target = e.currentTarget as HTMLInputElement;
+            if (target.files) {
+                const image = target.files[0];
+                let reader = new FileReader();
+                reader.readAsDataURL(image);
+                reader.onload = (e) => {
+                    selectedImage = e?.target?.result as string;
+                    originalImage.src = selectedImage;
+                    showModal = true;
+                    fileinput.value = "";
+                };
+            }
+        }
+    }
+
+    function cropImage() {
+        if (!cropData || !originalImage) return;
+
+        const {
+            pixels: { x, y, width, height },
+        } = cropData;
+
+        const canvas: HTMLCanvasElement = document.createElement("canvas");
+        canvas.width = SAVE_DIMS.width;
+        canvas.height = SAVE_DIMS.height;
+        canvas
+            .getContext("2d")
+            ?.drawImage(
+                originalImage,
+                x,
+                y,
+                width,
+                height,
+                0,
+                0,
+                SAVE_DIMS.width,
+                SAVE_DIMS.height,
+            );
+
+        canvas.toBlob(async (blob: Blob | null) => {
+            if (blob) {
+                const array = await blob.arrayBuffer();
+                const data = new Uint8Array(array);
+                image = canvas.toDataURL("image/jpg");
+                showModal = false;
+                console.log("image size: ", data.length);
+                onImageSelected({ url: image, data });
+            }
+        }, "image/jpg");
+    }
+
+    function onCrop(ev: OnCropCompleteEvent): void {
+        cropData = ev;
+    }
+    let SAVE_DIMS = $derived(getSaveDimensions(mode));
+    let CROP_SHAPE = $derived(mode === "avatar" ? "round" : ("rect" as CropShape));
+    let elementWidth = $state(0);
+    let elementHeight = $derived(elementWidth / (SAVE_DIMS.width / SAVE_DIMS.height));
+    let aspect = $derived(mode === "avatar" ? 1 : SAVE_DIMS.width / SAVE_DIMS.height);
+</script>
+
+{#if showModal}
+    <Overlay>
+        <ModalContent fill>
+            {#snippet header()}
+                Crop image
+            {/snippet}
+            {#snippet body()}
+                <div class="cropper">
+                    <Cropper
+                        image={selectedImage}
+                        oncropcomplete={onCrop}
+                        crop={{ x: 0, y: 0 }}
+                        {aspect}
+                        cropShape={CROP_SHAPE} />
+                </div>
+            {/snippet}
+            {#snippet footer()}
+                <ButtonGroup>
+                    <Button tiny secondary onClick={() => (showModal = false)}
+                        ><Translatable resourceKey={i18nKey("cancel")} /></Button>
+                    <Button tiny onClick={cropImage}
+                        ><Translatable resourceKey={i18nKey("apply")} /></Button>
+                </ButtonGroup>
+            {/snippet}
+        </ModalContent>
+    </Overlay>
+{/if}
+
+<input
+    hidden
+    type="file"
+    accept=".jpg, .jpeg, .png, .gif, .svg"
+    onchange={onFileSelected}
+    bind:this={fileinput} />
+
+<div class="editable-image" bind:clientWidth={elementWidth}>
+    {@render children(addPhoto, elementWidth, elementHeight)}
+</div>
+
+<style lang="scss">
+    .cropper {
+        position: relative;
+        height: 400px;
+        width: 100%;
+    }
+</style>
diff --git a/frontend/app/src/components_shared/FilteredUsername.svelte b/frontend/app/src/ui/FilteredUsername.svelte
similarity index 91%
rename from frontend/app/src/components_shared/FilteredUsername.svelte
rename to frontend/app/src/ui/FilteredUsername.svelte
index ebfec35d32..04f7bc2f86 100644
--- a/frontend/app/src/components_shared/FilteredUsername.svelte
+++ b/frontend/app/src/ui/FilteredUsername.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-    import { i18nKey } from "../i18n/i18n";
-    import Translatable from "../components/Translatable.svelte";
+    import { i18nKey } from "@src/i18n/i18n";
+    import Translatable from "./Translatable.svelte";
     import { _ } from "svelte-i18n";
 
     interface Props {
diff --git a/frontend/app/src/components_shared/GooglyEyes.svelte b/frontend/app/src/ui/GooglyEyes.svelte
similarity index 100%
rename from frontend/app/src/components_shared/GooglyEyes.svelte
rename to frontend/app/src/ui/GooglyEyes.svelte
diff --git a/frontend/app/src/components/HoverIcon.svelte b/frontend/app/src/ui/HoverIcon.svelte
similarity index 100%
rename from frontend/app/src/components/HoverIcon.svelte
rename to frontend/app/src/ui/HoverIcon.svelte
diff --git a/frontend/app/src/components_shared/Loading.svelte b/frontend/app/src/ui/Loading.svelte
similarity index 100%
rename from frontend/app/src/components_shared/Loading.svelte
rename to frontend/app/src/ui/Loading.svelte
diff --git a/frontend/app/src/components_shared/Logo.svelte b/frontend/app/src/ui/Logo.svelte
similarity index 100%
rename from frontend/app/src/components_shared/Logo.svelte
rename to frontend/app/src/ui/Logo.svelte
diff --git a/frontend/app/src/components_shared/Markdown.svelte b/frontend/app/src/ui/Markdown.svelte
similarity index 97%
rename from frontend/app/src/components_shared/Markdown.svelte
rename to frontend/app/src/ui/Markdown.svelte
index 61bf34d0a8..332bdf0db5 100644
--- a/frontend/app/src/components_shared/Markdown.svelte
+++ b/frontend/app/src/ui/Markdown.svelte
@@ -9,8 +9,8 @@
         userIdMentionRegex,
     } from "@client";
     import { getContext } from "svelte";
-    import { DOMPurifyDefault, DOMPurifyOneLine } from "../utils/domPurify";
-    import { isSingleEmoji } from "../utils/emojis";
+    import { DOMPurifyDefault, DOMPurifyOneLine } from "@src/utils/domPurify";
+    import { isSingleEmoji } from "@src/utils/emojis";
 
     const client = getContext<OpenChat>("client");
 
diff --git a/frontend/app/src/components/ModalContent.svelte b/frontend/app/src/ui/ModalContent.svelte
similarity index 98%
rename from frontend/app/src/components/ModalContent.svelte
rename to frontend/app/src/ui/ModalContent.svelte
index 3cba01826a..10dee819fb 100644
--- a/frontend/app/src/components/ModalContent.svelte
+++ b/frontend/app/src/ui/ModalContent.svelte
@@ -6,9 +6,9 @@
     import ArrowLeft from "svelte-material-icons/ArrowLeft.svelte";
     import Close from "svelte-material-icons/Close.svelte";
     import { fade } from "svelte/transition";
-    import { i18nKey } from "../i18n/i18n";
-    import { rtlStore } from "../stores/rtl";
-    import { currentTheme } from "../theme/themes";
+    import { i18nKey } from "@src/i18n/i18n";
+    import { rtlStore } from "@src/stores/rtl";
+    import { currentTheme } from "@src/theme/themes";
     import Button from "./Button.svelte";
     import HoverIcon from "./HoverIcon.svelte";
     import Translatable from "./Translatable.svelte";
diff --git a/frontend/app/src/components/Overlay.svelte b/frontend/app/src/ui/Overlay.svelte
similarity index 91%
rename from frontend/app/src/components/Overlay.svelte
rename to frontend/app/src/ui/Overlay.svelte
index 61ab4663e6..4cb95d611d 100644
--- a/frontend/app/src/components/Overlay.svelte
+++ b/frontend/app/src/ui/Overlay.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { getAllContexts, mount, onMount, unmount, type Snippet } from "svelte";
-    import OverlayWrapper from "./portal/OverlayWrapper.svelte";
+    import OverlayWrapper from "@src/desktop/ui/portal/OverlayWrapper.svelte";
 
     interface Props {
         fade?: boolean;
diff --git a/frontend/app/src/components_shared/ProposalBot.svelte b/frontend/app/src/ui/ProposalBot.svelte
similarity index 100%
rename from frontend/app/src/components_shared/ProposalBot.svelte
rename to frontend/app/src/ui/ProposalBot.svelte
diff --git a/frontend/app/src/components_shared/RichTextEditor.svelte b/frontend/app/src/ui/RichTextEditor.svelte
similarity index 100%
rename from frontend/app/src/components_shared/RichTextEditor.svelte
rename to frontend/app/src/ui/RichTextEditor.svelte
diff --git a/frontend/app/src/components_shared/Robot.svelte b/frontend/app/src/ui/Robot.svelte
similarity index 100%
rename from frontend/app/src/components_shared/Robot.svelte
rename to frontend/app/src/ui/Robot.svelte
diff --git a/frontend/app/src/ui/STRAGGLERS.md b/frontend/app/src/ui/STRAGGLERS.md
new file mode 100644
index 0000000000..7a7e75202f
--- /dev/null
+++ b/frontend/app/src/ui/STRAGGLERS.md
@@ -0,0 +1,26 @@
+# Cross-platform stragglers
+
+`src/ui` is for deliberately platform-agnostic primitives. The components below
+did not arrive here by design — the import-graph classifier found consumers in
+both the desktop and mobile trees, which violates the "no shared components
+between the apps" rule. Each needs a review: either promote it to a real,
+intentional shared primitive, or fork it into the platform trees and delete it
+from here.
+
+Moved from the former `components/` (desktop) tree:
+
+- `Button.svelte`
+- `ButtonGroup.svelte`
+- `EditableAvatar.svelte`
+- `EditableBanner.svelte`
+- `EditableImageWrapper.svelte`
+- `HoverIcon.svelte`
+- `ModalContent.svelte`
+- `Overlay.svelte`
+- `SignalsButton.svelte`
+- `StandardButton.svelte`
+- `Translatable.svelte`
+- `calendarUtils.ts` (was `components/calendar/utils.ts`)
+
+Everything else in `src/ui` came from the former `components_shared/` tree and
+is here on purpose.
diff --git a/frontend/app/src/components/SignalsButton.svelte b/frontend/app/src/ui/SignalsButton.svelte
similarity index 100%
rename from frontend/app/src/components/SignalsButton.svelte
rename to frontend/app/src/ui/SignalsButton.svelte
diff --git a/frontend/app/src/components_shared/Snow.svelte b/frontend/app/src/ui/Snow.svelte
similarity index 97%
rename from frontend/app/src/components_shared/Snow.svelte
rename to frontend/app/src/ui/Snow.svelte
index 5ccbc9de1b..2b3563a1ec 100644
--- a/frontend/app/src/components_shared/Snow.svelte
+++ b/frontend/app/src/ui/Snow.svelte
@@ -2,7 +2,7 @@
     // Credit goes to: https://codepen.io/josetxu/pen/BaVMaGQ
 
     import { onMount } from "svelte";
-    import { snowing } from "../stores/snow";
+    import { snowing } from "@src/stores/snow";
 
     let flakes: number[] = $state([]);
 
diff --git a/frontend/app/src/components/StandardButton.svelte b/frontend/app/src/ui/StandardButton.svelte
similarity index 96%
rename from frontend/app/src/components/StandardButton.svelte
rename to frontend/app/src/ui/StandardButton.svelte
index 32d6b95e65..99c745d41c 100644
--- a/frontend/app/src/components/StandardButton.svelte
+++ b/frontend/app/src/ui/StandardButton.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { onMount } from "svelte";
-    import { currentTheme } from "../theme/themes";
-    import { darkenHexColour } from "../theme/utils";
+    import { currentTheme } from "@src/theme/themes";
+    import { darkenHexColour } from "@src/theme/utils";
     import type { ButtonProps } from "./Button.svelte";
-    import Spinner from "./icons/Spinner.svelte";
+    import Spinner from "@src/desktop/ui/icons/Spinner.svelte";
 
     let {
         cls = "",
diff --git a/frontend/app/src/ui/Translatable.svelte b/frontend/app/src/ui/Translatable.svelte
new file mode 100644
index 0000000000..a3ccef1270
--- /dev/null
+++ b/frontend/app/src/ui/Translatable.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+    import { _ } from "svelte-i18n";
+    import { interpolate } from "@src/i18n/i18n";
+    import { translatable } from "@src/actions/translatable";
+    import type { ResourceKey } from "@client";
+
+    interface Props {
+        resourceKey: ResourceKey;
+    }
+
+    let { resourceKey }: Props = $props();
+</script>
+
+<span use:translatable={{ key: resourceKey }}>
+    {interpolate($_, resourceKey)}
+</span>
diff --git a/frontend/app/src/components_shared/Typing.svelte b/frontend/app/src/ui/Typing.svelte
similarity index 100%
rename from frontend/app/src/components_shared/Typing.svelte
rename to frontend/app/src/ui/Typing.svelte
diff --git a/frontend/app/src/components_shared/VirtualChatList.svelte b/frontend/app/src/ui/VirtualChatList.svelte
similarity index 99%
rename from frontend/app/src/components_shared/VirtualChatList.svelte
rename to frontend/app/src/ui/VirtualChatList.svelte
index 2dbe5f8347..3f3d2bf235 100644
--- a/frontend/app/src/components_shared/VirtualChatList.svelte
+++ b/frontend/app/src/ui/VirtualChatList.svelte
@@ -115,7 +115,7 @@
      *   new items, and calls `updateWindowFull()`. The `keyToHeight` map ensures
      *   measured heights survive the index shift (rebuilt into `heightMap`).
      */
-    import { mobileOperatingSystem } from "@utils/devices";
+    import { mobileOperatingSystem } from "@src/utils/devices";
     import { flushSync, onMount, tick, untrack } from "svelte";
     import { vclDebug } from "./vclDebug";
     import {
diff --git a/frontend/app/src/components_shared/VirtualList.svelte b/frontend/app/src/ui/VirtualList.svelte
similarity index 100%
rename from frontend/app/src/components_shared/VirtualList.svelte
rename to frontend/app/src/ui/VirtualList.svelte
diff --git a/frontend/app/src/components_shared/Witch.svelte b/frontend/app/src/ui/Witch.svelte
similarity index 100%
rename from frontend/app/src/components_shared/Witch.svelte
rename to frontend/app/src/ui/Witch.svelte
diff --git a/frontend/app/src/components_mobile/calendar/utils.ts b/frontend/app/src/ui/calendarUtils.ts
similarity index 100%
rename from frontend/app/src/components_mobile/calendar/utils.ts
rename to frontend/app/src/ui/calendarUtils.ts
diff --git a/frontend/app/src/components_shared/chatSwipe.ts b/frontend/app/src/ui/chatSwipe.ts
similarity index 100%
rename from frontend/app/src/components_shared/chatSwipe.ts
rename to frontend/app/src/ui/chatSwipe.ts
diff --git a/frontend/app/src/components_shared/customEmojiExtension.ts b/frontend/app/src/ui/customEmojiExtension.ts
similarity index 100%
rename from frontend/app/src/components_shared/customEmojiExtension.ts
rename to frontend/app/src/ui/customEmojiExtension.ts
diff --git a/frontend/app/src/components_shared/flatChatItems.ts b/frontend/app/src/ui/flatChatItems.ts
similarity index 100%
rename from frontend/app/src/components_shared/flatChatItems.ts
rename to frontend/app/src/ui/flatChatItems.ts
diff --git a/frontend/app/src/components_shared/markdownConversion.spec.ts b/frontend/app/src/ui/markdownConversion.spec.ts
similarity index 100%
rename from frontend/app/src/components_shared/markdownConversion.spec.ts
rename to frontend/app/src/ui/markdownConversion.spec.ts
diff --git a/frontend/app/src/components_shared/markdownConversion.ts b/frontend/app/src/ui/markdownConversion.ts
similarity index 100%
rename from frontend/app/src/components_shared/markdownConversion.ts
rename to frontend/app/src/ui/markdownConversion.ts
diff --git a/frontend/app/src/components_shared/mentionExtension.ts b/frontend/app/src/ui/mentionExtension.ts
similarity index 100%
rename from frontend/app/src/components_shared/mentionExtension.ts
rename to frontend/app/src/ui/mentionExtension.ts
diff --git a/frontend/app/src/components_shared/pasteTransform.spec.ts b/frontend/app/src/ui/pasteTransform.spec.ts
similarity index 100%
rename from frontend/app/src/components_shared/pasteTransform.spec.ts
rename to frontend/app/src/ui/pasteTransform.spec.ts
diff --git a/frontend/app/src/components_shared/pasteTransform.ts b/frontend/app/src/ui/pasteTransform.ts
similarity index 100%
rename from frontend/app/src/components_shared/pasteTransform.ts
rename to frontend/app/src/ui/pasteTransform.ts
diff --git a/frontend/app/src/components_shared/vclDebug.ts b/frontend/app/src/ui/vclDebug.ts
similarity index 100%
rename from frontend/app/src/components_shared/vclDebug.ts
rename to frontend/app/src/ui/vclDebug.ts
diff --git a/frontend/app/src/components_shared/virtualListUtils.spec.ts b/frontend/app/src/ui/virtualListUtils.spec.ts
similarity index 100%
rename from frontend/app/src/components_shared/virtualListUtils.spec.ts
rename to frontend/app/src/ui/virtualListUtils.spec.ts
diff --git a/frontend/app/src/components_shared/virtualListUtils.ts b/frontend/app/src/ui/virtualListUtils.ts
similarity index 100%
rename from frontend/app/src/components_shared/virtualListUtils.ts
rename to frontend/app/src/ui/virtualListUtils.ts
diff --git a/frontend/app/tsconfig.json b/frontend/app/tsconfig.json
index 037d6e2e71..af23fdb0db 100644
--- a/frontend/app/tsconfig.json
+++ b/frontend/app/tsconfig.json
@@ -8,7 +8,6 @@
             "@src/*": ["./src/*"],
             "@actions/*": ["./src/actions/*"],
             "@i18n/*": ["./src/i18n/*"],
-            "@shared_components/*": ["./src/components_shared/*"],
             "@stores/*": ["./src/stores/*"],
             "@theme/*": ["./src/theme/*"],
             "@utils/*": ["./src/utils/*"],
diff --git a/frontend/app/vite.config.ts b/frontend/app/vite.config.ts
index 0ac41e8692..04fe43cca5 100644
--- a/frontend/app/vite.config.ts
+++ b/frontend/app/vite.config.ts
@@ -205,10 +205,6 @@ export default defineConfig({
             { find: "@src", replacement: path.resolve(__dirname, "./src") },
             { find: "@actions", replacement: path.resolve(__dirname, "./src/actions") },
             { find: "@i18n", replacement: path.resolve(__dirname, "./src/i18n") },
-            {
-                find: "@shared_components",
-                replacement: path.resolve(__dirname, "./src/components_shared"),
-            },
             { find: "@stores", replacement: path.resolve(__dirname, "./src/stores") },
             { find: "@theme", replacement: path.resolve(__dirname, "./src/theme") },
             { find: "@utils", replacement: path.resolve(__dirname, "./src/utils") },
diff --git a/frontend/eslint-rules/structure-boundaries.mjs b/frontend/eslint-rules/structure-boundaries.mjs
new file mode 100644
index 0000000000..ceba9bebd1
--- /dev/null
+++ b/frontend/eslint-rules/structure-boundaries.mjs
@@ -0,0 +1,130 @@
+/**
+ * ESLint rule: structure-boundaries
+ *
+ * Enforces the src/ layout contract of frontend/app:
+ *
+ *   1. The desktop and mobile trees never import each other. Anything both
+ *      need lives in src/ui (and is flagged in src/ui/STRAGGLERS.md).
+ *   2. src/ui is platform-agnostic: it must not import from desktop/, mobile/,
+ *      or anything else platform-bound.
+ *   3. Features are private to each other. `features/x` may not import from
+ *      `features/y`, with two deliberate exceptions:
+ *        - `features/y/exports/**` — a feature's published surface
+ *          (e.g. bots/exports/BotBadge.svelte);
+ *        - `features/chats/core/**` — the kind-agnostic message-rendering
+ *          engine, importable by any feature.
+ *
+ * shared/ and shell/ within a platform tree are not restricted by this rule.
+ */
+
+const PLATFORMS = new Set(["desktop", "mobile"]);
+
+// path relative to app/src -> location descriptor
+function classify(p) {
+    const parts = p.split("/");
+    if (PLATFORMS.has(parts[0])) {
+        const loc = { plat: parts[0], kind: parts[1] };
+        if (parts[1] === "features") {
+            loc.feature = parts[2];
+            loc.rest = parts.slice(3).join("/");
+        }
+        return loc;
+    }
+    if (parts[0] === "ui") return { kind: "ui" };
+    return { kind: "other" };
+}
+
+function srcRelative(absPath) {
+    const marker = absPath.lastIndexOf("app/src/");
+    return marker === -1 ? null : absPath.slice(marker + "app/src/".length);
+}
+
+export default {
+    meta: {
+        type: "problem",
+        docs: {
+            description:
+                "Enforce platform (desktop/mobile/ui) and feature-privacy import boundaries in app/src.",
+        },
+        messages: {
+            crossPlatform:
+                "{{importerPlat}} code must not import from the {{targetPlat}} tree. Shared code belongs in src/ui (and gets an entry in src/ui/STRAGGLERS.md).",
+            uiToPlatform:
+                "src/ui is platform-agnostic and must not import from the {{targetPlat}} tree.",
+            featurePrivacy:
+                'Feature "{{importerFeature}}" must not reach into feature "{{targetFeature}}". Import its exports/ surface, use features/chats/core, or move the component to shared/.',
+        },
+        schema: [],
+    },
+
+    create(context) {
+        const filename = context.filename ?? context.getFilename();
+        const importerRel = srcRelative(filename.replace(/\\/g, "/"));
+        if (!importerRel) return {};
+        const importer = classify(importerRel);
+
+        function resolveTargetRel(spec) {
+            if (spec.startsWith("@src/")) return spec.slice(5);
+            if (!spec.startsWith(".")) return null;
+            const importerDir = importerRel.split("/").slice(0, -1);
+            const parts = spec.split("/");
+            const stack = [...importerDir];
+            for (const part of parts) {
+                if (part === "." || part === "") continue;
+                else if (part === "..") stack.pop();
+                else stack.push(part);
+            }
+            return stack.join("/");
+        }
+
+        function check(node, spec) {
+            if (typeof spec !== "string") return;
+            const targetRel = resolveTargetRel(spec);
+            if (!targetRel) return;
+            const target = classify(targetRel);
+
+            if (importer.plat && target.plat && importer.plat !== target.plat) {
+                context.report({
+                    node,
+                    messageId: "crossPlatform",
+                    data: { importerPlat: importer.plat, targetPlat: target.plat },
+                });
+                return;
+            }
+            if (importer.kind === "ui" && target.plat) {
+                context.report({ node, messageId: "uiToPlatform", data: { targetPlat: target.plat } });
+                return;
+            }
+            if (
+                importer.kind === "features" &&
+                target.kind === "features" &&
+                importer.feature !== target.feature
+            ) {
+                const viaExports = (target.rest ?? "").split("/").includes("exports");
+                const viaChatsCore = target.feature === "chats" && (target.rest ?? "").startsWith("core/");
+                if (!viaExports && !viaChatsCore) {
+                    context.report({
+                        node,
+                        messageId: "featurePrivacy",
+                        data: { importerFeature: importer.feature, targetFeature: target.feature },
+                    });
+                }
+            }
+        }
+
+        return {
+            ImportDeclaration(node) {
+                check(node, node.source.value);
+            },
+            ExportNamedDeclaration(node) {
+                if (node.source) check(node, node.source.value);
+            },
+            ExportAllDeclaration(node) {
+                check(node, node.source.value);
+            },
+            ImportExpression(node) {
+                if (node.source.type === "Literal") check(node, node.source.value);
+            },
+        };
+    },
+};
diff --git a/frontend/eslint.config.mjs b/frontend/eslint.config.mjs
index eee8b785eb..12a54f0fc7 100644
--- a/frontend/eslint.config.mjs
+++ b/frontend/eslint.config.mjs
@@ -10,6 +10,7 @@ import globals from "globals";
 import { dirname } from "path";
 import { fileURLToPath } from "url";
 import noPagejsDirect from "./eslint-rules/no-pagejs-direct.mjs";
+import structureBoundaries from "./eslint-rules/structure-boundaries.mjs";
 
 // __dirname equivalent
 const __dirname = dirname(fileURLToPath(import.meta.url));
@@ -37,7 +38,7 @@ export default defineConfig([
             "@typescript-eslint": typescriptEslint,
             prettier,
             svelte,
-            local: { rules: { "no-pagejs-direct": noPagejsDirect } },
+            local: { rules: { "no-pagejs-direct": noPagejsDirect, "structure-boundaries": structureBoundaries } },
         },
         extends: compat.extends(
             "eslint:recommended",
@@ -48,6 +49,7 @@ export default defineConfig([
             "@typescript-eslint/no-explicit-any": ["error"],
             "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
             "local/no-pagejs-direct": "error",
+            "local/structure-boundaries": "error",
         },
     },
     // Explicit exceptions: files that are permitted to import page.js directly.
@@ -65,9 +67,9 @@ export default defineConfig([
     },
     {
         files: [
-            "app/src/components/Router.svelte",
-            "app/src/components_mobile/Router.svelte",
-            "app/src/components_mobile/home/SlidingModals.svelte",
+            "app/src/desktop/shell/Router.svelte",
+            "app/src/mobile/shell/Router.svelte",
+            "app/src/mobile/shell/SlidingModals.svelte",
         ],
         languageOptions: {
             parser: svelteParser,
@@ -86,6 +88,41 @@ export default defineConfig([
             "@typescript-eslint/no-explicit-any": "off",
         },
     },
+    // Structure boundaries for all app svelte components. Svelte files are not
+    // otherwise linted (pre-consolidation status quo); this block parses them
+    // solely to enforce import boundaries, so unrelated recommended rules that
+    // would newly fire on svelte are disabled here.
+    {
+        files: ["app/src/**/*.svelte"],
+        languageOptions: {
+            parser: svelteParser,
+            parserOptions: {
+                parser: tsParser,
+            },
+        },
+        rules: {
+            // Existing cross-feature imports are tracked as warnings until each
+            // is resolved (exports/ surface, chats/core, or a move to shared/).
+            "local/structure-boundaries": "warn",
+            "no-unused-vars": "off",
+            "no-undef": "off",
+            "no-self-assign": "off", // svelte reactivity-trigger idiom
+            // Pre-existing style in svelte files, which were never linted before
+            // this block existed; only the boundary rule is enforced here.
+            "no-case-declarations": "off",
+            "no-empty": "off",
+            "no-useless-escape": "off",
+            "@typescript-eslint/ban-ts-comment": "off",
+            "@typescript-eslint/no-unused-expressions": "off",
+            "no-fallthrough": "off",
+            "no-async-promise-executor": "off",
+            "no-duplicate-case": "off",
+            "no-constant-condition": "off",
+            "@typescript-eslint/no-unused-vars": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "prettier/prettier": "off",
+        },
+    },
     globalIgnores([
         "**/candid/*.ts",
         "**/candid/*.js",