diff --git a/components/Message.vue b/components/Message.vue
index bf85a17..32162c1 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -18,7 +18,7 @@
 			</div>
 		</div>
 	</div>
-	<div v-else ref="messageElement" class="message compact-message">
+	<div v-else ref="messageElement" class="message grouped-message">
 		<div class="left-column">
 			<div>
 				<span :class="{ 'invisible': dateHidden }" class="message-date" :title="date.toString()">
@@ -42,7 +42,7 @@ const props = defineProps<{
 	text: string,
 	timestamp: number,
 	format: "12" | "24",
-	type: "normal" | "compact",
+	type: "normal" | "grouped",
 	marginBottom: boolean
 }>();
 
diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 7d3520c..1688f6d 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -27,12 +27,13 @@ import scrollToBottom from '~/utils/scrollToBottom';
 const props = defineProps<{ channelUrl: string, amount?: number, offset?: number }>();
 
 const messageTimestamps = ref<Record<string, number>>({});
-const messagesType = ref<Record<string, "normal" | "compact">>({});
+const messagesType = ref<Record<string, "normal" | "grouped">>({});
 
 const messagesRes: MessageResponse[] | undefined = await fetchWithApi(
 	`${props.channelUrl}/messages`,
 	{ query: { "amount": props.amount ?? 100, "offset": props.offset ?? 0 } }
 );
+
 if (messagesRes) {
 	messagesRes.reverse();
 	console.log("messages res:", messagesRes.map(msg => msg.message));
@@ -77,7 +78,7 @@ if (messagesRes) {
 			continue;
 		}
 		console.log("RETURNING " + lessThanMax.toString().toUpperCase());
-		messagesType.value[message.uuid] = "compact";
+		messagesType.value[message.uuid] = "grouped";
 	}
 }