diff --git a/domme-converters/index.html b/domme-converters/index.html
index b3565ea..c89af7a 100644
--- a/domme-converters/index.html
+++ b/domme-converters/index.html
@@ -1,8 +1,9 @@
 <!DOCTYPE html>
-<html lang="nl">
+<html lang="nl" class="bg-background">
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<meta name="theme-color" content="#14181f" />
 <title>Converterland — Adapters en signaalconverters</title>
 <meta name="description" content="Parodie-webshop voor onmogelijke signaalconverters. Geen echte producten, geen betalingen, geen verzending." />
 <link rel="stylesheet" href="assets/css/styles.css" />
@@ -11,69 +12,16 @@
 
 <div class="notice">Demonstratie- en parodiewinkel. Producten zijn fictief. Er worden geen betalingen verwerkt en geen bestellingen verzonden.</div>
 
-<header>
-  <div class="container nav">
-    <div class="brand">
-      <span class="mark">CL</span>
-      <span class="name">Converterland<span>Signaalconversie sinds nooit</span></span>
-    </div>
-    <nav class="nav-links">
-      <a href="#catalog">Catalogus</a>
-      <a href="#specs">Specificaties</a>
-      <a href="#support">Support</a>
-    </nav>
-    <button class="cart-btn" id="openCart" aria-label="Winkelmandje openen">
-      Mandje
-      <span class="cart-count" id="cartCount">0</span>
-    </button>
-  </div>
-</header>
+<!-- Herbruikbare header (per route gerenderd voor de actieve-link-markering) -->
+<div id="site-header"></div>
 
-<section class="hero">
-  <div class="container hero-inner">
-    <div>
-      <span class="eyebrow">Universele signaalconversie</span>
-      <h1>Elk signaal naar elk medium. Theoretisch.</h1>
-      <p>
-        Converterland levert adapters voor verbindingen die niet bestaan en
-        problemen die u niet heeft. Een complete catalogus aan fictieve
-        converters, professioneel gepresenteerd en volledig onbruikbaar.
-      </p>
-      <div class="hero-actions">
-        <a href="#catalog" class="btn btn-primary">Bekijk catalogus</a>
-        <a href="#specs" class="btn btn-ghost">Technische specificaties</a>
-      </div>
-    </div>
-    <div class="hero-panel" id="specs">
-      <div class="spec-row"><span class="k">Ondersteunde signalen</span><span class="v">&infin;</span></div>
-      <div class="spec-row"><span class="k">Gemiddelde latency</span><span class="v">3 werkdagen</span></div>
-      <div class="spec-row"><span class="k">Compatibiliteit</span><span class="v">0 / 0</span></div>
-      <div class="spec-row"><span class="k">Garantie</span><span class="v">geen</span></div>
-      <div class="spec-row"><span class="k">Retourtermijn</span><span class="v">n.v.t.</span></div>
-    </div>
-  </div>
-</section>
+<!-- Hier rendert de router de actieve pagina -->
+<div id="app"></div>
 
-<section class="trust">
-  <div class="container trust-inner">
-    <div class="trust-item"><div class="t">Niet op voorraad</div><div class="d">Elk product, altijd.</div></div>
-    <div class="trust-item"><div class="t">Geen verzendkosten</div><div class="d">Want geen verzending.</div></div>
-    <div class="trust-item"><div class="t">Veilig afrekenen</div><div class="d">Er gebeurt niets.</div></div>
-    <div class="trust-item"><div class="t">Support 0/7</div><div class="d">Wij nemen niet op.</div></div>
-  </div>
-</section>
-
-<main class="catalog container" id="catalog">
-  <div class="section-head">
-    <div>
-      <h2>Catalogus</h2>
-      <p id="productCount"></p>
-    </div>
-    <div class="filters" id="filters"></div>
-  </div>
-  <div class="grid" id="grid"></div>
-</main>
+<!-- Herbruikbare footer (eenmalig gerenderd) -->
+<div id="site-footer"></div>
 
+<!-- Globale UI: winkelmandje-lade -->
 <div class="overlay" id="overlay"></div>
 <aside class="drawer" id="drawer" aria-label="Winkelmandje">
   <div class="drawer-head">
@@ -89,55 +37,23 @@
   </div>
 </aside>
 
+<!-- Globale UI: afrekenmodal -->
 <div class="modal-wrap" id="modalWrap">
   <div class="modal" id="modalContent"></div>
 </div>
 
+<!-- Globale UI: toast -->
 <div class="toast" id="toast" role="status" aria-live="polite"></div>
 
-<footer id="support">
-  <div class="container">
-    <div class="foot-grid">
-      <div class="foot-about">
-        <div class="brand">
-          <span class="mark">CL</span>
-          <span class="name">Converterland</span>
-        </div>
-        <p>Fictieve signaalconverters voor de moderne onzin-infrastructuur. Een parodieproject, geen echte handelsonderneming.</p>
-      </div>
-      <div>
-        <h4>Producten</h4>
-        <ul>
-          <li><a href="#catalog">Catalogus</a></li>
-          <li><a href="#specs">Specificaties</a></li>
-          <li><a href="#catalog">Aanbiedingen</a></li>
-        </ul>
-      </div>
-      <div>
-        <h4>Bedrijf</h4>
-        <ul>
-          <li><a href="#support">Over ons</a></li>
-          <li><a href="#support">Contact</a></li>
-          <li><a href="#support">Vacatures</a></li>
-        </ul>
-      </div>
-      <div>
-        <h4>Juridisch</h4>
-        <ul>
-          <li><a href="#support">Voorwaarden</a></li>
-          <li><a href="#support">Privacy</a></li>
-          <li><a href="#support">Disclaimer</a></li>
-        </ul>
-      </div>
-    </div>
-    <div class="foot-bottom">
-      <span>&copy; <span id="year"></span> Converterland. Parodie. Alle merknamen zijn fictief.</span>
-      <span>Geen rechten te ontlenen aan deze website.</span>
-    </div>
-  </div>
-</footer>
-
+<!-- Data -->
 <script src="assets/js/products.js"></script>
-<script src="assets/js/app.js"></script>
+<script src="assets/js/content.js"></script>
+<!-- Kern: helpers/componenten, store, globale UI -->
+<script src="assets/js/components.js"></script>
+<script src="assets/js/store.js"></script>
+<script src="assets/js/ui.js"></script>
+<!-- Pagina's en router -->
+<script src="assets/js/pages.js"></script>
+<script src="assets/js/router.js"></script>
 </body>
 </html>
