diff --git a/README.md b/README.md
index ef5f4287..8afbc0e0 100644
--- a/README.md
+++ b/README.md
@@ -78,3 +78,30 @@ contacts (A VCARD Address Book, Group, Individual, Organization) can be handled
 pane. Any other pane which wants to deal with contacts can just use the pane within its own user interface.
 
 ![Mapping many classes on the L to panes on the R](https://solidos.github.io/solid-panes/doc/images/panes-for-classes.svg)
+
+
+## Generative AI usage
+The SolidOS team is using GitHub Copilot integrated in Visual Studio Code. 
+We have added comments in the code to make it explicit which parts are 100% written by AI. 
+
+### Prompt usage hitory:
+* Model Claude Opus 4.6: Initially solid-panes is loaded into an HTML shell form mashlib that looks like ... Also, an iFrame is rendered inside the `<div class="TabulatorOutline" id="DummyUUID">` for “isolated pane rendering”. Analyze the solid-panes code for what it uses from this HTML and suggest a new HTML structure which is mobile and accessibility friendly. Let's go ahead and make changes in this code as suggested to accommodate the new databrowser HTML.
+
+* Raptor mini: take a look at how I wired the environment from mashlib into solid-panes. It is not quite right, can you suggest fixes?
+
+* Raptor mini: Update the code to use the new solid-ui-header component. Keep in mind the log in and sign up are wired in specific ways.
+
+* Auto: change the menu to fill up the menu items like in the code: async function getMenuItems (outliner: any) {
+const items = await outliner.getDashboardItems()
+return items.map((element) => {
+return {
+label: element.label,
+onclick: () => openDashboardPane(outliner, element.tabName || element.paneName)
+}
+})
+}
+
+* Auto: each #sym:MenuItem has an icon which i want displayed on the left side of each menu item when rendered
+
+* Auto: don't add each menu item in a button looking border. Simply list them.
+Upon hover apply background color e6dcff and selected or active to be background color: cbb9ff
\ No newline at end of file
diff --git a/dev/dev-mash.css b/dev/dev-mash.css
index 8aa75274..8b36eea0 100644
--- a/dev/dev-mash.css
+++ b/dev/dev-mash.css
@@ -8,74 +8,46 @@
 @import url("./dev-light.css");
 @import url("./dev-mash-utilities.css");
 
-/* I couldn't find the code for the collapse image. this is a quick work around
-to make the collapsing easier to use ( the triangles dont jump 20 pixels). ~cm2
-*/
-img[title="Hide details."] {
-  float: left;
-}
-
-html {
-  height: 100%;
-  line-height: 1.15;
-}
-body {
-  height: 100%;
-  background-color: var(--color-background);
-  color: var(--color-text);
+html, body {
+  margin: 0;
+  padding: 0;
   font-family: var(--font-family-base);
-}
-
-/* Improved heading hierarchy */
-h1, h2, h3, h4, h5, h6 {
-  color: var(--color-primary);
-  font-weight: 600;
-  line-height: var(--line-height-tight);
-  margin-top: 0;
-  margin-bottom: var(--spacing-sm);
-}
-
-h1 { font-size: 2em; }    /* 32px */
-h2 { font-size: 1.5em; }  /* 24px */
-h3 { font-size: 1.25em; } /* 20px */
-h4 { font-size: 1.125em; }/* 18px */
-h5, h6 { font-size: 1em; }/* 16px */
-
-/* Better paragraph spacing */
-p {
-  margin-bottom: var(--spacing-md);
+  font-size: var(--font-size-base);
   line-height: var(--line-height-base);
-  max-width: 65ch; /* Optimal reading width */
-}
-
-/* Improved link accessibility */
-a {
-  color: var(--color-primary);
-  text-decoration: underline;
-  text-underline-offset: 0.125em;
-  text-decoration-thickness: 0.0625em;
-}
-
-a:hover, a:focus {
-  text-decoration-thickness: 0.125em;
+  background: var(--color-background);
+  color: var(--color-text);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
 }
 
-
-/* Main page elements in databrowser.html */
-#PageBody {
+/* ── App layout ── */
+body {
   display: flex;
   flex-direction: column;
+  min-height: 100dvh;        /* dvh = dynamic viewport for mobile chrome */
 }
-#DummyUUID {
-  flex: 1 0 auto;
-}
+
 #PageHeader {
+  position: sticky;
+  top: 0;
+  z-index: 100;
   flex-shrink: 0;
 }
+
+#MainContent {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;   /* smooth iOS scroll */
+  padding: clamp(0.5rem, 2vw, 1.5rem); /* responsive gutter */
+  container-type: inline-size;          /* enable @container queries */
+}
+
 #PageFooter {
   flex-shrink: 0;
 }
 
+
 .warning {
   color: var(--color-warning);
 }
@@ -83,6 +55,7 @@ a:hover, a:focus {
   background-color: var(--color-selected-bg);
 }
 
+/* used in profile-pane as success button */
 .licOkay {
   background-color: var(--color-success-bg);
 }
@@ -1409,3 +1382,56 @@ End of styles for tableViewPane
   -moz-box-shadow: $x-axis $y-axis $blur $color;
   -o-box-shadow: $x-axis $y-axis $blur $color;
 }
+
+/* Generated by AI */
+@media screen and (max-width: 768px) {
+  #PageHeader,
+  #PageFooter {
+    width: 100%;
+  }
+
+  #MainContent {
+    padding-top: 0.75rem;
+    padding-right: max(0.75rem, env(safe-area-inset-right));
+    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
+    padding-left: max(0.75rem, env(safe-area-inset-left));
+  }
+
+  .TabulatorOutline,
+  .outline-view {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .TabulatorOutline table,
+  .outline-view table {
+    min-width: 100%;
+  }
+
+  img.outlineImage,
+  img.pic,
+  img.foafPic {
+    height: auto;
+    max-width: 100%;
+  }
+
+  div.description,
+  div.premises,
+  div.justification,
+  div.mildNotice {
+    box-sizing: border-box;
+    margin-left: 0;
+    margin-right: 0;
+    width: 100%;
+  }
+}
+
+html[data-layout="mobile"] #PageBody {
+  min-height: var(--app-height, 100dvh);
+}
+
+html[data-layout="mobile"] #MainContent {
+  overscroll-behavior-x: contain;
+}
+
+/* END of Generated by AI */
\ No newline at end of file
diff --git a/dev/loader.ts b/dev/loader.ts
index 207e35db..eb9f3106 100644
--- a/dev/loader.ts
+++ b/dev/loader.ts
@@ -5,6 +5,7 @@ import { solidLogicSingleton, store, authSession } from 'solid-logic'
 import { getOutliner } from '../src'
 import Pane from 'profile-pane'
 import './dev-mash.css'
