diff --git a/packages/landing/src/routes/pricing.jsx b/packages/landing/src/routes/pricing.jsx
index a20e92cf2..269fde06e 100644
--- a/packages/landing/src/routes/pricing.jsx
+++ b/packages/landing/src/routes/pricing.jsx
@@ -127,7 +127,7 @@ export default function Pricing() {
             </p>
           </div>
 
-          <div class='mt-10 flex hidden justify-center'>
+          <div class='mt-10 hidden justify-center'>
             <div class='inline-flex rounded-lg bg-gray-100 p-1'>
               <button
                 type='button'
@@ -155,7 +155,7 @@ export default function Pricing() {
             </div>
           </div>
 
-          <div class='mt-10 grid hidden grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4'>
+          <div class='mt-10 hidden grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4'>
             <For each={plans()}>
               {(plan, index) => (
                 <div
diff --git a/packages/mcp/README.md b/packages/mcp/README.md
index 7723d8581..e059dd9af 100644
--- a/packages/mcp/README.md
+++ b/packages/mcp/README.md
@@ -47,14 +47,6 @@ Fetch Drizzle ORM documentation.
 
 **Parameters:**
 
-- `path` (optional) - Doc path (e.g. "select", "insert", "relations"). Omit for index.
-
-### `zag_docs`
-
-Fetch Zag.js documentation for building accessible UI components with SolidJS. Note: Most components have been migrated to Ark UI, but this tool is still useful for components that haven't been migrated yet.
-
-**Parameters:**
-
 - `path` (optional) - Component name (e.g. "accordion", "dialog", "tooltip"). Omit for index.
 
 ### `code_review`
diff --git a/packages/mcp/src/server.ts b/packages/mcp/src/server.ts
index 7f513ff36..45397a81c 100644
--- a/packages/mcp/src/server.ts
+++ b/packages/mcp/src/server.ts
@@ -15,7 +15,6 @@ import { registerLintTools } from './tools/lint.js';
 import { registerLocalDocsTools } from './tools/local-docs.js';
 import { registerBetterAuthTools } from './tools/better-auth.js';
 import { registerDrizzleTools } from './tools/drizzle.js';
-import { registerZagTools } from './tools/zag.js';
 import { registerCodeReviewTools } from './tools/code-review.js';
 
 const __filename = fileURLToPath(import.meta.url);
@@ -35,7 +34,6 @@ registerLintTools(server, repoRoot);
 registerLocalDocsTools(server, docsRoot);
 registerBetterAuthTools(server);
 registerDrizzleTools(server);
-registerZagTools(server);
 registerCodeReviewTools(server, repoRoot);
 
 // Start the server with stdio transport
diff --git a/packages/mcp/src/tools/zag.ts b/packages/mcp/src/tools/zag.ts
deleted file mode 100644
index 6440ab474..000000000
--- a/packages/mcp/src/tools/zag.ts
+++ /dev/null
@@ -1,201 +0,0 @@
-import { z } from 'zod';
-import { CACHE_TTL } from '../constants.js';
-import type { McpServerType } from '../types.js';
-
-const ZAG_DOCS_URL = 'https://zagjs.com/llms-solid.txt';
-
-interface ResourceMarker {
-  lineNum: number;
-  name: string;
-}
-
-interface ZagDocsCache {
-  sections: Map<string, string>;
-}
-
-// Cache for parsed Zag docs
-let zagDocsCache: ZagDocsCache | null = null;
-let zagCacheTime = 0;
-
-/**
- * Fetch and parse Zag docs from remote URL
- * Parses into sections by component name from ## Resources sections
- */
-async function fetchZagDocs(): Promise<ZagDocsCache> {
-  const now = Date.now();
-  if (zagDocsCache && now - zagCacheTime < CACHE_TTL) {
-    return zagDocsCache;
-  }
-
-  const response = await fetch(ZAG_DOCS_URL);
-  if (!response.ok) {
-    throw new Error(`Failed to fetch Zag docs: ${response.status} ${response.statusText}`);
-  }
-
-  const content = await response.text();
-  const lines = content.split('\n');
-
-  // Find all '## Resources' lines and their associated component names
-  const resourceMarkers: ResourceMarker[] = [];
-  for (let i = 0; i < lines.length; i++) {
-    if (lines[i] === '## Resources') {
-      // Look ahead for npm link (within next 10 lines)
-      for (let j = i + 1; j < Math.min(i + 10, lines.length); j++) {
-        const npmMatch = lines[j].match(/@zag-js\/([a-z-]+)/);
-        if (npmMatch && npmMatch[1] !== 'solid' && npmMatch[1] !== 'i') {
-          resourceMarkers.push({ lineNum: i, name: npmMatch[1] });
-          break;
-        }
-      }
-    }
-  }
-
-  const sections = new Map<string, string>();
-
-  for (let i = 0; i < resourceMarkers.length; i++) {
-    const marker = resourceMarkers[i];
-    const nextMarker = resourceMarkers[i + 1];
-
-    // Find section start
-    let startLine = 0;
-    if (i > 0) {
-      const prevMarkerLine = resourceMarkers[i - 1].lineNum;
-      for (let j = prevMarkerLine + 1; j < marker.lineNum; j++) {
-        if (lines[j].trim() === '' && j + 1 < marker.lineNum && lines[j + 1].trim() !== '') {
-          const nextNonEmpty = lines[j + 1].trim();
-          if (nextNonEmpty && !nextNonEmpty.startsWith('#') && !nextNonEmpty.startsWith('**`')) {
-            startLine = j + 1;
-          }
-        }
-      }
-      if (startLine === 0) startLine = prevMarkerLine;
-    }
-
-    // Find section end
-    let endLine = lines.length;
-    if (nextMarker) {
-      for (let j = nextMarker.lineNum - 1; j > marker.lineNum; j--) {
-        if (lines[j].trim() === '') {
-          if (j - 1 > marker.lineNum) {
-            const prevLine = lines[j - 1].trim();
-            if (prevLine.startsWith('Description:') || prevLine === '') {
-              endLine = j + 1;
-              break;
-            }
-          }
-        }
-      }
-      if (endLine === lines.length) endLine = nextMarker.lineNum;
-    }
-
-    const sectionLines = lines.slice(startLine, endLine);
-    const sectionContent = sectionLines.join('\n').trim();
-
-    // Only add if not already present (first occurrence wins)
-    if (!sections.has(marker.name) && sectionContent) {
-      sections.set(marker.name, sectionContent);
-    }
-  }
-
-  zagDocsCache = { sections };
-  zagCacheTime = now;
-  return zagDocsCache;
-}
-
-/**
- * Generate an index of all Zag component sections
- */
-function generateZagIndex(sections: Map<string, string>): string {
-  const sortedComponents = [...sections.keys()].sort();
-
-  let index = `# Zag.js Documentation Index\n\n`;
-  index += `Zag.js is a framework-agnostic toolkit for building accessible UI components. Below are the ${sortedComponents.length} available components.\n\n`;
-  index += `## Available Components\n\n`;
-
-  for (const component of sortedComponents) {
-    index += `- [${component}](${component})\n`;
-  }
-
-  index += `\n---\n\nUse the component name (e.g. "accordion", "dialog", "tooltip") to fetch specific documentation.`;
-
-  return index;
-}
-
-export function registerZagTools(server: McpServerType): void {
-  server.tool(
-    'zag_docs',
-    'Fetch Zag.js documentation for building accessible UI components with SolidJS. Returns an index of all components when no path is provided, or specific component documentation when a path is given. Use this for accordion, dialog, tooltip, tabs, and all other Zag UI components.',
-    {
-      path: z
-        .string()
-        .describe(
-          'The component name to fetch (e.g. "accordion", "dialog", "tooltip", "tabs", "menu"). Omit to get the index of all available components.',
-        )
-        .optional(),
-    },
-    async ({
-      path: componentName,
-    }): Promise<{ content: Array<{ type: 'text'; text: string }> }> => {
-      try {
-        const { sections } = await fetchZagDocs();
-
-        if (!componentName) {
-          const index = generateZagIndex(sections);
-          return { content: [{ type: 'text', text: index }] };
-        }
-
-        const normalizedName = componentName.toLowerCase().trim();
-
-        // Exact match
-        if (sections.has(normalizedName)) {
-          return {
-            content: [
-              {
-                type: 'text',
-                text: `# Zag.js: ${normalizedName}\n\n${sections.get(normalizedName)!}`,
-              },
-            ],
-          };
-        }
-
-        // Partial match
-        const matches = [...sections.keys()].filter(
-          c => c.includes(normalizedName) || normalizedName.includes(c),
-        );
-
-        if (matches.length === 1) {
-          return {
-            content: [
-              { type: 'text', text: `# Zag.js: ${matches[0]}\n\n${sections.get(matches[0])!}` },
-            ],
-          };
-        }
-
-        if (matches.length > 1) {
-          return {
-            content: [
-              {
-                type: 'text',
-                text: `Multiple matches found for "${componentName}":\n\n${matches.map(m => `- ${m}`).join('\n')}\n\nPlease specify the exact component name.`,
-              },
-            ],
-          };
-        }
-
-        return {
-          content: [
-            {
-              type: 'text',
-              text: `No documentation found for "${componentName}". Try fetching the index (omit the path parameter) to see all available components.`,
-            },
-          ],
-        };
-      } catch (error) {
-        const errorMessage = error instanceof Error ? error.message : String(error);
-        return {
-          content: [{ type: 'text', text: `Error fetching Zag docs: ${errorMessage}` }],
-        };
-      }
-    },
-  );
-}
diff --git a/packages/web/src/components/checklist-ui/common/NoteEditor.jsx b/packages/web/src/components/checklist-ui/common/NoteEditor.jsx
index 433ee3b21..47d6e192e 100644
--- a/packages/web/src/components/checklist-ui/common/NoteEditor.jsx
+++ b/packages/web/src/components/checklist-ui/common/NoteEditor.jsx
@@ -29,7 +29,6 @@ export default function NoteEditor(props) {
   const initialExpanded = props.readOnly ? true : !props.collapsed;
   const [expanded, setExpanded] = createSignal(initialExpanded);
   const [localValue, setLocalValue] = createSignal('');
-  const [hasBeenManuallyToggled, setHasBeenManuallyToggled] = createSignal(false);
   let textareaRef;
 
   // Initialize from Y.Text and set up observer
@@ -136,7 +135,6 @@ export default function NoteEditor(props) {
           <Collapsible
             open={expanded()}
             onOpenChange={({ open }) => {
-              setHasBeenManuallyToggled(true);
               setExpanded(open);
             }}
             trigger={
diff --git a/packages/web/src/components/project-ui/ContactPrompt.jsx b/packages/web/src/components/project-ui/ContactPrompt.jsx
new file mode 100644
index 000000000..cd5f4b401
--- /dev/null
+++ b/packages/web/src/components/project-ui/ContactPrompt.jsx
@@ -0,0 +1,56 @@
+/**
+ * ContactPrompt Component
+ * Prompts users to contact for early access when they cannot create projects
+ */
+
+import { FiMail } from 'solid-icons/fi';
+import { LANDING_URL } from '@config/api.js';
+
+export default function ContactPrompt(props) {
+  const restrictionType = () => props.restrictionType ?? 'entitlement';
+  const projectCount = () => props.projectCount ?? 0;
+  const quotaLimit = () => props.quotaLimit ?? null;
+
+  const contactUrl = () => `${LANDING_URL}/contact`;
+
+  const getTitle = () => {
+    if (restrictionType() === 'entitlement') {
+      return 'Project Creation Not Available';
+    }
+    return 'Project Limit Reached';
+  };
+
+  const getMessage = () => {
+    if (restrictionType() === 'entitlement') {
+      return 'CoRATES is in early access. Request access to create projects by contacting us.';
+    }
+    const limit = quotaLimit();
+    const limitText = limit === null || limit === -1 ? '∞' : limit;
+    return `You've reached your project limit (${projectCount()}/${limitText}). Request early access for more projects.`;
+  };
+
+  return (
+    <div class='rounded-lg border border-blue-200 bg-white p-4'>
+      <div class='flex items-start space-x-3'>
+        <div class='shrink-0'>
+          <div class='flex h-10 w-10 items-center justify-center rounded-full bg-blue-100'>
+            <FiMail class='h-5 w-5 text-blue-600' />
+          </div>
+        </div>
+        <div class='min-w-0 flex-1'>
+          <h3 class='text-sm font-medium text-gray-900'>{getTitle()}</h3>
+          <p class='mt-1 text-sm text-gray-600'>{getMessage()}</p>
+          <a
+            href={contactUrl()}
+            target='_blank'
+            rel='noopener noreferrer'
+            class='mt-3 inline-flex items-center rounded-md bg-blue-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-blue-700'
+          >
+            <FiMail class='mr-1 h-4 w-4' />
+            Request Early Access
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/web/src/components/project-ui/ProjectDashboard.jsx b/packages/web/src/components/project-ui/ProjectDashboard.jsx
index 3a51b68b2..8af3a8bde 100644
--- a/packages/web/src/components/project-ui/ProjectDashboard.jsx
+++ b/packages/web/src/components/project-ui/ProjectDashboard.jsx
@@ -10,6 +10,7 @@ import { useSubscription } from '@primitives/useSubscription.js';
 import { isUnlimitedQuota } from '@corates/shared/plans';
 import CreateProjectForm from './CreateProjectForm.jsx';
 import ProjectCard from './ProjectCard.jsx';
+import ContactPrompt from './ContactPrompt.jsx';
 import { getRestoreParamsFromUrl } from '@lib/formStatePersistence.js';
 
 export default function ProjectDashboard(props) {
@@ -41,6 +42,16 @@ export default function ProjectDashboard(props) {
     );
   };
 
+  // Determine restriction type and quota limit for ContactPrompt
+  const restrictionType = () => {
+    return !hasEntitlement('project.create') ? 'entitlement' : 'quota';
+  };
+
+  const quotaLimit = () => {
+    const limit = quotas()['projects.max'];
+    return isUnlimitedQuota(limit) ? -1 : limit;
+  };
+
   // Check if error is due to offline state
   const isOfflineError = () => {
     const err = error();
@@ -135,7 +146,7 @@ export default function ProjectDashboard(props) {
   return (
     <div class='space-y-6'>
       {/* Header */}
-      <div class='flex items-center justify-between'>
+      <div class='flex flex-wrap items-center justify-between gap-4'>
         <div>
           <h1 class='text-2xl font-bold text-gray-900'>My Projects</h1>
           <p class='mt-1 text-gray-500'>Manage your research projects</p>
@@ -143,13 +154,12 @@ export default function ProjectDashboard(props) {
         <Show
           when={canCreateProject()}
           fallback={
-            <div class='flex flex-col items-end gap-1'>
-              <div class='text-sm text-gray-600'>
-                {!hasEntitlement('project.create') ?
-                  'Project creation not available on your plan'
-                : `Project limit reached (${projectCount()}/${isUnlimitedQuota(quotas()['projects.max']) ? '∞' : quotas()['projects.max']})`
-                }
-              </div>
+            <div class='max-w-sm'>
+              <ContactPrompt
+                restrictionType={restrictionType()}
+                projectCount={projectCount()}
+                quotaLimit={quotaLimit()}
+              />
             </div>
           }
         >
@@ -190,16 +200,17 @@ export default function ProjectDashboard(props) {
           when={projects()?.length > 0}
           fallback={
             <Show when={!isLoading()}>
-              <div class='col-span-full rounded-lg border-2 border-dashed border-gray-300 bg-white py-12 text-center'>
+              <div class='col-span-full rounded-lg border-2 border-dashed border-gray-300 bg-white px-6 py-12'>
                 <div class='mb-4 text-gray-500'>No projects yet</div>
                 <Show
                   when={canCreateProject()}
                   fallback={
-                    <div class='text-sm text-gray-600'>
-                      {!hasEntitlement('project.create') ?
-                        'Project creation not available on your plan'
-                      : `Project limit reached (${projectCount()}/${isUnlimitedQuota(quotas()['projects.max']) ? '∞' : quotas()['projects.max']})`
-                      }
+                    <div class='mx-auto max-w-md'>
+                      <ContactPrompt
+                        restrictionType={restrictionType()}
+                        projectCount={projectCount()}
+                        quotaLimit={quotaLimit()}
+                      />
                     </div>
                   }
                 >
diff --git a/packages/web/src/components/project-ui/overview-tab/ChartSection.jsx b/packages/web/src/components/project-ui/overview-tab/ChartSection.jsx
index 19f084114..6a4ab1b15 100644
--- a/packages/web/src/components/project-ui/overview-tab/ChartSection.jsx
+++ b/packages/web/src/components/project-ui/overview-tab/ChartSection.jsx
@@ -241,11 +241,18 @@ export default function ChartSection(props) {
       }
     >
       <div class='flex flex-col gap-6'>
-        {/* Settings button */}
-        <div class='flex justify-end'>
+        {/* Section Header with Description and Settings */}
+        <div class='flex items-start justify-between gap-4'>
+          <div class='flex-1'>
+            <p class='text-sm text-gray-600'>
+              Visual representation of AMSTAR-2 quality assessment ratings across completed
+              checklists. Use the settings to customize chart appearance, labels, and export
+              options.
+            </p>
+          </div>
           <button
             onClick={() => setShowSettingsModal(true)}
-            class='inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900'
+            class='inline-flex shrink-0 items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900'
             title='Chart Settings'
           >
             <BiRegularCog class='h-4 w-4' />
diff --git a/packages/web/src/components/project-ui/overview-tab/CircularProgress.jsx b/packages/web/src/components/project-ui/overview-tab/CircularProgress.jsx
new file mode 100644
index 000000000..cd6bf4af4
--- /dev/null
+++ b/packages/web/src/components/project-ui/overview-tab/CircularProgress.jsx
@@ -0,0 +1,146 @@
+/**
+ * CircularProgress - Circular progress indicator using D3
+ */
+
+import { createEffect } from 'solid-js';
+import * as d3 from 'd3';
+
+export default function CircularProgress(props) {
+  let svgRef = null;
+
+  const value = () => props.value ?? 0;
+  const label = () => props.label ?? '';
+  const showValue = () => props.showValue ?? false;
+  const variant = () => props.variant ?? 'default';
+  const size = () => props.size ?? 120; // Default size in pixels
+
+  const getVariantColor = () => {
+    switch (variant()) {
+      case 'success':
+        return '#10b981'; // green-500
+      case 'warning':
+        return '#eab308'; // yellow-500
+      case 'error':
+        return '#ef4444'; // red-500
+      default:
+        return '#3b82f6'; // blue-500
+    }
+  };
+
+  const clampedValue = () => Math.max(0, Math.min(100, value()));
+
+  createEffect(() => {
+    if (!svgRef) return;
+
+    const radius = size() / 2 - 8; // Leave some padding
+    const centerX = size() / 2;
+    const centerY = size() / 2;
+    const strokeWidth = 8;
+
+    // Clear previous content
+    d3.select(svgRef).selectAll('*').remove();
+
+    const svg = d3.select(svgRef).attr('width', size()).attr('height', size());
+
+    // Create arc generator
+    const arc = d3
+      .arc()
+      .innerRadius(radius - strokeWidth / 2)
+      .outerRadius(radius + strokeWidth / 2)
+      .cornerRadius(4);
+
+    const group = svg.append('g').attr('transform', `translate(${centerX}, ${centerY})`);
+
+    // Background circle (full 360 degrees)
+    const backgroundArc = arc({
+      startAngle: 0,
+      endAngle: 2 * Math.PI,
+    });
+
+    group.append('path').attr('d', backgroundArc).attr('fill', '#e5e7eb'); // gray-200
+
+    // Progress arc
+    const progressAngle = (clampedValue() / 100) * 2 * Math.PI;
+    const progressArcData = {
+      startAngle: -Math.PI / 2, // Start from top
+      endAngle: -Math.PI / 2 + progressAngle,
+    };
+
+    // Initialize with 0 angle for smooth animation
+    const progressPath = group
+      .append('path')
+      .datum({
+        startAngle: -Math.PI / 2,
+        endAngle: -Math.PI / 2,
+      })
+      .attr('d', arc)
+      .attr('fill', getVariantColor());
+
+    // Animate to actual progress
+    progressPath
+      .transition()
+      .duration(800)
+      .ease(d3.easeCubicOut)
+      .attrTween('d', function (d) {
+        const interpolate = d3.interpolate(d.endAngle, progressArcData.endAngle);
+        return function (t) {
+          d.endAngle = interpolate(t);
+          return arc(d);
+        };
+      });
+
+    // Center text - percentage
+    if (showValue()) {
+      svg
+        .append('text')
+        .attr('x', centerX)
+        .attr('y', centerY)
+        .attr('text-anchor', 'middle')
+        .attr('dominant-baseline', 'middle')
+        .attr('font-size', '24px')
+        .attr('font-weight', 'bold')
+        .attr('fill', '#111827') // gray-900
+        .text(`${Math.round(clampedValue())}%`)
+        .attr('opacity', 0)
+        .transition()
+        .duration(800)
+        .ease(d3.easeCubicOut)
+        .attr('opacity', 1);
+    }
+
+    // Center text - label (if provided, show below value)
+    if (label()) {
+      const currentLabel = label();
+      const currentSize = size();
+      const labelY = showValue() ? centerY + 28 : centerY;
+      svg
+        .append('text')
+        .attr('x', centerX)
+        .attr('y', labelY)
+        .attr('text-anchor', 'middle')
+        .attr('dominant-baseline', 'middle')
+        .attr('font-size', '11px')
+        .attr('fill', '#6b7280') // gray-500
+        .text(currentLabel)
+        .attr('opacity', 0)
+        .transition()
+        .duration(800)
+        .ease(d3.easeCubicOut)
+        .attr('opacity', 1)
+        .call(text => {
+          // Truncate text if too long
+          const maxLength = Math.floor((currentSize * 0.75) / 6); // Approximate chars that fit
+          const textElement = text.node();
+          if (textElement && currentLabel.length > maxLength) {
+            textElement.textContent = currentLabel.substring(0, maxLength - 3) + '...';
+          }
+        });
+    }
+  });
+
+  return (
+    <div class='flex items-center justify-center'>
+      <svg ref={svgRef} class='overflow-visible' />
+    </div>
+  );
+}
diff --git a/packages/web/src/components/project-ui/overview-tab/OverviewTab.jsx b/packages/web/src/components/project-ui/overview-tab/OverviewTab.jsx
index 716d30478..aa2094641 100644
--- a/packages/web/src/components/project-ui/overview-tab/OverviewTab.jsx
+++ b/packages/web/src/components/project-ui/overview-tab/OverviewTab.jsx
@@ -1,6 +1,9 @@
-import { For, Show, createSignal } from 'solid-js';
+import { For, Show, createSignal, createMemo } from 'solid-js';
 import { useNavigate } from '@solidjs/router';
 import { FiPlus, FiTrash2 } from 'solid-icons/fi';
+import { AiOutlineBook } from 'solid-icons/ai';
+import { BiRegularCheckCircle, BiRegularTimeFive } from 'solid-icons/bi';
+import { CgArrowsExchange } from 'solid-icons/cg';
 import ChartSection from './ChartSection.jsx';
 import AddMemberModal from './AddMemberModal.jsx';
 import ReviewerAssignment from './ReviewerAssignment.jsx';
@@ -8,10 +11,11 @@ import projectStore from '@/stores/projectStore.js';
 import projectActionsStore from '@/stores/projectActionsStore';
 import { useBetterAuth } from '@api/better-auth-store.js';
 import { useProjectContext } from '../ProjectContext.jsx';
-import { Avatar, useConfirmDialog, showToast } from '@corates/ui';
+import { Avatar, useConfirmDialog, showToast, Progress, Collapsible } from '@corates/ui';
 import { API_BASE } from '@config/api.js';
 import { CHECKLIST_STATUS } from '@/constants/checklist-status.js';
 import { shouldShowInTab } from '@/lib/checklist-domain.js';
+import CircularProgress from './CircularProgress.jsx';
 
 /**
  * OverviewTab - Project overview with stats, settings, and members
@@ -19,6 +23,7 @@ import { shouldShowInTab } from '@/lib/checklist-domain.js';
  */
 export default function OverviewTab() {
   const [showAddMemberModal, setShowAddMemberModal] = createSignal(false);
+  const [chartsExpanded, setChartsExpanded] = createSignal(false);
 
   const { user } = useBetterAuth();
   const { projectId, isOwner } = useProjectContext();
@@ -47,6 +52,59 @@ export default function OverviewTab() {
   const completedStudies = () =>
     studies().filter(s => shouldShowInTab(s, 'completed', null)).length;
 
+  // Calculate overall progress (completed studies / total studies)
+  const overallProgress = createMemo(() => {
+    const total = studies().length;
+    if (total === 0) return 0;
+    const completed = completedStudies();
+    return Math.round((completed / total) * 100);
+  });
+
+  // Calculate user progress for all users (memoized for performance)
+  const userProgressMap = createMemo(() => {
+    const progressMap = new Map();
+
+    studies().forEach(study => {
+      const checklists = study.checklists || [];
+      checklists.forEach(checklist => {
+        const userId = checklist.assignedTo;
+        if (!userId) return;
+
+        if (!progressMap.has(userId)) {
+          progressMap.set(userId, { completed: 0, total: 0 });
+        }
+
+        const progress = progressMap.get(userId);
+        progress.total++;
+        if (
+          checklist.status === CHECKLIST_STATUS.AWAITING_RECONCILE ||
+          checklist.status === CHECKLIST_STATUS.COMPLETED
+        ) {
+          progress.completed++;
+        }
+      });
+    });
+
+    // Convert to percentage
+    const result = new Map();
+    progressMap.forEach((progress, userId) => {
+      result.set(userId, {
+        percentage:
+          progress.total === 0 ? 0 : Math.round((progress.completed / progress.total) * 100),
+        completed: progress.completed,
+        total: progress.total,
+      });
+    });
+
+    return result;
+  });
+
+  // Helper to get user progress
+  const getUserProgress = userId => {
+    if (!userId) return { percentage: 0, completed: 0, total: 0 };
+    return userProgressMap().get(userId) || { percentage: 0, completed: 0, total: 0 };
+  };
+
   // Handlers (use active project - no projectId needed)
   const handleUpdateStudy = (studyId, updates) => {
     projectActionsStore.study.update(studyId, updates);
@@ -87,70 +145,105 @@ export default function OverviewTab() {
     return projectActionsStore.checklist.getData(studyId, checklistId);
   };
 
+  // Calculate unassigned studies for Reviewer Assignment visibility
+  const unassignedStudies = createMemo(() => studies().filter(s => !s.reviewer1 && !s.reviewer2));
+
+  // Determine if Reviewer Assignment should be shown
+  const shouldShowReviewerAssignment = () =>
+    isOwner() && studies().length > 0 && unassignedStudies().length > 0;
+
   return (
     <>
-      {/* Stats Summary */}
-      <div class='mb-6 grid grid-cols-2 gap-4 md:grid-cols-4'>
-        <div class='rounded-lg bg-gray-50 p-4 text-center'>
-          <p class='text-2xl font-bold text-gray-900'>{studies().length}</p>
-          <p class='text-sm text-gray-500'>Total Studies</p>
-        </div>
-        <div class='rounded-lg bg-amber-50 p-4 text-center'>
-          <p class='text-2xl font-bold text-amber-900'>{inProgressStudies()}</p>
-          <p class='text-sm text-amber-600'>In Progress</p>
-        </div>
-        <div class='rounded-lg bg-green-50 p-4 text-center'>
-          <p class='text-2xl font-bold text-green-900'>{readyToReconcile()}</p>
-          <p class='text-sm text-green-600'>Ready to Reconcile</p>
-        </div>
-        <div class='rounded-lg bg-blue-50 p-4 text-center'>
-          <p class='text-2xl font-bold text-blue-900'>{completedStudies()}</p>
-          <p class='text-sm text-blue-500'>Completed</p>
-        </div>
-      </div>
+      {/* Section 1: Project Progress - Hero Section */}
+      <div class='mb-8 rounded-lg border border-gray-200 bg-white p-6 shadow-sm'>
+        <h2 class='mb-6 text-lg font-semibold text-gray-900'>Project Progress</h2>
 
-      {/* Two-column layout for better space utilization */}
-      <div class='mb-8 grid grid-cols-1 gap-6 lg:grid-cols-2'>
-        {/* Left Column */}
-        <div class='space-y-6'>
-          {/* Reviewer Assignment Section */}
-          <Show when={isOwner() && studies().length > 0}>
-            <ReviewerAssignment
-              studies={studies}
-              members={members}
-              onAssignReviewers={handleUpdateStudy}
+        <div class='mb-6 flex flex-col items-center md:flex-row md:items-start md:gap-8'>
+          {/* Overall Progress - Circular */}
+          <div class='mb-6 md:mb-0'>
+            <CircularProgress
+              value={overallProgress()}
+              showValue={true}
+              variant={
+                overallProgress() === 100 ? 'success'
+                : overallProgress() >= 50 ?
+                  'default'
+                : 'warning'
+              }
+              size={160}
             />
-          </Show>
-        </div>
+            <p class='mt-3 text-center text-sm text-gray-600'>
+              {completedStudies()} of {studies().length} studies completed
+            </p>
+          </div>
 
-        {/* Right Column */}
-        <div class='space-y-6'>
-          {/* Members Section */}
-          <div>
-            <div class='mb-4 flex items-center justify-between'>
-              <h3 class='text-lg font-semibold text-gray-900'>Project Members</h3>
-              <Show when={isOwner()}>
-                <button
-                  onClick={() => setShowAddMemberModal(true)}
-                  class='inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-blue-700'
-                >
-                  <FiPlus class='h-4 w-4' />
-                  Add Member
-                </button>
-              </Show>
+          {/* Enhanced Stats Grid */}
+          <div class='grid flex-1 grid-cols-2 gap-4 md:grid-cols-4'>
+            <div class='rounded-lg border border-gray-200 bg-gray-50 p-5 text-center'>
+              <div class='mb-2 flex justify-center'>
+                <AiOutlineBook class='h-6 w-6 text-gray-600' />
+              </div>
+              <p class='text-3xl font-bold text-gray-900'>{studies().length}</p>
+              <p class='mt-1 text-sm font-medium text-gray-600'>Total Studies</p>
+            </div>
+            <div class='rounded-lg border border-amber-200 bg-amber-50 p-5 text-center'>
+              <div class='mb-2 flex justify-center'>
+                <BiRegularTimeFive class='h-6 w-6 text-amber-700' />
+              </div>
+              <p class='text-3xl font-bold text-amber-900'>{inProgressStudies()}</p>
+              <p class='mt-1 text-sm font-medium text-amber-700'>In Progress</p>
             </div>
-            <Show when={members().length > 0}>
-              <div class='divide-y divide-gray-200 rounded-lg bg-gray-50'>
-                <For each={members()}>
-                  {member => {
-                    const isSelf = currentUserId() === member.userId;
-                    const canRemove = isOwner() || isSelf;
-                    const isLastOwner =
-                      member.role === 'owner' &&
-                      members().filter(m => m.role === 'owner').length <= 1;
-
-                    return (
-                      <div class='flex items-center justify-between p-4'>
+            <div class='rounded-lg border border-green-200 bg-green-50 p-5 text-center'>
+              <div class='mb-2 flex justify-center'>
+                <CgArrowsExchange class='h-6 w-6 text-green-700' />
+              </div>
+              <p class='text-3xl font-bold text-green-900'>{readyToReconcile()}</p>
+              <p class='mt-1 text-sm font-medium text-green-700'>Ready to Reconcile</p>
+            </div>
+            <div class='rounded-lg border border-blue-200 bg-blue-50 p-5 text-center'>
+              <div class='mb-2 flex justify-center'>
+                <BiRegularCheckCircle class='h-6 w-6 text-blue-700' />
+              </div>
+              <p class='text-3xl font-bold text-blue-900'>{completedStudies()}</p>
+              <p class='mt-1 text-sm font-medium text-blue-700'>Completed</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Section 2: Team & Collaboration */}
+      <div class='mb-8 space-y-6'>
+        <h2 class='text-lg font-semibold text-gray-900'>Team & Collaboration</h2>
+
+        {/* Members Section - Full Width */}
+        <div class='rounded-lg border border-gray-200 bg-white p-6 shadow-sm'>
+          <div class='mb-4 flex items-center justify-between'>
+            <h3 class='text-base font-semibold text-gray-900'>Project Members</h3>
+            <Show when={isOwner()}>
+              <button
+                onClick={() => setShowAddMemberModal(true)}
+                class='inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-blue-700'
+              >
+                <FiPlus class='h-4 w-4' />
+                Add Member
+              </button>
+            </Show>
+          </div>
+          <Show when={members().length > 0}>
+            <div class='divide-y divide-gray-200 rounded-lg bg-gray-50'>
+              <For each={members()}>
+                {member => {
+                  const isSelf = currentUserId() === member.userId;
+                  const canRemove = isOwner() || isSelf;
+                  const isLastOwner =
+                    member.role === 'owner' &&
+                    members().filter(m => m.role === 'owner').length <= 1;
+
+                  const userProgress = () => getUserProgress(member.userId);
+
+                  return (
+                    <div class='p-4'>
+                      <div class='flex items-center justify-between'>
                         <div class='flex items-center gap-3'>
                           <Avatar
                             src={
@@ -191,19 +284,64 @@ export default function OverviewTab() {
                           </Show>
                         </div>
                       </div>
-                    );
-                  }}
-                </For>
-              </div>
-            </Show>
-          </div>
+                      <Show when={userProgress().total > 0}>
+                        <div class='mt-4'>
+                          <Progress
+                            value={userProgress().percentage}
+                            label={`${userProgress().completed} of ${userProgress().total} appraisals completed`}
+                            showValue={true}
+                            size='sm'
+                            variant={
+                              userProgress().percentage === 100 ? 'success'
+                              : userProgress().percentage >= 50 ?
+                                'default'
+                              : 'warning'
+                            }
+                          />
+                        </div>
+                      </Show>
+                    </div>
+                  );
+                }}
+              </For>
+            </div>
+          </Show>
         </div>
+
+        {/* Reviewer Assignment - Below Members, Collapsed by Default */}
+        <Show when={shouldShowReviewerAssignment()}>
+          <ReviewerAssignment
+            studies={studies}
+            members={members}
+            onAssignReviewers={handleUpdateStudy}
+          />
+        </Show>
       </div>
 
-      {/* Charts Section - Full width */}
-      <div>
-        <h3 class='mb-4 text-lg font-semibold text-gray-900'>Quality Assessment Figures</h3>
-        <ChartSection studies={studies} members={members} getChecklistData={getChecklistData} />
+      {/* Section 3: Quality Assessment - Collapsible */}
+      <div class='mb-8'>
+        <div class='overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm'>
+          <Collapsible
+            open={chartsExpanded()}
+            onOpenChange={({ open }) => setChartsExpanded(open)}
+            trigger={
+              <div class='flex w-full cursor-pointer items-center justify-between px-6 py-4 transition-colors select-none hover:bg-gray-50'>
+                <h2 class='text-lg font-semibold text-gray-900'>Quality Assessment</h2>
+                <div class='text-sm text-gray-500'>
+                  {chartsExpanded() ? 'Click to collapse' : 'Click to expand charts'}
+                </div>
+              </div>
+            }
+          >
+            <div class='border-t border-gray-200 px-6 py-6'>
+              <ChartSection
+                studies={studies}
+                members={members}
+                getChecklistData={getChecklistData}
+              />
+            </div>
+          </Collapsible>
+        </div>
       </div>
       <AddMemberModal
         isOpen={showAddMemberModal()}
diff --git a/packages/web/src/primitives/__tests__/useProject.test.js b/packages/web/src/primitives/__tests__/useProject.test.js
index 724927443..a9bcfaf51 100644
--- a/packages/web/src/primitives/__tests__/useProject.test.js
+++ b/packages/web/src/primitives/__tests__/useProject.test.js
@@ -264,45 +264,65 @@ describe('useProject - PDF Operations', () => {
   });
 
   it('should add PDF metadata to study', async () => {
-    createRoot(async dispose => {
-      cleanup = dispose;
-      const project = useProject('local-test');
+    await new Promise(resolveTest => {
+      createRoot(async dispose => {
+        cleanup = dispose;
+        const project = useProject('local-test');
 
-      const studyId = project.createStudy('Test Study');
-      projectStore.setProjectData.mockClear();
-
-      const pdfId = project.addPdfToStudy(studyId, {
-        fileName: 'test.pdf',
-        key: 'r2-storage-key',
-        size: 123456,
-        uploadedBy: 'user-1',
-        uploadedAt: Date.now(),
-      });
+        await new Promise(resolve => setTimeout(resolve, 10));
 
-      expect(pdfId).toBeTruthy();
-      expect(projectStore.setProjectData).toHaveBeenCalled();
+        const studyId = project.createStudy('Test Study');
+        projectStore.setProjectData.mockClear();
+
+        const pdfId = project.addPdfToStudy(studyId, {
+          fileName: 'test.pdf',
+          key: 'r2-storage-key',
+          size: 123456,
+          uploadedBy: 'user-1',
+          uploadedAt: Date.now(),
+        });
+
+        expect(pdfId).toBeTruthy();
+
+        // Wait for Y.js update event to trigger sync
+        await new Promise(resolve => setTimeout(resolve, 10));
+
+        expect(projectStore.setProjectData).toHaveBeenCalled();
+        resolveTest();
+      });
     });
   });
 
   it('should remove PDF metadata from study', async () => {
-    createRoot(async dispose => {
-      cleanup = dispose;
-      const project = useProject('local-test');
+    await new Promise(resolveTest => {
+      createRoot(async dispose => {
+        cleanup = dispose;
+        const project = useProject('local-test');
 
-      const studyId = project.createStudy('Test Study');
+        await new Promise(resolve => setTimeout(resolve, 10));
 
-      project.addPdfToStudy(studyId, {
-        fileName: 'test.pdf',
-        key: 'r2-key',
-        size: 12345,
-        uploadedBy: 'user-1',
-      });
+        const studyId = project.createStudy('Test Study');
 
-      projectStore.setProjectData.mockClear();
+        project.addPdfToStudy(studyId, {
+          fileName: 'test.pdf',
+          key: 'r2-key',
+          size: 12345,
+          uploadedBy: 'user-1',
+        });
 
-      project.removePdfFromStudy(studyId, 'test.pdf');
+        // Wait for initial add to sync
+        await new Promise(resolve => setTimeout(resolve, 10));
 
-      expect(projectStore.setProjectData).toHaveBeenCalled();
+        projectStore.setProjectData.mockClear();
+
+        project.removePdfFromStudy(studyId, 'test.pdf');
+
+        // Wait for Y.js update event to trigger sync
+        await new Promise(resolve => setTimeout(resolve, 10));
+
+        expect(projectStore.setProjectData).toHaveBeenCalled();
+        resolveTest();
+      });
     });
   });
 });
@@ -341,62 +361,80 @@ describe('useProject - Checklist Operations', () => {
   });
 
   it('should update checklist', async () => {
-    createRoot(async dispose => {
-      cleanup = dispose;
-      const project = useProject('local-test');
+    await new Promise(resolveTest => {
+      createRoot(async dispose => {
+        cleanup = dispose;
+        const project = useProject('local-test');
 
-      await new Promise(resolve => setTimeout(resolve, 10));
+        await new Promise(resolve => setTimeout(resolve, 10));
 
-      const studyId = project.createStudy('Test Study');
-      const checklistId = project.createChecklist(studyId);
+        const studyId = project.createStudy('Test Study');
+        const checklistId = project.createChecklist(studyId);
 
-      projectStore.setProjectData.mockClear();
+        projectStore.setProjectData.mockClear();
 
-      project.updateChecklist(studyId, checklistId, {
-        status: 'completed',
-        assignedTo: 'user-2',
-      });
+        project.updateChecklist(studyId, checklistId, {
+          status: 'completed',
+          assignedTo: 'user-2',
+        });
 
-      expect(projectStore.setProjectData).toHaveBeenCalled();
+        // Wait for Y.js update event to trigger sync
+        await new Promise(resolve => setTimeout(resolve, 10));
+
+        expect(projectStore.setProjectData).toHaveBeenCalled();
+        resolveTest();
+      });
     });
   });
 
   it('should delete checklist', async () => {
-    createRoot(async dispose => {
-      cleanup = dispose;
-      const project = useProject('local-test');
+    await new Promise(resolveTest => {
+      createRoot(async dispose => {
+        cleanup = dispose;
+        const project = useProject('local-test');
 
-      await new Promise(resolve => setTimeout(resolve, 10));
+        await new Promise(resolve => setTimeout(resolve, 10));
 
-      const studyId = project.createStudy('Test Study');
-      const checklistId = project.createChecklist(studyId);
+        const studyId = project.createStudy('Test Study');
+        const checklistId = project.createChecklist(studyId);
 
-      projectStore.setProjectData.mockClear();
+        projectStore.setProjectData.mockClear();
 
-      project.deleteChecklist(studyId, checklistId);
+        project.deleteChecklist(studyId, checklistId);
 
-      expect(projectStore.setProjectData).toHaveBeenCalled();
+        // Wait for Y.js update event to trigger sync
+        await new Promise(resolve => setTimeout(resolve, 10));
+
+        expect(projectStore.setProjectData).toHaveBeenCalled();
+        resolveTest();
+      });
     });
   });
 
   it('should update checklist answer', async () => {
-    createRoot(async dispose => {
-      cleanup = dispose;
-      const project = useProject('local-test');
+    await new Promise(resolveTest => {
+      createRoot(async dispose => {
+        cleanup = dispose;
+        const project = useProject('local-test');
 
-      await new Promise(resolve => setTimeout(resolve, 10));
+        await new Promise(resolve => setTimeout(resolve, 10));
 
-      const studyId = project.createStudy('Test Study');
-      const checklistId = project.createChecklist(studyId);
+        const studyId = project.createStudy('Test Study');
+        const checklistId = project.createChecklist(studyId);
 
-      projectStore.setProjectData.mockClear();
+        projectStore.setProjectData.mockClear();
 
-      project.updateChecklistAnswer(studyId, checklistId, 'q1', {
-        answers: [[true, false, false, false]],
-        critical: true,
-      });
+        project.updateChecklistAnswer(studyId, checklistId, 'q1', {
+          answers: [[true, false, false, false]],
+          critical: true,
+        });
 
-      expect(projectStore.setProjectData).toHaveBeenCalled();
+        // Wait for Y.js update event to trigger sync
+        await new Promise(resolve => setTimeout(resolve, 10));
+
+        expect(projectStore.setProjectData).toHaveBeenCalled();
+        resolveTest();
+      });
     });
   });
 
@@ -455,52 +493,64 @@ describe('useProject - Reconciliation Operations', () => {
   });
 
   it('should save reconciliation progress', async () => {
-    createRoot(async dispose => {
-      cleanup = dispose;
-      const project = useProject('local-test');
+    await new Promise(resolveTest => {
+      createRoot(async dispose => {
+        cleanup = dispose;
+        const project = useProject('local-test');
 
-      await new Promise(resolve => setTimeout(resolve, 10));
+        await new Promise(resolve => setTimeout(resolve, 10));
 
-      const studyId = project.createStudy('Test Study');
-      projectStore.setProjectData.mockClear();
+        const studyId = project.createStudy('Test Study');
+        projectStore.setProjectData.mockClear();
 
-      project.saveReconciliationProgress(studyId, {
-        checklist1Id: 'checklist-1',
-        checklist2Id: 'checklist-2',
-        currentPage: 2,
-        viewMode: 'questions',
-        finalAnswers: { q1: { selection: 'reviewer1' } },
-      });
+        project.saveReconciliationProgress(studyId, {
+          checklist1Id: 'checklist-1',
+          checklist2Id: 'checklist-2',
+          currentPage: 2,
+          viewMode: 'questions',
+          finalAnswers: { q1: { selection: 'reviewer1' } },
+        });
 
-      expect(projectStore.setProjectData).toHaveBeenCalled();
+        // Wait for Y.js update event to trigger sync
+        await new Promise(resolve => setTimeout(resolve, 10));
+
+        expect(projectStore.setProjectData).toHaveBeenCalled();
+        resolveTest();
+      });
     });
   });
 
   it('should get reconciliation progress', async () => {
-    createRoot(async dispose => {
-      cleanup = dispose;
-      const project = useProject('local-test');
+    await new Promise(resolveTest => {
+      createRoot(async dispose => {
+        cleanup = dispose;
+        const project = useProject('local-test');
 
-      await new Promise(resolve => setTimeout(resolve, 10));
+        await new Promise(resolve => setTimeout(resolve, 10));
 
-      const studyId = project.createStudy('Test Study');
+        const studyId = project.createStudy('Test Study');
 
-      project.saveReconciliationProgress(studyId, {
-        checklist1Id: 'checklist-1',
-        checklist2Id: 'checklist-2',
-        currentPage: 3,
-        viewMode: 'questions',
-        finalAnswers: { q1: 'answer' },
-      });
+        project.saveReconciliationProgress(studyId, {
+          checklist1Id: 'checklist-1',
+          checklist2Id: 'checklist-2',
+          currentPage: 3,
+          viewMode: 'questions',
+          finalAnswers: { q1: 'answer' },
+        });
 
-      const progress = project.getReconciliationProgress(studyId);
+        // Wait for Y.js update to complete
+        await new Promise(resolve => setTimeout(resolve, 10));
+
+        const progress = project.getReconciliationProgress(studyId);
 
-      expect(progress).toBeDefined();
-      expect(progress.checklist1Id).toBe('checklist-1');
-      expect(progress.checklist2Id).toBe('checklist-2');
-      expect(progress.currentPage).toBe(3);
-      expect(progress.viewMode).toBe('questions');
-      expect(progress.finalAnswers).toEqual({ q1: 'answer' });
+        expect(progress).toBeDefined();
+        expect(progress.checklist1Id).toBe('checklist-1');
+        expect(progress.checklist2Id).toBe('checklist-2');
+        expect(progress.currentPage).toBe(3);
+        expect(progress.viewMode).toBe('questions');
+        // Note: finalAnswers are stored in the reconciled checklist, not in progress
+        resolveTest();
+      });
     });
   });
 
@@ -558,20 +608,26 @@ describe('useProject - Project Settings', () => {
   });
 
   it('should update project settings', async () => {
-    createRoot(async dispose => {
-      cleanup = dispose;
-      const project = useProject('local-test');
+    await new Promise(resolveTest => {
+      createRoot(async dispose => {
+        cleanup = dispose;
+        const project = useProject('local-test');
 
-      await new Promise(resolve => setTimeout(resolve, 10));
+        await new Promise(resolve => setTimeout(resolve, 10));
 
-      projectStore.setProjectData.mockClear();
+        projectStore.setProjectData.mockClear();
 
-      project.updateProjectSettings({
-        namingConvention: 'lastNameYear',
-        defaultChecklistType: 'AMSTAR2',
-      });
+        project.updateProjectSettings({
+          namingConvention: 'lastNameYear',
+          defaultChecklistType: 'AMSTAR2',
+        });
 
-      expect(projectStore.setProjectData).toHaveBeenCalled();
+        // Wait for Y.js update event to trigger sync
+        await new Promise(resolve => setTimeout(resolve, 10));
+
+        expect(projectStore.setProjectData).toHaveBeenCalled();
+        resolveTest();
+      });
     });
   });
 });
diff --git a/packages/web/src/primitives/useProject/checklists.js b/packages/web/src/primitives/useProject/checklists.js
index ab1a101db..c4b3d1adb 100644
--- a/packages/web/src/primitives/useProject/checklists.js
+++ b/packages/web/src/primitives/useProject/checklists.js
@@ -13,7 +13,7 @@ import { CHECKLIST_STATUS } from '@/constants/checklist-status.js';
  * @param {Function} isSynced - Function that returns sync status
  * @returns {Object} Checklist operations
  */
-export function createChecklistOperations(projectId, getYDoc, isSynced) {
+export function createChecklistOperations(projectId, getYDoc, _isSynced) {
   /**
    * Create a checklist in a study
    * @param {string} studyId - The study ID
diff --git a/packages/web/src/primitives/useProject/pdfs.js b/packages/web/src/primitives/useProject/pdfs.js
index f6eab7110..8c0f2c6a1 100644
--- a/packages/web/src/primitives/useProject/pdfs.js
+++ b/packages/web/src/primitives/useProject/pdfs.js
@@ -16,7 +16,7 @@ import * as Y from 'yjs';
  * @param {Function} isSynced - Function that returns sync status
  * @returns {Object} PDF operations
  */
-export function createPdfOperations(projectId, getYDoc, isSynced) {
+export function createPdfOperations(projectId, getYDoc, _isSynced) {
   /**
    * Get the pdfs Y.Map for a study, creating it if needed
    * @private
diff --git a/packages/web/src/primitives/useProject/reconciliation.js b/packages/web/src/primitives/useProject/reconciliation.js
index 47935b271..7e4be39d7 100644
--- a/packages/web/src/primitives/useProject/reconciliation.js
+++ b/packages/web/src/primitives/useProject/reconciliation.js
@@ -15,7 +15,7 @@ import * as Y from 'yjs';
  * @param {Function} isSynced - Function that returns sync status
  * @returns {Object} Reconciliation operations
  */
-export function createReconciliationOperations(projectId, getYDoc, isSynced) {
+export function createReconciliationOperations(projectId, getYDoc, _isSynced) {
   /**
    * Save reconciliation progress for a study
    * Stores only metadata references - finalAnswers are in the reconciled checklist
@@ -43,6 +43,12 @@ export function createReconciliationOperations(projectId, getYDoc, isSynced) {
     if (progressData.reconciledChecklistId) {
       reconciliationMap.set('reconciledChecklistId', progressData.reconciledChecklistId);
     }
+    if (progressData.currentPage !== undefined) {
+      reconciliationMap.set('currentPage', progressData.currentPage);
+    }
+    if (progressData.viewMode !== undefined) {
+      reconciliationMap.set('viewMode', progressData.viewMode);
+    }
     reconciliationMap.set('updatedAt', Date.now());
 
     studyYMap.set('updatedAt', Date.now());
@@ -72,6 +78,8 @@ export function createReconciliationOperations(projectId, getYDoc, isSynced) {
       checklist1Id,
       checklist2Id,
       reconciledChecklistId: reconciliationMap.get('reconciledChecklistId') || null,
+      currentPage: reconciliationMap.get('currentPage'),
+      viewMode: reconciliationMap.get('viewMode'),
       updatedAt: reconciliationMap.get('updatedAt'),
     };
   }