diff --git a/src/components/Banner.astro b/src/components/Banner.astro
index 4125084..3923440 100644
--- a/src/components/Banner.astro
+++ b/src/components/Banner.astro
@@ -1,26 +1,36 @@
 ---
 // src/components/Banner.astro
 import "../styles/components/Banner.css"
-
-const API_BASE = 'https://cms.gallus-pub.ch';
-
-let banner = null;
-
-try {
-  const response = await fetch(`${API_BASE}/api/banners/active`);
-  if (response.ok) {
-    const data = await response.json();
-    banner = data.banner;
-  }
-} catch (error) {
-  console.error('Failed to fetch banner:', error);
-}
 ---
 
-{banner && (
-  <div class="banner-wrapper">
-    <div class="banner container">
-      <p>{banner.text}</p>
-    </div>
-  </div>
-)}
+<div id="banner-container"></div>
+
+<script>
+  const API_BASE = 'https://cms.gallus-pub.ch';
+
+  async function loadBanner() {
+    try {
+      const response = await fetch(`${API_BASE}/api/banners/active`);
+      if (response.ok) {
+        const data = await response.json();
+        if (data.banner) {
+          const container = document.getElementById('banner-container');
+          if (container) {
+            container.innerHTML = `
+              <div class="banner-wrapper">
+                <div class="banner container">
+                  <p>${data.banner.text}</p>
+                </div>
+              </div>
+            `;
+          }
+        }
+      }
+    } catch (error) {
+      console.error('Failed to fetch banner:', error);
+    }
+  }
+
+  // Load banner when page loads
+  loadBanner();
+</script>