diff --git a/src/App.css b/src/App.css
index 187227f..f39b177 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1117,10 +1117,20 @@
   background: #080808;
   border-top: 1px solid rgba(201, 168, 76, 0.18);
   border-bottom: 1px solid rgba(201, 168, 76, 0.18);
-  padding: 5rem 0;
+  padding: 4rem 0;
   text-align: center;
 }
 
+.tfl-label-row {
+  text-align: center;
+  margin-bottom: 1.5rem;
+}
+
+.tfl-label-row .section-heading {
+  text-align: center;
+  margin-bottom: 0.5rem;
+}
+
 .tfl-attribution {
   color: #8a7f5a;
   font-size: 0.9rem;
diff --git a/src/App.tsx b/src/App.tsx
index 4bcea6a..4360ce8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1059,36 +1059,53 @@ function HomepageNewsletterSection() {
 type TflWidgetType = 'audiodevo' | 'abdevotional'
 
 function TruthForLifeWidget({ type = 'audiodevo' }: { type?: TflWidgetType }) {
-  useEffect(() => {
-    // TFL's script looks for #tfl-syndicate-container synchronously when it loads.
-    // The div is already in the DOM by the time this effect runs, so we just
-    // inject the script and it will find and populate the container.
-    const existing = document.getElementById('tfl-syn-script')
-    if (existing) existing.remove()
+  // Use an iframe so TFL's script gets a fresh page context with its own
+  // DOMContentLoaded — required because this is a SPA and that event has
+  // already fired on the outer page before this component ever mounts.
+  const iframeHeight = type === 'audiodevo' ? '420' : '800'
 
-    const container = document.getElementById('tfl-syndicate-container')
-    if (container) container.innerHTML = ''
-
-    const script = document.createElement('script')
-    script.id = 'tfl-syn-script'
-    script.src = `https://www.truthforlife.org/static/js/responsive/lib/syndicate.js?type=${type}&id=458890`
-    script.async = true
-    document.body.appendChild(script)
-
-    return () => { script.remove() }
-  }, [type])
+  const srcdoc = `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <style>
+    html, body { margin: 0; padding: 0; background: #ffffff; overflow: hidden; }
+    #tfl-syndicate-container { font-family: Georgia, serif; }
+    /* Hide the widget's own heading since our section already has one */
+    #tfl-syndicate-container h2,
+    #tfl-syndicate-container h3,
+    #tfl-syndicate-container > *:first-child > h2,
+    #tfl-syndicate-container > *:first-child > h3 { display: none; }
+  </style>
+</head>
+<body>
+  <script id="syn_script" src="https://www.truthforlife.org/static/js/responsive/lib/syndicate.js?type=${type}&id=458890" type="text/javascript"></script>
+  <div id="tfl-syndicate-container"></div>
+</body>
+</html>`
 
   return (
     <section className="section-tfl" aria-label="Truth For Life devotional">
       <div className="section-inner">
-        <p className="eyebrow">Daily Devotional</p>
-        <h2 className="section-heading">
-          <span className="ornament">✦</span> Truth For Life <span className="ornament">✦</span>
-        </h2>
-        <p className="tfl-attribution">
-          Teaching from <a href="https://www.truthforlife.org" target="_blank" rel="noreferrer" className="tfl-link">Truth For Life</a> with Alistair Begg
-        </p>
-        <div id="tfl-syndicate-container" className="tfl-widget-wrap" />
+        <div className="tfl-label-row">
+          <h2 className="section-heading" style={{ marginBottom: '0.25rem' }}>
+            <span className="ornament">✦</span> Daily Devotional <span className="ornament">✦</span>
+          </h2>
+          <p className="tfl-attribution" style={{ marginBottom: '1rem' }}>
+            <a href="https://www.truthforlife.org" target="_blank" rel="noreferrer" className="tfl-link" style={{ fontSize: '1rem', fontWeight: 600 }}>Truth For Life</a>
+            {' '}with Alistair Begg
+          </p>
+        </div>
+        <div className="tfl-widget-wrap">
+          <iframe
+            srcDoc={srcdoc}
+            title="Truth For Life daily devotional"
+            width="100%"
+            height={iframeHeight}
+            style={{ border: 'none', display: 'block', borderRadius: '10px' }}
+            sandbox="allow-scripts allow-same-origin allow-popups"
+          />
+        </div>
       </div>
     </section>
   )
