Index: src/views/pages/admin-settings.ejs
===================================================================
--- src/views/pages/admin-settings.ejs	(revision af5407f37e07abe61941a76c0d63d4177df70ca6)
+++ src/views/pages/admin-settings.ejs	(revision 63edb0d519500782be884d350a3d2a41569553c2)
@@ -38,5 +38,5 @@
       Hier stel je de naam en intro in. Jouw eigen Klonkt Hub blijft los bestaan onder <code>/user/</code>.
     </p>
-    <form method="post" action="/admin/settings" class="set-form">
+    <form method="post" action="/admin/settings" class="set-form" enctype="multipart/form-data">
       <label class="set-field">
         <span>Naam</span>
@@ -55,4 +55,25 @@
         <input type="text" name="hub_hero_image" maxlength="300" value="<%= hubHeroImage %>" placeholder="/media/... of https://...">
       </label>
+      <label class="set-field">
+        <span>…of upload een afbeelding <small style="font-weight:400;color:var(--ink-muted)">— jpg/png/webp/gif, max 5 MB; vervangt de URL hierboven</small></span>
+        <input type="file" name="hub_hero_file" accept="image/png,image/jpeg,image/webp,image/gif">
+      </label>
+      <label class="set-field">
+        <span>Donkere overlay <small style="font-weight:400;color:var(--ink-muted)">— maakt de hero donkerder zodat de tekst leesbaar blijft</small></span>
+        <span style="display:flex;align-items:center;gap:0.75rem">
+          <input type="range" name="hub_hero_overlay" min="0" max="100" step="5" value="<%= hubHeroOverlay %>" style="flex:1"
+            oninput="this.parentNode.querySelector('.ov-val').textContent=this.value+'%';var o=document.getElementById('hero-ov-preview');if(o)o.style.opacity=this.value/100">
+          <span class="ov-val" style="min-width:3.5ch;text-align:right;font-variant-numeric:tabular-nums"><%= hubHeroOverlay %>%</span>
+        </span>
+      </label>
+      <% if (hubHeroImage) { %>
+      <div class="set-field">
+        <span style="font-weight:400;color:var(--ink-muted);font-size:0.9rem">Voorbeeld (met overlay):</span>
+        <div style="position:relative;display:inline-block;margin-top:0.4rem;max-width:100%">
+          <img src="<%= hubHeroImage %>" alt="Hero-voorbeeld" style="display:block;max-width:100%;max-height:160px;border-radius:8px;border:1px solid var(--rule)">
+          <div id="hero-ov-preview" style="position:absolute;inset:0;background:#000;opacity:<%= (hubHeroOverlay/100).toFixed(2) %>;border-radius:8px;pointer-events:none"></div>
+        </div>
+      </div>
+      <% } %>
       <button type="submit" class="btn btn-primary">Opslaan</button>
     </form>
Index: src/views/pages/hub-home.ejs
===================================================================
--- src/views/pages/hub-home.ejs	(revision af5407f37e07abe61941a76c0d63d4177df70ca6)
+++ src/views/pages/hub-home.ejs	(revision 63edb0d519500782be884d350a3d2a41569553c2)
@@ -17,5 +17,5 @@
 
   <%# ── HERO (label) — de pagina begint hier, geen header erboven ────── %>
-  <header class="hub-hero<%= hub.heroImage ? ' has-img' : '' %>"<% if (hub.heroImage) { %> style="--hero-img:url('<%= hub.heroImage %>')"<% } %>>
+  <header class="hub-hero<%= hub.heroImage ? ' has-img' : '' %>"<% if (hub.heroImage) { %> style="--hero-img:url('<%= hub.heroImage %>'); --hero-ov:<%= ((hub.heroOverlay == null ? 45 : hub.heroOverlay)/100).toFixed(2) %>"<% } %>>
     <div class="hub-hero-inner container">
       <h1 class="hub-hero-title"><%= hub.title %></h1>
@@ -128,5 +128,5 @@
 .hub-hero.has-img {
   background:
-    linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.55) 100%),
+    linear-gradient(rgba(0,0,0,var(--hero-ov,.45)), rgba(0,0,0,var(--hero-ov,.45))),
     var(--hero-img) center / cover no-repeat;
   border-bottom: 0;