diff --git a/package.json b/package.json
index a483affcae..3584708089 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.8-rc.3",
+	"version": "12.119.0-calc.8-rc.4",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/components/MkChatPreview.vue b/packages/client/src/components/MkChatPreview.vue
index 209f8ef1cc..19a5bf2df0 100644
--- a/packages/client/src/components/MkChatPreview.vue
+++ b/packages/client/src/components/MkChatPreview.vue
@@ -14,7 +14,7 @@
 			)}`
 	"
 >
-	<div class="message">
+	<div class="message _block">
 		<MkAvatar
 			class="avatar"
 			:user="
diff --git a/packages/client/src/pages/messaging/index.vue b/packages/client/src/pages/messaging/index.vue
index cfa9ea4c85..025bf73e77 100644
--- a/packages/client/src/pages/messaging/index.vue
+++ b/packages/client/src/pages/messaging/index.vue
@@ -14,7 +14,7 @@
 				<div class="_content yweeujhr dms">
 					<MkButton primary class="start" @click="startUser"><i class="fas fa-plus"></i> {{ i18n.ts.startMessaging }}</MkButton>
 					<MkPagination v-slot="{items}" :pagination="dmsPagination">
-						<MkChatPreview v-for="message in items" :key="message.id" class="_gap" :message="message"/>
+						<MkChatPreview v-for="message in items" :key="message.id" class="yweeujhr message _block" :message="message"/>
 					</MkPagination>
 					<div v-if="messages.length == 0" class="_fullinfo">
 						<img src="/static-assets/badges/info.png" class="_ghost" alt="Info"/>
@@ -24,10 +24,10 @@
 			</swiper-slide>
 			<swiper-slide>
 				<div class="_content yweeujhr groups">
+					<MkButton primary @click="startGroup"><i class="fas fa-plus"></i> {{ i18n.ts.startMessaging }}</MkButton>
+					<MkButton primary class="start" :to="`/my/groups`"><i class="fas fa-plus"></i> {{ i18n.ts.manageGroups }}</MkButton>
 					<MkPagination v-slot="{items}" :pagination="groupsPagination">
-						<MkButton primary @click="startGroup"><i class="fas fa-plus"></i> {{ i18n.ts.startMessaging }}</MkButton>
-						<MkButton primary class="start" :to="`/my/groups`"><i class="fas fa-plus"></i> {{ i18n.ts.manageGroups }}</MkButton>
-						<MkChatPreview v-for="message in items" :key="message.id" class="_gap" :message="message"/>
+						<MkChatPreview v-for="message in items" :key="message.id" class="yweeujhr message _block" :message="message"/>
 					</MkPagination>
 				</div>
 			</swiper-slide>
@@ -60,6 +60,10 @@ const router = useRouter();
 let messages = $ref([]);
 let connection = $ref(null);
 
+const tabs = ['dms', 'groups'];
+let tab = $ref(tabs[0]);
+watch($$(tab), () => (syncSlide(tabs.indexOf(tab))));
+
 const dmsPagination = {
 	endpoint: 'messaging/history' as const,
 	limit: 15,
@@ -75,10 +79,6 @@ const groupsPagination = {
 	},
 };
 
-const tabs = ['dms', 'groups'];
-let tab = $ref(tabs[0]);
-watch($$(tab), () => (syncSlide(tabs.indexOf(tab))));
-
 const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => [{
@@ -96,21 +96,6 @@ definePageMetadata({
 	icon: 'fas fa-comments',
 });
 
-let swiperRef = null;
-
-function setSwiperRef(swiper) {
-	swiperRef = swiper;
-	syncSlide(tabs.indexOf(tab));
-}
-
-function onSlideChange() {
-	tab = tabs[swiperRef.activeIndex];
-}
-
-function syncSlide(index) {
-	swiperRef.slideTo(index);
-}
-
 function onMessage(message) {
 	if (message.recipientId) {
 		messages = messages.filter(m => !(
@@ -184,6 +169,21 @@ onUnmounted(() => {
 	if (connection) connection.dispose();
 });
 
+let swiperRef = null;
+
+function setSwiperRef(swiper) {
+	swiperRef = swiper;
+	syncSlide(tabs.indexOf(tab));
+}
+
+function onSlideChange() {
+	tab = tabs[swiperRef.activeIndex];
+}
+
+function syncSlide(index) {
+	swiperRef.slideTo(index);
+}
+
 </script>
 
 	<style lang="scss" scoped>