Index: README.md
===================================================================
--- README.md	(revision b94c08ee93afe04552667726a69e8b5eb5629d16)
+++ README.md	(revision 8afbdd6572a947bce4726d5aa0d0aa0d6c7e5067)
@@ -1,10 +1,11 @@
-# PrutFolio v1
+# Klonkt Hub Beta
 
 Persoonlijk multi-site platform met editorial-feel content + sociale community.
 Forked van **PrutCMS v9** (PHP, file-based) naar **Node + SQLite + htmx**.
 
-> **Naam-uitleg.** "PrutCMS v9" is en blijft het file-based PHP-product. PrutFolio
-> v1 is een nieuw product met andere DNA: het is geen *publishing tool* maar een
-> *persoonlijk canvas* — content, profiel, sociale interactie en realtime in één.
+> **Naam-uitleg.** "PrutCMS v9" is en blijft het file-based PHP-product. Klonkt Hub
+> (intern pakket `prutfolio`) is een nieuw product met andere DNA: het is geen
+> *publishing tool* maar een *persoonlijk canvas* — content, profiel, sociale
+> interactie en realtime in één.
 
 ## Filosofie
Index: package.json
===================================================================
--- package.json	(revision b94c08ee93afe04552667726a69e8b5eb5629d16)
+++ package.json	(revision 8afbdd6572a947bce4726d5aa0d0aa0d6c7e5067)
@@ -2,5 +2,5 @@
   "name": "prutfolio",
   "version": "1.0.0-alpha.1",
-  "description": "PrutFolio v1 — persoonlijk multi-site platform met community, realtime, en (later) E2EE DMs. Forked van PrutCMS v9 (PHP) naar Node + SQLite + htmx.",
+  "description": "Klonkt Hub Beta — persoonlijk multi-site platform met community, realtime, en (later) E2EE DMs. Forked van PrutCMS v9 (PHP) naar Node + SQLite + htmx.",
   "type": "module",
   "main": "src/server.js",
Index: src/middleware/auth.js
===================================================================
--- src/middleware/auth.js	(revision b94c08ee93afe04552667726a69e8b5eb5629d16)
+++ src/middleware/auth.js	(revision 8afbdd6572a947bce4726d5aa0d0aa0d6c7e5067)
@@ -37,7 +37,18 @@
 }
 
+// Een 'kijker' mag ALLES bekijken (incl. Beheer) maar NIETS wijzigen. De
+// schrijf-blokkade zit in de globale guard in server.js; deze helper bepaalt
+// alleen "is dit een alleen-lezen account?". `readonly` is de legacy-vlag die
+// we nog meenemen zodat niet-gemigreerde demo-accounts geblokkeerd blijven.
+export function isViewer(user) {
+  return !!user && (user.role === 'kijker' || !!user.readonly);
+}
+
 export function requireGod(req, res, next) {
   if (!req.session?.user) return loginRedirect(req, res);
-  if (req.session.user.role !== 'god') {
+  const role = req.session.user.role;
+  // god beheert; een kijker mág het Beheer-paneel zien (alleen-lezen) — de
+  // globale guard 403't elke write, dus dit geeft enkel kijk-toegang.
+  if (role !== 'god' && role !== 'kijker') {
     return res.status(403).send('God role required');
   }
@@ -52,5 +63,5 @@
   if (!req.session?.user) return loginRedirect(req, res);
   const u = req.session.user;
-  if (u.role === 'god') return next();
+  if (u.role === 'god' || u.role === 'kijker') return next(); // kijker = alleen-lezen kijk-toegang
   const site = res.locals.site;
   if (site && site.owner_id === u.id) return next();
@@ -62,5 +73,5 @@
   if (!req.session?.user) return loginRedirect(req, res);
   const u = req.session.user;
-  if (u.role === 'god') return next();
+  if (u.role === 'god' || u.role === 'kijker') return next(); // kijker = alleen-lezen kijk-toegang
   const site = db.prepare('SELECT owner_id FROM sites WHERE slug = ?').get(req.params.slug);
   if (site && site.owner_id === u.id) return next();
Index: src/middleware/render.js
===================================================================
--- src/middleware/render.js	(revision b94c08ee93afe04552667726a69e8b5eb5629d16)
+++ src/middleware/render.js	(revision 8afbdd6572a947bce4726d5aa0d0aa0d6c7e5067)
@@ -15,4 +15,5 @@
 import db from '../config/database.js';
 import PermissionsService from '../services/PermissionsService.js';
+import { isViewer } from './auth.js';
 import { getSetting } from '../services/SettingsService.js';
 import { PLATFORMS as PLATFORMS_CATALOG } from '../services/PlatformIcons.js';
@@ -51,8 +52,14 @@
     : null;
 
+  // Kijker-modus: alles bekijken mag, niets wijzigen. Views gebruiken canMutate
+  // om schrijf-knoppen (posten, opslaan, verwijderen) te verbergen/uit te zetten.
+  const _isViewer = isViewer(_u);
+
   // Common locals
   const locals = {
     user: _u,
     userOwnsSite,
+    isViewer: _isViewer,
+    canMutate: !_isViewer,
     siteOwnerAvatar,
     site: _site,
@@ -65,5 +72,5 @@
     formatDate,
     formatDateTime,
-    pageTitle: data.pageTitle || (data.site && data.site.title) || 'PrutCMS',
+    pageTitle: data.pageTitle || (data.site && data.site.title) || 'Klonkt Hub Beta',
     bodyClass: data.bodyClass || 'on-home',
     socialDescr: data.socialDescr || '',
Index: src/routes/admin-sites.js
===================================================================
--- src/routes/admin-sites.js	(revision b94c08ee93afe04552667726a69e8b5eb5629d16)
+++ src/routes/admin-sites.js	(revision 8afbdd6572a947bce4726d5aa0d0aa0d6c7e5067)
@@ -98,5 +98,5 @@
   'auth', 'admin', 'login', 'register', 'logout', 'archive', 'search',
   'account', 'sites', 'comments', 'posts', 'media', 'audio', 'prutter',
-  'forum', 'tag', 'users', 'feed.xml', 'atom.xml', 'sitemap.xml',
+  'forum', 'tag', 'user', 'users', 'artiesten', 'feed.xml', 'atom.xml', 'sitemap.xml',
   'manifest.webmanifest', 'sw.js', 'favicon.ico', 'favicon.svg', 'assets',
 ]);
Index: src/routes/admin-users.js
===================================================================
--- src/routes/admin-users.js	(revision b94c08ee93afe04552667726a69e8b5eb5629d16)
+++ src/routes/admin-users.js	(revision 8afbdd6572a947bce4726d5aa0d0aa0d6c7e5067)
@@ -20,5 +20,8 @@
 const router = express.Router();
 
-const VALID_ROLES = new Set(['member', 'admin', 'god']);
+// 'kijker' = alleen-lezen demonstratie/audit-account: mag alles bekijken (incl.
+// Beheer), maar de globale guard blokkeert elke wijziging. Vervangt de oude
+// losse 'kijk-modus'-vlag (readonly), die nu door deze rol wordt afgedekt.
+const VALID_ROLES = new Set(['kijker', 'member', 'admin', 'god']);
 
 function godCount() {
@@ -66,21 +69,9 @@
   }
 
-  db.prepare('UPDATE users SET role = ?, updated_at = CURRENT_TIMESTAMP WHERE id = ?')
+  // readonly=0: de alleen-lezen-status zit nu volledig in de 'kijker'-rol, dus
+  // bij elke rolwijziging ruimen we de legacy-vlag op (geen dubbele bron).
+  db.prepare('UPDATE users SET role = ?, readonly = 0, updated_at = CURRENT_TIMESTAMP WHERE id = ?')
     .run(newRole, userId);
   res.redirect('/admin/users?success=' + encodeURIComponent('Role updated'));
-});
-
-// ==================== READ-ONLY (kijk-account) ====================
-router.post('/:id/readonly', requireGod, (req, res) => {
-  const target = db.prepare('SELECT id FROM users WHERE id = ?').get(req.params.id);
-  if (!target) return res.redirect('/admin/users?error=User+not+found');
-  // Niet op jezelf — voorkomt dat een god zichzelf alleen-lezen maakt en vastloopt.
-  if (target.id === req.session.user.id) {
-    return res.redirect('/admin/users?error=' + encodeURIComponent('Kan jezelf niet op alleen-lezen zetten'));
-  }
-  const ro = req.body.readonly === '1' ? 1 : 0;
-  db.prepare('UPDATE users SET readonly = ?, updated_at = CURRENT_TIMESTAMP WHERE id = ?')
-    .run(ro, req.params.id);
-  res.redirect('/admin/users?success=' + encodeURIComponent(ro ? 'Kijk-modus aan' : 'Kijk-modus uit'));
 });
 
