diff --git a/components/Message.vue b/components/Message.vue
index ed32c50..63cccd6 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -284,3 +284,11 @@ function getDayDifference(date1: Date, date2: Date) {
 	padding-left: 1em;
 }
 </style>
+
+<style>
+
+.replying-to {
+	background-color: var(--primary-highlighted-color);
+}
+
+</style>
diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 17b4a3e..e81d33d 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -221,6 +221,10 @@ function sendMessage(e: Event) {
 		if (messageReply && messageReply.dataset.messageId) {
 			console.log("[MSG] message is a reply");
 			message.reply_to = messageReply.dataset.messageId;
+			const replyToMessage = document.querySelector(`.message[data-message-id='${message.reply_to}']`);
+			if (replyToMessage) {
+				replyToMessage.classList.remove("replying-to");
+			}
 		}
 
 		console.log("[MSG] sent message:", message);
diff --git a/utils/replyToMessage.ts b/utils/replyToMessage.ts
index 8ee0c28..b2b31a8 100644
--- a/utils/replyToMessage.ts
+++ b/utils/replyToMessage.ts
@@ -10,5 +10,9 @@ export default (element: HTMLDivElement, props: MessageProps) => {
 		const messageReply = h(MessageReply, { author: getDisplayName(props.author), text: props.text || "", id: props.message.uuid, replyId: props.replyMessage?.uuid || element.dataset.messageId!, maxWidth: "full" });
 		messageBox.prepend(div);
 		render(messageReply, div);
+		const message = document.querySelector(`.message[data-message-id='${props.message.uuid}']`);
+		if (message) {
+			message.classList.add("replying-to");
+		}
 	}
 }