diff --git a/src/lib/components/organisms/NavBar.svelte b/src/lib/components/organisms/NavBar.svelte
index b5205f3..004fb91 100644
--- a/src/lib/components/organisms/NavBar.svelte
+++ b/src/lib/components/organisms/NavBar.svelte
@@ -4,13 +4,23 @@
 	import api from '$api';
 </script>
 
-{#await api.general.ping() then apiUp}
-	{#if !apiUp}
-		<Banner level="caution" permanent>
-			The API is currently unresponsive and some services may not work correctly.
-			{#await api.general.getAbout() then data}
-				Check the <Button type="text" href={data.status}>status page</Button> for updates.
-			{/await}
-		</Banner>
-	{/if}
-{/await}
+<!-- make the banner a snippet to remove duplicate code -->
+{#snippet apiDownBanner()}
+	<Banner level="caution" permanent>
+		The API is currently unresponsive and some services may not work correctly.
+		{#await api.general.getAbout() then data}
+			Check the <Button type="text" href={data.status}>status page</Button> for updates.
+		{/await}
+	</Banner>
+{/snippet}
+
+<div class="nav-container">
+	<!-- whether the api doesn't return 204 or the request itself fails, show banner -->
+	{#await api.general.ping() then apiUp}
+		{#if !apiUp}
+			{@render apiDownBanner()}
+		{/if}
+	{:catch _}
+		{@render apiDownBanner()}
+	{/await}
+</div>