diff --git a/app/(home-pages)/home/HomeLayout.tsx b/app/(home-pages)/home/HomeLayout.tsx
index 6b99e806..d2764987 100644
--- a/app/(home-pages)/home/HomeLayout.tsx
+++ b/app/(home-pages)/home/HomeLayout.tsx
@@ -231,7 +231,7 @@ export function LeafletList(props: {
             }}
           >
             <LeafletListItem
-              title={props?.titles?.[leaflet.root_entity] || "Untitled"}
+              title={props?.titles?.[leaflet.root_entity]}
               archived={archived}
               token={leaflet}
               draftInPublication={
@@ -275,13 +275,13 @@ function useSearchedLeaflets(
 
   let sortedLeaflets = leaflets.sort((a, b) => {
     if (sort === "alphabetical") {
-      if (titles[a.token.root_entity] === titles[b.token.root_entity]) {
+      let titleA = titles[a.token.root_entity] ?? "Untitled";
+      let titleB = titles[b.token.root_entity] ?? "Untitled";
+
+      if (titleA === titleB) {
         return a.added_at > b.added_at ? -1 : 1;
       } else {
-        return titles[a.token.root_entity].toLocaleLowerCase() >
-          titles[b.token.root_entity].toLocaleLowerCase()
-          ? 1
-          : -1;
+        return titleA.toLocaleLowerCase() > titleB.toLocaleLowerCase() ? 1 : -1;
       }
     } else {
       return a.added_at === b.added_at
diff --git a/app/(home-pages)/home/LeafletList/LeafletInfo.tsx b/app/(home-pages)/home/LeafletList/LeafletInfo.tsx
index f2326132..bebdaa44 100644
--- a/app/(home-pages)/home/LeafletList/LeafletInfo.tsx
+++ b/app/(home-pages)/home/LeafletList/LeafletInfo.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { PermissionToken } from "src/replicache";
+import { PermissionToken, useEntity } from "src/replicache";
 import { LeafletOptions } from "./LeafletOptions";
 import Link from "next/link";
 import { use, useState } from "react";
@@ -8,6 +8,7 @@ import { TemplateSmall } from "components/Icons/TemplateSmall";
 import { timeAgo } from "src/utils/timeAgo";
 import { usePublishLink } from "components/ShareOptions";
 import { Separator } from "components/Layout";
+import { usePageTitle } from "components/utils/UpdateLeafletTitle";
 
 export const LeafletInfo = (props: {
   title?: string;
@@ -28,13 +29,20 @@ export const LeafletInfo = (props: {
   let prettyCreatedAt = props.added_at ? timeAgo(props.added_at) : "";
   let prettyPublishedAt = props.publishedAt ? timeAgo(props.publishedAt) : "";
 
+  // Look up root page first, like UpdateLeafletTitle does
+  let firstPage = useEntity(props.leaflet_id, "root/page")[0];
+  let entityID = firstPage?.data.value || props.leaflet_id;
+  let titleFromDb = usePageTitle(entityID);
+
+  let title = props.title ?? titleFromDb ?? "Untitled";
+
   return (
     <div
       className={`leafletInfo w-full min-w-0 flex flex-col ${props.className}`}
     >
       <div className="flex justify-between items-center shrink-0 max-w-full gap-2 leading-tight overflow-hidden">
         <h3 className="sm:text-lg text-base truncate w-full min-w-0">
-          {props.title}
+          {title}
         </h3>
         <div className="flex gap-1 shrink-0">
           {props.isTemplate && props.display === "list" ? (
diff --git a/app/(home-pages)/home/LeafletList/LeafletListItem.tsx b/app/(home-pages)/home/LeafletList/LeafletListItem.tsx
index bb596b82..1d80e760 100644
--- a/app/(home-pages)/home/LeafletList/LeafletListItem.tsx
+++ b/app/(home-pages)/home/LeafletList/LeafletListItem.tsx
@@ -14,7 +14,7 @@ export const LeafletListItem = (props: {
   display: "list" | "grid";
   cardBorderHidden: boolean;
   added_at: string;
-  title: string;
+  title?: string;
   draftInPublication?: string;
   published?: boolean;
   publishedAt?: string;