diff --git a/apps/web/src/app/[locale]/governance/page.tsx b/apps/web/src/app/[locale]/governance/page.tsx
index e46f2dcf..f00b564a 100644
--- a/apps/web/src/app/[locale]/governance/page.tsx
+++ b/apps/web/src/app/[locale]/governance/page.tsx
@@ -32,6 +32,21 @@ import { QueueTab } from './tabs/queue-tab'
 import { AgentMarketTab } from './tabs/agent-market-tab'
 import { AutomationInventoryTab } from './tabs/automation-inventory-tab'
 
+const GOVERNANCE_SECTION_IDS = [
+  'slo',
+  'events',
+  'queue',
+  'agent-market',
+  'automation-inventory',
+] as const
+
+function normalizeGovernanceSectionId(value: string | null): string | undefined {
+  if (!value) return undefined
+  return GOVERNANCE_SECTION_IDS.includes(value as (typeof GOVERNANCE_SECTION_IDS)[number])
+    ? value
+    : undefined
+}
+
 export default function GovernancePage({
   params,
 }: {
@@ -50,16 +65,32 @@ export default function GovernancePage({
   const activeSection = governanceSections.find(section => section.id === requestedTab) ?? governanceSections[0]
 
   useEffect(() => {
-    const tab = new URLSearchParams(window.location.search).get('tab') ?? undefined
+    const hashTab = window.location.hash ? window.location.hash.slice(1) : null
+    const tab = normalizeGovernanceSectionId(
+      new URLSearchParams(window.location.search).get('tab') ?? hashTab
+    )
     setRequestedTab(tab)
 
     if (!tab) return
-    const section = document.getElementById(tab)
-    section?.scrollIntoView({ block: 'start' })
+    let cancelled = false
+    const scrollToRequestedSection = () => {
+      if (cancelled) return
+      document.getElementById(tab)?.scrollIntoView({ block: 'start' })
+    }
+    const frame = window.requestAnimationFrame(scrollToRequestedSection)
+    const timers = [150, 600, 1500, 3000].map(delay =>
+      window.setTimeout(scrollToRequestedSection, delay)
+    )
+    return () => {
+      cancelled = true
+      window.cancelAnimationFrame(frame)
+      timers.forEach(timer => window.clearTimeout(timer))
+    }
   }, [])
 
   return (
     <AppLayout locale={params.locale}>
+      <div className="min-w-0 overflow-x-hidden">
       {/* ComplianceBadge 橫幅 — PR 3 接 /governance/compliance-score API */}
       <GlassCard variant="subtle" padding="sm" className="mb-3">
         <div className="flex items-center gap-2">
@@ -79,7 +110,7 @@ export default function GovernancePage({
           return (
             <Link
               key={section.id}
-              href={`/${params.locale}/governance#${section.id}`}
+              href={`/${params.locale}/governance?tab=${section.id}#${section.id}`}
               className="group min-w-0 border bg-white p-3 text-[#141413] no-underline transition hover:border-[#d97757] hover:bg-[#fffaf7]"
               style={{
                 borderColor: selected ? '#d97757' : '#e0ddd4',
@@ -125,6 +156,7 @@ export default function GovernancePage({
           )
         })}
       </div>
+      </div>
     </AppLayout>
   )
 }