diff --git a/src/App.jsx b/src/App.jsx
index 34abaa3..a32c1bb 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1013,17 +1013,31 @@ function AppContent() {
     if (songOfDay.status === 'ready' || songOfDay.status === 'loading') return
 
     const controller = new AbortController()
+    let timedOut = false
+    const timeout = window.setTimeout(() => {
+      timedOut = true
+      controller.abort()
+    }, 12000)
+
     setSongOfDay({ status: 'loading', data: null, error: null })
 
     fetchJson(apiEndpoints.songOfDay, controller.signal)
       .then((data) => setSongOfDay({ status: 'ready', data, error: null }))
       .catch((error) => {
-        if (!controller.signal.aborted) {
-          setSongOfDay({ status: 'error', data: null, error: error.message })
+        if (!controller.signal.aborted || timedOut) {
+          setSongOfDay({
+            status: 'error',
+            data: null,
+            error: timedOut ? 'Song lookup timed out' : error.message,
+          })
         }
       })
+      .finally(() => window.clearTimeout(timeout))
 
-    return () => controller.abort()
+    return () => {
+      window.clearTimeout(timeout)
+      controller.abort()
+    }
   }, [route.page, songOfDay.status])
 
   useEffect(() => {