Index: src/routes/admin.js
===================================================================
--- src/routes/admin.js	(revision b94c08ee93afe04552667726a69e8b5eb5629d16)
+++ src/routes/admin.js	(revision 8afbdd6572a947bce4726d5aa0d0aa0d6c7e5067)
@@ -16,7 +16,9 @@
   const user = req.session.user;
 
-  // Niet-god: een artiest die een eigen site bezit krijgt een "Mijn PrutFolio"-
-  // dashboard, gescopet op z'n eigen site. Bezit 'ie geen site -> geen beheer.
-  if (user.role !== 'god') {
+  // Een kijker mag het volledige (god-)Beheer alleen-lezen inzien — net als god
+  // dus, alleen schrijven is globaal geblokkeerd. Een gewone artiest die een
+  // eigen site bezit krijgt een "Mijn Klonkt Hub"-dashboard, gescopet op z'n
+  // eigen site. Bezit 'ie geen site -> geen beheer.
+  if (user.role !== 'god' && user.role !== 'kijker') {
     const mySite = db.prepare(
       'SELECT * FROM sites WHERE owner_id = ? ORDER BY created_at ASC LIMIT 1'
@@ -29,5 +31,5 @@
     };
     return renderPage(req, res, 'pages/my-site', {
-      pageTitle: 'Mijn PrutFolio',
+      pageTitle: 'Mijn Klonkt Hub',
       bodyClass: 'on-admin',
       mySite,
Index: src/routes/artists.js
===================================================================
--- src/routes/artists.js	(revision 8afbdd6572a947bce4726d5aa0d0aa0d6c7e5067)
+++ src/routes/artists.js	(revision 8afbdd6572a947bce4726d5aa0d0aa0d6c7e5067)
@@ -0,0 +1,65 @@
+/**
+ * Artiesten-directory — alleen in hub-modus.
+ *
+ * GET /artiesten?q=&page=  -> doorzoekbare, gepagineerde lijst van ALLE
+ * PrutFolio's. De hub-home toont maar een beperkte selectie; deze pagina
+ * schaalt naar honderden/duizenden artiesten via zoeken + paginering.
+ *
+ * In solo-modus bestaat er maar één site -> next() (valt door naar postsRoutes,
+ * die 'artiesten' als onbekende slug afhandelt).
+ */
+
+import express from 'express';
+import db from '../config/database.js';
+import { renderPage } from '../middleware/render.js';
+import { getTenancy } from '../services/SettingsService.js';
+
+const router = express.Router();
+
+const PER_PAGE = 24;
+
+router.get('/', (req, res, next) => {
+  if (getTenancy() !== 'hub') return next();
+
+  const q = (req.query.q || '').toString().trim().slice(0, 80);
+  let page = parseInt(req.query.page, 10);
+  if (!Number.isFinite(page) || page < 1) page = 1;
+
+  // Zoekterm tegen titel/slug/tagline (case-insensitive via LIKE; SQLite LIKE is
+  // standaard ongevoelig voor ASCII-hoofdletters). De ESCAPE '\' maakt %, _ en \
+  // in de zoekterm letterlijk (anders zouden ze als wildcards werken).
+  const where = q
+    ? "WHERE (s.title LIKE @like ESCAPE '\\' OR s.slug LIKE @like ESCAPE '\\' OR s.tagline LIKE @like ESCAPE '\\')"
+    : '';
+  const like = '%' + q.replace(/[\\%_]/g, (m) => '\\' + m) + '%';
+  const params = q ? { like } : {};
+
+  const total = db.prepare(`SELECT COUNT(*) AS c FROM sites s ${where}`)
+    .get(params).c;
+  const pages = Math.max(1, Math.ceil(total / PER_PAGE));
+  if (page > pages) page = pages;
+  const offset = (page - 1) * PER_PAGE;
+
+  const artists = db.prepare(`
+    SELECT s.slug, s.title, s.tagline, s.profile_photo, s.accent,
+           u.avatar_url AS owner_avatar,
+           (SELECT COUNT(*) FROM posts WHERE site_id = s.id AND status = 'published') AS post_count
+    FROM sites s
+    LEFT JOIN users u ON u.id = s.owner_id
+    ${where}
+    ORDER BY s.title COLLATE NOCASE ASC
+    LIMIT @limit OFFSET @offset
+  `).all({ ...params, limit: PER_PAGE, offset });
+
+  renderPage(req, res, 'pages/artists-directory', {
+    pageTitle: 'Artiesten',
+    bodyClass: 'on-hub',
+    q,
+    artists,
+    total,
+    page,
+    pages,
+  });
+});
+
+export default router;
Index: src/routes/hub.js
===================================================================
--- src/routes/hub.js	(revision b94c08ee93afe04552667726a69e8b5eb5629d16)
+++ src/routes/hub.js	(revision 8afbdd6572a947bce4726d5aa0d0aa0d6c7e5067)
@@ -35,5 +35,8 @@
   `).all();
 
-  // ALLE PrutFolio's (elke user, incl. de admin z'n eigen site) voor de roster.
+  // Uitgelichte PrutFolio's voor de home-roster: meest-actief eerst (aantal
+  // gepubliceerde posts), dan nieuwste. Beperkt tot HOME_ROSTER_LIMIT zodat de
+  // home schaalt — de volledige, doorzoekbare lijst staat op /artiesten.
+  const HOME_ROSTER_LIMIT = 24;
   const artists = db.prepare(`
     SELECT s.slug, s.title, s.tagline, s.profile_photo, s.accent,
@@ -42,6 +45,8 @@
     FROM sites s
     LEFT JOIN users u ON u.id = s.owner_id
-    ORDER BY s.created_at ASC
-  `).all();
+    ORDER BY post_count DESC, s.created_at DESC
+    LIMIT ?
+  `).all(HOME_ROSTER_LIMIT);
+  const totalArtists = db.prepare('SELECT COUNT(*) AS c FROM sites').get().c;
 
   // De hub-pagina is GENERIEK (van geen enkele user) — branding komt uit globale
@@ -60,4 +65,6 @@
     hub,
     artists,
+    totalArtists,
+    rosterLimit: HOME_ROSTER_LIMIT,
     posts,
   });
Index: src/routes/posts.js
===================================================================
--- src/routes/posts.js	(revision b94c08ee93afe04552667726a69e8b5eb5629d16)
+++ src/routes/posts.js	(revision 8afbdd6572a947bce4726d5aa0d0aa0d6c7e5067)
@@ -62,5 +62,5 @@
   'archive', 'search', 'account', 'sites', 'comments',
   'posts', 'media', 'audio', 'prutter', 'forum',
-  'tag', 'type', 'users', 'feed.xml', 'atom.xml', 'sitemap.xml',
+  'tag', 'type', 'user', 'users', 'artiesten', 'feed.xml', 'atom.xml', 'sitemap.xml',
   'manifest.webmanifest', 'sw.js', 'favicon.ico', 'favicon.svg', 'assets',
 ]);
