diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 72e38d9..3389475 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -7,7 +7,7 @@
 	<div id="message-box">
 		<form id="message-form" @submit="sendMessage">
 			<input v-model="messageInput" type="text" name="message-input" id="message-box-input" autocomplete="off">
-			<button type="submit">
+			<button id="submit-button" type="submit">
 				<Icon name="lucide:send" />
 			</button>
 		</form>
@@ -139,4 +139,14 @@ onMounted(async () => {
 	gap: 1dvh;
 }
 
+#submit-button {
+	background-color: inherit;
+	border: none;
+	color: white;
+}
+
+#submit-button:hover {
+	background-color: rgb(40, 40, 40);
+}
+
 </style>
\ No newline at end of file