diff --git a/plugins/network/src/NetworkApp.vue b/plugins/network/src/NetworkApp.vue
index e074538..f2bad90 100644
--- a/plugins/network/src/NetworkApp.vue
+++ b/plugins/network/src/NetworkApp.vue
@@ -1,36 +1,46 @@
 <template>
-  <AtlasPageShell
-    hero
-    compact
-    eyebrow="OHDSI · Network"
-    title="Network"
-    subtitle="Manage federated network studies — execute, submit results, and register this site."
-  >
+  <div class="network-app-body">
+    <SectionHero
+      eyebrow="OHDSI · Network"
+      :title="isConfig ? 'Configuration' : 'Network'"
+      :subtitle="isConfig
+        ? 'Register and manage this site’s connection to the research network.'
+        : 'Run federated network studies against this site and track your submissions.'"
+    />
     <!-- No in-plugin login: access is gated by the trex session, and all API
          calls go through the network-api function proxy, which attaches the
          site's machine token server-side. -->
-    <AtlasTabs v-model="tab" class="mb-4">
-      <AtlasTab value="studies">Studies</AtlasTab>
-      <AtlasTab value="submit">Submit</AtlasTab>
-      <AtlasTab value="mine">My submissions</AtlasTab>
-      <AtlasTab value="register">Register site</AtlasTab>
-    </AtlasTabs>
-    <v-window v-model="tab">
-      <v-window-item value="studies"><StudiesToExecuteView /></v-window-item>
-      <v-window-item value="submit"><SubmitResultsView /></v-window-item>
-      <v-window-item value="mine"><MySubmissionsView /></v-window-item>
-      <v-window-item value="register"><RegisterSiteView /></v-window-item>
-    </v-window>
-  </AtlasPageShell>
+    <RegisterSiteView v-if="isConfig" />
+    <template v-else>
+      <StudiesToExecuteView />
+      <AtlasDivider class="network-app__divider" />
+      <SubmitResultsView />
+      <AtlasDivider class="network-app__divider" />
+      <MySubmissionsView />
+    </template>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { AtlasPageShell, AtlasTabs, AtlasTab } from '@ohdsi/atlas-ui';
+import { computed } from 'vue';
+import { AtlasDivider } from '@ohdsi/atlas-ui';
+import SectionHero from './components/SectionHero.vue';
 import StudiesToExecuteView from './views/StudiesToExecuteView.vue';
 import SubmitResultsView from './views/SubmitResultsView.vue';
 import MySubmissionsView from './views/MySubmissionsView.vue';
 import RegisterSiteView from './views/RegisterSiteView.vue';
 
-const tab = ref('studies');
+const props = withDefaults(defineProps<{ section?: 'main' | 'configuration' }>(), {
+  section: 'main',
+});
+const isConfig = computed(() => props.section === 'configuration');
 </script>
+
+<style scoped>
+.network-app__divider {
+  margin: 28px 0;
+}
+.network-app-body {
+  padding: 20px 24px;
+}
+</style>
diff --git a/plugins/network/src/api/authToken.ts b/plugins/network/src/api/authToken.ts
index 46afa66..d2bcf46 100644
--- a/plugins/network/src/api/authToken.ts
+++ b/plugins/network/src/api/authToken.ts
@@ -1,9 +1,70 @@
 // Shared auth token for backend calls. Set by main.ts from the host's
-// authContext on mount; read by ApiClient + HadesClient. Replaces the
-// () => null stub — Atlas3 provides a Bearer token instead.
+// authContext on mount; read by graphqlClient + hadesClient. Replaces the
+// sibyl session-cookie assumption — Atlas3 provides a Bearer token instead.
+//
+// Under a d2e/Atlas host the token is a Logto RS256 access token, which trex
+// core's HS256-only auth middleware rejects — requests would run as the
+// grant-less `anon` Postgres role. ensureAuthToken() exchanges it via the
+// /trex-token function for a trex-native token before it is sent. Tokens that
+// already carry aud "authenticated" are trex-native and are sent unchanged.
 let token: string | null = null;
-export function setAuthToken(t: string | null): void { token = t; }
-export function getAuthToken(): string | null { return token; }
+let trexToken: string | null = null;
+let exchange: Promise<string | null> | null = null;
+
+export function setAuthToken(t: string | null): void {
+  token = t;
+  trexToken = null;
+  exchange = null;
+}
+
+function jwtPayload(t: string): Record<string, unknown> | null {
+  try {
+    const b64 = t.split('.')[1].replace(/-/g, '+').replace(/_/g, '/');
+    return JSON.parse(atob(b64)) as Record<string, unknown>;
+  } catch {
+    return null;
+  }
+}
+
+function expiresSoon(t: string): boolean {
+  const exp = jwtPayload(t)?.exp;
+  return typeof exp === 'number' && exp * 1000 < Date.now() + 30_000;
+}
+
+async function exchangeToken(t: string): Promise<string | null> {
+  try {
+    const resp = await fetch(`${location.origin}/trex-token`, {
+      method: 'POST',
+      headers: { Authorization: `Bearer ${t}` },
+    });
+    if (!resp.ok) return null;
+    const body = await resp.json();
+    return typeof body.access_token === 'string' ? body.access_token : null;
+  } catch {
+    return null;
+  }
+}
+
+/** Resolve the token authHeaders() will send; await before any backend request. */
+export async function ensureAuthToken(): Promise<void> {
+  if (!token) return;
+  const payload = jwtPayload(token);
+  if (!payload || payload.aud === 'authenticated') return;
+  if (trexToken && !expiresSoon(trexToken)) return;
+  if (!exchange) {
+    exchange = exchangeToken(token).finally(() => {
+      exchange = null;
+    });
+  }
+  const p = exchange;
+  trexToken = (await p) ?? trexToken;
+}
+
+export function getAuthToken(): string | null {
+  return trexToken ?? token;
+}
+
 export function authHeaders(): Record<string, string> {
-  return token ? { Authorization: `Bearer ${token}` } : {};
+  const t = trexToken ?? token;
+  return t ? { Authorization: `Bearer ${t}` } : {};
 }
diff --git a/plugins/network/src/api/client.ts b/plugins/network/src/api/client.ts
index 0c69d3b..597e569 100644
--- a/plugins/network/src/api/client.ts
+++ b/plugins/network/src/api/client.ts
@@ -5,6 +5,8 @@ export class ApiClientError extends Error {
   }
 }
 