Index: src/routes/prutter.js
===================================================================
--- src/routes/prutter.js	(revision b94c08ee93afe04552667726a69e8b5eb5629d16)
+++ src/routes/prutter.js	(revision 8afbdd6572a947bce4726d5aa0d0aa0d6c7e5067)
@@ -18,5 +18,5 @@
 import db from '../config/database.js';
 import { renderPage } from '../middleware/render.js';
-import { requireAuth } from '../middleware/auth.js';
+import { requireAuth, isViewer } from '../middleware/auth.js';
 import PermissionsService from '../services/PermissionsService.js';
 
@@ -55,4 +55,10 @@
 // ==================== START / RESUME CONVERSATION ====================
 router.get('/new', requirePrutter, (req, res) => {
+  // Een gesprek starten is een schrijf-actie (INSERT) — een kijker mag dat niet.
+  // De globale guard pakt dit niet omdat het een GET is, dus expliciet blokkeren.
+  if (isViewer(req.session.user)) {
+    res.status(403);
+    return renderPage(req, res, 'pages/viewer-blocked', { pageTitle: 'Kijker-modus', bodyClass: 'on-special' });
+  }
   const targetUsername = (req.query.to || '').toString().trim();
   if (!targetUsername) {
@@ -90,6 +96,7 @@
   const messages = prutter.getMessages(conv.id, 200, 0).reverse();
 
-  // Mark inbound messages as read
-  prutter.markAsRead(conv.id, me);
+  // Mark inbound messages as read — sla over voor kijkers (markAsRead is een
+  // UPDATE; een GET valt buiten de globale guard, dus hier expliciet skippen).
+  if (!isViewer(req.session.user)) prutter.markAsRead(conv.id, me);
 
   renderPage(req, res, 'pages/prutter-conversation', {
Index: src/server.js
===================================================================
--- src/server.js	(revision b94c08ee93afe04552667726a69e8b5eb5629d16)
+++ src/server.js	(revision 8afbdd6572a947bce4726d5aa0d0aa0d6c7e5067)
@@ -1,4 +1,4 @@
 /**
- * PrutFolio v1 — server bootstrap
+ * Klonkt Hub Beta — server bootstrap
  *
  * Persoonlijk multi-site platform forked van PrutCMS v9 (PHP, file-based).
@@ -21,4 +21,6 @@
 
 import { resolveSite, loadAudioTracks, loadTheme } from './middleware/site.js';
+import { isViewer } from './middleware/auth.js';
+import { renderPage } from './middleware/render.js';
 import authRoutes from './routes/auth.js';
 import accountRoutes from './routes/account.js';
@@ -39,4 +41,5 @@
 import feedRoutes from './routes/feed.js';
 import hubRoutes from './routes/hub.js';
+import artistsRoutes from './routes/artists.js';
 import postsRoutes from './routes/posts.js';
 
@@ -164,10 +167,24 @@
 });
 
-// Read-only/kijk-accounts: alles bekijken mag, niets wijzigen. Blokkeert elke
-// state-wijzigende methode (de login-POST zelf zet de sessie pas, dus die valt
-// hier nog niet onder).
+// Kijker-accounts: alles bekijken mag (incl. Beheer), niets wijzigen. Dit is de
+// ENIGE schrijf-blokkade — fail-closed, vóór alle route-handlers. Elke state-
+// wijzigende methode wordt geweigerd (de login-POST zet de sessie pas ná deze
+// guard, dus die valt er niet onder). I.p.v. rauwe 403-tekst tonen we een nette
+// pagina (of, bij HTMX, een ingeswapte melding).
 app.use((req, res, next) => {
-  if (req.session?.user?.readonly && req.method !== 'GET' && req.method !== 'HEAD' && req.method !== 'OPTIONS') {
-    return res.status(403).send('Demo-account: alleen-lezen — wijzigen is uitgeschakeld.');
+  const mutating = req.method !== 'GET' && req.method !== 'HEAD' && req.method !== 'OPTIONS';
+  if (mutating && isViewer(req.session?.user)) {
+    if (req.headers['hx-request'] === 'true') {
+      // htmx swapt niet op 4xx; stuur 200 + retarget zodat de melding in #pcms-main verschijnt.
+      res.setHeader('HX-Retarget', '#pcms-main');
+      res.setHeader('HX-Reswap', 'innerHTML');
+      res.status(200);
+    } else {
+      res.status(403);
+    }
+    return renderPage(req, res, 'pages/viewer-blocked', {
+      pageTitle: 'Kijker-modus',
+      bodyClass: 'on-special',
+    });
   }
   next();
@@ -192,4 +209,5 @@
 // Feed/sitemap routes are mounted at root because they're at well-known paths
 app.use('/', feedRoutes);
+app.use('/artiesten', artistsRoutes); // doorzoekbare artiesten-directory (alleen hub; solo: next())
 app.use('/', hubRoutes); // hub-overview op '/' (solo: next() -> postsRoutes)
 app.use('/', postsRoutes);
@@ -215,6 +233,6 @@
   res.json({
     id: idBase,
-    name: site?.title || 'PrutFolio',
-    short_name: (site?.title || 'PrutFolio').slice(0, 12),
+    name: site?.title || 'Klonkt Hub Beta',
+    short_name: (site?.title || 'Klonkt').slice(0, 12),
     description: site?.description || site?.tagline || '',
     scope,
@@ -324,4 +342,12 @@
       return;
     }
+    // Kijker-accounts zijn alleen-lezen: weiger de WS-upgrade. De HTTP-guard
+    // dekt geen WS, dus dit is de plek om schrijven via een (toekomstige)
+    // message-handler te voorkomen.
+    if (isViewer(req.session.user)) {
+      socket.write('HTTP/1.1 403 Forbidden\r\n\r\n');
+      socket.destroy();
+      return;
+    }
     wss.handleUpgrade(req, socket, head, (ws) => {
       ws.userId = req.session.user.id;
@@ -350,5 +376,5 @@
 server.listen(PORT, () => {
   console.log('');
-  console.log('🪶 PrutFolio v1 — alpha');
+  console.log('🪶 Klonkt Hub Beta');
   console.log(`   http://localhost:${PORT}`);
   console.log('');
Index: src/views/pages/account.ejs
===================================================================
--- src/views/pages/account.ejs	(revision b94c08ee93afe04552667726a69e8b5eb5629d16)
+++ src/views/pages/account.ejs	(revision 8afbdd6572a947bce4726d5aa0d0aa0d6c7e5067)
@@ -12,4 +12,14 @@
   <% if (error)   { %><div class="ax-flash ax-flash-err"><%= error %></div><% } %>
 
+  <% if (isViewer) { %>
+    <div class="ax-viewer-note" role="note">
+      <span class="ax-viewer-ico" aria-hidden="true">👁️</span>
+      <div>
+        <strong>Kijker-modus</strong>
+        <span>Dit is een demo-account. Je kunt alles bekijken, maar niets wijzigen — ook geen foto of bio.</span>
+      </div>
+    </div>
+  <% } %>
+
   <%# ── PROFILE ────────────────────────────────────────────── %>
   <section class="ax-card">
@@ -17,19 +27,29 @@
 
     <div class="ax-profile-id">
-      <form action="/account/avatar" method="post" enctype="multipart/form-data" class="ax-avatar-form">
-        <label class="ax-avatar-wrap" title="Klik om je foto te wijzigen">
-          <span class="ax-profile-avatar">
-            <% if (account.avatar_url) { %>
-              <img src="<%= account.avatar_url %>" alt="">
-            <% } else { %>
-              <span><%= account.username.charAt(0).toUpperCase() %></span>
-            <% } %>
-          </span>
-          <span class="ax-avatar-edit" aria-hidden="true">
-            <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
-          </span>
-          <input type="file" name="avatar" accept="image/jpeg,image/png,image/webp,image/gif" onchange="this.form.submit()" hidden>
-        </label>
-      </form>
+      <% if (canMutate) { %>
+        <form action="/account/avatar" method="post" enctype="multipart/form-data" class="ax-avatar-form">
+          <label class="ax-avatar-wrap" title="Klik om je foto te wijzigen">
+            <span class="ax-profile-avatar">
+              <% if (account.avatar_url) { %>
+                <img src="<%= account.avatar_url %>" alt="">
+              <% } else { %>
+                <span><%= account.username.charAt(0).toUpperCase() %></span>
+              <% } %>
+            </span>
+            <span class="ax-avatar-edit" aria-hidden="true">
+              <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
+            </span>
+            <input type="file" name="avatar" accept="image/jpeg,image/png,image/webp,image/gif" onchange="this.form.submit()" hidden>
+          </label>
+        </form>
+      <% } else { %>
+        <span class="ax-profile-avatar ax-profile-avatar-static">
+          <% if (account.avatar_url) { %>
+            <img src="<%= account.avatar_url %>" alt="">
+          <% } else { %>
+            <span><%= account.username.charAt(0).toUpperCase() %></span>
+          <% } %>
+        </span>
+      <% } %>
       <div class="ax-profile-meta">
         <div class="ax-profile-name"><%= account.username %></div>
@@ -38,5 +58,5 @@
           <div class="ax-profile-joined">Lid sinds <%= formatDate(account.created_at) %></div>
         <% } %>
-        <% if (account.avatar_url) { %>
+        <% if (account.avatar_url && canMutate) { %>
           <form action="/account/avatar/remove" method="post" class="ax-avatar-remove">
             <button type="submit" class="ax-linkbtn">Foto verwijderen</button>
@@ -46,16 +66,27 @@
     </div>
 
-    <form action="/account/profile" method="post" class="ax-form ax-form-bio">
-      <label class="ax-field">
-        <span>Bio</span>
-        <textarea name="bio" rows="3" maxlength="500" placeholder="Een korte regel over jezelf"><%= account.bio || '' %></textarea>
-      </label>
-      <div class="ax-form-actions">
-        <button type="submit" class="ax-btn ax-btn-primary">Bio opslaan</button>
-      </div>
-    </form>
+    <% if (canMutate) { %>
+      <form action="/account/profile" method="post" class="ax-form ax-form-bio">
+        <label class="ax-field">
+          <span>Bio</span>
+          <textarea name="bio" rows="3" maxlength="500" placeholder="Een korte regel over jezelf"><%= account.bio || '' %></textarea>
+        </label>
+        <div class="ax-form-actions">
+          <button type="submit" class="ax-btn ax-btn-primary">Bio opslaan</button>
+        </div>
+      </form>
+    <% } else { %>
+      <div class="ax-form ax-form-bio">
+        <label class="ax-field">
+          <span>Bio</span>
+          <textarea rows="3" disabled placeholder="Geen bio"><%= account.bio || '' %></textarea>
+        </label>
+      </div>
+    <% } %>
   </section>
 
   <%# ── WACHTWOORD ────────────────────────────────────────── %>
+  <%# In kijker-modus geen wachtwoord-sectie (niets te wijzigen). %>
+  <% if (canMutate) { %>
   <% if (hasPassword) { %>
   <section class="ax-card">
@@ -87,4 +118,5 @@
   </section>
   <% } %>
+  <% } %>
 
 </div>
@@ -107,4 +139,19 @@
 .ax-flash-ok  { background: rgba(40,160,90,.15); color: #2a9d5e; border: 1px solid rgba(40,160,90,.3); }
 .ax-flash-err { background: rgba(200,60,60,.15); color: #c33; border: 1px solid rgba(200,60,60,.3); }
+
+/* ─── Kijker-modus notice ──────────────────────────────────────── */
+.ax-viewer-note {
+  display: flex; align-items: flex-start; gap: 0.75rem;
+  padding: 0.85rem 1rem; margin-bottom: 1rem;
+  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--rule));
+  border-left: 3px solid var(--accent);
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--accent) 8%, var(--paper));
+}
+.ax-viewer-ico { font-size: 1.1rem; line-height: 1.4; }
+.ax-viewer-note strong { display: block; font-size: 0.92rem; }
+.ax-viewer-note span { color: var(--ink-muted, var(--ink-soft)); font-size: 0.85rem; }
+.ax-profile-avatar-static { flex-shrink: 0; }
+.ax-form-bio textarea:disabled { opacity: 0.7; cursor: default; }
 
 /* ─── Cards ────────────────────────────────────────────────────── */
Index: src/views/pages/admin-settings.ejs
===================================================================
--- src/views/pages/admin-settings.ejs	(revision b94c08ee93afe04552667726a69e8b5eb5629d16)
+++ src/views/pages/admin-settings.ejs	(revision 8afbdd6572a947bce4726d5aa0d0aa0d6c7e5067)
@@ -24,5 +24,5 @@
         <span>
           <strong>Hub</strong> — bedrijfssite met <code>/user/</code>.
-          <small>Jij (admin) wijst gebruikers een eigen PrutFolio toe. Gesloten cirkel: geen open registratie.</small>
+          <small>Jij (admin) wijst gebruikers een eigen Klonkt Hub toe. Gesloten cirkel: geen open registratie.</small>
         </span>
       </label>
@@ -36,5 +36,5 @@
     <p class="set-help">
       De openbare hub-pagina (<code>/</code>) is generiek — van geen enkele gebruiker.
-      Hier stel je de naam en intro in. Jouw eigen PrutFolio blijft los bestaan onder <code>/user/</code>.
+      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">
Index: src/views/pages/admin-users.ejs
===================================================================
--- src/views/pages/admin-users.ejs	(revision b94c08ee93afe04552667726a69e8b5eb5629d16)
+++ src/views/pages/admin-users.ejs	(revision 8afbdd6572a947bce4726d5aa0d0aa0d6c7e5067)
@@ -5,5 +5,5 @@
     <div>
       <h1>Users</h1>
-      <p class="ax-tagline">Beheer gebruikers, rollen, en verwijderingen.</p>
+      <p class="ax-tagline">Beheer gebruikers, rollen, en verwijderingen. Rol <strong>kijker</strong> = alles bekijken (incl. Beheer), niets wijzigen — handig voor demo's.</p>
     </div>
   </header>
@@ -58,5 +58,6 @@
               <label class="ax-role">
                 <span>Rol</span>
-                <select name="role" onchange="this.form.submit()" <% if (u.id === user.id) { %>disabled<% } %>>
+                <select name="role" onchange="this.form.submit()" <% if (u.id === user.id || !canMutate) { %>disabled<% } %>>
+                  <option value="kijker" <%= u.role === 'kijker' ? 'selected' : '' %>>kijker</option>
                   <option value="member" <%= u.role === 'member' ? 'selected' : '' %>>member</option>
                   <option value="admin"  <%= u.role === 'admin'  ? 'selected' : '' %>>admin</option>
@@ -66,13 +67,5 @@
             </form>
 
-            <form method="post" action="/admin/users/<%= u.id %>/readonly" class="ax-role-form">
-              <label class="ax-role ax-ro" title="Alleen-lezen: kan alles bekijken, niets wijzigen">
-                <span>Kijk-modus</span>
-                <input type="checkbox" name="readonly" value="1" <%= u.readonly ? 'checked' : '' %>
-                       onchange="this.form.submit()" <% if (u.id === user.id) { %>disabled<% } %>>
-              </label>
-            </form>
-
-            <% if (u.id !== user.id) { %>
+            <% if (u.id !== user.id && canMutate) { %>
               <% var _warn = (u.post_count + u.site_count > 0)
                    ? ('Dit verwijdert ook hun site + ' + u.post_count + ' post(s). ')
@@ -83,5 +76,5 @@
               </form>
             <% } else { %>
-              <%# Lege plek zodat de kolommen (rol/kijk-modus) op elke rij uitlijnen. %>
+              <%# Lege plek zodat de rol-kolom op elke rij uitlijnt. %>
               <span class="ax-icon-btn-spacer" aria-hidden="true"></span>
             <% } %>
Index: src/views/pages/admin.ejs
===================================================================
--- src/views/pages/admin.ejs	(revision b94c08ee93afe04552667726a69e8b5eb5629d16)
+++ src/views/pages/admin.ejs	(revision 8afbdd6572a947bce4726d5aa0d0aa0d6c7e5067)
@@ -2,5 +2,5 @@
   <h1>Beheer</h1>
   <% if (tenancy === 'hub') { %>
-    <p class="admin-tagline">Hub-modus — bedrijfssite met gebruikers, elk hun eigen PrutFolio.</p>
+    <p class="admin-tagline">Hub-modus — bedrijfssite met gebruikers, elk hun eigen Klonkt Hub.</p>
   <% } else { %>
     <p class="admin-tagline">Solo-modus — jouw site.</p>
Index: src/views/pages/artists-directory.ejs
===================================================================
--- src/views/pages/artists-directory.ejs	(revision 8afbdd6572a947bce4726d5aa0d0aa0d6c7e5067)
+++ src/views/pages/artists-directory.ejs	(revision 8afbdd6572a947bce4726d5aa0d0aa0d6c7e5067)
@@ -0,0 +1,154 @@
+<%
+// Artiesten-directory — bodyClass 'on-hub' => headerloos (bareChrome), dus deze
+// pagina draagt z'n eigen minimale nav + kop, net als de hub-overview.
+function _qs(extra) {
+  const p = new URLSearchParams();
+  if (q) p.set('q', q);
+  Object.keys(extra || {}).forEach(k => p.set(k, extra[k]));
+  const s = p.toString();
+  return s ? ('?' + s) : '';
+}
+%>
+<div class="adir">
+
+  <%# ── Minimale nav (terug naar hub + auth) ── %>
+  <nav class="adir-nav">
+    <div class="adir-nav-inner container">
+      <a class="adir-nav-home" href="/"><span aria-hidden="true">←</span> <%= (typeof hubTitle !== 'undefined' && hubTitle) ? hubTitle : 'Home' %></a>
+      <span class="adir-nav-spacer"></span>
+      <% if (user) { %>
+        <a class="adir-nav-link" href="/account"><%= user.username %></a>
+        <a class="adir-nav-link" href="/auth/logout">Uitloggen</a>
+      <% } else { %>
+        <a class="adir-nav-link" href="/auth/login">Inloggen</a>
+      <% } %>
+    </div>
+  </nav>
+
+  <header class="adir-head container">
+    <h1 class="adir-title">Artiesten</h1>
+    <p class="adir-sub"><%= total %> PrutFolio<%= total === 1 ? '' : "'s" %></p>
+
+    <form class="adir-search" method="get" action="/artiesten" role="search">
+      <input type="search" name="q" value="<%= q %>" placeholder="Zoek op naam…"
+             autocomplete="off" aria-label="Zoek artiesten">
+      <button type="submit" class="adir-search-btn" aria-label="Zoeken">
+        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+      </button>
+      <% if (q) { %><a class="adir-search-clear" href="/artiesten">Wissen</a><% } %>
+    </form>
+  </header>
+
+  <div class="container adir-body">
+    <% if (!artists.length) { %>
+      <p class="adir-empty">
+        <% if (q) { %>Geen artiesten gevonden voor "<strong><%= q %></strong>".<% } else { %>Nog geen artiesten.<% } %>
+      </p>
+    <% } else { %>
+      <div class="roster">
+        <% artists.forEach(function(a){ %>
+          <a class="roster-card" href="/user/<%= a.slug %>">
+            <% var _ava = a.profile_photo || a.owner_avatar; %>
+            <span class="roster-avatar"<% if (_ava) { %> style="background-image:url('<%= _ava %>')"<% } else { %> style="background:<%= a.accent || 'var(--accent)' %>;color:#fff"<% } %>>
+              <% if (!_ava) { %><%= (a.title || a.slug).charAt(0).toUpperCase() %><% } %>
+            </span>
+            <span class="roster-name"><%= a.title %></span>
+            <% if (a.tagline) { %><span class="roster-tag"><%= a.tagline %></span><% } %>
+            <span class="roster-count"><%= a.post_count %> post<%= a.post_count === 1 ? '' : 's' %></span>
+          </a>
+        <% }); %>
+      </div>
+
+      <% if (pages > 1) { %>
+        <nav class="adir-pager" aria-label="Paginering">
+          <% if (page > 1) { %>
+            <a class="adir-page" href="<%= _qs({ page: page - 1 }) %>" rel="prev">← Vorige</a>
+          <% } else { %>
+            <span class="adir-page is-disabled">← Vorige</span>
+          <% } %>
+          <span class="adir-page-info">Pagina <%= page %> van <%= pages %></span>
+          <% if (page < pages) { %>
+            <a class="adir-page" href="<%= _qs({ page: page + 1 }) %>" rel="next">Volgende →</a>
+          <% } else { %>
+            <span class="adir-page is-disabled">Volgende →</span>
+          <% } %>
+        </nav>
+      <% } %>
+    <% } %>
+  </div>
+</div>
+
+<style>
+.adir { width: 100%; }
+
+/* ── Nav ── */
+.adir-nav { border-bottom: 1px solid var(--rule); padding: 0.9rem 0; }
+.adir-nav-inner { display: flex; align-items: center; gap: 1.2rem; }
+.adir-nav-home { color: var(--ink); text-decoration: none; font-weight: 700; }
+.adir-nav-home:hover { color: var(--accent); }
+.adir-nav-spacer { flex: 1; }
+.adir-nav-link { color: var(--ink-muted); text-decoration: none; font-weight: 600; font-size: 0.9rem; }
+.adir-nav-link:hover { color: var(--accent); }
+
+/* ── Header + search ── */
+.adir-head { padding: 2.5rem 1rem 1.5rem; }
+.adir-title { font-family: var(--font-display, serif); font-size: clamp(2rem, 5vw, 3rem); margin: 0; }
+.adir-sub { color: var(--ink-muted); margin: 0.3rem 0 1.3rem; }
+.adir-search { display: flex; align-items: center; gap: 0.5rem; max-width: 480px; }
+.adir-search input {
+  flex: 1; min-width: 0; box-sizing: border-box;
+  padding: 0.65rem 0.9rem; border: 1px solid var(--rule); border-radius: 99px;
+  background: var(--paper-2); color: var(--ink); font: inherit; font-size: 0.95rem;
+}
+.adir-search input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
+.adir-search-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 44px; height: 44px; flex-shrink: 0;
+  border: 1px solid var(--accent); border-radius: 50%;
+  background: var(--accent); color: #fff; cursor: pointer;
+}
+.adir-search-clear { color: var(--ink-muted); font-size: 0.85rem; text-decoration: underline; white-space: nowrap; }
+
+.adir-body { padding-bottom: 4rem; }
+.adir-empty { color: var(--ink-muted); padding: 2rem 0; }
+
+/* ── Roster (zelfde stijl als hub-home) ── */
+.roster {
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem;
+}
+.roster-card {
+  display: flex; flex-direction: column; align-items: center; text-align: center;
+  gap: 0.4rem; padding: 1.6rem 1rem 1.3rem;
+  border: 1px solid var(--rule); border-radius: 16px;
+  background: var(--paper-2); color: var(--ink); text-decoration: none;
+  transition: border-color 140ms, transform 140ms, box-shadow 140ms;
+}
+.roster-card:hover {
+  border-color: var(--accent); transform: translateY(-3px);
+  box-shadow: 0 10px 28px -14px color-mix(in srgb, var(--accent) 55%, transparent);
+}
+.roster-avatar {
+  width: 88px; height: 88px; border-radius: 50%; margin-bottom: 0.45rem;
+  background-size: cover; background-position: center;
+  display: inline-flex; align-items: center; justify-content: center;
+  font-family: var(--font-display, serif); font-size: 2.1rem; font-weight: 700; color: #fff;
+  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18);
+}
+.roster-name { font-weight: 700; font-size: 1.1rem; }
+.roster-tag { color: var(--ink-muted); font-size: 0.82rem; }
+.roster-count {
+  margin-top: 0.35rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
+  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
+  padding: 0.15rem 0.6rem; border-radius: 99px;
+}
+
+/* ── Pager ── */
+.adir-pager { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 2.5rem; }
+.adir-page {
+  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.9rem;
+  padding: 0.5rem 1rem; border: 1px solid var(--rule); border-radius: 99px;
+}
+.adir-page:hover { border-color: var(--accent); color: var(--accent); }
+.adir-page.is-disabled { color: var(--ink-muted); opacity: 0.4; pointer-events: none; }
+.adir-page-info { color: var(--ink-muted); font-size: 0.85rem; }
+</style>
Index: src/views/pages/home.ejs
===================================================================
--- src/views/pages/home.ejs	(revision b94c08ee93afe04552667726a69e8b5eb5629d16)
+++ src/views/pages/home.ejs	(revision 8afbdd6572a947bce4726d5aa0d0aa0d6c7e5067)
@@ -25,5 +25,5 @@
       <h1>Hier is het nog stil.</h1>
       <p>Nog geen posts. Spannend.</p>
-      <% if (user && permissions.canCreatePost(user, site)) { %>
+      <% if (user && canMutate && permissions.canCreatePost(user, site)) { %>
         <p style="margin-top:2rem">
           <a class="btn" href="<%= _base %>/posts/new"
Index: src/views/pages/hub-home.ejs
===================================================================
--- src/views/pages/hub-home.ejs	(revision b94c08ee93afe04552667726a69e8b5eb5629d16)
+++ src/views/pages/hub-home.ejs	(revision 8afbdd6572a947bce4726d5aa0d0aa0d6c7e5067)
@@ -33,6 +33,11 @@
     <%# ── ARTIESTEN-ROSTER ─────────────────────────────────────────── %>
     <% if (artists && artists.length) { %>
+    <% var _total = (typeof totalArtists !== 'undefined') ? totalArtists : artists.length; %>
+    <% var _hasMore = _total > artists.length; %>
     <section class="hub-sec">
-      <h2 class="hub-sec-title">Artiesten</h2>
+      <h2 class="hub-sec-title">
+        Artiesten
+        <% if (_hasMore) { %><span class="hub-sec-count"><%= _total %></span><% } %>
+      </h2>
       <div class="roster">
         <% artists.forEach(function(a){ %>
@@ -48,4 +53,9 @@
         <% }); %>
       </div>
+      <% if (_hasMore) { %>
+        <div class="hub-more">
+          <a class="hub-more-link" href="/artiesten">Alle <%= _total %> artiesten <span aria-hidden="true">→</span></a>
+        </div>
+      <% } %>
     </section>
     <% } %>
@@ -131,4 +141,17 @@
 }
 .hub-sec-title::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
+.hub-sec-count {
+  font-family: var(--font-ui, system-ui); font-size: 0.8rem; font-weight: 700;
+  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
+  padding: 0.1rem 0.55rem; border-radius: 99px; order: 1;
+}
+.hub-more { margin-top: 1.25rem; text-align: center; }
+.hub-more-link {
+  display: inline-flex; align-items: center; gap: 0.4rem;
+  padding: 0.6rem 1.3rem; border: 1px solid var(--rule); border-radius: 99px;
+  background: var(--paper-2); color: var(--ink); text-decoration: none;
+  font-weight: 600; font-size: 0.92rem; transition: border-color 140ms, background 140ms;
+}
+.hub-more-link:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--paper-2)); }
 
 /* ── Roster (artiesten) ───────────────────────────────────────────── */
