diff --git a/frontend/src/app/kosmos/KosmosSidebar.tsx b/frontend/src/app/kosmos/KosmosSidebar.tsx
index 24ce8f0..c71a2fe 100644
--- a/frontend/src/app/kosmos/KosmosSidebar.tsx
+++ b/frontend/src/app/kosmos/KosmosSidebar.tsx
@@ -98,7 +98,7 @@ export function KosmosSidebar() {
               ) : (
                 <SidebarMenuButton asChild size="lg" tooltip="Zoë" className="font-semibold font-serif">
                   <Link to="/recollections">
-                    <span className="flex size-8 min-w-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground dark:bg-white dark:text-black">
+                    <span className="flex size-8 min-w-8 items-center justify-center rounded-lg dark:bg-white dark:text-black">
                       <span
                         className="size-6 shrink-0 rounded-[2px] opacity-90"
                         style={{
diff --git a/frontend/src/app/recollections/layout/RecollectionSidebar.tsx b/frontend/src/app/recollections/layout/RecollectionSidebar.tsx
index 368bef0..2d8fc04 100644
--- a/frontend/src/app/recollections/layout/RecollectionSidebar.tsx
+++ b/frontend/src/app/recollections/layout/RecollectionSidebar.tsx
@@ -222,22 +222,21 @@ export function RecollectionSidebar() {
       className="flex h-full w-[var(--sidebar-width)] shrink-0 flex-col border-r border-sidebar-border bg-sidebar text-sidebar-foreground"
       style={{ '--sidebar-width': '16rem' } as React.CSSProperties}
     >
-      <div className="flex shrink-0 items-center justify-between border-b border-sidebar-border px-2 py-2">
-        <span className="text-xs font-medium text-sidebar-foreground/70">Pages</span>
-        <Button
-          type="button"
-          variant="ghost"
-          size="sm"
-          className="h-7 gap-1 px-2 text-xs text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
-          onClick={addPage}
-        >
-          <Plus className="size-3.5" />
-          New page
-        </Button>
-      </div>
       <SidebarContent className="flex-1 overflow-y-auto border-0 bg-transparent">
         <SidebarGroup>
-          <SidebarGroupLabel>Logos</SidebarGroupLabel>
+          <div className="flex items-center justify-between gap-2 px-2 py-1.5">
+            <SidebarGroupLabel className="py-0">Logos</SidebarGroupLabel>
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="h-6 gap-1 px-1.5 text-xs text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+              onClick={addPage}
+            >
+              <Plus className="size-3.5" />
+              New page
+            </Button>
+          </div>
           <SidebarGroupContent>
             <SidebarMenu>
               {pages.length === 0 ? (
diff --git a/frontend/src/app/recollections/layout/RecollectionSidebarContext.tsx b/frontend/src/app/recollections/layout/RecollectionSidebarContext.tsx
index c52c3eb..07d63f5 100644
--- a/frontend/src/app/recollections/layout/RecollectionSidebarContext.tsx
+++ b/frontend/src/app/recollections/layout/RecollectionSidebarContext.tsx
@@ -63,7 +63,8 @@ export function RecollectionSidebarProvider({ children }: { children: React.Reac
     [recollectionId]
   )
 
-  // Load page tree and run migration when empty (treat existing single doc as "Main" page).
+  // Load page tree from storage only when recollection changes (not on every searchParams change).
+  // Otherwise adding a new page would trigger searchParams change and this would overwrite tree before persist.
   useEffect(() => {
     if (!recollectionId) return
     let t = getLogosPageTree(recollectionId)
@@ -75,15 +76,20 @@ export function RecollectionSidebarProvider({ children }: { children: React.Reac
       t = [main]
     }
     setTree(t)
+  }, [recollectionId])
+
+  // Sync activePageId from URL when searchParams or tree changes (e.g. after adding a page).
+  useEffect(() => {
+    if (!recollectionId) return
     const pageFromUrl = searchParams.get('page')
-    const validIdFromUrl = pageFromUrl && t.some((p) => p.id === pageFromUrl) ? pageFromUrl : null
     setActivePageId((prev) => {
+      const validIdFromUrl = pageFromUrl && tree.some((p) => p.id === pageFromUrl) ? pageFromUrl : null
       if (validIdFromUrl) return validIdFromUrl
-      const firstId = t[0]?.id ?? null
-      if (prev != null && t.some((p) => p.id === prev)) return prev
+      const firstId = tree[0]?.id ?? null
+      if (prev != null && tree.some((p) => p.id === prev)) return prev
       return firstId
     })
-  }, [recollectionId, searchParams])
+  }, [recollectionId, searchParams, tree])
 
   // Persist tree when sidebar changes it.
   useEffect(() => {