diff --git a/components/Message.vue b/components/Message.vue
index a8329dd..db08258 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -46,7 +46,8 @@
 				<span class="message-date" :title="date.toString()">
 					<span v-if="getDayDifference(date, currentDate) === 1">Yesterday at</span>
 					<span v-else-if="getDayDifference(date, currentDate) > 1 ">{{ date.toLocaleDateString(undefined) }},</span>
-					{{ date.toLocaleTimeString(undefined, { timeStyle: "short" }) }}
+
+					{{ date.toLocaleTimeString(undefined, { hour12: props.format=="12", timeStyle: "short" }) }}
 				</span>
 			</div>
 			<div class="message-text" v-html="sanitized" tabindex="0"></div>
diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index b2338f5..d59b862 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -49,7 +49,7 @@ const me = await fetchWithApi("/me") as UserResponse;
 const messageTimestamps = ref<Record<string, number>>({});
 const messagesType = ref<Record<string, "normal" | "grouped">>({});
 const messageGroupingMaxDifference = useRuntimeConfig().public.messageGroupingMaxDifference
-const timeFormat = settingLoad("timeFormat") ?? "24"
+const timeFormat = getPreferredTimeFormat()
 
 const messagesRes: MessageResponse[] | undefined = await fetchWithApi(
 	`${props.channelUrl}/messages`,
diff --git a/utils/getPreferredTimeFormat.ts b/utils/getPreferredTimeFormat.ts
new file mode 100644
index 0000000..4cf03e0
--- /dev/null
+++ b/utils/getPreferredTimeFormat.ts
@@ -0,0 +1,11 @@
+export default (): "12" | "24" => {
+	const format = settingLoad("timeFormat").timeFormat ?? "auto"
+
+	if (format == "12-hour") {
+		return "12"
+	} else if (format == "24-hour") {
+		return "24"
+	}
+
+	return "24"
+}
\ No newline at end of file