diff --git a/web/components/custom/sidebar/partial/page-section.tsx b/web/components/custom/sidebar/partial/page-section.tsx
index 94216769..2a0edad1 100644
--- a/web/components/custom/sidebar/partial/page-section.tsx
+++ b/web/components/custom/sidebar/partial/page-section.tsx
@@ -9,6 +9,7 @@ import { Button } from "@/components/ui/button"
 import { LaIcon } from "@/components/custom/la-icon"
 import { toast } from "sonner"
 import Link from "next/link"
+import { useEffect } from "react"
 import {
 	DropdownMenu,
 	DropdownMenuContent,
@@ -57,7 +58,6 @@ export const PageSection: React.FC<{ pathname?: string }> = ({ pathname }) => {
 	const [show, setShow] = useAtom(pageShowAtom)
 
 	const pageCount = me?.root.personalPages?.length || 0
-	// const isActive = pathname ? pathname.startsWith("/pages") : false
 	const isActive = pathname === "/pages"
 
 	if (!me) return null
diff --git a/web/components/routes/page/detail/PageDetailRoute.tsx b/web/components/routes/page/detail/PageDetailRoute.tsx
index ca075c36..204fb5f3 100644
--- a/web/components/routes/page/detail/PageDetailRoute.tsx
+++ b/web/components/routes/page/detail/PageDetailRoute.tsx
@@ -23,12 +23,44 @@ import { useRouter } from "next/navigation"
 
 const TITLE_PLACEHOLDER = "Untitled"
 
+const emptyPage = (page: PersonalPage): boolean => {
+	return (!page.title || page.title.trim() === "") && (!page.content || Object.keys(page.content).length === 0)
+}
+
+export const deleteEmptyPage = (currentPageId: string | null) => {
+	const router = useRouter()
+	const { me } = useAccount({
+		root: {
+			personalPages: []
+		}
+	})
+
+	useEffect(() => {
+		const handleRouteChange = () => {
+			if (!currentPageId || !me?.root?.personalPages) return
+
+			const currentPage = me.root.personalPages.find(page => page?.id === currentPageId)
+			if (currentPage && emptyPage(currentPage)) {
+				const index = me.root.personalPages.findIndex(page => page?.id === currentPageId)
+				if (index !== -1) {
+					me.root.personalPages.splice(index, 1)
+				}
+			}
+		}
+
+		return () => {
+			handleRouteChange()
+		}
+	}, [currentPageId, me, router])
+}
+
 export function PageDetailRoute({ pageId }: { pageId: string }) {
 	const { me } = useAccount({ root: { personalLinks: [] } })
 	const isMobile = useMedia("(max-width: 770px)")
 	const page = useCoState(PersonalPage, pageId as ID<PersonalPage>)
 	const router = useRouter()
 	const confirm = useConfirm()
+	deleteEmptyPage(pageId)
 
 	const handleDelete = async () => {
 		const result = await confirm({