+import { DataBrowserContext, RenderEnvironment } from 'pane-registry'
 
 // Add custom properties to the Window interface for TypeScript
 declare global {
@@ -27,7 +28,15 @@ async function renderPane (uri: string) {
   await new Promise((resolve, reject) => {
     store.fetcher.load(doc).then(resolve, reject)
   })
-  const context = {
+
+  const devEnvironment : RenderEnvironment = {
+    layout: 'desktop', // or 'mobile'
+    layoutPreference: 'desktop', // or 'mobile' or 'auto'
+    inputMode: 'pointer', // or 'touch'
+    theme: 'light', // or 'dark'
+    viewport: { width: 800, height: 480 } // this is the default viewport for the browser window
+  }
+  const context : DataBrowserContext = {
     // see https://github.com/solidos/solid-panes/blob/005f90295d83e499fd626bd84aeb3df10135d5c1/src/index.ts#L30-L34
     dom: document,
     getOutliner,
@@ -35,7 +44,8 @@ async function renderPane (uri: string) {
       store: store,
       paneRegistry,
       logic: solidLogicSingleton
-    }
+    },
+    environment: devEnvironment
   }
 
   console.log(subject, context)
diff --git a/package.json b/package.json
index 6cd14a2f..5c53477d 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,9 @@
     "lint": "eslint",
     "lint-fix": "eslint --fix",
     "typecheck": "tsc --noEmit",
+    "watch-js": "babel src --out-dir dist --source-maps --extensions '.ts,.js' --watch",
+    "watch-dist": "webpack --watch",
+    "watch-types": "tsc --emitDeclarationOnly --watch --preserveWatchOutput",
     "typecheck-test": "tsc --noEmit -p tsconfig.test.json",
     "test": "jest --no-coverage",
     "test-watch": "npm run lint && jest --onlyChanged --watch",
@@ -30,7 +33,7 @@
     "prepublishOnly": "npm run build && npm run lint && npm test",
     "preversion": "npm run lint && npm run typecheck && npm test",
     "postversion": "git push origin main --follow-tags",
-    "watch": "npm run build-version && babel src -d dist --source-maps --extensions '.ts,.js' --watch",
+    "watch": "npm run build-version && concurrently -k -n babel,types,webpack \"npm:watch-js\" \"npm:watch-types\" \"npm:watch-dist\"",
     "start": "webpack serve --config webpack.dev.config.mjs --open"
   },
   "repository": {
@@ -76,7 +79,8 @@
   "overrides": {
     "rdflib": "$rdflib",
     "solid-logic": "$solid-logic",
-    "solid-ui": "$solid-ui"
+    "solid-ui": "$solid-ui",
+    "pane-registry": "$pane-registry"
   },
   "devDependencies": {
     "@babel/cli": "^7.28.6",
@@ -93,6 +97,7 @@
     "babel-loader": "^10.0.0",
     "babel-plugin-inline-import": "^3.0.0",
     "buffer": "^6.0.3",
+    "concurrently": "^9.2.1",
     "copy-webpack-plugin": "^14.0.0",
     "css-loader": "^7.1.4",
     "eslint": "^9.39.3",
diff --git a/src/dashboard/basicPreferences.ts b/src/dashboard/basicPreferences.ts
index 5523d220..2b40e1b1 100644
--- a/src/dashboard/basicPreferences.ts
+++ b/src/dashboard/basicPreferences.ts
@@ -15,6 +15,7 @@ export const basicPreferencesPane: PaneDefinition = {
   // The subject should be the logged in user.
   render: (subject, context) => {
     const dom = context.dom
+    // @ts-ignore
     const store = context.session.store as Store
 
     function complainIfBad (ok: Boolean, mess: any) {
diff --git a/src/dashboard/dashboardPane.ts b/src/dashboard/dashboardPane.ts
index 385de0c4..ab41aa7c 100644
--- a/src/dashboard/dashboardPane.ts
+++ b/src/dashboard/dashboardPane.ts
@@ -7,12 +7,7 @@ import { DataBrowserContext, PaneDefinition } from 'pane-registry'
 export const dashboardPane: PaneDefinition = {
   icon: icons.iconBase + 'noun_547570.svg',
   name: 'dashboard',
-  label: subject => {
-    if (subject.termType === 'NamedNode' && subject.uri === subject.site().uri) {
-      return 'Dashboard'
-    }
-    return null
-  },
+  label: () => { return 'Dashboard' }, // we do not care if it is a WebID or not, not yet
   render: (subject, context) => {
     console.log('Dashboard Pane Render')
     const dom = context.dom
@@ -46,14 +41,24 @@ function buildPage (
   container: HTMLElement,
   webId: NamedNode | null,
   context: DataBrowserContext,
-  subject: NamedNode
+  subject: NamedNode | null
 ) {
-  // if uri then SolidOS is a browse.html web app
   const uri = (new URL(window.location.href)).searchParams.get('uri')
-  if (webId && (uri || webId.site().uri === subject.site().uri)) {
+
+  if (uri && webId) {
+    return buildDashboard(container, context)
+  }
+
+  if (!uri && subject) {
+    return buildHomePage(container, subject)
+  }
+
+  if (!uri && !subject && webId) {
     return buildDashboard(container, context)
   }
-  return buildHomePage(container, subject)
+
+  const fallbackSubject = subject || webId || store.sym(window.location.href)
+  return buildHomePage(container, fallbackSubject)
 }
 
 function buildDashboard (container: HTMLElement, context: DataBrowserContext) {
diff --git a/src/dashboard/homepage.ts b/src/dashboard/homepage.ts
index 360477f0..a7fb8e5f 100644
--- a/src/dashboard/homepage.ts
+++ b/src/dashboard/homepage.ts
@@ -1,12 +1,12 @@
-import { Fetcher, IndexedFormula, NamedNode, sym } from 'rdflib'
-import { ns } from 'solid-ui'
+import { Fetcher, IndexedFormula, NamedNode } from 'rdflib'
+import { loadProfileFromURI, getName } from '../profileUtils/ownerProfile'
 
 export async function generateHomepage (
-  subject: NamedNode,
+  uri: NamedNode,
   store: IndexedFormula,
   fetcher: Fetcher
 ): Promise<HTMLElement> {
-  const ownersProfile = await loadProfile(subject, store, fetcher)
+  const ownersProfile = await loadProfileFromURI(uri, store, fetcher)
   const name = getName(store, ownersProfile)
 
   const wrapper = document.createElement('div')
@@ -51,45 +51,3 @@ function createTitle (uri: string, name: string): HTMLElement {
 
   return title
 }
-
-async function loadProfile (
-  subject: NamedNode,
-  store: IndexedFormula,
-  fetcher: Fetcher
-): Promise<NamedNode> {
-  const pod = subject.site().uri
-  // TODO: This is a hack - we cannot assume that the profile is at this document, but we will live with it for now
-  const webId = sym(`${pod}profile/card#me`)
-  try {
-    await fetcher.load(webId)
-    return webId
-  } catch (err) {
-    // Fall back to pod root and any discovered profile links.
-  }
-
-  try {
-    await fetcher.load(subject)
-  } catch (err) {
-    return subject
-  }
-
-  const primaryTopic = store.any(subject, ns.foaf('primaryTopic'), null, subject.doc())
-  if (primaryTopic && primaryTopic.termType === 'NamedNode') {
-    try {
-      await fetcher.load(primaryTopic as NamedNode)
-      return primaryTopic as NamedNode
-    } catch (err) {
-      return subject
-    }
-  }
-
-  return subject
-}
-
-function getName (store: IndexedFormula, ownersProfile: NamedNode): string {
-  return (
-    store.anyValue(ownersProfile, ns.vcard('fn'), null, ownersProfile.doc()) ||
-    store.anyValue(ownersProfile, ns.foaf('name'), null, ownersProfile.doc()) ||
-    new URL(ownersProfile.uri).host.split('.')[0]
-  )
-}
diff --git a/src/home/homePane.ts b/src/home/homePane.ts
index 92d17fe0..b1837f89 100644
--- a/src/home/homePane.ts
+++ b/src/home/homePane.ts
@@ -8,7 +8,7 @@
  **
  */
 
-import { PaneDefinition } from 'pane-registry'
+import { DataBrowserContext, PaneDefinition } from 'pane-registry'
 import { NamedNode } from 'rdflib'
 import { authn } from 'solid-logic'
 import { create, icons, login } from 'solid-ui'
@@ -29,7 +29,7 @@ const HomePaneSource: PaneDefinition = {
     return 'home'
   },
 
-  render: function (subject, context) {
+  render: function (subject, context: DataBrowserContext) {
     const dom = context.dom
     const showContent = async function () {
       const homePaneContext = { div, dom, statusArea: div, me }
@@ -54,6 +54,7 @@ const HomePaneSource: PaneDefinition = {
       const relevantPanes = await login.filterAvailablePanes(
         context.session.paneRegistry.list
       )
+      // @ts-ignore
       create.newThingUI(creationContext, context, relevantPanes) // newUI Have to pass panes down
 
       login.registrationList(homePaneContext, {}).then(function () {})
diff --git a/src/index.ts b/src/index.ts
index 19ab9a77..24f2f449 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -21,24 +21,35 @@ import {
   paneForIcon,
   paneForPredicate,
   register,
-  byName
+  byName,
+  RenderEnvironment
 } from 'pane-registry'
 import { createContext } from './outline/context'
-import initMainPage from './mainPage'
+import { initMainPage, refreshUI } from './mainPage'
 
-function getOutliner (dom) {
+function getOutliner (dom, environment?: RenderEnvironment): OutlineManager {
   if (!dom.outlineManager) {
     const context = createContext(
       dom,
       { list, paneForIcon, paneForPredicate, register, byName },
       store as LiveStore,
-      solidLogicSingleton
+      solidLogicSingleton,
+      environment
     )
     dom.outlineManager = new OutlineManager(context)
+  } else if (environment) {
+    dom.outlineManager.context = dom.outlineManager.context || {}
+    dom.outlineManager.context.environment = environment
   }
   return dom.outlineManager
 }
 
+function updateEnvironment (outliner: OutlineManager, environment: RenderEnvironment) {
+  if (!outliner) return
+  outliner.context = outliner.context || {}
+  outliner.context.environment = environment
+}
+
 if (typeof window !== 'undefined') {
   getOutliner(window.document)
 }
@@ -53,9 +64,11 @@ registerPanes((cjsOrEsModule: any) => register(cjsOrEsModule.default || cjsOrEsM
 export {
   OutlineManager,
   getOutliner,
+  updateEnvironment,
   UI,
   versionInfo,
   initMainPage,
+  refreshUI,
   list, // from paneRegistry
   paneForIcon, // from paneRegistry
   paneForPredicate, // from paneRegistry
diff --git a/src/internal/internalPane.ts b/src/internal/internalPane.ts
index b041634a..a73aa584 100644
--- a/src/internal/internalPane.ts
+++ b/src/internal/internalPane.ts
@@ -20,6 +20,7 @@ const pane: PaneDefinition = {
 
   render: function (subject, context) {
     const dom = context.dom
+    // @ts-ignore
     const store = context.session.store as Store
     const canonizedSubject = store.canon(subject) as BlankNode | NamedNode | Variable
     const types = store.findTypeURIs(canonizedSubject)
diff --git a/src/mainPage/footer.ts b/src/mainPage/footer.ts
index 77045023..2dbf90d4 100644
--- a/src/mainPage/footer.ts
+++ b/src/mainPage/footer.ts
@@ -8,6 +8,7 @@ const SOLID_PROJECT_URL = 'https://solidproject.org'
 const SOLID_PROJECT_NAME = 'solidproject.org'
 
 export function createFooter (store: LiveStore) {
+  // @ts-ignore
   initFooter(store, setFooterOptions())
 }
 
diff --git a/src/mainPage/header.ts b/src/mainPage/header.ts
index 61aa0170..12abe7d9 100644
--- a/src/mainPage/header.ts
+++ b/src/mainPage/header.ts
@@ -1,80 +1,201 @@
-import { authSession, authn } from 'solid-logic'
-import { icons, initHeader } from 'solid-ui'
+import { authSession, authn, store } from 'solid-logic'
+import { icons, widgets, utils } from 'solid-ui'
+import 'solid-ui/components/header'
+import type { Header, HeaderMenuItem, HeaderAccountMenuItem, HeaderAuthState } from 'solid-ui/components/header'
+import { OutlineManager } from '../outline/manager'
+import { LiveStore } from 'rdflib'
 /**
  * menu icons
 */
 const HELP_MENU_ICON = icons.iconBase + 'noun_help.svg'
 const SOLID_ICON_URL = 'https://solidproject.org/assets/img/solid-emblem.svg'
-
 /**
  * menu elements
 */
-const USER_GUIDE_MENU_ITEM = 'User guide'
-const REPORT_A_PROBLEM_MENU_ITEM = 'Report a problem'
-const SHOW_YOUR_PROFILE_MENU_ITEM = 'Show your profile'
-const LOG_OUT_MENU_ITEM = 'Log out'
+const SIGN_IN_MENU_ITEM = 'Log In'
+const SIGN_OUT_MENU_ITEM = 'Log Out'
+const SIGN_UP_MENU_ITEM = 'Sign Up'
+const ACCOUNT_MENU_LABEL = '▼'
+const SIGN_UP__MENU_LINK = 'https://solidproject.org/get_a_pod'
 
-type UserMenuItem = { label: string; onclick: () => void }
-/**
- * URLS
- */
-const USER_GUIDE_MENU_URL = 'https://solidos.github.io/userguide/'
-const REPORT_A_PROBLEM_MENU_URL = 'https://github.com/solidos/solidos/issues'
+// data structure extracted for solid-ui-header binding
+export const HELP_MENU_LIST = [
+  { label: 'User guide', url: 'https://solidos.github.io/userguide/', target: '_blank' },
+  { label: 'Report a problem', url: 'https://github.com/solidos/solidos/issues', target: '_blank' }
+]
 
-export async function createHeader (store, outliner) {
-  initHeader(store, await setUserMenu(outliner), setHeaderOptions())
-}
+const HEADER_MOBILE_STYLE_ID = 'solid-ui-header-mobile-style'
 
-function setHeaderOptions () {
-  const helpMenuList = [
-    { label: USER_GUIDE_MENU_ITEM, url: USER_GUIDE_MENU_URL, target: '_blank' },
-    { label: REPORT_A_PROBLEM_MENU_ITEM, url: REPORT_A_PROBLEM_MENU_URL, target: '_blank' }
-  ]
-  const headerOptions = { logo: SOLID_ICON_URL, helpIcon: HELP_MENU_ICON, helpMenuList }
+type ManagedHeader = Header & {
+  __solidPanesListenersAttached?: boolean
+  __solidPanesOutliner?: OutlineManager
+}
 
-  return headerOptions
+function ensureMobileHeaderStyles () {
+  if (document.getElementById(HEADER_MOBILE_STYLE_ID)) return
+  const style = document.createElement('style')
+  style.id = HEADER_MOBILE_STYLE_ID
+  style.textContent = `
+    solid-ui-header[layout="mobile"]::part(logo) {
+      display: none !important;
+    }
+  `
+  document.head.appendChild(style)
 }
 
-async function setUserMenu (outliner: any) {
-  // @ts-ignore: showProfile is used conditionally
-  const showProfile = {
-    label: SHOW_YOUR_PROFILE_MENU_ITEM,
-    onclick: () => openUserProfile(outliner)
+export async function createHeader (store: LiveStore, outliner: OutlineManager) {
+  ensureMobileHeaderStyles()
+
+  const header = (document.querySelector('solid-ui-header') || document.createElement('solid-ui-header')) as ManagedHeader
+  const isNewHeader = !header.isConnected
+  if (!header.id) {
+    header.id = 'mainSolidUiHeader'
   }
+  header.__solidPanesOutliner = outliner
 
-  const logOut: UserMenuItem = {
-    label: LOG_OUT_MENU_ITEM,
-    onclick: () => {
-      authSession.logout()
+  // ensure it is in DOM (before MainContent for consistency)
+  const main = document.getElementById('MainContent')
+  if (!header.isConnected) {
+    if (main && main.parentNode) {
+      main.parentNode.insertBefore(header, main)
+    } else {
+      document.body.prepend(header)
     }
   }
 
-  // the order of the menu is important here, show profile first and logout last
-  let userMenuList:UserMenuItem[] = [] // was [showProfile]
-  userMenuList = userMenuList.concat(await getMenuItems(outliner))
-  userMenuList.push(logOut)
+  await refreshHeader(outliner, header)
 
-  return userMenuList
-}
+  if (isNewHeader) {
+    header.__solidPanesListenersAttached = false
+  }
 
-// Does not work to jump to user profile,
-function openUserProfile (outliner: any) {
-  outliner.GotoSubject(authn.currentUser(), true, undefined, true, undefined)
-  location.reload()
+  attachHeaderListeners(header)
+
+  return header
 }
 
-async function getMenuItems (outliner: any) {
-  const items = await outliner.getDashboardItems()
-  return items.map((element) => {
-    return {
-      label: element.label,
-      onclick: () => openDashboardPane(outliner, element.tabName || element.paneName)
+function attachHeaderListeners (header: ManagedHeader) {
+  if (header.__solidPanesListenersAttached) return
+
+  const refreshCurrentHeader = async () => {
+    const outliner = header.__solidPanesOutliner
+    if (!outliner) return
+    await refreshHeader(outliner, header)
+  }
+
+  authSession.events.on('login', refreshCurrentHeader)
+  authSession.events.on('logout', refreshCurrentHeader)
+  authSession.events.on('sessionRestore', refreshCurrentHeader)
+
+  header.addEventListener('auth-action-select', async (e: Event) => {
+    const outliner = header.__solidPanesOutliner
+    if (!outliner) return
+
+    const detail = (e as CustomEvent).detail
+    if (detail?.role === 'login') {
+      await refreshCurrentHeader()
+      // Do not auto-open the profile pane after login.
+      // outliner.showDashboard({ pane: 'profile' })
     }
   })
-}
 
-async function openDashboardPane (outliner: any, pane: string): Promise<void> {
-  outliner.showDashboard({
-    pane
+  header.addEventListener('signup-success', async () => {
+    // do nothing
+  })
+
+  header.addEventListener('account-menu-select', async (e: Event) => {
+    const outliner = header.__solidPanesOutliner
+    if (!outliner) return
+
+    const detail = (e as CustomEvent).detail
+    if (detail?.action === 'logout') {
+      await refreshCurrentHeader()
+      // Do not navigate to the profile after logout.
+    } else if (detail?.action === 'show-profile') {
+      // TODO see if this can be consolidated
+      if (authn.currentUser()) {
+        outliner.showDashboard({ pane: 'profile' })
+      }
+    }
   })
+
+  header.__solidPanesListenersAttached = true
+}
+
+export async function refreshHeader (outliner: OutlineManager, headerElement?: Header) {
+  ensureMobileHeaderStyles()
+  const headerOptions = setHeaderOptions(outliner)
+  const header = headerElement || document.querySelector('solid-ui-header') as Header | null
+  if (!header) return null
+
+  header.theme = headerOptions.theme
+  header.layout = headerOptions.layout
+  header.brandLink = headerOptions.brandLink
+  header.logo = headerOptions.layout === 'desktop' ? headerOptions.logo : ''
+  header.helpIcon = headerOptions.helpIcon
+  header.helpMenuList = headerOptions.helpMenuList
+  header.authState = headerOptions.authState
+  header.loginAction = headerOptions.loginAction
+  header.signUpAction = headerOptions.signUpAction
+  header.accountMenu = await setUserMenu()
+  header.logoutLabel = headerOptions.logoutLabel
+  header.accountLabel = headerOptions.accountLabel
+  header.accountAvatar = headerOptions.accountAvatar
+
+  return header
+}
+
+function setHeaderOptions (outliner: OutlineManager) {
+  const currentUser = authn.currentUser()
+  const isAuthenticated = !!currentUser
+  const authState: HeaderAuthState = isAuthenticated ? 'logged-in' : 'logged-out'
+  const layout: Header['layout'] = outliner.context?.environment?.layout === 'mobile' ? 'mobile' : 'desktop'
+  const theme: Header['theme'] = outliner.context?.environment?.theme === 'dark' ? 'dark' : 'light'
+
+  const headerOptions = {
+    logo: SOLID_ICON_URL,
+    helpIcon: HELP_MENU_ICON,
+    helpMenuList: HELP_MENU_LIST,
+    layout,
+    theme,
+    brandLink: '/',
+    authState,
+    loginAction: {
+      label: SIGN_IN_MENU_ITEM
+    } as HeaderMenuItem,
+    signUpAction: {
+      label: SIGN_UP_MENU_ITEM,
+      url: SIGN_UP__MENU_LINK,
+    } as HeaderMenuItem,
+    logoutLabel: SIGN_OUT_MENU_ITEM,
+    accountLabel: isAuthenticated ? ACCOUNT_MENU_LABEL : '',
+    accountAvatar: isAuthenticated ? widgets.findImage(currentUser) : undefined
+  }
+
+  return headerOptions
+}
+
+async function setUserMenu () {
+  const me = authn.currentUser()
+  if (!me) {
+    return []
+  }
+
+  try {
+    await store.fetcher.load(me.doc())
+  } catch (err) {
+    console.error('Unable to load user profile', err)
+  }
+
+  const accountMenu: HeaderAccountMenuItem[] = [
+    {
+      label: utils.label(me),
+      avatar: widgets.findImage(me),
+      webid: me.value,
+      action: 'show-profile'
+    },
+    // TODO add all my available accounts
+  ]
+
+  return accountMenu
 }
diff --git a/src/mainPage/index.ts b/src/mainPage/index.ts
index 8c8b5345..da6df391 100644
--- a/src/mainPage/index.ts
+++ b/src/mainPage/index.ts
@@ -4,17 +4,46 @@
  */
 
 import { LiveStore, NamedNode } from 'rdflib'
-import { getOutliner } from '../index'
-import { createHeader } from './header'
+import { getOutliner, OutlineManager } from '../index'
+import { createHeader, refreshHeader } from './header'
 import { createFooter } from './footer'
+import { createLeftSideMenu, refreshMenu } from './menu'
 
-export default async function initMainPage (store: LiveStore, uri?: string | NamedNode | null) {
-  const outliner = getOutliner(document)
+export { refreshMenu as updateMenuLayout } from './menu'
+export { refreshHeader } from './header'
+
+function ensureMainContent () {
+  let main = document.getElementById('MainContent') as HTMLElement | null
+  if (!main) {
+    main = document.createElement('main')
+    main.id = 'MainContent'
+    main.setAttribute('role', 'main')
+    main.setAttribute('tabindex', '-1')
+    main.setAttribute('aria-live', 'polite')
+    document.body.appendChild(main)
+  }
+  return main
+}
+
+export async function initMainPage (
+  store: LiveStore,
+  uri?: string | NamedNode | null,
+  environment?: any
+) {
+  ensureMainContent()
+  const outliner = getOutliner(document, environment)
   uri = uri || window.location.href
-  let subject = uri
-  if (typeof uri === 'string') subject = store.sym(uri)
+  const subject: NamedNode = typeof uri === 'string' ? store.sym(uri) : uri
+  console.log('-----initMainPage GotoSubject ', subject)
   outliner.GotoSubject(subject, true, undefined, true, undefined)
+
   const header = await createHeader(store, outliner)
+  const menu = createLeftSideMenu(subject, outliner)
   const footer = createFooter(store)
-  return Promise.all([header, footer])
+  return Promise.all([header, menu, footer])
+}
+
+export async function refreshUI (outliner: OutlineManager) {
+  await refreshHeader(outliner)
+  refreshMenu(outliner.context.environment?.layout === 'mobile' ? 'mobile' : 'desktop')
 }
diff --git a/src/mainPage/menu.css b/src/mainPage/menu.css
new file mode 100644
index 00000000..43ea8d22
--- /dev/null
+++ b/src/mainPage/menu.css
@@ -0,0 +1,84 @@
+.menu-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  border: 0;
+  border-radius: var(--border-radius-sm, 0.2rem);
+  padding: 0.5rem 0.75rem;
+  background: transparent;
+  color: var(--color-text-heading, #000000);
+  text-decoration: none;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+}
+
+.menu-item-icon {
+  width: 1rem;
+  height: 1rem;
+  flex: 0 0 1rem;
+  object-fit: contain;
+}
+
+.menu-item-label {
+  min-width: 0;
+}
+
+.menu-item:hover,
+.menu-item:focus {
+  background: var(--color-header-menu-item-hover, #e6dcff);
+}
+
+.menu-item-active,
+.menu-item-active:hover,
+.menu-item-active:focus {
+  background: var(--color-header-menu-item-selected, #cbb9ff);
+  color: var(--color-header-menu-item-text-selected, #7c4cff);
+}
+
+.menu-toggle {
+  position: fixed;
+  top: 0.5rem;
+  left: 2.75rem;
+  z-index: 300;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 1px solid var(--color-border);
+  background: var(--color-background);
+  color: var(--color-text);
+  border-radius: var(--border-radius-sm, 0.2rem);
+  margin: 0;
+}
+
+.menu-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.35);
+  z-index: 100;
+}
+
+.app-nav.mobile-hidden {
+  transform: translateX(-100%);
+  transition: transform 0.25s ease-in-out;
+  position: fixed;
+  left: 0;
+  top: 4.5rem;
+  bottom: 0;
+  z-index: 110;
+  width: min(80vw, 320px);
+}
+
+.app-nav.mobile-visible {
+  transform: translateX(0);
+  display: block;
+  visibility: visible;
+}
\ No newline at end of file
diff --git a/src/mainPage/menu.ts b/src/mainPage/menu.ts
new file mode 100644
index 00000000..cca659ca
--- /dev/null
+++ b/src/mainPage/menu.ts
@@ -0,0 +1,249 @@
+import './menu.css'
+import { OutlineManager } from '../outline/manager'
+import { authSession, authn } from 'solid-logic'
+import { NamedNode } from 'rdflib'
+import { loadProfileFromURI } from '../profileUtils/ownerProfile'
+
+type MenuItem = {
+  id?: string
+  icon?: string
+  paneName?: string
+  label: string
+  onclick: () => void | Promise<void>
+}
+
+const ensureMenuSkeleton = () => {
+  const root = document.querySelector('[role="main"]') || document.body
+
+  let navMenu = document.getElementById('NavMenu') as HTMLElement | null
+  if (!navMenu) {
+    navMenu = document.createElement('nav')
+    navMenu.id = 'NavMenu'
+    navMenu.className = 'app-nav'
+    navMenu.setAttribute('aria-label', 'App navigation')
+
+    const authStateEl = document.createElement('div')
+    authStateEl.id = 'AuthState'
+    authStateEl.className = 'menu-auth-state'
+    navMenu.appendChild(authStateEl)
+
+    const contentEl = document.createElement('div')
+    contentEl.id = 'NavMenuContent'
+    contentEl.className = 'menu-content'
+    navMenu.appendChild(contentEl)
+
+    root.insertBefore(navMenu, root.firstChild)
+  }
+
+  let toggle = document.getElementById('MenuToggleBtn') as HTMLButtonElement | null
+  if (!toggle) {
+    toggle = document.createElement('button')
+    toggle.id = 'MenuToggleBtn'
+    toggle.className = 'menu-toggle'
+    toggle.type = 'button'
+    toggle.setAttribute('aria-label', 'Toggle navigation menu')
+    toggle.textContent = '\u2630'
+    root.insertBefore(toggle, root.firstChild)
+  }
+
+  let overlay = document.getElementById('MenuOverlay') as HTMLElement | null
+  if (!overlay) {
+    overlay = document.createElement('div')
+    overlay.id = 'MenuOverlay'
+    overlay.className = 'menu-overlay'
+    overlay.hidden = true
+    document.body.appendChild(overlay)
+  }
+}
+
+const getMenuItems = async (subject: NamedNode, outliner: any): Promise<MenuItem[]> => {
+  try {
+    const items = await outliner.getDashboardItems(subject)
+    return items.map((element) => {
+      return {
+        icon: element.icon,
+        paneName: element.tabName || element.paneName,
+        label: element.label,
+        onclick: () => openDashboardPane(subject, outliner, element.tabName || element.paneName)
+      }
+    })
+  } catch (error) {
+    console.error('Unable to load navigation menu items', error)
+    return []
+  }
+}
+
+const createMenuButton = (item: MenuItem) => {
+  const button = document.createElement('button')
+  button.className = 'menu-item'
+  button.type = 'button'
+  if (item.paneName) {
+    button.dataset.paneName = item.paneName
+  }
+
+  if (item.icon) {
+    const icon = document.createElement('img')
+    icon.className = 'menu-item-icon'
+    icon.src = item.icon
+    icon.alt = ''
+    icon.setAttribute('aria-hidden', 'true')
+    button.appendChild(icon)
+  }
+
+  const label = document.createElement('span')
+  label.className = 'menu-item-label'
+  label.textContent = item.label
+  button.appendChild(label)
+
+  if (item.id) {
+    button.id = item.id
+  }
+
+  button.addEventListener('click', async () => {
+    await item.onclick()
+  })
+
+  return button
+}
+
+const setActiveMenuItem = (container: HTMLElement, paneName?: string) => {
+  const menuItems = Array.from(container.querySelectorAll<HTMLButtonElement>('.menu-item'))
+  let activeItem: HTMLButtonElement | undefined
+
+  menuItems.forEach((item) => {
+    const isActive = Boolean(paneName) && item.dataset.paneName === paneName
+    item.classList.toggle('menu-item-active', isActive)
+    if (isActive) {
+      item.setAttribute('aria-current', 'page')
+      activeItem = item
+    } else {
+      item.removeAttribute('aria-current')
+    }
+  })
+
+  if (!activeItem && menuItems[0]) {
+    menuItems[0].classList.add('menu-item-active')
+    menuItems[0].setAttribute('aria-current', 'page')
+    container.dataset.activePaneName = menuItems[0].dataset.paneName || ''
+    return
+  }
+
+  if (paneName) {
+    container.dataset.activePaneName = paneName
+  }
+}
+
+const renderMenuItems = async (subject: NamedNode, outliner: OutlineManager, container: HTMLElement) => {
+  const menuItems = await getMenuItems(subject, outliner)
+
+  container.replaceChildren(...menuItems.map(createMenuButton))
+  setActiveMenuItem(container, container.dataset.activePaneName)
+}
+
+export const refreshMenu = (layout: 'mobile' | 'desktop') => {
+  const navMenu = document.getElementById('NavMenu') as HTMLElement | null
+  const toggle = document.getElementById('MenuToggleBtn') as HTMLButtonElement | null
+  const overlay = document.getElementById('MenuOverlay') as HTMLElement | null
+
+  if (!navMenu || !toggle || !overlay) return
+
+  if (layout === 'mobile') {
+    navMenu.classList.add('mobile-hidden')
+    navMenu.classList.remove('mobile-visible')
+    toggle.hidden = false
+    overlay.hidden = true
+    navMenu.hidden = false
+    toggle.setAttribute('aria-expanded', 'false')
+  } else {
+    navMenu.classList.remove('mobile-hidden', 'mobile-visible')
+    toggle.hidden = true
+    overlay.hidden = true
+    navMenu.hidden = false
+    toggle.setAttribute('aria-expanded', 'false')
+  }
+}
+
+export const createLeftSideMenu = async (subject: NamedNode, outliner: OutlineManager) => {
+  ensureMenuSkeleton()
+  const navMenu = document.getElementById('NavMenu') as HTMLElement | null
+  const menuToggle = document.getElementById('MenuToggleBtn') as HTMLElement | null
+  const menuOverlay = document.getElementById('MenuOverlay') as HTMLElement | null
+  const navMenuContent = document.getElementById('NavMenuContent') as HTMLElement | null
+
+  const closeMobileMenu = () => {
+    if (!navMenu || !menuToggle || !menuOverlay) return
+    navMenu.classList.remove('mobile-visible')
+    navMenu.classList.add('mobile-hidden')
+    menuToggle.setAttribute('aria-expanded', 'false')
+    menuOverlay.hidden = true
+  }
+
+  const openMobileMenu = () => {
+    if (!navMenu || !menuToggle || !menuOverlay) return
+    navMenu.classList.remove('mobile-hidden')
+    navMenu.classList.add('mobile-visible')
+    menuToggle.setAttribute('aria-expanded', 'true')
+    menuOverlay.hidden = false
+  }
+
+  if (menuToggle) {
+    menuToggle.hidden = false
+    menuToggle.addEventListener('click', () => {
+      if (navMenu?.classList.contains('mobile-visible')) {
+        closeMobileMenu()
+      } else {
+        openMobileMenu()
+      }
+    })
+  }
+
+  if (menuOverlay) {
+    menuOverlay.addEventListener('click', closeMobileMenu)
+  }
+
+  if (navMenuContent) {
+    await renderMenuItems(subject, outliner, navMenuContent)
+
+    if (!navMenuContent.dataset.authEventsBound) {
+      const refreshMenuItems = async () => {
+        await renderMenuItems(subject, outliner, navMenuContent)
+      }
+
+      authSession.events.on('login', refreshMenuItems)
+      authSession.events.on('logout', refreshMenuItems)
+      authSession.events.on('sessionRestore', refreshMenuItems)
+      navMenuContent.dataset.authEventsBound = 'true'
+    }
+
+    navMenuContent.addEventListener('click', (event) => {
+      const item = (event.target as HTMLElement).closest('.menu-item')
+      if (item instanceof HTMLButtonElement) {
+        setActiveMenuItem(navMenuContent, item.dataset.paneName)
+      }
+      const isMobile = outliner.context?.environment?.layout === 'mobile'
+      if (item && isMobile) {
+        closeMobileMenu()
+      }
+    })
+  }
+
+  refreshMenu(outliner.context?.environment?.layout === 'mobile' ? 'mobile' : 'desktop')
+}
+
+async function openDashboardPane (subject, outliner: any, pane: string): Promise<void> {
+  const me = authn.currentUser()
+  if (me) {
+    subject = me
+  } else {
+    const store = outliner?.context?.store || outliner?.context?.session?.store || outliner?.kb
+    const fetcher = outliner?.context?.fetcher || store?.fetcher
+    if (!store || !fetcher) {
+      throw new Error('Unable to load profile: missing RDF store or fetcher')
+    }
+    subject = await loadProfileFromURI(subject, store, fetcher)
+  }
+  console.log(`-----Opening dashboard pane ${pane} for`, subject)
+  outliner.showDashboard(subject, {
+    pane
+  })
+}
diff --git a/src/outline/context.ts b/src/outline/context.ts
index dffe4f83..07efd698 100644
--- a/src/outline/context.ts
+++ b/src/outline/context.ts
@@ -1,4 +1,4 @@
-import { DataBrowserContext, PaneRegistry } from 'pane-registry'
+import { DataBrowserContext, PaneRegistry, RenderEnvironment } from 'pane-registry'
 import { getOutliner } from '../index'
 import { SolidLogic } from 'solid-logic'
 import { LiveStore } from 'rdflib'
@@ -7,15 +7,19 @@ export function createContext (
   dom: HTMLDocument,
   paneRegistry: PaneRegistry,
   store: LiveStore,
-  logic: SolidLogic
+  logic: SolidLogic,
+  environment?: RenderEnvironment
 ): DataBrowserContext {
   return {
     dom,
     getOutliner,
     session: {
       paneRegistry,
+      // @ts-ignore
       store,
+      // @ts-ignore
       logic
-    }
+    },
+    environment
   }
 }
diff --git a/src/outline/manager.js b/src/outline/manager.js
index dee01991..62eb42d2 100644
--- a/src/outline/manager.js
+++ b/src/outline/manager.js
@@ -11,6 +11,7 @@ import { propertyViews } from './propertyViews'
 import { outlineIcons } from './outlineIcons.js' // @@ chec
 import { UserInput } from './userInput.js'
 import * as queryByExample from './queryByExample.js'
+import { loadProfileFromURI } from '../profileUtils/ownerProfile'
 
 /* global alert XPathResult sourceWidget */
 // XPathResult?
@@ -21,6 +22,7 @@ export default function (context) {
   const dom = context.dom
 
   this.document = context.dom
+  this.context = context
   this.outlineIcons = outlineIcons
   this.labeller = this.labeller || {}
   this.labeller.LanguagePreference = '' // for now
@@ -48,6 +50,20 @@ export default function (context) {
     table.outline = this
   }
 
+  this.getLayoutMode = function () {
+    const envLayout = this.context?.environment?.layout
+    if (envLayout === 'mobile' || envLayout === 'desktop') return envLayout
+
+    if (typeof window !== 'undefined' && window.matchMedia) {
+      const viewportWidth = Math.round(Math.min(window.innerWidth, window.visualViewport?.width || window.innerWidth))
+      const isTouchInput = window.matchMedia('(pointer: coarse)').matches || navigator.maxTouchPoints > 0
+
+      return viewportWidth <= 768 || (isTouchInput && viewportWidth <= 1024) ? 'mobile' : 'desktop'
+    }
+
+    return 'desktop'
+  }
+
   /** benchmark a function **/
   benchmark.lastkbsize = 0
 
@@ -174,6 +190,10 @@ export default function (context) {
     td.classList.add('obj')
     td.setAttribute('notSelectable', 'false')
     td.style.margin = '0.2em'
+    if (!obj) {
+      td.textContent = 'No object available.'
+      return td
+    }
     td.style.border = 'none'
     td.style.padding = '0'
     td.style.verticalAlign = 'top'
@@ -290,85 +310,118 @@ export default function (context) {
    * @param {Function} [options.onClose] If given, will present an X for the dashboard, and call this method when clicked
    * @returns Promise<{Element}> - the div that holds the dashboard
    */
-  async function globalAppTabs (options = {}) {
+  async function globalAppTabs (subject, options = {}) {
     console.log('globalAppTabs @@')
     const div = dom.createElement('div')
     const me = authn.currentUser()
-    if (!me) {
-      alert('Must be logged in for this')
-      throw new Error('Not logged in')
+    const items = await getDashboardItems(subject)
+
+    const selectedItem = options.selectedTab
+      ? items.find(
+        item => item.paneName === options.selectedTab || item.tabName === options.selectedTab
+      )
+      : items[0]
+
+    if (!selectedItem) {
+      return div
     }
-    const items = await getDashboardItems()
 
-    function renderTab (div, item) {
-      div.dataset.globalPaneName = item.tabName || item.paneName
-      div.textContent = item.label
+    div.dataset.globalPaneName = selectedItem.tabName || selectedItem.paneName
+
+    if (typeof options.onClose === 'function') {
+      const closeButton = dom.createElement('button')
+      closeButton.type = 'button'
+      closeButton.className = 'dashboard-close'
+      closeButton.textContent = '×'
+      closeButton.addEventListener('click', options.onClose)
+      div.appendChild(closeButton)
     }
 
-    function renderMain (containerDiv, item) {
-      // Items are pane names
-      const pane = paneRegistry.byName(item.paneName) // 20190701
-      containerDiv.innerHTML = ''
-      const table = containerDiv.appendChild(dom.createElement('table'))
-      const me = authn.currentUser()
-      thisOutline.GotoSubject(
-        item.subject || me,
-        true,
-        pane,
-        false,
-        undefined,
-        table
-      )
+    const content = div.appendChild(dom.createElement('div'))
+    const webId = subject || selectedItem.subject || me
+    if (!webId) {
+      const message = dom.createElement('div')
+      message.textContent =
+        'Unable to display this dashboard item because no profile is loaded.'
+      content.appendChild(message)
+      return div
     }
 
-    div.appendChild(
-      UI.tabs.tabWidget({
-        dom,
-        subject: me,
-        items,
-        renderMain,
-        renderTab,
-        ordered: true,
-        orientation: 0,
-        backgroundColor: '#eeeeee', // black?
-        selectedTab: options.selectedTab,
-        onClose: options.onClose
-      })
+    const pane = paneRegistry.byName(selectedItem.paneName) // 20190701
+    const table = content.appendChild(dom.createElement('table'))
+    thisOutline.GotoSubject(
+      webId,
+      true,
+      pane,
+      false,
+      undefined,
+      table
     )
+
     return div
   }
   this.getDashboard = globalAppTabs
 
-  async function getDashboardItems () {
-    const me = authn.currentUser()
-    if (!me) return []
-    const div = dom.createElement('div')
-    const [pods] = await Promise.all([getPods()])
-    return [
-      {
-        paneName: 'home',
-        label: 'Your stuff',
-        icon: UI.icons.iconBase + 'noun_547570.svg'
-      },
-      {
-        paneName: 'basicPreferences',
-        label: 'Preferences',
-        icon: UI.icons.iconBase + 'noun_Sliders_341315_00000.svg'
-      },
+  async function getDashboardItems (subject) {
+    const panes = [
       {
         paneName: 'profile',
-        label: 'Your Profile',
+        label: 'Profile',
         icon: UI.icons.iconBase + 'noun_15059.svg'
       },
+      {
+        paneName: 'social', // loads socialPane
+        label: 'Friends',
+        icon: UI.icons.originalIconBase + 'foaf/foafTiny.gif'
+      }
+    ]
+
+    // if we are not logged in, we get the webId from the URI
+    const me = authn.currentUser()
+    if (!me) {
+      return panes
+    }
+
+    const [pods] = await Promise.all([getPods(subject, me)])
+
+    panes.push(...pods)
+
+    panes.push(
+      /* not in use since redesign of profile-pane
       {
         paneName: 'editProfile',
         label: 'Edit your Profile',
         icon: UI.icons.iconBase + 'noun_492246.svg'
+      },
+      */
+      {
+        paneName: 'home',
+        label: 'Stuff',
+        icon: UI.icons.iconBase + 'noun_547570.svg'
+      },
+      {
+        paneName: 'basicPreferences',
+        label: 'Preferences',
+        icon: UI.icons.iconBase + 'noun_Sliders_341315_000000.svg'
       }
-    ]
-      .concat(pods)
+    )
+
+    return panes
 
-    async function getPods () {
+    async function getPods (subject, me) {
+      let webId
+      if (me) { // if I am logged in, I continue
+        webId = me
+        try {
+          // need to make sure that profile is loaded
+          await kb.fetcher.load(me.doc())
+        } catch (err) {
+          console.error('Unable to load profile', err)
+          return []
+        }
+      } else { // if I am not logged in, I find teh webId
+        webId = await loadProfileFromURI(subject)
+      }
       async function addPodStorage (pod) { // namedNode
         await loadContainerRepresentation(pod)
         if (kb.holds(pod, ns.rdf('type'), ns.space('Storage'), pod.doc())) {
@@ -387,16 +440,8 @@ export default function (context) {
         }
         // TODO should url.origin be added to pods list when there are no pim:Storage ???
       }
-
-      try {
-        // need to make sure that profile is loaded
-        await kb.fetcher.load(me.doc())
-      } catch (err) {
-        console.error('Unable to load profile', err)
-        return []
-      }
       // load pod's storages from profile
-      let pods = kb.each(me, ns.space('storage'), null, me.doc())
+      let pods = kb.each(webId, ns.space('storage'), null, webId.doc())
       pods.map(async (pod) => {
         // TODO use addPodStorageFromUrl(pod.uri) to check for pim:Storage ???
         await loadContainerRepresentation(pod)
@@ -422,7 +467,7 @@ export default function (context) {
       if (!pods.length) return []
       return pods.map((pod, index) => {
         function split (item) { return item.uri.split('//')[1].slice(0, -1) }
-        const label = split(me).startsWith(split(pod)) ? 'Your storage' : split(pod)
+        const label = split(webId).startsWith(split(pod)) ? 'Storage' : split(pod)
         return {
           paneName: 'folder',
           tabName: `folder-${index}`,
@@ -432,103 +477,110 @@ export default function (context) {
         }
       })
     }
-
-    async function getAddressBooks () {
-      try {
-        const context = await UI.login.findAppInstances(
-          { me, div, dom },
-          ns.vcard('AddressBook')
-        )
-        return (context.instances || []).map((book, index) => ({
-          paneName: 'contact',
-          tabName: `contact-${index}`,
-          label: 'Contacts',
-          subject: book,
-          icon: UI.icons.iconBase + 'noun_15695.svg'
-        }))
-      } catch (err) {
-        console.error('oops in globalAppTabs AddressBook')
-      }
-      return []
-    }
   }
   this.getDashboardItems = getDashboardItems
 
   /**
    * Call this method to show the global dashboard.
-   *
+   * @param {NamedNode} [subject] The subject form the URI
    * @param {Object} [options] A set of options that can be passed
    * @param {string} [options.pane] To open a specific dashboard pane
    * @returns {Promise<void>}
    */
-  async function showDashboard (options = {}) {
+  async function showDashboard (subject, options = {}) {
     const dashboardContainer = getDashboardContainer()
     const outlineContainer = getOutlineContainer()
-    // reuse dashboard if already children already is inserted
-    if (dashboardContainer.childNodes.length > 0 && options.pane) {
-      outlineContainer.style.display = 'none'
-      dashboardContainer.style.display = 'inherit'
-      const tab = dashboardContainer.querySelector(
-        `[data-global-pane-name="${options.pane}"]`
-      )
-      if (tab) {
-        tab.click()
+
+    function showContainer (container) {
+      container.removeAttribute('hidden')
+      container.style.display = ''
+    }
+
+    function hideContainer (container) {
+      container.setAttribute('hidden', '')
+      container.style.display = 'none'
+    }
+
+    // reuse existing dashboard if already rendered for the requested pane
+    if (dashboardContainer.childNodes.length > 0) {
+      const existingDashboard = dashboardContainer.firstElementChild
+      if (
+        existingDashboard &&
+        options.pane &&
+        existingDashboard.dataset.globalPaneName === options.pane
+      ) {
+        hideContainer(outlineContainer)
+        showContainer(dashboardContainer)
         return
       }
-      console.warn(
-        'Did not find the referred tab in global dashboard, will open first one'
-      )
+      dashboardContainer.innerHTML = ''
     }
 
-    // create a new dashboard if not already present
-    const dashboard = await globalAppTabs({
-      selectedTab: options.pane,
-      onClose: closeDashboard
-    })
+    // create a new dashboard view without tab navigation
+    const dashboard = await globalAppTabs(
+      subject,
+      {
+        selectedTab: options.pane,
+        // onClose: closeDashboard -> we do not need to close tabs anymore
+      }
+    )
 
     // close the dashboard if user log out
     authSession.events.on('logout', closeDashboard)
 
     // finally - switch to showing dashboard
-    outlineContainer.style.display = 'none'
+    hideContainer(outlineContainer)
+    showContainer(dashboardContainer)
     dashboardContainer.appendChild(dashboard)
-    const tab = dashboardContainer.querySelector(
-      `[data-global-pane-name="${options.pane}"]`
-    )
-    if (tab) {
-      tab.click()
-    }
 
     function closeDashboard () {
-      dashboardContainer.style.display = 'none'
-      outlineContainer.style.display = 'inherit'
+      hideContainer(dashboardContainer)
+      showContainer(outlineContainer)
     }
   }
   this.showDashboard = showDashboard
 
   function getDashboardContainer () {
-    return getOrCreateContainer('GlobalDashboard')
+    return getOrCreateContainer('GlobalDashboard', 'Dashboard')
   }
 
   function getOutlineContainer () {
-    return getOrCreateContainer('outline')
+    return getOrCreateContainer('OutlineView', 'Resource browser')
   }
 
   /**
    * Get element with id or create a new on the fly with that id
    *
    * @param {string} id The ID of the element you want to get or create
+   * @param {string} [ariaLabel] Optional aria-label for accessibility
    * @returns {HTMLElement}
    */
-  function getOrCreateContainer (id) {
+  function getOrCreateContainer (id, ariaLabel) {
+    if (id === 'outline') {
+      const existingOutline = document.getElementById('outline')
+      if (existingOutline) {
+        return existingOutline
+      }
+
+      const outlineHost = document.getElementById('OutlineView')
+      if (outlineHost) {
+        const outlineTable = document.createElement('table')
+        outlineTable.id = 'outline'
+        outlineTable.style.width = '100%'
+        outlineHost.appendChild(outlineTable)
+        return outlineTable
+      }
+    }
+
     return (
       document.getElementById(id) ||
       (() => {
-        const dashboardContainer = document.createElement('div')
-        dashboardContainer.id = id
+        const container = document.createElement('section')
+        container.id = id
+        if (ariaLabel) container.setAttribute('aria-label', ariaLabel)
         const mainContainer =
           document.querySelector('[role="main"]') || document.body
-        return mainContainer.appendChild(dashboardContainer)
+        return mainContainer.appendChild(container)
       })()
     )
   }
@@ -1577,7 +1629,7 @@ export default function (context) {
             outline.GotoSubject(object, true)
             /* //deal with this later
             deselectAll();
-            var newTr=dom.getElementById('outline').lastChild;
+            var newTr=dom.getElementById('OutlineView').lastChild;
             setSelected(newTr.firstChild.firstChild.childNodes[1].lastChild,true);
             function setSelectedAfterward(uri){
                 deselectAll();
@@ -2239,10 +2291,11 @@ export default function (context) {
   @param pane    -- optional -- pane to be used for expanded display
   @param solo    -- optional -- the window will be cleared out and only the subject displayed
   @param referer -- optional -- where did we hear about this from anyway?
-  @param table   -- option  -- a table element in which to put the outline.
+  @param table   -- option  -- default is an HTML table element in which to put the outline.
 */
   this.GotoSubject = function (subject, expand, pane, solo, referrer, table) {
-    table = table || dom.getElementById('outline') // if does not exist just add one? nowhere to out it
+    console.log('-----GotoSubject ', subject.termType, subject.value)
+    table = table || getOutlineContainer() // if does not exist create a compatible host in the current shell
     if (solo) {
       UI.utils.emptyNode(table)
       table.style.width = '100%'
diff --git a/src/outline/userInput.js b/src/outline/userInput.js
index cdc24588..e6a7af47 100644
--- a/src/outline/userInput.js
+++ b/src/outline/userInput.js
@@ -1418,8 +1418,11 @@ export function UserInput (outline) {
         false
       )
       window.addEventListener('mousedown', UserInput.Mousedown, false)
-      document.getElementById('outline').oncontextmenu = function () {
-        return false
+      const outlineView = document.getElementById('OutlineView')
+      if (outlineView) {
+        outlineView.oncontextmenu = function () {
+          return false
+        }
       }
 
       if (e.button === 2) {
diff --git a/src/pad/padPane.ts b/src/pad/padPane.ts
index 7003d960..1558235b 100644
--- a/src/pad/padPane.ts
+++ b/src/pad/padPane.ts
@@ -16,6 +16,7 @@ const paneDef: PaneDefinition = {
 
   // Does the subject deserve an pad pane?
   label: function (subject, context) {
+    // @ts-ignore
     const t = (context.session.store as Store).findTypeURIs(subject)
     if (t['http://www.w3.org/ns/pim/pad#Notepad']) {
       return 'pad'
@@ -26,6 +27,7 @@ const paneDef: PaneDefinition = {
   mintClass: ns.pad('Notepad'),
 
   mintNew: function (context, newPaneOptions: any) {
+    // @ts-ignore
     const store = context.session.store as Store
     const updater = store.updater
     if (newPaneOptions.me && !newPaneOptions.me.uri) {
@@ -77,6 +79,7 @@ const paneDef: PaneDefinition = {
   // @@ TODO Set better type for paneOptions
   render: function (subject, context, paneOptions: any) {
     const dom = context.dom
+    // @ts-ignore
     const store = context.session.store as Store
     // Utility functions
     const complainIfBad = function (ok: boolean, message: string) {
diff --git a/src/profileUtils/ownerProfile.ts b/src/profileUtils/ownerProfile.ts
new file mode 100644
index 00000000..de60d72c
--- /dev/null
+++ b/src/profileUtils/ownerProfile.ts
@@ -0,0 +1,67 @@
+/*
+* Utility functions to help load the profile
+* especially when I am not logged in
+*/
+
+import { Fetcher, IndexedFormula, NamedNode, sym } from 'rdflib'
+import { ns } from 'solid-ui'
+
+const DEFAULT_PROFILE_PATH = 'profile/card#me'
+
+export async function loadProfileFromURI (
+  uri: NamedNode,
+  store: IndexedFormula,
+  fetcher: Fetcher
+): Promise<NamedNode> {
+  const pod = uri.site().uri
+  // TODO: This is a hack - we cannot assume that the profile is at this document, but we will live with it for now
+  const webId = sym(`${pod}${DEFAULT_PROFILE_PATH}`)
+  try {
+    console.log('-----Trying to load prefixed pod profile', webId)
+    await fetcher.load(webId)
+    return webId
+  } catch (err) {
+    // continue
+  }
+
+  // we try a prefixed pod structure
+  try {
+    const uriUrl = new URL(uri.uri)
+    const pathSegments = uriUrl.pathname.split('/').filter(Boolean)
+    if (pathSegments.length > 0) {
+      const derivedPod = `${uriUrl.origin}/${pathSegments[0]}/`
+      const derivedWebId = sym(`${derivedPod}${DEFAULT_PROFILE_PATH}`)
+      console.log('-----Trying to load suffixed pod profile', derivedWebId)
+      await fetcher.load(derivedWebId)
+      return derivedWebId
+    }
+  } catch (err) {
+    // continue
+  }
+
+  try {
+    await fetcher.load(uri)
+  } catch (err) {
+    return uri
+  }
+
+  const primaryTopic = store.any(uri, ns.foaf('primaryTopic'), null, uri.doc())
+  if (primaryTopic && primaryTopic.termType === 'NamedNode') {
+    try {
+      await fetcher.load(primaryTopic as NamedNode)
+      return primaryTopic as NamedNode
+    } catch (err) {
+      return uri
+    }
+  }
+
+  return uri
+}
+
+export function getName (store: IndexedFormula, ownersProfile: NamedNode): string {
+  return (
+    store.anyValue(ownersProfile, ns.vcard('fn'), null, ownersProfile.doc()) ||
+    store.anyValue(ownersProfile, ns.foaf('name'), null, ownersProfile.doc()) ||
+    new URL(ownersProfile.uri).host.split('.')[0]
+  )
+}
diff --git a/src/registerPanes.js b/src/registerPanes.js
index dff80c37..f43c3444 100644
--- a/src/registerPanes.js
+++ b/src/registerPanes.js
@@ -51,10 +51,10 @@ export function registerPanes (register) {
   const editProfileView = profilePane.editor
   if (!editProfileView) {
     console.log('@@@ editProfileView', 'profilePane is not providing an editor pane')
+  } else {
+    register(editProfileView) // Edit my profile.
   }
 
-  register(editProfileView) // Edit my profile.
-
   register(trustedApplications) // must be registered before basicPreferences
   register(dashboardPane)
   register(basicPreferences)
diff --git a/src/socialPane.js b/src/socialPane.js
index ee432446..f9ec952d 100644
--- a/src/socialPane.js
+++ b/src/socialPane.js
@@ -17,17 +17,7 @@ export const socialPane = {
 
   name: 'social',
 
-  label: function (subject, context) {
-    const kb = context.session.store
-    const types = kb.findTypeURIs(subject)
-    if (
-      types[UI.ns.foaf('Person').uri] ||
-      types[UI.ns.vcard('Individual').uri]
-    ) {
-      return 'Friends'
-    }
-    return null
-  },
+  label: () => { return 'Friends' }, // we do not care if it is a webID or not
 
   render: function (s, context) {
     const dom = context.dom
diff --git a/src/tabbed/tabbedPane.ts b/src/tabbed/tabbedPane.ts
index fa8dbe7b..c9b035d1 100644
--- a/src/tabbed/tabbedPane.ts
+++ b/src/tabbed/tabbedPane.ts
@@ -16,6 +16,7 @@ const TabbedPane: PaneDefinition = {
 
   // Does the subject deserve this pane?
   label: (subject, context) => {
+    // @ts-ignore
     const kb = context.session.store as Store
     const typeURIs = kb.findTypeURIs(subject)
     if (ns.meeting('Cluster').uri in typeURIs) {
@@ -26,6 +27,7 @@ const TabbedPane: PaneDefinition = {
 
   render: (subject, context) => {
     const dom = context.dom
+    // @ts-ignore
     const store = context.session.store as Store
     const div = dom.createElement('div')
 
diff --git a/test/unit/meeting/Schedule/index.html b/test/unit/meeting/Schedule/index.html
index fe392cdc..753e3d22 100644
--- a/test/unit/meeting/Schedule/index.html
+++ b/test/unit/meeting/Schedule/index.html
@@ -64,9 +64,21 @@
     ></script>
   </head>
   <body>
-    <div class="TabulatorOutline" id="DummyUUID">
-      <table id="outline"></table>
-    </div>
-    <div class="TabulatorOutline" id="FormTarget"></div>
+    <main id="MainContent" role="main" tabindex="-1" aria-live="polite">
+      <section id="OutlineView" class="outline-view" aria-label="Resource browser">
+       
+      </section>
+
+      <section
+      id="GlobalDashboard"
+      class="global-dashboard"
+      aria-label="Dashboard"
+      hidden
+      >
+        
+      </section>
+
+    </main>
+   
   </body>
 </html>
diff --git a/tsconfig.dev.json b/tsconfig.dev.json
index 8a4f7fa3..1a84cca6 100644
--- a/tsconfig.dev.json
+++ b/tsconfig.dev.json
@@ -1,7 +1,14 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "rootDir": "."
+    "rootDir": ".",
+    "baseUrl": ".",
+    "preserveSymlinks": true,
+    "paths": {
+      "rdflib": ["node_modules/rdflib"],
+      "solid-logic": ["node_modules/solid-logic"],
+      "solid-ui": ["node_modules/solid-ui"]
+    }
   },
   "include": ["dev/index.ts", "dev/**/*.ts", "typings/**/*"]
 }
diff --git a/tsconfig.json b/tsconfig.json
index cce40837..f3ba4d21 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,9 +3,9 @@
     /* Basic Options */
     "target": "ES2019" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */,
     "module": "ESNext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "lib": [
-       "DOM",
+      "DOM",
       "ES2019"
     ] /* Specify library files to be included in the compilation. */,
     // "allowJs": true,                       /* Allow javascript files to be compiled. */
diff --git a/webpack.config.mjs b/webpack.config.mjs
index 922b356c..83fcca40 100644
--- a/webpack.config.mjs
+++ b/webpack.config.mjs
@@ -21,6 +21,10 @@ const common = {
         test: /\.css$/,
         use: ['style-loader', 'css-loader'],
       },
+      {
+        test: /\.(png|jpe?g|gif|webp|avif|svg)$/i,
+        type: 'asset/resource'
+      },
       {
         test: /\.ttl$/i,
         type: 'asset/source'
@@ -38,7 +42,7 @@ const common = {
     'solid-logic': 'SolidLogic',
     SolidLogic: 'SolidLogic',
     'solid-ui': 'UI',
-    UI: 'UI',
+    UI: 'UI'
   },
   devtool: 'source-map',
 }