diff --git a/packages/backend/src/server/api/mastodon/ApiMastodonCompatibleService.ts b/packages/backend/src/server/api/mastodon/ApiMastodonCompatibleService.ts
index 5374f5077..e8dfe5281 100644
--- a/packages/backend/src/server/api/mastodon/ApiMastodonCompatibleService.ts
+++ b/packages/backend/src/server/api/mastodon/ApiMastodonCompatibleService.ts
@@ -76,19 +76,22 @@ export function apiMastodonCompatible(router: Router): void {
 		}
 	});
 
-	router.post<{ Params: { id: string } }>("/v1/announcements/:id/dismiss", async (ctx) => {
-		const BASE_URL = `${ctx.request.protocol}://${ctx.request.hostname}`;
-		const accessTokens = ctx.request.headers.authorization;
-		const client = getClient(BASE_URL, accessTokens);
-		try {
-			const data = await client.dismissInstanceAnnouncement(ctx.params.id);
-			ctx.body = data.data;
-		} catch (e: any) {
-			console.error(e);
-			ctx.status = 401;
-			ctx.body = e.response.data;
-		}
-	});
+	router.post<{ Params: { id: string } }>(
+		"/v1/announcements/:id/dismiss",
+		async (ctx) => {
+			const BASE_URL = `${ctx.request.protocol}://${ctx.request.hostname}`;
+			const accessTokens = ctx.request.headers.authorization;
+			const client = getClient(BASE_URL, accessTokens);
+			try {
+				const data = await client.dismissInstanceAnnouncement(ctx.params.id);
+				ctx.body = data.data;
+			} catch (e: any) {
+				console.error(e);
+				ctx.status = 401;
+				ctx.body = e.response.data;
+			}
+		},
+	);
 
 	router.get("/v1/filters", async (ctx) => {
 		const BASE_URL = `${ctx.request.protocol}://${ctx.request.hostname}`;
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index 34361ba75..771d590bb 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -1,93 +1,94 @@
 <template>
-	<MkStickyContainer>
-		<template #header
-			><MkPageHeader
-				:actions="headerActions"
-				:tabs="headerTabs"
-				:display-back-button="true"
-		/></template>
-		<MkSpacer :content-max="800" class="mk-messaging-room">
-			<div class="body">
-				<MkPagination
-					v-if="pagination"
-					ref="pagingComponent"
-					:key="userAcct || groupId"
-					:pagination="pagination"
-				>
-					<template #empty>
-						<div class="_fullinfo">
-							<img
-								src="/static-assets/badges/info.png"
-								class="_ghost"
-								alt="Info"
-							/>
-							<div>{{ i18n.ts.noMessagesYet }}</div>
-						</div>
-					</template>
-					<template
-						#default="{ items: messages, fetching: pFetching }"
+	<div
+		ref="rootEl"
+		class="_section"
+		@dragover.prevent.stop="onDragover"
+		@drop.prevent.stop="onDrop"
+	>
+		<div class="_content mk-messaging-room">
+			<MkSpacer :content-max="800">
+				<div class="body">
+					<MkPagination
+						v-if="pagination"
+						ref="pagingComponent"
+						:key="userAcct || groupId"
+						:pagination="pagination"
 					>
-						<XList
-							v-if="messages.length > 0"
-							v-slot="{ item: message }"
-							:class="{
-								messages: true,
-								'deny-move-transition': pFetching,
-							}"
-							:items="messages"
-							direction="up"
-							reversed
-						>
-							<XMessage
-								:key="message.id"
-								:message="message"
-								:is-group="group != null"
-							/>
-						</XList>
-					</template>
-				</MkPagination>
-			</div>
-			<footer>
-				<div v-if="typers.length > 0" class="typers">
-					<I18n
-						:src="i18n.ts.typingUsers"
-						text-tag="span"
-						class="users"
-					>
-						<template #users>
-							<b
-								v-for="typer in typers"
-								:key="typer.id"
-								class="user"
-								>{{ typer.username }}</b
-							>
+						<template #empty>
+							<div class="_fullinfo">
+								<img
+									src="/static-assets/badges/info.png"
+									class="_ghost"
+									alt="Info"
+								/>
+								<div>{{ i18n.ts.noMessagesYet }}</div>
+							</div>
 						</template>
-					</I18n>
-					<MkEllipsis />
-				</div>
-				<transition :name="animation ? 'fade' : ''">
-					<div v-show="showIndicator" class="new-message">
-						<button
-							class="_buttonPrimary"
-							@click="onIndicatorClick"
+						<template
+							#default="{ items: messages, fetching: pFetching }"
 						>
-							<i
-								class="fas ph-fw ph-lg ph-arrow-circle-down ph-bold ph-lg"
-							></i
-							>{{ i18n.ts.newMessageExists }}
-						</button>
+							<XList
+								v-if="messages.length > 0"
+								v-slot="{ item: message }"
+								:class="{
+									messages: true,
+									'deny-move-transition': pFetching,
+								}"
+								:items="messages"
+								direction="up"
+								reversed
+							>
+								<XMessage
+									:key="message.id"
+									:message="message"
+									:is-group="group != null"
+								/>
+							</XList>
+						</template>
+					</MkPagination>
+				</div>
+				<footer>
+					<div v-if="typers.length > 0" class="typers">
+						<I18n
+							:src="i18n.ts.typingUsers"
+							text-tag="span"
+							class="users"
+						>
+							<template #users>
+								<b
+									v-for="typer in typers"
+									:key="typer.id"
+									class="user"
+									>{{ typer.username }}</b
+								>
+							</template>
+						</I18n>
+						<MkEllipsis />
 					</div>
-				</transition>
-				<XForm
-					v-if="!fetching"
-					ref="formEl"
-					:user="user"
-					:group="group"
-					class="form"
-				/>
-			</footer>
-		</MkSpacer>
-	</MkStickyContainer>
+					<transition :name="animation ? 'fade' : ''">
+						<div v-show="showIndicator" class="new-message">
+							<button
+								class="_buttonPrimary"
+								@click="onIndicatorClick"
+							>
+								<i
+									class="fas ph-fw ph-lg ph-arrow-circle-down-bold ph-lg"
+								></i
+								>{{ i18n.ts.newMessageExists }}
+							</button>
+						</div>
+					</transition>
+					<XForm
+						v-if="!fetching"
+						ref="formEl"
+						:user="user"
+						:group="group"
+						class="form"
+					/>
+				</footer>
+			</MkSpacer>
+		</div>
+	</div>
 </template>
 
 <script lang="ts" setup>
@@ -327,12 +328,14 @@ function onVisibilitychange() {
 	}
 }
 
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
 onMounted(() => {
 	fetch();
+	definePageMetadata(
+		computed(() => ({
+			title: group != null ? group.name : user?.name,
+			icon: "ph-chats-teardrop-bold ph-lg",
+		}))
+	);
 });
 
 onBeforeUnmount(() => {
@@ -340,15 +343,6 @@ onBeforeUnmount(() => {
 	document.removeEventListener("visibilitychange", onVisibilitychange);
 	if (scrollRemove) scrollRemove();
 });
-
-await fetch();
-definePageMetadata(
-	computed(() => ({
-		title: group != null ? group.name : user?.name,
-		icon: "ph-chats-teardrop ph-bold ph-lg",
-		avatar: group != null ? null : user,
-	}))
-);
 </script>
 
 <style lang="scss" scoped>
@@ -357,6 +351,9 @@ XMessage:last-of-type {
 }
 
 .mk-messaging-room {
+	position: relative;
+	overflow: auto;
+
 	> .body {
 		.more {
 			display: block;