diff --git a/plugins/ms-ai-architect/playground/ms-ai-architect-v3.html b/plugins/ms-ai-architect/playground/ms-ai-architect-v3.html
index bdcbe6f..35ef621 100644
--- a/plugins/ms-ai-architect/playground/ms-ai-architect-v3.html
+++ b/plugins/ms-ai-architect/playground/ms-ai-architect-v3.html
@@ -1179,22 +1179,174 @@
       scheduleRender();
     }
 
-    // Stubber for surfaces som fylles i Steps 6, 7, 9. Holder renderActive
-    // total uten å kreve at de finnes.
+    // Topbar — gjenbrukes på home, catalog, project. Onboarding viser ingen topbar
+    // (full-fokus førstegangs-flyt). Eksport/import-knapper wires opp til
+    // __exportState/__importState fra Step 3.
+    function renderTopbar(crumb) {
+      const orgName = (store.state.shared.organization && store.state.shared.organization.name) || '';
+      const crumbHtml = (orgName || crumb)
+        ? '<span class="topbar__crumb">' + (orgName ? escapeHtml(orgName) : '') + (orgName && crumb ? ' · ' : '') + (crumb || '') + '</span>'
+        : '';
+      return (
+        '<header class="topbar">' +
+          '<div class="topbar__brand">' +
+            '<span class="topbar__brand-mark" aria-hidden="true">M</span>' +
+            '<span>ms-ai-architect</span>' +
+            crumbHtml +
+          '</div>' +
+          '<nav class="topbar__nav" aria-label="Hovednavigasjon">' +
+            '<button type="button" class="btn btn--ghost btn--sm" data-action="goto-home">Hjem</button>' +
+            '<button type="button" class="btn btn--ghost btn--sm" data-action="goto-catalog">Katalog</button>' +
+            '<button type="button" class="btn btn--ghost btn--sm" data-action="goto-onboarding">Re-onboard</button>' +
+            '<button type="button" class="btn btn--secondary btn--sm" data-action="export-state" aria-label="Eksporter state til JSON">Eksporter</button>' +
+            '<button type="button" class="btn btn--secondary btn--sm" data-action="import-state" aria-label="Importer state fra JSON">Importer</button>' +
+            '<input type="file" accept="application/json,.json" data-import-input hidden>' +
+          '</nav>' +
+        '</header>'
+      );
+    }
+
+    // ============================================================
+    // HOME SURFACE (Step 6)
+    // ============================================================
+    //
+    // 3 entry-tracks (.tracks med .tracks__card--guided/explore/expert) som
+    // første-valg på home. Under: prosjekt-liste i .fleet-grid med .fleet-tile
+    // per prosjekt. Tom-state: .guide-panel--info. "Nytt prosjekt"-knapp
+    // åpner modal (modal-handler i Step 7 — Step 6 har stub).
+
+    function projectReportCount(p) {
+      if (!p || !p.reports) return 0;
+      let count = 0;
+      for (const k in p.reports) {
+        if (p.reports[k] && p.reports[k].parsed) count++;
+      }
+      return count;
+    }
+
+    function projectMeterBand(filled, total) {
+      if (total === 0) return '4'; // tom = "krever oppmerksomhet"
+      const pct = filled / total;
+      if (pct >= 0.8) return '1';
+      if (pct >= 0.5) return '2';
+      if (pct >= 0.2) return '3';
+      return '4';
+    }
+
     function renderHomeSurface() {
       const root = getSurfaceEl('home');
       if (!root) return;
-      root.innerHTML = '<div class="app-shell"><p>Hjem-skjerm fylles i Step 6.</p></div>';
+
+      const projects = store.state.projects || [];
+      const reportTotal = CATALOG.commands.filter(function (c) { return c.produces_report; }).length;
+
+      const tracksHtml = (
+        '<div class="tracks">' +
+          '<button type="button" class="tracks__card tracks__card--guided" data-action="goto-onboarding">' +
+            '<span class="tracks__card-icon" aria-hidden="true">⚙︎</span>' +
+            '<h3 class="tracks__card-title">Onboard / Re-onboard</h3>' +
+            '<p class="tracks__card-desc">Oppdater de 18 felles feltene som forhåndsutfyller alle command-skjemaer.</p>' +
+            '<span class="tracks__card-meta"><span>Felles state</span><span class="tracks__card-cta">Åpne →</span></span>' +
+          '</button>' +
+          '<button type="button" class="tracks__card tracks__card--explore" data-action="new-project">' +
+            '<span class="tracks__card-icon" aria-hidden="true">＋</span>' +
+            '<h3 class="tracks__card-title">Nytt prosjekt</h3>' +
+            '<p class="tracks__card-desc">Start et nytt arkitektur-prosjekt. Hvert prosjekt holder sine egne ROS, DPIA, AI Act-klassifisering osv.</p>' +
+            '<span class="tracks__card-meta"><span>Per-prosjekt state</span><span class="tracks__card-cta">Opprett →</span></span>' +
+          '</button>' +
+          '<button type="button" class="tracks__card tracks__card--expert" data-action="goto-catalog">' +
+            '<span class="tracks__card-icon" aria-hidden="true">◇</span>' +
+            '<h3 class="tracks__card-title">Command-katalog</h3>' +
+            '<p class="tracks__card-desc">Bla i alle 24 commands gruppert på kategori. Generer pipeline-strenger uten et prosjekt.</p>' +
+            '<span class="tracks__card-meta"><span>' + CATALOG.commands.length + ' commands</span><span class="tracks__card-cta">Bla →</span></span>' +
+          '</button>' +
+        '</div>'
+      );
+
+      const projectListHtml = (function () {
+        if (projects.length === 0) {
+          return (
+            '<div class="guide-panel guide-panel--info">' +
+              '<div class="guide-panel__icon" aria-hidden="true">i</div>' +
+              '<div class="guide-panel__body">' +
+                '<h3 class="guide-panel__title">Du har ingen prosjekter ennå</h3>' +
+                '<p class="guide-panel__text">Opprett ditt første for å starte ROS-, DPIA- og AI Act-arbeid. Felles felter du fylte ut i onboarding gjenbrukes automatisk.</p>' +
+                '<div class="guide-panel__action">' +
+                  '<button type="button" class="btn btn--primary" data-action="new-project">Opprett første prosjekt</button>' +
+                '</div>' +
+              '</div>' +
+            '</div>'
+          );
+        }
+        const tiles = projects.map(function (p) {
+          const filled = projectReportCount(p);
+          const band = projectMeterBand(filled, reportTotal);
+          const pct = reportTotal ? Math.round(100 * filled / reportTotal) : 0;
+          const scenarios = Array.isArray(p.scenarios) ? p.scenarios : [];
+          const chip = scenarios.length > 0
+            ? '<span class="fleet-tile__chip">' + escapeHtml(scenarios[0]) + (scenarios.length > 1 ? ' +' + (scenarios.length - 1) : '') + '</span>'
+            : '<span class="fleet-tile__chip">Uten scenario</span>';
+          return (
+            '<button type="button" class="fleet-tile" data-action="open-project" data-project-id="' + escapeAttr(p.id) + '">' +
+              '<div class="fleet-tile__row">' +
+                '<span class="fleet-tile__name" title="' + escapeAttr(p.name) + '">' + escapeHtml(p.name) + '</span>' +
+                chip +
+              '</div>' +
+              '<div class="fleet-tile__meter" aria-label="Rapport-fremdrift">' +
+                '<span class="fleet-tile__meter-fill" data-band="' + band + '" style="width:' + Math.max(pct, 4) + '%"></span>' +
+              '</div>' +
+              '<div class="fleet-tile__meta">' +
+                '<span>' + filled + '/' + reportTotal + ' rapporter</span>' +
+                '<span class="fleet-tile__trend--stable">' + pct + '%</span>' +
+              '</div>' +
+            '</button>'
+          );
+        }).join('');
+        return '<div class="fleet-grid">' + tiles + '</div>';
+      })();
+
+      const orgName = (store.state.shared.organization && store.state.shared.organization.name) || '';
+      const heroHtml = (
+        '<section class="home-hero">' +
+          '<h1>' + (orgName ? 'Hei, ' + escapeHtml(orgName) : 'ms-ai-architect') + '</h1>' +
+          '<p>' + (orgName
+            ? 'Velg hvor du vil starte. Felles state er aktiv og forhåndsutfyller skjemaer.'
+            : 'Single-file arkitektur-rådgivning for Microsoft AI-stakken. Start med onboarding for å aktivere felles state.'
+          ) + '</p>' +
+        '</section>'
+      );
+
+      const projectsSection = (
+        '<section class="home-projects">' +
+          '<div class="home-section-head">' +
+            '<h2>Mine prosjekter</h2>' +
+            '<span class="home-section-meta">' + projects.length + ' prosjekt' + (projects.length === 1 ? '' : 'er') + ' · maks ' + reportTotal + ' rapporter per prosjekt</span>' +
+          '</div>' +
+          projectListHtml +
+          (projects.length > 0 ? '<div class="onboarding-actions" style="margin-top: var(--space-4);"><button type="button" class="btn btn--primary" data-action="new-project">Nytt prosjekt</button></div>' : '') +
+        '</section>'
+      );
+
+      root.innerHTML = (
+        renderTopbar('Hjem') +
+        '<div class="app-shell">' +
+          heroHtml +
+          tracksHtml +
+          projectsSection +
+        '</div>'
+      );
     }
