diff --git a/content/guides/02.content/5.live-preview.md b/content/guides/02.content/5.live-preview.md
index 4daf7069..5fb4d1e2 100644
--- a/content/guides/02.content/5.live-preview.md
+++ b/content/guides/02.content/5.live-preview.md
@@ -5,6 +5,23 @@ description: Learn to set up your project for live previewing items from your ap
 
 Live preview allows you to show changes in your website collection before publishing and without the need to refresh the browser.
 
+## Live Preview Pre-Requisites
+
+Before setting up live preview, ensure your Directus instance can embed external content.
+
+**Required Environment Variable**
+
+Your website will not be able to speak to your Directus instance if you do not set `CONTENT_SECURITY_POLICY_DIRECTIVES__FRAME_SRC="<your-website-base-url>"` within your instances env. 
+
+[Learn more](/configuration/security-limits) about Directus env security settings.
+
+**Configure Your Website Content Security Policy**
+
+Your website must allow Directus to embed it in an iframe. Add this header to your website: `Content-Security-Policy: frame-ancestors 'self' <your-directus-url>;` If you're unsure where to add this, check your web server configuration files, your site's build configuration, or your hosting platform's security settings.
+
+For more information, see the [Live Preview Reference Tutorials](#reference-tutorials).
+
+
 ## Configure a Live Preview URL
 
 ![Data Studio configuration for Posts collection. The Preview URL is filled in with the dynamic ID.](/img/e3619c91-8917-4014-9ad1-5d7cd2b59ff4.webp)
@@ -36,3 +53,10 @@ and “click” save, you should see a live preview of the item on the right-han
 ![Live preview of a post](/img/ae834006-2b0b-40df-87aa-66e5c2da1987.webp)
 
 Clicking on :icon{name="material-symbols:devices"} also lets you preview your content on desktop and mobile screens, while :icon{name="material-symbols:open-in-new"} allows you to pop the live preview out into a separate window.
+
+## Reference Tutorials
+ - [Implementing Live Preview in Astro](../../tutorials/1.getting-started/implementing-live-preview-in-astro.md)
+ - [Implementing Live Preview in Next.js](../../tutorials/1.getting-started/implementing-live-preview-in-next-js.md)
+ - [Implementing Live Preview in Nuxt](../../tutorials/1.getting-started/implementing-live-preview-in-nuxt.md)
+ - [Implementing Live Preview in React](../../tutorials/1.getting-started/implementing-live-preview-in-react.md)
+ - [Implementing Live Preview in SvelteKit](../../tutorials/1.getting-started/implementing-live-preview-in-sveltekit.md)
\ No newline at end of file