diff --git a/components/Message.vue b/components/Message.vue
index 63cccd6..2b52efa 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -126,9 +126,6 @@ onMounted(async () => {
 		}
 		if (mediaLinks.length) {
 			hasEmbed.value = true
-			setTimeout(() => {
-				scrollToBottom(document.getElementById("messages") as HTMLDivElement);
-			}, 500);
 		};
 	} catch (error) {
 		console.error(error);
diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index e81d33d..34ab214 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -1,7 +1,7 @@
 <template>
 	<div id="message-area">
 		<div id="messages" ref="messagesElement">
-			<Message v-for="(message, i) of messages" :username="getDisplayName(message.user)"
+			<Message v-for="(message, i) of messages" :username="getDisplayName(message.user)" :key="message.uuid"
 				:text="message.message" :timestamp="messageTimestamps[message.uuid]" :img="message.user.avatar"
 				:format="timeFormat" :type="messagesType[message.uuid]"
 				:margin-bottom="(messages[i + 1] && messagesType[messages[i + 1].uuid] == 'normal') ?? false"
@@ -241,12 +241,8 @@ function sendMessage(e: Event) {
 }
 
 function getReplyMessage(id: string) {
-	console.log("[REPLYMSG] id:", id);
 	const messagesValues = Object.values(messages.value);
-	console.log("[REPLYMSG] messages values:", messagesValues);
 	for (const message of messagesValues) {
-		console.log("[REPLYMSG] message:", message);
-		console.log("[REPLYMSG] IDs match?", message.uuid == id);
 		if (message.uuid == id) return message;
 	}
 }
@@ -270,21 +266,14 @@ onMounted(async () => {
 					if (fetched) return;
 					fetched = true;
 					console.log("scroll height is at 10% or less");
-					//console.log("current oldest:", currentOldestMessage);
 					const olderMessages = await fetchMessages(route.params.channelId as string, { amount, offset });
-					if (olderMessages) {
+					if (olderMessages?.length) {
 						olderMessages.reverse();
-						console.log("older messages:", olderMessages);
-						if (olderMessages.length == 0) return;
-						olderMessages.reverse();
-						for (const [i, oldMessage] of olderMessages.entries()) {
-							console.log("old message:", oldMessage);
-							messages.value.unshift(oldMessage);
-							for (const message of messages.value) {
-								groupMessage(message);
-							}
+						messages.value = [...olderMessages.map(msg => reactive(msg)), ...messages.value];
+						for (const message of messages.value) {
+							groupMessage(message);
 						}
-						offset += offset;
+						offset += amount;
 					}
 				} else {
 					fetched = false;