From a385991fbca54b93823d92d0042d6ad20402f889 Mon Sep 17 00:00:00 2001
From: Jacob Maynard <jacobamaynard@proton.me>
Date: Sun, 18 Jan 2026 15:12:23 -0600
Subject: [PATCH 1/6] improve project view

---
 .mcp/memory.db-shm                            | Bin 32768 -> 32768 bytes
 .../src/components/project/ProjectContext.jsx |   7 +
 .../src/components/project/ProjectHeader.jsx  | 134 ++++----
 .../src/components/project/ProjectView.jsx    | 131 ++++----
 .../project/all-studies-tab/AllStudiesTab.jsx |   4 +-
 .../all-studies-tab/study-card/StudyCard.jsx  |   6 +-
 .../study-card/StudyCardHeader.jsx            |  89 ++++-
 .../project/overview-tab/OverviewTab.jsx      | 306 ++++++++----------
 8 files changed, 352 insertions(+), 325 deletions(-)

diff --git a/.mcp/memory.db-shm b/.mcp/memory.db-shm
index fe9ac2845eca6fe6da8a63cd096d9cf9e24ece10..5a0bc9ff479a5ed9b29c65884dfea882295d897b 100644
GIT binary patch
literal 32768
zcmeHQWzbet7rlFLQaYtWLO{ACrAtb>ln|sF1Zj{4X_W5nkTy{i6hs9~3<LoSYz0L9
z)_FPa=rH$kw=>U~@6SCmi}!h1YxZ8xx|bjPxa(#*U&M<)<aw!I5YH2Q*xRDx>^x%{
zCHZS@`}a<sK9hdbcM~T(QuM8fnf{|bezuwW_rK1+|K5DYN-qJB5J&_h29f|tfxCcY
zz@0S7!KVn(qy(P|NDZX1TEBgUOADm4njl~4!Dj$6TAkl4!`%&JvYMb-nZaiPvRa+r
zEW>33vRh5itQ_ET0=cZtZ<gV51NT@>(5yV*^8)#-&Tp3C@&or;P0*|Y;0pqUtj=$i
z;qC(phiJ@QThwZT_7wwP94KLRe)|kp5-1g-DGk1i)dcM;3;uqfoYnd5GhBI~g4G1g
zstCRkP}%DIW*P1Qpo-N5&8iB%8c^Np{AL-h22e9ZQww};s|ngy2Yg+ip4Iv7Gu(qf
zeX9wY)c|}$ppn)2%`#kL;32CCn$-k+Q=pmE`OPw1bD)LQ1kGv*z7^2g>ilLIt_{%E
zYJz691OG7aNQkaI_zpnF5M3wmj{==TbX~wd26PS4bpziW=n<mp3BDK5J4Dw9d|#lS
z)%j&-xc<NZs|m_(AoxMRV5{?+Ww^(IAt9Qf;GeLXpnb!@4+lnAo!>sgjRZznP0*~-
z;Ku-Ct<G<j;l=?^hG@ovpI|jX`zC^)1WdL%zkP<A0!+1<pjp$vPY0f|I=@+ln*q$U
znxI*;z|RKeSe@T2!_5WeSxwNa`QV=hp0PT=S%zBxEDX^s0>9X5g7z%|zZ6(zb$<H{
zw;WgzqFD)kmDL38TMd2<u-5AQ_8D#+u-<BdW^Dk!5!hsPezOd>8Q5YqL9@1k-v(^A
zI=@+l+X3vfnxI*`!0!g0wK~69hT8+|4bkiazu#(t_8kC!5IAIYe)|mf9PoUI<^}LC
zT20Wtm%zUa9JV^YeTI7lcr`?G1pI4O6SVJj@JE4TR_C|RaBl!_T20Wb<KRyKZ&{t+
zEW@1y-VV{c1O8pB3EFoG{Au8f)%oo++<U<LA({`se`qy9`#u8yF>u!E{Pr2{6X4Sj
z&1c|0x0;}R=fHmfoVPl^eTKULd>Nv-2>z1Q1ns*F{wv^XtMl7uxNm@OLp0xkzhX5(
z`>ulj9{9oP{Pr2{N8qOr&ClR}0e%I3vs$w^5s(;20we{D?swoCa2+7vc8!^1xEsJ9
zfYAiax(V)2;IBLA%)Gw=Gl&fE(Ql{W7%>0Gj!u+7lt7d~lt7d~lt7d~lt7d~lt7d~
zlt7d~lt7d~lt7d~lt7d~lt7d~lt7d~lt7d~lt7d~lt7d~lt7d~lt7d~lt7d~lt7d~
zlt7d~lt7d~lt7d~lt7d~lt7d~Y!euyeqtf5#CG$oX%o~#GjKM}#~S$_dCq~?BI=}G
z<k$G5%Bkkt#A}MjJ%t|s+ns(MQ#<YJAScf=Ph08EfS9Lb_7b`!(s?=1Tu=f}<k!TL
z=B>PrUQawxJPJ?B&hi#{tMTOHUOdrv3{R?^#S>Up%#%fQ7p0@@l%I-Id8$DTsTFmi
zUNo2<r!h2z=F$>cOWSEb9i}(wG<`~!=m)w^!pS)!=i~xhk}GmeZp5v)6Zho7Jc=jt
zY+l4`cq{Mam-raJ%V+sZzRJI|CwECYndoJaY?5D!Nja%5^`*JAmu}KuhRb-FDGOzl
zY>~Zj*C@L>spp+s)1vBo>UFhK-92(kRZcB_L+!MmlcYYzlYizpyYMs6NmAi^;}s*-
zNo94C)Qor|p+9q|lQNAou|LJAtTL;kYN!9jWqGyuU8PUY8|oyf^J=Gqc({|Sv<610
zlgi^HshL`%UjF}UPH4YTC-t@yr`6O+ol-k}!pSwgpmsXKNm7hPt@K_2uOgatI-xyf
zwzt)L$vfp;#na2_>0YWpHK`G`rbnqa4WZFAk*3l*IzVUWGTopQT###VYwpFPc`@(f
zQ+$z0vP)hmFD+z%%#zizHAcCawhrC7*GW>k-9}YTeNVmP#A$W4)sNLqhsju(8lx-u
zk3G{YpgSX-Bqd&QG`HnM8(B%TY}G=0RBJRQ^+HR~Xtd+ZLF>yJw3+PlUPdRzX>>hY
zM2EpOJhz{WGEfdGKqaUm)uP7KhB{Lp8cJhn5>2Cdw3OD<4mwD$&~bW?KBKSbNBV;j
za7w<Lb8#Uq#g(`=H|93{DEH>ac??hCIlP3|@;2VjFY_CGnm^%7{5@Y|mSmD%7I--%
zpWG{jrMQ%l3Q|KFNK5G;-DRMRkO}{~GR2%ErMpT-RaJdYedxq#jkrEBjo-6sr{n&W
zuV%7NV|p`mXM&TY5}+wDqn8Uke5KGYR~x-)ZO|3g8~s>g(ET*mTY`3>?P$$8j5e4v
zXgRrr_KxdltVm87DJK=Al2nOm(?isjx=>$wg2vHgnojd+8Ev4QbckN16ZAfPPG8ec
zbdwTtD$c~Y`93bqmAMW-#BI4V_u(NtmZ$PuUdrouJ0IY~{3f5_Px&(cz}HzMxnz)q
z=uFz^<&*+aL`q0SsVNPmm2{LIGDt?sM42s%WQ}Z-eNx;>Qo5^TRMph?)JIO7)>m8o
zgf1w(KI!D{H%%$JGto&>3B8nP<jjqh$<k;~tm8F7KVKKGk2lmCi`KJwX!BZ!mZ}42
zUpkIfq0hX_=%%^hC7={^H|3&2REjE79cn`D=rQU?!{|wRie}N%w4655E_#lR&|CBY
zouhB)XZn*8aca)Y_i$k@!w+y>Zo=)j3-{%rJdUUFJYL4@c?TclSNJ%;$Di?6{3GAs
z1d>8B%1SSn6qKS;QYuL;X(X+slk}9qGD;@N99b-DWxMQ;yGA9r99MIamhMVbSKd+R
zR^l%l_-vrF3DuWsr_*G<Y>4^40MlKhJCk?@KNIt;5}^S%6Ix#jqs_DmS~{D0?a%?)
z7rlq$ylLKi^w_OOKifg{j-5cC*5~Mo`U(9=2`MFIqTF;Jm8J)%E;XfxsVnuT;WVCR
z&}@2!R?sHeP0!P7bdo-#FX&tPh5n+%oQAV-9xlRVxeC|gru;BJ#{KvSev+s2d|u8Q
zcqbp?SNR0L&!6+x{1gAd2_>c6EvvlTQb<ZkS*a|wrLnY;N2QlME~90#%#|gwPIkzF
zxa(6s<|*l}P`v6v^*wdoiPPrsMnZpHR6Ct6%Vd`vit+vbTU?J;s7(lFI!P)qx}P(9
zdAuTCS+6SkX`7*UwJUl^hoN6{I(j3QdmFr6=m9)}e!CC6b7)EX*}Lf_qEwWb?xDg|
zhN@6KYDSMxHyS`AXadcoIkbQl(n?xIo9S74fnKM#=_5K%-_fu1Hznb;oR#x(QNEw6
z@`K!rAK|XtpNH{yeu|&w6}*vm@pF8H-{KGW9Dl<<^G!}9o4iz#N$!#Rq_o^G4@ez(
zNZLwg=`BNKj7*VvvQ*Z~PB|zQoFt{WMz=Ke)%Vl|Cr(?atzJ<(eJaNH{Vj{8KTdaM
zIZ4X&<LS;Kby8KFBxM>$b*H+Mq;$KDs)0JGZ=E=88P^)E@q1P6bcT~_8rP1fG3qUF
zl9XwN)SboZq^dee%5>lAP7NnX>2@1cb9GYRIdR%vZS{NlP3iS%C)YHwaywe7og|e;
zoz!Zz(`r&zn#4RU)9kD}^_?W8+ig@W)Ja|8U--|MyX~O1`n%fcGcmuO#$*!p{*^IL
z$?Q*S{!pDYYNz#_B(*25Wn5#mfs>>(n{R1as+0QFiPLUstJl;{7szr4S2Zc6RytVa
zB&jUwq_!x1;@vF{a=O*7uQS__n>)!$x83vFtCRZ8iO=p@qo^C#N>@0!rfJkkt>#U<
zTkTf+t+Hx`-d45KrcRPF?~c%&7BNprw>MtZL7miJPMr3LdpA(Ln>+m^_5PJku4!6z
zQk&II@AQ3d=d#`Y7lFTTqdiKm&736lTA;JriIz^1x_wLV?;Vvn;f)YZoDK-Kb{oT-
zROw)&lWUqqozxbk&)dFW$gkPs-dz|Xilg_cowjq5)ax3Pahmo{l2Whtx~r2)>?Emy
zYO8mtliK9OX;yVo&#IlOzdVHb)Z%?=rw=<x>S)~iqBM3pI7v#g`Ie@KI;kX1k{YhI
znoOP4W+zUwQ66Phd(=+VUmn8zYVnIopLj#3bdf$WPs_X~O?NtSHz!%?wtHSrby7(s
zwPcQYQX{lRy>#lFcE{YMF_~AL)bnbm>MsvrQMLFbwbRF(BxT+Ls5{-AB&FMJR0GvX
zrE!wfNN;@H`&Pppr&lNStP`jC)JeUdb{hVz|4|hC=VQpHm+2_IqjKBTNmAy0l)BTy
HNmBm<5!Ix4

delta 96
zcmZo@U}|V!;*ofy%K!tDKZePOSg=d5nNGgVi7uf4lYpuIj|Mh3@~<@5Jb`}}h;Wqy
E0RNmKZU6uP

diff --git a/packages/web/src/components/project/ProjectContext.jsx b/packages/web/src/components/project/ProjectContext.jsx
index d9fea9dae..319ed0bb2 100644
--- a/packages/web/src/components/project/ProjectContext.jsx
+++ b/packages/web/src/components/project/ProjectContext.jsx
@@ -7,6 +7,7 @@
  * - userRole: The current user's role in the project
  * - isOwner: Whether the current user is the project owner
  * - getAssigneeName: Helper to get a member's display name
+ * - getMember: Helper to get full member object (for avatar display)
  * - getChecklistPath: Helper to build project-scoped checklist path
  * - getReconcilePath: Helper to build project-scoped reconciliation path
  * - projectOps: Y.js operations for child routes (checklist, reconciliation)
@@ -45,6 +46,11 @@ export function ProjectProvider(props) {
     return member?.displayName || member?.name || member?.email || 'Unknown';
   };
 
+  const getMember = userId => {
+    if (!userId) return null;
+    return members().find(m => m.userId === userId) || null;
+  };
+
   // Path builders for project-scoped routes
   const getChecklistPath = (studyId, checklistId, tab = 'overview') => {
     return `/projects/${props.projectId}/studies/${studyId}/checklists/${checklistId}?tab=${tab}`;
@@ -62,6 +68,7 @@ export function ProjectProvider(props) {
     userRole,
     isOwner,
     getAssigneeName,
+    getMember,
     getChecklistPath,
     getReconcilePath,
     // Y.js operations passed from ProjectView for child routes
diff --git a/packages/web/src/components/project/ProjectHeader.jsx b/packages/web/src/components/project/ProjectHeader.jsx
index 16f028dfa..e9497694f 100644
--- a/packages/web/src/components/project/ProjectHeader.jsx
+++ b/packages/web/src/components/project/ProjectHeader.jsx
@@ -1,5 +1,5 @@
 import { Show, createMemo, createSignal } from 'solid-js';
-import { FiChevronLeft, FiEdit2, FiCheck, FiX } from 'solid-icons/fi';
+import { FiArrowLeft, FiEdit2, FiCheck, FiX } from 'solid-icons/fi';
 import { useProjectContext } from './ProjectContext.jsx';
 import { SimpleEditable } from '@/components/ui/editable';
 import { handleError } from '@/lib/error-utils.js';
@@ -63,81 +63,79 @@ export default function ProjectHeader(props) {
   };
 
   return (
-    <div class='mb-6'>
-      <div class='mb-2 flex items-center gap-4'>
+    <div class='flex items-center justify-between py-4'>
+      <div class='flex items-center gap-4'>
         <button
           onClick={() => props.onBack()}
-          class='text-gray-400 transition-colors hover:text-gray-700'
+          class='flex h-9 w-9 items-center justify-center rounded-lg border border-slate-200 text-slate-500 transition-colors hover:border-slate-300 hover:text-slate-700'
         >
-          <FiChevronLeft class='h-6 w-6' />
+          <FiArrowLeft class='h-4 w-4' />
         </button>
-        <div class='flex min-w-0 flex-1 items-center gap-2'>
-          <SimpleEditable
-            activationMode='click'
-            value={name()}
-            onSubmit={handleNameChange}
-            showEditIcon={canEdit()}
-            readOnly={!canEdit()}
-            class='-ml-2 text-2xl font-bold text-gray-900'
-          />
-        </div>
-        <Show when={userRole()}>
-          <span class='inline-flex items-center rounded-full bg-blue-100 px-2 py-1 text-xs font-medium text-blue-800 capitalize'>
-            {userRole()}
-          </span>
-        </Show>
-      </div>
-
-      {/* Description section */}
-      <div class='ml-10'>
-        <Show
-          when={isEditingDescription()}
-          fallback={
-            <div class='group flex items-start gap-2'>
-              <p class='flex-1 text-gray-500'>
-                {description() || <span class='text-gray-400 italic'>No description</span>}
-              </p>
-              <Show when={canEdit()}>
+        <div class='min-w-0'>
+          <div class='flex items-center gap-2'>
+            <SimpleEditable
+              activationMode='click'
+              value={name()}
+              onSubmit={handleNameChange}
+              showEditIcon={canEdit()}
+              readOnly={!canEdit()}
+              class='text-lg font-semibold text-slate-900'
+            />
+            <Show when={userRole()}>
+              <span class='inline-flex items-center rounded-md border border-blue-200 bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700 capitalize'>
+                {userRole()}
+              </span>
+            </Show>
+          </div>
+          <Show
+            when={isEditingDescription()}
+            fallback={
+              <div class='group flex items-center gap-2'>
+                <p class='text-sm text-slate-500'>
+                  {description() || <span class='text-slate-400 italic'>No description</span>}
+                </p>
+                <Show when={canEdit()}>
+                  <button
+                    onClick={startEditingDescription}
+                    class='text-slate-400 opacity-0 transition-opacity group-hover:opacity-100 hover:text-slate-600'
+                    title='Edit description'
+                  >
+                    <FiEdit2 class='h-3.5 w-3.5' />
+                  </button>
+                </Show>
+              </div>
+            }
+          >
+            <div class='mt-2 flex flex-col gap-2'>
+              <textarea
+                value={descriptionDraft()}
+                onInput={e => setDescriptionDraft(e.target.value)}
+                class='w-full max-w-lg resize-none rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-700 transition-colors outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 disabled:cursor-not-allowed disabled:bg-slate-100'
+                rows={2}
+                placeholder='Add a project description...'
+                disabled={isSaving()}
+              />
+              <div class='flex gap-2'>
                 <button
-                  onClick={startEditingDescription}
-                  class='text-gray-400 opacity-0 transition-opacity group-hover:opacity-100 hover:text-gray-600'
-                  title='Edit description'
+                  onClick={saveDescription}
+                  disabled={isSaving()}
+                  class='inline-flex items-center gap-1 rounded-lg bg-blue-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50'
                 >
-                  <FiEdit2 class='h-4 w-4' />
+                  <FiCheck class='h-4 w-4' />
+                  {isSaving() ? 'Saving...' : 'Save'}
                 </button>
-              </Show>
-            </div>
-          }
-        >
-          <div class='flex flex-col gap-2'>
-            <textarea
-              value={descriptionDraft()}
-              onInput={e => setDescriptionDraft(e.target.value)}
-              class='w-full resize-none rounded-md border border-gray-300 px-3 py-2 text-gray-700 focus:ring-2 focus:ring-blue-500 focus:outline-none disabled:cursor-not-allowed disabled:bg-gray-100'
-              rows={3}
-              placeholder='Add a project description...'
-              disabled={isSaving()}
-            />
-            <div class='flex gap-2'>
-              <button
-                onClick={saveDescription}
-                disabled={isSaving()}
-                class='inline-flex items-center gap-1 rounded-md bg-blue-600 px-3 py-1 text-sm text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50'
-              >
-                <FiCheck class='h-4 w-4' />
-                {isSaving() ? 'Saving...' : 'Save'}
-              </button>
-              <button
-                onClick={cancelEditingDescription}
-                disabled={isSaving()}
-                class='inline-flex items-center gap-1 rounded-md bg-gray-200 px-3 py-1 text-sm text-gray-700 hover:bg-gray-300 disabled:cursor-not-allowed disabled:opacity-50'
-              >
-                <FiX class='h-4 w-4' />
-                Cancel
-              </button>
+                <button
+                  onClick={cancelEditingDescription}
+                  disabled={isSaving()}
+                  class='inline-flex items-center gap-1 rounded-lg bg-slate-100 px-3 py-1.5 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-200 disabled:cursor-not-allowed disabled:opacity-50'
+                >
+                  <FiX class='h-4 w-4' />
+                  Cancel
+                </button>
+              </div>
             </div>
-          </div>
-        </Show>
+          </Show>
+        </div>
       </div>
     </div>
   );
diff --git a/packages/web/src/components/project/ProjectView.jsx b/packages/web/src/components/project/ProjectView.jsx
index 79de3cdf1..25567e7f7 100644
--- a/packages/web/src/components/project/ProjectView.jsx
+++ b/packages/web/src/components/project/ProjectView.jsx
@@ -288,74 +288,71 @@ export default function ProjectView(props) {
 
       {/* Main project view with tabs */}
       <Show when={!isChildRoute()}>
-        <div class='mx-auto max-w-7xl p-6 pt-4'>
-          <ProjectHeader
-            name={() => meta()?.name}
-            description={() => meta()?.description}
-            onRename={newName => projectActionsStore.project.rename(newName)}
-            onUpdateDescription={desc => projectActionsStore.project.updateDescription(desc)}
-            onBack={() => navigate(backPath())}
-          />
-
+        <div class='min-h-screen bg-slate-50'>
           <Tabs value={tabFromUrl()} onValueChange={handleTabChange}>
-            <TabsList class='overflow-x-auto rounded-t-lg border border-gray-200 bg-white'>
-              <For each={tabDefinitions}>
-                {tab => (
-                  <TabsTrigger
-                    value={tab.value}
-                    class='gap-2 border-b-2 border-transparent text-gray-600 hover:bg-gray-50 hover:text-gray-900 data-[selected]:border-blue-600 data-[selected]:text-gray-900'
-                  >
-                    {tab.icon}
-                    {tab.label}
-                    <Show when={tab.getCount}>
-                      <span class='ml-1 rounded-full bg-gray-100 px-2 py-0.5 text-xs text-gray-600'>
-                        {tab.getCount()}
-                      </span>
-                    </Show>
-                  </TabsTrigger>
-                )}
-              </For>
-            </TabsList>
-            <TabsContent
-              value='overview'
-              class='rounded-b-lg border border-t-0 border-gray-200 bg-white p-6'
-            >
-              <SectionErrorBoundary name='Overview'>
-                <OverviewTab />
-              </SectionErrorBoundary>
-            </TabsContent>
-            <TabsContent
-              value='all-studies'
-              class='rounded-b-lg border border-t-0 border-gray-200 bg-white p-6'
-            >
-              <SectionErrorBoundary name='All Studies'>
-                <AllStudiesTab />
-              </SectionErrorBoundary>
-            </TabsContent>
-            <TabsContent
-              value='todo'
-              class='rounded-b-lg border border-t-0 border-gray-200 bg-white p-6'
-            >
-              <SectionErrorBoundary name='To-Do'>
-                <ToDoTab />
-              </SectionErrorBoundary>
-            </TabsContent>
-            <TabsContent
-              value='reconcile'
-              class='rounded-b-lg border border-t-0 border-gray-200 bg-white p-6'
-            >
-              <SectionErrorBoundary name='Reconcile'>
-                <ReconcileTab />
-              </SectionErrorBoundary>
-            </TabsContent>
-            <TabsContent
-              value='completed'
-              class='rounded-b-lg border border-t-0 border-gray-200 bg-white p-6'
-            >
-              <SectionErrorBoundary name='Completed'>
-                <CompletedTab />
-              </SectionErrorBoundary>
-            </TabsContent>
+            {/* Sticky header */}
+            <header class='sticky top-0 z-20 border-b border-slate-200 bg-white'>
+              <div class='mx-auto max-w-7xl px-6'>
+                <ProjectHeader
+                  name={() => meta()?.name}
+                  description={() => meta()?.description}
+                  onRename={newName => projectActionsStore.project.rename(newName)}
+                  onUpdateDescription={desc => projectActionsStore.project.updateDescription(desc)}
+                  onBack={() => navigate(backPath())}
+                />
+              </div>
+
+              {/* Tabs navigation */}
+              <div class='mx-auto max-w-7xl px-6'>
+                <TabsList class='-mb-px flex gap-1 overflow-x-auto'>
+                  <For each={tabDefinitions}>
+                    {tab => (
+                      <TabsTrigger
+                        value={tab.value}
+                        class='gap-2 border-b-2 border-transparent text-slate-500 transition-colors hover:text-slate-700 data-[selected]:border-blue-600 data-[selected]:text-blue-700'
+                      >
+                        {tab.icon}
+                        {tab.label}
+                        <Show when={tab.getCount}>
+                          <span class='rounded-full bg-slate-100 px-2 py-0.5 text-xs text-slate-500 data-[selected]:bg-blue-100 data-[selected]:text-blue-700'>
+                            {tab.getCount()}
+                          </span>
+                        </Show>
+                      </TabsTrigger>
+                    )}
+                  </For>
+                </TabsList>
+              </div>
+            </header>
+
+            {/* Main content area */}
+            <main class='mx-auto max-w-7xl px-6 py-6'>
+              <TabsContent value='overview' class='mt-0'>
+                <SectionErrorBoundary name='Overview'>
+                  <OverviewTab />
+                </SectionErrorBoundary>
+              </TabsContent>
+              <TabsContent value='all-studies' class='mt-0'>
+                <SectionErrorBoundary name='All Studies'>
+                  <AllStudiesTab />
+                </SectionErrorBoundary>
+              </TabsContent>
+              <TabsContent value='todo' class='mt-0'>
+                <SectionErrorBoundary name='To-Do'>
+                  <ToDoTab />
+                </SectionErrorBoundary>
+              </TabsContent>
+              <TabsContent value='reconcile' class='mt-0'>
+                <SectionErrorBoundary name='Reconcile'>
+                  <ReconcileTab />
+                </SectionErrorBoundary>
+              </TabsContent>
+              <TabsContent value='completed' class='mt-0'>
+                <SectionErrorBoundary name='Completed'>
+                  <CompletedTab />
+                </SectionErrorBoundary>
+              </TabsContent>
+            </main>
           </Tabs>
         </div>
 
diff --git a/packages/web/src/components/project/all-studies-tab/AllStudiesTab.jsx b/packages/web/src/components/project/all-studies-tab/AllStudiesTab.jsx
index 859e41620..b56d08bae 100644
--- a/packages/web/src/components/project/all-studies-tab/AllStudiesTab.jsx
+++ b/packages/web/src/components/project/all-studies-tab/AllStudiesTab.jsx
@@ -22,7 +22,7 @@ import {
 } from '@lib/formStatePersistence.js';
 
 export default function AllStudiesTab() {
-  const { projectId, getAssigneeName } = useProjectContext();
+  const { projectId, getMember } = useProjectContext();
 
   // Local UI state
   const [showGoogleDriveModal, setShowGoogleDriveModal] = createSignal(false);
@@ -161,7 +161,7 @@ export default function AllStudiesTab() {
                 study={study}
                 expanded={isStudyExpanded(study.id)}
                 onToggleExpanded={() => toggleStudyExpanded(study.id)}
-                getAssigneeName={getAssigneeName}
+                getMember={getMember}
                 onAssignReviewers={handleOpenReviewersModal}
                 onOpenGoogleDrive={handleOpenGoogleDrive}
               />
diff --git a/packages/web/src/components/project/all-studies-tab/study-card/StudyCard.jsx b/packages/web/src/components/project/all-studies-tab/study-card/StudyCard.jsx
index 2304a4207..9f19d52b4 100644
--- a/packages/web/src/components/project/all-studies-tab/study-card/StudyCard.jsx
+++ b/packages/web/src/components/project/all-studies-tab/study-card/StudyCard.jsx
@@ -17,20 +17,20 @@ export default function StudyCard(props) {
   // props.study: Study object
   // props.expanded: boolean - controlled expanded state
   // props.onToggleExpanded: () => void - toggle callback
-  // props.getAssigneeName: (userId) => string
+  // props.getMember: (userId) => member object (for avatar display)
   // props.onAssignReviewers: (study) => void - opens modal (needs parent state)
   // props.onOpenGoogleDrive: (studyId) => void - opens picker (needs parent state)
   // props.readOnly: boolean
 
   return (
-    <div class='rounded-lg border border-gray-200 bg-white shadow-sm transition-colors hover:border-gray-300'>
+    <div class='rounded-lg border border-slate-200 bg-white transition-colors hover:border-slate-300'>
       <Collapsible open={props.expanded}>
         <StudyCardHeader
           study={props.study}
           expanded={props.expanded}
           onToggle={() => props.onToggleExpanded?.()}
           onAssignReviewers={() => props.onAssignReviewers?.(props.study)}
-          getAssigneeName={props.getAssigneeName}
+          getMember={props.getMember}
         />
         <CollapsibleContent>
           <div class='border-t border-gray-100'>
diff --git a/packages/web/src/components/project/all-studies-tab/study-card/StudyCardHeader.jsx b/packages/web/src/components/project/all-studies-tab/study-card/StudyCardHeader.jsx
index c4cb2e386..7bf8b22aa 100644
--- a/packages/web/src/components/project/all-studies-tab/study-card/StudyCardHeader.jsx
+++ b/packages/web/src/components/project/all-studies-tab/study-card/StudyCardHeader.jsx
@@ -5,7 +5,7 @@
  * - Expand/collapse toggle (chevron)
  * - Study name (editable)
  * - Citation info (author, year, journal from primary PDF)
- * - Reviewer badges
+ * - Reviewer avatars with hover tooltips
  * - Actions menu
  *
  * Clicking anywhere on the header (except interactive elements) toggles expand/collapse.
@@ -24,14 +24,36 @@ import {
   MenuItem,
   MenuSeparator,
 } from '@/components/ui/menu';
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipPositioner,
+  TooltipContent,
+} from '@/components/ui/tooltip';
+import { Avatar, AvatarImage, AvatarFallback, getInitials } from '@/components/ui/avatar';
 import projectActionsStore from '@/stores/projectActionsStore';
+import { API_BASE } from '@config/api.js';
+
+// Avatar color palette for reviewer identification
+const AVATAR_COLORS = [
+  { bg: 'bg-blue-100', text: 'text-blue-700' },
+  { bg: 'bg-emerald-100', text: 'text-emerald-700' },
+  { bg: 'bg-amber-100', text: 'text-amber-700' },
+  { bg: 'bg-pink-100', text: 'text-pink-700' },
+  { bg: 'bg-indigo-100', text: 'text-indigo-700' },
+];
+
+const getAvatarColorClasses = name => {
+  const index = name ? name.charCodeAt(0) % AVATAR_COLORS.length : 0;
+  return AVATAR_COLORS[index];
+};
 
 export default function StudyCardHeader(props) {
   // props.study: Study object with pdfs array
   // props.expanded: boolean
   // props.onToggle: () => void
   // props.onAssignReviewers: () => void - needs to open modal at parent level
-  // props.getAssigneeName: (userId) => string
+  // props.getMember: (userId) => member object (for avatar display)
 
   const study = () => props.study;
 
@@ -41,14 +63,33 @@ export default function StudyCardHeader(props) {
     return pdfs.find(p => p.tag === 'primary') || pdfs[0];
   };
 
-  // Get assigned reviewers
+  // Get assigned reviewers as full member objects for avatar display
   const assignedReviewers = () => {
     const reviewers = [];
-    if (study().reviewer1) reviewers.push(props.getAssigneeName(study().reviewer1));
-    if (study().reviewer2) reviewers.push(props.getAssigneeName(study().reviewer2));
+    if (study().reviewer1) {
+      const member = props.getMember?.(study().reviewer1);
+      // Use member if found, otherwise create minimal fallback object
+      reviewers.push(member || { userId: study().reviewer1 });
+    }
+    if (study().reviewer2) {
+      const member = props.getMember?.(study().reviewer2);
+      reviewers.push(member || { userId: study().reviewer2 });
+    }
     return reviewers;
   };
 
+  // Get member display name
+  const getMemberDisplayName = member =>
+    member?.displayName || member?.name || member?.email || 'Unknown';
+
+  // Get avatar image source (matching OverviewTab pattern)
+  const getAvatarSrc = member => {
+    if (member?.image) {
+      return member.image.startsWith('/') ? `${API_BASE}${member.image}` : member.image;
+    }
+    return `${API_BASE}/api/users/avatar/${member?.userId}`;
+  };
+
   const hasReviewers = () => study().reviewer1 || study().reviewer2;
 
   // Study name - directly use study.name (editable by user)
@@ -111,7 +152,7 @@ export default function StudyCardHeader(props) {
       {/* Expand/collapse chevron */}
       <div class='-ml-1 shrink-0 p-1'>
         <BiRegularChevronRight
-          class={`h-5 w-5 text-gray-400 transition-transform duration-200 ${props.expanded ? 'rotate-90' : ''}`}
+          class={`h-5 w-5 text-slate-400 transition-transform duration-200 ${props.expanded ? 'rotate-90' : ''}`}
         />
       </div>
 
@@ -122,33 +163,47 @@ export default function StudyCardHeader(props) {
           value={studyName()}
           onSubmit={handleNameChange}
           showEditIcon={true}
-          class='-ml-2 font-medium text-gray-900'
+          class='-ml-2 font-medium text-slate-900'
         />
         <Show when={citationLine()}>
-          <p class='w-fit cursor-text truncate text-xs text-gray-500 select-text' data-selectable>
+          <p class='w-fit cursor-text truncate text-xs text-slate-500 select-text' data-selectable>
             {citationLine()}
           </p>
         </Show>
       </div>
-      {/* Reviewer badges */}
+      {/* Reviewer avatars with tooltips */}
       <Show when={hasReviewers()}>
-        <div class='flex shrink-0 cursor-default flex-wrap gap-1' data-selectable>
+        <div class='flex shrink-0 -space-x-1.5' data-selectable>
           <For each={assignedReviewers()}>
-            {name => (
-              <span class='inline-flex cursor-text items-center rounded-full bg-blue-100 px-2 py-1 text-xs font-medium text-blue-800 select-text'>
-                {name}
-              </span>
-            )}
+            {member => {
+              const displayName = getMemberDisplayName(member);
+              const colorClasses = getAvatarColorClasses(displayName);
+              return (
+                <Tooltip openDelay={200}>
+                  <TooltipTrigger>
+                    <Avatar class='h-7 w-7 border-2 border-white text-xs'>
+                      <AvatarImage src={getAvatarSrc(member)} alt={displayName} />
+                      <AvatarFallback class={`${colorClasses.bg} ${colorClasses.text}`}>
+                        {getInitials(displayName)}
+                      </AvatarFallback>
+                    </Avatar>
+                  </TooltipTrigger>
+                  <TooltipPositioner>
+                    <TooltipContent>{displayName}</TooltipContent>
+                  </TooltipPositioner>
+                </Tooltip>
+              );
+            }}
           </For>
         </div>
       </Show>
       <Show when={!hasReviewers()}>
-        <span class='shrink-0 text-xs text-gray-400 italic'>No reviewers</span>
+        <span class='shrink-0 text-xs text-slate-400 italic'>No reviewers</span>
       </Show>
 
       {/* Actions menu */}
       <Menu onSelect={handleMenuSelect} positioning={{ placement: 'bottom-end' }}>
-        <MenuTrigger class='rounded-md p-1.5 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600'>
+        <MenuTrigger class='rounded-md p-1.5 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-600'>
           <FiMoreVertical class='h-4 w-4' />
         </MenuTrigger>
         <MenuPositioner>
diff --git a/packages/web/src/components/project/overview-tab/OverviewTab.jsx b/packages/web/src/components/project/overview-tab/OverviewTab.jsx
index 05b83d0e2..547561193 100644
--- a/packages/web/src/components/project/overview-tab/OverviewTab.jsx
+++ b/packages/web/src/components/project/overview-tab/OverviewTab.jsx
@@ -13,13 +13,6 @@ import projectActionsStore from '@/stores/projectActionsStore';
 import { useBetterAuth } from '@api/better-auth-store.js';
 import { useProjectContext } from '../ProjectContext.jsx';
 import { showToast } from '@/components/ui/toast';
-import {
-  Progress,
-  ProgressTrack,
-  ProgressRange,
-  ProgressLabel,
-  ProgressValueText,
-} from '@/components/ui/progress';
 import { Avatar, AvatarImage, AvatarFallback, getInitials } from '@/components/ui/avatar';
 import {
   Collapsible,
@@ -222,12 +215,12 @@ export default function OverviewTab() {
   return (
     <>
       {/* 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'>Team Progress</h2>
+      <div class='mb-6 rounded-xl border border-slate-200 bg-white p-5'>
+        <h2 class='mb-5 text-base font-semibold text-slate-900'>Project Progress</h2>
 
-        <div class='mb-6 flex flex-col items-center md:flex-row md:items-start md:gap-8'>
+        <div class='mb-5 flex flex-col items-center md:flex-row md:items-start md:gap-8'>
           {/* Overall Progress - Circular */}
-          <div class='mb-6 md:mb-0'>
+          <div class='mb-5 md:mb-0'>
             <CircularProgress
               value={overallProgress()}
               showValue={true}
@@ -237,63 +230,63 @@ export default function OverviewTab() {
                   'default'
                 : 'warning'
               }
-              size={160}
+              size={140}
             />
-            <p class='mt-3 text-center text-sm text-gray-600'>
+            <p class='mt-3 text-center text-sm text-slate-500'>
               {completedStudies()} of {studies().length} studies completed
             </p>
           </div>
 
           {/* Enhanced Stats Grid */}
-          <div class='grid flex-1 grid-cols-2 gap-4 md:grid-cols-3'>
-            <div class='rounded-lg border border-gray-200 bg-gray-50 p-5 text-center'>
+          <div class='grid flex-1 grid-cols-2 gap-3 md:grid-cols-3'>
+            <div class='rounded-lg border border-slate-200 bg-slate-50 p-4 text-center'>
               <div class='mb-2 flex justify-center'>
-                <AiOutlineBook class='h-6 w-6 text-gray-600' />
+                <AiOutlineBook class='h-5 w-5 text-slate-500' />
               </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>
+              <p class='text-2xl font-bold text-slate-900'>{studies().length}</p>
+              <p class='mt-1 text-xs font-medium text-slate-500'>Total Studies</p>
             </div>
-            <div class='rounded-lg border border-green-200 bg-green-50 p-5 text-center'>
+            <div class='rounded-lg border border-emerald-200 bg-emerald-50 p-4 text-center'>
               <div class='mb-2 flex justify-center'>
-                <CgArrowsExchange class='h-6 w-6 text-green-700' />
+                <CgArrowsExchange class='h-5 w-5 text-emerald-600' />
               </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>
+              <p class='text-2xl font-bold text-emerald-700'>{readyToReconcile()}</p>
+              <p class='mt-1 text-xs font-medium text-emerald-600'>Ready to Reconcile</p>
             </div>
-            <div class='rounded-lg border border-blue-200 bg-blue-50 p-5 text-center'>
+            <div class='rounded-lg border border-blue-200 bg-blue-50 p-4 text-center'>
               <div class='mb-2 flex justify-center'>
-                <BiRegularCheckCircle class='h-6 w-6 text-blue-700' />
+                <BiRegularCheckCircle class='h-5 w-5 text-blue-600' />
               </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>
+              <p class='text-2xl font-bold text-blue-700'>{completedStudies()}</p>
+              <p class='mt-1 text-xs font-medium text-blue-600'>Completed</p>
             </div>
           </div>
         </div>
 
         {/* Inter-rater Reliability Section */}
         <Show when={interRaterMetrics().studyCount > 0}>
-          <div class='mt-6 rounded-lg border border-purple-200 bg-purple-50 p-5'>
-            <h3 class='mb-4 text-base font-semibold text-gray-900'>Inter-rater Reliability</h3>
+          <div class='mt-5 rounded-lg border border-slate-200 bg-slate-50 p-4'>
+            <h3 class='mb-4 text-sm font-semibold text-slate-900'>Inter-rater Reliability</h3>
             <div class='grid grid-cols-1 gap-4 md:grid-cols-3'>
               <div class='text-center'>
-                <p class='text-2xl font-bold text-gray-900'>{interRaterMetrics().studyCount}</p>
-                <p class='mt-1 text-sm text-gray-600'>Studies Included</p>
+                <p class='text-2xl font-bold text-slate-900'>{interRaterMetrics().studyCount}</p>
+                <p class='mt-1 text-xs text-slate-500'>Studies Included</p>
               </div>
               <div class='text-center'>
-                <p class='text-2xl font-bold text-gray-900'>
+                <p class='text-2xl font-bold text-emerald-600'>
                   {interRaterMetrics().percentAgreement != null ?
                     `${interRaterMetrics().percentAgreement.toFixed(1)}%`
                   : 'N/A'}
                 </p>
-                <p class='mt-1 text-sm text-gray-600'>Percent Agreement</p>
+                <p class='mt-1 text-xs text-slate-500'>Percent Agreement</p>
               </div>
               <div class='text-center'>
-                <p class='text-2xl font-bold text-gray-900'>
+                <p class='text-2xl font-bold text-blue-600'>
                   {interRaterMetrics().cohensKappa != null ?
                     interRaterMetrics().cohensKappa.toFixed(3)
                   : 'N/A'}
                 </p>
-                <p class='mt-1 text-xs text-gray-600'>
+                <p class='mt-1 text-xs text-slate-500'>
                   Cohen's Kappa ({getKappaInterpretation(interRaterMetrics().cohensKappa)})
                 </p>
               </div>
@@ -302,173 +295,150 @@ export default function OverviewTab() {
         </Show>
       </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()}>
-              <Show
-                when={canAddMember()}
-                fallback={
-                  <span
-                    class='inline-flex cursor-not-allowed items-center gap-1.5 rounded-lg bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-500'
-                    title='Collaborator limit reached. Upgrade your plan to add more team members.'
-                  >
-                    <FiPlus class='h-4 w-4' />
-                    Add Member
-                  </span>
-                }
-              >
-                <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 focus:ring-2 focus:ring-blue-500 focus:outline-none'
+      {/* Section 2: Team Members */}
+      <div class='mb-6 rounded-xl border border-slate-200 bg-white p-5'>
+        <div class='mb-4 flex items-center justify-between'>
+          <h3 class='text-base font-semibold text-slate-900'>Team Members ({members().length})</h3>
+          <Show when={isOwner()}>
+            <Show
+              when={canAddMember()}
+              fallback={
+                <span
+                  class='inline-flex cursor-not-allowed items-center gap-1.5 rounded-lg bg-slate-100 px-3 py-1.5 text-sm font-medium text-slate-400'
+                  title='Collaborator limit reached. Upgrade your plan to add more team members.'
                 >
                   <FiPlus class='h-4 w-4' />
-                  Add Member
-                </button>
-              </Show>
+                  Invite
+                </span>
+              }
+            >
+              <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 focus:ring-2 focus:ring-blue-500 focus:outline-none'
+              >
+                <FiPlus class='h-4 w-4' />
+                Invite
+              </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 class='h-10 w-10'>
-                            <AvatarImage
-                              src={
-                                member.image ?
-                                  member.image.startsWith('/') ?
-                                    `${API_BASE}${member.image}`
-                                  : member.image
-                                : `${API_BASE}/api/users/avatar/${member.userId}`
-                              }
-                              alt={member.displayName || member.name || member.email}
-                            />
-                            <AvatarFallback class='bg-blue-600 text-white'>
-                              {getInitials(member.displayName || member.name || member.email)}
-                            </AvatarFallback>
-                          </Avatar>
-                          <div>
-                            <p class='font-medium text-gray-900'>
-                              {member.displayName || member.name || 'Unknown'}
-                              {isSelf && <span class='ml-1 text-gray-400'>(you)</span>}
-                            </p>
-                          </div>
-                        </div>
-                        <div class='flex items-center gap-2'>
-                          <span class='inline-flex items-center rounded-full bg-blue-100 px-2 py-1 text-xs font-medium text-blue-800 capitalize'>
-                            {member.role}
-                          </span>
-                          <Show when={canRemove && !isLastOwner}>
-                            <button
-                              onClick={() =>
-                                handleRemoveMember(
-                                  member.userId,
-                                  member.displayName || member.name || member.email,
-                                )
-                              }
-                              class='rounded p-1.5 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-600 focus:ring-2 focus:ring-blue-500 focus:outline-none'
-                              title={isSelf ? 'Leave project' : 'Remove member'}
-                            >
-                              <FiTrash2 class='h-4 w-4' />
-                            </button>
-                          </Show>
-                        </div>
+          </Show>
+        </div>
+        <Show when={members().length > 0}>
+          <div class='space-y-2'>
+            <For each={members()}>
+              {(member, index) => {
+                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='flex items-center justify-between rounded-lg p-3 transition-colors'
+                    style={{ background: index() % 2 === 0 ? '#f8fafc' : 'transparent' }}
+                  >
+                    <div class='flex items-center gap-3'>
+                      <Avatar class='h-9 w-9'>
+                        <AvatarImage
+                          src={
+                            member.image ?
+                              member.image.startsWith('/') ?
+                                `${API_BASE}${member.image}`
+                              : member.image
+                            : `${API_BASE}/api/users/avatar/${member.userId}`
+                          }
+                          alt={member.displayName || member.name || member.email}
+                        />
+                        <AvatarFallback class='bg-blue-600 text-white'>
+                          {getInitials(member.displayName || member.name || member.email)}
+                        </AvatarFallback>
+                      </Avatar>
+                      <div>
+                        <p class='font-medium text-slate-900'>
+                          {member.displayName || member.name || 'Unknown'}
+                          {isSelf && <span class='ml-1 text-slate-400'>(you)</span>}
+                        </p>
+                        <Show when={userProgress().total > 0}>
+                          <p class='text-xs text-slate-500'>
+                            {userProgress().completed}/{userProgress().total} studies completed
+                          </p>
+                        </Show>
                       </div>
-                      <Show when={userProgress().total > 0}>
-                        <div class='mt-4'>
-                          <Progress value={userProgress().percentage}>
-                            <div class='mb-1 flex items-center justify-between'>
-                              <ProgressLabel class='mb-0 text-xs'>
-                                {userProgress().completed} of {userProgress().total} studies
-                                appraised
-                              </ProgressLabel>
-                              <ProgressValueText class='text-xs' />
-                            </div>
-                            <ProgressTrack class='h-1.5'>
-                              <ProgressRange
-                                class={
-                                  userProgress().percentage === 100 ? 'bg-green-500'
-                                  : userProgress().percentage >= 50 ?
-                                    'bg-blue-600'
-                                  : 'bg-amber-500'
-                                }
-                              />
-                            </ProgressTrack>
-                          </Progress>
-                        </div>
+                    </div>
+                    <div class='flex items-center gap-2'>
+                      <span class='inline-flex items-center rounded-md border border-blue-200 bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700 capitalize'>
+                        {member.role}
+                      </span>
+                      <Show when={canRemove && !isLastOwner}>
+                        <button
+                          onClick={() =>
+                            handleRemoveMember(
+                              member.userId,
+                              member.displayName || member.name || member.email,
+                            )
+                          }
+                          class='rounded p-1.5 text-slate-400 transition-colors hover:bg-red-50 hover:text-red-600 focus:ring-2 focus:ring-blue-500 focus:outline-none'
+                          title={isSelf ? 'Leave project' : 'Remove member'}
+                        >
+                          <FiTrash2 class='h-4 w-4' />
+                        </button>
                       </Show>
                     </div>
-                  );
-                }}
-              </For>
-            </div>
-          </Show>
-        </div>
+                  </div>
+                );
+              }}
+            </For>
+          </div>
+        </Show>
+      </div>
 
-        {/* Reviewer Assignment - Below Members, Collapsed by Default */}
-        <Show when={shouldShowReviewerAssignment()}>
+      {/* Reviewer Assignment - Below Members, Collapsed by Default */}
+      <Show when={shouldShowReviewerAssignment()}>
+        <div class='mb-6'>
           <ReviewerAssignment
             studies={studies}
             members={members}
             onAssignReviewers={handleUpdateStudy}
           />
-        </Show>
-      </div>
+        </div>
+      </Show>
 
       {/* Section 3: Results */}
-      <div class='mb-8 space-y-6'>
-        <h2 class='text-lg font-semibold text-gray-900'>Results</h2>
-
+      <div class='space-y-4'>
         {/* Figures Section - Collapsible */}
-        <div class='overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm'>
+        <div class='overflow-hidden rounded-xl border border-slate-200 bg-white'>
           <Collapsible open={chartsExpanded()} onOpenChange={setChartsExpanded}>
-            <CollapsibleTrigger class='cursor-pointer px-6 py-4 transition-colors select-none hover:bg-gray-50'>
-              <h2 class='text-lg font-semibold text-gray-900'>Figures</h2>
-              <div class='flex items-center gap-2 text-sm text-gray-500'>
-                {chartsExpanded() ? 'Click to collapse' : 'Click to expand charts'}
+            <CollapsibleTrigger class='w-full cursor-pointer justify-between px-5 py-4 transition-colors select-none hover:bg-slate-50'>
+              <h2 class='text-base font-semibold text-slate-900'>Figures</h2>
+              <div class='flex items-center gap-2 text-sm text-slate-500'>
+                {chartsExpanded() ? 'Click to collapse' : 'Click to expand'}
                 <CollapsibleIndicator>
-                  <FiChevronDown class='h-5 w-5' />
+                  <FiChevronDown class='h-4 w-4' />
                 </CollapsibleIndicator>
               </div>
             </CollapsibleTrigger>
             <CollapsibleContent>
-              <div class='border-t border-gray-200 px-6 py-6'>
+              <div class='border-t border-slate-100 px-5 py-5'>
                 <ChartSection studies={studies} members={members} />
               </div>
             </CollapsibleContent>
           </Collapsible>
         </div>
         {/* Tables Section - Collapsible */}
-        <div class='overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm'>
+        <div class='overflow-hidden rounded-xl border border-slate-200 bg-white'>
           <Collapsible open={tablesExpanded()} onOpenChange={setTablesExpanded}>
-            <CollapsibleTrigger class='cursor-pointer px-6 py-4 transition-colors select-none hover:bg-gray-50'>
-              <h2 class='text-lg font-semibold text-gray-900'>Tables</h2>
-              <div class='flex items-center gap-2 text-sm text-gray-500'>
-                {tablesExpanded() ? 'Click to collapse' : 'Click to expand tables'}
+            <CollapsibleTrigger class='w-full cursor-pointer justify-between px-5 py-4 transition-colors select-none hover:bg-slate-50'>
+              <h2 class='text-base font-semibold text-slate-900'>Tables</h2>
+              <div class='flex items-center gap-2 text-sm text-slate-500'>
+                {tablesExpanded() ? 'Click to collapse' : 'Click to expand'}
                 <CollapsibleIndicator>
-                  <FiChevronDown class='h-5 w-5' />
+                  <FiChevronDown class='h-4 w-4' />
                 </CollapsibleIndicator>
               </div>
             </CollapsibleTrigger>
             <CollapsibleContent>
-              <div class='border-t border-gray-200 px-6 py-6'>
+              <div class='border-t border-slate-100 px-5 py-5'>
                 <AMSTAR2ResultsTable studies={studies} />
               </div>
             </CollapsibleContent>

From 66f290224e9a8ad2c7364067ebff0ff4aac576e7 Mon Sep 17 00:00:00 2001
From: Jacob Maynard <jacobamaynard@proton.me>
Date: Sun, 18 Jan 2026 15:45:17 -0600
Subject: [PATCH 2/6] improve styling of settings and project view

---
 packages/web/src/Layout.jsx                   |   2 +-
 packages/web/src/Routes.jsx                   |   9 +-
 packages/web/src/components/Navbar.jsx        |   2 +-
 .../src/components/profile/ProfilePage.jsx    | 753 ------------------
 .../src/components/project/ProjectView.jsx    |  15 +-
 .../study-card/StudyCardHeader.jsx            |   4 +-
 .../project/overview-tab/OverviewTab.jsx      |   2 +-
 .../src/components/settings/SettingsIndex.jsx |   4 +-
 .../components/settings/SettingsSidebar.jsx   |   6 +-
 packages/web/src/components/settings/index.js |   3 +-
 .../settings/pages/AcademicInfoSection.jsx    | 236 ++++++
 .../settings/pages/DeleteAccountSection.jsx   | 109 +++
 .../settings/pages/GeneralSettings.jsx        |  58 --
 .../settings/pages/IntegrationsSettings.jsx   |  70 ++
 .../settings/pages/NotificationsSettings.jsx  |  51 +-
 .../settings/pages/PersonaSection.jsx         | 152 ++++
 .../settings/pages/PlansSettings.jsx          |  38 +-
 .../settings/pages/ProfileInfoSection.jsx     | 261 ++++++
 .../settings/pages/ProfileSettings.jsx        |  60 ++
 .../settings/pages/SecuritySettings.jsx       |  92 ++-
 .../settings/shared/SettingField.jsx          |  66 ++
 packages/web/src/components/ui/tabs.tsx       |  10 +-
 .../workers/src/durable-objects/ProjectDoc.ts |  23 +-
 23 files changed, 1092 insertions(+), 934 deletions(-)
 delete mode 100644 packages/web/src/components/profile/ProfilePage.jsx
 create mode 100644 packages/web/src/components/settings/pages/AcademicInfoSection.jsx
 create mode 100644 packages/web/src/components/settings/pages/DeleteAccountSection.jsx
 delete mode 100644 packages/web/src/components/settings/pages/GeneralSettings.jsx
 create mode 100644 packages/web/src/components/settings/pages/IntegrationsSettings.jsx
 create mode 100644 packages/web/src/components/settings/pages/PersonaSection.jsx
 create mode 100644 packages/web/src/components/settings/pages/ProfileInfoSection.jsx
 create mode 100644 packages/web/src/components/settings/pages/ProfileSettings.jsx
 create mode 100644 packages/web/src/components/settings/shared/SettingField.jsx

diff --git a/packages/web/src/Layout.jsx b/packages/web/src/Layout.jsx
index 919e53918..0d6d4c8a0 100644
--- a/packages/web/src/Layout.jsx
+++ b/packages/web/src/Layout.jsx
@@ -33,7 +33,7 @@ export default function Layout(props) {
   // Routes that should NOT show the sidebar
   const shouldHideSidebar = createMemo(() => {
     const path = location.pathname;
-    return path.startsWith('/admin') || path.startsWith('/settings') || path === '/profile';
+    return path.startsWith('/admin') || path.startsWith('/settings');
   });
 
   // Desktop sidebar mode: 'expanded' or 'collapsed' (rail)
diff --git a/packages/web/src/Routes.jsx b/packages/web/src/Routes.jsx
index e18e22bb0..c9bf39f16 100644
--- a/packages/web/src/Routes.jsx
+++ b/packages/web/src/Routes.jsx
@@ -11,16 +11,16 @@ import Layout from '@/Layout.jsx';
 import LocalChecklistView from '@/components/checklist/LocalChecklistView.jsx';
 import ChecklistYjsWrapper from '@/components/checklist/ChecklistYjsWrapper.jsx';
 import ReconciliationWrapper from '@/components/project/reconcile-tab/ReconciliationWrapper.jsx';
-import ProfilePage from '@/components/profile/ProfilePage.jsx';
 import NotFoundPage from '@components/NotFoundPage.jsx';
 import {
   SettingsLayout,
   SettingsIndex,
+  ProfileSettings,
+  IntegrationsSettings,
   BillingSettings,
   PlansSettings,
   SecuritySettings,
   NotificationsSettings,
-  GeneralSettings,
 } from '@/components/settings/index.js';
 import { BASEPATH } from '@config/api.js';
 import ProtectedGuard from '@/components/auth/ProtectedGuard.jsx';
@@ -50,16 +50,15 @@ export default function AppRoutes() {
         <Route path='/dashboard' component={Dashboard} />
         {/* Protected routes - requires login */}
         <Route path='/' component={ProtectedGuard}>
-          {/* Global user routes (no sidebar) */}
-          <Route path='/profile' component={ProfilePage} />
           {/* Settings routes with settings sidebar */}
           <Route path='/settings' component={SettingsLayout}>
             <Route path='/' component={SettingsIndex} />
+            <Route path='/profile' component={ProfileSettings} />
+            <Route path='/integrations' component={IntegrationsSettings} />
             <Route path='/billing' component={BillingSettings} />
             <Route path='/plans' component={PlansSettings} />
             <Route path='/security' component={SecuritySettings} />
             <Route path='/notifications' component={NotificationsSettings} />
-            <Route path='/general' component={GeneralSettings} />
           </Route>
           {/* Admin routes - fully code-split, only loads on /admin/* */}
           <AdminRoutes />
diff --git a/packages/web/src/components/Navbar.jsx b/packages/web/src/components/Navbar.jsx
index 35f2ca3fe..2f6b5a5f9 100644
--- a/packages/web/src/components/Navbar.jsx
+++ b/packages/web/src/components/Navbar.jsx
@@ -155,7 +155,7 @@ export default function Navbar(props) {
                   <div class='truncate text-xs text-gray-500'>{user()?.email}</div>
                 </div>
                 <A
-                  href='/profile'
+                  href='/settings/profile'
                   class='block px-4 py-2 text-sm hover:bg-gray-100'
                   onClick={() => setShowUserMenu(false)}
                 >
diff --git a/packages/web/src/components/profile/ProfilePage.jsx b/packages/web/src/components/profile/ProfilePage.jsx
deleted file mode 100644
index fea24b1c7..000000000
--- a/packages/web/src/components/profile/ProfilePage.jsx
+++ /dev/null
@@ -1,753 +0,0 @@
-import { createSignal, createMemo, Show, For } from 'solid-js';
-import { useBetterAuth } from '@api/better-auth-store.js';
-import { FiCamera } from 'solid-icons/fi';
-import { showToast } from '@/components/ui/toast';
-import { LANDING_URL, API_BASE } from '@config/api.js';
-import { ROLES, getRoleLabel, TITLE_OPTIONS } from '@/components/auth/RoleSelector.jsx';
-import { compressImageFile } from '@lib/imageUtils.js';
-import {
-  Select,
-  SelectControl,
-  SelectTrigger,
-  SelectValueText,
-  SelectIndicator,
-  SelectPositioner,
-  SelectContent,
-  SelectItem,
-  SelectItemText,
-  SelectItemIndicator,
-  createListCollection,
-} from '@/components/ui/select';
-
-const titleCollection = createListCollection({
-  items: TITLE_OPTIONS,
-  itemToString: item => item.label,
-  itemToValue: item => item.value,
-});
-
-const ALLOWED_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
-
-// Avatar compression settings
-const AVATAR_MAX_SIZE = 256; // Max width/height in pixels
-const AVATAR_QUALITY = 0.85; // JPEG quality (0-1)
-
-/**
- * Sync profile changes to all projects the user is a member of
- * This updates the Y.js documents so other project members see the changes
- */
-async function syncProfileToProjects() {
-  try {
-    await fetch(`${API_BASE}/api/users/sync-profile`, {
-      method: 'POST',
-      credentials: 'include',
-    });
-  } catch (err) {
-    // Silently fail - this is a background sync operation
-    console.error('Failed to sync profile to projects:', err);
-  }
-}
-
-export default function ProfilePage() {
-  const auth = useBetterAuth();
-  const user = () => auth.user();
-
-  // Editing state
-  const [isEditingName, setIsEditingName] = createSignal(false);
-  const [isEditingRole, setIsEditingRole] = createSignal(false);
-  const [editFirstName, setEditFirstName] = createSignal('');
-  const [editLastName, setEditLastName] = createSignal('');
-  const [editRole, setEditRole] = createSignal('');
-  const [isEditingAcademic, setIsEditingAcademic] = createSignal(false);
-  const [editTitleSelection, setEditTitleSelection] = createSignal([]);
-  const [editCustomTitle, setEditCustomTitle] = createSignal('');
-  const [editInstitution, setEditInstitution] = createSignal('');
-  const [editDepartment, setEditDepartment] = createSignal('');
-  const [saving, setSaving] = createSignal(false);
-
-  // Compute the actual title value for editing
-  const editTitle = createMemo(() => {
-    const selected = editTitleSelection()[0];
-    if (selected === 'other') {
-      return editCustomTitle().trim();
-    }
-    return selected || '';
-  });
-
-  const isEditingCustomTitle = createMemo(() => editTitleSelection()[0] === 'other');
-
-  // Delete account state
-  const [showDeleteConfirm, setShowDeleteConfirm] = createSignal(false);
-  const [deleteConfirmText, setDeleteConfirmText] = createSignal('');
-  const [deletingAccount, setDeletingAccount] = createSignal(false);
-
-  // Profile picture state
-  const [uploadingImage, setUploadingImage] = createSignal(false);
-  const [optimisticImage, setOptimisticImage] = createSignal(null);
-  let fileInputRef;
-
-  // Get avatar URL - use optimistic image if available, otherwise user's image (which includes cached)
-  const avatarUrl = () => optimisticImage() || user()?.image || null;
-
-  // Parse name into first/last
-  const firstName = () => {
-    const name = user()?.name || '';
-    const parts = name.split(' ');
-    return parts[0] || '';
-  };
-
-  const lastName = () => {
-    const name = user()?.name || '';
-    const parts = name.split(' ');
-    return parts.slice(1).join(' ') || '';
-  };
-
-  const userInitials = () => {
-    const first = firstName();
-    const last = lastName();
-    if (first && last) {
-      return `${first.charAt(0)}${last.charAt(0)}`.toUpperCase();
-    }
-    return (first || user()?.email || 'U').charAt(0).toUpperCase();
-  };
-
-  const startEditingName = () => {
-    setEditFirstName(firstName());
-    setEditLastName(lastName());
-    setIsEditingName(true);
-  };
-
-  const cancelEditingName = () => {
-    setIsEditingName(false);
-    setEditFirstName('');
-    setEditLastName('');
-  };
-
-  const startEditingRole = () => {
-    setEditRole(user()?.persona || '');
-    setIsEditingRole(true);
-  };
-
-  const cancelEditingRole = () => {
-    setIsEditingRole(false);
-    setEditRole('');
-  };
-
-  const startEditingAcademic = () => {
-    const currentTitle = user()?.title || '';
-    const isStandardTitle = TITLE_OPTIONS.some(
-      opt => opt.value === currentTitle && opt.value !== 'other',
-    );
-    if (currentTitle && !isStandardTitle) {
-      setEditTitleSelection(['other']);
-      setEditCustomTitle(currentTitle);
-    } else {
-      setEditTitleSelection(currentTitle ? [currentTitle] : []);
-      setEditCustomTitle('');
-    }
-    setEditInstitution(user()?.institution || '');
-    setEditDepartment(user()?.department || '');
-    setIsEditingAcademic(true);
-  };
-
-  const cancelEditingAcademic = () => {
-    setIsEditingAcademic(false);
-    setEditTitleSelection([]);
-    setEditCustomTitle('');
-    setEditInstitution('');
-    setEditDepartment('');
-  };
-
-  const saveName = async () => {
-    setSaving(true);
-
-    try {
-      const fullName = `${editFirstName().trim()} ${editLastName().trim()}`.trim();
-      await auth.updateProfile({
-        name: fullName,
-      });
-      // Sync to all projects in background
-      syncProfileToProjects();
-      showToast.success('Profile Updated', 'Your name has been updated successfully.');
-      setIsEditingName(false);
-    } catch (err) {
-      console.warn('Failed to update profile name:', err.message);
-      showToast.error('Update Failed', 'Failed to update name. Please try again.');
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const saveRole = async () => {
-    setSaving(true);
-
-    try {
-      await auth.updateProfile({
-        persona: editRole() || null,
-      });
-      showToast.success('Profile Updated', 'Your persona has been updated successfully.');
-      setIsEditingRole(false);
-    } catch (err) {
-      console.warn('Failed to update profile persona:', err.message);
-      showToast.error('Update Failed', 'Failed to update persona. Please try again.');
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const saveAcademic = async () => {
-    setSaving(true);
-
-    try {
-      await auth.updateProfile({
-        title: editTitle() || null,
-        institution: editInstitution()?.trim() || null,
-        department: editDepartment()?.trim() || null,
-      });
-      showToast.success('Profile Updated', 'Your academic information has been updated.');
-      setIsEditingAcademic(false);
-    } catch (err) {
-      console.warn('Failed to update academic info:', err.message);
-      showToast.error('Update Failed', 'Failed to update academic information. Please try again.');
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const handleImageSelect = async event => {
-    const file = event.target.files?.[0];
-    if (!file) return;
-
-    // Validate file type
-    if (!ALLOWED_TYPES.includes(file.type)) {
-      showToast.error('Invalid File', 'Please select a JPEG, PNG, GIF, or WebP image.');
-      return;
-    }
-
-    // Note: We don't check file size here since we compress before upload
-    // The compression will reduce even large files to ~10-50KB
-
-    setUploadingImage(true);
-
-    try {
-      // Compress the image before upload
-      const compressedFile = await compressImageFile(file, {
-        maxSize: AVATAR_MAX_SIZE,
-        quality: AVATAR_QUALITY,
-      });
-      console.info(
-        `Image compressed: ${(file.size / 1024).toFixed(1)}KB -> ${(compressedFile.size / 1024).toFixed(1)}KB`,
-      );
-
-      // Optimistically show the compressed image immediately
-      const localUrl = URL.createObjectURL(compressedFile);
-      setOptimisticImage(localUrl);
-
-      // Upload to R2 via API
-      const formData = new FormData();
-      formData.append('avatar', compressedFile);
-
-      const response = await fetch(`${API_BASE}/api/users/avatar`, {
-        method: 'POST',
-        body: formData,
-        credentials: 'include',
-      });
-
-      if (!response.ok) {
-        const error = await response.json().catch(() => ({}));
-        throw new Error(error.message || 'Upload failed');
-      }
-
-      const { url } = await response.json();
-
-      // Update user profile with the new avatar URL
-      await auth.updateProfile({
-        image: url,
-      });
-
-      // Sync to all projects in background
-      syncProfileToProjects();
-
-      // Clear optimistic image now that server has the real one
-      setOptimisticImage(null);
-
-      showToast.success('Photo Updated', 'Your profile photo has been updated.');
-    } catch (err) {
-      // Revert optimistic update on error
-      setOptimisticImage(null);
-      const { handleError } = await import('@/lib/error-utils.js');
-      await handleError(err, {
-        toastTitle: 'Upload Failed',
-      });
-    } finally {
-      setUploadingImage(false);
-    }
-
-    // Reset input so same file can be selected again
-    event.target.value = '';
-  };
-
-  const triggerFileSelect = () => {
-    fileInputRef?.click();
-  };
-
-  const handleDeleteAccount = async () => {
-    if (deleteConfirmText() !== 'DELETE') {
-      showToast.error('Confirmation Required', 'Please type DELETE to confirm.');
-      return;
-    }
-
-    setDeletingAccount(true);
-
-    try {
-      await auth.deleteAccount();
-      showToast.success('Account Deleted', 'Your account has been deleted.');
-      // Redirect to landing page after successful deletion
-      window.location.href = LANDING_URL;
-    } catch (err) {
-      const { handleError } = await import('@/lib/error-utils.js');
-      await handleError(err, {
-        toastTitle: 'Delete Failed',
-      });
-      setDeletingAccount(false);
-    }
-  };
-
-  const formatDate = dateString => {
-    if (!dateString) return 'N/A';
-    return new Date(dateString).toLocaleDateString('en-US', {
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
-    });
-  };
-
-  return (
-    <div class='p-6'>
-      <div class='mx-auto max-w-2xl space-y-6'>
-        {/* Header */}
-        <div>
-          <h1 class='text-2xl font-bold text-gray-900'>Profile</h1>
-          <p class='mt-1 text-gray-500'>Manage your account settings</p>
-        </div>
-
-        {/* Profile Card */}
-        <div class='rounded-lg border border-gray-200 bg-white p-6 shadow-sm'>
-          {/* Avatar and Name Row */}
-          <div class='flex items-center space-x-4 border-b border-gray-100 pb-6'>
-            {/* Profile Image or Initials with Edit Button */}
-            <div class='group relative'>
-              <Show
-                when={avatarUrl()}
-                fallback={
-                  <div class='flex h-16 w-16 items-center justify-center rounded-full bg-blue-100 text-xl font-bold text-blue-600'>
-                    {userInitials()}
-                  </div>
-                }
-              >
-                <img
-                  src={avatarUrl()}
-                  alt={user()?.name || 'Profile'}
-                  class='h-16 w-16 rounded-full object-cover ring-2 ring-gray-100'
-                  referrerPolicy='no-referrer'
-                />
-              </Show>
-              {/* Edit overlay button */}
-              <button
-                onClick={triggerFileSelect}
-                disabled={uploadingImage()}
-                class='absolute inset-0 flex cursor-pointer items-center justify-center rounded-full bg-black/50 opacity-0 transition-opacity group-hover:opacity-100 disabled:cursor-wait'
-                title='Change profile photo'
-              >
-                <Show
-                  when={!uploadingImage()}
-                  fallback={
-                    <div class='h-5 w-5 animate-spin rounded-full border-2 border-white border-t-transparent' />
-                  }
-                >
-                  <FiCamera class='h-5 w-5 text-white' />
-                </Show>
-              </button>
-              {/* Hidden file input */}
-              <input
-                ref={fileInputRef}
-                type='file'
-                accept='image/jpeg,image/png,image/gif,image/webp'
-                class='hidden'
-                onChange={handleImageSelect}
-              />
-            </div>
-            <div>
-              <h2 class='text-lg font-semibold text-gray-900'>{user()?.name || 'User'}</h2>
-              <p class='text-sm text-gray-500'>{user()?.email}</p>
-              <Show when={user()?.persona}>
-                <span class='mt-1 inline-flex items-center rounded bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700'>
-                  {getRoleLabel(user()?.persona)}
-                </span>
-              </Show>
-            </div>
-          </div>
-
-          {/* Profile Fields */}
-          <div class='space-y-5 pt-6'>
-            {/* Name Field */}
-            <div class='flex items-start justify-between'>
-              <div class='flex-1'>
-                <Show
-                  when={isEditingName()}
-                  fallback={
-                    <div class='grid grid-cols-2 gap-4'>
-                      <div>
-                        <label class='block text-xs font-medium tracking-wide text-gray-500 uppercase'>
-                          First Name
-                        </label>
-                        <p class='mt-1 text-gray-900'>{firstName() || 'Not set'}</p>
-                      </div>
-                      <div>
-                        <label class='block text-xs font-medium tracking-wide text-gray-500 uppercase'>
-                          Last Name
-                        </label>
-                        <p class='mt-1 text-gray-900'>{lastName() || 'Not set'}</p>
-                      </div>
-                    </div>
-                  }
-                >
-                  <div class='grid grid-cols-2 gap-4'>
-                    <div>
-                      <label class='mb-1 block text-xs font-medium tracking-wide text-gray-500 uppercase'>
-                        First Name
-                      </label>
-                      <input
-                        type='text'
-                        value={editFirstName()}
-                        onInput={e => setEditFirstName(e.target.value)}
-                        class='block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none'
-                        placeholder='First name'
-                      />
-                    </div>
-                    <div>
-                      <label class='mb-1 block text-xs font-medium tracking-wide text-gray-500 uppercase'>
-                        Last Name
-                      </label>
-                      <input
-                        type='text'
-                        value={editLastName()}
-                        onInput={e => setEditLastName(e.target.value)}
-                        class='block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none'
-                        placeholder='Last name'
-                      />
-                    </div>
-                  </div>
-                </Show>
-              </div>
-              <Show
-                when={isEditingName()}
-                fallback={
-                  <button
-                    onClick={startEditingName}
-                    class='ml-4 text-sm font-medium text-blue-600 hover:text-blue-700'
-                  >
-                    Edit
-                  </button>
-                }
-              >
-                <div class='ml-4 flex space-x-2'>
-                  <button
-                    onClick={saveName}
-                    disabled={saving()}
-                    class='rounded-lg bg-blue-600 px-3 py-1 text-sm font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:outline-none disabled:opacity-50'
-                  >
-                    Save
-                  </button>
-                  <button
-                    onClick={cancelEditingName}
-                    disabled={saving()}
-                    class='px-3 py-1 text-sm font-medium text-gray-600 hover:text-gray-800 disabled:opacity-50'
-                  >
-                    Cancel
-                  </button>
-                </div>
-              </Show>
-            </div>
-
-            {/* Persona Field */}
-            <div class='flex items-start justify-between border-t border-gray-100 pt-4'>
-              <div class='flex-1'>
-                <label class='block text-xs font-medium tracking-wide text-gray-500 uppercase'>
-                  Persona
-                </label>
-                <Show
-                  when={isEditingRole()}
-                  fallback={
-                    <p class='mt-1 text-gray-900'>{getRoleLabel(user()?.persona) || 'Not set'}</p>
-                  }
-                >
-                  <select
-                    value={editRole()}
-                    onChange={e => setEditRole(e.target.value)}
-                    class='mt-1 block w-full max-w-xs rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-transparent focus:ring-2 focus:ring-blue-400 focus:outline-none'
-                  >
-                    <option value=''>Select a persona</option>
-                    <For each={ROLES}>{role => <option value={role.id}>{role.label}</option>}</For>
-                  </select>
-                </Show>
-              </div>
-              <Show
-                when={isEditingRole()}
-                fallback={
-                  <button
-                    onClick={startEditingRole}
-                    class='ml-4 text-sm font-medium text-blue-600 hover:text-blue-700'
-                  >
-                    Edit
-                  </button>
-                }
-              >
-                <div class='ml-4 flex space-x-2'>
-                  <button
-                    onClick={saveRole}
-                    disabled={saving()}
-                    class='rounded-lg bg-blue-600 px-3 py-1 text-sm font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:outline-none disabled:opacity-50'
-                  >
-                    Save
-                  </button>
-                  <button
-                    onClick={cancelEditingRole}
-                    disabled={saving()}
-                    class='px-3 py-1 text-sm font-medium text-gray-600 hover:text-gray-800 disabled:opacity-50'
-                  >
-                    Cancel
-                  </button>
-                </div>
-              </Show>
-            </div>
-
-            {/* Academic Information Field */}
-            <div class='flex items-start justify-between border-t border-gray-100 pt-4'>
-              <div class='flex-1'>
-                <label class='block text-xs font-medium tracking-wide text-gray-500 uppercase'>
-                  Academic Information
-                </label>
-                <Show
-                  when={isEditingAcademic()}
-                  fallback={
-                    <div class='mt-1 space-y-1'>
-                      <div>
-                        <span class='text-xs text-gray-500'>Title: </span>
-                        <span class='text-gray-900'>{user()?.title || 'Not set'}</span>
-                      </div>
-                      <div>
-                        <span class='text-xs text-gray-500'>Institution: </span>
-                        <span class='text-gray-900'>{user()?.institution || 'Not set'}</span>
-                      </div>
-                      <div>
-                        <span class='text-xs text-gray-500'>Department: </span>
-                        <span class='text-gray-900'>{user()?.department || 'Not set'}</span>
-                      </div>
-                    </div>
-                  }
-                >
-                  <div class='mt-2 space-y-3'>
-                    <div>
-                      <label class='mb-1 block text-xs font-medium tracking-wide text-gray-500 uppercase'>
-                        Title
-                      </label>
-                      <Select
-                        collection={titleCollection}
-                        value={editTitleSelection()}
-                        onValueChange={details => setEditTitleSelection(details.value)}
-                        class='max-w-xs'
-                      >
-                        <SelectControl>
-                          <SelectTrigger>
-                            <SelectValueText placeholder='Select a title (optional)' />
-                            <SelectIndicator />
-                          </SelectTrigger>
-                        </SelectControl>
-                        <SelectPositioner>
-                          <SelectContent>
-                            <For each={TITLE_OPTIONS}>
-                              {option => (
-                                <SelectItem item={option}>
-                                  <SelectItemText>{option.label}</SelectItemText>
-                                  <SelectItemIndicator />
-                                </SelectItem>
-                              )}
-                            </For>
-                          </SelectContent>
-                        </SelectPositioner>
-                      </Select>
-                      <Show when={isEditingCustomTitle()}>
-                        <input
-                          type='text'
-                          value={editCustomTitle()}
-                          onInput={e => setEditCustomTitle(e.target.value)}
-                          class='mt-2 block w-full max-w-xs rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none'
-                          placeholder='Enter your title'
-                          maxLength={50}
-                        />
-                      </Show>
-                    </div>
-                    <div>
-                      <label class='mb-1 block text-xs font-medium tracking-wide text-gray-500 uppercase'>
-                        Institution
-                      </label>
-                      <input
-                        type='text'
-                        value={editInstitution()}
-                        onInput={e => setEditInstitution(e.target.value)}
-                        class='block w-full max-w-md rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-transparent focus:ring-2 focus:ring-blue-400 focus:outline-none'
-                        placeholder='University or organization'
-                        maxLength={200}
-                      />
-                    </div>
-                    <div>
-                      <label class='mb-1 block text-xs font-medium tracking-wide text-gray-500 uppercase'>
-                        Department
-                      </label>
-                      <input
-                        type='text'
-                        value={editDepartment()}
-                        onInput={e => setEditDepartment(e.target.value)}
-                        class='block w-full max-w-md rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-transparent focus:ring-2 focus:ring-blue-400 focus:outline-none'
-                        placeholder='Department or faculty'
-                        maxLength={200}
-                      />
-                    </div>
-                  </div>
-                </Show>
-              </div>
-              <Show
-                when={isEditingAcademic()}
-                fallback={
-                  <button
-                    onClick={startEditingAcademic}
-                    class='ml-4 text-sm font-medium text-blue-600 hover:text-blue-700'
-                  >
-                    Edit
-                  </button>
-                }
-              >
-                <div class='ml-4 flex space-x-2'>
-                  <button
-                    onClick={saveAcademic}
-                    disabled={saving()}
-                    class='rounded-lg bg-blue-600 px-3 py-1 text-sm font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:outline-none disabled:opacity-50'
-                  >
-                    Save
-                  </button>
-                  <button
-                    onClick={cancelEditingAcademic}
-                    disabled={saving()}
-                    class='px-3 py-1 text-sm font-medium text-gray-600 hover:text-gray-800 disabled:opacity-50'
-                  >
-                    Cancel
-                  </button>
-                </div>
-              </Show>
-            </div>
-
-            {/* Email Field */}
-            <div class='border-t border-gray-100 pt-4'>
-              <label class='block text-xs font-medium tracking-wide text-gray-500 uppercase'>
-                Email
-              </label>
-              <div class='mt-1 flex items-center space-x-2'>
-                <p class='text-gray-900'>{user()?.email || 'Not set'}</p>
-                <Show when={user()?.emailVerified}>
-                  <span class='inline-flex items-center rounded bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700'>
-                    Verified
-                  </span>
-                </Show>
-              </div>
-            </div>
-
-            {/* Member Since */}
-            <div class='border-t border-gray-100 pt-4'>
-              <label class='block text-xs font-medium tracking-wide text-gray-500 uppercase'>
-                Member since
-              </label>
-              <p class='mt-1 text-gray-900'>{formatDate(user()?.createdAt)}</p>
-            </div>
-          </div>
-        </div>
-
-        {/* Danger Zone */}
-        <Show when={user()}>
-          <div class='overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm'>
-            <div class='border-b border-gray-200 px-6 py-4'>
-              <h3 class='text-base font-semibold text-gray-900'>Danger Zone</h3>
-            </div>
-            <div class='p-6'>
-              <Show
-                when={showDeleteConfirm()}
-                fallback={
-                  <div class='flex items-center justify-between'>
-                    <div>
-                      <p class='font-medium text-gray-900'>Delete Account</p>
-                      <p class='text-sm text-gray-500'>
-                        Permanently delete your account and all associated data.
-                      </p>
-                    </div>
-                    <button
-                      onClick={() => setShowDeleteConfirm(true)}
-                      class='rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-red-700 focus:ring-2 focus:ring-blue-500 focus:outline-none'
-                    >
-                      Delete Account
-                    </button>
-                  </div>
-                }
-              >
-                <div class='space-y-4'>
-                  <div class='rounded-lg border border-red-200 bg-red-50 p-4'>
-                    <p class='mb-2 text-sm font-medium text-red-800'>
-                      Are you sure you want to delete your account?
-                    </p>
-                    <ul class='list-inside list-disc space-y-1 text-sm text-red-700'>
-                      <li>All your projects will be permanently deleted</li>
-                      <li>All your checklists and reviews will be lost</li>
-                      <li>You will be removed from all shared projects</li>
-                      <li>This action cannot be undone</li>
-                    </ul>
-                  </div>
-
-                  <div>
-                    <label class='mb-1 block text-sm font-medium text-gray-700'>
-                      Type <span class='font-mono font-bold'>DELETE</span> to confirm
-                    </label>
-                    <input
-                      type='text'
-                      value={deleteConfirmText()}
-                      onInput={e => setDeleteConfirmText(e.target.value)}
-                      class='block w-full max-w-xs rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none'
-                      placeholder='DELETE'
-                    />
-                  </div>
-
-                  <div class='flex space-x-3'>
-                    <button
-                      onClick={handleDeleteAccount}
-                      disabled={deletingAccount() || deleteConfirmText() !== 'DELETE'}
-                      class='rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-red-700 focus:ring-2 focus:ring-blue-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50'
-                    >
-                      {deletingAccount() ? 'Deleting...' : 'Permanently Delete Account'}
-                    </button>
-                    <button
-                      type='button'
-                      onClick={() => {
-                        setShowDeleteConfirm(false);
-                        setDeleteConfirmText('');
-                      }}
-                      class='rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition hover:bg-gray-200'
-                    >
-                      Cancel
-                    </button>
-                  </div>
-                </div>
-              </Show>
-            </div>
-          </div>
-        </Show>
-      </div>
-    </div>
-  );
-}
diff --git a/packages/web/src/components/project/ProjectView.jsx b/packages/web/src/components/project/ProjectView.jsx
index 25567e7f7..6096f1499 100644
--- a/packages/web/src/components/project/ProjectView.jsx
+++ b/packages/web/src/components/project/ProjectView.jsx
@@ -18,7 +18,7 @@ import { uploadPdf, deletePdf } from '@api/pdf-api.js';
 import { cachePdf } from '@primitives/pdfCache.js';
 import { importFromGoogleDrive } from '@api/google-drive.js';
 import { showToast } from '@/components/ui/toast';
-import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
+import { Tabs, TabsList, TabsTrigger, TabsContent, TabsIndicator } from '@/components/ui/tabs';
 import { BiRegularHome } from 'solid-icons/bi';
 import { BsListTask } from 'solid-icons/bs';
 import { CgArrowsExchange } from 'solid-icons/cg';
@@ -304,23 +304,26 @@ export default function ProjectView(props) {
 
               {/* Tabs navigation */}
               <div class='mx-auto max-w-7xl px-6'>
-                <TabsList class='-mb-px flex gap-1 overflow-x-auto'>
+                <TabsList class='relative flex gap-1 overflow-x-auto pb-px'>
                   <For each={tabDefinitions}>
                     {tab => (
                       <TabsTrigger
                         value={tab.value}
-                        class='gap-2 border-b-2 border-transparent text-slate-500 transition-colors hover:text-slate-700 data-[selected]:border-blue-600 data-[selected]:text-blue-700'
+                        class='group relative gap-2 rounded-t-lg px-4 py-2.5 text-slate-500 transition-all hover:bg-slate-50 hover:text-slate-700 data-[selected]:text-slate-900'
                       >
-                        {tab.icon}
-                        {tab.label}
+                        <span class='opacity-60 transition-opacity group-data-[selected]:opacity-100'>
+                          {tab.icon}
+                        </span>
+                        <span class='font-medium'>{tab.label}</span>
                         <Show when={tab.getCount}>
-                          <span class='rounded-full bg-slate-100 px-2 py-0.5 text-xs text-slate-500 data-[selected]:bg-blue-100 data-[selected]:text-blue-700'>
+                          <span class='min-w-[1.5rem] rounded-full bg-slate-100 px-1.5 py-0.5 text-center text-xs font-medium text-slate-600 tabular-nums transition-colors group-data-[selected]:bg-blue-50 group-data-[selected]:text-blue-700'>
                             {tab.getCount()}
                           </span>
                         </Show>
                       </TabsTrigger>
                     )}
                   </For>
+                  <TabsIndicator class='h-0.5 rounded-full bg-blue-600' />
                 </TabsList>
               </div>
             </header>
diff --git a/packages/web/src/components/project/all-studies-tab/study-card/StudyCardHeader.jsx b/packages/web/src/components/project/all-studies-tab/study-card/StudyCardHeader.jsx
index 7bf8b22aa..8787a0720 100644
--- a/packages/web/src/components/project/all-studies-tab/study-card/StudyCardHeader.jsx
+++ b/packages/web/src/components/project/all-studies-tab/study-card/StudyCardHeader.jsx
@@ -82,12 +82,12 @@ export default function StudyCardHeader(props) {
   const getMemberDisplayName = member =>
     member?.displayName || member?.name || member?.email || 'Unknown';
 
-  // Get avatar image source (matching OverviewTab pattern)
+  // Get avatar image source - only return URL if image exists, otherwise undefined for fallback
   const getAvatarSrc = member => {
     if (member?.image) {
       return member.image.startsWith('/') ? `${API_BASE}${member.image}` : member.image;
     }
-    return `${API_BASE}/api/users/avatar/${member?.userId}`;
+    return undefined;
   };
 
   const hasReviewers = () => study().reviewer1 || study().reviewer2;
diff --git a/packages/web/src/components/project/overview-tab/OverviewTab.jsx b/packages/web/src/components/project/overview-tab/OverviewTab.jsx
index 547561193..704262346 100644
--- a/packages/web/src/components/project/overview-tab/OverviewTab.jsx
+++ b/packages/web/src/components/project/overview-tab/OverviewTab.jsx
@@ -346,7 +346,7 @@ export default function OverviewTab() {
                               member.image.startsWith('/') ?
                                 `${API_BASE}${member.image}`
                               : member.image
-                            : `${API_BASE}/api/users/avatar/${member.userId}`
+                            : undefined
                           }
                           alt={member.displayName || member.name || member.email}
                         />
diff --git a/packages/web/src/components/settings/SettingsIndex.jsx b/packages/web/src/components/settings/SettingsIndex.jsx
index d1e874926..75725268b 100644
--- a/packages/web/src/components/settings/SettingsIndex.jsx
+++ b/packages/web/src/components/settings/SettingsIndex.jsx
@@ -1,9 +1,9 @@
 /**
- * SettingsIndex - Redirects to the default settings page (general)
+ * SettingsIndex - Redirects to the default settings page (profile)
  */
 
 import { Navigate } from '@solidjs/router';
 
 export default function SettingsIndex() {
-  return <Navigate href='/settings/general' />;
+  return <Navigate href='/settings/profile' />;
 }
diff --git a/packages/web/src/components/settings/SettingsSidebar.jsx b/packages/web/src/components/settings/SettingsSidebar.jsx
index 17bc48ad5..e8b131322 100644
--- a/packages/web/src/components/settings/SettingsSidebar.jsx
+++ b/packages/web/src/components/settings/SettingsSidebar.jsx
@@ -15,7 +15,8 @@ import {
   FiZap,
   FiShield,
   FiBell,
-  FiSettings,
+  FiLink,
+  FiUser,
   FiArrowLeft,
 } from 'solid-icons/fi';
 
@@ -23,7 +24,8 @@ import {
  * Settings navigation items
  */
 const SETTINGS_NAV_ITEMS = [
-  { id: 'general', label: 'General', icon: FiSettings, path: '/settings/general' },
+  { id: 'profile', label: 'Profile', icon: FiUser, path: '/settings/profile' },
+  { id: 'integrations', label: 'Integrations', icon: FiLink, path: '/settings/integrations' },
   { id: 'billing', label: 'Billing', icon: FiCreditCard, path: '/settings/billing' },
   { id: 'plans', label: 'Plans', icon: FiZap, path: '/settings/plans' },
   { id: 'security', label: 'Security', icon: FiShield, path: '/settings/security' },
diff --git a/packages/web/src/components/settings/index.js b/packages/web/src/components/settings/index.js
index 540895227..008f906a2 100644
--- a/packages/web/src/components/settings/index.js
+++ b/packages/web/src/components/settings/index.js
@@ -4,8 +4,9 @@ export { default as SettingsSidebar } from './SettingsSidebar.jsx';
 export { default as SettingsIndex } from './SettingsIndex.jsx';
 
 // Settings pages
+export { default as ProfileSettings } from './pages/ProfileSettings.jsx';
+export { default as IntegrationsSettings } from './pages/IntegrationsSettings.jsx';
 export { default as BillingSettings } from './pages/BillingSettings.jsx';
 export { default as PlansSettings } from './pages/PlansSettings.jsx';
 export { default as SecuritySettings } from './pages/SecuritySettings.jsx';
 export { default as NotificationsSettings } from './pages/NotificationsSettings.jsx';
-export { default as GeneralSettings } from './pages/GeneralSettings.jsx';
diff --git a/packages/web/src/components/settings/pages/AcademicInfoSection.jsx b/packages/web/src/components/settings/pages/AcademicInfoSection.jsx
new file mode 100644
index 000000000..147b3d71f
--- /dev/null
+++ b/packages/web/src/components/settings/pages/AcademicInfoSection.jsx
@@ -0,0 +1,236 @@
+/**
+ * AcademicInfoSection - Title, institution, and department fields
+ */
+
+import { createSignal, createMemo, Show, For } from 'solid-js';
+import { useBetterAuth } from '@api/better-auth-store.js';
+import { showToast } from '@/components/ui/toast';
+import { TITLE_OPTIONS } from '@/components/auth/RoleSelector.jsx';
+import { API_BASE } from '@config/api.js';
+
+/**
+ * Sync profile changes to all projects the user is a member of
+ */
+async function syncProfileToProjects() {
+  try {
+    await fetch(`${API_BASE}/api/users/sync-profile`, {
+      method: 'POST',
+      credentials: 'include',
+    });
+  } catch (err) {
+    console.error('Failed to sync profile to projects:', err);
+  }
+}
+import {
+  Select,
+  SelectControl,
+  SelectTrigger,
+  SelectValueText,
+  SelectIndicator,
+  SelectPositioner,
+  SelectContent,
+  SelectItem,
+  SelectItemText,
+  SelectItemIndicator,
+  createListCollection,
+} from '@/components/ui/select';
+
+const titleCollection = createListCollection({
+  items: TITLE_OPTIONS,
+  itemToString: item => item.label,
+  itemToValue: item => item.value,
+});
+
+export default function AcademicInfoSection() {
+  const auth = useBetterAuth();
+  const user = () => auth.user();
+
+  const [isEditingAcademic, setIsEditingAcademic] = createSignal(false);
+  const [editTitleSelection, setEditTitleSelection] = createSignal([]);
+  const [editCustomTitle, setEditCustomTitle] = createSignal('');
+  const [editInstitution, setEditInstitution] = createSignal('');
+  const [editDepartment, setEditDepartment] = createSignal('');
+  const [saving, setSaving] = createSignal(false);
+
+  const editTitle = createMemo(() => {
+    const selected = editTitleSelection()[0];
+    if (selected === 'other') {
+      return editCustomTitle().trim();
+    }
+    return selected || '';
+  });
+
+  const isEditingCustomTitle = createMemo(() => editTitleSelection()[0] === 'other');
+
+  const startEditingAcademic = () => {
+    const currentTitle = user()?.title || '';
+    const isStandardTitle = TITLE_OPTIONS.some(
+      opt => opt.value === currentTitle && opt.value !== 'other',
+    );
+    if (currentTitle && !isStandardTitle) {
+      setEditTitleSelection(['other']);
+      setEditCustomTitle(currentTitle);
+    } else {
+      setEditTitleSelection(currentTitle ? [currentTitle] : []);
+      setEditCustomTitle('');
+    }
+    setEditInstitution(user()?.institution || '');
+    setEditDepartment(user()?.department || '');
+    setIsEditingAcademic(true);
+  };
+
+  const cancelEditingAcademic = () => {
+    setIsEditingAcademic(false);
+    setEditTitleSelection([]);
+    setEditCustomTitle('');
+    setEditInstitution('');
+    setEditDepartment('');
+  };
+
+  const saveAcademic = async () => {
+    setSaving(true);
+    try {
+      await auth.updateProfile({
+        title: editTitle() || null,
+        institution: editInstitution()?.trim() || null,
+        department: editDepartment()?.trim() || null,
+      });
+      syncProfileToProjects();
+      showToast.success('Profile Updated', 'Your academic information has been updated.');
+      setIsEditingAcademic(false);
+    } catch (err) {
+      console.warn('Failed to update academic info:', err.message);
+      showToast.error('Update Failed', 'Failed to update academic information. Please try again.');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div class='flex items-start justify-between border-t border-slate-100 pt-5'>
+      <div class='flex-1'>
+        <label class='mb-1 block text-xs font-medium tracking-wide text-slate-400 uppercase'>
+          Academic Information
+        </label>
+        <Show
+          when={isEditingAcademic()}
+          fallback={
+            <div class='mt-2 space-y-2'>
+              <div class='flex items-baseline gap-2'>
+                <span class='text-xs font-medium text-slate-500'>Title:</span>
+                <span class='text-slate-900'>
+                  {user()?.title || <span class='text-slate-400'>Not set</span>}
+                </span>
+              </div>
+              <div class='flex items-baseline gap-2'>
+                <span class='text-xs font-medium text-slate-500'>Institution:</span>
+                <span class='text-slate-900'>
+                  {user()?.institution || <span class='text-slate-400'>Not set</span>}
+                </span>
+              </div>
+              <div class='flex items-baseline gap-2'>
+                <span class='text-xs font-medium text-slate-500'>Department:</span>
+                <span class='text-slate-900'>
+                  {user()?.department || <span class='text-slate-400'>Not set</span>}
+                </span>
+              </div>
+            </div>
+          }
+        >
+          <div class='mt-3 space-y-4'>
+            <div>
+              <label class='mb-1.5 block text-xs font-medium tracking-wide text-slate-500 uppercase'>
+                Title
+              </label>
+              <Select
+                collection={titleCollection}
+                value={editTitleSelection()}
+                onValueChange={details => setEditTitleSelection(details.value)}
+                class='max-w-xs'
+              >
+                <SelectControl>
+                  <SelectTrigger>
+                    <SelectValueText placeholder='Select a title (optional)' />
+                    <SelectIndicator />
+                  </SelectTrigger>
+                </SelectControl>
+                <SelectPositioner>
+                  <SelectContent>
+                    <For each={TITLE_OPTIONS}>
+                      {option => (
+                        <SelectItem item={option}>
+                          <SelectItemText>{option.label}</SelectItemText>
+                          <SelectItemIndicator />
+                        </SelectItem>
+                      )}
+                    </For>
+                  </SelectContent>
+                </SelectPositioner>
+              </Select>
+              <Show when={isEditingCustomTitle()}>
+                <input
+                  type='text'
+                  value={editCustomTitle()}
+                  onInput={e => setEditCustomTitle(e.target.value)}
+                  class='mt-2 block w-full max-w-xs rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm shadow-sm transition-colors focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 focus:outline-none'
+                  placeholder='Enter your title'
+                  maxLength={50}
+                />
+              </Show>
+            </div>
+            <div>
+              <label class='mb-1.5 block text-xs font-medium tracking-wide text-slate-500 uppercase'>
+                Institution
+              </label>
+              <input
+                type='text'
+                value={editInstitution()}
+                onInput={e => setEditInstitution(e.target.value)}
+                class='block w-full max-w-md rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm shadow-sm transition-colors focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 focus:outline-none'
+                placeholder='University or organization'
+                maxLength={200}
+              />
+            </div>
+            <div>
+              <label class='mb-1.5 block text-xs font-medium tracking-wide text-slate-500 uppercase'>
+                Department
+              </label>
+              <input
+                type='text'
+                value={editDepartment()}
+                onInput={e => setEditDepartment(e.target.value)}
+                class='block w-full max-w-md rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm shadow-sm transition-colors focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 focus:outline-none'
+                placeholder='Department or faculty'
+                maxLength={200}
+              />
+            </div>
+            <div class='flex gap-2 pt-1'>
+              <button
+                onClick={saveAcademic}
+                disabled={saving()}
+                class='rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm transition-all hover:bg-blue-700 hover:shadow disabled:opacity-50'
+              >
+                Save
+              </button>
+              <button
+                onClick={cancelEditingAcademic}
+                disabled={saving()}
+                class='rounded-lg bg-slate-100 px-4 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-200 disabled:opacity-50'
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        </Show>
+      </div>
+      <Show when={!isEditingAcademic()}>
+        <button
+          onClick={startEditingAcademic}
+          class='text-sm font-medium text-blue-600 transition-colors hover:text-blue-700'
+        >
+          Edit
+        </button>
+      </Show>
+    </div>
+  );
+}
diff --git a/packages/web/src/components/settings/pages/DeleteAccountSection.jsx b/packages/web/src/components/settings/pages/DeleteAccountSection.jsx
new file mode 100644
index 000000000..c7946206d
--- /dev/null
+++ b/packages/web/src/components/settings/pages/DeleteAccountSection.jsx
@@ -0,0 +1,109 @@
+/**
+ * DeleteAccountSection - Danger zone with account deletion confirmation
+ */
+
+import { createSignal, Show } from 'solid-js';
+import { useBetterAuth } from '@api/better-auth-store.js';
+import { showToast } from '@/components/ui/toast';
+import { LANDING_URL } from '@config/api.js';
+
+export default function DeleteAccountSection() {
+  const auth = useBetterAuth();
+  const user = () => auth.user();
+
+  const [showDeleteConfirm, setShowDeleteConfirm] = createSignal(false);
+  const [deleteConfirmText, setDeleteConfirmText] = createSignal('');
+  const [deletingAccount, setDeletingAccount] = createSignal(false);
+
+  const handleDeleteAccount = async () => {
+    if (deleteConfirmText() !== 'DELETE') {
+      showToast.error('Confirmation Required', 'Please type DELETE to confirm.');
+      return;
+    }
+
+    setDeletingAccount(true);
+
+    try {
+      await auth.deleteAccount();
+      showToast.success('Account Deleted', 'Your account has been deleted.');
+      window.location.href = LANDING_URL;
+    } catch (err) {
+      const { handleError } = await import('@/lib/error-utils.js');
+      await handleError(err, { toastTitle: 'Delete Failed' });
+      setDeletingAccount(false);
+    }
+  };
+
+  return (
+    <Show when={user()}>
+      <div class='rounded-xl border border-red-200/60 bg-red-50/30 p-5'>
+        <Show
+          when={showDeleteConfirm()}
+          fallback={
+            <div class='flex items-center justify-between'>
+              <div>
+                <h3 class='font-medium text-slate-900'>Delete Account</h3>
+                <p class='mt-0.5 text-sm text-slate-600'>
+                  Permanently delete your account and all associated data
+                </p>
+              </div>
+              <button
+                onClick={() => setShowDeleteConfirm(true)}
+                class='rounded-lg border border-red-200 bg-white px-4 py-2 text-sm font-medium text-red-600 shadow-sm transition-all hover:bg-red-50 hover:shadow'
+              >
+                Delete Account
+              </button>
+            </div>
+          }
+        >
+          <div class='space-y-4'>
+            <div class='rounded-lg border border-red-200 bg-red-100/80 p-4'>
+              <p class='mb-2 text-sm font-medium text-red-800'>
+                Are you sure you want to delete your account?
+              </p>
+              <ul class='list-inside list-disc space-y-1 text-sm text-red-700'>
+                <li>All your projects will be permanently deleted</li>
+                <li>All your checklists and reviews will be lost</li>
+                <li>You will be removed from all shared projects</li>
+                <li>This action cannot be undone</li>
+              </ul>
+            </div>
+
+            <div>
+              <label class='mb-1.5 block text-sm font-medium text-slate-700'>
+                Type <span class='font-mono font-semibold text-red-600'>DELETE</span> to confirm
+              </label>
+              <input
+                type='text'
+                value={deleteConfirmText()}
+                onInput={e => setDeleteConfirmText(e.target.value)}
+                class='block w-full max-w-xs rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm shadow-sm transition-colors focus:border-red-500 focus:ring-2 focus:ring-red-500/20 focus:outline-none'
+                placeholder='DELETE'
+              />
+            </div>
+
+            <div class='flex gap-2'>
+              <button
+                onClick={handleDeleteAccount}
+                disabled={deletingAccount() || deleteConfirmText() !== 'DELETE'}
+                class='rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white shadow-sm transition-all hover:bg-red-700 hover:shadow disabled:cursor-not-allowed disabled:opacity-50'
+              >
+                {deletingAccount() ? 'Deleting...' : 'Permanently Delete Account'}
+              </button>
+              <button
+                type='button'
+                onClick={() => {
+                  setShowDeleteConfirm(false);
+                  setDeleteConfirmText('');
+                }}
+                class='rounded-lg bg-slate-100 px-4 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-200'
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        </Show>
+      </div>
+    </Show>
+  );
+}
diff --git a/packages/web/src/components/settings/pages/GeneralSettings.jsx b/packages/web/src/components/settings/pages/GeneralSettings.jsx
deleted file mode 100644
index d9876740d..000000000
--- a/packages/web/src/components/settings/pages/GeneralSettings.jsx
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * GeneralSettings - General/About section extracted from SettingsPage
- * Includes: Integrations (Google Drive), About info
- */
-
-import { FiLink, FiInfo } from 'solid-icons/fi';
-import { LANDING_URL } from '@config/api.js';
-import GoogleDriveSettings from '@/components/settings/pages/GoogleDriveSettings.jsx';
-
-export default function GeneralSettings() {
-  return (
-    <div class='min-h-full bg-blue-50 py-6'>
-      <div class='mx-auto max-w-3xl px-4 sm:px-6'>
-        <h1 class='mb-6 text-2xl font-bold text-gray-900'>General</h1>
-
-        {/* Integrations Section */}
-        <div class='mb-6 overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm'>
-          <div class='border-b border-gray-200 bg-gray-50 px-6 py-4'>
-            <div class='flex items-center space-x-2'>
-              <FiLink class='h-5 w-5 text-gray-600' />
-              <h2 class='text-lg font-medium text-gray-900'>Integrations</h2>
-            </div>
-            <p class='mt-1 text-sm text-gray-500'>
-              Connect third-party services to enhance your workflow
-            </p>
-          </div>
-          <div class='p-6'>
-            <GoogleDriveSettings />
-          </div>
-        </div>
-
-        {/* About Section */}
-        <div class='overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm'>
-          <div class='border-b border-gray-200 bg-gray-50 px-6 py-4'>
-            <div class='flex items-center space-x-2'>
-              <FiInfo class='h-5 w-5 text-gray-600' />
-              <h2 class='text-lg font-medium text-gray-900'>About</h2>
-            </div>
-          </div>
-          <div class='p-6'>
-            <div class='space-y-2 text-sm text-gray-600'>
-              <p>
-                <span class='font-medium text-gray-900'>CoRATES</span> - Collaborative Research
-                Appraisal Tool for Evidence Synthesis
-              </p>
-              <p>Version 1.0.0</p>
-              <p class='pt-2'>
-                <a href={LANDING_URL} class='text-blue-600 hover:underline'>
-                  Visit our website
-                </a>
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/packages/web/src/components/settings/pages/IntegrationsSettings.jsx b/packages/web/src/components/settings/pages/IntegrationsSettings.jsx
new file mode 100644
index 000000000..5bef94ca2
--- /dev/null
+++ b/packages/web/src/components/settings/pages/IntegrationsSettings.jsx
@@ -0,0 +1,70 @@
+/**
+ * IntegrationsSettings - Third-party integrations and about section
+ * Includes: Google Drive, About info
+ */
+
+import { FiLink, FiInfo } from 'solid-icons/fi';
+import { LANDING_URL } from '@config/api.js';
+import GoogleDriveSettings from '@/components/settings/pages/GoogleDriveSettings.jsx';
+
+export default function IntegrationsSettings() {
+  return (
+    <div class='min-h-full bg-gradient-to-br from-slate-50 to-slate-100/80 py-8'>
+      <div class='mx-auto max-w-3xl px-4 sm:px-6'>
+        <div class='mb-8'>
+          <h1 class='text-2xl font-semibold tracking-tight text-slate-900'>Integrations</h1>
+          <p class='mt-1 text-slate-500'>Connect third-party services to enhance your workflow</p>
+        </div>
+
+        {/* Google Drive Section */}
+        <div class='mb-6 overflow-hidden rounded-xl border border-slate-200/60 bg-white shadow-sm transition-shadow duration-200 hover:shadow-md'>
+          <div class='border-b border-slate-100 bg-gradient-to-r from-slate-50 to-white px-6 py-4'>
+            <div class='flex items-center space-x-2.5'>
+              <div class='flex h-8 w-8 items-center justify-center rounded-lg bg-blue-50'>
+                <FiLink class='h-4 w-4 text-blue-600' />
+              </div>
+              <div>
+                <h2 class='text-base font-semibold text-slate-900'>Cloud Storage</h2>
+                <p class='text-sm text-slate-500'>
+                  Import PDFs directly from cloud storage providers
+                </p>
+              </div>
+            </div>
+          </div>
+          <div class='p-6'>
+            <GoogleDriveSettings />
+          </div>
+        </div>
+
+        {/* About Section */}
+        <div class='overflow-hidden rounded-xl border border-slate-200/60 bg-white shadow-sm transition-shadow duration-200 hover:shadow-md'>
+          <div class='border-b border-slate-100 bg-gradient-to-r from-slate-50 to-white px-6 py-4'>
+            <div class='flex items-center space-x-2.5'>
+              <div class='flex h-8 w-8 items-center justify-center rounded-lg bg-slate-100'>
+                <FiInfo class='h-4 w-4 text-slate-600' />
+              </div>
+              <h2 class='text-base font-semibold text-slate-900'>About</h2>
+            </div>
+          </div>
+          <div class='p-6'>
+            <div class='space-y-2 text-sm text-slate-600'>
+              <p>
+                <span class='font-medium text-slate-900'>CoRATES</span> - Collaborative Research
+                Appraisal Tool for Evidence Synthesis
+              </p>
+              <p class='text-slate-500'>Version 1.0.0</p>
+              <p class='pt-2'>
+                <a
+                  href={LANDING_URL}
+                  class='text-blue-600 transition-colors hover:text-blue-700 hover:underline'
+                >
+                  Visit our website
+                </a>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/web/src/components/settings/pages/NotificationsSettings.jsx b/packages/web/src/components/settings/pages/NotificationsSettings.jsx
index aa521915e..1b3c02ef2 100644
--- a/packages/web/src/components/settings/pages/NotificationsSettings.jsx
+++ b/packages/web/src/components/settings/pages/NotificationsSettings.jsx
@@ -15,23 +15,30 @@ export default function NotificationsSettings() {
   const [darkMode, setDarkMode] = createSignal(false);
 
   return (
-    <div class='min-h-full bg-blue-50 py-6'>
+    <div class='min-h-full bg-gradient-to-br from-slate-50 to-slate-100/80 py-8'>
       <div class='mx-auto max-w-3xl px-4 sm:px-6'>
-        <h1 class='mb-6 text-2xl font-bold text-gray-900'>Notifications</h1>
+        <div class='mb-8'>
+          <h1 class='text-2xl font-semibold tracking-tight text-slate-900'>Notifications</h1>
+          <p class='mt-1 text-slate-500'>Configure how you want to receive updates</p>
+        </div>
 
         {/* Notifications Section */}
-        <div class='mb-6 overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm'>
-          <div class='border-b border-gray-200 bg-gray-50 px-6 py-4'>
-            <div class='flex items-center space-x-2'>
-              <FiBell class='h-5 w-5 text-gray-600' />
-              <h2 class='text-lg font-medium text-gray-900'>Email Notifications</h2>
+        <div class='mb-6 overflow-hidden rounded-xl border border-slate-200/60 bg-white shadow-sm transition-shadow duration-200 hover:shadow-md'>
+          <div class='border-b border-slate-100 bg-gradient-to-r from-slate-50 to-white px-6 py-4'>
+            <div class='flex items-center space-x-2.5'>
+              <div class='flex h-8 w-8 items-center justify-center rounded-lg bg-blue-50'>
+                <FiBell class='h-4 w-4 text-blue-600' />
+              </div>
+              <h2 class='text-base font-semibold text-slate-900'>Email Notifications</h2>
             </div>
           </div>
-          <div class='space-y-4 p-6'>
-            <div class='flex items-center justify-between'>
+          <div class='divide-y divide-slate-100 p-6'>
+            <div class='flex items-center justify-between pb-4'>
               <div>
-                <p class='font-medium text-gray-900'>Email Notifications</p>
-                <p class='text-sm text-gray-500'>Receive email notifications about your account.</p>
+                <p class='font-medium text-slate-900'>Email Notifications</p>
+                <p class='text-sm text-slate-500'>
+                  Receive email notifications about your account.
+                </p>
               </div>
               <SwitchRoot checked={emailNotifications()} onCheckedChange={setEmailNotifications}>
                 <SwitchControl>
@@ -40,10 +47,10 @@ export default function NotificationsSettings() {
                 <SwitchHiddenInput />
               </SwitchRoot>
             </div>
-            <div class='flex items-center justify-between'>
+            <div class='flex items-center justify-between pt-4'>
               <div>
-                <p class='font-medium text-gray-900'>Project Updates</p>
-                <p class='text-sm text-gray-500'>
+                <p class='font-medium text-slate-900'>Project Updates</p>
+                <p class='text-sm text-slate-500'>
                   Get notified when collaborators make changes to your projects.
                 </p>
               </div>
@@ -58,18 +65,20 @@ export default function NotificationsSettings() {
         </div>
 
         {/* Appearance Section */}
-        <div class='mb-6 overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm'>
-          <div class='border-b border-gray-200 bg-gray-50 px-6 py-4'>
-            <div class='flex items-center space-x-2'>
-              <FiMoon class='h-5 w-5 text-gray-600' />
-              <h2 class='text-lg font-medium text-gray-900'>Appearance</h2>
+        <div class='mb-6 overflow-hidden rounded-xl border border-slate-200/60 bg-white shadow-sm transition-shadow duration-200 hover:shadow-md'>
+          <div class='border-b border-slate-100 bg-gradient-to-r from-slate-50 to-white px-6 py-4'>
+            <div class='flex items-center space-x-2.5'>
+              <div class='flex h-8 w-8 items-center justify-center rounded-lg bg-slate-100'>
+                <FiMoon class='h-4 w-4 text-slate-600' />
+              </div>
+              <h2 class='text-base font-semibold text-slate-900'>Appearance</h2>
             </div>
           </div>
           <div class='p-6'>
             <div class='flex items-center justify-between'>
               <div>
-                <p class='font-medium text-gray-900'>Dark Mode</p>
-                <p class='text-sm text-gray-500'>Use dark theme across the application.</p>
+                <p class='font-medium text-slate-900'>Dark Mode</p>
+                <p class='text-sm text-slate-500'>Use dark theme across the application.</p>
               </div>
               <SwitchRoot checked={darkMode()} onCheckedChange={setDarkMode} disabled>
                 <SwitchControl>
diff --git a/packages/web/src/components/settings/pages/PersonaSection.jsx b/packages/web/src/components/settings/pages/PersonaSection.jsx
new file mode 100644
index 000000000..d3981b3f6
--- /dev/null
+++ b/packages/web/src/components/settings/pages/PersonaSection.jsx
@@ -0,0 +1,152 @@
+/**
+ * PersonaSection - Persona/role selection for user profile
+ */
+
+import { createSignal, Show, For } from 'solid-js';
+import { useBetterAuth } from '@api/better-auth-store.js';
+import { showToast } from '@/components/ui/toast';
+import { ROLES, getRoleLabel } from '@/components/auth/RoleSelector.jsx';
+import { API_BASE } from '@config/api.js';
+import {
+  Select,
+  SelectControl,
+  SelectTrigger,
+  SelectValueText,
+  SelectIndicator,
+  SelectPositioner,
+  SelectContent,
+  SelectItem,
+  SelectItemText,
+  SelectItemIndicator,
+  createListCollection,
+} from '@/components/ui/select';
+
+/**
+ * Sync profile changes to all projects the user is a member of
+ */
+async function syncProfileToProjects() {
+  try {
+    await fetch(`${API_BASE}/api/users/sync-profile`, {
+      method: 'POST',
+      credentials: 'include',
+    });
+  } catch (err) {
+    console.error('Failed to sync profile to projects:', err);
+  }
+}
+
+const personaCollection = createListCollection({
+  items: ROLES,
+  itemToString: item => item.label,
+  itemToValue: item => item.id,
+});
+
+export default function PersonaSection() {
+  const auth = useBetterAuth();
+  const user = () => auth.user();
+
+  const [isEditingRole, setIsEditingRole] = createSignal(false);
+  const [editRoleSelection, setEditRoleSelection] = createSignal([]);
+  const [saving, setSaving] = createSignal(false);
+
+  const startEditingRole = () => {
+    const currentPersona = user()?.persona || '';
+    setEditRoleSelection(currentPersona ? [currentPersona] : []);
+    setIsEditingRole(true);
+  };
+
+  const cancelEditingRole = () => {
+    setIsEditingRole(false);
+    setEditRoleSelection([]);
+  };
+
+  const saveRole = async () => {
+    setSaving(true);
+    try {
+      const selectedPersona = editRoleSelection()[0] || null;
+      await auth.updateProfile({ persona: selectedPersona });
+      syncProfileToProjects();
+      showToast.success('Profile Updated', 'Your persona has been updated successfully.');
+      setIsEditingRole(false);
+    } catch (err) {
+      console.warn('Failed to update profile persona:', err.message);
+      showToast.error('Update Failed', 'Failed to update persona. Please try again.');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div class='flex items-start justify-between border-t border-slate-100 py-5'>
+      <div class='flex-1'>
+        <label class='mb-1 block text-xs font-medium tracking-wide text-slate-400 uppercase'>
+          Persona
+        </label>
+        <Show
+          when={isEditingRole()}
+          fallback={
+            <div class='mt-2 flex items-baseline gap-2'>
+              <span class='text-slate-900'>
+                {user()?.persona ?
+                  getRoleLabel(user()?.persona)
+                : <span class='text-slate-400'>Not set</span>}
+              </span>
+            </div>
+          }
+        >
+          <div class='mt-3 space-y-4'>
+            <Select
+              collection={personaCollection}
+              value={editRoleSelection()}
+              onValueChange={details => setEditRoleSelection(details.value)}
+              class='max-w-xs'
+            >
+              <SelectControl>
+                <SelectTrigger>
+                  <SelectValueText placeholder='Select a persona' />
+                  <SelectIndicator />
+                </SelectTrigger>
+              </SelectControl>
+              <SelectPositioner>
+                <SelectContent>
+                  <For each={ROLES}>
+                    {role => (
+                      <SelectItem item={role}>
+                        <SelectItemText>{role.label}</SelectItemText>
+                        <SelectItemIndicator />
+                      </SelectItem>
+                    )}
+                  </For>
+                </SelectContent>
+              </SelectPositioner>
+            </Select>
+            <div class='flex gap-2 pt-1'>
+              <button
+                onClick={saveRole}
+                disabled={saving()}
+                class='rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm transition-all hover:bg-blue-700 hover:shadow disabled:opacity-50'
+              >
+                Save
+              </button>
+              <button
+                onClick={cancelEditingRole}
+                disabled={saving()}
+                class='rounded-lg bg-slate-100 px-4 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-200 disabled:opacity-50'
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        </Show>
+      </div>
+      <Show when={!isEditingRole()}>
+        <button
+          onClick={startEditingRole}
+          class='text-sm font-medium text-blue-600 transition-colors hover:text-blue-700'
+        >
+          Edit
+        </button>
+      </Show>
+    </div>
+  );
+}
diff --git a/packages/web/src/components/settings/pages/PlansSettings.jsx b/packages/web/src/components/settings/pages/PlansSettings.jsx
index 145fa8440..90f4146bb 100644
--- a/packages/web/src/components/settings/pages/PlansSettings.jsx
+++ b/packages/web/src/components/settings/pages/PlansSettings.jsx
@@ -5,7 +5,7 @@
  */
 
 import { For, createSignal } from 'solid-js';
-import { FiShield, FiClock, FiHelpCircle, FiChevronDown } from 'solid-icons/fi';
+import { FiChevronDown } from 'solid-icons/fi';
 import { useSubscription } from '@/primitives/useSubscription.js';
 import PricingTable from '@/components/billing/PricingTable.jsx';
 import { LANDING_URL } from '@/config/api.js';
@@ -37,23 +37,6 @@ function FAQItem(props) {
   );
 }
 
-/**
- * Trust signal badge
- */
-function TrustBadge(props) {
-  return (
-    <div class='flex items-center gap-3 rounded-lg bg-gray-50 px-4 py-3'>
-      <div class='flex h-10 w-10 items-center justify-center rounded-full bg-white shadow-sm'>
-        {props.icon}
-      </div>
-      <div>
-        <p class='font-medium text-gray-900'>{props.title}</p>
-        <p class='text-sm text-gray-500'>{props.subtitle}</p>
-      </div>
-    </div>
-  );
-}
-
 const FAQ_ITEMS = [
   {
     question: 'Can I switch plans at any time?',
@@ -107,25 +90,6 @@ export default function PlansSettings() {
           </div>
         </div>
 
-        {/* Trust signals */}
-        <div class='mb-10 grid grid-cols-1 gap-4 sm:grid-cols-3'>
-          <TrustBadge
-            icon={<FiShield class='h-5 w-5 text-green-600' />}
-            title='Secure payments'
-            subtitle='Powered by Stripe'
-          />
-          <TrustBadge
-            icon={<FiClock class='h-5 w-5 text-blue-600' />}
-            title='14-day free trial'
-            subtitle='No credit card required'
-          />
-          <TrustBadge
-            icon={<FiHelpCircle class='h-5 w-5 text-gray-600' />}
-            title='Cancel anytime'
-            subtitle='No questions asked'
-          />
-        </div>
-
         {/* Plan Comparison Table */}
         <PricingTable currentTier={tier()} />
 
diff --git a/packages/web/src/components/settings/pages/ProfileInfoSection.jsx b/packages/web/src/components/settings/pages/ProfileInfoSection.jsx
new file mode 100644
index 000000000..c75bb6d1b
--- /dev/null
+++ b/packages/web/src/components/settings/pages/ProfileInfoSection.jsx
@@ -0,0 +1,261 @@
+/**
+ * ProfileInfoSection - Avatar, name, email, and member since fields
+ * Handles avatar upload with compression and optimistic updates
+ */
+
+import { createSignal, Show } from 'solid-js';
+import { useBetterAuth } from '@api/better-auth-store.js';
+import { FiCamera, FiCheck } from 'solid-icons/fi';
+import { showToast } from '@/components/ui/toast';
+import { SimpleEditable } from '@/components/ui/editable';
+import { API_BASE } from '@config/api.js';
+import { compressImageFile } from '@lib/imageUtils.js';
+
+const ALLOWED_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
+const AVATAR_MAX_SIZE = 256;
+const AVATAR_QUALITY = 0.85;
+
+/**
+ * Sync profile changes to all projects the user is a member of
+ */
+async function syncProfileToProjects() {
+  try {
+    await fetch(`${API_BASE}/api/users/sync-profile`, {
+      method: 'POST',
+      credentials: 'include',
+    });
+  } catch (err) {
+    console.error('Failed to sync profile to projects:', err);
+  }
+}
+
+export default function ProfileInfoSection() {
+  const auth = useBetterAuth();
+  const user = () => auth.user();
+
+  // Avatar state
+  const [uploadingImage, setUploadingImage] = createSignal(false);
+  const [optimisticImage, setOptimisticImage] = createSignal(null);
+  let fileInputRef;
+
+  const avatarUrl = () => optimisticImage() || user()?.image || null;
+
+  const firstName = () => {
+    const name = user()?.name || '';
+    const parts = name.split(' ');
+    return parts[0] || '';
+  };
+
+  const lastName = () => {
+    const name = user()?.name || '';
+    const parts = name.split(' ');
+    return parts.slice(1).join(' ') || '';
+  };
+
+  const userInitials = () => {
+    const first = firstName();
+    const last = lastName();
+    if (first && last) {
+      return `${first.charAt(0)}${last.charAt(0)}`.toUpperCase();
+    }
+    return (first || user()?.email || 'U').charAt(0).toUpperCase();
+  };
+
+  const formatDate = dateString => {
+    if (!dateString) return 'N/A';
+    return new Date(dateString).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    });
+  };
+
+  const handleFirstNameChange = async newFirstName => {
+    const trimmed = newFirstName?.trim() || '';
+    if (trimmed === firstName()) return;
+
+    const fullName = `${trimmed} ${lastName()}`.trim();
+    try {
+      await auth.updateProfile({ name: fullName });
+      syncProfileToProjects();
+    } catch (err) {
+      console.warn('Failed to update first name:', err.message);
+      showToast.error('Update Failed', 'Failed to update name. Please try again.');
+    }
+  };
+
+  const handleLastNameChange = async newLastName => {
+    const trimmed = newLastName?.trim() || '';
+    if (trimmed === lastName()) return;
+
+    const fullName = `${firstName()} ${trimmed}`.trim();
+    try {
+      await auth.updateProfile({ name: fullName });
+      syncProfileToProjects();
+    } catch (err) {
+      console.warn('Failed to update last name:', err.message);
+      showToast.error('Update Failed', 'Failed to update name. Please try again.');
+    }
+  };
+
+  const handleImageSelect = async event => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    if (!ALLOWED_TYPES.includes(file.type)) {
+      showToast.error('Invalid File', 'Please select a JPEG, PNG, GIF, or WebP image.');
+      return;
+    }
+
+    setUploadingImage(true);
+    let localUrl = null;
+
+    try {
+      const compressedFile = await compressImageFile(file, {
+        maxSize: AVATAR_MAX_SIZE,
+        quality: AVATAR_QUALITY,
+      });
+      console.info(
+        `Image compressed: ${(file.size / 1024).toFixed(1)}KB -> ${(compressedFile.size / 1024).toFixed(1)}KB`,
+      );
+
+      localUrl = URL.createObjectURL(compressedFile);
+      setOptimisticImage(localUrl);
+
+      const formData = new FormData();
+      formData.append('avatar', compressedFile);
+
+      const response = await fetch(`${API_BASE}/api/users/avatar`, {
+        method: 'POST',
+        body: formData,
+        credentials: 'include',
+      });
+
+      if (!response.ok) {
+        const error = await response.json().catch(() => ({}));
+        throw new Error(error.message || 'Upload failed');
+      }
+
+      const { url } = await response.json();
+      await auth.updateProfile({ image: url });
+      syncProfileToProjects();
+      setOptimisticImage(null);
+      showToast.success('Photo Updated', 'Your profile photo has been updated.');
+    } catch (err) {
+      setOptimisticImage(null);
+      const { handleError } = await import('@/lib/error-utils.js');
+      await handleError(err, { toastTitle: 'Upload Failed' });
+    } finally {
+      setUploadingImage(false);
+      // Revoke object URL to prevent memory leak
+      if (localUrl) {
+        URL.revokeObjectURL(localUrl);
+      }
+      // Reset file input so same file can be selected again
+      if (event.target) {
+        event.target.value = '';
+      }
+    }
+  };
+
+  const triggerFileSelect = () => {
+    fileInputRef?.click();
+  };
+
+  return (
+    <div class='space-y-6'>
+      {/* Avatar and Name Row */}
+      <div class='flex items-center gap-6'>
+        {/* Avatar */}
+        <div class='group relative shrink-0'>
+          <Show
+            when={avatarUrl()}
+            fallback={
+              <div class='flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-blue-500 to-blue-600 text-xl font-semibold text-white shadow-md'>
+                {userInitials()}
+              </div>
+            }
+          >
+            <img
+              src={avatarUrl()}
+              alt={user()?.name || 'Profile'}
+              class='h-20 w-20 rounded-full object-cover shadow-md ring-2 ring-white'
+              referrerPolicy='no-referrer'
+            />
+          </Show>
+          <button
+            onClick={triggerFileSelect}
+            disabled={uploadingImage()}
+            class='absolute inset-0 flex cursor-pointer items-center justify-center rounded-full bg-slate-900/60 opacity-0 backdrop-blur-sm transition-all duration-200 group-hover:opacity-100 disabled:cursor-wait'
+            title='Change profile photo'
+          >
+            <Show
+              when={!uploadingImage()}
+              fallback={
+                <div class='h-5 w-5 animate-spin rounded-full border-2 border-white border-t-transparent' />
+              }
+            >
+              <FiCamera class='h-5 w-5 text-white' />
+            </Show>
+          </button>
+          <input
+            ref={fileInputRef}
+            type='file'
+            accept='image/jpeg,image/png,image/gif,image/webp'
+            class='hidden'
+            onChange={handleImageSelect}
+          />
+        </div>
+
+        {/* Name Fields - Inline Editable */}
+        <div class='min-w-0 flex-1'>
+          <div class='grid grid-cols-2 gap-4'>
+            <div>
+              <label class='mb-1 block text-xs font-medium tracking-wide text-slate-400 uppercase'>
+                First Name
+              </label>
+              <SimpleEditable
+                activationMode='click'
+                value={firstName() || 'Add first name'}
+                onSubmit={handleFirstNameChange}
+                showEditIcon={true}
+                placeholder='First name'
+                class='text-lg font-medium text-slate-900'
+              />
+            </div>
+            <div>
+              <label class='mb-1 block text-xs font-medium tracking-wide text-slate-400 uppercase'>
+                Last Name
+              </label>
+              <SimpleEditable
+                activationMode='click'
+                value={lastName() || 'Add last name'}
+                onSubmit={handleLastNameChange}
+                showEditIcon={true}
+                placeholder='Last name'
+                class='text-lg font-medium text-slate-900'
+              />
+            </div>
+          </div>
+          <div class='mt-3 flex items-center gap-2'>
+            <p class='text-sm text-slate-500'>{user()?.email}</p>
+            <Show when={user()?.emailVerified}>
+              <span class='inline-flex items-center gap-1 rounded-full bg-emerald-50 px-1.5 py-0.5 text-xs font-medium text-emerald-700 ring-1 ring-emerald-600/10'>
+                <FiCheck class='h-3 w-3' />
+                Verified
+              </span>
+            </Show>
+          </div>
+        </div>
+      </div>
+
+      {/* Member Since */}
+      <div class='border-t border-slate-100 pt-5'>
+        <label class='mb-1 block text-xs font-medium tracking-wide text-slate-400 uppercase'>
+          Member Since
+        </label>
+        <p class='text-slate-900'>{formatDate(user()?.createdAt)}</p>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/web/src/components/settings/pages/ProfileSettings.jsx b/packages/web/src/components/settings/pages/ProfileSettings.jsx
new file mode 100644
index 000000000..5f2384b4c
--- /dev/null
+++ b/packages/web/src/components/settings/pages/ProfileSettings.jsx
@@ -0,0 +1,60 @@
+/**
+ * ProfileSettings - Combined profile management page in settings
+ * Includes: Profile info (avatar, name, email), persona, academic info, account deletion
+ */
+
+import { FiUser, FiAlertTriangle } from 'solid-icons/fi';
+import ProfileInfoSection from '@/components/settings/pages/ProfileInfoSection.jsx';
+import PersonaSection from '@/components/settings/pages/PersonaSection.jsx';
+import AcademicInfoSection from '@/components/settings/pages/AcademicInfoSection.jsx';
+import DeleteAccountSection from '@/components/settings/pages/DeleteAccountSection.jsx';
+
+export default function ProfileSettings() {
+  return (
+    <div class='min-h-full bg-gradient-to-br from-slate-50 to-slate-100/80 py-8'>
+      <div class='mx-auto max-w-3xl px-4 sm:px-6'>
+        <div class='mb-8'>
+          <h1 class='text-2xl font-semibold tracking-tight text-slate-900'>Profile</h1>
+          <p class='mt-1 text-slate-500'>Manage your personal information</p>
+        </div>
+
+        {/* Profile Information Card */}
+        <div class='mb-6 overflow-hidden rounded-xl border border-slate-200/60 bg-white shadow-sm transition-shadow duration-200 hover:shadow-md'>
+          <div class='border-b border-slate-100 bg-gradient-to-r from-slate-50 to-white px-6 py-4'>
+            <div class='flex items-center space-x-2.5'>
+              <div class='flex h-8 w-8 items-center justify-center rounded-lg bg-blue-50'>
+                <FiUser class='h-4 w-4 text-blue-600' />
+              </div>
+              <div>
+                <h2 class='text-base font-semibold text-slate-900'>Personal Information</h2>
+                <p class='text-sm text-slate-500'>
+                  Your profile information visible to project collaborators
+                </p>
+              </div>
+            </div>
+          </div>
+          <div class='p-6'>
+            <ProfileInfoSection />
+            <PersonaSection />
+            <AcademicInfoSection />
+          </div>
+        </div>
+
+        {/* Danger Zone Card */}
+        <div class='overflow-hidden rounded-xl border border-red-200/60 bg-white shadow-sm'>
+          <div class='border-b border-red-100 bg-gradient-to-r from-red-50/50 to-white px-6 py-4'>
+            <div class='flex items-center space-x-2.5'>
+              <div class='flex h-8 w-8 items-center justify-center rounded-lg bg-red-50'>
+                <FiAlertTriangle class='h-4 w-4 text-red-600' />
+              </div>
+              <h2 class='text-base font-semibold text-slate-900'>Danger Zone</h2>
+            </div>
+          </div>
+          <div class='p-6'>
+            <DeleteAccountSection />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/web/src/components/settings/pages/SecuritySettings.jsx b/packages/web/src/components/settings/pages/SecuritySettings.jsx
index 64318ad9d..f7abc7629 100644
--- a/packages/web/src/components/settings/pages/SecuritySettings.jsx
+++ b/packages/web/src/components/settings/pages/SecuritySettings.jsx
@@ -67,9 +67,12 @@ export default function SecuritySettings() {
   };
 
   return (
-    <div class='min-h-full bg-blue-50 py-6'>
+    <div class='min-h-full bg-gradient-to-br from-slate-50 to-slate-100/80 py-8'>
       <div class='mx-auto max-w-3xl px-4 sm:px-6'>
-        <h1 class='mb-6 text-2xl font-bold text-gray-900'>Security</h1>
+        <div class='mb-8'>
+          <h1 class='text-2xl font-semibold tracking-tight text-slate-900'>Security</h1>
+          <p class='mt-1 text-slate-500'>Manage your account security and authentication</p>
+        </div>
 
         {/* Linked Accounts Section */}
         <LinkedAccountsSection />
@@ -77,35 +80,40 @@ export default function SecuritySettings() {
         {/* Password & 2FA Section */}
         <div
           data-section='security'
-          class='mb-6 overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm'
+          class='mb-6 overflow-hidden rounded-xl border border-slate-200/60 bg-white shadow-sm transition-shadow duration-200 hover:shadow-md'
         >
-          <div class='border-b border-gray-200 bg-gray-50 px-6 py-4'>
-            <div class='flex items-center space-x-2'>
-              <FiShield class='h-5 w-5 text-gray-600' />
-              <h2 class='text-lg font-medium text-gray-900'>Password & Authentication</h2>
+          <div class='border-b border-slate-100 bg-gradient-to-r from-slate-50 to-white px-6 py-4'>
+            <div class='flex items-center space-x-2.5'>
+              <div class='flex h-8 w-8 items-center justify-center rounded-lg bg-blue-50'>
+                <FiShield class='h-4 w-4 text-blue-600' />
+              </div>
+              <h2 class='text-base font-semibold text-slate-900'>Password & Authentication</h2>
             </div>
           </div>
           <div class='space-y-6 p-6'>
             <Show when={passwordSuccess()}>
-              <div class='rounded-md border border-green-200 bg-green-50 p-3 text-sm text-green-700'>
+              <div class='rounded-lg border border-emerald-200 bg-emerald-50 p-3 text-sm text-emerald-700'>
                 {passwordSuccess()}
               </div>
             </Show>
 
             {/* Add Password Option - for users who signed up via magic link or OAuth */}
             <Show when={addPasswordSent()}>
-              <div class='rounded-lg border border-blue-200 bg-blue-50 p-4'>
+              <div class='rounded-lg border border-blue-200/60 bg-blue-50/50 p-4'>
                 <div class='flex items-start space-x-3'>
-                  <FiMail class='mt-0.5 h-5 w-5 text-blue-600' />
+                  <div class='flex h-8 w-8 items-center justify-center rounded-lg bg-blue-100'>
+                    <FiMail class='h-4 w-4 text-blue-600' />
+                  </div>
                   <div>
-                    <p class='font-medium text-blue-900'>Check your email</p>
-                    <p class='mt-1 text-sm text-blue-700'>
-                      We sent a link to <strong>{user()?.email}</strong> to set your password.
+                    <p class='font-medium text-slate-900'>Check your email</p>
+                    <p class='mt-1 text-sm text-slate-600'>
+                      We sent a link to <strong class='text-slate-900'>{user()?.email}</strong> to
+                      set your password.
                     </p>
                     <button
                       type='button'
                       onClick={() => setAddPasswordSent(false)}
-                      class='mt-2 text-sm font-medium text-blue-600 hover:text-blue-800'
+                      class='mt-2 text-sm font-medium text-blue-600 transition-colors hover:text-blue-700'
                     >
                       Dismiss
                     </button>
@@ -117,11 +125,11 @@ export default function SecuritySettings() {
             <Show when={!addPasswordSent()}>
               <div class='flex items-center justify-between'>
                 <div>
-                  <p class='font-medium text-gray-900'>Add Password</p>
-                  <p class='text-sm text-gray-500'>
+                  <p class='font-medium text-slate-900'>Add Password</p>
+                  <p class='text-sm text-slate-500'>
                     Set a password to sign in without email links.
                   </p>
-                  <p class='text-sm text-gray-500'>
+                  <p class='text-sm text-slate-500'>
                     A password is required for Two-Factor Authentication.
                   </p>
                 </div>
@@ -140,7 +148,7 @@ export default function SecuritySettings() {
                     }
                   }}
                   disabled={addPasswordLoading()}
-                  class='flex items-center space-x-2 rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:outline-none disabled:opacity-50'
+                  class='flex items-center space-x-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm transition-all hover:bg-blue-700 hover:shadow focus:ring-2 focus:ring-blue-500/20 focus:outline-none disabled:opacity-50'
                 >
                   <FiMail class='h-4 w-4' />
                   <span>{addPasswordLoading() ? 'Sending...' : 'Send Setup Email'}</span>
@@ -149,7 +157,7 @@ export default function SecuritySettings() {
             </Show>
 
             {/* Divider */}
-            <div class='border-t border-gray-200' />
+            <div class='border-t border-slate-100' />
 
             {/* Change Password Option - for users who already have a password */}
             <Show
@@ -157,12 +165,12 @@ export default function SecuritySettings() {
               fallback={
                 <div class='flex items-center justify-between'>
                   <div>
-                    <p class='font-medium text-gray-900'>Change Password</p>
-                    <p class='text-sm text-gray-500'>Update your existing password.</p>
+                    <p class='font-medium text-slate-900'>Change Password</p>
+                    <p class='text-sm text-slate-500'>Update your existing password.</p>
                   </div>
                   <button
                     onClick={() => setShowPasswordForm(true)}
-                    class='flex items-center space-x-2 rounded-md bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition hover:bg-gray-200'
+                    class='flex items-center space-x-2 rounded-lg bg-slate-100 px-4 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-200'
                   >
                     <FiKey class='h-4 w-4' />
                     <span>Change Password</span>
@@ -172,13 +180,13 @@ export default function SecuritySettings() {
             >
               <form onSubmit={handlePasswordChange} class='space-y-4'>
                 <Show when={passwordError()}>
-                  <div class='rounded-md border border-red-200 bg-red-50 p-3 text-sm text-red-700'>
+                  <div class='rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700'>
                     {passwordError()}
                   </div>
                 </Show>
 
                 <div>
-                  <label class='mb-1 block text-sm font-medium text-gray-700'>
+                  <label class='mb-1.5 block text-sm font-medium text-slate-700'>
                     Current Password
                   </label>
                   <div class='relative'>
@@ -186,13 +194,13 @@ export default function SecuritySettings() {
                       type={showCurrentPassword() ? 'text' : 'password'}
                       value={currentPassword()}
                       onInput={e => setCurrentPassword(e.target.value)}
-                      class='block w-full rounded-md border border-gray-300 px-3 py-2 pr-10 text-sm shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none'
+                      class='block w-full rounded-lg border border-slate-200 bg-white px-3 py-2 pr-10 text-sm shadow-sm transition-colors focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 focus:outline-none'
                       required
                     />
                     <button
                       type='button'
                       onClick={() => setShowCurrentPassword(!showCurrentPassword())}
-                      class='absolute inset-y-0 right-0 flex items-center px-3 text-gray-400 hover:text-gray-600'
+                      class='absolute inset-y-0 right-0 flex items-center px-3 text-slate-400 transition-colors hover:text-slate-600'
                     >
                       <Show when={showCurrentPassword()} fallback={<FiEye class='h-4 w-4' />}>
                         <FiEyeOff class='h-4 w-4' />
@@ -202,19 +210,21 @@ export default function SecuritySettings() {
                 </div>
 
                 <div>
-                  <label class='mb-1 block text-sm font-medium text-gray-700'>New Password</label>
+                  <label class='mb-1.5 block text-sm font-medium text-slate-700'>
+                    New Password
+                  </label>
                   <div class='relative'>
                     <input
                       type={showNewPassword() ? 'text' : 'password'}
                       value={newPassword()}
                       onInput={e => setNewPassword(e.target.value)}
-                      class='block w-full rounded-md border border-gray-300 px-3 py-2 pr-10 text-sm shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none'
+                      class='block w-full rounded-lg border border-slate-200 bg-white px-3 py-2 pr-10 text-sm shadow-sm transition-colors focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 focus:outline-none'
                       required
                     />
                     <button
                       type='button'
                       onClick={() => setShowNewPassword(!showNewPassword())}
-                      class='absolute inset-y-0 right-0 flex items-center px-3 text-gray-400 hover:text-gray-600'
+                      class='absolute inset-y-0 right-0 flex items-center px-3 text-slate-400 transition-colors hover:text-slate-600'
                     >
                       <Show when={showNewPassword()} fallback={<FiEye class='h-4 w-4' />}>
                         <FiEyeOff class='h-4 w-4' />
@@ -225,23 +235,23 @@ export default function SecuritySettings() {
                 </div>
 
                 <div>
-                  <label class='mb-1 block text-sm font-medium text-gray-700'>
+                  <label class='mb-1.5 block text-sm font-medium text-slate-700'>
                     Confirm New Password
                   </label>
                   <input
                     type='password'
                     value={confirmPassword()}
                     onInput={e => setConfirmPassword(e.target.value)}
-                    class='block w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none'
+                    class='block w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm shadow-sm transition-colors focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 focus:outline-none'
                     required
                   />
                 </div>
 
-                <div class='flex space-x-3'>
+                <div class='flex gap-2'>
                   <button
                     type='submit'
                     disabled={changingPassword()}
-                    class='rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:outline-none disabled:opacity-50'
+                    class='rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm transition-all hover:bg-blue-700 hover:shadow focus:ring-2 focus:ring-blue-500/20 focus:outline-none disabled:opacity-50'
                   >
                     {changingPassword() ? 'Changing...' : 'Update Password'}
                   </button>
@@ -254,7 +264,7 @@ export default function SecuritySettings() {
                       setNewPassword('');
                       setConfirmPassword('');
                     }}
-                    class='rounded-md bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition hover:bg-gray-200'
+                    class='rounded-lg bg-slate-100 px-4 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-200'
                   >
                     Cancel
                   </button>
@@ -263,7 +273,7 @@ export default function SecuritySettings() {
             </Show>
 
             {/* Divider */}
-            <div class='border-t border-gray-200' />
+            <div class='border-t border-slate-100' />
 
             {/* Two-Factor Authentication */}
             <TwoFactorSetup />
@@ -271,11 +281,13 @@ export default function SecuritySettings() {
         </div>
 
         {/* Active Sessions Section */}
-        <div class='mb-6 overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm'>
-          <div class='border-b border-gray-200 bg-gray-50 px-6 py-4'>
-            <div class='flex items-center space-x-2'>
-              <FiMonitor class='h-5 w-5 text-gray-600' />
-              <h2 class='text-lg font-medium text-gray-900'>Active Sessions</h2>
+        <div class='mb-6 overflow-hidden rounded-xl border border-slate-200/60 bg-white shadow-sm transition-shadow duration-200 hover:shadow-md'>
+          <div class='border-b border-slate-100 bg-gradient-to-r from-slate-50 to-white px-6 py-4'>
+            <div class='flex items-center space-x-2.5'>
+              <div class='flex h-8 w-8 items-center justify-center rounded-lg bg-slate-100'>
+                <FiMonitor class='h-4 w-4 text-slate-600' />
+              </div>
+              <h2 class='text-base font-semibold text-slate-900'>Active Sessions</h2>
             </div>
           </div>
           <div class='p-6'>
diff --git a/packages/web/src/components/settings/shared/SettingField.jsx b/packages/web/src/components/settings/shared/SettingField.jsx
new file mode 100644
index 000000000..0138d2490
--- /dev/null
+++ b/packages/web/src/components/settings/shared/SettingField.jsx
@@ -0,0 +1,66 @@
+/**
+ * SettingField - Reusable inline edit field wrapper for settings pages
+ * Handles label, value display, edit button layout, and edit/cancel/save flow
+ */
+
+import { Show } from 'solid-js';
+
+/**
+ * @param {Object} props
+ * @param {string} props.label - Field label (displayed uppercase)
+ * @param {JSX.Element | string} props.value - Display value when not editing
+ * @param {boolean} props.editing - Whether field is in edit mode
+ * @param {() => void} props.onEdit - Called when Edit button clicked
+ * @param {() => void} props.onCancel - Called when Cancel button clicked
+ * @param {() => void} props.onSave - Called when Save button clicked
+ * @param {boolean} [props.saving] - Whether save is in progress
+ * @param {JSX.Element} [props.editContent] - Content to show when editing
+ * @param {boolean} [props.showDivider] - Whether to show top border divider
+ */
+export default function SettingField(props) {
+  return (
+    <div
+      class={`flex items-start justify-between ${props.showDivider ? 'border-t border-gray-100 pt-4' : ''}`}
+    >
+      <div class='flex-1'>
+        <label class='block text-xs font-medium tracking-wide text-gray-500 uppercase'>
+          {props.label}
+        </label>
+        <Show
+          when={props.editing}
+          fallback={<div class='mt-1 text-gray-900'>{props.value || 'Not set'}</div>}
+        >
+          <div class='mt-2'>{props.editContent}</div>
+        </Show>
+      </div>
+      <Show
+        when={props.editing}
+        fallback={
+          <button
+            onClick={props.onEdit}
+            class='ml-4 text-sm font-medium text-blue-600 hover:text-blue-700'
+          >
+            Edit
+          </button>
+        }
+      >
+        <div class='ml-4 flex space-x-2'>
+          <button
+            onClick={() => props.onSave?.()}
+            disabled={props.saving}
+            class='rounded-lg bg-blue-600 px-3 py-1 text-sm font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:outline-none disabled:opacity-50'
+          >
+            Save
+          </button>
+          <button
+            onClick={() => props.onCancel?.()}
+            disabled={props.saving}
+            class='px-3 py-1 text-sm font-medium text-gray-600 hover:text-gray-800 disabled:opacity-50'
+          >
+            Cancel
+          </button>
+        </div>
+      </Show>
+    </div>
+  );
+}
diff --git a/packages/web/src/components/ui/tabs.tsx b/packages/web/src/components/ui/tabs.tsx
index 52c418ba1..e2d082311 100644
--- a/packages/web/src/components/ui/tabs.tsx
+++ b/packages/web/src/components/ui/tabs.tsx
@@ -120,10 +120,16 @@ type TabsIndicatorProps = ArkTabsIndicatorProps & {
 };
 
 const TabsIndicator: Component<TabsIndicatorProps> = props => {
-  const [local, others] = splitProps(props, ['class']);
+  const [local, others] = splitProps(props, ['class', 'style']);
   return (
     <TabsPrimitive.Indicator
-      class={cn('absolute bottom-0 h-0.5 bg-blue-600 transition-all', local.class)}
+      class={cn('absolute bottom-0 bg-blue-600', local.class)}
+      style={{
+        width: 'var(--width)',
+        left: 'var(--left)',
+        transition: 'left 200ms ease-out, width 200ms ease-out',
+        ...(typeof local.style === 'object' ? local.style : {}),
+      }}
       {...others}
     />
   );
diff --git a/packages/workers/src/durable-objects/ProjectDoc.ts b/packages/workers/src/durable-objects/ProjectDoc.ts
index 50de8e43f..517b7e2fb 100644
--- a/packages/workers/src/durable-objects/ProjectDoc.ts
+++ b/packages/workers/src/durable-objects/ProjectDoc.ts
@@ -547,14 +547,33 @@ export class ProjectDoc implements DurableObject {
       });
     }
 
-    // Now that we've verified auth, sync member to Yjs if not present (for awareness)
+    // Now that we've verified auth, sync member to Yjs if not present or update missing fields
     await this.initializeDoc();
     const membersMap = this.doc!.getMap('members');
-    if (!membersMap.has(user.id)) {
+    const existingMember = membersMap.get(user.id) as Y.Map<unknown> | undefined;
+    if (!existingMember) {
       const memberYMap = new Y.Map<unknown>();
       memberYMap.set('role', projectMembership.role);
       memberYMap.set('joinedAt', Date.now());
+      memberYMap.set('name', (user.name as string) || null);
+      memberYMap.set('email', (user.email as string) || null);
+      memberYMap.set('displayName', (user.displayName as string) || null);
+      memberYMap.set('image', (user.image as string) || null);
       membersMap.set(user.id, memberYMap);
+    } else {
+      // Update image if user has one and it differs from stored (handles OAuth image sync)
+      const storedImage = existingMember.get('image') as string | null;
+      const userImage = (user.image as string) || null;
+      if (userImage && userImage !== storedImage) {
+        existingMember.set('image', userImage);
+      }
+      // Also update name/displayName if missing
+      if (!existingMember.get('name') && user.name) {
+        existingMember.set('name', user.name as string);
+      }
+      if (!existingMember.get('displayName') && user.displayName) {
+        existingMember.set('displayName', user.displayName as string);
+      }
     }
 
     const webSocketPair = new WebSocketPair();

From 0cca54c47d85eb3da307a61153853f3973b73c83 Mon Sep 17 00:00:00 2001
From: Jacob Maynard <jacobamaynard@proton.me>
Date: Sun, 18 Jan 2026 15:49:45 -0600
Subject: [PATCH 3/6] lint fixes

---
 eslint.config.js                              |  2 +
 packages/workers/src/auth/email.ts            | 26 ++++-----
 .../src/durable-objects/dev-handlers.ts       |  2 +-
 packages/workers/src/lib/escapeHtml.ts        |  3 +-
 .../billing/handlers/checkoutHandlers.ts      |  2 +-
 .../billing/handlers/subscriptionHandlers.ts  |  2 +-
 .../src/routes/billing/handlers/types.ts      |  4 +-
 packages/workers/src/routes/billing/portal.ts |  2 +-
 .../src/routes/billing/subscription.ts        |  2 +-
 .../src/routes/billing/webhookRouter.ts       |  2 +-
 .../workers/src/routes/billing/webhooks.ts    | 53 +++++++++++--------
 packages/workers/src/routes/orgs/index.ts     | 24 ++++-----
 12 files changed, 68 insertions(+), 56 deletions(-)

diff --git a/eslint.config.js b/eslint.config.js
index 38629c55e..806604e66 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -379,6 +379,8 @@ export default [
       '**/.vitepress/cache/**',
       '**/.vitepress/dist/**',
       'reference/**',
+      '**/.localflare/**',
+      '.claude/skills/**/examples/**',
     ],
   },
 ];
diff --git a/packages/workers/src/auth/email.ts b/packages/workers/src/auth/email.ts
index afa9f1043..825b7283a 100644
--- a/packages/workers/src/auth/email.ts
+++ b/packages/workers/src/auth/email.ts
@@ -30,24 +30,24 @@ interface EmailResult {
 }
 
 export interface EmailService {
-  sendEmail: (params: SendEmailParams) => Promise<EmailResult>;
+  sendEmail: (_params: SendEmailParams) => Promise<EmailResult>;
   sendEmailVerification: (
-    to: string,
-    verificationUrl: string,
-    userDisplayName?: string,
+    _to: string,
+    _verificationUrl: string,
+    _userDisplayName?: string,
   ) => Promise<EmailResult>;
   sendPasswordReset: (
-    to: string,
-    resetUrl: string,
-    userDisplayName?: string,
+    _to: string,
+    _resetUrl: string,
+    _userDisplayName?: string,
   ) => Promise<EmailResult>;
-  sendMagicLink: (to: string, magicLinkUrl: string) => Promise<EmailResult>;
+  sendMagicLink: (_to: string, _magicLinkUrl: string) => Promise<EmailResult>;
   sendProjectInvitation: (
-    to: string,
-    projectName: string,
-    inviterName: string,
-    invitationUrl: string,
-    role: string,
+    _to: string,
+    _projectName: string,
+    _inviterName: string,
+    _invitationUrl: string,
+    _role: string,
   ) => Promise<EmailResult>;
   isProduction: boolean;
 }
diff --git a/packages/workers/src/durable-objects/dev-handlers.ts b/packages/workers/src/durable-objects/dev-handlers.ts
index 28c9bf7ef..967b63f07 100644
--- a/packages/workers/src/durable-objects/dev-handlers.ts
+++ b/packages/workers/src/durable-objects/dev-handlers.ts
@@ -8,7 +8,7 @@ import { getTemplate, getTemplateNames, getTemplateDescriptions } from '../lib/m
 interface DevContext {
   doc: Y.Doc;
   stateId: string;
-  yMapToPlain: (map: Y.Map<unknown>) => Record<string, unknown>;
+  yMapToPlain: (_map: Y.Map<unknown>) => Record<string, unknown>;
 }
 
 interface ExportData {
diff --git a/packages/workers/src/lib/escapeHtml.ts b/packages/workers/src/lib/escapeHtml.ts
index 90920eb4f..a9c0e6669 100644
--- a/packages/workers/src/lib/escapeHtml.ts
+++ b/packages/workers/src/lib/escapeHtml.ts
@@ -22,7 +22,8 @@ export function sanitizeEmailSubject(text: unknown, maxLength = 78): string {
   if (text == null) return '';
   return (
     String(text)
-      // Remove control characters (0x00-0x1F) and newlines
+      // Remove control characters (0x00-0x1F) and newlines - intentional for XSS prevention
+      // eslint-disable-next-line no-control-regex
       .replace(/[\x00-\x1F\x7F]/g, '')
       // Collapse whitespace
       .replace(/\s+/g, ' ')
diff --git a/packages/workers/src/routes/billing/handlers/checkoutHandlers.ts b/packages/workers/src/routes/billing/handlers/checkoutHandlers.ts
index bee8a64d8..a135674b1 100644
--- a/packages/workers/src/routes/billing/handlers/checkoutHandlers.ts
+++ b/packages/workers/src/routes/billing/handlers/checkoutHandlers.ts
@@ -12,7 +12,7 @@ import type { Database } from '@/db/client';
 interface ProcessCheckoutContext {
   db: Database;
   logger: {
-    stripe: (event: string, context: Record<string, unknown>) => void;
+    stripe: (_event: string, _context: Record<string, unknown>) => void;
   };
 }
 
diff --git a/packages/workers/src/routes/billing/handlers/subscriptionHandlers.ts b/packages/workers/src/routes/billing/handlers/subscriptionHandlers.ts
index 54c370397..9e560e0f8 100644
--- a/packages/workers/src/routes/billing/handlers/subscriptionHandlers.ts
+++ b/packages/workers/src/routes/billing/handlers/subscriptionHandlers.ts
@@ -7,7 +7,7 @@ import { eq } from 'drizzle-orm';
 import { subscription } from '@/db/schema.js';
 import type { WebhookContext, WebhookResult } from './types.js';
 import { createDb } from '@/db/client.js';
-import type { Env } from '../../../types';
+import type { Env as _Env } from '../../../types';
 
 // Helper to get typed db from context
 function getDb(ctx: WebhookContext) {
diff --git a/packages/workers/src/routes/billing/handlers/types.ts b/packages/workers/src/routes/billing/handlers/types.ts
index b6c5bc633..f8e34ae26 100644
--- a/packages/workers/src/routes/billing/handlers/types.ts
+++ b/packages/workers/src/routes/billing/handlers/types.ts
@@ -6,8 +6,8 @@
  */
 
 export interface WebhookLogger {
-  stripe: (event: string, data: Record<string, unknown>) => void;
-  error?: (message: string, data: Record<string, unknown>) => void;
+  stripe: (_event: string, _data: Record<string, unknown>) => void;
+  error?: (_message: string, _data: Record<string, unknown>) => void;
 }
 
 export interface WebhookContext {
diff --git a/packages/workers/src/routes/billing/portal.ts b/packages/workers/src/routes/billing/portal.ts
index 51b1d84db..c15b82a17 100644
--- a/packages/workers/src/routes/billing/portal.ts
+++ b/packages/workers/src/routes/billing/portal.ts
@@ -86,7 +86,7 @@ billingPortalRoutes.openapi(createPortalRoute, async c => {
     const { createAuth } = await import('@/auth/config.js');
     const auth = createAuth(c.env, c.executionCtx);
     const billingApi = auth.api as unknown as {
-      createBillingPortal: (req: {
+      createBillingPortal: (_req: {
         headers: Headers;
         body: Record<string, unknown>;
       }) => Promise<unknown>;
diff --git a/packages/workers/src/routes/billing/subscription.ts b/packages/workers/src/routes/billing/subscription.ts
index 69010c373..508cc3cf3 100644
--- a/packages/workers/src/routes/billing/subscription.ts
+++ b/packages/workers/src/routes/billing/subscription.ts
@@ -290,7 +290,7 @@ billingSubscriptionRoutes.openapi(membersRoute, async c => {
     const { createAuth } = await import('@/auth/config.js');
     const auth = createAuth(c.env, c.executionCtx);
     const listMembersApi = auth.api as unknown as {
-      listMembers: (req: {
+      listMembers: (_req: {
         headers: Headers;
         query: { organizationId: string };
       }) => Promise<{ members?: Array<Record<string, unknown>> }>;
diff --git a/packages/workers/src/routes/billing/webhookRouter.ts b/packages/workers/src/routes/billing/webhookRouter.ts
index d0d864764..d880e5c24 100644
--- a/packages/workers/src/routes/billing/webhookRouter.ts
+++ b/packages/workers/src/routes/billing/webhookRouter.ts
@@ -32,7 +32,7 @@ import { handleCustomerUpdated, handleCustomerDeleted } from './handlers/custome
 interface WebhookContext {
   db: unknown;
   logger: {
-    stripe: (event: string, data: Record<string, unknown>) => void;
+    stripe: (_event: string, _data: Record<string, unknown>) => void;
   };
   env: unknown;
 }
diff --git a/packages/workers/src/routes/billing/webhooks.ts b/packages/workers/src/routes/billing/webhooks.ts
index 215db7da3..5f1b0a0f3 100644
--- a/packages/workers/src/routes/billing/webhooks.ts
+++ b/packages/workers/src/routes/billing/webhooks.ts
@@ -147,12 +147,15 @@ billingWebhookRoutes.post('/purchases/webhook', async c => {
     // Check for duplicate by payload hash
     const existingEntry = await getLedgerByPayloadHash(db, payloadHash);
     if (existingEntry) {
-      (logger.stripe as (event: string, data: Record<string, unknown>) => void)('webhook_dedupe', {
-        outcome: 'skipped_duplicate',
-        payloadHash,
-        existingLedgerId: existingEntry.id,
-        existingStatus: existingEntry.status,
-      });
+      (logger.stripe as (_event: string, _data: Record<string, unknown>) => void)(
+        'webhook_dedupe',
+        {
+          outcome: 'skipped_duplicate',
+          payloadHash,
+          existingLedgerId: existingEntry.id,
+          existingStatus: existingEntry.status,
+        },
+      );
 
       return c.json({ received: true, skipped: 'duplicate_payload' }, 200);
     }
@@ -168,11 +171,14 @@ billingWebhookRoutes.post('/purchases/webhook', async c => {
       status: LedgerStatus.RECEIVED,
     });
 
-    (logger.stripe as (event: string, data: Record<string, unknown>) => void)('webhook_received', {
-      payloadHash,
-      signaturePresent: true,
-      ledgerId,
-    });
+    (logger.stripe as (_event: string, _data: Record<string, unknown>) => void)(
+      'webhook_received',
+      {
+        payloadHash,
+        signaturePresent: true,
+        ledgerId,
+      },
+    );
 
     // Phase 2: Verify signature and process
     let event: Stripe.Event;
@@ -190,7 +196,7 @@ billingWebhookRoutes.post('/purchases/webhook', async c => {
         httpStatus: 403,
       });
 
-      (logger.stripe as (event: string, data: Record<string, unknown>) => void)(
+      (logger.stripe as (_event: string, _data: Record<string, unknown>) => void)(
         'webhook_rejected',
         {
           outcome: 'ignored_unverified',
@@ -222,7 +228,7 @@ billingWebhookRoutes.post('/purchases/webhook', async c => {
         httpStatus: 200,
       });
 
-      (logger.stripe as (event: string, data: Record<string, unknown>) => void)(
+      (logger.stripe as (_event: string, _data: Record<string, unknown>) => void)(
         'webhook_dedupe_event_id',
         {
           outcome: 'skipped_duplicate',
@@ -249,7 +255,7 @@ billingWebhookRoutes.post('/purchases/webhook', async c => {
         httpStatus: 200,
       });
 
-      (logger.stripe as (event: string, data: Record<string, unknown>) => void)(
+      (logger.stripe as (_event: string, _data: Record<string, unknown>) => void)(
         'webhook_rejected',
         {
           outcome: 'ignored_test_mode',
@@ -307,14 +313,17 @@ billingWebhookRoutes.post('/purchases/webhook', async c => {
       ...ledgerContext,
     });
 
-    (logger.stripe as (event: string, data: Record<string, unknown>) => void)('webhook_processed', {
-      outcome: handlerResult.handled ? 'processed' : 'unhandled',
-      stripeEventId,
-      stripeEventType: eventType,
-      result: handlerResult.result,
-      payloadHash,
-      ...((handlerResult.ledgerContext as Record<string, unknown>) || {}),
-    });
+    (logger.stripe as (_event: string, _data: Record<string, unknown>) => void)(
+      'webhook_processed',
+      {
+        outcome: handlerResult.handled ? 'processed' : 'unhandled',
+        stripeEventId,
+        stripeEventType: eventType,
+        result: handlerResult.result,
+        payloadHash,
+        ...((handlerResult.ledgerContext as Record<string, unknown>) || {}),
+      },
+    );
 
     // Return error response if handler indicated failure
     if (handlerResultWithError.error) {
diff --git a/packages/workers/src/routes/orgs/index.ts b/packages/workers/src/routes/orgs/index.ts
index 2463910f6..c0ec30c96 100644
--- a/packages/workers/src/routes/orgs/index.ts
+++ b/packages/workers/src/routes/orgs/index.ts
@@ -29,23 +29,23 @@ interface OrgApiRequest {
 }
 
 interface OrgApiMethods {
-  listOrganizations: (req: OrgApiRequest) => Promise<unknown>;
-  createOrganization: (req: OrgApiRequest) => Promise<unknown>;
-  getFullOrganization: (req: OrgApiRequest) => Promise<unknown>;
-  updateOrganization: (req: OrgApiRequest) => Promise<unknown>;
-  deleteOrganization: (req: OrgApiRequest) => Promise<unknown>;
-  listMembers: (req: OrgApiRequest) => Promise<unknown>;
-  addMember: (req: OrgApiRequest) => Promise<unknown>;
-  updateMemberRole: (req: OrgApiRequest) => Promise<unknown>;
-  removeMember: (req: OrgApiRequest) => Promise<unknown>;
-  leaveOrganization: (req: OrgApiRequest) => Promise<unknown>;
-  setActiveOrganization: (req: OrgApiRequest) => Promise<unknown>;
+  listOrganizations: (_req: OrgApiRequest) => Promise<unknown>;
+  createOrganization: (_req: OrgApiRequest) => Promise<unknown>;
+  getFullOrganization: (_req: OrgApiRequest) => Promise<unknown>;
+  updateOrganization: (_req: OrgApiRequest) => Promise<unknown>;
+  deleteOrganization: (_req: OrgApiRequest) => Promise<unknown>;
+  listMembers: (_req: OrgApiRequest) => Promise<unknown>;
+  addMember: (_req: OrgApiRequest) => Promise<unknown>;
+  updateMemberRole: (_req: OrgApiRequest) => Promise<unknown>;
+  removeMember: (_req: OrgApiRequest) => Promise<unknown>;
+  leaveOrganization: (_req: OrgApiRequest) => Promise<unknown>;
+  setActiveOrganization: (_req: OrgApiRequest) => Promise<unknown>;
 }
 
 // Helper to get typed organization API
 function getOrgApi(
   env: Env,
-  ctx?: { waitUntil: (promise: Promise<unknown>) => void },
+  ctx?: { waitUntil: (_promise: Promise<unknown>) => void },
 ): OrgApiMethods {
   const auth = createAuth(env, ctx);
   return auth.api as unknown as OrgApiMethods;

From 2d5c3dea0f7855ea51cb4dc0923b857565bbe3ed Mon Sep 17 00:00:00 2001
From: Jacob Maynard <jacobamaynard@proton.me>
Date: Sun, 18 Jan 2026 16:00:26 -0600
Subject: [PATCH 4/6] fix avatar loading

---
 packages/web/src/components/Navbar.jsx        | 27 ++++++++++++++-----
 .../src/components/auth/CompleteProfile.jsx   |  2 +-
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/packages/web/src/components/Navbar.jsx b/packages/web/src/components/Navbar.jsx
index 2f6b5a5f9..ffe5475ae 100644
--- a/packages/web/src/components/Navbar.jsx
+++ b/packages/web/src/components/Navbar.jsx
@@ -135,12 +135,27 @@ export default function Navbar(props) {
               onClick={() => setShowUserMenu(!showUserMenu())}
               class='flex h-9 items-center space-x-2 rounded px-2 font-medium transition hover:bg-blue-600'
             >
-              <Avatar class='h-6 w-6'>
-                <AvatarImage src={user()?.image} alt={user()?.name || storedName || 'User'} />
-                <AvatarFallback class='bg-white/20 text-xs text-white'>
-                  {getInitials(user()?.name || storedName)}
-                </AvatarFallback>
-              </Avatar>
+              {/* Key avatar on image URL to force remount when user data loads */}
+              <Show
+                when={user()?.image}
+                keyed
+                fallback={
+                  <Avatar class='h-6 w-6'>
+                    <AvatarFallback class='bg-white/20 text-xs text-white'>
+                      {getInitials(user()?.name || storedName)}
+                    </AvatarFallback>
+                  </Avatar>
+                }
+              >
+                {imageSrc => (
+                  <Avatar class='h-6 w-6'>
+                    <AvatarImage src={imageSrc} alt={user()?.name || storedName || 'User'} />
+                    <AvatarFallback class='bg-white/20 text-xs text-white'>
+                      {getInitials(user()?.name || storedName)}
+                    </AvatarFallback>
+                  </Avatar>
+                )}
+              </Show>
               <span class='hidden sm:block'>{user()?.name || storedName || 'Loading...'}</span>
               <FiChevronDown
                 class={`h-3 w-3 transition-transform ${showUserMenu() ? 'rotate-180' : ''}`}
diff --git a/packages/web/src/components/auth/CompleteProfile.jsx b/packages/web/src/components/auth/CompleteProfile.jsx
index 3e2de972e..ba1d5da11 100644
--- a/packages/web/src/components/auth/CompleteProfile.jsx
+++ b/packages/web/src/components/auth/CompleteProfile.jsx
@@ -376,7 +376,7 @@ export default function CompleteProfile() {
                   <Select
                     collection={titleCollection}
                     value={titleSelection()}
-                    onValueChange={details => setTitleSelection(details.value)}
+                    onValueChange={value => setTitleSelection(value || [])}
                   >
                     <SelectControl>
                       <SelectTrigger class='w-full'>

From d807f59b4eb1a6fb8696114b7daf3cd8acdc0262 Mon Sep 17 00:00:00 2001
From: Jacob Maynard <jacobamaynard@proton.me>
Date: Sun, 18 Jan 2026 16:20:00 -0600
Subject: [PATCH 5/6] simplify project creation

---
 packages/docs/guides/style-guide.md           | 511 +++++++++++-------
 .../src/components/dashboard/Dashboard.jsx    |  21 +-
 .../src/components/dashboard/ProgressCard.jsx |  85 ---
 .../components/dashboard/ProjectsSection.jsx  |  39 +-
 .../web/src/components/dashboard/index.js     |   1 -
 .../components/project/CreateProjectModal.jsx | 225 ++++++++
 .../src/components/project/ProjectsPanel.jsx  |  40 +-
 7 files changed, 546 insertions(+), 376 deletions(-)
 delete mode 100644 packages/web/src/components/dashboard/ProgressCard.jsx
 create mode 100644 packages/web/src/components/project/CreateProjectModal.jsx

diff --git a/packages/docs/guides/style-guide.md b/packages/docs/guides/style-guide.md
index 0ba4682d8..57ae39285 100644
--- a/packages/docs/guides/style-guide.md
+++ b/packages/docs/guides/style-guide.md
@@ -25,84 +25,83 @@
 
 - **Red**: `red-600` (#dc2626) for destructive actions
 - **Red Hover**: `red-700` (#b91c1c)
-- **Green**: For success states (implied from traffic light patterns)
-
-### Neutral Colors
-
-- **Gray Scale**:
-  - `gray-50` (#f9fafb) - lightest backgrounds
-  - `gray-100` (#f3f4f6) - subtle backgrounds
-  - `gray-200` (#e5e7eb) - borders, dividers
-  - `gray-300` (#d1d5db) - disabled states
-  - `gray-400` (#9ca3af) - placeholder text, icons
-  - `gray-500` (#6b7280) - secondary text
-  - `gray-600` (#4b5563) - body text
-  - `gray-700` (#374151) - headings
-  - `gray-800` (#1f2937) - dark text
-  - `gray-900` (#111827) - darkest text
+- **Emerald**: `emerald-600` (#059669) for success states
+- **Amber**: `amber-500` (#f59e0b) for warnings
+
+### Neutral Colors (Slate)
+
+The application uses the **slate** color palette (not gray):
+
+- `slate-50` (#f8fafc) - page backgrounds, alternating rows
+- `slate-100` (#f1f5f9) - subtle backgrounds, dividers
+- `slate-200` (#e2e8f0) - borders, card outlines
+- `slate-300` (#cbd5e1) - disabled states
+- `slate-400` (#94a3b8) - placeholder text, muted labels
+- `slate-500` (#64748b) - secondary text, descriptions
+- `slate-600` (#475569) - body text
+- `slate-700` (#334155) - headings, button text
+- `slate-900` (#0f172a) - primary text, titles
 
 ### Background Colors
 
-- **Main Background**: `bg-blue-50`
+- **Page Background**: `bg-slate-50` or `bg-gradient-to-br from-slate-50 to-slate-100/80`
 - **Card Background**: `bg-white`
-- **Feature Backgrounds**: `bg-blue-50`, `bg-blue-100`
-- **Sidebar Background**: Light gray tones
+- **Stat Card Variants**:
+  - Default: `bg-slate-50 border-slate-200`
+  - Success: `bg-emerald-50 border-emerald-200`
+  - Info: `bg-blue-50 border-blue-200`
 
 ## Typography
 
 ### Font Family
 
-Primary: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`
+Primary: Inter (system fallback: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`)
 
 ### Font Sizes
 
-- **4XS**: `0.375rem` (6px)
-- **3XS**: `0.5rem` (8px)
-- **2XS**: `0.625rem` (10px)
-- **XS**: `text-xs` - 12px
-- **SM**: `text-sm` - 14px
-- **Base**: `text-base` - 16px
-- **LG**: `text-lg` - 18px
-- **XL**: `text-xl` - 20px
-- **2XL**: `text-2xl` - 24px
-- **3XL**: `text-3xl` - 30px
-- **4XL**: `text-4xl` - 36px
-- **6XL**: `text-6xl` - 60px
-- **7XL**: `text-7xl` - 72px
+- **XS**: `text-xs` - 12px (labels, badges, meta)
+- **SM**: `text-sm` - 14px (body text, descriptions)
+- **Base**: `text-base` - 16px (section headers)
+- **LG**: `text-lg` - 18px (card titles, names)
+- **XL**: `text-xl` - 20px (page subtitles)
+- **2XL**: `text-2xl` - 24px (page titles, large stats)
 
 ### Font Weights
 
-- **Medium**: `font-medium`
-- **Semibold**: `font-semibold`
-- **Bold**: `font-bold`
-- **Extrabold**: `font-extrabold` (for brand name)
+- **Medium**: `font-medium` (body text, buttons)
+- **Semibold**: `font-semibold` (section headers, labels)
+- **Bold**: `font-bold` (stats, emphasis)
 
 ### Text Colors
 
-- **Primary**: `text-gray-900`
-- **Secondary**: `text-gray-600`
-- **Muted**: `text-gray-500`
-- **Placeholder**: `text-gray-400`
-- **Brand**: `text-blue-600`
-- **Links**: `text-blue-600`
+- **Primary**: `text-slate-900`
+- **Secondary**: `text-slate-600` or `text-slate-500`
+- **Muted/Label**: `text-slate-400`
+- **Placeholder**: `text-slate-400`
+- **Brand/Links**: `text-blue-600`
+- **Link Hover**: `text-blue-700`
+
+### Label Pattern
+
+Section labels use uppercase tracking:
+
+```jsx
+<label class='mb-1 block text-xs font-medium tracking-wide text-slate-400 uppercase'>Label Text</label>
+```
 
 ## Layout & Spacing
 
 ### Container Patterns
 
-- **Max Width**: `max-w-4xl mx-auto` for main content
-- **Page Padding**: `p-6` for main content areas
-- **Card Padding**: `p-4` to `p-8` depending on component
+- **Max Width**: `max-w-7xl mx-auto` for main content, `max-w-3xl` for settings
+- **Page Padding**: `px-6 py-6` for main content areas
+- **Card Padding**: `p-5` or `p-6` for cards
 
 ### Spacing Scale
 
-- **Gap/Margin**: `gap-2`, `gap-4`, `gap-6`, `gap-8`
-- **Padding**: `p-2`, `p-4`, `p-6`, `p-8`, `p-12`
-
-### Breakpoints
-
-- **XS**: `30rem` (480px) - Custom breakpoint
-- **SM**: Standard Tailwind breakpoints apply
+- **Gap/Margin**: `gap-2`, `gap-3`, `gap-4`, `gap-6`
+- **Padding**: `p-3`, `p-4`, `p-5`, `p-6`
+- **Section Spacing**: `mb-6` between major sections
 
 ## Components
 
@@ -111,37 +110,40 @@ Primary: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`
 #### Primary Button
 
 ```jsx
-<button class="inline-flex items-center px-8 py-4 bg-blue-600 text-white font-semibold rounded-xl hover:bg-blue-700 transform hover:scale-105 transition-all duration-200 shadow-lg hover:shadow-xl">
+<button class='rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm transition-all hover:bg-blue-700 hover:shadow focus:ring-2 focus:ring-blue-500/20 focus:outline-none disabled:opacity-50'>
+  Primary Action
+</button>
 ```
 
 #### Secondary Button
 
 ```jsx
-<button class="inline-flex items-center px-8 py-4 bg-white text-gray-700 font-semibold rounded-xl border-2 border-gray-200 hover:border-blue-300 hover:text-blue-600 transform hover:scale-105 transition-all duration-200 shadow-lg hover:shadow-xl">
-```
-
-#### Small Action Button
-
-```jsx
-<button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium">
+<button class='rounded-lg bg-slate-100 px-4 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-200 disabled:opacity-50'>
+  Secondary Action
+</button>
 ```
 
-#### Destructive Button
+#### Text Button (Links)
 
 ```jsx
-<button class="px-3 py-1 bg-red-500 text-white rounded text-sm hover:bg-red-600 transition">
+<button class='text-sm font-medium text-blue-600 transition-colors hover:text-blue-700'>Edit</button>
 ```
 
 #### Icon Button
 
 ```jsx
-<button class="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-full transition-colors">
+<button class='rounded p-1.5 text-slate-400 transition-colors hover:bg-red-50 hover:text-red-600 focus:ring-2 focus:ring-blue-500 focus:outline-none'>
+  <FiTrash2 class='h-4 w-4' />
+</button>
 ```
 
-#### Navbar Link Button
+#### Disabled State (Quota Limit)
 
 ```jsx
-<button class="hover:bg-blue-600 px-2 py-1.5 rounded transition font-medium">
+<span class='inline-flex cursor-not-allowed items-center gap-1.5 rounded-lg bg-slate-100 px-3 py-1.5 text-sm font-medium text-slate-400'>
+  <FiPlus class='h-4 w-4' />
+  Invite
+</span>
 ```
 
 ### Form Elements
@@ -149,254 +151,347 @@ Primary: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`
 #### Input Field
 
 ```jsx
-<input class="w-full pl-3 sm:pl-4 pr-3 sm:pr-4 py-2 text-xs sm:text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 transition">
+<input class='block w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm shadow-sm transition-colors focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 focus:outline-none' />
 ```
 
-#### Large Input
+#### Select (Ark UI)
 
-```jsx
-<input class="flex-1 px-4 py-2 border border-blue-200 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none">
-```
+Uses the `@/components/ui/select` component with `createListCollection`.
 
 #### Label
 
 ```jsx
-<label class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1 sm:mb-2">
+<label class='mb-1.5 block text-sm font-medium text-slate-700'>Field Label</label>
 ```
 
 ### Cards & Containers
 
-#### Main Card
+#### Standard Card (Project View)
 
 ```jsx
-<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+<div class='rounded-xl border border-slate-200 bg-white p-5'>
+  <h2 class='mb-5 text-base font-semibold text-slate-900'>Section Title</h2>
+  {/* Content */}
+</div>
 ```
 
-#### Feature Card
+#### Settings Card (with Header)
 
 ```jsx
-<div class="text-center p-8 rounded-2xl bg-white shadow-lg hover:shadow-xl transition-shadow duration-300 border border-gray-100">
+<div class='overflow-hidden rounded-xl border border-slate-200/60 bg-white shadow-sm transition-shadow duration-200 hover:shadow-md'>
+  {/* Header */}
+  <div class='border-b border-slate-100 bg-linear-to-r from-slate-50 to-white px-6 py-4'>
+    <div class='flex items-center space-x-2.5'>
+      <div class='flex h-8 w-8 items-center justify-center rounded-lg bg-blue-50'>
+        <FiIcon class='h-4 w-4 text-blue-600' />
+      </div>
+      <div>
+        <h2 class='text-base font-semibold text-slate-900'>Section Title</h2>
+        <p class='text-sm text-slate-500'>Description text</p>
+      </div>
+    </div>
+  </div>
+  {/* Content */}
+  <div class='p-6'>{/* ... */}</div>
+</div>
 ```
 
-#### Project Card
+#### Stat Card
 
 ```jsx
-<div class="bg-white border border-gray-200 rounded-lg p-6 hover:shadow-md transition-shadow duration-200">
+<div class='rounded-lg border border-slate-200 bg-slate-50 p-4 text-center'>
+  <div class='mb-2 flex justify-center'>
+    <Icon class='h-5 w-5 text-slate-500' />
+  </div>
+  <p class='text-2xl font-bold text-slate-900'>42</p>
+  <p class='mt-1 text-xs font-medium text-slate-500'>Label</p>
+</div>
 ```
 
-#### Form Section
+#### Stat Card Variants
 
 ```jsx
-<div class="mb-8 p-4 bg-blue-50 rounded-lg border border-blue-200">
+// Success variant
+<div class='rounded-lg border border-emerald-200 bg-emerald-50 p-4 text-center'>
+  <p class='text-2xl font-bold text-emerald-700'>12</p>
+  <p class='mt-1 text-xs font-medium text-emerald-600'>Ready</p>
+</div>
+
+// Info variant
+<div class='rounded-lg border border-blue-200 bg-blue-50 p-4 text-center'>
+  <p class='text-2xl font-bold text-blue-700'>8</p>
+  <p class='mt-1 text-xs font-medium text-blue-600'>Completed</p>
+</div>
 ```
 
-#### Checklist Item
+#### Collapsible Section
 
 ```jsx
-<div class="group bg-white border border-gray-200 rounded hover:shadow-sm hover:border-blue-300 transition-all duration-200">
+<div class='overflow-hidden rounded-xl border border-slate-200 bg-white'>
+  <Collapsible>
+    <CollapsibleTrigger class='w-full cursor-pointer justify-between px-5 py-4 transition-colors select-none hover:bg-slate-50'>
+      <h2 class='text-base font-semibold text-slate-900'>Section Title</h2>
+      <div class='flex items-center gap-2 text-sm text-slate-500'>
+        Click to expand
+        <CollapsibleIndicator>
+          <FiChevronDown class='h-4 w-4' />
+        </CollapsibleIndicator>
+      </div>
+    </CollapsibleTrigger>
+    <CollapsibleContent>
+      <div class='border-t border-slate-100 px-5 py-5'>{/* Content */}</div>
+    </CollapsibleContent>
+  </Collapsible>
+</div>
 ```
 
-#### Empty State
+### Navigation
+
+#### Page Header (Sticky)
 
 ```jsx
-<div class="text-center py-8 bg-white rounded-lg border-2 border-dashed border-gray-300">
+<header class='sticky top-0 z-20 border-b border-slate-200 bg-white'>
+  <div class='mx-auto max-w-7xl px-6'>{/* Header content */}</div>
+</header>
 ```
 
-### Navigation
+#### Tab Navigation
 
-#### Navbar
+Uses `@/components/ui/tabs` components:
 
 ```jsx
-<nav class="flex items-center justify-between bg-linear-to-r from-blue-700 to-blue-500 text-white px-4 py-2 shadow-lg">
+<TabsTrigger
+  value='tab-value'
+  class='group relative gap-2 rounded-t-lg px-4 py-2.5 text-slate-500 transition-all hover:bg-slate-50 hover:text-slate-700 data-selected:text-slate-900'
+>
+  <span class='opacity-60 transition-opacity group-data-selected:opacity-100'>{icon}</span>
+  <span class='font-medium'>Tab Label</span>
+</TabsTrigger>
+<TabsIndicator class='h-0.5 rounded-full bg-blue-600' />
 ```
 
-#### Sidebar Toggle
+#### Tab Badge
 
 ```jsx
-<button class="-ml-1.5 bg-white/80 text-blue-700 p-1.5 rounded-full shadow hover:bg-white transition-all duration-200 border border-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-400">
+<span class='min-w-6 rounded-full bg-slate-100 px-1.5 py-0.5 text-center text-xs font-medium text-slate-600 tabular-nums transition-colors group-data-selected:bg-blue-50 group-data-selected:text-blue-700'>
+  {count}
+</span>
 ```
 
-### Icons & Graphics
+### Badges & Tags
 
-#### Icon Containers
+#### Role Badge
 
-- Feature icons: `w-16 h-16 bg-blue-100 rounded-xl flex items-center justify-center mx-auto mb-6`
-- Small icons: `w-4 h-4`, `w-5 h-5`
-- Avatar placeholders: `w-10 h-10 bg-blue-600 rounded-full`
+```jsx
+<span class='inline-flex items-center rounded-md border border-blue-200 bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700 capitalize'>
+  owner
+</span>
+```
 
-#### SVG Icon Standards
+#### Status Badge (Verified)
 
-- Stroke width: `stroke-width="2"`
-- Standard viewBox: `viewBox="0 0 24 24"`
-- Icon colors: `text-gray-400`, `text-blue-500`, etc.
+```jsx
+<span class='inline-flex items-center gap-1 rounded-full bg-emerald-50 px-1.5 py-0.5 text-xs font-medium text-emerald-700 ring-1 ring-emerald-600/10'>
+  <FiCheck class='h-3 w-3' />
+  Verified
+</span>
+```
 
-### Badges & Tags
+#### Count Badge (Project Card)
 
-#### Status Badge
+```jsx
+<span class='inline-flex items-center rounded-full bg-blue-100 px-2 py-1 font-medium text-blue-800 capitalize'>
+  {role}
+</span>
+```
+
+### Avatars
+
+Uses `@/components/ui/avatar` component:
 
 ```jsx
-<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+<Avatar class='h-9 w-9'>
+  <AvatarImage src={imageUrl} alt={name} />
+  <AvatarFallback class='bg-blue-600 text-white'>{getInitials(name)}</AvatarFallback>
+</Avatar>
 ```
 
-#### Count Badge
+#### Avatar with Overlay (Profile Photo)
 
 ```jsx
-<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+<div class='group relative'>
+  <img src={url} class='h-20 w-20 rounded-full object-cover shadow-md ring-2 ring-white' />
+  <button class='absolute inset-0 flex cursor-pointer items-center justify-center rounded-full bg-slate-900/60 opacity-0 backdrop-blur-sm transition-all duration-200 group-hover:opacity-100'>
+    <FiCamera class='h-5 w-5 text-white' />
+  </button>
+</div>
 ```
 
-### Modals & Overlays
+#### Avatar Fallback (Initials)
+
+```jsx
+<div class='flex h-20 w-20 items-center justify-center rounded-full bg-linear-to-br from-blue-500 to-blue-600 text-xl font-semibold text-white shadow-md'>
+  {initials}
+</div>
+```
 
-#### Dialog Backdrop
+### Lists
+
+#### Alternating Row
 
 ```jsx
-<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
+<div
+  class='flex items-center justify-between rounded-lg p-3 transition-colors'
+  style={{ background: index() % 2 === 0 ? '#f8fafc' : 'transparent' }}
+>
+  {/* Row content */}
+</div>
 ```
 
-#### Dialog Content
+#### Divider Between Sections
 
 ```jsx
-<div class="bg-white rounded-xl shadow-2xl max-w-sm w-full p-6 mx-2 animate-fade-in">
+<div class='border-t border-slate-100' />
 ```
 
-### Lists & Tables
+### Modals & Overlays
 
-#### List Item
+Uses `@/components/ui/alert-dialog` for confirmations:
 
 ```jsx
-<div class="bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200">
+<AlertDialog open={open()} onOpenChange={setOpen}>
+  <AlertDialogBackdrop />
+  <AlertDialogPositioner>
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogIcon variant='danger' />
+        <div>
+          <AlertDialogTitle>Title</AlertDialogTitle>
+          <AlertDialogDescription>Description text</AlertDialogDescription>
+        </div>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>Cancel</AlertDialogCancel>
+        <AlertDialogAction variant='danger'>Confirm</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialogPositioner>
+</AlertDialog>
 ```
 
-#### Traffic Light Cell (Charts)
+### Data Visualization
+
+#### Chart Containers
+
+See `ChartSection.jsx` for chart implementations.
 
-- Colors: Green (`#22c55e`), Yellow (`#eab308`), Red (`#ef4444`), Gray (`#e5e7eb`)
-- Cell styling: `border-radius: 2px`, `stroke: white`, `stroke-width: 1`
+#### Color Coding (AMSTAR Ratings)
+
+- **Yes**: `#22c55e` (Green / emerald-500)
+- **Partial Yes**: `#eab308` (Yellow / yellow-500)
+- **No**: `#ef4444` (Red / red-500)
+- **No MA/Not Applicable**: `#e5e7eb` (Gray / slate-200)
 
 ## Animation & Transitions
 
 ### Standard Transitions
 
-- **Duration**: `duration-200`, `duration-300` for hover states
+- **Duration**: `duration-200` for hover states
 - **Easing**: `transition-all`, `transition-colors`, `transition-shadow`
-- **Transform**: `transform hover:scale-105` for interactive elements
-
-### Custom Animations
-
-#### Fade In
-
-```css
-@keyframes fade-in {
-  from {
-    opacity: 0;
-    transform: translateY(16px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-.animate-fade-in {
-  animation: fade-in 0.18s cubic-bezier(0.4, 0, 0.2, 1);
-}
-```
+- **Opacity**: `transition-opacity`
 
 ### Hover Effects
 
-- **Scale**: `hover:scale-[1.02]` for buttons
-- **Shadow**: `hover:shadow-xl` for cards
-- **Background**: Color shifts with `hover:bg-` classes
-- **Border**: `hover:border-blue-300` for interactive elements
-
-## Accessibility
+- **Shadow**: `hover:shadow-md` for cards
+- **Background**: `hover:bg-slate-50` for interactive rows
+- **Text Color**: `hover:text-blue-700` for links
 
 ### Focus States
 
-- **Ring**: `focus:ring-2 focus:ring-blue-500`
-- **Border**: `focus:border-transparent`
-- **Outline**: `focus:outline-none` (when using custom ring)
+- **Ring**: `focus:ring-2 focus:ring-blue-500/20`
+- **Border**: `focus:border-blue-500`
+- **Outline**: `focus:outline-none`
 
-### Color Contrast
-
-- Ensure sufficient contrast ratios between text and backgrounds
-- Use semantic colors (red for destructive, blue for primary actions)
-
-### Interactive Elements
+## Page Layouts
 
-- Minimum touch target of 44px for mobile
-- Clear visual feedback for all interactive states
-- Proper ARIA labels and semantic HTML
+### Settings Page
 
-## Content Patterns
+```jsx
+<div class='min-h-full bg-linear-to-br from-slate-50 to-slate-100/80 py-8'>
+  <div class='mx-auto max-w-3xl px-4 sm:px-6'>
+    {/* Page header */}
+    <div class='mb-8'>
+      <h1 class='text-2xl font-semibold tracking-tight text-slate-900'>Page Title</h1>
+      <p class='mt-1 text-slate-500'>Page description</p>
+    </div>
+
+    {/* Cards */}
+    <div class='mb-6'>{/* Card content */}</div>
+  </div>
+</div>
+```
 
-### Headings Hierarchy
+### Project View
 
-- **Page Title**: `text-6xl md:text-7xl font-bold` with gradient text
-- **Section Heading**: `text-3xl md:text-4xl font-bold`
-- **Subsection**: `text-xl font-bold`, `text-lg font-semibold`
-- **Component Title**: `text-base font-semibold`
+```jsx
+<div class='min-h-screen bg-slate-50'>
+  {/* Sticky header with tabs */}
+  <header class='sticky top-0 z-20 border-b border-slate-200 bg-white'>
+    <div class='mx-auto max-w-7xl px-6'>{/* Header + Tabs */}</div>
+  </header>
+
+  {/* Main content */}
+  <main class='mx-auto max-w-7xl px-6 py-6'>{/* Tab content */}</main>
+</div>
+```
 
-### Text Content
+## Accessibility
 
-- **Body**: `text-lg text-gray-500` for descriptions
-- **Label**: `text-xs sm:text-sm font-semibold text-gray-700`
-- **Meta**: `text-xs text-gray-500` for timestamps, secondary info
+### Focus States
 
-### Empty States
+All interactive elements use:
 
-- Icon + heading + description pattern
-- Muted colors: `text-gray-400` for icons, `text-gray-500` for text
-- Call-to-action when appropriate
+```
+focus:ring-2 focus:ring-blue-500/20 focus:outline-none
+```
 
-## Data Visualization
+### Color Contrast
 
-### Chart Containers
+- Primary text (`slate-900`) on white backgrounds: 15.4:1
+- Secondary text (`slate-500`) on white backgrounds: 5.6:1
+- Blue links (`blue-600`) on white backgrounds: 4.5:1
 
-```jsx
-<div style="background: #ffffff; border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); padding: 16px; margin: 16px 0;">
-```
+### Interactive Elements
 
-### Color Coding (AMSTAR Ratings)
-
-- **Yes**: `#22c55e` (Green)
-- **Partial Yes**: `#eab308` (Yellow)
-- **No**: `#ef4444` (Red)
-- **No MA/Not Applicable**: `#e5e7eb` (Gray)
-
-## Custom Scrollbars
-
-### Sidebar Scrollbar
-
-```css
-.sidebar-scrollbar {
-  scrollbar-width: thin;
-  scrollbar-color: #d1d5db #f9fafb;
-}
-.sidebar-scrollbar::-webkit-scrollbar {
-  width: 6px;
-}
-.sidebar-scrollbar::-webkit-scrollbar-thumb {
-  background: #d1d5db;
-  border-radius: 4px;
-}
-```
+- Minimum touch target: 44px for mobile
+- Clear visual feedback for all interactive states
+- Proper ARIA labels via Ark UI components
 
 ## Implementation Notes
 
 ### Framework
 
-- Built with **Solid.js** and **Tailwind CSS v4**
-- Uses **Vite** for building and **PWA** capabilities
-- State management via local stores and API integration
+- Built with **SolidJS** and **Tailwind CSS v4**
+- UI components from **Ark UI** (`@ark-ui/solid`)
+- Icons from **solid-icons** (fi, bi, ai, cg prefixes)
 
-### Responsive Design
+### Component Library
 
-- **Mobile-first** approach with `sm:` breakpoints
-- Flexible layouts with `flex-col sm:flex-row` patterns
-- Scalable typography with responsive text sizes
+Use components from `@/components/ui/`:
+
+- `select` - Dropdown selects with collections
+- `tabs` - Tab navigation
+- `switch` - Toggle switches
+- `avatar` - User avatars with fallbacks
+- `collapsible` - Expandable sections
+- `alert-dialog` - Confirmation dialogs
+- `toast` - Notifications
+- `editable` - Inline editing
 
-### Code Patterns
+### Responsive Design
 
-- Consistent use of SolidJS reactive patterns
-- Component composition with clear prop interfaces
-- Utility-first CSS with Tailwind classes
+- Mobile-first approach with `sm:` and `md:` breakpoints
+- Flexible layouts with `flex-col sm:flex-row` patterns
+- Grid layouts: `grid-cols-2 md:grid-cols-3`
 
-This style guide provides the foundation for maintaining visual consistency and implementing new features in the CoRATES application.
+This style guide reflects the actual patterns used in the CoRATES application as of the current implementation.
diff --git a/packages/web/src/components/dashboard/Dashboard.jsx b/packages/web/src/components/dashboard/Dashboard.jsx
index 579b97068..6d59a0c31 100644
--- a/packages/web/src/components/dashboard/Dashboard.jsx
+++ b/packages/web/src/components/dashboard/Dashboard.jsx
@@ -17,7 +17,6 @@ import { LANDING_URL } from '@/config/api.js';
 
 import DashboardHeader from './DashboardHeader.jsx';
 // import { StatsRow } from './StatsRow.jsx';
-import ProgressCard from './ProgressCard.jsx';
 import QuickActions from './QuickActions.jsx';
 import ActivityFeed from './ActivityFeed.jsx';
 import { ProjectsSection } from './ProjectsSection.jsx';
@@ -114,15 +113,14 @@ export function Dashboard() {
     isOnline,
     isLoggedIn,
     canCreateProject,
-    stats,
+    // stats,
     activities,
     subscriptionFetchFailed,
   } = useDashboardData();
-  const [showCreateForm, setShowCreateForm] = createSignal(false);
+  const [createModalOpen, setCreateModalOpen] = createSignal(false);
 
   const handleCreateProject = () => {
-    document.getElementById('projects-section')?.scrollIntoView({ behavior: 'smooth' });
-    setShowCreateForm(true);
+    setCreateModalOpen(true);
   };
 
   const handleStartROBINSI = () => {
@@ -177,8 +175,8 @@ export function Dashboard() {
             <Show when={isLoggedIn()}>
               <SectionErrorBoundary name='Projects'>
                 <ProjectsSection
-                  showCreateForm={showCreateForm}
-                  setShowCreateForm={setShowCreateForm}
+                  createModalOpen={createModalOpen}
+                  setCreateModalOpen={setCreateModalOpen}
                 />
               </SectionErrorBoundary>
             </Show>
@@ -191,15 +189,6 @@ export function Dashboard() {
 
           {/* Right sidebar */}
           <div class='space-y-6'>
-            {/* Progress card - only for logged in users */}
-            <Show when={isLoggedIn()}>
-              <ProgressCard
-                completed={stats().completedStudies}
-                total={stats().totalStudies}
-                subtitle='Studies across all projects'
-              />
-            </Show>
-
             <QuickActions
               onStartROBINSI={handleStartROBINSI}
               onStartAMSTAR2={handleStartAMSTAR2}
diff --git a/packages/web/src/components/dashboard/ProgressCard.jsx b/packages/web/src/components/dashboard/ProgressCard.jsx
deleted file mode 100644
index 5c16d8d60..000000000
--- a/packages/web/src/components/dashboard/ProgressCard.jsx
+++ /dev/null
@@ -1,85 +0,0 @@
-/**
- * ProgressCard - Shows overall progress with an SVG arc visualization
- */
-
-import { createMemo, Show, useContext } from 'solid-js';
-
-import { AnimationContext } from './Dashboard.jsx';
-
-/**
- * SVG arc progress indicator
- * @param {Object} props
- * @param {number} props.completed - Number of completed items
- * @param {number} props.total - Total number of items
- * @param {string} [props.title] - Card title
- * @param {string} [props.subtitle] - Subtitle text
- */
-export function ProgressCard(props) {
-  const animation = useContext(AnimationContext);
-
-  const percentage = createMemo(() => {
-    if (!props.total || props.total === 0) return 0;
-    return Math.round((props.completed / props.total) * 100);
-  });
-
-  // SVG arc calculations
-  const radius = 52;
-  const circumference = 2 * Math.PI * radius;
-  const strokeDashoffset = createMemo(() => {
-    return circumference - (percentage() / 100) * circumference;
-  });
-
-  return (
-    <div
-      class='flex flex-col items-center rounded-xl border border-stone-200/60 bg-white p-6 text-center'
-      style={animation.fadeUp(150)}
-    >
-      <h3 class='mb-4 text-sm font-medium text-stone-700'>{props.title || 'Overall Progress'}</h3>
-
-      {/* SVG Arc */}
-      <div class='relative mb-4'>
-        <svg width='140' height='140' viewBox='0 0 140 140'>
-          {/* Background arc */}
-          <circle cx='70' cy='70' r={radius} stroke='#f5f5f4' stroke-width='12' fill='none' />
-          {/* Progress arc */}
-          <circle
-            cx='70'
-            cy='70'
-            r={radius}
-            stroke='#3b82f6'
-            stroke-width='12'
-            fill='none'
-            stroke-linecap='round'
-            stroke-dasharray={circumference}
-            stroke-dashoffset={strokeDashoffset()}
-            transform='rotate(-90 70 70)'
-            class='transition-all duration-700 ease-out'
-          />
-        </svg>
-        {/* Center text */}
-        <div class='absolute inset-0 flex flex-col items-center justify-center'>
-          <span class='text-3xl font-bold text-stone-800 tabular-nums'>{percentage()}%</span>
-          <span class='text-xs text-stone-500'>complete</span>
-        </div>
-      </div>
-
-      {/* Stats below */}
-      <div class='flex items-center gap-4 text-sm'>
-        <div class='flex items-center gap-1.5'>
-          <span class='h-2 w-2 rounded-full bg-blue-500' />
-          <span class='text-stone-600'>{props.completed} done</span>
-        </div>
-        <div class='flex items-center gap-1.5'>
-          <span class='h-2 w-2 rounded-full bg-stone-200' />
-          <span class='text-stone-600'>{props.total - props.completed} remaining</span>
-        </div>
-      </div>
-
-      <Show when={props.subtitle}>
-        <p class='mt-3 text-xs text-stone-400'>{props.subtitle}</p>
-      </Show>
-    </div>
-  );
-}
-
-export default ProgressCard;
diff --git a/packages/web/src/components/dashboard/ProjectsSection.jsx b/packages/web/src/components/dashboard/ProjectsSection.jsx
index 87a022dcc..834b208a5 100644
--- a/packages/web/src/components/dashboard/ProjectsSection.jsx
+++ b/packages/web/src/components/dashboard/ProjectsSection.jsx
@@ -29,12 +29,10 @@ import { AnimationContext } from './Dashboard.jsx';
 import { useMyProjectsList } from '@primitives/useMyProjectsList.js';
 import { useBetterAuth } from '@api/better-auth-store.js';
 import { useSubscription } from '@primitives/useSubscription.js';
-import { API_BASE } from '@config/api.js';
 import { queryKeys } from '@lib/queryKeys.js';
-import projectStore from '@/stores/projectStore.js';
 
 import { ProjectCard } from './ProjectCard.jsx';
-import CreateProjectForm from '@/components/project/CreateProjectForm.jsx';
+import CreateProjectModal from '@/components/project/CreateProjectModal.jsx';
 import ContactPrompt from '@/components/project/ContactPrompt.jsx';
 
 /**
@@ -89,8 +87,8 @@ export function ProjectsSection(props) {
   // Subscription checks
   const { hasEntitlement, hasQuota, quotas, loading: subscriptionLoading } = useSubscription();
 
-  const showCreateForm = () => props.showCreateForm();
-  const setShowCreateForm = val => props.setShowCreateForm(val);
+  const createModalOpen = () => props.createModalOpen();
+  const setCreateModalOpen = val => props.setCreateModalOpen(val);
 
   // Local-first: assume user can create unless we definitively know they can't
   // Don't block UI on subscription loading - optimistically allow action
@@ -109,23 +107,6 @@ export function ProjectsSection(props) {
     return !hasEntitlement('project.create') ? 'entitlement' : 'quota';
   };
 
-  // Handlers
-  const handleProjectCreated = (
-    newProject,
-    pendingPdfs = [],
-    pendingRefs = [],
-    driveFiles = [],
-  ) => {
-    queryClient.invalidateQueries({ queryKey: queryKeys.projects.all });
-
-    if (pendingPdfs.length > 0 || pendingRefs.length > 0 || driveFiles.length > 0) {
-      projectStore.setPendingProjectData(newProject.id, { pendingPdfs, pendingRefs, driveFiles });
-    }
-
-    setShowCreateForm(false);
-    navigate(`/projects/${newProject.id}`);
-  };
-
   const openProject = projectId => {
     navigate(`/projects/${projectId}`);
   };
@@ -171,7 +152,7 @@ export function ProjectsSection(props) {
     if (props.onCreateClick) {
       props.onCreateClick();
     } else {
-      setShowCreateForm(true);
+      setCreateModalOpen(true);
     }
   };
 
@@ -210,16 +191,8 @@ export function ProjectsSection(props) {
         </div>
       </Show>
 
-      {/* Create form */}
-      <Show when={showCreateForm()}>
-        <div class='mb-6'>
-          <CreateProjectForm
-            apiBase={API_BASE}
-            onProjectCreated={handleProjectCreated}
-            onCancel={() => setShowCreateForm(false)}
-          />
-        </div>
-      </Show>
+      {/* Create Project Modal */}
+      <CreateProjectModal open={createModalOpen()} onOpenChange={setCreateModalOpen} />
 
       {/* Projects grid */}
       <div class='grid gap-4 sm:grid-cols-2 xl:grid-cols-3'>
diff --git a/packages/web/src/components/dashboard/index.js b/packages/web/src/components/dashboard/index.js
index 0ff93473d..fe3bd7c0e 100644
--- a/packages/web/src/components/dashboard/index.js
+++ b/packages/web/src/components/dashboard/index.js
@@ -8,7 +8,6 @@
 export { default } from './Dashboard.jsx';
 export { DashboardHeader } from './DashboardHeader.jsx';
 export { StatsRow, StatCard } from './StatsRow.jsx';
-export { ProgressCard } from './ProgressCard.jsx';
 export { QuickActions } from './QuickActions.jsx';
 export { ActivityFeed } from './ActivityFeed.jsx';
 export { ProjectCard } from './ProjectCard.jsx';
diff --git a/packages/web/src/components/project/CreateProjectModal.jsx b/packages/web/src/components/project/CreateProjectModal.jsx
new file mode 100644
index 000000000..1ed81fceb
--- /dev/null
+++ b/packages/web/src/components/project/CreateProjectModal.jsx
@@ -0,0 +1,225 @@
+/**
+ * CreateProjectModal - Simple modal dialog for creating a new project
+ *
+ * A clean, focused modal that only collects project name (required),
+ * description (optional), and organization (if user has multiple).
+ */
+
+import { createSignal, Show, createMemo, createEffect } from 'solid-js';
+import { useNavigate } from '@solidjs/router';
+import { useQueryClient } from '@tanstack/solid-query';
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogPositioner,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogCloseTrigger,
+  DialogBody,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { SimpleSelect } from '@/components/ui/select';
+import { showToast } from '@/components/ui/toast';
+import { FiX, FiFolder } from 'solid-icons/fi';
+
+import { apiFetch } from '@lib/apiFetch.js';
+import { useOrgs } from '@primitives/useOrgs.js';
+import { queryKeys } from '@lib/queryKeys.js';
+import { handleError, isErrorCode } from '@/lib/error-utils.js';
+import { AUTH_ERRORS } from '@corates/shared';
+import { isUnlimitedQuota } from '@corates/shared/plans';
+
+/**
+ * @param {Object} props
+ * @param {boolean} props.open - Whether the dialog is open
+ * @param {(open: boolean) => void} props.onOpenChange - Callback when open state changes
+ */
+export default function CreateProjectModal(props) {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  // Form state
+  const [projectName, setProjectName] = createSignal('');
+  const [projectDescription, setProjectDescription] = createSignal('');
+  const [selectedOrgId, setSelectedOrgId] = createSignal(null);
+  const [isSubmitting, setIsSubmitting] = createSignal(false);
+
+  // Get user's organizations
+  const { orgs, isLoading: orgsLoading } = useOrgs();
+
+  // Auto-select first org when orgs load and user has multiple
+  createEffect(() => {
+    const orgsList = orgs();
+    if (orgsList.length > 1 && !selectedOrgId()) {
+      setSelectedOrgId(orgsList[0].id);
+    }
+  });
+
+  // Resolve org: auto-select if single, otherwise use selection
+  const resolvedOrgId = createMemo(() => {
+    const orgsList = orgs();
+    if (orgsList.length === 1) {
+      return orgsList[0].id;
+    }
+    return selectedOrgId();
+  });
+
+  // Reset form when dialog closes
+  createEffect(() => {
+    if (!props.open) {
+      setProjectName('');
+      setProjectDescription('');
+      setSelectedOrgId(null);
+    }
+  });
+
+  const canSubmit = () => projectName().trim().length > 0 && !isSubmitting();
+
+  const handleSubmit = async e => {
+    e?.preventDefault();
+
+    if (!projectName().trim()) return;
+
+    const orgId = resolvedOrgId();
+    if (!orgId) {
+      showToast.error('Error', 'Please select an organization.');
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      const newProject = await apiFetch.post(
+        `/api/orgs/${orgId}/projects`,
+        {
+          name: projectName().trim(),
+          description: projectDescription().trim() || undefined,
+        },
+        { showToast: false },
+      );
+
+      // Invalidate project list and close dialog
+      queryClient.invalidateQueries({ queryKey: queryKeys.projects.all });
+      props.onOpenChange(false);
+
+      // Navigate to new project
+      navigate(`/projects/${newProject.id}`);
+    } catch (error) {
+      if (isErrorCode(error, AUTH_ERRORS.FORBIDDEN.code)) {
+        if (error.details?.reason === 'missing_entitlement') {
+          showToast.error(
+            'Feature Not Available',
+            `This feature requires the '${error.details.entitlement}' entitlement. Please upgrade your plan.`,
+          );
+        } else if (error.details?.reason === 'quota_exceeded') {
+          const { quotaKey, used, limit, requested } = error.details;
+          showToast.error(
+            'Quota Exceeded',
+            `${quotaKey}: Current usage ${used}, Limit ${isUnlimitedQuota(limit) ? 'unlimited' : limit}, Requested ${requested}`,
+          );
+        } else {
+          await handleError(error, { toastTitle: 'Creation Failed' });
+        }
+      } else {
+        await handleError(error, { toastTitle: 'Creation Failed' });
+      }
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog open={props.open} onOpenChange={props.onOpenChange}>
+      <DialogBackdrop class='backdrop-blur-sm' />
+      <DialogPositioner>
+        <DialogContent class='relative max-w-lg rounded-2xl shadow-2xl'>
+          <DialogHeader class='border-b-0 px-6 pt-6 pb-0'>
+            <div class='flex items-center gap-3'>
+              <div class='flex h-10 w-10 items-center justify-center rounded-xl bg-blue-50'>
+                <FiFolder class='h-5 w-5 text-blue-600' />
+              </div>
+              <div>
+                <DialogTitle class='text-lg'>Create a new project</DialogTitle>
+                <p class='text-sm text-gray-500'>
+                  You can add studies and invite collaborators later.
+                </p>
+              </div>
+            </div>
+            <DialogCloseTrigger class='absolute top-4 right-4'>
+              <FiX class='h-5 w-5' />
+            </DialogCloseTrigger>
+          </DialogHeader>
+
+          <form onSubmit={handleSubmit}>
+            <DialogBody class='space-y-4 px-6 pt-5'>
+              {/* Project Name */}
+              <div>
+                <label for='project-name' class='mb-1.5 block text-sm font-medium text-gray-700'>
+                  What should we call this project?
+                </label>
+                <input
+                  id='project-name'
+                  type='text'
+                  placeholder='My Systematic Review'
+                  value={projectName()}
+                  onInput={e => setProjectName(e.target.value)}
+                  autofocus
+                  class='w-full rounded-lg border border-gray-200 bg-white px-3.5 py-2.5 text-sm text-gray-900 placeholder-gray-400 shadow-sm transition-all duration-150 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 focus:outline-none'
+                />
+              </div>
+
+              {/* Organization - only show if multiple */}
+              <Show when={!orgsLoading() && orgs().length > 1}>
+                <div>
+                  <label class='mb-1.5 block text-sm font-medium text-gray-700'>
+                    Which team is this for?
+                  </label>
+                  <SimpleSelect
+                    items={orgs().map(org => ({ value: org.id, label: org.name }))}
+                    value={selectedOrgId()}
+                    onChange={value => setSelectedOrgId(value)}
+                    placeholder='Select a team'
+                    inDialog
+                  />
+                </div>
+              </Show>
+
+              {/* Description */}
+              <div>
+                <label
+                  for='project-description'
+                  class='mb-1.5 block text-sm font-medium text-gray-700'
+                >
+                  Add a description <span class='font-normal text-gray-400'>(optional)</span>
+                </label>
+                <textarea
+                  id='project-description'
+                  placeholder='What is this review about?'
+                  value={projectDescription()}
+                  onInput={e => setProjectDescription(e.target.value)}
+                  rows='2'
+                  class='w-full resize-none rounded-lg border border-gray-200 bg-white px-3.5 py-2.5 text-sm text-gray-900 placeholder-gray-400 shadow-sm transition-all duration-150 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 focus:outline-none'
+                />
+              </div>
+            </DialogBody>
+
+            <DialogFooter class='rounded-b-2xl border-t-0 bg-transparent px-6 pb-5'>
+              <Button
+                type='button'
+                variant='ghost'
+                onClick={() => props.onOpenChange(false)}
+                disabled={isSubmitting()}
+              >
+                Cancel
+              </Button>
+              <Button type='submit' disabled={!canSubmit()}>
+                {isSubmitting() ? 'Creating...' : 'Create Project'}
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </DialogPositioner>
+    </Dialog>
+  );
+}
diff --git a/packages/web/src/components/project/ProjectsPanel.jsx b/packages/web/src/components/project/ProjectsPanel.jsx
index e31a8b0f2..e4068aa7a 100644
--- a/packages/web/src/components/project/ProjectsPanel.jsx
+++ b/packages/web/src/components/project/ProjectsPanel.jsx
@@ -28,9 +28,8 @@ import {
 import { API_BASE } from '@config/api.js';
 import { queryKeys } from '@lib/queryKeys.js';
 import ProjectCard from '@/components/project/ProjectCard.jsx';
-import CreateProjectForm from '@/components/project/CreateProjectForm.jsx';
+import CreateProjectModal from '@/components/project/CreateProjectModal.jsx';
 import ContactPrompt from '@/components/project/ContactPrompt.jsx';
-import projectStore from '@/stores/projectStore.js';
 
 export default function ProjectsPanel() {
   const navigate = useNavigate();
@@ -57,7 +56,7 @@ export default function ProjectsPanel() {
     refetch: refetchSubscription,
   } = useSubscription();
 
-  const [showCreateForm, setShowCreateForm] = createSignal(false);
+  const [createModalOpen, setCreateModalOpen] = createSignal(false);
 
   // Check both entitlement and quota
   const canCreateProject = () => {
@@ -73,25 +72,6 @@ export default function ProjectsPanel() {
     return !hasEntitlement('project.create') ? 'entitlement' : 'quota';
   };
 
-  // Handle project creation
-  const handleProjectCreated = (
-    newProject,
-    pendingPdfs = [],
-    pendingRefs = [],
-    driveFiles = [],
-  ) => {
-    // Invalidate project list
-    queryClient.invalidateQueries({ queryKey: queryKeys.projects.all });
-
-    // Store pending data for the project view
-    if (pendingPdfs.length > 0 || pendingRefs.length > 0 || driveFiles.length > 0) {
-      projectStore.setPendingProjectData(newProject.id, { pendingPdfs, pendingRefs, driveFiles });
-    }
-
-    setShowCreateForm(false);
-    navigate(`/projects/${newProject.id}`);
-  };
-
   // Open a project
   const openProject = projectId => {
     navigate(`/projects/${projectId}`);
@@ -164,7 +144,7 @@ export default function ProjectsPanel() {
         <Show when={canCreateProject()}>
           <button
             class='inline-flex transform items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 font-medium text-white shadow-md transition-all duration-200 hover:scale-[1.02] hover:bg-blue-700 hover:shadow-lg focus:ring-2 focus:ring-blue-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100'
-            onClick={() => setShowCreateForm(!showCreateForm())}
+            onClick={() => setCreateModalOpen(true)}
             disabled={!isOnline()}
             title={!isOnline() ? 'Cannot create projects while offline' : ''}
           >
@@ -174,6 +154,9 @@ export default function ProjectsPanel() {
         </Show>
       </div>
 
+      {/* Create Project Modal */}
+      <CreateProjectModal open={createModalOpen()} onOpenChange={setCreateModalOpen} />
+
       {/* Subscription fetch error banner */}
       <Show when={subscriptionFetchFailed()}>
         <div class='flex items-center justify-between rounded-lg border border-amber-200 bg-amber-50 p-4 text-amber-800'>
@@ -200,15 +183,6 @@ export default function ProjectsPanel() {
         </div>
       </Show>
 
-      {/* Create Project Form */}
-      <Show when={showCreateForm()}>
-        <CreateProjectForm
-          apiBase={API_BASE}
-          onProjectCreated={handleProjectCreated}
-          onCancel={() => setShowCreateForm(false)}
-        />
-      </Show>
-
       {/* Projects Grid */}
       <div class='grid gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'>
         <Show
@@ -220,7 +194,7 @@ export default function ProjectsPanel() {
                 <Show when={canCreateProject()}>
                   <div class='flex justify-center'>
                     <button
-                      onClick={() => setShowCreateForm(true)}
+                      onClick={() => setCreateModalOpen(true)}
                       class='mt-4 font-medium text-blue-600 hover:text-blue-700'
                     >
                       Create your first project

From 140154f4ebcf78229ebb9cba4d3752ee082fcafb Mon Sep 17 00:00:00 2001
From: Jacob Maynard <jacobamaynard@proton.me>
Date: Sun, 18 Jan 2026 16:22:00 -0600
Subject: [PATCH 6/6] fix inconsistencies

---
 .../components/settings/pages/AcademicInfoSection.jsx | 11 ++---------
 .../src/components/settings/pages/PersonaSection.jsx  | 11 ++---------
 .../src/components/settings/shared/SettingField.jsx   |  5 ++++-
 packages/workers/src/durable-objects/ProjectDoc.ts    |  4 ++--
 4 files changed, 10 insertions(+), 21 deletions(-)

diff --git a/packages/web/src/components/settings/pages/AcademicInfoSection.jsx b/packages/web/src/components/settings/pages/AcademicInfoSection.jsx
index 147b3d71f..861fb6fad 100644
--- a/packages/web/src/components/settings/pages/AcademicInfoSection.jsx
+++ b/packages/web/src/components/settings/pages/AcademicInfoSection.jsx
@@ -6,20 +6,13 @@ import { createSignal, createMemo, Show, For } from 'solid-js';
 import { useBetterAuth } from '@api/better-auth-store.js';
 import { showToast } from '@/components/ui/toast';
 import { TITLE_OPTIONS } from '@/components/auth/RoleSelector.jsx';
-import { API_BASE } from '@config/api.js';
+import { apiFetch } from '@lib/apiFetch.js';
 
 /**
  * Sync profile changes to all projects the user is a member of
  */
 async function syncProfileToProjects() {
-  try {
-    await fetch(`${API_BASE}/api/users/sync-profile`, {
-      method: 'POST',
-      credentials: 'include',
-    });
-  } catch (err) {
-    console.error('Failed to sync profile to projects:', err);
-  }
+  await apiFetch('/api/users/sync-profile', { method: 'POST' });
 }
 import {
   Select,
diff --git a/packages/web/src/components/settings/pages/PersonaSection.jsx b/packages/web/src/components/settings/pages/PersonaSection.jsx
index d3981b3f6..3a9559b01 100644
--- a/packages/web/src/components/settings/pages/PersonaSection.jsx
+++ b/packages/web/src/components/settings/pages/PersonaSection.jsx
@@ -6,7 +6,7 @@ import { createSignal, Show, For } from 'solid-js';
 import { useBetterAuth } from '@api/better-auth-store.js';
 import { showToast } from '@/components/ui/toast';
 import { ROLES, getRoleLabel } from '@/components/auth/RoleSelector.jsx';
-import { API_BASE } from '@config/api.js';
+import { apiFetch } from '@lib/apiFetch.js';
 import {
   Select,
   SelectControl,
@@ -25,14 +25,7 @@ import {
  * Sync profile changes to all projects the user is a member of
  */
 async function syncProfileToProjects() {
-  try {
-    await fetch(`${API_BASE}/api/users/sync-profile`, {
-      method: 'POST',
-      credentials: 'include',
-    });
-  } catch (err) {
-    console.error('Failed to sync profile to projects:', err);
-  }
+  await apiFetch('/api/users/sync-profile', { method: 'POST' });
 }
 
 const personaCollection = createListCollection({
diff --git a/packages/web/src/components/settings/shared/SettingField.jsx b/packages/web/src/components/settings/shared/SettingField.jsx
index 0138d2490..b98d8f348 100644
--- a/packages/web/src/components/settings/shared/SettingField.jsx
+++ b/packages/web/src/components/settings/shared/SettingField.jsx
@@ -28,7 +28,7 @@ export default function SettingField(props) {
         </label>
         <Show
           when={props.editing}
-          fallback={<div class='mt-1 text-gray-900'>{props.value || 'Not set'}</div>}
+          fallback={<div class='mt-1 text-gray-900'>{props.value ?? 'Not set'}</div>}
         >
           <div class='mt-2'>{props.editContent}</div>
         </Show>
@@ -37,6 +37,7 @@ export default function SettingField(props) {
         when={props.editing}
         fallback={
           <button
+            type='button'
             onClick={props.onEdit}
             class='ml-4 text-sm font-medium text-blue-600 hover:text-blue-700'
           >
@@ -46,6 +47,7 @@ export default function SettingField(props) {
       >
         <div class='ml-4 flex space-x-2'>
           <button
+            type='button'
             onClick={() => props.onSave?.()}
             disabled={props.saving}
             class='rounded-lg bg-blue-600 px-3 py-1 text-sm font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:outline-none disabled:opacity-50'
@@ -53,6 +55,7 @@ export default function SettingField(props) {
             Save
           </button>
           <button
+            type='button'
             onClick={() => props.onCancel?.()}
             disabled={props.saving}
             class='px-3 py-1 text-sm font-medium text-gray-600 hover:text-gray-800 disabled:opacity-50'
diff --git a/packages/workers/src/durable-objects/ProjectDoc.ts b/packages/workers/src/durable-objects/ProjectDoc.ts
index 517b7e2fb..5790782e6 100644
--- a/packages/workers/src/durable-objects/ProjectDoc.ts
+++ b/packages/workers/src/durable-objects/ProjectDoc.ts
@@ -561,10 +561,10 @@ export class ProjectDoc implements DurableObject {
       memberYMap.set('image', (user.image as string) || null);
       membersMap.set(user.id, memberYMap);
     } else {
-      // Update image if user has one and it differs from stored (handles OAuth image sync)
+      // Update image if it differs from stored (handles OAuth image sync and avatar removal)
       const storedImage = existingMember.get('image') as string | null;
       const userImage = (user.image as string) || null;
-      if (userImage && userImage !== storedImage) {
+      if (userImage !== storedImage) {
         existingMember.set('image', userImage);
       }
       // Also update name/displayName if missing