diff --git a/apps/pwa/src/components/InstructionSheet.tsx b/apps/pwa/src/components/InstructionSheet.tsx
new file mode 100644
index 0000000..ba5d8d5
--- /dev/null
+++ b/apps/pwa/src/components/InstructionSheet.tsx
@@ -0,0 +1,189 @@
+/**
+ * InstructionSheet — shared OS-specific notification re-enable guidance bottom sheet.
+ *
+ * Extracted from PermissionDeniedBanner (Phase 5 UAT-05-T4 fix).
+ * Used by both PermissionDeniedBanner and SettingsSheet.
+ *
+ * Security: T-05-24 — all copy is plain-text JSX children, no dangerouslySetInnerHTML.
+ */
+
+import { X } from 'lucide-react'
+
+// ── OS detection ──────────────────────────────────────────────────────────
+
+function isIOS(): boolean {
+  return /iPad|iPhone|iPod/.test(navigator.userAgent) &&
+    !(window as unknown as { MSStream?: unknown }).MSStream
+}
+
+// ── Instruction steps ────────────────────────────────────────────────────
+
+const IOS_STEPS = [
+  'Open Settings on your iPhone',
+  'Scroll down and tap Safari',
+  'Tap Notifications',
+  'Allow notifications for FamilySync',
+]
+
+const ANDROID_STEPS = [
+  'Open Chrome on your phone',
+  'Tap the three-dot menu → Settings',
+  'Tap Site Settings → Notifications',
+  'Find FamilySync and tap Allow',
+]
+
+// ── Instruction sheet ────────────────────────────────────────────────────
+
+interface InstructionSheetProps {
+  onClose: () => void
+}
+
+export function InstructionSheet({ onClose }: InstructionSheetProps) {
+  const steps = isIOS() ? IOS_STEPS : ANDROID_STEPS
+  const platform = isIOS() ? 'iOS' : 'Android'
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-label={`Re-enable notifications on ${platform}`}
+      style={{
+        position: 'fixed',
+        inset: 0,
+        background: 'var(--color-overlay, rgba(0,0,0,0.32))',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'flex-end',
+        zIndex: 1000,
+      }}
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose()
+      }}
+    >
+      <div
+        style={{
+          background: 'var(--color-surface, #ffffff)',
+          borderRadius: '12px 12px 0 0',
+          padding: 'var(--space-6, 24px)',
+          maxHeight: '90dvh',
+          overflowY: 'auto',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 'var(--space-4, 16px)',
+          fontFamily: 'var(--font-family-base, system-ui, sans-serif)',
+        }}
+      >
+        {/* Header */}
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+          }}
+        >
+          <h2
+            style={{
+              margin: 0,
+              fontSize: 'var(--text-heading-size, 18px)',
+              fontWeight: 600,
+              lineHeight: 'var(--text-heading-line-height, 1.25)',
+              color: 'var(--color-text-primary, #111318)',
+            }}
+          >
+            How to enable notifications
+          </h2>
+          <button
+            onClick={onClose}
+            aria-label="Close instructions"
+            style={{
+              background: 'none',
+              border: 'none',
+              cursor: 'pointer',
+              minWidth: '44px',
+              minHeight: '44px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: 'var(--color-text-secondary, #5c6472)',
+              borderRadius: 'var(--space-1, 4px)',
+            }}
+          >
+            <X size={20} aria-hidden="true" />
+          </button>
+        </div>
+
+        {/* Steps */}
+        <ol
+          style={{
+            margin: 0,
+            padding: 0,
+            listStyle: 'none',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 'var(--space-3, 12px)',
+          }}
+        >
+          {steps.map((step, i) => (
+            <li
+              key={i}
+              style={{
+                display: 'flex',
+                alignItems: 'flex-start',
+                gap: 'var(--space-3, 12px)',
+              }}
+            >
+              <span
+                style={{
+                  flexShrink: 0,
+                  width: '28px',
+                  height: '28px',
+                  borderRadius: '50%',
+                  background: 'var(--color-destructive, #DC2626)',
+                  color: '#ffffff',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  fontSize: '13px',
+                  fontWeight: 600,
+                  fontFamily: 'var(--font-family-base, system-ui, sans-serif)',
+                }}
+              >
+                {i + 1}
+              </span>
+              <span
+                style={{
+                  fontSize: 'var(--text-body-size, 15px)',
+                  lineHeight: 'var(--text-body-line-height, 1.5)',
+                  color: 'var(--color-text-primary, #111318)',
+                  paddingTop: '4px',
+                }}
+              >
+                {step}
+              </span>
+            </li>
+          ))}
+        </ol>
+
+        {/* Done button */}
+        <button
+          onClick={onClose}
+          style={{
+            background: 'var(--color-text-primary, #111318)',
+            color: '#ffffff',
+            border: 'none',
+            borderRadius: 'var(--space-1, 4px)',
+            minHeight: '44px',
+            padding: '0 var(--space-4, 16px)',
+            fontSize: 'var(--text-label-size, 13px)',
+            fontWeight: 600,
+            cursor: 'pointer',
+            fontFamily: 'var(--font-family-base, system-ui, sans-serif)',
+            alignSelf: 'stretch',
+          }}
+        >
+          Done
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/pwa/src/components/PermissionDeniedBanner.tsx b/apps/pwa/src/components/PermissionDeniedBanner.tsx
index c51e500..a0ee1dd 100644
--- a/apps/pwa/src/components/PermissionDeniedBanner.tsx
+++ b/apps/pwa/src/components/PermissionDeniedBanner.tsx
@@ -19,187 +19,9 @@
  */
 
 import { useState } from 'react'
-import { AlertCircle, X } from 'lucide-react'
+import { AlertCircle } from 'lucide-react'
 import { readNotificationsEnabled } from '../hooks/usePushSubscription.js'
-
-// ── OS detection ──────────────────────────────────────────────────────────
-
-function isIOS(): boolean {
-  return /iPad|iPhone|iPod/.test(navigator.userAgent) &&
-    !(window as unknown as { MSStream?: unknown }).MSStream
-}
-
-// ── Instruction steps ────────────────────────────────────────────────────
-
-const IOS_STEPS = [
-  'Open Settings on your iPhone',
-  'Scroll down and tap Safari',
-  'Tap Notifications',
-  'Allow notifications for FamilySync',
-]
-
-const ANDROID_STEPS = [
-  'Open Chrome on your phone',
-  'Tap the three-dot menu → Settings',
-  'Tap Site Settings → Notifications',
-  'Find FamilySync and tap Allow',
-]
-
-// ── Instruction sheet ────────────────────────────────────────────────────
-
-interface InstructionSheetProps {
-  onClose: () => void
-}
-
-function InstructionSheet({ onClose }: InstructionSheetProps) {
-  const steps = isIOS() ? IOS_STEPS : ANDROID_STEPS
-  const platform = isIOS() ? 'iOS' : 'Android'
-
-  return (
-    <div
-      role="dialog"
-      aria-modal="true"
-      aria-label={`Re-enable notifications on ${platform}`}
-      style={{
-        position: 'fixed',
-        inset: 0,
-        background: 'var(--color-overlay, rgba(0,0,0,0.32))',
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'flex-end',
-        zIndex: 1000,
-      }}
-      onClick={(e) => {
-        if (e.target === e.currentTarget) onClose()
-      }}
-    >
-      <div
-        style={{
-          background: 'var(--color-surface, #ffffff)',
-          borderRadius: '12px 12px 0 0',
-          padding: 'var(--space-6, 24px)',
-          maxHeight: '90dvh',
-          overflowY: 'auto',
-          display: 'flex',
-          flexDirection: 'column',
-          gap: 'var(--space-4, 16px)',
-          fontFamily: 'var(--font-family-base, system-ui, sans-serif)',
-        }}
-      >
-        {/* Header */}
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-          }}
-        >
-          <h2
-            style={{
-              margin: 0,
-              fontSize: 'var(--text-heading-size, 18px)',
-              fontWeight: 600,
-              lineHeight: 'var(--text-heading-line-height, 1.25)',
-              color: 'var(--color-text-primary, #111318)',
-            }}
-          >
-            How to enable notifications
-          </h2>
-          <button
-            onClick={onClose}
-            aria-label="Close instructions"
-            style={{
-              background: 'none',
-              border: 'none',
-              cursor: 'pointer',
-              minWidth: '44px',
-              minHeight: '44px',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              color: 'var(--color-text-secondary, #5c6472)',
-              borderRadius: 'var(--space-1, 4px)',
-            }}
-          >
-            <X size={20} aria-hidden="true" />
-          </button>
-        </div>
-
-        {/* Steps */}
-        <ol
-          style={{
-            margin: 0,
-            padding: 0,
-            listStyle: 'none',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 'var(--space-3, 12px)',
-          }}
-        >
-          {steps.map((step, i) => (
-            <li
-              key={i}
-              style={{
-                display: 'flex',
-                alignItems: 'flex-start',
-                gap: 'var(--space-3, 12px)',
-              }}
-            >
-              <span
-                style={{
-                  flexShrink: 0,
-                  width: '28px',
-                  height: '28px',
-                  borderRadius: '50%',
-                  background: 'var(--color-destructive, #DC2626)',
-                  color: '#ffffff',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  fontSize: '13px',
-                  fontWeight: 600,
-                  fontFamily: 'var(--font-family-base, system-ui, sans-serif)',
-                }}
-              >
-                {i + 1}
-              </span>
-              <span
-                style={{
-                  fontSize: 'var(--text-body-size, 15px)',
-                  lineHeight: 'var(--text-body-line-height, 1.5)',
-                  color: 'var(--color-text-primary, #111318)',
-                  paddingTop: '4px',
-                }}
-              >
-                {step}
-              </span>
-            </li>
-          ))}
-        </ol>
-
-        {/* Done button */}
-        <button
-          onClick={onClose}
-          style={{
-            background: 'var(--color-text-primary, #111318)',
-            color: '#ffffff',
-            border: 'none',
-            borderRadius: 'var(--space-1, 4px)',
-            minHeight: '44px',
-            padding: '0 var(--space-4, 16px)',
-            fontSize: 'var(--text-label-size, 13px)',
-            fontWeight: 600,
-            cursor: 'pointer',
-            fontFamily: 'var(--font-family-base, system-ui, sans-serif)',
-            alignSelf: 'stretch',
-          }}
-        >
-          Done
-        </button>
-      </div>
-    </div>
-  )
-}
+import { InstructionSheet } from './InstructionSheet.js'
 
 // ── PermissionDeniedBanner ────────────────────────────────────────────────