Index: src/views/pages/my-site.ejs
===================================================================
--- src/views/pages/my-site.ejs	(revision b94c08ee93afe04552667726a69e8b5eb5629d16)
+++ src/views/pages/my-site.ejs	(revision 8afbdd6572a947bce4726d5aa0d0aa0d6c7e5067)
@@ -1,5 +1,5 @@
 <div class="container admin-page">
   <p><a href="/" class="btn">&larr; Overzicht</a></p>
-  <h1>Mijn PrutFolio</h1>
+  <h1>Mijn Klonkt Hub</h1>
   <p class="admin-tagline"><%= mySite.title %></p>
 
Index: src/views/pages/post.ejs
===================================================================
--- src/views/pages/post.ejs	(revision b94c08ee93afe04552667726a69e8b5eb5629d16)
+++ src/views/pages/post.ejs	(revision 8afbdd6572a947bce4726d5aa0d0aa0d6c7e5067)
@@ -103,5 +103,5 @@
               <div class="comment-content"><%= c.content %></div>
               <div class="comment-actions">
-                <% if (user) { %>
+                <% if (user && canMutate) { %>
                   <button type="button" class="comment-reply-btn" data-reply-to="<%= c.id %>">Reply</button>
                 <% } %>
@@ -114,5 +114,5 @@
 
               <!-- Inline reply form (hidden by default) -->
-              <% if (user) { %>
+              <% if (user && canMutate) { %>
                 <form method="post" action="<%= _base %>/comments" class="comment-reply-form" hidden data-reply-form-for="<%= c.id %>">
                   <input type="hidden" name="post_slug" value="<%= post.slug %>">
@@ -163,5 +163,5 @@
 
     <!-- Top-level comment form (only for logged-in users for now) -->
-    <% if (user) { %>
+    <% if (user && canMutate) { %>
       <form method="post" action="<%= _base %>/comments" class="comment-form">
         <input type="hidden" name="post_slug" value="<%= post.slug %>">
@@ -172,8 +172,10 @@
         <button type="submit" class="btn btn-primary">Post comment</button>
       </form>
-    <% } else { %>
+    <% } else if (!user) { %>
       <p class="comments-login-cta">
         <a href="/auth/login?next=<%= encodeURIComponent(_base + '/' + post.slug + '#comments') %>" class="btn">Log in to comment</a>
       </p>
+    <% } else { %>
+      <p class="comments-login-cta" style="color:var(--ink-muted)">👁️ Kijker-modus — reageren is uitgeschakeld.</p>
     <% } %>
   </section>
Index: src/views/pages/viewer-blocked.ejs
===================================================================
--- src/views/pages/viewer-blocked.ejs	(revision 8afbdd6572a947bce4726d5aa0d0aa0d6c7e5067)
+++ src/views/pages/viewer-blocked.ejs	(revision 8afbdd6572a947bce4726d5aa0d0aa0d6c7e5067)
@@ -0,0 +1,46 @@
+<div class="container vb-page">
+  <div class="vb-card">
+    <div class="vb-ico" aria-hidden="true">👁️</div>
+    <h1 class="vb-title">Kijker-modus</h1>
+    <p class="vb-text">
+      Dit is een alleen-lezen account. Je kunt alles bekijken, maar
+      <strong>niets wijzigen</strong> — opslaan, uploaden, verwijderen en
+      reageren zijn uitgeschakeld.
+    </p>
+    <div class="vb-actions">
+      <button type="button" class="vb-btn vb-btn-primary" onclick="history.back()">← Terug</button>
+      <a class="vb-btn" href="/">Naar de hoofdpagina</a>
+    </div>
+  </div>
+</div>
+
+<style>
+.vb-page { max-width: 540px; margin: 3rem auto 4rem; padding: 0 1rem; }
+.vb-card {
+  text-align: center;
+  background: var(--paper);
+  border: 1px solid var(--rule);
+  border-radius: 16px;
+  padding: 2.5rem 1.75rem;
+}
+.vb-ico {
+  width: 64px; height: 64px; margin: 0 auto 1rem;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 1.8rem; border-radius: 50%;
+  background: color-mix(in srgb, var(--accent) 14%, var(--paper-2));
+}
+.vb-title { font-family: var(--font-display, serif); font-size: 1.6rem; margin: 0 0 0.5rem; }
+.vb-text { color: var(--ink-muted, var(--ink-soft)); font-size: 0.95rem; line-height: 1.55; margin: 0 auto 1.5rem; max-width: 42ch; }
+.vb-actions { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
+.vb-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  padding: 0.6rem 1.1rem; min-height: 42px;
+  border: 1px solid var(--rule); border-radius: 8px;
+  background: var(--paper-2); color: var(--ink);
+  font-family: var(--font-ui, system-ui), sans-serif; font-size: 0.9rem; font-weight: 600;
+  text-decoration: none; cursor: pointer; transition: border-color 120ms, opacity 120ms;
+}
+.vb-btn:hover { border-color: var(--accent); }
+.vb-btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
+.vb-btn-primary:hover { opacity: 0.92; }
+</style>
Index: src/views/partials/bottom-tab.ejs
===================================================================
--- src/views/partials/bottom-tab.ejs	(revision b94c08ee93afe04552667726a69e8b5eb5629d16)
+++ src/views/partials/bottom-tab.ejs	(revision 8afbdd6572a947bce4726d5aa0d0aa0d6c7e5067)
@@ -11,5 +11,6 @@
 const _siteUrlBase = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '';
 const _path        = (typeof currentPath !== 'undefined' && currentPath) ? currentPath : '/';
-const _canPost     = !!(user && permissions && permissions.canCreatePost && permissions.canCreatePost(user, site));
+const _canPost     = !!(user && (typeof canMutate === 'undefined' || canMutate)
+                        && permissions && permissions.canCreatePost && permissions.canCreatePost(user, site));
 const _hasPrutter  = !!(user && site && site.enable_prutter && (typeof tenancy !== 'undefined' && tenancy === 'hub'));
 const _ownProfile  = user ? ('/users/' + user.username) : null;
Index: src/views/partials/footer.ejs
===================================================================
--- src/views/partials/footer.ejs	(revision b94c08ee93afe04552667726a69e8b5eb5629d16)
+++ src/views/partials/footer.ejs	(revision 8afbdd6572a947bce4726d5aa0d0aa0d6c7e5067)
@@ -2,8 +2,8 @@
   <div class="container site-footer-inner">
     <div>
-      <span>© <%= new Date().getFullYear() %> <%= (site && site.title) || 'PrutFolio' %></span>
+      <span>© <%= new Date().getFullYear() %> <%= (site && site.title) || 'Klonkt' %></span>
     </div>
     <div class="footer-meta">
-      <span>PrutFolio v1</span>
+      <span>Klonkt Hub Beta</span>
       <%# Mobile-only theme toggle. On desktop the topnav has its own toggle
           so we hide this one to avoid two visible toggles at once. The same
Index: src/views/partials/profile-sheet.ejs
===================================================================
--- src/views/partials/profile-sheet.ejs	(revision b94c08ee93afe04552667726a69e8b5eb5629d16)
+++ src/views/partials/profile-sheet.ejs	(revision 8afbdd6572a947bce4726d5aa0d0aa0d6c7e5067)
@@ -14,5 +14,6 @@
 
 const _isAdmin = (user.role === 'god' || user.role === 'admin');
-const _canPost = !!(typeof permissions !== 'undefined'
+const _canPost = !!((typeof canMutate === 'undefined' || canMutate)
+                    && typeof permissions !== 'undefined'
                     && permissions
                     && permissions.canCreatePost
Index: src/views/partials/topnav.ejs
===================================================================
--- src/views/partials/topnav.ejs	(revision b94c08ee93afe04552667726a69e8b5eb5629d16)
+++ src/views/partials/topnav.ejs	(revision 8afbdd6572a947bce4726d5aa0d0aa0d6c7e5067)
@@ -16,5 +16,6 @@
 const _hasSearch   = !site || site.show_search === undefined || site.show_search;
 const _hasPrutter  = user && site && site.enable_prutter && (typeof tenancy !== 'undefined' && tenancy === 'hub');
-const _canPost     = user && permissions && permissions.canCreatePost && permissions.canCreatePost(user, site);
+const _canPost     = user && (typeof canMutate === 'undefined' || canMutate)
+                     && permissions && permissions.canCreatePost && permissions.canCreatePost(user, site);
 %>
 
@@ -36,5 +37,5 @@
            hx-push-url="<%= _siteUrlBase %>/" hx-indicator="#pcms-loading"><%= site.title %></a>
       <% } else { %>
-        <a class="site-title" href="/">PrutFolio</a>
+        <a class="site-title" href="/">Klonkt</a>
       <% } %>
     </div>
Index: src/views/shell.ejs
===================================================================
--- src/views/shell.ejs	(revision b94c08ee93afe04552667726a69e8b5eb5629d16)
+++ src/views/shell.ejs	(revision 8afbdd6572a947bce4726d5aa0d0aa0d6c7e5067)
@@ -239,8 +239,24 @@
 <body class="<%= bodyClass || 'on-home' %> has-bottom-tab" data-feed-view="<%= _e(safeSite.feed_view_default || 'timeline') %>" data-grid-cols="3" data-site-base="<%= _e((typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '') %>">
 
-<% if (user && user.readonly) { %>
-  <div style="position:sticky;top:0;z-index:50;background:#e8b04b;color:#1a1a1a;text-align:center;font-size:0.85rem;font-weight:600;padding:0.4rem 1rem;">
-    👁️ Demo — alleen-lezen: je kunt alles bekijken, maar niets wijzigen.
+<% if (typeof isViewer !== 'undefined' && isViewer) { %>
+  <div class="viewer-banner" role="status">
+    <span class="viewer-banner-ico" aria-hidden="true">👁️</span>
+    <span class="viewer-banner-text"><strong>Kijker-modus</strong> — je kunt alles bekijken, maar niets wijzigen.</span>
   </div>
+  <style>
+    .viewer-banner {
+      position: sticky; top: 0; z-index: 60;
+      display: flex; align-items: center; justify-content: center; gap: 0.5rem;
+      padding: 0.5rem 1rem;
+      background: linear-gradient(90deg,
+        color-mix(in srgb, var(--accent) 88%, #000) 0%,
+        var(--accent) 100%);
+      color: #fff;
+      font-size: 0.85rem; line-height: 1.3;
+      box-shadow: 0 1px 6px color-mix(in srgb, var(--accent) 45%, transparent);
+    }
+    .viewer-banner-ico { font-size: 1rem; }
+    .viewer-banner-text strong { font-weight: 700; }
+  </style>
 <% } %>