diff --git a/app/app/globals.css b/app/app/globals.css
index 1db8c24..722706c 100644
--- a/app/app/globals.css
+++ b/app/app/globals.css
@@ -304,6 +304,24 @@ pre {
   padding: 1rem 0;
 }
 
+.banner-offline {
+  background: #fef2f2;
+  border: 1px solid #fca5a5;
+  color: #991b1b;
+  border-radius: 8px;
+  padding: 0.75rem 1rem;
+  margin-bottom: 1rem;
+  font-weight: 500;
+}
+
+@media (prefers-color-scheme: dark) {
+  .banner-offline {
+    background: #450a0a;
+    border-color: #7f1d1d;
+    color: #fca5a5;
+  }
+}
+
 @media (max-width: 640px) {
   main {
     padding: 1rem 0.75rem 3rem;
diff --git a/app/app/page.tsx b/app/app/page.tsx
index 47b6389..73060f0 100644
--- a/app/app/page.tsx
+++ b/app/app/page.tsx
@@ -69,7 +69,12 @@ export default function HomePage() {
   const sourceRef = useRef<HTMLTextAreaElement>(null);
   const questionRef = useRef<HTMLTextAreaElement>(null);
 
+  const [apiOnline, setApiOnline] = useState(true);
+
   useEffect(() => {
+    fetch(ENDPOINT.health)
+      .then((res) => setApiOnline(res.ok))
+      .catch(() => setApiOnline(false));
     void refreshAll();
   }, []);
 
@@ -166,6 +171,11 @@ export default function HomePage() {
 
   return (
     <main>
+      {!apiOnline && (
+        <p className="banner-offline" role="alert">
+          API 서버에 연결할 수 없습니다. 일부 기능이 제한됩니다.
+        </p>
+      )}
       <h1 id="title">Knowledge Copilot</h1>
       <p className="subtitle">RAG, 액션형 AI, API 로그 추적까지 포함한 포트폴리오 프로젝트</p>