+
+    // Stub for project + catalog som fylles i Steps 7, 9.
     function renderProjectSurface() {
       const root = getSurfaceEl('project');
       if (!root) return;
-      root.innerHTML = '<div class="app-shell"><p>Prosjekt-overflate fylles i Step 7.</p></div>';
+      root.innerHTML = renderTopbar('Prosjekt') + '<div class="app-shell"><p>Prosjekt-detaljvisning fylles i Step 7.</p></div>';
     }
     function renderCatalogStub() {
       const root = getSurfaceEl('catalog');
       if (!root) return;
-      root.innerHTML = '<div class="app-shell"><p>Command-katalog fylles i Step 9.</p></div>';
+      root.innerHTML = renderTopbar('Katalog') + '<div class="app-shell"><p>Command-katalog fylles i Step 9.</p></div>';
     }
 
     // ============================================================
@@ -1593,6 +1745,57 @@
       if (input) input.focus();
     };
 
+    // ============================================================
+    // NAV + EXPORT/IMPORT ACTIONS (Step 6)
+    // ============================================================
+
+    ACTIONS['goto-home'] = function () { navigate('home'); };
+    ACTIONS['goto-catalog'] = function () { navigate('catalog'); };
+    ACTIONS['goto-onboarding'] = function () { navigate('onboarding'); };
+
+    ACTIONS['open-project'] = function (ev, el) {
+      const id = el.dataset.projectId;
+      if (!id) return;
+      store.state.activeProjectId = id;
+      navigate('project');
+    };
+
+    // Stub — Step 7 erstatter med modal-åpning.
+    ACTIONS['new-project'] = function () {
+      console.log('[playground v3] new-project: modal kommer i Step 7');
+    };
+
+    ACTIONS['export-state'] = function () {
+      try { exportState(); }
+      catch (err) { console.error('[playground v3] export feilet:', err); alert('Eksport feilet: ' + err.message); }
+    };
+
+    ACTIONS['import-state'] = function (ev, el) {
+      const topbar = el.closest('.topbar');
+      if (!topbar) return;
+      const input = topbar.querySelector('[data-import-input]');
+      if (!input) return;
+      input.value = ''; // tillat samme fil to ganger
+      input.click();
+    };
+
+    // File-input change handler (én gang for hele dokumentet — input genereres
+    // fortløpende via renderTopbar, men endringen bobler).
+    document.addEventListener('change', function (ev) {
+      if (!ev.target.matches || !ev.target.matches('[data-import-input]')) return;
+      const file = ev.target.files && ev.target.files[0];
+      if (!file) return;
+      importState(file)
+        .then(function () {
+          scheduleRender();
+          alert('Import fullført. Nåværende state er erstattet av filens innhold.');
+        })
+        .catch(function (err) {
+          console.error('[playground v3] import feilet:', err);
+          alert('Import feilet: ' + err.message);
+        });
+    });
+
     // Eksponer for Verify-asserts og Steps 6-9.
     window.__navigate = navigate;
     window.__scheduleRender = scheduleRender;