diff --git a/packages/frontend/src/pages/messaging/messaging-room.form.vue b/packages/frontend/src/pages/messaging/messaging-room.form.vue
index d375309f45..987c01449f 100644
--- a/packages/frontend/src/pages/messaging/messaging-room.form.vue
+++ b/packages/frontend/src/pages/messaging/messaging-room.form.vue
@@ -1,30 +1,30 @@
 <template>
 <div
-	:class="$style['root']"
+	:class="$style.root"
 	@dragover.stop="onDragover"
 	@drop.stop="onDrop"
 >
 	<textarea
-		:class="$style['textarea']"
-		class="_acrylic"
 		ref="textEl"
 		v-model="text"
+		:class="$style.textarea"
+		class="_acrylic"
 		:placeholder="i18n.ts.inputMessageHere"
 		@keydown="onKeydown"
 		@compositionupdate="onCompositionUpdate"
 		@paste="onPaste"
 	></textarea>
-	<footer :class="$style['footer']">
-		<div v-if="file" :class="$style['file']" @click="file = null">{{ file.name }}</div>
-		<div :class="$style['buttons']">
-			<button class="_button" :class="$style['button']" @click="chooseFile"><i class="ti ti-photo-plus"></i></button>
-			<button class="_button" :class="$style['button']" @click="insertEmoji"><i class="ti ti-mood-happy"></i></button>
-			<button class="_button" :class="[$style['button'], $style['send']]" :disabled="!canSend || sending" :title="i18n.ts.send" @click="send">
+	<footer :class="$style.footer">
+		<div v-if="file" :class="$style.file" @click="file = null">{{ file.name }}</div>
+		<div :class="$style.buttons">
+			<button class="_button" :class="$style.button" @click="chooseFile"><i class="ti ti-photo-plus"></i></button>
+			<button class="_button" :class="$style.button" @click="insertEmoji"><i class="ti ti-mood-happy"></i></button>
+			<button class="_button" :class="[$style.button, $style.send]" :disabled="!canSend || sending" :title="i18n.ts.send" @click="send">
 				<template v-if="!sending"><i class="ti ti-send"></i></template><template v-if="sending"><MkLoading :em="true"/></template>
 			</button>
 		</div>
 	</footer>
-	<input :class="$style['file-input']" ref="fileEl" type="file" @change="onChangeFile"/>
+	<input ref="fileEl" :class="$style.fileInput" type="file" @change="onChangeFile"/>
 </div>
 </template>
 
@@ -32,7 +32,7 @@
 import { onMounted, watch } from 'vue';
 import * as Misskey from 'misskey-js';
 import autosize from 'autosize';
-//import insertTextAtCursor from 'insert-text-at-cursor';
+import insertTextAtCursor from 'insert-text-at-cursor';
 import { throttle } from 'throttle-debounce';
 import { formatTimeString } from '@/scripts/format-time-string';
 import { selectFile } from '@/scripts/select-file';
@@ -40,7 +40,7 @@ import * as os from '@/os';
 import { useStream } from '@/stream';
 import { defaultStore } from '@/store';
 import { i18n } from '@/i18n';
-//import { Autocomplete } from '@/scripts/autocomplete';
+import { Autocomplete } from '@/scripts/autocomplete';
 import { uploadFile } from '@/scripts/upload';
 import { miLocalStorage } from '@/local-storage';
 import MkLoading from '@/components/global/MkLoading.vue';
@@ -353,6 +353,7 @@ defineExpose({
 		transition: color 0s ease;
 	}
 }
