diff --git a/src/app/admin/pages/[id]/page.tsx b/src/app/admin/pages/[id]/page.tsx
index cf03f15..9ccee7e 100644
--- a/src/app/admin/pages/[id]/page.tsx
+++ b/src/app/admin/pages/[id]/page.tsx
@@ -7,6 +7,7 @@
 
 import { useState, useEffect, useCallback } from 'react'
 import { useRouter, useParams } from 'next/navigation'
+import { ArrowSquareOut } from '@phosphor-icons/react'
 import { AdminLayout } from '@/components/admin/admin-layout'
 import { ErrorAlert } from '@/components/error-alert'
 import { PageForm } from '@/components/admin/pages/page-form'
@@ -157,9 +158,22 @@ export default function AdminPageEditorPage() {
   return (
     <AdminLayout>
       <div className="mx-auto max-w-3xl space-y-6">
-        <h1 className="text-2xl font-bold text-foreground">
-          {isCreateMode ? 'Create Page' : 'Edit Page'}
-        </h1>
+        <div className="flex items-center gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {isCreateMode ? 'Create Page' : 'Edit Page'}
+          </h1>
+          {!isCreateMode && form.slug && (
+            <a
+              href={`/p/${form.slug}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+            >
+              <ArrowSquareOut size={16} aria-hidden="true" />
+              View page
+            </a>
+          )}
+        </div>
 
         {error && <ErrorAlert message={error} onDismiss={() => setError(null)} />}
 
diff --git a/src/components/admin/pages/page-row.test.tsx b/src/components/admin/pages/page-row.test.tsx
index 110021f..5036a22 100644
--- a/src/components/admin/pages/page-row.test.tsx
+++ b/src/components/admin/pages/page-row.test.tsx
@@ -66,12 +66,19 @@ describe('PageRow', () => {
     expect(screen.getByText('Draft')).toBeInTheDocument()
   })
 
-  it('renders edit link to admin page editor', () => {
+  it('makes the whole card a link to the edit page', () => {
     render(<PageRow page={mockPage} depth={0} onDelete={vi.fn()} />)
     const editLink = screen.getByRole('link', { name: /edit about this community/i })
     expect(editLink).toHaveAttribute('href', '/admin/pages/page-about')
   })
 
+  it('renders view link that opens public page in new tab', () => {
+    render(<PageRow page={mockPage} depth={0} onDelete={vi.fn()} />)
+    const viewLink = screen.getByRole('link', { name: /view about this community/i })
+    expect(viewLink).toHaveAttribute('href', '/p/about')
+    expect(viewLink).toHaveAttribute('target', '_blank')
+  })
+
   it('renders delete button', () => {
     render(<PageRow page={mockPage} depth={0} onDelete={vi.fn()} />)
     expect(screen.getByRole('button', { name: /delete about this community/i })).toBeInTheDocument()
diff --git a/src/components/admin/pages/page-row.tsx b/src/components/admin/pages/page-row.tsx
index d95e95e..d772e20 100644
--- a/src/components/admin/pages/page-row.tsx
+++ b/src/components/admin/pages/page-row.tsx
@@ -4,7 +4,7 @@
  */
 
 import Link from 'next/link'
-import { PencilSimple, TrashSimple } from '@phosphor-icons/react'
+import { ArrowSquareOut, TrashSimple } from '@phosphor-icons/react'
 import { cn } from '@/lib/utils'
 import type { PageTreeNode, PageStatus } from '@/lib/api/types'
 
@@ -30,17 +30,22 @@ export function PageRow({ page, depth, onDelete }: PageRowProps) {
       <div
         data-depth={depth}
         className={cn(
-          'flex items-center justify-between rounded-md border border-border bg-card p-3',
+          'group relative flex items-center justify-between rounded-md border border-border bg-card p-3 transition-colors hover:bg-card-hover',
           depth > 0 && 'ml-6'
         )}
       >
+        <Link
+          href={`/admin/pages/${page.id}`}
+          className="absolute inset-0 rounded-md focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+          aria-label={`Edit ${page.title}`}
+        />
         <div className="flex items-center gap-3">
           <div>
             <p className="text-sm font-medium text-foreground">{page.title}</p>
             <p className="text-xs text-muted-foreground">/p/{page.slug}</p>
           </div>
         </div>
-        <div className="flex items-center gap-2">
+        <div className="relative flex items-center gap-2">
           <span
             className={cn(
               'rounded-full px-2 py-0.5 text-xs font-medium',
@@ -49,17 +54,22 @@ export function PageRow({ page, depth, onDelete }: PageRowProps) {
           >
             {STATUS_LABELS[page.status]}
           </span>
-          <Link
-            href={`/admin/pages/${page.id}`}
-            className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
-            aria-label={`Edit ${page.title}`}
+          <a
+            href={`/p/${page.slug}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="relative rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+            aria-label={`View ${page.title}`}
           >
-            <PencilSimple size={16} aria-hidden="true" />
-          </Link>
+            <ArrowSquareOut size={16} aria-hidden="true" />
+          </a>
           <button
             type="button"
-            onClick={() => onDelete(page.id)}
-            className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
+            onClick={(e) => {
+              e.preventDefault()
+              onDelete(page.id)
+            }}
+            className="relative rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
             aria-label={`Delete ${page.title}`}
           >
             <TrashSimple size={16} aria-hidden="true" />