+import { ensureAuthToken } from './authToken';
+
 type Fetch = typeof fetch;
 
 export class ApiClient {
@@ -18,6 +20,7 @@ export class ApiClient {
   ) {}
 
   private async request<T>(method: string, path: string, body?: unknown): Promise<T> {
+    await ensureAuthToken();
     const headers: Record<string, string> = {};
     const token = this.getToken();
     if (token) headers.authorization = `Bearer ${token}`;
diff --git a/plugins/network/src/api/hadesClient.ts b/plugins/network/src/api/hadesClient.ts
index 4bc7a49..0cbaa79 100644
--- a/plugins/network/src/api/hadesClient.ts
+++ b/plugins/network/src/api/hadesClient.ts
@@ -1,10 +1,11 @@
 import type { HadesJobDetail, RunRequest } from './hadesTypes';
-import { authHeaders } from './authToken';
+import { authHeaders, ensureAuthToken } from './authToken';
 
 export class HadesClient {
   constructor(private base: string, private fetchImpl: typeof fetch = fetch.bind(globalThis)) {}
 
   private async req<T>(path: string, init?: RequestInit): Promise<T> {
+    await ensureAuthToken();
     const resp = await this.fetchImpl(`${this.base}${path}`, {
       headers: { 'Content-Type': 'application/json', ...authHeaders() },
       ...init,
diff --git a/plugins/network/src/components/SectionHero.vue b/plugins/network/src/components/SectionHero.vue
new file mode 100644
index 0000000..7d74494
--- /dev/null
+++ b/plugins/network/src/components/SectionHero.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="section-hero">
+    <div class="section-hero__eyebrow-row">
+      <span class="section-hero__eyebrow">{{ eyebrow }}</span>
+      <span class="section-hero__accent" />
+    </div>
+    <div class="section-hero__head">
+      <div>
+        <h1 class="section-hero__title">{{ title }}</h1>
+        <p v-if="subtitle" class="section-hero__subtitle">{{ subtitle }}</p>
+      </div>
+      <div class="section-hero__actions"><slot name="actions" /></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{ eyebrow: string; title: string; subtitle?: string }>();
+</script>
+
+<style scoped>
+/* Flat rendition of the AtlasPageShell hero header (same metrics as
+   atlas-ui's page-header) — no surface of its own, so it can sit inside the
+   StudiesLayout card without nesting boxes. */
+.section-hero {
+  margin-bottom: 20px;
+}
+.section-hero__eyebrow-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 8px;
+}
+.section-hero__eyebrow {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: rgb(var(--v-theme-primary));
+}
+.section-hero__accent {
+  display: inline-block;
+  width: 28px;
+  height: 2px;
+  background: rgb(var(--v-theme-orange, 235, 102, 34));
+  border-radius: 2px;
+}
+.section-hero__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+.section-hero__title {
+  font-size: 26px;
+  font-weight: 300;
+  line-height: 1.2;
+  letter-spacing: 0.01em;
+  color: rgb(var(--v-theme-primary));
+  margin: 0;
+}
+.section-hero__subtitle {
+  font-size: 13px;
+  color: rgb(var(--v-theme-on-surface-variant));
+  margin: 4px 0 0;
+  max-width: 640px;
+  line-height: 1.5;
+}
+.section-hero__actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-shrink: 0;
+}
+</style>
diff --git a/plugins/network/src/config.ts b/plugins/network/src/config.ts
index a112c48..9266c48 100644
--- a/plugins/network/src/config.ts
+++ b/plugins/network/src/config.ts
@@ -26,7 +26,7 @@ export function loadConfig(): NetworkConfig {
       injected.proxyUrl ??
       env.VITE_PROXY_URL ??
       (typeof location !== 'undefined'
-        ? `${location.origin}/plugins/network-api/network-api`
+        ? `${location.origin}/network-api`
         : ''),
   };
 }
diff --git a/plugins/network/src/main.ts b/plugins/network/src/main.ts
index 1d26d93..9674e44 100644
--- a/plugins/network/src/main.ts
+++ b/plugins/network/src/main.ts
@@ -46,6 +46,7 @@ export interface PluginProps {
   uiFilesUrl?: string;
   authContext?: unknown;
   messageBus?: unknown;
+  section?: 'main' | 'configuration';
 }
 
 function getSharedDefaults(): Record<string, Record<string, unknown>> {
@@ -75,7 +76,7 @@ const vueLifecycles = singleSpaVue({
   createApp,
   appOptions: {
     render() {
-      return h(NetworkApp);
+      return h(NetworkApp, { section: (this as PluginProps).section });
     },
   },
   handleInstance(app) {
diff --git a/plugins/notebook-plugin/src/NotebookApp.vue b/plugins/notebook-plugin/src/NotebookApp.vue
index 7bdaee2..08b1ee9 100644
--- a/plugins/notebook-plugin/src/NotebookApp.vue
+++ b/plugins/notebook-plugin/src/NotebookApp.vue
@@ -1,22 +1,23 @@
 <template>
   <v-app class="notebook-plugin">
     <v-main>
-      <!-- List view renders AtlasPageShell, which supplies its own page padding
-           (matching every other plugin). Keep inner padding for the editor. -->
-      <NotebookListView
-        v-if="view === 'list'"
-        @open="openNotebook"
-        @new="newNotebook"
-      />
-      <div
-        v-else
-        class="pa-4"
-      >
-        <NotebookEditorView
-          :id="activeId"
-          @back="goToList"
-          @saved="onSaved"
-        />
+      <!-- Single boxed surface (sidebar-less) matching the Studies layout: one
+           card with a padded, scrollable body. Each view renders its own flat
+           SectionHero inside — no nested page-card. -->
+      <div class="notebook-layout">
+        <div class="notebook-shell">
+          <NotebookListView
+            v-if="view === 'list'"
+            @open="openNotebook"
+            @new="newNotebook"
+          />
+          <NotebookEditorView
+            v-else
+            :id="activeId"
+            @back="goToList"
+            @saved="onSaved"
+          />
+        </div>
       </div>
     </v-main>
   </v-app>
@@ -90,4 +91,23 @@ onMounted(() => {
 
 <style scoped>
 .notebook-plugin { background: transparent; }
+
+/* Mirrors the Studies layout so the notebook plugin reads as the same product:
+   a single rounded card floating on the page background, its body owning the
+   scroll. Sidebar-less (the notebook is its own full detail). */
+.notebook-layout {
+  height: calc(100vh - 60px);
+  padding: 24px;
+  background: rgb(var(--v-theme-background));
+  overflow: hidden;
+}
+.notebook-shell {
+  display: flex;
+  flex-direction: column;
+  background: rgb(var(--v-theme-surface));
+  border-radius: 12px;
+  box-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 8px 24px rgba(15, 23, 42, .04);
+  height: 100%;
+  overflow: hidden;
+}
 </style>
diff --git a/plugins/notebook-plugin/src/api/authToken.ts b/plugins/notebook-plugin/src/api/authToken.ts
index af433a5..d189053 100644
--- a/plugins/notebook-plugin/src/api/authToken.ts
+++ b/plugins/notebook-plugin/src/api/authToken.ts
@@ -1,8 +1,66 @@
 // Shared auth token for backend calls. Set by main.ts from the host's
 // authContext on mount; read by graphqlClient. Replaces the
 // sibyl session-cookie assumption — Atlas3 provides a Bearer token instead.
+//
+// Under a d2e/Atlas host the token is a Logto RS256 access token, which trex
+// core's HS256-only auth middleware rejects — requests would run as the
+// grant-less `anon` Postgres role. ensureAuthToken() exchanges it via the
+// /trex-token function for a trex-native token before it is sent. Tokens that
+// already carry aud "authenticated" are trex-native and are sent unchanged.
 let token: string | null = null;
-export function setAuthToken(t: string | null): void { token = t; }
+let trexToken: string | null = null;
+let exchange: Promise<string | null> | null = null;
+
+export function setAuthToken(t: string | null): void {
+  token = t;
+  trexToken = null;
+  exchange = null;
+}
+
+function jwtPayload(t: string): Record<string, unknown> | null {
+  try {
+    const b64 = t.split('.')[1].replace(/-/g, '+').replace(/_/g, '/');
+    return JSON.parse(atob(b64)) as Record<string, unknown>;
+  } catch {
+    return null;
+  }
+}
+
+function expiresSoon(t: string): boolean {
+  const exp = jwtPayload(t)?.exp;
+  return typeof exp === 'number' && exp * 1000 < Date.now() + 30_000;
+}
+
+async function exchangeToken(t: string): Promise<string | null> {
+  try {
+    const resp = await fetch(`${location.origin}/trex-token`, {
+      method: 'POST',
+      headers: { Authorization: `Bearer ${t}` },
+    });
+    if (!resp.ok) return null;
+    const body = await resp.json();
+    return typeof body.access_token === 'string' ? body.access_token : null;
+  } catch {
+    return null;
+  }
+}
+
+/** Resolve the token authHeaders() will send; await before any backend request. */
+export async function ensureAuthToken(): Promise<void> {
+  if (!token) return;
+  const payload = jwtPayload(token);
+  if (!payload || payload.aud === 'authenticated') return;
+  if (trexToken && !expiresSoon(trexToken)) return;
+  if (!exchange) {
+    exchange = exchangeToken(token).finally(() => {
+      exchange = null;
+    });
+  }
+  const p = exchange;
+  trexToken = (await p) ?? trexToken;
+}
+
 export function authHeaders(): Record<string, string> {
-  return token ? { Authorization: `Bearer ${token}` } : {};
+  const t = trexToken ?? token;
+  return t ? { Authorization: `Bearer ${t}` } : {};
 }
diff --git a/plugins/notebook-plugin/src/api/graphqlClient.ts b/plugins/notebook-plugin/src/api/graphqlClient.ts
index 38386d0..e6b4323 100644
--- a/plugins/notebook-plugin/src/api/graphqlClient.ts
+++ b/plugins/notebook-plugin/src/api/graphqlClient.ts
@@ -1,8 +1,9 @@
-import { authHeaders } from './authToken';
+import { authHeaders, ensureAuthToken } from './authToken';
 
 export class GraphqlClient {
   constructor(private endpoint: string) {}
   async request<T>(query: string, variables: Record<string, unknown> = {}): Promise<T> {
+    await ensureAuthToken();
     const resp = await fetch(this.endpoint, {
       method: "POST",
       headers: { "Content-Type": "application/json", ...authHeaders() },
diff --git a/plugins/notebook-plugin/src/components/SectionHero.vue b/plugins/notebook-plugin/src/components/SectionHero.vue
new file mode 100644
index 0000000..ce843f2
--- /dev/null
+++ b/plugins/notebook-plugin/src/components/SectionHero.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="section-hero">
+    <div class="section-hero__eyebrow-row">
+      <span class="section-hero__eyebrow">{{ eyebrow }}</span>
+      <span class="section-hero__accent" />
+    </div>
+    <div class="section-hero__head">
+      <div>
+        <h1 class="section-hero__title">{{ title }}</h1>
+        <p v-if="subtitle" class="section-hero__subtitle">{{ subtitle }}</p>
+      </div>
+      <div class="section-hero__actions"><slot name="actions" /></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{ eyebrow: string; title: string; subtitle?: string }>();
+</script>
+
+<style scoped>
+/* Flat rendition of the AtlasPageShell hero header (same metrics as
+   atlas-ui's page-header) — no surface of its own, so it can sit inside the
+   notebook shell card without nesting boxes. Mirrors the Studies SectionHero. */
+.section-hero {
+  margin-bottom: 20px;
+}
+.section-hero__eyebrow-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 8px;
+}
+.section-hero__eyebrow {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: rgb(var(--v-theme-primary));
+}
+.section-hero__accent {
+  display: inline-block;
+  width: 28px;
+  height: 2px;
+  background: rgb(var(--v-theme-orange, 235, 102, 34));
+  border-radius: 2px;
+}
+.section-hero__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+.section-hero__title {
+  font-size: 26px;
+  font-weight: 300;
+  line-height: 1.2;
+  letter-spacing: 0.01em;
+  color: rgb(var(--v-theme-primary));
+  margin: 0;
+}
+.section-hero__subtitle {
+  font-size: 13px;
+  color: rgb(var(--v-theme-on-surface-variant));
+  margin: 4px 0 0;
+  max-width: 640px;
+  line-height: 1.5;
+}
+.section-hero__actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-shrink: 0;
+}
+</style>
diff --git a/plugins/notebook-plugin/src/store/useNotebooksStore.ts b/plugins/notebook-plugin/src/store/useNotebooksStore.ts
index 4358ee4..ba73495 100644
--- a/plugins/notebook-plugin/src/store/useNotebooksStore.ts
+++ b/plugins/notebook-plugin/src/store/useNotebooksStore.ts
@@ -28,8 +28,14 @@ const UPDATE = `mutation($id: UUID!, $patch: NotebookDocumentPatch!) {
   }
 }`;
 
+// notebook.document.created_by is a uuid column; Logto-issued user ids are
+// short alphanumerics, so anything non-UUID must be omitted or the mutation
+// fails input validation (HTTP 400).
+const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+
 function currentUserId(): string | null {
-  return (window as unknown as { __notebookAuthUserId?: string | null }).__notebookAuthUserId ?? null;
+  const id = (window as unknown as { __notebookAuthUserId?: string | null }).__notebookAuthUserId ?? null;
+  return id && UUID_RE.test(id) ? id : null;
 }
 
 export const useNotebooksStore = defineStore("notebooks", () => {
diff --git a/plugins/notebook-plugin/src/views/NotebookEditorView.vue b/plugins/notebook-plugin/src/views/NotebookEditorView.vue
index f2654f9..cb57de7 100644
--- a/plugins/notebook-plugin/src/views/NotebookEditorView.vue
+++ b/plugins/notebook-plugin/src/views/NotebookEditorView.vue
@@ -1,19 +1,35 @@
 <template>
-  <div class="notebook-editor">
-    <div class="d-flex align-center mb-3" style="gap: 8px;">
-      <AtlasIconButton icon="mdi-arrow-left" ariaLabel="Back" @click="emit('back')" />
-      <AtlasTextField
-        v-model="name"
-        label="Name"
-        style="max-width: 320px;"
-      />
+  <div class="notebook-editor studies-section-body">
+    <button class="notebook-editor__back" @click="emit('back')">
+      <AtlasIcon icon="mdi-arrow-left" size="16" />
+      <span>Notebooks</span>
+    </button>
+
+    <SectionHero
+      eyebrow="OHDSI · Notebook"
+      :title="props.id ? 'Edit notebook' : 'New notebook'"
+      subtitle="Write and run analytical cells against this site's data."
+    >
+      <template #actions>
+        <AtlasChip v-if="dirty" tone="warning" size="sm">Unsaved</AtlasChip>
+        <AtlasButton
+          variant="primary"
+          prepend-icon="mdi-content-save"
+          :loading="saving"
+          :disabled="!name"
+          @click="save"
+        >Save</AtlasButton>
+      </template>
+    </SectionHero>
+
+    <div class="notebook-editor__meta">
+      <AtlasTextField v-model="name" label="Name" class="notebook-editor__name" />
       <AtlasTextField
         v-model="description"
         label="Description"
+        placeholder="Optional summary"
+        class="notebook-editor__desc"
       />
-      <AtlasSpacer />
-      <AtlasChip v-if="dirty" tone="warning" size="sm">Unsaved</AtlasChip>
-      <AtlasButton variant="primary" :loading="saving" :disabled="!name" @click="save">Save</AtlasButton>
     </div>
 
     <AtlasAlert v-if="error" severity="danger" class="mb-3">{{ error }}</AtlasAlert>
@@ -38,7 +54,8 @@ import {
   createEmptyNotebook,
 } from "@trex/notebook";
 import type { NotebookData } from "@trex/notebook";
-import { AtlasAlert, AtlasButton, AtlasChip, AtlasIconButton, AtlasSpacer, AtlasTextField } from "@ohdsi/atlas-ui";
+import { AtlasAlert, AtlasButton, AtlasChip, AtlasIcon, AtlasTextField } from "@ohdsi/atlas-ui";
+import SectionHero from "../components/SectionHero.vue";
 import { useNotebooksStore } from "../store/useNotebooksStore";
 
 const props = defineProps<{ id: string | null }>();
@@ -112,5 +129,35 @@ onMounted(load);
 </script>
 
 <style scoped>
-.notebook-editor { padding: 4px; }
+/* Padded, scrollable body inside the shared notebook shell card — matches the
+   Studies section body so both plugins share the same rhythm. */
+.studies-section-body {
+  padding: 20px 24px;
+  height: 100%;
+  overflow-y: auto;
+}
+.notebook-editor__back {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 12px;
+  padding: 0;
+  font-size: 12px;
+  font-weight: 500;
+  color: rgb(var(--v-theme-primary));
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+}
+.notebook-editor__back:hover { text-decoration: underline; }
+.notebook-editor__meta {
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+}
+.notebook-editor__name { flex: 0 0 320px; max-width: 320px; }
+.notebook-editor__desc { flex: 1 1 360px; min-width: 240px; }
 </style>
diff --git a/plugins/notebook-plugin/src/views/NotebookListView.vue b/plugins/notebook-plugin/src/views/NotebookListView.vue
index 005140c..0d58edd 100644
--- a/plugins/notebook-plugin/src/views/NotebookListView.vue
+++ b/plugins/notebook-plugin/src/views/NotebookListView.vue
@@ -1,14 +1,14 @@
 <template>
-  <AtlasPageShell
-    hero
-    compact
-    eyebrow="OHDSI · Notebooks"
-    title="Notebooks"
-    subtitle="Create and manage analytical notebooks for your cohort studies"
-  >
-    <template #actions>
-      <AtlasButton variant="primary" prepend-icon="mdi-plus" @click="emit('new')">New notebook</AtlasButton>
-    </template>
+  <div class="studies-section-body">
+    <SectionHero
+      eyebrow="OHDSI · Notebooks"
+      title="Notebooks"
+      subtitle="Create and manage analytical notebooks for your cohort studies"
+    >
+      <template #actions>
+        <AtlasButton variant="primary" prepend-icon="mdi-plus" @click="emit('new')">New notebook</AtlasButton>
+      </template>
+    </SectionHero>
 
     <AtlasAlert v-if="store.error" severity="danger" class="mb-4">{{ store.error }}</AtlasAlert>
 
@@ -50,12 +50,13 @@
         <AtlasButton variant="danger" @click="confirmDelete">Delete</AtlasButton>
       </template>
     </AtlasDialog>
-  </AtlasPageShell>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import { AtlasPageShell, AtlasDialog, AtlasButton, AtlasAlert, AtlasDataTable, AtlasIconButton, AtlasTextField } from "@ohdsi/atlas-ui";
+import { AtlasDialog, AtlasButton, AtlasAlert, AtlasDataTable, AtlasIconButton, AtlasTextField } from "@ohdsi/atlas-ui";
+import SectionHero from "../components/SectionHero.vue";
 import { useNotebooksStore } from "../store/useNotebooksStore";
 import type { NotebookSummary } from "../api/types";
 
@@ -120,3 +121,11 @@ async function duplicate(id: string): Promise<void> {
 onMounted(reload);
 </script>
 
+<style scoped>
+.studies-section-body {
+  padding: 20px 24px;
+  height: 100%;
+  overflow-y: auto;
+}
+</style>
+
diff --git a/plugins/notebook/src/components/notebook/CellOutput.vue b/plugins/notebook/src/components/notebook/CellOutput.vue
index 44292d2..d37e53c 100644
--- a/plugins/notebook/src/components/notebook/CellOutput.vue
+++ b/plugins/notebook/src/components/notebook/CellOutput.vue
@@ -16,7 +16,7 @@ export const TruncatableText = defineComponent({
     )
     return () =>
       h('div', [
-        h('pre', { class: cx('whitespace-pre-wrap font-mono text-sm', props.class) }, display.value),
+        h('pre', { class: cx('whitespace-pre-wrap font-mono text-xs leading-relaxed', props.class) }, display.value),
         truncated.value
           ? h(
               'button',
@@ -88,7 +88,7 @@ function imageSrc(mimeType: string, content: unknown): string {
           <template v-if="output.data[mime] !== undefined && output.data[mime] !== null">
             <div
               v-if="mime === 'text/html'"
-              class="prose prose-sm max-w-none dark:prose-invert"
+              class="prose prose-sm max-w-none dark:prose-invert text-[13px] leading-relaxed prose-headings:font-semibold prose-h1:text-base prose-h2:text-sm prose-h3:text-[13px] prose-code:text-[12px]"
               v-html="String(output.data[mime])"
             />
             <img
diff --git a/plugins/notebook/src/components/notebook/KernelStatusIndicator.vue b/plugins/notebook/src/components/notebook/KernelStatusIndicator.vue
index 65cecbb..ab099ea 100644
--- a/plugins/notebook/src/components/notebook/KernelStatusIndicator.vue
+++ b/plugins/notebook/src/components/notebook/KernelStatusIndicator.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { cn } from '@/lib/utils'
 import type { KernelStatus } from '@/kernels/types'
 
-withDefaults(defineProps<{ status: KernelStatus; kernelName?: string; class?: string }>(), {})
+const props = withDefaults(defineProps<{ status: KernelStatus; kernelName?: string; class?: string }>(), {})
 
 const statusColors: Record<KernelStatus, string> = {
-  disconnected: 'bg-muted',
+  disconnected: 'bg-muted-foreground/40',
   connecting: 'bg-warning animate-pulse',
   idle: 'bg-success',
   busy: 'bg-warning animate-pulse',
@@ -13,21 +14,35 @@ const statusColors: Record<KernelStatus, string> = {
 }
 
 const statusLabels: Record<KernelStatus, string> = {
-  disconnected: 'Disconnected',
-  connecting: 'Connecting...',
+  disconnected: 'Not connected',
+  connecting: 'Starting…',
   idle: 'Ready',
-  busy: 'Running...',
-  error: 'Error',
+  busy: 'Running…',
+  error: 'Failed to start',
 }
+
+const statusHints: Partial<Record<KernelStatus, string>> = {
+  disconnected: 'The kernel starts when you run your first cell.',
+  error: 'The kernel could not start. Run a cell to try again.',
+}
+
+const label = computed(() => statusLabels[props.status])
+const hint = computed(() => statusHints[props.status])
 </script>
 
 <template>
-  <div :class="cn('flex items-center gap-2 text-sm', $props.class)">
+  <div
+    :class="cn(
+      'inline-flex items-center gap-2 rounded-full border border-muted bg-muted/40 px-2.5 py-1 text-xs',
+      $props.class,
+    )"
+    :title="hint"
+  >
     <div :class="cn('h-2 w-2 rounded-full', statusColors[status])" />
     <span class="text-muted-foreground">
-      <span v-if="kernelName" class="font-medium">{{ kernelName }}</span>
-      <template v-if="kernelName"> - </template>
-      <span>{{ statusLabels[status] }}</span>
+      <span v-if="kernelName" class="font-medium text-foreground">{{ kernelName }}</span>
+      <template v-if="kernelName"> · </template>
+      <span>{{ label }}</span>
     </span>
   </div>
 </template>
diff --git a/plugins/notebook/src/components/notebook/MarkdownCell.vue b/plugins/notebook/src/components/notebook/MarkdownCell.vue
index ec007e3..5f2f26b 100644
--- a/plugins/notebook/src/components/notebook/MarkdownCell.vue
+++ b/plugins/notebook/src/components/notebook/MarkdownCell.vue
@@ -91,7 +91,7 @@ function handleBlur() {
       )"
     >
       <div
-        class="prose prose-sm max-w-none dark:prose-invert prose-headings:my-2 prose-p:my-2 prose-pre:my-2 prose-ul:my-2 prose-ol:my-2"
+        class="prose prose-sm max-w-none dark:prose-invert text-[13px] leading-relaxed prose-headings:my-2 prose-headings:font-semibold prose-h1:text-base prose-h2:text-sm prose-h3:text-[13px] prose-p:my-2 prose-pre:my-2 prose-ul:my-2 prose-ol:my-2 prose-code:text-[12px]"
         v-html="renderedHtml"
       />
     </div>
diff --git a/plugins/notebook/src/components/notebook/Notebook.vue b/plugins/notebook/src/components/notebook/Notebook.vue
index 725189e..7f72c68 100644
--- a/plugins/notebook/src/components/notebook/Notebook.vue
+++ b/plugins/notebook/src/components/notebook/Notebook.vue
@@ -25,7 +25,7 @@ export interface NotebookTheme {
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted } from 'vue'
 import draggable from 'vuedraggable'
-import { Plus, Code, FileText } from 'lucide-vue-next'
+import { Plus, Code, FileText, NotebookPen } from 'lucide-vue-next'
 import { useNotebook } from '@/hooks/useNotebook'
 import { useKernel } from '@/hooks/useKernel'
 import { useCellExecution } from '@/hooks/useCellExecution'
@@ -327,7 +327,7 @@ defineExpose({
 </script>
 
 <template>
-  <div :class="cn('flex flex-col gap-4', props.class)" :style="themeStyle">
+  <div :class="cn('flex flex-col gap-3', props.class)" :style="themeStyle">
     <NotebookToolbar
       v-if="showToolbar"
       :kernel-status="effectiveStatus"
@@ -350,10 +350,18 @@ defineExpose({
     <div class="flex flex-col gap-2">
       <div
         v-if="notebook.cells.length === 0"
-        class="flex flex-col items-center justify-center gap-4 rounded-lg border-2 border-dashed border-muted py-12"
+        class="flex flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-muted bg-muted/20 px-6 py-10 text-center"
       >
-        <p class="text-muted-foreground">Add your first cell</p>
-        <div class="flex gap-2">
+        <div class="flex h-10 w-10 items-center justify-center rounded-full bg-muted text-muted-foreground">
+          <NotebookPen class="h-5 w-5" />
+        </div>
+        <div class="flex flex-col gap-1">
+          <p class="text-sm font-medium text-foreground">Start your notebook</p>
+          <p class="text-sm text-muted-foreground">
+            Add a cell to write and run analysis against this site’s data.
+          </p>
+        </div>
+        <div class="mt-1 flex flex-wrap justify-center gap-2">
           <Button variant="outline" class="gap-2" @click="handleAddCodeCell('python')">
             <Code class="h-4 w-4" />
             Python
@@ -399,11 +407,11 @@ defineExpose({
           </template>
         </draggable>
 
-        <div v-if="!readOnly" class="flex justify-center gap-2 py-4">
+        <div v-if="!readOnly" class="flex justify-center gap-2 py-3">
           <Button
             variant="ghost"
             size="sm"
-            class="gap-1 text-muted-foreground hover:text-foreground"
+            class="h-7 gap-1 px-2 text-xs text-muted-foreground hover:text-foreground"
             @click="handleAddCodeCell('python')"
           >
             <Plus class="h-4 w-4" />
@@ -412,7 +420,7 @@ defineExpose({
           <Button
             variant="ghost"
             size="sm"
-            class="gap-1 text-muted-foreground hover:text-foreground"
+            class="h-7 gap-1 px-2 text-xs text-muted-foreground hover:text-foreground"
             @click="handleAddCodeCell('r')"
           >
             <Plus class="h-4 w-4" />
@@ -421,7 +429,7 @@ defineExpose({
           <Button
             variant="ghost"
             size="sm"
-            class="gap-1 text-muted-foreground hover:text-foreground"
+            class="h-7 gap-1 px-2 text-xs text-muted-foreground hover:text-foreground"
             @click="handleAddMarkdownCell"
           >
             <Plus class="h-4 w-4" />
diff --git a/plugins/notebook/src/components/notebook/NotebookToolbar.vue b/plugins/notebook/src/components/notebook/NotebookToolbar.vue
index 1c350e2..a26a29d 100644
--- a/plugins/notebook/src/components/notebook/NotebookToolbar.vue
+++ b/plugins/notebook/src/components/notebook/NotebookToolbar.vue
@@ -43,7 +43,20 @@ const activeKernel = computed(() => props.availableKernels.find((k) => k.id ===
 const hasPerKernelStatuses = computed(() => props.kernelStatuses && props.kernelStatuses.size > 0)
 
 function statusLabel(status: KernelStatus): string {
-  return status === 'connecting' ? 'loading' : status
+  const labels: Record<KernelStatus, string> = {
+    disconnected: 'Not connected',
+    connecting: 'Starting…',
+    idle: 'Ready',
+    busy: 'Running…',
+    error: 'Failed to start',
+  }
+  return labels[status] ?? status
+}
+
+function statusHint(status: KernelStatus): string | undefined {
+  if (status === 'error') return 'The kernel could not start. Run a cell to try again.'
+  if (status === 'disconnected') return 'The kernel starts when you run your first cell.'
+  return undefined
 }
 
 function dotClass(st: KernelStatus): string {
@@ -59,11 +72,11 @@ function dotClass(st: KernelStatus): string {
 </script>
 
 <template>
-  <div :class="cn('flex items-center gap-1 rounded-lg border bg-background p-1', props.class)">
+  <div :class="cn('flex items-center gap-0.5 rounded-lg border bg-background p-0.5', props.class)">
     <DropdownMenu>
       <DropdownMenuTrigger>
-        <Button variant="ghost" size="sm" class="gap-1">
-          <Plus class="h-4 w-4" />
+        <Button variant="ghost" size="sm" class="h-7 gap-1 px-2 text-xs">
+          <Plus class="h-3.5 w-3.5" />
           Add Cell
         </Button>
       </DropdownMenuTrigger>
@@ -83,36 +96,36 @@ function dotClass(st: KernelStatus): string {
       </DropdownMenuContent>
     </DropdownMenu>
 
-    <Separator orientation="vertical" class="mx-1 h-6" />
+    <Separator orientation="vertical" class="mx-1 h-5" />
 
     <Button
       v-if="isExecuting"
       variant="ghost"
       size="sm"
-      class="gap-1 text-destructive hover:text-destructive"
+      class="h-7 gap-1 px-2 text-xs text-destructive hover:text-destructive"
       @click="emit('interruptExecution')"
     >
-      <Square class="h-4 w-4" />
+      <Square class="h-3.5 w-3.5" />
       Stop
     </Button>
     <Button
       v-else
       variant="ghost"
       size="sm"
-      class="gap-1"
+      class="h-7 gap-1 px-2 text-xs"
       :disabled="kernelStatus !== 'idle'"
       @click="emit('runAllCells')"
     >
-      <Play class="h-4 w-4" />
+      <Play class="h-3.5 w-3.5" />
       Run All
     </Button>
 
-    <Separator orientation="vertical" class="mx-1 h-6" />
+    <Separator orientation="vertical" class="mx-1 h-5" />
 
     <Button
       variant="ghost"
       size="icon"
-      class="h-8 w-8"
+      class="h-7 w-7"
       :disabled="!canUndo"
       title="Undo (Ctrl+Z)"
       @click="emit('undo')"
@@ -122,7 +135,7 @@ function dotClass(st: KernelStatus): string {
     <Button
       variant="ghost"
       size="icon"
-      class="h-8 w-8"
+      class="h-7 w-7"
       :disabled="!canRedo"
       title="Redo (Ctrl+Shift+Z)"
       @click="emit('redo')"
@@ -130,14 +143,14 @@ function dotClass(st: KernelStatus): string {
       <Redo2 class="h-4 w-4" />
     </Button>
 
-    <div class="ml-auto flex items-center gap-3 px-2 text-sm">
+    <div class="ml-auto flex items-center gap-2 px-1 text-xs">
       <template v-if="showKernelSelector && availableKernels.length > 0">
         <DropdownMenu>
           <DropdownMenuTrigger>
             <Button
               variant="ghost"
               size="sm"
-              class="gap-1 text-muted-foreground"
+              class="h-7 gap-1 px-2 text-xs text-muted-foreground"
               :disabled="kernelStatus === 'busy' || isExecuting"
             >
               {{ activeKernel?.name || 'Select Kernel' }}
@@ -158,7 +171,7 @@ function dotClass(st: KernelStatus): string {
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
-        <Separator orientation="vertical" class="h-6" />
+        <Separator orientation="vertical" class="h-5" />
       </template>
 
       <template v-if="hasPerKernelStatuses">
@@ -173,8 +186,13 @@ function dotClass(st: KernelStatus): string {
         </template>
       </template>
       <template v-else-if="availableKernels.length > 0">
-        <div :class="dotClass(kernelStatus)" />
-        <span class="capitalize text-muted-foreground">{{ statusLabel(kernelStatus) }}</span>
+        <div
+          class="flex items-center gap-1.5 rounded-full border border-muted bg-muted/40 px-2 py-px"
+          :title="statusHint(kernelStatus)"
+        >
+          <div :class="dotClass(kernelStatus)" />
+          <span class="whitespace-nowrap text-muted-foreground">{{ statusLabel(kernelStatus) }}</span>
+        </div>
       </template>
     </div>
   </div>
diff --git a/plugins/notebook/tests/unit/components/KernelStatusIndicator.test.ts b/plugins/notebook/tests/unit/components/KernelStatusIndicator.test.ts
index 2ae8db3..f28875f 100644
--- a/plugins/notebook/tests/unit/components/KernelStatusIndicator.test.ts
+++ b/plugins/notebook/tests/unit/components/KernelStatusIndicator.test.ts
@@ -11,6 +11,6 @@ describe('KernelStatusIndicator', () => {
   it('shows kernel name when provided', () => {
     render(KernelStatusIndicator, { props: { status: 'busy', kernelName: 'Pyodide' } })
     expect(screen.getByText('Pyodide')).toBeInTheDocument()
-    expect(screen.getByText('Running...')).toBeInTheDocument()
+    expect(screen.getByText('Running…')).toBeInTheDocument()
   })
 })
diff --git a/plugins/notebook/tests/unit/components/Notebook.test.ts b/plugins/notebook/tests/unit/components/Notebook.test.ts
index 732573b..2b37101 100644
--- a/plugins/notebook/tests/unit/components/Notebook.test.ts
+++ b/plugins/notebook/tests/unit/components/Notebook.test.ts
@@ -9,7 +9,7 @@ const data: NotebookData = { metadata: { title: 'T' }, cells: [] }
 describe('Notebook', () => {
   it('shows the empty state with add buttons', () => {
     render(Notebook, { props: { initialData: data } })
-    expect(screen.getByText('Add your first cell')).toBeInTheDocument()
+    expect(screen.getByText('Start your notebook')).toBeInTheDocument()
   })
 
   it('adds a cell when an empty-state button is clicked', async () => {
diff --git a/plugins/results-viewer/scripts/build-shinylive-export.R b/plugins/results-viewer/scripts/build-shinylive-export.R
index 8e36963..16a3174 100644
--- a/plugins/results-viewer/scripts/build-shinylive-export.R
+++ b/plugins/results-viewer/scripts/build-shinylive-export.R
@@ -43,18 +43,19 @@ if (!file.exists(duckdb_tgz) || file.info(duckdb_tgz)$size == 0) {
 }
 cat("  bundled", basename(duckdb_tgz), "(", file.info(duckdb_tgz)$size, "bytes)\n")
 
-cat("\nStep 1c: Version-tag shinylive's service worker (caching left OFF)\n")
-# Do NOT enable shinylive's `useCaching`. With it on, the SW caches /shinylive/
-# assets and the browser subsequently issues cache:"only-if-cached" requests;
-# the app_* proxy handler rebuilds those into a new Request that inherits a
-# non-same-origin mode, which throws ("only-if-cached can be set only with
-# same-origin mode"). The rejected fetch means the embedded app never registers
-# with the SW ("App URL not registered") and renders empty. Leaving useCaching
-# at its shipped default (false) keeps the proxy path working.
-# We still fold the app build id into the SW cache version so each rebuild
-# invalidates any stale registration cleanly. shinylive's export contains more
-# than one copy of shinylive-sw.js (the active one sits at the export root);
-# patch every copy.
+cat("\nStep 1c: Enable + version-tag shinylive's service worker cache\n")
+# Enable shinylive's `useCaching` so the SW serves the heavy /shinylive/ assets
+# (WebR runtime + R package binaries, ~150 MB) cache-first on repeat opens.
+# Two guards make this safe: Chromium issues cache:"only-if-cached" requests
+# whose mode is not "same-origin"; both fetch() and the Request constructor
+# reject that combination ("only-if-cached can be set only with same-origin
+# mode"), which killed asset loads and app_* proxying ("App URL not
+# registered") when caching was first tried. Such requests are (a) skipped in
+# the fetch handler so the browser resolves them natively from its HTTP cache,
+# and (b) normalized in the app_* proxy Request rebuild.
+# The app build id is folded into the SW cache version so each rebuild drops
+# stale caches cleanly. shinylive's export contains more than one copy of
+# shinylive-sw.js (the active one sits at the export root); patch every copy.
 sw_files <- list.files(export_dir, pattern = "^shinylive-sw\\.js$",
                         recursive = TRUE, full.names = TRUE)
 if (length(sw_files) == 0) {
@@ -65,10 +66,18 @@ patched_any <- FALSE
 for (sw_path in sw_files) {
   txt <- readChar(sw_path, file.info(sw_path)$size)
   before <- txt
-  # Force useCaching off even if a future shinylive ships it on.
-  txt <- sub("var useCaching = true;", "var useCaching = false;", txt, fixed = TRUE)
+  txt <- sub("var useCaching = false;", "var useCaching = true;", txt, fixed = TRUE)
   txt <- sub('var version = "v10";',
              sprintf('var version = "v10-%s";', build_id), txt, fixed = TRUE)
+  txt <- sub("cache: request.cache,",
+             'cache: request.cache === "only-if-cached" ? void 0 : request.cache,',
+             txt, fixed = TRUE)
+  txt <- sub("if (useCaching) {",
+             paste0('if (request.cache === "only-if-cached" && request.mode !== "same-origin") {\n',
+                    "    return;\n",
+                    "  }\n",
+                    "  if (useCaching) {"),
+             txt, fixed = TRUE)
   if (!identical(txt, before)) {
     writeLines(txt, sw_path, sep = "")
     patched_any <- TRUE
@@ -78,7 +87,7 @@ for (sw_path in sw_files) {
 if (!patched_any) {
   stop("build-shinylive-export: useCaching/version markers not found in any shinylive-sw.js")
 }
-cat("  version tagged", build_id, "(useCaching left off)\n")
+cat("  version tagged", build_id, "(useCaching ON with only-if-cached guards)\n")
 
 cat("\nStep 2: Override Java-dep packages with pure-R shims\n")
 temp_lib <- tempfile("shim-libs-")
diff --git a/plugins/results-viewer/src/components/LoadingOverlay.vue b/plugins/results-viewer/src/components/LoadingOverlay.vue
index 4ecbe65..78a8ff2 100644
--- a/plugins/results-viewer/src/components/LoadingOverlay.vue
+++ b/plugins/results-viewer/src/components/LoadingOverlay.vue
@@ -28,7 +28,7 @@ defineProps<{ message: string }>()
   width: 48px;
   height: 48px;
   border: 4px solid #e0e0e0;
-  border-top-color: #1976d2;
+  border-top-color: rgb(var(--v-theme-primary, 0, 0, 128));
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
   margin-bottom: 24px;
diff --git a/plugins/results-viewer/src/components/ShinyFrame.vue b/plugins/results-viewer/src/components/ShinyFrame.vue
index 9fdb8b3..5bf177f 100644
--- a/plugins/results-viewer/src/components/ShinyFrame.vue
+++ b/plugins/results-viewer/src/components/ShinyFrame.vue
@@ -238,7 +238,7 @@ onBeforeUnmount(() => {
   width: 48px;
   height: 48px;
   border: 4px solid #e5e7eb;
-  border-top-color: #1976d2;
+  border-top-color: rgb(var(--v-theme-primary, 0, 0, 128));
   border-radius: 50%;
   animation: rv-spin 1s linear infinite;
 }
diff --git a/plugins/strategus/src/StrategusApp.vue b/plugins/strategus/src/StrategusApp.vue
index 144e39a..0a45053 100644
--- a/plugins/strategus/src/StrategusApp.vue
+++ b/plugins/strategus/src/StrategusApp.vue
@@ -1,11 +1,14 @@
 <template>
   <StrategusLayout>
     <component :is="activeComponent" />
+    <StudyTypePicker v-model="showTypePicker" @select="onTypeSelected" />
   </StrategusLayout>
 </template>
 
 <script setup lang="ts">
-import { computed, provide, onMounted, watch } from 'vue';
+import { computed, provide, onMounted, ref, watch } from 'vue';
+import StudyTypePicker from './components/StudyTypePicker.vue';
+import { applyStudyTypePreset, type StudyTypeId } from './services/StudyTypePresets';
 import StrategusLayout from './components/StrategusLayout.vue';
 import OverviewPanel from './views/OverviewPanel.vue';
 import DesignPanel from './views/DesignPanel.vue';
@@ -54,7 +57,14 @@ const panelMap: Record<string, unknown> = {
   evidenceSynthesis: EvidenceSynthesisPanel,
 };
 
-const activeComponent = computed(() => panelMap[store.activePanel] ?? OverviewPanel);
+const activeComponent = computed(() => panelMap[store.activePanel] ?? DesignPanel);
+
+const showTypePicker = ref(false);
+
+function onTypeSelected(id: StudyTypeId | null): void {
+  if (id) applyStudyTypePreset(store as unknown as Parameters<typeof applyStudyTypePreset>[0], id);
+  store.activePanel = 'study';
+}
 
 // The combined Studies plugin overview is the single entry point for browsing
 // studies + notebooks, so Strategus no longer surfaces its own standalone list.
@@ -101,6 +111,9 @@ onMounted(() => {
   } else if (params.has('new')) {
     store.resetToDefaults();
     studiesStore.openNew();
+    // New studies start from the type picker; the chosen preset pre-selects
+    // modules and defaults before the design page shows.
+    showTypePicker.value = true;
   } else {
     // Direct navigation with no deep-link would otherwise show the standalone
     // Strategus list; send the user to the combined Studies overview instead.
diff --git a/plugins/strategus/src/api/authToken.ts b/plugins/strategus/src/api/authToken.ts
index 2bb5f88..691b3f5 100644
--- a/plugins/strategus/src/api/authToken.ts
+++ b/plugins/strategus/src/api/authToken.ts
@@ -1,8 +1,75 @@
 // Shared auth token for backend calls. Set by main.ts from the host's
 // authContext on mount; read by graphqlClient + hadesClient. Replaces the
 // sibyl session-cookie assumption — Atlas3 provides a Bearer token instead.
+//
+// Under a d2e/Atlas host the token is a Logto RS256 access token, which trex
+// core's HS256-only auth middleware rejects — requests would run as the
+// grant-less `anon` Postgres role. ensureAuthToken() exchanges it via the
+// /trex-token function for a trex-native token before it is sent. Tokens that
+// already carry aud "authenticated" are trex-native and are sent unchanged.
 let token: string | null = null;
-export function setAuthToken(t: string | null): void { token = t; }
+let trexToken: string | null = null;
+let exchange: Promise<string | null> | null = null;
+
+export function setAuthToken(t: string | null): void {
+  token = t;
+  trexToken = null;
+  exchange = null;
+}
+
+function jwtPayload(t: string): Record<string, unknown> | null {
+  try {
+    const b64 = t.split('.')[1].replace(/-/g, '+').replace(/_/g, '/');
+    return JSON.parse(atob(b64)) as Record<string, unknown>;
+  } catch {
+    return null;
+  }
+}
+
+function expiresSoon(t: string): boolean {
+  const exp = jwtPayload(t)?.exp;
+  return typeof exp === 'number' && exp * 1000 < Date.now() + 30_000;
+}
+
+async function exchangeToken(t: string): Promise<string | null> {
+  try {
+    const resp = await fetch(`${location.origin}/trex-token`, {
+      method: 'POST',
+      headers: { Authorization: `Bearer ${t}` },
+    });
+    if (!resp.ok) return null;
+    const body = await resp.json();
+    return typeof body.access_token === 'string' ? body.access_token : null;
+  } catch {
+    return null;
+  }
+}
+
+/** Resolve the token authHeaders() will send; await before any backend request. */
+export async function ensureAuthToken(): Promise<void> {
+  if (!token) return;
+  const payload = jwtPayload(token);
+  if (!payload || payload.aud === 'authenticated') return;
+  if (trexToken && !expiresSoon(trexToken)) return;
+  if (!exchange) {
+    exchange = exchangeToken(token).finally(() => {
+      exchange = null;
+    });
+  }
+  const p = exchange;
+  trexToken = (await p) ?? trexToken;
+}
+
 export function authHeaders(): Record<string, string> {
+  const t = trexToken ?? token;
+  return t ? { Authorization: `Bearer ${t}` } : {};
+}
+
+/**
+ * Headers carrying the host-provided token without the trex exchange.
+ * The /WebAPI routes validate the host's OIDC token and reject trex-native
+ * (HS256) tokens — the inverse of the trex core endpoints above.
+ */
+export function hostAuthHeaders(): Record<string, string> {
   return token ? { Authorization: `Bearer ${token}` } : {};
 }
diff --git a/plugins/strategus/src/api/graphqlClient.ts b/plugins/strategus/src/api/graphqlClient.ts
index 5759d3f..8f7abb3 100644
--- a/plugins/strategus/src/api/graphqlClient.ts
+++ b/plugins/strategus/src/api/graphqlClient.ts
@@ -2,12 +2,13 @@
 // Sends Authorization: Bearer <token> (set via setAuthToken from main.ts);
 // throws on a GraphQL `errors[]` payload. Mirrors the jobs plugin's
 // graphqlClient so the two stay interchangeable.
-import { authHeaders } from './authToken';
+import { authHeaders, ensureAuthToken } from './authToken';
 
 export class GraphqlClient {
   constructor(private endpoint: string) {}
 
   async request<T>(query: string, variables: Record<string, unknown> = {}): Promise<T> {
+    await ensureAuthToken();
     const resp = await fetch(this.endpoint, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json', ...authHeaders() },
diff --git a/plugins/strategus/src/api/hadesClient.ts b/plugins/strategus/src/api/hadesClient.ts
index 58ac2ce..6558eb0 100644
--- a/plugins/strategus/src/api/hadesClient.ts
+++ b/plugins/strategus/src/api/hadesClient.ts
@@ -1,10 +1,11 @@
 import type { HadesJob, HadesJobDetail, HadesEnv, RunRequest } from './types';
-import { authHeaders } from './authToken';
+import { authHeaders, ensureAuthToken } from './authToken';
 
 export class HadesClient {
   constructor(private base: string) {}
 
   private async req<T>(path: string, init?: RequestInit): Promise<T> {
+    await ensureAuthToken();
     const resp = await fetch(`${this.base}${path}`, {
       headers: { 'Content-Type': 'application/json', ...authHeaders() },
       ...init,
diff --git a/plugins/strategus/src/api/networkClient.ts b/plugins/strategus/src/api/networkClient.ts
index 3024c45..f7a5c8f 100644
--- a/plugins/strategus/src/api/networkClient.ts
+++ b/plugins/strategus/src/api/networkClient.ts
@@ -3,7 +3,7 @@
 // coordinator API; central's contract (`central/shared/src/schemas.ts` /
 // `central/web/src/stores/studies.ts`) is duplicated here rather than imported
 // because each trex plugin builds independently.
-import { authHeaders } from './authToken';
+import { authHeaders, ensureAuthToken } from './authToken';
 
 export const defaultBase = (): string => `${location.origin}/plugins/network-api/network-api`;
 
@@ -14,6 +14,7 @@ interface SignupStateResponse {
 /** True only when the network is configured AND this site is an active member. */
 export async function isNetworkActive(base: string = defaultBase()): Promise<boolean> {
   try {
+    await ensureAuthToken();
     const res = await fetch(`${base}/signup/state`, { headers: { ...authHeaders() } });
     if (res.status !== 200) return false;
     const body = (await res.json()) as SignupStateResponse;
@@ -36,6 +37,7 @@ interface CoordinatorStateResponse {
  */
 export async function isCoordinatorConfigured(base: string = defaultBase()): Promise<boolean> {
   try {
+    await ensureAuthToken();
     const res = await fetch(`${base}/coordinator/state`, { headers: { ...authHeaders() } });
     if (res.status !== 200) return false;
     const body = (await res.json()) as CoordinatorStateResponse;
@@ -70,6 +72,7 @@ interface StudyWithUploads {
  * are pre-signed), then publish it.
  */
 export async function publishStudy(args: PublishStudyArgs, base: string = defaultBase()): Promise<void> {
+  await ensureAuthToken();
   const createRes = await fetch(`${base}/studies`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json', ...authHeaders() },
diff --git a/plugins/strategus/src/api/webapiClient.ts b/plugins/strategus/src/api/webapiClient.ts
new file mode 100644
index 0000000..bd66f81
--- /dev/null
+++ b/plugins/strategus/src/api/webapiClient.ts
@@ -0,0 +1,50 @@
+// Direct OHDSI WebAPI fallback for hosts whose messageBus does not serve the
+// 'data:request' cohorts resource. The /WebAPI routes validate the host's own
+// OIDC token (hostAuthHeaders); the trex-exchanged token is only tried as a
+// fallback for hosts wired the other way around.
+import { ensureAuthToken, authHeaders, hostAuthHeaders } from './authToken';
+
+export interface WebApiCohortListItem {
+  id: number;
+  name: string;
+  description?: string;
+}
+
+async function webapiFetch(path: string): Promise<Response> {
+  let resp = await fetch(`${location.origin}${path}`, { headers: hostAuthHeaders() });
+  if (resp.status === 401 || resp.status === 403) {
+    await ensureAuthToken();
+    resp = await fetch(`${location.origin}${path}`, { headers: authHeaders() });
+  }
+  return resp;
+}
+
+export async function fetchCohortDefinitionList(): Promise<WebApiCohortListItem[]> {
+  const resp = await webapiFetch('/WebAPI/cohortdefinition');
+  if (!resp.ok) {
+    throw new Error(`WebAPI cohort definition list failed: ${resp.status}`);
+  }
+  const body: unknown = await resp.json();
+  if (!Array.isArray(body)) {
+    throw new Error('WebAPI cohort definition list: unexpected response shape');
+  }
+  return body.filter(
+    (item): item is WebApiCohortListItem =>
+      typeof item === 'object' && item !== null &&
+      typeof (item as { id?: unknown }).id === 'number' &&
+      typeof (item as { name?: unknown }).name === 'string'
+  );
+}
+
+/** Fetch a cohort definition's Circe expression as a JSON string. */
+export async function fetchCohortDefinitionExpression(id: number): Promise<string> {
+  const resp = await webapiFetch(`/WebAPI/cohortdefinition/${id}`);
+  if (!resp.ok) {
+    throw new Error(`WebAPI cohort definition ${id} failed: ${resp.status}`);
+  }
+  const body: unknown = await resp.json();
+  const expression = (body as { expression?: unknown })?.expression;
+  if (typeof expression === 'string' && expression.trim()) return expression;
+  if (expression && typeof expression === 'object') return JSON.stringify(expression);
+  throw new Error(`WebAPI cohort definition ${id} has no expression`);
+}
diff --git a/plugins/strategus/src/components/CohortPicker.vue b/plugins/strategus/src/components/CohortPicker.vue
index d7eed9e..06c1d96 100644
--- a/plugins/strategus/src/components/CohortPicker.vue
+++ b/plugins/strategus/src/components/CohortPicker.vue
@@ -14,6 +14,16 @@
       class="mb-3"
     />
 
+    <AtlasAlert
+      v-if="selectError"
+      severity="danger"
+      variant="tonal"
+      class="mb-3"
+      data-test="select-error"
+    >
+      {{ selectError }}
+    </AtlasAlert>
+
     <table
       v-if="cohorts.length > 0"
       class="cohort-table"
@@ -44,7 +54,15 @@
           </td>
           <td>{{ cohort.cohortName }}</td>
           <td class="text-right text-medium-emphasis">
-            {{ cohort.subjectCount?.toLocaleString() ?? '—' }}
+            <AtlasProgressCircular
+              v-if="selectingId === cohort.cohortId"
+              indeterminate
+              color="primary"
+              size="16"
+            />
+            <template v-else>
+              {{ cohort.subjectCount?.toLocaleString() ?? '—' }}
+            </template>
           </td>
         </tr>
       </tbody>
@@ -123,6 +141,7 @@
 import { ref, computed, onMounted } from 'vue';
 import { AtlasDialog, AtlasButton, AtlasTextField, AtlasProgressCircular, AtlasAlert } from '@ohdsi/atlas-ui';
 import { parseManualCohort } from '../services/parseManualCohort';
+import { fetchCohortDefinitionList, fetchCohortDefinitionExpression } from '../api/webapiClient';
 
 interface AtlasCohort {
   cohortId: number;
@@ -131,6 +150,11 @@ interface AtlasCohort {
   cohortDefinition: string;
 }
 
+/** WebAPI list entries carry no expression; it is fetched lazily on select. */
+interface PickerCohort extends AtlasCohort {
+  expressionPending?: boolean;
+}
+
 const props = defineProps<{
   modelValue: boolean;
   messageBus?: { request: <TReq, TRes>(type: string, payload: TReq) => Promise<TRes> };
@@ -143,7 +167,9 @@ const emit = defineEmits<{
 
 const search = ref('');
 const loading = ref(false);
-const cohorts = ref<AtlasCohort[]>([]);
+const cohorts = ref<PickerCohort[]>([]);
+const selectingId = ref<number | null>(null);
+const selectError = ref<string | null>(null);
 const manualJson = ref('');
 const manualName = ref('');
 const manualError = ref<string | null>(null);
@@ -158,22 +184,57 @@ const filteredCohorts = computed(() => {
 });
 
 onMounted(async () => {
-  if (!props.messageBus) return;
   loading.value = true;
   try {
-    const result = await props.messageBus.request<unknown, AtlasCohort[]>('data:request', { resource: 'cohorts' });
-    if (Array.isArray(result)) {
-      cohorts.value = result;
+    // Preferred source: the host's messageBus (trexsql-native hosts serve
+    // cohorts directly). Fall through to WebAPI when it throws or is empty.
+    if (props.messageBus) {
+      try {
+        const result = await props.messageBus.request<unknown, AtlasCohort[]>('data:request', { resource: 'cohorts' });
+        if (Array.isArray(result) && result.length > 0) {
+          cohorts.value = result;
+          return;
+        }
+      } catch {
+        // host doesn't support this message type — try WebAPI next
+      }
     }
+    const list = await fetchCohortDefinitionList();
+    cohorts.value = list.map((item) => ({
+      cohortId: item.id,
+      cohortName: item.name,
+      subjectCount: null,
+      cohortDefinition: '',
+      expressionPending: true,
+    }));
   } catch {
-    // Atlas doesn't support this message type yet — show manual fallback
+    // WebAPI also unavailable — the manual-JSON fallback renders below
   } finally {
     loading.value = false;
   }
 });
 
-function selectCohort(cohort: AtlasCohort) {
-  emit('select', cohort);
+async function selectCohort(cohort: PickerCohort) {
+  if (selectingId.value !== null) return;
+  if (cohort.expressionPending) {
+    selectingId.value = cohort.cohortId;
+    selectError.value = null;
+    try {
+      cohort.cohortDefinition = await fetchCohortDefinitionExpression(cohort.cohortId);
+      cohort.expressionPending = false;
+    } catch {
+      selectError.value = `Could not load the definition for "${cohort.cohortName}" from Atlas.`;
+      return;
+    } finally {
+      selectingId.value = null;
+    }
+  }
+  emit('select', {
+    cohortId: cohort.cohortId,
+    cohortName: cohort.cohortName,
+    subjectCount: cohort.subjectCount,
+    cohortDefinition: cohort.cohortDefinition,
+  });
   emit('update:modelValue', false);
 }
 
diff --git a/plugins/strategus/src/components/SidebarNav.vue b/plugins/strategus/src/components/SidebarNav.vue
index f4d9eb6..40d58dd 100644
--- a/plugins/strategus/src/components/SidebarNav.vue
+++ b/plugins/strategus/src/components/SidebarNav.vue
@@ -23,12 +23,6 @@
     </div>
 
     <div class="sidebar-nav__body">
-      <SidebarItem
-        icon="mdi-view-dashboard-outline"
-        label="Overview"
-        panel="overview"
-      />
-
       <!-- Study Design section -->
       <SidebarItem
         icon="mdi-pencil-ruler"
diff --git a/plugins/strategus/src/components/StrategusLayout.vue b/plugins/strategus/src/components/StrategusLayout.vue
index 03f6afb..a2f608c 100644
--- a/plugins/strategus/src/components/StrategusLayout.vue
+++ b/plugins/strategus/src/components/StrategusLayout.vue
@@ -29,7 +29,7 @@ import SidebarNav from './SidebarNav.vue';
 .strategus-detail {
   flex: 1;
   overflow-y: auto;
-  padding: 28px 32px;
+  padding: 20px 24px;
 }
 </style>
 
@@ -37,8 +37,8 @@ import SidebarNav from './SidebarNav.vue';
      :deep() only pierces direct descendants of the scoped component;
      slotted content rendered by sibling Vue components is out of scope. -->
 <style>
-/* Page header — match Atlas3 landing's hero (large light title) */
-.strategus-detail h1.text-h4 { font-size: 34px !important; font-weight: 300 !important; line-height: 1.2; color: rgb(31, 66, 90); }
+/* Page header — match the studies plugin's SectionHero metrics (26px light) */
+.strategus-detail h1.text-h4 { font-size: 26px !important; font-weight: 300 !important; line-height: 1.2; letter-spacing: 0.01em; color: rgb(31, 66, 90); }
 .strategus-detail .text-subtitle-1 { font-size: 14px !important; font-weight: 400; color: rgba(0, 0, 0, .62); }
 .strategus-detail .text-overline { font-size: 11px !important; letter-spacing: 0.1em; line-height: 1.4; color: rgba(0, 0, 0, .54); font-weight: 500; }
 .strategus-detail .text-body-2 { font-size: 13px !important; }
diff --git a/plugins/strategus/src/store/useStrategusStore.ts b/plugins/strategus/src/store/useStrategusStore.ts
index e62b8bd..936e3bf 100644
--- a/plugins/strategus/src/store/useStrategusStore.ts
+++ b/plugins/strategus/src/store/useStrategusStore.ts
@@ -123,7 +123,7 @@ type ModuleName =
 
 export const useStrategusStore = defineStore('strategus', () => {
   // ── Active panel ──────────────────────────────────────────────────────────
-  const activePanel = ref<SidebarItem>('overview');
+  const activePanel = ref<SidebarItem>('study');
 
   // ── Study metadata ────────────────────────────────────────────────────────
   const studyType = ref<StudyTypeId | null>(null);
@@ -192,7 +192,7 @@ export const useStrategusStore = defineStore('strategus', () => {
   }
 
   function resetToDefaults(): void {
-    activePanel.value = 'overview';
+    activePanel.value = 'study';
 
     studyType.value = null;
     studyName.value = '';
diff --git a/plugins/strategus/src/views/CohortsPanel.vue b/plugins/strategus/src/views/CohortsPanel.vue
index c366080..6c8f9e0 100644
--- a/plugins/strategus/src/views/CohortsPanel.vue
+++ b/plugins/strategus/src/views/CohortsPanel.vue
@@ -9,7 +9,7 @@
     </template>
     <div
       v-if="!props.embedded"
-      class="mb-4"
+      class="mb-3"
     >
       <h1 class="text-h4 font-weight-light text-primary mb-1">
         Cohorts
@@ -73,7 +73,7 @@
       No cohorts yet.
     </div>
 
-    <div class="d-flex justify-end mb-4">
+    <div class="d-flex justify-end mb-2">
       <AtlasButton
         variant="tonal"
         tone="primary"
@@ -150,7 +150,7 @@
         variant="tonal"
         tone="primary"
         prepend-icon="mdi-plus"
-        class="mb-4"
+        class="mb-3"
         @click="openAddSubsetDialog"
       >
         Add Subset Definition
diff --git a/plugins/strategus/src/views/ComparisonsPanel.vue b/plugins/strategus/src/views/ComparisonsPanel.vue
index 7880846..76cd442 100644
--- a/plugins/strategus/src/views/ComparisonsPanel.vue
+++ b/plugins/strategus/src/views/ComparisonsPanel.vue
@@ -9,7 +9,7 @@
     </template>
     <div
       v-if="!props.embedded"
-      class="mb-4"
+      class="mb-3"
     >
       <h1 class="text-h4 font-weight-light text-primary mb-1">
         Comparisons
diff --git a/plugins/strategus/src/views/DesignPanel.vue b/plugins/strategus/src/views/DesignPanel.vue
index 5196c70..e7fca12 100644
--- a/plugins/strategus/src/views/DesignPanel.vue
+++ b/plugins/strategus/src/views/DesignPanel.vue
@@ -16,7 +16,7 @@ import ModulesPanel from './ModulesPanel.vue';
 
 <style scoped>
 .design-panel__modules {
-  margin-top: 24px;
+  margin-top: 16px;
   padding-top: 8px;
   border-top: 1px solid rgba(0, 0, 0, 0.08);
   scroll-margin-top: 16px;
diff --git a/plugins/strategus/src/views/ModulesPanel.vue b/plugins/strategus/src/views/ModulesPanel.vue
index 0aba029..36a6691 100644
--- a/plugins/strategus/src/views/ModulesPanel.vue
+++ b/plugins/strategus/src/views/ModulesPanel.vue
@@ -7,7 +7,7 @@
     <h1 class="text-h4 font-weight-light text-primary mb-1">
       Modules
     </h1>
-    <p class="text-body-2 text-medium-emphasis mb-6">
+    <p class="text-body-2 text-medium-emphasis mb-3">
       Toggle each module to include it in the spec. Settings appear inline when enabled.
     </p>
 
@@ -140,13 +140,13 @@ function colorFor(key: SidebarItem): string {
 
 <style scoped>
 .module-section {
-  padding: 18px 0;
+  padding: 14px 0;
   border-top: 1px solid rgba(0, 0, 0, 0.06);
   scroll-margin-top: 24px;
 }
 .module-section:first-of-type {
   border-top: none;
-  padding-top: 12px;
+  padding-top: 8px;
 }
 .module-section__heading {
   display: flex;
@@ -157,7 +157,7 @@ function colorFor(key: SidebarItem): string {
   text-transform: uppercase;
   letter-spacing: 0.6px;
   color: rgba(0, 0, 0, 0.72);
-  margin-bottom: 10px;
+  margin-bottom: 8px;
 }
 .module-section__heading .v-icon {
   color: rgba(0, 0, 0, 0.4);
diff --git a/plugins/strategus/src/views/OutcomesPanel.vue b/plugins/strategus/src/views/OutcomesPanel.vue
index fcb7283..6086f53 100644
--- a/plugins/strategus/src/views/OutcomesPanel.vue
+++ b/plugins/strategus/src/views/OutcomesPanel.vue
@@ -6,7 +6,7 @@
         Study Design
       </div>
       <div style="width: 28px; height: 2px; background: #eb6622; margin-bottom: 8px" />
-      <h1 class="text-h4 font-weight-light text-primary mb-4">
+      <h1 class="text-h4 font-weight-light text-primary mb-3">
         Outcomes &amp; Negative Controls
       </h1>
     </template>
@@ -17,7 +17,7 @@
     </div>
     <table
       v-if="store.outcomes.length > 0"
-      class="bordered-table mb-4"
+      class="bordered-table mb-3"
     >
       <thead>
         <tr>
diff --git a/plugins/strategus/src/views/OverviewCard.vue b/plugins/strategus/src/views/OverviewCard.vue
index eb03edd..a289ba2 100644
--- a/plugins/strategus/src/views/OverviewCard.vue
+++ b/plugins/strategus/src/views/OverviewCard.vue
@@ -76,7 +76,7 @@ const statusIcon = computed(() => {
   display: block;
   background: #fff;
   border-radius: 12px;
-  padding: 20px;
+  padding: 14px 16px;
   cursor: pointer;
   text-decoration: none;
   color: rgba(0, 0, 0, 0.87);
@@ -100,7 +100,7 @@ const statusIcon = computed(() => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 12px;
+  margin-bottom: 8px;
 }
 
 .overview-tile__icon {
@@ -108,7 +108,7 @@ const statusIcon = computed(() => {
 }
 
 .overview-tile__title {
-  font-size: 15px;
+  font-size: 14px;
   font-weight: 600;
   color: rgba(0, 0, 0, 0.87);
   line-height: 1.3;
diff --git a/plugins/strategus/src/views/OverviewPanel.vue b/plugins/strategus/src/views/OverviewPanel.vue
index 8ee8e24..a262fea 100644
--- a/plugins/strategus/src/views/OverviewPanel.vue
+++ b/plugins/strategus/src/views/OverviewPanel.vue
@@ -60,7 +60,7 @@
     >
 
     <!-- Study Design section -->
-    <div class="section-label text-overline text-medium-emphasis mt-6 mb-2">
+    <div class="section-label text-overline text-medium-emphasis mt-4 mb-2">
       Study Design
     </div>
 
@@ -86,7 +86,7 @@
 
     <!-- Enabled Modules section -->
     <template v-if="enabledModules.length > 0">
-      <div class="section-label text-overline text-medium-emphasis mt-6 mb-2">
+      <div class="section-label text-overline text-medium-emphasis mt-4 mb-2">
         Enabled Modules
       </div>
       <AtlasRow dense>
@@ -112,7 +112,7 @@
 
     <!-- Disabled Modules section -->
     <template v-if="disabledModules.length > 0">
-      <div class="section-label text-overline text-medium-emphasis mt-6 mb-2">
+      <div class="section-label text-overline text-medium-emphasis mt-4 mb-2">
         Disabled Modules
       </div>
       <div class="d-flex flex-wrap gap-2">
diff --git a/plugins/strategus/src/views/StudyPanel.vue b/plugins/strategus/src/views/StudyPanel.vue
index aa1871c..c832b50 100644
--- a/plugins/strategus/src/views/StudyPanel.vue
+++ b/plugins/strategus/src/views/StudyPanel.vue
@@ -8,7 +8,7 @@
     <h1 class="text-h4 font-weight-light text-primary mb-1">
       {{ store.studyName.trim() || 'Untitled Study' }}
     </h1>
-    <p class="text-body-2 text-medium-emphasis mb-4">
+    <p class="text-body-2 text-medium-emphasis mb-3">
       Configure cohorts, comparisons, time-at-risk and analysis modules.
     </p>
 
@@ -103,13 +103,13 @@ function colorFor(key: SidebarItem): string {
 
 <style scoped>
 .study-section {
-  padding: 18px 0;
+  padding: 14px 0;
   border-top: 1px solid rgba(0, 0, 0, 0.06);
   scroll-margin-top: 24px;
 }
 .study-section:first-of-type {
   border-top: none;
-  padding-top: 12px;
+  padding-top: 8px;
 }
 .study-section__heading {
   display: flex;
@@ -120,7 +120,7 @@ function colorFor(key: SidebarItem): string {
   text-transform: uppercase;
   letter-spacing: 0.6px;
   color: rgba(0, 0, 0, 0.72);
-  margin-bottom: 10px;
+  margin-bottom: 8px;
 }
 .study-section__heading .v-icon {
   color: rgba(0, 0, 0, 0.4);
diff --git a/plugins/strategus/src/views/StudySetupPanel.vue b/plugins/strategus/src/views/StudySetupPanel.vue
index 0b12327..4a96042 100644
--- a/plugins/strategus/src/views/StudySetupPanel.vue
+++ b/plugins/strategus/src/views/StudySetupPanel.vue
@@ -6,14 +6,14 @@
         Study
       </div>
       <div style="width: 28px; height: 2px; background: #eb6622; margin-bottom: 8px" />
-      <h1 class="text-h4 font-weight-light text-primary mb-4">
+      <h1 class="text-h4 font-weight-light text-primary mb-3">
         Study Setup
       </h1>
     </template>
 
     <AtlasCard
-      padding="md"
-      class="mb-4"
+      padding="sm"
+      class="mb-3"
     >
       <AtlasRow dense>
         <AtlasCol cols="12">
diff --git a/plugins/strategus/src/views/TimeAtRiskPanel.vue b/plugins/strategus/src/views/TimeAtRiskPanel.vue
index 03d3e51..2e09091 100644
--- a/plugins/strategus/src/views/TimeAtRiskPanel.vue
+++ b/plugins/strategus/src/views/TimeAtRiskPanel.vue
@@ -11,7 +11,7 @@
           <h1 class="text-h4 font-weight-light text-primary mb-1">
             Time-at-Risk
           </h1>
-          <p class="text-body-2 text-medium-emphasis mb-4">
+          <p class="text-body-2 text-medium-emphasis mb-3">
             Shared across all modules. Override per module in Advanced.
           </p>
         </div>
@@ -21,10 +21,10 @@
     <!-- Shared Windows card -->
     <AtlasCard
       variant="outlined"
-      class="mb-4"
+      class="mb-3"
       padding="none"
     >
-      <h3 class="card-title pa-4 pb-2 d-flex align-center justify-space-between text-subtitle-1 font-weight-medium">
+      <h3 class="card-title pa-3 pb-1 d-flex align-center justify-space-between text-subtitle-2 font-weight-medium">
         Shared Windows
       </h3>
       <AtlasDataTable
@@ -77,7 +77,7 @@
           />
         </template>
       </AtlasDataTable>
-      <div class="card-actions" style="display:flex; gap:8px; justify-content:flex-start; padding: 8px 16px">
+      <div class="card-actions" style="display:flex; gap:8px; justify-content:flex-start; padding: 6px 12px">
         <AtlasButton
           prepend-icon="mdi-plus"
           variant="ghost"
@@ -97,10 +97,10 @@
         class="mb-3 mt-2"
         padding="none"
       >
-        <h3 class="card-title text-subtitle-1 pa-4 pb-2 font-weight-medium">
+        <h3 class="card-title text-subtitle-2 pa-3 pb-1 font-weight-medium">
           SCCS Override
         </h3>
-        <div class="pa-4 pt-0">
+        <div class="pa-3 pt-0">
           <p class="text-body-2 text-medium-emphasis mb-3">
             Avoid intent-to-treat time-at-risk windows for SCCS. On-treatment or similarly defined TARs are more appropriate.
           </p>
@@ -180,10 +180,10 @@
         variant="outlined"
         padding="none"
       >
-        <h3 class="card-title text-subtitle-1 pa-4 pb-2 font-weight-medium">
+        <h3 class="card-title text-subtitle-2 pa-3 pb-1 font-weight-medium">
           PLP Override
         </h3>
-        <div class="pa-4 pt-0">
+        <div class="pa-3 pt-0">
           <p class="text-body-2 text-medium-emphasis mb-3">
             Patient-Level Prediction typically requires fixed-time windows (e.g., 365 days from cohort start) rather than on-treatment definitions.
           </p>
diff --git a/plugins/studies/src/StudiesApp.vue b/plugins/studies/src/StudiesApp.vue
index 983fd96..48d8fff 100644
--- a/plugins/studies/src/StudiesApp.vue
+++ b/plugins/studies/src/StudiesApp.vue
@@ -9,13 +9,20 @@
       <div
         v-if="visited.has('network')"
         v-show="section === 'network'"
-        class="studies-section"
+        class="studies-section studies-section--scroll"
       >
         <NetworkTab />
       </div>
       <div v-show="section === 'results'" class="studies-section studies-section--scroll">
         <ResultsTab />
       </div>
+      <div
+        v-if="visited.has('configuration')"
+        v-show="section === 'configuration'"
+        class="studies-section studies-section--scroll"
+      >
+        <NetworkTab section="configuration" />
+      </div>
     </StudiesLayout>
   </div>
 
@@ -37,7 +44,7 @@
 </template>
 
 <script lang="ts">
-export type StudiesSection = 'overview' | 'network' | 'results';
+export type StudiesSection = 'overview' | 'network' | 'results' | 'configuration';
 </script>
 
 <script setup lang="ts">
@@ -97,8 +104,8 @@ onUnmounted(() => unsubscribe?.());
 }
 .studies-results-full__back {
   position: absolute;
-  top: 12px;
-  right: 16px;
+  top: 44px;
+  left: 64px;
   /* Above the Results viewer's own loading overlay (z-index 200) so it stays
      reachable while WebR is booting. */
   z-index: 300;
diff --git a/plugins/studies/src/api/authToken.ts b/plugins/studies/src/api/authToken.ts
index e303793..02641aa 100644
--- a/plugins/studies/src/api/authToken.ts
+++ b/plugins/studies/src/api/authToken.ts
@@ -1,8 +1,66 @@
 // Shared auth token for backend calls. Set by main.ts from the host's
 // authContext on mount; read by all API clients. Replaces the
 // sibyl session-cookie assumption — Atlas3 provides a Bearer token instead.
+//
+// Under a d2e/Atlas host the token is a Logto RS256 access token, which trex
+// core's HS256-only auth middleware rejects — requests would run as the
+// grant-less `anon` Postgres role. ensureAuthToken() exchanges it via the
+// /trex-token function for a trex-native token before it is sent. Tokens that
+// already carry aud "authenticated" are trex-native and are sent unchanged.
 let token: string | null = null;
-export function setAuthToken(t: string | null): void { token = t; }
+let trexToken: string | null = null;
+let exchange: Promise<string | null> | null = null;
+
+export function setAuthToken(t: string | null): void {
+  token = t;
+  trexToken = null;
+  exchange = null;
+}
+
+function jwtPayload(t: string): Record<string, unknown> | null {
+  try {
+    const b64 = t.split('.')[1].replace(/-/g, '+').replace(/_/g, '/');
+    return JSON.parse(atob(b64)) as Record<string, unknown>;
+  } catch {
+    return null;
+  }
+}
+
+function expiresSoon(t: string): boolean {
+  const exp = jwtPayload(t)?.exp;
+  return typeof exp === 'number' && exp * 1000 < Date.now() + 30_000;
+}
+
+async function exchangeToken(t: string): Promise<string | null> {
+  try {
+    const resp = await fetch(`${location.origin}/trex-token`, {
+      method: 'POST',
+      headers: { Authorization: `Bearer ${t}` },
+    });
+    if (!resp.ok) return null;
+    const body = await resp.json();
+    return typeof body.access_token === 'string' ? body.access_token : null;
+  } catch {
+    return null;
+  }
+}
+
+/** Resolve the token authHeaders() will send; await before any backend request. */
+export async function ensureAuthToken(): Promise<void> {
+  if (!token) return;
+  const payload = jwtPayload(token);
+  if (!payload || payload.aud === 'authenticated') return;
+  if (trexToken && !expiresSoon(trexToken)) return;
+  if (!exchange) {
+    exchange = exchangeToken(token).finally(() => {
+      exchange = null;
+    });
+  }
+  const p = exchange;
+  trexToken = (await p) ?? trexToken;
+}
+
 export function authHeaders(): Record<string, string> {
-  return token ? { Authorization: `Bearer ${token}` } : {};
+  const t = trexToken ?? token;
+  return t ? { Authorization: `Bearer ${t}` } : {};
 }
diff --git a/plugins/studies/src/components/SectionHero.vue b/plugins/studies/src/components/SectionHero.vue
new file mode 100644
index 0000000..7d74494
--- /dev/null
+++ b/plugins/studies/src/components/SectionHero.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="section-hero">
+    <div class="section-hero__eyebrow-row">
+      <span class="section-hero__eyebrow">{{ eyebrow }}</span>
+      <span class="section-hero__accent" />
+    </div>
+    <div class="section-hero__head">
+      <div>
+        <h1 class="section-hero__title">{{ title }}</h1>
+        <p v-if="subtitle" class="section-hero__subtitle">{{ subtitle }}</p>
+      </div>
+      <div class="section-hero__actions"><slot name="actions" /></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{ eyebrow: string; title: string; subtitle?: string }>();
+</script>
+
+<style scoped>
+/* Flat rendition of the AtlasPageShell hero header (same metrics as
+   atlas-ui's page-header) — no surface of its own, so it can sit inside the
+   StudiesLayout card without nesting boxes. */
+.section-hero {
+  margin-bottom: 20px;
+}
+.section-hero__eyebrow-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 8px;
+}
+.section-hero__eyebrow {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: rgb(var(--v-theme-primary));
+}
+.section-hero__accent {
+  display: inline-block;
+  width: 28px;
+  height: 2px;
+  background: rgb(var(--v-theme-orange, 235, 102, 34));
+  border-radius: 2px;
+}
+.section-hero__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+.section-hero__title {
+  font-size: 26px;
+  font-weight: 300;
+  line-height: 1.2;
+  letter-spacing: 0.01em;
+  color: rgb(var(--v-theme-primary));
+  margin: 0;
+}
+.section-hero__subtitle {
+  font-size: 13px;
+  color: rgb(var(--v-theme-on-surface-variant));
+  margin: 4px 0 0;
+  max-width: 640px;
+  line-height: 1.5;
+}
+.section-hero__actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-shrink: 0;
+}
+</style>
diff --git a/plugins/studies/src/components/StudiesSidebar.vue b/plugins/studies/src/components/StudiesSidebar.vue
index 30bd340..b433bb6 100644
--- a/plugins/studies/src/components/StudiesSidebar.vue
+++ b/plugins/studies/src/components/StudiesSidebar.vue
@@ -14,6 +14,19 @@
         <AtlasIcon :icon="it.icon" size="16" />
         <span>{{ it.label }}</span>
       </button>
+
+      <div class="studies-sidebar__spacer" />
+
+      <button
+        v-for="it in bottomItems"
+        :key="it.key"
+        class="studies-sidebar__item"
+        :class="{ 'is-active': section === it.key }"
+        @click="section = it.key"
+      >
+        <AtlasIcon :icon="it.icon" size="16" />
+        <span>{{ it.label }}</span>
+      </button>
     </div>
   </nav>
 </template>
@@ -31,6 +44,10 @@ const items: Array<{ key: StudiesSection; label: string; icon: string }> = [
   { key: 'network', label: 'Network', icon: 'mdi-earth' },
   { key: 'results', label: 'Results', icon: 'mdi-chart-box-outline' },
 ];
+
+const bottomItems: Array<{ key: StudiesSection; label: string; icon: string }> = [
+  { key: 'configuration', label: 'Configuration', icon: 'mdi-cog-outline' },
+];
 </script>
 
 <style scoped>
@@ -61,6 +78,12 @@ const items: Array<{ key: StudiesSection; label: string; icon: string }> = [
   flex-direction: column;
   gap: 2px;
 }
+.studies-sidebar__spacer {
+  flex: 1 1 auto;
+  min-height: 12px;
+  margin: 8px 4px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+}
 .studies-sidebar__item {
   display: flex;
   align-items: center;
diff --git a/plugins/studies/src/data/local.ts b/plugins/studies/src/data/local.ts
index ea045bf..8654679 100644
--- a/plugins/studies/src/data/local.ts
+++ b/plugins/studies/src/data/local.ts
@@ -1,4 +1,4 @@
-import { authHeaders } from '../api/authToken';
+import { authHeaders, ensureAuthToken } from '../api/authToken';
 
 export interface LocalItem {
   id: string;
@@ -41,6 +41,7 @@ const LIST_DEFINITIONS = `query {
 }`;
 
 async function graphqlRequest<T>(query: string): Promise<T> {
+  await ensureAuthToken();
   const res = await fetch(GRAPHQL_ENDPOINT(), {
     method: 'POST',
     headers: { 'Content-Type': 'application/json', ...authHeaders() },
diff --git a/plugins/studies/src/views/LocalTab.vue b/plugins/studies/src/views/LocalTab.vue
index 4478df8..778da52 100644
--- a/plugins/studies/src/views/LocalTab.vue
+++ b/plugins/studies/src/views/LocalTab.vue
@@ -1,27 +1,23 @@
 <template>
-  <div class="studies-overview">
-    <header class="studies-overview__head">
-      <div>
-        <h1 class="text-h4">Overview</h1>
-        <p class="text-subtitle-1">Studies and notebooks running against this site's local data</p>
-      </div>
-      <div class="studies-overview__actions">
-        <AtlasButton
-          variant="ghost"
-          prepend-icon="mdi-notebook-plus-outline"
-          @click="navigate('/plugins/notebook-plugin/?new=1')"
-        >
-          New Notebook
-        </AtlasButton>
-        <AtlasButton
-          variant="primary"
-          prepend-icon="mdi-flask-plus-outline"
-          @click="navigate('/plugins/strategus-plugin/?new=1')"
-        >
-          New Study
-        </AtlasButton>
-      </div>
-    </header>
+  <div class="studies-section-body">
+    <SectionHero eyebrow="OHDSI · Studies" title="Overview" subtitle="Studies and notebooks running against this site's local data">
+    <template #actions>
+      <AtlasButton
+        variant="ghost"
+        prepend-icon="mdi-notebook-plus-outline"
+        @click="navigate('/plugins/notebook-plugin/?new=1')"
+      >
+        New Notebook
+      </AtlasButton>
+      <AtlasButton
+        variant="primary"
+        prepend-icon="mdi-flask-plus-outline"
+        @click="navigate('/plugins/strategus-plugin/?new=1')"
+      >
+        New Study
+      </AtlasButton>
+    </template>
+    </SectionHero>
 
     <AtlasAlert v-if="error" severity="danger" class="mb-4">{{ error }}</AtlasAlert>
 
@@ -43,6 +39,7 @@
 <script setup lang="ts">
 import { ref, inject, onMounted } from 'vue';
 import { AtlasDataTable, AtlasAlert, AtlasButton } from '@ohdsi/atlas-ui';
+import SectionHero from '../components/SectionHero.vue';
 import { listLocalItems, type LocalItem } from '../data/local';
 import type { StudiesHostCtx } from '../main';
 
@@ -89,31 +86,5 @@ onMounted(reload);
 </script>
 
 <style scoped>
-.studies-overview {
-  padding: 28px 32px;
-}
-.studies-overview__head {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
-  margin-bottom: 20px;
-}
-.studies-overview__head h1.text-h4 {
-  font-size: 34px;
-  font-weight: 300;
-  line-height: 1.2;
-  color: rgb(var(--v-theme-primary));
-}
-.studies-overview__head .text-subtitle-1 {
-  font-size: 14px;
-  font-weight: 400;
-  color: rgba(0, 0, 0, 0.62);
-  margin-top: 2px;
-}
-.studies-overview__actions {
-  display: flex;
-  gap: 8px;
-  flex-shrink: 0;
-}
+.studies-section-body { padding: 20px 24px; }
 </style>
diff --git a/plugins/studies/src/views/NetworkTab.vue b/plugins/studies/src/views/NetworkTab.vue
index f308d12..c480a15 100644
--- a/plugins/studies/src/views/NetworkTab.vue
+++ b/plugins/studies/src/views/NetworkTab.vue
@@ -1,7 +1,11 @@
 <template>
-  <PluginEmbed pluginId="network-plugin" />
+  <PluginEmbed pluginId="network-plugin" :parcel-props="{ section: props.section }" />
 </template>
 
 <script setup lang="ts">
 import PluginEmbed from '../components/PluginEmbed.vue';
+
+const props = withDefaults(defineProps<{ section?: 'main' | 'configuration' }>(), {
+  section: 'main',
+});
 </script>
diff --git a/plugins/studies/src/views/ResultsTab.vue b/plugins/studies/src/views/ResultsTab.vue
index 4794c14..6f6b074 100644
--- a/plugins/studies/src/views/ResultsTab.vue
+++ b/plugins/studies/src/views/ResultsTab.vue
@@ -1,27 +1,23 @@
 <template>
-  <div class="studies-results-list">
-    <header class="studies-results-list__head">
-      <div>
-        <h1 class="text-h4">Results</h1>
-        <p class="text-subtitle-1">Imported study results — open one to explore it in the viewer</p>
-      </div>
-      <div class="studies-results-list__actions">
-        <input
-          ref="fileInput"
-          type="file"
-          accept=".zip,.db,.db.gz"
-          style="display: none"
-          @change="onFile"
-        />
-        <AtlasButton
-          variant="primary"
-          prepend-icon="mdi-upload-outline"
-          @click="fileInput?.click()"
-        >
-          Import result
-        </AtlasButton>
-      </div>
-    </header>
+  <div class="studies-section-body">
+    <SectionHero eyebrow="OHDSI · Results" title="Results" subtitle="Imported study results — open one to explore it in the viewer">
+    <template #actions>
+      <input
+        ref="fileInput"
+        type="file"
+        accept=".zip,.db,.db.gz"
+        style="display: none"
+        @change="onFile"
+      />
+      <AtlasButton
+        variant="primary"
+        prepend-icon="mdi-upload-outline"
+        @click="fileInput?.click()"
+      >
+        Import result
+      </AtlasButton>
+    </template>
+    </SectionHero>
 
     <AtlasAlert v-if="error" severity="danger" class="mb-4">{{ error }}</AtlasAlert>
 
@@ -32,7 +28,7 @@
       item-value="id"
     >
       <template #item.name="{ item }">
-        <a class="text-primary" style="cursor: pointer" @click="open(item)">{{ item.name }}</a>
+        <a class="text-primary" style="cursor: pointer" @click="open(item)">{{ displayName(item.name) }}</a>
       </template>
       <template #item.size="{ item }">{{ formatSize(item.size) }}</template>
       <template #item.addedAt="{ item }">{{ formatDate(item.addedAt) }}</template>
@@ -52,6 +48,7 @@
 <script setup lang="ts">
 import { ref, inject, onMounted, type Ref } from 'vue';
 import { AtlasDataTable, AtlasAlert, AtlasButton, AtlasIconButton } from '@ohdsi/atlas-ui';
+import SectionHero from '../components/SectionHero.vue';
 import { listResults, addResult, deleteResult, formatSize, type ResultMeta } from '../data/results';
 
 // Setting this (provided by StudiesApp) opens the full-screen viewer for that id.
@@ -69,6 +66,15 @@ const headers = [
   { title: '', key: 'actions', sortable: false, align: 'end' as const },
 ];
 
+// Display the result by a study-like name rather than the raw upload filename:
+// drop the archive extension and turn separators into spaces.
+function displayName(name: string): string {
+  return name
+    .replace(/\.(db\.gz|zip|db)$/i, '')
+    .replace(/[_-]+/g, ' ')
+    .trim();
+}
+
 function formatDate(ms: number): string {
   return new Date(ms).toLocaleString();
 }
@@ -115,31 +121,5 @@ onMounted(reload);
 </script>
 
 <style scoped>
-.studies-results-list {
-  padding: 28px 32px;
-}
-.studies-results-list__head {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
-  margin-bottom: 20px;
-}
-.studies-results-list__head h1.text-h4 {
-  font-size: 34px;
-  font-weight: 300;
-  line-height: 1.2;
-  color: rgb(var(--v-theme-primary));
-}
-.studies-results-list__head .text-subtitle-1 {
-  font-size: 14px;
-  font-weight: 400;
-  color: rgba(0, 0, 0, 0.62);
-  margin-top: 2px;
-}
-.studies-results-list__actions {
-  display: flex;
-  gap: 8px;
-  flex-shrink: 0;
-}
+.studies-section-body { padding: 20px 24px; }
 </style>