diff --git a/Dockerfile b/Dockerfile
index 3b3f911236..fa3ba1d00f 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -3,7 +3,7 @@ FROM ubuntu:22.04 as builder
 SHELL ["bash", "-c"]
 
 ARG git_commit_id
-ARG rust_version=1.73.0
+ARG rust_version=1.75.0
 
 ENV GIT_COMMIT_ID=$git_commit_id
 ENV TZ=UTC
diff --git a/backend/canisters/community/CHANGELOG.md b/backend/canisters/community/CHANGELOG.md
index c035d81d8a..b6f1196b66 100644
--- a/backend/canisters/community/CHANGELOG.md
+++ b/backend/canisters/community/CHANGELOG.md
@@ -9,6 +9,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 - Show proposal payloads for NNS proposals ([#5072](https://github.com/open-chat-labs/open-chat/pull/5072))
 
+### Changed
+
+- Add `subtype` to channel search results ([#5084](https://github.com/open-chat-labs/open-chat/pull/5084))
+
+### Fixed
+
+- Prevent latest messages of payment gated groups from being public ([#5080](https://github.com/open-chat-labs/open-chat/pull/5080))
+
 ## [[2.0.985](https://github.com/open-chat-labs/open-chat/releases/tag/v2.0.985-community)] - 2023-12-19
 
 ### Added
diff --git a/backend/canisters/community/impl/src/jobs/make_pending_payments.rs b/backend/canisters/community/impl/src/jobs/make_pending_payments.rs
index 7e868cca1a..22acb3f953 100644
--- a/backend/canisters/community/impl/src/jobs/make_pending_payments.rs
+++ b/backend/canisters/community/impl/src/jobs/make_pending_payments.rs
@@ -94,6 +94,6 @@ async fn make_payment(ledger_canister: CanisterId, transfer_args: TransferArg) -
 
 fn memo(reason: PendingPaymentReason) -> Memo {
     match reason {
-        PendingPaymentReason::AccessGate => MEMO_JOINING_FEE.to_vec().try_into().unwrap(),
+        PendingPaymentReason::AccessGate => MEMO_JOINING_FEE.to_vec().into(),
     }
 }
diff --git a/backend/canisters/community/impl/src/model/channels.rs b/backend/canisters/community/impl/src/model/channels.rs
index 8a33e6b414..26fadda3ea 100644
--- a/backend/canisters/community/impl/src/model/channels.rs
+++ b/backend/canisters/community/impl/src/model/channels.rs
@@ -370,7 +370,8 @@ impl Channel {
     }
 
     fn can_view_latest_message(&self, is_channel_member: bool, is_community_member: bool, is_community_public: bool) -> bool {
-        is_channel_member || (self.chat.is_public.value && (is_community_member || is_community_public))
+        is_channel_member
+            || (self.chat.is_public.value && !self.chat.has_payment_gate() && (is_community_member || is_community_public))
     }
 }
 
@@ -388,6 +389,7 @@ impl From<&Channel> for ChannelMatch {
             avatar_id: types::Document::id(&channel.chat.avatar),
             member_count: channel.chat.members.len(),
             gate: channel.chat.gate.value.clone(),
+            subtype: channel.chat.subtype.value.clone(),
         }
     }
 }
diff --git a/backend/canisters/cycles_dispenser/api/src/lib.rs b/backend/canisters/cycles_dispenser/api/src/lib.rs
index 048db36a9f..9550e16025 100644
--- a/backend/canisters/cycles_dispenser/api/src/lib.rs
+++ b/backend/canisters/cycles_dispenser/api/src/lib.rs
@@ -1,7 +1,5 @@
 mod lifecycle;
-mod queries;
 mod updates;
 
 pub use lifecycle::*;
-pub use queries::*;
 pub use updates::*;
diff --git a/backend/canisters/cycles_dispenser/api/src/queries/mod.rs b/backend/canisters/cycles_dispenser/api/src/queries/mod.rs
deleted file mode 100644
index 8b13789179..0000000000
--- a/backend/canisters/cycles_dispenser/api/src/queries/mod.rs
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/backend/canisters/escrow/api/src/lib.rs b/backend/canisters/escrow/api/src/lib.rs
index 074f4e9207..912a18a451 100644
--- a/backend/canisters/escrow/api/src/lib.rs
+++ b/backend/canisters/escrow/api/src/lib.rs
@@ -4,11 +4,9 @@ use sha256::sha256;
 use types::UserId;
 
 mod lifecycle;
-mod queries;
 mod updates;
 
 pub use lifecycle::*;
-pub use queries::*;
 pub use updates::*;
 
 pub fn deposit_subaccount(user_id: UserId, offer_id: u32) -> Subaccount {
diff --git a/backend/canisters/escrow/api/src/queries/mod.rs b/backend/canisters/escrow/api/src/queries/mod.rs
deleted file mode 100644
index 8b13789179..0000000000
--- a/backend/canisters/escrow/api/src/queries/mod.rs
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/backend/canisters/group/CHANGELOG.md b/backend/canisters/group/CHANGELOG.md
index a63acc50ba..2457505e6f 100644
--- a/backend/canisters/group/CHANGELOG.md
+++ b/backend/canisters/group/CHANGELOG.md
@@ -9,6 +9,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 - Show proposal payloads for NNS proposals ([#5072](https://github.com/open-chat-labs/open-chat/pull/5072))
 
+### Fixed
+
+- Prevent latest messages of payment gated groups from being public ([#5080](https://github.com/open-chat-labs/open-chat/pull/5080))
+
 ## [[2.0.986](https://github.com/open-chat-labs/open-chat/releases/tag/v2.0.986-group)] - 2023-12-19
 
 ### Added
diff --git a/backend/canisters/group/impl/src/jobs/make_pending_payments.rs b/backend/canisters/group/impl/src/jobs/make_pending_payments.rs
index 7e868cca1a..22acb3f953 100644
--- a/backend/canisters/group/impl/src/jobs/make_pending_payments.rs
+++ b/backend/canisters/group/impl/src/jobs/make_pending_payments.rs
@@ -94,6 +94,6 @@ async fn make_payment(ledger_canister: CanisterId, transfer_args: TransferArg) -
 
 fn memo(reason: PendingPaymentReason) -> Memo {
     match reason {
-        PendingPaymentReason::AccessGate => MEMO_JOINING_FEE.to_vec().try_into().unwrap(),
+        PendingPaymentReason::AccessGate => MEMO_JOINING_FEE.to_vec().into(),
     }
 }
diff --git a/backend/canisters/group/impl/src/queries/public_summary.rs b/backend/canisters/group/impl/src/queries/public_summary.rs
index 7a362f1919..fe8cb814a7 100644
--- a/backend/canisters/group/impl/src/queries/public_summary.rs
+++ b/backend/canisters/group/impl/src/queries/public_summary.rs
@@ -23,7 +23,7 @@ fn public_summary_impl(args: Args, state: &RuntimeState) -> Response {
     let events_ttl = data.chat.events.get_events_time_to_live();
 
     // You can't see private group messages unless you are a member of the group
-    let latest_message = if is_public || state.data.get_member(caller).is_some() {
+    let latest_message = if (is_public && !data.chat.has_payment_gate()) || state.data.get_member(caller).is_some() {
         events_reader.latest_message_event(None)
     } else {
         None
diff --git a/backend/canisters/group_index/CHANGELOG.md b/backend/canisters/group_index/CHANGELOG.md
index 92027eb632..3386b115e9 100644
--- a/backend/canisters/group_index/CHANGELOG.md
+++ b/backend/canisters/group_index/CHANGELOG.md
@@ -5,6 +5,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## [unreleased]
 
+### Changed
+
+- Add `subtype` to group search results ([#5084](https://github.com/open-chat-labs/open-chat/pull/5084))
+
 ## [[2.0.979](https://github.com/open-chat-labs/open-chat/releases/tag/v2.0.979-group_index)] - 2023-12-19
 
 ### Changed
diff --git a/backend/canisters/group_index/impl/src/model/public_groups.rs b/backend/canisters/group_index/impl/src/model/public_groups.rs
index 1f0d33104e..014389583a 100644
--- a/backend/canisters/group_index/impl/src/model/public_groups.rs
+++ b/backend/canisters/group_index/impl/src/model/public_groups.rs
@@ -262,6 +262,7 @@ impl From<&PublicGroupInfo> for GroupMatch {
             avatar_id: group.avatar_id,
             member_count: group.activity.member_count,
             gate: group.gate.clone(),
+            subtype: group.subtype.clone(),
         }
     }
 }
diff --git a/backend/canisters/neuron_controller/api/src/lib.rs b/backend/canisters/neuron_controller/api/src/lib.rs
index 048db36a9f..9550e16025 100644
--- a/backend/canisters/neuron_controller/api/src/lib.rs
+++ b/backend/canisters/neuron_controller/api/src/lib.rs
@@ -1,7 +1,5 @@
 mod lifecycle;
-mod queries;
 mod updates;
 
 pub use lifecycle::*;
-pub use queries::*;
 pub use updates::*;
diff --git a/backend/canisters/neuron_controller/api/src/queries/mod.rs b/backend/canisters/neuron_controller/api/src/queries/mod.rs
deleted file mode 100644
index 8b13789179..0000000000
--- a/backend/canisters/neuron_controller/api/src/queries/mod.rs
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/backend/canisters/proposals_bot/impl/src/lib.rs b/backend/canisters/proposals_bot/impl/src/lib.rs
index c490562299..53f4d0355f 100644
--- a/backend/canisters/proposals_bot/impl/src/lib.rs
+++ b/backend/canisters/proposals_bot/impl/src/lib.rs
@@ -160,7 +160,7 @@ fn generate_message_id(governance_canister_id: CanisterId, proposal_id: Proposal
     hash.update(b"proposals_bot");
     hash.update(governance_canister_id.as_slice());
     hash.update(proposal_id.to_ne_bytes());
-    let array32: [u8; 32] = hash.finalize().try_into().unwrap();
+    let array32: [u8; 32] = hash.finalize().into();
     let array16: [u8; 16] = array32[..16].try_into().unwrap();
     u128::from_ne_bytes(array16).into()
 }
diff --git a/backend/canisters/user/CHANGELOG.md b/backend/canisters/user/CHANGELOG.md
index 3529c50b67..86554518e7 100644
--- a/backend/canisters/user/CHANGELOG.md
+++ b/backend/canisters/user/CHANGELOG.md
@@ -5,6 +5,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## [unreleased]
 
+### Changed
+
+- Add `local_user_index_canister_id` to `initial_state` response ([#5083](https://github.com/open-chat-labs/open-chat/pull/5083))
+
 ### Removed
 
 - Remove group summary cache ([#5067](https://github.com/open-chat-labs/open-chat/pull/5067))
diff --git a/backend/canisters/user/api/can.did b/backend/canisters/user/api/can.did
index 60e90e3849..c5039a29f7 100644
--- a/backend/canisters/user/api/can.did
+++ b/backend/canisters/user/api/can.did
@@ -747,6 +747,7 @@ type InitialStateResponse = variant {
         avatar_id : opt nat;
         blocked_users : vec UserId;
         suspended : bool;
+        local_user_index_canister_id : CanisterId;
     };
 };
 
diff --git a/backend/canisters/user/api/src/queries/initial_state.rs b/backend/canisters/user/api/src/queries/initial_state.rs
index 1c95ad482c..bacab1e15c 100644
--- a/backend/canisters/user/api/src/queries/initial_state.rs
+++ b/backend/canisters/user/api/src/queries/initial_state.rs
@@ -1,6 +1,6 @@
 use candid::CandidType;
 use serde::{Deserialize, Serialize};
-use types::{Chat, ChatId, DirectChatSummary, Empty, GroupChatSummary, TimestampMillis, UserId};
+use types::{CanisterId, Chat, ChatId, DirectChatSummary, Empty, GroupChatSummary, TimestampMillis, UserId};
 
 pub type Args = Empty;
 
@@ -19,6 +19,7 @@ pub struct SuccessResult {
     pub avatar_id: Option<u128>,
     pub blocked_users: Vec<UserId>,
     pub suspended: bool,
+    pub local_user_index_canister_id: CanisterId,
 }
 
 #[derive(CandidType, Serialize, Deserialize, Debug)]
diff --git a/backend/canisters/user/impl/src/queries/initial_state.rs b/backend/canisters/user/impl/src/queries/initial_state.rs
index 593a643d09..92f118fa65 100644
--- a/backend/canisters/user/impl/src/queries/initial_state.rs
+++ b/backend/canisters/user/impl/src/queries/initial_state.rs
@@ -44,5 +44,6 @@ fn initial_state_impl(state: &RuntimeState) -> Response {
         avatar_id,
         blocked_users,
         suspended: state.data.suspended.value,
+        local_user_index_canister_id: state.data.local_user_index_canister_id,
     })
 }
diff --git a/backend/canisters/user_index/impl/src/jobs/make_pending_payments.rs b/backend/canisters/user_index/impl/src/jobs/make_pending_payments.rs
index 0492af24b0..dbaacd346f 100644
--- a/backend/canisters/user_index/impl/src/jobs/make_pending_payments.rs
+++ b/backend/canisters/user_index/impl/src/jobs/make_pending_payments.rs
@@ -66,7 +66,7 @@ async fn make_payment(pending_payment: &PendingPayment) -> Result<BlockIndex, bo
         to: pending_payment.recipient_account,
         fee: None,
         created_at_time: Some(pending_payment.timestamp),
-        memo: Some(pending_payment.memo.to_vec().try_into().unwrap()),
+        memo: Some(pending_payment.memo.to_vec().into()),
         amount: pending_payment.amount.into(),
     };
 
diff --git a/backend/integration_tests/src/batched_summary_and_event_tests.rs b/backend/integration_tests/src/batched_summary_and_event_tests.rs
index 83813c50c3..8030384252 100644
--- a/backend/integration_tests/src/batched_summary_and_event_tests.rs
+++ b/backend/integration_tests/src/batched_summary_and_event_tests.rs
@@ -71,7 +71,7 @@ fn get_batched_events_succeeds() {
         },
     );
 
-    assert_is_message_with_text(responses.get(0).unwrap(), "User: 0");
+    assert_is_message_with_text(responses.first().unwrap(), "User: 0");
     assert_is_message_with_text(responses.get(1).unwrap(), "Group1: 1");
     assert_is_message_with_text(responses.get(2).unwrap(), "Group2: 2");
     assert_is_message_with_text(responses.get(3).unwrap(), "Channel: 3");
@@ -123,13 +123,13 @@ fn get_batched_summaries_succeeds() {
             },
         );
 
-    assert_is_summary_with_id(responses.get(0).unwrap(), group_id1.into(), false);
+    assert_is_summary_with_id(responses.first().unwrap(), group_id1.into(), false);
     assert_is_summary_with_id(responses.get(1).unwrap(), group_id2.into(), false);
     assert_is_summary_with_id(responses.get(2).unwrap(), community_id.into(), true);
 }
 
 fn assert_is_message_with_text(response: &EventsResponse, text: &str) {
-    if let local_user_index_canister::chat_events::EventsResponse::Success(result) = response {
+    if let EventsResponse::Success(result) = response {
         assert_eq!(result.events.len(), 1);
         if let ChatEvent::Message(message) = &result.events.first().unwrap().event {
             assert_eq!(message.content.text().unwrap(), text);
diff --git a/backend/libraries/candid_gen/src/lib.rs b/backend/libraries/candid_gen/src/lib.rs
index 943e5bb776..e224cfc77b 100644
--- a/backend/libraries/candid_gen/src/lib.rs
+++ b/backend/libraries/candid_gen/src/lib.rs
@@ -61,7 +61,7 @@ pub fn generate_candid_method_no_args(input: TokenStream) -> TokenStream {
 }
 
 fn get_method_attribute(inputs: Vec<String>) -> MethodAttribute {
-    let first_arg = inputs.get(0).unwrap();
+    let first_arg = inputs.first().unwrap();
     let second_arg = inputs.get(1).unwrap();
     let third_arg = inputs.get(2).unwrap();
 
diff --git a/backend/libraries/canister_api_macros/src/lib.rs b/backend/libraries/canister_api_macros/src/lib.rs
index d93a625689..6ce8e03fc7 100644
--- a/backend/libraries/canister_api_macros/src/lib.rs
+++ b/backend/libraries/canister_api_macros/src/lib.rs
@@ -180,7 +180,7 @@ fn get_arg_names(signature: &Signature) -> Vec<Ident> {
 }
 
 fn get_validation_method_attribute(inputs: Vec<String>) -> ValidationMethodAttribute {
-    let service_name = inputs.get(0).unwrap().to_string();
+    let service_name = inputs.first().unwrap().to_string();
     let function_name = inputs.get(1).unwrap().to_string();
 
     ValidationMethodAttribute {
diff --git a/backend/libraries/group_chat_core/src/lib.rs b/backend/libraries/group_chat_core/src/lib.rs
index ef1e4e8b20..c0b1ec8e1d 100644
--- a/backend/libraries/group_chat_core/src/lib.rs
+++ b/backend/libraries/group_chat_core/src/lib.rs
@@ -1731,12 +1731,8 @@ impl GroupChatCore {
         })
     }
 
-    fn has_payment_gate(&self) -> bool {
-        self.gate
-            .value
-            .as_ref()
-            .map(|g| matches!(g, AccessGate::Payment(_)))
-            .unwrap_or_default()
+    pub fn has_payment_gate(&self) -> bool {
+        self.gate.value.as_ref().map(|g| g.is_payment_gate()).unwrap_or_default()
     }
 }
 
diff --git a/backend/libraries/types/can.did b/backend/libraries/types/can.did
index 135808d2d2..7868dababf 100644
--- a/backend/libraries/types/can.did
+++ b/backend/libraries/types/can.did
@@ -1590,6 +1590,7 @@ type GroupMatch = record {
     avatar_id : opt nat;
     member_count : nat32;
     gate : opt AccessGate;
+    subtype : opt GroupSubtype;
 };
 
 type ChannelMatch = record {
@@ -1599,6 +1600,7 @@ type ChannelMatch = record {
     avatar_id : opt nat;
     member_count : nat32;
     gate : opt AccessGate;
+    subtype : opt GroupSubtype;
 };
 
 type ThreadPreview = record {
diff --git a/backend/libraries/types/src/gated_groups.rs b/backend/libraries/types/src/gated_groups.rs
index f3f61a4441..2ff3fe18cd 100644
--- a/backend/libraries/types/src/gated_groups.rs
+++ b/backend/libraries/types/src/gated_groups.rs
@@ -17,6 +17,10 @@ impl AccessGate {
     pub fn synchronous(&self) -> bool {
         matches!(self, AccessGate::DiamondMember)
     }
+
+    pub fn is_payment_gate(&self) -> bool {
+        matches!(self, AccessGate::Payment(_))
+    }
 }
 
 #[derive(CandidType, Serialize, Deserialize, Clone, Debug, Eq, PartialEq)]
diff --git a/backend/libraries/types/src/group_match.rs b/backend/libraries/types/src/group_match.rs
index e3354156be..f1773264c4 100644
--- a/backend/libraries/types/src/group_match.rs
+++ b/backend/libraries/types/src/group_match.rs
@@ -1,4 +1,4 @@
-use crate::{AccessGate, ChannelId, ChatId, CommunityId};
+use crate::{AccessGate, ChannelId, ChatId, CommunityId, GroupSubtype};
 use candid::CandidType;
 use serde::{Deserialize, Serialize};
 
@@ -10,6 +10,7 @@ pub struct GroupMatch {
     pub avatar_id: Option<u128>,
     pub member_count: u32,
     pub gate: Option<AccessGate>,
+    pub subtype: Option<GroupSubtype>,
 }
 
 #[derive(CandidType, Serialize, Deserialize, Debug)]
@@ -35,4 +36,5 @@ pub struct ChannelMatch {
     pub avatar_id: Option<u128>,
     pub member_count: u32,
     pub gate: Option<AccessGate>,
+    pub subtype: Option<GroupSubtype>,
 }
diff --git a/frontend/app/src/components/Panel.svelte b/frontend/app/src/components/Panel.svelte
deleted file mode 100644
index 62fd9cb421..0000000000
--- a/frontend/app/src/components/Panel.svelte
+++ /dev/null
@@ -1,163 +0,0 @@
-<script lang="ts">
-    import { fullWidth, layoutStore } from "../stores/layout";
-    import { mobileWidth } from "../stores/screenDimensions";
-    import { rtlStore } from "../stores/rtl";
-    import { navOpen } from "../stores/layout";
-    import { currentTheme } from "../theme/themes";
-
-    export let left: boolean = false;
-    export let nav: boolean = false;
-    export let middle: boolean = false;
-    export let right: boolean = false;
-    export let forceModal: boolean = false;
-    export let empty: boolean = false;
-
-    $: modal = !$mobileWidth && (forceModal || !$fullWidth);
-</script>
-
-<section
-    class:rtl={$rtlStore}
-    class:nav
-    class:left
-    class:right
-    class:middle
-    class:modal
-    class:offset={$layoutStore.showNav}
-    class:hovering={$navOpen}
-    class:halloween={$currentTheme.name === "halloween"}
-    class:empty>
-    <slot />
-</section>
-
-<style lang="scss">
-    :global(body.witch section.right.empty) {
-        background: var(--panel-right-bg);
-    }
-
-    $left-width: 40%;
-    $right-width: 500px;
-
-    section {
-        padding-bottom: 0;
-        overflow: auto;
-        overflow-x: hidden;
-
-        // whichever panel is the 2nd panel should be nudged right to accommodate the nav
-        &.offset:nth-child(2) {
-            margin-inline-start: toRem(80);
-            @include mobile() {
-                margin-inline-start: toRem(60);
-            }
-        }
-
-        &.middle {
-            padding-left: 0;
-            padding-right: 0;
-            @include mobile() {
-                padding: 0;
-            }
-            flex: 13;
-            background: none;
-        }
-
-        &.left,
-        &.right {
-            max-width: 500px; // need this for routes without the left panel
-            flex: 7;
-            display: flex;
-            flex-direction: column;
-
-            @include size-above(xxl) {
-                flex: 5;
-            }
-        }
-
-        &.left {
-            position: relative;
-            border-right: var(--bw) solid var(--bd);
-            background: var(--panel-left-bg);
-
-            &.rtl {
-                border-right: none;
-                border-left: var(--bw) solid var(--bd);
-            }
-
-            @include mobile() {
-                width: 100%;
-                max-width: none;
-                padding: 0;
-                flex: auto;
-                border-right: none;
-            }
-        }
-
-        &.nav {
-            position: absolute;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            width: toRem(80);
-            overflow-x: hidden;
-            height: 100%;
-            background: var(--panel-nav-bg);
-            padding: $sp2 0;
-            border-right: var(--bw) solid var(--bd);
-            @include z-index("left-nav");
-            transition: width 250ms ease-in-out;
-
-            &.rtl {
-                border-right: none;
-                border-left: var(--bw) solid var(--bd);
-            }
-
-            @include mobile() {
-                width: toRem(60);
-                padding: $sp1 0;
-            }
-
-            &.hovering {
-                width: toRem(350);
-                box-shadow: 10px 0 10px rgba(0, 0, 0, 0.1);
-
-                @include mobile() {
-                    width: toRem(300);
-                }
-            }
-        }
-
-        &.right {
-            // background: var(--panel-right-bg);
-            padding: 0px;
-            border-left: var(--bw) solid var(--bd);
-            background: var(--panel-right-bg);
-            position: relative;
-
-            &.modal.right {
-                background: var(--panel-right-modal);
-                @include fullHeight();
-                max-width: 500px;
-                min-width: 500px;
-            }
-
-            @include mobile() {
-                background: var(--panel-right-modal);
-                width: 100%;
-                height: 100%;
-                min-width: 0;
-                max-width: none;
-                border-left: none;
-            }
-
-            &.empty {
-                background: transparent;
-            }
-        }
-
-        &.halloween::after {
-            @include cobweb();
-            bottom: 0;
-            right: 0;
-            transform: scaleY(-1);
-        }
-    }
-</style>
diff --git a/frontend/app/src/components/Resizable.svelte b/frontend/app/src/components/Resizable.svelte
new file mode 100644
index 0000000000..537b478a6d
--- /dev/null
+++ b/frontend/app/src/components/Resizable.svelte
@@ -0,0 +1,90 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import { rightPanelWidth } from "../stores/layout";
+    import { mobileWidth } from "../stores/screenDimensions";
+
+    const MIN_COL_WIDTH = 400;
+    const MAX_COL_WIDTH = 900;
+
+    export let section: HTMLElement;
+    export let modal: boolean;
+    export let resizedWidth: string;
+    export let resized: boolean;
+    export let resizing = false;
+
+    let previous = 0;
+
+    onMount(() => {
+        return rightPanelWidth.subscribe((width) => {
+            resized = width !== undefined;
+            resizedWidth = getWidthVar(width);
+        });
+    });
+
+    function startResize(ev: MouseEvent) {
+        previous = ev.screenX;
+        resizing = true;
+        document.body.style.cursor = "ew-resize";
+    }
+
+    function stopResize() {
+        resizing = false;
+        document.body.style.cursor = "";
+    }
+
+    function resetSize() {
+        rightPanelWidth.set(undefined);
+    }
+
+    function clampResize(size: number): number {
+        if (size > MAX_COL_WIDTH) return MAX_COL_WIDTH;
+        if (size < MIN_COL_WIDTH) return MIN_COL_WIDTH;
+        return size;
+    }
+
+    function drag(ev: MouseEvent) {
+        if (resizing) {
+            const diff = previous - ev.screenX;
+            const updated = clampResize(section.offsetWidth + diff);
+            rightPanelWidth.set(updated);
+            previous = ev.screenX;
+        }
+    }
+
+    function getWidthVar(rw: number | undefined): string {
+        if (modal) {
+            return rw ? `${rw}px` : "500px";
+        } else {
+            return rw ? `${rw}px` : "7";
+        }
+    }
+</script>
+
+<svelte:window on:mousemove={drag} on:mouseup={stopResize} />
+
+{#if !$mobileWidth}
+    <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+    <div
+        role="separator"
+        class:resizing
+        on:mousedown={startResize}
+        on:dblclick={resetSize}
+        class="handle">
+    </div>
+{/if}
+
+<style lang="scss">
+    .handle {
+        position: absolute;
+        left: 0;
+        height: 100%;
+        width: 5px;
+        cursor: ew-resize;
+        transition: background-color 300ms ease-in-out;
+
+        &.resizing,
+        &:hover {
+            background-color: var(--accent);
+        }
+    }
+</style>
diff --git a/frontend/app/src/components/SelectChatModal.svelte b/frontend/app/src/components/SelectChatModal.svelte
index 52c6ea4d3a..5f81ff33bf 100644
--- a/frontend/app/src/components/SelectChatModal.svelte
+++ b/frontend/app/src/components/SelectChatModal.svelte
@@ -15,7 +15,6 @@
     import Avatar from "./Avatar.svelte";
     import CollapsibleCard from "./CollapsibleCard.svelte";
     import { AvatarSize, chatIdentifiersEqual } from "openchat-client";
-    import Panel from "./Panel.svelte";
     import { iconSize } from "../stores/iconSize";
     import HoverIcon from "./HoverIcon.svelte";
     import AccountMultiple from "svelte-material-icons/AccountMultiple.svelte";
@@ -250,7 +249,7 @@
     }
 </script>
 
-<Panel right forceModal>
+<section>
     <SectionHeader border={false} gap>
         <HoverIcon>
             <AccountMultiple size={$iconSize} color={"var(--icon-txt)"} />
@@ -419,7 +418,7 @@
             {/each}
         </div>
     {/if}
-</Panel>
+</section>
 
 <style lang="scss">
     :global(.selectable-chats .body) {
@@ -436,6 +435,19 @@
         margin-top: 2px;
     }
 
+    section {
+        background: var(--panel-right-modal);
+        height: calc(var(--vh, 1vh) * 100);
+        position: relative;
+        width: 500px;
+        overflow: auto;
+        overflow-x: hidden;
+
+        @include mobile() {
+            width: 100%;
+        }
+    }
+
     .no-chats {
         margin: $sp3;
         padding: $sp3 $sp4;
diff --git a/frontend/app/src/components/home/Home.svelte b/frontend/app/src/components/home/Home.svelte
index d34276432c..548499f6ce 100644
--- a/frontend/app/src/components/home/Home.svelte
+++ b/frontend/app/src/components/home/Home.svelte
@@ -6,7 +6,6 @@
     import Toast from "../Toast.svelte";
     import SelectChatModal from "../SelectChatModal.svelte";
     import MiddlePanel from "./MiddlePanel.svelte";
-    import RightPanel from "./RightPanel.svelte";
     import ViewUserProfile from "./profile/ViewUserProfile.svelte";
     import EditCommunity from "./communities/edit/Edit.svelte";
     import type {
@@ -47,7 +46,6 @@
     } from "openchat-client";
     import Overlay from "../Overlay.svelte";
     import { getContext, onMount, tick } from "svelte";
-    import { rtlStore } from "../../stores/rtl";
     import { mobileWidth, screenWidth, ScreenWidth } from "../../stores/screenDimensions";
     import page from "page";
     import { pathParams, routeForScope } from "../../routes";
@@ -92,6 +90,7 @@
     import AnonFooter from "./AnonFooter.svelte";
     import OfflineFooter from "../OfflineFooter.svelte";
     import ApproveJoiningPaymentModal from "./ApproveJoiningPaymentModal.svelte";
+    import RightPanel from "./RightPanelWrapper.svelte";
 
     type ViewProfileConfig = {
         userId: string;
@@ -992,13 +991,6 @@
         return true;
     }
 
-    function closeRightPanel() {
-        if ($rightPanelHistory.find((panel) => panel.kind === "message_thread_panel")) {
-            page.replace(removeQueryStringParam("open"));
-        }
-        rightPanelHistory.set([]);
-    }
-
     function createCommunity() {
         const maxIndex = $communities
             .values()
@@ -1109,21 +1101,19 @@
             on:convertGroupToCommunity={convertGroupToCommunity}
             on:createCommunity={createCommunity} />
     {/if}
-    {#if $layoutStore.rightPanel === "inline"}
-        <RightPanel
-            on:goToMessageIndex={goToMessageIndex}
-            on:replyPrivatelyTo={replyPrivatelyTo}
-            on:showInviteGroupUsers={showInviteGroupUsers}
-            on:showGroupMembers={showGroupMembers}
-            on:chatWith={chatWith}
-            on:upgrade={upgrade}
-            on:deleteGroup={triggerConfirm}
-            on:editGroup={editGroup}
-            on:editCommunity={editCommunity}
-            on:deleteCommunity={triggerConfirm}
-            on:newChannel={newChannel}
-            on:groupCreated={groupCreated} />
-    {/if}
+    <RightPanel
+        on:goToMessageIndex={goToMessageIndex}
+        on:replyPrivatelyTo={replyPrivatelyTo}
+        on:showInviteGroupUsers={showInviteGroupUsers}
+        on:showGroupMembers={showGroupMembers}
+        on:chatWith={chatWith}
+        on:upgrade={upgrade}
+        on:deleteGroup={triggerConfirm}
+        on:editGroup={editGroup}
+        on:editCommunity={editCommunity}
+        on:deleteCommunity={triggerConfirm}
+        on:newChannel={newChannel}
+        on:groupCreated={groupCreated} />
 </main>
 
 {#if $anonUser}
@@ -1134,26 +1124,6 @@
     <OfflineFooter />
 {/if}
 
-{#if $layoutStore.rightPanel === "floating"}
-    <Overlay on:close={closeRightPanel} dismissible fade={!$mobileWidth}>
-        <div on:click|stopPropagation class="right-wrapper" class:rtl={$rtlStore}>
-            <RightPanel
-                on:goToMessageIndex={goToMessageIndex}
-                on:replyPrivatelyTo={replyPrivatelyTo}
-                on:showInviteGroupUsers={showInviteGroupUsers}
-                on:showGroupMembers={showGroupMembers}
-                on:chatWith={chatWith}
-                on:upgrade={upgrade}
-                on:deleteGroup={triggerConfirm}
-                on:editGroup={editGroup}
-                on:editCommunity={editCommunity}
-                on:deleteCommunity={triggerConfirm}
-                on:newChannel={newChannel}
-                on:groupCreated={groupCreated} />
-        </div>
-    </Overlay>
-{/if}
-
 {#if confirmActionEvent !== undefined}
     <AreYouSure
         doubleCheck={confirmActionEvent.kind === "delete" ||
@@ -1257,21 +1227,4 @@
             margin-bottom: toRem(40);
         }
     }
-
-    .right-wrapper {
-        position: absolute;
-        top: 0;
-        &:not(.rtl) {
-            right: 0;
-        }
-        &.rtl {
-            left: 0;
-        }
-        @include z-index("right-panel");
-        @include box-shadow(3);
-        @include mobile() {
-            width: 100%;
-            height: 100%;
-        }
-    }
 </style>
diff --git a/frontend/app/src/components/home/LeftPanel.svelte b/frontend/app/src/components/home/LeftPanel.svelte
index a827abd793..bc0a2a2c2d 100644
--- a/frontend/app/src/components/home/LeftPanel.svelte
+++ b/frontend/app/src/components/home/LeftPanel.svelte
@@ -1,9 +1,14 @@
 <script lang="ts">
-    import Panel from "../Panel.svelte";
     import ChatList from "./ChatList.svelte";
+    import { rtlStore } from "../../stores/rtl";
+    import { currentTheme } from "../../theme/themes";
+    import { layoutStore } from "../../stores/layout";
 </script>
 
-<Panel left>
+<section
+    class:offset={$layoutStore.showNav}
+    class:rtl={$rtlStore}
+    class:halloween={$currentTheme.name === "halloween"}>
     <div class="chat-list">
         <ChatList
             on:chatWith
@@ -22,7 +27,7 @@
             on:leaveGroup
             on:newChannel />
     </div>
-</Panel>
+</section>
 
 <style lang="scss">
     .chat-list {
@@ -30,4 +35,43 @@
         flex-direction: column;
         height: 100%;
     }
+
+    section {
+        overflow: auto;
+        overflow-x: hidden;
+        max-width: 500px;
+        min-width: 400px;
+        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);
+        }
+    }
 </style>
diff --git a/frontend/app/src/components/home/MessageEntry.svelte b/frontend/app/src/components/home/MessageEntry.svelte
index a13ca8a6e8..fa49c7acb9 100644
--- a/frontend/app/src/components/home/MessageEntry.svelte
+++ b/frontend/app/src/components/home/MessageEntry.svelte
@@ -68,7 +68,7 @@
     let emojiQuery: string | undefined;
     let messageEntryHeight: number;
     let messageActions: MessageActions;
-    let rangeToReplace: [number, number] | undefined = undefined;
+    let rangeToReplace: [Node, number, number] | undefined = undefined;
     let previousChatId = chat.id;
 
     // Update this to force a new textbox instance to be created
@@ -172,23 +172,26 @@
 
     function uptoCaret(
         inputContent: string | null,
-        fn: (slice: string, pos: number) => void,
+        fn: (slice: string, node: Node, pos: number) => void,
     ): void {
         if (inputContent === null) return;
 
-        const pos = window.getSelection()?.anchorOffset;
-        if (pos === undefined) return;
+        const selection = window.getSelection();
+        if (selection === null) return;
+        const anchorNode = selection.anchorNode;
+        if (anchorNode?.textContent == null) return;
+        const text = anchorNode.textContent;
 
-        const slice = inputContent.slice(0, pos);
-        fn(slice, pos);
+        const slice = text.slice(0, selection.anchorOffset);
+        fn(slice, anchorNode, selection.anchorOffset);
     }
 
     function triggerEmojiLookup(inputContent: string | null): void {
-        uptoCaret(inputContent, (slice: string, pos: number) => {
+        uptoCaret(inputContent, (slice: string, node: Node, pos: number) => {
             const matches = slice.match(emojiRegex);
             if (matches !== null) {
                 if (matches.index !== undefined) {
-                    rangeToReplace = [matches.index, pos];
+                    rangeToReplace = [node, matches.index, pos];
                     emojiQuery = matches[1].toLowerCase() || undefined;
                     showEmojiSearch = true;
                 }
@@ -201,11 +204,11 @@
 
     function triggerMentionLookup(inputContent: string | null): void {
         if (chat.kind === "direct_chat" || chat.memberCount <= 1) return;
-        uptoCaret(inputContent, (slice: string, pos: number) => {
+        uptoCaret(inputContent, (slice: string, node: Node, pos: number) => {
             const matches = slice.match(mentionRegex);
             if (matches !== null) {
                 if (matches.index !== undefined) {
-                    rangeToReplace = [matches.index, pos];
+                    rangeToReplace = [node, matches.index, pos];
                     mentionPrefix = matches[1].toLowerCase() || undefined;
                     showMentionPicker = true;
                 }
@@ -436,10 +439,10 @@
         sel?.addRange(range);
     }
 
-    function setCaretTo(pos: number) {
+    function setCaretTo(node: Node, pos: number) {
         const range = document.createRange();
-        range.selectNodeContents(inp);
-        range.setStart(inp.childNodes[0], pos);
+        range.selectNodeContents(node);
+        range.setStart(node, pos);
         range.collapse(true);
         const sel = window.getSelection();
         sel?.removeAllRanges();
@@ -454,18 +457,18 @@
     function replaceTextWith(replacement: string) {
         if (rangeToReplace === undefined) return;
 
-        const start = rangeToReplace[0];
+        const [node, start, end] = rangeToReplace;
 
-        const replaced = `${inp.textContent?.slice(
+        const replaced = `${node.textContent?.slice(
             0,
-            rangeToReplace[0],
-        )}${replacement} ${inp.textContent?.slice(rangeToReplace[1])}`;
-        inp.textContent = replaced;
+            start,
+        )}${replacement} ${node.textContent?.slice(end)}`;
+        node.textContent = replaced;
 
         dispatch("setTextContent", inp.textContent || undefined);
 
         tick().then(() => {
-            setCaretTo(start + replacement.length);
+            setCaretTo(node, start + replacement.length + 1);
         });
 
         rangeToReplace = undefined;
diff --git a/frontend/app/src/components/home/MiddlePanel.svelte b/frontend/app/src/components/home/MiddlePanel.svelte
index eda00e5c88..c483c99c6c 100644
--- a/frontend/app/src/components/home/MiddlePanel.svelte
+++ b/frontend/app/src/components/home/MiddlePanel.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import Panel from "../Panel.svelte";
     import { fade } from "svelte/transition";
     import NoChatSelected from "./NoChatSelected.svelte";
     import RecommendedGroups from "./RecommendedGroups.svelte";
@@ -10,6 +9,8 @@
     import { pathParams } from "../../routes";
     import { getContext } from "svelte";
     import AcceptRulesWrapper from "./AcceptRulesWrapper.svelte";
+    import { currentTheme } from "../../theme/themes";
+    import { layoutStore } from "../../stores/layout";
 
     const client = getContext<OpenChat>("client");
 
@@ -23,7 +24,9 @@
     $: noChat = $pathParams.kind !== "global_chat_selected_route";
 </script>
 
-<Panel middle>
+<section
+    class:offset={$layoutStore.showNav && !$layoutStore.showLeft}
+    class:halloween={$currentTheme.name === "halloween"}>
     {#if $pathParams.kind === "explore_groups_route"}
         <RecommendedGroups {joining} on:joinGroup on:leaveGroup on:upgrade />
     {:else if $pathParams.kind === "communities_route"}
@@ -68,10 +71,37 @@
                 on:forward />
         </AcceptRulesWrapper>
     {/if}
-</Panel>
+</section>
 
 <style lang="scss">
     .no-chat {
         height: 100%;
     }
+
+    section {
+        min-width: 400px;
+        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);
+        }
+    }
 </style>
diff --git a/frontend/app/src/components/home/RightPanel.svelte b/frontend/app/src/components/home/RightPanel.svelte
index 1c0a2b0530..a88344cc09 100644
--- a/frontend/app/src/components/home/RightPanel.svelte
+++ b/frontend/app/src/components/home/RightPanel.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import Panel from "../Panel.svelte";
     import UserProfile from "./profile/UserProfile.svelte";
     import GroupDetails from "./groupdetails/GroupDetails.svelte";
     import InviteUsers from "./groupdetails/InviteUsers.svelte";
@@ -33,12 +32,18 @@
     import CommunityDetails from "./communities/details/CommunitySummary.svelte";
     import { interpolateLevel } from "../../utils/i18n";
     import AcceptRulesWrapper from "./AcceptRulesWrapper.svelte";
+    import { currentTheme } from "../../theme/themes";
+    import Resizable from "../Resizable.svelte";
 
     const dispatch = createEventDispatcher();
 
     const client = getContext<OpenChat>("client");
 
     let invitingUsers = false;
+    let section: HTMLElement;
+    let resized = false;
+    let resizing = false;
+    let resizedWidth = "7";
 
     $: currentUser = client.user;
     $: selectedChatId = client.selectedChatId;
@@ -343,7 +348,14 @@
     ) as Level;
 </script>
 
-<Panel right {empty}>
+<section
+    bind:this={section}
+    class:modal
+    class:resized
+    class:resizing
+    style={`--resized-width: ${resizedWidth}`}
+    class:halloween={$currentTheme.name === "halloween"}
+    class:empty>
     {#if lastState.kind === "group_details" && $selectedChatId !== undefined && $multiUserChat !== undefined}
         <GroupDetails
             chat={$multiUserChat}
@@ -443,4 +455,73 @@
     {:else if lastState.kind === "community_filters"}
         <CommunityFilters on:close={popRightPanelHistory} />
     {/if}
-</Panel>
+
+    <Resizable {modal} {section} bind:resizedWidth bind:resized bind:resizing />
+</section>
+
+<style lang="scss">
+    :global(body.witch section.right.empty) {
+        background: var(--panel-right-bg);
+    }
+
+    section {
+        overflow: auto;
+        overflow-x: hidden;
+        flex: 7;
+        display: flex;
+        flex-direction: column;
+
+        border-left: var(--bw) solid var(--bd);
+        background: var(--panel-right-bg);
+        position: relative;
+
+        @include size-above(xxl) {
+            flex: 5;
+        }
+
+        &.resizing {
+            user-select: none;
+        }
+
+        &:not(.modal).resized {
+            flex: 0 0 var(--resized-width);
+        }
+
+        &.modal {
+            background: var(--panel-right-modal);
+            @include fullHeight();
+            min-width: 500px;
+
+            &.resized {
+                width: var(--resized-width);
+                @include mobile() {
+                    width: 100%;
+                }
+            }
+
+            @include mobile() {
+                min-width: unset;
+            }
+        }
+
+        @include mobile() {
+            background: var(--panel-right-modal);
+            width: 100%;
+            height: 100%;
+            min-width: 0;
+            max-width: none;
+            border-left: none;
+        }
+
+        &.empty {
+            background: transparent;
+        }
+
+        &.halloween::after {
+            @include cobweb();
+            bottom: 0;
+            right: 0;
+            transform: scaleY(-1);
+        }
+    }
+</style>
diff --git a/frontend/app/src/components/home/RightPanelWrapper.svelte b/frontend/app/src/components/home/RightPanelWrapper.svelte
new file mode 100644
index 0000000000..a4807bc915
--- /dev/null
+++ b/frontend/app/src/components/home/RightPanelWrapper.svelte
@@ -0,0 +1,71 @@
+<script lang="ts">
+    import { layoutStore } from "../../stores/layout";
+    import { rtlStore } from "../../stores/rtl";
+    import { rightPanelHistory } from "../../stores/rightPanel";
+    import { removeQueryStringParam } from "../../utils/urls";
+    import Overlay from "../Overlay.svelte";
+    import RightPanel from "./RightPanel.svelte";
+
+    function closeRightPanel() {
+        if ($rightPanelHistory.find((panel) => panel.kind === "message_thread_panel")) {
+            page.replace(removeQueryStringParam("open"));
+        }
+        rightPanelHistory.set([]);
+    }
+</script>
+
+{#if $layoutStore.rightPanel === "inline"}
+    <RightPanel
+        on:goToMessageIndex
+        on:replyPrivatelyTo
+        on:showInviteGroupUsers
+        on:showGroupMembers
+        on:chatWith
+        on:upgrade
+        on:deleteGroup
+        on:editGroup
+        on:editCommunity
+        on:deleteCommunity
+        on:newChannel
+        on:groupCreated />
+{/if}
+
+{#if $layoutStore.rightPanel === "floating"}
+    <Overlay on:close={closeRightPanel} dismissible>
+        <!-- svelte-ignore a11y-no-static-element-interactions -->
+        <div on:click|stopPropagation class="right-wrapper" class:rtl={$rtlStore}>
+            <RightPanel
+                on:goToMessageIndex
+                on:replyPrivatelyTo
+                on:showInviteGroupUsers
+                on:showGroupMembers
+                on:chatWith
+                on:upgrade
+                on:deleteGroup
+                on:editGroup
+                on:editCommunity
+                on:deleteCommunity
+                on:newChannel
+                on:groupCreated />
+        </div>
+    </Overlay>
+{/if}
+
+<style lang="scss">
+    .right-wrapper {
+        position: absolute;
+        top: 0;
+        &:not(.rtl) {
+            right: 0;
+        }
+        &.rtl {
+            left: 0;
+        }
+        @include z-index("right-panel");
+        @include box-shadow(3);
+        @include mobile() {
+            width: 100%;
+            height: 100%;
+        }
+    }
+</style>
diff --git a/frontend/app/src/components/home/nav/LeftNav.svelte b/frontend/app/src/components/home/nav/LeftNav.svelte
index 8ae4cadc67..d9107f7b0f 100644
--- a/frontend/app/src/components/home/nav/LeftNav.svelte
+++ b/frontend/app/src/components/home/nav/LeftNav.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import Avatar from "../../Avatar.svelte";
-    import Panel from "../../Panel.svelte";
     import MenuIcon from "../../MenuIcon.svelte";
     import HoverIcon from "../../HoverIcon.svelte";
     import HeartOutline from "svelte-material-icons/HeartOutline.svelte";
@@ -27,6 +26,7 @@
     import { flip } from "svelte/animate";
     import { type DndEvent, dndzone } from "svelte-dnd-action";
     import { isTouchDevice } from "../../../utils/devices";
+    import { rtlStore } from "../../../stores/rtl";
 
     const client = getContext<OpenChat>("client");
     const dispatch = createEventDispatcher();
@@ -130,7 +130,7 @@
 
 <svelte:body on:click={closeIfOpen} />
 
-<Panel nav>
+<section class="nav" class:open={$navOpen} class:rtl={$rtlStore}>
     <div class="top">
         <LeftNavItem separator label={$_("communities.mainMenu")}>
             <div class="hover logo">
@@ -235,7 +235,7 @@
             </div>
         </LeftNavItem>
     </div>
-</Panel>
+</section>
 
 <style lang="scss">
     :global(.hover svg path) {
@@ -269,6 +269,42 @@
     $size: toRem(48);
     $mobile-size: toRem(40);
 
+    .nav {
+        position: absolute;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        width: toRem(80);
+        overflow-x: hidden;
+        height: 100%;
+        background: var(--panel-nav-bg);
+        padding: $sp2 0;
+        border-right: var(--bw) solid var(--bd);
+        @include z-index("left-nav");
+        transition: width 250ms ease-in-out;
+        overflow: auto;
+        overflow-x: hidden;
+
+        &.rtl {
+            border-right: none;
+            border-left: var(--bw) solid var(--bd);
+        }
+
+        @include mobile() {
+            width: toRem(60);
+            padding: $sp1 0;
+        }
+
+        &.open {
+            width: toRem(350);
+            box-shadow: 10px 0 10px rgba(0, 0, 0, 0.1);
+
+            @include mobile() {
+                width: toRem(300);
+            }
+        }
+    }
+
     .top,
     .bottom,
     .middle {
diff --git a/frontend/app/src/i18n/cn.json b/frontend/app/src/i18n/cn.json
index 1e7b347ee7..e73b28c758 100644
--- a/frontend/app/src/i18n/cn.json
+++ b/frontend/app/src/i18n/cn.json
@@ -711,8 +711,8 @@
         "communities": "社区",
         "selectCommunity": "选择一个社区",
         "global": "全球的",
-        "block": "堵塞",
-        "unblock": "解锁"
+        "block": "屏蔽",
+        "unblock": "取消屏蔽"
     },
     "undeleteMessage": "取消删除",
     "undeletingMessage": "{username} 在 {timestamp} 上取消删除消息",
@@ -1208,4 +1208,4 @@
         "quoteTooLow": "所报的最佳费率是 {rate}  {tokenOut} / {tokenIn} @{dex}。这将从 {amountIn} {tokenIn} 兑换 {amountOut} {tokenOut} 。仅当报价金额超过 {minAmountOut} 时，您才可以进行交换。"
     },
     "messageBlocked": "消息已隐藏"
-}
\ No newline at end of file
+}
diff --git a/frontend/app/src/stores/layout.ts b/frontend/app/src/stores/layout.ts
index 4efb871bc9..d56075a814 100644
--- a/frontend/app/src/stores/layout.ts
+++ b/frontend/app/src/stores/layout.ts
@@ -65,3 +65,27 @@ export const layoutStore: Readable<Layout> = derived(
         }
     },
 );
+
+export function numberFromLocalStorage(key: string): number | undefined {
+    const val = localStorage.getItem(key);
+    return val ? Number(val) : undefined;
+}
+
+function createPanelWidthStore(key: string) {
+    const val = localStorage.getItem(key);
+    const store = writable<number | undefined>(val ? Number(val) : undefined);
+    return {
+        subscribe: store.subscribe,
+        set: (val: number | undefined): void => {
+            store.set(val);
+            if (val === undefined) {
+                localStorage.removeItem(key);
+            } else {
+                localStorage.setItem(key, val.toString());
+            }
+        },
+        update: store.update,
+    };
+}
+
+export const rightPanelWidth = createPanelWidthStore("openchat_right_panel_width");
diff --git a/frontend/app/src/utils/markdown.ts b/frontend/app/src/utils/markdown.ts
index 8610a7f1a5..fbc491beb7 100644
--- a/frontend/app/src/utils/markdown.ts
+++ b/frontend/app/src/utils/markdown.ts
@@ -18,7 +18,7 @@ const renderer = {
             }
         }
 
-        return `<a href=${href} ${title && `title=${title}`} ${target}>${text}</a>`;
+        return `<a href="${href}" ${title && `title="${title}"`} ${target}>${text}</a>`;
     },
 };
 
diff --git a/frontend/openchat-agent/src/utils/caching.ts b/frontend/openchat-agent/src/utils/caching.ts
index e51f35b5e6..3f569e91a5 100644
--- a/frontend/openchat-agent/src/utils/caching.ts
+++ b/frontend/openchat-agent/src/utils/caching.ts
@@ -30,6 +30,7 @@ import type {
     DataContent,
     CreatedUser,
     DiamondMembershipStatus,
+    TransferSuccess,
 } from "openchat-shared";
 import {
     chatIdentifiersEqual,
@@ -41,7 +42,7 @@ import {
 } from "openchat-shared";
 import type { Principal } from "@dfinity/principal";
 
-const CACHE_VERSION = 93;
+const CACHE_VERSION = 94;
 const MAX_INDEX = 9999999999;
 
 export type Database = Promise<IDBPDatabase<ChatSchema>>;
@@ -382,8 +383,12 @@ export async function getCachedEventByIndex<T extends ChatEvent>(
     const storeName =
         context.threadRootMessageIndex === undefined ? "chat_events" : "thread_events";
     const key = createCacheKey(context, eventIndex);
+    const upperBound = createCacheKey(context, MAX_INDEX);
 
-    const event = processEventExpiry(await db.get(storeName, IDBKeyRange.lowerBound(key)), now);
+    const event = processEventExpiry(
+        await db.get(storeName, IDBKeyRange.bound(key, upperBound)),
+        now,
+    );
 
     if (
         (event?.kind === "event" && event.index === eventIndex) ||
@@ -683,7 +688,7 @@ export function setCachedMessageFromSendResponse(
     threadRootMessageIndex?: number,
 ): ([resp, message]: [SendMessageResponse, Message]) => [SendMessageResponse, Message] {
     return ([resp, message]: [SendMessageResponse, Message]) => {
-        if (resp.kind !== "success") {
+        if (resp.kind !== "success" && resp.kind !== "transfer_success") {
             recordFailedMessage(db, chatId, sentEvent, threadRootMessageIndex);
             return [resp, message];
         }
@@ -729,7 +734,10 @@ export async function setCachePrimerTimestamp(
     await (await db).put("cachePrimer", timestamp, chatIdentifierString);
 }
 
-function messageToEvent(message: Message, resp: SendMessageSuccess): EventWrapper<Message> {
+function messageToEvent(
+    message: Message,
+    resp: SendMessageSuccess | TransferSuccess,
+): EventWrapper<Message> {
     return {
         event: {
             ...message,
diff --git a/frontend/openchat-client/src/openchat.ts b/frontend/openchat-client/src/openchat.ts
index daaaec8ad3..5e1e338c0d 100644
--- a/frontend/openchat-client/src/openchat.ts
+++ b/frontend/openchat-client/src/openchat.ts
@@ -2349,9 +2349,9 @@ export class OpenChat extends OpenChatAgentWorker {
             return Promise.resolve();
         }
 
-        const context = this._liveState.selectedMessageContext;
+        const context = { chatId, threadRootMessageIndex };
 
-        if (context?.threadRootMessageIndex === undefined) return;
+        if (!messageContextsEqual(context, this._liveState.selectedMessageContext)) return;
 
         const eventsResponse = await this.sendRequest({
             kind: "chatEvents",
@@ -3003,7 +3003,14 @@ export class OpenChat extends OpenChatAgentWorker {
         for (const event of newEvents) {
             if (event.event.kind === "message") {
                 const { messageIndex, messageId } = event.event;
-                failedMessagesStore.delete(context, messageId);
+                if (failedMessagesStore.delete(context, messageId)) {
+                    this.sendRequest({
+                        kind: "deleteFailedMessage",
+                        chatId,
+                        messageId,
+                        threadRootMessageIndex,
+                    });
+                }
                 if (unconfirmed.delete(context, messageId)) {
                     messagesRead.confirmMessage(context, messageIndex, messageId);
                 }
diff --git a/frontend/openchat-client/src/stores/dataByMessageContextFactory.ts b/frontend/openchat-client/src/stores/dataByMessageContextFactory.ts
index bf38773911..39c1c45926 100644
--- a/frontend/openchat-client/src/stores/dataByMessageContextFactory.ts
+++ b/frontend/openchat-client/src/stores/dataByMessageContextFactory.ts
@@ -48,5 +48,6 @@ export function createMessageContextSpecificObjectStore<T>(init: () => T) {
         },
         clear: (newValue?: MessageContextMap<T>): void =>
             store.set(newValue ?? new MessageContextMap<T>()),
+        size: (): number => storeValue.size,
     };
 }
diff --git a/frontend/openchat-client/src/stores/unconfirmed.ts b/frontend/openchat-client/src/stores/unconfirmed.ts
index 9ffb8c4703..22006b397b 100644
--- a/frontend/openchat-client/src/stores/unconfirmed.ts
+++ b/frontend/openchat-client/src/stores/unconfirmed.ts
@@ -1,6 +1,11 @@
 import { writable } from "svelte/store";
 import { createSetStore } from "./setStore";
-import { type EventWrapper, type Message, type MessageContext, MessageContextMap } from "openchat-shared";
+import {
+    type EventWrapper,
+    type Message,
+    type MessageContext,
+    MessageContextMap,
+} from "openchat-shared";
 
 export type UnconfirmedState = {
     messages: EventWrapper<Message>[];
@@ -28,7 +33,7 @@ function createUnconfirmedStore() {
                     return applyUpdateToState(
                         result,
                         key,
-                        removeWhere(messages, (m) => m.timestamp < oneMinuteAgo)
+                        removeWhere(messages, (m) => m.timestamp < oneMinuteAgo),
                     );
                 }, new MessageContextMap<UnconfirmedState>());
             });
@@ -37,7 +42,7 @@ function createUnconfirmedStore() {
 
     function removeWhere(
         messages: EventWrapper<Message>[],
-        predicate: (message: EventWrapper<Message>) => boolean
+        predicate: (message: EventWrapper<Message>) => boolean,
     ): EventWrapper<Message>[] {
         return messages.filter((m) => {
             if (predicate(m)) {
@@ -51,7 +56,7 @@ function createUnconfirmedStore() {
     function applyUpdateToState(
         state: UnconfirmedMessages,
         keyUpdated: MessageContext,
-        messages: EventWrapper<Message>[]
+        messages: EventWrapper<Message>[],
     ): UnconfirmedMessages {
         if (messages.length === 0) {
             state.delete(keyUpdated);
@@ -86,7 +91,7 @@ function createUnconfirmedStore() {
                 store.update((state) => {
                     const messages = removeWhere(
                         state.get(key)?.messages ?? [],
-                        (m) => m.event.messageId === messageId
+                        (m) => m.event.messageId === messageId,
                     );
                     return applyUpdateToState(state, key, messages);
                 });
diff --git a/frontend/openchat-client/src/utils/chat.ts b/frontend/openchat-client/src/utils/chat.ts
index 974fd83f04..ae277e9283 100644
--- a/frontend/openchat-client/src/utils/chat.ts
+++ b/frontend/openchat-client/src/utils/chat.ts
@@ -454,11 +454,17 @@ export function mergeUnconfirmedIntoSummary(
         const senderBlocked = blockedUsers.has(latestMessage.event.sender);
 
         // Don't hide the sender's own messages
-        const failedMessageFilter = latestMessage.event.sender !== currentUserId 
-            ? doesMessageFailFilter(latestMessage.event, messageFilters) !== undefined 
-            : false;
+        const failedMessageFilter =
+            latestMessage.event.sender !== currentUserId
+                ? doesMessageFailFilter(latestMessage.event, messageFilters) !== undefined
+                : false;
 
-        if (updates !== undefined || translation !== undefined || senderBlocked || failedMessageFilter) {
+        if (
+            updates !== undefined ||
+            translation !== undefined ||
+            senderBlocked ||
+            failedMessageFilter
+        ) {
             latestMessage = {
                 ...latestMessage,
                 event: mergeLocalUpdates(
@@ -470,7 +476,7 @@ export function mergeUnconfirmedIntoSummary(
                     undefined,
                     senderBlocked,
                     false,
-                    failedMessageFilter
+                    failedMessageFilter,
                 ),
             };
         }
@@ -1254,11 +1260,13 @@ export function mergeEventsAndLocalUpdates(
 ): EventWrapper<ChatEvent>[] {
     const eventIndexes = new DRange();
     eventIndexes.add(expiredEventRanges);
+    const confirmedMessageIds = new Set<bigint>();
 
     function processEvent(e: EventWrapper<ChatEvent>): EventWrapper<ChatEvent> {
         eventIndexes.add(e.index);
 
         if (e.event.kind === "message") {
+            confirmedMessageIds.add(e.event.messageId);
             const updates = localUpdates.get(e.event.messageId);
             const translation = translations.get(e.event.messageId);
 
@@ -1288,10 +1296,11 @@ export function mergeEventsAndLocalUpdates(
                 blockedUsers.has(e.event.repliesTo.senderId);
 
             // Don't hide the sender's own messages
-            const failedMessageFilter = e.event.sender !== currentUserId 
-                ? doesMessageFailFilter(e.event, messageFilters) !== undefined 
-                : false;
-    
+            const failedMessageFilter =
+                e.event.sender !== currentUserId
+                    ? doesMessageFailFilter(e.event, messageFilters) !== undefined
+                    : false;
+
             if (
                 updates !== undefined ||
                 replyContextUpdates !== undefined ||
@@ -1299,7 +1308,7 @@ export function mergeEventsAndLocalUpdates(
                 translation !== undefined ||
                 replyTranslation !== undefined ||
                 senderBlocked ||
-                repliesToSenderBlocked || 
+                repliesToSenderBlocked ||
                 failedMessageFilter
             ) {
                 return {
@@ -1312,8 +1321,8 @@ export function mergeEventsAndLocalUpdates(
                         translation,
                         replyTranslation,
                         senderBlocked,
-                        repliesToSenderBlocked,   
-                        failedMessageFilter,                     
+                        repliesToSenderBlocked,
+                        failedMessageFilter,
                     ),
                 };
             }
@@ -1330,10 +1339,11 @@ export function mergeEventsAndLocalUpdates(
             // Only include unconfirmed events that are either contiguous with the loaded confirmed events, or are the
             // first events in a new chat
             if (
-                (eventIndexes.length === 0 && message.index <= 1) ||
-                eventIndexes
-                    .subranges()
-                    .some((s) => s.low - 1 <= message.index && message.index <= s.high + 1)
+                !confirmedMessageIds.has(message.event.messageId) &&
+                ((eventIndexes.length === 0 && message.index <= 1) ||
+                    eventIndexes
+                        .subranges()
+                        .some((s) => s.low - 1 <= message.index && message.index <= s.high + 1))
             ) {
                 merged.push(processEvent(message));
                 anyAdded = true;
@@ -1347,7 +1357,10 @@ export function mergeEventsAndLocalUpdates(
     return merged;
 }
 
-export function doesMessageFailFilter(message: Message, filters: MessageFilter[]): bigint | undefined {
+export function doesMessageFailFilter(
+    message: Message,
+    filters: MessageFilter[],
+): bigint | undefined {
     const text = getContentAsText(message.content);
 
     if (text !== undefined) {
@@ -1368,7 +1381,7 @@ function mergeLocalUpdates(
     replyTranslation: string | undefined,
     senderBlocked: boolean,
     repliesToSenderBlocked: boolean,
-    failedMessageFilter: boolean
+    failedMessageFilter: boolean,
 ): Message {
     if (localUpdates?.deleted !== undefined) {
         return {
diff --git a/frontend/openchat-shared/src/utils/map.ts b/frontend/openchat-shared/src/utils/map.ts
index 76ce581594..42b8b41c9e 100644
--- a/frontend/openchat-shared/src/utils/map.ts
+++ b/frontend/openchat-shared/src/utils/map.ts
@@ -64,6 +64,7 @@ export class SafeMap<K, V> {
     }
 
     delete(key: K): boolean {
+        if (this._map.size === 0) return false;
         return this._map.delete(this.toString(key));
     }
     forEach(callbackfn: (value: V, key: K) => void): void {
diff --git a/rust-toolchain.toml b/rust-toolchain.toml
index e3175a8287..5453d3a1bc 100644
--- a/rust-toolchain.toml
+++ b/rust-toolchain.toml
@@ -1,3 +1,3 @@
 [toolchain]
-channel = "1.73.0"
+channel = "1.75.0"
 targets = ["wasm32-unknown-unknown"]
\ No newline at end of file
diff --git a/scripts/download-canister-wasm.sh b/scripts/download-canister-wasm.sh
index ceb8c9f0a8..025d7a5ef1 100755
--- a/scripts/download-canister-wasm.sh
+++ b/scripts/download-canister-wasm.sh
@@ -15,21 +15,7 @@ then
   COMMIT_ID=$(jq -r .$CANISTER_NAME ./canister_commit_ids.json)
 elif [[ $WASM_SRC =~ ^v[0-9]+\.[0-9]+\.[0-9]+ ]]
 then
-  git fetch -tfq origin master
-  if [[ $(git tag -l $WASM_SRC) ]]
-  then
-    RELEASE_TAG_ID=$WASM_SRC
-  else
-    RELEASE_TAG_ID=$(git tag -l "$WASM_SRC-*")
-  fi
-
-  CHILD_COMMIT_ID=$(git rev-list --ancestry-path $RELEASE_TAG_ID..HEAD | tail -1)
-  if [[ -z $CHILD_COMMIT_ID ]]
-  then
-    CANISTER_TAG_ID=$(git tag -l --sort=-version:refname "*-$CANISTER_NAME" | head -1)
-  else
-    CANISTER_TAG_ID=$(git tag -l --no-contains $CHILD_COMMIT_ID --sort=-version:refname "*-$CANISTER_NAME" | head -1)
-  fi
+  CANISTER_TAG_ID=$(./scripts/get-canister-version.sh $CANISTER_NAME $WASM_SRC)
 
   if [[ -z $CANISTER_TAG_ID ]]
   then
diff --git a/scripts/get-canister-version.sh b/scripts/get-canister-version.sh
new file mode 100755
index 0000000000..b214cb3749
--- /dev/null
+++ b/scripts/get-canister-version.sh
@@ -0,0 +1,64 @@
+#!/bin/bash
+
+# This script finds the first canister release version that is lower than or equal to the tag passed in.
+# eg. `./get-canister-version.sh user v2.0.900-market-maker` outputs `v2.0.890-user`
+
+SCRIPT=$(readlink -f "$0")
+SCRIPT_DIR=$(dirname "$SCRIPT")
+cd $SCRIPT_DIR/..
+
+CANISTER_NAME=$1
+TAG=$2
+
+MAX_VERSION=${TAG/#v}
+MAX_VERSION=(${MAX_VERSION//-/ })
+
+git fetch -tfq origin master
+
+# Taken from https://stackoverflow.com/a/4025065
+vercomp () {
+    if [[ $1 == $2 ]]
+    then
+        return 0
+    fi
+    local IFS=.
+    local i ver1=($1) ver2=($2)
+    # fill empty fields in ver1 with zeros
+    for ((i=${#ver1[@]}; i<${#ver2[@]}; i++))
+    do
+        ver1[i]=0
+    done
+    for ((i=0; i<${#ver1[@]}; i++))
+    do
+        if [[ -z ${ver2[i]} ]]
+        then
+            # fill empty fields in ver2 with zeros
+            ver2[i]=0
+        fi
+        if ((10#${ver1[i]} > 10#${ver2[i]}))
+        then
+            return 1
+        fi
+        if ((10#${ver1[i]} < 10#${ver2[i]}))
+        then
+            return 2
+        fi
+    done
+    return 0
+}
+
+for TAG in $(git tag -l --sort=-version:refname "*-$CANISTER_NAME")
+do
+    VERSION=${TAG/#v}
+    VERSION=(${VERSION//-/ })
+
+    vercomp $MAX_VERSION $VERSION
+
+    if [[ $? -le 1 ]]
+    then
+        echo $TAG
+        exit
+    fi
+done
+
+