diff --git a/apps/web/src/components/admin/settings/appearance/__tests__/appearance-view.test.tsx b/apps/web/src/components/admin/settings/appearance/__tests__/appearance-view.test.tsx
index a3fef2d6b7..5a32f366fd 100644
--- a/apps/web/src/components/admin/settings/appearance/__tests__/appearance-view.test.tsx
+++ b/apps/web/src/components/admin/settings/appearance/__tests__/appearance-view.test.tsx
@@ -4,7 +4,7 @@
  * draft bar at once, and Review and publish lists it before it goes live.
  */
 import { afterEach, describe, expect, it, vi } from 'vitest'
-import { cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+import { act, cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
 import type { ReactNode } from 'react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { defaultDesign } from '@/lib/shared/design/schema'
@@ -14,6 +14,7 @@ const server = vi.hoisted(() => ({ published: [] as unknown[] }))
 vi.mock('@tanstack/react-router', () => ({
   useRouter: () => ({ invalidate: async () => {} }),
   ClientOnly: ({ children }: { children: ReactNode }) => <>{children}</>,
+  Link: ({ children }: { children: ReactNode }) => <a>{children}</a>,
 }))
 vi.mock('@/components/admin/settings/branding/portal-preview', () => ({
   PortalPreview: ({ design }: { design: { css: string } }) => (
@@ -70,6 +71,20 @@ describe('AppearanceView', () => {
     expect(screen.getByRole('status').textContent).toContain('Draft · 1 change, not live')
   })
 
+  it('opens Sections when a section is picked in the preview', async () => {
+    mount()
+    expect(screen.queryByText('Menu style')).toBeNull()
+    act(() => {
+      window.dispatchEvent(
+        new MessageEvent('message', {
+          data: { type: 'quackback:preview-section', section: 'band' },
+          origin: window.location.origin,
+        })
+      )
+    })
+    expect(await screen.findByText('Menu style')).toBeTruthy()
+  })
+
   it('applies a preset’s whole look to the draft', async () => {
     mount()
     fireEvent.click(screen.getByRole('button', { name: 'Start from a preset' }))
diff --git a/apps/web/src/components/admin/settings/appearance/__tests__/change-list.test.ts b/apps/web/src/components/admin/settings/appearance/__tests__/change-list.test.ts
new file mode 100644
index 0000000000..1f9b923fdd
--- /dev/null
+++ b/apps/web/src/components/admin/settings/appearance/__tests__/change-list.test.ts
@@ -0,0 +1,22 @@
+/**
+ * Review and publish names each change the way the Appearance controls do.
+ */
+import { describe, expect, it } from 'vitest'
+import { changeLabel } from '../change-list'
+
+describe('changeLabel', () => {
+  it.each([
+    ['brand.light.accent', 'Accent'],
+    ['brand.dark.ink', 'Dark text'],
+    ['brand.fonts.heading.id', 'Heading font'],
+    ['layout.nav', 'Menu style'],
+    ['pages.feedback.defaultSort', 'Default sort'],
+    ['pages.feedback.headline.title.en', 'Headline'],
+    ['pages.feedback.headline', 'Headline'],
+    ['pages.feedback.headline.subtitle.de', 'Subtitle'],
+    ['pages.feedback.welcome.show', 'Welcome message'],
+    ['pages.feedback.welcome.body.content', 'Welcome message text'],
+  ])('%s is %s', (path, label) => {
+    expect(changeLabel(path)).toBe(label)
+  })
+})
diff --git a/apps/web/src/components/admin/settings/appearance/appearance-view.tsx b/apps/web/src/components/admin/settings/appearance/appearance-view.tsx
index ec36cbda32..b0e020ff5a 100644
--- a/apps/web/src/components/admin/settings/appearance/appearance-view.tsx
+++ b/apps/web/src/components/admin/settings/appearance/appearance-view.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { isEmptyTiptapDoc } from '@/lib/shared/utils/is-empty-tiptap-doc'
 import type { TiptapContent } from '@/lib/shared/db-types'
 import { ClientOnly } from '@tanstack/react-router'
@@ -22,9 +22,11 @@ import { useDesignDraft } from './use-design-draft'
 export function AppearanceView({
   workspaceName,
   faviconUrl,
+  logoUrl = null,
 }: {
   workspaceName: string
   faviconUrl: string | null
+  logoUrl?: string | null
 }) {
   const draft = useDesignDraft()
   const [theme, setTheme] = useState<'light' | 'dark'>(
@@ -33,6 +35,23 @@ export function AppearanceView({
   const [viewport, setViewport] = useState<'desktop' | 'mobile'>('desktop')
   const [reviewing, setReviewing] = useState(false)
   const [history, setHistory] = useState(false)
+  const [tab, setTab] = useState('brand')
+  // A section clicked in the preview opens its controls.
+  useEffect(() => {
+    function onMessage(event: MessageEvent) {
+      if (event.origin !== window.location.origin) return
+      const message = event.data as { type?: string; section?: unknown } | null
+      if (message?.type !== 'quackback:preview-section' || typeof message.section !== 'string')
+        return
+      setTab('sections')
+      const id = `design-section-${message.section}`
+      requestAnimationFrame(() =>
+        document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+      )
+    }
+    window.addEventListener('message', onMessage)
+    return () => window.removeEventListener('message', onMessage)
+  }, [])
   // The welcome message reaches the preview on the structural channel, which
   // the feedback page already reads; an empty body hides it.
   const { show, body } = draft.design.pages.feedback.welcome
@@ -50,7 +69,7 @@ export function AppearanceView({
   return (
     <div className="grid grid-cols-1 items-start gap-6 xl:grid-cols-[minmax(360px,440px)_minmax(0,1fr)]">
       <div className="min-w-0 space-y-4">
-        <Tabs defaultValue="brand">
+        <Tabs value={tab} onValueChange={(next) => setTab(String(next))}>
           <div className="flex items-center gap-2">
             <TabsList>
               <TabsTrigger value="brand">Brand</TabsTrigger>
@@ -61,7 +80,7 @@ export function AppearanceView({
             </Button>
           </div>
           <TabsContent value="brand" className="pt-4">
-            <BrandPanel design={draft.design} update={draft.update} />
+            <BrandPanel design={draft.design} update={draft.update} logoUrl={logoUrl} />
           </TabsContent>
           <TabsContent value="sections" className="pt-4">
             <SectionsPanel design={draft.design} update={draft.update} />
@@ -115,6 +134,7 @@ export function AppearanceView({
             draftDirty
             design={draft.preview}
             scaleToDesktop
+            sort={draft.design.pages.feedback.defaultSort}
             viewport={viewport}
             workspaceName={workspaceName}
             faviconUrl={faviconUrl}
diff --git a/apps/web/src/components/admin/settings/appearance/brand-panel.tsx b/apps/web/src/components/admin/settings/appearance/brand-panel.tsx
index 415a97a93e..d44746ccb8 100644
--- a/apps/web/src/components/admin/settings/appearance/brand-panel.tsx
+++ b/apps/web/src/components/admin/settings/appearance/brand-panel.tsx
@@ -9,6 +9,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
+import { Link } from '@tanstack/react-router'
 import { Button } from '@/components/ui/button'
 import { normaliseColor } from '@/lib/shared/design/color'
 import { BUNDLED_FONTS, type BundledFontId } from '@/lib/shared/design/fonts'
@@ -145,8 +146,17 @@ function FontSelect({
   )
 }
 
-/** The Brand tab: mode, colours, fonts and corners. */
-export function BrandPanel({ design, update }: { design: PortalDesign; update: Update }) {
+/** The Brand tab: the logo, mode, colours, fonts and corners. */
+export function BrandPanel({
+  design,
+  update,
+  logoUrl = null,
+}: {
+  design: PortalDesign
+  update: Update
+  /** The workspace logo, which Settings › General owns for the portal, the admin and email. */
+  logoUrl?: string | null
+}) {
   const [moreColours, setMoreColours] = useState(false)
   const { light, dark, fonts } = design.brand
   const headingFont = fonts.heading.kind === 'bundled' ? fonts.heading.id : fonts.heading.fallback
@@ -159,6 +169,21 @@ export function BrandPanel({ design, update }: { design: PortalDesign; update: U
       <PresetGallery
         onApply={(preset) => update((draft) => Object.assign(draft, applyPreset(draft, preset)))}
       />
+      <div className="flex items-center gap-3">
+        <span className="w-32 shrink-0 text-[13px] font-medium">Logo</span>
+        {logoUrl ? (
+          <img
+            src={logoUrl}
+            alt=""
+            className="size-8 rounded-md border border-border object-contain"
+          />
+        ) : (
+          <span className="text-[13px] text-muted-foreground">None</span>
+        )}
+        <Button variant="ghost" size="sm" className="ms-auto" asChild>
+          <Link to="/admin/settings/general">Change in General</Link>
+        </Button>
+      </div>
       <DesignTiles
         name="design-mode"
         label="Mode"
diff --git a/apps/web/src/components/admin/settings/appearance/change-list.tsx b/apps/web/src/components/admin/settings/appearance/change-list.tsx
index 553f61a4e7..0b70a418bb 100644
--- a/apps/web/src/components/admin/settings/appearance/change-list.tsx
+++ b/apps/web/src/components/admin/settings/appearance/change-list.tsx
@@ -24,6 +24,7 @@ const LABELS: Record<string, string> = {
   'layout.density': 'Density',
   'layout.width': 'Page width',
   'layout.filters': 'Filters side',
+  'pages.feedback.defaultSort': 'Default sort',
 }
 
 /** A change's name as the Appearance controls call it. */
@@ -33,6 +34,10 @@ export function changeLabel(path: string): string {
     const name = COLOURS[colour[2]] ?? colour[2]
     return colour[1] === 'dark' ? `Dark ${name.toLowerCase()}` : name
   }
+  if (path.startsWith('pages.feedback.welcome.body')) return 'Welcome message text'
+  if (path === 'pages.feedback.welcome.show') return 'Welcome message'
+  const headline = path.match(/^pages\.feedback\.headline(?:\.(title|subtitle))?/)
+  if (headline) return headline[1] === 'subtitle' ? 'Subtitle' : 'Headline'
   const font = path.match(/^(brand\.fonts\.(?:heading|body))\./)
   return LABELS[font ? font[1] : path] ?? path
 }
diff --git a/apps/web/src/components/admin/settings/appearance/drawings.tsx b/apps/web/src/components/admin/settings/appearance/drawings.tsx
index cc8900c5b6..42aadb278d 100644
--- a/apps/web/src/components/admin/settings/appearance/drawings.tsx
+++ b/apps/web/src/components/admin/settings/appearance/drawings.tsx
@@ -128,6 +128,31 @@ export function BandDrawing({ band }: { band: Layout['band'] }) {
   )
 }
 
+/** Bars for a feed's order: rising for trending, falling for top, a dot on the newest. */
+export function SortDrawing({ sort }: { sort: 'trending' | 'top' | 'new' }) {
+  const heights = sort === 'top' ? ['h-5', 'h-3.5', 'h-2'] : ['h-2', 'h-3.5', 'h-5']
+  if (sort === 'new')
+    return (
+      <span className="flex w-12 flex-col gap-1">
+        {[0, 1, 2].map((row) => (
+          <span key={row} className="flex items-center gap-1">
+            <span
+              className={cn('size-1.5 rounded-full', row === 0 ? 'bg-primary' : 'bg-transparent')}
+            />
+            <span className="h-1.5 flex-1 rounded-sm bg-foreground/30" />
+          </span>
+        ))}
+      </span>
+    )
+  return (
+    <span className="flex items-end gap-1">
+      {heights.map((height, index) => (
+        <span key={index} className={cn('w-2 rounded-sm bg-foreground/35', height)} />
+      ))}
+    </span>
+  )
+}
+
 export function FiltersDrawing({ filters }: { filters: Layout['filters'] }) {
   return (
     <span className={cn('flex w-14 gap-1', filters === 'start' && 'flex-row-reverse')}>
diff --git a/apps/web/src/components/admin/settings/appearance/sections-panel.tsx b/apps/web/src/components/admin/settings/appearance/sections-panel.tsx
index b8993f43bb..4406369f8a 100644
--- a/apps/web/src/components/admin/settings/appearance/sections-panel.tsx
+++ b/apps/web/src/components/admin/settings/appearance/sections-panel.tsx
@@ -13,6 +13,7 @@ import {
   DensityDrawing,
   FiltersDrawing,
   NavDrawing,
+  SortDrawing,
   WidthDrawing,
 } from './drawings'
 
@@ -31,7 +32,7 @@ export function SectionsPanel({ design, update }: { design: PortalDesign; update
   const { layout } = design
   return (
     <div className="space-y-8">
-      <section className="space-y-4">
+      <section id="design-section-header" className="scroll-mt-4 space-y-4">
         <h3 className="text-sm font-semibold">Header</h3>
         <DesignTiles
           name="design-header"
@@ -57,7 +58,7 @@ export function SectionsPanel({ design, update }: { design: PortalDesign; update
         />
       </section>
 
-      <section className="space-y-4">
+      <section id="design-section-band" className="scroll-mt-4 space-y-4">
         <h3 className="text-sm font-semibold">Top band</h3>
         <DesignTiles
           name="design-band"
@@ -96,7 +97,7 @@ export function SectionsPanel({ design, update }: { design: PortalDesign; update
         ))}
       </section>
 
-      <section className="space-y-3">
+      <section id="design-section-welcome" className="scroll-mt-4 space-y-3">
         <SettingRow
           label="Welcome message"
           htmlFor="design-welcome"
@@ -118,7 +119,7 @@ export function SectionsPanel({ design, update }: { design: PortalDesign; update
         )}
       </section>
 
-      <section className="space-y-4">
+      <section id="design-section-feed" className="scroll-mt-4 space-y-4">
         <h3 className="text-sm font-semibold">Feed</h3>
         <DesignTiles
           name="design-cards"
@@ -131,6 +132,29 @@ export function SectionsPanel({ design, update }: { design: PortalDesign; update
             drawing: <CardsDrawing cards={cards} />,
           }))}
         />
+        <DesignTiles
+          name="design-sort"
+          label="Default sort"
+          value={design.pages.feedback.defaultSort}
+          onChange={(sort) => update((draft) => void (draft.pages.feedback.defaultSort = sort))}
+          options={[
+            {
+              value: 'trending',
+              label: 'Trending',
+              drawing: <SortDrawing sort="trending" />,
+            },
+            {
+              value: 'top',
+              label: 'Top',
+              drawing: <SortDrawing sort="top" />,
+            },
+            {
+              value: 'new',
+              label: 'New',
+              drawing: <SortDrawing sort="new" />,
+            },
+          ]}
+        />
         <DesignTiles
           name="design-density"
           label="Density"
@@ -144,7 +168,7 @@ export function SectionsPanel({ design, update }: { design: PortalDesign; update
         />
       </section>
 
-      <section className="space-y-4">
+      <section id="design-section-filters" className="scroll-mt-4 space-y-4">
         <h3 className="text-sm font-semibold">Filters</h3>
         <DesignTiles
           name="design-filters"
@@ -159,7 +183,7 @@ export function SectionsPanel({ design, update }: { design: PortalDesign; update
         />
       </section>
 
-      <section className="space-y-4">
+      <section id="design-section-site" className="scroll-mt-4 space-y-4">
         <h3 className="text-sm font-semibold">Whole site</h3>
         <DesignTiles
           name="design-width"
diff --git a/apps/web/src/components/admin/settings/branding/portal-preview.tsx b/apps/web/src/components/admin/settings/branding/portal-preview.tsx
index ec77a83dc2..35e94a86a1 100644
--- a/apps/web/src/components/admin/settings/branding/portal-preview.tsx
+++ b/apps/web/src/components/admin/settings/branding/portal-preview.tsx
@@ -32,6 +32,8 @@ interface PortalPreviewProps {
    * desktop layouts (an inline header, the filter panel) show as visitors see them.
    */
   scaleToDesktop?: boolean
+  /** The feed's sort in the frame; a design's default sort, which changes by reloading it. */
+  sort?: 'trending' | 'top' | 'new'
   /** A draft portal design, resolved: applied in the frame in place of the saved one. */
   design?: {
     css: string
@@ -49,8 +51,11 @@ const DESKTOP_WIDTH = 1280
  * preview flag as a boolean, the default sort included) so the frame loads
  * without a redirect first.
  */
-export function portalPreviewSrc(theme: 'light' | 'dark') {
-  return `/?theme=${theme}&preview=true&sort=trending`
+export function portalPreviewSrc(
+  theme: 'light' | 'dark',
+  sort: 'trending' | 'top' | 'new' = 'trending'
+) {
+  return `/?theme=${theme}&preview=true&sort=${sort}`
 }
 
 /**
@@ -72,6 +77,7 @@ export function PortalPreview({
   faviconUrl,
   design = null,
   scaleToDesktop = false,
+  sort = 'trending',
 }: PortalPreviewProps) {
   const frameBox = useRef<HTMLDivElement>(null)
   const [boxWidth, setBoxWidth] = useState(0)
@@ -171,7 +177,7 @@ export function PortalPreview({
         <iframe
           key={refreshKey}
           ref={iframeRef}
-          src={portalPreviewSrc(theme)}
+          src={portalPreviewSrc(theme, sort)}
           title="Portal preview"
           className="w-full border-0 bg-background"
           style={
diff --git a/apps/web/src/components/public/__tests__/portal-header.test.tsx b/apps/web/src/components/public/__tests__/portal-header.test.tsx
index 0d2086d410..4821832edd 100644
--- a/apps/web/src/components/public/__tests__/portal-header.test.tsx
+++ b/apps/web/src/components/public/__tests__/portal-header.test.tsx
@@ -380,7 +380,9 @@ describe('PortalHeader — design layouts', () => {
   it('keeps two rows on the legacy theme and for a stacked design', () => {
     for (const portalDesign of [undefined, design('stacked')]) {
       const { container, unmount } = mountWith(portalDesign)
-      expect(container.querySelector('header')?.hasAttribute('data-qb-section')).toBe(false)
+      const header = container.querySelector('header')!
+      expect(header.querySelector('.md\\:block nav')).toBeNull()
+      expect(header.querySelector('.justify-center nav')).toBeNull()
       unmount()
     }
   })
diff --git a/apps/web/src/components/public/__tests__/portal-preview-listener.test.tsx b/apps/web/src/components/public/__tests__/portal-preview-listener.test.tsx
index 89d29f115c..7f368bb558 100644
--- a/apps/web/src/components/public/__tests__/portal-preview-listener.test.tsx
+++ b/apps/web/src/components/public/__tests__/portal-preview-listener.test.tsx
@@ -159,3 +159,46 @@ describe('a design draft in the preview', () => {
     expect(document.documentElement.hasAttribute('data-qb-band')).toBe(false)
   })
 })
+
+describe('picking a section in a design preview', () => {
+  const sent: unknown[] = []
+  const designMessage = {
+    type: 'quackback:preview-design',
+    design: { css: '', attributes: {}, fontIds: [], headline: null },
+  }
+
+  beforeEach(() => {
+    sent.length = 0
+    vi.spyOn(window.parent, 'postMessage').mockImplementation((message: unknown) => {
+      sent.push(message)
+    })
+  })
+
+  function section(name: string, inner = '<p>text</p>') {
+    const element = document.createElement('div')
+    element.setAttribute('data-qb-section', name)
+    element.innerHTML = inner
+    document.body.appendChild(element)
+    return element
+  }
+
+  it('reports the section clicked, but not a click on a link in it', async () => {
+    await postDesign(designMessage)
+    const band = section('band', '<p>Headline</p><a href="/x">Link</a>')
+    band.querySelector('p')!.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    band.querySelector('a')!.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    expect(
+      sent.filter((m) => (m as { type: string }).type === 'quackback:preview-section')
+    ).toEqual([{ type: 'quackback:preview-section', section: 'band' }])
+    band.remove()
+  })
+
+  it('stays out of the way until a design is previewed', () => {
+    const band = section('band')
+    band.querySelector('p')!.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    expect(
+      sent.filter((m) => (m as { type: string }).type === 'quackback:preview-section')
+    ).toEqual([])
+    band.remove()
+  })
+})
diff --git a/apps/web/src/components/public/feedback/feedback-container.tsx b/apps/web/src/components/public/feedback/feedback-container.tsx
index 6686463a7c..5561929489 100644
--- a/apps/web/src/components/public/feedback/feedback-container.tsx
+++ b/apps/web/src/components/public/feedback/feedback-container.tsx
@@ -87,6 +87,8 @@ interface FeedbackContainerProps {
   currentBoard?: string
   currentSearch?: string
   currentSort?: PublicPostSort
+  /** The sort when the visitor has not picked one, which clearing a search returns to. */
+  defaultSort?: 'trending' | 'top' | 'new'
   defaultBoardId?: string
   /** User info if authenticated */
   user?: { name: string | null; email: string } | null
@@ -157,6 +159,7 @@ export function FeedbackContainer({
   currentBoard,
   currentSearch,
   currentSort = 'trending',
+  defaultSort = 'trending',
   defaultBoardId,
   user,
   boardPermissions,
@@ -356,7 +359,7 @@ export function FeedbackContainer({
   function handleSearchChange(search: string): void {
     setFilters({
       search: search || undefined,
-      sort: sortForSearch(activeSort, activeSearch, search, 'trending'),
+      sort: sortForSearch(activeSort, activeSearch, search, defaultSort),
     })
   }
 
@@ -460,7 +463,7 @@ export function FeedbackContainer({
   }
 
   return (
-    <div>
+    <div data-qb-section="feed">
       <div className="flex gap-6 lg:gap-8 [[data-qb-filters=start]_&]:flex-row-reverse">
         <div className="flex-1 min-w-0">
           <FeedbackHeader
diff --git a/apps/web/src/components/public/feedback/feedback-sidebar.tsx b/apps/web/src/components/public/feedback/feedback-sidebar.tsx
index 79dd79e8cf..252c17b730 100644
--- a/apps/web/src/components/public/feedback/feedback-sidebar.tsx
+++ b/apps/web/src/components/public/feedback/feedback-sidebar.tsx
@@ -85,7 +85,7 @@ export function FeedbackSidebar({ children, footer }: FeedbackSidebarProps) {
   }, [])
 
   return (
-    <aside className="hidden w-72 shrink-0 lg:block xl:w-80">
+    <aside data-qb-section="filters" className="hidden w-72 shrink-0 lg:block xl:w-80">
       <div
         ref={columnRef}
         className="sticky top-[calc(var(--portal-header-height,0px)+1.5rem)] flex max-h-[calc(100vh-3rem)] flex-col gap-3"
diff --git a/apps/web/src/components/public/feedback/portal-feed-skeleton.tsx b/apps/web/src/components/public/feedback/portal-feed-skeleton.tsx
index 5a4c8abc57..3d32c1c7e0 100644
--- a/apps/web/src/components/public/feedback/portal-feed-skeleton.tsx
+++ b/apps/web/src/components/public/feedback/portal-feed-skeleton.tsx
@@ -193,9 +193,16 @@ function LoadingComposer() {
  * the boards, statuses and tags stand in as bars, laid out like the loaded
  * page so it swaps in without moving.
  */
-export function PortalFeedSkeleton({ poweredBy }: { poweredBy?: React.ReactNode }) {
+export function PortalFeedSkeleton({
+  poweredBy,
+  defaultSort = 'trending',
+}: {
+  poweredBy?: React.ReactNode
+  /** The feed's sort when the visitor has not picked one. */
+  defaultSort?: 'trending' | 'top' | 'new'
+}) {
   const { filters, setFilters, activeFilterCount } = usePublicFilters()
-  const sort = filters.sort ?? 'trending'
+  const sort = filters.sort ?? defaultSort
 
   return (
     <div>
@@ -210,7 +217,7 @@ export function PortalFeedSkeleton({ poweredBy }: { poweredBy?: React.ReactNode
             onSearchChange={(search) =>
               setFilters({
                 search: search || undefined,
-                sort: sortForSearch(sort, filters.search, search, 'trending'),
+                sort: sortForSearch(sort, filters.search, search, defaultSort),
               })
             }
             filterButton={
diff --git a/apps/web/src/components/public/feedback/portal-welcome-card.tsx b/apps/web/src/components/public/feedback/portal-welcome-card.tsx
index ac948bce82..5235dc443a 100644
--- a/apps/web/src/components/public/feedback/portal-welcome-card.tsx
+++ b/apps/web/src/components/public/feedback/portal-welcome-card.tsx
@@ -11,7 +11,10 @@ function PortalWelcomeCardImpl({ welcomeCard }: PortalWelcomeCardProps) {
   if (!welcomeCard || isEmptyTiptapDoc(welcomeCard.body)) return null
 
   return (
-    <section className="mb-6 rounded-xl border border-border/60 bg-card/60 p-5 sm:p-6">
+    <section
+      data-qb-section="welcome"
+      className="mb-6 rounded-xl border border-border/60 bg-card/60 p-5 sm:p-6"
+    >
       <RichTextContent content={welcomeCard.body} />
     </section>
   )
diff --git a/apps/web/src/components/public/portal-header.tsx b/apps/web/src/components/public/portal-header.tsx
index c937cb9eaa..5e1c57686d 100644
--- a/apps/web/src/components/public/portal-header.tsx
+++ b/apps/web/src/components/public/portal-header.tsx
@@ -365,7 +365,7 @@ export function PortalHeader({
   // Two-row layout: Logo + Auth on top, Navigation below
   return (
     // A banner landmark, so the logo and account controls sit in one.
-    <header ref={headerRef} className={headerClassName}>
+    <header ref={headerRef} className={headerClassName} data-qb-section="header">
       {/* Row 1: Logo + Name + Auth */}
       <div>
         <div className="max-w-[var(--qb-page-max,72rem)] mx-auto w-full px-4 sm:px-6">
diff --git a/apps/web/src/components/public/portal-preview-design.ts b/apps/web/src/components/public/portal-preview-design.ts
index a7b71283ad..42b7a30ca5 100644
--- a/apps/web/src/components/public/portal-preview-design.ts
+++ b/apps/web/src/components/public/portal-preview-design.ts
@@ -55,3 +55,25 @@ export function applyDesignAttributes(attributes: Record<string, string>): () =>
     }
   }
 }
+
+/** Outlines the innermost section under the pointer, so it reads as clickable. */
+export const SECTION_OUTLINE_CSS =
+  '[data-qb-section]{cursor:pointer}' +
+  '[data-qb-section]:hover:not(:has([data-qb-section]:hover)){outline:2px dashed oklch(0.55 0 0 / 0.7);outline-offset:4px}'
+
+/**
+ * A click on a section (not on one of its links, buttons or fields) tells
+ * Appearance which section to open. Returns what stops listening.
+ */
+export function startSectionPicking(): () => void {
+  function onClick(event: MouseEvent) {
+    const target = event.target as Element | null
+    if (!target || target.closest('a, button, input, textarea, select, [role="button"]')) return
+    const section = target.closest('[data-qb-section]')?.getAttribute('data-qb-section')
+    if (!section) return
+    event.preventDefault()
+    window.parent.postMessage({ type: 'quackback:preview-section', section }, window.location.origin)
+  }
+  document.addEventListener('click', onClick, true)
+  return () => document.removeEventListener('click', onClick, true)
+}
diff --git a/apps/web/src/components/public/portal-preview-listener.tsx b/apps/web/src/components/public/portal-preview-listener.tsx
index 5ba433e305..db32d0f4e8 100644
--- a/apps/web/src/components/public/portal-preview-listener.tsx
+++ b/apps/web/src/components/public/portal-preview-listener.tsx
@@ -109,11 +109,18 @@ export function PortalPreviewProvider({
   }, [active])
 
   const stylesheet = useMemo(() => (css ? previewStylesheet(css) : ''), [css])
-  // Sets the draft's attributes on <html> and puts the saved ones back when it changes.
+  // While a draft is previewed: its attributes on <html> (the saved ones come
+  // back when it changes), and a click on a section tells Appearance which.
   useEffect(() => {
-    if (!design || !designChannel.current) return
-    return designChannel.current.applyDesignAttributes(design.attributes)
-  }, [design])
+    const channel = designChannel.current
+    if (!design || !channel) return
+    const restore = channel.applyDesignAttributes(design.attributes)
+    const stopPicking = active ? channel.startSectionPicking() : () => {}
+    return () => {
+      restore()
+      stopPicking()
+    }
+  }, [design, active])
   const fontIds = design?.fontIds.join(' ') ?? ''
   useEffect(() => {
     for (const id of fontIds.split(' ').filter(Boolean)) loadBrandingFont(id).catch(() => {})
@@ -130,6 +137,9 @@ export function PortalPreviewProvider({
       </PreviewHeadlineContext.Provider>
       {stylesheet ? <style data-preview-override="">{stylesheet}</style> : null}
       {design?.css ? <style data-preview-design="">{design.css}</style> : null}
+      {design && designChannel.current ? (
+        <style data-preview-sections="">{designChannel.current.SECTION_OUTLINE_CSS}</style>
+      ) : null}
     </PreviewDraftProvider>
   )
 }
diff --git a/apps/web/src/lib/shared/design/__tests__/view.test.ts b/apps/web/src/lib/shared/design/__tests__/view.test.ts
index 8df4bea25f..9fb43d38e9 100644
--- a/apps/web/src/lib/shared/design/__tests__/view.test.ts
+++ b/apps/web/src/lib/shared/design/__tests__/view.test.ts
@@ -4,7 +4,13 @@
  */
 import { describe, expect, it } from 'vitest'
 import { generateWorkspaceThemeCSS } from '@/lib/shared/theme'
-import { portalFontIds, portalTheme, portalThemeMode, savedWelcomeCard } from '../view'
+import {
+  portalDefaultSort,
+  portalFontIds,
+  portalTheme,
+  portalThemeMode,
+  savedWelcomeCard,
+} from '../view'
 
 const brandingConfig = {
   themeMode: 'dark' as const,
@@ -37,7 +43,7 @@ describe('portalTheme', () => {
       fontSans: '"Fraunces", serif',
       fontIds: ['fraunces'],
       attributes: {},
-      feedback: { welcome: null, headline: null },
+      feedback: { welcome: null, headline: null, defaultSort: 'trending' as const },
     }
     expect(portalTheme({ brandingConfig, customCss: '.x {}', portalDesign })).toEqual({
       themeMode: 'user',
@@ -60,7 +66,7 @@ describe('portalFontIds', () => {
       fontSans: '',
       fontIds: ['inter', 'fraunces'],
       attributes: {},
-      feedback: { welcome: null, headline: null },
+      feedback: { welcome: null, headline: null, defaultSort: 'trending' as const },
     }
     expect(portalFontIds({ portalDesign })).toEqual(['inter', 'fraunces'])
   })
@@ -78,7 +84,7 @@ describe('portalThemeMode', () => {
         fontSans: '',
         fontIds: [],
         attributes: {},
-        feedback: { welcome: null, headline: null },
+        feedback: { welcome: null, headline: null, defaultSort: 'trending' as const },
       },
     })
     expect(portalThemeMode(v2('auto'))).toBe('user')
@@ -100,7 +106,7 @@ describe('savedWelcomeCard', () => {
       fontSans: '',
       fontIds: [],
       attributes: {},
-      feedback: { welcome, headline: null },
+      feedback: { welcome, headline: null, defaultSort: 'trending' },
     }) as never
 
   it('keeps the portal settings’ card on legacy', () => {
@@ -114,3 +120,22 @@ describe('savedWelcomeCard', () => {
     expect(savedWelcomeCard(v2(null), legacy)).toBeUndefined()
   })
 })
+
+describe('portalDefaultSort', () => {
+  it('is trending on legacy and the design’s choice on v2', () => {
+    expect(portalDefaultSort(undefined)).toBe('trending')
+    expect(portalDefaultSort({ portalDesign: { engine: 'legacy' } })).toBe('trending')
+    const portalDesign = {
+      engine: 'v2' as const,
+      mode: 'auto' as const,
+      revision: 1,
+      themeStyles: '',
+      customCss: '',
+      fontSans: '',
+      fontIds: [],
+      attributes: {},
+      feedback: { welcome: null, headline: null, defaultSort: 'new' as const },
+    }
+    expect(portalDefaultSort({ portalDesign })).toBe('new')
+  })
+})
diff --git a/apps/web/src/lib/shared/design/design-view.ts b/apps/web/src/lib/shared/design/design-view.ts
index 90623c4842..9792ad2589 100644
--- a/apps/web/src/lib/shared/design/design-view.ts
+++ b/apps/web/src/lib/shared/design/design-view.ts
@@ -31,6 +31,7 @@ export function designView(
     feedback: {
       welcome: feedbackWelcome(doc),
       headline: doc.pages.feedback.headline,
+      defaultSort: doc.pages.feedback.defaultSort,
     },
   }
 }
diff --git a/apps/web/src/lib/shared/design/view.ts b/apps/web/src/lib/shared/design/view.ts
index bbc13ada40..643d49ee64 100644
--- a/apps/web/src/lib/shared/design/view.ts
+++ b/apps/web/src/lib/shared/design/view.ts
@@ -31,6 +31,8 @@ export type PortalDesignView =
         /** The welcome message, or null when it is off or empty. */
         welcome: TiptapContent | null
         headline: { title: LocalizedText; subtitle: LocalizedText } | null
+        /** The feed's sort when the visitor has not picked one. */
+        defaultSort: 'trending' | 'top' | 'new'
       }
     }
 
@@ -67,6 +69,14 @@ export function savedWelcomeCard<T extends { body: unknown }>(
   return design.feedback.welcome ? { body: design.feedback.welcome } : undefined
 }
 
+/** The feed's sort when the visitor has not picked one: the design's, else trending. */
+export function portalDefaultSort(
+  settings: { portalDesign?: PortalDesignView } | null | undefined
+): 'trending' | 'top' | 'new' {
+  const view = settings?.portalDesign
+  return view?.engine === 'v2' ? view.feedback.defaultSort : 'trending'
+}
+
 /** The bundled families a v2 design loads; legacy finds its one family from its CSS. */
 export function portalFontIds(settings: ThemeSettings | null | undefined): readonly string[] {
   const view = settings?.portalDesign
diff --git a/apps/web/src/routes/__tests__/root.document-renders.test.tsx b/apps/web/src/routes/__tests__/root.document-renders.test.tsx
index 110d6b38d8..125fe0bb9d 100644
--- a/apps/web/src/routes/__tests__/root.document-renders.test.tsx
+++ b/apps/web/src/routes/__tests__/root.document-renders.test.tsx
@@ -174,7 +174,7 @@ describe('the portal’s own theme', () => {
       fontSans: '',
       fontIds: [],
       attributes: { 'data-qb-nav': 'pills' },
-      feedback: { welcome: null, headline: null },
+      feedback: { welcome: null, headline: null, defaultSort: 'trending' as const },
     },
   })
 
diff --git a/apps/web/src/routes/_portal/index.tsx b/apps/web/src/routes/_portal/index.tsx
index 477e1f3f17..634a08993b 100644
--- a/apps/web/src/routes/_portal/index.tsx
+++ b/apps/web/src/routes/_portal/index.tsx
@@ -18,7 +18,7 @@ import {
   isProductEnabled,
   type PortalWelcomeCard as PortalWelcomeCardData,
 } from '@/lib/shared/types/settings'
-import { savedWelcomeCard } from '@/lib/shared/design/view'
+import { portalDefaultSort, savedWelcomeCard } from '@/lib/shared/design/view'
 import { isStatusPagePublished } from '@/lib/shared/status-settings'
 import { isPortalSupportSurfaceEnabled } from '@/lib/shared/support-surfaces'
 import { getShowPoweredByFn } from '@/lib/server/functions/powered-by'
@@ -48,11 +48,15 @@ const searchSchema = z.object({
 })
 
 /** Build the portalData query params from the current search + session. */
-function portalDataParams(searchParams: z.infer<typeof searchSchema>, userId: string | undefined) {
+function portalDataParams(
+  searchParams: z.infer<typeof searchSchema>,
+  userId: string | undefined,
+  defaultSort: 'trending' | 'top' | 'new'
+) {
   return {
     boardSlug: searchParams.board,
     search: searchParams.search,
-    sort: searchParams.sort ?? ('trending' as const),
+    sort: searchParams.sort ?? defaultSort,
     statusSlugs: searchParams.status?.length ? searchParams.status : undefined,
     tagIds: searchParams.tagIds?.length ? searchParams.tagIds : undefined,
     userId,
@@ -108,7 +112,9 @@ export const Route = createFileRoute('/_portal/')({
     // prefetchQuery never rejects (it swallows the queryFn error into the
     // cache), so no rejection handler is needed here.
     void queryClient.prefetchQuery(
-      portalQueries.portalData(portalDataParams(searchParams, session?.user?.id))
+      portalQueries.portalData(
+        portalDataParams(searchParams, session?.user?.id, portalDefaultSort(org))
+      )
     )
 
     const showPoweredBy = await getShowPoweredByFn()
@@ -161,6 +167,7 @@ function PublicPortalPage() {
           <Suspense
             fallback={
               <PortalFeedSkeleton
+                defaultSort={portalDefaultSort(settings)}
                 poweredBy={
                   showPoweredBy ? <PortalPoweredBy workspaceSlug={settings?.slug ?? ''} /> : null
                 }
@@ -220,7 +227,8 @@ function PortalFeed() {
 
   const currentBoard = liveSearch.board
   const currentSearch = liveSearch.search
-  const currentSort = liveSearch.sort ?? 'trending'
+  const defaultSort = portalDefaultSort(settings)
+  const currentSort = liveSearch.sort ?? defaultSort
 
   // A visitor's first post or vote mints an anonymous session mid-action,
   // which changes the viewer and so the feed's key. Deferring the viewer
@@ -234,12 +242,12 @@ function PortalFeed() {
   const deferredViewerId = useDeferredValue(liveViewerId)
   const previousFeedCached =
     queryClient.getQueryData(
-      portalQueries.portalData(portalDataParams(search, deferredViewerId)).queryKey
+      portalQueries.portalData(portalDataParams(search, deferredViewerId, defaultSort)).queryKey
     ) !== undefined
   const viewerId =
     deferredViewerId !== liveViewerId && !previousFeedCached ? liveViewerId : deferredViewerId
   const { data: portalData } = useSuspenseQuery(
-    portalQueries.portalData(portalDataParams(search, viewerId))
+    portalQueries.portalData(portalDataParams(search, viewerId, defaultSort))
   )
 
   // Seeds the shared statuses cache from this response so a post-detail
@@ -272,6 +280,7 @@ function PortalFeed() {
       currentBoard={currentBoard}
       currentSearch={currentSearch}
       currentSort={currentSort}
+      defaultSort={defaultSort}
       defaultBoardId={portalData.boards[0]?.id}
       boardPermissions={portalData.boardPermissions}
       facets={portalData.facets}
diff --git a/apps/web/src/routes/admin/settings.portal.tsx b/apps/web/src/routes/admin/settings.portal.tsx
index 3c34577598..4c29260430 100644
--- a/apps/web/src/routes/admin/settings.portal.tsx
+++ b/apps/web/src/routes/admin/settings.portal.tsx
@@ -123,6 +123,7 @@ function PortalSettingsPage() {
     <DesignedPortalPage
       workspaceName={settings.name}
       faviconUrl={settings.faviconData?.url ?? settings.brandingData?.logoUrl ?? null}
+      logoUrl={settings.brandingData?.logoUrl ?? null}
     />
   )
 }
@@ -130,9 +131,11 @@ function PortalSettingsPage() {
 function DesignedPortalPage({
   workspaceName,
   faviconUrl,
+  logoUrl,
 }: {
   workspaceName: string
   faviconUrl: string | null
+  logoUrl: string | null
 }) {
   const { tab } = Route.useSearch()
   const tabs = <PortalTabs current={tab ?? 'appearance'} />
@@ -140,7 +143,7 @@ function DesignedPortalPage({
   return (
     <SettingsPage page="/admin/settings/portal" width="wide">
       {tabs}
-      <AppearanceView workspaceName={workspaceName} faviconUrl={faviconUrl} />
+      <AppearanceView workspaceName={workspaceName} faviconUrl={faviconUrl} logoUrl={logoUrl} />
     </SettingsPage>
   )
 }