+
 .send {
 	margin-left: auto;
 	color: var(--accent);
@@ -367,7 +368,7 @@ defineExpose({
 	}
 }
 
-.file-input {
+.fileInput {
 	display: none;
 }
 </style>
diff --git a/packages/frontend/src/pages/messaging/messaging-room.vue b/packages/frontend/src/pages/messaging/messaging-room.vue
index c5e3a7ce78..5a7ad0db26 100644
--- a/packages/frontend/src/pages/messaging/messaging-room.vue
+++ b/packages/frontend/src/pages/messaging/messaging-room.vue
@@ -5,11 +5,11 @@
 	</template>
 	<div
 		ref="rootEl"
-		:class="$style['root']"
+		:class="$style.root"
 		@dragover.prevent.stop="onDragover"
 		@drop.prevent.stop="onDrop"
 	>
-		<div :class="$style['body']">
+		<div :class="$style.body">
 			<MkPagination v-if="pagination" ref="pagingComponent" :key="userAcct || groupId" :pagination="pagination">
 				<template #empty>
 					<div class="_fullinfo">
@@ -21,7 +21,7 @@
 					<MkDateSeparatedList
 						v-if="messages.length > 0"
 						v-slot="{ item: message }"
-						:class="{ [$style['messages']]: true, 'deny-move-transition': pFetching }"
+						:class="{ [$style.messages]: true, 'deny-move-transition': pFetching }"
 						:items="messages"
 						direction="up"
 						reversed
@@ -31,23 +31,23 @@
 				</template>
 			</MkPagination>
 		</div>
-		<footer :class="$style['footer']">
-			<div v-if="typers.length > 0" :class="$style['typers']">
+		<footer :class="$style.footer">
+			<div v-if="typers.length > 0" :class="$style.typers">
 				<I18n :src="i18n.ts.typingUsers" textTag="span">
 					<template #users>
-						<b v-for="typer in typers" :key="typer.id" :class="$style['user']">{{ typer.username }}</b>
+						<b v-for="typer in typers" :key="typer.id" :class="$style.user">{{ typer.username }}</b>
 					</template>
 				</I18n>
 				<MkEllipsis/>
 			</div>
 			<Transition :name="animation ? 'fade' : ''">
-				<div v-show="showIndicator" :class="$style['new-message']">
-					<button class="_buttonPrimary" :class="$style['new-message-button']" @click="onIndicatorClick">
-						<i class="ti ti-circle-arrow-down-filled" :class="$style['new-message-icon']"></i>{{ i18n.ts.newMessageExists }}
+				<div v-show="showIndicator" :class="$style.newMessage">
+					<button class="_buttonPrimary" :class="$style.newMessageButton" @click="onIndicatorClick">
+						<i class="ti ti-circle-arrow-down-filled" :class="$style.newMessageIcon"></i>{{ i18n.ts.newMessageExists }}
 					</button>
 				</div>
 			</Transition>
-			<XForm v-if="!fetching" ref="formEl" :user="user" :group="group" :class="$style['form']"/>
+			<XForm v-if="!fetching" ref="formEl" :user="user" :group="group" :class="$style.form"/>
 		</footer>
 	</div>
 </MkStickyContainer>
@@ -315,7 +315,7 @@ definePageMetadata(computed(() => !fetching ? user ? {
 
 <style lang="scss" module>
 .root {
-	display: content;
+	display: contents;
 }
 
 .body {
@@ -330,12 +330,15 @@ definePageMetadata(computed(() => !fetching ? user ? {
 	color: #fff;
 	background: rgba(#000, 0.3);
 	border-radius: 12px;
+
 	&:hover {
 		background: rgba(#000, 0.4);
 	}
+
 	&:active {
 		background: rgba(#000, 0.5);
 	}
+
 	> i {
 		margin-right: 4px;
 	}
@@ -361,13 +364,13 @@ definePageMetadata(computed(() => !fetching ? user ? {
 	bottom: var(--minBottomSpacing);
 }
 
-.new-message {
+.newMessage {
 	width: 100%;
 	padding-bottom: 8px;
 	text-align: center;
 }
 
-.new-message-button {
+.newMessageButton {
 	display: inline-block;
 	margin: 0;
 	padding: 0 12px;
@@ -376,7 +379,7 @@ definePageMetadata(computed(() => !fetching ? user ? {
 	border-radius: 16px;
 }
 
-.new-message-icon {
+.newMessageIcon {
 	display: inline-block;
 	margin-right: 8px;
 }