diff --git a/src/components/PlaybackDelayModal.tsx b/src/components/PlaybackDelayModal.tsx
index 98c528ca..57dfc4f9 100644
--- a/src/components/PlaybackDelayModal.tsx
+++ b/src/components/PlaybackDelayModal.tsx
@@ -46,7 +46,7 @@ export interface PlaybackDelayModalProps {
 }
 
 export default function PlaybackDelayModal({ open, onClose, anchorRef }: PlaybackDelayModalProps) {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const {
     isPlaying,
     currentTrack,
@@ -157,7 +157,7 @@ export default function PlaybackDelayModal({ open, onClose, anchorRef }: Playbac
   const clockFormat = useAuthStore(s => s.clockFormat);
   const previewSeconds = hoverSeconds ?? customSeconds;
   const previewAtMs = previewSeconds != null ? nowTick + previewSeconds * 1000 : null;
-  const previewClock = previewAtMs != null ? formatClockTime(previewAtMs, clockFormat) : null;
+  const previewClock = previewAtMs != null ? formatClockTime(previewAtMs, clockFormat, i18n.language) : null;
 
   if (!open) return null;
 
diff --git a/src/components/queuePanel/QueueHeader.tsx b/src/components/queuePanel/QueueHeader.tsx
index 6065ca18..101789f6 100644
--- a/src/components/queuePanel/QueueHeader.tsx
+++ b/src/components/queuePanel/QueueHeader.tsx
@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import { ChevronDown, ListMusic } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 import type { TFunction } from 'i18next';
 import { usePlayerStore } from '../../store/playerStore';
 import { useAuthStore } from '../../store/authStore';
@@ -26,6 +27,7 @@ export function QueueHeader({
   const currentTime = usePlayerStore((s) => Math.floor(s.currentTime / 30) * 30);
   const isPlaying = usePlayerStore((s) => s.isPlaying);
   const clockFormat = useAuthStore((s) => s.clockFormat);
+  const { i18n } = useTranslation();
 
   const totalSecs = useMemo(() =>
     queue.reduce((acc: number, track: Track) => acc + (track.duration || 0), 0),
@@ -42,7 +44,7 @@ export function QueueHeader({
   if (queue.length > 0) {
     if (durationMode === 'total') dur = formatLongDuration(Math.floor(totalSecs));
     else if (durationMode === 'remaining') dur = `-${formatLongDuration(Math.floor(remainingSecs))}`;
-    else dur = formatClockTime(Date.now() + remainingSecs * 1000, clockFormat);
+    else dur = formatClockTime(Date.now() + remainingSecs * 1000, clockFormat, i18n.language);
   }
 
   const nextMode: DurationMode =
diff --git a/src/utils/format/formatClockTime.ts b/src/utils/format/formatClockTime.ts
index 5d668874..41eb9672 100644
--- a/src/utils/format/formatClockTime.ts
+++ b/src/utils/format/formatClockTime.ts
@@ -2,12 +2,14 @@ import type { ClockFormat } from '../../store/authStoreTypes';
 
 /**
  * Localized wall-clock `HH:MM` for a timestamp (sleep-timer / queue-ETA labels).
- * `clockFormat` overrides the system locale's `hour12` default — pass `'auto'`
- * or omit to keep locale-driven behaviour.
+ * `clockFormat` overrides the locale's `hour12` default. `'auto'` (or omitted)
+ * defers to `locale` — pass `i18n.language` so the App's UI language picks the
+ * 12h/24h convention; the JS engine's default locale is unreliable inside
+ * WebKitGTK and often resolves to `en-US` regardless of OS `LC_TIME`.
  */
-export function formatClockTime(timestampMs: number, clockFormat?: ClockFormat): string {
+export function formatClockTime(timestampMs: number, clockFormat?: ClockFormat, locale?: string): string {
   const hour12 = clockFormat === '24h' ? false : clockFormat === '12h' ? true : undefined;
-  return new Date(timestampMs).toLocaleTimeString(undefined, {
+  return new Date(timestampMs).toLocaleTimeString(locale, {
     hour: '2-digit',
     minute: '2-digit',
     hour12,